/* ===========================================================================
   DESIGN SYSTEM — LOCKED (shared with somsite.com · Brand Identity Kit 2026)
   =========================================================================== */
:root {
  --verdant: #1C7A4B;   /* PRIMARY — buttons, links, the signal dot */
  --pine:    #0E3B27;   /* DEEP — sidebars, dark grounds, footers */
  --fern:    #3FA76B;   /* ACCENT — hovers, highlights */
  --ink:     #12201A;   /* near-black text */
  --sage:    #6E7C74;   /* muted text, captions, metadata */
  --mist:    #F5F7F4;   /* off-white page ground */
  --white:   #FFFFFF;
  --alert:   #C0432F;   /* TRUE errors only — never decorative */

  /* status-light palette (the signal dot as a service state light) */
  --ok:      #1C7A4B;   /* active / paid */
  --amber:   #C8881C;   /* suspended / overdue / pending */
  --grey:    #9AA6A0;   /* terminated / cancelled / draft */
  --info:    #2D6FB3;   /* in-progress / informational */

  --hairline: rgba(110,124,116,0.18);
  --hairline-on-pine: rgba(255,255,255,0.13);
  --sage-08: rgba(110,124,116,0.08);
  --sage-04: rgba(110,124,116,0.045);
  --verdant-10: rgba(28,122,75,0.10);
  --verdant-14: rgba(28,122,75,0.14);
  --amber-12: rgba(200,136,28,0.13);
  --alert-10: rgba(192,67,47,0.10);

  --font-editorial: "Newsreader", Georgia, serif;
  --font-display:  "Familjen Grotesk", system-ui, -apple-system, sans-serif;
  --font-body:     "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono:     "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --pill: 999px;

  --gutter: clamp(1rem, 3vw, 2rem);
  --shadow-sm: 0 1px 2px rgba(18,32,26,0.04), 0 2px 8px rgba(18,32,26,0.05);
  --shadow-md: 0 6px 24px rgba(18,32,26,0.08);
  --shadow-lift: 0 14px 40px rgba(18,32,26,0.12);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --sidebar-w: 248px;
  --topbar-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--mist);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2.5px solid var(--verdant); outline-offset: 2px; border-radius: 4px; }

/* ---------- type utilities ---------- */
.display { font-family: var(--font-editorial); font-weight: 500; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -0.015em; }
.heading { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.12; letter-spacing: -0.01em; }
.subhead { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; line-height: 1.25; }
.lead { font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--sage); line-height: 1.5; }
.small { font-size: 0.875rem; line-height: 1.5; }
.tiny { font-size: 0.78rem; line-height: 1.45; }
.label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--sage); font-weight: 500; }
.editorial { font-family: var(--font-editorial); }
.mono { font-family: var(--font-mono); }
.muted { color: var(--sage); }
.strong { font-weight: 600; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* ===========================================================================
   THE SIGNAL DOT — signature device / status light
   =========================================================================== */
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--verdant); display: inline-block; flex: none; }
.dot--ok { background: var(--ok); }
.dot--amber { background: var(--amber); }
.dot--grey { background: var(--grey); }
.dot--info { background: var(--info); }
.dot--alert { background: var(--alert); }
.dot--pulse { position: relative; }
.dot--pulse::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid currentColor; color: inherit; opacity: .55;
  animation: dotpulse 2s var(--ease) infinite;
}
.dot--ok.dot--pulse::after { color: var(--ok); }
.dot--amber.dot--pulse::after { color: var(--amber); }
@keyframes dotpulse { 0% { transform: scale(.6); opacity:.6; } 70%,100% { transform: scale(1.7); opacity: 0; } }

/* status pill: dot + label */
.status { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; padding: 0.28rem 0.6rem 0.28rem 0.5rem; border-radius: var(--pill); background: var(--sage-08); color: var(--ink); white-space: nowrap; }
.status .dot { width: 8px; height: 8px; }
.status--ok { background: var(--verdant-10); color: var(--pine); }
.status--amber { background: var(--amber-12); color: #8a5e10; }
.status--unpaid { background: var(--white); color: var(--amber); border: 1px solid rgba(200,136,28,0.35); }
.dot--unpaid { background: var(--amber); }
.status--grey { background: var(--sage-08); color: var(--sage); }
.status--info { background: rgba(45,111,179,0.12); color: #235a90; }
.status--alert { background: var(--alert-10); color: var(--alert); }

/* ===========================================================================
   BUTTONS · BADGES · CHIPS
   =========================================================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; padding: 0.62rem 1.1rem; border-radius: var(--radius-sm); transition: all .18s var(--ease); white-space: nowrap; border: 1px solid transparent; }
.btn--primary { background: var(--verdant); color: var(--white); }
.btn--primary:hover { background: var(--fern); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--ghost { background: var(--white); color: var(--ink); border-color: var(--hairline); }
.btn--ghost:hover { border-color: var(--verdant); color: var(--verdant); }
.btn--pine { background: var(--pine); color: var(--mist); }
.btn--pine:hover { background: #145238; }
.btn--danger { background: var(--white); color: var(--alert); border-color: rgba(192,67,47,0.35); }
.btn--danger:hover { background: var(--alert-10); }
.btn--sm { padding: 0.4rem 0.75rem; font-size: 0.82rem; }
.btn--lg { padding: 0.8rem 1.5rem; font-size: 1rem; }
.btn--block { width: 100%; }
.btn--link { padding: 0; color: var(--verdant); }
.btn--link:hover { color: var(--fern); text-decoration: underline; }
.btn[disabled] { opacity: .5; pointer-events: none; }

.badge { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-display); font-weight: 600; font-size: 0.72rem; padding: 0.15rem 0.5rem; border-radius: var(--pill); background: var(--sage-08); color: var(--sage); }
.badge--v { background: var(--verdant-10); color: var(--pine); }
.badge--amber { background: var(--amber-12); color: #8a5e10; }
.badge--alert { background: var(--alert-10); color: var(--alert); }

.chip { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-display); font-weight: 500; font-size: 0.85rem; padding: 0.4rem 0.8rem; border-radius: var(--pill); border: 1px solid var(--hairline); background: var(--white); transition: all .15s var(--ease); }
.chip[aria-pressed="true"], .chip.active { border-color: var(--verdant); background: var(--verdant-10); color: var(--pine); }

/* ===========================================================================
   CARDS · SURFACES · TABLES
   =========================================================================== */
.card { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius); padding: clamp(1.1rem, 2vw, 1.5rem); }
.card--pad0 { padding: 0; overflow: hidden; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--hairline); }
.card-head h3 { font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
.card-body { padding: 1.25rem; }
.panel { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius); }

.kpi { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.1rem 1.25rem; }
.kpi .label { display: flex; align-items: center; gap: 0.4rem; }
.kpi .figure { font-family: var(--font-editorial); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.1; margin-top: 0.35rem; letter-spacing: -0.01em; }
.kpi .delta { font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; }
.delta--up { color: var(--verdant); }
.delta--down { color: var(--alert); }

table.tbl { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tbl th { text-align: left; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage); font-weight: 500; padding: 0.7rem 1rem; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.tbl td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background .12s var(--ease); }
.tbl tbody tr:hover { background: var(--sage-04); }
.tbl .row-link { cursor: pointer; }
.tbl-wrap { overflow-x: auto; }

/* definition rows */
.dl { display: grid; grid-template-columns: minmax(120px, 0.5fr) 1fr; gap: 0.1rem 1rem; }
.dl dt { color: var(--sage); font-size: 0.85rem; padding: 0.45rem 0; }
.dl dd { font-weight: 500; padding: 0.45rem 0; }
.dl dt, .dl dd { border-bottom: 1px solid var(--hairline); }
.dl > dt:last-of-type, .dl > dd:last-of-type { border-bottom: 0; }

/* layout helpers */
.grid { display: grid; gap: clamp(0.9rem, 1.6vw, 1.25rem); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.row { display: flex; gap: 1rem; }
.row--between { justify-content: space-between; align-items: center; }
.row--wrap { flex-wrap: wrap; }
.row--center { align-items: center; }
.gap-sm { gap: 0.5rem; }
.stack > * + * { margin-top: var(--flow, 1rem); }
.mt0 { margin-top: 0; } .mt1 { margin-top: 0.5rem; } .mt2 { margin-top: 1rem; } .mt3 { margin-top: 1.5rem; } .mt4 { margin-top: 2rem; }
.flex1 { flex: 1; } .flnone { flex: none; }
.divider { height: 1px; background: var(--hairline); border: 0; }

/* forms */
.field { display: block; }
.field > label { display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; margin-bottom: 0.35rem; }
.field .hint { color: var(--sage); font-size: 0.78rem; margin-top: 0.3rem; }
.input, .select, .textarea {
  width: 100%; background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  padding: 0.62rem 0.8rem; font-size: 0.95rem; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--verdant); box-shadow: 0 0 0 3px var(--verdant-10); }
.textarea { min-height: 110px; resize: vertical; }
.field.invalid .input, .field.invalid .textarea, .field.invalid .select { border-color: var(--alert); box-shadow: 0 0 0 3px var(--alert-10); }
.field.invalid .err { color: var(--alert); font-size: 0.78rem; margin-top: 0.3rem; }
.err { display: none; } .field.invalid .err { display: block; }
.input-group { display: flex; gap: 0.5rem; }
.input-group .input { flex: 1; }

/* toggle switch */
.switch { display: inline-block; vertical-align: middle; position: relative; width: 42px; height: 24px; border-radius: var(--pill); background: var(--sage); border: none; transition: background .18s var(--ease); flex: none; }
.switch::after { content:""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .18s var(--ease); }
.switch[aria-checked="true"] { background: var(--verdant); }
.switch[aria-checked="true"]::after { transform: translateX(18px); }

/* progress */
.bar { height: 7px; border-radius: var(--pill); background: var(--sage-08); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--verdant); border-radius: var(--pill); }

/* avatar */
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--verdant-10); color: var(--pine); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; flex: none; }
.avatar--lg { width: 52px; height: 52px; font-size: 1.1rem; }
.avatar--pine { background: rgba(255,255,255,0.12); color: var(--mist); }

/* ===========================================================================
   APP SHELLS  —  client topbar  ·  admin sidebar
   =========================================================================== */
.page { display: none; }
.page.active { display: block; }

/* surface scoping: body class set by router */
.app-topbar, .app-sidebar, .admin-topbar { display: none; }
body.surface-client .app-topbar { display: flex; }
body.surface-admin .app-sidebar { display: flex; }
body.surface-admin .admin-topbar { display: flex; }

/* CLIENT topbar */
.app-topbar {
  position: sticky; top: 0; z-index: 40; height: var(--topbar-h);
  align-items: center; gap: 1.25rem; padding: 0 var(--gutter);
  background: rgba(255,255,255,0.85); backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.brand { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; }
.brand .dot { width: 10px; height: 10px; }
.brand small { font-weight: 500; color: var(--sage); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--font-mono); }
.topnav { display: flex; gap: 0.25rem; margin-left: 0.5rem; }
.topnav a { font-family: var(--font-display); font-weight: 500; font-size: 0.92rem; padding: 0.45rem 0.7rem; border-radius: var(--radius-sm); color: var(--sage); transition: all .14s var(--ease); }
.topnav a:hover { color: var(--ink); background: var(--sage-08); }
.topnav a.active { color: var(--pine); background: var(--verdant-10); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }
.icon-btn { width: 38px; height: 38px; border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--sage); position: relative; transition: all .14s var(--ease); }
.icon-btn:hover { background: var(--sage-08); color: var(--ink); }
.icon-btn .ping { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); border: 2px solid var(--white); }

/* main canvas */
.canvas { max-width: 1180px; margin-inline: auto; padding: clamp(1.25rem, 3vw, 2.25rem) var(--gutter) 4rem; }
.canvas--wide { max-width: 1320px; }
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.pagehead .crumbs { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sage); margin-bottom: 0.5rem; }
.pagehead .crumbs a { color: var(--verdant); }

/* ADMIN sidebar */
.app-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); z-index: 50;
  flex-direction: column; background: var(--pine); color: var(--mist);
  padding: 1rem 0.75rem; overflow-y: auto;
}
.app-sidebar .brand { color: var(--mist); padding: 0.4rem 0.6rem 1rem; }
.app-sidebar .brand small { color: rgba(245,247,244,0.55); }
.side-group { margin-top: 0.75rem; }
.side-group .label { padding: 0.4rem 0.7rem 0.3rem; color: rgba(245,247,244,0.4); }
.side-link { display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0.7rem; border-radius: var(--radius-sm); color: rgba(245,247,244,0.78); font-family: var(--font-display); font-weight: 500; font-size: 0.9rem; transition: all .14s var(--ease); }
.side-link:hover { background: rgba(255,255,255,0.07); color: var(--mist); }
.side-link.active { background: rgba(63,167,107,0.22); color: #fff; }
.side-link .ic { width: 18px; display: grid; place-items: center; opacity: .9; }
.side-link .tag { margin-left: auto; font-size: 0.68rem; background: rgba(255,255,255,0.14); padding: 0.05rem 0.4rem; border-radius: var(--pill); }

.admin-topbar {
  position: sticky; top: 0; z-index: 40; height: var(--topbar-h); margin-left: var(--sidebar-w);
  align-items: center; gap: 1rem; padding: 0 var(--gutter);
  background: rgba(255,255,255,0.9); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--hairline);
}
.admin-search { flex: 1; max-width: 420px; display: flex; align-items: center; gap: 0.5rem; background: var(--mist); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 0.45rem 0.7rem; color: var(--sage); }
.admin-search input { border: none; background: none; outline: none; flex: 1; font-size: 0.9rem; }
body.surface-admin .admin-canvas { margin-left: var(--sidebar-w); }
.admin-canvas { padding: clamp(1.25rem, 2.5vw, 2rem) var(--gutter) 4rem; max-width: 1280px; }

/* search box on client */
.searchbox { display: flex; align-items: center; gap: 0.5rem; background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; }
.searchbox input { border: none; outline: none; flex: 1; font-size: 0.92rem; }

/* tabs */
.tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--hairline); margin-bottom: 1.25rem; overflow-x: auto; }
.tab { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; padding: 0.6rem 0.85rem; color: var(--sage); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab.active { color: var(--pine); border-bottom-color: var(--verdant); }
.tab:hover { color: var(--ink); }

/* empty / loading / error states */
.state { text-align: center; padding: clamp(2rem, 5vw, 3.5rem); }
.state .glyph { width: 54px; height: 54px; border-radius: 50%; background: var(--verdant-10); color: var(--verdant); display: grid; place-items: center; margin: 0 auto 1rem; }
.dot-loader { display: inline-flex; gap: 5px; }
.dot-loader .dot { animation: dotload 1s var(--ease) infinite; }
.dot-loader .dot:nth-child(2){ animation-delay: .15s; } .dot-loader .dot:nth-child(3){ animation-delay: .3s; }
@keyframes dotload { 0%,100%{ opacity:.3; transform: translateY(0);} 50%{ opacity:1; transform: translateY(-3px);} }

/* gateway tiles */
.gateways { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 0.75rem; }
.gw { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.9rem; border: 1.5px solid var(--hairline); border-radius: var(--radius); background: var(--white); text-align: left; transition: all .15s var(--ease); position: relative; }
.gw:hover { border-color: var(--fern); }
.gw[aria-pressed="true"] { border-color: var(--verdant); background: var(--verdant-10); }
.gw .gw-logo { width: 34px; height: 34px; border-radius: var(--radius-sm); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; color: #fff; }
.gw .gw-name { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; }
.gw .gw-sub { font-size: 0.74rem; color: var(--sage); }
.gw[aria-pressed="true"]::after { content:"✓"; position: absolute; top: 0.6rem; right: 0.7rem; color: var(--verdant); font-weight: 700; }

/* invoice document */
.invoice-doc { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; }
.invoice-doc .doc-head { padding: 1.5rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: var(--pine); color: var(--mist); }
.invoice-doc .doc-head .label { color: rgba(245,247,244,0.6); }

/* timeline (tickets / audit) */
.timeline { position: relative; padding-left: 1.5rem; }
.timeline::before { content:""; position: absolute; left: 4px; top: 4px; bottom: 4px; width: 2px; background: var(--hairline); }
.tl-item { position: relative; padding-bottom: 1.25rem; }
.tl-item::before { content:""; position: absolute; left: -1.5rem; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--verdant); border: 2px solid var(--white); box-shadow: 0 0 0 1px var(--hairline); }
.tl-item.muted-node::before { background: var(--grey); }

/* wizard stepper (migration) */
.stepper { display: flex; align-items: center; gap: 0; margin-bottom: 1.5rem; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.9rem; }
.step .num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; background: var(--sage-08); color: var(--sage); flex: none; }
.step .stxt { font-family: var(--font-display); font-weight: 600; font-size: 0.88rem; color: var(--sage); }
.step.done .num { background: var(--verdant); color: #fff; }
.step.done .stxt { color: var(--ink); }
.step.current .num { background: var(--pine); color: #fff; }
.step.current .stxt { color: var(--pine); }
.step-line { flex: 1; min-width: 16px; height: 2px; background: var(--hairline); }

/* reconcile diff rows */
.recon-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 0.7fr; gap: 1rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--hairline); align-items: center; font-size: 0.9rem; }
.recon-row:last-child { border-bottom: 0; }
.recon-row.head { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage); }
.match { color: var(--verdant); font-weight: 600; }
.mismatch { color: var(--alert); font-weight: 600; }

/* code / log block */
.logbox { background: var(--ink); color: #c7e7d2; font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.6; padding: 1rem 1.1rem; border-radius: var(--radius); overflow-x: auto; white-space: pre-wrap; }
.logbox .ln-ok { color: #8fe0ad; } .logbox .ln-warn { color: #e6c06a; } .logbox .ln-dim { color: #6f8f7e; }

/* notice banners */
.notice { display: flex; gap: 0.7rem; padding: 0.85rem 1rem; border-radius: var(--radius-sm); font-size: 0.9rem; align-items: flex-start; }
.notice--info { background: rgba(45,111,179,0.08); border: 1px solid rgba(45,111,179,0.2); }
.notice--warn { background: var(--amber-12); border: 1px solid rgba(200,136,28,0.3); }
.notice--ok { background: var(--verdant-10); border: 1px solid rgba(28,122,75,0.25); }
.notice--alert { background: var(--alert-10); border: 1px solid rgba(192,67,47,0.3); }
.notice .ic { flex: none; margin-top: 1px; }

/* auth screens */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-aside { background: var(--pine); color: var(--mist); padding: clamp(2rem,5vw,4rem); display: flex; flex-direction: column; justify-content: space-between; }
.auth-main { display: grid; place-items: center; padding: 2rem var(--gutter); }
.auth-card { width: 100%; max-width: 400px; }
.otp-grid { display: flex; gap: 0.6rem; }
.otp-grid input { width: 52px; height: 60px; text-align: center; font-family: var(--font-mono); font-size: 1.5rem; border: 1px solid var(--hairline); border-radius: var(--radius-sm); }
.otp-grid input:focus { outline: none; border-color: var(--verdant); box-shadow: 0 0 0 3px var(--verdant-10); }

/* reveal */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* spark bars (mini chart) */
.spark { display: flex; align-items: flex-end; gap: 3px; height: 48px; }
.spark span { flex: 1; background: var(--verdant-10); border-radius: 2px 2px 0 0; }
.spark span.hi { background: var(--verdant); }

/* segmented control */
.seg { display: inline-flex; background: var(--sage-08); border-radius: var(--pill); padding: 3px; }
.seg button { font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; padding: 0.35rem 0.8rem; border-radius: var(--pill); color: var(--sage); }
.seg button.active { background: var(--white); color: var(--pine); box-shadow: var(--shadow-sm); }

/* misc */
.tag-pill { font-family: var(--font-mono); font-size: 0.7rem; padding: 0.1rem 0.45rem; border-radius: 4px; background: var(--sage-08); color: var(--sage); }
.ph { outline: 1px dashed rgba(200,136,28,0.5); outline-offset: 2px; } /* ‹PLACEHOLDER› marker on hover */
.flag { display: inline-block; font-family: var(--font-mono); font-size: 0.68rem; color: #8a5e10; background: var(--amber-12); padding: 0.05rem 0.4rem; border-radius: 4px; }

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 1000px) {
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px), (min-width: 1px) and (max-width: 1px) {
}
@media (max-width: 820px) {
  .topnav { display: none; }
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  :root { --sidebar-w: 0px; }
  .app-sidebar { transform: translateX(-100%); transition: transform .2s var(--ease); width: 248px; }
  body.sidebar-open .app-sidebar { transform: none; }
  .admin-topbar, body.surface-admin .admin-canvas { margin-left: 0; }
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .dl { grid-template-columns: 1fr; }
  .dl dt { padding-bottom: 0; border-bottom: 0; } .dl dd { padding-top: 0.1rem; }
  .recon-row { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .menu-btn { display: grid !important; }
}
.menu-btn { display: none; }

/* device preview (Screens menu) */
body.device-mobile .canvas, body.device-mobile .admin-canvas { max-width: 412px; }
body.device-mobile .app-topbar .topnav { display: none; }

/* ===========================================================================
   PROTOTYPE SCREEN SWITCHER
   =========================================================================== */
.proto-switch { position: fixed; right: 1rem; bottom: 1rem; z-index: 9000; font-family: var(--font-display); }
.ps-toggle { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--pine); color: var(--mist); font-weight: 600; font-size: 0.85rem; padding: 0.6rem 0.95rem; border-radius: var(--pill); box-shadow: var(--shadow-lift); }
.ps-toggle .dot { background: var(--fern); }
.proto-menu { display: none; position: absolute; right: 0; bottom: calc(100% + 0.6rem); width: 290px; max-height: 70vh; overflow-y: auto; background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--shadow-lift); padding: 0.5rem; }
.proto-menu.open { display: block; }
.proto-menu .pm-head { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage); padding: 0.6rem 0.7rem 0.3rem; position: sticky; top: 0; background: var(--white); }
.proto-menu a { display: block; padding: 0.42rem 0.7rem; border-radius: var(--radius-sm); font-size: 0.86rem; color: var(--ink); }
.proto-menu a:hover { background: var(--sage-08); }
.proto-menu a.sub { padding-left: 1.4rem; color: var(--sage); font-size: 0.82rem; }
.pm-device { display: flex; gap: 0.4rem; padding: 0.5rem; position: sticky; bottom: 0; background: var(--white); border-top: 1px solid var(--hairline); margin-top: 0.3rem; }
.pm-device button { flex: 1; border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 0.4rem; font-size: 0.78rem; font-weight: 600; }
.pm-device button.active { background: var(--verdant-10); border-color: var(--verdant); color: var(--pine); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}