:root {
      --bg: #030609;
      --panel: #081019;
      --panel2: #050b11;
      --line: #143349;
      --accent: #2dd8ff;
      /* Same accent as an R, G, B triplet — lets every tint follow a
         user-picked accent via rgba(var(--accent-rgb), a). Kept in sync
         with --accent by the accent-picker script in vial-rack-maker.html. */
      --accent-rgb: 45, 216, 255;
      --teal: #3cf5b8;
      --amber: #ffb454;
      --text: #d9eef7;
      --mute: #85a8bd;
      --hint: #527791;
      --glow: rgba(var(--accent-rgb), 0.5);
      --font-display: 'Chakra Petch', 'Inter', system-ui, sans-serif;
      --font-mono: 'IBM Plex Mono', 'Consolas', 'SF Mono', monospace;
    }

    * {
      box-sizing: border-box;
    }

    body {
      background: var(--bg);
      color: var(--text);
      /* Native form controls (checkboxes, any unstyled sliders) follow
         the user-picked accent too */
      accent-color: var(--accent);
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      margin: 0;
      padding: 0;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      /* Ambient glow + fine blueprint grid */
      background-image:
        radial-gradient(ellipse 80% 50% at 20% -10%, rgba(var(--accent-rgb), 0.07) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 110%, rgba(60, 245, 184, 0.05) 0%, transparent 55%),
        linear-gradient(rgba(var(--accent-rgb), 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--accent-rgb), 0.03) 1px, transparent 1px);
      background-size: auto, auto, 44px 44px, 44px 44px;
      background-attachment: fixed;
    }

    /* Faint scanline film over everything — pure ambience, no interaction */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      z-index: 9998;
      pointer-events: none;
      background: repeating-linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.012) 0px,
        rgba(255, 255, 255, 0.012) 1px,
        transparent 1px,
        transparent 3px);
      mix-blend-mode: overlay;
    }

    body.light-mode::before {
      display: none;
    }

    /* Push footer to the bottom when content is short */
    .site-footer {
      margin-top: auto !important;
    }

    /* Segmented Control for Layout Engine */
    /* Single-row engine strip: label · toggle · reset */
    .engine-strip {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      flex-wrap: wrap;
    }

    .engine-strip .sub-label {
      margin: 0;
      flex-shrink: 0;
    }

    .engine-selector-wrap {
      flex: 1 1 auto;
      min-width: 200px;
    }

    .engine-selector-wrap input[type="checkbox"] {
      display: none;
    }

    .engine-selector {
      display: flex;
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 5px;
      overflow: hidden;
      background: var(--panel2);
      cursor: pointer;
      -webkit-user-select: none;
      user-select: none;
    }

    .engine-opt {
      flex: 1;
      padding: 0.42rem 0.5rem;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.2s ease-in-out;
    }

    .engine-title {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 0.78rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text);
      white-space: nowrap;
      transition: color 0.2s, text-shadow 0.2s;
    }

    .standard-opt {
      border-right: 1px solid var(--line);
    }

    /* DEFAULT: Standard is Active (Checkbox is unchecked) */
    .engine-selector-wrap input:not(:checked)+.engine-selector .standard-opt {
      background: rgba(var(--accent-rgb), 0.1);
      box-shadow: inset 0 -2px 0 var(--accent), inset 0 0 18px rgba(var(--accent-rgb), 0.08);
    }

    .engine-selector-wrap input:not(:checked)+.engine-selector .standard-opt .engine-title {
      color: var(--accent);
      text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.5);
    }

    .engine-selector-wrap input:not(:checked)+.engine-selector .freestyle-opt {
      opacity: 0.45;
    }

    /* FREESTYLE: Freestyle is Active (Checkbox is checked) */
    .engine-selector-wrap input:checked+.engine-selector .standard-opt {
      opacity: 0.45;
    }

    .engine-selector-wrap input:checked+.engine-selector .freestyle-opt {
      background: rgba(212, 56, 162, 0.12);
      box-shadow: inset 0 -2px 0 #d438a2, inset 0 0 18px rgba(212, 56, 162, 0.1);
    }

    .engine-selector-wrap input:checked+.engine-selector .freestyle-opt .engine-title {
      color: #ff5ec4;
      text-shadow: 0 0 10px rgba(212, 56, 162, 0.55);
    }

    /* Permanent Engine Selector at top of controls panel */
    .engine-pinned {
      position: relative;
      z-index: 5;
      margin-bottom: 0.5rem;
    }

    /* Reset-to-default — quiet until hovered, then warns */
    .reset-btn {
      background: none;
      border: 1px solid var(--line);
      color: var(--hint);
      border-radius: 4px;
      padding: 0.2rem 0.6rem;
      font-family: var(--font-display);
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.15s;
      margin-bottom: 0.45rem;
    }

    .reset-btn:hover {
      border-color: var(--amber);
      color: var(--amber);
      box-shadow: 0 0 10px rgba(255, 180, 84, 0.18);
    }

    .engine-pinned .sub-label {
      font-size: .72rem;
      text-transform: uppercase;
      letter-spacing: .09em;
      color: var(--hint);
      font-weight: 600;
      margin: 0 0 0.45rem 0;
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }

    .engine-pinned .sub-label::before {
      content: "";
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 6px var(--accent);
    }

    /* ─── Header Action Buttons (AI + Saved Racks) ─── */
    .header-actions {
      display: flex;
      gap: 0.5rem;
      align-items: center;
    }

    .header-action-btn {
      position: relative;
      display: flex;
      align-items: center;
      gap: 0.35rem;
      background: rgba(var(--accent-rgb), 0.08);
      border: 1px solid rgba(var(--accent-rgb), 0.25);
      border-radius: 6px;
      padding: 0.3rem 0.62rem;
      color: var(--text);
      font-size: 0.74rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      white-space: nowrap;
    }

    .header-action-btn:hover {
      background: rgba(var(--accent-rgb), 0.16);
      border-color: rgba(var(--accent-rgb), 0.5);
    }

    .header-action-btn.ai-thinking {
      overflow: hidden;
      border-color: rgba(var(--accent-rgb), 0.72);
      background: rgba(var(--accent-rgb), 0.14);
      box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.24), inset 0 0 16px rgba(var(--accent-rgb), 0.1);
    }

    .header-action-btn.ai-thinking>* {
      position: relative;
      z-index: 1;
    }

    .header-action-btn.ai-thinking::before {
      content: '';
      position: absolute;
      inset: 1px;
      z-index: 0;
      border-radius: inherit;
      background: linear-gradient(90deg, transparent 0%, rgba(var(--accent-rgb), 0.22) 48%, transparent 76%);
      pointer-events: none;
      transform: translateX(-115%);
      animation: ai-header-sheen 1.55s ease-in-out infinite;
    }

    .header-action-btn.ai-thinking::after {
      content: '';
      position: relative;
      z-index: 1;
      flex: 0 0 27px;
      width: 27px;
      height: 16px;
      border-radius: 999px;
      background:
        radial-gradient(circle at 5px 12px, var(--accent) 0 2px, transparent 2.6px),
        radial-gradient(circle at 14px 7px, var(--teal) 0 2.2px, transparent 2.8px),
        radial-gradient(circle at 23px 11px, var(--accent) 0 1.8px, transparent 2.4px);
      filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), 0.65));
      animation: ai-header-bubbles 1.05s ease-in-out infinite;
    }

    @keyframes ai-header-sheen {
      0% {
        transform: translateX(-115%);
      }

      58%,
      100% {
        transform: translateX(115%);
      }
    }

    @keyframes ai-header-bubbles {
      0%,
      100% {
        opacity: 0.62;
        transform: translateY(2px) scale(0.92);
      }

      45% {
        opacity: 1;
        transform: translateY(-2px) scale(1);
      }
    }

    @media (prefers-reduced-motion: reduce) {

      .header-action-btn.ai-thinking::before,
      .header-action-btn.ai-thinking::after {
        animation: none;
      }
    }

    .header-action-btn.saves-btn {
      background: rgba(60, 245, 184, 0.08);
      border-color: rgba(60, 245, 184, 0.25);
    }

    .header-action-btn.saves-btn:hover {
      background: rgba(60, 245, 184, 0.16);
      border-color: rgba(60, 245, 184, 0.5);
    }

    .header-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      background: var(--panel2);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 0.9rem;
      min-width: 340px;
      max-width: 420px;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
      z-index: 200;
      flex-direction: column;
      gap: 0.6rem;
    }

    .header-dropdown.open {
      display: flex;
    }

    .header-dropdown::before {
      content: '';
      position: absolute;
      top: -6px;
      right: 16px;
      width: 12px;
      height: 12px;
      background: var(--panel2);
      border-left: 1px solid var(--line);
      border-top: 1px solid var(--line);
      transform: rotate(45deg);
    }

    @media (max-width: 600px) {
      .header-actions {
        gap: 0.3rem;
      }

      .header-action-btn {
        padding: 0.35rem 0.6rem;
        font-size: 0.76rem;
      }

      .header-action-btn .btn-label-text {
        display: none;
      }

      .header-dropdown {
        min-width: 290px;
        right: -1rem;
      }
    }

    header.site-header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 64px;
      z-index: 1000;
      background: var(--bg);
      display: flex;
      align-items: center;
      padding: 0 1.25rem;
      border-bottom: 1px solid var(--line);
      box-sizing: border-box;
    }

    .nav {
      display: flex;
      gap: 1.5rem;
      font-size: 0.9rem;
      flex: 1;
      align-items: center;
    }

    .nav a {
      color: var(--mute);
      text-decoration: none;
      transition: color 0.2s;
    }

    .nav a:hover,
    .nav a[aria-current="page"] {
      color: var(--text);
    }

    .maker-wrap {
      max-width: 1400px;
      margin: 0 auto;
      padding: 1.25rem;
    }

    .maker-header {
      margin-top: 84px;
      margin-bottom: 0;
      padding-bottom: 1rem;
      border-bottom: 1px solid transparent;
      background-image: linear-gradient(var(--bg), var(--bg)), linear-gradient(90deg, rgba(var(--accent-rgb), 0.35) 0%, rgba(60, 245, 184, 0.2) 50%, transparent 100%);
      background-origin: border-box;
      background-clip: padding-box, border-box;
    }

    .header-content {
      display: flex;
      align-items: center;
      gap: 1.2rem;
    }

    .app-icon {
      width: 48px;
      height: 48px;
      background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15) 0%, rgba(60, 245, 184, 0.05) 100%);
      border: 1px solid rgba(var(--accent-rgb), 0.35);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
      box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.18), inset 0 0 12px rgba(var(--accent-rgb), 0.08);
      flex-shrink: 0;
      animation: icon-breathe 4s ease-in-out infinite;
    }

    @keyframes icon-breathe {
      0%, 100% { box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.18), inset 0 0 12px rgba(var(--accent-rgb), 0.08); }
      50% { box-shadow: 0 0 26px rgba(var(--accent-rgb), 0.32), inset 0 0 16px rgba(var(--accent-rgb), 0.14); }
    }

    .app-icon svg {
      width: 28px;
      height: 28px;
    }

    .header-text {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
    }

    .title-row {
      display: flex;
      align-items: center;
      gap: 0.8rem;
    }

    /* Compact Guide pill living beside the page title */
    .guide-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.32rem;
      background: rgba(var(--accent-rgb), 0.08);
      border: 1px solid rgba(var(--accent-rgb), 0.32);
      color: var(--accent);
      border-radius: 999px;
      padding: 0.22rem 0.66rem;
      font-family: var(--font-display);
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
    }

    .guide-pill:hover {
      background: rgba(var(--accent-rgb), 0.16);
      border-color: rgba(var(--accent-rgb), 0.6);
      box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.25);
    }

    .maker-header h1 {
      font-family: var(--font-display);
      /* Scales with the viewport so the title never wraps to multiple
         lines at mid widths; breakpoint overrides below still apply. */
      font-size: clamp(1.35rem, 0.7rem + 1.9vw, 2.2rem);
      white-space: nowrap;
      margin: 0;
      font-weight: 700;
      text-transform: uppercase;
      background: linear-gradient(100deg, #fff 0%, color-mix(in srgb, var(--accent) 45%, #fff) 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      letter-spacing: 0.06em;
      filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.25));
    }

    .how-to {
      background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.07) 0%, rgba(60, 245, 184, 0.03) 100%);
      border: 1px solid rgba(var(--accent-rgb), 0.18);
      border-left: 3px solid var(--accent);
      border-radius: 12px;
      padding: .8rem 1.1rem;
      font-size: .82rem;
      color: var(--mute);
      line-height: 1.6;
    }

    .how-to strong {
      color: color-mix(in srgb, var(--accent) 65%, #fff);
      font-weight: 600;
    }

    /* Settings wider, preview proportionally smaller */
    .maker-grid {
      display: grid;
      grid-template-columns: minmax(440px, 580px) minmax(0, 1fr);
      gap: 1.5rem;
      align-items: start;
    }

    @media (max-width:960px) {
      .maker-grid {
        display: flex;
        flex-direction: column-reverse;
      }
      .controls-panel {
        max-height: none !important;
        overflow-y: visible !important;
      }
      .canvas-panel {
        min-height: 45vh !important;
      }
    }

    /* Controls Panel */
    .controls-panel {
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
      max-height: calc(100vh - 100px);
      overflow-y: auto;
      overflow-x: hidden;
      padding-right: 6px;
      scroll-behavior: smooth;
    }

    .controls-panel::-webkit-scrollbar {
      width: 5px;
    }

    .controls-panel::-webkit-scrollbar-track {
      background: transparent;
    }

    .controls-panel::-webkit-scrollbar-thumb {
      background: rgba(var(--accent-rgb), 0.2);
      border-radius: 6px;
    }

    .controls-panel::-webkit-scrollbar-thumb:hover {
      background: rgba(var(--accent-rgb), 0.4);
    }

    .ai-box {
      background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.08) 0%, rgba(14, 21, 32, 0) 100%);
      border: 1px solid var(--accent);
      border-radius: 12px;
      padding: 1.2rem;
      flex-shrink: 0;
      box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.05);
    }

    details.setting-group {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 6px;
      overflow: hidden;
      transition: border-color 0.25s, box-shadow 0.25s;
      flex-shrink: 0;
    }

    details.setting-group:hover {
      border-color: rgba(var(--accent-rgb), 0.35);
      box-shadow: 0 2px 16px rgba(var(--accent-rgb), 0.06);
    }

    details.setting-group[open] {
      border-color: rgba(var(--accent-rgb), 0.28);
      background: var(--panel2);
      box-shadow: 0 4px 24px rgba(var(--accent-rgb), 0.08);
    }

    summary.group-header {
      padding: 1rem 1.2rem;
      cursor: pointer;
      font-family: var(--font-display);
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--text);
      -webkit-user-select: none;
      user-select: none;
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: var(--panel);
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    summary.group-header::-webkit-details-marker {
      display: none;
    }

    /* Chevron — rotates smoothly on open */
    summary.group-header::after {
      content: "";
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--panel2);
      border: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5L5 6.5L8 3.5' stroke='%238ca0c0' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s;
    }

    details[open]>summary.group-header::after {
      transform: rotate(180deg);
      border-color: rgba(var(--accent-rgb), 0.4);
      /* Keeps the base rule's neutral glyph: a data-URI stroke can't
         follow var(--accent), and a hardcoded blue clashes with custom
         accents — the accent-tinted ring above signals the open state */
    }

    details[open]>summary.group-header {
      border-bottom: 1px solid var(--line);
    }

    /* Smooth reveal animation for group content */
    .group-content {
      padding: 1.15rem 1.2rem;
      display: flex;
      flex-direction: column;
      gap: 1.15rem;
      animation: group-reveal 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @keyframes group-reveal {
      from {
        opacity: 0;
        transform: translateY(-6px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .sub-label {
      font-family: var(--font-display);
      font-size: .74rem;
      text-transform: uppercase;
      letter-spacing: .14em;
      color: var(--hint);
      font-weight: 600;
      margin: 0 0 0.5rem 0;
    }

    /* Bracketed prefix gives labels a readout feel */
    .sub-label::after {
      content: ' //';
      color: var(--line);
      letter-spacing: 0;
    }

    /* Shape selector */
    .shape-btns {
      display: flex;
      gap: .4rem;
      flex-wrap: wrap;
    }

    .shape-btn {
      position: relative;
      flex: 1 1 20%;
      text-align: center;
      padding: .6rem .25rem;
      border-radius: 4px;
      cursor: pointer;
      background: var(--panel2);
      border: 1px solid var(--line);
      font-size: .84rem;
      color: var(--mute);
      -webkit-user-select: none;
      user-select: none;
      transition: all .15s;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .24rem;
      min-width: 64px;
    }

    .shape-btn input[type=radio] {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }

    .shape-btn .shape-icon {
      font-size: 1.3rem;
      line-height: 1;
    }

    .shape-btn:has(input:checked) {
      background: rgba(var(--accent-rgb), .12);
      color: var(--accent);
      border-color: rgba(var(--accent-rgb), .55);
      font-weight: 600;
      box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.18), inset 0 0 10px rgba(var(--accent-rgb), 0.06);
      text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.45);
    }

    /* Quality Buttons */
    .quality-btns {
      display: flex;
      gap: .4rem;
      flex-wrap: wrap;
      margin-bottom: 0.5rem;
    }

    .q-btn {
      position: relative;
      flex: 1 1 20%;
      text-align: center;
      padding: .45rem .15rem;
      border-radius: 4px;
      cursor: pointer;
      background: var(--panel2);
      border: 1px solid var(--line);
      font-size: .84rem;
      color: var(--mute);
      -webkit-user-select: none;
      user-select: none;
      transition: all .12s;
      min-width: 52px;
    }

    .q-btn input[type=radio] {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }

    .q-btn:has(input:checked) {
      background: rgba(var(--accent-rgb), .14);
      color: var(--accent);
      border-color: rgba(var(--accent-rgb), .55);
      font-weight: 600;
      box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.16);
      text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.45);
    }

    /* Toggle Switches */
    .toggle-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: .6rem;
    }

    .toggle-text-wrap {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      flex: 1;
      min-width: 0;
    }

    .toggle-row span {
      font-size: .88rem;
      color: var(--text);
      line-height: 1.2;
      word-wrap: break-word;
    }

    .mode-label {
      font-size: .74rem;
      color: var(--hint);
      text-transform: uppercase;
      letter-spacing: .08em;
    }

    .toggle-sw {
      position: relative;
      display: inline-block;
      width: 38px;
      height: 22px;
      flex-shrink: 0;
    }

    .toggle-sw input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .toggle-sw .trk {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #0a1620;
      border: 1px solid #1c3a50;
      border-radius: 4px;
      transition: .18s;
      box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.5);
    }

    .toggle-sw .trk::before {
      position: absolute;
      content: "";
      height: 14px;
      width: 14px;
      left: 3px;
      bottom: 3px;
      background: linear-gradient(180deg, #3d5871 0%, #24384c 100%);
      border-radius: 2px;
      transition: .18s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .toggle-sw input:checked+.trk {
      background: rgba(60, 245, 184, .14);
      border-color: var(--teal);
      box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 10px rgba(60, 245, 184, 0.3);
    }

    .toggle-sw input:checked+.trk::before {
      transform: translateX(16px);
      background: linear-gradient(180deg, #9fffdc 0%, var(--teal) 60%);
      box-shadow: 0 0 8px rgba(60, 245, 184, 0.8);
    }

    /* Inputs & Premium Sliders */
    .field {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }

    .field label {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-size: .88rem;
      color: var(--text);
      flex-wrap: wrap;
    }

    .field label>span {
      display: none;
    }

    /* Opt-outs from the span hider above: labels that carry their own
       visible title/subtitle or axis note */
    .field label>span.lbl-visible {
      display: block;
    }

    .field label>span.rg-axis-note {
      display: inline;
    }

    .field-row {
      display: flex;
      align-items: center;
      gap: .6rem;
      width: 100%;
    }

    /* Custom Webkit Slider */
    input[type=range] {
      /* Without appearance:none Chrome ignores the custom track/thumb
         below and draws its native (blue) slider */
      -webkit-appearance: none;
      appearance: none;
      flex: 1;
      min-width: 50px;
      background: transparent;
      height: 24px;
      cursor: pointer;
    }

    input[type=range]::-webkit-slider-runnable-track {
      height: 4px;
      background:
        repeating-linear-gradient(90deg, rgba(var(--accent-rgb), 0.22) 0 1px, transparent 1px 9px),
        var(--line);
      border-radius: 2px;
      transition: background 0.2s ease;
    }

    input[type=range]:hover::-webkit-slider-runnable-track {
      background:
        repeating-linear-gradient(90deg, rgba(var(--accent-rgb), 0.35) 0 1px, transparent 1px 9px),
        color-mix(in srgb, var(--line), var(--accent) 14%);
    }

    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      height: 18px;
      width: 9px;
      border-radius: 2px;
      background: linear-gradient(180deg, color-mix(in srgb, var(--accent), #fff 62%) 0%, var(--accent) 45%, color-mix(in srgb, var(--accent), #000 24%) 100%);
      margin-top: -7px;
      box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.55);
      transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.15s;
    }

    input[type=range]::-webkit-slider-thumb:hover {
      transform: scaleY(1.2) scaleX(1.3);
      box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.9);
    }

    /* Firefox fader parity */
    input[type=range]::-moz-range-track {
      height: 4px;
      background:
        repeating-linear-gradient(90deg, rgba(var(--accent-rgb), 0.22) 0 1px, transparent 1px 9px),
        var(--line);
      border-radius: 2px;
    }

    input[type=range]::-moz-range-thumb {
      height: 18px;
      width: 9px;
      border: none;
      border-radius: 2px;
      background: linear-gradient(180deg, color-mix(in srgb, var(--accent), #fff 62%) 0%, var(--accent) 45%, color-mix(in srgb, var(--accent), #000 24%) 100%);
      box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.55);
    }

    /* Kill native spinner arrows everywhere — bad for touch, steal width from digits */
    input[type=number]::-webkit-outer-spin-button,
    input[type=number]::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    input[type=number] {
      -moz-appearance: textfield;
      appearance: textfield;
      width: 64px;
      background: var(--panel);
      color: var(--text);
      flex-shrink: 0;
      border: 1px solid var(--line);
      border-radius: 4px;
      padding: .35rem .4rem;
      text-align: center;
      font-size: .9rem;
      font-family: var(--font-mono);
      transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
      font-variant-numeric: tabular-nums;
    }

    .field-row input[type=number] {
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--accent);
      text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.35);
    }

    input[type=number]:hover {
      border-color: #2a5570;
      background: #121b29;
    }

    input[type=number]:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.2);
    }

    /* Touch-friendly stepper buttons — wraps any number input */
    .touch-stepper {
      display: inline-flex;
      align-items: stretch;
      flex-shrink: 0;
      border: 1px solid var(--line);
      border-radius: 4px;
      overflow: hidden;
      background: var(--panel);
      transition: border-color 0.15s, box-shadow 0.15s;
    }

    .touch-stepper:hover {
      border-color: #2a5570;
    }

    .touch-stepper:focus-within {
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.2);
    }

    .touch-stepper input[type=number] {
      border: none;
      border-radius: 0;
      background: transparent;
      width: 60px;
      padding: 0.45rem 0.3rem;
      min-height: 38px;
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--accent);
    }

    .touch-stepper input[type=number]:hover,
    .touch-stepper input[type=number]:focus {
      border: none;
      background: transparent;
      box-shadow: none;
    }

    .touch-stepper .step-btn {
      background: var(--panel2);
      border: none;
      color: var(--mute);
      width: 36px;
      min-height: 38px;
      cursor: pointer;
      font-size: 1.1rem;
      font-weight: 600;
      line-height: 1;
      -webkit-user-select: none;
      user-select: none;
      transition: background 0.12s, color 0.12s;
      display: flex;
      align-items: center;
      justify-content: center;
      -webkit-tap-highlight-color: transparent;
    }

    .touch-stepper .step-btn:hover {
      background: rgba(var(--accent-rgb), 0.15);
      color: var(--accent);
    }

    .touch-stepper .step-btn:active {
      background: rgba(var(--accent-rgb), 0.3);
      transform: scale(0.95);
    }

    .touch-stepper .step-down {
      border-right: 1px solid var(--line);
    }

    .touch-stepper .step-up {
      border-left: 1px solid var(--line);
    }

    /* Compact variant for row-group entries */
    .touch-stepper.compact input[type=number] {
      width: 48px;
      padding: 0.35rem 0.25rem;
      min-height: 34px;
      font-size: 0.95rem;
    }

    .touch-stepper.compact .step-btn {
      width: 30px;
      min-height: 34px;
      font-size: 1rem;
    }

    /* Wider variant for row-group diameter/depth (needs room for "100.0") */
    .touch-stepper.wide input[type=number] {
      width: 56px;
    }

    .hint-line {
      font-size: .76rem;
      color: var(--hint);
      margin: 0;
      line-height: 1.5;
    }

    /* Panel Header Hover State */
    summary.group-header {
      transition: background 0.2s ease, color 0.15s;
    }

    summary.group-header:hover {
      background: rgba(var(--accent-rgb), 0.05);
    }

    details[open]>summary.group-header:hover {
      background: rgba(var(--accent-rgb), 0.07);
    }

    /* Presets */
    .presets {
      display: flex;
      flex-wrap: wrap;
      gap: .4rem;
    }

    .chip {
      padding: .36rem .8rem;
      font-size: .80rem;
      border-radius: 20px;
      background: var(--panel);
      border: 1px solid var(--line);
      color: var(--mute);
      cursor: pointer;
      transition: all .15s;
      white-space: nowrap;
      font-weight: 500;
    }

    .chip:hover {
      border-color: rgba(var(--accent-rgb), 0.5);
      color: var(--accent);
      background: rgba(var(--accent-rgb), .08);
      transform: translateY(-1px);
    }

    /* Row Groups */
    .rg-list {
      display: flex;
      flex-direction: column;
      gap: .5rem;
      margin-bottom: .5rem;
    }

    /* ─── Live top-view hole map ───────────────────────── */
    .rack-map-card {
      background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.05) 0%, rgba(6, 12, 18, 0.35) 100%);
      border: 1px solid var(--line);
      border-radius: 5px;
      padding: 0.6rem 0.75rem 0.5rem;
    }

    .rack-map-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 0.5rem;
      margin-bottom: 0.4rem;
    }

    .rack-map-title {
      font-family: var(--font-display);
      font-size: 0.66rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--hint);
    }

    .rack-map-count {
      font-family: var(--font-mono);
      font-size: 0.78rem;
      color: var(--accent);
      white-space: nowrap;
    }

    .rack-map svg {
      display: block;
      width: 100%;
      max-height: 150px;
      margin: 0 auto;
    }

    /* Axis tags inside the unified grid card — tie the Columns control and
       the row list to the map edges they drive */
    .grid-axis-cols {
      margin: 0.4rem 0 0.35rem;
    }

    .grid-rows-wrap {
      margin-top: 0.4rem;
    }

    .grid-axis-tag {
      display: flex;
      align-items: baseline;
      gap: 0.4rem;
      font-family: var(--font-display);
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 0.35rem;
      white-space: nowrap;
    }

    .grid-axis-arrow {
      color: var(--hint);
    }

    /* ─── Top-view minimap overlay on the 3D viewport ──── */
    .rack-minimap {
      position: absolute;
      top: 1rem;
      left: 1rem;
      z-index: 10;
      width: 236px;
      background: rgba(8, 16, 25, 0.84);
      border: 1px solid var(--line);
      border-radius: 6px;
      backdrop-filter: blur(4px);
      overflow: hidden;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    }

    .rack-minimap-head {
      display: flex;
      align-items: baseline;
      gap: 0.45rem;
      width: 100%;
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 0.42rem 0.6rem 0.32rem;
      color: var(--text);
      text-align: left;
    }

    .rack-minimap-head .rack-map-title {
      white-space: nowrap;
    }

    .rack-minimap-head .rack-map-count {
      margin-left: auto;
    }

    .rack-minimap-caret {
      color: var(--hint);
      font-size: 0.7rem;
      transition: transform 0.18s;
    }

    .rack-minimap .rack-map {
      padding: 0 0.55rem 0.55rem;
    }

    .rack-minimap.collapsed .rack-map {
      display: none;
    }

    .rack-minimap.collapsed .rack-minimap-caret {
      transform: rotate(-90deg);
    }

    @media (max-width: 720px) {
      .rack-minimap {
        width: 150px;
      }

      .rack-minimap .rack-map svg {
        max-height: 110px;
      }
    }

    /* Map bands are clickable (jump to their row card) and light up when
       the matching card is hovered */
    .rack-map .rack-map-band {
      cursor: pointer;
      transition: filter 0.15s;
    }

    .rack-map .rack-map-band:hover,
    .rack-map .rack-map-band.band-hi {
      filter: brightness(1.6);
    }

    @keyframes rg-flash-pulse {
      0% { box-shadow: 0 0 0 0 var(--rg-color, var(--accent)); }
      35% { box-shadow: 0 0 16px 3px var(--rg-color, var(--accent)); }
      100% { box-shadow: 0 0 0 0 transparent; }
    }

    .rg-entry.rg-flash {
      animation: rg-flash-pulse 1s ease;
    }

    /* ─── Light mode: replace dark-tinted card fills that render as murky
       grey on a light background ───────────────────────── */
    body.light-mode .rack-map-card {
      background: rgba(var(--accent-rgb), 0.05);
      border-color: rgba(var(--accent-rgb), 0.25);
    }

    body.light-mode .feature-card {
      background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.05) 0%, rgba(255, 255, 255, 0.75) 100%);
      border-color: rgba(var(--accent-rgb), 0.22);
    }

    body.light-mode .feature-card-header {
      border-bottom-color: rgba(var(--accent-rgb), 0.16);
    }

    body.light-mode .feature-card .toggle-row + .toggle-row {
      border-top-color: rgba(var(--accent-rgb), 0.12);
    }

body.light-mode .rack-minimap {
      background: rgba(255, 255, 255, 0.9);
      box-shadow: 0 4px 14px rgba(22, 50, 63, 0.18);
    }

    /* One grid template shared by the header row and every vial row, so
       column labels always sit exactly over their inputs. The header gets
       horizontal padding equal to the row cards' border + padding so the
       tracks line up to the pixel. */
    .lw-grid {
      display: grid;
      grid-template-columns: minmax(86px, 1.6fr) repeat(5, minmax(42px, 1fr)) 26px;
      gap: 4px;
      align-items: center;
    }

    .lw-grid-header {
      padding: 0 calc(0.5rem + 1px) 0.2rem calc(0.5rem + 1px);
      font-family: var(--font-display);
      font-size: 0.62rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--hint);
      font-weight: 600;
    }

    .lw-grid-header span {
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      cursor: help;
    }

    .lw-grid-header span:first-child {
      text-align: left;
      cursor: default;
    }

    .lw-row {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 0.5rem;
      background: var(--panel2);
      border: 1px solid var(--line);
      border-radius: 5px;
    }

    .lw-tog-row {
      display: flex;
      gap: 8px;
      align-items: center;
      font-size: 0.74rem;
      color: var(--mute);
      padding-left: 2px;
    }

    .lw-input {
      font-size: 0.78rem;
      font-family: var(--font-mono);
      padding: 0.25rem 0.15rem;
      background: var(--panel);
      color: var(--text);
      border: 1px solid var(--line);
      border-radius: 4px;
      width: 100%;
      min-width: 0;
      text-align: center;
    }

    .lw-name-input {
      text-align: left;
      padding-left: 0.35rem;
      font-family: 'Inter', system-ui, sans-serif;
    }

    .lw-input.is-disabled {
      opacity: 0.35;
      border-style: dashed;
      cursor: help;
    }

    /* Delete button squeezed into the 26px end column */
    .lw-del {
      margin-left: 0;
      padding: 0;
      width: 100%;
      min-height: 28px;
      font-size: 1.1rem;
    }

    .lw-del:disabled {
      opacity: 0.2;
    }

    .lw-toggle {
      display: flex;
      align-items: center;
      gap: 4px;
      cursor: pointer;
    }

    .lw-check {
      margin: 0;
    }

    .lw-sep {
      opacity: 0.3;
    }

    .lw-oval-label.is-active {
      color: var(--accent);
      font-weight: 600;
    }

    /* Enhanced Row Group Cards */
    .rg-entry {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: rgba(var(--accent-rgb), 0.05); /* Lighter, tinted contrast */
  border: 1px solid rgba(var(--accent-rgb), 0.2); /* Enhanced border visibility */
  /* --rg-color is set per-card by JS and matches this group's band on the
     top-view map, so card ↔ map correspondence reads at a glance */
  border-left: 4px solid var(--rg-color, var(--accent));
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
  transition: transform 0.1s, border-color 0.1s, box-shadow 0.1s;
}

    .rg-entry:hover {
      border-color: rgba(var(--accent-rgb), 0.4);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .rg-entry-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 0.35rem;
      border-bottom: 1px dashed var(--line);
    }

    .rg-entry-title {
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }

    .rg-group-label {
      font-weight: 600;
      font-size: 0.85rem;
      color: var(--text);
      outline: none;
      cursor: text;
      min-width: 60px;
      border-radius: 4px;
      padding: 1px 4px;
      transition: background 0.15s;
    }

    .rg-group-label:hover {
      background: rgba(var(--accent-rgb), 0.07);
      border-radius: 4px;
    }

    .rg-group-label:focus {
      background: rgba(var(--accent-rgb), 0.12);
      border-radius: 4px;
    }

    .rg-entry-controls {
      display: flex;
      gap: 0.8rem;
      flex-wrap: wrap;
      align-items: flex-end;
    }

    .rg-ctrl-group {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      flex: 1;
      min-width: 80px;
    }

    .rg-ctrl-group label {
      font-size: 0.72rem;
      color: var(--hint);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-weight: 600;
      margin: 0;
    }

    .rg-ctrl-group .touch-stepper {
      width: 100%;
      justify-content: space-between;
    }

    .rg-ctrl-group .touch-stepper input {
      width: 100%;
      text-align: center;
    }

    .rg-vial-type {
      width: 100%;
    }

    .rg-x {
      color: var(--mute);
      white-space: nowrap;
      font-size: .8rem;
    }

    .rg-sep {
      color: var(--hint);
      font-size: .8rem;
    }

    .rg-vial-type {
      flex: 1 1 110px;
      min-width: 100px;
      background: var(--panel2);
      color: var(--text);
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 0.4rem 0.5rem;
      font-size: 0.84rem;
      min-height: 34px;
    }

    .rg-preview-row {
      margin-top: 0;
      flex-direction: row;
      align-items: center;
      gap: 0.5rem;
    }

    .is-hidden {
      display: none;
    }

    .rg-autosize {
      display: none;
      background: rgba(255,80,80,0.12);
      border: 1px solid rgba(255,80,80,0.5);
      color: #ff7878;
      border-radius: 6px;
      padding: 0.25rem 0.5rem;
      font-size: 0.72rem;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      min-height: 30px;
      transition: all 0.12s;
      margin-top: 0.2rem;
    }

    .rg-irl-wrap {
      display: none;
      align-items: center;
      gap: 3px;
      font-size: 0.7rem;
      color: var(--teal);
      cursor: pointer;
      padding: 0 4px;
      border: 1px solid rgba(60,245,184,0.3);
      border-radius: 5px;
      background: rgba(60,245,184,0.05);
      min-height: 34px;
    }

    .rg-check {
      margin: 0;
    }

    /* Live tube-fit reading under the vial picker (seated / exposed) */
    .rg-fit-hint {
      margin: 0.2rem 0 0;
      padding-left: 0.5rem;
      border-left: 2px solid rgba(var(--accent-rgb), 0.5);
      font-size: 0.72rem;
      line-height: 1.35;
      color: var(--mute);
    }
    .rg-fit-hint[hidden] { display: none; }

    /* Fine-tune disclosure — tucks less-used per-group geometry (seat bottom,
       depth, high-detail) away so the card reads as Rows · Dia · Tube. */
    .rg-finetune {
      margin-top: 0.15rem;
      border-top: 1px dashed var(--line);
      padding-top: 0.4rem;
    }
    .rg-finetune-summary {
      list-style: none;
      cursor: pointer;
      -webkit-user-select: none;
      user-select: none;
      display: flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.7rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--hint);
      transition: color 0.15s;
    }
    .rg-finetune-summary:hover { color: var(--text); }
    .rg-finetune-summary::-webkit-details-marker { display: none; }
    .rg-finetune-summary::before {
      content: '▸';
      font-size: 0.65rem;
      transition: transform 0.2s;
    }
    .rg-finetune[open] > .rg-finetune-summary::before { transform: rotate(90deg); }
    .rg-finetune-body {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      gap: 0.8rem;
      padding-top: 0.55rem;
    }
    .rg-bottom {
      width: 100%;
      background: var(--panel2);
      color: var(--text);
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 0.4rem 0.5rem;
      font-size: 0.84rem;
      min-height: 34px;
    }

    .rg-remove {
      margin-left: auto;
      background: none;
      border: 1px solid transparent;
      color: var(--hint);
      cursor: pointer;
      font-size: 1.4rem;
      line-height: 1;
      padding: 0.2rem 0.55rem;
      border-radius: 6px;
      transition: all 0.12s;
      min-height: 34px;
    }

    .rg-remove:hover:not(:disabled) {
      color: #e05050;
      border-color: rgba(224, 80, 80, 0.3);
      background: rgba(224, 80, 80, 0.08);
    }

    .btn-add {
      width: 100%;
      background: rgba(var(--accent-rgb), 0.04);
      border: 1px dashed rgba(var(--accent-rgb), 0.35);
      color: var(--accent);
      border-radius: 5px;
      padding: .65rem;
      font-size: .8rem;
      cursor: pointer;
      transition: all .18s;
      min-height: 40px;
      font-family: var(--font-display);
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .btn-add:hover {
      border-color: rgba(var(--accent-rgb), 0.7);
      border-style: solid;
      color: var(--accent);
      background: rgba(var(--accent-rgb), 0.1);
      box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.15);
      transform: translateY(-1px);
    }

    .rg-entry-header .rg-remove {
      margin-left: 0.35rem;
    }

    .drag-handle {
      cursor: grab;
      color: var(--hint);
      font-weight: bold;
      padding: 0.3rem 0.2rem;
      -webkit-user-select: none;
      user-select: none;
      font-size: 1rem;
      touch-action: none;
    }

    .drag-handle:active {
      cursor: grabbing;
    }

    /* AI Typing Anim */
    .ai-typing {
      display: none;
      justify-content: center;
      gap: 4px;
      margin-top: 0.8rem;
    }

    .ai-typing .dot {
      width: 6px;
      height: 6px;
      background: var(--accent);
      border-radius: 50%;
      animation: ai-bounce 1.4s infinite ease-in-out both;
    }

    .ai-typing .dot:nth-child(1) {
      animation-delay: -0.32s;
    }

    .ai-typing .dot:nth-child(2) {
      animation-delay: -0.16s;
    }

    @keyframes ai-bounce {

      0%,
      80%,
      100% {
        transform: scale(0);
      }

      40% {
        transform: scale(1);
      }
    }

    /* ── Smart Generator chat ─────────────────────────────────────── */
    .header-dropdown.ai-chat-dropdown {
      min-width: 380px;
      max-width: 460px;
      width: min(460px, calc(100vw - 2rem));
    }

    /* Smart Generator auth gate: while logged out the dropdown swaps the
       chat UI for the #aiLoggedOut sign-in prompt (ai.js toggles the class
       from the auth:login / auth:logout events). */
    #aiLoggedOut {
      display: none;
    }

    .ai-chat-dropdown.logged-out #aiLoggedOut {
      display: block;
    }

    .ai-chat-dropdown.logged-out .ai-chat-head,
    .ai-chat-dropdown.logged-out .ai-chat-log,
    .ai-chat-dropdown.logged-out .ai-typing,
    .ai-chat-dropdown.logged-out .ai-input-row,
    .ai-chat-dropdown.logged-out #aiStatusText {
      display: none;
    }

    .ai-chat-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
    }

    .ai-chat-head .vr-inline-008 {
      margin-bottom: 0;
    }

    .ai-chat-clear {
      background: transparent;
      border: 1px solid var(--line);
      border-radius: 6px;
      color: var(--hint);
      font-size: 0.68rem;
      font-family: var(--font-mono);
      padding: 0.2rem 0.5rem;
      cursor: pointer;
      transition: color 0.15s, border-color 0.15s;
    }

    .ai-chat-clear:hover {
      color: var(--accent);
      border-color: var(--accent);
    }

    .ai-chat-log {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      max-height: min(46vh, 420px);
      min-height: 120px;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: 0.25rem 0.1rem;
      scrollbar-width: thin;
    }

    .ai-msg {
      max-width: 88%;
      border-radius: 10px;
      padding: 0.5rem 0.65rem;
      font-size: 0.84rem;
      line-height: 1.45;
      animation: ai-msg-in 0.22s ease-out both;
    }

    @keyframes ai-msg-in {
      from {
        opacity: 0;
        transform: translateY(6px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    .ai-msg-user {
      align-self: flex-end;
      background: rgba(var(--accent-rgb), 0.12);
      border: 1px solid rgba(var(--accent-rgb), 0.3);
      color: var(--text);
    }

    .ai-msg-bot {
      align-self: flex-start;
      background: var(--panel);
      border: 1px solid var(--line);
      color: var(--text);
    }

    .ai-msg-greeting {
      color: var(--mute);
    }

    .ai-msg-text {
      white-space: pre-wrap;
      word-break: break-word;
    }

    .ai-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 0.3rem;
      margin-top: 0.45rem;
    }

    .ai-chip {
      font-family: var(--font-mono);
      font-size: 0.66rem;
      color: var(--teal);
      border: 1px solid rgba(60, 245, 184, 0.35);
      background: rgba(60, 245, 184, 0.07);
      border-radius: 999px;
      padding: 0.12rem 0.5rem;
      letter-spacing: 0.02em;
    }

    .ai-chip-err {
      color: var(--amber);
      border-color: rgba(255, 180, 84, 0.4);
      background: rgba(255, 180, 84, 0.07);
    }

    .ai-suggests {
      display: flex;
      flex-wrap: wrap;
      gap: 0.35rem;
      margin-top: 0.5rem;
    }

    .ai-suggest {
      font-family: var(--font-mono);
      font-size: 0.7rem;
      color: var(--accent);
      background: rgba(var(--accent-rgb), 0.06);
      border: 1px solid rgba(var(--accent-rgb), 0.35);
      border-radius: 999px;
      padding: 0.22rem 0.65rem;
      cursor: pointer;
      letter-spacing: 0.02em;
      text-align: left;
      transition: background 0.15s, border-color 0.15s, transform 0.1s;
    }

    .ai-suggest:hover {
      background: rgba(var(--accent-rgb), 0.16);
      border-color: var(--accent);
      transform: translateY(-1px);
    }

    .ai-rack-cards {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      margin-top: 0.5rem;
    }

    .ai-rack-card {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      background: var(--panel2);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 0.4rem;
      transition: border-color 0.15s;
    }

    .ai-rack-card:hover {
      border-color: rgba(var(--accent-rgb), 0.45);
    }

    .ai-rack-thumb {
      width: 46px;
      height: 46px;
      border-radius: 6px;
      object-fit: cover;
      flex-shrink: 0;
      background: var(--bg);
      border: 1px solid var(--line);
    }

    .ai-rack-thumb-empty {
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--hint);
      font-size: 1.1rem;
    }

    .ai-rack-info {
      flex: 1;
      min-width: 0;
    }

    .ai-rack-title {
      font-family: var(--font-display);
      font-size: 0.8rem;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .ai-rack-meta {
      font-size: 0.68rem;
      color: var(--hint);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .ai-rack-open {
      flex-shrink: 0;
      font-size: 0.72rem;
      padding: 0.3rem 0.6rem;
    }

    .ai-input-row {
      display: flex;
      align-items: flex-end;
      gap: 0.4rem;
    }

    /* Beats .vr-inline-009 (defined later with min-height:70px) on specificity */
    .ai-input-row .ai-chat-input {
      flex: 1;
      min-height: 40px;
      max-height: 120px;
      resize: none;
    }

    .ai-send-btn {
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border-radius: 8px;
    }

    .ai-typing {
      margin-top: 0;
      justify-content: flex-start;
      padding-left: 0.4rem;
    }

    /* Preview Column Wrapper */
    .preview-column {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      min-width: 0;
    }

    /* Shader Buttons */
    .shader-btn {
      background: transparent;
      border: 1px solid transparent;
      border-radius: 6px;
      cursor: pointer;
      padding: 0.2rem 0.4rem;
      font-size: 1.1rem;
      transition: all 0.2s;
      filter: grayscale(0.5);
      opacity: 0.6;
    }

    .shader-btn:hover {
      opacity: 1;
      background: rgba(255, 255, 255, 0.1);
    }

    .shader-btn.active {
      filter: grayscale(0);
      opacity: 1;
      background: rgba(var(--accent-rgb), 0.2);
      border-color: var(--accent);
    }

    /* Shader swatch dots — grayscaled while inactive by the rules above */
    .shader-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .shader-dot {
      display: block;
      width: 14px;
      height: 14px;
      border-radius: 50%;
    }

    .dot-classic {
      /* Fixed blue on purpose — this dot previews the Classic material
         color (#4ab0e8 in viewport.js), not the UI accent */
      background: linear-gradient(135deg, #baf2ff 0%, #0d9cc4 100%);
    }

    .dot-matte {
      background: linear-gradient(135deg, #e6e6e6 0%, #8f8f8f 100%);
    }

    .dot-wire {
      background: transparent;
      border: 1.5px solid var(--mute);
      background-image: linear-gradient(45deg, transparent 46%, currentColor 46%, currentColor 54%, transparent 54%);
    }

    .dot-normals {
      background: conic-gradient(#ff5ec4, #ffb454, #3cf5b8, #2dd8ff, #ff5ec4);
    }

    /* OVERRIDE EXTERNAL CSS LEAKS FOR OVERLAYS */
    .shader-controls,
    .plate-controls {
      display: inline-flex !important;
      width: max-content !important;
      flex: 0 0 auto !important;
    }

    .shader-controls>*,
    .plate-controls>* {
      flex: 0 0 auto !important;
    }

    #shaderColorPicker {
      width: 24px !important;
      height: 24px !important;
      flex-shrink: 0 !important;
    }

    #rulerBtn,
    #exitMeasureBtn,
    #cameraToggleBtn {
      flex: none !important;
    }

    .orbit-text {
      width: max-content !important;
      flex: none !important;
    }

    /* Canvas */
    .canvas-panel {
      background: radial-gradient(ellipse at 50% 40%, #0a1c2b 0%, #04070c 65%);
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      position: relative;
      min-height: 600px;
      height: 100%;
      box-shadow: 0 8px 40px rgba(0, 0, 0, .5), 0 0 30px rgba(var(--accent-rgb), 0.06), 0 0 0 1px rgba(var(--accent-rgb), 0.06) inset;
      display: block;
    }

    #previewCanvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    /* Stats Bar below Canvas — telemetry strip */
    .canvas-footer {
      background: linear-gradient(180deg, var(--panel2) 0%, rgba(5, 11, 17, 0.85) 100%);
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 0.85rem 1.2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(var(--accent-rgb), 0.06);
    }

    .dim-readout {
      display: flex;
      gap: 1.5rem;
      flex-wrap: wrap;
    }

    .dim-readout > span {
      display: flex;
      flex-direction: column;
      gap: .1rem;
    }

    /* Combined W × L × H readout — one stat instead of three */
    .dim-size i {
      font-style: normal;
      color: var(--hint);
      font-size: 0.72em;
      margin: 0 0.28rem;
      text-shadow: none;
    }

    .dim-readout .dim-val {
      color: var(--accent);
      font-family: var(--font-mono);
      font-size: 0.98rem;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.4);
    }

    .dim-readout .dim-lbl {
      font-family: var(--font-display);
      font-size: .62rem;
      text-transform: uppercase;
      letter-spacing: .12em;
      color: var(--hint);
    }

    .export-actions {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      flex: 1;
      justify-content: flex-end;
    }

    button.primary {
      background: linear-gradient(135deg, var(--accent) 0%, #22e5a2 100%);
      /* Near-black "ink" tinted with the accent hue so text keeps
         contrast on the gradient whatever accent the user picks */
      color: color-mix(in srgb, var(--accent) 16%, #000);
      border: none;
      border-radius: 3px;
      padding: .6rem 1.2rem;
      cursor: pointer;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: .86rem;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      transition: box-shadow .18s, transform .18s, filter .18s;
      box-shadow: 0 0 14px rgba(var(--accent-rgb), .28);
      white-space: nowrap;
      clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    }

    button.primary:hover {
      filter: brightness(1.12);
      box-shadow: 0 0 22px rgba(var(--accent-rgb), .5);
      transform: translateY(-1px);
    }

    button.primary:active {
      transform: translateY(0);
    }

    button.primary:disabled {
      opacity: .4;
      cursor: not-allowed;
    }

    button.secondary {
      background: var(--panel);
      color: var(--text);
      border: 1px solid var(--line);
      border-radius: 3px;
      padding: .6rem 1rem;
      cursor: pointer;
      font-size: .85rem;
      transition: all .14s;
      white-space: nowrap;
    }

    button.secondary:hover {
      border-color: var(--accent);
      box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.18);
      color: var(--accent);
    }

    button.secondary:disabled {
      opacity: .4;
      cursor: not-allowed;
    }

    button.secondary:disabled:hover {
      border-color: var(--line);
      box-shadow: none;
      color: var(--text);
    }

    /* Buttons that carry an inline SVG icon */
    #simPrintBtn,
    #shareBtn {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
    }

    .ruler-inch {
      font-size: 0.75rem;
      opacity: 0.9;
    }

    /* Freeform Canvas overrides */
    /* #ffGridContainer div { background: var(--panel) !important; border-color: var(--line) !important; } */

    /* Freeform Canvas Controls */
    .ff-workspace {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      background: #06090f;
      padding: 0.75rem;
      border-radius: 8px;
      border: 1px inset var(--line);
      overflow-x: auto;
      touch-action: none;
      /* Prevents scrolling while drag-painting */
    }

    .ff-middle-row {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .ff-btn-group {
      display: flex;
      gap: 4px;
    }

    .ff-btn-group.vertical {
      flex-direction: column;
    }

    .ff-cell-label {
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 1.15;
      pointer-events: none;
    }

    .ff-cell-depth {
      opacity: 0.65;
      font-size: 0.6rem;
    }

    .edge-btn {
      background: var(--panel2);
      border: 1px solid var(--line);
      color: var(--mute);
      border-radius: 4px;
      cursor: pointer;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      transition: all 0.1s;
      -webkit-user-select: none;
      user-select: none;
    }

    .edge-btn:hover {
      background: rgba(var(--accent-rgb), 0.2);
      color: var(--text);
      border-color: var(--accent);
    }

    .edge-btn:active {
      transform: scale(0.9);
    }

    .edge-btn:disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }

    .edge-btn:disabled:hover {
      background: var(--panel2);
      color: var(--mute);
      border-color: var(--line);
    }

    /* Pop-out Editor Modal */
    #freeformEditor.fullscreen {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 95vw;
      max-width: 800px;
      max-height: 90vh;
      z-index: 9999;
      background: var(--panel);
      border: 1px solid var(--accent);
      border-radius: 12px;
      padding: 1.5rem;
      /* A massive box-shadow acts as the dark overlay backdrop behind the modal */
      box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6), 0 0 0 100vmax rgba(9, 13, 22, 0.85);
      display: flex !important;
      flex-direction: column;
      align-items: stretch;
      overflow-y: auto;
    }

    #freeformEditor.fullscreen #ffGridContainer {
      max-height: 60vh;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 1rem;
      background: var(--bg);
      overflow: auto;
    }

    /* ─── Account UI ───────────────────────────────────── */
    .account-area {
      margin-left: auto;
      position: relative;
    }

    .account-btn {
      background: var(--panel);
      color: var(--text);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 0.5rem 0.9rem;
      cursor: pointer;
      font-size: 0.85rem;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      transition: all 0.15s;
      min-height: 38px;
      white-space: nowrap;
    }

    .account-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .account-btn .acct-icon {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }

    .account-btn.logged-in {
      background: rgba(60, 245, 184, 0.08);
      border-color: rgba(60, 245, 184, 0.4);
      color: var(--teal);
    }

    .account-btn.logged-in:hover {
      background: rgba(60, 245, 184, 0.15);
    }

    .account-btn .acct-chevron {
      font-size: 0.65rem;
      opacity: 0.7;
    }

    .account-dropdown {
      position: absolute;
      top: calc(100% + 0.4rem);
      right: 0;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 10px;
      min-width: 200px;
      padding: 0.4rem;
      z-index: 100;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
      display: none;
      flex-direction: column;
      gap: 0.15rem;
    }

    .account-dropdown.open {
      display: flex;
    }

    .account-dropdown .dd-header {
      padding: 0.55rem 0.7rem;
      border-bottom: 1px solid var(--line);
      margin-bottom: 0.25rem;
    }

    .account-dropdown .dd-header .dd-label {
      font-size: 0.7rem;
      color: var(--hint);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .account-dropdown .dd-header .dd-username {
      font-size: 0.95rem;
      color: var(--text);
      font-weight: 600;
      margin-top: 0.1rem;
      word-break: break-all;
    }

    .account-dropdown .dd-item {
      background: none;
      border: none;
      color: var(--text);
      padding: 0.55rem 0.7rem;
      border-radius: 6px;
      cursor: pointer;
      text-align: left;
      font-size: 0.88rem;
      transition: background 0.12s, color 0.12s;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .account-dropdown .dd-item:hover {
      background: rgba(var(--accent-rgb), 0.1);
      color: var(--accent);
    }

    .account-dropdown .dd-item.danger:hover {
      background: rgba(224, 80, 80, 0.1);
      color: #ff7878;
    }

    /* ─── Auth Modal ───────────────────────────────────── */
    .auth-modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(9, 13, 22, 0.85);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
      z-index: 10000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }

    .auth-modal-backdrop.open {
      display: flex;
    }

    .auth-modal {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 14px;
      width: 100%;
      max-width: 400px;
      padding: 1.5rem;
      box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
      animation: auth-modal-in 0.18s ease-out;
    }

    @keyframes auth-modal-in {
      from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .auth-modal h2 {
      margin: 0 0 1rem 0;
      font-size: 1.2rem;
      font-weight: 700;
      background: linear-gradient(100deg, #fff 0%, color-mix(in srgb, var(--accent) 45%, #fff) 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .auth-tabs {
      display: flex;
      gap: 0.3rem;
      background: var(--panel2);
      padding: 0.3rem;
      border-radius: 9px;
      border: 1px solid var(--line);
      margin-bottom: 1.2rem;
    }

    .auth-tab {
      flex: 1;
      background: none;
      border: none;
      color: var(--mute);
      padding: 0.55rem;
      border-radius: 6px;
      cursor: pointer;
      font-size: 0.88rem;
      font-weight: 500;
      transition: background 0.15s, color 0.15s;
    }

    .auth-tab.active {
      background: rgba(var(--accent-rgb), 0.18);
      color: var(--accent);
      font-weight: 600;
    }

    .auth-field {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      margin-bottom: 0.9rem;
    }

    .auth-field label {
      font-size: 0.78rem;
      color: var(--hint);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      font-weight: 600;
    }

    .auth-field input {
      background: var(--panel2);
      border: 1px solid var(--line);
      border-radius: 8px;
      color: var(--text);
      padding: 0.7rem 0.85rem;
      font-size: 0.95rem;
      transition: border-color 0.15s, box-shadow 0.15s;
      min-height: 42px;
    }

    .auth-field input:hover {
      border-color: #2a5570;
    }

    .auth-field input:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.2);
    }

    .auth-hint {
      font-size: 0.76rem;
      color: var(--hint);
      margin: -0.3rem 0 0.9rem 0;
      line-height: 1.4;
    }

    .auth-error {
      background: rgba(224, 80, 80, 0.1);
      border: 1px solid rgba(224, 80, 80, 0.3);
      color: #ff8888;
      padding: 0.55rem 0.75rem;
      border-radius: 7px;
      font-size: 0.85rem;
      margin-bottom: 0.9rem;
      display: none;
    }

    .auth-error.show {
      display: block;
    }

    .auth-actions {
      display: flex;
      gap: 0.5rem;
      margin-top: 0.4rem;
    }

    .auth-actions button {
      flex: 1;
      min-height: 42px;
    }

    .auth-modal-close {
      position: absolute;
      top: 0.7rem;
      right: 0.8rem;
      background: none;
      border: none;
      color: var(--mute);
      cursor: pointer;
      font-size: 1.4rem;
      line-height: 1;
      padding: 0.3rem 0.5rem;
      border-radius: 6px;
      transition: background 0.12s, color 0.12s;
    }

    .auth-modal-close:hover {
      background: var(--panel2);
      color: var(--text);
    }

    .auth-modal {
      position: relative;
    }

    /* Light Mode Overrides — daylight lab */
    body.light-mode {
      --bg: #eef4f7;
      --panel: #ffffff;
      --panel2: #e4edf2;
      --line: #b7ccd8;
      --accent: #0590b8;
      --accent-rgb: 5, 144, 184;
      --teal: #059669;
      --text: #16323f;
      --mute: #5b7789;
      --hint: #8aa3b2;
      --glow: rgba(var(--accent-rgb), 0.3);
      background-image:
        linear-gradient(rgba(var(--accent-rgb), 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--accent-rgb), 0.045) 1px, transparent 1px);
      background-size: 44px 44px, 44px 44px;
    }

    body.light-mode .field-row input[type=number],
    body.light-mode .dim-readout .dim-val,
    body.light-mode .phase-title {
      text-shadow: none;
    }

    body.light-mode .maker-header h1 {
      filter: none;
    }

    /* 1. Keep Top Nav Banner Dark */
    body.light-mode .site-header {
      background: #090d16;
      border-bottom: 1px solid #1d2e48;
    }

    body.light-mode .nav a {
      color: #8ca0c0;
    }

    body.light-mode .nav a:hover,
    body.light-mode .nav a[aria-current="page"] {
      color: #dde6f8;
    }

    body.light-mode .account-btn {
      background: #0e1520;
      color: #dde6f8;
      border-color: #1d2e48;
    }

    /* 2. Fix Title Text Visibility */
    body.light-mode .maker-header h1 {
      background: linear-gradient(100deg, #16323f 0%, var(--accent) 100%);
      background-clip: text;
      -webkit-background-clip: text;
    }

    /* 3. Fix Section Hover Highlight */
    body.light-mode summary.group-header:hover {
      background: #dce4ef;
    }

    /* 4. Fix 3D Preview Canvas Background */
    body.light-mode .canvas-panel {
      background: radial-gradient(ellipse at 50% 40%, #ffffff 0%, #cbd5e1 65%);
    }

    /* 5. Fix Overlay Controls (View & Tools dropdown + measure states) */
    body.light-mode #viewToolsBtn,
    body.light-mode #viewToolsPanel,
    body.light-mode #cameraToggleBtn,
    body.light-mode #rulerBtn,
    body.light-mode #exitMeasureBtn {
      background: rgba(255, 255, 255, 0.9) !important;
      border-color: var(--line) !important;
      color: var(--text) !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    body.light-mode .shader-btn:hover {
      background: rgba(0, 0, 0, 0.05);
    }

    body.light-mode .plate-btn[data-plate="off"] {
      color: var(--mute) !important;
    }

    body.light-mode #exitMeasureBtn {
      background: rgba(224, 80, 80, 0.15) !important;
      color: #e05050 !important;
    }

    body.light-mode #plateSizeMenu {
      background: rgba(255, 255, 255, 0.96) !important;
      border-color: var(--line) !important;
    }

    body.light-mode .plate-size-opt {
      color: var(--text) !important;
    }

    body.light-mode .plate-size-opt:hover {
      background: rgba(var(--accent-rgb), 0.1) !important;
      color: var(--accent) !important;
    }

    /* 6. Fix Freeform Grid Workspace */
    body.light-mode .ff-workspace {
      background: #f8fafc;
      border-color: var(--line);
    }

    body.light-mode .edge-btn {
      background: #ffffff;
      border-color: var(--line);
      color: var(--text);
    }

    body.light-mode .edge-btn:hover {
      background: rgba(var(--accent-rgb), 0.1);
      border-color: var(--accent);
    }

    body.light-mode #ffGridContainer div {
      border-color: rgba(0, 0, 0, 0.1) !important;
      background-color: #ffffff !important;
      color: #a32a7e !important;
    }

    body.light-mode #ffGridContainer div[style*="rgba(212, 56, 162"] {
      background-color: rgba(212, 56, 162, 0.18) !important;
      border-color: rgba(212, 56, 162, 0.6) !important;
      color: #8c1c68 !important;
    }

    /* 7. Fix Saved Racks Hover & Orbit Text */
    body.light-mode .save-slot {
      background: var(--panel);
      border-color: var(--line);
    }

    body.light-mode .save-slot:hover {
      background: #dce4ef;
      border-color: var(--accent);
    }

    body.light-mode .orbit-text {
      color: #334155 !important;
      opacity: 0.85 !important;
    }

    /* Theme Switch UI */
    .theme-switch {
      position: relative;
      display: inline-block;
      width: 54px;
      height: 28px;
      cursor: pointer;
      flex-shrink: 0;
    }

    .theme-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .theme-slider-bg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: var(--panel);
      border: 1px solid var(--line);
      border-radius: 30px;
      transition: .3s;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 4px;
    }

    .theme-icon-sun,
    .theme-icon-moon {
      font-size: 13px;
      z-index: 1;
      pointer-events: none;
    }

    .theme-knob {
      position: absolute;
      height: 20px;
      width: 20px;
      left: 3px;
      bottom: 3px;
      background-color: var(--text);
      border-radius: 50%;
      transition: .3s cubic-bezier(0.4, 0.0, 0.2, 1);
      z-index: 2;
    }

    .theme-switch input:checked+.theme-slider-bg {
      background-color: var(--accent);
      border-color: var(--accent);
    }

    .theme-switch input:checked+.theme-slider-bg .theme-knob {
      transform: translateX(26px);
      background-color: #fff;
    }

    /* ─── Theme row (View & Tools panel) — mode switch + accent picker ─── */
    .theme-row {
      display: flex;
      align-items: center;
      gap: 0.6rem;
    }

    .accent-swatches {
      display: inline-flex;
      align-items: center;
      gap: 0.32rem;
      flex-wrap: wrap;
    }

    .accent-swatch {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 2px solid transparent;
      padding: 0;
      cursor: pointer;
      flex-shrink: 0;
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
      transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
    }

    .accent-swatch:hover {
      transform: scale(1.2);
    }

    .accent-swatch.active {
      border-color: var(--text);
      box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.6);
    }

    /* Native color input dressed as a rainbow "any color" swatch */
    .accent-custom-wrap {
      position: relative;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      overflow: hidden;
      cursor: pointer;
      flex-shrink: 0;
      border: 2px solid transparent;
      background: conic-gradient(#ff5ec4, #ffb454, #3cf5b8, #2dd8ff, #a78bfa, #ff5ec4);
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
      transition: transform 0.12s, border-color 0.12s;
    }

    .accent-custom-wrap:hover {
      transform: scale(1.2);
    }

    .accent-custom-wrap.active {
      border-color: var(--text);
      box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.6);
    }

    .accent-custom-wrap input[type=color] {
      position: absolute;
      inset: -6px;
      width: calc(100% + 12px);
      height: calc(100% + 12px);
      opacity: 0;
      cursor: pointer;
      padding: 0;
      border: none;
    }

    /* ─── Section icon chips next to group header labels ─── */
    .section-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      border-radius: 8px;
      font-size: 0.85rem;
      margin-right: 0.6rem;
      flex-shrink: 0;
      background: rgba(var(--accent-rgb), 0.1);
      border: 1px solid rgba(var(--accent-rgb), 0.2);
    }

    .section-num {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      flex: 1;
    }

    /* Dim readout stat items */
    .dim-readout > span {
      position: relative;
    }

    .dim-readout > span:not(:last-child)::after {
      content: '';
      position: absolute;
      right: -0.75rem;
      top: 15%;
      height: 70%;
      width: 1px;
      background: var(--line);
    }

  /* ─── Saved Racks UI styles ─────────────────────────────── */
    /* Save slot styling */
    .save-slot {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 9px;
      padding: 0.55rem 0.7rem;
      transition: border-color 0.12s, background 0.12s;
    }

    .save-slot:hover {
      border-color: rgba(var(--accent-rgb), 0.4);
      background: #0e1c26;
    }

    .save-slot .slot-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 0.1rem;
    }

    .save-slot .slot-name {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .save-slot .slot-meta {
      font-size: 0.72rem;
      color: var(--hint);
    }

    .save-slot .slot-actions {
      display: flex;
      gap: 0.3rem;
      flex-shrink: 0;
    }

    .slot-btn {
      background: var(--panel2);
      border: 1px solid var(--line);
      color: var(--mute);
      border-radius: 6px;
      padding: 0.35rem 0.55rem;
      cursor: pointer;
      font-size: 0.78rem;
      transition: all 0.12s;
      white-space: nowrap;
      min-height: 32px;
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
    }

    .slot-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .slot-btn.danger:hover {
      border-color: #e05050;
      color: #ff7878;
    }

    .slot-btn:disabled {
      opacity: 0.5;
      cursor: wait;
    }

    .saves-status-info {
      background: rgba(60, 245, 184, 0.1);
      border: 1px solid rgba(60, 245, 184, 0.3);
      color: var(--teal);
    }

    .saves-status-error {
      background: rgba(224, 80, 80, 0.1);
      border: 1px solid rgba(224, 80, 80, 0.3);
      color: #ff8888;
    }
/* ─── Phase Carousel ───────────────────────────────────── */
.phase-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0.6rem 0 0.4rem 0;
  padding: 0.4rem 0.2rem;
}

.phase-arrow {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  width: 36px;
  height: 36px;
  border-radius: 4px;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
  flex-shrink: 0;
  line-height: 1;
}

.phase-arrow:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.25);
  transform: scale(1.05);
}

.phase-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.phase-title {
  flex: 1;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.25);
}

.phase-dots {
  display: flex;
  gap: 0;
  margin-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
}

/* The labeled tabs are the sole phase navigation — underline style so they
   read differently from the boxed engine toggle above. A tab whose phase
   doesn't apply to the current shape is removed entirely by JS. */
.phase-dot {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.55rem 0.2rem 0.45rem;
  border-radius: 0;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--hint);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background 0.18s, text-shadow 0.18s;
}

.phase-dot:hover {
  color: var(--text);
  border-bottom-color: var(--hint);
}

.phase-dot.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: linear-gradient(180deg, transparent 30%, rgba(var(--accent-rgb), 0.09) 100%);
  text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.45);
}

/* Locked tab: the phase exists but doesn't apply yet (e.g. freestyle canvas
   with nothing painted). Dimmed rather than removed so users can see what
   will unlock; the tooltip carries the reason. */
.phase-dot.is-locked {
  opacity: 0.35;
  cursor: not-allowed;
}

.phase-dot.is-locked:hover {
  color: var(--hint);
  border-bottom-color: transparent;
}

.phase-viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.phase-track {
  position: relative;
  width: 100%;
  min-height: 200px;
}

/* Each phase is absolutely stacked; the active one is the one rendered.
   Inactive phases are hidden but kept in the DOM so their inputs stay live. */
.phase {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateX(40px);
  transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.4, 0.0, 0.2, 1);
  pointer-events: none;
}

.phase.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  position: relative;   /* takes height in the layout */
  pointer-events: auto;
}

/* When sliding OUT to the left (going to next phase) */
.phase.is-leaving-left {
  opacity: 0;
  transform: translateX(-40px);
}

/* When sliding OUT to the right (going to previous phase) */
.phase.is-leaving-right {
  opacity: 0;
  transform: translateX(40px);
}

/* Incoming from the right (right arrow clicked) — already the default offset */
/* Incoming from the left (left arrow clicked) — flip the offset */
.phase.is-incoming-left {
  transform: translateX(-40px);
}

/* ─── Phase Header (sticky nav + dots) ─────────────────── */
.phase-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  /* Soft gradient fade at the bottom so scrolling content doesn't visibly
     touch the nav strip */
  padding-bottom: 0.2rem;
  margin-bottom: 0.4rem;
  box-shadow: 0 6px 8px -8px rgba(0, 0, 0, 0.6);
}

/* The tabs alone navigate the phases now. The title/arrow strip stays in
   the DOM (the carousel script and keyboard ←/→ need its elements) but is
   redundant chrome on screen, so it's hidden. */
.phase-header .phase-nav {
  display: none;
}

.phase-header .phase-dots {
  margin: 0.45rem 0 0;
}

/* Scrollable phase viewport: gives the phase content a vertical scroll
   when it would otherwise be clipped. The exact height is computed so the
   bottom of the viewport sits just above the page footer. */
.phase-viewport {
  /* Subtract: header (~260px to top of carousel) + nav strip + footer */
  max-height: calc(100vh - 320px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.3rem;   /* breathing room next to the scrollbar */
}

.phase-viewport::-webkit-scrollbar {
  width: 8px;
}

.phase-viewport::-webkit-scrollbar-track {
  background: transparent;
}

.phase-viewport::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 4px;
  transition: background 0.18s;
}

.phase-viewport::-webkit-scrollbar-thumb:hover {
  background: var(--hint);
}

/* ─── Feature Card Groupings ───────────────────────────── */
.feature-card {
  background: linear-gradient(180deg,
    rgba(var(--accent-rgb), 0.03) 0%,
    rgba(6, 12, 18, 0.5) 100%);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.9rem 0.95rem 0.8rem 0.95rem;
  margin-bottom: 0.9rem;
  transition: border-color 0.18s, box-shadow 0.18s;
  position: relative;
  overflow: hidden;
}

.feature-card:hover {
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.07);
}

/* Subtle accent stripe along the top of each card */
.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--accent-rgb), 0.4) 30%,
    rgba(60, 245, 184, 0.4) 70%,
    transparent 100%);
  opacity: 0.7;
}

.feature-card:hover {
  border-color: rgba(var(--accent-rgb), 0.35);
}

/* Each card cycles through the 3 accent tints — first child = blue,
   second = teal, third = pink. The :nth-child() lets us color them
   in order without extra classes. */
.feature-card:nth-of-type(1)::before {
  background: linear-gradient(90deg, transparent 0%, rgba(var(--accent-rgb), 0.55) 50%, transparent 100%);
}
.feature-card:nth-of-type(2)::before {
  background: linear-gradient(90deg, transparent 0%, rgba(60, 245, 184, 0.55) 50%, transparent 100%);
}
.feature-card:nth-of-type(3)::before {
  background: linear-gradient(90deg, transparent 0%, rgba(212, 56, 162, 0.55) 50%, transparent 100%);
}

.feature-card-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.7rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(29, 46, 72, 0.6);
}

.feature-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 0.95rem;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  flex-shrink: 0;
}

.feature-card:nth-of-type(2) .feature-card-icon {
  background: rgba(60, 245, 184, 0.12);
  border-color: rgba(60, 245, 184, 0.28);
}

.feature-card:nth-of-type(3) .feature-card-icon {
  background: rgba(212, 56, 162, 0.12);
  border-color: rgba(212, 56, 162, 0.28);
}

.feature-card-title {
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.92;
}

/* Card icons are thin-stroke SVGs tinted to match each card's accent */
.feature-card-icon svg {
  width: 15px;
  height: 15px;
}

.feature-card:nth-of-type(1) .feature-card-icon {
  color: var(--accent);
}

.feature-card:nth-of-type(2) .feature-card-icon {
  color: var(--teal);
}

.feature-card:nth-of-type(3) .feature-card-icon {
  color: #ff5ec4;
}

/* Tighten toggle rows inside a card, since the card itself provides spacing */
.feature-card .toggle-row {
  padding: 0.45rem 0;
}

.feature-card .toggle-row + .toggle-row {
  border-top: 1px solid rgba(29, 46, 72, 0.5);
}

/* When a sub-options panel (e.g. #titleOpts, #lidOpts) is expanded inside
   a card, give it a touch more breathing room. */
.feature-card > [id$="Opts"] {
  margin-bottom: 0.5rem;
}

/* A card whose every control is N/A for the current shape hides entirely —
   no orphaned headers (set by refreshFeatureCards in 3d-maker.js). */
.feature-card.is-empty {
  display: none;
}

/* Conditionally-blocked rows: dimmed, with the reason written inline so it
   also reads on touch devices where tooltips don't exist. */
.toggle-row.row-disabled {
  opacity: 0.45;
}

.toggle-row.row-disabled .toggle-sw {
  pointer-events: none;
}

/* Slider fields (e.g. Top Edge Chamfer) can be conditionally blocked too. */
.field.row-disabled {
  opacity: 0.45;
}

.field.row-disabled .field-row {
  pointer-events: none;
}

.row-why {
  display: block;
  font-size: 0.72rem;
  color: #e09040;
  margin-top: 0.15rem;
}

/* Shown next to the shape picker when the selected shape removes the
   Features & Add-ons page from the carousel. */
.shape-scope-hint {
  display: none;
  margin-top: 0.5rem;
  color: #e09040;
}

/* ─── Wall Cutout Selector ─────────────────────────────── */
/* Visual top-down layout: Back on top, Left|Rack|Right in center, Front at bottom */
.cutout-wall-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0;
}

.cutout-wall-center {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Center "ALL" hex — cuts through every wall at once (holds #winPunch).
   Dashed + muted when off, solid accent glow when on, matching the wall btns. */
.cutout-rack-icon {
  width: 54px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px dashed rgba(var(--accent-rgb), 0.3);
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--mute);
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
}

/* Visually hide the checkboxes but keep them in the tab order + focusable,
   so the whole wall selector (4 walls + ALL hex) stays keyboard-operable. */
.cutout-wall-btn input[type="checkbox"],
.cutout-rack-icon input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip-path: inset(50%);
  overflow: hidden;
}

.cutout-wall-btn:has(input:focus-visible),
.cutout-rack-icon:has(input:focus-visible) {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.cutout-rack-icon:hover {
  border-color: rgba(var(--accent-rgb), 0.6);
}

.cutout-rack-icon:has(input:checked) {
  background: rgba(var(--accent-rgb), 0.2);
  border-style: solid;
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.25);
}

.cutout-wall-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.3rem 0.8rem;
  min-width: 68px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 0.78rem;
  color: var(--mute);
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
}

.cutout-wall-btn:has(input:checked) {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.15);
}

.cutout-wall-btn:hover {
  border-color: rgba(var(--accent-rgb), 0.5);
}

/* Edge shape disclosure */
.cutout-edge-details {
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  background: rgba(14, 21, 32, 0.4);
}

.cutout-edge-summary {
  padding: 0.5rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--hint);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.15s;
}

.cutout-edge-summary:hover {
  color: var(--text);
}

.cutout-edge-summary::before {
  content: '▸';
  font-size: 0.7rem;
  transition: transform 0.2s;
}

.cutout-edge-details[open] > .cutout-edge-summary::before {
  transform: rotate(90deg);
}

/* Remove default marker */
.cutout-edge-summary::-webkit-details-marker {
  display: none;
}

.cutout-edge-grid {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 0.6rem 0.8rem 0.8rem 0.8rem;
  border-top: 1px solid var(--line);
}

.cutout-edge-col {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.cutout-edge-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  opacity: 0.85;
  margin-bottom: 0.1rem;
}

/* Light mode: the disclosure ships a hardcoded dark fill + --hint label, which
   reads as unreadable grey-on-grey. Swap to a light surface + darker label. */
body.light-mode .cutout-edge-details {
  background: var(--panel2);
}

body.light-mode .cutout-edge-summary {
  color: var(--mute);
}

/* Generated from former inline style attributes to keep HTML validation clean. */
.vr-inline-001 { text-decoration:none; gap:0.35rem; }
.vr-inline-002 { font-size:1rem; }
.vr-inline-003 { width: 100%; display: flex; justify-content: space-between; }
.vr-inline-004 { display: flex; align-items: center; gap: 1.2rem; }
.vr-inline-005 { display: flex; align-items: center; gap: 0.8rem; }
.vr-inline-006 { display: flex; align-items: center; gap: 0.7rem; }
.vr-inline-007 { position:relative; }
.vr-inline-008 { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--hint); margin-bottom:0.2rem; }
.vr-inline-009 { width: 100%; min-height: 70px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 0.6rem; color: var(--text); font-size: 0.9rem; resize: vertical; box-sizing: border-box; }
.vr-inline-010 { width: 100%; }
.vr-inline-011 { font-size: 0.8rem; color: var(--mute); text-align: center; display: none; }
/* vr-inline-012..018 removed with the Smart Generator training-options UI */
.vr-inline-019 { flex-shrink:0; }
.vr-inline-020 { text-align:center; padding: 0.3rem 0; }
.vr-inline-021 { color: var(--mute); font-size: 0.84rem; margin: 0 0 0.6rem 0; line-height:1.5; }
.vr-inline-022 { width:100%; }
.vr-inline-023 { display:none; }
.vr-inline-024 { display:flex; gap:0.5rem; margin-bottom:0.6rem; }
.vr-inline-025 { flex:1; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem 0.6rem; font-size: 0.85rem; min-height: 36px; }
.vr-inline-026 { white-space:nowrap; }
.vr-inline-027 { display:none; font-size: 0.82rem; padding: 0.4rem 0.6rem; border-radius: 7px; margin-bottom: 0.5rem; line-height: 1.4; }
.vr-inline-028 { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.3rem; }
.vr-inline-029 { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--hint); }
.vr-inline-030 { background:none; border:none; color: var(--hint); cursor:pointer; font-size: 0.76rem; padding: 0.15rem 0.3rem; border-radius: 5px; }
.vr-inline-031 { display:flex; flex-direction:column; gap:0.3rem; max-height: 200px; overflow-y: auto; padding-right: 4px; }
.vr-inline-032 { display:none; text-align:center; padding: 0.6rem 0; font-size: 0.82rem; }
.vr-inline-033 { margin-bottom: 0; }
.vr-inline-034 { display: none; }
.vr-inline-035 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.vr-inline-036 { font-size: 0.82rem; font-weight: 700; color: var(--text); font-family: var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.vr-inline-037 { padding: 0.2rem 0.6rem; font-size: 0.76rem; }
/* Compact single-row brush bar (Freestyle) — keeps the magenta identity but
   stays ~44px tall so the Grid Canvas owns the panel */
.ff-brush-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; background: rgba(212, 56, 162, 0.08); border: 1px solid rgba(212, 56, 162, 0.35); border-radius: 8px; padding: 0.35rem 0.65rem; margin-bottom: 0.6rem; }
.ff-brush-title { font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #d438a2; }
.ff-brush-field { display: flex; align-items: center; gap: 0.45rem; }
.ff-brush-lbl { font-size: 0.78rem; font-weight: 600; color: var(--text); white-space: nowrap; cursor: help; }
.ff-brush-ico { color: #d438a2; font-weight: 700; font-size: 0.95rem; }
.ff-brush-unit { font-size: 0.72rem; color: var(--hint); }
.ff-brush-div { width: 1px; align-self: stretch; margin: 0.2rem 0; background: rgba(212, 56, 162, 0.25); }
.vr-inline-042 { font-size: 0.78rem; color: var(--hint); }
.vr-inline-044 { color: #d438a2; }
.vr-inline-047 { margin: 0.55rem 0 0; }
.vr-inline-048 { color:var(--teal); }
.vr-inline-049 { color:#e05050; }
.vr-inline-050 { display: grid; gap: 4px; }
.vr-inline-051 { display:flex; gap:0.5rem; margin-top: 0.5rem; }
.vr-inline-052 { flex:1; border: 1px solid var(--accent); }
.vr-inline-053 { flex:0.5; }
/* Flattened: the rack-map-card inside is already a card — the old second
   box just cost ~2.4rem of padding on every side */
.vr-inline-054 { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 0.25rem; }
.vr-inline-055 { display: flex; align-items: center; gap: 0.5rem; margin-bottom: -0.5rem; }
.vr-inline-056 { font-size: 1.2rem; color: var(--accent); }
.vr-inline-057 { font-weight: 700; color: var(--accent); font-size: 0.95rem; }
.vr-inline-058 { display: flex; flex-direction: column; gap: 0.1rem; align-items: flex-start; }
.vr-inline-059 { font-size: 0.9rem; font-weight: 600; }
.vr-inline-060 { font-size: 0.78rem; color: var(--hint); font-weight: normal; text-transform: none; }
.vr-inline-061 { height: 1px; background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.3) 0%, transparent 100%); width: 100%; }
.vr-inline-062 { margin-bottom:0.2rem; font-size: 0.9rem; font-weight: 600; }
.vr-inline-063 { margin-top:0; margin-bottom:0.8rem; }
.vr-inline-064 { margin-top: 1rem; border-color: rgba(60, 245, 184, 0.3); }
.vr-inline-065 { font-size: 0.85rem; padding: 0.6rem 1rem; color: var(--teal); justify-content: flex-start; gap: 0.55rem; }
.vr-inline-065::after { margin-left: auto; }
.labware-icon { flex-shrink: 0; }
.vr-inline-066 { padding: 0.8rem 1rem; }
.vr-inline-067 { margin-bottom: 0.5rem; }
.vr-inline-068 { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.5rem; }
.vr-inline-069 { display:none; }
.vr-inline-070 { display:none; flex-direction:column; gap:0.6rem; margin-top: 0.8rem; padding: 0.8rem; background: rgba(var(--accent-rgb), 0.05); border: 1px solid rgba(var(--accent-rgb), 0.2); border-radius: 8px; }
.vr-inline-071 { color:var(--accent); margin-bottom:0.2rem; }
.vr-inline-072 { border-top: 1px solid var(--line); margin: 0.8rem 0; }
.vr-inline-073 { display:none;color:#e09040; }
.vr-inline-074 { margin:0; }
.vr-inline-075 { display:none; flex-direction:column; gap:0.8rem; margin-top:0.4rem; padding-left:1rem; border-left:2px solid var(--line); }
.vr-inline-076 { margin-bottom:0.4rem; }
.vr-inline-077 { margin-bottom:0; }
.vr-inline-078 { display:flex; flex-direction:column; gap:0.6rem; margin-top:0.4rem; padding-left:1rem; border-left:2px solid var(--line); }
.vr-inline-080 { margin-bottom:0.3rem; }
.vr-inline-081 { display:none; flex-direction:column; gap:0.4rem; margin-top:0.4rem; padding-left:1rem; border-left:2px solid var(--line); }
.vr-inline-082 { margin-bottom:0.2rem; font-size: 0.85rem; color: var(--text); }
.vr-inline-083 { flex: 1 1 45%; }
.vr-inline-084 { display:none; flex-direction:column; gap:0.6rem; margin-top:0.4rem; padding-left:1rem; border-left:2px solid var(--line); }

/* ── Custom engraving-label grid (under ABC/123 Grid Labels) ───────────── */
.vr-label-grid-block { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed var(--line); }
/* Editable per-axis grid is tucked behind a disclosure — the 90% case is the
   auto A,B,C / 1,2,3 labels, so only reveal the spreadsheet on request. */
.vr-label-grid-details { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: rgba(14, 21, 32, 0.4); }
.vr-label-grid-summary { list-style: none; cursor: pointer; -webkit-user-select: none; user-select: none; display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.7rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--hint); transition: color 0.15s; }
.vr-label-grid-summary:hover { color: var(--text); }
.vr-label-grid-summary::-webkit-details-marker { display: none; }
.vr-label-grid-summary::before { content: '▸'; font-size: 0.7rem; transition: transform 0.2s; }
.vr-label-grid-details[open] > .vr-label-grid-summary::before { transform: rotate(90deg); }
.vr-label-grid-details > .vr-label-grid-head { padding: 0.1rem 0.7rem 0.5rem; }
.vr-label-grid-details > .vr-label-grid-scroll { margin: 0 0.7rem 0.7rem; }
body.light-mode .vr-label-grid-details { background: var(--panel2); }
body.light-mode .vr-label-grid-summary { color: var(--mute); }
.vr-label-grid-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.vr-label-reset { font-family: var(--font-display, inherit); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); background: rgba(var(--accent-rgb), 0.08); border: 1px solid rgba(var(--accent-rgb), 0.35); border-radius: 6px; padding: 0.25rem 0.55rem; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.vr-label-reset:hover { background: rgba(var(--accent-rgb), 0.18); border-color: rgba(var(--accent-rgb), 0.6); }
.vr-label-reset:active { transform: translateY(1px); }
.vr-label-grid-hint { font-size: 0.72rem; color: var(--hint); line-height: 1.35; }
.vr-label-grid-scroll { overflow: auto; max-height: 15rem; padding: 0.5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2, rgba(0,0,0,0.12)); }
.vr-label-grid { display: grid; gap: 4px; align-items: center; justify-items: stretch; width: max-content; min-width: 100%; }
.vr-label-grid-empty,
.vr-lg-empty { grid-column: 1 / -1; font-size: 0.78rem; color: var(--hint); text-align: center; padding: 0.75rem 0.5rem; }
.vr-lg-corner { font-family: var(--font-display, inherit); font-size: 0.85rem; font-weight: 700; color: var(--hint); text-align: center; opacity: 0.55; user-select: none; }
.vr-lg-cell { min-width: 2.1rem; width: 100%; box-sizing: border-box; text-align: center; font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text); background: var(--panel, rgba(255,255,255,0.03)); border: 1px solid var(--line); border-radius: 5px; padding: 0.28rem 0.15rem; transition: border-color 0.12s, box-shadow 0.12s; }
.vr-lg-cell::placeholder { color: var(--hint); opacity: 0.65; font-weight: 500; }
.vr-lg-cell:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.25); }
.vr-lg-cell:disabled { opacity: 0.4; cursor: not-allowed; background: transparent; }
/* header cells (column across the top, row down the left) read as a frame */
.vr-lg-col, .vr-lg-row { background: rgba(var(--accent-rgb), 0.07); border-color: rgba(var(--accent-rgb), 0.3); color: var(--accent); }
.vr-lg-dot { width: 8px; height: 8px; border-radius: 50%; margin: 0 auto; background: rgba(var(--accent-rgb), 0.5); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.12); }
.vr-lg-dot-empty { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.vr-inline-085 { font-size: 0.85rem; color: var(--text); margin-bottom: 0.3rem; }
.vr-inline-086 { width: 100%; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem 0.7rem; font-size: 0.9rem; box-sizing: border-box; }
.vr-inline-087 { margin-top:0.2rem; }
.vr-inline-088 { font-size:0.86rem; color:var(--text); }
.vr-inline-089 { font-size: 0.76rem; color: var(--hint); }
.vr-inline-090 { display:none; gap: 0.3rem; margin-top: 0.3rem; flex-direction: column; }
.vr-inline-091 { padding-left: 1rem; }
.vr-inline-092 { font-size:0.82rem; color:var(--hint); }
.vr-inline-093 { font-size:0.76rem; color:var(--hint); }
.vr-inline-094 { margin-top: 0.5rem; padding-top: 0.8rem; border-top: 1px solid var(--line); }
.vr-inline-095 { margin-top: 0.2rem; }
.vr-inline-096 { position: absolute; bottom: 1.2rem; left: 1.2rem; z-index: 10; background: linear-gradient(135deg, #3cf5b8 0%, #1fc98e 100%); color: #022b1e; border: none; box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 14px rgba(60, 245, 184, 0.35); }
.vr-inline-097 { position:absolute; top:1rem; right:1.2rem; z-index:11; }
.vr-inline-098 { background:rgba(9,13,22,0.85); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:0.45rem 0.7rem; font-size:0.82rem; cursor:pointer; display:flex; align-items:center; gap:0.4rem; transition: border-color 0.15s, color 0.15s; }
#viewToolsBtn:hover { border-color:var(--accent); }
.vr-inline-099 { font-size:0.62rem; opacity:0.7; transition: transform 0.15s; }
.vr-inline-100 { display:none; position:absolute; top:calc(100% + 6px); right:0; background:rgba(9,13,22,0.96); border:1px solid var(--line); border-radius:10px; padding:0.7rem; min-width:262px; max-width:calc(100vw - 2rem); box-shadow:0 8px 24px rgba(0,0,0,0.55); flex-direction:column; gap:0.7rem; }
.vr-inline-101 { font-size:0.66rem; color:var(--hint); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:0.35rem; }
.vr-inline-102 { display:inline-flex; gap:0.4rem; align-items:center; flex-wrap:wrap; }
.vr-inline-103 { width: 1px; height: 20px; background: var(--line); margin: 0 0.2rem; }
.vr-inline-104 { cursor:pointer; width:24px; height:24px; padding:0; border:none; border-radius:4px; background:transparent; }
.vr-inline-105 { display:inline-flex; gap:0.4rem; align-items:center; }
.vr-inline-106 { background: transparent; border: 1px solid transparent; border-radius:6px; cursor:pointer; padding:0.2rem 0.5rem; font-size:0.78rem; color:var(--mute); transition: all 0.2s; }
.vr-inline-107 { background: rgba(var(--accent-rgb), 0.2); border: 1px solid var(--accent); border-radius:6px; cursor:pointer; padding:0.2rem 0.5rem; font-size:0.78rem; color:var(--accent); font-weight:600; display:flex; align-items:center; gap:0.3rem; }
.vr-inline-108 { font-size:0.7rem; opacity:0.85; }
.vr-inline-109 { font-size:0.6rem; opacity:0.7; }
.vr-inline-110 { display:none; position:absolute; top:calc(100% + 4px); right:0; background:rgba(9,13,22,0.96); border:1px solid var(--line); border-radius:8px; padding:0.3rem; min-width:130px; box-shadow:0 4px 14px rgba(0,0,0,0.5); z-index: 12; }
.vr-inline-111 { display:block; width:100%; text-align:left; background:transparent; border:none; color:var(--text); padding:0.4rem 0.6rem; border-radius:5px; cursor:pointer; font-size:0.78rem; }
.vr-inline-112 { width:100%; background:rgba(9,13,22,0.6); border:1px solid var(--line); color:var(--text); border-radius:6px; padding:0.35rem 0.6rem; font-size:0.82rem; cursor:pointer; line-height:1; transition:all 0.15s; text-align:left; }
#cameraToggleBtn:hover { border-color:var(--accent); color:var(--accent); }
.vr-inline-113 { width:100%; padding: 0.4rem 0.7rem; font-size: 0.82rem; text-align:left; }
.vr-inline-114 { width:100%; background:rgba(224,80,80,0.85); color:#fff; border-color:#e05050; padding: 0.4rem 0.7rem; font-size: 0.82rem; display:none; text-align:left; }
.vr-inline-115 { position:absolute; bottom:164px; right:1.2rem; font-size:0.7rem; color:var(--mute); pointer-events:none; opacity:0.7; max-width:110px; text-align:right; line-height:1.3; }
.vr-inline-116 { position:absolute; display:none; background:var(--accent); color:#fff; padding:5px 10px; border-radius:5px; font-size:0.85rem; pointer-events:none; font-weight:bold; z-index:10; transform: translate(-50%, -50%); box-shadow: 0 3px 10px rgba(0,0,0,0.5); }
.vr-inline-117 { align-items: center; }
.vr-inline-118 { margin-right: 0.8rem; }
.vr-inline-119 { font-size:0.85rem; color:var(--text); font-weight:600; }
.vr-inline-120 { display:none; cursor:pointer; width:24px; height:24px; padding:0; border:none; border-radius:4px; background:transparent; margin-left:0.5rem; }
.vr-inline-121 { text-align: center; padding: 1.1rem 1.25rem 1.3rem; color: var(--hint); font-size: 0.72rem; line-height: 1.6; border-top: 1px solid var(--line); margin-top: 2rem; }
.vr-inline-122 { margin: 0; font-weight: 500; color: var(--mute); }
.vr-inline-123 { margin: 0; max-width: 640px; margin-left: auto; margin-right: auto; }
.vr-inline-124 { display: flex; align-items: center; margin: 1.5rem 0; gap: 0.8rem; }
.vr-inline-125 { flex: 1; height: 1px; background: var(--line); }
.vr-inline-126 { font-size: 0.75rem; color: var(--hint); text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em; }

/* ═══════════════════════════════════════════════════════════
   HUD AMBIENCE LAYER — entrance choreography, glow accents,
   and motion. Pure presentation; no layout or behavior changes.
   ═══════════════════════════════════════════════════════════ */

/* ─── Page-load entrance choreography ─── */
@keyframes hud-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hud-slide-left {
  from { opacity: 0; transform: translateX(-18px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes hud-viewport-in {
  from { opacity: 0; transform: scale(0.985); }
  to { opacity: 1; transform: scale(1); }
}

.maker-header {
  animation: hud-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.engine-pinned {
  animation: hud-slide-left 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.08s backwards;
}

.phase-header {
  animation: hud-slide-left 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.16s backwards;
}

.phase-viewport {
  animation: hud-slide-left 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.24s backwards;
}

.canvas-panel {
  animation: hud-viewport-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.15s backwards;
}

.canvas-footer {
  animation: hud-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.3s backwards;
}

/* ─── Sharper corners on remaining rounded chrome ─── */
.rg-entry,
.btn-add,
.header-dropdown,
.account-dropdown,
.auth-modal,
.feature-card .toggle-row,
.cutout-edge-details {
  border-radius: 5px;
}

.header-action-btn,
.account-btn,
.cutout-wall-btn,
.slot-btn,
.save-slot {
  border-radius: 4px;
}

/* ─── Display font on remaining structural labels ─── */
.feature-card-header,
.cutout-edge-summary,
.rg-ctrl-group label,
.auth-field label {
  font-family: var(--font-display);
}

.rg-ctrl-group label,
.cutout-edge-summary {
  letter-spacing: 0.1em;
}

/* Mono for everything that reads as data */
.slot-meta,
.ruler-inch,
#rulerLabel,
#plateSizeLabel,
.ff-cell-label,
#recordCounter {
  font-family: var(--font-mono);
}

/* ─── Header action buttons: subtle glow ─── */
.header-action-btn:hover {
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.2);
}

.header-action-btn.saves-btn:hover {
  box-shadow: 0 0 12px rgba(60, 245, 184, 0.2);
}

/* ─── Row-group cards: glow on the accent spine ─── */
.rg-entry {
  border-left-width: 2px;
  box-shadow: inset 2px 0 8px -4px rgba(var(--accent-rgb), 0.35);
}

/* ─── Freestyle workspace: dark bench with magenta energy ─── */
.ff-workspace {
  border-radius: 5px;
  box-shadow: inset 0 0 24px rgba(212, 56, 162, 0.05);
}

/* ─── Scrollbar glow ─── */
.controls-panel::-webkit-scrollbar-thumb,
.phase-viewport::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), 0.25);
}

.controls-panel::-webkit-scrollbar-thumb:hover,
.phase-viewport::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-rgb), 0.45);
}

/* ─── Focus visibility (keyboard nav) ─── */
button:focus-visible,
input:focus-visible,
.toggle-sw input:focus-visible + .trk {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

/* ─── Light-mode corrections for the ambience layer ─── */
body.light-mode .app-icon {
  animation: none;
  box-shadow: 0 2px 10px rgba(var(--accent-rgb), 0.15);
}


body.light-mode .rg-entry {
  box-shadow: none;
}

body.light-mode .toggle-sw .trk {
  background: #d5e2ea;
  border-color: #b7ccd8;
  box-shadow: inset 0 1px 3px rgba(22, 50, 63, 0.15);
}

body.light-mode .toggle-sw .trk::before {
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(22, 50, 63, 0.3);
}

body.light-mode .toggle-sw input:checked+.trk {
  background: rgba(5, 150, 105, 0.15);
  box-shadow: none;
}

body.light-mode .toggle-sw input:checked+.trk::before {
  background: var(--teal);
  box-shadow: none;
}

body.light-mode .engine-selector-wrap input:not(:checked)+.engine-selector .standard-opt .engine-title {
  text-shadow: none;
}

body.light-mode .shape-btn:has(input:checked),
body.light-mode .q-btn:has(input:checked) {
  text-shadow: none;
  box-shadow: none;
}

body.light-mode button.primary {
  color: #ffffff;
}

/* ─── Respect reduced-motion: kill all ambient animation ─── */
@media (prefers-reduced-motion: reduce) {
  .app-icon,
  .maker-header,
  .engine-pinned,
  .phase-header,
  .phase-viewport,
  .canvas-panel,
  .canvas-footer {
    animation: none !important;
  }

  .phase,
  .engine-opt,
  button.primary {
    transition-duration: 0.01s !important;
  }
}

/* Light-mode telemetry bar — undo the dark console gradient */
body.light-mode .canvas-footer {
  background: var(--panel);
  box-shadow: 0 2px 12px rgba(22, 50, 63, 0.08);
}

body.light-mode .dim-readout .dim-val {
  color: var(--accent);
}

/* Compact title on narrow screens (uppercase display font runs wider) */
@media (max-width: 600px) {
  .maker-header h1 {
    font-size: 1.35rem;
    letter-spacing: 0.04em;
  }
}

/* On phones, let the header actions drop below the title instead of
   squeezing the title into a sliver */
@media (max-width: 600px) {
  .vr-inline-003 {
    flex-wrap: wrap;
    gap: 0.6rem;
  }
}

/* ─── Build/export status toast (#statusMsg) ───
   Written by 3d-maker.js: rebuild errors, export progress. Empty = hidden. */
.status-toast {
  position: absolute;
  bottom: 4.6rem; /* clears the Simulate button row */
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  max-width: min(80%, 480px);
  padding: 0.5rem 0.9rem;
  background: rgba(5, 11, 17, 0.92);
  border: 1px solid var(--amber);
  border-radius: 4px;
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 12px rgba(255, 180, 84, 0.15);
}

.status-toast:empty {
  display: none;
}

body.light-mode .status-toast {
  background: rgba(255, 255, 255, 0.95);
  color: #9a5b00;
  border-color: #d99a3d;
  box-shadow: 0 4px 14px rgba(22, 50, 63, 0.15);
}

/* ═══════════════════════════════════════════════════════════
   GUIDED TOUR (vial-rack-tutorial.js) — spotlight scrims, ring,
   tip card, track chooser, and first-visit offer.
   ═══════════════════════════════════════════════════════════ */

#vrTutOverlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  pointer-events: none;
}

.vr-tut-scrim {
  position: fixed;
  display: none;
  background: rgba(2, 8, 14, 0.68);
  pointer-events: auto;
}

.vr-tut-ring {
  position: fixed;
  display: none;
  pointer-events: none;
  border: 2px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14), 0 0 26px rgba(var(--accent-rgb), 0.5);
}

.vr-tut-ring-secondary {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(60, 245, 184, 0.12), 0 0 24px rgba(60, 245, 184, 0.38);
}

#vrTutOverlay.is-complete .vr-tut-ring {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(60, 245, 184, 0.16), 0 0 30px rgba(60, 245, 184, 0.52);
}

.vr-tut-tip {
  position: fixed;
  width: min(360px, calc(100vw - 24px));
  box-sizing: border-box;
  pointer-events: auto;
  padding: 1rem 1.05rem 0.85rem;
  background: linear-gradient(165deg, rgba(8, 16, 25, 0.985), rgba(4, 9, 14, 0.99));
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  border-radius: 6px;
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.72), 0 0 24px rgba(var(--accent-rgb), 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.vr-tut-tip.is-complete {
  border-color: rgba(60, 245, 184, 0.72);
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.72), 0 0 28px rgba(60, 245, 184, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.vr-tut-eyebrow {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.vr-tut-title {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0.35rem 0 0.42rem;
}

.vr-tut-body {
  margin: 0;
  color: var(--mute);
  font: 400 0.82rem/1.55 'Inter', system-ui, sans-serif;
}

.vr-tut-action {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.72rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  border-radius: 5px;
  background: rgba(var(--accent-rgb), 0.07);
  color: var(--text);
  font: 600 0.76rem/1.4 'Inter', system-ui, sans-serif;
}

.vr-tut-action::before {
  content: "";
  width: 0.62rem;
  height: 0.62rem;
  margin-top: 0.23rem;
  flex: 0 0 auto;
  border-radius: 2px;
  border: 1px solid rgba(var(--accent-rgb), 0.65);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.22);
}

.vr-tut-action.is-complete {
  border-color: rgba(60, 245, 184, 0.55);
  background: rgba(60, 245, 184, 0.1);
  color: #caffed;
}

.vr-tut-action.is-complete::before {
  background: var(--teal);
  border-color: var(--teal);
  box-shadow: 0 0 12px rgba(60, 245, 184, 0.55);
}

.vr-tut-footer {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.78rem;
  padding-top: 0.72rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.vr-tut-count {
  flex: 1;
  text-align: center;
  color: var(--hint);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
}

.vr-tut-btn {
  border: 1px solid var(--line);
  background: none;
  color: var(--mute);
  border-radius: 4px;
  padding: 0.32rem 0.7rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.vr-tut-btn:hover {
  color: var(--text);
  border-color: var(--hint);
}

.vr-tut-btn:disabled,
.vr-tut-btn:disabled:hover {
  cursor: not-allowed;
  color: var(--hint);
  border-color: rgba(82, 119, 145, 0.35);
  background: rgba(82, 119, 145, 0.06);
  box-shadow: none;
}

.vr-tut-btn.vr-tut-next {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.5);
  color: var(--accent);
}

.vr-tut-btn.vr-tut-next:hover {
  background: rgba(var(--accent-rgb), 0.22);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.25);
}

.vr-tut-tip.is-complete .vr-tut-btn.vr-tut-next {
  background: rgba(60, 245, 184, 0.14);
  border-color: rgba(60, 245, 184, 0.6);
  color: var(--teal);
}

/* ── Track chooser ── */
#vrTutChooser {
  position: fixed;
  inset: 0;
  z-index: 100001;
  background: rgba(2, 8, 14, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.vr-tut-chooser-card {
  position: relative;
  width: min(440px, 94vw);
  background: linear-gradient(165deg, rgba(8, 16, 25, 0.99), rgba(4, 9, 14, 0.995));
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 8px;
  padding: 1.3rem 1.3rem 1.1rem;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.75), 0 0 30px rgba(var(--accent-rgb), 0.12);
}

.vr-tut-chooser-close {
  position: absolute;
  top: 0.5rem;
  right: 0.65rem;
  background: none;
  border: none;
  color: var(--hint);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
}

.vr-tut-chooser-close:hover {
  color: var(--text);
}

.vr-tut-chooser-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
  text-align: center;
  text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.35);
}

.vr-tut-chooser-sub {
  margin: 0.5rem 0 0.9rem;
  text-align: center;
  color: var(--mute);
  font-size: 0.8rem;
  line-height: 1.5;
}

.vr-tut-tracks {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.vr-tut-track {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: left;
  background: rgba(var(--accent-rgb), 0.04);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.75rem 0.9rem;
  cursor: pointer;
  transition: all 0.15s;
}

.vr-tut-track:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.18);
  transform: translateY(-1px);
}

.vr-tut-track-label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.vr-tut-track-time {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--hint);
}

.vr-tut-track-sum {
  color: var(--mute);
  font-size: 0.78rem;
  line-height: 1.45;
}

/* ── First-visit offer ── */
#vrTutOffer {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 99999;
  width: min(320px, calc(100vw - 2rem));
  background: linear-gradient(165deg, rgba(8, 16, 25, 0.985), rgba(4, 9, 14, 0.99));
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  border-radius: 6px;
  padding: 0.9rem 1rem;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 20px rgba(var(--accent-rgb), 0.12);
  animation: hud-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

#vrTutOffer .vr-tut-offer-text {
  color: var(--mute);
  font-size: 0.8rem;
  line-height: 1.5;
}

#vrTutOffer .vr-tut-offer-text strong {
  display: block;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.15rem;
}

#vrTutOffer .vr-tut-offer-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.7rem;
  justify-content: flex-end;
}

/* ── Light-mode variants ── */
body.light-mode .vr-tut-scrim {
  background: rgba(22, 50, 63, 0.45);
}

body.light-mode .vr-tut-tip,
body.light-mode .vr-tut-chooser-card,
body.light-mode #vrTutOffer {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 18px 50px rgba(22, 50, 63, 0.3);
}

body.light-mode .vr-tut-footer {
  border-top-color: rgba(22, 50, 63, 0.1);
}

body.light-mode .vr-tut-action {
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--text);
}

body.light-mode .vr-tut-action.is-complete {
  background: rgba(5, 150, 105, 0.12);
  color: #075f44;
}

body.light-mode .vr-tut-chooser-title {
  text-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  #vrTutOffer {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   NO-SCROLL APP SHELL (desktop)
   The whole tool fits the viewport: the window itself never
   scrolls, and the ONLY scrollbar is inside the phase viewport
   (engine selector + phase nav stay pinned above it). Applies
   only when there's room; narrow or very short windows keep
   normal page scrolling.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 961px) and (min-height: 540px) {
  body {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
  }

  /* Compact title strip. This page zeroes the body padding that main.css
     uses to clear the fixed 64px site header, so the margin here must do
     the clearing itself (the pre-shell value was 84px — keep the trim,
     not the clearance). */
  .maker-header {
    margin-top: 64px;
    padding: 0.4rem 1rem 0.5rem;
    flex-shrink: 0;
  }

  .app-icon {
    width: 38px;
    height: 38px;
  }

  .app-icon svg {
    width: 22px;
    height: 22px;
  }

  .maker-header h1 {
    font-size: 1.8rem;
  }

  main.maker-grid {
    flex: 1 1 auto;
    min-height: 0;
    align-items: stretch;
    padding: 0.7rem 1rem 0;
    gap: 1rem;
  }

  /* Left menu: no scrollbar of its own — the phase viewport is the one
     and only scroller, so wheeling the menu never fights the window. */
  .controls-panel {
    max-height: none;
    min-height: 0;
    overflow: hidden;
    padding-right: 0;
  }

  .phase-viewport {
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
  }

  /* The nav strip no longer lives inside a scroller — sticky not needed */
  .phase-header {
    position: static;
    box-shadow: none;
  }

  .preview-column {
    height: 100%;
    min-height: 0;
  }

  .canvas-panel {
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
  }

  .canvas-footer {
    flex-shrink: 0;
  }

  /* Footer: one compact line inside the viewport */
  .site-footer {
    padding: 0.3rem 1rem !important;
    margin-top: 0.5rem !important;
    font-size: 0.62rem !important;
    line-height: 1.4 !important;
  }

  .site-footer p {
    display: inline !important;
    margin: 0 0.35rem 0 0 !important;
    max-width: none !important;
    font-weight: 400 !important;
  }
}

/* ── Freestyle toolbar (paint/erase brush + undo/redo) ─────────────────── */
.ff-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0 0 0.5rem;
}

.ff-toolbar .ff-brush-mode {
  display: flex;
  gap: 0.35rem;
}

.ff-history-btns {
  display: flex;
  gap: 0.35rem;
}

.ff-history-btns button {
  padding: 0.3rem 0.6rem;
  font-size: 0.72rem;
}

.ff-history-btns button:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ── My Racks thumbnails ───────────────────────────────────────────────── */
.save-slot {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.slot-thumb {
  width: 52px;
  height: 40px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line, rgba(var(--accent-rgb), 0.25));
  background: rgba(255, 255, 255, 0.04);
}

.slot-thumb-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  opacity: 0.55;
}

/* ── Community Gallery overlay ─────────────────────────────────────────── */
body.gal-lock { overflow: hidden; }

/* Sits ABOVE the fixed site header (z-index 1000) — a modal owns the whole
   viewport, and anything lower gets its head clipped by the nav bar. */
.gal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  background: rgba(3, 6, 9, 0.78);
  backdrop-filter: blur(7px);
  padding: 3vh 2vw;
}

.gal-overlay.open { display: flex; }

.gal-panel {
  margin: auto;
  width: min(1180px, 100%);
  height: min(90vh, 100%);
  display: flex;
  flex-direction: column;
  background: var(--panel, #081019);
  border: 1px solid var(--line, rgba(var(--accent-rgb), 0.25));
  border-radius: 10px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(var(--accent-rgb), 0.06);
  overflow: hidden;
  position: relative;
}

/* Accent hairline across the top — same signature as the feature cards */
.gal-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(var(--accent-rgb), 0.55) 30%, rgba(60, 245, 184, 0.45) 70%, transparent 100%);
}

body.light-mode .gal-panel { background: #f4f8fb; }

.gal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.2rem 0.8rem;
  border-bottom: 1px solid var(--line, rgba(var(--accent-rgb), 0.25));
  flex-wrap: wrap;
}

.gal-head h2 {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-family: var(--font-display, 'Chakra Petch', sans-serif);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.25);
}

/* Live design count next to the title — reads like a telemetry readout */
.gal-count {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent, #2dd8ff);
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 3px;
  padding: 0.08rem 0.45rem;
  text-shadow: none;
}

.gal-count:empty { display: none; }

.gal-sub {
  margin: 0.2rem 0 0;
  font-size: 0.74rem;
  color: var(--hint, #527791);
}

.gal-head-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.gal-publish-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  padding: 0.45rem 0.85rem;
}

.gal-close {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--mute, #8fa3bf);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}

.gal-close:hover {
  color: var(--text, #e8f1ff);
  border-color: var(--line, rgba(var(--accent-rgb), 0.25));
}

.gal-publish-form {
  display: flex;
  gap: 0.8rem;
  margin: 0.8rem 1.2rem 0.2rem;
  padding: 0.7rem;
  border: 1px dashed var(--accent, #2dd8ff);
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.05);
}

.gal-publish-thumb {
  width: 150px;
  height: 112px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line, rgba(var(--accent-rgb), 0.25));
  flex: 0 0 auto;
}

.gal-publish-fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.gal-publish-fields input,
.gal-publish-fields textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line, rgba(var(--accent-rgb), 0.25));
  border-radius: 7px;
  color: inherit;
  font: inherit;
  font-size: 0.82rem;
  padding: 0.45rem 0.6rem;
  resize: vertical;
}

.gal-publish-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.gal-publish-note {
  flex: 1;
  font-size: 0.7rem;
  color: var(--mute, #8fa3bf);
  min-width: 140px;
}

.gal-publish-status { font-size: 0.75rem; min-height: 1em; color: var(--accent, #2dd8ff); }

.gal-toolbar {
  display: flex;
  gap: 0.6rem;
  padding: 0.8rem 1.2rem 0.5rem;
}

.gal-toolbar input[type="search"] {
  flex: 1;
  background: var(--panel2, #050b11);
  border: 1px solid var(--line, rgba(var(--accent-rgb), 0.25));
  border-radius: 5px;
  color: inherit;
  font: inherit;
  font-size: 0.82rem;
  padding: 0.45rem 0.7rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.gal-toolbar input[type="search"]:focus {
  outline: none;
  border-color: var(--accent, #2dd8ff);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.15);
}

.gal-toolbar select {
  background: var(--panel2, #050b11);
  border: 1px solid var(--line, rgba(var(--accent-rgb), 0.25));
  border-radius: 5px;
  color: inherit;
  font-family: var(--font-display, 'Chakra Petch', sans-serif);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
}

/* Filter deck — square HUD chips, not web-app pills */
.gal-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0.15rem 1.2rem;
}

.gal-feature-chips {
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line, rgba(var(--accent-rgb), 0.25));
}

.gal-chip-label {
  font-family: var(--font-display, 'Chakra Petch', sans-serif);
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--hint, #527791);
  margin-right: 0.3rem;
}

.gal-chip-label::after {
  content: ' //';
  color: var(--line, rgba(var(--accent-rgb), 0.25));
  letter-spacing: 0;
}

.gal-chip-label-gap { margin-left: 1rem; }

.gal-chip {
  border: 1px solid var(--line, rgba(var(--accent-rgb), 0.25));
  background: transparent;
  color: var(--mute, #8fa3bf);
  border-radius: 3px;
  font-family: var(--font-display, 'Chakra Petch', sans-serif);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.26rem 0.55rem;
  cursor: pointer;
  transition: all 0.12s;
}

.gal-chip:hover { color: var(--text, #e8f1ff); border-color: var(--accent, #2dd8ff); }

.gal-chip.active {
  background: rgba(var(--accent-rgb), 0.14);
  border-color: var(--accent, #2dd8ff);
  color: var(--accent, #2dd8ff);
  text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.4);
}

.gal-grid-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 0.9rem 1.2rem 1.2rem;
}

.gal-grid-wrap::-webkit-scrollbar { width: 8px; }
.gal-grid-wrap::-webkit-scrollbar-track { background: transparent; }
.gal-grid-wrap::-webkit-scrollbar-thumb { background: var(--line, #143349); border-radius: 4px; }
.gal-grid-wrap::-webkit-scrollbar-thumb:hover { background: var(--hint, #527791); }

.gal-status {
  padding: 1.4rem 0.2rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--mute, #8fa3bf);
}

.gal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.8rem;
}

.gal-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line, rgba(var(--accent-rgb), 0.22));
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.03) 0%, rgba(6, 12, 18, 0.5) 100%);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.gal-card:hover {
  border-color: rgba(var(--accent-rgb), 0.55);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35), 0 0 14px rgba(var(--accent-rgb), 0.1);
}

/* Your own published racks get the teal ownership tint */
.gal-card-mine { box-shadow: inset 0 0 0 1px rgba(60, 245, 184, 0.35); }

.gal-thumb-wrap {
  overflow: hidden;
  border-bottom: 1px solid var(--line, rgba(var(--accent-rgb), 0.18));
}

.gal-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: radial-gradient(ellipse at 50% 40%, #0a1c2b 0%, #04070c 75%);
  transition: transform 0.25s ease;
}

.gal-card:hover .gal-thumb { transform: scale(1.045); }

.gal-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hint, #527791);
  opacity: 0.6;
}

.gal-card-body {
  padding: 0.6rem 0.7rem 0.3rem;
  flex: 1;
}

.gal-card-title {
  margin: 0;
  font-size: 0.88rem;
  font-family: var(--font-display, 'Chakra Petch', sans-serif);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gal-card-meta {
  font-size: 0.68rem;
  color: var(--hint, #527791);
  margin: 0.15rem 0 0.45rem;
}

.gal-badges { display: flex; flex-wrap: wrap; gap: 0.25rem; }

.gal-badge {
  font-family: var(--font-mono, monospace);
  font-size: 0.62rem;
  padding: 0.08rem 0.4rem;
  border-radius: 3px;
  background: rgba(var(--accent-rgb), 0.07);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  color: var(--accent, #2dd8ff);
  text-transform: capitalize;
}

.gal-feats { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.4rem; }

.gal-feat {
  font-size: 0.6rem;
  padding: 0.08rem 0.38rem;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--mute, #b8c6da);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gal-card-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.7rem 0.6rem;
  border-top: 1px solid rgba(29, 46, 72, 0.5);
}

.gal-like,
.gal-copylink,
.gal-unpub {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  border: 1px solid var(--line, rgba(var(--accent-rgb), 0.25));
  background: transparent;
  color: var(--mute, #8fa3bf);
  border-radius: 4px;
  font-size: 0.7rem;
  padding: 0.28rem 0.5rem;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}

.gal-like:hover,
.gal-copylink:hover { color: var(--text, #e8f1ff); border-color: var(--accent, #2dd8ff); }

.gal-like.liked {
  color: #ff6b9d;
  border-color: rgba(255, 107, 157, 0.5);
}

.gal-like.liked svg { fill: currentColor; }

.gal-like-n { font-family: var(--font-mono, monospace); }

.gal-dl {
  display: inline-flex;
  align-items: center;
  gap: 0.26rem;
  font-size: 0.68rem;
  font-family: var(--font-mono, monospace);
  color: var(--hint, #527791);
}

.gal-unpub:hover { color: #ff7a7a; border-color: #ff7a7a; }

.gal-open {
  margin-left: auto;
  font-size: 0.72rem;
  padding: 0.32rem 0.8rem;
}

/* Light mode: the translucent-white card surfaces vanish on a light page */
body.light-mode .gal-card {
  background: #ffffff;
}

body.light-mode .gal-card-actions { border-top-color: rgba(var(--accent-rgb), 0.12); }

body.light-mode .gal-thumb { background: #e4edf2; }

body.light-mode .gal-feat {
  border-color: rgba(22, 50, 63, 0.15);
  background: rgba(22, 50, 63, 0.05);
}

body.light-mode .gal-toolbar input[type="search"],
body.light-mode .gal-toolbar select,
body.light-mode .gal-publish-fields input,
body.light-mode .gal-publish-fields textarea { background: #ffffff; }

@media (max-width: 640px) {
  .gal-overlay { padding: 0; }
  .gal-panel { height: 100%; border-radius: 0; }
  .gal-publish-form { flex-direction: column; }
  .gal-publish-thumb { width: 100%; height: auto; }
  .gal-head { gap: 0.6rem; }
  .gal-publish-btn { font-size: 0.66rem; padding: 0.4rem 0.6rem; }
}