/* ==========================================================================
   Gigman Partner Portal — design system
   Monochrome: white primary, black secondary. Montserrat throughout.
   Mark: assets/mark-black.png (Gigman monogram).

   Colour is spent ONLY on meaning. Chrome, navigation, buttons and structure
   are pure black-on-white; the single restrained status ramp exists because
   approved / rejected / paid must be distinguishable at a glance in a
   financial tool. Everything else earns its weight through type and space.
   ========================================================================== */
:root{
  /* surfaces — white primary */
  --bg:#ffffff; --bg-2:#fafafa; --surface:#ffffff; --surface-2:#f7f7f8; --surface-3:#efeff1;
  /* ink — black secondary */
  --ink:#0a0a0a; --ink-2:#404040; --ink-3:#737373; --ink-4:#a1a1a1;
  --line:#ebebed; --line-2:#dcdcdf; --line-3:#c2c2c6;
  /* action colour is simply black */
  --brand:#0a0a0a; --brand-2:#262626; --brand-ink:#ffffff;
  --brand-soft:#f2f2f3; --brand-soft-2:#e4e4e7;
  /* The two entities. Weight still carries the distinction — Live solid, Media
     outlined — but Media also carries its own amber, taken from the brand mark
     (assets/mark-amber.png) rather than picked by eye. */
  --live:#0a0a0a; --media:#ffbd59;
  /* status — muted, modern, accessible on white */
  --ok:#15803d;   --ok-soft:#effdf4;   --ok-line:#bbf7d0;
  --warn:#b45309; --warn-soft:#fffbeb; --warn-line:#fde68a;
  --err:#b42318;  --err-soft:#fef3f2;  --err-line:#fecdca;
  --info:#175cd3; --info-soft:#eff8ff; --info-line:#b2ddff;
  --radius-xs:6px; --radius-sm:9px; --radius:12px; --radius-lg:16px; --radius-xl:24px;
  --shadow-sm:0 1px 2px rgba(10,10,10,.05);
  --shadow:0 2px 6px rgba(10,10,10,.05), 0 10px 28px -12px rgba(10,10,10,.14);
  --shadow-lg:0 30px 64px -24px rgba(10,10,10,.30);
  --font-display:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  /* mono is reserved for machine identifiers — IFSC, account and Zoho IDs —
     where 0/O and 1/l ambiguity is a real operational risk. Money uses
     Montserrat with tabular figures so it stays on-brand. */
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sidebar:250px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans);font-size:14px;
  line-height:1.55;letter-spacing:-.005em;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3{margin:0}
table{border-collapse:collapse;width:100%}
::selection{background:var(--ink);color:#fff}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- brand mark ---------- */
.brandmark{display:flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em}
.brandmark .dot{width:34px;height:34px;flex:none;background:url(/img/mark-black.png) center/contain no-repeat;
  color:transparent;font-size:0;overflow:hidden}
.brandmark .wm{line-height:1.1}
.brandmark .wm b{display:block;font-size:15px;text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.brandmark small{display:block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-4);font-weight:600;margin-top:3px}

/* ---------- chrome: topbar (vendor) ---------- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--line);padding:15px 34px;display:flex;align-items:center;gap:30px}
.nav{display:flex;gap:2px;margin-left:8px;flex-wrap:wrap}
.nav button{font:inherit;font-weight:600;font-size:13.5px;border:0;background:none;color:var(--ink-3);
  padding:9px 16px;border-radius:var(--radius-sm);cursor:pointer;transition:.16s;display:flex;align-items:center}
.nav button:hover{background:var(--surface-2);color:var(--ink)}
.nav button[aria-current="page"]{background:var(--ink);color:var(--brand-ink)}
.nav button .badge{background:var(--err);color:#fff;border-radius:999px;font-size:10px;font-weight:700;
  padding:1px 6px;margin-left:8px;letter-spacing:0}
.nav button[aria-current="page"] .badge{background:#fff;color:var(--ink)}
.topbar .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.userchip{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line-2);
  padding:4px 15px 4px 4px;border-radius:999px;font-weight:600;font-size:13px}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--brand-ink);
  display:grid;place-items:center;font-size:10.5px;font-weight:700;letter-spacing:.02em}

/* ---------- chrome: sidebar variant (admin) ----------
   Same markup as the topbar; CSS turns it into a rail. Admin has five
   sections, which a horizontal bar handles badly. */
.admin .topbar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);height:100vh;flex-direction:column;
  align-items:stretch;gap:0;padding:26px 16px 20px;border-bottom:0;border-right:1px solid var(--line);
  background:var(--bg-2);backdrop-filter:none;overflow-y:auto}
.admin .topbar .brandmark{padding:0 8px 24px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.admin .nav{flex-direction:column;margin:16px 0 0;gap:2px}
.admin .nav button{width:100%;justify-content:flex-start;padding:11px 14px;font-size:13.5px}
.admin .nav button .badge{margin-left:auto}
.admin .topbar .right{margin:auto 0 0;flex-direction:column;align-items:stretch;gap:9px;
  padding-top:18px;border-top:1px solid var(--line)}
.admin .topbar .right .userchip{justify-content:flex-start;background:transparent;border-color:transparent;padding-left:0}
.admin .page{margin-left:var(--sidebar)}

/* ---------- layout ---------- */
.page{max-width:1120px;margin:0 auto;padding:52px 34px 100px}
.page.wide{max-width:1340px}
.admin .page{max-width:none;margin-right:0;padding:44px 46px 100px}
.eyebrow{font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--ink-4);font-weight:700;margin-bottom:14px}
.display{font-family:var(--font-display);font-weight:700;font-size:46px;line-height:1.04;letter-spacing:-.038em}
.display.sm{font-size:33px;letter-spacing:-.03em}
.display em{font-style:normal;color:var(--ink-4)}
.display .pt{display:none}          /* no decorative full stop */
.lede{color:var(--ink-3);max-width:56ch;margin-top:15px;font-size:15px;font-weight:400}
.hero{display:grid;grid-template-columns:1fr 372px;gap:48px;align-items:start;margin-bottom:44px}
.pagehead{display:flex;align-items:flex-end;gap:20px;margin-bottom:34px}
.pagehead .grow{flex:1}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  margin-bottom:22px;overflow:hidden}
.card-head{padding:22px 26px;display:flex;align-items:flex-start;gap:16px;border-bottom:1px solid var(--line)}
.card-head:last-child{border-bottom:0}
.card-head h2{font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:-.02em}
.card-head p{margin:5px 0 0;color:var(--ink-3);font-size:13px;font-weight:400}
.card-head .grow{flex:1}
.card-body{padding:22px 26px}
/* Wide tables scroll inside their own card rather than widening the page. */
.card-body.flush{padding:6px 12px 12px;overflow-x:auto}
.card-body.flush > table{min-width:640px}
/* inverted card — the one place large black surface is used, for emphasis */
.card.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.card.dark .muted{color:rgba(255,255,255,.55)}
.card.dark .card-head{border-bottom-color:rgba(255,255,255,.1)}
.card.dark .avatar{background:#fff;color:var(--ink)}
.card.dark .pill.p-ok{background:rgba(255,255,255,.14);color:#fff}
.card.accent{border-color:var(--line-3);box-shadow:var(--shadow)}

/* ---------- pills & buttons ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  font-size:11.5px;font-weight:600;white-space:nowrap;border:1px solid transparent;letter-spacing:0}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.pill.plain::before{display:none}
.p-ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line)}
.p-warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.p-err{background:var(--err-soft);color:var(--err);border-color:var(--err-line)}
.p-info{background:var(--info-soft);color:var(--info);border-color:var(--info-line)}
.p-brand,.p-accent{background:var(--brand-soft);color:var(--ink);border-color:var(--line-2)}
.p-mute{background:var(--surface-2);color:var(--ink-3);border-color:var(--line)}
.btn{font:inherit;font-weight:600;font-size:13.5px;border:1px solid transparent;border-radius:var(--radius-sm);
  padding:10px 19px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:.16s}
.btn-primary{background:var(--ink);color:var(--brand-ink)}
.btn-primary:hover{background:var(--brand-2)}
.btn-primary:disabled{background:var(--line-2);color:var(--ink-4);cursor:not-allowed}
.btn-ghost{background:var(--surface);border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--line-3)}
.btn-ok{background:var(--ok);color:#fff} .btn-ok:hover{filter:brightness(1.08)}
.btn-err{background:var(--err);color:#fff} .btn-err:hover{filter:brightness(1.08)}
.btn-warn{background:var(--warn);color:#fff} .btn-warn:hover{filter:brightness(1.08)}
.btn-sm{padding:8px 15px;font-size:13px}
.btnrow{display:flex;gap:9px;flex-wrap:wrap}

/* ---------- entity tags — solid vs outlined, monochrome ---------- */
.entity{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 9px;border-radius:var(--radius-xs);border:1.5px solid var(--ink);
  white-space:nowrap}
.e-live{background:var(--ink);color:#fff}
.e-media{background:transparent;color:var(--ink)}
.card.dark .e-live{background:#fff;color:var(--ink);border-color:#fff}
.card.dark .e-media{color:#fff;border-color:#fff}

/* ---------- tables ---------- */
thead th{text-align:left;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);
  font-weight:700;padding:12px 14px;border-bottom:1px solid var(--line)}
thead th.num{color:var(--ink-4);font-family:var(--font-sans);font-size:10px}
tbody td{padding:16px 14px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--ink-2)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--surface-2)}
tfoot td{padding:15px 14px;font-weight:700;border-top:1.5px solid var(--ink);color:var(--ink)}
/* money: on-brand Montserrat, but strictly tabular so columns align */
.num{text-align:right;font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
  font-weight:600;color:var(--ink);letter-spacing:-.01em}
/* machine identifiers: mono, because 0/O and 1/l must not be confusable */
.mono{font-family:var(--font-mono);font-size:12.5px;color:var(--ink);letter-spacing:-.02em}
.rowbtn{background:transparent;border:1px solid var(--line-2);font:inherit;font-size:12.5px;font-weight:600;
  color:var(--ink-3);cursor:pointer;padding:6px 13px;border-radius:var(--radius-xs);transition:.15s}
.rowbtn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.linkish{color:var(--ink);text-decoration:none;font-weight:600;
  border-bottom:1.5px solid var(--line-3);cursor:pointer;transition:.15s}
.linkish:hover{border-color:var(--ink)}
tr.sel td{background:var(--surface-2)}
tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--ink)}

/* ---------- alerts ---------- */
.alert{display:flex;gap:13px;align-items:flex-start;padding:14px 17px;border-radius:var(--radius);
  font-size:13px;border:1px solid transparent;line-height:1.5}
.a-err{background:var(--err-soft);color:#7a1c12;border-color:var(--err-line)}
.a-info{background:var(--info-soft);color:#0f3d8a;border-color:var(--info-line)}
.a-warn{background:var(--warn-soft);color:#7c3a06;border-color:var(--warn-line)}
.a-ok{background:var(--ok-soft);color:#0d5628;border-color:var(--ok-line)}
.alert .t{font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;margin-bottom:4px;opacity:.8}
.alert .grow{flex:1}

/* ---------- forms ---------- */
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.field label{display:block;font-weight:600;margin-bottom:8px;font-size:12.5px;color:var(--ink)}
.field label .opt{font-weight:400;color:var(--ink-4);margin-left:5px;text-transform:none}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:14px;padding:11px 14px;
  border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink)}
.field textarea{min-height:88px;resize:vertical}
.field input::placeholder,.toolbar input::placeholder{color:var(--ink-4);font-weight:400}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--ink);
  box-shadow:0 0 0 3px var(--brand-soft-2)}
.field .help{color:var(--ink-3);font-size:12px;margin-top:8px;font-weight:500}
.field .help.good{color:var(--ok)} .field .help.bad{color:var(--err)}
.field input.ok{border-color:var(--ok)} .field input.bad{border-color:var(--err)}
.toolbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
.toolbar select,.toolbar input{font:inherit;font-size:13.5px;font-weight:500;padding:9px 13px;
  border:1px solid var(--line-2);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink-2)}
.chk{width:16px;height:16px;accent-color:var(--ink);cursor:pointer}

/* ---------- dropzone ---------- */
.split{display:grid;grid-template-columns:1fr 400px;gap:22px;align-items:start}
.split-r{display:grid;grid-template-columns:376px 1fr;gap:28px;align-items:start}
/* A sticky child can only stick within its own grid item. With align-items:start
   the left column is only as tall as its content, so the nav scrolls away.
   Stretch it to the full row height wherever the left rail must stay pinned. */
.split-r.stretch{align-items:stretch}
.split-r.narrow-left{grid-template-columns:300px 1fr}
.drop{border:1.5px dashed var(--line-3);border-radius:var(--radius-lg);background:var(--bg-2);
  padding:62px 30px;text-align:center;cursor:pointer;transition:.18s}
.drop:hover{border-color:var(--ink);background:var(--surface-2)}
.drop .ic{width:60px;height:60px;border-radius:50%;background:var(--ink);display:grid;place-items:center;
  margin:0 auto 18px;color:#fff}
.drop h3{font-family:var(--font-display);font-size:22px;font-weight:700;margin-bottom:9px;letter-spacing:-.03em}
.drop p{color:var(--ink-3);font-size:13px;margin:0;max-width:42ch;margin-inline:auto}
/* dragging over it, and the settled state once a file is attached — the
   settled state is deliberately quieter, since the attention should move on
   to the amounts the vendor now has to check */
.drop.dragging{border-color:var(--ink);border-style:solid;background:var(--brand-soft)}
.drop.filled{padding:34px 30px;border-style:solid;border-color:var(--line-2);background:var(--surface)}
.drop.filled .ic{width:48px;height:48px;margin-bottom:14px}
.drop.filled h3{font-size:17px}
/* A compact variant for the KYC screen, where three of these sit side by side
   rather than one filling the page. */
.drop.compact{padding:26px 18px}
.drop.compact .ic{width:40px;height:40px;margin-bottom:12px}
.drop.compact h3{font-size:14.5px;margin-bottom:5px}
.drop.compact p{font-size:12px;word-break:break-word}
.drop.compact.filled{padding:26px 18px}

/* ---------- timeline ---------- */
.timeline{list-style:none;margin:0;padding:4px 0 0}
.timeline li{display:flex;gap:14px;padding-bottom:18px;position:relative}
.timeline li:not(:last-child)::before{content:"";position:absolute;left:6px;top:16px;bottom:0;width:1.5px;background:var(--line-2)}
.timeline .dot{width:13px;height:13px;border-radius:50%;border:2px solid var(--bg);background:var(--line-3);
  flex:none;margin-top:3px;z-index:1}
.timeline .done .dot{background:var(--ink)}
.timeline .now .dot{background:var(--ink);box-shadow:0 0 0 4px var(--brand-soft-2)}
.timeline .meta{font-size:12px;color:var(--ink-3);font-weight:400}
.timeline strong{font-size:13px;font-weight:700;color:var(--ink)}
.mailtag{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:var(--ink-3);
  background:var(--surface-2);border:1px solid var(--line);padding:2px 8px;border-radius:999px;margin-left:8px}

/* ---------- kpi ---------- */
.expand{background:var(--bg-2)}
.expand td{padding:26px 22px}
tbody tr.expand:hover td{background:var(--bg-2)}
.kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}
.kpi.k4{grid-template-columns:repeat(4,1fr)}
.kpi .box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.kpi .box .l{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);font-weight:700}
.kpi .box .v{font-size:26px;margin-top:10px;letter-spacing:-.04em;color:var(--ink);font-weight:700;
  font-variant-numeric:tabular-nums}
.kpi .box .s{font-size:12px;color:var(--ink-3);margin-top:4px;font-weight:400}
.kpi .box.hot{border-color:var(--err-line);background:var(--err-soft)}
.kpi .box.hot .v,.kpi .box.hot .l{color:var(--err)}

/* ---------- admin: match candidates ---------- */
.match{border:1px solid var(--line-2);border-radius:var(--radius);padding:15px 17px;margin-bottom:10px;
  display:flex;gap:14px;align-items:center;cursor:pointer;background:var(--surface);transition:.16s}
.match:hover{border-color:var(--line-3);background:var(--surface-2)}
.match.on{border-color:var(--ink);border-width:1.5px;background:var(--surface);box-shadow:var(--shadow-sm)}
.match .grow{flex:1}
.match strong{color:var(--ink);font-weight:600}
.match .score{font-size:10.5px;font-weight:700;padding:3.5px 9px;border-radius:var(--radius-xs);
  letter-spacing:.04em;text-transform:uppercase;border:1px solid transparent}
.score-hi{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line)}
.score-mid{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.score-lo{background:var(--surface-2);color:var(--ink-3);border-color:var(--line-2)}
.dl{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;font-size:13px}
.dl dt{color:var(--ink-3);font-weight:500} .dl dd{margin:0;color:var(--ink);font-weight:500}
.docchip{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line-2);border-radius:var(--radius-sm);
  padding:10px 14px;font-size:12.5px;background:var(--surface);color:var(--ink-2);font-weight:500}

/* ---------- admin: P&L bars ---------- */
.bar{height:6px;border-radius:999px;background:var(--surface-3);overflow:hidden;min-width:90px}
.bar i{display:block;height:100%;border-radius:999px;background:var(--ink)}
.bar i.over{background:var(--err)}
.bar i.ok{background:var(--ink)}
.pos{color:var(--ok);font-weight:700} .neg{color:var(--err);font-weight:700}

/* ---------- onboarding: step badge + stepper ---------- */
.badge-step{display:inline-block;background:var(--ink);color:#fff;font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;padding:6px 13px;border-radius:var(--radius-xs);margin-bottom:22px}
.stepper{list-style:none;padding:0;margin:38px 0 0}
.stepper li{display:flex;gap:20px;padding-bottom:24px;align-items:flex-start}
.stepper .n{font-size:21px;font-weight:700;color:var(--line-3);min-width:36px;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1.2}
.stepper li.on .n{color:var(--ink)}
.stepper li.on strong{color:var(--ink)}
.stepper strong{display:block;font-size:14px;font-weight:700;color:var(--ink-3);margin-bottom:2px}
.stepper span{font-size:13px;color:var(--ink-3);font-weight:400}

/* ---------- onboarding: section nav ---------- */
.secnav{position:sticky;top:92px;list-style:none;padding:0;margin:0}
.secnav li{display:flex;gap:13px;align-items:flex-start;padding:11px 12px;border-radius:var(--radius-sm);
  cursor:pointer;transition:.14s;border:1px solid transparent}
.secnav li:hover{background:var(--surface-2)}
.secnav li.on{background:var(--surface-2);border-color:var(--line-2)}
.secnav .n{width:23px;height:23px;border-radius:50%;border:1.5px solid var(--line-3);display:grid;
  place-items:center;font-size:10.5px;font-weight:700;color:var(--ink-3);flex:none;margin-top:1px}
.secnav li.on .n{border-color:var(--ink);color:var(--ink)}
.secnav li.done .n{background:var(--ok);border-color:var(--ok);color:#fff}
.secnav strong{display:block;font-size:13px;font-weight:600;color:var(--ink)}
.secnav span{font-size:11.5px;color:var(--ink-3)}
.callout{background:var(--warn-soft);border:1px solid var(--warn-line);border-radius:var(--radius);
  padding:16px 18px;margin-top:26px;font-size:12.5px;color:#7c3a06;line-height:1.55}
.callout b{display:block;margin-bottom:6px;font-size:13px}

/* ---------- onboarding: section cards ---------- */
.sec-head{display:flex;gap:16px;align-items:flex-start;padding:24px 26px 4px}
.sec-ic{width:42px;height:42px;border-radius:var(--radius-sm);background:var(--surface-2);
  border:1px solid var(--line);display:grid;place-items:center;flex:none;color:var(--ink)}
.sec-num{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);font-weight:700}
.sec-head h2{font-family:var(--font-display);font-size:21px;font-weight:700;letter-spacing:-.03em;margin-top:5px}
.sec-head p{margin:5px 0 0;color:var(--ink-3);font-size:13px;font-weight:400}
.progress{height:4px;background:var(--surface-3);border-radius:999px;overflow:hidden;margin-top:10px}
.progress i{display:block;height:100%;background:var(--ink);border-radius:999px;transition:width .3s}
.filepick{display:block;border:1.5px dashed var(--line-3);border-radius:var(--radius-sm);padding:14px;
  background:var(--bg-2);cursor:pointer;font-size:13px;color:var(--ink-3);transition:.15s;text-align:center;font-weight:500}
.filepick:hover{border-color:var(--ink);color:var(--ink)}
.filepick.has{border-style:solid;border-color:var(--ok);background:var(--ok-soft);color:var(--ok);font-weight:600}
.submitbar{display:flex;align-items:center;gap:20px;padding:22px 26px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--radius-lg)}
.submitbar .grow{flex:1;font-size:12.5px;color:var(--ink-3)}

/* ---------- auth: split-screen sign in / reset ---------- */
.authwrap{display:grid;grid-template-columns:1.05fr 1fr;min-height:100vh}
.authbrand{background:var(--ink);color:#fff;padding:46px 58px;display:flex;flex-direction:column;
  position:relative;overflow:hidden}
/* faint dot grid — texture without introducing a second colour */
.authbrand::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.11) 1px,transparent 1px);background-size:24px 24px}
.authbrand > *{position:relative;z-index:1}
.authbrand .brandmark .dot{filter:invert(1)}   /* black mark -> white, on black */
.authbrand .brandmark .wm b{color:#fff}
.authbrand .brandmark small{color:rgba(255,255,255,.5)}
.authbrand .mid{margin:auto 0}
.authbrand h1{font-family:var(--font-display);font-size:46px;font-weight:700;letter-spacing:-.042em;line-height:1.04}
.authbrand h1 em{font-style:normal;color:rgba(255,255,255,.48)}
.authbrand .sub{color:rgba(255,255,255,.62);max-width:36ch;margin-top:20px;font-size:15px}
/* The two entity names as plain text, divided by a rule. These were chips, and
   two boxed labels sat here competing with the headline for attention when all
   they have to say is "both companies use this". The chip treatment itself is
   untouched and still used in the admin tables, where a boxed label IS the
   point — it has to be scannable down a column. */
.authbrand .ents{display:flex;align-items:center;gap:9px;margin-top:30px;
  font-size:14px;font-weight:700;letter-spacing:.01em;color:#fff}
.authbrand .ents .sep{color:rgba(255,255,255,.3);font-weight:400}
.authbrand .ents .media{color:var(--media)}
.authbrand .legal{color:rgba(255,255,255,.38);font-size:11.5px}
.authform{display:flex;align-items:center;justify-content:center;padding:46px 34px}
.authform .inner{width:100%;max-width:384px}
.pwwrap{position:relative}
.pwwrap input{padding-right:70px}
.pwwrap .toggle{position:absolute;right:5px;top:50%;transform:translateY(-50%);background:none;border:0;
  font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-3);cursor:pointer;padding:7px 11px;
  border-radius:var(--radius-xs)}
.pwwrap .toggle:hover{background:var(--surface-2);color:var(--ink)}
.divider{display:flex;align-items:center;gap:14px;margin:24px 0;color:var(--ink-4);font-size:11.5px;font-weight:600}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
@media(max-width:860px){
  .authwrap{grid-template-columns:1fr}
  .authbrand{padding:30px 24px}
  .authbrand h1{font-size:31px}
  .authbrand .mid{margin:26px 0}
  .authbrand .legal{display:none}
  .authform{padding:34px 24px 60px}
}

.screen{display:none} .screen.on{display:block}
.foot{color:var(--ink-4);font-size:11.5px;text-align:center;margin-top:52px;letter-spacing:.06em;
  text-transform:uppercase;font-weight:600}
@media(max-width:1150px){.grid4{grid-template-columns:repeat(2,1fr)}.kpi.k4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){
  .hero,.split,.split-r,.grid2,.grid3,.grid4,.kpi,.kpi.k4{grid-template-columns:1fr}
  .display{font-size:32px}
  .page{padding:34px 20px 80px}
  .admin .topbar{position:sticky;inset:auto;width:auto;height:auto;flex-direction:row;align-items:center;
    padding:14px 20px;border-right:0;border-bottom:1px solid var(--line);overflow:visible}
  .admin .nav{flex-direction:row;margin:0}
  .admin .topbar .right{margin:0 0 0 auto;flex-direction:row;padding-top:0;border-top:0}
  .admin .page{margin-left:0;padding:30px 20px 80px}
}