/* ============================================================================================================
   VAS Portal — light glass.
   Frosted white panes over a warm pastel field — peach, lavender, sky — with the content on near-solid white
   cards. Palette derived from the client's reference (no verified dataset match; general guidance applied):
   every text pair below is checked at 4.5:1 or better on the surface it sits on.
   ============================================================================================================ */
:root {
  --ink:#1F2233; --ink-2:#3A3F52; --muted:#636A7E; --faint:#9CA2B3; --white:#fff;
  --brand:#2A62F2; --violet:#5B4BD6; --violet-soft:#ECE8FF;
  --glass:rgba(255,255,255,.56); --glass-2:rgba(255,255,255,.40); --glass-line:rgba(255,255,255,.75);
  --card:rgba(255,255,255,.88); --card-line:rgba(255,255,255,.95); --hair:#ECEDF3;
  --accent:#1F2233;
  --t-blue:#EAF0FF;  --i-blue:#2F6BFF;   --t-green:#E3F5EA; --i-green:#1A7C4E;
  --t-orange:#FFEEDD; --i-orange:#BE5E0E; --t-purple:#F0EBFF; --i-purple:#6C4FE0;
  --ok-bg:#DDF5E6; --ok-ink:#14693D; --wait-bg:#FFEFC7; --wait-ink:#7A4E00; --bad-bg:#FDE3E3; --bad-ink:#A31F1F;
  --grey-bg:#EEF0F4; --grey-ink:#4B5060; --env-bg:var(--violet-soft); --env-ink:var(--violet);
  --r-pane:22px; --r-card:18px; --r-ctl:12px; --r-pill:999px;
  --shadow-card:0 8px 24px -12px rgba(60,50,90,.18), 0 1px 2px rgba(60,50,90,.05);
  --blur:18px; --measure:1320px;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; --serif:var(--sans);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* Old names some pages still reference. */
  --gold:#BE5E0E; --rose:#A31F1F; --rose-ink:#A31F1F; --line:#ECEDF3; --peach:#FFEEDD; --peach-ink:#7A4E00;
  /* Three pages colour a credit amount and a delivery token with --teal, which was never defined: the
     declaration was invalid and the text simply inherited. Pointed at the themed green so it resolves
     in both themes rather than in neither. */
  --teal:var(--i-green);
  --mint:#DDF5E6; --mint-ink:#14693D; --rosebg:#FDE3E3; --lilac:#ECE8FF; --lilac-ink:#5B4BD6; --grey:#EEF0F4; --grey-ink:#4B5060;

  /* ---- Surfaces, lines and shadows, named so the dark theme has something to redefine ------------------
     Everything below was a literal somewhere in this file. A theme is only switchable to the extent that its
     colours are spoken for by a name, so the rule is now that a colour in a rule body is either brand (the
     same in both themes) or a token. */
  --page:#F3EEF1;
  --field-a:#F8D8C6; --field-b:#D9D2F6; --field-c:#CFE1F8; --field-d:#F7E3D2;
  --field-e:#F7EFEA; --field-f:#EFEAF5; --field-g:#E9EEF8;
  --surface:#fff;            /* solid controls, modals, popovers */
  --surface-2:#F6F6FA;       /* insets, opened rows, disabled fields */
  --surface-3:#F8F8FC;       /* row and option hover */
  --surface-4:#F5F5F9;       /* table head */
  --card-top:#FFFFFF; --card-bot:#FCFBFE;
  --sc-top:#FFFFFF;  --sc-bot:#FBFBFE;
  --field-bg:#FBFBFD;        /* file input, readonly note */
  --line-strong:#D9DBE6;     /* the border a control takes on hover */
  --line-2:#E4E6ED;
  --glass-soft:rgba(255,255,255,.7);
  --glass-dim:rgba(255,255,255,.55);
  --glass-bar:rgba(255,255,255,.75);
  --glass-solid:rgba(255,255,255,.92);
  --thumb:#fff; --thumb-shadow:rgba(31,34,51,.18);
  --sheen:rgba(255,255,255,.9);    /* the highlight where a light source would be */
  --sheen-2:rgba(255,255,255,.35);
  --scrim:rgba(40,30,60,.42);
  --scrollbar:rgba(0,0,0,.15);
  --popover-shadow:rgba(20,24,40,.35);
  --accent-ink:#fff; --accent-hover:#2C3047; --brand-hover:#245BE0;
  --on-accent-grad:#fff;     /* text on the violet .stat.accent gradient, which is dark in both themes */
  --code-bg:#2B2545; --code-ink:#ECE9F8;
  --focus-ring:rgba(91,75,214,.14);
  --bad-field:#FFF8F8; --bad-ring:rgba(163,31,31,.12);
  --glow:.45;                /* how far a stat card's coloured glow carries */
  --shadow-pane:0 12px 40px -18px rgba(60,50,90,.25);
  --shadow-soft:0 1px 2px rgba(31,34,51,.04);
  --shadow-lift:0 14px 30px -20px rgba(80,60,140,.22);
  --shadow-btn:0 8px 18px -10px rgba(31,34,51,.5);
  --ring-inset:rgba(31,34,51,.06);
  --select-caret:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23636A7E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme:light;
}
* { box-sizing:border-box; } html, body { margin:0; padding:0; min-height:100%; }
body { font-family:var(--sans); font-size:14.5px; line-height:1.5; color:var(--ink); background:var(--page); -webkit-font-smoothing:antialiased; }
/* The field behind the glass: three soft light sources on a warm neutral. */
body::before { content:""; position:fixed; inset:-8%; z-index:-1; filter:blur(40px);
  background:
    radial-gradient(45% 40% at 12% 15%, var(--field-a) 0, transparent 60%),
    radial-gradient(40% 40% at 85% 12%, var(--field-b) 0, transparent 60%),
    radial-gradient(45% 45% at 80% 85%, var(--field-c) 0, transparent 60%),
    radial-gradient(35% 35% at 20% 90%, var(--field-d) 0, transparent 60%),
    linear-gradient(135deg, var(--field-e) 0%, var(--field-f) 50%, var(--field-g) 100%); }
a { color:var(--violet); text-decoration:none; } a:hover { text-decoration:underline; }
h1,h2,h3 { margin:0; color:var(--ink); } h1 { font-size:30px; font-weight:700; letter-spacing:-.02em; line-height:1.15; }
h2 { font-size:17px; font-weight:700; letter-spacing:-.01em; } h3 { font-size:15px; font-weight:700; }
p { margin:0 0 12px; } p:last-child { margin-bottom:0; } code,.mono { font-family:var(--mono); font-size:.88em; }
.num,td.num,th.num,.stat .value,.fig .v,.amount,.sc .value { font-variant-numeric:tabular-nums; }

/* ---- Shell: a light glass sidebar and an open workspace --------------------------------------------------- */
.shell { display:flex; min-height:100vh; gap:16px; padding:16px; }
.sidebar { width:238px; flex-shrink:0; position:sticky; top:16px; height:calc(100vh - 32px); display:flex; flex-direction:column; color:var(--ink);
  background:var(--glass); backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur)); border:1px solid var(--glass-line); border-radius:var(--r-pane); box-shadow:var(--shadow-pane); }
.brand { padding:22px 18px 10px; display:flex; flex-direction:column; }
.brand-mark { font-size:20px; font-weight:800; letter-spacing:-.02em; color:var(--ink); display:flex; align-items:center; gap:10px; }
.brand-mark::before { content:"V"; width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center; font-size:19px; font-weight:800; color:#fff; letter-spacing:0;
  background:linear-gradient(135deg,#4F86FF,#2F6BFF); box-shadow:0 6px 14px -6px rgba(47,107,255,.6); }
.brand-mark span { display:none; }
.brand-sub { font-size:12px; color:var(--muted); margin:2px 0 0 44px; }
.nav { padding:8px 12px; flex:1; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--scrollbar) transparent; }
.nav-group { font-size:11.5px; font-weight:600; color:var(--muted); padding:16px 12px 6px; }
.nav a { display:flex; align-items:center; gap:14px; min-height:44px; padding:0 14px; margin-bottom:2px; border-radius:14px; color:var(--ink-2); font-size:14.5px; font-weight:500; text-decoration:none; transition:background .15s ease,color .15s ease; }
.nav a:hover { background:var(--glass-soft); color:var(--ink); text-decoration:none; }
.nav a.active { background:var(--violet-soft); color:var(--violet); font-weight:600; }
.nav a:focus-visible { outline:2px solid var(--violet); outline-offset:-3px; }
.nav .ico { width:20px; height:20px; flex:none; color:var(--muted); } .nav a.active .ico { color:var(--violet); } .nav .dot { display:none; }
.sidebar-foot { padding:12px; }
/* The card at the foot of the sidebar: the one place the sidebar is allowed to be dark. */
.sidebar-foot .who { font-size:12px; color:var(--muted); overflow-wrap:anywhere; margin:12px 4px 0; display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.sidebar-foot .who .btn { height:30px; padding:0 10px; font-size:12px; }
.sidebar .btn.ghost { background:var(--glass-soft); color:var(--ink-2); border-color:transparent; box-shadow:none; }

.main { flex:1; min-width:0; display:flex; flex-direction:column; background:var(--glass-2); backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur)); border:1px solid var(--glass-line); border-radius:var(--r-pane); box-shadow:var(--shadow-pane); }
.topbar { height:74px; flex-shrink:0; }
.topbar-left { display:flex; align-items:center; gap:12px; min-width:0; }
.topbar-left .small { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; color:var(--ink-2); }
.topbar-left .code { font-family:var(--mono); font-size:12px; color:var(--muted); background:var(--glass-soft); border-radius:8px; padding:3px 8px; margin-left:10px; }
.nav-toggle { display:none; }
.topbar-inner,.content { max-width:var(--measure); width:100%; margin:0 auto; padding-left:32px; padding-right:32px; }
.topbar-inner { height:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.content { padding-top:8px; padding-bottom:44px; }
/* Who is signed in: initials, name, and what they are here as. */
.me { display:inline-flex; align-items:center; gap:10px; padding:5px 12px 5px 5px; border-radius:var(--r-pill); background:var(--glass-soft); border:1px solid var(--glass-line); }
.me .avatar { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:700; color:#fff; background:linear-gradient(135deg,#6C4FE0,#2F6BFF); }
.me .name { font-size:13px; font-weight:600; color:var(--ink); line-height:1.15; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.me .role { font-size:11.5px; color:var(--muted); }

/* ---- Page furniture ------------------------------------------------------------------------------------- */
.page-head { margin-bottom:22px; display:flex; flex-direction:column; align-items:flex-start; gap:0; }
.page-head > :first-child { min-width:0; } .page-head .eyebrow { font-size:13px; font-weight:600; color:var(--violet); margin-bottom:6px; }
.page-head .lead { color:var(--muted); max-width:64ch; font-size:15px; margin:6px 0 0; }

/* ---- Cards ------------------------------------------------------------------------------------------------ */
.card,.plain,.stat,.copyable,.figures { background:linear-gradient(170deg,var(--card-top) 0%,var(--card-bot) 100%); border:1px solid var(--card-line); border-radius:var(--r-card); box-shadow:var(--shadow-soft), var(--shadow-lift), inset 0 1px 0 var(--sheen); }
.card,.plain { padding:20px 24px; margin-bottom:18px; } .card:last-child,.plain:last-child { margin-bottom:0; } .card.flush { padding:0; overflow:hidden; overflow-x:auto; }
.card-head,.sec { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.card-head .hint,.sec .hint { color:var(--muted); font-size:13.5px; max-width:72ch; margin-top:3px; } .sec .rule { display:none; }
.sec .more { font-size:13.5px; font-weight:600; color:var(--violet); white-space:nowrap; }
.panel { background:var(--card); color:var(--ink); border:1px solid var(--card-line); border-radius:var(--r-card); padding:22px 24px; margin-bottom:18px; box-shadow:var(--shadow-card); }
.panel h2,.panel h3 { color:var(--ink); } .panel .hint,.panel .muted,.panel .small { color:var(--muted); }
.group-head { display:flex; align-items:center; gap:12px; margin:28px 0 12px; } .group-head h3 { font-size:17px; margin:0; white-space:nowrap; } .group-head .rule { display:none; }
.inset { margin:14px 0 6px; padding:16px; background:var(--surface-2); border:1px solid var(--hair); border-radius:14px; } .card.flush .inset { margin:14px 24px 8px; }
.copy-inline { appearance:none; border:1px solid transparent; background:transparent; cursor:pointer; font:inherit; color:inherit; padding:3px 8px; margin:-3px -8px; border-radius:8px; max-width:100%; text-align:left; }
.copy-inline code { white-space:nowrap; } .copy-inline:hover { background:var(--grey-bg); } .copy-inline:focus-visible { outline:2px solid var(--violet); outline-offset:1px; }
.copy-inline.done { background:var(--ok-bg); } .copy-inline.done code { color:var(--ok-ink); }
.clip { max-width:34ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } table td.num,table th.num { white-space:nowrap; }

/* ---- Icon stat cards (the dashboard's top row) ---------------------------------------------------------------
   "Glowing, but professional" (soft-ui-evolution): the glow is the card's own hue at low alpha, cast downward as
   a shadow; the border is a one-pixel gradient drawn with a mask, not a stroke; and a faint highlight sits where
   a light source would. Nothing is animated except the lift on hover, and that only via transform. */
.stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:18px; }
.sc { --hue:47,107,255; --tint:var(--t-blue); --glow:.45; position:relative; isolation:isolate; padding:20px 22px; display:flex; gap:14px; align-items:flex-start;
  background:linear-gradient(160deg,var(--sc-top) 0%,var(--sc-bot) 100%); border:1px solid transparent; border-radius:var(--r-card);
  box-shadow:var(--shadow-soft), 0 18px 34px -22px rgba(var(--hue),var(--glow)), inset 0 1px 0 var(--sheen);
  transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s cubic-bezier(.2,.7,.2,1); }
.sc::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(135deg, rgba(var(--hue),.55) 0%, var(--sheen-2) 45%, rgba(var(--hue),.22) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.sc::after { content:""; position:absolute; left:-30px; top:-40px; width:200px; height:160px; border-radius:50%; pointer-events:none; z-index:-1;
  background:radial-gradient(closest-side, rgba(var(--hue),.16), transparent); }
.sc:hover { transform:translateY(-2px); box-shadow:var(--shadow-soft), 0 26px 44px -22px rgba(var(--hue),calc(var(--glow) + .1)), inset 0 1px 0 var(--sheen); }
.sc .tile { width:48px; height:48px; border-radius:14px; flex:none; display:grid; place-items:center; color:rgb(var(--hue));
  background:linear-gradient(145deg, var(--surface) 0%, var(--tint) 70%); box-shadow:inset 0 0 0 1px rgba(var(--hue),.16), 0 6px 14px -8px rgba(var(--hue),.5); }
.sc .tile svg { width:22px; height:22px; }
.sc.blue   { --hue:47,107,255;  --tint:var(--t-blue); }
.sc.green  { --hue:30,138,87;   --tint:var(--t-green); }
.sc.orange { --hue:190,94,14;   --tint:var(--t-orange); }
.sc.purple { --hue:108,79,224;  --tint:var(--t-purple); }
.sc .label { font-size:13.5px; color:var(--muted); }
/* The text column must be allowed to shrink beside the tile, and a sum must never break mid-number: the size
   gives way before the digits do. */
.sc > div:last-child { min-width:0; flex:1; }
.sc .value { font-size:clamp(19px,1.55vw,26px); font-weight:700; letter-spacing:-.02em; line-height:1.15; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sc .value .pill { vertical-align:middle; }
.sc .sub { font-size:12.5px; color:var(--muted); margin-top:5px; line-height:1.4; }
@media (max-width:1280px) { .stats { grid-template-columns:repeat(2,minmax(0,1fr)); } .sc .value { font-size:24px; } } @media (max-width:620px) { .stats { grid-template-columns:1fr; } }

/* ---- Live / Test: a segmented switch -----------------------------------------------------------------------
   A glass track and a raised white thumb that slides between two equal segments. The label carries the state
   (ink when chosen, muted when not) and a small dot carries the colour, so which half you are on is never told
   by colour alone. Test's thumb is warm, because the point of the switch is that you can tell at a glance. */
.env-switch { position:relative; display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr; height:40px; padding:3px;
  border-radius:var(--r-pill); background:var(--glass-dim); border:1px solid var(--glass-line); box-shadow:inset 0 1px 2px var(--ring-inset); isolation:isolate; }
.env-switch::before { content:""; position:absolute; top:3px; bottom:3px; left:3px; width:calc(50% - 3px); border-radius:var(--r-pill); z-index:-1;
  background:var(--thumb); box-shadow:0 2px 6px -1px var(--thumb-shadow), 0 1px 0 var(--sheen); transition:transform .22s cubic-bezier(.2,.7,.2,1), background .22s ease; }
.env-switch[data-on="test"]::before { transform:translateX(100%); background:var(--wait-bg); }
.env-switch button { appearance:none; border:0; background:transparent; font:inherit; font-size:13px; font-weight:600; color:var(--muted); min-width:74px; padding:0 14px; border-radius:var(--r-pill); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:7px; transition:color .15s ease; }
.env-switch button::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.35; transition:opacity .15s ease, background .15s ease; }
.env-switch button:hover { color:var(--ink); }
.env-switch button.on { color:var(--ink); } .env-switch button.on::before { opacity:1; background:var(--violet); }
.env-switch button.on.test { color:var(--wait-ink); } .env-switch button.on.test::before { background:var(--i-orange); }
.env-switch button:focus-visible { outline:2px solid var(--violet); outline-offset:2px; }
@media (prefers-reduced-motion:reduce) { .env-switch::before { transition:none; } }
/* The rest of the bar keeps the same 40px rhythm. */
.topbar .pill { height:40px; padding:0 14px; font-size:13px; font-weight:500; background:var(--glass-dim); border:1px solid var(--glass-line); color:var(--ink-2); }
.topbar .pill.ok { color:var(--ok-ink); } .topbar .pill.wait { color:var(--wait-ink); } .topbar .pill.bad { color:var(--bad-ink); }
.me { height:40px; padding:0 14px 0 4px; background:var(--glass-dim); }
.me .avatar { width:32px; height:32px; font-size:12.5px; }

/* ---- Hero (kept for screens that still use it) ------------------------------------------------------------- */
.hero { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:18px; align-items:stretch; margin-bottom:18px; }
.hero .panel { display:flex; flex-direction:column; margin:0; } .hero .cap { font-size:15px; font-weight:500; color:var(--ink-2); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hero .amount { font-size:42px; font-weight:700; letter-spacing:-.03em; line-height:1.1; margin:16px 0 6px; } .hero .amount .minor { font-size:.55em; }
.hero .delta { font-size:14px; color:var(--muted); } .hero .delta b { color:var(--ink); font-weight:600; } .chartwrap { margin-top:auto; padding-top:20px; }
.chart-axis { display:flex; justify-content:space-between; font-size:12px; color:var(--faint); margin-top:8px; }
.figures { display:flex; flex-direction:column; justify-content:center; padding:6px 0; }
.fig { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 22px; } .fig + .fig { border-top:1px solid var(--hair); }
.fig .k { color:var(--muted); font-size:14px; } .fig .v { font-size:19px; font-weight:700; } .fig .v.small { font-size:14px; font-weight:600; }

/* ---- Grids / responsive ---------------------------------------------------------------------------------- */
.grid { display:grid; gap:18px; } .grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); } .grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); } .grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
/* Cards inside a grid drop their own margins; the grid carries the spacing to whatever follows it instead,
   so a row of cards never sits flush against the next card. */
.grid { margin-bottom:18px; } .grid:last-child { margin-bottom:0; }
.grid.top { align-items:start; } .grid .card,.grid .plain { margin-bottom:0; }
@media (max-width:1100px) { .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:1040px) { .hero { grid-template-columns:1fr; } }
@media (max-width:960px) { .grid-2,.grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); } .grid-2 { grid-template-columns:1fr; } } @media (max-width:620px) { .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; } }
@media (max-width:1000px) { .shell { padding:12px; gap:12px; } .sidebar { width:220px; top:12px; height:calc(100vh - 24px); } .topbar-inner,.content { padding-left:20px; padding-right:20px; } h1 { font-size:26px; } .me .name,.me .role { display:none; } .me { padding:4px; } }
@media (max-width:860px) {
  .shell { padding:0; gap:0; } .main { border-radius:0; border:0; background:transparent; backdrop-filter:none; box-shadow:none; }
  .sidebar { position:fixed; top:12px; left:12px; bottom:12px; height:auto; width:min(84vw,300px); z-index:60; transform:translateX(calc(-100% - 24px)); transition:transform .25s ease; background:var(--glass-solid); }
  .sidebar.open { transform:none; } .scrim { position:fixed; inset:0; z-index:55; background:var(--scrim); backdrop-filter:blur(3px); }
  .topbar { position:sticky; top:0; z-index:40; background:var(--glass-bar); backdrop-filter:blur(var(--blur)); height:64px; }
  .nav-toggle { display:inline-flex; align-items:center; justify-content:center; flex:none; width:44px; height:44px; margin-left:-8px; padding:0; cursor:pointer; background:var(--glass-soft); border:1px solid var(--glass-line); border-radius:50%; color:var(--ink); }
  .nav-toggle:focus-visible { outline:2px solid var(--violet); outline-offset:2px; }
  .bars,.bars::before,.bars::after { display:block; width:18px; height:2px; border-radius:2px; background:currentColor; transition:transform .2s,opacity .2s; }
  .bars { position:relative; } .bars::before,.bars::after { content:""; position:absolute; left:0; } .bars::before { top:-6px; } .bars::after { top:6px; }
  .bars.x { background:transparent; } .bars.x::before { transform:translateY(6px) rotate(45deg); } .bars.x::after { transform:translateY(-6px) rotate(-45deg); }
}
@media (prefers-reduced-motion:reduce) { .sidebar,.bars,.bars::before,.bars::after,.caret,.btn,.nav a,.env-switch button,.skip-link,.sc { transition:none; } .sc:hover { transform:none; } }

/* ---- Stats / identifiers / next steps -------------------------------------------------------------------- */
.stat { padding:18px 20px; display:flex; flex-direction:column; } .stat .label { font-size:13.5px; color:var(--muted); }
/* A sum never breaks mid-number: the size gives way first, then an ellipsis — never a line break. */
.stat { min-width:0; }
.stat .value { font-size:clamp(18px,1.7vw,28px); font-weight:700; letter-spacing:-.02em; line-height:1.15; margin-top:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .stat .sub { font-size:12.5px; color:var(--muted); margin-top:4px; }
.stat.accent { background:linear-gradient(150deg,#2B2545,#3E2F6B 60%,#6C4FE0 130%); border-color:transparent; } .stat.accent .label,.stat.accent .sub { color:rgba(255,255,255,.75); } .stat.accent .value { color:var(--on-accent-grad); }
.stat.clickable { width:100%; text-align:left; font:inherit; cursor:pointer; transition:transform .15s ease,box-shadow .15s ease; } .stat.clickable:hover { transform:translateY(-2px); }
.stat.clickable.selected { box-shadow:0 0 0 2px var(--violet),var(--shadow-card); } .stat.clickable:focus-visible { outline:2px solid var(--violet); outline-offset:3px; }
.copyable { padding:16px 20px; } .copyable .label { font-size:13.5px; color:var(--muted); } .copyable .line { display:flex; align-items:center; gap:12px; margin-top:8px; }
.copyable .val { font-family:var(--mono); font-size:15px; line-height:1.45; overflow-wrap:anywhere; flex:1; min-width:0; }
.copyable .copy { flex:none; font:inherit; font-size:13px; font-weight:600; color:var(--ink); background:var(--grey-bg); border:0; border-radius:var(--r-pill); padding:8px 14px; cursor:pointer; min-height:36px; }
.copyable .copy:hover { background:var(--line-2); } .copyable .copy.done { background:var(--ok-bg); color:var(--ok-ink); } .copyable .sub { font-size:13px; color:var(--muted); margin-top:8px; }
.next-list { margin-top:4px; } .next-list a { display:flex; align-items:center; gap:14px; padding:14px 4px; border-top:1px solid var(--hair); color:var(--ink); text-decoration:none; } .next-list a:first-child { border-top:0; }
.next-list a:hover { text-decoration:none; } .next-list a:hover .go { transform:translateX(3px); }
.next-list .n { flex:none; width:36px; height:36px; border-radius:12px; background:var(--t-purple); color:var(--i-purple); font-size:13px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.next-list .what { font-weight:600; font-size:15px; } .next-list .why { color:var(--muted); font-size:13.5px; flex:1; } .next-list .go { color:var(--violet); font-size:18px; flex:none; transition:transform .15s ease; }

/* ---- Tables --------------------------------------------------------------------------------------------- */
table { width:100%; border-collapse:collapse; font-size:14px; min-width:560px; }
th { text-align:left; font-size:13px; font-weight:500; color:var(--muted); padding:10px 14px; background:var(--surface-4); border-bottom:1px solid var(--hair); white-space:nowrap; }
th:first-child { border-radius:10px 0 0 10px; } th:last-child { border-radius:0 10px 10px 0; }
td { padding:14px; border-bottom:1px solid var(--hair); vertical-align:middle; } tbody tr:last-child td { border-bottom:0; } tbody tr:hover { background:var(--surface-3); }
td.num,th.num { text-align:right; } .card.flush table { min-width:100%; } .card.flush th:first-child,.card.flush th:last-child { border-radius:0; }
.empty { padding:44px 16px; text-align:center; color:var(--muted); } .empty strong { display:block; font-size:15px; color:var(--ink); margin-bottom:4px; } .empty > div { max-width:62ch; margin-left:auto; margin-right:auto; }
tr.asking > td { background:var(--surface-2); } tr.opened > td { border-bottom-color:transparent; } tr.detail > td { background:var(--surface-2); padding:16px 18px 20px; }
/* The statement is a wide table, but a detail panel is read like a receipt: the app's .kv puts the label hard
   left and the value hard right, which across a 1280px row leaves the eye to cross the whole screen, and wraps
   an explanatory sentence to a ragged left edge the width of the page. Capped to a receipt's measure. */
tr.detail > td .kv { max-width:720px; }
tr.detail > td .kv dd .xs { margin-top:2px; }
/* A statement table scrolls sideways on a phone because seven columns cannot do anything else. A detail panel
   is prose, so it stacks and narrows to the screen instead, and opening a row reads without dragging the table. */
@media (max-width:620px) {
  tr.detail > td .kv { max-width:290px; grid-template-columns:minmax(0,1fr); }
  tr.detail > td .kv dt { padding:11px 0 0; border-bottom:0; }
  tr.detail > td .kv dd { text-align:left; padding-top:2px; }
}
.rowtoggle { display:inline-flex; align-items:center; gap:8px; background:none; border:0; padding:0; cursor:pointer; font:inherit; color:inherit; text-align:left; }
.rowtoggle:focus-visible { outline:2px solid var(--violet); outline-offset:3px; border-radius:4px; }
.caret { display:inline-block; width:10px; color:var(--muted); transition:transform .15s ease; transform-origin:50% 50%; } .caret.open { transform:rotate(90deg); }
.card-head .rowtoggle { align-items:flex-start; gap:10px; flex:1 1 auto; min-width:0; } .card-head .rowtoggle .caret { margin-top:6px; }

/* A link that leaves the portal says so, quietly, rather than surprising somebody mid-integration. */
.nav a .ext { margin-left:auto; font-size:11px; opacity:.55; }

/* ---- Walking a supplier's tree ---------------------------------------------------------------------------- */
/* Crumbs say where you are in somebody else's hierarchy, which is the one thing a flat page of codes cannot. */
.crumbs { display:flex; align-items:center; flex-wrap:wrap; gap:4px; margin-top:14px; font-size:13px; }
.crumb { background:none; border:0; padding:3px 6px; border-radius:8px; font:inherit; font-size:13px; color:var(--violet); cursor:pointer; }
.crumb:hover { background:var(--violet-soft); } .crumb.here { color:var(--ink); font-weight:600; cursor:default; }
.crumb.here:hover { background:none; } .crumb:focus-visible { outline:2px solid var(--violet); outline-offset:1px; }
.crumb-sep { color:var(--muted); font-size:13px; }

/* How much is in scope, and a filter, in the same control: the count is the reason you would press it. */
.levels { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.level { background:var(--surface-3); border:1px solid var(--hair); border-radius:var(--r-pill); padding:5px 13px; font:inherit; font-size:12.5px; color:var(--muted); cursor:pointer; transition:background .15s ease,border-color .15s ease; }
.level b { color:var(--ink); font-weight:700; margin-right:3px; }
.level:hover:not(:disabled) { border-color:var(--line-strong); background:var(--surface); }
.level.on { background:var(--violet-soft); border-color:transparent; color:var(--violet); } .level.on b { color:var(--violet); }
.level:disabled { opacity:.45; cursor:not-allowed; } .level:focus-visible { outline:2px solid var(--violet); outline-offset:2px; }

/* A button that has to read as a link, for a cell where an anchor would navigate. */
.linky { background:none; border:0; padding:0; font:inherit; color:var(--violet); cursor:pointer; text-align:left; }
.linky:hover { text-decoration:underline; } .linky:focus-visible { outline:2px solid var(--violet); outline-offset:2px; border-radius:4px; }

/* ---- Pills ---------------------------------------------------------------------------------------------- */
.pill { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; font-size:12.5px; font-weight:600; line-height:1; border-radius:var(--r-pill); white-space:nowrap; }
.pill.ok { background:var(--ok-bg); color:var(--ok-ink); } .pill.wait { background:var(--wait-bg); color:var(--wait-ink); } .pill.bad { background:var(--bad-bg); color:var(--bad-ink); }
.pill.neutral { background:var(--grey-bg); color:var(--grey-ink); } .pill.env { background:var(--env-bg); color:var(--env-ink); }

/* ---- Forms ---------------------------------------------------------------------------------------------- */
.field { margin-bottom:18px; } .field:last-child { margin-bottom:0; }
.field label { display:block; font-size:14px; font-weight:600; color:var(--ink); margin-bottom:8px; } .field label .muted { font-weight:400; }
.field .help { font-size:13px; color:var(--muted); margin-top:7px; line-height:1.45; } .field .err { font-size:13px; color:var(--bad-ink); margin-top:7px; line-height:1.45; font-weight:500; }
.field.bad label { color:var(--bad-ink); } .field.bad .help { display:none; }
input:not([type="checkbox"],[type="radio"],[type="file"],[type="submit"],[type="button"],[type="reset"],[type="range"]),select,textarea {
  display:block; width:100%; font-family:inherit; font-size:14.5px; line-height:1.4; color:var(--ink); background:var(--surface); border:1.5px solid var(--hair); border-radius:var(--r-ctl); outline:none; transition:border-color .15s ease,box-shadow .15s ease; }
input:not([type="checkbox"],[type="radio"],[type="file"],[type="submit"],[type="button"],[type="reset"],[type="range"]),select { height:46px; padding:0 14px; } textarea { padding:12px 14px; resize:vertical; min-height:100px; }
::placeholder { color:var(--faint); opacity:1; }
input:hover:not(:disabled):not(:focus),select:hover:not(:disabled):not(:focus),textarea:hover:not(:disabled):not(:focus) { border-color:var(--line-strong); }
input:focus,select:focus,textarea:focus { border-color:var(--violet); box-shadow:0 0 0 4px var(--focus-ring); }
input:disabled,select:disabled,textarea:disabled,input[readonly],textarea[readonly] { background:var(--surface-2); color:var(--muted); cursor:not-allowed; }
select { appearance:none; padding-right:40px; cursor:pointer; background-image:var(--select-caret); background-repeat:no-repeat; background-position:right 14px center; }
input[type="file"] { width:100%; font-size:14px; color:var(--ink-2); border:1.5px dashed var(--line-strong); border-radius:var(--r-ctl); padding:12px 14px; background:var(--field-bg); cursor:pointer; }
input[type="file"]:hover { border-color:var(--violet); background:var(--surface); } input[type="file"]:focus-visible { outline:2px solid var(--violet); outline-offset:2px; }
input[type="file"]::file-selector-button { font:inherit; font-size:13px; font-weight:600; color:var(--accent-ink); background:var(--accent); border:0; border-radius:var(--r-pill); padding:7px 14px; margin-right:14px; cursor:pointer; }
input[type="checkbox"],input[type="radio"] { width:18px; height:18px; accent-color:var(--violet); cursor:pointer; }
.field.bad input:not([type="checkbox"],[type="radio"]),.field.bad select,.field.bad textarea { border-color:var(--bad-ink); background:var(--bad-field); }
.field.bad input:focus,.field.bad select:focus,.field.bad textarea:focus { box-shadow:0 0 0 4px var(--bad-ring); }
.check { display:flex; align-items:center; gap:10px; font-size:14px; margin-bottom:12px; cursor:pointer; min-height:28px; } .check input { flex:none; margin:0; }
.fieldset { border-top:1px solid var(--hair); margin:22px 0 16px; padding-top:18px; } .fieldset > .legend { font-size:14px; font-weight:700; margin-bottom:14px; }
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
/* A row aligns on the bottom so a button sits level with the inputs beside it. That is wrong when one
   field carries help text and its neighbour does not: the taller field pushes its own label up and the
   labels stop lining up. Where a row is all fields, align the tops instead. */
/* A button standing in a row of form controls takes their height, so its top edge lines up as well as its
   bottom. Left at the button default it sat two pixels short and read as floating. */
.btn-row.with-fields .btn { height:46px; }
.row.tops { align-items:flex-start; } .row > * { flex:1; min-width:160px; } .row > .tight { flex:0 0 auto; min-width:0; }
@media (max-width:900px) { .row > * { flex:1 1 100%; } .row > .tight { flex:0 0 auto; } .kv { grid-template-columns:120px 1fr; } }
.readonly-note { height:46px; display:flex; align-items:center; padding:0 14px; border:1.5px dashed var(--line-strong); border-radius:var(--r-ctl); background:var(--field-bg); color:var(--muted); font-size:14px; }
.otp { letter-spacing:.45em; font-family:var(--mono); font-size:20px; text-align:center; text-indent:.45em; height:56px !important; }

/* ---- Buttons ------------------------------------------------------------------------------------------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 20px; border-radius:var(--r-pill); border:1px solid transparent; font:inherit; font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap; background:var(--accent); color:var(--accent-ink); box-shadow:var(--shadow-btn); transition:transform .15s ease,background .15s ease,box-shadow .15s ease; }
.btn:hover:not(:disabled) { background:var(--accent-hover); transform:translateY(-1px); text-decoration:none; } .btn:active:not(:disabled) { transform:none; }
.btn:focus-visible { outline:2px solid var(--violet); outline-offset:3px; } .btn:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }
.btn.gold { background:var(--brand); } .btn.gold:hover:not(:disabled) { background:var(--brand-hover); }
.btn.ghost { background:var(--glass-bar); color:var(--ink); border-color:var(--glass-line); box-shadow:none; } .btn.ghost:hover:not(:disabled) { background:var(--surface); }
.btn.danger { background:var(--bad-ink); } .btn.ok { background:var(--i-green); } .btn.small { height:40px; padding:0 14px; font-size:13.5px; }
.btn-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:20px; }
.field + .btn,.row + .btn,.check + .btn,.note + .btn,.grid + .btn,.kv + .btn,.card > .btn:not(:first-child) { margin-top:20px; }
.spin { display:inline-block; width:14px; height:14px; border:2px solid rgba(128,128,128,.35); border-top-color:currentColor; border-radius:50%; animation:spin .7s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }

/* ---- Messages / steps ----------------------------------------------------------------------------------- */
.note { padding:14px 18px; margin-bottom:18px; border-radius:14px; font-size:14px; background:var(--wait-bg); color:var(--wait-ink); }
.note .title { font-weight:700; margin-bottom:3px; font-size:15px; } .note.ok { background:var(--ok-bg); color:var(--ok-ink); } .note.bad { background:var(--bad-bg); color:var(--bad-ink); } .note.info { background:var(--violet-soft); color:var(--violet); }
.note a { color:inherit; font-weight:600; } .note .btn { background:var(--accent); color:var(--accent-ink); }
pre { font-family:var(--mono); font-size:12.5px; line-height:1.55; background:var(--code-bg); color:var(--code-ink); padding:16px 18px; border-radius:14px; overflow-x:auto; margin:0 0 14px; } pre .k { color:#F5C26B; } pre .s { color:#9FE0B8; } pre .c { color:#A79FC7; }

/* ---- Auth ----------------------------------------------------------------------------------------------- */
.auth { min-height:100vh; display:grid; grid-template-columns:1.05fr 1fr; gap:16px; padding:16px; }
.auth-aside { color:#fff; padding:48px 48px; display:flex; flex-direction:column; border-radius:var(--r-pane); background:linear-gradient(150deg,#2B2545 0%,#3E2F6B 55%,#5B4BD6 130%); box-shadow:0 20px 50px -20px rgba(60,40,120,.5); }
.auth-aside .brand-mark { color:#fff; } .auth-aside h1 { color:#fff; font-size:40px; font-weight:800; letter-spacing:-.03em; line-height:1.08; margin-top:52px; } .auth-aside h1 em { color:#fff; font-style:normal; }
.auth-aside .blurb { color:rgba(255,255,255,.78); font-size:16px; margin-top:20px; max-width:420px; line-height:1.55; } .auth-aside .rule { display:none; }
.auth-aside ul { margin:0; padding:0; list-style:none; color:rgba(255,255,255,.85); font-size:14px; display:flex; flex-direction:column; gap:10px; } .auth-aside li { padding:14px 18px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14); border-radius:14px; } .auth-aside .spacer { flex:1; }
.auth-main { display:grid; place-items:center; padding:40px 28px; background:var(--glass-2); backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur)); border:1px solid var(--glass-line); border-radius:var(--r-pane); }
.auth-box { width:100%; max-width:440px; background:var(--card); border:1px solid var(--card-line); border-radius:22px; box-shadow:var(--shadow-card); padding:34px; }
.auth-box h2 { font-size:26px; font-weight:800; letter-spacing:-.02em; margin-bottom:6px; } .auth-box .sub { color:var(--muted); margin-bottom:24px; font-size:14px; } .auth-box .btn { width:100%; height:48px; }
.auth-foot { margin-top:20px; font-size:14px; color:var(--muted); text-align:center; } .auth-foot a { font-weight:600; }
@media (max-width:900px) { .auth { grid-template-columns:1fr; padding:12px; } .auth-aside { display:none; } .auth-main { padding:24px 16px; } .auth-box { padding:26px; } }

/* ---- Odds and ends -------------------------------------------------------------------------------------- */
.muted { color:var(--muted); } .small { font-size:13px; } .right { text-align:right; } .stack > * + * { margin-top:16px; } .stack > * { width:100%; }
.between { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.kv { display:grid; grid-template-columns:auto minmax(0,1fr); font-size:14px; } .kv dt { color:var(--muted); padding:11px 24px 11px 0; border-bottom:1px solid var(--hair); }
.kv dd { margin:0; color:var(--ink); font-weight:500; padding:11px 0; border-bottom:1px solid var(--hair); text-align:right; word-break:break-word; } .kv dt:last-of-type,.kv dd:last-of-type { border-bottom:0; }
.divider { height:1px; background:var(--hair); margin:20px 0; } .loading { padding:48px; text-align:center; color:var(--muted); }
#blazor-error-ui { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); max-width:560px; width:calc(100% - 36px); z-index:1000; display:none; background:var(--accent); color:var(--accent-ink); padding:14px 20px; font-size:14px; border-radius:16px; box-shadow:0 20px 40px -12px rgba(0,0,0,.4); }
#blazor-error-ui .dismiss { cursor:pointer; float:right; font-weight:700; margin-left:16px; }

/* ---- Utilities: the handful of spacings the pages kept writing inline ------------------------------------- */
.m0 { margin: 0 !important; } .mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 6px !important; } .mt-2 { margin-top: 8px !important; } .mt-3 { margin-top: 14px !important; } .mt-4 { margin-top: 18px !important; }
.mb-2 { margin-bottom: 10px !important; } .mb-3 { margin-bottom: 14px !important; } .mb-4 { margin-bottom: 18px !important; }
.ink { color: var(--ink); } .text-danger { color: var(--rose-ink); } .xs { font-size: 12px; }
/* One width for every onboarding form and the stepper above it, so their edges line up. */

/* ---- Dark ---------------------------------------------------------------------------------------------------
   The same layout in a different light, not an inversion. Three things had to be rethought rather than flipped:

   1. The glass. In the light theme a surface is white at low alpha over a pale field, so it reads as frosted. A
      white veil over a dark field reads as fog, so here the veil is a light tint at very low alpha and the field
      does the work instead.
   2. The tints behind pills and icons. #DDF5E6 behind #14693D is a light-theme pairing; dark keeps the hue but
      inverts the roles — a low-alpha wash of the hue carrying a light ink, so contrast holds both ways.
   3. The default button. --accent is near-black, which is a strong button on white and an invisible one on
      near-black. It becomes light with dark text, so the primary action stays the loudest thing on the page.

   Shadows barely register on a dark background, so the elevation that a shadow carried in the light theme is
   carried here by the surface being a step lighter than what it sits on. --sheen drops to near nothing for the
   same reason: a bright inset line on a dark card reads as a seam. */
:root[data-theme="dark"] {
  --ink:#EAE9F2; --ink-2:#C3C1D4; --muted:#9C9AB0; --faint:#8E8BA4; --white:#fff;
  --brand:#4F86FF; --violet:#A99CFF; --violet-soft:rgba(155,140,255,.14);
  --accent:#EAE9F2; --accent-ink:#191A28; --accent-hover:#FFFFFF; --brand-hover:#6E9AFF;
  --on-accent-grad:#fff;

  --page:#111220;
  --field-a:rgba(255,150,90,.10); --field-b:rgba(150,120,255,.14); --field-c:rgba(80,150,255,.12);
  --field-d:rgba(255,170,110,.07);
  --field-e:#15162A; --field-f:#191A30; --field-g:#141B2E;

  --glass:rgba(255,255,255,.05); --glass-2:rgba(255,255,255,.03); --glass-line:rgba(255,255,255,.10);
  --glass-soft:rgba(255,255,255,.08); --glass-dim:rgba(255,255,255,.05);
  --glass-bar:rgba(22,23,40,.78); --glass-solid:rgba(26,27,46,.96);
  --card:rgba(255,255,255,.05); --card-line:rgba(255,255,255,.09);
  --surface:#1C1D31; --surface-2:#22233A; --surface-3:#262742; --surface-4:#1F2036;
  --card-top:#1E1F34; --card-bot:#1A1B2E;
  --sc-top:#1F2036;  --sc-bot:#1A1B2E;
  --field-bg:#191A2C;
  --hair:rgba(255,255,255,.09); --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.22); --line-2:#2E2F4A;

  --thumb:#3A3B5C; --thumb-shadow:rgba(0,0,0,.5);
  --sheen:rgba(255,255,255,.05); --sheen-2:rgba(255,255,255,.08);
  --scrim:rgba(6,6,14,.66);
  --scrollbar:rgba(255,255,255,.18);
  --popover-shadow:rgba(0,0,0,.6);
  --code-bg:#0E0F1C; --code-ink:#E4E1F4;
  --focus-ring:rgba(155,140,255,.28);
  --glow:.30;

  /* Tints keep the hue and swap which side carries it. */
  --t-blue:rgba(79,134,255,.18);   --i-blue:#8FB4FF;
  --t-green:rgba(46,190,122,.16);  --i-green:#5FD3A0;
  --t-orange:rgba(240,150,60,.16); --i-orange:#F0A860;
  --t-purple:rgba(155,140,255,.16);--i-purple:#BCB0FF;
  --ok-bg:rgba(46,190,122,.16);    --ok-ink:#5FD3A0;
  --wait-bg:rgba(240,180,60,.16);  --wait-ink:#EFC169;
  --bad-bg:rgba(255,105,105,.16);  --bad-ink:#FF8B8B;
  --grey-bg:rgba(255,255,255,.08); --grey-ink:#BAB8CC;
  --env-bg:var(--violet-soft);     --env-ink:var(--violet);
  --bad-field:rgba(255,105,105,.08); --bad-ring:rgba(255,105,105,.22);

  --shadow-pane:0 16px 44px -20px rgba(0,0,0,.7);
  --shadow-soft:0 1px 2px rgba(0,0,0,.3);
  --shadow-lift:0 16px 32px -22px rgba(0,0,0,.6);
  --shadow-btn:0 8px 18px -10px rgba(0,0,0,.6);
  --shadow-card:0 10px 28px -14px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.3);
  --ring-inset:rgba(0,0,0,.3);
  --select-caret:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%239C9AB0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Old names some pages still reference, kept in step with the above. */
  --gold:#F0A860; --rose:#FF8B8B; --rose-ink:#FF8B8B; --peach:rgba(240,150,60,.16); --peach-ink:#EFC169;
  --mint:rgba(46,190,122,.16); --mint-ink:#5FD3A0; --rosebg:rgba(255,105,105,.16);
  --lilac:rgba(155,140,255,.16); --lilac-ink:#BCB0FF; --grey:rgba(255,255,255,.08);
  color-scheme:dark;
}

/* A few rules cannot be reached by a token alone. */
/* The brand gradients stay, but on a dark field they want a touch more light to keep their edges. */
:root[data-theme="dark"] .stat.accent { background:linear-gradient(150deg,#2A2350 0%,#443180 60%,#7B5BE8 130%); }
/* The code block is dark in both themes, so in dark it needs a line to separate it from the card behind it. */
:root[data-theme="dark"] pre { border:1px solid var(--hair); }
/* An image on a dark page is a lit rectangle; the viewer keeps a light mat so documents read as documents. */
:root[data-theme="dark"] .modal-body { background:#0C0D18; }
:root[data-theme="dark"] .modal-body img { background:#fff; }

:root { --form-w: 680px; }
.narrow { max-width: var(--form-w); } .full { width: 100%; } .center { justify-content: center; }
.nowrap { flex-wrap: nowrap !important; } .end { justify-content: flex-end; }

/* The merchant code in the bar: a fact beside the name, not a middle-dot meta string. */
.topbar-left .code { font-family: var(--mono); font-size: 12px; color: var(--muted); background: var(--glass-dim); border-radius: 8px; padding: 3px 8px; margin-left: 10px; }

/* Keyboard users skip eighteen links to reach the page. Off-screen until focused, then a pill at the top. */
.skip-link { position: absolute; left: 24px; top: -60px; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: 12px 18px; border-radius: var(--r-pill); font-weight: 600; transition: top .15s ease; }
.skip-link:focus { top: 24px; outline: 2px solid var(--page); outline-offset: 2px; }
#main:focus { outline: none; }

/* Every control a finger can land on is at least 40px tall; the small button was 36. */
.btn.small { height: 40px; }
.env-switch button { min-height: 36px; }

/* ---- The sign-in reference, carried through ------------------------------------------------------------------
   A light aside (the dark violet one is gone), a gradient in the headline's last line and in the primary button,
   product chips floating beside the headline, and feature rows with icon tiles. The inputs take a leading icon
   and the password a show/hide toggle. */
.auth-aside { background:var(--glass); color:var(--ink); border:1px solid var(--glass-line); backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur)); box-shadow:var(--shadow-pane); padding:36px 40px; }
.auth-aside .brand { padding:0; } .auth-aside .brand-mark { color:var(--ink); font-size:22px; } .auth-aside .brand-sub { font-style:italic; margin-left:44px; }
.auth-hero { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr); gap:16px; align-items:center; margin:40px 0 auto; }
.auth-aside h1 { text-wrap:balance; }
.auth-aside h1 { color:var(--ink); font-size:clamp(34px,3.2vw,46px); font-weight:800; letter-spacing:-.03em; line-height:1.06; margin:0; }
.auth-aside h1 em { font-style:normal; background:linear-gradient(90deg,#2F6BFF 0%,#5B4BD6 55%,#7B4BE0 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.auth-aside .blurb { color:var(--muted); font-size:16px; margin:18px 0 0; max-width:440px; line-height:1.55; }
.auth-aside .rule, .auth-aside .spacer { display:none; }
/* Three tilted glass chips. Decorative, so they get no motion and no hit area. */
.chips { position:relative; height:270px; pointer-events:none; }
.chip { position:absolute; display:flex; align-items:center; gap:12px; padding:14px 22px 14px 14px; border-radius:18px; font-weight:600; color:var(--ink); background:var(--glass-soft); border:1px solid var(--glass-line); box-shadow:0 18px 34px -18px rgba(80,60,140,.35); backdrop-filter:blur(10px); }
.chip .tile { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; } .chip .tile svg { width:22px; height:22px; }
.chip.blue { left:0; top:0; transform:rotate(8deg); } .chip.blue .tile { background:var(--t-blue); color:var(--i-blue); }
.chip.green { left:14%; top:36%; transform:rotate(6deg); } .chip.green .tile { background:var(--t-green); color:var(--i-green); }
.chip.purple { left:22%; top:70%; transform:rotate(5deg); } .chip.purple .tile { background:var(--t-purple); color:var(--i-purple); }
/* Feature rows. */
.feats { list-style:none; margin:28px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.feats li { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:16px; background:var(--glass-dim); border:1px solid var(--glass-line); }
.feats .tile { width:48px; height:48px; border-radius:50%; flex:none; display:grid; place-items:center; } .feats .tile svg { width:22px; height:22px; }
.feats .tile.purple { background:var(--t-purple); color:var(--i-purple); } .feats .tile.orange { background:var(--t-orange); color:var(--i-orange); }
.feats b { display:block; font-size:14.5px; font-weight:600; color:var(--ink); } .feats small { display:block; font-size:13px; color:var(--muted); margin-top:2px; }
/* Inputs with a leading icon, and the password's toggle. The control wrapper positions both; the input keeps
   its full-width box, so labels, errors and focus rings work exactly as on every other field. */
.control { position:relative; }
.control .lead-ico { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--faint); pointer-events:none; }
.control input:not([type="checkbox"],[type="radio"]) { padding-left:44px; }
.control .eye { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:40px; height:40px; border:0; border-radius:10px; background:transparent; color:var(--muted); cursor:pointer; display:grid; place-items:center; }
.control .eye svg { width:20px; height:20px; } .control .eye:hover { background:var(--grey-bg); color:var(--ink); } .control .eye:focus-visible { outline:2px solid var(--violet); outline-offset:-2px; }
.control:has(.eye) input { padding-right:52px; }
/* The primary action, everywhere: a blue-to-violet gradient. Text is white at 4.5:1+ against both ends. */
.btn.gold { background:linear-gradient(90deg,#2A62F2 0%,#5B4BD6 60%,#7B4BE0 100%); color:#fff; box-shadow:0 12px 24px -12px rgba(91,75,214,.6); }
.btn.gold:hover:not(:disabled) { background:linear-gradient(90deg,#2860F0 0%,#5040C8 60%,#6E40D4 100%); }
.btn .arrow { font-size:18px; line-height:1; transition:transform .2s ease; } .btn:hover .arrow { transform:translateX(3px); }
.auth-box .btn { height:52px; font-size:16px; }
.auth-box .btn.gold:disabled { opacity:.6; }
.brand-mark::before { background:linear-gradient(135deg,#4F86FF 0%,#5B4BD6 70%,#7B4BE0 100%); box-shadow:0 6px 14px -6px rgba(91,75,214,.6); }
@media (max-width:1180px) { .auth-hero { grid-template-columns:1fr; } .chips { display:none; } }
@media (prefers-reduced-motion:reduce) { .btn .arrow { transition:none; } .btn:hover .arrow { transform:none; } }

/* ---- A text link that is a button, for things that open in place rather than navigate ------------------- */
.link { appearance:none; background:none; border:0; padding:0; font:inherit; color:var(--violet); cursor:pointer; text-align:left; text-decoration:none; overflow-wrap:anywhere; }
.link:hover { text-decoration:underline; } .link:focus-visible { outline:2px solid var(--violet); outline-offset:2px; border-radius:4px; }

/* ---- Modal: a document shown in place -------------------------------------------------------------------- */
.modal-scrim { position:fixed; inset:0; z-index:90; background:var(--scrim); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.modal { position:fixed; z-index:91; left:50%; top:50%; transform:translate(-50%,-50%); width:min(1100px, calc(100vw - 32px)); height:min(88vh, 900px);
  display:flex; flex-direction:column; background:var(--surface); border-radius:22px; box-shadow:0 30px 80px -30px rgba(40,30,60,.6); outline:none; overflow:hidden; }
.modal:focus-visible { box-shadow:0 30px 80px -30px rgba(40,30,60,.6), 0 0 0 3px var(--violet); }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; border-bottom:1px solid var(--hair); flex:none; }
.modal-title { min-width:0; } .modal-title h2 { font-size:15px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.modal-actions { display:flex; gap:8px; flex:none; }
.modal-body { flex:1; min-height:0; background:var(--surface-2); display:grid; place-items:center; overflow:auto; }
.modal-body img { max-width:100%; max-height:100%; object-fit:contain; display:block; }
.modal-body iframe { width:100%; height:100%; border:0; display:block; }
.modal-body .empty { max-width:48ch; } .modal-body .empty span { display:block; color:var(--muted); }
@media (max-width:640px) { .modal { width:100vw; height:100dvh; border-radius:0; } .modal-head { flex-wrap:wrap; } }

/* ---- Overlap fixes, everywhere ------------------------------------------------------------------------------
   Long identifiers and file names wrap instead of pushing a table past its card; a card that holds a bare table
   scrolls that table sideways rather than letting it spill; an action cell never wraps its buttons onto each
   other; and a selected stat rings itself without lifting into its neighbours. */
td { overflow-wrap:anywhere; }
td.right, th.right { white-space:nowrap; }
td .btn-row { gap:8px; }
.card:has(> table), .plain:has(> table) { overflow-x:auto; }
.stat.clickable:hover { transform:none; box-shadow:var(--shadow-soft), 0 18px 34px -20px rgba(80,60,140,.32), inset 0 1px 0 var(--sheen); }
.stat.clickable.selected { box-shadow:0 0 0 2px var(--violet), 0 14px 30px -20px rgba(80,60,140,.22); }
.stat.accent { background:linear-gradient(150deg,#2B2545,#3E2F6B 60%,#6C4FE0 130%); }
.stat.accent.selected { box-shadow:0 0 0 2px var(--page), 0 0 0 4px var(--violet); }
.between { row-gap:10px; }
.between, .note, .stats, .grid { flex-wrap:wrap; }
.content > .between { margin-bottom:16px; }

/* ---- A caption under a button ---------------------------------------------------------------------------------
   `.help` used to be styled only inside a field; on its own, after a button, it sat on the button's edge. It now
   has a voice anywhere, and anything that follows a button or a button row is set off from it. */
.help { font-size:13px; color:var(--muted); line-height:1.45; max-width:72ch; }
.btn + .help, .btn-row + .help, .btn + .muted, .btn-row + .muted, .btn + p, .btn-row + p, .btn + .note, .btn-row + .note { margin-top:14px; }
.help + .btn, .muted + .btn, p + .btn { margin-top:14px; }

/* ---- The access-restricted card ------------------------------------------------------------------------- */
.card.access { max-width:560px; }
.card.access .tile { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; margin-bottom:14px; }
.card.access .tile svg { width:24px; height:24px; }
.card.access .tile.purple { background:var(--t-purple); color:var(--i-purple); } .card.access .tile.orange { background:var(--t-orange); color:var(--i-orange); }
.card.access p { font-size:15px; line-height:1.55; }
.note .btn.ghost { background:var(--glass-soft); color:inherit; }

/* ---- Stepper: one connected track ----------------------------------------------------------------------------
   Seven equal columns on a single line, a circle on the line for each step and its label beneath. The segment
   leading into a step is drawn by that step, so the track is coloured exactly as far as the merchant has got.
   Equal columns are what make it align: every step is the same width, whatever its label says. */
.steps { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; max-width:var(--form-w); margin:0 0 26px; padding:0; gap:0; }
.step { position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; padding:0; background:none; border-radius:0; text-align:center; min-width:0; }
.step::before { content:""; position:absolute; top:13px; right:50%; width:100%; height:2px; background:var(--hair); z-index:0; }
.step:first-child::before { display:none; }
.step.done::before, .step.now::before { background:linear-gradient(90deg,#2A62F2,#5B4BD6); }
.step .n { position:relative; z-index:1; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700;
  background:var(--surface); color:var(--muted); box-shadow:inset 0 0 0 2px var(--hair); }
.step .t { font-size:12.5px; color:var(--muted); line-height:1.25; padding:0 4px; overflow-wrap:anywhere; }
.step.done .n { background:var(--ok-bg); color:var(--ok-ink); box-shadow:inset 0 0 0 2px var(--ok-bg); }
.step.done .t { color:var(--ink-2); }
.step.now .n { background:linear-gradient(135deg,#2A62F2,#5B4BD6); color:#fff; box-shadow:0 0 0 4px var(--focus-ring); }
.step.now .t { color:var(--ink); font-weight:600; }
@media (max-width:620px) { .step .t { font-size:11px; } .steps { max-width:none; } }

/* ---- Searchable dropdown ------------------------------------------------------------------------------- */
.combo { position:relative; }
.combo-toggle {
  width:100%; height:46px; padding:0 40px 0 14px; text-align:left; font:inherit; color:var(--ink);
  background:var(--surface); border:1.5px solid var(--hair); border-radius:var(--r-ctl); cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.combo-toggle:hover { border-color:var(--line-strong); }
.combo-toggle.open, .combo-toggle:focus-visible { border-color:var(--violet); box-shadow:0 0 0 4px var(--focus-ring); outline:none; }
.combo-toggle > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.combo-placeholder { color:var(--muted); }
.combo-caret { position:absolute; right:14px; color:var(--muted); font-size:12px; pointer-events:none; }

/* Sits under the panel and over everything else, so a click anywhere outside closes it. */
.combo-backdrop { position:fixed; inset:0; z-index:40; }

.combo-panel {
  position:absolute; z-index:41; top:calc(100% + 6px); left:0; right:0;
  background:var(--surface); border:1.5px solid var(--hair); border-radius:14px; overflow:hidden;
  box-shadow:0 18px 40px -16px var(--popover-shadow);
}
.combo-search {
  width:100%; height:42px; padding:0 14px; border:0; border-bottom:1px solid var(--hair);
  border-radius:0; font:inherit; outline:none;
}
.combo-list { max-height:260px; overflow-y:auto; }
.combo-option {
  width:100%; padding:9px 14px; border:0; background:none; font:inherit; text-align:left; cursor:pointer;
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
}
.combo-option:hover { background:var(--surface-3); }
.combo-option.chosen { background:var(--violet-soft); }
.combo-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.combo-hint { color:var(--muted); font-size:12px; flex:0 0 auto; }
.combo-empty, .combo-foot { padding:12px 14px; color:var(--muted); font-size:12.5px; }
.combo-foot { border-top:1px solid var(--hair); background:var(--surface-2); }

/* ---- Theme toggle -------------------------------------------------------------------------------------------
   Sits in the bar at the same 40px rhythm as the environment switch and the account chip.

   Both icons are always in the DOM and CSS picks one from <html data-theme>. The component cannot do this in
   C#: the server prerenders it without knowing what the browser has stored, so a field would paint the wrong
   icon and correct itself a frame later. Reading the attribute keeps the first paint honest. The hidden half is
   display:none rather than transparent, so it is gone for a screen reader too and the button has exactly one
   accessible name. */
.vh { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.theme-toggle { display:inline-grid; place-items:center; flex:none; width:40px; height:40px; padding:0; cursor:pointer;
  background:var(--glass-dim); border:1px solid var(--glass-line); border-radius:50%; color:var(--ink-2);
  transition:background .15s ease, color .15s ease; }
.theme-toggle:hover { background:var(--glass-soft); color:var(--ink); }
.theme-toggle:focus-visible { outline:2px solid var(--violet); outline-offset:2px; }
.theme-toggle svg { width:19px; height:19px; display:block; }
.theme-toggle > span { display:grid; place-items:center; }
.theme-toggle .when-light { display:none; }
:root[data-theme="light"] .theme-toggle .when-dark { display:none; }
:root[data-theme="light"] .theme-toggle .when-light { display:grid; }
@media (prefers-reduced-motion:reduce) { .theme-toggle { transition:none; } }
/* On the sign-in pages there is no bar to sit in, so the toggle floats in the corner. */
.auth-theme { position:fixed; top:26px; right:26px; z-index:5; }
@media (max-width:900px) { .auth-theme { top:18px; right:18px; } }