/* UPMC2 — built on the Acads-Notion design system tokens */
:root {
  --ink: #191918; --ink-soft: #2a2926; --text-strong: #37352f; --text-body: #55534e; --text-subtle: #6b6a66; --text-faint: #8f8d88;
  --surface: #ffffff; --surface-inset: #fbfbfa; --surface-sidebar: #f8f8f7; --surface-muted: #f6f5f4; --surface-hover: #f3f2f0; --surface-sunken: #f1f0ee;
  --track: #efeeec; --line: #ecebe8; --border: #e3e2df; --border-strong: #c9c7c2; --border-hover: #9d9b96;
  --primary: #0b66c3; --primary-hover: #0a579f; --on-primary: #ffffff; --primary-soft: #e8f1fc; --primary-soft-hover: #d8e8fa;
  --link: #0b5cad; --link-hover: #08467f;
  --prelims-soft: #dff3e2; --prelims: #2f9e44; --prelims-ink: #1d6b31; --prelims-tint: #eef8f0;
  --mains-soft: #dfeafb; --mains: #2f6fdb; --mains-ink: #1f4f9e;
  --optional-soft: #fcebd9; --optional: #d9731a; --optional-ink: #8a4510; --optional-tint: #fdf1e5; --optional-edge: #f3d2b3;
  --ifos-soft: #dcefea; --ifos: #1f8a70; --ifos-ink: #155e4d;
  --interview-soft: #efe6fb; --interview: #7c4ddb; --interview-ink: #51308f; --interview-tint: #f3edfc;
  --danger: #c2410c; --danger-ink: #9a3412;
  --radius-4: 4px; --radius-7: 7px; --radius-9: 9px; --radius-12: 12px; --radius-14: 14px; --radius-16: 16px; --radius-20: 20px; --radius-pill: 999px;
  --shadow-offset-sm: 2px 2px 0 #191918;
  --shadow-ring: 0 0 0 1px rgba(25,25,24,0.05);
  --shadow-card: 0 0 0 1px rgba(25,25,24,0.05), 0 12px 30px -16px rgba(25,25,24,0.12);
  --shadow-window: 0 30px 80px -20px rgba(25,25,24,0.18), 0 8px 20px -8px rgba(25,25,24,0.08), 0 1px 2px rgba(25,25,24,0.05);
  --tap: 44px; --container: 1240px; --header-h: 58px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --sans: "Schibsted Grotesk", "Helvetica Neue", Helvetica, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--text-body); background: var(--surface-muted); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--link); }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
h1, h2, h3, h4 { color: var(--ink); margin: 0; letter-spacing: -0.02em; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-subtle); }
.faint { color: var(--text-faint); font-size: 12.5px; }
.hidden { display: none !important; }

/* ---------- header ---------- */
.topbar { position: sticky; top: 0; z-index: 20; height: var(--header-h); background: rgba(255,255,255,0.88); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line); }
.topbar .in { max-width: var(--container); margin: 0 auto; height: 100%; padding: 0 20px; display: flex; align-items: center; gap: 12px; }
.mark { width: 32px; height: 32px; border-radius: var(--radius-9); border: 1.5px solid var(--ink); box-shadow: var(--shadow-offset-sm);
  background: #fff; display: grid; place-items: center; overflow: hidden; }
.mark img { height: 24px; }
.brand { font-weight: 900; color: var(--ink); letter-spacing: -0.03em; font-size: 17px; }
.brand small { display: block; font-weight: 500; font-size: 11.5px; color: var(--text-subtle); letter-spacing: 0; line-height: 1.1; }
.topbar .sp { flex: 1; }
.who { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-subtle); position: relative; }
.menu-btn { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-pill);
  padding: 3px 12px 3px 3px; min-height: 38px; cursor: pointer; font-weight: 600; color: var(--text-strong); }
.menu-btn:hover { border-color: var(--border-hover); }
.menu { position: absolute; right: 0; top: calc(100% + 8px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-12);
  box-shadow: var(--shadow-card); min-width: 220px; padding: 6px; z-index: 30; display: grid; }
.menu-who { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; display: grid; }
.menu-who b { color: var(--ink); } .menu-who span { font-size: 12px; color: var(--text-subtle); word-break: break-all; }
.menu a, .menu button { text-align: left; border: 0; background: none; padding: 10px; border-radius: var(--radius-7); font-weight: 600; color: var(--text-strong);
  text-decoration: none; cursor: pointer; min-height: 40px; font-size: 14px; }
.menu a:hover, .menu button:hover { background: var(--surface-hover); }
.who .av { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-sunken); color: var(--ink); display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.demo-flag { font-size: 12px; font-weight: 700; color: var(--optional-ink); background: var(--optional-tint); border: 1px solid var(--optional-edge); padding: 3px 9px; border-radius: var(--radius-pill); }

main { max-width: var(--container); margin: 0 auto; padding: 28px 20px 120px; }

/* ---------- buttons ---------- */
.btn { min-height: var(--tap); padding: 0 18px; border-radius: var(--radius-9); border: 1px solid var(--border); background: var(--surface);
  color: var(--ink); font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  transition: background .2s, border-color .2s, transform .1s; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: var(--border-hover); background: var(--surface-inset); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn.primary:hover { background: var(--primary-hover); }
.btn.soft { background: var(--primary-soft); border-color: transparent; color: var(--link); }
.btn.soft:hover { background: var(--primary-soft-hover); }
.btn.good { background: var(--prelims-ink); border-color: var(--prelims-ink); color: #fff; }
.btn.good:hover { background: #175a29; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--text-body); }
.btn.ghost:hover { background: var(--surface-hover); }
.btn.sm { min-height: 36px; padding: 0 12px; font-size: 13.5px; }
.btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- page heads ---------- */
.crumbs { display: flex; gap: 6px; align-items: center; font-size: 13.5px; color: var(--text-subtle); margin-bottom: 10px; flex-wrap: wrap; }
.crumbs a { text-decoration: none; color: var(--link); font-weight: 600; }
.crumbs .sep { color: var(--text-faint); }
.page-title { font-size: clamp(28px, 4vw, 40px); font-weight: 900; letter-spacing: -0.04em; line-height: 1.08; }
.page-sub { margin: 8px 0 0; font-size: 16px; max-width: 580px; }
.head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.head .sp { flex: 1; }

/* ---------- sign in ---------- */
.signin { min-height: calc(100vh - var(--header-h) - 60px); display: grid; place-items: center; }
.signin .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-20); box-shadow: var(--shadow-card);
  padding: 40px 36px; max-width: 460px; width: 100%; text-align: center; }
.signin img.emb { height: 84px; margin-bottom: 14px; }
.signin h1 { font-size: 30px; font-weight: 900; letter-spacing: -0.04em; }
.signin p { margin: 8px 0 24px; }
.signin .gbtn { display: flex; justify-content: center; min-height: 44px; }
.signin .or { margin: 18px 0 12px; font-size: 12.5px; color: var(--text-faint); }

/* ---------- tiles (circles / divisions) ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-14); padding: 18px; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 14px; min-height: 92px; transition: border-color .2s, box-shadow .2s, transform .2s; animation: up .45s var(--ease) both; }
.tile:hover { border-color: var(--border-hover); box-shadow: var(--shadow-card); transform: translateY(-1px); }
.tile .t { flex: 1; min-width: 0; }
.tile b { display: block; color: var(--ink); font-size: 18px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.tile span { font-size: 13px; color: var(--text-subtle); }
.tile.empty { opacity: .55; }
.ring { --p: 0; width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(var(--prelims) calc(var(--p) * 1%), var(--track) 0); }
.ring i { width: 40px; height: 40px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-style: normal;
  font-size: 12px; font-weight: 700; color: var(--prelims-ink); font-variant-numeric: tabular-nums; }

/* ---------- division page ---------- */
.progress { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-14); padding: 16px 18px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.progress .bar { flex: 1; min-width: 200px; height: 10px; background: var(--track); border-radius: var(--radius-pill); overflow: hidden; display: flex; }
.progress .bar i { display: block; height: 100%; transition: width .5s var(--ease); }
.progress .bar i.v { background: var(--prelims); } .progress .bar i.p { background: var(--interview); }
.progress .big { font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--c); }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { min-height: 38px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--text-strong); }
.chip:hover { border-color: var(--border-hover); }
.chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip .n { margin-left: 6px; font-weight: 500; opacity: .7; font-variant-numeric: tabular-nums; }
.search { position: relative; margin-left: auto; }
.search input { min-height: 40px; width: 260px; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0 14px 0 38px; background: var(--surface); }
.search svg { position: absolute; left: 13px; top: 11px; width: 18px; height: 18px; stroke: var(--text-subtle); fill: none; stroke-width: 2; stroke-linecap: round; }

.group-h { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 12px; }
.group-h h3 { font-size: 18px; font-weight: 800; }
.group-h span { font-size: 13px; color: var(--text-subtle); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ocard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-14); padding: 16px; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 12px; position: relative; transition: border-color .2s, box-shadow .2s, transform .2s; animation: up .45s var(--ease) both; }
.ocard:hover { border-color: var(--border-hover); box-shadow: var(--shadow-card); transform: translateY(-1px); }
.ocard .top { display: flex; gap: 12px; align-items: center; padding-right: 40px; }
.ocard .dl { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: var(--radius-9); border: 1px solid var(--border);
  background: var(--surface); display: grid; place-items: center; cursor: pointer; color: var(--text-body); transition: background .2s, border-color .2s, color .2s; }
.ocard .dl:hover { background: var(--primary-soft); border-color: transparent; color: var(--link); }
.ocard .dl svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.initials { width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 16px; letter-spacing: -0.02em; }
.initials.FR { background: var(--mains-soft); color: var(--mains-ink); }
.initials.DFR { background: var(--ifos-soft); color: var(--ifos-ink); }
.initials.FG { background: var(--surface-sunken); color: var(--ink); }
.ocard .nm { color: var(--ink); font-weight: 800; font-size: 16px; line-height: 1.25; letter-spacing: -0.015em; }
.ocard .id { font-size: 13px; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.ocard .meta { font-size: 13px; color: var(--text-body); min-height: 20px; }
.ocard .foot { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ocard.flash { animation: flash 1.4s var(--ease); }
.ocard.next { box-shadow: 0 0 0 2px var(--primary); }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.verified { background: var(--prelims-soft); color: var(--prelims-ink); }
.pill.pending { background: var(--interview-soft); color: var(--interview-ink); }
.pill.unverified { background: var(--surface-sunken); color: var(--text-subtle); }
.pill.attn { background: var(--optional-tint); color: var(--optional-ink); }
.tag { display: inline-block; padding: 2px 7px; border-radius: var(--radius-4); font-size: 11.5px; font-weight: 700; background: var(--surface-sunken); color: var(--text-strong); }

.empty-state { text-align: center; padding: 56px 20px; color: var(--text-subtle); background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius-14); }
.empty-state b { display: block; color: var(--ink); font-size: 17px; margin-bottom: 4px; }

/* ---------- profile dialog ---------- */
.scrim { position: fixed; inset: 0; background: rgba(25,25,24,.38); z-index: 40; display: flex; align-items: flex-start; justify-content: center;
  padding: 28px 16px; overflow: auto; opacity: 0; transition: opacity .25s; }
.scrim.on { opacity: 1; }
.dialog { background: var(--surface); border-radius: var(--radius-20); box-shadow: var(--shadow-window); width: 100%; max-width: 860px; overflow: hidden;
  display: flex; flex-direction: column; max-height: calc(100vh - 56px);
  transform: translateY(16px) scale(.98); transition: transform .3s var(--ease); }
.scrim.on .dialog { transform: none; }
.dialog .dhead { padding: 24px 26px 18px; display: flex; gap: 16px; align-items: flex-start; border-bottom: 1px solid var(--line); }
.dialog .dhead .initials { width: 64px; height: 64px; font-size: 22px; }
.dialog .dhead h2 { font-size: 26px; font-weight: 900; letter-spacing: -0.035em; line-height: 1.1; }
.dialog .dhead .sub { margin-top: 6px; font-size: 14px; color: var(--text-subtle); }
.dialog .dhead .sub b { color: var(--text-strong); }
.dialog .dhead .pills { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.dialog .x { margin-left: auto; width: 40px; height: 40px; border-radius: var(--radius-9); border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-size: 20px; color: var(--text-body); flex: none; }
.dialog .dbody { padding: 6px 26px 24px; overflow: auto; flex: 1; overscroll-behavior: contain; }
.summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0 6px; }
.summary div { background: var(--surface-muted); border-radius: var(--radius-12); padding: 12px 14px; }
.summary b { display: block; font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.summary span { font-size: 12.5px; color: var(--text-subtle); }
.summary .warn { background: var(--optional-tint); } .summary .warn b { color: var(--optional-ink); }
.notice { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-12); font-size: 14px; }
.notice.attn { background: var(--optional-tint); color: var(--optional-ink); border: 1px solid var(--optional-edge); }
.notice.pend { background: var(--interview-tint); color: var(--interview-ink); }
.notice.info { background: var(--primary-soft); color: var(--link); }
.sec { margin-top: 22px; }
.sec-h { display: flex; align-items: center; gap: 8px; min-height: 40px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.sec-h h3 { font-size: 15px; font-weight: 800; color: var(--ink); margin: 0; letter-spacing: -0.01em; }
.sec-h .sp { flex: 1; }
.sec-edit { color: var(--link); }
.sec-edit:hover { background: var(--primary-soft); }
.editing-tag { font-size: 12.5px; font-weight: 700; color: var(--link); background: var(--primary-soft); padding: 4px 10px; border-radius: var(--radius-pill); }
.urgent-tag { font-size: 12px; font-weight: 700; color: var(--optional-ink); background: var(--optional-soft); padding: 3px 9px; border-radius: var(--radius-pill); }
.sec.urgent { background: var(--surface-inset); border: 1.5px solid var(--optional-edge); border-radius: var(--radius-14); padding: 6px 16px 10px; margin-top: 18px; }
.sec.urgent .sec-h { border-bottom-color: var(--optional-edge); }
.sec.urgent .summary { margin-top: 12px; }
.sec.urgent .notice { margin-top: 12px; }
.sec.editing { box-shadow: 0 0 0 3px var(--primary-soft); }
.sec.urgent.editing { border-color: var(--primary); }
.tick { width: 20px; height: 20px; color: var(--mains); vertical-align: -3px; margin-left: 5px; flex: none; }
.dialog .dhead h2 .tick { width: 24px; height: 24px; vertical-align: -3px; }
.bio { display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; }
.bio .row { display: grid; grid-template-columns: 170px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); align-items: center; min-height: 44px; }
.bio .row.full { grid-column: 1 / -1; grid-template-columns: 170px 1fr; }
.bio .k { font-size: 13px; color: var(--text-subtle); }
.bio .v { font-size: 14.5px; color: var(--ink); font-weight: 600; word-break: break-word; }
.bio .v.empty { color: var(--text-faint); font-weight: 400; font-style: italic; }
.bio .v .was { display: block; font-size: 12px; font-weight: 500; color: var(--text-faint); text-decoration: line-through; }
.bio .v .pa { display: block; font-size: 12px; font-weight: 600; color: var(--interview-ink); margin-top: 2px; }
.bio input, .bio select, .bio textarea { width: 100%; min-height: var(--tap); border: 1.5px solid var(--border); border-radius: var(--radius-9); padding: 0 12px; background: var(--surface); font-size: 15px; color: var(--ink); }
.bio textarea { padding: 10px 12px; min-height: 80px; resize: vertical; }
.bio input:focus, .bio select:focus, .bio textarea:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--primary-soft); }
.bio .row.chg input, .bio .row.chg select, .bio .row.chg textarea { background: #fffbea; border-color: #e9c46a; }
.dfoot { flex: none; background: var(--surface); border-top: 1px solid var(--line); padding: 14px 26px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.dfoot .sp { flex: 1; }
.dfoot .ask { font-weight: 700; color: var(--ink); font-size: 15px; }

/* ---------- toast & overlay ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 160%); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: var(--radius-12);
  z-index: 60; transition: transform .35s var(--ease), opacity .35s; font-weight: 600; max-width: calc(100vw - 32px); box-shadow: var(--shadow-window); opacity: 0; pointer-events: none; }
.toast.on { transform: translate(-50%, 0); opacity: 1; }
.toast.err { background: var(--danger-ink); }
.busy { position: fixed; inset: 0; z-index: 70; background: rgba(255,255,255,.75); display: grid; place-items: center; }
.busy .box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-16); padding: 8px 26px 22px; box-shadow: var(--shadow-card); width: min(420px, calc(100vw - 32px)); text-align: center; }
.busy .box .loader { margin: 0; padding: 18px 0 6px; border: 0; background: none; }
.busy .box b { color: var(--ink); display: block; margin-bottom: 10px; }
.busy .track { height: 8px; background: var(--track); border-radius: var(--radius-pill); overflow: hidden; }
.busy .track i { display: block; height: 100%; width: 0; background: var(--primary); transition: width .2s; }
.spinner { width: 28px; height: 28px; border: 3px solid var(--track); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto 10px; }
.skeleton { height: 92px; border-radius: var(--radius-14); background: linear-gradient(90deg, var(--surface-sunken), var(--surface-inset), var(--surface-sunken)); background-size: 200% 100%; animation: sh 1.2s infinite; }

/* ---------- forms (operator profile) ---------- */
.form { display: grid; gap: 14px; margin-top: 18px; text-align: left; }
.form label { font-size: 13px; font-weight: 700; color: var(--text-strong); display: grid; gap: 6px; }
.form input { min-height: var(--tap); border: 1.5px solid var(--border); border-radius: var(--radius-9); padding: 0 12px; font-size: 15px; }
.form .pw { position: relative; display: block; }
.form .pw input { width: 100%; padding-right: 70px; }
.form .pw .btn { position: absolute; right: 4px; top: 4px; }
.form input:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--primary-soft); }

/* ---------- admin ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-14); padding: 14px 16px; }
.kpi span { font-size: 12.5px; color: var(--text-subtle); font-weight: 600; }
.kpi b { display: block; font-size: 28px; font-weight: 900; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.subm { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-14); margin-bottom: 12px; overflow: hidden; }
.subm .sh { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; background: var(--surface-inset); }
.subm table { width: 100%; border-collapse: collapse; font-size: 14px; }
.subm td, .subm th { padding: 10px 16px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.subm th { font-size: 12px; color: var(--text-subtle); font-weight: 700; background: var(--surface); }
.old { color: var(--danger-ink); text-decoration: line-through; } .new { color: var(--prelims-ink); font-weight: 700; }
.conflict { color: var(--danger-ink); font-size: 12.5px; font-weight: 600; margin-top: 4px; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--primary); }

@keyframes up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes flash { 0% { box-shadow: 0 0 0 3px var(--prelims); } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes sh { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

@media (max-width: 720px) {
  main { padding: 18px 14px 120px; }
  .search { margin-left: 0; width: 100%; } .search input { width: 100%; }
  .bio { grid-template-columns: 1fr; } .bio .row, .bio .row.full { grid-template-columns: 1fr; gap: 4px; }
  .summary { grid-template-columns: 1fr 1fr; }
  .scrim { padding: 0; } .dialog { border-radius: 0; height: 100vh; max-height: 100vh; }
  .dfoot .btn { flex: 1; }
  .brand small { display: none; }
  .topbar .in { padding: 0 12px; gap: 8px; }
  .menu-btn { padding: 3px 8px 3px 3px; }
  .demo-flag { font-size: 11px; padding: 2px 7px; }
  .head .btn { width: 100%; }
}

@media (max-width: 720px) { .hide-sm { display: none !important; } }

/* ---------- loading animation ---------- */
.loader { text-align: center; padding: 30px 20px 26px; margin-bottom: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-16);
  animation: up .45s var(--ease) both; }
.loader .tree { width: 74px; height: 74px; display: block; margin: 0 auto 10px; overflow: visible; }
.loader .tree path { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.loader .canopy { stroke: var(--prelims); fill: var(--prelims-tint) !important; stroke-dasharray: 150; stroke-dashoffset: 150;
  animation: draw 2.8s var(--ease) infinite, sway 2.8s ease-in-out infinite; transform-origin: 32px 49px; }
.loader .trunk { stroke: var(--ink); stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw 2.8s var(--ease) infinite; }
.loader .ground { stroke: var(--border-strong); }
.loader .ld-title { display: block; color: var(--ink); font-size: 17px; font-weight: 800; letter-spacing: -0.015em; }
.loader .ld-step { margin: 10px 0 0; font-size: 14px; color: var(--text-body); min-height: 22px; transition: opacity .22s, transform .22s; }
.loader .ld-tip { margin: 14px auto 0; max-width: 460px; font-size: 13px; color: var(--interview-ink); background: var(--interview-tint); padding: 8px 12px;
  border-radius: var(--radius-9); transition: opacity .22s, transform .22s; }
.loader .ld-slow { margin: 10px 0 0; min-height: 18px; }
.loader .out { opacity: 0; transform: translateY(4px); }
.ibar { position: relative; height: 6px; max-width: 260px; margin: 14px auto 0; background: var(--track); border-radius: var(--radius-pill); overflow: hidden; }
.ibar i { position: absolute; top: 0; bottom: 0; width: 40%; border-radius: inherit; background: linear-gradient(90deg, var(--prelims), var(--primary)); animation: slide 1.4s ease-in-out infinite; }
@keyframes draw { 0% { stroke-dashoffset: var(--len, 150); } 45%, 75% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: calc(var(--len, 150) * -1); } }
@keyframes sway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(2.5deg); } }
@keyframes slide { 0% { left: -40%; } 100% { left: 100%; } }
.loader .trunk { --len: 60; }
@media (prefers-reduced-motion: reduce) { .loader .canopy, .loader .trunk { stroke-dashoffset: 0; } }

/* ---------- admin dashboard ---------- */
.dash .head { margin-bottom: 18px; }
.dash-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ctabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.ctab { display: flex; gap: 12px; align-items: center; text-align: left; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-14);
  background: var(--surface); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.ctab:hover { border-color: var(--border-hover); }
.ctab.on { border-color: var(--ink); box-shadow: var(--shadow-offset-sm); }
.ctab b { display: block; color: var(--ink); font-size: 15px; } .ctab small { color: var(--text-subtle); font-size: 12.5px; }
.ring.sm { width: 42px; height: 42px; } .ring.sm i { width: 32px; height: 32px; font-size: 10.5px; }
.kpis.dk { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-bottom: 16px; }
.dkpi { text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 2px; transition: border-color .2s, box-shadow .2s, transform .15s; position: relative; overflow: hidden; }
.dkpi:hover { border-color: var(--border-hover); transform: translateY(-1px); }
.dkpi.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.dkpi span { font-size: 12px; } .dkpi b { font-size: 26px; line-height: 1.15; } .dkpi small { font-size: 11.5px; color: var(--text-subtle); }
.dkpi .kbar { display: block; height: 4px; background: var(--track); border-radius: var(--radius-pill); margin-top: 8px; overflow: hidden; }
.dkpi .kbar em { display: block; height: 100%; border-radius: inherit; background: var(--ink); transition: width .5s var(--ease); }
.dkpi.good b { color: var(--prelims-ink); } .dkpi.good .kbar em { background: var(--prelims); }
.dkpi.violet b { color: var(--interview-ink); } .dkpi.violet .kbar em { background: var(--interview); }
.dkpi.muted b { color: var(--text-strong); } .dkpi.muted .kbar em { background: var(--border-strong); }
.dkpi.hot b { color: #c4320a; } .dkpi.hot .kbar em { background: #c4320a; }
.dkpi.warn b, .dkpi.warn2 b { color: var(--optional-ink); } .dkpi.warn .kbar em, .dkpi.warn2 .kbar em { background: var(--optional); }
.charts { display: grid; grid-template-columns: 1.2fr 1fr 0.8fr 1.2fr; gap: 12px; margin-bottom: 16px; }
.chart { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-14); padding: 14px 16px; min-width: 0; }
.chart h3 { font-size: 14px; font-weight: 800; margin-bottom: 8px; }
.legend-s { display: flex; gap: 10px; font-size: 11.5px; color: var(--text-subtle); margin-bottom: 8px; flex-wrap: wrap; }
.legend-s span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: 0; }
.legend-s .lv::before { background: var(--prelims); } .legend-s .lp::before { background: var(--interview); } .legend-s .lu::before { background: var(--border-strong); }
.legend-s .lu2::before { background: var(--text-faint); } .legend-s .lh::before { background: #c4320a; }
.hrow, .arow { display: grid; grid-template-columns: 96px 1fr auto; gap: 8px; align-items: center; width: 100%; border: 0; background: none; padding: 4px 6px;
  border-radius: var(--radius-7); cursor: pointer; text-align: left; font-size: 12.5px; color: var(--text-strong); }
.hrow:hover, .arow:hover { background: var(--surface-hover); } .hrow.on, .arow.on { background: var(--primary-soft); }
.hl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.hb { height: 12px; display: block; }
.stack { display: flex; height: 100%; border-radius: 3px; overflow: hidden; transition: width .5s var(--ease); }
.stack i { display: block; height: 100%; min-width: 0; } .stack .sv { background: var(--prelims); } .stack .sp { background: var(--interview); } .stack .su { background: var(--border-strong); }
.hn { font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; } .hn small, .an small { font-weight: 500; color: var(--text-subtle); }
.cols { display: flex; gap: 8px; align-items: stretch; height: 170px; padding-top: 6px; }
.col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: none; cursor: pointer; border-radius: var(--radius-7); padding: 4px 2px; }
.col:hover { background: var(--surface-hover); } .col.on { background: var(--primary-soft); }
.col .cb { flex: 1; width: 70%; display: flex; align-items: flex-end; }
.col .cb i { display: block; width: 100%; background: var(--mains); border-radius: 4px 4px 0 0; transition: height .5s var(--ease); }
.col.over .cb i { background: var(--optional); }
.col .cn { font-size: 13px; font-weight: 800; color: var(--ink); } .col .cl { font-size: 11.5px; color: var(--text-subtle); white-space: nowrap; }
.ctr { text-align: center; margin: 6px 0 0; }
.donut { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.donut svg { width: 150px; height: 150px; }
.dseg { cursor: pointer; transition: stroke-width .2s; } .dseg:hover, .dseg.on { stroke-width: 20; }
.dbig { font: 900 20px var(--sans); fill: var(--ink); letter-spacing: -0.03em; } .dsm { font: 500 8px var(--sans); fill: var(--text-subtle); }
.dleg { display: grid; gap: 2px; width: 100%; }
.lg { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 5px 8px; border-radius: var(--radius-7); cursor: pointer; font-size: 13px; color: var(--text-strong); }
.lg:hover { background: var(--surface-hover); } .lg.on { background: var(--primary-soft); }
.lg i { width: 10px; height: 10px; border-radius: 3px; } .lg b { margin-left: auto; color: var(--ink); }
.arow { grid-template-columns: 1.1fr 1fr auto; }
.al b { display: block; font-size: 12.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .al small { font-size: 11px; color: var(--text-subtle); }
.ab { display: flex; height: 10px; background: var(--track); border-radius: 3px; overflow: hidden; }
.ab i { display: block; height: 100%; } .ab .au { background: var(--text-faint); } .ab .ah { background: #c4320a; }
.an { font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.fbar { position: sticky; top: var(--header-h); z-index: 10; background: rgba(255,255,255,0.96); backdrop-filter: blur(8px); border: 1px solid var(--border);
  border-radius: var(--radius-14); padding: 12px 14px 10px; margin-bottom: 12px; box-shadow: var(--shadow-card); }
.frow { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.fs { display: grid; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--text-subtle); min-width: 130px; flex: 1; }
.fs.grow { flex: 2.4; min-width: 220px; }
.fs input, .fs select { min-height: 38px; border: 1px solid var(--border); border-radius: var(--radius-9); padding: 0 10px; background: var(--surface); font-size: 14px; font-weight: 500; color: var(--ink); width: 100%; }
.fs input:focus, .fs select:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--primary-soft); }
.fs.lim { flex: 0.8; min-width: 120px; } .limrow { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text-body); } .limrow input { width: 64px; }
.chips-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--line); padding-top: 8px; }
.chips-row .count { font-size: 13px; color: var(--text-subtle); margin-right: 6px; } .chips-row .count b { color: var(--ink); font-size: 15px; }
.fchip { border: 1px solid var(--primary-soft-hover); background: var(--primary-soft); color: var(--link); border-radius: var(--radius-pill); padding: 4px 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.fchip:hover { background: var(--primary-soft-hover); } .fchip span { margin-left: 4px; font-weight: 800; }
.tablecard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-14); overflow: hidden; }
.tscroll { overflow-x: auto; }
.dtable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dtable th { position: sticky; top: 0; background: var(--surface-inset); text-align: left; font-size: 11.5px; font-weight: 700; color: var(--text-subtle); padding: 10px 12px;
  border-bottom: 1px solid var(--border); cursor: pointer; white-space: nowrap; user-select: none; }
.dtable th:hover { color: var(--ink); } .dtable th.sorted { color: var(--ink); }
.dtable td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text-strong); }
.dtable tbody tr { cursor: pointer; transition: background .15s; } .dtable tbody tr:hover { background: #f6fbf8; }
.dtable tr.flash { animation: flash 1.6s var(--ease); }
.dtable .r { text-align: right; } .dtable .tn { font-weight: 700; color: var(--ink); white-space: nowrap; } .dtable .tn .tick { width: 16px; height: 16px; }
.dtable .over { color: var(--optional-ink); font-weight: 800; background: var(--optional-tint); padding: 1px 6px; border-radius: 4px; }
.dtable .hd { color: #fff; background: #c4320a; padding: 2px 7px; border-radius: 4px; font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.dtable .nip { color: var(--danger-ink); font-weight: 600; }
.dtable .pill { font-size: 11.5px; }
.tfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; flex-wrap: wrap; }
@media (max-width: 1180px) { .kpis.dk { grid-template-columns: repeat(4, 1fr); } .charts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .kpis.dk { grid-template-columns: 1fr 1fr; } .charts { grid-template-columns: 1fr; } .ctabs { grid-template-columns: 1fr; } .fbar { position: static; } }
.dtable .vby { white-space: nowrap; font-size: 11.5px; }

/* ---------- add-officer card ---------- */
.ocard.addcard { border: 1.5px dashed var(--border-strong); background: var(--surface-inset); align-items: center; justify-content: center; text-align: center; gap: 4px; min-height: 150px; color: var(--text-subtle); }
.ocard.addcard:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--link); }
.addcard .plus { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; font-weight: 500; background: var(--surface); border: 1.5px solid currentColor; line-height: 1; }
.addcard b { color: var(--ink); font-size: 15px; } .addcard small { font-size: 12.5px; max-width: 220px; }
.initials.addav { background: var(--primary-soft); color: var(--link); }
.req { color: var(--danger); font-weight: 800; }
/* ---------- help ---------- */
.help-btn { min-height: 36px; padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface); font-weight: 700; color: var(--text-strong); cursor: pointer; }
.help-btn:hover { border-color: var(--primary); color: var(--link); }
.help-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-12); padding: 10px 14px; margin: 0 0 16px; font-size: 14px; text-align: left; }
.signin .help-strip { margin: 22px 0 0; background: var(--surface-inset); }
.help-strip .hq { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--link); font-weight: 800; flex: none; }
.help-strip span:nth-child(2) { flex: 1; min-width: 200px; } .help-strip a { font-weight: 700; white-space: nowrap; }
.help-dlg { max-width: 620px; }
.help-contact { display: flex; align-items: center; gap: 14px; justify-content: space-between; flex-wrap: wrap; background: var(--primary-soft); border-radius: var(--radius-14); padding: 16px 18px; margin: 18px 0 8px; }
.help-contact div { display: grid; } .help-contact b { color: var(--ink); font-size: 18px; }
.help-steps { padding-left: 20px; margin: 14px 0; } .help-steps li { margin: 10px 0; line-height: 1.5; }
.loader .ld-help { margin: 12px 0 0; font-size: 12.5px; color: var(--text-subtle); } .loader .ld-help a { font-weight: 700; }
.newoff { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--ink); } .newoff em { font-style: normal; color: var(--text-subtle); font-size: 12px; margin-right: 3px; }

/* ---------- add: search first, then transfer or add ---------- */
.finder { display: flex; gap: 8px; margin: 14px 0 10px; }
.search.big { flex: 1; margin: 0; } .search.big input { width: 100%; min-height: 46px; font-size: 16px; border-radius: var(--radius-12); } .search.big svg { top: 14px; }
.fres { min-height: 120px; } .fres .spinner { margin-top: 20px; }
.fitem { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.fitem .fi { flex: 1; display: grid; gap: 1px; font-size: 13.5px; } .fitem .fi b { color: var(--ink); font-size: 15px; }
.empty-state.small { padding: 24px 16px; font-size: 14px; }
.tr-route { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.tr-route span { display: grid; padding: 6px 12px; border-radius: var(--radius-9); background: var(--surface-sunken); font-weight: 700; color: var(--ink); font-size: 14px; }
.tr-route span small { font-weight: 500; color: var(--text-subtle); font-size: 11.5px; } .tr-route .to { background: var(--prelims-soft); color: var(--prelims-ink); }
.tr-route b { color: var(--text-subtle); font-size: 18px; }
.ctr { text-align: center; }