/* ═══════════════════════════════════════════════════════════════
   Dark Gen v7 — Simplified Glass Design System
   Sidebar + Prompt Zone + Content layout
   ~1500 lines target
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. CSS CUSTOM PROPERTIES ─── */

:root {
  /* Surfaces */
  --bg: #060607;
  --bg-deep: #030304;
  --surface: rgba(255,255,255,0.025);
  --surface-2: rgba(255,255,255,0.035);
  --elevated: rgba(255,255,255,0.045);
  --elevated-2: rgba(255,255,255,0.075);
  --glass-blur: blur(20px) saturate(140%);
  --glass-blur-strong: blur(28px) saturate(160%);

  /* Borders */
  --border: rgba(255,255,255,0.07);
  --border-hover: rgba(255,255,255,0.14);
  --border-active: rgba(255,255,255,0.22);
  --border-strong: rgba(255,255,255,0.18);

  /* Text */
  --t1: #f1f1f4;
  --t2: #c0c0c8;
  --t3: #828289;
  --t4: #76767f;

  /* Accent (neutral graphite, closer to AiContentGen) */
  --accent: #606068;
  --accent-rgb: 96,96,104;
  --accent-strong: #76767f;
  --accent-soft: rgba(96,96,104,0.13);
  --accent-muted: rgba(96,96,104,0.22);
  --accent-glow: rgba(96,96,104,0.26);

  /* Status */
  --ok: #4ade80;
  --warn: #fbbf24;
  --err: #f87171;

  /* Phase 95 / self-host (privacy): Inter is SELF-HOSTED from
   * static/fonts/*.woff2 (see the @font-face block below body{}) — no
   * Google-Fonts hotlink, so no visitor IP leaks to a third party. The
   * InterFallback face below covers the display:swap window, no reflow.
   *
   * Typography — Phase 80: Inter (prepended) + system fallback keeps the
   * UI readable if the font can't load; 13/14px suits dense SaaS UIs,
   * pairs with JetBrains Mono. Map JS sizes to --text-* below: 2xs=10,
   * xs=11 sm=12 base=13 md=14 lg=16 xl=20 2xl=24 3xl=32 (÷2, most ÷4). */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', 'Monaco', monospace;
  --font-semi: 600;
  --text-2xs: 10px;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.5px;

  /* Layout */
  --sidebar-w: 220px;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 999px;

  /* Spacing scale (4px grid) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;

  /* Shadows — phase 82. Layered elevation with subtle accent glow on
     active surfaces. Values tuned for dark theme: deep bottom-shift +
     faint inner border brightens the silhouette. */
  --shadow-xs: 0 1px 0 rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.02);
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.35), 0 1px 0 rgba(0,0,0,0.3);
  --shadow: 0 8px 24px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.3);
  --shadow-md: 0 16px 40px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg: 0 24px 64px rgba(0,0,0,0.6), 0 8px 20px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 0 1px var(--accent-soft), 0 8px 24px var(--accent-glow);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04);

  /* Legacy compatibility aliases still used by extracted UI modules */
  --glass-bg: var(--surface);
  --glass-bg-elevated: var(--surface-2);
  --glass-bg-inset: rgba(0,0,0,0.55);
  --glass-border: var(--border);
  --glass-border-hover: var(--border-hover);
  --glass-highlight: rgba(255,255,255,0.035);
  --text-primary: var(--t1);
  --text-secondary: var(--t2);
  --text-muted: var(--t3);
  --g2: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));

  /* Transitions */
  --dur: 160ms;
  --dur-slow: 280ms;
  --ease: cubic-bezier(.2,.8,.2,1);

  /* ─── UI/UX polish backbone (2026-06-24) ─── */
  --t5: #555560;                 /* decoration-only: hairlines / disabled glyphs (NOT text) */
  --danger: var(--err);
  --surface-1: var(--surface);
  --info: #6aa8ff;
  --accent-fill: rgba(var(--accent-rgb),0.55);   /* data-ink: chart bars, active fills */
  --focus-ring: 2px solid var(--accent);
  --focus-ring-offset: 2px;
  --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 1000;
  --z-modal: 1100; --z-popover: 1200; --z-toast: 1300; --z-max: 2000;
}


/* ─── 2. RESET + BODY + SCROLLBAR ─── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Phase 95: InterFallback face — matches Inter's metrics using system
   fonts so the Google-Fonts swap doesn't shift layout. Kicks in when
   Inter is blocked by corporate firewalls, airplane-mode dev, etc. */
@font-face {
  font-family: "InterFallback";
  font-style: normal;
  font-weight: 100 900;
  src: local("Helvetica Neue"), local("Arial");
  size-adjust: 100.06%;
  ascent-override: 90%;
  descent-override: 22.43%;
  line-gap-override: 0%;
}

/* Self-hosted Inter (privacy: no Google-Fonts hotlink → no visitor-IP
   leak). Upstream v20 *variable* woff2 per subset; font-weight:100 900
   covers 400/500/600/700. latin + latin-ext. url() → ../fonts/. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.06), transparent 26%),
    radial-gradient(circle at top right, rgba(255,255,255,0.03), transparent 22%),
    linear-gradient(180deg, #09090b 0%, #050506 55%, #030304 100%);
  font-family: 'Inter', 'InterFallback', var(--font);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-normal);
  color: var(--t2);
  overflow: hidden;
  height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Inter ships with calt + ss01 features worth enabling for prettier
     renders at small sizes (case-alternates + dotted zero). */
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01";
}

/* Tighter tracking on larger display text — Inter's metrics widen as
   size increases, so -0.01em recovers the density users expect. */
h1, h2, h3,
.workflow-title, .persona-id-name,
.head-t, .empty-title {
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
}
h4, h5, .workflow-card-title, .persona-card-name {
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
}
/* Inter's tabular numerals — essential for cost + duration + timer
   columns where digits shift right. */
.tabular-nums,
.prompt-cost,
.q-summary-nums,
.cost-big,
.workflow-stat b,
.persona-id-stats b,
.persona-card-stat b,
.q-stat-pill,
.batch-draft-badge,
#sidebar-cost-amount,
#sidebar-queue-label,
.notif-meta,
.ep-slider-v {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "cv02", "cv03", "cv04";
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.18);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  padding: 8px 16px;
  background: var(--accent);
  color: #000;
  z-index: 999;
  font-size: var(--text-sm);
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  top: 0;
}


/* ─── 3. LAYOUT ─── */

#app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  /* Phase CC3 mobile sweep: 100vw counts the scrollbar width on desktop,
     causing a phantom horizontal-scroll. 100% honors the actual body
     box. 100svh (small-viewport height) on mobile handles the Safari
     URL-bar collapse correctly; 100vh keeps desktop sizing identical. */
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
@supports (height: 100svh) {
  #app { height: 100svh; }
}

#main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}

#content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--s-7) var(--s-7) var(--s-8);
  outline: none;
}

#content > * {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}


/* ─── 4. SIDEBAR ─── */

#sidebar {
  width: var(--sidebar-w);
  height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.028), rgba(255,255,255,0.01)),
    linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.12));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-right: 1px solid var(--border);
  padding: var(--s-5) 0 var(--s-2);
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-brand {
  padding: 0 var(--s-5) var(--s-6);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.brand-mark {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--text-sm);
  color: var(--t1);
  flex-shrink: 0;
  letter-spacing: -0.02em;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.12);
}

.brand-name {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--t1);
  letter-spacing: -0.01em;
}

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.sidebar-section {
  padding: 0 var(--s-3);
  margin-bottom: var(--s-4);
}

.sidebar-section + .sidebar-section {
  position: relative;
}

.sidebar-section + .sidebar-section::before {
  content: '';
  display: block;
  height: 1px;
  background: var(--border);
  margin: 0 var(--s-2) var(--s-3);
}

.sidebar-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px 14px;
  margin-bottom: 1px;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  color: var(--t3);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  font-family: var(--font);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  position: relative;
  text-align: left;
  line-height: 1.4;
}

.sidebar-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 60%;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
  transition: transform var(--dur) var(--ease);
}

.sidebar-item:hover {
  background: var(--surface-2);
  color: var(--t2);
}

.sidebar-item.is-active {
  background: var(--accent-soft);
  color: var(--t1);
  font-weight: 600;
}

.sidebar-item.is-active::before {
  transform: translateY(-50%) scaleY(1);
}

.sidebar-item.is-active svg {
  color: var(--accent-strong);
}

.sidebar-item svg {
  flex-shrink: 0;
  color: inherit;
  opacity: 0.92;
}

.sidebar-group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) 14px;
  margin-top: var(--s-2);
  margin-bottom: var(--s-1);
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--t4);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font);

  letter-spacing: 0.08em;
  transition: color var(--dur);
  text-align: left;
}

.sidebar-group-toggle:hover {
  color: var(--t3);
}

.sidebar-group-toggle svg {
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
}

.sidebar-group-toggle.open svg {
  transform: rotate(90deg);
}

.sidebar-group {
  overflow: hidden;
  max-height: 320px;
  transition: max-height var(--dur-slow) var(--ease);
}

.sidebar-group.collapsed {
  max-height: 0;
}

.sidebar-footer {
  padding: var(--s-3);
  border-top: 1px solid var(--border);
  margin-top: auto;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.2));
}

.sidebar-footer .sidebar-item {
  color: var(--t3);
}


/* ─── 5. PROMPT ZONE ─── */

#prompt-zone {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: var(--s-5) var(--s-7) var(--s-4);
  background: linear-gradient(180deg, rgba(8,8,10,0.88), rgba(8,8,10,0.68));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--border);
}

#prompt,
#prompt-batch {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--t1);
  font-size: var(--text-md);
  font-family: var(--font);
  font-weight: 400;
  resize: none;
  outline: none;
  min-height: 22px;
  max-height: 80px;
  line-height: 1.5;
  padding: 2px 0;
}

#prompt-batch {
  max-height: 140px;
}

#prompt::placeholder,
#prompt-batch::placeholder {
  color: var(--t4);
  font-weight: 400;
}

.prompt-cost {
  font-size: var(--text-xs);
  color: var(--t4);
  flex-shrink: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.prompt-gen-btn {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0 var(--s-5);
  height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid var(--accent-muted);
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: #0a0a0c;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 700;
  font-family: var(--font);
  letter-spacing: 0.01em;
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
  flex-shrink: 0;
  white-space: nowrap;
  box-shadow: 0 4px 12px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.3);
}

.prompt-gen-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.4);
  filter: brightness(1.08);
}

.prompt-gen-btn:active {
  transform: translateY(0);
  filter: brightness(0.96);
}

.prompt-gen-btn svg {
  flex-shrink: 0;
  color: #0a0a0c;
}

.q-badge {
  font-size: 10px;
  background: rgba(0,0,0,0.4);
  color: #fff;
  border-radius: var(--radius-full);
  padding: 1px 6px;
  min-width: 16px;
  text-align: center;
  font-weight: 700;
  line-height: 1.5;
}

.controls-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding-top: var(--s-3);
  flex-wrap: wrap;
  overflow-x: auto;
}

.controls-row:empty {
  display: none;
}

.prompt-tools-row {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  padding-top: var(--s-2);
}

.prompt-tools-row:empty {
  display: none;
}

.pt-btn {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--t3);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 500;
  font-family: var(--font);
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
  white-space: nowrap;
}

.pt-btn:hover {
  color: var(--t1);
  background: var(--surface-2);
}

.pt-btn[aria-pressed="true"] {
  color: var(--accent-strong);
  background: var(--accent-soft);
}

.pt-btn svg {
  flex-shrink: 0;
  opacity: 0.8;
}

.prompt-counter {
  font-size: var(--text-xs);
  color: var(--t4);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* Prompt dropdowns */
.ph-dd {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 100%;
  background: rgba(20,20,20,0.95);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 20;
  box-shadow: var(--shadow);
}

.enhance-panel {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 100%;
  background: rgba(20,20,20,0.95);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  z-index: 20;
  box-shadow: var(--shadow);
}


/* ─── 6. CONTROLS ─── */

.ctrl-group {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  height: 32px;
  padding: 0 var(--s-2);
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
}

.ctrl-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--t4);

  letter-spacing: 0.06em;
  flex-shrink: 0;
  white-space: nowrap;
}

.ctrl-select {
  background: transparent;
  border: none;
  color: var(--t1);
  padding: 6px 22px 6px var(--s-2);
  font-size: var(--text-xs);
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  min-width: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23828289' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 14px 14px;
  border-radius: var(--radius-sm);
  height: 26px;
}

.ctrl-select:hover {
  background-color: var(--surface-2);
}

.ctrl-select:focus {
  background-color: var(--surface-2);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.ctrl-chip {
  padding: 6px 12px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--t3);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 500;
  font-family: var(--font);
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
  white-space: nowrap;
}

.ctrl-chip:hover {
  border-color: var(--border-hover);
  color: var(--t2);
  background: var(--surface-2);
}

.ctrl-chip.on,
.ctrl-chip.is-active {
  border-color: var(--accent-muted);
  color: var(--accent-strong);
  background: var(--accent-soft);
}

.ctrl-num {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

.ctrl-num button {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--t2);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.ctrl-num button:hover {
  border-color: var(--border-hover);
  background: var(--elevated-2);
  color: var(--t1);
}

.ctrl-num span {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--t1);
  min-width: 24px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.ctrl-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 var(--s-1);
}

.ctrl-slider {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ctrl-slider input[type="range"] {
  width: 80px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--elevated);
  border-radius: 2px;
  outline: none;
}

.ctrl-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--t2);
  cursor: pointer;
  border: none;
}

.ctrl-slider input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--t2);
  cursor: pointer;
  border: none;
}

.ctrl-slider span {
  font-size: var(--text-xs);
  color: var(--t3);
  min-width: 28px;
}


/* ─── 7. GALLERY GRID ─── */

.gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
  flex-wrap: wrap;
}

.gallery-header h2,
.gh-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--t1);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.gh-title-wrap {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.gh-count {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--s-3);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--t2);
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.gallery-header span:not(.gh-count) {
  font-size: var(--text-sm);
  color: var(--t3);
  font-weight: 400;
  margin-left: 6px;
}

.view-toggle {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 0;
}

.view-btn {
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--t3);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-family: var(--font);
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.view-btn:hover {
  color: var(--t1);
}

.view-btn.is-active {
  color: var(--t1);
  background: var(--elevated-2);
  box-shadow: var(--shadow-sm);
}

.sel-bar {
  font-size: var(--text-xs);
  font-weight: 500;
}

.gallery {
  display: grid;
  gap: var(--s-3);
  /* Default to the medium size variant so plain <div class="gallery"> doesn't
     collapse to a single column (Flask renders cards with just `.gallery`). */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.gallery.g-sm {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.gallery.g-md {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.gallery.g-lg {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* Masonry layout — toggled by _toggleMasonry()/_applyMasonry() adding
   `.masonry` to the `.gallery` container. CSS columns give a true variable-
   height waterfall; cards drop their forced square aspect-ratio so portrait
   and landscape assets keep their natural proportions. */
.gallery.masonry {
  display: block;
  columns: 5 220px;
  column-gap: var(--s-3);
}

.gallery.masonry .gc {
  aspect-ratio: auto;
  height: auto;
  break-inside: avoid;
  margin-bottom: var(--s-3);
}

.gc {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1;
  border: 1px solid var(--border);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  cursor: pointer;
  background: var(--surface);
}

.gc:hover {
  border-color: var(--border-hover);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

.gc img,
.gc video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity var(--dur);
}

.gc-badge {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  font-size:10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.7);
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  pointer-events: none;
}

.gc-copy {
  position: absolute;
  top: var(--s-2);
  right: 32px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.9);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur);
}

.gc:hover .gc-copy {
  opacity: 1;
}

.gc-copy svg {
  width: 12px;
  height: 12px;
}

.gc-ov {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 40%, rgba(0,0,0,0.85));
  opacity: 0;
  transition: opacity var(--dur);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--s-3);
  pointer-events: none;
}

.gc-ov > * {
  pointer-events: auto;
}

.gc:hover .gc-ov {
  opacity: 1;
}

.gc-p {
  font-size: var(--text-xs);
  font-weight: 500;
  color: rgba(255,255,255,0.95);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

.gc-acts {
  display: flex;
  gap: var(--s-1);
  margin-top: var(--s-2);
  flex-wrap: wrap;
}

.gc-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.gc-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #0a0a0c;
  transform: scale(1.05);
}

.gc-btn svg {
  width: 14px;
  height: 14px;
}

.gc-sel {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  opacity: 0;
  transition: opacity var(--dur);
  width: 22px;
  height: 22px;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.9);
}

.gc.sel .gc-sel {
  opacity: 1;
  background: var(--accent);
  color: #fff;
}

.gc-fav {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  opacity: 0;
  transition: opacity var(--dur);
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  border: none;
  color: rgba(255,255,255,0.9);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gc-fav svg {
  width: 12px;
  height: 12px;
}

.gc:hover .gc-sel,
.gc:hover .gc-fav,
.gc-fav.faved {
  opacity: 1;
}

.gc-fav.faved {
  color: #fbbf24;
}

/* Gallery group headers */
.gallery-group-label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--t3);

  letter-spacing: 0.04em;
  padding: 8px 0 6px;
  grid-column: 1 / -1;
}

/* Filter bar (library) */
.filter-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.filter-bar select,
.filter-bar input {
  padding: 5px 10px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--t2);
  font-size: var(--text-xs);
  font-family: var(--font);
  outline: none;
}

.filter-bar input {
  flex: 1;
  min-width: 120px;
}


/* ─── 8. LIGHTBOX ─── */

#lb {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0,0,0,0.92);
  display: none;
  flex-direction: column;
}

#lb.open {
  display: flex;
}

#lb-main {
  flex: 1;
  min-height: clamp(144px, 25vh, 160px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: clip;
}
#lb-media-wrap {
  /* A definite, bounded height lets the media's percentage limit resolve. */
  width: 90vw;
  height: 75vh;
  max-width: 90vw;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#lb-media-wrap img,
#lb-media-wrap video {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius);
  transition: transform 0.2s;
  display: block;
}

#lb-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: white;
  cursor: pointer;
  border: none;
  font-size: 20px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur);
}

#lb-close:hover {
  background: rgba(255,255,255,0.2);
}

#lb-nav-prev,
#lb-nav-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur);
}

#lb-nav-prev:hover,
#lb-nav-next:hover {
  background: rgba(255,255,255,0.15);
}

#lb-nav-prev {
  left: 16px;
}

#lb-nav-next {
  right: 16px;
}

#lb-counter {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-xs);
  color: var(--t3);
  z-index: 2;
}

#lb-zoom-ctrl {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  gap: 4px;
  align-items: center;
  z-index: 2;
}

#lb-zoom-ctrl button {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.06);
  color: var(--t2);
  cursor: pointer;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

#lb-zoom-ctrl button:hover {
  background: rgba(255,255,255,0.1);
}

#lb-zoom-level {
  font-size: var(--text-xs);
  color: var(--t3);
  min-width: 36px;
  text-align: center;
}

#lb-info-panel {
  position: absolute;
  right: 0;
  top: 0;
  width: 280px;
  max-height: 100%;
  overflow-y: auto;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 12px;
  transform: translateX(100%);
  transition: transform 0.2s;
  z-index: 3;
}

#lb-info-panel.open {
  transform: translateX(0);
}

#lb-bottom {
  padding: 8px 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
}

#lb-info {
  font-size: var(--text-xs);
  color: var(--t3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

#lb-acts {
  display: flex;
  gap: 2px;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.lb-actions {
  display: flex;
  gap: 2px;
  align-items: center;
  flex-wrap: wrap;
}

.lb-action-btn {
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--t3);
  cursor: pointer;
  font-size: var(--text-xs);
  font-family: var(--font);
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
  white-space: nowrap;
}

.lb-action-btn:hover {
  background: var(--elevated);
  color: var(--t2);
}

.lb-dropdown {
  position: relative;
  display: inline-block;
}

.lb-dropdown-menu {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  background: var(--elevated);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px;
  min-width: 140px;
  z-index: 10;
  box-shadow: var(--shadow);
}

.lb-dropdown:hover .lb-dropdown-menu,
.lb-dropdown-menu:hover,
.lb-dropdown.is-open .lb-dropdown-menu {
  display: block;
  max-height: 50vh;
  overflow-y: auto;
}

.lb-dropdown-item {
  display: block;
  width: 100%;
  padding: 6px 10px;
  border: none;
  background: transparent;
  color: var(--t2);
  cursor: pointer;
  font-size: var(--text-xs);
  font-family: var(--font);
  text-align: left;
  border-radius: var(--radius-sm);
  transition: background var(--dur);
}

.lb-dropdown-item:hover {
  background: rgba(255,255,255,0.06);
}

#lb-filmstrip {
  height: 56px;
  display: flex;
  gap: 4px;
  padding: 4px 16px;
  overflow-x: auto;
  border-top: 1px solid rgba(255,255,255,0.06);
  align-items: center;
}

.fs-thumb {
  height: 48px;
  width: auto;
  border-radius: 4px;
  opacity: 0.5;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity var(--dur);
}

.fs-thumb:hover {
  opacity: 0.8;
}

.fs-thumb.is-active {
  opacity: 1;
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

#lb-panel { flex: 0 1 auto; min-height: 0; max-height: min(480px, 45vh);
  overflow-y: auto; overscroll-behavior: contain; }
.lb-filter-result { display: block; width: auto; height: auto; max-width: 100%; max-height: min(240px, 30vh);
  object-fit: contain; margin: 0 auto; border-radius: 8px;
}
/* ─── 9. BATCH MODE ─── */

.batch-page {
  max-width: 900px;
  margin: 0 auto;
}

.batch-count-badge {
  display: inline-flex;
  padding: 2px 10px;
  border-radius: 12px;
  background: var(--accent-soft);
  font-size: var(--text-xs);
  color: var(--t2);
}

.batch-settings-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.batch-consistency-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  padding: 12px 0;
}

.batch-run-card {
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
}

.batch-run-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.batch-run-header h4 {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--t1);
}

.batch-run-progress {
  height: 4px;
  background: var(--elevated);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 8px;
}

.batch-run-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s;
}

.batch-run-bar.active {
  animation: pulse 2s infinite;
}

.batch-run-stats {
  display: flex;
  gap: 12px;
  font-size: var(--text-xs);
  color: var(--t3);
  margin-top: 6px;
}

.batch-run-detail {
  padding: 12px 0;
}

.batch-run-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 6px;
}

.batch-run-thumb {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--elevated);
}

.batch-run-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.batch-run-thumb .thumb-status {
  position: absolute;
  top: 4px;
  right: 4px;
}


/* ─── 10. SETTINGS SLIDE-OVER ─── */

#modal-settings {
  display: none;
}

#modal-settings.open {
  display: block;
}

.settings-slideover {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  background: rgba(10,10,10,0.95);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border-left: 1px solid var(--border);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.2s ease;
  display: flex;
  flex-direction: column;
}

#modal-settings.open .settings-slideover {
  transform: translateX(0);
}

.set-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.set-header h2 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--t1);
}

.set-nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
  padding: 12px 20px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.set-nav::-webkit-scrollbar { display: none; }

.set-nav-item {
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--t3);
  cursor: pointer;
  font-size: var(--text-xs);
  font-family: var(--font);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.set-nav-item:hover {
  color: var(--t2);
}

.set-nav-item.is-active {
  background: var(--accent-soft);
  color: var(--t1);
}

.set-search {
  width: calc(100% - 40px);
  margin: 0 20px;
  padding: 6px 10px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--t1);
  font-size: var(--text-sm);
  font-family: var(--font);
  outline: none;
  box-sizing: border-box;
}

.set-search:focus {
  border-color: var(--border-hover);
}

.set-body {
  flex: 1 1 auto;
  min-height: 0; /* Phase Q fix: flex child needs min-height:0 for overflow to trigger inside a flex:column parent on short viewports */
  overflow-y: auto;
  padding: 16px 20px;
  overscroll-behavior: contain;
}

.set-section {
  /* shown/hidden via JS display */
}

.set-section h3 {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--t1);
  margin-bottom: 12px;
}

.set-field {
  margin-bottom: 14px;
}

.set-field label {
  display: block;
  font-size: var(--text-xs);
  color: var(--t3);
  margin-bottom: 4px;
}

.set-field input,
.set-field select {
  width: 100%;
  padding: 6px 10px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--t1);
  font-size: var(--text-sm);
  font-family: var(--font);
  outline: none;
  transition: border-color var(--dur);
}

.set-field input:focus,
.set-field select:focus {
  border-color: var(--border-hover);
}

.set-field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.set-key-row {
  display: flex;
  gap: 4px;
}

.set-key-row input {
  flex: 1;
}

.set-key-btn {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--t3);
  cursor: pointer;
  font-size: var(--text-xs);
  font-family: var(--font);
  flex-shrink: 0;
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.set-key-btn:hover {
  color: var(--t2);
  border-color: var(--border-hover);
}

.set-toggle-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.set-toggle-field label {
  margin-bottom: 0;
}

.set-toggle {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--elevated);
  border: 1px solid var(--border);
  cursor: pointer;
  position: relative;
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
  flex-shrink: 0;
}

.set-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--t3);
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.set-toggle.on {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.set-toggle.on::after {
  transform: translateX(16px);
  background: var(--accent);
}

.set-chip-group {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.set-chip {
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--t3);
  cursor: pointer;
  font-size: var(--text-xs);
  font-family: var(--font);
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.set-chip:hover {
  border-color: var(--border-hover);
  color: var(--t2);
}

.set-chip.is-active {
  border-color: var(--accent);
  color: var(--t1);
  background: var(--accent-soft);
}

.set-actions {
  margin-top: 12px;
}

.import-zone {
  padding: 20px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  text-align: center;
  color: var(--t4);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.import-zone:hover {
  border-color: var(--border-hover);
  color: var(--t3);
}


/* ─── 11. PERSONA MODE ─── */

.persona-dash,
.persona-create,
.persona-detail,
.persona-orchestrate {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

.persona-grid {
  /* D2.6: adopts .card-grid; only the surface --card-min override remains. */
  --card-min: 200px;
}

.persona-card {
  padding: 14px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.persona-card:hover {
  border-color: var(--border-hover);
}

.persona-card-img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--elevated);
  margin-bottom: 10px;
}

.persona-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.persona-card-name {
  font-weight: 600;
  color: var(--t1);
  margin-bottom: 2px;
  font-size: var(--text-sm);
}

.persona-card-arch {
  font-size: var(--text-xs);
  color: var(--t3);
}

.persona-card-stats {
  display: flex;
  gap: 10px;
  font-size: var(--text-xs);
  color: var(--t4);
  margin-top: 6px;
}

.persona-form {
  max-width: 700px;
}

.pf-field {
  margin-bottom: 14px;
}

.pf-field label {
  display: block;
  font-size: var(--text-xs);
  color: var(--t3);
  margin-bottom: 4px;
}

.pf-field input,
.pf-field textarea,
.pf-field select {
  width: 100%;
  padding: 8px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--t1);
  font-size: var(--text-sm);
  font-family: var(--font);
  outline: none;
  transition: border-color var(--dur);
}

.pf-field input:focus,
.pf-field textarea:focus,
.pf-field select:focus {
  border-color: var(--border-hover);
}

.pf-field textarea {
  resize: vertical;
  min-height: 60px;
}

.pf-row {
  display: flex;
  gap: 12px;
}

.pf-row > * {
  flex: 1;
}


/* ─── 12. FLOW MODE ─── */

#flow-canvas-wrap {
  position: relative;
  flex: 1;
  background: var(--bg);
  overflow: hidden;
  min-height: 500px;
}

#flow-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.flow-toolbar {
  display: flex;
  gap: 4px;
  padding: 8px;
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--surface);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  z-index: 5;
}

.flow-btn {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--t3);
  cursor: pointer;
  font-size: var(--text-xs);
  font-family: var(--font);
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.flow-btn:hover {
  color: var(--t1);
  border-color: var(--border-hover);
}

.flow-saved-card {
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  cursor: pointer;
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.flow-saved-card:hover {
  border-color: var(--border-hover);
}

.flow-saved-card h4 {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--t1);
  margin-bottom: 2px;
}

.flow-saved-card p {
  font-size: var(--text-xs);
  color: var(--t3);
}


/* ─── 13. TEMPLATES + RECIPES ─── */

.tmpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.tmpl-card {
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.tmpl-card:hover {
  border-color: var(--border-hover);
}

.tmpl-card-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--t1);
}

.tmpl-card-desc {
  font-size: var(--text-xs);
  color: var(--t3);
  margin-top: 2px;
}

.tmpl-card-count {
  font-size: var(--text-xs);
  color: var(--t4);
  margin-top: 4px;
}

.tmpl-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.tmpl-header h2 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--t1);
}

.tmpl-back-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--t2);
  cursor: pointer;
  font-size: var(--text-xs);
  font-family: var(--font);
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.tmpl-back-btn:hover {
  border-color: var(--border-hover);
  color: var(--t1);
}

.tmpl-sfx-row {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
  cursor: pointer;
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.tmpl-sfx-row:hover {
  border-color: var(--border-hover);
}

.tmpl-sfx-row.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.tmpl-sfx-text {
  font-size: var(--text-xs);
  color: var(--t2);
  line-height: 1.4;
}

.tmpl-built-box {
  width: 100%;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--t1);
  padding: 8px 12px;
  font-family: var(--font);
  font-size: var(--text-sm);
  min-height: 40px;
  margin-top: 12px;
}

.tmpl-built-edit {
  width: 100%;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--t1);
  padding: 8px 12px;
  font-family: var(--font);
  font-size: var(--text-sm);
  resize: vertical;
  min-height: 40px;
  outline: none;
}

.tmpl-built-edit:focus {
  border-color: var(--border-hover);
}

.tmpl-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}

.recipe-card {
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.recipe-card:hover {
  border-color: var(--border-hover);
}

.recipe-card-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--t1);
  margin-bottom: 2px;
}

.recipe-card-desc {
  font-size: var(--text-xs);
  color: var(--t3);
  line-height: 1.4;
}

.recipe-card-meta {
  font-size: var(--text-xs);
  color: var(--t4);
  margin-top: 6px;
}


/* ─── 14. VOICE MODE ─── */

.voice-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.audio-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--dur);
}

.audio-row:hover {
  border-color: var(--border-hover);
}

.audio-play {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  border: none;
  color: var(--t2);
  transition: background var(--dur);
}

.audio-play:hover {
  background: rgba(255,255,255,0.1);
}

.audio-meta {
  flex: 1;
  min-width: 0;
}

.audio-meta-t {
  font-size: var(--text-sm);
  color: var(--t1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audio-meta-s {
  font-size: var(--text-xs);
  color: var(--t3);
}

.audio-acts {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}


/* ─── 15. UIKIT COMPONENTS ─── */

/* ─── Shared shell + labeled-row primitives (D2.1 / D2.2) ───
 * .panel — the neutral surface box (bg + border + radius) that replaces the ~18
 *   duplicated panel/card shells across surfaces. Layout-dumb: pad via
 *   .panel--pad(-lg); header row via .panel-head. Adopters: 3D .td-card, Sound
 *   Lab .sl-provider-card (their dup bg/border/radius/padding deleted).
 * .field / .field--stack — labeled form rows (blueprint tlv2 .tl-insp-f). .field
 *   is the horizontal label-column row; .field--stack the label-above variant.
 *   Sound Lab, 3D + Deepfake use .field--stack directly (the .sl-field/.td-field
 *   aliases retired in D3.1/D3.3/D3.4); each scopes its own control skin (.sl-wrap
 *   /.td-select/.df-section) since checkboxes also live inside .field--stack. */
.panel { background: var(--surface); border: 1px solid var(--glass-border); border-radius: 10px; }
.panel--pad { padding: 12px; }
.panel--pad-lg { padding: 16px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.field { display: grid; grid-template-columns: var(--field-label-w, 76px) minmax(0, 1fr); align-items: center; gap: 8px; min-height: 28px; }
.field > label, .field > span { font-size: var(--text-xs); color: var(--t2); }
.field input, .field select, .field textarea { width: 100%; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-sm); color: var(--t1); padding: 8px 10px; font: inherit; font-size: 12px; }
.field textarea { resize: vertical; min-height: 92px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline: none; }
.field select { cursor: pointer; }
.field input[type="range"] { -webkit-appearance: none; appearance: none; height: 3px; padding: 0; border: none; border-radius: 2px; background: rgba(255, 255, 255, 0.12); }
.field--stack { display: flex; flex-direction: column; align-items: stretch; gap: 5px; min-width: 0; }
.field--stack > label, .field--stack > span { font-size: 11px; font-weight: 600;  letter-spacing: 0.04em; color: var(--t2); }

/* ─── .toolbar family (D2.3) — layout primitive for action/control rows.
 * .toolbar wraps at an 8px gap; .toolbar-group packs related buttons at 4px;
 * .toolbar-sep is a 1px divider on --glass-border; .toolbar-right shoves the
 * rest to the far edge. Adopters: 3D viewer .td-ctrl bar + workspace
 * .ws-refine-actions hero row (Flow's .nf-toolbar waits for D3.7). Surfaces
 * loaded after app.css (sound-lab.css / lazy three-d.css) keep their own denser
 * gap/divider tuning as later-cascade overrides. */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.toolbar-group { display: inline-flex; align-items: center; gap: 4px; }
.toolbar-sep { width: 1px; align-self: stretch; background: var(--glass-border); flex: none; }
.toolbar-right { margin-left: auto; }

/* ─── .est-chip (D2.4) — honest pre-queue cost readout. Neutral --t3 pill by
 * default; .warn (--warn, ≥ EST_WARN_USD $5) / .danger (--err, ≥ EST_DANGER_USD
 * $20) mirror the .prompt-cost / batch.js severity canon. Built by
 * uiKit.estChip; severity from uiKit.estSeverity. Adopters: Sound Lab #sl-est +
 * 3D est chip. */
.est-chip { display: inline-block; font-size: 11px; color: var(--t3); white-space: nowrap; font-variant-numeric: tabular-nums; padding: 3px 9px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--glass-border); }
.est-chip.warn { color: var(--warn); }
.est-chip.danger { color: var(--err); font-weight: 600; }

/* ─── .card-grid (D2.6) — the auto-fill asset/card grid that replaces the ~25
 * duplicated `repeat(auto-fill, minmax(N, 1fr))` blocks. --card-min drives the
 * min column; --sm/--md/--lg are the histogram stops; odd sizes set --card-min
 * via a surface class or inline. Adopters: 3D asset grid + persona dash grid. */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card-min, 160px), 1fr)); gap: 12px; }
.card-grid--sm { --card-min: 96px; }
.card-grid--md { --card-min: 160px; }
.card-grid--lg { --card-min: 240px; }

.ui-card {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.ui-stat {
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}

.ui-stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--t1);
  line-height: 1.2;
}

.ui-stat-label {
  font-size: var(--text-xs);
  color: var(--t3);

  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.ui-stat-sub {
  font-size: var(--text-xs);
  color: var(--t2);
  margin-top: 4px;
}

.ui-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--t3);
}

.ui-empty-icon {
  opacity: 0.25;
  margin-bottom: 12px;
}

.ui-empty-icon svg {
  width: 48px;
  height: 48px;
}

.ui-empty-title {
  font-size: var(--text-sm);
  color: var(--t2);
  margin-bottom: 4px;
}

.ui-empty-desc {
  font-size: var(--text-xs);
  color: var(--t3);
}

.ui-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.ui-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 12px;
}

.ui-tab {
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--t3);
  cursor: pointer;
  font-size: var(--text-xs);
  font-family: var(--font);
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.ui-tab:hover {
  color: var(--t2);
}

.ui-tab.is-active {
  background: var(--accent-soft);
  color: var(--t1);
}

/* Bar chart */
.ui-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 80px;
  /* Baseline rule under the bars so values read against a clear zero line. */
  border-bottom: 1px solid var(--border);
}

.ui-bar {
  /* Gradient from the strong accent up to the data-ink fill — far more
     legible than the old near-invisible --accent-soft (0.13 alpha). */
  background: linear-gradient(to top, var(--accent-strong), var(--accent-fill));
  border-radius: 2px 2px 0 0;
  min-width: 4px;
  transition: height 0.3s;
  flex: 1;
}

.ui-bar:hover {
  background: var(--accent-strong);
}

/* Peak-value caption above a bar chart. */
.ui-bar-peak {
  font-size: 10px;
  color: var(--t3);
  margin-bottom: 4px;
}

.ui-bar-peak b {
  color: var(--t2);
  font-weight: 600;
}

/* Heatmap */
.ui-heatmap {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 2px;
}

.ui-heat-cell {
  aspect-ratio: 1;
  border-radius: 2px;
  position: relative;
}

/* Period pills */
.ui-period-pills {
  display: flex;
  gap: 4px;
}

.ui-period-pill {
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--t3);
  cursor: pointer;
  font-size: var(--text-xs);
  font-family: var(--font);
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.ui-period-pill:hover {
  border-color: var(--border-hover);
  color: var(--t2);
}

.ui-period-pill.is-active {
  border-color: var(--accent);
  color: var(--t1);
  background: var(--accent-soft);
}

/* Horizontal bar */
.ui-h-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.ui-h-bar-label {
  font-size: var(--text-xs);
  color: var(--t3);
  width: 80px;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-h-bar {
  flex: 1;
  height: 6px;
  background: var(--elevated);
  border-radius: 3px;
  overflow: hidden;
}

.ui-h-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.3s;
}

.ui-h-bar-stat {
  font-size: var(--text-xs);
  color: var(--t2);
  min-width: 30px;
  text-align: right;
}

/* Tags */
.ui-tag {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-size: 10px;
  color: var(--t3);
  cursor: pointer;
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.ui-tag:hover {
  border-color: var(--border-hover);
}

.ui-tag.is-active {
  border-color: var(--accent);
  color: var(--t1);
  background: var(--accent-soft);
}

/* Status dots — .status-led (D2.5) is the shared status LED (8px; --sm = 6px)
 * with ok/warn/err semantics, built by uiKit.statusLed. .ui-dot keeps its 6px
 * base and carries the state colors as ALIASES token-equal to the retired hexes
 * (--ok #4ade80 · --err #f87171 · --warn #fbbf24) so Analytics renders unchanged
 * until it migrates. Only .status-led.is-running pulses (Analytics
 * .ui-dot.processing stays static). Adopters: Sound Lab .sl-led + pipelines
 * .pi-dot. */
.status-led { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; vertical-align: 1px; }
.status-led.status-led--sm { width: 6px; height: 6px; }
.ui-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }

.status-led.is-done, .ui-dot.completed, .ui-dot.success { background: var(--ok); }
.status-led.is-failed, .ui-dot.failed, .ui-dot.error { background: var(--err); }
.status-led.is-running, .ui-dot.processing { background: var(--accent); }
.status-led.is-queued { background: var(--t4); }
.status-led.is-warn { background: var(--warn); }
.ui-dot.pending, .ui-dot.queued { background: var(--warn); }
.status-led.is-running { animation: status-led-pulse 1.1s ease-in-out infinite; }
@keyframes status-led-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .status-led.is-running { animation: none; } }

/* Toggle (shared with set-toggle) */
.ui-toggle {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--elevated);
  border: 1px solid var(--border);
  cursor: pointer;
  position: relative;
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.ui-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--t3);
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.ui-toggle.on {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.ui-toggle.on::after {
  transform: translateX(16px);
  background: var(--accent);
}

/* Modal (ui-modal) */
.ui-modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ui-modal {
  background: rgba(20,20,20,0.95);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  max-width: 480px;
  width: 90%;
  box-shadow: var(--shadow);
}

/* Table */
.ui-table-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.ui-table-rank {
  font-size: var(--text-xs);
  color: var(--t4);
  width: 20px;
  flex-shrink: 0;
}

.ui-table-text {
  flex: 1;
  font-size: var(--text-xs);
  color: var(--t2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-table-val {
  font-size: var(--text-xs);
  color: var(--t1);
  flex-shrink: 0;
}

/* Skeleton loading */
.ui-skel {
  background: linear-gradient(90deg, var(--elevated) 25%, rgba(255,255,255,0.08) 50%, var(--elevated) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

.ui-skel-text {
  height: 12px;
  width: 60%;
  margin-bottom: 6px;
}

.ui-skel-card {
  height: 120px;
  border-radius: var(--radius);
}

.ui-skel-stat {
  height: 60px;
  border-radius: var(--radius);
}


/* ─── 16. BUTTONS ─── */

.btn-accent {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  height: 34px;
  border-radius: var(--radius-md);
  border: 1px solid var(--accent-muted);
  background: var(--accent-soft);
  /* was var(--accent-strong): runtime-brightened to rgb(120,120,127), DARKER than
     --t2 rgb(192,192,200), so every primary read as disabled next to its secondary */
  color: var(--t1);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--font);
  letter-spacing: 0.01em;
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.btn-accent:hover {
  background: var(--accent-muted);
  border-color: var(--accent);
  color: var(--t1);
  box-shadow: 0 4px 16px var(--accent-glow);
}

.btn-accent:active {
  transform: translateY(1px);
}

.btn-accent svg {
  flex-shrink: 0;
}

.btn-ghost, .voice-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  height: 34px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--t2);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  font-family: var(--font);
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.btn-ghost:hover, .voice-tool-btn:hover {
  background: var(--surface-2);
  color: var(--t1);
  border-color: var(--border);
}

/* Outlined variant — for empty-state secondary CTAs where a transparent
 * border makes the button read as a hyperlink instead of a button. */
.btn-ghost.btn-ghost--outlined {
  border-color: var(--border);
}
.btn-ghost.btn-ghost--outlined:hover { border-color: var(--border-hover, var(--t3)); }

.btn-ghost svg {
  flex-shrink: 0;
  opacity: 0.85;
}

.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  height: 34px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(248,113,113,0.4);
  background: rgba(248,113,113,0.1);
  color: #f87171;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--font);
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.btn-danger:hover {
  background: rgba(248,113,113,0.2);
  box-shadow: 0 4px 16px rgba(248,113,113,0.25);
}


/* ─── 17. MODALS SHARED ─── */

.modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  background: rgba(20,20,20,0.95);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  max-width: 600px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow);
  position: relative;
}

.modal h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--t1);
  margin-bottom: 12px;
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.06);
  color: var(--t3);
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.modal-close:hover {
  background: rgba(255,255,255,0.1);
  color: var(--t1);
}


/* ─── 18. TOAST NOTIFICATIONS ─── */

#toasts {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}

.toast {
  padding: 10px 16px;
  background: rgba(20,20,20,0.95);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-xs);
  color: var(--t2);
  animation: slideIn 0.2s ease;
  pointer-events: auto;
  max-width: 320px;
}

.toast.error {
  border-color: rgba(248,113,113,0.3);
}

.toast.success {
  border-color: rgba(74,222,128,0.3);
}

.toast.warning {
  border-color: rgba(251,191,36,0.3);
}


/* ─── 19. REPURPOSE MODE ─── */

.repurpose-page {
  max-width: 1000px;
  margin: 0 auto;
}

.repurpose-source {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px 0;
}

.repurpose-source img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.repurpose-platforms {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 12px 0;
}

.repurpose-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

/* ─── W8T3: PUBLISH PANEL ─── */

.pub-panel-wrap {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.pub-panel-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.pub-panel-hdr svg {
  color: var(--accent, #8b5cf6);
}

.pub-section {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 16px;
  margin-top: 16px;
}

.pub-section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);

  letter-spacing: .05em;
  margin-bottom: 10px;
}

.pub-dest-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pub-dest-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
}

.pub-dest-item--selected {
  border-color: var(--accent, #8b5cf6);
  background: rgba(139,92,246,0.08);
}

.pub-dest-pick {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  padding: 3px 10px;
  transition: background .15s, border-color .15s;
}
.pub-dest-pick:hover {
  background: rgba(255,255,255,0.06);
}
.pub-dest-pick.on {
  background: var(--accent, #8b5cf6);
  border-color: var(--accent, #8b5cf6);
  color: #fff;
}

.pub-dest-url {
  flex: 1;
  font-size: 11px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pub-dest-del {
  flex-shrink: 0;
}

.pub-add-form {
  margin-top: 10px;
}

.pub-input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  padding: 7px 10px;
  outline: none;
  transition: border-color .15s;
}
.pub-input:focus {
  border-color: var(--accent, #8b5cf6);
}
.pub-input--wide {
  min-width: 220px;
  flex: 1;
}
select.pub-input {
  cursor: pointer;
  width: 100%;
}

.pub-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 0;
}

.pub-asset-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.pub-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}

.pub-asset-name {
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pub-actions-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pub-schedule-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pub-sched-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 12px;
}
.pub-sched-table th {
  text-align: left;
  color: var(--text-muted);
  padding: 4px 8px 6px;
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.pub-sched-table td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
}
.pub-sched-table tr:last-child td { border-bottom: none; }

.pub-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  text-transform: capitalize;
}
.pub-status--pending  { background: rgba(139,92,246,.15); color: #a78bfa; }
.pub-status--running  { background: rgba(250,189,0,.12); color: #fbbf24; }
.pub-status--dispatched { background: rgba(16,185,129,.12); color: #34d399; }
.pub-status--failed   { background: rgba(239,68,68,.12); color: #f87171; }
.pub-status--cancelled { background: rgba(255,255,255,.06); color: var(--text-muted); }
.pub-status--unknown  { background: rgba(255,255,255,.06); color: var(--text-muted); }

/* Reduced-motion: skip transitions in pub panel */
@media (prefers-reduced-motion: reduce) {
  .pub-dest-pick, .pub-input { transition: none; }
}


/* ─── 20. INPAINT ─── */

.inpaint-canvas-wrap {
  position: relative;
  display: inline-block;
}

.inpaint-canvas {
  position: absolute;
  inset: 0;
  cursor: crosshair;
}

.inpaint-tools {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
}

.inpaint-tools button {
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--t3);
  cursor: pointer;
  font-size: var(--text-xs);
  font-family: var(--font);
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.inpaint-tools button:hover {
  color: var(--t2);
  border-color: var(--border-hover);
}

.inpaint-tools button.is-active {
  border-color: var(--accent);
  color: var(--t1);
  background: var(--accent-soft);
}


/* ─── 21. UTILITY CLASSES ─── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* `.hidden` lives in the final utility block (line ~7505) — removed duplicate here. */

/* Compare view */
#compare-view {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

#compare-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  color: var(--t1);
  font-size: var(--text-sm);
  font-weight: 500;
}

#compare-body {
  flex: 1;
  display: flex;
  gap: 8px;
  padding: 20px;
  overflow: auto;
}

#compare-body img {
  max-height: 100%;
  border-radius: var(--radius);
}

/* Shortcut help */
#shortcut-help-bg {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

#shortcut-help {
  background: rgba(20,20,20,0.95);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  color: var(--t2);
  font-size: var(--text-sm);
}

#shortcut-help h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--t1);
  margin-bottom: 12px;
}

#shortcut-help kbd {
  display: inline-block;
  padding: 2px 6px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: var(--text-xs);
  font-family: var(--font);
  color: var(--t1);
}

/* Quick actions */
#quick-actions {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 20vh;
}

#quick-actions-inner {
  background: rgba(20,20,20,0.95);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 8px;
  max-width: 400px;
  width: 90%;
  max-height: 60vh;
  overflow-y: auto;
}

#goto-indicator {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  background: rgba(20,20,20,0.95);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  color: var(--t1);
  z-index: 200;
}

/* Confirm dialog */
#confirm-dialog {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

#confirm-dialog .confirm-box {
  background: rgba(20,20,20,0.95);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  max-width: 400px;
  width: 90%;
  text-align: center;
}

#confirm-dialog .confirm-box h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--t1);
  margin-bottom: 8px;
}

#confirm-dialog .confirm-box p {
  font-size: var(--text-sm);
  color: var(--t3);
  margin-bottom: 16px;
}

#confirm-dialog .confirm-box .confirm-btns {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* Upscale / detail pages */
.upscale-page {
  max-width: 800px;
  margin: 0 auto;
}

/* Checkbox inputs in gallery/batch */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--elevated);
  cursor: pointer;
  position: relative;
}

input[type="checkbox"]:checked {
  background: var(--accent-soft);
  border-color: var(--accent);
}

input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 8px;
  border: solid var(--t1);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}


/* ─── 21b. DEEPFAKE STUDIO (D3.4) — relocated from the deepfake.js-injected
 * <style>. Forms ride .field--stack/.panel, tabs ride .ui-tab; controls are
 * scoped to .df-section/.df-consent so the consent .pf-check keeps its box. */
.df-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 14px; padding-bottom: 2px; }
.df-tabs .ui-tab { display: inline-flex; align-items: center; gap: 6px; }
.df-field-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.df-section > .field--stack { margin-bottom: 10px; }
.df-consent { display: flex; flex-direction: column; gap: 10px; }
:is(.df-section, .df-consent) .field--stack :is(input, select, textarea) { width: 100%; padding: 8px 10px; font: inherit; font-size: 12px; color: var(--t1); background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; outline: none; }
:is(.df-section, .df-consent) .field--stack :is(input, select, textarea):focus { border-color: var(--accent); }
.df-result:empty { display: none; }
.df-img-cell[data-selected="true"] { outline: 2px solid var(--accent); outline-offset: -2px; }
.df-faceref-list { border: 1px solid var(--border); border-radius: 8px; padding: 8px; background: var(--surface); }


/* ─── 22. RESPONSIVE ─── */

@media (max-width: 768px) {
  :root {
    --sidebar-w: 48px;
  }

  .brand-name {
    display: none;
  }

  .sidebar-brand {
    justify-content: center;
    padding: 12px 8px;
  }

  .sidebar-item {
    justify-content: center;
    padding: 8px;
  }

  .sidebar-item span {
    display: none;
  }

  .sidebar-group-toggle span {
    display: none;
  }

  .sidebar-group-toggle {
    justify-content: center;
    padding: 8px;
  }

  .sidebar-section {
    padding: 0 4px;
  }

  .sidebar-item.is-active {
    padding-left: 6px;
  }

  #content {
    padding: 12px;
  }

  #prompt-zone {
    padding: 10px 12px;
  }

  .ui-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .persona-grid {
    --card-min: 160px;
  }

  .gallery.g-lg {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  .settings-slideover {
    width: 100%;
  }

  .pf-row {
    flex-direction: column;
    gap: 0;
  }

  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 480px) {
  #app {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }

  #sidebar {
    width: 100%;
    height: auto;
    flex-direction: row;
    border-right: none;
    border-top: 1px solid var(--border);
    order: 2;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
  }

  #main {
    order: 1;
  }

  .sidebar-brand {
    display: none;
  }

  .sidebar-nav {
    flex-direction: row;
    flex: 1;
    gap: 0;
    overflow-x: auto;
  }

  .sidebar-section {
    display: flex;
    padding: 4px;
    margin-bottom: 0;
    gap: 2px;
  }

  /* Show ALL sections in the bottom bar at mobile — previously the
     last section (Organize: Library/Analytics/Templates/Recipes/Repurpose)
     was hidden, so those 5 modes were unreachable from a phone. */
  .sidebar-section:last-child {
    display: flex;
  }

  .sidebar-item {
    flex-direction: column;
    gap: 2px;
    padding: 6px 6px;
    font-size:10px;
    min-width: 40px;
    white-space: nowrap;
  }

  .sidebar-item span {
    display: block;
  }

  .sidebar-item.is-active {
    border-left: none;
    border-bottom: 2px solid var(--accent);
    padding-left: 6px;
    border-radius: 0;
  }

  /* Flatten the Organize collapse: hide the toggle, expand the group inline */
  .sidebar-group-toggle {
    display: none;
  }

  .sidebar-group {
    display: flex;
    flex-direction: row;
    flex: 1;
    gap: 2px;
  }

  .sidebar-footer {
    border-top: none;
    padding: 4px;
    margin-top: 0;
  }

  /* Force a sensible 2-column grid on tight viewports — the base minmax(300px,1fr)
     would otherwise collapse to a single column at 375px. */
  .gallery,
  .gallery.g-md,
  .gallery.g-lg {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .ui-grid-4 {
    grid-template-columns: 1fr 1fr;
  }

  .recipe-grid {
    grid-template-columns: 1fr;
  }

  .tmpl-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Shrink the prompt zone footprint on mobile so the content area stays usable */
  #prompt-zone {
    padding: 8px 10px;
    gap: 6px;
  }
  #prompt-zone textarea {
    min-height: 48px;
    font-size: 13px;
  }
  .prompt-controls-row {
    flex-wrap: wrap;
    gap: 4px;
  }
  .prompt-tools-row {
    flex-wrap: wrap;
    gap: 4px;
  }

  /* Lightbox toolbar wraps on mobile instead of squeezing off-screen */
  #lb-actions,
  .lb-actions,
  .lb-toolbar {
    flex-wrap: wrap;
    gap: 4px;
  }

  /* Modal cards get more breathing room on narrow viewports */
  .modal-card,
  .std-modal-card,
  .set-container {
    max-width: 100vw;
    width: 100%;
    margin: 0;
    border-radius: 0;
  }

  .controls-row {
    gap: 6px;
    padding-top: 6px;
  }
}


/* ─── 23. ANIMATIONS ─── */

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Content fade-in on mode switch */
.fade-in {
  animation: fadeIn 150ms ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* ─── 24. LIGHT THEME ─── */

[data-theme="light"] {
  --bg: #f5f5f7;
  --surface: rgba(0,0,0,0.03);
  --elevated: rgba(0,0,0,0.06);
  --border: rgba(0,0,0,0.1);
  --border-hover: rgba(0,0,0,0.18);
  --border-active: rgba(0,0,0,0.25);
  --t1: #1a1a1e;
  --t2: #4a4a52;
  --t3: #7a7a82;
  --t4: #6e6e78;
  --t5: #a0a0a8;
  --accent: #606068;
  --accent-soft: rgba(96,96,104,0.12);
  --accent-muted: rgba(96,96,104,0.2);
}

[data-theme="light"] body {
  background: var(--bg);
}

[data-theme="light"] #lb {
  background: rgba(245,245,247,0.95);
}

[data-theme="light"] #lb-close,
[data-theme="light"] #lb-nav-prev,
[data-theme="light"] #lb-nav-next {
  background: rgba(0,0,0,0.08);
  color: var(--t1);
}

[data-theme="light"] #lb-bottom {
  border-top-color: rgba(0,0,0,0.08);
}

[data-theme="light"] .toast {
  background: rgba(255,255,255,0.95);
  border-color: rgba(0,0,0,0.1);
}

[data-theme="light"] .settings-slideover {
  background: rgba(245,245,247,0.95);
}

[data-theme="light"] .modal {
  background: rgba(245,245,247,0.95);
}

[data-theme="light"] .gc-btn {
  background: rgba(0,0,0,0.06);
  color: var(--t1);
}

[data-theme="light"] .q-badge {
  color: #fff;
}

[data-theme="light"] .gc-ov {
  background: linear-gradient(transparent 50%, rgba(255,255,255,0.8));
}

[data-theme="light"] .gc-p {
  color: rgba(0,0,0,0.7);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.2);
}

[data-theme="light"] #shortcut-help,
[data-theme="light"] #quick-actions-inner,
[data-theme="light"] .ui-modal,
[data-theme="light"] #confirm-dialog .confirm-box {
  background: rgba(255,255,255,0.95);
}

[data-theme="light"] #lb-info-panel {
  background: rgba(245,245,247,0.9);
}

[data-theme="light"] .ph-dd,
[data-theme="light"] .enhance-panel {
  background: rgba(255,255,255,0.95);
}


/* ═══════════════════════════════════════════════════════════════
   25. POLISH PASS — supplemental styles for unstyled classes
   ═══════════════════════════════════════════════════════════════ */

/* ─── API banner (notification card, bottom-right) ─── */
#api-banner {
  position: fixed;
  bottom: var(--s-5);
  right: var(--s-5);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: rgba(15,15,20,0.96);
  backdrop-filter: var(--glass-blur-strong);
  -webkit-backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--accent-muted);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--accent-soft);
  color: var(--t1);
  font-size: var(--text-sm);
  max-width: 420px;
  animation: slideIn .3s var(--ease);
}

#api-banner svg {
  flex-shrink: 0;
  color: var(--accent-strong);
}

#api-banner span {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--t2);
}

#api-banner span b {
  color: var(--t1);
  font-weight: 600;
}

#api-banner button {
  flex-shrink: 0;
}

#api-banner .modal-close {
  position: static;
  width: 24px;
  height: 24px;
  font-size: 16px;
}

/* ─── Empty states ─── */
.empty-state,
.gallery-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-8) var(--s-5);
  min-height: 360px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.empty-state .empty-icon {
  font-size: 32px;
  color: var(--accent);
  margin-bottom: var(--s-4);
  opacity: 0.85;
}

.gallery-empty-state svg {
  color: var(--t4);
  opacity: 0.6;
  margin-bottom: var(--s-4);
}

.empty-title,
.empty-title-new {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--t1);
  letter-spacing: -0.01em;
  margin-bottom: var(--s-2);
}

.empty-hint {
  font-size: var(--text-sm);
  color: var(--t3);
  max-width: 380px;
  line-height: 1.5;
}

.empty-steps {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-5);
  text-align: left;
  width: 100%;
  max-width: 380px;
}

.empty-step {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--t2);
}

.empty-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-radius: 50%;
  font-size: var(--text-xs);
  font-weight: 700;
  flex-shrink: 0;
}

.empty-link {
  color: var(--accent-strong);
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ─── Generic page wrappers used by modes ─── */
.tools-page,
.library-page,
.analytics-page,
.upscale-page {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

/* ─── Persona — trading card style ─── */
.persona-card {
  padding: var(--s-4);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  cursor: pointer;
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
  position: relative;
  overflow: hidden;
}

.persona-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 50%, rgba(124,140,255,0.04));
  opacity: 0;
  transition: opacity var(--dur);
}

.persona-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}

.persona-card:hover::after {
  opacity: 1;
}

.persona-card-img {
  border-radius: var(--radius-md);
  background: var(--bg-deep);
  border: 1px solid var(--border);
}

.persona-card-name {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--t1);
  letter-spacing: -0.01em;
}

.persona-back {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  margin-bottom: var(--s-4);
  border-radius: var(--radius-md);
  color: var(--t3);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.persona-back:hover {
  background: var(--surface-2);
  color: var(--t1);
}

.persona-create-btn,
.persona-gen-btn {
  margin-top: var(--s-4);
}

/* ─── Batch mode polish ─── */
.batch-page {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

/* ─── Voice studio polish ─── */
.voice-studio {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--s-5);
  align-items: stretch;
}

.voice-lib,
.voice-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s-4);
}

.voice-lib-title,
.voice-panel-title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--t1);
  margin-bottom: var(--s-3);
  letter-spacing: -0.01em;
}

.voice-items {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  max-height: 360px;
  overflow-y: auto;
}

.voice-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--t2);
  cursor: pointer;
  font-size: var(--text-sm);
  font-family: var(--font);
  text-align: left;
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
  width: 100%;
}

.voice-item:hover {
  background: var(--surface-2);
  color: var(--t1);
}

.voice-item.is-active {
  background: var(--accent-soft);
  border-color: var(--accent-muted);
  color: var(--t1);
}

.voice-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--elevated-2);
  color: var(--t1);
  font-weight: 700;
  font-size: var(--text-xs);
  flex-shrink: 0;
}

.voice-clone-btn {
  width: 100%;
  margin-top: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--accent-soft);
  color: var(--accent-strong);
  border: 1px dashed var(--accent-muted);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 600;
  font-family: var(--font);
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.voice-clone-btn:hover {
  background: var(--accent-muted);
  color: var(--t1);
}

.audio-action-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--t3);
  cursor: pointer;
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.audio-action-btn:hover {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--t1);
}

/* ─── Prompt library list (used by gallery.js) ─── */
.plib {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.plib-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur);
}

.plib-row:hover {
  background: var(--surface-2);
}

.plib-text {
  font-size: var(--text-xs);
  color: var(--t2);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Sentinel for infinite scroll ─── */
.gallery-sentinel {
  grid-column: 1 / -1;
  height: 1px;
}

/* ─── Toast undo ─── */
.undo-toast {
  position: fixed;
  bottom: var(--s-5);
  left: 50%;
  transform: translateX(-50%);
  z-index: 220;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: rgba(15,15,20,0.96);
  backdrop-filter: var(--glass-blur-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  color: var(--t1);
}

.undo-toast-text {
  color: var(--t2);
}

.undo-toast-btn {
  padding: var(--s-1) var(--s-3);
  background: var(--accent-soft);
  color: var(--accent-strong);
  border: 1px solid var(--accent-muted);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 600;
}

.undo-toast-btn:hover {
  background: var(--accent-muted);
  color: var(--t1);
}

/* ─── Dashboard stats (uses dash-stat in gallery.js) ─── */
.dash-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--s-5);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

.dash-stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-muted), transparent);
}

.dash-stat b {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--t1);
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.dash-stat small {
  font-size: 10px;
  font-weight: 600;
  color: var(--t3);

  letter-spacing: 0.06em;
  margin-top: var(--s-2);
}

.dash-stat-sub {
  font-size: var(--text-xs);
  color: var(--t4);
  margin-top: 2px;
}

/* ─── Persona form fields ─── */
.pf-section {
  margin-bottom: var(--s-4);
}

.pf-half {
  flex: 1;
  min-width: 0;
}

.pf-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--t3);

  letter-spacing: 0.04em;
  margin-bottom: var(--s-2);
}

/* Required-field marker on persona labels — red asterisk, decorative
   (aria-hidden in markup; aria-required carries the semantics). */
.pf-req {
  color: var(--err);
  margin-left: 2px;
  font-weight: 700;
}

.pf-input {
  width: 100%;
  padding: var(--s-2) var(--s-3);
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--t1);
  font-size: var(--text-sm);
  font-family: var(--font);
  outline: none;
  transition: border-color var(--dur);
}

.pf-input:focus {
  border-color: var(--accent-muted);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.pf-select,
.pf-textarea,
.pf-face-builder select {
  width: 100%;
  padding: var(--s-2) var(--s-3);
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--t1);
  font-size: var(--text-sm);
  font-family: var(--font);
  outline: none;
  transition: border-color var(--dur), box-shadow var(--dur);
  appearance: none;
}

.pf-select:focus,
.pf-textarea:focus,
.pf-face-builder select:focus {
  border-color: var(--accent-muted);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.pf-textarea {
  resize: vertical;
  min-height: 92px;
  line-height: 1.5;
}

.pf-hint {
  color: var(--t3);
  font-size: var(--text-sm);
  margin-bottom: var(--s-3);
}

.pf-face-builder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  padding: var(--s-4);
  margin-bottom: var(--s-3);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
}

.pf-face-builder > div {
  min-width: 0;
}

.pf-face-builder label {
  display: block;
  margin-bottom: 6px;
  color: var(--t3);
  font-size: var(--text-xs);

  letter-spacing: 0.05em;
}

.pf-face-build-btn {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--accent-muted);
  background: var(--accent-soft);
  color: var(--t1);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.pf-face-build-btn:hover {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: rgba(var(--accent-rgb), 0.35);
}

.pf-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}

.pf-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--t1);
  font-size: var(--text-sm);
}

.pf-tag button {
  border: none;
  background: transparent;
  color: var(--t3);
  cursor: pointer;
  font: inherit;
}

.pf-tag-add {
  display: flex;
  gap: var(--s-2);
  align-items: center;
}

.pf-tag-input {
  flex: 1;
}

.pf-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.pf-platform {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--t2);
  font-size: var(--text-sm);
}

/* ─── Set key status ─── */
.set-key-status {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--t4);
  margin-left: var(--s-2);
}

.set-key-status.valid {
  background: var(--ok);
  box-shadow: 0 0 6px var(--ok);
}

.set-key-status.invalid {
  background: var(--err);
}

/* ─── Generic ─── */
.glass-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
}

/* ─── Legacy Glass Compatibility Layer ─── */
.flow-list-page,
.persona-dash,
.persona-create,
.persona-detail,
.persona-orchestrate {
  padding: var(--s-5);
}

.persona-header,
.flow-list-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
  flex-wrap: wrap;
}

.persona-header-actions {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.persona-title,
.flow-list-title {
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--t1);
}

.persona-sub,
.flow-list-sub,
.flow-section-sub,
.persona-empty-hint,
.persona-existing-info,
.po-desc {
  color: var(--t3);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.persona-stats-bar,
.flow-stats-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}

.persona-stat,
.flow-stat,
.pa-stat {
  padding: var(--s-4);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.025)) padding-box,
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 18px 36px rgba(0,0,0,0.22);
}

.persona-stat b,
.flow-stat b,
.pa-stat-val {
  display: block;
  color: var(--t1);
  font-size: 1.4rem;
  line-height: 1;
}

.persona-stat small,
.flow-stat small,
.pa-stat-label {
  color: var(--t3);
  font-size: var(--text-xs);
}

.persona-hero-empty,
.persona-empty-block,
.flow-empty,
.flow-section,
.persona-identity,
.persona-content {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02)) padding-box,
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)) border-box;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-lg) + 2px);
  box-shadow: 0 22px 50px rgba(0,0,0,0.24);
}

.persona-hero-empty,
.persona-empty-block,
.flow-empty {
  padding: clamp(28px, 5vw, 48px);
  text-align: center;
}

.persona-hero-icon,
.persona-empty-icon,
.flow-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: var(--s-4);
  border-radius: 22px;
  background: rgba(255,255,255,0.04);
  color: var(--t2);
  border: 1px solid rgba(255,255,255,0.08);
}

.persona-hero-title,
.persona-empty-text,
.flow-empty-text {
  color: var(--t1);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.persona-hero-sub {
  max-width: 700px;
  margin: 10px auto 0;
  color: var(--t3);
  line-height: 1.6;
}

.persona-action-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.persona-action-card,
.flow-tpl-card {
  padding: var(--s-4);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.persona-action-card:hover,
.flow-tpl-card:hover,
.wizard-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 18px 36px rgba(0,0,0,0.22);
}

/* First-run wizard cards — border accent on hover matches the accent-soft
 * icon background so the whole card feels like one unit. */
.wizard-card:hover {
  border-color: var(--accent);
  background: var(--elevated);
}
.wizard-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.persona-action-icon,
.persona-template-icon,
.flow-tpl-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  margin-bottom: var(--s-3);
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--t1);
}

.persona-action-name,
.persona-template-name,
.flow-tpl-name,
.flow-section-title,
.pa-section-title {
  color: var(--t1);
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.persona-action-desc,
.flow-tpl-desc,
.persona-template-meta,
.flow-tpl-meta,
.persona-card-arch,
.persona-ref-info,
.pf-hint,
.pf-pillar-detail,
.persona-id-arch,
.persona-id-face,
.po-score {
  color: var(--t3);
}

.persona-action-cta,
.persona-template-cta {
  margin-top: var(--s-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--t2);
  font-size: var(--text-xs);
  font-weight: 600;
}

.persona-arche-chips,
.pa-tags,
.persona-template-tags,
.pg-checks {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.persona-arche-chip,
.persona-tag,
.persona-ref-badge,
.flow-tpl-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: var(--radius-full);
  font-size: 10px;
  color: var(--t2);
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.06);
}

.flow-tpl-badge--linear,
.flow-tpl-badge--template {
  color: var(--t1);
}

.persona-card-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.persona-card-stats {
  color: var(--t3);
}

.persona-card-toggle {
  margin-top: var(--s-2);
  align-self: flex-start;
  padding: 6px 10px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: var(--t2);
  cursor: pointer;
  font-size: var(--text-xs);
}

.persona-card-toggle.is-active,
.persona-card-active-badge {
  background: var(--accent-soft);
  border-color: var(--accent-muted);
  color: var(--t1);
}

.persona-card-active-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--radius-full);
  font-size: 10px;
  backdrop-filter: blur(10px);
}

.persona-tpl-intro {
  margin-bottom: var(--s-4);
  color: var(--t3);
}

.persona-create-head {
  margin-bottom: var(--s-4);
}

.persona-template-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 40px rgba(0,0,0,0.28);
  cursor: pointer;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.persona-template-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 24px 48px rgba(0,0,0,0.36);
}

.persona-section-title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-6) 0 var(--s-4);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--t1);
}

.persona-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--t2);
  font-size: var(--text-xs);
}

.persona-templates-grid,
.flow-tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-3);
}

.persona-template-head,
.flow-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
  flex-wrap: wrap;
}

.persona-template-pillars-label {
  margin-top: var(--s-3);
  margin-bottom: var(--s-2);
  color: var(--t3);
  font-size: var(--text-xs);

  letter-spacing: 0.08em;
}

.persona-template-pillars {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.persona-template-pillar {
  color: var(--t2);
  font-size: var(--text-sm);
}

.persona-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: 36px;
  color: var(--t3);
}

.persona-loading-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.12);
  border-top-color: var(--t1);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

.persona-upload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-4);
}

.persona-upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 220px;
  padding: var(--s-6);
  border-radius: 24px;
  border: 1px dashed rgba(255,255,255,0.14);
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.05), transparent 55%),
    rgba(255,255,255,0.02);
  color: var(--t2);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur), background var(--dur), transform var(--dur);
}

.persona-upload-zone:hover {
  border-color: rgba(255,255,255,0.22);
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.08), transparent 55%),
    rgba(255,255,255,0.03);
  transform: translateY(-1px);
}

.persona-upload-icon {
  color: var(--t1);
  opacity: 0.9;
}

.persona-upload-text {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--t1);
}

.persona-upload-sub,
.persona-upload-name,
.persona-existing-info {
  color: var(--t3);
  font-size: var(--text-sm);
}

.persona-upload-thumb {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}

.persona-upload-thumb img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

.persona-upload-name {
  padding: 8px 10px;
}

.persona-detail-layout {
  display: grid;
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
}

.persona-identity,
.persona-content {
  padding: var(--s-5);
}

.persona-identity {
  position: sticky;
  top: 96px;
}

.persona-id-img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--s-4);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}

.persona-id-img img,
.persona-ref img,
.persona-output img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.persona-id-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t3);
}

.persona-id-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--t1);
  letter-spacing: -0.02em;
}

.persona-id-stats,
.pa-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  margin: var(--s-4) 0;
}

.persona-id-stats > div {
  padding: var(--s-3);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}

.persona-id-stats b {
  display: block;
  color: var(--t1);
}

.persona-id-face small {
  display: block;
  margin-bottom: 4px;
  color: var(--t3);
}

.persona-content {
  min-width: 0;
}

.persona-tabs {
  display: flex;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-wrap: wrap;
}

.persona-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--t3);
  cursor: pointer;
  font-size: var(--text-sm);
}

.persona-tab:hover {
  background: rgba(255,255,255,0.04);
  color: var(--t1);
}

.persona-tab.is-active {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.08);
  color: var(--t1);
}

.persona-tab-content {
  min-height: 280px;
}

.persona-lib-filters,
.persona-refs-upload {
  display: flex;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  flex-wrap: wrap;
}

.persona-lib-grid,
.persona-refs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-3);
}

.persona-output,
.persona-ref {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}

.po-approved {
  border-color: rgba(74,222,128,0.35);
}

.po-rejected {
  border-color: rgba(248,113,113,0.35);
}

.po-pending {
  border-color: rgba(251,191,36,0.35);
}

.po-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: var(--s-3);
  background: linear-gradient(transparent 40%, rgba(0,0,0,0.78));
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.persona-output:hover .po-overlay {
  opacity: 1;
}

.po-actions {
  display: flex;
  gap: 6px;
}

.po-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: none;
  background: rgba(255,255,255,0.16);
  color: white;
  cursor: pointer;
}

.po-approve:hover {
  background: rgba(74,222,128,0.4);
}

.po-reject:hover {
  background: rgba(248,113,113,0.4);
}

.persona-ref-primary {
  border-color: rgba(255,255,255,0.18);
}

.persona-ref-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px;
  background: linear-gradient(transparent, rgba(0,0,0,0.82));
  font-size: var(--text-xs);
}

.persona-generate {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.pg-title {
  color: var(--t1);
  font-size: var(--text-lg);
  font-weight: 700;
}

.persona-analytics {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.po-persona-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  max-height: 320px;
  overflow-y: auto;
}

.flow-section {
  padding: var(--s-5);
  margin-bottom: var(--s-4);
}

#flow-canvas-wrap {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

.flow-tpl-card--saved .flow-tpl-icon,
.flow-tpl-icon--saved {
  color: var(--t1);
}

.nf-toolbar {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 2px;
  padding: 4px 6px;
  background:
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.5)) padding-box,
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)) border-box;
  backdrop-filter: blur(40px) saturate(1.8);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  z-index: 10;
  white-space: nowrap;
  max-width: calc(100% - 16px);
}

.nf-toolbar button {
  height: 30px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: var(--radius-sm);
  color: var(--t2);
  font-size: 11px;
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
  white-space: nowrap;
  flex-shrink: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}

.nf-toolbar button:hover {
  color: var(--t1);
  background: rgba(255,255,255,0.06);
}

.nf-toolbar button.pri {
  padding: 0 14px;
  color: var(--t1);
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0.03));
}

.nf-toolbar .nf-sep {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,0.08);
  margin: 0 2px;
  flex-shrink: 0;
}

.nf-flow-name,
.nf-info {
  color: var(--t3);
}

.nf-flow-name {
  font-size: 11px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  cursor: pointer;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nf-info {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 10px;
  z-index: 5;
}

.voice-tools {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

/* .voice-tool-btn adopts .btn-ghost geometry (grouped above); flex:1 fills the tool row */
.voice-tool-btn { flex: 1; justify-content: center; }

.voice-output {
  display: flex;
  flex-direction: column;
  min-height: 540px;
  padding: var(--s-5);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
    rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.07);
}

.voice-output-title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--t1);
  margin-bottom: var(--s-4);
}

.voice-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  color: var(--t3);
}

/* Starter cards hover treatment — consistent with Batch / Image modes. */
.voice-starter:hover,
.empty-quickstart:hover {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
}

.voice-empty svg {
  color: var(--t2);
  opacity: 0.9;
}

.voice-empty-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--t1);
}

.voice-empty-hint {
  font-size: var(--text-sm);
  color: var(--t3);
}

.nf-guide,
.nf-search,
.nf-minimap {
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(36px) saturate(1.7);
  -webkit-backdrop-filter: blur(36px) saturate(1.7);
  border: 1px solid rgba(255,255,255,0.08);
}

.nf-guide {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 40vh;
  overflow-y: auto;
  padding: 16px 20px;
  z-index: 15;
  font-size: var(--text-xs);
  color: var(--t2);
  line-height: 1.6;
}

.nf-guide.open,
.nf-search.open {
  display: block;
}

.nf-guide-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nf-guide-close {
  cursor: pointer;
  color: var(--t3);
  font-size: 16px;
}

.nf-guide h4 {
  font-size: var(--text-sm);
  color: var(--t1);
  margin: 12px 0 6px;
}

.nf-guide-shortcut {
  display: flex;
  gap: 12px;
  padding: 3px 0;
}

.nf-guide-shortcut kbd {
  min-width: 80px;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--t1);
  text-align: center;
}

.nf-minimap {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 180px;
  height: 120px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  z-index: 10;
}

.nf-minimap canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.nf-search {
  position: absolute;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  border-radius: var(--radius-md);
  padding: 8px;
  z-index: 20;
  display: none;
}

.nf-search-input {
  width: 100%;
  padding: 6px 10px;
  font-size: var(--text-sm);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  color: var(--t1);
}

.nf-search-results {
  max-height: 200px;
  overflow-y: auto;
  margin-top: 4px;
}

.nf-search-item {
  padding: 6px 8px;
  cursor: pointer;
  font-size: var(--text-xs);
  color: var(--t2);
  border-radius: 4px;
}

.nf-search-item:hover,
.nf-search-item.is-active {
  background: rgba(255,255,255,0.06);
  color: var(--t1);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1024px) {
  .persona-detail-layout {
    grid-template-columns: 1fr;
  }

  .persona-identity {
    position: static;
    top: auto;
  }
}

@media (max-width: 768px) {
  .flow-list-page,
  .persona-dash,
  .persona-create,
  .persona-detail,
  .persona-orchestrate {
    padding: var(--s-3);
  }

  .persona-action-cards,
  .persona-templates-grid,
  .flow-tpl-grid {
    grid-template-columns: 1fr;
  }

  .nf-toolbar {
    left: 8px;
    right: 8px;
    transform: none;
    max-width: none;
  }

  .nf-search {
    width: calc(100% - 24px);
  }

  .nf-minimap {
    width: 120px;
    height: 82px;
  }
}

/* ─── Section headers (used by analytics, templates, library) ─── */
.ui-section-header {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  flex-wrap: wrap;
}

.ui-section-header h2,
.ui-section-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--t1);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.ui-section-count {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--s-3);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--t3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
}

/* Templates niche card icon container */
.tmpl-card .gi {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent-strong);
  margin-bottom: var(--s-3);
}

.tmpl-card .gi svg {
  width: 22px;
  height: 22px;
}

/* Library bar */
.lib-bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  flex-wrap: wrap;
}

/* Set accent swatch */
.set-accent-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
  flex-shrink: 0;
}

.set-accent-swatch:hover {
  transform: scale(1.1);
}

.set-accent-swatch.is-active {
  border-color: var(--t1);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* ─── Responsive: stack voice studio on small screens ─── */
@media (max-width: 900px) {
  .voice-studio {
    grid-template-columns: 1fr;
  }
  .pf-face-builder {
    grid-template-columns: 1fr;
  }
  #content {
    padding: var(--s-5);
  }
  #prompt-zone {
    padding: var(--s-4) var(--s-5);
  }
}

/* ═══ Workflow Shell ═══ */
#workspace-meta {
  padding: 18px 22px 0;
}

.workspace-meta-card,
.workflow-hero,
.workflow-card {
  border: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
    radial-gradient(circle at top left, rgba(var(--accent-rgb), .12), transparent 38%);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
}

.workspace-meta-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
}

.workspace-meta-title,
.workflow-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--t1);
}

.workspace-meta-desc,
.workflow-sub,
.workflow-card-sub {
  color: var(--t3);
  font-size: 12px;
  line-height: 1.5;
}

.workspace-meta-actions,
.workflow-stats,
.workflow-mini-stats,
.persona-id-actions,
.persona-quick-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.workspace-meta-btn,
.workflow-tab {
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: var(--t2);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 11px;
  cursor: pointer;
  transition: .18s ease;
}

.workspace-meta-btn:hover,
.workflow-tab:hover,
.persona-source-card:hover,
.persona-template-chip:hover {
  border-color: rgba(var(--accent-rgb), .4);
  color: var(--t1);
}

.workflow-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.workflow-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
}

.workflow-hero--compact {
  margin-bottom: 14px;
}

.workflow-stat {
  min-width: 88px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
}

.workflow-stat b,
.workflow-mini-stats b,
.persona-editor-health b,
.batch-run-meta-grid b {
  display: block;
  color: var(--t1);
  font-size:16px;
  line-height: 1.1;
}

.workflow-stat small,
.workflow-mini-stats small,
.persona-editor-health small,
.batch-run-meta-grid small {
  color: var(--t4);
  font-size: 10px;

  letter-spacing: .1em;
}

.workflow-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.workflow-tab.is-active,
.persona-source-card.is-active {
  border-color: rgba(var(--accent-rgb), .55);
  background: rgba(var(--accent-rgb), .12);
  color: var(--t1);
}

.workflow-grid {
  display: grid;
  gap: 18px;
}

.workflow-grid--two {
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
}

.workflow-grid--monitor {
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
}

.workflow-card {
  padding: 18px;
}

.workflow-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.workflow-card-title {
  color: var(--t1);
  font-size:14px;
  font-weight: 600;
}

.workflow-note,
.workflow-context-card {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.035);
  color: var(--t2);
  font-size: 12px;
  line-height: 1.45;
}

.workflow-note--warn {
  border-color: rgba(251,191,36,.28);
  background: rgba(251,191,36,.08);
}

.workflow-note--ok {
  border-color: rgba(74,222,128,.25);
  background: rgba(74,222,128,.08);
}

.workflow-context-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
}

.workflow-muted {
  color: var(--t4);
  font-size: 11px;
}

.workflow-empty {
  padding: 18px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  color: var(--t4);
  font-size: 12px;
}

.workflow-mini-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.workflow-mini-stats > div,
.persona-editor-health > div,
.batch-run-meta-grid > div {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.05);
}

.workflow-divider {
  height: 1px;
  background: rgba(255,255,255,.07);
  margin: 14px 0;
}

/* ═══ Batch Workspace ═══ */
.batch-builder-grid,
.batch-composer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.batch-composer-grid {
  margin-bottom: 14px;
}

.wf-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wf-field span,
.wf-field label,
.wf-check {
  color: var(--t3);
  font-size: 11px;
}

.wf-field input,
.wf-field select,
.wf-field textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: var(--t1);
  padding: 10px 12px;
  resize: vertical;
}

.wf-field small {
  color: var(--t4);
  font-size: 10px;
}

.wf-field--wide {
  grid-column: 1 / -1;
}

.wf-field--inline {
  justify-content: flex-end;
}

.batch-builder-actions,
.batch-primary-actions,
.batch-review-toolbar,
.batch-review-toolbar-actions,
.batch-run-actions,
.batch-setup-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.batch-preflight-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.batch-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}

.batch-review-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  cursor: pointer;
}

.batch-review-card.excluded {
  opacity: .45;
}

.batch-review-card-text {
  color: var(--t2);
  font-size: 12px;
  line-height: 1.5;
}

.batch-monitor-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.batch-monitor-title,
.batch-setup-name,
.batch-run-name,
.persona-editor-name {
  color: var(--t1);
  font-size: 14px;
  font-weight: 600;
}

.batch-run-card {
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  overflow: hidden;
}

.batch-run-card.is-active {
  border-color: rgba(var(--accent-rgb), .34);
}

.batch-run-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 14px 16px;
  color: inherit;
  cursor: pointer;
}

.batch-run-meta,
.batch-setup-meta,
.persona-editor-meta {
  color: var(--t4);
  font-size: 11px;
  margin-top: 4px;
}

.batch-run-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  color: var(--t3);
  font-size: 11px;
}

.batch-run-progress {
  height: 8px;
  background: rgba(255,255,255,.04);
}

.batch-run-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
}

.batch-run-detail {
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.batch-run-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.batch-setup-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.batch-setup-card {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
}

.batch-side-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.batch-run-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.batch-run-thumb {
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t4);
  font-size: 10px;
}

.batch-run-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ═══ Persona Workspace ═══ */
.persona-source-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.persona-source-card,
.persona-template-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  color: var(--t2);
  cursor: pointer;
  text-align: left;
}

.persona-source-card span,
.persona-template-chip b {
  color: var(--t1);
  font-size: 13px;
}

.persona-source-card small,
.persona-template-chip small {
  color: var(--t4);
  font-size: 11px;
  line-height: 1.4;
}

.persona-template-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.persona-editor {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
}

.persona-editor-aside {
  padding: 18px;
}

.persona-editor-kicker {
  color: var(--t4);
  font-size: 10px;
  letter-spacing: .16em;

  margin-bottom: 8px;
}

.persona-editor-health {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.persona-tabs--editor {
  margin-bottom: 14px;
}

.pf-pillar-edit {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 10px;
  margin-top: 10px;
}

.persona-quick-actions {
  margin-top: 10px;
}

.persona-id-actions {
  margin-top: 10px;
}

/* ═══ Flow ═══ */
.flow-quickstart {
  margin-bottom: 20px;
}

/* ═══ Responsive ═══ */
@media (max-width: 980px) {
  .workflow-grid--two,
  .workflow-grid--monitor,
  .persona-editor {
    grid-template-columns: 1fr;
  }

  .workflow-hero,
  .workspace-meta-card {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 760px) {
  #workspace-meta {
    padding: 14px 14px 0;
  }

  .workflow-mini-stats,
  .batch-run-meta-grid,
  .persona-editor-health,
  .persona-source-grid,
  .batch-builder-grid,
  .batch-composer-grid,
  .pf-pillar-edit {
    grid-template-columns: 1fr;
  }
}

/* ═══ RESTORED COMPONENT STYLES BACKFILL ═══
   Pulled from the pre-v7 CSS (commit fb2662e) for the 309 classes the
   v7 rewrite never ported, plus fallback tokens + fresh rules for the
   114 new-only classes that were only ever referenced from JS. */

:root {
  /* Token aliases the v7 rewrite dropped but ported rules still reference */
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
  --font-medium: 500;
  --transition-fast: 120ms ease;
  --transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-float: 0 4px 12px rgba(0,0,0,0.3), 0 12px 40px rgba(0,0,0,0.4);
  --gb-active: linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0.06));
  --label-tracking: 0.04em;
  --accent-red-rgb: 248,113,113;
  --g3: rgba(255,255,255,0.08);
  --mx: 16px;
  --my: 12px;
}



/* ═══ RESTORED COMPONENT STYLES (ported from pre-v7 CSS) ═══ */

.pill{
  display:inline-flex;align-items:center;gap:6px;padding:6px 14px;
  border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-medium);
  color:var(--text-secondary);border:1px solid transparent;background:none;
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);white-space:nowrap;cursor:pointer;
}

.pill svg{width:14px;height:14px;opacity:.6;transition:opacity var(--transition-fast)}

.pill:hover{color:var(--text-primary);background:rgba(255,255,255,0.05)}

.pill:hover svg{opacity:.9}

.pill.is-active{
  color:#a0a0a8;
  border:1px solid transparent;
  background:
    linear-gradient(rgba(255,255,255,0.04), rgba(255,255,255,0.02)) padding-box,
    var(--gb-active) border-box;
  box-shadow:0 0 14px rgba(255,255,255,0.03);
}

.pill.is-active svg{opacity:1;filter:drop-shadow(0 0 3px rgba(255,255,255,.12))}

.pi-dot{
  position:absolute;
  right:10px;top:50%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;
  background:var(--text-muted);
  transition:background var(--transition-fast);
  cursor:help;
}

.pi-dot.green{background:var(--ok)}

.pi-dot.yellow{background:var(--warn)}

.pi-dot.orange{background:color-mix(in srgb, var(--warn), var(--err))}

.pi-dot.red{background:var(--err)}

.tmpl-chip{
  padding:7px 12px;
  border-radius:var(--radius-full);
  font-size:11px;
  color:var(--text-secondary);
  border:1px solid rgba(255,255,255,.08);
  cursor:pointer;
  white-space:nowrap;
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
  background:rgba(255,255,255,.02);
}

.tmpl-chip:hover{color:var(--text-primary);border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.06)}

.ctrl-select.model-select{
  font-weight:var(--font-medium);
  max-width:200px;
}

.ctrl-slider-v{
  font-size:10px;
  color:var(--accent);
  font-weight:var(--font-semi);
  font-family:var(--font-mono);
  min-width:28px;
  text-align:right;
}

.dash-hero{text-align:center;padding:24px 0 20px}

.dash-title{
  font-family:var(--font-display);
  font-size:var(--text-xl);font-weight:800;
  background:linear-gradient(135deg, var(--text-primary), var(--accent));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;letter-spacing:-0.02em;
}

.dash-sub{font-size:var(--text-sm);color:var(--text-muted);margin-top:4px}

.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}

.dash-label{
  font-size:var(--text-xs);font-weight:var(--font-semi);
  color:var(--text-muted);letter-spacing:.05em;
  margin-bottom:8px;padding:0 2px;
}

.dash-activity{display:flex;gap:4px;align-items:flex-end;height:40px;margin-bottom:16px}

.dash-bar{
  flex:1;
  background:linear-gradient(180deg, var(--accent), rgba(var(--accent-rgb),0.3));
  border-radius:3px 3px 0 0;
  min-height:4px;
  transition:height 0.4s cubic-bezier(0.4,0,0.2,1);
}

.dash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin-bottom:16px}

.dash-card{
  padding:14px;
  background:var(--glass-bg);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-md);
  cursor:pointer;
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
  position:relative;overflow:hidden;
}

.dash-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(var(--accent-rgb),0.08), transparent 60%);
  opacity:0;transition:opacity 0.3s;pointer-events:none;
}

.dash-card:hover::before{opacity:1}

.dash-card:hover{border-color:var(--glass-border-hover);transform:translateY(-2px);box-shadow:var(--shadow-float)}

.dash-card .gi{margin-bottom:8px}

.dash-card .gi svg{width:24px;height:24px;color:var(--accent);opacity:.7}

.dash-card-name{font-size:var(--text-sm);font-weight:var(--font-semi);color:var(--text-primary)}

.dash-card-desc{font-size:var(--text-xs);color:var(--text-muted);margin-top:2px}

.dash-card-hint{font-size:10px;color:rgba(255,255,255,0.12);margin-top:3px}

.plib-item{
  display:flex;align-items:center;gap:8px;
  padding:6px 8px;border-radius:var(--radius-sm);
  cursor:pointer;transition:background 0.15s;
}

.plib-item:hover{background:rgba(255,255,255,0.03)}

.plib-meta{font-size:10px;color:var(--text-muted);flex-shrink:0}

.plib-del{font-size:14px;color:var(--text-muted);cursor:pointer;opacity:0;transition:opacity 0.15s}

.plib-item:hover .plib-del{opacity:1}

.plib-del:hover{color:var(--err)}

.plib-use{font-size:10px;color:var(--accent);opacity:0;transition:opacity 0.15s;flex-shrink:0}

.plib-item:hover .plib-use{opacity:1}

.plib-toolbar{display:flex;align-items:center;gap:6px;padding:6px 0;flex-wrap:wrap}

.plib-search{
  flex:1;min-width:120px;padding:5px 10px;border-radius:var(--radius-full);font-size:11px;
  color:var(--text-primary);background:var(--glass-bg);border:1px solid var(--glass-border);
  outline:none;transition:border-color var(--transition-fast);
}

.plib-search:focus{border-color:var(--accent)}

.plib-sort{
  padding:4px 8px;border-radius:6px;font-size:11px;
  color:var(--text-primary);background:var(--glass-bg);border:1px solid var(--glass-border);
  outline:none;
}

.plib-cat-chip{
  padding:4px 10px;border-radius:var(--radius-full);font-size:10px;font-weight:var(--font-medium);
  color:var(--text-muted);background:var(--glass-bg);border:1px solid var(--glass-border);
  cursor:pointer;transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);white-space:nowrap;
}

.plib-cat-chip:hover{border-color:var(--glass-border-hover);color:var(--text-secondary)}

.plib-cat-chip.is-active{color:var(--accent);background:rgba(var(--accent-rgb),.08);border-color:rgba(var(--accent-rgb),.2)}

.plib-cat-label{font-size:10px;color:var(--text-muted);margin-top:2px}

.plib-star{cursor:pointer;font-size:12px;color:var(--text-muted);transition:color var(--transition-fast);flex-shrink:0}

.plib-star:hover,.plib-star.on{color:var(--accent)}

.plib-tags{display:flex;gap:3px;flex-wrap:wrap;margin-top:2px}

.plib-tag{font-size:10px;color:var(--text-muted);background:var(--glass-bg-inset);padding:1px 5px;border-radius:4px}

.plib-actions{display:flex;gap:4px;align-items:center;opacity:0;transition:opacity var(--transition-fast)}

.plib-item:hover .plib-actions{opacity:1}

.plib-io-btn{
  padding:4px 8px;border-radius:6px;font-size:10px;
  color:var(--text-muted);background:none;border:1px solid var(--glass-border);
  cursor:pointer;transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.plib-io-btn:hover{color:var(--text-secondary);border-color:var(--glass-border-hover)}

.up-drop{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:200px;gap:12px;
  background:var(--glass-bg);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:2px dashed rgba(255,255,255,0.06);
  border-radius:var(--radius-lg);
  cursor:pointer;
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
  padding:32px;
}

.up-drop:hover{border-color:rgba(var(--accent-rgb),0.3);background:rgba(var(--accent-rgb),0.03)}

.up-drop svg{width:32px;height:32px;color:var(--text-muted);opacity:.4}

.up-drop-text{font-size:var(--text-xs);color:var(--text-muted)}

.up-preview{
  max-width:100%;max-height:60vh;
  border-radius:var(--radius-md);
  border:1px solid var(--glass-border);
  overflow:hidden;
}

.up-preview img{width:100%;height:auto;display:block}

.up-wrap{padding:16px}

.vid-ref{display:flex;align-items:center;gap:8px}

.vid-ref-thumb{
  width:48px;height:48px;
  border-radius:var(--radius-sm);
  border:2px dashed rgba(255,255,255,0.1);
  background:rgba(0,0,0,0.3);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  overflow:hidden;
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.vid-ref-thumb:hover{border-color:rgba(var(--accent-rgb),0.4);background:rgba(var(--accent-rgb),0.05)}

.vid-ref-thumb img{width:100%;height:100%;object-fit:cover;border-radius:6px}

.vid-ref-thumb svg{width:18px;height:18px;color:var(--text-muted);opacity:.5}

.vid-ref-hint{font-size:10px;color:var(--text-muted)}

.audio-card{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  background:var(--glass-bg);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-md);
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.audio-card:hover{border-color:rgba(255,255,255,0.1)}

.audio-play-btn{
  width:34px;height:34px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;cursor:pointer;
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
  border:1px solid var(--glass-border);
  background:rgba(255,255,255,0.04);
  color:var(--text-primary);
}

.audio-play-btn:hover{background:rgba(255,255,255,0.08)}

.audio-play-btn.playing{
  border:1px solid transparent;
  background:
    linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.03)) padding-box,
    var(--gb-active) border-box;
  color:#a0a0a8;
  box-shadow:0 0 12px rgba(255,255,255,0.04);
}

.audio-play-btn svg{width:14px;height:14px}

.audio-info{flex:1;min-width:0}

.audio-info-title{
  font-size:var(--text-xs);color:var(--text-primary);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.audio-info-meta{font-size:10px;color:var(--text-muted);margin-top:2px}

.clone-item{
  display:flex;align-items:center;gap:6px;
  padding:5px 6px;border-radius:6px;
  cursor:pointer;transition:background 0.15s;
}

.clone-item:hover{background:rgba(255,255,255,0.04)}

.clone-avatar{
  width:24px;height:24px;border-radius:50%;
  background:rgba(var(--accent-rgb),0.12);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;color:var(--accent);
  flex-shrink:0;
}

.clone-name{font-size:var(--text-xs);color:var(--text-primary)}

.clone-engine{font-size:10px;color:var(--text-muted);margin-left:auto}

.clone-empty{font-size:var(--text-xs);color:rgba(255,255,255,0.15);padding:4px}

.clone-loading{padding:12px;text-align:center;color:rgba(255,255,255,0.15);font-size:var(--text-xs)}

.gallery-hero-header{
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-md);
  padding:8px 14px;
  margin:0 0 12px;
  display:flex;align-items:center;gap:8px;
  position:sticky;top:0;z-index:5;
}

.gallery-hero-header .head-t{
  font-size:var(--text-sm);font-weight:var(--font-semi);
  color:var(--text-primary);
}

.gallery-hero-header .head-c{
  font-size:var(--text-xs);color:var(--text-muted);
  background:var(--glass-bg-inset);
  padding:2px 8px;border-radius:10px;
}

.skel{
  background:linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 75%);
  background-size:200% 100%;
  animation:skel-shimmer 1.5s infinite;
}

.skel-row{height:12px;border-radius:4px;margin-bottom:6px}

.lib-chip{
  padding:5px 12px;border-radius:var(--radius-full);font-size:11px;font-weight:var(--font-medium);
  color:var(--text-muted);background:var(--glass-bg);border:1px solid var(--glass-border);
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);cursor:pointer;white-space:nowrap;
}

.lib-chip:hover{border-color:var(--glass-border-hover);color:var(--text-secondary)}

.lib-chip.is-active{color:var(--accent);background:rgba(var(--accent-rgb),.08);border-color:rgba(var(--accent-rgb),.2)}

.lib-spacer{flex:1;min-width:4px}

.lib-search-w{
  position:relative;display:flex;align-items:center;
}

.lib-search-w svg{position:absolute;left:8px;width:12px;height:12px;color:var(--text-muted);pointer-events:none}

.lib-search{
  padding:5px 10px 5px 26px;border-radius:var(--radius-full);font-size:11px;
  color:var(--text-primary);background:var(--glass-bg);border:1px solid var(--glass-border);
  width:180px;transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);outline:none;
}

.lib-search:focus{border-color:var(--accent);width:220px}

.lib-filters{
  display:flex;align-items:center;gap:6px;padding:6px 0;flex-wrap:wrap;
}

.lib-filters select,.lib-filters input{
  padding:4px 8px;border-radius:6px;font-size:11px;
  color:var(--text-primary);background:var(--glass-bg);border:1px solid var(--glass-border);
  transition:border-color var(--transition-fast);outline:none;
}

.lib-filters select:focus,.lib-filters input:focus{border-color:var(--accent)}

.lf-label{font-size:10px;color:var(--text-muted);font-weight:var(--font-medium)}

.lf-clear{
  padding:4px 10px;border-radius:var(--radius-full);font-size:10px;font-weight:var(--font-medium);
  color:var(--text-muted);background:none;border:1px solid var(--glass-border);cursor:pointer;
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.lf-clear:hover{color:var(--text-secondary);border-color:var(--glass-border-hover)}

.bulk-strip{
  display:flex;align-items:center;gap:8px;padding:8px 12px;margin:4px 0;
  background:rgba(var(--accent-rgb),.06);border:1px solid rgba(var(--accent-rgb),.15);
  border-radius:var(--radius-lg);font-size:12px;color:var(--text-secondary);
}

.bulk-btn{
  display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:6px;font-size:11px;
  font-weight:var(--font-medium);color:var(--text-secondary);background:var(--glass-bg);
  border:1px solid var(--glass-border);cursor:pointer;transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.bulk-btn svg{width:12px;height:12px}

.bulk-btn:hover{border-color:var(--glass-border-hover);background:rgba(255,255,255,.04)}

.bulk-btn.del:hover{color:#a06060;border-color:rgba(160,96,96,.3)}

.sel-all-bar{
  display:flex;align-items:center;gap:8px;padding:4px 0;font-size:10px;
}

.sel-all-bar button{
  padding:3px 10px;border-radius:var(--radius-full);font-size:10px;
  color:var(--text-muted);background:none;border:1px solid var(--glass-border);
  cursor:pointer;transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.sel-all-bar button:hover{color:var(--text-secondary);border-color:var(--glass-border-hover)}

.sel-hint{color:var(--text-muted);font-size:10px;margin-left:auto}

.gallery-group-head{
  display:flex;align-items:center;gap:6px;padding:6px 8px;cursor:pointer;
  border-radius:var(--radius-md);transition:background var(--transition-fast);
}

.gallery-group-head:hover{background:rgba(255,255,255,.02)}

.group-toggle{width:14px;height:14px;color:var(--text-muted);transition:transform .2s}

.gallery-group.collapsed .group-toggle{transform:rotate(-90deg)}

.group-label{font-size:12px;font-weight:var(--font-semi);color:var(--text-secondary)}

.group-count{font-size:10px;color:var(--text-muted);background:var(--glass-bg-inset);padding:1px 6px;border-radius:10px}

.modal-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:16px;
}

.modal-title{font-family:var(--font-display);font-size:14px;font-weight:var(--font-semi);color:var(--text-primary)}

.std-modal-form{display:flex;flex-direction:column;gap:10px}

.std-modal-field{display:flex;flex-direction:column;gap:4px}

.std-modal-label{font-size:11px;color:var(--text-muted);font-weight:600}

.std-modal-input,.std-modal-textarea,.std-modal-select{
  width:100%;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius-sm);
  color:var(--text-primary);
  padding:8px 10px;
  font-size:12px;
  font-family:inherit;
}

.std-modal-textarea{resize:vertical;min-height:110px}

.std-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}

.std-modal-header-actions{display:flex;align-items:center;gap:8px}

.std-modal-list{display:flex;flex-direction:column;gap:8px;max-height:50vh;overflow-y:auto}

.std-modal-list-card{
  padding:10px 12px;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
  transition:background var(--transition-fast),border-color var(--transition-fast);
  cursor:pointer;
}

.std-modal-list-card:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.14)}

.std-modal-note{
  font-size:11px;
  color:var(--text-muted);
  line-height:1.5;
  padding:10px 12px;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
}

.std-modal-inline{
  display:flex;
  gap:8px;
  align-items:center;
}

.std-modal-inline > *{flex:1}

.std-modal-grid{
  display:grid;
  gap:12px;
}

.std-modal-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}

.std-modal-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}

.std-modal-card{
  padding:10px 12px;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
}

.std-modal-empty{
  padding:16px;
  text-align:center;
  color:var(--text-muted);
  font-size:12px;
  border:1px dashed rgba(255,255,255,0.1);
  border-radius:var(--radius-md);
}

.std-modal-chip-row{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.std-modal-stack{display:flex;flex-direction:column;gap:10px}

.std-modal-result{
  padding:12px;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
}

.std-modal-meta{font-size:10px;color:var(--text-muted)}

.std-modal-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}

.std-modal-preview-card{
  padding:10px;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
}

.std-modal-thumb-strip{display:flex;gap:6px;overflow-x:auto;padding:4px 0}

.std-modal-thumb{
  min-width:80px;
  text-align:center;
}

.std-modal-thumb img{
  width:80px;
  height:80px;
  object-fit:cover;
  border-radius:6px;
  border:1px solid var(--glass-border);
}

.std-modal-thumb-label{
  font-size:10px;
  color:var(--text-muted);
  margin-top:2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.std-modal-stat-list{display:flex;flex-direction:column;gap:6px}

.std-modal-stat-row{display:flex;align-items:center;gap:8px}

.std-modal-stat-row>.label{font-size:11px;color:var(--text-primary);min-width:80px}

.std-modal-stat-row>.bar{flex:1;height:4px;background:var(--g3);border-radius:2px}

.std-modal-stat-row>.bar>div{height:100%;background:var(--accent);border-radius:2px}

.std-modal-stat-row>.value{font-size:10px;color:var(--text-muted);min-width:30px;text-align:right}

.std-modal-cloud{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}

.std-modal-cloud-term{padding:2px 4px;cursor:default}

.std-modal-result{
  padding:12px;
  border-radius:var(--radius-md);
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
}

.std-modal-meta{font-size:10px;color:var(--text-muted)}

.modal-tabs{display:flex;gap:8px;margin-bottom:12px}

.modal-tab{
  flex:1;padding:8px;
  border-radius:var(--radius-sm);
  font-size:var(--text-xs);font-weight:var(--font-medium);
  cursor:pointer;text-align:center;
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
  background:var(--glass-bg);
  color:var(--text-secondary);
  border:1px solid var(--glass-border);
}

.modal-tab.is-active{
  color:#a0a0a8;font-weight:var(--font-semi);
  border:1px solid transparent;
  background:
    linear-gradient(rgba(255,255,255,0.04), rgba(255,255,255,0.02)) padding-box,
    var(--gb-active) border-box;
}

.lb-spinner{position:absolute;display:flex;align-items:center;justify-content:center;inset:0;z-index:1}

/* `.confirm-overlay` is redefined in the late "POLISH PASS" section (line ~7143)
   with the full layout including child `.confirm-overlay > div` rules.
   That later definition wins anyway; keeping just one avoids the z-index
   conflict (2000 vs 9999) and makes the stack order predictable. */

.m-acts{display:flex;gap:8px;justify-content:flex-end}

.m-btn{padding:8px 18px;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--font-medium);cursor:pointer;border:1px solid var(--glass-border);transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease)}

.m-btn.sec{background:transparent;color:var(--text-secondary)}

.m-btn.sec:hover{background:rgba(255,255,255,0.06);color:var(--text-primary)}

.m-btn.pri{background:rgba(255,255,255,0.08);color:var(--text-primary);border-color:rgba(255,255,255,0.15)}

.m-btn.pri:hover{background:rgba(255,255,255,0.14)}

.ip-head{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--glass-border);font-size:var(--text-sm);font-weight:var(--font-semi);color:var(--text-primary)}

.ip-close{cursor:pointer;color:var(--text-muted);font-size: 20px;line-height:1}

.ip-close:hover{color:var(--text-primary)}

.ip-row{display:flex;gap:12px;padding:4px 16px;font-size:var(--text-xs)}

.ip-label{color:var(--text-muted);min-width:60px;font-weight:var(--font-medium)}

.ip-val{color:var(--text-primary);word-break:break-word}

.ip-tags{display:flex;flex-wrap:wrap;gap:6px;padding:4px 16px 12px}

.ip-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--radius-full);background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);font-size:10px;color:var(--text-secondary)}

.ip-tag-x{cursor:pointer;opacity:0.5;font-size:12px}

.ip-tag-x:hover{opacity:1;color:var(--text-primary)}

.ip-tag-add{cursor:pointer;border-style:dashed;opacity:0.6}

.ip-tag-add:hover{opacity:1}

.toast.ok{border-left:3px solid var(--ok);box-shadow:0 4px 20px rgba(0,0,0,0.4), 0 0 12px rgba(200,200,200,0.06)}

.ct-btn{
  padding:4px 12px;border-radius:var(--radius-lg);
  font-size:var(--text-xs);font-weight:var(--font-medium);
  color:var(--text-secondary);border:1px solid var(--glass-border);
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.ct-btn:hover{color:var(--text-primary);border-color:var(--glass-border-hover);background:var(--glass-bg)}

.qi-combo{
  padding:3px 10px;border-radius:var(--radius-sm);
  font-size:var(--text-xs);white-space:nowrap;
  background:var(--glass-bg);border:1px solid var(--glass-border);
  color:var(--text-secondary);cursor:pointer;
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.qi-combo:hover{border-color:var(--glass-border-hover);color:var(--text-primary)}

.qi-combo.is-active{color:#a0a0a8;border:1px solid transparent;background:linear-gradient(rgba(255,255,255,0.04),rgba(255,255,255,0.02)) padding-box,var(--gb-active) border-box}

.qi-tab{
  padding:2px 8px;border-radius:4px;
  font-size:10px;color:var(--text-muted);
  cursor:pointer;transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);white-space:nowrap;
}

.qi-tab:hover{color:var(--text-secondary)}

.qi-tab.is-active{color:var(--accent);background:rgba(var(--accent-rgb),.1)}

.qi-chip{
  padding:2px 8px;border-radius:4px;
  font-size:var(--text-xs);
  background:var(--glass-bg);border:1px solid var(--glass-border);
  color:var(--text-secondary);cursor:pointer;
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);white-space:nowrap;
}

.qi-chip:hover{border-color:var(--glass-border-hover);color:var(--text-primary)}

.qi-chip.is-active{background:rgba(var(--accent-rgb),.15);color:var(--accent);border-color:rgba(var(--accent-rgb),.3)}

.qi-neg-presets .neg-preset-chip{
  padding:3px 8px;font-size:10px;border-radius:var(--radius-full);
  background:var(--glass-bg);border:1px solid var(--glass-border);
  color:var(--text-secondary);cursor:pointer;transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
  white-space:nowrap;
}

.qi-neg-presets .neg-preset-chip:hover{border-color:var(--glass-border-hover);color:var(--text-primary)}

.qi-neg-presets .neg-preset-chip.on{background:rgba(var(--accent-red-rgb),.15);border-color:rgba(var(--accent-red-rgb),.3);color:var(--text-primary)}

.ph-dd-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 6px;font-size:11px;font-weight:600;color:var(--text-secondary)}

.ph-dd-search{width:100%;padding:7px 12px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);border-radius:8px;font-size:11px;color:var(--text-primary);outline:none;margin:0 14px 6px;width:calc(100% - 28px);font-family:inherit}

.ph-dd-search::placeholder{color:rgba(255,255,255,0.2)}

.ph-dd-search:focus{border-color:rgba(255,255,255,0.15)}

.ph-item{
  padding:8px 14px;cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,0.04);
  transition:background .15s;
  font-size:11px;color:var(--text-secondary);
}

.ph-item:hover{background:rgba(255,255,255,0.04)}

.ph-item:last-child{border-bottom:none}

.ph-meta{font-size:10px;color:var(--text-muted)}

.ac-item{
  padding:6px 12px;cursor:pointer;
  font-size:var(--text-xs);color:var(--text-secondary);
  transition:background var(--transition-fast);
}

.ac-item:hover,.ac-item.sel,.ac-item.is-active{background:var(--glass-bg);color:var(--text-primary)}

.auto-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:var(--text-xs)}

.auto-row label{color:var(--text-secondary);min-width:80px}

.auto-row input[type="number"]{width:60px;padding:4px 6px;background:var(--glass-bg-inset);border:1px solid var(--glass-border);border-radius:var(--radius-sm);font-size:var(--text-xs)}

.auto-row button{
  padding:4px 12px;font-size:var(--text-xs);
  border-radius:var(--radius-sm);border:1px solid var(--glass-border);
  color:var(--text-secondary);transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);
}

.auto-row button:hover{color:var(--text-primary);border-color:var(--glass-border-hover)}

.auto-toggle{display:flex;align-items:center;gap:6px}

.flow .head{margin-bottom:16px}

.flow .head-t{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--font-semi);color:var(--text-primary)}

.nf-ctx{
  position:absolute;display:none;
  background:rgba(18,18,22,0.92);
  backdrop-filter:blur(40px) saturate(2.2);
  -webkit-backdrop-filter:blur(40px) saturate(2.2);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:8px;
  padding:6px;z-index:30;min-width:180px;
  box-shadow:0 8px 32px rgba(0,0,0,0.6),0 0 0 1px rgba(255,255,255,0.04);
}

.nf-ctx.open{display:block}

.nf-ctx-label{padding:6px 12px;font-size:var(--text-xs);color:var(--text-muted);font-weight:var(--font-semi);user-select:none}

.nf-ctx-item{
  padding:6px 12px;font-size:var(--text-xs);color:var(--text-secondary);
  border-radius:4px;cursor:pointer;display:flex;align-items:center;gap:6px;
  transition:background var(--transition-fast);
}

.nf-ctx-item:hover{background:var(--glass-bg);color:var(--text-primary)}

.nf-ctx-sep{height:1px;background:var(--glass-border);margin:4px 8px}

.nf-ctx-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}

.nf-popup-overlay{position:absolute;inset:0;z-index:25;display:none;pointer-events:none}

.nf-popup-overlay.open{display:block;pointer-events:auto;background:rgba(0,0,0,0.3)}

.nf-popup{
  position:absolute;width:320px;max-height:400px;overflow-y:auto;
  background:rgba(18,18,22,0.94);
  backdrop-filter:blur(40px) saturate(2.2);-webkit-backdrop-filter:blur(40px) saturate(2.2);
  border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius-md);
  padding:16px;box-shadow:0 8px 32px rgba(0,0,0,0.6),0 0 0 1px rgba(255,255,255,0.04);pointer-events:auto;
}

.nf-popup-title{font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--font-semi);color:var(--text-primary);margin-bottom:12px;display:flex;align-items:center;gap:6px}

.nf-popup-close{position:absolute;top:10px;right:12px;cursor:pointer;color:var(--text-muted);font-size: 20px;line-height:1}

.nf-popup-close:hover{color:var(--text-primary)}

.nf-popup .mf{margin-bottom:10px}

.nf-popup .mf label{display:block;font-size:var(--text-xs);color:var(--text-secondary);margin-bottom:4px}

.nf-popup .mf input,.nf-popup .mf textarea,.nf-popup .mf select{width:100%;padding:6px 10px;font-size:var(--text-sm);background:var(--glass-bg-inset);border:1px solid var(--glass-border);border-radius:var(--radius-sm);color:var(--text-primary)}

.nf-popup .mf textarea{resize:vertical;font-family:var(--font-mono);font-size:var(--text-xs)}

.bj-expand-status.ok{background:var(--ok)}

.sh-title{display:flex;align-items:center;justify-content:space-between;font-size:var(--text-lg);font-weight:var(--font-semi);color:var(--text-primary);margin-bottom:16px}

.sh-section{margin-bottom:12px}

.sh-section-t{font-size:var(--text-sm);font-weight:var(--font-semi);color:var(--text-secondary);margin-bottom:6px}

.sh-row{display:flex;justify-content:space-between;padding:4px 0;font-size:var(--text-sm)}

.sh-row-label{color:var(--text-primary)}

.sh-row-keys{color:var(--text-muted);font-family:var(--font-mono);font-size:var(--text-xs);display:flex;align-items:center;gap:4px}

.sh-key{display:inline-block;padding:2px 6px;border-radius:4px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);font-family:var(--font-mono);font-size:11px;color:var(--text-secondary);min-width:20px;text-align:center}

.qa-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:var(--radius-md);
  font-size:var(--text-xs);font-weight:var(--font-medium);
  color:var(--text-secondary);cursor:pointer;
  transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease);white-space:nowrap;
}

.qa-btn svg{flex-shrink:0}

.qa-btn:hover{color:var(--text-primary);background:var(--glass-bg)}

.pi-tips{margin-top:6px;display:flex;flex-direction:column;gap:2px}

.pi-tip{
  padding:3px 8px;border-radius:4px;
  font-size:10px;color:var(--accent);
  cursor:pointer;transition:background var(--transition-fast);
}

.pi-tip:hover{background:rgba(var(--accent-rgb),.1)}

.analytics-model-bar .bar{flex:1;height:6px;border-radius:3px;background:var(--glass-bg-inset);overflow:hidden}

.analytics-model-bar .label{width:120px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.recipe-icon{font-size:24px;margin-bottom:6px}

.recipe-name{font-size:var(--text-sm);font-weight:var(--font-semi);color:var(--text-primary);margin-bottom:3px}

.recipe-desc{font-size:10px;color:var(--text-muted);line-height:1.4;margin-bottom:6px}

.recipe-meta{display:flex;gap:6px;font-size:10px;color:var(--text-muted)}

.recipe-tag{padding:1px 6px;background:var(--glass-bg-inset);border:1px solid var(--glass-border);border-radius:3px}

/* v6 responsive block — selectors referencing the old topbar/dock/mode-pills
 * shell were removed when v7 switched to a sidebar layout. Only selectors
 * that match current DOM remain. */
@media(max-width:768px){
  .gal{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .gal.masonry{columns:2 160px}
  #content{padding:12px}
  .std-modal-grid.cols-2,.std-modal-grid.cols-3{grid-template-columns:1fr}
  .pb-stepper{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pb-section{grid-template-columns:1fr;gap:10px}
  #prompt{min-width:0}
  .qi-builder{padding:4px 0}
  .lb-actions{gap:4px}
  .lb-action-btn{padding:4px 8px;font-size:10px}
  .settings-slideover{width:100vw}
  .set-nav{width:140px;font-size:var(--text-xs)}
  .cmd-box{width:95vw}
  .analytics-cards{grid-template-columns:1fr 1fr}
  /* Phase Q: `.voice-studio` is display:grid, not flex — the old
     `flex-direction:column!important` was dead. Proper fix is to collapse
     the grid columns. `.voice-lib` is a grid item; width is implicit. */
  .voice-studio{grid-template-columns:1fr}
  .voice-lib{max-height:220px;overflow-y:auto}
  #ab-lab-overlay>div>div:first-child+div{grid-template-columns:1fr}
  .cost-grid{grid-template-columns:1fr}
  .cost-bar{width:60px}
  .btn-accent,.btn-ghost,.btn-danger{padding:5px 10px;font-size:10px}
  .prompt-gen-btn{padding:8px 16px;font-size:12px}
  .modal-panel--xl{max-width:95vw}
  .modal-panel--lg{max-width:95vw}
  .dot-grid{background-size:22px 22px}
  .pl-step{padding:6px 10px;gap:6px}
  .proj-item{padding:8px 10px;gap:8px}
}

@media(max-width:480px){
  .gal{grid-template-columns:repeat(2,1fr);gap:6px}
  .gal.masonry{columns:2 140px}
  .analytics-cards{grid-template-columns:1fr}
  .lb-actions{gap:3px!important}
  .lb-action-btn{padding:8px 10px;font-size:10px;min-height:40px}
  .pb-stepper{grid-template-columns:1fr 1fr}
  .pb-footer{flex-direction:column;align-items:stretch}
  .pb-footer-left,.pb-footer-right{width:100%;justify-content:space-between}
  .prompt-gen-btn{padding:10px 14px;font-size:11px}
  .btn-accent,.btn-ghost,.btn-danger{padding:4px 8px;font-size:10px}
  .modal-panel{padding:16px}
  .modal-panel--sm,.modal-panel--md,.modal-panel--lg,.modal-panel--xl{max-width:98vw}
  .cost-bar{width:50px}
  .cost-big{font-size:16px}
  .pl-step{padding:6px 8px}
  .proj-item{padding:8px;gap:6px}
  .proj-name{font-size:12px}
  .dot-grid{background-size:18px 18px}
}

.gc:hover::after,
.voice-item:hover::after,
.audio-card:hover::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.05), transparent 60%);
  pointer-events: none;
  opacity: 1;
  transition: opacity .2s;
}

.cost-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px; }

.cost-stat { background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:10px;padding:12px;text-align:center; }

.cost-big { font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--t1); }

.cost-label { font-size:10px;color:var(--t3);margin-top:2px;letter-spacing:var(--label-tracking); }

.cost-row { display:flex;align-items:center;gap:8px;margin-bottom:6px; }

.cost-bar { width:80px;height:4px;background:rgba(255,255,255,0.06);border-radius:2px;overflow:hidden; }

.cost-fill { height:100%;background:var(--accent);border-radius:2px;transition:width .3s; }

.pl-step { display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:10px;margin-bottom:6px; }

.pl-step-label { font-size:12px;color:var(--t2);flex:1; }

.pl-step-btn { background:none;border:none;color:var(--t3);cursor:pointer;font-size:14px; }

.pl-step-btn:hover { color:var(--t1); }

.proj-item { display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:10px;margin-bottom:6px;cursor:pointer;transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease); }

.proj-item:hover { border-color:rgba(255,255,255,0.10); }

.proj-name { font-size:13px;color:var(--t1);font-weight:500; }

.proj-meta { font-size:10px;color:var(--t3); }

.ba-stat-rank { width:20px;font-size:10px;color:var(--t3);text-align:center; }

.persona-library{display:flex;flex-direction:column;min-height:0}

.persona-pillars{margin-top:16px}

.pf-select-sm{width:auto;padding:4px 8px;font-size:.8rem}

.pf-pillar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}

.pf-check{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--text-muted);cursor:pointer}

.btn-sm{font-size:.8rem;padding:4px 10px}

.btn-xs{font-size:.7rem;padding:2px 6px}

.ui-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}

.ui-card-title{font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--font-semi);color:var(--text-primary)}

.ui-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}

.ui-skel-row{height:14px;border-radius:4px;margin-bottom:8px}

.ui-skel-chart{height:180px;border-radius:var(--radius-md)}

.ui-dot.ok{background:var(--ok)}

.ui-bar-axis{display:flex;justify-content:space-between;font-size:10px;color:var(--text-muted);margin-top:18px;padding:0 4px}

.ui-heatmap-labels{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;font-size:10px;color:var(--text-muted);margin-top:4px}

.ui-input,.ui-select,.ui-textarea{
  width:100%;padding:8px 10px;
  background:var(--glass-bg-inset);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-sm);
  color:var(--text-primary);
  font-size:var(--text-xs);font-family:var(--font);
  transition:border-color 0.15s;
}

.ui-input:focus,.ui-select:focus,.ui-textarea:focus{border-color:rgba(var(--accent-rgb),0.35);outline:none}

.ui-modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}

.batch-preview-metric .label{
  display:block;
  font-size:10px;
  color:var(--text-muted);

  letter-spacing:.04em;
  margin-bottom:4px;
}

.batch-preview-metric .value{
  font-size:var(--text-sm);
  color:var(--text-primary);
  font-weight:var(--font-semi);
}

.tmpl-sfx-acts{display:flex;gap:4px;flex-shrink:0}

.tmpl-sfx-btn{
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  border-radius:4px;color:var(--text-muted);cursor:pointer;
  background:none;border:none;transition:color 0.15s;
}

.tmpl-sfx-btn:hover{color:var(--text-primary)}

.settings-slideover .ui-input,.settings-slideover .ui-select{
  padding:8px 10px;background:rgba(0,0,0,0.25);border:1px solid var(--glass-border);
  border-radius:var(--radius-sm);color:var(--text-primary);font-size:var(--text-xs);
}

@media(max-width:768px){
  .ui-grid-4{grid-template-columns:1fr 1fr}
  .ui-grid-3{grid-template-columns:1fr}
  .ui-grid-2{grid-template-columns:1fr}
  .batch-kpi-grid{grid-template-columns:1fr 1fr}
  .ui-card{padding:12px}
  .ui-stat{padding:12px}
  .batch-tmpl-grid{grid-template-columns:1fr}
  .batch-run-header{flex-direction:column;align-items:flex-start;gap:4px}
  .batch-run-stats{gap:4px}
  .batch-run-actions{flex-wrap:wrap}
  .lib-search{width:140px}
  .lib-search:focus{width:160px}
  .tmpl-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

@media(max-width:480px){
  .ui-grid-4{grid-template-columns:1fr}
  .batch-kpi-grid{grid-template-columns:1fr}
  .ui-tabs{flex-wrap:wrap}
  .ui-tab{flex:0 0 calc(50% - 2px)}
  .batch-preview-actions{flex-direction:column}
  .lib-bar{gap:4px}
  .lib-search{width:100%;flex:1 1 100%}
  .lib-search:focus{width:100%}
  .lib-chip{padding:4px 8px;font-size:10px}
  .tmpl-grid{grid-template-columns:1fr}
  .batch-run-config{padding:10px}
  .batch-run-stats .ui-tag{font-size:10px;padding:2px 6px}
}

.skeleton-card .sk-label{position:absolute;bottom:8px;left:8px;font-size:10px;color:var(--text-muted);opacity:.5}

.preview-card .sk-label{position:absolute;bottom:8px;left:8px;font-size:10px;color:#fff;opacity:.8;text-shadow:0 1px 3px rgba(0,0,0,.6);z-index:1}

.lb-dropdown-trigger{display:flex;align-items:center;gap:2px}
/* ═══ NEW-ONLY CLASSES (rules invented to match post-v7 JS) ═══ */

/* Library chips + search + selects */
.lib-bar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:12px 0 8px;padding:0}
.lib-chip{padding:5px 10px;font-size:11px;font-weight:500;color:var(--t2);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-full, 999px);cursor:pointer;white-space:nowrap;transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease)}
.lib-chip:hover{color:var(--t1);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.lib-chip.is-active{color:#fff;background:rgba(var(--accent-rgb),.22);border-color:rgba(var(--accent-rgb),.40)}
.lib-spacer{flex:1}
.lib-search-w{position:relative;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-full, 999px);min-width:220px}
.lib-search-w svg{width:14px;height:14px;flex-shrink:0;stroke:var(--t3);fill:none;stroke-width:2}
.lib-search{flex:1;background:transparent;border:none;outline:none;font-size:11px;color:var(--t1);width:100%}
.lib-search::placeholder{color:var(--t4)}
.lib-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 10px;margin:8px 0;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:8px}
.lf-label{font-size:10px;color:var(--t3);letter-spacing:.04em}
.lf-clear{padding:4px 10px;font-size:11px;color:var(--t2);background:transparent;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-full, 999px);cursor:pointer}
.lf-clear:hover{color:var(--t1);border-color:rgba(255,255,255,.22)}

/* Select element consistent with chips */
.ui-select,select.ui-select{padding:5px 10px;font-size:11px;color:var(--t1);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-full, 999px);outline:none;cursor:pointer}
.ui-select:hover{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.06)}
.ui-select:focus{border-color:var(--accent)}
.ui-select option{background:#111;color:#fff}

/* Library filter inputs (date inputs inside advanced filters) */
.lib-filters select,.lib-filters input[type="date"]{padding:4px 8px;font-size:11px;color:var(--t1);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:6px;outline:none}
.lib-filters select:focus,.lib-filters input[type="date"]:focus{border-color:var(--accent)}
.lib-filters input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(.7)}

/* Select-all bar + bulk actions */
.sel-all-bar{display:flex;gap:8px;align-items:center;padding:8px 0;font-size:11px;color:var(--t3)}
.sel-all-bar button{padding:4px 10px;font-size:11px;color:var(--t2);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-full, 999px);cursor:pointer}
.sel-all-bar button:hover{color:var(--t1);border-color:rgba(255,255,255,.16)}
.sel-hint{color:var(--t4);margin-left:auto}
.bulk-strip{display:flex;gap:8px;align-items:center;padding:8px 12px;margin:8px 0;background:rgba(var(--accent-rgb),.08);border:1px solid rgba(var(--accent-rgb),.22);border-radius:8px;color:var(--t1);font-size:12px}
.bulk-btn{display:inline-flex;gap:4px;align-items:center;padding:5px 10px;font-size:11px;color:var(--t1);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:6px;cursor:pointer}
.bulk-btn:hover{background:rgba(255,255,255,.1)}
.bulk-btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.bulk-btn.del{color:#f87171;border-color:rgba(248,113,113,.3)}
.bulk-btn.del:hover{background:rgba(248,113,113,.15)}
.bulk-btn.dl{color:#6ee7b7;border-color:rgba(110,231,183,.3)}
.bulk-btn.dl:hover{background:rgba(110,231,183,.1)}

/* Gallery grouping headers */
.gallery-group{margin-bottom:16px}
.gallery-group-head{display:flex;gap:8px;align-items:center;padding:6px 0;cursor:pointer;color:var(--t2);font-size:12px;font-weight:500}
.gallery-group-head:hover{color:var(--t1)}
.group-toggle{width:12px;height:12px;transition:transform 150ms ease}
.gallery-group.collapsed .group-toggle{transform:rotate(-90deg)}
.gallery-group.collapsed .gallery{display:none}
.group-label{flex:1}
.group-count{font-size:10px;color:var(--t4);padding:2px 8px;background:rgba(255,255,255,.05);border-radius:10px}

/* Modal tabs + header */
.modal-header{display:flex;align-items:center;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.modal-title{flex:1;font-size:14px;font-weight:600;color:var(--t1)}
.modal-tabs{display:flex;gap:4px;padding:8px 18px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.modal-tab{padding:8px 12px;font-size:12px;color:var(--t3);background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:color 120ms ease}
.modal-tab:hover{color:var(--t1)}
.modal-tab.is-active{color:var(--accent);border-bottom-color:var(--accent)}

/* Confirm overlay (Clear Flow etc.) */
.confirm-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);z-index:9999;backdrop-filter:blur(8px)}
.confirm-overlay>div{max-width:400px;padding:24px;background:var(--b2,#111);border:1px solid rgba(255,255,255,.08);border-radius:12px;box-shadow:0 24px 64px rgba(0,0,0,.4);text-align:center}
.confirm-overlay button{padding:8px 18px;margin:0 4px;font-size:13px;font-weight:500;border-radius:6px;cursor:pointer}
.confirm-overlay button[data-act="confirm"],.confirm-overlay .btn-accent{color:#fff;background:var(--accent);border:1px solid var(--accent)}
.confirm-overlay button[data-act="cancel"],.confirm-overlay .btn-ghost{color:var(--t1);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12)}
.confirm-overlay button:hover{filter:brightness(1.15)}

/* Recipe cards (missing variants) */
.recipe-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:rgba(var(--accent-rgb),.14);color:var(--accent);margin-bottom:10px}
.recipe-name{font-size:13px;font-weight:600;color:var(--t1);margin-bottom:4px}
.recipe-desc{font-size:11px;color:var(--t3);line-height:1.4;margin-bottom:10px}
.recipe-meta{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.recipe-tag{padding:2px 8px;font-size:10px;color:var(--t3);background:rgba(255,255,255,.05);border-radius:var(--radius-full, 999px)}

/* Empty states, skeletons, loaders */
.empty{display:flex;flex-direction:column;align-items:center;padding:40px 20px;color:var(--t3);text-align:center}
.empty svg{width:48px;height:48px;opacity:.3;margin-bottom:12px;stroke:currentColor;fill:none;stroke-width:1.5}
.empty-t{font-size:13px;color:var(--t2)}
.lib-search-w svg,.empty svg{color:var(--t3)}
.skel,.skel-row,.sk-label,.ui-skel-chart,.ui-skel-row{background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(255,255,255,.08),rgba(255,255,255,.03));background-size:200% 100%;animation:skel-shimmer 1.4s ease infinite;border-radius:4px}
@keyframes skel-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* Button size utilities */
.btn-sm{padding:5px 10px;font-size:11px}
.btn-xs{padding:3px 8px;font-size:10px}
.btn-lg{padding:10px 18px;font-size:13px}

/* Queue card cluster */
.qc{position:relative;padding:10px;display:flex;gap:8px;align-items:flex-start;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:8px;margin-bottom:6px}
.qc:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.qc-thumb{width:44px;height:44px;flex-shrink:0;border-radius:6px;background:rgba(255,255,255,.04);object-fit:cover}
.qc-body{flex:1;min-width:0}
.qc-top{display:flex;gap:6px;align-items:center;margin-bottom:4px}
.qc-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--t4)}
.qc-dot.ok{background:#6ee7b7}
.qc-dot.wait{background:#fbbf24}
.qc-dot.active{background:var(--accent);animation:pulse 1.2s ease infinite}
.qc-dot.fail{background:#f87171}
/* `@keyframes pulse` lives in section 12 (line ~3440) — removed duplicate here
   to avoid the competing definitions (opacity .6 vs .4) silently changing
   based on source order. */
.qc-type-badge{font-size:10px;font-weight:700;padding:1px 5px;border-radius:3px;background:rgba(255,255,255,.08);color:var(--t2);letter-spacing:.05em}
.qc-model{font-size:10px;color:var(--t3);font-family:var(--font-mono)}
.qc-pos{font-size:10px;color:var(--t4);margin-left:auto}
.qc-text{font-size:12px;color:var(--t1);line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.qc-msg{font-size:10px;color:var(--t3);margin-top:4px}
.qc-progress{position:relative;height:3px;background:rgba(255,255,255,.06);border-radius:2px;margin-top:6px;overflow:hidden}
.qc-progress-fill{position:absolute;inset:0 auto 0 0;background:var(--accent);transition:width 200ms ease;border-radius:2px}
.qc-retry,.qc-x,.qc-cancel-all{padding:3px 7px;font-size:10px;color:var(--t2);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:4px;cursor:pointer}
.qc-retry:hover,.qc-x:hover,.qc-cancel-all:hover{color:var(--t1);background:rgba(255,255,255,.1)}
.qc-eta,.qc-elapsed,.qc-attempt{font-size:10px;color:var(--t3)}

/* Queue summary inline (bottom strip) */
.q-summary{display:flex;gap:8px;align-items:center;padding:6px 10px}
.q-stats-inline{display:flex;gap:6px;flex-wrap:wrap}
.q-stat-pill{font-size:10px;padding:2px 8px;border-radius:var(--radius-full, 999px);background:rgba(255,255,255,.05);color:var(--t2)}
.q-eta-total{font-size:10px;color:var(--t3);margin-left:auto}
.q-summary-bar{display:flex;height:4px;background:rgba(255,255,255,.04);border-radius:2px;overflow:hidden}
.q-summary-seg{height:100%}
.q-summary-nums{display:flex;gap:10px;font-size:10px;color:var(--t3);padding:4px 0}

/* Enhance panel (ep-*) */
.ep-head,.ep-actions,.ep-row,.ep-presets{display:flex;gap:8px;align-items:center}
.ep-title{font-size:13px;font-weight:600;color:var(--t1)}
.ep-close{background:transparent;border:none;color:var(--t3);cursor:pointer;padding:4px;font-size:16px;line-height:1}
.ep-close:hover{color:var(--t1)}
.ep-label{font-size:11px;color:var(--t3);min-width:80px}
.ep-box{padding:8px 10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:6px}
.ep-box-label{font-size:10px;color:var(--t4);letter-spacing:.04em}
.ep-preset,.ep-btn{padding:4px 10px;font-size:11px;color:var(--t2);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-full, 999px);cursor:pointer}
.ep-preset:hover,.ep-btn:hover{color:var(--t1);background:rgba(255,255,255,.08)}
.ep-preset.is-active{color:#fff;background:var(--accent);border-color:var(--accent)}
.ep-slider,.ep-slider-v{font-size:10px;color:var(--t3)}
.ep-compare{padding:6px 12px;font-size:11px;color:var(--t2);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:6px;cursor:pointer}

/* Auto panel (auto-*) */
.auto-section{padding:12px 0;border-top:1px solid rgba(255,255,255,.06)}
.auto-section-head{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.auto-section-label{font-size:11px;font-weight:600;color:var(--t2);letter-spacing:.04em}
.auto-row{display:flex;gap:8px;align-items:center;margin:6px 0;font-size:12px}
.auto-switch,.auto-toggle{display:inline-flex;gap:4px;align-items:center;cursor:pointer}
.auto-input{padding:5px 8px;font-size:11px;color:var(--t1);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:4px;outline:none;width:60px}
.auto-btn{padding:5px 10px;font-size:11px;color:var(--t2);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:4px;cursor:pointer}
.auto-btn:hover{color:var(--t1);background:rgba(255,255,255,.08)}
.auto-model-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:4px;margin-top:6px}
.auto-model-chip{padding:5px 8px;font-size:10px;color:var(--t2);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:4px;cursor:pointer;text-align:center}
.auto-model-chip.on{color:#fff;background:rgba(var(--accent-rgb),.22);border-color:rgba(var(--accent-rgb),.40)}

/* QI (quality inspector) panels */
.qi-tab{padding:6px 12px;font-size:11px;color:var(--t3);background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer}
.qi-tab.is-active,.qi-tab:hover{color:var(--t1)}
.qi-tab.is-active{border-bottom-color:var(--accent)}
.qi-chip{padding:4px 8px;font-size:10px;color:var(--t2);background:rgba(255,255,255,.04);border-radius:var(--radius-full, 999px)}
.qi-combo{display:flex;gap:4px;align-items:center}
.qi-neg-tab{padding:5px 10px;font-size:11px;color:var(--t3);background:transparent;border:none;cursor:pointer}
.qi-niche-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:6px}
.qi-niche-card{padding:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:8px;cursor:pointer;text-align:center;font-size:11px;color:var(--t2)}
.qi-niche-card:hover{color:var(--t1);background:rgba(255,255,255,.06)}
.qi-niche-sub{font-size:10px;color:var(--t4)}
.qi-niche-sfx{font-size: 20px;margin-bottom:4px}
.qi-niche-subs{font-size:10px;color:var(--t4)}
.qi-niche-back,.qi-niche-rnd{padding:4px 8px;font-size:11px;color:var(--t2);background:transparent;border:1px solid rgba(255,255,255,.1);border-radius:4px;cursor:pointer}

/* Quality indicator bars (pi-*) */
.pi-meter{position:relative;height:4px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden;flex:1}
.pi-meter-fill{position:absolute;inset:0 auto 0 0;background:var(--accent);border-radius:2px}
.pi-score{font-size:11px;font-weight:600;color:var(--t1)}
.pi-tip,.pi-tips{font-size:10px;color:var(--t4);margin-top:4px}

/* Job detail (jd-*) */
.jd-row{display:flex;gap:8px;padding:4px 0;font-size:12px}
.jd-label{color:var(--t3);min-width:100px}
.jd-val{color:var(--t1);flex:1;word-break:break-word}
.jd-error{color:#f87171;font-size:11px;padding:6px 10px;background:rgba(248,113,113,.08);border-radius:4px;margin-top:6px}
.jd-status{padding:2px 8px;font-size:10px;font-weight:600;border-radius:var(--radius-full, 999px);letter-spacing:.04em}

/* Modal system (std-modal-*) */
.std-modal-card{padding:20px;background:var(--b2,#111);border-radius:12px;max-width:600px;width:90%}
.std-modal-header-actions{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.std-modal-form,.std-modal-grid,.std-modal-stack,.std-modal-list{display:flex;flex-direction:column;gap:12px}
.std-modal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.std-modal-chip-row{display:flex;gap:4px;flex-wrap:wrap}
.std-modal-inline{display:flex;gap:8px;align-items:center}
.std-modal-field{display:flex;flex-direction:column;gap:4px}
.std-modal-label{font-size:11px;color:var(--t3);font-weight:500}
.std-modal-input,.std-modal-select,.std-modal-textarea{padding:8px 10px;font-size:12px;color:var(--t1);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:6px;outline:none}
.std-modal-input:focus,.std-modal-select:focus,.std-modal-textarea:focus{border-color:var(--accent)}
.std-modal-textarea{resize:vertical;min-height:60px}
.std-modal-note,.std-modal-empty{font-size:11px;color:var(--t3);padding:8px 0}
.std-modal-meta{font-size:10px;color:var(--t4)}
.std-modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.06)}
.std-modal-list-card{padding:10px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:6px}
.std-modal-stat-row{display:flex;justify-content:space-between;padding:4px 0;font-size:11px}
.std-modal-stat-list{display:flex;flex-direction:column}
.std-modal-thumb-strip{display:flex;gap:6px;flex-wrap:wrap}
.std-modal-thumb{width:60px;height:60px;border-radius:4px;object-fit:cover;background:rgba(255,255,255,.04)}
.std-modal-thumb-label{font-size:10px;color:var(--t4);text-align:center;margin-top:2px}
.std-modal-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px}
.std-modal-preview-card{padding:6px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:4px}
.std-modal-result,.std-modal-cloud,.std-modal-cloud-term{font-size:12px;color:var(--t2);line-height:1.5}

/* NodeFlow mini pieces */
.nf-search-hint{font-size:10px;color:var(--t4);padding:4px 8px}

/* Prompt history mini (ph-*) */
.ph-model{font-size:10px;color:var(--t3);font-family:var(--font-mono)}
.ph-neg{font-size:10px;color:#f87171}
.ph-reuse,.ph-item-del,.ph-search{padding:4px 8px;font-size:10px;background:transparent;border:1px solid rgba(255,255,255,.08);border-radius:4px;color:var(--t2);cursor:pointer}
.ph-reuse:hover,.ph-item-del:hover,.ph-search:hover{color:var(--t1);border-color:rgba(255,255,255,.16)}
.ph-item-del{color:#f87171}

/* Compare panel (comp-*) */
.comp-pane{flex:1;display:flex;flex-direction:column;padding:12px;border:1px solid rgba(255,255,255,.06);border-radius:8px}
.comp-pane-drop{display:flex;align-items:center;justify-content:center;padding:40px;color:var(--t3);font-size:12px;border:2px dashed rgba(255,255,255,.1);border-radius:6px}
.comp-pane-info{padding:8px 0;font-size:11px;color:var(--t3)}
.comp-pane-media img,.comp-pane-media video{max-width:100%;border-radius:4px}

/* Persona tabs & layouts */
.persona-editor-main{display:flex;flex-direction:column;gap:14px}
.persona-header-text{flex:1}
.persona-content-tab,.persona-identity-tab{padding:6px 12px;font-size:12px;color:var(--t3);background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer}
.persona-content-tab.is-active,.persona-identity-tab.is-active{color:var(--accent);border-bottom-color:var(--accent)}
.persona-overview,.persona-scripts,.persona-library,.persona-pillars{padding:10px 0}
.persona-card-placeholder{padding:40px 20px;text-align:center;color:var(--t3);background:rgba(255,255,255,.02);border:1px dashed rgba(255,255,255,.08);border-radius:8px}

/* PF / PG / PO (persona forge) */
.pf-check{display:inline-flex;gap:4px;align-items:center;font-size:11px;color:var(--t2)}
.pf-pillar-header{font-size:12px;font-weight:600;color:var(--t1);padding:6px 0}
.pf-select-sm{padding:4px 8px;font-size:11px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:var(--t1);border-radius:4px}
.pg-pillar,.pg-platform{padding:6px 10px;font-size:11px;background:rgba(255,255,255,.03);border-radius:4px;margin:3px 0}
.po-persona-check{display:flex;gap:4px;align-items:center}

/* Generic small utilities */
.track{background:rgba(255,255,255,.06);height:4px;border-radius:2px;overflow:hidden;position:relative}
.fill{position:absolute;inset:0 auto 0 0;background:var(--accent)}
.label{font-size:11px;color:var(--t3)}
.value{font-size:11px;color:var(--t1);font-weight:500}
.bar{height:4px;background:rgba(255,255,255,.05);border-radius:2px;overflow:hidden}
.sec{padding:12px 0}
.head{display:flex;gap:8px;align-items:baseline;padding:8px 0}
.head-t{font-size:13px;font-weight:600;color:var(--t1)}
.head-c{font-size:11px;color:var(--t3)}
.pill{display:inline-flex;gap:4px;align-items:center;padding:4px 10px;font-size:11px;color:var(--t2);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-full, 999px)}
.pill.is-active,.pill.on{color:#fff;background:rgba(var(--accent-rgb),.22);border-color:rgba(var(--accent-rgb),.40)}
.mf{display:flex;gap:4px}
.ok{color:#6ee7b7}
.del{color:#f87171}
.dl{color:#6ee7b7}
.wait{color:#fbbf24}
.has-img{opacity:1}
.neg-chip{padding:3px 8px;font-size:10px;color:#fca5a5;background:rgba(248,113,113,.08);border-radius:var(--radius-full, 999px);border:1px solid rgba(248,113,113,.2)}

/* Selection indicators (s-img/s-vid/s-aud thumb pips) */
.s-img,.s-vid,.s-aud{position:absolute;top:4px;left:4px;font-size:10px;font-weight:700;padding:2px 4px;border-radius:3px;background:rgba(0,0,0,.6);color:#fff}

/* Upload drop target */
.up-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 20px;border:2px dashed rgba(255,255,255,.1);border-radius:8px;color:var(--t3);font-size:12px;cursor:pointer;background:rgba(255,255,255,.02)}
.up-drop:hover,.up-drop.has-img{border-color:var(--accent)}
.up-drop-text{margin-top:8px;font-size:11px}
.up-preview{max-width:100%;max-height:160px;object-fit:contain;border-radius:4px}
.up-wrap{position:relative}

/* Audio card */
.audio-card{display:flex;gap:10px;align-items:center;padding:8px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:6px;margin:4px 0}
.audio-card:hover{background:rgba(255,255,255,.04)}
.audio-info{flex:1;min-width:0}
.audio-info-title{font-size:12px;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.audio-info-meta{font-size:10px;color:var(--t4);margin-top:2px}
.audio-play-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--accent);color:#fff;border:none;cursor:pointer;flex-shrink:0}

/* Voice blender + clones */
.vb-voice{display:flex;gap:8px;align-items:center;padding:6px;background:rgba(255,255,255,.03);border-radius:4px;margin:4px 0}
.vb-weight{flex:1;height:4px}
.vb-wval{font-size:10px;color:var(--t3);font-family:var(--font-mono);min-width:32px;text-align:right}
.vc-tab{padding:6px 12px;font-size:11px;color:var(--t3);background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer}
.vc-tab.is-active{color:var(--accent);border-bottom-color:var(--accent)}
.clone-item{display:flex;gap:10px;align-items:center;padding:8px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:6px}
.clone-avatar{width:32px;height:32px;border-radius:50%;background:rgba(var(--accent-rgb),.16);display:flex;align-items:center;justify-content:center;color:var(--accent);font-weight:600;flex-shrink:0;font-size:12px}
.clone-name{font-size:12px;color:var(--t1)}
.clone-engine{font-size:10px;color:var(--t4)}
.clone-empty{padding:20px;text-align:center;color:var(--t3);font-size:12px}
.clone-loading{padding:12px;text-align:center;color:var(--t3);font-size:11px}

/* Search overlay */
.search-overlay-inner{width:90%;max-width:600px;background:var(--b2,#111);border-radius:12px;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.5)}

/* NF popup */
.nf-popup{position:absolute;padding:10px;background:var(--b2,#111);border:1px solid rgba(255,255,255,.1);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.4);z-index:1000}
.nf-popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:999}
.nf-popup-title{font-size:12px;font-weight:600;color:var(--t1);padding:6px 0}
.nf-popup-close{background:transparent;border:none;color:var(--t3);cursor:pointer;padding:4px}

/* IP (inspector) items */
.ip-row{display:flex;gap:8px;padding:4px 0;font-size:12px}
.ip-label{color:var(--t3);min-width:80px}
.ip-val{color:var(--t1);flex:1}
.ip-head{font-size:13px;font-weight:600;color:var(--t1);padding:6px 0}
.ip-close{background:transparent;border:none;color:var(--t3);font-size:16px;cursor:pointer;padding:4px}
.ip-tags{display:flex;flex-wrap:wrap;gap:4px}
.ip-tag{padding:2px 6px;font-size:10px;background:rgba(255,255,255,.05);border-radius:3px;color:var(--t2)}
.ip-tag-add,.ip-tag-x{padding:2px 5px;font-size:10px;background:transparent;border:1px dashed rgba(255,255,255,.15);color:var(--t3);cursor:pointer;border-radius:3px}

/* Prompt library (plib-*) */
.plib-toolbar{display:flex;gap:6px;align-items:center;padding:8px 0}
.plib-search{flex:1;padding:6px 10px;font-size:11px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:4px;color:var(--t1)}
.plib-sort,.plib-io-btn{padding:4px 8px;font-size:11px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:4px;color:var(--t2);cursor:pointer}
.plib-cat-label{font-size:11px;color:var(--t3)}
.plib-cat-chip{padding:3px 8px;font-size:10px;background:rgba(255,255,255,.04);border-radius:var(--radius-full, 999px);cursor:pointer;color:var(--t2)}
.plib-cat-chip.is-active{color:#fff;background:var(--accent)}
.plib-item{display:flex;gap:8px;align-items:center;padding:8px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:6px;margin:4px 0}
.plib-item:hover{background:rgba(255,255,255,.04)}
.plib-meta{font-size:10px;color:var(--t4)}
.plib-tags{display:flex;gap:3px;flex-wrap:wrap}
.plib-tag{padding:1px 5px;font-size:10px;background:rgba(255,255,255,.04);color:var(--t3);border-radius:3px}
.plib-use,.plib-del,.plib-star{padding:3px 6px;font-size:10px;background:transparent;border:1px solid rgba(255,255,255,.08);color:var(--t2);cursor:pointer;border-radius:3px}
.plib-del{color:#f87171;border-color:rgba(248,113,113,.2)}
.plib-star.on{color:#fbbf24;border-color:rgba(251,191,36,.4)}
.plib-actions{display:flex;gap:4px}

/* Story scene text */
.story-scene-text{font-size:13px;line-height:1.6;color:var(--t1);padding:10px;background:rgba(255,255,255,.02);border-radius:6px;margin:6px 0}

/* Project manager mini */
.proj-item{display:flex;gap:8px;padding:8px;border-radius:6px;cursor:pointer}
.proj-item:hover{background:rgba(255,255,255,.04)}
.proj-name{font-size:12px;color:var(--t1);font-weight:500}
.proj-meta{font-size:10px;color:var(--t4)}

/* Small misc */
.ac-cat,.ac-item{padding:4px 10px;font-size:11px}
.cg-chip{padding:3px 8px;font-size:10px;background:rgba(var(--accent-rgb),.12);color:var(--accent);border-radius:var(--radius-full, 999px)}
.neg-preset-chip{padding:3px 8px;font-size:10px;background:rgba(248,113,113,.08);color:#fca5a5;border-radius:var(--radius-full, 999px);border:1px solid rgba(248,113,113,.2);cursor:pointer}
.m-acts{display:flex;gap:4px}
.m-btn{padding:4px 8px;font-size:10px;background:transparent;border:1px solid rgba(255,255,255,.08);color:var(--t2);border-radius:4px;cursor:pointer}
.m-btn:hover{color:var(--t1);background:rgba(255,255,255,.04)}
.model-select{min-width:140px}
.ctrl-input{padding:4px 8px;font-size:11px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);color:var(--t1);border-radius:4px;outline:none;width:60px}
.ctrl-slider-v{font-size:10px;color:var(--accent);font-family:var(--font-mono);min-width:28px;text-align:right}
.ctx{position:absolute;z-index:1000;padding:4px;background:var(--b2,#111);border:1px solid rgba(255,255,255,.1);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.nf-ctx{padding:4px;background:var(--b2,#111);border:1px solid rgba(255,255,255,.1);border-radius:6px}
.nf-ctx-item{padding:6px 12px;font-size:12px;color:var(--t1);cursor:pointer;border-radius:4px}
.nf-ctx-item:hover{background:rgba(255,255,255,.06)}
.nf-ctx-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px}
.nf-ctx-label{flex:1}
.nf-ctx-sep{height:1px;background:rgba(255,255,255,.08);margin:4px 0}
.sp-chip{padding:3px 8px;font-size:10px;background:rgba(255,255,255,.04);border-radius:var(--radius-full, 999px);color:var(--t2);display:inline-flex;gap:3px;align-items:center}
.sp-chip-x{font-size:11px;color:var(--t3);cursor:pointer;padding:0 2px}
.sp-plat{font-size:11px;color:var(--t2);font-weight:500}
.tmpl-sfx-acts{display:flex;gap:4px}
.tmpl-sfx-btn{padding:3px 7px;font-size:10px;background:transparent;border:1px solid rgba(255,255,255,.08);color:var(--t2);border-radius:3px;cursor:pointer}
.cost-p,.cost-big,.cost-fill,.cost-label,.cost-row,.cost-stat,.cost-grid,.cost-bar{font-size:11px}
.cost-big{font-size:16px;font-weight:600;color:var(--t1)}
.cost-fill{background:var(--accent);height:100%}
.cost-bar{height:4px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden}
.cost-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.cost-row{display:flex;gap:6px;align-items:center}
.cost-stat{color:var(--t3)}
.ba-stat-rank{font-size:10px;color:var(--t4)}
.lb-sep{width:1px;height:14px;background:rgba(255,255,255,.12);margin:0 4px}
.lb-up-factor{font-size:11px;color:var(--t3)}
.lb-dropdown-trigger{cursor:pointer;display:inline-flex;gap:4px;align-items:center}
.lb-spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.15);border-top-color:var(--accent);border-radius:50%;animation:spin 600ms linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.vid-ref-thumb{width:40px;height:40px;object-fit:cover;border-radius:4px}
.vid-ref-hint{font-size:10px;color:var(--t4)}
.vid-ref{display:flex;gap:8px;align-items:center}
.flow-empty-hint{font-size:11px;color:var(--t4);text-align:center;padding:20px}
/* P6.2: this container's only children are the title and its subtitle, so
   space-between put them SIDE BY SIDE. It is a stacked heading, not a bar. */
.flow-list-title-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:6px 0}
.flow-tpl-body{padding:8px 0}
.flow-tpl-card--linear{display:flex;gap:6px;align-items:center}
/* (a fuller .gallery-hero-header rule already exists above at ~6560) */
.pd-section{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.ct-btn{padding:4px 8px;font-size:10px;background:transparent;border:1px solid rgba(255,255,255,.08);color:var(--t2);cursor:pointer;border-radius:3px}
.ct-row{display:flex;gap:8px;align-items:center}
.ct-result{font-size:11px;color:var(--t1)}
.pl-step{display:flex;gap:8px;align-items:center;padding:6px 0}
.pl-step-btn{padding:4px 8px;font-size:10px;background:transparent;border:1px solid rgba(255,255,255,.08);color:var(--t2);border-radius:3px;cursor:pointer}
.pl-step-label{font-size:11px;color:var(--t2)}
.qa-btn{padding:4px 8px;font-size:10px;background:transparent;border:1px solid rgba(255,255,255,.1);color:var(--t2);cursor:pointer;border-radius:4px}
.qa-btn:hover{color:var(--t1);border-color:rgba(255,255,255,.16)}
.ph-dd-head{padding:8px 10px;font-size:11px;color:var(--t3);background:rgba(255,255,255,.02)}
.ph-dd-search{padding:6px 10px;border-bottom:1px solid rgba(255,255,255,.06)}
.ph-item{display:flex;gap:8px;align-items:center;padding:6px 10px;cursor:pointer;font-size:11px}
.ph-item:hover{background:rgba(255,255,255,.04)}
.ph-meta{font-size:10px;color:var(--t4);margin-left:auto}
.workflow-page--batch{padding:16px 0}
.batch-sheet-header { display: flex; flex-direction: column; gap: 10px; padding: 16px 0 14px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.batch-sheet-header-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sh-section{padding:12px 0}
.sh-section-t{font-size:11px;font-weight:600;color:var(--t2);letter-spacing:.04em;margin-bottom:8px}
.sh-title{font-size:13px;font-weight:600;color:var(--t1)}
.sh-row{display:flex;gap:8px;align-items:center;padding:4px 0;font-size:12px}
.sh-row-keys{display:flex;gap:3px}
.sh-row-label{color:var(--t3);flex:1}
.sh-key{padding:2px 6px;font-size:10px;font-family:var(--font-mono);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:3px;color:var(--t1)}
.fill{background:var(--accent)}
.ui-bar-axis,.ui-heatmap-labels{font-size:10px;color:var(--t4)}
.ui-card-header{padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.06)}
.ui-card-title{font-size:12px;font-weight:600;color:var(--t1)}
.ui-modal-actions{display:flex;gap:8px;justify-content:flex-end;padding:8px 0}
.ui-skel-chart{height:180px;border-radius:4px}
.ui-skel-row{height:24px;margin:4px 0;border-radius:4px}

/* ═══ Final patch: state modifiers + sidebar badge + misc ═══ */

/* Sidebar badge (e.g. "99+" next to Library) */
.sidebar-badge{display:inline-flex;align-items:center;padding:1px 6px;font-size:10px;font-weight:600;color:var(--t1,#fff);background:rgba(var(--accent-rgb),.22);border:1px solid rgba(var(--accent-rgb),.35);border-radius:10px;margin-left:auto;min-width:18px;justify-content:center}

/* Theme option buttons (Settings > Appearance) */
.set-theme-opt{padding:8px 14px;font-size:12px;color:var(--t2);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:6px;cursor:pointer;text-align:center;transition: color 160ms var(--motion-ease), background-color 160ms var(--motion-ease), border-color 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease), opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease)}
.set-theme-opt:hover{color:var(--t1);border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.06)}
.set-theme-opt.is-active{color:#fff;border-color:var(--accent);background:rgba(var(--accent-rgb),.14)}

/* Workspace content layout used by Flow mode shell */
.content--workspace{padding:0;max-width:none}

/* Mode transition fade */
.mode-fade{animation:modeFade 180ms ease-out}
@keyframes modeFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* Generic modal overlay. !important on display:flex because the generic
   .visible state modifier below sets display:block!important for any
   element — without !important here, modal panels render flush-left
   instead of centered. */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);z-index:9000;display:none}
/* Phase Q cleanup: removed unused .visible and .show state classes — JS only ever toggles .open. */
.modal-overlay.open{display:flex!important;align-items:center;justify-content:center}

/* Generic state modifiers */
.show,.visible{display:block!important}
.hidden{display:none!important}
.loading{opacity:.6;pointer-events:none;cursor:wait}
.generating{position:relative;opacity:.9}
.generating::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.12),transparent);animation:skel-shimmer 1.6s ease infinite;pointer-events:none}
.connecting{cursor:crosshair}
.dragging{opacity:.7;cursor:grabbing}
.drag-over{outline:2px dashed var(--accent);outline-offset:-2px;background:rgba(var(--accent-rgb),.08)}
.panning{cursor:grabbing}
.just-added{animation:modeFade 400ms ease-out;box-shadow:0 0 0 2px rgba(var(--accent-rgb),.4)}
.copied{background:rgba(110,231,183,.15)!important;color:#6ee7b7!important}
.copied::after{content:' ✓';font-weight:600}
.testing{opacity:.7;pointer-events:none}
.starred{color:#fbbf24}
.kb-focus{outline:2px solid var(--accent);outline-offset:2px}

/* Modal tab inner tabs (_negTab, _qiTab — QI quality inspector tabs) */
._negTab,._qiTab{padding:6px 12px;font-size:11px;color:var(--t3);background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer}
._negTab.active,._qiTab.active{color:var(--accent);border-bottom-color:var(--accent)}

/* Broken-image fallback — hide broken image icon and show dark tile */
img{object-fit:cover}
img:not([src]),img[src=""],img.broken,img.img-broken{background:rgba(255,255,255,.05);position:relative}
.persona-id-img.img-broken{background:rgba(255,255,255,.04);min-height:120px;display:flex;align-items:center;justify-content:center;border-radius:8px}
.persona-id-img.img-broken::after{content:'';width:40px;height:40px;background:rgba(255,255,255,.08);border-radius:50%}
/* When an <img> fails, the browser shows a broken icon. CSS can't detect error state,
   but JS renderers add .broken or set alt text. The inline style above keeps the
   background dark so missing persona refs render as a subtle tile rather than a
   white "broken" icon. */

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY PASS — focus rings, contrast, touch targets
   Added after audit identified missing :focus-visible states,
   thin touch targets, and hover-only action visibility.
   ═══════════════════════════════════════════════════════════════ */

/* Universal keyboard focus ring. Overrides 20+ places that previously set
   `outline:none` without providing a replacement. Mouse focus stays clean
   because :focus-visible only activates for keyboard/AT navigation. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
.ui-input:focus-visible,
.lib-search:focus-visible,
.std-modal-input:focus-visible,
#prompt:focus-visible,
.pt-btn:focus-visible,
.ctrl-select:focus-visible,
.pf-input:focus-visible,
.set-field input:focus-visible,
.sidebar-item:focus-visible,
.persona-card:focus-visible,
.gc-btn:focus-visible,
.gc-copy:focus-visible,
.gc-sel:focus-visible,
.gc-fav:focus-visible,
.lb-action-btn:focus-visible,
[contenteditable="true"]:focus-visible,
.modal-close:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  /* Ensure the ring sits above adjacent elements */
  z-index: 1;
}

/* Light-theme focus ring with a darker halo so it's visible on pale surfaces. */
[data-theme="light"] a:focus-visible,
[data-theme="light"] button:focus-visible,
[data-theme="light"] [role="button"]:focus-visible,
[data-theme="light"] input:focus-visible,
[data-theme="light"] textarea:focus-visible,
[data-theme="light"] select:focus-visible,
[data-theme="light"] [tabindex]:focus-visible,
[data-theme="light"] [contenteditable="true"]:focus-visible {
  outline-color: #4a4a52;
}

/* Canonical disabled / unavailable affordance. Root-cause fix for gated
   controls (lightbox actions, unsupported ratio chips, consent CTAs) that
   previously looked fully enabled. Visual-only by default so "why?" tooltips
   survive; hard-block interaction only on explicitly-unsupported chips. */
:disabled,
[aria-disabled="true"],
.is-disabled,
.ctrl-chip.is-unsupported {
  opacity: .4;
  cursor: not-allowed;
}
.ctrl-chip.is-unsupported { pointer-events: none; }
button:disabled, .btn:disabled { filter: grayscale(.25); }

/* Make gallery hover-only actions visible whenever any child is focused
   (keyboard users can't hover). */
.gc:focus-within .gc-copy,
.gc:focus-within .gc-sel,
.gc:focus-within .gc-fav {
  opacity: 1;
}

/* Skip link should paint above modals/dialogs when it gets focus. */
.skip-link:focus,
.skip-link:focus-visible {
  z-index: 99999;
}

/* Extra light-theme token coverage — audit flagged missing overrides that
   caused gradients/badges to stay dark on a light background. */
[data-theme="light"] {
  --accent-strong: #4a4a52;
  --accent-glow: rgba(96,96,104,0.22);
  --elevated-2: rgba(0,0,0,0.08);
  --surface-2: rgba(0,0,0,0.05);
  --border-strong: rgba(0,0,0,0.22);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
  --shadow: 0 8px 24px rgba(0,0,0,0.1);
  --shadow-lg: 0 20px 48px rgba(0,0,0,0.12);
  /* Bump muted-text contrast — original #a0a0a8 on #f5f5f7 was ~2.4:1 */
  --t4: #6e6e78;
  --t3: #4a4a52;
}

/* Light theme: override dark gradients that don't use tokens. */
[data-theme="light"] #prompt-zone,
[data-theme="light"] .sidebar,
[data-theme="light"] .workflow-card,
[data-theme="light"] .std-modal-card,
[data-theme="light"] .batch-run-card,
[data-theme="light"] .nf-toolbar,
[data-theme="light"] .confirm-overlay > div {
  background: rgba(255,255,255,0.9);
  color: var(--t1);
}

/* Light theme: the generate button stays dark for visual weight, but make the
   text white to maintain contrast. */
[data-theme="light"] .prompt-gen-btn {
  color: #ffffff;
}

/* Status dots get a thin ring so the color is not the only indicator. Pair
   with aria-label / text label in markup (JS updated separately where needed). */
.ui-dot.completed { box-shadow: 0 0 0 1px rgba(74,222,128,0.5); }
.ui-dot.failed    { box-shadow: 0 0 0 1px rgba(248,113,113,0.5); }
.ui-dot.pending   { box-shadow: 0 0 0 1px rgba(251,191,36,0.5); }

/* Bigger hit targets on touch devices — the 22-28px buttons failed 44x44 WCAG. */
@media (pointer: coarse) {
  .gc-btn,
  .gc-copy,
  .gc-sel,
  .gc-fav {
    min-width: 40px;
    min-height: 40px;
    /* Always visible on touch — hover doesn't exist there. */
    opacity: 1 !important;
  }
  .pt-btn,
  .lb-action-btn {
    min-height: 40px;
  }
}

/* iOS Safari 100vh fix — fall back to svh/dvh where supported.
   Phase CC3 mobile sweep: cover the sticky-height surfaces too (not just
   body) so a mobile keyboard opening doesn't push modals/trays/rails
   out of the visible viewport. dvh ("dynamic viewport") follows the
   keyboard; svh ("small viewport") uses the fully-collapsed bar state. */
@supports (height: 100svh) {
  body { height: 100svh; }
  .settings-slideover { height: 100svh; }
}
@supports (height: 100dvh) {
  #content { max-height: 100dvh; }
  /* Trays + rails constrain to dynamic viewport so they scroll in-place
     when the keyboard shrinks the visible area. The 100vh fallback
     above still applies on older iOS. */
  .ws-tray, .vc-tray {
    max-height: min(560px, calc(100dvh - 200px));
  }
  .ws-rail, .vc-rail {
    max-height: calc(100dvh - 180px);
  }
  .ws-hero-media {
    max-height: calc(100dvh - 320px);
  }
}

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

/* ═══ Batch sheet row thumbs with hover zoom ═══ */
.batch-thumb-cell:hover .batch-thumb-hover { display: block !important; }
.batch-thumb-cell:hover img[data-row-preview] { transform: scale(1.04); }
/* Approve/reject/star row-state markers — a 3px left-border strip */
.batch-sheet-row[data-review-state="approved"] { box-shadow: inset 3px 0 0 0 var(--ok); }
.batch-sheet-row[data-review-state="rejected"] { box-shadow: inset 3px 0 0 0 var(--err); opacity: .55; }
.batch-sheet-row[data-review-state="starred"] { box-shadow: inset 3px 0 0 0 var(--warn); }
.batch-review-pip { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; background: transparent; border: none; cursor: pointer; color: var(--t3); font-size: 12px; padding: 0; transition: background .1s, color .1s; }
.batch-review-pip:hover { background: rgba(255,255,255,0.06); color: var(--t1); }
.batch-review-pip.is-active[data-review-set="approved"] { background: var(--ok); color: #fff; }
.batch-review-pip.is-active[data-review-set="rejected"] { background: var(--err); color: #fff; }
.batch-review-pip.is-active[data-review-set="starred"] { background: var(--warn); color: #fff; }
/* Reference image attach button — dim by default, bright on cell hover. */
.batch-prompt-cell:hover .batch-ref-add-btn { opacity: 1 !important; }
.batch-prompt-cell:focus-within .batch-ref-add-btn { opacity: 1 !important; }


/* ═══ Notifications dropdown + activity feed ═══ */
/* Notifications dropdown — single source of truth. The Phase F rebuild
 * further down this file (around line 10810) used to duplicate .notif-head /
 * .notif-empty / .notif-day with conflicting padding+borders; the older
 * versions are gone now and the rest of the rules live here. */
.notif-dropdown {
  position: fixed;
  width: 340px;
  max-height: 480px;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(var(--accent-rgb), 0.06);
  z-index: 200;
  display: none;
}
.notif-dropdown.open { display: block; }
.notif-action {
  font-size: 11px;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.notif-action:hover { background: var(--accent-soft); }
.notif-row {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: default;
}
.notif-row:last-child { border-bottom: none; }
.notif-row:hover { background: rgba(255, 255, 255, 0.03); }
.notif-row--unread { background: rgba(var(--accent-rgb), 0.04); }
.notif-row--unread:hover { background: rgba(var(--accent-rgb), 0.08); }
.notif-title { font-size: 12px; color: var(--t1); font-weight: 500; }
.notif-body {
  font-size: 11px;
  color: var(--t3);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.notif-meta { font-size: 10px; color: var(--t4); margin-top: 3px; }

/* Sidebar bell badge — was an inline style in templates/index.html. Now a
 * proper class so we can refine the look in one place. Sits at the
 * top-right of the .sidebar-item--bell button (which is position:relative). */
.sidebar-item--bell { position: relative; }
.notif-badge {
  display: none;
  position: absolute;
  top: 6px;
  right: 8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--err);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
  pointer-events: none;
}

/* ═══ Pipeline builder params editor ═══ */
.pl-step { align-items: flex-start !important; }
.pl-step-params { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-param { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--t3); }
.pl-param select {
  padding: 2px 6px;
  font-size: 11px;
  background: var(--surface);
  color: var(--t1);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.pl-param-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.pl-chip {
  padding: 2px 8px;
  font-size: 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--t3);
  cursor: pointer;
}
.pl-chip.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

/* ═══ Recipe tag filter chips ═══ */
.recipe-tag-filter {
  padding: 4px 10px;
  font-size: 11px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--t3);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.recipe-tag-filter:hover { color: var(--t1); background: var(--accent-soft); }
.recipe-tag-filter.is-active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

/* ═══ Enhancer diff highlight ═══ */
.ep-diff-add {
  background: rgba(34, 197, 94, 0.15);
  color: var(--accent);
  padding: 0 2px;
  border-radius: 2px;
  text-decoration: none;
}

/* ═══ Accessibility helpers ═══ */
.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;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 10px;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
}
.skip-link:focus { left: 10px; }
/* Consistent focus ring across controls */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ═══ Mobile: lightbox + notif dropdown + settings modal ═══ */
@media (max-width: 480px) {
  .notif-dropdown { max-height: 60vh; }
  #lb .lb-actions { flex-wrap: wrap; }
  /* Settings modal: stack sections vertically on small screens */
  #modal-settings .settings-grid,
  #modal-settings .settings-layout { grid-template-columns: 1fr !important; }
  /* Reduce std-modal grid gap so two-column forms collapse gracefully */
  .std-modal-grid.cols-2 { grid-template-columns: 1fr !important; }
}

/* ═══ Brand-kit pill ═══ */
.brand-kit-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  margin-right: 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 10px;
  white-space: nowrap;
}

/* ═══ Library date preset chips ═══ */
.lib-bar-sep {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 6px;
}

/* ═══ Phase 46: cost-estimate warning tints ═══ */
.prompt-cost.cost-warn { color: var(--warn) !important; font-weight: 600; }
.prompt-cost.cost-danger { color: var(--err) !important; font-weight: 700; }

/* ═══ Phase 48: batch queue button warning tints ═══ */
.btn-accent.q-warn { background: var(--warn); color: #0a0a0a; }
.btn-accent.q-warn:hover { background: color-mix(in srgb, var(--warn) 85%, #000); }
.btn-accent.q-danger { background: var(--err); color: #fff; }
.btn-accent.q-danger:hover { background: color-mix(in srgb, var(--err) 85%, #000); }

/* ═══ Phase 49: Gallery skeleton pulse ═══ */
@keyframes skeletonPulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-card { opacity: 0.55; }

/* ═══ Phase 67: Batch sheet drop target feedback ═══ */
.batch-sheet-drop-target {
  outline: 2px dashed var(--accent);
  outline-offset: -4px;
  background: var(--accent-soft);
  transition: background .15s;
}

/* ═══ Phase 68: SSE indicator spinner ═══ */
@keyframes spin { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) } }
#sse-offline-pill .spin { animation: spin 1.5s linear infinite; transform-origin: center; }

/* ═══ Phase 73: voice preview button ═══ */
.voice-preview-btn:hover { background: var(--accent-soft) !important; color: var(--accent) !important; }
.voice-preview-btn.is-playing { color: var(--err) !important; }

/* ═══════════════════════════════════════════════════════════════
   Phase 82-83: Unified visual polish — cards, buttons, inputs
   ═══════════════════════════════════════════════════════════════ */

/* All primary cards share the same surface treatment. Before, each
   section had its own inline background + border + shadow combo;
   cards drifted across the app. Now the token is .glass-card and
   everything that uses it gets the same look. */
.workflow-card,
.glass-card,
.std-modal-card,
.persona-card,
.recipe-card,
.batch-history-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.workflow-card:hover,
.glass-card:hover,
.std-modal-card:hover,
.persona-card:hover,
.recipe-card:hover {
  border-color: var(--border-hover);
}
/* Hero / primary surfaces get the inset highlight treatment */
.workflow-hero,
.settings-slideover .set-section,
.modal-panel {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  box-shadow: var(--shadow), var(--shadow-inset);
}

/* Anchor absolute children (.modal-close, .std-modal-header-actions) to the
 * panel — without this, .modal-close (position:absolute; top:12px; right:12px)
 * falls back to .modal-overlay (position:fixed) and lands at the viewport's
 * top-right corner, far away from the modal it's supposed to close. */
.modal-panel { position: relative; }

/* Unified button sizing. Every button in the app should be one of:
   btn-primary, btn-ghost, btn-danger, btn-icon. Sizes: -xs, -sm, default. */
.btn-accent,
.btn-primary,
.btn-ghost,
.btn-secondary,
.btn-danger,
.m-btn {
  font-family: var(--font);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  user-select: none;
}
.btn-sm { height: 28px !important; padding: 0 10px !important; font-size: var(--text-xs) !important; gap: 5px !important; }
.btn-xs { height: 22px !important; padding: 0 8px !important; font-size: var(--text-2xs) !important; gap: 4px !important; border-radius: var(--radius-sm) !important; }

/* Consistent focus ring across all interactive controls */
button:focus-visible,
.btn-accent:focus-visible,
.btn-ghost:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* Soften disabled state */
button:disabled,
.btn-accent:disabled,
.btn-ghost:disabled,
input:disabled,
select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Inputs/selects unified — one height, same radius, same focus ring. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
select,
textarea,
.std-modal-input,
.std-modal-select,
.std-modal-textarea,
.ui-input,
.ui-select {
  font-family: var(--font);
  font-size: var(--text-sm);
  color: var(--t1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0 10px;
  height: 32px;
  line-height: var(--lh-normal);
  transition: border-color .12s ease, background .12s ease;
  box-sizing: border-box;
}
textarea, .std-modal-textarea {
  height: auto;
  min-height: 72px;
  padding: 8px 10px;
  line-height: var(--lh-snug);
  resize: vertical;
}
input:hover, select:hover, textarea:hover,
.std-modal-input:hover, .std-modal-select:hover, .std-modal-textarea:hover {
  border-color: var(--border-hover);
}
input:focus, select:focus, textarea:focus,
.std-modal-input:focus, .std-modal-select:focus, .std-modal-textarea:focus {
  border-color: var(--accent-strong);
  background: var(--surface-2);
}
input::placeholder, textarea::placeholder {
  color: var(--t4);
}

/* Label treatment — uniform across modals, settings, forms */
label, .std-modal-label, .set-field > label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--t2);
  letter-spacing: 0.2px;
}

/* Mono text: unified treatment for code/token/filename strings */
code, .mono, .std-modal-code, [data-mono] {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.04);
  color: var(--t2);
}

/* Smaller headings get consistent sizing. Page titles + modal titles
   align to the --text-xl token. Sub-heads use --text-md. */
h1, .workflow-title, .persona-id-name { font-size: var(--text-xl); font-weight: 600; color: var(--t1); margin: 0; }
h2, .modal-header h2, #modal-settings-title { font-size: var(--text-lg); font-weight: 600; color: var(--t1); margin: 0; }
h3, .workflow-card-title, .persona-card-name, .set-section h3 { font-size: var(--text-md); font-weight: 600; color: var(--t1); margin: 0; }
h4 { font-size: var(--text-base); font-weight: 600; color: var(--t1); margin: 0; }

/* "Eyebrow" small-caps label — use for section categorizers */
.eyebrow {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);

  color: var(--t3);
}

/* Kill margin on top-level modal headers — was inconsistent before */
.modal-header, .set-header { margin: 0 0 var(--s-4) 0; }

/* ═══════════════════════════════════════════════════════════════
   Phase 86-89: Modal / scrollbar / sidebar / lightbox / empty-state polish
   ═══════════════════════════════════════════════════════════════ */

/* Phase 86: smoother modal entrance + unified scrollbar. The old
   scrollbar varied by browser; this tokenizes it. */
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.18);
  background-clip: padding-box;
}
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}

/* Modal entrance animations — subtle fade+rise instead of instant pop */
@keyframes modalIn {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes overlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.modal-bg, .modal-overlay {
  animation: overlayIn .15s ease-out;
}
.modal-panel, .settings-slideover, .confirm-box, .std-modal-form {
  animation: modalIn .2s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .modal-bg, .modal-overlay, .modal-panel, .settings-slideover, .confirm-box, .std-modal-form {
    animation: none;
  }
}

/* Stronger backdrop so modals feel anchored rather than floating */
.modal-bg,
.modal-overlay {
  background: rgba(3, 3, 4, 0.72);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}

/* Phase 87: sidebar polish. Active-state indicator is a left accent
   bar (reuses --accent) + soft background. Hover states now transition
   and don't jump the 1px border. */
.sidebar-item {
  position: relative;
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-md);
  transition: background .12s ease, color .12s ease;
}
.sidebar-item:hover { background: rgba(255, 255, 255, 0.03); color: var(--t1); }
.sidebar-item.is-active {
  background: var(--accent-soft);
  color: var(--t1);
}
.sidebar-item.is-active::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: var(--accent-strong);
}
/* Brand mark: slight letter-spacing on "Dark Gen" for presence */
.sidebar-brand .brand-name,
#brand-name {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Phase 88: lightbox + gallery */
/* Smoother image fade-in in the lightbox (the existing onload handler
   already sets opacity; this just adds a nicer curve and scale
   subtle-in). */
#lb-media-wrap img,
#lb-media-wrap video {
  transition: opacity .3s ease, transform .3s ease;
}
/* Action bar — backdrop blur + subtle border so the actions read as
   a single cohesive toolbar instead of floating buttons. */
.lb-actions {
  background: rgba(10, 10, 12, 0.75);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 6px;
  box-shadow: var(--shadow);
}
.lb-action-btn {
  border-radius: var(--radius-sm);
  transition: background .12s ease, color .12s ease;
}
.lb-action-btn:hover:not(:disabled):not(.is-disabled) {
  background: var(--accent-soft);
  color: var(--t1);
}
/* Gallery thumbnails — unified corners, subtle hover lift. */
.gc {
  border-radius: var(--radius-md);
  transition: transform .15s ease, box-shadow .15s ease;
}
.gc:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.gc img, .gc video {
  border-radius: var(--radius-md);
}

/* Phase 89: empty state unified pattern. Every "first time here"
   surface uses .empty-state as the container + three quickstart
   cards in a grid. Consistent spacing + typography across modes. */
.empty-state {
  max-width: 640px;
  margin: var(--s-8) auto;
  padding: var(--s-6) var(--s-4);
  text-align: left;
}
.empty-state .empty-icon {
  font-size: var(--text-3xl);
  margin-bottom: var(--s-3);
  opacity: 0.5;
  text-align: center;
}
.empty-state > div[style*="text-align:center"] {
  margin-bottom: var(--s-6);
}
.empty-quickstart {
  border-radius: var(--radius-lg) !important;
  transition: border-color .12s ease, background .12s ease, transform .12s ease !important;
  border: 1px solid var(--border) !important;
}
.empty-quickstart:hover {
  border-color: var(--accent-strong) !important;
  background: var(--accent-soft) !important;
  transform: translateY(-1px);
}

/* Hover feedback on everything that's clickable but inconsistent */
.std-modal-card[onclick],
.proj-item[onclick],
.batch-history-row {
  transition: background .12s ease, border-color .12s ease;
}
.std-modal-card[onclick]:hover,
.proj-item[onclick]:hover {
  background: var(--surface-2);
}

/* Toolbar/inline-button row spacing — was varying 4/5/6/8px inline */
.prompt-tools-row,
.std-modal-inline,
.lib-bar,
.batch-sheet-head {
  gap: var(--s-2);
}

/* Anchor subtle underline treatment — default browser underline
   looked harsh in dark mode */
a {
  color: var(--accent-strong);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .12s ease, border-color .12s ease;
}
a:hover {
  color: var(--t1);
  border-bottom-color: currentColor;
}

/* ═══════════════════════════════════════════════════════════════
   Phase 90: Light theme parity — match the dark theme's polish
   ═══════════════════════════════════════════════════════════════ */

[data-theme="light"] {
  /* Slightly warmer off-white background — pure white is harsh at
     fullscreen on LCDs. */
  --bg: #f7f7f8;
  --bg-deep: #efeff2;
  --surface: rgba(255,255,255,0.7);
  --surface-2: rgba(255,255,255,0.9);
  --elevated: rgba(0,0,0,0.04);
  --elevated-2: rgba(0,0,0,0.07);
  --border: rgba(0,0,0,0.08);
  --border-hover: rgba(0,0,0,0.15);
  --border-active: rgba(0,0,0,0.22);
  --border-strong: rgba(0,0,0,0.18);
  /* Text: WCAG AA at all weights against #f7f7f8 */
  --t1: #0a0a0c;
  --t2: #3b3b42;
  --t3: #6a6a72;
  --t4: #9a9aa2;
  /* Accent stays the same graphite, just with slightly stronger alpha
     for soft/muted since light bgs wash out low-alpha tints. */
  --accent: #4a4a52;
  --accent-rgb: 74,74,82;
  --accent-strong: #2a2a30;
  --accent-soft: rgba(74,74,82,0.08);
  --accent-muted: rgba(74,74,82,0.16);
  --accent-glow: rgba(74,74,82,0.2);
  /* Shadows need to be softer on light bg — heavy shadows look muddy */
  --shadow-xs: 0 1px 0 rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.02);
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.06), 0 1px 0 rgba(0,0,0,0.04);
  --shadow: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
  --shadow-md: 0 16px 40px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 24px 64px rgba(0,0,0,0.12), 0 8px 20px rgba(0,0,0,0.07);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.8);
}
[data-theme="light"] body {
  background:
    radial-gradient(circle at top left, rgba(0,0,0,0.025), transparent 26%),
    radial-gradient(circle at top right, rgba(0,0,0,0.015), transparent 22%),
    linear-gradient(180deg, #fbfbfc 0%, #f5f5f7 55%, #efeff2 100%);
  color: var(--t2);
}

/* Light-theme surfaces look better with solid backgrounds (not alpha) */
[data-theme="light"] .workflow-card,
[data-theme="light"] .glass-card,
[data-theme="light"] .std-modal-card,
[data-theme="light"] .persona-card,
[data-theme="light"] .recipe-card,
[data-theme="light"] .batch-history-row {
  background: #ffffff;
  border-color: var(--border);
}

/* Solid backgrounds for heavy-chrome surfaces */
[data-theme="light"] .settings-slideover,
[data-theme="light"] .modal-panel,
[data-theme="light"] #confirm-dialog .confirm-box,
[data-theme="light"] .ui-modal,
[data-theme="light"] #shortcut-help,
[data-theme="light"] #quick-actions-inner {
  background: #ffffff;
  border-color: var(--border);
}

/* Sidebar — lighter grays work better than alpha over white */
[data-theme="light"] #sidebar {
  background: #ffffff;
  border-right: 1px solid var(--border);
}
[data-theme="light"] .sidebar-item:hover {
  background: rgba(0,0,0,0.04);
}
[data-theme="light"] .sidebar-item.is-active {
  background: var(--accent-soft);
  color: var(--t1);
}
[data-theme="light"] .sidebar-item.is-active::before {
  background: var(--accent-strong);
}

/* Inputs / selects / textareas — white, not translucent */
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="search"],
[data-theme="light"] input[type="url"],
[data-theme="light"] input[type="date"],
[data-theme="light"] select,
[data-theme="light"] textarea,
[data-theme="light"] .std-modal-input,
[data-theme="light"] .std-modal-select,
[data-theme="light"] .std-modal-textarea,
[data-theme="light"] .ui-input,
[data-theme="light"] .ui-select {
  background: #ffffff;
  color: var(--t1);
  border-color: var(--border);
}
[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] .std-modal-input:focus,
[data-theme="light"] .std-modal-select:focus,
[data-theme="light"] .std-modal-textarea:focus {
  border-color: var(--accent-strong);
  background: #ffffff;
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder { color: var(--t4); }

/* Buttons: ghost variant needs visible fill on light bg */
[data-theme="light"] .btn-ghost {
  background: rgba(0,0,0,0.04);
  color: var(--t1);
}
[data-theme="light"] .btn-ghost:hover {
  background: rgba(0,0,0,0.08);
  border-color: transparent;
}
[data-theme="light"] .btn-accent {
  background: var(--accent-strong);
  color: #ffffff;
}
[data-theme="light"] .btn-accent:hover {
  background: #1a1a20;
}

/* Scrollbar — light */
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  background-clip: padding-box;
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.25);
  background-clip: padding-box;
}
[data-theme="light"] * {
  scrollbar-color: rgba(0,0,0,0.15) transparent;
}

/* Modal backdrop — white-wash in light vs dark-wash in dark */
[data-theme="light"] .modal-bg,
[data-theme="light"] .modal-overlay {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(12px) saturate(140%);
}

/* Code / mono blocks */
[data-theme="light"] code,
[data-theme="light"] .mono,
[data-theme="light"] .std-modal-code {
  background: rgba(0,0,0,0.05);
  color: var(--t1);
}

/* Notification dropdown + toasts */
[data-theme="light"] .notif-dropdown,
[data-theme="light"] .toast {
  background: #ffffff;
  border-color: var(--border);
  box-shadow: var(--shadow);
}
[data-theme="light"] .notif-row--unread {
  background: var(--accent-soft);
}

/* Lightbox — lighter overlay so gallery returns are visible behind */
[data-theme="light"] #lb {
  background: rgba(247,247,248,0.92);
  backdrop-filter: blur(20px);
}
[data-theme="light"] .lb-actions {
  background: rgba(255,255,255,0.9);
  border-color: var(--border);
  box-shadow: var(--shadow);
}

/* ═══════════════════════════════════════════════════════════════
   Phase 91: Agent chat polish — make the operator feel like a
   real conversational surface, not a text dump.
   ═══════════════════════════════════════════════════════════════ */

/* User-message bubble: accent tint, right-anchored, slight lift on hover */
.agent-msg-user {
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow .15s ease;
}
.agent-msg-user:hover {
  box-shadow: var(--shadow) !important;
}
[data-theme="light"] .agent-msg-user {
  background: var(--accent-strong) !important;
  color: #fff !important;
}

/* Assistant bubble: soft surface, left-anchored, larger max-width */
.agent-msg-assistant {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--t1) !important;
  border-radius: 14px 14px 14px 4px !important;
  padding: 10px 14px !important;
  line-height: var(--lh-snug) !important;
}

/* Tool-call chips — make them identifiable at a glance. Treated like
   "actions" rather than messages: smaller, pill-shaped, monospace name. */
.agent-tool-chip,
.ag-tool,
.tool-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--accent-soft);
  border: 1px solid var(--accent-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent-strong);
  animation: toolChipIn .2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes toolChipIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fork button — reveal on message hover instead of permanent chrome */
.agent-msg-row:hover .agent-fork-btn {
  opacity: 1 !important;
}

/* Conversation list items — consistent hover + active state */
.agent-conv-item {
  transition: background .12s ease, color .12s ease;
  border: 1px solid transparent;
}
.agent-conv-item:hover {
  background: var(--surface-2) !important;
}
.agent-conv-item.is-active {
  border-color: var(--accent-muted);
}

/* Typing / thinking indicator spinner */
@keyframes agent-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Composer — sticky bottom, airy padding, clear focus affordance */
.agent-composer {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.agent-composer textarea:focus {
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* Suggestions row — hover shows "clickable" affordance */
.agent-suggestion {
  transition: background .12s ease, border-color .12s ease, transform .12s ease !important;
}
.agent-suggestion:hover {
  border-color: var(--accent-strong) !important;
  background: var(--accent-soft) !important;
  transform: translateY(-1px);
}

/* Streaming "text-delta" bubble — distinguish mid-stream visual from
   final with a subtle pulsing cursor at the end of the text. */
.agent-msg-assistant[data-streaming="1"]::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 14px;
  margin-left: 4px;
  vertical-align: -2px;
  background: var(--accent-strong);
  border-radius: 1px;
  animation: cursorBlink 1s step-end infinite;
}
@keyframes cursorBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   Phase 92: Density mode — compact trims paddings + font sizes for
   power users on small screens. Comfortable is the default.
   ═══════════════════════════════════════════════════════════════ */

[data-density="compact"] {
  /* Shrink type scale by one step */
  --text-base: 12px;
  --text-md: 13px;
  --text-lg: 14px;
  --text-xl: 18px;
  --text-2xl: 22px;
}
[data-density="compact"] body { font-size: var(--text-base); }
[data-density="compact"] .workflow-card,
[data-density="compact"] .glass-card,
[data-density="compact"] .std-modal-card,
[data-density="compact"] .persona-card,
[data-density="compact"] .recipe-card {
  padding: var(--s-3);
}
[data-density="compact"] .btn-accent,
[data-density="compact"] .btn-ghost,
[data-density="compact"] .btn-primary,
[data-density="compact"] .m-btn,
[data-density="compact"] input[type="text"],
[data-density="compact"] input[type="email"],
[data-density="compact"] input[type="password"],
[data-density="compact"] input[type="number"],
[data-density="compact"] input[type="search"],
[data-density="compact"] input[type="url"],
[data-density="compact"] select,
[data-density="compact"] .std-modal-input,
[data-density="compact"] .std-modal-select,
[data-density="compact"] .ui-input,
[data-density="compact"] .ui-select {
  height: 28px;
  padding: 0 10px;
  font-size: var(--text-xs);
}
[data-density="compact"] textarea,
[data-density="compact"] .std-modal-textarea {
  padding: 6px 10px;
  min-height: 56px;
}
[data-density="compact"] .sidebar-item {
  padding: 6px 12px;
  font-size: var(--text-xs);
}
[data-density="compact"] .prompt-zone,
[data-density="compact"] #prompt-zone {
  padding: 10px 16px 8px;
}
[data-density="compact"] #prompt {
  padding: 6px 12px;
  font-size: var(--text-sm);
}
[data-density="compact"] .gc {
  border-radius: var(--radius-sm);
}

/* Density toggle in settings */
.set-density-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}
.set-density-opt {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font-family: var(--font);
  font-size: var(--text-xs);
  color: var(--t2);
  transition: border-color .12s ease, background .12s ease;
  text-align: left;
}
.set-density-opt:hover { border-color: var(--border-hover); }
.set-density-opt.is-active {
  border-color: var(--accent-strong);
  background: var(--accent-soft);
  color: var(--t1);
}
.set-density-opt .d-title { font-weight: 600; }
.set-density-opt .d-sub { font-size: var(--text-2xs); color: var(--t4); margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════
   Phase 93: Analytics chart + cost bar visual polish
   ═══════════════════════════════════════════════════════════════ */

/* Cost-by-model horizontal bar rows — unify spacing and colors */
.cost-row {
  display: grid;
  grid-template-columns: 1fr minmax(80px, 2fr) auto;
  gap: var(--s-2);
  align-items: center;
  padding: var(--s-1) 0;
}
.cost-bar {
  height: 6px;
  background: var(--surface);
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 1px solid var(--border);
}
.cost-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  border-radius: var(--radius-full);
  transition: width .4s cubic-bezier(0.16, 1, 0.3, 1);
}
.cost-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.cost-stat {
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: border-color .15s ease, transform .15s ease;
}
.cost-stat:hover {
  border-color: var(--border-hover);
  transform: translateY(-1px);
}
.cost-big {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--t1);
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}
.cost-label {
  font-size: var(--text-2xs);
  color: var(--t3);

  letter-spacing: var(--tracking-wide);
  margin-top: 4px;
}

/* Stat-list bars used throughout (Prompt Analytics, Persona Analytics) */
.std-modal-stat-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.std-modal-stat-row {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: var(--s-3);
  align-items: center;
  font-size: var(--text-xs);
}
.std-modal-stat-row .label { color: var(--t2); }
.std-modal-stat-row .bar {
  height: 6px;
  background: var(--surface);
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  overflow: hidden;
}
.std-modal-stat-row .bar > div {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent-strong));
  border-radius: var(--radius-full);
  transition: width .4s cubic-bezier(0.16, 1, 0.3, 1);
}
.std-modal-stat-row .value {
  font-variant-numeric: tabular-nums;
  color: var(--t1);
  min-width: 40px;
  text-align: right;
}

/* Daily spend chart — subtle grid lines + better bar tone */
.analytics-daily-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 80px;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.analytics-daily-chart::before {
  content: "";
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  border-top: 1px dashed var(--border);
  opacity: 0.5;
}
.analytics-daily-bar {
  flex: 1;
  min-width: 6px;
  background: linear-gradient(180deg, var(--accent-strong), var(--accent));
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: background .12s ease, transform .12s ease;
  cursor: pointer;
  position: relative;
}
.analytics-daily-bar:hover {
  background: var(--accent-strong);
  transform: scaleY(1.04);
  transform-origin: bottom;
}
.analytics-daily-bar[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  padding: 4px 8px;
  background: var(--elevated-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-2xs);
  color: var(--t1);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  z-index: 10;
  font-variant-numeric: tabular-nums;
}

/* Period pills — consistent active state */
.analytics-period-pill,
.cost-p {
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--t3);
  border: 1px solid var(--border);
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  transition: color .12s ease, background .12s ease, border-color .12s ease;
  font-variant-numeric: tabular-nums;
}
.analytics-period-pill:hover,
.cost-p:hover {
  color: var(--t1);
  border-color: var(--border-hover);
}
.analytics-period-pill.is-active,
.cost-p.is-active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: var(--accent-strong);
}

/* Workflow-stats tile — shared with library + persona dashboards */
.workflow-stat {
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color .15s ease;
}
.workflow-stat:hover {
  border-color: var(--border-hover);
}
.workflow-stat b {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--t1);
  line-height: var(--lh-tight);
  display: block;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}
.workflow-stat small {
  font-size: var(--text-2xs);
  color: var(--t3);

  letter-spacing: var(--tracking-wide);
  display: block;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   Phase 104: Gallery virtualization via content-visibility.
   For a 2000-image library, the browser skips layout + paint for
   off-screen .gc cells — cuts DOM work by 10-20x on large libraries.
   contain-intrinsic-size reserves space so scrollbar stays sane.
   ═══════════════════════════════════════════════════════════════ */

.gallery .gc {
  content-visibility: auto;
  contain-intrinsic-size: 1px 220px; /* reserved placeholder height */
}

/* ═══════════════════════════════════════════════════════════════
   Phase 108: Error recovery UX — offline banner + retry affordances
   ═══════════════════════════════════════════════════════════════ */

#offline-banner {
  position: fixed;
  top: 0;
  left: var(--sidebar-w);
  right: 0;
  padding: 10px 16px;
  background: rgba(248,113,113,0.18);
  border-bottom: 1px solid var(--err);
  color: var(--t1);
  font-size: var(--text-sm);
  font-weight: 500;
  z-index: 90;  /* was 150 — BELOW modals(100); it made Settings' × unclickable */
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  transform: translateY(-100%);
  transition: transform .2s ease;
}
#offline-banner.visible { transform: translateY(0); }
#offline-banner .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--err);
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@media (max-width: 768px) {
  #offline-banner { left: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   Phase 112-115: Mobile + accessibility finish
   ═══════════════════════════════════════════════════════════════ */

/* Phase 112: safe-area insets — honor iPhone notch, Dynamic Island,
   home indicator. env() is a no-op on platforms that don't need it. */
@supports (padding: env(safe-area-inset-bottom)) {
  /* P6.3: the #sidebar safe-area block that used to sit here was a strict
     SUBSET of the one at the end of this file (bottom only vs left/right/
     bottom), and the later one wins anyway — so it was dead weight that made
     the mobile rules look more contradictory than they were. */
  /* Modals pin to viewport top on mobile — account for notch */
  @media (max-width: 768px) {
    .modal-panel, .settings-slideover {
      padding-top: max(var(--s-3), env(safe-area-inset-top));
    }
  }
  /* Offline + budget banners respect the notch */
  #offline-banner,
  #budget-warning-banner,
  #daily-cap-banner {
    padding-top: max(10px, env(safe-area-inset-top));
  }
  /* Prompt zone bottom — lightbox action bar etc. */
  .lb-actions {
    margin-bottom: max(0px, env(safe-area-inset-bottom));
  }
}

/* Phase 113: touch-target minimums. Apple HIG says ≥44px; Material says
   ≥48px. We use 44 as the floor for small icon buttons. touch-action
   eliminates the 300ms tap delay on older mobile browsers. */
button, a, [role="button"], .sidebar-item, .tmpl-chip, .lib-chip,
.ctrl-chip, .bulk-btn, .pt-btn {
  touch-action: manipulation;
}
@media (max-width: 768px) {
  .gc-btn, .pl-step-btn, .lb-action-btn,
  .bulk-btn, .persona-ref-info button,
  button.btn-xs, .btn-xs {
    min-height: 36px;
    min-width: 36px;
  }
  /* Primary interactive elements hit the 44px target */
  .sidebar-item, .ctrl-chip, .lib-chip, .tmpl-chip,
  button.btn-sm, .btn-sm, #gen-btn, .pt-btn {
    min-height: 40px;
  }
  /* Chip rows have more padding on touch so fingers can hit them */
  .ph-item, .plib-item, .std-modal-card[onclick] {
    padding: var(--s-3);
  }
}

/* Phase 115: iOS Safari zooms the viewport when focusing an input with
   font-size < 16px. Override to 16px on narrow viewports for inputs
   users actually type into. Selects/dates are small — leave at 16px too. */
@media (max-width: 480px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="number"],
  input[type="date"],
  select,
  textarea,
  #prompt,
  #prompt-batch,
  .std-modal-input,
  .std-modal-select,
  .std-modal-textarea {
    font-size: 16px !important;
  }
}

/* Phase 114: focus trap visual signal. Inside a modal, tab should cycle
   through modal children only. A red outline on anything that leaks
   focus below the modal is a visual debug signal. Not wired by default
   — production UX is that the modal catches Tab. */
.modal-bg.open {
  /* Hint to screen readers: this is a dialog */
  /* Actual focus trap is enforced via JS event handlers elsewhere. */
}

/* Every modal's close button is always reachable from keyboard */
.modal-close,
.std-modal-close,
[data-close-modal] {
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   First-run wizard — styled so it reads as a landing moment, not a
   dialog. Cards stagger in, arrows telegraph interactivity, accent
   glow picks up the active project (if any).
   ═══════════════════════════════════════════════════════════════ */

.wz-panel.modal-panel {
  padding: var(--s-6) var(--s-6) var(--s-5);
  background:
    radial-gradient(circle at 50% -20%, rgba(var(--accent-rgb), 0.08), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg), var(--shadow-inset);
}
.wz-panel .modal-header {
  margin-bottom: var(--s-4);
}
.wz-panel .modal-title {
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--t1);
}

.wz-intro {
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--t3);
  margin-bottom: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wz-hint {
  font-size: var(--text-xs);
  color: var(--t4);
}

.wz-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
@media (max-width: 560px) {
  .wz-grid { grid-template-columns: 1fr; }
}

.wz-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 6px;
  padding: var(--s-4);
  text-align: left;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font: inherit;
  color: inherit;
  transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
  opacity: 0;
  animation: wzCardIn .45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  overflow: hidden;
  min-height: 136px;
}
.wz-card::after {
  /* Subtle accent streak that brightens on hover — the card reveals
     its "clickable" nature without being obvious. */
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-strong), transparent);
  opacity: 0;
  transition: opacity .2s ease;
}
.wz-card:hover {
  border-color: var(--accent-strong);
  background: var(--surface-2);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.wz-card:hover::after { opacity: 0.7; }
.wz-card:active { transform: translateY(0); }

.wz-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--accent-soft), var(--accent-muted));
  color: var(--accent-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, color .2s ease;
}
.wz-card:hover .wz-icon {
  background: var(--accent-strong);
  color: #fff;
}
[data-theme="light"] .wz-card:hover .wz-icon { color: #fff; }

.wz-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--t1);
  letter-spacing: var(--tracking-tight);
  display: block;
}
.wz-desc {
  font-size: var(--text-xs);
  color: var(--t3);
  line-height: var(--lh-snug);
}

.wz-arrow {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  font-size: var(--text-md);
  color: var(--t4);
  transform: translateX(-4px);
  opacity: 0;
  transition: transform .15s ease, opacity .15s ease, color .15s ease;
}
.wz-card:hover .wz-arrow {
  transform: translateX(0);
  opacity: 1;
  color: var(--accent-strong);
}

.wz-footer {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: center;
}
.wz-skip {
  font: inherit;
  font-size: var(--text-xs);
  color: var(--t3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: color .12s ease, background .12s ease;
}
.wz-skip:hover {
  color: var(--t1);
  background: var(--surface-2);
}

@keyframes wzCardIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .wz-card { animation: none; opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   Prompt zone polish — quieter chrome, more air, one focused CTA.
   Follows the "fewer buttons, more prompt" direction after the
   prompt-tools-row got trimmed to just Enhance.
   ═══════════════════════════════════════════════════════════════ */

#prompt-zone {
  padding: var(--s-5) var(--s-6) var(--s-4);
  background:
    radial-gradient(circle at 50% -80%, rgba(var(--accent-rgb), 0.06), transparent 55%),
    linear-gradient(180deg, rgba(8,8,10,0.88), rgba(8,8,10,0.65));
  border-bottom: 1px solid var(--border);
}

/* Prompt textarea grows cleanly — tighter placeholder color hierarchy */
#prompt,
#prompt-batch {
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  min-height: 28px;
  padding: 4px 0;
}
#prompt::placeholder,
#prompt-batch::placeholder {
  color: var(--t4);
  opacity: 0.85;
}

.prompt-cost {
  font-size: var(--text-xs);
  color: var(--t4);
  padding: 0 var(--s-2);
}

/* Generate button — neutral graphite fill instead of bright accent.
   The CTA is obvious from position + size, doesn't need neon chrome. */
.prompt-gen-btn {
  height: 40px;
  padding: 0 var(--s-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.04));
  color: var(--t1);
  border: 1px solid var(--border-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 6px rgba(0,0,0,0.3);
  transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.prompt-gen-btn svg {
  color: var(--accent-strong);
}
.prompt-gen-btn:hover {
  border-color: var(--accent-strong);
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 6px 16px rgba(0,0,0,0.38);
  filter: none;
}
.prompt-gen-btn:hover svg {
  color: var(--t1);
}
.prompt-gen-btn:active {
  transform: translateY(0);
  filter: brightness(0.95);
}

/* Controls row — more subdued, section-labels tighter */
.controls-row {
  padding-top: var(--s-3);
  gap: var(--s-3);
}
.ctrl-group {
  gap: var(--s-2);
}
.ctrl-label {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);

  color: var(--t4);
}

/* Prompt tools row — now just Enhance, let it breathe */
.prompt-tools-row {
  padding-top: var(--s-2);
  gap: var(--s-3);
  min-height: 22px;
}
.pt-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--t3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.pt-btn:hover {
  color: var(--t1);
  background: var(--surface);
  border-color: var(--border);
}
.pt-btn.is-active {
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-color: var(--accent-muted);
}
.pt-btn svg {
  color: currentColor;
  opacity: 0.8;
}
.prompt-counter {
  margin-left: auto;
  font-size: var(--text-2xs);
  color: var(--t4);
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════
   Prompt zone — unified card rebuild
   One card, three stacked sections (prompt / controls / enhance),
   hairline dividers, single border + shadow instead of three.
   The bar the user types into is the hero; everything else is
   context that recedes.
   ═══════════════════════════════════════════════════════════════ */

#prompt-zone {
  padding: var(--s-5) var(--s-6) var(--s-4);
  background:
    radial-gradient(circle at 50% -60%, rgba(var(--accent-rgb), 0.07), transparent 50%),
    linear-gradient(180deg, rgba(8,8,10,0.9), rgba(8,8,10,0.55));
  border-bottom: 1px solid var(--border);
}

/* The zone itself wraps a single card. Rows inside lose their borders;
   we just stack them with hairline dividers. */
#prompt-zone > #controls-row,
#prompt-zone > #prompt-tools-row {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#prompt-zone > #controls-row {
  padding: var(--s-3) var(--s-5);
  background: rgba(255,255,255,0.025) !important;
  border-left: 1px solid var(--border) !important;
  border-right: 1px solid var(--border) !important;
  border-top: 1px solid rgba(255,255,255,0.03) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.2) !important;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
#prompt-zone > #prompt-tools-row {
  padding: var(--s-2) var(--s-5) var(--s-3);
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid var(--border) !important;
  border-top: 1px solid rgba(255,255,255,0.03) !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.2) !important;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 32px;
}

/* Prompt textarea — multi-line default, grows up to 4 lines before scroll */
#prompt,
#prompt-batch {
  font-size: var(--text-md);
  line-height: 1.5;
  min-height: 48px;
  max-height: 140px;
  padding: 4px 0;
  font-weight: 400;
}
#prompt::placeholder,
#prompt-batch::placeholder {
  color: var(--t4);
  opacity: 0.7;
}

.prompt-cost {
  font-size: var(--text-xs);
  color: var(--t3);
  padding: 0 var(--s-2);
  align-self: flex-end;
  padding-bottom: 10px;
}

/* Generate button — accent, clean, confident. Right-anchored. */
.prompt-gen-btn {
  align-self: flex-end;
  height: 40px;
  padding: 0 var(--s-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  background: linear-gradient(180deg, var(--accent-strong), var(--accent));
  color: #fff;
  border: 1px solid var(--accent-strong);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 1px 0 rgba(0,0,0,0.2),
    0 6px 16px rgba(var(--accent-rgb), 0.35);
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.prompt-gen-btn svg { color: #fff; opacity: 0.95; }
.prompt-gen-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 2px 0 rgba(0,0,0,0.25),
    0 10px 24px rgba(var(--accent-rgb), 0.45);
}
.prompt-gen-btn:active { transform: translateY(0); filter: brightness(0.95); }

[data-theme="light"] .prompt-gen-btn {
  background: linear-gradient(180deg, #2a2a30, #0a0a0c);
  border-color: #0a0a0c;
}

/* Controls row — inline pill treatment. Each label/control pair
   becomes a self-contained group. */
.controls-row .ctrl-group {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex: 0 0 auto;
}
.controls-row .ctrl-label {
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.08em;

  color: var(--t4);
}
.controls-row .ctrl-select {
  height: 30px;
  padding: 0 var(--s-3);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--t1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  min-width: auto;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.controls-row .ctrl-select:hover {
  border-color: var(--border-hover);
  background: var(--surface-2);
}
.controls-row .ctrl-chip {
  height: 28px;
  padding: 0 var(--s-3);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  color: var(--t3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: color .12s ease, background .12s ease, border-color .12s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.controls-row .ctrl-chip:hover {
  color: var(--t1);
  background: var(--surface);
  border-color: var(--border);
}
.controls-row .ctrl-chip.on {
  color: var(--t1);
  background: var(--accent-soft);
  border-color: var(--accent-strong);
  box-shadow: inset 0 0 0 1px var(--accent-muted);
}
.controls-row .ctrl-num {
  display: inline-flex;
  align-items: center;
  height: 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.controls-row .ctrl-num button {
  width: 28px;
  height: 30px;
  background: transparent;
  border: none;
  color: var(--t3);
  cursor: pointer;
  font-size: var(--text-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .12s ease, background .12s ease;
}
.controls-row .ctrl-num button:hover {
  color: var(--t1);
  background: var(--surface-2);
}
.controls-row .ctrl-num #n-v {
  padding: 0 var(--s-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--t1);
  min-width: 20px;
  text-align: center;
}

/* Enhance row — very quiet, doesn't compete with the card above */
#prompt-zone > #prompt-tools-row .pt-btn {
  padding: 4px 10px;
  height: 26px;
  font-size: var(--text-xs);
  color: var(--t3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: color .12s ease, background .12s ease, border-color .12s ease;
}
#prompt-zone > #prompt-tools-row .pt-btn:hover {
  color: var(--t1);
  background: var(--surface);
  border-color: var(--border);
}
#prompt-zone > #prompt-tools-row .pt-btn.is-active {
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-color: var(--accent-muted);
}
#prompt-zone > #prompt-tools-row .pt-btn svg {
  opacity: 0.75;
}
#prompt-zone > #prompt-tools-row .prompt-counter {
  margin-left: auto;
  font-size: var(--text-2xs);
  color: var(--t4);
  font-variant-numeric: tabular-nums;
}

/* Separators between controls — optional visual rhythm */
.controls-row .ctrl-sep {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 var(--s-1);
}

@media (max-width: 768px) {
  #prompt-zone { padding: var(--s-4) var(--s-4) var(--s-3); }
  #prompt-zone > #controls-row,
  #prompt-zone > #prompt-tools-row { padding-left: var(--s-4); padding-right: var(--s-4); }
}

/* ═══════════════════════════════════════════════════════════════
   Phase 120: Prompt composer — 2026 rebuild
   Research: ChatGPT, Claude, Perplexity, v0, Grok, Krea all converge
   on a single unified card with chips (not selects) at the footer,
   icon-only circular send, no visible labels. Dark Gen matches.
   ═══════════════════════════════════════════════════════════════ */

#prompt-zone {
  padding: var(--s-5) var(--s-7);
  background:
    radial-gradient(circle at 50% 120%, rgba(var(--accent-rgb), 0.06), transparent 60%),
    linear-gradient(180deg, rgba(8,8,10,0.85), rgba(8,8,10,0.55));
  border-bottom: 1px solid var(--border);
}

/* The card — one rounded surface, one border, one shadow. Controls,
   textarea, and CTA all live inside it. */
.prompt-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--s-4) var(--s-4) var(--s-2);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018));
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 14px 36px rgba(0,0,0,0.32);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.prompt-card:hover {
  border-color: var(--border-hover);
}
.prompt-card:focus-within {
  border-color: var(--accent-strong);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 0 3px var(--accent-soft),
    0 18px 44px rgba(0,0,0,0.38);
}

/* Textarea — the hero. Large, airy, placeholder styled as a hint. */
.prompt-card #prompt,
.prompt-card #prompt-batch {
  flex: 1 1 auto;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  color: var(--t1);
  font-family: var(--font);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: 1.55;
  min-height: 56px;
  max-height: 240px;
  padding: var(--s-2) var(--s-3);
  letter-spacing: var(--tracking-tight);
}
.prompt-card #prompt::placeholder,
.prompt-card #prompt-batch::placeholder {
  color: var(--t4);
  opacity: 0.85;
  font-weight: 400;
}

/* Footer bar inside the card — chips left, CTA cluster right */
.prompt-card-footer {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-2) var(--s-1);
  min-height: 40px;
}

/* Controls row becomes a horizontally-scrollable chip row inside the card.
   No visible labels, no separate backgrounds. */
.prompt-card-footer #controls-row {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px;
  margin: 0;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  scrollbar-width: none;  /* hide scroll thumb — the chips handle overflow gracefully */
}
.prompt-card-footer #controls-row::-webkit-scrollbar { display: none; }

.prompt-card-footer .ctrl-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}
/* Uppercase label text — hidden. Chip value IS the label. */
.prompt-card-footer .ctrl-label {
  display: none;
}
/* Separators between groups — hidden (spacing does the job) */
.prompt-card-footer .ctrl-sep {
  display: none;
}

/* Chip-styled native select: rounded-full pill, custom caret, no label */
.prompt-card-footer .ctrl-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 28px;
  padding: 0 var(--s-6) 0 var(--s-3);
  font-family: var(--font);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--t2);
  background-color: transparent;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--t4) 50%),
    linear-gradient(-45deg, transparent 50%, var(--t4) 50%);
  background-position:
    calc(100% - 12px) 13px,
    calc(100% - 8px) 13px;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  cursor: pointer;
  min-width: auto;
  max-width: 180px;
  text-overflow: ellipsis;
  transition: color .12s ease, border-color .12s ease, background-color .12s ease;
}
.prompt-card-footer .ctrl-select:hover {
  color: var(--t1);
  border-color: var(--border-hover);
  background-color: var(--surface);
}
.prompt-card-footer .ctrl-select:focus {
  border-color: var(--accent-strong);
  background-color: var(--surface-2);
  outline: none;
}

/* Ratio chip — more compact version inside the card */
.prompt-card-footer .ctrl-chip {
  height: 26px;
  padding: 0 10px;
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--t3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
  transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.prompt-card-footer .ctrl-chip:hover {
  color: var(--t1);
  background: var(--surface);
}
.prompt-card-footer .ctrl-chip.on {
  color: var(--t1);
  background: var(--accent-soft);
  border-color: var(--accent-strong);
}
.prompt-card-footer .ctrl-chip svg {
  width: 11px;
  height: 11px;
  opacity: 0.8;
}

/* Count stepper — pill-shaped */
.prompt-card-footer .ctrl-num {
  display: inline-flex;
  align-items: center;
  height: 28px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.prompt-card-footer .ctrl-num:hover {
  border-color: var(--border-hover);
}
.prompt-card-footer .ctrl-num button {
  width: 24px;
  height: 26px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--t3);
  cursor: pointer;
  font-size: var(--text-sm);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .12s ease, background .12s ease;
}
.prompt-card-footer .ctrl-num button:hover {
  color: var(--t1);
  background: var(--surface);
}
.prompt-card-footer .ctrl-num #n-v,
.prompt-card-footer .ctrl-num [id$="-v"] {
  padding: 0 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--t1);
  min-width: 16px;
  text-align: center;
}

/* Slider control inside chip row — compact */
.prompt-card-footer .ctrl-slider {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 var(--s-3);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  gap: var(--s-2);
  min-width: 140px;
}
.prompt-card-footer .ctrl-slider:hover { border-color: var(--border-hover); }
.prompt-card-footer .ctrl-slider input[type="range"] {
  flex: 1;
  height: 3px;
  accent-color: var(--accent-strong);
}
.prompt-card-footer .ctrl-slider .ctrl-slider-v {
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--t1);
  font-variant-numeric: tabular-nums;
  min-width: 30px;
  text-align: right;
}

/* CTA cluster on the right */
.prompt-card-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex: 0 0 auto;
  padding-left: var(--s-2);
  border-left: 1px solid var(--border);
  margin-left: var(--s-2);
}

/* Enhance — icon-only pill; premium Apple-ish square-icon button */
.prompt-card-actions .pt-enhance {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid transparent;
  color: var(--t3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.prompt-card-actions .pt-enhance:hover {
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-color: var(--accent-muted);
}
.prompt-card-actions .pt-enhance.is-active {
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-color: var(--accent-strong);
}
.prompt-card-actions .pt-enhance svg { opacity: 0.9; }

.prompt-card-actions .prompt-cost {
  font-size: var(--text-2xs);
  color: var(--t4);
  font-variant-numeric: tabular-nums;
  padding: 0 var(--s-1);
}

/* Generate — labeled pill (the app's primary verb should be visible, not an
   unlabeled glyph). Collapses to an icon-only circle at <=480px. */
.prompt-card-actions .prompt-gen-btn {
  height: 36px;
  padding: 0 var(--s-4);
  gap: 7px;
  border-radius: var(--radius-full);
  background: linear-gradient(180deg, var(--accent-strong), var(--accent));
  color: #fff;
  border: 1px solid rgba(0,0,0,0.2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 1px 2px rgba(0,0,0,0.4),
    0 4px 14px rgba(var(--accent-rgb), 0.38);
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
  position: relative;
}
.prompt-card-actions .prompt-gen-btn svg {
  color: #fff;
  opacity: 1;
  width: 15px;
  height: 15px;
}
.prompt-card-actions .gen-btn-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .prompt-card-actions .prompt-gen-btn { width: 36px; padding: 0; border-radius: 50%; }
  .prompt-card-actions .gen-btn-label { display: none; }
}
.prompt-card-actions .prompt-gen-btn:hover {
  transform: translateY(-1px) scale(1.03);
  filter: brightness(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 2px 3px rgba(0,0,0,0.45),
    0 8px 20px rgba(var(--accent-rgb), 0.5);
}
.prompt-card-actions .prompt-gen-btn:active {
  transform: translateY(0) scale(1);
  filter: brightness(0.92);
}
.prompt-card-actions .prompt-gen-btn .q-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--err);
  color: #fff;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

[data-theme="light"] .prompt-card-actions .prompt-gen-btn {
  background: linear-gradient(180deg, #2a2a30, #0a0a0c);
  border-color: #0a0a0c;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 1px 2px rgba(0,0,0,0.2),
    0 4px 14px rgba(0,0,0,0.25);
}

/* Reference / style-ref slots — smaller inside the card */
.prompt-card-footer .vid-ref-thumb,
.prompt-card-footer .char-ref {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
}

/* Kill the old single-row styling when it tries to apply inside the card */
.prompt-card #dock-mode-label { display: none !important; }

/* Responsive: narrower screens — wrap the chip row, keep send fixed right */
@media (max-width: 768px) {
  #prompt-zone { padding: var(--s-3) var(--s-3); }
  .prompt-card { padding: var(--s-3) var(--s-3) var(--s-1); }
  .prompt-card #prompt { font-size: 16px; min-height: 48px; }
  .prompt-card-footer { flex-wrap: wrap; }
  .prompt-card-footer #controls-row { order: 2; width: 100%; margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--border) !important; border-radius: 0 !important; }
  .prompt-card-actions { order: 1; margin-left: auto; padding-left: 0; border-left: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   WORKSPACE SHELL (Phase A)
   Image/Video modes: hero canvas + filmstrip + workflows tray + action rail.
   Replaces the infinite grid; Library keeps rGallery.
   ═══════════════════════════════════════════════════════════════════════ */

.ws-layout {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 232px;
  gap: var(--s-4, 16px);
  padding: var(--s-3, 12px) var(--s-4, 16px) var(--s-5, 20px);
  min-height: 100%;
}
.ws-layout[data-hero="0"] {
  grid-template-columns: 1fr;
}

/* ─── Workflows tray button ──────────────────────────────────────────── */
.ws-tray-btn {
  position: absolute;
  top: var(--s-3, 12px);
  left: var(--s-4, 16px);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--t1);
  font-size: var(--text-xs, 11px);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.ws-tray-btn:hover {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.08);
}
.ws-tray-btn:active { transform: translateY(1px); }
.ws-tray-btn svg {
  color: var(--accent);
}

/* ─── Workflows tray panel ───────────────────────────────────────────── */
.ws-tray {
  position: absolute;
  top: calc(var(--s-3, 12px) + 36px);
  left: var(--s-4, 16px);
  z-index: 20;
  width: 340px;
  max-height: min(560px, calc(100vh - 200px));
  overflow-y: auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 14px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.35);
  backdrop-filter: blur(12px);
  animation: wsTrayIn 140ms cubic-bezier(0.2, 0, 0.2, 1);
}
.ws-tray[hidden] { display: none; }
@keyframes wsTrayIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.ws-tray-inner { padding: var(--s-3, 12px); }
.ws-tray-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.ws-tray-title {
  font-size: var(--text-sm, 12px);
  font-weight: 700;
  color: var(--t1);
  letter-spacing: 0.02em;
}
.ws-tray-close {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--t3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ws-tray-close:hover { background: var(--surface); color: var(--t1); }

.ws-tray-section { margin-bottom: var(--s-3, 12px); }
.ws-tray-section-label {

  font-size: var(--text-2xs, 10px);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--t3);
  padding: 0 4px 6px;
}

/* Recipes list inside tray */
.ws-tray-recipes { display: flex; flex-direction: column; gap: 2px; }
.ws-tray-cat {
  font-size: var(--text-2xs, 10px);
  font-weight: 600;
  color: var(--t2);

  letter-spacing: 0.08em;
  padding: 8px 4px 3px;
}
.ws-tray-recipe {
  text-align: left;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-md, 8px);
  background: transparent;
  color: var(--t1);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.ws-tray-recipe:hover {
  background: var(--surface);
  border-color: rgba(var(--accent-rgb), 0.35);
}
.ws-tray-recipe-label {
  font-size: var(--text-sm, 12px);
  font-weight: 600;
  color: var(--t1);
}
.ws-tray-recipe-desc {
  font-size: var(--text-xs, 11px);
  color: var(--t3);
  margin-top: 2px;
  line-height: 1.35;
}

/* Preset chips inside tray */
.ws-tray-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.ws-tray-preset {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--t1);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.ws-tray-preset:hover {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.08);
}
.ws-tray-preset-label {
  font-size: var(--text-xs, 11px);
  font-weight: 600;
  color: var(--t1);
}
.ws-tray-preset-hint {
  font-size: var(--text-2xs, 10px);
  color: var(--t3);
}
.ws-tray-preset-all {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px dashed var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--t2);
  font-size: var(--text-xs, 11px);
  cursor: pointer;
}
.ws-tray-preset-all:hover { color: var(--t1); border-color: var(--t3); }

/* Scale launchers */
.ws-tray-scale { display: flex; flex-direction: column; gap: 4px; }
.ws-tray-scale-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--surface);
  color: var(--t1);
  font-size: var(--text-sm, 12px);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.ws-tray-scale-btn:hover {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.08);
}
.ws-tray-scale-btn svg { color: var(--t2); }
.ws-tray-scale-btn:hover svg { color: var(--accent); }

/* ─── Main (hero + filmstrip) ────────────────────────────────────────── */
.ws-main {
  display: flex;
  flex-direction: column;
  gap: var(--s-3, 12px);
  min-height: 480px;
}

/* Hero canvas */
.ws-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2, 8px);
  flex: 1;
  min-height: 0;
  padding-top: 50px; /* space for the workflows tray button */
}
.ws-hero-canvas {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 14px);
  overflow: hidden;
  min-height: 360px;
  flex: 1;
}
.ws-hero-media {
  max-width: 100%;
  max-height: calc(100vh - 320px);
  width: auto;
  height: auto;
  display: block;
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.ws-hero-menu {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: var(--t1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: background 0.12s ease, border-color 0.12s ease;
}
.ws-hero-menu:hover {
  background: rgba(0,0,0,0.75);
  border-color: rgba(var(--accent-rgb), 0.55);
}
.ws-hero-menu-pop {
  position: fixed;
  z-index: 9999;
  min-width: 180px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.5);
  padding: 4px;
  backdrop-filter: blur(10px);
  animation: wsTrayIn 120ms ease-out;
}
.ws-hero-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--t1);
  font-size: var(--text-sm, 12px);
  cursor: pointer;
}
.ws-hero-menu-item:hover { background: var(--surface); }
.ws-hero-menu-item.is-danger { color: #ff7070; }
.ws-hero-menu-item.is-danger:hover { background: rgba(255, 80, 80, 0.12); }

.ws-hero-meta {
  display: flex;
  align-items: center;
  gap: var(--s-2, 8px);
  padding: 0 4px;
  color: var(--t2);
}
.ws-hero-prompt {
  flex: 1;
  font-size: var(--text-xs, 11px);
  color: var(--t2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-hero-chip {
  display: inline-flex;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--t2);
  font-size: var(--text-2xs, 10px);
  font-weight: 600;
}

/* Empty state */
.ws-hero-empty {
  align-items: center;
  justify-content: center;
  padding-top: 50px;
}
.ws-empty-card {
  width: 100%;
  max-width: 520px;
  margin: auto;
  padding: var(--s-5, 20px) var(--s-4, 16px);
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg, 14px);
}
.ws-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--surface-2);
  margin-bottom: var(--s-3, 12px);
  color: var(--accent);
}
.ws-empty-title {
  font-size: var(--text-lg, 16px);
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 4px;
}
.ws-empty-desc {
  font-size: var(--text-sm, 12px);
  color: var(--t3);
  margin-bottom: var(--s-4, 16px);
}
.ws-empty-recipes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-2, 8px);
}
.ws-recipe-card {
  padding: 10px 12px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--surface-2);
  color: var(--t1);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.ws-recipe-card:hover {
  border-color: rgba(var(--accent-rgb), 0.55);
  transform: translateY(-1px);
}
.ws-recipe-label {
  font-size: var(--text-sm, 12px);
  font-weight: 600;
  color: var(--t1);
}
.ws-recipe-desc {
  font-size: var(--text-2xs, 10px);
  color: var(--t3);
  margin-top: 2px;
  line-height: 1.35;
}

/* ─── Filmstrip ──────────────────────────────────────────────────────── */
.ws-filmstrip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), 0.25) transparent;
}
.ws-filmstrip::-webkit-scrollbar { height: 6px; }
.ws-filmstrip::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.25); border-radius: 999px; }
.ws-film-item {
  flex-shrink: 0;
  width: 96px;
  height: 72px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
  cursor: pointer;
  background: var(--surface);
  padding: 0;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.ws-film-item:hover { border-color: rgba(var(--accent-rgb), 0.55); transform: translateY(-1px); }
.ws-film-item.is-active { border-color: var(--accent); }
.ws-film-item img,
.ws-film-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ws-film-more {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  height: 72px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--t2);
  font-size: var(--text-xs, 11px);
  font-weight: 600;
  cursor: pointer;
}
.ws-film-more:hover { border-color: var(--t3); color: var(--t1); }

/* ─── Action rail ────────────────────────────────────────────────────── */
.ws-rail {
  position: sticky;
  top: var(--s-3, 12px);
  align-self: flex-start;
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  padding: var(--s-3, 12px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 14px);
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), 0.25) transparent;
}
.ws-rail[hidden] { display: none; }
.ws-rail::-webkit-scrollbar { width: 6px; }
.ws-rail::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.25); border-radius: 999px; }
.ws-rail-inner { display: flex; flex-direction: column; gap: var(--s-3, 12px); }

.ws-rail-group {}
.ws-rail-group-label {

  font-size: var(--text-2xs, 10px);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--t3);
  margin-bottom: 6px;
  padding: 0 2px;
}
.ws-rail-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ws-rail-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--t1);
  font-size: var(--text-xs, 11px);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s ease, border-color 0.1s ease;
  width: 100%;
}
.ws-rail-btn svg {
  color: var(--t3);
  flex-shrink: 0;
}
.ws-rail-btn:hover {
  background: var(--surface-2);
  border-color: var(--border);
}
.ws-rail-btn:hover svg { color: var(--accent); }
.ws-rail-btn:active { transform: translateY(1px); }

/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ws-layout { grid-template-columns: 1fr; }
  .ws-rail {
    position: static;
    max-height: none;
    order: 2;
  }
}
@media (max-width: 768px) {
  .ws-layout { padding: var(--s-2, 8px); }
  .ws-tray {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 70vh;
    border-radius: var(--radius-lg, 14px) var(--radius-lg, 14px) 0 0;
  }
  .ws-hero { padding-top: 44px; }
  .ws-hero-canvas { min-height: 280px; }
  .ws-film-item { width: 72px; height: 56px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   COMPOSER POWER FEATURES (Phase E)
   Progressive-disclosure additions. Zero visible footprint by default —
   all UI appears only on drag, click, or active state.
   ═══════════════════════════════════════════════════════════════════════ */

/* Drag-drop overlay — invisible until a drag with files enters the card */
.composer-drop-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(var(--accent-rgb), 0.6);
  border-radius: inherit;
  background: rgba(var(--accent-rgb), 0.08);
  backdrop-filter: blur(6px);
  pointer-events: none;
  animation: cdoIn 120ms ease-out;
}
.composer-drop-overlay[hidden] { display: none; }
.prompt-card { position: relative; }
@keyframes cdoIn { from { opacity: 0; } to { opacity: 1; } }
.cdo-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--accent);
}
.cdo-label {
  font-size: var(--text-sm, 12px);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Inline panel (shared by seed + negative prompt) — stacks just above the footer */
.cp-inline-panel {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 6px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--surface);
  animation: cpPanelIn 120ms ease-out;
}
.cp-inline-panel[hidden] { display: none; }
@keyframes cpPanelIn { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: translateY(0); } }

.cp-panel-label {
  font-size: var(--text-2xs, 10px);

  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--t3);
  flex-shrink: 0;
}
.cp-panel-input {
  flex: 0 0 140px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-2);
  color: var(--t1);
  font-size: var(--text-xs, 11px);
  outline: none;
}
.cp-panel-input:focus {
  border-color: rgba(var(--accent-rgb), 0.55);
}
.cp-panel-textarea {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-2);
  color: var(--t1);
  font-size: var(--text-xs, 11px);
  font-family: inherit;
  resize: vertical;
  outline: none;
  min-height: 40px;
}
.cp-panel-textarea:focus {
  border-color: rgba(var(--accent-rgb), 0.55);
}
.cp-panel-rand,
.cp-panel-clear {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--t2);
  font-size: var(--text-2xs, 10px);
  font-weight: 600;
  cursor: pointer;

  letter-spacing: 0.05em;
}
.cp-panel-rand:hover { color: var(--t1); border-color: var(--t3); }
.cp-panel-clear:hover { color: #ff7777; border-color: rgba(255, 119, 119, 0.35); }

/* Footer icon buttons — compact, same treatment as enhance button */
.cp-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--t3);
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.cp-icon-btn:hover {
  color: var(--t1);
  border-color: var(--border);
  background: var(--surface);
}
.cp-icon-btn.is-active {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.1);
}
.cp-icon-minus {
  display: inline-block;
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  position: relative;
  top: -1px;
}

/* ═══════════════════════════════════════════════════════════════════════
   NOTIFICATIONS REBUILD (Phase F)
   Time grouping, filter chips, unread pill, empty-state card.
   ═══════════════════════════════════════════════════════════════════════ */

.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border);
}
.notif-head-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: var(--text-sm, 12px);
  color: var(--t1);
}
.notif-unread-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--accent);
  font-size: var(--text-2xs, 10px);
  font-weight: 700;
}
.notif-head-actions { display: inline-flex; gap: 6px; }

/* Filter chip row sits directly under the head; no negative bleed-out margin
 * (the dropdown now has zero horizontal padding, so a -12px margin used to
 * overflow past the rounded corners of the panel). */
.notif-filters {
  display: flex;
  gap: 6px;
  padding: 8px 14px 10px;
  border-bottom: 1px solid var(--border);
}
.notif-chip {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--t2);
  font-size: var(--text-2xs, 10px);
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.notif-chip:hover { color: var(--t1); border-color: var(--t3); }
.notif-chip.is-active {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.08);
}

.notif-empty {
  padding: 36px 14px 32px;
  text-align: center;
  color: var(--t3);
}
.notif-empty > svg {
  color: var(--accent);
  opacity: 0.7;
  margin-bottom: 10px;
}
.notif-empty-title {
  font-size: var(--text-sm, 12px);
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 2px;
}
.notif-empty-desc {
  font-size: var(--text-xs, 11px);
  color: var(--t3);
}

.notif-day {
  font-size: var(--text-2xs, 10px);
  font-weight: 700;
  letter-spacing: 0.1em;

  color: var(--t3);
  padding: 12px 14px 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   SETTINGS REBUILD (Phase G)
   Card grouping + search highlight + refined section headers.
   ═══════════════════════════════════════════════════════════════════════ */

#modal-settings .set-section > h3 {
  font-size: var(--text-md, 14px);
  font-weight: 700;
  color: var(--t1);
  letter-spacing: -0.005em;
  margin: 4px 0 10px;
}

/* Wrap grouped fields in a subtle card for visual hierarchy */
#modal-settings .set-field {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--surface);
  margin-bottom: 8px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
#modal-settings .set-field:hover {
  border-color: rgba(var(--accent-rgb), 0.3);
  background: var(--surface-2);
}
#modal-settings .set-field > label {
  display: block;
  font-size: var(--text-sm, 12px);
  font-weight: 600;
  color: var(--t1);
  margin-bottom: 6px;
}
#modal-settings .set-field--hit {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.05);
  animation: setFieldHit 220ms ease-out;
}
@keyframes setFieldHit {
  0% { transform: scale(0.995); }
  60% { transform: scale(1.003); }
  100% { transform: scale(1); }
}

/* Search input treatment */
#modal-settings .set-search {
  margin: 0 16px 12px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--surface-2);
  color: var(--t1);
  font-size: var(--text-sm, 12px);
  outline: none;
  transition: border-color 0.15s ease;
}
#modal-settings .set-search:focus {
  border-color: rgba(var(--accent-rgb), 0.55);
}
#modal-settings .set-search::placeholder { color: var(--t3); }

/* ═══════════════════════════════════════════════════════════════════════
   FLOWS REBUILD (Phase H)
   Accent-gradient quick-start, tighter section rhythm, featured row treatment.
   ═══════════════════════════════════════════════════════════════════════ */

.flow-quickstart {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), 0.25);
}
.flow-quickstart::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb), 0.08) 0%,
    rgba(var(--accent-rgb), 0) 50%,
    rgba(var(--accent-rgb), 0.05) 100%);
  pointer-events: none;
  border-radius: inherit;
}
.flow-quickstart > * { position: relative; }

/* Featured templates row — shown when there are graph templates */
.flow-tpl-card {
  transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.flow-tpl-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  border-top-width: 4px !important;
}

/* Tighter section rhythm */
.flow-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.flow-section-title {
  font-size: var(--text-md, 14px);
  font-weight: 700;
  color: var(--t1);
  letter-spacing: -0.005em;
}
.flow-section-sub {
  font-size: var(--text-xs, 11px);
  color: var(--t3);
}

/* Stats bar: card-like treatment matching v8 composer */
.flow-stats-bar {
  display: flex;
  gap: var(--s-2, 8px);
  margin: 12px 0;
}
.flow-stat {
  flex: 1;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  transition: border-color 0.15s ease;
}
.flow-stat:hover {
  border-color: rgba(var(--accent-rgb), 0.35);
}
.flow-stat b {
  display: block;
  font-size: var(--text-2xl, 24px);
  font-weight: 700;
  color: var(--t1);
  line-height: 1;
  margin-bottom: 2px;
}
.flow-stat small {
  font-size: var(--text-2xs, 10px);
  color: var(--t3);

  letter-spacing: 0.08em;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════
   VOICE WORKSPACE (Phase K)
   Left library panel retained; right side mirrors the workspace shell —
   hero waveform + filmstrip + action rail + workflows tray.
   ═══════════════════════════════════════════════════════════════════════ */

.voice-studio { gap: var(--s-3, 12px); }
.voice-workspace {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 232px;
  gap: var(--s-3, 12px);
  min-height: 480px;
  padding: var(--s-3, 12px) var(--s-3, 12px) var(--s-4, 16px);
}
.voice-studio[data-hero="0"] .voice-workspace {
  grid-template-columns: 1fr;
}

/* Reset inline-style empties on voice library */
.voice-search-wrap { padding: 0 12px 8px; }
.voice-search-input {
  width: 100%;
  padding: 6px 10px;
  font-size: var(--text-sm, 12px);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface-2);
  color: var(--t1);
  outline: none;
}
.voice-search-input:focus { border-color: rgba(var(--accent-rgb), 0.55); }
.voice-item-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.voice-item-row .voice-item { flex: 1; }
.voice-item-name { display: inline-block; }
.voice-preview-btn {
  flex-shrink: 0;
  padding: 6px 8px;
  background: transparent;
  border: 0;
  color: var(--t3);
  cursor: pointer;
  border-radius: var(--radius-sm, 6px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s ease, background 0.12s ease;
}
.voice-preview-btn:hover { color: var(--accent); background: var(--surface-2); }
.voice-empty-hint {
  padding: 12px;
  text-align: center;
  font-size: var(--text-xs, 11px);
  color: var(--t3);
}

/* ─── VC workflows tray button + panel (mirrors .ws-tray) ───────────── */
.vc-tray-btn {
  position: absolute;
  top: var(--s-3, 12px);
  left: var(--s-3, 12px);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--t1);
  font-size: var(--text-xs, 11px);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.vc-tray-btn:hover {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.08);
}
.vc-tray-btn:active { transform: translateY(1px); }
.vc-tray-btn svg { color: var(--accent); }

.vc-tray {
  position: absolute;
  top: calc(var(--s-3, 12px) + 36px);
  left: var(--s-3, 12px);
  z-index: 20;
  width: 340px;
  max-height: min(560px, calc(100vh - 200px));
  overflow-y: auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 14px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  animation: wsTrayIn 140ms cubic-bezier(0.2, 0, 0.2, 1);
}
.vc-tray[hidden] { display: none; }
.vc-tray-inner { padding: var(--s-3, 12px); }
.vc-tray-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.vc-tray-title {
  font-size: var(--text-sm, 12px);
  font-weight: 700;
  color: var(--t1);
}
.vc-tray-close {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--t3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vc-tray-close:hover { background: var(--surface); color: var(--t1); }

.vc-tray-section { margin-bottom: var(--s-3, 12px); }
.vc-tray-section-label {

  font-size: var(--text-2xs, 10px);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--t3);
  padding: 0 4px 6px;
}
.vc-tray-recipes { display: flex; flex-direction: column; gap: 2px; }
.vc-tray-recipe {
  text-align: left;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-md, 8px);
  background: transparent;
  color: var(--t1);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.vc-tray-recipe:hover { background: var(--surface); border-color: rgba(var(--accent-rgb), 0.35); }
.vc-tray-recipe-label { font-size: var(--text-sm, 12px); font-weight: 600; color: var(--t1); }
.vc-tray-recipe-desc { font-size: var(--text-xs, 11px); color: var(--t3); margin-top: 2px; line-height: 1.35; }

.vc-tray-scale { display: flex; flex-direction: column; gap: 4px; }
.vc-tray-scale-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--surface);
  color: var(--t1);
  font-size: var(--text-sm, 12px);
  font-weight: 600;
  cursor: pointer;
}
.vc-tray-scale-btn:hover { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.08); }
.vc-tray-scale-btn svg { color: var(--t2); }

/* ─── Main + Hero ──────────────────────────────────────────────────── */
.vc-main {
  display: flex;
  flex-direction: column;
  gap: var(--s-3, 12px);
  min-height: 0;
}
/* Pre-queue TTS cost readout — the .est-chip pill, right-aligned so it
 * clears the absolute Workflows button at the workspace's top-left. */
.voice-est { align-self: flex-end; }
.voice-est:empty { display: none; }
.vc-hero {
  position: relative;
  display: flex;
  flex: 1;
  padding-top: 50px;
}
.vc-hero-card {
  width: 100%;
  padding: var(--s-4, 16px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 14px);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: var(--s-3, 12px);
}
.vc-hero-header {
  display: flex;
  align-items: center;
  gap: var(--s-3, 12px);
}
.vc-hero-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.9), rgba(var(--accent-rgb), 0.5));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-lg, 16px);
  flex-shrink: 0;
}
.vc-hero-meta { flex: 1; min-width: 0; }
.vc-hero-voice {
  font-size: var(--text-sm, 12px);
  font-weight: 700;
  color: var(--t1);
}
.vc-hero-size {
  font-size: var(--text-2xs, 10px);
  color: var(--t3);
  margin-top: 2px;
}
.vc-hero-menu {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--t1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.vc-hero-menu:hover { background: var(--surface-2); border-color: rgba(var(--accent-rgb), 0.55); }
.vc-hero-text {
  font-size: var(--text-md, 14px);
  color: var(--t1);
  line-height: 1.5;
  padding: 10px 14px;
  background: var(--surface-2);
  border-radius: var(--radius-md, 8px);
  white-space: pre-wrap;
  word-break: break-word;
}
.vc-hero-player {
  display: flex;
  align-items: center;
  gap: var(--s-3, 12px);
  padding: var(--s-3, 12px);
  background: var(--surface-2);
  border-radius: var(--radius-md, 8px);
}
.vc-play-main {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(180deg, var(--accent-strong, var(--accent)), var(--accent));
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 4px 12px rgba(var(--accent-rgb), 0.35);
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.vc-play-main:hover { transform: translateY(-1px); }
.vc-play-main:active { transform: translateY(1px); }
.vc-play-main.playing { background: linear-gradient(180deg, var(--accent), var(--accent-strong, var(--accent))); }

.vc-waveform {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  gap: 2px;
}
.vc-wave-bar {
  flex: 1;
  min-width: 2px;
  max-width: 4px;
  background: rgba(var(--accent-rgb), 0.35);
  border-radius: 2px;
  transition: background 0.2s ease;
}
.vc-hero-player .vc-play-main.playing ~ .vc-waveform .vc-wave-bar {
  background: rgba(var(--accent-rgb), 0.85);
  animation: vcWavePulse 1.2s ease-in-out infinite;
}
.vc-hero-player .vc-play-main.playing ~ .vc-waveform .vc-wave-bar:nth-child(3n)   { animation-delay: 0.1s; }
.vc-hero-player .vc-play-main.playing ~ .vc-waveform .vc-wave-bar:nth-child(3n+1) { animation-delay: 0.25s; }
.vc-hero-player .vc-play-main.playing ~ .vc-waveform .vc-wave-bar:nth-child(3n+2) { animation-delay: 0.4s; }
@keyframes vcWavePulse {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.35); }
}

/* Empty state */
.vc-hero-empty { align-items: center; justify-content: center; padding-top: 50px; }
.vc-empty-card {
  width: 100%;
  max-width: 520px;
  margin: auto;
  padding: var(--s-5, 20px) var(--s-4, 16px);
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg, 14px);
}
.vc-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--surface-2);
  margin-bottom: var(--s-3, 12px);
  color: var(--accent);
}
.vc-empty-title {
  font-size: var(--text-lg, 16px);
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 4px;
}
.vc-empty-desc {
  font-size: var(--text-sm, 12px);
  color: var(--t3);
  margin-bottom: var(--s-4, 16px);
}
.vc-empty-starters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-2, 8px);
}
.vc-starter {
  padding: 10px 12px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--surface-2);
  color: var(--t1);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.vc-starter:hover { border-color: rgba(var(--accent-rgb), 0.55); transform: translateY(-1px); }
.vc-starter svg { color: var(--accent); margin-bottom: 6px; }
.vc-starter-label { font-size: var(--text-sm, 12px); font-weight: 600; color: var(--t1); margin-top: 4px; }
.vc-starter-hint { font-size: var(--text-2xs, 10px); color: var(--t3); margin-top: 2px; line-height: 1.35; }

/* Filmstrip */
.vc-filmstrip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), 0.25) transparent;
}
.vc-filmstrip::-webkit-scrollbar { height: 6px; }
.vc-filmstrip::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.25); border-radius: 999px; }
.vc-film {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 6px 10px;
  max-width: 240px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--t1);
  font-size: var(--text-xs, 11px);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.vc-film:hover { border-color: rgba(var(--accent-rgb), 0.55); }
.vc-film.is-active { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.06); }
.vc-film-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
}
.vc-film-play.is-playing { background: var(--accent); color: #fff; }
.vc-film-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--t2);
  font-weight: 600;
}
.vc-film:hover .vc-film-text { color: var(--t1); }

/* ─── Action rail ──────────────────────────────────────────────────── */
.vc-rail {
  position: sticky;
  top: var(--s-3, 12px);
  align-self: flex-start;
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  padding: var(--s-3, 12px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 14px);
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), 0.25) transparent;
}
.vc-rail[hidden] { display: none; }
.vc-rail::-webkit-scrollbar { width: 6px; }
.vc-rail::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.25); border-radius: 999px; }
.vc-rail-inner { display: flex; flex-direction: column; gap: var(--s-3, 12px); }
.vc-rail-group-label {

  font-size: var(--text-2xs, 10px);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--t3);
  margin-bottom: 6px;
  padding: 0 2px;
}
.vc-rail-actions { display: flex; flex-direction: column; gap: 2px; }
.vc-rail-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--t1);
  font-size: var(--text-xs, 11px);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s ease, border-color 0.1s ease;
  width: 100%;
}
.vc-rail-btn svg { color: var(--t3); flex-shrink: 0; }
.vc-rail-btn:hover { background: var(--surface-2); border-color: var(--border); }
.vc-rail-btn:hover svg { color: var(--accent); }

@media (max-width: 1100px) {
  .voice-workspace { grid-template-columns: 1fr; }
  .vc-rail { position: static; max-height: none; order: 2; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PERSONA POLISH (Phase L)
   Replace inline-styled filter bar, actor cards, consent badges with
   tokenized classes matching v8 workspace treatment.
   ═══════════════════════════════════════════════════════════════════════ */

.persona-filter-search {
  flex: 1;
  min-width: 180px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface);
  color: var(--t1);
  font-size: var(--text-sm, 12px);
  outline: none;
  transition: border-color 0.15s ease;
}
.persona-filter-search:focus { border-color: rgba(var(--accent-rgb), 0.55); }
.persona-filter-select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--surface);
  color: var(--t1);
  font-size: var(--text-xs, 11px);
  outline: none;
  cursor: pointer;
}
.persona-filter-select:focus { border-color: rgba(var(--accent-rgb), 0.55); }
.persona-filter-count {
  font-size: var(--text-xs, 11px);
  color: var(--t3);
}

/* Badge system — unified for consent, stats, licensed */
.persona-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: var(--radius-sm, 4px);
  font-size: var(--text-2xs, 10px);
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 4px;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}
.persona-badge--ok {
  color: var(--ok);
  background: rgba(74, 222, 128, 0.1);
  border-color: rgba(74, 222, 128, 0.28);
}
.persona-badge--warn {
  color: var(--warn);
  background: rgba(234, 179, 8, 0.1);
  border-color: rgba(234, 179, 8, 0.28);
}
.persona-badge--info {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.28);
}

/* Card action row */
.persona-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
.persona-card-actions .persona-card-toggle { flex: 1; }
.persona-card-iconbtn {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--t2);
  cursor: pointer;
  font-size: var(--text-xs, 11px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.persona-card-iconbtn:hover { color: var(--t1); border-color: var(--t3); }

.persona-empty-panel {
  margin: 20px 0;
  padding: 30px;
  text-align: center;
  font-size: var(--text-sm, 12px);
  color: var(--t3);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md, 8px);
}

/* ─── Seeded actor cards ───────────────────────────────────────────── */
.persona-actors-section {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.persona-actors-title {
  font-size: var(--text-base, 13px);
  font-weight: 600;
  color: var(--t2);
  margin-bottom: 4px;
}
.persona-actors-sub {
  font-size: var(--text-xs, 11px);
  color: var(--t3);
  margin-bottom: 14px;
}
.persona-actor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s-2, 8px);
}
.persona-actor-card {
  padding: 14px;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-md, 10px);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
  font: inherit;
  color: inherit;
  display: block;
}
.persona-actor-card:hover {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: var(--surface-2);
  transform: translateY(-1px);
}
.persona-actor-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.persona-actor-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent-soft, rgba(var(--accent-rgb), 0.18)), rgba(var(--accent-rgb), 0.08));
  color: var(--accent);
  border-radius: var(--radius-md, 8px);
  flex-shrink: 0;
}
.persona-actor-meta { min-width: 0; }
.persona-actor-name {
  font-size: var(--text-sm, 12px);
  font-weight: 600;
  color: var(--t1);
}
.persona-actor-arch {
  font-size: var(--text-2xs, 10px);
  color: var(--t3);
  text-transform: capitalize;
  margin-top: 1px;
}
.persona-actor-vibe {
  font-size: var(--text-2xs, 10px);
  color: var(--t3);
  line-height: 1.4;
  margin-bottom: 10px;
  min-height: 28px;
}
.persona-actor-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.persona-actor-use {
  font-size: var(--text-2xs, 10px);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
}
.persona-actor-card:hover .persona-actor-use { gap: 6px; }

.persona-arche-chips { margin-top: 20px; }

/* ═══════════════════════════════════════════════════════════════════════
   LIGHTBOX ACTION BAR POLISH (Phase M)
   5-group workspace rail language: Refine · Transform · Animate · Chain ·
   Distribute. Flat icons (Fav, Info, Delete, Download) retained on the left.
   ═══════════════════════════════════════════════════════════════════════ */

.lb-actions .lb-sep {
  width: 1px;
  height: 22px;
  background: var(--border);
  margin: 0 var(--s-1, 4px);
  flex-shrink: 0;
  align-self: center;
}

.lb-dd-caret {
  margin-left: 4px;
  opacity: 0.7;
  transition: transform 0.15s ease;
}
.lb-dropdown.is-open .lb-dd-caret,
.lb-dropdown:focus-within .lb-dd-caret {
  transform: rotate(180deg);
  opacity: 1;
}

.lb-dropdown-menu {
  min-width: 180px;
  padding: 6px;
  border-radius: var(--radius-md, 8px);
}
.lb-dd-label {

  font-size: var(--text-2xs, 10px);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--t3);
  padding: 4px 8px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.lb-dropdown-item {
  border-radius: var(--radius-sm, 6px);
  font-size: var(--text-sm, 12px);
  font-weight: 500;
  transition: background 0.1s ease;
}
.lb-dropdown-item:hover { background: rgba(var(--accent-rgb), 0.1); }

.lb-dropdown-trigger {
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ═══════════════════════════════════════════════════════════════════════
   ANALYTICS GROUPING (Phase N)
   Uppercase group labels + consistent spacing matching the workspace rail.
   ═══════════════════════════════════════════════════════════════════════ */

.an-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--s-2, 8px);
}
.an-header { margin-bottom: var(--s-3, 12px); }
.an-header-spacer { flex: 1; }

.an-group { margin-bottom: var(--s-5, 20px); }
.an-group:last-child { margin-bottom: 0; }
.an-group-label {

  font-size: var(--text-2xs, 10px);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--t3);
  padding: 0 2px var(--s-2, 8px);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-3, 12px);
}

.an-card-title { margin-bottom: 8px; }
.an-grid-gap { margin-top: var(--s-3, 12px); }
.an-subsection { margin-top: var(--s-3, 12px); }

/* ═══════════════════════════════════════════════════════════════════════
   PRESETS POLISH (Phase O)
   v8 chip treatment for tabs + consistent card grid + tighter niche header.
   ═══════════════════════════════════════════════════════════════════════ */

.workflow-tabs--v8 {
  display: flex;
  gap: 6px;
  padding: 4px;
  margin-bottom: var(--s-4, 16px);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  width: fit-content;
}
.workflow-tabs--v8 .workflow-tab {
  padding: 6px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--t2);
  font-size: var(--text-sm, 12px);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.workflow-tabs--v8 .workflow-tab:hover { color: var(--t1); }
.workflow-tabs--v8 .workflow-tab.is-active {
  /* was var(--accent) #606068 — dimmer than the INACTIVE tab, so it read reversed */
  color: var(--t1);
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.4);
}

.tmpl-grid--compact {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--s-2, 8px);
}

/* Unified template card hover — matches .ws-recipe-card treatment */
.tmpl-card {
  transition: border-color 0.15s ease, transform 0.1s ease, background 0.15s ease;
}
.tmpl-card:hover {
  border-color: rgba(var(--accent-rgb), 0.55);
  transform: translateY(-1px);
}

.tmpl-header {
  gap: var(--s-2, 8px);
  margin-bottom: var(--s-3, 12px);
  padding-bottom: var(--s-2, 8px);
  border-bottom: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════════════
   UTILITY CLEANUP (Phase P)
   Shared badge, chip, and row-action classes that replace scattered inline
   styles. Adopted progressively — existing inline-styled elements keep
   working; new UI should prefer these.
   ═══════════════════════════════════════════════════════════════════════ */

/* Status badge — unified token-based styling replaces ad-hoc
   rgba(74,222,128,.1) usages across persona/flow/batch cards. */
.dg-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 4px);
  font-size: var(--text-2xs, 10px);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.dg-badge--ok {
  color: var(--ok);
  background: rgba(74, 222, 128, 0.1);
  border-color: rgba(74, 222, 128, 0.28);
}
.dg-badge--warn {
  color: var(--warn);
  background: rgba(234, 179, 8, 0.1);
  border-color: rgba(234, 179, 8, 0.28);
}
.dg-badge--err {
  color: var(--err);
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.28);
}
.dg-badge--info {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.28);
}
.dg-badge--muted {
  color: var(--t3);
  background: var(--surface);
  border-color: var(--border);
}

/* Meta row — scannable horizontal key-value pairs (common in job cards,
   analytics summaries, persona stats). */
.dg-meta-row {
  display: flex;
  align-items: center;
  gap: var(--s-2, 8px);
  font-size: var(--text-xs, 11px);
  color: var(--t3);
}
.dg-meta-row > strong {
  color: var(--t1);
  font-weight: 600;
}

/* Inline icon button — 24px circular/rounded hover treatment. Used by
   row actions in the lightbox, filmstrip hero menus, and any card
   corner affordances. */
.dg-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--t3);
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease;
}
.dg-icon-btn:hover {
  color: var(--t1);
  background: var(--surface-2);
}

/* Section label — uppercase micro-label used by workspace rail groups,
   analytics groups, settings sections. One class, consistent everywhere. */
.dg-section-label {

  font-size: var(--text-2xs, 10px);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--t3);
  padding: 0 2px var(--s-1, 4px);
}

/* Phase Q — Agent empty states (polished to match Library/Image richness) */
.agent-empty-list {
  padding: 20px 12px;
  text-align: center;
  color: var(--t3);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md, 8px);
  margin: 8px 4px;
}
.agent-empty-list > svg { color: var(--accent); opacity: 0.65; margin-bottom: 6px; }
.agent-empty-audit {
  padding: 40px 20px;
  text-align: center;
  color: var(--t3);
}
.agent-empty-audit > svg { color: var(--accent); opacity: 0.7; margin-bottom: 8px; }
.agent-empty-title {
  font-size: var(--text-sm, 12px);
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 2px;
}
.agent-empty-desc {
  font-size: var(--text-xs, 11px);
  color: var(--t3);
  line-height: 1.4;
}

/* Phase R — explicit disabled states for accent / ghost / danger buttons.
   Browser default (opacity:0.4) is inconsistent across UAs and reads as
   "broken" rather than "intentionally off". */
.btn-accent[disabled],
.btn-accent:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--surface-2);
  color: var(--t3);
  border-color: var(--border);
  box-shadow: none;
}
.btn-accent[disabled]:hover,
.btn-accent:disabled:hover {
  background: var(--surface-2);
  color: var(--t3);
  border-color: var(--border);
  transform: none;
}
.btn-ghost[disabled],
.btn-ghost:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  color: var(--t3);
}
.btn-danger[disabled],
.btn-danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Phase R — Batch Variables empty state (M9) */
.batch-var-empty {
  padding: 20px 16px;
  text-align: center;
  color: var(--t3);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md, 8px);
}
.batch-var-empty > svg { color: var(--accent); opacity: 0.65; margin-bottom: 8px; }
.batch-var-empty-title {
  font-size: var(--text-sm, 12px);
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 4px;
}
.batch-var-empty-desc {
  font-size: var(--text-xs, 11px);
  color: var(--t3);
  line-height: 1.5;
  max-width: 340px;
  margin: 0 auto;
}
.batch-var-empty code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 10px;
  padding: 1px 5px;
  background: var(--surface-2);
  border-radius: 3px;
  color: var(--accent);
}

/* Phase R (L17) — Project Manager row keyboard focus. Keyboard users
   tab-navigating through Edit/Activate need to know which row they're
   operating on; the :focus-within ring makes the parent row glow. */
.proj-item:focus-within {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: var(--surface-2);
  outline: 1px solid rgba(var(--accent-rgb), 0.25);
  outline-offset: -1px;
}
.proj-item button:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.6);
  outline-offset: 1px;
}

/* Phase R (M7) — Library active-filter breadcrumbs. Always visible while
   any filter is set, so scrolling away doesn't lose context. */
.lib-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  margin: 8px 0 12px;
  background: var(--surface);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: var(--radius-md, 8px);
}
.lib-bc-label {
  font-size: var(--text-2xs, 10px);

  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--t3);
  margin-right: 4px;
}
.lib-bc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: var(--text-xs, 11px);
  font-weight: 600;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 999px;
  color: var(--accent);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.lib-bc-chip:hover { background: rgba(var(--accent-rgb), 0.18); }
.lib-bc-x {
  font-size: 13px;
  line-height: 1;
  opacity: 0.7;
}
.lib-bc-clear {
  margin-left: auto;
  padding: 3px 10px;
  font-size: var(--text-xs, 11px);
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--t2);
  cursor: pointer;
}
.lib-bc-clear:hover { color: var(--t1); border-color: var(--t3); }

/* ── W7T2: Semantic search bar ──────────────────────────────────────────
   Placed inline in the lib-bar beside the existing prompt-search widget.
   Accent-purple tinted when active to distinguish from keyword search.    */
.lib-sem-w {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 0 2px 0 8px;
  min-width: 180px;
  transition: border-color .15s ease, background .15s ease;
}
.lib-sem-w:focus-within,
.lib-sem-w.is-active {
  border-color: rgba(var(--accent-rgb),.45);
  background: rgba(var(--accent-rgb),.06);
}
.lib-sem-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--t3);
  cursor: default;
  margin-right: 4px;
}
.lib-sem-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 11px;
  color: var(--t1);
  padding: 5px 0;
  min-width: 0;
}
.lib-sem-input::placeholder { color: var(--t4, var(--t3)); }
.lib-sem-input:focus-visible { outline: none; } /* focus ring on .lib-sem-w */
.lib-sem-w:focus-within { outline: 2px solid rgba(var(--accent-rgb),.55); outline-offset: 1px; }
.lib-sem-clear {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--t3);
  font-size: 16px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  flex-shrink: 0;
  transition: color .1s ease, background .1s ease;
}
.lib-sem-clear:hover { color: var(--t1); background: rgba(255,255,255,.07); }
/* Mode badge — "Semantic" or "Keyword" shown when results are active */
.lib-sem-mode-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;

  color: var(--accent);
  background: rgba(var(--accent-rgb),.1);
  border: 1px solid rgba(var(--accent-rgb),.25);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Per-tile score badge — absolute bottom-right of each gc card */
.lib-sem-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: rgba(var(--accent-rgb),.75);
  border-radius: 6px;
  padding: 1px 5px;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
/* Notice when CLIP model is absent (keyword fallback active) */
.lib-sem-notice {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--t2);
  background: rgba(var(--accent-rgb),.06);
  border: 1px solid rgba(var(--accent-rgb),.18);
  border-radius: 8px;
  padding: 7px 12px;
  margin: 8px 0 4px;
}
/* Empty-state for semantic results */
.lib-sem-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 60px 20px;
  color: var(--t3);
  text-align: center;
}
.lib-sem-empty-t {
  font-size: 13px;
  font-weight: 500;
  color: var(--t2);
}
/* gc card needs position:relative for badge overlay */
.gallery .gc { position: relative; }

/* ═══════════════════════════════════════════════════════════════════════
   GENERATION FEEDBACK (Phase S)
   Live cues across the Generate → Queue → Visible cycle.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. Generate button active/loading state — pulse while the submit
   round-trip is in flight. Prior code added `.loading` but no CSS
   responded, so the button looked frozen. */
.prompt-gen-btn.loading {
  pointer-events: none;
  animation: genBtnPulse 1.1s ease-in-out infinite;
}
.prompt-gen-btn.loading .gen-arrow {
  animation: genBtnRotate 1.6s linear infinite;
}
@keyframes genBtnPulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      0 1px 2px rgba(0, 0, 0, 0.4),
      0 4px 14px rgba(var(--accent-rgb), 0.38);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      0 1px 2px rgba(0, 0, 0, 0.4),
      0 6px 22px rgba(var(--accent-rgb), 0.65);
    transform: scale(1.04);
  }
}
@keyframes genBtnRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* First-run keyboard-hint pill (rotates 4 hints, auto-dismisses).
 * Was 270 chars of inline cssText assembled in commands.js — now a class. */
.kb-hint-pill {
  position: fixed;
  bottom: 16px;
  right: 16px;
  padding: 10px 14px;
  background: rgba(20, 20, 22, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-xs);
  color: var(--t2);
  transition: opacity 0.3s ease;
  cursor: pointer;
  font-family: var(--font);
}
.kb-hint-key {
  padding: 2px 6px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--t1);
}
.kb-hint-x {
  color: var(--t4);
  font-size: var(--text-2xs);
  margin-left: 4px;
}

/* Shared shape for the cost / project / queue pills in the sidebar footer.
 * Replaces ~80 chars of repeated inline style on each button. JS still
 * toggles `style.display` to show/hide, so the empty `display:none` inline
 * default in HTML is intentional. */
.sidebar-pill {
  margin: 4px 8px;
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  color: var(--t2);
  font-size: 11px;
  text-align: left;
  width: calc(100% - 16px);
  font-family: var(--font);
}
.sidebar-pill:hover {
  background: var(--surface-2);
  color: var(--t1);
}
.sidebar-pill-icon {
  color: var(--accent);
  vertical-align: -2px;
  margin-right: 6px;
}

/* 2. Queue pill pulse when a job is added — catches the user's eye so
   they know something happened. Triggered by adding `.just-queued`
   class in JS, auto-removed after animation. */
.sidebar-queue-pill.just-queued {
  animation: queuePillPulse 1.2s ease-out 1;
}
@keyframes queuePillPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0);
    transform: scale(1);
  }
  30% {
    box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.35);
    transform: scale(1.02);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0);
    transform: scale(1);
  }
}

/* 3. Pending hero on empty workspace — shown when no outputs exist yet
   but there's a job in flight. Replaces the empty card. */
.ws-hero-pending {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5, 20px);
}
.ws-pending-card {
  width: 100%;
  max-width: 420px;
  padding: var(--s-5, 20px);
  text-align: center;
  background: var(--surface);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: var(--radius-lg, 14px);
  position: relative;
  overflow: hidden;
}
.ws-pending-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--accent-rgb), 0.08) 50%,
    transparent 100%);
  animation: wsPendingSweep 2.2s ease-in-out infinite;
}
@keyframes wsPendingSweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.ws-pending-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: var(--s-3, 12px);
  animation: wsPendingSpin 2.2s linear infinite;
  position: relative;
}
@keyframes wsPendingSpin {
  to { transform: rotate(360deg); }
}
.ws-pending-title {
  font-size: var(--text-md, 14px);
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 4px;
  position: relative;
}
.ws-pending-desc {
  font-size: var(--text-sm, 12px);
  color: var(--t3);
  position: relative;
}

/* 4. Filmstrip item "just landed" glow — subtle accent pulse on the most
   recent item so the eye tracks where the new output arrived. */
.ws-film-item.just-landed {
  animation: wsFilmLanded 1.4s ease-out 1;
}
@keyframes wsFilmLanded {
  0% {
    border-color: var(--accent);
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55);
  }
  50% {
    border-color: var(--accent);
    box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.25);
  }
  100% {
    border-color: var(--border);
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   LIVE PROGRESS ON PENDING HERO (Phase T)
   Real per-job progress bar + stage label + ETA, patched in place from
   SSE so the bar sweeps smoothly forward instead of resetting each tick.
   ═══════════════════════════════════════════════════════════════════════ */

.ws-pending-progress {
  position: relative;
  margin-top: var(--s-3, 12px);
  text-align: left;
}
.ws-pending-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
  margin-bottom: 8px;
  position: relative;
}
.ws-pending-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(var(--accent-rgb), 0.9) 0%,
    rgba(var(--accent-rgb), 1) 50%,
    rgba(var(--accent-rgb), 0.9) 100%);
  /* Width animated via JS; transition makes each tick slide instead of jump */
  transition: width 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  position: relative;
  overflow: hidden;
}
/* Shimmer overlay on the fill for that "actively moving" feel */
.ws-pending-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 100%);
  animation: wsPendingShimmer 1.6s linear infinite;
}
@keyframes wsPendingShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.ws-pending-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-xs, 11px);
  color: var(--t3);
  flex-wrap: wrap;
  justify-content: flex-start;
}
.ws-pending-stage {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.32);
  border-radius: 999px;
  font-weight: 600;
  font-size: var(--text-2xs, 10px);
  letter-spacing: 0.04em;

}
.ws-pending-msg {
  flex: 1;
  min-width: 0;
  color: var(--t2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-pending-pct {
  color: var(--t1);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs, 11px);
}
.ws-pending-queue {
  margin-top: 6px;
  font-size: var(--text-2xs, 10px);
  color: var(--t3);
  font-weight: 500;
}

/* Stage-tinted bar: downloading/done hits full saturation, queued is
   subdued. Gives extra at-a-glance signal. */
.ws-pending-card[data-stage="queued"] .ws-pending-fill { opacity: 0.5; }
.ws-pending-card[data-stage="done"] .ws-pending-fill,
.ws-pending-card[data-stage="downloading"] .ws-pending-fill { opacity: 1; }
.ws-pending-card[data-stage="failed"] .ws-pending-fill {
  background: linear-gradient(90deg,
    rgba(239, 68, 68, 0.8) 0%,
    rgba(239, 68, 68, 1) 50%,
    rgba(239, 68, 68, 0.8) 100%);
}
.ws-pending-card[data-stage="failed"] .ws-pending-stage {
  background: rgba(239, 68, 68, 0.12);
  color: #ff7070;
  border-color: rgba(239, 68, 68, 0.35);
}

/* Inline failed-state hero (UI polish 2026-06-24): same card shell, but reads
   as a recoverable error — no progress sweep/spin, red icon, action row. */
.ws-failed-card { border-color: color-mix(in srgb, var(--err) 30%, transparent); }
.ws-failed-card::before { display: none; }
.ws-failed-card .ws-failed-icon {
  background: color-mix(in srgb, var(--err) 16%, transparent);
  color: var(--err);
  animation: none;
}
.ws-failed-actions {
  display: flex;
  gap: var(--s-2, 8px);
  justify-content: center;
  margin-top: var(--s-4, 16px);
}

/* Spinner intensifies during the active generating/downloading phases */
.ws-pending-card[data-stage="generating"] .ws-pending-icon,
.ws-pending-card[data-stage="polling"] .ws-pending-icon {
  animation-duration: 1.4s;
}
.ws-pending-card[data-stage="queued"] .ws-pending-icon {
  animation-duration: 3s;
  opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════════════════
   GALLERY VIRTUALIZATION (Phase U4 + CC1 @supports guard)
   Cheap windowing via `content-visibility: auto`. Browser support:
   Chrome 85+, Firefox 125+, Safari 18+. Older browsers (iOS 17, Firefox
   ESR <125) skip the @supports block and fall back to standard
   rendering. IntersectionObserver-based image lazy-loading (already in
   gallery.js) keeps those browsers responsive up to ~500 items.
   ═══════════════════════════════════════════════════════════════════════ */

@supports (content-visibility: auto) {
  .gallery .gc {
    content-visibility: auto;
    /* 320×240 covers most image ratios; layout overrides once visible. */
    contain-intrinsic-size: 320px 240px;
  }

  /* Full-width rows + audio rows: content-visibility off (skipping their
     layout saves nothing since they're always in flow). */
  .gallery .audio-row,
  .gallery .gc-wide {
    content-visibility: visible;
    contain-intrinsic-size: auto;
  }

  /* Skeleton / preview cards stay fully rendered — they're animated. */
  .gallery .skeleton-card,
  .gallery .preview-card {
    content-visibility: visible;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL ERROR RECOVERY (Phase U5)
   Persistent offline / SSE-failed banner with reconnect button.
   ═══════════════════════════════════════════════════════════════════════ */

.dg-offline-banner {
  position: fixed;
  top: env(safe-area-inset-top, 0);
  left: 0;
  right: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(234, 179, 8, 0.14);
  color: var(--t1);
  border-bottom: 1px solid rgba(234, 179, 8, 0.35);
  backdrop-filter: blur(10px);
  font-size: var(--text-sm, 12px);
  font-weight: 600;
  animation: dgOfflineSlide 180ms ease-out;
}
.dg-offline-banner[hidden] { display: none; }
.dg-offline-banner > svg { color: var(--warn, #eab308); flex-shrink: 0; }
.dg-offline-banner[data-reason="offline"] {
  background: rgba(239, 68, 68, 0.14);
  border-bottom-color: rgba(239, 68, 68, 0.35);
}
.dg-offline-banner[data-reason="offline"] > svg { color: #ff7070; }
.dg-offline-msg {
  flex: 1;
  min-width: 0;
}
.dg-offline-retry {
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
  color: var(--t1);
  font-size: var(--text-xs, 11px);
  font-weight: 700;
  cursor: pointer;
}
.dg-offline-retry:hover { border-color: rgba(255, 255, 255, 0.5); }
@keyframes dgOfflineSlide {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SAFE-AREA INSETS (Phase U6)
   Respect iPhone notch + home indicator + Android cutouts. The viewport
   meta tag (templates/index.html) already sets `viewport-fit=cover`; this
   block applies the insets wherever chrome would otherwise be clipped.
   ═══════════════════════════════════════════════════════════════════════ */

@supports (padding: max(0px)) {
  /* Sidebar — left side gets the left-inset; when it becomes a bottom
     bar on mobile, the bottom inset matters. */
  #sidebar {
    padding-left: max(var(--s-2, 8px), env(safe-area-inset-left));
  }
  @media (max-width: 480px) {
    #sidebar {
      padding-left: max(var(--s-2, 8px), env(safe-area-inset-left));
      padding-right: max(var(--s-2, 8px), env(safe-area-inset-right));
      padding-bottom: max(var(--s-2, 8px), env(safe-area-inset-bottom));
    }
  }

  /* Prompt zone — top-sticky; respect notch inset. */
  #prompt-zone {
    padding-top: max(var(--s-3, 12px), env(safe-area-inset-top));
    padding-left: max(var(--s-3, 12px), env(safe-area-inset-left));
    padding-right: max(var(--s-3, 12px), env(safe-area-inset-right));
  }

  /* Content area — respect side insets in landscape. */
  #content {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }

  /* Modals + overlays — center content past the insets. */
  .modal-panel,
  .settings-slideover,
  .ws-tray,
  .vc-tray {
    padding-top: max(var(--s-3, 12px), env(safe-area-inset-top));
    padding-bottom: max(var(--s-3, 12px), env(safe-area-inset-bottom));
  }

  /* Queue strip + offline banner already handled above with env(). */
}

/* ═══════════════════════════════════════════════════════════════════════
   iOS INPUT-ZOOM PREVENTION (Phase U7)
   Safari auto-zooms on focus if an input's font-size < 16px. Bumping to
   16px at mobile breakpoints preserves the design at desktop and stops
   the unwanted zoom on iPhone/iPad. Applies to the inputs users tap
   most; uncommon settings inputs keep their smaller size since Settings
   is rarely re-opened mid-flow.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  #prompt,
  #prompt-batch,
  .voice-search-input,
  .persona-filter-search,
  .lib-search,
  #set-search-input,
  .set-search,
  .cp-panel-input,
  .cp-panel-textarea,
  .std-modal-input,
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="url"],
  input[type="tel"],
  textarea {
    font-size: 16px; /* stops iOS auto-zoom */
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   TOUCH TARGET AUDIT (Phase U8)
   Interactive icon-only buttons get a ≥44px hit area on touch devices
   via padding + min-size. Visual size stays the same; hitbox expands.
   Using `(pointer: coarse)` so mouse users keep the tighter desktop
   layout — only touchscreens opt in.
   ═══════════════════════════════════════════════════════════════════════ */

@media (pointer: coarse) {
  /* Any bare icon button inherits a minimum 44×44 touch target.
     Specific elements with their own sizing (prompt-gen-btn, etc.) are
     already at 36px+ which is acceptable; we lift only the small ones. */
  .lb-action-btn,
  .pt-btn,
  .cp-icon-btn,
  .gc-btn,
  .audio-action-btn,
  .audio-play-btn,
  .voice-preview-btn,
  .dg-icon-btn,
  .persona-card-iconbtn,
  .tmpl-sfx-btn,
  .ws-hero-menu,
  .vc-hero-menu {
    min-width: 44px;
    min-height: 44px;
  }

  /* Filmstrip thumbs — 72px already meets target; nothing to do. */

  /* Sidebar items — explicit to avoid collapse at 48px on density mode. */
  .sidebar-item {
    min-height: 44px;
  }

  /* Close buttons (×) — typically 24-28px. Lift hit area. */
  .modal-close,
  .ws-tray-close,
  .vc-tray-close,
  .pl-step-btn,
  .ip-close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Chips / filter pills — keep visual size but lift hit area. Vertical
     alignment matters because chips often sit in bars. */
  .lib-chip,
  .ctrl-chip,
  .notif-chip,
  .workflow-tab {
    min-height: 44px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   TRASH VIEWER (Phase V)
   Grouped rows with thumbnails + restore/purge actions. Urgency cue when
   <10min remaining before TTL auto-purge.
   ═══════════════════════════════════════════════════════════════════════ */

.trash-summary { margin-bottom: var(--s-3, 12px); }
.trash-summary-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
}
.trash-expiry {
  margin-left: auto;
  font-size: var(--text-xs, 11px);
  color: var(--t3);
}

.trash-empty-card {
  padding: 28px 16px;
  text-align: center;
  color: var(--t3);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md, 8px);
}
.trash-empty-card > svg { color: var(--accent); opacity: 0.5; margin-bottom: 8px; }
.trash-empty-title {
  font-size: var(--text-sm, 12px);
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 4px;
}
.trash-empty-desc {
  font-size: var(--text-xs, 11px);
  color: var(--t3);
  max-width: 360px;
  margin: 0 auto;
  line-height: 1.5;
}

.trash-group { margin-bottom: var(--s-3, 12px); }
.trash-group-label {
  font-size: var(--text-2xs, 10px);
  font-weight: 700;

  letter-spacing: 0.1em;
  color: var(--t3);
  padding: 8px 4px 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.trash-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--t2);
  font-size: var(--text-2xs, 10px);
  letter-spacing: normal;
}

.trash-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--surface);
  margin-bottom: 4px;
  transition: border-color 0.12s ease;
}
.trash-row:hover { border-color: rgba(var(--accent-rgb), 0.35); }

.trash-row-thumb {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t3);
}
.trash-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.trash-row-thumb.is-placeholder { color: var(--t3); }

.trash-row-body {
  flex: 1;
  min-width: 0;
}
.trash-row-name {
  font-size: var(--text-sm, 12px);
  font-weight: 600;
  color: var(--t1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trash-row-meta {
  font-size: var(--text-xs, 11px);
  color: var(--t3);
  margin-top: 2px;
}
.trash-remain {
  color: var(--t2);
  font-weight: 500;
}
.trash-remain--urgent {
  color: var(--warn, #eab308);
  font-weight: 700;
}

.trash-row-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.trash-purge-btn {
  color: var(--err);
}
.trash-purge-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.35);
}

/* ═══════════════════════════════════════════════════════════════════════
   LIBRARY TOOLBAR POLISH (Phase W)
   Icons on filter chips, view-layout segmented control, icon-anchored
   group/sort selects, tighter bulk action bar with semantic grouping.
   ═══════════════════════════════════════════════════════════════════════ */

/* Chip icons — leading, centered vertically, subtle tint that goes to
   accent when the chip is active. */
.lib-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lib-chip > svg {
  color: var(--t3);
  flex-shrink: 0;
  transition: color 0.12s ease;
}
.lib-chip:hover > svg { color: var(--t1); }
.lib-chip.is-active > svg { color: var(--accent); }

.lib-bar-count {
  font-size: var(--text-2xs, 10px);
  color: var(--t4);
  padding: 0 2px;
  font-variant-numeric: tabular-nums;
}

/* View layout segmented control — two icon buttons in a single pill */
.lib-view-seg {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}
.lib-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--t3);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.lib-view-btn:hover { color: var(--t1); }
.lib-view-btn.is-active {
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
}

/* Select wrapper with leading icon — visually aligns sort/group with
   the rest of the icon-forward toolbar. The icon floats over the native
   select via padding-left. */
.lib-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.lib-select-icon {
  position: absolute;
  left: 8px;
  color: var(--t3);
  pointer-events: none;
  z-index: 1;
}
.lib-select {
  width: auto;
  padding: 5px 24px 5px 26px !important;
  font-size: var(--text-xs, 11px);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--t1);
  border-radius: var(--radius-sm, 6px);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23828289' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color 0.12s ease;
}
.lib-select:focus,
.lib-select:hover { border-color: rgba(var(--accent-rgb), 0.55); }

/* Select-all bar: icon-labeled buttons for quick recognition. */
.sel-all-bar button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.sel-all-bar button > svg {
  color: var(--t3);
}

/* ─── Bulk strip refinements ──────────────────────────────────────── */
.bulk-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.bulk-strip-count {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 999px;
  color: var(--t1);
  font-size: var(--text-xs, 11px);
}
.bulk-strip-count b {
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.bulk-strip-count > span {
  color: var(--t2);
  font-size: var(--text-2xs, 10px);
  letter-spacing: 0.02em;
}
.bulk-strip-spacer {
  flex: 1;
  min-width: 8px;
}
.bulk-strip-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.bulk-strip-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 2px;
  flex-shrink: 0;
}

.bulk-btn {
  gap: 6px;
}
.bulk-btn > svg {
  color: var(--t3);
  transition: color 0.12s ease;
}
.bulk-btn:hover:not([disabled]) > svg { color: var(--t1); }
.bulk-btn.del > svg { color: var(--err); }
.bulk-btn.dl > svg { color: var(--accent); }
.bulk-btn-clear {
  color: var(--t3);
  border-style: dashed;
}
.bulk-btn-clear:hover {
  color: var(--t1);
  border-style: solid;
}

/* On narrower viewports the whole strip wraps; keep groups intact */
@media (max-width: 900px) {
  .bulk-strip-spacer { display: none; }
  .bulk-strip-sep { display: none; }
}

/* Per-card action polish (Phase W)
   Destructive action (.gc-btn-del) tints red on hover so Delete reads
   clearly vs. benign actions like View/Reuse/Download. Keeps the rest of
   the hover treatment untouched. */
.gc-btn-del:hover {
  background: rgba(239, 68, 68, 0.16) !important;
  color: #ff7070 !important;
}

/* Fav state — filled star on favorited items so the state is obvious
   at a glance even before hover. */
.gc-fav.faved {
  opacity: 1;
}
.gc-fav.faved svg {
  fill: #f5c542;
  stroke: #f5c542;
}

/* ═══════════════════════════════════════════════════════════════════════
   CONVERSATIONAL REFINEMENT (Phase AA)
   "What would make this better?" chip under the hero. Expands into an
   input + diff + regenerate flow. Closes on Escape or the × button.
   ═══════════════════════════════════════════════════════════════════════ */

.ws-refine {
  margin-top: var(--s-2, 8px);
  padding: 0 4px;
}

.ws-refine-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px dashed var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--t3);
  font-size: var(--text-xs, 11px);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.ws-refine-trigger:hover {
  border-style: solid;
  border-color: rgba(var(--accent-rgb), 0.55);
  color: var(--t1);
  background: rgba(var(--accent-rgb), 0.05);
}
.ws-refine-trigger svg { color: var(--accent); }

.ws-refine-panel {
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: var(--radius-md, 10px);
  background: var(--surface);
  animation: wsRefineIn 140ms ease-out;
}
.ws-refine-panel[hidden] { display: none; }
@keyframes wsRefineIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ws-refine-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ws-refine-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface-2);
  color: var(--t1);
  font-size: var(--text-sm, 13px);
  outline: none;
  transition: border-color 0.15s ease;
}
.ws-refine-input:focus { border-color: rgba(var(--accent-rgb), 0.65); }
.ws-refine-input::placeholder { color: var(--t3); }

.ws-refine-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--radius-sm, 8px);
  background: linear-gradient(180deg, var(--accent-strong, var(--accent)), var(--accent));
  color: #fff;
  font-size: var(--text-xs, 11px);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 2px 8px rgba(var(--accent-rgb), 0.35);
  transition: transform 0.1s ease;
}
.ws-refine-go:hover { transform: translateY(-1px); }
.ws-refine-go:active { transform: translateY(1px); }
.ws-refine-go[disabled] {
  opacity: 0.55;
  cursor: wait;
  transform: none;
}

.ws-refine-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--t3);
  cursor: pointer;
  transition: color 0.12s ease, background 0.12s ease;
}
.ws-refine-close:hover { color: var(--t1); background: var(--surface-2); }

/* Loading + error */
.ws-refine-result { margin-top: 10px; }
.ws-refine-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  color: var(--t2);
  font-size: var(--text-xs, 11px);
}
.ws-refine-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(var(--accent-rgb), 0.3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: wsRefineSpin 0.8s linear infinite;
}
@keyframes wsRefineSpin {
  to { transform: rotate(360deg); }
}
.ws-refine-error {
  padding: 8px 10px;
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: var(--radius-sm, 6px);
  background: rgba(239, 68, 68, 0.08);
  color: #ff8080;
  font-size: var(--text-xs, 11px);
}

/* Diff display */
.ws-refine-diff {
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--radius-sm, 6px);
  margin-bottom: 10px;
}
.ws-refine-diff-label {
  font-size: var(--text-2xs, 10px);

  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--t3);
  margin-bottom: 6px;
}
.ws-refine-diff-body {
  font-size: var(--text-sm, 12px);
  line-height: 1.55;
  color: var(--t2);
}
.ws-diff-eq {}
.ws-diff-add {
  color: var(--ok, #4ade80);
  background: rgba(74, 222, 128, 0.12);
  padding: 1px 3px;
  border-radius: 3px;
  font-weight: 600;
}
.ws-diff-del {
  color: var(--err, #ef4444);
  background: rgba(239, 68, 68, 0.1);
  padding: 1px 3px;
  border-radius: 3px;
  text-decoration: line-through;
  opacity: 0.75;
}

/* Actions under diff */
/* .ws-refine-actions adopts .toolbar (D2.3); base flex/gap now from .toolbar. */
.ws-refine-regen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 0;
  border-radius: var(--radius-sm, 8px);
  background: linear-gradient(180deg, var(--accent-strong, var(--accent)), var(--accent));
  color: #fff;
  font-size: var(--text-xs, 11px);
  font-weight: 700;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 2px 10px rgba(var(--accent-rgb), 0.4);
}
.ws-refine-regen:hover { transform: translateY(-1px); }
.ws-refine-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface);
  color: var(--t1);
  font-size: var(--text-xs, 11px);
  font-weight: 600;
  cursor: pointer;
}
.ws-refine-edit:hover { border-color: var(--t3); }
.ws-refine-discard {
  margin-left: auto;
  padding: 7px 10px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm, 8px);
  background: transparent;
  color: var(--t3);
  font-size: var(--text-xs, 11px);
  cursor: pointer;
}
.ws-refine-discard:hover { color: var(--t1); border-color: var(--t3); }

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE SWEEP (Phase CC3)
   Targeted fixes for the things real users hit on iPhone/Android:
   - Refinement input row stacks on narrow screens (button wraps below
     input instead of squishing the input to 60px)
   - Workspace tray goes bottom-sheet style under 500px width
   - Bulk strip wraps cleanly with row gaps
   - Workflows tray button stays tap-friendly on touch
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 540px) {
  .ws-refine-input-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  .ws-refine-input {
    flex-basis: 100%;
    min-width: 0;
    /* 16px prevents iOS Safari auto-zoom on focus */
    font-size: 16px;
  }
  .ws-refine-go {
    flex: 1;
    justify-content: center;
  }
  .ws-refine-close {
    flex: 0 0 auto;
  }
  .ws-refine-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .ws-refine-regen,
  .ws-refine-edit,
  .ws-refine-discard {
    width: 100%;
    justify-content: center;
  }
  .ws-refine-discard {
    margin-left: 0;
  }

  /* Pending hero: progress bar stays full-width, stage pill wraps below. */
  .ws-pending-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  /* Library bulk strip: single-column semantic groups, full-width buttons. */
  .bulk-strip {
    flex-direction: column;
    align-items: stretch;
  }
  .bulk-strip-group {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

/* Prevent horizontal scroll from any stray wide element. Defensive. */
html, body {
  overflow-x: hidden;
}

/* Input autocomplete boxes + date pickers render outside the document
   on iOS Safari — make sure no overflow:hidden on an ancestor clips
   them. The #app container uses overflow:hidden by design (prevents
   double-scrollbars) so inputs inside deep overlays rely on position:
   fixed anyway. Nothing to change here, just noting the contract. */

/* Phase DD — API key onboarding polish */

/* "Get a key →" hint below each API key input */
.set-field-hint {
  margin-top: 6px;
  font-size: var(--text-xs, 11px);
  color: var(--t3);
  line-height: 1.4;
}
.set-field-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  margin-left: 4px;
}
.set-field-link:hover {
  text-decoration: underline;
}

/* Inline link inside the top API-missing banner */
.api-banner-link {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
}
.api-banner-link:hover {
  opacity: 0.85;
}

/* ─── v11: Passwordless email + OTP login gate ──────────────────────────
 * Dark pill-input aesthetic matching the app's accent (graphite via tokens).
 * The gate is a fixed-position overlay that covers the workspace until
 * the user verifies — once they do, location.reload() re-renders with
 * the `hidden` attribute set server-side and these rules stop applying.
 */
.auth-gate {
  position: fixed;
  inset: 0;
  background: #0a0a0c;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}
.auth-gate[hidden] { display: none; }

.auth-card {
  width: 100%;
  max-width: 420px;
  background: rgba(20, 20, 24, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

.auth-title {
  margin: 0 0 24px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fafafa;
  line-height: 1.3;
}

.auth-subtitle {
  margin: -14px 0 20px;
  color: #a0a0a8;
  font-size: 13px;
  line-height: 1.5;
}

#auth-target-email {
  word-break: break-all;
}

/* Pill inputs */
.auth-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 20px;
  background: #16161b;
  border: 1px solid #2a2a31;
  border-radius: 999px;
  color: #fafafa;
  font-size: 14px;
  font-family: inherit;
  margin-bottom: 12px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.auth-input::placeholder {
  color: #6a6a72;
}
.auth-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.25);
}

.auth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.auth-row .auth-input {
  margin-bottom: 12px;
}

/* 6-digit grid */
.auth-code-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin: 24px 0 16px;
}
.auth-code-grid input {
  width: 100%;
  box-sizing: border-box;
  aspect-ratio: 4 / 5;
  padding: 0;
  background: #16161b;
  border: 1px solid #2a2a31;
  border-radius: 16px;
  color: #fafafa;
  font-size: 32px;
  font-weight: 500;
  text-align: center;
  font-family: inherit;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.auth-code-grid input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.25);
}

.auth-trust {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #a0a0a8;
  font-size: 13px;
  margin: 16px 0 20px;
  cursor: pointer;
  user-select: none;
}
.auth-trust input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.auth-btn-primary {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 24px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 120ms ease, opacity 120ms ease;
}
.auth-btn-primary:hover {
  background: var(--accent-strong);
}
.auth-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.auth-access-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.auth-btn-secondary {
  padding: 11px 14px;
  border: 1px solid #34343d;
  border-radius: 999px;
  background: transparent;
  color: #d4d4da;
  font: 500 13px/1.2 inherit;
  cursor: pointer;
}
.auth-btn-secondary:hover:not(:disabled) {
  border-color: var(--accent);
  color: #fff;
}
.auth-btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.auth-invite-panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #2a2a31;
}
.auth-invite-panel[hidden] { display: none; }
.auth-field-label {
  display: block;
  margin: 0 0 7px 8px;
  color: #a0a0a8;
  font-size: 12px;
}
.auth-access-status {
  margin: 12px 4px 0;
  color: #86efac;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}
.auth-access-status.is-error { color: #f87171; }

.auth-error {
  color: #f87171;
  font-size: 13px;
  margin: 8px 0 12px;
  line-height: 1.4;
}

.auth-resend {
  font-size: 13px;
  color: #a0a0a8;
  margin-top: 12px;
  text-align: center;
}
.auth-resend button {
  background: none;
  border: none;
  color: var(--accent-strong);
  cursor: pointer;
  padding: 0;
  font-size: 13px;
  font-family: inherit;
  text-decoration: none;
}
.auth-resend button:hover:not(:disabled) {
  text-decoration: underline;
}
.auth-resend button:disabled {
  color: #6a6a72;
  cursor: default;
}

@media (max-width: 480px) {
  .auth-card { padding: 24px; border-radius: 20px; }
  .auth-title { font-size: 20px; }
  .auth-code-grid input { font-size: 24px; }
}

@media (prefers-reduced-motion: no-preference) {
  .auth-gate { animation: authGateFadeIn 180ms ease-out; }
  @keyframes authGateFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* ═══ Flow editor — canvas a11y + node differentiation (UI polish 2026-06-24) ═══ */
#flow-canvas:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.nf-mobile-notice { display: none; }
@media (max-width: 768px) {
  .nf-mobile-notice {
    display: block; position: absolute; top: 52px; left: 8px; right: 8px;
    z-index: var(--z-dropdown); margin: 0; text-align: center;
  }
}
.nf-popup-error {
  margin: 8px 0 4px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--err) 35%, transparent);
  background: color-mix(in srgb, var(--err) 10%, transparent);
  color: var(--err); font-size: 11px; line-height: 1.4;
}
.nf-guide-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 6px 0 4px; }
.nf-guide-legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--t2); }
.nf-guide-legend-item .nf-ctx-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }

/* ═══ AI operator chat — layout grid + responsive + new-messages pill (UI polish) ═══ */
.agent-wrap { grid-template-columns: 240px 1fr; }
@supports (height: 100dvh) { .agent-wrap { height: calc(100dvh - 90px); } }
.agent-main { position: relative; }
.agent-newmsg-pill {
  position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%);
  z-index: var(--z-sticky, 200); height: auto; padding: 6px 14px;
  border-radius: var(--radius-full, 999px);
  border: 1px solid var(--border-hover, var(--border));
  background: var(--surface); color: var(--t1); font-size: var(--text-xs, 11px);
  box-shadow: var(--shadow-md); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.agent-newmsg-pill:hover { background: var(--surface-2); border-color: var(--border-hover, var(--t3)); color: var(--t1); }
.agent-newmsg-pill[hidden] { display: none; }
@media (max-width: 768px) {
  .agent-wrap { grid-template-columns: 1fr; }
  .agent-sidebar { display: none !important; }
  .agent-newmsg-pill { bottom: 104px; }
}
@media (max-width: 480px) {
  .agent-composer > div:first-child { flex-direction: column; align-items: stretch !important; }
  .agent-composer #agent-send, .agent-composer #agent-abort { width: 100%; justify-content: center; }
  .agent-newmsg-pill { bottom: 132px; }
}

/* ═══ Settings — API Tokens panel ═══ */

/* Generate form rows */
.tok-gen-form { display: flex; flex-direction: column; gap: var(--s-3); }

/* Scope group label */
.tok-scope-group { display: flex; flex-direction: column; gap: var(--s-2); }
.tok-scope-label {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--text-sm); color: var(--t2); cursor: pointer;
}
.tok-scope-label input[type="checkbox"] { accent-color: var(--accent-strong); }

/* Optional spend-limit row */
.tok-optional-row { opacity: 0.85; }

/* ── Copy-once banner ── */
/* IMPORTANT: this banner contains the raw token — show only once after
   mint. The warning background must be visually prominent so users do
   not miss it. */
.tok-copy-once-box {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
}

.tok-copy-once-warning {
  font-size: var(--text-sm); font-weight: var(--font-semi);
  color: var(--warn); line-height: var(--lh-snug);
  display: flex; align-items: flex-start; gap: var(--s-2);
}

.tok-raw-input {
  width: 100%; box-sizing: border-box;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-hover);
  background: var(--bg-deep);
  color: var(--t1);
  font-size: var(--text-sm); font-family: var(--font-mono);
  letter-spacing: 0.02em;
  outline: none;
}
.tok-raw-input:focus { border-color: var(--border-active); }

/* ── Token list rows ── */
.tokens-empty {
  padding: var(--s-5) 0; text-align: center;
  font-size: var(--text-sm); color: var(--t3);
}

.token-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border);
}
.token-row:last-child { border-bottom: none; }

.token-meta {
  flex: 1; display: flex; align-items: baseline;
  flex-wrap: wrap; gap: 2px var(--s-3);
  min-width: 0;
}

.token-name {
  font-size: var(--text-sm); font-weight: var(--font-semi);
  color: var(--t1); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 14ch;
}

.token-prefix {
  font-size: var(--text-xs); font-family: var(--font-mono);
  color: var(--t3); background: var(--surface-2);
  padding: 1px 5px; border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.token-scopes {
  font-size: var(--text-xs); color: var(--t3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.token-dates {
  display: flex; gap: var(--s-4); flex-shrink: 0;
  font-size: var(--text-xs); color: var(--t3); white-space: nowrap;
}

/* Danger variant of the shared set-key-btn */
.set-key-btn--danger {
  color: color-mix(in srgb, var(--err) 75%, var(--t3));
  border-color: color-mix(in srgb, var(--err) 30%, transparent);
}
.set-key-btn--danger:hover {
  color: var(--err);
  border-color: color-mix(in srgb, var(--err) 55%, transparent);
  background: color-mix(in srgb, var(--err) 8%, transparent);
}

@media (max-width: 600px) {
  .token-row { flex-wrap: wrap; }
  .token-dates { flex-basis: 100%; }
}

/* ═══ Settings — Account panel (E4.1) ═══
   Sign-out, active-session list/revoke, GDPR delete-account. Graphite tokens
   only — no new colours; the danger affordances reuse the shared --err token. */
.acct-empty, .acct-note {
  padding: var(--s-4) 0; font-size: var(--text-sm);
  color: var(--t3); line-height: var(--lh-snug);
}

/* Signed-in-as row */
.acct-signed-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border);
}
.acct-signed-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acct-label {
  font-size: var(--text-xs); color: var(--t4);
   letter-spacing: 0.5px;
}
.acct-email {
  font-size: var(--text-sm); font-weight: var(--font-semi);
  color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Sessions block */
.acct-block { margin-top: var(--s-5); }
.acct-block-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-2);
}
.acct-block-head h4 {
  margin: 0; font-size: var(--text-sm); font-weight: var(--font-semi); color: var(--t1);
}
.acct-check {
  display: flex; align-items: center; gap: var(--s-2);
  color: var(--t1); font-size: var(--text-sm); cursor: pointer;
}
.acct-sessions { display: flex; flex-direction: column; }

.acct-sess-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--border);
}
.acct-sess-row:last-child { border-bottom: none; }
.acct-sess-meta { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.acct-sess-top { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.acct-sess-id {
  font-size: var(--text-xs); font-family: var(--font-mono); color: var(--t2);
  background: var(--surface-2); padding: 1px 5px;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
}
.acct-sess-badge {
  font-size: 10px; font-weight: var(--font-semi);
   letter-spacing: 0.4px;
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent-strong) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-strong) 35%, transparent);
  padding: 1px 6px; border-radius: var(--radius-full, 999px);
}
.acct-sess-trust {
  font-size: 10px;  letter-spacing: 0.4px;
  color: var(--t3); border: 1px solid var(--border);
  padding: 1px 6px; border-radius: var(--radius-full, 999px);
}
.acct-sess-times { font-size: var(--text-xs); color: var(--t3); }

/* Danger zone — delete account */
.acct-danger {
  margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}
.acct-danger-label {
  font-size: var(--text-xs); color: var(--err);
   letter-spacing: 0.5px; margin-bottom: var(--s-2);
}
.acct-danger-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3); border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--err) 30%, transparent);
  background: color-mix(in srgb, var(--err) 7%, transparent);
}
.acct-danger-copy { min-width: 0; }
.acct-danger-title { font-size: var(--text-sm); font-weight: var(--font-semi); color: var(--t1); }
.acct-danger-sub { font-size: var(--text-xs); color: var(--t3); line-height: var(--lh-snug); margin-top: 2px; }
.acct-danger-row .btn-danger { flex-shrink: 0; }

@media (max-width: 600px) {
  .acct-sess-row { flex-wrap: wrap; }
  .acct-danger-row { flex-direction: column; }
  .acct-danger-row .btn-danger { align-self: flex-start; }
}

/* Flow v2 C2.3 — run-history drawer + per-node cost/duration badge.
   Graphite tokens, .open toggle pattern (matches nf-guide/nf-search). */
.nf-runs-panel{position:absolute;top:44px;right:8px;width:280px;max-height:calc(100% - 60px);overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.35);z-index:22;display:none}
.nf-runs-panel.open{display:block}
.nf-runs-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;font-size:12px;font-weight:600;color:var(--t1);border-bottom:1px solid var(--border)}
.nf-runs-close{cursor:pointer;color:var(--t3);font-size:16px;line-height:1}
.nf-runs-close:hover{color:var(--t1)}
.nf-runs-list{padding:6px}
.nf-runs-empty{padding:18px 14px;font-size:11px;color:var(--t4);text-align:center}
.nf-run-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;cursor:pointer}
.nf-run-item:hover{background:rgba(255,255,255,.04)}
.nf-run-item:focus-visible{outline:2px solid var(--accent-strong);outline-offset:-2px}
.nf-run-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--t4)}
.nf-run-dot.ok{background:var(--ok)}
.nf-run-dot.err{background:var(--err)}
.nf-run-dot.run{background:var(--accent-strong)}
.nf-run-meta{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.nf-run-state{font-size:11px;color:var(--t2);text-transform:capitalize}
.nf-run-cost{font-size:10px;color:var(--t4);font-variant-numeric:tabular-nums}
.nf-run-when{font-size:10px;color:var(--t4);white-space:nowrap}

/* ═══ Admin ═══════════════════════════════════════════════════════════
 * Weighted by consequence. Everything here is quiet graphite except the
 * two things that are irreversible: blocking someone, and a one-time code.
 * Those get the only saturated colour on the surface, so a destructive
 * control can never be mistaken for a neutral one at a glance.
 * ══════════════════════════════════════════════════════════════════════ */
.admin-wrap{max-width:860px;margin:0 auto;padding:0 4px}
.admin-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:20px}
.admin-tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--t3);
  padding:10px 14px;font-size:13px;font-weight:500;cursor:pointer;transition:color .12s,border-color .12s}
.admin-tab:hover{color:var(--t2)}
.admin-tab.is-active{color:var(--t1);border-bottom-color:var(--accent-strong)}
.admin-tab:focus-visible{outline:2px solid var(--accent-strong);outline-offset:-2px}

.admin-rows{display:flex;flex-direction:column;gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:8px;overflow:hidden}
.admin-row{display:flex;align-items:center;gap:16px;padding:14px 16px;
  background:var(--surface-1);min-height:56px}
.admin-row-main{flex:1;min-width:0}
.admin-row-title{font-size:13px;color:var(--t1);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-row-sub{font-size:11px;color:var(--t3);margin-top:3px}
.admin-row-note{font-size:11px;color:var(--t2);margin-top:6px;
  padding-left:10px;border-left:2px solid var(--border-strong)}
.admin-row-actions{display:flex;gap:6px;flex-shrink:0}
/* Your own row carries no controls — the server refuses a self-status-change,
 * so a button there would only ever fail. Quiet label, not a disabled button:
 * a disabled control still reads as "something I might enable". */
.admin-row-you{font-size:11px;color:var(--t4);align-self:center;padding:0 6px}

/* A blocked account reads as blocked from the row itself — not via a badge
 * competing with five other badges for the same attention. */
.admin-row.is-blocked{background:var(--surface);opacity:.62}
.admin-row.is-overdue{box-shadow:inset 3px 0 0 var(--err)}
.admin-sla{font-size:12px;color:var(--err);margin:0 0 16px;line-height:1.5}
.admin-row.is-blocked .admin-row-title{text-decoration:line-through;
  text-decoration-color:var(--t4)}

.admin-search{margin-bottom:16px}
.admin-search input{width:100%}
.admin-empty{padding:40px 16px;text-align:center;color:var(--t3);font-size:13px;
  line-height:1.6}

.admin-mint{margin-bottom:20px;padding:18px}
.admin-mint h3{margin:0 0 14px;font-size:13px;font-weight:600;color:var(--t1)}
.admin-mint-fields{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}
.admin-hint{font-size:11px;color:var(--t3);margin:6px 0 0;line-height:1.5}

.admin-confirm-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.62);
  display:flex;align-items:center;justify-content:center;z-index:400;padding:20px}
.admin-confirm{max-width:440px;width:100%;padding:22px}
.admin-confirm h3{margin:0 0 8px;font-size: 14px;font-weight:600;color:var(--t1)}
.admin-confirm-note{font-size:12px;color:var(--t2);line-height:1.6;margin:0 0 16px}
.admin-confirm-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}

/* The one-time code. Deliberately the loudest thing on the surface: it is
 * the only value here that cannot be recovered. */
.admin-code-value{padding:14px 16px;background:var(--bg-deep);
  border:1px solid var(--accent-strong);border-radius:6px;
  font-size:14px;color:var(--t1);word-break:break-all;user-select:all}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

@media (max-width:640px){
  .admin-mint-fields{grid-template-columns:1fr}
  .admin-row{flex-direction:column;align-items:stretch;gap:10px}
  .admin-row-actions{justify-content:flex-end}
}
@media (prefers-reduced-motion:reduce){
  .admin-tab{transition:none}
}

/* ── Terms acceptance gate ─────────────────────────────────────────────
   Reuses .auth-gate / .auth-card / .auth-title / .auth-btn-primary so the
   post-login terms modal is visually the same object as the login gate.
   Only the pieces that do not exist yet are defined here. The card is wider
   than the login card because it has to hold readable prose, not a form. */
#terms-gate .auth-card { max-width: 640px; }

.terms-body {
  max-height: min(46vh, 420px);
  overflow-y: auto;
  margin: 16px 0;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--t2, #b8b8c0);
  font-size: 13px;
  line-height: 1.65;
  /* The body is inserted with textContent, so newlines carry the structure. */
  white-space: pre-wrap;
}
.terms-body:focus-visible { outline: 2px solid var(--accent-strong, #76767f); outline-offset: 2px; }

.terms-age-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 16px;
  color: var(--t1, #e8e8ee);
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
}
.terms-age-row input { margin-top: 2px; flex: 0 0 auto; }

.auth-btn-ghost {
  width: 100%;
  margin-top: 10px;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  color: var(--t3, #8a8a94);
  font-size: 13px;
  cursor: pointer;
}
.auth-btn-ghost:hover { color: var(--t1, #e8e8ee); border-color: rgba(255, 255, 255, 0.16); }