/* iCaviot — design system tokens */
  :root {
    /* Surfaces — workshop dark, layered for depth */
    --s0: #08080A;
    --s1: #0E0E11;
    --s2: #15151A;
    --s3: #1C1C22;
    --s4: #24242B;
    --s5: #2D2D35;
    /* Borders */
    --b1: rgba(255,255,255,0.06);
    --b2: rgba(255,255,255,0.10);
    --b3: rgba(255,255,255,0.16);
    /* Text */
    --t1: #F4F2EE;
    --t2: #A8A6A0;
    --t3: #6B6A65;
    --t4: #46453F;
    /* Brand + signal */
    --accent: #FF6B00;
    --accent-hover: #FF8533;
    --accent-soft: rgba(255,107,0,0.14);
    --accent-glow: rgba(255,107,0,0.35);
    --success: #2BD17E;
    --warning: #FFB020;
    --danger: #FF5757;
    /* Legacy aliases — kept so existing JS `var(--accent-2)`, `var(--danger)` still resolve */
    --accent-2: #2BD17E;
    --bg: var(--s0);
    --panel: var(--s1);
    --panel-2: var(--s3);
    --line: var(--b1);
    --text: var(--t1);
    --muted: var(--t2);
    /* Type */
    /* System font stacks keep the interface usable entirely offline. */
    --sans: "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --mono: "Cascadia Mono", "SFMono-Regular", Consolas, ui-monospace, monospace;
    --display: Impact, Haettenschweiler, "Arial Narrow Bold", var(--sans);
    /* Layout */
    --topbar-h: 56px;
    --status-h: 36px;
    --sidebar-w: 340px;
  }


  /* ─── iCaviot — production design system (overrides) ─────────────── */

  /* Reset / base */
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; height: 100vh; overflow: hidden; }
  body {
    background: var(--s0);
    color: var(--t1);
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv11', 'ss01';
  }
  ::selection { background: var(--accent); color: #000; }
  button, input, select, textarea { font-family: inherit; color: inherit; }
  kbd {
    font-family: var(--mono);
    font-size: 10px;
    padding: 1px 4px;
    border-radius: 3px;
    background: rgba(0,0,0,0.18);
    margin-left: 4px;
    opacity: 0.7;
  }

  /* ─── Shell ─── */
  .shell {
    display: grid;
    grid-template-rows: var(--topbar-h) 1fr var(--status-h);
    height: 100vh;
  }
  .app {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    overflow: hidden;
    min-height: 0;
  }

  /* ─── Top bar ─── */
  .topbar {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr auto;
    align-items: center;
    background: var(--s2);
    border-bottom: 1px solid var(--b1);
    padding: 0 16px 0 20px;
    gap: 16px;
    -webkit-app-region: drag;
  }
  .topbar > * { -webkit-app-region: no-drag; }
  .brand {
    font-family: var(--display);
    font-size: 22px;
    letter-spacing: 0.02em;
    line-height: 1;
    color: var(--t1);
    text-decoration: none;
    display: flex;
    align-items: baseline;
    gap: 10px;
  }
  .brand span { color: var(--accent); }
  .brand small {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--t3);
    text-transform: uppercase;
    font-weight: 500;
  }

  /* Mode switcher — center */
  .mode-pills {
    display: inline-flex;
    background: var(--s3);
    border: 1px solid var(--b1);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
    margin: 0 auto;
    position: relative;
  }
  .mode-pills input { position: absolute; opacity: 0; pointer-events: none; }
  .mode-pills label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--t2);
    cursor: pointer;
    border-radius: 5px;
    transition: background 140ms ease, color 140ms ease;
    user-select: none;
    margin: 0;
  }
  .mode-pills label:hover { color: var(--t1); }
  .mode-pills input:checked + label {
    background: var(--s5);
    color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--b2);
  }
  .mode-pills .glyph { opacity: 0.65; font-size: 11px; }

  .top-actions { display: inline-flex; gap: 8px; align-items: center; }
  .mobile-settings-btn { display: none; }

  /* ─── Buttons ─── */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, transform 80ms ease, opacity 140ms ease, box-shadow 140ms ease;
    white-space: nowrap;
    font-family: inherit;
  }
  .btn:disabled { opacity: 0.4; cursor: not-allowed; }
  .btn-primary {
    background: var(--accent);
    color: #000;
    font-weight: 600;
    box-shadow: 0 0 0 0 var(--accent-glow);
  }
  .btn-primary:hover:not(:disabled) {
    background: var(--accent-hover);
    box-shadow: 0 4px 14px -2px var(--accent-glow);
  }
  .btn-primary:active:not(:disabled) { transform: translateY(1px); }
  .btn-ghost {
    background: transparent;
    color: var(--t2);
    border-color: var(--b2);
  }
  .btn-ghost:hover:not(:disabled) {
    background: var(--s3);
    color: var(--t1);
    border-color: var(--b3);
  }
  .btn-sm { height: 26px; padding: 0 10px; font-size: 11.5px; }
  .icon-btn {
    background: var(--s3);
    border: 1px solid var(--b1);
    color: var(--t2);
    width: 100%; height: 30px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
    font-family: inherit;
  }
  .icon-btn:hover:not(:disabled) { background: var(--s4); color: var(--t1); border-color: var(--b2); }
  .icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }

  /* ─── Sidebar ─── */
  .sidebar {
    background: var(--s1);
    border-right: 1px solid var(--b1);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
    /* override old .sidebar rules */
    width: auto;
  }
  .sidebar::-webkit-scrollbar { width: 8px; }
  .sidebar::-webkit-scrollbar-track { background: transparent; }
  .sidebar::-webkit-scrollbar-thumb { background: var(--b2); border-radius: 4px; }
  .sidebar::-webkit-scrollbar-thumb:hover { background: var(--b3); }

  /* Panel = sidebar section (overrides old .panel) */
  .panel {
    padding: 14px 16px;
    border-bottom: 1px solid var(--b1);
    background: transparent;
  }
  .panel:last-of-type { border-bottom: none; }
  .panel-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--t3);
    margin-bottom: 10px;
    font-weight: 500;
  }

  /* ─── Fields ─── */
  .field { display: grid; gap: 6px; margin-bottom: 10px; }
  .field:last-child { margin-bottom: 0; }
  .field-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px;
    color: var(--t2);
    margin: 0;
  }
  .field-label .v {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--t1);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
  }
  .field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /* ─── Inputs ─── */
  .sidebar input[type=text],
  .sidebar input[type=number],
  .sidebar select {
    width: 100%;
    height: 30px;
    background: var(--s3);
    border: 1px solid var(--b1);
    color: var(--t1);
    border-radius: 5px;
    padding: 0 8px;
    font-size: 12.5px;
    font-feature-settings: 'tnum';
    transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    min-height: 0;
  }
  .sidebar input[type=text]:hover,
  .sidebar input[type=number]:hover,
  .sidebar select:hover { background: var(--s4); }
  .sidebar input[type=text]:focus,
  .sidebar input[type=number]:focus,
  .sidebar select:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--s5);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  .sidebar select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23A8A6A0' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 26px;
  }

  /* ─── Range sliders ───
     24px thumb on an 8px track. The input is taller than the track so a click
     anywhere on the row hits the control (browsers jump the thumb there).
     --fill is the active portion, set from the value in slider-ui.js. */
  .sidebar input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 36px;
    background: transparent;
    cursor: pointer;
    padding: 0;
    margin: 2px 0;
    --fill: 0%;
  }
  .sidebar input[type=range]:focus { outline: none; }
  .sidebar input[type=range]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 999px;
  }
  .sidebar input[type=range]::-webkit-slider-runnable-track {
    height: 8px;
    background: linear-gradient(90deg, var(--accent) var(--fill), var(--s4) var(--fill));
    box-shadow: inset 0 0 0 1px var(--b2);
    border-radius: 999px;
  }
  .sidebar input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 24px; height: 24px;
    margin-top: -8px;
    background: var(--accent);
    border: 2px solid var(--s0);
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.45);
    cursor: grab;
    transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease;
  }
  .sidebar input[type=range]:hover::-webkit-slider-thumb { background: var(--accent-hover); transform: scale(1.08); }
  .sidebar input[type=range]:active::-webkit-slider-thumb { background: var(--accent-hover); transform: scale(1.14); cursor: grabbing; }
  .sidebar input[type=range]:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px var(--s1), 0 0 0 6px var(--accent);
  }
  .sidebar input[type=range]::-moz-range-track {
    height: 8px;
    background: var(--s4);
    border: 1px solid var(--b2);
    border-radius: 999px;
  }
  .sidebar input[type=range]::-moz-range-progress {
    height: 8px;
    background: var(--accent);
    border-radius: 999px;
  }
  .sidebar input[type=range]::-moz-range-thumb {
    box-sizing: border-box;
    width: 24px; height: 24px;
    background: var(--accent);
    border: 2px solid var(--s0);
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.45);
    cursor: grab;
  }
  .sidebar input[type=range]:hover::-moz-range-thumb { background: var(--accent-hover); transform: scale(1.08); }
  .sidebar input[type=range]:active::-moz-range-thumb { background: var(--accent-hover); transform: scale(1.14); }
  .sidebar input[type=range]:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 3px var(--s1), 0 0 0 6px var(--accent);
  }
  .slider-readout-off {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0,0,0,0) !important;
    white-space: nowrap !important; border: 0 !important;
  }
  .sidebar input.slider-num { width: 5.2em; text-align: right; font-variant-numeric: tabular-nums; }
  /* Beats the later .sidebar input[type=number] size in product.css, so Depth
     and Logo size keep a large typeable figure instead of a small field. */
  .sidebar .big-field-value input.slider-num-lg {
    width: 4.6em; height: 36px; padding: 0 4px;
    font-size: 22px; font-weight: 400; letter-spacing: -0.01em;
    background: transparent; border-color: transparent; box-shadow: none;
  }
  .sidebar .big-field-value input.slider-num-lg:hover,
  .sidebar .big-field-value input.slider-num-lg:focus {
    background: var(--s4); border-color: var(--b2);
  }
  @media (prefers-reduced-motion: reduce) {
    .sidebar input[type=range]::-webkit-slider-thumb,
    .sidebar input[type=range]::-moz-range-thumb { transition: none; }
  }

  /* ─── Big slider (logo size, depth) ─── */
  .big-field { margin-bottom: 16px; }
  .big-field:last-of-type { margin-bottom: 10px; }
  .big-field-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
  }
  .big-field-label {
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--t3);
    font-weight: 500;
  }
  .big-field-value {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 22px;
    line-height: 1;
    color: var(--t1);
    letter-spacing: -0.01em;
    font-weight: 400;
  }
  .big-field-value .unit { font-size: 12px; color: var(--t3); margin-left: 2px; }
  .big-field input[type=range]::-webkit-slider-thumb { box-shadow: 0 1px 4px var(--accent-glow); }
  .big-field-context {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--t3);
    letter-spacing: 0.04em;
  }
  .big-field-context span:nth-child(2) { color: var(--t2); }

  /* ─── Pill toggle (Raised / Carved) ───
     Must be flex (not grid): hidden radios + labels are siblings. With
     grid-template-columns:1fr 1fr the four children auto-place into a
     2×2, stacking both labels in the right column and leaving the left
     half empty — buttons look broken / only half-clickable. Flex keeps
     absolute radios out of layout so the two labels sit side-by-side. */
  .pill-toggle {
    display: flex;
    position: relative;
    background: var(--s3);
    border: 1px solid var(--b1);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
    margin-top: 4px;
  }
  .pill-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
  }
  .pill-toggle label {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 6px;
    font-size: 12px;
    color: var(--t2);
    cursor: pointer;
    border-radius: 4px;
    transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
    user-select: none;
    font-weight: 500;
    margin: 0;
    min-width: 0;
  }
  .pill-toggle label:hover { color: var(--t1); }
  .pill-toggle input:checked + label {
    background: var(--s5);
    color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--b2);
  }
  .pill-toggle input:focus-visible + label {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
  }

  /* ─── Checkboxes (.check) ─── */
  .check {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    padding: 4px 0;
    font-size: 12px;
    color: var(--t1);
    user-select: none;
    line-height: 1.35;
  }
  .check input[type=checkbox] {
    -webkit-appearance: none;
    appearance: none;
    width: 14px; height: 14px;
    background: var(--s3);
    border: 1px solid var(--b2);
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background 120ms ease, border-color 120ms ease;
    margin: 0;
  }
  .check input[type=checkbox]:hover { border-color: var(--b3); }
  .check input[type=checkbox]:checked {
    background: var(--accent);
    border-color: var(--accent);
  }
  .check input[type=checkbox]:checked::after {
    content: '';
    position: absolute;
    left: 3px; top: 0;
    width: 4px; height: 8px;
    border: solid #000;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  .check span { line-height: 1.35; }

  /* ─── Drop area ─── */
  .drop {
    background: var(--s2);
    border: 1px dashed var(--b2);
    border-radius: 6px;
    padding: 14px 12px;
    text-align: center;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-height: 0;
  }
  .drop:hover, .drop:focus-visible {
    border-color: var(--accent);
    background: var(--accent-soft);
    outline: none;
  }
  .drop.dragover {
    border-color: var(--accent);
    border-style: solid;
    background: var(--accent-soft);
    box-shadow: 0 0 0 3px var(--accent-soft);
  }
  .drop .glyph { font-size: 18px; color: var(--t2); }
  .drop strong { font-size: 12.5px; color: var(--t1); font-weight: 500; }
  .drop small { font-size: 10.5px; color: var(--t3); }
  .filename {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--accent);
    padding: 8px 0 0;
    word-break: break-all;
    line-height: 1.3;
  }
  .img-tools {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-top: 8px;
  }
  .source-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 8px;
  }
  .divider {
    height: 1px;
    background: var(--b1);
    margin: 10px 0;
  }
  .bg-color {
    display: grid;
    grid-template-columns: 22px 1fr auto auto;
    align-items: center;
    gap: 6px;
  }
  .swatch {
    width: 22px; height: 22px;
    border-radius: 4px;
    border: 1px solid var(--b2);
    background: #fff;
  }
  .swatch-label {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--t2);
    letter-spacing: 0.04em;
  }

  /* ─── Canvas ─── */
  .canvas {
    position: relative;
    background:
      radial-gradient(80% 60% at 50% 40%, rgba(255,107,0,0.04) 0%, transparent 70%),
      var(--s0);
    overflow: hidden;
    min-height: 0;
  }
  #threeContainer {
    width: 100%;
    height: 100%;
    cursor: grab;
  }
  #threeContainer:active { cursor: grabbing; }
  .canvas-meta {
    position: absolute;
    top: 14px;
    left: 16px;
    display: flex;
    gap: 8px;
    align-items: center;
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--t3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 5;
  }
  .canvas-meta .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
    animation: pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--accent-soft); }
    50% { box-shadow: 0 0 0 6px transparent; }
  }
  .canvas-hint {
    position: absolute;
    top: 14px;
    right: 118px; /* leave room for Reset view button */
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--t3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 5;
    max-width: min(420px, calc(100% - 140px));
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #resetViewBtn {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 6;
  }

  /* ─── Heightmap mini-map ─── */
  .hm-mini {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 180px;
    background: rgba(14,14,17,0.85);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border: 1px solid var(--b1);
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    z-index: 10;
  }
  .hm-mini-head {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--t3);
    margin-bottom: 6px;
  }
  .hm-mini-canvas-wrap {
    position: relative;
    aspect-ratio: 4/3;
    background: #000;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #heightmapCanvas {
    max-width: 100%;
    max-height: 100%;
    image-rendering: pixelated;
  }
  .hm-mini-empty {
    color: var(--t4);
    font-size: 10px;
    position: absolute;
  }

  /* ─── Status strip ─── */
  .status-strip {
    background: var(--s2);
    border-top: 1px solid var(--b1);
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: 22px;
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--t2);
    letter-spacing: 0.04em;
  }
  .stat-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }
  .stat-cell .k {
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 9.5px;
  }
  .stat-cell .v {
    color: var(--t1);
    font-variant-numeric: tabular-nums;
  }
  .status-right { margin-left: auto; display: inline-flex; gap: 12px; align-items: center; }
  .tips-link {
    background: transparent;
    border: none;
    color: var(--t2);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0;
    transition: color 140ms ease;
  }
  .tips-link:hover { color: var(--t1); }

  /* ─── Tips drawer ─── */
  .tips-drawer {
    position: fixed;
    right: 16px;
    bottom: calc(var(--status-h) + 12px);
    width: 380px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--s2);
    border: 1px solid var(--b2);
    border-radius: 10px;
    padding: 18px 20px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
    z-index: 60;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--t2);
  }
  .tips-drawer.hidden { display: none; }
  .tips-drawer strong { color: var(--t1); font-weight: 600; display: block; margin-top: 12px; }
  .tips-drawer strong:first-child { margin-top: 0; }
  .tips-drawer ol, .tips-drawer ul { margin: 8px 0 14px; padding-left: 20px; }
  .tips-drawer li { margin-bottom: 4px; }
  .tips-drawer em { color: var(--accent); font-style: normal; }

  /* ─── Toast (override old) ─── */
  .toast {
    position: fixed;
    bottom: calc(var(--status-h) + 16px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: var(--s4);
    border: 1px solid var(--b2);
    color: var(--t1);
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 12.5px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease;
    z-index: 200;
    box-shadow: 0 12px 30px rgba(0,0,0,0.5);
  }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  .toast.error { border-color: var(--danger); color: var(--danger); }
  .toast.success { border-color: var(--success); color: var(--success); }

  /* ─── Utility ─── */
  .muted-tip { font-size: 11px; color: var(--t3); line-height: 1.45; margin: 6px 0 0; }
  details summary { cursor: pointer; font-size: 11px; color: var(--t3); padding: 4px 0; transition: color 140ms ease; }
  details summary:hover { color: var(--t1); }
  details > div { margin-top: 6px; display: grid; gap: 6px; }

  /* Responsive: collapse sidebar on narrow viewports */
  @media (max-width: 900px) {
    :root { --topbar-h: 104px; }
    .topbar {
      grid-template-columns: 1fr auto auto;
      grid-template-rows: 52px 44px;
      gap: 0 8px;
      padding: 0 10px 8px 14px;
      overflow: visible;
    }
    .brand small, .brand .version-badge { display: none; }
    .mobile-settings-btn { display: inline-flex; width: auto; padding: 0 10px; }
    .top-actions { gap: 5px; }
    .top-actions .btn { padding-left: 9px; padding-right: 9px; }
    .top-actions kbd { display: none; }
    .topbar .mode-pills {
      grid-column: 1 / -1;
      grid-row: 2;
      margin: 0;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }
    .mode-pills label { justify-content: center; padding: 6px 5px; }
    .app { grid-template-columns: 1fr; }
    .sidebar {
      position: absolute;
      top: var(--topbar-h);
      bottom: var(--status-h);
      left: 0;
      width: min(380px, 92vw);
      z-index: 40;
      box-shadow: 0 8px 30px rgba(0,0,0,0.5);
      transform: translateX(-105%);
      transition: transform 180ms ease;
    }
    body.mobile-settings-open .sidebar { transform: translateX(0); }
    .hm-mini { max-width: 34vw; }
  }
  .axis-legend {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 5;
    display: flex;
    gap: 9px;
    padding: 5px 8px;
    border-radius: 5px;
    background: rgba(8,8,10,0.72);
    border: 1px solid var(--b1);
    font: 10px var(--mono);
    pointer-events: none;
  }
  .axis-x { color: #ff4d4d; }
  .axis-y { color: #55dd77; }
  .axis-z { color: #4d8dff; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; }
  }

  /* ─── Overflow containment ───
     After an image upload the status bar fills with nowrap stat cells and the
     3D canvas gets a fixed pixel size. Each .shell row is a grid item with the
     default min-width:auto, so it would grow to that content width, overflow
     the viewport, and drag the right-aligned topbar export buttons off-screen
     (where overflow:hidden clipped them). These rules let the rows shrink and
     keep the buttons reachable at any window width. */
  .shell > * { min-width: 0; }
  .topbar { overflow: hidden; }
  .status-strip { overflow-x: auto; overflow-y: hidden; }
  #threeContainer > canvas { max-width: 100%; }

  /* ─── Status strip fit (iPad portrait/landscape, narrow desktop windows) ───
     Cells may shrink (min-width:0), so a long value used to spill past its own
     box and print on top of the next label. Each value now ellipsizes inside
     its cell (the full text stays in its title tooltip), the short numeric
     cells and the right-hand links never shrink, and medium widths drop the
     two least useful cells so the rest stay readable. Pure CSS: no layout work
     in JS. Phones (≤760px) hide the strip in mobile.css; ≤900px keeps TRIS only
     (template.css). */
  .status-strip .stat-cell { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .status-strip .stat-cell .k { flex: none; }
  .status-strip .stat-cell .v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .status-strip .stat-cell:nth-child(2),
  .status-strip .stat-cell:nth-child(3),
  .status-strip .stat-cell:nth-child(4) { flex-shrink: 0; }
  .status-strip .status-right { flex: none; white-space: nowrap; }
  @media (max-width: 1440px) { .status-strip { gap: 16px; } }
  @media (min-width: 901px) and (max-width: 1180px) {
    .status-strip .stat-cell:nth-child(2),
    .status-strip .stat-cell:nth-child(4) { display: none; }
    .status-strip { gap: 12px; padding: 0 12px; }
    .status-strip .stat-cell { gap: 5px; }
  }

  /* Busy state while the heightmap / mesh rebuilds */
  body.is-rebuilding { cursor: progress; }
  body.is-rebuilding .sidebar { pointer-events: none; opacity: 0.92; }
  .stat-cell .v.warn { color: var(--warning); }
  .stat-cell .v.preview-tag { color: var(--warning); }
  .stat-cell .v.export-tag { color: var(--success); }



/* v2 extras */
.version-badge {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--accent);
  border: 1px solid rgba(255,107,0,0.35);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}
.fit-ring-btn {
  width: 100%;
  margin-top: 8px;
  background: linear-gradient(180deg, rgba(255,107,0,0.22), rgba(255,107,0,0.10));
  border: 1px solid rgba(255,107,0,0.45);
  color: var(--t1);
  font-weight: 600;
}
.fit-ring-btn:hover { border-color: var(--accent); background: rgba(255,107,0,0.28); }
details.adv {
  border-top: 1px solid var(--b1);
  margin-top: 8px;
  padding-top: 6px;
}
details.adv > summary {
  cursor: pointer;
  color: var(--t2);
  font-size: 11.5px;
  font-weight: 500;
  list-style: none;
  padding: 6px 0;
  user-select: none;
}
details.adv > summary::-webkit-details-marker { display: none; }
details.adv > summary::before { content: '▸ '; color: var(--t3); }
details.adv[open] > summary::before { content: '▾ '; }
.orient-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 8px;
}
.orient-pills label {
  display: block;
  text-align: center;
  padding: 7px 6px;
  border-radius: 6px;
  border: 1px solid var(--b1);
  background: var(--s3);
  color: var(--t2);
  font-size: 11.5px;
  cursor: pointer;
}
.orient-pills input { position: absolute; opacity: 0; pointer-events: none; }
.orient-pills input:checked + label {
  border-color: rgba(255,107,0,0.45);
  color: var(--accent);
  background: var(--accent-soft);
}

.drop.drag { border-color: var(--accent); background: var(--accent-soft); }
body.is-rebuilding .canvas-meta .dot { background: var(--warning); }
.filename { font-size: 11px; color: var(--t2); margin-top: 6px; word-break: break-all; }
.source-actions { display: flex; gap: 6px; margin-top: 8px; }
.img-tools { display: flex; gap: 4px; margin-top: 8px; }
.icon-btn {
  width: 32px; height: 28px; border-radius: 6px; border: 1px solid var(--b1);
  background: var(--s3); color: var(--t2); cursor: pointer;
}
.icon-btn:hover:not(:disabled) { color: var(--t1); border-color: var(--b2); }
.icon-btn:disabled { opacity: 0.35; cursor: default; }
.bg-color { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.swatch { width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--b2); background: #fff; }
.swatch-label { font-family: var(--mono); font-size: 11px; color: var(--t2); }


/* Flat text prints (text-plate-ui.js) */
.text-backing { margin: 4px 0 12px; }
.text-backing[hidden], .text-backing .field[hidden], label.check[hidden] { display: none !important; }
.text-backing .field { margin-top: 10px; }
.text-backing .muted-tip { margin: 8px 0 0; }
.pill-toggle.wrap { flex-wrap: wrap; }
.pill-toggle.wrap label { flex: 1 1 40%; min-height: 32px; text-align: center; }
.pill-toggle.wrap label[for=textBackingNone] { flex-basis: 100%; }
@media (pointer: coarse), (max-width: 760px) {
  .pill-toggle.wrap label { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
}

/* Top-bar context and status line (header-context.js) */
.project-identity { flex: 0 0 auto; }
.local-label { white-space: nowrap; }
.project-context { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 18px; margin-left: 6px; }
.context-label { flex: 0 1 auto; max-width: 42%; min-width: 0; font: 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-context #templateStatus { flex: 1 1 0; max-width: max-content; min-width: 0; margin: 0; padding: 0 0 0 18px; border: 0; border-left: 1px solid var(--b2); font-size: 12px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-context #templateStatus:empty { display: none; }
.project-context #templateStatus.error { color: var(--warning); font-weight: 600; }
.project-context #templateStatus.error::before { content: '⚠ '; }
body:not(.using-template) .project-context #templateStatus:not(.error) { display: none; }
@media (max-width: 1100px) { .context-label, .local-label { display: none; } .project-context #templateStatus { border-left: 0; padding-left: 0; } }
@media (max-width: 760px) { .project-context { display: none; } }

/* Photo to sleeve */
#photoPanel { margin-bottom: 4px; }
#photoPanel .panel-label { margin-top: 0; }
#photoAspect { width: 100%; margin: 8px 0; }
.photo-subject { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.photo-crop.is-picking, #photoTap[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 2px; }
.photo-crop.is-picking { cursor: crosshair; }
.photo-crop, .photo-preview { width: 100%; height: auto; border-radius: 8px; background: #16171a; touch-action: none; }
.photo-crop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.photo-preview { image-rendering: pixelated; background: repeating-conic-gradient(#1c1d21 0% 25%, #26272c 0% 50%) 50% / 12px 12px; }
.photo-warning { color: var(--warning); font-size: 12px; line-height: 1.45; margin: 8px 0; }
.photo-warning:empty { display: none; }
#photoTools[hidden] { display: none !important; }

/* One switch that swaps what sticks out (sleeve: design sinks into a raised pad that follows its outline). */
.invert-relief { width: 100%; min-height: 40px; margin-top: 10px; font-weight: 600; }
.btn.invert-relief[aria-pressed="true"], .btn.invert-relief[aria-pressed="true"]:hover:not(:disabled) { background: var(--accent); color: #101114; border-color: var(--accent); }
.invert-relief-hint { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--t3); }
@media (pointer: coarse), (max-width: 760px) { .invert-relief { min-height: 44px; } }