/* style.css — BullRun */
:root{
  --bg:#0d1117;
  --bg2:#010409;
  --panel:#161b22;
  --panel2:#1c232c;
  --border:#21262d;
  --border2:#30363d;
  --text:#c9d1d9;
  --text-strong:#f0f6fc;
  --muted:#8b949e;
  --up:#2ea043;
  --up-bg:rgba(46,160,67,.14);
  --down:#f85149;
  --down-bg:rgba(248,81,73,.14);
  --accent:#388bfd;
  --accent-bg:rgba(56,139,253,.14);
  --gold:#d4a72c;
  --gold-bg:rgba(212,167,44,.14);
  --shadow:0 8px 24px rgba(0,0,0,.4);
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f5f6f8;
    --bg2:#ebedf0;
    --panel:#ffffff;
    --panel2:#f6f8fa;
    --border:#e1e4e8;
    --border2:#d0d7de;
    --text:#1f2328;
    --text-strong:#0a0c10;
    --muted:#57606a;
    --up:#1a7f37;
    --up-bg:rgba(26,127,55,.12);
    --down:#cf222e;
    --down-bg:rgba(207,34,46,.12);
    --accent:#0969da;
    --accent-bg:rgba(9,105,218,.1);
    --gold:#9a6700;
    --gold-bg:rgba(154,103,0,.12);
    --shadow:0 6px 18px rgba(0,0,0,.1);
    color-scheme:light;
  }
}
html[data-theme="dark"]{
  --bg:#0d1117; --bg2:#010409; --panel:#161b22; --panel2:#1c232c;
  --border:#21262d; --border2:#30363d; --text:#c9d1d9; --text-strong:#f0f6fc;
  --muted:#8b949e; --up:#2ea043; --up-bg:rgba(46,160,67,.14);
  --down:#f85149; --down-bg:rgba(248,81,73,.14); --accent:#388bfd;
  --accent-bg:rgba(56,139,253,.14); --gold:#d4a72c; --gold-bg:rgba(212,167,44,.14);
  --shadow:0 8px 24px rgba(0,0,0,.4); color-scheme:dark;
}
html[data-theme="light"]{
  --bg:#f5f6f8; --bg2:#ebedf0; --panel:#ffffff; --panel2:#f6f8fa;
  --border:#e1e4e8; --border2:#d0d7de; --text:#1f2328; --text-strong:#0a0c10;
  --muted:#57606a; --up:#1a7f37; --up-bg:rgba(26,127,55,.12);
  --down:#cf222e; --down-bg:rgba(207,34,46,.12); --accent:#0969da;
  --accent-bg:rgba(9,105,218,.1); --gold:#9a6700; --gold-bg:rgba(154,103,0,.12);
  --shadow:0 6px 18px rgba(0,0,0,.1); color-scheme:light;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  touch-action:manipulation;
  font-size:14px;
  line-height:1.4;
}

.app{
  height:100%;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(1200px 400px at 20% -10%, var(--accent-bg), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, var(--gold-bg), transparent 55%),
    var(--bg);
}

/* topbar */
.topbar{
  flex:0 0 auto;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  background:rgba(13,17,23,.7);
  backdrop-filter:blur(8px);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.logo{
  font-size:24px;
  width:40px; height:40px;
  display:grid; place-items:center;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
}
.brand-text{ flex:1; }
.brand-name{
  font-weight:700;
  font-size:18px;
  letter-spacing:.3px;
  color:var(--text-strong);
}
.brand-sub{ font-size:12px; color:var(--muted); }
.reset-btn{
  background:var(--panel);
  border:1px solid var(--border2);
  color:var(--text);
  width:38px; height:38px;
  border-radius:10px;
  font-size:18px;
  cursor:pointer;
  transition:transform .15s, background .15s, border-color .15s;
}
.reset-btn:hover{ background:var(--panel2); border-color:var(--accent); transform:rotate(-60deg); }
.reset-btn:active{ transform:rotate(-180deg); }

.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
.stat{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 10px;
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.stat-label{ font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); }
.stat-val{ font-weight:700; font-size:15px; color:var(--text-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stat-val.accent{ color:var(--accent); }
.stat-val.gold{ color:var(--gold); }
.stat-val.pos{ color:var(--up); }
.stat-val.neg{ color:var(--down); }

/* grid */
.grid{
  flex:1 1 auto;
  display:grid;
  grid-template-columns:1.7fr 1fr;
  gap:12px;
  padding:12px;
  min-height:0;
  overflow:auto;
}
.side{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  min-width:0;
  box-shadow:var(--shadow);
}
.stocks-panel{ display:flex; flex-direction:column; min-height:0; }
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
  gap:8px;
}
.panel-head h2{
  margin:0;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--muted);
  font-weight:600;
}
.hint{ font-size:11px; color:var(--muted); text-align:right; }
.hint .up{ color:var(--up); font-weight:700; }
.hint .down{ color:var(--down); font-weight:700; }

/* stock list */
.stock-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:auto;
  padding-right:2px;
}
.stock{
  display:grid;
  grid-template-columns:1.1fr 1fr auto;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius:12px;
  transition:border-color .15s, transform .1s, background .15s;
}
.stock:hover{ border-color:var(--border2); background:var(--panel); }
.stock.locked{ opacity:.55; }
.stock-info{ min-width:0; }
.sym{ font-weight:700; color:var(--text-strong); font-size:15px; }
.co{ font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.held{ font-size:11px; color:var(--accent); margin-top:2px; }
.spark{ width:100%; height:28px; display:block; }
.stock-right{ text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.price{ font-weight:700; color:var(--text-strong); font-size:14px; }
.chg{ font-size:12px; font-weight:600; }
.chg.up{ color:var(--up); }
.chg.down{ color:var(--down); }
.sess{ font-size:10px; color:var(--muted); }
.trade-btns{ display:flex; gap:6px; margin-top:6px; }
.tbtn{
  border:1px solid var(--border2);
  background:transparent;
  color:var(--text);
  padding:5px 12px;
  border-radius:8px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:background .12s, border-color .12s, color .12s, transform .08s;
}
.tbtn.buy{ color:var(--up); border-color:var(--up); }
.tbtn.buy:hover:not(:disabled){ background:var(--up); color:#fff; }
.tbtn.sell{ color:var(--down); border-color:var(--down); }
.tbtn.sell:hover:not(:disabled){ background:var(--down); color:#fff; }
.tbtn:hover:not(:disabled){ transform:translateY(-1px); }
.tbtn:active:not(:disabled){ transform:translateY(0); }
.tbtn:disabled{ opacity:.35; cursor:not-allowed; }
.lock-tag{
  font-size:11px;
  color:var(--muted);
  border:1px dashed var(--border2);
  padding:4px 10px;
  border-radius:8px;
}

/* portfolio */
.portfolio-list{ display:flex; flex-direction:column; gap:6px; }
.pos{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:9px 11px;
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius:10px;
  border-left:3px solid var(--border2);
  transition:border-color .15s, background .15s;
}
.pos.gain{
  border-left-color:var(--up);
  background:linear-gradient(90deg, var(--up-bg), var(--panel2) 70%);
}
.pos.loss{
  border-left-color:var(--down);
  background:linear-gradient(90deg, var(--down-bg), var(--panel2) 70%);
}
.pos-row1, .pos-row2{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.pos-row1{ font-size:13px; }
.pos-sym{ font-weight:700; color:var(--text-strong); }
.pos-shares{ font-size:12px; color:var(--muted); }
.pos-val{ font-weight:700; color:var(--text-strong); }
.pos-row2{ font-size:11px; color:var(--muted); }
.pos-cost, .pos-cur{ white-space:nowrap; }
.pos-change{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:8px;
  margin-top:4px;
  padding:7px 10px;
  border-radius:8px;
  font-size:12px;
}
.pos-change.up{
  background:var(--up-bg);
  color:var(--up);
}
.pos-change.down{
  background:var(--down-bg);
  color:var(--down);
}
.pc-label{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.5px;
  opacity:.85;
  font-weight:600;
}
.pc-amt{
  font-weight:800;
  font-size:14px;
  text-align:center;
  white-space:nowrap;
}
.pc-pct{
  font-weight:700;
  font-size:12px;
  white-space:nowrap;
}
.empty{
  padding:14px;
  text-align:center;
  color:var(--muted);
  font-size:12px;
  background:var(--panel2);
  border:1px dashed var(--border2);
  border-radius:10px;
}

/* loan */
.loan-row{
  display:flex;
  justify-content:space-between;
  padding:6px 2px;
  font-size:13px;
  border-bottom:1px solid var(--border);
}
.loan-row:last-of-type{ border-bottom:none; }
.loan-row .accent{ color:var(--accent); font-weight:600; }
.loan-row .neg{ color:var(--down); font-weight:600; }
.loan-actions{ display:flex; gap:8px; margin-top:10px; }
.loan-actions .tbtn{ flex:1; }

/* leaderboard */
.leaderboard{ display:flex; flex-direction:column; gap:4px; }
.lb-row{
  display:grid;
  grid-template-columns:24px 1fr auto;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius:8px;
}
.lb-row.you{
  border-color:var(--gold);
  background:var(--gold-bg);
}
.lb-rank{
  width:22px; height:22px;
  display:grid; place-items:center;
  background:var(--panel);
  border:1px solid var(--border2);
  border-radius:6px;
  font-size:11px;
  font-weight:700;
  color:var(--muted);
}
.lb-row.you .lb-rank{ color:var(--gold); border-color:var(--gold); }
.lb-name{ font-size:13px; }
.lb-name .you-tag{
  font-size:9px;
  background:var(--gold);
  color:#1a1300;
  padding:1px 6px;
  border-radius:6px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.4px;
  margin-left:4px;
  vertical-align:middle;
}
.lb-worth{ font-weight:700; color:var(--text-strong); font-size:13px; }

/* toast */
.toast{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translate(-50%, 30px);
  background:var(--panel);
  border:1px solid var(--border2);
  color:var(--text-strong);
  padding:10px 18px;
  border-radius:10px;
  font-size:13px;
  font-weight:500;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s, transform .25s;
  box-shadow:var(--shadow);
  max-width:90vw;
  z-index:50;
}
.toast.show{ opacity:1; transform:translate(-50%, 0); }

/* modal */
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(4px);
  display:none;
  align-items:flex-end;
  justify-content:center;
  z-index:60;
  padding:0;
}
.modal-backdrop.show{ display:flex; animation:fade .18s ease; }
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }
.modal{
  background:var(--panel);
  border:1px solid var(--border2);
  border-radius:18px 18px 0 0;
  padding:18px;
  width:min(440px, 100%);
  box-shadow:var(--shadow);
  animation:slideUp .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes slideUp{ from{ transform:translateY(40px); opacity:.4 } to{ transform:translateY(0); opacity:1 } }
.modal-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:10px;
}
.modal-sym{ font-size:20px; font-weight:800; color:var(--text-strong); }
.modal-act{ font-size:11px; padding:2px 8px; border-radius:6px; font-weight:700; margin-left:6px; vertical-align:middle; }
.modal-act.buy{ background:var(--up-bg); color:var(--up); }
.modal-act.sell{ background:var(--down-bg); color:var(--down); }
.modal-co{ font-size:12px; color:var(--muted); margin-top:2px; }
.modal-x{
  background:transparent;
  border:none;
  color:var(--muted);
  font-size:18px;
  cursor:pointer;
  width:32px; height:32px;
  border-radius:8px;
}
.modal-x:hover{ background:var(--panel2); color:var(--text-strong); }
.modal-bal{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:var(--muted);
  padding:8px 10px;
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius:10px;
  margin-bottom:14px;
}
.modal-bal b{ color:var(--text-strong); }
.qty-row{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.qty-step{
  width:44px; height:46px;
  background:var(--panel2);
  border:1px solid var(--border2);
  color:var(--text-strong);
  border-radius:10px;
  font-size:22px;
  cursor:pointer;
  transition:background .12s, transform .08s;
}
.qty-step:hover{ background:var(--panel); }
.qty-step:active{ transform:scale(.94); }
.qty-input{
  flex:1;
  height:46px;
  background:var(--panel2);
  border:1px solid var(--border2);
  color:var(--text-strong);
  border-radius:10px;
  text-align:center;
  font-size:20px;
  font-weight:700;
  outline:none;
}
.qty-input:focus{ border-color:var(--accent); }
.qty-est{
  display:flex;
  justify-content:space-between;
  padding:8px 10px;
  background:var(--accent-bg);
  border:1px solid transparent;
  border-radius:10px;
  font-size:13px;
  margin-bottom:10px;
}
.qty-est b{ color:var(--accent); font-size:15px; }
.qty-presets{ display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin-bottom:14px; }
.qp{
  background:var(--panel2);
  border:1px solid var(--border2);
  color:var(--text);
  padding:8px 0;
  border-radius:8px;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:background .12s, border-color .12s, transform .08s;
}
.qp:hover{ background:var(--panel); border-color:var(--accent); color:var(--accent); }
.qp:active{ transform:scale(.95); }
.qp.max{ grid-column:span 1; color:var(--gold); border-color:var(--gold); }
.modal-confirm{
  width:100%;
  padding:14px;
  border:none;
  border-radius:12px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  color:#fff;
  transition:transform .1s, filter .12s;
}
.modal-confirm.buy{ background:var(--up); }
.modal-confirm.sell{ background:var(--down); }
.modal-confirm:hover{ filter:brightness(1.08); }
.modal-confirm:active{ transform:scale(.98); }

/* responsive */
@media (max-width:760px){
  .grid{ grid-template-columns:1fr; overflow:auto; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stock{ grid-template-columns:1fr auto; }
  .stock .spark{ grid-column:1 / -1; order:3; }
  .stock-right{ grid-column:2; }
  .pos-change{ grid-template-columns:1fr; text-align:center; gap:4px; }
  .pc-amt{ font-size:15px; }
}
@media (max-width:380px){
  .stats{ grid-template-columns:1fr 1fr; gap:6px; }
  .stat-val{ font-size:13px; }
  .topbar{ padding:10px; }
  .grid{ padding:10px; gap:10px; }
}

/* scrollbars */
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-thumb{ background:var(--border2); border-radius:8px; }
*::-webkit-scrollbar-track{ background:transparent; }