/* ============================================================
   TalentPilot AI — design system
   ============================================================ */
:root{
  --bg:#f4f6fb;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --surface-3:#eef2f9;
  --border:#e2e8f2;
  --border-strong:#cbd5e6;
  --ink:#0f1b32;
  --ink-2:#3d4a63;
  --muted:#6b7793;
  --faint:#95a0b8;

  --brand:#4f46e5;      /* indigo */
  --brand-600:#4338ca;
  --brand-700:#3730a3;
  --brand-soft:#eef0ff;
  --teal:#0ea5a4;
  --teal-soft:#e5faf8;

  --strong:#16a34a;
  --strong-soft:#e6f6ec;
  --maybe:#d97706;
  --maybe-soft:#fdf1de;
  --weak:#64748b;
  --weak-soft:#eef1f6;
  --reject:#dc2626;
  --reject-soft:#fdeaea;

  --danger:#dc2626;
  --ok:#16a34a;

  --radius:14px;
  --radius-sm:9px;
  --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(15,27,50,.06),0 1px 3px rgba(15,27,50,.05);
  --shadow:0 4px 14px rgba(15,27,50,.08),0 1px 3px rgba(15,27,50,.05);
  --shadow-lg:0 18px 48px rgba(15,27,50,.18);

  --sidebar-w:246px;
  --topbar-h:60px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.01em;color:var(--ink)}
h1{font-size:22px}
h2{font-size:17px}
h3{font-size:15px}
input,select,textarea{font-family:inherit;font-size:14px;color:var(--ink)}
::placeholder{color:var(--faint)}
code{font-family:var(--mono);font-size:.86em}

/* ---------- boot / spinner ---------- */
.boot{position:fixed;inset:0;display:flex;flex-direction:column;gap:22px;align-items:center;justify-content:center;background:var(--bg)}
.boot-mark{font-size:26px;font-weight:750;color:var(--ink);letter-spacing:-.02em}
.boot-mark span{color:var(--brand)}
.boot-spinner,.spinner{
  width:30px;height:30px;border-radius:50%;
  border:3px solid var(--surface-3);border-top-color:var(--brand);
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner.sm{width:16px;height:16px;border-width:2px}
.center-load{display:flex;align-items:center;justify-content:center;gap:10px;padding:60px;color:var(--muted)}

/* ============================================================
   AUTH
   ============================================================ */
.auth-wrap{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr}
.auth-hero{
  background:linear-gradient(150deg,var(--brand-700),var(--brand) 55%,var(--teal));
  color:#fff;padding:56px;display:flex;flex-direction:column;justify-content:space-between;
}
.auth-hero .logo{font-size:24px;font-weight:750}
.auth-hero .logo span{opacity:.75}
.auth-hero h1{color:#fff;font-size:34px;line-height:1.15;max-width:15ch}
.auth-hero p{color:rgba(255,255,255,.86);font-size:15px;max-width:46ch}
.auth-hero .feat{display:flex;flex-direction:column;gap:12px;margin-top:26px}
.auth-hero .feat div{display:flex;gap:10px;align-items:flex-start;color:rgba(255,255,255,.92);font-size:14px}
.auth-hero .feat .dot{margin-top:6px;width:7px;height:7px;border-radius:50%;background:#fff;flex:0 0 auto;opacity:.85}
.auth-panel{display:flex;align-items:center;justify-content:center;padding:40px;background:var(--surface)}
.auth-card{width:100%;max-width:380px}
.auth-card h2{font-size:22px;margin-bottom:6px}
.auth-card .sub{color:var(--muted);margin-bottom:24px}
.auth-tabs{display:flex;gap:6px;background:var(--surface-3);padding:4px;border-radius:11px;margin-bottom:22px}
.auth-tabs button{flex:1;border:0;background:transparent;padding:9px;border-radius:8px;font-weight:600;color:var(--muted);cursor:pointer}
.auth-tabs button.active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
@media(max-width:820px){.auth-wrap{grid-template-columns:1fr}.auth-hero{display:none}}

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.field{margin-bottom:15px}
.field label,.lbl{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.field .hint{font-size:12px;color:var(--faint);margin-top:5px}
.input,.select,.textarea{
  width:100%;padding:10px 12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  background:var(--surface);transition:border-color .12s,box-shadow .12s;outline:none;
}
.input:focus,.select:focus,.textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.textarea{resize:vertical;min-height:90px;line-height:1.55}
.select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%236b7793' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 11px center;padding-right:30px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
@media(max-width:680px){.row2,.row3{grid-template-columns:1fr}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 15px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);
  background:var(--surface);color:var(--ink);font-weight:600;font-size:13.5px;cursor:pointer;
  transition:background .12s,border-color .12s,transform .04s,box-shadow .12s;white-space:nowrap;
}
.btn:hover{background:var(--surface-2);border-color:var(--border-strong)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-600)}
.btn.teal{background:var(--teal);border-color:var(--teal);color:#fff}
.btn.teal:hover{filter:brightness(.96)}
.btn.danger{background:var(--reject-soft);border-color:#f3c4c4;color:var(--reject)}
.btn.danger:hover{background:#fbdede}
.btn.ghost{border-color:transparent;background:transparent;color:var(--ink-2)}
.btn.ghost:hover{background:var(--surface-3)}
.btn.sm{padding:6px 11px;font-size:12.5px}
.btn.lg{padding:12px 20px;font-size:15px}
.btn.block{width:100%}
.btn.icon{padding:8px;width:34px;height:34px}
.btn-group{display:flex;gap:8px;flex-wrap:wrap}

/* ============================================================
   APP SHELL
   ============================================================ */
.shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:var(--topbar-h) 1fr;grid-template-areas:"side top" "side main";min-height:100vh}
.sidebar{grid-area:side;background:var(--ink);color:#cdd5e6;display:flex;flex-direction:column;padding:16px 12px;position:sticky;top:0;height:100vh}
.sidebar .brand{display:flex;align-items:center;gap:9px;padding:6px 8px 18px;font-weight:750;font-size:18px;color:#fff}
.sidebar .brand .glyph{width:30px;height:30px;border-radius:8px;background:linear-gradient(140deg,var(--brand),var(--teal));display:flex;align-items:center;justify-content:center;font-size:15px;color:#fff}
.sidebar .brand span{color:#8fa0c4;font-weight:600}
.nav{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;color:#aeb9d4;font-weight:550;font-size:13.5px;cursor:pointer}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.nav a.active{background:var(--brand);color:#fff}
.nav a .ico{width:18px;height:18px;flex:0 0 auto;opacity:.9}
.nav a .badge{margin-left:auto;background:var(--reject);color:#fff;border-radius:10px;font-size:11px;padding:1px 7px;font-weight:700}
.nav a.active .badge{background:rgba(255,255,255,.28)}
.nav-sep{margin:14px 10px 8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#5f6d8f}
.sidebar .side-foot{margin-top:auto;padding:12px 8px 4px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;color:#7f8db0}
.sidebar .side-foot .who{color:#e6ebf5;font-weight:600;font-size:13px;margin-bottom:2px}

.topbar{grid-area:top;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;padding:0 22px;position:sticky;top:0;z-index:20}
.topbar .crumbs{font-size:15px;font-weight:650;color:var(--ink);display:flex;align-items:center;gap:8px;min-width:0}
.topbar .crumbs .sep{color:var(--faint);font-weight:400}
.topbar .crumbs .muted{color:var(--muted);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .spacer{flex:1}
.topbar .mode-badges{display:flex;gap:8px}
.main{grid-area:main;padding:24px 26px 60px;max-width:1320px;width:100%}
@media(max-width:900px){
  .shell{grid-template-columns:1fr;grid-template-areas:"top" "main"}
  .sidebar{position:fixed;left:0;top:0;z-index:60;transform:translateX(-100%);transition:transform .2s;width:250px}
  .sidebar.open{transform:none}
  .scrim{position:fixed;inset:0;background:rgba(6,12,26,.45);z-index:55;display:none}
  .scrim.show{display:block}
  .topbar .menu-btn{display:inline-flex}
}
.topbar .menu-btn{display:none}

/* ---------- badges / chips ---------- */
.badge-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:650;background:var(--surface-3);color:var(--ink-2);border:1px solid var(--border)}
.badge-pill .d{width:7px;height:7px;border-radius:50%;background:currentColor}
.badge-pill.ok{background:var(--strong-soft);color:#0f7a33;border-color:#bfe6cd}
.badge-pill.warn{background:var(--maybe-soft);color:#a35b06;border-color:#f3d9ab}
.badge-pill.info{background:var(--brand-soft);color:var(--brand-700);border-color:#d5d8ff}
.badge-pill.teal{background:var(--teal-soft);color:#0b7d7c;border-color:#bfeceb}

.band{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:7px;font-size:11px;font-weight:750;letter-spacing:.02em}
.band.STRONG{background:var(--strong-soft);color:#0f7a33}
.band.MAYBE{background:var(--maybe-soft);color:#a35b06}
.band.WEAK{background:var(--weak-soft);color:#516074}
.band.REJECT{background:var(--reject-soft);color:#b91c1c}

.status-tag{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:650;text-transform:capitalize;background:var(--surface-3);color:var(--ink-2);border:1px solid var(--border)}
.status-tag .d{width:6px;height:6px;border-radius:50%;background:currentColor}
.status-tag.s-new,.status-tag.s-screening{color:#516074}
.status-tag.s-shortlisted,.status-tag.s-responded{color:var(--brand-700);background:var(--brand-soft);border-color:#d5d8ff}
.status-tag.s-contacted,.status-tag.s-scheduled,.status-tag.s-interviewing{color:#0b7d7c;background:var(--teal-soft);border-color:#bfeceb}
.status-tag.s-interviewed,.status-tag.s-selected,.status-tag.s-hired{color:#0f7a33;background:var(--strong-soft);border-color:#bfe6cd}
.status-tag.s-rejected,.status-tag.s-declined,.status-tag.s-withdrawn{color:#b91c1c;background:var(--reject-soft);border-color:#f3c4c4}

.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:8px;background:var(--surface-3);color:var(--ink-2);font-size:12px;font-weight:550;border:1px solid var(--border)}
.chip .x{cursor:pointer;color:var(--faint);font-weight:700;line-height:1}
.chip .x:hover{color:var(--reject)}
.chips{display:flex;flex-wrap:wrap;gap:6px}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.card.pad{padding:18px}
.card-h{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--border)}
.card-h h3{flex:1}
.card-b{padding:18px}
.grid{display:grid;gap:16px}
.grid.g2{grid-template-columns:1fr 1fr}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.grid.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.grid.g4{grid-template-columns:1fr 1fr}.grid.g3{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}}

.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-sm)}
.stat .k{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.stat .v{font-size:28px;font-weight:750;margin-top:4px;letter-spacing:-.02em}
.stat .sub{font-size:12px;color:var(--faint);margin-top:2px}

.page-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.page-head .pt{flex:1;min-width:200px}
.page-head h1{margin-bottom:3px}
.page-head .desc{color:var(--muted);font-size:13.5px}
.section-title{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin:26px 0 12px}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
table.tbl th{text-align:left;padding:11px 14px;background:var(--surface-2);color:var(--muted);font-weight:650;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--border);white-space:nowrap}
table.tbl td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
table.tbl tr:last-child td{border-bottom:0}
table.tbl tr.click{cursor:pointer}
table.tbl tr.click:hover td{background:var(--surface-2)}
.sn{color:var(--faint);font-variant-numeric:tabular-nums;width:34px}

/* ---------- funnel / progress ---------- */
.funnel{display:flex;gap:8px;flex-wrap:wrap}
.funnel .fstep{flex:1;min-width:88px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:11px 12px}
.funnel .fstep .n{font-size:22px;font-weight:750;letter-spacing:-.02em}
.funnel .fstep .l{font-size:11px;color:var(--muted);text-transform:capitalize;font-weight:600}
.bar{height:8px;border-radius:6px;background:var(--surface-3);overflow:hidden}
.bar > i{display:block;height:100%;border-radius:6px;background:var(--brand);transition:width .3s}
.score-bar{height:7px;border-radius:5px;background:var(--surface-3);overflow:hidden;min-width:60px}
.score-bar > i{display:block;height:100%}
.score-bar > i.STRONG{background:var(--strong)}
.score-bar > i.MAYBE{background:var(--maybe)}
.score-bar > i.WEAK{background:var(--weak)}
.score-bar > i.REJECT{background:var(--reject)}

.empty{text-align:center;padding:46px 20px;color:var(--muted)}
.empty .big{font-size:38px;margin-bottom:8px;opacity:.5}
.empty h3{margin-bottom:6px;color:var(--ink-2)}

/* ---------- activity timeline ---------- */
.timeline{position:relative;padding-left:22px}
.timeline:before{content:"";position:absolute;left:6px;top:4px;bottom:4px;width:2px;background:var(--border)}
.tl-item{position:relative;padding:0 0 16px 6px}
.tl-item:last-child{padding-bottom:0}
.tl-item .dot{position:absolute;left:-22px;top:2px;width:14px;height:14px;border-radius:50%;background:var(--surface);border:2px solid var(--brand)}
.tl-item.actor-agent .dot{border-color:var(--brand)}
.tl-item.actor-candidate .dot{border-color:var(--teal)}
.tl-item.actor-recruiter .dot{border-color:var(--maybe)}
.tl-item .msg{font-size:13.5px}
.tl-item .meta{font-size:11.5px;color:var(--faint);margin-top:2px}
.tl-item .who{font-weight:650;text-transform:capitalize}

/* ============================================================
   KANBAN
   ============================================================ */
.kanban{display:flex;gap:14px;overflow-x:auto;padding-bottom:12px}
.kcol{flex:0 0 260px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);display:flex;flex-direction:column;max-height:72vh}
.kcol-h{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border);position:sticky;top:0}
.kcol-h .t{font-weight:650;font-size:13px;text-transform:capitalize}
.kcol-h .c{margin-left:auto;background:var(--surface-3);border-radius:10px;padding:1px 8px;font-size:11.5px;font-weight:700;color:var(--muted)}
.kcol-b{padding:10px;overflow-y:auto;display:flex;flex-direction:column;gap:9px}
.kcard{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:11px 12px;cursor:pointer;box-shadow:var(--shadow-sm);border-left:3px solid var(--border)}
.kcard:hover{border-color:var(--border-strong);box-shadow:var(--shadow)}
.kcard.b-STRONG{border-left-color:var(--strong)}
.kcard.b-MAYBE{border-left-color:var(--maybe)}
.kcard.b-WEAK{border-left-color:var(--weak)}
.kcard.b-REJECT{border-left-color:var(--reject)}
.kcard .nm{font-weight:650;font-size:13.5px;margin-bottom:3px}
.kcard .em{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kcard .fr{display:flex;align-items:center;gap:8px;margin-top:9px}
.kcard .sc{font-size:16px;font-weight:750;font-variant-numeric:tabular-nums}

/* ============================================================
   MAIL 3-PANE
   ============================================================ */
.mail{display:grid;grid-template-columns:300px minmax(0,1fr);gap:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface);height:calc(100vh - var(--topbar-h) - 90px);min-height:520px}
.mail-list{border-right:1px solid var(--border);display:flex;flex-direction:column;background:var(--surface-2)}
.mail-list .mlh{padding:12px 14px;border-bottom:1px solid var(--border);font-weight:650;display:flex;align-items:center;gap:8px}
.mail-threads{overflow-y:auto;flex:1}
.mthread{padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer;display:flex;flex-direction:column;gap:3px}
.mthread:hover{background:var(--surface-3)}
.mthread.active{background:var(--brand-soft);box-shadow:inset 3px 0 0 var(--brand)}
.mthread.unread .subj{font-weight:750}
.mthread .top{display:flex;align-items:center;gap:8px}
.mthread .who{font-weight:650;font-size:13px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mthread .when{font-size:11px;color:var(--faint);flex:0 0 auto}
.mthread .subj{font-size:12.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mthread .prev{font-size:11.5px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mthread .dotu{width:8px;height:8px;border-radius:50%;background:var(--brand);flex:0 0 auto}

.mail-conv{display:flex;flex-direction:column;min-width:0}
.mail-conv .mch{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.mail-conv .mch h3{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-msgs{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:14px;background:var(--surface-2)}
.mmsg{max-width:78%;border-radius:14px;padding:12px 14px;box-shadow:var(--shadow-sm);border:1px solid var(--border);background:var(--surface)}
.mmsg.outbound{align-self:flex-end;background:var(--brand-soft);border-color:#dcdfff}
.mmsg.inbound{align-self:flex-start;background:var(--surface)}
.mmsg .mm-h{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);margin-bottom:6px}
.mmsg .mm-h .frm{font-weight:700;color:var(--ink-2)}
.mmsg .mm-sub{font-weight:650;font-size:13px;margin-bottom:5px}
.mmsg .mm-body{font-size:13px;white-space:pre-wrap;word-break:break-word;line-height:1.5}
.mmsg .mm-foot{display:flex;align-items:center;gap:8px;margin-top:9px;flex-wrap:wrap}
.ics-chip{display:inline-flex;align-items:center;gap:6px;background:var(--teal-soft);color:#0b7d7c;border:1px solid #bfeceb;border-radius:8px;padding:3px 9px;font-size:11.5px;font-weight:600}
.gen-chip{font-size:10.5px;padding:1px 7px;border-radius:6px;background:var(--surface-3);color:var(--faint);font-weight:600}
.mail-compose{border-top:1px solid var(--border);padding:12px 14px;background:var(--surface);display:flex;flex-direction:column;gap:8px}
.mail-compose .crow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.seg{display:inline-flex;background:var(--surface-3);border-radius:8px;padding:3px}
.seg button{border:0;background:transparent;padding:5px 11px;border-radius:6px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}
.seg button.active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
@media(max-width:820px){.mail{grid-template-columns:1fr;height:auto}.mail-list{max-height:280px}}

/* ============================================================
   SHORTLIST / SCORE BREAKDOWN
   ============================================================ */
.cand-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-sm);margin-bottom:10px}
.cand-row .rank{font-size:13px;font-weight:750;color:var(--faint);width:26px;text-align:center;flex:0 0 auto}
.cand-row .who{flex:1;min-width:0}
.cand-row .who .nm{font-weight:650}
.cand-row .who .sum{font-size:12px;color:var(--muted);margin-top:2px}
.cand-row .sc{text-align:center;flex:0 0 auto}
.cand-row .sc .v{font-size:22px;font-weight:750;line-height:1}
.brk{display:grid;grid-template-columns:1fr;gap:9px}
.brk .crit{display:flex;align-items:center;gap:12px}
.brk .crit .lab{width:180px;flex:0 0 auto;font-size:12.5px;font-weight:600}
.brk .crit .lab small{display:block;font-weight:500;color:var(--faint);font-size:11px}
.brk .crit .ev{flex:1;font-size:12px;color:var(--muted)}
.brk .crit .pct{width:42px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;font-size:12.5px}
@media(max-width:640px){.brk .crit{flex-wrap:wrap}.brk .crit .lab{width:100%}}

.dims{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.dim{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:11px}
.dim .k{font-size:11px;color:var(--muted);text-transform:uppercase;font-weight:650}
.dim .v{font-size:18px;font-weight:750;margin-top:3px}
@media(max-width:640px){.dims{grid-template-columns:1fr 1fr}}

.cv-box{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:14px;font-size:12.5px;white-space:pre-wrap;word-break:break-word;max-height:340px;overflow:auto;line-height:1.55;font-family:var(--mono)}

/* ---------- upload dropzone ---------- */
.dropzone{border:2px dashed var(--border-strong);border-radius:var(--radius);padding:34px;text-align:center;background:var(--surface-2);cursor:pointer;transition:border-color .15s,background .15s}
.dropzone:hover,.dropzone.drag{border-color:var(--brand);background:var(--brand-soft)}
.dropzone .big{font-size:32px;opacity:.55;margin-bottom:8px}
.file-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--border);border-radius:9px;margin-top:8px;font-size:13px;background:var(--surface)}
.file-row.ok{border-left:3px solid var(--ok)}
.file-row.bad{border-left:3px solid var(--reject);background:var(--reject-soft)}
.file-row .fn{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-row .rz{font-size:12px;color:var(--muted)}

.copy-link{display:flex;gap:8px;align-items:center;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:8px 8px 8px 13px}
.copy-link code{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}

.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:18px;overflow-x:auto}
.tabs button{border:0;background:transparent;padding:10px 14px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.tabs button.active{color:var(--brand);border-bottom-color:var(--brand)}

/* ---------- modal ---------- */
.modal-scrim{position:fixed;inset:0;background:rgba(6,12,26,.5);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;max-width:520px;max-height:90vh;overflow:auto}
.modal.wide{max-width:760px}
.modal-h{display:flex;align-items:center;gap:10px;padding:18px 20px;border-bottom:1px solid var(--border)}
.modal-h h2{flex:1}
.modal-b{padding:20px}
.modal-f{padding:14px 20px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end}

/* ---------- toast ---------- */
.toast-host{position:fixed;right:18px;bottom:18px;z-index:400;display:flex;flex-direction:column;gap:9px;max-width:340px}
.toast{background:var(--ink);color:#fff;padding:11px 15px;border-radius:11px;box-shadow:var(--shadow-lg);font-size:13.5px;display:flex;gap:9px;align-items:flex-start;animation:toastin .2s ease}
.toast.ok{background:#12693a}
.toast.err{background:#a01b1b}
@keyframes toastin{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}

/* ============================================================
   COMPARE
   ============================================================ */
.compare-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.cmp-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:16px;box-shadow:var(--shadow-sm);position:relative}
.cmp-card.pick{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft),var(--shadow)}
.cmp-card .picktag{position:absolute;top:-11px;left:16px;background:var(--brand);color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px}
.cmp-card .nm{font-weight:700;font-size:15px;margin-bottom:2px}
.cmp-metric{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--border);font-size:13px}
.cmp-metric:last-of-type{border-bottom:0}
.cmp-metric .val{font-weight:750;font-variant-numeric:tabular-nums}

/* ============================================================
   LIVE INTERVIEW ROOM
   ============================================================ */
.room{position:fixed;inset:0;background:#0b1020;color:#e8ecf6;display:flex;flex-direction:column;font-family:var(--font)}
.room-top{display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02)}
.room-top .rbrand{font-weight:750;font-size:16px;color:#fff}
.room-top .rbrand span{color:#8fa0c4}
.room-top .rrole{color:#9aa7c6;font-size:13px}
.room-top .rprog{margin-left:auto;font-size:13px;color:#c7d0e6;font-weight:600}
.room-live{display:inline-flex;align-items:center;gap:7px;background:rgba(220,38,38,.18);color:#ff8a8a;border:1px solid rgba(220,38,38,.4);padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:700}
.room-live .rec{width:8px;height:8px;border-radius:50%;background:#ff5b5b;animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

.room-stage{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px 20px;min-height:0}
.tile{position:relative;background:#121a30;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);overflow:hidden;display:flex;align-items:center;justify-content:center}
.tile .label{position:absolute;left:14px;bottom:12px;background:rgba(6,10,22,.7);padding:5px 11px;border-radius:9px;font-size:12.5px;font-weight:650;display:flex;align-items:center;gap:8px;z-index:3}
.tile video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);background:#0b1020}
.tile .avatar-initials{width:120px;height:120px;border-radius:50%;background:linear-gradient(140deg,#3b3f8f,#0e6f6e);display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:750;color:#fff}
.mic-meter{position:absolute;right:14px;bottom:14px;display:flex;align-items:flex-end;gap:3px;height:34px;z-index:3}
.mic-meter i{width:5px;background:#4f6bff;border-radius:2px;height:6px;transition:height .06s;opacity:.5}
.mic-off{position:absolute;right:14px;bottom:14px;background:rgba(6,10,22,.7);color:#ff8a8a;font-size:11px;padding:3px 9px;border-radius:8px;z-index:3}

/* AI interviewer tile */
.ai-tile{flex-direction:column;gap:20px;background:radial-gradient(120% 100% at 50% 0%,#1c2650 0,#0f1731 60%)}
.ai-orb{width:150px;height:150px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#6d78ff,#3b3f8f 55%,#1b2148);box-shadow:0 0 0 0 rgba(93,116,255,.5);transition:box-shadow .2s,transform .2s}
.ai-orb .core{font-size:40px;font-weight:800;color:#fff;letter-spacing:-.03em}
.ai-orb.speaking{animation:orbpulse 1.1s ease-in-out infinite}
.ai-orb.thinking{animation:orbthink 1.6s ease-in-out infinite}
@keyframes orbpulse{0%,100%{box-shadow:0 0 0 4px rgba(93,116,255,.35),0 0 40px rgba(93,116,255,.5);transform:scale(1)}50%{box-shadow:0 0 0 22px rgba(93,116,255,0),0 0 60px rgba(93,116,255,.7);transform:scale(1.05)}}
@keyframes orbthink{0%,100%{box-shadow:0 0 0 3px rgba(14,165,164,.3);transform:scale(1)}50%{box-shadow:0 0 0 14px rgba(14,165,164,0);transform:scale(1.02)}}
.ai-name{font-size:19px;font-weight:750;color:#fff}
.ai-status{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:#9fb0d8;font-weight:600}
.ai-status .sd{width:9px;height:9px;border-radius:50%;background:#5b7cff}
.ai-status.listening .sd{background:#16c98d;box-shadow:0 0 0 0 rgba(22,201,141,.6);animation:pulse 1.3s infinite}
.ai-status.thinking .sd{background:#0ea5a4}
.ai-status.speaking .sd{background:#5b7cff}

.room-bottom{border-top:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);display:flex;flex-direction:column;max-height:38vh}
.transcript{flex:1;overflow-y:auto;padding:14px 20px;display:flex;flex-direction:column;gap:9px;min-height:120px}
.tline{display:flex;gap:10px;font-size:13.5px;line-height:1.5;animation:toastin .18s ease}
.tline .spk{flex:0 0 auto;font-weight:750;font-size:11.5px;padding:2px 8px;border-radius:7px;height:fit-content;margin-top:1px}
.tline.agent .spk{background:rgba(93,116,255,.2);color:#a9b7ff}
.tline.candidate .spk{background:rgba(22,201,141,.16);color:#7ce8bf}
.tline.system .spk{background:rgba(255,255,255,.08);color:#9aa7c6}
.tline .txt{color:#dfe6f5}
.tline.interim .txt{color:#8794b3;font-style:italic}

.room-controls{display:flex;align-items:center;gap:10px;padding:12px 20px;border-top:1px solid rgba(255,255,255,.06);flex-wrap:wrap}
.room-controls .rprog2{flex:1;min-width:120px}
.rbtn{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#e8ecf6;font-weight:600;font-size:13px;cursor:pointer}
.rbtn:hover{background:rgba(255,255,255,.12)}
.rbtn:disabled{opacity:.4;cursor:not-allowed}
.rbtn.end{background:rgba(220,38,38,.85);border-color:transparent;color:#fff}
.rbtn.end:hover{background:#dc2626}
.rbtn.on{background:var(--brand);border-color:var(--brand);color:#fff}
.rprogbar{height:6px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden;width:100%}
.rprogbar > i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--teal));transition:width .3s}

.answer-dock{padding:12px 20px;border-top:1px solid rgba(255,255,255,.08);display:flex;gap:10px;align-items:flex-end;background:rgba(255,255,255,.02)}
.answer-dock textarea{flex:1;background:#0e1630;border:1px solid rgba(255,255,255,.14);color:#e8ecf6;border-radius:10px;padding:10px 12px;min-height:48px;max-height:140px;resize:vertical}
.answer-dock textarea:focus{outline:none;border-color:var(--brand)}

.room-center{max-width:520px;margin:auto;text-align:center;padding:40px 24px}
.room-center h1{color:#fff;font-size:26px;margin-bottom:10px}
.room-center p{color:#9fb0d8;margin-bottom:22px}
.perm-card{background:#121a30;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);padding:30px;box-shadow:var(--shadow-lg)}
.cap-list{display:flex;flex-direction:column;gap:8px;text-align:left;margin:18px 0}
.cap-list .cap{display:flex;align-items:center;gap:10px;font-size:13.5px;color:#c7d0e6}
.cap-list .cap .ci{width:20px;text-align:center}
.cap-list .cap.no{color:#8794b3}

@media(max-width:820px){
  .room-stage{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
  .room-bottom{max-height:44vh}
}

/* ---------- public apply / schedule ---------- */
.pub-wrap{min-height:100vh;background:var(--bg);display:flex;flex-direction:column}
.pub-top{background:var(--surface);border-bottom:1px solid var(--border);padding:14px 22px;font-weight:750;font-size:18px}
.pub-top span{color:var(--brand)}
.pub-body{flex:1;display:flex;justify-content:center;padding:30px 20px}
.pub-card{width:100%;max-width:600px}
.role-summary{background:linear-gradient(150deg,var(--brand-700),var(--brand) 70%);color:#fff;border-radius:var(--radius-lg);padding:24px;margin-bottom:20px}
.role-summary h1{color:#fff;font-size:24px;margin-bottom:8px}
.role-summary .rmeta{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.role-summary .rmeta .m{background:rgba(255,255,255,.16);padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600}
.role-summary .rdesc{color:rgba(255,255,255,.9);font-size:13.5px;margin-top:14px;white-space:pre-wrap;max-height:180px;overflow:auto}
.slot-choice{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--border-strong);border-radius:12px;margin-bottom:10px;cursor:pointer;background:var(--surface);transition:border-color .12s,background .12s}
.slot-choice:hover{border-color:var(--brand)}
.slot-choice.sel{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 2px var(--brand-soft)}
.slot-choice .radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--border-strong);flex:0 0 auto}
.slot-choice.sel .radio{border-color:var(--brand);background:radial-gradient(circle,var(--brand) 42%,transparent 46%)}
.slot-choice .st{font-weight:650}
.slot-choice .sd{font-size:12px;color:var(--muted)}
.confirm-hero{text-align:center;padding:30px 10px}
.confirm-hero .big{font-size:52px;margin-bottom:12px}
.confirm-hero h1{margin-bottom:8px}
.confirm-hero p{color:var(--muted);max-width:44ch;margin:0 auto 8px}

.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:13px}
.kv .k{color:var(--muted);font-weight:600}
.kv .v{color:var(--ink)}
.muted{color:var(--muted)}
.small{font-size:12px}
.mt{margin-top:14px}.mb{margin-bottom:14px}
.flex{display:flex;gap:10px;align-items:center}
.flex.wrap{flex-wrap:wrap}
.between{justify-content:space-between}
.spacer{flex:1}
.nowrap{white-space:nowrap}
hr.sep{border:0;border-top:1px solid var(--border);margin:18px 0}