/* ==========================================================================
   Product theme for /admin and /portal.

   Design language (from the "Relay" UI reference video, ref/ui.mp4, Oct 2026):
   a pale-aqua canvas ("Sea light": #F3F9F9 with white cards, deep teal #2F7F9E) with a soft teal "aurora" mist behind it,
   cards with a hairline border and 18px corners, Inter for UI text, an italic
   serif (Instrument Serif) for the one emphasised line on home screens, and
   lowercase monospace for small labels, table headers and status pills. One
   teal brand colour: fully rounded teal pills for primary actions, teal for
   the current page, progress, the chart line and live status dots. Secondary
   actions are dark pills with a hairline border. No gradients on UI surfaces.

   Motion (also from the reference): sections rise in with a stagger when a page
   opens, big numbers count up (see /premium.js), bars fill, the chart draws left
   to right, live status dots pulse, the aurora breathes.

   Loaded AFTER each page's inline <style>, so a rule here wins over the inline
   rule with the same selector. To go back to the original look, remove the
   <link rel="stylesheet" href="/premium.css"> and <script src="/premium.js">
   lines from admin.html / portal.html.

   RULES FOR EDITING THIS FILE
   1. Never write a literal brand colour here. Use var(--accent), var(--accent-dark),
      var(--accent-soft), var(--accent-2) or rgba(var(--accent-rgb), x). Those are
      defined inline in each HTML page, which is the only place src/branding.js
      swaps colours for the BRAND_* env vars. This file is a static asset.
      Text that sits ON the brand colour uses var(--on-accent): white for the
      default deep teal; branding.js switches it to navy for a light BRAND_ACCENT.
   2. A base rule here also beats the page's inline modifier classes and inline
      mobile media queries of equal specificity. When you restyle a base class,
      re-declare its modifiers / mobile overrides after it (see .btn-sm, main).
   3. The page JS builds most markup as strings with inline styles. Restyle by
      class or id from here; do not rely on changing that markup.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Neutrals (dark) */
  --bg: #f3f9f9;
  --card: #ffffff;
  --card-2: #f2f7f8;
  --surface-2: rgba(16, 38, 58, .045);
  --input-bg: #ffffff;
  --border: rgba(16, 38, 58, .1);
  --border-strong: rgba(16, 38, 58, .18);
  --text: #10263a;
  --text-2: #33506a;
  --muted: #5f7a8e;
  --faint: #93a8b8;
  /* --on-accent (text on the brand colour) is set in each page's :root, next to --accent, so
     branding.js can pick black or white to suit the brand. --accent-soft is derived here so the
     page's inline uses of it stay a dark tint whatever BRAND_ACCENT_SOFT says. */
  --accent-soft: rgba(var(--accent-rgb), .12);
  /* Status colours. These are used as TEXT by the page's inline styles, so they are the
     bright, readable-on-dark versions; the translucent tints for backgrounds are written out
     where they are used. */
  --green: #0f8a5f;
  --red: #b42318;
  --amber: #b45309;
  --blue: #1d6fa5;
  /* Data colours for charts and metric icons */
  --viz-blue: #2563eb;
  --viz-cyan: #0891b2;
  --viz-green: #059669;
  --viz-amber: #d97706;
  /* Depth: cards get a hairline and a faint top highlight; floating things get a real shadow */
  --shadow-card: 0 1px 2px rgba(16, 38, 58, .05), 0 1px 3px rgba(16, 38, 58, .04);
  --shadow-sm: 0 1px 2px rgba(16, 38, 58, .08);
  --shadow-md: 0 8px 24px -8px rgba(16, 38, 58, .18);
  --shadow-lg: 0 24px 60px -12px rgba(16, 38, 58, .25), 0 0 0 1px rgba(16, 38, 58, .06);
  --glow: 0 0 0 1px rgba(var(--accent-rgb), .35), 0 10px 30px -10px rgba(var(--accent-rgb), .55);
  --radius: 18px;      /* cards */
  --r-ctl: 12px;       /* inputs, nav items, icon buttons */
  --r-btn: 999px;      /* buttons, chips, tabs: full pills */
  --ring: 0 0 0 3px rgba(var(--accent-rgb), .22);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --grad: var(--accent);
  /* Shell */
  --topbar-h: 56px;
  --side-w: 244px;
  --side-bg: #ffffff;
  --side-border: rgba(16, 38, 58, .07);
  --side-text: #10263a;
  --side-muted: #4b6578;
  --side-label: #93a8b8;
  --side-icon: #5f7a8e;
  --side-hover: rgba(16, 38, 58, .05);
  --side-active: rgba(var(--accent-rgb), .11);
  /* Icons (Lucide outlines) used as masks, so they take whatever colour the element has */
  --i-inbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E");
  --i-message: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E");
  --i-target: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
  --i-reply: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 14 4 9 9 4'/%3E%3Cpath d='M20 20v-7a4 4 0 0 0-4-4H4'/%3E%3C/svg%3E");
  --i-clipboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M12 11h4'/%3E%3Cpath d='M12 16h4'/%3E%3Cpath d='M8 11h.01'/%3E%3Cpath d='M8 16h.01'/%3E%3C/svg%3E");
  --i-trend: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 7 13.5 15.5 8.5 10.5 2 17'/%3E%3Cpolyline points='16 7 22 7 22 13'/%3E%3C/svg%3E");
  --i-zap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z'/%3E%3C/svg%3E");
  --i-sparkles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.9 2.6 11.5 7l4.4 1.6-4.4 1.6-1.6 4.4-1.6-4.4L3.9 8.6 8.3 7z'/%3E%3Cpath d='M18 14l.9 2.4 2.4.9-2.4.9L18 20.6l-.9-2.4-2.4-.9 2.4-.9z'/%3E%3C/svg%3E");
  --i-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' x2='9' y1='12' y2='12'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --i-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
  --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6v7'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
}

/* ---------- 2. Base ---------- */
html { scrollbar-color: rgba(16, 38, 58, .2) transparent; scrollbar-width: thin; scroll-behavior: smooth; color-scheme: light; }
body {
  font-family: var(--font); font-size: 14px; line-height: 1.5; letter-spacing: 0;
  background: var(--bg); background-image: none; color: var(--text);
  position: relative; z-index: 0;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
/* The aurora: two soft lime light fields that drift slowly behind everything, plus a faint dot grid.
   They sit below the content (z-index -1 inside body's own stacking context). */
body::before, body::after {
  content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  will-change: transform;
}
body::before {
  background:
    radial-gradient(42% 30% at 78% 8%, rgba(var(--accent-rgb), .13), transparent 70%),
    radial-gradient(34% 26% at 12% 92%, rgba(var(--accent-rgb), .08), transparent 70%),
    radial-gradient(28% 22% at 55% 55%, rgba(var(--accent-rgb), .03), transparent 70%);
  animation: pmAurora 26s ease-in-out infinite alternate;
}
body::after {
  background-image: radial-gradient(rgba(16, 38, 58, .055) 1px, transparent 1.2px);
  background-size: 28px 28px; inset: 0; opacity: .5;
  -webkit-mask-image: radial-gradient(60% 60% at 70% 20%, #000, transparent 100%); mask-image: radial-gradient(60% 60% at 70% 20%, #000, transparent 100%);
}
::selection { background: rgba(var(--accent-rgb), .22); }
/* Page title: 26px semibold, tight tracking. Home screens add a mono eyebrow above and an italic
   serif line below (see section 6). */
h2 { margin: 0 0 22px; font-size: 26px; font-weight: 600; letter-spacing: -.03em; line-height: 1.2; color: var(--text); }
h3 { margin: 0 0 12px; font-size: 14px; font-weight: 600; letter-spacing: -.01em; line-height: 1.4; color: var(--text); }
h4 { margin: 14px 0 8px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .02em; text-transform: lowercase; color: var(--muted); }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 0 0 16px; max-width: 84ch; }
h2 + .hint { margin-top: -14px; margin-bottom: 22px; font-size: 14px; }
h3 + .hint { margin-top: -8px; font-size: 12.5px; }
:where(main, #modal, #drawer) a { color: var(--accent); text-decoration: none; font-weight: 500; }
:where(main, #modal, #drawer) a:hover { text-decoration: underline; }
a.btn, a.btn-secondary { display: inline-block; text-decoration: none; }
a.btn:hover, a.btn-secondary:hover { text-decoration: none; }
hr { border: none; border-top: 1px solid var(--border); }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
b, strong { color: var(--text); }

/* ---------- 3. Form controls ---------- */
/* Dark translucent fill, hairline border, 12px radius, lime border + soft ring on focus. */
input, select, textarea {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-ctl);
  background: var(--input-bg); color: var(--text); font-size: 13.5px; line-height: 20px;
  box-shadow: none; transition: border-color .15s, box-shadow .15s, background .15s;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus { outline: none; background: #fff; border-color: var(--accent); box-shadow: var(--ring); }
input:disabled, select:disabled, textarea:disabled { background: rgba(16, 38, 58, .02); color: var(--muted); cursor: not-allowed; }
input[readonly], textarea[readonly] { background: rgba(16, 38, 58, .02); }
textarea { line-height: 1.5; }
select {
  -webkit-appearance: none; appearance: none; padding-right: 30px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f9588' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
}
select option { background: var(--card-2); color: var(--text); }
select[multiple], select[size]:not([size="1"]) { background-image: none; padding-right: 12px; }
select.chip-add { background-image: none; padding-right: 6px; box-shadow: none; }
input[type=checkbox], input[type=radio], input[type=range], input[type=color] { accent-color: var(--accent); box-shadow: none; background: none; }
label:has(> input[type=checkbox]):not(.switch):not(.row) { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
label:not(.switch) > input[type=checkbox], td > input[type=checkbox], th > input[type=checkbox] { width: 15px; height: 15px; padding: 0; margin: 0; cursor: pointer; flex-shrink: 0; border-radius: 4px; }
label.hint { display: block; margin: 0 0 6px; max-width: none; font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.row > label:not(.switch):not(.platform) { font-size: 13.5px; font-weight: 500; color: var(--text-2); }
input[type=file] { padding: 6px 8px; font-size: 12.5px; color: var(--muted); }
input[type=file]::file-selector-button {
  font: inherit; font-size: 12.5px; font-weight: 500; color: var(--text); background: #fff; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: 999px; padding: 3px 10px; margin-right: 10px;
}
input[type=color] { padding: 3px; width: 40px; height: 36px; cursor: pointer; background: var(--card-2); }

/* ---------- 4. Buttons ---------- */
/* Primary: a lime pill with near-black text that brightens and lifts on hover (the reference's
   "Start free"). Secondary: a dark pill with a hairline border. */
.btn {
  background: var(--accent); color: var(--on-accent); border: 1px solid transparent; padding: 8px 16px; border-radius: var(--r-btn);
  font-weight: 600; font-size: 13px; line-height: 18px; letter-spacing: -.005em;
  box-shadow: none; transition: background .15s, box-shadow .2s, transform .15s var(--ease), filter .15s;
}
.btn:hover { background: var(--accent); filter: brightness(1.08); box-shadow: var(--glow); transform: translateY(-1px); }
.btn:active { background: var(--accent-dark); filter: none; transform: translateY(0) scale(.98); box-shadow: none; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .35); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }
.btn-secondary {
  background: rgba(16, 38, 58, .05); color: var(--text); border: 1px solid var(--border-strong); padding: 7px 14px; border-radius: var(--r-btn);
  font-weight: 500; font-size: 13px; line-height: 18px; box-shadow: none;
  transition: background .15s, border-color .15s, transform .15s var(--ease);
}
.btn-secondary:hover { background: rgba(16, 38, 58, .09); border-color: rgba(16, 38, 58, .24); }
.btn-secondary:active { transform: scale(.98); }
.btn-secondary:disabled { opacity: .45; cursor: not-allowed; transform: none; }
/* Modifiers re-declared after the base rules above (see header note 2). */
.btn-danger { color: var(--red); }
.btn-danger:hover { background: rgba(248, 113, 113, .12); border-color: rgba(248, 113, 113, .4); }
.btn-sm { padding: 5px 11px; font-size: 12px; }

/* ---------- 5. Sign-in ---------- */
/* The hero of the reference: a strong aurora behind a translucent dark card, lime logo tile,
   and an italic serif tagline. */
#login {
  background:
    radial-gradient(55% 45% at 70% 20%, rgba(var(--accent-rgb), .18), transparent 70%),
    radial-gradient(40% 40% at 15% 85%, rgba(var(--accent-rgb), .10), transparent 70%),
    var(--bg);
}
#login::before, #login::after { display: block; opacity: 1; filter: none; background: none; border-radius: 0; inset: 0; width: auto; height: auto; top: 0; left: 0; right: auto; bottom: auto; }
#login::before {
  width: 100%; height: 100%;
  background: radial-gradient(38% 24% at 60% 35%, rgba(var(--accent-rgb), .22), transparent 70%);
  animation: pmAurora 18s ease-in-out infinite alternate;
}
#login::after {
  width: 100%; height: 100%;
  background-image: radial-gradient(rgba(16, 38, 58, .07) 1px, transparent 1.2px); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 40%, #000, transparent); mask-image: radial-gradient(60% 60% at 50% 40%, #000, transparent);
}
#login .box {
  max-width: 400px; background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  padding: 34px 32px; border-radius: 22px; border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg), var(--shadow-card);
  animation: pmPop .6s var(--ease);
}
#login .brand { gap: 12px; margin-bottom: 6px; }
#login .brand .dot { width: 40px; height: 40px; border-radius: 12px; font-weight: 800; font-size: 18px; background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .3), 0 8px 24px -8px rgba(var(--accent-rgb), .7); }
#login h3 { font-size: 19px; font-weight: 600; letter-spacing: -.02em; margin: 0; color: var(--text); }
#login p { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--muted); margin: 2px 0 20px; letter-spacing: 0; }
#login .sub { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .02em; text-transform: lowercase; color: var(--muted); margin: 2px 0 18px; }
#login .sub::before { content: "● "; color: var(--accent); }
#login input { padding: 11px 14px; font-size: 14px; margin: 0 0 10px; border-radius: var(--r-ctl); background: rgba(16, 38, 58, .05); }
#login .btn { padding: 11px 16px; font-size: 14px; margin-top: 6px; }
#loginErr:not(:empty) { background: rgba(248, 113, 113, .1); border: 1px solid rgba(248, 113, 113, .35); border-radius: 10px; padding: 8px 10px; }

/* ---------- 6. App shell ---------- */
/* Top bar: 56px, translucent dark with a blur so the aurora shows through, hairline underneath,
   page title on the left, a mono status pill, and a lime avatar on the right. */
.topbar {
  height: var(--topbar-h); padding: 0 16px; margin: 0; top: 0; border: none; border-bottom: 1px solid var(--border); border-radius: 0;
  background: rgba(243, 249, 249, .78); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: none;
}
.topbar #topbarTitle { font-weight: 600; font-size: 14px; letter-spacing: -.01em; color: var(--text); }
.topbar .menu-btn { background: rgba(16, 38, 58, .05); border: 1px solid var(--border); border-radius: 10px; padding: 4px 8px; font-size: 15px; color: var(--text); box-shadow: none; }
.topbar .acct {
  width: 32px; height: 32px; background: var(--accent); color: var(--on-accent);
  font-weight: 700; font-size: 12px; cursor: pointer; box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .3);
  transition: transform .2s var(--ease), box-shadow .2s;
}
.topbar .acct:hover { transform: scale(1.06); box-shadow: var(--glow); }
/* "● all systems normal": a mono pill with a pulsing lime dot. */
.sys-pill {
  display: inline-flex; align-items: center; gap: 7px; margin-left: 10px; padding: 3px 10px 3px 9px;
  border: 1px solid var(--border); border-radius: 999px; background: rgba(16, 38, 58, .03);
  font-family: var(--mono); font-size: 11px; letter-spacing: .01em; color: var(--muted); white-space: nowrap;
}
.sys-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .6); animation: pmPulse 2.2s ease-out infinite; }
@media (max-width: 640px) { .sys-pill { display: none; } }
#navBackdrop { background: rgba(16, 38, 58, .4); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
#impBanner { background: var(--accent); color: var(--on-accent); border-radius: 0; font-size: 12.5px; font-weight: 500; padding: 8px 16px; }
#impBanner b { color: var(--on-accent); }

/* Sidebar: a slightly darker 232px rail with a hairline on the right. Brand row the same height as
   the top bar (lime tile, bold name), mono lowercase group labels, rounded rows; the current page
   gets a lime tint with lime text and icon. Column layout so "Sign out" sits at the bottom. */
nav {
  width: var(--side-w); padding: 0 12px 16px; background: var(--side-bg); border-right: 1px solid var(--side-border); color: var(--side-text);
  display: flex; flex-direction: column; scrollbar-color: rgba(16, 38, 58, .14) transparent;
}
nav > * { flex-shrink: 0; }
nav .logo { height: var(--topbar-h); margin: 0 -12px 14px; padding: 0 20px; gap: 10px; color: var(--text); font-size: 14.5px; font-weight: 700; letter-spacing: -.02em; box-shadow: 0 1px 0 var(--side-border); }
nav .logo .dot { width: 30px; height: 30px; border-radius: 9px; font-size: 14px; font-weight: 800; background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .3), 0 6px 18px -8px rgba(var(--accent-rgb), .8); }
nav .sub, nav .group-label { font-family: var(--mono); color: var(--side-label); font-size: 11px; font-weight: 500; letter-spacing: .02em; text-transform: lowercase; padding: 22px 12px 10px; }
nav .sub { padding-top: 0; margin-top: -4px; margin-bottom: 8px; }
nav a {
  color: var(--side-muted); padding: 10px 12px; border-radius: var(--r-ctl); margin: 0 0 6px; gap: 12px;
  font-size: 13.5px; font-weight: 500; line-height: 20px;
  transition: background .15s, color .15s, transform .25s var(--ease);
}
nav a svg { width: 17px; height: 17px; opacity: 1; color: var(--side-icon); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: color .15s; }
nav a:hover { background: var(--side-hover); color: var(--side-text); transform: translateX(2px); }
nav a:hover svg { color: var(--side-text); transform: none; }
nav a.active { background: var(--side-active); color: var(--accent); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .18); transform: none; }
nav a.active svg { opacity: 1; color: var(--accent); }
nav a.active::before { display: none; }
nav .logo + a, nav .sub + a { margin-top: 8px; }
nav .badge { background: var(--accent); color: var(--on-accent); border-radius: 999px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; line-height: 16px; padding: 0 6px; min-width: 16px; text-align: center; }
nav a:nth-last-of-type(2) { margin-bottom: 22px; }
nav .logout { margin-top: auto; margin-bottom: 0; position: relative; color: var(--side-muted); font-size: 13.5px; }
nav .logout::after { content: ""; position: absolute; left: -12px; right: -12px; top: -11px; height: 1px; background: var(--side-border); }
nav .logout::before { content: ""; width: 16px; height: 16px; flex-shrink: 0; background: var(--side-icon); -webkit-mask: var(--i-logout) center / contain no-repeat; mask: var(--i-logout) center / contain no-repeat; }
nav .logout:hover { color: var(--red); background: rgba(248, 113, 113, .1); }
nav .logout:hover::before { background: var(--red); }
@media (max-width: 900px) { nav { box-shadow: 12px 0 40px rgba(16, 38, 58, .2); } }

main { padding: 20px 16px 48px; }
.view { max-width: 1320px; margin-left: auto; margin-right: auto; }
@media (min-width: 901px) {
  nav { position: fixed; top: 0; left: 0; height: 100vh; z-index: 70; }
  .shell { padding-left: var(--side-w); }
  .topbar, #impBanner { margin-left: var(--side-w); }
  main { padding: 28px 28px 80px; }
}
@media (max-width: 900px) { h2 { font-size: 22px; margin-bottom: 16px; } .topbar { padding: 0 14px; } }

/* Home screens: a mono eyebrow with a lime dot above the title and an italic serif line under it,
   like the reference's "● daily view / A Tuesday, seen from Relay." */
#view-overview > h2, #view-dashboard > h2 { margin-bottom: 26px; }
#view-overview > h2::before, #view-dashboard > h2::before {
  display: block; margin-bottom: 10px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .02em; color: var(--muted); text-transform: lowercase;
}
#view-overview > h2::before { content: "● agency view"; }
#view-dashboard > h2::before { content: "● daily view"; }
#view-overview > h2::after, #view-dashboard > h2::after { display: block; margin-top: 4px; font-family: var(--serif); font-style: italic; font-size: 19px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
#view-overview > h2::after { content: "Every client, message and campaign across the agency."; }
#view-dashboard > h2::after { content: "Here's what's happening with your customers today."; }

/* ---------- 7. Surfaces ---------- */
/* One card style: charcoal, hairline border, 18px radius, a faint highlight along the top edge.
   --px / --py are the inner padding, reused below so tables can run edge to edge. */
.panel {
  --px: 20px; --py: 18px;
  background: var(--card); padding: var(--py) var(--px); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-card); margin-bottom: 16px;
  transition: border-color .2s;
}
.panel:hover { border-color: rgba(16, 38, 58, .12); }
@media (max-width: 900px) { .panel { --px: 14px; --py: 14px; } }
/* A bar that only holds controls (filters, a one-line "add" form) is not a card: no box at all. */
.panel:has(> .row:only-child) { background: none; border: none; padding: 0; margin-bottom: 12px; box-shadow: none; }
/* A card inside a card: flat inset block. */
.panel .panel { --px: 16px; --py: 14px; background: rgba(16, 38, 58, .03); border-radius: 14px; margin-bottom: 12px; box-shadow: none; }
/* Warning boxes: the page sets only the border colour inline. */
.panel[style*="border-color"] { border-width: 1px; border-style: solid; background: rgba(251, 191, 36, .06); }
.two-col { gap: 16px; }
.three-col { gap: 16px; }
.section { margin-top: 18px; padding-top: 16px; border-top-color: var(--border); }
.drop { border: 1px dashed var(--border-strong); border-radius: 14px; padding: 22px; background: rgba(16, 38, 58, .02); }

/* Empty states: a soft icon tile, then the message. */
.empty { padding: 40px 16px 44px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.empty .big { display: none; }
.empty::before {
  content: ""; display: block; width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 14px; border: 1px solid var(--border);
  background: rgba(16, 38, 58, .03) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f9588' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.thread-messages:empty::before { content: "Pick a conversation on the left to read and reply."; display: block; text-align: center; color: var(--muted); font-size: 13.5px; margin-top: 18%; }

/* Inline light-theme colours the page JS writes into markup, re-tinted for the dark canvas. */
[style*="background:#fff3cd"] { background: rgba(251, 191, 36, .1) !important; color: var(--amber) !important; border-color: rgba(251, 191, 36, .35) !important; }
[style*="background:#fde2ea"], [style*="background:#fde2e1"] { background: rgba(248, 113, 113, .1) !important; color: var(--red) !important; border-color: rgba(248, 113, 113, .35) !important; }
[style*="background:#fafafc"], [style*="background:#f1f1f1"], [style*="background:#eee"], [style*="background:#fff;"], [style$="background:#fff"] { background: rgba(16, 38, 58, .04) !important; }
[style*="color:#999"], [style*="color:#666"] { color: var(--muted) !important; }

/* ---------- 8. Tables ---------- */
/* Compact rows, lowercase mono header on a faint strip, hairlines between rows, soft hover.
   Inside a card the table runs edge to edge, so the card border is the table border. */
th, td { padding: 11px 12px; border-bottom: 1px solid var(--border); font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
td { font-variant-numeric: tabular-nums; transition: background-color .12s; }
th {
  font-family: var(--mono); color: var(--muted); font-weight: 500; font-size: 11px; letter-spacing: .02em; text-transform: lowercase;
  background: rgba(16, 38, 58, .025); border-bottom: 1px solid var(--border); padding-top: 10px; padding-bottom: 10px;
}
.table-scroll thead th { background: #eef5f6; }
tbody tr:nth-child(even) td { background: transparent; }
tbody tr:hover td { background: rgba(16, 38, 58, .03); }
tr:last-child td { border-bottom: none; }
tr.clickable:hover td { background: rgba(var(--accent-rgb), .06); }
th.sortable:hover, th.sortable.active { color: var(--accent); }
td b { color: var(--text); font-weight: 500; }
.panel:has(> .table-wrap), .panel:has(> table) { overflow: hidden; }
.panel > .table-wrap, .panel > table { margin: 14px calc(-1 * var(--px)) 14px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.panel > table { width: calc(100% + 2 * var(--px)); }
.panel > .table-wrap:first-child, .panel > table:first-child { margin-top: calc(-1 * var(--py)); border-top: none; }
.panel > .table-wrap:last-child, .panel > table:last-child { margin-bottom: calc(-1 * var(--py)); border-bottom: none; }
.panel > .table-wrap th:first-child, .panel > .table-wrap td:first-child, .panel > table th:first-child, .panel > table td:first-child { padding-left: var(--px); }
.panel > .table-wrap th:last-child, .panel > .table-wrap td:last-child, .panel > table th:last-child, .panel > table td:last-child { padding-right: var(--px); }
.section table td, #storeEvents td, #wrHistory td { padding: 7px 10px; }

/* ---------- 9. Metrics ---------- */
/* Like the reference's "Numbers we did not have to explain away": a mono label on top, a big
   number (counted up by /premium.js), a lime hairline bar, then the note. The icon sits top-right. */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 16px; background: none; border: none; perspective: none; }
.stat-grid:empty { display: none; }
.stat-card {
  display: grid; grid-template-columns: 1fr auto; align-content: start; column-gap: 10px;
  padding: 18px 20px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--text); box-shadow: var(--shadow-card);
  --tone: var(--accent-rgb);
  /* The page JS writes a 3D tilt transform inline on mousemove; these cards stay flat. */
  transform: none !important;
  transition: border-color .2s; animation: pmRise .55s var(--ease) backwards;
}
.stat-grid > .stat-card:nth-child(2) { animation-delay: .05s; }
.stat-grid > .stat-card:nth-child(3) { animation-delay: .1s; }
.stat-grid > .stat-card:nth-child(4) { animation-delay: .15s; }
.stat-grid > .stat-card:nth-child(5) { animation-delay: .2s; }
.stat-grid > .stat-card:nth-child(n+6) { animation-delay: .25s; }
.stat-card:hover { border-color: rgba(var(--tone), .35); }
.stat-card::after { display: none; }
.stat-card .ic {
  grid-row: 1; grid-column: 2; margin: 0; width: 28px; height: 28px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px; opacity: 1; transform: none;
  background: rgba(var(--tone), .12); color: rgb(var(--tone)); box-shadow: none;
}
.stat-card .ic svg { width: 15px; height: 15px; display: block; stroke-width: 2; }
.stat-card:hover .ic { transform: none; }
.stat-card .label { grid-row: 1; grid-column: 1; margin: 0; align-self: center; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .02em; text-transform: lowercase; opacity: 1; color: var(--muted); }
.stat-card .num { grid-row: 2; grid-column: 1 / -1; margin: 14px 0 0; font-size: 30px; font-weight: 600; letter-spacing: -.035em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--text); }
.stat-card:hover .num { transform: none; }
.stat-card .num::after { content: ""; display: block; height: 2px; width: 28px; margin-top: 12px; border-radius: 2px; background: rgb(var(--tone)); box-shadow: 0 0 10px rgba(var(--tone), .6); transform-origin: left; animation: pmGrowX .9s var(--ease) .2s backwards; }
.stat-card .sub { grid-row: 3; grid-column: 1 / -1; margin-top: 8px; font-size: 12px; opacity: 1; color: var(--muted); }
.stat-card .sub:empty { display: none; }
.c1 { --tone: var(--accent-rgb); }
.c2 { --tone: 124, 58, 237; }
.c3 { --tone: 8, 145, 178; }
.c4 { --tone: 37, 99, 235; }
.c5 { --tone: 217, 119, 6; }
.c6 { --tone: 5, 150, 105; }
.c7 { --tone: 219, 39, 119; }

/* Chart: lime line for outbound with a soft glow, a quiet grey line for inbound, dashed hairline
   grid, legend under the title. The chart draws in from the left when the page opens. */
.panel:has(> .chart) { display: flex; flex-direction: column; }
.panel:has(> .chart) > .legend { order: 1; margin: -4px 0 14px; }
.panel:has(> .chart) > .chart { order: 2; }
.chart { height: 200px; }
.legend { gap: 14px; font-family: var(--mono); font-size: 11px; text-transform: lowercase; }
.legend i { width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.legend i[style*="#1a7fd9"] { background: #93a8b8 !important; }
#trendChart line { stroke: rgba(16, 38, 58, .06); stroke-dasharray: 3 3; }
#trendChart line[stroke="#e6e7ee"] { stroke: rgba(16, 38, 58, .1); stroke-dasharray: none; }
#trendChart text { font-family: var(--mono); }
#trendChart text[fill="#7a7a8c"] { fill: var(--faint); }
#trendChart path[stroke="#1a7fd9"] { stroke: #93a8b8; }
#trendChart path[stroke-width="2.5"] { filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .5)); }
#trendChart circle[fill="#fff"] { fill: var(--bg); }
#trendChart rect[fill="#11131a"] { fill: var(--accent); }
#trendChart rect[fill="#11131a"] + text { fill: var(--on-accent); }
#trendChart rect.hit { transition: fill .15s; }
#trendChart rect.hit:hover { fill: rgba(var(--accent-rgb), .07); }
.usage-bar { height: 6px; background: rgba(16, 38, 58, .08); border-radius: 999px; }
.usage-bar i { border-radius: 999px; background: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), .5); }
.usage-bar i.warn { background: var(--amber); box-shadow: none; }
.usage-bar i.over { background: var(--red); box-shadow: none; }

/* ---------- 10. Badges, chips, code ---------- */
/* Status badges: mono lowercase pills with a translucent tint, a matching hairline and a leading
   dot. In-progress states pulse like the reference's "running". */
.pill {
  display: inline-block; padding: 1px 9px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .01em; text-transform: lowercase; line-height: 18px;
}
.pill:not([style])::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; opacity: .8; vertical-align: 1px; }
.pill, .pill.none, .pill.draft, .pill.paused, .pill.import, .pill.manual, .pill.store, .pill.call, .pill.upload, .pill.webhook, .pill.dismissed, .pill.open, .pill.skipped, .pill.unsubscribed { background: rgba(16, 38, 58, .06); color: #4b6578; border-color: rgba(16, 38, 58, .1); }
.pill.active, .pill.ok, .pill.sent, .pill.approved, .pill.done, .pill.paid, .pill.fulfilled, .pill.recovered, .pill.converted, .pill.confirmed, .pill.completed, .pill.whatsapp { background: rgba(var(--accent-rgb), .12); color: var(--accent); border-color: rgba(var(--accent-rgb), .3); }
.pill.pending, .pill.warn, .pill.sending, .pill.scheduled, .pill.processing, .pill.reminded, .pill.proposed, .pill.seated, .pill.warm { background: rgba(251, 191, 36, .1); color: var(--amber); border-color: rgba(251, 191, 36, .3); }
.pill.suspended, .pill.bad, .pill.deleted, .pill.failed, .pill.rejected, .pill.cancelled, .pill.refunded, .pill.no_show, .pill.hot, .pill.blacklisted { background: rgba(248, 113, 113, .1); color: var(--red); border-color: rgba(248, 113, 113, .3); }
.pill.cold, .pill.telegram { background: rgba(125, 211, 252, .1); color: var(--blue); border-color: rgba(125, 211, 252, .3); }
.pill.human { background: var(--text); color: var(--bg); border-color: var(--text); }
.pill.sending::before, .pill.processing::before, .pill.scheduled::before { animation: pmBlink 1.4s ease-in-out infinite; }
.chip { border-radius: 999px; padding: 1px 9px; font-family: var(--mono); font-size: 11px; font-weight: 500; line-height: 18px; background: rgba(var(--accent-rgb), .12); color: var(--accent); }
.chip-add { border-radius: 999px; border-color: var(--border-strong); color: var(--muted); }
code.mini { background: rgba(16, 38, 58, .06); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; font-family: var(--mono); font-size: 11.5px; color: var(--text-2); white-space: nowrap; }
/* Client pop-up, "Recent activity": time | action code | detail. The code never wraps mid-word; the
   JSON detail takes the remaining width and wraps on its own. */
#modal .section table { width: 100%; table-layout: auto; }
#modal .section table td:first-child { width: 1%; white-space: nowrap; vertical-align: top; }
#modal .section table td:nth-child(2) { width: 1%; white-space: nowrap; vertical-align: top; padding-right: 14px; }
#modal .section table td:last-child { word-break: break-word; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; }
#modal .section table td:last-child:empty::before { content: "—"; color: var(--faint); }
pre.code, .embed-box { background: #09121d; color: #d6e3e8; border: 1px solid var(--border); border-radius: 12px; font-family: var(--mono); }
.onceonly { background: rgba(251, 191, 36, .08); border: 1px solid rgba(251, 191, 36, .35); color: var(--amber); border-radius: 10px; font-family: var(--mono); font-size: 13px; padding: 10px 12px; }
.kv { gap: 8px 14px; }
.kv b { font-weight: 500; color: var(--muted); }

/* ---------- 11. Tabs ---------- */
/* Segmented pills: the current one is a lime pill, the rest are quiet text. */
.tabs { width: 100%; gap: 4px; padding: 0; background: none; border-radius: 0; border-bottom: none; margin-bottom: 16px; align-items: center; }
.tabs button {
  padding: 6px 13px; margin: 0; border: 1px solid transparent; border-radius: 999px; background: none; box-shadow: none;
  font-size: 12.5px; font-weight: 500; line-height: 18px; color: var(--muted);
  transition: color .15s, background .15s, border-color .15s;
}
.tabs button:hover { color: var(--text); background: rgba(16, 38, 58, .06); border-color: transparent; }
.tabs button.active { background: var(--accent); color: var(--on-accent); font-weight: 600; border-color: transparent; box-shadow: none; }
/* An action button that lives in a tab row (Follow-ups → "Generate now") stays a real button. */
.tabs > button.btn { margin-left: auto; padding: 6px 13px; border: none; border-radius: 999px; background: var(--accent); color: var(--on-accent); }
.tabs > button.btn:hover { color: var(--on-accent); background: var(--accent); border: none; }

/* ---------- 12. Switch ---------- */
.switch { width: 36px; height: 20px; }
.slider { background: rgba(16, 38, 58, .16); border-radius: 999px; transition: background .2s; }
.slider:before { height: 16px; width: 16px; left: 2px; top: 2px; background: #fff; box-shadow: 0 1px 2px rgba(16, 38, 58, .3); transition: transform .25s var(--ease), background .2s; }
.switch input:checked + .slider { background: var(--accent); box-shadow: 0 0 12px rgba(var(--accent-rgb), .35); }
.switch input:checked + .slider:before { transform: translateX(16px); background: var(--on-accent); }
.switch input:focus-visible + .slider { box-shadow: var(--ring); }
.switch input:disabled + .slider { opacity: .45; cursor: not-allowed; }

/* ---------- 13. Floating layers: toast, pop-up, drawer ---------- */
.toast { background: #10263a; color: #fff; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; padding: 10px 16px; font-size: 13px; font-weight: 500; box-shadow: var(--shadow-lg); animation: pmPop .35s var(--ease); }
.toast.ok { border-left: 3px solid var(--accent); }
.toast.err { border-left: 3px solid var(--red); }
#modal { background: rgba(16, 38, 58, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 56px 16px; }
#modal .box { background: var(--card); color: var(--text); border-radius: 20px; padding: 24px; border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); }
#modal .box h3 { font-size: 17px; letter-spacing: -.02em; }
@media (max-width: 900px) { #modal { padding: 20px 12px; } #modal .box { padding: 18px 16px; } }
#drawerBackdrop { background: rgba(16, 38, 58, .4); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
#drawer { background: var(--card); border-left: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); }
#drawer .dhead, #drawer .dbody { padding: 20px 22px; }
#drawer .dhead { background: var(--card); border-bottom-color: var(--border); }
#drawer .close-btn { background: rgba(16, 38, 58, .06); color: var(--muted); border-radius: 50%; width: 28px; height: 28px; }
#drawer .close-btn:hover { background: rgba(16, 38, 58, .12); color: var(--text); }
#drawer .davatar { width: 48px; height: 48px; font-size: 16px; font-weight: 600; background: rgba(var(--accent-rgb), .14); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .3); }
#drawer .dstat { border-bottom-color: var(--border); padding: 9px 0; }
.bulk-bar { background: #10263a; border: 1px solid rgba(255, 255, 255, .1); color: #fff; border-radius: 999px; box-shadow: var(--shadow-md); }
.bulk-bar b { color: var(--accent); }
.bulk-bar button { border-radius: 999px; }

/* ---------- 14. Admin: Plans ---------- */
/* Pricing cards like the reference: plan name as a mono label, big price, limit, a hairline, the
   feature list with ticks, then the two actions. The middle plan of three is the featured one:
   lime border and a lime glow. */
.plans-grid { grid-template-columns: repeat(auto-fit, minmax(264px, 1fr)); gap: 16px; padding: 0; }
.plan-card {
  --px: 22px; --py: 22px; background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); margin-bottom: 0;
  transform: none !important; transition: border-color .2s; animation: pmRise .55s var(--ease) backwards;
}
.plan-card:hover { border-color: rgba(16, 38, 58, .16); box-shadow: var(--shadow-card); }
.plan-card::before, .plan-card::after { display: none; }
.plan-card .pc-head { margin-bottom: 0; }
.plan-card .pc-head h3 { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .02em; text-transform: lowercase; color: var(--muted); }
.plan-card .pc-price { font-size: 28px; font-weight: 600; letter-spacing: -.035em; line-height: 1.15; margin: 12px 0 2px; }
.plan-card:hover .pc-price { transform: none; }
.plan-card .pc-price small { color: var(--muted); }
.plan-card .pc-limit { font-size: 13px; padding-bottom: 16px; margin-bottom: 12px; border-bottom: 1px solid var(--border); color: var(--muted); }
.plan-card ul.pc-features { margin-bottom: 8px; }
.plan-card ul.pc-features li { padding: 6px 0; font-size: 13.5px; gap: 10px; animation: none; opacity: 1; }
.plan-card ul.pc-features li .pc-dot { width: 18px; height: 18px; font-size: 10px; font-weight: 700; }
.plan-card:hover ul.pc-features li .pc-dot { transform: none; }
.plan-card ul.pc-features li.on { color: var(--text); }
.plan-card ul.pc-features li.on .pc-dot { background: rgba(var(--accent-rgb), .14); color: var(--accent); box-shadow: none; }
.plan-card ul.pc-features li.off { color: var(--faint); }
.plan-card ul.pc-features li.off .pc-dot { background: rgba(16, 38, 58, .06); color: var(--faint); }
.plan-card .pc-actions { border-top: none; padding-top: 12px; gap: 8px; }
.plan-card .pc-actions button { padding: 6px 12px; font-size: 13px; }
.plan-card .pc-actions button:hover { transform: none; }
.plan-card.tier-1 { border-color: rgba(var(--accent-rgb), .45); box-shadow: var(--shadow-card), 0 0 0 1px rgba(var(--accent-rgb), .15), 0 20px 50px -24px rgba(var(--accent-rgb), .5); }
.plan-card.tier-1:hover { border-color: rgba(var(--accent-rgb), .7); }
.plan-card.tier-1 .pc-head h3 { color: var(--accent); }
.plan-card.tier-1 .pc-head h3::before { content: "● "; }

/* ---------- 15. Admin: System Health ---------- */
#healthConfig:has(.check)::before {
  content: "all required settings are in place"; display: block; margin-bottom: 4px; padding: 9px 12px;
  border-radius: 999px; border: 1px solid rgba(var(--accent-rgb), .3); background: rgba(var(--accent-rgb), .1); color: var(--accent); font-family: var(--mono); font-size: 12px; font-weight: 500;
}
#healthConfig:has(.dot.bad)::before { content: "some settings are missing. see the red rows below."; border-color: rgba(248, 113, 113, .35); background: rgba(248, 113, 113, .1); color: var(--red); }
.check { padding: 12px 0; gap: 12px; align-items: flex-start; border-bottom-color: var(--border); }
.check > div { flex: 1; min-width: 0; line-height: 1.5; }
.check > div > .pill { float: right; margin-left: 10px; }
.check code.mini { background: none; border: none; padding: 0; font-size: 12.5px; font-weight: 500; color: var(--text); }
.check .dot { width: 28px; height: 28px; border-radius: 9px; margin-top: 1px; display: inline-flex; align-items: center; justify-content: center; }
.check .dot::before { content: ""; width: 13px; height: 13px; background: currentColor; -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
.check .dot.ok { background: rgba(var(--accent-rgb), .14); color: var(--accent); }
.check .dot.warn { background: rgba(251, 191, 36, .12); color: var(--amber); }
.check .dot.warn::before { -webkit-mask-image: var(--i-alert); mask-image: var(--i-alert); }
.check .dot.bad { background: rgba(248, 113, 113, .12); color: var(--red); }
.check .dot.bad::before { -webkit-mask-image: var(--i-x); mask-image: var(--i-x); }
#healthProcess, #healthScheduler { grid-template-columns: 1fr auto; gap: 0; font-size: 13.5px; }
#healthProcess > *, #healthScheduler > * { padding: 10px 0; border-bottom: 1px solid var(--border); }
#healthProcess > :nth-last-child(-n+2), #healthScheduler > :nth-last-child(-n+2) { border-bottom: none; }
#healthProcess > span, #healthScheduler > span { text-align: right; font-family: var(--mono); font-size: 12.5px; color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------- 16. Admin: Agents grid ---------- */
#agentsOverviewHead th { text-align: center; color: var(--text-2); }
#agentsOverviewHead th:first-child { text-align: left; color: var(--muted); }
#agentsOverviewBody td { padding-top: 13px; padding-bottom: 13px; text-align: center; }
#agentsOverviewBody td:first-child { text-align: left; }
#agentsOverviewBody td + td { border-left: 1px solid var(--border); }

/* ---------- 17. Dashboard pieces ---------- */
#gettingStarted { background: var(--card); }
#gettingStarted .gs-dot { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--border-strong); }
#gettingStarted .gs-dot.done { border-color: var(--accent); background: var(--accent); }
#gettingStarted .gs-dot.done::before { content: ""; width: 11px; height: 11px; background: var(--on-accent); -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
#attention > div + div { border-top: 1px solid var(--border); }
#attention > div { line-height: 1.7; font-size: 13.5px; }
.channel { gap: 12px; padding: 11px 0; line-height: 1.5; border-bottom-color: var(--border); }
.channel .icon { width: 32px; height: 32px; border-radius: 10px; font-size: 13px; font-weight: 600; }
.brief { color: var(--text-2); font-size: 13.5px; }
.cstep .cnum { width: 22px; height: 22px; font-size: 12px; font-weight: 600; background: var(--accent); color: var(--on-accent); }
.cstep .ctitle { font-weight: 500; }
.cnote { border-radius: 12px; background: rgba(var(--accent-rgb), .08); border-color: rgba(var(--accent-rgb), .3); color: var(--text-2); }
.step-row .n { background: rgba(var(--accent-rgb), .12); color: var(--accent); border: none; font-weight: 600; }

/* ---------- 18. Portal: inbox ---------- */
/* Three-pane layout in one card: list on the left with a lime-tinted selected row, the thread in
   the middle on the canvas colour with lime bubbles (black text) for outbound, a dark compose bar. */
.inbox-shell { background: var(--card); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.conv-list { width: 288px; border-right-color: var(--border); }
.conv-item { border-bottom: 1px solid var(--border); padding: 12px 14px; }
.conv-item:hover { background: rgba(16, 38, 58, .03); }
.conv-item.active { background: rgba(var(--accent-rgb), .08); box-shadow: inset 2px 0 0 var(--accent); }
.avatar { width: 36px; height: 36px; font-size: 13px; font-weight: 600; background: rgba(var(--accent-rgb), .14); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .25); }
.avatar.tg { background: rgba(125, 211, 252, .14); color: var(--blue); box-shadow: inset 0 0 0 1px rgba(125, 211, 252, .3); }
.avatar .sc { border-color: var(--card); }
.conv-meta b { font-weight: 600; font-size: 13px; }
.conv-meta .preview { font-size: 12px; }
.unread { background: var(--accent); color: var(--on-accent); border-radius: 999px; font-family: var(--mono); font-weight: 600; font-size: 10.5px; line-height: 16px; padding: 0 6px; min-width: 16px; text-align: center; }
.thread-header { padding: 12px 16px; background: var(--card); border-bottom-color: var(--border); }
.thread-header b { font-weight: 600; }
.lead-box { background: rgba(var(--accent-rgb), .06); border-bottom-color: var(--border); padding: 10px 16px; }
.lead-box b { color: var(--accent); }
.thread-messages { background: var(--bg); padding: 16px; }
.bubble { border-radius: 16px; padding: 10px 14px; font-size: 13.5px; line-height: 1.5; box-shadow: none; }
.bubble.out { background: var(--accent); color: var(--on-accent); border: none; border-bottom-right-radius: 4px; }
.bubble.out .ts { color: rgba(255, 255, 255, .7); }
.bubble.out a, .bubble.out b { color: var(--on-accent); text-decoration: underline; }
.bubble.in { background: var(--card-2); border: 1px solid var(--border); color: var(--text); border-bottom-left-radius: 4px; }
.bubble.call { background: rgba(125, 211, 252, .1); border: 1px solid rgba(125, 211, 252, .3); color: var(--text); }
.compose { padding: 12px; background: var(--card); border-top-color: var(--border); }
.compose input[type=text] { border-radius: 999px; padding-left: 14px; }

/* ---------- 19. Portal: agents, pickers, assistants ---------- */
/* Agent cards: charcoal rows with a tinted icon tile. The page prints an emoji in the icon slot;
   it is hidden and replaced, in card order: support, scoring, follow-up, briefing, growth. */
.agent-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-card); transition: border-color .2s; }
.agent-card:hover { border-color: rgba(16, 38, 58, .16); box-shadow: var(--shadow-card); transform: none; }
.agent-card.open { border-color: rgba(var(--accent-rgb), .4); }
.agent-card .body { border-top-color: var(--border); }
.agent-card .head .ic { width: 40px; height: 40px; border-radius: 12px; font-size: 0; background: rgba(var(--tone, 95, 122, 142), .12); color: rgb(var(--tone, 95, 122, 142)); }
.agent-card .head .ic::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--i-message) center / contain no-repeat; mask: var(--i-message) center / contain no-repeat; }
.agent-card:nth-child(1) { --tone: var(--accent-rgb); }
.agent-card:nth-child(2) { --tone: 8, 145, 178; }
.agent-card:nth-child(2) .head .ic::before { -webkit-mask-image: var(--i-target); mask-image: var(--i-target); }
.agent-card:nth-child(3) { --tone: 37, 99, 235; }
.agent-card:nth-child(3) .head .ic::before { -webkit-mask-image: var(--i-reply); mask-image: var(--i-reply); }
.agent-card:nth-child(4) { --tone: 124, 58, 237; }
.agent-card:nth-child(4) .head .ic::before { -webkit-mask-image: var(--i-clipboard); mask-image: var(--i-clipboard); }
.agent-card:nth-child(5) { --tone: 5, 150, 105; }
.agent-card:nth-child(5) .head .ic::before { -webkit-mask-image: var(--i-trend); mask-image: var(--i-trend); }
.agent-card .head .t b { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.agent-card .head .t span { font-size: 12.5px; line-height: 1.5; }
.platform { background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: none; transform: none !important; transition: border-color .15s, box-shadow .15s; }
.platform:hover { border-color: var(--border-strong); box-shadow: none; }
.platform.sel { border-color: var(--accent); box-shadow: var(--ring); }
.platform b { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
/* Assistant buttons: the AI helper is a lime 48px tile, the command bar is a dark one above it.
   Both panels are 18px-radius charcoal cards. */
#supportChatBtn, #commandChatBtn { width: 48px; height: 48px; border-radius: 16px; font-size: 0; display: grid; place-items: center; }
#supportChatBtn { background: var(--accent); box-shadow: var(--glow); }
#commandChatBtn { background: var(--card-2); border: 1px solid var(--border-strong); bottom: 82px; box-shadow: var(--shadow-lg); }
#supportChatBtn::before, #commandChatBtn::before { content: ""; width: 20px; height: 20px; background: var(--on-accent); -webkit-mask: var(--i-sparkles) center / contain no-repeat; mask: var(--i-sparkles) center / contain no-repeat; }
#commandChatBtn::before { background: var(--accent); -webkit-mask-image: var(--i-zap); mask-image: var(--i-zap); }
#supportChatPanel, #commandChatPanel { background: var(--card); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
#supportChatPanel { bottom: 82px; }
#commandChatPanel { bottom: 142px; }
#supportChatPanel .sc-head { background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 13.5px; }
#supportChatPanel .sc-head .close-btn { background: rgba(0, 0, 0, .15); color: var(--on-accent); }
#commandChatPanel .sc-head { background: var(--card-2); color: var(--text); border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13.5px; }
#supportChatPanel .sc-body, #commandChatPanel .sc-body { background: var(--bg); }
#supportChatPanel .sc-msg, #commandChatPanel .sc-msg { border-radius: 14px; }
#supportChatPanel .sc-msg.user, #commandChatPanel .sc-msg.user { background: var(--accent); color: var(--on-accent); }
#supportChatPanel .sc-msg.assistant, #commandChatPanel .sc-msg.assistant { background: var(--card-2); border-color: var(--border); color: var(--text); }
#supportChatPanel .sc-msg.escalate { background: rgba(251, 191, 36, .1); border-color: rgba(251, 191, 36, .35); }
#commandChatPanel .sc-msg.err { background: rgba(248, 113, 113, .1); border-color: rgba(248, 113, 113, .35); }
#supportChatPanel .sc-faq, #commandChatPanel .sc-example { border: 1px solid var(--border-strong); background: rgba(16, 38, 58, .05); color: var(--text); border-radius: 999px; }
#supportChatPanel .sc-faq:hover, #commandChatPanel .sc-example:hover { background: rgba(var(--accent-rgb), .12); border-color: rgba(var(--accent-rgb), .4); }
#supportChatPanel .sc-input, #commandChatPanel .sc-input { background: var(--card); border-top-color: var(--border); }
#supportChatPanel .sc-input input, #commandChatPanel .sc-input input { border-radius: 999px; }
#supportChatPanel .sc-faqs-label, #commandChatPanel .sc-examples-label { font-family: var(--mono); text-transform: lowercase; font-weight: 500; letter-spacing: .02em; }
#commandChatPanel .sc-actions { border-top-color: var(--border); }

/* ---------- 20. Motion ---------- */
/* From the reference: things rise in with a stagger when a page opens, bars grow, the chart draws
   left to right, live dots pulse, the aurora breathes. Nothing here animates content the page
   re-draws on a timer or on every keystroke (inbox list, chat bubbles, table rows), so nothing
   flickers. Entrances use fill-mode "backwards" so a finished animation never blocks a hover
   state. Section 21 turns it all off for anyone who prefers reduced motion. */
@keyframes pmFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pmRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pmPop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pmGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pmDraw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pmPulse { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .6); } 70% { box-shadow: 0 0 0 7px rgba(var(--accent-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); } }
@keyframes pmBlink { 0%, 100% { opacity: .9; } 50% { opacity: .25; } }
@keyframes pmAurora {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-3%, 2.5%, 0) scale(1.06); }
  100% { transform: translate3d(2.5%, -2%, 0) scale(1.02); }
}
/* Opening a page: its sections rise in, one after another. */
.view.active > * { animation: pmRise .55s var(--ease) backwards; }
.view.active > :nth-child(2) { animation-delay: .05s; }
.view.active > :nth-child(3) { animation-delay: .1s; }
.view.active > :nth-child(4) { animation-delay: .15s; }
.view.active > :nth-child(5) { animation-delay: .2s; }
.view.active > :nth-child(n+6) { animation-delay: .25s; }
.usage-bar i { transform-origin: left center; animation: pmGrowX .9s var(--ease) both; }
#trendChart { animation: pmDraw 1.1s var(--ease) .15s both; }
.check, .agent-card { animation: pmRise .45s var(--ease) backwards; }
.check:nth-child(2), .agent-card:nth-child(2) { animation-delay: .05s; }
.check:nth-child(3), .agent-card:nth-child(3) { animation-delay: .1s; }
.check:nth-child(4), .agent-card:nth-child(4) { animation-delay: .15s; }
.check:nth-child(5), .agent-card:nth-child(5) { animation-delay: .2s; }
.check:nth-child(n+6), .agent-card:nth-child(n+6) { animation-delay: .25s; }
.plans-grid > .plan-card:nth-child(2) { animation-delay: .07s; }
.plans-grid > .plan-card:nth-child(3) { animation-delay: .14s; }
#modal.show { animation: pmFadeIn .18s ease-out; }
#modal .box { animation: pmPop .35s var(--ease); }
#supportChatPanel.show, #commandChatPanel.show { animation: pmPop .3s var(--ease); transform-origin: bottom right; }
#supportChatBtn, #commandChatBtn { transition: transform .25s var(--ease), box-shadow .2s; }
#supportChatBtn:hover, #commandChatBtn:hover { transform: scale(1.06) translateY(-1px); }
/* Numbers that are counting up (set by /premium.js) get a brief lime tint. */
.stat-card .num.is-counting { color: var(--accent); transition: color .4s; }

/* ---------- 21. Motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}