/* Erianux back-office console shell.
   Rebuilt 2026-08-28 on the owner's direction to match TailAdmin v2 free
   (MIT, TailAdmin) exactly: Outfit type, the #465fff brand ramp, their gray
   scale, a 290px white sidebar over a gray-50 canvas, rounded-2xl cards,
   badge chips and 4px brand focus rings. Same class vocabulary as before -
   the admin console and the affiliate dashboard are painted by script via
   innerHTML, so these are global on purpose and nothing structural moved.

   Written as plain CSS on our own tokens: the one remote fetch is the
   Outfit face from Google Fonts; no framework, no CDN scripts, nothing
   that phones home beyond that - /legal/cookies still holds. */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap");

  body:has(.console) {
    /* TailAdmin v2 palette, verbatim */
    --con-brand-50:  #ecf3ff;
    --con-brand-100: #dde9ff;
    --con-brand-500: #465fff;
    --con-brand-600: #3641f5;
    --con-g-25:  #fcfcfd; --con-g-50:  #f9fafb; --con-g-100: #f2f4f7;
    --con-g-200: #e4e7ec; --con-g-300: #d0d5dd; --con-g-400: #98a2b3;
    --con-g-500: #667085; --con-g-600: #475467; --con-g-700: #344054;
    --con-g-800: #1d2939; --con-g-900: #101828;
    --con-ok-50: #ecfdf3;  --con-ok-600: #039855;
    --con-err-50: #fef3f2; --con-err-500: #f04438; --con-err-600: #d92d20;
    --con-wrn-50: #fffaeb; --con-wrn-600: #dc6803;
    --con-sh-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    --con-sh-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
    --con-ring: 0px 0px 0px 4px rgba(70, 95, 255, 0.12);
    --con-font: "Outfit", "Segoe UI", Helvetica, Arial, sans-serif;

    /* the old shell's names, kept live for anything that reads them */
    --con-bg: var(--con-g-50); --con-surface: #ffffff; --con-surface-2: #ffffff;
    --con-rule: var(--con-g-200); --con-rule-lit: var(--con-g-300);
    --con-text: var(--con-g-800); --con-text-2: var(--con-g-600); --con-muted: var(--con-g-500);
    --con-accent: var(--con-brand-500); --con-accent-lit: var(--con-brand-600);
    --con-accent-tint: var(--con-brand-50);
    --con-up: var(--con-ok-600); --con-down: var(--con-wrn-600);
    --con-r: 0.75rem; --con-r-sm: 0.5rem; --con-r-lg: 1rem; --con-rail: 290px;

    /* ── one surface, one ink (owner, 2026-09-02) ──────────────────────
       The affiliate dashboard's own <style> was written against the SITE's
       DARK palette (global.css: --ink #eceef0, --rule #1a1d21). This shell
       went light on 2026-08-28, so those rules were painting near-white ink
       on a white card: the tier percentages, the tier names, the referral
       link and code, and the section labels were all invisible. Rebinding
       the semantic names onto the console ramp fixes every one of them at
       the token instead of rule by rule — and lets the dark block below
       flip the whole dashboard in one place. */
    --ink:         var(--con-g-800);
    --ink-mid:     var(--con-g-600);
    --ink-faint:   var(--con-g-500);
    --rule:        var(--con-g-200);
    --rule-lit:    var(--con-g-300);
    --bg:          var(--con-g-50);
    --bg-lift:     var(--con-surface);
    --crimson:     #a31e22;
    --crimson-lit: #c42232;
    color-scheme: light;
  }

  /* ── dark mode ─────────────────────────────────────────────────────
     Set by the toggle in the dashboard topbar (html[data-theme]). Only the
     ramp is redefined: every rule above reads it through a token, so the
     shell, the cards, the tables and the dialogs all follow without a
     second copy of the stylesheet. The brand blue and the crimson are
     lifted for a dark ground — the light values fail contrast on it. */
  html[data-theme="dark"] body:has(.console) {
    --con-brand-50:  #1a2040; --con-brand-100: #202a56;
    --con-brand-500: #7f96ff; --con-brand-600: #93a6ff;
    --con-g-25:  #0d0f13; --con-g-50:  #101318; --con-g-100: #161a21;
    --con-g-200: #232833; --con-g-300: #2f3542; --con-g-400: #6a7382;
    --con-g-500: #98a2b3; --con-g-600: #b8bfca; --con-g-700: #d4d9e1;
    --con-g-800: #eceef2; --con-g-900: #ffffff;
    --con-ok-50:  rgba(61, 220, 151, 0.16); --con-ok-600:  #3ddc97;
    --con-err-50: rgba(255, 106, 94, 0.16); --con-err-500: #ff6a5e; --con-err-600: #ff8579;
    --con-wrn-50: rgba(245, 166, 35, 0.16); --con-wrn-600: #f5a623;
    --con-surface: #161a21; --con-surface-2: #1b202a;
    --con-sh-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
    --con-sh-sm: 0px 1px 3px 0px rgba(0, 0, 0, 0.55), 0px 1px 2px 0px rgba(0, 0, 0, 0.4);
    --con-ring: 0px 0px 0px 4px rgba(127, 150, 255, 0.22);
    --crimson: #c42232; --crimson-lit: #e5424f;
    color-scheme: dark;
  }

  /* The scheme has to be declared on the ROOT as well: browsers read it from
     there when they paint native form chrome — the dropdown popup, the scroll
     bars, the date pickers. On <body> alone the popup kept the light scheme. */
  html[data-theme="dark"] { color-scheme: dark; }

  /* ── dropdown lists ────────────────────────────────────────────────
     A <select> popup is drawn by the OS, not by the rules that colour the
     closed control, so in dark mode the options stayed near-black on near-
     black and only the highlighted row was readable (owner, 2026-09-02).
     Colouring option/optgroup explicitly fixes Windows and Linux; the
     color-scheme above covers macOS, where option colours are ignored. */
  body:has(.console) select option,
  body:has(.console) select optgroup {
    background-color: var(--con-surface);
    color: var(--con-g-800);
  }
  body:has(.console) select option:checked,
  body:has(.console) select option:hover {
    background-color: var(--con-brand-500);
    color: #fff;
  }
  /* The closed control, wherever a page has not already styled it. */
  body:has(.console) select { color: var(--con-g-800); }

  /* ── gate ───────────────────────────────────────────────────────── */
  .gate { margin-bottom: 24px; font-family: var(--con-font); }
  .gate-box { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; border: 1px solid var(--con-g-200); border-radius: var(--con-r-lg); padding: 24px; background: var(--con-surface); box-shadow: var(--con-sh-sm); }
  .gate-title { margin: 0; font-family: var(--con-font); font-weight: 600; font-size: 1.15rem; color: var(--con-g-800); }
  .gate-sub { margin: 4px 0 0; color: var(--con-g-500); }
  .tok-in { background: var(--con-surface); border: 1px solid var(--con-g-300); border-radius: var(--con-r-sm); color: var(--con-g-800); font: inherit; font-family: var(--con-font); padding: 10px 14px; min-width: 300px; flex: 1; transition: border-color .15s, box-shadow .15s; }
  .tok-in::placeholder { color: var(--con-g-400); }
  .tok-in:focus-visible { outline: none; border-color: var(--con-brand-500); box-shadow: var(--con-ring); }
  .tok-go { background: var(--con-brand-500); border: 1px solid var(--con-brand-500); border-radius: var(--con-r-sm); color: #fff; font-family: var(--con-font); font-size: 0.82rem; font-weight: 600; padding: 11px 20px; cursor: pointer; box-shadow: var(--con-sh-xs); transition: background-color .15s; }
  .tok-go:hover { background: var(--con-brand-600); border-color: var(--con-brand-600); }
  .tok-msg { color: var(--con-err-600); }

  /* ── shell: white 290px sidebar over the gray-50 canvas ─────────── */
  .console { display: grid; grid-template-columns: var(--con-rail) minmax(0, 1fr); border: 1px solid var(--con-g-200); border-radius: var(--con-r-lg); overflow: hidden; background: var(--con-g-50); font-family: var(--con-font); font-size: 14px; line-height: 1.4286; min-height: 78vh; box-shadow: var(--con-sh-sm); }
  .side { display: flex; flex-direction: column; border-right: 1px solid var(--con-g-200); background: var(--con-surface); }
  .side-brand { display: flex; align-items: center; gap: 12px; padding: 22px 24px; }
  .brand-mark { width: 16px; height: 16px; border: 1px solid var(--con-brand-500); transform: rotate(45deg); position: relative; flex: none; }
  .brand-mark::after { content: ""; position: absolute; inset: 4.5px; background: var(--con-brand-500); }
  .brand-word { font-family: var(--con-font); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--con-g-900); }
  .side-nav { display: grid; padding: 8px 16px 16px; gap: 4px; align-content: start; }
  .nav-group { font-family: var(--con-font); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--con-g-400); padding: 18px 12px 8px; margin: 0; }
  .nav-group:first-child { padding-top: 6px; }
  .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--con-r-sm); color: var(--con-g-700); font-size: 0.875rem; font-weight: 500; border-left: 0; text-decoration: none; transition: color .15s, background-color .15s; }
  .nav-item svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; flex: none; opacity: .85; color: var(--con-g-500); }
  .nav-item:hover { color: var(--con-g-900); background: var(--con-g-100); }
  .nav-item.is-on { color: var(--con-brand-500); background: var(--con-brand-50); }
  .nav-item.is-on svg { opacity: 1; color: var(--con-brand-500); }
  .nav-n { margin-left: auto; font-family: var(--con-font); font-size: 0.72rem; font-weight: 500; color: var(--con-g-600); background: var(--con-g-100); border-radius: 999px; padding: 2px 9px; }
  .nav-item.is-on .nav-n { color: var(--con-brand-600); background: var(--con-brand-100); }
  .side-foot { margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--con-g-200); }
  .who-mark { width: 30px; height: 30px; border: 1px solid var(--con-brand-500); transform: rotate(45deg); flex: none; position: relative; }
  .who-mark::after { content: ""; position: absolute; inset: 9px; background: var(--con-brand-500); }
  .side-foot-id { display: grid; gap: 1px; min-width: 0; }
  .side-foot-name { color: var(--con-g-800); font-size: 0.875rem; font-weight: 600; }
  .side-foot-meta { color: var(--con-g-500); font-size: 0.72rem; }

  /* ── main column ────────────────────────────────────────────────── */
  .main { min-width: 0; display: flex; flex-direction: column; background: var(--con-g-50); }
  .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 24px; border-bottom: 1px solid var(--con-g-200); background: var(--con-surface); position: sticky; top: 0; z-index: 5; }
  .top-crumb { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--con-g-500); margin: 0 0 4px; font-family: var(--con-font); letter-spacing: 0; }
  .top-crumb b { color: var(--con-g-700); font-weight: 500; }
  .top-title { color: var(--con-g-900); font-family: var(--con-font); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; margin: 0; }
  .top-sub { color: var(--con-g-500); margin: 3px 0 0; font-size: 0.8rem; }
  .top-right { display: flex; align-items: center; gap: 10px; }
  .status-line { color: var(--con-g-500); font-size: 0.78rem; }
  .lock, .refresh { background: var(--con-surface); border: 1px solid var(--con-g-300); border-radius: var(--con-r-sm); color: var(--con-g-700); padding: 8px 14px; cursor: pointer; font-family: var(--con-font); font-size: 0.8rem; font-weight: 500; box-shadow: var(--con-sh-xs); transition: background-color .15s, color .15s; }
  .lock { margin-left: auto; }
  .lock:hover, .refresh:hover { background: var(--con-g-50); color: var(--con-g-900); }

  /* ── content ────────────────────────────────────────────────────── */
  .tab { display: grid; gap: 20px; padding: 24px; align-content: start; }
  .tab[hidden] { display: none; }
  .cards { display: grid; gap: 20px; }
  .kpis { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }
  .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .card { background: var(--con-surface); border: 1px solid var(--con-g-200); border-radius: var(--con-r-lg); padding: 20px 24px; display: grid; align-content: start; gap: 14px; min-width: 0; }
  .card[hidden] { display: none; }
  .card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--con-g-100); }
  .card-title { color: var(--con-g-800); font-size: 1rem; font-weight: 600; letter-spacing: -0.005em; margin: 0; font-family: var(--con-font); }
  .card-aside { color: var(--con-g-500); font-size: 0.78rem; }
  .tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

  /* Metric cards. Still NO trend chips - we hold no real deltas, and an
     invented "+12%" is the exact thing the seven rules exist to forbid. */
  .kpi { gap: 0; padding: 20px 24px; }
  .kpi-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
  .kpi-ico { width: 44px; height: 44px; border-radius: var(--con-r); display: grid; place-items: center; flex: none; background: var(--con-brand-50); color: var(--con-brand-500); }
  .kpi-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
  .kpi-label { color: var(--con-g-500); font-family: var(--con-font); font-size: 0.8rem; font-weight: 500; letter-spacing: 0; text-transform: none; margin: 0; }
  .kpi-value { font-family: var(--con-font); font-weight: 700; font-size: 1.75rem; letter-spacing: -0.02em; color: var(--con-g-900); margin: 0; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .kpi-note { color: var(--con-g-500); font-size: 0.8rem; line-height: 1.5; margin: 8px 0 0; }

  .status-list { list-style: none; padding: 0; margin: 0; }
  .status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--con-g-100); }
  .status-row:last-child { border-bottom: 0; }
  .status-label { color: var(--con-g-700); font-size: 0.875rem; }

  /* chips = TailAdmin badges: tinted pill, 500/600 text, no border */
  .chip { font-family: var(--con-font); font-size: 0.75rem; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 3px 11px; border: 0; border-radius: 999px; white-space: nowrap; background: var(--con-g-100); color: var(--con-g-600); }
  .chip.is-live { color: var(--con-ok-600); background: var(--con-ok-50); }
  .chip.is-quiet { color: var(--con-g-500); background: var(--con-g-100); }
  a.chip { text-decoration: none; }
  .tabs { display: flex; gap: 6px; }
  .tabbtn { background: var(--con-surface); border: 1px solid var(--con-g-300); border-radius: 999px; color: var(--con-g-600); font-family: var(--con-font); font-size: 0.78rem; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 6px 14px; cursor: pointer; transition: background-color .15s, color .15s; }
  .tabbtn:hover { background: var(--con-g-50); }
  .tabbtn.is-on { color: var(--con-brand-500); border-color: var(--con-brand-100); background: var(--con-brand-50); }
  .list { display: grid; gap: 12px; }
  .app { border: 1px solid var(--con-g-200); border-radius: var(--con-r); padding: 18px 20px; background: var(--con-surface); box-shadow: var(--con-sh-xs); }
  .app-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-bottom: 10px; }
  .app-tools { margin-left: auto; display: flex; gap: 12px; }
  .app-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 18px; margin: 0; }
  .app-dl dt { font-family: var(--con-font); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: var(--con-g-400); }
  .app-dl dd { margin: 2px 0 0; color: var(--con-g-700); font-size: 0.85rem; line-height: 1.5; white-space: pre-wrap; }
  .app-act-end { justify-content: flex-end; margin-top: 10px; border-top: 0; padding-top: 0; }
  .app-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--con-g-100); }

  /* inputs: h-11, rounded-lg, gray-300 border, brand focus ring */
  .mini { background: var(--con-surface); border: 1px solid var(--con-g-300); border-radius: var(--con-r-sm); color: var(--con-g-800); font: inherit; font-family: var(--con-font); font-size: 0.875rem; padding: 9px 12px; width: 130px; transition: border-color .15s, box-shadow .15s; }
  .mini::placeholder { color: var(--con-g-400); }
  .mini:focus-visible { outline: none; border-color: var(--con-brand-500); box-shadow: var(--con-ring); }
  .mini-n { width: 90px; } .mini-w { width: 260px; }
  .btn-ok, .btn-no { border-radius: var(--con-r-sm); font-family: var(--con-font); font-size: 0.82rem; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 9px 16px; cursor: pointer; box-shadow: var(--con-sh-xs); transition: background-color .15s, color .15s; }
  .btn-ok { background: var(--con-brand-500); border: 1px solid var(--con-brand-500); color: #fff; }
  .btn-ok:hover { background: var(--con-brand-600); border-color: var(--con-brand-600); }
  .btn-no { background: var(--con-surface); border: 1px solid var(--con-g-300); color: var(--con-g-700); }
  .btn-no:hover { background: var(--con-g-50); color: var(--con-g-900); }
  .btn-ok:disabled, .btn-no:disabled { opacity: 0.5; cursor: default; }

  /* tables: quiet gray-500 headers, gray-100 hairlines, gray-50 hover */
  .tbl-wrap { overflow-x: auto; }
  .tbl { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
  .tbl th { text-align: left; font-family: var(--con-font); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em; text-transform: none; color: var(--con-g-500); padding: 11px 10px; border-bottom: 1px solid var(--con-g-200); background: var(--con-g-50); }
  .tbl td { padding: 12px 10px; border-bottom: 1px solid var(--con-g-100); vertical-align: top; color: var(--con-g-700); }
  .tbl td.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--con-g-800); font-weight: 500; }
  .tbl tbody tr:hover td { background: var(--con-g-50); }
  .tbl tr.grp td { background: var(--con-g-50); padding-top: 16px; font-weight: 500; color: var(--con-g-800); }
  .tbl-sm { font-size: 0.8rem; } .tbl-sm td { padding: 8px 10px; }
  .acts { white-space: normal; min-width: 150px; } .acts .lnk { margin: 0 10px 6px 0; display: inline-block; }
  .pay { display: inline-flex; gap: 8px; margin-left: 14px; align-items: center; flex-wrap: wrap; }

  .lnk { background: none; border: 0; color: var(--con-brand-500); border-bottom: 0; cursor: pointer; font: inherit; font-family: var(--con-font); font-size: 0.82rem; font-weight: 500; padding: 0; }
  .lnk:hover { color: var(--con-brand-600); text-decoration: underline; }
  .lnk.is-danger, .lnk-danger { color: var(--con-err-600); }
  .lnk.is-danger:hover { color: #fff; background: var(--con-err-600); border-radius: 4px; padding: 0 4px; text-decoration: none; }

  .edit-row td { background: var(--con-g-50); }
  .edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px 18px; align-items: end; padding: 8px 0 4px; }
  .edit-grid[hidden] { display: none; }
  .edit-grid label { display: grid; gap: 6px; font-size: 0.8rem; font-weight: 500; color: var(--con-g-700); }
  .edit-grid label.wide { grid-column: 1 / -1; }
  .edit-grid label.chk, .cols label.chk { display: flex; align-items: center; gap: 8px; color: var(--con-g-700); font-size: 0.84rem; font-weight: 400; }
  .edit-grid .mini { width: 100%; }
  .mini-ta { resize: vertical; font-family: inherit; }
  .cols { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 6px 0 12px; border-bottom: 1px solid var(--con-g-100); }
  .cols[hidden] { display: none; }
  .search { display: flex; gap: 8px; align-items: center; }
  .mo { border: 1px solid var(--con-g-200); border-radius: var(--con-r); padding: 18px 20px; background: var(--con-surface); }
  .mo[hidden] { display: none; }
  .mem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px 22px; }
  .lab { color: var(--con-g-500); margin: 0 0 6px; font-size: 0.75rem; font-weight: 500; }
  .note-row { display: flex; gap: 8px; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--con-g-100); }
  .tpl { display: grid; gap: 18px; }
  .tpl-one { display: grid; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--con-g-100); }
  .tpl-one:last-child { border-bottom: 0; }
  .tpl-one label { display: grid; gap: 6px; font-size: 0.8rem; font-weight: 500; color: var(--con-g-700); }
  .tpl-one .mini { width: 100%; }
  .tpl-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .tpl-act .mini-w { width: 240px; }
  .warn { color: var(--con-wrn-600); }
  .pinned { padding: 4px 0 12px; border-bottom: 1px solid var(--con-g-100); }
  .pin-row { display: flex; flex-wrap: wrap; gap: 8px; }
  .pin-chip { background: var(--con-brand-50); border: 1px solid var(--con-brand-100); color: var(--con-brand-600); border-radius: 999px; padding: 6px 14px; font: inherit; font-family: var(--con-font); font-size: 0.8rem; font-weight: 500; cursor: pointer; }
  .pin-chip:hover { border-color: var(--con-brand-500); }
  .app.is-pinned { border-color: var(--con-brand-100); }
  .lnk.is-pinned { color: var(--con-brand-600); }
  .app.is-flash { box-shadow: 0 0 0 3px rgba(70, 95, 255, 0.28); transition: box-shadow 0.3s; }

  /* profile dialog */
  .aff-dlg { width: min(1100px, calc(100vw - 32px)); height: min(88vh, 1000px); padding: 0; border: 1px solid var(--con-g-200); border-radius: var(--con-r-lg); background: var(--con-g-50); color: var(--con-g-800); display: none; grid-template-rows: auto 1fr; overflow: hidden; font-family: var(--con-font); box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03); }
  .aff-dlg[open] { display: grid; }
  .aff-dlg::backdrop { background: rgba(16, 24, 40, 0.5); backdrop-filter: blur(2px); }
  .dlg-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--con-g-200); background: var(--con-surface); }
  .dlg-title { color: var(--con-g-800); font-weight: 600; }
  .dlg-head { display: grid; gap: 2px; min-width: 0; }
  .dlg-sub { color: var(--con-g-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.78rem; }
  .dlg-acts { display: flex; align-items: center; gap: 16px; }
  .dlg-x { background: var(--con-surface); border: 1px solid var(--con-g-300); border-radius: var(--con-r-sm); color: var(--con-g-600); font-size: 1.05rem; line-height: 1; padding: 4px 10px 6px; cursor: pointer; }
  .dlg-x:hover { color: var(--con-g-900); background: var(--con-g-50); }
  .dlg-body { overflow: auto; padding: 20px; display: block; background: var(--con-g-50); }
  .dlg-body > * + * { margin-top: 14px; }
  .dlg-body .tbl-wrap { display: block; width: 100%; }
  .prof { border: 1px solid var(--con-g-200); border-radius: var(--con-r-lg); padding: 18px 20px; background: var(--con-surface); display: grid; gap: 12px; }
  .prof-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; }
  .prof-name { font-family: var(--con-font); font-weight: 600; font-size: 1.25rem; color: var(--con-g-900); margin: 0 0 4px; letter-spacing: -0.01em; }
  .prof-acts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
  .prof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px 22px; }
  .prof-row { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--con-g-100); }
  .prof-l { color: var(--con-g-500); font-size: 0.75rem; font-weight: 500; }
  .prof-v { color: var(--con-g-700); font-size: 0.875rem; word-break: break-word; }
  .tbl tr.is-click { cursor: pointer; }
  .app-dl-wrap { padding: 4px 0 10px; }
  code { font-family: Consolas, ui-monospace, monospace; font-size: 0.85em; color: var(--con-g-800); background: var(--con-g-100); border-radius: 4px; padding: 1px 5px; }


  /* ── collapsible nav (reference sidebar mechanics) ──────────────── */
  .nav-parent { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--con-r-sm); background: none; color: var(--con-g-700); font-family: var(--con-font); font-size: 0.875rem; font-weight: 500; text-align: left; cursor: pointer; transition: color .15s, background-color .15s; }
  .nav-parent svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; flex: none; opacity: .85; color: var(--con-g-500); }
  .nav-parent:hover { color: var(--con-g-900); background: var(--con-g-100); }
  .nav-parent.is-open { color: var(--con-brand-500); background: var(--con-brand-50); }
  .nav-parent.is-open svg { color: var(--con-brand-500); opacity: 1; }
  .nav-parent .chev { margin-left: auto; width: 16px; height: 16px; fill: none; transition: transform .2s; }
  .nav-parent .badge-new + .chev { margin-left: 6px; }
  .nav-parent.is-open .chev { transform: rotate(180deg); }
  .nav-sub { display: grid; gap: 2px; padding: 2px 0 6px 30px; }
  .nav-sub[hidden] { display: none; }
  .nav-child { padding: 8px 12px; color: var(--con-g-500); }
  .nav-child:hover { color: var(--con-g-900); }
  .badge-new { margin-left: auto; font-family: var(--con-font); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.05em; color: var(--con-ok-600); background: var(--con-ok-50); border-radius: 999px; padding: 2px 8px; flex: none; }



  /* While the console is on screen, the site's fixed furniture stays out
     of the frame (owner, 2026-08-28: "put this in the background while I'm
     in admin") - the (c) line and the social rail overlapped the sidebar. */
  body:has(.console) .est, body:has(.console) .soc { display: none; }

  /* ── profile cards (reference user-profile treatment) ───────────── */
  .ava { width: 56px; height: 56px; border-radius: 50%; background: var(--con-brand-50); color: var(--con-brand-600); font-weight: 600; font-size: 1.05rem; display: grid; place-items: center; flex: none; letter-spacing: 0.02em; }
  .ava-lg { width: 72px; height: 72px; font-size: 1.3rem; }
  .app { padding: 24px; border-radius: var(--con-r-lg); box-shadow: none; }
  .app-head { align-items: center; gap: 16px; margin-bottom: 16px; }
  .app-id { display: grid; gap: 3px; min-width: 0; }
  .app-id strong, .app-head strong { font-size: 1.05rem; font-weight: 600; color: var(--con-g-900); }
  .app-id .micro, .app-head .micro { color: var(--con-g-500); }
  .app-dl { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px 24px; }
  .app-dl dt { font-size: 0.75rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--con-g-500); }
  .app-dl dd { margin: 6px 0 0; color: var(--con-g-800); font-size: 0.875rem; font-weight: 500; }
  .app-act { border-top: 1px solid var(--con-g-100); }
  .app-tools .lnk, .prof-acts .lnk { border: 1px solid var(--con-g-300); border-radius: 0.5rem; padding: 7px 14px; color: var(--con-g-700); font-weight: 500; background: var(--con-surface); box-shadow: var(--con-sh-xs); }
  .app-tools .lnk:hover, .prof-acts .lnk:hover { background: var(--con-g-50); color: var(--con-g-900); text-decoration: none; }
  .app-tools .lnk.is-danger, .prof-acts .lnk-danger { color: var(--con-err-600); border-color: #fecdca; }
  .app-tools .lnk.is-danger:hover, .prof-acts .lnk-danger:hover { background: var(--con-err-50); color: var(--con-err-600); padding: 7px 14px; }
  .app-tools .lnk.is-pinned { color: var(--con-brand-600); border-color: var(--con-brand-100); background: var(--con-brand-50); }
  .prof { padding: 24px; border-radius: var(--con-r-lg); }
  .prof-idrow { display: flex; align-items: center; gap: 18px; }
  .prof-name { font-size: 1.15rem; font-weight: 600; color: var(--con-g-900); }
  .prof-row { border-bottom: 0; padding: 10px 0; gap: 5px; }
  .prof-l { font-size: 0.75rem; font-weight: 400; color: var(--con-g-500); }
  .prof-v { color: var(--con-g-800); font-weight: 500; }

  /* ── overhaul pieces: charts, calendar, kanban, pricing, assets, faq ── */
  .ch-tip { position: absolute; transform: translate(-50%, -100%); background: var(--con-g-900); color: #fff; font-size: 0.72rem; padding: 4px 9px; border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 3; }
  .ch-tip b { font-weight: 600; margin-right: 4px; }
  .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
  .cal-h { font-size: 0.7rem; font-weight: 500; color: var(--con-g-400); text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 8px; }
  .cal-cell { min-height: 72px; border: 1px solid var(--con-g-100); border-radius: 8px; padding: 6px 8px; position: relative; background: var(--con-surface); }
  .cal-cell.is-out { background: transparent; border-color: transparent; }
  .cal-cell.is-today { border-color: var(--con-brand-500); box-shadow: var(--con-ring); }
  .cal-d { font-size: 0.78rem; font-weight: 500; color: var(--con-g-700); }
  .cal-dot { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--con-brand-500); }
  .cal-ev { display: block; margin-top: 4px; color: var(--con-brand-600); }
  .kb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .kb-col { background: var(--con-g-50); border: 1px solid var(--con-g-200); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; align-content: start; }
  .kb-card { background: var(--con-surface); border: 1px solid var(--con-g-200); border-radius: 8px; padding: 9px 11px; font-size: 0.84rem; color: var(--con-g-700); box-shadow: var(--con-sh-xs); display: grid; gap: 6px; }
  .kb-acts { display: flex; gap: 8px; }
  .price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
  .price-card { border: 1px solid var(--con-g-200); border-radius: 12px; padding: 16px 18px; display: grid; gap: 6px; background: var(--con-surface); }
  .price-card.is-flag { border-color: var(--con-brand-100); background: var(--con-brand-50); }
  .price-card h3 { margin: 0; font-size: 0.95rem; color: var(--con-g-800); }
  .price-big { margin: 0; font-size: 1.5rem; font-weight: 700; color: var(--con-g-900); }
  .asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
  .asset { margin: 0; border: 1px solid var(--con-g-200); border-radius: 10px; overflow: hidden; background: var(--con-surface); }
  .asset img { width: 100%; height: 110px; object-fit: cover; display: block; }
  .asset figcaption { padding: 7px 10px; color: var(--con-g-600); }
  .cat-thumb { width: 52px; height: 32px; object-fit: cover; border-radius: 4px; display: block; }
  .faq-item { border-bottom: 1px solid var(--con-g-100); padding: 4px 0; }
  .faq-item summary { cursor: pointer; padding: 8px 0; font-weight: 500; color: var(--con-g-800); }
  .faq-item p { margin: 0 0 12px; color: var(--con-g-600); font-size: 0.875rem; line-height: 1.6; }
  .ai-box { display: grid; gap: 10px; }
  .ai-box .mini-ta { width: 100%; }

  /* ── scaffold empty state ───────────────────────────────────────── */
  .scaffold-empty { display: grid; justify-items: center; gap: 8px; padding: 40px 16px 44px; text-align: center; }
  .scaffold-mark { width: 46px; height: 46px; border: 1.5px dashed var(--con-g-300); border-radius: 12px; position: relative; margin-bottom: 6px; }
  .scaffold-mark::after { content: ""; position: absolute; inset: 12px; border-radius: 6px; background: var(--con-brand-50); }
  .scaffold-line { margin: 0; color: var(--con-g-700); font-weight: 500; }
  .scaffold-sub { color: var(--con-g-500); max-width: 46ch; }

  @media (max-width: 980px) {
    .console { grid-template-columns: 1fr; }
    .side { border-right: 0; border-bottom: 1px solid var(--con-g-200); }
    .side-brand, .side-foot { display: none; }
    .side-nav { grid-auto-flow: column; overflow-x: auto; padding: 8px; }
    .nav-group { display: none; }
    .nav-parent, .nav-sub { display: none; }
    .nav-item { white-space: nowrap; }
    .duo { grid-template-columns: 1fr; }
    .tab, .topbar { padding: 16px; }
  }

  .tax-frame { width: 100%; height: min(1400px, 165vh); border: 1px solid var(--con-g-200); border-radius: var(--con-r); background: var(--con-surface); display: block; }

  /* ── Support desk (2026-08-30) ──────────────────────────────────────
     The queue reads like a list you triage top-down, so the only colour
     in it means "this one is late". The ticket pane puts the thread and
     the customer side by side: answering must never mean another tab. */
  #todo-list .status-row { justify-content: flex-start; }
  .desk-filters, .desk-bulk { flex-wrap: wrap; gap: 8px; align-items: center; }
  .desk-bulk { padding: 8px 10px; margin: 6px 0 2px; border: 1px solid var(--con-brand-500); border-radius: var(--con-r-sm); background: var(--con-brand-50); }
  .tbl-sm tr.is-late td { background: var(--con-err-50); }
  .tbl-sm tr.is-quiet-row td { opacity: .62; }
  .tbl-sm tr.is-click { cursor: pointer; }

  .ticket-bar { flex-wrap: wrap; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--con-g-100); margin-bottom: 12px; }
  .ticket-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }

  .thread { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; max-height: 52vh; overflow-y: auto; }
  .msg { border: 1px solid var(--con-g-200); border-radius: var(--con-r-sm); padding: 10px 12px; background: var(--con-surface); }
  .msg-head { margin: 0 0 5px; color: var(--con-g-500); }
  /* white-space:pre-wrap keeps the customer's own line breaks - a stack
     trace or a numbered list is often the whole content of the report. */
  .msg-body { color: var(--con-g-700); font-size: 0.86rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
  .msg.is-out { background: var(--con-brand-50); border-color: var(--con-brand-500); }
  .msg.is-note { background: var(--con-wrn-50, #fffaeb); border-style: dashed; }
  .msg.is-event { border: 0; padding: 2px 0; background: none; text-align: center; color: var(--con-g-500); }

  .reply-box { display: grid; gap: 8px; }
  .reply-box .mini-ta { width: 100%; }

  .who-panel { display: grid; gap: 0; align-content: start; border: 1px solid var(--con-g-200); border-radius: var(--con-r-sm); padding: 4px 12px; background: var(--con-g-25); }
  .who-row { display: grid; gap: 3px; padding: 10px 0; border-bottom: 1px solid var(--con-g-100); }
  .who-row:last-child { border-bottom: 0; }
  .who-l { color: var(--con-g-500); font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
  .who-v { color: var(--con-g-700); font-size: 0.82rem; line-height: 1.6; overflow-wrap: anywhere; }

  @media (max-width: 1100px) {
    .ticket-grid { grid-template-columns: 1fr; }
    .thread { max-height: none; }
  }

  /* ── sidebar support thread (owner, 2026-08-31) ──────────────────────────
     A conversation, not a contact form: what the partner said and what we
     answered, kept across visits. Lives in the rail so support is one click
     from wherever they are in the console. */
  .nav-btn { width: 100%; background: none; border: 0; font-family: inherit; text-align: left; cursor: pointer; }
  .nav-btn:focus-visible { outline: none; box-shadow: var(--con-ring); }

  /* The thread itself is a pop-out over the dark dialog ground - its
     styles live with the other dialogs in the page, not on console tokens. */


  /* ── partner assets (owner, 2026-08-31) ─────────────────────────────────
     Banners are served per partner from /api/affiliate/assets, so each shot
     below is the REAL file the partner will post, not a mock of it. */
  .asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin: 4px 0 8px; }
  .asset { margin: 0; border: 1px solid var(--con-g-200); border-radius: var(--con-r); background: var(--con-surface); overflow: hidden; box-shadow: var(--con-sh-xs); }
  /* The units are dark artwork on a light console - a checker ground would
     fight them, so they sit on their own near-black plate at true ratio. */
  .asset-shot { display: grid; place-items: center; background: #08090a; padding: 10px; }
  .asset-shot img { max-width: 100%; max-height: 220px; height: auto; display: block; }
  .asset figcaption { display: grid; gap: 4px; padding: 10px 12px 12px; border-top: 1px solid var(--con-g-200); }
  .asset-l { color: var(--con-g-800); font-size: 0.85rem; font-weight: 600; }
  .asset-d { color: var(--con-g-500); }
  .asset-acts { display: flex; gap: 8px; margin-top: 4px; }
  .asset-b { display: inline-flex; align-items: center; justify-content: center; min-width: 54px; padding: 5px 11px; border: 1px solid var(--con-g-300); border-radius: var(--con-r-sm); background: var(--con-surface); color: var(--con-g-700); font-family: inherit; font-size: 0.75rem; font-weight: 600; text-decoration: none; cursor: pointer; }
  .asset-b:hover { border-color: var(--con-accent); color: var(--con-accent); }
  .asset-b:focus-visible { outline: none; box-shadow: var(--con-ring); }

  .assets-locked { border: 1px dashed var(--con-g-300); border-radius: var(--con-r); padding: 16px 18px; background: var(--con-g-25); }

  .copy-list { display: grid; gap: 12px; }
  .copyb { border: 1px solid var(--con-g-200); border-radius: var(--con-r); background: var(--con-surface); padding: 12px 14px 14px; }
  .copyb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .copyb-l { color: var(--con-g-800); font-size: 0.85rem; font-weight: 600; }
  .copyb-n { color: var(--con-g-500); margin: 2px 0 8px; }
  /* pre, so a pasted block keeps the line breaks the partner will publish. */
  .copyb-t { margin: 0; padding: 10px 12px; border-radius: var(--con-r-sm); background: var(--con-g-50); border: 1px solid var(--con-g-200); color: var(--con-g-800); font-family: inherit; font-size: 0.8rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }

  /* ── launch offer meter (owner 2026-08-31) ──────────────────────────────
     How far the promotion has actually run, not just the cap it was set to. */
  .launch-stat { margin: 4px 0 14px; }
  .lmeter { height: 8px; border-radius: 999px; background: var(--con-g-200); overflow: hidden; margin-bottom: 8px; }
  .lmeter i { display: block; height: 100%; background: var(--con-accent); border-radius: 999px; transition: width .3s ease; }
  #launch-card .card-aside.is-quiet { color: var(--con-g-400); }


/* ── Mo 2 bridge ─────────────────────────────────────────────────────
   Everything above is the Erianux console, verbatim. These two lines are
   the only Mo 2 additions: the tokens the sheets read by Erianux's names. */
body:has(.console) { --serif: var(--display); --silver: var(--con-g-700); }