:root{
  --bg:#f4f6fb; --panel:#fff; --ink:#1c2433; --muted:#7c879b; --line:#e6e9f2;
  --brand:#2f5597; --brand2:#3b6fd4; --green:#1f9d57; --blue:#2f6fed; --amber:#e0922f; --red:#d6453d;
  --shadow:0 1px 3px rgba(20,30,60,.06),0 8px 24px rgba(20,30,60,.05);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--brand2);text-decoration:none}
h1{font-size:24px;margin:.2em 0 .6em}
h3{margin:.2em 0 .7em;font-size:15px;color:var(--ink)}
.muted{color:var(--muted);font-size:13px}
.center{text-align:center}
code{background:#eef1f8;padding:1px 6px;border-radius:5px;font-size:12px}

/* top nav */
.topbar{display:flex;align-items:center;gap:18px;background:#fff;padding:0 22px;height:56px;
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.topbar .brand{font-weight:700;color:var(--brand);margin-right:8px}
.topbar a{color:#56617a;font-weight:500;height:56px;display:flex;align-items:center;border-bottom:2px solid transparent}
.topbar a.on{color:var(--brand);border-bottom-color:var(--brand)}
.topbar .spacer{flex:1}
.topbar .who{color:var(--muted);font-size:13px}.topbar .who em{font-style:normal;opacity:.7}
.topbar .logout{color:var(--red)}

.container{max-width:1080px;margin:26px auto;padding:0 22px}
.crumb{color:var(--muted);font-size:13px;margin-bottom:6px}

/* kpis + cards */
.kpis{display:flex;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 22px;box-shadow:var(--shadow);min-width:150px}
.kpi-num{font-size:30px;font-weight:700;color:var(--brand)}
.kpi-lbl{color:var(--muted);font-size:13px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--shadow);display:block;color:inherit;transition:.15s}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(30,40,80,.1)}
.card-h{font-weight:700;font-size:16px}
.card-sub{color:var(--muted);font-size:12px;margin:3px 0 12px}
.card-stats{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:#4a566e}
.card-stats b{color:var(--ink)}

/* panels + tables */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--shadow);margin-bottom:18px}
.grid{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.grid th{background:#f7f9fd;text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);padding:11px 14px;border-bottom:1px solid var(--line)}
.grid td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.grid tr:last-child td{border-bottom:none}
.clip{max-width:520px;color:#4a566e;font-size:13px}

/* badges + buttons */
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;background:#eef1f8;color:#56617a}
.badge.green{background:#e3f6ec;color:var(--green)} .badge.blue{background:#e7efff;color:var(--blue)}
.badge.amber{background:#fdf1df;color:var(--amber)} .badge.red{background:#fbe6e5;color:var(--red)} .badge.gray{background:#eef1f5;color:#8a93a6}
.btn{display:inline-block;background:var(--brand);color:#fff;border:none;border-radius:9px;padding:10px 16px;font-size:14px;cursor:pointer;font-weight:500}
.btn:hover{background:#27497f}
.btn.sm{padding:6px 11px;font-size:13px}
.btn.warn{background:var(--amber)} .btn.danger{background:#fff;color:var(--red);border:1px solid #f0c9c6}
.btn.danger:hover{background:#fbe6e5}

/* forms */
label{display:block;font-size:12px;color:var(--muted);margin:8px 0 3px}
input,select,textarea{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;width:100%}
textarea{resize:vertical}
.inline{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.inline label{margin:0 4px 0 0}
.inline input,.inline select{width:auto}
.inline .chk{display:flex;align-items:center;gap:6px;color:var(--ink)} .inline .chk input{width:auto}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.filters input,.filters select{width:auto}
.alert{background:#fbe6e5;color:#a4322b;border:1px solid #f0c9c6;padding:10px 14px;border-radius:10px;margin-bottom:14px}

/* statement editor */
.stmt{display:flex;gap:12px;border:1px solid var(--line);border-radius:11px;padding:12px;margin-bottom:10px;background:#fcfdff}
.stmt-h{width:30px;height:30px;border-radius:8px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.stmt-body{flex:1}
.stmt-fields{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.stmt-fields>div{min-width:110px}
.stmt-fields input,.stmt-fields select{width:130px}

/* copy field */
.copywrap input{font-size:12px;color:#445;background:#f7f9fd;cursor:pointer;min-width:280px}

/* score chip */
.score{display:inline-block;min-width:46px;text-align:center;padding:3px 8px;border-radius:8px;font-weight:700;color:#fff}
.score.g{background:var(--green)}.score.b{background:var(--blue)}.score.a{background:var(--amber)}.score.r{background:var(--red)}

/* report */
.report{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:26px;max-width:760px}
.report-head{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:18px}
.report-meta{display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--muted);font-size:13px;margin-top:4px}
.crit{margin-bottom:18px}
.crit-top{display:flex;justify-content:space-between;align-items:baseline}
.crit-name{font-weight:600}
.crit-score{font-weight:700;font-size:18px}
.crit-score.g{color:var(--green)}.crit-score.b{color:var(--blue)}.crit-score.a{color:var(--amber)}.crit-score.r{color:var(--red)}
.bar{height:11px;background:#eef1f6;border-radius:7px;overflow:hidden;margin:6px 0 5px}
.bar-fill{height:100%;border-radius:7px}
.bar-fill.g{background:var(--green)}.bar-fill.b{background:var(--blue)}.bar-fill.a{background:var(--amber)}.bar-fill.r{background:var(--red)}
.crit-band{font-size:13px;font-weight:600;color:#54607a}
.crit-desc{font-size:12.5px;color:var(--muted);margin-top:2px}
.crit.avg{border-top:2px solid var(--line);padding-top:16px;margin-top:6px}
.crit.avg .crit-name{letter-spacing:.04em}

/* login */
.login-bg{display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:linear-gradient(135deg,#2f5597,#3b6fd4)}
.login-card{background:#fff;border-radius:18px;padding:34px 30px;width:340px;box-shadow:0 20px 60px rgba(20,30,70,.3);text-align:center}
.login-card h1{margin:.1em 0 0;font-size:22px}
.login-logo{font-size:40px}
.login-card label{text-align:left}
.login-card input{margin-bottom:4px}
.login-card button{width:100%;margin-top:16px;padding:11px}

/* ---- candidates: search, bulk, sortable, actions, modal (v2) ---- */
.searchbar{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:0 12px;box-shadow:var(--shadow);margin:2px 0 12px}
.searchbar:focus-within{border-color:var(--brand2);box-shadow:0 0 0 3px rgba(59,111,212,.15)}
.searchbar .sicon{color:#9aa4b8;flex:none;display:block}
.searchbar input{flex:1;width:auto;border:none;background:transparent;box-shadow:none;padding:12px 0;font-size:15px}
.searchbar input:focus{outline:none;border:none;box-shadow:none}
.searchbar .sclear{flex:none;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border:none;border-radius:50%;background:#eef1f8;color:#7c879b;cursor:pointer;padding:0}
.searchbar .sclear:hover{background:#e2e7f3;color:#42506e}
.btn.ghost{background:#fff;color:#56617a;border:1px solid var(--line)} .btn.ghost:hover{background:#f4f6fb}
.btn.danger.solid{background:var(--red);color:#fff;border:1px solid var(--red)} .btn.danger.solid:hover{background:#bf3a33}
.btn .ic{display:inline-flex;vertical-align:-3px;margin-right:6px}
.listbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:6px 2px 10px;min-height:34px;flex-wrap:wrap}
.listbar .count b{color:var(--ink)}
.bulkbar{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:5px 6px 5px 14px;box-shadow:var(--shadow)}
.bulkbar b{color:var(--brand)}
.pad{padding:26px}
.checkcol{width:38px;text-align:center} .checkcol input{width:16px;height:16px;cursor:pointer}
.grid th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
.grid th.sortable:hover{color:var(--brand)}
.grid th.sortable::after{content:"\2195";opacity:.35;margin-left:5px;font-size:11px}
.grid th.sortable.asc::after{content:"\2191";opacity:.9}
.grid th.sortable.desc::after{content:"\2193";opacity:.9}
.grid tbody tr:hover{background:#f9fbff}
.cand-name{font-weight:600;color:var(--ink)} .cand-name:hover{color:var(--brand2)}
.grid td.actions{white-space:nowrap;text-align:right;vertical-align:middle}
.rowactions{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:#fff;color:#8a93a6;cursor:pointer;padding:0;flex:none}
.iconbtn:hover{background:#f4f6fb;color:#56617a}
.iconbtn.del{color:var(--red);border-color:#f0c9c6}
.iconbtn.del:hover{background:#fbe6e5;border-color:#e7b4b0}
.iconbtn svg{display:block}
.modal-overlay{position:fixed;inset:0;background:rgba(20,28,50,.45);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal{background:#fff;border-radius:16px;padding:22px 24px;width:430px;max-width:94vw;box-shadow:0 24px 70px rgba(20,30,70,.35);animation:pop .12s ease-out}
@keyframes pop{from{transform:scale(.96);opacity:.6}to{transform:scale(1);opacity:1}}
.modal-h{font-size:18px;font-weight:700;margin-bottom:12px}
.modal-b p{margin:6px 0} .modal-b .small{font-size:12.5px} .modal-b .mlist{font-weight:600;color:#42506e}
.modal-f{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}

/* hidden attribute must always win over display rules */
[hidden]{display:none!important}