:root {
    --bg-black: #0a0a0a;
    --bg-dark: #161616;
    --bg-panel: #1f1f1f;
    --bg-panel-2: #2a2a2a;
    --bg-card: #2e2e2e;
    --bg-card-hover: #3a3a3a;
    --border: #050505;
    --text: #e8e8e8;
    --text-dim: #888;
    --text-dimmer: #555;
    --accent: #ff8c1a;
    --accent-bg: #e87d0d;
    --accent-soft: rgba(232, 125, 13, 0.15);
    --blue: #4b8fdf;
    --x-axis: #ff5555;
    --y-axis: #5fcf5f;
    --z-axis: #4b8fdf;
  }

  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; }
  button { touch-action: manipulation; }
  html, body {
    margin: 0; padding: 0;
    height: 100%; width: 100%;
    overflow: hidden;
    background: var(--bg-black);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    overscroll-behavior: none;
  }
  #app {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--bg-black);
  }

  /* ===== STARTUP LOADING SCREEN =====
     This element is the first child of <body>, so it paints before the app's
     heavier 3D initialization finishes. The application keeps loading below it. */
  #startup-loading-screen {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 17px;
    overflow: hidden;
    background: #000;
    color: #ff8c1a;
    cursor: wait;
    pointer-events: auto;
    touch-action: none;
    opacity: 1;
    transition: opacity 320ms ease;
  }
  #startup-loading-screen.msl-leaving {
    opacity: 0;
    pointer-events: none;
  }
  #startup-loading-screen.msl-error {
    cursor: default;
  }
  #startup-loading-screen.msl-error .msl-spinner {
    animation: none;
    border-color: rgba(255,140,26,.2);
    border-top-color: #ff8c1a;
  }
  .msl-spinner {
    width: 42px;
    height: 42px;
    border: 3px solid rgba(255,140,26,.18);
    border-top-color: #ff8c1a;
    border-radius: 50%;
    animation: msl-spin .82s linear infinite;
    filter: drop-shadow(0 0 8px rgba(255,140,26,.25));
  }
  .msl-title {
    color: #ff8c1a;
    font-size: 21px;
    font-weight: 750;
    letter-spacing: .4px;
  }
  .msl-label {
    margin-top: -9px;
    color: rgba(255,140,26,.62);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
  }
  .msl-progress {
    width: min(150px, 42vw);
    height: 2px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,140,26,.14);
  }
  .msl-progress::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: #ff8c1a;
    transform: scaleX(0);
    transform-origin: left center;
    animation: msl-fill 5s linear forwards;
    box-shadow: 0 0 9px rgba(255,140,26,.5);
  }
  .msl-error-copy {
    max-width: min(360px, 78vw);
    color: rgba(255,255,255,.72);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
  }
  .msl-retry {
    min-height: 38px;
    padding: 8px 18px;
    border: 1px solid rgba(255,140,26,.55);
    border-radius: 7px;
    background: rgba(255,140,26,.12);
    color: #ff9a37;
    font: 700 12px/1 inherit;
    cursor: pointer;
  }
  .msl-retry:active { background: rgba(255,140,26,.26); }
  @keyframes msl-spin { to { transform: rotate(360deg); } }
  @keyframes msl-fill { to { transform: scaleX(1); } }


  /* topbar removed — buttons now live in modebar */
  .topbar { display: none; }
  .logo { display: none; }
  .topbar-spacer { display: none; }
  .top-btn {
    background: transparent; border: none; color: rgba(255,255,255,0.7);
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px; cursor: pointer; flex-shrink: 0;
  }
  .top-btn:active { background: rgba(255,255,255,0.1); color: white; }
  .top-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

  /* ===== MODE BAR — primary top bar (merged with former topbar) ===== */
  .modebar {
    height: calc(42px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    background: var(--bg-black);
    display: flex; align-items: center;
    padding-left: 8px; padding-right: 6px; gap: 2px;
    flex-shrink: 0;
  }
  .mode-toggle-split {
    flex: 1; min-width: 0; align-self: stretch;
    display: grid; grid-template-columns: minmax(0,1fr) 44px;
    overflow: hidden; border-radius: 8px; background: var(--accent-bg);
  }
  .mode-toggle-btn {
    min-width: 0;
    background: transparent;
    border: none; color: white;
    padding: 5px 10px;
    border-radius: 0; font-size: 13px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    cursor: pointer;
    transition: background 0.15s;
  }
  .mode-toggle-btn:active { background: var(--accent); }
  .mode-toggle-btn svg { width: 15px; height: 15px; }
  .mode-picker-arrow {
    width: 44px; min-width: 44px; min-height: 100%; padding: 0;
    border: 0; border-left: 1px solid rgba(255,255,255,.22);
    background: rgba(0,0,0,.055); color: white;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .mode-picker-arrow:active,
  .mode-picker-arrow[aria-expanded="true"] { background: rgba(0,0,0,.17); }
  .mode-picker-chevron {
    width: 16px !important;
    height: 16px !important;
    flex: none;
    transition: transform .16s ease;
  }

  /* One sculpt-wide symmetry control.  It lives immediately below the mode
     selector and is never generated inside an individual brush popup. */
  #sculpt-mirror-bar {
    position: absolute;
    top: calc(46px + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 24;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 9px;
    background: rgba(20,20,20,0.92);
    pointer-events: auto;
    touch-action: manipulation;
  }
  #sculpt-mirror-bar[hidden] { display: none !important; }
  #sculpt-mirror-bar .mirror-label {
    margin: 0 4px;
    color: var(--text-dim);
    font-size: 10px;
    letter-spacing: .5px;
  }
  #sculpt-mirror-bar .mirror-btn {
    min-width: 30px;
    height: 26px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    background: var(--bg-panel-2);
    color: #bbb;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
  }
  #sculpt-mask-actions {
    position:absolute;
    top:calc(84px + env(safe-area-inset-top));
    left:50%;
    transform:translateX(-50%);
    z-index:24;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:4px;
    max-width:calc(100vw - 16px);
    padding:4px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:9px;
    background:rgba(20,20,20,.92);
    pointer-events:auto;
    touch-action:manipulation;
  }
  #sculpt-mask-actions[hidden] { display:none !important; }
  #sculpt-mask-actions button {
    min-height:28px;
    padding:4px 9px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:6px;
    background:var(--bg-panel-2);
    color:#ddd;
    font-size:10px;
    font-weight:700;
    cursor:pointer;
  }
  #sculpt-mask-actions button[aria-pressed="true"] {
    color:#111;
    background:var(--accent);
    border-color:var(--accent);
  }
  .mode-hint { display: none; }
  .modebar-actions { display: none; } /* removed — buttons now inline */
  .modebar-btn { display: none; }
  /* Submode row — ultra-compact strip */
  /* ── Submode cluster (Vertex/Edge/Face) ─────────────────────────────────────
     Absolutely positioned inside .viewport-wrap at bottom-right, one column
     to the left of the right-actions strip.  Only visible in Edit Mode.       */
  /* ── Submode cluster (Vertex/Edge/Face) ─────────────────────────────────────
     Horizontal strip anchored to the LEFT side of the viewport bottom, clear
     of the right-rail tool column (which occupies the bottom-right corner).
     Icon-above-label buttons; only visible in Edit Mode.                       */
  .submode-row {
    position: absolute;
    left: 6px;                   /* left-anchored — no collision with right rail */
    bottom: 10px;
    display: none;               /* hidden in Object Mode */
    flex-direction: row; gap: 4px;
    z-index: 9;                  /* above the right rail so labels are never clipped */
  }
  .submode-row.disabled { display: none !important; }

  .sub-btn {
    width: 52px; min-height: 46px;
    border-radius: 10px; cursor: pointer;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.2px;
    color: var(--text-dim);
    background: rgba(18,18,18,0.9);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.08);
    transition: background 0.12s, color 0.12s;
    -webkit-tap-highlight-color: transparent;
    padding: 4px 2px;
  }
  .sub-btn:active { background: rgba(255,255,255,0.14); color: var(--text); }
  .sub-btn.active {
    background: var(--accent-bg); color: white;
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
  }
  .sub-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
  .sub-btn span { line-height: 1; white-space: nowrap; }

  /* Box-select rectangle overlay (drawn in the viewport while dragging) */
  .box-select-rect {
    position: absolute;
    border: 1.5px dashed var(--accent);
    background: rgba(232, 125, 13, 0.12);
    pointer-events: none;
    z-index: 11;
    display: none;
  }



  /* ─── Emission toggle ─────────────────────────────────────── */
  .em-toggle-row {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 0; cursor: pointer; user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .em-toggle-row span { font-size: 12px; color: var(--text-dim); }
  .em-toggle-row.on span { color: var(--text); }
  .em-switch {
    width: 36px; height: 20px; border-radius: 10px;
    background: rgba(255,255,255,.12);
    position: relative; flex-shrink: 0;
    transition: background .18s;
  }
  .em-switch::after {
    content: ''; position: absolute;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--text-dim);
    top: 3px; left: 3px;
    transition: transform .18s, background .18s;
  }
  .em-toggle-row.on .em-switch { background: var(--accent); }
  .em-toggle-row.on .em-switch::after { transform: translateX(16px); background: #fff; }
  .em-controls {
    overflow: hidden;
    transition: max-height .2s ease, opacity .2s;
    max-height: 0; opacity: 0;
  }
  .em-controls.open { max-height: 160px; opacity: 1; }

  /* ═══ MATERIAL LIBRARY — horizontal swatch strip ══════════ */
  #ml-list,
  #ml-object-slots,
  #ml-library-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: visible;
    gap: 6px;
    padding: 8px 4px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 10px;
    min-height: 76px;
    align-content: flex-start;
  }
  .material-grid-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    padding: 2px;
    margin-bottom: 5px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 9px;
    background: rgba(0,0,0,.18);
  }
  .material-grid-tab {
    min-width: 0;
    min-height: 32px;
    padding: 5px 4px;
    border: 0;
    border-radius: 7px;
    color: var(--text-dim);
    background: transparent;
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
  }
  .material-grid-tab.active {
    color: var(--accent);
    background: var(--accent-bg);
    box-shadow: inset 0 0 0 1px rgba(255,128,0,.45);
  }
  .material-grid-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 28px;
    margin-bottom: 3px;
  }
  .material-grid-toolbar .btn {
    min-height: 28px;
    padding: 3px 9px;
    font-size: 10px;
  }
  .material-template-item {
    color: inherit;
    background: transparent;
    font: inherit;
  }
  .material-assign-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    margin: 5px 0 8px;
  }
  .material-assign-row .btn {
    min-height: 32px;
    padding: 5px 6px;
    font-size: 10px;
    line-height: 1.05;
  }
  .mat-lib-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 5px 6px;
    border-radius: 8px;
    cursor: pointer;
    min-width: 54px;
    max-width: 72px;
    flex-shrink: 0;
    border: 1.5px solid transparent;
    transition: border-color .15s, background .15s;
    -webkit-tap-highlight-color: transparent;
    position: relative;
  }
  .mat-lib-item:active { background: rgba(255,255,255,.06); }
  .mat-lib-item.active {
    background: var(--accent-bg);
    border-color: var(--accent);
  }
  .mat-lib-item .mat-swatch {
    width: 36px; height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.3);
    position: relative;
  }
  .mat-lib-item .mat-swatch.metal   { background: linear-gradient(135deg,#dde1e5 0%,#9ba0a7 100%); }
  .mat-lib-item .mat-swatch.glass   { background: linear-gradient(135deg,rgba(160,210,230,.55) 0%,rgba(100,170,200,.25) 100%); border:1px solid rgba(255,255,255,.25); }
  .mat-lib-item .mat-swatch.emissive { box-shadow: 0 0 8px 2px var(--sw,#ff8800), inset 0 0 0 1px rgba(0,0,0,.2); }
  .mat-lib-item .mat-swatch-label {
    font-size: 9px;
    color: var(--text-dim);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    max-width: 70px;
    line-height: 1.2;
  }
  .mat-lib-item.active .mat-swatch-label { color: var(--accent); font-weight: 700; }
  .mat-lib-item .mat-usage-badge {
    font-size: 8px;
    color: var(--text-dimmer, rgba(255,255,255,.3));
    line-height: 1;
  }
  .mat-lib-delete {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 50%;
    background: #d94343;
    color: #fff;
    font-size: 14px;
    line-height: 18px;
    font-weight: 700;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0,0,0,.4);
  }
  .mat-lib-delete:active { transform: scale(.9); }

  /* ═══ CONTEXTUAL POPUP (Delete variants, small menus) ══════ */
  #ctx-popup-backdrop {
    display: none; position: fixed; inset: 0; z-index: 820;
    background: rgba(0,0,0,.30);
  }
  #ctx-popup-backdrop.open { display: block; }
  #ctx-popup {
    display: none; position: fixed; z-index: 821;
    min-width: 200px; max-width: 280px;
    background: #1e1e21;
    border: 1.5px solid rgba(255,255,255,.13);
    border-radius: 14px;
    padding: 6px;
    box-shadow: 0 8px 28px rgba(0,0,0,.7);
    overflow: hidden;
    transform: scale(.85); opacity: 0;
    transition: transform .18s cubic-bezier(.34,1.4,.64,1), opacity .15s;
  }
  #ctx-popup.open { display: block; }
  #ctx-popup.visible { transform: scale(1); opacity: 1; }
  .ctx-popup-title {
    font-size: 10px; font-weight: 700; letter-spacing: .5px;
    color: var(--text-dim); text-transform: uppercase;
    padding: 6px 10px 4px; pointer-events: none;
  }
  .ctx-popup-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 10px 12px;
    background: transparent; border: none;
    color: var(--text); font-size: 13px; font-weight: 500;
    border-radius: 9px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    text-align: left;
  }
  .ctx-popup-item:active { background: rgba(255,255,255,.07); }
  .ctx-popup-item.danger { color: #ff7b72; }
  .ctx-popup-item .cpi-ico { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
  .ctx-popup-sep { height: 1px; background: rgba(255,255,255,.07); margin: 3px 6px; }

  .box-select-rect.show { display: block; }

  /* ═══ Universal Selection Engine UI ═══════════════════════════ */
  #rb-select.multi-on {
    background: var(--accent-bg); color: #fff;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(255,140,26,.35), 0 0 12px rgba(255,140,26,.5);
  }
  /* Pie menu — radial buttons around the Select tool */
  #sel-pie-backdrop {
    display: none; position: fixed; inset: 0; z-index: 800;
    background: rgba(0,0,0,.25);
  }
  #sel-pie-backdrop.open { display: block; }
  #sel-pie { position: fixed; inset: 0; z-index: 801; pointer-events: none; }
  .sel-pie-item, .sel-pie-hub, .sel-pie-ghost {
    position: absolute; pointer-events: auto;
    border-radius: 50%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 1px;
    -webkit-tap-highlight-color: transparent;
    /* All slots sit at the pie CENTER; the open state translates them
       outward along their own --dx/--dy radial offset → true bloom. */
    transform: translate(-50%, -50%) translate(var(--hx, 0), var(--hy, 0)) scale(.2);
    opacity: 0;
    transition: transform .22s cubic-bezier(.34,1.45,.64,1), opacity .16s;
  }
  .sel-pie-item {
    width: 64px; height: 64px;
    background: #232326; border: 1.5px solid rgba(255,255,255,.14);
    color: #ddd; font-size: 9px; font-weight: 700; letter-spacing: .2px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,.55);
  }
  .sel-pie-ghost {
    width: 64px; height: 64px;
    background: transparent; border: 1.5px dashed rgba(255,255,255,.14);
    color: rgba(255,255,255,.22); font-size: 15px;
    pointer-events: none;                 /* reserved for future tools */
  }
  .sel-pie-hub {
    width: 52px; height: 52px;
    background: var(--accent-bg); border: 2px solid rgba(255,255,255,.25);
    color: #fff; cursor: pointer;
    box-shadow: 0 4px 18px rgba(232,125,13,.55);
    z-index: 1;
  }
  .sel-pie-hub svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2; }
  .sel-pie-hub.smart-edit-hub,
  .sel-pie-hub.clean-mesh-hub,
  .sel-pie-hub.smart-align-hub {
    width: 62px; height: 62px;
    gap: 0;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .2px;
  }
  .sel-pie-hub.smart-edit-hub .smart-edit-hub-icon,
  .sel-pie-hub.clean-mesh-hub .clean-mesh-hub-icon,
  .sel-pie-hub.smart-align-hub .smart-align-hub-icon {
    font-size: 19px;
    line-height: 18px;
  }
  .sel-pie-hub.quick-action-hub {
    width: 56px; height: 56px;
    gap: 0;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .15px;
    transition-delay: var(--hub-delay, 0ms);
  }
  .sel-pie-hub.quick-action-hub.secondary {
    background: #232326;
    border-color: rgba(255,255,255,.18);
    color: #ddd;
    box-shadow: 0 4px 16px rgba(0,0,0,.55);
  }
  .sel-pie-hub.quick-action-hub.secondary:hover,
  .sel-pie-hub.quick-action-hub.secondary[aria-expanded="true"] {
    background: #303034;
    border-color: rgba(255,255,255,.3);
    color: #fff;
  }
  .sel-pie-hub.quick-action-hub.secondary.snap-enabled {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 4px 18px rgba(232,125,13,.55);
  }
  .sel-pie-hub.quick-action-hub:hover { filter: brightness(1.12); }
  .sel-pie-hub.quick-action-hub[aria-disabled="true"] { filter: saturate(.35) brightness(.75); }
  .sel-pie-hub.quick-action-hub svg {
    width: 16px; height: 16px;
    stroke: currentColor;
  }
  .sel-pie-hub.quick-action-hub .quick-action-state {
    min-height: 7px;
    color: rgba(255,255,255,.66);
    font-size: 7px;
    font-weight: 700;
    line-height: 7px;
  }
  #sel-pie.open .sel-pie-item,
  #sel-pie.open .sel-pie-ghost {
    transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(1);
    opacity: 1;
  }
  #sel-pie.open .sel-pie-hub {
    transform: translate(-50%, -50%) translate(var(--hx, 0), var(--hy, 0)) scale(1);
    opacity: 1;
  }
  .sel-pie-item:active { background: var(--accent-bg); color: #fff; }
  .sel-pie-item.danger {
    background: rgba(92,24,24,.96);
    border-color: rgba(255,112,102,.62);
    color: #ffb0aa;
    box-shadow: 0 4px 18px rgba(45,0,0,.62), inset 0 0 0 1px rgba(255,112,102,.08);
  }
  .sel-pie-item.danger:active { background: #a92f2f; color: #fff; }
  .sel-pie-item .spi-ico { font-size: 18px; line-height: 1; }
  /* Multi-Select "+" badge on the Select tool */
  #rb-select { position: relative; }
  #rb-select.multi-on::after {
    content: '+';
    position: absolute; top: -4px; right: -4px;
    width: 15px; height: 15px; border-radius: 50%;
    background: #22c55e; color: #fff;
    font-size: 11px; font-weight: 900; line-height: 15px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.5);
  }
  /* Multi-select mode indicator chip */
  #multi-sel-chip {
    display: none; position: absolute; top: 10px; left: 50%;
    transform: translateX(-50%); z-index: 30;
    background: var(--accent-bg); color: #fff;
    padding: 5px 12px; border-radius: 16px;
    font-size: 11px; font-weight: 700; letter-spacing: .3px;
    box-shadow: 0 2px 12px rgba(232,125,13,.5);
    animation: msc-pulse 1.6s ease-in-out infinite;
    pointer-events: none; white-space: nowrap;
  }
  #multi-sel-chip.on { display: block; }
  #multi-sel-chip .msc-hint { font-weight: 400; opacity: .75; font-size: 10px; margin-left: 4px; }
  @keyframes msc-pulse {
    0%,100% { box-shadow: 0 2px 12px rgba(232,125,13,.5); }
    50%      { box-shadow: 0 2px 18px rgba(232,125,13,.85); }
  }

  /* ===== VIEWPORT ===== */
  .viewport-wrap {
    flex: 1;
    position: relative;
    overflow: hidden;
    /* Blender-like neutral Solid viewport fallback. Keep this flat and
       achromatic; environments belong to Rendered mode only. */
    background: #3b3b3b;
    margin: 0 12px;
    border-radius: 10px;
    min-height: 160px;
  }
  /* ── Last-Operator Panel (Blender-style "F9" popup) ──────────── */
  #last-op-panel {
    display: none;
    position: absolute; bottom: 12px; left: 12px; z-index: 30;
    background: rgba(25,25,28,0.97);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 8px;
    padding: 10px 12px 12px;
    min-width: 200px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .lop-title {
    font-size: 11px; font-weight: 700; color: var(--text);
    margin-bottom: 8px; padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    letter-spacing: .3px;
  }
  .lop-row {
    display: flex; align-items: center;
    justify-content: space-between; gap: 10px; margin: 5px 0;
  }
  .lop-label { font-size: 11px; color: var(--text-dim); flex-shrink: 0; }
  .lop-input {
    background: var(--bg-card); border: 1px solid rgba(255,255,255,0.08);
    color: var(--text); font-size: 11px; padding: 3px 7px;
    border-radius: 4px; width: 72px; text-align: right;
    -moz-appearance: textfield;
  }
  .lop-input::-webkit-inner-spin-button,
  .lop-input::-webkit-outer-spin-button { -webkit-appearance: none; }
  .lop-input:focus { outline: none; border-color: var(--accent); }

  #viewport { width: 100%; height: 100%; display: block; touch-action: none; position: relative; z-index: 1; }

  /* Top-left info text */
  .vp-info {
    position: absolute; top: 10px; left: 12px;
    font-size: 13px; color: var(--text);
    z-index: 5; pointer-events: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  }
  .vp-info-detail { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; max-width: min(72vw, 520px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Axis gizmo — sits at the top of the right-actions column */
  /* Viewport shading-mode selector — lives inside the outliner panel */
  .shading-btn {
    width: 32px; height: 26px;
    background: transparent; border: none; color: var(--text-dim);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    padding: 0; flex: 1;
  }
  .shading-btn svg { width: 18px; height: 18px; pointer-events:none; }
  .shading-btn:active { background: rgba(255,255,255,0.06); }
  .shading-btn.active { background: rgba(255,216,61,0.16); color: var(--accent); }
  .shading-btn + .shading-btn { border-left: 1px solid rgba(255,255,255,0.05); }
  .outliner-shading { display: flex; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .right-outliner.collapsed .outliner-shading { display: none; }
  .studio-lighting-fab {
    position:absolute; top:44px; right:164px; z-index:24; height:32px;
    padding:0 10px; border-radius:8px; border:1px solid rgba(255,255,255,.11);
    background:rgba(20,20,22,.9); color:var(--text); font:600 11px/1 inherit;
    display:flex; align-items:center; gap:6px; cursor:pointer; backdrop-filter:blur(9px);
  }
  .studio-lighting-fab.active { color:var(--accent); border-color:rgba(255,216,61,.45); }
  .studio-lighting-popup {
    position:static; width:100%; max-height:none; overflow:visible; padding:10px; margin-top:8px; border-radius:13px;
    background:rgba(22,22,25,.96); border:1px solid rgba(255,255,255,.10);
    box-shadow:none;
  }
  .studio-lighting-popup { display:none; }
  .studio-lighting-popup.open { display:block; }
  #studio-lighting-toggle.active { color:var(--accent); background:rgba(255,216,61,.16); }
  .lighting-popup-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; }
  .lighting-popup-title { font-size:12px; font-weight:750; }
  .lighting-close { width:30px; height:30px; padding:0; border:1px solid rgba(255,255,255,.10); border-radius:9px; background:rgba(255,255,255,.06); color:var(--text-dim); cursor:pointer; }
  .lighting-presets,.matcap-presets { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
  .lighting-chip { padding:6px 3px; border:1px solid rgba(255,255,255,.10); border-radius:9px; background:rgba(255,255,255,.035); color:var(--text-dim); font:700 10px/1 inherit; cursor:pointer; }
  .lighting-chip.active { color:#111; background:var(--accent); border-color:var(--accent); }
  .sun-preset-row { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; margin:6px 0; }
  .sun-preset-row .lighting-chip { padding:5px 1px; font-size:9px; }
  /* Rendered-mode lighting direction is opened deliberately from the shading
     menu. The previous always-visible two-angle dial obscured the viewport and
     gave no clue which angle controlled which axis. */
  .outliner-light-tools[hidden] { display:none !important; }
  .outliner-light-tools { border-bottom:1px solid rgba(255,255,255,.06); }
  .outliner-light-direction-btn {
    width:100%; min-height:44px; padding:0 9px; border:0; background:rgba(255,255,255,.025);
    color:var(--text); display:flex; align-items:center; gap:7px; cursor:pointer;
    font:650 10px/1.1 inherit; text-align:left; -webkit-tap-highlight-color:transparent;
  }
  .outliner-light-direction-btn:active,
  .outliner-light-direction-btn[aria-expanded="true"] { background:rgba(255,216,61,.12); color:var(--accent); }
  .outliner-light-direction-btn > svg { width:17px; height:17px; flex:0 0 17px; }
  .outliner-light-direction-btn .light-direction-button-copy { min-width:0; flex:1; }
  .outliner-light-direction-btn .light-direction-button-title { display:block; white-space:nowrap; }
  .outliner-light-direction-btn .light-direction-button-summary { display:block; margin-top:2px; color:var(--text-dim); font-size:8px; font-weight:500; white-space:nowrap; }
  .outliner-light-direction-btn[aria-expanded="true"] .light-direction-button-summary { color:#ffe58a; }
  .outliner-light-direction-row { display:flex; align-items:stretch; width:100%; }
  .outliner-light-direction-btn { flex:1; min-width:0; }
  .outliner-light-direction-btn[hidden] { display:none !important; }
  /* Collapse control shares the first object row instead of creating a blank row. */
  .outliner-body { padding-right:38px; }
  .outliner-collapse-btn {
    position:absolute; top:5px; right:4px; z-index:4;
    width:32px; min-width:32px; height:34px; min-height:34px; padding:0;
    border:1px solid rgba(255,255,255,.10); border-radius:7px;
    background:rgba(14,14,14,.94); color:#f0f0f0;
    box-shadow:0 2px 8px rgba(0,0,0,.32);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .right-outliner.has-light-tools .outliner-collapse-btn { top:49px; }
  .outliner-collapse-btn:active { background:#262626; color:var(--accent); border-color:rgba(255,216,61,.30); }
  .outliner-collapse-btn svg { width:14px; height:14px; transition:transform .18s ease; pointer-events:none; }

  /* Viewport maximizer: the shading strip remains available while the light
     direction row and object list collapse into one small restore arrow. */
  .right-outliner.viewport-panel-minimized {
    width:36px !important; height:36px; max-height:36px !important;
    background:transparent; border-color:transparent; box-shadow:none;
    overflow:visible;
  }
  .right-outliner.viewport-panel-minimized .outliner-body { display:none !important; }
  .right-outliner.viewport-panel-minimized .outliner-light-tools,
  .right-outliner.viewport-panel-minimized .outliner-light-tools[hidden] { display:none !important; }
  .right-outliner.viewport-panel-minimized .outliner-collapse-btn {
    top:0; right:0;
    width:36px; min-width:36px; min-height:36px; height:36px;
    border:1px solid rgba(255,255,255,.09); border-radius:8px;
    background:rgba(18,18,18,.94); color:var(--text);
    box-shadow:0 6px 18px rgba(0,0,0,.28);
  }
  .right-outliner.viewport-panel-minimized .outliner-collapse-btn svg { transform:rotate(180deg); }

  #viewport-sun-gizmo {
    display:none; position:absolute; top:58px; left:50%; transform:translateX(-50%); z-index:30;
    width:min(286px,calc(100% - 24px)); padding:12px; color:var(--text); text-align:left;
    border:1px solid rgba(255,255,255,.13); border-radius:14px;
    background:rgba(19,19,21,.97); box-shadow:0 16px 42px rgba(0,0,0,.45);
    backdrop-filter:blur(14px); user-select:none;
  }
  #viewport-sun-gizmo.open { display:block; }
  .light-direction-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px; }
  .light-direction-title { font-size:12px; font-weight:750; }
  .light-direction-subtitle { margin-top:3px; color:var(--text-dim); font-size:9px; }
  .light-direction-close { width:36px; height:36px; margin:-5px -5px 0 0; padding:0; border:0; border-radius:9px; background:rgba(255,255,255,.06); color:var(--text-dim); font-size:20px; cursor:pointer; }
  .light-direction-main { display:grid; grid-template-columns:112px minmax(0,1fr); align-items:center; gap:12px; }
  .light-direction-sphere {
    position:relative; width:112px; height:112px; padding:0; border-radius:50%; overflow:hidden;
    border:1px solid rgba(255,226,122,.34); touch-action:none; cursor:crosshair;
    background:
      radial-gradient(circle at 29% 24%,rgba(255,250,218,.96) 0 5%,rgba(255,213,88,.58) 17%,transparent 40%),
      radial-gradient(circle at 34% 30%,#777 0 24%,#343434 56%,#090909 82%);
    box-shadow:inset -18px -14px 24px rgba(0,0,0,.72),inset 10px 8px 20px rgba(255,226,122,.11),0 8px 18px rgba(0,0,0,.3);
  }
  .light-direction-sphere::before,
  .light-direction-sphere::after { content:''; position:absolute; pointer-events:none; opacity:.24; }
  .light-direction-sphere::before { left:6%; right:6%; top:50%; height:1px; background:#fff; }
  .light-direction-sphere::after { top:6%; bottom:6%; left:50%; width:1px; background:#fff; }
  .light-direction-handle {
    position:absolute; left:50%; top:50%; width:20px; height:20px; transform:translate(-50%,-50%);
    border:3px solid #ffb900; border-radius:50%; background:#fff7bd;
    box-shadow:0 0 0 3px rgba(255,185,0,.18),0 0 13px #ffb900; pointer-events:none;
  }
  .light-direction-controls { min-width:0; }
  .light-direction-control { display:block; margin-bottom:10px; color:var(--text-dim); font-size:10px; }
  .light-direction-control span { display:block; margin-bottom:5px; }
  .light-direction-control input[type=range] { display:block; width:100%; min-width:0; accent-color:#f0bc2f; }
  .light-direction-hint { color:var(--text-dim); font-size:9px; line-height:1.35; }
  .light-direction-presets { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; margin-top:11px; }
  .light-direction-presets button { min-height:36px; padding:4px 1px; border:1px solid rgba(255,255,255,.09); border-radius:7px; background:rgba(255,255,255,.04); color:var(--text-dim); font:600 9px/1 inherit; cursor:pointer; }
  .light-direction-presets button:active { background:rgba(255,216,61,.16); color:var(--accent); }
  .light-direction-precise { margin-top:9px; border-top:1px solid rgba(255,255,255,.07); padding-top:8px; }
  .light-direction-precise summary { color:var(--text-dim); font-size:9px; cursor:pointer; }
  .light-direction-values { display:flex; justify-content:space-between; gap:12px; margin-top:7px; color:#ffe9a1; font-size:10px; }
  .lighting-mini-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:7px 0 3px; font-size:10px; color:var(--text-dim); }
  .lighting-mini-row input[type=range] { flex:1; min-width:80px; }
  .lighting-section { padding:8px 0; border-top:1px solid rgba(255,255,255,.07); }
  .lighting-section:first-of-type { border-top:0; }
  .lighting-section-title { font-size:10px; font-weight:700; letter-spacing:.45px; text-transform:uppercase; color:var(--text-dim); margin-bottom:6px; }
  .lighting-toggle { accent-color:#f0bc2f; }

  /* Lighting tab visual refresh — mirrors the Render tab's stronger hierarchy. */
  .studio-lighting-popup.lighting-ui-v2 {
    padding:0;
    margin-top:8px;
    border:0;
    border-radius:0;
    background:transparent;
    overflow:visible;
  }
  .lighting-ui-v2 .lighting-popup-head {
    margin:0 0 10px;
    padding:14px 16px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:14px;
    background:rgba(255,255,255,.035);
  }
  .lighting-ui-v2 .lighting-popup-copy { min-width:0; }
  .lighting-ui-v2 .lighting-popup-title {
    color:#fff;
    font-size:16px;
    line-height:1.1;
    font-weight:900;
    letter-spacing:-.02em;
  }
  .lighting-ui-v2 .lighting-popup-note {
    display:none;
  }
  .lighting-ui-v2 .lighting-title-row {
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
  }
  .lighting-help-btn {
    width:20px;
    height:20px;
    flex:0 0 20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;
    background:rgba(255,255,255,.045);
    color:#cfd5df;
    font:800 11px/1 inherit;
    cursor:pointer;
    padding:0;
    box-shadow:none;
  }
  .lighting-help-btn:active,
  .lighting-help-btn.open {
    border-color:rgba(255,216,61,.35);
    background:rgba(255,216,61,.12);
    color:var(--accent);
  }
  .lighting-help-pop {
    display:none;
    margin-top:7px;
    padding:8px 10px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    background:rgba(255,255,255,.04);
    color:var(--text-dim);
    font-size:9px;
    line-height:1.35;
  }
  .lighting-help-pop.open {
    display:block;
  }
  .lighting-help-pop[hidden] { display:none !important; }
  .lighting-ui-v2 .lighting-close {
    width:36px;
    height:36px;
    flex:0 0 36px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    background:rgba(255,255,255,.055);
    color:#d6d6d6;
    font-size:18px;
  }
  .lighting-ui-v2 .lighting-close:active {
    border-color:rgba(255,216,61,.35);
    background:rgba(255,216,61,.12);
    color:var(--accent);
  }
  .lighting-ui-v2 .lighting-card {
    display:block;
    margin:0 0 9px;
    padding:0;
    border:1px solid rgba(255,255,255,.10);
    border-radius:13px;
    background:rgba(255,255,255,.03);
    overflow:hidden;
  }
  .lighting-ui-v2 .lighting-card > summary {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:50px;
    padding:10px 105px 10px 16px;
    cursor:pointer;
    list-style:none;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
    background:rgba(255,255,255,.025);
  }
  .lighting-ui-v2 .lighting-card > summary::-webkit-details-marker { display:none; }
  .lighting-ui-v2 .lighting-card > summary::after {
    content:'';
    position:absolute;
    right:15px;
    top:50%;
    width:8px;
    height:8px;
    border-right:2px solid #f2f2f2;
    border-bottom:2px solid #f2f2f2;
    transform:translateY(-65%) rotate(45deg);
    transition:transform .18s ease;
  }
  .lighting-ui-v2 .lighting-card[open] > summary::after {
    transform:translateY(-30%) rotate(225deg);
  }
  .lighting-ui-v2 .lighting-card[open] > summary {
    border-bottom:1px solid rgba(255,255,255,.065);
  }
  .lighting-ui-v2 .lighting-group-toggle {
    position:absolute; right:38px; top:50%; transform:translateY(-50%);
    min-width:48px; height:28px; padding:0 9px;
    border:1px solid rgba(255,255,255,.12); border-radius:999px;
    background:rgba(255,255,255,.055); color:#8d949e;
    font:800 9px/1 inherit; letter-spacing:.04em; cursor:pointer;
    z-index:2;
  }
  .lighting-ui-v2 .lighting-group-toggle.on {
    color:#fff; border-color:rgba(255,133,20,.58);
    background:#e8780c; box-shadow:0 2px 9px rgba(255,133,20,.22);
  }
  .lighting-ui-v2 .lighting-card-title {
    color:#fff;
    font-size:13px;
    line-height:1.1;
    font-weight:800;
    letter-spacing:-.01em;
  }
  .lighting-ui-v2 .lighting-card-note {
    display:none;
  }
  .lighting-ui-v2 .lighting-card-body {
    padding:12px 14px 14px;
  }
  .lighting-ui-v2 .lighting-subgroup {
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid rgba(255,255,255,.10);
  }
  .lighting-ui-v2 .lighting-subgroup:first-child {
    margin-top:0;
    padding-top:0;
    border-top:0;
  }
  .lighting-ui-v2 .lighting-subtitle {
    margin:0 0 7px;
    color:#d3d7de;
    font-size:12px;
    font-weight:800;
    letter-spacing:.02em;
    text-transform:uppercase;
  }
  .lighting-ui-v2 .lighting-mini-row {
    min-height:36px;
    margin:5px 0;
    gap:10px;
    color:#d3d7de;
    font-size:11px;
  }
  .lighting-ui-v2 .lighting-mini-row > span:first-child,
  .lighting-ui-v2 .lighting-mini-row > label:first-child {
    min-width:80px;
    font-weight:500;
  }
  .lighting-ui-v2 .lighting-mini-row b {
    min-width:42px;
    color:#b7bdc7;
    font-size:11px;
    font-variant-numeric:tabular-nums;
    text-align:right;
  }
  .lighting-ui-v2 .lighting-mini-row input[type=range] {
    min-width:100px;
    accent-color:#ff8514;
  }
  .lighting-ui-v2 input[type=color] {
    width:42px;
    min-width:42px;
    height:36px;
    padding:4px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:8px;
    background:#262626;
  }
  .lighting-ui-v2 select {
    min-height:38px;
    padding:0 10px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:9px;
    background:#242424;
    color:#fff;
  }
  .lighting-ui-v2 .lighting-presets,
  .lighting-ui-v2 .matcap-presets {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:7px;
  }
  .lighting-ui-v2 .matcap-presets { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .lighting-ui-v2 .lighting-chip {
    min-height:40px;
    padding:7px 5px;
    border-radius:9px;
    border-color:rgba(255,255,255,.10);
    background:rgba(255,255,255,.04);
    color:#c8cdd7;
    font-size:11px;
    font-weight:800;
  }
  .lighting-ui-v2 .lighting-chip.active {
    color:#151515;
    background:#ff8514;
    border-color:#ff8514;
    box-shadow:0 2px 10px rgba(255,133,20,.25);
  }
  .lighting-ui-v2 .sun-preset-row {
    gap:6px;
    margin:8px 0 11px;
  }
  .lighting-ui-v2 .sun-preset-row .lighting-chip {
    min-height:34px;
    padding:6px 2px;
    font-size:9px;
  }
  .lighting-ui-v2 .lighting-toggle-pair {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:10px;
  }
  .lighting-ui-v2 .lighting-toggle-card {
    min-height:44px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 11px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:10px;
    background:rgba(255,255,255,.035);
    color:#c3c8d0;
    font-size:10px;
    font-weight:750;
  }
  .lighting-ui-v2 .lighting-toggle-card input { margin:0; }
  .lighting-ui-v2 .lighting-helper {
    margin-top:8px;
    color:var(--text-dim);
    font-size:9px;
    line-height:1.4;
  }
  .lighting-ui-v2 .lighting-reset-row {
    display:grid;
    grid-template-columns:1fr;
    margin-top:10px;
  }
  .lighting-ui-v2 #lighting-reset {
    min-height:46px;
    margin:0 !important;
    border:1px solid rgba(255,133,20,.30);
    border-radius:11px;
    background:rgba(255,133,20,.10);
    color:#ffae63;
    font-weight:800;
  }
  .lighting-ui-v2 #lighting-reset:active {
    background:#ff8514;
    color:#151515;
  }
  .outline-rename-input {
    flex: 1; min-width: 0;
    background: var(--bg-black); border: 1px solid var(--accent);
    color: var(--text); font-size: 12px; padding: 1px 4px;
    border-radius: 4px; outline: none; font-family: inherit;
  }

  /* Right outliner panel */
  /* Save PNG — floating viewport overlay button, top-right just left of Scene panel */
  .vp-savepng {
    position: absolute;
    top: 6px;
    right: 160px;   /* 152px outliner + 2px join + 6px viewport margin */
    width: 34px; height: 34px;
    background: rgba(18,18,18,0.88);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    color: var(--text);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 7;
    padding: 0;
  }
  .vp-savepng:active { background: rgba(40,40,40,0.95); }
  .vp-savepng svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
  .vp-view-controls {
    position: absolute;
    top: 46px;
    right: 160px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 7;
  }
  .vp-view-lock,
  .vp-saved-view {
    position: relative;
    width: 34px; height: 34px;
    background: rgba(18,18,18,0.88);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    color: var(--text);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    padding: 0;
  }
  .vp-view-lock:active,
  .vp-saved-view:active { background: rgba(40,40,40,0.95); }
  .vp-view-lock.active {
    color: var(--accent);
    background: rgba(255,140,26,0.16);
    border-color: rgba(255,140,26,0.55);
  }
  .vp-view-lock svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
  .vp-view-lock svg[hidden] { display: none !important; }
  .vp-saved-view { color: #fff; font-size: 13px; font-weight: 800; }
  .vp-saved-view.active { color: #111; background: var(--accent); border-color: var(--accent); }
  .vp-view-actions {
    position: absolute;
    top: var(--view-action-top, 0px);
    right: 39px;
    display: none;
    gap: 5px;
    z-index: 2;
  }
  .vp-view-actions.open { display: flex; }
  .vp-view-action {
    width: 34px; height: 34px; padding: 0;
    border: 1px solid rgba(255,255,255,.14); border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; cursor: pointer; box-shadow: 0 3px 12px rgba(0,0,0,.45);
  }
  .vp-view-action svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
  .vp-view-action.add { background: var(--accent-bg); }
  .vp-view-action.delete { background: #b52b2b; }
  .vp-view-action:disabled { opacity: .38; cursor: default; }

  /* Right outliner — push right a little to leave room when collapsed */
  .right-outliner {
    position: absolute;
    top: 6px; right: 6px;
    width: 152px; max-height: 48%;
    background: rgba(18,18,18,0.92);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px; z-index: 7;
    overflow: hidden; display: flex; flex-direction: column;
  }
  .right-outliner.collapsed { width: 40px; }
  .right-outliner.collapsed .outliner-body { display: none; }
  .right-outliner.collapsed .outliner-header span:first-child { display: none; }
  .outliner-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 8px; font-size: 11px; font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,0.06); cursor: pointer;
  }
  .outliner-header svg { width: 12px; height: 12px; }
  .outliner-body { overflow-y: auto; padding: 3px; flex: 1; }
  .outline-item {
    display: flex; align-items: center; gap: 6px;
    padding: 5px 6px; border-radius: 5px; cursor: pointer;
    font-size: 11px; margin-bottom: 1px;
  }
  .outline-item:active { background: rgba(255,255,255,0.05); }
  .outline-item.selected { background: var(--accent-bg); color: white; }
  .outline-item .name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .outline-item .vis { color: var(--text-dim); opacity: 0.7; }
  .outline-item.selected .vis { color: white; opacity: 1; }
  .outline-item .ico { width: 13px; height: 13px; }
  .outline-tree-toggle,
  .outline-tree-spacer {
    width:14px; height:20px; flex:0 0 14px; padding:0; border:0;
    display:grid; place-items:center; background:transparent; color:var(--text-dim);
    font:700 11px/1 system-ui,sans-serif;
  }
  .outline-tree-toggle { cursor:pointer; border-radius:4px; touch-action:manipulation; }
  .outline-tree-toggle:hover,
  .outline-tree-toggle:active { color:#fff; background:rgba(255,255,255,.08); }
  .outline-item.parent-target { outline:1px solid var(--accent); background:rgba(255,143,0,.16); }
  .outliner-new-group {
    width:calc(100% - 6px); min-height:34px; margin:3px 3px 5px; padding:6px 9px;
    border:1px dashed rgba(255,255,255,.18); border-radius:6px; background:rgba(255,255,255,.025);
    color:#ddd; font:700 10px/1 system-ui,sans-serif; text-align:left; cursor:pointer; touch-action:manipulation;
  }
  .outliner-new-group:active { color:#fff; border-color:var(--accent); background:var(--accent-bg); }
  .outline-group-row {
    /* Group rows have two trailing controls, so give the label an explicit
       minmax column instead of letting the generic flex gaps consume it. */
    display:grid;
    grid-template-columns:14px 13px minmax(0,1fr) 16px 22px;
    align-items:center;
    column-gap:4px;
    padding-inline:4px;
    background:rgba(255,255,255,.035);
    font-weight:750;
  }
  .outline-group-row .name {
    min-width:0;
    width:100%;
    color:#eee;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .outline-group-row .ico { justify-self:center; }
  .outline-group-row .vis { width:16px; height:16px; margin:0; }
  .outline-group-row.group-hidden { opacity:.52; }
  .outline-group-menu {
    width:22px; height:28px; min-width:0; padding:0; border:0; border-radius:5px;
    display:grid; place-items:center; color:var(--text-dim); background:transparent;
    font:800 16px/1 system-ui,sans-serif; cursor:pointer; touch-action:manipulation;
  }
  .outline-group-menu:active { color:#fff; background:rgba(255,255,255,.1); }
  .group-action-popover {
    position:fixed; z-index:10020; width:min(220px,calc(100vw - 20px)); padding:6px;
    border:1px solid rgba(255,255,255,.14); border-radius:10px; background:rgba(24,24,24,.98);
    box-shadow:0 14px 40px rgba(0,0,0,.55); backdrop-filter:blur(12px);
  }
  .group-action-popover button {
    width:100%; min-height:40px; padding:8px 10px; border:0; border-radius:7px;
    display:flex; align-items:center; gap:8px; background:transparent; color:#eee;
    font:650 11px/1.2 system-ui,sans-serif; text-align:left; cursor:pointer; touch-action:manipulation;
  }
  .group-action-popover button:active { background:rgba(255,255,255,.08); }
  .group-action-popover button.danger { margin-top:6px; border-top:1px solid rgba(255,255,255,.1); border-radius:0 0 7px 7px; color:#ff7777; }
  .group-chooser-backdrop { position:fixed; inset:0; z-index:10025; background:rgba(0,0,0,.42); }
  .group-chooser {
    position:fixed; left:50%; bottom:max(16px,env(safe-area-inset-bottom)); z-index:10026;
    width:min(330px,calc(100vw - 20px)); max-height:min(62vh,440px); overflow:auto;
    transform:translateX(-50%); padding:10px; border:1px solid rgba(255,255,255,.14);
    border-radius:14px; background:#1d1d1d; box-shadow:0 18px 55px rgba(0,0,0,.62);
  }
  .group-chooser-title { padding:3px 4px 9px; color:#fff; font:800 12px/1.2 system-ui,sans-serif; }
  .group-chooser button { width:100%; min-height:44px; margin:2px 0; padding:9px 10px; border:0; border-radius:8px; background:rgba(255,255,255,.045); color:#eee; font:650 11px/1.2 system-ui,sans-serif; text-align:left; }
  .group-chooser button:active { background:var(--accent-bg); }
  .group-chooser .group-chooser-cancel { margin-top:7px; text-align:center; background:transparent; color:var(--text-dim); }

  /* ===== PROPERTIES PANEL — flex-column so tabs pin, content scrolls ===== */
  .properties-panel {
    background: var(--bg-panel);
    margin: 6px 10px 0;
    border-radius: 12px;
    padding: 0;
    flex-shrink: 0;
    display: flex; flex-direction: column;
    /* height is managed entirely by PanelLayout JS — no hardcoded value */
    min-height: 72px;
    overflow: hidden;
  }
  /* The tab row doubles as the bottom-sheet drag surface. While resizing it
     shows an accent bar + ns-resize cursor. */
  .props-tab-bar.resize-armed {
    background: rgba(255,255,255,0.05);
    box-shadow: inset 0 2px 0 var(--accent);
    cursor: ns-resize;
  }
  .props-inner {
    flex: 1 1 0;          /* fill remaining column space */
    min-height: 0;        /* critical: allows flex child to shrink below content */
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 12px;
    padding-bottom: var(--props-pad-b, 12px);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    font-size: 11px;
    scroll-behavior: smooth;
  }
  .props-inner::-webkit-scrollbar { display: none; }
  .props-empty {
    text-align: center; color: var(--text-dim);
    padding: 14px 0; font-size: 12px;
  }

  /* ===== LEFT TOOLBAR — compact outer tools ===== */
  .left-tools {
    position: absolute;
    top: 8px; bottom: 8px; left: 6px;
    display: flex; flex-direction: column;
    gap: 3px; z-index: 8;
    overflow-y: auto; overflow-x: visible;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    justify-content: center;
    overflow: visible;   /* allow transform-fan to extend beyond the column */
  }
  .left-tools::-webkit-scrollbar { display: none; }
  .left-tool {
    width: 40px;
    background: rgba(18,18,18,0.88);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.07);
    color: var(--text);
    padding: 9px 0;
    border-radius: 8px; cursor: pointer;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 0;
  }
  .left-tool:active { background: rgba(40,40,40,0.95); }
  .left-tool.active { background: var(--accent-bg); color: white; border-color: var(--accent); }
  .left-tool svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
  .left-tool-sep { height: 1px; background: rgba(255,255,255,0.08); margin: 1px 4px; }

  /* Visible names are intentionally limited to the seven permanent viewport
     tools. Popup, fan, paint, sculpt, and radial-menu actions keep their
     existing compact treatment. */
  .left-tool.outer-main-tool,
  .right-action.outer-main-tool {
    width: 62px;
    min-width: 62px;
    min-height: 48px;
    padding: 6px 4px;
    gap: 3px;
  }
  .outer-tool-label {
    max-width: 100%;
    color: rgba(255,255,255,.68);
    font-size: 8.5px;
    font-weight: 650;
    line-height: 1.05;
    letter-spacing: .15px;
    text-align: center;
    white-space: nowrap;
  }
  .outer-main-tool.active .outer-tool-label { color: #fff; }

  /* Transform fan — horizontal strip that flies out to the right of the trigger */
  .transform-fan {
    position: absolute;
    left: calc(100% + 6px);   /* right of the left-tools column */
    display: flex;
    flex-direction: row;
    gap: 4px;
    background: rgba(22,22,22,0.97);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 4px;
    z-index: 900;
    pointer-events: auto;
    /* fly-in from left */
    animation: fan-in .15s cubic-bezier(.34,1.56,.64,1) both;
  }
  @keyframes fan-in {
    from { opacity: 0; transform: translateX(-10px) scale(.88); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
  }
  .transform-fan[hidden] { display: none; }

  /* Transform-session orientation + pivot bar. It belongs to the viewport,
     never the Properties panel, and only exists visually while a transform
     tool is active. */
  .transform-context-bar {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 47;
    display: flex;
    align-items: stretch;
    gap: 5px;
    max-width: calc(100% - 112px);
    padding: 5px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    background: rgba(18,18,18,.94);
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
    backdrop-filter: blur(10px);
    pointer-events: auto;
  }
  .transform-context-bar[hidden] { display: none !important; }
  .tcb-group { display:flex; align-items:center; gap:2px; min-width:0; }
  .tcb-label {
    padding: 0 4px;
    color: var(--text-dim);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .45px;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .tcb-divider { width:1px; margin:2px 1px; background:rgba(255,255,255,.1); }
  .tcb-option {
    min-height: 30px;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font: 600 10px/1 system-ui, sans-serif;
    white-space: nowrap;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .tcb-option:hover { background:rgba(255,255,255,.06); }
  .tcb-option.active {
    color:#fff;
    background:var(--accent-bg);
    border-color:var(--accent);
  }
  .tcb-option:disabled { opacity:.3; cursor:not-allowed; background:transparent; border-color:transparent; }
  .rotation-precision-bar {
    position:absolute;
    top:53px;
    left:50%;
    transform:translateX(-50%);
    z-index:47;
    width:max-content;
    max-width:calc(100vw - 20px);
    min-height:38px;
    display:flex;
    align-items:center;
    gap:4px;
    padding:4px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:10px;
    background:rgba(16,16,17,.96);
    box-shadow:0 7px 22px rgba(0,0,0,.34);
    backdrop-filter:blur(10px);
    white-space:nowrap;
    pointer-events:auto;
  }
  .rotation-precision-bar[hidden] { display:none !important; }
  .rotation-precision-label {
    padding:0 4px;
    color:rgba(255,255,255,.52);
    font:750 9px/1 system-ui,sans-serif;
    letter-spacing:.04em;
    text-transform:uppercase;
  }
  .rotation-axis-options { display:flex; align-items:center; gap:2px; }
  .rotation-axis-button,
  .rotation-step-button {
    min-width:32px;
    height:30px;
    padding:0 7px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:7px;
    background:rgba(255,255,255,.035);
    color:#ddd;
    font:800 10px/1 system-ui,sans-serif;
    cursor:pointer;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  .rotation-axis-button.axis-x { color:#ff6969; }
  .rotation-axis-button.axis-y { color:#63d876; }
  .rotation-axis-button.axis-z { color:#68aaff; }
  .rotation-axis-button.axis-x.active { color:#fff; border-color:#ff5555; background:rgba(255,85,85,.32); }
  .rotation-axis-button.axis-y.active { color:#fff; border-color:#5fcf5f; background:rgba(95,207,95,.30); }
  .rotation-axis-button.axis-z.active { color:#fff; border-color:#4b8fdf; background:rgba(75,143,223,.32); }
  .rotation-precision-divider { width:1px; height:22px; background:rgba(255,255,255,.11); }
  .rotation-step-button {
    min-width:54px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:3px;
    color:#f2f2f2;
  }
  .rotation-step-button span { font-size:16px; line-height:1; }
  .rotation-step-button b { font:800 9px/1 system-ui,sans-serif; }
  .rotation-step-button:not(:disabled):active { color:#111; border-color:var(--accent); background:var(--accent); }
  .rotation-step-button:disabled { opacity:.28; cursor:not-allowed; }
  .rotation-precision-status {
    width:70px;
    overflow:hidden;
    color:rgba(255,255,255,.56);
    font:700 8px/1 system-ui,sans-serif;
    text-align:center;
    text-overflow:ellipsis;
  }
  @media (max-width:420px) {
    .rotation-precision-bar { top:48px; }
    .rotation-precision-label { display:none; }
    .rotation-axis-button { min-width:29px; padding:0 5px; }
    .rotation-step-button { min-width:48px; padding:0 5px; }
    .rotation-precision-status { width:58px; }
  }
  .move-placement-bar {
    position:absolute;
    top:53px;
    left:50%;
    transform:translateX(-50%);
    z-index:47;
    width:max-content;
    max-width:calc(100vw - 20px);
    min-height:38px;
    display:flex;
    align-items:center;
    gap:3px;
    padding:4px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:10px;
    background:rgba(16,16,17,.96);
    box-shadow:0 7px 22px rgba(0,0,0,.34);
    backdrop-filter:blur(10px);
    white-space:nowrap;
    pointer-events:auto;
  }
  .move-placement-bar[hidden] { display:none !important; }
  .move-placement-bar.context-collapsed { top:0; }
  .move-placement-button {
    min-width:68px;
    height:30px;
    padding:0 9px;
    border:1px solid transparent;
    border-radius:7px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    color:#ddd;
    background:transparent;
    font:750 10px/1 system-ui,sans-serif;
    cursor:pointer;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  .move-placement-button:hover { background:rgba(255,255,255,.055); }
  .move-placement-button.active {
    border-color:var(--accent);
    color:#fff;
    background:var(--accent);
  }
  .move-placement-button:disabled { opacity:.28; cursor:not-allowed; }
  .move-placement-icon { font-size:14px; line-height:1; }
  @media (max-width:420px) {
    .move-placement-bar { top:48px; }
    .move-placement-bar.context-collapsed { top:0; }
    .move-placement-button { min-width:62px; padding:0 6px; }
  }
  .mirror-popover { width:164px; }
  .mirror-popover-label { padding:3px 7px 5px; color:var(--text-dim); font:700 8px/1 system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; }
  .mirror-settings-option { margin-top:3px; border-top:1px solid rgba(255,255,255,.08) !important; }
  .repeat-last-control { position:absolute; top:112px; left:50%; z-index:54; transform:translate(-50%,-5px); opacity:0; pointer-events:none; transition:opacity .18s ease,transform .18s ease; }
  .repeat-last-control.show { opacity:1; transform:translate(-50%,0); pointer-events:auto; }
  .repeat-last-button { min-height:30px; max-width:min(260px,calc(100vw - 28px)); padding:5px 11px; border:1px solid rgba(255,166,64,.42); border-radius:999px; background:rgba(25,22,18,.92); color:#ffd09a; box-shadow:0 5px 18px rgba(0,0,0,.28); font:700 10px/1 system-ui,sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; backdrop-filter:blur(8px); }
  .repeat-last-button:hover { background:rgba(57,40,22,.95); border-color:rgba(255,166,64,.72); }
  .snap-popover {
    position:absolute;
    z-index:950;
    width:190px;
    box-sizing:border-box;
    padding:5px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:10px;
    background:rgba(18,18,18,.98);
    box-shadow:0 12px 32px rgba(0,0,0,.42);
    backdrop-filter:blur(12px);
    transform:translateX(-50%);
    pointer-events:auto;
    animation:snap-pop-in .12s ease-out both;
  }
  @keyframes snap-pop-in {
    from { opacity:0; transform:translateX(-50%) translateY(-4px) scale(.98); }
    to { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
  }
  .snap-popover[hidden] { display:none !important; }
  .snap-option {
    width:100%;
    min-height:38px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:8px 10px;
    border:0;
    border-radius:7px;
    background:transparent;
    color:var(--text);
    font:600 11px/1.15 system-ui,sans-serif;
    text-align:left;
    cursor:pointer;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  .snap-option:hover { background:rgba(255,255,255,.07); }
  .snap-option.active { color:#fff; background:var(--accent-bg); }
  .snap-option .snap-check { color:var(--accent); opacity:0; font-size:13px; }
  .snap-option.active .snap-check { opacity:1; }
  .snap-step-row {
    display:flex;
    align-items:center;
    gap:4px;
    margin:2px 4px 5px;
    padding:6px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:8px;
    background:rgba(255,255,255,.035);
  }
  .snap-step-row[hidden] { display:none !important; }
  .snap-step-label {
    margin-right:auto;
    color:var(--text-dim);
    font:700 8px/1 system-ui,sans-serif;
    letter-spacing:.05em;
    text-transform:uppercase;
  }
  .snap-step-option {
    min-width:35px;
    min-height:30px;
    padding:5px 6px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:6px;
    background:rgba(255,255,255,.04);
    color:var(--text);
    font:700 10px/1 system-ui,sans-serif;
    cursor:pointer;
    touch-action:manipulation;
  }
  .snap-step-option.active {
    color:#fff;
    border-color:var(--accent);
    background:var(--accent-bg);
  }
  #snap-ab-hud {
    position:absolute;
    top:124px;
    left:50%;
    z-index:54;
    min-height:42px;
    max-width:calc(100% - 112px);
    box-sizing:border-box;
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 7px 6px 10px;
    border:1px solid rgba(255,138,0,.48);
    border-radius:11px;
    background:rgba(18,18,18,.96);
    color:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.4);
    backdrop-filter:blur(12px);
    transform:translateX(-50%);
    pointer-events:auto;
  }
  #snap-ab-hud[hidden] { display:none !important; }
  .snap-ab-icon {
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
    flex:none;
    border-radius:7px;
    color:var(--accent);
    background:rgba(255,138,0,.12);
  }
  .snap-ab-icon svg { width:15px; height:15px; }
  .snap-ab-copy { min-width:0; display:flex; flex-direction:column; gap:2px; }
  .snap-ab-title { color:var(--text-dim); font:700 8px/1 system-ui,sans-serif; letter-spacing:.09em; text-transform:uppercase; }
  #snap-ab-status { color:#fff; font:700 11px/1.15 system-ui,sans-serif; white-space:nowrap; }
  #snap-ab-detail { color:var(--text-dim); font:500 9px/1.1 system-ui,sans-serif; white-space:nowrap; }
  .snap-ab-actions { display:flex; align-items:center; gap:4px; margin-left:3px; }
  .snap-ab-merge {
    min-height:30px;
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:5px 7px;
    box-sizing:border-box;
    border:1px solid rgba(255,138,0,.42);
    border-radius:7px;
    background:rgba(255,138,0,.09);
    color:#f1f1f1;
    font:700 9px/1 system-ui,sans-serif;
    white-space:nowrap;
    cursor:pointer;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  .snap-ab-merge[hidden] { display:none !important; }
  .snap-ab-merge input {
    width:14px;
    height:14px;
    margin:0;
    accent-color:var(--accent);
    cursor:pointer;
  }
  .snap-ab-merge:has(input:checked) {
    border-color:rgba(255,138,0,.82);
    background:rgba(255,138,0,.2);
    color:#fff;
  }
  .snap-ab-actions button {
    min-height:30px;
    padding:5px 8px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:7px;
    background:rgba(255,255,255,.055);
    color:var(--text);
    font:700 9px/1 system-ui,sans-serif;
    white-space:nowrap;
    cursor:pointer;
    touch-action:manipulation;
  }
  .snap-ab-actions button:hover { background:rgba(255,255,255,.1); color:#fff; }
  #snap-ab-apply { color:#fff; border-color:rgba(42,176,92,.7); background:rgba(42,176,92,.2); }
  #snap-ab-flip { color:#fff; border-color:rgba(64,145,255,.62); background:rgba(64,145,255,.15); }
  #snap-ab-cancel { width:30px; padding:5px; font-size:15px; color:#ffb2aa; }
  #snap-ab-overlay {
    position:absolute;
    inset:0;
    z-index:46;
    overflow:visible;
    pointer-events:none;
  }
  #snap-ab-overlay[hidden] { display:none !important; }
  .snap-ab-loop {
    fill:none;
    stroke-width:4;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.9));
  }
  #snap-ab-loop-a { stroke:#ff970f; }
  #snap-ab-loop-b { stroke:#35cfff; stroke-dasharray:8 5; }
  .snap-ab-point circle { stroke:#fff; stroke-width:2; filter:drop-shadow(0 2px 3px rgba(0,0,0,.8)); }
  #snap-ab-point-a circle { fill:#ff8a00; }
  #snap-ab-point-b circle { fill:#18bde8; }
  .snap-ab-point text { fill:#fff; font:800 10px/1 system-ui,sans-serif; text-anchor:middle; dominant-baseline:central; }
  #snap-ab-overlay.snapped #snap-ab-point-b circle { fill:none; stroke:#35cfff; stroke-width:4; }
  #snap-ab-overlay.snapped #snap-ab-point-b text { transform:translateX(22px); fill:#35cfff; }


  /* Temporary two-point viewport measurement. This overlay is intentionally
     independent from Object Dimensions and never writes to scene geometry. */
  #measure-hud {
    position:absolute;
    top:10px;
    left:50%;
    z-index:52;
    min-height:40px;
    max-width:calc(100% - 112px);
    box-sizing:border-box;
    display:flex;
    align-items:center;
    gap:8px;
    padding:5px 6px 5px 10px;
    border:1px solid rgba(255,176,64,.44);
    border-radius:11px;
    background:rgba(18,18,18,.95);
    color:#fff;
    box-shadow:0 9px 28px rgba(0,0,0,.36);
    backdrop-filter:blur(11px);
    transform:translateX(-50%);
    pointer-events:auto;
  }
  #measure-hud[hidden] { display:none !important; }
  .measure-hud-icon { color:#ffad38; font-size:18px; line-height:1; flex:none; }
  .measure-hud-copy { min-width:0; display:flex; align-items:baseline; gap:7px; white-space:nowrap; }
  .measure-hud-title { font:700 11px/1 system-ui,sans-serif; letter-spacing:.15px; }
  #measure-status { color:#d4d4d4; font:600 10px/1.2 system-ui,sans-serif; overflow:hidden; text-overflow:ellipsis; }
  .measure-hud-actions { display:flex; gap:4px; margin-left:2px; }
  .measure-hud-actions button {
    min-height:30px;
    padding:5px 8px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:7px;
    background:rgba(255,255,255,.055);
    color:#e8e8e8;
    font:700 10px/1 system-ui,sans-serif;
    cursor:pointer;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  .measure-hud-actions button:hover { background:rgba(255,255,255,.1); }
  #measure-cancel { min-width:30px; padding:5px; font-size:15px; }
  #measure-overlay {
    position:absolute;
    inset:0;
    z-index:28;
    width:100%;
    height:100%;
    overflow:hidden;
    pointer-events:none;
  }
  #measure-overlay[hidden] { display:none !important; }
  #measure-line {
    stroke:#ffad38;
    stroke-width:2.25;
    stroke-linecap:round;
    stroke-dasharray:7 5;
    vector-effect:non-scaling-stroke;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.8));
  }
  .measure-point circle { fill:#171717; stroke:#ffad38; stroke-width:2.5; vector-effect:non-scaling-stroke; }
  .measure-point text { fill:#fff; font:700 10px/1 system-ui,sans-serif; text-anchor:middle; dominant-baseline:central; }
  #measure-distance-label {
    position:absolute;
    z-index:30;
    max-width:calc(100% - 24px);
    padding:6px 9px;
    border:1px solid rgba(255,176,64,.62);
    border-radius:8px;
    background:rgba(17,17,17,.96);
    color:#fff;
    box-shadow:0 5px 16px rgba(0,0,0,.38);
    font:800 12px/1 system-ui,sans-serif;
    letter-spacing:.15px;
    white-space:nowrap;
    transform:translate(-50%,-50%);
    pointer-events:none;
  }
  #measure-distance-label[hidden] { display:none !important; }


  /* Guided Object Parenting picker. It shares the compact viewport language
     used by Snap and Measure while remaining a separate, temporary workflow. */
  #parenting-hud {
    position:absolute; top:72px; left:50%; z-index:55;
    min-height:42px; max-width:calc(100% - 24px); padding:6px 7px 6px 10px;
    display:flex; align-items:center; gap:8px;
    border:1px solid rgba(255,143,0,.42); border-radius:10px;
    background:rgba(18,18,20,.94); color:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.4); backdrop-filter:blur(12px);
    transform:translateX(-50%); pointer-events:auto;
  }
  #parenting-hud[hidden] { display:none !important; }
  .parenting-hud-icon { color:var(--accent); font-size:18px; line-height:1; flex:none; }
  .parenting-hud-copy { min-width:0; display:flex; flex-direction:column; gap:2px; }
  #parenting-status { font:750 11px/1.1 system-ui,sans-serif; white-space:nowrap; }
  #parenting-detail { color:var(--text-dim); font:600 9px/1.15 system-ui,sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px; }
  .parenting-hud-actions { display:flex; gap:4px; margin-left:2px; }
  .parenting-hud-actions button {
    min-height:30px; padding:5px 8px; border:1px solid rgba(255,255,255,.12);
    border-radius:7px; background:rgba(255,255,255,.055); color:#eee;
    font:700 10px/1 system-ui,sans-serif; cursor:pointer; touch-action:manipulation;
  }
  #parenting-confirm:not(:disabled) { border-color:var(--accent); background:var(--accent-bg); color:#fff; }
  .parenting-hud-actions button:disabled { opacity:.38; cursor:default; }



  /* ── Brush / tool settings popup (texture paint mode) ── */
  .tpaint-tool-popup {
    position: absolute;
    left: calc(100% + 8px);
    top: 0;
    width: 230px;
    background: rgba(18,18,18,0.97);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 12px;
    padding: 14px;
    z-index: 900;
    pointer-events: auto;
    animation: fan-in .15s cubic-bezier(.34,1.56,.64,1) both;
  }
  .tpaint-tool-popup[hidden] { display: none !important; }
  /* Sculpt's tool list scrolls vertically on compact screens. Keep its one
     shared popup in the overflow-visible toolbar layer so it is not clipped. */
  #sculpt-popup {
    width: min(300px, calc(100vw - 72px));
    max-height: calc(100vh - 16px);
    box-sizing: border-box;
    overflow-y: auto;
    padding: 7px;
  }
  #sculpt-popup .popup-title {
    display:flex;
    align-items:center;
    min-height:27px;
    margin:0 0 4px;
    padding:0 3px;
    font-size:9px;
    letter-spacing:.35px;
  }
  .sculpt-popup-tabs {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    margin-bottom:4px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.09);
    border-radius:7px;
    background:#19191a;
  }
  .sculpt-popup-tabs button {
    min-width:0;
    min-height:30px;
    padding:4px 5px;
    border:0;
    border-bottom:2px solid transparent;
    color:var(--text-dim);
    background:transparent;
    cursor:pointer;
    font:700 9px/1 system-ui,sans-serif;
  }
  .sculpt-popup-tabs button + button { border-left:1px solid rgba(255,255,255,.06); }
  .sculpt-popup-tabs button.active {
    color:var(--accent);
    border-bottom-color:var(--accent);
    background:rgba(245,132,0,.10);
  }
  .sculpt-popup-section { animation:sculpt-popup-enter 140ms ease-out both; }
  .sculpt-popup-control-row,
  .sculpt-popup-field-row,
  .sculpt-popup-toggle-row {
    display:grid;
    grid-template-columns:76px minmax(0,1fr) 44px;
    align-items:center;
    gap:5px;
    min-height:31px;
    box-sizing:border-box;
    padding:3px 2px;
    border-bottom:1px solid rgba(255,255,255,.055);
  }
  .sculpt-popup-field-row,
  .sculpt-popup-toggle-row { grid-template-columns:76px minmax(0,1fr); }
  .sculpt-popup-control-row > span,
  .sculpt-popup-field-row > span,
  .sculpt-popup-toggle-row > span {
    min-width:0;
    color:var(--text-dim);
    font:650 9px/1.15 system-ui,sans-serif;
  }
  #sculpt-popup .sculpt-popup-control-row input[type=range] {
    width:100%;
    min-width:0;
    margin:0;
  }
  .sculpt-popup-control-row strong {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    min-height:25px;
    padding:0 5px;
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,.10);
    border-radius:5px;
    color:#ddd;
    background:rgba(255,255,255,.045);
    font:700 8px/1 system-ui,sans-serif;
    white-space:nowrap;
  }
  .sculpt-popup-field-row select {
    width:100%;
    min-width:0;
    height:27px;
    padding:2px 6px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:5px;
    color:#e6e6e6;
    background:#29292a;
    font:650 9px/1 system-ui,sans-serif;
  }
  .sculpt-popup-toggle-row .toggle-switch { justify-self:end; }
  .sculpt-popup-reset-row { padding:5px 2px 1px; }
  .sculpt-popup-reset-row .btn {
    width:100%;
    min-height:29px;
    padding:4px 7px;
    font-size:9px;
  }
  .sculpt-popup-empty {
    display:grid;
    place-items:center;
    min-height:58px;
    color:var(--text-dim);
    font:650 9px/1.3 system-ui,sans-serif;
  }
  @keyframes sculpt-popup-enter {
    from { opacity:0; transform:translateX(5px); }
    to { opacity:1; transform:translateX(0); }
  }
  @media (prefers-reduced-motion:reduce) {
    .sculpt-popup-section { animation:none; }
  }

  .tpaint-tool-popup .popup-title {
    font-size:10px;font-weight:700;color:var(--accent);
    text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;
  }
  .tpaint-tool-popup .prow {
    display:flex;flex-direction:column;gap:4px;margin-bottom:12px;
  }
  .tpaint-tool-popup .prow:last-child { margin-bottom:0; }
  .tpaint-tool-popup .plabel {
    display:flex;justify-content:space-between;
    font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.4px;
  }
  .tpaint-tool-popup input[type=range] { width:100%; }
  .tpaint-color-tool { position:relative; }
  .tpaint-color-tool-swatch {
    width:22px; height:22px; border-radius:6px;
    border:2px solid rgba(255,255,255,.75);
    box-shadow:0 0 0 1px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.18);
    pointer-events:none;
  }
  .tpaint-color-popup {
    top:auto; bottom:0; width:230px;
  }
  .tpaint-color-popup .paint-color-swatch-large {
    width:40px; height:40px; border-radius:8px;
    border:1.5px solid rgba(255,255,255,.25); flex-shrink:0;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);
  }
  .tpaint-color-popup .paint-hue-strip {
    flex:1; height:40px; border-radius:8px;
    background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
    cursor:pointer;
  }
  .compact-check-row { margin-bottom: 8px !important; }
  .compact-check, .prop-mini-check {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 700; color: var(--text-dim);
    line-height: 1; user-select: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .compact-check input, .prop-mini-check input {
    width: 15px; height: 15px; margin: 0; flex-shrink: 0;
    accent-color: var(--accent);
  }
  .compact-check:has(input:checked), .prop-mini-check:has(input:checked) { color: var(--text); }
  .prop-mini-row {
    display: flex; align-items: center;
    margin: 4px 0 7px;
  }
  .fan-tool {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 8px !important; min-width: 44px;
  }
  .fan-tool span {
    font-size: 9px; font-weight: 600; letter-spacing: 0.3px;
    text-transform: uppercase; opacity: .75;
  }

  /* ===== RIGHT ACTIONS — compact outer tools ===== */
  .right-actions {
    position: absolute;
    bottom: 10px; right: 6px;
    display: flex; flex-direction: column;
    align-items: flex-end;   /* hug the right edge — buttons align with the gizmo, no dead space */
    gap: 3px; z-index: 7;
  }
  .axis-gizmo { width: 54px; height: 54px; z-index: 6; pointer-events: auto; flex-shrink: 0;
  cursor: pointer; border-radius: 50%; transition: background 0.15s; }
.axis-gizmo:hover { background: rgba(255,255,255,0.06); }
.object-origin-marker {
  --origin-marker-size: 9px;
  position:absolute;
  left:0; top:0;
  width:var(--origin-marker-size); height:var(--origin-marker-size);
  transform:translate(-50%,-50%);
  box-sizing:border-box;
  border:1.5px solid rgba(14,14,14,.92);
  border-radius:50%;
  background:#ff8a00;
  box-shadow:0 1px 3px rgba(0,0,0,.62);
  z-index:8;
  pointer-events:none;
  display:none;
}
/* The object origin is a restrained scene datum, not an aiming cursor. */
.object-origin-marker::before,.object-origin-marker::after { content:none; }
.object-origin-marker[data-edit="true"] {
  background:#ff9d2e;
  box-shadow:0 0 0 2px rgba(255,138,0,.26),0 1px 3px rgba(0,0,0,.66);
}
.axis-gizmo-hit { pointer-events: all; }

/* ── Gizmo long-press view picker ───────────────────────────────────────────
   A compact dark panel listing all camera presets.  Appears to the left of
   the gizmo when the user holds their finger on it for 500 ms.               */
#gizmo-view-picker {
  position: fixed;
  z-index: 900;
  background: rgba(16,16,16,0.96);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 4px;
  display: none;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  animation: gvp-in 0.16s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes gvp-in {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
#gizmo-view-picker[data-open] { display: flex; }
.gvp-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 600; color: var(--text);
  cursor: pointer; border: none; background: transparent;
  text-align: left; width: 100%;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.1s;
}
.gvp-item:hover, .gvp-item:active { background: rgba(255,255,255,0.1); }
.gvp-item.active { background:var(--accent-bg); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,143,0,.48); }
.gvp-label { color: rgba(255,255,255,0.4); font-size: 10px; font-weight: 700;
  letter-spacing: 0.8px; text-transform: uppercase;
  padding: 6px 12px 2px; pointer-events: none; }
.gvp-sep { height: 1px; background: rgba(255,255,255,0.06); margin: 2px 4px; }
.gvp-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
  .right-action {
    width: 40px;
    background: rgba(18,18,18,0.88);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.07);
    color: var(--text); padding: 8px 0;
    border-radius: 8px; cursor: pointer;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 0;
  }
  .right-action:active { background: rgba(40,40,40,0.95); }
  .right-action.active { background: var(--accent-bg); color: white; }
  .right-action.local-view-active {
    background: var(--accent-bg);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(255,149,0,.32), 0 0 14px rgba(255,149,0,.24);
  }
  .right-action svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }
  .props-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .props-header .props-title {
    font-weight: 700; font-size: 13px;
    color: var(--accent);
    flex: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .props-header .props-meta {
    font-size: 10px; color: var(--text-dim);
    flex-shrink: 0;
  }
  .props-grid {
    display: grid;
    grid-template-columns: auto 1fr 1fr 1fr;
    gap: 4px 6px;
    align-items: center;
  }
  .props-grid .props-label {
    font-size: 11px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.55px;
    padding-right: 4px;
  }
  .props-num {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.04);
    color: var(--text);
    border-radius: 6px;
    padding: 5px 6px;
    font-size: 11px;
    font-family: ui-monospace, monospace;
    text-align: right;
    width: 100%;
    min-width: 0;
    font-variant-numeric: tabular-nums;
  }
  .props-num:focus { outline: 1px solid var(--accent); }
  .props-axis-x { color: #ff6b6b; }
  .props-axis-y { color: #5fcf5f; }
  .props-axis-z { color: #5b9eff; }

  /* Prim-btn is still used inside the Create sheet's primitives row */
  .prim-btn {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.10);
    color: var(--text);
    border-radius: 10px;
    padding: 8px 6px;
    width: 64px;
    min-width: 64px;
    display: flex; flex-direction: column;
    align-items: center; gap: 4px;
    font-size: 10px;
    cursor: pointer;
  }
  .prim-btn:active { background: var(--bg-card-hover); }
  .prim-btn svg { width: 30px; height: 30px; stroke: currentColor; fill: none; stroke-width: 1.5; }
  .prim-row {
    display: flex; gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .prim-row::-webkit-scrollbar { display: none; }

  /* Create tab accent — orange pill */
  .tab-create.active {
    color: white !important;
    background: var(--accent-bg) !important;
    border-radius: 6px !important;
    border-color: transparent !important;
  }
  .tab-create.active svg { color: white; }

  /* ===== SUB-TABS (inside the bottom panel, switches sections) ===== */
  /* Sub-tab bar outer container — sits between the main tab bar and the
     scrollable props-inner.  flex-shrink: 0 keeps it at its natural height
     so it never gets squeezed by the content panel growing. */
  #subtab-bar-outer {
    flex-shrink: 0;
    background: var(--bg-panel);
  }
  /* When inside the outer (non-scrolling) container, remove the bottom margin
     that was previously used to separate the bar from scrollable content — the
     padding on props-inner handles that gap instead. */
  #subtab-bar-outer .subtab-bar {
    margin-bottom: 0;
  }

  .subtab-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .subtab-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-dim);
    padding: 10px 6px 12px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .subtab-btn:active { background: var(--bg-card); }
  .subtab-btn.active {
    color: var(--text);
    border-bottom-color: var(--accent);
  }
  .subtab-btn svg {
    width: 16px; height: 16px;
    stroke: currentColor; fill: none; stroke-width: 2;
  }
  .subtab-btn.active svg.icon-plus,
  .subtab-btn.active .icon-orange { color: var(--accent); }

  /* ===== SECTION TITLE ROW (label + see-all link) ===== */
  .section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }
  .section-title {
    font-size: 11px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.55px;
    font-weight: 700;
  }
  .see-all {
    color: var(--accent);
    font-size: 11px;
    cursor: pointer;
    font-weight: 600;
    -webkit-tap-highlight-color: transparent;
  }
  .see-all:active { opacity: 0.7; }

  /* ===== PRIMITIVE CARDS (image-mockup style) ===== */
  .prim-card-row {
    display: flex; gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .prim-card-row::-webkit-scrollbar { display: none; }
  .prim-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
  }
  .prim-card {
    background: var(--bg-card);
    border: 2px solid transparent;
    color: var(--text);
    border-radius: 10px;
    padding: 12px 8px;
    min-width: 80px;
    width: 80px;
    display: flex; flex-direction: column;
    align-items: center; gap: 6px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .prim-card-grid .prim-card { width: auto; }
  .prim-card:active { background: var(--bg-card-hover); }
  .prim-card.active {
    z-index: 2;
    border-color: transparent;
    background: rgba(232, 125, 13, 0.08);
    box-shadow: inset 0 0 0 2px var(--accent);
  }
  .prim-card.active .prim-card-icon { color: var(--accent); }
  .prim-card-icon svg { width: 36px; height: 36px; stroke: currentColor; fill: none; stroke-width: 1.5; }
  .prim-card-label { font-size: 11px; font-weight: 500; }
  /* Rewarded-ad lock badge + "Watch ad" hint on premium (locked) model cards */
  .prim-card, .prim-btn { position: relative; }
  .prim-card-badge {
    position: absolute;
    top: 3px; right: 4px;
    font-size: 12px; line-height: 1;
    pointer-events: none;
    filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.7));
  }
  .prim-card-hint {
    display: block;
    margin-top: 2px;
    font-size: 9px; font-weight: 600; line-height: 1;
    color: var(--accent);
    letter-spacing: 0.2px;
    pointer-events: none;
    white-space: nowrap;
  }
  .prim-btn .prim-card-hint { margin-top: 1px; }
  .prim-locked .prim-card-icon { opacity: 0.55; }

  /* Modifier rows (collapsed) + cards (expanded) */
  .mod-list {
    display: flex; flex-direction: column;
    gap: 6px;
  }
  .mod-row {
    background: var(--bg-card);
    border: none;
    color: var(--text);
    padding: 12px 14px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
  }
  .mod-row:active { background: var(--bg-card-hover); }
  .mod-row[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .mod-row-name { flex: 1; }
  .mod-row-arrow {
    color: var(--text-dim);
    font-size: 11px;
  }
  .mod-icon-wrap {
    color: var(--accent);
    font-size: 16px;
    width: 20px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .mod-card {
    background: var(--bg-card);
    border-radius: 10px;
    overflow: hidden;
  }
  .mod-card.mod-card-off .mod-card-body { opacity: 0.45; }
  .mod-card.mod-card-off .mod-card-name { color: var(--text-dim); }
  .mod-card-header {
    display: flex;
    align-items: center;
    padding: 10px 8px 10px 14px;
    gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
  }
  .mod-card-name {
    flex: 1;
    font-weight: 600;
    font-size: 13px;
  }
  .mod-btn-icon {
    width: 28px; height: 28px;
    background: transparent;
    border: none;
    color: var(--text-dim);
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
  }
  .mod-btn-icon:active { background: rgba(255,255,255,0.08); color: var(--text); }
  .mod-btn-icon.danger:active { color: #ff7878; }
  .mod-card-body {
    padding: 12px 14px 14px;
  }

  /* Horizontal Blender-style strip: + button on the left, picker (when open)
     next to it, then one card per added modifier. Scrolls horizontally when
     the stack gets long. */
  .mod-stack-row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: visible;
    padding: 4px 4px 12px 4px;
    margin: 0 -4px;
    -webkit-overflow-scrolling: touch;
    align-items: flex-start;
  }
  .mod-stack-row > * { flex-shrink: 0; }
  .mod-stack-row .mod-card {
    width: 260px;
  }
  .mod-add-card {
    width: 110px;
    min-height: 160px;
    border: 1px dashed rgba(255,216,61,0.45);
    background: rgba(255,216,61,0.06);
    color: var(--accent);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
    padding: 12px 8px;
  }
  .mod-add-card:active { background: rgba(255,216,61,0.14); }
  .mod-add-card[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    border-color: rgba(255,255,255,0.12);
    color: var(--text-dim);
    background: transparent;
  }
  .mod-add-plus { font-size: 26px; line-height: 1; }
  .mod-add-label { font-size: 12px; }

  /* ----- MATERIAL panel ----- */
  .mat-panel-grid {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 14px;
    align-items: start;
  }


  .mat-right {
    background: rgba(255,255,255,0.02);
    border-radius: 12px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.09);
  }
  .mat-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
  }
  .mat-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.09);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.1s;
  }
  .mat-row:active { background: rgba(255,255,255,0.05); }
  .mat-row.active {
    background: rgba(232,125,13,0.06);
    border-color: rgba(232,125,13,0.2);
  }
  /* Top part of each row: sphere thumb + spacer + delete */
  .mat-row-header {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .mat-row-header .mat-thumb { flex-shrink: 0; }
  .mat-row-spacer { flex: 1; }
  /* Large sphere thumbnail (square card) */
  .mat-thumb {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background: #141414;
    border: 2px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.15s;
  }
  .mat-row.active .mat-thumb {
    border-color: var(--accent);
  }
  /* CSS sphere inside the thumbnail — same gradient trick as preset spheres */
  .mat-thumb-sphere {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--swatch, #cccccc);
    background-image:
      radial-gradient(circle at 30% 25%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 38%),
      radial-gradient(circle at 70% 80%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 50%);
    box-shadow: 0 2px 8px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.05);
    transition: transform 0.1s;
  }
  .mat-thumb-sphere.metal {
    background-image:
      radial-gradient(circle at 30% 20%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 22%),
      radial-gradient(circle at 35% 88%, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 16%),
      radial-gradient(circle at 75% 78%, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0) 45%);
  }
  .mat-thumb-sphere.glass {
    background-image:
      radial-gradient(circle at 30% 25%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 28%),
      radial-gradient(circle at 70% 78%, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 14%),
      radial-gradient(circle at 50% 100%, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 30%);
    opacity: 0.78;
  }
  .mat-thumb-sphere.emissive {
    background-image:
      radial-gradient(circle at 50% 50%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 40%);
    box-shadow: 0 0 16px var(--swatch), 0 2px 6px rgba(0,0,0,0.3);
  }
  .mat-name {
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    transition: color 0.15s;
    padding: 0 2px 2px;
  }
  .mat-row.active .mat-name { color: var(--accent); }
  /* Trash-only delete button */
  .mat-row-btn {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    color: var(--text-dimmer);
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    transition: color 0.1s, background 0.1s;
  }
  .mat-row-btn:active { background: rgba(255,255,255,0.07); color: var(--text-dim); }
  .mat-row-btn.danger:active { color: #ff7878; background: rgba(255,100,100,0.08); }
  .mat-row-btn svg { width: 15px; height: 15px; }
  /* Square "+" new-material button */
  .mat-new-btn {
    width: 34px;
    height: 34px;
    background: transparent;
    border: 2px solid var(--accent);
    border-radius: 8px;
    color: var(--accent);
    font-size: 22px;
    line-height: 1;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .mat-new-btn:active { background: rgba(232,125,13,0.14); }
  .section-action {
    background: transparent;
    border: 1px solid rgba(255,216,61,0.45);
    color: var(--accent);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .section-action:active { background: rgba(255,216,61,0.08); }
  .collapse-toggle {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.06);
    color: var(--text);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
    text-align: left;
  }
  .collapse-toggle:active { background: rgba(255,255,255,0.04); }
  .collapse-arrow {
    display: inline-block;
    width: 12px;
    color: var(--text-dim);
    font-size: 10px;
  }
  .collapse-meta {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-dim);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
  }
  .collapse-body {
    padding: 10px 4px 4px;
  }
  /* Preset gallery — CSS-shaded "spheres" so users can recognize the look
     before applying. Four variants (matte/metal/glass/emissive) use different
     gradient stacks to fake reflection/specular/translucency cheaply. */
  .mat-preset-spheres {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: 12px;
    margin-top: 8px;
  }
  .mat-preset-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    color: var(--text);
  }
  .mat-preset-card:active .mat-preset-sphere { transform: scale(0.94); }
  .mat-preset-sphere {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--swatch);
    background-image:
      radial-gradient(circle at 30% 25%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 38%),
      radial-gradient(circle at 70% 80%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 50%);
    box-shadow: 0 2px 8px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.05);
    transition: transform 0.15s ease;
  }
  .mat-preset-sphere.metal {
    background-image:
      radial-gradient(circle at 30% 20%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 22%),
      radial-gradient(circle at 35% 88%, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 16%),
      radial-gradient(circle at 75% 78%, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0) 45%);
  }
  .mat-preset-sphere.glass {
    background-image:
      radial-gradient(circle at 30% 25%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 28%),
      radial-gradient(circle at 70% 78%, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 14%),
      radial-gradient(circle at 50% 100%, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 30%);
    opacity: 0.78;
  }
  .mat-preset-sphere.emissive {
    background-image:
      radial-gradient(circle at 50% 50%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 40%);
    box-shadow: 0 0 18px var(--swatch), 0 2px 6px rgba(0,0,0,0.3);
  }
  .mat-preset-label {
    font-size: 11px;
    color: var(--text);
    text-align: center;
    line-height: 1.2;
  }

  .mod-picker-card {
    width: 170px;
    background: var(--bg-card);
    border: 1px solid rgba(255,216,61,0.25);
    border-radius: 10px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .mod-picker-title {
    font-size: 11px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 4px 6px;
  }
  .mod-picker-btn {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    color: var(--text);
    padding: 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mod-picker-btn:active {
    background: rgba(255,216,61,0.14);
    border-color: var(--accent);
  }

  /* Compact info bar at top of the panel */
  .panel-info {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0 2px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 12px;
  }
  .panel-info .pi-name {
    font-weight: 700;
    font-size: 13px;
    color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .panel-info .pi-meta {
    font-size: 11px;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }

  /* ===== EDIT-MODE OPERATIONS: horizontal scrolling tool buttons ===== */
  .op-row {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    margin-bottom: 4px;
  }
  .op-row::-webkit-scrollbar { display: none; }
  .op-btn {
    background: var(--bg-card);
    border: 2px solid transparent;
    color: var(--text);
    border-radius: 10px;
    padding: 8px 14px;
    min-width: 78px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .op-btn:active { background: var(--bg-card-hover); }
  .op-btn.active {
    border-color: var(--accent);
    background: rgba(232, 125, 13, 0.10);
    color: var(--accent);
  }
  .op-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
  }
  .op-icon {
    font-size: 16px;
    line-height: 1;
  }
  .op-hint {
    color: var(--text-dim);
    font-size: 11px;
    margin-bottom: 8px;
    padding: 6px 2px;
  }
  /* Smart Edit lives in the existing Edit pie + bottom tool sheet. It is a
     launcher only: every action below delegates to Minder's existing tools. */
  .smart-edit-shell { width: 100%; }
  .smart-edit-heading {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 8px;
  }
  .smart-edit-title { color: var(--text); font-size: 14px; font-weight: 800; }
  .smart-edit-context {
    color: var(--text-dim); font-size: 10px; margin-top: 2px;
  }
  .smart-edit-close {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px;
    border: 1px solid rgba(255,255,255,.09); background: var(--bg-card);
    color: var(--text); font-size: 20px; cursor: pointer;
  }
  .smart-edit-label {
    color: var(--text-dim); font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .55px; margin: 2px 0 6px;
  }
  .smart-edit-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 7px;
  }
  .smart-edit-action {
    min-height: 50px; padding: 7px 8px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,.09); background: var(--bg-card);
    color: var(--text); cursor: pointer; text-align: left;
    display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: center;
    column-gap: 7px; -webkit-tap-highlight-color: transparent;
  }
  .smart-edit-action:active {
    background: var(--accent-bg); border-color: var(--accent); color: #fff;
  }
  .smart-edit-action-icon { font-size: 18px; text-align: center; }
  .smart-edit-action-name { display: block; font-size: 11px; font-weight: 800; }
  .smart-edit-action-why {
    display: block; margin-top: 2px; color: var(--text-dim);
    font-size: 9px; line-height: 1.2;
  }
  .smart-edit-action:active .smart-edit-action-why { color: rgba(255,255,255,.72); }
  .smart-edit-empty {
    padding: 12px; border-radius: 10px; background: var(--bg-card);
    color: var(--text-dim); font-size: 11px; text-align: center;
  }
  .mesh-cleanup-shell { width: 100%; }
  .mesh-cleanup-summary {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 10px; margin-bottom: 8px;
  }
  .mesh-cleanup-title { color: var(--text); font-size: 14px; font-weight: 800; }
  .mesh-cleanup-meta { color: var(--text-dim); font-size: 9px; margin-top: 2px; }
  .mesh-cleanup-found {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 5px; margin-bottom: 8px;
  }
  .mesh-cleanup-found-item {
    padding: 6px 8px; border-radius: 8px; background: var(--bg-card);
    color: var(--text); font-size: 10px; line-height: 1.25;
  }
  .mesh-cleanup-found-item strong { color: var(--accent); }
  .mesh-cleanup-options {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
    gap: 5px; margin-bottom: 9px;
  }
  .mesh-cleanup-option {
    min-height: 34px; padding: 6px 8px; border-radius: 8px;
    background: rgba(255,255,255,.035); color: var(--text);
    display: flex; align-items: center; gap: 7px; font-size: 10px;
    cursor: pointer;
  }
  .mesh-cleanup-option input { accent-color: var(--accent); width: 16px; height: 16px; }
  .mesh-cleanup-actions { display: flex; justify-content: flex-end; gap: 7px; }
  .mesh-cleanup-actions .btn { min-height: 36px; }
  .mesh-cleanup-clean {
    padding: 12px; border-radius: 10px; background: rgba(42,157,93,.12);
    border: 1px solid rgba(42,157,93,.32); color: #9be7bd;
    text-align: center; font-size: 12px; font-weight: 700; margin-bottom: 9px;
  }
  .mesh-cleanup-warning {
    color: #ffc07a; font-size: 9px; line-height: 1.35; margin: 5px 1px 8px;
  }
  .loop-tools-shell { width: 100%; }
  .loop-tools-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(102px, 1fr));
    gap: 7px; margin: 7px 0 9px;
  }
  .loop-tool-card {
    min-height: 48px; padding: 7px; border-radius: 10px;
    border: 1px solid rgba(255,255,255,.09); background: var(--bg-card);
    color: var(--text); cursor: pointer; display: flex; align-items: center;
    gap: 7px; text-align: left; -webkit-tap-highlight-color: transparent;
  }
  .loop-tool-card:active { background: var(--accent-bg); border-color: var(--accent); }
  .loop-tool-card .loop-tool-icon { width: 24px; text-align: center; font-size: 18px; }
  .loop-tool-card strong { display: block; font-size: 11px; }
  .loop-tool-card small { display: block; color: var(--text-dim); font-size: 8px; margin-top: 2px; }
  .loop-tools-controls { display: grid; gap: 7px; margin: 7px 0 9px; }
  .loop-tools-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    min-height: 32px; padding: 5px 7px; border-radius: 8px;
    background: rgba(255,255,255,.035); color: var(--text); font-size: 10px;
  }
  .loop-tools-toggle input { accent-color: var(--accent); width: 16px; height: 16px; }
  .loop-tools-plane { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .loop-tools-plane button {
    min-height: 32px; border-radius: 8px; border: 1px solid rgba(255,255,255,.09);
    background: var(--bg-card); color: var(--text); font-size: 10px; cursor: pointer;
  }
  .loop-tools-plane button.active { background: var(--accent-bg); border-color: var(--accent); color: #fff; }
  .smart-align-shell { width: 100%; }
  .smart-align-section { margin: 7px 0 9px; }
  .smart-align-section-title { margin-bottom: 3px; color: var(--text); font-size: 11px; font-weight: 800; }
  .smart-align-section-note { margin: 2px 0 6px; color: var(--text-dim); font-size: 9px; line-height: 1.35; }
  .smart-align-subtitle { margin-top: 8px; }
  .smart-align-buttons { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
  .smart-align-buttons.reference { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .smart-align-buttons button,
  .smart-align-action {
    min-height: 36px; padding: 6px 7px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,.09); background: var(--bg-card);
    color: var(--text); cursor: pointer; font-size: 10px; font-weight: 700;
  }
  .smart-align-buttons button.active,
  .smart-align-action.active { background: var(--accent-bg); border-color: var(--accent); color: #fff; }
  .smart-align-action-grid {
    display: grid; grid-template-columns: repeat(auto-fit,minmax(116px,1fr));
    gap: 6px; margin-top: 6px;
  }
  .smart-align-action small { display:block; margin-top:2px; color:var(--text-dim); font-size:8px; font-weight:500; }
  .smart-align-action.active small { color:rgba(255,255,255,.72); }
  .smart-align-footer { display:flex; justify-content:flex-end; gap:7px; margin-top:9px; }
  .smart-align-footer button { min-width:82px; min-height:34px; }
  /* Drop to Ground is a compact live-preview editor, not a second menu. */
  .properties-panel.panel-drop-ground-compact {
    height:calc(clamp(150px,18dvh,168px) + env(safe-area-inset-bottom)) !important;
    max-height:calc(clamp(150px,18dvh,168px) + env(safe-area-inset-bottom)) !important;
  }
  .drop-ground-panel { position:relative; width:100%; }
  .drop-ground-rows {
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    border-radius:8px;
    background:rgba(255,255,255,.018);
  }
  .drop-ground-row {
    min-height:38px;
    display:grid;
    grid-template-columns:minmax(72px,1fr) auto;
    align-items:center;
    gap:8px;
    padding:3px 5px 3px 9px;
  }
  .drop-ground-row + .drop-ground-row { border-top:1px solid rgba(255,255,255,.07); }
  .drop-ground-row label { color:#c7c7c7; font-size:10px; font-weight:700; }
  .drop-ground-target-value {
    max-width:150px;
    overflow:hidden;
    color:#e9e9e9;
    font:700 10px/1 system-ui,sans-serif;
    text-align:right;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .drop-ground-target-value.waiting { color:var(--accent); }
  .drop-ground-control {
    display:grid;
    grid-template-columns:28px minmax(62px,82px) 28px;
    align-items:center;
    gap:3px;
  }
  .drop-ground-step,
  .drop-ground-input {
    height:29px;
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,.09);
    border-radius:6px;
    background:rgba(8,8,9,.72);
    color:#e7e7e7;
  }
  .drop-ground-step {
    padding:0;
    font:700 15px/1 system-ui,sans-serif;
    cursor:pointer;
    touch-action:manipulation;
  }
  .drop-ground-step:active { color:#111; border-color:var(--accent); background:var(--accent); }
  .drop-ground-input {
    width:100%;
    min-width:0;
    padding:0 7px;
    font:700 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
    text-align:right;
    appearance:textfield;
  }
  .drop-ground-input::-webkit-inner-spin-button,
  .drop-ground-input::-webkit-outer-spin-button { appearance:none; margin:0; }
  .drop-ground-input:focus { outline:1px solid rgba(255,138,0,.62); border-color:transparent; }
  @media (orientation:landscape) and (max-width:900px) {
    .properties-panel.panel-drop-ground-compact {
      height:clamp(148px,30dvh,166px) !important;
      max-height:clamp(148px,30dvh,166px) !important;
    }
  }
  @media (max-width:370px) {
    .drop-ground-row { grid-template-columns:68px auto; padding-left:7px; }
    .drop-ground-control { grid-template-columns:27px minmax(56px,72px) 27px; }
    .drop-ground-target-value { max-width:112px; }
  }
  .smart-apply-warning { margin-top:7px; padding:7px 8px; border:1px solid rgba(255,174,66,.35); border-radius:8px; background:rgba(255,174,66,.08); color:#ffd39a; font-size:9px; line-height:1.4; }
  .smart-apply-warning strong { display:block; margin-bottom:3px; color:#ffbd67; font-size:10px; }
  .smart-apply-warning ul { margin:0; padding-left:15px; }
  .smart-apply-warning.blocked { border-color:rgba(255,82,82,.4); background:rgba(255,82,82,.09); color:#ffb5b5; }
  /* Individual toggle row (Extrude / Inset tool properties) */
  .op-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    margin: 2px 2px 12px;
  }
  .op-toggle-row .op-toggle-label {
    font-size: 12px; color: var(--text); font-weight: 600;
  }
  .op-switch {
    position: relative; width: 42px; height: 24px; flex-shrink: 0;
    border: none; border-radius: 12px; padding: 0; cursor: pointer;
    background: rgba(255,255,255,0.16);
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .op-switch.on { background: var(--accent); }
  .op-switch .knob {
    position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
    border-radius: 50%; background: #fff;
    transition: transform 0.15s;
  }
  .op-switch.on .knob { transform: translateX(18px); }

  /* Submode cluster — secondary block (position set by primary block above) */
  .submode-row.disabled { display: none !important; }
  .sub-btn {
    width: 52px; min-height: 46px;
    border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px;
    font-size: 10px; font-weight: 700;
    background: rgba(18,18,18,0.9);
    backdrop-filter: blur(8px);
    transition: background 0.12s, color 0.12s;
    -webkit-tap-highlight-color: transparent;
    padding: 4px 2px;
  }
  .sub-btn:active { background: rgba(255,255,255,0.12); color: var(--text); }
  .sub-btn.active { background: var(--accent-bg); color: white; box-shadow: 0 0 0 1px var(--accent); }
  .sub-btn svg { width: 18px; height: 18px; }
  .tool-session-btn {
    width: 40px; min-height: 40px;
    border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
    display: none; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 800; line-height: 1;
    color: #fff; background: rgba(18,18,18,0.92);
    backdrop-filter: blur(8px);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: transform 0.08s, opacity 0.12s, background 0.12s;
  }
  /* Horizontal confirm/cancel bar — sits at the bottom-right, just to the LEFT
     of the vertical icon column (which is left untouched). Visible only during
     an active tool op. */
  .tool-session-bar {
    position: absolute;
    bottom: 10px;
    right: 52px;                 /* 6px column margin + 40px column + 6px gap */
    display: none;               /* shown only while a tool session is active */
    flex-direction: row;
    gap: 6px;
    z-index: 9;
  }
  .tool-session-bar.tool-session-active { display: flex; }
  .tool-session-bar.tool-session-active .tool-session-btn { display: flex; }
  .tool-session-btn.confirm { background: var(--accent); border-color: var(--accent); }
  .tool-session-btn.cancel { background: rgba(18,18,18,0.92); }
  .tool-session-btn:active { transform: scale(0.94); }
  .tool-session-btn:disabled { opacity: 0.38; cursor: default; pointer-events: none; }

  /* old global tab bar — now lives inside the properties panel */
  .tabbar { display: none; }

  /* ===== TAB BAR (inside bottom panel, always visible) ===== */
  .props-tab-bar {
    display: flex;
    flex-shrink: 0;
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .props-resize-handle {
    position: absolute;
    z-index: 30;
    top: -7px;
    left: 50%;
    width: 124px;
    height: 22px;
    transform: translateX(-50%);
    border: 0;
    background: transparent;
    cursor: ns-resize;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .props-resize-handle::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 10px;
    width: 34px;
    height: 3px;
    transform: translateX(-50%);
    border-radius: 3px;
    background: rgba(255,255,255,.24);
    pointer-events: none;
  }
  .props-resize-handle.dragging::after {
    background: var(--accent);
    box-shadow: 0 0 0 3px rgba(255,143,0,.12);
  }
  .tab-btn {
    flex: 1; background: transparent; border: none;
    color: var(--text-dim);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px;
    padding: 7px 4px 9px;
    cursor: pointer; font-size: 10px; font-weight: 600;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .tab-btn:active { background: rgba(255,255,255,0.04); }
  .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
  .tab-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

  /* ── Minimize / maximize panel toggle (left edge of the tab bar) ── */
  .panel-min-btn {
    flex-shrink: 0;
    width: 42px;
    background: transparent; border: none;
    color: var(--text-dim);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    border-right: 1px solid rgba(255,255,255,0.06);
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s, background 0.15s;
  }
  .panel-min-btn:active { background: rgba(255,255,255,0.06); }
  .panel-min-btn svg { width: 18px; height: 18px; transition: transform 0.24s cubic-bezier(0.4,0,0.2,1); }
  /* Tabs and the center handle restore a collapsed panel; hide the redundant arrow. */
  .properties-panel.panel-collapsed .panel-min-btn { display: none !important; }

  .anim-panel { padding: 12px 14px 18px; color: var(--text); }
  .anim-panel.collapsed .anim-body { display: none; }
  .anim-head, .anim-row { display:flex; align-items:center; gap:8px; }
  .anim-head { justify-content:space-between; margin-bottom:12px; }
  .anim-title { font-weight:700; font-size:13px; }
  .anim-head-actions { display:flex; gap:6px; }
  .anim-icon-btn, .anim-text-btn {
    min-height:36px; border:1px solid rgba(255,255,255,.10); border-radius:10px;
    color:var(--text); background:var(--bg-card); cursor:pointer; touch-action:manipulation;
  }
  .anim-icon-btn { width:38px; display:grid; place-items:center; font-size:15px; }
  .anim-icon-btn.active { color:#111; background:var(--accent); border-color:var(--accent); }
  .anim-text-btn { padding:0 11px; }
  .anim-transport { display:grid; grid-template-columns:repeat(6, minmax(36px, 1fr)); gap:6px; margin:10px 0; }
  .anim-field-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:10px 0; }
  .anim-field { min-width:0; }
  .anim-field label { display:block; color:var(--text-dim); font-size:9px; margin:0 0 4px 2px; text-transform:uppercase; }
  .anim-field input, .anim-field select {
    width:100%; min-width:0; box-sizing:border-box; height:34px; padding:0 7px;
    color:var(--text); background:#101012; border:1px solid rgba(255,255,255,.10); border-radius:7px;
  }
  .pose-vector { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
  .pose-vector .pose-number { min-width:0; width:100%; }
  .anim-clip-row { display:grid; grid-template-columns:minmax(0,1fr) 86px; gap:8px; margin-bottom:9px; }
  .anim-timeline-wrap { position:relative; padding-top:12px; margin:4px 0 8px; }
  .anim-timeline { width:100%; accent-color:var(--accent); margin:0; }
  .anim-presets {
    margin:10px 0;
    padding:10px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:10px;
    background:rgba(255,255,255,.025);
  }
  .anim-presets .anim-key-tools { margin-top:8px; }
  .anim-presets .anim-text-btn { min-height:38px; flex:1 1 120px; }
  .anim-timeline-dock {
    position:sticky;
    bottom:0;
    z-index:12;
    margin:10px -10px -10px;
    padding:0 10px 10px;
    border-top:1px solid rgba(255,255,255,.13);
    background:linear-gradient(180deg,rgba(24,24,24,.97),rgba(16,16,16,.995));
    box-shadow:0 -8px 18px rgba(0,0,0,.32);
  }
  .anim-timeline-dock-head {
    min-height:38px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    cursor:pointer;
    user-select:none;
  }
  .anim-timeline-dock-title { font-size:11px; font-weight:800; color:var(--accent); text-transform:uppercase; letter-spacing:.45px; }
  .anim-timeline-dock-meta { margin-left:auto; color:var(--text-dim); font-size:10px; }
  .anim-timeline-toggle { width:32px; height:30px; padding:0; border:1px solid rgba(255,255,255,.14); border-radius:8px; background:var(--bg-panel-2); color:#ddd; font-size:18px; line-height:1; cursor:pointer; }
  .anim-timeline-dock-body { max-height:720px; overflow:visible; opacity:1; transition:max-height .18s ease,opacity .14s ease; }
  .anim-timeline-dock.collapsed { padding-bottom:0; }
  .anim-timeline-dock.collapsed .anim-timeline-dock-body { max-height:0; overflow:hidden; opacity:0; pointer-events:none; }
  .anim-markers { position:absolute; left:8px; right:8px; top:7px; height:8px; pointer-events:none; }
  .anim-marker { position:absolute; width:2px; height:7px; border-radius:2px; background:rgba(255,143,0,.80); transform:translateX(-1px); }
  .anim-time { display:flex; justify-content:space-between; color:var(--text-dim); font-size:10px; font-variant-numeric:tabular-nums; }
  .anim-options { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:12px; }
  .anim-check { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-dim); }
  .anim-check input { accent-color:var(--accent); width:17px; height:17px; }
  .anim-speed { display:flex; align-items:center; gap:6px; margin-left:auto; color:var(--text-dim); font-size:11px; }
  .anim-speed select { height:32px; color:var(--text); background:#101012; border:1px solid rgba(255,255,255,.10); border-radius:7px; }
  .rig-tree-title { padding:6px 8px 3px; color:var(--accent); font-size:9px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; display:flex; align-items:center; gap:5px; }
  .rig-tree-toggle { margin-left:auto; width:25px; height:25px; display:grid; place-items:center; border:0; border-radius:6px; color:var(--text-dim); background:transparent; cursor:pointer; }
  .rig-tree-toggle:active { background:rgba(255,255,255,.09); color:#fff; }
  .rig-tree-toggle svg { width:14px; height:14px; transition:transform .15s ease; }
  .rig-tree-toggle.collapsed svg { transform:rotate(-90deg); }
  .outline-item.rig-bone { color:#b8b8b8; cursor:default; }
  .outline-item.rig-bone .ico { color:#d5a13a; }
  .outline-item.rig-bone.selected { background:rgba(255,143,0,.18); color:#fff; }
  .outline-item.rig-bone.keyed .name::after { content:'◆'; margin-left:6px; color:var(--accent); font-size:7px; }
  .anim-ruler-scroll { width:100%; max-width:100%; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-gutter:stable; padding-bottom:5px; -webkit-overflow-scrolling:touch; }
  /* pan-x (not none): lets one-finger horizontal drags on empty timeline
     space scroll natively via .anim-ruler-scroll's overflow-x:auto, while
     leaving vertical drags unclaimed so they bubble to the Properties panel. */
  .anim-ruler-track { position:relative; width:100%; min-height:50px; min-width:100%; border-radius:7px; background:#101012; border:1px solid rgba(255,255,255,.08); touch-action:pan-x; user-select:none; overflow:hidden; contain:layout paint; }
  .anim-ruler-header { position:relative; height:34px; margin-left:112px; border-bottom:1px solid rgba(255,255,255,.08); }
  .anim-channel-row { display:flex; min-height:34px; border-bottom:1px solid rgba(255,255,255,.055); }
  .anim-channel-row:last-of-type { border-bottom:0; }
  /* One compact row per animated object/bone (§ compact timeline) — no more
     permanent Position/Rotation/Scale rows; a chip on the row picks the view. */
  .anim-channel-row-compact { min-height:38px; align-items:center; }
  .anim-channel-label { position:sticky; left:0; z-index:5; width:112px; flex:0 0 112px; display:flex; align-items:center; gap:5px; padding:0 5px; box-sizing:border-box; color:#c8c8cc; background:#18181b; font-size:8px; white-space:nowrap; overflow:hidden; }
  .anim-channel-name { overflow:hidden; text-overflow:ellipsis; }
  .anim-channel-view-chip {
    margin-left:auto; flex:none; display:flex; align-items:center; gap:2px;
    min-width:40px; min-height:28px; padding:0 6px; border-radius:6px;
    border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05);
    color:var(--text); font-size:9px; font-weight:700; cursor:pointer; touch-action:manipulation;
  }
  .anim-channel-view-chip:active,
  .anim-channel-view-chip[aria-expanded="true"] { color:var(--accent); border-color:rgba(255,143,0,.4); background:rgba(255,143,0,.1); }
  .anim-channel-chip-caret { font-size:7px; opacity:.75; }
  .anim-channel-lane { position:relative; flex:1; min-width:0; }
  .anim-ruler-tick { position:absolute; top:0; width:1px; height:13px; background:rgba(255,255,255,.25); }
  .anim-ruler-tick.major { height:20px; background:rgba(255,255,255,.42); }
  .anim-ruler-label { position:absolute; top:21px; transform:translateX(-50%); color:var(--text-dim); font-size:9px; font-variant-numeric:tabular-nums; }
  .anim-ruler-key { position:absolute; top:1px; width:32px; height:32px; z-index:3; cursor:pointer; pointer-events:auto; border:0; padding:0; background:transparent; transform:translateX(-50%); touch-action:none; }
  .anim-ruler-key::before { content:''; position:absolute; left:10px; top:10px; width:10px; height:10px; background:var(--accent); border:1px solid #ffb35c; transform:rotate(45deg); box-sizing:border-box; }
  /* Marker colors: single-channel keys stay color-coded by property; a key
     that lands on the same frame across multiple channels becomes one orange
     combined marker (with an optional 2/3 count) instead of stacking rows. */
  .anim-ruler-key.key-position::before { background:#4aa3ff; border-color:#8bc5ff; }
  .anim-ruler-key.key-rotation::before { background:#f1c84b; border-color:#ffe18a; }
  .anim-ruler-key.key-scale::before { background:#58d68d; border-color:#92efb4; }
  .anim-ruler-key.key-combined::before { background:var(--accent); border-color:#ffb35c; }
  .anim-ruler-key-count { position:absolute; left:19px; top:0; font:700 7px/1 inherit; color:var(--accent); background:#101012; border-radius:5px; padding:1px 2px; pointer-events:none; }
  .anim-ruler-key.selected::before { width:13px; height:13px; left:9px; top:9px; background:#fff; border:2px solid var(--accent); box-shadow:0 0 0 2px rgba(255,143,0,.2); }
  /* Channel-view picker — reuses the existing compact dark .dropdown language;
     only its touch-target height is bumped to the 40px minimum. */
  .anim-channel-picker.dropdown.compact { min-width:132px; }
  .anim-channel-picker .dropdown-item { min-height:40px; }
  .anim-key-tools { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
  .anim-auto-key { min-width:112px; font-weight:700; }
  .anim-auto-key.active { color:#fff; background:#b52b36; border-color:#ef5965; }
  .anim-track-filter { margin-left:auto; }
  .anim-playhead { position:absolute; top:0; bottom:0; width:2px; z-index:4; background:var(--accent); pointer-events:none; transform:translateX(-1px); box-shadow:0 0 5px rgba(255,143,0,.7); }
  /* Dedicated drag handle for scrubbing — the only element (besides keyframe
     diamonds) allowed to capture the pointer and suppress native scrolling. */
  .anim-playhead-handle { position:absolute; top:0; width:28px; height:20px; z-index:5; transform:translateX(-50%); background:transparent; border:0; padding:0; margin:0; cursor:ew-resize; touch-action:none; -webkit-tap-highlight-color:transparent; }
  .anim-playhead-handle::before { content:''; position:absolute; left:50%; top:3px; width:12px; height:12px; transform:translateX(-50%) rotate(45deg); background:var(--accent); border:1px solid #ffb35c; border-radius:2px; box-shadow:0 0 4px rgba(255,143,0,.6); }
  .anim-ruler-scrub { position:absolute; inset:0; width:100%; height:100%; opacity:0; pointer-events:none; margin:0; }
  .anim-zoom-row { display:flex; align-items:center; gap:8px; color:var(--text-dim); font-size:10px; margin:7px 0 9px; }
  .anim-zoom-row input { flex:1; accent-color:var(--accent); }
  .rig-info-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin:8px 0 12px; }
  .rig-info-cell { min-width:0; padding:8px; border:1px solid rgba(255,255,255,.07); border-radius:7px; background:#151517; }
  .rig-info-cell span { display:block; color:var(--text-dim); font-size:9px; text-transform:uppercase; margin-bottom:3px; }
  .rig-info-cell b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
  .bone-info { margin-top:12px; padding:12px; border:1px solid rgba(255,143,0,.24); border-radius:10px; background:rgba(255,143,0,.055); }
  .bone-transform { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:9px; line-height:1.55; color:#c9c9c9; white-space:pre-wrap; }

  /* Create tab accent */
  .tab-create.active { color: white; background: var(--accent-bg); border-radius: 6px; border-color: transparent; }
  .tab-create.active svg { color: white; }

  /* ===== TOAST ===== */
  /* ── Floating viewport hint (tool instructions shown over the canvas) ── */
  #vp-hint {
    position: absolute;
    left: 50%; bottom: 14px;
    transform: translateX(-50%);
    pointer-events: none; z-index: 60;
    /* In Edit Mode the submode strip occupies the bottom-left. Its
       mode-specific position override lives in 02-responsive-modes.css. */

    background: rgba(12,12,12,0.88);
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 10px 18px 10px;
    max-width: 92vw;
    text-align: center;
    display: none;         /* hidden by default; JS sets display:flex */
    flex-direction: column; align-items: center; gap: 5px;
  }
  #vp-hint[data-show] { display: flex; animation: vp-hint-in 0.18s ease both; }
  /* Lift the hint above the submode strip when in Edit Mode (strip is
     ~62px tall at bottom:10px, so clear it with bottom:80px). */

  /* Interactive action buttons inside the floating hint (Confirm / Cancel).
     The hint container is pointer-events:none, but these buttons re-enable
     pointer events so they are the sole working confirm controls. */
  .vph-actions {
    display: flex; gap: 8px; margin-top: 3px;
    pointer-events: auto;
  }
  .vph-btn {
    pointer-events: auto;
    border: none; border-radius: 8px; cursor: pointer;
    padding: 8px 18px; font-size: 12px; font-weight: 700;
    background: rgba(255,255,255,0.14); color: #fff;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.12s, transform 0.08s;
  }
  .vph-btn:active { transform: scale(0.95); }
  .vph-btn.primary { background: var(--accent); color: #fff; }
  .vph-btn.primary:active { background: var(--accent); }
  .vph-btn.ghost { background: rgba(255,255,255,0.10); }
  @keyframes vp-hint-in {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
  }
  .vph-primary {
    font-size: 13px; font-weight: 700; color: #fff; line-height: 1.3;
    white-space: nowrap;
  }
  .vph-secondary {
    font-size: 11px; color: rgba(255,255,255,0.55); white-space: nowrap;
  }
  .vph-keys {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    justify-content: center; margin-top: 1px;
  }
  .vph-key {
    background: rgba(255,255,255,0.12); border-radius: 6px;
    padding: 2px 9px; font-size: 11px; font-weight: 600; color: #ddd;
  }
  .vph-sep { color: rgba(255,255,255,0.25); font-size: 11px; }

  .toast {
    position: fixed; top: 80px; left: 50%;
    transform: translateX(-50%);
    background: rgba(15,15,15,0.95);
    color: var(--text);
    padding: 10px 18px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 12px; z-index: 100;
    opacity: 0; transition: opacity 0.2s;
    pointer-events: none;
    max-width: min(86vw, 520px); text-align: center;
    white-space: pre-line;
  }
  .toast.show { opacity: 1; }
  .toast.error { border-color: #d04040; }
  .toast.success { border-color: #50c878; }

  .minder-dialog {
    position: fixed; inset: 0;
    z-index: 14000;
    display: none;
    align-items: center; justify-content: center;
    padding: 18px;
    background: rgba(0,0,0,0.56);
    opacity: 0;
    transition: opacity 0.16s ease;
  }
  .minder-dialog.open { display: flex; }
  .minder-dialog.visible { opacity: 1; }
  .minder-dialog-card {
    width: min(420px, calc(100vw - 28px));
    background: #171717;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    box-shadow: 0 18px 48px rgba(0,0,0,0.62);
    transform: translateY(10px) scale(0.98);
    transition: transform 0.16s ease;
    overflow: hidden;
  }
  .minder-dialog.visible .minder-dialog-card { transform: none; }
  .minder-dialog-head {
    padding: 16px 18px 8px;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
  }
  .minder-dialog-body {
    padding: 4px 18px 16px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.45;
  }
  .minder-dialog-input {
    width: 100%;
    margin-top: 12px;
    min-height: 50px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(0,0,0,0.28);
    color: #fff;
    padding: 0 13px;
    font-size: 16px;
    outline: none;
  }
  .minder-dialog-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(255,128,0,0.16);
  }
  .minder-dialog-actions {
    display: flex;
    gap: 10px;
    padding: 12px 14px 14px;
    border-top: 1px solid rgba(255,255,255,0.08);
    justify-content: flex-end;
  }
  .minder-dialog-btn {
    min-height: 48px;
    min-width: 104px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 8px;
    background: #2a2a2a;
    color: #eee;
    font-weight: 800;
    font-size: 14px;
    padding: 0 16px;
    touch-action: manipulation;
  }
  .minder-dialog-btn.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
  .minder-dialog-btn.danger {
    background: #b93030;
    border-color: #d44848;
  }

  /* Project save flow — names the file first, then hands the destination to
     the browser/Android system picker. Kept separate from the generic prompt
     so the current destination is always visible before a write happens. */
  .project-save-dialog {
    position: fixed; inset: 0;
    z-index: 1210;
    display: none;
    align-items: center; justify-content: center;
    padding: 18px;
    background: rgba(0,0,0,0.62);
    opacity: 0;
    transition: opacity 0.16s ease;
  }
  .project-save-dialog.open { display: flex; }
  .project-save-dialog.visible { opacity: 1; }
  .project-save-card {
    width: min(440px, calc(100vw - 26px));
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 12px;
    background: #171717;
    box-shadow: 0 22px 58px rgba(0,0,0,0.68);
    transform: translateY(10px) scale(0.98);
    transition: transform 0.16s ease;
  }
  .project-save-dialog.visible .project-save-card { transform: none; }
  .project-save-head {
    display: flex; align-items: center; gap: 11px;
    padding: 16px 17px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .project-save-icon {
    width: 34px; height: 34px; flex: 0 0 34px;
    display: grid; place-items: center;
    border-radius: 9px;
    color: var(--accent);
    background: rgba(255,128,0,0.11);
    border: 1px solid rgba(255,128,0,0.24);
  }
  .project-save-icon svg { width: 18px; height: 18px; }
  .project-save-title { color: #fff; font-size: 16px; font-weight: 850; }
  .project-save-subtitle { margin-top: 2px; color: #929292; font-size: 11px; }
  .project-save-body { padding: 14px 17px 16px; }
  .project-save-label {
    display: block;
    margin: 0 0 6px;
    color: #aaa;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .project-save-name {
    width: 100%; min-height: 48px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 9px;
    padding: 0 12px;
    outline: none;
    background: rgba(0,0,0,0.28);
    color: #fff;
    font-size: 16px;
  }
  .project-save-name:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(255,128,0,0.16);
  }
  .project-save-preview {
    min-height: 18px;
    margin: 5px 1px 12px;
    color: #8e8e8e;
    font-size: 11px;
  }
  .project-save-preview.error { color: #ff7777; }
  .project-save-location {
    display: flex; align-items: center; gap: 10px;
    min-height: 58px;
    padding: 9px 10px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 9px;
    background: rgba(255,255,255,0.035);
  }
  .project-save-location-icon {
    width: 30px; height: 30px; flex: 0 0 30px;
    display: grid; place-items: center;
    border-radius: 7px;
    color: #bdbdbd;
    background: rgba(255,255,255,0.06);
  }
  .project-save-location-icon svg { width: 17px; height: 17px; }
  .project-save-location-copy { min-width: 0; flex: 1; }
  .project-save-location-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: #e2e2e2; font-size: 12px; font-weight: 750;
  }
  .project-save-location-note {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    margin-top: 2px; color: #858585; font-size: 10px;
  }
  .project-save-change {
    min-height: 38px; flex: 0 0 auto;
    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 8px;
    padding: 0 11px;
    background: #292929;
    color: #ddd;
    font-size: 11px;
    font-weight: 800;
    touch-action: manipulation;
  }
  .project-save-actions {
    display: flex; justify-content: flex-end; gap: 9px;
    padding: 12px 14px 14px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .project-save-btn {
    min-width: 100px; min-height: 48px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 8px;
    padding: 0 15px;
    background: #292929;
    color: #eee;
    font-size: 13px;
    font-weight: 850;
    touch-action: manipulation;
  }
  .project-save-btn.primary {
    min-width: 150px;
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
  }


  /* ===== DROPDOWN / CONTEXT MENU ===== */
  .backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 19; opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
  }
  .backdrop.show { opacity: 1; pointer-events: auto; }
  .dropdown {
    position: absolute;
    background: var(--bg-panel-2);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    z-index: 900;
    min-width: 220px;
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px;
  }
  .dropdown-item {
    padding: 10px 12px; cursor: pointer;
    font-size: 13px; border-radius: 6px;
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px;
  }
  .dropdown-item:active { background: var(--accent-bg); color: white; }
  .dropdown-item.active {
    color: var(--accent);
    background: rgba(255,128,0,.10);
    font-weight: 700;
  }
  .dropdown-item.active::after {
    content: "\2713";
    color: var(--accent);
    margin-left: auto;
  }
  .dropdown-item.disabled { opacity: 0.4; pointer-events: none; }
  .dropdown-sep { height: 1px; background: rgba(255,255,255,0.08); margin: 4px 0; }
  .dropdown-shortcut { color: var(--text-dim); font-size: 11px; font-family: ui-monospace, monospace; }
  .dropdown-section {
    padding: 4px 12px; font-size: 10px;
    color: var(--text-dim); text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  .dropdown.compact {
    min-width: 132px;
    width: max-content;
    max-width: calc(100vw - 16px);
    padding: 4px;
  }
  .dropdown.compact .dropdown-item {
    padding: 7px 9px;
    font-size: 13px;
    gap: 8px;
    border-radius: 5px;
    line-height: 1.15;
  }
  .dropdown.compact .dropdown-sep { margin: 2px 0; }
  .dropdown-submenu-toggle .dropdown-caret {
    color: var(--text-dim);
    font-size: 13px;
    margin-left: 12px;
    transition: transform .15s ease;
  }
  .dropdown-submenu-toggle.open .dropdown-caret { transform: rotate(90deg); }
  .dropdown-submenu {
    margin: 2px 0 3px 6px;
    padding-left: 5px;
    border-left: 1px solid rgba(255,255,255,0.08);
  }
  .dropdown-submenu .dropdown-item { color: var(--text-dim); }

  /* Interaction modes are primary mobile destinations, not a desktop context
     menu. Use the available width for six explicit touch tiles instead of a
     narrow text column followed by visually empty space. */
  .mode-picker-menu {
    width: min(320px, calc(100vw - 16px));
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
    overflow: visible;
  }
  .mode-picker-menu .dropdown-section,
  .mode-picker-menu .dropdown-sep { grid-column: 1 / -1; }
  .mode-picker-menu .dropdown-section { padding: 2px 4px 4px; }
  .mode-picker-menu .dropdown-sep { margin: 1px 0; }
  .mode-picker-menu .dropdown-item {
    width: 100%;
    min-width: 0;
    min-height: 56px;
    box-sizing: border-box;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 8px;
    background: rgba(255,255,255,.035);
    color: var(--text);
    font: 600 12px/1.2 inherit;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .mode-picker-menu .dropdown-item:active {
    background: rgba(232,125,13,.24);
    border-color: rgba(232,125,13,.5);
  }
  .mode-picker-menu .dropdown-item.active {
    background: rgba(232,125,13,.16);
    border-color: rgba(232,125,13,.32);
  }
  .mode-picker-menu .dropdown-item.active::after {
    position: absolute;
    top: 9px;
    right: 10px;
    margin: 0;
  }
  .mode-picker-menu .dropdown-shortcut {
    font-size: 9px;
    font-weight: 500;
    line-height: 1;
  }

  /* ===== BOTTOM SHEET (full panels for Material/Render/Object props) ===== */
  .sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    max-height: 75vh;
    background: var(--bg-panel);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    transform: translateY(100%);
    transition: transform 0.25s ease;
    z-index: 30;
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .sheet.open { transform: translateY(0); }
  .sheet-header {
    padding: 12px 16px;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-weight: 700; font-size: 15px;
    position: sticky; top: 0;
    background: var(--bg-panel);
    z-index: 1;
  }
  .sheet-header::before {
    content: ''; position: absolute;
    top: 6px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
  }
  .sheet-close {
    background: transparent; border: none; color: var(--text-dim);
    font-size: 22px; cursor: pointer; padding: 0 6px;
  }
  .sheet-body { padding: 14px 16px; }
  .sheet-body h4 {
    margin: 14px 0 9px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; color: var(--text-dim);
    letter-spacing: 0.55px;
  }
  .sheet-body h4:first-child { margin-top: 0; }

  .btn {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.10);
    color: var(--text);
    padding: 12px 14px; border-radius: 10px;
    cursor: pointer; font-size: 13px;
    width: 100%; text-align: left;
    display: flex; align-items: center; gap: 10px;
  }
  .btn:active { background: var(--bg-card-hover); }
  .btn:disabled { opacity: .42; cursor: default; }
  .print-mode-empty { margin-bottom:10px; padding:10px 12px; border:1px solid rgba(255,255,255,.08); border-radius:8px; background:var(--bg-card); color:var(--text-dim); font-size:12px; }
  .print-mode-sections { display:grid; gap:6px; }
  .print-mode-section { border:1px solid rgba(255,255,255,.08); border-radius:8px; background:var(--bg-card); overflow:hidden; }
  .print-mode-section summary { min-height:44px; padding:9px 11px; box-sizing:border-box; cursor:pointer; color:var(--text); font-size:12px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; display:flex; align-items:center; gap:7px; }
  .print-mode-section summary::marker, .print-mode-section summary span { color:var(--accent); }
  .print-mode-section[open] summary { border-bottom:1px solid rgba(255,255,255,.06); background:var(--bg-card-hover); }
  .print-mode-section-body { padding:8px; }
  .print-mode-section-body .btn { justify-content:center; }
  .print-ready-results { margin:8px 0; border-top:1px solid rgba(255,255,255,.06); }
  .print-ready-row { min-height:38px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid rgba(255,255,255,.06); color:var(--text); font-size:12px; }
  .print-ready-result { display:flex; align-items:center; gap:7px; font-weight:700; }
  .print-ready-result.ok, .print-ready-final { color:#76d895; }
  .print-ready-result.warning { color:#ffb45d; }
  .print-ready-result button { min-height:30px; padding:4px 9px; border:1px solid rgba(232,125,13,.42); border-radius:6px; background:var(--accent-bg); color:var(--accent); font:700 11px/1 inherit; cursor:pointer; }
  .print-ready-final { margin:8px 0; padding:9px 10px; border:1px solid rgba(118,216,149,.28); border-radius:7px; background:rgba(118,216,149,.08); font-size:12px; font-weight:800; text-align:center; text-transform:uppercase; }
  .btn.primary { background: var(--accent-bg); color: white; }
  .btn.danger { color: #ff8888; }
  .btn-row { display: flex; gap: 8px; align-items: stretch; }
  .btn-row .btn { flex: 1; text-align: center; justify-content: center; }

  .vec-row {
    display: grid;
    grid-template-columns: 24px 1fr 1fr 1fr;
    gap: 6px; margin-bottom: 8px; align-items: center;
  }
  .vec-label { font-size: 12px; font-weight: 700; }
  .vec-x { color: var(--x-axis); }
  .vec-y { color: var(--y-axis); }
  .vec-z { color: var(--z-axis); }
  .num-input {
    background: var(--bg-black);
    border: 1px solid rgba(255,255,255,0.06);
    color: var(--text);
    padding: 8px; border-radius: 6px;
    font-size: 13px; width: 100%;
    font-family: ui-monospace, monospace;
  }
  .num-input:focus { outline: 1px solid var(--accent); }

  .color-row {
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  }
  .color-row label { flex: 1; font-size: 11px; font-weight: 500; }
  input[type="color"] {
    width: 56px; height: 36px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px; background: transparent; cursor: pointer;
  }
  .slider-row { margin-bottom: 12px; }
  .slider-row label {
    display: flex; justify-content: space-between;
    font-size: 11px; font-weight: 500; color: var(--text-dim); margin-bottom: 6px;
  }
  input[type="range"] {
    width: 100%; height: 6px;
    -webkit-appearance: none; appearance: none;
    background: var(--bg-black);
    border-radius: 3px; outline: none;
    /* touch-action: none — slider owns the touch; prevents props-inner scroll-to-top
       when user taps a range thumb on mobile                                      */ertical scroll; our JS owns horizontal drag */
    touch-action: none;
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px; height: 20px;
    background: var(--accent);
    border-radius: 50%; cursor: pointer;
  }
  input[type="range"]::-moz-range-thumb {
    width: 20px; height: 20px;
    background: var(--accent);
    border-radius: 50%; border: none; cursor: pointer;
  }

  .hidden-file { display: none; }

  /* ===== FILE MENU (☰ rich dropdown) ===== */
  /* ===== ADD OBJECT POPUP (flyout above panel on demand) ===== */
  .add-popup {
    position: fixed;
    left: 10px; right: 10px;
    background: var(--bg-panel);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 12px;
    z-index: 55;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.65);
    animation: addPopIn 0.15s ease;
    /* Cap height and scroll when there are many models to choose from. */
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  @keyframes addPopIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .add-popup-bd { position: fixed; inset: 0; z-index: 54; }

  /* ===== UNIFORM SCALE SLIDER BAR ===== */
  .scale-bar {
    position: fixed; left: 10px; right: 10px;
    background: var(--bg-panel);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 10px 14px;
    z-index: 22;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 -8px 28px rgba(0,0,0,0.55);
    animation: addPopIn 0.15s ease;
  }
  .scale-bar-label {
    font-size: 10px; font-weight: 700; letter-spacing: 0.6px;
    text-transform: uppercase; color: var(--text-dim); flex-shrink: 0;
  }
  .scale-bar input[type=range] {
    flex: 1; -webkit-appearance: none; appearance: none;
    height: 6px; border-radius: 3px; outline: none; cursor: pointer;
    background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--pct, 50%), rgba(255,255,255,0.15) var(--pct, 50%));
  }
  .scale-bar input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 22px; height: 22px;
    border-radius: 50%; background: var(--accent);
    box-shadow: 0 2px 8px rgba(0,0,0,0.5); cursor: pointer;
    border: 2px solid rgba(255,255,255,0.3);
  }
  .scale-bar input[type=range]::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--accent); cursor: pointer; border: 2px solid rgba(255,255,255,0.3);
  }
  .scale-bar-val {
    font-size: 14px; font-weight: 700; color: var(--accent);
    min-width: 52px; text-align: center;
    background: rgba(255,216,61,0.12); border: 1px solid rgba(255,216,61,0.3);
    border-radius: 8px; padding: 5px 8px; cursor: pointer; flex-shrink: 0;
    user-select: none; -webkit-user-select: none;
  }
  .scale-bar-val:active { background: rgba(255,216,61,0.22); }
  .scale-bar-val-input {
    width: 56px; background: var(--bg-black); border: 1px solid var(--accent);
    color: var(--accent); font-size: 14px; font-weight: 700;
    padding: 4px 6px; border-radius: 8px; outline: none;
    text-align: center; font-family: inherit;
  }
  .scale-bar-reset {
    background: transparent; border: none; color: var(--text-dim);
    font-size: 16px; padding: 5px; cursor: pointer; border-radius: 7px; flex-shrink: 0;
    line-height: 1;
  }
  .scale-bar-reset:active { background: rgba(255,255,255,0.1); color: white; }
  .fm-section {
    font-size: 10px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: var(--text-dim);
    padding: 8px 14px 3px; pointer-events: none;
  }
  /* Blender-style collapsed Import ▸ / Export ▸ rows */
  .fm-submenu-toggle {
    display: flex; align-items: center; justify-content: space-between;
  }
  .fm-submenu-toggle .fm-caret {
    margin-left: 14px; opacity: .65;
    transition: transform .18s ease;
  }
  .fm-submenu-toggle.open .fm-caret { transform: rotate(90deg); }
  .fm-submenu .dropdown-item {
    padding-left: 28px;                 /* indent revealed options */
    background: rgba(255,255,255,0.02);
  }
  .fm-recent-item {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 12px; cursor: default;
  }
  .fm-recent-item:hover { background: rgba(255,255,255,0.03); }
  .fm-recent-info { flex: 1; min-width: 0; }
  .fm-recent-name {
    font-size: 12px; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .fm-recent-meta { font-size: 10px; color: var(--text-dim); }
  .fm-recent-load {
    background: rgba(232,125,13,0.15);
    border: 1px solid rgba(232,125,13,0.3);
    color: var(--accent); border-radius: 5px;
    font-size: 11px; font-weight: 600;
    padding: 3px 8px; cursor: pointer; flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .fm-recent-load:active { background: rgba(232,125,13,0.3); }
  .fm-recent-del {
    width: 22px; height: 22px; background: transparent; border: none;
    color: rgba(255,255,255,0.25); cursor: pointer; border-radius: 4px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    font-size: 14px; line-height: 1;
    -webkit-tap-highlight-color: transparent;
  }
  .fm-recent-del:active { color: #ff7878; background: rgba(255,80,80,0.1); }
  .fm-reset-danger {
    color: #ff8383;
    border: 1px solid rgba(255,100,100,0.18);
    background: rgba(255,70,70,0.045);
  }
  .fm-reset-danger:active {
    color: #fff;
    background: rgba(185,48,48,0.72);
  }
  .fm-empty-recent {
    padding: 5px 14px 8px; font-size: 11px;
    color: var(--text-dim); font-style: italic;
  }
  .recent-save-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-card);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.04);
    margin-bottom: 5px;
  }
  .recent-save-icon {
    width: 34px; height: 34px;
    background: rgba(232,125,13,0.12);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--accent);
  }
  .recent-save-icon svg { width: 16px; height: 16px; }
  .recent-save-info { flex: 1; min-width: 0; }
  .recent-save-name {
    font-size: 12px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--text);
  }
  .recent-save-meta {
    font-size: 10px; color: var(--text-dim);
    margin-top: 1px;
  }
  .recent-save-load {
    background: rgba(232,125,13,0.15);
    border: 1px solid rgba(232,125,13,0.3);
    color: var(--accent);
    border-radius: 6px;
    font-size: 11px; font-weight: 600;
    padding: 4px 8px;
    cursor: pointer; flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .recent-save-load:active { background: rgba(232,125,13,0.28); }
  .recent-save-del {
    width: 26px; height: 26px;
    background: transparent; border: none;
    color: var(--text-dimmer, rgba(255,255,255,0.3));
    border-radius: 5px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .recent-save-del:active { background: rgba(255,80,80,0.1); color: #ff7878; }
  .recent-saves-empty {
    text-align: center; color: var(--text-dim);
    font-size: 12px; padding: 14px 0;
  }
  .light-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
  }
  .light-card {
    background: var(--bg-card);
    border-radius: 10px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .light-card-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-dim);
  }
  .light-int-label {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-dimmer, rgba(255,255,255,0.35));
    margin-bottom: 1px;
  }
  .light-col-pick {
    width: 100%;
    height: 26px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    padding: 0;
    margin-top: 2px;
  }
  /* ── UV Panel ───────────────────────────────────────────────── */
  .uv-tool-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 6px; margin: 8px 0 4px;
  }
  .uv-tool-btn {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 10px 4px 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px; cursor: pointer;
    color: var(--text); font-size: 10px; font-weight: 600;
    letter-spacing: 0.2px; text-align: center;
    transition: background .12s, border-color .12s;
    -webkit-tap-highlight-color: transparent;
  }
  .uv-tool-btn:active { background: var(--accent-bg); border-color: var(--accent); color: white; }
  .uv-tool-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }
  .uv-info-row { margin: 6px 0; }
  .uv-seam-badge {
    display: inline-block; padding: 2px 8px;
    background: rgba(255,100,0,0.18); color: #ff8c44;
    border-radius: 99px; font-size: 10px; font-weight: 700;
    border: 1px solid rgba(255,100,0,0.35);
  }
  .uv-settings-row {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 6px 8px; padding: 6px 0; margin-bottom: 2px;
  }
  .uv-setting-label { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
  .uv-grid-sel {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    color: var(--text); border-radius: 6px; padding: 3px 8px;
    font-size: 11px; cursor: pointer; appearance: none;
  }
  .uv-preview-wrap {
    margin: 10px 0 4px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px; overflow: hidden; background: #141414;
  }
  .uv-preview-canvas { display: block; width: 100%; aspect-ratio: 1; }
  .uv-tips {
    display: flex; flex-direction: column; gap: 6px;
    margin-top: 10px; padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .uv-tip { display: flex; align-items: flex-start; gap: 6px; font-size: 10px; color: var(--text-dim); line-height: 1.4; }
  .uv-tip-icon { flex-shrink: 0; opacity: .6; }
  /* toggle-switch (shared with Light panel) */
  .toggle-switch { position: relative; display: inline-block; width: 34px; height: 20px; flex-shrink: 0; }
  .toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
  .toggle-track {
    position: absolute; inset: 0; background: rgba(255,255,255,0.15);
    border-radius: 10px; cursor: pointer; transition: background .2s;
  }
  .toggle-track::before {
    content: ''; position: absolute; width: 14px; height: 14px;
    left: 3px; bottom: 3px; background: white; border-radius: 50%;
    transition: transform .2s;
  }
  .toggle-switch input:checked + .toggle-track { background: var(--accent); }
  .toggle-switch input:checked + .toggle-track::before { transform: translateX(14px); }

  /* ===== OBJECT PROPERTIES – Transform section ===== */
  .tp-block { margin-bottom: 10px; }
  .tp-group-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 3px;
  }
  .tp-group-label {
    min-width: 58px;
    font-size: 11px;
    color: var(--text-dim);
    font-weight: 600;
    padding-top: 8px;
  }
  .tp-axes { flex: 1; display: flex; flex-direction: column; gap: 3px; }
  .tp-axis-row {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .tp-ax {
    font-size: 11px;
    font-weight: 700;
    min-width: 12px;
    text-align: center;
    flex-shrink: 0;
  }
  .tp-ax.x { color: var(--x-axis,#ff5555); }
  .tp-ax.y { color: var(--y-axis,#5fcf5f); }
  .tp-ax.z { color: var(--z-axis,#5599ff); }
  .tp-in {
    flex: 1;
    min-width: 0;
    background: var(--bg-black);
    border: 1px solid rgba(255,255,255,0.10);
    color: var(--text);
    padding: 6px 7px;
    border-radius: 8px;
    font-size: 11px;
    font-family: ui-monospace, monospace;
    width: 100%;
  }
  .tp-in:focus { outline: 1px solid var(--accent); border-color: transparent; }
  .tp-in:disabled { opacity: 0.35; }
  /* 3-column horizontal layout for transform */
  .transform-cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-top: 6px;
  }
  .tp-col { display: flex; flex-direction: column; gap: 4px; }
  .tp-col-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.55px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 4px;
  }
  .dimensions-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 6px;
  }
  .dimension-axis {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
  }
  .dimension-input-wrap {
    position: relative;
    display: flex;
    flex: 1;
    min-width: 0;
  }
  .dimension-input-wrap .tp-in {
    padding-right: 24px;
    text-align: right;
  }
  .dimension-unit {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim);
    font: 700 10px/1 ui-monospace, monospace;
    pointer-events: none;
  }
  .dimension-input-wrap:focus-within .dimension-unit { color: var(--text); }

  /* ===== DEVELOPER DEBUG PANEL ===== */

  .dev-sec {
    font-size: 8px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1.6px; color: #3a3a3a;
    margin: 10px 0 5px;
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
  }
  .dev-sec:first-child { margin-top: 0; }
  .dev-chk { display: flex; align-items: center; gap: 7px; padding: 2.5px 0; }
  .dev-ico { width: 13px; flex-shrink: 0; font-size: 11px; text-align: center; }
  .dev-ico.ok   { color: #66bb6a; }
  .dev-ico.fail { color: #ef5350; }
  .dev-ico.warn { color: #ffa726; }
  .dev-ico.na   { color: #2a2a2a; }
  .dev-chk-lbl  { color: #999; font-size: 11px; }
  .dev-k { color: #4a4a4a; font-size: 10px; flex-shrink: 0; width: 82px; }
  .dev-v { color: #c8c8c8; font-size: 10px; flex: 1; word-break: break-all; line-height: 1.4; }
  .dev-v.ok   { color: #66bb6a; }
  .dev-v.fail { color: #ef5350; }
  .dev-v.warn { color: #ffa726; }
  .dev-v.dim  { color: #3a3a3a; }
  .dev-divider { height: 1px; background: rgba(255,255,255,0.04); margin: 6px 0; }

  /* ===== UI refinement: floating Shading strip + separate object list ===== */
  #outliner-toggle { display: none !important; }
  .right-outliner {
    top: 46px;
    overflow: visible;
    max-height: calc(48% - 40px);
  }
  .right-outliner.collapsed {
    width: 152px;
  }
  .right-outliner.collapsed .outliner-body {
    display: block;
  }
  .right-outliner.collapsed .outliner-shading {
    display: grid;
  }
  .outliner-shading {
    position: absolute;
    top: -40px;
    right: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(32px, 1fr));
    min-width: 152px;
    background: rgba(18,18,18,0.94);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.36);
    z-index: 2;
  }
  .outliner-light-tools {
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .outliner-body {
    padding-top: 4px;
  }








  /* Smart panel presets — each workspace opens to a sensible default height
     instead of reusing one oversized sheet for everything. Manual resizing
     still wins while the user stays in that section. */
  .properties-panel.panel-edit-compact {
    height: max(98px, 20dvh) !important;
    max-height: max(98px, 20dvh) !important;
  }
  /* Parametric modeling tools reuse the exact Edit Tools sheet height. Unlike
     panel-edit-compact, the inner area stays visible for the tool controls. */
  .properties-panel.panel-tool-compact {
    height: max(98px, 20dvh) !important;
    max-height: max(98px, 20dvh) !important;
  }
  .properties-panel.panel-tool-bridge {
    height: min(320px, 42dvh) !important;
    max-height: min(320px, 42dvh) !important;
  }
  .properties-panel.panel-edit-compact .props-inner {
    display: none !important;
  }
  .properties-panel.panel-smart-sm {
    height: max(148px, 24dvh) !important;
    max-height: max(148px, 24dvh) !important;
  }
  .properties-panel.panel-smart-md {
    height: max(188px, 32dvh) !important;
    max-height: max(188px, 32dvh) !important;
  }
  .properties-panel.panel-smart-lg {
    height: max(240px, 40dvh) !important;
    max-height: max(240px, 40dvh) !important;
  }




  /* ===== FOCUSED LIGHTING PANEL ===== */
  .lighting-panel-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 2px 8px;
  }
  .lighting-panel-summary-copy { min-width: 0; flex: 1; }
  .lighting-panel-summary-title {
    color: var(--text);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
  }
  .lighting-panel-summary-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
  }
  .lighting-panel-icon-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.045);
    color: var(--text-dim);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 800 18px/1 inherit;
    cursor: pointer;
  }
  .lighting-panel-icon-btn:active { transform: translateY(1px); }
  .lighting-panel-icon-btn.primary {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    color: #fff;
    border-color: rgba(255,164,26,.75);
    background: linear-gradient(180deg, #ff9f1a 0%, #ef8500 100%);
    box-shadow: 0 6px 16px rgba(239,133,0,.28), inset 0 1px 0 rgba(255,255,255,.18);
  }
  .lighting-panel-icon-btn.primary:hover {
    filter: brightness(1.04);
  }
  .lighting-panel-icon-btn svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.1;
    pointer-events: none;
  }


  /* ===== HIGH-QUALITY RENDER DIALOG ===== */
  .render-dialog,
  .render-progress {
    position: fixed;
    inset: 0;
    z-index: 1250;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0,0,0,.68);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .16s ease;
  }
  .render-dialog.open,
  .render-progress.open { display: flex; }
  .render-dialog.visible,
  .render-progress.visible { opacity: 1; }
  .render-dialog-card,
  .render-progress-card {
    width: min(460px, calc(100vw - 28px));
    max-height: min(720px, calc(100dvh - 28px));
    overflow-y: auto;
    background: #171717;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 14px;
    box-shadow: 0 22px 70px rgba(0,0,0,.72);
    transform: translateY(10px) scale(.98);
    transition: transform .16s ease;
  }
  .render-dialog.visible .render-dialog-card,
  .render-progress.visible .render-progress-card { transform: none; }
  .render-dialog-head,
  .render-progress-head {
    padding: 17px 18px 9px;
    font-size: 17px;
    font-weight: 800;
    color: #fff;
  }
  .render-dialog-body,
  .render-progress-body { padding: 5px 18px 18px; }
  .render-setting { display: block; margin-top: 13px; }
  .render-setting:first-child { margin-top: 0; }
  .render-setting > span {
    display: block;
    margin-bottom: 6px;
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .55px;
    text-transform: uppercase;
  }
  .render-setting input,
  .render-setting select {
    width: 100%;
    min-height: 48px;
    padding: 0 12px;
    color: #fff;
    background: #242424;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 9px;
    outline: none;
    font: 600 13px/1 inherit;
  }
  .render-setting input:focus,
  .render-setting select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(255,128,0,.15);
  }
  .render-effects {
    margin-top: 14px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    background: rgba(255,255,255,.03);
    overflow: hidden;
  }
  .render-effects-head {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    width:100%; padding:12px 14px; background:rgba(255,255,255,.02); border:0; color:#fff; cursor:pointer;
    font: 800 13px/1 inherit;
  }
  .render-effects-head small { display:block; margin-top:4px; color: var(--text-dim); font: 500 10px/1.35 inherit; }
  .render-effects-body { padding: 4px 14px 14px; border-top:1px solid rgba(255,255,255,.06); }
  .render-effects-toggle { width:18px; height:18px; transition: transform .18s ease; flex:0 0 auto; }
  .render-effects.open .render-effects-toggle { transform: rotate(180deg); }
  .render-setting.render-setting-inline { display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .render-setting.render-setting-inline > span { margin:0; }
  .render-checkbox { accent-color: #f0bc2f; width:20px; height:20px; flex:0 0 auto; }
  .render-effect-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .render-range-buttons { display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; margin-top:8px; }
  .render-range-buttons button {
    min-height: 40px; border-radius: 9px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); color: var(--text-dim); font:700 12px/1 inherit; cursor:pointer;
  }
  .render-range-buttons button.active { background: rgba(255,216,61,.14); color: var(--accent); border-color: rgba(255,216,61,.35); }
  .render-slider-row { margin-top: 10px; }
  .render-slider-row label { display:flex; justify-content:space-between; gap:12px; color: var(--text-dim); font-size: 11px; font-weight: 500; margin-bottom: 6px; }
  .render-slider-row input[type=range] { width:100%; accent-color:#f0bc2f; }
  .render-fog-distance-control label { align-items:center; }
  .render-fog-number {
    width:112px; min-width:88px; min-height:34px; height:34px;
    padding:0 9px; color:#fff; background:#242424;
    border:1px solid rgba(255,255,255,.13); border-radius:8px;
    outline:none; font:600 11px/1 inherit; text-align:right;
    font-variant-numeric:tabular-nums;
  }
  .render-fog-number:focus { border-color:var(--accent); box-shadow:0 0 0 2px rgba(255,128,0,.15); }
  .render-effect-hint { margin-top: 9px; color: var(--text-dim); font-size: 10px; line-height:1.45; }
  .render-manual-distance[hidden], .render-effects-body[hidden] { display:none !important; }
  .render-tab-panel { display:flex; flex-direction:column; gap:8px; }
  /* Render tab now uses the pinned secondary menu above the scroll area.
     Keep the existing section bodies and wiring, but remove the duplicate
     in-content accordion headers so the marked strip becomes the navigation. */
  .render-tab-panel.render-subtab-mode > .render-accordion {
    display:none;
    border:0;
    border-radius:0;
    background:transparent;
    overflow:visible;
  }
  .render-tab-panel.render-subtab-mode > .render-accordion.open { display:block; }
  .render-tab-panel.render-subtab-mode > .render-accordion > .render-accordion-head { display:none; }
  .render-tab-panel.render-subtab-mode > .render-accordion > .render-accordion-body {
    padding:0;
    border-top:0;
  }
  .render-accordion {
    border:1px solid rgba(255,255,255,.10);
    border-radius:13px;
    background:rgba(255,255,255,.03);
    overflow:hidden;
  }
  .render-accordion-head {
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:12px 14px; background:rgba(255,255,255,.025); border:0; color:#fff; cursor:pointer; text-align:left;
  }
  .render-accordion-title { font-size:13px; font-weight:800; letter-spacing:-.01em; }
  .render-accordion-note { margin-top:3px; color:var(--text-dim); font-size:9px; line-height:1.3; }
  .render-accordion-head.no-subtitle > span { display:block; }
  .render-accordion-head.no-subtitle .render-accordion-title { margin-bottom:0; }
  .render-accordion-icon { width:18px; height:18px; transition:transform .18s ease; flex:0 0 auto; }
  .render-accordion.open .render-accordion-icon { transform:rotate(180deg); }
  .render-accordion-body { padding:12px 14px 14px; border-top:1px solid rgba(255,255,255,.09); }
  .render-accordion-body[hidden] { display:none !important; }
  .render-mini-accordion {
    margin-top:8px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:12px;
    background:rgba(255,255,255,.02);
    overflow:hidden;
  }
  .render-mini-head {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:10px 14px; background:rgba(255,255,255,.025); color:#fff; text-align:left;
  }
  .render-mini-toggle { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; padding:0; border:0; background:transparent; color:#fff; cursor:pointer; }
  .render-mini-head-main { display:flex; align-items:center; justify-content:space-between; gap:10px; flex:1 1 auto; min-width:0; }
  .render-mini-title { font-size:12px; font-weight:800; color:#d3d7de; letter-spacing:.02em; text-transform:uppercase; }
  .render-mini-head .render-setting { margin-top:0; }
  .render-mini-head .render-setting.compact-status { width:auto; gap:10px; }
  .render-mini-head .render-setting.compact-status > span { min-width:auto; }
  .render-mini-icon { width:18px; height:18px; transition:transform .18s ease; flex:0 0 auto; }
  .render-mini-accordion.open .render-mini-icon { transform:rotate(180deg); }
  .render-mini-body { padding:10px 14px 12px; border-top:1px solid rgba(255,255,255,.09); }
  .render-mini-body[hidden] { display:none !important; }
  .render-mini-toprow { display:grid; grid-template-columns:1fr; gap:8px; }
  .render-panel-card { padding:0; border:0; background:transparent; }
  .render-panel-actions { display:flex; gap:8px; margin-top:8px; }
  .render-panel-actions .btn { flex:1; min-height:44px; }
  .render-status-line { margin-top:0; color:var(--text-dim); font-size:10px; line-height:1.4; }
  .render-settings-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    align-items:end;
  }
  .render-custom-size {
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:9px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:9px;
    background:rgba(255,255,255,.025);
  }
  .render-custom-size[hidden] { display:none !important; }
  .render-setting.compact-status {
    margin-top:0;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    flex-wrap:nowrap;
    width:100%;
  }
  .render-setting.compact-status > span {
    margin-bottom:0;
    min-width:0;
    flex:0 0 auto;
  }
  .render-live-inline { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--text-dim); }
  .render-live-dot { width:8px; height:8px; border-radius:999px; background:#666; }
  .render-live-inline.on .render-live-dot { background:#48d66c; box-shadow:0 0 0 3px rgba(72,214,108,.15); }
  .render-live-inline.on { color:#86f0a1; }
  .render-live-switch {
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    min-width:72px; min-height:34px; padding:0 11px; border-radius:9px;
    border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.045);
    color:var(--text-dim); font:800 11px/1 inherit; cursor:pointer;
  }
  .render-live-switch .render-live-dot { width:8px; height:8px; }
  .render-live-switch.on { color:#86f0a1; border-color:rgba(72,214,108,.35); background:rgba(72,214,108,.10); }
  .render-live-switch.on .render-live-dot { background:#48d66c; box-shadow:0 0 0 3px rgba(72,214,108,.15); }
  .render-cell-span-2 { grid-column:1 / -1; }
  .render-summary-card {
    min-height:56px; display:flex; align-items:flex-end; padding:10px 12px;
    border-radius:12px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.09);
  }
  .render-summary-card strong { color:var(--text); }
  .render-effect-stack { display:flex; flex-direction:column; gap:8px; }
  .render-setting.tight > span { margin-bottom:5px; }
  .render-effect-toprow {
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap:12px;
    align-items:end;
  }
  .render-focus-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .render-focus-corner > span { display:none; }
  .render-focus-corner select,
  .render-focus-corner input { min-height:46px; }
  .render-fog-row { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:12px; align-items:end; margin-top:12px; }
  .render-color-field { display:grid; grid-template-columns:56px minmax(0, 1fr); gap:8px; }
  .render-color-field input[type=color] { width:56px; min-width:56px; min-height:48px; padding:4px; border-radius:9px; border:1px solid rgba(255,255,255,.13); background:#242424; cursor:pointer; }
  .render-color-field input[type=color]::-webkit-color-swatch-wrapper { padding:0; }
  .render-color-field input[type=color]::-webkit-color-swatch { border:none; border-radius:6px; }
  .render-color-field input[type=color]::-moz-color-swatch { border:none; border-radius:6px; }
  .render-effect-hint.compact { margin-top:0; font-size:10px; line-height:1.4; }
  .render-output-summary {
    margin-top: 13px;
    padding: 11px 12px;
    border-radius: 9px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.07);
    color: var(--text-dim);
    font-size: 11px;
    line-height: 1.45;
  }
  .render-output-summary strong { color: #fff; }
  .render-warning {
    display: none;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255,174,0,.10);
    border: 1px solid rgba(255,174,0,.28);
    color: #ffd783;
    font-size: 11px;
    line-height: 1.4;
  }
  .render-warning.show { display: block; }
  .render-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 14px 14px;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .render-dialog-actions button,
  .render-progress-cancel {
    min-width: 110px;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,.14);
    background: #2a2a2a;
    color: #eee;
    font: 800 14px/1 inherit;
    cursor: pointer;
  }
  .render-dialog-actions .primary {
    color: #fff;
    background: var(--accent-bg);
    border-color: var(--accent);
  }
  .render-dialog-actions .primary:disabled { opacity: .42; cursor: not-allowed; }
  .render-progress-card { width: min(390px, calc(100vw - 28px)); }
  .render-dialog [hidden] { display:none !important; }
  .render-progress-label {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-dim);
    font-size: 12px;
  }
  .render-progress-track {
    height: 9px;
    margin: 11px 0 14px;
    overflow: hidden;
    border-radius: 9px;
    background: rgba(255,255,255,.10);
  }
  .render-progress-fill {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: var(--accent-bg);
    transition: width .12s linear;
  }
  .render-progress-actions { display: flex; justify-content: flex-end; }
  .render-panel-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding: 11px 12px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    background: rgba(255,255,255,.035);
  }
  .render-panel-action-copy { min-width: 0; }
  .render-panel-action-title { color: #fff; font-size: 12px; font-weight: 800; }
  .render-panel-action-hint { margin-top: 3px; color: var(--text-dim); font-size: 10px; }
  .render-panel-action .btn { flex: 0 0 auto; }



  /* Fix outliner first-row overlap: keep the eye icon clear of the shared collapse arrow. */
  .outline-item .vis { margin-left:auto; margin-right:28px; flex-shrink:0; }
  /* The shared collapse arrow overlaps only the first/top row. Nested hierarchy
     rows can use that reserved width for readable child names. */
  .outline-item[data-depth]:not([data-depth="0"]) .vis { margin-right:0; }
  .outliner-body { padding-right:4px; }

  /* ── Global UI Alignment & Consistency Patch ──────────────────
     Applied to unify spacing, typography, and border tokens across
     all panels so every tab feels like one coherent design system. */

  /* Consistent slider accent colour across all panels */
  input[type=range] { accent-color: var(--accent); }

  /* section-title-row: consistent top spacing before each section */
  .section-title-row + .section-title-row,
  .section-title-row ~ .section-title-row { margin-top: 4px; }

  /* Sub-section row (used in Object props: Shadows checkbox row) */
  .lighting-mini-row label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-dim);
  }

  /* Slider row value span: tabular numbers, consistent right-align */
  .slider-row label span:last-child {
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    text-align: right;
    flex-shrink: 0;
  }

  /* Unified checkbox appearance across all panels */
  input[type=checkbox].lighting-toggle {
    width: 15px;
    height: 15px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
  }

  /* render-settings-grid: ensure consistent spacing */
  .render-settings-grid { gap: 10px; }

  /* render-accordion gap between accordions */
  .render-tab-panel { gap: 10px; }

  /* Consistent padding on mat right panel control rows */
  .mat-right .slider-row { margin-bottom: 10px; }

  /* Transform inputs: consistent alignment */
  .tp-axis-row { height: 34px; }
  .tp-in { min-height: 32px; text-align: center; }
  .tp-ax { min-width: 14px; }

  /* Ensure all render-setting inputs/selects have consistent height */
  .render-setting input[type="number"],
  .render-setting input[type="text"] { min-height: 44px; }

  /* Consistent bottom margin on btn-row */
  .btn-row { margin-bottom: 2px; }

  /* See-all link styling consistent */
  .see-all {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
    text-decoration: none;
  }

  /* Empty state text consistent */
  .props-empty { font-size: 11px; }

  /* Animation panel title consistent with other panels */
  .anim-title { font-size: 13px; font-weight: 800; letter-spacing: -.01em; }

  /* sub-btn label: keep small but consistent */
  .sub-btn span { font-size: 10px; font-weight: 700; letter-spacing: 0.2px; }

  /* Lighting v2 card body divider */
  .lighting-ui-v2 .lighting-card-body { border-top: 0; }

  /* Unified focus ring for all interactive inputs */
  .tp-in:focus,
  .render-setting input:focus,
  .render-setting select:focus {
    outline: 1px solid rgba(255,140,26,.6);
    border-color: rgba(255,140,26,.4);
  }


  /* ═══════════════════════════════════════════════════════════════
     LAYOUT SYSTEM — spacing tokens, panel-content, property-rows
     Implements the constrained-centre + responsive-grid approach.
  ═══════════════════════════════════════════════════════════════ */

  /* 1 · Spacing tokens */
  :root {
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
  }

  /* 2 · Panel content container — centers + caps width on wide screens */
  .panel-content {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    box-sizing: border-box;
  }

  /* 3 · Property row: [Label 96px] [Slider flex] [Value 48px] */
  .property-row {
    display: grid;
    grid-template-columns: 96px 1fr 48px;
    align-items: center;
    gap: var(--sp-2);
    min-height: 36px;
    margin-bottom: var(--sp-2);
  }
  .property-row:last-child { margin-bottom: 0; }
  .property-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .property-control { width: 100%; min-width: 0; }
  .property-value {
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
  }
  .property-input {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 8px;
    color: var(--text);
    padding: 6px 8px;
    font-size: 12px;
    outline: none;
    box-sizing: border-box;
  }
  .property-input:focus {
    border-color: rgba(255,140,26,.5);
    outline: none;
  }
  /* Color picker inline variant */
  .property-color-input {
    width: 100%;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.10);
    cursor: pointer;
    padding: 2px 4px;
    background: var(--bg-card);
    box-sizing: border-box;
  }
  /* 4 · Two-column settings grid for Material edit area */
  .mat-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
    margin-top: var(--sp-3);
  }


  /* 5 · Subtle settings section (no heavy border, light bg) */
  .mat-edit-section {
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.09);
    min-width: 0;
  }
  .mat-edit-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .55px;
    color: var(--text-dim);
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }

  /* 6 · Texture block inside the Basic column */
  .mat-texture-block {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .mat-texture-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .55px;
    color: var(--text-dim);
    margin-bottom: var(--sp-2);
  }
  .mat-texture-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 9px;
    padding: 6px 8px;
  }
  .mat-texture-thumb {
    width: 36px; height: 36px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.10);
    background: #111;
  }
  .mat-texture-name {
    flex: 1;
    font-size: 11px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* 7 · Emission toggle row (inside property-row) */
  .property-row .em-toggle-row {
    margin: 0;
    padding: 0;
    gap: 8px;
  }

  /* 8 · Action row at bottom of material editor */
  .mat-action-row {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .mat-action-row .btn { flex: 1; justify-content: center; font-size: 12px; }

  /* 9 · Hint text at panel bottom */
  .mat-hint {
    margin-top: var(--sp-3);
    font-size: 10px;
    color: var(--text-dimmer, rgba(255,255,255,.3));
    text-align: center;
    line-height: 1.4;
  }

  /* 10 · Apply panel-content centering to all tabs on wide screens */
  .props-inner > .panel-content {
    min-height: 0;
  }


  /* ── Panel-content responsive padding ─────────────────── */
  .panel-content .section-title-row { padding: 0; }

  /* ── Render panel inside panel-content ────────────────── */
  .panel-content .render-tab-panel { width: 100%; }
  .panel-content .render-accordion { width: 100%; }

  /* ── Lighting panel inside panel-content ──────────────── */
  .panel-content .studio-lighting-popup { margin-top: var(--sp-2); }
  .panel-content .lighting-panel-summary { width: 100%; }

  /* ── Global slider-row fix: constrain value width ─────── */
  .slider-row label span:first-child {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .slider-row label span:last-child {
    flex-shrink: 0;
    min-width: 36px;
  }

  /* ── Property-row inside mat-edit-section: sliders fill column ── */
  .mat-edit-section .property-control[type=range] {
    accent-color: var(--accent);
    width: 100%;
  }
  .mat-edit-section .property-row {
    grid-template-columns: 72px 1fr 44px;
  }

  /* ── Emission controls inside mat-edit-section ──────────── */
  .mat-edit-section .em-controls { max-height: 120px; }
  .mat-edit-section .em-controls.open { max-height: 200px; opacity: 1; }
  .mat-edit-section .em-toggle-row { cursor: pointer; -webkit-tap-highlight-color: transparent; }

  /* ── Material library strip: full-width, visible border ─ */
  #ml-list { width: 100%; box-sizing: border-box; }

  /* ── Mat action row: danger button styled differently ───── */
  .mat-action-row .btn.danger,
  .material-assign-row .btn.danger {
    border-color: rgba(224,80,80,.25);
    color: #e05050;
  }
  .mat-action-row .btn.danger:active,
  .material-assign-row .btn.danger:active { background: rgba(224,80,80,.12); }

  /* ── panel-content prevents double-wrapping artifacts ───── */
  .panel-content > .panel-content { max-width: none; margin: 0; }




  /* ── Selected camera thumbnail in viewport ────────────────────────────── */
  #vp-camera-preview {
    position: absolute;
    top: 165px;
    left: 56%;
    transform: translateX(-50%);
    width: clamp(150px, 24vw, 220px);
    z-index: 7;
    display: none;
    padding: 6px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 11px;
    background: rgba(17,17,18,0.88);
    box-shadow: 0 8px 24px rgba(0,0,0,0.28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  #vp-camera-preview[data-show] { display: block; }
  #vp-camera-preview .vpcp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 2px 5px;
    pointer-events: none;
  }
  #vp-camera-preview .vpcp-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(255,255,255,0.92);
    font-size: 10px;
    font-weight: 750;
  }
  #vp-camera-preview .vpcp-status {
    flex: 0 0 auto;
    color: var(--accent);
    font-size: 8px;
    font-weight: 850;
    letter-spacing: .35px;
  }
  #vp-camera-preview-hit {
    width: 100%;
    height: 118px;
    padding: 3px;
    border: 1px solid rgba(255,140,26,.52);
    border-radius: 8px;
    background: #111113;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  #vp-camera-preview-hit:active { background: #171719; }
  #vp-camera-preview-canvas {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 110px;
    border-radius: 5px;
    background: #242424;
    pointer-events: none;
  }
  #vp-camera-preview .vpcp-hint {
    margin-top: 4px;
    color: rgba(255,255,255,0.50);
    font-size: 8px;
    line-height: 1.2;
    text-align: center;
    pointer-events: none;
  }
  #minder-camera-edit-overlay.open ~ #app #vp-camera-preview { display:none !important; }


  /* ── Camera fullscreen edit overlay (Phase 4) ─────────────────────────── */
  #minder-camera-edit-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(8,8,10,0.96);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  #minder-camera-edit-overlay.open { display: flex; }
  #minder-camera-edit-overlay .mce-stage {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  }
  #minder-camera-edit-overlay .mce-stage canvas {
    display: block;
    background: #171719;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 18px 48px rgba(0,0,0,0.45);
    touch-action: none;
  }
  #minder-camera-edit-overlay .mce-badge,
  #minder-camera-edit-overlay .mce-sub {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(12,12,12,0.72);
    border: 1px solid rgba(255,255,255,0.10);
    color: #f3f3f3;
    text-align: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none;
  }
  #minder-camera-edit-overlay .mce-badge {
    top: 14px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.2px;
  }
  #minder-camera-edit-overlay .mce-sub {
    bottom: 78px;
    font-size: 10px;
    color: rgba(255,255,255,0.76);
    font-weight: 600;
  }

/* Print Mode Phase 3: touch-first, non-destructive slice placement preview. */
.slice-placement-overlay{position:absolute;inset:0;z-index:24;pointer-events:none;overflow:hidden;touch-action:none}
.slice-instruction{position:absolute;top:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;padding:7px 11px;border:1px solid rgba(255,140,26,.42);border-radius:8px;background:rgba(24,24,24,.92);box-shadow:0 5px 18px rgba(0,0,0,.35);color:var(--text);font-size:12px}
.slice-instruction strong{text-transform:uppercase;color:var(--accent);letter-spacing:.5px}.slice-instruction span{color:var(--text-dim)}
.slice-preview-line{position:absolute;height:3px;transform-origin:0 50%;border-radius:2px;background:var(--accent);box-shadow:0 0 0 1px rgba(0,0,0,.7),0 0 12px rgba(255,140,26,.8)}
.slice-handle{position:absolute;width:42px;height:42px;transform:translate(-50%,-50%);pointer-events:auto;touch-action:none;border:2px solid var(--accent);border-radius:50%;background:var(--bg-panel);color:#fff;font:800 14px/1 inherit;box-shadow:0 2px 12px rgba(0,0,0,.65);cursor:grab}
.slice-handle:active{cursor:grabbing;background:var(--accent-bg)}
.print-slice-state{display:grid;gap:6px;margin-bottom:8px;padding:8px 10px;border:1px solid rgba(255,140,26,.3);border-radius:7px;background:rgba(255,140,26,.06);font-size:12px}.print-slice-state strong{text-transform:uppercase;color:var(--accent)}.print-slice-state span{color:var(--text-dim)}
.print-slice-ab{display:flex;align-items:center;gap:8px;color:#fff}.print-slice-ab b{display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--accent);border-radius:50%}.print-slice-ab i{height:2px;flex:1;background:var(--accent)}
.print-mode-section-body>.btn+.btn{margin-top:8px}
/* Print Mode Phase 5: cap-locked Print Fit placement preview. */
.print-fit-placement-overlay{position:absolute;inset:0;z-index:25;pointer-events:none;overflow:hidden;touch-action:none}
.print-fit-handle{position:absolute;width:44px;height:44px;transform:translate(-50%,-50%);pointer-events:auto;touch-action:none;border:2px solid var(--accent);border-radius:50%;background:rgba(24,24,24,.92);color:#fff;font:800 20px/1 inherit;box-shadow:0 2px 14px rgba(0,0,0,.65),0 0 0 4px rgba(255,140,26,.14);cursor:grab}
.print-fit-handle:active{cursor:grabbing;background:var(--accent-bg)}
.print-fit-title{margin-bottom:7px;color:var(--text);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.45px}
.print-fit-choices{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.print-fit-choice{min-height:40px;display:flex;align-items:center;gap:7px;padding:6px 9px;border:1px solid rgba(255,255,255,.09);border-radius:7px;background:var(--bg-card-hover);color:var(--text-dim);font-size:12px;cursor:pointer}
.print-fit-choice.active{border-color:var(--accent);background:var(--accent-bg);color:var(--text)}
.print-fit-choice input{accent-color:var(--accent)}
.print-fit-clearance{min-height:40px;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;color:var(--text);font-size:12px}
.print-fit-clearance input{width:70px;min-height:34px;padding:5px 7px;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:var(--bg);color:var(--text);font:inherit;text-align:right}
.print-fit-sides{display:flex;justify-content:space-between;gap:8px;margin-bottom:8px;padding:7px 9px;border:1px solid rgba(255,140,26,.28);border-radius:7px;background:rgba(255,140,26,.06);color:var(--text-dim);font-size:11px}
/* Print Mode Phase 7 — compact dimensions, grounding and export */
.print-export-check,.print-export-target,.print-export-format{min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--text);font-size:12px}.print-export-check{justify-content:flex-start}.print-export-check input{accent-color:var(--accent)}.print-export-dimensions{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:7px 0}.print-export-dimensions span{min-width:0;padding:7px 5px;border:1px solid rgba(255,255,255,.08);border-radius:6px;background:var(--bg);color:var(--text);font-size:11px;text-align:center}.print-export-dimensions b{display:block;margin-bottom:3px;color:var(--text-dim);font-size:9px;letter-spacing:.4px;text-transform:uppercase}.print-export-target input,.print-export-format select{width:92px;min-height:34px;padding:5px 7px;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:var(--bg);color:var(--text);font:inherit;text-align:right}.print-export-format select{text-align:left}.print-mode-section-body>[data-print-action="apply-size"]+.btn,.print-mode-section-body>[data-print-action="place-ground"]+.print-export-format,.print-export-format+.btn{margin-top:7px}
/* Print Mode properties workspace — replaces the old overlay sheet. */
.print-tab-btn,.print-tab-btn[hidden],body:not(.mode-print) .print-tab-btn{display:none!important}.print-tab-btn{flex:1;min-width:0;height:100%;align-items:center;justify-content:center;gap:6px;padding:7px 8px;border:0;border-bottom:3px solid transparent;background:transparent;color:var(--text-dim);font:700 11px/1 inherit;cursor:pointer}.print-tab-btn.active{border-bottom-color:var(--accent);background:var(--accent-bg);color:#fff!important}body.mode-print .props-tab-bar .tab-btn,body.mode-print .panel-drill-nav{display:none!important}body.mode-print .print-tab-btn:not([hidden]){display:flex!important}.panel-print-compact{height:34dvh!important;max-height:46dvh!important}.print-properties-content{display:grid;gap:7px;padding:10px}.print-properties-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.07)}.print-properties-heading b{color:var(--text);font-size:12px;text-transform:uppercase}.print-properties-heading span{color:var(--text-dim);font-size:10px;text-align:right}.print-ready-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.print-ready-option{min-height:38px;display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid rgba(255,255,255,.09);border-radius:7px;background:var(--bg-card-hover);color:var(--text);font-size:12px;cursor:pointer}.print-ready-option input{width:17px;height:17px;margin:0;accent-color:var(--accent)}.print-ready-option span:nth-child(2){min-width:0;flex:1}.print-ready-option-status{flex:0 0 auto;font-weight:800}.print-ready-option-status.ok{color:#76d895}.print-ready-option-status.warning{color:#ffb45d}.print-slice-type{min-height:38px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--text);font-size:12px}.print-slice-type select{min-height:34px;padding:5px 8px;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:var(--bg);color:var(--text)}.print-export-unit{display:grid;grid-template-columns:1fr 1fr;gap:5px}.print-export-unit button{min-height:36px;border:1px solid rgba(255,255,255,.1);border-radius:6px;background:var(--bg);color:var(--text-dim);font:700 11px/1 inherit}.print-export-unit button.active{border-color:var(--accent);background:var(--accent-bg);color:var(--accent)}@media(max-width:520px){.print-tab-btn{padding:4px 6px;font-size:10px}.panel-print-compact{height:38dvh!important}.print-properties-heading span{display:none}.print-ready-options{grid-template-columns:1fr}}
/* Slice-only touch workflow. Existing Print tabs and other sections are unchanged. */
.print-simple-slice{padding:20px 28px;display:flex;flex-direction:column;gap:18px}
.print-simple-slice>p{margin:0;color:var(--text-muted,#999)}
.print-simple-slice>.btn{min-height:64px;border-radius:13px}
.print-key-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px}
.print-key-row select{min-height:54px;min-width:160px;background:var(--bg-panel,#282828);color:var(--text-main,#eee);border:1px solid var(--border,#444);border-radius:12px;padding:0 14px}
.print-key-stepper{display:flex;align-items:center;gap:8px}.print-key-stepper>.btn{min-width:48px;min-height:54px}.print-key-number{display:flex;align-items:center;gap:4px;background:var(--bg-panel,#282828);border:1px solid var(--border,#444);border-radius:12px;padding:0 8px;min-height:54px}.print-key-number input{width:72px;min-width:0;background:transparent;color:inherit;border:0;font:inherit;text-align:right}.print-key-status{color:var(--text-main,#eee)}.print-key-status small{display:block;margin-top:6px;color:var(--text-muted,#999)}
.slice-viewport-actions{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:12px;pointer-events:auto}.slice-viewport-actions .btn{min-height:48px;min-width:84px}
.slice-handle{width:44px;height:44px;border:0;background:transparent;box-shadow:none;font-size:0}.slice-handle::after{content:"";position:absolute;inset:15px;border-radius:50%;background:var(--accent,#ff8c1a);box-shadow:0 0 0 2px #222}.slice-handle:active{background:transparent}
@media(max-width:400px){.print-simple-slice{padding:16px}.print-key-row{gap:8px}.print-key-stepper{gap:4px}}

.print-cut-picking .outer-main-tool,.print-cut-picking .left-tool,.print-cut-picking #outliner{pointer-events:none;opacity:.45}

/* Compact Slice properties: no effect on Print Ready, Export or viewport handles. */
.print-properties-content.print-simple-slice{padding:8px 12px;gap:6px}
.print-simple-slice .print-slice-actions{display:grid;grid-template-columns:repeat(2,minmax(0,180px));gap:8px;align-items:center}
.print-simple-slice .print-slice-actions>.btn{width:100%;height:38px;min-height:38px;max-height:38px;margin:0;padding:5px 10px;border-radius:7px;font-size:12px;line-height:1.2;text-align:center}
.print-simple-slice .print-key-row{min-height:36px;gap:8px;margin:0;padding:0;font-size:12px}
.print-simple-slice .print-key-row select{height:36px;min-height:36px;width:156px;min-width:0;max-width:60%;padding:4px 8px;border-radius:7px;font-size:12px}
.print-simple-slice .print-key-stepper{gap:4px}
.print-simple-slice .print-key-stepper>.btn{height:36px;min-height:36px;width:36px;min-width:36px;margin:0;padding:3px;border-radius:7px;font-size:14px}
.print-simple-slice .print-key-number{height:36px;min-height:36px;padding:0 6px;border-radius:7px;font-size:12px}
.print-simple-slice .print-key-number input{width:62px;height:30px;min-height:0;margin:0;padding:2px 0;font-size:12px}
.print-simple-slice .print-key-status{font-size:11px;line-height:1.3;margin:0}.print-simple-slice .print-key-status small{margin-top:3px}

/* Optional Play update notice; hidden elements must never intercept editing. */
#minder-update-notice{position:fixed;top:calc(62px + env(safe-area-inset-top));left:12px;right:12px;z-index:100100;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px;background:#242424;color:#fff;border:1px solid #e99224;border-radius:12px;box-shadow:0 6px 24px #0008;font:13px/1.4 system-ui}
#minder-update-notice span{flex:1 1 190px}
#minder-update-notice button{min-height:44px;padding:8px 14px;border:1px solid #777;border-radius:8px;background:#333;color:#fff;font:inherit;cursor:pointer}
#minder-update-notice button:first-of-type{background:#f0a23b;color:#171717;border-color:#f0a23b;font-weight:700}
#minder-update-lock{position:fixed;inset:0;z-index:2147483647;display:grid;place-items:center;padding:24px;background:#151515ed;color:#fff;text-align:center;font:16px/1.5 system-ui;touch-action:none}
#minder-update-notice[hidden],#minder-update-lock[hidden]{display:none!important}
/* Remote switches hide ad-only model hints without changing entitlements. */
body.minder-rewarded-disabled .minder-reward-hint { display: none; }