/* =============================================================
   Lagrantis Studio — Design Tokens + Studio Shell
   -------------------------------------------------------------
   Ported verbatim from the Claude mockup design bundle
   (lagrantis-styles.css + studio-styles.css). Variable names
   are kept IDENTICAL so later agents/components match the
   brand contract. Dark-first; light via [data-theme="light"].
   Accent via [data-accent="..."]; density via [data-density].
   ============================================================= */

/* -------------------------------------------------------------
   Webfonts — Bricolage Grotesque (display) / Geist (sans) /
   JetBrains Mono (mono). Same Google Fonts @import as mockup.
   ------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@10..48,500;10..48,600;10..48,700;10..48,800&family=Geist:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* =============================================================
   DARK THEME (default / :root baseline)
   ============================================================= */
:root {
  color-scheme: dark;

  /* ---------- ACCENT SYSTEM (default: purple; switch via [data-accent]) ---------- */
  --accent-50:   #F5F3FF;
  --accent-100:  #EDE9FE;
  --accent-200:  #DDD6FE;
  --accent-300:  #C4B5FD;
  --accent-400:  #A78BFA;
  --accent-500:  #8B5CF6;
  --accent-600:  #7C3AED;
  --accent-700:  #6D28D9;
  --accent-800:  #5B21B6;
  --accent-900:  #4C1D95;

  --accent-hover:  var(--accent-600);
  --on-accent:     #FFFFFF;
  --accent-a8:     color-mix(in srgb, var(--accent-500) 8%, transparent);
  --accent-a12:    color-mix(in srgb, var(--accent-500) 12%, transparent);
  --accent-a18:    color-mix(in srgb, var(--accent-500) 18%, transparent);
  --accent-a28:    color-mix(in srgb, var(--accent-500) 28%, transparent);

  /* ---------- Surface ladder (cool near-black, slight indigo undertone) ---------- */
  --ink:        #0E0F16;
  --surface-1:  #161824;
  --surface-2:  #1E2030;
  --surface-3:  #2A2D3E;
  --surface-4:  #3A3D52;

  /* ---------- Foreground ladder ---------- */
  --fg-1:       #E8E9EF;
  --fg-2:       #A1A4B5;
  --fg-3:       #6B6E83;
  --fg-4:       #44475C;

  --border:         #2A2D3E;
  --border-strong:  #44475C;

  /* ---------- BRAND — Indigo ---------- */
  --indigo-50:  #EEF2FF;
  --indigo-100: #E0E7FF;
  --indigo-200: #C7D2FE;
  --indigo-300: #A5B4FC;
  --indigo-400: #818CF8;
  --indigo-500: #6366F1;
  --indigo-600: #4F46E5;
  --indigo-700: #4338CA;
  --indigo-800: #3730A3;
  --indigo-900: #312E81;

  --brand:     var(--accent-500);
  --brand-hover: var(--accent-600);
  --on-brand:  var(--on-accent);

  /* ---------- BRAND — Violet ---------- */
  --violet-300: #C4B5FD;
  --violet-400: #A78BFA;
  --violet-500: #8B5CF6;
  --violet-700: #6D28D9;

  /* ---------- CATEGORY PILLS ---------- */
  --pill-match-fg:    #34D399;
  --pill-match-bg:    rgba(52, 211, 153, 0.14);
  --pill-transform-fg: #C4B5FD;
  --pill-transform-bg: rgba(196, 181, 253, 0.14);
  --pill-format-fg:   #FBBF24;
  --pill-format-bg:   rgba(251, 191, 36, 0.14);
  --pill-lookup-fg:   #7DD3FC;
  --pill-lookup-bg:   rgba(125, 211, 252, 0.14);
  --pill-meta-fg:     #CBD5E1;
  --pill-meta-bg:     rgba(203, 213, 225, 0.10);
  --pill-danger-fg:   #FDA4AF;
  --pill-danger-bg:   rgba(253, 164, 175, 0.14);
  --pill-running-fg:  #BEF264;
  --pill-running-bg:  rgba(190, 242, 100, 0.14);

  /* ---------- STATUS ---------- */
  --status-running:    #84CC16;
  --status-queued:     #818CF8;
  --status-waiting:    #F59E0B;
  --status-failed:     #F43F5E;
  --status-completed:  #10B981;
  --status-muted:      var(--fg-3);

  --status-running-bg:    rgba(132, 204, 22, 0.14);
  --status-queued-bg:     rgba(129, 140, 248, 0.14);
  --status-waiting-bg:    rgba(245, 158, 11, 0.14);
  --status-failed-bg:     rgba(244, 63, 94, 0.14);
  --status-completed-bg:  rgba(16, 185, 129, 0.14);

  /* ---------- RISK ---------- */
  --risk-low:        #10B981;
  --risk-medium:     #F59E0B;
  --risk-high:       #FB923C;
  --risk-critical:   #F43F5E;

  /* ---------- DIFF ---------- */
  --diff-add-bg:   #1A3326;
  --diff-add-fg:   #6EE7B7;
  --diff-add-edge: #22543D;
  --diff-del-bg:   #3F1820;
  --diff-del-fg:   #FDA4AF;
  --diff-del-edge: #6E2330;

  /* ---------- PROVIDER tints ---------- */
  --provider-claude:  #D97757;
  --provider-codex:   #10A37F;
  --provider-cursor:  #9B6CFF;

  /* ---------- SEMANTIC aliases ---------- */
  --success:     var(--status-completed);
  --success-bg:  var(--status-completed-bg);
  --warning:     var(--status-waiting);
  --warning-bg:  var(--status-waiting-bg);
  --danger:      var(--status-failed);
  --danger-bg:   var(--status-failed-bg);
  --info:        var(--status-queued);
  --info-bg:     var(--status-queued-bg);

  /* ---------- Aliases ---------- */
  --bg:        var(--ink);
  --fg:        var(--fg-1);
  --accent:    var(--violet-400);

  /* ---------- Transparency ladder ---------- */
  --ink-a8:    rgba(14, 15, 22, 0.08);
  --ink-a18:   rgba(14, 15, 22, 0.18);
  --ink-a60:   rgba(14, 15, 22, 0.60);
  --ink-a80:   rgba(14, 15, 22, 0.80);

  --fg-a8:     rgba(232, 233, 239, 0.08);
  --fg-a12:    rgba(232, 233, 239, 0.12);
  --fg-a18:    rgba(232, 233, 239, 0.18);
  --fg-a28:    rgba(232, 233, 239, 0.28);
  --fg-a60:    rgba(232, 233, 239, 0.60);

  --indigo-a8:    rgba(99, 102, 241, 0.08);
  --indigo-a12:   rgba(99, 102, 241, 0.12);
  --indigo-a18:   rgba(99, 102, 241, 0.18);
  --indigo-a28:   rgba(99, 102, 241, 0.28);

  /* ---------- DENSITY base ---------- */
  --row-h:           36px;
  --row-h-dense:     28px;
  --control-h:       32px;
  --control-h-dense: 28px;
  --pad-y:           10px;
  --pad-y-dense:     6px;

  /* ---------- TOUCH / MOBILE ---------- */
  --touch-min:     44px;
  --touch-cozy:    48px;
  --touch-gap:     8px;

  /* ---------- BREAKPOINTS ---------- */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;

  /* ---------- DATA VIZ ramp ---------- */
  --data-1: #6366F1;
  --data-2: #A78BFA;
  --data-3: #10B981;
  --data-4: #F59E0B;
  --data-5: #38BDF8;
  --data-6: #F43F5E;
  --data-7: #84CC16;

  /* ---------- TYPE — Families ---------- */
  --font-display: 'Bricolage Grotesque', 'Geist', system-ui, sans-serif;
  --font-sans:    'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPE — Scale ---------- */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;
  --text-4xl:  44px;
  --text-5xl:  60px;
  --text-6xl:  84px;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.45;
  --leading-relaxed: 1.6;

  --track-tight:    -0.02em;
  --track-snug:     -0.01em;
  --track-normal:   0;
  --track-mono:     -0.01em;
  --track-eyebrow:  0.08em;

  /* ---------- SPACING (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 40px;
  --space-7: 64px;
  --space-8: 96px;

  /* ---------- RADII ---------- */
  --radius-sm:    4px;
  --radius-md:    6px;
  --radius-lg:    10px;
  --radius-xl:    14px;
  --radius-2xl:   20px;
  --radius-pill:  999px;

  /* ---------- BORDERS ---------- */
  --border-thin:    1px solid var(--border);
  --border-medium:  1px solid var(--border-strong);
  --border-focus:   1.5px solid var(--accent-500);
  --border-dashed:  1px dashed var(--fg-a18);

  /* ---------- SHADOWS ---------- */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.32);
  --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-xl:  0 24px 56px rgba(0, 0, 0, 0.55);

  --shadow-glow-indigo:  0 0 0 3px rgba(99, 102, 241, 0.32);
  --shadow-glow-violet:  0 0 0 3px rgba(167, 139, 250, 0.32);
  --shadow-glow-running: 0 0 12px rgba(132, 204, 22, 0.45);
  --shadow-glow-accent:  0 0 0 3px var(--accent-a28);

  /* ---------- MOTION ---------- */
  --ease-out-smooth: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --dur-page: 400ms;

  /* ---------- LAYOUT ---------- */
  --content-max:  1200px;
  --sidebar-w:    220px;
  --rightpane-w:  320px;
  --topbar-h:     56px;
}

/* =============================================================
   LIGHT THEME (opt-in)
   ============================================================= */
[data-theme="light"] {
  color-scheme: light;

  --ink:        #F4F4F7;
  --surface-1:  #FFFFFF;
  --surface-2:  #F8F8FB;
  --surface-3:  #EEEEF3;
  --surface-4:  #E1E2EA;

  --fg-1:       #1F2235;
  --fg-2:       #4B4F66;
  --fg-3:       #6B6E83;
  --fg-4:       #A1A4B5;

  --border:        #E5E7EE;
  --border-strong: #C7CAD5;

  --pill-match-fg:    #047857;
  --pill-match-bg:    #D1FAE5;
  --pill-transform-fg: #6D28D9;
  --pill-transform-bg: #EDE9FE;
  --pill-format-fg:   #B45309;
  --pill-format-bg:   #FEF3C7;
  --pill-lookup-fg:   #075985;
  --pill-lookup-bg:   #E0F2FE;
  --pill-meta-fg:     #475569;
  --pill-meta-bg:     #F1F5F9;
  --pill-danger-fg:   #B91C1C;
  --pill-danger-bg:   #FEE2E2;
  --pill-running-fg:  #3F6212;
  --pill-running-bg:  #ECFCCB;

  --status-running-bg:    rgba(132, 204, 22, 0.18);
  --status-queued-bg:     rgba(99, 102, 241, 0.14);
  --status-waiting-bg:    rgba(245, 158, 11, 0.18);
  --status-failed-bg:     rgba(244, 63, 94, 0.14);
  --status-completed-bg:  rgba(16, 185, 129, 0.18);

  --diff-add-bg:   #D1FAE5;
  --diff-add-fg:   #047857;
  --diff-add-edge: #6EE7B7;
  --diff-del-bg:   #FEE2E2;
  --diff-del-fg:   #B91C1C;
  --diff-del-edge: #FCA5A5;

  --shadow-sm:  0 1px 2px rgba(31, 34, 53, 0.06);
  --shadow-md:  0 4px 12px rgba(31, 34, 53, 0.08), 0 2px 4px rgba(31, 34, 53, 0.04);
  --shadow-lg:  0 12px 32px rgba(31, 34, 53, 0.12), 0 4px 8px rgba(31, 34, 53, 0.06);

  --ink-a8:   rgba(31, 34, 53, 0.06);
  --ink-a18:  rgba(31, 34, 53, 0.14);
  --ink-a60:  rgba(31, 34, 53, 0.55);
  --fg-a8:    rgba(31, 34, 53, 0.06);
  --fg-a18:   rgba(31, 34, 53, 0.14);
  --fg-a60:   rgba(31, 34, 53, 0.55);
}

/* =============================================================
   Reduced motion
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-page: 0ms;
  }
  .lg-pulse { animation: none !important; }
}

/* =============================================================
   ACCENT PRESETS — via [data-accent] on <html>
   ============================================================= */
[data-accent="purple"] {
  --accent-50:#F5F3FF;--accent-100:#EDE9FE;--accent-200:#DDD6FE;--accent-300:#C4B5FD;
  --accent-400:#A78BFA;--accent-500:#8B5CF6;--accent-600:#7C3AED;--accent-700:#6D28D9;
  --accent-800:#5B21B6;--accent-900:#4C1D95;
}
[data-accent="indigo"] {
  --accent-50:#EEF2FF;--accent-100:#E0E7FF;--accent-200:#C7D2FE;--accent-300:#A5B4FC;
  --accent-400:#818CF8;--accent-500:#6366F1;--accent-600:#4F46E5;--accent-700:#4338CA;
  --accent-800:#3730A3;--accent-900:#312E81;
}
[data-accent="emerald"] {
  --accent-50:#ECFDF5;--accent-100:#D1FAE5;--accent-200:#A7F3D0;--accent-300:#6EE7B7;
  --accent-400:#34D399;--accent-500:#10B981;--accent-600:#059669;--accent-700:#047857;
  --accent-800:#065F46;--accent-900:#064E3B;
}
[data-accent="sky"] {
  --accent-50:#F0F9FF;--accent-100:#E0F2FE;--accent-200:#BAE6FD;--accent-300:#7DD3FC;
  --accent-400:#38BDF8;--accent-500:#0EA5E9;--accent-600:#0284C7;--accent-700:#0369A1;
  --accent-800:#075985;--accent-900:#0C4A6E;
}

/* =============================================================
   DENSITY — [data-density="compact"] tightens rows + padding
   ============================================================= */
[data-density="compact"] {
  --row-h:     var(--row-h-dense);
  --control-h: var(--control-h-dense);
  --pad-y:     var(--pad-y-dense);
  --text-base: 12px;
  --space-4:   12px;
  --space-5:   18px;
}

/* =============================================================
   Base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-feature-settings: 'ss01', 'cv11';
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--indigo-a28);
  color: var(--fg-1);
}

:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--shadow-glow-accent);
  border-radius: var(--radius-sm);
}

/* =============================================================
   The Mark — Lagrantis logo
   ============================================================= */
.lg-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-1);
}
.lg-mark__glyph { width: 24px; height: 24px; flex: 0 0 auto; display: block; }
.lg-mark__word {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
  line-height: 1;
}
.lg-mark__sub {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  border-left: 1px solid var(--border);
  padding-left: 8px;
  margin-left: 2px;
}

/* =============================================================
   Buttons
   ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  height: var(--control-h);
  padding: 0 12px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  background: transparent;
  color: var(--fg-1);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out-smooth),
              border-color var(--dur-fast) var(--ease-out-smooth),
              color var(--dur-fast) var(--ease-out-smooth);
  line-height: 1;
}
.btn:focus-visible { box-shadow: var(--shadow-glow-accent); outline: none; }
.btn--primary { background: var(--accent-500); color: var(--on-accent); border-color: var(--accent-500); }
.btn--primary:hover { background: var(--accent-600); border-color: var(--accent-600); }
.btn--secondary { background: var(--surface-2); border-color: var(--border); color: var(--fg-1); }
.btn--secondary:hover { background: var(--surface-3); border-color: var(--border-strong); }
.btn--ghost { background: transparent; color: var(--fg-2); }
.btn--ghost:hover { background: var(--surface-2); color: var(--fg-1); }
.btn--sm { height: 24px; padding: 0 8px; font-size: var(--text-xs); }
.btn--icon { width: var(--control-h); padding: 0; }

/* =============================================================
   Pill + status dot
   ============================================================= */
@keyframes lg-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}
.lg-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--fg-3);
  flex-shrink: 0;
}
.lg-dot[data-status="running"] {
  background: var(--status-running);
  box-shadow: var(--shadow-glow-running);
  animation: lg-pulse 1.6s var(--ease-out-smooth) infinite;
}
.lg-dot[data-status="queued"]    { background: var(--status-queued); }
.lg-dot[data-status="waiting"]   { background: var(--status-waiting); }
.lg-dot[data-status="failed"]    { background: var(--status-failed); }
.lg-dot[data-status="completed"] { background: var(--status-completed); }
.lg-dot[data-status="muted"]     { background: var(--status-muted); }

.lg-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.muted { color: var(--fg-3); }
.mono { font-family: var(--font-mono); letter-spacing: var(--track-mono); }
.row { display: flex; align-items: center; gap: 8px; }

/* =============================================================
   STUDIO SHELL scaffolding
   ============================================================= */
.studio {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 44px 36px 1fr 22px;
  grid-template-columns: 240px 1fr 280px;
  grid-template-areas:
    "topbar  topbar  topbar"
    "subbar  subbar  subbar"
    "palette canvas  inspector"
    "status  status  status";
  background: var(--ink);
  color: var(--fg-1);
  overflow: hidden;
  font-family: var(--font-sans);
}

.studio__topbar {
  grid-area: topbar;
  display: flex; align-items: center; gap: 12px;
  padding: 0 12px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}
.studio__subbar {
  grid-area: subbar;
  display: flex; align-items: center; gap: 4px;
  padding: 0 8px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}
.studio__palette {
  grid-area: palette;
  background: var(--surface-1);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.studio__canvas {
  grid-area: canvas;
  position: relative;
  background: var(--ink);
  overflow: hidden;
}
.studio__inspector {
  grid-area: inspector;
  background: var(--surface-1);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.studio__status {
  grid-area: status;
  display: flex; align-items: center; gap: 16px;
  padding: 0 12px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  letter-spacing: 0.06em;
}
.studio__status .sep { width: 1px; height: 12px; background: var(--border); }
.studio__status .live { color: var(--status-running); }
.studio__status .ibtn {
  height: 18px;
  display: inline-flex; align-items: center;
  border: 0; background: transparent;
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.studio__status .ibtn:hover { background: var(--surface-3); color: var(--fg-1); }

/* ---------- Topbar bits ---------- */
.studio__topbar .menu {
  display: flex; align-items: center; gap: 2px;
  font-size: var(--text-sm);
  color: var(--fg-2);
}
.studio__topbar .menu button {
  background: transparent; border: 0; color: var(--fg-2);
  padding: 4px 10px; border-radius: var(--radius-sm);
  font: inherit; cursor: pointer;
}
.studio__topbar .menu button:hover { background: var(--surface-2); color: var(--fg-1); }
.studio__topbar .title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--fg-1);
}
.studio__topbar .doc {
  flex: 0 1 320px;
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-sm);
  color: var(--fg-2);
  padding: 4px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-left: 8px;
}
.studio__topbar .doc .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--status-running); box-shadow: var(--shadow-glow-running); }
.studio__topbar .spacer { flex: 1; }

/* ---------- Diagram-type switcher ---------- */
.studio__types {
  display: flex; gap: 2px; align-items: center;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--fg-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 2px;
}
.studio__types .type {
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  border: 0;
  background: transparent;
  color: var(--fg-3);
  font: inherit;
  cursor: pointer;
}
.studio__types .type:hover { color: var(--fg-1); }
.studio__types .type.is-active {
  background: var(--accent-a18);
  color: var(--accent-300);
}

/* AI toggle pill in the topbar */
.studio__topbar .ai-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px;
  padding: 0 10px 0 8px;
  background: var(--accent-a12);
  border: 1px solid var(--accent-a28);
  color: var(--accent-300);
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 500;
}
.studio__topbar .ai-toggle:hover { background: var(--accent-a18); }
.studio__topbar .ai-toggle .spark { width: 14px; height: 14px; }

/* ---------- Subbar (quick toolbar) ---------- */
.studio__subbar .group {
  display: flex; align-items: center; gap: 2px;
  padding: 0 4px;
  border-right: 1px solid var(--border);
  height: 100%;
}
.studio__subbar .group:last-child { border-right: 0; }
.studio__subbar .group:first-child { padding-left: 4px; }
.studio__subbar .ibtn {
  width: 26px; height: 26px;
  border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-2);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 12px;
}
.studio__subbar .ibtn:hover { background: var(--surface-2); color: var(--fg-1); }
.studio__subbar .ibtn[aria-pressed="true"] { background: var(--accent-a18); color: var(--accent-300); }
.studio__subbar .zoom {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-2);
  padding: 0 6px;
}
.studio__subbar select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--fg-1);
  border-radius: var(--radius-sm);
  height: 22px;
  padding: 0 6px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
}

/* ---------- Palette ---------- */
.palette__search {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.palette__search input {
  width: 100%;
  height: 28px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--fg-1);
  border-radius: var(--radius-sm);
  padding: 0 8px 0 26px;
  font: inherit;
  font-size: var(--text-xs);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%236B6E83' stroke-width='1.4'><circle cx='7' cy='7' r='4'/><path d='M10 10l3 3'/></svg>");
  background-repeat: no-repeat;
  background-position: 8px center;
}
.palette__search input::placeholder { color: var(--fg-3); }
.palette__body { flex: 1; overflow-y: auto; padding: 4px 0 12px; }
.palette__group { border-bottom: 1px solid var(--border); }
.palette__group:last-child { border-bottom: 0; }
.palette__head {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  cursor: pointer;
}
.palette__head:hover { color: var(--fg-1); }
.palette__head .chev { transition: transform var(--dur-fast); display: inline-block; }
.palette__head[aria-expanded="false"] .chev { transform: rotate(-90deg); }
.palette__head .count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
}
.palette__placeholder {
  padding: 10px 14px 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-4);
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.palette__foot {
  padding: 10px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 6px;
}

/* ---------- Canvas host (placeholder) ---------- */
.canvas__placeholder {
  position: absolute;
  inset: 0;
  background: #0A0B12;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border);
}
.canvas__placeholder .label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--fg-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Inspector ---------- */
.insp__tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 8px;
  gap: 0;
  background: var(--surface-1);
}
.insp__tabs button {
  background: transparent; border: 0;
  font: inherit;
  padding: 10px 10px 9px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--fg-3);
  cursor: pointer;
  border-bottom: 1.5px solid transparent;
}
.insp__tabs button.is-active {
  color: var(--fg-1);
  border-bottom-color: var(--accent-500);
}
.insp__body { flex: 1; overflow-y: auto; }
.insp__sec {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.insp__sec:last-child { border-bottom: 0; }
.insp__sec h4 {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-3);
}
.insp__row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  font-size: var(--text-xs);
}
.insp__row .k { color: var(--fg-3); font-family: var(--font-mono); letter-spacing: 0.02em; }
.insp__row input,
.insp__row select {
  width: 100%;
  height: 24px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--fg-1);
  padding: 0 6px;
  font: inherit;
  font-size: var(--text-xs);
}
.insp__row input:focus,
.insp__row select:focus {
  outline: none;
  border-color: var(--accent-500);
  box-shadow: 0 0 0 2px var(--accent-a18);
}
.insp__row .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.insp__empty {
  padding: 10px 14px;
  font-size: var(--text-xs);
  color: var(--fg-3);
  line-height: var(--leading-normal);
}

/* ---------- Validation lozenge ---------- */
.lozenge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
}
.lozenge--err { background: var(--status-failed-bg); color: var(--status-failed); }
.lozenge--warn { background: var(--status-waiting-bg); color: var(--status-waiting); }
.lozenge--ok { background: var(--status-completed-bg); color: var(--status-completed); }