/*
 *  CSS TABLE OF CONTENTS
 *  ─────────────────────────────────────────────────────────────────────────
 *  §CSS·1   DESIGN TOKENS
 *  §CSS·2   RESET & BASE
 *  §CSS·3   LAYOUT
 *  §CSS·4   HEADER
 *  §CSS·5   SIDEBAR & CARDS
 *  §CSS·6   CONTROLS (buttons, sliders, toggles)
 *  §CSS·7   FORM INPUTS
 *  §CSS·8   COLLAPSIBLES
 *  §CSS·9   OVERLAYS
 *  §CSS·10  MATERIAL COMPONENTS
 *  §CSS·11  ANIMATION & CAMERA COMPONENTS
 *  §CSS·12  DISPLAY & HDRI COMPONENTS
 *  §CSS·13  BOTTOM BAR, TOAST & TOOLTIP
 *  §CSS·14  RESPONSIVE & MOBILE
 *  ─────────────────────────────────────────────────────────────────────────
 */

/* §CSS·1  DESIGN TOKENS
   Single source of truth for every colour, dimension, z-index,
   border-radius, and timing value used in the stylesheet.              */
:root {
  /* ── Colour palette ───────────────────────────────────────────────── */
  --bg:               #0c0906;
  --panel:            #110e09;
  --panel2:           #17120c;
  --sunken:           #0a0805;   /* recessed interior — darker than bg, for open section bodies */
  --border:           #231c12;
  --border2:          #2e2418;

  --accent:           #c49060;
  --accent-light:     #dbb07a;
  --accent-dim:       #3d2510;
  --accent-deep:      #5a3515;   /* btn-accent hover, mobile FAB gradient stop */
  --accent-deeper:    #6a4020;   /* btn-accent hover gradient end */
  --accent-glow:      rgba(196,144,96,0.18);
  --accent-hover-bg:  rgba(196,144,96,.04);  /* upload-area hover tint */
  --accent-strip-bg:  rgba(196,144,96,.08);  /* HDRI active strip background */
  --accent-drag-bg:   rgba(196,144,96,.10);  /* drop-overlay drag-active tint */

  --text:             #ede5d8;
  --muted:            #6b5a48;
  --muted2:           #3d3025;

  --success:          #7ec47a;
  --info:             #c4a87a;
  --warn:             #d4884a;
  --info-bg:          rgba(196,168,122,.08);  /* anim-hint-banner fill */
  --info-border:      rgba(196,168,122,.18);  /* anim-hint-banner stroke */

  /* ── Scene colours (also referenced in JS DEFAULT_BG_HEX) ──────────── */
  --header-grad-start: #1c1508;  /* header gradient warm end */
  --scene-bg:          #1a1208;  /* initial THREE.js scene background */
  --checker-dark:      #2a2420;  /* checkerboard tile A (tex / logo preview) */
  --checker-light:     #1a1410;  /* checkerboard tile B */

  /* ── Overlays / shadows ───────────────────────────────────────────── */
  --vignette-bg:       rgba(0,0,0,.72);
  --drop-overlay-bg:   rgba(12,9,6,.88);
  --export-overlay-bg: rgba(12,9,6,.93);
  --backdrop-bg:       rgba(0,0,0,.6);
  --shadow-md:         rgba(0,0,0,.5);
  --shadow-strong:     rgba(0,0,0,.55);
  --shadow-dark:       rgba(0,0,0,.7);

  /* ── Layout dimensions ────────────────────────────────────────────── */
  --header-height:     54px;
  --bottom-bar-height: 34px;
  --sidebar-width:     272px;
  --toast-bottom:      46px;   /* clears bottom-bar + small gap */
  --mob-fab-bottom:    52px;   /* clears bottom-bar for mobile FAB */

  /* ── Z-index scale ────────────────────────────────────────────────── */
  --z-vignette:     2;
  --z-logo:         3;
  --z-sidebar:      5;
  --z-drop:         10;
  --z-export:       20;
  --z-mob-backdrop: 49;
  --z-mob-sidebar:  50;
  --z-mob-fab:      100;
  --z-tip:          600;
  --z-modal:        900;
  --z-toast:        1000;

  /* ── Border radii ─────────────────────────────────────────────────── */
  --radius-xs:     3px;
  --radius-sm:     4px;
  --radius-md:     6px;
  --radius-lg:     8px;
  --radius-xl:     10px;
  --radius-pill:   20px;
  --radius-circle: 50%;

  /* ── Transition durations ─────────────────────────────────────────── */
  --dur-fast: 0.15s;
  --dur-med:  0.2s;
  --dur-slow: 0.3s;
}

/* §CSS·2  RESET & BASE
   ─────────────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }

html,body {
  width:100%; height:100%; overflow:hidden;
  background:var(--bg); color:var(--text);
  font-family:'DM Sans',sans-serif; font-size:13px; font-weight:400;
}

.login-locked #app,
.login-locked #mob-panel-btn,
.login-locked #mob-backdrop,
.login-locked #toast-container,
.login-locked #tip { visibility:hidden }

#login-screen {
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 36%, #1b140c 0%, var(--bg) 62%);
}
#login-card {
  width:min(320px, calc(100vw - 32px));
  display:flex; flex-direction:column; gap:12px;
  padding:22px; border:1px solid var(--border2); border-radius:var(--radius-lg);
  background:var(--panel); box-shadow:0 18px 60px var(--shadow-dark);
}
.login-brand {
  font-family:'Bebas Neue',sans-serif; font-size:28px; letter-spacing:3px;
  color:var(--accent); line-height:1; text-align:center;
}
.login-sub {
  margin-top:-8px; margin-bottom:4px; font-size:10px; color:var(--muted);
  letter-spacing:1.6px; text-align:center; text-transform:uppercase;
}
.login-field { display:flex; flex-direction:column; gap:5px; font-size:11px; color:var(--muted) }
.login-field input {
  width:100%; height:34px; padding:0 10px;
  border:1px solid var(--border2); border-radius:var(--radius-md);
  background:var(--bg); color:var(--text); outline:none;
}
.login-field input:focus { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-glow) }
#login-error { min-height:14px; font-size:11px; color:var(--warn); text-align:center }
#login-submit {
  height:36px; border:1px solid var(--accent); border-radius:var(--radius-md);
  background:linear-gradient(135deg,var(--accent-dim),var(--accent-deep));
  color:var(--accent-light); cursor:pointer; font-weight:600;
}
#login-submit:hover { border-color:var(--accent-light); color:var(--text) }

/* §CSS·3  LAYOUT
   ─────────────────────────────────────────────────────────────────────── */
#app { display:flex; flex-direction:column; width:100vw; height:100vh; overflow:hidden }
#workspace { flex:1; display:flex; overflow:hidden; min-height:0 }
#viewport {
  flex:1; position:relative; display:flex; align-items:center;
  justify-content:center; background:var(--bg); overflow:hidden; min-width:0;
}
#canvas-wrap {
  position:relative; width:100%; height:100%;
  max-width:100%; max-height:100%; flex:none;
}
#canvas-wrap canvas { display:block; width:100%!important; height:100%!important }

/* §CSS·4  HEADER
   ─────────────────────────────────────────────────────────────────────── */
header {
  height:var(--header-height); flex-shrink:0; display:flex; align-items:center;
  gap:14px; padding:0 20px;
  background:linear-gradient(135deg,var(--header-grad-start) 0%,var(--bg) 100%);
  border-bottom:1px solid var(--border); z-index:var(--z-sidebar);
}
.hdr-logo-wrap { display:flex; flex-direction:column }
.hdr-logo { font-family:'Bebas Neue',sans-serif; font-size:23px; letter-spacing:3px; color:var(--accent); line-height:1 }
.hdr-logo-sub { font-size:10px; color:var(--muted); letter-spacing:1.5px; text-transform:uppercase; line-height:1; margin-top:2px }
.hdr-sep { width:1px; height:28px; background:var(--border2); flex-shrink:0 }
.hdr-tagline { font-size:11px; color:var(--muted); letter-spacing:1px; text-transform:uppercase }
.hdr-spacer { flex:1 }
#status-pill {
  display:flex; align-items:center; gap:7px; padding:5px 13px;
  border-radius:var(--radius-pill); border:1px solid var(--border2);
  background:var(--panel2); font-size:11px; font-weight:500; letter-spacing:.5px; color:var(--muted);
  transition:border-color var(--dur-slow),box-shadow var(--dur-slow),color var(--dur-slow);
  user-select:none;
}
#status-pill .dot {
  width:6px; height:6px; border-radius:var(--radius-circle);
  background:var(--muted); flex-shrink:0; transition:background var(--dur-slow);
}
#status-pill.s-loading { border-color:var(--warn); color:var(--warn); box-shadow:0 0 10px rgba(212,136,74,.28) }
#status-pill.s-loading .dot { background:var(--warn) }
#status-pill.s-ready { border-color:var(--success); color:var(--success); box-shadow:0 0 10px rgba(126,196,122,.28) }
#status-pill.s-ready .dot { background:var(--success) }

/* §CSS·5  SIDEBAR & CARDS
   ─────────────────────────────────────────────────────────────────────── */
aside.sidebar {
  width:var(--sidebar-width); flex-shrink:0; background:var(--panel);
  border-left:1px solid var(--border); display:flex; flex-direction:column;
  overflow-y:auto; overflow-x:hidden;
  scrollbar-width:thin; scrollbar-color:var(--border2) transparent;
  z-index:var(--z-sidebar);
}
aside.sidebar::-webkit-scrollbar { width:4px }
aside.sidebar::-webkit-scrollbar-track { background:transparent }
aside.sidebar::-webkit-scrollbar-thumb { background:var(--border2); border-radius:var(--radius-xs) }

.sb-inner { padding:12px; display:flex; flex-direction:column; gap:7px }

.sec-title {
  font-family:'Bebas Neue',sans-serif; font-size:11px; letter-spacing:3px;
  color:var(--muted); text-transform:uppercase;
  padding:8px 0 4px 13px; position:relative; margin-top:4px;
}
/* Left accent stripe on section titles */
.sec-title::before {
  content:''; position:absolute; left:0; top:50%;
  transform:translateY(-50%) translateY(2px);
  width:3px; height:12px; background:var(--accent); border-radius:var(--radius-xs);
}

.card {
  background:var(--panel2); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:12px;
  display:flex; flex-direction:column; gap:8px;
}
.empty-hint {
  display:flex; align-items:center; justify-content:center;
  min-height:56px; font-size:11px; color:var(--muted2); font-style:italic;
}
.divider { height:1px; background:var(--border); margin:2px 0 }

/* §CSS·6  CONTROLS (buttons, sliders, toggles)
   ─────────────────────────────────────────────────────────────────────── */

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  width:100%; padding:10px 12px; border-radius:var(--radius-lg);
  background:var(--panel2); border:1px solid var(--border2); color:var(--text);
  font-family:'DM Sans',sans-serif; font-size:12px; font-weight:500;
  cursor:pointer; text-align:center;
  transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast),
             transform var(--dur-fast),box-shadow var(--dur-fast);
  line-height:1; white-space:nowrap;
}
.btn:hover  { background:#1f1810; border-color:var(--accent); transform:translateY(-1px); box-shadow:0 3px 12px var(--shadow-md) }
.btn:active { background:var(--accent-dim); transform:translateY(0); box-shadow:none }
.btn:focus-visible { outline:none; border-color:var(--accent-light); box-shadow:0 0 0 2px var(--accent-glow) }
.btn:disabled,
.btn[disabled] { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; pointer-events:none }
/* Persistent engaged state — e.g. the active transport segment */
.btn.active { background:var(--accent-dim); border-color:var(--accent); color:var(--accent-light) }
/* Inline icon glyphs inherit the button's text colour and align with the label */
.btn .ico { width:14px; height:14px; flex-shrink:0; display:inline-flex }
.btn .ico svg { display:block; width:100%; height:100% }

.btn-accent {
  background:linear-gradient(135deg,var(--accent-dim) 0%,var(--accent-deep) 100%);
  border-color:var(--accent); color:var(--accent-light);
}
.btn-accent:hover {
  background:linear-gradient(135deg,var(--accent-deep) 0%,var(--accent-deeper) 100%);
  border-color:var(--accent-light); box-shadow:0 4px 16px var(--accent-glow);
}
/* Quiet / ghost tier for clearly secondary actions */
.btn-quiet { background:transparent; border-color:var(--border); color:var(--muted) }
.btn-quiet:hover { background:var(--accent-hover-bg); border-color:var(--accent); color:var(--accent-light) }
.btn-sm { padding:7px 10px; font-size:11px }
.btn-sm .ico { width:13px; height:13px }
.btn-xs {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 8px; font-size:10px; border-radius:var(--radius-sm);
  background:transparent; border:1px solid var(--accent); color:var(--accent);
  cursor:pointer; white-space:nowrap; transition:background var(--dur-fast);
}
.btn-xs:hover { background:var(--accent-dim) }
.btn-xs .ico { width:11px; height:11px; flex-shrink:0; display:inline-flex }
.btn-xs .ico svg { display:block; width:100%; height:100% }

/* ── Sliders ──────────────────────────────────────────────────────────── */
input[type=range] {
  -webkit-appearance:none; appearance:none; width:100%; height:4px;
  border-radius:var(--radius-xs); outline:none; cursor:pointer; --fill:0%;
  background:linear-gradient(to right,
            var(--accent) 0%, var(--accent) var(--fill),
            var(--border2) var(--fill), var(--border2) 100%);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:14px; height:14px; border-radius:var(--radius-circle);
  background:var(--accent-light); border:2px solid var(--bg);
  box-shadow:0 0 8px var(--accent-glow); cursor:pointer;
  transition:box-shadow var(--dur-fast),transform var(--dur-fast);
}
input[type=range]::-moz-range-thumb {
  width:14px; height:14px; border-radius:var(--radius-circle);
  background:var(--accent-light); border:2px solid var(--bg);
  box-shadow:0 0 8px var(--accent-glow); cursor:pointer;
  transition:box-shadow var(--dur-fast),transform var(--dur-fast);
}
/* Firefox fills the track natively — no JS needed there */
input[type=range]::-moz-range-track    { height:4px; background:var(--border2); border-radius:var(--radius-xs) }
input[type=range]::-moz-range-progress { height:4px; background:var(--accent);  border-radius:var(--radius-xs) }
input[type=range]:hover::-webkit-slider-thumb         { transform:scale(1.12); box-shadow:0 0 0 4px var(--accent-glow) }
input[type=range]:hover::-moz-range-thumb             { transform:scale(1.12); box-shadow:0 0 0 4px var(--accent-glow) }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow:0 0 0 4px var(--accent-glow) }
input[type=range]:focus-visible::-moz-range-thumb     { box-shadow:0 0 0 4px var(--accent-glow) }

/* Floating value bubble that rides the slider thumb while dragging */
.range-bubble {
  position:fixed; z-index:1100; transform:translate(-50%,-100%);
  margin-top:-9px; padding:3px 8px; border-radius:var(--radius-sm);
  background:var(--accent-light); color:#160f08;
  font-family:'DM Sans',sans-serif; font-size:11px; font-weight:600;
  font-variant-numeric:tabular-nums; white-space:nowrap; pointer-events:none;
  box-shadow:0 3px 12px var(--shadow-md);
  opacity:0; transform-origin:bottom center;
  transition:opacity var(--dur-fast),transform var(--dur-fast); will-change:left,top;
}
.range-bubble::after {
  content:''; position:absolute; left:50%; bottom:-4px; transform:translateX(-50%);
  border:4px solid transparent; border-top-color:var(--accent-light); border-bottom:0;
}
.range-bubble.show { opacity:1 }
.sl-row { display:flex; flex-direction:column; gap:5px }
#btn-reset-photo { margin-top:14px }
.sl-row .sl-label {
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; color:var(--muted);
}
.sl-row .sl-label .sv { color:var(--accent-light); font-weight:500; font-size:11px; font-variant-numeric:tabular-nums; cursor:text; padding:0 3px; border-radius:3px; outline:none; min-width:16px; text-align:right }
.sl-row .sl-label .sv:hover { background:var(--accent-strip-bg) }
.sl-row .sl-label .sv:focus { background:var(--accent-drag-bg); box-shadow:0 0 0 1px var(--accent) }
.sl-num-row { display:flex; align-items:center; gap:6px }
.sl-num-row input[type=range]  { flex:1 }
.sl-num-row input[type=number] { width:52px; flex-shrink:0 }

/* ── Toggle switches ─────────────────────────────────────────────────── */
.toggle {
  width:34px; height:19px; border-radius:var(--radius-xl);
  border:1px solid var(--border2); background:var(--muted2);
  cursor:pointer; position:relative; flex-shrink:0;
  transition:background var(--dur-med),border-color var(--dur-med); outline:none;
}
/* The sliding knob */
.toggle::after {
  content:''; position:absolute; top:2px; left:2px;
  width:13px; height:13px; border-radius:var(--radius-circle);
  background:var(--muted); box-shadow:0 1px 3px var(--shadow-dark);
  transition:left var(--dur-med),background var(--dur-med),transform var(--dur-med),box-shadow var(--dur-med);
}
.toggle:focus-visible { outline:none; box-shadow:0 0 0 2px var(--accent-glow) }
.toggle.on { background:var(--accent-dim); border-color:var(--accent) }
.toggle.on::after { left:17px; background:var(--accent); transform:scale(1.06); box-shadow:0 1px 4px var(--shadow-dark),0 0 6px var(--accent-glow) }
.toggle-row {
  display:flex; align-items:center; justify-content:space-between;
  font-size:11px; color:var(--muted); padding:2px 0;
}

/* §CSS·7  FORM INPUTS
   ─────────────────────────────────────────────────────────────────────── */
select {
  background:var(--bg); border:1px solid var(--border2); border-radius:var(--radius-md);
  color:var(--text); font-family:'DM Sans',sans-serif; font-size:12px;
  padding:6px 8px; width:100%; outline:none; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b5a48'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center; padding-right:24px;
}
select:hover { border-color:var(--accent) }
select option { background:var(--panel2); color:var(--text) }

input[type=number] {
  background:var(--bg); border:1px solid var(--border2); border-radius:var(--radius-sm);
  color:var(--text); font-family:'DM Sans',sans-serif; font-size:11px;
  padding:4px 6px; width:60px; outline:none; -moz-appearance:textfield;
  font-variant-numeric:tabular-nums;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none }
input[type=number]:hover,
input[type=number]:focus { border-color:var(--accent) }

input[type=text] {
  background:var(--bg); border:1px solid var(--border2); border-radius:var(--radius-md);
  color:var(--text); font-family:'DM Sans',sans-serif; font-size:12px;
  padding:7px 10px; width:100%; outline:none;
}
input[type=text]:hover,
input[type=text]:focus { border-color:var(--accent) }

input[type=color] {
  width:32px; height:24px; border:1px solid var(--border2); border-radius:var(--radius-sm);
  background:var(--bg); cursor:pointer; padding:1px; flex-shrink:0;
}
input[type=color]:hover { border-color:var(--accent) }

.color-row {
  display:flex; align-items:center; justify-content:space-between;
  font-size:11px; color:var(--muted); padding:2px 0;
}
.color-ctl { display:inline-flex; align-items:center; gap:6px }
.swatch-reset {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; padding:0; flex-shrink:0;
  border:1px solid var(--border2); border-radius:var(--radius-sm);
  background:var(--panel2); color:var(--muted); cursor:pointer;
  transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast);
}
.swatch-reset:hover { border-color:var(--accent); color:var(--accent-light); background:var(--accent-hover-bg) }
.swatch-reset:focus-visible { outline:none; border-color:var(--accent-light); box-shadow:0 0 0 2px var(--accent-glow) }
.swatch-reset svg { width:13px; height:13px; display:block }
.select-row {
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; font-size:11px; color:var(--muted);
}
.select-row select { width:auto; flex:1 }

.filename-row { display:flex; flex-direction:column; gap:4px }
.filename-row label { font-size:10px; color:var(--muted); letter-spacing:.3px }

.upload-area {
  border:1.5px dashed var(--border2); border-radius:var(--radius-lg);
  padding:14px 10px; text-align:center; cursor:pointer;
  font-size:11px; color:var(--muted); line-height:1.6;
  transition:border-color var(--dur-med),color var(--dur-med),background var(--dur-med);
  user-select:none;
}
.upload-area:hover {
  border-color:var(--accent); color:var(--accent-light); background:var(--accent-hover-bg);
}
.upload-area .ua-icon { font-size:18px; display:block; margin-bottom:4px; opacity:.7 }
.upload-area .ua-icon svg { width:22px; height:22px; display:inline-block }

/* §CSS·8  COLLAPSIBLES
   ─────────────────────────────────────────────────────────────────────── */
details>summary {
  list-style:none; cursor:pointer; padding:9px 12px 9px 14px;
  display:flex; align-items:center; gap:8px; color:var(--muted);
  font-family:'Bebas Neue',sans-serif; font-size:11px; letter-spacing:3px;
  text-transform:uppercase; background:var(--panel2); border:1px solid var(--border);
  border-radius:var(--radius-lg); user-select:none;
  transition:border-color var(--dur-fast); position:relative;
}
details>summary::-webkit-details-marker { display:none }
/* Left accent stripe */
details>summary::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:12px; background:var(--accent);
  border-radius:0 var(--radius-xs) var(--radius-xs) 0;
}
/* Chevron — rotates when open */
details>summary::after {
  content:'▼'; font-size:8px; margin-left:auto;
  transition:transform var(--dur-med); color:var(--muted); font-family:'DM Sans',sans-serif;
}
details[open]>summary { border-radius:var(--radius-lg) var(--radius-lg) 0 0; border-bottom-color:var(--border2) }
details[open]>summary::after { transform:rotate(180deg) }
details.closing>summary::after { transform:rotate(0deg) }
.details-body {
  background:var(--sunken); border:1px solid var(--border); border-top:none;
  border-radius:0 0 var(--radius-lg) var(--radius-lg); padding:12px;
  display:flex; flex-direction:column; gap:10px;
  box-shadow:inset 0 1px 0 rgba(0,0,0,.35);
}

/* §CSS·9  OVERLAYS
   ─────────────────────────────────────────────────────────────────────── */
#vignette-overlay {
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,transparent 38%,var(--vignette-bg) 100%);
  opacity:0; transition:opacity var(--dur-med); z-index:var(--z-vignette);
}
#vignette-overlay.on { opacity:1 }

#logo-overlay {
  position:absolute; z-index:var(--z-logo); pointer-events:auto;
  user-select:none; display:none; cursor:grab; touch-action:none;
}
#logo-overlay.dragging { cursor:grabbing }
#logo-overlay img { display:block; width:100%; pointer-events:none; user-select:none; -webkit-user-drag:none }

#drop-overlay {
  position:absolute; inset:0; z-index:var(--z-drop);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; background:var(--drop-overlay-bg); pointer-events:none;
  transition:background var(--dur-med),border var(--dur-med),opacity .4s;
}
#drop-overlay.hidden      { opacity:0; pointer-events:none }
#drop-overlay.drag-active { background:var(--accent-drag-bg); outline:2px dashed var(--accent); outline-offset:-10px }
.client-model-mode #drop-overlay,
.client-model-mode #btn-load-glb,
.client-model-mode .desktop-hint { display:none !important }

.drop-icon {
  width:78px; height:78px; border:2px dashed var(--border2); border-radius:14px;
  display:flex; align-items:center; justify-content:center; margin-bottom:4px; color:var(--muted);
}
.drop-icon svg { width:36px; height:36px; opacity:.55 }
.drop-title { font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:4px; color:var(--accent); text-align:center }
.drop-sub   { font-size:12px; color:var(--muted); text-align:center; line-height:1.7 }

#export-overlay {
  position:absolute; inset:0; z-index:var(--z-export); display:none;
  flex-direction:column; align-items:center; justify-content:center;
  gap:14px; background:var(--export-overlay-bg);
}
#export-overlay.active { display:flex }
.exp-title { font-family:'Bebas Neue',sans-serif; font-size:19px; letter-spacing:3px; color:var(--accent) }
#exp-ov-bar-wrap { width:240px; height:5px; background:var(--border2); border-radius:var(--radius-xs); overflow:hidden }
#exp-ov-bar { height:100%; width:0%; background:linear-gradient(90deg,var(--accent-dim),var(--accent)); border-radius:var(--radius-xs) }
#exp-ov-pct { font-size:12px; color:var(--muted); min-width:40px; text-align:center }

/* §CSS·10  MATERIAL COMPONENTS
   ─────────────────────────────────────────────────────────────────────── */
.mat-select-row { display:flex; align-items:center; gap:8px }
.mat-select-row select { flex:1; min-width:0 }
.count-badge {
  background:var(--accent-dim); color:var(--accent-light); border-radius:var(--radius-xl);
  padding:2px 8px; font-size:10px; font-weight:500; flex-shrink:0; letter-spacing:.3px;
}
.mat-badge {
  display:flex; align-items:center; gap:8px; padding:7px 10px;
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-md);
}
.mat-badge-dot  { width:10px; height:10px; border-radius:var(--radius-circle); background:var(--muted2); flex-shrink:0 }
.mat-badge-name { font-size:11px; color:var(--text); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* Checkerboard indicates transparency */
.tex-preview-panel {
  width:100%; height:140px;
  background:repeating-conic-gradient(var(--checker-dark) 0% 25%,var(--checker-light) 0% 50%) 0 0/14px 14px;
  border:1px solid var(--border); border-radius:var(--radius-md);
  overflow:hidden; display:flex; align-items:center; justify-content:center; position:relative;
}
.tex-preview-panel img { width:100%; height:100%; object-fit:cover; }
.tex-placeholder { font-size:11px; color:var(--muted2); font-style:italic; pointer-events:none }

.checker-well {
  width:100%; height:72px;
  background:repeating-conic-gradient(var(--checker-dark) 0% 25%,var(--checker-light) 0% 50%) 0 0/10px 10px;
  border:1px solid var(--border); border-radius:var(--radius-md);
  overflow:hidden; display:none; align-items:center; justify-content:center;
}
.checker-well.visible { display:flex }
.checker-well img { max-width:100%; max-height:100%; object-fit:contain }

.info-note { font-size:10px; color:var(--muted2); line-height:1.5; text-align:center; font-variant-numeric:tabular-nums }
#wrap-controls .info-note { font-size:11px; color:#b7a894; text-align:left }
#wrap-area-note { font-weight:500 }
.info-note a { color:var(--accent); text-decoration:none }
.info-note a:hover { color:var(--accent-light); text-decoration:underline }

/* §CSS·11  ANIMATION & CAMERA COMPONENTS
   ─────────────────────────────────────────────────────────────────────── */
.anim-btn-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 }
.anim-btn-row .btn { padding:12px 4px; border-radius:0; border-right-width:0 }
.anim-btn-row .btn .ico { width:19px; height:19px }
.anim-btn-row .btn:first-child { border-radius:var(--radius-lg) 0 0 var(--radius-lg) }
.anim-btn-row .btn:last-child  { border-radius:0 var(--radius-lg) var(--radius-lg) 0; border-right-width:1px }
/* No vertical lift inside a joined control — keep segments flush */
.anim-btn-row .btn:hover  { transform:none; box-shadow:none; position:relative; z-index:1 }
.anim-btn-row .btn.active { position:relative; z-index:2 }

.anim-hint-banner {
  font-size:10px; color:var(--info);
  background:var(--info-bg); border:1px solid var(--info-border);
  border-radius:var(--radius-md); padding:7px 10px; line-height:1.5;
}
#cam-schedule-strip { display:flex; flex-wrap:wrap; gap:4px }
.cam-pill {
  background:var(--panel); border:1px solid var(--border2); border-radius:12px;
  padding:3px 9px; font-size:10px; color:var(--muted); cursor:pointer;
  white-space:nowrap; transition:border-color var(--dur-fast),color var(--dur-fast);
}
.cam-pill:hover  { border-color:var(--accent); color:var(--accent-light) }
.cam-pill.active { border-color:var(--accent); color:var(--accent-light); background:var(--accent-dim); font-weight:500 }
#camera-lock-note { font-size:10px; color:var(--muted2); text-align:center; line-height:1.5 }

#rec-indicator { display:none; align-items:center; gap:6px; font-size:11px; color:var(--warn) }
#rec-indicator.active { display:flex }
/* Static on purpose: the dot is only shown during export, and any running
   animation makes Chrome present a new frame every vsync, which can stall the
   export (see "Keep the page still while exporting" in main.js §15). */
.rec-dot {
  width:7px; height:7px; border-radius:var(--radius-circle);
  background:var(--warn); flex-shrink:0;
}

#video-length-display { font-size:11px; color:var(--muted); text-align:center }
#export-encoder-note { margin:0; font-size:10px; color:var(--warn); line-height:1.5 }

/* Conditional rows toggled by JS */
#vignette-strength-row           { display:none }
#vignette-strength-row.visible   { display:flex; flex-direction:column; gap:5px }
#surf-alpha-bg-row               { display:none }
#surf-alpha-bg-row.visible       { display:flex }
#shadow-detail-group             { display:none; flex-direction:column; gap:10px }
#shadow-detail-group.visible     { display:flex }
#gtao-detail-group               { display:none; flex-direction:column; gap:10px }
#gtao-detail-group.visible       { display:flex }
#bloom-detail-group              { display:none; flex-direction:column; gap:10px }
#bloom-detail-group.visible      { display:flex }
#gobo-detail-group               { display:none; flex-direction:column; gap:10px }
#gobo-detail-group.visible       { display:flex }

/* §CSS·12  DISPLAY & HDRI COMPONENTS
   ─────────────────────────────────────────────────────────────────────── */
.hdri-strip {
  display:none; align-items:center; gap:6px; padding:6px 8px;
  background:var(--accent-strip-bg); border:1px solid var(--accent);
  border-radius:var(--radius-md); font-size:11px; color:var(--accent-light);
}
.hdri-strip.visible { display:flex }
.hdri-strip-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.hdri-slider-group         { display:none; flex-direction:column; gap:10px }
.hdri-slider-group.visible { display:flex }

/* Exported ("New Defaults") files carry the .exported-defaults marker on <html>.
   In those files the end user must not be able to change the baked-in creative
   look, so the following are hidden: the Environment Lighting toggle (always on
   in exports), the HDRI upload area, the remove-HDRI strip, the environment
   sliders (Lighting Strength / Background Brightness / Background Blur / Rotation / Reflection), the
   Colour Style (tone mapping) row, the shadow control group (on/off, strength,
   softness), the Ambient Occlusion group (on/off, strength), the Color Grade
   group, and the Vignette group. They remain in the DOM and keep functioning —
   only their UI is suppressed, and their values are baked in as the exported
   defaults. The editor file never carries this marker, so it is unaffected. The
   standalone "Brightness" and "Background Colour" controls, and the Light
   controls (Strength / Direction / Height), are intentionally left visible so
   the end user can adjust lighting and match to their own design / background. */
.exported-defaults #hdri-upload-area,
.exported-defaults #hdri-active-strip,
.exported-defaults #env-toggle-row,
.exported-defaults #tonemapping-row,
.exported-defaults #shadow-controls,
.exported-defaults #gtao-controls,
.exported-defaults #grade-controls,
.exported-defaults #vignette-controls,
.exported-defaults #btn-premium-look,
.exported-defaults #hdri-slider-group,
.exported-defaults #refl-strength-row { display:none !important }

/* §CSS·13  BOTTOM BAR, TOAST & TOOLTIP
   ─────────────────────────────────────────────────────────────────────── */
#bottom-bar {
  height:var(--bottom-bar-height); flex-shrink:0; display:flex; align-items:center;
  padding:0 16px; gap:14px; background:var(--panel);
  border-top:1px solid var(--border); font-size:11px; color:var(--muted);
}
#bottom-bar .bb-hint  { letter-spacing:.3px }
#bottom-bar .bb-spacer { flex:1 }
#bottom-fps { color:var(--muted2); font-size:11px }

#toast-container {
  position:fixed; bottom:var(--toast-bottom); left:16px;
  z-index:var(--z-toast); display:flex; flex-direction:column; gap:8px; pointer-events:none;
}
.toast {
  padding:8px 14px; border-radius:var(--radius-lg);
  background:var(--panel2); border:1px solid var(--border2); color:var(--text);
  font-size:12px; max-width:290px; line-height:1.4;
  animation:toast-in .22s ease forwards; transition:opacity var(--dur-slow);
}
.toast.success { border-color:var(--success); color:var(--success) }
.toast.info    { border-color:var(--info);    color:var(--info) }
.toast.warn    { border-color:var(--warn);    color:var(--warn) }
@keyframes toast-in { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

#tip {
  position:fixed; z-index:var(--z-tip); background:var(--panel2);
  border:1px solid var(--border2); border-radius:var(--radius-md);
  padding:5px 9px; font-size:11px; color:var(--text); max-width:210px;
  pointer-events:none; display:none; white-space:pre-wrap; line-height:1.4;
  box-shadow:0 4px 14px var(--shadow-md);
}

/* §CSS·14  RESPONSIVE & MOBILE
   ─────────────────────────────────────────────────────────────────────── */
#mob-panel-btn {
  position:fixed; bottom:var(--mob-fab-bottom); right:16px; z-index:var(--z-mob-fab);
  width:48px; height:48px; border-radius:var(--radius-circle);
  background:linear-gradient(135deg,var(--accent-dim),var(--accent-deep));
  border:1px solid var(--accent); color:var(--accent-light); font-size:21px;
  cursor:pointer; display:none; align-items:center; justify-content:center;
  box-shadow:0 4px 22px var(--shadow-strong); transition:transform var(--dur-fast);
}
#mob-panel-btn:active { transform:scale(.93) }
#mob-panel-btn svg { width:22px; height:22px; display:block }
#mob-backdrop { display:none; position:fixed; inset:0; background:var(--backdrop-bg); z-index:var(--z-mob-backdrop) }

@media(max-width:768px){
  #mob-panel-btn { display:flex }
  aside.sidebar {
    position:fixed; top:0; bottom:0; right:-290px;
    width:var(--sidebar-width); z-index:var(--z-mob-sidebar);
    transition:right var(--dur-slow) ease;
    box-shadow:-8px 0 40px var(--shadow-dark);
  }
  aside.sidebar.open { right:0 }
  .drop-sub .desktop-hint { display:none }
  #bottom-bar .bb-hint { font-size:10px }
}

/* Studio background: neutral colour with optional exact value. */
.studio-background { display:flex; flex-direction:column; gap:10px }
.studio-bg-custom { display:flex; align-items:center; gap:7px }
#studio-bg-hex { width:78px; min-width:0; padding:6px; font:11px ui-monospace,monospace; text-transform:uppercase }
.studio-bg-note { margin:0; font-size:10px; line-height:1.5; color:var(--muted) }

/* Free preview (build-netlify-folder.mjs --free): video export countdown and the
   limit popup. The card matches the paid build's login screen (src/login-gate.js). */
#free-exports-left { font-size:11px; color:var(--accent); text-align:center }
#software-gl-note { display:flex; flex-direction:column; gap:6px; padding:8px 10px; border:1px solid var(--warn); border-radius:var(--radius-md); font-size:11px; line-height:1.5; color:var(--muted) }
#software-gl-note[hidden] { display:none }
#software-gl-note p { margin:0 }
#software-gl-note strong { color:var(--warn); font-weight:600 }
#free-limit-overlay {
  position:fixed; inset:0; z-index:var(--z-modal); display:none;
  align-items:center; justify-content:center; padding:16px; box-sizing:border-box;
  background:rgba(12,9,6,.85);
}
#free-limit-overlay.active { display:flex }
.fl-card {
  width:min(400px, calc(100vw - 32px)); box-sizing:border-box; display:flex; flex-direction:column; gap:14px;
  padding:32px; text-align:center; color:#ede5d8; font-family:"DM Sans", Arial, sans-serif;
  border:1px solid rgba(196,144,96,.34); border-radius:12px;
  background:linear-gradient(145deg, #14100b 0%, #0f0c08 100%);
  box-shadow:0 26px 80px rgba(0,0,0,.72), inset 0 1px 0 rgba(219,176,122,.035);
}
.fl-title {
  color:#d6a266; font:400 34px/1.13 Georgia, "Times New Roman", serif;
  letter-spacing:4px; text-transform:uppercase; text-shadow:0 1px 18px rgba(196,144,96,.12);
}
.fl-sub  { margin-top:-6px; color:#8a6847; font-size:10px; line-height:1; letter-spacing:2.5px; text-transform:uppercase }
.fl-rule { height:9px; position:relative }
.fl-rule::before {
  content:""; position:absolute; left:50%; top:3px; width:28px; height:1px;
  transform:translateX(-50%); background:linear-gradient(90deg, transparent, #5a3515, transparent);
}
.fl-msg  { font-size:14px; line-height:1.6 }
.fl-btn {
  height:40px; border:1px solid #c49060; border-radius:6px; cursor:pointer;
  background:linear-gradient(135deg, #a86c19 0%, #ce8c1c 54%, #b87618 100%); color:#f0ca87;
  box-shadow:inset 0 1px 0 rgba(255,229,175,.18), 0 8px 24px rgba(121,72,10,.12);
  font:600 12px "DM Sans", Arial, sans-serif; letter-spacing:3px; text-transform:uppercase;
}
.fl-btn:hover { border-color:#efbd69; color:#fff1d6; filter:brightness(1.1) }
.fl-btn:focus-visible { outline:2px solid #d6a266; outline-offset:2px }