/* ═══════════════════════════════════════════════════════════════════════════
 * signitur — DASHBOARD
 * Rewritten Sep 5 as one coherent sheet (four rounds of appended overrides had
 * started contradicting each other). Loaded LAST; deleting the <link> reverts.
 *
 * The rules it holds itself to:
 *   · one spacing scale (4/8/12/16/20/24/32), no arbitrary numbers
 *   · one radius scale (8/12/16/20), tighter as elements get smaller
 *   · tracking is size-specific: negative on display type, ~0 on body,
 *     positive on small caps labels — a single letter-spacing is wrong somewhere
 *   · depth comes from layered shadow + a hairline, never a heavy border
 *   · press feedback fires on pointer-down, not on release
 *   · the accent appears once per region, not on every surface
 * ═══════════════════════════════════════════════════════════════════════════ */

body.dash {
  --rail-w: 236px;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px;

  --rail-bg: #1A110A;
  --rail-line: rgba(255, 255, 255, .07);
  --rail-ink: #FBF7F3;
  --rail-ink-2: #A69384;

  --work-bg: #F7F5F2;
  --surface: #FFFFFF;
  --hairline: rgba(30, 18, 9, .09);
  --ink-1: #161110;
  --ink-2: #6B615A;
  --ink-3: #9C918A;

  --lift-1: 0 1px 2px rgba(30, 18, 9, .05), 0 1px 1px rgba(30, 18, 9, .03);
  --lift-2: 0 4px 12px rgba(30, 18, 9, .07), 0 1px 3px rgba(30, 18, 9, .05);
  --lift-3: 0 18px 40px rgba(0, 0, 0, .34), 0 2px 6px rgba(0, 0, 0, .2);

  --ease: cubic-bezier(.32, .72, 0, 1);

  padding-left: var(--rail-w);
  color: var(--ink-1);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* dash-brand.css sets body.dash.brand{background:...} at (0,0,2,1); match that
   specificity or the workspace ground silently stays white and the cards lose
   the surface separation the whole light scheme depends on. */
body.dash.brand { background: var(--work-bg); }
body.dash.brand.theme-dark { background: #0E0A07; }

/* ── rail ─────────────────────────────────────────────────────────────── */
#rail {
  position: fixed; inset: 0 auto 0 0; width: var(--rail-w); z-index: 40;
  display: flex; flex-direction: column;
  padding: var(--s5) var(--s3) var(--s3);
  background: var(--rail-bg);
  border-right: 1px solid var(--rail-line);
}
#rail .rail-top { padding: 0 var(--s2) var(--s5); }
#rail .brand-logo, #rail .brand-logo img { display: block; height: 24px; width: auto; }

#rail .rail-create {
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  width: 100%; margin-top: var(--s4);
  padding: 9px var(--s3); border: 0; border-radius: var(--r-sm);
  background: linear-gradient(90deg, #FB8221, #FA962B); color: #FFFFFF;
  font-weight: 600; font-size: 13px; line-height: 1; letter-spacing: -.006em; cursor: pointer;
  transition: transform .1s var(--ease), filter .18s var(--ease);
}
#rail .rail-create:hover { filter: brightness(1.05); }
#rail .rail-create:active { transform: scale(.975); }
#rail .rail-create svg { width: 14px; height: 14px; }

#rail #mainNav { display: flex; flex-direction: column; gap: 1px; margin: 0; flex: 1 1 auto; }
#rail .nav-tab {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px var(--s3); border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--rail-ink-2);
  font-weight: 500; font-size: 13px; line-height: 1; letter-spacing: -.006em;
  cursor: pointer; text-align: left;
  transition: background .16s var(--ease), color .16s var(--ease);
}
#rail .nav-tab svg { flex: 0 0 auto; width: 16px; height: 16px; opacity: .85; }
#rail .nav-tab:hover { background: rgba(255,255,255,.05); color: var(--rail-ink); }
#rail .nav-tab.active { background: rgba(255,255,255,.09); color: var(--rail-ink); font-weight: 600; }
#rail .nav-tab.active svg { color: var(--o-btn-a, #FB8221); opacity: 1; }
#rail .nav-tab.is-soon { opacity: .42; cursor: default; }
#rail .nav-tab.is-soon:hover { background: transparent; color: var(--rail-ink-2); }
#rail .soon-badge {
  margin-left: auto; font-style: normal;
  font-size: 9px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 999px;
  background: rgba(255,255,255,.08); color: var(--rail-ink-2);
}

#rail .rail-foot { border-top: 1px solid var(--rail-line); padding-top: var(--s2); }
#rail .theme-toggle {
  display: flex; align-items: center; gap: var(--s2); width: 100%; margin-bottom: var(--s1);
  padding: 7px var(--s3); border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--rail-ink-2);
  font-weight: 500; font-size: 12px; line-height: 1; cursor: pointer;
  transition: background .16s var(--ease), color .16s var(--ease);
}
#rail .theme-toggle:hover { background: rgba(255,255,255,.05); color: var(--rail-ink); }
#rail .tt-track {
  width: 28px; height: 16px; border-radius: 999px; flex: 0 0 auto; position: relative;
  background: rgba(255,255,255,.16); transition: background .2s var(--ease);
}
#rail .tt-knob {
  position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--rail-ink); transition: transform .24s var(--ease), background .2s var(--ease);
}
#rail .theme-toggle[aria-pressed="true"] .tt-track { background: var(--o-btn-a, #FB8221); }
#rail .theme-toggle[aria-pressed="true"] .tt-knob { transform: translateX(12px); background: #FFFFFF; }

#rail .ws-wrap { position: relative; width: 100%; }
#rail .ws-chip {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px var(--s2); border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: var(--rail-ink); cursor: pointer;
  transition: background .16s var(--ease);
}
#rail .ws-chip:hover { background: rgba(255,255,255,.05); }
#rail .ws-avatar {
  width: 28px; height: 28px; border-radius: var(--r-sm); flex: 0 0 auto;
  display: grid; place-items: center; font-size: 14px;
  background: linear-gradient(90deg, #FB8221, #FA962B); color: #FFFFFF;
}
#rail .ws-txt { min-width: 0; text-align: left; display: block; }
#rail .ws-txt b { display: block; font-weight: 600; font-size: 12px; line-height: 1.3; letter-spacing: -.006em;
  color: var(--rail-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#rail .ws-sub { display: block; font-size: 11px; color: var(--rail-ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#rail .ws-chip > svg { margin-left: auto; width: 14px; height: 14px; color: var(--rail-ink-2); }
#rail #wsMenu { top: auto; bottom: calc(100% + var(--s2)); left: 0; right: 0; min-width: 0; }

/* ── workspace ────────────────────────────────────────────────────────── */
body.dash main.view { padding: var(--s7) var(--s7) 56px; max-width: 1160px; }
body.dash .dash-grid { display: block; margin-bottom: var(--s7); }

/* ── hero: one tight band, three parts, no dead middle ────────────────── */
body.dash .col-left {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: var(--s6);
  padding: var(--s5) var(--s6);
  border-radius: var(--r-xl);
  background: linear-gradient(145deg, #2B1A0F 0%, #1A110A 62%);
  box-shadow: var(--lift-3);
  position: relative; overflow: hidden;
}
body.dash .col-left::after {           /* one soft bloom, the only decoration */
  content: ''; position: absolute; right: -80px; top: -110px;
  width: 300px; height: 300px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(251, 130, 33,.13), transparent 66%);
}
body.dash .col-left > .card { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; }


body.dash .master-card { position: relative; z-index: 1; flex: 0 0 auto; }
body.dash .master-card .card-head {
  display: flex; align-items: center; gap: var(--s2); margin: 0 0 10px;
}
body.dash .master-card .card-head h3 {
  margin: 0 auto 0 0; white-space: nowrap;
  font-weight: 600; font-size: 10px; line-height: 1; letter-spacing: .1em; text-transform: uppercase;  /* label: open up */
  color: var(--rail-ink-2);
}
body.dash .col-left .master-card .primary {
  background: transparent; border: 1px solid rgba(255,255,255,.18); color: var(--rail-ink);
  border-radius: 999px; padding: 6px 12px; box-shadow: none; white-space: nowrap;
  font-weight: 600; font-size: 11.5px; line-height: 1; letter-spacing: -.004em;
  transition: background .16s var(--ease), transform .1s var(--ease);
}
body.dash .col-left .master-card .primary:hover { background: rgba(255,255,255,.1); filter: none; }
body.dash .col-left .master-card .primary:active { transform: scale(.97); }
body.dash .col-left .master-card .primary svg { width: 13px; height: 13px; }
body.dash .master-card .kebab { color: var(--rail-ink-2); border-radius: var(--r-sm); }
body.dash .master-card .kebab:hover { color: var(--rail-ink); background: rgba(255,255,255,.09); }
body.dash .master-frame {
  background: #fff; border: 0; border-radius: var(--r-lg);
  padding: var(--s2); box-shadow: var(--lift-3);
}

body.dash .master-frame .sig-slot { min-height: 0; padding: 0; border: 0; }

/* ── library header ───────────────────────────────────────────────────── */
body.dash .lib { background: transparent; border: 0; box-shadow: none; padding: 0; }
body.dash .lib-bar {
  display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--s1) var(--s4); border: 0; flex-wrap: wrap;
}
body.dash .lib-bar::before {
  content: 'Your signatures';
  font-weight: 600; font-size: 17px; line-height: 1.2; letter-spacing: -.017em;
  color: var(--ink-1); margin-right: var(--s1);
}
body.dash .search-wrap {
  height: 34px; padding: 0 10px; gap: var(--s2);
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-sm); box-shadow: var(--lift-1);
}
body.dash .search-wrap input { font-size: 13px; letter-spacing: -.004em; color: var(--ink-1); }
body.dash .search-wrap input::placeholder { color: var(--ink-3); }
body.dash .search-wrap svg { color: var(--ink-3); }
body.dash .count-pill {
  background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--lift-1);
  color: var(--ink-2); border-radius: var(--r-sm); padding: 7px 11px;
  font-weight: 500; font-size: 12px; line-height: 1; letter-spacing: -.004em;
}
body.dash .count-pill b { color: var(--ink-1); font-weight: 600; }

/* ── signatures: SIDE BY SIDE ─────────────────────────────────────────── */
body.dash .sig-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--s4); padding: 0;
}
body.dash .sig-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: var(--s3) var(--s3) var(--s4);
  box-shadow: var(--lift-1);
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
body.dash .sig-card:hover {
  box-shadow: var(--lift-2); border-color: rgba(30, 18, 9,.14); transform: translateY(-1px);
}
body.dash .sig-card .sig-card-head {
  display: flex; align-items: center; gap: var(--s2);
  margin: 0; padding: 0 var(--s1); border: 0; min-height: 28px;
}
body.dash .sig-card .stat { display: none !important; }     /* counters were clutter */
body.dash .sig-name-lbl {
  flex: 1 1 auto; min-width: 0; cursor: text;
  font-weight: 600; font-size: 13.5px; line-height: 1.3; letter-spacing: -.011em; color: var(--ink-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.dash .sig-card .head-r { margin-left: auto; display: flex; align-items: center; gap: var(--s1); width: auto; }
body.dash .sig-card .head-r .dropdown { margin-left: 0; }
body.dash .sig-card .master-pill {
  background: rgba(251, 130, 33,.16); color: #F4761B; border-radius: 999px;
  padding: 3px 8px; font-weight: 600; font-size: 10.5px; line-height: 1; letter-spacing: .01em;
  display: inline-flex; align-items: center; gap: 4px;
}
body.dash .sig-card .master-pill svg { width: 11px; height: 11px; }
body.dash .sig-card .kebab { color: var(--ink-3); border-radius: 6px; width: 26px; height: 26px; }
body.dash .sig-card .kebab:hover { color: var(--ink-1); background: #F1EEEB; }

body.dash .sig-card .sig-body { padding: 0; position: relative; }
/* .sig-slot is styled once, at the end of this file (single white surface) */
body.dash .sig-card .hover-veil { display: none !important; }
body.dash .sig-card .use-mini {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 100%; margin-top: 2px; padding: 8px; border-radius: var(--r-sm);
  border: 1px solid var(--hairline); background: #FAF8F6; color: #F4761B;
  font-weight: 600; font-size: 12.5px; line-height: 1; letter-spacing: -.006em; cursor: pointer;
  transition: background .16s var(--ease), transform .1s var(--ease);
}
body.dash .sig-card .use-mini:hover { background: linear-gradient(90deg, #FB8221, #FA962B); border-color: transparent; color: #FFFFFF; }
body.dash .sig-card .use-mini:active { transform: scale(.985); }

input.sig-rename {
  width: 100%; font-weight: 600; font-size: 13.5px; line-height: 1; letter-spacing: -.011em;
  color: var(--ink-1); background: #fff;
  border: 1px solid var(--o-btn-a, #FB8221); border-radius: 6px;
  padding: 4px 7px; outline: none; box-shadow: 0 0 0 3px rgba(251, 130, 33,.2);
}

/* the create tile matches the cards it sits beside */
body.dash .upgrade-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; min-height: 208px; padding: var(--s5);
  border: 1px dashed rgba(30, 18, 9,.18); border-radius: var(--r-lg);
  background: transparent; box-shadow: none; cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
body.dash .upgrade-tile:hover { background: rgba(251, 130, 33,.06); border-color: rgba(251, 130, 33,.5); }
body.dash .upgrade-tile p, body.dash .upgrade-tile .cc-title {
  margin: 0; font-weight: 500; font-size: 13px; line-height: 1.3; letter-spacing: -.006em; color: var(--ink-2);
}
body.dash .upgrade-tile .plus-circle {
  width: 30px; height: 30px; font-size: 17px; border-color: rgba(30, 18, 9,.18); color: var(--ink-2);
}

/* ── dark appearance (chrome only — previews stay white, as email renders) ── */
body.dash.theme-dark {
  --work-bg: #120C08; --surface: #1E140D;
  --hairline: rgba(255,255,255,.08);
  --ink-1: #F5F0EC; --ink-2: #A69384; --ink-3: #8A7E76;
  --lift-1: 0 1px 2px rgba(0,0,0,.4); --lift-2: 0 6px 20px rgba(0,0,0,.45);
}
body.dash.theme-dark .search-wrap input { color: var(--ink-1); }
/* (was: .sig-slot background #fff — that rule outranked the transparent one
   below at (0,0,4,0) and kept the extra white slab in dark mode) */
body.dash.theme-dark .sig-card .use-mini { background: #2E1F14; border-color: rgba(255,255,255,.09); color: #FFC98F; }
body.dash.theme-dark .sig-card .use-mini:hover { background: linear-gradient(90deg, #FB8221, #FA962B); color: #FFFFFF; }
body.dash.theme-dark .sig-card .kebab:hover { background: #33231A; }
body.dash.theme-dark .sig-card .master-pill { background: rgba(251, 130, 33,.14); color: #FFB56B; }
body.dash.theme-dark .upgrade-tile { border-color: rgba(255,255,255,.14); }
body.dash.theme-dark .upgrade-tile:hover { background: rgba(251, 130, 33,.07); }
body.dash.theme-dark .menu { background: #1E140D; border-color: var(--hairline); }
body.dash.theme-dark .menu-item { color: #EADFD5; }
body.dash.theme-dark .menu-item:hover { background: #33231A; }
body.dash.theme-dark input.sig-rename { background: #1B120C; color: var(--ink-1); }

/* ── narrow ───────────────────────────────────────────────────────────── */
@media (max-width: 940px) {
  body.dash { padding-left: 0; }
  #rail {
    position: static; width: auto; flex-direction: row; align-items: center; gap: var(--s2);
    padding: 10px var(--s4); border-right: 0; border-bottom: 1px solid var(--rail-line);
  }
  #rail .rail-top { padding: 0; }
  #rail .rail-create { width: auto; margin: 0 0 0 var(--s3); padding: 8px 12px; }
  #rail .rail-create span { display: none; }
  #rail #mainNav { flex-direction: row; flex: 1 1 auto; justify-content: flex-start;
    gap: 2px; margin-left: var(--s3); }
  #rail .nav-tab span, #rail .soon-badge { display: none; }
  #rail .rail-foot { border-top: 0; padding-top: 0; display: flex; align-items: center; gap: var(--s2); }
  #rail .theme-toggle { width: auto; margin: 0; }
  #rail .tt-lbl, #rail .ws-txt { display: none; }
  #rail #wsMenu { bottom: auto; top: calc(100% + var(--s2)); left: auto; right: 0; min-width: 210px; }
  body.dash main.view { padding: var(--s5) var(--s4) 48px; }
  body.dash .col-left { grid-template-columns: 1fr; gap: var(--s5); }
  body.dash #procCard { flex-wrap: wrap; gap: var(--s4); }
  body.dash .sig-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  body.dash *, body.dash *::before, body.dash *::after {
    transition-duration: .01ms !important; animation-duration: .01ms !important;
  }
}

/* Specific labels beat generic umbrellas: this view is signatures, not a
   catch-all "dashboard". The data-view value stays 'dashboard' for the JS. */
#rail .nav-tab[data-view="dashboard"] span { font-size: 0; }
#rail .nav-tab[data-view="dashboard"] span::after { content: 'Signatures'; font-size: 13px; }


/* ═══════════════════════════════════════════════════════════════════════════
 * Borrowed from the Pikzels reference (owner, Sep 5): near-black ground with a
 * dot-grid texture, one big accent bloom anchored at the bottom, pill controls,
 * a plan badge top-left of the content, and the account boxed in the rail.
 * Adopted as STRUCTURE, not as a copy — the palette stays signitur's.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── workspace header ─────────────────────────────────────────────────── */
body.dash .ws-head {
  display: flex; align-items: center; gap: var(--s3);
  margin-bottom: var(--s5);
}
body.dash .ws-head-r { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }
body.dash .plan-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 6px; border-radius: 999px;
  border: 1px solid var(--hairline); background: var(--surface); box-shadow: var(--lift-1);
  font-size: 13px; letter-spacing: -.006em; color: var(--ink-2);
}
body.dash .plan-badge b { font-weight: 600; color: var(--orange-ink, #F4761B); }
body.dash .plan-badge .pb-mark {
  width: 20px; height: 20px; border-radius: 7px; flex: 0 0 auto;
  background: linear-gradient(145deg, var(--o-btn-a, #FB8221), var(--o-btn-b, #FA962B));
  box-shadow: 0 0 0 1px rgba(251, 130, 33,.35), 0 2px 8px rgba(251, 130, 33,.35);
}
body.dash .plan-badge.is-free .pb-mark { background: #D8CFC7; box-shadow: none; }
body.dash .plan-badge.is-free b { color: var(--ink-2); }
body.dash .quota-chip {
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--hairline); background: var(--surface); box-shadow: var(--lift-1);
  font-size: 12.5px; letter-spacing: -.004em; color: var(--ink-3);
}
body.dash .quota-chip b { color: var(--ink-1); font-weight: 600; }

/* ── pill controls ────────────────────────────────────────────────────── */
body.dash .search-wrap, body.dash .count-pill,
#rail .rail-create, #rail .nav-tab, #rail .ws-chip, #rail .theme-toggle,
body.dash .sig-card .use-mini { border-radius: 999px; }
body.dash .search-wrap { padding: 0 14px; }
#rail .nav-tab { padding-left: 12px; padding-right: 12px; }

/* the primary action glows, the way the reference's Generate button does */
#rail .rail-create {
  box-shadow: 0 0 0 1px rgba(251, 130, 33,.5), 0 6px 22px rgba(251, 130, 33,.28);
}
#rail .rail-create:hover { box-shadow: 0 0 0 1px rgba(251, 130, 33,.65), 0 8px 28px rgba(251, 130, 33,.4); }

/* ── the account, boxed ───────────────────────────────────────────────── */
#rail .rail-foot {
  border: 1px solid var(--rail-line); border-radius: var(--r-md);
  padding: var(--s1); background: rgba(255,255,255,.02);
}

/* ═══ DARK: near-black ground, dot grid, bottom bloom ═══════════════════ */
body.dash.theme-dark {
  background: #0E0A07;
  --work-bg: #0E0A07; --surface: #120E0B;
  --rail-bg: #0B0705;
  --hairline: rgba(255,255,255,.07);
  --rail-line: rgba(255,255,255,.06);
  --ink-1: #F3EFEB; --ink-2: #A69384; --ink-3: #6A7B77;
  --lift-1: 0 1px 2px rgba(0,0,0,.5); --lift-2: 0 8px 26px rgba(0,0,0,.55);
  position: relative;
}
/* the dot grid sits under everything and scrolls with the page */
body.dash.theme-dark main.view {
  background-image: radial-gradient(circle, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 22px 22px; background-position: -1px -1px;
}
/* one bloom, anchored bottom-centre, behind the content */
body.dash.theme-dark::after {
  content: ''; position: fixed; left: 50%; bottom: -240px; z-index: 0;
  width: 900px; height: 420px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(251, 130, 33,.18), rgba(251, 130, 33,.05) 45%, transparent 70%);
  filter: blur(24px);
}
/* z-index only -- restating position here previously clobbered #rail's
   position:fixed at higher specificity and dropped the rail into the flow */
body.dash.theme-dark main.view { position: relative; z-index: 1; }
body.dash.theme-dark #rail { z-index: 40; }
body.dash.theme-dark .plan-badge, body.dash.theme-dark .quota-chip {
  background: rgba(255,255,255,.04); border-color: var(--hairline);
}
body.dash.theme-dark .plan-badge b { color: #FFB56B; }
body.dash.theme-dark .search-wrap, body.dash.theme-dark .count-pill {
  background: rgba(255,255,255,.04); border-color: var(--hairline);
}
body.dash.theme-dark .col-left {
  background: linear-gradient(145deg, #171210 0%, #0B0806 60%);
  border: 1px solid var(--hairline);
}
body.dash.theme-dark .sig-card { background: rgba(255,255,255,.035); border-color: var(--hairline); }
body.dash.theme-dark .sig-card:hover { border-color: rgba(251, 130, 33,.28); background: rgba(255,255,255,.05); }
body.dash.theme-dark .upgrade-tile { border-color: rgba(255,255,255,.12); }
body.dash.theme-dark #rail .rail-foot { background: rgba(255,255,255,.03); }

/* --ink-3 is a hairline/icon tone, not a text tone: 2.88:1 on white. The chip's
   label is real text at 12.5px, so it takes --ink-2 (4.9:1). */
body.dash .quota-chip { color: var(--ink-2); }

/* ═══ the preview: ONE white surface, not three ═════════════════════════
 * The signature renders its OWN white card (render.js spotlight layout is a
 * bordered card). The dashboard was then putting that card inside a white
 * .sig-slot inside a white .master-frame — three stacked whites, which is what
 * made it a slab. Everything around the signature is now transparent, so the
 * only white on screen is the signature itself.
 *
 * It cannot be tinted or darkened: the animated photo and icons are GIFs matted
 * on literally #ffffff (effects.js:301 — 1-bit GIF alpha cannot fade), so any
 * off-white backing would show the matte as a lighter rectangle.
 *
 * drop-shadow, not box-shadow: it follows the signature card's actual painted
 * silhouette including its own corner radius, so the shadow never sits proud of
 * a corner the way a box-shadow on the wrapper would.
 * ═══════════════════════════════════════════════════════════════════════ */

body.dash .sig-card .sig-slot,
body.dash .master-frame,
body.dash .master-frame .sig-slot {
  background: transparent; border: 0; padding: 0; min-height: 0; box-shadow: none;
  display: flex; align-items: center; justify-content: center;
}
body.dash .sig-card .sig-slot .sig-inner,
body.dash .master-frame .sig-inner {
  transform: none; background: transparent; padding: 0; box-shadow: none;
  display: inline-block;
  /* NO shadow. The signature renders its own bordered card, so the shadow only
     added the grey halo down the sides the owner flagged. */
  filter: none;
}
body.dash.theme-dark .sig-card .sig-slot .sig-inner,
body.dash.theme-dark .master-frame .sig-inner {
  /* white on near-black separates completely on its own */
  filter: none;
}
body.dash .sig-card .sig-body {
  display: flex; align-items: center; justify-content: center;
  padding: var(--s3) 0 var(--s4);
}

/* ── menu hover: text was vanishing ───────────────────────────────────────
 * dash-brand.css paints these items with a two-layer background-clip:text
 * trick (gradient clipped to the glyphs + a wash behind). My dark-theme rule
 * set the `background` SHORTHAND, which reset background-image to none — so the
 * glyphs clipped to nothing and, with -webkit-text-fill-color:transparent still
 * live, the label disappeared on hover. The gradient also fails in LIGHT mode
 * with the brand fill: #FB8221 on a #FFF3E7 wash is 1.9:1.
 * Solid colours in both themes; the flourish is not worth an unreadable label. */
body.dash .sig-card .menu-item:hover:not(.danger),
body.dash #masterMenu .menu-item:hover:not(.danger),
body.dash .menu .menu-item:hover:not(.danger) {
  background-image: none;
  background-color: #FFF3E7;
  -webkit-text-fill-color: currentColor;
  color: #F4761B;
}
body.dash.theme-dark .sig-card .menu-item:hover:not(.danger),
body.dash.theme-dark #masterMenu .menu-item:hover:not(.danger),
body.dash.theme-dark .menu .menu-item:hover:not(.danger) {
  background-color: #33231A;
  -webkit-text-fill-color: currentColor;
  color: #FFC98F;
}

/* ═══ HERO, v2 ══════════════════════════════════════════════════════════════
 * v1 was a wide dark band with the greeting pinned far left, a logo chip
 * floating in the middle and the signature far right — three islands with dead
 * water between them, and the primary action stranded in a corner.
 *
 * v2 is two columns that actually meet: a stacked left block (greeting, status,
 * logo, action) whose height matches the signature beside it, and the master
 * signature lit from behind by the angular beam from the old site's sign-in
 * page (brand.css .glow) so the right side has a focal point instead of a card
 * sitting on flat paint.
 * ═══════════════════════════════════════════════════════════════════════════ */

body.dash .col-left {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: var(--s7);
  padding: var(--s6) var(--s6);
  border-radius: var(--r-xl);
  background: linear-gradient(140deg, #2A1A10 0%, #17110C 58%);
  border: 1px solid rgba(255,255,255,.06);
  position: relative; overflow: hidden;
}
body.dash .col-left::after { content: none; }          /* v1's corner bloom, retired */

/* left: one stacked block, so the column has the same height as the signature */
body.dash #procCard {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--s4); width: 100%;
}
body.dash #procCard .proc-l { width: 100%; }
body.dash #procCard .proc-l h2 {
  font-weight: 600; font-size: 29px; line-height: 1.06; letter-spacing: -.028em;
  color: #FBF7F3; margin: 0 0 6px;
}
body.dash #procCard .proc-sub {
  font-weight: 400; font-size: 13px; line-height: 1.35; letter-spacing: -.003em;
  color: #A69384; margin: 0 0 var(--s3);
}
body.dash #procCard .proc-bar {
  max-width: 220px; height: 3px; border-radius: 999px; background: rgba(255,255,255,.1);
}
body.dash #procCard .proc-bar i { background: var(--o-btn-a, #FB8221); border-radius: 999px; }
body.dash #procCard .proc-r {
  display: flex; align-items: center; gap: var(--s3); margin: 0; flex-wrap: wrap;
}
body.dash #procCard .logo-thumb {
  background: #fff; border: 0; border-radius: var(--r-md);
  padding: 9px var(--s3); box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
body.dash #procCard .logo-thumb img { filter: none; max-height: 20px; width: auto; }
/* the action now lives with the text it belongs to */
body.dash #procCard #masterUpgrade {
  background: transparent; border: 1px solid rgba(255,255,255,.16); color: #FBF7F3;
  border-radius: 999px; padding: 8px 15px; box-shadow: none; white-space: nowrap;
  font-weight: 600; font-size: 12.5px; letter-spacing: -.006em;
  transition: background .16s var(--ease), transform .1s var(--ease);
}
body.dash #procCard #masterUpgrade:hover { background: rgba(255,255,255,.09); filter: none; }
body.dash #procCard #masterUpgrade:active { transform: scale(.97); }
body.dash #procCard #masterUpgrade svg { width: 14px; height: 14px; }

/* right: the signature, lit */
body.dash .master-card { position: relative; flex: 0 0 auto; }
body.dash .master-card .card-head {
  display: flex; align-items: center; gap: var(--s2);
  margin: 0 0 var(--s3); position: relative; z-index: 2;
}
body.dash .master-card .card-head h3 {
  margin: 0 auto 0 0; white-space: nowrap;
  font-weight: 600; font-size: 10px; line-height: 1; letter-spacing: .1em;
  text-transform: uppercase; color: #A69384;
}
body.dash .master-card .kebab { color: #A69384; border-radius: var(--r-sm); }
body.dash .master-card .kebab:hover { color: #FBF7F3; background: rgba(255,255,255,.09); }
body.dash .master-frame { position: relative; z-index: 2; }

/* ── the light beam: the old site's angular glow, scaled to the card ───────
   Same 4-stop conic recipe as brand.css .glow (the sign-in page), sized and
   blurred for a card rather than a viewport. */
body.dash .ms-beam {
  position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 54%; transform: translate(-50%, -50%);
  width: 150%; height: 210%;
  border-radius: 50%;
  opacity: .5; filter: blur(46px);
  background: conic-gradient(from 210deg at 50% 50%,
    var(--o-glow-a, #FB8221) 0%,
    var(--o-glow-a, #FB8221) 18%,
    var(--o-glow-b, #FA962B) 30%,
    rgba(251, 130, 33,0) 68%,
    rgba(250, 150, 43,0) 82%,
    var(--o-glow-a, #FB8221) 100%);
}
body.dash .ms-beam::after {
  content: ''; position: absolute; inset: 8% 0 0; border-radius: 50%;
  background: radial-gradient(70% 100% at 50% 62%, rgba(251, 130, 33,.3), rgba(251, 130, 33,0) 74%);
}
@media (prefers-reduced-motion: reduce) { body.dash .ms-beam { filter: blur(34px); } }

/* the beam was bleeding to the band's edge and reading as a wash. Tighter,
   brighter, and clipped so it haloes the card instead of the container. */
body.dash .ms-beam {
  width: 128%; height: 172%; opacity: .6; filter: blur(38px);
}
body.dash .master-card { padding: 2px; }
/* let the two columns meet rather than sit at opposite walls */
body.dash .col-left { gap: var(--s5); grid-template-columns: minmax(0, 1fr) minmax(0, auto); }
body.dash #procCard { max-width: 420px; }

/* renderInto fits the signature to its FRAME's width, and the frame was
   shrink-wrapping its own content — so the cap could never grow it. Give the
   frame a real width and the hero object fills the right half. */
body.dash .master-card { width: 350px; }
body.dash .master-frame { width: 100%; }
body.dash .col-left { padding-right: var(--s7); }

/* Two blocks pinned to opposite walls left ~440px of dead dark between them.
   Size both to content and centre the pair: the band reads as one composition
   with even margins instead of two islands. */
body.dash .col-left {
  grid-template-columns: auto auto; justify-content: center;
  gap: 56px; padding: var(--s5) var(--s6);
}
body.dash #procCard { max-width: 340px; }
body.dash .master-card { width: 330px; }

/* ═══ HERO v3 ═══════════════════════════════════════════════════════════════
 * v2 was two zones with a gap: greeting on the left, signature on the right,
 * and the logo chip floating between them attached to nothing.
 *
 * v3 is THREE zones that each carry real content, so the band fills by
 * construction rather than by padding:
 *   1  the greeting, which now owns the primary action
 *   2  the animated-logo STATUS as an actual panel — label, logo, progress —
 *      instead of a bare thumbnail sitting next to unrelated text
 *   3  the master signature, lit by the beam
 * ═══════════════════════════════════════════════════════════════════════════ */

body.dash .col-left {
  grid-template-columns: minmax(0, 1fr) auto;
  justify-content: stretch; align-items: center;
  gap: var(--s6); padding: var(--s6);
}
body.dash #procCard {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: var(--s6); max-width: none; width: 100%;
}

/* 1 — greeting */
body.dash #procCard .proc-l { display: block; min-width: 0; }
body.dash #procCard .proc-l h2 {
  font-weight: 600; font-size: 30px; line-height: 1.05; letter-spacing: -.03em;
  color: #FFF9F3; margin: 0 0 7px;
}
body.dash #procCard .proc-sub {
  font-weight: 400; font-size: 13.5px; line-height: 1.35; letter-spacing: -.004em;
  color: #A69384; margin: 0 0 var(--s4);
}
body.dash #procCard #masterUpgrade {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #FFF9F3;
  border-radius: 999px; padding: 9px 16px; box-shadow: none; white-space: nowrap;
  font-weight: 600; font-size: 12.5px; letter-spacing: -.006em;
  transition: background .16s var(--ease), transform .1s var(--ease);
}
body.dash #procCard #masterUpgrade:hover { background: rgba(255,255,255,.12); filter: none; }
body.dash #procCard #masterUpgrade:active { transform: scale(.97); }
body.dash #procCard #masterUpgrade svg { width: 14px; height: 14px; }

/* 2 — the animated-logo status panel */
body.dash #procCard .proc-r { display: block; margin: 0; }
body.dash .logo-card {
  display: flex; flex-direction: column; gap: 10px; width: 216px;
  padding: 14px; border-radius: var(--r-lg);
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09);
}
body.dash .lc-label {
  font-weight: 600; font-size: 9.5px; line-height: 1; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-2);  /* was #A69384, a rail tone: 2.88:1 on white */
}
body.dash .logo-card .logo-thumb {
  background: #fff; border: 0; border-radius: var(--r-md);
  padding: 12px 14px; display: grid; place-items: center; min-height: 56px;
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
}
body.dash .logo-card .logo-thumb img { filter: none; max-height: 22px; width: auto; display: block; }
body.dash .logo-card .proc-bar {
  max-width: none; width: 100%; height: 3px; margin: 0;
  border-radius: 999px; background: rgba(255,255,255,.12);
}
body.dash .logo-card .proc-bar i { background: var(--o-btn-a, #FB8221); border-radius: 999px; }
body.dash .logo-card #upgradeAnim { width: 100%; justify-content: center; }

/* 3 — master signature: unchanged, still beam-lit */
body.dash .master-card { width: 320px; }

/* the hero SHOWS the master signature; it does not offer actions on it */
body.dash .master-frame .hover-veil { display: none !important; }

@media (max-width: 1120px) {
  body.dash #procCard { grid-template-columns: 1fr; gap: var(--s5); }
  body.dash .logo-card { width: 100%; max-width: 320px; }
}

/* ═══ v4: light only, logo status promoted to the header ════════════════════
 * Light is the design now, so the toggle is gone and nothing applies
 * .theme-dark (its rules stay above, unreferenced, in case it returns).
 *
 * The animated-logo panel moved out of the hero and into the header row, where
 * it fills the empty span beside the quota chip. It is the same object — label,
 * logo, progress — just laid out for a 44px-tall strip instead of a card.
 * ═══════════════════════════════════════════════════════════════════════════ */

body.dash .ws-head { gap: var(--s3); }
body.dash .ws-head-r { gap: var(--s3); }

body.dash .ws-head .logo-card {
  display: grid; width: auto; gap: 0 10px;
  grid-template-columns: auto minmax(84px, auto);
  grid-template-areas: "thumb label" "thumb bar";
  align-items: center;
  padding: 5px 14px 5px 5px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--lift-1);
}
body.dash .ws-head .lc-label {
  grid-area: label; align-self: end;
  font-weight: 600; font-size: 9px; line-height: 1; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2);  /* --ink-3 is 2.88:1 on white; a 9px label needs a text tone */
}
body.dash .ws-head .logo-thumb {
  grid-area: thumb; min-height: 0; padding: 6px 12px; border-radius: 999px;
  background: #FCFBFA; border: 1px solid var(--hairline); box-shadow: none;
  display: grid; place-items: center;
}
body.dash .ws-head .logo-thumb img { max-height: 16px; width: auto; display: block; filter: none; }
body.dash .ws-head .proc-bar {
  grid-area: bar; align-self: start; width: 100%; max-width: none;
  height: 3px; margin: 4px 0 0; border-radius: 999px; background: rgba(30, 18, 9,.10);
}
body.dash .ws-head .proc-bar i { background: var(--o-btn-a, #FB8221); border-radius: 999px; }
body.dash .ws-head #upgradeAnim { display: none; }   /* free-plan CTA lives in the hero */

/* ── hero, now two zones again: greeting and the signature it describes ──── */
body.dash .col-left {
  grid-template-columns: auto auto; justify-content: center;
  gap: 64px; padding: var(--s5) var(--s6);
}
body.dash #procCard { display: block; max-width: 360px; }
body.dash #procCard .proc-l h2 { font-size: 28px; margin-bottom: 6px; }
body.dash #procCard .proc-sub { margin-bottom: var(--s4); }
body.dash .master-card { width: 340px; }

@media (max-width: 1100px) {
  body.dash .ws-head { flex-wrap: wrap; }
  body.dash .ws-head .logo-card { order: 3; }
}

/* ── analytics: reachable again, and honest about what it is ─────────────── */
body.dash #rail .nav-tab[data-view="analytics"] { opacity: 1; cursor: pointer; }
body.dash #rail .nav-tab[data-view="analytics"]:hover { background: rgba(255,255,255,.05); color: var(--rail-ink); }
body.dash .ana-soon {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 0 var(--s6); padding: 14px 18px;
  border: 1px solid rgba(251, 130, 33,.4); border-radius: var(--r-md);
  background: rgba(251, 130, 33,.10);
}
body.dash .ana-soon-dot {
  width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto;
  background: var(--o-btn-a, #FB8221);
  box-shadow: 0 0 0 4px rgba(251, 130, 33,.22);
}
body.dash .ana-soon b { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -.008em; color: var(--ink-1); }
body.dash .ana-soon span { display: block; margin-top: 2px; font-size: 12.5px; letter-spacing: -.003em; color: var(--ink-2); }

/* ═══ v5: spread the hero, and make the master label readable ═══════════════ */

/* the two halves sat centred as a pair; push them to the edges of the band */
body.dash .col-left {
  justify-content: space-between;
  padding: var(--s5) var(--s7);
}

/* "MASTER SIGNATURE" and its kebab were 2.6:1 on the band — decorative, not
   legible. Brighter ink, and the label gets the brand glow the owner asked for
   (the same orange as the beam behind the card it titles). */
body.dash .master-card .card-head h3 {
  color: #FCD9B6; font-size: 10.5px; letter-spacing: .13em;
  text-shadow: 0 0 10px rgba(251, 130, 33,.75),
               0 0 26px rgba(251, 130, 33,.45),
               0 0 44px rgba(251, 130, 33,.22);
}
body.dash .master-card .kebab {
  color: #FBD4AE;
  text-shadow: 0 0 10px rgba(251, 130, 33,.5);
}
body.dash .master-card .kebab:hover {
  color: #FFFFFF; background: rgba(255,255,255,.12); text-shadow: 0 0 12px rgba(251, 130, 33,.8);
}
@media (prefers-reduced-motion: no-preference) {
  body.dash .master-card .card-head h3 { transition: text-shadow .3s var(--ease); }
}

/* ── the dot grid, brought over from the dark build ───────────────────────
 * Same 22px lattice, inverted for light: dark dots on the paper instead of
 * light dots on near-black. Kept faint — at this size the texture should
 * register as "not flat" without ever competing with the cards on top of it. */
body.dash main.view {
  background-image: radial-gradient(circle, rgba(30, 18, 9, .07) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: -1px -1px;
  background-attachment: local;
}
/* the hero band and the cards sit ON the texture, so they stay clean */
body.dash .col-left, body.dash .sig-card { background-clip: padding-box; }

/* the delivered/no-logo states now also live on .logo-card, which owns the
   thumb and bar since they moved into the header */
body.dash .logo-card.anim-done .proc-bar,
body.dash .logo-card.anim-done .scan { display: none !important; }
body.dash .logo-card.no-logo .proc-bar,
body.dash .logo-card.no-logo .scan { display: none !important; }
body.dash .logo-card.no-logo .logo-thumb { border: 1px dashed rgba(30, 18, 9,.25); background: transparent; }
body.dash .logo-card.anim-done .lc-label::after {
  content: ' · Live'; color: var(--orange-ink, #F4761B); letter-spacing: .04em;
}
body.dash #masterUpgrade { display: inline-flex; align-items: center; gap: 7px; }
body.dash #masterUpgrade .mu-ico { display: inline-flex; }

/* ── header logo pill: it was inheriting the 150x54 card thumb ─────────────
 * dash-brand.css sizes .logo-thumb for the hero card it used to live in. In a
 * 44px header pill that made the chip 150x54 and forced the whole pill to 66px
 * tall, with the label stranded at the top. Size it for where it actually is. */
body.dash .ws-head .logo-card {
  align-items: center; padding: 5px 14px 5px 5px; gap: 0 11px;
}
body.dash .ws-head .logo-thumb {
  width: 104px; height: 34px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--hairline); background: #FCFBFA; overflow: hidden;
}
body.dash .ws-head .logo-thumb img { max-height: 14px; max-width: 86%; width: auto; }
body.dash .ws-head .lc-label { align-self: center; }
body.dash .ws-head .proc-bar { margin-top: 5px; }
/* delivered: no bar, so the label centres on its own rather than sitting high */
body.dash .ws-head .logo-card.anim-done { grid-template-areas: "thumb label"; }

/* ── the plan badge wears the crown, same glyph as the Master pill ───────── */
body.dash .plan-badge .pb-mark {
  display: inline-grid; place-items: center;
  color: #FFFFFF;                       /* dark on the orange chip: 7.4:1 */
}
body.dash .plan-badge .pb-mark svg { display: block; }
body.dash .plan-badge.is-free .pb-mark { color: #6B615A; }

/* ── FREE plan header pill (owner, Sep 6): the logo + an "Animate logo" button straight to the paywall.
 * The two-row "thumb label / thumb bar" grid lost its bar on free (dash-brand hides .proc-bar) and the
 * 9px label was left stranded at the top of the pill. Free gets its own one-row layout. */
body.dash.plan-free .ws-head .logo-card { grid-template-areas: "thumb cta"; grid-template-columns: auto auto; padding: 5px; gap: 0 8px; }
body.dash.plan-free .ws-head .lc-label { display: none; }
body.dash.plan-free .ws-head #upgradeAnim {
  display: inline-flex; grid-area: cta; align-items: center; justify-content: center; gap: 6px; width: auto; margin: 0;
  padding: 9px 14px; border: 0; border-radius: 999px;
  background: linear-gradient(90deg, #FB8221, #FA962B); color: #fff;
  font-size: 12.5px; font-weight: 600; line-height: 1; letter-spacing: -.006em; white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(251, 130, 33, .4), 0 4px 14px rgba(251, 130, 33, .28);
  transition: transform .1s var(--ease), filter .18s var(--ease);
}
body.dash.plan-free .ws-head #upgradeAnim:hover { filter: brightness(1.05); }
body.dash.plan-free .ws-head #upgradeAnim:active { transform: scale(.975); }
body.dash.plan-free .ws-head #upgradeAnim svg { width: 13px; height: 13px; }

/* ═══ MOBILE + TABLET PASS (owner, Sep 6) ═══════════════════════════════════
 * ≤ 940px the rail is already a top bar (row rule above). Below 700px that bar
 * is rebuilt as two rows — wordmark · account · create / three nav tabs — the
 * header pills wrap into two tidy rows, and the hero band stacks the greeting
 * over a full-width master signature (the v4/v5 two-column rules used to win
 * over the 940 block and clipped the card at the band's edge). This block sits
 * LAST in the file so it wins at equal specificity; :is(body.dash, body.acct)
 * matches the dashboard and the account pages, which share the rail. */
@media (max-width: 700px) {
  :is(body.dash, body.acct) #rail {
    display: grid; grid-template-columns: 1fr auto auto; align-items: center;
    column-gap: 8px; row-gap: 8px; padding: 10px 14px 8px;
  }
  :is(body.dash, body.acct) #rail .rail-top { display: contents; }
  :is(body.dash, body.acct) #rail .brand-logo { grid-row: 1; grid-column: 1; }
  :is(body.dash, body.acct) #rail .brand-logo img { height: 22px; }
  :is(body.dash, body.acct) #rail .rail-foot { grid-row: 1; grid-column: 2; display: block; margin: 0; padding: 0; border: 0; }
  :is(body.dash, body.acct) #rail .rail-create {
    grid-row: 1; grid-column: 3; width: 40px; height: 40px; margin: 0; padding: 0;
    border-radius: 12px; font-size: 0; gap: 0;         /* the label is a bare text node: font-size 0 hides it, gap 0 stops it shoving the icon off-centre */
  }
  :is(body.dash, body.acct) #rail .rail-create svg { width: 18px; height: 18px; }
  :is(body.dash, body.acct) #rail #mainNav {
    grid-row: 2; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 4px; margin: 0; padding-top: 8px; border-top: 1px solid var(--rail-line);
  }
  :is(body.dash, body.acct) #rail .nav-tab {
    flex-direction: column; justify-content: center; gap: 5px; width: auto; min-height: 46px;
    padding: 6px 4px; font-size: 11px; text-align: center;
  }
  :is(body.dash, body.acct) #rail .nav-tab span { display: inline; }
  :is(body.dash, body.acct) #rail .nav-tab svg { width: 18px; height: 18px; }
  :is(body.dash, body.acct) #rail .soon-badge { display: none; }
  :is(body.dash, body.acct) #rail .ws-chip { min-height: 40px; padding: 3px; }
  :is(body.dash, body.acct) #rail .ws-chip > svg { display: none; }
  :is(body.dash, body.acct) #rail #wsMenu { min-width: 220px; }

  /* header pills: badge + quota on the first row, the logo strip full-width under them */
  body.dash main.view { padding: 16px 14px 40px; }
  body.dash .ws-head { flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
  body.dash .ws-head-r { display: contents; }
  body.dash .ws-head .plan-badge { order: 1; }
  body.dash .ws-head .quota-chip { order: 2; margin-left: auto; }
  body.dash .ws-head .logo-card { order: 3; flex: 1 1 100%; width: 100%; grid-template-columns: auto 1fr; padding: 5px 14px 5px 5px; }
  body.dash.plan-free .ws-head .logo-card { grid-template-columns: auto 1fr; }
  body.dash.plan-free .ws-head #upgradeAnim { width: 100%; }

  /* hero: greeting on top, the master signature full width under it */
  body.dash .col-left { grid-template-columns: 1fr; justify-content: stretch; gap: 16px; padding: 18px 16px 16px; }
  body.dash #procCard { max-width: none; }
  body.dash #procCard .proc-l h2 { font-size: 24px; }
  body.dash #procCard .proc-sub { font-size: 13px; }
  body.dash .master-card { width: 100%; }
  body.dash .sig-grid { grid-template-columns: 1fr; }
}
/* tablet portrait (701–940): the row bar keeps the labelled Create button; the hero's
   two halves just need room, so the master card stops insisting on 340px */
@media (min-width: 701px) and (max-width: 940px) {
  /* top bar: wordmark and Create side by side, nav tabs sized to their icons (they were stretched) */
  :is(body.dash, body.acct) #rail { padding: 10px 18px; gap: 14px; }
  :is(body.dash, body.acct) #rail .rail-top { display: flex; align-items: center; gap: 14px; padding: 0; }
  :is(body.dash, body.acct) #rail .rail-create { width: auto; margin: 0; padding: 9px 14px; }
  :is(body.dash, body.acct) #rail #mainNav { justify-content: center; gap: 6px; margin: 0; }
  :is(body.dash, body.acct) #rail .nav-tab { width: auto; flex: 0 0 auto; padding: 11px 16px; }
  :is(body.dash, body.acct) #rail .rail-foot { margin-left: auto; }
  body.dash .col-left { gap: 24px; padding: var(--s5) var(--s5); }
  body.dash .master-card { width: min(340px, 46vw); }
  body.dash #procCard { max-width: 300px; }
}

/* free-plan greeting (owner, Sep 7): dash-brand.css colours the "Free Plan" word with the page ink,
   which is near-black on this dark band — invisible. White, bold, like the name above it. */
body.dash.plan-free #procCard .proc-sub b { color: #FFFFFF; font-weight: 600; }

/* ═══ DEPARTMENTS (owner, Sep 9) — the store's folders with a dashboard surface ═════════════
 * Left: the department list (or the empty-state with suggestion chips). Right: the selected
 * department — one-click layout strip, then its signatures as the same cards the library uses. */
body.dash .dep-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: var(--s5); }
body.dash .dep-title { font-size: 28px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 4px; color: var(--ink-1); }
body.dash .dep-sub { color: var(--ink-2); font-size: 14px; line-height: 1.5; margin: 0; max-width: 620px; }
body.dash .dep-top-r { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
body.dash .dep-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--s5); align-items: start; }
body.dash .dep-list { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 8px; box-shadow: var(--lift-1); }
body.dash .dep-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-1); font: inherit; font-size: 14px; cursor: pointer; text-align: left; transition: background .15s; }
body.dash .dep-item:hover { background: #FFF6EE; }
body.dash .dep-item.on { background: #FFF1E4; font-weight: 600; box-shadow: inset 0 0 0 1px #FCD9B6; }
body.dash .dep-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 3px rgba(251, 130, 33, .14); }
body.dash .dep-item-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.dash .dep-item-n { font-size: 12px; color: var(--ink-2); background: #F7F5F2; border: 1px solid var(--hairline); border-radius: 999px; padding: 2px 8px; }
body.dash .dep-unassigned { padding: 10px 12px 6px; font-size: 12px; color: var(--ink-3); }
body.dash .dep-list.is-empty { grid-column: 1 / -1; background: transparent; border: 0; box-shadow: none; padding: 0; }
body.dash .dep-empty { background: var(--surface); border: 1px dashed #FCD9B6; border-radius: var(--r-lg); padding: 44px 24px; text-align: center; }
body.dash .dep-empty h3 { margin: 0 0 6px; font-size: 20px; font-weight: 600; }
body.dash .dep-empty p { margin: 0 auto 18px; color: var(--ink-2); font-size: 14px; max-width: 460px; line-height: 1.5; }
body.dash .dep-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
body.dash .dep-chip { padding: 8px 14px; border-radius: 999px; border: 1px solid #FCD9B6; background: #FFF6EE; color: var(--orange-ink, #F4761B); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s, transform .1s; }
body.dash .dep-chip:hover { background: #FFE9D4; } body.dash .dep-chip:active { transform: scale(.97); }
body.dash .dep-detail { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--lift-1); }
body.dash .dep-detail-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: var(--s4); }
body.dash .dep-detail-head h2 { margin: 0; font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
body.dash .dep-detail-head h2 .dep-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; }
body.dash .dep-detail-head h2 input { font: inherit; font-weight: 600; border: 1px solid #FCD9B6; border-radius: 8px; padding: 2px 8px; min-width: 200px; outline: 2px solid rgba(251, 130, 33, .25); }
body.dash .dep-count { font-size: 12.5px; font-weight: 500; color: var(--ink-2); background: #F7F5F2; border: 1px solid var(--hairline); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
body.dash .dep-actions { display: flex; align-items: center; gap: 8px; position: relative; }
body.dash .dep-actions .dropdown { position: relative; }
body.dash .dep-strip { border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 12px 14px 14px; margin-bottom: var(--s5); background: #FCFBFA; }
body.dash .dep-strip-l { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 10px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
body.dash .dep-strip-l small { font-weight: 500; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
body.dash .dep-lay { display: flex; flex-wrap: wrap; gap: 6px; }
body.dash .dep-lay button { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: all .15s; }
body.dash .dep-lay button:hover:not(:disabled) { border-color: #FCD9B6; color: var(--ink-1); background: #FFF6EE; }
body.dash .dep-lay button:disabled { opacity: .45; cursor: default; }
body.dash .dep-lay button.on { background: linear-gradient(90deg, #FB8221, #FA962B); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(251, 130, 33, .3); }
body.dash .dep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s4); }
body.dash .dep-grid .sig-card { margin: 0; }
body.dash .dep-card-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 var(--s4) var(--s4); }
body.dash .dep-card-f .use-mini { margin: 0; flex: 1 1 auto; }
body.dash .dep-lay-tag { font-size: 11.5px; font-weight: 600; color: var(--ink-2); background: #F7F5F2; border: 1px solid var(--hairline); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
body.dash .dep-none { padding: 28px; text-align: center; color: var(--ink-2); border: 1px dashed var(--hairline); border-radius: var(--r-md); font-size: 14px; line-height: 1.5; }
body.dash .dep-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--orange-ink, #F4761B); background: #FFF1E4; border: 1px solid #FCD9B6; border-radius: 999px; padding: 2px 8px; margin-left: 8px; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
body.dash .dep-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c, #FB8221); flex: 0 0 auto; }
/* dialogs (new department, add signatures) */
body.dash .dep-modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(26, 17, 10, .55); backdrop-filter: blur(4px); }
body.dash .dep-modal.hidden { display: none; }
body.dash .dep-box { width: min(100%, 520px); max-height: 86vh; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-xl); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); overflow: hidden; }
body.dash .dep-box-h { padding: 18px 20px 12px; border-bottom: 1px solid var(--hairline); }
body.dash .dep-box-h h3 { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
body.dash .dep-box-h p { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
body.dash .dep-box-b { padding: 10px 12px; overflow: auto; flex: 1 1 auto; }
body.dash .dep-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: var(--r-sm); cursor: pointer; }
body.dash .dep-row:hover { background: #FFF6EE; }
body.dash .dep-row input { width: 18px; height: 18px; accent-color: #FB8221; flex: 0 0 auto; }
body.dash .dep-row b { font-weight: 600; font-size: 14px; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.dash .dep-row small { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
body.dash .dep-box-f { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 20px 16px; border-top: 1px solid var(--hairline); flex-wrap: wrap; }
body.dash .dep-box-f .note { font-size: 12px; color: var(--ink-3); flex: 1 1 100%; line-height: 1.45; }
body.dash .btn-ghost { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--surface); color: var(--ink-1); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
body.dash .dep-name-input { width: 100%; padding: 11px 12px; border: 1px solid var(--hairline); border-radius: var(--r-sm); font: inherit; font-size: 15px; }
body.dash .dep-name-input:focus { outline: 2px solid rgba(251, 130, 33, .3); border-color: #FCD9B6; }
body.dash .toast button { margin-left: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: #FFB56B; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
@media (max-width: 940px) { body.dash .dep-layout { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  body.dash .dep-top { flex-direction: column; align-items: flex-start; }
  body.dash .dep-detail { padding: 14px; }
  body.dash .dep-grid { grid-template-columns: 1fr; }
  body.dash .dep-detail-head h2 { flex-basis: 100%; }
  :is(body.dash, body.acct) #rail #mainNav { grid-template-columns: repeat(4, 1fr); }   /* four tabs now */
}