:root {
      /* Studio Color System (Restrained & Purpose-Driven) */
      --bg-base: #07090e;
      --bg-surface: #0b0f19;
      --bg-surface-elevated: #111726;
      --bg-input: #04060b;
      
      --border-subtle: #1a2336;
      --border-strong: #2a3754;
      --border-focus: #0284c7;

      --text-main: #f8fafc;
      --text-secondary: #94a3b8;
      --text-muted: #8ca0ba;
      
      --accent-primary: #0273ae;
      --accent-primary-hover: #0369a1;
      --accent-primary-light: #38bdf8;
      --accent-success: #10b981;
      --accent-amber: #f59e0b;

      --font-ui: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      --font-mono: 'JetBrains Mono', monospace;

      --radius-sm: 4px;
      --radius-md: 6px;
      --radius-lg: 10px;
      --radius-tag: 16px;
    }

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

    body {
      background-color: var(--bg-base);
      color: var(--text-main);
      font-family: var(--font-ui);
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      user-select: none;
    }

    /* Accessibility focus rings (antislop R-32 Keyboard Accessibility) */
    button:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    input:focus-visible,
    .preset-chip:focus-visible,
    .export-toggle-btn:focus-visible,
    .segmented-control-option:focus-visible,
    .btn-pill:focus-visible,
    .timeline-slider:focus-visible,
    [tabindex]:focus-visible {
      outline: 2px solid var(--accent-primary-light) !important;
      outline-offset: 2px !important;
    }

    /* ========================================================
       MODERN SLIM SCROLLBAR (Cross-browser, Panels & Textareas)
       ======================================================== */
    :root {
      color-scheme: dark;
    }

    @supports (-moz-appearance: none) {
      * {
        scrollbar-width: thin;
        scrollbar-color: rgba(148, 163, 184, 0.28) #0b101b;
      }
    }

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

    *::-webkit-scrollbar-track,
    ::-webkit-scrollbar-track {
      background: rgba(15, 23, 42, 0.35);
      border-radius: 9999px;
    }

    *::-webkit-scrollbar-thumb,
    ::-webkit-scrollbar-thumb {
      background: rgba(148, 163, 184, 0.28);
      border-radius: 9999px;
      border: 1px solid rgba(15, 23, 42, 0.4);
      transition: background 0.2s ease;
    }

    *::-webkit-scrollbar-thumb:hover,
    ::-webkit-scrollbar-thumb:hover {
      background: rgba(56, 189, 248, 0.6);
    }

    *::-webkit-scrollbar-thumb:active,
    ::-webkit-scrollbar-thumb:active {
      background: var(--accent-primary-light);
    }

    *::-webkit-scrollbar-corner,
    ::-webkit-scrollbar-corner {
      background: #000000 !important;
    }

    *::-webkit-scrollbar-button,
    ::-webkit-scrollbar-button {
      display: none !important;
      width: 0 !important;
      height: 0 !important;
    }

        /* TOP NAVBAR */
    header {
      background: var(--bg-surface);
      border-bottom: 1px solid var(--border-subtle);
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 48px;
      flex-shrink: 0;
      position: sticky;
      top: 0;
      z-index: 50;
    }

    .brand-group {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .brand-mark {
      font-family: var(--font-ui);
      font-size: 15px;
      font-weight: 800;
      letter-spacing: -0.01em;
      color: var(--text-main);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .brand-logo {
      width: 22px;
      height: 22px;
      display: block;
      flex-shrink: 0;
      object-fit: contain;
    }

    .version-tag {
      font-family: var(--font-ui);
      font-size: 11px;
      font-weight: 700;
      color: var(--text-muted);
      border: 1px solid var(--border-subtle);
      padding: 1px 6px;
      border-radius: var(--radius-sm);
    }

    .nav-status-group {
      display: flex;
      align-items: center;
      gap: 8px;
      height: 28px;
    }

    .status-badge {
      font-family: var(--font-ui);
      font-variant-numeric: tabular-nums;
      font-size: 11px;
      font-weight: 600;
      padding: 0 10px;
      height: 28px;
      box-sizing: border-box;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border-subtle);
      background: var(--bg-surface-elevated);
      color: var(--text-secondary);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      line-height: 1;
    }

    .status-indicator {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent-success);
    }