/* Local NDSO handwriting faces (real app fonts) — served from public/assets, not Google. */
    @font-face {
      font-family: 'NdsoWriting1';
      src: url('../assets/NdsoWriting1-Regular.woff') format('woff'),
           url('../assets/NdsoWriting1-Regular.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'NdsoWriting2';
      src: url('../assets/NdsoWriting2-Regular.woff') format('woff'),
           url('../assets/NdsoWriting2-Regular.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }
    :root {
      --lab-bg: #0c0d10;
      --lab-panel: #141519;
      --lab-border: #252830;
      --lab-text: #eceef2;
      --lab-muted: #8b929e;
      --lab-accent: #5b9cf5;
      --lab-hover: rgba(255,255,255,.04);
    }
    * { box-sizing: border-box; }
    html.is-windows {
      scrollbar-color: rgba(139,146,158,.55) #141519;
      scrollbar-width: thin;
    }
    html.is-windows ::-webkit-scrollbar { width: 10px; height: 10px; }
    html.is-windows ::-webkit-scrollbar-track { background: #141519; }
    html.is-windows ::-webkit-scrollbar-thumb {
      background: rgba(139,146,158,.45);
      border-radius: 999px;
      border: 2px solid #141519;
    }
    html, body {
      height: 100%;
      overflow: hidden;
    }
    body {
      margin: 0;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--lab-bg);
      color: var(--lab-text);
      line-height: 1.35;
      font-size: 13px;
    }
    header {
      flex-shrink: 0;
      z-index: 20;
      background: #0c0d10;
      border-bottom: 1px solid var(--lab-border);
      padding: 10px 16px 10px;
    }
    @supports (backdrop-filter: blur(1px)) {
      header {
        background: rgba(12,13,16,.94);
        backdrop-filter: blur(16px);
      }
    }
    .header-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 10px;
    }
    .header-brand { min-width: 0; }
    header h1 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -.02em; }
    .version-tag {
      font-size: 10px;
      font-weight: 500;
      color: var(--lab-muted);
      margin-left: 6px;
      letter-spacing: 0;
    }
    header .tagline { margin: 1px 0 0; color: var(--lab-muted); font-size: 10px; }
    .header-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }
    .header-actions button {
      font: inherit; font-size: 11px; font-weight: 600;
      padding: 7px 14px; border-radius: 6px; cursor: pointer;
      border: 1px solid var(--lab-border); background: transparent; color: var(--lab-text);
    }
    .header-actions button:hover { background: var(--lab-hover); }
    .header-actions button.primary {
      background: rgba(37,99,235,.28); border-color: rgba(59,130,246,.45); color: #93c5fd;
    }
    .header-actions button.primary:hover { background: rgba(37,99,235,.42); }
    .toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0;
    }
    .toolbar-group {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 0 10px;
    }
    .toolbar-group:first-child { padding-left: 0; }
    .toolbar-label {
      font-size: 9px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--lab-muted);
      margin-right: 2px;
      white-space: nowrap;
    }
    .toolbar-label--sentence {
      text-transform: none;
      letter-spacing: -.01em;
      font-size: 10px;
      font-weight: 600;
      color: var(--lab-text);
      opacity: .72;
    }
    .toolbar-divider {
      width: 1px;
      height: 24px;
      background: var(--lab-border);
      flex-shrink: 0;
      margin: 0 2px;
    }
    .toolbar-spacer { flex: 1; min-width: 12px; }
    .toolbar input, .toolbar select, .toolbar button {
      font: inherit; font-size: 11px; border-radius: 6px; border: 1px solid var(--lab-border);
      background: var(--lab-panel); color: var(--lab-text); padding: 5px 9px;
    }
    .toolbar button { cursor: pointer; background: transparent; }
    .toolbar button:hover:not(:disabled) { background: var(--lab-hover); }
    .toolbar button.danger { color: #fca5a5; border-color: rgba(239,68,68,.35); }
    .toolbar button.danger:hover:not(:disabled) { background: rgba(127,29,29,.25); }
    .toolbar button.ghost { padding: 5px 8px; min-width: 30px; }
    .toolbar button.icon-only { padding: 5px 10px; min-width: 34px; }
    .toolbar button.icon-only .btn-icon { font-size: 15px; line-height: 1; }
    .toolbar-btn-inner {
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .btn-icon {
      font-size: 12px;
      line-height: 1;
      opacity: .88;
    }
    .toolbar button.danger-nuclear {
      background: rgba(127,29,29,.18);
      border-color: rgba(239,68,68,.55);
      color: #fecaca;
      font-weight: 600;
    }
    .toolbar button.danger-nuclear:hover:not(:disabled) {
      background: rgba(153,27,27,.35);
      border-color: rgba(248,113,113,.65);
    }
    .toolbar button.danger-nuclear .btn-icon { opacity: 1; font-size: 13px; }
    .toolbar button:disabled { opacity: .35; cursor: not-allowed; }
    .toolbar-nav {
      display: inline-flex;
      border: 1px solid var(--lab-border);
      border-radius: 6px;
      overflow: hidden;
    }
    .toolbar-nav button {
      border: none;
      border-radius: 0;
      padding: 5px 9px;
      line-height: 1;
    }
    .toolbar-nav button + button { border-left: 1px solid var(--lab-border); }
    .save-status {
      font-size: 10px;
      font-weight: 500;
      color: var(--lab-muted);
      padding: 5px 10px;
      border-radius: 6px;
      white-space: nowrap;
    }
    .save-status.fresh {
      color: #86efac;
      background: rgba(34,197,94,.1);
    }
    .save-status.saving {
      color: #fde68a;
      background: rgba(251,191,36,.12);
    }
    .save-status.error {
      color: #fca5a5;
      background: rgba(239,68,68,.12);
    }
    body.lab-booting .header-actions button,
    body.lab-booting #btnViewFocus,
    body.lab-booting #btnViewGrid,
    body.lab-booting #themePicker,
    body.lab-booting #btnNewTheme,
    body.lab-booting #btnDupTheme,
    body.lab-booting #btnDelTheme {
      pointer-events: none;
      opacity: 0.55;
    }
    #themePicker { min-width: 168px; max-width: 240px; font-weight: 500; }
    .view-toggle { display: inline-flex; border: 1px solid var(--lab-border); border-radius: 6px; overflow: hidden; }
    .view-toggle button { border: none; border-radius: 0; padding: 5px 11px; font-size: 11px; }
    .view-toggle button.active { background: rgba(37,99,235,.28); color: #bfdbfe; }
    #search { width: 120px; }
    main {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
      gap: 0;
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }
    .workspace-focus-toggle {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 25;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      padding: 0;
      border-radius: 8px;
      border: 1px solid var(--lab-border);
      background: #141519;
      color: var(--lab-muted);
      cursor: pointer;
      transition: color .15s, background .15s, border-color .15s;
    }
    @supports (backdrop-filter: blur(1px)) {
      .workspace-focus-toggle {
        background: rgba(20,21,25,.92);
        backdrop-filter: blur(12px);
      }
    }
    .workspace-focus-toggle:hover {
      color: var(--lab-text);
      background: var(--lab-hover);
    }
    .workspace-focus-toggle[aria-pressed="true"] {
      color: #93c5fd;
      border-color: rgba(59,130,246,.45);
      background: rgba(37,99,235,.22);
    }
    .workspace-focus-toggle .ios-sf-icon {
      font-size: 20px;
      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }
    body.workspace-focus-mode header { display: none; }
    body.workspace-focus-mode main {
      flex: 1;
      min-height: 0;
      height: 100vh;
    }
    body.workspace-focus-mode #previewMeta,
    body.workspace-focus-mode #previewEmpty,
    body.workspace-focus-mode .panel-head,
    body.workspace-focus-mode .panel-bottom,
    body.workspace-focus-mode #editorBrowsePanel { display: none !important; }
    body.workspace-focus-mode #previewPane { padding-top: 52px; }
    main > * { min-height: 0; }
    @media (max-width: 1200px) {
      html, body { height: auto; overflow: auto; }
      body { display: block; min-height: 0; }
      main { grid-template-columns: 1fr; flex: none; height: auto; overflow: visible; }
      #previewPane, #gridPane { height: auto; min-height: 50vh; }
      #editor { height: auto; max-height: none; border-left: none; border-top: 1px solid var(--lab-border); }
    }
    @media (max-width: 960px) {
      header { padding: 8px 12px; }
      .header-bar { flex-wrap: wrap; gap: 10px; }
      .header-actions { width: 100%; justify-content: flex-end; }
      .toolbar-group { padding: 0 6px; }
      .toolbar-label:not(.toolbar-label--sentence) { display: none; }
      .toolbar-divider { height: 20px; }
      #themePicker { min-width: 132px; max-width: min(48vw, 200px); }
      .toolbar button.ghost.icon-only { min-width: 32px; padding: 5px 8px; }
    }
    @media (pointer: coarse) {
      .toolbar input, .toolbar select, .toolbar button { min-height: 34px; }
      .workspace-focus-toggle { width: 38px; height: 38px; }
    }
    #previewPane {
      padding: 16px 20px 24px;
      height: 100%;
      min-height: 0;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
    }
    #previewPane.hidden { display: none; }
    .preview-meta {
      width: min(420px, 100%);
      flex-shrink: 0;
      display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
    }
    .preview-meta-left { min-width: 0; }
    .preview-meta-right {
      display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
      flex-shrink: 0;
    }
    .preview-meta h2 { margin: 0; font-size: 1.1rem; }
    #focusName.theme-name-editable {
      cursor: text;
      border-radius: 4px;
    }
    #focusName.theme-name-editable:hover {
      color: #93c5fd;
      text-decoration: underline dotted;
      text-underline-offset: 3px;
    }
    .preview-meta .tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
    .preview-device-label {
      margin: 4px 0 0;
      font-size: 10px;
      color: var(--lab-muted);
      line-height: 1.35;
    }
    /* iPhone 17 logical canvas (402×874 pt @3x → 1206×2622 px). Preview uses 1 CSS px = 1 SwiftUI pt. */
    :root {
      --ios-w: 402px;
      --ios-h: 874px;
      --ios-safe-top: 59px;
      --ios-safe-bottom: 34px;
      --ios-nav-h: 44px;
      --ios-hpad: 16px;
      --ios-gap: 12px;
      --ios-tab-pt: 14px;
      --ios-tab-pb: 28px;
      --ios-tab-icon: 20px;
      --ios-icon-col: 68px;
      --ios-row-min: 68px;
    }
    .phone-frame {
      width: var(--ios-w);
      height: var(--ios-h);
      box-sizing: content-box;
      flex-shrink: 0;
      border-radius: 44px;
      overflow: hidden;
      border: 3px solid #2a3040;
      box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06);
      background: #000;
      position: relative;
      display: flex;
      flex-direction: column;
    }
    .phone-frame #heroPreview {
      width: var(--ios-w);
      height: var(--ios-h);
      flex: none;
      min-height: 0;
      overflow: hidden;
    }
    .ios-mock {
      width: var(--ios-w);
      height: var(--ios-h);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
      min-height: 0;
    }
    .ios-mock--grid {
      pointer-events: none;
    }
    .ios-status {
      height: var(--ios-safe-top);
      padding: 14px var(--ios-hpad) 0;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      flex-shrink: 0;
      position: relative;
    }
    .ios-status::after {
      content: '';
      position: absolute;
      top: 11px;
      left: 50%;
      transform: translateX(-50%);
      width: 126px;
      height: 37px;
      border-radius: 20px;
      background: rgba(0,0,0,.82);
      pointer-events: none;
    }
    .ios-status-time {
      font-size: 15px;
      font-weight: 600;
      letter-spacing: -.02em;
      z-index: 1;
    }
    .ios-status-glyphs {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .04em;
      z-index: 1;
      opacity: .92;
    }
    .ios-nav {
      min-height: var(--ios-nav-h);
      padding: 10px var(--ios-hpad) 8px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      flex-shrink: 0;
    }
    .ios-nav-title {
      font-weight: 700;
      text-align: center;
      line-height: 1.1;
    }
    .ios-scroll {
      flex: 1;
      min-height: 0;
      overflow-x: hidden;
      overflow-y: auto;
      padding: 0 var(--ios-hpad) var(--ios-gap);
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }
    .ios-scroll--compact { padding-bottom: 6px; }
    .ios-mock--dense .ios-scroll {
      padding-bottom: 8px;
    }
    .ios-dense-row {
      padding-bottom: 6px;
      gap: 6px;
    }
    .ios-xp-bar {
      height: 6px;
      border-radius: 99px;
      overflow: hidden;
      margin-bottom: 8px;
    }
    .ios-stack-card {
      padding: 10px 12px;
      margin-bottom: 8px;
    }
    .ios-stack-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 6px;
    }
    .ios-type-strip {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 6px 0 2px;
      padding-left: 2px;
      flex-wrap: wrap;
    }
    .ios-btn-row--tight {
      margin-top: 8px;
      gap: 6px;
    }
    .ios-btn-row--tight .ios-btn-pill {
      padding: 7px 12px;
      font-size: 12px;
    }
    .ios-hover-chip {
      display: inline-flex;
      align-items: center;
      padding: 4px 8px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 600;
    }
    .ios-award-row--compact {
      min-height: 0;
      margin-bottom: 0;
      padding: 8px 10px;
    }
    .ios-award-row--compact .ios-award-icon {
      width: 40px;
      min-height: 40px;
    }
    .ios-award-row--compact .ios-award-body {
      padding: 8px 12px 8px 14px;
      gap: 4px;
    }
    .ios-workout-block {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .ios-workout-block .ios-workout-tabs {
      margin-bottom: 0;
    }
    .ios-exercise-compact {
      padding: 8px 10px;
    }
    .ios-exercise-compact .ios-exercise-sub {
      margin-bottom: 6px;
    }
    .ios-exercise-compact .ios-input {
      padding: 7px 9px;
      font-size: 12px;
    }
    .ios-life-row--dense {
      gap: 6px;
      margin-bottom: 8px;
    }
    .ios-life-row--dense .ios-life-btn {
      gap: 4px;
      padding: 6px 2px 8px;
    }
    .ios-life-row--dense .ios-life-ring {
      width: 36px;
      height: 36px;
      border-width: 3px;
    }
    .ios-life-row--dense .ios-life-ring svg {
      inset: -3px;
      width: calc(100% + 6px);
      height: calc(100% + 6px);
    }
    .ios-fx-row {
      display: flex;
      align-items: stretch;
      gap: 8px;
      margin-bottom: 4px;
    }
    .ios-radius-chips {
      flex: 1;
      display: flex;
      gap: 5px;
      min-width: 0;
    }
    .ios-radius-chip {
      flex: 1;
      min-height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 600;
    }
    .ios-fx-mondrian {
      flex: 0 0 72px;
      min-width: 72px;
    }
    .mondrian-compact {
      height: 48px;
      margin-bottom: 0;
    }
    .ios-header-pills {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding: 2px 0 var(--ios-gap);
      scrollbar-width: none;
    }
    .ios-header-pills::-webkit-scrollbar { display: none; }
    .ios-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      white-space: nowrap;
      flex-shrink: 0;
      font-weight: 500;
    }
    .ios-pill.selected { font-weight: 600; }
    .ios-pill-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
    .ios-module {
      margin-bottom: var(--ios-gap);
    }
    .ios-nextup-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 10px;
    }
    .ios-nextup-card {
      min-height: 118px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-align: center;
      padding: 8px 12px;
    }
    .ios-nextup-icon {
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .ios-page-dots {
      display: flex;
      justify-content: center;
      gap: 6px;
      padding-top: 2px;
    }
    .ios-page-dots span {
      display: block;
      border-radius: 50%;
    }
    .ios-award-row {
      display: flex;
      align-items: stretch;
      min-height: var(--ios-row-min);
      margin-bottom: var(--ios-gap);
      overflow: hidden;
    }
    .ios-award-icon {
      width: var(--ios-icon-col);
      flex-shrink: 0;
      align-self: stretch;
      display: flex;
      align-items: center;
      justify-content: center;
      isolation: isolate;
    }
    .ios-sf-icon {
      line-height: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      user-select: none;
    }
    .ios-award-divider { width: 1px; flex-shrink: 0; opacity: .5; }
    .ios-award-body {
      flex: 1;
      min-width: 0;
      padding: 14px 16px 14px 12px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 6px;
    }
    .ios-section-gap { height: 4px; }
    .ios-section-label {
      font-weight: 600;
      margin: 0 0 8px;
    }
    .ios-workout-tabs {
      display: flex;
      align-items: center;
      gap: 8px;
      overflow-x: auto;
      margin-bottom: 10px;
      padding-inline: 2px;
      scrollbar-width: none;
    }
    .ios-workout-tabs::-webkit-scrollbar { display: none; }
    .ios-workout-circle-tab {
      flex-shrink: 0;
      box-sizing: border-box;
      overflow: visible;
    }
    .ios-exercise-row {
      padding: 14px 16px;
      margin-bottom: var(--ios-gap);
    }
    .ios-exercise-sub { margin-top: 2px; margin-bottom: 8px; }
    .ios-input {
      width: 100%;
      padding: 10px;
      border: none;
      outline: none;
    }
    .ios-life-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--ios-gap);
      margin-bottom: var(--ios-gap);
    }
    .ios-life-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 10px 4px 12px;
      text-align: center;
    }
    .ios-life-ring {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: 3.5px solid rgba(128,128,128,.38);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .ios-life-ring svg {
      position: absolute;
      inset: -3.5px;
      width: calc(100% + 7px);
      height: calc(100% + 7px);
      transform: rotate(-90deg);
    }
    .ios-glass-section { margin-bottom: var(--ios-gap); }
    .ios-glass-section-head {
      font-weight: 600;
      margin-bottom: 10px;
    }
    .ios-btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
    .ios-btn-pill {
      display: inline-block;
      font-weight: 600;
      padding: 10px 16px;
      border-radius: 999px;
    }
    .ios-tabbar {
      flex-shrink: 0;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      padding: var(--ios-tab-pt) 4px var(--ios-tab-pb);
      gap: 2px;
      text-align: center;
    }
    .ios-tab-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
    .ios-tab-icon {
      font-size: var(--ios-tab-icon);
      line-height: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .ios-tab-label { line-height: 1.1; }
    .ios-tab-item.on .ios-tab-label { font-weight: 700; }
    .ios-home-bar {
      position: absolute;
      left: 50%;
      bottom: 8px;
      transform: translateX(-50%);
      width: 134px;
      height: 5px;
      border-radius: 99px;
      opacity: .28;
      pointer-events: none;
      z-index: 2;
    }
    #heroPreview.preview-interactive [data-preview-target] {
      cursor: pointer;
    }
    #heroPreview.preview-interactive [data-preview-target]:hover {
      outline: 1px dashed rgba(147,197,253,.25);
      outline-offset: 2px;
    }
    #heroPreview.preview-token-focus [data-preview-target].preview-token--match {
      outline: 2px solid rgba(96, 165, 250, 0.22);
      outline-offset: 3px;
    }
    @media (prefers-reduced-motion: no-preference) {
      #heroPreview.preview-token-focus [data-preview-target].preview-token--match {
        outline-color: rgba(96, 165, 250, 0);
        animation: previewSelectGlow 2.4s ease-in-out infinite;
      }
    }
    @keyframes previewSelectGlow {
      0%, 100% { outline-color: rgba(96, 165, 250, 0); }
      50% { outline-color: rgba(96, 165, 250, 0.22); }
    }
    html.perf-lite #heroPreview.preview-token-focus [data-preview-target].preview-token--match {
      animation: none;
      outline-color: rgba(96, 165, 250, 0.22);
    }
    .preview-hotspot-tip {
      position: fixed;
      z-index: 50;
      pointer-events: none;
      padding: 5px 9px;
      font-size: 10px;
      font-weight: 500;
      line-height: 1.35;
      max-width: 220px;
      background: rgba(10,12,16,.94);
      border: 1px solid rgba(147,197,253,.35);
      border-radius: 6px;
      color: #e8eaed;
      box-shadow: 0 8px 24px rgba(0,0,0,.35);
    }
    .prop-row--flash {
      animation: propFlash 1.1s ease;
    }
    @keyframes propFlash {
      0%, 100% { background: transparent; }
      20%, 60% { background: rgba(59,130,246,.06); }
    }
    .mondrian-hero {
      display: grid; gap: 3px;
      padding: 3px; margin-bottom: 10px; height: 72px;
    }
    .mondrian-hero .top { display: grid; grid-template-columns: 1.7fr 1fr; gap: 3px; height: 58%; }
    .mondrian-hero .bot { display: grid; grid-template-columns: .75fr 1.05fr 1fr; gap: 3px; height: calc(42% - 3px); margin-top: 3px; }
    .mondrian-hero .tr { display: grid; grid-template-rows: 1fr 1fr; gap: 3px; }
    .mondrian-hero .br { display: grid; grid-template-rows: 1.62fr 1fr; gap: 3px; }
    .sw { min-height: 0; min-width: 0; }
    .hero-tabbar {
      display: grid; grid-template-columns: repeat(4, 1fr);
      padding: 10px 6px 14px; gap: 4px; text-align: center;
      margin-top: 8px;
    }
    .hero-tabbar span { display: block; padding-top: 3px; }
    .hero-tabbar .on { font-weight: 700; }
    #gridPane {
      padding: 16px 16px 0;
      height: 100%;
      min-height: 0;
      overflow: auto;
      display: flex;
      flex-direction: column;
    }
    #gridPane.hidden { display: none; }
    #grid {
      flex: 1;
      padding: 0 0 16px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 280px));
      justify-content: center;
      gap: 16px;
      align-content: start;
    }
    .grid-footer {
      flex-shrink: 0;
      margin: 0 -16px;
      padding: 20px 16px 28px;
      border-top: 1px solid rgba(239,68,68,.2);
      background: linear-gradient(to bottom, transparent, rgba(127,29,29,.08));
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      text-align: center;
    }
    .grid-footer-hint {
      margin: 0;
      font-size: 11px;
      color: var(--lab-muted);
      line-height: 1.45;
      max-width: 440px;
    }
    .grid-footer button {
      font: inherit;
      font-size: 11px;
      font-weight: 600;
      padding: 9px 16px;
      border-radius: 7px;
      cursor: pointer;
      border: 1px solid rgba(239,68,68,.55);
      background: rgba(127,29,29,.18);
      color: #fecaca;
    }
    .grid-footer button:hover {
      background: rgba(153,27,27,.35);
      border-color: rgba(248,113,113,.65);
    }
    .grid-footer button .btn-icon { font-size: 13px; }
    .theme-card {
      border: 2px solid transparent;
      border-radius: 14px;
      overflow: hidden;
      cursor: pointer;
      transition: border-color .15s, transform .15s;
      display: flex;
      flex-direction: column;
      min-width: 0;
      width: 100%;
      content-visibility: auto;
      contain-intrinsic-size: 280px 420px;
    }
    .theme-card:hover { transform: translateY(-2px); }
    html.perf-lite .theme-card:hover,
    html.perf-lite .font-lib-tile:hover {
      transform: none;
    }
    html.reduced-motion .theme-card,
    html.reduced-motion .font-lib-tile,
    html.reduced-motion .workspace-focus-toggle {
      transition: none !important;
    }
    .theme-card.selected { border-color: var(--lab-accent); }
    .theme-card-head {
      padding: 10px 8px 6px;
      display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
    }
    .theme-card-head strong { font-size: .92rem; }
    .theme-card-head code { font-size: .72rem; opacity: .75; }
    .mock-shell {
      margin: 0;
      border-radius: 0;
      overflow: hidden;
      border: none;
      border-top: 1px solid rgba(128,128,128,.25);
      background: #000;
      aspect-ratio: 402 / 874;
      width: 100%;
      container-type: inline-size;
      display: flex;
      justify-content: center;
      align-items: flex-start;
    }
    .mock-shell .ios-mock--grid {
      width: var(--ios-w);
      height: var(--ios-h);
      flex-shrink: 0;
      transform-origin: top center;
      transform: scale(0.68);
    }
    @supports (width: 100cqw) {
      .mock-shell .ios-mock--grid {
        transform: scale(calc(100cqw / 402px));
      }
    }
    html.perf-lite .mock-shell .ios-mock--grid {
      transform: scale(0.68);
    }
    html.perf-lite header,
    html.perf-lite .workspace-focus-toggle {
      backdrop-filter: none !important;
    }
    html.perf-lite header { background: #0c0d10; }
    html.perf-lite .workspace-focus-toggle { background: #141519; }
    .mock-shell--pending {
      background: rgba(255,255,255,.03);
    }
    .mock-status { height: 18px; opacity: .35; }
    .mock-body { padding: 10px; }
    .mock-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
    .mock-glass-section {
      padding: 10px; margin-bottom: 8px;
    }
    .mock-section-label { font-size: .72rem; font-weight: 600; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
    .mock-module { font-size: .88rem; font-weight: 600; margin-bottom: 2px; }
    .mock-muted { font-size: .75rem; margin-bottom: 8px; }
    .mock-input {
      width: 100%; padding: 7px 9px; font-size: .8rem;
      border: 1px solid transparent;
    }
    .mock-xp {
      height: 8px; border-radius: 99px; margin: 8px 0;
      background: rgba(128,128,128,.2); overflow: hidden;
    }
    .mock-xp > span { display: block; height: 100%; width: 68%; border-radius: 99px; }
    .mock-btn {
      display: inline-block; font-size: .75rem; font-weight: 600;
      padding: 5px 12px; border-radius: 999px; margin-bottom: 8px;
    }
    .mondrian {
      display: grid; gap: 2px;
      background: #1a1a1e;
      padding: 3px;
      margin-bottom: 8px;
      height: 52px;
      overflow: hidden;
    }
    .mondrian .top { display: grid; grid-template-columns: 1.7fr 1fr; gap: 2px; height: 58%; }
    .mondrian .bot { display: grid; grid-template-columns: .8fr 1.1fr 1fr; gap: 2px; height: calc(42% - 2px); margin-top: 2px; }
    .mondrian .tr { display: grid; grid-template-rows: 1fr 1fr; gap: 2px; }
    .mondrian .br { display: grid; grid-template-rows: 1.6fr 1fr; gap: 2px; }
    .sw { min-height: 0; min-width: 0; }
    .mock-tabbar {
      display: grid; grid-template-columns: repeat(4, 1fr);
      padding: 8px 4px 10px; gap: 2px; text-align: center; font-size: .62rem;
    }
    .mock-tabbar span { display: block; padding-top: 2px; }
    .mock-tabbar .on { font-weight: 700; }
    #editor {
      border-left: 1px solid var(--lab-border);
      background: #16181d;
      display: flex;
      flex-direction: column;
      height: 100%;
      max-height: 100%;
      align-self: stretch;
      width: 100%;
      min-height: 0;
      overflow: hidden;
      font-size: 11px;
    }
    #editor.browse-mode #panelTabs,
    #editor.browse-mode .panel-scroll,
    #editor.browse-mode .panel-bottom,
    #editor.browse-mode .btn-rename,
    #editor.browse-mode .unlock-segment {
      display: none !important;
    }
    #editor.browse-mode #editorBrowsePanel {
      display: flex;
    }
    .editor-browse-panel {
      display: none;
      flex: 1;
      flex-direction: column;
      min-height: 0;
      overflow: auto;
    }
    .editor-browse-lead {
      margin: 0 0 10px;
      font-size: 11px;
      line-height: 1.45;
      color: var(--lab-muted);
    }
    .editor-browse-meta {
      margin: 0 0 14px;
      font-size: 10px;
      line-height: 1.45;
      color: var(--lab-text);
    }
    .editor-browse-cta {
      width: 100%;
      font: inherit;
      font-size: 11px;
      font-weight: 600;
      padding: 9px 12px;
      border-radius: 8px;
      border: 1px solid rgba(59,130,246,.45);
      background: rgba(37,99,235,.28);
      color: #93c5fd;
      cursor: pointer;
    }
    .editor-browse-cta:hover {
      background: rgba(37,99,235,.42);
    }
    #editorContent {
      display: flex;
      flex-direction: column;
      min-height: 0;
      flex: 1;
      position: relative;
      overflow: hidden;
    }
    .panel-head {
      padding: 0;
      border-bottom: 1px solid var(--lab-border);
      flex-shrink: 0;
      background: #14161a;
    }
    .panel-head .panel-segment { border-bottom: none; }
    .panel-segment {
      padding: 8px 12px;
      border-bottom: 1px solid var(--lab-border);
    }
    .panel-segment:last-child { border-bottom: none; }
    .panel-segment-label {
      display: block;
      font-size: 9px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--lab-muted);
      margin-bottom: 5px;
    }
    .panel-title-row {
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
    }
    .panel-head h2,
    .theme-name-btn {
      margin: 0; font-size: 13px; font-weight: 600; letter-spacing: -.01em;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .theme-name-btn {
      flex: 1;
      min-width: 0;
      padding: 0;
      border: none;
      background: none;
      color: inherit;
      font: inherit;
      text-align: left;
      cursor: text;
      border-radius: 4px;
    }
    .theme-name-btn:not(.is-readonly):hover { color: #93c5fd; text-decoration: underline dotted; text-underline-offset: 3px; }
    .theme-name-btn.is-readonly { cursor: default; opacity: .85; }
    .panel-badges { display: flex; gap: 4px; flex-shrink: 0; }
    .unlock-segment .prop-hint { margin: 0 0 6px; font-size: 10px; }
    .unlock-condition-input {
      width: 100%;
      box-sizing: border-box;
      min-height: 48px;
      resize: vertical;
      padding: 6px 8px;
      border: 1px solid var(--lab-border);
      border-radius: 6px;
      background: var(--lab-bg);
      color: var(--lab-text);
      font: inherit;
      line-height: 1.35;
    }
    .unlock-condition-input:focus {
      outline: none;
      border-color: var(--lab-accent);
    }
    .panel-id {
      display: block; margin-top: 3px;
      font: 10px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
      color: var(--lab-muted);
    }
    .panel-action-row {
      display: flex; gap: 6px; align-items: center;
    }
    .panel-action-row--inline { margin-top: 8px; }
    .panel-action-row .btn-rename { flex: 1; }
    .panel-action-row button {
      flex: 1;
      font: inherit; font-size: 10px; font-weight: 500;
      padding: 6px 10px; border-radius: 6px;
      border: 1px solid var(--lab-border); background: rgba(255,255,255,.03);
      color: var(--lab-muted); cursor: pointer;
    }
    .panel-action-row button:hover { color: var(--lab-text); background: var(--lab-hover); }
    .panel-action-row button.icon-btn {
      flex: 0; min-width: 36px; font-size: 15px; line-height: 1; padding: 5px 8px;
    }
    .segment-hint {
      margin: 7px 0 0;
      font-size: 10px;
      color: var(--lab-muted);
      line-height: 1.45;
    }
    .mode-toggle {
      display: flex;
      padding: 3px;
      background: rgba(0,0,0,.22);
      border: 1px solid var(--lab-border);
      border-radius: 8px;
      gap: 2px;
    }
    .mode-toggle--compact { max-width: 200px; }
    .mode-opt {
      flex: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 8px 10px;
      border: none;
      border-radius: 6px;
      background: transparent;
      color: var(--lab-muted);
      font: inherit;
      font-size: 11px;
      font-weight: 500;
      cursor: pointer;
      transition: background .15s, color .15s, box-shadow .15s;
    }
    .mode-toggle--compact .mode-opt { padding: 6px 10px; font-size: 10px; }
    .mode-opt:hover:not(.active) { color: var(--lab-text); background: rgba(255,255,255,.04); }
    .mode-opt.active {
      background: rgba(255,255,255,.11);
      color: var(--lab-text);
      box-shadow: 0 1px 4px rgba(0,0,0,.28);
    }
    .mode-opt span[aria-hidden] { font-size: 13px; line-height: 1; opacity: .9; }
    .panel-tabs {
      display: flex; gap: 0; padding: 4px 8px 0;
      border-bottom: 1px solid var(--lab-border);
      flex-shrink: 0;
      background: #16181d;
    }
    .panel-tabs button {
      flex: 1; font: inherit; font-size: 10px; font-weight: 500;
      padding: 7px 4px; margin-bottom: -1px;
      background: transparent; border: none; border-bottom: 2px solid transparent;
      color: var(--lab-muted); cursor: pointer; letter-spacing: .02em;
    }
    .panel-tabs button:hover { color: var(--lab-text); }
    .panel-tabs button.active {
      color: var(--lab-text); border-bottom-color: var(--lab-accent);
    }
    .tab-pane { display: none; }
    .tab-pane.active { display: block; }
    .prop-group-label {
      padding: 10px 12px 4px;
      font-size: 10px; font-weight: 500;
      color: var(--lab-muted); letter-spacing: .04em;
      text-transform: uppercase;
    }
    .prop-group-label:first-child { padding-top: 6px; }
    .prop-list { padding: 0 6px; }
    .prop-row {
      display: flex; align-items: center; gap: 8px;
      min-height: 28px; padding: 4px 6px; border-radius: 4px;
      cursor: default;
    }
    .prop-row:hover { background: rgba(255,255,255,.035); }
    .prop-row.prop-row--active {
      outline: 2px solid rgba(59, 130, 246, 0.18);
      outline-offset: 2px;
      background: rgba(59, 130, 246, 0.04);
    }
    @media (prefers-reduced-motion: no-preference) {
      .prop-row.prop-row--active {
        outline-color: rgba(59, 130, 246, 0);
        background: rgba(59, 130, 246, 0);
        animation: editorSelectGlow 2.4s ease-in-out infinite;
      }
    }
    @keyframes editorSelectGlow {
      0%, 100% {
        outline-color: rgba(59, 130, 246, 0);
        background: rgba(59, 130, 246, 0);
      }
      50% {
        outline-color: rgba(59, 130, 246, 0.18);
        background: rgba(59, 130, 246, 0.04);
      }
    }
    html.perf-lite .prop-row.prop-row--active {
      animation: none;
      outline-color: rgba(59, 130, 246, 0.18);
      background: rgba(59, 130, 246, 0.04);
    }
    .prop-row.prop-row-num { padding-left: 12px; }
    .prop-row.prop-row-num .prop-label-wrap,
    .prop-row.prop-row-num .prop-label { flex: 1; }
    .prop-label-wrap {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 1px;
    }
    .prop-hint {
      font-size: 9px;
      line-height: 1.25;
      color: var(--lab-muted);
      white-space: normal;
    }
    .prop-swatch {
      width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0;
      border: 1px solid rgba(255,255,255,.14);
      cursor: pointer; padding: 0;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
    }
    .prop-swatch:hover { border-color: rgba(255,255,255,.35); }
    .prop-label {
      flex: 1; min-width: 0;
      font-size: 11px; color: var(--lab-text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .prop-value {
      width: 68px; flex-shrink: 0;
      font: 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
      text-align: right; color: var(--lab-muted);
      background: transparent; border: none;
      padding: 2px 4px; border-radius: 3px;
    }
    .prop-value:hover { background: rgba(255,255,255,.05); color: var(--lab-text); }
    .prop-value:focus {
      outline: none; background: rgba(255,255,255,.07);
      color: var(--lab-text); box-shadow: 0 0 0 1px rgba(110,168,254,.45);
    }
    .prop-value[type=number] {
      width: 56px; min-width: 56px;
      padding: 3px 6px;
      text-align: right;
      -moz-appearance: textfield;
      appearance: textfield;
    }
    .prop-value.prop-font-value {
      width: 132px;
      min-width: 132px;
      max-width: 132px;
      text-align: left;
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .prop-value.prop-font-value:disabled {
      opacity: .45;
      cursor: not-allowed;
    }
    .prop-row-font.prop-row-num .prop-label { flex: 1; }
    .font-pick-btn {
      flex-shrink: 0;
      width: 132px;
      min-width: 132px;
      max-width: 132px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 4px;
      padding: 3px 6px;
      margin: 0;
      border: none;
      border-radius: 3px;
      background: transparent;
      color: var(--lab-muted);
      cursor: pointer;
      text-align: left;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.2;
      transition: background .12s, color .12s, box-shadow .12s;
    }
    .font-pick-btn:hover:not(:disabled) {
      background: rgba(255,255,255,.05);
      color: var(--lab-text);
    }
    .font-pick-btn:focus {
      outline: none;
      background: rgba(255,255,255,.07);
      color: var(--lab-text);
      box-shadow: 0 0 0 1px rgba(110,168,254,.45);
    }
    .font-pick-btn:disabled {
      opacity: .45;
      cursor: not-allowed;
    }
    .font-pick-btn-label {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: left;
    }
    .font-pick-btn-chevron {
      flex-shrink: 0;
      font-size: 10px;
      line-height: 1;
      font-family: inherit;
      font-weight: 400;
      color: var(--lab-muted);
      opacity: .55;
    }
    .modal-card--font-library {
      width: min(520px, 100%);
      max-height: min(88vh, 720px);
      display: flex;
      flex-direction: column;
      padding: 16px 16px 12px;
    }
    #fontLibraryOverlay {
      display: none;
      position: absolute;
      inset: 0;
      z-index: 50;
      background: #16181d;
      flex-direction: column;
      overflow: hidden;
      padding: 0;
      pointer-events: auto;
    }
    #fontLibraryOverlay[hidden] { display: none !important; }
    #fontLibraryOverlay.open { display: flex; }
    .font-lib-panel {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      width: 100%;
      padding: 0 12px 12px;
    }
    .font-lib-header {
      padding: 10px 12px;
      margin: 0 -12px 10px;
      border-bottom: 1px solid var(--lab-border);
      background: #14161a;
      flex-shrink: 0;
    }
    .font-lib-header h3 {
      margin: 0 0 4px;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: -.01em;
    }
    .font-lib-sub {
      margin: 0;
      font-size: 10px;
      color: var(--lab-muted);
      line-height: 1.35;
    }
    .font-lib-filters {
      display: flex;
      gap: 0;
      margin: 0 -12px 10px;
      padding: 0 8px;
      border-bottom: 1px solid var(--lab-border);
      flex-shrink: 0;
      background: #14161a;
    }
    .font-lib-filter {
      flex: 1;
      font: inherit;
      font-size: 10px;
      font-weight: 500;
      padding: 7px 4px;
      margin-bottom: -1px;
      border: none;
      border-bottom: 2px solid transparent;
      border-radius: 0;
      background: transparent;
      color: var(--lab-muted);
      cursor: pointer;
      letter-spacing: .02em;
    }
    .font-lib-filter:hover { color: var(--lab-text); }
    .font-lib-filter.active {
      color: var(--lab-text);
      border-bottom-color: var(--lab-accent);
    }
    .font-lib-scroll {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      margin: 0 -4px 10px;
      padding: 0 4px 4px;
    }
    .font-lib-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }
    @media (max-width: 380px) {
      .font-lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    .font-lib-tile {
      display: flex;
      flex-direction: column;
      padding: 0;
      border: 1px solid var(--lab-border);
      border-radius: 10px;
      background: rgba(255,255,255,.03);
      cursor: pointer;
      text-align: left;
      overflow: hidden;
      transition: border-color .15s, box-shadow .15s, transform .12s;
    }
    .font-lib-tile:hover {
      border-color: rgba(255,255,255,.22);
      transform: translateY(-1px);
    }
    .font-lib-tile.selected {
      border-color: rgba(59,130,246,.65);
      box-shadow: 0 0 0 1px rgba(59,130,246,.35);
    }
    .font-lib-preview {
      padding: 10px 6px;
      min-height: 66px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;
      text-align: center;
      line-height: 1.05;
      color: var(--lab-text);
      background: rgba(255,255,255,.04);
      border-bottom: 1px solid rgba(255,255,255,.06);
      overflow: hidden;
    }
    .font-lib-preview .fl-the { font-size: 10px; font-weight: 400; opacity: .78; }
    .font-lib-preview .fl-main { font-size: 23px; font-weight: 700; line-height: 1.08; }
    .font-lib-preview .fl-sub { font-size: 12px; font-weight: 400; opacity: .9; }
    .font-lib-foot {
      padding: 8px 10px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      background: rgba(0,0,0,.12);
    }
    .font-lib-name {
      font-size: 10px;
      font-weight: 600;
      color: var(--lab-text);
      text-align: center;
      line-height: 1.3;
      min-height: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .font-lib-badge {
      font-size: 9px;
      font-weight: 600;
      padding: 3px 10px;
      border-radius: 999px;
      background: rgba(37,99,235,.35);
      color: #dbeafe;
      letter-spacing: .02em;
    }
    .font-lib-tile.selected .font-lib-badge {
      background: rgba(34,197,94,.35);
      color: #dcfce7;
    }
    .font-lib-tile:not(.selected) .font-lib-badge {
      background: rgba(255,255,255,.08);
      color: var(--lab-muted);
    }
    .prop-value[type=number]::-webkit-outer-spin-button,
    .prop-value[type=number]::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    .prop-select {
      flex: 1; min-width: 0; max-width: 148px;
      font: inherit; font-size: 10px; color: var(--lab-text);
      background: transparent; border: none; padding: 2px 4px;
      border-radius: 3px; cursor: pointer;
      text-overflow: ellipsis;
    }
    .prop-select:hover { background: var(--lab-hover); }
    .prop-select:focus { outline: none; box-shadow: 0 0 0 1px rgba(91,156,245,.45); background: rgba(255,255,255,.06); }
    .prop-select:disabled { opacity: .45; cursor: not-allowed; }
    .prop-hint {
      padding: 6px 12px 2px; font-size: 10px; color: var(--lab-muted); line-height: 1.35;
    }
    .prop-empty {
      flex: 1; text-align: right; color: var(--lab-muted); opacity: .5; padding-right: 4px;
    }
    .prop-details {
      margin: 6px 8px 0; border: 1px solid var(--lab-border); border-radius: 6px;
      overflow: hidden;
    }
    .prop-details summary {
      padding: 6px 10px; font-size: 10px; font-weight: 500;
      color: var(--lab-muted); cursor: pointer; list-style: none;
      display: flex; align-items: center; justify-content: space-between;
      user-select: none;
    }
    .prop-details summary::-webkit-details-marker { display: none; }
    .prop-details summary::after { content: '▸'; font-size: 9px; opacity: .6; }
    .prop-details[open] summary::after { content: '▾'; }
    .prop-details summary:hover { background: rgba(255,255,255,.03); color: var(--lab-text); }
    .prop-details .prop-list { padding-bottom: 4px; }
    .prop-details-note {
      padding: 0 10px 6px; font-size: 10px; color: var(--lab-muted); line-height: 1.35;
    }
    .panel-foot {
      display: flex; gap: 6px; padding: 8px 10px;
      border-top: 1px solid var(--lab-border);
      flex-shrink: 0; background: #14161a;
    }
    .panel-foot button {
      flex: 1; font: inherit; font-size: 10px; font-weight: 500;
      padding: 6px 8px; border-radius: 5px; cursor: pointer;
      border: 1px solid var(--lab-border); background: transparent;
      color: var(--lab-muted);
    }
    .panel-foot button:hover { color: var(--lab-text); background: rgba(255,255,255,.04); }
    .panel-foot button.primary {
      background: rgba(37,99,235,.25); border-color: rgba(59,130,246,.45); color: #93c5fd;
    }
    .panel-foot button.primary:hover { background: rgba(37,99,235,.4); }
    .panel-foot button:disabled { opacity: .35; cursor: not-allowed; }
    .panel-foot-hint {
      margin: 0;
      padding: 0 12px 8px;
      font-size: 10px;
      color: var(--lab-muted);
      text-align: center;
      line-height: 1.4;
      opacity: .75;
      flex-shrink: 0;
    }
    .panel-bottom {
      flex-shrink: 0;
      background: #14161a;
      border-top: 1px solid var(--lab-border);
    }
    .panel-bottom .panel-foot { border-top: none; }
    .modal-card--export {
      width: min(560px, 100%);
      max-height: min(88vh, 720px);
      display: flex;
      flex-direction: column;
    }
    .export-modal-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }
    .export-modal-head h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
    .export-modal-sub {
      margin: 0; font-size: 11px; color: var(--lab-muted); line-height: 1.4;
    }
    .export-modal-close {
      font: inherit; font-size: 18px; line-height: 1;
      padding: 2px 6px; border: none; background: transparent;
      color: var(--lab-muted); cursor: pointer; border-radius: 4px;
    }
    .export-modal-close:hover { color: var(--lab-text); background: var(--lab-hover); }
    .export-modal-meta {
      font-size: 11px; color: var(--lab-muted); line-height: 1.45;
      padding: 8px 10px; border-radius: 7px;
      background: rgba(255,255,255,.03); border: 1px solid var(--lab-border);
      margin-bottom: 12px;
    }
    .field-hint {
      display: block; margin-top: 5px;
      font-size: 10px; color: var(--lab-muted); line-height: 1.35;
    }
    .field-hint code, .field-hint em {
      font: 10px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
      color: #aeb8cb;
    }
    .field-hint em { font-style: normal; opacity: .85; }
    .modal-actions button:disabled { opacity: .35; cursor: not-allowed; }
    #exportBox {
      width: 100%; flex: 1; min-height: 200px;
      font: 10px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
      padding: 10px 12px; border-radius: 7px; resize: vertical;
      border: 1px solid var(--lab-border); background: #0d1017; color: #aeb8cb;
      margin-bottom: 12px;
    }
    .empty-editor {
      color: var(--lab-muted); padding: 48px 16px; text-align: center;
      font-size: 12px; line-height: 1.55; max-width: 280px; margin: 0 auto;
    }
    .empty-editor strong { display: block; color: var(--lab-text); font-size: 13px; margin-bottom: 6px; }
    .empty-editor em { font-style: normal; color: #93c5fd; font-weight: 500; }
    .toast {
      position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
      padding: 11px 18px; border-radius: 10px; max-width: min(420px, calc(100vw - 32px));
      background: rgba(20,22,28,.97); border: 1px solid var(--lab-border);
      box-shadow: 0 10px 40px rgba(0,0,0,.45);
      font-size: 12px; line-height: 1.4; z-index: 200;
      text-align: center; pointer-events: none;
      animation: toast-in .22s ease;
    }
    .toast.success { border-color: rgba(59,130,246,.45); color: #dbeafe; }
    .toast.warn { border-color: rgba(251,191,36,.35); color: #fde68a; }
    @keyframes toast-in {
      from { opacity: 0; transform: translateX(-50%) translateY(8px); }
      to { opacity: 1; transform: translateX(-50%) translateY(0); }
    }
    .modal-backdrop {
      position: fixed; inset: 0; z-index: 150;
      background: rgba(0,0,0,.55);
      display: flex; align-items: center; justify-content: center;
      padding: 20px;
    }
    .modal-backdrop[hidden] { display: none; }
    .modal-card {
      width: min(340px, 100%);
      background: #16181d;
      border: 1px solid var(--lab-border);
      border-radius: 12px;
      padding: 18px 18px 14px;
      box-shadow: 0 24px 60px rgba(0,0,0,.5);
    }
    .modal-card h3 { margin: 0 0 14px; font-size: 14px; font-weight: 600; }
    .modal-field { margin-bottom: 14px; }
    .modal-field label {
      display: block; font-size: 10px; font-weight: 500;
      text-transform: uppercase; letter-spacing: .05em;
      color: var(--lab-muted); margin-bottom: 6px;
    }
    .modal-field input[type=text] {
      width: 100%; font: inherit; font-size: 13px;
      padding: 8px 10px; border-radius: 7px;
      border: 1px solid var(--lab-border); background: #12151c; color: var(--lab-text);
    }
    .modal-field input[type=text]:focus {
      outline: none; border-color: rgba(91,156,245,.55);
      box-shadow: 0 0 0 2px rgba(91,156,245,.18);
    }
    .modal-seed-row { display: flex; gap: 8px; }
    .modal-seed-opt {
      flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
      padding: 10px 8px; border-radius: 8px; cursor: pointer;
      border: 1px solid var(--lab-border); background: rgba(255,255,255,.02);
      font: inherit; font-size: 11px; font-weight: 500; color: var(--lab-muted);
    }
    .modal-seed-opt:hover { background: var(--lab-hover); color: var(--lab-text); }
    .modal-seed-opt.selected {
      border-color: rgba(91,156,245,.55);
      background: rgba(37,99,235,.15); color: #bfdbfe;
    }
    .modal-seed-opt .seed-icon { font-size: 18px; line-height: 1; }
    .modal-actions { display: flex; gap: 8px; margin-top: 16px; }
    .modal-actions button {
      flex: 1; font: inherit; font-size: 11px; font-weight: 500;
      padding: 8px 12px; border-radius: 7px; cursor: pointer;
      border: 1px solid var(--lab-border); background: transparent; color: var(--lab-muted);
    }
    .modal-actions button.primary {
      background: rgba(37,99,235,.28); border-color: rgba(59,130,246,.45); color: #93c5fd;
    }
    .modal-actions button:hover { color: var(--lab-text); background: var(--lab-hover); }
    .modal-actions button.primary:hover { background: rgba(37,99,235,.42); }
    .panel-scroll {
      flex: 1;
      min-height: 0;
      position: relative;
      overflow: hidden;
    }
    .panel-scroll-body {
      height: 100%;
      overflow: auto;
      padding: 4px 0 8px;
    }
    #colorWheelOverlay {
      display: none;
      position: absolute;
      inset: 0;
      z-index: 50;
      background: #16181d;
      flex-direction: column;
      overflow-y: auto;
      padding: 0;
      pointer-events: auto;
    }
    #colorWheelOverlay[hidden] { display: none !important; }
    #colorWheelOverlay.open { display: flex; }
    .wheel-panel {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      width: 100%;
      padding: 0 12px 12px;
    }
    .wheel-header {
      padding: 10px 12px;
      margin: 0 -12px 12px;
      border-bottom: 1px solid var(--lab-border);
      background: #14161a;
      flex-shrink: 0;
    }
    .wheel-panel h3 {
      margin: 0; font-size: 13px; font-weight: 600; letter-spacing: -.01em;
    }
    .wheel-hint {
      margin: 4px 0 0;
      font-size: 10px;
      line-height: 1.35;
      color: var(--lab-muted);
    }
    .wheel-picker {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;
      width: 100%;
      margin-bottom: 14px;
      flex-shrink: 0;
    }
    .wheel-sv-wrap {
      position: relative;
      width: 100%;
      max-width: 280px;
    }
    .wheel-sv-track {
      position: relative;
      line-height: 0;
    }
    #svSquare {
      display: block;
      width: 100%;
      border-radius: 8px;
      cursor: crosshair;
      border: 1px solid rgba(255,255,255,.12);
      box-sizing: border-box;
      touch-action: none;
    }
    .wheel-sv-thumb {
      position: absolute;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid #fff;
      box-shadow: 0 0 0 1px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.15);
      pointer-events: none;
      transform: translate(-50%, -50%);
      box-sizing: border-box;
    }
    .wheel-hue-wrap {
      position: relative;
      width: 100%;
      max-width: 280px;
    }
    .wheel-hue-track {
      position: relative;
    }
    .wheel-hue-label {
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--lab-muted);
      margin-bottom: 5px;
      display: block;
    }
    #hueBar {
      display: block;
      width: 100%;
      height: 14px;
      border-radius: 7px;
      cursor: crosshair;
      border: 1px solid rgba(255,255,255,.1);
      touch-action: none;
    }
    .wheel-hue-thumb {
      position: absolute;
      top: 50%;
      left: 0;
      width: 12px;
      height: 12px;
      margin-left: -6px;
      border-radius: 50%;
      border: 2px solid #fff;
      box-shadow: 0 0 0 1px rgba(0,0,0,.45);
      pointer-events: none;
      transform: translateY(-50%);
    }
    .wheel-recent {
      margin-bottom: 10px;
      flex-shrink: 0;
      width: 100%;
      max-width: 280px;
    }
    .wheel-recent-label {
      display: block;
      font-size: 9px;
      font-weight: 500;
      color: var(--lab-muted);
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-bottom: 6px;
    }
    .wheel-recent-list {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      gap: 4px;
      width: 100%;
    }
    .recent-swatch {
      width: 100%;
      aspect-ratio: 1;
      height: auto;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.14);
      cursor: pointer;
      padding: 0;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
    }
    .recent-swatch:hover { border-color: rgba(255,255,255,.4); transform: scale(1.08); }
    .recent-swatch.empty {
      background: transparent;
      border-style: dashed;
      opacity: .25;
      pointer-events: none;
    }
    .wheel-controls { display: grid; gap: 10px; flex-shrink: 0; }
    .wheel-controls label { font-size: 10px; color: var(--lab-muted); display: flex; justify-content: space-between; }
    .wheel-controls input[type=range] { width: 100%; accent-color: var(--lab-accent); }
    .wheel-preview-row { display: flex; gap: 10px; align-items: center; }
    .wheel-preview {
      width: 40px; height: 40px; border-radius: 8px;
      border: 2px solid rgba(255,255,255,.15); flex-shrink: 0;
    }
    .wheel-hex {
      flex: 1; font: inherit; font-size: 11px; padding: 8px 10px; border-radius: 6px;
      border: 1px solid var(--lab-border); background: #12151c; color: var(--lab-text);
    }
    .wheel-actions { display: flex; gap: 6px; margin-top: auto; padding-top: 12px; flex-shrink: 0; }
    .wheel-actions button {
      flex: 1; font: inherit; font-size: 10px; padding: 8px; border-radius: 5px; cursor: pointer;
      border: 1px solid var(--lab-border); background: transparent; color: var(--lab-muted);
    }
    .wheel-actions button.primary {
      background: rgba(37,99,235,.25); border-color: rgba(59,130,246,.45); color: #93c5fd;
    }
    .wheel-hint {
      font-size: 10px; color: var(--lab-muted); text-align: center; margin-top: 8px; opacity: .75;
    }
    .badge {
      font-size: 9px; font-weight: 500; padding: 1px 5px; border-radius: 3px;
      background: rgba(255,255,255,.06); color: var(--lab-muted); letter-spacing: .02em;
    }
    .badge.accent { background: rgba(110,168,254,.15); color: #93c5fd; }