/* V1 Canvas — shared chrome stylesheet (CHG-202608141549)
   Extracted verbatim from public/superadmin/index.html's inline <style> block.
   Single source of truth for design tokens, rail nav, orb/carousel engine,
   time-of-day background + starfield, motion slider, dashboard card
   components, and every other CSS shared by public/superadmin/index.html
   and public/portal/index.html. A fix to any of these only needs to happen
   once — both pages link this file. No build step: plain CSS, no preprocessor.
   */
  :root {
    color-scheme: dark;
    --bg: #05070a;
    --surface: rgba(17, 24, 32, .58);
    --surface-solid: #0d1218;
    --surface-3: rgba(30, 40, 51, .65);
    --border: rgba(255, 255, 255, .08);
    --border-soft: rgba(255, 255, 255, .05);
    --text: #e7f4fb;
    --text-muted: #7c93a3;
    --text-dim: #445563;
    --accent: #38d6ff;
    --accent-dim: #1fa8cc;
    --accent-glow: rgba(56, 214, 255, .35);
    --accent-soft: rgba(56, 214, 255, .12);
    --good: #2ee6b8;
    --warn: #ffb020;
    --bad: #ff4d6a;
    --mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;
    /* Nightfall defaults (TSK-202608160344). Dusk/Daylight override via
       body[data-portal-look]. Superadmin never sets that attribute, so these
       tokens stay unused there except as fallbacks already referenced above. */
    --rim-amber: #e0b578;
    --panel-glass: rgba(14, 19, 26, .7);
    --panel-glass-strong: rgba(14, 19, 26, .92);
    --chrome-glass: rgba(9, 12, 16, .42);
    --chrome-glass-strong: rgba(9, 12, 16, .85);
    --ray-1: rgba(56, 214, 255, .16);
    --ray-2: rgba(224, 181, 120, .16);
    --ray-opacity: .5;
    --motion-scale: 1;
    --type-scale: 1;
    --ring-rgb: 0, 147, 208;
    --vee-expand: 1.16;
  }
  * { box-sizing: border-box; }
  @keyframes glowpulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
  body {
    margin: 0; font: 14px/1.5 system-ui, -apple-system, sans-serif;
    background-color: var(--bg); color: var(--text); min-height: 100vh;
    padding: 40px 16px;
    background-image:
      linear-gradient(rgba(56,214,255,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(56,214,255,.05) 1px, transparent 1px),
      radial-gradient(ellipse at 50% -10%, rgba(56,214,255,.08), transparent 60%);
    background-size: 28px 28px, 28px 28px, 100% 100%;
  }
  .wrap { width: 100%; max-width: 960px; margin: 0 auto; }
  .login-wrap { max-width: 400px; margin: 100px auto; }
  h1 { font-size: 18px; margin: 0 0 4px; }
  .brand-mark { display: flex; align-items: center; gap: 9px; justify-content: center; margin-bottom: 22px; }
  .brand-mark .brand-glyph { flex: none; }
  .brand-mark .brand-wordmark {
    font: 700 15px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text);
  }
  .sub { color: var(--text-muted); margin: 0 0 24px; font-size: 13px; }
  .login-wrap .sub { text-align: center; }
  .card {
    position: relative;
    background: var(--surface); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid var(--border); border-radius: 4px; padding: 24px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 20px 40px -20px rgba(0,0,0,.6);
  }
  .card::before, .card::after,
  .site-tile::before, .site-tile::after {
    content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none;
    border-color: var(--accent-glow); opacity: .8;
  }
  .card::before { top: -1px; left: -1px; border-top: 1.5px solid; border-left: 1.5px solid; }
  .card::after { bottom: -1px; right: -1px; border-bottom: 1.5px solid; border-right: 1.5px solid; }
  label { display: block; font-size: 11px; color: var(--text-dim); margin: 12px 0 5px; text-transform: uppercase; letter-spacing: .08em; font-family: var(--mono); }
  input, select {
    width: 100%; padding: 10px 12px; border-radius: 3px; border: 1px solid var(--border);
    background: rgba(0,0,0,.35); color: var(--text); font-size: 14px;
  }
  input:focus, select:focus, button:focus-visible {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
  }
  button {
    border: 1px solid var(--accent); border-radius: 3px; padding: 9px 16px; font-size: 13px; cursor: pointer;
    background: var(--accent-soft); color: var(--accent); font-weight: 600; letter-spacing: .02em;
    transition: background .15s, box-shadow .15s;
  }
  button:hover { background: rgba(56,214,255,.22); box-shadow: 0 0 16px -2px var(--accent-glow); }
  button.ghost { background: var(--surface-3); color: var(--text-muted); border-color: var(--border); font-weight: 500; }
  button.ghost:hover { background: rgba(30,40,51,.85); box-shadow: none; color: var(--text); }
  button.danger { background: rgba(255,77,106,.12); border-color: var(--bad); color: var(--bad); }
  button:disabled { opacity: .4; cursor: not-allowed; box-shadow: none !important; }
  .row { display: flex; gap: 8px; align-items: center; }
  .msg { font-size: 12px; min-height: 16px; margin-top: 10px; font-family: var(--mono); }
  .msg.err { color: var(--bad); }
  .msg.ok { color: var(--good); }
  table { width: 100%; border-collapse: collapse; margin-top: 16px; }
  th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
  th { color: var(--text-dim); font-weight: 500; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-family: var(--mono); }
  .pill { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 11px; background: var(--surface-3); border: 1px solid var(--border); }
  .pill.inactive { background: rgba(255,77,106,.1); border-color: rgba(255,77,106,.3); color: var(--bad); }
  .actions { display: flex; gap: 6px; }
  .top-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
  .hide { display: none !important; }
  .signout { background: none; border: none; color: var(--text-dim); font-size: 12px; padding: 4px 0; font-family: var(--mono); }
  .signout:hover { background: none; color: var(--accent); box-shadow: none; }

  /* ---- Passphrase modal (reset-password / invite) ----
     No modal component existed in this file before (every other surface is a
     tab/view swap) — built to match the existing .card look (blurred glass,
     corner brackets) rather than invent a second visual language. z-index 200
     clears the orb menu (61, the previous highest) with headroom. */
  .modal-overlay {
    position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
    background: rgba(2, 4, 7, .72); backdrop-filter: blur(3px); padding: 16px;
  }
  .modal-card { width: 100%; max-width: 420px; }
  .modal-card .top-row { margin-bottom: 4px; }
  .modal-card h2 { font-size: 15px; margin: 0; }
  .passphrase-hint { font-size: 11px; color: var(--text-dim); margin: 4px 0 0; font-family: var(--mono); }
  .passphrase-field { position: relative; }
  .passphrase-field input { padding-right: 68px; font-family: var(--mono); }
  .passphrase-toggle {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--text-dim); font-size: 11px; padding: 6px 8px;
    text-transform: uppercase; letter-spacing: .06em; font-family: var(--mono);
  }
  .passphrase-toggle:hover { background: none; box-shadow: none; color: var(--accent); }
  .strength-meter { margin-top: 10px; }
  .strength-track {
    height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden;
    border: 1px solid var(--border);
  }
  .strength-fill { height: 100%; width: 0%; background: var(--border); transition: width .18s ease, background .18s ease; }
  .strength-label {
    display: block; margin-top: 6px; font-size: 11px; font-family: var(--mono);
    text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); min-height: 14px;
  }
  .strength-feedback { font-size: 12px; color: var(--text-muted); margin-top: 4px; min-height: 14px; line-height: 1.4; }
  .self-passphrase-form { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
  .self-passphrase-form label { margin-top: 10px; }
  .must-change-banner {
    max-width: 900px; margin: 16px auto 0; padding: 12px 16px;
    border: 1px solid rgba(224, 181, 120, .45); border-radius: 10px;
    background: rgba(224, 181, 120, .1); color: var(--text);
    font-size: 13px; line-height: 1.45;
  }
  #account-view .must-change-banner { margin: 0 0 16px; }
  .must-change-banner .must-change-go {
    margin-left: 10px; padding: 4px 10px; font-size: 12px;
  }
  .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }

  /* ---- Dashboard shell ---- */
  .topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--border-soft); }
  .topbar-left { display: flex; align-items: center; gap: 28px; }
  .brand { display: flex; align-items: center; gap: 8px; }
  .brand-glyph circle { fill: var(--accent); filter: drop-shadow(0 0 3px var(--accent-glow)); animation: glowpulse 3.2s ease-in-out infinite; }
  .brand-word { font: 700 14px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
  .brand-tag {
    font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
    border: 1px solid var(--accent-glow); border-radius: 3px; padding: 3px 6px; margin-left: 2px;
  }
  .tabs { display: flex; gap: 20px; }
  .tab {
    background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); font-size: 13px; font-weight: 500;
    padding: 6px 2px; border-radius: 0; cursor: pointer; font-family: var(--mono); letter-spacing: .02em;
  }
  .tab:hover { color: var(--text-muted); background: none; box-shadow: none; }
  .tab.active { color: var(--accent); background: none; border-bottom-color: var(--accent); text-shadow: 0 0 12px var(--accent-glow); }
  .tab[disabled] { cursor: default; opacity: .35; }
  .tab[disabled]:hover { background: none; color: var(--text-dim); }

  /* ---- Site tile grid ---- */
  .site-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px;
  }

  /* ---- Site grid section grouping (CHG-202608041632, 2026-08-04) ----
     Ported as-is from mockup Artifact "V1 Canvas — Admin (Hero Concept)"
     (2d54a7d6-1a2a-4548-9bf1-f0056d4f56e5) per Elias's fidelity audit
     (CHG-202608041337). .section-label is included alongside the three
     classes the audit named — the ported <p class="section-label"> markup
     needs it to render as the mockup's dimmed uppercase mono label rather
     than a default unstyled <p>; not present anywhere else in this file. */
  .section-block + .section-block { margin-top: 44px; }
  .section-label { font: 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 16px; }
  .section-label-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 16px; }
  .section-count { font: 10px/1 var(--mono); color: var(--text-dim); }

  .site-tile {
    position: relative;
    background: var(--surface); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid var(--border); border-radius: 4px; padding: 0 20px 20px;
    display: flex; flex-direction: column; gap: 4px; overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  }
  .site-tile::before { top: -1px; left: -1px; border-top: 1.5px solid; border-left: 1.5px solid; }
  .site-tile::after { bottom: -1px; right: -1px; border-bottom: 1.5px solid; border-right: 1.5px solid; }
  .site-tile-rail { position: absolute; top: 0; left: 16px; right: 16px; height: 1px; background: var(--border); z-index: 1; }
  .site-tile.health-current .site-tile-rail { background: var(--good); box-shadow: 0 0 8px 1px var(--good); }
  .site-tile.health-behind .site-tile-rail { background: var(--warn); box-shadow: 0 0 8px 1px var(--warn); }
  .site-tile.health-unknown .site-tile-rail { background: var(--border); }
  .site-tile-thumb-wrap {
    margin: 0 -20px 16px; aspect-ratio: 16/10; background: #000; position: relative;
    border-bottom: 1px solid var(--border);
  }
  .site-tile-thumb { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; filter: saturate(1.05) contrast(1.03); }
  .site-tile-thumb.hide { display: none; }
  .site-tile-thumb-placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    color: var(--text-dim); font-size: 11px; font-family: var(--mono);
    background-image: linear-gradient(rgba(56,214,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(56,214,255,.06) 1px, transparent 1px);
    background-size: 14px 14px;
  }
  .refresh-thumb-btn {
    position: absolute; top: 8px; right: 8px; background: rgba(5,7,10,.75); border: 1px solid var(--border);
    color: var(--text-muted); font-size: 11px; padding: 4px 8px; border-radius: 3px; cursor: pointer; font-family: var(--mono);
  }
  .refresh-thumb-btn:hover { color: var(--accent); background: rgba(5,7,10,.9); box-shadow: 0 0 10px -2px var(--accent-glow); }
  .site-tile-name { font-size: 15px; font-weight: 600; margin: 0; padding-top: 20px; }
  .site-tile-name { font-size: 15px; font-weight: 600; margin: 0; }
  .site-tile-domain { color: var(--text-dim); font-size: 12px; margin: 0 0 12px; font-family: var(--mono); }
  .site-tile-meta { display: flex; gap: 20px; margin-bottom: 16px; }
  .readout { display: flex; flex-direction: column; gap: 2px; }
  .readout-label { font: 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); }
  .readout-value { font: 12px/1 var(--mono); color: var(--text-muted); }
  .site-tile-version { font-size: 11px; font-family: var(--mono); margin: -6px 0 10px; display: flex; align-items: center; gap: 6px; }
  .site-tile-version::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--border); }
  .site-tile-version.current { color: var(--good); }
  .site-tile-version.current::before { background: var(--good); box-shadow: 0 0 6px 1px var(--good); animation: glowpulse 2.4s ease-in-out infinite; }
  .site-tile-version.behind { color: var(--warn); }
  .site-tile-version.behind::before { background: var(--warn); box-shadow: 0 0 6px 1px var(--warn); }
  .site-tile-version.unknown { color: var(--text-dim); }
  /* CHG-202608201218 — Superadmin's own engine version (markup only in
     public/superadmin/index.html, not /portal/). Same 11px mono / --text-dim
     as .site-tile-version.unknown — not a badge, no glow, no new color.
     Fixed bottom-right, clear of Vee (right:63px; top:50%) and the 1/2 pager
     (dy 165 on that same center). z-index 20 is below rail (40), orb (69),
     sphere (70). pointer-events none so it never steals the soft well. */
  .sa-engine-stamp {
    position: fixed; bottom: 18px; right: 20px; z-index: 20;
    margin: 0; font-size: 11px; font-family: var(--mono); color: var(--text-dim);
    pointer-events: none; letter-spacing: .02em;
  }
  .site-tile-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
  .site-tile-actions a.btn-view {
    color: var(--text-dim); font-size: 12px; text-decoration: none; align-self: center; padding: 9px 4px; font-family: var(--mono);
  }
  .site-tile-actions a.btn-view:hover { color: var(--accent); }
  .site-tile a { text-decoration: none; }
  .site-tile a.btn { display: inline-block; }
  .manage-users-link {
    display: inline-flex; align-items: center; gap: 5px;
    background: none; border: none; color: var(--text-muted); font-size: 11px; padding: 5px 8px;
    cursor: pointer; text-align: left; text-decoration: none; font-family: var(--mono);
    border-radius: 4px; transition: background .15s, color .15s;
  }
  .manage-users-link svg { flex: none; opacity: .75; }
  .manage-users-link:hover { color: var(--accent); background: rgba(56,214,255,.08); }
  .manage-users-link:hover svg { opacity: 1; }
  .site-tile-mgmt-row {
    display: flex; flex-wrap: wrap; gap: 2px; margin: 10px -8px 0; padding-top: 10px;
    border-top: 1px solid var(--border-soft);
  }

  /* CHG-202608040744 (mocked 2026-08-20, built 2026-08-25) — Superadmin's
     own redesigned Spaces tile: quiet Edit site/View live row + large cyan
     Manage site button, replacing the 4-link .site-tile-mgmt-row above for
     that surface only (View As/client-tier tiles keep .site-tile-mgmt-row,
     unchanged). Class names match mockups/superadmin-mockup.html verbatim;
     colors/tokens use this file's own variables, not the mockup's literal
     hex values, to stay consistent with the rest of the live theme. */
  .site-tile-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .tile-btn {
    display: flex; align-items: center; justify-content: center;
    text-align: center; text-decoration: none;
    border: 1px solid var(--border); border-radius: 4px;
    padding: 8px 10px; min-height: 36px;
    font-size: 12px; font-weight: 600; letter-spacing: .02em; font-family: inherit;
    background: var(--surface-3); color: var(--text); cursor: pointer;
  }
  .tile-btn:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 12px -4px var(--accent-glow); }
  .tile-btn:disabled { color: var(--text-dim); cursor: default; opacity: .55; }
  .tile-btn:disabled:hover { border-color: var(--border); color: var(--text-dim); box-shadow: none; }
  .btn-manage {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 48px; padding: 14px 16px;
    border: 1px solid var(--accent); border-radius: 4px;
    background: var(--accent-soft); color: var(--accent);
    font: 600 14px/1.2 inherit; letter-spacing: .02em; cursor: pointer;
  }
  .btn-manage:hover { background: rgba(56,214,255,.22); box-shadow: 0 0 16px -2px var(--accent-glow); }
  .site-tile-foot { display: flex; justify-content: flex-end; align-items: center; margin: 8px 0 0; min-height: 16px; }
  .site-tile-version-mini { font-size: 11px; font-family: var(--mono); margin: 0; line-height: 1; letter-spacing: .04em; cursor: default; }
  .site-tile-version-mini.current { color: var(--good); }
  .site-tile-version-mini.behind { color: var(--warn); }
  .site-tile-version-mini.unknown { color: var(--text-dim); }

  .tag-filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
  .tag-chip {
    display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 999px;
    padding: 6px 13px; font-size: 11px; letter-spacing: .04em;
    font-family: var(--mono); color: var(--text-muted); background: rgba(255,255,255,.02); cursor: pointer;
    transition: border-color .15s, color .15s;
  }
  .tag-chip:hover { color: var(--text); border-color: var(--text-dim); }
  .tag-chip.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 12px -3px var(--accent-glow); }
  .tag-chip .n { color: var(--text-dim); margin-left: 6px; font-size: 10px; }
  .tag-chip.active .n { color: var(--accent-dim); opacity: .85; }
  .tag-chip-add { border-style: dashed; color: var(--text-dim); }
  .tag-chip-add:hover { color: var(--accent); border-color: var(--accent); }
  .site-tile-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; }
  .site-tile-tags .pill { font-size: 10px; padding: 1px 7px; }
  .edit-tags-link {
    background: none; border: none; color: var(--text-dim); font-size: 11px; padding: 0;
    cursor: pointer; text-decoration: underline; font-family: var(--mono);
  }
  .edit-tags-link:hover { color: var(--accent); }
  .draft-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    background: rgba(255,176,32,.1); border: 1px solid rgba(255,176,32,.35); border-radius: 3px;
    padding: 6px 10px; margin: -2px 0 10px; font-size: 11px; font-family: var(--mono); color: var(--warn);
  }
  .draft-banner button { padding: 4px 10px; font-size: 11px; }
  .engine-update-link {
    background: none; border: none; color: var(--warn); font-size: 11px; padding: 0; margin: -6px 0 10px;
    cursor: pointer; text-decoration: underline; font-family: var(--mono); text-align: left; display: block;
  }
  .engine-update-link:hover { opacity: .8; }

  .add-site-tile {
    border: 1.5px dashed var(--border); border-radius: 4px; padding: 20px;
    display: flex; align-items: center; justify-content: center; min-height: 120px;
    color: var(--text-dim); font-size: 13px; cursor: pointer; background: none; font-family: var(--mono);
  }
  .add-site-tile:hover { border-color: var(--accent); color: var(--accent); box-shadow: inset 0 0 24px -8px var(--accent-glow); }

  .add-site-form { margin-top: 16px; }
  .back-link {
    background: none; border: none; color: var(--text-muted); font-size: 12px; padding: 0 0 16px;
    cursor: pointer; text-decoration: underline; font-family: var(--mono);
  }

  /* ================================================================
     V1 Canvas — Hero Concept shell port (2026-07-30)
     Ported from mockup Artifact "V1 Canvas — Admin (Hero Concept)"
     (2d54a7d6-1a2a-4548-9bf1-f0056d4f56e5) per TSK-202607301327's
     go-ahead: rail nav, hero, floating orb, sound, day/night.
     IA kept as the live per-site drill-down model, NOT the mockup's
     flat cross-tenant rail sections (Castillo's decision, spec
     "Superadmin — View As mode" section).
     ================================================================ */

  /* Night mode is deliberately LIGHTER than day, same reasoning as the mockup: the hero photo
     itself goes dark, so the UI chrome lightens slightly to stay legible. */
  body[data-time="night"] {
    --bg: #131a24;
    --surface: rgba(34, 44, 58, .58);
    --surface-3: rgba(46, 58, 74, .65);
    --border: rgba(255, 255, 255, .12);
    --border-soft: rgba(255, 255, 255, .08);
    --text-muted: #aebfcc;
    --text-dim: #7c93a3;
  }

  /* ---- Persistent nav rail ---- */
  .rail {
    position: fixed; top: 0; left: 0; bottom: 0; width: 220px; z-index: 40;
    /* CHG-202608201256 (Elias 2026-08-24, Addendum 2) — swapped the
       hardcoded rgba (identical to --chrome-glass's own default value) for
       the token itself, so the rail tracks the same theme swaps
       --chrome-glass already gets (e.g. the Sunset/Day looks further down
       this file) instead of silently staying flat. Small, deliberate fix,
       not just a rename: without it, the rail and the Edit-Mode toolbar
       below (now sharing this exact same token) would only be byte-
       identical under the default theme and quietly diverge under any
       other — the "one unified panel" fidelity requirement is supposed to
       hold under every theme, not just the one most likely to get tested. */
    background: var(--chrome-glass); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
    border-right: 1px solid rgba(255,255,255,.08);
    box-shadow: 1px 0 24px -6px var(--accent-glow);
    display: flex; flex-direction: column; padding: 22px 16px;
    transition: width .35s cubic-bezier(.2,.9,.3,1);
  }
  .rail.hide { display: none !important; }
  /* TSK-202608140xxx (fidelity port): rail-brand is now the App Tray
     trigger, ported from the mockup's .rail-brand button reset — was a
     plain non-interactive div, now a real <button> matching the mockup's
     "V1 Canvas — open app switcher" affordance. */
  .rail-brand {
    display: flex; align-items: center; gap: 9px; padding: 0 6px 22px;
    background: none; border: none; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
    border-radius: 8px; transition: background .15s;
  }
  .rail-brand:hover, .rail-brand:focus-visible { background: rgba(255,255,255,.04); outline: none; }
  .rail-brand:focus-visible { box-shadow: 0 0 0 2px var(--accent-glow); }
  .rail-brand .brand-glyph circle { fill: var(--accent); filter: drop-shadow(0 0 4px var(--accent-glow)); animation: glowpulse 3.2s ease-in-out infinite; }
  .rail-brand-word { font: 700 13px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
  .rail-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
  .rail-item {
    display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 6px;
    color: var(--text-muted); font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none;
    border-left: 2px solid transparent; transition: background .15s, color .15s; background: none; border-top: none; border-right: none; border-bottom: none;
    width: 100%; text-align: left; font-family: inherit;
  }
  .rail-item svg { flex: none; opacity: .85; }
  .rail-item:hover { background: rgba(255,255,255,.04); color: var(--text); }
  .rail-item.active { color: var(--accent); background: var(--accent-soft); border-left-color: var(--accent); text-shadow: 0 0 10px var(--accent-glow); }
  .rail-item.active svg { opacity: 1; filter: drop-shadow(0 0 4px var(--accent-glow)); }
  .rail-foot { border-top: 1px solid var(--border-soft); padding-top: 14px; display: flex; flex-direction: column; gap: 2px; }
  .rail-signout, .rail-music, .rail-viewas {
    display: flex; align-items: center; gap: 8px; background: none; border: none; color: var(--text-dim);
    font: 12px var(--mono); padding: 8px 12px; cursor: pointer; width: 100%; text-align: left; border-radius: 6px;
  }
  .rail-signout:hover, .rail-music:hover, .rail-viewas:hover { color: var(--text-muted); background: rgba(255,255,255,.03); }
  .rail-music.on { color: var(--accent); }

  .app-main { margin-left: 220px; transition: margin-left .4s cubic-bezier(.2,.9,.3,1); }
  .app-main.rail-hidden { margin-left: 0; }

  /* ---- Icon rail (TSK-202608140xxx round 2 fidelity port) — the mockup's
     real default nav pattern ("Icon Rail (default)" per its own dev-only
     debug panel), ported verbatim: rail collapses to a 64px icon-only strip,
     expands to the full 220px labeled rail only on a deliberate click of the
     edge chevron (not hover — "a deliberate click reads considered" per the
     mockup's own comment), matching HubSpot/Notion/Linear's collapsed-rail
     convention. `body.vee-primary` is now the PERMANENT default class on
     <body> (mockup's own default), not a toggle — the mockup's Classic vs.
     Icon Rail A/B compare button was dev-only scaffolding for Castillo,
     not ported. */
  :root { --rail-w: 220px; }
  body.vee-primary { --rail-w: 64px; }
  body.vee-primary.rail-pinned { --rail-w: 220px; }
  body.vee-primary .rail { width: 64px; padding-left: 8px; padding-right: 8px; }
  body.vee-primary.rail-pinned .rail { width: 220px; padding-left: 16px; padding-right: 16px; }
  body.vee-primary .app-main { margin-left: 64px; }
  body.vee-primary.rail-pinned .app-main { margin-left: 220px; }
  .rail-brand, .rail-item { transition: justify-content 0s; }
  body.vee-primary .rail-brand { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
  body.vee-primary.rail-pinned .rail-brand { justify-content: flex-start; padding-left: 6px; padding-right: 6px; gap: 9px; }
  body.vee-primary .rail-item { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
  body.vee-primary.rail-pinned .rail-item { justify-content: flex-start; gap: 11px; padding-left: 12px; padding-right: 12px; }
  .rail-brand-word, .rail-item-label { transition: opacity .18s ease; white-space: nowrap; }
  body.vee-primary .rail-brand-word, body.vee-primary .rail-item-label { opacity: 0; width: 0; overflow: hidden; }
  body.vee-primary.rail-pinned .rail-brand-word, body.vee-primary.rail-pinned .rail-item-label { opacity: 1; width: auto; transition-delay: .1s; }
  .rail-site-tag {
    font: 10px/1 var(--mono); color: var(--text-dim); padding: 0 6px 18px; text-transform: uppercase; letter-spacing: .06em;
    border-bottom: 1px solid var(--border-soft); margin-bottom: 14px;
    max-height: 44px; overflow: hidden;
    transition: max-height .3s ease, opacity .18s ease, margin-bottom .3s ease, padding-bottom .3s ease, border-color .3s ease;
  }
  body.vee-primary .rail-site-tag { max-height: 0; opacity: 0; margin-bottom: 0; padding-bottom: 0; border-bottom-color: transparent; }
  body.vee-primary.rail-pinned .rail-site-tag { max-height: 44px; opacity: 1; margin-bottom: 14px; padding-bottom: 18px; border-bottom-color: var(--border-soft); }
  .rail-foot {
    max-height: 320px; overflow: hidden;
    transition: max-height .3s ease, opacity .18s ease, padding-top .3s ease, border-color .3s ease;
  }
  /* REQ-202609022300: collapsed 64px keeps Day above Sign out on a 44px
     frost pad for client, Superadmin, and QA-lite. Ambient + View As live
     in .rail-foot-tools (hidden collapsed). QA still hides View As via
     body.qa-lite #viewas-toggle-btn. */
  body.vee-primary .rail-foot {
    max-height: none; min-height: 104px; overflow: visible;
    display: flex; flex-direction: column; justify-content: flex-end;
    align-items: center; gap: 4px; opacity: 1; padding-top: 8px;
    border-top-color: var(--border-soft); pointer-events: auto;
  }
  body.vee-primary.rail-pinned .rail-foot {
    max-height: 320px; min-height: 0; overflow: hidden; justify-content: flex-start;
    align-items: stretch; gap: 2px; padding-top: 14px; border-top-color: var(--border-soft); pointer-events: auto;
  }
  .rail-foot-tools {
    overflow: hidden;
    transition: max-height .3s ease, opacity .18s ease, margin .3s ease;
  }
  body.vee-primary .rail-foot-tools { max-height: 0; opacity: 0; margin: 0; pointer-events: none; }
  body.vee-primary.rail-pinned .rail-foot-tools { max-height: 240px; opacity: 1; pointer-events: auto; }
  .rail-foot-pad { display: flex; flex-direction: column; gap: 2px; width: 100%; }
  body.vee-primary .rail-foot-pad {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    margin: 0 auto;
    padding: 6px 4px;
    gap: 4px;
    pointer-events: auto;
    border-radius: 12px;
    background: rgba(9, 12, 16, .68);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, .12);
    box-sizing: border-box;
    align-items: center;
    overflow: hidden;
  }
  body.vee-primary.rail-pinned .rail-foot-pad {
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    gap: 2px;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    align-items: stretch;
    overflow: visible;
  }
  body.vee-primary .rail-signout,
  body.vee-primary #time-toggle {
    justify-content: center; gap: 0; padding: 0; flex: none; min-height: 32px;
    color: var(--text);
    pointer-events: auto;
  }
  body.vee-primary .rail-signout svg,
  body.vee-primary #time-toggle svg {
    width: 15px; height: 15px; stroke-width: 2.1; opacity: 1;
  }
  body.vee-primary .rail-signout:hover,
  body.vee-primary #time-toggle:hover { color: var(--text); background: transparent; }
  body.vee-primary.rail-pinned .rail-signout,
  body.vee-primary.rail-pinned #time-toggle {
    justify-content: flex-start; gap: 8px; padding: 8px 12px; min-height: 0;
    color: var(--text-dim);
  }
  body.vee-primary.rail-pinned .rail-signout svg,
  body.vee-primary.rail-pinned #time-toggle svg {
    width: 13px; height: 13px; stroke-width: 1.8; opacity: .85;
  }
  .rail-signout-label, .rail-time-label { transition: opacity .18s ease; white-space: nowrap; }
  body.vee-primary .rail-signout-label,
  body.vee-primary .rail-time-label { opacity: 0; width: 0; overflow: hidden; }
  body.vee-primary.rail-pinned .rail-signout-label,
  body.vee-primary.rail-pinned .rail-time-label { opacity: 1; width: auto; transition-delay: .1s; }
  /* Edge chevron — the one persistent, always-visible affordance the icon
     rail can expand from. Half-outside the rail's right edge. */
  .rail-collapse-toggle {
    display: none; position: absolute; top: 50%; right: -15px; transform: translateY(-50%);
    width: 28px; height: 40px; border-radius: 999px; align-items: center; justify-content: center;
    background: rgba(12,18,26,.95); border: 1px solid rgba(56,214,255,.65); color: #7ee7ff;
    box-shadow: 0 0 0 1px rgba(56,214,255,.2), 0 0 14px rgba(56,214,255,.45);
    cursor: pointer; z-index: 42; padding: 0;
    transition: color .15s, border-color .15s, box-shadow .15s, background .15s;
  }
  .rail-collapse-toggle svg { width: 14px; height: 14px; transition: transform .3s cubic-bezier(.2,.9,.3,1); }
  .rail-collapse-toggle:hover {
    color: #fff; border-color: var(--accent); background: rgba(18,32,44,.98);
    box-shadow: 0 0 0 1px rgba(56,214,255,.4), 0 0 20px rgba(56,214,255,.7);
  }
  body.vee-primary .rail-collapse-toggle { display: flex; }
  body.vee-primary.rail-pinned .rail-collapse-toggle svg { transform: rotate(180deg); }

  /* ---- Global scenic background (blurred hero photo, shows through behind every non-Sites section) ---- */
  .global-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
  .global-bg img {
    position: absolute;
    top: calc(-6% - 40px); right: auto; bottom: auto; left: calc(-6% - 40px);
    width: calc(112% + 80px); height: calc(112% + 80px);
    object-fit: cover; object-position: center 40%;
    opacity: 0; transition: opacity 1.2s ease-in-out;
    filter: brightness(.4) saturate(.85) blur(3px);
  }
  .global-bg img.active { opacity: 1; }
  .global-bg.suppressed { opacity: 0; }
  .global-bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(5,7,10,.55) 0%, rgba(5,7,10,.78) 100%);
  }
  body[data-time="night"] .global-bg::after { background: linear-gradient(to bottom, rgba(19,26,36,.5) 0%, rgba(19,26,36,.72) 100%); }

  /* ---- TSK-202608140xxx fidelity port: 5-slot time-of-day scenic
     background (morning/noon/afternoon/evening/night), starfield, App
     Launcher Tray, Portal Motion slider — ported from the Tomás
     SHIP-verdicted mockup (2026-08-12-v1-canvas-vee-primary-concept-v3.html)
     into this file, which /portal actually serves. This block is additive:
     it drives the NEW #bg-morning/noon/afternoon/evening/night images inside
     #global-bg; it does not touch .hero-img/.hero (the separate Sites-view
     banner using hero-day.jpg/hero-night.jpg) or the existing applyTime()
     day/night toggle, which stays wired to that separate banner unchanged. */

  /* Night/Evening blur fix (mockup, 2026-08-13) — unconditional, narrower
     blur for these two slots only so the sharp animated starfield canvas
     doesn't fight the photo's own baked-in stars smeared by the shared 3px
     blur every other slot needs for text legibility. */
  #bg-night.active, #bg-evening.active { filter: brightness(.4) saturate(.85) blur(1.5px); }

  /* TSK-202608160344 — Home photo treatment. Scoped to body.on-home /
     body.client-tier so Superadmin Sites kept the dim admin-shell look.
     CHG-202608171405: Superadmin Sites now uses the same full-window photo
     via body.sa-scenic / body.on-sites — not body.vee-primary (portal also
     has that class). */
  body.client-tier,
  body.sa-scenic {
    padding: 0;
    background-image: none;
  }
  /* TSK-202608201251 fix (Tomás QA, 2026-08-25): only Home has its own
     .home-fade backlay now (moved there in the Home/Spaces split) — this
     fallback opacity:0 must stay scoped to on-home only, matching the
     mockup's own approach. Leaving on-sites here (as it was) kills the only
     darkening Spaces has, since Spaces never got its own .home-fade — a
     page-wide legibility failure (domain text, "+Add tags", disabled
     buttons all render against the undarkened photo). Spaces now falls
     back to this global overlay for its darkening, same as every other
     non-Home section. */
  body.client-tier.on-sites .global-bg::after { opacity: 0; }
  body.client-tier.on-sites .home-fade { display: none; }
  body.on-home .global-bg::after { opacity: 0; }
  body.on-home .global-bg img,
  body.on-sites .global-bg img { filter: brightness(.85) saturate(.95) blur(3px); }
  body.on-home #bg-night.active, body.on-home #bg-evening.active,
  body.on-sites #bg-night.active, body.on-sites #bg-evening.active { filter: brightness(.85) saturate(.95) blur(1.5px); }
  #home-view { position: relative; }
  #sites-view { position: relative; }
  body.on-home #home-view .hero,
  body.on-home #home-view .dash-wrap { position: relative; z-index: 2; }
  body.on-home #home-view .hero-fade,
  body.on-home #home-view .hero-vignette { display: none; }
  /* TSK-202608201251 (Home/Spaces split, 2026-08-25): #sites-hero moved from
     #sites-view into #home-view (Home is Superadmin's landing now, Spaces
     has no hero at all) — retargeted on-sites -> on-home to match. Values
     unchanged; #sites-hero's photo/fade/vignette were already suppressed in
     favor of the #global-bg scenic photo (CHG-202608171405), same as
     before, just under the new body class. */
  body.on-home #sites-hero .hero-img,
  body.on-home #sites-hero .hero-fade,
  body.on-home #sites-hero .hero-vignette { display: none; }
  body.on-home #sites-hero {
    height: 46vh; min-height: 380px; overflow: visible; margin: 0;
  }
  body.on-sites #sites-view .dash-wrap { position: relative; z-index: 2; }
  .home-fade {
    position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: linear-gradient(to bottom, rgba(5,7,10,0) 0, rgba(5,7,10,0) 32vh, rgba(5,7,10,.08) 40vh, rgba(5,7,10,.82) 50vh, rgba(5,7,10,.82) 100%);
  }
  #home-view .hero { height: 46vh; min-height: 380px; overflow: visible; margin: 0; }
  #home-view .dash-wrap { width: 100%; max-width: 900px; margin: -40px auto 0; padding: 0 16px 64px; }
  #home-view .quick-grid { margin-top: 28px; }

  /* Sites view's .dash-wrap had no horizontal inset of its own, so the
     health-strip/site-grid content shared the exact same left/right edge
     as .wrap and .home-fade behind it — the site cards visually touched
     the fade's boundary. Home already insets its .dash-wrap 30px from
     .wrap on each side (900px inside a 960px .wrap); mirrored here so
     Sites gets the same breathing room from the backlay, pixel for pixel. */
  #sites-view .dash-wrap { padding: 0 30px 64px; }

  .portal-rays { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
  .portal-ray {
    position: absolute; width: 220vmax; height: 220vmax; left: 50%; top: 50%; margin-left: -110vmax; margin-top: -110vmax;
    background: conic-gradient(from 0deg,
      transparent 0deg, var(--ray-1) 3deg, transparent 9deg,
      transparent 176deg, var(--ray-2) 180deg, transparent 186deg,
      transparent 360deg);
    opacity: var(--ray-opacity); mix-blend-mode: screen;
    animation: rayRotate calc(52s * var(--motion-scale)) linear infinite;
  }
  @keyframes rayRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  body[data-portal-look="daylight"] .portal-ray {
    animation: glowpulse calc(7s * var(--motion-scale)) ease-in-out infinite;
    transform: rotate(18deg);
  }

  body[data-portal-look="dusk"] {
    color-scheme: dark;
    --bg: #161f2a;
    --surface: rgba(58, 74, 92, .38);
    --surface-3: rgba(70, 88, 108, .42);
    --border: rgba(255, 214, 178, .14);
    --border-soft: rgba(255, 214, 178, .07);
    --text: #f3ecdf;
    --text-muted: #c2b6a5;
    --text-dim: #8d8172;
    --accent-glow: rgba(56, 214, 255, .42);
    --accent-soft: rgba(56, 214, 255, .17);
    --rim-amber: #e6a466;
    --panel-glass: linear-gradient(160deg, rgba(235,150,90,.22) 0%, rgba(28,38,50,.74) 48%, rgba(56,170,214,.2) 100%);
    --panel-glass-strong: linear-gradient(160deg, rgba(235,150,90,.24) 0%, rgba(24,33,44,.92) 48%, rgba(56,170,214,.22) 100%);
    --chrome-glass: linear-gradient(155deg, rgba(235,150,90,.22) 0%, rgba(22,31,42,.68) 45%, rgba(56,170,214,.2) 100%);
    --chrome-glass-strong: linear-gradient(155deg, rgba(235,150,90,.26) 0%, rgba(18,26,35,.9) 45%, rgba(56,170,214,.22) 100%);
    --ray-1: rgba(56, 214, 255, .16);
    --ray-2: rgba(235, 150, 90, .26);
    --ray-opacity: .4;
    --motion-scale: 1.7;
    --type-scale: 1.08;
  }
  body[data-portal-look="daylight"] {
    color-scheme: light;
    --bg: #f5f0e8;
    --surface: rgba(255, 255, 255, .72);
    --surface-3: rgba(233, 224, 210, .78);
    --border: rgba(64, 54, 42, .16);
    --border-soft: rgba(64, 54, 42, .08);
    --text: #2b2620;
    --text-muted: #5c5346;
    --text-dim: #7d745f;
    --accent: #0f8fc2;
    --accent-dim: #0c749f;
    --accent-glow: rgba(15, 143, 194, .28);
    --accent-soft: rgba(15, 143, 194, .12);
    --good: #14855f;
    --warn: #a3660a;
    --rim-amber: #a8712f;
    --panel-glass: rgba(255, 255, 255, .84);
    --panel-glass-strong: rgba(255, 255, 255, .95);
    --chrome-glass: rgba(255, 255, 255, .74);
    --chrome-glass-strong: rgba(255, 255, 255, .92);
    --ray-1: rgba(15, 143, 194, .07);
    --ray-2: rgba(168, 113, 47, .09);
    --ray-opacity: .16;
    --motion-scale: 3.6;
    --type-scale: 1.32;
  }

  .portal-look-swatches { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
  .portal-look-row {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    background: none; border: 1px solid transparent; border-radius: 8px; padding: 8px 10px;
    color: inherit; cursor: pointer;
  }
  .portal-look-row:hover, .portal-look-row:focus-visible { background: rgba(255,255,255,.05); border-color: var(--border); outline: none; }
  .portal-look-row.active { border-color: var(--accent-glow); background: var(--accent-soft); }
  .portal-look-swatch { width: 34px; height: 22px; border-radius: 5px; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
  .portal-look-swatch.nightfall { background: linear-gradient(135deg, #05070a 0%, #0d2230 55%, #1c4356 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 9px 0 rgba(56,214,255,.4); }
  .portal-look-swatch.dusk { background: linear-gradient(135deg, #161f2a 0%, #3a4a5c 45%, #e6a466 100%); }
  .portal-look-swatch.daylight { background: linear-gradient(135deg, #faf6f0 0%, #ecdfcb 60%, #0f8fc2 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); }
  .portal-look-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .portal-look-name { font-size: 12.5px; font-weight: 600; color: var(--text); }
  .portal-look-tagline { font-size: 10.5px; color: var(--text-dim); line-height: 1.35; }
  .portal-look-check { width: 14px; flex: none; text-align: center; color: var(--accent); font-size: 12px; opacity: 0; }
  .portal-look-row.active .portal-look-check { opacity: 1; }

  /* ---- Starfield (mockup, 2026-08-12/13) — real twinkling points drawn on
     canvas so each star's drift/twinkle has its own phase, plus window-pane
     containment for Night/Evening so stars only show through the photo's own
     window rather than spreading across the whole page. */
  .starfield { position: fixed; top: -24px; left: -24px; z-index: -1; pointer-events: none; will-change: transform; opacity: var(--time-star-opacity, 1); transition: opacity .6s ease; }

  /* ---- App Tray (mockup, 2026-08-13) — the rail-brand 9-dot glyph's
     app-switcher panel. ---- */
  .app-tray {
    position: fixed; z-index: 63; width: 268px; display: flex; flex-direction: column;
    background: var(--panel-glass-strong, rgba(14,19,26,.92)); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
    border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.75);
    opacity: 0; pointer-events: none; transform: scale(.94); transform-origin: top left; transition: opacity .18s ease, transform .18s ease;
  }
  .app-tray.open { opacity: 1; pointer-events: auto; transform: scale(1); }
  .app-tray-head {
    display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border-soft);
    font: 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); flex: none;
  }
  .app-tray-body { display: grid; grid-template-columns: repeat(3, 72px); gap: 12px; padding: 14px; max-height: 240px; overflow-y: auto; justify-content: center; }
  .app-tile {
    position: relative; width: 72px; height: 72px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
    transition: border-color .15s, background .15s, opacity .15s;
  }
  .app-tile-icon { color: var(--text-muted); display: flex; }
  .app-tile-label { font: 9px var(--mono); color: var(--text-dim); text-align: center; line-height: 1.15; }
  .app-tile.active { border-color: var(--accent); background: var(--accent-soft); }
  .app-tile.active .app-tile-icon { color: var(--accent); filter: drop-shadow(0 0 4px var(--accent-glow)); }
  .app-tile.active .app-tile-label { color: var(--text); }
  .app-tile-current-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 5px 1px var(--accent-glow); }
  .app-tile.dimmed { opacity: .5; }
  .app-tile.dimmed:hover, .app-tile.dimmed:focus-visible { opacity: .8; border-color: var(--text-dim); }
  .app-tile:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-glow); }
  .app-tray-toast {
    position: fixed; z-index: 67; transform: translate(-50%, -100%); white-space: nowrap;
    font: 11px var(--mono); color: var(--rim-amber, #e0b578); background: rgba(9,12,16,.42); border: 1px solid rgba(224,181,120,.4);
    border-radius: 999px; padding: 5px 12px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
  }
  .app-tray-toast.show { opacity: 1; transform: translate(-50%, -130%); }

  /* ---- Portal motion slider (mockup, 2026-08-13) — continuous "Full
     motion" <-> "Less motion" control. Mockup's home is a Settings panel
     this file doesn't have built yet, so it's placed in the rail foot
     instead (Elias judgment call, flagged in the ticket) — same control,
     same behavior, different location pending a real Settings panel. */
  .motion-slider-wrap { display: flex; align-items: center; gap: 10px; }
  .motion-slider-end { font: 10px var(--mono); color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
  .motion-slider { -webkit-appearance: none; appearance: none; width: 140px; height: 18px; background: transparent; cursor: pointer; margin: 0; }
  .motion-slider::-webkit-slider-runnable-track { height: 3px; border-radius: 999px; background: var(--border); }
  .motion-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; margin-top: -5.5px;
    background: var(--accent); box-shadow: 0 0 6px 1px var(--accent-glow); border: none;
  }
  .motion-slider::-moz-range-track { height: 3px; border-radius: 999px; background: var(--border); }
  .motion-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px 1px var(--accent-glow); border: none; }
  .motion-slider:focus-visible { outline: none; }
  .motion-slider:focus-visible::-webkit-slider-thumb, .motion-slider:focus-visible::-moz-range-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }


  /* Ring color row (REQ-202608191503) — same Portal appearance card as the
     motion slider, not My Portal Look. Visual swatch CSS lives in
     ring-cursor.js so public sites get the ring without this stylesheet.
     These layout rules are Canvas-only (portal + Superadmin both have the
     row). Public sites do not load this file. */
  .v1-ring-settings-row {
    display: flex; justify-content: space-between; align-items: center; gap: 20px;
    padding: 14px 0 0; margin-top: 14px; border-top: 1px solid var(--border-soft);
  }
  .v1-ring-settings-label { font-size: 13px; font-weight: 500; color: var(--text); }
  .v1-ring-settings-sub { font-size: 12px; color: var(--text-dim); margin-top: 3px; font-family: var(--mono); }
  @media (max-width: 720px) {
    .v1-ring-settings-row { flex-direction: column; align-items: flex-start; }
  }


  /* ---- Hero (Sites view only) ---- */
  .hero { position: relative; width: 100%; height: 44vh; min-height: 320px; overflow: hidden; margin: 0 0 -48px; }
  .hero-img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%;
    opacity: 0; transition: opacity 1.2s ease-in-out;
  }
  .hero-img.active { opacity: 1; }
  .hero-fade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(5,7,10,0) 0%, rgba(5,7,10,.2) 60%, rgba(5,7,10,.85) 88%, var(--bg) 100%); }
  body[data-time="night"] .hero-fade { background: linear-gradient(to bottom, rgba(19,26,36,0) 0%, rgba(19,26,36,.25) 60%, rgba(19,26,36,.85) 88%, var(--bg) 100%); }
  .hero-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,.35) 100%); }
  /* Shared container so the greeting pill + status dock read as one designed hero element,
     not two chips independently floating on the photo (Castillo's 2026-07-30 18:30 feedback). */
  .hero-status-group {
    position: relative; z-index: 5; max-width: 640px; margin: 9vh auto 0; padding: 22px 24px 26px;
    display: flex; flex-direction: column; align-items: center; gap: 20px;
    background: rgba(9,13,18,.24); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.07); border-radius: 18px;
  }
  .hero-center { position: relative; z-index: 5; max-width: 640px; margin: 0; text-align: center; padding: 0 24px; }
  #home-view .hero-center { margin: 3vh auto 0; }
  .hero-greeting-bar {
    display: inline-block; background: rgba(5,7,10,.6); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: 14px 36px;
  }
  body[data-time="night"] .hero-greeting-bar { background: rgba(19,26,36,.6); }
  .hero-greeting-bar span { font: 300 24px/1 Georgia, "Iowan Old Style", serif; color: #fff; letter-spacing: .01em; }
  /* .glass-dock ("Portfolio status: N current") REMOVED (TSK-202608201251,
     Home/Spaces split, 2026-08-25) — that count now lives once, on Home's
     health strip (#stat-sites), not duplicated as a second hero-level
     readout. No other consumer of this class existed (Superadmin-only). */
  .dash-wrap { position: relative; z-index: 5; padding-top: 48px; }

  /* ---- Client-tier Home hero topbar + Site Health card (TSK-202608140xxx
     round 2 fidelity port) — ported from the mockup's .hero-topbar/
     .glass-panel/.health-row/.activity-row, ported near-verbatim. Reuses
     this file's own pre-existing (previously unused/dead) .brand/.brand-tag
     CSS from an earlier Superadmin-only concept pass rather than defining a
     second, near-identical set. */
  .hero-topbar { position: relative; z-index: 5; display: flex; justify-content: space-between; align-items: center; padding: 26px 40px; max-width: 1100px; margin: 0 auto; }
  #home-view .hero-topbar {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    width: 100%; max-width: none;
  }
  #home-view .hero-topbar .brand { justify-self: start; }
  #home-view .hero-topbar .signout-ghost { justify-self: center; grid-column: 2; }
  .hero-topbar .brand { display: flex; align-items: center; gap: 9px; }
  .hero-topbar .brand-glyph circle { fill: #fff; filter: drop-shadow(0 0 4px rgba(255,255,255,.6)); animation: glowpulse 3.2s ease-in-out infinite; }
  .hero-topbar .brand-word { font: 700 14px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
  .hero-topbar .brand-tag { font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.4); border-radius: 3px; padding: 3px 6px; margin-left: 2px; backdrop-filter: blur(6px); }
  .signout-ghost { background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.25); color: #fff; font: 12px var(--mono); padding: 6px 12px; border-radius: 4px; backdrop-filter: blur(6px); cursor: pointer; }
  .hero-edit-cta { position: relative; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 30px auto 0; }
  .edit-btn {
    display: flex; align-items: center; gap: 10px; border: 1px solid var(--accent); border-radius: 999px;
    background: linear-gradient(180deg, rgba(56,214,255,.22), rgba(56,214,255,.1));
    color: #fff; font: 600 15px/1 system-ui, sans-serif; padding: 16px 34px; cursor: pointer;
    box-shadow: 0 0 0 1px rgba(56,214,255,.15), 0 20px 50px -18px rgba(56,214,255,.55), inset 0 1px 0 rgba(255,255,255,.15);
    transition: transform .15s, box-shadow .15s; text-decoration: none;
  }
  .edit-btn:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(56,214,255,.3), 0 24px 60px -16px rgba(56,214,255,.7), inset 0 1px 0 rgba(255,255,255,.2); }
  .edit-btn svg { flex: none; }
  .edit-btn.disabled { opacity: .5; pointer-events: none; filter: grayscale(.4); }
  .hero-live-link { font: 12px var(--mono); color: var(--accent); letter-spacing: .02em; text-decoration: none; }
  .hero-live-link:hover { text-decoration: underline; }
  .hero-edit-sub { font: 11px var(--mono); color: rgba(255,255,255,.6); letter-spacing: .02em; }
  .glass-panel {
    background: var(--surface); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid var(--border); border-radius: 8px; padding: 20px 22px;
  }
  /* REQ-202609081203 — desk pin. Quiet secondary in the health card, not a bar. */
  .desk-pin { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 18px; padding: 0 0 16px; border-bottom: 1px solid var(--border-soft); }
  .desk-pin-marks { display: flex; gap: 8px; flex: none; }
  .desk-pin-mark {
    width: 28px; height: 28px; border-radius: 7px; overflow: hidden;
    display: block; flex: none; background: #080a0e;
  }
  .desk-pin-mark img { width: 100%; height: 100%; display: block; }
  .desk-pin-copy { min-width: 0; flex: 1; }
  .desk-pin-btn {
    display: inline; background: none; border: none; padding: 0; margin: 0;
    font: calc(13px * var(--type-scale))/1.45 var(--mono);
    color: var(--text-muted); cursor: pointer; text-align: left;
    transition: color .18s ease, opacity .18s ease;
  }
  .desk-pin-btn:hover { color: var(--text); }
  .desk-pin-sub { margin: 4px 0 0; font: calc(12px * var(--type-scale))/1.45 var(--mono); color: var(--text-dim); }
  .desk-pin-hint { margin: 4px 0 0; font: calc(12px * var(--type-scale))/1.45 var(--mono); color: var(--text-dim); }
  .desk-pin[data-state="installed"] .desk-pin-sub,
  .desk-pin[data-state="installed"] .desk-pin-hint { display: none; }
  .health-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 20px; }
  .activity-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); font-size: 12.5px; }
  .activity-row:last-child { border-bottom: none; padding-bottom: 0; }
  .activity-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; box-shadow: 0 0 6px 1px var(--accent-glow); }
  .activity-text { flex: 1; color: var(--text-muted); }
  .activity-text strong { color: var(--text); font-weight: 600; }
  .activity-time { color: var(--text-dim); font-family: var(--mono); font-size: 11px; flex: none; }
  .activity-empty { color: var(--text-dim); font-size: 12.5px; padding: 4px 0; }

  /* REQ-202608270902 — client Home only. Superadmin fake feed stays untouched. */
  body.client-tier #home-view .activity-row.is-ship .activity-text { color: var(--text); }
  body.client-tier #home-view .activity-feed { display: flex; flex-direction: column; }
  body.client-tier #home-view .activity-list .activity-row:last-child { border-bottom: none; padding-bottom: 0; }
  body.client-tier #home-view .activity-copy {
    flex: none; width: 26px; height: 26px; margin: 0; padding: 0;
    display: grid; place-items: center; border: none; background: transparent;
    color: var(--text-dim); opacity: .38; cursor: pointer; border-radius: 4px;
    transition: opacity .15s, color .15s;
  }
  body.client-tier #home-view .activity-copy svg { display: block; }
  body.client-tier #home-view .activity-row:hover .activity-copy,
  body.client-tier #home-view .activity-copy:focus-visible { opacity: 1; color: var(--accent); }
  body.client-tier #home-view .activity-copy:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--accent-glow); }
  body.client-tier #home-view .activity-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-wrap: wrap; margin-top: 6px; padding-top: 10px;
    border-top: 1px solid var(--border-soft);
  }
  body.client-tier #home-view .activity-more {
    margin: 0; padding: 0; border: none; background: none; cursor: pointer;
    font: 11px var(--mono); letter-spacing: .08em;
    text-transform: uppercase; color: var(--text-dim);
  }
  body.client-tier #home-view .activity-more:hover,
  body.client-tier #home-view .activity-more:focus-visible { color: var(--accent); }
  body.client-tier #home-view .activity-more:focus-visible { outline: none; }
  body.client-tier #home-view .activity-pager { display: flex; align-items: center; gap: 14px; }
  body.client-tier #home-view .activity-pager[hidden] { display: none; }
  body.client-tier #home-view .activity-page-btn {
    margin: 0; padding: 0; border: none; background: none; cursor: pointer;
    font: 11px var(--mono); color: var(--text-dim);
  }
  body.client-tier #home-view .activity-page-btn:hover:not(:disabled),
  body.client-tier #home-view .activity-page-btn:focus-visible:not(:disabled) { color: var(--accent); }
  body.client-tier #home-view .activity-page-btn:disabled { opacity: .35; cursor: default; }
  body.client-tier #home-view .activity-page-mark { font: 11px var(--mono); color: var(--text-dim); }
  body.client-tier #home-view .activity-copy-toast {
    font: 11px var(--mono); color: var(--text-dim);
    opacity: 0; transition: opacity .18s; pointer-events: none;
  }
  body.client-tier #home-view .activity-copy-toast.is-on { opacity: 1; }

  /* ---- Home dashboard quick-cards (ISS-202608151051 fidelity fix, 2026-08-15)
     — ported from the approved mockup's .quick-card / .quick-card-stat-x /
     .quick-card-mini-list classes (2026-08-12-v1-canvas-vee-primary-concept-v3.html),
     replacing the plain #home-quicklinks button row that was never part of
     the approved mockup. Dropped the mockup's calc(Npx * var(--type-scale))
     wrapper — this build has no --type-scale variable, same convention
     already used above for .health-row/.activity-row when those were ported. ---- */
  .quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 16px; }
  .quick-card-body { display: flex; flex-direction: column; gap: 5px; margin-top: 2px; }
  .quick-card-stat-row { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
  .quick-card-stat { display: flex; align-items: baseline; gap: 4px; }
  .quick-card-stat-value { font: 13px var(--mono); color: var(--text); }
  .quick-card-stat-value.good { color: var(--good); }
  .quick-card-stat-value.warn { color: var(--warn); }
  .quick-card-stat-label { font: 10px var(--mono); color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
  .quick-card-line { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }
  .quick-card-line strong { color: var(--text); font-weight: 600; }
  .quick-card-mini-list { display: flex; flex-direction: column; gap: 3px; }
  .quick-card-mini-item { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .quick-card {
    background: var(--surface); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--border); border-radius: 8px;
    padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; transition: border-color .15s, transform .15s;
  }
  .quick-card:hover { border-color: var(--accent-glow); transform: translateY(-2px); }
  .quick-card-icon { color: var(--accent); opacity: .9; }
  .quick-card-title { font-size: 13px; font-weight: 600; color: var(--text); }

  /* ---- Portfolio stats strip (Superadmin only — cross-tenant aggregate, hidden in View As) ----
     margin-bottom bumped 24px -> 44px (dashboard-spacing polish, 2026-08-25): this is a
     structural section boundary (bordered stats panel handing off to the tag filter /
     "Live sites" grid below it), the same kind of boundary .section-block + .section-block
     already uses 44px for elsewhere in this file — not the tighter 24px reserved for
     spacing *within* a related group. Confirmed too tight via a real gym screenshot before
     touching this (24px let the panel's bottom border read as almost touching the tag-filter
     row/site cards beneath it). CSS-only; no markup/nav structure changed.

     round 2 (border-bottom only, .topbar as reference) was corrected on round 3
     (2026-08-25): Castillo pointed at the client-tier portal's "Site Health" card
     (public/portal/index.html, .glass-panel, this file line ~738) as the actual
     reference — border-bottom-only made the panel read as floating numbers with an
     underline, not a card, which was a regression from what he asked for. Fix: match
     .glass-panel's own border/border-radius/padding/blur values here instead of
     .topbar's. The left/right-edge-alignment concern that motivated round 2 doesn't
     reappear with a full border restored — verified via a real gym screenshot at
     1800px: the 44px margin-bottom (round 1) plus a fully-boxed panel now reads as
     two clearly separate modules, same as .glass-panel does against the content
     below it in the client portal. Layout (flex row of 4 stats) stays .health-strip's
     own — only the border/radius/padding/blur are unified with .glass-panel. */
  .health-strip {
    display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 44px; padding: 20px 22px;
    background: var(--surface); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid var(--border); border-radius: 8px;
  }
  .health-stat { display: flex; flex-direction: column; gap: 3px; }
  .health-stat-value { font: 18px/1 var(--mono); color: var(--text); }
  .health-stat-value.accent { color: var(--accent); }
  .health-stat-value.warn { color: var(--warn); }
  /* .good was already used in markup (home-stat-status="Live") with no
     matching rule -- fell back to plain --text instead of green. Pre-existing
     gap, fixed here because the Leads "Not notified" tile below needs a real
     green state (0 unnotified is the healthy case) and this is the same class
     Home already reaches for. */
  .health-stat-value.good { color: var(--good); }
  .health-stat-label { font: 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); }

  /* ==== LEADS DASHBOARD (TSK-202608041325, gym-only build 2026-08-26) ====
     Read + mailto:/tel: reply only -- Form Editor (Recipients/Fields) is a
     separate, deferred surface, not built here. Ported from
     mockups/client-portal-mockup.html's #section-leads block: same
     .lead-grid/.lead-card geometry, same .lead-dot green/amber convention
     (mirrors .site-tile-version.current/.behind), same --good/--warn pair.
     The stat strip itself reuses .glass-panel/.health-row/.health-stat
     directly (already defined above for Home's Site Health card) rather than
     duplicating a second stat-tile component. */
  .lead-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
  .lead-card {
    background: var(--surface); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--border); border-radius: 8px;
    padding: 15px 16px; display: flex; flex-direction: column; gap: 8px; transition: border-color .15s, transform .15s;
  }
  .lead-card:hover { border-color: var(--accent-glow); transform: translateY(-2px); }
  .lead-card-top { display: flex; align-items: center; gap: 8px; }
  .lead-card-name { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lead-type-badge { font: 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; padding: 3px 6px; border-radius: 3px; flex: none; color: var(--accent); border: 1px solid var(--accent-glow); }
  .lead-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
  .lead-dot.sent { background: var(--good); box-shadow: 0 0 6px 1px rgba(46,230,184,.5); }
  .lead-dot.failed { background: var(--warn); box-shadow: 0 0 6px 1px rgba(255,176,32,.55); }
  .lead-card-contact { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 11px var(--mono); }
  .lead-card-contact a { color: var(--text-muted); text-decoration: none; border-bottom: 1px dotted var(--text-dim); }
  .lead-card-contact a:hover { color: var(--accent); border-bottom-color: var(--accent); }
  .lead-card-snippet { font-size: 11.5px; color: var(--text-muted); line-height: 1.45; }
  .lead-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
  .lead-card-time { font: 11px var(--mono); color: var(--text-dim); flex: 1; }
  .lead-notify-note { font: 10px var(--mono); color: var(--warn); }
  /* Reply/Call are <a> elements, not <button>s -- this file has no unscoped
     base rule for .btn-outline/.btn-primary-outline (only a body.client-tier
     #media-view/#media-modal-scoped override exists, further down), so they'd
     otherwise render as plain unstyled text links. Scoped to #site-leads-view
     the same way that Media Library override is scoped to its own view,
     rather than adding a second global button class that could affect other
     surfaces. */
  #site-leads-view .btn-outline, #site-leads-view .btn-primary-outline {
    display: inline-block; text-decoration: none; font: 12px var(--mono); padding: 6px 12px;
    border-radius: 4px; cursor: pointer; letter-spacing: 0;
  }
  #site-leads-view .btn-outline { border: 1px solid var(--border); background: rgba(255,255,255,.03); color: var(--text-muted); }
  #site-leads-view .btn-outline:hover { color: var(--accent); border-color: var(--accent); }
  #site-leads-view .btn-primary-outline { border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent); }
  #site-leads-view .btn-primary-outline:hover { background: rgba(56,214,255,.22); }

  /* ==== FORM EDITOR (TSK-202608261405) ====
     Recipients (instant-apply) + Fields (publish-gated) panel for the
     contact form -- Owner/Manager/Superadmin(View As) only, per the spec's
     deliberate Contributor exclusion (INC-202608041203's failure class).
     Ported from mockups/client-portal-mockup.html's #form-editor/.fe-*
     block near-verbatim per skill-mockup-fidelity-qa.md -- same chrome, same
     locked-row/draft-bar/preview-strip visual language the mockup already
     had Elias-verified against the spec. `calc(Npx * var(--type-scale))`
     simplified to plain px, same simplification the Leads block above
     already made porting into this file. Two rules NOT ported: .segmented
     and .field-note didn't exist anywhere in this file yet (mockup-only
     until now) -- added here since the Form Editor is the first real-engine
     surface that needs them; not scoped to #form-editor since they are
     generic, reusable primitives (segmented tab control, an input's
     small helper caption) any future panel can use as-is. */
  .segmented { display: flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
  .segmented button {
    font: 12px var(--mono); padding: 7px 14px; background: rgba(255,255,255,.02); border: none; color: var(--text-muted); cursor: pointer;
    border-right: 1px solid var(--border);
  }
  .segmented button:last-child { border-right: none; }
  .segmented button.active { background: var(--accent-soft); color: var(--accent); }
  .field-note { font: 11px var(--mono); color: var(--text-dim); margin: 4px 0 0; }

  .form-editor {
    position: fixed; z-index: 63; width: 380px; max-height: 560px; display: flex; flex-direction: column;
    background: var(--panel-glass-strong); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
    border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.75);
    opacity: 0; pointer-events: none; transform: scale(.96); transition: opacity .18s ease, transform .18s ease;
    /* Deliberate deviation from the mockup's anchored positioning (see the
       HTML comment above #form-editor for why) -- fixed, roughly centered
       in the viewport instead of anchored beside an in-page element. */
    top: 50%; right: 40px; transform: translateY(-50%) scale(.96);
  }
  .form-editor.open { opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1); }
  .form-editor-head {
    display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border-soft);
    font: 11px var(--mono); letter-spacing: .05em; color: var(--text-muted); flex: none;
  }
  .form-editor-body { flex: 1; overflow-y: auto; padding: 12px 14px 14px; }
  .form-editor-body .segmented { width: 100%; margin-bottom: 12px; }
  .form-editor-body .segmented button { flex: 1; }
  .fe-sub { font: 10px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); margin: 0 0 8px; }
  .fe-msg { font: 11px var(--mono); color: var(--text-dim); margin: 8px 0 0; min-height: 14px; }
  .fe-msg.ok { color: var(--good); }
  .fe-msg.err { color: #ff8a8a; }
  .fe-input {
    width: 100%; font: 12px var(--mono); color: var(--text); background: rgba(255,255,255,.04);
    border: 1px solid var(--border); border-radius: 5px; padding: 7px 9px; box-sizing: border-box;
  }
  .fe-input:focus { outline: 1px solid var(--accent); }
  .fe-row { display: flex; align-items: center; gap: 7px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
  .fe-row:last-of-type { border-bottom: none; }
  .fe-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .fe-row-email { font: 11px var(--mono); color: var(--text); overflow: hidden; text-overflow: ellipsis; }
  .fe-row-label { font: 10px var(--mono); color: var(--text-dim); }
  .fe-x { background: none; border: none; color: var(--text-dim); font-size: 13px; line-height: 1; cursor: pointer; padding: 2px 4px; flex: none; }
  .fe-x:hover { color: #ff8a8a; }
  .fe-x:disabled { opacity: .25; cursor: not-allowed; }
  .fe-add-row { display: flex; gap: 6px; margin-top: 10px; }
  .fe-add-row .fe-input { flex: 1; min-width: 0; }
  .fe-divider { border-top: 1px solid var(--border-soft); margin: 14px 0 12px; }

  .fe-field-row { display: flex; align-items: center; gap: 7px; padding: 8px 6px; border-radius: 5px; border-bottom: 1px solid var(--border-soft); }
  .fe-field-row.changed { background: rgba(255,176,32,.07); box-shadow: inset 2px 0 0 var(--warn); }
  .fe-field-row.locked { opacity: .78; }
  .fe-move { display: flex; flex-direction: column; gap: 1px; flex: none; }
  .fe-move button { background: none; border: none; color: var(--text-dim); font-size: 8px; line-height: 1; cursor: pointer; padding: 1px 2px; }
  .fe-move button:hover { color: var(--accent); }
  .fe-move button:disabled { opacity: .2; cursor: not-allowed; }
  .fe-field-label-input {
    flex: 1; min-width: 0; font: 11px var(--mono); color: var(--text); background: none; border: 1px solid transparent;
    border-radius: 4px; padding: 4px 5px;
  }
  .fe-field-label-input:hover:not(:disabled) { border-color: var(--border); }
  .fe-field-label-input:focus { border-color: var(--accent); outline: none; background: rgba(255,255,255,.04); }
  .fe-field-label-input:disabled { color: var(--text-muted); }
  .fe-type-badge { font: 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); border: 1px solid var(--border); border-radius: 3px; padding: 3px 5px; flex: none; }
  .fe-req { font: 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; border-radius: 3px; padding: 3px 5px; flex: none; cursor: pointer; background: none; border: 1px solid var(--border); color: var(--text-dim); }
  .fe-req.on { border-color: var(--warn); color: var(--warn); }
  .fe-req:disabled { cursor: not-allowed; }
  .fe-lock-icon { font-size: 9px; color: var(--text-dim); flex: none; }

  /* The publish gate. Deliberately loud -- a bad live edit breaks the real
     public contact form the instant it lands, the exact failure class
     INC-202608041203 came from. Draft state is never implied, it is stated. */
  .fe-draft-bar {
    display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 6px; margin-bottom: 12px;
    border: 1px solid var(--warn); background: rgba(255,176,32,.09);
  }
  .fe-draft-bar.clean { border-color: var(--good); background: rgba(46,230,184,.07); }
  .fe-draft-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); flex: none; animation: glowpulse calc(2s * var(--motion-scale)) ease-in-out infinite; }
  .fe-draft-bar.clean .fe-draft-dot { background: var(--good); animation: none; }
  .fe-draft-text { flex: 1; font: 10px/1.4 var(--mono); color: var(--warn); }
  .fe-draft-bar.clean .fe-draft-text { color: var(--good); }
  .fe-publish-row { display: flex; gap: 7px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
  .fe-publish-row button { flex: 1; font-size: 11px; padding: 8px 8px; }
  .fe-publish-row button:disabled { opacity: .4; cursor: not-allowed; }
  .fe-preview {
    border: 1px solid var(--border); border-radius: 6px; padding: 10px 11px; margin-bottom: 12px; background: rgba(255,255,255,.02);
  }
  .fe-preview-head { font: 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); margin-bottom: 9px; }
  .fe-preview .mock-field { margin-bottom: 8px; }
  .fe-preview .mock-field-label { font-size: 10px; }
  .fe-preview .mock-field-input { height: 22px; }
  .fe-preview .mock-field-input.tall { height: 38px; }
  .mock-field { margin-bottom: 12px; }
  .mock-field:last-child { margin-bottom: 0; }
  .mock-field-label { font: 11px var(--mono); color: var(--text-muted); display: block; margin-bottom: 5px; }
  .mock-field-label .req { color: var(--warn); }
  .mock-field-input { border: 1px solid var(--border); border-radius: 5px; background: rgba(255,255,255,.03); height: 30px; }
  .mock-field-input.tall { height: 60px; }
  .mock-field-input.select { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; font: 11px var(--mono); color: var(--text-dim); }
  /* Reuses the same unscoped-.btn-outline gap #site-leads-view already
     works around above -- this panel isn't nested inside #site-leads-view
     (it floats independently, position: fixed), so it needs its own scoped
     copy of the same button skin rather than inheriting that one. */
  #form-editor .btn-outline, #form-editor .btn-primary-outline {
    display: inline-block; text-decoration: none; font: 12px var(--mono); padding: 6px 12px;
    border-radius: 4px; cursor: pointer; letter-spacing: 0; border-width: 1px; border-style: solid;
  }
  #form-editor .btn-outline { border-color: var(--border); background: rgba(255,255,255,.03); color: var(--text-muted); }
  #form-editor .btn-outline:hover { color: var(--accent); border-color: var(--accent); }
  #form-editor .btn-primary-outline { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
  #form-editor .btn-primary-outline:hover { background: rgba(56,214,255,.22); }

  /* ---- View As mode ---- */
  .viewas-banner {
    position: fixed; top: 0; left: var(--rail-w, 220px); right: 0; z-index: 48; display: flex; align-items: center;
    justify-content: space-between; gap: 12px; padding: 10px 24px;
    background: rgba(255,176,32,.16); border-bottom: 1px solid rgba(255,176,32,.4);
    backdrop-filter: blur(12px); font: 12px var(--mono); color: var(--warn);
  }
  /* View As strip sits fully above Edit Mode (edit-live z 36). Stack, do not overlay. */
  body.viewas-active.edit-on #edit-live { top: var(--viewas-strip, 44px); }
  .viewas-banner.hide { display: none !important; }
  .viewas-banner button { padding: 5px 12px; font-size: 12px; }
  .viewas-panel {
    position: fixed; bottom: 90px; left: 16px; width: 260px; z-index: 46;
    background: rgba(12,17,23,.92); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid var(--border); border-radius: 8px; padding: 16px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7);
  }
  .viewas-panel.hide { display: none !important; }
  .viewas-panel label { margin-top: 10px; }
  .viewas-panel label:first-child { margin-top: 0; }
  body.viewas-active .app-main { padding-top: 40px; }

  /* ---- Site Context banner (TSK-202608010031 Round 2 / TSK-202608020150) ----
     Mirrors the View As banner's pinned-strip MECHANISM above (fixed position, same
     left/right offsets, same show/hide-via-.hide-class pattern) but is deliberately
     NOT styled to look alike: teal `--good` accent instead of View As's amber
     `--warn`, no "Viewing as" language anywhere. View As = a restricted role
     simulation (you're seeing LESS than full Superadmin). Site Context = full
     Superadmin privilege, just scoped to one site. If these ever looked alike, a
     correctly-full-power screen could be mistaken for a restricted simulation or
     vice versa — the exact confusion Elias's design review flagged. Also mutually
     exclusive with the View As banner by design, not just differently colored —
     see the viewAsActive check in updateSiteContextBanner() in the script below;
     the two are never shown at the same time. */
  .site-context-banner {
    position: fixed; top: 0; left: 220px; right: 0; z-index: 45; display: flex; align-items: center;
    justify-content: space-between; gap: 12px; padding: 10px 24px;
    background: rgba(46,230,184,.12); border-bottom: 1px solid rgba(46,230,184,.35);
    backdrop-filter: blur(12px); font: 12px var(--mono); color: var(--good);
  }
  .site-context-banner.hide { display: none !important; }
  .site-context-left { display: flex; align-items: center; gap: 14px; }
  .site-context-banner button { padding: 5px 12px; font-size: 12px; }
  .site-context-switch select { width: auto; padding: 5px 8px; font: 12px var(--mono); }
  body.site-context-active .app-main { padding-top: 40px; }

  /* ---- Floating assistant (Vee) + paged orbit-carousel orb menu ----
     TSK-202608010031: ports the proven paged-carousel mechanism from the
     client-portal concept Artifact (bde0ddae-f698-4ac8-b3ac-7d923a91e2ff),
     replacing the prior single fixed 4-slot ring (that scope decision is
     superseded by this ticket). Mechanism (geometry, easing, paging) is
     reused as-is, unchanged from the concept — only the CONTENT differs
     per v1-canvas-portal-rbac-spec-v0.1.md's Superadmin item-set table.
     CHG-202608191739: Vee is an empty --ring-rgb ring (same language as the
     pointer). No filled .sphere-core, no sphereFloat, no expanding pulse. */
  .assistant-sphere {
    position: fixed; right: 36px; top: 50%; z-index: 70;
    width: 54px; height: 54px; padding: 0;
    background: none; border: none; color: inherit;
    border-radius: 50%; box-shadow: none;
    font-weight: inherit; letter-spacing: inherit;
    transform: translateY(-50%);
    transition: transform .28s ease, filter .28s ease;
  }
  .assistant-sphere:hover,
  .assistant-sphere:focus-visible {
    background: none; box-shadow: none; border: none; color: inherit;
  }
  .assistant-sphere.is-selected { transform: translateY(-50%) scale(var(--vee-expand)); }
  .assistant-sphere.is-latched .vee-ring {
    box-shadow: 0 0 16px rgba(var(--ring-rgb), .62);
  }
  .vee-ring {
    position: absolute; inset: 3px; border-radius: 50%;
    border: 2px solid rgb(var(--ring-rgb));
    background-color: transparent;
    box-shadow: 0 0 10px rgba(var(--ring-rgb), .4);
    transition: background-color .28s ease, border-color .28s ease, box-shadow .28s ease;
  }
  .assistant-sphere.is-selected .vee-ring {
    background-color: rgba(var(--ring-rgb), 0.28);
  }
  .assistant-sphere:focus-visible { outline: none; }
  .assistant-sphere:focus-visible .vee-ring {
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgb(var(--ring-rgb));
  }

  .orb-menu { position: fixed; inset: 0; z-index: 69; pointer-events: none; }
  /* Plain non-positioned wrapper only — every child below is independently
     `position:fixed; right:63px; top:50%` relative to the viewport itself,
     not to this wrapper (a wrapper with its own fixed+transform would become
     a second containing block the children's right/top resolve against
     instead, per the concept build's own note on this). */
  .orb-anchor { display: contents; }

  .orb-backlay {
    position: fixed; right: 63px; top: 50%; width: 1000px; height: 1000px;
    transform: translate(50%, -50%); border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle,
      rgba(6,9,14,.62) 0, rgba(6,9,14,.58) 165px,
      rgba(6,9,14,.4) 330px, rgba(6,9,14,.14) 425px, rgba(6,9,14,0) 500px);
    opacity: 0; transition: opacity .35s ease;
  }
  .orb-menu.open .orb-backlay { opacity: 1; }

  /* The ring. A real 330px circle (radius 165px) centred on the sphere
     anchor, passing through every item slot below — all four slot pairs
     satisfy dx² + dy² = 27250, i.e. radius √27250 ≈ 165.08px. Centred at
     right:63px, so its right half falls off-screen — intended, not a bug. */
  .orb-arc-guide {
    position: fixed; right: 63px; top: 50%; width: 330px; height: 330px;
    transform: translate(50%, -50%); border-radius: 50%; pointer-events: none;
    border: 1px solid var(--accent-glow); box-shadow: inset 0 0 16px -2px var(--accent-glow);
    opacity: 0; transition: opacity .35s ease;
  }
  .orb-menu.open .orb-arc-guide { opacity: .55; }

  /* ISS-202608191927 — shared Vee item language for Superadmin + client portal
     (56×56 rounded-square icon + side label). Was gated on body.client-tier
     only, which left Superadmin on 92px text-in-circle because that page
     had no SVGs. Ungated: both surfaces load this sheet and share one chrome. */
  .orb-item {
    position: fixed; right: 63px; top: 50%; width: 56px; height: 56px; border-radius: 18px;
    background: var(--chrome-glass); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(255,255,255,.12); color: var(--text-muted);
    display: flex; align-items: center; justify-content: center; text-align: unset; padding: 0;
    cursor: pointer; pointer-events: none; opacity: 0;
    transform: translate(50%, -50%) translate(0, 0) scale(.3);
    transition: transform .34s cubic-bezier(.2,.9,.3,1.15), opacity .22s ease, color .15s, border-color .15s, background .15s;
    box-shadow: 0 10px 30px -12px rgba(0,0,0,.45);
  }
  .orb-item svg { flex: none; }
  .orb-item-label {
    position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%);
    white-space: nowrap; font: 400 12px/1 var(--mono); letter-spacing: .02em;
    color: var(--text-muted); text-shadow: 0 1px 4px rgba(0,0,0,.65), 0 1px 12px rgba(0,0,0,.4);
    background: linear-gradient(180deg, transparent, var(--chrome-glass-strong) 28%);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    padding: 8px 5px 9px; pointer-events: auto; max-width: none; word-break: normal;
  }
  .orb-item-label::after {
    content: ""; position: absolute; left: 2px; right: 2px; bottom: 2px; height: 1.5px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    box-shadow: 0 0 6px 1px var(--accent-glow), 0 0 14px 3px var(--accent-glow);
    opacity: .75; transition: opacity .15s, box-shadow .15s;
  }
  .orb-item:hover { color: var(--accent); border-color: var(--accent-glow); background: var(--chrome-glass-strong); }
  .orb-item:hover .orb-item-label { color: var(--accent); }
  .orb-item:hover .orb-item-label::after { opacity: 1; box-shadow: 0 0 8px 2px var(--accent-glow), 0 0 20px 5px var(--accent-glow); }
  .orb-menu.open .orb-item { opacity: 1; pointer-events: auto; transform: translate(50%, -50%) translate(var(--dx), var(--dy)) scale(1); }
  /* Open/close stagger. --slot-delay is written by the orb model in JS from
     the item's slot index (0-3 -> .02/.06/.1/.14s) rather than nth-of-type,
     because the arc guide and the More control are siblings of the same
     element type, so nth-of-type would not reliably match the items alone. */
  .orb-menu.open .orb-item { transition-delay: var(--slot-delay, 0s); }
  /* While the carousel is turning, --dx/--dy are driven per animation frame
     by the JS orbit loop, so CSS must not transition them on top of that —
     higher specificity than the rule above so it also wins transition-delay. */
  .orb-menu.open .orb-item.orb-turning { transition: none; pointer-events: none; }
  /* CHG-202608201256 (Elias 2026-08-24, Addendum 2) — Undo/Redo/Save render
     visible-but-dimmed when there's nothing to do (empty stack, no pending
     draft), not hidden outright, so the arc's shape stays predictable even
     when an item is inert. Higher specificity than the base
     ".orb-menu.open .orb-item" rule above (one more class) so it correctly
     wins on opacity/pointer-events while keeping the identical transform,
     which is why the item's position never shifts when it (de)activates. */
  .orb-menu.open .orb-item.disabled { opacity: .35; pointer-events: none; cursor: default; }

  /* Paging control — sits ON the ring at the bottom of the arc (dx 5 / dy
     165, one slot-gap past the last item), the exact point new items rise
     from. Hidden via .hide whenever the current page set is a single page. */
  .orb-more {
    position: fixed; right: 63px; top: 50%; width: 46px; height: 46px; border-radius: 50%;
    background: rgba(14,19,26,.78); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid var(--border); color: var(--text-muted);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    cursor: pointer; pointer-events: none; opacity: 0;
    transform: translate(50%, -50%) translate(var(--dx), var(--dy)) scale(.3);
    transition: transform .34s cubic-bezier(.2,.9,.3,1.15), opacity .22s ease, color .15s, border-color .15s, background .15s;
    box-shadow: 0 10px 30px -12px rgba(0,0,0,.6);
  }
  .orb-menu.open .orb-more { opacity: 1; pointer-events: auto; transition-delay: .18s; transform: translate(50%, -50%) translate(var(--dx), var(--dy)) scale(1); }
  .orb-more:hover { color: var(--accent); border-color: var(--accent-glow); background: rgba(20,28,38,.85); }
  .orb-more:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
  .orb-more-chev { font-size: 14px; line-height: 1; }
  .orb-more-count { font: 8px/1 var(--mono); letter-spacing: .05em; opacity: .7; }
  /* "← Sites" slot-0 pin — amber glow, same accent used elsewhere for "this
     takes you out of what you're doing," distinct from the cyan action items. */
  .orb-item[data-orb-action="gosites"] { border-color: rgba(224,181,120,.7); }
  .orb-item[data-orb-action="gosites"] .orb-item-label { color: #e0b578; }
  .orb-item[data-orb-action="gohome"] {
    border-color: rgba(224,181,120,.7); color: var(--rim-amber);
    box-shadow: 0 0 0 2px rgba(224,181,120,.35), 0 0 16px -2px rgba(224,181,120,.5), 0 10px 30px -12px rgba(0,0,0,.6);
  }
  .orb-item[data-orb-action="gohome"] .orb-item-label { color: var(--rim-amber); }
  .orb-item[data-orb-action="gohome"] .orb-item-label::after {
    background: linear-gradient(90deg, transparent, var(--rim-amber), transparent);
    box-shadow: 0 0 6px 1px rgba(224,181,120,.5), 0 0 14px 3px rgba(224,181,120,.5);
  }
  /* Edit Mode's own "Home" item (Addendum 2) reads with the identical amber
     "takes you out of what you're doing" treatment as gohome above — same
     rule, applied to the separate data-action this file uses for it (see
     the click-delegate comment in canvas-portal.js for why it's a distinct
     element rather than a relabeled gohome). */
  .orb-item[data-orb-action="edit-home"] {
    border-color: rgba(224,181,120,.7); color: var(--rim-amber);
    box-shadow: 0 0 0 2px rgba(224,181,120,.35), 0 0 16px -2px rgba(224,181,120,.5), 0 10px 30px -12px rgba(0,0,0,.6);
  }
  .orb-item[data-orb-action="edit-home"] .orb-item-label { color: var(--rim-amber); }
  .orb-item[data-orb-action="edit-home"] .orb-item-label::after {
    background: linear-gradient(90deg, transparent, var(--rim-amber), transparent);
    box-shadow: 0 0 6px 1px rgba(224,181,120,.5), 0 0 14px 3px rgba(224,181,120,.5);
  }

  .assistant-panel {
    position: fixed; right: 30px; top: 50%; transform: translateY(-50%) translateX(20px); z-index: 80;
    width: 280px; max-height: 400px; display: flex; flex-direction: column;
    background: rgba(14,19,26,.7); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7);
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  }
  .assistant-panel.open { opacity: 1; pointer-events: auto; transform: translateY(-50%) translateX(0); }
  .assistant-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border-soft); font: 12px var(--mono); letter-spacing: .04em; color: var(--text-muted); }
  .assistant-close { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 13px; padding: 2px; }
  .assistant-close:hover { color: var(--text); }
  .assistant-body { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-height: 100px; }
  .assistant-msg { font-size: 13px; line-height: 1.5; max-width: 88%; padding: 8px 11px; border-radius: 8px; }
  .assistant-msg.bot { background: rgba(56,214,255,.08); border: 1px solid var(--border); color: var(--text-muted); align-self: flex-start; }
  .assistant-suggestions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; }
  .assistant-chip { font: 11px var(--mono); color: var(--text-muted); background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 999px; padding: 5px 10px; cursor: pointer; }
  .assistant-chip:hover { color: var(--accent); border-color: var(--accent); }

  @media (max-width: 760px) {
    .rail { display: none; }
    .app-main { margin-left: 0; }
    .viewas-banner { left: 0; }
    .site-context-banner { left: 0; }
    .assistant-sphere, .orb-menu, .assistant-panel { display: none; }
  }

  /* ================================================================
     Content Manager / shared media library (TSK-202608132323, 2026-08-16)
     Portal-only. Scoped to body.client-tier + #media-view / overlay ids —
     NOT body.vee-primary (Superadmin also has that class). Mini-picker CSS
     for the live site lives in inline-editor.js's injected stylesheet.
     Ported from mockups/2026-08-12-v1-canvas-vee-primary-concept-v3.html.
     ================================================================ */
  body.client-tier #media-view {
    max-width: 900px; margin: 0 auto; padding: 56px 16px 64px; position: relative; z-index: 2;
  }
  body.client-tier #media-view .page-title,
  body.client-tier #media-modal .page-title {
    font: 300 26px/1.2 Georgia, serif; margin: 0 0 6px; color: var(--text);
  }
  body.client-tier #media-view .page-sub,
  body.client-tier #media-modal .page-sub {
    color: var(--text-muted); font-size: 13px; margin: 0 0 24px;
  }
  body.client-tier #media-view .btn-outline,
  body.client-tier #media-view .btn-primary-outline,
  body.client-tier #media-modal .btn-outline,
  body.client-tier #media-modal .btn-primary-outline {
    font: 12px var(--mono); padding: 8px 14px; border-radius: 5px; cursor: pointer;
    box-shadow: none; font-weight: 500; letter-spacing: 0;
  }
  body.client-tier #media-view .btn-outline,
  body.client-tier #media-modal .btn-outline {
    border: 1px solid var(--border); background: rgba(255,255,255,.03); color: var(--text-muted);
  }
  body.client-tier #media-view .btn-outline:hover,
  body.client-tier #media-modal .btn-outline:hover {
    color: var(--accent); border-color: var(--accent); background: rgba(255,255,255,.03); box-shadow: none;
  }
  body.client-tier #media-view .btn-primary-outline,
  body.client-tier #media-modal .btn-primary-outline {
    border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent);
  }
  body.client-tier #media-view .btn-primary-outline:hover,
  body.client-tier #media-modal .btn-primary-outline:hover {
    background: rgba(56,214,255,.22);
  }
  body.client-tier #media-view .btn-outline:disabled,
  body.client-tier #media-modal .btn-outline:disabled {
    opacity: .4; cursor: not-allowed; box-shadow: none;
  }
  body.client-tier #media-view .tag-chip-row,
  body.client-tier #media-modal .tag-chip-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
  body.client-tier #media-view .tag-chip,
  body.client-tier #media-modal .tag-chip {
    display: inline-flex; align-items: center; gap: 6px; font: 11px var(--mono); color: var(--text-muted);
    background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; cursor: pointer;
    box-shadow: none;
  }
  body.client-tier #media-view .tag-chip:hover,
  body.client-tier #media-modal .tag-chip:hover { color: var(--text); border-color: var(--text-dim); }
  body.client-tier #media-view .tag-chip.active,
  body.client-tier #media-modal .tag-chip.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
  body.client-tier #media-view .tag-chip-x,
  body.client-tier #media-modal .tag-chip-x { opacity: .5; font-size: 11px; line-height: 1; }
  body.client-tier #media-view .tag-chip-x:hover,
  body.client-tier #media-modal .tag-chip-x:hover { opacity: 1; color: #ff8a8a; }
  body.client-tier #media-view .tag-chip.small,
  body.client-tier #media-modal .tag-chip.small {
    font-size: 10px; padding: 2px 7px; cursor: default; background: rgba(255,255,255,.04); gap: 0;
  }
  body.client-tier #media-view .tag-add-row,
  body.client-tier #media-modal .tag-add-row { display: flex; gap: 8px; margin-bottom: 22px; }
  body.client-tier #media-view .tag-add-row input,
  body.client-tier #media-modal .tag-add-row input {
    flex: 1; max-width: 220px; font: 12px var(--mono); color: var(--text); background: rgba(255,255,255,.04);
    border: 1px solid var(--border); border-radius: 5px; padding: 8px 10px; width: auto;
  }
  body.client-tier #media-view .media-actions-row,
  body.client-tier #media-modal .media-actions-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
  body.client-tier #media-view .media-limits-note,
  body.client-tier #media-modal .media-limits-note { font: 11px var(--mono); color: var(--text-dim); line-height: 1.6; margin: 0 0 18px; }
  body.client-tier #media-view .picker-bar,
  body.client-tier #media-modal .picker-bar {
    display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
    background: var(--accent-soft); border: 1px solid var(--accent-glow); border-radius: 8px; padding: 12px 16px; margin-bottom: 14px;
  }
  body.client-tier #media-view .picker-bar-info,
  body.client-tier #media-modal .picker-bar-info { font-size: 12.5px; color: var(--text); }
  body.client-tier #media-view .picker-bar-info strong,
  body.client-tier #media-modal .picker-bar-info strong { color: var(--accent); }
  body.client-tier #media-view .picker-bar-actions,
  body.client-tier #media-modal .picker-bar-actions { display: flex; gap: 8px; }
  body.client-tier #media-view .type-filter-note,
  body.client-tier #media-modal .type-filter-note { font: 11px var(--mono); color: var(--accent); margin: -6px 0 14px; }
  body.client-tier #media-view .media-grid,
  body.client-tier #media-modal .media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; margin-bottom: 8px; }
  body.client-tier #media-view .ml-pager,
  body.client-tier #media-modal .ml-pager {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 18px;
  }
  body.client-tier #media-view .ml-pager.hide,
  body.client-tier #media-modal .ml-pager.hide { display: none; }
  body.client-tier #media-view .ml-pager-status,
  body.client-tier #media-modal .ml-pager-status { font: 11px var(--mono); color: var(--text-dim); }
  body.client-tier #media-view .media-tile,
  body.client-tier #media-modal .media-tile { display: flex; flex-direction: column; gap: 6px; }
  body.client-tier #media-view .media-tile-thumb,
  body.client-tier #media-modal .media-tile-thumb {
    position: relative; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.55);
    background: rgba(255,255,255,.03); background-size: cover; background-position: center;
  }
  body.client-tier #media-view .media-tile-thumb img,
  body.client-tier #media-modal .media-tile-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  body.client-tier #media-view .media-tile-duration,
  body.client-tier #media-modal .media-tile-duration {
    position: absolute; right: 6px; bottom: 6px; font: 10px/1 var(--mono); color: #fff;
    background: rgba(0,0,0,.55); border-radius: 3px; padding: 3px 5px;
  }
  body.client-tier #media-view .media-tile-check,
  body.client-tier #media-modal .media-tile-check {
    position: absolute; top: 7px; left: 7px; width: 20px; height: 20px; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.5); background: rgba(5,7,10,.4); display: none; align-items: center; justify-content: center;
    font: 700 11px/1 var(--mono); color: #05070a;
  }
  body.client-tier #media-view .media-tile-more,
  body.client-tier #media-modal .media-tile-more {
    position: absolute; top: 6px; right: 6px; z-index: 2;
    width: 32px; height: 32px; padding: 0; border: none; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: var(--chrome-glass-strong);
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff; font: 700 16px/1 var(--mono); letter-spacing: .02em;
    cursor: pointer; opacity: 0; pointer-events: none;
    transition: opacity .15s ease;
  }
  body.client-tier #media-view .media-tile:hover .media-tile-more,
  body.client-tier #media-modal .media-tile:hover .media-tile-more,
  body.client-tier #media-view .media-tile.menu-open .media-tile-more,
  body.client-tier #media-modal .media-tile.menu-open .media-tile-more,
  body.client-tier #media-view .media-tile-more:focus-visible,
  body.client-tier #media-modal .media-tile-more:focus-visible { opacity: 1; pointer-events: auto; }
  @media (max-width: 720px) {
    body.client-tier #media-view .media-tile-more,
    body.client-tier #media-modal .media-tile-more {
      opacity: 1; pointer-events: auto;
      width: 40px; height: 40px;
    }
  }
  .ml-tile-menu {
    position: fixed;
    z-index: 90;
    min-width: 212px;
    max-width: 260px;
    padding: 10px 10px 12px;
    border-radius: 12px;
    background: var(--chrome-glass-strong);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    border: 1px solid var(--border);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
  }
  .ml-tile-menu.hide { display: none; }
  .ml-tile-menu-label {
    font: 10px var(--mono);
    color: var(--text-dim);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 0 2px 6px;
  }
  .ml-tile-menu-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 4px;
    font: 12px var(--mono);
    color: var(--text-muted);
  }
  .ml-tile-menu-remove {
    flex: none;
    border: none;
    background: none;
    color: var(--text-dim);
    cursor: pointer;
    font: 12px var(--mono);
    padding: 2px 4px;
  }
  .ml-tile-menu-remove:hover { color: #ff8a8a; }
  .ml-tile-menu-empty { font: 11px var(--mono); color: var(--text-dim); padding: 4px 4px 8px; }
  .ml-tile-menu-add {
    display: flex;
    gap: 6px;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--border-soft);
  }
  .ml-tile-menu-add input {
    flex: 1;
    min-width: 0;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font: 12px var(--mono);
    padding: 7px 9px;
  }
  .ml-tile-menu-add input:focus { outline: none; border-color: var(--accent); }
  .ml-tile-menu-add button {
    flex: none;
    border: 1px solid var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 8px;
    font: 11px var(--mono);
    padding: 7px 10px;
    cursor: pointer;
  }
  .ml-tile-menu-add button:hover { background: var(--accent-glow); }
  .ml-tile-menu-rename { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-soft); }
  .ml-tile-menu-rename .ml-tile-menu-add { margin-top: 0; padding-top: 0; border-top: none; }
  body.client-tier #media-view .media-grid.selectable .media-tile-check,
  body.client-tier #media-modal .media-grid.selectable .media-tile-check { display: flex; }
  body.client-tier #media-view .media-tile.selected .media-tile-check,
  body.client-tier #media-modal .media-tile.selected .media-tile-check { background: var(--accent); border-color: var(--accent); }
  body.client-tier #media-view .media-grid.selectable .media-tile,
  body.client-tier #media-modal .media-grid.selectable .media-tile { cursor: pointer; }
  body.client-tier #media-view .media-grid.selectable .media-tile:hover .media-tile-thumb,
  body.client-tier #media-modal .media-grid.selectable .media-tile:hover .media-tile-thumb { border-color: var(--accent-glow); }
  body.client-tier #media-view .media-grid.at-cap .media-tile:not(.selected),
  body.client-tier #media-modal .media-grid.at-cap .media-tile:not(.selected) { opacity: .4; pointer-events: none; }
  body.client-tier #media-view .media-tile-name,
  body.client-tier #media-modal .media-tile-name { font: 11px var(--mono); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.client-tier #media-view .media-tile-tags,
  body.client-tier #media-modal .media-tile-tags { display: flex; flex-wrap: wrap; gap: 4px; }
  body.client-tier #media-view .slot-card,
  body.client-tier #media-modal .slot-card { padding: 16px 18px; margin-bottom: 12px; }
  body.client-tier #media-view .slot-card-head,
  body.client-tier #media-modal .slot-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
  body.client-tier #media-view .slot-card-title,
  body.client-tier #media-modal .slot-card-title { font-size: 13px; font-weight: 600; color: var(--text); }
  body.client-tier #media-view .slot-card-mode,
  body.client-tier #media-modal .slot-card-mode { font: 11px var(--mono); color: var(--text-dim); margin-top: 3px; line-height: 1.5; }
  body.client-tier #media-view .slot-card-locked,
  body.client-tier #media-modal .slot-card-locked { color: var(--warn); }
  body.client-tier #media-view .slot-thumbs,
  body.client-tier #media-modal .slot-thumbs { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
  body.client-tier #media-view .slot-thumb,
  body.client-tier #media-modal .slot-thumb {
    width: 40px; height: 40px; border-radius: 5px; border: 1px solid var(--border); flex: none;
    background-size: cover; background-position: center;
  }
  body.client-tier #media-view .slot-thumb-empty,
  body.client-tier #media-modal .slot-thumb-empty {
    width: 40px; height: 40px; border-radius: 5px; border: 1px dashed var(--border); display: flex;
    align-items: center; justify-content: center; color: var(--text-dim); font: 9px var(--mono); flex: none;
  }
  body.client-tier #media-view .pending-list-empty,
  body.client-tier #media-modal .pending-list-empty { font: 12px var(--mono); color: var(--text-dim); padding: 4px 0; }
  body.client-tier #media-view .ml-msg,
  body.client-tier #media-modal .ml-msg { font: 12px var(--mono); min-height: 0; margin: 0 0 12px; }
  body.client-tier #media-view .ml-msg.err,
  body.client-tier #media-modal .ml-msg.err { color: var(--bad); }
  body.client-tier #media-view .ml-tag-hint,
  body.client-tier #media-modal .ml-tag-hint { font: 12px var(--mono); color: var(--text-dim); margin: -4px 0 12px; line-height: 1.45; }
  body.client-tier #media-view .media-tile.tagging .media-tile-thumb,
  body.client-tier #media-modal .media-tile.tagging .media-tile-thumb { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-glow); }
  body.client-tier #media-view .media-grid:not(.selectable) .media-tile,
  body.client-tier #media-modal .media-grid:not(.selectable) .media-tile { cursor: pointer; }
  #media-modal-backdrop {
    position: fixed; inset: 0; z-index: 64; background: rgba(5,7,10,.7);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  }
  #media-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 65;
    width: min(680px, calc(100vw - 48px)); max-height: min(720px, calc(100vh - 64px)); display: flex; flex-direction: column;
    background: var(--panel-glass-strong); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 40px 100px -20px rgba(0,0,0,.8);
  }
  #media-modal-head, .media-modal-head {
    display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border-soft);
    font: 12px var(--mono); letter-spacing: .06em; color: var(--text-muted); flex: none;
  }
  #media-modal-body { flex: 1; overflow-y: auto; padding: 20px; }

  /* ================================================================
     Site Map overlay — REQ-202608031639 gym 1.7.18
     Portal-only markup (#map-overlay). Scoped so Superadmin is untouched.
     Chrome = live Home cyan #38d6ff + amber #e0b578. Never lime.
     Reuses existing .vee-ring / ring-cursor.js (Lake Blue). Do not recast.
     ================================================================ */
  :root {
    --map-col-w: 268px;
    --map-col-gap: 32px;
    --map-jump: 360ms;
    --map-copy-ms: 140ms;
    --map-ease: cubic-bezier(0.2, 0.9, 0.3, 1.15);
  }
  body.map-open .orb-item[data-orb-action="sitemap"] {
    border-color: rgba(56,214,255,.7); color: var(--accent);
    box-shadow: 0 0 0 2px rgba(56,214,255,.28), 0 0 16px -2px var(--accent-glow);
  }
  body.map-open .orb-item[data-orb-action="sitemap"] .orb-item-label { color: var(--accent); }
  body.map-open .orb-item[data-orb-action="sitemap"] .orb-item-label::after {
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    box-shadow: 0 0 6px 1px var(--accent-glow);
  }
  body.vee-tucked #assistant-sphere {
    top: auto; bottom: 22px; right: calc(min(320px, 34vw) + 28px); transform: none;
    width: 40px; height: 40px;
    transition: top var(--map-jump) var(--map-ease), right var(--map-jump) var(--map-ease),
      bottom var(--map-jump) var(--map-ease), transform var(--map-jump) var(--map-ease),
      width var(--map-jump) var(--map-ease), height var(--map-jump) var(--map-ease);
  }
  body.vee-tucked #assistant-sphere.is-selected { transform: scale(var(--vee-expand)); }
  .vee-home-hotspot {
    display: none; position: fixed; right: 36px; top: 50%; z-index: 68;
    width: 54px; height: 54px; transform: translateY(-50%);
    border: 0; background: transparent; padding: 0;
  }
  body.map-open.health-open .vee-home-hotspot { display: block; }
  body.map-open.health-open.orb-open .vee-home-hotspot,
  body.map-open.health-open #orb-menu.open ~ .vee-home-hotspot { pointer-events: none; }

  #map-overlay {
    position: fixed; inset: 0 0 0 var(--rail-w, 220px); z-index: 50;
    background: #07090c;
    opacity: 0; pointer-events: none; transform: scale(.985);
    transition: opacity var(--map-jump) var(--map-ease), transform var(--map-jump) var(--map-ease);
  }
  body.map-open #map-overlay { opacity: 1; pointer-events: auto; transform: none; }
  /* CHG-202608201256 named deviation 2: do NOT hide the map while editing.
     Stage 3 Site Map layers on top of Edit Mode. Superadmin has no #edit-live. */
  #map-overlay .map-toolbar {
    position: absolute; top: 14px; left: 18px; right: 18px; z-index: 5;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  }
  #map-overlay .total-pages {
    display: flex; align-items: baseline; gap: 8px; padding: 6px 14px 8px;
    background: var(--chrome-glass-strong); border: 1px solid var(--border); border-radius: 12px;
    backdrop-filter: blur(16px);
  }
  #map-overlay .total-pages b {
    font: 600 42px/1 Georgia, "Playfair Display", serif; color: var(--text); letter-spacing: -.03em;
  }
  #map-overlay .total-pages span { font: 11px var(--mono); color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; }
  #map-overlay .zoom-tools, #map-overlay .peek-tools {
    display: flex; align-items: center; gap: 6px;
    background: var(--chrome-glass-strong); border: 1px solid var(--border); border-radius: 999px;
    padding: 4px; backdrop-filter: blur(16px);
  }
  #map-overlay .zoom-tools button, #map-overlay .peek-tools button, #map-overlay .map-close {
    border: 0; background: transparent; color: var(--text-muted); border-radius: 999px;
    padding: 6px 12px; cursor: pointer; font: 11px var(--mono); letter-spacing: .04em;
  }
  #map-overlay .zoom-tools button:hover, #map-overlay .peek-tools button:hover, #map-overlay .map-close:hover {
    color: var(--text); background: rgba(255,255,255,.05);
  }
  #map-overlay .zoom-tools button.on { color: var(--accent); background: var(--accent-soft); }
  #map-overlay .zoom-tools button:disabled {
    opacity: .38; color: var(--text-dim); background: transparent; cursor: not-allowed;
  }
  #map-overlay .zoom-tools button.on:disabled {
    opacity: .55; color: var(--accent); background: var(--accent-soft);
  }
  #map-overlay .zoom-tools button:disabled:hover { color: var(--text-dim); background: transparent; }
  #map-overlay .zoom-tools button.on:disabled:hover { color: var(--accent); background: var(--accent-soft); }
  #map-overlay .peek-tools button.on { color: var(--accent); background: var(--accent-soft); }
  #map-overlay .map-close { margin-left: auto; border: 1px solid var(--border); background: var(--chrome-glass-strong); }

  #map-viewport {
    position: absolute; inset: 78px 0 0; overflow: auto; cursor: default;
    background: radial-gradient(ellipse at 50% 0%, rgba(56,214,255,.04), transparent 40%), #080b0e;
    transition: right var(--map-jump) var(--map-ease);
  }
  body.health-open #map-viewport { right: min(320px, 34vw); }
  #map-world {
    position: relative; width: max-content; min-height: 100%;
    padding: 36px 0 96px;
  }
  #map-cols {
    display: flex; flex-wrap: nowrap; gap: var(--map-col-gap); align-items: flex-start; width: max-content;
    transition: gap var(--map-jump) var(--map-ease), margin-left var(--map-jump) var(--map-ease),
      margin-right var(--map-jump) var(--map-ease);
  }
  #map-overlay .map-empty {
    min-width: 280px; padding: 48px 28px 24px; color: var(--text-muted);
    font: 16px/1.45 system-ui, sans-serif;
  }
  #map-overlay .map-empty p { margin: 0; }
  #map-overlay .map-col {
    width: var(--map-col-w); flex: none; min-width: 0;
    transition: opacity var(--map-jump) var(--map-ease), width var(--map-jump) var(--map-ease),
      visibility var(--map-jump) var(--map-ease), margin-left var(--map-jump) var(--map-ease);
  }
  #map-overlay .col-count {
    font: 11px var(--mono); color: var(--text-dim); letter-spacing: .08em; text-transform: uppercase;
    margin: 0 0 10px; text-align: center;
  }
  #map-overlay .col-count b { color: var(--text); font-weight: 600; }
  #map-overlay .col-head {
    display: flex; align-items: center; gap: 8px; justify-content: center; width: 100%;
    font: 13px var(--mono); color: var(--text-muted); margin-bottom: 14px;
    border: 1px solid transparent; background: none; cursor: pointer; border-radius: 8px; padding: 6px 8px;
  }
  #map-overlay .col-head:hover { color: var(--text); border-color: var(--border); }
  #map-overlay .col-head svg { opacity: .7; }
  #map-overlay .col-note { display: block; font: 9px var(--mono); color: var(--text-dim); font-weight: 400; }
  #map-overlay .page-node {
    position: relative; margin-bottom: 24px; display: grid; grid-template-rows: 1fr;
    transition: opacity var(--map-jump) var(--map-ease), visibility var(--map-jump) var(--map-ease),
      margin var(--map-jump) var(--map-ease), padding var(--map-jump) var(--map-ease),
      grid-template-rows var(--map-jump) var(--map-ease);
  }
  #map-overlay .page-node > .page-card { min-height: 0; }
  #map-overlay .page-node.is-child { margin-left: 18px; padding-left: 14px; border-left: 1px dashed rgba(255,255,255,.12); }
  #map-overlay .page-card {
    background: rgba(18, 22, 28, .92); border: 1px solid var(--border); border-radius: 10px;
    padding: 14px 14px 16px; position: relative;
  }
  #map-overlay .page-card:hover { border-color: rgba(56,214,255,.28); }
  #map-overlay .page-card.peek-target { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-glow); }
  #map-overlay .page-row { display: flex; align-items: center; gap: 8px; min-height: 28px; }
  #map-overlay .id-chip {
    flex: none; font: 10px var(--mono); letter-spacing: .04em;
    border: 1px solid var(--border); color: var(--text-dim); border-radius: 4px; padding: 2px 6px;
  }
  #map-overlay .page-title-btn {
    flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0;
    border: 0; background: none; color: var(--text); cursor: pointer; text-align: left;
    font: 500 13px/1.25 system-ui, sans-serif; padding: 0;
  }
  #map-overlay .page-title-btn:hover { color: var(--accent); }
  #map-overlay .page-title-btn svg { flex: none; opacity: .55; }
  #map-overlay .copy-btn, #map-overlay .peek-mini {
    flex: none; width: 28px; height: 28px; border: 0; background: none; color: var(--text-dim);
    border-radius: 6px; cursor: pointer; display: grid; place-items: center;
    opacity: 0; transform: scale(.86);
    transition: opacity var(--map-copy-ms) ease, transform var(--map-copy-ms) var(--map-ease), color .15s;
  }
  #map-overlay .page-card:hover .copy-btn, #map-overlay .page-card:hover .peek-mini,
  #map-overlay .sec-card:hover .copy-btn, #map-overlay .copy-btn:focus-visible, #map-overlay .peek-mini:focus-visible {
    opacity: 1; transform: none;
  }
  #map-overlay .copy-btn:hover, #map-overlay .peek-mini:hover { color: var(--accent); background: var(--accent-soft); }
  #map-overlay .scores { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; font: 10px var(--mono); color: var(--text-dim); }
  #map-overlay .score { border: 1px solid var(--border-soft); border-radius: 999px; padding: 2px 7px; }
  #map-overlay .score.good { color: var(--good); border-color: rgba(46,230,184,.28); }
  #map-overlay .score.empty { color: var(--text-dim); font-style: italic; }
  #map-overlay .score.warn { color: var(--warn); border-color: rgba(255,176,32,.35); }
  #map-overlay .sec-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
  #map-overlay .sec-card {
    display: flex; align-items: center; gap: 8px;
    background: rgba(12, 16, 20, .9); border: 1px solid var(--border-soft); border-radius: 8px;
    padding: 8px 10px; position: relative;
  }
  #map-overlay .sec-card.global { border-left: 3px solid var(--accent); }
  #map-overlay .sec-title {
    flex: 1; border: 0; background: none; color: var(--text); cursor: pointer; text-align: left;
    font: 500 12px/1.2 system-ui, sans-serif; padding: 0;
  }
  #map-overlay .sec-title:hover { color: var(--accent); }
  #map-overlay .sec-desc { display: block; font: 11px/1.3 system-ui, sans-serif; color: var(--text-dim); font-weight: 400; margin-top: 2px; }

  #map-overlay .strips { display: none; }
  body.map-view-site #map-overlay .strips { display: block; }
  body.map-view-site #map-overlay .sec-list { display: none; }
  body.map-view-site #map-overlay .live-snap-frame { height: 124px; }
  body.map-view-column #map-cols,
  body.map-view-page #map-cols { gap: 0; }
  body.map-view-column #map-overlay .map-col.is-focus { width: 340px; }
  body.map-view-column #map-overlay .map-col:not(.is-focus),
  body.map-view-page #map-overlay .map-col:not(.is-focus) {
    width: 0; min-width: 0; opacity: 0; visibility: hidden; overflow: hidden; pointer-events: none; margin: 0;
  }
  body.map-view-column #map-overlay .strips { display: block; }
  body.map-view-column #map-overlay .sec-list { display: flex; }
  body.map-view-column #map-overlay .live-snap-frame { height: 132px; }
  body.map-view-page #map-overlay .map-col.is-focus { width: min(440px, 92vw); }
  body.map-view-page #map-overlay .page-node:not(.is-focus) {
    grid-template-rows: 0fr; opacity: 0; visibility: hidden; margin: 0; padding: 0;
    border: 0; overflow: hidden; pointer-events: none;
  }
  body.map-view-page #map-overlay .page-node:not(.is-focus) > .page-card { overflow: hidden; }
  body.map-view-page #map-overlay .sec-list { display: flex; }
  body.map-view-page #map-overlay .strips {
    display: block; pointer-events: none;
  }
  body.map-view-page #map-overlay .live-snap-frame { height: min(42vh, 360px); min-height: 280px; }

  #map-overlay .live-snap { margin: 10px 0 0; }
  #map-overlay .live-snap-frame {
    position: relative; width: 100%; height: 124px; padding: 0; border-radius: 6px; overflow: hidden;
    pointer-events: none; border: 1px solid rgba(255,255,255,.08); background: #0c1014;
  }
  #map-overlay .live-still {
    display: block; width: 100%; height: 100%; object-fit: cover; object-position: top;
    pointer-events: none; background: #0c1014;
  }
  #map-overlay .live-snap-cap {
    font: 9px/1.35 var(--mono); color: var(--text-dim); margin: 7px 2px 0;
  }
  #map-overlay .edit-this-page { display: none; }
  body.map-view-column #map-overlay .edit-this-page,
  body.map-view-page #map-overlay .page-node.is-focus .edit-this-page { display: block; }
  #map-overlay .edit-this-page {
    width: 100%; margin: 8px 0 0; border: 1px solid var(--accent);
    background: var(--accent-soft); color: var(--accent); border-radius: 8px;
    padding: 10px 12px; cursor: pointer; text-align: left;
    font: 600 12px/1.3 var(--mono);
  }
  #map-overlay .edit-this-page:hover { background: rgba(56,214,255,.2); }
  #map-overlay .edit-this-page small {
    display: block; margin-top: 4px; font-weight: 400; color: var(--text-muted);
  }
  #map-overlay .peek-tools .map-edit-page {
    display: none;
    flex-direction: column; align-items: flex-start; gap: 0;
    border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent);
    border-radius: 999px; padding: 6px 14px; line-height: 1.2;
  }
  body.map-view-column #map-overlay .peek-tools .map-edit-page,
  body.map-view-page #map-overlay .peek-tools .map-edit-page { display: inline-flex; }
  #map-overlay .peek-tools .map-edit-page:hover { background: rgba(56,214,255,.2); color: var(--accent); }
  #map-overlay .peek-tools .map-edit-page small {
    display: block; font-weight: 400; font-size: 9px; color: var(--text-muted); letter-spacing: 0;
  }

  #map-overlay .mini {
    border-radius: 6px; overflow: hidden; background: #0c100e; color: #e8efe6;
    font-family: "Cormorant Garamond", Georgia, serif; pointer-events: none;
    border: 1px solid rgba(255,255,255,.06);
  }
  #map-overlay .mini-hero {
    min-height: 88px; padding: 18px 16px 14px;
    background: linear-gradient(180deg, rgba(6,10,8,.15), rgba(6,10,8,.78)), radial-gradient(ellipse at 40% 70%, #1c3a28, #0a120e 70%);
  }
  #map-overlay .mini-hero.mist {
    background: linear-gradient(180deg, rgba(20,28,24,.1), rgba(8,12,10,.8)), radial-gradient(ellipse at 50% 40%, #3a4a40, #121816 72%);
  }
  #map-overlay .mini-kicker { font: 8px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #c9d4cc; margin: 0 0 6px; }
  #map-overlay .mini-h { font: 500 15px/1.15 "Playfair Display", Georgia, serif; margin: 0; }
  #map-overlay .mini-band { padding: 12px 14px; }
  #map-overlay .mini-band.dark { background: #101614; }
  #map-overlay .mini-band.light { background: #e8efe4; color: #142018; }
  #map-overlay .mini-band h4 { font: 500 11px/1.2 "Playfair Display", Georgia, serif; margin: 0 0 8px; }
  #map-overlay .mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
  #map-overlay .mini-cell { height: 28px; border-radius: 3px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
  #map-overlay .mini-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  #map-overlay .mini-photo { height: 36px; border-radius: 3px; background: linear-gradient(135deg, #1a3324, #0e1a14); }
  #map-overlay .mini-photo.b { background: linear-gradient(135deg, #24382c, #152018); }
  #map-overlay .mini-faces { display: flex; gap: 6px; }
  #map-overlay .mini-face { width: 18px; height: 18px; border-radius: 50%; background: #2a4032; border: 1px solid rgba(255,255,255,.15); }
  #map-overlay .mini-footer { padding: 10px 12px; background: #080c0a; font: 8px var(--mono); color: #7a9084; display: flex; justify-content: space-between; }
  #map-overlay .mini.warn-copy { background: #1a1410; }
  #map-overlay .mini.warn-copy h4 { color: #e0b578; }

  #health-panel {
    position: absolute; top: 78px; right: 0; bottom: 0; width: min(320px, 34vw); z-index: 6;
    background: var(--panel-glass); border-left: 1px solid var(--border);
    backdrop-filter: blur(22px); padding: 18px 18px 28px;
    transform: translateX(110%); opacity: 0; pointer-events: none;
    transition: transform var(--map-jump) var(--map-ease), opacity var(--map-jump) var(--map-ease);
    overflow: auto;
  }
  body.health-open #health-panel { transform: none; opacity: 1; pointer-events: auto; }
  #health-panel .peek-kicker { font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 6px; }
  #health-panel h2 { font: 500 20px/1.2 "Playfair Display", Georgia, serif; margin: 0 0 4px; }
  #health-panel .peek-id { font: 11px var(--mono); color: var(--accent); margin: 0 0 16px; }
  #health-panel .peek-nav { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
  #health-panel .peek-nav button {
    border: 1px solid var(--border); background: rgba(255,255,255,.03); color: var(--text-muted);
    border-radius: 999px; padding: 6px 10px; cursor: pointer; font: 11px var(--mono);
  }
  #health-panel .peek-nav button:hover { color: var(--text); border-color: var(--accent); }
  #health-panel .stat { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
  #health-panel .stat dt { color: var(--text-dim); font: 11px var(--mono); }
  #health-panel .stat dd { margin: 0; text-align: right; }
  #health-panel .stat dd.empty { font-style: italic; color: var(--text-dim); }
  #health-panel .fit-box { margin-top: 16px; padding: 12px; border-radius: 10px; border: 1px solid var(--border); }
  #health-panel .fit-box.strong { border-color: rgba(46,230,184,.35); background: rgba(46,230,184,.06); }
  #health-panel .fit-box.warn { border-color: rgba(255,176,32,.4); background: rgba(255,176,32,.08); }
  #health-panel .fit-box h3 { font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 6px; }
  #health-panel .fit-src { font: 11px var(--mono); color: var(--text-dim); }
  #health-panel .health-hide {
    display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px;
    border: 1px solid var(--border); background: rgba(255,255,255,.03); color: var(--text-muted);
    border-radius: 999px; padding: 7px 12px; cursor: pointer; font: 12px var(--mono);
  }
  #health-panel .health-hide:hover { color: var(--text); border-color: var(--accent); }

  #health-open-tab {
    display: none; position: absolute; top: 96px; right: 0; z-index: 8;
    align-items: center; gap: 8px;
    border: 1px solid var(--border); border-right: 0;
    border-radius: 10px 0 0 10px;
    background: var(--panel-glass); color: var(--text-muted);
    padding: 12px 14px 12px 16px; cursor: pointer;
    font: 12px var(--mono); letter-spacing: .04em;
    backdrop-filter: blur(22px);
  }
  body.map-open:not(.health-open) #health-open-tab { display: inline-flex; }
  #health-open-tab:hover { color: var(--text); border-color: var(--accent); }

  #map-arrows {
    display: none; position: absolute; left: 0; right: 0; bottom: 18px; z-index: 8;
    justify-content: center; gap: 12px; flex-wrap: wrap;
    padding: 8px 12px; pointer-events: none;
    transition: right var(--map-jump) var(--map-ease);
  }
  body.health-open #map-arrows { right: min(320px, 34vw); }
  body.map-view-column #map-arrows, body.map-view-page #map-arrows { display: flex; }
  #map-overlay .map-arrow {
    pointer-events: auto;
    border: 1px solid var(--accent); background: var(--chrome-glass-strong); color: var(--accent);
    border-radius: 999px; padding: 12px 18px; cursor: pointer;
    font: 13px/1 var(--mono); letter-spacing: .04em;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
  }
  #map-overlay .map-arrow:hover { background: var(--accent-soft); }
  #map-overlay .map-arrow:disabled { opacity: .35; border-color: var(--border); color: var(--text-dim); cursor: not-allowed; box-shadow: none; }
  #map-overlay .map-arrow-all { border-color: var(--rim-amber); color: var(--rim-amber); }

  /* CHG-202608201256 stage 3 Edit Mode — portal only (#edit-live).
     Named deviation 1: do not hide .rail. Superadmin never mounts this node.
     Cyan #38d6ff, amber #e0b578, never lime. */
  #edit-live {
    position: fixed; inset: 0 0 0 var(--rail-w, 220px); z-index: 36;
    background: #07090c; opacity: 0; pointer-events: none; transform: scale(.99);
    transition: opacity var(--map-jump) var(--map-ease), transform var(--map-jump) var(--map-ease);
    display: flex; flex-direction: column;
  }
  body.edit-on #edit-live { opacity: 1; pointer-events: auto; transform: none; }
  body.client-tier.edit-on #app-main { opacity: 0; pointer-events: none; }
  /* CHG-202608201256 (Elias 2026-08-24, Addendum 2) — rail + toolbar now
     read as one "L"-shaped panel: identical background/blur/border-color/
     glow recipe as .rail above (same --chrome-glass token, same
     blur(22px) saturate(150%), same accent-glow box-shadow, direction
     following each surface's own edge — rail's right edge, toolbar's
     bottom edge). The old fading gradient (built for legibility over a
     bright screenshot when this toolbar had a transparent background) is
     replaced outright — solid chrome-glass reads better over a bright
     photo than a fade-to-transparent ever did, a strict improvement, not a
     tradeoff. Strictly single row (flex-wrap: nowrap, was wrap) — no
     bottom bar anywhere in this file; that position stays reserved for the
     orb, per Castillo's explicit "do not recreate the collision Addendum 1
     already fixed." Breadcrumb is the one element allowed to shrink/
     truncate; every button and the session chip hold their size. */
  #edit-live .edit-toolbar {
    position: relative; z-index: 6; display: flex; align-items: center; gap: 10px;
    flex-wrap: nowrap; padding: 14px 18px; flex: none; min-width: 0;
    background: var(--chrome-glass); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 24px -6px var(--accent-glow);
  }
  #edit-live .edit-breadcrumb {
    display: flex; align-items: baseline; gap: 8px; padding: 8px 14px;
    background: var(--chrome-glass-strong); border: 1px solid var(--border); border-radius: 12px;
    backdrop-filter: blur(16px);
    font: 12px var(--mono); color: var(--text-muted);
    flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  #edit-live .edit-breadcrumb b { color: var(--accent); font-weight: 500; }
  #edit-live .session-chip {
    display: flex; align-items: center; gap: 7px; padding: 7px 12px; flex: none; white-space: nowrap;
    background: rgba(46,230,184,.08); border: 1px solid rgba(46,230,184,.28); border-radius: 999px;
    font: 11px var(--mono); color: var(--good);
  }
  #edit-live .session-chip .dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 5px var(--good);
  }
  #edit-live .edit-toolbar-btn {
    border: 1px solid var(--border); background: var(--chrome-glass-strong); color: var(--text-muted);
    border-radius: 999px; padding: 7px 14px; cursor: pointer; font: 11px var(--mono); letter-spacing: .04em;
    flex: none; white-space: nowrap;
  }
  #edit-live .edit-toolbar-btn:hover { color: var(--text); background: rgba(255,255,255,.06); }
  #edit-live .edit-toolbar-btn.on { color: var(--accent); border-color: rgba(56,214,255,.5); background: var(--accent-soft); }
  #edit-live .edit-toolbar-btn.amber { margin-left: auto; color: var(--rim-amber); border-color: rgba(224,181,120,.45); }
  #edit-live .edit-toolbar-btn.amber:hover { background: rgba(224,181,120,.1); }
  #edit-live .edit-toolbar-btn:disabled { opacity: .38; cursor: not-allowed; }
  /* CHG-202608201256 (Elias 2026-08-24 addendum) — Publish/Discard moved
     here from the framed site's own bottom-right cms-edit-bar, which
     collided with the orb/Vee menu. Same colors as the mock addendum
     (mockups/2026-08-21-v1-canvas-edit-mode.html), --danger swapped for
     this codebase's actual token, --bad. */
  #edit-live .edit-status-btn {
    border: 1px solid rgba(46,230,184,.28); background: rgba(46,230,184,.08); color: var(--good);
    border-radius: 999px; padding: 7px 14px; cursor: default; font: 11px var(--mono); letter-spacing: .02em;
    flex: none; white-space: nowrap;
  }
  #edit-live .edit-status-btn.has-draft {
    cursor: pointer; color: #041016; background: var(--accent); border-color: var(--accent); font-weight: 600;
  }
  #edit-live .edit-status-btn.has-draft:hover { box-shadow: 0 0 14px var(--accent-glow); }
  #edit-live .edit-discard-btn {
    border: 1px solid var(--border); background: var(--chrome-glass-strong); color: var(--text-muted);
    border-radius: 999px; padding: 7px 14px; cursor: pointer; font: 11px var(--mono);
    flex: none; white-space: nowrap;
  }
  #edit-live .edit-discard-btn:hover { color: var(--bad); border-color: rgba(255,77,106,.4); }
  #edit-live .edit-discard-btn.hide { display: none; }
  #edit-live .edit-live-frame {
    flex: 1; width: 100%; border: 0; background: #fff; min-height: 0;
  }

  #map-edit-shell {
    position: fixed; inset: 0; z-index: 60; background: #07090c;
    opacity: 0; pointer-events: none; transform: translateY(8px);
    transition: opacity var(--map-jump) var(--map-ease), transform var(--map-jump) var(--map-ease);
    overflow: auto;
  }
  body.map-edit-on #map-edit-shell { opacity: 1; pointer-events: auto; transform: none; }
  #map-edit-shell .edit-bar {
    position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 14px 22px; background: rgba(8,12,16,.92); border-bottom: 1px solid var(--border);
    backdrop-filter: blur(16px);
  }
  #map-edit-shell .back {
    border: 1px solid rgba(224,181,120,.45); background: transparent; color: var(--rim-amber);
    border-radius: 999px; padding: 7px 14px; cursor: pointer; font: 12px var(--mono);
  }
  #map-edit-shell .back:hover { background: rgba(224,181,120,.1); }
  #map-edit-shell .edit-dest { font: 12px var(--mono); color: var(--text-muted); }
  #map-edit-shell .edit-dest b { color: var(--accent); font-weight: 500; }
  #map-edit-body {
    max-width: 780px; margin: 28px auto 60px; background: #0d1216; border: 1px solid var(--border);
    border-radius: 16px; overflow: hidden;
  }
  #map-edit-body .edit-sec { padding: 28px 32px; border-bottom: 1px solid var(--border-soft); }
  #map-edit-body .edit-sec.hit { outline: 2px solid var(--accent); outline-offset: -2px; background: rgba(56,214,255,.06); }
  #map-edit-body .edit-sec h1 { font: 500 36px/1.15 "Playfair Display", Georgia, serif; margin: 0 0 10px; }
  #map-edit-body .edit-sec h2 { font: 500 22px/1.2 "Playfair Display", Georgia, serif; margin: 0 0 8px; }
  #map-edit-body .edit-sec p { color: var(--text-muted); margin: 0; }

  #map-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(12px);
    z-index: 100; background: var(--chrome-glass-strong); border: 1px solid var(--accent);
    color: var(--text); font: 12px var(--mono); padding: 10px 16px; border-radius: 999px;
    opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s var(--map-ease);
    max-width: min(92vw, 640px);
  }
  #map-toast.show { opacity: 1; transform: translateX(-50%); }

  @media (max-width: 860px) {
    body.map-open #health-panel { width: 100%; top: auto; height: 46vh; transform: translateY(110%); }
    body.map-open.health-open #health-panel { transform: none; }
    body.map-open.health-open #map-viewport { right: 0; bottom: 46vh; }
    #map-overlay .total-pages b { font-size: 28px; }
    body.map-open #health-open-tab { top: auto; bottom: 22px; right: 12px; border-right: 1px solid var(--border); border-radius: 999px; }
  }


  /* REQ-202608270902 gym foyer v1.16 — scoped. Client Home mountains + capsule
     use body.client-tier. Superadmin dashboard must not inherit capsule/crop.
     Foyer chrome uses body.on-login on /portal/ and /superadmin/ login only. */
  body.on-login:not(.login-revealing) .rail,
  body.on-login:not(.login-revealing) .app-main,
  body.on-login:not(.login-revealing) .assistant-sphere,
  body.on-login:not(.login-revealing) .orb-menu,
  body.on-login .top-home-link,
  body.on-login .assistant-panel,
  body.on-login .app-tray,
  body.on-login .portal-rays { visibility: hidden !important; pointer-events: none !important; }
  body.on-login:not(.login-revealing) .global-bg { visibility: hidden !important; pointer-events: none !important; }
  body.on-login.login-revealing .global-bg { visibility: visible !important; pointer-events: none !important; }
  body.on-login .starfield { visibility: visible; pointer-events: none; }
  #login-wrap.login-foyer .login-depth-far { z-index: 0; }
  #login-wrap.login-foyer .login-depth-near { z-index: 2; }
  #login-wrap.login-foyer .login-mist { z-index: 3; }
  #login-wrap.login-foyer .login-veil { z-index: 4; }
  #login-wrap.login-foyer { display: none; max-width: none; margin: 0; }
  body.on-login #login-wrap.login-foyer { display: block; }
  body.on-login.login-revealing #login-wrap.login-foyer { z-index: 1; }
  body.on-login.login-revealing .rail,
  body.on-login.login-revealing .app-main,
  body.on-login.login-revealing .assistant-sphere,
  body.on-login.login-revealing .orb-menu {
    visibility: visible !important;
    pointer-events: none !important;
    opacity: 0;
    transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  body.on-login.login-revealing .app-main { position: relative; z-index: 8; }
  body.on-login.login-revealing.login-home-in .rail,
  body.on-login.login-revealing.login-home-in .app-main,
  body.on-login.login-revealing.login-home-in .assistant-sphere,
  body.on-login.login-revealing.login-home-in .orb-menu { opacity: 1; }

  .login-foyer {
    position: fixed; inset: 0; z-index: 50; overflow: hidden;
    color: #e8f0f6;
    opacity: 1; transition: opacity .55s ease;
  }
  .login-foyer.is-leaving { opacity: 0; pointer-events: none; }
  .login-depth {
    position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  }
  .login-depth-near { clip-path: inset(38% -8% -8% -8%); }
  .login-photo {
    position: absolute;
    top: calc(-6% - 40px); left: calc(-6% - 40px);
    width: calc(112% + 80px); height: calc(112% + 80px);
    object-fit: cover; object-position: center 22%;
    transform-origin: 50% 22%;
    filter: brightness(.92) saturate(1.05);
    image-rendering: auto;
    animation: loginDriftFar calc(72s * var(--motion-scale, 1)) ease-in-out infinite alternate;
  }
  .login-photo-near {
    object-position: center 36%;
    animation-name: loginDriftNear;
    animation-duration: calc(56s * var(--motion-scale, 1));
  }
  @keyframes loginDriftFar {
    from { transform: scale(1.24) translate3d(0, 0, 0); }
    to { transform: scale(1.28) translate3d(-0.55%, 0.18%, 0); }
  }
  @keyframes loginDriftNear {
    from { transform: scale(1.30) translate3d(0, 0, 0); }
    to { transform: scale(1.35) translate3d(-0.9%, 0.3%, 0); }
  }
  .login-mist {
    position: absolute; inset: -18% -28%; pointer-events: none;
    opacity: .1;
    background:
      radial-gradient(ellipse 55% 26% at 28% 60%, rgba(230, 238, 246, .5) 0%, transparent 70%),
      radial-gradient(ellipse 48% 22% at 74% 46%, rgba(210, 224, 236, .32) 0%, transparent 68%);
    animation: loginMistDrift 78s ease-in-out infinite alternate;
  }
  @keyframes loginMistDrift {
    from { transform: translate3d(-3.2%, 0.3%, 0); }
    to { transform: translate3d(3.8%, -0.5%, 0); }
  }
  .login-foyer.is-pullback { pointer-events: none; }
  .login-foyer.is-pullback .login-depth { transform: none !important; }
  .login-foyer.is-pullback .login-photo {
    animation: none;
    object-position: center 22%;
    transform-origin: 50% 22%;
    transform: scale(1) translate3d(0, 0, 0);
    filter: brightness(.85) saturate(.95);
    transition:
      transform 1.4s cubic-bezier(0.22, 1, 0.36, 1),
      filter 1.4s ease-out;
  }
  .login-foyer.is-pullback .login-veil,
  .login-foyer.is-pullback .login-mist,
  .login-foyer.is-pullback .login-depth-near,
  .login-foyer.is-pullback .login-welcome,
  .login-foyer.is-pullback .login-stage,
  .login-foyer.is-pullback .login-jewel,
  .login-foyer.is-pullback .login-remember,
  .login-foyer.is-pullback .login-sheet {
    opacity: 0;
    transition: opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .login-veil {
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 70% 62% at 72% 48%, transparent 0%, rgba(4, 10, 16, .28) 58%, rgba(4, 10, 16, .55) 100%);
    pointer-events: none;
  }
  .login-welcome {
    position: absolute; left: 28px; top: 26px; z-index: 6; margin: 0;
    font: 400 calc(13px * var(--type-scale, 1))/1.4 var(--mono);
    letter-spacing: .04em; color: rgba(232, 240, 246, .48);
  }
  .login-stage {
    position: relative; z-index: 5; min-height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 72px 20px 110px;
  }
  /* Stage is full-viewport at z-index 5; sheets used to sit at 4 under it,
     so enroll “Not now” / OS Continue never received the click. */
  .login-foyer:has(.login-sheet.is-on) .login-stage {
    pointer-events: none;
  }
  .login-jewel {
    width: min(360px, 88vw);
    display: flex; flex-direction: column; align-items: stretch; gap: 16px;
  }
  .login-foyer:has(.login-sheet.is-on) .login-jewel {
    visibility: hidden;
    pointer-events: none;
  }
  .login-cap {
    background: none; border: 0; padding: 4px 2px; cursor: pointer;
    font: 400 calc(12px * var(--type-scale, 1))/1 var(--mono);
    letter-spacing: .1em; text-transform: uppercase;
    color: rgba(232, 240, 246, .4);
  }
  .login-cap:hover { color: rgba(232, 240, 246, .78); }
  .login-cap.is-on { color: rgba(232, 240, 246, .72); }
  .login-alts {
    display: flex; align-items: center; justify-content: center; gap: 10px;
  }
  .login-alts-dot { color: rgba(232, 240, 246, .22); font-size: 12px; }
  .login-line {
    display: flex; flex-direction: column; align-items: stretch;
    width: 100%; min-height: 0; padding: 22px 22px 18px;
    border-radius: 28px;
    border: 1px solid rgba(0, 147, 208, .48);
    box-shadow:
      0 0 0 1px rgba(0, 147, 208, .1),
      0 18px 48px rgba(2, 8, 14, .28),
      0 0 28px rgba(0, 147, 208, .16),
      inset 0 1px 0 rgba(255, 255, 255, .06);
    background: rgba(8, 14, 20, .42);
    backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    cursor: default;
  }
  .login-line:focus-visible { outline: 2px solid rgba(0, 147, 208, .7); outline-offset: 4px; }
  .login-email-stack, .login-passkey-stack {
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  }
  .login-email-stack[hidden], .login-passkey-stack[hidden] {
    display: none !important;
  }
  .login-line-label {
    font: 400 calc(13px * var(--type-scale, 1))/1 var(--mono);
    letter-spacing: .14em; text-transform: uppercase; color: #d8eef8;
    text-align: center; margin: 4px 0 8px;
  }
  .login-passkey-hint {
    margin: 0 0 14px; text-align: center;
    font: calc(13px * var(--type-scale, 1))/1.45 var(--mono);
    color: rgba(220, 232, 240, .52);
  }
  .login-line-field {
    width: 100%; min-width: 0; border: 0; background: transparent; color: #e8f4fb;
    font: calc(15px * var(--type-scale, 1))/1.35 var(--mono); outline: none;
    padding: 12px 2px; border-bottom: 1px solid rgba(255, 255, 255, .12);
  }
  .login-line-field::placeholder { color: rgba(200, 220, 232, .38); }
  .login-line-go, .login-passkey-go {
    margin-top: 14px; width: 100%; padding: 12px 8px; background: none; border: 0; cursor: pointer;
    font: 400 calc(12px * var(--type-scale, 1))/1 var(--mono);
    letter-spacing: .12em; text-transform: uppercase; color: rgb(0, 147, 208);
  }
  .login-line-go:hover, .login-passkey-go:hover { color: #7fd4f0; }
  .login-remember {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font: calc(11px * var(--type-scale, 1))/1.3 var(--mono);
    color: rgba(220, 232, 240, .38); cursor: pointer; white-space: nowrap;
  }
  .login-remember input { accent-color: rgb(0, 147, 208); }
  .login-sheet {
    display: none; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%); width: min(340px, 88vw);
    max-height: min(72vh, calc(100dvh - 96px));
    padding: 18px 18px 12px; border-radius: 16px;
    background: rgba(10, 16, 22, .72);
    border: 1px solid rgba(255, 255, 255, .1);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    text-align: left; z-index: 8; pointer-events: auto;
    flex-direction: column; overflow: hidden;
    box-sizing: border-box;
  }
  .login-sheet.is-on { display: flex; }
  .login-sheet-scroll {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .login-sheet-foot {
    flex: 0 0 auto;
    position: sticky; bottom: 0;
    margin: 0 -18px -12px;
    padding: 8px 18px 10px;
    background: linear-gradient(180deg, rgba(10, 16, 22, 0) 0%, rgba(10, 16, 22, .88) 28%);
  }
  .login-sheet h2 {
    margin: 0 0 6px; font: 400 calc(16px * var(--type-scale, 1))/1.3 var(--mono);
    letter-spacing: .04em; color: #e8f4fb;
  }
  .login-sheet p { margin: 0 0 14px; font-size: calc(13px * var(--type-scale, 1)); color: rgba(220,232,240,.62); line-height: 1.45; }
  .login-other-list { display: flex; flex-direction: column; gap: 2px; }
  .login-other-list button, .login-sheet-go {
    text-align: left; width: 100%; padding: 10px 2px; cursor: pointer;
    background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.06);
    color: #dce8f0; font: calc(13px * var(--type-scale, 1))/1.3 var(--mono);
  }
  .login-other-list button:last-child { border-bottom: 0; }
  .login-other-list button:hover, .login-sheet-go:hover { color: #fff; }
  .login-sheet-go { text-align: center; border-bottom: 0; color: rgb(120, 190, 220); letter-spacing: .06em; text-transform: uppercase; font-size: calc(12px * var(--type-scale, 1)); }
  .login-field {
    width: 100%; margin: 0 0 10px; padding: 10px 0; border: 0;
    border-bottom: 1px solid rgba(255,255,255,.14); background: transparent;
    color: #e8f4fb; font: calc(14px * var(--type-scale, 1))/1.4 var(--mono);
    overflow-x: auto;
  }
  .login-field::placeholder { color: rgba(200, 220, 232, .35); }
  .login-back {
    background: none; border: none; color: rgba(220,232,240,.45); cursor: pointer;
    font: calc(12px * var(--type-scale, 1)) var(--mono); padding: 0; margin-bottom: 10px;
    flex: 0 0 auto;
  }
  .login-toast {
    position: fixed; left: 50%; bottom: 72px; transform: translateX(-50%);
    z-index: 72; padding: 8px 14px; border-radius: 999px;
    background: rgba(10, 18, 24, .7); border: 1px solid rgba(0, 147, 208, .25);
    color: #e8f4fb; font: calc(12px * var(--type-scale, 1)) var(--mono);
    opacity: 0; pointer-events: none; transition: opacity .25s;
  }
  .login-toast.is-on { opacity: 1; }

  @media (max-width: 640px) {
    .login-jewel { width: min(360px, 90vw); }
    .login-welcome { left: 16px; top: 18px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .login-photo, .login-photo-near, .login-mist { animation: none; }
    .login-photo { transform: scale(1) translate3d(0, 0, 0); filter: brightness(.85) saturate(.95); }
    .login-mist { opacity: 0; }
    .login-foyer { transition: opacity .4s ease; }
    .login-foyer.is-pullback .login-photo { transition: none; }
    .login-foyer.is-pullback .login-mist,
    .login-foyer.is-pullback .login-depth-near,
    .login-foyer.is-pullback .login-veil,
    .login-foyer.is-pullback .login-welcome,
    .login-foyer.is-pullback .login-stage,
    .login-foyer.is-pullback .login-remember,
    .login-foyer.is-pullback .login-sheet { transition: opacity .4s ease; }
    body.on-login.login-revealing .rail,
    body.on-login.login-revealing .app-main,
    body.on-login.login-revealing .assistant-sphere,
    body.on-login.login-revealing .orb-menu { transition: opacity .4s ease; }
  }

  /* Mountains overscan — never use inset:auto after top/left (shorthand
     resets them to auto, so extra size only hangs off bottom/right and
     pointer-up parallax paints --bg at the top). Login .login-photo uses
     the same box. Office plates keep center 40% + the smaller overscan
     on .global-bg img. */
  body.client-tier .global-bg[data-sky="mountains"] img,
  .global-bg[data-sky="mountains"] img {
    top: calc(-8% - 48px); right: auto; bottom: auto; left: calc(-8% - 48px);
    width: calc(116% + 96px); height: calc(116% + 96px);
    object-position: center 22%;
    image-rendering: auto;
  }
  body.client-tier.on-home .global-bg[data-sky="mountains"] img,
  body.client-tier.on-home .global-bg[data-sky="mountains"] img.active,
  body.client-tier.on-home .global-bg[data-sky="mountains"] #bg-night.active,
  body.client-tier.on-home .global-bg[data-sky="mountains"] #bg-evening.active {
    filter: brightness(.85) saturate(.95);
  }

  body.client-tier #home-view .hero-cta-capsule {
    display: inline-flex; align-items: stretch; overflow: hidden;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.28);
    background: rgba(5,7,10,.38);
    backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
    box-shadow: 0 20px 50px -18px rgba(56,214,255,.4), inset 0 1px 0 rgba(255,255,255,.1);
  }
  body.client-tier #home-view .hero-cta-cell {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    box-sizing: border-box; margin: 0; border: 0; border-radius: 0;
    color: #fff; font: 600 15px/1 system-ui, sans-serif;
    padding: 16px 28px; cursor: pointer; text-decoration: none;
    transition: background .15s, box-shadow .15s;
  }
  body.client-tier #home-view .hero-cta-cell svg { flex: none; }
  body.client-tier #home-view .hero-cta-capsule .edit-btn {
    background: linear-gradient(180deg, rgba(56,214,255,.28), rgba(56,214,255,.12));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
    padding-left: 32px; padding-right: 30px;
    border: 0;
    transform: none;
  }
  body.client-tier #home-view .hero-cta-capsule .edit-btn:hover {
    background: linear-gradient(180deg, rgba(56,214,255,.38), rgba(56,214,255,.16));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.24);
    transform: none;
  }
  body.client-tier #home-view .view-live-btn {
    background: transparent;
    box-shadow: inset 1px 0 0 rgba(255,255,255,.2);
    padding-left: 26px; padding-right: 30px;
  }
  body.client-tier #home-view .view-live-btn:hover { background: rgba(255,255,255,.06); }
  body.client-tier #home-view .hero-edit-sub { font: 12px var(--mono); color: rgba(255,255,255,.55); letter-spacing: .04em; }

  /* REQ-202609022300 — QA-lite Superadmin desk. Gone, not grey. No walk toggle. */
  body.qa-lite .hero-brand-tag {
    display: inline-block; margin-left: 10px; padding: 2px 8px;
    border-radius: 999px; font: 600 10px/1.4 var(--mono);
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--rim-amber); border: 1px solid rgba(224,181,120,.45);
  }
  body.qa-lite #tab-analytics,
  body.qa-lite #tab-leads,
  body.qa-lite #tab-media,
  body.qa-lite #tab-domains,
  body.qa-lite #tab-billing,
  body.qa-lite #tab-kb,
  body.qa-lite #viewas-toggle-btn,
  body.qa-lite #viewas-panel,
  body.qa-lite #add-site-form,
  body.qa-lite .add-site-tile,
  body.qa-lite .publish-btn,
  body.qa-lite .engine-update-link,
  body.qa-lite .edit-tags-link,
  body.qa-lite .refresh-thumb-btn,
  body.qa-lite .tag-chip-add,
  body.qa-lite #invite-email,
  body.qa-lite #invite-submit,
  body.qa-lite .walk-mode-bar { display: none !important; }

  /* REQ-202608311828 — Support 3-tab board (signed mock v1.28 / SA v1.9) */
  #support-view .page-title { font-size: 22px; margin: 0 0 4px; }
  #support-view .page-sub { margin: 0 0 16px; color: var(--text-dim); }
  #support-view .support-tab-row { margin-bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
  #support-view .glass-panel {
    padding: 18px 20px; border: 1px solid var(--border-soft); border-radius: 10px;
    background: rgba(255,255,255,.03); backdrop-filter: blur(12px);
  }
  #support-view .support-pane[hidden] { display: none !important; }
  #support-view .board-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
  #support-view .kb-search {
    margin: 0; flex: 1; min-width: 160px; font: 14px var(--mono); color: var(--text);
    background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 5px; padding: 9px 12px;
  }
  #support-view .segmented { display: flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
  #support-view .segmented button {
    font: 13px var(--mono); background: transparent; border: none; color: var(--text-dim);
    padding: 7px 12px; cursor: pointer;
  }
  #support-view .segmented button.active { color: var(--text); background: rgba(255,255,255,.06); }
  #support-view .kanban { display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: 14px; }
  #support-view .kanban-col { min-width: 0; }
  #support-view .kanban-col-h { font: 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin: 0 0 12px; }
  #support-view .kanban-card {
    display: flex; flex-direction: column; gap: 8px; padding: 14px 15px; margin-bottom: 10px;
    border: 1px solid var(--border-soft); border-radius: 8px; background: rgba(255,255,255,.03);
  }
  #support-view .kanban-card[hidden] { display: none; }
  #support-view .kanban-id-row { display: flex; align-items: center; gap: 8px; }
  #support-view .kanban-id { font: 13px/1.3 var(--mono); color: var(--text); letter-spacing: .02em; }
  #support-view .kanban-id-copy {
    flex: none; width: 26px; height: 26px; margin: 0; padding: 0;
    display: grid; place-items: center; border: none; background: transparent;
    color: var(--text-dim); opacity: .5; cursor: pointer; border-radius: 4px;
  }
  #support-view .kanban-id-copy svg { display: block; width: 14px; height: 14px; }
  #support-view .kanban-card:hover .kanban-id-copy,
  #support-view .kanban-id-copy:focus-visible { opacity: 1; color: var(--accent); }
  #support-view .kanban-id-copied {
    font: 12px var(--mono); color: var(--text-dim);
    opacity: 0; transition: opacity .18s; pointer-events: none;
  }
  #support-view .kanban-id-copied.is-on { opacity: 1; }
  #support-view .kanban-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  #support-view .kanban-title { font-size: 16px; line-height: 1.3; color: var(--text); flex: 1; min-width: 0; }
  #support-view .kanban-quiet {
    margin: 0; padding: 6px 8px; border: none; border-radius: 5px;
    font: 13px/1.35 var(--mono); color: var(--text-muted);
    background: rgba(0,0,0,.18);
  }
  #support-view .kanban-card { cursor: pointer; }
  #support-view .kanban-id-copy, #support-view .ticket-more { cursor: pointer; }
  #support-view .kanban-meta { font: 13px var(--mono); color: var(--text-muted); }
  #support-view .sev { font: 13px/1.2 var(--mono); letter-spacing: .03em; padding: 4px 8px; border-radius: 4px; border: 1px solid var(--border); color: var(--text-muted); width: fit-content; flex: none; }
  #support-view .sev-1 { color: var(--warn); border-color: var(--warn); }
  #support-view .sev-2 { color: var(--rim-amber, #e0b578); border-color: var(--rim-amber, #e0b578); }
  #support-view .kanban-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; }
  #support-view .ticket-more { font: 13px var(--mono); color: var(--accent); background: none; border: none; padding: 0; cursor: pointer; }
  #support-view .ticket-empty { font-size: 14px; color: var(--text-dim); margin: 0; padding: 8px 0; }
  #support-view .ticket-empty[hidden] { display: none; }
  .detail-card .status-dd,
  #support-view .status-dd, #support-view .caller-dd {
    font: 13px var(--mono); color: var(--text-muted);
    background: rgba(255,255,255,.04); border: 1px solid var(--border-soft); border-radius: 4px; padding: 4px 6px; max-width: 100%;
  }
  #support-view .request-form { display: flex; flex-direction: column; gap: 8px; }
  #support-view .request-form input, #support-view .request-form select, #support-view .request-form textarea,
  #support-archive-card input {
    font: 12px var(--mono); color: var(--text); background: rgba(255,255,255,.04); border: 1px solid var(--border);
    border-radius: 5px; padding: 8px 10px; width: 100%; box-sizing: border-box;
  }
  #support-view .inline-form-row { display: flex; gap: 8px; }
  #support-view .inline-form-row > * { flex: 1; }
  #support-view .inline-form-actions { display: flex; gap: 8px; margin-top: 2px; }
  #support-view .field-note, #support-archive-card .field-note { font: 11px var(--mono); color: var(--text-dim); margin: 4px 0 0; }
  #support-view .btn-outline, #support-view .btn-primary-outline, #support-archive-card .btn-outline {
    font: 12px var(--mono); padding: 7px 12px; border-radius: 6px; cursor: pointer;
    background: transparent; color: var(--text); border: 1px solid var(--border);
  }
  #support-view .btn-primary-outline { border: 1px solid var(--accent); background: var(--accent-soft, rgba(56,214,255,.12)); color: var(--accent); }
  #support-view .ax-panel { padding: 14px 0; border-bottom: 1px solid var(--border-soft); }
  #support-view .ax-panel:last-child { border-bottom: none; }
  #support-view .ax-h { font-size: 13px; color: var(--text); margin: 0 0 8px; }
  #support-view .ax-quiet { font: 12px var(--mono); color: var(--text-dim); margin: 0; }
  #support-view .ax-donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
  #support-view .ax-donut { width: 118px; height: 118px; border-radius: 50%; position: relative; flex: none; }
  #support-view .ax-donut::after {
    content: ""; position: absolute; inset: 30px; border-radius: 50%;
    background: rgba(12,16,22,.92); border: 1px solid var(--border-soft);
  }
  #support-view .ax-legend { margin: 0; padding: 0; list-style: none; font: 11px var(--mono); color: var(--text-dim); }
  #support-view .ax-legend li { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
  #support-view .ax-swatch { width: 8px; height: 8px; border-radius: 50%; flex: none; }
  #support-view .ax-trend { width: 100%; height: 42px; display: block; margin-top: 8px; }
  .detail-sheet {
    position: fixed; inset: 0; z-index: 70; display: flex; align-items: stretch; justify-content: flex-end;
    background: rgba(5,7,10,.28);
  }
  .detail-sheet[hidden] { display: none; }
  .detail-card {
    width: min(420px, 92vw); height: 100%; overflow: auto; margin: 0;
    padding: 22px 24px 28px; border: none; border-left: 1px solid var(--border-soft);
    border-radius: 0; background: rgba(16,20,28,.96);
    box-shadow: -18px 0 40px -24px rgba(0,0,0,.55);
  }
  .detail-card .kanban-id-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
  .detail-card .kanban-id { font: 13px/1.3 var(--mono); color: var(--text); }
  .detail-card .kanban-id-copy {
    flex: none; width: 26px; height: 26px; margin: 0; padding: 0; border: none; background: transparent;
    color: var(--text-dim); cursor: pointer; display: grid; place-items: center;
  }
  .detail-card .kanban-id-copy svg { width: 14px; height: 14px; }
  .detail-card .kanban-id-copied { font: 12px var(--mono); color: var(--text-dim); opacity: 0; }
  .detail-card .kanban-id-copied.is-on { opacity: 1; }
  .detail-card .kanban-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .detail-card .kanban-title { font-size: 16px; line-height: 1.3; color: var(--text); flex: 1; }
  .detail-card .td-body { margin: 14px 0 0; font: 14px/1.5 inherit; color: var(--text); white-space: pre-wrap; }
  .detail-card .td-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-top: 14px; }
  .detail-card .td-meta { font: 13px var(--mono); color: var(--text-muted); }
  .detail-card .td-thread { margin-top: 22px; }
  .detail-card .td-thread-h { font: 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin: 0 0 6px; }
  .detail-card .td-thread-empty { font: 13px var(--mono); color: var(--text-dim); margin: 0; }
  .detail-dl { margin: 0; display: grid; grid-template-columns: 88px 1fr; gap: 8px 12px; font: 12px var(--mono); }
  .detail-dl dt { color: var(--text-dim); }
  .detail-dl dd { margin: 0; color: var(--text); }
  @media (max-width: 900px) { #support-view .kanban { grid-template-columns: 1fr 1fr; } }