/* Auto-generated by scripts/build-viewer-bundles.js */
/* Bundle: viewer.css */
/* Source: viewer/assets/css/core.css */
/* Source: viewer/assets/css/panels.css */
/* Source: viewer/assets/css/shell.css */
/* Source: viewer/assets/css/refactor-overrides.css */
/* Source: viewer/assets/css/ui-primitives.css */
/* Source: viewer/assets/css/ui-components.css */
/* Source: viewer/assets/css/desktop-layout.css */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@300;400;500&family=Syne:wght@400;600;700&display=swap');

/* ── TOKENS ── */
:root, [data-theme="dark"] {
  --bg:      #333336;
  --sur:     #2a2a2d;
  --sur2:    #323235;
  --bdr:     #3e3e42;
  --acc:     #ff4d1c;
  --gold:    #ffc700;
  --green:   #00e5a0;
  --blue:    #4d9fff;
  --txt:     #e8e4dc;
  --muted:   #5a5760;
  --panel:   rgba(42,42,45,0.96);
  --overlay: rgba(0,0,0,0.85);
  --shadow:  rgba(0,0,0,0.6);
  --invert:  0;
}
[data-theme="light"] {
  --bg:      #f5f4f1;
  --sur:     #ffffff;
  --sur2:    #eeecea;
  --bdr:     #dddbd6;
  --acc:     #ff4d1c;
  --gold:    #d4a800;
  --green:   #00c98b;
  --blue:    #4d9fff;
  --txt:     #1a1a1a;
  --muted:   #888580;
  --panel:   rgba(255,255,255,0.96);
  --overlay: rgba(0,0,0,0.55);
  --shadow:  rgba(0,0,0,0.15);
  --invert:  1;
}

/* ── LIGHT MODE OVERRIDES for hardcoded values ── */
[data-theme="light"] #brush-cursor { border-color:rgba(0,0,0,0.6); }
[data-theme="light"] .up-session-item { border-bottom-color:var(--bdr); }
[data-theme="light"] .marker { border-color:var(--bg)!important; box-shadow:0 2px 8px var(--shadow); }
[data-theme="light"] .ann-dot { border-color:var(--bg); }
[data-theme="light"] #bottombar { background:var(--panel); }
[data-theme="light"] #snap-bottombar { background:var(--panel); }
[data-theme="light"] .ann-card { background:var(--sur); border-color:var(--bdr); }
[data-theme="light"] .ann-text { color:var(--txt); }
[data-theme="light"] .bb-btn.active { background:var(--sur2); color:var(--txt); }
[data-theme="light"] #load-btn { color:#fff; }
[data-theme="light"] .ghost-btn { color:var(--txt); border-color:var(--bdr); }
[data-theme="light"] .ghost-btn:hover { border-color:var(--acc); color:var(--acc); }
[data-theme="light"] #auth-overlay { background:rgba(0,0,0,0.45); }
[data-theme="light"] #auth-box { box-shadow:none; }
[data-theme="light"] #pw-modal { background:rgba(0,0,0,0.45); }
[data-theme="light"] input, [data-theme="light"] textarea, [data-theme="light"] select {
  color:var(--txt); background:var(--sur);
}
[data-theme="light"] #ctrl-mode-select {
  background:rgba(255,255,255,0.85); color:var(--txt); border-color:var(--bdr);
}
[data-theme="light"] #ctrl-mode-select option { background:var(--sur); color:var(--txt); }
[data-theme="light"] #ctrl-hint { color:var(--muted); text-shadow:none; }
[data-theme="light"] #user-panel-backdrop.open { background:rgba(0,0,0,0.2); }
[data-theme="light"] .tool-btn { background:var(--sur); border-color:var(--bdr); color:var(--txt); }
[data-theme="light"] .tool-btn:hover { border-color:var(--acc); }
[data-theme="light"] #note-modal { box-shadow:none; }
[data-theme="light"] .bb-btn { color:var(--muted); }
[data-theme="light"] .bb-btn:hover { color:var(--txt); }

* { margin:0; padding:0; box-sizing:border-box; }

body {
  background: var(--bg);
  color: var(--txt);
  font-family: 'DM Mono', monospace;
  height: 100vh;
  overflow: hidden;
  user-select: none;
}

/* ── CANVAS ── */
#canvas { position:fixed; inset:0; }
@media (pointer:fine) {
  #canvas[data-viewport-cursor="orbit"] { cursor:grab; }
  #canvas[data-viewport-cursor="grab"] { cursor:grabbing; }
  #canvas[data-viewport-cursor="annotate"] { cursor:crosshair; }
  #canvas[data-viewport-cursor="zoom"] { cursor:zoom-in; }
  #canvas[data-viewport-cursor="draw"] {
    cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23f4efe7' stroke='%2317171b' stroke-width='1.4' stroke-linejoin='round' d='M9 24l-2 5 5-2 10-10-3-3L9 24z'/%3E%3Cpath fill='%23ff6a3d' stroke='%2317171b' stroke-width='1.4' stroke-linejoin='round' d='M19 10l3 3 4-4c1-1 1-2.6 0-3.6l-.4-.4c-1-1-2.6-1-3.6 0L19 10z'/%3E%3Cpath fill='none' stroke='%2317171b' stroke-width='1.4' stroke-linecap='round' d='M7 28c1.5-.9 3.3-.9 4.8 0'/%3E%3C/svg%3E") 4 28, crosshair;
  }
}
#live-cursor-layer {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:82;
}

/* ── BRUSH CURSOR ── */
#brush-cursor {
  position: fixed;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.75);
  pointer-events: none;
  z-index: 155;
  display: none;
  transform: translate(-50%,-50%);
  mix-blend-mode: difference;
  transition: width 0.05s, height 0.05s;
}

/* ── TOP BAR ── */
#topbar {
  position: fixed;
  top:0; left:0; right:0; height:52px;
  background: var(--panel);
  border-bottom: 1px solid var(--bdr);
  display: flex; align-items: center;
  padding: 0 20px; gap: 16px;
  z-index: 100;
}
.logo {
  font-family:'DM Mono',monospace;
  font-size:13px;
  letter-spacing:0.24em;
  text-transform:uppercase;
}
.logo span { color: var(--acc); }

.session-wrap { display:flex; align-items:center; gap:8px; }
.session-label { font-size:9px; color:var(--muted); letter-spacing:0.15em; text-transform:uppercase; }
#session-name {
  font-size:11px; color:var(--txt); letter-spacing:0.1em;
  border:1px solid var(--bdr); background:transparent;
  padding:4px 10px; font-family:'DM Mono',monospace;
  outline:none; width:180px; transition:border-color 0.15s;
}
#session-name:focus { border-color:var(--gold); color:var(--gold); }
#session-name::placeholder { color:var(--muted); }

.tbspacer { flex:1; }
.mesh-name { display:none !important; font-size:11px; color:var(--muted); letter-spacing:0.1em; }

/* ── VERSION SWITCHER (BEFORE / AFTER toggle) ── */
#version-switcher {
  display:none; align-items:center; gap:0;
}
#version-switcher.visible { display:flex; }
.ver-toggle {
  font-family:'DM Mono',monospace; font-size:9px; letter-spacing:0.08em;
  padding:4px 10px; cursor:pointer; border:1px solid var(--bdr);
  background:var(--sur); color:var(--muted); transition:all 0.15s;
  text-transform:uppercase; white-space:nowrap;
}
.ver-toggle:first-child { border-right:none; }
.ver-toggle:hover { color:var(--txt); }
.ver-toggle.active { background:var(--acc); color:#fff; border-color:var(--acc); }

#load-btn {
  background:var(--acc); color:#fff; border:none;
  font-family:'DM Mono',monospace; font-size:11px;
  letter-spacing:0.1em; padding:7px 14px;
  cursor:pointer; text-transform:uppercase; transition:opacity 0.2s;
  display:inline-flex; align-items:center; justify-content:center; text-align:center; line-height:1;
}
#load-btn:hover { opacity:0.85; transform:translateY(-1px); }
#file-input { display:none; }

/* ── THEME TOGGLE ── */
.theme-toggle {
  position:relative; width:38px; height:20px; border-radius:10px;
  background:var(--sur); border:1px solid var(--bdr);
  cursor:pointer; transition:all 0.3s; flex-shrink:0;
}
.theme-toggle:hover { border-color:var(--acc); }
.theme-toggle .toggle-thumb {
  position:absolute; top:2px; left:2px; width:14px; height:14px;
  border-radius:50%; background:var(--acc); transition:transform 0.3s ease;
}
[data-theme="light"] .theme-toggle .toggle-thumb { transform:translateX(18px); }
.theme-toggle .toggle-icon {
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:10px; line-height:1; pointer-events:none; transition:opacity 0.2s;
}
.toggle-icon.moon { left:4px; opacity:1; }
.toggle-icon.sun  { right:4px; opacity:0.4; }
[data-theme="light"] .toggle-icon.moon { opacity:0.4; }
[data-theme="light"] .toggle-icon.sun  { opacity:1; }

/* ── LEFT TOOLBAR ── */
#toolbar {
  position:fixed; left:16px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:4px; z-index:100;
}
body.snap-mode #toolbar { display:none !important; }
.tool-btn {
  width:40px; height:40px; background:var(--sur); border:1px solid var(--bdr);
  color:var(--muted); cursor:pointer; display:flex; align-items:center;
  justify-content:center; font-size:16px; transition:all 0.15s; position:relative;
}
.tool-btn:hover { border-color:var(--acc); color:var(--txt); }
.tool-btn.active { background:var(--acc); border-color:var(--acc); color:#fff; }
.tool-btn .tip {
  position:absolute; left:48px; background:var(--sur2);
  border:1px solid var(--bdr); color:var(--txt);
  font-size:10px; letter-spacing:0.1em; padding:4px 8px;
  white-space:nowrap; pointer-events:none; opacity:0; transition:opacity 0.15s;
}
.tool-btn:hover .tip { opacity:1; }
.tool-sep { height:1px; background:var(--bdr); margin:4px 0; }

#draw-toolbar {
  position: fixed;
  left: 68px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--bdr);
  border-radius: 16px;
  background: color-mix(in srgb, var(--sur) 92%, transparent);
  backdrop-filter: blur(14px);
  z-index: 101;
}
body.draw-mode #draw-toolbar {
  display: flex;
}
.draw-toolbar-badge,
.draw-toolbar-label,
.draw-toolbar-btn {
  font-family: 'DM Mono', monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.draw-toolbar-badge {
  font-size: 10px;
  color: var(--acc);
  white-space: nowrap;
}
.draw-toolbar-control {
  display: flex;
  align-items: center;
  gap: 8px;
}
.draw-toolbar-label {
  font-size: 9px;
  color: var(--muted);
}
.draw-toolbar-width {
  min-width: 140px;
}
#draw-color {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--bdr);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
#draw-width {
  width: 74px;
}
#draw-width-value {
  min-width: 40px;
  font-size: 10px;
  color: var(--txt);
  font-family: 'DM Mono', monospace;
}
.draw-toolbar-btn {
  padding: 6px 10px;
  border: 1px solid var(--bdr);
  border-radius: 999px;
  background: transparent;
  color: var(--txt);
  font-size: 9px;
  cursor: pointer;
}
.draw-toolbar-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.draw-toolbar-btn:not(:disabled):hover {
  border-color: var(--acc);
}

/* ── BOTTOM BAR ── */
#bottombar {
  position:fixed; bottom:0; left:0; right:300px; height:32px;
  background:var(--sur); border-top:1px solid var(--bdr);
  display:flex; align-items:center; padding:0 16px; gap:16px; z-index:99;
}
.bb-item { font-size:10px; color:var(--muted); letter-spacing:0.08em; min-height:30px; display:flex; align-items:center; }
.bb-item span { color:var(--txt); }
.bb-spacer { flex:1; }
.bb-sep {
  width:1px;
  height:18px;
  background:var(--bdr);
  opacity:0.75;
  flex:0 0 auto;
}
.bb-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  font-size:10px; letter-spacing:0.1em; color:#908d96;
  cursor:pointer; background:none;
  border:1px solid transparent; padding:0 12px; transition:all 0.15s;
  font-family:'DM Mono',monospace;
  min-height:30px;
  min-width:0;
  line-height:1;
  text-align:center;
  white-space:nowrap;
  flex:0 0 auto;
}
.bb-btn:hover { color:var(--txt); border-color:var(--acc); }
.bb-btn.active { color:var(--gold); border-color:var(--gold); }

/* ── QA PANEL ── */
#qa-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:10001;
  display:flex; align-items:center; justify-content:center;
}
#qa-panel {
  background:var(--sur); border:1px solid var(--bdr);
  width:560px; max-height:85vh; display:flex; flex-direction:column; overflow:hidden;
}
#qa-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border-bottom:1px solid var(--bdr); flex-shrink:0;
}
.qa-title { font-family:'Syne',sans-serif; font-size:13px; font-weight:700; letter-spacing:0.05em; }
#qa-close {
  background:none; border:none; color:var(--muted); font-size:16px; cursor:pointer; padding:4px 8px;
}
#qa-close:hover { color:var(--txt); }
.qa-sum-btn {
  font-family:'DM Mono',monospace; font-size:9px; letter-spacing:0.08em;
  padding:5px 10px; border:1px solid var(--bdr); background:transparent;
  color:var(--muted); cursor:pointer; transition:all 0.15s; text-transform:uppercase;
}
.qa-sum-btn:hover { color:var(--acc); border-color:var(--acc); }
#qa-content { flex:1; overflow-y:auto; padding:0; }

/* ── QA Tabs ── */
.qa-tabs {
  display:flex; border-bottom:1px solid var(--bdr); flex-shrink:0;
  padding:0 20px; gap:0; overflow-x:auto;
}
.qa-tab {
  font-family:'DM Mono',monospace; font-size:9px; letter-spacing:0.08em; text-transform:uppercase;
  padding:10px 14px; border:none; background:none; color:var(--muted); cursor:pointer;
  border-bottom:2px solid transparent; transition:all 0.15s; white-space:nowrap;
}
.qa-tab:hover { color:var(--txt); }
.qa-tab.active { color:var(--acc); border-bottom-color:var(--acc); }
.qa-tab .qa-tab-count {
  font-size:8px; background:var(--bdr); color:var(--txt); padding:1px 5px;
  border-radius:2px; margin-left:4px;
}
.qa-tab.active .qa-tab-count { background:rgba(255,77,28,0.15); color:var(--acc); }
.qa-tab-body { padding:16px 20px; display:none; }
.qa-tab-body.active { display:block; }

/* ── Score badge ── */
.qa-score {
  display:flex; align-items:center; gap:16px; margin-bottom:16px;
  padding:16px; background:var(--bg); border:1px solid var(--bdr);
}
.qa-score-num {
  font-family:'Bebas Neue',sans-serif; font-size:48px; line-height:1;
}
.qa-score-label { font-size:10px; color:var(--muted); letter-spacing:0.1em; text-transform:uppercase; }
.qa-score-sub { font-size:11px; color:var(--txt); margin-top:4px; }

/* ── Stats grid ── */
.qa-stats {
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:1px;
  background:var(--bdr); border:1px solid var(--bdr); margin-bottom:16px;
}
.qa-stat {
  background:var(--sur); padding:10px 12px;
}
.qa-stat-label { font-size:8px; color:var(--muted); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:2px; }
.qa-stat-val { font-family:'DM Mono',monospace; font-size:12px; color:var(--txt); }

/* ── Severity summary row ── */
.qa-sev-row {
  display:flex; gap:12px; margin-bottom:16px; font-family:'DM Mono',monospace; font-size:11px;
}
.qa-sev-chip {
  padding:4px 10px; border:1px solid; font-size:10px; letter-spacing:0.06em;
}
.qa-sev-chip.high { color:#ff4d1c; border-color:#ff4d1c; background:rgba(255,77,28,0.08); }
.qa-sev-chip.medium { color:#ffc700; border-color:#ffc700; background:rgba(255,199,0,0.08); }
.qa-sev-chip.low { color:var(--muted); border-color:var(--bdr); background:var(--bg); }

/* ── Finding cards ── */
.qa-finding {
  padding:10px 14px; border:1px solid var(--bdr); margin-bottom:6px;
  display:flex; gap:10px; align-items:flex-start;
}
.qa-f-sev {
  font-family:'DM Mono',monospace; font-size:8px; letter-spacing:0.1em; text-transform:uppercase;
  padding:2px 7px; flex-shrink:0; border:1px solid;
}
.qa-f-sev.high { color:#ff4d1c; border-color:#ff4d1c; background:rgba(255,77,28,0.08); }
.qa-f-sev.medium { color:#ffc700; border-color:#ffc700; background:rgba(255,199,0,0.08); }
.qa-f-sev.low { color:var(--muted); border-color:var(--bdr); background:var(--bg); }
.qa-f-code { font-family:'DM Mono',monospace; font-size:10px; color:var(--txt); margin-bottom:2px; }
.qa-f-msg { font-size:11px; color:var(--muted); line-height:1.5; }
.qa-f-count { font-family:'DM Mono',monospace; font-size:10px; color:var(--muted); margin-left:auto; flex-shrink:0; }

/* ── No issues ── */
.qa-ok { text-align:center; padding:32px; color:var(--green); }
.qa-ok-icon { font-size:32px; margin-bottom:8px; }
.qa-ok-text { font-size:11px; letter-spacing:0.08em; }

/* ── Section label ── */
.qa-section-label {
  font-size:8px; color:var(--muted); letter-spacing:0.12em; text-transform:uppercase;
  margin-bottom:10px; margin-top:4px;
}

/* ── AI Summary ── */
.qa-summary {
  margin-top:12px; padding:16px; background:var(--bg); border:1px solid var(--bdr);
  font-size:12px; line-height:1.7; color:var(--txt); white-space:pre-wrap;
  font-family:'DM Mono',monospace;
}
.qa-summary h2,.qa-summary h3 { font-family:'Syne',sans-serif; margin:12px 0 6px; font-size:13px; }
.qa-summary strong { color:var(--acc); }

/* ── Cache bar ── */
.qa-cache-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 20px; font-size:10px; color:var(--muted); background:var(--bg);
  border-bottom:1px solid var(--bdr);
}
.qa-cache-bar button {
  background:none; border:1px solid var(--bdr); color:var(--fg); font-size:10px;
  padding:2px 8px; border-radius:4px; cursor:pointer;
}
.qa-cache-bar button:hover { border-color:var(--acc); color:var(--acc); }

/* ── QA Progress Steps ── */
.qa-steps { padding:24px 28px 16px; }
.qa-steps-title {
  font-family:'Syne',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.05em;
  margin-bottom:20px; color:var(--txt);
}
.qa-step {
  display:flex; align-items:flex-start; gap:12px; padding:6px 0; position:relative;
}
.qa-step-icon {
  width:20px; height:20px; display:flex; align-items:center; justify-content:center;
  font-size:11px; flex-shrink:0; position:relative; z-index:1;
}
.qa-step-icon.pending { color:var(--bdr); }
.qa-step-icon.active { color:var(--acc); }
.qa-step-icon.done { color:var(--green, #4caf50); }
.qa-step-label {
  font-family:'DM Mono',monospace; font-size:11px; letter-spacing:0.04em;
  color:var(--muted); padding-top:2px;
}
.qa-step.active .qa-step-label { color:var(--txt); }
.qa-step.done .qa-step-label { color:var(--muted); }
.qa-step-detail {
  font-family:'DM Mono',monospace; font-size:9px; color:var(--muted);
  margin-top:2px; opacity:0.7;
}
.qa-step-line {
  position:absolute; left:9px; top:26px; bottom:-6px; width:1px; background:var(--bdr);
}
.qa-step:last-child .qa-step-line { display:none; }
@keyframes qa-spin {
  0% { transform:rotate(0deg); }
  100% { transform:rotate(360deg); }
}
.qa-spinner {
  display:inline-block; width:12px; height:12px; border:2px solid var(--bdr);
  border-top-color:var(--acc); border-radius:50%; animation:qa-spin 0.8s linear infinite;
}
.qa-steps-note {
  font-family:'DM Mono',monospace; font-size:9px; color:var(--muted);
  margin-top:16px; text-align:center; opacity:0.6; letter-spacing:0.04em;
}

/* ── RIGHT PANEL ── */
#panel {
  position:fixed; right:0; top:52px; bottom:0; width:300px;
  background:var(--panel); border-left:1px solid var(--bdr);
  display:flex; flex-direction:column; z-index:100;
  transform:translateX(0); transition:transform 0.3s ease;
  backdrop-filter:blur(18px);
  box-shadow:-18px 0 40px var(--shadow);
}
#panel.collapsed { transform:translateX(300px); }

#panel-header {
  padding:18px 18px 14px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:rgba(255,255,255,0.02);
}
#panel-header .ptitle { font-family:'Syne',sans-serif; font-size:13px; font-weight:700; letter-spacing:0.05em; }
.panel-add-layer-btn {
  min-height:32px;
  padding:0 12px;
  background:var(--sur);
  border-radius:999px;
  border:1px solid var(--bdr);
}
.count-badge { background:var(--acc); color:#fff; font-size:10px; padding:2px 7px; min-width:22px; text-align:center; }

/* ── ANNOTATION FILTER PILLS ── */
.ann-filter-bar {
  display:flex; gap:6px; padding:10px 18px 0;
  flex-shrink:0;
}
.ann-filter-pill {
  font-family:'DM Mono',monospace;
  font-size:9px;
  letter-spacing:0.10em;
  text-transform:uppercase;
  padding:0 12px;
  min-height:26px;
  border-radius:999px;
  border:1px solid var(--bdr);
  background:var(--sur);
  color:var(--muted);
  cursor:pointer;
  transition:all 0.18s ease;
  white-space:nowrap;
  line-height:26px;
  display:inline-flex;
  align-items:center;
}
.ann-filter-pill:hover {
  color:var(--txt);
  border-color:var(--acc);
  background:rgba(255,255,255,0.04);
}
.ann-filter-pill.active {
  color:#fff;
  background:var(--acc);
  border-color:var(--acc);
  box-shadow:0 2px 8px rgba(255,77,28,0.25);
}
[data-theme="light"] .ann-filter-pill:hover {
  background:rgba(0,0,0,0.04);
}
.ann-filter-bar-empty {
  text-align:center;
  padding:24px 14px;
  color:var(--muted);
  font-size:10px;
  font-family:'DM Mono',monospace;
  letter-spacing:0.05em;
}

#ann-list { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:12px; }
#ann-list::-webkit-scrollbar { width:4px; }
#ann-list::-webkit-scrollbar-thumb { background:var(--bdr); }

.ann-item {
  border-left:3px solid var(--acc); padding:10px 12px;
  cursor:pointer; transition:border-color 0.15s, background 0.15s;
  position:relative;
  box-shadow:0 10px 24px rgba(0,0,0,0.08);
}
.ann-item.type-snapshot { border-left-color:var(--green); }
.ann-item.type-note     { border-left-color:var(--acc); }
.ann-item:hover   { background:rgba(255,77,28,0.06); }
.ann-item.sel     { background:rgba(255,77,28,0.12); border-color:var(--acc); }
.ann-item.done    { opacity:0.45; }
.ann-item.done .ann-text { text-decoration:line-through; }

.ann-head {
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:6px;
  min-width:0;
}

/* Checkbox */
.ann-cb {
  width:15px; height:15px; border:1.5px solid var(--muted); border-radius:2px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:all 0.15s; background:transparent;
}
.ann-cb:hover { border-color:var(--green); }
.ann-cb.done { background:var(--green); border-color:var(--green); }
.ann-cb.done::after { content:'✓'; font-size:9px; color:#000; font-weight:bold; }

/* Number badge */
.ann-num {
  font-size:9px; color:var(--muted); border:1px solid var(--bdr);
  padding:1px 5px; min-width:22px; text-align:center; flex-shrink:0;
}
.ann-icon { font-size:12px; }
.ann-author { font-size:10px; color:var(--gold); letter-spacing:0.08em; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ann-time   { font-size:9px;  color:var(--muted); flex-shrink:0; }
.ann-text   { font-size:11px; color:#9a97a4; line-height:1.6; word-break:break-word; overflow-wrap:break-word; }
.ann-text.clamped { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ann-expand { font-size:9px; color:var(--muted); cursor:pointer; margin-top:3px; letter-spacing:0.05em; background:none; border:none; padding:0; font-family:'DM Mono',monospace; }
.ann-expand:hover { color:var(--acc); }

/* ── Actions column (right side of card) ── */
.ann-actions {
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:auto;
  flex:0 0 auto;
  opacity:0.8;
  transition:opacity 0.15s;
}
.ann-item:hover .ann-actions { opacity:1; }
.ann-item.hidden-ann .ann-actions { opacity:1; }
.ann-actions button {
  width:24px; height:24px; background:rgba(255,255,255,0.03); border:1px solid transparent;
  color:var(--muted); cursor:pointer; display:flex;
  align-items:center; justify-content:center; padding:0;
  transition:color 0.15s, border-color 0.15s, background 0.15s; font-size:12px; border-radius:999px;
  flex:0 0 auto; line-height:1;
}
.ann-actions button:hover { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.10); }
.ann-del:hover { color:var(--acc); }
.ann-hide:hover { color:var(--blue); }
.ann-like-btn:hover { color:#ff8aa0; }
.ann-like-btn {
  width:auto !important;
  min-width:36px;
  padding:0 8px !important;
  gap:4px;
  font-size:10px;
}
.ann-like-btn.liked {
  color:#ff8aa0;
  background:rgba(255,122,150,0.12) !important;
  border-color:rgba(255,122,150,0.24) !important;
}
.ann-like-icon { font-size:11px; line-height:1; }
.ann-like-count {
  font-size:8px;
  min-width:14px;
  height:14px;
  padding:0 4px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--sur2);
  color:var(--txt);
  border:1px solid rgba(255,255,255,0.08);
}
.ann-reply-btn:hover { color:var(--gold); }
.ann-reply-btn { font-size:10px; position:relative; width:auto !important; min-width:58px; padding:0 10px !important; gap:6px; }
.ann-reply-btn .reply-label {
  font-size:9px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  line-height:1;
}
.ann-reply-btn .reply-count {
  position:static;
  font-size:8px;
  margin-left:0;
  min-width:14px;
  height:14px;
  padding:0 4px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--sur2);
  color:var(--txt);
  border:1px solid rgba(255,255,255,0.08);
}
.ann-item.has-unread-replies {
  box-shadow:0 0 0 1px rgba(255,82,82,0.34), 0 16px 30px rgba(255,82,82,0.08);
}
.ann-reply-btn.unread {
  color:#ff6b6b;
  background:rgba(255,82,82,0.12) !important;
}
.ann-reply-btn.unread:hover { color:#fff; background:rgba(255,82,82,0.22) !important; }
.ann-reply-btn .reply-count.unread {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:16px;
  height:16px;
  margin-left:0;
  padding:0 5px;
  border-radius:999px;
  background:#ff5252;
  color:#fff;
  box-shadow:0 0 0 3px rgba(255,82,82,0.16);
  animation:reply-unread-pulse 1.6s ease-in-out infinite;
}
@keyframes reply-unread-pulse {
  0%, 100% { transform:scale(1); box-shadow:0 0 0 3px rgba(255,82,82,0.12); }
  50% { transform:scale(1.08); box-shadow:0 0 0 6px rgba(255,82,82,0.04); }
}
.ann-item.hidden-ann { opacity:0.3; }
.ann-item.hidden-ann .ann-hide { opacity:1; }

@media (hover:hover) and (pointer:fine) {
  .ann-actions {
    gap:4px;
  }
  .ann-actions button {
    opacity:0;
    pointer-events:none;
    transform:translateX(4px);
    transition:
      opacity 0.15s ease,
      transform 0.15s ease,
      min-width 0.15s ease,
      padding 0.15s ease,
      border-color 0.15s ease,
      background 0.15s ease;
  }
  .ann-actions .ann-del,
  .ann-actions .ann-hide {
    width:0;
    min-width:0;
    padding:0 !important;
    border-color:transparent;
    background:transparent;
  }
  .ann-actions .ann-like-btn,
  .ann-actions .ann-reply-btn {
    width:0 !important;
    min-width:0;
    padding:0 !important;
    border-color:transparent;
    background:transparent;
    overflow:hidden;
  }
  .ann-actions .ann-like-count,
  .ann-actions .reply-label,
  .ann-actions .reply-count {
    opacity:0;
    transition:opacity 0.15s ease;
  }
  .ann-item:hover .ann-actions button,
  .ann-item:focus-within .ann-actions button,
  .ann-item.sel .ann-actions button,
  .ann-item.hidden-ann .ann-actions .ann-hide,
  .ann-item .ann-like-btn.liked,
  .ann-item.has-unread-replies .ann-reply-btn {
    opacity:1;
    pointer-events:auto;
    transform:translateX(0);
  }
  .ann-item:hover .ann-actions .ann-del,
  .ann-item:hover .ann-actions .ann-hide,
  .ann-item:focus-within .ann-actions .ann-del,
  .ann-item:focus-within .ann-actions .ann-hide,
  .ann-item.sel .ann-actions .ann-del,
  .ann-item.sel .ann-actions .ann-hide,
  .ann-item.hidden-ann .ann-actions .ann-hide {
    width:24px;
    min-width:24px;
    padding:0 !important;
    border-color:rgba(255,255,255,0.10);
    background:rgba(255,255,255,0.03);
  }
  .ann-item:hover .ann-actions .ann-like-btn,
  .ann-item:focus-within .ann-actions .ann-like-btn,
  .ann-item.sel .ann-actions .ann-like-btn,
  .ann-item .ann-like-btn.liked {
    width:auto !important;
    min-width:36px;
    padding:0 8px !important;
    border-color:rgba(255,255,255,0.10);
    background:rgba(255,255,255,0.03);
  }
  .ann-item:hover .ann-actions .ann-reply-btn,
  .ann-item:focus-within .ann-actions .ann-reply-btn,
  .ann-item.sel .ann-actions .ann-reply-btn,
  .ann-item.has-unread-replies .ann-actions .ann-reply-btn {
    width:auto !important;
    min-width:58px;
    padding:0 10px !important;
    border-color:rgba(255,255,255,0.10);
    background:rgba(255,255,255,0.03);
  }
  .ann-item:hover .ann-actions .ann-like-count,
  .ann-item:hover .ann-actions .reply-label,
  .ann-item:hover .ann-actions .reply-count,
  .ann-item:focus-within .ann-actions .ann-like-count,
  .ann-item:focus-within .ann-actions .reply-label,
  .ann-item:focus-within .ann-actions .reply-count,
  .ann-item.sel .ann-actions .ann-like-count,
  .ann-item.sel .ann-actions .reply-label,
  .ann-item.sel .ann-actions .reply-count,
  .ann-item .ann-like-btn.liked .ann-like-count,
  .ann-item.has-unread-replies .ann-actions .reply-label,
  .ann-item.has-unread-replies .ann-actions .reply-count {
    opacity:1;
  }
}
.ann-unassign {
  background:none; border:none; color:var(--muted); cursor:pointer;
  font-size:12px; padding:0 3px; line-height:1; transition:color 0.15s; opacity:0;
}
.ann-item:hover .ann-unassign { opacity:1; }
.ann-unassign:hover { color:var(--blue); }

.ann-thumb {
  margin-top:8px; cursor:pointer; display:inline-block;
  border:1px solid var(--bdr); overflow:hidden; transition:border-color 0.15s; position:relative;
}
.ann-thumb:hover { border-color:var(--green); }
.ann-thumb img { display:block; width:100%; max-width:220px; height:auto; }
.ann-thumb-ov {
  position:absolute; inset:0; background:rgba(0,229,160,0.08);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity 0.15s; font-size:10px; letter-spacing:0.1em; color:var(--green);
}
.ann-thumb:hover .ann-thumb-ov { opacity:1; }

.empty-state {
  text-align:center;
  padding:52px 22px;
  color:var(--muted);
  font-size:11px;
  line-height:2;
  border:1px dashed rgba(255,255,255,0.08);
  border-radius:18px;
  background:rgba(255,255,255,0.02);
}


/* ── LAYERS ── */
.layer-block {
  margin-bottom:10px;
}
.layer-block.layer-folded {
  gap:0;
  padding-bottom:12px;
}
.layer-header {
  display:flex;
  align-items:center;
  gap:8px;
  padding:0;
  border-bottom:none;
  cursor:default;
  user-select:none;
}
.layer-vis {
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--sur);
  border:1px solid var(--bdr);
  border-radius:999px;
  color:var(--muted);
  cursor:pointer;
  font-size:13px;
  padding:0;
  transition:all 0.15s;
  flex-shrink:0;
}
.layer-vis:hover { color:var(--txt); border-color:var(--acc); }
.layer-name-inp {
  flex:1; min-width:0; background:none; border:none; color:var(--txt);
  font-family:'DM Mono',monospace; font-size:11px; outline:none;
  letter-spacing:0.05em;
}
.layer-name-inp::placeholder { color:var(--muted); }
.layer-kind-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:0 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.03);
  color:var(--muted);
  font-family:'DM Mono',monospace;
  font-size:8px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  flex:0 0 auto;
}
.layer-kind-badge-redline {
  color:var(--acc);
  border-color:rgba(255,77,28,0.28);
  background:rgba(255,77,28,0.08);
}
.layer-priority {
  min-height:30px;
  font-size:9px; letter-spacing:0.08em; padding:0 10px; cursor:pointer;
  border:1px solid var(--bdr); border-radius:999px; background:var(--sur); color:var(--muted);
  font-family:'DM Mono',monospace; transition:all 0.15s; font-weight:500;
  flex:0 0 auto;
}
.layer-priority:not([class*="p-"]):hover { color:var(--txt); border-color:var(--acc); }
.layer-priority.p-asap     { color:#000; background:#ffc700; border-color:#ffc700; }
.layer-priority.p-urgent   { color:#000; background:#ff8c00; border-color:#ff8c00; }
.layer-priority.p-vurgent  { color:#fff; background:#ff4d1c; border-color:#ff4d1c; }
.layer-del {
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--sur);
  border:1px solid var(--bdr);
  border-radius:999px;
  color:var(--muted);
  cursor:pointer;
  font-size:11px;
  padding:0;
  transition:all 0.15s;
  flex-shrink:0;
}
.layer-del:hover { color:var(--acc); border-color:rgba(255,77,28,0.34); }
.layer-block.layer-folded .layer-drop-zone {
  display:none;
}
.layer-drop-zone {
  min-height:64px;
  padding:4px;
  transition:background 0.15s, border 0.15s;
  border:1px dashed transparent;
  border-radius:16px;
  background:rgba(255,255,255,0.015);
}
.draw-layer-zone {
  min-height:64px;
  padding:4px;
  border:1px dashed transparent;
  border-radius:16px;
  background:rgba(255,255,255,0.015);
}
.layer-drop-zone.drag-over { background:rgba(77,159,255,0.10); border-color:var(--blue); border-style:dashed; }
.layer-drop-zone.drag-active { border-color:rgba(77,159,255,0.25); border-style:dashed; }
.layer-block.dragging-active .layer-drop-zone { border-color:rgba(77,159,255,0.3); }
.layer-add-btn {
  width:100%; background:none; border:none; border-top:1px solid var(--bdr);
  color:var(--muted); font-family:'DM Mono',monospace; font-size:10px;
  letter-spacing:0.1em; padding:8px; cursor:pointer; transition:color 0.15s;
  text-align:left;
}
.layer-add-btn:hover { color:var(--txt); }
.unassigned-label {
  font-size:9px; color:var(--muted); letter-spacing:0.14em; padding:2px 6px 0;
  text-transform:uppercase;
}
.layer-empty-hint {
  font-size:9px; color:var(--muted); padding:14px 8px;
  letter-spacing:0.08em; text-align:center; pointer-events:none;
}
.ann-item[draggable] { cursor:grab; }
.ann-item[draggable]:active { cursor:grabbing; opacity:0.7; }


#export-bar {
  padding:14px 16px 12px;
  border-top:1px solid rgba(255,255,255,0.06);
  display:flex;
  gap:8px;
  background:rgba(255,255,255,0.02);
}
#feedback-action-bar {
  display:flex;
  gap:8px;
  padding:14px 16px 0;
  background:rgba(255,255,255,0.02);
}
#feedback-action-bar .btn {
  flex:1;
}
.btn {
  flex:1; padding:8px; font-family:'DM Mono',monospace; font-size:10px;
  letter-spacing:0.1em; text-transform:uppercase; cursor:pointer;
  border:1px solid var(--bdr); background:var(--sur2); color:var(--txt); transition:all 0.15s;
}
.btn:hover { border-color:var(--acc); color:var(--txt); }
.btn.primary { background:var(--acc); border-color:var(--acc); color:#fff; }
.btn.primary:hover { opacity:0.85; color:#fff; }
.btn:disabled {
  opacity:0.4;
  cursor:not-allowed;
  transform:none !important;
}

/* ── PANEL TOGGLE ── */
#panel-toggle {
  position:fixed; right:308px; top:50%; transform:translateY(-50%);
  width:26px; height:52px; background:var(--panel); border:1px solid var(--bdr);
  border-right:none; cursor:pointer; display:flex; align-items:center;
  justify-content:center; color:var(--muted); font-size:10px;
  z-index:101; transition:right 0.3s ease, color 0.15s;
  backdrop-filter:blur(14px);
  border-radius:12px 0 0 12px;
}
#panel-toggle:hover { color:var(--txt); }
#panel-toggle.collapsed { right:8px; }

/* ── 3D MARKERS ── */
.ann-marker { position:fixed; pointer-events:none; z-index:50; }
.ann-dot {
  width:16px; height:16px; border-radius:50%;
  background:var(--ann-dot-bg, var(--acc)); border:2px solid #fff;
  position:relative; transform:translate(-50%,-50%) scale(var(--ann-dot-scale, 1));
  box-shadow:0 0 0 3px var(--ann-dot-ring, rgba(255,77,28,0.3));
  animation:pulse 2.5s infinite; cursor:grab;
  transition:transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
@keyframes pulse {
  0%,100% { box-shadow:0 0 0 3px var(--ann-dot-ring, rgba(255,77,28,0.3)); }
  50%      { box-shadow:0 0 0 7px var(--ann-dot-ring-fade, rgba(255,77,28,0)); }
}
.ann-typing {
  position: absolute;
  left: calc(100% - 1px);
  top: 50%;
  transform: translate(4px, -50%);
  min-width: 20px;
  height: 12px;
  padding: 0 5px;
  border-radius: 999px;
  border: 1px solid var(--bdr);
  background: var(--sur);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.ann-typing span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--txt);
  opacity: 0.35;
  animation: annTypingBounce 0.9s ease-in-out infinite;
}
.ann-typing span:nth-child(2) { animation-delay: 0.12s; }
.ann-typing span:nth-child(3) { animation-delay: 0.24s; }
@keyframes annTypingBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
  40% { transform: translateY(-2px); opacity: 1; }
}
/* Number label on dot */
.dot-num {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--sur); border:1px solid var(--bdr); color:var(--txt);
  font-size:8px; font-family:'DM Mono',monospace; padding:1px 4px;
  white-space:nowrap; pointer-events:none; letter-spacing:0.05em;
}
.ann-label {
  position:absolute; left:14px; top:-8px;
  background:var(--sur); border:1px solid var(--bdr); border-left:2px solid var(--acc);
  padding:3px 8px; font-size:10px; white-space:nowrap;
  max-width:180px; overflow:hidden; text-overflow:ellipsis; color:var(--txt);
}
.ann-marker.marker-user-open .ann-label { border-left-color:#ff4d1c; }
.ann-marker.marker-user-done .ann-label { border-left-color:#1fb86a; }
.ann-marker.marker-redline .ann-label { border-left-color:#3f76ff; }
.ann-marker.panel-hover { z-index:58; }
.ann-marker.panel-hover .ann-dot {
  transform:translate(-50%,-50%) scale(calc(var(--ann-dot-scale, 1) * 1.14));
  border-color:var(--gold);
  box-shadow:0 0 0 6px rgba(255,199,0,0.18);
}
.ann-marker.panel-hover .ann-label {
  opacity:1;
  transform:translateY(0);
  min-width:min(240px, calc(100vw - 120px));
  width:min(340px, calc(100vw - 120px));
  max-width:min(340px, calc(100vw - 120px));
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:anywhere;
  word-break:break-word;
  line-height:1.6;
  padding:8px 10px;
  box-shadow:0 16px 34px rgba(0,0,0,0.28);
}
/* Dragging state */
.ann-marker.dragging .ann-dot { transform:translate(-50%,-50%) scale(calc(var(--ann-dot-scale, 1) * 1.5)); border-color:var(--gold); }
.ann-marker.dragging .ann-label { opacity:0; }

/* ── NOTE MODAL ── */
#note-modal {
  position:fixed; z-index:200; display:none; flex-direction:column;
  background:var(--panel);
  border:1px solid var(--bdr);
  min-width:280px;
}
#note-modal.visible { display:flex; }
.modal-hdr { padding:12px 16px; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--bdr); }
#note-modal-header { cursor:grab; user-select:none; touch-action:none; }
#note-modal.note-dragging #note-modal-header { cursor:grabbing; }
#author-input,#note-input {
  background:transparent; border:none; border-bottom:1px solid var(--bdr);
  color:var(--txt); font-family:'DM Mono',monospace; font-size:12px;
  padding:10px 16px; outline:none; width:100%;
}
#author-input { font-size:11px; color:var(--gold); }
#note-input   { min-height:80px; resize:none; line-height:1.6; }
.modal-foot { display:flex; border-top:1px solid var(--bdr); }
.modal-btn {
  flex:1; padding:10px; font-family:'DM Mono',monospace; font-size:10px;
  letter-spacing:0.1em; text-transform:uppercase; cursor:pointer;
  border:none; background:transparent; color:var(--muted); transition:all 0.15s;
}
.modal-btn:hover { color:var(--txt); border-color:var(--bdr); background:var(--sur2); }
.modal-btn.ok { color:var(--acc); }
.modal-btn.ok:hover { background:var(--acc); color:#fff; }

/* ── SMART FEEDBACK BTN ── */
.smart-fb-row {
  display:flex; align-items:center; gap:8px; padding:8px 16px;
  border-bottom:1px solid var(--bdr);
}
.smart-fb-btn {
  font-family:'DM Mono',monospace; font-size:10px; letter-spacing:0.08em;
  color:var(--acc); background:transparent; border:1px solid var(--acc);
  padding:5px 12px; cursor:pointer; transition:all 0.15s; border-radius:2px;
  display:inline-flex; align-items:center; justify-content:space-between; gap:10px;
}
.smart-fb-btn:hover { background:var(--acc); color:#fff; }
.smart-fb-btn:disabled { opacity:0.4; cursor:not-allowed; }
.smart-fb-btn:disabled:hover { background:transparent; color:var(--acc); }
.smart-fb-usage { font-family:'DM Mono',monospace; font-size:9px; color:var(--muted); }
.smart-fb-btn .utility-action-meta {
  min-width:auto;
  min-height:20px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid rgba(255,77,28,0.24);
  background:rgba(255,77,28,0.10);
  color:currentColor;
  font-size:8px;
  letter-spacing:0.08em;
}

/* ── SMART FEEDBACK MAGIC EFFECT ── */
.smart-fb-btn.loading {
  opacity:1!important; cursor:wait!important;
  background:linear-gradient(90deg,transparent,rgba(255,77,28,0.15),transparent);
  background-size:200% 100%;
  animation:shimmer 1.5s ease infinite;
  border-color:var(--acc); color:var(--acc);
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@keyframes sparkle-float {
  0%  { transform:translateY(0) scale(1); opacity:1; }
  100%{ transform:translateY(-28px) scale(0); opacity:0; }
}
.note-ta-wrap { position:relative; }

/* ── AI SUGGESTION PANEL ── */
.ai-suggestion-panel {
  display:none;
  padding:14px 16px;
  margin:0 16px 14px;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:18px;
  background:rgba(255,255,255,0.03);
  font-size:11px; line-height:1.5;
}
.ai-suggestion-panel.visible { display:block; }
.ai-sug-header { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.ai-sug-badge { font-family:'DM Mono',monospace; font-size:8px; letter-spacing:0.1em;
  background:rgba(255,77,28,0.12); color:var(--acc); padding:2px 8px; border-radius:999px; border:1px solid rgba(255,77,28,0.24); }
.ai-sug-confidence { font-family:'DM Mono',monospace; font-size:8px; color:var(--muted); }
.ai-sug-title { font-weight:600; font-size:12px; margin-bottom:4px; color:var(--txt); }
.ai-sug-text { color:var(--txt); opacity:0.9; margin-bottom:6px; white-space:pre-wrap; }
.ai-sug-meta { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.ai-sug-tag { font-family:'DM Mono',monospace; font-size:8px; letter-spacing:0.06em;
  color:var(--muted); border:1px solid var(--bdr); padding:2px 8px; border-radius:999px; }
.ai-sug-actions { display:flex; gap:6px; }
.ai-sug-actions button { font-family:'DM Mono',monospace; font-size:9px; letter-spacing:0.06em;
  padding:4px 12px; cursor:pointer; border-radius:999px; transition:all 0.15s; border:1px solid var(--bdr); }
.ai-sug-accept { background:var(--acc)!important; color:#fff!important; border-color:var(--acc)!important; }
.ai-sug-accept:hover { opacity:0.85; }
.ai-sug-edit { background:transparent; color:var(--txt); }
.ai-sug-edit:hover { border-color:var(--acc); color:var(--acc); }
.ai-sug-dismiss { background:transparent; color:var(--muted); }
.ai-sug-dismiss:hover { color:var(--txt); }
.priority-badge { font-family:'DM Mono',monospace; font-size:8px; letter-spacing:0.06em;
  padding:2px 8px; border-radius:999px; font-weight:600; }
.priority-badge.p-asap { background:rgba(255,200,0,0.15); color:#c9a000; border:1px solid rgba(200,160,0,0.3); }
.priority-badge.p-urgent { background:rgba(255,140,0,0.15); color:#d07000; border:1px solid rgba(210,120,0,0.3); }
.priority-badge.p-vurgent { background:rgba(255,50,50,0.15); color:#c03030; border:1px solid rgba(200,60,60,0.3); }
/* ── QA SUMMARY TABS ── */
.qa-sum-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.qa-sum-tab { font-family:'DM Mono',monospace; font-size:9px; letter-spacing:0.06em;
  padding:8px 12px; cursor:pointer; border:1px solid rgba(255,255,255,0.06); background:rgba(255,255,255,0.03);
  color:var(--muted); transition:all 0.15s; }
.qa-sum-tab:first-child,
.qa-sum-tab:last-child { border-radius:999px; }
.qa-sum-tab + .qa-sum-tab { border-left:none; }
.qa-sum-tab.active { background:var(--acc); color:#fff; border-color:var(--acc); }
.qa-sum-body { display:none; white-space:pre-wrap; font-size:11px; color:var(--txt); line-height:1.5; }
.qa-sum-body.active { display:block; }

/* ── Visual Feedback Panel ── */
#vf-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:10002;
  display:flex; align-items:center; justify-content:center;
}
#vf-panel {
  background:var(--sur); border:1px solid var(--bdr);
  width:720px; max-width:95vw; max-height:90vh; display:flex; flex-direction:column; overflow:hidden;
}
#vf-header {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 16px; border-bottom:1px solid var(--bdr);
  color:var(--txt);
}
#vf-header .vf-header-group {
  display:flex; align-items:center; gap:8px; margin-left:auto;
}
#vf-header button { background:none; border:none; color:var(--muted); cursor:pointer; font-size:14px; }
#vf-content { padding:16px; overflow-y:auto; flex:1; }
#vf-preflight .utility-preview-card {
  background:linear-gradient(180deg, color-mix(in srgb, var(--sur2) 86%, transparent), color-mix(in srgb, var(--sur) 96%, transparent));
}
.vf-preflight-actions {
  display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;
}
#vf-images { display:grid; gap:12px; margin-bottom:14px; }
.vf-img-label {
  font-family:'DM Mono',monospace; font-size:9px; letter-spacing:0.08em;
  color:var(--muted); text-transform:uppercase; margin-bottom:6px;
}
.vf-compare-stage {
  position:relative; width:100%; min-height:300px; border:1px solid var(--bdr);
  background:#111; overflow:hidden; border-radius:10px;
}
.vf-compare-stage img {
  width:100%; height:100%; object-fit:contain; display:block; background:#111;
}
#vf-original {
  position:relative; z-index:1;
}
.vf-compare-overlay {
  position:absolute; inset:0; width:50%; overflow:hidden; z-index:2; border-right:1px solid rgba(255,255,255,0.16);
}
.vf-compare-overlay img {
  width:100%; height:100%; min-width:100%; object-fit:contain;
}
.vf-compare-divider {
  position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--acc); z-index:3;
}
.vf-compare-controls {
  display:flex; align-items:center; gap:12px;
  font-family:'DM Mono',monospace; font-size:10px; letter-spacing:0.08em; color:var(--muted);
}
.vf-compare-controls input {
  flex:1; accent-color:var(--acc);
}
#vf-caption {
  font-size:12px; line-height:1.5; color:var(--txt); margin-bottom:10px; white-space:pre-wrap;
}
#vf-tags { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.vf-tag {
  font-family:'DM Mono',monospace; font-size:8px; letter-spacing:0.06em;
  color:var(--muted); border:1px solid var(--bdr); padding:2px 8px; border-radius:999px; background:rgba(255,255,255,0.03);
}
#vf-source-notes {
  display:grid; gap:8px; padding:12px 14px; border:1px solid rgba(255,255,255,0.06); border-radius:18px; background:rgba(255,255,255,0.03);
}
.vf-source-item {
  font-size:11px; line-height:1.55; color:var(--txt); white-space:pre-wrap;
}
.vf-source-item strong {
  font-family:'DM Mono',monospace; font-size:9px; letter-spacing:0.08em; color:var(--muted);
}
.vf-stale-badge {
  font-family:'DM Mono',monospace; font-size:9px; letter-spacing:0.06em;
  color:#c9a000; background:rgba(255,200,0,0.12); border:1px solid rgba(200,160,0,0.3);
  padding:3px 8px; border-radius:999px; margin-bottom:10px; display:inline-block;
}
#vf-actions {
  display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--bdr); flex-wrap:wrap;
}
#vf-loader {
  text-align:center; padding:24px 24px 22px; font-family:'DM Mono',monospace;
  font-size:11px; color:var(--muted); letter-spacing:0.06em;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:18px;
  background:rgba(255,255,255,0.03);
}
#vf-loader .vf-spinner {
  width:24px; height:24px; border:2px solid var(--bdr); border-top-color:var(--acc);
  border-radius:50%; animation:spin 0.8s linear infinite; margin:0 auto 12px;
}
#vf-loader-note {
  max-width:360px;
  margin:10px auto 14px;
  font-family:'Open Sans',sans-serif;
  font-size:12px;
  line-height:1.55;
  letter-spacing:0.01em;
  color:var(--txt);
}
#vf-loader-game {
  display:block;
  width:min(100%, 360px);
  height:auto;
  margin:0 auto 10px;
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(9,10,14,0.96), rgba(16,18,24,0.94));
  image-rendering:pixelated;
}
#vf-loader-controls {
  font-size:9px;
  color:var(--muted);
  letter-spacing:0.09em;
}
@keyframes spin { to { transform:rotate(360deg); } }

.sparkle-particle {
  position:absolute; pointer-events:none; font-size:10px; z-index:5;
  animation:sparkle-float 0.9s ease-out forwards;
}
@keyframes ta-glow-pulse {
  0%,100% { box-shadow:0 0 0 1px var(--bdr); }
  50%     { box-shadow:0 0 8px rgba(255,77,28,0.25), 0 0 0 1px var(--acc); }
}
#note-input.ai-loading {
  animation:ta-glow-pulse 1.2s ease infinite;
}

@keyframes deadline-pulse {
  0%,100% { opacity:1; }
  50%     { opacity:0.6; }
}

/* ── EMAIL VERIFICATION BANNER ── */
#verify-banner {
  display:none; position:fixed; top:52px; left:0; right:0; z-index:99;
  background:#ffc700; color:#1a1a1a; padding:8px 20px; font-size:11px;
  letter-spacing:0.03em; border-bottom:1px solid #e6b300;
  align-items:center; justify-content:space-between;
}
#verify-banner a { color:#1a1a1a; font-weight:700; text-decoration:underline; cursor:pointer; }
#verify-banner .close-banner { background:none; border:none; color:#1a1a1a; cursor:pointer; font-size:14px; padding:0 4px; }

/* ── THREAD UI ── */
.ann-thread {
  margin-top:8px; padding:8px 0 0 10px; border-left:2px solid var(--bdr);
}
.thread-reply {
  padding:4px 0; font-size:10px; line-height:1.4;
}
.thread-reply .reply-author { color:var(--gold); font-weight:700; }
.thread-reply .reply-time { color:var(--muted); margin-left:6px; font-size:9px; }
.thread-reply .reply-text { margin-top:2px; color:var(--txt); }
.thread-reply .reply-del { background:none; border:none; color:var(--muted); cursor:pointer; font-size:9px; padding:0; margin-left:6px; }
.thread-reply .reply-del:hover { color:var(--acc); }
.thread-input {
  display:flex; gap:4px; margin-top:6px; align-items:center;
}
.thread-input input {
  flex:1; padding:4px 8px; border:1px solid var(--bdr); border-radius:3px;
  background:var(--sur); color:var(--txt); font-family:'DM Mono',monospace;
  font-size:10px; outline:none;
}
.thread-input input:focus { border-color:var(--acc); }
.thread-input button {
  background:var(--acc); color:#fff; border:none; border-radius:3px;
  padding:4px 10px; cursor:pointer; font-size:10px; font-weight:700;
}
/* ── SHARE PASSWORD ── */
#share-pw-row {
  display:none; align-items:center; gap:8px; padding:0 16px 16px;
  border-top:none; background:transparent;
}
#share-pw-row input {
  flex:1; background:rgba(255,255,255,0.03); border:1px solid var(--bdr); color:var(--txt);
  font-family:'DM Mono',monospace; font-size:10px; padding:9px 12px; outline:none; border-radius:999px;
}
#share-pw-row input:focus { border-color:var(--acc); }
#share-pw-row button {
  font-family:'DM Mono',monospace; font-size:9px; letter-spacing:0.06em;
  padding:4px 8px; cursor:pointer; border:1px solid var(--bdr); background:transparent;
  color:var(--muted); transition:all 0.15s;
}
#share-pw-row button:hover { color:var(--txt); border-color:var(--acc); }
#pw-lock-icon { cursor:pointer; font-size:13px; transition:all 0.15s; }
#pw-lock-icon:hover { transform:scale(1.2); }
#pw-lock-icon.active { color:var(--green); }

/* ── PASSWORD PROMPT MODAL ── */
#pw-modal {
  position:fixed; z-index:300; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.8); display:none; align-items:center; justify-content:center;
}
#pw-modal.visible { display:flex; }
#pw-modal-box {
  background:var(--panel);
  border:1px solid var(--bdr);
  padding:0;
  min-width:320px;
  max-width:400px;
}
#pw-modal-box .modal-hdr { padding:14px 18px; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--bdr); }
#pw-modal-box input {
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--bdr);
  color:var(--txt); font-family:'DM Mono',monospace; font-size:13px;
  padding:14px 18px; outline:none;
}
#pw-modal-box .modal-foot { display:flex; border-top:1px solid var(--bdr); }
#pw-modal-box .pw-error {
  color:var(--acc);
  font-size:10px;
  padding:10px 16px 0;
  display:none;
}

/* ── NOTE IMAGE ATTACH ── */
.note-img-row {
  display:flex; align-items:center; gap:8px; padding:8px 16px;
  border-bottom:1px solid var(--bdr);
}
.note-img-btn {
  font-family:'DM Mono',monospace; font-size:10px; letter-spacing:0.08em;
  color:var(--muted); background:transparent; border:1px solid var(--bdr);
  padding:4px 10px; cursor:pointer; transition:all 0.15s;
}
.note-img-btn:hover { color:var(--txt); border-color:var(--acc); }
.note-img-preview {
  max-width:60px; max-height:40px; border:1px solid var(--bdr); display:none;
}
.note-img-clear {
  font-size:14px; color:var(--muted); cursor:pointer; background:none; border:none;
  display:none;
}
.note-img-clear:hover { color:var(--acc); }

/* ── TOAST ── */
.zr-toast {
  position:fixed; bottom:48px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--sur2); border:1px solid var(--bdr); color:var(--txt);
  font-family:'DM Mono',monospace; font-size:11px; letter-spacing:0.04em;
  padding:10px 20px; z-index:20000; opacity:0; transition:all 0.25s;
  pointer-events:none; white-space:nowrap;
}
.zr-toast.visible { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── HELP MODAL ── */
#help-overlay {
  position:fixed; inset:0; z-index:300; display:none;
  background:rgba(0,0,0,0.7); backdrop-filter:blur(4px);
  justify-content:center; align-items:center;
}
#help-overlay.visible { display:flex; }
#help-box {
  background:var(--sur); border:1px solid var(--bdr); border-top:2px solid var(--acc);
  max-width:420px; width:90%; max-height:80vh; overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,0.6);
}
#help-box h3 {
  padding:14px 20px; margin:0; font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--bdr);
}
.help-section { padding:14px 20px; border-bottom:1px solid var(--bdr); }
.help-section:last-of-type { border-bottom:none; }
.help-section h4 {
  font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--acc); margin:0 0 8px 0;
}
.help-section p, .help-section li {
  font-size:11px; color:var(--txt); line-height:1.7; margin:0 0 4px 0;
  font-family:'DM Mono',monospace;
}
.help-section ul { padding-left:16px; margin:0; }
.help-close {
  width:100%; padding:12px; border:none; border-top:1px solid var(--bdr);
  background:transparent; color:var(--muted); font-family:'DM Mono',monospace;
  font-size:10px; letter-spacing:0.12em; text-transform:uppercase; cursor:pointer;
}
.help-close:hover { background:var(--sur2); color:var(--txt); }

/* ── SNAPSHOT OVERLAY ── */
#snap-overlay {
  position:fixed; inset:0; z-index:150; display:none; flex-direction:column;
}
#snap-overlay.visible { display:flex; }
#snap-bg { position:absolute; inset:0; background-size:cover; background-position:center; }

/* Snap canvas — overlays the 3D viewport in snapshot mode */
#snap-canvas {
  position:fixed; top:0; left:0; z-index:110; display:none; cursor:crosshair;
}
#snap-canvas.active { display:block; }

#snap-bar {
  position:relative; z-index:10; height:54px;
  background:rgba(8,8,10,0.94); border-bottom:2px solid var(--green);
  display:flex; align-items:center; padding:0 16px; gap:12px;
  backdrop-filter:blur(12px); flex-shrink:0;
}

/* Snap bottom bar — replaces normal bottom bar in snapshot mode */
#snap-bottombar {
  position:fixed; bottom:0; left:0; right:300px; height:38px;
  background:var(--sur); border-top:2px solid var(--green);
  display:none; align-items:center; padding:0 12px; gap:8px; z-index:120;
}
#snap-bottombar.active { display:flex; }
#snap-bottombar .snap-badge {
  font-family:'Bebas Neue',sans-serif; font-size:12px; letter-spacing:0.12em;
  color:var(--green); border:1px solid var(--green); padding:2px 8px; white-space:nowrap;
}
#snap-bottombar .snap-t {
  width:28px; height:28px; background:var(--sur2); border:1px solid var(--bdr);
  color:var(--muted); cursor:pointer; font-size:13px;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.15s; border-radius:2px;
}
#snap-bottombar .snap-t:hover  { border-color:var(--txt); color:var(--txt); }
#snap-bottombar .snap-t.active { background:var(--green); border-color:var(--green); color:#000; }
#snap-bottombar .snap-sep { width:1px; height:22px; background:var(--bdr); flex-shrink:0; }
#snap-bottombar .slabel { font-size:9px; color:var(--muted); letter-spacing:0.08em; text-transform:uppercase; white-space:nowrap; }
#snap-bottombar .sslider { -webkit-appearance:none; width:60px; height:3px; background:var(--bdr); outline:none; }
#snap-bottombar .sslider::-webkit-slider-thumb { -webkit-appearance:none; width:10px; height:10px; border-radius:50%; background:var(--acc); cursor:pointer; }
#snap-bottombar .swatch { width:18px; height:18px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:border-color 0.15s; }
#snap-bottombar .swatch:hover { transform:scale(1.1); }
#snap-bottombar .swatch.active { border-color:#fff; }
#snap-bottombar .snap-btn { padding:4px 10px; font-family:'DM Mono',monospace; font-size:9px; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; border:1px solid var(--bdr); background:transparent; color:#908d96; transition:all 0.15s; }
#snap-bottombar .snap-btn:hover { color:var(--txt); border-color:var(--acc); }
#snap-bottombar .snap-btn.ok { color:var(--green); border-color:var(--green); }
#snap-bottombar .snap-btn.ok:hover { background:var(--green); color:#000; }
#snap-bottombar .snap-btn.cancel:hover { color:var(--acc); border-color:var(--acc); }
.viewer-float-toolbar {
  position:fixed;
  left:50%;
  display:none;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  width:min(calc(100vw - 72px), 1120px);
  min-height:46px;
  padding:7px 12px;
  border:1px solid var(--bdr);
  border-radius:18px;
  background:var(--panel);
  backdrop-filter:blur(16px);
  box-shadow:0 16px 36px rgba(0,0,0,0.18);
  transform:translateX(-50%);
  transition:opacity 0.22s ease, transform 0.22s ease;
  z-index:119;
}
.viewer-float-toolbar.active {
  display:flex;
}
.viewer-float-badge,
.viewer-float-btn,
.viewer-float-slider span:last-child {
  font-family:'DM Mono',monospace;
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.viewer-float-badge {
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  min-height:30px;
  padding:0 4px 0 0;
  color:var(--muted);
  background:none;
  border:none;
  font-size:10px;
  flex:0 0 auto;
}
.viewer-float-badge-live {
  color:var(--muted);
}
.viewer-float-actions {
  display:flex;
  flex:1 1 auto;
  align-items:center;
  flex-wrap:nowrap;
  gap:8px;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
}
.viewer-float-actions::-webkit-scrollbar { display:none; }
.viewer-float-actions-compact { gap:6px; }
.viewer-float-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid transparent;
  background:none;
  color:#908d96;
  font-size:10px;
  cursor:pointer;
  transition:border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  flex:0 0 auto;
  white-space:nowrap;
  line-height:1;
}
.viewer-float-btn:hover:not(:disabled) {
  color:var(--txt);
  border-color:var(--acc);
}
.viewer-float-btn:disabled {
  opacity:0.42;
  cursor:not-allowed;
}
.viewer-float-btn.active {
  color:var(--gold);
  border-color:var(--gold);
}
.viewer-float-pin-btn {
  min-width:64px;
  justify-content:center;
}
.viewer-float-color,
.viewer-float-slider {
  display:flex;
  align-items:center;
  gap:8px;
  min-height:30px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid transparent;
  background:none;
  flex:0 0 auto;
}
.viewer-float-color span,
.viewer-float-slider span:first-child {
  font-size:10px;
  color:var(--muted);
  letter-spacing:0.1em;
  text-transform:uppercase;
  white-space:nowrap;
}
.viewer-float-slider {
  justify-content:space-between;
  min-width:190px;
}
.viewer-float-slider input[type="range"] {
  width:92px;
}
.viewer-live-strip {
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:6px;
  min-height:30px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  margin-left:4px;
}
.viewer-live-strip:empty {
  display:none;
}
.viewer-live-strip::-webkit-scrollbar {
  display:none;
}
.viewer-live-presenter-banner {
  display:none;
  align-items:center;
  gap:6px;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(255,77,28,0.24);
  background:rgba(255,77,28,0.10);
  color:var(--txt);
  font-size:10px;
  letter-spacing:0.05em;
  white-space:nowrap;
  flex:0 0 auto;
}
.viewer-live-presenter-banner.active {
  display:inline-flex;
}
.viewer-live-presenter-banner::before {
  content:'';
  width:7px;
  height:7px;
  border-radius:999px;
  background:#ff4b55;
  box-shadow:0 0 0 0 rgba(255,75,85,0.42);
  animation:live-rec-pulse 1.4s ease-in-out infinite;
  flex:0 0 auto;
}
.viewer-live-avatar {
  position:relative;
  width:30px;
  height:30px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--live-avatar-color, #8f95a0) 54%, rgba(255,255,255,0.24));
  background:color-mix(in srgb, var(--live-avatar-color, #8f95a0) 78%, rgba(12,14,18,0.24));
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:0.08em;
  cursor:default;
  flex:0 0 auto;
  box-shadow:0 10px 22px rgba(0,0,0,0.16);
}
.viewer-live-avatar.self {
  box-shadow:0 0 0 1px rgba(255,255,255,0.18), 0 10px 22px rgba(0,0,0,0.16);
}
.viewer-live-avatar.presenter {
  border-color:rgba(255,77,28,0.7);
  box-shadow:0 0 0 1px rgba(255,77,28,0.26), 0 10px 22px rgba(0,0,0,0.16);
}
.viewer-live-avatar.voice-on::after {
  content:'';
  position:absolute;
  right:-1px;
  bottom:-1px;
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--green);
  border:2px solid var(--panel);
}
.viewer-live-avatar.self::before {
  content:'';
  position:absolute;
  inset:-4px;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,0.10);
}
.viewer-float-btn.recording {
  color:#ff6b61;
  border-color:#ff6b61;
  box-shadow:0 0 0 1px rgba(255,107,97,0.16), 0 0 18px rgba(255,107,97,0.18);
}
.viewer-float-btn.recording::before {
  content:'';
  width:7px;
  height:7px;
  border-radius:999px;
  background:#ff4b55;
  box-shadow:0 0 0 0 rgba(255,75,85,0.42);
  animation:live-rec-pulse 1.4s ease-in-out infinite;
}
.viewer-float-btn.viewer-float-mic-btn.mic-live {
  color:var(--gold);
  border-color:var(--gold);
}
.viewer-float-btn.viewer-float-mic-btn.mic-muted {
  color:var(--muted);
  border-color:rgba(255,255,255,0.12);
}
.utility-draw-space-switch {
  padding:0;
  gap:2px;
  border:none;
  background:none;
}
.utility-draw-space-switch .surface-mode-btn {
  min-width:0;
  min-height:30px;
  padding:0 10px;
  font-size:10px;
  gap:5px;
  border:1px solid transparent;
  background:none;
  color:#908d96;
  box-shadow:none;
}
.utility-draw-space-switch .surface-mode-btn:hover { color:var(--txt); border-color:var(--acc); }
.utility-draw-space-switch .surface-mode-btn.active {
  color:var(--gold);
  border-color:var(--gold);
  background:none;
  box-shadow:none;
}
.surface-mode-icon {
  font-size:11px;
  line-height:1;
}
@keyframes live-rec-pulse {
  0%, 100% { box-shadow:0 0 0 0 rgba(255,75,85,0.42); opacity:1; }
  50% { box-shadow:0 0 0 6px rgba(255,75,85,0.08); opacity:0.95; }
}
.snap-badge {
  font-family:'Bebas Neue',sans-serif; font-size:14px; letter-spacing:0.15em;
  color:var(--green); border:1px solid var(--green); padding:3px 10px; white-space:nowrap;
}
.snap-tools { display:flex; gap:3px; }
.snap-t {
  width:32px; height:32px; background:var(--sur2); border:1px solid var(--bdr);
  color:var(--muted); cursor:pointer; font-size:15px;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.15s; border-radius:2px;
}
.snap-t:hover  { border-color:var(--txt); color:var(--txt); }
.snap-t.active { background:var(--green); border-color:var(--green); color:#000; }

.snap-sep { width:1px; height:28px; background:var(--bdr); flex-shrink:0; }

#snap-colors { display:flex; align-items:center; gap:6px; }
.swatch {
  width:22px; height:22px; border-radius:50%; cursor:pointer;
  border:2px solid transparent; transition:border-color 0.15s, transform 0.15s;
}
.swatch:hover  { transform:scale(1.15); }
.swatch.active { border-color:#fff; }

.slabel { font-size:10px; color:var(--muted); letter-spacing:0.1em; text-transform:uppercase; white-space:nowrap; }
.sslider {
  -webkit-appearance:none; width:80px; height:3px;
  background:var(--bdr); outline:none;
}
.sslider::-webkit-slider-thumb {
  -webkit-appearance:none; width:12px; height:12px;
  border-radius:50%; background:var(--acc); cursor:pointer;
}

.snap-hint { font-size:10px; color:var(--gold); letter-spacing:0.1em; white-space:nowrap; }
.snap-spacer { flex:1; }

.snap-btn {
  font-family:'DM Mono',monospace; font-size:10px; letter-spacing:0.1em;
  text-transform:uppercase; padding:6px 12px; cursor:pointer;
  border:1px solid var(--bdr); background:var(--sur2); color:var(--txt); transition:all 0.15s;
  white-space:nowrap;
}
.snap-btn:hover  { border-color:var(--txt); color:var(--txt); }
.snap-btn.ok     { background:var(--green); border-color:var(--green); color:#000; font-weight:bold; }
.snap-btn.ok:hover { opacity:0.9; transform:translateY(-1px); }
.snap-btn.cancel { color:var(--acc); border-color:var(--acc); }
.snap-btn.cancel:hover { border-color:var(--acc); color:var(--acc); }

/* Inline text input in paintover */
#snap-text-inp {
  position:fixed; display:none; background:transparent; border:none;
  border-bottom:1.5px solid var(--gold); color:var(--gold);
  font-family:'DM Mono',monospace; font-size:22px; outline:none;
  padding:2px 4px; min-width:120px; z-index:160;
  caret-color:var(--gold); text-shadow:0 1px 4px rgba(0,0,0,0.9);
}
#snap-text-inp.visible { display:block; }


/* ── LIGHT MODE : Feedback Panel ── */
[data-theme="light"] #panel-header,
[data-theme="light"] #export-bar,
[data-theme="light"] #feedback-action-bar {
  background:color-mix(in srgb, var(--sur) 82%, transparent);
  border-color:var(--bdr);
}
[data-theme="light"] .ann-item {
  background:color-mix(in srgb, var(--sur) 72%, transparent);
  box-shadow:0 10px 24px rgba(66, 56, 43, 0.08);
}
[data-theme="light"] .ann-item:hover {
  background:rgba(255,77,28,0.08);
}
[data-theme="light"] .ann-item.sel {
  background:rgba(255,77,28,0.14);
}
[data-theme="light"] .ann-text {
  color:var(--txt);
}
[data-theme="light"] .ann-actions button,
[data-theme="light"] .layer-vis,
[data-theme="light"] .layer-del,
[data-theme="light"] .layer-priority {
  background:var(--sur2);
  border-color:var(--bdr);
}
[data-theme="light"] .ann-actions button:hover,
[data-theme="light"] .layer-vis:hover,
[data-theme="light"] .layer-del:hover {
  background:color-mix(in srgb, var(--sur2) 76%, white);
}
[data-theme="light"] .ann-like-count,
[data-theme="light"] .ann-reply-btn .reply-count {
  background:var(--sur);
  border-color:var(--bdr);
}
[data-theme="light"] .empty-state,
[data-theme="light"] .layer-drop-zone {
  background:color-mix(in srgb, var(--sur) 68%, transparent);
  border-color:var(--bdr);
}
[data-theme="light"] #note-modal,
[data-theme="light"] #pw-modal-box,
[data-theme="light"] #help-box,
[data-theme="light"] #vf-panel {
  background:var(--sur);
  box-shadow:none;
}
[data-theme="light"] .modal-btn:hover,
[data-theme="light"] .help-close:hover {
  background:var(--sur2);
}
[data-theme="light"] .thread-input input,
[data-theme="light"] #share-pw-row input,
[data-theme="light"] .note-img-preview,
[data-theme="light"] .ann-thumb {
  background:var(--sur);
  border-color:var(--bdr);
}
[data-theme="light"] .vf-compare-stage,
[data-theme="light"] .vf-compare-stage img {
  background:color-mix(in srgb, var(--sur) 78%, #d9d1c8);
}
[data-theme="light"] .viewer-float-toolbar {
  background:linear-gradient(180deg, rgba(255,255,255,0.94), rgba(244,241,235,0.90));
  border-color:rgba(211,206,198,0.9);
  box-shadow:0 18px 36px rgba(92,84,72,0.16);
}
[data-theme="light"] .viewer-float-btn,
[data-theme="light"] .viewer-float-color,
[data-theme="light"] .viewer-float-slider {
  background:none;
}
[data-theme="light"] .viewer-float-btn.active,
[data-theme="light"] .utility-draw-space-switch .surface-mode-btn.active {
  background:var(--sur2);
  color:var(--txt);
  border-color:var(--gold);
}
[data-theme="light"] .viewer-live-avatar {
  color:#fff;
  box-shadow:0 10px 20px rgba(92,84,72,0.14);
}
[data-theme="light"] .viewer-live-avatar.voice-on::after {
  border-color:rgba(244,241,235,0.92);
}
#onboarding-overlay{
  position:fixed;
  inset:0;
  z-index:12000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
  background:
    radial-gradient(circle at top left, rgba(255,77,28,0.16), transparent 34%),
    radial-gradient(circle at bottom right, rgba(255,199,0,0.10), transparent 28%),
    rgba(11, 11, 13, 0.74);
  backdrop-filter: blur(14px);
}

#onboarding-overlay.hidden{
  display:none;
}

#onboarding-shell{
  position:relative;
  width:min(1040px, 100%);
  max-height:min(880px, calc(100vh - 48px));
  overflow:auto;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:28px;
  background:
    linear-gradient(180deg, rgba(25,25,28,0.98), rgba(16,16,18,0.98));
  box-shadow: 0 28px 90px rgba(0,0,0,0.42);
  padding:34px 34px 30px;
}

#onboarding-close{
  position:absolute;
  top:18px;
  right:18px;
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid var(--bdr);
  background:rgba(255,255,255,0.03);
  color:var(--txt);
  cursor:pointer;
}

#onboarding-head{
  display:grid;
  gap:8px;
  padding-right:56px;
}

.onboarding-kicker{
  font-size:11px;
  letter-spacing:0.28em;
  color:var(--muted);
}

.onboarding-title{
  font-size:clamp(28px, 3vw, 42px);
  line-height:1.02;
  letter-spacing:-0.03em;
  font-weight:700;
}

.onboarding-copy{
  max-width:620px;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}

#onboarding-progress{
  display:flex;
  gap:10px;
  margin:20px 0 24px;
}

.onboarding-progress-dot{
  flex:1;
  min-height:6px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  overflow:hidden;
}

.onboarding-progress-dot::after{
  content:"";
  display:block;
  width:100%;
  height:100%;
  transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg, var(--acc), #ff9a5f);
  transition:transform 180ms ease;
}

.onboarding-progress-dot.active::after,
.onboarding-progress-dot.done::after{
  transform:scaleX(1);
}

#onboarding-content{
  display:grid;
  gap:18px;
}

.onboarding-step-card{
  border:1px solid rgba(255,255,255,0.09);
  border-radius:24px;
  background:rgba(255,255,255,0.035);
  padding:24px;
}

.onboarding-step-label{
  font-size:11px;
  letter-spacing:0.18em;
  color:var(--muted);
  margin-bottom:10px;
}

.onboarding-step-title{
  font-size:26px;
  line-height:1.08;
  margin-bottom:8px;
}

.onboarding-step-copy{
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
  margin-bottom:18px;
}

.onboarding-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.4fr) minmax(280px, 0.9fr);
  gap:18px;
}

.onboarding-side-card,
.onboarding-main-card{
  border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;
  background:rgba(8,8,10,0.34);
  padding:18px;
}

.onboarding-field{
  display:grid;
  gap:8px;
}

.onboarding-field-label{
  font-size:11px;
  letter-spacing:0.16em;
  color:var(--muted);
}

.onboarding-input,
.onboarding-textarea{
  width:100%;
  border-radius:16px;
  border:1px solid var(--bdr);
  background:rgba(255,255,255,0.04);
  color:var(--txt);
  padding:14px 16px;
  font:inherit;
}

.onboarding-input:focus,
.onboarding-textarea:focus{
  outline:none;
  border-color:rgba(255,77,28,0.7);
  box-shadow:0 0 0 3px rgba(255,77,28,0.14);
}

.onboarding-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:16px;
}

.onboarding-btn{
  min-height:48px;
  padding:0 18px;
  border-radius:16px;
  border:1px solid var(--bdr);
  background:rgba(255,255,255,0.03);
  color:var(--txt);
  font-size:12px;
  letter-spacing:0.14em;
  cursor:pointer;
}

.onboarding-btn.primary{
  border-color:rgba(255,77,28,0.72);
  background:rgba(255,77,28,0.16);
  color:#fff7f2;
}

.onboarding-btn.ghost{
  background:transparent;
}

.onboarding-btn[disabled]{
  opacity:0.46;
  cursor:not-allowed;
}

.onboarding-session-suggestion{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,0.04);
  color:var(--muted);
  font-size:12px;
}

.onboarding-session-suggestion strong{
  color:var(--txt);
  font-weight:600;
}

.onboarding-dropzone{
  border:1px dashed rgba(255,255,255,0.22);
  border-radius:24px;
  min-height:260px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}

.onboarding-dropzone.dragover{
  border-color:rgba(255,77,28,0.78);
  background:rgba(255,77,28,0.10);
}

.onboarding-drop-icon{
  font-size:34px;
  margin-bottom:10px;
}

.onboarding-formats{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}

.onboarding-format-pill{
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.08);
  color:var(--muted);
  font-size:11px;
  letter-spacing:0.12em;
}

.onboarding-status{
  min-height:20px;
  font-size:12px;
  color:var(--muted);
  margin-top:12px;
}

.onboarding-status.error{
  color:#ff9a90;
}

.onboarding-status.success{
  color:#a4f1c2;
}

.onboarding-link-button{
  border:none;
  background:none;
  color:var(--acc);
  padding:0;
  cursor:pointer;
  font:inherit;
}

.onboarding-invite-list{
  display:grid;
  gap:10px;
  margin-top:16px;
}

.onboarding-invite-pill{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,0.04);
  font-size:12px;
}

.onboarding-share-link{
  width:100%;
  min-height:52px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(0,0,0,0.24);
  color:var(--txt);
  padding:14px 16px;
  font:inherit;
}

.onboarding-bullets{
  display:grid;
  gap:12px;
}

.onboarding-bullet{
  padding:14px 16px;
  border-radius:16px;
  background:rgba(255,255,255,0.04);
}

.onboarding-bullet strong{
  display:block;
  margin-bottom:4px;
}

#room-tour-root{
  position:fixed;
  inset:0;
  z-index:12100;
  pointer-events:none;
}

#room-tour-root.hidden{
  display:none;
}

#room-tour-root.target-missing .room-tour-beacon,
#room-tour-root.target-missing .room-tour-bubble{
  opacity:0;
}

.room-tour-spotlight{
  position:fixed;
  inset:0;
  background:rgba(5,7,10,0.66);
  clip-path:circle(0px at 0px 0px);
  transition:clip-path 360ms cubic-bezier(0.4, 0, 0.2, 1);
}

.room-tour-beacon{
  position:fixed;
  z-index:12110;
  width:28px;
  height:28px;
  margin-left:-14px;
  margin-top:-14px;
  border-radius:50%;
  background:var(--acc);
  box-shadow:0 0 0 5px rgba(255,77,28,0.12), 0 18px 40px rgba(0,0,0,0.26);
  transition:left 220ms cubic-bezier(0.22, 1, 0.36, 1), top 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease, background 180ms ease;
}

.room-tour-beacon::before,
.room-tour-beacon::after{
  content:"";
  position:absolute;
  inset:-8px;
  border:2px solid rgba(255,77,28,0.86);
  border-radius:50%;
  animation:room-tour-ping 1.8s ease-out infinite;
}

.room-tour-beacon::after{
  animation-delay:0.55s;
}

.room-tour-beacon.success{
  background:#86f3b9;
  box-shadow:0 0 0 5px rgba(134,243,185,0.12), 0 18px 40px rgba(0,0,0,0.24);
}

.room-tour-beacon.success::before,
.room-tour-beacon.success::after{
  border-color:rgba(134,243,185,0.82);
}

@keyframes room-tour-ping {
  0%   { transform:scale(0.82); opacity:0.78; }
  100% { transform:scale(2.28); opacity:0; }
}

.room-tour-bubble{
  position:fixed;
  z-index:12110;
  width:min(340px, calc(100vw - 32px));
  padding:16px 18px 14px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(247,241,235,0.98);
  color:#05070a;
  box-shadow:0 24px 70px rgba(0,0,0,0.34);
  transform:translateY(10px);
  opacity:0;
  transition:left 220ms cubic-bezier(0.22, 1, 0.36, 1), top 220ms cubic-bezier(0.22, 1, 0.36, 1), transform 260ms ease, opacity 260ms ease;
  pointer-events:auto;
}

.room-tour-bubble.visible{
  transform:translateY(0);
  opacity:1;
}

.room-tour-bubble-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.room-tour-kicker{
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:0.18em;
  color:#cf4f26;
  margin-bottom:6px;
}

.room-tour-title{
  font-family:'Syne',sans-serif;
  font-size:18px;
  line-height:1.04;
  letter-spacing:-0.03em;
}

.room-tour-copy{
  font-size:13px;
  line-height:1.55;
  color:rgba(5,7,10,0.76);
}

.room-tour-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:0.08em;
  color:rgba(5,7,10,0.46);
}

.room-tour-step-nav{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.room-tour-close,
.room-tour-skip,
.room-tour-prev,
.room-tour-next{
  border:none;
  background:none;
  color:rgba(5,7,10,0.58);
  cursor:pointer;
  font:inherit;
  letter-spacing:0.08em;
  padding:0;
}

.room-tour-close{
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(5,7,10,0.12);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  line-height:1;
}

.room-tour-prev,
.room-tour-next{
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(5,7,10,0.12);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  line-height:1;
  background:rgba(5,7,10,0.03);
}

.room-tour-close:hover,
.room-tour-skip:hover,
.room-tour-prev:hover,
.room-tour-next:hover{
  color:#05070a;
}

.room-tour-prev:disabled,
.room-tour-next:disabled{
  opacity:0.34;
  cursor:not-allowed;
}

@media (max-width: 900px) {
  .room-tour-bubble{
    width:min(340px, calc(100vw - 24px));
    padding:14px 16px 13px;
  }
  .room-tour-footer{
    flex-wrap:wrap;
  }
  .room-tour-step-nav{
    order:2;
  }
  .room-tour-skip{
    order:1;
  }
}

@media (max-width: 600px) {
  .room-tour-beacon{
    width:22px;
    height:22px;
    margin-left:-11px;
    margin-top:-11px;
  }
  .room-tour-bubble{
    width:calc(100vw - 20px);
    max-width:none;
    padding:14px 14px 12px;
    border-radius:18px;
  }
  .room-tour-title{
    font-size:16px;
  }
  .room-tour-copy{
    font-size:12px;
    line-height:1.5;
  }
  .room-tour-footer{
    gap:10px;
    margin-top:12px;
  }
  .room-tour-step-nav{
    width:100%;
    justify-content:space-between;
  }
  .room-tour-skip{
    width:100%;
    text-align:left;
  }
}

#onboarding-tooltip{
  position:fixed;
  z-index:12100;
  width:min(320px, calc(100vw - 28px));
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(16,16,18,0.96);
  box-shadow:0 22px 60px rgba(0,0,0,0.34);
  color:var(--txt);
}

#onboarding-tooltip.hidden{
  display:none;
}

.onboarding-tooltip-kicker{
  font-size:10px;
  letter-spacing:0.18em;
  color:var(--acc);
  margin-bottom:8px;
}

.onboarding-tooltip-title{
  font-size:15px;
  margin-bottom:6px;
}

.onboarding-tooltip-copy{
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

@media (max-width: 900px){
  #onboarding-overlay{
    padding:16px;
  }

  #onboarding-shell{
    max-height:calc(100vh - 24px);
    padding:22px 20px 20px;
  }

  .onboarding-grid{
    grid-template-columns:1fr;
  }
}

/* ── ORIENTATION CUBE ── */
#orientation-cube {
  position:fixed;
  bottom:18px;
  left:72px;
  width:128px;
  height:128px;
  z-index:90;
  pointer-events:auto;
  border-radius:14px;
  overflow:hidden;
  opacity:0.85;
  transition:opacity 0.25s ease, transform 0.25s ease;
  will-change:opacity;
}
#orientation-cube:hover {
  opacity:1;
  transform:scale(1.04);
}
#orientation-cube canvas {
  display:block;
  border-radius:14px;
}
/* Hide during snapshot mode, draw mode fullscreen, loading */
body.snap-mode #orientation-cube,
body.showcase-active #orientation-cube,
#loading:not(.hidden) ~ #orientation-cube {
  display:none !important;
}
@media(max-width:900px){
  #orientation-cube {
    width:80px; height:80px;
    bottom:84px; left:12px;
  }
  #orientation-cube canvas {
    width:80px !important; height:80px !important;
  }
}
@media(max-width:600px){
  #orientation-cube {
    width:64px; height:64px;
    bottom:72px; left:8px;
  }
  #orientation-cube canvas {
    width:64px !important; height:64px !important;
  }
}

/* ── LIGHTBOX ── */
#lightbox {
  position:fixed; inset:0; background:rgba(0,0,0,0.88);
  z-index:400; display:none; align-items:center; justify-content:center;
  backdrop-filter:blur(8px);
}
#lightbox.visible { display:flex; }
#lightbox img { max-width:90vw; max-height:88vh; border:1px solid var(--bdr); box-shadow:0 40px 100px rgba(0,0,0,0.8); }
#lb-close { position:absolute; top:20px; right:24px; font-size:24px; color:var(--muted); cursor:pointer; background:none; border:none; transition:color 0.15s; }
#lb-close:hover { color:var(--txt); }

/* ── LOADING ── */
#loading {
  position:fixed; inset:0; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  z-index:300; gap:20px;
}
.ld-logo { font-family:'DM Mono',monospace; font-size:28px; letter-spacing:0.24em; text-transform:uppercase; }
.ld-logo span { color:var(--acc); }
.ld-track { width:200px; height:2px; background:var(--bdr); }
.ld-fill  { height:100%; background:var(--acc); width:0%; transition:width 0.3s; }
.ld-txt   { font-size:11px; color:var(--muted); letter-spacing:0.15em; }

/* ── VIEWPORT MESH SKELETON ── */
#mesh-skeleton {
  position: fixed;
  top: 72px;
  left: 96px;
  right: 24px;
  bottom: 88px;
  z-index: 76;
  pointer-events: none;
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  transition: opacity 0.26s ease, transform 0.26s ease;
}
#mesh-skeleton.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.mesh-skeleton-grid {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 32px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.028) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.024) 0 1px, transparent 1px 88px);
  overflow: hidden;
}
.mesh-skeleton-grid::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.018) 100%);
}
.mesh-skeleton-shell {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
}
.mesh-skeleton-preview {
  position: relative;
  width: min(34vw, 420px);
  aspect-ratio: 1.08 / 0.92;
}
.mesh-skeleton-shadow {
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 54%;
  height: 12%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.035) 42%, rgba(255,255,255,0) 75%);
  animation: meshSkeletonShadowPulse 1.9s ease-in-out infinite;
}
.mesh-skeleton-poly {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 68%;
  height: 70%;
  border: 1px solid rgba(255,255,255,0.14);
  background:
    linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02)),
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
  clip-path: polygon(18% 8%, 78% 4%, 94% 32%, 86% 78%, 54% 96%, 16% 84%, 6% 42%);
}
.mesh-skeleton-poly::before,
.mesh-skeleton-poly::after {
  content: '';
  position: absolute;
  inset: 10% 12%;
  border: 1px solid rgba(255,255,255,0.1);
  clip-path: polygon(18% 8%, 78% 4%, 94% 32%, 86% 78%, 54% 96%, 16% 84%, 6% 42%);
}
.mesh-skeleton-poly::after {
  inset: 24% 28%;
  opacity: 0.64;
}
.mesh-skeleton-poly-back {
  transform: translate(-50%, -54%) scale(0.88) rotate(-10deg);
  opacity: 0.42;
  animation: meshSkeletonFloatBack 3.6s ease-in-out infinite;
}
.mesh-skeleton-poly-mid {
  transform: translate(-50%, -50%) scale(1) rotate(-3deg);
  opacity: 0.72;
  animation: meshSkeletonFloatMid 2.8s ease-in-out infinite;
}
.mesh-skeleton-poly-front {
  transform: translate(-50%, -46%) scale(1.08) rotate(8deg);
  border-color: rgba(255,255,255,0.22);
  opacity: 0.92;
  animation: meshSkeletonFloatFront 2.2s ease-in-out infinite;
}
.mesh-skeleton-glint {
  position: absolute;
  inset: 6% 12%;
  background: linear-gradient(110deg, rgba(255,255,255,0) 28%, rgba(255,255,255,0.22) 44%, rgba(255,255,255,0) 58%);
  transform: skewX(-16deg) translateX(-120%);
  animation: meshSkeletonSweep 2.8s linear infinite;
}
.mesh-skeleton-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
}
.mesh-skeleton-kicker {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
}
.mesh-skeleton-file {
  max-width: min(64vw, 620px);
  font-family: 'Syne', sans-serif;
  font-size: clamp(20px, 2.1vw, 30px);
  font-weight: 700;
  line-height: 1.04;
  color: var(--txt);
}
.mesh-skeleton-label {
  max-width: min(56vw, 520px);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.mesh-skeleton-bars {
  margin-top: 4px;
  display: flex;
  gap: 8px;
}
.mesh-skeleton-bars span {
  width: 48px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
  position: relative;
}
.mesh-skeleton-bars span::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));
  animation: meshSkeletonBarSweep 1.5s linear infinite;
}
.mesh-skeleton-bars span:nth-child(2)::after { animation-delay: 0.18s; }
.mesh-skeleton-bars span:nth-child(3)::after { animation-delay: 0.36s; }

@keyframes meshSkeletonFloatBack {
  0%, 100% { transform: translate(-50%, -54%) scale(0.88) rotate(-10deg); }
  50% { transform: translate(-50%, -58%) scale(0.91) rotate(-7deg); }
}
@keyframes meshSkeletonFloatMid {
  0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
  50% { transform: translate(-50%, -54%) scale(1.03) rotate(0deg); }
}
@keyframes meshSkeletonFloatFront {
  0%, 100% { transform: translate(-50%, -46%) scale(1.08) rotate(8deg); }
  50% { transform: translate(-50%, -50%) scale(1.11) rotate(5deg); }
}
@keyframes meshSkeletonShadowPulse {
  0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 0.65; }
  50% { transform: translateX(-50%) scaleX(1.08); opacity: 1; }
}
@keyframes meshSkeletonSweep {
  0% { transform: skewX(-16deg) translateX(-120%); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: skewX(-16deg) translateX(120%); opacity: 0; }
}
@keyframes meshSkeletonBarSweep {
  100% { transform: translateX(160%); }
}

[data-theme="light"] #mesh-skeleton .mesh-skeleton-grid {
  border-color: rgba(20,22,27,0.08);
  background:
    linear-gradient(180deg, rgba(20,22,27,0.018), rgba(20,22,27,0)),
    repeating-linear-gradient(90deg, rgba(20,22,27,0.038) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(0deg, rgba(20,22,27,0.032) 0 1px, transparent 1px 88px);
}
[data-theme="light"] #mesh-skeleton .mesh-skeleton-grid::after {
  background: linear-gradient(180deg, rgba(20,22,27,0) 0%, rgba(20,22,27,0.028) 100%);
}
[data-theme="light"] #mesh-skeleton .mesh-skeleton-shadow {
  background: radial-gradient(circle, rgba(20,22,27,0.12) 0%, rgba(20,22,27,0.04) 42%, rgba(20,22,27,0) 75%);
}
[data-theme="light"] #mesh-skeleton .mesh-skeleton-poly {
  border-color: rgba(20,22,27,0.18);
  background:
    linear-gradient(160deg, rgba(255,255,255,0.46), rgba(20,22,27,0.03)),
    linear-gradient(180deg, rgba(255,255,255,0.32), rgba(20,22,27,0.025));
}
[data-theme="light"] #mesh-skeleton .mesh-skeleton-poly::before,
[data-theme="light"] #mesh-skeleton .mesh-skeleton-poly::after {
  border-color: rgba(20,22,27,0.12);
}
[data-theme="light"] #mesh-skeleton .mesh-skeleton-glint {
  background: linear-gradient(110deg, rgba(255,255,255,0) 28%, rgba(255,255,255,0.54) 44%, rgba(255,255,255,0) 58%);
}
[data-theme="light"] #mesh-skeleton .mesh-skeleton-bars span {
  background: rgba(20,22,27,0.12);
}
[data-theme="light"] #mesh-skeleton .mesh-skeleton-bars span::after {
  background: linear-gradient(90deg, rgba(20,22,27,0), rgba(20,22,27,0.24), rgba(20,22,27,0));
}

@media (max-width: 900px) {
  #mesh-skeleton {
    top: calc(60px + env(safe-area-inset-top, 0px));
    left: 14px;
    right: 14px;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
  .mesh-skeleton-preview {
    width: min(76vw, 360px);
  }
  .mesh-skeleton-file,
  .mesh-skeleton-label {
    max-width: 78vw;
  }
}

/* ── DROP ZONE ── */
#drop-zone {
  position:fixed; inset:52px 300px 32px 64px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; border:1px dashed var(--bdr); margin:20px;
  z-index:10; pointer-events:none; opacity:0; transition:opacity 0.3s;
}
#drop-zone.visible { opacity:1; pointer-events:all; }
.drop-icon { font-size:48px; opacity:0.3; }
.drop-txt  { font-family:'Syne',sans-serif; font-size:18px; font-weight:700; color:var(--muted); }
.drop-sub  { font-size:11px; color:var(--muted); letter-spacing:0.1em; }

/* ── GHOST BUTTON ── */
.ghost-btn {
  background:none; border:1px solid var(--bdr); color:var(--muted);
  font-family:'DM Mono',monospace; font-size:10px; letter-spacing:0.1em;
  padding:5px 10px; cursor:pointer; transition:all 0.15s;
}
.ghost-btn:hover { border-color:var(--acc); color:var(--txt); }

/* ── AUTH MODAL ── */
#auth-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:2000;
  display:flex; align-items:center; justify-content:center;
}
#auth-overlay.hidden { display:none; }
#auth-box {
  background:var(--sur); border:1px solid var(--bdr); padding:40px;
  width:360px; display:flex; flex-direction:column; gap:16px;
}
.auth-logo { font-family:'DM Mono',monospace; font-size:28px; letter-spacing:0.24em; text-transform:uppercase; color:var(--txt); }
.auth-logo span { color:var(--acc); }
.auth-tabs { display:flex; gap:0; border-bottom:1px solid var(--bdr); }
.auth-tab {
  flex:1; background:none; border:none; border-bottom:2px solid transparent;
  color:var(--muted); font-family:'DM Mono',monospace; font-size:10px;
  letter-spacing:0.12em; padding:8px; cursor:pointer; transition:all 0.15s;
  margin-bottom:-1px;
}
.auth-tab.active { color:var(--txt); border-bottom-color:var(--acc); }
.auth-input {
  background:var(--sur2); border:1px solid var(--bdr); color:var(--txt);
  font-family:'DM Mono',monospace; font-size:11px; padding:10px 12px;
  outline:none; transition:border 0.15s; width:100%; box-sizing:border-box;
}
.auth-input:focus { border-color:var(--acc); }
.auth-btn {
  background:var(--acc); color:#fff; border:none; font-family:'DM Mono',monospace;
  font-size:11px; letter-spacing:0.1em; padding:11px; cursor:pointer;
  transition:opacity 0.15s; text-transform:uppercase;
}
.auth-btn:hover { opacity:0.85; }
.auth-google {
  background:none; border:1px solid var(--bdr); color:var(--txt);
  font-family:'DM Mono',monospace; font-size:10px; letter-spacing:0.08em;
  padding:10px; cursor:pointer; transition:all 0.15s; display:flex;
  align-items:center; justify-content:center; gap:8px;
}
.auth-google:hover { border-color:var(--acc); }
.auth-sep { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:9px; letter-spacing:0.1em; }
.auth-sep::before,.auth-sep::after { content:''; flex:1; height:1px; background:var(--bdr); }
.auth-err { color:#ff4d1c; font-size:10px; letter-spacing:0.05em; min-height:14px; }

/* ── USER CHIP (topbar) ── */
#user-chip {
  display:flex; align-items:center; gap:8px; cursor:pointer;
}
#user-avatar {
  width:28px; height:28px; border-radius:50%; background:var(--acc);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:600; color:#fff; letter-spacing:0;
  font-family:'DM Mono',monospace; flex-shrink:0; transition:opacity 0.15s;
}
#user-avatar:hover { opacity:0.8; }

/* ── PRESENCE AVATARS ── */
#presence-bar {
  display:flex; align-items:center; gap:0; margin-right:8px;
}
.presence-avatar {
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:600; color:#fff; letter-spacing:0;
  font-family:'DM Mono',monospace; flex-shrink:0;
  border:2px solid var(--sur);
  margin-left:-6px; position:relative; cursor:default;
  transition: transform 0.15s;
}
.presence-avatar:first-child { margin-left:0; }
.presence-avatar:hover { transform:scale(1.15); z-index:2; }
.presence-avatar .presence-tip {
  position:absolute; bottom:-24px; left:50%; transform:translateX(-50%);
  background:var(--sur2); border:1px solid var(--bdr); color:var(--txt);
  font-size:9px; letter-spacing:0.08em; padding:3px 8px;
  white-space:nowrap; pointer-events:none; opacity:0; transition:opacity 0.15s;
  z-index:10;
}
.presence-avatar:hover .presence-tip { opacity:1; }
.presence-count {
  font-size:9px; color:var(--muted); letter-spacing:0.08em; margin-left:6px;
}

/* ── USER SLIDE PANEL ── */
#user-panel-backdrop {
  position:fixed; inset:0; z-index:9998; display:none;
}
#user-panel-backdrop.open { display:block; }
#user-panel {
  position:fixed; top:0; right:0; height:100vh; width:280px;
  background:var(--sur); border-left:1px solid var(--bdr);
  z-index:9999; transform:translateX(100%);
  transition:transform 0.25s cubic-bezier(0.4,0,0.2,1);
  display:flex; flex-direction:column;
  isolation:isolate;
  opacity:0;
  pointer-events:none;
}
#user-panel.open {
  transform:translateX(0);
  opacity:1;
  pointer-events:auto;
}
#user-panel-head {
  padding:20px; border-bottom:1px solid var(--bdr);
  display:flex; align-items:center; gap:12px; flex-shrink:0;
}
.up-avatar {
  width:40px; height:40px; border-radius:50%; background:var(--acc);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:600; color:#fff; font-family:'DM Mono',monospace;
  flex-shrink:0;
}
.up-info { flex:1; min-width:0; }
.up-name { font-size:12px; color:var(--txt); letter-spacing:0.05em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.up-email { font-size:9px; color:var(--muted); letter-spacing:0.05em; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#up-close { background:none; border:none; color:var(--muted); font-size:16px; cursor:pointer; padding:0; flex-shrink:0; }
#up-close:hover { color:var(--txt); }
#user-panel-sessions {
  flex:1; overflow-y:auto; padding:8px 0;
}
.up-section-title {
  padding:12px 20px 6px; font-size:9px; color:var(--muted);
  letter-spacing:0.15em; text-transform:uppercase;
}
.up-session-item {
  display:flex; align-items:center; gap:10px; padding:10px 20px;
  cursor:pointer; transition:background 0.12s; border-bottom:1px solid rgba(255,255,255,0.04);
}
.up-session-item:hover { background:var(--sur2); }
.up-session-dot { width:6px; height:6px; border-radius:50%; background:var(--acc); flex-shrink:0; }
.up-session-info { flex:1; min-width:0; }
.up-session-name { font-size:10px; color:var(--txt); letter-spacing:0.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.up-session-date { font-size:9px; color:var(--muted); margin-top:1px; }
.up-session-arrow { font-size:9px; color:var(--muted); flex-shrink:0; }
.up-session-item:hover .up-session-arrow { color:var(--acc); }

.up-session-actions {
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}
.up-session-action-btn,
.up-delete-btn {
  min-height:26px;
  padding:0 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
  color:var(--muted);
  cursor:pointer;
  font-size:9px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  opacity:0;
  transition:all 0.15s;
  flex-shrink:0;
  line-height:1;
}
.up-session-action-btn:hover { color:var(--txt); border-color:var(--acc); }
.up-session-item:hover .up-session-action-btn { opacity:1; }
.up-session-item:hover .up-delete-btn { opacity:1; }
.up-delete-btn:hover { color:#ff4d1c; border-color:rgba(255,77,28,0.28); }

.up-empty { padding:24px 20px; font-size:10px; color:var(--muted); letter-spacing:0.08em; }
#user-panel-foot {
  padding:16px 20px; border-top:1px solid var(--bdr); display:flex; flex-direction:column; gap:8px; flex-shrink:0;
}
.up-btn {
  background:none; border:1px solid var(--bdr); color:var(--muted);
  font-family:'DM Mono',monospace; font-size:9px; letter-spacing:0.12em;
  padding:9px; cursor:pointer; transition:all 0.15s; text-align:left;
  text-transform:uppercase;
}
.up-btn:hover { border-color:var(--acc); color:var(--txt); }
.up-btn-primary { background:var(--acc); border-color:var(--acc); color:#fff; }
.up-btn-primary:hover { opacity:0.85; color:#fff; }

/* ── ACCOUNT PAGE ── */
#account-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:10000;
  display:none; align-items:center; justify-content:center;
}
#account-overlay.visible { display:flex; }
#account-box {
  background:var(--sur); border:1px solid var(--bdr);
  width:440px; max-height:80vh; display:flex; flex-direction:column;
  overflow:hidden;
}
#account-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px; border-bottom:1px solid var(--bdr); flex-shrink:0;
}
#account-header .acc-title {
  font-family:'Syne',sans-serif; font-size:14px; font-weight:700; letter-spacing:0.05em;
}
#acc-close {
  background:none; border:none; color:var(--muted); font-size:18px;
  cursor:pointer; padding:0; line-height:1;
}
#acc-close:hover { color:var(--txt); }

/* Tabs */
.acc-tabs {
  display:flex; border-bottom:1px solid var(--bdr); flex-shrink:0;
}
.acc-tab {
  flex:1; padding:10px; text-align:center;
  font-family:'DM Mono',monospace; font-size:10px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--muted); cursor:pointer;
  background:none; border:none; border-bottom:2px solid transparent;
  transition:all 0.15s;
}
.acc-tab:hover { color:var(--txt); }
.acc-tab.active { color:var(--acc); border-bottom-color:var(--acc); }

/* Tab content */
.acc-content { flex:1; overflow-y:auto; padding:24px; }
.acc-pane { display:none; }
.acc-pane.active { display:block; }

.acc-field { margin-bottom:18px; }
.acc-label {
  display:block; font-size:9px; color:var(--muted); letter-spacing:0.12em;
  text-transform:uppercase; margin-bottom:6px;
}
.acc-input {
  width:100%; background:var(--bg); border:1px solid var(--bdr);
  color:var(--txt); font-family:'DM Mono',monospace; font-size:12px;
  padding:9px 12px; outline:none; transition:border-color 0.15s;
}
.acc-input:focus { border-color:var(--gold); }
.acc-input:disabled { opacity:0.4; cursor:not-allowed; }

.acc-save {
  background:var(--acc); border:none; color:#fff;
  font-family:'DM Mono',monospace; font-size:10px; letter-spacing:0.1em;
  padding:9px 18px; cursor:pointer; text-transform:uppercase;
  transition:opacity 0.15s; margin-top:4px;
}
.acc-save:hover { opacity:0.85; }
.acc-save:disabled { opacity:0.4; cursor:not-allowed; }

.btn-sm {
  padding:5px 10px; font-size:11px; border:1px solid var(--bdr); border-radius:4px;
  background:var(--sur2); color:var(--txt); cursor:pointer; transition:all 0.15s;
  font-family:'DM Mono',monospace; text-align:center;
}
.btn-sm:hover { background:var(--sur); border-color:var(--acc); }
.btn-sm:disabled { opacity:0.4; cursor:not-allowed; }

.acc-msg {
  font-size:10px; letter-spacing:0.05em; margin-top:8px; min-height:16px;
}
.acc-msg.ok { color:var(--green); }
.acc-msg.err { color:var(--acc); }

.acc-sep {
  height:1px; background:var(--bdr); margin:20px 0;
}

.acc-info-row {
  display:flex; align-items:center; gap:10px; margin-bottom:12px;
}
.acc-info-avatar {
  width:42px; height:42px; border-radius:50%; background:var(--acc);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:600; color:#fff; font-family:'DM Mono',monospace;
  flex-shrink:0;
}
.acc-info-detail { flex:1; }
.acc-info-name { font-size:12px; color:var(--txt); letter-spacing:0.05em; }
.acc-info-email { font-size:9px; color:var(--muted); letter-spacing:0.04em; margin-top:2px; }
.acc-info-badge {
  font-size:8px; letter-spacing:0.1em; padding:3px 8px;
  border:1px solid var(--muted); color:var(--muted); text-transform:uppercase;
}

.acc-sub-placeholder {
  text-align:center; padding:40px 20px;
}
.acc-sub-icon { font-size:28px; margin-bottom:12px; }
.acc-sub-text { font-size:11px; color:var(--muted); line-height:1.8; letter-spacing:0.04em; }
.acc-sub-badge {
  display:inline-block; font-size:9px; letter-spacing:0.1em; padding:4px 12px;
  border:1px solid var(--green); color:var(--green); margin-top:16px;
  text-transform:uppercase;
}

/* ── MY FEEDBACKS MODAL ── */
#mf-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:2000;
  display:flex; align-items:center; justify-content:center;
}
#mf-overlay.hidden { display:none; }
#mf-box {
  background:var(--sur); border:1px solid var(--bdr); padding:0;
  width:480px; max-height:70vh; display:flex; flex-direction:column;
}
#mf-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px; border-bottom:1px solid var(--bdr); flex-shrink:0;
}
#mf-header .mf-title { font-family:'Syne',sans-serif; font-size:14px; font-weight:700; letter-spacing:0.05em; }
#mf-close { background:none; border:none; color:var(--muted); font-size:18px; cursor:pointer; padding:0; line-height:1; }
#mf-close:hover { color:var(--txt); }
#mf-list { overflow-y:auto; flex:1; padding:8px 0; }
.mf-item {
  display:flex; align-items:center; gap:12px; padding:12px 24px;
  cursor:pointer; transition:background 0.12s; border-bottom:1px solid var(--bdr);
}
.mf-item:hover { background:var(--sur2); }
.mf-item:last-child { border-bottom:none; }
.mf-item-icon { font-size:16px; flex-shrink:0; }
.mf-item-info { flex:1; min-width:0; }
.mf-item-name { font-size:11px; color:var(--txt); letter-spacing:0.05em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mf-item-meta { font-size:9px; color:var(--muted); letter-spacing:0.08em; margin-top:2px; }
.mf-item-open { font-size:9px; color:var(--acc); letter-spacing:0.1em; flex-shrink:0; }
.mf-empty { padding:40px 24px; text-align:center; color:var(--muted); font-size:10px; letter-spacing:0.1em; }
#mf-new { margin:12px 24px 16px; }


/* ── VIEWPORT CONTROLS DROPDOWN ── */
#viewport-controls {
  display:flex; align-items:center; gap:6px;
  pointer-events:all;
  flex-shrink:0;
  min-height:30px;
  padding:0 10px;
  border:1px solid var(--bdr);
  border-radius:999px;
  background:rgba(255,255,255,0.03);
}
#viewport-controls .ctrl-stack-label {
  font-size:8px;
  color:var(--muted);
  letter-spacing:0.16em;
  text-transform:uppercase;
}
#ctrl-mode-select {
  background:transparent; border:none;
  color:var(--muted); font-family:'DM Mono',monospace; font-size:9px;
  letter-spacing:0.12em; padding:0; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  outline:none; text-transform:uppercase;
  backdrop-filter:none;
  min-width:92px;
}
#ctrl-mode-select:hover { border-color:var(--acc); color:var(--txt); }
#ctrl-hint { display:none; }
/* Background image controls */
#bg-btn {
  background:var(--panel); border:1px solid var(--bdr);
  color:var(--muted); font-family:'Syne',sans-serif; font-size:9px;
  letter-spacing:0.12em; padding:4px 10px; cursor:pointer;
  backdrop-filter:blur(4px); white-space:nowrap;
  transition:border-color 0.15s, color 0.15s;
}
#bg-btn:hover { border-color:var(--acc); color:var(--txt); }
#bg-btn.active { border-color:var(--acc); color:var(--acc); }
#bg-controls {
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
#bg-opacity-wrap {
  display:none; align-items:center; gap:8px;
  background:rgba(255,255,255,0.03); border:1px solid var(--bdr);
  min-height:30px; padding:0 10px; border-radius:999px; backdrop-filter:blur(4px);
  flex:0 0 auto;
}
#bg-opacity-wrap.visible { display:flex; }
#bg-opacity-wrap label { font-size:8px; color:var(--muted); letter-spacing:0.1em; }
#bg-opacity { width:80px; accent-color:var(--acc); }
#bg-clear-btn {
  font-size:8px; color:var(--muted); cursor:pointer; letter-spacing:0.08em;
  background:none; border:none; padding:0 2px; min-width:auto;
}
#bg-clear-btn:hover { color:var(--red); }
#bg-file-input { display:none; }

:root {
  --visual-viewport-height: 100vh;
  --visual-viewport-offset-top: 0px;
  --visual-viewport-offset-bottom: 0px;
}

/* ═══════════════════════════════════════════
   MOBILE / TABLET RESPONSIVE
═══════════════════════════════════════════ */

/* ── Tablet (≤ 900px) ── */
@media (max-width: 900px) {
  #topbar {
    min-height:calc(58px + env(safe-area-inset-top, 0px));
    height:auto;
    padding:max(8px, env(safe-area-inset-top, 0px)) 10px 8px;
    gap:8px;
  }
  .tb-left { flex:1 1 auto; gap:8px; }
  .tb-right { gap:8px; }
  .tb-context { padding-left:10px; gap:2px; }
  #session-name { width:120px; font-size:10px; }
  #surface-mode-switch {
    padding:3px;
    gap:3px;
    margin-left:6px;
  }
  .surface-mode-btn { min-width:58px; min-height:28px; padding:0 10px; }
  .mesh-name { display:none; }
  #new-session-btn { font-size:9px; padding:5px 8px; }
  #load-btn { font-size:10px; padding:5px 10px; }
  #pipeline-wrap {
    gap:6px;
    padding:0 8px;
  }

  #panel {
    width:260px;
    bottom:var(--mobile-bottom-stack, 0px);
    max-height:calc(var(--visual-viewport-height, 100vh) - 138px);
  }
  #panel.collapsed { transform:translateX(260px); }
  #panel-toggle { right:268px; }
  #panel-toggle.collapsed { right:8px; }

  #bottombar {
    right:260px;
    bottom:var(--mobile-bottom-stack, 0px);
    gap:8px;
    padding:0 8px;
    overflow-x:auto;
  }
  body.panel-collapsed #bottombar { right:0; }

  #snap-bottombar {
    bottom:var(--mobile-bottom-stack, 0px);
  }

  #toolbar {
    bottom:calc(var(--mobile-bottom-stack, 0px) + 12px);
  }

  body.keyboard-open #panel,
  body.keyboard-open #utility-panel,
  body.keyboard-open #mesh-panel,
  body.keyboard-open #draw-bottombar,
  body.keyboard-open #live-bottombar,
  body.keyboard-open #note-modal {
    max-height:calc(var(--visual-viewport-height, 100vh) - 92px) !important;
  }
}

/* ── Mobile (≤ 600px) ── */
@media (max-width: 600px) {
  /* Topbar: compact single row */
  #topbar {
    min-height:calc(52px + env(safe-area-inset-top, 0px));
    height:auto;
    padding:max(8px, env(safe-area-inset-top, 0px)) 8px 8px;
    gap:6px;
  }
  .logo { font-size:18px; }
  .tb-context {
    display:none;
  }
  .tb-shell-label {
    display:none;
  }
  #surface-mode-switch {
    margin-left:0;
  }
  #surface-mode-switch .surface-mode-btn {
    min-width:50px;
    padding:0 8px;
  }
  .session-wrap { display:none; }
  #version-switcher { display:none !important; }
  #new-session-btn { display:none; }
  #load-btn { font-size:9px; padding:4px 8px; }

  /* Panel: bottom sheet instead of side panel */
  #panel {
    position:fixed;
    right:0; left:0;
    bottom:var(--mobile-bottom-stack, 0px);
    top:auto;
    width:100%;
    height:min(52vh, calc(var(--visual-viewport-height, 100vh) - 136px));
    max-height:min(52vh, calc(var(--visual-viewport-height, 100vh) - 136px));
    border-left:none;
    border-top:1px solid var(--bdr);
    border-radius:16px 16px 0 0;
    transform:translateY(0);
    transition:transform 0.3s ease, height 0.2s ease;
    z-index:120;
  }
  #panel.collapsed {
    transform:translateY(100%);
  }
  /* Drag handle at top of bottom sheet */
  #panel::before {
    content:'';
    display:block;
    width:40px; height:4px;
    background:var(--muted);
    border-radius:2px;
    margin:8px auto 4px;
    opacity:0.5;
  }
  #panel-header { padding:8px 16px; }
  #ann-list { padding:8px; }
  .ann-item { padding:10px; }
  #feedback-action-bar { padding:8px 8px 0; gap:4px; }

  /* Panel toggle: move to bottom-center */
  #panel-toggle {
    position:fixed;
    bottom:calc(var(--mobile-bottom-stack, 0px) + 8px); left:50%; right:auto; top:auto;
    transform:translateX(-50%);
    width:48px; height:24px;
    border:1px solid var(--bdr);
    border-right:1px solid var(--bdr);
    border-radius:12px;
    z-index:121;
    transition:bottom 0.3s ease;
  }
  #panel-toggle.collapsed {
    bottom:calc(var(--mobile-bottom-stack, 0px) + 8px); right:auto;
  }
  /* Arrow direction */
  #panel-toggle::after { content:'▲'; font-size:8px; }
  #panel.collapsed ~ #panel-toggle::after,
  body.panel-collapsed #panel-toggle::after { content:'▼'; }

  /* Bottom bar: full width, scrollable, above panel */
  #bottombar {
    right:0;
    height:36px;
    gap:6px;
    padding:0 8px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
    bottom:var(--mobile-bottom-stack, 0px);
    z-index:110;
    left:10px;
    right:10px;
    width:auto;
    border-radius:16px;
    border:1px solid var(--bdr);
    background:var(--panel);
    backdrop-filter:blur(12px);
  }
  /* When panel is open, bottombar hides */
  body:not(.panel-collapsed) #bottombar { display:none; }
  .bb-btn { font-size:9px; padding:2px 6px; white-space:nowrap; }
  .bb-item { font-size:9px; white-space:nowrap; }

  /* Left toolbar: horizontal at bottom-left */
  #toolbar {
    left:8px; top:auto; bottom:calc(var(--mobile-bottom-stack, 0px) + 12px);
    transform:none;
    flex-direction:row;
    gap:4px;
  }
  .tool-btn {
    width:44px; height:44px; /* minimum 44px touch target */
  }
  .tool-btn .tip { display:none; }
  #tool-draw-mobile {
    width:auto;
    min-width:0;
    padding:0 12px;
    gap:8px;
  }
  #tool-draw-mobile .tip {
    display:inline;
    position:static;
    opacity:1;
    transform:none;
    background:none;
    border:none;
    color:var(--txt);
    font-size:8px;
    letter-spacing:0.12em;
    white-space:nowrap;
  }

  /* Viewport controls */
  #viewport-controls {
    bottom:auto; top:56px; left:8px; right:auto;
  }

  /* Note modal: full-width at bottom */
  #note-modal {
    left:0 !important; right:0 !important;
    bottom:calc(var(--visual-viewport-offset-bottom, 0px) + var(--mobile-bottom-stack, 0px)) !important;
    top:auto !important;
    width:100% !important; min-width:100%;
    max-width:100%;
    max-height:calc(var(--visual-viewport-height, 100vh) - 82px);
    border-radius:12px 12px 0 0;
  }

  /* Guest name modal */
  #guest-name-modal > div { width:90%; max-width:300px; }

  /* Lightbox */
  #lightbox img { max-width:95vw; max-height:85vh; }

  /* Snap bottom bar: stack vertically */
  #snap-bottombar {
    flex-wrap:wrap;
    height:auto;
    padding:6px 8px;
    gap:6px;
    bottom:var(--mobile-bottom-stack, 0px);
  }
  #snap-bottombar .snap-t { width:40px; height:40px; }
  #snap-bottombar .sslider { width:60px; }
  #snap-note { width:100px !important; }

  /* Markers: larger touch targets */
  .ann-dot {
    width:24px; height:24px;
    /* Larger invisible touch area via pseudo-element */
  }
  .ann-dot::before {
    content:'';
    position:absolute;
    inset:-10px;
    border-radius:50%;
  }
  .ann-label { display:none; }

  /* Auth overlay */
  #auth-box { width:92%; max-width:380px; }

  /* User panel */
  #user-panel {
    width:100%;
    top:max(8px, env(safe-area-inset-top, 0px));
    bottom:calc(var(--mobile-bottom-stack, 0px) + 8px);
    height:auto;
  }

  /* Export bar */
  #export-bar { padding:8px; gap:4px; }
  .btn { padding:10px 6px; font-size:9px; }

  /* Mesh file modal */
  .mf-modal { width:95% !important; max-width:95% !important; }
}

/* ── Small phones (≤ 380px) ── */
@media (max-width: 380px) {
  .logo { font-size:16px; }
  #load-btn { font-size:8px; padding:3px 6px; }
  #panel {
    height:min(45vh, calc(var(--visual-viewport-height, 100vh) - 130px));
  }
  .ann-item .ann-text { font-size:10px; }
}

@media (max-width: 900px) and (orientation: landscape) {
  #panel {
    height:min(35vh, calc(var(--visual-viewport-height, 100vh) - 110px));
    max-height:min(35vh, calc(var(--visual-viewport-height, 100vh) - 110px));
  }
  #toolbar {
    bottom:calc(var(--mobile-bottom-stack, 0px) + 8px);
  }
}

/* ── Touch device adjustments ── */
@media (hover: none) and (pointer: coarse) {
  /* Always show actions column on touch (no hover) */
  .ann-item .ann-actions { opacity:0.6; }
  .ann-item .ann-unassign { opacity:0.6; }

  /* Larger interactive elements */
  .ann-cb { width:22px; height:22px; }
  .layer-vis { font-size:16px; padding:2px 6px; }
  .layer-del { font-size:14px; padding:2px 6px; }
  .layer-priority { padding:4px 8px; font-size:10px; }

  /* Prevent double-tap zoom on interactive elements */
  button, .tool-btn, .bb-btn, .ann-cb, .marker, .ann-dot {
    touch-action:manipulation;
  }
}

/* ── UI REFACTOR OVERRIDES ── */
:root, [data-theme="dark"] {
  --bg:      #232326;
  --sur:     #17181b;
  --sur2:    #202228;
  --bdr:     #353843;
  --txt:     #f3ede7;
  --muted:   #918d97;
  --panel:   rgba(23,24,27,0.88);
  --shadow:  rgba(0,0,0,0.55);
}
[data-theme="light"] {
  --bg:      #efede8;
  --sur:     #ffffff;
  --sur2:    #f4f1eb;
  --bdr:     #d3cec6;
  --txt:     #121316;
  --muted:   #6c675f;
  --panel:   rgba(255,255,255,0.92);
  --shadow:  rgba(0,0,0,0.12);
}

#topbar {
  height:64px;
  padding:0 18px;
  gap:18px;
  background:rgba(50,50,53,0.94);
  backdrop-filter:blur(18px);
  box-shadow:none;
}
[data-theme="light"] #topbar {
  background:rgba(244,241,235,0.96);
}
.tb-group { display:flex; align-items:center; gap:12px; min-width:0; }
.tb-left { flex:1 1 38%; min-width:0; }
.tb-center { flex:0 0 auto; justify-content:center; }
.tb-right { flex:1 1 42%; justify-content:flex-end; min-width:0; }
.tb-context {
  display:flex; flex-direction:column; gap:4px; min-width:0;
  padding-left:14px; border-left:1px solid var(--bdr);
}
.tb-kicker {
  font-size:8px; color:var(--muted); letter-spacing:0.18em;
  text-transform:uppercase;
}
.tb-meta-row { display:flex; align-items:center; gap:10px; min-width:0; }
.session-wrap { display:flex; align-items:center; gap:8px; }
#session-name {
  width:170px;
  height:30px;
  padding:0 10px;
  border-radius:999px;
  background:var(--sur);
}
#surface-mode-switch {
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  gap:4px;
  padding:4px;
  border:1px solid var(--bdr);
  border-radius:999px;
  background:rgba(255,255,255,0.03);
}
.mesh-name {
  display:none !important;
  max-width:280px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:11px;
  color:var(--txt);
}
#tb-meta-badges,
#tb-dynamic-actions {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  flex-wrap:wrap;
}
.surface-mode-badge {
  display:inline-flex;
  align-items:center;
  height:28px;
  padding:0 11px;
  border-radius:999px;
  border:1px solid var(--bdr);
  font-size:9px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  font-family:'DM Mono',monospace;
}
.surface-mode-badge.studio {
  color:var(--green);
  border-color:rgba(0,229,160,0.35);
  background:rgba(0,229,160,0.08);
}
.surface-mode-badge.client {
  color:#ff8b61;
  border-color:rgba(255,77,28,0.35);
  background:rgba(255,77,28,0.09);
}
.surface-mode-badge.reviewer {
  color:#7fb0ff;
  border-color:rgba(77,159,255,0.35);
  background:rgba(77,159,255,0.10);
}
.surface-share-btn {
  height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(77,159,255,0.35);
  background:rgba(77,159,255,0.10);
  color:var(--txt);
}
.surface-share-btn:hover {
  border-color:var(--blue);
  background:rgba(77,159,255,0.18);
}
#pipeline-wrap {
  display:flex;
  align-items:center;
  gap:8px;
  height:34px;
  padding:0 10px;
  border:1px solid var(--bdr);
  background:var(--sur);
  border-radius:999px;
}
.tb-shell-label {
  font-size:8px;
  letter-spacing:0.16em;
  color:var(--muted);
  text-transform:uppercase;
}
#pipeline-select {
  background:transparent;
  border:none;
  color:var(--txt);
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:0.08em;
  outline:none;
}
#pipeline-select option { background:var(--sur); color:var(--txt); }
#load-btn {
  height:34px;
  padding:0 12px;
  border-radius:999px;
  font-size:10px;
  font-weight:500;
  box-shadow:0 6px 18px rgba(255,77,28,0.2);
}
#load-btn.secondary {
  background:transparent;
  color:var(--txt);
  border:1px solid var(--bdr);
  box-shadow:none;
}
#load-btn.secondary:hover {
  border-color:var(--acc);
  color:var(--acc);
  opacity:1;
  transform:none;
}
#new-session-btn {
  height:34px;
  border-radius:999px;
  padding:0 12px;
  background:var(--acc);
  color:#fff;
  border:1px solid var(--acc);
  box-shadow:0 6px 18px rgba(255,77,28,0.18);
}
#new-session-btn:hover { color:#fff; }
#topbar .ghost-btn,
#topbar #load-btn,
#topbar #new-session-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1;
  white-space:nowrap;
  min-height:34px;
}
/* ── Share to Community topbar button ── */
#tb-share-community {
  gap:6px;
  font-family:'DM Mono', monospace;
  font-size:9px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  font-weight:500;
  padding:5px 14px 5px 10px;
  border-radius:999px;
  border:1px solid var(--acc);
  color:var(--acc);
  background:rgba(255,77,28,0.08);
  transition:background 0.14s ease, color 0.14s ease;
}
#tb-share-community:hover {
  background:rgba(255,77,28,0.18);
  color:#fff;
}
#tb-share-community.active {
  background:var(--acc);
  color:#fff;
  border-color:var(--acc);
}
#tb-share-community svg { flex-shrink:0; }
.tb-share-label { pointer-events:none; }
@media (max-width:1100px) {
  .tb-share-label { display:none; }
}

#presence-bar { margin-right:0; padding-right:4px; }
#user-chip { padding-left:10px; border-left:1px solid var(--bdr); }
#user-avatar {
  width:32px;
  height:32px;
  box-shadow:0 4px 10px rgba(255,77,28,0.2);
}
#version-switcher {
  padding:4px;
  border:1px solid var(--bdr);
  border-radius:999px;
  background:var(--sur);
  gap:4px;
}
.ver-toggle {
  border:none;
  border-radius:999px;
  padding:6px 12px;
  background:transparent;
}
.ver-toggle:first-child { border-right:none; }

#sync-status,
#fmt-badge,
#viewer-badge,
#deadline-badge {
  border-radius:999px !important;
  padding:4px 9px !important;
  font-size:9px !important;
  letter-spacing:0.12em !important;
  text-transform:uppercase;
  white-space:nowrap;
}
#dashboard-btn,
#submit-review-btn,
#activate-pro-btn {
  border-radius:999px !important;
  font-family:'DM Mono',monospace !important;
  letter-spacing:0.08em !important;
  text-transform:uppercase;
  box-shadow:none !important;
}

#viewport-controls {
  gap:8px;
  padding:0 10px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--bdr);
  border-radius:999px;
  backdrop-filter:none;
  box-shadow:none;
}
#ctrl-mode-select {
  min-width:110px;
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  color:var(--txt);
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:0.08em;
}
#ctrl-hint { display:none; }

#toolbar { left:18px; gap:8px; }
.tool-btn {
  width:44px;
  height:44px;
  border-radius:12px;
  background:var(--panel);
  backdrop-filter:blur(10px);
  color:var(--txt);
}
.tool-btn .tip { border-radius:999px; }

#drop-zone {
  inset:64px 312px 38px 72px;
  margin:18px;
  border-radius:20px;
  background:rgba(0,0,0,0.02);
}
body.panel-collapsed #drop-zone { right:20px; }

#panel {
  top:64px;
  width:312px;
  background:var(--panel);
  backdrop-filter:blur(18px);
  box-shadow:-18px 0 40px var(--shadow);
}
#panel.collapsed { transform:translateX(312px); }
#panel-header {
  padding:18px 18px 14px;
  gap:12px;
  background:rgba(255,255,255,0.02);
}
#panel-header .ptitle { font-size:14px; }
.count-badge { border-radius:999px; padding:3px 8px; min-width:24px; }
#ann-list { padding:14px; gap:12px; }
.ann-item {
  background:var(--sur);
  border-radius:16px;
  border-left-width:2px;
  padding:10px 11px;
}
.ann-item:hover { background:rgba(255,77,28,0.08); transform:translateX(-1px); }
.ann-item.sel { background:rgba(255,77,28,0.12); }
.ann-head { margin-bottom:5px; }
.ann-author { font-size:9px; text-transform:uppercase; letter-spacing:0.12em; }
.ann-time { font-size:8px; }
.ann-text { color:var(--txt); font-size:10px; line-height:1.5; }
.ann-meta { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 6px 23px; }
.ann-meta-chip {
  font-size:8px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:2px 6px;
  border:1px solid var(--bdr);
  border-radius:999px;
  color:var(--muted);
  background:var(--sur2);
}
.ann-priority.p-asap {
  background:rgba(255,199,0,0.16);
  color:#b58a00;
  border-color:rgba(255,199,0,0.32);
}
.ann-priority.p-urgent {
  background:rgba(255,140,0,0.14);
  color:#ff8c00;
  border-color:rgba(255,140,0,0.3);
}
.ann-priority.p-vurgent,
.ann-priority.p-veryurgent {
  background:rgba(255,77,28,0.12);
  color:var(--acc);
  border-color:rgba(255,77,28,0.32);
}
.ann-status-done {
  color:var(--green);
  border-color:rgba(0,229,160,0.28);
  background:rgba(0,229,160,0.09);
}
.empty-state { padding:56px 18px; line-height:1.9; }

#export-bar { padding:14px 16px 12px; gap:8px; background:rgba(255,255,255,0.02); }
.btn { border-radius:999px; background:var(--sur); }
.btn.primary { box-shadow:0 6px 18px rgba(255,77,28,0.16); }

#panel-toggle {
  right:320px;
  background:var(--panel);
  backdrop-filter:blur(14px);
  border-radius:12px 0 0 12px;
  height:52px;
}
#panel-toggle.collapsed { right:10px; }

#bottombar {
  right:312px;
  height:38px;
  background:var(--panel);
  backdrop-filter:blur(16px);
  padding:0 14px;
  gap:10px;
  box-shadow:0 -10px 24px rgba(0,0,0,0.12);
}
.bb-btn { border-radius:999px; padding:4px 10px; }
#btn-qa {
  color:var(--acc);
  border-color:rgba(255,77,28,0.32);
  background:rgba(255,77,28,0.08);
}
#btn-qa:hover { color:#fff; background:var(--acc); }
#btn-visual-fb {
  color:var(--blue);
  border-color:rgba(77,159,255,0.32);
  background:rgba(77,159,255,0.08);
}
#btn-visual-fb:hover { color:#fff; background:var(--blue); }
body.ui-client #pipeline-wrap,
body.ui-client #viewport-controls,
body.ui-client #btn-grid,
body.ui-client #btn-invert-y,
body.ui-client #btn-persp,
body.ui-client #bg-controls,
body.ui-client #bg-sep-before,
body.ui-client #bg-sep-after,
body.ui-client #theme-toggle,
body.ui-client #btn-qa,
body.ui-client #btn-visual-fb,
body.ui-client #pw-lock-icon,
body.ui-client #export-bar .btn:not(#btn-share),
body.ui-client #panel-header .ghost-btn,
body.ui-client .layer-del {
  display:none !important;
}
body.ui-client #topbar {
  backdrop-filter:blur(22px);
}
body.ui-client .tb-kicker {
  color:#ff9d7a;
}
body.ui-client #session-name {
  width:200px;
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.08);
}
body.ui-client #toolbar {
  gap:10px;
}
body.ui-client #toolbar .tool-btn {
  border-color:rgba(255,255,255,0.10);
}
body.ui-client #panel-header {
  border-bottom-color:rgba(255,77,28,0.16);
}
body.ui-client #export-bar {
  justify-content:flex-start;
  gap:10px;
}
body.ui-client #btn-share {
  min-width:130px;
  color:#fff;
  border-color:rgba(77,159,255,0.35);
  background:rgba(77,159,255,0.12);
}
body.ui-client #btn-share:hover {
  background:rgba(77,159,255,0.22);
}
body.ui-client #bottombar {
  gap:10px;
}
body.ui-client #bottombar .bb-sep,
body.ui-client #bottombar .bb-spacer,
body.ui-client #bottombar .bb-item {
  display:none;
}
body.ui-client #btn-frame {
  color:#fff;
  border-color:rgba(255,77,28,0.32);
  background:rgba(255,77,28,0.12);
}
body.ui-client #btn-frame:hover {
  background:rgba(255,77,28,0.22);
}
body.ui-client .layer-name-inp,
body.ui-client .layer-priority {
  pointer-events:none;
}
body.ui-readonly #bg-controls,
body.ui-readonly #bg-sep-before,
body.ui-readonly #bg-sep-after {
  display:none !important;
}
body.ui-studio #panel-header {
  border-bottom-color:rgba(0,229,160,0.12);
}
body.ui-studio #pipeline-wrap {
  box-shadow:0 10px 22px rgba(0,0,0,0.16);
}
body.ui-studio #btn-qa,
body.ui-studio #btn-visual-fb {
  box-shadow:0 10px 18px rgba(0,0,0,0.18);
}

.ann-dot {
  width:14px;
  height:14px;
  border-color:var(--sur);
  box-shadow:0 0 0 4px rgba(255,77,28,0.18);
}
.dot-num {
  top:-13px;
  border-radius:999px;
  padding:2px 5px;
  box-shadow:0 4px 12px var(--shadow);
}
.ann-label {
  opacity:0;
  transform:translateY(2px);
  transition:opacity 0.18s, transform 0.18s;
  border-radius:10px;
  pointer-events:none;
}
.ann-marker.panel-hover .ann-label { opacity:1; transform:translateY(0); }
.ann-marker:hover .ann-label { opacity:1; transform:translateY(0); }

#qa-overlay {
  justify-content:flex-end;
  background:rgba(0,0,0,0.42);
  backdrop-filter:blur(4px);
}
#qa-panel {
  width:min(720px, calc(100vw - 36px));
  height:100vh;
  max-height:100vh;
  border-left:1px solid var(--bdr);
  box-shadow:-20px 0 40px var(--shadow);
}
#qa-header { padding:16px 20px; }
.qa-tabs { padding:0 20px; }
.qa-tab-body { padding:18px 20px 24px; }

body.ui-client .tb-context { padding-left:10px; }
body.ui-client .tb-kicker { display:none; }
body.ui-client .mesh-name { max-width:220px; }

/* Force-hide mobile menu toggle on desktop — it leaks above 900px sometimes */
@media (min-width: 901px) {
  #mobile-menu-toggle,
  #mobile-menu-backdrop,
  #mobile-session-menu { display:none !important; }
}

@media (max-width: 1100px) {
  #topbar { padding:0 12px; gap:10px; }
  .tb-kicker { display:none; }
  #session-name { width:150px; }
  .mesh-name { max-width:180px; }
}

@media (max-width: 900px) {
  #topbar { height:56px; }
  .tb-center { display:none; }
  .tb-context { padding-left:10px; }
  .mesh-name { display:block; max-width:180px; }
  #panel { top:56px; width:280px; }
  #panel.collapsed { transform:translateX(280px); }
  #panel-toggle { right:288px; }
  #bottombar { right:280px; }
  #drop-zone { inset:56px 280px 38px 60px; }
  #viewport-controls { top:68px; left:12px; }
}

@media (max-width: 600px) {
  #topbar { height:52px; }
  .session-wrap { display:flex; }
  .tb-context { border-left:none; padding-left:0; }
  .tb-kicker,
  #tb-meta-badges,
  #presence-bar,
  #pipeline-wrap { display:none !important; }
  #session-name { width:110px; }
  #surface-mode-switch { padding:2px; gap:2px; }
  .surface-mode-btn {
    min-width:48px;
    min-height:24px;
    padding:0 8px;
    font-size:8px;
    letter-spacing:0.08em;
  }
  .mesh-name { display:block; max-width:120px; font-size:10px; color:var(--muted); }
  #drop-zone { inset:52px 10px 92px 10px; margin:12px; }
  #bottombar { right:0; }
  #qa-overlay { align-items:flex-end; }
  #qa-panel {
    width:100vw;
    height:74vh;
    max-height:74vh;
    border-left:none;
    border-top:1px solid var(--bdr);
  }
}

/* ── UI PRIMITIVES ── */
.ui-panel-shell {
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
    var(--panel);
  border:1px solid var(--bdr);
  border-radius:24px;
  box-shadow:none;
  backdrop-filter:blur(18px);
}

.ui-overlay-panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
    var(--panel);
  box-shadow:none;
}

.ui-panel-shell-notes {
  border:0;
  border-left:1px solid var(--bdr);
  border-radius:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
    var(--panel);
  box-shadow:none;
}

.ui-panel-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:18px 18px 16px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.02);
}

.ui-panel-header-compact {
  align-items:center;
}

.ui-panel-head-copy {
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.ui-panel-kicker {
  font-size:8px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--muted);
}

.ui-panel-title {
  font-family:'Syne',sans-serif;
  font-size:18px;
  color:var(--txt);
  line-height:1.02;
}

.ui-panel-title-compact {
  font-size:14px;
  line-height:1.1;
}

.ui-close-btn {
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid var(--bdr);
  background:var(--sur);
  color:var(--muted);
  cursor:pointer;
  transition:all 0.18s ease;
  line-height:1;
  flex:0 0 auto;
}

.ui-close-btn:hover {
  color:var(--txt);
  border-color:var(--acc);
  transform:translateY(-1px);
}

.ui-section-card {
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:18px;
  background:rgba(255,255,255,0.03);
}

.ui-card {
  border:1px solid rgba(255,255,255,0.06);
  border-radius:16px;
  background:rgba(255,255,255,0.03);
}

.ui-chip-row {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.ui-chip {
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:0 9px;
  border-radius:999px;
  border:1px solid var(--bdr);
  background:rgba(255,255,255,0.04);
  font-size:9px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--txt);
}

.ui-pill-btn {
  border-radius:999px !important;
}

#mf-close,
#acc-close,
#up-close,
#vf-header button,
#qa-close,
.ui-close-btn {
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid var(--bdr);
  background:var(--sur);
  color:var(--muted);
  cursor:pointer;
  transition:all 0.18s ease;
  line-height:1;
}

#mf-close:hover,
#acc-close:hover,
#up-close:hover,
#vf-header button:hover,
#qa-close:hover,
.ui-close-btn:hover {
  color:var(--txt);
  border-color:var(--acc);
  transform:translateY(-1px);
}

.auth-tabs,
.acc-tabs {
  display:flex;
  gap:8px;
  padding:4px 0 2px;
  border-bottom:none;
}

.auth-tab,
.acc-tab {
  flex:1;
  border:1px solid var(--bdr);
  border-radius:999px;
  background:var(--sur);
  color:var(--muted);
  padding:10px 12px;
  margin-bottom:0;
}

.auth-tab:hover,
.acc-tab:hover {
  color:var(--txt);
  border-color:var(--acc);
}

.auth-tab.active,
.acc-tab.active {
  background:var(--acc);
  border-color:var(--acc);
  color:#fff;
}

.ghost-btn,
.auth-btn,
.auth-google,
.modal-btn,
.up-btn,
.acc-save,
.btn-sm,
.help-close,
.note-img-btn,
#share-pw-row button,
.thread-input button,
.qa-cache-bar button,
.ai-sug-actions button,
#vf-actions button,
.snap-btn,
.qa-sum-btn,
.btn,
.smart-fb-btn {
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border-radius:999px !important;
  border:1px solid var(--bdr);
  background:var(--sur);
  color:var(--txt);
  transition:all 0.18s ease;
  box-shadow:none;
}

.ghost-btn:hover,
.auth-google:hover,
.modal-btn:hover,
.up-btn:hover,
.btn-sm:hover,
.help-close:hover,
.note-img-btn:hover,
#share-pw-row button:hover,
.qa-cache-bar button:hover,
.ai-sug-actions button:hover,
.btn:hover,
.qa-sum-btn:hover {
  border-color:var(--acc);
  color:var(--txt);
  transform:translateY(-1px);
}

.qa-sum-btn:disabled {
  opacity:0.42;
  cursor:not-allowed;
  transform:none !important;
}

.auth-btn,
.acc-save,
.up-btn-primary,
.btn.primary,
.modal-btn.ok,
.smart-fb-btn,
.ai-sug-accept {
  background:var(--acc) !important;
  border-color:var(--acc) !important;
  color:#fff !important;
  box-shadow:none;
}

.auth-btn:hover,
.acc-save:hover,
.up-btn-primary:hover,
.btn.primary:hover,
.modal-btn.ok:hover,
.smart-fb-btn:hover,
.ai-sug-accept:hover {
  color:#fff !important;
  opacity:0.92;
  transform:translateY(-1px);
}

.snap-btn.ok {
  background:var(--green) !important;
  border-color:var(--green) !important;
  color:#07120c !important;
  box-shadow:none;
}

.snap-btn.cancel,
.ai-sug-dismiss {
  background:transparent !important;
  border-color:rgba(255,77,28,0.35) !important;
  color:var(--acc) !important;
}

.snap-btn.cancel:hover,
.ai-sug-dismiss:hover {
  background:rgba(255,77,28,0.08) !important;
  color:var(--acc) !important;
}

.ai-sug-edit {
  background:var(--sur) !important;
}

.auth-input,
.acc-input,
#share-pw-row input,
#pw-modal-box input,
#guest-name-input,
#snap-note,
.thread-input input {
  background:var(--sur) !important;
  border:1px solid var(--bdr) !important;
  color:var(--txt) !important;
  border-radius:16px;
  padding:12px 14px;
  outline:none;
}

.auth-input:focus,
.acc-input:focus,
#share-pw-row input:focus,
#pw-modal-box input:focus,
#guest-name-input:focus,
#snap-note:focus,
.thread-input input:focus {
  border-color:var(--acc) !important;
  box-shadow:0 0 0 4px rgba(255,77,28,0.08);
}

#guest-name-input {
  width:calc(100% - 32px);
  margin:12px 16px 0;
  box-sizing:border-box;
}

#author-input,
#note-input {
  width:calc(100% - 32px);
  margin:12px 16px 0;
  background:var(--sur);
  border:1px solid var(--bdr);
  color:var(--txt);
  border-radius:16px;
  padding:12px 14px;
}

#author-input {
  color:var(--gold);
}

#note-input {
  min-height:120px;
}

.smart-fb-row,
.note-img-row {
  padding:12px 16px;
  border-bottom:none;
}

.note-img-preview {
  border-radius:12px;
}

.note-img-clear {
  width:28px;
  height:28px;
  display:none;
  align-items:center;
  justify-content:center;
  border:1px solid var(--bdr);
  border-radius:999px;
  background:var(--sur);
}

.note-img-clear:hover {
  border-color:var(--acc);
  background:rgba(255,77,28,0.08);
}

.modal-foot {
  display:flex;
  gap:8px;
  justify-content:flex-end;
  padding:14px 16px 16px;
  border-top:1px solid var(--bdr);
  background:var(--sur2);
}

.modal-btn {
  flex:0 0 auto;
  min-width:120px;
  padding:10px 16px;
}

.zr-dialog-overlay {
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
}

.zr-dialog-box {
  width:min(380px, calc(100vw - 32px));
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
    var(--panel);
}

.zr-dialog-icon {
  font-size:30px;
  line-height:1;
  text-align:center;
}

.zr-dialog-title {
  font-family:'Syne',sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:0.04em;
  color:var(--txt);
}

.zr-dialog-message {
  font-size:11px;
  line-height:1.7;
  color:var(--muted);
}

.zr-dialog-actions {
  display:flex;
  gap:8px;
  justify-content:flex-end;
}

.zr-btn {
  border-radius:999px;
  border:1px solid var(--bdr);
  background:var(--sur);
  color:var(--txt);
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:10px 16px;
  cursor:pointer;
  transition:all 0.18s ease;
}

.zr-btn:hover {
  border-color:var(--acc);
  transform:translateY(-1px);
}

.zr-btn-primary {
  color:#fff;
  border-color:var(--acc);
  background:var(--acc);
  box-shadow:0 10px 24px rgba(255,77,28,0.18);
}

.zr-toast {
  background:var(--panel);
  border:1px solid var(--bdr);
  border-radius:999px;
  box-shadow:0 12px 30px var(--shadow);
  backdrop-filter:blur(14px);
}

/* ── UI COMPONENTS ── */
#auth-overlay,
#account-overlay,
#mf-overlay,
#help-overlay,
#pw-modal,
#guest-name-modal,
.zr-dialog-overlay {
  background:rgba(5,7,10,0.58) !important;
  backdrop-filter:blur(10px);
}

#auth-box,
#account-box,
#mf-box,
#help-box,
#pw-modal-box,
#guest-name-box,
#vf-panel,
#qa-panel,
#share-box,
#note-modal,
.zr-dashboard-box,
.zr-dialog-box {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
    var(--panel);
  border:1px solid var(--bdr);
  border-radius:24px;
  box-shadow:none;
  backdrop-filter:blur(18px);
  overflow:hidden;
}

#auth-box {
  width:min(430px, calc(100vw - 32px));
  padding:20px;
  gap:14px;
}

#account-box {
  width:min(520px, calc(100vw - 32px));
  max-height:min(84vh, 860px);
}

#mf-box {
  width:min(560px, calc(100vw - 32px));
  max-height:78vh;
}

#help-box {
  width:min(540px, calc(100vw - 32px));
  max-height:82vh;
}

#pw-modal-box {
  width:min(420px, calc(100vw - 32px));
  min-width:0;
}

#guest-name-box {
  width:min(380px, calc(100vw - 32px));
}

#guest-name-modal {
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  align-items:center;
  justify-content:center;
}

#guest-name-box .qa-f-msg {
  margin:16px 16px 0;
}

#note-modal {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
    var(--panel);
  border:1px solid var(--bdr);
  border-radius:24px;
  box-shadow:none;
  backdrop-filter:blur(18px);
  overflow:hidden;
  min-width:340px;
}

#vf-overlay {
  justify-content:flex-end;
}

#vf-panel {
  width:min(760px, calc(100vw - 36px));
  height:100vh;
  max-height:100vh;
  border:0;
  border-left:1px solid var(--bdr);
  border-radius:0;
  box-shadow:none;
}

#vf-content {
  padding:18px 20px 24px;
}

#vf-actions {
  padding:14px 20px 18px;
  background:rgba(255,255,255,0.02);
  border-top:1px solid rgba(255,255,255,0.06);
}

#mf-header,
#account-header,
#user-panel-head,
#vf-header,
#qa-header,
#share-header,
#zr-dashboard-header,
#pw-modal-box .modal-hdr,
#help-box h3,
#note-modal .modal-hdr,
#guest-name-box .modal-hdr {
  padding:18px 18px 16px;
  background:rgba(255,255,255,0.02);
  border-bottom:1px solid rgba(255,255,255,0.06);
}

#account-header .acc-title,
#mf-header .mf-title,
#help-box h3,
#note-modal .ui-panel-title,
.share-title,
.qa-title,
.zr-dashboard-title,
#vf-header .ui-panel-title {
  font-family:'Syne',sans-serif;
  font-size:17px;
  font-weight:700;
  letter-spacing:0.02em;
  color:var(--txt);
  line-height:1.04;
}

#vf-header {
  align-items:flex-start;
}

#help-box h3,
#account-header .acc-title,
#mf-header .mf-title,
.qa-title,
.zr-dashboard-title {
  margin:0;
}

#pw-modal-box .modal-hdr,
#guest-name-box .modal-hdr {
  font-family:'Syne',sans-serif;
  font-size:15px;
  font-weight:700;
  letter-spacing:0.02em;
  line-height:1.1;
  color:var(--txt);
  text-transform:none;
}

#share-pw-row {
  gap:8px;
  padding:12px 14px 16px;
  background:transparent;
}

#mf-list,
#user-panel-sessions {
  padding:16px;
}

.mf-item,
.up-session-item {
  margin:0 0 10px;
  padding:13px 14px;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:18px;
  background:rgba(255,255,255,0.03);
}

.mf-item:hover,
.up-session-item:hover {
  background:rgba(255,77,28,0.06);
  border-color:rgba(255,77,28,0.28);
  transform:translateX(-1px);
}

.mf-item:last-child,
.up-session-item:last-child {
  margin-bottom:0;
}

#mf-new {
  margin:0 16px 18px;
}

#user-panel-backdrop.open {
  background:rgba(5,7,10,0.42);
  backdrop-filter:blur(6px);
}

#user-panel {
  width:320px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
    var(--panel);
  backdrop-filter:blur(18px);
  box-shadow:none;
}

#user-panel-foot {
  padding:16px;
  gap:10px;
  background:rgba(255,255,255,0.02);
  border-top:1px solid rgba(255,255,255,0.06);
}

.up-btn {
  text-align:center;
  padding:10px 14px;
  color:var(--txt);
  background:var(--sur);
}

.up-empty,
.mf-empty {
  padding:32px 20px;
  font-size:10px;
  line-height:1.9;
  letter-spacing:0.08em;
}

.acc-content {
  padding:18px;
}

.acc-field {
  margin-bottom:16px;
}

.acc-info-badge,
.acc-sub-badge {
  border-radius:999px;
}

.acc-sub-placeholder {
  padding:18px;
}

.acc-info-row,
.acc-sub-placeholder,
.help-section,
.share-card,
.qa-score,
.qa-stat,
.qa-finding,
.qa-ok,
.qa-summary,
.qa-sum-body,
.qa-state,
.zr-reviewer-card,
.zr-dashboard-empty {
  border:1px solid rgba(255,255,255,0.06);
  border-radius:18px;
  background:rgba(255,255,255,0.03);
}

.acc-info-row {
  padding:14px 16px;
  margin-bottom:16px;
}

.acc-sub-placeholder {
  text-align:left;
}

.help-section {
  margin:14px 16px 0;
  padding:16px;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:18px;
  background:rgba(255,255,255,0.03);
}

.help-section:last-of-type {
  margin-bottom:0;
}

.help-section h4 {
  margin:0 0 10px;
  font-family:'Syne',sans-serif;
  font-size:15px;
  font-weight:700;
  letter-spacing:0.02em;
  color:var(--txt);
}

.help-section p,
.help-section li {
  font-size:11px;
  line-height:1.75;
}

.help-close {
  width:calc(100% - 32px);
  margin:16px;
  padding:10px 16px;
  background:rgba(255,255,255,0.03);
}

.qa-sum-tabs {
  gap:8px;
  flex-wrap:wrap;
}

.qa-sum-tab {
  border-radius:999px;
  padding:8px 12px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
}

.qa-sum-tab + .qa-sum-tab {
  border-left:none;
}

.qa-sum-tab.active {
  background:var(--acc);
  border-color:var(--acc);
}

#qa-overlay {
  background:rgba(5,7,10,0.58) !important;
  backdrop-filter:blur(10px);
}

#qa-panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
    var(--panel);
  border:1px solid var(--bdr);
  border-radius:24px;
  box-shadow:none;
  backdrop-filter:blur(18px);
  width:min(620px, calc(100vw - 32px));
  max-height:min(84vh, 860px);
  overflow:hidden;
}

#qa-header {
  padding:18px 18px 16px;
  background:rgba(255,255,255,0.02);
  border-bottom:1px solid rgba(255,255,255,0.06);
}

.qa-header-group,
.qa-header-actions,
.vf-header-group {
  display:flex;
  align-items:center;
}

.qa-header-group {
  gap:10px;
}

.qa-header-actions,
.vf-header-group {
  gap:8px;
}

#qa-profile-badge {
  display:none;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:999px;
  background:rgba(255,255,255,0.05);
  color:var(--txt);
  font-family:'DM Mono',monospace;
  font-size:9px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  line-height:1;
  white-space:nowrap;
}

#qa-profile-badge.visible {
  display:inline-flex;
}

#qa-profile-badge.suggested {
  border-color:rgba(255,77,28,0.30);
  background:rgba(255,77,28,0.12);
  color:#fff;
  box-shadow:0 10px 22px rgba(255,77,28,0.16);
}

.qa-tabs {
  padding:10px 20px 0;
  gap:8px;
  border-bottom:none;
  background:var(--sur2);
}

.qa-tab {
  border:1px solid var(--bdr);
  border-radius:999px;
  background:var(--sur);
  padding:9px 12px;
  border-bottom:none;
}

.qa-tab.active {
  background:var(--acc);
  border-color:var(--acc);
  color:#fff;
}

.qa-tab .qa-tab-count {
  border-radius:999px;
}

.qa-tab.active .qa-tab-count {
  background:rgba(255,255,255,0.18);
  color:#fff;
}

.qa-tab-body {
  padding:18px 20px 24px;
}

.qa-score {
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:20px;
  padding:18px;
}

.qa-score-num {
  min-width:64px;
  color:var(--qa-score-color, var(--txt));
}

.qa-stats {
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
  background:none;
  border:none;
}

.qa-stat {
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:16px;
}

.qa-sev-row {
  gap:8px;
  flex-wrap:wrap;
}

.qa-sev-chip {
  border-radius:999px;
  padding:5px 10px;
}

.qa-finding {
  margin-bottom:8px;
  border-radius:18px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
}

.qa-f-main {
  flex:1;
  min-width:0;
}

.qa-ok {
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:20px;
}

.qa-summary,
.qa-sum-body {
  margin-top:12px;
  padding:16px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:18px;
}

.qa-cache-bar {
  align-items:center;
  gap:8px;
  padding:12px 20px 0;
  background:transparent;
  border-bottom:none;
}

.qa-cache-pill {
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border:1px solid rgba(0,229,160,0.28);
  border-radius:999px;
  background:rgba(0,229,160,0.08);
  color:var(--green);
  font-family:'DM Mono',monospace;
  font-size:9px;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

.qa-state {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  margin:18px 20px 20px;
  padding:24px 20px;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:20px;
  background:rgba(255,255,255,0.03);
  text-align:center;
}

.qa-state-message {
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
}

.qa-state-error {
  color:var(--acc);
  font-size:11px;
  line-height:1.6;
}

.qa-suggested-profile {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:18px;
  background:rgba(255,255,255,0.03);
}

.qa-suggested-copy {
  font-size:10px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
}

.qa-suggested-copy strong {
  display:block;
  margin-top:4px;
  color:var(--txt);
  font-family:'Syne',sans-serif;
  font-size:13px;
  letter-spacing:0.02em;
  text-transform:none;
}

.qa-sum-loading {
  padding:16px;
  text-align:center;
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:0.1em;
  color:var(--muted);
}

.qa-inline-error {
  margin-top:12px;
  padding:14px 16px;
  border:1px solid rgba(255,77,28,0.18);
  border-radius:16px;
  background:rgba(255,77,28,0.06);
  color:var(--acc);
  font-size:11px;
}

.zr-dashboard-overlay {
  position:fixed;
  inset:0;
  z-index:10003;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(5,7,10,0.58);
  backdrop-filter:blur(10px);
}

.zr-dashboard-box {
  width:min(520px, calc(100vw - 32px));
  max-height:min(84vh, 860px);
  overflow:auto;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
    var(--panel);
  border:1px solid var(--bdr);
  border-radius:24px;
  box-shadow:none;
  backdrop-filter:blur(18px);
}

.zr-dashboard-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px 18px 16px;
  background:rgba(255,255,255,0.02);
  border-bottom:1px solid rgba(255,255,255,0.06);
}

.zr-dashboard-title {
  margin:0;
  font-family:'Syne',sans-serif;
  font-size:17px;
  font-weight:700;
  letter-spacing:0.02em;
  color:var(--txt);
}

.zr-dashboard-close {
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid var(--bdr);
  background:var(--sur);
  color:var(--muted);
  cursor:pointer;
  transition:all 0.18s ease;
}

.zr-dashboard-close:hover {
  color:var(--txt);
  border-color:var(--acc);
  transform:translateY(-1px);
}

.zr-dashboard-body {
  padding:18px;
}

.zr-dashboard-section {
  margin-bottom:18px;
}

.zr-dashboard-label {
  display:block;
  margin-bottom:8px;
  color:var(--muted);
  font-size:9px;
  letter-spacing:0.12em;
  text-transform:uppercase;
}

.zr-dashboard-row {
  display:flex;
  gap:8px;
  align-items:center;
}

.zr-dashboard-row-wrap {
  flex-wrap:wrap;
}

.zr-dashboard-input,
.zr-dashboard-select {
  width:100%;
  min-width:0;
  background:var(--sur);
  border:1px solid var(--bdr);
  border-radius:16px;
  color:var(--txt);
  font-family:'DM Mono',monospace;
  font-size:12px;
  padding:12px 14px;
  outline:none;
}

.zr-dashboard-input:focus,
.zr-dashboard-select:focus {
  border-color:var(--acc);
  box-shadow:0 0 0 4px rgba(255,77,28,0.08);
}

.zr-dashboard-reviewers {
  display:flex;
  flex-direction:column;
  gap:8px;
}

.zr-dashboard-empty {
  padding:18px;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:18px;
  background:rgba(255,255,255,0.03);
  color:var(--muted);
  font-size:11px;
  line-height:1.7;
}

.zr-dashboard-help {
  margin-top:8px;
  color:var(--muted);
  font-size:11px;
  line-height:1.7;
}

#share-overlay {
  position:fixed;
  inset:0;
  z-index:10004;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(5,7,10,0.58);
  backdrop-filter:blur(10px);
}
#share-overlay.visible { display:flex; }
#share-box {
  width:min(560px, calc(100vw - 32px));
  max-height:min(84vh, 860px);
  overflow:auto;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
    var(--panel);
  border:1px solid var(--bdr);
  border-radius:24px;
  box-shadow:none;
  backdrop-filter:blur(18px);
}
#share-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:18px 18px 16px;
  background:rgba(255,255,255,0.02);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.share-kicker {
  font-size:8px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:4px;
}
#share-close {
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid var(--bdr);
  background:var(--sur);
  color:var(--muted);
  cursor:pointer;
  transition:all 0.18s ease;
}
#share-close:hover {
  color:var(--txt);
  border-color:var(--acc);
  transform:translateY(-1px);
}
#share-body {
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.share-card {
  padding:16px;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:18px;
  background:rgba(255,255,255,0.03);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.share-label {
  font-size:9px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.share-link-row {
  display:flex;
  gap:10px;
  align-items:center;
}
#share-link-output,
#share-message-output {
  width:100%;
  min-width:0;
  background:var(--sur);
  border:1px solid var(--bdr);
  border-radius:16px;
  color:var(--txt);
  font-family:'DM Mono',monospace;
  font-size:12px;
  padding:12px 14px;
  outline:none;
}
#share-link-output { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#share-message-output {
  min-height:120px;
  resize:vertical;
  line-height:1.65;
}
.share-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.share-btn {
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--bdr);
  background:var(--sur2);
  color:var(--txt);
  cursor:pointer;
  transition:all 0.18s ease;
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.share-btn:hover {
  border-color:var(--acc);
  transform:translateY(-1px);
}
.share-btn.primary {
  background:rgba(255,77,28,0.10);
  border-color:rgba(255,77,28,0.28);
}
.share-btn.secondary {
  background:rgba(77,159,255,0.10);
  border-color:rgba(77,159,255,0.28);
}
.share-app-grid {
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
}
.share-integration-grid {
  display:flex;
  flex-direction:column;
  gap:12px;
}
.share-integration-row {
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.02);
}
.share-integration-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.share-integration-state {
  font-size:9px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.share-integration-state.connected {
  color:var(--green);
}
.share-webhook-input {
  width:100%;
  min-width:0;
  min-height:40px;
  padding:0 14px;
  border-radius:16px;
  border:1px solid var(--bdr);
  background:var(--sur);
  color:var(--txt);
  outline:none;
  font-family:'DM Mono',monospace;
  font-size:11px;
}
.share-webhook-input::placeholder {
  color:var(--muted);
}
.share-app-btn {
  min-height:72px;
  padding:12px 10px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.03);
  color:var(--txt);
  cursor:pointer;
  transition:all 0.18s ease;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  text-align:left;
}
.share-app-btn:hover {
  border-color:var(--acc);
  transform:translateY(-1px);
}
.share-app-name {
  font-family:'Syne',sans-serif;
  font-size:15px;
  line-height:1;
}
.share-app-copy {
  font-size:8px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.share-hint {
  color:var(--muted);
  font-size:11px;
  line-height:1.7;
}
#share-status {
  display:none;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.03);
  font-size:11px;
  line-height:1.6;
}
#share-status.visible { display:block; }
#share-status.success {
  color:var(--green);
  border-color:rgba(0,229,160,0.28);
  background:rgba(0,229,160,0.08);
}
#share-status.warn {
  color:var(--gold);
  border-color:rgba(255,199,0,0.28);
  background:rgba(255,199,0,0.08);
}

.zr-reviewer-card {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border:1px solid var(--bdr);
  border-left:3px solid var(--status-color, var(--bdr));
  border-radius:18px;
  background:var(--sur);
}

.zr-reviewer-name {
  font-size:13px;
  font-weight:600;
  color:var(--txt);
}

.zr-reviewer-email {
  margin-top:4px;
  color:var(--muted);
  font-family:'DM Mono',monospace;
  font-size:10px;
}

.zr-reviewer-meta {
  margin-top:4px;
  color:var(--muted);
  font-size:11px;
}

.zr-reviewer-actions {
  display:flex;
  align-items:center;
  gap:8px;
}

.zr-reviewer-status {
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid var(--status-color, var(--bdr));
  background:var(--status-bg, rgba(255,255,255,0.04));
  color:var(--status-color, var(--muted));
  font-family:'DM Mono',monospace;
  font-size:9px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  white-space:nowrap;
}

.acc-inline-note {
  color:var(--muted);
  font-weight:400;
}

.acc-inline-row {
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:8px;
}

#acc-api-token {
  flex:1;
  font-family:'DM Mono',monospace;
  font-size:10px;
}

#acc-plan-badge-wrap {
  margin-bottom:16px;
}

#acc-usage-stats {
  margin:16px 0;
  text-align:left;
}

.acc-progress-row {
  display:flex;
  align-items:center;
  gap:10px;
}

.acc-progress-track {
  flex:1;
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:var(--bdr);
}

.acc-progress-bar {
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg, #ff7a4f, #ff4d1c);
  transition:width 0.3s ease;
}

.acc-stat-value {
  color:var(--txt);
  font-size:11px;
  white-space:nowrap;
}

#acc-billing-section {
  margin-top:12px;
}

#acc-buy-passes {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:10px 0;
}

#acc-go-pro-btn {
  width:100%;
  margin:6px 0;
  background:var(--gold) !important;
  border-color:var(--gold) !important;
  color:#000 !important;
  box-shadow:0 10px 24px rgba(255,199,0,0.18);
}

#acc-manage-billing-btn {
  display:none;
  width:100%;
  margin:4px 0;
}

#acc-credit-balance {
  color:var(--txt);
  font-family:'DM Mono',monospace;
  font-size:11px;
}

@media (max-width: 900px) {
  #account-box,
  #help-box,
  #mf-box {
    width:min(100vw - 24px, 560px);
  }

  #vf-panel {
    width:min(100vw - 24px, 720px);
  }
}

@media (max-width: 600px) {
  #auth-box,
  #qa-panel,
  #account-box,
  #mf-box,
  #help-box,
  #pw-modal-box,
  #guest-name-box,
  .zr-dialog-box,
  .zr-dashboard-box {
    width:calc(100vw - 20px);
    border-radius:22px;
  }

  #vf-overlay {
    align-items:flex-end;
  }

  #vf-panel {
    width:100vw;
    height:78vh;
    max-height:78vh;
    border-left:none;
    border-top:1px solid var(--bdr);
  }

  #user-panel {
    width:100%;
  }

  .zr-dashboard-row {
    flex-wrap:wrap;
  }

  .modal-foot,
  .zr-dialog-actions {
    flex-wrap:wrap;
  }

  .modal-btn,
  .zr-btn,
  .zr-dashboard-row .zr-btn {
    width:100%;
  }
}

/* ── REVIEWER VIEWPORT HINT ── */
.reviewer-hint {
  position:fixed;
  bottom:72px;
  left:50%;
  transform:translateX(-50%) translateY(12px);
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 16px 10px 14px;
  border-radius:999px;
  border:1px solid var(--bdr);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    rgba(42,42,45,0.94);
  backdrop-filter:blur(16px);
  box-shadow:0 16px 36px rgba(0,0,0,0.32);
  z-index:80;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.4s ease, transform 0.4s ease;
}
.reviewer-hint.visible {
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.reviewer-hint.dismissing {
  opacity:0;
  transform:translateX(-50%) translateY(8px);
  pointer-events:none;
}
.reviewer-hint-icon {
  flex-shrink:0;
  color:var(--acc, #FF4D1C);
  display:flex;
  align-items:center;
}
.reviewer-hint-text {
  font-family:'DM Mono', monospace;
  font-size:9px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--txt);
  white-space:nowrap;
}
.reviewer-hint-close {
  flex-shrink:0;
  background:none;
  border:none;
  color:var(--muted);
  font-size:16px;
  cursor:pointer;
  padding:4px 6px;
  margin:-4px -6px -4px 0;
  line-height:1;
  transition:color 0.14s ease;
  pointer-events:auto;
  position:relative;
  z-index:1;
}
.reviewer-hint-close:hover {
  color:var(--txt);
}

/* ── REVIEWER CONTEXT BANNER ── */
.reviewer-banner {
  position:fixed;
  top:76px;
  left:50%;
  transform:translateX(-50%) translateY(-8px);
  display:flex;
  align-items:center;
  padding:7px 8px 7px 16px;
  border-radius:999px;
  border:1px solid var(--bdr);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    rgba(42,42,45,0.94);
  backdrop-filter:blur(16px);
  box-shadow:0 8px 24px rgba(0,0,0,0.24);
  z-index:90;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.35s ease, transform 0.35s ease;
  max-width:calc(100vw - 32px);
}
.reviewer-banner.visible {
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.reviewer-banner-inner {
  display:flex;
  align-items:center;
  gap:14px;
}
.reviewer-banner-stats {
  font-family:'DM Mono', monospace;
  font-size:9px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:12px;
}
.reviewer-banner-stats .rb-sep {
  width:1px;
  height:10px;
  background:var(--bdr);
  flex-shrink:0;
}
.reviewer-banner-stats .rb-val {
  color:var(--txt);
  font-weight:500;
}
.reviewer-banner-stats .rb-deadline-soon {
  color:#ffc700;
}
.reviewer-banner-stats .rb-deadline-overdue {
  color:#ff4d4d;
}
.reviewer-banner-submit {
  font-family:'DM Mono', monospace;
  font-size:9px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  font-weight:600;
  padding:5px 14px;
  border-radius:999px;
  border:none;
  background:var(--acc, #FF4D1C);
  color:#fff;
  cursor:pointer;
  white-space:nowrap;
  transition:background 0.14s ease, opacity 0.14s ease;
}
.reviewer-banner-submit:hover {
  background:#ff6a3d;
}
.reviewer-banner-submit:disabled {
  background:#888;
  cursor:default;
  opacity:0.7;
}
@media (max-width:900px) {
  .reviewer-banner {
    top:68px;
  }
}
@media (max-width:600px) {
  .reviewer-banner {
    top:62px;
  }
}

/* ── LIGHT MODE — reviewer hint + banner ── */
[data-theme="light"] .reviewer-hint {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.82));
  border-color:var(--bdr);
  box-shadow:0 16px 36px rgba(0,0,0,0.10);
}
[data-theme="light"] .reviewer-banner {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.86));
  border-color:var(--bdr);
  box-shadow:0 8px 24px rgba(0,0,0,0.08);
}
[data-theme="light"] .reviewer-banner-submit {
  color:#fff;
}

/* ── REVIEW SUBMITTED CONFIRMATION ── */
.review-confirm-overlay {
  position:fixed;
  inset:0;
  background:rgba(5,7,10,0.62);
  backdrop-filter:blur(10px);
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s ease;
}
.review-confirm-overlay.visible {
  opacity:1;
  pointer-events:auto;
}
.review-confirm-box {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
    var(--panel);
  border:1px solid var(--bdr);
  border-radius:24px;
  backdrop-filter:blur(18px);
  padding:40px 36px 32px;
  text-align:center;
  width:min(380px, calc(100vw - 32px));
  transform:translateY(12px);
  transition:transform 0.35s ease;
}
.review-confirm-overlay.visible .review-confirm-box {
  transform:translateY(0);
}
.review-confirm-icon {
  margin-bottom:16px;
}
.review-confirm-title {
  font-family:'Syne', sans-serif;
  font-size:16px;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--txt);
  margin-bottom:16px;
}
.review-confirm-recap {
  font-family:'DM Mono', monospace;
  font-size:10px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
  line-height:1.7;
  margin-bottom:24px;
}
.review-confirm-recap .rc-val {
  color:var(--txt);
  font-weight:500;
}
.review-confirm-close {
  font-family:'DM Mono', monospace;
  font-size:9px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  font-weight:600;
  padding:8px 28px;
  border-radius:999px;
  border:1px solid var(--bdr);
  background:none;
  color:var(--txt);
  cursor:pointer;
  transition:background 0.14s ease;
}
.review-confirm-close:hover {
  background:rgba(255,255,255,0.06);
}

/* ── OPEN REVIEW (COMMUNITY) ── */
.open-review-badge {
  display:inline-block;
  font-family:'DM Mono', monospace;
  font-size:8px; font-weight:500;
  letter-spacing:0.12em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px;
  background:rgba(0,229,160,0.14);
  color:#00e5a0;
  border:1px solid rgba(0,229,160,0.28);
  margin-left:6px; vertical-align:middle;
}
.open-review-counter {
  font-family:'DM Mono', monospace;
  font-size:9px; font-weight:400;
  letter-spacing:0.06em;
  color:var(--muted);
  padding:6px 14px;
  border-radius:999px;
  background:var(--sur);
  border:1px solid var(--bdr);
  white-space:nowrap;
}
.open-review-counter .orc-val {
  color:var(--acc); font-weight:500;
}
.open-review-counter .orc-zero {
  color:#ff4d1c; font-weight:500;
}
.community-back-link {
  font-family:'DM Mono', monospace;
  font-size:9px; font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--muted); text-decoration:none;
  padding:6px 12px; border-radius:999px;
  border:1px solid var(--bdr);
  margin-right:12px;
  transition:all 0.18s ease;
}
.community-back-link:hover {
  color:var(--txt); border-color:var(--acc);
}

/* ── COMMUNITY PANEL ── */
.community-panel {
  display:none;
  position:fixed; right:0; top:52px; bottom:0;
  width:300px; z-index:115;
  background:var(--panel);
  border-left:1px solid var(--bdr);
  backdrop-filter:blur(18px);
  flex-direction:column;
  transition:transform 0.28s ease, opacity 0.28s ease;
  transform:translateX(100%); opacity:0;
}
.community-panel.visible {
  display:flex;
  transform:translateX(0); opacity:1;
}
.community-panel-header {
  display:flex; align-items:center; gap:8px;
  padding:14px 16px; border-bottom:1px solid var(--bdr);
  background:rgba(255,255,255,0.02);
}
.community-panel-title {
  font-family:'DM Mono', monospace;
  font-size:9px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--muted); flex:1;
}
.community-panel-count {
  font-family:'DM Mono', monospace;
  font-size:9px; font-weight:500;
  padding:2px 8px; border-radius:999px;
  background:rgba(255,255,255,0.06);
  color:var(--muted);
}
.community-focus {
  padding:10px 16px;
  font-family:'DM Mono', monospace;
  font-size:10px; color:var(--acc);
  letter-spacing:0.04em;
  border-bottom:1px solid var(--bdr);
  background:rgba(255,77,28,0.04);
}
.community-focus::before {
  content:'LOOKING FOR → ';
  font-size:8px; letter-spacing:0.12em;
  color:var(--muted); font-weight:500;
}
.community-comments-list {
  flex:1; overflow-y:auto;
  padding:12px 14px; display:flex;
  flex-direction:column; gap:10px;
}
.community-empty {
  text-align:center; padding:32px 12px;
  font-family:'DM Mono', monospace;
  font-size:10px; color:var(--muted);
  letter-spacing:0.04em;
}
.community-comment {
  padding:8px 10px; border-radius:12px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--bdr);
}
.community-comment-author {
  font-family:'DM Mono', monospace;
  font-size:8px; font-weight:500;
  letter-spacing:0.10em; text-transform:uppercase;
  color:var(--gold); margin-bottom:3px;
}
.community-comment-text {
  font-family:'DM Mono', monospace;
  font-size:10px; color:var(--txt);
  letter-spacing:0.03em; line-height:1.5;
  word-break:break-word;
}
.community-comment-time {
  font-family:'DM Mono', monospace;
  font-size:8px; color:var(--muted);
  letter-spacing:0.05em; margin-top:4px;
}
.community-comment-delete {
  float:right; background:none; border:none;
  color:var(--muted); cursor:pointer; font-size:11px;
  padding:0 4px; opacity:0;
  transition:opacity 0.15s ease;
}
.community-comment:hover .community-comment-delete { opacity:1; }
.community-input-row {
  display:flex; gap:6px; padding:10px 12px;
  border-top:1px solid var(--bdr);
  background:rgba(255,255,255,0.02);
}
.community-comment-input {
  flex:1; background:var(--sur);
  border:1px solid var(--bdr); border-radius:999px;
  padding:8px 14px; color:var(--txt);
  font-family:'DM Mono', monospace;
  font-size:10px; letter-spacing:0.03em;
  outline:none;
}
.community-comment-input:focus {
  border-color:var(--acc);
}
.community-send-btn {
  font-family:'DM Mono', monospace;
  font-size:9px; font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase;
  padding:8px 14px; border-radius:999px;
  background:var(--acc); color:#fff;
  border:1px solid var(--acc);
  cursor:pointer; transition:all 0.18s ease;
}
.community-send-btn:hover {
  background:var(--acc2); transform:translateY(-1px);
}
@media(max-width:640px){
  .community-panel { width:100%; top:auto; bottom:0; height:50vh; border-left:none; border-top:1px solid var(--bdr); }
}

/* ── ANIMATION PANEL ── */
#animation-panel-body {
  padding:8px 10px 10px;
  display:flex;
  flex-direction:column;
  gap:1px;
  overflow-y:auto;
  max-height:340px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,0.1) transparent;
}
.anim-empty-state {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:18px 12px;
  text-align:center;
}
.anim-empty-icon { opacity:0.4; }
.anim-empty-label {
  font-family:'DM Mono', monospace;
  font-size:9px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--txt-dim, #999);
}
.anim-empty-desc {
  font-family:'DM Mono', monospace;
  font-size:8.5px;
  letter-spacing:0.06em;
  color:var(--muted, #666);
  line-height:1.5;
}
.anim-section-divider {
  height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,0), var(--bdr), rgba(255,255,255,0));
  margin:4px 0;
}
.anim-section-label {
  font-family:'DM Mono', monospace;
  font-size:7.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--txt-dim, #888);
  padding:2px 6px 1px;
}
.anim-clip-row {
  display:flex;
  align-items:center;
  gap:7px;
  padding:5px 8px;
  border-radius:8px;
  cursor:pointer;
  transition:background 0.14s ease, border-color 0.14s ease;
  border:1px solid transparent;
}
.anim-clip-row:hover {
  background:rgba(255,255,255,0.04);
  border-color:var(--bdr);
}
.anim-clip-row.anim-clip-active {
  background:rgba(255,77,28,0.08);
  border-color:rgba(255,77,28,0.22);
}
.anim-clip-row.anim-clip-active .anim-clip-icon {
  color:var(--acc, #FF4D1C);
}
.anim-clip-icon {
  flex-shrink:0;
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--txt-dim, #888);
  transition:color 0.14s ease;
}
.anim-clip-info {
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
}
.anim-clip-name {
  font-family:'DM Mono', monospace;
  font-size:9px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--txt);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.anim-clip-meta {
  font-family:'DM Mono', monospace;
  font-size:8px;
  letter-spacing:0.08em;
  color:var(--muted, #666);
}
.anim-transport {
  padding:4px 2px 0;
  transition:opacity 0.18s ease;
}
.anim-transport-row {
  display:flex;
  align-items:center;
  gap:6px;
}
.anim-transport-btn {
  width:26px;
  height:26px;
  min-width:26px;
  padding:0;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.anim-transport-btn:disabled {
  opacity:0.32;
}
.anim-scrubber {
  flex:1;
  -webkit-appearance:none;
  appearance:none;
  height:3px;
  background:var(--bdr);
  border-radius:999px;
  outline:none;
  cursor:pointer;
}
.anim-scrubber::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--acc, #FF4D1C);
  border:2px solid var(--sur);
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
}
.anim-scrubber::-moz-range-thumb {
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--acc, #FF4D1C);
  border:2px solid var(--sur);
  cursor:pointer;
}
.anim-time-label {
  font-family:'DM Mono', monospace;
  font-size:8px;
  letter-spacing:0.08em;
  color:var(--muted, #666);
  white-space:nowrap;
  flex-shrink:0;
}
.anim-speed-row {
  margin-top:6px;
  gap:4px;
}
.anim-speed-title {
  font-family:'DM Mono', monospace;
  font-size:7.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--txt-dim, #888);
  margin-right:4px;
}
.anim-speed-btn {
  font-family:'DM Mono', monospace;
  font-size:8px;
  letter-spacing:0.06em;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid var(--bdr);
  background:transparent;
  color:var(--txt-dim);
  cursor:pointer;
  transition:all 0.14s ease;
}
.anim-speed-btn:hover {
  border-color:rgba(255,77,28,0.22);
  color:var(--txt);
  background:rgba(255,77,28,0.06);
}
.anim-speed-label {
  font-family:'DM Mono', monospace;
  font-size:8px;
  letter-spacing:0.08em;
  color:var(--acc, #FF4D1C);
  margin-left:auto;
}

/* ── DESKTOP SURFACE LAYOUT REWORK ── */
#utility-corner,
#utility-panel,
#mesh-panel,
#render-panel,
#taskbar-hover-zone {
  display:none;
}
#surface-mode-switch {
  display:none;
}
#mobile-session-menu,
#feedback-panel-toggle {
  display:none;
}
#mobile-menu-toggle,
#mobile-menu-backdrop,
#mobile-feedback-close,
.viewer-float-close,
#note-modal-close {
  display:none;
}
.surface-mode-switch {
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border-radius:999px;
  border:1px solid var(--bdr);
  background:var(--sur);
}
.surface-mode-btn {
  border:none;
  border-radius:999px;
  padding:0 12px;
  background:transparent;
  color:var(--muted);
  font-family:'DM Mono',monospace;
  font-size:9px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all 0.18s ease;
  min-width:74px;
  min-height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
  line-height:1;
  flex:0 0 auto;
  }
.surface-mode-btn:hover { color:var(--txt); }
.surface-mode-btn.active {
  background:var(--acc);
  color:#fff;
  box-shadow:0 10px 22px rgba(255,77,28,0.18);
}

body *,
body *::before,
body *::after {
  box-shadow:none !important;
}

#viewport-vignette {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:3;
  opacity:0;
  transition:opacity 0.2s ease;
  background:radial-gradient(circle at center, rgba(0,0,0,0) 48%, rgba(0,0,0,0.16) 100%);
}

[data-theme="light"] #viewport-vignette {
  background:radial-gradient(circle at center, rgba(255,255,255,0) 54%, rgba(36,34,31,0.1) 100%);
}

.topbar-icon-btn {
  width:40px;
  min-width:40px;
  height:40px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  color:var(--txt);
}

.topbar-icon-btn.active {
  color:#fff;
  border-color:rgba(255,77,28,0.34);
  background:rgba(255,77,28,0.14);
}

.topbar-icon-svg {
  width:18px;
  height:18px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}

.render-settings-card {
  display:flex;
  flex-direction:column;
  gap:16px;
}

.render-settings-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.render-settings-copy {
  min-width:0;
}

.render-settings-title {
  font-family:'Syne',sans-serif;
  font-size:17px;
  line-height:1.08;
  color:var(--txt);
}

.render-settings-subtitle {
  margin-top:6px;
  font-size:10px;
  line-height:1.55;
  color:var(--muted);
}

.render-settings-reset {
  min-height:34px;
  padding:0 12px;
  border-radius:12px;
  font-size:9px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  flex:0 0 auto;
}

.render-settings-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.render-settings-field {
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}

.render-settings-label {
  font-size:9px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--muted);
}

.render-settings-field select {
  width:100%;
  min-height:40px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid var(--bdr);
  background:var(--sur);
  color:var(--txt);
  font-family:'DM Mono',monospace;
  font-size:10px;
  letter-spacing:0.04em;
  outline:none;
}

.render-settings-slider-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.render-settings-slider {
  display:grid;
  grid-template-columns:minmax(88px, auto) minmax(0, 1fr) minmax(44px, auto);
  align-items:center;
  gap:14px;
  min-height:50px;
  padding:0 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.025);
}

.render-settings-slider span,
.render-settings-slider strong {
  font-family:'DM Mono',monospace;
  font-size:9px;
  letter-spacing:0.12em;
  text-transform:uppercase;
}

.render-settings-slider span {
  color:var(--muted);
}

.render-settings-slider strong {
  color:var(--txt);
  font-weight:600;
}

.render-settings-slider input[type="range"] {
  width:100%;
  accent-color:var(--acc);
}

.render-settings-toggle-row {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.render-settings-toggle {
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--bdr);
  background:var(--sur);
  color:var(--muted);
  font-family:'DM Mono',monospace;
  font-size:9px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.render-settings-toggle:hover {
  color:var(--txt);
  border-color:rgba(255,77,28,0.2);
  transform:translateY(-1px);
}

.render-settings-toggle.active {
  color:#fff;
  border-color:rgba(255,77,28,0.34);
  background:rgba(255,77,28,0.14);
}

.render-settings-hint {
  font-size:10px;
  line-height:1.6;
  color:var(--muted);
}

@media (min-width: 901px) {
  body {
    --notes-panel-width:500px;
    --utility-panel-width:444px;
    --mesh-panel-width:444px;
    --floating-gap:18px;
  }

  #utility-corner {
    position:fixed;
    top:84px;
    left:18px;
    z-index:131;
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
  }

  .utility-rail {
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding:10px 8px;
    border-radius:26px;
    border:1px solid var(--bdr);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
      var(--panel);
    backdrop-filter:blur(16px);
    box-shadow:0 24px 48px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.05);
  }
  .utility-rail::before {
    content:'';
    position:absolute;
    top:8px;
    left:7px;
    right:7px;
    height:1px;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.12), rgba(255,255,255,0));
    pointer-events:none;
  }

  #utility-panel-toggle,
  #mesh-panel-toggle,
  #animation-panel-toggle,
  #render-settings-toggle,
  #draw-panel-toggle,
  #auto-redline-toggle,
  #live-panel-toggle,
  #scene-panel-toggle,
  #account-rail-toggle,
  #sound-toggle {
    width:46px;
    height:46px;
    min-width:46px;
    padding:0;
    border-radius:16px;
    background:var(--sur);
    border-color:var(--bdr);
    color:var(--txt);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:visible;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
    transition:transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
  }
  #utility-panel-toggle:hover,
  #mesh-panel-toggle:hover,
  #animation-panel-toggle:hover,
  #render-settings-toggle:hover,
  #draw-panel-toggle:hover,
  #auto-redline-toggle:hover,
  #live-panel-toggle:hover,
  #scene-panel-toggle:hover,
  #account-rail-toggle:hover,
  #sound-toggle:hover,
  .utility-theme-btn:hover {
    transform:translateY(-1px);
    border-color:rgba(255,77,28,0.18);
    background:rgba(255,77,28,0.06);
    box-shadow:0 10px 22px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.05);
  }
  #utility-panel-toggle.active,
  #mesh-panel-toggle.active,
  #animation-panel-toggle.active,
  #render-settings-toggle.active,
  #draw-panel-toggle.active,
  #auto-redline-toggle.active,
  #live-panel-toggle.active,
  #scene-panel-toggle.active,
  #account-rail-toggle.active,
  #sound-toggle.active {
    color:#fff;
    border-color:rgba(255,77,28,0.34);
    background:rgba(255,77,28,0.14);
    box-shadow:0 12px 28px rgba(255,77,28,0.16);
  }
  #sound-toggle.muted {
    color:var(--muted);
    border-color:var(--bdr);
    background:var(--sur);
  }
  #sound-toggle .utility-sound-mute-stroke {
    opacity:0;
    transition:opacity 0.16s ease;
  }
  #sound-toggle.muted .utility-sound-mute-stroke {
    opacity:1;
  }
  #sound-toggle.muted .utility-sound-wave {
    opacity:0.32;
  }
  .utility-rail-btn::before,
  .utility-theme-btn::before {
    content:attr(data-rail-label);
    position:absolute;
    left:calc(100% + 12px);
    top:50%;
    transform:translateY(-50%) translateX(-6px);
    opacity:0;
    pointer-events:none;
    min-height:28px;
    padding:0 10px;
    border-radius:999px;
    border:1px solid var(--bdr);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
      rgba(50,50,53,0.92);
    color:var(--txt);
    font-family:'DM Mono',monospace;
    font-size:9px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    line-height:28px;
    white-space:nowrap;
    transition:opacity 0.16s ease, transform 0.16s ease;
    backdrop-filter:blur(10px);
    box-shadow:0 16px 32px rgba(0,0,0,0.24);
  }
  .utility-rail-btn:hover::before,
  .utility-rail-btn:focus-visible::before,
  .utility-theme-btn:hover::before,
  .utility-theme-btn:focus-visible::before {
    opacity:1;
    transform:translateY(-50%) translateX(0);
  }
  .utility-rail-icon {
    width:18px;
    height:18px;
    stroke:currentColor;
    fill:none;
    stroke-width:1.75;
    stroke-linecap:round;
    stroke-linejoin:round;
    pointer-events:none;
  }
  #auto-redline-toggle .utility-rail-icon {
    fill:currentColor;
    stroke:none;
  }
  .utility-rail-divider {
    width:22px;
    height:1px;
    background:linear-gradient(90deg, rgba(255,255,255,0), rgba(62,62,66,0.95), rgba(255,255,255,0));
    margin:2px 0;
  }
  .utility-theme-btn {
    position:relative;
    width:46px;
    height:46px;
    border-radius:16px;
    background:var(--sur);
    border:1px solid var(--bdr);
    padding:0;
  }
  .utility-theme-icon {
    position:absolute;
    inset:0;
    margin:auto;
    width:18px;
    height:18px;
    transition:opacity 0.18s ease, transform 0.18s ease;
  }
  .utility-theme-icon-sun {
    opacity:0;
    transform:scale(0.84);
  }
  .utility-theme-btn.light-active {
    background:rgba(255,77,28,0.14);
    border-color:rgba(255,77,28,0.32);
    box-shadow:inset 0 3px 10px rgba(0,0,0,0.26), 0 10px 22px rgba(255,77,28,0.14);
    transform:translateY(1px);
  }
  .utility-theme-btn.light-active .utility-theme-icon-moon {
    opacity:0;
    transform:scale(0.84);
  }
  .utility-theme-btn.light-active .utility-theme-icon-sun {
    opacity:1;
    transform:scale(1);
  }
  #live-panel-toggle::after {
    content:'';
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 0 0 rgba(0,229,160,0.34);
    opacity:0;
    transform:scale(0.6);
    transition:opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    flex:0 0 auto;
  }
  #live-panel-toggle.live-active::after {
    opacity:1;
    transform:scale(1);
  }
  #live-panel-toggle.live-presenting::after {
    background:#ff4b55;
    box-shadow:0 0 0 6px rgba(255,75,85,0.18);
    animation:live-rec-pulse 1.4s ease-in-out infinite;
  }

  #utility-panel,
  #mesh-panel,
  #render-panel,
  #animation-panel {
    position:fixed;
    top:124px;
    bottom:88px;
    display:flex;
    z-index:130;
    transition:transform 0.28s ease, opacity 0.28s ease;
  }
  #utility-panel {
    left:88px;
    width:var(--utility-panel-width);
    transform:translateX(0);
  }
  #mesh-panel {
    left:88px;
    width:var(--mesh-panel-width);
    transform:translateX(0);
  }
  #render-panel {
    left:88px;
    width:420px;
    max-width:calc(100vw - 132px);
    transform:translateX(0);
  }
  #animation-panel {
    left:88px;
    width:280px;
    max-height:420px;
    bottom:auto;
    transform:translateX(0);
  }
  body.utility-panel-collapsed #utility-panel {
    transform:translateX(calc(-100% - 26px));
    opacity:0;
    pointer-events:none;
  }
  body.mesh-panel-collapsed #mesh-panel {
    transform:translateX(calc(-100% - 26px));
    opacity:0;
    pointer-events:none;
  }
  body.animation-panel-collapsed #animation-panel {
    transform:translateX(calc(-100% - 26px));
    opacity:0;
    pointer-events:none;
  }
  body.render-panel-collapsed #render-panel {
    transform:translateX(calc(-100% - 26px));
    opacity:0;
    pointer-events:none;
  }

  #utility-panel-header,
  #mesh-panel-header,
  #render-panel-header {
    align-items:flex-start;
  }
  .utility-panel-kicker {
    margin-bottom:0;
  }
  .utility-panel-title {
    line-height:1.02;
  }
  .utility-panel-close {
    font-size:16px;
  }
  #utility-panel-body,
  #mesh-panel-body,
  #render-panel-body {
    flex:1;
    overflow:auto;
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .utility-panel-lead {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
  }
  .utility-section {
  }
  .utility-section-label {
    font-size:9px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .utility-action {
    width:100%;
    min-height:46px;
    border-radius:16px;
    border:1px solid var(--bdr);
    background:var(--sur);
    color:var(--txt);
    font-family:'DM Mono',monospace;
    font-size:10px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    padding:0 14px;
    text-align:left;
    cursor:pointer;
    transition:all 0.18s ease;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .utility-action:hover {
    border-color:var(--acc);
    transform:translateY(-1px);
  }
  .utility-action:disabled {
    opacity:0.45;
    cursor:not-allowed;
    transform:none;
  }
  .utility-action-accent {
    background:rgba(255,77,28,0.10);
    border-color:rgba(255,77,28,0.26);
  }
  .utility-action-blue {
    background:rgba(77,159,255,0.10);
    border-color:rgba(77,159,255,0.26);
  }
  .utility-action-meta {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:88px;
    min-height:24px;
    padding:0 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.14);
    background:rgba(8,12,18,0.28);
    color:var(--muted);
    font-size:9px;
    letter-spacing:0.08em;
    white-space:nowrap;
    flex:0 0 auto;
  }
  #utility-visual-btn,
  #utility-qa-btn,
  #utility-redline-btn {
    background:
      radial-gradient(circle at top left, rgba(255,132,72,0.22), transparent 46%),
      linear-gradient(180deg, rgba(255,77,28,0.18), rgba(255,77,28,0.08));
    border-color:rgba(255,77,28,0.36);
    box-shadow:0 14px 30px rgba(255,77,28,0.16);
    color:var(--txt);
    font-size:11px;
    letter-spacing:0.12em;
  }
  #utility-visual-btn:hover,
  #utility-qa-btn:hover,
  #utility-redline-btn:hover {
    border-color:rgba(255,77,28,0.48);
    box-shadow:0 18px 34px rgba(255,77,28,0.22);
  }
  .utility-action.active {
    background:rgba(255,77,28,0.12);
    border-color:rgba(255,77,28,0.34);
    box-shadow:0 10px 24px rgba(255,77,28,0.14);
  }
  .utility-section.collapsed .utility-section-body {
    display:none;
  }
  .utility-section-toggle {
    width:100%;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    border:none;
    background:none;
    color:inherit;
    cursor:pointer;
    text-align:left;
    padding:0;
  }
  .utility-section-heading {
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
  }
  .utility-section-title {
    font-family:'Syne',sans-serif;
    font-size:17px;
    color:var(--txt);
    line-height:1.1;
  }
  .utility-help-anchor {
    display:inline-flex;
    align-items:center;
    width:fit-content;
    max-width:100%;
    cursor:help;
  }
  .utility-help-copy {
    display:none !important;
  }
  #utility-help-tooltip {
    position:fixed;
    left:0;
    top:0;
    width:min(300px, calc(100vw - 28px));
    padding:10px 12px;
    border-radius:14px;
    border:1px solid var(--bdr);
    background:var(--sur);
    box-shadow:0 18px 36px var(--shadow);
    color:var(--txt);
    font-family:'DM Mono',monospace;
    font-size:10px;
    letter-spacing:0.04em;
    line-height:1.65;
    text-transform:none;
    white-space:normal;
    pointer-events:none;
    opacity:0;
    transform:translateY(8px);
    transition:opacity 0.16s ease, transform 0.16s ease;
    z-index:10040;
  }
  #utility-help-tooltip.visible {
    opacity:1;
    transform:translateY(0);
  }
  #utility-help-tooltip::before {
    content:'';
    position:absolute;
    left:var(--utility-tooltip-arrow-x, 18px);
    width:10px;
    height:10px;
    background:var(--sur);
    border-left:1px solid var(--bdr);
    border-top:1px solid var(--bdr);
    transform:rotate(45deg);
  }
  #utility-help-tooltip[data-side="bottom"]::before {
    top:-6px;
  }
  #utility-help-tooltip[data-side="top"]::before {
    bottom:-6px;
    transform:rotate(225deg);
  }
  .utility-section-copy {
    font-size:10px;
    color:var(--muted);
    line-height:1.55;
  }
  .utility-section-meta {
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
  }
  .utility-section-status {
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:0 10px;
    border-radius:999px;
    border:1px solid var(--bdr);
    font-size:9px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--muted);
    background:rgba(255,255,255,0.03);
  }
  .utility-section-status.running {
    color:var(--gold);
    border-color:rgba(255,199,0,0.35);
    background:rgba(255,199,0,0.08);
  }
  .utility-section-status.ready {
    color:var(--green);
    border-color:rgba(0,229,160,0.28);
    background:rgba(0,229,160,0.08);
  }
  .utility-section-status.error {
    color:var(--acc);
    border-color:rgba(255,77,28,0.28);
    background:rgba(255,77,28,0.10);
  }
  .utility-section-chevron {
    font-size:12px;
    color:var(--muted);
    transition:transform 0.18s ease;
  }
  .utility-section.collapsed .utility-section-chevron {
    transform:rotate(-90deg);
  }
  .utility-section-body {
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .utility-session-actions {
    display:grid;
    gap:10px;
  }
  .utility-control-grid {
    display:grid;
    gap:10px;
  }
  .utility-session-asset-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .utility-visual-routing-card {
    margin-top:12px;
  }
  .utility-session-asset-field {
    display:grid;
    gap:8px;
    min-width:0;
  }
  .utility-session-select {
    width:100%;
    min-height:40px;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(255,255,255,0.04);
    color:var(--txt);
    font-size:11px;
    letter-spacing:0.04em;
    outline:none;
  }
  .utility-session-select:focus {
    border-color:rgba(255,77,28,0.45);
    box-shadow:0 0 0 1px rgba(255,77,28,0.24);
  }
  .utility-session-select:disabled {
    opacity:0.5;
    cursor:not-allowed;
  }
  .utility-inline-action-row {
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    gap:10px;
    align-items:center;
  }
  .utility-draw-actions {
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  }
  .utility-draw-space-switch {
    width:100%;
    justify-content:space-between;
  }
  .utility-draw-space-switch .surface-mode-btn {
    min-width:0;
    flex:1 1 0;
  }
  .utility-draw-width-card {
    align-items:stretch;
  }
  .utility-draw-width-ui {
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:8px;
    min-width:120px;
  }
  #draw-width {
    width:120px;
    accent-color:var(--acc);
  }
  #draw-width-value {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:68px;
    min-height:28px;
    padding:0 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(255,255,255,0.04);
    color:var(--txt);
    font-size:9px;
    letter-spacing:0.12em;
    text-transform:uppercase;
  }
  .utility-toggle-action {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .utility-toggle-state {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:68px;
    min-height:28px;
    padding:0 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(255,255,255,0.04);
    font-size:9px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--muted);
    flex:0 0 auto;
  }
  .utility-action.active .utility-toggle-state {
    color:#fff;
    border-color:rgba(255,255,255,0.16);
    background:rgba(255,77,28,0.22);
  }
  .utility-inline-color {
    width:44px;
    height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    border:1px solid rgba(255,255,255,0.06);
    background:rgba(255,255,255,0.025);
    flex:0 0 auto;
    cursor:help;
  }
  /* ═══ MATCAP LIBRARY ═══ */
  .matcap-section { margin-top:6px; }
  .matcap-section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
  .matcap-label { font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); }
  .matcap-active-name { font-size:8px; letter-spacing:0.08em; text-transform:uppercase; color:var(--acc); }
  .matcap-tabs { display:flex; gap:4px; margin-bottom:8px; }
  .matcap-tab { border:none; border-radius:999px; padding:4px 10px; background:rgba(255,255,255,0.04); color:var(--muted); font-family:'DM Mono',monospace; font-size:8px; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; transition:all 0.12s; }
  .matcap-tab:hover { color:var(--txt); }
  .matcap-tab.active { background:rgba(255,77,28,0.10); color:var(--acc); }
  .matcap-grid { display:flex; gap:6px; flex-wrap:wrap; }
  .matcap-swatch { width:44px; height:44px; border-radius:10px; border:2px solid var(--bdr); cursor:pointer; transition:border-color 0.15s, transform 0.15s, box-shadow 0.15s; overflow:hidden; position:relative; }
  .matcap-swatch:hover { border-color:color-mix(in srgb, var(--acc) 48%, var(--bdr)); transform:translateY(-1px); }
  .matcap-swatch.active { border-color:var(--acc); box-shadow:0 0 0 1px var(--acc), 0 4px 12px rgba(255,77,28,0.16); }
  .matcap-swatch canvas { width:100%; height:100%; display:block; }
  .matcap-swatch-off { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:var(--sur); font-family:'DM Mono',monospace; font-size:7px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }
  .matcap-swatch.active .matcap-swatch-off { color:var(--acc); }

  .utility-color-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
  .utility-color-grid > .utility-color-card:only-child {
    grid-column:1 / -1;
  }
  .utility-color-card {
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:center;
    gap:12px;
    min-height:72px;
    padding:14px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,0.06);
    background:rgba(255,255,255,0.025);
  }
  .utility-color-meta {
    display:flex;
    flex-direction:column;
    gap:5px;
    min-width:0;
    overflow:hidden;
  }
  .utility-field-label {
    font-size:10px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--txt);
    width:100%;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .utility-field-label.utility-help-anchor {
    display:block;
  }
  .utility-field-copy {
    font-size:10px;
    color:var(--muted);
    line-height:1.5;
  }
  .utility-color-input {
    width:34px;
    height:34px;
    border-radius:999px;
    border:2px solid var(--bdr);
    cursor:pointer;
    background:none;
    padding:0;
    overflow:hidden;
    -webkit-appearance:none;
    flex:0 0 auto;
    justify-self:end;
  }
  .utility-inline-color .utility-color-input {
    justify-self:auto;
  }
  .utility-color-input::-webkit-color-swatch-wrapper { padding:0; }
  .utility-color-input::-webkit-color-swatch { border:none; border-radius:999px; }
  .utility-color-input:disabled {
    opacity:0.35;
    cursor:not-allowed;
  }
  .utility-texture-card {
    gap:12px;
  }
  .material-slot-card {
    gap:12px;
  }
  .mesh-slot-empty {
    padding:14px 16px;
    border-radius:14px;
    border:1px dashed rgba(255,255,255,0.10);
    background:rgba(255,255,255,0.02);
    color:var(--muted);
    font-size:11px;
    line-height:1.6;
  }
  .mesh-slot-list {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:10px;
  }
  .mesh-slot-btn {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    width:100%;
    padding:12px 14px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(255,255,255,0.03);
    color:var(--txt);
    cursor:pointer;
    text-align:left;
    transition:border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
  }
  .mesh-slot-btn:hover {
    border-color:rgba(255,255,255,0.16);
    background:rgba(255,255,255,0.05);
    transform:translateY(-1px);
  }
  .mesh-slot-btn.active {
    border-color:rgba(255,77,28,0.4);
    background:rgba(255,77,28,0.08);
    box-shadow:0 0 0 1px rgba(255,77,28,0.12) inset;
  }
  .mesh-slot-btn:disabled {
    opacity:0.6;
    cursor:not-allowed;
    transform:none;
  }
  .mesh-slot-head {
    width:100%;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
  }
  .mesh-slot-name {
    font-size:11px;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--txt);
    line-height:1.4;
  }
  .mesh-slot-index {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:24px;
    height:24px;
    padding:0 8px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(255,255,255,0.04);
    color:var(--muted);
    font-size:9px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    flex:0 0 auto;
  }
  .mesh-slot-btn.active .mesh-slot-index {
    color:var(--acc);
    border-color:rgba(255,77,28,0.28);
    background:rgba(255,77,28,0.12);
  }
  .mesh-slot-detail {
    display:none;
  }
  .mesh-slot-chip-row { display:none; }
  .utility-texture-list {
    display:grid;
    gap:12px;
  }
  .utility-texture-slot {
    width:100%;
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:14px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(255,255,255,0.02);
    color:var(--txt);
    text-align:left;
  }
  .utility-texture-slot.disabled {
    opacity:0.78;
  }
  .utility-texture-slot.disabled .utility-texture-upload,
  .utility-texture-slot.disabled .utility-texture-toggle,
  .utility-texture-slot.disabled .utility-texture-uv-toggle,
  .utility-texture-slot.disabled input[type="range"],
  .utility-texture-slot.disabled input[type="color"],
  .utility-texture-slot.disabled .utility-texture-uv-field input {
    pointer-events:none;
  }
  .utility-texture-slot.ready {
    border-color:rgba(0,229,160,0.18);
    background:rgba(0,229,160,0.06);
  }
  .utility-texture-slot.warn {
    border-color:rgba(255,199,0,0.18);
    background:rgba(255,199,0,0.05);
  }
  .utility-texture-slot.alert {
    border-color:rgba(255,77,28,0.20);
    background:rgba(255,77,28,0.06);
  }
  .utility-texture-slot.dragover {
    border-color:rgba(255,77,28,0.34);
    background:rgba(255,77,28,0.10);
    box-shadow:0 0 0 1px rgba(255,77,28,0.16) inset;
  }
  .utility-texture-slot.ready .utility-texture-state {
    color:var(--green);
    border-color:rgba(0,229,160,0.22);
    background:rgba(0,229,160,0.10);
  }
  .utility-texture-slot.warn .utility-texture-state {
    color:var(--gold);
    border-color:rgba(255,199,0,0.22);
    background:rgba(255,199,0,0.10);
  }
  .utility-texture-slot.alert .utility-texture-state {
    color:var(--acc);
    border-color:rgba(255,77,28,0.24);
    background:rgba(255,77,28,0.12);
  }
  .utility-texture-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .utility-texture-actions {
    display:flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
  }
  .utility-texture-meta {
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
  }
  .utility-texture-thumb {
    width:42px;
    height:42px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.10);
    background-color:rgba(255,255,255,0.03);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    flex:0 0 auto;
    position:relative;
    overflow:hidden;
  }
  .utility-texture-thumb.empty {
    background-image:
      linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)),
      repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 8px, rgba(255,255,255,0.00) 8px 16px);
  }
  .utility-texture-thumb.empty::after {
    content:'';
    position:absolute;
    inset:9px;
    border-radius:8px;
    border:1px dashed rgba(255,255,255,0.12);
  }
  .utility-texture-thumb.filled {
    border-color:rgba(255,255,255,0.16);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05);
  }
  .utility-texture-label {
    font-size:10px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--txt);
  }
  .utility-texture-upload {
    min-height:30px;
    padding:0 12px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.1);
    background:rgba(255,255,255,0.04);
    color:var(--txt);
    font-size:10px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    cursor:pointer;
  }
  .utility-texture-clear {
    width:30px;
    height:30px;
    padding:0;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.1);
    background:rgba(255,255,255,0.04);
    color:var(--muted);
    font-size:14px;
    line-height:1;
    cursor:pointer;
    flex:0 0 auto;
  }
  .utility-texture-clear:hover:not(:disabled) {
    color:var(--acc);
    border-color:rgba(255,77,28,0.24);
    background:rgba(255,77,28,0.08);
  }
  .utility-texture-upload:disabled,
  .utility-texture-toggle:disabled,
  .utility-texture-clear:disabled {
    opacity:0.45;
    cursor:not-allowed;
  }
  .utility-texture-controls {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }
  .utility-texture-toggle-row {
    gap:8px;
  }
  #mesh-slot-normal .utility-texture-toggle-row {
    gap:6px;
  }
  .utility-texture-toggle {
    min-height:30px;
    padding:0 12px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(255,255,255,0.03);
    color:var(--muted);
    font-size:10px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    cursor:pointer;
  }
  #mesh-slot-normal .utility-texture-toggle {
    min-height:24px;
    padding:0 8px;
    font-size:7px;
    letter-spacing:0.08em;
  }
  .utility-texture-toggle.active {
    color:var(--acc);
    border-color:rgba(255,77,28,0.26);
    background:rgba(255,77,28,0.10);
  }
  .utility-texture-color {
    min-height:30px;
    padding:4px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(255,255,255,0.03);
  }
  .utility-texture-color .utility-color-input {
    width:32px;
    height:32px;
    padding:0;
    border:none;
    background:transparent;
  }
  .utility-texture-slider-grid {
    display:grid;
    gap:10px;
  }
  .utility-texture-uv-grid {
    display:none;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
  }
  .utility-texture-uv-grid.open {
    display:grid;
  }
  .utility-texture-uv-toggle {
    min-height:30px;
    padding:0 12px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(255,255,255,0.03);
    color:var(--muted);
    font-size:9px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    cursor:pointer;
  }
  .utility-texture-uv-toggle.open {
    color:var(--txt);
    border-color:rgba(255,255,255,0.14);
    background:rgba(255,255,255,0.06);
  }
  .utility-texture-uv-chevron {
    transition:transform 0.18s ease;
  }
  .utility-texture-uv-toggle.open .utility-texture-uv-chevron {
    transform:rotate(180deg);
  }
  .utility-texture-uv-field {
    display:grid;
    grid-template-columns:1fr 72px;
    grid-template-rows:auto auto;
    gap:6px 10px;
    color:var(--muted);
    font-size:9px;
    letter-spacing:0.08em;
    text-transform:uppercase;
  }
  .utility-texture-uv-field > span:first-child {
    grid-column:1;
  }
  .utility-texture-uv-number {
    grid-column:2;
    width:100%;
    min-width:0;
    height:30px;
    padding:0 8px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(255,255,255,0.04);
    color:var(--txt);
    font-size:11px;
    text-align:right;
    appearance:textfield;
    -moz-appearance:textfield;
  }
  .utility-texture-uv-number::-webkit-outer-spin-button,
  .utility-texture-uv-number::-webkit-inner-spin-button {
    -webkit-appearance:none;
    margin:0;
  }
  .utility-texture-uv-range {
    grid-column:1 / -1;
    width:100%;
    min-width:0;
    accent-color:var(--acc);
  }
  .utility-texture-uv-rotation {
    grid-column:1 / -1;
  }
  .utility-texture-slider {
    display:grid;
    grid-template-columns:84px minmax(0, 1fr) 64px;
    align-items:center;
    gap:10px;
    color:var(--muted);
    font-size:10px;
    letter-spacing:0.06em;
    text-transform:uppercase;
  }
  .utility-texture-slider input[type="range"] {
    width:100%;
    accent-color:var(--acc);
  }
  .utility-texture-number {
    width:100%;
    min-width:0;
    height:30px;
    padding:0 8px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(255,255,255,0.04);
    color:var(--txt);
    font-size:11px;
    text-align:right;
    appearance:textfield;
    -moz-appearance:textfield;
  }
  .utility-texture-number::-webkit-outer-spin-button,
  .utility-texture-number::-webkit-inner-spin-button {
    -webkit-appearance:none;
    margin:0;
  }
  .utility-texture-foot {
    display:flex;
    justify-content:flex-end;
  }
  .utility-texture-state {
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:0 8px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(255,255,255,0.04);
    font-size:8px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--muted);
    flex:0 0 auto;
  }
  @media (max-width: 1180px) {
    .utility-color-grid {
      grid-template-columns:1fr;
    }
  }
  @media (max-width: 900px) {
    #utility-help-tooltip {
      display:none !important;
    }
  }
  #utility-session-badges {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .utility-preview-card {
    background:rgba(255,255,255,0.025);
    padding:14px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .utility-preview-empty {
    font-size:10px;
    color:var(--muted);
    line-height:1.7;
  }
  .utility-preview-header {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
  }
  .utility-preview-kicker {
    font-size:8px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .utility-preview-title {
    font-family:'Syne',sans-serif;
    font-size:18px;
    color:var(--txt);
    line-height:1;
  }
  .utility-preview-copy {
    font-size:10px;
    color:var(--muted);
    line-height:1.6;
  }
  .utility-preview-actions {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .utility-preview-action {
    min-height:34px;
    padding:0 12px;
    border-radius:999px;
    border:1px solid var(--bdr);
    background:var(--sur);
    color:var(--txt);
    cursor:pointer;
    font-family:'DM Mono',monospace;
    font-size:9px;
    letter-spacing:0.12em;
    text-transform:uppercase;
  }
  .utility-preview-action:hover {
    border-color:var(--acc);
  }
  .mesh-drop-review-card {
    gap:12px;
  }
  .mesh-drop-preview-list,
  .mesh-drop-issue-list {
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .mesh-drop-preview-item,
  .mesh-drop-issue-item {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(255,255,255,0.03);
  }
  .mesh-drop-preview-item {
    border-color:rgba(0,229,160,0.18);
    background:rgba(0,229,160,0.05);
  }
  .mesh-drop-issue-item.warn {
    border-color:rgba(255,199,0,0.18);
    background:rgba(255,199,0,0.05);
  }
  .mesh-drop-issue-item.alert {
    border-color:rgba(255,77,28,0.18);
    background:rgba(255,77,28,0.06);
  }
  .mesh-drop-preview-copywrap,
  .mesh-drop-issue-copywrap {
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .mesh-drop-preview-name,
  .mesh-drop-issue-name {
    font-size:10px;
    line-height:1.5;
    color:var(--txt);
    overflow-wrap:anywhere;
  }
  .mesh-drop-preview-meta,
  .mesh-drop-issue-meta {
    font-size:9px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--muted);
    line-height:1.5;
  }
  .mesh-drop-preview-pills,
  .mesh-drop-issue-pills {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
  }
  .mesh-drop-pill {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:22px;
    padding:0 8px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(255,255,255,0.04);
    color:var(--txt);
    font-size:8px;
    letter-spacing:0.12em;
    text-transform:uppercase;
  }
  .mesh-drop-pill-button {
    cursor:pointer;
  }
  .mesh-drop-pill.type-normal {
    border-color:rgba(77,159,255,0.22);
    color:var(--blue);
  }
  .mesh-drop-pill.type-color {
    border-color:rgba(0,229,160,0.22);
    color:var(--green);
  }
  .mesh-drop-pill.type-opacity {
    border-color:rgba(226,226,231,0.24);
    color:var(--txt);
  }
  .mesh-drop-pill.type-ao {
    border-color:rgba(255,199,0,0.22);
    color:var(--gold);
  }
  .mesh-drop-pill.type-roughness {
    border-color:rgba(255,143,77,0.24);
    color:#ffb77d;
  }
  .mesh-drop-pill.type-metalness {
    border-color:rgba(156,203,255,0.24);
    color:#b0d6ff;
  }
  .mesh-drop-pill.type-emissive {
    border-color:rgba(255,119,224,0.24);
    color:#ff9be8;
  }
  .mesh-drop-pill.type-orm {
    border-color:rgba(255,199,0,0.22);
    color:var(--gold);
  }
  .mesh-drop-pill.type-unresolved {
    border-color:rgba(255,255,255,0.10);
    color:var(--muted);
  }
  .mesh-drop-preview-actions,
  .mesh-drop-issue-actions {
    display:flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
  }
  .utility-qa-score {
    display:flex;
    align-items:flex-end;
    gap:10px;
  }
  .utility-qa-score-num {
    font-family:'Bebas Neue',sans-serif;
    font-size:50px;
    line-height:0.9;
    color:var(--txt);
  }
  .utility-qa-score-copy {
    font-size:10px;
    color:var(--muted);
    line-height:1.55;
  }
  .utility-chip-row {
  }
  .utility-chip {
  }
  .utility-chip.high {
    color:var(--acc);
    border-color:rgba(255,77,28,0.34);
    background:rgba(255,77,28,0.10);
  }
  .utility-chip.medium {
    color:var(--gold);
    border-color:rgba(255,199,0,0.32);
    background:rgba(255,199,0,0.09);
  }
  .utility-chip.low {
    color:var(--muted);
  }
  .utility-redline-tier {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
  }
  .utility-redline-statline {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
  }
  .utility-redline-run {
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .utility-redline-context-card {
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-bottom:12px;
  }
  .utility-redline-context-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(116px, 1fr));
    gap:10px;
  }
  .utility-redline-context-item {
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
    padding:12px 13px;
    border:1px solid rgba(255,255,255,0.06);
    border-radius:18px;
    background:rgba(255,255,255,0.03);
  }
  .utility-redline-context-label {
    font-size:9px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .utility-redline-context-value {
    display:block;
    color:var(--txt);
    font-size:12px;
    line-height:1.45;
    overflow-wrap:anywhere;
  }
  .utility-redline-context-note {
    font-size:10px;
    color:var(--muted);
    line-height:1.6;
  }
  .utility-redline-context-statusline {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 12px;
    border:1px solid rgba(255,255,255,0.06);
    border-radius:16px;
    background:rgba(255,255,255,0.03);
  }
  .utility-redline-copy {
    font-size:10px;
    color:var(--muted);
    line-height:1.65;
  }
  .utility-redline-copy strong {
    color:var(--txt);
    font-weight:600;
  }
  .utility-redline-report-shell {
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:12px;
    border-radius:18px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.06);
  }
  .utility-redline-report-summary {
    font-size:10px;
    line-height:1.6;
    color:rgba(244,244,240,0.88);
  }
  .utility-redline-scorecard {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
  }
  .utility-redline-scorecard-item {
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:12px;
    border-radius:18px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.06);
  }
  .utility-redline-scorecard-label {
    font-size:9px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .utility-redline-scorecard-value {
    font-size:24px;
    line-height:1;
    font-weight:700;
    color:var(--txt);
  }
  .utility-redline-scorecard-copy {
    font-size:10px;
    line-height:1.55;
    color:rgba(244,244,240,0.78);
  }
  .utility-redline-scorecard-strong .utility-redline-scorecard-value {
    color:#f2f4f7;
  }
  .utility-redline-scorecard-solid .utility-redline-scorecard-value {
    color:#dfe7f3;
  }
  .utility-redline-scorecard-mixed .utility-redline-scorecard-value {
    color:#ffc27a;
  }
  .utility-redline-scorecard-at_risk .utility-redline-scorecard-value {
    color:#ff9a90;
  }
  .utility-redline-rubric {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .utility-redline-rubric-chip {
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:28px;
    padding:0 10px;
    border-radius:999px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.08);
    font-size:10px;
    color:var(--muted);
  }
  .utility-redline-rubric-chip strong {
    color:var(--txt);
    font-weight:600;
  }
  .utility-redline-report-block {
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:12px;
    border-radius:18px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.06);
  }
  .utility-redline-report-title {
    font-size:9px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .utility-redline-report-list {
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .utility-redline-item {
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:10px 12px;
    border-radius:14px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.05);
  }
  .utility-redline-item-title {
    font-size:11px;
    color:var(--txt);
    font-weight:600;
    line-height:1.4;
  }
  .utility-redline-item-copy {
    font-size:10px;
    color:rgba(244,244,240,0.82);
    line-height:1.6;
  }
  .utility-redline-item-meta,
  .utility-redline-empty {
    font-size:9px;
    color:var(--muted);
    line-height:1.55;
  }
  .utility-redline-memory-line {
    font-size:10px;
    line-height:1.6;
    color:rgba(244,244,240,0.82);
  }
  .utility-redline-memory-line strong {
    color:var(--txt);
    font-weight:600;
    margin-right:6px;
  }
  [data-theme="light"] .utility-redline-context-value,
  [data-theme="light"] .utility-redline-item-title,
  [data-theme="light"] .utility-redline-rubric-chip strong,
  [data-theme="light"] .utility-redline-copy strong,
  [data-theme="light"] .utility-redline-memory-line strong {
    color:var(--txt);
  }
  [data-theme="light"] .utility-redline-context-note,
  [data-theme="light"] .utility-redline-context-label,
  [data-theme="light"] .utility-redline-scorecard-label,
  [data-theme="light"] .utility-redline-report-title,
  [data-theme="light"] .utility-redline-item-meta,
  [data-theme="light"] .utility-redline-empty {
    color:var(--muted);
  }
  [data-theme="light"] .utility-redline-copy,
  [data-theme="light"] .utility-redline-report-summary,
  [data-theme="light"] .utility-redline-scorecard-copy,
  [data-theme="light"] .utility-redline-item-copy,
  [data-theme="light"] .utility-redline-memory-line {
    color:rgba(18,19,22,0.78);
  }
  [data-theme="light"] .utility-redline-scorecard-strong .utility-redline-scorecard-value,
  [data-theme="light"] .utility-redline-scorecard-solid .utility-redline-scorecard-value {
    color:var(--txt);
  }
  #auto-redline-toggle.running,
  #auto-redline-toggle.ready {
    color:#fff;
    border-color:rgba(255,77,28,0.34);
    background:rgba(255,77,28,0.14);
    box-shadow:0 12px 28px rgba(255,77,28,0.16);
  }
  .utility-mini-list {
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .utility-mini-item {
    border-radius:14px;
    background:rgba(255,255,255,0.02);
    padding:10px 12px;
  }
  .utility-mini-item-head {
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:4px;
  }
  .utility-mini-sev {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:52px;
    height:20px;
    border:1px solid var(--bdr);
    border-radius:999px;
    font-size:8px;
    letter-spacing:0.12em;
    text-transform:uppercase;
  }
  .utility-mini-sev.high {
    color:var(--acc);
    border-color:rgba(255,77,28,0.34);
    background:rgba(255,77,28,0.10);
  }
  .utility-mini-sev.medium {
    color:var(--gold);
    border-color:rgba(255,199,0,0.32);
    background:rgba(255,199,0,0.10);
  }
  .utility-mini-sev.low {
    color:var(--muted);
  }
  .utility-mini-code {
    font-size:9px;
    letter-spacing:0.08em;
    color:var(--txt);
  }
  .utility-mini-copy {
    font-size:10px;
    color:var(--muted);
    line-height:1.55;
  }
  .utility-vf-media {
    display:grid;
    grid-template-columns:84px 1fr;
    gap:12px;
    align-items:start;
  }
  .utility-vf-thumb {
    width:84px;
    height:84px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,0.08);
    object-fit:cover;
    background:rgba(255,255,255,0.03);
  }
  .utility-vf-caption {
    font-size:10px;
    color:var(--txt);
    line-height:1.65;
  }
  .utility-spinner {
    width:14px;
    height:14px;
    border-radius:50%;
    border:2px solid var(--bdr);
    border-top-color:var(--acc);
    animation:qa-spin 0.8s linear infinite;
  }
  .utility-presence-list {
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .utility-presence-item {
    display:flex;
    align-items:center;
    gap:10px;
    border-radius:14px;
    background:rgba(255,255,255,0.02);
    padding:10px 12px;
  }
  .utility-presence-avatar {
    width:28px;
    height:28px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:10px;
    letter-spacing:0.08em;
    flex-shrink:0;
  }
  .utility-presence-meta {
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
  }
  .utility-presence-name {
    font-size:10px;
    color:var(--txt);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .utility-presence-role {
    font-size:8px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .utility-live-actions {
    margin-bottom:8px;
  }
  .utility-live-actions.utility-live-actions-join {
    grid-template-columns:minmax(0, 0.58fr) minmax(0, 0.42fr);
  }
  .utility-live-actions.utility-live-actions-present {
    grid-template-columns:minmax(0, 0.52fr) minmax(0, 0.48fr);
  }
  #utility-live-join-btn {
    max-width:100%;
  }
  .utility-live-item.self {
    border-color:rgba(255,255,255,0.14);
  }
  .utility-live-meta-row {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:4px;
  }
  .live-cursor {
    position:fixed;
    display:flex;
    align-items:center;
    gap:8px;
    transform:translate(-50%, -50%);
    z-index:83;
    filter:drop-shadow(0 8px 20px rgba(0,0,0,0.25));
    transition:left 90ms linear, top 90ms linear, opacity 300ms ease;
    pointer-events:none;
    will-change:left, top, opacity;
  }
  .live-cursor-dot {
    width:12px;
    height:12px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,0.9);
    flex-shrink:0;
  }
  .live-cursor.is-3d {
    gap:0;
    filter:none;
  }
  .live-cursor.is-3d .live-cursor-dot {
    opacity:0;
    transform:scale(0.4);
  }
  .live-cursor-label {
    padding:4px 9px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.16);
    background:rgba(11,14,18,0.9);
    color:#fff;
    font-size:9px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    white-space:nowrap;
    backdrop-filter:blur(12px);
  }
  .live-cursor.is-3d .live-cursor-label {
    transform:translateY(-18px);
    background:rgba(11,14,18,0.76);
  }
  :root[data-theme="light"] .live-cursor-label {
    background:rgba(250,247,241,0.96);
    color:#17161c;
    border-color:rgba(23,22,28,0.12);
  }
  :root[data-theme="light"] .live-cursor.is-3d .live-cursor-label {
    background:rgba(250,247,241,0.88);
  }
  .utility-panel-spacer {
    flex:1;
    min-height:4px;
  }

  #panel {
    left:auto;
    right:18px;
    top:124px;
    bottom:88px;
    width:var(--notes-panel-width);
    border:1px solid var(--bdr);
    border-radius:24px;
    box-shadow:-16px 0 36px var(--shadow);
    overflow:hidden;
    transform:translateX(0);
  }
  #panel.collapsed { transform:translateX(calc(100% + 18px)); }
  #panel-header {
    position:relative;
    z-index:1;
  }
  #panel-header .ui-panel-kicker {
    color:var(--muted);
  }
  #panel {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
      rgba(11,14,18,0.94);
  }
  #ann-list {
    padding:18px 16px 16px;
    gap:14px;
    background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.03));
  }
  #panel .ann-item {
    border:1px solid rgba(255,255,255,0.08);
    border-left-width:3px;
    border-radius:20px;
    background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    box-shadow:0 18px 34px rgba(0,0,0,0.18);
    padding:12px 13px;
  }
  #panel .ann-item:hover {
    background:linear-gradient(180deg, rgba(255,77,28,0.10), rgba(255,77,28,0.04));
  }
  #panel .ann-item.sel {
    background:linear-gradient(180deg, rgba(255,77,28,0.16), rgba(255,77,28,0.06));
    box-shadow:0 20px 36px rgba(255,77,28,0.10);
  }
  .panel-header-actions {
    display:flex;
    align-items:center;
    gap:10px;
    margin-left:auto;
    flex:0 0 auto;
  }
  #panel .count-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:28px;
    padding:0 10px;
    border-radius:999px;
    border:1px solid var(--bdr);
    background:var(--sur);
    color:var(--txt);
  }
  #feedback-action-bar,
  #export-bar {
    margin:0 16px 10px;
    padding:10px;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:16px;
    background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    flex-wrap:wrap;
    align-items:center;
    gap:6px;
  }
  #feedback-action-bar {
    padding-top:10px;
    border-top:1px solid rgba(255,255,255,0.08);
  }
  #feedback-action-bar .btn,
  #export-bar .btn {
    min-height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    padding:0 10px;
    font-size:9px;
    letter-spacing:0.08em;
  }
  #share-pw-row {
    margin:0 16px 16px;
    padding:10px;
    gap:8px;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:16px;
    background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  }
  #panel .btn,
  #panel .ghost-btn {
    box-shadow:none;
  }
  #note-modal {
    width:min(400px, calc(100vw - 24px));
    min-width:0;
    border-radius:24px;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
      var(--panel);
    border:1px solid var(--bdr);
    box-shadow:none;
    backdrop-filter:blur(18px);
    overflow:hidden;
  }
  #note-modal .modal-hdr {
    display:flex;
    align-items:flex-start;
    padding:18px 18px 16px;
    background:rgba(255,255,255,0.02);
    border-bottom:1px solid rgba(255,255,255,0.06);
  }
  #note-modal .modal-hdr .ui-panel-title {
    font-size:18px;
    line-height:1.02;
  }
  #note-modal .modal-hdr .ui-panel-kicker {
    font-size:8px;
    letter-spacing:0.18em;
    text-transform:uppercase;
  }
  #note-modal .modal-foot {
    padding:14px 16px 16px;
    gap:8px;
    background:rgba(255,255,255,0.02);
    border-top:1px solid rgba(255,255,255,0.06);
  }
  #note-modal #author-input,
  #note-modal #note-input {
    margin:12px 16px 0;
    border:1px solid var(--bdr);
    border-radius:16px;
    background:var(--sur);
  }
  #note-modal #author-input {
    margin-top:12px;
  }
  #note-modal #note-input {
    margin-top:12px;
    min-height:112px;
  }
  #note-modal .smart-fb-row,
  #note-modal .note-img-row,
  #note-modal .ai-suggestion-panel {
    margin:12px 16px 0;
    border:1px solid rgba(255,255,255,0.06);
    border-radius:18px;
    background:rgba(255,255,255,0.03);
  }
  #note-modal .ai-suggestion-panel {
    border-top:1px solid rgba(255,255,255,0.06);
    border-bottom:1px solid rgba(255,255,255,0.06);
    background:rgba(255,255,255,0.03);
  }
  #note-modal .modal-btn {
    border:1px solid var(--bdr);
    border-radius:999px;
    background:var(--sur);
    min-height:40px;
  }
  #note-modal .modal-btn.ok {
    background:var(--acc);
    border-color:var(--acc);
    color:#fff;
  }
  [data-theme="light"] #panel {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.72), rgba(244,241,235,0.92)),
      rgba(255,255,255,0.96);
    box-shadow:16px 0 36px rgba(92,84,72,0.12);
  }
  [data-theme="light"] #ann-list {
    background:linear-gradient(180deg, rgba(255,255,255,0.30), rgba(244,241,235,0.58));
  }
  [data-theme="light"] #panel .ann-item {
    border-color:rgba(211,206,198,0.9);
    background:linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244,241,235,0.88));
    box-shadow:0 14px 30px rgba(92,84,72,0.10);
  }
  [data-theme="light"] #panel .ann-item:hover {
    background:linear-gradient(180deg, rgba(255,77,28,0.14), rgba(255,77,28,0.06));
  }
  [data-theme="light"] #panel .ann-item.sel {
    background:linear-gradient(180deg, rgba(255,77,28,0.18), rgba(255,77,28,0.09));
    box-shadow:0 18px 34px rgba(255,77,28,0.12);
  }
  [data-theme="light"] #feedback-action-bar,
  [data-theme="light"] #export-bar,
  [data-theme="light"] #share-pw-row {
    border-color:rgba(211,206,198,0.9);
    background:linear-gradient(180deg, rgba(255,255,255,0.94), rgba(244,241,235,0.86));
  }
  [data-theme="light"] .mesh-slot-empty,
  [data-theme="light"] .mesh-slot-btn,
  [data-theme="light"] .utility-texture-slot {
    border-color:rgba(211,206,198,0.9);
    background:linear-gradient(180deg, rgba(255,255,255,0.94), rgba(244,241,235,0.86));
    box-shadow:0 12px 28px rgba(92,84,72,0.08);
  }
  [data-theme="light"] .mesh-slot-btn:hover,
  [data-theme="light"] .utility-texture-slot.dragover {
    background:linear-gradient(180deg, rgba(255,239,233,0.96), rgba(255,248,244,0.92));
    border-color:rgba(255,77,28,0.24);
  }
  [data-theme="light"] .mesh-slot-index,
  [data-theme="light"] .utility-texture-thumb,
  [data-theme="light"] .utility-texture-upload,
  [data-theme="light"] .utility-texture-clear,
  [data-theme="light"] .utility-texture-toggle,
  [data-theme="light"] .utility-texture-uv-toggle,
  [data-theme="light"] .viewer-float-slider,
  [data-theme="light"] .viewer-float-color {
    border-color:rgba(211,206,198,0.9);
    background:rgba(255,255,255,0.82);
  }
  [data-theme="light"] .utility-texture-thumb.empty {
    background-image:
      linear-gradient(135deg, rgba(199,191,181,0.28), rgba(255,255,255,0.66)),
      repeating-linear-gradient(135deg, rgba(184,176,167,0.18) 0 8px, rgba(255,255,255,0.00) 8px 16px);
  }
  [data-theme="light"] .utility-texture-thumb.empty::after {
    border-color:rgba(160,151,141,0.42);
  }
  [data-theme="light"] .utility-texture-state,
  [data-theme="light"] .mesh-slot-index {
    color:var(--txt);
  }
  [data-theme="light"] #note-modal {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.72)),
      var(--panel);
    border-color:var(--bdr);
    box-shadow:none;
  }
  [data-theme="light"] #note-modal .modal-hdr,
  [data-theme="light"] #note-modal .modal-foot {
    background:rgba(255,255,255,0.34);
    border-color:var(--bdr);
  }
  [data-theme="light"] #note-modal #author-input,
  [data-theme="light"] #note-modal #note-input,
  [data-theme="light"] #note-modal .smart-fb-row,
  [data-theme="light"] #note-modal .note-img-row,
  [data-theme="light"] #note-modal .ai-suggestion-panel,
  [data-theme="light"] #note-modal .modal-btn {
    border-color:rgba(211,206,198,0.9);
  }
  [data-theme="light"] #note-modal #author-input,
  [data-theme="light"] #note-modal #note-input,
  [data-theme="light"] #note-modal .smart-fb-row,
  [data-theme="light"] #note-modal .note-img-row {
    background:var(--sur);
  }
  [data-theme="light"] #note-modal .ai-suggestion-panel {
    background:rgba(0,0,0,0.02);
  }
  [data-theme="light"] #note-modal .modal-btn {
    background:var(--sur);
  }
  #panel .ann-head {
    flex-wrap:wrap;
    row-gap:7px;
    align-items:flex-start;
  }
  #panel .ann-author {
    min-width:0;
    flex:1 1 96px;
  }
  #panel .ann-actions {
    flex-wrap:wrap;
    justify-content:flex-end;
    max-width:100%;
  }
  #panel .ann-reply-btn .reply-label {
    white-space:nowrap;
  }
  #panel .layer-drop-zone .ann-item {
    width:100%;
  }
  #panel .layer-drop-zone .ann-actions {
    width:100%;
    margin-left:23px;
    justify-content:flex-end;
  }
  #panel .layer-drop-zone .ann-reply-btn {
    min-width:0;
    padding:0 8px !important;
  }
  #panel .layer-drop-zone .ann-like-btn {
    min-width:32px;
    padding:0 7px !important;
  }
  #panel-toggle {
    left:auto;
    right:calc(18px + var(--notes-panel-width) + 8px);
    top:140px;
    height:52px;
    width:26px;
    border-radius:12px 0 0 12px;
    background:var(--panel);
    backdrop-filter:blur(14px);
  }
  #panel-toggle.collapsed { left:auto; right:10px; }

  #toolbar {
    display:none;
  }

  #taskbar-hover-zone {
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    height:220px;
    display:block;
    z-index:94;
  }
  #bottombar,
  #snap-bottombar,
  #draw-bottombar,
  #live-bottombar {
    left:50%;
    right:auto !important;
    bottom:18px;
    width:min(calc(100vw - 72px), 1120px);
    min-height:46px;
    border:1px solid var(--bdr);
    border-top:1px solid var(--bdr);
    border-radius:18px;
    background:var(--panel);
    backdrop-filter:blur(16px);
    box-shadow:0 16px 36px rgba(0,0,0,0.18);
    transform:translateX(-50%);
    transition:opacity 0.22s ease, transform 0.22s ease;
    z-index:120;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
  }
  #bottombar::-webkit-scrollbar,
  #snap-bottombar::-webkit-scrollbar,
  #draw-bottombar::-webkit-scrollbar,
  #live-bottombar::-webkit-scrollbar {
    display:none;
  }
  #snap-bottombar {
    height:auto;
    min-height:54px;
    padding:8px 10px;
    border-top:1px solid var(--green);
    border-color:rgba(0,229,160,0.26);
  }
  #draw-bottombar,
  #live-bottombar {
    bottom:74px;
  }
  body.draw-toolbar-open.live-toolbar-open #draw-bottombar.active {
    bottom:74px;
  }
  body.draw-toolbar-open.live-toolbar-open #live-bottombar.active {
    bottom:156px;
  }
  body.taskbar-auto-hide:not(.taskbar-revealed) #bottombar,
  body.taskbar-auto-hide:not(.taskbar-revealed) #snap-bottombar.active,
  body.floating-toolbars-auto-hide:not(.floating-toolbars-revealed):not(.draw-toolbar-pinned) #draw-bottombar.active,
  body.floating-toolbars-auto-hide:not(.floating-toolbars-revealed):not(.live-toolbar-pinned) #live-bottombar.active {
    opacity:0;
    pointer-events:none;
    transform:translateX(-50%) translateY(28px);
  }
  body.draw-toolbar-pinned #draw-bottombar.active,
  body.live-toolbar-pinned #live-bottombar.active {
    opacity:1;
    pointer-events:auto;
    transform:translateX(-50%);
  }

  #taskbar-pin-btn {
    border-radius:999px;
  }

  #drop-zone {
    inset:84px 20px 74px 20px;
  }
  #btn-qa,
  #btn-visual-fb {
    display:none !important;
  }
  #user-chip {
    display:none !important;
  }
  #user-panel-backdrop.open {
    display:block;
    background:rgba(0,0,0,0.22);
    backdrop-filter:blur(4px);
  }
  #user-panel {
    top:84px;
    left:88px;
    right:auto;
    bottom:88px;
    height:auto;
    width:320px;
    border-left:none;
    border-right:1px solid var(--bdr);
    border-radius:24px;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
      var(--panel);
    box-shadow:none;
    backdrop-filter:blur(18px);
    transform:translateX(calc(-100% - 26px));
  }
  #user-panel.open {
    transform:translateX(0);
  }
  #account-overlay {
    align-items:stretch;
    justify-content:flex-start;
    padding:84px 0 88px 88px;
    background:rgba(0,0,0,0.22);
    backdrop-filter:blur(4px);
  }
  #account-box {
    width:440px;
    max-height:none;
    height:calc(100vh - 172px);
    border-radius:24px;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
      var(--panel);
    box-shadow:none;
    backdrop-filter:blur(18px);
  }

  [data-theme="light"] .utility-rail {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.62)),
      var(--panel);
    box-shadow:0 24px 48px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.55);
  }
  [data-theme="light"] #utility-panel-toggle,
  [data-theme="light"] #mesh-panel-toggle,
  [data-theme="light"] #render-settings-toggle,
  [data-theme="light"] #draw-panel-toggle,
  [data-theme="light"] #auto-redline-toggle,
  [data-theme="light"] #live-panel-toggle,
  [data-theme="light"] #scene-panel-toggle,
  [data-theme="light"] #account-rail-toggle,
  [data-theme="light"] .utility-theme-btn {
    background:rgba(255,255,255,0.74);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.7);
  }
  [data-theme="light"] .utility-rail-btn::before,
  [data-theme="light"] .utility-theme-btn::before {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.86), rgba(245,244,241,0.96)),
      var(--sur2);
    box-shadow:0 14px 28px rgba(0,0,0,0.12);
  }
  [data-theme="light"] #user-panel,
  [data-theme="light"] #account-box {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.72)),
      var(--panel);
    box-shadow:none;
  }

  body.ui-mode-reviewer #pipeline-wrap,
  body.ui-mode-reviewer #load-btn,
  body.ui-mode-reviewer #new-session-btn,
  body.ui-mode-reviewer #activate-pro-btn,
  body.ui-mode-reviewer #export-bar .btn:not(#btn-share),
  body.ui-mode-reviewer .bb-item {
    display:none !important;
  }
  body.ui-mode-artist #pipeline-wrap,
  body.ui-mode-artist #load-btn,
  body.ui-mode-artist #new-session-btn {
    display:flex;
  }
  #presence-bar {
    display:none !important;
  }
  body.snap-mode #taskbar-hover-zone,
  body.snap-mode #bottombar,
  body.snap-mode #toolbar,
  body.snap-mode #draw-bottombar,
  body.snap-mode #live-bottombar {
    display:none !important;
  }
  body.snap-mode #snap-bottombar.active {
    opacity:1 !important;
    pointer-events:auto !important;
    transform:translateX(-50%) !important;
  }
}

@media (max-width: 900px) {
  body {
    --mobile-utility-rail-height:72px;
    --mobile-shell-gap:10px;
    --mobile-bottom-stack:calc(env(safe-area-inset-bottom, 0px) + var(--mobile-utility-rail-height) + var(--mobile-shell-gap));
  }

  #taskbar-hover-zone,
  #taskbar-pin-btn {
    display:none !important;
  }

  #surface-mode-switch {
    display:inline-flex;
    flex:0 0 auto;
    min-width:0;
  }

  #utility-corner {
    position:fixed;
    left:10px;
    right:10px;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 10px);
    z-index:132;
    display:flex !important;
    justify-content:center;
    pointer-events:none;
  }

  .utility-rail {
    width:min(100%, 680px);
    display:flex;
    flex-direction:row;
    align-items:stretch;
    gap:8px;
    padding:8px 10px;
    border-radius:22px;
    border:1px solid var(--bdr);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)),
      var(--panel);
    backdrop-filter:blur(16px);
    overflow-x:auto;
    scrollbar-width:none;
    pointer-events:auto;
  }
  .utility-rail::-webkit-scrollbar {
    display:none;
  }

  #utility-panel-toggle,
  #mesh-panel-toggle,
  #render-settings-toggle,
  #draw-panel-toggle,
  #auto-redline-toggle,
  #live-panel-toggle,
  #scene-panel-toggle,
  #account-rail-toggle {
    position:relative;
    width:56px;
    min-width:56px;
    height:56px;
    padding:8px 6px 7px;
    border-radius:16px;
    background:var(--sur);
    border:1px solid var(--bdr);
    color:var(--txt);
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    box-shadow:none;
  }
  #utility-panel-toggle.active,
  #mesh-panel-toggle.active,
  #render-settings-toggle.active,
  #draw-panel-toggle.active,
  #auto-redline-toggle.active,
  #live-panel-toggle.active,
  #scene-panel-toggle.active,
  #account-rail-toggle.active {
    color:#fff;
    border-color:rgba(255,77,28,0.34);
    background:rgba(255,77,28,0.14);
  }

  .utility-rail-btn::before {
    content:attr(data-rail-label);
    position:static;
    opacity:1;
    transform:none;
    min-height:0;
    padding:0;
    border:none;
    background:none;
    color:var(--muted);
    font-family:'DM Mono',monospace;
    font-size:8px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    line-height:1;
    white-space:nowrap;
  }
  .utility-rail-btn.active::before {
    color:#fff;
  }
  .utility-rail-icon {
    width:18px;
    height:18px;
  }
  .utility-rail-divider,
  .utility-theme-btn {
    display:none !important;
  }
  #live-panel-toggle::after {
    position:absolute;
    top:9px;
    right:9px;
  }

  #utility-panel,
  #mesh-panel,
  #render-panel,
  #animation-panel {
    position:fixed;
    left:10px;
    right:10px;
    bottom:var(--mobile-bottom-stack);
    top:auto;
    width:auto;
    max-height:min(68vh, calc(var(--visual-viewport-height, 100vh) - 154px));
    display:flex !important;
    z-index:131;
    transform:translateY(0);
    transition:transform 0.28s ease, opacity 0.28s ease;
  }
  body.utility-panel-collapsed #utility-panel {
    transform:translateY(calc(100% + 18px));
    opacity:0;
    pointer-events:none;
  }
  body.mesh-panel-collapsed #mesh-panel {
    transform:translateY(calc(100% + 18px));
    opacity:0;
    pointer-events:none;
  }
  body.animation-panel-collapsed #animation-panel {
    transform:translateY(calc(100% + 18px));
    opacity:0;
    pointer-events:none;
  }
  body.render-panel-collapsed #render-panel {
    transform:translateY(calc(100% + 18px));
    opacity:0;
    pointer-events:none;
  }
  #utility-panel-header,
  #mesh-panel-header,
  #render-panel-header {
    position:sticky;
    top:0;
    z-index:2;
  }
  #utility-panel-body,
  #mesh-panel-body,
  #render-panel-body {
    padding:14px;
    gap:14px;
  }
  .render-settings-grid,
  .render-settings-slider-grid {
    grid-template-columns:1fr;
  }

  #draw-bottombar,
  #live-bottombar {
    position:fixed;
    left:10px;
    right:10px !important;
    bottom:var(--mobile-bottom-stack);
    width:auto;
    max-height:min(62vh, calc(var(--visual-viewport-height, 100vh) - 154px));
    min-height:0;
    padding:14px;
    border:1px solid var(--bdr);
    border-radius:24px;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)),
      var(--panel);
    backdrop-filter:blur(16px);
    box-shadow:none;
    display:flex !important;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    overflow:auto;
    transform:translateY(calc(100% + 18px));
    transition:transform 0.24s ease, opacity 0.24s ease;
    opacity:0;
    pointer-events:none;
    z-index:131;
  }
  #draw-bottombar.active,
  #live-bottombar.active {
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  #draw-bottombar .viewer-float-actions,
  #live-bottombar .viewer-float-actions {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:flex-start;
  }
  #draw-bottombar .viewer-float-badge,
  #live-bottombar .viewer-float-badge {
    align-self:flex-start;
  }
  .viewer-float-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  #draw-bottombar .viewer-float-pin-btn,
  #live-bottombar .viewer-float-pin-btn {
    display:none;
  }
  #draw-bottombar .viewer-float-slider,
  #draw-bottombar .viewer-float-color {
    width:100%;
  }
  #live-bottombar .viewer-live-strip {
    width:100%;
  }

  [data-theme="light"] .utility-rail {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.68)),
      var(--panel);
  }
  [data-theme="light"] #utility-panel-toggle,
  [data-theme="light"] #mesh-panel-toggle,
  [data-theme="light"] #render-settings-toggle,
  [data-theme="light"] #draw-panel-toggle,
  [data-theme="light"] #auto-redline-toggle,
  [data-theme="light"] #live-panel-toggle,
  [data-theme="light"] #scene-panel-toggle,
  [data-theme="light"] #account-rail-toggle {
    background:rgba(255,255,255,0.82);
  }
}

@media (max-width: 600px) {
  #panel {
    height:min(68vh, calc(var(--visual-viewport-height, 100vh) - 126px));
    max-height:min(68vh, calc(var(--visual-viewport-height, 100vh) - 126px));
  }
  #panel-header {
    padding:12px 12px 10px;
  }
  .panel-header-actions {
    gap:6px;
  }
  .panel-add-layer-btn {
    min-height:28px;
    padding:0 10px;
    font-size:8px !important;
  }
  .ann-filter-bar {
    padding:8px 12px 0;
    gap:4px;
  }
  .ann-filter-pill {
    font-size:8px;
    padding:0 9px;
    min-height:24px;
    line-height:24px;
  }
  #ann-list {
    padding:10px 10px 12px;
    gap:10px;
    overscroll-behavior:contain;
  }
  #panel .ann-item {
    padding:11px 12px;
    border-radius:18px;
  }
  #panel .ann-head {
    row-gap:6px;
  }
  #panel .ann-author {
    max-width:100%;
  }
  #panel .ann-text {
    font-size:11px;
    line-height:1.58;
  }
  #feedback-action-bar,
  #export-bar,
  #share-pw-row {
    margin:0 10px 8px;
    padding:8px;
    gap:6px;
    border-radius:14px;
  }
  #feedback-action-bar .btn,
  #export-bar .btn {
    min-height:32px;
    padding:0 9px;
    font-size:8px;
    letter-spacing:0.08em;
    flex:1 1 calc(50% - 6px);
  }
  #feedback-action-bar #feedback-paint-btn,
  #feedback-action-bar #feedback-clear-btn,
  #export-bar #btn-share {
    flex-basis:100%;
  }
  #export-bar {
    padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px));
  }

  #note-modal {
    max-height:min(78vh, calc(var(--visual-viewport-height, 100vh) - 72px));
  }
  #note-modal .modal-hdr {
    position:sticky;
    top:0;
    z-index:2;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:14px 14px 12px;
  }
  #note-modal .modal-hdr .ui-panel-head-copy {
    min-width:0;
  }
  #note-modal-close {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:32px;
    min-height:32px;
    touch-action:manipulation;
    flex:0 0 auto;
  }
  #note-modal #author-input,
  #note-modal #note-input,
  #note-modal .smart-fb-row,
  #note-modal .note-img-row,
  #note-modal .ai-suggestion-panel {
    margin-left:14px;
    margin-right:14px;
  }
  #note-modal #author-input {
    margin-top:10px;
  }
  #note-modal #note-input {
    min-height:128px;
    max-height:30vh;
    margin-top:10px;
  }
  #note-modal .smart-fb-row,
  #note-modal .note-img-row,
  #note-modal .ai-suggestion-panel {
    margin-top:10px;
  }
  #note-modal .ai-sug-actions {
    flex-wrap:wrap;
  }
  #note-modal .ai-sug-actions button {
    flex:1 1 calc(50% - 6px);
    min-height:34px;
  }
  #note-modal .modal-foot {
    position:sticky;
    bottom:0;
    z-index:2;
    padding:12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  }

  #mesh-panel {
    max-height:min(78vh, calc(var(--visual-viewport-height, 100vh) - 126px));
  }
  #render-panel {
    max-height:min(78vh, calc(var(--visual-viewport-height, 100vh) - 126px));
  }
  #mesh-panel-body {
    padding:12px;
    gap:12px;
    overscroll-behavior:contain;
  }
  #render-panel-body {
    padding:12px;
    gap:12px;
    overscroll-behavior:contain;
  }
  .utility-control-grid {
    gap:8px;
  }
  .utility-inline-action-row {
    gap:8px;
    align-items:stretch;
  }
  .matcap-tabs {
    flex-wrap:wrap;
  }
  .matcap-grid {
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:8px;
  }
  .matcap-swatch {
    width:100%;
    height:auto;
    aspect-ratio:1;
  }
  .utility-color-grid {
    grid-template-columns:1fr;
    gap:8px;
  }
  .mesh-slot-list {
    grid-template-columns:1fr;
    gap:8px;
  }
  .utility-texture-slot {
    gap:10px;
    padding:12px;
  }
  .utility-texture-top {
    align-items:flex-start;
    flex-wrap:wrap;
    gap:10px;
  }
  .utility-texture-meta {
    width:100%;
  }
  .utility-texture-actions {
    width:100%;
    justify-content:space-between;
  }
  .utility-texture-upload {
    flex:1 1 auto;
    justify-content:center;
  }
  .utility-texture-controls {
    gap:8px;
  }
  .utility-texture-toggle-row {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
  }
  #mesh-slot-normal .utility-texture-toggle-row {
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
  .utility-texture-slider {
    grid-template-columns:1fr;
    gap:6px;
  }
  .utility-texture-number,
  .utility-texture-uv-number {
    text-align:left;
  }
  .utility-texture-uv-grid {
    grid-template-columns:1fr;
  }

  #live-bottombar {
    max-height:min(72vh, calc(var(--visual-viewport-height, 100vh) - 118px));
  }
  #live-bottombar .viewer-float-actions {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
    align-items:stretch;
  }
  #live-bottombar .viewer-float-btn {
    min-height:40px;
    width:100%;
    justify-content:center;
  }
  #utility-live-presenter-banner,
  #utility-live-participants {
    grid-column:1 / -1;
  }
  #utility-live-presenter-banner {
    min-height:38px;
    white-space:normal;
    line-height:1.45;
    padding:8px 12px;
  }
  #utility-live-participants.viewer-live-strip {
    margin-left:0;
    flex-wrap:wrap;
    overflow:visible;
    min-height:0;
    gap:8px;
  }
  .viewer-live-avatar {
    width:34px;
    height:34px;
  }
  .render-settings-head {
    flex-direction:column;
    align-items:stretch;
  }
  .render-settings-reset {
    width:100%;
  }
  .render-settings-slider {
    grid-template-columns:1fr;
    align-items:flex-start;
    padding:12px 14px;
  }
  .render-settings-slider strong {
    justify-self:flex-end;
  }

  #mobile-menu-toggle {
    width:38px;
    height:38px;
    min-width:38px;
    padding:0;
    border-radius:12px;
    border:1px solid var(--bdr);
    background:var(--sur);
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    flex:0 0 auto;
  }
  #mobile-menu-toggle.active {
    border-color:rgba(255,77,28,0.34);
    background:rgba(255,77,28,0.12);
    color:#fff;
  }
  .mobile-menu-line {
    width:15px;
    height:1.5px;
    border-radius:999px;
    background:currentColor;
    display:block;
  }
  #mobile-menu-backdrop {
    position:fixed;
    inset:0;
    z-index:133;
    background:rgba(0,0,0,0.22);
    backdrop-filter:blur(4px);
    opacity:0;
    pointer-events:none;
    transition:opacity 0.2s ease;
  }
  body.mobile-menu-open #mobile-menu-backdrop {
    opacity:1;
    pointer-events:auto;
  }
  #mobile-session-menu {
    display:block;
    position:fixed;
    top:calc(env(safe-area-inset-top, 0px) + 58px);
    left:10px;
    right:10px;
    z-index:134;
    opacity:0;
    pointer-events:none;
    transform:translateY(-8px);
    transition:opacity 0.2s ease, transform 0.2s ease;
  }
  body.mobile-menu-open #mobile-session-menu {
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
  }
  .mobile-session-menu-card {
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:12px;
    border-radius:20px;
    border:1px solid var(--bdr);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
      var(--panel);
    backdrop-filter:blur(16px);
  }
  .mobile-session-menu-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
  }
  .mobile-session-menu-copy {
    min-width:0;
  }
  .mobile-session-menu-kicker {
    font-size:8px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .mobile-session-menu-title {
    margin-top:3px;
    font-family:'Syne',sans-serif;
    font-size:14px;
    color:var(--txt);
  }
  .mobile-session-menu-close {
    min-width:32px;
    min-height:32px;
  }
  .mobile-session-menu-meta {
    font-size:10px;
    line-height:1.5;
    color:var(--muted);
    word-break:break-word;
  }
  .mobile-session-menu-field {
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .mobile-session-menu-label {
    font-size:8px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--muted);
  }
  #mobile-session-name-input,
  #mobile-pipeline-select {
    width:100%;
    min-height:40px;
    padding:0 12px;
    border-radius:14px;
    border:1px solid var(--bdr);
    background:var(--sur);
    color:var(--txt);
    outline:none;
    font-family:'DM Mono',monospace;
    font-size:11px;
  }
  .mobile-session-menu-item {
    width:100%;
    min-height:42px;
    padding:0 12px;
    border-radius:14px;
    border:1px solid var(--bdr);
    background:var(--sur);
    color:var(--txt);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    font-family:'DM Mono',monospace;
    font-size:10px;
    letter-spacing:0.08em;
    text-transform:uppercase;
  }
  .mobile-session-menu-item strong {
    font-size:8px;
    color:var(--muted);
    letter-spacing:0.12em;
    text-transform:uppercase;
  }
  .mobile-session-menu-item:disabled {
    opacity:0.55;
  }
  .mobile-session-menu-actions {
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  #utility-corner {
    left:10px;
    right:10px;
    top:auto;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 10px);
    z-index:134;
    justify-content:center;
    opacity:1;
    pointer-events:auto;
    transform:none;
    transition:none;
  }
  .utility-rail {
    width:100%;
    max-width:none;
    flex-direction:row;
    align-items:stretch;
    justify-content:flex-start;
    gap:8px;
    padding:8px 10px;
    overflow-x:auto;
  }
  #feedback-panel-toggle {
    display:inline-flex;
  }
  #scene-panel-toggle,
  #account-rail-toggle {
    display:none !important;
  }
  #utility-panel-toggle,
  #mesh-panel-toggle,
  #render-settings-toggle,
  #feedback-panel-toggle,
  #draw-panel-toggle,
  #auto-redline-toggle,
  #live-panel-toggle,
  #scene-panel-toggle,
  #account-rail-toggle,
  #sound-toggle {
    width:56px;
    min-width:56px;
    height:56px;
    padding:8px 6px 7px;
    border-radius:16px;
    flex-direction:column;
    justify-content:center;
    gap:5px;
  }
  .utility-rail-btn::before {
    font-size:8px;
    letter-spacing:0.12em;
  }
  .utility-rail-divider,
  .utility-theme-btn,
  #sound-toggle {
    display:none !important;
  }
  #live-panel-toggle::after {
    top:9px;
    right:9px;
    transform:none;
  }
  .viewer-float-close,
  #mobile-feedback-close {
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  #mobile-feedback-close {
    min-width:32px;
    min-height:32px;
  }
  body:not(.panel-collapsed) #panel-toggle {
    opacity:0;
    pointer-events:none;
  }
  #panel-toggle {
    display:none !important;
  }
  #topbar {
    background:linear-gradient(180deg, rgba(42,42,45,0.88), rgba(42,42,45,0.72));
    backdrop-filter:blur(16px);
  }
  #topbar .topbar-icon-btn {
    min-width:38px;
    width:38px;
    height:38px;
    border-radius:12px;
  }
  [data-theme="light"] #mobile-menu-toggle {
    background:rgba(255,255,255,0.82);
  }
[data-theme="light"] .mobile-session-menu-card {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.82)),
      var(--panel);
  }
}

#command-palette-overlay {
  position: fixed;
  inset: 0;
  z-index: 3100;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(18px, 4vw, 48px);
  background: rgba(8, 10, 13, 0.76);
}

#command-palette-overlay.open {
  display: flex;
}

#command-palette-box {
  width: min(760px, calc(100vw - 24px));
  max-height: min(78vh, 860px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,0.08);
  background: color-mix(in srgb, var(--panel, #171a1f) 90%, #0d1014 10%);
  color: var(--txt);
}

#command-palette-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

#command-palette-title-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#command-palette-kicker {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

#command-palette-title {
  font-size: 18px;
  letter-spacing: 0.01em;
  color: var(--txt);
}

#command-palette-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--sur2);
}

#command-palette-search-icon {
  font-size: 16px;
  color: var(--muted);
}

#command-palette-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--txt);
  font-size: 14px;
  letter-spacing: 0.01em;
}

#command-palette-input::placeholder {
  color: var(--muted);
}

#command-palette-shortcut-hint {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

#command-palette-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  padding-right: 2px;
}

.command-palette-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  background: var(--sur);
  color: var(--txt);
  cursor: pointer;
}

.command-palette-item.active {
  border-color: rgba(255,154,31,0.38);
  background: color-mix(in srgb, var(--sur) 82%, rgba(255,154,31,0.14) 18%);
}

.command-palette-item-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.command-palette-item-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.command-palette-item-title {
  min-width: 0;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.command-palette-item-group {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.command-palette-item-subtitle {
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
}

.command-palette-item-arrow {
  flex: 0 0 auto;
  padding-top: 2px;
  font-size: 15px;
  color: var(--muted);
}

#command-palette-empty {
  display: none;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px dashed rgba(255,255,255,0.10);
  color: var(--muted);
  background: rgba(255,255,255,0.03);
}

#command-palette-empty.visible {
  display: block;
}

#command-palette-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

[data-theme="light"] #command-palette-overlay {
  background: rgba(232, 236, 240, 0.72);
}

[data-theme="light"] #command-palette-box {
  border-color: rgba(31, 37, 46, 0.10);
  background: color-mix(in srgb, #f4f1eb 92%, white 8%);
}

[data-theme="light"] #command-palette-search-row,
[data-theme="light"] .command-palette-item,
[data-theme="light"] #command-palette-shortcut-hint,
[data-theme="light"] .command-palette-item-group,
[data-theme="light"] #command-palette-empty {
  border-color: rgba(31, 37, 46, 0.10);
}

@media (max-width: 900px) {
  #command-palette-overlay {
    align-items: flex-end;
    padding: 12px;
  }

  #command-palette-box {
    width: 100%;
    max-height: min(82vh, 720px);
    border-radius: 24px 24px 18px 18px;
    padding: 16px;
  }

  #command-palette-search-row {
    min-height: 52px;
  }

  #command-palette-shortcut-hint {
    display: none;
  }

  .command-palette-item-subtitle {
    font-size: 10px;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  #utility-panel,
  #mesh-panel,
  #render-panel,
  #draw-bottombar,
  #live-bottombar {
    max-height:min(35vh, calc(var(--visual-viewport-height, 100vh) - 126px));
  }
}