:root {
  --base: #0a0b10;
  --base-2: #0c0e15;
  --raised: #12141c;
  --raised-2: #171a24;
  --glass: rgba(22, 25, 35, 0.55);
  --glass-strong: rgba(18, 20, 29, 0.78);
  --hair: rgba(255, 255, 255, 0.08);
  --hair-strong: rgba(255, 255, 255, 0.14);

  --text: #e7e9f2;
  --text-dim: #9aa1b4;
  --text-faint: #656c80;

  --accent-a: #7c5cff;
  --accent-b: #22d3ee;
  --accent: #8b6cff;
  --accent-grad: linear-gradient(120deg, var(--accent-a), var(--accent-b));
  --accent-soft: rgba(124, 92, 255, 0.16);

  --ok: #34d399;
  --ok-dim: #065f46;
  --warn: #fbbf24;
  --warn-dim: #78350f;
  --bad: #fb7185;
  --bad-dim: #7f1d1d;
  --info: #60a5fa;
  --info-dim: #1e3a8a;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;

  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 8px 24px rgba(0,0,0,.45);
  --sh-3: 0 20px 60px rgba(0,0,0,.55);
  --glow: 0 0 0 1px rgba(124,92,255,.35), 0 8px 30px rgba(124,92,255,.28);
  --glow-cyan: 0 0 0 1px rgba(34,211,238,.3), 0 8px 26px rgba(34,211,238,.22);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-1: .12s;
  --dur-2: .22s;
  --dur-3: .4s;

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  color-scheme: dark;
}

@font-face { font-family:'Inter'; font-weight:400; font-style:normal; font-display:swap; src:url('/studio/fonts/Inter-Regular.ttf') format('truetype'); }
@font-face { font-family:'Inter'; font-weight:700; font-style:normal; font-display:swap; src:url('/studio/fonts/Inter-Bold.ttf') format('truetype'); }
@font-face { font-family:'Inter'; font-weight:800; font-style:normal; font-display:swap; src:url('/studio/fonts/Inter-ExtraBold.ttf') format('truetype'); }
@font-face { font-family:'Inter'; font-weight:900; font-style:normal; font-display:swap; src:url('/studio/fonts/Inter-Black.ttf') format('truetype'); }
@font-face { font-family:'JetBrains Mono'; font-weight:700; font-style:normal; font-display:swap; src:url('/studio/fonts/JetBrainsMono-Bold.ttf') format('truetype'); }

* { box-sizing: border-box; }

body.studio {
  margin: 0;
  min-height: 100dvh;
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(124,92,255,.14), transparent 60%),
    radial-gradient(900px 560px at 8% 4%, rgba(34,211,238,.09), transparent 55%),
    var(--base);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-sans);
  font-feature-settings: 'cv02','cv03','cv04','ss01';
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.006em;
}

.studio ::selection { background: rgba(124,92,255,.35); color: #fff; }

.studio-wrap { margin: 0 auto; padding: 0 24px 72px; }

.mono { font-family: var(--font-mono); }
.tnum { font-variant-numeric: tabular-nums; }

.display {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  background: linear-gradient(180deg, #fff, #c9cede);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.grad-text {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--text-faint);
  font-weight: 700;
}

/* ---- glass + cards ---- */
.glass {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
}
.card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)) , var(--raised);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--hair-strong);
  box-shadow: var(--sh-2);
}
.card-glow:hover { box-shadow: var(--sh-2), 0 10px 40px rgba(124,92,255,.18); border-color: rgba(124,92,255,.4); }

.hairline { border: 1px solid var(--hair); }
.divider { height: 1px; background: var(--hair); border: 0; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  font-size: 13.5px; font-weight: 600;
  color: var(--text);
  background: var(--raised-2);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--dur-2) var(--ease);
  text-decoration: none; white-space: nowrap;
  line-height: 1;
}
.btn:hover { border-color: rgba(255,255,255,.28); background: #1b1f2b; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 16px; height: 16px; }
.btn-ghost { background: transparent; border-color: var(--hair); color: var(--text-dim); }
.btn-ghost:hover { color: var(--text); background: rgba(255,255,255,.04); }
.btn-primary {
  color: #fff;
  background: var(--accent-grad);
  border: 1px solid transparent;
  box-shadow: 0 6px 22px rgba(124,92,255,.35);
  position: relative;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(124,92,255,.5); filter: saturate(1.08) brightness(1.05); }
.btn-primary:active { transform: translateY(0); }
.btn-lg { padding: 12px 22px; font-size: 15px; border-radius: var(--r-md); }
.btn-danger { color: #ffe4e6; background: rgba(190,18,60,.18); border-color: rgba(251,113,133,.4); }
.btn-danger:hover { background: rgba(190,18,60,.3); border-color: rgba(251,113,133,.6); }

/* ---- chips ---- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-size: 11.5px; font-weight: 600;
  color: var(--text-dim);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--hair);
  border-radius: var(--r-full);
  line-height: 1;
}
.chip svg { width: 13px; height: 13px; }
.chip-accent { color: #d9d2ff; background: var(--accent-soft); border-color: rgba(124,92,255,.35); }
.chip-ok { color: #a7f3d0; background: rgba(16,185,129,.12); border-color: rgba(52,211,153,.3); }
.chip-info { color: #bfdbfe; background: rgba(59,130,246,.12); border-color: rgba(96,165,250,.3); }

/* ---- status pills ---- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 8px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .01em;
  border-radius: var(--r-full);
  line-height: 1; white-space: nowrap;
  border: 1px solid transparent;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill-done { color: #6ee7b7; background: rgba(16,185,129,.14); border-color: rgba(52,211,153,.28); }
.pill-failed { color: #fda4af; background: rgba(190,18,60,.16); border-color: rgba(251,113,133,.3); }
.pill-cancelled { color: var(--text-faint); background: rgba(255,255,255,.04); border-color: var(--hair); }
.pill-review { color: #fcd34d; background: rgba(217,119,6,.16); border-color: rgba(251,191,36,.3); }
.pill-active { color: #93c5fd; background: rgba(59,130,246,.14); border-color: rgba(96,165,250,.3); }
.pill-active .dot { animation: pill-pulse 1.4s var(--ease) infinite; box-shadow: 0 0 0 0 rgba(96,165,250,.6); }
@keyframes pill-pulse {
  0% { box-shadow: 0 0 0 0 rgba(96,165,250,.55); }
  70% { box-shadow: 0 0 0 6px rgba(96,165,250,0); }
  100% { box-shadow: 0 0 0 0 rgba(96,165,250,0); }
}
.pill-active::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(100deg, transparent 30%, rgba(147,197,253,.22) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: shimmer 2.4s linear infinite;
  pointer-events: none;
}
.pill { position: relative; overflow: hidden; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---- fields ---- */
.field {
  width: 100%;
  background: var(--base-2);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  color: var(--text);
  font: inherit; font-size: 14px;
  padding: 12px 14px;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.field::placeholder { color: var(--text-faint); }
.field:focus {
  outline: none;
  border-color: rgba(124,92,255,.55);
  background: #0c0e17;
  box-shadow: 0 0 0 4px rgba(124,92,255,.14);
}
.field-sm { padding: 7px 10px; font-size: 13px; border-radius: var(--r-sm); }
select.field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239aa1b4' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 34px; }

/* ---- stat tile ---- */
.stat {
  padding: 16px 18px;
  background: var(--raised);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
}
.stat .lab { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.stat .lab svg { width: 14px; height: 14px; color: var(--accent); }
.stat .val { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin-top: 6px; color: #fff; }
.stat .sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

/* ---- nav ---- */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--glass-strong);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-bottom: 1px solid var(--hair);
}
.nav-inner { margin: 0 auto; display: flex; align-items: center; gap: 6px; padding: 12px 24px; }
.nav-brand { display: flex; align-items: center; gap: 10px; margin-right: 14px; text-decoration: none; }
.nav-mark { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-grad); box-shadow: 0 4px 14px rgba(124,92,255,.4); color: #fff; }
.nav-mark svg { width: 17px; height: 17px; }
.nav-name { font-weight: 800; letter-spacing: -.02em; color: #fff; font-size: 15px; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500;
  color: var(--text-dim); text-decoration: none;
  transition: color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.nav-link svg { width: 15px; height: 15px; opacity: .85; }
.nav-link:hover { color: var(--text); background: rgba(255,255,255,.05); }
.nav-link.on { color: #fff; background: rgba(124,92,255,.16); }
.nav-link.on svg { color: var(--accent-b); opacity: 1; }
.nav-spacer { flex: 1; }

/* ---- production tile ---- */
.tile { display: block; overflow: hidden; text-decoration: none; color: inherit; }
.tile .media { position: relative; aspect-ratio: 16/9; background: #05060a; overflow: hidden; }
.tile .media img, .tile .media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile .media .ph { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, #12141c, #05060a); color: var(--text-faint); }
.tile .media .ph svg { width: 34px; height: 34px; }
.tile .media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(5,6,10,.85)); opacity: .9; }
.tile .badges { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: flex; gap: 6px; align-items: center; }
.tile .quick { position: absolute; top: 10px; right: 10px; z-index: 3; opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.tile:hover .quick { opacity: 1; }
.tile .body { padding: 12px 14px; }
.tile .ttl { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile:hover .ttl { color: #fff; }
.tile .meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 11.5px; color: var(--text-faint); }
.tile .cost { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text-dim); }
.dots { display: inline-flex; gap: 3px; align-items: center; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--hair-strong); display: block; }
.dots i.on { background: var(--accent-b); box-shadow: 0 0 6px rgba(34,211,238,.6); }

/* ---- data table ---- */
.dt { width: 100%; border-collapse: collapse; font-size: 13px; }
.dt th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); font-weight: 700; padding: 10px 14px; border-bottom: 1px solid var(--hair); }
.dt td { padding: 12px 14px; border-bottom: 1px solid var(--hair); color: var(--text-dim); }
.dt tr:last-child td { border-bottom: 0; }
.dt tbody tr { transition: background var(--dur-1) var(--ease); }
.dt tbody tr:hover { background: rgba(255,255,255,.03); }

/* ---- empty state ---- */
.empty { padding: 56px 24px; text-align: center; border: 1px dashed var(--hair-strong); border-radius: var(--r-lg); color: var(--text-dim); }
.empty .ico { width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-b); }
.empty .ico svg { width: 22px; height: 22px; }
.empty h3 { margin: 0 0 4px; color: var(--text); font-size: 15px; font-weight: 700; }
.empty p { margin: 0; font-size: 13px; color: var(--text-faint); }

/* ---- misc motion ---- */
.rise { animation: rise var(--dur-3) var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.htmx-indicator { opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* ---- selectable radio cards (peer pattern replacement, framework-agnostic) ---- */
.opt { cursor: pointer; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt .opt-face {
  border: 1px solid var(--hair);
  background: var(--raised);
  border-radius: var(--r-md);
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.opt:hover .opt-face { border-color: var(--hair-strong); }
.opt input:checked + .opt-face {
  border-color: rgba(124,92,255,.6);
  background: rgba(124,92,255,.1);
  box-shadow: 0 0 0 1px rgba(124,92,255,.4), 0 6px 20px rgba(124,92,255,.18);
}

/* ---- segmented control ---- */
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--base-2); border: 1px solid var(--hair); border-radius: var(--r-md); }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg .seg-face { display: block; padding: 6px 13px; font-size: 13px; font-weight: 600; color: var(--text-dim); border-radius: var(--r-sm); transition: all var(--dur-2) var(--ease); white-space: nowrap; }
.seg label:hover .seg-face { color: var(--text); }
.seg input:checked + .seg-face { color: #fff; background: rgba(124,92,255,.22); box-shadow: inset 0 0 0 1px rgba(124,92,255,.35); }