/* FinScan Web App — Phase 1 scaffold styles. Reuses the brand palette. */
:root{
  --green:#10dc8a; --bg1:#0a1015; --bg2:#0d1620; --amber:#fbbf24;
  --orange:#f97316; --red:#ef4444; --white:#f0f4f8; --muted:#8b95a0; --dim:#5a6671;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  background:var(--bg1); color:var(--white);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  min-height:100vh;
}
.app-header{
  display:flex; align-items:center; gap:12px;
  padding:18px 28px; border-bottom:1px solid rgba(16,220,138,.14);
  position:sticky; top:0; background:rgba(10,16,21,.9); backdrop-filter:blur(8px); z-index:10;
}
.app-header svg{width:30px;height:30px;}
.app-header .wm{font-size:20px;font-weight:800;letter-spacing:-.4px;}
.app-header .wm b{color:var(--green);}
.app-header .spacer{flex:1;}
.app-header .who{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--muted);}
.wrap{max-width:1200px;margin:0 auto;padding:40px 28px;}
.card{
  background:var(--bg2); border:1px solid rgba(16,220,138,.16);
  border-radius:16px; padding:28px 32px; margin-bottom:20px;
}
h1{font-size:30px;font-weight:800;letter-spacing:-1px;margin-bottom:8px;}
.sub{color:var(--muted);font-size:15px;line-height:1.5;}
.status{
  font-family:'JetBrains Mono',monospace; font-size:14px;
  margin-top:18px; padding:14px 16px; border-radius:10px;
  background:var(--bg1); border:1px solid rgba(255,255,255,.06);
}
.status .ok{color:var(--green);} .status .warn{color:var(--amber);} .status .err{color:var(--red);}
.muted{color:var(--dim);font-size:12px;margin-top:24px;font-family:'JetBrains Mono',monospace;}

/* ── buttons + auth form (Block 3) ─────────────────────────────────────────── */
.btn{
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:14px;
  color:var(--bg1); background:var(--green); border:none; cursor:pointer;
  padding:11px 20px; border-radius:10px; white-space:nowrap;
}
.btn:hover{filter:brightness(1.08);}
.btn:disabled{opacity:.55;cursor:default;}
.btn.ghost{
  background:transparent; color:var(--muted);
  border:1px solid rgba(255,255,255,.14); padding:7px 14px; font-size:13px;
}
.btn.ghost:hover{color:var(--white);border-color:rgba(16,220,138,.4);}
.authform{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;}
.authform input{
  flex:1; min-width:220px;
  font-family:'JetBrains Mono',monospace; font-size:14px; color:var(--white);
  background:var(--bg1); border:1px solid rgba(255,255,255,.12);
  border-radius:10px; padding:11px 14px;
}
.authform input:focus{outline:none;border-color:var(--green);}
.upgrade{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;}

/* ── dashboard: KPIs + filters + table (Block 5) ───────────────────────────── */
.card.nopad{padding:0;overflow:hidden;}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;}
.kpi{
  background:var(--bg2); border:1px solid rgba(16,220,138,.16);
  border-radius:14px; padding:18px 20px;
}
.kpi-l{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;}
.kpi-v{font-family:'JetBrains Mono',monospace;font-size:24px;font-weight:700;margin-top:6px;}
@media(max-width:720px){.kpis{grid-template-columns:repeat(2,1fr);}}

.viewtabs{
  display:flex; gap:4px; padding:12px 14px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.vtab{
  font-family:'Plus Jakarta Sans',sans-serif; font-size:13px; font-weight:700;
  color:var(--muted); background:transparent; border:none;
  border-bottom:2px solid transparent; padding:9px 16px; margin-bottom:-1px;
  cursor:pointer; border-radius:8px 8px 0 0;
}
.vtab:hover{color:var(--white);}
.vtab.active{color:var(--green); border-bottom-color:var(--green); background:rgba(16,220,138,.07);}

.filters{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.06);
}
.filters input,.filters select{
  font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--white);
  background:var(--bg1); border:1px solid rgba(255,255,255,.12);
  border-radius:8px; padding:9px 12px;
}
.filters input:focus,.filters select:focus{outline:none;border-color:var(--green);}
.filters #q{flex:1;min-width:200px;}
.filters #fscore{width:120px;}
.rowcount{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--dim);}
.btn.sm{padding:8px 14px;font-size:12px;}

.tablewrap{overflow-x:auto;max-height:70vh;overflow-y:auto;}
.utable{width:100%;border-collapse:collapse;font-size:13px;}
.utable thead th{
  position:sticky; top:0; z-index:1; background:var(--bg2);
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; color:var(--muted);
  text-align:left; padding:12px 14px; white-space:nowrap; cursor:pointer;
  border-bottom:1px solid rgba(16,220,138,.18); user-select:none;
}
.utable thead th:hover{color:var(--white);}
.utable td{
  padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.05);
  font-family:'JetBrains Mono',monospace; white-space:nowrap;
}
.utable td.num,.utable th.num{text-align:right;font-variant-numeric:tabular-nums;}
.utable td.sym{font-weight:700;color:var(--white);}
.utable tbody tr:hover{background:rgba(16,220,138,.04);}
.utable td.empty{text-align:center;color:var(--dim);padding:28px;font-family:'Plus Jakarta Sans',sans-serif;}

.vbadge{
  display:inline-block; padding:3px 9px; border-radius:20px;
  font-family:'Plus Jakarta Sans',sans-serif; font-size:11px; font-weight:700;
}
.vbadge.v-out  {background:rgba(16,220,138,.16);color:var(--green);}
.vbadge.v-perf {background:rgba(16,220,138,.10);color:#7fe9c0;}
.vbadge.v-neut {background:rgba(251,191,36,.14);color:var(--amber);}
.vbadge.v-under{background:rgba(249,115,22,.14);color:var(--orange);}
.vbadge.v-weak {background:rgba(239,68,68,.14);color:var(--red);}

.note{
  display:inline-block; padding:2px 8px; border-radius:6px;
  font-family:'Plus Jakarta Sans',sans-serif; font-size:11px; font-weight:600;
  background:rgba(255,255,255,.06); color:var(--muted);
}
.note.note-warn{background:rgba(251,191,36,.14);color:var(--amber);}

.cat{
  display:inline-block; padding:2px 8px; border-radius:6px; white-space:nowrap;
  font-family:'Plus Jakarta Sans',sans-serif; font-size:11px; font-weight:600;
}
.cat-good{background:rgba(16,220,138,.12);color:var(--green);}
.cat-mid {background:rgba(251,191,36,.12);color:var(--amber);}
.cat-bad {background:rgba(239,68,68,.12);color:var(--red);}

/* ── free-pick picker (Block 8) ────────────────────────────────────────────── */
.picks{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 0;}
.pchip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700;
  color:var(--green); background:rgba(16,220,138,.12);
  border:1px solid rgba(16,220,138,.32); border-radius:20px; padding:6px 8px 6px 12px;
}
.pchip.locked{padding:6px 12px;}
.pchip button{
  border:none; background:rgba(255,255,255,.08); color:var(--white);
  width:18px; height:18px; border-radius:50%; cursor:pointer;
  font-size:12px; line-height:1; display:grid; place-items:center;
}
.pchip button:hover{background:var(--red);}
.picksearch{position:relative;margin-top:14px;max-width:420px;}
.picksearch input{
  width:100%; font-family:'JetBrains Mono',monospace; font-size:14px; color:var(--white);
  background:var(--bg1); border:1px solid rgba(255,255,255,.12);
  border-radius:10px; padding:11px 14px;
}
.picksearch input:focus{outline:none;border-color:var(--green);}
.picksearch input:disabled{opacity:.5;cursor:not-allowed;}
.pmenu{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:20;
  background:var(--bg2); border:1px solid rgba(16,220,138,.24); border-radius:10px;
  overflow:hidden; box-shadow:0 12px 32px rgba(0,0,0,.45);
}
.pmenu-item{
  display:flex; align-items:baseline; gap:10px; padding:10px 14px; cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.pmenu-item:last-child{border-bottom:none;}
.pmenu-item:hover{background:rgba(16,220,138,.08);}
.pmenu-item .ps{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--white);}
.pmenu-item .pn{font-size:13px;color:var(--muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pmenu-item .pc{font-size:11px;color:var(--dim);}
.pmenu-item.none{color:var(--dim);cursor:default;}

/* ── welcome banner + empty state + mobile (Block 7) ───────────────────────── */
.card.welcome{
  border-color:rgba(16,220,138,.4);
  background:linear-gradient(180deg,rgba(16,220,138,.10),var(--bg2));
  font-size:15px;font-weight:600;
}
.empty-state{text-align:center;padding:48px 32px;}
.empty-state .sub{max-width:460px;margin:8px auto 0;}

@media(max-width:640px){
  .wrap{padding:24px 16px;}
  .app-header{padding:14px 16px;}
  .app-header .who{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .card{padding:22px 18px;}
  h1{font-size:24px;}
  .filters #q{min-width:140px;}
}