:root{
  --ground:#EDEFF4; --surface:#FFFFFF; --raised:#F6F7FA; --line:#DBDFE8; --line-soft:#E7EAF1;
  --ink:#161B27; --muted:#5A6376; --faint:#8791A4;
  --accent:#3A50DA; --accent-ink:#2B3CAE; --accent-weak:#E9ECFB; --accent-line:#C9D0F4;
  --good:#2E9E6B; --good-bg:#E4F2EB; --warn:#B9821A; --warn-bg:#F6EDD8; --crit:#D14259; --crit-bg:#F9E5EA;
  --shadow:0 1px 2px rgba(20,26,40,.05), 0 6px 20px rgba(20,26,40,.05);
  --shadow-lift:0 2px 6px rgba(20,26,40,.08), 0 16px 40px rgba(20,26,40,.10);
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --r:12px; --r-sm:8px;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#0C1019; --surface:#141A27; --raised:#1A2130; --line:#28303F; --line-soft:#212836;
    --ink:#E7EBF3; --muted:#98A2B6; --faint:#697187;
    --accent:#8296FF; --accent-ink:#A9B8FF; --accent-weak:#1A2340; --accent-line:#2C3766;
    --good:#43C08A; --good-bg:#123026; --warn:#DDA23A; --warn-bg:#2C230F; --crit:#F0728A; --crit-bg:#31151E;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 22px rgba(0,0,0,.35);
    --shadow-lift:0 2px 8px rgba(0,0,0,.5), 0 20px 46px rgba(0,0,0,.5);
  }
}
:root[data-theme="light"]{
  --ground:#EDEFF4; --surface:#FFFFFF; --raised:#F6F7FA; --line:#DBDFE8; --line-soft:#E7EAF1;
  --ink:#161B27; --muted:#5A6376; --faint:#8791A4;
  --accent:#3A50DA; --accent-ink:#2B3CAE; --accent-weak:#E9ECFB; --accent-line:#C9D0F4;
  --good:#2E9E6B; --good-bg:#E4F2EB; --warn:#B9821A; --warn-bg:#F6EDD8; --crit:#D14259; --crit-bg:#F9E5EA;
  --shadow:0 1px 2px rgba(20,26,40,.05), 0 6px 20px rgba(20,26,40,.05);
  --shadow-lift:0 2px 6px rgba(20,26,40,.08), 0 16px 40px rgba(20,26,40,.10);
}
:root[data-theme="dark"]{
  --ground:#0C1019; --surface:#141A27; --raised:#1A2130; --line:#28303F; --line-soft:#212836;
  --ink:#E7EBF3; --muted:#98A2B6; --faint:#697187;
  --accent:#8296FF; --accent-ink:#A9B8FF; --accent-weak:#1A2340; --accent-line:#2C3766;
  --good:#43C08A; --good-bg:#123026; --warn:#DDA23A; --warn-bg:#2C230F; --crit:#F0728A; --crit-bg:#31151E;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 22px rgba(0,0,0,.35);
  --shadow-lift:0 2px 8px rgba(0,0,0,.5), 0 20px 46px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--sans); background:var(--ground); color:var(--ink); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.lbl{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

/* ---- login ---- */
.login-wrap{min-height:100vh; display:grid; place-items:center; padding:24px;
  background:radial-gradient(1200px 600px at 50% -10%, var(--accent-weak), transparent 60%), var(--ground)}
.login{width:100%; max-width:360px; background:var(--surface); border:1px solid var(--line-soft); border-radius:16px;
  box-shadow:var(--shadow-lift); padding:30px 30px 26px}
.login .brand{display:flex; align-items:center; gap:11px; margin-bottom:22px}
.login .mark{width:34px; height:34px; border-radius:10px; background:linear-gradient(150deg,var(--accent),var(--accent-ink)); position:relative; flex:none}
.login .mark::after{content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; transform:translate(-50%,-50%); border-radius:50%; background:#fff}
.login .brand b{font-size:16px; display:block; line-height:1.1}
.login .brand span{font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; color:var(--faint); text-transform:uppercase}
.login h1{font-size:15px; margin:0 0 4px}
.login p.sub{color:var(--muted); font-size:12.5px; margin:0 0 20px}
.field{display:block; margin-bottom:13px}
.field span{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:6px}
.field input,.field select,.field textarea{width:100%; background:var(--raised); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:10px 12px; color:var(--ink); font-family:var(--sans); font-size:14px}
.field input:focus{border-color:var(--accent-line); outline:none; background:var(--surface)}
.login .err{background:var(--crit-bg); color:var(--crit); font-size:12.5px; padding:9px 12px; border-radius:var(--r-sm); margin-bottom:14px}
.login .err a{color:inherit; font-weight:600; text-decoration:underline}
.login button{width:100%; margin-top:6px; background:var(--accent); color:#fff; border:0; border-radius:var(--r-sm); padding:11px; font-size:14px; font-weight:600; cursor:pointer}
.login button:hover{background:var(--accent-ink)}
.login .hint{margin-top:16px; font-size:11px; color:var(--faint); text-align:center}
.gbtn{display:flex; align-items:center; justify-content:center; gap:9px; width:100%; padding:11px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font-size:14px; font-weight:600; cursor:pointer; text-decoration:none}
.gbtn:hover{border-color:var(--accent-line); background:var(--raised); text-decoration:none}
.gbtn .g{display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:var(--accent); color:#fff; font-weight:700; font-size:11px; font-family:var(--mono)}
.ordiv{display:flex; align-items:center; gap:10px; margin:14px 0; color:var(--faint); font-size:11px}
.ordiv::before,.ordiv::after{content:""; flex:1; height:1px; background:var(--line-soft)}

/* ---- shell ---- */
.shell{display:grid; grid-template-columns:236px 1fr; min-height:100vh}
.rail{position:sticky; top:0; align-self:start; height:100vh; overflow:auto; background:var(--surface); border-right:1px solid var(--line); display:flex; flex-direction:column; gap:4px; padding:20px 14px}
.brand{display:flex; align-items:center; gap:10px; padding:6px 8px 18px}
.brand .mark{width:30px; height:30px; border-radius:9px; flex:none; position:relative; background:linear-gradient(150deg,var(--accent),var(--accent-ink)); box-shadow:0 2px 10px color-mix(in srgb,var(--accent) 45%, transparent)}
.brand .mark::before{content:""; position:absolute; inset:0; border-radius:9px; background:radial-gradient(circle at 30% 28%, rgba(255,255,255,.55), transparent 45%)}
.brand .mark::after{content:""; position:absolute; left:50%; top:50%; width:7px; height:7px; transform:translate(-50%,-50%); border-radius:50%; background:#fff; box-shadow:0 0 0 3px color-mix(in srgb,#fff 25%, transparent)}
.brand b{font-size:15px; letter-spacing:.02em; display:block; line-height:1.1}
.brand span{font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; color:var(--faint); text-transform:uppercase}
.nav{display:flex; flex-direction:column; gap:2px}
.nav button{display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:none; border:0; color:var(--muted); font-family:var(--sans); font-size:13.5px; padding:9px 11px; border-radius:var(--r-sm); cursor:pointer; transition:.14s}
.nav button:hover{background:var(--raised); color:var(--ink)}
.nav button.on{background:var(--accent-weak); color:var(--accent-ink); font-weight:600}
.nav button .ic{width:16px; height:16px; flex:none; opacity:.85}
.nav button .cnt{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--faint)}
.nav a.navlink{display:flex; align-items:center; gap:11px; width:100%; color:var(--muted); font-size:13.5px; padding:9px 11px; border-radius:var(--r-sm); text-decoration:none}
.nav a.navlink:hover{background:var(--raised); color:var(--ink)}
.nav a.navlink .ic{width:16px; height:16px; flex:none; opacity:.85}
.nav button.on .cnt{color:var(--accent-ink)}
.nav-sep{height:1px; background:var(--line-soft); margin:12px 8px}
.rail-foot{margin-top:auto; padding:12px 6px 4px; display:flex; flex-direction:column; gap:10px}
.who{display:flex; align-items:center; gap:10px; padding:6px 6px}
.who .av{width:28px; height:28px}
.who b{font-size:12.5px; display:block; line-height:1.15}
.who span{font-size:11px; color:var(--faint)}
.who a{margin-left:auto; font-size:11px; color:var(--faint)}
.themebtn{display:flex; align-items:center; gap:8px; justify-content:center; background:none; border:1px solid var(--line); color:var(--muted); border-radius:var(--r-sm); padding:7px 10px; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; cursor:pointer}
.themebtn:hover{border-color:var(--accent-line); color:var(--ink)}

/* ---- main ---- */
.main{min-width:0; display:flex; flex-direction:column}
.topbar{position:sticky; top:0; z-index:5; background:color-mix(in srgb,var(--ground) 82%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:16px; padding:15px 26px}
.topbar h1{font-size:17px; margin:0; letter-spacing:-.01em; font-weight:640}
.topbar .sub{color:var(--muted); font-size:12.5px}
.topbar .right{margin-left:auto; display:flex; align-items:center; gap:14px}
.live{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; color:var(--good); background:var(--good-bg); padding:5px 10px; border-radius:20px}
.live .dot{width:7px; height:7px; border-radius:50%; background:var(--good); animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 55%, transparent)}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}
.stamp{font-family:var(--mono); font-size:11px; color:var(--faint)}
.view{padding:24px 26px 70px; display:none; animation:fade .2s ease}
.view.on{display:block}
@keyframes fade{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:none}}
.loading{color:var(--faint); font-family:var(--mono); font-size:12px; padding:40px 0; text-align:center}
.eyebrow{margin:0 0 14px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.eyebrow .hint{color:var(--faint); font-size:12px}

/* ---- kpi ---- */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px}
.kpi{background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r); padding:16px 17px; box-shadow:var(--shadow)}
.kpi .k-top{display:flex; justify-content:space-between; align-items:flex-start; gap:8px}
.kpi .fig{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:26px; font-weight:600; letter-spacing:-.02em; margin:8px 0 3px}
.kpi .cap{color:var(--muted); font-size:12.5px}

/* ---- panels ---- */
.grid2{display:grid; grid-template-columns:1.1fr .9fr; gap:18px; margin-bottom:18px}
.panel{background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden}
.panel .head{display:flex; align-items:center; gap:10px; padding:15px 18px; border-bottom:1px solid var(--line-soft)}
.panel .head b{font-size:13.5px}
.panel .head .tag{margin-left:auto}
.panel .head .hint{color:var(--faint); font-size:12px}
.panel .body{padding:16px 18px}

.funnel{display:flex; flex-direction:column; gap:9px}
.fstep{display:grid; grid-template-columns:130px 1fr auto; align-items:center; gap:12px}
.fstep .fname{color:var(--muted); font-size:12.5px}
.fstep .fbar{height:26px; border-radius:6px; background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 55%, var(--surface))); min-width:30px; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 22%, transparent)}
.fstep .fbar.dim{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 42%, var(--surface)),color-mix(in srgb,var(--accent) 20%, var(--surface)))}
.fstep .fval{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:14px; font-weight:600; text-align:right}

.sources{display:grid; grid-template-columns:1fr 1fr; gap:8px; max-height:280px; overflow:auto}
.src{display:flex; align-items:center; gap:9px; padding:9px 11px; border:1px solid var(--line-soft); border-radius:var(--r-sm); background:var(--raised)}
.src .sd{width:8px; height:8px; border-radius:50%; flex:none}
.src .sd.good{background:var(--good)} .src .sd.warn{background:var(--warn)} .src .sd.crit{background:var(--crit)}
.src .sn{font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.src .ss{margin-left:auto; font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint)}

/* ---- tables ---- */
.twrap{overflow-x:auto}
table{border-collapse:collapse; width:100%; min-width:640px}
th{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); text-align:left; font-weight:500; padding:11px 14px; border-bottom:1px solid var(--line)}
th.r,td.r{text-align:right}
td{padding:11px 14px; border-bottom:1px solid var(--line-soft); font-size:13px; vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr{transition:.12s}
tbody tr:hover{background:var(--raised)}
tbody tr.clickable{cursor:pointer}
.co{font-weight:600}
.role{color:var(--muted); font-size:12px}
.chip{display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:11px; padding:2px 8px; border-radius:20px; background:var(--raised); color:var(--muted); border:1px solid var(--line-soft)}
.pill{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px; letter-spacing:.03em; padding:3px 9px; border-radius:20px; white-space:nowrap}
.pill.good{background:var(--good-bg); color:var(--good)} .pill.warn{background:var(--warn-bg); color:var(--warn)}
.pill.crit{background:var(--crit-bg); color:var(--crit)}
.pill.accent{background:var(--accent-weak); color:var(--accent-ink)} .pill.mut{background:var(--raised); color:var(--faint)}
.pill .dot{width:6px; height:6px; border-radius:50%; background:currentColor}
.meter{display:flex; align-items:center; gap:9px}
.meter .track{width:56px; height:6px; border-radius:4px; background:var(--line); overflow:hidden; flex:none}
.meter .fill{height:100%; border-radius:4px; background:linear-gradient(90deg,var(--accent),var(--accent-ink))}
.meter .mv{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:12.5px; font-weight:600; width:38px}
.opp{font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:600; color:var(--accent-ink)}
.cand{display:flex; align-items:center; gap:9px}
.av{width:26px; height:26px; border-radius:7px; flex:none; display:grid; place-items:center; font-family:var(--mono); font-size:10px; font-weight:600; color:#fff}

/* ---- toolbar (search/filters) ---- */
.toolbar{display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap}
.search{flex:1; min-width:200px; max-width:340px; position:relative}
.search input{width:100%; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:9px 14px 9px 34px; font-size:13px; color:var(--ink)}
.search input:focus{border-color:var(--accent-line); outline:none}
.search svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:var(--faint)}
.fchip{font-family:var(--mono); font-size:11px; padding:6px 12px; border-radius:20px; border:1px solid var(--line); background:var(--surface); color:var(--muted); cursor:pointer; transition:.12s}
.fchip:hover{border-color:var(--accent-line); color:var(--ink)}
.fchip.on{background:var(--accent-weak); color:var(--accent-ink); border-color:var(--accent-line)}
.count-tag{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--faint)}

/* ---- queue ---- */
.queue{display:flex; flex-direction:column; gap:16px}
.qcard{background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; transition:.18s}
.qcard.done{opacity:.55} .qcard.skip{opacity:.4}
.qbody{padding:18px 20px; display:flex; flex-direction:column; gap:13px}
.qhead{display:flex; align-items:flex-start; gap:12px}
.qhead .co{font-size:15px; font-weight:640}
.qhead .role{font-size:12.5px; margin-top:1px}
.qhead .opp{margin-left:auto; text-align:right}
.qmeta{display:flex; flex-wrap:wrap; gap:8px}
.qmatch{background:var(--raised); border:1px solid var(--line-soft); border-radius:var(--r-sm); padding:12px 13px}
.qmatch .mrow{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.qwhy{font-size:12.5px; color:var(--muted); line-height:1.5}
.qactions{display:flex; gap:9px; padding-top:2px}
.btn{font-family:var(--sans); font-size:12.5px; font-weight:600; border-radius:var(--r-sm); padding:9px 15px; cursor:pointer; border:1px solid transparent; transition:.14s}
.btn.primary{background:var(--accent); color:#fff}
.btn.primary:hover{background:var(--accent-ink)}
.btn.ghost{background:var(--surface); border-color:var(--line); color:var(--muted)}
.btn.ghost:hover{border-color:var(--accent-line); color:var(--ink)}
.btn.mut{background:none; color:var(--faint); margin-left:auto}
.btn.mut:hover{color:var(--crit)}
.btn.sm{padding:6px 11px; font-size:12px}
.btn:disabled{cursor:default; opacity:.7}

/* ---- bench grid ---- */
.bench{display:grid; grid-template-columns:repeat(auto-fill,minmax(288px,1fr)); gap:14px}
.bcard{background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r); padding:16px 17px; box-shadow:var(--shadow); transition:.16s; cursor:pointer}
.bcard:hover{box-shadow:var(--shadow-lift); transform:translateY(-2px)}
.bcard .bh{display:flex; align-items:center; gap:11px; margin-bottom:12px}
.bcard .bh b{font-size:14px}
.bcard .bh .bmeta{font-size:11.5px; color:var(--faint)}
.bcard .rf{display:flex; align-items:center; gap:8px; margin-bottom:12px}
.bcard .rfname{font-family:var(--mono); font-size:11px; color:var(--accent-ink); background:var(--accent-weak); padding:2px 8px; border-radius:5px}
.skills{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:13px}
.sk{font-size:11px; padding:3px 8px; border-radius:6px; background:var(--raised); border:1px solid var(--line-soft); color:var(--muted)}
.sk .skn{font-family:var(--mono); color:var(--ink); font-weight:600; margin-left:4px}
.bfoot{display:flex; align-items:center; gap:10px; padding-top:12px; border-top:1px solid var(--line-soft)}
.llmbar{flex:1}
.llmbar .lt{display:flex; justify-content:space-between; font-size:10px; color:var(--faint); font-family:var(--mono); letter-spacing:.05em; text-transform:uppercase; margin-bottom:4px}
.llmbar .track{height:5px; border-radius:3px; background:var(--line); overflow:hidden}
.llmbar .fill{height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-ink)); border-radius:3px}

/* ---- drawer (candidate detail) ---- */
.scrim{position:fixed; inset:0; background:rgba(10,14,22,.45); opacity:0; pointer-events:none; transition:.2s; z-index:30}
.scrim.on{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; height:100vh; width:min(460px,94vw); background:var(--surface); border-left:1px solid var(--line);
  box-shadow:var(--shadow-lift); transform:translateX(100%); transition:transform .24s ease; z-index:31; display:flex; flex-direction:column}
.drawer.on{transform:none}
.drawer .dhead{padding:20px 22px; border-bottom:1px solid var(--line-soft); display:flex; align-items:flex-start; gap:12px}
.drawer .dhead .av{width:40px; height:40px; font-size:13px}
.drawer .dhead b{font-size:16px; display:block}
.drawer .dhead .dm{font-size:12px; color:var(--muted)}
.drawer .dclose{margin-left:auto; background:none; border:0; color:var(--faint); font-size:20px; cursor:pointer; line-height:1}
.dbody{padding:18px 22px; overflow:auto; flex:1; display:flex; flex-direction:column; gap:20px}
.dsec .dt{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:10px}
.riskbtns{display:flex; gap:8px}
.riskbtn{flex:1; padding:10px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface); color:var(--muted); font-size:13px; font-weight:600; cursor:pointer; transition:.12s}
.riskbtn:hover{border-color:var(--accent-line)}
.riskbtn.low.on{background:var(--good-bg); color:var(--good); border-color:var(--good)}
.riskbtn.high.on{background:var(--crit-bg); color:var(--crit); border-color:var(--crit)}
.riskmeta{font-size:11px; color:var(--faint); margin-top:8px; font-family:var(--mono)}
.fb{display:flex; flex-direction:column; gap:10px}
.fb-row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.stars{display:flex; gap:4px}
.star{font-size:20px; color:var(--line); cursor:pointer; line-height:1}
.star.on{color:var(--warn)}
.fb textarea{min-height:70px; resize:vertical}
.fbitem{background:var(--raised); border:1px solid var(--line-soft); border-radius:var(--r-sm); padding:11px 13px}
.fbitem .fbtop{display:flex; align-items:center; gap:8px; margin-bottom:5px; font-size:12px}
.fbitem .fbtop b{font-weight:600}
.fbitem .fbtop .when{margin-left:auto; color:var(--faint); font-family:var(--mono); font-size:10.5px}
.fbitem .fbnote{font-size:12.5px; color:var(--muted); white-space:pre-wrap}

/* ---- toast ---- */
.toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0; background:var(--ink); color:var(--ground); font-size:13px; padding:11px 18px; border-radius:10px; box-shadow:var(--shadow-lift); pointer-events:none; transition:.22s; z-index:40; display:flex; align-items:center; gap:9px}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast .tk{font-family:var(--mono); color:var(--good); font-size:14px}
.toast.err .tk{color:var(--crit)}

.banner{padding:12px 16px; border-radius:var(--r-sm); background:var(--warn-bg); color:var(--warn); font-size:12.5px; margin-bottom:16px; display:flex; gap:8px; align-items:center}

@media (max-width:1080px){ .kpis{grid-template-columns:repeat(2,1fr)} .grid2{grid-template-columns:1fr} }
@media (max-width:760px){
  .shell{grid-template-columns:1fr}
  .rail{position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px; overflow:visible}
  .brand{padding:2px 6px 2px 2px}
  .nav{flex-direction:row; flex-wrap:wrap; margin-left:auto} .nav-sep,.rail-foot{display:none}
  .kpis{grid-template-columns:1fr 1fr}
}

/* ---- Campaign tab: daily-sends bars vs cap reference line ---- */
.cwrap{position:relative; padding:18px 8px 4px}
.cbars{display:flex; align-items:flex-end; gap:4px; height:140px}
.cb{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; position:relative; min-width:0}
.cbar{width:100%; max-width:26px; background:var(--accent); border-radius:4px 4px 0 0; opacity:.55}
.cbar.now{opacity:1}
.cbv{font-size:11px; font-weight:600; color:var(--ink); margin-bottom:3px}
.cbd{font-size:10px; color:var(--ink-3, #8a8a8a); margin-top:5px; height:13px; white-space:nowrap}
.capline{position:absolute; left:8px; right:8px; border-top:2px dashed var(--accent-line); z-index:1; pointer-events:none}
.capline span{position:absolute; right:0; top:-17px; font-size:10px; color:var(--ink-3, #8a8a8a); background:var(--surface); padding:0 4px}
.kpi.warn .fig{color:var(--crit, #c0392b)}
.kmut{font-size:.55em; font-weight:500; color:var(--ink-3, #8a8a8a)}
.kpis.kmini{margin-bottom:12px}
.kpis.kmini .fig{font-size:20px}

/* ---------------------------- role sourcing ----------------------------- */
.stsel{font-family:var(--mono); font-size:11px; padding:5px 8px; border-radius:var(--r-sm);
  background:var(--raised); border:1px solid var(--line); color:var(--ink); cursor:pointer; max-width:150px}
.stsel:focus{outline:none; border-color:var(--accent-line)}
.stsel.st-replied,.stsel.st-call_scheduled,.stsel.st-hired{border-color:#2E9E6B; color:#2E9E6B}
.stsel.st-email_sent,.stsel.st-li_message_sent{border-color:var(--accent-line); color:var(--accent-ink)}
.stsel.st-followup_sent{border-color:#B9821A; color:#B9821A}
.stsel.st-not_interested{border-color:#C0506A; color:#C0506A}
.stby{font-family:var(--mono); font-size:10px; color:var(--faint); margin-top:3px}
.clink{font-family:var(--mono); font-size:11px; color:var(--accent-ink); text-decoration:none; white-space:nowrap; margin-right:8px}
.clink:hover{text-decoration:underline}

/* ------------------------- outreach + prospect detail ---------------------- */
.orow{cursor:pointer}
.orow:hover td{background:var(--raised)}
.nw{white-space:nowrap}
.omsg{max-width:460px}
.osnip{font-size:11.5px; color:var(--faint); max-width:440px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.msgbody{white-space:pre-wrap; font-size:13px; line-height:1.6; color:var(--ink); overflow-wrap:anywhere}
.jdtext{max-height:420px; overflow-y:auto; padding-right:6px}
.ometa{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px}
.ometa a.chip{text-decoration:none}
.fsel{font-family:var(--mono); font-size:11px; padding:6px 10px; border-radius:20px; border:1px solid var(--line); background:var(--surface); color:var(--muted); cursor:pointer}
.fsel:hover{border-color:var(--accent-line); color:var(--ink)}
.pstats{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; margin-bottom:8px}
.pstat{background:var(--raised); border:1px solid var(--line-soft); border-radius:var(--r-sm); padding:6px 9px; display:flex; flex-direction:column; gap:2px}
.pstat span{font-size:10px; color:var(--faint); letter-spacing:.04em; text-transform:uppercase}
.pstat b{font-size:14px}
.obtns{display:flex; gap:5px; flex-wrap:wrap}
.obtns .btn{padding:4px 9px; font-size:11px}
.evsnip{max-width:200px}
.o2x2{display:grid; grid-template-columns:repeat(2,minmax(0,auto)); gap:4px}
.o2x2 .btn{white-space:nowrap; justify-content:center}
.ospan{grid-column:1/-1; justify-self:start}
.emp{max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ospan{white-space:nowrap}
.o2x2{grid-template-columns:repeat(2,max-content)}
.evsnip{max-width:170px}
.tchip{margin-left:5px; padding:1px 6px; font-size:10px}

/* ------------------------- sourcing table controls ------------------------- */
th.sortable{cursor:pointer; user-select:none}
th.sortable:hover{color:var(--ink)}
.frow th{padding:4px 8px 8px}
.ffld{width:100%; min-width:56px; box-sizing:border-box; font-family:var(--mono); font-size:11px; padding:4px 7px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink)}
.ffld:focus{outline:none; border-color:var(--accent-line)}
.colpick{position:relative}
.colmenu{position:absolute; top:34px; left:0; z-index:40; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--shadow); padding:10px 12px; display:grid; grid-template-columns:repeat(2,max-content); gap:6px 16px}
.colopt{font-size:12px; color:var(--ink); display:flex; align-items:center; gap:6px; white-space:nowrap; cursor:pointer}
.skcell{max-width:260px}
.colmenu[hidden]{display:none}

/* ---- Campaign: cumulative sends line ---- */
.cumsvg{width:100%; height:auto; display:block}
.cline{fill:none; stroke:var(--accent); stroke-width:2; stroke-linejoin:round}
.carea{fill:var(--accent-weak); opacity:.75}
.cgl{stroke:var(--accent-line); stroke-width:.6; opacity:.45}
.cdot{fill:var(--accent)}
.clab{font-size:10px; fill:var(--ink-3, #8a8a8a)}
.cval{font-size:12px; font-weight:600; fill:var(--ink)}

/* ---- Campaign dashboard (2026-08-21 rebuild) ---- */
.kpis.k7{grid-template-columns:repeat(7,1fr)}
@media (max-width:1400px){ .kpis.k7{grid-template-columns:repeat(4,1fr)} }
@media (max-width:760px){ .kpis.k7{grid-template-columns:1fr 1fr} }
.kpi{position:relative}
.mctl{position:absolute; right:10px; bottom:10px; display:flex; gap:4px}
.mctl .btn{padding:2px 9px; font-size:13px; line-height:1.2}
.ccards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:18px}
@media (max-width:1200px){ .ccards{grid-template-columns:1fr} }
.ccard .crow{display:flex; align-items:flex-end; gap:16px}
.spark{display:flex; align-items:flex-end; gap:2px; height:44px; flex:1; min-width:0}
.spark .sb{flex:1; min-width:2px; max-width:14px; background:var(--accent); border-radius:2px 2px 0 0; opacity:.65}
.spark .sb.z{background:var(--line); opacity:.8; height:4px !important}
tr.retired td{color:var(--faint)}
tr.alarmrow td{background:var(--crit-bg)}
.obsquote{border-left:3px solid var(--accent-line); padding:6px 10px; font-size:12.5px; color:var(--muted); background:var(--raised); border-radius:0 var(--r-sm) var(--r-sm) 0; white-space:pre-wrap}

/* ---- Outreach unified list ---- */
.tagcell{max-width:340px}
.tagcell .chip,.tagcell .pill{margin:1px 0}
.chip.mtag{background:var(--accent-weak); color:var(--accent-ink); border-color:var(--accent-line); cursor:default}
button.chip.mtag{cursor:pointer}
button.chip.mtag:hover{border-color:var(--crit); color:var(--crit)}
.tagadd{display:flex; gap:8px; margin-top:10px}
.tagadd input{flex:1; background:var(--raised); border:1px solid var(--line); border-radius:var(--r-sm); padding:7px 10px; color:var(--ink); font-size:13px}
.tagadd input:focus{border-color:var(--accent-line); outline:none}
.pager{display:flex; align-items:center; justify-content:center; gap:12px; margin-top:16px}
a.fchip{text-decoration:none; display:inline-flex; align-items:center}
a.fchip:hover{text-decoration:none}
.mrow{display:flex; align-items:center; gap:10px; margin-bottom:8px}

/* ---- Reply Workbench (2026-08-22) ---- */
.rcards{display:flex; flex-direction:column; gap:14px}
.rsub{font-weight:600; font-size:13.5px; margin-bottom:8px}
.rprev{color:var(--muted)}
.ractions{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px solid var(--line-soft)}
.rnote{flex:1; min-width:180px; background:var(--raised); border:1px solid var(--line); border-radius:var(--r-sm); padding:7px 10px; color:var(--ink); font-family:var(--sans); font-size:12.5px}
.rnote:focus{border-color:var(--accent-line); outline:none; background:var(--surface)}
.rhist{margin-top:10px; font-family:var(--mono); font-size:10.5px; color:var(--faint)}
.rhist div{padding:2px 0}

/* ---- LinkedIn assist queue (2026-08-21) ---- */
.banner.note{background:var(--accent-weak); color:var(--accent-ink)}
.banner.note.soft{background:var(--raised); color:var(--muted); border:1px solid var(--line-soft)}
.liqlist{display:flex; flex-direction:column; gap:2px}
.liqrow{display:flex; align-items:flex-start; gap:12px; padding:10px 4px; border-bottom:1px solid var(--line-soft)}
.liqrow:last-child{border-bottom:0}
.liqrow:hover{background:var(--raised)}
.liqrow .liqbox{width:17px; height:17px; margin-top:2px; flex:none; accent-color:var(--accent); cursor:pointer}
.liqrow .liqbox:disabled{cursor:default}
.liqmain{min-width:0; flex:1}
.liqname{font-size:13.5px; font-weight:600}
.liqname .role{font-weight:400}
.liqact{margin-left:auto; display:flex; align-items:center; gap:8px; padding-top:2px}
.liqact a.chip{text-decoration:none; white-space:nowrap}
.liqrow.done{opacity:.55}
.liqrow.done .liqname,.liqrow.done .liqmain .role{text-decoration:line-through}

/* ---- CRM engagement signals: comment windows, engagement, crossover
   (2026-08-22) ---- */
.panel.liqfirst{border-color:var(--accent-line)}
.liqrow.liqeng{align-items:flex-start; padding-left:0}
.liqrow.liqeng .obsquote{margin-bottom:0}
.liqacc{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px;
  padding:8px 11px; border-radius:var(--r-sm); background:var(--good-bg);
  border:1px solid color-mix(in srgb,var(--good) 30%, transparent)}
.liqacc.maybe{background:var(--warn-bg); border-color:color-mix(in srgb,var(--warn) 30%, transparent)}
.liqaccmain{min-width:0; flex:1; font-size:12.5px; line-height:1.45}
.liqaccmain .role{font-size:11.5px}
.liqacc .btn{white-space:nowrap}
.liqrow.done .liqacc{display:none}

/* ---- Campaign: trigger inflow + cost strip (2026-08-21) ---- */
.panel .body .dt{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:8px}
.panel .body .dt .role{text-transform:none; letter-spacing:0; font-family:var(--sans); display:inline}
.pstat.hl{border-color:var(--accent-line); background:var(--accent-weak)}
.pstat.hl b{color:var(--accent-ink)}
.pdrow{display:grid; grid-template-columns:minmax(120px,190px) 1fr 58px; align-items:center; gap:14px; margin-bottom:11px}
.pdrow:last-child{margin-bottom:0}
.pdname{font-size:12.5px; font-weight:600}
.pdnote{color:var(--faint); font-size:11px; line-height:1.35; margin-top:2px}
.pdtrack{height:10px; border-radius:5px; background:var(--line); overflow:hidden}
.pdfill{height:100%; border-radius:5px; background:linear-gradient(90deg,var(--accent),var(--accent-ink))}
.pdval{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:13.5px; font-weight:600; text-align:right}
.bud .btrack{height:14px; border-radius:7px; background:var(--line); overflow:hidden}
.bud .bfill{height:100%; border-radius:7px; background:linear-gradient(90deg,var(--accent),var(--accent-ink))}
.bud .bfill.over{background:linear-gradient(90deg,var(--warn),var(--crit))}
.bud .blab{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-family:var(--mono); font-size:11.5px; color:var(--muted); margin-top:7px}
@media (max-width:900px){ .pdrow{grid-template-columns:1fr 52px} .pdtrack{grid-column:1/-1} }

/* ------------------------------ Pedro tracker ---------------------------- */
/* Board of what Pedro is working on (AI-maintained — see pedro_tracker.py). */
.kpis.k6{grid-template-columns:repeat(6,1fr)}
@media (max-width:1400px){ .kpis.k6{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){ .kpis.k6{grid-template-columns:1fr 1fr} }
.pgrid{grid-template-columns:1.25fr .75fr; align-items:start}
@media (max-width:1100px){ .pgrid{grid-template-columns:1fr} }

.seg{display:inline-flex; gap:2px; background:var(--raised); border:1px solid var(--line-soft);
     border-radius:20px; padding:2px}
.tabx{font-family:var(--sans); font-size:12px; font-weight:600; color:var(--muted);
      background:none; border:0; border-radius:20px; padding:5px 12px; cursor:pointer; transition:.12s}
.tabx:hover{color:var(--ink)}
.tabx.on{background:var(--surface); color:var(--accent-ink); box-shadow:var(--shadow)}
.pstreams{display:flex; flex-wrap:wrap; gap:6px; padding:12px 18px; border-bottom:1px solid var(--line-soft)}
.pstreams .tabx{border:1px solid var(--line-soft); background:var(--surface)}
.pstreams .tabx.on{border-color:var(--accent-line); background:var(--accent-weak)}
.pq{margin-left:auto; min-width:210px}

/* Board column sizing. table-layout:fixed because auto layout sized columns from
   their content and gave the metadata 649px of a 1260px table — the prose got
   what was left and every description clipped after two lines.
   The metadata columns are px, not %: their content is pills of fixed intrinsic
   width (a "Waiting on David" pill needs 185px), so a percentage clipped them
   the moment the window narrowed. Only the two prose columns flex, splitting
   whatever is left ~64/35 — the missing 1% is rounding slack, so a stray
   horizontal scrollbar never appears. */
.ptbl{min-width:760px; table-layout:fixed}
.ptbl th.pcol-stream{width:148px}
.ptbl th.pcol-status{width:180px}
.ptbl th.pcol-last{width:104px}
.ptbl th.pcol-next{width:23%}
/* Workstream is left auto on purpose: under fixed layout the single unsized
   column absorbs everything the others do not claim, which is how the
   description gets the widest column on the board. calc() with a percentage
   inside is silently ignored here — it collapsed the split back to 50/50. */
.ptbl td.pnarrow{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* Below this the prose is worth more than Stream — it is already a filter chip
   row above — and the freed 148px goes to the description. */
@media (max-width:1300px){ .ptbl .pcol-stream{display:none} }

.ptitle{display:flex; align-items:baseline; gap:7px; flex-wrap:wrap}
.ptitle b{font-size:13px}
.ptitle .chip{flex:none}
.chip.ghclosed{opacity:.6}
.pact{display:flex; flex-direction:column; align-items:flex-start; gap:3px; width:max-content}
.pact .num{font-family:var(--mono); font-size:12px}
.pwork{padding-top:1px}
.pdesc{margin-top:3px}
.pdesc{font-size:12.5px; line-height:1.45; color:var(--muted)}
.pmove{margin-top:4px; font-size:12px; line-height:1.45; color:var(--faint);
       display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}
.pnext{font-size:12.5px; line-height:1.45; color:var(--muted);
       display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}
.pnarr{font-size:13px; line-height:1.55; margin:0 0 4px}
.plist{margin:0 0 14px; padding-left:18px; font-size:12.5px; line-height:1.6; color:var(--muted)}
.plist li{margin-bottom:3px}
.pdiscuss{padding-left:18px; margin-bottom:14px; color:var(--ink)}

.ppoint{border-top:1px solid var(--line-soft); padding:11px 0}
.ppoint:first-child{border-top:0; padding-top:0}
.pptop{display:flex; align-items:center; gap:8px}
.pptop b{font-size:12.5px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pptop .pdis{padding:2px 6px; font-size:12px; margin-left:0; opacity:.5}
.pptop .pdis:hover{opacity:1}
.ppdet{margin-top:4px; font-size:12px; display:-webkit-box; -webkit-line-clamp:2;
       -webkit-box-orient:vertical; overflow:hidden}
#pedpoints .ppoint{cursor:pointer}

.pev{display:flex; gap:12px; padding:9px 0; border-top:1px solid var(--line-soft)}
.pev:first-child{border-top:0; padding-top:0}
.pevd{font-family:var(--mono); font-size:11px; color:var(--faint); white-space:nowrap; padding-top:1px; width:52px; flex:none}
.pevb{font-size:12.5px; line-height:1.5}
.pevs{display:flex; flex-wrap:wrap; gap:5px; margin-top:5px}
.pquote{padding:9px 0; border-top:1px solid var(--line-soft)}
.pquote:first-child{border-top:0; padding-top:0}
.pqt{font-size:12.5px; line-height:1.5; color:var(--muted); font-style:italic}
.pgroup{margin-bottom:16px}
.pgroup:last-child{margin-bottom:0}
.pgroup .dt{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
            color:var(--faint); margin-bottom:8px}
.pgroup .pmore{margin-top:6px; padding:3px 9px; font-size:11.5px; border:1px solid var(--line-soft)}