/* ---------- design tokens ---------- */
:root {
  --bg:#f6f7fb; --card:#fff; --ink:#0f172a; --ink2:#334155; --muted:#64748b; --line:#e5e9f2; --line2:#d3d9e6;
  --brand:#4f46e5; --brand2:#7c3aed; --brand-ink:#fff; --brand-soft:#eef0ff; --brand-ring:rgba(79,70,229,.28);
  --ok:#0f9d68; --ok-soft:#e6f7ef; --warn:#b45309; --warn-soft:#fff4e0; --err:#d92d20; --err-soft:#fdecea; --soft:#eef0ff;
  --r:14px; --r-sm:10px;
  --sh1:0 1px 2px rgba(15,23,42,.05); --sh2:0 4px 14px rgba(15,23,42,.07); --sh3:0 24px 60px rgba(15,23,42,.25);
  --font:"Segoe UI Variable","Segoe UI",system-ui,-apple-system,"Noto Sans Arabic",Tahoma,Arial,sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0b1020; --card:#131a2e; --ink:#e8ecf6; --ink2:#c3cbe0; --muted:#8c97b3; --line:#232c47; --line2:#2f3a5c;
    --brand:#818cf8; --brand2:#a78bfa; --brand-ink:#0b1020; --brand-soft:#1d2447; --brand-ring:rgba(129,140,248,.35);
    --ok:#34d399; --ok-soft:#10301f; --warn:#fbbf24; --warn-soft:#33260a; --err:#f87171; --err-soft:#3a1517; --soft:#1d2447;
    --sh1:0 1px 2px rgba(0,0,0,.4); --sh2:0 4px 14px rgba(0,0,0,.35); --sh3:0 24px 60px rgba(0,0,0,.6);
  }
}
* { box-sizing:border-box; }
html, body { margin:0; }
body { background:var(--bg); color:var(--ink); font:15px/1.65 var(--font); -webkit-font-smoothing:antialiased; }
button, input, select, textarea { font:inherit; color:inherit; }
a { color:var(--brand); text-decoration:none; } a:hover { text-decoration:underline; }
.hidden { display:none !important; }
.muted { color:var(--muted); font-size:.9rem; }
::selection { background:var(--brand-ring); }

/* ---------- top bar ---------- */
.topbar { display:flex; align-items:center; gap:6px; padding:10px 24px; background:color-mix(in srgb, var(--card) 82%, transparent); backdrop-filter:saturate(1.6) blur(12px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; }
.topbar .brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.05rem; letter-spacing:-.01em; margin-inline-end:18px; }
.topbar .brand::before { content:""; width:28px; height:28px; border-radius:9px; background:linear-gradient(135deg,var(--brand),var(--brand2)); box-shadow:0 4px 12px var(--brand-ring); }
.topbar a { color:var(--ink2); padding:7px 13px; border-radius:99px; font-weight:600; font-size:.92rem; transition:background .15s,color .15s; }
.topbar a:hover { background:var(--brand-soft); color:var(--brand); text-decoration:none; }
.topbar a.active { background:var(--brand-soft); color:var(--brand); }
.topbar .spacer { flex:1; }
.topbar .who { display:flex; align-items:center; gap:9px; margin-inline:6px 8px; }
.topbar .avatar { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:.85rem; color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand2)); }
.topbar .who small { display:block; line-height:1.2; color:var(--muted); font-size:.75rem; }
.topbar .who b { display:block; line-height:1.2; font-size:.88rem; }
.wrap { max-width:1200px; margin:0 auto; padding:28px 20px 90px; animation:rise .25s ease both; }
@keyframes rise { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:22px; margin-bottom:18px; box-shadow:var(--sh1); }
h1 { font-size:1.65rem; letter-spacing:-.02em; margin:0 0 4px; font-weight:800; } h2 { font-size:1.12rem; margin:0 0 12px; font-weight:700; } h3 { font-size:1rem; margin:16px 0 6px; font-weight:700; }
.row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.row.between { justify-content:space-between; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; } @media (max-width:720px){ .grid2 { grid-template-columns:1fr; } .topbar { overflow-x:auto; padding:8px 12px; } .topbar .who > div { display:none; } .wrap { padding:18px 12px 80px; } }

/* ---------- controls ---------- */
label { display:block; font-weight:600; margin:14px 0 5px; font-size:.88rem; color:var(--ink2); }
input, select, textarea { width:100%; padding:10px 13px; border:1px solid var(--line2); border-radius:var(--r-sm); background:var(--card); transition:border-color .15s, box-shadow .15s; }
textarea { min-height:90px; resize:vertical; }
input::placeholder, textarea::placeholder { color:var(--muted); opacity:.7; }
input:hover, select:hover, textarea:hover { border-color:var(--muted); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-ring); }
button:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
button { cursor:pointer; border:1px solid var(--line2); background:var(--card); border-radius:var(--r-sm); padding:9px 16px; font-weight:600; transition:transform .08s, background .15s, border-color .15s, box-shadow .15s; }
button:hover { background:var(--brand-soft); border-color:var(--brand); color:var(--brand); }
button:active { transform:translateY(1px) scale(.99); }
button.primary { background:linear-gradient(135deg,var(--brand),var(--brand2)); color:var(--brand-ink); border-color:transparent; box-shadow:0 6px 16px var(--brand-ring); }
button.primary:hover { filter:brightness(1.07); color:var(--brand-ink); border-color:transparent; box-shadow:0 8px 22px var(--brand-ring); }
button.danger { color:var(--err); border-color:color-mix(in srgb, var(--err) 35%, var(--line)); }
button.danger:hover { background:var(--err-soft); border-color:var(--err); color:var(--err); }
button.small { padding:5px 12px; font-size:.84rem; border-radius:99px; }
button:disabled { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.inline { width:auto; }
input[type=checkbox] { width:auto; accent-color:var(--brand); transform:scale(1.15); }

/* ---------- login ---------- */
body:has(.login) { background:radial-gradient(1200px 600px at 80% -10%, color-mix(in srgb, var(--brand2) 22%, transparent), transparent 60%), radial-gradient(900px 500px at 0% 110%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 60%), var(--bg); min-height:100vh; }
.login { max-width:430px; margin:10vh auto; padding:0 16px; animation:rise .35s ease both; }
.login h1 { display:flex; align-items:center; gap:12px; }
.login h1::before { content:""; width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg,var(--brand),var(--brand2)); box-shadow:0 8px 20px var(--brand-ring); }
.login .card { padding:28px; box-shadow:var(--sh2); }
.login .card button.primary { padding:12px; font-size:1rem; }
.err { background:var(--err-soft); color:var(--err); padding:10px 14px; border-radius:var(--r-sm); margin-top:12px; font-size:.92rem; }
.ok { background:var(--ok-soft); color:var(--ok); padding:10px 14px; border-radius:var(--r-sm); margin-top:12px; }

/* ---------- tables ---------- */
.tablewrap { overflow-x:auto; border-radius:var(--r-sm); }
table { width:100%; border-collapse:separate; border-spacing:0; }
th, td { text-align:start; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
th { font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; white-space:nowrap; background:color-mix(in srgb, var(--bg) 60%, var(--card)); }
th:first-child { border-top-start-radius:var(--r-sm); } th:last-child { border-top-end-radius:var(--r-sm); }
tbody tr { transition:background .12s; }
tbody tr:last-child td { border-bottom:none; }
tbody tr.click { cursor:pointer; } tbody tr.click:hover { background:var(--brand-soft); }
tr.sel { background:var(--brand-soft); }

/* ---------- badges + score ---------- */
.badge { display:inline-flex; align-items:center; gap:6px; padding:3px 11px; border-radius:99px; font-size:.78rem; font-weight:600; border:1px solid var(--line); background:var(--bg); color:var(--ink2); white-space:nowrap; }
.badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.9; }
.b-shortlisted { background:var(--ok-soft); color:var(--ok); border-color:transparent; }
.b-scored { background:var(--warn-soft); color:var(--warn); border-color:transparent; }
.b-rejected_pending { background:var(--err-soft); color:var(--err); border-color:transparent; }
.b-rejected { background:var(--bg); color:var(--muted); }
.b-failed { background:var(--err-soft); color:var(--err); border-color:transparent; }
.b-open { background:var(--ok-soft); color:var(--ok); border-color:transparent; } .b-draft { background:var(--brand-soft); color:var(--brand); border-color:transparent; } .b-closed { background:var(--bg); color:var(--muted); }
.b-interview { background:var(--brand-soft); color:var(--brand); border-color:transparent; }
.b-offer { background:var(--warn-soft); color:var(--warn); border-color:transparent; }
.b-hired { background:var(--ok-soft); color:var(--ok); border-color:transparent; }
.b-received, .b-processing { background:var(--bg); color:var(--muted); }
.flag { display:inline-block; margin-inline-start:4px; padding:0 8px; border-radius:6px; font-size:.75rem; font-weight:600; background:var(--warn-soft); color:var(--warn); }
.flag.red { background:var(--err-soft); color:var(--err); }
.score { display:flex; align-items:center; gap:10px; min-width:130px; }
.bar { flex:1; height:8px; background:var(--line); border-radius:99px; overflow:hidden; min-width:60px; }
.bar > i { display:block; height:100%; border-radius:99px; transition:width .5s cubic-bezier(.2,.8,.2,1); }
.score b { min-width:2.4em; text-align:end; font-variant-numeric:tabular-nums; font-weight:800; }

/* ---------- drawer ---------- */
.overlay { position:fixed; inset:0; background:rgba(8,12,28,.45); backdrop-filter:blur(3px); z-index:20; animation:fade .2s ease both; }
.drawer { position:fixed; top:0; bottom:0; inset-inline-end:0; width:min(760px,100%); background:var(--bg); z-index:21; overflow-y:auto; padding:26px; box-shadow:var(--sh3); animation:slide .28s cubic-bezier(.2,.8,.2,1) both; }
[dir=rtl] .drawer { animation-name:slideRtl; }
@keyframes slide { from { transform:translateX(40px); opacity:0; } to { transform:none; opacity:1; } }
@keyframes slideRtl { from { transform:translateX(-40px); opacity:0; } to { transform:none; opacity:1; } }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
.drawer h1 { font-size:1.5rem; }
.drawer h3 { font-size:.74rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin:24px 0 8px; font-weight:700; }
.drawer table { background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; }
.drawer th { border-radius:0 !important; }
.drawer td { padding:10px 14px; }
.drawer .row:first-of-type button { box-shadow:var(--sh1); }
.big { font-size:2.4rem; font-weight:800; letter-spacing:-.03em; background:linear-gradient(135deg,var(--brand),var(--brand2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.chips { display:flex; flex-wrap:wrap; gap:7px; } .chip { background:var(--brand-soft); color:var(--brand); padding:3px 11px; border-radius:99px; font-size:.8rem; font-weight:600; }
.notice { border:1px solid color-mix(in srgb, var(--warn) 30%, transparent); background:var(--warn-soft); padding:12px 14px; border-radius:var(--r-sm); margin:12px 0; }
.notice.red { border-color:color-mix(in srgb, var(--err) 30%, transparent); background:var(--err-soft); }
.ev { color:var(--muted); font-size:.88rem; }
pre.anon { white-space:pre-wrap; background:var(--card); border:1px solid var(--line); padding:12px; border-radius:var(--r-sm); max-height:300px; overflow:auto; font:inherit; font-size:.88rem; }
details > summary { cursor:pointer; color:var(--brand); margin:8px 0; font-weight:600; }

/* ---------- modal ---------- */
.modal { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:min(580px,94vw); max-height:90vh; overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:26px; z-index:31; box-shadow:var(--sh3); animation:pop .22s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pop { from { opacity:0; transform:translate(-50%,-48%) scale(.97); } to { opacity:1; transform:translate(-50%,-50%); } }
.overlay.m { z-index:30; }

/* ---------- toasts + bulk bar ---------- */
#toasts { position:fixed; bottom:20px; inset-inline-start:20px; z-index:50; display:flex; flex-direction:column; gap:10px; }
.toast { background:#0f172a; color:#fff; padding:12px 16px; border-radius:12px; max-width:380px; box-shadow:var(--sh2); animation:rise .25s ease both; border-inline-start:4px solid var(--brand); }
.toast.err { background:#7f1d1d; border-color:var(--err); } .toast.ok { background:#064e3b; border-color:var(--ok); }
.bulk { position:sticky; bottom:14px; background:var(--card); border:1px solid var(--line2); border-radius:16px; padding:12px 16px; margin-top:12px; box-shadow:var(--sh3); }

/* ---------- empty / loading ---------- */
p.muted { padding:6px 0; }
@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } }