/* ═══════════════════════════════════════════════════════════════════════
   Workspace — product-grade UI
   Modeled after Claude desktop / ChatGPT / Apple polish levels.
   Dark-first, warm neutral blacks, single cool accent, soft borders.
   ═══════════════════════════════════════════════════════════════════════ */

/* Global defensive: `hidden` attribute always hides, beats class overrides. */
[hidden] { display: none !important; }

:root {
  /* Surfaces — warm, deep, calm */
  --bg-0:       #0a0a0c;            /* page */
  --bg-1:       #111113;            /* rail, panels */
  --bg-2:       #17171b;            /* cards, elevated */
  --bg-3:       #1e1e23;            /* inputs, hover */
  --bg-4:       #27272d;            /* active, pressed */

  /* Borders — hair-thin, neutral */
  --line-1:     rgba(255,255,255,0.045);
  --line-2:     rgba(255,255,255,0.08);
  --line-3:     rgba(255,255,255,0.14);

  /* Text — warm off-white */
  --text:       #e9e6e1;
  --text-dim:   #a9a6a0;
  --text-faint: #6b6863;
  --text-on-primary: #0a0a0c;

  /* Accent — tasteful cool, used sparingly */
  --accent:     #87b8d3;
  --accent-2:   #9fc9df;
  --accent-soft: rgba(135,184,211,0.10);
  --accent-ring: rgba(135,184,211,0.28);

  /* Warm tint — for status dot / badges only */
  --warm:       #d9b071;
  --warm-soft:  rgba(217,176,113,0.14);

  --ok:         #7dbb8a;
  --warn:       #d9b071;
  --fail:       #d98a85;

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

  /* Spacing scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* Shadows — refined, not dramatic */
  --sh-sm: 0 1px 2px rgba(0,0,0,0.45);
  --sh-md: 0 6px 18px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.3);
  --sh-lg: 0 18px 48px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.3);

  /* Typography */
  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Motion */
  --ease:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur-med:  220ms;
  --dur-slow: 360ms;

  /* ── Glass design tokens (Apple/iOS glassmorphism) ──────────────── */
  --glass-bg-1: rgba(255, 255, 255, 0.06);
  --glass-bg-2: rgba(255, 255, 255, 0.10);
  --glass-bg-3: rgba(255, 255, 255, 0.14);
  --glass-border: 1px solid rgba(255, 255, 255, 0.15);
  --glass-border-strong: 1px solid rgba(255, 255, 255, 0.22);
  --glass-blur-soft: saturate(140%) blur(20px);
  --glass-blur-hard: saturate(160%) blur(36px);
  --glow-accent: 0 0 0 1px rgba(135,184,211,0.25), 0 12px 48px -8px rgba(135,184,211,0.35);
  --glow-subtle: 0 0 0 1px rgba(255,255,255,0.08), 0 12px 36px -8px rgba(0,0,0,0.55);
  --glow-focus:  0 0 0 3px rgba(135,184,211,0.28);
  --ease-glass:  cubic-bezier(0.22, 1, 0.36, 1);
}

/* ═══════════════════════════════════════════════════════════════════════
   TRUE GLASS — multi-layer composition (light reflection + tint + noise)
   ═══════════════════════════════════════════════════════════════════════ */
.glass,
.glass-panel,
.auth-card,
.auth-gate,
.lq-panel,
.live-queue,
.composer,
.composer-wrap,
.deck-row,
.deck-adv,
.upgrade-card,
.settings-nav,
.settings-section,
.totp-prompt-overlay .totp-card,
.artifact-card,
.artifact-shell,
.result-card {
  position: relative;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.10) 0%,
      rgba(255,255,255,0.03) 35%,
      rgba(255,255,255,0.00) 55%,
      rgba(255,255,255,0.04) 100%),
    rgba(20, 22, 28, 0.55);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  backdrop-filter: saturate(180%) blur(28px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 22px;
  box-shadow:
    0 20px 60px -12px rgba(0,0,0,0.6),
    -20px -20px 80px -40px rgba(135,184,211,0.25),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 1px 0 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.4);
  isolation: isolate;
}
/* Subtle noise texture layer — breaks up flat gradients so glass feels physical */
.glass::after,
.glass-panel::after,
.auth-card::after,
.auth-gate::after,
.lq-panel::after,
.live-queue::after,
.composer::after,
.composer-wrap::after,
.deck-row::after,
.deck-adv::after,
.upgrade-card::after,
.settings-nav::after,
.settings-section::after,
.artifact-card::after,
.artifact-shell::after,
.result-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.035;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}
.glass > *,
.glass-panel > *,
.auth-card > *,
.auth-gate > *,
.lq-panel > *,
.live-queue > *,
.composer > *,
.composer-wrap > *,
.settings-nav > *,
.settings-section > *,
.upgrade-card > *,
.artifact-card > *,
.artifact-shell > *,
.result-card > * {
  position: relative;
  z-index: 1;
}

/* Stronger "hero" variant — composer gets this */
.glass-hero {
  position: relative;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.14) 0%,
      rgba(255,255,255,0.05) 30%,
      rgba(255,255,255,0.00) 50%,
      rgba(255,255,255,0.06) 100%),
    rgba(24, 27, 35, 0.62);
  -webkit-backdrop-filter: saturate(190%) blur(40px);
  backdrop-filter: saturate(190%) blur(40px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 26px;
  box-shadow:
    0 30px 90px -16px rgba(0,0,0,0.7),
    -30px -30px 120px -60px rgba(135,184,211,0.4),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 1px 0 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.45);
  isolation: isolate;
}

/* Micro-chip — task cards inside queue panel */
.glass-chip {
  position: relative;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.02) 50%,
      rgba(255,255,255,0.03) 100%),
    rgba(30, 34, 42, 0.5);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 4px 16px -6px rgba(0,0,0,0.4);
  transition:
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    background 240ms,
    border-color 240ms,
    box-shadow 240ms;
}
.glass-chip:hover {
  transform: translateY(-2px) scale(1.012);
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.12) 0%,
      rgba(255,255,255,0.04) 50%,
      rgba(255,255,255,0.05) 100%),
    rgba(34, 38, 48, 0.58);
  border-color: rgba(255,255,255,0.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 12px 36px -8px rgba(0,0,0,0.55),
    0 0 0 1px rgba(135,184,211,0.15);
}

/* ═══════════════════════════════════════════════════════════════════════
   Room-lit background — two drifting light orbs over a deep canvas
   ═══════════════════════════════════════════════════════════════════════ */
.app-shell::before {
  content: '';
  position: fixed;
  top: -20%; left: -10%;
  width: 60vmax; height: 60vmax;
  background: radial-gradient(circle,
    rgba(135,184,211,0.18) 0%,
    rgba(135,184,211,0.08) 20%,
    transparent 50%);
  filter: blur(60px);
  animation: lightDrift 50s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
  /* Parallax compositing — `translate` composes with `transform: rotate/scale/translate3d()` */
  translate: var(--mx, 0px) var(--my, 0px);
}
.app-shell::after {
  content: '';
  position: fixed;
  bottom: -30%; right: -20%;
  width: 70vmax; height: 70vmax;
  background: radial-gradient(circle,
    rgba(160,120,200,0.14) 0%,
    rgba(160,120,200,0.05) 25%,
    transparent 55%);
  filter: blur(80px);
  animation: lightDrift2 70s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
  /* Secondary orb drifts opposite for depth */
  translate: calc(var(--mx, 0px) * -0.5) calc(var(--my, 0px) * -0.5);
}
@keyframes lightDrift {
  0%   { transform: translate3d(0,0,0) scale(1); opacity: 0.62; }
  50%  { transform: translate3d(10%, 6%, 0) scale(1.1); opacity: 0.75; }
  100% { transform: translate3d(-4%, 3%, 0) scale(0.95); opacity: 0.68; }
}
@keyframes lightDrift2 {
  0%   { transform: translate3d(0,0,0) scale(1); opacity: 0.32; }
  50%  { transform: translate3d(-8%, -4%, 0) scale(1.05); opacity: 0.42; }
  100% { transform: translate3d(5%, -8%, 0) scale(1); opacity: 0.36; }
}
.app-shell { position: relative; }
.app-shell > * { position: relative; z-index: 1; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  position: relative;
  margin: 0;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(135,184,211,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(160,120,200,0.06) 0%, transparent 60%),
    linear-gradient(180deg, #0a0a0e 0%, #07080b 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

button, input, select, textarea {
  font: inherit; color: inherit; letter-spacing: inherit;
}
button { background: transparent; border: 0; padding: 0; cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }

/* Scrollbars — subtle */
* { scrollbar-width: thin; scrollbar-color: var(--line-3) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--line-3); }

/* Keyboard chip */
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; padding: 2px 6px;
  font: 500 10.5px/1 var(--mono);
  color: var(--text-faint);
  background: var(--bg-3); border: 1px solid var(--line-2);
  border-radius: 4px;
}
.kbd-sm { font-size: 10px; padding: 1px 5px; }

/* ────────────────────────────────────────────────────────────────────
   SHELL — 3-column grid (rail · main · context)
   ──────────────────────────────────────────────────────────────────── */
.app-shell {
  display: grid;
  grid-template-columns: 244px 1fr 0px;
  min-height: 100vh;
  background: var(--bg-0);
  transition: grid-template-columns var(--dur-med) var(--ease);
}
.app-shell[data-context-open="true"] {
  grid-template-columns: 244px 1fr 340px;
}
.app-shell[data-rail="collapsed"] {
  grid-template-columns: 64px 1fr 0px;
}
.app-shell[data-rail="collapsed"][data-context-open="true"] {
  grid-template-columns: 64px 1fr 340px;
}
@media (max-width: 900px) {
  .app-shell, .app-shell[data-context-open="true"], .app-shell[data-rail="collapsed"] {
    grid-template-columns: 1fr;
  }
}

/* ────────────────────────────────────────────────────────────────────
   LEFT RAIL
   ──────────────────────────────────────────────────────────────────── */
.rail {
  background: var(--bg-1);
  border-right: 1px solid var(--line-1);
  display: flex; flex-direction: column;
  padding: 10px 10px 14px;
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto; overflow-x: hidden;
}
@media (max-width: 900px) {
  .rail { position: fixed; left: 0; top: 0; z-index: 50;
    transform: translateX(-100%); transition: transform var(--dur-med) var(--ease);
    width: 268px; border-right: 1px solid var(--line-2);
    box-shadow: var(--sh-lg);
  }
  .app-shell[data-rail="mobile-open"] .rail { transform: translateX(0); }
}

.rail-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px 6px 8px;
  height: 40px;
}
.rail-brand {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 6px;
  color: var(--text); font-weight: 600; font-size: 14px;
  letter-spacing: -0.01em;
  border-radius: var(--r-sm);
}
.rail-brand:hover { background: var(--bg-2); }
.rail-mark { color: var(--accent); font-size: 14px; line-height: 1; }
.rail-brand-name { transition: opacity var(--dur-fast); }

.rail-collapse {
  width: 26px; height: 26px; border-radius: var(--r-sm);
  color: var(--text-dim);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.rail-collapse:hover { background: var(--bg-2); color: var(--text); }
.rail-collapse svg { width: 14px; height: 14px; }

.rail-new {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 4px 14px;
  padding: 9px 10px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: 13px; font-weight: 500;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.rail-new:hover { background: var(--bg-4); border-color: var(--line-3); }
.rail-new svg { width: 15px; height: 15px; }
.rail-new .kbd { margin-left: auto; }

.rail-nav {
  display: flex; flex-direction: column; gap: 1px;
  padding: 0 2px;
}
.rail-item {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  color: var(--text-dim);
  font-size: 13px; font-weight: 450;
  transition: background var(--dur-fast), color var(--dur-fast);
  position: relative;
}
.rail-item:hover { background: var(--bg-2); color: var(--text); }
.rail-item.active {
  background: var(--bg-3);
  color: var(--text);
}
.rail-item.active::before {
  content: ''; position: absolute; left: 2px; top: 8px; bottom: 8px;
  width: 2px; background: var(--accent); border-radius: 2px;
}
.rail-item svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .85; }
.rail-item .kbd { margin-left: auto; }

.rail-section { margin-top: 18px; }
.rail-section-head {
  padding: 6px 12px 4px;
  font-size: 11px; font-weight: 500; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.rail-recent { display: flex; flex-direction: column; gap: 1px; padding: 0 2px; }
.rail-recent-item {
  display: block; padding: 6px 10px;
  font-size: 12.5px; color: var(--text-dim);
  border-radius: var(--r-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.rail-recent-item:hover { background: var(--bg-2); color: var(--text); }
.rail-recent-empty { padding: 6px 12px; color: var(--text-faint); font-size: 12px; }

.rail-spacer { flex: 1; }

.rail-foot {
  border-top: 1px solid var(--line-1);
  margin-top: 10px; padding-top: 10px;
}
.rail-account {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 6px 8px;
  border-radius: var(--r-sm);
  transition: background var(--dur-fast);
}
.rail-account:hover { background: var(--bg-2); }
.rail-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #3a3c44, #1e1f25);
  border: 1px solid var(--line-2);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text); font-size: 12px; font-weight: 600;
  flex-shrink: 0;
}
.rail-account-info { flex: 1; min-width: 0; text-align: left; display: flex; flex-direction: column; gap: 2px; }
.rail-account-name { font-size: 12.5px; color: var(--text); font-weight: 500; }
.rail-account-plan {
  font-size: 11px; color: var(--text-dim);
  display: inline-flex; align-items: center; gap: 6px;
}
.plan-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--warm); box-shadow: 0 0 6px var(--warm-soft); }
.rail-account-chev { width: 12px; height: 12px; color: var(--text-faint); opacity: .6; }

/* Collapsed rail */
.app-shell[data-rail="collapsed"] .rail { padding: 10px 6px 14px; }
.app-shell[data-rail="collapsed"] .rail-brand-name,
.app-shell[data-rail="collapsed"] .rail-new span,
.app-shell[data-rail="collapsed"] .rail-new .kbd,
.app-shell[data-rail="collapsed"] .rail-item span,
.app-shell[data-rail="collapsed"] .rail-item .kbd,
.app-shell[data-rail="collapsed"] .rail-section,
.app-shell[data-rail="collapsed"] .rail-account-info,
.app-shell[data-rail="collapsed"] .rail-account-chev {
  display: none;
}
.app-shell[data-rail="collapsed"] .rail-new { padding: 9px; justify-content: center; }
.app-shell[data-rail="collapsed"] .rail-item { justify-content: center; padding: 9px; }
.app-shell[data-rail="collapsed"] .rail-account { justify-content: center; }

/* ────────────────────────────────────────────────────────────────────
   MAIN
   ──────────────────────────────────────────────────────────────────── */
.main { display: flex; flex-direction: column; min-width: 0; outline: none; }
.main-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line-1);
  background: rgba(10,10,12,0.72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 5;
  height: 54px;
}
.main-bar-title {
  font-size: 13px; font-weight: 500; color: var(--text);
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.main-bar-right { display: flex; align-items: center; gap: 8px; }
.rail-toggle-m {
  display: none; width: 32px; height: 32px; border-radius: var(--r-sm);
  color: var(--text-dim); align-items: center; justify-content: center;
}
.rail-toggle-m:hover { background: var(--bg-2); color: var(--text); }
.rail-toggle-m svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .rail-toggle-m { display: inline-flex; } }

.status-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--bg-2); border: 1px solid var(--line-1);
  font-size: 12px; color: var(--text-dim);
}
.status-chip .status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 6px rgba(125,187,138,.4);
}
.status-chip[data-state="working"] .status-dot { background: var(--warm); animation: dot-pulse 1.4s ease infinite; }
.status-chip[data-state="fail"] .status-dot { background: var(--fail); }
@keyframes dot-pulse { 0%,100% { opacity: .6; } 50% { opacity: 1; } }

.ctx-toggle {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  color: var(--text-dim); display: inline-flex; align-items: center; justify-content: center;
}
.ctx-toggle:hover { background: var(--bg-2); color: var(--text); }
.ctx-toggle svg { width: 16px; height: 16px; }

.main-canvas { flex: 1; overflow-y: auto; }

/* ────────────────────────────────────────────────────────────────────
   VIEW — NEW (empty-state composer)
   ──────────────────────────────────────────────────────────────────── */
.view { animation: view-in var(--dur-med) var(--ease); }
@keyframes view-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.new-view {
  min-height: calc(100vh - 54px);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
}
.new-stack {
  width: 100%; max-width: 720px;
  display: flex; flex-direction: column; gap: 28px; align-items: center;
}
.greeting {
  text-align: center; margin: 0;
  font-size: 30px; font-weight: 500; letter-spacing: -0.02em;
  color: var(--text);
}
.greeting em {
  font-style: normal;
  background: linear-gradient(135deg, #e9e6e1 0%, #a9a6a0 80%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.greeting-sub {
  margin: -18px 0 0; text-align: center;
  font-size: 14px; color: var(--text-dim);
}

/* Composer */
.composer {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  padding: 14px 14px 10px;
  transition: border-color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.composer:focus-within {
  border-color: var(--accent-ring);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.composer-input {
  width: 100%; min-height: 64px; max-height: 280px;
  background: transparent; border: 0; outline: 0; resize: none;
  padding: 4px 2px; margin: 0;
  font-size: 15.5px; line-height: 1.55; color: var(--text);
  letter-spacing: -0.005em;
}
.composer-input::placeholder { color: var(--text-faint); }

.composer-foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px;
}
.composer-model {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: transparent; border: 1px solid var(--line-2);
  color: var(--text-dim); font-size: 12px;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.composer-model:hover { background: var(--bg-3); color: var(--text); border-color: var(--line-3); }
.composer-model svg { width: 12px; height: 12px; }
.composer-mode-select { display: inline-flex; align-items: center; gap: 6px; }

.composer-spacer { flex: 1; }

.composer-icon-btn {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  color: var(--text-dim);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.composer-icon-btn:hover { background: var(--bg-3); color: var(--text); }
.composer-icon-btn svg { width: 15px; height: 15px; }

.composer-send {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--text); color: var(--text-on-primary);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--dur-fast), background var(--dur-fast), opacity var(--dur-fast);
}
.composer-send:hover { transform: scale(1.05); }
.composer-send:active { transform: scale(.96); }
.composer-send:disabled { background: var(--bg-4); color: var(--text-faint); cursor: not-allowed; transform: none; }
.composer-send svg { width: 16px; height: 16px; }

/* Action pills below composer */
.action-pills {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.action-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  color: var(--text-dim); font-size: 12.5px;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.action-pill:hover { background: var(--bg-3); color: var(--text); border-color: var(--line-3); }
.action-pill.active {
  background: var(--accent-soft); color: var(--accent-2);
  border-color: var(--accent-ring);
}
.action-pill svg { width: 13px; height: 13px; opacity: .85; }

/* ────────────────────────────────────────────────────────────────────
   VIEW — SESSION (task running / artifact)
   ──────────────────────────────────────────────────────────────────── */
.session-view {
  min-height: calc(100vh - 54px);
  display: flex; flex-direction: column;
  padding: 28px 32px 32px;
  gap: 24px;
}
.session-prompt {
  max-width: 780px; width: 100%; margin: 0 auto;
  padding: 16px 20px;
  background: var(--bg-2); border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
  color: var(--text);
  font-size: 15px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
}

.artifact-shell {
  max-width: 960px; width: 100%; margin: 0 auto;
  background: var(--bg-2); border: 1px solid var(--line-1);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 420px;
}
.artifact-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-1);
}
.artifact-bar-title { font-size: 13px; font-weight: 500; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artifact-type {
  font: 500 10.5px/1 var(--mono);
  padding: 3px 8px; border-radius: var(--r-pill);
  color: var(--text-dim); background: var(--bg-3);
  border: 1px solid var(--line-2);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.artifact-type[data-type="text"]  { color: #b2c9df; }
.artifact-type[data-type="json"]  { color: #d9b071; }
.artifact-type[data-type="image"] { color: #9dcaa7; }
.artifact-type[data-type="audio"] { color: #d6a6c6; }
.artifact-type[data-type="video"] { color: #d9a383; }
.artifact-type[data-type="html"]  { color: #92c2c9; }

.artifact-menu-btn {
  width: 30px; height: 30px; border-radius: var(--r-sm); color: var(--text-dim);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.artifact-menu-btn:hover { background: var(--bg-3); color: var(--text); }
.artifact-menu-btn svg { width: 15px; height: 15px; }
.artifact-menu-wrap { position: relative; }

.artifact-body {
  flex: 1; overflow: auto; padding: 28px 32px;
}

/* Text output — large, readable, warm */
.text-out {
  margin: 0; white-space: pre-wrap; word-break: break-word;
  font: 400 15.5px/1.7 var(--font);
  color: var(--text); max-width: 720px;
}
.text-cursor {
  display: inline-block; width: 2px; height: 1.05em; vertical-align: -2px;
  background: var(--accent); margin-left: 2px;
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* JSON output */
.json-out {
  margin: 0;
  font: 400 13px/1.6 var(--mono);
  color: var(--text);
  background: var(--bg-3); border: 1px solid var(--line-1);
  border-radius: var(--r-md); padding: 16px 18px;
  overflow: auto; max-width: 780px;
}
.json-key  { color: #b2c9df; }
.json-str  { color: #a9c8a7; }
.json-num  { color: #d9b071; }
.json-bool { color: #d6a6c6; }
.json-null { color: var(--text-faint); }

/* Image */
.image-out {
  max-width: 100%; max-height: 640px;
  display: block; margin: 0 auto;
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg), 0 0 0 1px var(--line-1);
  transition: transform var(--dur-med) var(--ease);
  cursor: zoom-in;
}
.image-out:hover { transform: scale(1.03); box-shadow: 0 22px 60px rgba(0,0,0,.5), 0 0 0 1px var(--line-2); }
.image-out:active { transform: scale(1.02); }

/* Audio */
.audio-out {
  max-width: 520px; margin: 0 auto;
  padding: 18px 20px;
  background: var(--bg-3); border: 1px solid var(--line-2);
  border-radius: var(--r-md);
}
.ap-row { display: flex; align-items: center; gap: 14px; }
.ap-play {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--text); color: var(--text-on-primary);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--dur-fast);
  flex-shrink: 0;
}
.ap-play:hover { transform: scale(1.06); }
.ap-play svg { width: 16px; height: 16px; }
.ap-progress { flex: 1; height: 3px; border-radius: 2px; background: var(--line-2); cursor: pointer; position: relative; overflow: hidden; }
.ap-fill { position: absolute; inset: 0; width: 0%; background: var(--accent); transition: width .1s linear; }
.ap-time { font: 400 12px/1 var(--mono); color: var(--text-dim); min-width: 52px; text-align: right; }
.ap-meta { margin-top: 10px; font-size: 11.5px; color: var(--text-faint); }

/* Video */
.video-out {
  width: 100%; max-width: 820px; max-height: 560px;
  background: #000; border-radius: var(--r-md); display: block; margin: 0 auto;
  box-shadow: var(--sh-lg);
}

/* HTML */
.html-out {
  width: 100%; height: 640px;
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: #fff; box-shadow: var(--sh-md);
}

.file-out {
  max-width: 460px; margin: 40px auto; padding: 40px 32px;
  text-align: center; color: var(--text-dim);
  border: 1px dashed var(--line-2); border-radius: var(--r-md);
}

/* Skeleton placeholders (shown while an artifact is being generated) */
.skeleton { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px; animation: view-in var(--dur-med) var(--ease); }
.sk-shimmer {
  position: relative; overflow: hidden;
  background: var(--bg-3); border-radius: var(--r-md);
}
.sk-shimmer::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 45%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.06) 55%, transparent 100%);
  transform: translateX(-100%);
  animation: sk-slide 1.4s ease infinite;
}
@keyframes sk-slide { 100% { transform: translateX(100%); } }
.sk-box  { width: 100%; max-width: 520px; height: 320px; }
.sk-wide { max-width: 780px; height: 420px; }
.sk-bar  { width: 100%; max-width: 520px; height: 60px; border-radius: var(--r-md); }
.sk-label { font-size: 13px; color: var(--text-dim); letter-spacing: -0.01em; }

.warn-banner {
  margin: 0 0 16px; padding: 10px 14px;
  background: var(--warm-soft); border: 1px solid var(--warm);
  color: var(--warm); border-radius: var(--r-sm);
  font-size: 12.5px;
  max-width: 780px;
}

.empty-out {
  min-height: 360px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 6px; color: var(--text-dim);
}
.empty-out h3 { margin: 0; font-size: 18px; font-weight: 500; color: var(--text); }
.empty-out p { margin: 0; font-size: 13.5px; max-width: 360px; }

/* Stage strip (in-session) */
.stage-strip {
  display: flex; align-items: center; gap: 12px;
  max-width: 960px; width: 100%; margin: 0 auto;
  padding: 10px 16px;
  background: var(--bg-2); border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  font-size: 12.5px; color: var(--text-dim);
}
.stage-dots { display: inline-flex; gap: 4px; }
.stage-dots span { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); animation: dot-bounce 1.2s ease infinite; }
.stage-dots span:nth-child(2) { animation-delay: .15s; }
.stage-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes dot-bounce { 0%,80%,100% { transform: scale(.55); opacity: .45; } 40% { transform: scale(1); opacity: 1; } }
.stage-text { flex: 1; min-width: 0; color: var(--text); font-weight: 500; }
.stage-progress { display: flex; gap: 3px; }
.stage-progress span { width: 28px; height: 3px; border-radius: 2px; background: var(--line-2); }
.stage-progress span.done   { background: var(--ok); }
.stage-progress span.active { background: var(--accent); animation: pulse 1.4s ease infinite; }
.stage-progress span.failed { background: var(--fail); }
@keyframes pulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* ────────────────────────────────────────────────────────────────────
   LIST VIEWS (projects, search, deployments, …)
   ──────────────────────────────────────────────────────────────────── */
.list-view {
  padding: 28px 32px;
  max-width: 1040px; width: 100%; margin: 0 auto;
}
.list-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-bottom: 20px;
}
.list-title {
  margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -0.015em;
  color: var(--text);
}
.list-sub { color: var(--text-dim); font-size: 13px; }

.search-box {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  margin-bottom: 18px;
}
.search-box input {
  flex: 1; background: transparent; border: 0; outline: 0;
  font-size: 14px; color: var(--text);
}
.search-box input::placeholder { color: var(--text-faint); }
.search-box svg { width: 15px; height: 15px; color: var(--text-dim); }

.list-empty {
  padding: 48px 20px; text-align: center; color: var(--text-dim);
  background: var(--bg-2); border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
}

/* Cards (projects / deployments / integrations) */
.grid-cards {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.card {
  background: var(--bg-2); border: 1px solid var(--line-1);
  border-radius: var(--r-md); padding: 16px;
  transition: border-color var(--dur-fast), transform var(--dur-fast);
  cursor: pointer;
  display: flex; flex-direction: column; gap: 10px;
}
.card:hover { border-color: var(--line-3); transform: translateY(-1px); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-title { font-size: 14px; font-weight: 500; color: var(--text); }
.card-sub { font-size: 12.5px; color: var(--text-dim); }
.card-meta { display: flex; gap: 12px; font-size: 11.5px; color: var(--text-faint); }

/* Integration cards */
.int-card { display: flex; align-items: flex-start; gap: 14px; }
.int-icon {
  width: 38px; height: 38px; border-radius: var(--r-sm);
  background: var(--bg-3); border: 1px solid var(--line-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px; color: var(--text);
  flex-shrink: 0;
}
.int-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.int-name { font-size: 14px; font-weight: 500; color: var(--text); }
.int-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); }
.int-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); }
.int-status[data-state="connected"] .int-status-dot { background: var(--ok); box-shadow: 0 0 6px rgba(125,187,138,.4); }
.int-status[data-state="connected"] { color: var(--ok); }
.int-status[data-state="error"] .int-status-dot { background: var(--fail); }
.int-desc { font-size: 12px; color: var(--text-faint); line-height: 1.5; }
.int-actions { display: flex; gap: 6px; margin-top: 8px; }

/* Buttons (general) */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: var(--r-sm);
  background: var(--bg-3); border: 1px solid var(--line-2);
  color: var(--text); font-size: 12.5px; font-weight: 500;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.btn:hover { background: var(--bg-4); border-color: var(--line-3); }
.btn-primary {
  background: var(--text); color: var(--text-on-primary); border: 1px solid transparent;
}
.btn-primary:hover { background: #fff; }
.btn-ghost {
  background: transparent; border-color: var(--line-2);
  color: var(--text-dim);
}
.btn-ghost:hover { color: var(--text); background: var(--bg-2); }
.btn-sm { padding: 5px 10px; font-size: 11.5px; }

/* ────────────────────────────────────────────────────────────────────
   RIGHT CONTEXT PANEL
   ──────────────────────────────────────────────────────────────────── */
.context {
  background: var(--bg-1); border-left: 1px solid var(--line-1);
  padding: 14px 16px; overflow-y: auto;
  position: sticky; top: 0; height: 100vh;
  animation: ctx-in var(--dur-med) var(--ease);
}
@keyframes ctx-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }
.context-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.context-title { font-size: 13px; font-weight: 500; color: var(--text); }
.ctx-close { width: 26px; height: 26px; border-radius: var(--r-sm); color: var(--text-dim); display: inline-flex; align-items: center; justify-content: center; }
.ctx-close:hover { background: var(--bg-2); color: var(--text); }
.ctx-close svg { width: 14px; height: 14px; }

.ctx-block {
  padding: 12px 14px;
  background: var(--bg-2); border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  margin-bottom: 10px;
}
.ctx-block-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin-bottom: 6px; }
.ctx-block-value { font-size: 13px; color: var(--text); }
.ctx-empty { padding: 24px 8px; text-align: center; color: var(--text-faint); font-size: 12.5px; }

/* ────────────────────────────────────────────────────────────────────
   OVERLAYS / POPOVERS (dropdowns, menus)
   ──────────────────────────────────────────────────────────────────── */
.overlays { position: static; pointer-events: none; z-index: 100; }
.overlays > * { pointer-events: auto; }

.popover {
  position: absolute;
  min-width: 180px; max-width: 320px;
  padding: 4px; background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: var(--r-md); box-shadow: var(--sh-lg);
  display: flex; flex-direction: column; gap: 1px;
  z-index: 200;
  animation: pop-in var(--dur-fast) var(--ease);
}
.popover[hidden] { display: none !important; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-2px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.pop-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--r-xs);
  background: transparent; border: 0;
  color: var(--text); font-size: 13px; text-align: left;
  transition: background var(--dur-fast);
  cursor: pointer;
}
.pop-item:hover { background: var(--bg-3); }
.pop-item.muted { color: var(--text-dim); }
.pop-item svg { width: 14px; height: 14px; opacity: .8; }
.pop-divider { height: 1px; background: var(--line-1); margin: 4px 2px; }
.pop-section-head {
  padding: 8px 12px 4px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-faint);
}

/* Inputs (generic — for forms, search, settings) */
.input, select.input, textarea.input {
  width: 100%;
  padding: 9px 12px;
  background: var(--bg-3); border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--text); font-size: 13px;
  outline: 0; transition: border-color var(--dur-fast), background var(--dur-fast);
  appearance: none;
}
select.input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%238a8886' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
  padding-right: 28px;
}
.input:focus { border-color: var(--accent-ring); box-shadow: 0 0 0 3px var(--accent-soft); }
.input::placeholder { color: var(--text-faint); }

.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-label { font-size: 12px; color: var(--text-dim); font-weight: 500; }

/* Settings view sections */
.settings-group {
  background: var(--bg-2); border: 1px solid var(--line-1);
  border-radius: var(--r-md); padding: 16px;
  margin-bottom: 14px;
}
.settings-group h3 { margin: 0 0 12px; font-size: 14px; font-weight: 500; color: var(--text); }
.kv { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line-1); }
.kv:last-child { border-bottom: 0; }
.kv-k { font-size: 13px; color: var(--text-dim); }
.kv-v { font-size: 13px; color: var(--text); font-family: var(--mono); }

/* ═══════════════════════════════════════════════════════════════════════
   PREMIUM POLISH
   Chunk smoothing, fade-scale swap, lightbox, HTML fullscreen, button glow,
   animated empty state, smoother stage bar.
   ═══════════════════════════════════════════════════════════════════════ */

/* Text streaming — each flushed bundle fades in softly */
.chunk-in {
  animation: chunk-in var(--dur-fast) var(--ease) both;
  will-change: opacity, transform;
}
@keyframes chunk-in {
  from { opacity: 0; transform: translateY(1px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Artifact body: fade + slight scale on every render swap (skeleton → real) */
.artifact-body {
  animation: art-swap 220ms var(--ease);
}
@keyframes art-swap {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: scale(1); }
}

/* Image lightbox modal */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-med) var(--ease);
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.86);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.lightbox-img {
  position: relative; z-index: 1;
  max-width: 92vw; max-height: 92vh;
  border-radius: 12px;
  box-shadow: 0 32px 80px rgba(0,0,0,.6);
  transform: scale(0.96);
  transition: transform var(--dur-med) var(--ease);
}
.lightbox.open .lightbox-img { transform: scale(1); }
.lightbox-close {
  position: absolute; top: 20px; right: 24px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.08); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.lightbox-close:hover { background: rgba(255,255,255,0.16); transform: scale(1.05); }
.lightbox-close svg { width: 18px; height: 18px; }

/* HTML wrap — fade-in iframe + fullscreen button */
.html-wrap { position: relative; width: 100%; max-width: 980px; margin: 0 auto; }
.html-out {
  opacity: 0;
  transition: opacity 320ms var(--ease);
}
.html-out.loaded { opacity: 1; }
.html-fullscreen {
  position: absolute; top: 10px; right: 10px;
  width: 34px; height: 34px; border-radius: 8px;
  background: rgba(10,10,12,0.7); color: #fff;
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(-4px);
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease), background var(--dur-fast);
}
.html-wrap:hover .html-fullscreen, .html-fullscreen:focus-visible { opacity: 1; transform: translateY(0); }
.html-fullscreen:hover { background: rgba(30,30,35,0.9); }
.html-fullscreen svg { width: 16px; height: 16px; }

/* Primary button glow (send, primary actions) */
.composer-send, .btn-primary {
  box-shadow: 0 0 0 0 transparent;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-med) var(--ease),
              background var(--dur-fast);
}
.composer-send:not(:disabled):hover,
.btn-primary:hover {
  box-shadow: 0 0 24px var(--accent-ring), 0 4px 14px rgba(0,0,0,.35);
  transform: scale(1.04);
}
.composer-send:not(:disabled):active { transform: scale(0.97); }

/* Generic button subtle glow on hover */
.btn:not(.btn-primary):hover {
  box-shadow: 0 0 0 1px var(--line-3), 0 2px 12px rgba(0,0,0,.28);
}

/* Mode-btn hover polish */
.mode-btn { transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-med); }
.mode-btn:hover { box-shadow: 0 0 16px var(--accent-soft); }

/* Stage bar — smoother color fill transition */
.stage-progress span {
  transition: background 320ms var(--ease), box-shadow 320ms var(--ease);
}
.stage-progress span.done   { box-shadow: 0 0 10px rgba(125,187,138,.25); }
.stage-progress span.active { box-shadow: 0 0 10px var(--accent-ring); }

/* Empty state — animated gradient halo + pulsing text */
.new-view {
  position: relative; overflow: hidden;
}
.new-view::before {
  content: ''; position: absolute; top: -20%; left: 50%; transform: translateX(-50%);
  width: 900px; height: 900px; border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--accent-soft), transparent 70%),
    radial-gradient(closest-side, rgba(217,176,113,0.06), transparent 70%);
  filter: blur(60px);
  animation: halo-drift 14s ease-in-out infinite;
  pointer-events: none; z-index: 0;
}
@keyframes halo-drift {
  0%, 100% { transform: translate(-50%, 0)   scale(1); }
  50%      { transform: translate(-48%, 14px) scale(1.06); }
}
.new-stack { position: relative; z-index: 1; }
.greeting {
  animation: greet-pulse 5s ease-in-out infinite;
}
@keyframes greet-pulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.08); }
}

/* Skeleton — add fade-scale in so swap feels continuous */
.skeleton { animation: art-swap 220ms var(--ease); }

/* Lightbox mobile */
@media (max-width: 640px) {
  .lightbox-close { top: 12px; right: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Intelligence layer: suggestions, transforms, followup, auto-mode hint
   ═══════════════════════════════════════════════════════════════════════ */

/* Suggestion chips — below artifact shell */
.suggest-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--line-1);
  background: transparent;
}
.suggest-chip {
  appearance: none; cursor: pointer;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 999px;
  font: 500 12.5px var(--sans);
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-med) var(--ease);
  animation: chip-in 220ms var(--ease) both;
}
.suggest-chip:hover {
  background: var(--bg-3);
  border-color: var(--line-3);
  box-shadow: 0 0 14px var(--accent-soft);
  transform: translateY(-1px);
}
.suggest-chip:active { transform: translateY(0); }
@keyframes chip-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Transform buttons — sit in the artifact bar, right side */
.transform-row {
  display: inline-flex; gap: 6px;
  margin-left: auto;
}
.transform-btn {
  appearance: none; cursor: pointer;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--text-dim);
  padding: 4px 10px;
  border-radius: 6px;
  font: 500 11.5px var(--sans);
  letter-spacing: 0.2px;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.transform-btn:hover {
  background: var(--bg-3);
  border-color: var(--accent);
  color: var(--text);
}

/* Follow-up composer — sits at the bottom of session view */
.composer.followup {
  margin-top: 16px;
  border: 1px solid var(--line-2);
  animation: chip-in 200ms var(--ease);
}
.composer.followup .composer-input {
  font-size: 14px;
  min-height: 44px;
  max-height: 200px;
}

/* Stack toggle */
.stack-toggle.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.stack-toggle[data-state='on'] svg { stroke: var(--accent); }

/* Auto-mode hint pill in composer foot */
.auto-mode-hint {
  display: inline-flex; align-items: center;
  font: 500 11.5px var(--sans);
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  padding: 3px 9px;
  border-radius: 999px;
  margin-left: 8px;
  letter-spacing: 0.2px;
  animation: chip-in 180ms var(--ease);
}
.auto-mode-hint[hidden] { display: none; }

/* Stacked artifacts — subtle separation */
.artifact-stack {
  display: flex; flex-direction: column; gap: 18px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--line-1);
  opacity: 0.94;
}
.artifact-stack .artifact-shell { animation: chip-in 220ms var(--ease); }
.session-prompt-stacked {
  opacity: 0.7;
  font-style: italic;
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Workflow layer: toggle, chain picker pills, plan view, step states
   ═══════════════════════════════════════════════════════════════════════ */

/* Workflow toggle button */
.workflow-toggle.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.workflow-toggle[data-state='on'] svg { stroke: var(--accent); }

/* Chain-picker pills distinguish from single-mode action pills */
.action-pills[data-mode='workflow'] .action-pill { border-style: dashed; }
.chain-pill.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  border-style: solid;
}

/* Workflow plan block */
.workflow-plan {
  margin: 12px 0 14px;
  border: 1px solid var(--line-2);
  background: var(--bg-1);
  border-radius: 12px;
  overflow: hidden;
  animation: chip-in 220ms var(--ease);
}
.wp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-1);
  background: var(--bg-2);
}
.wp-chain-label {
  font: 600 13px var(--sans);
  color: var(--text);
  letter-spacing: 0.2px;
}
.wp-cancel {
  appearance: none; cursor: pointer;
  background: transparent;
  border: 1px solid var(--line-3);
  color: var(--text-dim);
  padding: 4px 10px;
  border-radius: 6px;
  font: 500 11.5px var(--sans);
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.wp-cancel:hover { background: var(--bg-3); color: var(--text); border-color: var(--line-3); }
.wp-tag {
  font: 600 11px var(--sans);
  letter-spacing: 0.4px;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
}
.wp-tag-done      { background: rgba(125,187,138,.14); color: #7dbb8a; }
.wp-tag-failed    { background: rgba(220,90,90,.14);   color: #dc6a6a; }
.wp-tag-cancelled { background: var(--bg-3);            color: var(--text-dim); }

.wp-list {
  display: flex; flex-direction: column;
}
.wp-step {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--line-1);
  transition: background var(--dur-fast);
}
.wp-step:first-child { border-top: none; }
.wp-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--line-3);
  font: 600 13px var(--sans);
  color: var(--text-dim);
  background: var(--bg-2);
}
.wp-name { color: var(--text); font: 500 13.5px var(--sans); }
.wp-type {
  font: 500 11px var(--mono);
  color: var(--text-faint);
  letter-spacing: 0.3px;
}
.wp-pending   .wp-mark { color: var(--text-faint); }
.wp-running   .wp-mark {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  animation: wp-pulse 1.1s ease-in-out infinite;
}
.wp-done      .wp-mark { background: rgba(125,187,138,.14); border-color: #7dbb8a; color: #7dbb8a; }
.wp-failed    .wp-mark { background: rgba(220,90,90,.16);   border-color: #dc6a6a; color: #dc6a6a; }
.wp-cancelled .wp-mark { color: var(--text-faint); }
.wp-cancelled .wp-name { opacity: 0.55; text-decoration: line-through; }
.wp-clickable { cursor: pointer; }
.wp-clickable:hover { background: var(--bg-2); }

@keyframes wp-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-ring); }
  50%      { box-shadow: 0 0 0 6px transparent; }
}

/* Step preview panel */
.wp-preview {
  margin: 0 0 14px;
  border: 1px dashed var(--line-2);
  border-radius: 12px;
  padding: 10px;
  background: var(--bg-1);
}
.wp-preview-close {
  appearance: none; cursor: pointer;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--text-dim);
  padding: 3px 10px;
  border-radius: 6px;
  font: 500 11.5px var(--sans);
  margin-bottom: 10px;
}
.wp-preview-close:hover { background: var(--bg-3); color: var(--text); }

/* ═══════════════════════════════════════════════════════════════════════
   Knowledge: drag-drop, file cards, status
   ═══════════════════════════════════════════════════════════════════════ */
.kb-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  padding: 40px 24px;
  border: 1.5px dashed var(--line-2);
  border-radius: 14px;
  background: var(--bg-1);
  color: var(--text-dim);
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
  margin-bottom: 12px;
}
.kb-drop:hover,
.kb-drop.kb-drop-over {
  border-color: var(--accent);
  background: var(--bg-2);
  color: var(--text);
}
.kb-drop.kb-drop-over { transform: scale(1.005); }
.kb-drop svg { width: 28px; height: 28px; }
.kb-drop-head { font: 600 14px var(--sans); color: var(--text); }
.kb-drop-sub  { font: 500 12px var(--sans); color: var(--text-faint); }

.kb-status {
  padding: 10px 14px; border-radius: 8px;
  font: 500 13px var(--sans); margin-bottom: 12px;
}
.kb-status.kb-working { background: var(--bg-2); color: var(--text-dim); border: 1px solid var(--line-2); }
.kb-status.kb-ok      { background: rgba(125,187,138,.12); color: #7dbb8a; border: 1px solid rgba(125,187,138,.35); }
.kb-status.kb-err     { background: rgba(220,106,106,.10); color: #dc6a6a; border: 1px solid rgba(220,106,106,.35); }

.kb-list { display: flex; flex-direction: column; gap: 10px; }
.kb-card {
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px;
  padding: 12px 14px;
}
.kb-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-2); border: 1px solid var(--line-2);
  font-size: 20px;
}
.kb-body { min-width: 0; }
.kb-name { font: 600 14px var(--sans); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-meta { font: 500 11.5px var(--sans); color: var(--text-faint); margin-top: 2px; letter-spacing: .2px; }
.kb-preview {
  font: 500 12.5px var(--sans); color: var(--text-dim); margin-top: 6px;
  line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.kb-del { flex: 0 0 auto; }
.kb-del svg { width: 14px; height: 14px; }

/* ═══════════════════════════════════════════════════════════════════════
   Automations grid — real chain cards
   ═══════════════════════════════════════════════════════════════════════ */
.automations-grid { gap: 12px; }
.automation-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
.auto-head { display: flex; align-items: center; justify-content: space-between; }
.auto-name { font: 600 15px var(--sans); color: var(--text); }
.auto-badge {
  font: 600 11px var(--sans); letter-spacing: .3px;
  background: var(--bg-2); border: 1px solid var(--line-2);
  color: var(--text-dim); padding: 3px 8px; border-radius: 999px;
}
.auto-steps {
  font: 500 12.5px var(--mono); color: var(--text-dim);
  padding: 8px 10px; background: var(--bg-1); border-radius: 8px; border: 1px solid var(--line-1);
}
.auto-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.auto-input {
  background: var(--bg-2); border: 1px solid var(--line-2);
  color: var(--text); padding: 8px 12px; border-radius: 8px;
  font: 500 13.5px var(--sans);
}
.auto-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* ═══════════════════════════════════════════════════════════════════════
   Deployments — host status cards
   ═══════════════════════════════════════════════════════════════════════ */
.deploy-grid { margin-bottom: 8px; }
.deploy-sub  { font: 600 14px var(--sans); color: var(--text-dim); margin: 18px 0 10px; letter-spacing: .3px; text-transform: uppercase; }
.deploy-card { padding: 14px 16px; }
.deploy-card .card-head { align-items: center; }
.deploy-card .card-meta { margin-top: 6px; flex-wrap: wrap; gap: 10px; }
.deploy-card .card-meta a { color: var(--accent); text-decoration: none; font-family: var(--mono); font-size: 12px; }
.deploy-card .card-meta a:hover { text-decoration: underline; }
.deploy-actions { display: flex; gap: 8px; margin-top: 10px; }

/* ═══════════════════════════════════════════════════════════════════════
   Integrations — new state colors
   ═══════════════════════════════════════════════════════════════════════ */
.int-status[data-state='degraded'] .int-status-dot { background: #d9b071; box-shadow: 0 0 6px rgba(217,176,113,.45); }
.int-status[data-state='degraded']                  { color: #d9b071; }
.int-status[data-state='offline']  .int-status-dot { background: var(--text-faint); }
.int-status[data-state='offline']                   { color: var(--text-faint); }
.int-status[data-state='idle']     .int-status-dot { background: var(--text-faint); opacity: .5; animation: pulse-dot 1.5s ease-in-out infinite; }
@keyframes pulse-dot { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }

/* ═══════════════════════════════════════════════════════════════════════
   v1-lock: error card, system status dots, export buttons
   ═══════════════════════════════════════════════════════════════════════ */

/* Error card — unified failure surface */
.error-card {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 10px;
  padding: 28px 24px;
  background: rgba(220, 90, 90, 0.06);
  border: 1px solid rgba(220, 90, 90, 0.26);
  border-radius: 12px;
  animation: chip-in 220ms var(--ease);
}
.error-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(220, 90, 90, 0.16);
  color: #dc6a6a;
}
.error-icon svg { width: 20px; height: 20px; }
.error-title {
  margin: 0;
  font: 600 16px var(--sans);
  color: var(--text);
  letter-spacing: 0.1px;
}
.error-reason {
  margin: 0;
  max-width: 720px;
  font: 500 13px var(--sans);
  color: var(--text-dim);
  word-break: break-word;
}
.error-retry {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px;
}
.error-retry svg { width: 14px; height: 14px; }

/* System status dots — top-right in main-bar */
.sys-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  margin-right: 8px;
}
.sys-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-faint);
  transition: background var(--dur-med), box-shadow var(--dur-med);
}
.sys-dot[data-state='ok']    { background: #7dbb8a; box-shadow: 0 0 6px rgba(125,187,138,.55); }
.sys-dot[data-state='warn']  { background: #d9b071; box-shadow: 0 0 6px rgba(217,176,113,.45); }
.sys-dot[data-state='err']   { background: #dc6a6a; box-shadow: 0 0 6px rgba(220,106,106,.45); }
.sys-dot[data-state='idle']  { background: var(--text-faint); }

/* Export buttons on artifact bar */
.export-row {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: auto;
  padding-right: 4px;
}
.export-btn {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--text-dim);
  border-radius: 6px;
  text-decoration: none;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.export-btn:hover {
  background: var(--bg-3);
  border-color: var(--accent);
  color: var(--text);
}
.export-btn:active { transform: scale(0.96); }
.export-btn svg { width: 14px; height: 14px; }
.export-btn.copied {
  background: rgba(125,187,138,.14);
  border-color: #7dbb8a;
  color: #7dbb8a;
}

/* When both transform-row and export-row sit in the bar, align cleanly */
.artifact-bar .transform-row { margin-left: 8px; }
.artifact-bar .export-row + .artifact-menu-wrap { margin-left: 2px; }

/* ═════════════════════════════════════════════════════════════════════════
   AUTH — LANDING + LOGIN + BOOT SCREEN
   ═════════════════════════════════════════════════════════════════════════ */
body[data-auth-state="loading"] .app-shell,
body[data-auth-state="loading"] .landing-shell,
body[data-auth-state="loading"] .auth-shell { display: none !important; }
body[data-auth-state="landing"] .app-shell,
body[data-auth-state="landing"] .auth-shell,
body[data-auth-state="landing"] .boot-screen { display: none !important; }
body[data-auth-state="auth"] .app-shell,
body[data-auth-state="auth"] .landing-shell,
body[data-auth-state="auth"] .boot-screen { display: none !important; }
body[data-auth-state="app"] .landing-shell,
body[data-auth-state="app"] .auth-shell,
body[data-auth-state="app"] .boot-screen { display: none !important; }

/* Boot loader */
.boot-screen {
  position: fixed; inset: 0; background: var(--bg-0);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; z-index: 1000;
}
.boot-ring {
  width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.08); border-top-color: var(--text);
  animation: boot-spin 0.9s linear infinite;
}
.boot-label { color: var(--text-dim); font-size: 13px; letter-spacing: .02em; }
@keyframes boot-spin { to { transform: rotate(360deg); } }

/* Landing */
.landing-shell {
  position: fixed; inset: 0; background: #07080b; color: #e9edf2;
  overflow: auto; display: flex; flex-direction: column; z-index: 500;
}
.landing-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.landing-bg-grid {
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 40%, black 30%, transparent 75%);
}
.landing-bg-glow {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: 900px; height: 900px;
  background: radial-gradient(circle, rgba(120,130,255,.22) 0%, rgba(120,130,255,0) 60%);
  filter: blur(20px);
  animation: landing-pulse 9s ease-in-out infinite;
}
@keyframes landing-pulse { 0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(1);} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.08);} }

.landing-top {
  position: relative; z-index: 1;
  padding: 22px 32px; display: flex; align-items: center; justify-content: space-between;
}
.landing-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: .02em; color: #f2f4f8; }
.landing-mark { color: #8892ff; font-size: 18px; }
.landing-login-link {
  background: transparent; border: 0; color: #b0b7c3; font-size: 13px; cursor: pointer;
  padding: 8px 14px; border-radius: 999px; transition: color .2s, background .2s;
}
.landing-login-link:hover { color: #fff; background: rgba(255,255,255,.04); }

.landing-main {
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px 24px 80px; text-align: center;
}
.landing-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px;
  background: rgba(255,255,255,.02); color: #c6cbd5; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 24px;
}
.landing-pill-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #8892ff;
  box-shadow: 0 0 12px #8892ff; animation: pulse-dot 1.8s infinite ease-in-out;
}
@keyframes pulse-dot { 0%,100%{opacity:.6;} 50%{opacity:1;} }

.landing-hero {
  font-size: clamp(44px, 7vw, 84px); line-height: 1.02; font-weight: 600;
  letter-spacing: -.02em; margin: 0 0 18px; color: #f2f4f8;
}
.landing-hero em {
  font-style: normal;
  background: linear-gradient(110deg, #8892ff 0%, #b6b0ff 50%, #66d9d7 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.landing-sub {
  max-width: 620px; color: #a8afbb; font-size: 15.5px; line-height: 1.55; margin: 0 0 36px;
}
.countdown {
  display: grid; grid-template-columns: repeat(4, minmax(88px, 1fr));
  gap: 14px; width: min(520px, 100%); margin: 0 auto 36px;
}
.cd-cell {
  padding: 18px 12px; border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px; background: rgba(255,255,255,.02); backdrop-filter: blur(6px);
}
.cd-num {
  font-variant-numeric: tabular-nums; font-size: clamp(28px, 4vw, 42px);
  font-weight: 600; color: #f2f4f8; line-height: 1;
}
.cd-unit { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #888f9b; margin-top: 8px; }

.wait-form {
  display: flex; flex-wrap: wrap; gap: 10px; width: min(540px, 100%); margin: 0 auto;
}
.wait-name, .wait-email {
  flex: 1 1 200px; min-width: 0;
  padding: 14px 16px; border-radius: 12px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  color: #f2f4f8; font-size: 14px; outline: none;
  transition: border-color .2s, background .2s;
}
.wait-name:focus, .wait-email:focus {
  border-color: rgba(136,146,255,.6); background: rgba(136,146,255,.05);
}
.wait-btn {
  padding: 14px 22px; border-radius: 12px; font-weight: 600; font-size: 14px; cursor: pointer;
  background: linear-gradient(180deg, #e9ebf2 0%, #cfd3df 100%); color: #0a0b0f; border: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 12px 24px rgba(120,130,255,.15);
  transition: transform .12s ease, box-shadow .2s;
  flex: 0 0 auto;
}
.wait-btn:hover  { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 16px 30px rgba(136,146,255,.25); }
.wait-btn:active { transform: scale(0.98); }
.wait-msg { min-height: 20px; margin-top: 16px; font-size: 13px; color: #a8afbb; }
.wait-msg.ok  { color: #7dbb8a; }
.wait-msg.err { color: #f08a8a; }

.landing-foot { display: flex; gap: 10px; align-items: center; margin-top: 42px; font-size: 12px; color: #777d89; }
.scarcity-counter { font-variant-numeric: tabular-nums; color: #c6cbd5; }

/* Auth screen */
.auth-shell {
  position: fixed; inset: 0; background: #07080b; color: #e9edf2;
  display: flex; align-items: center; justify-content: center; padding: 32px; z-index: 500; overflow: auto;
}
.auth-card {
  width: 100%; max-width: 420px;
  padding: 32px; border-radius: 18px;
  background: rgba(20,22,28,.85); border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.02) inset;
  backdrop-filter: blur(10px); position: relative;
}
.auth-back {
  position: absolute; top: 14px; left: 14px;
  background: transparent; border: 0; color: #888f9b; font-size: 12px; cursor: pointer;
  padding: 6px 10px; border-radius: 8px;
}
.auth-back:hover { color: #fff; background: rgba(255,255,255,.04); }
.auth-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; margin-bottom: 22px; justify-content: center; }
.auth-tabs { display: flex; gap: 4px; padding: 4px; background: rgba(255,255,255,.03); border-radius: 12px; margin-bottom: 20px; }
.auth-tab {
  flex: 1; background: transparent; border: 0; color: #a8afbb;
  padding: 8px 12px; border-radius: 8px; font-size: 13px; cursor: pointer; transition: all .15s;
}
.auth-tab.active { background: rgba(255,255,255,.06); color: #f2f4f8; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: #9aa0ad; }
.auth-label input {
  padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08); color: #f2f4f8; font-size: 14px; outline: none;
  transition: border-color .2s, background .2s;
}
.auth-label input:focus { border-color: rgba(136,146,255,.6); background: rgba(136,146,255,.05); }
.auth-submit {
  padding: 12px 18px; border-radius: 10px; font-weight: 600; font-size: 14px; cursor: pointer;
  background: linear-gradient(180deg, #e9ebf2 0%, #cfd3df 100%); color: #0a0b0f; border: 0;
  margin-top: 6px; transition: transform .12s;
}
.auth-submit:hover  { transform: translateY(-1px); }
.auth-submit:active { transform: scale(0.98); }
.auth-msg { min-height: 20px; margin-top: 14px; font-size: 13px; color: #a8afbb; }
.auth-msg.ok  { color: #7dbb8a; }
.auth-msg.err { color: #f08a8a; }
.auth-hint { margin-top: 16px; font-size: 12px; color: #777d89; text-align: center; }

/* Forgot-password link (lives inside the login form, under the submit btn) */
.auth-forgot-link {
  margin: 10px auto 0; padding: 4px 6px;
  background: transparent; border: 0; color: #a8afbb;
  font-size: 12px; cursor: pointer; text-decoration: underline dotted;
  text-underline-offset: 3px; transition: color .12s;
}
.auth-forgot-link:hover { color: #d8dbe3; }

/* 2FA setup modal styles — QR + verify input, shown from Admin panel */
.totp-setup {
  display: flex; flex-direction: column; gap: 14px; align-items: center;
  padding: 20px; border: 1px solid var(--line-1); border-radius: 12px;
  background: var(--bg-2); max-width: 380px; margin: 0 auto;
}
.totp-setup .totp-qr {
  width: 220px; height: 220px; background: #fff; border-radius: 8px; padding: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.totp-setup .totp-qr img { width: 100%; height: 100%; display: block; }
.totp-setup .totp-label { font-size: 12px; color: var(--text-faint); text-align: center; line-height: 1.5; }
.totp-setup .totp-secret {
  font-family: var(--mono); font-size: 11px; color: var(--text-dim);
  word-break: break-all; text-align: center; max-width: 100%;
}
.totp-setup input.totp-code-input {
  width: 180px; padding: 10px 12px; border-radius: 8px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line-1);
  color: var(--text); font-family: var(--mono); font-size: 18px;
  letter-spacing: .3em; text-align: center;
}
.totp-setup .totp-btn {
  padding: 10px 18px; border-radius: 8px; font-weight: 600; font-size: 13px;
  background: linear-gradient(180deg, #e9ebf2, #cfd3df); color: #0a0b0f;
  border: 0; cursor: pointer;
}
.totp-setup .totp-btn:disabled { opacity: .5; cursor: not-allowed; }
.totp-status { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.totp-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #5a5f6c; }
.totp-status-dot.on  { background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,.6); }
.totp-status-dot.off { background: #f08a8a; }

/* TOTP prompt overlay — shown on admin panel load if 2FA enrolled */
.totp-prompt-overlay {
  position: fixed; inset: 0; background: rgba(5,7,12,.85);
  display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.totp-prompt-card {
  background: var(--bg-1, #111218); padding: 32px 28px; border-radius: 14px;
  border: 1px solid var(--line-2); max-width: 360px; width: calc(100% - 40px);
  display: flex; flex-direction: column; gap: 14px; align-items: center;
}
.totp-prompt-card h3 { margin: 0; font-size: 17px; text-align: center; }
.totp-prompt-card p  { margin: 0; color: var(--text-dim); font-size: 13px; text-align: center; line-height: 1.5; }
.totp-prompt-msg { font-size: 12px; min-height: 16px; color: var(--text-faint); }
.totp-prompt-msg.err { color: #f08a8a; }

/* Admin panel */
.admin-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
.admin-section-head { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin: 10px 0 8px; }
.admin-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding: 10px 12px; border: 1px solid var(--line-1); border-radius: 8px;
  background: var(--bg-2); font-size: 13px;
}
.admin-row .mono { font-family: var(--mono); font-size: 12px; }
.admin-actions { display: flex; gap: 6px; }
.admin-code-out {
  padding: 14px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--line-1);
  font-family: var(--mono); font-size: 15px; color: var(--text); text-align: center; letter-spacing: .06em;
  margin-bottom: 8px;
}

@media (max-width: 640px) {
  .landing-hero { font-size: clamp(36px, 9vw, 56px); }
  .countdown    { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .cd-cell      { padding: 14px 6px; }
}

/* Pricing cards */
.pricing-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.pricing-card {
  display: flex; flex-direction: column; padding: 24px 20px;
  border-radius: var(--r-lg); border: 1px solid var(--line-2);
  background: var(--bg-2); min-height: 360px;
}
.pricing-featured {
  border-color: rgba(136,146,255,.5);
  box-shadow: 0 0 0 1px rgba(136,146,255,.2) inset, 0 18px 40px rgba(136,146,255,.14);
}
.pricing-tier { font-size: 11px; letter-spacing: .2em; color: var(--text-dim); font-weight: 600; }
.pricing-price { font-size: 36px; font-weight: 600; margin: 8px 0 4px; letter-spacing: -.02em; }
.pricing-per { font-size: 13px; color: var(--text-dim); font-weight: 400; margin-left: 4px; }
.pricing-tagline { color: var(--text-dim); font-size: 13px; margin-bottom: 18px; }
.pricing-features {
  list-style: none; padding: 0; margin: 0 0 22px; flex: 1;
  display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: var(--text);
}
.pricing-features li { padding-left: 18px; position: relative; }
.pricing-features li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: #7dbb8a; font-weight: 600;
}
.pricing-btn { width: 100%; }
.pricing-current {
  text-align: center; font-size: 12.5px;
  color: var(--text-dim); padding: 10px; border: 1px dashed var(--line-2); border-radius: 8px;
}

/* Usage bar (on pricing banner + account) */
.usage-bar {
  margin-top: 10px; height: 6px; background: rgba(255,255,255,.06);
  border-radius: 999px; overflow: hidden;
}
.usage-bar-fill {
  height: 100%; background: linear-gradient(90deg, #8892ff 0%, #66d9d7 100%);
  border-radius: 999px; transition: width .4s ease;
}

/* ──────────────────────────────────────────────────────────────────────
   Sidebar usage meter — compact "Tasks: 34/100" + slim bar + soft label.
   Lives in the rail between Recent and the account button.
   ────────────────────────────────────────────────────────────────────── */
.rail-usage {
  padding: 10px 14px 12px; margin: 0 8px 6px; border-top: 1px solid var(--line-1);
  display: flex; flex-direction: column; gap: 6px;
  font-size: 11.5px; color: var(--text-dim); letter-spacing: .02em;
}
.rail-usage-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rail-usage-label { text-transform: uppercase; letter-spacing: .15em; font-size: 10px; color: var(--text-faint); }
.rail-usage-count { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); font-size: 12px; }
.rail-usage-bar {
  height: 4px; background: rgba(255,255,255,.06); border-radius: 999px; overflow: hidden;
}
.rail-usage-bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #8892ff 0%, #66d9d7 100%);
  border-radius: 999px; transition: width .4s ease, background .3s ease;
}
.rail-usage[data-state="warn"]   .rail-usage-bar-fill { background: linear-gradient(90deg, #e0c767 0%, #e8a947 100%); }
.rail-usage[data-state="danger"] .rail-usage-bar-fill { background: linear-gradient(90deg, #f58d7b 0%, #f0554a 100%); }
.rail-usage[data-state="warn"]   .rail-usage-count    { color: #f4d77a; }
.rail-usage[data-state="danger"] .rail-usage-count    { color: #f58d7b; }
.rail-usage-reset { font-size: 10px; color: var(--text-faint); margin-top: 2px; }
.rail[data-state="collapsed"] .rail-usage,
.rail.rail-collapsed .rail-usage { display: none; }

/* ──────────────────────────────────────────────────────────────────────
   Upgrade modal (shown on 402 limit_reached). Full-screen dim + card.
   Reuses look of .totp-prompt-overlay for consistency.
   ────────────────────────────────────────────────────────────────────── */
.upgrade-overlay {
  position: fixed; inset: 0; background: rgba(5,7,12,.82);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000; padding: 24px;
  animation: upgFadeIn 140ms ease-out;
}
@keyframes upgFadeIn { from { opacity: 0 } to { opacity: 1 } }
.upgrade-card {
  background: var(--bg-1, #111218); border: 1px solid var(--line-2);
  border-radius: 14px; padding: 30px 28px;
  max-width: 440px; width: 100%;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(136,146,255,.18) inset;
}
.upgrade-eyebrow {
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: #f4d77a; font-weight: 600;
}
.upgrade-title { margin: 0; font-size: 20px; line-height: 1.3; color: var(--text); }
.upgrade-body  { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-dim); }
.upgrade-meter {
  margin: 6px 0 2px; font-size: 12px; color: var(--text-faint);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.upgrade-meter-bar { height: 6px; background: rgba(255,255,255,.06); border-radius: 999px; overflow: hidden; }
.upgrade-meter-fill {
  height: 100%; background: linear-gradient(90deg, #f58d7b 0%, #f0554a 100%);
  border-radius: 999px;
}
.upgrade-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.upgrade-btn-primary {
  border: 0; cursor: pointer; padding: 12px 18px; border-radius: 10px;
  background: linear-gradient(180deg, #e9ebf2, #cfd3df); color: #0a0b0f;
  font-weight: 600; font-size: 14px;
}
.upgrade-btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.upgrade-btn-secondary {
  background: transparent; border: 1px solid var(--line-2);
  color: var(--text-dim); padding: 10px 18px; border-radius: 10px;
  font-size: 13px; cursor: pointer;
}
.upgrade-btn-secondary:hover { color: var(--text); }

/* ──────────────────────────────────────────────────────────────────────
   Landing / auth legal links
   ────────────────────────────────────────────────────────────────────── */
.landing-legal {
  margin-top: 22px; font-size: 12px; color: var(--text-faint);
  display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap;
}
.landing-legal a { color: var(--text-dim); text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,.12); }
.landing-legal a:hover { color: var(--text); border-bottom-color: currentColor; }
.landing-legal-sep { opacity: .5; }
.auth-legal {
  margin-top: 14px; font-size: 11.5px; color: var(--text-faint);
  text-align: center; line-height: 1.5;
}
.auth-legal a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 2px; }
.auth-legal a:hover { color: var(--text); }
.pricing-legal {
  margin: 18px 2px 4px; font-size: 11.5px; color: var(--text-faint); text-align: center;
}
.pricing-legal a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 2px; }

/* ──────────────────────────────────────────────────────────────────────
   Legal pages (terms.html, privacy.html) — long-form readable layout.
   ────────────────────────────────────────────────────────────────────── */
body.legal-body {
  background: var(--bg-0, #0a0b0f); color: var(--text, #e6e7eb);
  min-height: 100vh; margin: 0;
  font-family: var(--font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  -webkit-font-smoothing: antialiased;
}
.legal-page {
  max-width: 780px; margin: 0 auto; padding: 48px 24px 80px;
  display: flex; flex-direction: column; gap: 28px;
}
.legal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 18px; border-bottom: 1px solid var(--line-1, rgba(255,255,255,.06));
}
.legal-brand {
  color: var(--text); text-decoration: none; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px; font-size: 15px;
}
.legal-brand .landing-mark { color: #8892ff; font-size: 18px; }
.legal-nav { display: flex; gap: 18px; font-size: 13px; }
.legal-nav a {
  color: var(--text-dim, #a3a3a3); text-decoration: none;
  border-bottom: 1px dotted transparent; transition: color .15s, border-color .15s;
}
.legal-nav a:hover { color: var(--text); border-bottom-color: currentColor; }

.legal-article {
  line-height: 1.65; font-size: 15px; color: var(--text);
}
.legal-article h1 { font-size: 32px; letter-spacing: -.02em; margin: 12px 0 4px; }
.legal-article h2 {
  font-size: 18px; letter-spacing: -.01em; margin: 32px 0 10px;
  color: var(--text); font-weight: 600;
}
.legal-article p  { margin: 0 0 14px; color: var(--text); }
.legal-article ul { margin: 0 0 14px; padding-left: 22px; }
.legal-article li { margin: 0 0 8px; color: var(--text); }
.legal-article a {
  color: #8892ff; text-decoration: underline; text-underline-offset: 2px;
}
.legal-article a:hover { color: #a8b0ff; }
.legal-article strong { font-weight: 600; color: var(--text); }
.legal-updated {
  font-size: 12.5px; color: var(--text-faint, #6b6d78);
  margin: 0 0 24px; text-transform: uppercase; letter-spacing: .12em;
}

.legal-foot {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding-top: 24px; border-top: 1px solid var(--line-1, rgba(255,255,255,.06));
  font-size: 12px; color: var(--text-faint);
}
.legal-foot a { color: var(--text-dim); text-decoration: none; }
.legal-foot a:hover { color: var(--text); text-decoration: underline; }
.legal-foot-sep { opacity: .5; }

@media (max-width: 600px) {
  .legal-article h1 { font-size: 26px; }
  .legal-article h2 { font-size: 16px; margin-top: 26px; }
  .legal-page { padding: 32px 18px 56px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Auth — social buttons (Google / GitHub), optional-label tag, legal line
   ══════════════════════════════════════════════════════════════════════ */
.auth-label-dim { color: #777d89; font-weight: 400; font-size: 11px; margin-left: 4px; }
.auth-social { margin-top: 18px; }
.auth-social-sep {
  display: flex; align-items: center; gap: 10px; margin: 18px 0 12px;
  color: #777d89; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
}
.auth-social-sep::before,
.auth-social-sep::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.08);
}
.auth-social-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.auth-social-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 500;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  color: #e9edf2; cursor: pointer; transition: background .12s, border-color .12s, transform .12s;
}
.auth-social-btn:hover   { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); }
.auth-social-btn:active  { transform: scale(0.98); }
.auth-social-btn svg     { flex-shrink: 0; }
.auth-legal {
  margin-top: 18px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.05);
  font-size: 11px; color: #777d89; text-align: center; line-height: 1.5;
}
.auth-legal a { color: #a8afbb; text-decoration: none; }
.auth-legal a:hover { color: #e9edf2; text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════
   Settings — left-rail nav + tabbed sections (Account/Security/Prefs/...)
   ══════════════════════════════════════════════════════════════════════ */
.settings-layout {
  display: grid; grid-template-columns: 220px 1fr; gap: 28px;
  margin-top: 16px; align-items: start;
}
.settings-nav {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px; border-radius: 12px; border: 1px solid var(--line-1);
  background: var(--bg-2, rgba(20,22,28,.6)); position: sticky; top: 16px;
}
.settings-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px; font-size: 13px; color: var(--text-dim);
  background: transparent; border: 0; cursor: pointer; text-align: left;
  transition: background .12s, color .12s;
}
.settings-nav-item:hover           { background: rgba(255,255,255,.04); color: var(--text); }
.settings-nav-item[aria-current="true"] {
  background: rgba(255,255,255,.06); color: var(--text);
}
.settings-panel { min-width: 0; }
.settings-panel > .settings-group { margin: 0 0 18px; }
.settings-section-title {
  margin: 0 0 14px; font-size: 13px; font-weight: 500;
  color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em;
}
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-1);
}
.settings-row:last-child { border-bottom: 0; }
.settings-row-lead { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.settings-row-lead .label  { font-size: 13px; color: var(--text); }
.settings-row-lead .sub    { font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.settings-row-ctrl { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.settings-input {
  padding: 8px 12px; border-radius: 8px; background: rgba(255,255,255,.03);
  border: 1px solid var(--line-1); color: var(--text); font-size: 13px; outline: none;
  min-width: 220px;
}
.settings-input:focus { border-color: rgba(136,146,255,.6); background: rgba(136,146,255,.05); }
.settings-select {
  padding: 8px 28px 8px 10px; border-radius: 8px; background: rgba(255,255,255,.03);
  border: 1px solid var(--line-1); color: var(--text); font-size: 13px; outline: none;
  cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%23a8afbb' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
}
.settings-btn {
  padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer;
  background: rgba(255,255,255,.06); color: var(--text); border: 1px solid rgba(255,255,255,.1);
  transition: background .12s, transform .12s;
}
.settings-btn:hover  { background: rgba(255,255,255,.1); }
.settings-btn:active { transform: scale(0.98); }
.settings-btn[disabled] { opacity: .5; cursor: not-allowed; }
.settings-btn.primary {
  background: linear-gradient(180deg, #e9ebf2 0%, #cfd3df 100%); color: #0a0b0f; border: 0;
}
.settings-btn.primary:hover { transform: translateY(-1px); }
.settings-btn.danger {
  background: rgba(240,138,138,.1); color: #f0a8a8; border-color: rgba(240,138,138,.3);
}
.settings-btn.danger:hover { background: rgba(240,138,138,.15); color: #f5baba; }
.settings-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px;
  border-radius: 999px; font-size: 11px; font-weight: 500;
  background: rgba(255,255,255,.05); color: var(--text-dim);
}
.settings-badge.ok   { background: rgba(125,187,138,.12); color: #8ec79a; }
.settings-badge.warn { background: rgba(240,200,120,.12); color: #e6c47a; }
.settings-badge.err  { background: rgba(240,138,138,.12); color: #f0a8a8; }
.settings-toggle {
  position: relative; width: 38px; height: 22px; border-radius: 999px;
  background: rgba(255,255,255,.08); cursor: pointer; transition: background .15s;
  border: 0; padding: 0; flex-shrink: 0;
}
.settings-toggle::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #e9edf2; transition: transform .15s;
}
.settings-toggle[data-on="true"]          { background: #7c86ff; }
.settings-toggle[data-on="true"]::after   { transform: translateX(16px); }
.settings-toggle[disabled] { opacity: .5; cursor: not-allowed; }
.settings-save-note {
  font-size: 11px; color: var(--text-faint); margin-left: 8px;
}
.settings-save-note.saved { color: #8ec79a; }
.settings-save-note.err   { color: #f0a8a8; }
.settings-hint {
  font-size: 12px; color: var(--text-dim); line-height: 1.55;
  padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,.03);
  border: 1px dashed var(--line-1); margin-top: 8px;
}
.settings-provider-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid var(--line-1);
  font-size: 13px;
}
.settings-provider-row:last-child { border-bottom: 0; }
.settings-provider-row .meta { font-size: 12px; color: var(--text-dim); }

/* Inline password-change form */
.settings-form {
  display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 380px;
  padding: 14px; border-radius: 10px; background: rgba(255,255,255,.02);
  border: 1px solid var(--line-1); margin-top: 6px;
}
.settings-form input[type="password"],
.settings-form input[type="text"],
.settings-form textarea {
  width: 100%; padding: 10px 12px; border-radius: 8px; background: rgba(255,255,255,.03);
  border: 1px solid var(--line-1); color: var(--text); font-size: 13px; outline: none;
  font-family: inherit;
}
.settings-form input:focus,
.settings-form textarea:focus { border-color: rgba(136,146,255,.6); background: rgba(136,146,255,.05); }
.settings-form .form-label { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; }
.settings-form .form-msg   { min-height: 18px; font-size: 12px; color: var(--text-dim); }
.settings-form .form-msg.ok  { color: #8ec79a; }
.settings-form .form-msg.err { color: #f0a8a8; }

@media (max-width: 780px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav {
    flex-direction: row; overflow-x: auto; position: static; padding: 6px;
  }
  .settings-nav-item { flex-shrink: 0; }
}

/* ─ Access-required gate ─ */
.auth-gate {
  padding: 20px 4px 6px; text-align: center;
}
.auth-gate-icon {
  font-size: 38px; line-height: 1; margin-bottom: 10px;
  filter: drop-shadow(0 0 8px rgba(100,120,255,0.35));
}
.auth-gate-title {
  margin: 0 0 8px; font-size: 20px; font-weight: 700; letter-spacing: 0.2px;
}
.auth-gate-body {
  margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--text-dim, #9aa3b2);
}
.auth-gate-actions {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 14px;
}
.auth-gate-btn {
  flex: 1 1 140px; min-height: 40px; padding: 10px 16px;
  border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer;
  background: rgba(255,255,255,0.04); color: var(--text, #e7ebf3);
  border: 1px solid rgba(255,255,255,0.12);
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}
.auth-gate-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.22); }
.auth-gate-btn:active { transform: translateY(1px); }
.auth-gate-btn.primary {
  background: linear-gradient(180deg, #4f7dff 0%, #3e63d8 100%);
  color: #fff; border-color: transparent;
}
.auth-gate-btn.primary:hover { filter: brightness(1.08); }
.auth-gate-apply-form {
  display: grid; gap: 10px; margin: 6px 0 10px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: left;
}
.auth-gate-apply-form textarea {
  width: 100%; resize: vertical; min-height: 56px;
  background: rgba(255,255,255,0.04); color: var(--text, #e7ebf3);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 8px 10px;
  font: inherit;
}
.auth-gate-apply-form textarea:focus {
  outline: none; border-color: rgba(120,150,255,0.55);
  box-shadow: 0 0 0 3px rgba(120,150,255,0.15);
}
.auth-gate-msg {
  min-height: 18px; font-size: 13px; margin-top: 6px;
  color: var(--text-dim, #9aa3b2);
}
.auth-gate-msg.ok  { color: #6fdc8c; }
.auth-gate-msg.err { color: #ff7a7a; }
.auth-gate-signout {
  margin-top: 14px; background: transparent; color: var(--text-dim, #9aa3b2);
  border: none; font-size: 12px; text-decoration: underline; cursor: pointer;
}
.auth-gate-signout:hover { color: var(--text, #e7ebf3); }

/* ═══════════════════════════════════════════════════════════════════════
   PHASE A — Control Deck
   ═══════════════════════════════════════════════════════════════════════ */

.deck-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 10px 0;
}
.deck-label {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-dim, #9aa3b2);
  margin-right: 4px;
}
.deck-chip {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text, #e7ebf3);
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all .12s ease;
}
.deck-chip:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16); }
.deck-chip.active {
  background: rgba(120,150,255,0.18);
  border-color: rgba(120,150,255,0.55);
  color: #d8e0ff;
}
.deck-chip-ghost { opacity: 0.7; }
.deck-chip-ghost.active { opacity: 1; }

.deck-adv {
  margin: 12px 0 6px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  overflow: hidden;
}
.deck-adv-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 12px;
  background: transparent; border: none; cursor: pointer;
  color: var(--text, #e7ebf3);
  font-size: 13px; text-align: left;
}
.deck-adv-head:hover { background: rgba(255,255,255,0.03); }
.deck-adv-caret { display: inline-block; width: 14px; color: var(--text-dim, #9aa3b2); }
.deck-adv-summary {
  margin-left: auto; font-size: 11px; color: var(--text-dim, #9aa3b2);
  font-family: ui-monospace, monospace;
}
.deck-adv-body { display: none; padding: 4px 12px 12px; gap: 10px; flex-direction: column; }
.deck-adv.open .deck-adv-body { display: flex; }
.deck-adv-field { display: flex; flex-direction: column; gap: 4px; }
.deck-adv-field label { font-size: 11px; color: var(--text-dim, #9aa3b2); }
.deck-adv-field select,
.deck-adv-field input[type="text"] {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text, #e7ebf3);
  border-radius: 6px; padding: 7px 10px; font-size: 12px;
  font-family: inherit;
}
.deck-adv-field input[type="text"]:focus,
.deck-adv-field select:focus {
  outline: none; border-color: rgba(120,150,255,0.55);
  box-shadow: 0 0 0 3px rgba(120,150,255,0.15);
}
.deck-adv-toggle { flex-direction: row; align-items: center; gap: 8px; }
.deck-adv-toggle label { font-size: 12px; color: var(--text, #e7ebf3); cursor: pointer; }
.deck-adv-toggle input[type="checkbox"] { width: 14px; height: 14px; cursor: pointer; }

/* ── Execution transparency strip ─────────────────────────────── */
.exec-trans {
  display: flex; flex-wrap: wrap; gap: 16px;
  padding: 8px 12px; margin: 6px 0 12px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  font-size: 11px;
}
.exec-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.exec-key   { color: var(--text-dim, #9aa3b2); text-transform: uppercase; letter-spacing: 0.05em; font-size: 10px; }
.exec-val   { color: var(--text, #e7ebf3); font-family: ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
@media (max-width: 720px) {
  .exec-trans { gap: 10px; font-size: 10px; padding: 6px 10px; }
  .exec-val   { max-width: 140px; }
}

/* ── Post-dispatch validator badge (artifact-bar) ─────────── */
.validation-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; margin-left: 6px;
  border-radius: 999px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid transparent;
  cursor: help;
}
.validation-badge.passed   { background: rgba(56,176,120,0.15); color: #6ee7a8; border-color: rgba(56,176,120,0.4); }
.validation-badge.repaired { background: rgba(245,180,80,0.15); color: #f5c97a; border-color: rgba(245,180,80,0.4); }
.validation-badge.issues   { background: rgba(255,90,90,0.15);  color: #ff9a9a; border-color: rgba(255,90,90,0.4); }
.validation-badge.passed::before   { content: '\2713'; }
.validation-badge.repaired::before { content: '\21BB'; }
.validation-badge.issues::before   { content: '\26A0'; }

/* ── Best-mode refine pipeline ────────────────────────────────── */
.refine-pipeline {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; margin: 4px 0 12px;
  border: 1px solid rgba(120,150,255,0.22);
  border-radius: 8px;
  background: rgba(120,150,255,0.05);
  font-size: 12px;
}
.refine-pass { padding: 2px 8px; border-radius: 4px; font-weight: 500; }
.refine-pass-pending { color: var(--text-dim, #9aa3b2); opacity: 0.55; }
.refine-pass-active  { color: #d8e0ff; background: rgba(120,150,255,0.22); }
.refine-pass-done    { color: #6fdc8c; }
.refine-sep { color: var(--text-dim, #9aa3b2); opacity: 0.4; }

/* ── Live Queue panel ─────────────────────────────────────────── */
.live-queue {
  position: fixed;
  right: 20px; top: 80px;
  width: 300px; max-height: calc(100vh - 100px);
  overflow-y: auto;
  background: rgba(18,20,26,0.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px;
  z-index: 40;
  font-size: 12px;
}
@media (max-width: 1200px) {
  .live-queue { position: static; width: auto; margin-top: 18px; }
}
.lq-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.lq-title { font-weight: 600; font-size: 13px; color: var(--text, #e7ebf3); }
.lq-controls { display: flex; flex-wrap: wrap; gap: 4px; }
.lq-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text, #e7ebf3);
  padding: 4px 8px; border-radius: 6px; font-size: 11px;
  cursor: pointer; transition: all .12s ease;
}
.lq-btn:hover { background: rgba(255,255,255,0.08); }
.lq-pause:hover  { border-color: rgba(255, 190, 90, 0.6); }
.lq-resume:hover { border-color: rgba(110, 220, 140, 0.6); }
.lq-retry:hover  { border-color: rgba(120, 150, 255, 0.6); }
.lq-clear:hover  { border-color: rgba(255, 122, 122, 0.6); color: #ff9c9c; }
.lq-section { margin-bottom: 8px; }
.lq-section-head {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim, #9aa3b2);
  margin-bottom: 4px;
}
.lq-list { display: flex; flex-direction: column; gap: 4px; }
.lq-empty { color: var(--text-dim, #9aa3b2); opacity: 0.5; font-size: 11px; padding: 2px 0; }
.lq-item {
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
}
.lq-item-active    { border-color: rgba(120, 150, 255, 0.35); }
.lq-item-failed    { border-color: rgba(255, 122, 122, 0.35); }
.lq-item-completed { opacity: 0.7; }
.lq-item-task {
  color: var(--text, #e7ebf3);
  font-size: 11px; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lq-item-meta {
  color: var(--text-dim, #9aa3b2);
  font-size: 10px; margin-top: 2px;
  font-family: ui-monospace, monospace;
}
.lq-cancel {
  margin-top: 4px; padding: 2px 6px; font-size: 10px;
  background: transparent; color: var(--text-dim, #9aa3b2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px; cursor: not-allowed; opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════════════
   GLASS UI — Queue panel upgrades
   ═══════════════════════════════════════════════════════════════════════ */
.live-queue {
  padding: 14px;
  border: var(--glass-border);
}
.lq-title {
  font: 600 12px/1.1 var(--font);
  color: var(--text);
  letter-spacing: -0.01em;
}
.lq-section-head {
  font: 500 10.5px/1 var(--font);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  padding: 14px 4px 6px;
  margin-bottom: 0;
}
.lq-section:first-of-type .lq-section-head { padding-top: 4px; }
.lq-list { gap: 6px; }
.lq-item, .lq-row {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--glass-bg-1);
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform 180ms var(--ease-glass),
              background 180ms var(--ease-glass),
              box-shadow 180ms var(--ease-glass),
              border-color 180ms var(--ease-glass);
  position: relative;
}
.lq-item:hover, .lq-row:hover {
  transform: translateY(-1px);
  background: var(--glass-bg-2);
  box-shadow: var(--glow-subtle);
}
.lq-item-task {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text);
}
.lq-item-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 6px;
  font-family: var(--font);
  font-size: 11px;
  color: var(--text-faint);
}
.lq-stage {
  font-size: 11px; color: var(--text-dim);
}
.lq-engine {
  font-size: 11px; color: var(--text-faint);
}
.lq-elapsed {
  font-size: 11px; color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

/* Status pill */
.lq-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  background: rgba(255,255,255,0.06);
  color: var(--text-dim);
}
.lq-status[data-status="running"]   { background: rgba(217,176,113,0.14); color: var(--warm); }
.lq-status[data-status="queued"]    { background: rgba(135,184,211,0.14); color: var(--accent); }
.lq-status[data-status="completed"] { background: rgba(125,187,138,0.14); color: var(--ok); }
.lq-status[data-status="failed"]    { background: rgba(217,138,133,0.14); color: var(--fail); }
.lq-status[data-status="running"]::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  animation: pulseDot 1.4s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.75); }
}

/* Preserve active/failed row tinting used by existing code */
.lq-item-active    { border-color: rgba(135,184,211,0.28); }
.lq-item-failed    { border-color: rgba(217,138,133,0.28); }
.lq-item-completed { opacity: 0.75; }

/* ═══════════════════════════════════════════════════════════════════════
   GLASS UI — Composer upgrade (existing class is .composer)
   ═══════════════════════════════════════════════════════════════════════ */
.composer,
.composer-wrap {
  background: var(--glass-bg-2);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
  border: var(--glass-border);
  border-radius: 20px;
  padding: 16px;
  box-shadow: var(--glow-subtle);
  transition: border-color 180ms var(--ease-glass),
              box-shadow 180ms var(--ease-glass),
              background 180ms var(--ease-glass);
}
.composer:focus-within,
.composer-wrap:focus-within {
  outline: none;
  border-color: rgba(135,184,211,0.35);
  box-shadow: var(--glow-focus), var(--glow-subtle);
}
.composer-input {
  background: transparent;
  min-height: 56px;
}
/* Send button — circular glass */
.composer-send {
  width: 38px; height: 38px;
  border-radius: 999px;
  background: var(--glass-bg-3);
  border: var(--glass-border);
  color: var(--text);
  transition: transform 180ms var(--ease-glass),
              background 180ms var(--ease-glass),
              box-shadow 180ms var(--ease-glass),
              border-color 180ms var(--ease-glass);
}
.composer-send:hover:not(:disabled) {
  transform: translateY(-1px) scale(1.03);
  background: var(--accent-soft);
  border-color: rgba(135,184,211,0.4);
  box-shadow: var(--glow-accent);
}
.composer-send:active:not(:disabled) { transform: translateY(0) scale(0.98); }
.composer-send:disabled {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: var(--text-faint);
}

/* ═══════════════════════════════════════════════════════════════════════
   GLASS UI — Button system (unified hover lift + focus glow)
   ═══════════════════════════════════════════════════════════════════════ */
.btn, .auth-submit, .deck-chip, .rail-new, .auth-social-btn {
  transition: transform 180ms var(--ease-glass),
              background 180ms var(--ease-glass),
              border-color 180ms var(--ease-glass),
              box-shadow 180ms var(--ease-glass);
}
.btn:hover,
.auth-submit:hover,
.deck-chip:hover,
.rail-new:hover,
.auth-social-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--glow-subtle);
}
.btn:active,
.auth-submit:active,
.deck-chip:active {
  transform: translateY(0);
}
.deck-chip[data-active="true"],
.deck-chip.active {
  background: var(--accent-soft);
  border-color: rgba(135,184,211,0.4);
  box-shadow: var(--glow-accent);
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════════════
   GLASS UI — Micro-interactions (panel entrance)
   ═══════════════════════════════════════════════════════════════════════ */
@keyframes panelIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lq-panel,
.live-queue,
.composer,
.composer-wrap,
.settings-section,
.upgrade-card,
.artifact-card,
.artifact-shell,
.result-card,
.auth-gate {
  animation: panelIn 240ms var(--ease-glass) both;
}

/* Glass refinement for auth surfaces */
.auth-card { padding: 28px; }
.auth-gate { padding: 22px; }

/* ═══════════════════════════════════════════════════════════════════════
   TRUE GLASS v2 — Queue panel rebuild (wider, roomier, per-status)
   ═══════════════════════════════════════════════════════════════════════ */
.lq-panel,
.live-queue {
  min-width: 320px;
  max-width: 380px;
  width: 340px;
  padding: 18px 14px 14px;
  gap: 10px;
  border-radius: 22px;
}
.lq-panel .lq-section-head,
.live-queue .lq-section-head {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 10px 10px 6px;
  opacity: 0.75;
}
.lq-list { gap: 10px; }

/* Row — apply glass-chip composition and grid layout (targets both .lq-row and .lq-item) */
.lq-row,
.lq-item {
  position: relative;
  padding: 14px 16px;
  margin: 6px 4px;
  min-height: 56px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "status title   elapsed"
    "engine engine  elapsed";
  gap: 6px 12px;
  align-items: center;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.02) 50%,
      rgba(255,255,255,0.03) 100%),
    rgba(30, 34, 42, 0.5);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 4px 16px -6px rgba(0,0,0,0.4);
  transition:
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    background 240ms,
    border-color 240ms,
    box-shadow 240ms;
}
.lq-row:hover,
.lq-item:hover {
  transform: translateY(-2px) scale(1.012);
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.12) 0%,
      rgba(255,255,255,0.04) 50%,
      rgba(255,255,255,0.05) 100%),
    rgba(34, 38, 48, 0.58);
  border-color: rgba(255,255,255,0.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 12px 36px -8px rgba(0,0,0,0.55),
    0 0 0 1px rgba(135,184,211,0.15);
}

/* Row piece grid-area mapping (works with .lq-item-task / .lq-item-meta too) */
.lq-row .lq-status,
.lq-item .lq-status { grid-area: status; }
.lq-row .lq-title,
.lq-item .lq-item-task {
  grid-area: title;
  font-weight: 500;
  font-size: 13.5px;
  color: var(--text);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lq-row .lq-elapsed,
.lq-item .lq-elapsed {
  grid-area: elapsed;
  font-size: 11.5px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.lq-row .lq-engine,
.lq-item .lq-engine {
  grid-area: engine;
  font-size: 11.5px;
  color: var(--text-dim);
  opacity: 0.85;
}
/* The legacy .lq-item-meta is an inline flex of (status, stage, engine, elapsed).
   In the new grid it shouldn't consume a cell — let its children flow, not the wrapper. */
.lq-item .lq-item-meta {
  display: contents;
}
.lq-item .lq-stage {
  grid-area: engine;
  font-size: 11.5px;
  color: var(--text-dim);
  opacity: 0.85;
}

/* Status pill — refined */
.lq-row .lq-status,
.lq-item .lq-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.05);
  color: var(--text-dim);
  white-space: nowrap;
}
.lq-row .lq-status::before,
.lq-item .lq-status::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  animation: none;
}

/* Per-status row tinting — lives on the row (not the pill) */
.lq-row[data-status="running"],
.lq-item[data-status="running"] {
  background:
    linear-gradient(135deg,
      rgba(217,176,113,0.10) 0%,
      rgba(255,255,255,0.03) 50%,
      rgba(217,176,113,0.05) 100%),
    rgba(32, 28, 22, 0.5);
  border-color: rgba(217,176,113,0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 8px 28px -8px rgba(217,176,113,0.22),
    0 0 0 1px rgba(217,176,113,0.12);
  animation: runningShimmer 3s ease-in-out infinite;
}
.lq-row[data-status="running"] .lq-status,
.lq-item[data-status="running"] .lq-status {
  background: rgba(217,176,113,0.15);
  color: var(--warm);
  border-color: rgba(217,176,113,0.3);
}
.lq-row[data-status="running"] .lq-status::before,
.lq-item[data-status="running"] .lq-status::before {
  animation: pulseDot 1.4s ease-in-out infinite;
}
.lq-row[data-status="queued"],
.lq-item[data-status="queued"] {
  opacity: 0.82;
}
.lq-row[data-status="queued"] .lq-status,
.lq-item[data-status="queued"] .lq-status {
  background: rgba(135,184,211,0.12);
  color: var(--accent);
  border-color: rgba(135,184,211,0.25);
}
.lq-row[data-status="completed"],
.lq-row[data-status="done"],
.lq-item[data-status="completed"],
.lq-item[data-status="done"] {
  background:
    linear-gradient(135deg,
      rgba(125,187,138,0.08) 0%,
      rgba(255,255,255,0.02) 50%,
      rgba(125,187,138,0.04) 100%),
    rgba(22, 28, 24, 0.5);
  border-color: rgba(125,187,138,0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 6px 20px -8px rgba(125,187,138,0.2);
}
.lq-row[data-status="completed"] .lq-status,
.lq-row[data-status="done"] .lq-status,
.lq-item[data-status="completed"] .lq-status,
.lq-item[data-status="done"] .lq-status {
  background: rgba(125,187,138,0.14);
  color: var(--ok);
  border-color: rgba(125,187,138,0.28);
}
.lq-row[data-status="failed"],
.lq-row[data-status="error"],
.lq-item[data-status="failed"],
.lq-item[data-status="error"] {
  background:
    linear-gradient(135deg,
      rgba(217,138,133,0.08) 0%,
      rgba(255,255,255,0.02) 50%,
      rgba(217,138,133,0.04) 100%),
    rgba(28, 22, 22, 0.5);
  border-color: rgba(217,138,133,0.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 6px 20px -8px rgba(217,138,133,0.22);
}
.lq-row[data-status="failed"] .lq-status,
.lq-row[data-status="error"] .lq-status,
.lq-item[data-status="failed"] .lq-status,
.lq-item[data-status="error"] .lq-status {
  background: rgba(217,138,133,0.15);
  color: var(--fail);
  border-color: rgba(217,138,133,0.3);
}

@keyframes runningShimmer {
  0%, 100% { box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 8px 28px -8px rgba(217,176,113,0.22),
    0 0 0 1px rgba(217,176,113,0.12); }
  50%      { box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    0 12px 36px -8px rgba(217,176,113,0.35),
    0 0 0 1px rgba(217,176,113,0.25); }
}

/* ═══════════════════════════════════════════════════════════════════════
   TRUE GLASS v2 — Composer as hero (animated rim light on focus)
   ═══════════════════════════════════════════════════════════════════════ */
.composer-wrap,
.composer {
  position: relative;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.14) 0%,
      rgba(255,255,255,0.05) 30%,
      rgba(255,255,255,0.00) 50%,
      rgba(255,255,255,0.06) 100%),
    rgba(24, 27, 35, 0.62);
  -webkit-backdrop-filter: saturate(190%) blur(40px);
  backdrop-filter: saturate(190%) blur(40px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 26px;
  padding: 22px 22px 18px;
  box-shadow:
    0 30px 90px -16px rgba(0,0,0,0.7),
    -30px -30px 120px -60px rgba(135,184,211,0.4),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 1px 0 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.45);
  transition:
    border-color 300ms var(--ease-glass),
    box-shadow 300ms var(--ease-glass);
  isolation: isolate;
}
.composer-wrap:focus-within,
.composer:focus-within {
  border-color: rgba(135,184,211,0.4);
  box-shadow:
    0 30px 90px -16px rgba(0,0,0,0.7),
    -30px -30px 120px -60px rgba(135,184,211,0.55),
    0 0 0 3px rgba(135,184,211,0.2),
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 1px 0 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.45);
}
/* Focus glow — static soft halo, no rotation */
.composer-wrap:focus-within::before,
.composer:focus-within::before {
  content: '';
  position: absolute; inset: -24px;
  border-radius: inherit;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(135,184,211,0.28) 0%,
    rgba(135,184,211,0.12) 30%,
    transparent 60%);
  filter: blur(24px);
  opacity: 0.9;
  z-index: -1;
  pointer-events: none;
  animation: composerGlowBreathe 4s ease-in-out infinite;
}
@keyframes composerGlowBreathe {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1.0; }
}

/* Circular glass send button */
.composer-send,
.composer-wrap button[type="submit"],
.composer button[type="submit"] {
  width: 44px; height: 44px;
  border-radius: 999px;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.14) 0%,
      rgba(255,255,255,0.04) 50%,
      rgba(255,255,255,0.06) 100%),
    rgba(135,184,211,0.18);
  border: 1px solid rgba(135,184,211,0.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 8px 24px -6px rgba(135,184,211,0.3);
  color: var(--text);
  transition:
    transform 180ms var(--ease-glass),
    box-shadow 180ms,
    background 180ms,
    border-color 180ms;
}
.composer-send:hover:not(:disabled),
.composer-wrap button[type="submit"]:hover:not(:disabled),
.composer button[type="submit"]:hover:not(:disabled) {
  transform: translateY(-1px) scale(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.32),
    0 12px 32px -6px rgba(135,184,211,0.5),
    0 0 0 3px rgba(135,184,211,0.18);
}
.composer-send:active:not(:disabled) { transform: translateY(0) scale(0.98); }
.composer-send:disabled {
  background: rgba(40, 44, 52, 0.5);
  border-color: rgba(255,255,255,0.08);
  color: var(--text-faint);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ═══════════════════════════════════════════════════════════════════════
   TRUE GLASS v2 — Button system (true glass + lift + rim on hover)
   ═══════════════════════════════════════════════════════════════════════ */
.btn,
.auth-submit,
.rail-new,
.deck-chip,
.auth-social-btn,
.auth-gate-btn,
.lq-ctrl-btn,
.lq-btn {
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.10) 0%,
      rgba(255,255,255,0.02) 50%,
      rgba(255,255,255,0.04) 100%),
    rgba(30, 34, 42, 0.5);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 4px 12px -4px rgba(0,0,0,0.4);
  transition:
    transform 180ms var(--ease-glass),
    background 180ms,
    border-color 180ms,
    box-shadow 180ms;
}
.btn:hover,
.auth-submit:hover,
.rail-new:hover,
.deck-chip:hover,
.auth-social-btn:hover,
.auth-gate-btn:hover,
.lq-ctrl-btn:hover,
.lq-btn:hover {
  transform: translateY(-1px);
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.14) 0%,
      rgba(255,255,255,0.04) 50%,
      rgba(255,255,255,0.06) 100%),
    rgba(38, 42, 52, 0.58);
  border-color: rgba(255,255,255,0.20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 10px 28px -6px rgba(0,0,0,0.55),
    0 0 0 1px rgba(135,184,211,0.12);
}
.btn:active,
.auth-submit:active,
.rail-new:active,
.deck-chip:active,
.auth-social-btn:active,
.auth-gate-btn:active {
  transform: translateY(0);
  background: rgba(30, 34, 42, 0.7);
}
.deck-chip.active,
.deck-chip[data-active="true"],
.deck-chip[aria-pressed="true"] {
  background:
    linear-gradient(135deg,
      rgba(135,184,211,0.22) 0%,
      rgba(135,184,211,0.08) 50%,
      rgba(135,184,211,0.14) 100%),
    rgba(28, 34, 42, 0.6);
  border-color: rgba(135,184,211,0.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.24),
    0 8px 24px -6px rgba(135,184,211,0.35),
    0 0 0 1px rgba(135,184,211,0.2);
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════════════
   TRUE GLASS v2 — Spacing + typography polish
   ═══════════════════════════════════════════════════════════════════════ */
.settings-section { padding: 24px; }
.rail-item { padding-top: 9px; padding-bottom: 9px; }
.deck-row { gap: 10px; padding: 16px; }
.card-title,
.settings-section h2,
.settings-section h3,
.upgrade-card h2,
.result-card h2 {
  letter-spacing: -0.01em;
}

/* ═══════════════════════════════════════════════════════════════════════
   PRESENCE UPGRADE — Composer as dominant command core
   Always-on ambient glow + always-on slow rim + typing reaction + sending dim
   ═══════════════════════════════════════════════════════════════════════ */
.composer-wrap,
.composer {
  position: relative;
  /* Stronger ambient glow in idle state — stronger than any other element */
  box-shadow:
    0 40px 120px -20px rgba(0,0,0,0.75),
    -40px -20px 140px -50px rgba(135,184,211,0.32),
    20px 40px 100px -40px rgba(160,120,200,0.18),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 1px 0 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.5);
}

/* Internal gradient shift while idle — soft depth (under children) */
.composer-wrap > .nx-composer-glow,
.composer > .nx-composer-glow {
  display: none;
}

/* Slow always-on rim — low opacity idle, brightens on typing + sending */
.composer-wrap .nx-rim,
.composer .nx-rim,
.composer-wrap::after,
.composer::after {
  /* keep noise layer on ::after intact; this selector is safe extension  */
}

/* Presence rim — dedicated pseudo via separate layer using box-shadow animation.
   We DO NOT override ::after (it carries the noise texture). Instead, add a
   CSS-only animated conic-gradient via an independent absolutely-positioned child
   hook: `.composer::before` is free for our use (not used by the base system
   for composer-wrap/composer in the existing glass rules — confirm: the base
   glass rule does NOT define ::before for composer, so this is safe). */

/* Idle ambient halo — static soft bloom, no rotation, barely visible.
   The focus-within + data-typing states (above) take over with a brighter halo. */
.composer-wrap[data-typing="true"]::before,
.composer[data-typing="true"]::before {
  opacity: 1;
}

/* Sending state — composer dims + saturates + rim pulses fastest */
body[data-sending="true"] .composer-wrap,
body[data-sending="true"] .composer {
  opacity: 0.78;
  filter: saturate(0.85);
  transition: opacity 300ms var(--ease-glass), filter 300ms var(--ease-glass);
}
body[data-sending="true"] .composer-wrap::before,
body[data-sending="true"] .composer::before {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════
   PRESENCE UPGRADE — Deck chips as physical system switches
   ═══════════════════════════════════════════════════════════════════════ */
.deck-chip {
  position: relative;
  transform: translateY(0);
  /* Extend existing .deck-chip with switch-style layered shadow */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    0 4px 12px -4px rgba(0,0,0,0.5),
    0 0 0 0 rgba(135,184,211,0);
  transition:
    transform 180ms var(--ease-glass),
    box-shadow 240ms var(--ease-glass),
    background 240ms,
    border-color 240ms;
}
.deck-chip:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    0 12px 28px -6px rgba(0,0,0,0.6),
    0 0 0 1px rgba(135,184,211,0.18);
}
.deck-chip:active {
  transform: translateY(0) scale(0.98);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.45),
    inset 0 -1px 0 rgba(255,255,255,0.06),
    0 2px 6px -2px rgba(0,0,0,0.5);
}
/* Selected switch — glow ring sustained */
.deck-chip.active,
.deck-chip[data-active="true"],
.deck-chip[aria-pressed="true"] {
  transform: translateY(-1px);
  background:
    linear-gradient(135deg,
      rgba(135,184,211,0.28) 0%,
      rgba(135,184,211,0.10) 50%,
      rgba(135,184,211,0.18) 100%),
    rgba(32, 40, 52, 0.65);
  border-color: rgba(135,184,211,0.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    0 10px 26px -6px rgba(135,184,211,0.4),
    0 0 0 1px rgba(135,184,211,0.3),
    0 0 24px -4px rgba(135,184,211,0.3);
  color: var(--text);
}

/* Same treatment for rail-new + primary auth-submit when focused/hovered */
.rail-new:active {
  transform: translateY(0) scale(0.98);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.45),
    inset 0 -1px 0 rgba(255,255,255,0.06),
    0 2px 6px -2px rgba(0,0,0,0.5);
}
.auth-submit:focus-visible,
.auth-submit:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    0 10px 26px -6px rgba(135,184,211,0.4),
    0 0 0 1px rgba(135,184,211,0.3),
    0 0 24px -4px rgba(135,184,211,0.3);
}

/* ═══════════════════════════════════════════════════════════════════════
   PRESENCE UPGRADE — Queue panel as living intelligence
   ═══════════════════════════════════════════════════════════════════════ */
/* Running — scan line sweeping across row */
.lq-row[data-status="running"],
.lq-item[data-status="running"] {
  position: relative;
  overflow: hidden;
}
.lq-row[data-status="running"]::before,
.lq-item[data-status="running"]::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -30%; width: 40%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(217,176,113,0.08) 40%,
    rgba(255,255,255,0.14) 50%,
    rgba(217,176,113,0.08) 60%,
    transparent 100%);
  animation: runningScan 2.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.lq-row[data-status="running"] > *,
.lq-item[data-status="running"] > * { position: relative; z-index: 1; }

@keyframes runningScan {
  0%   { transform: translateX(0);     opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(350%);  opacity: 0; }
}

/* Queued — dimmed but breathing */
.lq-row[data-status="queued"],
.lq-row[data-status="pending"],
.lq-item[data-status="queued"],
.lq-item[data-status="pending"] {
  animation: queuedBreath 4s ease-in-out infinite alternate;
}
@keyframes queuedBreath {
  0%   { opacity: 0.72; }
  100% { opacity: 0.88; }
}

/* Completed — confirmation glow on first appearance */
.lq-row[data-status="completed"],
.lq-row[data-status="done"],
.lq-item[data-status="completed"],
.lq-item[data-status="done"] {
  animation: completedIn 900ms var(--ease-glass) both;
}
@keyframes completedIn {
  0%   {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.12),
      0 0 32px -4px rgba(125,187,138,0.5),
      0 0 0 1px rgba(125,187,138,0.4);
  }
  100% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.12),
      0 6px 20px -8px rgba(125,187,138,0.2);
  }
}

/* Failed — pulse-twice-then-settle alert */
.lq-row[data-status="failed"],
.lq-row[data-status="error"],
.lq-item[data-status="failed"],
.lq-item[data-status="error"] {
  animation: failedAlert 1.4s var(--ease-glass) both;
}
@keyframes failedAlert {
  0%   { box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 24px -4px rgba(217,138,133,0.6); }
  20%  { box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 16px -4px rgba(217,138,133,0.3); }
  40%  { box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 24px -4px rgba(217,138,133,0.6); }
  100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 6px 20px -8px rgba(217,138,133,0.22); }
}

/* Smooth transitions on status swap */
.lq-row,
.lq-item {
  transition:
    opacity 300ms var(--ease-glass),
    transform 240ms var(--ease-glass),
    background 240ms,
    border-color 240ms,
    box-shadow 240ms;
}

/* Running pill dot — pulsing (reinforces existing pulseDot) */
.lq-row[data-status="running"] .lq-status::before,
.lq-item[data-status="running"] .lq-status::before {
  animation: dotPulse 1.4s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.6; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PRESENCE UPGRADE — System feedback on send
   ═══════════════════════════════════════════════════════════════════════ */
body[data-sending="true"]::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%,
    rgba(135,184,211,0.08) 0%,
    transparent 40%);
  animation: sendPulse 900ms ease-out;
  z-index: 9000;
}
@keyframes sendPulse {
  0%   { opacity: 0; transform: scale(0.9); }
  40%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.4); }
}

body[data-sending="true"] .lq-panel,
body[data-sending="true"] .live-queue {
  animation: queueReact 600ms var(--ease-glass);
}
@keyframes queueReact {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.008);
         box-shadow:
           0 30px 90px -12px rgba(0,0,0,0.6),
           -20px -20px 80px -30px rgba(135,184,211,0.35),
           inset 0 1px 0 rgba(255,255,255,0.22); }
  100% { transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════════
   ACCESSIBILITY — Reduced-motion respects user preference
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
  }
  .app-shell::before,
  .app-shell::after {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Research card — free-first external intelligence layer
   Matches the existing glass aesthetic: subtle border, soft surface, warm hierarchy.
   ═══════════════════════════════════════════════════════════════════════ */
.research-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 4px 2px 8px;
}
.research-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 10px;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--muted, #9aa0a8);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.research-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.research-h {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted, #9aa0a8);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.research-summary-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text, #ececec);
  font-weight: 400;
}
.research-para {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text, #ececec);
}
.research-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.research-finding {
  position: relative;
  padding: 10px 44px 10px 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text, #ececec);
}
.research-save-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: var(--muted, #9aa0a8);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.16s, color 0.16s, border-color 0.16s;
}
.research-save-btn:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text, #ececec);
  border-color: rgba(255,255,255,0.14);
}
.research-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
  overflow: hidden;
}
.research-table th,
.research-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  vertical-align: top;
}
.research-table th {
  font-weight: 500;
  color: var(--muted, #9aa0a8);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.02);
}
.research-table tbody tr:last-child td { border-bottom: none; }
.research-sources {
  margin-top: 4px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
}
.research-sources-summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--muted, #9aa0a8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  user-select: none;
  outline: none;
}
.research-sources-summary:hover { color: var(--text, #ececec); }
.research-source-list {
  margin: 12px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.research-source { font-size: 13.5px; line-height: 1.45; }
.research-source-link {
  color: var(--text, #ececec);
  text-decoration: none;
  font-weight: 400;
}
.research-source-link:hover { text-decoration: underline; text-decoration-color: rgba(255,255,255,0.3); }
.research-source-title { color: var(--text, #ececec); }
.research-source-domain { color: var(--muted, #9aa0a8); font-size: 12.5px; }
.research-source-snippet {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--muted, #9aa0a8);
  line-height: 1.45;
}
.research-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 10px 18px;
  background: rgba(20,22,26,0.92);
  color: var(--text, #ececec);
  font-size: 13.5px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 9999;
}
.research-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-color-scheme: light) {
  .research-finding,
  .research-table,
  .research-sources { background: rgba(0,0,0,0.025); border-color: rgba(0,0,0,0.06); }
  .research-table th { background: rgba(0,0,0,0.02); }
}

/* ═══════════════════════════════════════════════════════════════════════
   Phase 6: Tasks drawer (floating)
   ═══════════════════════════════════════════════════════════════════════ */
.tasks-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #f1f5f9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
  z-index: 9990;
}
.tasks-fab:hover { transform: translateY(-1px); box-shadow: 0 10px 32px rgba(0,0,0,0.45); }
.tasks-fab svg { width: 22px; height: 22px; }
.tasks-fab.has-active { background: linear-gradient(135deg, #2563eb, #6366f1); }
.tasks-fab-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #0f172a;
}
.tasks-drawer {
  position: fixed;
  right: 16px;
  bottom: 84px;
  width: 360px;
  max-height: min(70vh, 600px);
  background: rgba(15,23,42,0.96);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 48px rgba(0,0,0,0.55);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 9989;
  color: #e2e8f0;
}
.tasks-drawer.open { opacity: 1; transform: translateY(0); }
.tasks-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.tasks-drawer-title { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; }
.tasks-drawer-actions { display: flex; gap: 6px; align-items: center; }
.tasks-drawer-actions button {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #cbd5e1;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.tasks-drawer-actions button:hover { background: rgba(255,255,255,0.08); }
.tasks-drawer-close { padding: 4px !important; }
.tasks-drawer-close svg { width: 14px; height: 14px; vertical-align: middle; }
.tasks-drawer-body { overflow-y: auto; padding: 10px 12px; flex: 1; }
.tasks-section { margin-bottom: 14px; }
.tasks-section-h {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
}
.tasks-list { display: flex; flex-direction: column; gap: 6px; }
.tasks-empty { font-size: 12px; color: #64748b; padding: 6px 0; }
.tasks-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
  color: inherit;
  font: inherit;
}
.tasks-row:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
.tasks-row[data-status="running"] { border-left: 3px solid #3b82f6; }
.tasks-row[data-status="failed"]  { border-left: 3px solid #ef4444; }
.tasks-row[data-status="done"]    { border-left: 3px solid #10b981; }
.tasks-row[data-status="queued"]  { border-left: 3px solid #f59e0b; }
.tasks-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #94a3b8;
}
.tasks-row-status {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
}
.tasks-row-status.status-running { color: #93c5fd; background: rgba(59,130,246,0.15); }
.tasks-row-status.status-failed  { color: #fca5a5; background: rgba(239,68,68,0.15); }
.tasks-row-status.status-done    { color: #86efac; background: rgba(16,185,129,0.15); }
.tasks-row-status.status-queued  { color: #fcd34d; background: rgba(245,158,11,0.15); }
.tasks-row-engine { flex: 1; color: #cbd5e1; font-weight: 500; }
.tasks-row-elapsed { font-variant-numeric: tabular-nums; color: #64748b; }
.tasks-row-prompt {
  font-size: 13px;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tasks-row-stage { font-size: 11px; color: #94a3b8; }
.tasks-drawer-foot {
  padding: 8px 14px;
  font-size: 11px;
  color: #64748b;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: right;
}
@media (max-width: 480px) {
  .tasks-drawer { right: 8px; left: 8px; width: auto; bottom: 78px; }
  .tasks-fab { right: 16px; bottom: 16px; }
}

/* ZIP export button — uses the existing .export-btn shape. */
.export-btn[data-export="zip"] svg { transform: scale(0.95); }

/* ═══════════════════════════════════════════════════════════════════
   Phase C — Packages + Campaign UI (glass aesthetic, matches mode-chips)
   ═══════════════════════════════════════════════════════════════════ */
.packages-section,
.campaign-section {
  margin: 16px auto;
  max-width: 920px;
  width: 100%;
  padding: 0 4px;
}
.section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 6px 4px 10px;
}
.section-title {
  font-size: 13px;
  font-weight: 600;
  color: #e2e8f0;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.section-sub {
  font-size: 11px;
  color: #64748b;
}

/* Package cards grid */
.package-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.package-empty {
  font-size: 12px;
  color: #64748b;
  padding: 14px;
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: 12px;
  text-align: center;
}
.package-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  backdrop-filter: blur(8px);
}
.package-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
}
.package-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.package-card-title {
  font-size: 13px;
  font-weight: 600;
  color: #f1f5f9;
}
.package-card-tier {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 2px 7px;
  border-radius: 999px;
}
.tier-pro {
  color: #c7d2fe;
  background: rgba(99,102,241,0.18);
  border: 1px solid rgba(99,102,241,0.4);
}
.tier-elite {
  color: #fde68a;
  background: rgba(245,158,11,0.18);
  border: 1px solid rgba(245,158,11,0.5);
}
.package-card-desc {
  font-size: 12px;
  color: #94a3b8;
  margin: 0;
  line-height: 1.45;
}
.package-card-stages {
  font-size: 10.5px;
  color: #64748b;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  white-space: normal;
  line-height: 1.5;
}
.package-card-cta {
  margin-top: auto;
  background: linear-gradient(135deg, rgba(99,102,241,0.4), rgba(139,92,246,0.35));
  border: 1px solid rgba(139,92,246,0.45);
  color: #f5f3ff;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.package-card-cta:hover { filter: brightness(1.15); }

/* Package modal overlay */
.package-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,0.65);
  backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.package-modal {
  background: #0f172a;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  width: min(720px, 100%);
  max-height: 85vh;
  overflow: auto;
  padding: 18px 20px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}
.package-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.package-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: #f1f5f9;
}
.package-modal-close {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
}
.package-modal-desc {
  font-size: 12px;
  color: #94a3b8;
  margin: 4px 0 14px;
}
.package-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.package-input,
.campaign-input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 10px 12px;
  color: #e2e8f0;
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s ease;
}
.package-input:focus,
.campaign-input:focus {
  border-color: rgba(139,92,246,0.5);
}
.package-run-btn,
.campaign-run-btn {
  background: linear-gradient(135deg, rgba(99,102,241,0.6), rgba(139,92,246,0.5));
  border: 1px solid rgba(139,92,246,0.5);
  color: #f5f3ff;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
}
.package-run-btn:disabled,
.campaign-run-btn:disabled {
  opacity: 0.5;
  cursor: progress;
}
.package-status,
.campaign-status {
  font-size: 12px;
  color: #94a3b8;
  margin: 8px 2px;
  min-height: 16px;
}

/* Result tabs */
.package-step-tabs,
.campaign-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 8px;
}
.package-step-tab,
.campaign-tab {
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 11.5px;
  padding: 7px 11px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.package-step-tab:hover,
.campaign-tab:hover { color: #cbd5e1; }
.package-step-tab.active,
.campaign-tab.active {
  color: #f1f5f9;
  border-bottom-color: #8b5cf6;
}
.package-step-pane,
.campaign-pane {
  display: none;
}
.package-step-pane.active,
.campaign-pane.active {
  display: block;
}
.pane-meta {
  font-size: 10.5px;
  color: #64748b;
  margin-bottom: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.pane-body {
  background: rgba(15,23,42,0.6);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 12px;
  font-size: 12px;
  color: #e2e8f0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 360px;
  overflow: auto;
}
.package-download,
.campaign-download {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 14px;
  background: rgba(34,197,94,0.18);
  border: 1px solid rgba(34,197,94,0.4);
  color: #bbf7d0;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.package-download:hover,
.campaign-download:hover { filter: brightness(1.15); }

.package-warnings,
.campaign-warnings {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: 10px;
}
.package-warnings-title,
.campaign-warnings-title {
  font-size: 11px;
  font-weight: 700;
  color: #fde68a;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.package-warning,
.campaign-warning {
  font-size: 12px;
  color: #fcd34d;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* Campaign launcher card */
.campaign-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  backdrop-filter: blur(8px);
}
.campaign-result {
  margin-top: 10px;
}

/* ═════════════════════════════════════════════════════════════════════════
   PHASE D — SALES PAGES, OUTCOME TILES, PRE-CHECKOUT MODAL, CONVERSIONS
   ═════════════════════════════════════════════════════════════════════════ */

.sales-body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: #e2e8f0;
  background: radial-gradient(1100px 700px at 70% -10%, rgba(124,58,237,0.18), transparent 60%),
              radial-gradient(900px 600px at 10% 100%, rgba(56,189,248,0.12), transparent 60%),
              #050816;
  margin: 0;
  min-height: 100vh;
  line-height: 1.6;
}
.sales-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: sticky; top: 0;
  background: rgba(5,8,22,0.6);
  backdrop-filter: blur(10px);
  z-index: 10;
}
.sales-brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; color: #f1f5f9;
  text-decoration: none; font-size: 16px;
}
.sales-nav { display: inline-flex; gap: 18px; align-items: center; }
.sales-nav a { color: #94a3b8; text-decoration: none; font-size: 14px; }
.sales-nav a:hover { color: #f1f5f9; }
.sales-nav .sales-nav-cta {
  background: rgba(124,58,237,0.18);
  border: 1px solid rgba(124,58,237,0.45);
  padding: 7px 14px;
  border-radius: 8px;
  color: #ddd6fe;
  font-weight: 600;
}
.sales-main { max-width: 980px; margin: 0 auto; padding: 0 24px 80px; }
.sales-hero { padding: 64px 0 40px; text-align: center; }
.sales-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(124,58,237,0.1); border: 1px solid rgba(124,58,237,0.3);
  color: #c4b5fd; padding: 6px 14px; border-radius: 99px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; margin-bottom: 22px;
}
.sales-pill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #a78bfa; box-shadow: 0 0 8px rgba(167,139,250,0.7);
}
.sales-h1 {
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.1; font-weight: 800;
  color: #f8fafc; margin-bottom: 20px;
  max-width: 860px; margin-left: auto; margin-right: auto;
  letter-spacing: -0.02em;
}
.sales-sub {
  font-size: clamp(15px, 2.2vw, 19px);
  color: #94a3b8; max-width: 720px;
  margin: 0 auto 32px; line-height: 1.55;
}
.sales-hero-meta {
  display: flex; gap: 28px; justify-content: center;
  flex-wrap: wrap; margin: 0 auto 32px;
  padding: 18px 24px; max-width: 720px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
}
.sales-hero-stat {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; min-width: 110px;
}
.sales-hero-stat strong {
  font-size: 22px; color: #f1f5f9;
  font-weight: 700; letter-spacing: -0.01em;
}
.sales-hero-stat span {
  font-size: 12px; color: #64748b;
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-top: 2px;
}
.sales-cta-row {
  display: inline-flex; gap: 12px;
  flex-wrap: wrap; justify-content: center;
}
.sales-cta {
  display: inline-block; padding: 14px 28px;
  border-radius: 10px; font-weight: 600;
  text-decoration: none; font-size: 15px;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.sales-cta.primary {
  background: linear-gradient(135deg, #7c3aed, #db2777);
  color: #fff; border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 12px 30px rgba(124,58,237,0.35);
}
.sales-cta.primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.sales-cta.primary.big { padding: 18px 38px; font-size: 17px; }
.sales-cta.ghost {
  background: transparent; color: #cbd5e1;
  border: 1px solid rgba(255,255,255,0.15);
}
.sales-cta.ghost:hover { background: rgba(255,255,255,0.04); }
.sales-guarantee {
  margin-top: 18px; font-size: 12px; color: #64748b;
}
.sales-section { padding: 56px 0; border-top: 1px solid rgba(255,255,255,0.04); }
.sales-section.sales-bottom { text-align: center; padding: 64px 0; }
.sales-h2 {
  font-size: 28px; color: #f1f5f9;
  margin-bottom: 28px; font-weight: 700; letter-spacing: -0.01em;
}
.sales-section-sub {
  color: #94a3b8; font-size: 14px;
  margin: -16px 0 24px; max-width: 660px;
}
.sales-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.sales-list li {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px; padding: 14px 16px;
  font-size: 14px; color: #cbd5e1;
}
.sales-list li strong { color: #f1f5f9; }
.sales-list li::before {
  content: '\2713'; color: #a78bfa;
  margin-right: 10px; font-weight: 700;
}
.sales-example {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px; padding: 8px;
  overflow: hidden;
}
.sales-example-frame {
  width: 100%; height: 560px; border: 0;
  border-radius: 8px; display: block; background: #fff;
}
.sales-steps {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.sales-steps li {
  display: flex; gap: 16px; align-items: flex-start;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px; padding: 16px 18px;
}
.sales-step-num {
  flex-shrink: 0; width: 32px; height: 32px;
  background: linear-gradient(135deg, #7c3aed, #db2777);
  color: #fff; font-weight: 700; font-size: 14px;
  border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center;
}
.sales-steps strong { color: #f1f5f9; display: block; margin-bottom: 4px; }
.sales-steps p { color: #94a3b8; font-size: 13px; margin: 0; }
.sales-faq { display: flex; flex-direction: column; gap: 8px; }
.sales-faq details {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px; padding: 14px 16px;
}
.sales-faq summary {
  cursor: pointer; color: #f1f5f9;
  font-weight: 600; font-size: 14px;
}
.sales-faq p {
  color: #94a3b8; font-size: 13px;
  margin-top: 10px; line-height: 1.55;
}
.sales-trust {
  text-align: center; padding: 32px 0;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.sales-trust-title {
  color: #64748b; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 14px; font-weight: 600;
}
.sales-trust-row {
  display: inline-flex; gap: 10px;
  flex-wrap: wrap; justify-content: center;
}
.sales-badge {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: #cbd5e1; padding: 7px 14px;
  border-radius: 99px; font-size: 13px;
}
.sales-foot {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 24px;
}
.sales-foot-inner {
  max-width: 980px; margin: 0 auto;
  display: flex; gap: 12px; align-items: center;
  justify-content: center; color: #64748b; font-size: 12px;
}
.sales-foot-inner a { color: #94a3b8; text-decoration: none; }
.sales-foot-inner a:hover { color: #f1f5f9; }

@media (max-width: 700px) {
  .sales-hero-meta { padding: 14px; gap: 20px; }
  .sales-hero-stat { min-width: 90px; }
  .sales-example-frame { height: 420px; }
}

/* Outcome tiles (in-app shortcuts on /new view) */
.outcome-section { margin: 0 0 24px; }
.outcome-head {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 14px;
}
.outcome-title {
  font-size: 14px; font-weight: 600; color: #f1f5f9;
  letter-spacing: -0.005em;
}
.outcome-sub { font-size: 12px; color: #64748b; }
.outcome-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.outcome-tile {
  background: linear-gradient(140deg, rgba(124,58,237,0.08), rgba(56,189,248,0.06));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 18px;
  cursor: pointer; text-align: left;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
  display: flex; flex-direction: column; gap: 6px;
  font-family: inherit; color: inherit;
}
.outcome-tile:hover {
  border-color: rgba(124,58,237,0.4);
  background: linear-gradient(140deg, rgba(124,58,237,0.16), rgba(56,189,248,0.1));
  transform: translateY(-1px);
}
.outcome-tile-icon { font-size: 22px; line-height: 1; }
.outcome-tile-title { font-size: 14px; font-weight: 600; color: #f1f5f9; }
.outcome-tile-sub { font-size: 12px; color: #94a3b8; line-height: 1.45; }

/* Pre-checkout summary modal */
.precheckout-overlay {
  position: fixed; inset: 0;
  background: rgba(2,6,23,0.7);
  backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.precheckout-modal {
  background: linear-gradient(150deg, rgba(15,23,42,0.96), rgba(30,27,75,0.92));
  border: 1px solid rgba(124,58,237,0.25);
  border-radius: 18px;
  width: min(480px, 100%);
  padding: 28px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03);
}
.precheckout-title {
  font-size: 18px; font-weight: 700; color: #f1f5f9;
  margin-bottom: 6px;
}
.precheckout-sub { font-size: 13px; color: #94a3b8; margin-bottom: 18px; }
.precheckout-price {
  display: flex; align-items: baseline; gap: 8px;
  background: rgba(255,255,255,0.04);
  padding: 14px 16px; border-radius: 10px; margin-bottom: 16px;
}
.precheckout-amount { font-size: 28px; font-weight: 800; color: #f1f5f9; }
.precheckout-period { font-size: 13px; color: #94a3b8; }
.precheckout-list {
  list-style: none; padding: 0; margin: 0 0 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.precheckout-list li {
  font-size: 13px; color: #cbd5e1;
  padding-left: 22px; position: relative;
}
.precheckout-list li::before {
  content: '\2713'; color: #a78bfa; font-weight: 700;
  position: absolute; left: 0;
}
.precheckout-meta { font-size: 12px; color: #64748b; margin-bottom: 18px; }
.precheckout-actions { display: flex; gap: 10px; }
.precheckout-pay {
  flex: 1; background: linear-gradient(135deg, #7c3aed, #db2777);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff; font-weight: 700; font-size: 14px;
  padding: 12px; border-radius: 10px; cursor: pointer;
}
.precheckout-pay:hover { filter: brightness(1.1); }
.precheckout-pay:disabled { opacity: 0.6; cursor: progress; }
.precheckout-cancel {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: #cbd5e1; font-size: 14px;
  padding: 12px 18px; border-radius: 10px; cursor: pointer;
}
.precheckout-cancel:hover { background: rgba(255,255,255,0.04); }
.precheckout-error {
  font-size: 12px; color: #fca5a5;
  margin-top: 10px; min-height: 14px;
}

.checkout-toast {
  position: fixed; top: 18px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #059669, #047857);
  color: #fff; padding: 14px 22px;
  border-radius: 12px; font-weight: 600; font-size: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.4);
  z-index: 10001;
  animation: toast-in 0.3s ease forwards;
}
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.example-gallery {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-top: 12px;
}
.example-tile {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px; padding: 12px;
  display: flex; flex-direction: column; gap: 6px;
  cursor: pointer; transition: border-color 0.15s ease;
  text-decoration: none; color: inherit;
}
.example-tile:hover { border-color: rgba(124,58,237,0.4); }
.example-tile-name { font-size: 13px; color: #f1f5f9; font-weight: 600; }
.example-tile-action {
  font-size: 11px; color: #a78bfa;
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* Conversions dashboard */
.conv-dashboard { display: flex; flex-direction: column; gap: 18px; padding: 8px 0; }
.conv-range-row { display: inline-flex; gap: 8px; align-items: center; }
.conv-range-row button {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #cbd5e1; padding: 7px 14px;
  border-radius: 8px; font-size: 12px; cursor: pointer;
  font-weight: 500;
}
.conv-range-row button.active {
  background: rgba(124,58,237,0.2);
  border-color: rgba(124,58,237,0.5);
  color: #ddd6fe;
}
.conv-stats {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.conv-stat {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px; padding: 16px;
}
.conv-stat-label {
  font-size: 11px; color: #64748b;
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.conv-stat-value {
  font-size: 24px; font-weight: 700; color: #f1f5f9;
  letter-spacing: -0.01em;
}
.conv-stat-sub { font-size: 12px; color: #94a3b8; margin-top: 2px; }
.conv-chart-wrap {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px; padding: 16px;
}
.conv-chart-title {
  font-size: 13px; color: #cbd5e1; margin-bottom: 10px; font-weight: 600;
}
.conv-chart-svg { width: 100%; height: 160px; }
.conv-chart-bar { fill: rgba(124,58,237,0.6); transition: fill 0.15s ease; }
.conv-chart-bar:hover { fill: rgba(167,139,250,0.85); }
.conv-by-pkg {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px; padding: 16px;
}
.conv-by-pkg-title {
  font-size: 13px; color: #cbd5e1; margin-bottom: 12px; font-weight: 600;
}
.conv-by-pkg-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; font-size: 13px; color: #cbd5e1;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.conv-by-pkg-row:last-child { border-bottom: none; }
.conv-by-pkg-count {
  background: rgba(124,58,237,0.18);
  color: #ddd6fe; padding: 2px 9px;
  border-radius: 6px; font-weight: 600; font-size: 12px;
}

/* Landing-page Phase D hero override */
.landing-hero-d {
  font-size: clamp(40px, 6vw, 70px);
  line-height: 1.05; font-weight: 800;
  color: #f8fafc; margin: 12px 0 16px;
  letter-spacing: -0.025em;
}
.landing-hero-d em {
  font-style: normal;
  background: linear-gradient(135deg, #a78bfa, #f472b6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.landing-icons-row {
  display: inline-flex; gap: 22px; flex-wrap: wrap;
  justify-content: center; margin: 20px 0;
  font-size: 13px; color: #94a3b8;
}
.landing-icons-row span { display: inline-flex; gap: 6px; align-items: center; }
.landing-icons-row strong { color: #cbd5e1; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════
   Phase E — Clean homepage + per-page header utilities (2026-04-28)
   ═══════════════════════════════════════════════════════════════════════ */
.home-hero {
  max-width: 900px;
  margin: 80px auto 32px;
  text-align: center;
}
.home-hero h1 {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--text);
}
.home-hero p {
  margin: 0;
  font-size: 14px;
  color: var(--text-dim);
  opacity: 0.8;
}
/* Compact recent sessions row (optional) */
.recent-sessions {
  max-width: 760px;
  margin: 24px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.recent-session-chip {
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-dim);
  background: var(--glass-bg-1, rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  cursor: pointer;
  transition: background 180ms var(--ease-glass, ease);
}
.recent-session-chip:hover {
  background: var(--glass-bg-2, rgba(255,255,255,0.08));
  color: var(--text);
}
/* Per-page header (consistent across moved pages) */
.page-header {
  max-width: 1100px;
  margin: 40px auto 24px;
  padding: 0 24px;
}
.page-header h1 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
  color: var(--text);
}
.page-header p {
  margin: 0;
  font-size: 13px;
  color: var(--text-dim);
}
.page-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 80px;
}
/* Full-page Live Queue panel — relax the absolute-right positioning that
   was used when the panel was a homepage sidebar. */
.lq-panel-fullpage,
.live-queue.lq-panel-fullpage {
  position: relative;
  right: auto;
  top: auto;
  width: 100%;
  max-width: 100%;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   Phase F — Premium polish pass (2026-04-28 / v=2026042840)
   Typography scale, breathing room, transitions, empty + skeleton states.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --type-xs:  11px;
  --type-sm:  12.5px;
  --type-md:  14px;
  --type-lg:  16px;
  --type-xl:  20px;
  --type-2xl: 28px;
  --type-3xl: 36px;
  --leading-tight:  1.2;
  --leading-normal: 1.5;
  --leading-loose:  1.7;
}

/* Typography pass — tighten the scale across all surfaces. */
.home-hero {
  margin: 14vh auto 32px;
  max-width: 760px;
}
.home-hero h1 {
  font-size: var(--type-3xl);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: var(--leading-tight);
}
.home-hero p {
  font-size: var(--type-md);
  color: var(--text-dim);
  opacity: 0.7;
  line-height: var(--leading-normal);
}
.page-header {
  margin: 6vh auto 32px;
  padding: 0 32px;
  max-width: 1080px;
}
.page-header h1 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
}
.page-header p {
  font-size: 13px;
  color: var(--text-dim);
  line-height: var(--leading-normal);
}
.page-content {
  max-width: 1080px;
  padding: 0 32px 96px;
}

/* Composer breathing room */
.composer,
.composer-wrap {
  max-width: 760px;
  margin: 0 auto 32px;
}

/* Card density — listing pages get more internal padding + vertical rhythm. */
.list-view .card,
.list-view .lq-item,
.list-view .package-card,
.list-view .conv-row {
  padding: 18px;
}
.list-view .lq-list,
.list-view .package-list,
.list-view .card-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Small labels: chips, status pills, breadcrumbs — uppercase tracking. */
.deck-chip,
.status-chip,
.lq-status,
.kbd,
.kbd-sm,
.rail-section-head span {
  font-size: var(--type-xs);
  letter-spacing: 0.06em;
}

/* ─── Composer microinteractions ─────────────────────────────────── */
.composer-input::placeholder {
  transition: opacity 120ms var(--ease-glass);
  opacity: 0.6;
}
.composer-input:focus::placeholder,
.composer-input:not(:placeholder-shown)::placeholder {
  opacity: 0;
}
.composer-send {
  position: relative;
  overflow: hidden;
}
.composer-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.composer-send:not(:disabled) {
  opacity: 1;
}
.composer-send.is-pressing {
  animation: sendPress 180ms var(--ease-glass);
}
.composer-send::after {
  content: '';
  position: absolute;
  inset: 50% 50%;
  width: 0; height: 0;
  border-radius: 50%;
  background: rgba(135,184,211,0.22);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
}
.composer-send.is-pressing::after {
  animation: sendRipple 320ms var(--ease-glass);
}
@keyframes sendPress {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.99); }
  100% { transform: scale(1); }
}
@keyframes sendRipple {
  0%   { width: 0; height: 0; opacity: 0.7; }
  100% { width: 120px; height: 120px; opacity: 0; }
}

/* ─── Page transitions (.app-content via #main-canvas) ─────────────── */
.main-canvas {
  transition: opacity 180ms var(--ease-glass), transform 220ms var(--ease-glass);
}
.main-canvas[data-transitioning="true"] {
  opacity: 0.5;
  transform: translateY(-4px);
}
.main-canvas[data-page-enter="true"] > * {
  animation: pageEnter 220ms var(--ease-glass) 40ms both;
}
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Empty states ─────────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  text-align: center;
  color: var(--text-dim);
  gap: 12px;
}
.empty-state-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--glass-bg-1);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  opacity: 0.7;
  animation: emptyPulse 2.6s ease-in-out infinite;
}
@keyframes emptyPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.04); }
}
.empty-state h3 {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  color: var(--text);
}
.empty-state p {
  font-size: 13px;
  margin: 0;
  max-width: 320px;
  line-height: var(--leading-normal);
}
.empty-state a {
  color: var(--accent);
  text-decoration: none;
  font-size: 12.5px;
  margin-top: 4px;
}
.empty-state a:hover { color: var(--accent-2); }

/* ─── Skeleton loading state ───────────────────────────────────────── */
.skeleton {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
}
.skeleton-bar {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
}
.skeleton-bar:nth-child(1) { width: 60%; }
.skeleton-bar:nth-child(2) { width: 90%; }
.skeleton-bar:nth-child(3) { width: 75%; }
@keyframes skeletonShimmer {
  0%, 100% { background-position: 200% 0; }
  50%      { background-position: -200% 0; }
}

/* ─── Recent sessions chip row polish ──────────────────────────────── */
.recent-session-chip {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: transform 180ms var(--ease-glass),
              border-color 180ms var(--ease-glass),
              background 180ms var(--ease-glass);
}
.recent-session-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(135,184,211,0.4);
}
.recent-sessions:empty { display: none; }

/* ─── Mobile responsiveness audit ──────────────────────────────────── */
@media (max-width: 768px) {
  .home-hero          { margin-top: 8vh; }
  .home-hero h1       { font-size: 26px; }
  .composer-wrap,
  .composer           { max-width: 100%; padding: 14px; }
  .deck-row           { flex-wrap: wrap; gap: 6px; }
  .deck-chip          { font-size: 12px; padding: 8px 14px; }
  .page-header        { padding: 0 16px; margin-top: 24px; margin-bottom: 20px; }
  .page-header h1     { font-size: 20px; }
  .page-header p      { font-size: 12px; }
  .page-content       { padding: 0 16px 64px; }
  .empty-state        { min-height: 40vh; }
}

/* Reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
  .main-canvas,
  .main-canvas[data-transitioning="true"],
  .main-canvas[data-page-enter="true"] > *,
  .empty-state-icon,
  .skeleton-bar,
  .composer-send.is-pressing,
  .composer-send.is-pressing::after {
    animation: none !important;
    transition: none !important;
  }
}