/* Pattern Forge — design system v2 (modern, polished) */

:root {
  --bg: #fafbfd;
  --bg-soft: #f3f5fa;
  --bg-card: #ffffff;
  --bg-elev: #ffffff;
  --bg-glass: rgba(255, 255, 255, 0.72);
  --border: #e8eaf2;
  --border-strong: #d4d8e3;
  --text: #0b1020;
  --text-muted: #5b6478;
  --text-dim: #8a93a6;

  /* Brand palette — slightly deeper indigo, brighter cyan, vivid orange */
  --indigo: #5b5bf7;
  --indigo-deep: #4a4ae8;
  --indigo-soft: #eef0ff;
  --indigo-glow: rgba(91, 91, 247, 0.35);
  --cyan: #06b6d4;
  --cyan-soft: #e0f7fb;
  --orange: #f97316;
  --orange-soft: #fff1e6;
  --red: #ef4444;
  --red-soft: #fee2e2;
  --green: #10b981;
  --green-soft: #e7f7f0;
  --yellow: #f59e0b;
  --yellow-soft: #fef3c7;

  /* Brand gradients */
  --grad-primary: linear-gradient(135deg, #6366f1 0%, #5b5bf7 50%, #06b6d4 100%);
  --grad-warm: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
  --grad-mesh: radial-gradient(at 20% 0%, rgba(91,91,247,.18) 0px, transparent 50%),
               radial-gradient(at 80% 0%, rgba(6,182,212,.14) 0px, transparent 50%),
               radial-gradient(at 50% 100%, rgba(249,115,22,.10) 0px, transparent 50%);

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --shadow-xs: 0 1px 2px rgba(11, 16, 32, 0.04);
  --shadow-sm: 0 2px 4px rgba(11, 16, 32, 0.05), 0 1px 2px rgba(11,16,32,.03);
  --shadow-md: 0 8px 24px rgba(11, 16, 32, 0.07), 0 2px 6px rgba(11,16,32,.04);
  --shadow-lg: 0 20px 50px rgba(11, 16, 32, 0.10), 0 8px 16px rgba(11,16,32,.05);
  --shadow-glow: 0 0 0 4px var(--indigo-soft), 0 8px 24px var(--indigo-glow);

  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: .15s;
  --dur: .22s;
  --dur-slow: .4s;

  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

[data-theme="dark"] {
  --bg: #07091a;
  --bg-soft: #0d1126;
  --bg-card: #11152e;
  --bg-elev: #161a36;
  --bg-glass: rgba(17, 21, 46, 0.72);
  --border: #1c2244;
  --border-strong: #2a3258;
  --text: #eef0ff;
  --text-muted: #9aa3bd;
  --text-dim: #6c7591;
  --indigo-soft: rgba(91, 91, 247, 0.16);
  --cyan-soft: rgba(6, 182, 212, 0.14);
  --orange-soft: rgba(249, 115, 22, 0.16);
  --green-soft: rgba(16, 185, 129, 0.14);
  --red-soft: rgba(239, 68, 68, 0.14);
  --yellow-soft: rgba(245, 158, 11, 0.14);
  --shadow-sm: 0 2px 4px rgba(0,0,0,.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55);
  --grad-mesh: radial-gradient(at 20% 0%, rgba(91,91,247,.18) 0px, transparent 50%),
               radial-gradient(at 80% 0%, rgba(6,182,212,.14) 0px, transparent 50%),
               radial-gradient(at 50% 100%, rgba(249,115,22,.08) 0px, transparent 50%);
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Selection */
::selection { background: var(--indigo); color: #fff; }
::-moz-selection { background: var(--indigo); color: #fff; }

/* Scrollbar polish */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* Focus ring (keyboard only) */
:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
  border-radius: 6px;
}
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--indigo-soft), 0 0 0 4px var(--indigo);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 0;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.011em;
  line-height: 1.55;
}
body {
  background-image: var(--grad-mesh);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
h1, h2, h3, h4 { letter-spacing: -0.025em; line-height: 1.2; }
p { line-height: 1.6; }
a { color: var(--indigo); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

.font-mono { font-family: var(--mono); }

/* ─── Top nav (glassy) ─── */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--dur) var(--ease);
}
.nav.scrolled { box-shadow: var(--shadow-sm); }
.nav-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 17px;
  color: var(--indigo);
  letter-spacing: -0.02em;
}
.brand .brand-mark {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px dashed var(--indigo);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
}
.brand .brand-mark::after {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--indigo);
  box-shadow: 0 0 10px var(--indigo);
}
.nav-links { display: flex; gap: 4px; align-items: center; }
.nav-link {
  padding: 8px 14px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  position: relative;
}
.nav-link:hover { color: var(--text); background: var(--bg-soft); text-decoration: none; }
.nav-link.active {
  background: var(--indigo-soft);
  color: var(--indigo);
  font-weight: 600;
}
.nav-link.active::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -13px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--indigo);
  transform: translateX(-50%);
  display: none;
}
.nav-link.active.accent-orange { background: var(--orange-soft); color: var(--orange); }
.nav-link.active.accent-orange::after { background: var(--orange); }
.nav-link.active.accent-cyan { background: var(--cyan-soft); color: var(--cyan); }
.nav-link.active.accent-cyan::after { background: var(--cyan); }

.nav-actions { display: flex; gap: 6px; align-items: center; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid transparent;
  background: transparent; color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  position: relative;
}
.icon-btn:hover { background: var(--bg-soft); color: var(--text); border-color: var(--border); }
.icon-btn:active { transform: scale(.94); }
.icon-btn.has-badge::before {
  content: '';
  position: absolute; top: 9px; right: 10px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 2px var(--bg-card), 0 0 8px rgba(249,115,22,.6);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: .75; }
}
.nav-badge {
  position: absolute; top: 4px; right: 4px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--bg-card);
}

/* ─── Layout ─── */
.container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.section { padding: 72px 0; }
.section-tight { padding: 44px 0; }
@media (max-width: 640px) {
  .container { padding: 0 18px; }
  .section { padding: 48px 0; }
  .section-tight { padding: 32px 0; }
}

/* ─── Hero ─── */
.hero {
  text-align: center;
  padding: 96px 24px 64px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(720px 360px at 50% -10%, var(--indigo-soft), transparent 65%),
    radial-gradient(500px 250px at 80% 110%, var(--cyan-soft), transparent 70%),
    radial-gradient(420px 220px at 15% 100%, var(--orange-soft), transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: heroFloat 18s ease-in-out infinite alternate;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, #000 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, #000 30%, transparent 70%);
  opacity: .35;
  z-index: 0;
  pointer-events: none;
}
@keyframes heroFloat {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-16px) scale(1.04); }
}
.hero > * { position: relative; z-index: 1; }
.hero h1 {
  font-size: clamp(36px, 5.8vw, 64px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.038em;
  margin: 0 0 18px;
}
.hero h1 .grad {
  background: linear-gradient(90deg, #5b5bf7, #06b6d4 60%, #f97316);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradShift 8s ease-in-out infinite;
}
@keyframes gradShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.hero p {
  font-size: 18px;
  color: var(--text-muted);
  max-width: 660px;
  margin: 0 auto 32px;
  line-height: 1.55;
}
.hero-cta { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* Animated entrance for content blocks */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.hero h1, .hero p, .hero-cta { animation: fadeInUp .55s var(--ease-out) backwards; }
.hero h1 { animation-delay: .05s; }
.hero p { animation-delay: .15s; }
.hero-cta { animation-delay: .25s; }

/* ─── Buttons ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
  text-decoration: none;
  font-family: inherit;
  letter-spacing: -0.005em;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.btn::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .55s var(--ease-out);
  pointer-events: none;
}
.btn:hover::before { transform: translateX(100%); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn-primary {
  background: linear-gradient(135deg, #6366f1 0%, #5b5bf7 60%, #4a4ae8 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(91,91,247,0.32), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(91,91,247,0.45), inset 0 1px 0 rgba(255,255,255,.22); }
.btn-cyan {
  background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 60%, #0891b2 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(6,182,212,.30), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-cyan:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(6,182,212,.42); }
.btn-orange {
  background: linear-gradient(135deg, #fb923c 0%, #f97316 60%, #ea580c 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(249,115,22,.32), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-orange:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(249,115,22,.42); }
.btn-ghost {
  background: var(--bg-card);
  color: var(--text);
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
}
.btn-ghost:hover { background: var(--bg-soft); border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-soft {
  background: var(--indigo-soft);
  color: var(--indigo);
}
.btn-soft:hover { background: color-mix(in srgb, var(--indigo-soft) 70%, var(--indigo) 12%); }
.btn-danger {
  background: linear-gradient(135deg, #f87171 0%, #ef4444 60%, #dc2626 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(239,68,68,.32);
}
.btn-danger:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(239,68,68,.45); }
.btn-sm { padding: 7px 13px; font-size: 13px; border-radius: 9px; }
.btn-lg { padding: 14px 26px; font-size: 15px; border-radius: 13px; }
.btn:disabled, .btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none !important; box-shadow: none !important; filter: grayscale(.2); }
.btn:disabled::before { display: none; }

/* ─── Cards ─── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  box-shadow: var(--shadow-xs);
}
.card-hover { cursor: pointer; }
.card-hover:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card-elev { box-shadow: var(--shadow-md); border-color: transparent; }
.card-glass {
  background: var(--bg-glass);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.card-row { display: flex; align-items: flex-start; gap: 14px; }
.card-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}
.card-icon.indigo { background: var(--indigo-soft); color: var(--indigo); }
.card-icon.cyan { background: var(--cyan-soft); color: var(--cyan); }
.card-icon.orange { background: var(--orange-soft); color: var(--orange); }
.card-icon.green { background: var(--green-soft); color: var(--green); }

.card h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.card p.lead { margin: 0; font-size: 13.5px; color: var(--text-muted); line-height: 1.55; }

/* ─── Section heads ─── */
.section-head { text-align: center; margin-bottom: 36px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: var(--indigo-soft);
  color: var(--indigo);
  margin-bottom: 14px;
}
.eyebrow.orange { background: var(--orange-soft); color: var(--orange); }
.eyebrow.cyan { background: var(--cyan-soft); color: var(--cyan); }
.eyebrow.green { background: var(--green-soft); color: var(--green); }
.section-head h2 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 10px;
}
.section-head h2 .grad {
  background: linear-gradient(90deg, var(--indigo), var(--cyan));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.section-head h2 .grad-orange {
  background: linear-gradient(90deg, var(--orange), var(--red));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.section-head p { color: var(--text-muted); max-width: 580px; margin: 0 auto; font-size: 15px; line-height: 1.55; }

/* ─── Grid utilities ─── */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 880px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ─── Mission Workflow chips ─── */
.workflow {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
}
.workflow-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.workflow-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 13px;
}
.chip {
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text);
}
.chip-arrow { color: var(--text-dim); }

/* ─── Terminal mockup ─── */
.terminal {
  background: #0c0f1c;
  color: #d6dcef;
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 12.5px;
  border: 1px solid #1c2238;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.terminal-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: #11152a;
  border-bottom: 1px solid #1c2238;
}
.term-dot { width: 11px; height: 11px; border-radius: 50%; }
.term-dot.r { background: #ff5f57; }
.term-dot.y { background: #febc2e; }
.term-dot.g { background: #28c840; }
.terminal-title { color: #6c7591; font-size: 11px; margin-left: 8px; flex: 1; }
.terminal-tag { font-size: 11px; color: #28c840; }
.terminal-body { padding: 16px 18px; line-height: 1.65; max-height: 360px; overflow-y: auto; }
.terminal-body .ts { color: #6c7591; }
.terminal-body .lvl-info { color: #6aa9ff; }
.terminal-body .lvl-ok { color: #4ade80; }
.terminal-body .lvl-warn { color: #fbbf24; }
.terminal-body .lvl-err { color: #f87171; }
.terminal-body .accent { color: #06b6d4; }

/* ─── Pipeline visualization ─── */
.pipeline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 22px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.pipe-step {
  flex: 1 1 130px;
  min-width: 130px;
  padding: 14px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
  transition: all 0.2s;
}
.pipe-step.active { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-soft); }
.pipe-step .pipe-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--indigo-soft); color: var(--indigo);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.pipe-step .pipe-title { font-size: 13px; font-weight: 600; }
.pipe-step .pipe-sub { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.pipe-arrow { color: var(--text-dim); font-size: 14px; }
@media (max-width: 880px) {
  .pipe-arrow { display: none; }
}

/* ─── Stats ─── */
.stat {
  text-align: center;
  padding: 24px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.stat-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--indigo-soft); color: var(--indigo);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.stat-num {
  font-size: 30px;
  font-weight: 800;
  color: var(--indigo);
  letter-spacing: -0.025em;
  line-height: 1;
}
.stat-label { font-size: 13px; color: var(--text-muted); margin-top: 6px; font-weight: 500; }
.stat-sub { font-size: 11px; color: var(--text-dim); margin-top: 4px; }

/* ─── Tabs ─── */
.tabs {
  display: flex; gap: 4px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 22px;
}
.tab {
  flex: 1;
  text-align: center;
  padding: 10px 14px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  background: transparent;
  border: none;
  font-family: inherit;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
  letter-spacing: -.005em;
}
.tab:hover { color: var(--text); background: var(--bg-card); }
.tab.active { background: var(--bg-card); color: var(--indigo); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border); }

/* ─── Form inputs ─── */
.input, select.input, textarea.input,
input[type="text"], input[type="url"], input[type="number"], input[type="email"],
input[type="datetime-local"], input[type="date"], input[type="time"], input[type="search"],
select, textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  box-shadow: var(--shadow-xs);
}
.input:hover, input:hover, textarea:hover, select:hover { border-color: var(--border-strong); }
.input:focus, input:focus, textarea:focus, select:focus,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  border-color: var(--indigo);
  box-shadow: 0 0 0 4px var(--indigo-soft);
  outline: none;
}
.input::placeholder, input::placeholder, textarea::placeholder { color: var(--text-dim); }
textarea.input, textarea { font-family: var(--mono); font-size: 13px; line-height: 1.55; resize: vertical; min-height: 80px; }
select, select.input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='none' stroke='%238a93a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5l3 3 3-3'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}
.label { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-muted); margin-bottom: 7px; text-transform: uppercase; letter-spacing: 0.06em; }

/* Form grid (used by modals) */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.form-grid label input, .form-grid label select, .form-grid label textarea { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text); font-size: 14px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* ─── Tags / pills ─── */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--bg-soft);
  color: var(--text-muted);
  border: 1px solid var(--border);
  letter-spacing: -0.005em;
  line-height: 1.6;
}
.tag.indigo { background: var(--indigo-soft); color: var(--indigo); border-color: transparent; }
.tag.cyan { background: var(--cyan-soft); color: var(--cyan); border-color: transparent; }
.tag.orange { background: var(--orange-soft); color: var(--orange); border-color: transparent; }
.tag.green { background: var(--green-soft); color: var(--green); border-color: transparent; }
.tag.red { background: var(--red-soft); color: var(--red); border-color: transparent; }
.tag.yellow { background: var(--yellow-soft); color: var(--yellow); border-color: transparent; }
.tag.dim { background: transparent; color: var(--text-dim); border-color: var(--border); }

.status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.status-dot.green { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.status-dot.orange { background: var(--orange); }
.status-dot.gray { background: var(--text-dim); }

/* ─── Pattern card ─── */
.pattern-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.pattern-card:hover { border-color: var(--indigo); box-shadow: var(--shadow-md); }
.pattern-card.selected { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-soft); background: color-mix(in srgb, var(--indigo-soft) 50%, var(--bg-card)); }
.pattern-card .pat-type {
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.pattern-card .pat-label { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.pattern-card .pat-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.pattern-card .pat-meta {
  margin-top: 10px;
  display: flex; gap: 12px; font-size: 11.5px; color: var(--text-dim);
  font-family: var(--mono);
}

/* ─── Video card ─── */
.vid-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.vid-thumb {
  aspect-ratio: 9 / 12;
  background: var(--bg-soft);
  background-size: cover;
  background-position: center;
  position: relative;
}
.vid-thumb .platform-badge {
  position: absolute; top: 8px; left: 8px;
  padding: 3px 8px; border-radius: 6px;
  font-size: 10.5px; font-weight: 600;
  background: rgba(0,0,0,0.6); color: #fff;
  backdrop-filter: blur(4px);
}
.vid-body { padding: 12px; }
.vid-handle { font-size: 12px; color: var(--text-muted); }
.vid-caption { font-size: 13px; font-weight: 500; line-height: 1.4; margin: 4px 0 8px; min-height: 36px; }
.vid-stats { display: flex; gap: 10px; font-size: 11px; color: var(--text-dim); font-family: var(--mono); }

/* ─── Toast (modern, with icon) ─── */
.toast-wrap { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 10px; z-index: 100; pointer-events: none; }
.toast {
  padding: 13px 16px 13px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  font-size: 13.5px;
  font-weight: 500;
  display: flex; align-items: center; gap: 12px;
  min-width: 260px; max-width: 380px;
  animation: toastIn .35s var(--ease-spring);
  pointer-events: auto;
  position: relative;
  overflow: hidden;
}
.toast::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--indigo);
}
.toast::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--indigo);
  opacity: .35;
  transform-origin: left;
  animation: toastProgress 3.2s linear forwards;
}
.toast-icon {
  width: 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--indigo-soft);
  color: var(--indigo);
  flex-shrink: 0;
  font-size: 13px;
}
.toast.success::before, .toast.success::after { background: var(--green); }
.toast.success .toast-icon { background: var(--green-soft); color: var(--green); }
.toast.error::before, .toast.error::after { background: var(--red); }
.toast.error .toast-icon { background: var(--red-soft); color: var(--red); }
.toast.info::before, .toast.info::after { background: var(--indigo); }
.toast.info .toast-icon { background: var(--indigo-soft); color: var(--indigo); }
.toast.warn::before, .toast.warn::after { background: var(--yellow); }
.toast.warn .toast-icon { background: var(--yellow-soft); color: var(--yellow); }
@keyframes toastIn { from { transform: translateX(120%) scale(.95); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toastProgress { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ─── Loading shell ─── */
.loading-shell {
  padding: 80px;
  text-align: center;
  color: var(--text-muted);
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.loading-shell::before {
  content: '';
  width: 40px; height: 40px;
  border: 3px solid var(--indigo-soft);
  border-top-color: var(--indigo);
  border-radius: 50%;
  animation: spin .85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Skeleton shimmer */
.skel { background: var(--bg-soft); border-radius: 8px; position: relative; overflow: hidden; }
.skel::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  animation: shimmer 1.4s infinite;
}
[data-theme="dark"] .skel::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Footer */
.footer {
  border-top: 1px solid var(--border);
  padding: 36px 24px 28px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
}
.footer .brand { justify-content: center; margin-bottom: 10px; }

/* Hidden */
.hidden { display: none !important; }

/* Code block (generation output) */
.codeblock {
  background: #0c0f1c;
  color: #d6dcef;
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 18px 20px;
  border-radius: var(--radius);
  white-space: pre-wrap;
  line-height: 1.6;
  overflow-x: auto;
  border: 1px solid #1c2238;
}

/* "Try it yourself" playground panel */
.playground {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PLATFORM MIMICRY — TikTok feed, Instagram grid/reel, phone-frame previews
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── View switcher (segment control) ───────────────────────────────────── */
.view-switch {
  display: inline-flex;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
  gap: 2px;
}
.view-switch button {
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 0.15s;
}
.view-switch button:hover { color: var(--text); }
.view-switch button.active { background: var(--bg-card); color: var(--text); box-shadow: var(--shadow-sm); }

/* ── TikTok vertical feed ───────────────────────────────────────────────── */
.tiktok-feed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 16px 0;
  background: #000;
  border-radius: var(--radius);
  margin: 0 auto;
}
.tiktok-card {
  position: relative;
  width: 360px;
  aspect-ratio: 9 / 16;
  background: #111;
  border-radius: 14px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.tiktok-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, transparent 30%, transparent 65%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}
.tiktok-card .tt-top {
  position: absolute;
  top: 14px; left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 24px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  z-index: 2;
}
.tiktok-card .tt-top .tt-active { color: #fff; position: relative; }
.tiktok-card .tt-top .tt-active::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 2px; background: #fff; border-radius: 2px;
}
.tiktok-card .tt-side {
  position: absolute;
  right: 8px; bottom: 78px;
  display: flex; flex-direction: column; gap: 16px;
  z-index: 2;
  align-items: center;
}
.tiktok-card .tt-side .tt-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid #fff;
  background: linear-gradient(135deg, #ff0050, #00f2ea);
  position: relative;
}
.tiktok-card .tt-side .tt-avatar::after {
  content: '+';
  position: absolute;
  bottom: -8px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 18px;
  background: #ff0050; color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; line-height: 1;
}
.tiktok-card .tt-action {
  display: flex; flex-direction: column; align-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.tiktok-card .tt-action i { font-size: 28px; margin-bottom: 4px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.tiktok-card .tt-action.liked i { color: #ff2d55; }
.tiktok-card .tt-bottom {
  position: absolute;
  left: 12px; right: 70px; bottom: 14px;
  color: #fff;
  z-index: 2;
}
.tiktok-card .tt-handle {
  font-size: 14px; font-weight: 700;
  margin-bottom: 6px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.tiktok-card .tt-caption {
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 8px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.tiktok-card .tt-music {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.tiktok-card .tt-music i { animation: spin 4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tiktok-card .tt-osc {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-weight: 800;
  font-size: 22px;
  padding: 8px 14px;
  border-radius: 6px;
  text-align: center;
  letter-spacing: 0.01em;
  max-width: 80%;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
  z-index: 2;
  border: 2px solid rgba(255,255,255,0.15);
}
.tiktok-card .tt-extract-btn {
  position: absolute;
  top: 14px; right: 12px;
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  z-index: 3;
  backdrop-filter: blur(4px);
  font-family: inherit;
}
.tiktok-card .tt-extract-btn:hover { background: rgba(0,0,0,0.7); }

/* ── Instagram grid view ────────────────────────────────────────────────── */
.ig-profile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 16px;
}
.ig-profile-head {
  display: flex; gap: 28px; align-items: center;
  margin-bottom: 18px;
}
.ig-profile-avatar {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  padding: 3px;
  flex-shrink: 0;
}
.ig-profile-avatar > div {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--bg-card);
  padding: 2px;
}
.ig-profile-avatar > div > div {
  width: 100%; height: 100%; border-radius: 50%;
  background-size: cover; background-position: center;
}
.ig-profile-info { flex: 1; }
.ig-profile-info .ig-handle {
  font-size: 18px; font-weight: 600; margin-bottom: 8px;
}
.ig-profile-stats {
  display: flex; gap: 22px;
  font-size: 14px;
}
.ig-profile-stats span strong { font-weight: 700; }
.ig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
.ig-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  overflow: hidden;
  background-color: #000;
}
.ig-tile::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0,0,0,0); transition: background 0.2s;
}
.ig-tile:hover::after { background: rgba(0,0,0,0.3); }
.ig-tile .ig-tile-icon {
  position: absolute; top: 8px; right: 8px;
  color: #fff;
  font-size: 16px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  z-index: 2;
}
.ig-tile .ig-tile-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  color: #fff;
  display: none;
  align-items: center; justify-content: center;
  gap: 18px;
  font-weight: 700;
  font-size: 13px;
  z-index: 2;
}
.ig-tile:hover .ig-tile-overlay { display: flex; }

/* IG reel modal */
.ig-modal-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.ig-modal {
  background: #000;
  border-radius: 16px;
  display: flex;
  max-width: 920px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.ig-modal-video {
  flex: 1;
  background: #111;
  background-size: cover; background-position: center;
  aspect-ratio: 9 / 16;
  max-width: 420px;
  position: relative;
}
.ig-modal-video::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.7));
}
.ig-modal-video .ig-osc {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-weight: 800;
  font-size: 22px;
  padding: 8px 14px;
  border-radius: 6px;
  text-align: center;
  max-width: 80%;
}
.ig-modal-side {
  width: 360px;
  background: var(--bg-card);
  display: flex; flex-direction: column;
  color: var(--text);
}
.ig-modal-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.ig-modal-head .av {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #f09433, #bc1888);
  flex-shrink: 0;
}
.ig-modal-body {
  flex: 1; padding: 14px 16px; overflow-y: auto;
  font-size: 13.5px; line-height: 1.5;
}
.ig-modal-actions {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  display: flex; gap: 16px;
  font-size: 22px;
  color: var(--text);
}
.ig-modal-actions i { cursor: pointer; }
.ig-modal-actions .liked { color: #ed4956; }
.ig-modal-stats {
  padding: 4px 16px 12px;
  font-size: 13px; font-weight: 600;
}
.ig-modal-close {
  position: absolute; top: 18px; right: 18px;
  color: #fff;
  font-size: 26px;
  cursor: pointer;
  background: none; border: none;
  z-index: 201;
}

/* ── Phone-frame preview (Studio output) ───────────────────────────────── */
.phone-wrap {
  display: flex; justify-content: center; align-items: flex-start;
  gap: 22px;
  flex-wrap: wrap;
}
.phone {
  position: relative;
  width: 320px;
  height: 660px;
  background: #000;
  border-radius: 38px;
  padding: 12px 10px;
  box-shadow: 0 14px 50px rgba(0,0,0,0.25), inset 0 0 0 2px #1a1a1a;
}
.phone::before {
  content: '';
  position: absolute;
  top: 14px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 26px;
  background: #000;
  border-radius: 18px;
  z-index: 5;
}
.phone-screen {
  width: 100%; height: 100%;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  background: #111;
  background-size: cover; background-position: center;
}
.phone-screen::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 25%, transparent 60%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}

/* TikTok preview overrides */
.phone.tt .phone-screen { background-color: #000; }
.phone.tt .preview-status {
  position: absolute; top: 18px; left: 16px; right: 16px;
  display: flex; justify-content: space-between; font-size: 12px; color: #fff; font-weight: 600;
  z-index: 4;
}
.phone.tt .preview-tabs {
  position: absolute; top: 50px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 22px;
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.55);
  z-index: 4;
}
.phone.tt .preview-tabs .active { color: #fff; }
.phone.tt .preview-tabs .active::after {
  content: ''; display: block; width: 18px; height: 2px;
  background: #fff; margin: 4px auto 0; border-radius: 2px;
}
.phone.tt .preview-osc {
  position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.6);
  color: #fff; font-weight: 800;
  padding: 7px 11px;
  border-radius: 5px;
  font-size: 16px; max-width: 80%;
  text-align: center;
  z-index: 3;
}
.phone.tt .preview-side {
  position: absolute; right: 8px; bottom: 96px;
  display: flex; flex-direction: column; gap: 14px;
  z-index: 4; align-items: center;
}
.phone.tt .preview-side .av {
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid #fff;
  background: linear-gradient(135deg, #ff0050, #00f2ea);
}
.phone.tt .preview-side .ac {
  display: flex; flex-direction: column; align-items: center;
  color: #fff; font-size: 10px; font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.phone.tt .preview-side .ac i { font-size: 24px; margin-bottom: 3px; }
.phone.tt .preview-side .ac.liked i { color: #ff2d55; }
.phone.tt .preview-bottom {
  position: absolute; left: 14px; right: 60px; bottom: 18px;
  color: #fff; z-index: 4;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.phone.tt .preview-handle { font-size: 13px; font-weight: 700; margin-bottom: 5px; }
.phone.tt .preview-caption { font-size: 12px; line-height: 1.4; margin-bottom: 7px; }
.phone.tt .preview-music { font-size: 11px; display: flex; align-items: center; gap: 5px; }
.phone.tt .preview-music i { animation: spin 4s linear infinite; }

/* IG Reel preview overrides */
.phone.ig .preview-status {
  position: absolute; top: 18px; left: 16px; right: 16px;
  display: flex; justify-content: space-between; font-size: 12px; color: #fff; font-weight: 600;
  z-index: 4;
}
.phone.ig .preview-top {
  position: absolute; top: 50px; left: 0; right: 0;
  display: flex; justify-content: space-between;
  padding: 0 16px;
  font-size: 16px; font-weight: 700; color: #fff;
  z-index: 4;
}
.phone.ig .preview-top i { font-size: 22px; }
.phone.ig .preview-osc {
  position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.6);
  color: #fff; font-weight: 800;
  padding: 7px 11px;
  border-radius: 5px;
  font-size: 16px; max-width: 80%;
  text-align: center;
  z-index: 3;
}
.phone.ig .preview-side {
  position: absolute; right: 10px; bottom: 110px;
  display: flex; flex-direction: column; gap: 16px;
  z-index: 4; align-items: center;
}
.phone.ig .preview-side .ac {
  color: #fff; display: flex; flex-direction: column; align-items: center;
  font-size: 10px; font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.phone.ig .preview-side .ac i { font-size: 24px; margin-bottom: 3px; }
.phone.ig .preview-side .ac.liked i { color: #ed4956; }
.phone.ig .preview-bottom {
  position: absolute; left: 14px; right: 60px; bottom: 22px;
  color: #fff; z-index: 4;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.phone.ig .preview-handle-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.phone.ig .preview-handle-row .av {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #f09433, #bc1888);
}
.phone.ig .preview-handle { font-size: 13px; font-weight: 600; }
.phone.ig .preview-follow {
  margin-left: auto;
  border: 1px solid rgba(255,255,255,0.7);
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 11px; font-weight: 600;
}
.phone.ig .preview-caption { font-size: 11.5px; line-height: 1.4; margin-bottom: 6px; }
.phone.ig .preview-audio {
  font-size: 10.5px; display: flex; align-items: center; gap: 5px;
  background: rgba(0,0,0,0.4);
  padding: 3px 7px;
  border-radius: 4px;
  width: fit-content;
}

/* preview header label above each phone */
.phone-label {
  text-align: center; font-size: 12px; font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 10px;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.phone-label i { margin-right: 6px; }

/* Smaller mobile */
@media (max-width: 720px) {
  .ig-modal { flex-direction: column; max-width: 100%; }
  .ig-modal-video { max-width: 100%; aspect-ratio: 9 / 12; }
  .ig-modal-side { width: 100%; }
  .tiktok-card { width: 92vw; max-width: 360px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   USER-FRIENDLY UPGRADES — onboarding, tooltips, progress, mobile nav, etc.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Onboarding banner ──────────────────────────────────────────────────── */
.onboard {
  background: linear-gradient(135deg, var(--indigo-soft), var(--cyan-soft));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.onboard .onboard-text { flex: 1; min-width: 240px; }
.onboard h3 { margin: 0 0 4px; font-size: 17px; }
.onboard p { margin: 0; color: var(--text-muted); font-size: 13.5px; line-height: 1.55; }
.onboard .onboard-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Inline help / explainer chip ──────────────────────────────────────── */
.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--text-dim);
  font-size: 10px;
  cursor: help;
  margin-left: 4px;
  border: 1px solid var(--border);
  position: relative;
  font-weight: 600;
}
.help-icon:hover { background: var(--indigo-soft); color: var(--indigo); border-color: var(--indigo); }
.help-icon[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--bg-card);
  padding: 7px 11px;
  border-radius: 6px;
  font-size: 12px;
  white-space: normal;
  width: 240px;
  text-align: left;
  font-weight: 400;
  z-index: 100;
  box-shadow: var(--shadow-md);
  pointer-events: none;
  line-height: 1.45;
}
.help-icon[data-tooltip]:hover::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--text);
  z-index: 100;
}

/* ── Step progress bar (scrape→extract→generate) ───────────────────────── */
.steps {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 22px;
  overflow-x: auto;
}
.step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  flex-shrink: 0;
}
.step-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  border: 2px solid var(--border);
  flex-shrink: 0;
  transition: all 0.2s;
}
.step.done .step-num {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.step.active .step-num {
  background: var(--indigo);
  color: #fff;
  border-color: var(--indigo);
  box-shadow: 0 0 0 4px var(--indigo-soft);
}
.step-label { font-size: 13px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.step.done .step-label,
.step.active .step-label { color: var(--text); }
.step-arrow { color: var(--text-dim); margin: 0 8px; font-size: 12px; flex-shrink: 0; }
.step.done .step-arrow { color: var(--green); }

/* ── Loading spinner ───────────────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
}
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.btn .spinner { margin-right: 6px; }

/* ── Progress bar (extracting all videos) ──────────────────────────────── */
.progress-wrap {
  background: var(--bg-card);
  border: 1px solid var(--indigo);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.progress-wrap .progress-info { flex: 1; }
.progress-wrap .progress-title { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.progress-wrap .progress-bar {
  height: 6px;
  background: var(--bg-soft);
  border-radius: 99px;
  overflow: hidden;
}
.progress-wrap .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--indigo), var(--cyan));
  border-radius: 99px;
  transition: width 0.3s;
}
.progress-wrap .progress-pct {
  font-size: 22px;
  font-weight: 700;
  color: var(--indigo);
  font-variant-numeric: tabular-nums;
  min-width: 60px;
  text-align: right;
}

/* ── Search input with icon ────────────────────────────────────────────── */
.search-wrap {
  position: relative;
  max-width: 360px;
  margin: 0 auto 18px;
}
.search-wrap i.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  font-size: 14px;
  pointer-events: none;
}
.search-wrap input {
  width: 100%;
  padding: 11px 14px 11px 40px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}
.search-wrap input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-soft); }
.search-wrap .search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px;
  font-size: 14px;
}
.search-wrap .search-clear:hover { color: var(--text); }

/* ── Sticky next-action CTA (bottom right) ─────────────────────────────── */
.next-cta {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 90;
  max-width: 380px;
  animation: slideUp 0.3s ease-out;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.next-cta .next-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--indigo-soft);
  color: var(--indigo);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.next-cta .next-text { flex: 1; min-width: 0; }
.next-cta .next-title { font-size: 13.5px; font-weight: 600; margin-bottom: 2px; }
.next-cta .next-desc { font-size: 12px; color: var(--text-muted); }
.next-cta .next-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
}

/* ── Mobile hamburger nav ──────────────────────────────────────────────── */
.mobile-toggle { display: none; }
@media (max-width: 820px) {
  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 14px 20px;
    gap: 4px;
    box-shadow: var(--shadow-md);
  }
  .nav-links.open .nav-link {
    padding: 12px 14px;
    border-radius: 8px;
  }
  .mobile-toggle { display: inline-flex; }
  .next-cta { left: 16px; right: 16px; max-width: none; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
}

/* ── Pattern detail modal ──────────────────────────────────────────────── */
.modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
}
.modal {
  background: var(--bg-card);
  border-radius: var(--radius);
  max-width: 600px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  animation: modalIn 0.18s ease-out;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
.modal-head {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.modal-body { padding: 22px 24px; }
.modal-foot {
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.modal-close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
}
.modal-close:hover { color: var(--text); }

/* ── Field hint ────────────────────────────────────────────────────────── */
.hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 5px;
  line-height: 1.4;
}
.hint i { margin-right: 4px; }
.hint.error { color: var(--red); }

/* ── Quick-action chips ────────────────────────────────────────────────── */
.quick-chips {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.quick-chips .qc {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  font-family: inherit;
  box-shadow: var(--shadow-xs);
}
.quick-chips .qc:hover { background: var(--indigo-soft); color: var(--indigo); border-color: var(--indigo); transform: translateY(-1px); }
.quick-chips .qc:active { transform: translateY(0); }

/* ── Copy button ───────────────────────────────────────────────────────── */
.copy-btn {
  position: relative;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-muted);
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s;
}
.copy-btn:hover { background: var(--indigo-soft); color: var(--indigo); border-color: var(--indigo); }
.copy-btn.copied { background: var(--green-soft); color: var(--green); border-color: var(--green); }

/* ── Keyboard shortcut hint ────────────────────────────────────────────── */
kbd {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
}

/* ── Empty state with CTA ──────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 64px 24px;
  background: var(--bg-card);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.empty-state::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(400px 200px at 50% 0%, var(--indigo-soft), transparent 70%);
  opacity: .55;
  pointer-events: none;
}
.empty-state > * { position: relative; }
.empty-state .empty-icon,
.empty-state i.empty-icon {
  font-size: 32px;
  color: var(--indigo);
  margin: 0 auto 16px;
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 64px; height: 64px;
  border-radius: 18px;
  background: var(--indigo-soft);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--indigo-soft) 50%, transparent);
}
.empty-state h3, .empty-state h4 { font-size: 18px; margin: 0 0 8px; color: var(--text); font-weight: 700; letter-spacing: -.02em; }
.empty-state p { font-size: 14px; color: var(--text-muted); max-width: 420px; margin: 0 auto 18px; line-height: 1.6; }
.empty-card {
  text-align: center;
  padding: 44px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
.empty-card i { font-size: 28px; color: var(--indigo); margin-bottom: 12px; display: block; }
.empty-card h3 { font-size: 16px; margin: 0 0 6px; font-weight: 700; }
.empty-card p { font-size: 13.5px; color: var(--text-muted); max-width: 360px; margin: 0 auto 14px; }

/* ── Validation states ─────────────────────────────────────────────────── */
.input.invalid { border-color: var(--red); box-shadow: 0 0 0 3px rgba(239,68,68,0.1); }
.input.valid { border-color: var(--green); }

/* ── Skeleton loader ───────────────────────────────────────────────────── */
@keyframes shimmerBg {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--bg-soft) 25%, var(--bg-card) 50%, var(--bg-soft) 75%);
  background-size: 200% 100%;
  animation: shimmerBg 1.5s infinite;
  border-radius: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VIDEO RENDER + IMAGE SCRAPE UI
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Render card (Studio) ──────────────────────────────────────────────── */
.render-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; background: var(--bg-card); }
.render-card .render-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.render-card h3 { margin: 0; font-size: 16px; }
.render-card .provider-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 600; background: var(--bg-soft); color: var(--text-muted); border: 1px solid var(--border); }
.render-card .provider-pill.live { background: var(--green-soft); color: var(--green); border-color: var(--green); }
.render-card .provider-pill.mock { background: var(--orange-soft); color: var(--orange); border-color: var(--orange); }

/* model grid (cards you can click) */
.model-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
.model-card { padding: 14px; border: 1.5px solid var(--border); border-radius: 10px; cursor: pointer; transition: all 0.15s; background: var(--bg-card); }
.model-card:hover { border-color: var(--indigo); }
.model-card.selected { border-color: var(--indigo); background: var(--indigo-soft); }
.model-card .model-name { font-weight: 600; font-size: 14px; margin-bottom: 3px; display: flex; align-items: center; gap: 6px; }
.model-card .model-tag { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: var(--bg-soft); color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.model-card.selected .model-tag { background: var(--indigo); color: #fff; }
.model-card .model-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.model-card .model-cost { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--orange); }

/* segmented sub-controls */
.seg { display: inline-flex; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; padding: 3px; gap: 2px; }
.seg button { padding: 6px 12px; font-size: 12.5px; font-weight: 500; border: none; background: transparent; color: var(--text-muted); border-radius: 5px; cursor: pointer; font-family: inherit; }
.seg button:hover { color: var(--text); }
.seg button.active { background: var(--bg-card); color: var(--text); box-shadow: var(--shadow-sm); }

/* cost banner */
.cost-banner { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; font-size: 13px; }
.cost-banner .cost-amount { font-size: 18px; font-weight: 700; color: var(--orange); font-variant-numeric: tabular-nums; }
.cost-banner .cost-amount.free { color: var(--green); }

/* ref image picker */
.ref-picker { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ref-thumb { width: 56px; height: 56px; border-radius: 8px; background-size: cover; background-position: center; border: 2px solid var(--border); cursor: pointer; flex-shrink: 0; position: relative; }
.ref-thumb:hover { border-color: var(--indigo); }
.ref-thumb.selected { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-soft); }
.ref-thumb.selected::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: -6px; right: -6px; background: var(--indigo); color: #fff; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; }

/* render result video player */
.render-result { margin-top: 18px; padding: 18px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; }
.render-result video { width: 100%; max-width: 360px; border-radius: 10px; background: #000; display: block; margin: 0 auto; }
.render-result .render-meta { margin-top: 12px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; font-size: 12px; color: var(--text-muted); }

/* phone screen with embedded video */
.phone-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

/* ── Renders gallery view ──────────────────────────────────────────────── */
.render-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.render-tile { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: all 0.15s; }
.render-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.render-tile .tile-video { width: 100%; aspect-ratio: 9/16; background: #000; position: relative; overflow: hidden; }
.render-tile .tile-video video, .render-tile .tile-video img { width: 100%; height: 100%; object-fit: cover; }
.render-tile .tile-status { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 600; backdrop-filter: blur(8px); background: rgba(0,0,0,0.55); color: #fff; }
.render-tile .tile-model { position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 600; backdrop-filter: blur(8px); background: rgba(0,0,0,0.55); color: #fff; }
.render-tile .tile-body { padding: 14px; }
.render-tile .tile-prompt { font-size: 13px; line-height: 1.45; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; }
.render-tile .tile-meta { display: flex; gap: 10px; font-size: 11.5px; color: var(--text-muted); flex-wrap: wrap; }

/* ── Image carousel grid (Scrape: pictures) ────────────────────────────── */
.img-post-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: all 0.15s; }
.img-post-card:hover { box-shadow: var(--shadow-md); }
.img-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; aspect-ratio: 4/5; background: #000; }
.img-carousel::-webkit-scrollbar { height: 4px; }
.img-carousel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.img-carousel img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.img-post-card .ip-body { padding: 14px; }
.img-post-card .ip-handle { font-weight: 600; font-size: 13.5px; margin-bottom: 4px; }
.img-post-card .ip-caption { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; }
.img-post-card .ip-meta { display: flex; gap: 10px; font-size: 11.5px; color: var(--text-muted); flex-wrap: wrap; }
.img-post-card .ip-count { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.65); color: #fff; padding: 3px 9px; border-radius: 99px; font-size: 11px; font-weight: 600; backdrop-filter: blur(6px); }
.img-post-wrap { position: relative; }

/* budget badge */
.budget-bar { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 99px; font-size: 12px; }
.budget-bar .b-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.budget-bar .b-cost { color: var(--orange); font-weight: 600; }

@media (max-width: 720px) {
  .model-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════

/* ═══════════════════════════════════════════════════════════════════════════
   iOS 18 — APPLE LIQUID GLASS DESIGN SYSTEM
   Designed to feel like a native flagship iOS app: SF typography, frosted
   navigation, Dynamic Island, large titles, grouped lists, segmented
   controls, gel buttons, soft depth, and spring animations.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── iOS System Colors (light) ──────────────────────────────────────── */
  --ios-blue:      #007aff;
  --ios-indigo:    #5856d6;
  --ios-purple:    #af52de;
  --ios-pink:      #ff2d55;
  --ios-red:       #ff3b30;
  --ios-orange:    #ff9500;
  --ios-yellow:    #ffcc00;
  --ios-green:     #34c759;
  --ios-mint:      #00c7be;
  --ios-teal:      #30b0c7;
  --ios-cyan:      #32ade6;
  --ios-brown:     #ac8e68;
  --ios-gray:      #8e8e93;
  --ios-gray2:     #aeaeb2;
  --ios-gray3:     #c7c7cc;
  --ios-gray4:     #d1d1d6;
  --ios-gray5:     #e5e5ea;
  --ios-gray6:     #f2f2f7;

  /* ── Material / Glass tokens ───────────────────────────────────────── */
  --mat-ultrathin: rgba(255, 255, 255, 0.42);
  --mat-thin:      rgba(255, 255, 255, 0.62);
  --mat-regular:   rgba(255, 255, 255, 0.78);
  --mat-thick:     rgba(255, 255, 255, 0.88);
  --mat-chrome:    rgba(245, 245, 250, 0.72);

  --hair-light:    rgba(255, 255, 255, 0.85);
  --hair-edge:     rgba(0, 0, 0, 0.08);
  --hair-divider:  rgba(60, 60, 67, 0.18);

  --blur-sm:       saturate(180%) blur(12px);
  --blur-md:       saturate(180%) blur(22px);
  --blur-lg:       saturate(190%) blur(40px);

  --depth-1:       0 1px 0 rgba(255,255,255,0.85) inset, 0 -0.5px 0 rgba(0,0,0,0.04) inset, 0 4px 16px rgba(31, 38, 135, 0.08);
  --depth-2:       0 1px 0 rgba(255,255,255,0.9) inset, 0 -0.5px 0 rgba(0,0,0,0.06) inset, 0 12px 36px rgba(31, 38, 135, 0.14);
  --depth-3:       0 1px 0 rgba(255,255,255,0.95) inset, 0 -0.5px 0 rgba(0,0,0,0.08) inset, 0 28px 80px rgba(31, 38, 135, 0.22);

  /* ── iOS Radii ──────────────────────────────────────────────────────── */
  --r-xs:   8px;
  --r-sm:   12px;
  --r-md:   18px;
  --r-lg:   22px;
  --r-xl:   28px;
  --r-2xl:  36px;
  --r-pill: 999px;

  /* ── Typography ─────────────────────────────────────────────────────── */
  --sf-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  --sf-text:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --sf-mono:    ui-monospace, "SF Mono", Menlo, monospace;
  --sf-rounded: -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Inter", system-ui, sans-serif;

  /* ── Springs ────────────────────────────────────────────────────────── */
  --spring:        cubic-bezier(0.34, 1.56, 0.64, 1);
  --spring-soft:   cubic-bezier(0.2, 0.9, 0.3, 1.0);
  --spring-snap:   cubic-bezier(0.4, 1.4, 0.6, 1);

  /* Re-tint legacy palette so existing components inherit iOS hues */
  --indigo:       var(--ios-blue);
  --indigo-soft:  rgba(0, 122, 255, 0.12);
  --cyan:         var(--ios-cyan);
  --cyan-soft:    rgba(50, 173, 230, 0.14);
  --orange:       var(--ios-orange);
  --orange-soft:  rgba(255, 149, 0, 0.14);
  --green:        var(--ios-green);
  --green-soft:   rgba(52, 199, 89, 0.14);
  --red:          var(--ios-red);
  --border:       rgba(60, 60, 67, 0.14);
  --border-strong: rgba(60, 60, 67, 0.24);
}

[data-theme="dark"] {
  --ios-gray6:     #1c1c1e;
  --ios-gray5:     #2c2c2e;
  --ios-gray4:     #3a3a3c;
  --ios-gray3:     #48484a;

  --mat-ultrathin: rgba(28, 28, 30, 0.45);
  --mat-thin:      rgba(28, 28, 30, 0.65);
  --mat-regular:   rgba(36, 36, 40, 0.78);
  --mat-thick:     rgba(40, 40, 45, 0.88);
  --mat-chrome:    rgba(20, 20, 24, 0.72);

  --hair-light:    rgba(255, 255, 255, 0.10);
  --hair-edge:     rgba(255, 255, 255, 0.06);
  --hair-divider:  rgba(84, 84, 88, 0.5);

  --depth-1:       0 1px 0 rgba(255,255,255,0.07) inset, 0 -0.5px 0 rgba(0,0,0,0.5) inset, 0 4px 16px rgba(0,0,0,0.4);
  --depth-2:       0 1px 0 rgba(255,255,255,0.10) inset, 0 -0.5px 0 rgba(0,0,0,0.5) inset, 0 12px 36px rgba(0,0,0,0.55);
  --depth-3:       0 1px 0 rgba(255,255,255,0.12) inset, 0 -0.5px 0 rgba(0,0,0,0.6) inset, 0 28px 80px rgba(0,0,0,0.7);

  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
}

/* ── BASE TYPOGRAPHY ──────────────────────────────────────────────── */
html, body {
  font-family: var(--sf-text);
  letter-spacing: -0.014em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11', 'kern';
}
h1, h2, h3, h4, .stat-num, .hero h1, .section-head h2 {
  font-family: var(--sf-display);
  letter-spacing: -0.028em;
  font-weight: 700;
}

/* ── AURORA WALLPAPER ─────────────────────────────────────────────── */
body {
  background:
    radial-gradient(60vw 50vh at 5% -5%,   rgba(0, 122, 255, 0.55),  transparent 55%),
    radial-gradient(55vw 55vh at 100% 0%,  rgba(175, 82, 222, 0.50), transparent 55%),
    radial-gradient(70vw 70vh at 50% 110%, rgba(50, 173, 230, 0.50), transparent 60%),
    radial-gradient(50vw 60vh at -5% 95%,  rgba(255, 45, 85, 0.38),  transparent 55%),
    radial-gradient(60vw 50vh at 105% 85%, rgba(52, 199, 89, 0.30),  transparent 55%),
    linear-gradient(180deg, #f3f5fb, #ecf0f8 55%, #e6ebf5);
  background-attachment: fixed;
  min-height: 100vh;
  color: #1c1c1e;
}
[data-theme="dark"] body {
  background:
    radial-gradient(60vw 50vh at 5% -5%,   rgba(88, 86, 214, 0.65),  transparent 55%),
    radial-gradient(55vw 55vh at 100% 0%,  rgba(175, 82, 222, 0.45), transparent 55%),
    radial-gradient(70vw 70vh at 50% 110%, rgba(0, 122, 255, 0.45),  transparent 60%),
    radial-gradient(50vw 60vh at -5% 95%,  rgba(255, 45, 85, 0.30),  transparent 55%),
    radial-gradient(60vw 50vh at 105% 85%, rgba(52, 199, 89, 0.20),  transparent 55%),
    linear-gradient(180deg, #07091a, #0a0d1f 55%, #06081a);
  background-attachment: fixed;
  color: #f2f2f7;
}

/* Floating liquid blobs (subtle) */
body::before, body::after {
  content: '';
  position: fixed; pointer-events: none; z-index: 0;
  width: 56vw; height: 56vw; max-width: 720px; max-height: 720px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  animation: blobDrift 28s ease-in-out infinite;
}
body::before {
  background: radial-gradient(circle, var(--ios-blue), transparent 65%);
  top: -22vh; left: -18vw;
}
body::after {
  background: radial-gradient(circle, var(--ios-purple), transparent 65%);
  bottom: -22vh; right: -18vw;
  animation-delay: -14s;
}
@keyframes blobDrift {
  0%, 100% { transform: translate(0,0) scale(1) rotate(0deg); }
  33%      { transform: translate(7vw, 5vh) scale(1.08) rotate(8deg); }
  66%      { transform: translate(-5vw, 9vh) scale(0.95) rotate(-6deg); }
}

.container, .nav, .nav-inner, .section, .hero, footer,
.toast-wrap, .modal-bg, .ig-modal, .ig-modal-bg {
  position: relative; z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════════════
   NAVIGATION — Floating glass capsule with Dynamic Island
   ═══════════════════════════════════════════════════════════════════════ */
.nav {
  background: transparent;
  border: 0;
  padding: 14px 16px 0;
  position: sticky; top: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.nav-inner {
  background: var(--mat-thin);
  -webkit-backdrop-filter: var(--blur-md);
  backdrop-filter: var(--blur-md);
  border: 0.5px solid var(--hair-light);
  border-radius: var(--r-pill);
  padding: 9px 9px 9px 22px;
  box-shadow: var(--depth-2);
  max-width: 1120px;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  isolation: isolate;
}
.nav-inner::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0) 38%);
  z-index: -1;
}
[data-theme="dark"] .nav-inner::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 40%);
}

/* Brand pill */
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sf-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.024em;
  color: var(--text);
  cursor: pointer;
}
.brand .brand-mark {
  width: 28px; height: 28px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--ios-blue), var(--ios-purple) 60%, var(--ios-pink));
  border: 0;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 122, 255, 0.35), inset 0 0.5px 0 rgba(255,255,255,0.7);
}
.brand .brand-mark::after {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 0 10px rgba(255,255,255,0.95);
}

.nav-links {
  display: flex; gap: 2px; align-items: center;
  background: rgba(120, 120, 128, 0.16);
  border-radius: var(--r-pill);
  padding: 4px;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  flex: 1;
  min-width: 0;
}
[data-theme="dark"] .nav-links { background: rgba(255, 255, 255, 0.06); }

.nav-link {
  position: relative;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-family: var(--sf-text);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
  transition: color 0.22s var(--spring-soft), transform 0.22s var(--spring);
  background: transparent;
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-link:hover { color: var(--ios-blue); }
.nav-link.active {
  background: rgba(255,255,255,0.95);
  color: #1c1c1e;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 14px rgba(0,0,0,0.06);
  font-weight: 600;
}
[data-theme="dark"] .nav-link.active {
  background: rgba(120, 120, 128, 0.55);
  color: #fff;
}
.nav-link.active.accent-cyan { color: #006c8d; }
.nav-link.active.accent-orange { color: #b66400; }
[data-theme="dark"] .nav-link.active.accent-cyan { color: var(--ios-cyan); }
[data-theme="dark"] .nav-link.active.accent-orange { color: var(--ios-orange); }
.nav-link:active:not(.active) { transform: scale(0.96); }

.nav-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* ── Nav group dropdowns ─────────────────────────────────────────── */
.nav-group {
  position: relative;
}
.nav-group-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-family: var(--sf-text);
  font-weight: 500;
  font-size: 13.5px;
  color: var(--text);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.nav-group-btn:hover { color: var(--ios-blue); }
.nav-group-btn.active {
  background: rgba(255,255,255,0.95);
  color: #1c1c1e;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 14px rgba(0,0,0,0.06);
}
[data-theme="dark"] .nav-group-btn.active {
  background: rgba(120, 120, 128, 0.55);
  color: #fff;
}
.nav-chevron {
  font-size: 9px;
  opacity: 0.5;
  transition: transform 0.2s;
}
.nav-group:hover .nav-chevron { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--mat-thick, rgba(255,255,255,0.92));
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  border: 0.5px solid var(--hair-light);
  border-radius: 14px;
  padding: 6px;
  min-width: 180px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  transition: opacity 0.18s, transform 0.18s var(--ease-out);
  z-index: 2000;
}
.nav-group:hover .nav-dropdown {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
[data-theme="dark"] .nav-dropdown {
  background: rgba(30, 30, 40, 0.92);
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.nav-dropdown .nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.nav-dropdown .nav-link:hover {
  background: rgba(0, 122, 255, 0.08);
  color: var(--ios-blue);
}
.nav-dropdown .nav-link.active {
  background: rgba(0, 122, 255, 0.12);
  color: var(--ios-blue);
  font-weight: 600;
  box-shadow: none;
}
[data-theme="dark"] .nav-dropdown .nav-link:hover {
  background: rgba(0, 122, 255, 0.15);
}
[data-theme="dark"] .nav-dropdown .nav-link.active {
  background: rgba(0, 122, 255, 0.2);
  color: #64b5f6;
}
.nav-dropdown .nav-link i {
  width: 18px;
  text-align: center;
  font-size: 13px;
  opacity: 0.7;
}

/* Mobile: flatten dropdowns */
@media (max-width: 820px) {
  .nav-group { width: 100%; }
  .nav-group-btn { display: none; }
  .nav-dropdown {
    position: static;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    padding: 0;
    min-width: 0;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2px;
  }
  .nav-dropdown .nav-link {
    padding: 8px 12px;
    border-radius: var(--r-pill);
  }
}

.icon-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 0.5px solid var(--hair-light);
  background: rgba(255,255,255,0.7);
  color: var(--text);
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform 0.22s var(--spring), background 0.22s, box-shadow 0.22s;
  box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset, 0 2px 8px rgba(0,0,0,0.04);
}
[data-theme="dark"] .icon-btn {
  background: rgba(60,60,67,0.55);
  border-color: rgba(255,255,255,0.12);
  color: #f2f2f7;
}
.icon-btn:hover { transform: translateY(-1px) scale(1.05); }
.icon-btn:active { transform: scale(0.92); }

/* ═══════════════════════════════════════════════════════════════════════
   HERO — Apple keynote large title
   ═══════════════════════════════════════════════════════════════════════ */
.hero {
  text-align: center;
  padding: 88px 20px 56px;
  position: relative;
  overflow: visible;
}
.hero::before { display: none; }
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  background: var(--mat-thin);
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
  border: 0.5px solid var(--hair-light);
  border-radius: var(--r-pill);
  font-family: var(--sf-text);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ios-blue);
  margin-bottom: 24px;
  box-shadow: var(--depth-1);
  text-transform: none;
}
.hero .eyebrow.cyan { color: var(--ios-teal); }
.hero .eyebrow.orange { color: var(--ios-orange); }
.hero .eyebrow.green { color: var(--ios-green); }

.hero h1 {
  font-family: var(--sf-display);
  font-size: clamp(42px, 6.4vw, 76px);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.045em;
  margin: 0 0 22px;
  color: var(--text);
}
.hero h1 .grad {
  background: linear-gradient(120deg, var(--ios-blue) 0%, var(--ios-purple) 45%, var(--ios-pink) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero p {
  font-family: var(--sf-text);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 auto 32px;
  font-weight: 400;
  letter-spacing: -0.012em;
}
.hero-cta { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ═══════════════════════════════════════════════════════════════════════
   BUTTONS — iOS gel
   ═══════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sf-text);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.014em;
  border-radius: var(--r-pill);
  padding: 13px 22px;
  border: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.22s var(--spring-snap), box-shadow 0.22s, filter 0.22s;
  isolation: isolate;
}
.btn::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.32), rgba(255,255,255,0) 45%);
  pointer-events: none;
  z-index: 1;
}
.btn > * { position: relative; z-index: 2; }
.btn:active:not(:disabled) { transform: scale(0.96); filter: brightness(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-sm { padding: 9px 16px; font-size: 13.5px; }

.btn-primary {
  background: linear-gradient(180deg, #2a92ff 0%, #007aff 100%);
  color: #fff;
  box-shadow: 0 8px 22px rgba(0, 122, 255, 0.42), inset 0 1px 0 rgba(255,255,255,0.55);
}
.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(0, 122, 255, 0.55), inset 0 1px 0 rgba(255,255,255,0.6);
}
.btn-cyan {
  background: linear-gradient(180deg, #5cd0f0, #32ade6);
  color: #fff;
  box-shadow: 0 8px 22px rgba(50, 173, 230, 0.45), inset 0 1px 0 rgba(255,255,255,0.55);
}
.btn-cyan:hover:not(:disabled) { transform: translateY(-1px); }
.btn-orange {
  background: linear-gradient(180deg, #ffae33, #ff9500);
  color: #fff;
  box-shadow: 0 8px 22px rgba(255, 149, 0, 0.42), inset 0 1px 0 rgba(255,255,255,0.55);
}
.btn-orange:hover:not(:disabled) { transform: translateY(-1px); }
.btn-ghost {
  background: var(--mat-thin);
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
  border: 0.5px solid var(--hair-light);
  color: var(--text);
  box-shadow: var(--depth-1);
}
.btn-ghost:hover { background: var(--mat-regular); transform: translateY(-1px); }

/* ═══════════════════════════════════════════════════════════════════════
   CARDS — Frosted glass
   ═══════════════════════════════════════════════════════════════════════ */
.card,
.render-card,
.empty-state,
.workflow,
.cost-banner,
.progress-wrap,
.modal,
.ig-modal-inner,
.onboard,
.next-cta,
.steps,
.stat,
.vid-card,
.render-tile,
.img-post-card,
.pattern-card,
.feature-card {
  background: var(--mat-regular) !important;
  -webkit-backdrop-filter: var(--blur-md);
  backdrop-filter: var(--blur-md);
  border: 0.5px solid var(--hair-light) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--depth-1);
  position: relative;
  isolation: isolate;
}
.card { padding: 24px; }
.card::before,
.render-card::before,
.stat::before,
.steps::before,
.onboard::before,
.next-cta::before,
.feature-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0) 38%);
  z-index: -1;
}
[data-theme="dark"] .card::before,
[data-theme="dark"] .render-card::before,
[data-theme="dark"] .stat::before,
[data-theme="dark"] .steps::before,
[data-theme="dark"] .onboard::before,
[data-theme="dark"] .next-cta::before,
[data-theme="dark"] .feature-card::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 40%);
}

.card-hover {
  transition: transform 0.32s var(--spring), box-shadow 0.32s, border-color 0.32s;
}
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--depth-2);
  border-color: rgba(255,255,255,0.95) !important;
}
[data-theme="dark"] .card-hover:hover {
  border-color: rgba(255,255,255,0.22) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   STATS — Apple Health / Fitness card vibe
   ═══════════════════════════════════════════════════════════════════════ */
.stat {
  padding: 22px;
  transition: transform 0.32s var(--spring);
}
.stat:hover { transform: translateY(-3px); }
.stat-icon {
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
  margin-bottom: 14px;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.6);
}
.stat-num {
  font-family: var(--sf-rounded);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.035em;
  background: linear-gradient(135deg, var(--ios-blue), var(--ios-purple) 80%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.05;
  font-feature-settings: 'tnum';
}
.stat-label {
  font-family: var(--sf-text);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  margin-top: 6px;
  letter-spacing: -0.012em;
}
.stat-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  letter-spacing: -0.005em;
}

/* ═══════════════════════════════════════════════════════════════════════
   STEP PROGRESS — iOS-style track
   ═══════════════════════════════════════════════════════════════════════ */
.steps {
  padding: 20px 26px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.step {
  display: inline-flex; align-items: center; gap: 12px;
  cursor: pointer;
  transition: transform 0.22s var(--spring);
}
.step:active { transform: scale(0.97); }
.step-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sf-rounded);
  font-weight: 700;
  font-size: 14px;
  background: rgba(120,120,128,0.18);
  color: var(--text-muted);
  border: 0;
  transition: all 0.32s var(--spring);
}
.step.done .step-num {
  background: linear-gradient(180deg, #4ad968, var(--ios-green));
  color: #fff;
  box-shadow: 0 4px 12px rgba(52,199,89,0.45), inset 0 0.5px 0 rgba(255,255,255,0.55);
}
.step.active .step-num {
  background: linear-gradient(180deg, #2a92ff, var(--ios-blue));
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,122,255,0.5), inset 0 0.5px 0 rgba(255,255,255,0.55);
  animation: pulseRing 2.4s ease-in-out infinite;
}
@keyframes pulseRing {
  0%, 100% { box-shadow: 0 4px 14px rgba(0,122,255,0.5), inset 0 0.5px 0 rgba(255,255,255,0.55), 0 0 0 0 rgba(0,122,255,0.5); }
  50%      { box-shadow: 0 4px 14px rgba(0,122,255,0.6), inset 0 0.5px 0 rgba(255,255,255,0.55), 0 0 0 10px rgba(0,122,255,0); }
}
.step-label {
  font-family: var(--sf-text);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.014em;
}
.step.done .step-label { color: var(--text-muted); }
.step-arrow { color: var(--text-dim); font-size: 11px; }

/* ═══════════════════════════════════════════════════════════════════════
   INPUTS / TEXTFIELDS
   ═══════════════════════════════════════════════════════════════════════ */
.input, select.input, textarea.input,
input[type="text"], input[type="number"], input[type="search"], textarea, select {
  background: var(--mat-thin);
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
  border: 0.5px solid var(--hair-light);
  border-radius: var(--r-md);
  padding: 13px 16px;
  font-family: var(--sf-text);
  font-size: 15px;
  letter-spacing: -0.014em;
  color: var(--text);
  transition: border-color 0.22s, box-shadow 0.22s, background 0.22s;
  box-shadow: var(--depth-1);
}
.input::placeholder, textarea::placeholder { color: var(--text-dim); }
.input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--ios-blue);
  box-shadow: 0 0 0 4px rgba(0,122,255,0.18), var(--depth-1);
  background: var(--mat-regular);
}

/* ═══════════════════════════════════════════════════════════════════════
   PILLS, EYEBROWS, TAGS
   ═══════════════════════════════════════════════════════════════════════ */
.eyebrow, .tag, .qc, .pill, .provider-pill, .budget-bar, .ip-count,
.workflow-chip, .pat-type {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--mat-thin) !important;
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
  border: 0.5px solid var(--hair-light) !important;
  border-radius: var(--r-pill) !important;
  font-family: var(--sf-text);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.005em;
  padding: 6px 12px;
  color: var(--text);
  box-shadow: var(--depth-1);
}
.eyebrow { font-size: 12.5px; padding: 7px 14px; }
.eyebrow.cyan  { color: var(--ios-teal) !important; }
.eyebrow.orange { color: var(--ios-orange) !important; }
.eyebrow.green { color: var(--ios-green) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   SEGMENTED CONTROL — iOS spec
   ═══════════════════════════════════════════════════════════════════════ */
.view-switch, .seg {
  display: inline-flex;
  background: rgba(120, 120, 128, 0.18);
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
  border: 0;
  border-radius: var(--r-sm);
  padding: 3px;
  gap: 0;
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.04);
}
[data-theme="dark"] .view-switch, [data-theme="dark"] .seg {
  background: rgba(255,255,255,0.06);
}
.view-switch button, .seg button {
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--sf-text);
  font-weight: 500;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 9px;
  cursor: pointer;
  transition: all 0.28s var(--spring-soft);
  letter-spacing: -0.012em;
}
.view-switch button.active, .seg button.active {
  background: rgba(255,255,255,0.96);
  color: #1c1c1e;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.06);
}
[data-theme="dark"] .view-switch button.active,
[data-theme="dark"] .seg button.active {
  background: rgba(120,120,128,0.55);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════
   PIPELINE — Replace boxy chevrons with iOS connected pills
   ═══════════════════════════════════════════════════════════════════════ */
.pipeline {
  background: var(--mat-thin);
  -webkit-backdrop-filter: var(--blur-md);
  backdrop-filter: var(--blur-md);
  border: 0.5px solid var(--hair-light);
  border-radius: var(--r-xl);
  box-shadow: var(--depth-1);
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  position: relative;
}
.pipeline::-webkit-scrollbar { display: none; }
.pipe-step {
  flex: 0 0 auto;
  text-align: center;
  padding: 12px 14px;
  border-radius: var(--r-md);
  min-width: 96px;
  transition: all 0.32s var(--spring);
}
.pipe-step:hover { transform: translateY(-2px); }
.pipe-step.active {
  background: rgba(0,122,255,0.10);
  border: 0.5px solid rgba(0,122,255,0.3);
}
.pipe-icon {
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--ios-blue), var(--ios-purple));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px;
  margin-bottom: 8px;
  box-shadow: 0 4px 12px rgba(0,122,255,0.35), inset 0 0.5px 0 rgba(255,255,255,0.5);
}
.pipe-step:nth-child(3) .pipe-icon { background: linear-gradient(135deg, var(--ios-cyan), var(--ios-teal)); box-shadow: 0 4px 12px rgba(50,173,230,0.4), inset 0 0.5px 0 rgba(255,255,255,0.5); }
.pipe-step:nth-child(5) .pipe-icon { background: linear-gradient(135deg, var(--ios-orange), var(--ios-yellow)); box-shadow: 0 4px 12px rgba(255,149,0,0.4), inset 0 0.5px 0 rgba(255,255,255,0.5); }
.pipe-step:nth-child(7) .pipe-icon { background: linear-gradient(135deg, var(--ios-purple), var(--ios-pink)); box-shadow: 0 4px 12px rgba(175,82,222,0.4), inset 0 0.5px 0 rgba(255,255,255,0.5); }
.pipe-step:nth-child(9) .pipe-icon { background: linear-gradient(135deg, var(--ios-green), var(--ios-mint)); box-shadow: 0 4px 12px rgba(52,199,89,0.4), inset 0 0.5px 0 rgba(255,255,255,0.5); }
.pipe-step:nth-child(11) .pipe-icon { background: linear-gradient(135deg, var(--ios-pink), var(--ios-red)); box-shadow: 0 4px 12px rgba(255,45,85,0.4), inset 0 0.5px 0 rgba(255,255,255,0.5); }
.pipe-title {
  font-family: var(--sf-text);
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  letter-spacing: -0.014em;
}
.pipe-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.pipe-arrow {
  color: var(--text-dim);
  font-size: 10px;
  flex: 0 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   FEATURE GRID
   ═══════════════════════════════════════════════════════════════════════ */
.card-row { display: flex; gap: 16px; align-items: flex-start; }
.card-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 19px;
  flex: 0 0 48px;
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.55);
  color: #fff;
}
.card-icon.indigo { background: linear-gradient(135deg, var(--ios-blue), var(--ios-indigo)); }
.card-icon.cyan   { background: linear-gradient(135deg, var(--ios-cyan), var(--ios-teal)); }
.card-icon.orange { background: linear-gradient(135deg, var(--ios-orange), var(--ios-yellow)); }
.card-icon.green  { background: linear-gradient(135deg, var(--ios-green), var(--ios-mint)); }
.card h3 {
  font-family: var(--sf-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.022em;
  margin: 0 0 6px;
}
.card p, .card .lead {
  font-family: var(--sf-text);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
  letter-spacing: -0.011em;
}

.workflow-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.workflow-chip {
  font-family: var(--sf-mono);
  font-size: 11px;
  padding: 4px 9px;
}

/* ═══════════════════════════════════════════════════════════════════════
   SECTION HEADERS — Apple keynote
   ═══════════════════════════════════════════════════════════════════════ */
.section-head { text-align: center; margin-bottom: 36px; }
.section-head h2 {
  font-family: var(--sf-display);
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 700;
  letter-spacing: -0.034em;
  margin: 16px 0 10px;
  color: var(--text);
}
.section-head h2 .grad {
  background: linear-gradient(120deg, var(--ios-blue), var(--ios-purple));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section-head h2 .grad-orange {
  background: linear-gradient(120deg, var(--ios-orange), var(--ios-pink));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section-head h2 .grad-cyan {
  background: linear-gradient(120deg, var(--ios-cyan), var(--ios-teal));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section-head p {
  font-size: 16px;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════
   PHONE FRAME — iPhone 15 Pro look
   ═══════════════════════════════════════════════════════════════════════ */
.phone {
  border-radius: 52px !important;
  background: linear-gradient(145deg, #232325, #0a0a0c) !important;
  box-shadow:
    0 40px 100px rgba(0,0,0,0.4),
    0 1px 0 rgba(255,255,255,0.22) inset,
    0 -1px 0 rgba(0,0,0,0.5) inset,
    0 0 0 2px rgba(60,60,67,0.5) inset !important;
  padding: 12px !important;
  position: relative;
  overflow: hidden;
}
.phone::after {
  content: '';
  position: absolute;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  width: 110px; height: 32px;
  background: #000;
  border-radius: 22px;
  z-index: 5;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}
.phone-screen {
  border-radius: 40px !important;
  overflow: hidden;
  position: relative;
}

/* ═══════════════════════════════════════════════════════════════════════
   TILES (videos, renders, image posts, patterns, IG)
   ═══════════════════════════════════════════════════════════════════════ */
.vid-card, .render-tile, .img-post-card, .pattern-card, .ig-tile {
  overflow: hidden;
  transition: transform 0.32s var(--spring), box-shadow 0.32s, border-color 0.32s;
}
.vid-card:hover, .render-tile:hover, .img-post-card:hover, .pattern-card:hover, .ig-tile:hover {
  transform: translateY(-3px) scale(1.005);
  box-shadow: var(--depth-2);
}

/* ═══════════════════════════════════════════════════════════════════════
   MODELS / RENDER UI
   ═══════════════════════════════════════════════════════════════════════ */
.model-card {
  background: var(--mat-thin);
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
  border: 0.5px solid var(--hair-light);
  border-radius: var(--r-md);
  padding: 16px;
  cursor: pointer;
  transition: all 0.28s var(--spring);
  position: relative;
  isolation: isolate;
}
.model-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0) 38%);
  pointer-events: none;
  z-index: -1;
}
.model-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0,122,255,0.35);
  box-shadow: var(--depth-1);
}
.model-card.selected {
  background: linear-gradient(180deg, rgba(0,122,255,0.18), rgba(0,122,255,0.10));
  border: 1px solid var(--ios-blue);
  box-shadow: 0 8px 26px rgba(0,122,255,0.3), inset 0 0.5px 0 rgba(255,255,255,0.55);
}

/* ═══════════════════════════════════════════════════════════════════════
   COPY BUTTON, COPYABLE ROWS
   ═══════════════════════════════════════════════════════════════════════ */
.copy-btn {
  background: var(--mat-thin);
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
  border: 0.5px solid var(--hair-light);
  border-radius: var(--r-pill);
  padding: 7px 14px;
  font-family: var(--sf-text);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all 0.22s var(--spring);
  box-shadow: var(--depth-1);
}
.copy-btn:hover { transform: translateY(-1px); background: var(--mat-regular); }
.copy-btn.copied { background: rgba(52,199,89,0.16); color: var(--ios-green); border-color: rgba(52,199,89,0.3); }

/* ═══════════════════════════════════════════════════════════════════════
   TOAST — Like iOS notification banner
   ═══════════════════════════════════════════════════════════════════════ */
.toast-wrap { z-index: 9999; }
.toast {
  background: var(--mat-thick) !important;
  -webkit-backdrop-filter: saturate(190%) blur(36px);
  backdrop-filter: saturate(190%) blur(36px);
  border: 0.5px solid var(--hair-light) !important;
  border-radius: var(--r-pill) !important;
  padding: 14px 22px !important;
  font-family: var(--sf-text);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.014em;
  box-shadow: var(--depth-3);
  animation: toastSlide 0.42s var(--spring);
}
@keyframes toastSlide {
  from { transform: translateY(-22px) scale(0.94); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MODALS — iOS sheet style
   ═══════════════════════════════════════════════════════════════════════ */
.modal-bg, .ig-modal-bg, .ig-modal {
  background: rgba(0,0,0,0.32) !important;
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
  animation: bgFade 0.32s ease;
}
@keyframes bgFade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--mat-thick) !important;
  -webkit-backdrop-filter: saturate(190%) blur(40px);
  backdrop-filter: saturate(190%) blur(40px);
  border-radius: var(--r-xl) !important;
  border: 0.5px solid var(--hair-light) !important;
  box-shadow: var(--depth-3);
  animation: sheetUp 0.42s var(--spring);
}
@keyframes sheetUp {
  from { transform: translateY(34px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.modal-head { padding: 22px 24px 12px; border-bottom: 0.5px solid var(--hair-divider); display: flex; align-items: flex-start; gap: 14px; }
.modal-body { padding: 18px 24px; }
.modal-foot { padding: 12px 22px 22px; display: flex; gap: 10px; justify-content: flex-end; border-top: 0.5px solid var(--hair-divider); }
.modal-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(120, 120, 128, 0.22);
  border: 0; color: var(--text-muted);
  cursor: pointer;
  font-size: 12px;
  transition: all 0.22s var(--spring);
}
.modal-close:hover { background: rgba(120, 120, 128, 0.35); transform: scale(1.05); }

/* ═══════════════════════════════════════════════════════════════════════
   FOOTER — Floating glass plate
   ═══════════════════════════════════════════════════════════════════════ */
.footer, footer {
  background: var(--mat-thin);
  -webkit-backdrop-filter: var(--blur-md);
  backdrop-filter: var(--blur-md);
  border: 0.5px solid var(--hair-light);
  border-radius: var(--r-xl);
  margin: 32px auto 24px;
  max-width: 1100px;
  padding: 28px 32px;
  box-shadow: var(--depth-1);
  font-family: var(--sf-text);
  font-size: 13.5px;
  color: var(--text-muted);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   CODE BLOCKS / TERMINAL
   ═══════════════════════════════════════════════════════════════════════ */
.codeblock, pre.codeblock, pre.terminal, pre {
  background: rgba(28,28,30,0.92) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: #f2f2f7 !important;
  border: 0.5px solid rgba(255,255,255,0.08) !important;
  border-radius: var(--r-md) !important;
  font-family: var(--sf-mono);
  font-size: 13px;
  line-height: 1.55;
  padding: 16px 18px;
}
.terminal-bar {
  background: rgba(255,255,255,0.4) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: 12px 12px 0 0;
}

/* Terminal traffic lights */
.terminal-bar::before {
  content: '';
  display: inline-block;
  width: 12px; height: 12px;
  margin-right: 6px;
  border-radius: 50%;
  background: #ff5f57;
  box-shadow:
    18px 0 0 #febc2e,
    36px 0 0 #28c840;
}

/* ═══════════════════════════════════════════════════════════════════════
   KEYBOARD KEYS
   ═══════════════════════════════════════════════════════════════════════ */
kbd {
  font-family: var(--sf-text);
  font-weight: 600;
  background: linear-gradient(180deg, #fff, #e5e5ea);
  border: 0.5px solid #c7c7cc;
  border-bottom-width: 1.5px;
  border-radius: 7px;
  padding: 3px 9px;
  font-size: 12px;
  color: #1c1c1e;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  display: inline-block;
  min-width: 24px;
  text-align: center;
}
[data-theme="dark"] kbd {
  background: linear-gradient(180deg, #3a3a3c, #2c2c2e);
  border-color: #48484a;
  color: #f2f2f7;
}

/* ═══════════════════════════════════════════════════════════════════════
   SCROLLBARS
   ═══════════════════════════════════════════════════════════════════════ */
html { scroll-behavior: smooth; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: rgba(120,120,128,0.4);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(120,120,128,0.6); background-clip: padding-box; }

/* ═══════════════════════════════════════════════════════════════════════
   UTILITY — gradient text, dividers, hints
   ═══════════════════════════════════════════════════════════════════════ */
.grad-orange {
  background: linear-gradient(120deg, var(--ios-orange), var(--ios-pink));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.grad-cyan {
  background: linear-gradient(120deg, var(--ios-cyan), var(--ios-teal));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hint {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-muted);
  font-size: 13px;
  padding: 10px 14px;
  background: rgba(120,120,128,0.10);
  border-radius: var(--r-sm);
}

/* ═══════════════════════════════════════════════════════════════════════
   ENTRANCE ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════ */
.card, .stat, .render-card, .pipeline, .steps, .footer, .hero, .nav {
  animation: fadeUp 0.6s var(--spring) backwards;
}
.stat:nth-child(1) { animation-delay: 0.05s; }
.stat:nth-child(2) { animation-delay: 0.10s; }
.stat:nth-child(3) { animation-delay: 0.15s; }
.stat:nth-child(4) { animation-delay: 0.20s; }
@keyframes fadeUp {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  .nav { padding: 10px 10px 0; }
  .nav-inner { padding: 7px 7px 7px 16px; border-radius: 22px; gap: 10px; }
  .nav-links { padding: 3px; gap: 0; flex-wrap: wrap; }
  .nav-link { padding: 6px 11px; font-size: 12.5px; }
  .icon-btn { width: 34px; height: 34px; }
  .hero { padding: 56px 18px 40px; }
  .pipeline { padding: 16px; }
}
@media (max-width: 720px) {
  .model-grid { grid-template-columns: 1fr; }
  .nav-links.open { flex-basis: 100%; order: 99; padding: 6px; }
  .footer { margin: 20px 12px 16px; padding: 20px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   TEXT COLORS
   ═══════════════════════════════════════════════════════════════════════ */
:root { --text: #1c1c1e; --text-muted: #3c3c43c0; --text-dim: #3c3c4399; }
[data-theme="dark"] { --text: #f2f2f7; --text-muted: #ebebf599; --text-dim: #ebebf566; }

/* ═══════════════════════════════════════════════════════════════════════════
   UI/UX BUG FIXES — final layer (overrides earlier conflicts)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. TEXT COLORS — final word, ensure readable contrast ────────── */
:root {
  --text:       #1c1c1e;
  --text-muted: rgba(60, 60, 67, 0.78);
  --text-dim:   rgba(60, 60, 67, 0.55);
  --bg-soft:    rgba(120, 120, 128, 0.10);
  --bg-card:    var(--mat-regular);
}
[data-theme="dark"] {
  --text:       #f2f2f7;
  --text-muted: rgba(235, 235, 245, 0.72);
  --text-dim:   rgba(235, 235, 245, 0.45);
  --bg-soft:    rgba(120, 120, 128, 0.16);
  --bg-card:    var(--mat-regular);
}
body { color: var(--text); }
.card p, .card .lead, .lead { color: var(--text-muted); }

/* ── 2. NAV: hide mobile toggle on desktop, show under 820px ─────── */
.nav-actions .mobile-toggle { display: none !important; }
@media (max-width: 820px) {
  .nav-actions .mobile-toggle { display: inline-flex !important; }
  .nav-inner .nav-links { display: none; }
  .nav-inner .nav-links.open {
    display: flex;
    flex-basis: 100%;
    order: 99;
    padding: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Nav: ensure nav-inner can wrap when mobile menu opens */
@media (max-width: 820px) {
  .nav-inner { flex-wrap: wrap; }
}

/* ── 3. TABS (Pattern Library filter): iOS segmented control look ── */
.tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  background: rgba(120, 120, 128, 0.16);
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
  border: 0;
  border-radius: var(--r-md);
  padding: 4px;
  width: auto;
  justify-content: center;
}
[data-theme="dark"] .tabs { background: rgba(255, 255, 255, 0.06); }
.tab {
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--sf-text);
  font-weight: 500;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all 0.28s var(--spring-soft);
  text-transform: capitalize;
  letter-spacing: -0.012em;
}
.tab:hover { color: var(--ios-blue); }
.tab.active {
  background: rgba(255, 255, 255, 0.96);
  color: #1c1c1e;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.06);
}
[data-theme="dark"] .tab.active {
  background: rgba(120, 120, 128, 0.55);
  color: #fff;
}

/* ── Saved Views Bar ──────────────────────────────────────────────── */
.saved-views-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 16px;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.saved-views-list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  overflow-x: auto;
  min-width: 0;
}
.saved-views-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
}
.saved-views-empty {
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
}
.saved-view-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: all 0.2s var(--spring-soft);
  white-space: nowrap;
}
.saved-view-pill:hover {
  border-color: var(--ios-blue);
  color: var(--ios-blue);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}
.saved-view-pill.pinned {
  border-color: var(--ios-blue);
  background: rgba(0, 122, 255, 0.06);
}
.saved-view-x {
  margin-left: 4px;
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  color: var(--text-dim);
  transition: opacity 0.15s, color 0.15s;
}
.saved-view-pill:hover .saved-view-x { opacity: 1; }
.saved-view-x:hover { color: var(--red); }
.saved-views-save {
  flex-shrink: 0;
}
[data-theme="dark"] .saved-view-pill {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .saved-view-pill:hover {
  border-color: var(--ios-blue);
  background: rgba(0, 122, 255, 0.12);
}
[data-theme="dark"] .saved-view-pill.pinned {
  background: rgba(0, 122, 255, 0.12);
}

/* ── 4. TERMINAL BAR: dual-dot fix ─────────────────────────────── */
/* The HTML uses .term-dot spans for the traffic lights, so disable
   our ::before lights in earlier layer. */
.terminal-bar { padding: 10px 14px; display: flex; align-items: center; gap: 6px; }
.terminal-bar::before { content: none !important; display: none !important; }
.term-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 12px; box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.1); }
.term-dot.r { background: #ff5f57; }
.term-dot.y { background: #febc2e; }
.term-dot.g { background: #28c840; }
.terminal-title {
  color: var(--text-muted) !important;
  font-family: var(--sf-mono);
  font-size: 12px;
  margin-left: 8px;
  flex: 1;
}
.terminal-tag {
  font-family: var(--sf-mono);
  font-size: 11px;
  color: var(--ios-green);
}

/* ── 5. TAGS: keep glass base but restore color variants ───────── */
.tag.indigo {
  background: rgba(0, 122, 255, 0.14) !important;
  color: var(--ios-blue) !important;
  border-color: rgba(0, 122, 255, 0.22) !important;
}
.tag.cyan {
  background: rgba(50, 173, 230, 0.16) !important;
  color: #006c8d !important;
  border-color: rgba(50, 173, 230, 0.28) !important;
}
.tag.orange {
  background: rgba(255, 149, 0, 0.16) !important;
  color: #b66400 !important;
  border-color: rgba(255, 149, 0, 0.28) !important;
}
.tag.green {
  background: rgba(52, 199, 89, 0.16) !important;
  color: #1f7a3a !important;
  border-color: rgba(52, 199, 89, 0.28) !important;
}
.tag.gray {
  background: rgba(120, 120, 128, 0.14) !important;
  color: var(--text-muted) !important;
}
[data-theme="dark"] .tag.cyan  { color: var(--ios-cyan)  !important; }
[data-theme="dark"] .tag.orange { color: var(--ios-orange) !important; }
[data-theme="dark"] .tag.green  { color: var(--ios-green)  !important; }

.status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.status-dot.green  { background: var(--ios-green);  box-shadow: 0 0 0 3px rgba(52,199,89,0.18); }
.status-dot.orange { background: var(--ios-orange); box-shadow: 0 0 0 3px rgba(255,149,0,0.18); }
.status-dot.gray   { background: var(--text-dim); }

/* ── 6. STUDIO TERMINAL CARD: kill double-border on inner pre ──── */
.card .codeblock,
.card pre.codeblock,
.card pre {
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(28,28,30,0.88) !important;
}
/* but free-standing codeblocks keep their iOS styling */
.codeblock:not(.card *), pre.codeblock:not(.card *) {
  border-radius: var(--r-md) !important;
}

/* ── 5b. GRID GAPS ───────────────────────────────────────────── */
.grid { display: grid; gap: 18px; }
.grid.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) {
  .grid.grid-3, .grid.grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid.grid-2, .grid.grid-3, .grid.grid-4 { grid-template-columns: 1fr; }
}

/* ── 7. EMPTY STATE polish ──────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 56px 24px !important;
}
.empty-state i.empty-icon {
  font-size: 48px;
  background: linear-gradient(135deg, var(--ios-blue), var(--ios-purple));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
  margin: 0 auto 14px;
  opacity: 0.85;
}
.empty-state h4 {
  font-family: var(--sf-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.022em;
  margin: 0 0 8px;
  color: var(--text);
}
.empty-state p {
  font-size: 14.5px;
  color: var(--text-muted);
  max-width: 420px;
  margin: 0 auto 18px;
  line-height: 1.5;
}

/* ── 8. NEXT-CTA floating banner ─────────────────────────────── */
.next-cta {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 480px;
  width: calc(100% - 32px);
  padding: 14px 18px !important;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 100;
  animation: ctaSlideUp 0.5s var(--spring) backwards;
}
@keyframes ctaSlideUp {
  from { transform: translate(-50%, 24px); opacity: 0; }
  to   { transform: translate(-50%, 0); opacity: 1; }
}
.next-cta .next-icon {
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--ios-blue), var(--ios-purple));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,122,255,0.4);
}
.next-cta .next-text { flex: 1; min-width: 0; }
.next-cta .next-title {
  font-family: var(--sf-text);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: -0.012em;
  color: var(--text);
}
.next-cta .next-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 1px;
  line-height: 1.4;
}
.next-cta .next-close {
  position: absolute;
  top: 8px; right: 8px;
  width: 22px; height: 22px;
  border: 0;
  background: rgba(120,120,128,0.18);
  color: var(--text-muted);
  border-radius: 50%;
  cursor: pointer;
  font-size: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.22s var(--spring);
}
.next-cta .next-close:hover { background: rgba(120,120,128,0.32); transform: scale(1.08); }

/* ── 9. STUDIO TEXTAREA + form spacing ───────────────────────── */
textarea.input { min-height: 100px; resize: vertical; line-height: 1.5; }
textarea.input.invalid { border-color: var(--ios-red); box-shadow: 0 0 0 4px rgba(255,59,48,0.18); }
.hint.error { color: var(--ios-red); }

.label {
  display: block;
  font-family: var(--sf-text);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lead { color: var(--text-muted); }

/* Better select dropdown affordance */
select.input, select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 18px,
    calc(100% - 13px) 18px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px !important;
}

/* ── 10. SEARCH-WRAP fix (was broken by global input override) ── */
.search-wrap {
  position: relative;
  max-width: 560px;
  margin: 0 auto 22px;
}
.search-wrap i.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  font-size: 14px;
  pointer-events: none;
  z-index: 2;
}
.search-wrap input {
  width: 100%;
  padding-left: 42px !important;
  padding-right: 42px !important;
}
.search-wrap .search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  border: 0;
  background: rgba(120,120,128,0.20);
  color: var(--text-muted);
  border-radius: 50%;
  cursor: pointer;
  font-size: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 0.22s var(--spring);
}
.search-wrap .search-clear:hover { background: rgba(120,120,128,0.36); color: var(--text); }

/* ── 11. QUICK-CHIPS readability ─────────────────────────────── */
.quick-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.qc {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--mat-thin);
  -webkit-backdrop-filter: var(--blur-sm);
  backdrop-filter: var(--blur-sm);
  border: 0.5px solid var(--hair-light);
  border-radius: var(--r-pill);
  padding: 6px 12px;
  font-family: var(--sf-text);
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all 0.22s var(--spring);
  letter-spacing: -0.01em;
}
.qc:hover {
  transform: translateY(-1px);
  background: var(--mat-regular);
  border-color: rgba(0,122,255,0.3);
  color: var(--ios-blue);
}

/* ── 12. RENDER RESULT + cost banner ─────────────────────────── */
.cost-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 18px !important;
  margin-bottom: 16px;
  font-family: var(--sf-text);
  font-size: 13.5px;
}
.cost-banner .cost-amount {
  font-family: var(--sf-rounded);
  font-size: 20px;
  font-weight: 700;
  color: var(--ios-orange);
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}
.cost-banner .cost-amount.free { color: var(--ios-green); }

.render-result {
  margin-top: 18px;
  padding: 18px;
  background: rgba(0,0,0,0.04);
  border: 0.5px solid var(--hair-light);
  border-radius: var(--r-md);
}
[data-theme="dark"] .render-result { background: rgba(255,255,255,0.04); }
.render-result video {
  width: 100%;
  max-width: 360px;
  border-radius: var(--r-sm);
  background: #000;
  display: block;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.render-result .render-meta {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 12px;
  color: var(--text-muted);
}
.render-meta span {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  background: var(--mat-thin);
  border: 0.5px solid var(--hair-light);
  border-radius: var(--r-pill);
  font-family: var(--sf-mono);
  font-size: 11.5px;
}

/* ── 13. REF-PICKER (reference image thumbs) ────────────────── */
.ref-picker { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ref-thumb {
  width: 60px; height: 60px;
  border-radius: var(--r-sm);
  background-size: cover;
  background-position: center;
  border: 1.5px solid var(--hair-light);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: all 0.22s var(--spring);
}
.ref-thumb:hover {
  border-color: var(--ios-blue);
  transform: translateY(-1px);
}
.ref-thumb.selected {
  border-color: var(--ios-blue);
  box-shadow: 0 0 0 3px rgba(0,122,255,0.22);
}
.ref-thumb.selected::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: -6px; right: -6px;
  background: var(--ios-blue);
  color: #fff;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px;
  box-shadow: 0 2px 8px rgba(0,122,255,0.45);
}

/* ── 14. RUNS table + RENDER GALLERY ──────────────────────── */
table { width: 100%; border-collapse: collapse; font-family: var(--sf-text); }
table th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 12px 12px;
  border-bottom: 0.5px solid var(--hair-divider);
}
table td {
  padding: 14px 12px;
  font-size: 13.5px;
  color: var(--text);
  border-bottom: 0.5px solid var(--hair-divider);
}
table tr:hover td { background: rgba(120,120,128,0.06); }
table tr:last-child td { border-bottom: 0; }

.render-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.render-tile { overflow: hidden; padding: 0 !important; }
.render-tile .tile-video {
  width: 100%;
  aspect-ratio: 9/16;
  background: #000;
  position: relative;
  overflow: hidden;
  border-radius: 0;
}
.render-tile .tile-video video,
.render-tile .tile-video img {
  width: 100%; height: 100%; object-fit: cover;
}
.render-tile .tile-status,
.render-tile .tile-model {
  position: absolute;
  top: 12px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  font-family: var(--sf-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.005em;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: 0.5px solid rgba(255,255,255,0.18);
}
.render-tile .tile-status { left: 12px; }
.render-tile .tile-model { right: 12px; }
.render-tile .tile-body { padding: 16px; }
.render-tile .tile-prompt {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
}
.render-tile .tile-meta {
  display: flex;
  gap: 8px;
  font-family: var(--sf-mono);
  font-size: 11px;
  color: var(--text-muted);
  flex-wrap: wrap;
}

/* ── PROVIDER PILL (live/mock indicator) ─────────────────────── */
.provider-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sf-text);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
}
.provider-pill.live {
  background: rgba(52,199,89,0.16) !important;
  color: var(--ios-green) !important;
  border-color: rgba(52,199,89,0.28) !important;
}
.provider-pill.mock {
  background: rgba(255,149,0,0.16) !important;
  color: #b66400 !important;
  border-color: rgba(255,149,0,0.28) !important;
}
[data-theme="dark"] .provider-pill.mock { color: var(--ios-orange) !important; }

/* ── BUDGET BAR ─────────────────────────────────────────────── */
.budget-bar {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  font-family: var(--sf-text);
  font-size: 12.5px;
  font-weight: 500;
}
.budget-bar .b-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.budget-bar .b-cost { color: var(--ios-orange); font-weight: 600; }

/* ── PATTERN CARDS (Library) ────────────────────────────────── */
.pattern-card {
  padding: 18px !important;
  cursor: pointer;
  transition: all 0.32s var(--spring);
}
.pattern-card.selected {
  border: 1.5px solid var(--ios-blue) !important;
  background: linear-gradient(180deg, rgba(0,122,255,0.10), rgba(0,122,255,0.04)) !important;
  box-shadow: 0 8px 26px rgba(0,122,255,0.18);
}
.pat-type {
  display: inline-block;
  padding: 4px 10px !important;
  font-family: var(--sf-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ios-blue);
  background: rgba(0,122,255,0.10) !important;
  border: 0 !important;
  border-radius: var(--r-pill) !important;
  margin-bottom: 10px;
}
.pat-label {
  font-family: var(--sf-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.3;
}
.pat-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pat-meta {
  display: flex;
  gap: 10px;
  font-family: var(--sf-mono);
  font-size: 11px;
  color: var(--text-muted);
  flex-wrap: wrap;
  margin-bottom: 0;
}
.pat-meta span { display: inline-flex; align-items: center; gap: 4px; }

/* ── 15. MOBILE responsiveness polish ──────────────────────── */
@media (max-width: 880px) {
  .container { padding: 0 16px; }
  .section { padding: 36px 0; }
  .hero { padding: 56px 18px 36px; }
  .hero h1 { font-size: clamp(36px, 8vw, 52px); }
  .grid.grid-4 { grid-template-columns: repeat(2, 1fr); }
  .pipeline { gap: 6px; padding: 16px; }
  .pipe-step { min-width: 80px; padding: 10px 8px; }
  .footer { margin: 24px 16px 16px; padding: 22px 20px; }
  .modal { margin: 16px; max-width: calc(100vw - 32px); }
  .nav-links { background: rgba(120,120,128,0.16); }
}

@media (max-width: 640px) {
  .hero { padding: 40px 16px 32px; }
  .hero h1 { font-size: clamp(32px, 9vw, 44px); margin-bottom: 16px; }
  .hero p { font-size: 15px; margin-bottom: 22px; }
  .next-cta { padding: 12px 14px !important; gap: 10px; }
  .next-cta .next-icon { width: 32px; height: 32px; font-size: 13px; }
  .next-cta .next-title { font-size: 12.5px; }
  .next-cta .next-desc { font-size: 11px; }
  .render-gallery { grid-template-columns: 1fr; }
  .ref-thumb { width: 50px; height: 50px; }
  .modal-head { padding: 18px 18px 10px; }
  .modal-body { padding: 14px 18px; }
  .modal-foot { padding: 10px 18px 18px; flex-direction: column-reverse; }
  .modal-foot .btn { width: 100%; justify-content: center; }
}

/* ── HELP ICON (the small "?" tooltip trigger) ──────────────── */
.help-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(120,120,128,0.20);
  color: var(--text-muted);
  font-family: var(--sf-rounded);
  font-size: 10px;
  font-weight: 700;
  cursor: help;
  margin-left: 4px;
  border: 0;
  vertical-align: middle;
  position: relative;
}
.help-icon:hover { background: var(--ios-blue); color: #fff; }
.help-icon[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  background: rgba(28,28,30,0.96);
  color: #fff;
  font-family: var(--sf-text);
  font-size: 12px;
  font-weight: 400;
  border-radius: var(--r-sm);
  white-space: normal;
  width: max-content;
  max-width: 240px;
  text-align: center;
  letter-spacing: -0.01em;
  z-index: 1000;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  line-height: 1.4;
}

/* ── SPINNER fallback (used in buttons & loaders) ───────────── */
.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn .spinner { margin-right: 4px; }

/* ── PROGRESS BAR (extract progress) ─────────────────────────── */
.progress-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px !important;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.progress-info { flex: 1; min-width: 240px; }
.progress-title {
  font-family: var(--sf-text);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.012em;
}
.progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(120,120,128,0.20);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ios-blue), var(--ios-purple));
  border-radius: inherit;
  transition: width 0.5s var(--spring-soft);
}
.progress-pct {
  font-family: var(--sf-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--ios-blue);
  font-variant-numeric: tabular-nums;
}

/* ── ONBOARD banner ─────────────────────────────────────────── */
.onboard {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px !important;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.onboard .onboard-text { flex: 1; min-width: 240px; }
.onboard h3 {
  font-family: var(--sf-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.022em;
  margin: 0 0 4px;
  color: var(--text);
}
.onboard p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.5;
}
.onboard .onboard-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── VIEW-SWITCH segmented control - icons + text alignment ─── */
.view-switch button { display: inline-flex; align-items: center; gap: 6px; }
.view-switch button i { font-size: 12px; }

/* ── VID-CARD platform badge polish ─────────────────────────── */
.vid-thumb {
  width: 100%;
  aspect-ratio: 9/16;
  background-color: #1c1c1e;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.vid-thumb .platform-badge {
  position: absolute;
  top: 10px; left: 10px;
  padding: 4px 10px;
  background: rgba(0,0,0,0.6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  border-radius: var(--r-pill);
  font-family: var(--sf-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.005em;
  display: inline-flex; align-items: center; gap: 5px;
  text-transform: capitalize;
  border: 0.5px solid rgba(255,255,255,0.18);
}
.vid-card .vid-body { padding: 14px; }
.vid-card .vid-handle {
  font-family: var(--sf-text);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text);
  margin-bottom: 4px;
}
.vid-card .vid-caption {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}
.vid-stats {
  display: flex;
  gap: 10px;
  font-family: var(--sf-mono);
  font-size: 11px;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.vid-stats span { display: inline-flex; align-items: center; gap: 4px; }

/* ── ENSURE phone preview is centered ───────────────────────── */
.phone-wrap {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}
.phone-label {
  text-align: center;
  font-family: var(--sf-text);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  width: 100%;
}

/* ── HELP MODAL kbd centering ───────────────────────────────── */
.modal kbd { font-family: var(--sf-text); }

/* ── DISABLE link underlines from Tailwind reset ────────────── */
a[data-nav], .brand[data-nav] { text-decoration: none; }

/* ── FINAL: Force all .card, .stat etc. opacity for a11y in dark ── */
[data-theme="dark"] .card,
[data-theme="dark"] .render-card,
[data-theme="dark"] .stat,
[data-theme="dark"] .pattern-card,
[data-theme="dark"] .vid-card,
[data-theme="dark"] .render-tile,
[data-theme="dark"] .img-post-card,
[data-theme="dark"] .onboard,
[data-theme="dark"] .next-cta,
[data-theme="dark"] .modal,
[data-theme="dark"] .empty-state,
[data-theme="dark"] .pipeline,
[data-theme="dark"] .steps,
[data-theme="dark"] .footer { color: var(--text); }

/* ═══════════════════════════════════════════════════════════════════════
   HOTFIX — Hero/nav collision + pipeline left-clip (screenshot bugs)
   ═══════════════════════════════════════════════════════════════════════ */

/* 1) Nav must sit above every section's stacking context.
      The iOS override layer set .section / .hero to position:relative z-index:1
      which created competing stacking contexts with the sticky .nav (z-index:50).
      Bump nav decisively and ensure its stacking is above all hero/section content. */
.nav {
  z-index: 1000 !important;
}
.nav-inner {
  z-index: 1001;
}
/* The wallpaper/aurora fixed layer must stay behind everything */
.bg-aurora, .aurora-blob, .wallpaper { z-index: -1 !important; }

/* 2) Section padding-top must account for the floating nav capsule height
      so the first section (.hero) never tucks under it. The capsule is
      ~62px tall + 14px top inset = ~76px. Give the hero clear breathing room. */
.hero {
  padding-top: 96px !important;
  padding-bottom: 64px !important;
}
@media (max-width: 880px) {
  .hero { padding-top: 80px !important; padding-bottom: 44px !important; }
}
@media (max-width: 640px) {
  .hero { padding-top: 68px !important; padding-bottom: 36px !important; }
}

/* Section heads (the one with "Every action flows through one governed pipeline")
   were sitting too close to the nav when scrolled. Add scroll-margin so anchor
   jumps and sticky-nav-overlap both behave. */
.section-head {
  scroll-margin-top: 96px;
}
.section {
  scroll-margin-top: 96px;
}

/* 3) Pipeline left-clip fix.
      .pipeline is a flex row with overflow-x:auto. When viewport < content,
      it was rendering with the scroll position somewhere mid-track (the first
      step "Scrape" was being chopped off the left edge).
      Fixes:
        a) scroll-snap so the row always anchors at start
        b) scroll-padding-left so the first item has breathing room
        c) explicit padding-left guarantee
        d) flex-shrink:0 already set — ensure first child can never be clipped */
.pipeline {
  scroll-snap-type: x mandatory;
  scroll-padding-left: 24px;
  padding-left: 24px !important;
  padding-right: 24px !important;
  /* Ensure the row starts at its natural left, not in the middle */
  justify-content: flex-start;
}
.pipeline > .pipe-step:first-child { scroll-snap-align: start; margin-left: 0; }
.pipe-step { scroll-snap-align: start; }

/* When the pipeline fits without scrolling, center it nicely instead of
   left-aligning awkwardly. Use a media-query-free trick: gap auto-spaces. */
@media (min-width: 1100px) {
  .pipeline { justify-content: center; }
}

/* 4) Containers around sections were not constraining .pipeline width on
      mid-size viewports, causing the row to bleed past container padding.
      Force the pipeline to live inside the container's width. */
.section .container .pipeline,
.container > .pipeline {
  max-width: 100%;
  box-sizing: border-box;
}

/* 5) Pipe arrows were sometimes taller than steps (vertical-align mismatch
      caused weird gap at the top of arrows). Lock to flex-center. */
.pipe-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 90px;
}

/* 6) The hero h1 was occasionally being hit by the nav backdrop blur on
      Safari due to backdrop-filter creating a stacking context.
      Force the hero content above any blur layer. */
.hero h1, .hero p, .hero-cta { position: relative; z-index: 2; }

/* 7) On the Dashboard view, the section-head "Every action flows..." had a
      negative-ish offset from the iOS layer's section padding.
      Reset to a known-good rhythm. */
.section + .section { padding-top: 32px; }
.section .section-head { margin-bottom: 32px; }

/* ═══════════════════════════════════════════════════════════════════════
   UX HARDENING + AI/ML MATURITY — component layer
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Nav badge (notifications) ─── */
.icon-btn.has-badge { position: relative; }
.nav-badge {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--ios-red, #ff3b30);
  color: #fff;
  font-family: var(--sf-text);
  font-size: 10.5px;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--bg, #fff);
  letter-spacing: -0.01em;
}

/* ═══════════════════════════════════════════════════════════════════════
   COMMAND PALETTE (⌘K)
   ═══════════════════════════════════════════════════════════════════════ */
.palette-bg {
  position: fixed; inset: 0;
  background: rgba(15, 18, 28, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 5000;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 14vh;
  animation: pal-fade 0.18s ease-out;
}
@keyframes pal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.palette {
  width: min(640px, calc(100vw - 32px));
  max-height: 70vh;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  border: 0.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32), 0 4px 12px rgba(0, 0, 0, 0.12), inset 0 0.5px 0 rgba(255, 255, 255, 0.7);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: pal-pop 0.22s var(--spring-soft, cubic-bezier(0.32, 0.72, 0, 1));
}
[data-theme="dark"] .palette {
  background: rgba(28, 28, 30, 0.94);
  border-color: rgba(255, 255, 255, 0.08);
}
@keyframes pal-pop {
  from { transform: translateY(-12px) scale(0.96); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.pal-search {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-bottom: 0.5px solid var(--hair-light, rgba(0, 0, 0, 0.08));
}
.pal-search > i {
  color: var(--text-dim, #6b7283);
  font-size: 14px;
}
.pal-search input {
  flex: 1;
  border: 0; outline: 0;
  background: transparent;
  font-family: var(--sf-text);
  font-size: 15px;
  color: var(--text);
  letter-spacing: -0.012em;
}
.pal-search input::placeholder { color: var(--text-dim, #6b7283); }
.pal-esc {
  font-family: var(--sf-mono);
  font-size: 10.5px;
  padding: 3px 7px;
  background: rgba(120, 120, 128, 0.16);
  color: var(--text-muted);
  border-radius: 4px;
  border: 0;
}
.pal-results {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  max-height: 50vh;
}
.pal-results::-webkit-scrollbar { width: 8px; }
.pal-results::-webkit-scrollbar-thumb { background: rgba(120, 120, 128, 0.3); border-radius: 4px; }
.pal-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.08s;
}
.pal-item.active {
  background: rgba(0, 122, 255, 0.10);
}
[data-theme="dark"] .pal-item.active { background: rgba(10, 132, 255, 0.18); }
.pal-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: rgba(120, 120, 128, 0.14);
  color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.pal-item.active .pal-icon {
  background: var(--ios-blue, #0a84ff);
  color: #fff;
}
.pal-label {
  flex: 1;
  font-family: var(--sf-text);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.012em;
}
.pal-meta { display: flex; gap: 4px; align-items: center; }
.pal-shortcut { display: inline-flex; gap: 4px; }
.pal-shortcut kbd {
  font-family: var(--sf-mono);
  font-size: 10.5px;
  padding: 2px 6px;
  background: rgba(120, 120, 128, 0.16);
  color: var(--text-muted);
  border-radius: 4px;
  border: 0;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.06);
  font-weight: 500;
}
.pal-kind {
  font-family: var(--sf-text);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  font-weight: 600;
}
.pal-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
}
.pal-footer {
  display: flex; gap: 18px;
  padding: 10px 16px;
  border-top: 0.5px solid var(--hair-light, rgba(0, 0, 0, 0.08));
  background: rgba(120, 120, 128, 0.06);
  font-family: var(--sf-text);
  font-size: 11px;
  color: var(--text-dim);
}
.pal-footer kbd {
  font-family: var(--sf-mono);
  font-size: 10px;
  padding: 1px 5px;
  background: rgba(120, 120, 128, 0.18);
  border-radius: 3px;
  margin: 0 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   NOTIFICATIONS DRAWER
   ═══════════════════════════════════════════════════════════════════════ */
.drawer-bg {
  position: fixed; inset: 0;
  background: rgba(15, 18, 28, 0.32);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 4500;
  animation: pal-fade 0.16s ease-out;
}
.drawer {
  position: fixed;
  top: 0; bottom: 0;
  width: min(420px, calc(100vw - 24px));
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.18);
  display: flex; flex-direction: column;
  animation: drawer-in 0.26s var(--spring-soft, cubic-bezier(0.32, 0.72, 0, 1));
}
[data-theme="dark"] .drawer { background: rgba(28, 28, 30, 0.96); }
.drawer-right { right: 0; border-left: 0.5px solid var(--hair-light, rgba(0, 0, 0, 0.08)); }
@keyframes drawer-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 0.5px solid var(--hair-light, rgba(0, 0, 0, 0.08));
}
.drawer-head h3 {
  margin: 0;
  font-family: var(--sf-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.022em;
}
.drawer-actions { display: flex; gap: 8px; align-items: center; }
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.notif {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  transition: background 0.1s;
}
.notif:hover { background: rgba(120, 120, 128, 0.08); }
.notif.unread { background: rgba(0, 122, 255, 0.06); }
.notif.unread:hover { background: rgba(0, 122, 255, 0.10); }
.notif-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  color: #fff;
}
.notif-icon-render { background: linear-gradient(135deg, #0a84ff, #5e5ce6); }
.notif-icon-review { background: linear-gradient(135deg, #ff9500, #ffcc00); }
.notif-icon-eval { background: linear-gradient(135deg, #34c759, #30d158); }
.notif-icon-pattern { background: linear-gradient(135deg, #af52de, #ff2d55); }
.notif-icon-system { background: linear-gradient(135deg, #8e8e93, #aeaeb2); }
.notif-content { flex: 1; min-width: 0; }
.notif-title {
  font-family: var(--sf-text);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.012em;
  margin-bottom: 2px;
}
.notif-body {
  font-family: var(--sf-text);
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 4px;
}
.notif-time {
  font-family: var(--sf-mono);
  font-size: 10.5px;
  color: var(--text-dim);
}
.notif-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ios-blue, #0a84ff);
  flex-shrink: 0;
  margin-top: 6px;
}
.empty-state-mini {
  padding: 48px 16px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13.5px;
}

/* ═══════════════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════════════ */
.empty-state {
  padding: 56px 24px;
  text-align: center;
  background: rgba(120, 120, 128, 0.04);
  border: 1px dashed var(--border);
  border-radius: 16px;
}
.empty-state .empty-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--ios-blue, #0a84ff), var(--ios-purple, #af52de));
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
  box-shadow: 0 8px 24px rgba(10, 132, 255, 0.30);
}
.empty-state h3 {
  font-family: var(--sf-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.022em;
  margin: 0 0 8px;
}
.empty-state p {
  color: var(--text-muted);
  font-size: 14px;
  max-width: 420px;
  margin: 0 auto 20px;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════
   AI/ML VIEW — labeling, evals, prompts, taxonomies, models, keys
   ═══════════════════════════════════════════════════════════════════════ */

/* Segmented tabs */
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px;
  background: rgba(120, 120, 128, 0.16);
  border-radius: var(--r-pill, 999px);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
[data-theme="dark"] .segmented { background: rgba(255, 255, 255, 0.06); }
.seg-pill {
  padding: 7px 14px;
  border-radius: var(--r-pill, 999px);
  border: 0;
  background: transparent;
  font-family: var(--sf-text);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  letter-spacing: -0.012em;
  transition: all 0.18s;
  display: inline-flex; align-items: center; gap: 6px;
}
.seg-pill:hover:not(.active) { color: var(--ios-blue, #0a84ff); }
.seg-pill.active {
  background: rgba(255, 255, 255, 0.95);
  color: var(--text);
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.08);
  font-weight: 600;
}
[data-theme="dark"] .seg-pill.active {
  background: rgba(72, 72, 74, 0.95);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.10);
}

/* Labeling cards */
.label-card {
  position: relative;
  padding-top: 20px !important;
}
.label-priority {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 10px;
  font-family: var(--sf-rounded, var(--sf-display));
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,
    hsl(calc(var(--p) * 1.2), 80%, 55%),
    hsl(calc(var(--p) * 1.2 - 30), 80%, 50%));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.label-meta {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 6px;
}

/* Eval cards */
.eval-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.eval-card {
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
  border-left: 4px solid var(--ios-blue, #0a84ff);
}
.eval-card.eval-pass { border-left-color: var(--ios-green, #34c759); }
.eval-card.eval-warn { border-left-color: var(--ios-orange, #ff9500); }
.eval-card.eval-fail { border-left-color: var(--ios-red, #ff3b30); }
.eval-score {
  font-family: var(--sf-rounded, var(--sf-display));
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.eval-card.eval-pass .eval-score { color: var(--ios-green, #34c759); }
.eval-card.eval-warn .eval-score { color: var(--ios-orange, #ff9500); }
.eval-card.eval-fail .eval-score { color: var(--ios-red, #ff3b30); }
.eval-meta { display: flex; flex-direction: column; gap: 2px; }
.eval-model {
  font-family: var(--sf-text);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.eval-ver {
  font-family: var(--sf-mono);
  font-size: 11px;
  color: var(--text-dim);
  margin-left: 4px;
}
.eval-set { font-size: 12px; color: var(--text-muted); }
.eval-stats {
  display: flex; gap: 12px;
  font-family: var(--sf-mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.eval-stats .stat-pass { color: var(--ios-green, #34c759); }
.eval-stats .stat-fail { color: var(--ios-red, #ff3b30); }
.eval-stats .stat-time { color: var(--text-dim); }
.eval-time { font-size: 11px; color: var(--text-dim); }

/* Prompt registry */
.prompt-list { display: flex; flex-direction: column; gap: 14px; }
.prompt-card { display: flex; flex-direction: column; gap: 12px; }
.prompt-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px;
}
.prompt-head h4 {
  margin: 0 0 4px;
  font-family: var(--sf-mono);
  font-size: 13.5px;
  color: var(--ios-blue, #0a84ff);
  letter-spacing: -0.005em;
}
.prompt-versions { display: flex; gap: 4px; flex-wrap: wrap; }
.prompt-template {
  font-family: var(--sf-mono);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 120px;
  overflow-y: auto;
}

/* Taxonomy cards */
.taxonomy-card {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
}
.tax-swatch {
  width: 32px; height: 32px;
  border-radius: 8px;
  margin-bottom: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.taxonomy-card h4 {
  margin: 0;
  font-family: var(--sf-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.018em;
}
.tax-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.taxonomy-add {
  border: 1.5px dashed var(--border) !important;
  background: transparent !important;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; cursor: pointer; min-height: 160px;
  transition: all 0.18s;
}
.taxonomy-add:hover {
  border-color: var(--ios-blue, #0a84ff) !important;
  background: rgba(0, 122, 255, 0.04) !important;
  transform: translateY(-2px);
}
.taxonomy-add .empty-icon {
  width: 40px; height: 40px;
  font-size: 16px;
  margin-bottom: 8px;
}

/* Model registry cards */
.model-card {
  display: flex; flex-direction: column;
  border-left: 3px solid transparent;
  transition: all 0.2s;
}
.model-card.is-default {
  border-left-color: var(--ios-green, #34c759);
  background: linear-gradient(90deg, rgba(52, 199, 89, 0.05), transparent 30%);
}
.model-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
}
.model-head h4 {
  margin: 0 0 6px;
  font-family: var(--sf-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.018em;
  display: inline-block;
  margin-right: 8px;
}
.model-head .tag {
  vertical-align: middle;
  margin-right: 4px;
  margin-top: 4px;
}

/* Key cards */
.key-card {
  border-left: 3px solid var(--ios-green, #34c759);
}
.key-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
}
.key-head h4 {
  margin: 6px 0 0;
  font-family: var(--sf-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.018em;
}
.key-card code {
  font-family: var(--sf-mono);
  font-size: 12px;
  background: rgba(120, 120, 128, 0.12);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Btn-sm variant for compact actions */
.btn-sm {
  padding: 6px 12px !important;
  font-size: 12.5px !important;
  border-radius: 8px !important;
}

/* Bulk select toolbar (used elsewhere) */
.bulk-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: rgba(0, 122, 255, 0.10);
  border: 0.5px solid rgba(0, 122, 255, 0.25);
  border-radius: var(--r-md, 12px);
  margin-bottom: 14px;
  position: sticky;
  top: 80px;
  z-index: 30;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

/* Mobile adjustments */
@media (max-width: 720px) {
  .palette { width: calc(100vw - 16px); border-radius: 14px; }
  .palette-bg { padding-top: 6vh; }
  .pal-search { padding: 12px 14px; }
  .drawer { width: 100vw; }
  .eval-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ROSTER / CHARACTERS / SCHEDULE
   ═══════════════════════════════════════════════════════════════════════ */

/* Roster layout */
.roster-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  margin-top: 24px;
}
@media (max-width: 880px) { .roster-layout { grid-template-columns: 1fr; } }

.roster-side {
  position: sticky;
  top: 88px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  padding-right: 4px;
}
.side-section {
  background: var(--bg-soft);
  border: 0.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 12px;
  backdrop-filter: var(--blur-sm);
}
.side-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-dim); padding: 4px 6px 8px; font-weight: 600;
}
.icon-btn-sm {
  width: 22px; height: 22px; border-radius: 6px; border: 0;
  background: transparent; color: var(--text-muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.icon-btn-sm:hover { background: rgba(120,120,128,0.16); color: var(--text); }

.folder-list { display: flex; flex-direction: column; gap: 2px; }
.folder-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  font-size: 13.5px; cursor: pointer;
  transition: background 0.12s;
  color: var(--text);
}
.folder-row:hover { background: rgba(120,120,128,0.10); }
.folder-row.active { background: color-mix(in srgb, var(--indigo) 14%, transparent); color: var(--text); font-weight: 600; }
.folder-count { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 6px 6px; }
.chip {
  --chip: #8e8e93;
  display: inline-flex; align-items: center; padding: 4px 10px;
  border-radius: 999px; font-size: 12px; font-weight: 500;
  background: color-mix(in srgb, var(--chip) 14%, transparent);
  color: var(--chip); cursor: pointer; border: 0.5px solid transparent;
  transition: all 0.15s;
}
.chip:hover { transform: translateY(-1px); }
.chip.active { background: color-mix(in srgb, var(--chip) 24%, transparent); border-color: var(--chip); }

/* Roster main */
.roster-main { min-width: 0; }
.roster-toolbar {
  display: flex; gap: 12px; align-items: center; margin-bottom: 18px; flex-wrap: wrap;
}
.search-pill {
  flex: 1; min-width: 220px; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px;
  background: var(--bg-soft); border: 0.5px solid var(--border);
  color: var(--text-muted);
}
.search-pill input {
  flex: 1; background: transparent; border: 0; outline: 0;
  font: inherit; color: var(--text); font-size: 14px;
}

/* Character grid + cards */
.char-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.char-card {
  background: var(--bg-soft);
  border: 0.5px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
  display: flex; flex-direction: column;
}
@media (hover: hover) {
  .char-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.18); }
}
.char-card-cover {
  position: relative; aspect-ratio: 1 / 1; background: linear-gradient(135deg, #5b5bf7, #06b6d4);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.char-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.char-card-initials {
  font-size: 56px; font-weight: 700; color: rgba(255,255,255,0.92);
  font-family: var(--sf-display, -apple-system, Inter, sans-serif);
  letter-spacing: -0.02em;
}
.char-status {
  position: absolute; top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: rgba(0,0,0,0.45); color: #fff; backdrop-filter: blur(8px);
  text-transform: capitalize;
}
.char-status .status-dot { width: 6px; height: 6px; border-radius: 50%; background: #34c759; }
.char-status.green .status-dot { background: #34c759; }
.char-status.orange .status-dot { background: #ff9f0a; }
.char-status.cyan .status-dot { background: #06b6d4; }
.char-status.dim .status-dot { background: #8e8e93; }
.char-pin {
  position: absolute; top: 10px; right: 10px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,0,0,0.5); color: #ffd60a;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; backdrop-filter: blur(8px);
}
[data-theme="dark"] .char-pin { background: rgba(255,255,255,0.15); color: #ffd60a; }
.char-card-body { padding: 12px 14px 14px; }
.char-card-name { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; color: var(--text); }
.char-card-handle { color: var(--text-dim); font-size: 12.5px; margin-top: 1px; }
.char-card-meta { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.char-card-stats {
  display: flex; gap: 12px; margin-top: 10px; padding-top: 10px;
  border-top: 0.5px solid var(--border);
  font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.char-card-stats span { display: inline-flex; align-items: center; gap: 4px; }
.char-card-stats i { color: var(--text-dim); }

/* Empty card */
.empty-card {
  text-align: center; padding: 56px 24px;
  background: var(--bg-soft); border: 0.5px dashed var(--border);
  border-radius: var(--r-xl);
}
.empty-card > i { font-size: 32px; color: var(--text-dim); margin-bottom: 12px; display: block; }
.empty-card h3 { margin: 0 0 6px; font-size: 18px; }
.empty-card p { color: var(--text-muted); margin: 0 0 16px; font-size: 14px; }

/* Character detail */
.char-detail-head {
  display: grid;
  grid-template-columns: auto 88px 1fr auto;
  align-items: center; gap: 18px;
  padding: 8px 0 24px;
  border-bottom: 0.5px solid var(--border);
  margin-bottom: 22px;
}
@media (max-width: 720px) { .char-detail-head { grid-template-columns: auto auto 1fr; } .char-actions { grid-column: 1 / -1; } }
.char-avatar-lg {
  width: 88px; height: 88px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, #5b5bf7, #06b6d4);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 32px;
  border: 2px solid var(--border);
}
.char-avatar-lg img { width: 100%; height: 100%; object-fit: cover; }
.char-id .char-handle { color: var(--text-muted); font-size: 13px; margin-top: 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.char-id .char-stats { display: flex; gap: 18px; margin-top: 8px; color: var(--text-muted); font-size: 13px; }
.char-id .char-stats b { color: var(--text); font-variant-numeric: tabular-nums; }
.char-actions { display: flex; gap: 8px; }

.char-tabs {
  display: flex; gap: 4px; padding: 4px;
  background: var(--bg-soft); border: 0.5px solid var(--border);
  border-radius: 999px; overflow-x: auto; scrollbar-width: none;
  margin-bottom: 22px;
}
.char-tabs::-webkit-scrollbar { display: none; }
.char-tab {
  flex: 1; min-width: max-content;
  padding: 8px 14px; border-radius: 999px; border: 0;
  background: transparent; color: var(--text-muted);
  font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; transition: all 0.15s;
}
.char-tab:hover { color: var(--text); }
.char-tab.active { background: var(--bg); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

.char-tab-body { min-height: 200px; }

/* Render grid (character feed) */
.render-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.render-tile {
  background: var(--bg-soft); border: 0.5px solid var(--border);
  border-radius: var(--r-md); overflow: hidden;
  aspect-ratio: 9 / 16; position: relative;
  display: flex; flex-direction: column;
}
.render-tile video { width: 100%; flex: 1; min-height: 0; object-fit: cover; background: #000; }
.render-tile-shell {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--text-muted); font-size: 12px;
}
.render-tile-foot {
  display: flex; gap: 6px; padding: 6px 8px;
  background: rgba(0,0,0,0.04);
  border-top: 0.5px solid var(--border);
  font-size: 11px;
}

/* KPI grid (analytics) */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.kpi {
  background: var(--bg-soft); border: 0.5px solid var(--border);
  border-radius: var(--r-lg); padding: 18px 16px; text-align: center;
}
.kpi-num { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.kpi-lab { font-size: 12px; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.05em; }

/* Identity / settings cards */
.identity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.card-block {
  background: var(--bg-soft); border: 0.5px solid var(--border);
  border-radius: var(--r-lg); padding: 16px 18px;
  margin-bottom: 14px;
}
.card-block-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--text);
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 0.5px solid var(--border);
}
.card-block-head i { color: var(--indigo); }
.lock-badge {
  margin-left: auto; padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, #34c759 16%, transparent);
  color: #2a8e3f; font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .lock-badge { color: #34c759; }
.kv {
  display: grid; grid-template-columns: 130px 1fr;
  gap: 10px; padding: 6px 0;
  font-size: 13px; align-items: start;
}
.kv > span:first-child { color: var(--text-muted); font-size: 12px; }
.kv code {
  font-family: var(--mono, monospace); font-size: 12px;
  background: rgba(120,120,128,0.10); padding: 2px 6px; border-radius: 4px;
  word-break: break-all;
}

/* Connect row */
.connect-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.acct-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.acct-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--bg); border-radius: var(--r-md);
  border: 0.5px solid var(--border); font-size: 13px;
}
.acct-row > i { font-size: 16px; color: var(--text); width: 22px; }
.acct-handle { font-weight: 600; }

/* Schedule */
.row-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.schedule-list { display: flex; flex-direction: column; gap: 6px; }
.sched-row {
  display: grid;
  grid-template-columns: 160px 130px 1fr auto;
  gap: 10px; align-items: center;
  padding: 10px 14px; background: var(--bg-soft);
  border: 0.5px solid var(--border); border-radius: var(--r-md);
  font-size: 13px;
}
.sched-when { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sched-platform { font-weight: 600; text-transform: capitalize; }
.sched-caption { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Schedule view (calendar-by-day) */
.schedule-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; align-items: center; }
.schedule-toolbar select {
  padding: 8px 14px; border-radius: 999px;
  background: var(--bg-soft); border: 0.5px solid var(--border);
  color: var(--text); font: inherit; font-size: 13px; cursor: pointer;
}
.cal-day {
  background: var(--bg-soft); border: 0.5px solid var(--border);
  border-radius: var(--r-lg); margin-bottom: 14px; overflow: hidden;
}
.cal-day-head {
  padding: 12px 16px; font-weight: 600; font-size: 14px;
  background: rgba(120,120,128,0.06);
  border-bottom: 0.5px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.cal-day-head i { color: var(--indigo); }
.cal-day-list { display: flex; flex-direction: column; }
.cal-row {
  display: grid;
  grid-template-columns: 70px 200px 130px 1fr auto;
  gap: 12px; align-items: center;
  padding: 12px 16px; font-size: 13px;
  border-top: 0.5px solid var(--border);
}
.cal-row:first-child { border-top: 0; }
.cal-time { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
.cal-char { display: flex; align-items: center; gap: 8px; }
.cal-char img, .cal-init {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  background: linear-gradient(135deg, #5b5bf7, #06b6d4);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.cal-platform { text-transform: capitalize; }
.cal-caption { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) {
  .cal-row { grid-template-columns: 60px 1fr; row-gap: 4px; }
  .cal-platform, .cal-caption, .cal-status { grid-column: 2; }
}

/* Studio cast picker */
.studio-cast {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 18px;
  background: linear-gradient(135deg,
    color-mix(in srgb, #ff9f0a 8%, transparent),
    color-mix(in srgb, #5b5bf7 8%, transparent));
  border: 0.5px solid var(--border);
  border-radius: var(--r-lg);
  backdrop-filter: var(--blur-sm);
}
.cast-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); font-weight: 600;
}
.cast-select {
  padding: 8px 14px; border-radius: 999px;
  background: var(--bg); border: 0.5px solid var(--border);
  color: var(--text); font: inherit; font-size: 13px;
  min-width: 240px; cursor: pointer;
}
.cast-active {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text);
}
.cast-avatar {
  width: 26px; height: 26px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, #5b5bf7, #06b6d4);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; flex-shrink: 0;
}
.cast-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cast-name { font-weight: 600; }
.muted { color: var(--text-muted); }

/* Modal helpers */
.modal-lg { max-width: 720px; width: calc(100vw - 40px); }
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 14px;
}
.form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); font-weight: 500; }
.form-grid label.full { grid-column: 1 / -1; }
.form-grid input, .form-grid select, .form-grid textarea {
  padding: 9px 12px; border-radius: 8px;
  border: 0.5px solid var(--border); background: var(--bg);
  color: var(--text); font: inherit; font-size: 13.5px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
  outline: 0; border-color: var(--indigo);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--indigo) 22%, transparent);
}
.form-grid textarea { resize: vertical; font-family: inherit; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } .form-grid label.full { grid-column: 1; } }

.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 0.5px solid var(--border);
}
.modal-head h3 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.modal-body { padding: 18px 20px; max-height: 70vh; overflow-y: auto; }
.modal-foot {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 14px 20px; border-top: 0.5px solid var(--border);
}

/* Tag color variants */
.tag.green { background: color-mix(in srgb, #34c759 16%, transparent); color: #208a3a; border-color: color-mix(in srgb, #34c759 22%, transparent); }
.tag.cyan { background: color-mix(in srgb, #06b6d4 16%, transparent); color: #0c8ea3; border-color: color-mix(in srgb, #06b6d4 22%, transparent); }
.tag.orange { background: color-mix(in srgb, #ff9f0a 18%, transparent); color: #b46c00; border-color: color-mix(in srgb, #ff9f0a 24%, transparent); }
.tag.dim { background: rgba(120,120,128,0.14); color: var(--text-muted); }
[data-theme="dark"] .tag.green { color: #5fdf7e; }
[data-theme="dark"] .tag.cyan { color: #5edcef; }
[data-theme="dark"] .tag.orange { color: #ffc46a; }

/* ════════════════════════════════════════════════════════════════════════
   PAGES / KANBAN — boards, page cards, kanban columns, timeline, drag-drop
   ════════════════════════════════════════════════════════════════════════ */
.page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.page-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.page-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  border-color: var(--indigo);
}
.page-card-cover {
  position: relative;
  height: 110px;
  background: linear-gradient(135deg,#5b5bf7,#06b6d4);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 10px 12px;
}
.page-kind {
  background: rgba(0,0,0,.42);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.page-card-body { padding: 12px 14px 14px; }
.page-card-title { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.page-card-desc { color: var(--text-muted); font-size: 13px; min-height: 18px; margin-bottom: 10px; }
.page-card-meta { display: flex; gap: 6px; flex-wrap: wrap; }

.page-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.page-head h2 { font-size: 26px; }

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

/* Kanban */
.kanban-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.kanban-col {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kanban-col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  padding: 4px 6px 8px;
  border-bottom: 1px solid var(--border);
}
.kanban-count {
  margin-left: auto;
  background: var(--indigo-soft);
  color: var(--indigo);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}
.kanban-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 80px;
  border-radius: 8px;
  padding: 4px;
  transition: background .15s ease, outline .15s ease;
}
.kanban-list.drop-hover {
  background: rgba(91,91,247,.06);
  outline: 2px dashed rgba(91,91,247,.45);
  outline-offset: -3px;
}
.kanban-empty {
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
  padding: 18px 8px;
  border: 1px dashed var(--border);
  border-radius: 8px;
}
.kanban-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: grab;
  transition: box-shadow .15s ease, transform .15s ease, opacity .15s ease;
}
.kanban-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.kanban-card.dragging { opacity: .45; transform: scale(.98); cursor: grabbing; }
.kc-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.kc-type { font-weight: 600; text-transform: capitalize; }
.kc-x { margin-left: auto; }
.icon-btn-sm {
  background: transparent;
  border: 0;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 6px;
}
.icon-btn-sm:hover { background: rgba(0,0,0,.06); color: var(--text); }
.kc-label { font-size: 13px; font-weight: 500; margin-top: 4px; }
.kc-note { color: var(--text-muted); font-size: 12px; margin-top: 4px; line-height: 1.45; }
.kanban-add {
  align-self: stretch;
  margin-top: 4px;
}

/* Timeline */
.tl-list { display: flex; flex-direction: column; gap: 10px; }
.tl-row {
  display: grid;
  grid-template-columns: 14px 140px 1fr;
  gap: 12px;
  align-items: center;
}
.tl-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--indigo);
  box-shadow: 0 0 0 4px rgba(91,91,247,.15);
}
.tl-when { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.tl-card { }

@media (max-width: 1100px) {
  .kanban-board { grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}
@media (max-width: 640px) {
  .kanban-board { grid-template-columns: 1fr; }
  .tl-row { grid-template-columns: 14px 1fr; }
  .tl-row .tl-when { grid-column: 2; font-size: 11px; }
}

/* ════════════════════════════════════════════════════════════════════════
   MODERN UI POLISH LAYER — final cohesive design system v2 enhancements
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Smooth view transitions ──────────────────────────────────────────── */
#app > * {
  animation: viewIn .35s var(--ease-out);
}
@keyframes viewIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ─── Keyboard kbd styling ─────────────────────────────────────────────── */
kbd, .kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  background: var(--bg-soft);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  box-shadow: var(--shadow-xs);
}

/* ─── Modern muted helper ──────────────────────────────────────────────── */
.muted { color: var(--text-muted); font-size: 13px; }
.dim { color: var(--text-dim); }

/* ─── Section heads — slightly tighter ─────────────────────────────────── */
.section-head h2 { line-height: 1.1; }
.section-head .eyebrow {
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  padding: 6px 13px;
  font-weight: 600;
}

/* ─── Stat polish ──────────────────────────────────────────────────────── */
.stat {
  position: relative;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.stat::after {
  content: '';
  position: absolute;
  top: -40%; right: -20%;
  width: 120px; height: 120px;
  background: radial-gradient(circle, var(--indigo-soft), transparent 70%);
  opacity: .6;
  pointer-events: none;
  transition: transform var(--dur-slow) var(--ease);
}
.stat:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.stat:hover::after { transform: scale(1.4); }
.stat-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ─── Pipeline polish ──────────────────────────────────────────────────── */
.pipe-step {
  cursor: default;
}
.pipe-step:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--border-strong); }
.pipe-step.active {
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--indigo-soft) 100%);
}

/* ─── Pattern card polish ──────────────────────────────────────────────── */
.pattern-card {
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.pattern-card:hover { transform: translateY(-2px); }
.pattern-card.selected::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: 10px; right: 10px;
  width: 20px; height: 20px;
  background: var(--indigo);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  box-shadow: 0 2px 8px var(--indigo-glow);
  animation: popIn .25s var(--ease-spring);
}
@keyframes popIn {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

/* ─── Vid card polish ──────────────────────────────────────────────────── */
.vid-card {
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  box-shadow: var(--shadow-xs);
}
.vid-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.vid-thumb {
  transition: transform var(--dur-slow) var(--ease);
  overflow: hidden;
}
.vid-card:hover .vid-thumb { transform: scale(1.02); }

/* ─── Card icon — gradient overlay ─────────────────────────────────────── */
.card-icon {
  position: relative;
  overflow: hidden;
}
.card-icon::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 50%);
  pointer-events: none;
}
.card-icon.indigo { box-shadow: inset 0 0 0 1px rgba(91,91,247,.18); }
.card-icon.cyan { box-shadow: inset 0 0 0 1px rgba(6,182,212,.18); }
.card-icon.orange { box-shadow: inset 0 0 0 1px rgba(249,115,22,.18); }
.card-icon.green { box-shadow: inset 0 0 0 1px rgba(16,185,129,.18); }

/* ─── Mobile menu polish ───────────────────────────────────────────────── */
@media (max-width: 880px) {
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    gap: 2px;
    box-shadow: var(--shadow-md);
    display: none;
  }
  .nav-links.open { display: flex; animation: navSlide .25s var(--ease-out); }
  .nav-link { padding: 12px 14px; font-size: 14.5px; }
  .nav-link.active::after { display: none; }
  .mobile-toggle { display: inline-flex !important; }
}
@media (min-width: 881px) {
  .mobile-toggle { display: none !important; }
}
@keyframes navSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ─── Onboarding banner polish ─────────────────────────────────────────── */
.onboard {
  position: relative;
  overflow: hidden;
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}
.onboard::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--grad-mesh);
  opacity: .5;
  pointer-events: none;
}
.onboard > * { position: relative; }
.onboard h3 { letter-spacing: -.02em; font-weight: 700; }

/* ─── Step progress bar polish ─────────────────────────────────────────── */
.steps {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
.step.active .step-num,
.step.done .step-num {
  background: var(--indigo);
  color: #fff;
  box-shadow: 0 2px 8px var(--indigo-glow);
}
.step.done .step-num::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 11px;
}
.step.done .step-num > * { display: none; }

/* ─── Drawer / Notifications polish ────────────────────────────────────── */
.drawer {
  background: var(--bg-glass) !important;
  border-left: 1px solid var(--border) !important;
  box-shadow: -12px 0 40px rgba(11,16,32,.18) !important;
}
[data-theme="dark"] .drawer { background: var(--bg-glass) !important; }

.notif {
  border-radius: 12px;
  margin-bottom: 4px;
}
.notif:hover { background: var(--bg-soft); }
.notif.unread {
  background: var(--indigo-soft);
}
.notif.unread:hover { background: color-mix(in srgb, var(--indigo-soft) 70%, var(--indigo) 8%); }

/* ─── Palette polish ───────────────────────────────────────────────────── */
.palette {
  background: var(--bg-glass) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 30px 80px rgba(11,16,32,.32), 0 8px 16px rgba(11,16,32,.08) !important;
}
[data-theme="dark"] .palette { background: var(--bg-glass) !important; }

/* ─── Segmented control — subtle tune ──────────────────────────────────── */
.segmented {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  padding: 4px;
}
[data-theme="dark"] .segmented { background: var(--bg-soft); }
.seg-pill {
  font-family: inherit;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: -.005em;
  padding: 7px 14px;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.seg-pill:hover:not(.active) { color: var(--text); background: var(--bg-card); }
.seg-pill.active {
  background: var(--bg-card);
  color: var(--indigo);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border);
}
[data-theme="dark"] .seg-pill.active {
  background: var(--bg-card);
  color: var(--indigo);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border-strong);
}

/* ─── Row toolbar ──────────────────────────────────────────────────────── */
.row-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}

/* ─── Kanban polish — softer columns, smoother drag ────────────────────── */
.kanban-col {
  background: var(--bg-soft);
  border-radius: 14px;
  padding: 12px;
  transition: background var(--dur-fast) var(--ease);
}
.kanban-col-head {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  border-bottom-color: var(--border);
  padding-bottom: 10px;
  margin-bottom: 4px;
}
.kanban-card {
  border-radius: 11px;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  box-shadow: var(--shadow-xs);
}
.kanban-card:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.kanban-list.drop-hover {
  background: var(--indigo-soft);
  outline: 2px dashed var(--indigo);
  outline-offset: -4px;
}
.kanban-empty {
  color: var(--text-dim);
  font-size: 12px;
  font-style: italic;
}

/* ─── Page card polish ─────────────────────────────────────────────────── */
.page-card {
  border-radius: 16px;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.page-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.page-card-cover {
  height: 120px;
  position: relative;
  overflow: hidden;
}
.page-card-cover::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.12) 100%);
  pointer-events: none;
}

/* ─── Table polish ─────────────────────────────────────────────────────── */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
}
th, td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
th {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--bg-soft);
}
tr:last-child td { border-bottom: 0; }
tr:hover td { background: var(--bg-soft); }
.table-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

/* ─── Field validation feedback ────────────────────────────────────────── */
input.invalid, select.invalid, textarea.invalid,
.input.invalid {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px var(--red-soft) !important;
}
input.valid, select.valid, textarea.valid,
.input.valid {
  border-color: var(--green) !important;
}

/* ─── Switch toggle (modern) ───────────────────────────────────────────── */
.switch {
  position: relative;
  display: inline-block;
  width: 42px; height: 24px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
  position: absolute; cursor: pointer;
  inset: 0;
  background: var(--border-strong);
  border-radius: 999px;
  transition: background var(--dur) var(--ease);
}
.switch-slider::before {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-spring);
}
.switch input:checked + .switch-slider { background: var(--indigo); }
.switch input:checked + .switch-slider::before { transform: translateX(18px); }

/* ─── Tooltip polish ───────────────────────────────────────────────────── */
[data-tip] {
  position: relative;
}
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--bg-card);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  z-index: 100;
  box-shadow: var(--shadow-md);
  pointer-events: none;
  animation: fadeInUp .15s var(--ease-out);
}

/* ─── Floating action button (FAB) reserved class ──────────────────────── */
.fab {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #5b5bf7);
  color: #fff;
  border: 0;
  box-shadow: 0 8px 24px var(--indigo-glow), 0 4px 8px rgba(11,16,32,.12);
  cursor: pointer;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 20px;
  z-index: 90;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 12px 32px var(--indigo-glow), 0 6px 12px rgba(11,16,32,.16); }
.fab:active { transform: scale(.96); }

/* ─── Help icon polish ─────────────────────────────────────────────────── */
.help-icon {
  width: 17px; height: 17px;
  font-size: 10.5px;
  border-radius: 50%;
  transition: all var(--dur-fast) var(--ease);
}
.help-icon:hover { transform: scale(1.1); }

/* ─── Footer polish ────────────────────────────────────────────────────── */
.footer {
  margin-top: 64px;
  padding: 48px 24px 36px;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
}
.footer .brand { justify-content: center; margin-bottom: 8px; }

/* ─── Responsive grid ──────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .grid-2 { grid-template-columns: 1fr; }
  .hero-cta { width: 100%; }
  .hero-cta .btn { flex: 1; min-width: 140px; }
}

/* ─── Utility refinements ──────────────────────────────────────────────── */
.text-center { text-align: center; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }

/* ─── No-scroll lock when modal open ───────────────────────────────────── */
body.has-modal { overflow: hidden; }

/* ─── Brand mark gentle pulse ──────────────────────────────────────────── */
.brand .brand-mark::after {
  animation: brandPulse 2.4s ease-in-out infinite;
}
@keyframes brandPulse {
  0%, 100% { box-shadow: 0 0 10px var(--indigo); transform: scale(1); }
  50% { box-shadow: 0 0 18px var(--indigo); transform: scale(1.15); }
}

/* ─── Improved tag pulse for live status ───────────────────────────────── */
.tag.green {
  position: relative;
}
.tag.green.live::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  margin-right: 5px;
  animation: livePulse 1.6s ease-out infinite;
}
@keyframes livePulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.8); opacity: 0.4; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ════════════════════════════════════════════════════════════════════════
   ACTIVITY FEED · SEARCH · BULK SELECT · UX v3
   ════════════════════════════════════════════════════════════════════════ */

/* — Activity feed —————————————————————————————————————————— */
.activity-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 22px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
}
.activity-day {
  margin-bottom: 28px;
}
.activity-day-head {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 0 10px;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 12px;
}
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.activity-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: all 0.15s ease;
}
.activity-row:hover {
  border-color: var(--border-strong);
  transform: translateX(2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.activity-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--indigo) 12%, transparent);
  color: var(--indigo);
  font-size: 14px;
  flex-shrink: 0;
}
.activity-icon-cyan   { background: color-mix(in srgb, var(--cyan) 14%, transparent);   color: var(--cyan); }
.activity-icon-orange { background: color-mix(in srgb, var(--orange) 14%, transparent); color: var(--orange); }
.activity-icon-green  { background: color-mix(in srgb, var(--green) 14%, transparent);  color: var(--green); }
.activity-icon-indigo { background: color-mix(in srgb, var(--indigo) 14%, transparent); color: var(--indigo); }
.activity-body { min-width: 0; }
.activity-line {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 13.5px;
  flex-wrap: wrap;
}
.activity-line strong { color: var(--text); font-weight: 600; }
.activity-verb { color: var(--text-muted); }
.activity-target {
  font-family: var(--mono, monospace);
  font-size: 11.5px;
  background: var(--bg-soft, rgba(120,120,128,0.08));
  padding: 2px 6px;
  border-radius: 5px;
  color: var(--text-dim);
}
.activity-meta {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
}
.activity-time {
  font-size: 11.5px;
  color: var(--text-dim);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* — Segmented filter pill ————————————————————————————————— */
.seg-pill {
  display: inline-flex;
  background: var(--bg-soft, rgba(120,120,128,0.08));
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  gap: 0;
}
.seg-pill button {
  border: 0;
  background: transparent;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s ease;
  text-transform: capitalize;
}
.seg-pill button:hover {
  color: var(--text);
}
.seg-pill button.active {
  background: var(--bg-card);
  color: var(--indigo);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* — Bulk select toolbar ————————————————————————————————— */
.bulk-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin: 0 0 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: all 0.2s ease;
}
.bulk-toolbar.active {
  background: color-mix(in srgb, var(--indigo) 6%, var(--bg-card));
  border-color: color-mix(in srgb, var(--indigo) 35%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--indigo) 10%, transparent);
}
.bulk-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--border-strong);
  background: var(--bg-card);
  color: white;
  font-size: 11px;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
  transition: all 0.15s ease;
}
.bulk-check:hover { border-color: var(--indigo); }
.bulk-check.on {
  background: var(--indigo);
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--indigo) 25%, transparent);
}
.pattern-card { position: relative; }
.pattern-card.bulk-selected {
  border-color: var(--indigo);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--indigo) 30%, transparent);
}

/* — Search results layout ——————————————————————————————— */
.search-results {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.search-section h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  margin: 0 0 12px;
  font-weight: 600;
  color: var(--text);
}
.search-section h3 .tag {
  margin-left: auto;
}

/* — Danger button variant ———————————————————————————————— */
.btn-danger {
  background: color-mix(in srgb, var(--orange, #ff6b3d) 90%, white);
  color: white;
  border-color: transparent;
}
.btn-danger:hover {
  background: var(--orange, #ff6b3d);
  transform: translateY(-1px);
}

/* — Soft button variant (already may exist; ensure subtle) ——— */
.btn-soft {
  background: color-mix(in srgb, var(--indigo) 10%, transparent);
  color: var(--indigo);
  border: 1px solid color-mix(in srgb, var(--indigo) 25%, transparent);
}
.btn-soft:hover {
  background: color-mix(in srgb, var(--indigo) 18%, transparent);
}

/* — Mobile responsive ———————————————————————————————————— */
@media (max-width: 720px) {
  .activity-row {
    grid-template-columns: 32px 1fr;
    gap: 10px;
  }
  .activity-time {
    grid-column: 2;
    margin-top: 4px;
  }
  .activity-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .seg-pill {
    overflow-x: auto;
    flex-wrap: nowrap;
    width: 100%;
  }
  .bulk-toolbar {
    overflow-x: auto;
  }
}