/* === USER-AGENT ELEMENT RESET MANDATE (INV-CSS-04) === */
    a {
      text-decoration: none;
      color: inherit;
    }
    a:hover {
      text-decoration: none;
    }
    input, textarea, select, button {
      border: none;
      outline: none;
      box-shadow: none;
      font-family: inherit;
    }
    input:focus, textarea:focus, select:focus, button:focus {
      outline: none;
    }

    /* === APP SHELL === */
    body {
      display: flex;
      flex-direction: column;
      height: 100vh;
      overflow: hidden;
      background-color: var(--hud-bg);
      color: var(--hud-text-high);
    }

    /* === ZONE D: TOP COMMAND BAR === */
    #zone-top-bar {
      height: 44px;
      min-height: 44px;
      display: flex;
      align-items: center;
      gap: 0;
      background-color: var(--hud-surface-1);
      border-bottom: 1px solid var(--hud-border-subtle);
      z-index: 100;
      padding: 0 12px;
      flex-shrink: 0;
    }

    #ui-select-theme-pack {
      background-color: var(--hud-surface-2, #1e293b);
      color: var(--hud-text-high, #f8fafc);
      border: 1px solid var(--hud-border-strong, #334155);
      border-radius: 4px;
      padding: 4px 8px;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      outline: none;
      cursor: pointer;
      max-width: 320px;
    }
    #ui-select-theme-pack option {
      background-color: #0f172a;
      color: #f8fafc;
      padding: 6px 10px;
    }

    /* === WORKBENCH: 3-column layout below top bar === */
    #zone-workbench {
      display: flex;
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }

    /* === ZONE A: LEFT ICON NAV RAIL (56px collapsed, 220px expanded) === */
    #zone-left-rail {
      width: 56px;
      min-width: 56px;
      background-color: var(--hud-surface-1);
      border-right: 1px solid var(--hud-border-subtle);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      padding: 8px 0;
      z-index: 50;
      flex-shrink: 0;
      transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
    }

    #zone-left-rail.expanded {
      width: 220px;
      align-items: stretch;
    }

    /* Nav rail icon buttons */
    .rail-icon-btn {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      cursor: pointer;
      border: none;
      background-color: transparent;
      color: var(--c-bs-06);
      font-family: var(--font-sans);
      font-size: 9px;
      font-weight: 600;
      transition: background-color 0.12s ease, color 0.12s ease;
      position: relative;
      flex-shrink: 0;
    }

    .rail-icon-btn:hover {
      background-color: var(--c-bs-18);
      color: var(--c-bs-02);
    }

    .rail-icon-btn.active {
      background-color: var(--c-bs-17);
      color: var(--c-av-08);
    }

    .rail-icon-btn .rail-icon {
      font-size: 15px;
    }

    .rail-icon-btn .rail-label {
      font-size: 8px;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      font-weight: 700;
      opacity: 0.8;
    }

    /* Rail separator */
    .rail-separator {
      width: 28px;
      height: 1px;
      background-color: var(--c-bs-17);
      margin: 4px 0;
      flex-shrink: 0;
    }

    /* === ZONE WORKBENCH (fills below top bar) === */
    #zone-workbench {
      flex: 1;
      min-height: 0;
      display: flex;
      overflow: hidden;
    }

    /* === ZONE B: CENTER STAGE === */
    #zone-center-stage {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      background-color: var(--hud-bg);
      overflow: hidden;
    }

    /* Stage sub-header (context switching within center stage) */
    #zone-stage-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      height: 50px;
      min-height: 50px;
      background-color: var(--hud-surface-1);
      border-bottom: 1px solid var(--hud-border-subtle);
      flex-shrink: 0;
      gap: 12px;
    }

    /* T60 Drawer */
    #zone-t60-drawer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      background-color: var(--hud-surface-2);
      border-bottom: 1px solid var(--hud-border-subtle);
      flex-shrink: 0;
    }

    #zone-t60-drawer.open {
      max-height: 160px;
    }

    #zone-t60-drawer-inner {
      padding: 12px 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Stage canvas (ONLY scrollable layer — cv-workspace must NOT have overflow-y) */
    #zone-canvas {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding: 16px;
      display: flex;
      flex-direction: column;
    }

    /* cv-workspace must fill zone-canvas width & not create its own scroll */
    #cv-workspace {
      width: 100%;
      min-width: 0;
      flex-shrink: 0;
      transition: max-width 0.25s ease, width 0.25s ease, background-color 0.2s ease;
    }

    /* === COMPONENT BANK GRID === */
    #apex-component-bank-grid {
      display: grid;
      gap: 1rem; /* 16px (gap-4) */
      padding: 1.5rem; /* 24px (p-6) Gestalt outer anchor */
    }

    /* === ZONE C: RIGHT INSPECTOR PANEL === */
    #zone-right-panel {
      position: relative;
      width: var(--panel-right-width, 320px);
      min-width: 280px;
      max-width: 720px;
      background-color: var(--hud-surface-2);
      border-left: 1px solid var(--hud-border-subtle);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      flex-shrink: 0;
    }

    #zone-right-panel.animating {
      transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #zone-right-panel.collapsed {
      width: 0 !important;
      min-width: 0 !important;
    }

    /* Draggable Resizer Rail on Left Edge */
    .panel-resizer {
      position: absolute;
      top: 0;
      left: 0;
      width: 6px;
      height: 100%;
      cursor: col-resize;
      z-index: 50;
      user-select: none;
      transition: background-color 0.15s ease;
    }
    .panel-resizer:hover,
    .panel-resizer.dragging {
      background-color: var(--hud-accent);
      box-shadow: 0 0 8px hsla(38, 92%, 50%, 0.4);
    }

    /* Inspector panel header tabs */
    #zone-right-panel-tabs {
      display: flex;
      gap: 0;
      border-bottom: 1px solid var(--hud-border-subtle);
      background-color: var(--hud-surface-1);
      flex-shrink: 0;
    }

    .inspector-tab {
      flex: 1;
      padding: 10px 6px;
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      text-align: center;
      cursor: pointer;
      border: none;
      background-color: transparent;
      color: var(--hud-text-med);
      border-bottom: 2px solid transparent;
      transition: all 0.12s ease;
    }

    .inspector-tab.active {
      color: var(--hud-accent);
      border-bottom-color: var(--hud-accent);
      background-color: var(--hud-surface-2);
    }

    .inspector-tab:hover:not(.active) {
      color: var(--hud-text-high);
      background-color: var(--hud-surface-hover);
    }

    /* Inspector scrollable content area */
    #zone-right-panel-content {
      flex: 1;
      overflow-y: auto;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      background-color: var(--hud-surface-2);
      color: var(--hud-text-high);
    }

    /* =========================================================================
       INSPECTOR DARK WORKBENCH STYLING (Zero stark-white light mode leakage)
       ========================================================================= */
    #ui-pane-element-inspect .inspector-dark-card,
    #ui-pane-element-inspect .bg-surface-0,
    #ui-pane-element-inspect .bg-surface-1 {
      background-color: var(--hud-surface-1) !important;
      border-color: var(--hud-border-subtle) !important;
      color: var(--hud-text-high) !important;
    }

    #ui-pane-element-inspect textarea,
    #ui-pane-element-inspect input[type="text"],
    #ui-pane-element-inspect .inspector-dark-input {
      background-color: var(--hud-bg) !important;
      border: 1px solid var(--hud-border-subtle) !important;
      color: var(--hud-text-high) !important;
      font-family: var(--font-mono, monospace) !important;
    }

    #ui-pane-element-inspect textarea:focus,
    #ui-pane-element-inspect input[type="text"]:focus {
      border-color: var(--hud-accent) !important;
      box-shadow: var(--hud-focus-glow) !important;
    }

    #ui-sidebar-input-classes {
      height: 100px !important;
      min-height: 80px !important;
    }

    #ui-sidebar-input-html {
      height: 300px !important;
      min-height: 200px !important;
    }

    #ui-sidebar-btn-reset,
    #ui-sidebar-btn-copy-classes,
    #ui-pane-element-inspect .bg-surface-2 {
      background-color: var(--hud-surface-3) !important;
      border-color: var(--hud-border-strong) !important;
      color: var(--hud-text-high) !important;
    }

    #ui-sidebar-btn-reset:hover,
    #ui-sidebar-btn-copy-classes:hover,
    #ui-pane-element-inspect .bg-surface-2:hover {
      background-color: var(--hud-surface-hover) !important;
      color: #ffffff !important;
    }

    /* T60 Quick Swatch Action Buttons & Blocks */
    .t60-color-btn {
      background-color: var(--hud-surface-3);
      border: 1px solid var(--hud-border-strong);
      color: var(--hud-text-high);
      transition: all 0.12s ease;
    }
    .t60-color-btn:hover {
      background-color: var(--hud-surface-hover);
      border-color: var(--hud-accent);
      color: #ffffff;
      transform: translateY(-1px);
    }
    .t60-color-btn.active {
      border-color: var(--hud-accent) !important;
      background-color: var(--hud-surface-hover) !important;
      color: var(--hud-accent) !important;
      box-shadow: 0 0 0 1px var(--hud-accent), 0 0 8px hsla(38, 92%, 50%, 0.25) !important;
    }
    .t60-color-btn:active {
      transform: translateY(0);
    }
    .t60-color-block {
      width: 24px;
      height: 22px;
      border-radius: 4px;
      border: 1px solid rgba(255, 255, 255, 0.35);
      box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
      flex-shrink: 0;
    }
    #ui-t60-active-dot.t60-color-block {
      width: 28px;
      height: 26px;
      border-radius: 5px;
      border: 1.5px solid rgba(255, 255, 255, 0.5);
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4);
    }

    /* =========================================================================
       DARK THEME ERGONOMIC SCROLLBAR ARCHITECTURE (W3C + WebKit)
       Eliminates OS default white scrollbars & blends seamlessly with dark mode
       ========================================================================= */

    /* W3C Standard (Firefox) */
    * {
      scrollbar-width: thin;
      scrollbar-color: var(--c-bs-15, #334155) transparent;
    }

    /* WebKit / Chromium (Chrome, Edge, Safari, Opera) */
    ::-webkit-scrollbar {
      width: 7px;
      height: 7px;
    }

    ::-webkit-scrollbar-track {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background-color: var(--c-bs-15, #334155);
      border-radius: 9999px;
      border: 2px solid transparent;
      background-clip: content-box;
      transition: background-color 0.15s ease;
    }

    ::-webkit-scrollbar-thumb:hover {
      background-color: var(--c-bs-13, #475569);
      background-clip: content-box;
    }

    ::-webkit-scrollbar-thumb:active {
      background-color: var(--color-accent, #f59e0b);
      background-clip: content-box;
    }

    ::-webkit-scrollbar-corner {
      background: transparent;
    }

    /* Micro-scrollbars for compact panes (diff log, terminal, pre, code) */
    #ui-issues-list,
    #ui-diff-log-container,
    #ui-curator-input,
    #ui-raw-css-editor,
    pre,
    code {
      scrollbar-width: thin;
      scrollbar-color: var(--c-bs-16, #1e293b) transparent;
    }

    #ui-issues-list::-webkit-scrollbar,
    #ui-diff-log-container::-webkit-scrollbar,
    #ui-curator-input::-webkit-scrollbar,
    #ui-raw-css-editor::-webkit-scrollbar,
    pre::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }

    #ui-issues-list::-webkit-scrollbar-thumb,
    #ui-diff-log-container::-webkit-scrollbar-thumb,
    #ui-curator-input::-webkit-scrollbar-thumb,
    #ui-raw-css-editor::-webkit-scrollbar-thumb,
    pre::-webkit-scrollbar-thumb {
      background-color: var(--c-bs-16, #1e293b);
      border-radius: 9999px;
      border: 1px solid transparent;
      background-clip: content-box;
    }

    #ui-issues-list::-webkit-scrollbar-thumb:hover,
    #ui-diff-log-container::-webkit-scrollbar-thumb:hover,
    #ui-curator-input::-webkit-scrollbar-thumb:hover,
    #ui-raw-css-editor::-webkit-scrollbar-thumb:hover,
    pre::-webkit-scrollbar-thumb:hover {
      background-color: var(--c-bs-14, #3b4252);
    }

    /* === INSPECTOR MODE OVERLAY (INV-NEG-15) === */
    .inspect-mode-active #cv-workspace * {
      cursor: auto;
    }
    .inspect-highlight {
      outline: 2px dashed var(--focal-core, #f59e0b) !important;
      outline-offset: -1px;
      background-color: rgba(245, 158, 11, 0.08) !important;
    }