/* ════════════════════════════════════════════════════════════════════════
   CAPACOTY WORKSPACE — v5.2 design system (matches marketing site)
   ─────────────────────────────────────────────────────────────────────
   Inter throughout · cool blue-grey base · brand-blue + lime CTA accents
   Workspace-legacy token names (--tx, --bg2, --dk, --g) are preserved as
   aliases pointing to v5.2 canonical tokens — see :root below.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  /* ════════════════════════════════════════════════════════════════════
     v5.2 — canonical tokens (matches marketing site)
     ──────────────────────────────────────────────────────────────────── */

  /* Brand */
  --blue:        #2a50f3;
  --blue-light:  #dde4ff;

  /* Accents */
  --lime:    #cdf075;
  --lime2:   #c8e56f;
  --purple:  #b8a0f5;
  --pink:    #eda8f7;
  --lblue:   #70cbff;
  --teal:    #70d0af;

  /* CTA */
  --dgreen:  #00a960;

  /* Surfaces */
  --bg:              #f8f7f6;        /* warm off-white — workspace v5.4 */
  --bg-2:            #ebecef;        /* deeper neutral grey */
  --bg-3:            #ffffff;        /* white cards */
  --surface-dark:    #0e1530;        /* near-black with blue undertone */
  --surface-dark-2:  #1a2247;

  /* Text on light */
  --text:            #0e1530;
  --text-secondary:  rgba(14,21,48,.62);
  --text-muted:      rgba(14,21,48,.42);
  --text-faint:      rgba(14,21,48,.22);
  --text-hair:       rgba(14,21,48,.10);

  /* Text on dark */
  --on-dark:           #ffffff;
  --on-dark-secondary: rgba(255,255,255,.7);
  --on-dark-muted:     rgba(255,255,255,.45);
  --on-dark-hair:      rgba(255,255,255,.14);

  /* Radii */
  --r-xs:   8px;
  --r-sm:   12px;
  --r-md:   18px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 999px;

  --nav-h: 72px;

  /* Sidebar */
  --sb-w:            60px;   /* matches the shared partial's collapsed width */
  --sb-w-expanded:   240px;  /* matches the shared partial's expanded width */
  --sb-bg:   #1a1a18;
  --sb-bd:   rgba(245,244,240,.08);
  --sb-tx:   #f5f4f0;
  --sb-tx60: rgba(245,244,240,.58);
  --sb-tx35: rgba(245,244,240,.32);
  --plan-green: #327e58;

  /* Typography — native system stack (Inter dropped 2026-05-22) */
  --display: -apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Helvetica,Arial,sans-serif;
  --body:    -apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Helvetica,Arial,sans-serif;

  /* ════════════════════════════════════════════════════════════════════
     Workspace-legacy aliases — repointed to v5.2 so existing rules
     using --tx / --bg2 / --dk / --g / etc. keep working unchanged.
     ──────────────────────────────────────────────────────────────────── */

  /* Surface aliases */
  --bg2:  var(--bg-2);
  --card: var(--bg-3);

  /* Dark surface aliases */
  --dk:   var(--surface-dark);
  --dk2:  var(--surface-dark-2);
  --dk3:  #050816;

  /* Text aliases */
  --tx:   var(--text);
  --tx60: var(--text-secondary);
  --tx35: var(--text-muted);
  --tx18: var(--text-faint);
  --dtx:   var(--on-dark);
  --dtx60: var(--on-dark-secondary);
  --dtx35: var(--on-dark-muted);
  --dtx18: var(--on-dark-hair);

  /* Border aliases */
  --bd:   var(--text-hair);
  --bd2:  var(--text-faint);
  --dbd:  var(--on-dark-hair);
  --dbd2: rgba(255,255,255,.20);

  /* Brand-blue extended aliases (legacy --blue-* / --g* references) */
  --blue-mid:   #4a6fff;
  --blue-deep:  #1a3edf;
  --teal-deep:  #4ab896;
  --blue-dim:   rgba(42,80,243,.10);
  --blue-bd:    rgba(42,80,243,.25);
  --blue-soft:  var(--blue-light);

  --grad-brand: linear-gradient(135deg, var(--blue) 0%, var(--teal) 100%);

  --g:        var(--blue);
  --g-mid:    var(--blue-mid);
  --g-dark:   var(--blue-deep);
  --g-bright: var(--teal);
  --g-dim:    var(--blue-dim);
  --g-bd:     var(--blue-bd);
  --g-light:  var(--blue-light);

  /* Pastel accents (kept; some repointed) */
  --lilac:       var(--blue-light);
  --lilac-deep:  #c9c1ff;
  --soft-yellow: #fcffa8;
  --soft-green:  var(--blue-light);
  --soft-blue:   #dae8fd;
  --soft-pink:   #ffbdf5;
  --soft-cream:  #faf0d2;
  --soft-mint:   #d9f0e3;
  --soft-peach:  #ffe4d1;
  --soft-orange: #ffd6c2;

  /* Modal / feedback / toast legacy */
  --brand:       var(--g);
  --brand-light: var(--g-dim);
  --brand-mid:   var(--g-mid);
  --brand-dark:  var(--g-dark);
  --accent:      #c8541a;
  --surface:     var(--card);
  --surface-2:   var(--bg);
  --surface-3:   var(--bg-2);
  --border:        var(--bd);
  --border-strong: var(--bd2);
  --text-2: var(--text-secondary);
  --text-3: var(--text-muted);
  --radius:    12px;
  --radius-lg: 18px;
  --shadow:    0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
  --shadow-lg: 0 16px 40px -16px rgba(14,21,48,.22);

  --tan:           var(--soft-cream);
  --tan-bd:        var(--bd);
  --tan-bd-strong: var(--bd2);

  --acc-red:     #b55a3a;
  --acc-red-dim: rgba(181,90,58,.12);
  --acc-red-bd:  rgba(181,90,58,.30);
  --acc-red-dk:  #8b3f24;
  --acc-blue:    #4a7eb5;
  --acc-blue-dim: rgba(74,126,181,.12);
  --acc-blue-bd:  rgba(74,126,181,.30);
  --acc-blue-dk:  #2f5584;

  /* Font legacy aliases */
  --font:         var(--body);
  --font-display: var(--display);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--tx);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button, a { font-family: inherit; }
img { max-width: 100%; display: block; }

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY UTILITIES
   ════════════════════════════════════════════════════════════════════════ */
.h-display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.02;
}

/* ════════════════════════════════════════════════════════════════════════
   HEADER — white bar (v3.15 style, less rounded)
   ════════════════════════════════════════════════════════════════════════ */
.app-header {
  position: fixed; top: 0; left: 0; right: 0;
  width: 100%; z-index: 100;
  background: var(--surface-dark);
  color: var(--on-dark);
  border: none;
  border-radius: 0;
  padding: 0 clamp(20px, 3vw, 32px);
  box-shadow: 0 1px 3px rgba(14,21,48,.08);
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h); gap: 12px;
}
.logo { display: flex; align-items: center; gap: 0; line-height: 0; }
.logo img { max-width: 150px; height: auto; width: auto; display: block; }
.header-badge {
  font-family: var(--font);
  font-size: 11px; color: var(--on-dark-muted); font-weight: 400;
  letter-spacing: .02em; margin-left: 10px;
}

.header-tools { display: flex; align-items: center; gap: 2px; }
.header-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 13px;
  background: transparent; border: none;
  border-radius: var(--r-pill);
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--on-dark-secondary);
  cursor: pointer;
  transition: color .18s, background .15s;
}
.header-btn:hover { color: var(--on-dark); background: rgba(255,255,255,.08); }

/* ════════════════════════════════════════════════════════════════════════
   BUTTONS (generic .btn — used by feedback modal and others)
   ════════════════════════════════════════════════════════════════════════ */
.btn {
  font-family: var(--font);
  font-size: 14px; font-weight: 500;
  padding: 12px 24px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, transform .15s;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; white-space: nowrap; text-decoration: none;
}
.btn-primary { background: var(--lime); color: var(--text); }
.btn-primary:hover { background: var(--text); color: #fff; transform: translateY(-1px); }
.btn-ghost { background: transparent; border: 1px solid var(--bd2); color: var(--tx60); }
.btn-ghost:hover { border-color: var(--tx); color: var(--tx); background: var(--bg2); }

/* ── Subscription badge pill (JS-driven) ── */
.sub-badge {
  font-size: 10px; padding: 3px 9px;
  border-radius: var(--r-pill);
  font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase;
  display: inline-flex; align-items: center;
}
.sub-badge.trialing  { background: var(--soft-yellow); color: #6b5700; }
.sub-badge.active    { background: var(--soft-green);  color: var(--g-dark); }
.sub-badge.past_due  { background: rgba(224,108,94,.18); color: #8e3324; }
.sub-badge.cancelled { background: rgba(26,26,24,.07);  color: var(--tx60); }

/* ════════════════════════════════════════════════════════════════════════
   USER MENU — pill button + dark hero dropdown
   ════════════════════════════════════════════════════════════════════════ */
.user-menu-wrap { position: relative; }
.user-menu-btn {
  display: flex; align-items: center; gap: 8px;
  height: 38px; padding: 3px 13px 3px 4px;
  background: var(--text);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-pill);
  color: #fff;
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, transform .15s;
  margin-left: 4px;
}
.user-menu-btn:hover {
  background: linear-gradient(110deg, var(--blue) 0%, var(--pink) 100%);
  color: #fff;
  border-color: transparent;
  transform: translateY(-1px);
}
.user-menu-chevron {
  font-size: 10px; opacity: .7; flex-shrink: 0;
  transition: transform .2s; margin-left: 2px;
}
.user-menu-wrap.open .user-menu-chevron { transform: rotate(180deg); }
.user-menu-name {
  font-size: 13px; font-weight: 500; color: var(--dtx);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 140px;
}

.user-dropdown {
  display: none; position: absolute; top: calc(100% + 12px); right: 0;
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -20px rgba(26,26,24,.22), 0 8px 18px -10px rgba(26,26,24,.08);
  border: 1px solid var(--bd);
  width: 340px; z-index: 200; overflow: hidden;
}
.user-menu-wrap.open .user-dropdown { display: block; }

/* Dark hero inside dropdown */
.ud-hero {
  background: var(--dk); color: var(--dtx);
  padding: 22px 22px 18px;
  background-image: radial-gradient(circle at 85% 20%, rgba(47,130,255,.10) 0%, transparent 60%);
}
.ud-hero-row { display: flex; align-items: flex-start; gap: 14px; }
.ud-hero-info { flex: 1; min-width: 0; }
.ud-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 17px; font-weight: 600; flex-shrink: 0;
  background: var(--soft-green); color: var(--g-dark);
  margin-bottom: 10px; letter-spacing: -.01em;
}
.ud-name {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 500; color: var(--dtx);
  letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ud-email { font-size: 12px; color: var(--dtx60); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.ud-ahpra { font-size: 11px; color: var(--dtx35); margin-top: 2px; }

.ud-ring { flex-shrink: 0; width: 72px; height: 72px; position: relative; margin-top: -2px; }
.ud-ring svg { transform: rotate(-90deg); display: block; }
.ud-ring .ring-bg { fill: none; stroke: rgba(244,240,231,.14); stroke-width: 6; }
.ud-ring .ring-fg { fill: none; stroke: url(#udRingGrad); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .5s ease; }
.ud-ring .ring-fg.warn   { stroke: #fbbf24; }
.ud-ring .ring-fg.danger { stroke: #ff8a6b; }
.ud-ring-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1;
}
.ud-ring-num {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 500; color: var(--dtx);
  letter-spacing: -.02em;
}
.ud-ring-cap {
  font-size: 9px; color: var(--dtx60); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; margin-top: 2px;
}

.ud-meta-row {
  display: flex; gap: 8px; margin-top: 16px; align-items: center; flex-wrap: wrap;
}
.ud-pill {
  font-size: 10px; padding: 3px 10px;
  border-radius: var(--r-pill);
  font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(47,130,255,.18); color: #7ab8f5;
}
.ud-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.ud-pill.trialing  { background: rgba(252,255,168,.18); color: #f5eeaa; }
.ud-pill.past_due  { background: rgba(254,226,226,.22); color: #fca5a5; }
.ud-pill.cancelled { background: rgba(244,240,231,.10); color: var(--dtx60); }
.ud-renews { font-size: 11px; color: var(--dtx60); }

/* Action tile grid */
.ud-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 12px;
  border-bottom: 1px solid var(--bd);
  background: var(--card);
}
.ud-action {
  padding: 12px 14px; border-radius: var(--r-md); background: var(--bg);
  display: flex; flex-direction: column; gap: 4px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .15s;
  font-family: inherit; text-align: left; width: 100%;
}
.ud-action:hover { background: var(--card); border-color: var(--bd); transform: translateY(-1px); }
.ud-action:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.ud-action:disabled:hover { background: var(--bg); border-color: transparent; transform: none; }
.ud-action svg { color: var(--g); flex-shrink: 0; }
.ud-action-t { font-size: 12.5px; font-weight: 600; color: var(--tx); letter-spacing: -.005em; }
.ud-action-d { font-size: 11px; color: var(--tx60); line-height: 1.35; }
/* Low-reports warn state — amber ring threshold (≤20%) */
.ud-action.warn { background: var(--soft-yellow); border-color: rgba(251,191,36,.4); }
.ud-action.warn:hover { background: #f8fb95; border-color: #f59e0b; }
.ud-action.warn svg { color: #92400e; }
.ud-action.warn .ud-action-t { color: #6b4a00; }
.ud-action.warn .ud-action-d { color: #8b6200; }

/* Logout row */
.ud-logout {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px;
  font-family: inherit;
  font-size: 13px; color: #a42a2a;
  cursor: pointer; transition: background .12s;
  border: none; background: none; width: 100%; text-align: left;
  font-weight: 500;
}
.ud-logout:hover { background: #fef2f2; }
.ud-logout svg { flex-shrink: 0; color: #a42a2a; }

/* ════════════════════════════════════════════════════════════════════════
   SIDEBAR
   ════════════════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────────────────
   Collapsing sidebar v6 (2026-05-12)
   Narrow by default (64px) — hover expands to 280px with a slide. The
   main-app `margin-left` stays at the collapsed width so layout never
   shifts; the expanded sidebar overlays the workspace with a shadow.
   :has(.user-menu-wrap.open) keeps the sidebar expanded while the
   user-dropdown is open.
   ───────────────────────────────────────────────────────────────────── */
.sb {
  position: fixed; top: 0; left: 0;
  width: var(--sb-w); height: 100vh;
  background: var(--sb-bg); border-right: 1px solid var(--sb-bd);
  display: flex; flex-direction: column; z-index: 100;
  font-family: var(--font); color: var(--sb-tx);
  overflow: hidden;
  transition: width .28s cubic-bezier(.4, 0, .2, 1), box-shadow .28s;
}
.sb:hover,
.sb:focus-within,
.sb:has(.user-menu-wrap.open) {
  width: var(--sb-w-expanded);
  box-shadow: 8px 0 32px -8px rgba(0,0,0,.28);
}
/* When the user-menu popup is open, raise the entire sidebar above the
   blurred backdrop (z-index 499) so the popup — which lives inside the
   sidebar's stacking context — paints unblurred over the scrim. */
.sb:has(.user-menu-wrap.open) { z-index: 501; }

/* Header — small white icon, optional version badge that fades in on expand */
.sb-logo {
  padding: 14px; border-bottom: 1px solid var(--sb-bd);
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  height: 56px; box-sizing: border-box;
}
.sb-logo a { display: flex; align-items: center; justify-content: center; line-height: 0; flex-shrink: 0; width: 36px; height: 36px; }
.sb-logo img { width: 28px; height: 28px; object-fit: contain; opacity: .92; }
.sb-logo .sb-badge {
  font-size: 10px; color: rgba(245,244,240,.35); font-weight: 600; letter-spacing: .05em;
  background: rgba(245,244,240,.08); padding: 2px 8px; border-radius: 20px; flex-shrink: 0;
  opacity: 0; transition: opacity .18s; white-space: nowrap;
}
.sb:hover .sb-badge,
.sb:focus-within .sb-badge,
.sb:has(.user-menu-wrap.open) .sb-badge { opacity: 1; transition-delay: .08s; }

.sb-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 0 8px; }
.sb-scroll::-webkit-scrollbar { width: 3px; }
.sb-scroll::-webkit-scrollbar-thumb { background: rgba(245,244,240,.12); border-radius: 3px; }

/* Section labels — collapsed: zero-height divider; expanded: visible text */
.sb-section-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .13em;
  color: rgba(245,244,240,.22);
  white-space: nowrap; overflow: hidden;
  max-height: 0; padding: 0 18px;
  opacity: 0;
  transition: max-height .25s cubic-bezier(.4,0,.2,1), padding .25s, opacity .18s;
}
.sb:hover .sb-section-label,
.sb:focus-within .sb-section-label,
.sb:has(.user-menu-wrap.open) .sb-section-label {
  max-height: 36px; padding: 14px 18px 6px; opacity: 1;
  transition-delay: .04s;
}
.sb:hover .sb-section-label:first-child,
.sb:focus-within .sb-section-label:first-child,
.sb:has(.user-menu-wrap.open) .sb-section-label:first-child { padding-top: 4px; }

/* Nav items — icon always shown; label/arrow/meta fade in on expand */
.sb-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 8px; margin: 1px 6px;
  border-radius: var(--r-sm); position: relative;
  color: rgba(245,244,240,.70); font-size: 11.5px; font-weight: 500;
  transition: background .15s, color .15s, padding .25s; cursor: pointer;
  background: none; border: none; width: calc(100% - 12px); text-align: left;
  font-family: inherit;
  white-space: nowrap; overflow: hidden;
  justify-content: flex-start;
}
.sb:hover .sb-item,
.sb:focus-within .sb-item,
.sb:has(.user-menu-wrap.open) .sb-item { padding: 9px 12px; }
.sb-item:hover { background: rgba(245,244,240,.05); color: #f5f4f0; }
.sb-item .sb-ic {
  width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px; border: 1px solid rgba(245,244,240,.12);
  background: rgba(245,244,240,.04); color: rgba(245,244,240,.55);
  transition: color .15s, border-color .15s, background .15s;
}
.sb-item:hover .sb-ic { color: rgba(245,244,240,.95); border-color: rgba(245,244,240,.24); background: rgba(245,244,240,.08); }
.sb-item .sb-ic svg { width: 18px; height: 18px; }
.sb-item .sb-lbl,
.sb-item .sb-arr,
.sb-item .sb-meta {
  opacity: 0; transition: opacity .18s;
}
.sb-item .sb-lbl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-item .sb-arr { color: rgba(245,244,240,.5); transition: opacity .18s, transform .15s; flex-shrink: 0; }
.sb:hover .sb-item:hover .sb-arr,
.sb:focus-within .sb-item:hover .sb-arr,
.sb:has(.user-menu-wrap.open) .sb-item:hover .sb-arr { transform: translateX(2px); }
.sb:hover .sb-item .sb-lbl,
.sb:hover .sb-item .sb-arr,
.sb:hover .sb-item .sb-meta,
.sb:focus-within .sb-item .sb-lbl,
.sb:focus-within .sb-item .sb-arr,
.sb:focus-within .sb-item .sb-meta,
.sb:has(.user-menu-wrap.open) .sb-item .sb-lbl,
.sb:has(.user-menu-wrap.open) .sb-item .sb-arr,
.sb:has(.user-menu-wrap.open) .sb-item .sb-meta { opacity: 1; transition-delay: .08s; }
.sb:hover .sb-item:hover .sb-arr,
.sb:focus-within .sb-item:hover .sb-arr,
.sb:has(.user-menu-wrap.open) .sb-item:hover .sb-arr { opacity: 1; }

.sb-item.disabled { cursor: not-allowed; color: rgba(245,244,240,.22); }
.sb-item.disabled:hover { background: transparent; color: rgba(245,244,240,.22); }
.sb-item.disabled .sb-ic,
.sb-item.disabled:hover .sb-ic { color: rgba(245,244,240,.14); border-color: rgba(245,244,240,.05); background: transparent; }
.sb-item.disabled .sb-arr { display: none; }
.sb-item.disabled .sb-meta {
  margin-left: auto; font-size: 9.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: rgba(245,244,240,.18); flex-shrink: 0;
}

/* Footer — actions row hidden when collapsed; reveals on expand */
.sb-foot { flex-shrink: 0; border-top: 1px solid var(--sb-bd); padding: 8px 10px 10px; position: relative; }
.sb-actions {
  display: flex; gap: 6px; margin-bottom: 6px;
  max-height: 0; overflow: hidden;
  opacity: 0; transition: max-height .25s cubic-bezier(.4, 0, .2, 1), opacity .18s, margin-bottom .25s;
}
.sb:hover .sb-actions,
.sb:focus-within .sb-actions,
.sb:has(.user-menu-wrap.open) .sb-actions {
  max-height: 60px; opacity: 1; margin-bottom: 6px;
  transition-delay: .04s;
}
.sb-action-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 7px 10px; border-radius: 7px;
  background: transparent; border: 1px solid rgba(245,244,240,.14);
  color: var(--sb-tx60); font-size: 11.5px; font-weight: 500;
  font-family: inherit; transition: all .15s; cursor: pointer;
  white-space: nowrap;
}
.sb-action-btn:hover { background: rgba(245,244,240,.07); border-color: rgba(245,244,240,.25); color: rgba(245,244,240,.8); }
.sb-action-btn svg { width: 13px; height: 13px; flex-shrink: 0; }

/* User menu — collapsed: just the lime circle. Expanded: full pill row.
   Marketing-site style: #d4f564 background with #0a0a0a initials. */
.sb-foot .user-menu-wrap { position: static; }
.sb-foot { padding: 8px 6px 10px; transition: padding .25s; }
.sb:hover .sb-foot,
.sb:focus-within .sb-foot,
.sb:has(.user-menu-wrap.open) .sb-foot { padding: 8px 10px 10px; }
.sb-foot .user-menu-btn {
  display: flex; align-items: center; gap: 9px;
  width: auto; padding: 0;
  border-radius: 999px; margin-top: 4px;
  background: transparent; border: 1px solid transparent;
  color: var(--sb-tx); font-family: inherit; font-size: 12.5px; font-weight: 600;
  transition: background .15s, border-color .15s, border-radius .25s, padding .25s, width .25s;
  cursor: pointer; justify-content: flex-start;
}
.sb-foot .user-menu-btn:hover {
  background: rgba(245,244,240,.08); border-color: rgba(245,244,240,.14);
  transform: none; background-image: none;
}
.sb:hover .sb-foot .user-menu-btn,
.sb:focus-within .sb-foot .user-menu-btn,
.sb:has(.user-menu-wrap.open) .sb-foot .user-menu-btn {
  width: 100%; border-radius: 12px; padding: 10px 12px 10px 8px;
  background: rgba(245,244,240,.05); border-color: rgba(245,244,240,.10);
  min-height: 56px;
}
.sb-foot .user-menu-name {
  flex: 1; text-align: left; font-size: 12.5px;
  color: rgba(245,244,240,.85);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  opacity: 0; transition: opacity .18s;
}
.sb-foot .user-menu-chevron {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex-shrink: 0;
  color: rgba(245,244,240,.55);
  opacity: 0; transition: opacity .18s, color .15s, transform .15s;
}
.sb-foot .user-menu-chevron svg { width: 14px; height: 14px; }
.sb-foot .user-menu-btn:hover .user-menu-chevron { color: rgba(245,244,240,.95); transform: translate(1px, -1px); }
.sb:hover .sb-foot .user-menu-name,
.sb:focus-within .sb-foot .user-menu-name,
.sb:has(.user-menu-wrap.open) .sb-foot .user-menu-name { opacity: 1; transition-delay: .08s; }
.sb:hover .sb-foot .user-menu-chevron,
.sb:focus-within .sb-foot .user-menu-chevron,
.sb:has(.user-menu-wrap.open) .sb-foot .user-menu-chevron { opacity: .4; transition-delay: .08s; }

/* Lime avatar — matches marketing #nav-user-btn (sized for 2-char initials) */
#user-avatar {
  width: 36px; height: 36px;
  border-radius: 50% !important;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700;
  flex-shrink: 0;
  background: #d4f564 !important; color: #0a0a0a !important;
  letter-spacing: -.02em; line-height: 1;
}

/* User dropdown — now a centered modal popup with blurred app backdrop.
   The legacy absolute-positioned anchor is replaced with viewport-fixed
   centering. The backdrop is a sibling element toggled via body class. */
.user-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(14,21,48,.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none;
  z-index: 499;
  transition: opacity .22s ease;
}
body.user-modal-open .user-modal-backdrop {
  opacity: 1; pointer-events: auto;
}
.sb-foot .user-dropdown {
  display: none; position: fixed;
  top: 50%; left: 50%; right: auto; bottom: auto;
  transform: translate(-50%, -50%);
  width: 380px; max-width: calc(100vw - 32px);
  max-height: min(85vh, 720px);
  z-index: 500;
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 80px -20px rgba(14,21,48,.40), 0 12px 32px -12px rgba(14,21,48,.18);
  border: 1px solid var(--bd);
  overflow: hidden;
}
.sb-foot .user-menu-wrap.open .user-dropdown {
  display: block;
  animation: userModalIn .22s cubic-bezier(.34, 1.2, .64, 1) both;
}
@keyframes userModalIn {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.97); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ════════════════════════════════════════════════════════════════════════
   MAIN APP — picker wrap + trial banner
   ════════════════════════════════════════════════════════════════════════ */
#main-app {
  display: none; min-height: 100vh; flex-direction: column;
  margin-left: var(--sb-w);
  transition: margin-left .28s cubic-bezier(.4, 0, .2, 1);
}
/* Shift the workspace right when the sidebar is clicked open, so the
   expanded rail doesn't overlay the chat/picker content. The transition
   on #main-app's margin-left animates this in both directions. */
body:has(.caw-sb.caw-sb-open) #main-app {
  margin-left: var(--sb-w-expanded);
}
.picker-wrap {
  max-width: 1130px; margin: 0 auto;
  padding: 40px clamp(18px, 3.5vw, 48px) 50px;
  width: 100%;
}

/* Suppress payment banner — no trial messaging on workspace (v5.2) */
#payment-banner { display: none !important; }

/* Trial / payment banner */
#payment-banner {
  background: var(--card); border: 1px solid var(--bd);
  border-radius: var(--r-md); padding: 16px 20px; margin-bottom: 28px;
  display: none; align-items: center; gap: 16px;
}
.banner-icon {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  background: var(--soft-green); color: var(--g-dark);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.banner-body { flex: 1; }
.banner-title {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 500; color: var(--tx);
  margin-bottom: 3px; letter-spacing: -.01em;
}
.banner-desc { font-size: 13px; color: var(--tx60); line-height: 1.55; }
.banner-cta {
  background: var(--lime); color: var(--text); border: none;
  border-radius: var(--r-pill);
  padding: 10px 20px;
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  transition: background .25s, color .25s, transform .15s;
  white-space: nowrap; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
}
.banner-cta::after { content: '→'; font-size: 13px; transition: transform .3s; }
.banner-cta:hover { background: var(--text); color: #fff; transform: translateY(-1px); }
.banner-cta:hover::after { transform: translateX(3px); }

/* ════════════════════════════════════════════════════════════════════════
   PICKER HERO — greeting + plan strip
   ════════════════════════════════════════════════════════════════════════ */
.picker-hero {
  display: block;
  margin-bottom: 24px;
}
/* Horizontal plan strip — replaces right-column card */
.plan-strip-h {
  background: var(--card); border: 1px solid var(--bd);
  border-radius: var(--r-md);
  padding: 12px 18px;
  margin-bottom: 40px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.plan-strip-h-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--tx35); flex-shrink: 0;
}
.plan-strip-h-div { width: 1px; height: 19px; background: var(--bd); flex-shrink: 0; }
.plan-strip-h-stat {
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
}
.plan-strip-h-stat strong {
  font-family: var(--font); font-size: 11.5px;
  font-weight: 600; letter-spacing: 0; color: var(--tx);
}
.plan-strip-h-stat span { font-size: 11.5px; color: var(--tx60); font-weight: 400; }
.plan-bar-h-wrap {
  flex: 1; min-width: 100px;
  height: 4px; background: var(--bg-2);
  border-radius: var(--r-pill); overflow: hidden;
  border: 1px solid var(--bd);
}
.plan-bar-h-wrap > span {
  display: block; height: 100%;
  background: var(--plan-green);
  border-radius: var(--r-pill); transition: width .4s ease;
}
.plan-strip-h-meta { font-size: 11px; color: var(--tx60); flex-shrink: 0; }
.plan-strip-h-renews { font-size: 11px; color: var(--tx35); flex-shrink: 0; }
.plan-strip-h-link {
  color: var(--tx); font-weight: 500; font-size: 11.5px;
  border: none; background: none; padding: 0;
  border-bottom: 1px solid var(--bd2); padding-bottom: 1px;
  flex-shrink: 0; cursor: pointer;
  transition: color .15s, border-color .15s; font-family: inherit;
}
.plan-strip-h-link:hover { color: var(--plan-green); border-color: var(--plan-green); }
.picker-greeting .greet-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--bd);
  color: var(--tx);
  border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 400;
  padding: 6px 14px; margin-bottom: 20px;
}
.picker-greeting .greet-badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--g); animation: blink 2.2s ease-in-out infinite;
}
.picker-greeting h1 {
  font-family: var(--font-display);
  font-size: clamp(29px, 3.8vw, 48px);
  font-weight: 500; line-height: 1;
  letter-spacing: -.035em;
  color: var(--tx); margin-bottom: 12px;
}
.picker-greeting p {
  font-size: 14px; color: var(--tx60);
  max-width: 32rem; line-height: 1.55;
}

/* Plan card on the right */
.picker-plan-strip {
  background: var(--card); border: 1px solid var(--bd);
  border-radius: var(--r-lg);
  padding: 22px 26px;
  display: flex; flex-direction: column; gap: 14px;
}
.plan-strip-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.plan-strip-link {
  font-size: 13px; color: var(--tx); font-weight: 500;
  cursor: pointer; background: none; border: none; padding: 0;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--bd2);
  font-family: inherit;
  transition: color .2s, border-color .2s;
}
.plan-strip-link:hover { color: var(--g); border-color: var(--g); }
.picker-plan-strip .pill { font-size: 11px; padding: 4px 11px; gap: 7px; letter-spacing: .06em; }
.picker-plan-strip .pill::before {
  content: ''; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: currentColor;
  margin-right: 7px; flex-shrink: 0; opacity: .9;
}
.plan-renews { font-size: 12px; color: var(--tx35); font-weight: 400; text-align: right; }
.plan-num-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
#picker-plan-num {
  font-family: var(--font);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0;
  color: var(--tx); line-height: inherit;
}
.plan-bar-wrap { display: block; }
.plan-bar {
  height: 6px; background: var(--bg2);
  border-radius: var(--r-pill); overflow: hidden;
  border: 1px solid var(--bd);
}
.plan-bar > span {
  display: block; height: 100%;
  background: #327e58;
  border-radius: var(--r-pill);
  transition: width .4s ease; width: 0%;
}
.plan-foot-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.plan-foot-row #picker-gen-rem {
  font-size: 12.5px; line-height: 1.4;
  color: var(--tx60); font-weight: 400;
}

/* ════════════════════════════════════════════════════════════════════════
   PICKER CARDS — FCA (cream, flagship) + AT (lilac) + HAL (soft-blue)
   ════════════════════════════════════════════════════════════════════════ */
.picker-cards {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 17px;
  align-items: stretch; margin-bottom: 17px;
}

/* Shared base */
.picker-card, .picker-ext {
  border-radius: var(--r-lg);
  position: relative;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s;
}
.picker-card:hover { transform: translateY(-3px); }
.picker-ext:hover { transform: translateY(-3px); }

/* Shared card-tag (eyebrow-style) */
.card-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 400;
  color: var(--tx); background: transparent;
  border: none; padding: 0;
  text-transform: none; letter-spacing: 0;
  width: fit-content; margin-bottom: 17px;
}
.card-tag::before {
  content: '●'; color: var(--g);
  font-size: 10px; vertical-align: 2px;
  margin-right: 2px;
}

/* ── FCA — cream flagship, 1.5fr wide ── */
.picker-card.fca {
  background: var(--card);
  border: 1px solid var(--bd);
  padding: 30px 30px 24px;
  overflow: hidden;
  cursor: pointer; display: flex; flex-direction: column;
}
.picker-card.fca:hover { border-color: var(--bd2); }
.picker-card.fca::after {
  content: ''; position: absolute;
  top: -40px; right: -60px; width: 300px; height: 300px;
  pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g fill='none' stroke='%232f82ff' stroke-width='1' opacity='0.12'><circle cx='210' cy='90' r='50'/><circle cx='210' cy='90' r='100'/><circle cx='210' cy='90' r='150'/><circle cx='210' cy='90' r='200'/></g></svg>");
}
.picker-card.fca .card-tag { position: relative; z-index: 1; margin-bottom: 20px; }
.picker-card.fca .card-tag::before { display: none; }
.picker-card.fca .card-tag svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--g); }
.picker-card.fca .card-title {
  position: relative; z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(29px, 3.6vw, 44px);
  font-weight: 500; line-height: .98;
  letter-spacing: -.035em;
  margin-bottom: 14px; color: var(--tx);
}
.picker-card.fca .card-title em {
  font-style: normal;
  color: var(--g); font-weight: 500;
}
.picker-card.fca .card-desc {
  position: relative; z-index: 1;
  font-size: 13px; color: var(--tx60); line-height: 1.55;
  max-width: 46ch; margin-bottom: auto; padding-bottom: 20px;
}
.picker-card.fca .card-chips {
  position: relative; z-index: 1;
  display: flex; gap: 7px; flex-wrap: wrap;
  margin-bottom: 20px; padding-top: 17px;
  border-top: 1px solid var(--bd);
}
.picker-card.fca .card-chip {
  font-size: 10.5px; font-weight: 400;
  color: var(--tx); background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: var(--r-pill); padding: 5px 11px;
}
.picker-card.fca .card-cta {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--dk); color: var(--dtx);
  border: none; border-radius: var(--r-pill);
  padding: 12px 12px 12px 20px;
  font-family: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background .25s, transform .15s;
  width: 100%;
}
.picker-card.fca .card-cta:hover { background: var(--grad-brand); transform: translateY(-1px); }
.picker-card.fca .card-cta .arr {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--dtx); color: var(--dk);
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s; flex-shrink: 0;
}
.picker-card.fca .card-cta:hover .arr { transform: translateX(3px); background: var(--dtx); color: var(--g); }

/* ── AT — lilac pastel accent ── */
.picker-card.at {
  background: var(--lilac);
  border: 1px solid transparent;
  padding: 27px 25px 22px;
  overflow: hidden;
  cursor: pointer; display: flex; flex-direction: column;
}
.picker-card.at .card-tag { position: relative; z-index: 1; color: var(--tx); }
.picker-card.at .card-tag::before { color: var(--dk); }
.picker-card.at .card-icon {
  position: relative; z-index: 1;
  width: 45px; height: 45px; border-radius: var(--r-sm);
  background: rgba(26,26,24,.08); color: var(--tx);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 17px;
}
.picker-card.at .card-title {
  position: relative; z-index: 1;
  font-family: var(--font-display);
  font-size: 26px; font-weight: 500;
  line-height: 1.05; letter-spacing: -.025em;
  margin-bottom: 12px; color: var(--tx);
}
.picker-card.at .card-title em {
  font-style: normal;
  color: var(--dk); font-weight: 600;
}
.picker-card.at .card-desc {
  position: relative; z-index: 1;
  font-size: 12.5px; color: rgba(26,26,24,.68);
  line-height: 1.55; margin-bottom: auto; padding-bottom: 17px;
}
.picker-card.at .card-chips {
  position: relative; z-index: 1;
  display: flex; gap: 7px; flex-wrap: wrap;
  margin-bottom: 17px; padding-top: 15px;
  border-top: 1px solid rgba(26,26,24,.12);
}
.picker-card.at .card-chip {
  font-size: 10.5px; font-weight: 400;
  color: var(--tx); background: rgba(26,26,24,.06);
  border: 1px solid transparent;
  border-radius: var(--r-pill); padding: 5px 11px;
}
.picker-card.at .card-cta {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--dk); color: var(--dtx);
  border: none; border-radius: var(--r-pill);
  padding: 11px 11px 11px 19px;
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  cursor: pointer;
  transition: background .25s, transform .15s;
  width: 100%;
}
.picker-card.at .card-cta:hover { background: var(--grad-brand); transform: translateY(-1px); }
.picker-card.at .card-cta .arr {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--lilac); color: var(--dk);
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s; flex-shrink: 0;
}
.picker-card.at .card-cta:hover .arr { transform: translateX(3px); background: var(--dtx); color: var(--g); }

/* ── HAL — soft-blue pastel extension strip ── */
.picker-ext {
  background: var(--soft-blue);
  border: 1px solid transparent;
  padding: 5px;
}
.picker-ext-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px;
  align-items: center;
  padding: 15px 20px; cursor: pointer;
  border-radius: calc(var(--r-lg) - 6px);
  transition: background .2s;
}
.picker-ext-card:hover { background: rgba(255,255,255,.40); }
.picker-ext-card-icon {
  width: 45px; height: 45px; border-radius: var(--r-sm);
  background: rgba(26,26,24,.08); color: var(--tx);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.picker-ext-card-meta {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 5px;
  font-size: 9.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--tx60);
}
.picker-ext-card-meta .req {
  background: rgba(26,26,24,.08); color: var(--tx);
  padding: 2px 8px; border-radius: var(--r-pill);
  letter-spacing: .08em; font-weight: 500;
}
.picker-ext-card-title {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 500;
  letter-spacing: -.02em; color: var(--tx);
  line-height: 1.15; margin-bottom: 3px;
}
.picker-ext-card-desc { font-size: 12px; color: rgba(26,26,24,.68); line-height: 1.5; }
.picker-ext-card-cta {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--lime); color: var(--text); border: none;
  border-radius: var(--r-pill);
  padding: 9px 17px;
  font-family: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background .25s, color .25s, transform .15s;
}
.picker-ext-card-cta svg { transition: transform .3s; }
.picker-ext-card-cta:hover { background: var(--text); color: #fff; transform: translateY(-1px); }
.picker-ext-card-cta:hover svg { transform: translateX(3px); }

/* ════════════════════════════════════════════════════════════════════════
   LIBRARY LAYOUT — Direction A
   Sections: Flagship · Core Assessments · Companion Modules · Progress & Review
   ════════════════════════════════════════════════════════════════════════ */
/* ──────────────────────────────────────────────────────────────────────
   Ask Capacoty promo — slot between plan strip and Library on workspace
   ────────────────────────────────────────────────────────────────────── */
.ask-promo { margin: 0 0 30px; }
.ask-promo-card {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: var(--r-md);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow: hidden;
}
.ask-promo-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 300px; height: 100%;
  background: radial-gradient(circle at 100% 0%, rgba(205,240,117,.18), transparent 70%);
  pointer-events: none;
}
.ask-promo-head {
  display: flex; align-items: flex-start; gap: 14px;
  position: relative; z-index: 1;
}
.ask-promo-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 12px;
  background: rgba(205,240,117,.22);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
}
.ask-promo-icon svg { width: 22px; height: 22px; }
.ask-promo-text { flex: 1; min-width: 0; }
.ask-promo-title {
  font-size: 17px; font-weight: 700;
  display: flex; align-items: center; gap: 10px;
  letter-spacing: -.015em;
  color: var(--text);
  margin-bottom: 4px;
}
.ask-promo-new {
  font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--lime); color: var(--text);
  padding: 3px 9px;
  border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: 3px;
}
.ask-promo-desc {
  margin: 0; font-size: 13.5px; line-height: 1.5;
  color: var(--text-secondary);
  max-width: 640px;
}
.ask-promo-form {
  display: flex; gap: 6px;
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: var(--r-pill);
  padding: 4px 4px 4px 18px;
  transition: border-color .2s, box-shadow .2s;
  position: relative; z-index: 1;
}
.ask-promo-form:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-light);
}
.ask-promo-form input {
  flex: 1; min-width: 0;
  border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 14px;
  color: var(--text);
  padding: 11px 0;
}
.ask-promo-form input::placeholder { color: var(--text-muted); }
.ask-promo-form button {
  background: var(--text); color: #fff;
  border: none; border-radius: var(--r-pill);
  padding: 10px 20px;
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s, transform .1s;
  flex-shrink: 0;
}
.ask-promo-form button:hover { background: var(--blue); }
.ask-promo-form button:active { transform: scale(.97); }

.lib-section { margin-bottom: 30px; }

.lib-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bd);
}
.lib-section-title {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 500;
  letter-spacing: -.02em;
  display: flex; align-items: baseline; gap: 10px;
}
.lib-section-title .count {
  font-family: var(--font);
  font-size: 10px;
  background: var(--bg2);
  padding: 2px 9px;
  border-radius: var(--r-pill);
  font-weight: 500;
  color: var(--tx60);
  letter-spacing: 0;
}
.lib-section-sub { font-size: 11px; color: var(--tx35); }

.lib-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}

/* ── Base tile ── */
.lib-tile {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: var(--r-md);
  padding: 19px 19px 17px;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.22,.61,.36,1), border-color .2s, box-shadow .2s;
  display: flex; flex-direction: column;
  min-height: 175px;
  position: relative;
}
.lib-tile:hover {
  transform: translateY(-3px);
  border-color: var(--bd2);
  box-shadow: 0 12px 28px -16px rgba(26,26,24,.15);
}

/* Icon chip — colour variants */
.lib-tile-icon {
  width: 35px; height: 35px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 12px; flex-shrink: 0;
  background: var(--soft-blue); color: var(--blue-deep);
}
.lib-tile.lilac .lib-tile-icon { background: var(--lilac);      color: var(--dk); }
.lib-tile.mint  .lib-tile-icon { background: var(--soft-mint);  color: #2d6a4c; }
.lib-tile.peach .lib-tile-icon { background: var(--soft-peach); color: #8e4521; }
.lib-tile.pink  .lib-tile-icon { background: var(--soft-pink);  color: #8a2e7a; }
.lib-tile.cream .lib-tile-icon { background: var(--soft-cream); color: #6b5700; }

.lib-tile-title {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 500;
  letter-spacing: -.015em;
  margin-bottom: 4px; color: var(--tx);
}
.lib-tile-desc {
  font-size: 11.5px; color: var(--tx60);
  line-height: 1.5; margin-bottom: auto;
  padding-bottom: 14px;
}
.lib-tile-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 9px; padding-top: 12px;
  border-top: 1px solid var(--bd);
}
.lib-tile-meta {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 500; color: var(--tx60);
}
.lib-tile-meta .vtag {
  background: var(--bg); border: 1px solid var(--bd);
  padding: 2px 7px; border-radius: var(--r-pill);
  color: var(--tx60); font-size: 9.5px; letter-spacing: .02em;
}
.lib-tile-go {
  width: 25px; height: 25px; border-radius: 50%;
  background: var(--bg);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--tx60);
  transition: background .2s, color .2s, transform .2s;
  flex-shrink: 0;
}
.lib-tile:hover .lib-tile-go { background: var(--dk); color: var(--dtx); transform: translateX(2px); }

/* Badge top-right (Requires FCA) */
.lib-tile .req-badge {
  position: absolute; top: 14px; right: 14px;
  font-size: 8.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tx60);
  background: var(--bg); border: 1px solid var(--bd);
  padding: 2px 8px; border-radius: var(--r-pill);
}

/* Coming-soon state */
.lib-tile.soon {
  background: var(--bg2);
  border: 1px dashed var(--bd2);
  cursor: default;
}
.lib-tile.soon:hover { transform: none; box-shadow: none; border-color: var(--bd2); }
.lib-tile.soon .lib-tile-icon { opacity: .55; }
.lib-tile.soon .lib-tile-title { color: var(--tx60); }
.lib-tile.soon .lib-tile-desc  { color: var(--tx35); }
.lib-tile.soon .lib-tile-go    { display: none; }

/* Coming-soon badge pill (top-right) */
.soon-pill {
  position: absolute; top: 14px; right: 14px;
  font-size: 8.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  border-radius: var(--r-pill); padding: 2px 8px;
}
.soon-pill.inbuild { background: var(--soft-yellow); color: #6b5700; }
.soon-pill.period  { background: var(--bg); border: 1px solid var(--bd2); color: var(--tx60); }

/* Beta badge pill — live tile that's still in test (top-right) */
.lib-tile .beta-pill {
  position: absolute; top: 14px; right: 14px;
  font-size: 8.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--soft-orange); color: #a73912;
  border-radius: var(--r-pill); padding: 2px 8px;
}

/* "New" badge pill — green-tinted, marks a freshly-shipped tool (top-right) */
.lib-tile .new-pill {
  position: absolute; top: 14px; right: 14px;
  font-size: 8.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  background: rgba(50,126,88,.12); color: #245c42;
  border: 1px solid rgba(50,126,88,.28);
  border-radius: var(--r-pill); padding: 2px 8px;
}

/* Sidebar inline beta tag */
.sb-item .sb-meta.beta {
  margin-left: auto; margin-right: 6px;
  font-size: 9px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--soft-orange); color: #a73912;
  padding: 2px 6px; border-radius: var(--r-pill);
  flex-shrink: 0;
}

/* ── Flagship — full-width tile with FCA concentric-circle bg ── */
.lib-tile.flagship {
  grid-column: span 3;
  min-height: auto;
  padding: 27px 30px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 27px;
  overflow: hidden;
}
.lib-tile.flagship::before {
  content: ''; position: absolute;
  top: -40px; right: -60px; width: 300px; height: 300px;
  pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g fill='none' stroke='%232f82ff' stroke-width='1' opacity='0.12'><circle cx='210' cy='90' r='50'/><circle cx='210' cy='90' r='100'/><circle cx='210' cy='90' r='150'/><circle cx='210' cy='90' r='200'/></g></svg>");
}
.lib-tile.flagship .lib-tile-body { position: relative; z-index: 1; }
.lib-tile.flagship .lib-tile-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 400; color: var(--tx);
  margin-bottom: 15px;
}
.lib-tile.flagship .lib-tile-tag svg { width: 14px; height: 14px; color: var(--blue); flex-shrink: 0; }
.lib-tile.flagship .lib-tile-title {
  font-size: clamp(27px, 3.2vw, 41px);
  line-height: .98; letter-spacing: -.035em;
  margin-bottom: 12px;
}
.lib-tile.flagship .lib-tile-title em { font-style: normal; color: var(--blue); font-weight: 500; }
.lib-tile.flagship .lib-tile-desc {
  font-size: 13px; max-width: 50ch;
  padding-bottom: 0; margin-bottom: 0;
}
.lib-tile.flagship .lib-tile-chips {
  display: flex; gap: 7px; flex-wrap: wrap;
  margin-top: 17px; padding-top: 15px;
  border-top: 1px solid var(--bd);
}
.lib-tile.flagship .lib-tile-chips .chip {
  font-size: 10.5px; color: var(--tx); background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: var(--r-pill); padding: 4px 10px;
}
.lib-tile.flagship .lib-tile-cta {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--dk); color: var(--dtx);
  border: none; border-radius: var(--r-pill);
  padding: 12px 12px 12px 20px;
  font-family: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: background .25s, transform .15s;
  white-space: nowrap;
}
.lib-tile.flagship .lib-tile-cta:hover { background: var(--grad-brand); transform: translateY(-1px); }
.lib-tile.flagship .lib-tile-cta .arr {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--dtx); color: var(--dk);
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s, color .25s; flex-shrink: 0;
}
.lib-tile.flagship:hover { border-color: var(--bd2); }
.lib-tile.flagship .lib-tile-cta:hover .arr { transform: translateX(3px); color: var(--blue); }

/* ── Library responsive breakpoints ── */
@media (max-width: 900px) {
  .lib-grid { grid-template-columns: repeat(2, 1fr); }
  .lib-tile.flagship {
    grid-column: span 2;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .lib-tile.flagship .lib-tile-cta { width: 100%; justify-content: space-between; }
}
@media (max-width: 560px) {
  .lib-grid { grid-template-columns: 1fr; }
  .lib-tile.flagship { grid-column: span 1; }
}

/* Footer */
.picker-foot {
  margin-top: 34px; padding-top: 20px;
  border-top: 1px solid var(--bd);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--tx35);
}
.picker-foot a {
  color: var(--tx60); text-decoration: none;
  border-bottom: 1px solid var(--bd);
  padding-bottom: 1px;
  transition: color .2s, border-color .2s;
}
.picker-foot a:hover { color: var(--tx); border-color: var(--bd2); }

/* ════════════════════════════════════════════════════════════════════════
   BRAND LOADER — visible by default during initial auth resolution
   ─────────────────────────────────────────────────────────────────────
   Sits above splash (z 600 vs 490) and main-app. Hidden as soon as
   showSplash() or hideSplash() is called — i.e. as soon as the auth
   state has resolved and real UI is ready to display.
   ════════════════════════════════════════════════════════════════════════ */
#brand-loader {
  position: fixed; inset: 0; z-index: 600;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .3s ease;
}
#brand-loader.hiding { opacity: 0; pointer-events: none; }
#brand-loader.hidden { display: none; }
#brand-loader img {
  width: 160px; height: auto;
  animation: brandPulse 1.6s ease-in-out infinite;
  user-select: none;
  -webkit-user-drag: none;
}
@keyframes brandPulse {
  0%, 100% { opacity: .55; transform: scale(.98); }
  50%      { opacity: 1;   transform: scale(1);    }
}

/* ════════════════════════════════════════════════════════════════════════
   SPLASH — auth (centred glass card on flat dark, v6)
   ─────────────────────────────────────────────────────────────────────
   Single centred glass card. Tabs switch login ↔ register; card grows
   from 480px → 860px wide with 2-col field layout when register is
   active. Other views (forgot, reset, verify, card) are reached via
   splShowView() and hide the tabs. Bg #1a1a18 matches --sb-bg.

   IDs preserved: #splash-screen, #spl-view-{login,register,card,
   verify,forgot,reset}, #spl-{login,reg,resend,forgot,reset}-* and
   all input/button IDs so existing JS hooks work untouched.
   ════════════════════════════════════════════════════════════════════════ */
#splash-screen {
  --spl-orange:       #ff6b34;
  --spl-orange-cream: #fff1eb;
  position: fixed; inset: 0; z-index: 490;
  background: #1a1a18;
  color: #fff;
  display: flex; flex-direction: column;
  padding: 28px 36px;
  font-family: var(--body);
  transition: opacity .35s ease;
  overflow-x: hidden;
}
#splash-screen.hiding { opacity: 0; pointer-events: none; }
#splash-screen.hidden { display: none; }

/* subtle film grain — keeps the dark surface from feeling sterile */
#splash-screen::before {
  content: '';
  position: fixed; inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .08;
  mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* TOP BAR — logo + support button ─────────────────────────── */
.spl-topbar {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
}
.spl-brand { display: flex; align-items: center; }
.spl-brand img { height: 28px; width: auto; display: block; }

.spl-support-btn {
  height: 36px;
  padding: 0 16px;
  background: var(--spl-orange-cream);
  color: #0e1530;
  border: none;
  border-radius: 999px;
  font: inherit;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
.spl-support-btn:hover {
  background: var(--spl-orange);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -3px rgba(255,107,52,.5);
}
.spl-support-btn svg { transition: transform .2s; }
.spl-support-btn:hover svg { transform: rotate(-8deg); }

/* STAGE — flex container that centres the glass card ─────── */
.spl-stage {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 24px;
  position: relative;
  z-index: 2;
}

/* Scroll wrapper retained so splShowView() scrollTop reset still works */
.spl-auth {
  width: 100%;
  display: flex;
  justify-content: center;
}

.spl-auth-content {
  width: 100%;
  max-width: 432px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(30px) saturate(1.2);
  -webkit-backdrop-filter: blur(30px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 25px;
  padding: 32px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.14) inset,
    0 24px 64px -12px rgba(0,0,0,.5);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: max-width .65s cubic-bezier(.4, 0, .2, 1);
}
.spl-auth-content.is-wide { max-width: 774px; }
.spl-auth-content::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 25px;
  background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, transparent 50%);
  pointer-events: none;
}
.spl-auth-content > * { position: relative; z-index: 1; }

/* TAB PILL — login ↔ register switcher ─────────────────────── */
.spl-tabs {
  display: grid; grid-template-columns: 1fr 1fr;
  background: rgba(0,0,0,.25);
  padding: 3px;
  border-radius: 999px;
  margin-bottom: 24px;
  font-size: 12px; font-weight: 500;
  border: 1px solid rgba(255,255,255,.10);
  width: 100%;
  max-width: 288px;
}
.spl-tabs.is-hidden { display: none; }
.spl-tabs button {
  border: none; background: transparent;
  height: 32px;
  border-radius: 999px;
  cursor: pointer;
  color: rgba(255,255,255,.55);
  font: inherit;
  font-family: var(--body);
  transition: all .25s cubic-bezier(.4,0,.2,1);
}
.spl-tabs button.active {
  background: rgba(255,255,255,.95);
  color: #0e1530;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

/* VIEWS — show/hide via .active toggled by splShowView() ───── */
.spl-view { display: none; }
.spl-view.active { display: block; }

/* TITLES + SUBS ────────────────────────────────────────────── */
.spl-title {
  font-family: var(--body);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.05;
  color: #fff;
  margin-bottom: 9px;
}
.spl-sub {
  font-size: 12.5px;
  color: rgba(255,255,255,.65);
  margin-bottom: 26px;
  line-height: 1.5;
}
.spl-sub strong { color: #fff; font-weight: 600; }

/* FIELDS ───────────────────────────────────────────────────── */
.spl-field {
  margin-bottom: 12px;
  position: relative;
}
.spl-field.has-icon { /* icon previously absolute-positioned; new design hides icon */ }
.spl-field-icon { display: none; }
.spl-eye-toggle {
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  margin-top: 11px;          /* offset for label-above layout */
  background: transparent; border: none; cursor: pointer;
  color: rgba(255,255,255,.5);
  padding: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s;
}
.spl-eye-toggle:hover { color: #fff; }

.spl-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,.7);
  margin-bottom: 6px;
  letter-spacing: .01em;
}

.spl-input {
  width: 100%;
  height: 45px;
  padding: 0 16px;
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  font: inherit;
  font-family: var(--body);
  font-size: 13px;
  color: #fff;
  transition: all .15s;
  outline: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.spl-input::placeholder { color: rgba(255,255,255,.35); }
.spl-input:focus {
  border-color: rgba(255,107,52,.55);
  background: rgba(0,0,0,.3);
  box-shadow: 0 0 0 3px rgba(255,107,52,.12);
}
.spl-input.has-trailing { padding-right: 46px; }
.spl-input.compact { /* legacy class kept; same styling as base in new design */ }

.spl-field-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px;
  margin-bottom: 12px;
}

/* Field row with a top-margin override (register layout uses inline style) */
.spl-field-row > div { display: flex; flex-direction: column; }

.spl-forgot {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,.7);
  text-decoration: none;
  cursor: pointer;
  margin: -4px 0 18px;
  transition: color .15s;
}
.spl-forgot:hover { color: var(--spl-orange); }

/* ERRORS ───────────────────────────────────────────────────── */
.spl-err {
  display: none;
  font-size: 12px;
  color: #fca5a5;
  background: rgba(220,38,38,.12);
  border: 1px solid rgba(220,38,38,.28);
  border-radius: 9px;
  padding: 8px 11px;
  margin: 4px 0 10px;
  line-height: 1.4;
}
.spl-err:not(:empty) { display: block; }
.spl-err .spl-link { color: #fff; text-decoration: underline; cursor: pointer; }

/* PRIMARY BUTTONS — cream → orange (hover) ─────────────────── */
.spl-btn {
  width: 100%;
  height: 48px;
  background: var(--spl-orange-cream);
  color: #0e1530;
  border: none;
  border-radius: 12px;
  font: inherit;
  font-family: var(--body);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: background .2s, color .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 4px 12px -2px rgba(0,0,0,.3);
  position: relative; overflow: hidden;
}
.spl-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform .7s;
}
.spl-btn:hover::before { transform: translateX(100%); }
.spl-btn:hover {
  background: var(--spl-orange);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -4px rgba(255,107,52,.45);
}
.spl-btn:active { transform: translateY(0); }
.spl-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.spl-btn svg { transition: transform .25s; }
.spl-btn:hover svg { transform: translateX(3px); }

.spl-btn-ghost {
  width: 100%;
  height: 41px;
  margin-top: 9px;
  background: transparent;
  color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  font: inherit;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}
.spl-btn-ghost:hover {
  color: #fff;
  border-color: rgba(255,255,255,.32);
  background: rgba(255,255,255,.04);
}

.spl-btn-pill {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 8px;
  color: var(--spl-orange);
  text-decoration: none;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: color .15s;
}
.spl-btn-pill:hover { color: #fff; }
.spl-btn-pill svg { transition: transform .15s; }
.spl-btn-pill:hover svg { transform: translateX(2px); }

/* CTA FOOT (the "Don't have an account?" / "Already have one?" lines) */
.spl-cta-foot {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.10);
  font-size: 12px;
  color: rgba(255,255,255,.55);
  display: flex; align-items: center; justify-content: center;
  gap: 4px;
}

/* TERMS CHECKBOX ROW (register) ───────────────────────────── */
.spl-terms-row {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 11.5px;
  color: rgba(255,255,255,.65);
  margin: 7px 0 12px;
  line-height: 1.45;
}
.spl-terms-row input { margin-top: 2px; accent-color: var(--spl-orange); }
.spl-terms-row a {
  color: #fff; font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,.3);
  text-decoration: none;
}

/* TRIAL BADGE (register) ──────────────────────────────────── */
.spl-trial-badge {
  margin-top: 14px;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: rgba(255,107,52,.12);
  border: 1px solid rgba(255,107,52,.30);
  border-radius: 11px;
  font-size: 11.5px;
  color: rgba(255,255,255,.85);
  line-height: 1.4;
}
.spl-trial-badge strong { color: #fff; font-weight: 600; }
.spl-trial-icon { font-size: 16px; flex-shrink: 0; }

/* CARD/VERIFY/SUCCESS LAYOUTS ─────────────────────────────── */
.spl-success-wrap { text-align: center; margin-bottom: 18px; }
.spl-icon-wrap {
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  border-radius: 999px;
  background: rgba(255,107,52,.14);
  border: 1px solid rgba(255,107,52,.30);
  display: flex; align-items: center; justify-content: center;
  color: var(--spl-orange);
}
.spl-success-wrap h2 {
  font-family: var(--body);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 7px;
}
.spl-success-wrap p {
  font-size: 12.5px;
  color: rgba(255,255,255,.65);
  line-height: 1.55;
  margin: 0;
}

.spl-verify-warn {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 16px;
  padding: 10px 12px;
  background: rgba(245,158,11,.10);
  border: 1px solid rgba(245,158,11,.32);
  border-radius: 11px;
  color: #fde68a;
  font-size: 11.5px;
  line-height: 1.4;
}
.spl-verify-warn p { margin: 0; }

/* Info / link rows below CTA buttons */
.spl-info {
  margin-top: 16px;
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,.55);
  line-height: 1.5;
}
.spl-info .spl-link {
  color: #fff; font-weight: 500; cursor: pointer;
  border-bottom: 1px dashed rgba(255,255,255,.4);
  padding-bottom: 1px;
}
.spl-info .spl-link:hover { color: var(--spl-orange); border-color: var(--spl-orange); }

/* FOOTER (legal links) ────────────────────────────────────── */
.spl-footer {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px;
  color: rgba(255,255,255,.45);
  gap: 18px;
}
.spl-footer a {
  color: rgba(255,255,255,.55);
  text-decoration: none;
  cursor: pointer;
  transition: color .15s;
}
.spl-footer a:hover { color: #fff; }
.spl-footer-made em {
  font-style: italic;
  font-weight: 500;
  color: rgba(255,255,255,.75);
}

/* 2-COLUMN GRID for register when card is wide ────────────── */
.spl-register-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  margin-bottom: 4px;
}
.spl-register-grid > div { min-width: 0; }

/* ─── Mobile: collapse to single column, allow scroll ─────── */
@media (max-width: 720px) {
  .spl-register-grid { grid-template-columns: 1fr; gap: 0; }
  .spl-auth-content.is-wide { max-width: 432px; }
}
@media (max-width: 540px) {
  #splash-screen { padding: 18px 20px; overflow-y: auto; }
  .spl-auth-content { padding: 26px 22px; border-radius: 20px; }
  .spl-title { font-size: 27px; }
  .spl-support-btn { padding: 0 12px; }
  .spl-footer { flex-direction: column; align-items: center; gap: 8px; text-align: center; }
}

/* ════════════════════════════════════════════════════════════════════════
   SUPPORT MODAL (pre-login support; light theme matches workspace pattern)
   ════════════════════════════════════════════════════════════════════════ */
.spl-support-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 600;
  display: none;
  align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity .2s ease;
}
.spl-support-modal.is-open { display: flex; opacity: 1; }
.spl-support-modal .modal-card {
  background: #fff;
  border-radius: 16px;
  padding: 28px 28px 24px;
  width: 100%;
  max-width: 460px;
  box-shadow: 0 24px 64px -12px rgba(0,0,0,.4);
  transform: translateY(8px) scale(.98);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.spl-support-modal.is-open .modal-card { transform: translateY(0) scale(1); }
.spl-support-modal .modal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.spl-support-modal .modal-title {
  font-size: 17px; font-weight: 700; color: #0e1530;
  letter-spacing: -.01em;
}
.spl-support-modal .modal-close {
  background: transparent; border: none;
  width: 32px; height: 32px; border-radius: 8px;
  cursor: pointer; color: rgba(14,21,48,.55);
  font-size: 22px; line-height: 1;
  display: grid; place-items: center;
  transition: background .15s, color .15s;
}
.spl-support-modal .modal-close:hover { background: rgba(14,21,48,.06); color: #0e1530; }
.spl-support-modal .modal-desc {
  font-size: 13.5px; color: rgba(14,21,48,.62);
  line-height: 1.55; margin-bottom: 16px;
}
.spl-support-modal .modal-field { margin-bottom: 12px; }
.spl-support-modal .modal-field-label {
  display: block; font-size: 12px; font-weight: 600;
  color: rgba(14,21,48,.7); margin-bottom: 6px;
}
.spl-support-modal .modal-input,
.spl-support-modal .modal-textarea {
  width: 100%;
  background: #f4f4f5;
  border: 1px solid rgba(14,21,48,.10);
  border-radius: 10px;
  padding: 11px 14px;
  font: inherit; font-family: var(--body);
  font-size: 13.5px; color: #0e1530;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
  resize: vertical;
}
.spl-support-modal .modal-input::placeholder,
.spl-support-modal .modal-textarea::placeholder { color: rgba(14,21,48,.4); }
.spl-support-modal .modal-input:focus,
.spl-support-modal .modal-textarea:focus {
  background: #fff; border-color: #ff6b34;
  box-shadow: 0 0 0 3px rgba(255,107,52,.12);
}
.spl-support-modal .modal-error {
  font-size: 12.5px; color: #dc2626;
  margin: 6px 0 0; display: none;
}
.spl-support-modal .modal-actions { display: flex; gap: 10px; margin-top: 16px; }
.spl-support-modal .modal-btn {
  flex: 1; height: 44px; border: none;
  border-radius: 11px;
  font: inherit; font-family: var(--body);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .2s, color .2s, transform .2s, box-shadow .2s;
}
.spl-support-modal .modal-btn-ghost {
  background: transparent; color: rgba(14,21,48,.7);
  border: 1px solid rgba(14,21,48,.14);
}
.spl-support-modal .modal-btn-ghost:hover { background: #f4f4f5; color: #0e1530; border-color: rgba(14,21,48,.22); }
.spl-support-modal .modal-btn-primary {
  flex: 1.6;
  background: #fff1eb; color: #0e1530;
  border: 1px solid rgba(14,21,48,.06);
}
.spl-support-modal .modal-btn-primary:hover {
  background: #ff6b34; color: #fff; border-color: #ff6b34;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -3px rgba(255,107,52,.45);
}
.spl-support-modal .modal-btn-primary:disabled {
  opacity: .55; cursor: not-allowed; transform: none;
}

/* ════════════════════════════════════════════════════════════════════════
   FEEDBACK MODAL (uses legacy tokens — preserved)
   ════════════════════════════════════════════════════════════════════════ */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(26,26,24,.55);
  z-index: 500; align-items: center; justify-content: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.modal-overlay.open { display: flex; }

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .picker-hero { grid-template-columns: 1fr; gap: 22px; }
  .picker-greeting h1 { font-size: clamp(36px, 7vw, 56px); }
  .picker-cards { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 880px) {
  .picker-wrap { padding: calc(var(--nav-h) + 20px + 22px) 16px 40px; }
  .app-header { padding: 0 16px; }
  .header-btn span { display: none; }
  .user-menu-name { display: none; }
  .logo img { max-width: 120px; }
  .header-badge { display: none; }
  .picker-card.fca { padding: 28px 24px 22px; }
  .picker-card.fca .card-title { font-size: clamp(32px, 7vw, 42px); }
  .picker-card.at { padding: 26px 22px 22px; }
  .picker-ext-card { grid-template-columns: auto 1fr; gap: 14px; padding: 16px 18px; }
  .picker-ext-card-cta { grid-column: 1 / -1; width: 100%; justify-content: center; margin-top: 8px; }
  .picker-foot { flex-direction: column; gap: 10px; text-align: center; }
  .user-dropdown { right: -10px; width: calc(100vw - 32px); max-width: 340px; }
  #payment-banner { flex-wrap: wrap; }
  .banner-cta { width: 100%; justify-content: center; }
}
@media (max-width: 640px) {
  .spl-card { padding: 28px 22px; }
  .spl-card-title { font-size: 26px; }
  .spl-field-row { grid-template-columns: 1fr; }
}
/* ── Mobile (≤ 767px) — partial renders a top app bar + drawer instead
   of the left sidebar, so the workspace flows to the full viewport. */
@media (max-width: 767px) {
  #main-app { margin-left: 0 !important; }
  .picker-wrap { padding: 16px 14px 32px; }
}

/* ════════════════════════════════════════════════════════════════════════
   WORKSPACE REDESIGN (2026-05-20) — full-viewport two-pane shell.
   Source of truth: workspace_redesign.html (mockup). All workspace-only
   styles are prefixed `ws-` and the additional tokens (--app, --warn,
   --tx70, --field-bg, etc.) are scoped to .picker-wrap.is-workspace so
   they don't leak into the auth/billing/marketing styles above. Dark mode
   is activated via [data-theme="dark"] on <html>; persisted in
   localStorage('capacoty-theme').
   ════════════════════════════════════════════════════════════════════════ */

/* Layout: turn picker-wrap into a full-viewport flex column when housing
   the workspace shell. The page-level scroll containers are inside
   .ws-shell (chat-scroll + artifact-body); the shell itself never
   scrolls so the topbar stays pinned without position:fixed. */
.picker-wrap.is-workspace {
  max-width: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  flex: 1; min-height: 100vh;
  /* Prevents the fixed chat sheet's intrinsic min-content from spilling
     past a narrow viewport on mobile. The chat panel translates off-screen
     when closed; without this, it forces horizontal scroll on iOS Safari. */
  overflow-x: hidden;
}

/* Token additions — scoped so they apply only inside .ws-shell. */
.picker-wrap.is-workspace {
  --bg-grad-1: #f7f5ef;
  --bg-grad-2: #eef0e6;
  --tx70: rgba(26,26,24,.72);
  --tx55: rgba(26,26,24,.55);
  --tx40: rgba(26,26,24,.40);
  --tx20: rgba(26,26,24,.20);
  --tx10: rgba(26,26,24,.07);
  --app: #327e58;
  --app-dim: rgba(50,126,88,.10);
  --app-bd: rgba(50,126,88,.25);
  --app-strong: #245c42;
  --warn: #c0573b;
  --warn-dim: rgba(192,87,59,.10);
  --field-bg: #f7f6f1;
  --shadow-sm: 0 1px 2px rgba(26,26,24,.04);
  --shadow-md: 0 3.5px 21.5px rgba(26,26,24,.06), 0 1px 2px rgba(26,26,24,.04);
  --shadow-lg: 0 12px 34px rgba(26,26,24,.10), 0 2px 6px rgba(26,26,24,.05);
  --primary-ink: #1a1a18;
  --on-primary: #ffffff;
  --asst-bubble: #ececec;
  --asst-text: #222222;
  background: #f8f7f6;
}

/* Dark theme — overrides above tokens AND a few core v5.2 aliases so the
   shell adopts dark surfaces without touching the rest of the file.
   Neutral grey palette: #1a1a1a (deepest) → #1f1f1f (mid) → #242424 (top). */
[data-theme="dark"] .picker-wrap.is-workspace {
  --bg-grad-1: #1a1a1a;
  --bg-grad-2: #1f1f1f;
  --tx70: rgba(241,239,232,.72);
  --tx55: rgba(241,239,232,.55);
  --tx40: rgba(241,239,232,.40);
  --tx20: rgba(241,239,232,.20);
  --tx10: rgba(241,239,232,.08);
  --app: #4ea87b;
  --app-dim: rgba(78,168,123,.18);
  --app-bd: rgba(78,168,123,.34);
  --app-strong: #7fc99e;
  --warn: #e07a5a;
  --warn-dim: rgba(224,122,90,.16);
  --field-bg: #1f1f1f;
  --primary-ink: #cdf075;
  --on-primary: #0a0a0a;
  --asst-bubble: #2a2a2a;
  --asst-text: #e3e1da;
  --tx: #f1efe8;
  --card: #242424;
  --bd: rgba(255,255,255,.08);
  --bd2: rgba(255,255,255,.14);
  background: #1a1a1a;
}

/* ws-shell: full-viewport flex column, never overflows. */
.ws-shell {
  display: flex; flex-direction: column;
  height: 100vh; max-height: 100vh;
  padding: 12.5px;
  gap: 11px;
  font-size: 13px; line-height: 1.55;
  color: var(--tx);
  overflow: hidden;
}

/* ───── Top bar ──────────────────────────────────────────── */
/* Mirrors the .ws-main split below (1fr/1.4fr — chat-style panel
   on the left, workspace artifact panel on the right). Crumbs sit
   in the left half; Tutorial + plan-badge + Manage plan sit at
   the left edge of the right half so they align directly above
   the "Continue a draft" tab; drafts synced + bell + theme are
   pushed right via margin-left:auto. */
.ws-topbar { display: grid; grid-template-columns: 1fr 1.4fr; align-items: center; padding: 3.5px 0; }
.ws-topbar-half-left  { display: flex; align-items: center; padding: 0 14.5px 0 7px; min-width: 0; }
/* Left padding lines V1/Tutorial-equivalents up with the left edge
   of the workspace artifact panel below. */
/* Left padding = 5.5 (.ws-artifact-wrap) + 1 (.ws-artifact border)
   + 9 (.ws-artifact-head padding) so the Tutorial button's left edge
   lines up with the "Continue a draft" tab below. */
.ws-topbar-half-right { display: flex; align-items: center; padding: 0 7px 0 15.5px; gap: 7px; min-width: 0; }
.ws-topbar .ws-actions-left { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.ws-topbar .ws-actions { margin-left: auto; }
.ws-crumbs { display: flex; align-items: center; gap: 6px; color: var(--tx55); font-size: 12px; font-weight: 500; }
.ws-crumb-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 8px 4px 7px;
  background: transparent; border: 1px solid transparent;
  border-radius: 7px;
  color: var(--tx); font: inherit; font-weight: 600; font-size: 12.5px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.ws-crumb-btn:hover { background: var(--field-bg); border-color: var(--bd); }
.ws-crumb-btn .ws-crumb-ic {
  width: 16px; height: 16px; border-radius: 4px;
  display: grid; place-items: center;
  background: var(--field-bg); color: var(--tx70);
  flex-shrink: 0;
}
.ws-crumb-btn .ws-crumb-ic svg { width: 11px; height: 11px; }
.ws-crumb-ic-logo { background: transparent !important; padding: 0; }
.ws-crumb-ic-logo img { width: 14px; height: 14px; object-fit: contain; display: block; }
.ws-crumb-ic-logo .ws-crumb-logo-light { display: block; }
.ws-crumb-ic-logo .ws-crumb-logo-dark  { display: none; }
[data-theme="dark"] .ws-crumb-ic-logo .ws-crumb-logo-light { display: none; }
[data-theme="dark"] .ws-crumb-ic-logo .ws-crumb-logo-dark  { display: block; }
.ws-crumb-btn .ws-crumb-caret {
  display: inline-flex; flex-direction: column;
  margin-left: 2px; color: var(--tx40);
}
.ws-crumb-btn .ws-crumb-caret svg { width: 8px; height: 8px; display: block; }
.ws-crumb-sep { color: var(--tx40); font-size: 13px; user-select: none; }
.ws-crumb-dd {
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 220px;
  background: var(--bg-grad-1);
  border: 1px solid var(--bd); border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  padding: 6px;
  opacity: 0; transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .14s, transform .14s;
  z-index: 350;
}
.ws-crumb-wrap { position: relative; }
.ws-crumb-wrap.open .ws-crumb-dd { opacity: 1; transform: translateY(0); pointer-events: auto; }
.ws-crumb-wrap.open .ws-crumb-btn { background: var(--field-bg); border-color: var(--bd); }
.ws-crumb-dd-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 7px 9px;
  background: transparent; border: 0; border-radius: 7px;
  color: var(--tx); font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; text-align: left;
}
.ws-crumb-dd-item:hover { background: var(--field-bg); }
.ws-crumb-dd-ic {
  width: 26px; height: 26px; border-radius: 6px;
  background: var(--field-bg); color: var(--tx70);
  display: grid; place-items: center; flex-shrink: 0;
}
.ws-crumb-dd-ic svg { width: 14px; height: 14px; }
.ws-crumb-dd-label { flex: 1; }
.ws-crumb-dd-badge {
  background: #1f5230; color: #fff;
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  min-width: 22px; text-align: center;
}
[data-theme="dark"] .ws-crumb-dd-badge { background: #1f5230; }
.ws-crumb-dd-kbd {
  font: 500 11px ui-monospace, SFMono-Regular, monospace;
  color: var(--tx55);
  background: var(--field-bg);
  border: 1px solid var(--bd);
  border-radius: 4px;
  padding: 1px 6px;
}
.ws-crumb-logo {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.ws-crumb-logo img { width: 18px; height: 18px; object-fit: contain; display: block; }
/* Invert the black icon in dark mode so it stays visible on dark surfaces */
[data-theme="dark"] .picker-wrap.is-workspace .ws-crumb-logo img { filter: invert(1) brightness(1.4); }
.ws-crumb-title { display: flex; align-items: center; gap: 7px; color: var(--tx); font-weight: 600; font-size: 12.5px; }
.ws-crumb-title svg { width: 14.5px; height: 14.5px; color: var(--tx55); }
.ws-chev { color: var(--tx40); }
/* Plan-tier badge — shares the flat-pill geometry with .ws-btn-flat
   (32px height, 10px radius, 1px border, 12px font, box-sizing) so
   the topbar reads as a single coherent strip. The active/trialing/
   past_due/cancelled colour variants below keep their distinctive
   semantic colour so the plan state still pops at a glance. */
.ws-mode-badge {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px;
  line-height: 30px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--app-bd);
  background: var(--app-dim);
  color: var(--app-strong);
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
  box-sizing: border-box;
}
.ws-mode-badge:empty { display: none; }
.ws-mode-badge.trialing  { background: rgba(252,255,168,.6); color: #6b5700; border-color: rgba(252,255,168,.9); }
.ws-mode-badge.past_due  { background: rgba(224,108,94,.18); color: #8e3324; border-color: rgba(224,108,94,.32); }
.ws-mode-badge.cancelled { background: rgba(26,26,24,.07); color: var(--tx55); border-color: var(--bd); }
.ws-progress-pill {
  margin-left: 9px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3.5px 10px 3.5px 5.5px;
  background: var(--card); border: 1px solid var(--bd);
  border-radius: 999px;
  font-size: 10.5px; font-weight: 500; color: var(--tx70);
  box-shadow: var(--shadow-sm);
  cursor: pointer; font-family: inherit;
}
.ws-progress-pill:hover { border-color: var(--bd2); }
.ws-progress-bar { width: 50.5px; height: 4.5px; border-radius: 999px; background: var(--tx10); overflow: hidden; }
.ws-progress-bar > span { display: block; height: 100%; background: var(--app); border-radius: 999px; transition: width .4s ease; }
.ws-actions { display: flex; justify-content: flex-end; align-items: center; gap: 7px; }

/* Flat pill — matches the FCA v2 / AT v2 .actions .btn style.
   Transparent + 1px grey border at rest, white fill on hover,
   black with white text when clicked / toggled. Locked to the
   same 32px height as the rest of the topbar pills. */
.ws-btn-flat {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px;
  line-height: 30px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--bd);
  border-radius: 10px;
  color: var(--tx);
  font-size: 12px; font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  box-sizing: border-box;
  box-shadow: none;
  transition: background .15s, border-color .15s, color .15s;
}
.ws-btn-flat svg { width: 14px; height: 14px; color: var(--tx55); flex-shrink: 0; transition: color .15s; }
.ws-btn-flat:hover { background: #fff; border-color: var(--bd2); }
[data-theme="dark"] .picker-wrap.is-workspace .ws-btn-flat:hover { background: var(--card); }
.ws-btn-flat.is-active,
.ws-btn-flat:active {
  background: #000;
  color: #fff;
  border-color: #000;
}
.ws-btn-flat.is-active svg,
.ws-btn-flat:active svg { color: #fff; }

.ws-btn-dark {
  background: var(--primary-ink); color: var(--on-primary);
  border: 1px solid var(--primary-ink);
  padding: 7px 11.5px; border-radius: 9px;
  font-family: inherit; font-size: 11.5px; font-weight: 500;
  cursor: pointer; box-shadow: var(--shadow-sm);
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap;
}
.ws-btn-dark svg { width: 13.5px; height: 13.5px; color: rgba(255,255,255,.85); }
[data-theme="dark"] .picker-wrap.is-workspace .ws-btn-dark svg { color: rgba(10,10,10,.65); }
.ws-btn-dark:hover { filter: brightness(1.12); }
.ws-save-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px;
  background: var(--app-dim); color: var(--app-strong);
  font-size: 11px; font-weight: 600;
  border: 1px solid var(--app-bd);
}
.ws-save-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--app); box-shadow: 0 0 0 3px rgba(50,126,88,.18); }
[data-theme="dark"] .picker-wrap.is-workspace .ws-save-pill .dot { box-shadow: 0 0 0 3px rgba(78,168,123,.22); }
.ws-tutorial-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  background: var(--tx); color: var(--card);
  border: 1px solid var(--tx);
  border-radius: 999px;
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  cursor: pointer; font-family: inherit;
}
.ws-tutorial-pill:hover { filter: brightness(1.1); }
.ws-tutorial-pill svg { width: 12px; height: 12px; }

/* Bell */
.ws-bell-wrap { position: relative; }
.ws-dl-wrap   { position: relative; }
.ws-bell-btn {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--card); border: 1px solid var(--bd);
  display: grid; place-items: center;
  cursor: pointer; color: var(--tx70);
  box-shadow: var(--shadow-sm);
  position: relative; font-family: inherit;
}
.ws-bell-btn:hover { border-color: var(--bd2); color: var(--tx); }
.ws-bell-btn svg { width: 14px; height: 14px; }
/* Live-activity indicator — when any /v2/jobs row has status='running'
   the button's solid border is replaced by a spinning ring that runs
   around the whole button. Uses a conic-gradient sweep clipped to a
   ring by the mask-composite trick; the underlying border goes
   transparent so the rotating ring takes its visual place. Coexists
   with the top-right unread badge. */
.ws-bell-btn.is-busy { border-color: transparent; }
.ws-bell-btn.is-busy::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 10px;
  padding: 1.5px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    var(--app-strong) 90deg,
    transparent 200deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: wsRepSpin .8s linear infinite;
  pointer-events: none;
}
.ws-bell-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 15px; height: 15px; border-radius: 999px;
  background: var(--warn); color: #fff;
  font-size: 9px; font-weight: 700;
  display: grid; place-items: center;
  padding: 0 4px;
  border: 2px solid var(--bg-grad-1);
}
.ws-bell-badge:empty { display: none; }
.ws-bell-panel {
  position: absolute; top: calc(100% + 6px); right: 0;
  width: 340px;
  background: var(--card); border: 1px solid var(--bd);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  z-index: 50; display: none; overflow: hidden;
}
.ws-bell-panel.open { display: block; }
.ws-bell-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px;
  border-bottom: 1px solid var(--bd);
  font-size: 12px; font-weight: 600; color: var(--tx);
}
.ws-bell-panel-head a { color: var(--app-strong); font-size: 11px; font-weight: 600; cursor: pointer; text-decoration: none; }
.ws-bell-row {
  display: grid; grid-template-columns: 26px 1fr auto;
  gap: 10px; align-items: flex-start;
  padding: 11px 14px;
  border-bottom: 1px solid var(--bd);
  cursor: pointer; transition: background .12s;
}
.ws-bell-row:last-child { border-bottom: 0; }
.ws-bell-row:hover { background: var(--field-bg); }
.ws-bell-row.unread { background: rgba(50,126,88,.04); }
[data-theme="dark"] .picker-wrap.is-workspace .ws-bell-row.unread { background: rgba(78,168,123,.05); }
.ws-bell-ic {
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--field-bg); border: 1px solid var(--bd);
  display: grid; place-items: center; color: var(--tx55);
}
.ws-bell-ic svg { width: 13px; height: 13px; }
.ws-bell-title { font-size: 12px; font-weight: 600; color: var(--tx); line-height: 1.4; }
.ws-bell-sub { font-size: 11px; color: var(--tx55); margin-top: 2px; line-height: 1.4; }
.ws-bell-time { font-size: 10.5px; color: var(--tx40); white-space: nowrap; margin-top: 2px; }
/* Screen-reader-only utility — used for invisible labels on icon-only
   triggers (filter button, etc.) so AT users hear the context. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap;
  border: 0;
}
/* Loading skeleton — shown by loadDynamicNotifications() while the first
   /v2/notifications fetch is in flight. Reuses wsShimmer keyframe defined
   below in the drafts skeleton block. */
.ws-bell-row.ws-bell-skel { cursor: default; pointer-events: none; }
.ws-bell-row.ws-bell-skel:hover { background: transparent; }
.ws-bell-row.ws-bell-skel .ws-bell-ic,
.ws-bell-row.ws-bell-skel .ws-bell-title,
.ws-bell-row.ws-bell-skel .ws-bell-sub,
.ws-bell-row.ws-bell-skel .ws-bell-time {
  background: linear-gradient(90deg, var(--field-bg) 0%, var(--card) 50%, var(--field-bg) 100%);
  background-size: 200% 100%;
  animation: wsShimmer 1.4s linear infinite;
  border: 0;
}
.ws-bell-row.ws-bell-skel .ws-bell-title { height: 10px; width: 70%; border-radius: 4px; }
.ws-bell-row.ws-bell-skel .ws-bell-sub   { height: 9px; width: 45%; border-radius: 4px; margin-top: 6px; }
.ws-bell-row.ws-bell-skel .ws-bell-time  { height: 9px; width: 28px; border-radius: 4px; }
/* ──── Reports tab inside the bell (Phase A2) ─────────────────────────
   Sits below the panel head as a two-tab strip. The Notifications view
   stays exactly as it was — Reports gets its own view + row class so
   the existing mark-all-read / row-click logic (which scopes to
   .ws-bell-row) doesn't touch report rows. */
.ws-bell-tabs {
  display: flex;
  border-bottom: 1px solid var(--bd);
  background: var(--field-bg);
}
.ws-bell-tab {
  flex: 1; padding: 9px 12px;
  background: transparent; border: 0;
  font-family: inherit; font-size: 11.5px; font-weight: 600;
  color: var(--tx55);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-bottom: 2px solid transparent;
  transition: color .12s, border-color .12s, background .12s;
}
.ws-bell-tab:hover { color: var(--tx); }
.ws-bell-tab.active {
  color: var(--tx);
  border-bottom-color: var(--app-strong);
  background: var(--card);
}
.ws-bell-tab-dot {
  display: none;
  min-width: 14px; height: 14px;
  padding: 0 4px; box-sizing: border-box;
  background: var(--warn); color: #fff;
  font-size: 9px; font-weight: 700; line-height: 14px;
  text-align: center; border-radius: 999px;
}
.ws-bell-tab-dot:not(:empty) { display: inline-block; }
.ws-bell-view { max-height: 360px; overflow-y: auto; }
.ws-bell-view[hidden] { display: none !important; }

.ws-rep-row {
  display: grid; grid-template-columns: 28px 1fr auto;
  gap: 10px; align-items: flex-start;
  padding: 11px 14px;
  border-bottom: 1px solid var(--bd);
}
.ws-rep-row:last-child { border-bottom: 0; }
.ws-rep-row:hover { background: var(--field-bg); }
.ws-rep-ic {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--field-bg); border: 1px solid var(--bd);
  display: grid; place-items: center; color: var(--tx55);
}
.ws-rep-ic svg { width: 13px; height: 13px; }
.ws-rep-ic.is-running  { background: rgba(40,112,196,.10); color: #2870c4; border-color: rgba(40,112,196,.20); }
.ws-rep-ic.is-ready    { background: rgba(44,122,63,.10); color: #2c7a3f; border-color: rgba(44,122,63,.20); }
.ws-rep-ic.is-error    { background: rgba(179,50,43,.10); color: #b3322b; border-color: rgba(179,50,43,.25); }
.ws-rep-ic.is-archived { background: rgba(91,80,170,.10); color: #5b50aa; border-color: rgba(91,80,170,.20); }
/* Dark-mode polish: bump status-icon foregrounds + error text to a
   lighter shade so they read cleanly against the dark surface tones
   (the rgba backgrounds already work on both themes). */
[data-theme="dark"] .ws-rep-ic.is-running  { color: #7cb8ec; background: rgba(79,158,230,.16); border-color: rgba(79,158,230,.28); }
[data-theme="dark"] .ws-rep-ic.is-ready    { color: #87cf99; background: rgba(82,180,108,.16); border-color: rgba(82,180,108,.28); }
[data-theme="dark"] .ws-rep-ic.is-error    { color: #e88a82; background: rgba(208,72,72,.18);  border-color: rgba(208,72,72,.30); }
[data-theme="dark"] .ws-rep-ic.is-archived { color: #b5acdc; background: rgba(140,124,210,.18); border-color: rgba(140,124,210,.28); }
.ws-rep-spin {
  width: 13px; height: 13px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: wsRepSpin .8s linear infinite;
}
@keyframes wsRepSpin { to { transform: rotate(360deg); } }
.ws-rep-meta { min-width: 0; }
.ws-rep-meta.is-clickable { cursor: pointer; }
.ws-rep-meta.is-clickable:hover .ws-rep-title { text-decoration: underline; }
.ws-rep-meta.is-clickable:focus-visible { outline: 2px solid var(--app-bd); outline-offset: 2px; border-radius: 6px; }
.ws-rep-title {
  font-size: 12px; font-weight: 600; color: var(--tx); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ws-rep-sub {
  font-size: 11px; color: var(--tx55); margin-top: 2px; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ws-rep-row.has-error .ws-rep-sub {
  color: #b3322b; white-space: normal;
}
[data-theme="dark"] .ws-rep-row.has-error .ws-rep-sub { color: #e88a82; }
.ws-rep-actions {
  display: flex; flex-direction: row; align-items: center;
  gap: 4px; flex-shrink: 0;
}
.ws-rep-act {
  display: inline-flex; align-items: center; gap: 4px;
  height: 24px; padding: 0 8px;
  background: var(--card); color: var(--tx);
  border: 1px solid var(--bd); border-radius: 7px;
  font-family: inherit; font-size: 11px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.ws-rep-act:hover { background: var(--field-bg); border-color: var(--bd2); }
.ws-rep-act.primary {
  background: var(--app-strong); color: #fff; border-color: var(--app-strong);
}
.ws-rep-act.primary:hover { filter: brightness(1.08); }
.ws-rep-act svg { width: 11px; height: 11px; }
.ws-rep-act.icon-only { width: 24px; padding: 0; justify-content: center; }
.ws-rep-act.danger:hover { background: rgba(179,50,43,.08); border-color: rgba(179,50,43,.40); color: #b3322b; }
[data-theme="dark"] .ws-rep-act.danger:hover { color: #e88a82; }
.ws-rep-act.is-disabled,
.ws-rep-act.is-disabled:hover {
  background: var(--field-bg); color: var(--tx55);
  border-color: var(--bd); cursor: not-allowed; filter: none;
}
.ws-rep-act.is-disabled svg { opacity: .6; }
.ws-rep-lockbadge {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  background: var(--card); color: var(--tx55);
  border: 1px solid var(--bd); border-radius: 4px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
}
.ws-bell-empty {
  padding: 22px 14px; text-align: center;
  font-size: 12px; color: var(--tx55); line-height: 1.5;
}
.ws-bell-rep-foot {
  padding: 8px 14px;
  font-size: 10.5px; color: var(--tx40);
  background: var(--field-bg);
  border-top: 1px solid var(--bd);
  text-align: center;
}

/* Reports tab — Recent reports card. Reuses .ws-rep-row rendering with
   roomier padding so it feels like a full page list rather than a bell
   dropdown. */
.ws-reports-tab-card {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 12px;
  overflow: hidden;
}
.ws-reports-tab-body { display: block; }
.ws-reports-tab-body .ws-rep-row { padding: 14px 18px; gap: 14px; }
.ws-reports-tab-body .ws-rep-title { font-size: 13px; }
.ws-reports-tab-body .ws-rep-sub { font-size: 11.5px; }
.ws-reports-tab-body .ws-bell-empty { padding: 36px 18px; font-size: 12.5px; }
.ws-reports-tab-foot {
  padding: 10px 18px;
  font-size: 11px; color: var(--tx55);
  background: var(--field-bg);
  border-top: 1px solid var(--bd);
}

/* Theme toggle popover */
.ws-theme-wrap { position: relative; }
.ws-theme-btn {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--card); border: 1px solid var(--bd);
  display: grid; place-items: center;
  cursor: pointer; color: var(--tx70);
  box-shadow: var(--shadow-sm); font-family: inherit;
}
.ws-theme-btn:hover { border-color: var(--bd2); color: var(--tx); }
.ws-theme-btn svg { width: 15px; height: 15px; }
.ws-theme-panel {
  position: absolute; top: calc(100% + 6px); right: 0;
  width: 220px;
  background: var(--card); border: 1px solid var(--bd);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  z-index: 50; padding: 5px; display: none;
}
.ws-theme-panel.open { display: block; }
.ws-theme-head {
  padding: 8px 10px 6px;
  font-size: 10.5px; font-weight: 700;
  color: var(--tx55);
  text-transform: uppercase; letter-spacing: .06em;
}
.ws-theme-opt {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  background: transparent; border: 0;
  color: var(--tx); font-size: 12.5px; font-weight: 500;
  cursor: pointer; text-align: left; font-family: inherit;
}
.ws-theme-opt:hover { background: var(--field-bg); }
.ws-theme-opt.active { background: var(--app-dim); color: var(--app-strong); }
.ws-theme-swatch {
  width: 22px; height: 22px; border-radius: 6px;
  display: grid; place-items: center; flex-shrink: 0;
}
.ws-swatch-light { background: linear-gradient(135deg, #f7f5ef, #ffffff); color: #c0573b; border: 1px solid var(--bd); }
.ws-swatch-dark  { background: linear-gradient(135deg, #0e1018, #1a1c24); color: #cdf075; border: 1px solid rgba(255,255,255,.10); }
.ws-swatch-auto  { background: linear-gradient(135deg, #f7f5ef 0%, #f7f5ef 49%, #1a1c24 51%, #1a1c24 100%); color: var(--tx70); border: 1px solid var(--bd); }
.ws-theme-swatch svg { width: 11px; height: 11px; }
.ws-theme-label { font-size: 12.5px; font-weight: 500; }
.ws-theme-sub   { font-size: 10.5px; color: var(--tx55); margin-top: 1px; }
.ws-theme-check { margin-left: auto; color: var(--app); display: none; }
.ws-theme-check svg { width: 13px; height: 13px; }
.ws-theme-opt.active .ws-theme-check { display: block; }

/* ───── Main panel (artifact full-width — Ask Capacoty moved to drawer) ── */
.ws-main { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* CHAT panel — slides out from the sidebar (no overlay, no scrim).
   Drawer sits flush against the sidebar's right edge, matches the
   sidebar's --caw-panel background, and shifts #main-app right by
   --ws-ask-drawer-w when open so content moves with it instead of
   being covered. Width matches the sidebar's expanded state so the
   drawer and the expanded sidebar feel like one continuous rail. */
:root {
  --ws-ask-drawer-w: 440px;
}
.ws-ask-scrim { display: none; }
.ws-ask-drawer {
  position: fixed; top: 0; bottom: 0;
  left: var(--sb-w);
  width: var(--ws-ask-drawer-w);
  background: #ebebeb;
  border-right: 1px solid var(--bd);
  transform: translateX(calc(-100% - var(--sb-w)));
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), left .28s cubic-bezier(.4, 0, .2, 1);
  z-index: 140;
  display: flex; flex-direction: column;
  min-height: 0;
  color: #0e1530;
}
[data-theme="dark"] .ws-ask-drawer { background: #1a1a1a; color: #f1efe8; }
.ws-ask-drawer.open { transform: translateX(0); }
/* When the sidebar expands, slide the drawer along with it so the two
   rails stay flush. */
body:has(.caw-sb.caw-sb-open) .ws-ask-drawer { left: var(--sb-w-expanded); }
/* Push #main-app right by the drawer width when open. Stacks with the
   existing sidebar margin-left shift so the two transitions compose. */
body.ws-ask-open #main-app {
  margin-left: calc(var(--sb-w) + var(--ws-ask-drawer-w));
}
body.ws-ask-open:has(.caw-sb.caw-sb-open) #main-app {
  margin-left: calc(var(--sb-w-expanded) + var(--ws-ask-drawer-w));
}
/* When a v2 tool is open in the overlay (FCA/AT/…), the Ask drawer would
   otherwise render behind it (overlay z-index 200 > drawer 140). Slide the
   overlay right by the drawer width — same shift #main-app gets above — so
   the drawer sits flush beside the tool instead of being hidden or covering
   it. The overlay already transitions `left`, so this animates in step. */
body.ws-ask-open .v2-overlay {
  left: calc(var(--caw-sb-w, 64px) + var(--ws-ask-drawer-w));
}
body.ws-ask-open:has(.caw-sb.caw-sb-open) .v2-overlay {
  left: calc(var(--sb-w-expanded) + var(--ws-ask-drawer-w));
}
/* While a tool overlay is open (z-index 200), lift the drawer above it so it
   stays fully visible as both slide into place — without this the overlay
   paints over the incoming drawer mid-transition. Stays below the sidebar
   (250) and the modals (600+). */
body:has(.v2-overlay.show) .ws-ask-drawer { z-index: 210; }
.ws-ask-drawer-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(14,21,48,.08);
}
[data-theme="dark"] .ws-ask-drawer-head { border-bottom-color: rgba(241,239,232,.10); }
.ws-ask-drawer-head .ws-chat-ic {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--app); color: #fff;
  display: grid; place-items: center;
}
.ws-ask-drawer-head .ws-chat-ic svg { width: 14px; height: 14px; }
.ws-ask-drawer-head .ws-chat-title { flex: 1; font-weight: 600; font-size: 14px; color: var(--tx); }
.ws-ask-drawer-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--field-bg); border: 1px solid var(--bd);
  display: grid; place-items: center; cursor: pointer;
  color: var(--tx70); font-family: inherit;
}
.ws-ask-drawer-close svg { width: 13px; height: 13px; }
.ws-chat { display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 3.5px 14px 7px; position: relative; flex: 1; }
.ws-chat-scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  gap: 12.5px; padding: 21.5px 3.5px 16px 3.5px;
  scroll-behavior: smooth;
  min-width: 0;
}
.ws-chat-scroll-idle { justify-content: center; align-items: center; overflow: hidden; }
.ws-ask-idle {
  display: flex; flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 0 14px 60px;
  max-width: 520px; width: 100%;
}
.ws-composer.ws-composer-hero { margin-top: 20px; }
.ws-ask-hero {
  margin: 0;
  font-size: 26px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.2;
  color: var(--tx); text-align: center;
}
.ws-ask-sub {
  margin: 0;
  font-size: 12px; color: var(--tx55);
  text-align: center;
}
/* Same constraint inside message bubbles — long unbreakable tokens
   in markdown / URLs / source chips would otherwise push the bubble
   wider than the chat column. (Keeps the bubble's max-width: 88%
   rule below; just stops min-content from going past that.) */
.ws-msg-asst { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.ws-msg-user { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.ws-msg-user-row { min-width: 0; }
.ws-src-chip { max-width: 100%; }
.ws-chat-scroll::-webkit-scrollbar { width: 6px; }
.ws-chat-scroll::-webkit-scrollbar-thumb { background: var(--tx10); border-radius: 3px; }
.ws-session-marker {
  align-self: stretch;
  display: flex; align-items: center; gap: 9px;
  margin: 2px 0 3.5px 0;
  font-size: 10.5px; font-weight: 500;
  color: var(--tx40);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.ws-session-marker::before, .ws-session-marker::after { content: ""; flex: 1; height: 1px; background: var(--bd); }
.ws-msg-asst {
  align-self: flex-start; max-width: 88%;
  background: var(--asst-bubble);
  border: 1px solid var(--bd2);
  border-radius: 14.5px 14.5px 14.5px 3.5px;
  padding: 10px 14.5px;
  font-size: 12px; color: var(--asst-text);
  line-height: 1.55;
}
.ws-msg-asst strong { color: var(--tx); font-weight: 600; }
.ws-msg-user-row { align-self: flex-end; display: flex; align-items: flex-end; gap: 7px; max-width: 90%; }
.ws-msg-user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: #d4f564; color: #0a0a0a;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; flex-shrink: 0;
  letter-spacing: -.02em; line-height: 1;
}
.ws-msg-user {
  background: var(--card); border: 1px solid var(--bd2);
  border-radius: 14.5px 14.5px 3.5px 14.5px;
  padding: 10px 14.5px;
  font-size: 12px; color: var(--tx);
  box-shadow: var(--shadow-sm);
  word-wrap: break-word;
}

/* Streaming-state additions */
.ws-msg-asst p { margin: 0 0 8px; }
.ws-msg-asst p:last-of-type { margin-bottom: 0; }
.ws-msg-asst > *:first-child { margin-top: 0; }
.ws-msg-asst > *:last-child { margin-bottom: 0; }
.ws-msg-asst h3, .ws-msg-asst h4, .ws-msg-asst h5 {
  margin: 12px 0 6px; font-weight: 600; color: var(--tx);
  line-height: 1.3; letter-spacing: -0.01em;
}
.ws-msg-asst h3 { font-size: 14px; }
.ws-msg-asst h4 { font-size: 12.5px; }
.ws-msg-asst h5 { font-size: 11.5px; color: var(--tx70); text-transform: uppercase; letter-spacing: 0.04em; }
.ws-msg-asst ul, .ws-msg-asst ol { margin: 0 0 8px; padding-left: 20px; }
.ws-msg-asst li { margin: 2px 0; line-height: 1.5; }
.ws-msg-asst li > p { margin: 0; }
.ws-msg-asst em { font-style: italic; color: var(--tx); }
.ws-msg-asst code {
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 11px; padding: 1px 5px;
  background: var(--field-bg); border: 1px solid var(--bd);
  border-radius: 4px;
}
.ws-msg-asst blockquote {
  margin: 8px 0; padding: 6px 12px;
  border-left: 3px solid var(--app); background: var(--app-dim);
  border-radius: 0 6px 6px 0; color: var(--tx70);
  font-size: 11.5px;
}
.ws-msg-asst blockquote strong { color: var(--app-strong); }
.ws-msg-asst hr {
  border: 0; height: 1px; background: var(--bd2);
  margin: 12px 0;
}
.ws-asst-table {
  width: 100%; border-collapse: collapse;
  margin: 8px 0; font-size: 11.5px;
  border: 1px solid var(--bd2); border-radius: 6px; overflow: hidden;
}
.ws-asst-table th, .ws-asst-table td {
  padding: 6px 10px; text-align: left;
  border-bottom: 1px solid var(--bd2);
  vertical-align: top;
}
.ws-asst-table th {
  background: var(--field-bg); color: var(--tx);
  font-weight: 600; font-size: 11px;
}
.ws-asst-table tr:last-child td { border-bottom: 0; }
.ws-asst-table td { color: var(--tx70); }
.ws-msg-asst.ws-asst-status { font-style: italic; color: var(--tx55); background: transparent; border-style: dashed; }
.ws-msg-asst.ws-asst-warn {
  background: var(--warn-dim);
  border-color: rgba(192,87,59,.30);
  color: var(--warn);
}
[data-theme="dark"] .picker-wrap.is-workspace .ws-msg-asst.ws-asst-warn { color: #f0a78e; }
.ws-cite {
  display: inline-block;
  background: var(--app-dim); color: var(--app-strong);
  font-size: 9.5px; font-weight: 700;
  padding: 0 5px; border-radius: 999px;
  margin: 0 2px;
  min-width: 14px; text-align: center;
  cursor: help;
  border: 1px solid var(--app-bd);
  vertical-align: super;
  line-height: 1.4;
}
.ws-asst-sources {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--bd);
  display: flex; flex-wrap: wrap; gap: 5px;
}
.ws-src-chip {
  display: inline-block;
  font-size: 10px; font-weight: 500;
  background: var(--field-bg);
  color: var(--tx70);
  border: 1px solid var(--bd);
  padding: 2px 7px;
  border-radius: 999px;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Composer */
.ws-composer {
  margin-top: 3.5px; position: relative;
  background: var(--card); border: 1px solid var(--bd);
  border-radius: 16px;
  padding: 11px 11px 9px 14.5px;
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 7px;
}
.ws-composer:focus-within { border-color: var(--app-bd); box-shadow: 0 0 0 3.5px var(--app-dim), var(--shadow-md); }
.ws-composer-input {
  border: 0; outline: none; background: transparent;
  width: 100%; font-family: inherit; font-size: 12.5px;
  color: var(--tx); padding: 5.5px 0; line-height: 1.5;
  resize: none; overflow-y: hidden;
  min-height: 48px; max-height: 130px;
}
.ws-composer-input::placeholder { color: var(--tx40); }
.ws-composer-kbd-hint {
  position: absolute; right: 60px; top: 18px;
  font-size: 10.5px; color: var(--tx40);
  background: var(--field-bg); border: 1px solid var(--bd);
  border-radius: 5px; padding: 1px 7px;
  font-family: ui-monospace, 'JetBrains Mono', Menlo, monospace;
  pointer-events: none; transition: opacity .15s;
}
.ws-composer:focus-within .ws-composer-kbd-hint { opacity: 0; }
.ws-composer-row { display: flex; justify-content: space-between; align-items: center; }
.ws-composer-tools { display: flex; gap: 3.5px; align-items: center; }
.ws-composer-mode {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 5px;
  background: var(--field-bg); border: 1px solid var(--bd);
  border-radius: 999px;
  font-size: 11px; font-weight: 500; color: var(--tx70);
  cursor: pointer; font-family: inherit;
}
.ws-composer-mode:hover { border-color: var(--bd2); }
.ws-composer-mode-ic {
  width: 18px; height: 18px; border-radius: 5px;
  background: var(--app-dim); color: var(--app);
  display: grid; place-items: center;
}
.ws-composer-mode-ic svg { width: 11px; height: 11px; }
.ws-composer-caret { color: var(--tx40); }
.ws-composer-tool {
  width: 27px; height: 27px; border-radius: 7px;
  display: grid; place-items: center;
  color: var(--tx55); cursor: pointer;
  border: 1px solid transparent; background: transparent;
  font-family: inherit;
}
.ws-composer-tool:hover { background: var(--tx10); color: var(--tx); }
.ws-composer-tool svg { width: 14.5px; height: 14.5px; }
.ws-composer-tool.dictate-active { background: var(--app); color: #fff; }
.ws-send {
  width: 30.5px; height: 30.5px; border-radius: 999px;
  background: var(--primary-ink); color: var(--on-primary);
  border: 0; cursor: pointer;
  display: grid; place-items: center;
  transition: transform .08s, background .15s, filter .15s;
  font-family: inherit;
}
.ws-send:hover { filter: brightness(1.15); }
.ws-send:active { transform: scale(.92); }
.ws-send svg { width: 12.5px; height: 12.5px; }
/* Dark theme: drop the lime fill in favour of a subtle outlined chip. */
[data-theme="dark"] .picker-wrap.is-workspace .ws-send {
  background: transparent;
  color: var(--tx);
  border: 1px solid var(--bd2);
}
[data-theme="dark"] .picker-wrap.is-workspace .ws-send:hover {
  background: var(--tx10);
  filter: none;
}

/* ARTIFACT panel (right) */
.ws-artifact-wrap { padding: 0 5.5px 0 5.5px; min-height: 0; display: flex; flex-direction: column; }
.ws-artifact {
  flex: 1; background: var(--card); border: 1px solid var(--bd);
  border-radius: 16px; box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.ws-artifact-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 4px 9px 0;
  background: linear-gradient(180deg, var(--bg-grad-1) 0%, var(--bg-grad-2) 100%);
  gap: 9px; border-bottom: 1px solid var(--bd);
}
.ws-tabs {
  display: flex; gap: 4px;
  overflow-x: auto; flex-wrap: nowrap;
  scrollbar-width: none; flex: 1; min-width: 0;
}
.ws-tabs::-webkit-scrollbar { display: none; }
.ws-tab {
  position: relative;
  border: 1px solid transparent; border-bottom: 0;
  background: transparent;
  padding: 9px 11px 10px;
  font-family: inherit; font-size: 11.5px; font-weight: 500;
  color: var(--tx55); cursor: pointer;
  border-radius: 9px 9px 0 0;
  margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.ws-tab:hover { color: var(--tx); background: rgba(26,26,24,.05); }
[data-theme="dark"] .picker-wrap.is-workspace .ws-tab:hover { background: rgba(255,255,255,.04); }
.ws-tab.active {
  background: var(--card); color: var(--tx); font-weight: 600;
  border-color: var(--bd); border-bottom-color: var(--card);
  box-shadow: 0 -1px 2px rgba(26,26,24,.03);
}
.ws-tab-dot { width: 6.5px; height: 6.5px; border-radius: 50%; background: var(--tx20); }
.ws-tab.ws-tab-done .ws-tab-dot { background: var(--app); }

/* Drafts synced — paired with the "N drafts" count pill inside the
   Continue a draft section heading. Sized to match .ws-sh-status so
   the two pills read as a pair, green status-dot colour kept. */
.ws-sh-left .ws-save-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 600;
  white-space: nowrap;
  box-sizing: border-box;
}
.ws-sh-left .ws-save-pill .dot { width: 6px; height: 6px; flex-shrink: 0; }

/* N reports remaining — placed after the Reports generated tab in
   the workspace tabs strip. Keeps its neutral progress-pill colour. */
.ws-tabs .ws-progress-pill {
  align-self: flex-end;
  height: 22px;
  padding: 0 10px 0 6px;
  border-radius: 999px;
  font-size: 11px; font-weight: 500;
  margin: 0 0 9px 4px;
  white-space: nowrap;
  flex-shrink: 0;
  box-sizing: border-box;
}
.ws-head-right { display: flex; align-items: center; gap: 7px; padding-bottom: 7px; }
.ws-plan-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--app-dim); color: var(--app-strong);
  border: 1px solid var(--app-bd);
  padding: 4.5px 10px 4.5px 7px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.ws-plan-chip:hover { background: rgba(50,126,88,.15); }
[data-theme="dark"] .picker-wrap.is-workspace .ws-plan-chip:hover { background: rgba(78,168,123,.22); }
.ws-plan-chip-bar { width: 44px; height: 4.5px; border-radius: 999px; background: rgba(50,126,88,.18); overflow: hidden; }
.ws-plan-chip-bar > span { display: block; height: 100%; width: 0; background: var(--app); border-radius: 999px; transition: width .4s; }
.ws-artifact-body { overflow-y: auto; flex: 1; padding: 18px 32.5px 32px 32.5px; }
.ws-artifact-body::-webkit-scrollbar { width: 8px; }
.ws-artifact-body::-webkit-scrollbar-thumb { background: var(--tx10); border-radius: 4px; }

/* Views */
.ws-view { display: none; }
.ws-view.active { display: block; animation: wsFadeIn .25s ease-out; }
@keyframes wsFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.ws-body-h1 {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Helvetica,Arial,sans-serif;
  font-weight: 500; font-size: 27px;
  line-height: 1.1; letter-spacing: -0.015em;
  margin: 0 0 3.5px 0;
  display: flex; align-items: center; gap: 11px;
  color: var(--tx);
}
.ws-body-h1 .ws-h1-meta {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Helvetica,Arial,sans-serif;
  font-size: 11px; font-weight: 500;
  color: var(--tx55);
  background: var(--tx10);
  padding: 2.5px 8px; border-radius: 999px;
  margin-left: 3.5px;
}
.ws-body-sub { font-size: 12px; color: var(--tx55); margin: 0 0 20px 0; max-width: 70ch; line-height: 1.55; }
.ws-section { border-top: 1px solid var(--bd); padding: 16px 0; }
.ws-section:first-of-type { border-top: 0; padding-top: 3.5px; }
.ws-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ws-sh-left { display: flex; align-items: center; gap: 9px; }
.ws-sh-left h2 {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Helvetica,Arial,sans-serif;
  font-weight: 500; font-size: 17px; margin: 0;
  color: var(--tx);
}
.ws-sh-status {
  display: inline-flex; align-items: center; gap: 4.5px;
  font-size: 10.5px; font-weight: 500;
  padding: 2px 7px; border-radius: 999px;
}
.ws-sh-status.count { background: var(--tx10); color: var(--tx55); }
.ws-sh-status.done  { background: var(--app-dim); color: var(--app-strong); }
.ws-sh-link {
  font-size: 11px; color: var(--app-strong); font-weight: 600;
  background: none; border: 0; padding: 0;
  cursor: pointer; font-family: inherit;
}
.ws-sh-link:hover { text-decoration: underline; }

/* Search + filter row — search input fills available space, filter
   dropdown anchors to the right. */
.ws-search-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.ws-search-row .ws-draft-search { flex: 1; min-width: 0; margin-bottom: 0; }

/* Filter dropdown */
.ws-filter-dd { position: relative; flex-shrink: 0; }
.ws-filter-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 10px 0 12px;
  background: var(--card); border: 1px solid var(--bd);
  border-radius: 8px;
  font-size: 11.5px; font-weight: 500; color: var(--tx);
  cursor: pointer; font-family: inherit;
  transition: border-color .15s;
}
.ws-filter-trigger:hover { border-color: var(--bd2); }
.ws-filter-dd.open .ws-filter-trigger { border-color: var(--app-bd); }
.ws-filter-caret { width: 12px; height: 12px; color: var(--tx55); transition: transform .15s; }
.ws-filter-dd.open .ws-filter-caret { transform: rotate(180deg); }
.ws-filter-label { white-space: nowrap; }

.ws-filter-menu {
  display: none;
  position: absolute; top: calc(100% + 4px); right: 0;
  min-width: 180px;
  background: var(--card); border: 1px solid var(--bd);
  border-radius: 10px; box-shadow: var(--shadow-md);
  padding: 4px;
  z-index: 50;
  flex-direction: column;
}
.ws-filter-dd.open .ws-filter-menu { display: flex; }
.ws-filter-menu .ws-filter-chip {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: 7px 10px; border-radius: 6px;
  background: transparent; border: 0; color: var(--tx70);
  font-size: 12px; font-weight: 500;
  cursor: pointer; font-family: inherit; text-align: left;
}
.ws-filter-menu .ws-filter-chip:hover { background: var(--tx10); color: var(--tx); }
.ws-filter-menu .ws-filter-chip.active { background: var(--app-dim); color: var(--app-strong); }
.ws-filter-menu .ws-filter-chip .count {
  background: var(--tx10); color: var(--tx55);
  padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600;
}
.ws-filter-menu .ws-filter-chip.active .count {
  background: rgba(50,126,88,.18); color: var(--app-strong);
}

/* Quick-start tool strip (under drafts list) */
.ws-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 7px;
}
.ws-quick-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--card); border: 1px solid var(--bd);
  border-radius: 11px;
  cursor: pointer; font-family: inherit;
  text-align: left;
  transition: border-color .15s, background .12s, box-shadow .15s, transform .12s;
  min-width: 0;
}
.ws-quick-btn:hover { border-color: var(--bd2); background: var(--field-bg); box-shadow: var(--shadow-sm); }
.ws-quick-btn:active { transform: scale(.997); }
.ws-quick-btn.ws-quick-flagship {
  background: linear-gradient(135deg, rgba(50,126,88,.06) 0%, var(--card) 70%);
  border-color: var(--app-bd);
}
[data-theme="dark"] .picker-wrap.is-workspace .ws-quick-btn.ws-quick-flagship {
  background: linear-gradient(135deg, rgba(78,168,123,.10) 0%, var(--card) 70%);
}
.ws-quick-ic {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--field-bg); color: var(--tx70);
  border: 1px solid var(--bd);
  display: grid; place-items: center; flex-shrink: 0;
}
.ws-quick-ic svg { width: 15px; height: 15px; }
.ws-quick-btn.ws-quick-flagship .ws-quick-ic { background: var(--app-dim); color: var(--app-strong); border-color: var(--app-bd); }
.ws-quick-text { display: flex; flex-direction: column; min-width: 0; }
.ws-quick-title { font-size: 12.5px; font-weight: 600; color: var(--tx); line-height: 1.2; }
.ws-quick-sub   { font-size: 10.5px; color: var(--tx55); line-height: 1.3; margin-top: 1px; }

/* Filter chips */
.ws-filter-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; }
.ws-filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 500; color: var(--tx70);
  background: var(--card); border: 1px solid var(--bd);
  padding: 5px 11px; border-radius: 999px;
  cursor: pointer; font-family: inherit;
}
.ws-filter-chip:hover { border-color: var(--bd2); color: var(--tx); }
.ws-filter-chip .count {
  background: var(--tx10); color: var(--tx55);
  font-size: 9.5px; font-weight: 700;
  padding: 0 6px; border-radius: 999px;
  min-width: 16px; text-align: center;
}
.ws-filter-chip.active { background: var(--primary-ink); color: var(--on-primary); border-color: var(--primary-ink); }
.ws-filter-chip.active .count { background: rgba(255,255,255,.14); color: var(--on-primary); }
[data-theme="dark"] .picker-wrap.is-workspace .ws-filter-chip.active .count { background: rgba(0,0,0,.18); }

/* Search */
.ws-draft-search { position: relative; margin-bottom: 9px; }
.ws-draft-search input {
  width: 100%;
  padding: 8px 13px 8px 34px;
  font-family: inherit; font-size: 12.5px;
  color: var(--tx); background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 9px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.ws-draft-search input:focus { border-color: var(--app-bd); box-shadow: 0 0 0 3px var(--app-dim); }
.ws-draft-search input::placeholder { color: var(--tx40); }
.ws-draft-search > svg {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; color: var(--tx40);
}
.ws-search-clear {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--field-bg); border: 0;
  display: none; place-items: center;
  cursor: pointer; color: var(--tx55); font-family: inherit;
}
.ws-search-clear.show { display: grid; }
.ws-search-clear svg { width: 10px; height: 10px; position: static; transform: none; }

/* Draft rows */
.ws-draft-grid { display: grid; grid-template-columns: 1fr; gap: 7px; }
.ws-draft {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 92px 26px 26px;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  background: var(--card); border: 1px solid var(--bd);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, background .12s, box-shadow .15s, transform .12s;
}
.ws-draft:hover { border-color: var(--bd2); background: var(--field-bg); box-shadow: var(--shadow-sm); }
.ws-draft:active { transform: scale(.997); }
.ws-draft.stale { border-color: rgba(192,87,59,.22); background: rgba(192,87,59,.025); }
[data-theme="dark"] .picker-wrap.is-workspace .ws-draft.stale { background: rgba(224,122,90,.06); }
.ws-draft.hidden { display: none; }
.ws-draft-ic { width: 40px; height: 40px; display: grid; place-items: center; }
.ws-draft-ic svg { width: 16px; height: 16px; display: block; }
.ws-draft-body { min-width: 0; }
.ws-draft-title {
  font-size: 13px; font-weight: 600; color: var(--tx);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: flex; align-items: center; gap: 7px;
}
.ws-draft-title .tag {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 1.5px 6px; border-radius: 999px;
  background: var(--tx10); color: var(--tx70); flex-shrink: 0;
}
.ws-draft-title .ready-tag { background: var(--app-dim); color: var(--app-strong); }
.ws-draft-meta {
  font-size: 11px; color: var(--tx55); margin-top: 2px;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.ws-stale-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600;
  background: var(--warn-dim); color: var(--warn);
  border: 1px solid rgba(192,87,59,.22);
  padding: 1px 6px 1px 5px; border-radius: 999px;
}
.ws-stale-badge svg { width: 9px; height: 9px; }
.ws-draft-prog-wrap { display: flex; flex-direction: column; gap: 4px; }
.ws-draft-prog-num {
  font-size: 10.5px; font-weight: 600; color: var(--tx70);
  display: flex; justify-content: space-between;
}
.ws-draft-prog-bar { height: 4px; border-radius: 999px; background: var(--tx10); overflow: hidden; }
.ws-draft-prog-bar > span { display: block; height: 100%; background: var(--app); border-radius: 999px; transition: width .3s; }
.ws-draft-more-wrap { position: relative; }
.ws-draft-more {
  width: 26px; height: 26px; border-radius: 999px;
  background: transparent; border: 1px solid transparent;
  display: grid; place-items: center;
  color: var(--tx40);
  /* Always visible so the OT never has to hunt for the click target.
     Subtle by default, full-strength on hover / focus / when its menu
     is open. Previously opacity:0-by-default + hover-only-fade caused
     users to click into empty space when their cursor strayed. */
  opacity: .65;
  transition: opacity .12s, background .12s, color .12s, border-color .12s;
  cursor: pointer; font-family: inherit;
}
.ws-draft:hover .ws-draft-more,
.ws-draft:focus-within .ws-draft-more,
.ws-draft-more:hover,
.ws-draft-more:focus-visible { opacity: 1; }
.ws-draft-more:hover { background: var(--field-bg); border-color: var(--bd); color: var(--tx); }
.ws-draft-more.open { opacity: 1; background: var(--field-bg); border-color: var(--bd); color: var(--tx); }
.ws-draft-more svg { width: 14px; height: 14px; }
.ws-draft-menu {
  display: none;
  /* Menu lives at the workspace-shell root (detached from any draft row)
     and is positioned via getBoundingClientRect against the more-button
     in openDraftMenu(). position:fixed so it survives parent scroll
     containers; renderDrafts() can rewrite the drafts list without
     destroying the popover. */
  position: fixed;
  min-width: 196px;
  background: var(--card); border: 1px solid var(--bd);
  border-radius: 11px;
  box-shadow: var(--shadow-lg);
  padding: 5px;
  z-index: 80;
}
.ws-draft-menu.open { display: block; }
.ws-draft-menu .item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: 7px;
  font-size: 12px; color: var(--tx); font-weight: 500;
  cursor: pointer;
}
.ws-draft-menu .item:hover { background: var(--field-bg); }
.ws-draft-menu .item.danger { color: var(--warn); }
.ws-draft-menu .item.danger:hover { background: var(--warn-dim); }
.ws-draft-menu .item svg { width: 13px; height: 13px; color: var(--tx55); }
.ws-draft-menu .item.danger svg { color: var(--warn); }
.ws-draft-menu .sep { height: 1px; background: var(--bd); margin: 4px 2px; }
.ws-draft-menu.confirming { min-width: 268px; padding: 10px 11px; }
.ws-draft-menu .confirm-row {
  display: flex; flex-direction: column; gap: 9px;
  font-size: 12px; color: var(--tx); font-weight: 500;
  line-height: 1.4;
}
.ws-draft-menu .confirm-row .copy strong { color: var(--warn); font-weight: 600; }
.ws-draft-menu .confirm-row .actions-row { display: flex; gap: 7px; justify-content: flex-end; }
.ws-draft-menu .confirm-row button {
  padding: 6px 13px;
  background: var(--warn); color: #fff;
  border: 0; border-radius: 7px;
  font-size: 11.5px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.ws-draft-menu .confirm-row button:hover { filter: brightness(.95); }
.ws-draft-menu .confirm-row button.cancel {
  background: transparent;
  color: var(--tx70);
  border: 1px solid var(--bd);
}
.ws-draft-menu .confirm-row button.cancel:hover { background: var(--field-bg); }
.ws-draft-go {
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--field-bg); border: 1px solid var(--bd);
  display: grid; place-items: center;
  color: var(--tx55);
  transition: background .12s, color .12s, border-color .12s;
}
.ws-draft:hover .ws-draft-go { background: var(--card); color: var(--tx); border-color: var(--bd2); }
.ws-draft-go svg { width: 12px; height: 12px; }

/* Loading skeleton (drafts) */
.ws-draft-loading { display: flex; flex-direction: column; gap: 7px; }
.ws-draft-skel {
  height: 66px; border-radius: 12px;
  background: linear-gradient(90deg, var(--card) 0%, var(--field-bg) 50%, var(--card) 100%);
  background-size: 200% 100%;
  animation: wsShimmer 1.4s linear infinite;
  border: 1px solid var(--bd);
}
@keyframes wsShimmer { to { background-position: -200% 0; } }

/* Empty state */
.ws-empty-state {
  display: none;
  text-align: center;
  padding: 36px 24px 30px;
  background: linear-gradient(180deg, var(--field-bg) 0%, var(--card) 100%);
  border: 1px dashed var(--bd2);
  border-radius: 14px;
}
.ws-empty-state.show { display: block; }
.ws-empty-ic {
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--bd);
  display: grid; place-items: center;
  margin: 0 auto 14px;
  color: var(--app);
  box-shadow: var(--shadow-sm);
}
.ws-empty-ic svg { width: 24px; height: 24px; }
.ws-empty-state h3 {
  margin: 0 0 6px;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Helvetica,Arial,sans-serif; font-weight: 600; font-size: 16px;
  color: var(--tx);
}
.ws-empty-state p {
  margin: 0 auto 16px;
  font-size: 12.5px; color: var(--tx55);
  max-width: 42ch; line-height: 1.55;
}
.ws-empty-cta-row { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ws-empty-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  background: var(--primary-ink); color: var(--on-primary);
  border: 1px solid var(--primary-ink);
  border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  font-family: inherit;
}
.ws-empty-cta:hover { filter: brightness(1.12); }
.ws-empty-cta.secondary { background: var(--card); color: var(--tx); border-color: var(--bd); }
.ws-empty-cta.secondary:hover { background: var(--field-bg); border-color: var(--bd2); }
.ws-empty-cta svg { width: 12px; height: 12px; }

/* Tool catalogue — single-column list rows. Each .ws-tool is a
   horizontal card: head + desc stack on the left, time chip + CTA
   pin to the right. Tick-mark inclusions (.ws-tool-bullets) are
   hidden in this layout to keep rows compact. */
.ws-tool-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.ws-tool {
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 14px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 18px;
  align-items: center;
  transition: border-color .15s, box-shadow .2s, transform .15s;
  position: relative; cursor: pointer;
}
.ws-tool:hover { border-color: var(--bd2); box-shadow: var(--shadow-md); }
.ws-tool.flagship {
  background: linear-gradient(165deg, rgba(50,126,88,.045) 0%, var(--card) 55%);
  border-color: var(--app-bd);
}
[data-theme="dark"] .picker-wrap.is-workspace .ws-tool.flagship { background: linear-gradient(165deg, rgba(78,168,123,.08) 0%, var(--card) 55%); }
.ws-tool.soon { opacity: .85; cursor: default; }
.ws-tool-bullets { display: none; }
.ws-tool > .ws-tool-head { grid-column: 1; grid-row: 1; }
.ws-tool > .ws-tool-desc { grid-column: 1; grid-row: 2; }
.ws-tool > .ws-tool-foot {
  grid-column: 2; grid-row: 1 / span 2;
  flex-direction: column; align-items: flex-end;
  justify-content: center; gap: 8px;
  margin-top: 0; align-self: center;
}
.ws-tool-head { display: grid; grid-template-columns: 38px 1fr auto; gap: 11px; align-items: center; }
.ws-tool-ic {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--field-bg); color: var(--tx70);
  border: 1px solid var(--bd);
  display: grid; place-items: center;
}
.ws-tool-ic svg { width: 17px; height: 17px; }
.ws-tool-title { font-size: 14.5px; font-weight: 600; color: var(--tx); letter-spacing: -.008em; }
.ws-tool-sub   { font-size: 10.5px; color: var(--tx55); margin-top: 1px; font-weight: 500; }
.ws-tool-pills { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.ws-tool-pill {
  font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px;
  background: var(--tx10); color: var(--tx70);
  white-space: nowrap;
}
.ws-tool-pill.new  { background: var(--app-dim); color: var(--app-strong); }
.ws-tool-pill.req  { background: var(--warn-dim); color: var(--warn); }
.ws-tool-pill.soon { background: var(--tx10); color: var(--tx55); }
.ws-tool-desc { font-size: 12px; color: var(--tx70); line-height: 1.55; margin: 0; }
.ws-tool-bullets {
  display: flex; flex-direction: column; gap: 4px;
  padding: 9px 11px;
  background: var(--field-bg);
  border-radius: 9px; border: 1px solid var(--bd);
}
.ws-bullet {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 11.5px; color: var(--tx70); line-height: 1.45;
}
.ws-bullet svg { width: 11px; height: 11px; color: var(--app); flex-shrink: 0; margin-top: 3px; }
.ws-tool-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.ws-time-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: var(--tx55); }
.ws-time-chip svg { width: 11px; height: 11px; }
.ws-tool-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: var(--primary-ink); color: var(--on-primary);
  border: 1px solid var(--primary-ink);
  border-radius: 9px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .08s, filter .15s;
  font-family: inherit;
}
.ws-tool-cta:hover { filter: brightness(1.12); }
.ws-tool-cta:active { transform: translateY(1px); }
.ws-tool-cta svg { width: 12px; height: 12px; }
.ws-tool-cta.secondary { background: var(--card); color: var(--tx); border-color: var(--bd2); }
.ws-tool-cta.secondary:hover { background: var(--field-bg); border-color: var(--tx40); }
.ws-tool-cta.secondary svg { color: var(--tx55); }
.ws-tool.flagship .ws-tool-cta { background: var(--app); border-color: var(--app); }
.ws-tool.flagship .ws-tool-cta:hover { background: var(--app-strong); border-color: var(--app-strong); }

/* Catalogue hero */
.ws-cat-hero {
  background: linear-gradient(140deg, rgba(50,126,88,.08) 0%, var(--card) 60%);
  border: 1px solid var(--app-bd);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 14px;
}
[data-theme="dark"] .picker-wrap.is-workspace .ws-cat-hero { background: linear-gradient(140deg, rgba(78,168,123,.12) 0%, var(--card) 60%); }
.ws-cat-hero-ic {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--app); color: #fff;
  display: grid; place-items: center; flex-shrink: 0;
}
.ws-cat-hero-ic svg { width: 18px; height: 18px; }
.ws-cat-hero-title { font-size: 13.5px; font-weight: 600; color: var(--tx); }
.ws-cat-hero-sub { font-size: 11.5px; color: var(--tx70); margin-top: 2px; line-height: 1.5; }

/* Reports / plan usage row */
.ws-reports-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px; align-items: center;
  padding: 16px 18px;
  background: var(--card); border: 1px solid var(--bd);
  border-radius: 12px;
}
.ws-reports-num { font-size: 32px; font-weight: 600; letter-spacing: -.02em; line-height: 1; color: var(--tx); }
.ws-reports-of  { color: var(--tx55); font-size: 18px; font-weight: 500; margin-left: 2px; }
.ws-reports-mid .ws-reports-label { font-size: 11.5px; color: var(--tx55); margin-bottom: 5px; }
.ws-reports-bar { height: 6px; border-radius: 999px; background: var(--tx10); overflow: hidden; }
.ws-reports-bar > span { display: block; height: 100%; background: var(--app); border-radius: 999px; transition: width .4s; }
.ws-reports-meta { font-size: 11px; color: var(--tx55); margin-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; }
.ws-reports-meta strong { color: var(--tx70); font-weight: 600; }
.ws-reports-cta {
  font-size: 11px; font-weight: 600; color: var(--app-strong);
  background: var(--app-dim); border: 1px solid var(--app-bd);
  padding: 6px 12px; border-radius: 999px;
  cursor: pointer; font-family: inherit;
}
.ws-reports-cta:hover { background: rgba(50,126,88,.16); }
[data-theme="dark"] .picker-wrap.is-workspace .ws-reports-cta:hover { background: rgba(78,168,123,.22); }

/* Coming-soon card (reports list placeholder) */
.ws-coming-soon-card {
  text-align: center;
  padding: 32px 24px 28px;
  background: linear-gradient(180deg, var(--field-bg) 0%, var(--card) 100%);
  border: 1px dashed var(--bd2);
  border-radius: 14px;
}
.ws-coming-soon-ic {
  width: 52px; height: 52px; border-radius: 13px;
  background: var(--card); border: 1px solid var(--bd);
  display: grid; place-items: center;
  margin: 0 auto 14px; color: var(--app);
  box-shadow: var(--shadow-sm);
}
.ws-coming-soon-card h3 {
  margin: 0 0 6px;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Helvetica,Arial,sans-serif; font-weight: 600; font-size: 15px;
  color: var(--tx);
}
.ws-coming-soon-card p {
  margin: 0 auto 14px;
  font-size: 12.5px; color: var(--tx55);
  max-width: 52ch; line-height: 1.55;
}

/* Keyboard shortcuts modal — triggered by the ⌨ button next to the bell. */
.ws-kbd-modal {
  position: fixed; inset: 0; z-index: 500;
  display: none; align-items: center; justify-content: center;
  background: rgba(10,10,10,.42); backdrop-filter: blur(4px);
}
.ws-kbd-modal.open { display: flex; }
.ws-kbd-modal-card {
  background: var(--card); border: 1px solid var(--bd);
  border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.18);
  width: min(92vw, 460px);
  max-height: 86vh; overflow-y: auto;
  padding: 22px 24px 24px;
  font-family: inherit;
  color: var(--tx);
}
.ws-kbd-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.ws-kbd-modal-title {
  font-size: 17px; font-weight: 600; color: var(--tx);
  letter-spacing: -0.01em;
}
.ws-kbd-modal-close {
  width: 28px; height: 28px; border-radius: 7px;
  border: 0; background: transparent; color: var(--tx55);
  font-size: 22px; line-height: 1; cursor: pointer;
  font-family: inherit;
}
.ws-kbd-modal-close:hover { background: var(--tx10); color: var(--tx); }
.ws-kbd-modal-body { display: flex; flex-direction: column; gap: 4px; }
.ws-kbd-row {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--bd2);
}
.ws-kbd-row:last-child { border-bottom: 0; }
.ws-kbd-keys {
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 110px; flex-shrink: 0;
}
.ws-kbd-key {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; padding: 0 8px;
  background: var(--field-bg); border: 1px solid var(--bd);
  border-bottom-width: 2px;
  border-radius: 6px;
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 13px; font-weight: 600; color: var(--tx);
}
.ws-kbd-then { font-size: 11.5px; color: var(--tx55); font-weight: 500; }
.ws-kbd-desc { font-size: 14px; color: var(--tx); line-height: 1.4; }

/* Dark-theme tokens for the shortcuts modal. Workspace dark tokens
   are scoped to .picker-wrap.is-workspace; this modal lives at body
   level (so it can float above everything), so we redefine the
   tokens it consumes here. Values mirror the dark workspace block
   above. */
[data-theme="dark"] .ws-kbd-modal {
  --card: #242424;
  --bd: rgba(255,255,255,.08);
  --bd2: rgba(255,255,255,.14);
  --tx: #f1efe8;
  --tx55: rgba(241,239,232,.55);
  --tx10: rgba(241,239,232,.08);
  --field-bg: #1f1f1f;
}
[data-theme="dark"] .ws-kbd-modal-card { box-shadow: 0 24px 60px rgba(0,0,0,.50); }

/* Keyboard shortcuts footer (legacy — removed from markup; styles kept
   in case any other surface uses it) */
.ws-kbd-foot {
  margin-top: 22px;
  padding: 11px 14px;
  border-top: 1px dashed var(--bd);
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 11px; color: var(--tx55);
}
.ws-kbd-foot strong { color: var(--tx70); font-weight: 600; }
.ws-kbd {
  display: inline-flex; align-items: center; gap: 2px;
  font-family: ui-monospace, 'JetBrains Mono', Menlo, monospace;
  font-size: 10px; color: var(--tx70);
  background: var(--card); border: 1px solid var(--bd);
  border-radius: 4px; padding: 1px 5px;
  box-shadow: 0 1px 0 var(--bd2);
}
.ws-kbd-pair { display: inline-flex; align-items: center; gap: 5px; }

/* ───── TUTORIAL ────────────────────────────────────────── */
.ws-tut-root { position: fixed; inset: 0; z-index: 9000; display: none; }
.ws-tut-root.active { display: block; }
/* Blocker is always dark; clip-path cuts a hole over the spotlight target.
   Solves the brittle "9999px box-shadow" technique that didn't darken
   reliably across stacking contexts. */
.ws-tut-blocker {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.72);
  cursor: not-allowed;
  transition: clip-path .42s cubic-bezier(.4,0,.2,1), -webkit-clip-path .42s cubic-bezier(.4,0,.2,1);
}
.ws-tut-spotlight {
  position: fixed;
  border-radius: 12px;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.85),
    0 0 0 4px rgba(0,0,0,0.35),
    0 0 36px 4px rgba(255,255,255,0.18);
  transition: top .42s cubic-bezier(.4,0,.2,1), left .42s cubic-bezier(.4,0,.2,1), width .42s cubic-bezier(.4,0,.2,1), height .42s cubic-bezier(.4,0,.2,1);
}
.ws-tut-spotlight::after {
  content: ''; position: absolute; inset: -4px;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.55);
  animation: wsTutPulse 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes wsTutPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
[data-theme="dark"] .ws-tut-blocker { background: rgba(0,0,0,0.78); }
[data-theme="dark"] .ws-tut-spotlight {
  box-shadow:
    inset 0 0 0 2px rgba(205,240,117,0.85),
    0 0 0 4px rgba(0,0,0,0.45),
    0 0 36px 4px rgba(205,240,117,0.20);
}
.ws-tut-card {
  position: fixed; width: 410px;
  max-width: calc(100vw - 28px);
  background: #fff; border: 1px solid #000;
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.22), 0 6px 14px rgba(0,0,0,0.08);
  padding: 22px 24px 20px;
  color: #000;
  transition: top .42s cubic-bezier(.4,0,.2,1), left .42s cubic-bezier(.4,0,.2,1);
  pointer-events: auto;
  z-index: 9100;
}
.ws-tut-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ws-tut-step  { font-size: 11px; font-weight: 700; color: #000; text-transform: uppercase; letter-spacing: .08em; }
.ws-tut-chip  { padding: 3px 9px; border-radius: 999px; background: #000; color: #fff; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.ws-tut-title { font-size: 18px; font-weight: 600; margin: 4px 0 10px; line-height: 1.3; color: #000; letter-spacing: -0.01em; }
.ws-tut-body  { font-size: 13px; line-height: 1.6; color: #333; margin: 0 0 18px; }
.ws-tut-body p { margin: 0 0 10px; }
.ws-tut-body p:last-of-type { margin-bottom: 0; }
.ws-tut-body strong { color: #000; font-weight: 600; }
.ws-tut-priv-line {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; margin: 12px 0 0;
  background: #f4f4f4; border: 1px solid #000; color: #000;
  border-radius: 10px;
  font-size: 12px; font-weight: 500; line-height: 1.45;
}
.ws-tut-priv-line svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }
.ws-tut-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ws-tut-dots { display: inline-flex; gap: 6px; }
.ws-tut-dot { width: 7px; height: 7px; border-radius: 50%; background: #d4d4d4; transition: transform .2s, background .2s; }
.ws-tut-dot.done    { background: #000; }
.ws-tut-dot.current { background: #000; transform: scale(1.35); }
.ws-tut-skip {
  background: none; border: 0; color: #666;
  font-size: 11.5px; font-weight: 500;
  cursor: pointer; padding: 6px 4px; font-family: inherit;
}
.ws-tut-skip:hover { color: #000; }
.ws-tut-next {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: 11px;
  background: #000; color: #fff; border: 1px solid #000;
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.22);
  transition: background .15s, color .15s, border-color .15s, transform .08s;
  font-family: inherit;
}
.ws-tut-next:hover  { background: #e8e8e8; color: #000; border-color: #d4d4d4; }
.ws-tut-next:active { transform: translateY(1px); }
.ws-tut-next svg    { width: 15px; height: 15px; }
.ws-tut-arrow {
  position: absolute; width: 14px; height: 14px;
  background: #fff; border: 1px solid #000;
  transform: rotate(45deg);
}
.ws-tut-card[data-side="bottom"] .ws-tut-arrow { top: -8px; left: 32px; border-right: 0; border-bottom: 0; }
.ws-tut-card[data-side="top"] .ws-tut-arrow    { bottom: -8px; left: 32px; border-left: 0; border-top: 0; }
.ws-tut-card[data-side="left"] .ws-tut-arrow   { right: -8px; top: 28px; border-left: 0; border-bottom: 0; }
.ws-tut-card[data-side="right"] .ws-tut-arrow  { left: -8px; top: 28px; border-right: 0; border-top: 0; }
.ws-tut-card[data-side="center"] .ws-tut-arrow { display: none; }
.ws-tut-card[data-side="center"] { width: 480px; padding: 32px 34px 26px; }
.ws-tut-card[data-side="center"] .ws-tut-title { font-size: 24px; margin: 12px 0 12px; }
.ws-tut-card[data-side="center"] .ws-tut-body  { font-size: 13.5px; }
[data-theme="dark"] .ws-tut-card { background: #1a1c24; border-color: #cdf075; color: var(--tx); box-shadow: 0 18px 48px rgba(0,0,0,.55), 0 6px 14px rgba(0,0,0,.30); }
[data-theme="dark"] .ws-tut-step,
[data-theme="dark"] .ws-tut-title { color: var(--tx); }
[data-theme="dark"] .ws-tut-body  { color: rgba(241,239,232,.78); }
[data-theme="dark"] .ws-tut-body strong { color: #fff; }
[data-theme="dark"] .ws-tut-chip { background: #cdf075; color: #0a0a0a; }
[data-theme="dark"] .ws-tut-priv-line { background: rgba(255,255,255,.05); border-color: rgba(205,240,117,.45); color: var(--tx); }
[data-theme="dark"] .ws-tut-skip { color: rgba(241,239,232,.55); }
[data-theme="dark"] .ws-tut-skip:hover { color: var(--tx); }
[data-theme="dark"] .ws-tut-next { background: #cdf075; color: #0a0a0a; border-color: #cdf075; }
[data-theme="dark"] .ws-tut-next:hover { filter: brightness(1.10); }
[data-theme="dark"] .ws-tut-dot { background: rgba(241,239,232,.22); }
[data-theme="dark"] .ws-tut-dot.done,
[data-theme="dark"] .ws-tut-dot.current { background: #cdf075; }
[data-theme="dark"] .ws-tut-arrow { background: #1a1c24; border-color: #cdf075; }

/* Toast */
.ws-toast-wrap {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 8000; display: flex; flex-direction: column; gap: 7px;
  align-items: center; pointer-events: none;
}
.ws-toast {
  background: #1a1a18; color: #fff;
  font-size: 12px; font-weight: 500;
  padding: 9px 14px; border-radius: 999px;
  box-shadow: var(--shadow-lg);
  display: inline-flex; align-items: center; gap: 8px;
  pointer-events: auto;
  animation: wsToastIn .25s ease-out;
}
.ws-toast svg { width: 13px; height: 13px; color: #cdf075; }
@keyframes wsToastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Mobile FAB */
.ws-fab-ask {
  display: none;
  position: fixed; right: 16px; bottom: 18px;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--app); color: #fff;
  border: 0; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.10);
  z-index: 600;
  align-items: center; justify-content: center;
  transition: transform .15s, filter .15s;
  font-family: inherit;
}
.ws-fab-ask:hover { filter: brightness(1.05); }
.ws-fab-ask:active { transform: scale(.95); }
.ws-fab-ask.hidden { display: none; }
.ws-fab-ask svg { width: 22px; height: 22px; }
.ws-fab-pulse {
  position: absolute; top: 8px; right: 8px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #cdf075;
  box-shadow: 0 0 0 3px var(--app);
}

/* ───── Responsive ──────────────────────────────────────── */
@media (max-width: 1080px) {
  :root { --ws-ask-drawer-w: 320px; }
}

@media (max-width: 900px) {
  .ws-shell { height: auto; min-height: 100vh; max-height: none; padding: 10px 12px 100px 12px; gap: 10px; overflow: visible; }
  /* Collapse the topbar grid back to a single wrap row on mobile. */
  .ws-topbar { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0; align-items: center; }
  .ws-topbar-half-left, .ws-topbar-half-right { display: contents; }
  .ws-crumb-logo { width: 26px; height: 26px; }
  .ws-crumb-logo img { width: 22px; height: 22px; }
  .ws-chev, .ws-crumb-title svg { display: none; }
  .ws-crumb-title { font-size: 13px; }
  .ws-mode-badge, .ws-progress-pill, .ws-save-pill, .ws-tutorial-pill, #ws-tut-open { display: none; }
  /* On mobile the sidebar is hidden, so the drawer covers the page. */
  .ws-ask-drawer { left: 0; width: 100vw; border-right: 0; }
  body.ws-ask-open #main-app,
  body.ws-ask-open:has(.caw-sb.caw-sb-open) #main-app { margin-left: 0; }
  .ws-artifact-wrap { padding: 0; }
  .ws-artifact { min-height: calc(100vh - 100px); border-radius: 14px; }
  .ws-artifact-head { padding: 4px 6px 0; }
  .ws-tab { font-size: 12px; padding: 9px 10px 10px; }
  .ws-tab-badge { font-size: 9px; }
  .ws-plan-chip { font-size: 10.5px; padding: 4px 9px 4px 6px; }
  .ws-plan-chip-bar { width: 36px; }
  .ws-artifact-body { padding: 14px 16px 24px; }
  .ws-body-h1 { font-size: 22px; flex-wrap: wrap; }
  .ws-draft {
    grid-template-columns: 36px 1fr 26px 26px;
    grid-template-rows: auto auto;
    grid-template-areas: "ic title title more" "ic prog prog go";
    gap: 8px 10px;
  }
  .ws-draft-ic { grid-area: ic; width: 36px; height: 36px; }
  .ws-draft-body { grid-area: title; }
  .ws-draft-prog-wrap { grid-area: prog; padding-top: 2px; }
  .ws-draft-more-wrap { grid-area: more; align-self: start; }
  .ws-draft-go { grid-area: go; align-self: start; }
  .ws-tool-grid { grid-template-columns: 1fr; }
  .ws-tool { padding: 14px 16px 13px; }
  .ws-tool-bullets { padding: 8px 10px; }
  .ws-fab-ask { display: inline-flex; }
}

@media (max-width: 480px) {
  .ws-shell { padding: 8px 10px 100px 10px; }
  .ws-tab { font-size: 11.5px; padding: 8px 8px 9px; }
  .ws-tab-badge { min-width: 14px; height: 14px; font-size: 9px; }
  .ws-body-h1 { font-size: 20px; }
  .ws-body-h1 .ws-h1-meta { font-size: 10.5px; }
  .ws-filter-row { gap: 5px; }
  .ws-filter-chip { padding: 4px 9px; font-size: 10.5px; }
  .ws-draft { padding: 10px 11px; }
  .ws-draft-title { font-size: 12.5px; }
  .ws-draft-title .tag { font-size: 9px; padding: 1px 5px; }
  .ws-tool-head { grid-template-columns: 34px 1fr; }
  .ws-tool-pills { grid-column: 1 / -1; justify-content: flex-start; margin-top: 4px; }
  .ws-tool-title { font-size: 13.5px; }
  .ws-tool-foot { flex-wrap: wrap; gap: 8px; }
  .ws-tool-cta { padding: 7px 12px; }
  .ws-reports-num { font-size: 26px; }
  .ws-reports-of { font-size: 15px; }
  .ws-reports-row { grid-template-columns: 1fr; gap: 10px; }
  .ws-reports-row .ws-reports-cta { justify-self: flex-start; }
  .ws-kbd-foot { font-size: 10.5px; gap: 9px; }
}

/* When the workspace shell is showing, override the production
   .picker-wrap mobile-padding rule (line 2165) so it doesn't claw back
   the full-bleed layout. The shell handles its own padding internally. */
@media (max-width: 767px) {
  .picker-wrap.is-workspace { padding: 0 !important; }
}

/* ════ block 2 — line 6709-6830 in legacy index.html ════ */

  .v2-overlay {
    position: fixed;
    /* Phase 1 of persistent-sidebar rollout: leave the workspace sidebar's
       resting width (64px, see sidebar.js :root --caw-sb-w) on the left so
       sidebar nav stays visible and clickable while the v2 iframe is open.
       The sidebar's hover-expand state used to paint OVER the overlay with
       a drop shadow; now we ALSO push the overlay right so the v2 tool's
       content stays fully visible while the user navigates the sidebar.
       Mirrors #main-app's :has() shift higher up in this file. */
    top: 0; right: 0; bottom: 0;
    left: var(--caw-sb-w, 64px);
    background: var(--bg, #fbfaf6);
    z-index: 200;
    display: none;
    flex-direction: column;
    transition: left .28s cubic-bezier(.4, 0, .2, 1);
  }
  /* Shift the v2 overlay right alongside #main-app when the sidebar opens. */
  body:has(.caw-sb.caw-sb-open) .v2-overlay {
    left: var(--sb-w-expanded);
  }
  /* Mobile: sidebar.js hides .caw-sb at <768px (display: none) and shows a
     drawer instead. The 64px left-gap on .v2-overlay was therefore showing
     the workspace tile picker through the empty column on phones — exactly
     the bug visible in the mobile screenshot. Reclaim the full viewport
     width on mobile so the v2 iframe sits flush against the left edge. */
  @media (max-width: 767px) {
    .v2-overlay { left: 0 !important; }
  }
  /* Sidebar resting z-index (150 in sidebar.js) sits below this overlay,
     which is fine for the 64px resting column on the left — that column
     is uncovered. But the hover-expand state widens the sidebar to 280px,
     which would slide UNDER the overlay without this bump. */
  .caw-sb { z-index: 250 !important; }
  /* …but when the user-menu popup is open, the sidebar (and its
     position:fixed .caw-user-dropdown descendant) must rise above the
     account-modal backdrop at z-index 499 — otherwise the backdrop's
     backdrop-filter: blur(10px) paints in front of the dropdown and
     blurs the modal itself along with the rest of the app. sidebar.js
     already declares this rule; the !important above stomps it, so we
     restore it here with matching importance. */
  .caw-sb:has(.caw-user-menu-wrap.open) { z-index: 501 !important; }
  .v2-overlay.show { display: flex; }
  /* Overlay header hidden so the v2 tool fills the viewport edge-to-edge.
     Navigation back to the workspace lives in the persistent left sidebar
     once the iframe overlay leaves room for it (see the planning notes
     on this commit). The legacy head markup stays in place so existing
     JS that updates chip/name/meta still finds the nodes. */
  .v2-overlay-head { display: none; }
  .v2-overlay-head .v2-back {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent; border: 1px solid var(--bd, rgba(14,21,48,.10));
    border-radius: 10px;
    padding: 7px 12px;
    font-family: inherit; font-size: 13px; font-weight: 500;
    color: var(--tx, #0e1530); cursor: pointer;
  }
  .v2-overlay-head .v2-back:hover { border-color: var(--bd2, rgba(14,21,48,.22)); }
  .v2-overlay-head .v2-back svg { width: 14px; height: 14px; }
  .v2-overlay-head .v2-tool-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600;
    color: var(--tx, #0e1530);
  }
  .v2-overlay-head .v2-tool-label .chip {
    width: 22px; height: 22px; border-radius: 6px;
    background: var(--plan-green, #327e58); color: #fff;
    display: grid; place-items: center;
    font-weight: 700; font-size: 12px;
  }
  .v2-overlay-head .v2-tool-label .badge {
    margin-left: 6px;
    padding: 2px 8px; background: rgba(109,76,176,.10);
    color: #6d4cb0; border-radius: 999px;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .v2-overlay-head .v2-meta {
    flex: 1;
    text-align: center;
    font-size: 12px; color: var(--tx60, rgba(14,21,48,.62));
  }
  .v2-overlay-iframe {
    flex: 1;
    border: 0;
    width: 100%;
    height: 100%;
    background: transparent;
  }
  .v2-overlay-loading {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(251,250,246,.8);
    pointer-events: none;
    transition: opacity .25s;
  }
  .v2-overlay-loading.gone { opacity: 0; }
  .v2-overlay-loading .ld {
    background: #fff;
    border: 1px solid var(--bd, rgba(14,21,48,.10));
    border-radius: 12px;
    padding: 18px 22px;
    display: inline-flex; align-items: center; gap: 12px;
    font-size: 13.5px; color: var(--tx60, rgba(14,21,48,.62));
    box-shadow: 0 4px 24px rgba(0,0,0,.06);
  }
  .v2-overlay-loading .spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(50,126,88,.20);
    border-top-color: #327e58;
    border-radius: 50%;
    animation: v2spin .7s linear infinite;
  }
  @keyframes v2spin { to { transform: rotate(360deg); } }

  /* ─── Drop-shadow removal ─────────────────────────────────────
     Strip every drop-shadow across the workspace surfaces. The
     :not chain excludes focus / focus-visible / focus-within so
     elements that use box-shadow as a focus ring keep their
     accessibility indicator. Hover shadows are stripped too —
     they read as elevation, which the brief says to remove. */
  *:not(:focus):not(:focus-visible):not(:focus-within) { box-shadow: none !important; }

/* ════════════════════════════════════════════════════════════════════
   H2: classes replacing former inline style="" attributes that hub.js
   injected via innerHTML (so the hub can drop 'unsafe-inline' from
   style-src). Dynamic values (e.g. progress-bar width) are set via
   CSSOM in hub.js, which CSP always permits.
   ════════════════════════════════════════════════════════════════════ */
.hub-forgot-success { text-align: center; padding: 24px 0; font-size: 13px; color: var(--g); font-weight: 500; }
.hub-v2-err         { color: #c0573b; }
.hub-bell-empty-sub { opacity: .7; font-size: 11px; }
.hub-linkbtn        { background: transparent; border: 0; color: #327e58; text-decoration: underline; cursor: pointer; font: inherit; }

/* ════════════════════════════════════════════════════════════════════
   H2: utility classes replacing index.html inline style="" attributes
   (so the hub can drop unsafe-inline from style-src). Auto-generated,
   verbatim — one class per distinct former style value. Appended last so
   class-vs-class specificity ties resolve in their favour.
   ════════════════════════════════════════════════════════════════════ */
/* hub-hidden: initial display:none for JS-revealed elements (planBarWrap). No !important so CSSOM inline display can still override. */
.hub-hidden { display: none; }

.hubu1 { display:none; }
.hubu2 { font-size:11.5px;color:rgba(255,255,255,.42); }
.hubu3 { margin-top:4px; }
.hubu4 { color:rgba(255,255,255,.5); }
.hubu5 { font-weight:400;font-size:11px; }
.hubu6 { text-transform:uppercase;letter-spacing:.04em; }
.hubu7 { padding-bottom:18px; }
.hubu8 { font-size:11.5px; }
.hubu9 { vertical-align:-1px;margin-right:3px; }
.hubu10 { font-size:12.5px;color:rgba(255,255,255,.55);margin-top:6px; }
.hubu11 { flex-shrink:0;margin-top:1px; }
.hubu12 { display:flex;gap:18px; }
.hubu13 { z-index:600; }
.hubu14 { background:#fff;border-radius:20px;padding:36px 32px;max-width:420px;width:90%;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.18); }
.hubu15 { width:56px;height:56px;background:#fff5f1;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:26px; }
.hubu16 { font-size:22px;font-weight:600;letter-spacing:-.02em;color:#0a0a0a;margin:0 0 12px; }
.hubu17 { font-size:15px;line-height:1.6;color:rgba(10,10,10,.62);margin:0 0 24px; }
.hubu18 { background:#fff5f1;border-radius:12px;padding:16px;margin:0 0 24px; }
.hubu19 { margin:0;font-size:13.5px;font-weight:600;color:#ff6b35; }
.hubu20 { width:100%;padding:13px;background:#0c1a2e;color:#fff;border:none;border-radius:10px;font-size:14.5px;font-weight:600;cursor:pointer;letter-spacing:-.005em; }
.hubu21 { position:absolute;overflow:hidden; }
.hubu22 { opacity:.7;font-size:11px; }
.hubu23 { display:none; }
.hubu24 { width:0%; }
.hubu25 { top:50%;left:50%;transform:translate(-50%,-50%); }
.hubu26 { display:none;position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:600;align-items:center;justify-content:center;padding:16px; }
.hubu27 { background:var(--surface);border-radius:14px;padding:28px 28px 24px;width:100%;max-width:460px;box-shadow:0 8px 40px rgba(0,0,0,0.18); }
.hubu28 { display:flex;align-items:center;justify-content:space-between;margin-bottom:16px; }
.hubu29 { font-size:16px;font-weight:700;color:var(--text); }
.hubu30 { background:none;border:none;cursor:pointer;color:var(--text-3);font-size:20px;line-height:1;padding:2px 6px; }
.hubu31 { font-size:13px;color:var(--text-3);margin-bottom:14px;line-height:1.6; }
.hubu32 { width:100%;border:1px solid var(--border-strong);border-radius:var(--radius);padding:10px 13px;font-size:13.5px;font-family:inherit;color:var(--text);background:var(--surface-2);resize:vertical;outline:none;box-sizing:border-box; }
.hubu33 { font-size:12.5px;color:#dc2626;margin-top:8px;display:none; }
.hubu34 { display:flex;gap:10px;margin-top:16px; }
.hubu35 { flex:1; }
.hubu36 { flex:2; }
.hubu37 { background:var(--card);border-radius:14px;padding:26px 26px 22px;width:100%;max-width:420px;box-shadow:0 8px 40px rgba(0,0,0,0.18); }
.hubu38 { display:flex;align-items:center;gap:12px;margin-bottom:14px; }
.hubu39 { width:36px;height:36px;border-radius:50%;background:var(--g-dim);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.hubu40 { font-size:15px;font-weight:700;color:var(--tx);letter-spacing:-.005em; }
.hubu41 { font-size:13.5px;color:var(--tx60);margin-bottom:20px;line-height:1.6; }
.hubu42 { display:flex;gap:10px; }
.hubu43 { display:none;position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:700;align-items:center;justify-content:center;padding:16px; }
.hubu44 { background:var(--card);border-radius:14px;padding:24px;width:100%;max-width:460px;box-shadow:0 8px 40px rgba(0,0,0,0.18); }
.hubu45 { font-size:15px;font-weight:700;color:var(--tx);margin-bottom:10px; }
.hubu46 { font-size:13px;color:var(--tx);line-height:1.6;margin:0 0 12px; }
.hubu47 { font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;background:var(--field-bg, #f6f4ef);padding:14px 16px;border-radius:8px;border:1px dashed var(--border, #d8d3c4);text-align:center;font-size:15px;letter-spacing:.04em;font-weight:600;color:var(--tx);user-select:all;word-break:break-all; }
.hubu48 { font-size:12.5px;color:var(--tx60);margin:12px 0 0;line-height:1.6; }
.hubu49 { color:var(--tx); }
.hubu50 { display:flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;color:var(--tx);padding:8px 10px;border-radius:7px;border:1px solid transparent;transition:background .15s,border-color .15s; }
.hubu51 { display:none;color:#c0392b;font-size:12px;margin:6px 0 0; }
.hubu52 { background:var(--card);border-radius:14px;padding:24px;width:100%;max-width:440px;box-shadow:0 8px 40px rgba(0,0,0,0.18); }
.hubu53 { font-size:15px;font-weight:700;color:var(--tx);margin-bottom:6px; }
.hubu54 { font-size:12.5px;color:var(--tx60);line-height:1.6;margin:0 0 14px; }
.hubu55 { display:block;font-size:12px;color:var(--tx60);margin-bottom:6px; }
.hubu56 { width:100%;padding:10px 13px;font-size:13.5px;font-family:inherit;color:var(--tx);background:var(--field-bg,#f6f4ef);border:1px solid var(--border,#d8d3c4);border-radius:8px;outline:none;box-sizing:border-box; }
.hubu57 { display:flex;gap:10px;margin-top:16px;align-items:center; }
.hubu58 { font-size:12.5px; }
.hubu59 { margin-left:auto; }
.hubu60 { display:none;position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:710;align-items:center;justify-content:center;padding:16px; }
.hubu61 { width:100%;padding:10px 13px;font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;font-size:12.5px;letter-spacing:.03em;color:var(--tx);background:var(--field-bg,#f6f4ef);border:1px solid var(--border,#d8d3c4);border-radius:8px;outline:none;box-sizing:border-box; }
.hubu62 { display:block;font-size:12px;color:var(--tx60);margin:12px 0 6px; }
.hubu63 { margin-top:14px;padding-top:12px;border-top:1px solid var(--border,#d8d3c4); }
.hubu64 { padding:2px 0;font-size:11px;color:#c0392b;background:transparent;border:0;cursor:pointer; }
.hubu65 { display:none;position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:720;align-items:center;justify-content:center;padding:16px; }
.hubu66 { font-size:15px;font-weight:700;color:#c0392b;margin-bottom:6px; }
.hubu67 { width:100%;padding:10px 13px;font-size:13.5px;font-family:inherit;color:var(--tx);background:var(--field-bg,#f6f4ef);border:1px solid var(--border,#d8d3c4);border-radius:8px;outline:none;box-sizing:border-box;text-transform:uppercase;letter-spacing:.05em; }
.hubu68 { margin-left:auto;background:#c0392b;border-color:#c0392b; }
.hubu69 { position:fixed;bottom:24px;right:24px;background:var(--surface);color:var(--text);border:1px solid var(--border);padding:10px 14px;border-radius:var(--radius);font-size:13px;font-weight:500;box-shadow:0 4px 16px rgba(0,0,0,.12);z-index:999;opacity:0;transform:translateY(10px);transition:all 0.3s;pointer-events:none;max-width:320px;line-height:1.5; }