/* ── Design Tokens ── */
:root {
  --bg:                 #10141d;
  --surface:            rgba(20, 26, 37, 0.93);
  --surface-hi:         rgba(255, 255, 255, 0.05);
  --border:             #20293a;
  --primary:            #00b4d8;
  --primary-dim:        rgba(0, 180, 216, 0.15);
  --primary-hi:         #0096c7;
  --text:               #e4e4e7;
  --text-2:             #8fa0b5;
  --text-3:             #3a4759;
  --bar-h:              58px;
  --mode-h:             62px;
  --r:                  10px;
  --r-sm:               7px;
  --panel-bg:           #151b26;
  --panel-border-color: #20293a;
}

/* ── Light Theme ── */
[data-theme="light"] {
  --bg:          #d8d8dc;
  --surface:     rgba(255,255,255,0.94);
  --surface-hi:  rgba(0,0,0,0.04);
  --border:      rgba(0,0,0,0.09);
  --text:        #1c1c24;
  --text-2:      #5a5a6e;
  --text-3:      #aaaabc;
  --primary:     #2563eb;
  --primary-dim: rgba(37,99,235,0.12);
  --primary-hi:  #1d4ed8;
  --panel-bg:           #e8e8ec;
  --panel-border-color: rgba(0,0,0,0.10);
}

/* ── Dark Theme (explicit — prevents @media light from bleeding) ── */
[data-theme="dark"] {
  --bg:                 #10141d;
  --surface:            rgba(20, 26, 37, 0.93);
  --surface-hi:         rgba(255, 255, 255, 0.05);
  --border:             #20293a;
  --primary:            #00b4d8;
  --primary-dim:        rgba(0, 180, 216, 0.15);
  --primary-hi:         #0096c7;
  --text:               #e4e4e7;
  --text-2:             #8fa0b5;
  --text-3:             #3a4759;
  --panel-bg:           #151b26;
  --panel-border-color: #20293a;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Noto Sans KR', 'Noto Sans JP', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  touch-action: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button { font-family: inherit; cursor: pointer; }
input[type="file"] { display: none; }

.hidden { display: none !important; }

/* Nodes in this compatibility layer stay in the DOM because the renderer and
   session loader still use them as state sources. They are intentionally not
   part of the simplified viewer interface. */
.runtime-settings-only {
  display: none !important;
}

/* ── Canvas ── */
#canvas-container {
  position: fixed;
  inset: 0;
  z-index: 1;
}

/* ── Top Bar ── */
#top-bar {
  position: fixed;
  /* Sit BELOW the system status bar so the bar's background doesn't fill the
     inset area as a flat strip. The canvas (z-index:1) shows through above,
     which looks natural on edge-to-edge Android 15+ and iOS notch devices. */
  top: env(safe-area-inset-top);
  left: env(safe-area-inset-left);
  right: env(safe-area-inset-right);
  z-index: 10;
  background: var(--surface);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  overflow: visible;  /* must be visible so dropdown menus appear below */
}

#top-bar-main {
  display: flex;
  align-items: center;
  height: var(--bar-h);
  padding: 0 4px;
  gap: 1.5px;
  overflow: visible;
}

#file-name-text {
  display: none;
}

/* #top-bar-actions override is below with scrollable version */

/* ── Icon Buttons ── */
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: none;
  border: none;
  color: var(--text-2);
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover  { background: var(--surface-hi); color: var(--text); }
.icon-btn:active { background: rgba(255,255,255,0.09); }
.icon-btn.active { background: var(--primary-dim); color: var(--primary); }

.icon-btn.sm { width: 32px; height: 32px; }
.icon-btn.sm svg { width: 15px; height: 15px; }

.icon-btn.primary {
  background: var(--primary);
  color: #fff;
  border-radius: var(--r-sm);
}
.icon-btn.primary:hover  { background: var(--primary-hi); color: #fff; }
.icon-btn.primary:active { background: #1d4ed8; }

/* ── Settings Panel ── */
#settings-panel {
  border-top: 1px solid var(--border);
  padding: 7px 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
#settings-panel.hidden { display: none; }

.setting-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.71rem;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
}
/* Text label before toggle */
.setting-item span { order: 1; }

/* ── Toggle switch ── */
.setting-item input[type="checkbox"] {
  order: 2;
  -webkit-appearance: none;
  appearance: none;
  width: 34px;
  height: 20px;
  border-radius: 10px;
  background: var(--text-3);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease;
  outline: none;
  border: none;
}
.setting-item input[type="checkbox"]::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  top: 2px;
  left: 2px;
  transition: transform 0.18s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
.setting-item input[type="checkbox"]:checked {
  background: var(--primary);
}
.setting-item input[type="checkbox"]:checked::before {
  transform: translateX(14px);
}

.setting-item input[type="color"] {
  width: 22px; height: 22px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}

#env-select {
  -webkit-appearance: none;
  appearance: none;
  background: var(--surface-hi);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.76rem;
  font-family: inherit;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  outline: none;
  order: 2;
}
#env-select option { background: #1a1a20; }

#env-row { display: none; }
#env-row.visible { display: flex; }

#model-info {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--text-3);
  letter-spacing: 0.01em;
}
#model-info.hidden { display: none; }

/* ── Empty State ── */
#empty-state {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  pointer-events: none;
}
#empty-state.hidden { display: none; }

#empty-icon {
  width: auto;
  height: 48px;
  color: var(--text-3);
  margin-bottom: 12px;
  display: flex;
  justify-content: center;
}
#empty-icon img {
  height: 100%;
  width: auto;
  max-width: 280px;
}

/* ── Theme Visibility Helpers ── */
.light-only {
  display: block !important;
}
.dark-only {
  display: none !important;
}
body.dark-theme .light-only {
  display: none !important;
}
body.dark-theme .dark-only {
  display: block !important;
}

.empty-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-2);
}
.empty-sub {
  font-size: 0.82rem;
  color: var(--text-2);
  opacity: 0.85;
}
.empty-sub strong { color: var(--text); font-weight: 600; }

/* ── Bottom Mode Bar ── */
#mode-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 10;
  height: var(--mode-h);
  background: var(--surface);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: stretch;
  padding: 0 4px;
  /* iOS PWA full-screen: clear the home-indicator area. Adds extra space
     below the bar on iPhone X+; 0 on desktop and non-PWA contexts. */
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: calc(4px + env(safe-area-inset-left));
  padding-right: calc(4px + env(safe-area-inset-right));
}

.mode-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--text-2);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: var(--r-sm);
  position: relative;
  transition: color 0.15s, background 0.15s;
  padding: 6px 0 8px;
}
.mode-btn svg { width: 22px; height: 22px; }
.mode-btn:active { background: var(--surface-hi); }
.mode-btn.active { color: var(--primary); }
.mode-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 20%; right: 20%;
  height: 2px;
  background: var(--primary);
  border-radius: 2px 2px 0 0;
}

/* ── Layer Sidebar ── */
.sidebar {
  position: fixed;
  top: 0; right: 0;
  width: 260px;
  height: 100%;
  background: rgba(12, 12, 16, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-left: 1px solid var(--border);
  z-index: 20;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
}
.sidebar:not(.hidden) { transform: translateX(0); }

.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--bar-h);
  padding: 0 12px 0 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-header h2 { font-size: 0.875rem; font-weight: 600; }

.text-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 0.66rem;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 5px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.text-btn:hover { background: var(--surface-hi); color: var(--text); }

#layer-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}

.layer-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;   /* needed for connector line pseudo-element */
  padding: 9px 10px;
  border-radius: var(--r-sm);
  transition: background 0.1s;
}
.layer-item:hover { background: var(--surface-hi); }

.layer-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  min-width: 0;
}
.layer-info span:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.layer-color {
  width: 11px; height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12);
}

.layer-toggle {
  background: none;
  border: none;
  color: var(--text);
  font-size: 0.95rem;
  padding: 4px;
  border-radius: 5px;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.layer-toggle.off { opacity: 0.2; }

/* ── Properties Floating Panel ── */
.prop-float-panel {
  position: fixed;
  top: 72px;
  right: 12px;
  width: 290px;
  height: 430px;
  min-width: 240px;
  min-height: 150px;
  resize: both;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border);
  border-radius: var(--r);
  z-index: 15;
  box-shadow: 0 4px 24px rgba(0,0,0,0.45);
  touch-action: none;
}
.prop-float-panel.hidden { display: none !important; }

#prop-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

.prop-drag-handle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 8px 7px 10px;
  border-bottom: 1px solid var(--border);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  border-radius: var(--r) var(--r) 0 0;
  background: rgba(255,255,255,0.03);
  flex-shrink: 0;
}
.prop-drag-handle:active { cursor: grabbing; }
.prop-drag-handle h3 { font-size: 0.76rem; font-weight: 600; color: var(--text); flex: 1; }

/* ── Properties panel tab switcher ── */
.prop-tabs {
  display: flex;
  gap: 2px;
  margin-right: 6px;
}
.prop-tab {
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 3px 5px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: background 0.15s, color 0.15s;
  line-height: 0;
}
.prop-tab.active {
  color: var(--text);
  background: rgba(255,255,255,0.12);
}
.prop-tab:hover:not(.active) { background: rgba(255,255,255,0.07); color: var(--text-2); }

/* ── Properties tab content (grid layout) ── */
.prop-grid {
  display: grid;
  grid-template-columns: 56px 1fr;
  row-gap: 5px;
  column-gap: 8px;
  font-size: 0.71rem;
  padding: 10px;
}
.prop-label { color: var(--text-2); font-weight: 500; }
.prop-value { color: var(--text); word-break: break-all; }

/* ── User Text tab content ── */
.prop-usertext {
  padding: 10px;
  font-size: 0.71rem;
}
.prop-usertext-table {
  width: 100%;
  border-collapse: collapse;
}
.prop-usertext-table th {
  text-align: left;
  padding: 3px 6px;
  color: var(--text-2);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  font-size: 0.68rem;
}
.prop-usertext-table td {
  padding: 4px 6px;
  color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  word-break: break-all;
  vertical-align: top;
}
.prop-usertext-table td:first-child {
  color: var(--text-2);
  font-weight: 500;
  min-width: 60px;
  max-width: 100px;
  width: 38%;
}
.prop-usertext-table tr:last-child td { border-bottom: none; }
.ut-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color 0.15s;
}
.ut-sortable:hover { color: var(--text); }
.ut-sort-active { color: var(--text); }
.ut-sort-idle { opacity: 0.35; font-size: 0.62rem; }
.prop-usertext-empty {
  color: var(--text-3);
  font-size: 0.7rem;
  text-align: center;
  padding: 20px 0;
}

/* ── Measurement List Panel ── */
.measure-list-panel {
  position: fixed;
  top: 72px;
  right: 12px;
  width: 260px;
  min-width: 220px;
  min-height: 120px;
  resize: both;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: var(--r);
  z-index: 14;
  padding: 8px 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
}
.measure-list-panel.hidden { display: none !important; }
#measurement-list-items {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  margin-bottom: 4px;
}
.measure-tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-2);
  font-size: 0.7rem;
  padding: 4px 0;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.measure-tab-btn:hover {
  color: var(--text);
}
.measure-tab-btn.active {
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  font-weight: 600;
}
.measure-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.measure-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  border-bottom: 1px solid var(--border);
  font-size: 0.76rem;
}
.measure-row:last-child { border-bottom: none; }
.measure-idx {
  width: 16px;
  text-align: center;
  color: var(--text-2);
  font-size: 0.68rem;
  flex-shrink: 0;
}
.measure-val {
  flex: 1;
  color: #10b981;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.measure-del-btn {
  background: transparent;
  border: none;
  color: var(--text-3);
  padding: 2px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.measure-del-btn:hover { color: #ef4444; background: rgba(239,68,68,0.12); }
.measure-list-hint {
  font-size: 0.65rem;
  color: var(--text-3);
  text-align: center;
  margin-top: 6px;
}

/* ── Loading Overlay ── */
#loading {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s;
}
#loading.hidden {
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s, visibility 0s linear 0.25s;
}

.spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(255,255,255,0.08);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  margin-bottom: 14px;
}
@keyframes spin { to { transform: rotate(360deg); } }

#loading-text {
  font-size: 0.82rem;
  color: var(--text-2);
  margin-bottom: 6px;
}

#loading-percent {
  min-width: 4ch;
  margin: 0 0 12px;
  color: var(--primary);
  font-size: 1.35rem;
  font-weight: 750;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

#progress-bar-container {
  width: min(240px, 66vw); height: 5px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
}
#progress-bar {
  height: 100%;
  width: 0%;
  background: var(--primary);
  border-radius: 999px;
  transition: width 0.15s ease;
}

/* ── Material Editor (inside Properties panel) ── */
.mat-divider {
  grid-column: 1 / -1;
  border: none;
  border-top: 1px solid var(--border);
  margin: 2px 0;
}
.mat-section-title {
  grid-column: 1 / -1;
  font-size: 0.63rem;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-top: 2px;
}
.mat-editor {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mat-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mat-label {
  font-size: 0.64rem;
  font-weight: 500;
  color: var(--text-2);
  width: 56px;
  flex-shrink: 0;
}
.mat-val {
  font-size: 0.64rem;
  color: var(--text-2);
  width: 32px;
  text-align: right;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.mat-row input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 3px;
  background: linear-gradient(to right,
    #3b82f6 0%,
    #3b82f6 var(--fill, 50%),
    rgba(255,255,255,0.14) var(--fill, 50%),
    rgba(255,255,255,0.14) 100%
  );
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  padding: 6px 0;
  box-sizing: content-box;
  background-clip: content-box;
}
/* properties panel range thumb inherits base */
.mat-row input[type="color"] {
  width: 26px; height: 22px;
  padding: 0 2px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.mat-footer {
  grid-column: 1 / -1;
  display: flex;
  gap: 4px;
}
.mat-footer button:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ── Color Grading Panel ── */
.cg-panel {
  position: fixed;
  bottom: 16px;
  right: 10px;
  width: 260px;
  min-width: 240px;
  min-height: 120px;
  resize: both;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border);
  border-radius: 12px;
  z-index: 20;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  transform: translateY(0);
  transition: opacity 0.2s, transform 0.2s;
}
.cg-panel.hidden { display: none !important; }

.cg-header {
  display: flex;
  align-items: center;
  padding: 5px 10px 5px 12px;
  border-bottom: 1px solid var(--border);
  gap: 6px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.cg-header:active {
  cursor: grabbing;
}
.cg-header h3 { font-size: 0.78rem; font-weight: 600; flex: 1; }

.cg-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.cg-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cg-label {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-2);
  width: 68px;
  flex-shrink: 0;
}
.cg-row input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 3px;
  background: linear-gradient(to right,
    #3b82f6 0%,
    #3b82f6 var(--fill, 50%),
    rgba(255,255,255,0.14) var(--fill, 50%),
    rgba(255,255,255,0.14) 100%
  );
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  padding: 7px 0;
  box-sizing: content-box;
  background-clip: content-box;
}
/* color grading panel range thumb inherits base */
.cg-val {
  font-size: 0.66rem;
  color: var(--primary);
  width: 26px;
  text-align: right;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ── Selection Dropdown ── */
.dropdown-wrap {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 4px;
  min-width: 168px;
  max-height: 80vh;
  overflow-y: auto;
  z-index: 50;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.dropdown-menu.hidden { display: none; }

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  background: none;
  border: none;
  color: var(--text-2);
  font-size: 0.68rem;
  font-weight: 500;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  text-align: left;
}
.dropdown-item svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ── Dropdown Specific Alignments for Mobile Safety ── */
#mode-dropdown,
#view-dropdown {
  left: 0;
  right: auto;
}

#zoom-dropdown,
#turntable-dropdown {
  left: 50%;
  transform: translateX(-50%);
  right: auto;
}

#select-dropdown,
#show-dropdown,
#tools-dropdown {
  right: 0;
  left: auto;
}
.dropdown-item:hover { background: var(--surface-hi); color: var(--text); }
.dropdown-item.active { color: var(--primary); background: var(--primary-dim); }

/* ── Turntable Dropdown ── */
.tt-menu {
  min-width: 190px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

.tt-label {
  font-size: 0.69rem;
  font-weight: 500;
  color: var(--text-2);
  width: 46px;
  flex-shrink: 0;
}

.tt-val {
  font-size: 0.67rem;
  color: var(--text-2);
  width: 26px;
  text-align: right;
  flex-shrink: 0;
}

.tt-toggle-btn {
  padding: 2px 10px; height: 22px;
  border-radius: 11px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 0.62rem; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.tt-toggle-btn:hover { background: var(--surface-hi); color: var(--text); }
.tt-toggle-btn.active {
  background: rgba(59,130,246,0.18);
  color: var(--primary);
  border-color: rgba(59,130,246,0.45);
}

/* Range slider (base — used by turntable + any unstyled range) */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  background: linear-gradient(to right,
    var(--primary) 0%,
    var(--primary) var(--fill, 50%),
    rgba(255,255,255,0.28) var(--fill, 50%),
    rgba(255,255,255,0.28) 100%
  );
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  padding: 7px 0;
  box-sizing: content-box;
  background-clip: content-box;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.1s, background-color 0.1s;
}
input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.15);
  background: #f3f4f6;
}
input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

/* Direction toggle buttons */
.tt-dir-group {
  display: flex;
  gap: 4px;
}

.tt-dir-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: none;
  border: 1px solid var(--border);
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tt-dir-btn svg { width: 15px; height: 15px; }
.tt-dir-btn:hover { background: var(--surface-hi); color: var(--text); }
.tt-dir-btn.active { background: var(--primary-dim); border-color: var(--primary); color: var(--primary); }

/* ── Background Gradient Controls ── */
.bg-ctrl { display:flex; align-items:center; gap:6px; }
.color-swatch {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--border);
  position: relative; overflow: hidden; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
}
.color-swatch:hover { transform: scale(1.12); box-shadow: 0 0 0 3px var(--primary-dim); }
.color-swatch input[type="color"] {
  position: absolute; inset: -4px;
  opacity: 0; cursor: pointer;
  width: calc(100% + 8px); height: calc(100% + 8px);
}
.grad-toggle-btn {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-hi); border: 1px solid var(--border);
  color: var(--text-2); font-size: 0.9rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.grad-toggle-btn.active { background: var(--primary-dim); color: var(--primary); border-color: var(--primary); }

/* ── Dropdown Trigger Buttons (Modern icon + label style) ── */
.dropdown-trigger-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 42px;
  height: 46px;
  border-radius: 10px;
  background: none;
  border: 1px solid transparent;
  color: var(--text-2);
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
  flex-shrink: 0;
  padding: 5px 2px 4px;
  cursor: pointer;
}
.dropdown-trigger-btn svg {
  width: 18px;
  height: 18px;
  pointer-events: none;
  flex-shrink: 0;
}
.dropdown-trigger-btn .btn-label {
  font-size: 0.45rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
  max-width: 38px;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  line-height: 1.15;
}
/* Hide any leftover old spans */
.dropdown-trigger-btn > span:not(.btn-label),
.dropdown-trigger-btn .arrow {
  display: none !important;
}
.dropdown-trigger-btn:hover {
  background: var(--surface-hi);
  border-color: var(--border);
  color: var(--text);
}
.dropdown-trigger-btn:active {
  transform: scale(0.94);
}
.dropdown-trigger-btn.active {
  background: var(--primary-dim);
  color: var(--primary);
  border-color: rgba(59,130,246,0.3);
}

/* Main-view edge switch. Keep the real checkbox available to the renderer so
   programmatic changes and touch interaction always share one source of truth. */
.main-edge-toggle {
  position: relative;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.main-edge-toggle > input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.main-edge-toggle:has(input:checked) {
  background: var(--primary-dim);
  color: var(--primary);
  border-color: rgba(59,130,246,0.3);
}
.main-edge-toggle:not(:has(input:checked)) {
  background: none;
  color: var(--text-2);
  border-color: transparent;
}
.main-edge-toggle:has(input:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* Walkthrough active — accent the View trigger so users can see they're
   still in walking mode at a glance, even when other UI is in focus. */
.dropdown-trigger-btn.walkthrough-on {
  position: relative;
  background: var(--primary-dim);
  color: var(--primary);
  border-color: rgba(59,130,246,0.45);
  box-shadow: 0 0 0 2px rgba(59,130,246,0.18);
}
.dropdown-trigger-btn.walkthrough-on::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34,197,94,0.7);
  animation: walkthrough-pulse 1.6s ease-in-out infinite;
}
@keyframes walkthrough-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.85); }
  50%      { opacity: 1.0;  transform: scale(1.0);  }
}
/* Top-bar layout groups */
#top-bar-left {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

#top-bar-center {
  display: flex;
  align-items: center;
  gap: 1.5px;
  flex: 1;
  justify-content: center;
  overflow: visible;   /* must be visible so dropdown menus appear below */
}

/* ── No-model disabled state: center toolbar + layer button ── */
#top-bar-center.no-model,
#btn-edges-main.no-model,
#bottom-view-tools-bar.no-model {
  pointer-events: none;
  opacity: 0.35;
}

#top-bar-right {
  display: flex;
  align-items: center;
  gap: 1.5px;
  flex-shrink: 0;
}

/* Top-bar actions — legacy fallback */
#top-bar-actions {
  display: contents;
}

/* ── Sliding Left Sidebar Panel (Premium Dark Blue) ── */
.left-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 290px;
  height: 100%;
  background: var(--panel-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-right: 1px solid var(--panel-border-color);
  z-index: 25;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: none;
}
.left-sidebar:not(.hidden) {
  transform: translateX(0);
  box-shadow: 10px 0 40px rgba(0, 0, 0, 0.45);
}

.left-sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--bar-h);
  padding: 0 16px;
  border-bottom: 1px solid var(--panel-border-color);
  flex-shrink: 0;
}
.left-sidebar-header h2 {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
}

.left-sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.left-sidebar-footer {
  padding: 14px 16px;
  flex-shrink: 0;
  border-top: 1px solid var(--panel-border-color);
  user-select: none;
}
.footer-logo {
  max-width: 126px;
  height: auto;
  opacity: 0.8;
  transition: opacity 0.15s ease;
}
.footer-logo:hover {
  opacity: 1;
}
.footer-logo.dark-only {
  display: none;
}
.footer-logo.light-only {
  display: block;
}
body.dark-theme .footer-logo.dark-only {
  display: block;
}
body.dark-theme .footer-logo.light-only {
  display: none;
}

.tab-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tab-section.hidden {
  display: none;
}

/* ── Tab Bar (Bottom of Sidebar) ── */
.left-sidebar-tabs {
  display: flex;
  height: 52px;
  border-top: 1px solid var(--panel-border-color);
  background: rgba(4, 7, 16, 0.95);
  flex-shrink: 0;
}
.left-tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  color: var(--text-2);
  font-size: 0.63rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.left-tab-btn svg {
  width: 15px;
  height: 15px;
}
.left-tab-btn:hover {
  color: var(--text);
  background: var(--surface-hi);
}
.left-tab-btn.active {
  color: var(--primary);
  background: rgba(59, 130, 246, 0.06);
}

/* ── Right Sliding Panels (Layer / Settings) ── */
.right-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 290px;
  height: 100%;
  background: var(--panel-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-left: 1px solid var(--panel-border-color);
  z-index: 25;
  display: flex;
  flex-direction: column;
  transform: translateX(105%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: none;
}
.right-panel.panel-open {
  transform: translateX(0);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.45);
}

.right-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--bar-h);
  padding: 0 16px;
  border-bottom: 1px solid var(--panel-border-color);
  flex-shrink: 0;
}
.right-panel-header h2 {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
}
.app-version-tag {
  margin-left: auto;
  margin-right: 8px;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-2);
  opacity: 0.7;
  letter-spacing: 0.02em;
  font-family: 'Noto Sans', sans-serif;
  user-select: none;
  position: relative;
  top: 1px;
}

.right-panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* ── File Tab Layout ── */
.file-actions-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.panel-action-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 10px;
  height: 32px;
  background: var(--surface-hi);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.panel-action-btn svg {
  width: 17px;
  height: 17px;
  color: var(--text-2);
  transition: color 0.15s;
}
.panel-action-btn:hover {
  background: var(--surface-hi);
  border-color: var(--border);
  transform: translateY(-1px);
}
.panel-action-btn:hover svg {
  color: var(--text);
}
.panel-action-btn:active {
  transform: translateY(1px);
}
.panel-action-btn.btn-primary {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-color: var(--primary) !important;
}
.panel-action-btn.btn-primary svg {
  color: #ffffff !important;
}
.panel-action-btn.btn-primary:hover {
  background: var(--primary-hi) !important;
  color: #ffffff !important;
  border-color: var(--primary-hi) !important;
}
.panel-action-btn.btn-primary:hover svg {
  color: #ffffff !important;
}

.panel-sub-card {
  background: var(--surface-hi);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sub-card-title {
  font-size: 0.58rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
  margin-bottom: 1px;
}
.info-content-text {
  font-size: 0.7rem;
  color: var(--text);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ── Layer Tab Layout ── */
#layer-list-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.panel-select {
  width: 100%;
  background: var(--surface-hi);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.65rem;
  padding: 4px 7px;
  border-radius: var(--r-sm);
  outline: none;
  font-family: inherit;
  cursor: pointer;
}
.panel-select option {
  background: var(--panel-bg);
  color: var(--text);
}

/* ── Settings Group Card ── */
.setting-group-card {
  background: var(--surface-hi);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── Background Color Grid ── */
.bg-pickers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 4px;
}
.picker-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.67rem;
  color: var(--text-2);
}
.color-swatch-container {
  width: 100%;
  height: 26px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s;
}
.color-swatch-container:hover {
  border-color: rgba(255, 255, 255, 0.3);
}
.color-swatch-container input[type="color"] {
  position: absolute;
  inset: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  opacity: 0;
  cursor: pointer;
}

/* ── Compact circular color pickers for background ── */
.bg-color-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}
.color-circle-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.color-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.15);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
}
.color-circle:hover {
  transform: scale(1.1);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.4);
}
.color-circle input[type="color"] {
  position: absolute;
  inset: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  opacity: 0;
  cursor: pointer;
}

/* ── Environment Preset Grid ── */
.env-preset-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.env-preset-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 2px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 0.55rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.env-preset-btn .env-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.env-preset-btn:hover { background: var(--surface-hi); color: var(--text); border-color: var(--border); }
.env-preset-btn.active { background: var(--primary-dim); color: var(--primary); border-color: rgba(59,130,246,0.4); }

#hdr-file-input { display: none; }
.hdr-upload-label {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px dashed var(--border);
  color: var(--text-2);
  font-size: 0.67rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  width: 100%;
  justify-content: center;
}
.hdr-upload-label:hover { background: var(--surface-hi); color: var(--text); }

/* ── Clipping Axis Buttons (X / Y / Z) ── */
.clip-axis-btns {
  display: flex;
  gap: 4px;
}
.clip-axis-btn {
  width: 28px; height: 22px;
  border-radius: 5px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 0.66rem;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Noto Sans', monospace;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.clip-axis-btn:hover { background: var(--surface-hi); color: var(--text); }
.clip-axis-btn.active { background: rgba(239,68,68,0.18); color: #ef4444; border-color: rgba(239,68,68,0.5); }

.clip-flip-btn {
  padding: 2px 8px; height: 22px;
  border-radius: 5px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 0.62rem; font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.clip-flip-btn:hover { background: var(--surface-hi); color: var(--text); }

.clip-reset-btn {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 5px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  color: var(--text-3);
  font-size: 0.78rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, color 0.12s;
  padding: 0;
}
.clip-reset-btn:hover { background: var(--surface-hi); color: var(--primary); }

/* ── Sky-Blue Visibility Toggles ── */
.toggles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2px 14px;
}
.setting-item-panel {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 32px;   /* touch-friendly minimum */
  font-size: 0.63rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  padding: 1px 0;
}
.setting-item-panel input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease;
  outline: none;
  border: none;
}
.setting-item-panel input[type="checkbox"]::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  top: 2px;
  left: 2px;
  transition: transform 0.18s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
/* Sky blue toggle background when checked */
.setting-item-panel input[type="checkbox"]:checked {
  background: #0ea5e9 !important;
}
.setting-item-panel input[type="checkbox"]:checked::before {
  transform: translateX(12px);
}

/* ── Sliders ── */
.sliders-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.slider-row {
  display: grid;
  grid-template-columns: 85px 1fr 45px;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.slider-label {
  font-size: 0.60rem;
  color: var(--text-2);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.slider-val {
  font-size: 0.60rem;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
  width: 100%;
}
.slider-row .panel-select {
  grid-column: span 2;
  width: 100%;
}
.sliders-grid input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  background: linear-gradient(to right,
    #3b82f6 0%,
    #3b82f6 var(--fill, 0%),
    rgba(255,255,255,0.14) var(--fill, 0%),
    rgba(255,255,255,0.14) 100%
  );
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  padding: 7px 0;
  box-sizing: border-box;
}

/* ── HTML Dynamic Layer List Items ── */
.layer-editable-name {
  background: none;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 500;
  outline: none;
  padding: 1px 3px;
  border-radius: 4px;
  width: 120px;
  transition: background 0.15s;
}
.layer-editable-name:focus {
  background: rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid var(--primary);
}

.layer-color-picker-trigger {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
  transition: transform 0.15s;
}
.layer-color-picker-trigger:hover {
  transform: scale(1.2);
}
.layer-color-picker-trigger input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* ── Named Views list items ── */
.named-views-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 0;
}
.dropdown-subtitle {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px 2px;
}
.dropdown-empty-msg {
  font-size: 0.72rem;
  color: var(--text-3);
  text-align: center;
  padding: 8px 0;
  display: block;
}

/* ── Interactive watermark (Floating bottom right) ── */
#byrhinoview-watermark {
  position: fixed;
  bottom: 16px;
  right: 20px;
  font-size: 0.68rem; /* 조금 더 작고 컴팩트하게 조율 */
  font-weight: 500;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.55); /* 어두운 배경에서 한층 더 선명하고 밝은 기본 색상 */
  z-index: 5;
  pointer-events: auto; /* Clickable link */
  font-family: 'Noto Sans', sans-serif;
  user-select: none;
  transition: color 0.2s;
}
#byrhinoview-watermark a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}
#byrhinoview-watermark a:hover {
  text-decoration: underline;
}
#byrhinoview-watermark:hover {
  color: rgba(255, 255, 255, 0.95); /* 어두운 배경에서 호버 시 매우 밝고 선명한 흰색 */
}
:not([data-theme="dark"]) #byrhinoview-watermark:hover {
  color: rgba(0, 0, 0, 0.85) !important; /* 밝은 배경에서 호버 시 더욱 또렷한 검은색 */
}
body.light-theme #byrhinoview-watermark:hover {
  color: rgba(0, 0, 0, 0.85) !important; /* 밝은 배경에서 호버 시 더욱 또렷한 검은색 */
}

/* ── Light Mode Color Overrides ── */
/* ── Light Mode Color Overrides (Prefers & Class based) ── */
@media (prefers-color-scheme: light) {
  /* Only apply when user hasn't explicitly chosen dark */
  :root:not([data-theme="dark"]) {
    --bg: #e8eaf0;
    --surface: rgba(255, 255, 255, 0.94);
    --surface-hi: rgba(0, 0, 0, 0.04);
    --border: rgba(0, 0, 0, 0.08);
    --primary: #2563eb;
    --primary-dim: rgba(37, 99, 235, 0.10);
    --primary-hi: #1d4ed8;
    --text: #1f2937;
    --text-2: #6b7280;
    --text-3: #9ca3af;
    /* Rhino-style cool neutral gray panel */
    --panel-bg: #e8e8ec;
    --panel-border-color: rgba(0,0,0,0.10);
  }
  :not([data-theme="dark"]) .left-sidebar-header h2 { color: #111827 !important; }
  :not([data-theme="dark"]) .left-tab-btn:hover {
    color: #111827 !important;
    background: rgba(0, 0, 0, 0.02) !important;
  }
  :not([data-theme="dark"]) .panel-action-btn {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
  }
  :not([data-theme="dark"]) .panel-action-btn.btn-primary {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
  }
  :not([data-theme="dark"]) .panel-action-btn:hover {
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
  }
  :not([data-theme="dark"]) .panel-action-btn.btn-primary:hover {
    background: var(--primary-hi) !important;
    border-color: var(--primary-hi) !important;
    color: #ffffff !important;
  }
  :not([data-theme="dark"]) .panel-action-btn:hover svg { color: #111827 !important; }
  :not([data-theme="dark"]) .panel-sub-card,
  :not([data-theme="dark"]) .setting-group-card {
    background: rgba(0, 0, 0, 0.015) !important;
    border-color: rgba(0, 0, 0, 0.04) !important;
  }
  :not([data-theme="dark"]) .panel-select {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
  }
  :not([data-theme="dark"]) .panel-select option { background: #ffffff !important; }
  :not([data-theme="dark"]) .setting-item-panel input[type="checkbox"]:not(:checked) { background: rgba(0, 0, 0, 0.08) !important; }
  :not([data-theme="dark"]) .sliders-grid input[type="range"] { background: rgba(0, 0, 0, 0.08) !important; }
  :not([data-theme="dark"]) .layer-editable-name { color: #1f2937 !important; }
  :not([data-theme="dark"]) .layer-editable-name:focus { background: rgba(0, 0, 0, 0.04) !important; }
  :not([data-theme="dark"]) #byrhinoview-watermark { color: rgba(0, 0, 0, 0.45) !important; }
  :not([data-theme="dark"]) #empty-state { color: #6b7280 !important; }

  /* Popups premium white styling */
  :not([data-theme="dark"]) .cg-panel,
  :not([data-theme="dark"]) .dropdown-menu {
    box-shadow: 0 8px 30px rgba(0,0,0,0.08) !important;
  }
  :not([data-theme="dark"]) .prop-float-panel {
    box-shadow: 0 4px 20px rgba(0,0,0,0.06) !important;
  }
  :not([data-theme="dark"]) .modal-box {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    color: #1f2937 !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.12) !important;
  }
  :not([data-theme="dark"]) .modal-header {
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
  }
  :not([data-theme="dark"]) .modal-header span,
  :not([data-theme="dark"]) .modal-header h3 {
    color: #1f2937 !important;
  }
  :not([data-theme="dark"]) #input-named-view-name,
  :not([data-theme="dark"]) #capture-w,
  :not([data-theme="dark"]) #capture-h,
  :not([data-theme="dark"]) #capture-size-select {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #1f2937 !important;
  }
  :not([data-theme="dark"]) .modal-row {
    color: #4b5563 !important;
  }
  :not([data-theme="dark"]) #loading {
    background: rgba(255, 255, 255, 0.75) !important;
  }
  :not([data-theme="dark"]) .spinner {
    border: 3px solid rgba(0, 0, 0, 0.06) !important;
    border-top-color: var(--primary) !important;
  }
  :not([data-theme="dark"]) #progress-bar-container {
    background: rgba(0, 0, 0, 0.06) !important;
  }
  input[type="range"] {
    background: rgba(0, 0, 0, 0.08) !important;
  }
}

/* Light Theme Class Overrides (Enforces Light mode on devices/webviews without prefers system sync) */
body.light-theme {
  --bg: #e8eaf0;
  --surface: rgba(255, 255, 255, 0.94);
  --surface-hi: rgba(0, 0, 0, 0.04);
  --border: rgba(0, 0, 0, 0.08);
  --primary: #2563eb;
  --primary-dim: rgba(37, 99, 235, 0.10);
  --primary-hi: #1d4ed8;
  --text: #1f2937;
  --text-2: #6b7280;
  --text-3: #9ca3af;
  --panel-bg: #e8e8ec;
  --panel-border-color: rgba(0,0,0,0.10);
}

body.dark-theme {
  /* Kept in sync with [data-theme="dark"] above so the body's --bg doesn't
     drift warm (#2a2b2f reads as brownish on AMOLED). */
  --bg:                 #10141d;
  --surface:            rgba(20, 26, 37, 0.93);
  --surface-hi:         rgba(255, 255, 255, 0.05);
  --border:             #20293a;
  --primary:            #00b4d8;
  --primary-dim:        rgba(0, 180, 216, 0.15);
  --primary-hi:         #0096c7;
  --text:               #e4e4e7;
  --text-2:             #8fa0b5;
  --text-3:             #3a4759;
  --panel-bg:           #151b26;
  --panel-border-color: #20293a;
}

body.light-theme .left-sidebar-header h2 { color: #111827 ; }
body.light-theme .left-tab-btn:hover {
  color: #111827 ;
  background: rgba(0, 0, 0, 0.02) ;
}
body.light-theme .panel-action-btn {
  background: rgba(0, 0, 0, 0.02) ;
  border-color: rgba(0, 0, 0, 0.06) ;
}
body.light-theme .panel-action-btn.btn-primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
}
body.light-theme .panel-action-btn:hover {
  background: rgba(0, 0, 0, 0.04) ;
  border-color: rgba(0, 0, 0, 0.12) ;
}
body.light-theme .panel-action-btn.btn-primary:hover {
  background: var(--primary-hi) !important;
  border-color: var(--primary-hi) !important;
  color: #ffffff !important;
}
body.light-theme .panel-action-btn:hover svg { color: #111827 ; }
body.light-theme .panel-sub-card, 
body.light-theme .setting-group-card {
  background: rgba(0, 0, 0, 0.015) ;
  border-color: rgba(0, 0, 0, 0.04) ;
}
body.light-theme .panel-select {
  background: rgba(0, 0, 0, 0.02) ;
  border-color: rgba(0, 0, 0, 0.06) ;
}
body.light-theme .panel-select option { background: #ffffff ; }
body.light-theme .setting-item-panel input[type="checkbox"]:not(:checked) { background: rgba(0, 0, 0, 0.08) ; }
body.light-theme .sliders-grid input[type="range"] { background: rgba(0, 0, 0, 0.08) ; }
body.light-theme .layer-editable-name { color: #1f2937 ; }
body.light-theme .layer-editable-name:focus { background: rgba(0, 0, 0, 0.04) ; }
body.light-theme #byrhinoview-watermark { color: rgba(0, 0, 0, 0.45) ; }
body.light-theme #empty-state { color: #6b7280 ; }
body.light-theme #loading {
  background: rgba(255, 255, 255, 0.75) ;
}
body.light-theme .spinner {
  border: 3px solid rgba(0, 0, 0, 0.06) ;
  border-top-color: var(--primary) ;
}
body.light-theme #progress-bar-container {
  background: rgba(0, 0, 0, 0.06) ;
}

/* ── Dark Mode Fixes ── */

/* Issue 7: Slider bar more visible in dark mode */
[data-theme="dark"] input[type="range"],
body.dark-theme input[type="range"] {
  background: linear-gradient(to right,
    var(--primary) 0%,
    var(--primary) var(--fill, 50%),
    rgba(255,255,255,0.32) var(--fill, 50%),
    rgba(255,255,255,0.32) 100%
  ) !important;
  background-clip: content-box !important;
}

/* Issue 8: Native <select> option text visible in dark mode */
[data-theme="dark"] select,
body.dark-theme select {
  background: #27272b;
  color: #e4e4e7;
  border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] select option,
body.dark-theme select option {
  background: #27272b;
  color: #e4e4e7;
}
/* Also fix the custom panel-select in dark mode */
[data-theme="dark"] .panel-select,
body.dark-theme .panel-select {
  background: #27272b !important;
  color: #e4e4e7 !important;
}
[data-theme="dark"] .panel-select option,
body.dark-theme .panel-select option {
  background: #27272b !important;
  color: #e4e4e7 !important;
}

/* Issue 9: Top toolbar icons brighter in dark mode */
[data-theme="dark"] .dropdown-trigger-btn,
body.dark-theme .dropdown-trigger-btn {
  color: #a1a1aa;
}
[data-theme="dark"] .dropdown-trigger-btn:hover,
body.dark-theme .dropdown-trigger-btn:hover {
  color: #e4e4e7;
}
[data-theme="dark"] .icon-btn,
body.dark-theme .icon-btn {
  color: #a1a1aa;
}
[data-theme="dark"] .icon-btn:hover,
body.dark-theme .icon-btn:hover {
  color: #e4e4e7;
}

/* Measurement panel drag handle cursor */
.measure-list-panel .measure-drag-handle {
  cursor: grab;
  padding: 4px 8px 2px;
  user-select: none;
}
.measure-list-panel .measure-drag-handle:active {
  cursor: grabbing;
}

/* Popups premium white styling for light theme class */
body.light-theme .cg-panel, 
body.light-theme .dropdown-menu {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08) ;
}
body.light-theme .prop-float-panel {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
body.light-theme .modal-box {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #1f2937 !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.12) !important;
}
body.light-theme .modal-header {
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}
body.light-theme .modal-header span,
body.light-theme .modal-header h3 {
  color: #1f2937 !important;
}
body.light-theme #input-named-view-name,
body.light-theme #capture-w,
body.light-theme #capture-h,
body.light-theme #capture-size-select {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  color: #1f2937 !important;
}
body.light-theme .modal-row {
  color: #4b5563 !important;
}
body.light-theme input[type="range"] {
  background: rgba(0, 0, 0, 0.08) ;
}

/* ── File Info Panel ── */
.file-info-row {
  padding: 3px 0;
  font-size: 0.78rem;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
  word-break: break-word;
}
.file-info-row:last-child {
  border-bottom: none;
  color: var(--text-3);
  font-style: italic;
}
.info-content-text {
  font-size: 0.78rem;
  color: var(--text-2);
  line-height: 1.6;
}

/* ── Resizer ── */
.left-sidebar-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 4px;
  cursor: col-resize;
  z-index: 30;
  background: transparent;
  transition: background 0.2s;
}
.left-sidebar-resizer:hover,
.left-sidebar-resizer.resizing {
  background: var(--primary);
  width: 6px;
}

/* ── Project Switch Button Active State ── */
.proj-btn.active {
  background: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}

/* ── Elegant Metadata Table ── */
.metadata-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.68rem;
  color: var(--text);
  margin-top: 4px;
}
.metadata-table tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.metadata-table tr:last-child {
  border-bottom: none;
}
.metadata-table td {
  padding: 6px 4px;
  vertical-align: top;
}
.metadata-table td.meta-label {
  color: var(--text-2);
  font-weight: 500;
  width: 40%;
}
.metadata-table td.meta-value {
  text-align: right;
  word-break: break-all;
}

body.light-theme .metadata-table tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
body.light-theme .metadata-table td.meta-label {
  color: var(--text-2);
}

/* ── Modal Dialog ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-overlay.hidden { display: none; }

.modal-box {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  min-width: 260px;
  max-width: 320px;
  box-shadow: 0 16px 60px rgba(0,0,0,0.7);
  color: var(--text);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.modal-header h3 { font-size: 0.82rem; font-weight: 600; color: var(--text); }

.modal-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.74rem;
  color: var(--text-2);
}

/* ── Theme Selector ── */
.theme-selector {
  display: flex;
  gap: 4px;
}
.theme-btn {
  flex: 1;
  padding: 5px 4px;
  font-size: 0.68rem;
  font-weight: 600;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.theme-btn:hover { background: var(--surface-hi); color: var(--text); }
.theme-btn.active {
  background: var(--primary-dim);
  color: var(--primary);
  border-color: rgba(59,130,246,0.35);
}

/* Specific positioning for clipping settings panel (top right quadrant) */
#clipping-panel {
  top: 90px;
  right: 60px;
  bottom: auto;
}

/* Specific positioning for find object panel (top right quadrant) */
#find-panel {
  top: 72px;
  right: 12px;
  bottom: auto;
  width: 290px;
  min-width: 280px;
}

/* The public model viewer exposes text size as a compact top-bar popover.
   Compatibility controls remain hidden inside it for the renderer. */
#settings-right-panel.text-size-panel {
  top: calc(env(safe-area-inset-top) + var(--bar-h) + 6px);
  right: max(8px, env(safe-area-inset-right));
  width: min(310px, calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  height: auto;
  max-height: calc(100dvh - env(safe-area-inset-top) - var(--bar-h) - env(safe-area-inset-bottom) - 18px);
  border: 1px solid var(--panel-border-color);
  border-radius: 14px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}
#settings-right-panel.text-size-panel.panel-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.30);
}
#settings-right-panel.text-size-panel .right-panel-header {
  height: 46px;
  padding: 0 10px 0 14px;
}
#settings-right-panel.text-size-panel .right-panel-content {
  flex: none;
  padding: 8px;
  overflow: visible;
}
#settings-right-panel .annotation-size-settings {
  padding: 12px;
  gap: 0;
}
#settings-right-panel .annotation-size-grid {
  gap: 0;
}
#settings-right-panel .annotation-size-grid .slider-row {
  grid-template-columns: minmax(68px, auto) minmax(110px, 1fr) 42px;
  gap: 10px;
  min-height: 42px;
}
#settings-right-panel .annotation-size-grid .slider-label {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
  #progress-bar { transition: none; }
}

.board-search-trigger {
  color: var(--primary);
}

.board-search-trigger .btn-label {
  max-width: 42px;
}

.board-search-results {
  max-height: 230px;
  overflow-y: auto;
  border-top: 1px solid var(--border);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.board-search-result {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-hi);
  color: var(--text);
  font: 600 0.78rem/1.25 inherit;
  text-align: left;
  cursor: pointer;
}

.board-search-result::after {
  content: '\2192';
  color: var(--primary);
  font-size: 1rem;
  flex: 0 0 auto;
}

.board-search-result:hover,
.board-search-result:focus-visible {
  border-color: var(--primary);
  outline: none;
}

.board-search-message {
  display: block;
  padding: 9px 2px;
  color: var(--text-2);
  font-size: 0.74rem;
  line-height: 1.45;
  text-align: center;
}

/* Custom Color Picker HSL Sliders */
.picker-range-slider {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 8px !important;
  border-radius: 4px !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background-clip: border-box !important;
  cursor: pointer !important;
}
.picker-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
  cursor: pointer !important;
  transform: none !important;
  margin-top: 0 !important;
  transition: transform 0.1s !important;
}
.picker-range-slider:active::-webkit-slider-thumb {
  transform: scale(1.2) !important;
}
/* Coloris CAD Swatch Style Override */
.clr-field {
  width: 14px !important;
  height: 14px !important;
  border-radius: 3px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important; /* Force vertical centering inside flex row */
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
.clr-field button {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 2px !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  /* Coloris ships a default `transform: translateY(-6px)` on the swatch button,
     which lifts the color swatch ~6px above its field box. With inset:0 we want
     it to fill the field exactly — kill the transform so it lines up vertically
     with the adjacent material sphere. */
  top: 0 !important;
  transform: none !important;
  pointer-events: auto !important;
}
.clr-field input {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── Layer Panel Rows (compact, Rhino-like flat list) ──────────────────────
 * Tight vertical rhythm so many layers fit on screen. No per-row card border /
 * background — just a hairline separator + hover highlight. The dynamic
 * padding-left (indent) is set inline in renderNode. */
#layer-list-panel .layer-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-right: 6px;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  box-shadow: inset 0 -1px 0 var(--border);
  min-height: 22px;
  box-sizing: border-box;
}
#layer-list-panel .layer-item:hover {
  background: var(--surface-hi);
}

/* ── Layer Panel Swatch Alignment ──────────────────────────────────────────
 * The layer panel renders a color swatch (Coloris-wrapped input) and a
 * material sphere swatch (button) side-by-side. Both need pixel-identical
 * vertical centering regardless of theme / font / DPR.
 * We use a flex container + identical box-model on both children so neither
 * inline-baseline nor display-mode differences can offset one. */
#layer-list-panel .layer-swatches {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  line-height: 0 !important;
  vertical-align: middle !important;
}
#layer-list-panel .layer-swatches > .clr-field,
#layer-list-panel .layer-swatches > .layer-material-swatch {
  width: 14px !important;
  height: 14px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  line-height: 0 !important;
}
#layer-list-panel .layer-swatches > .layer-material-swatch {
  border-radius: 50% !important;
}

/* Properties Panel Specific Coloris Swatch Styles */
#object-properties .clr-field,
#layer-material-dialog .clr-field {
  width: 28px !important;
  height: 18px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  margin: 0 !important;
  margin-left: 2px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important; /* 안전장치: flex 미적용 환경도 커버 */
}
#object-properties .clr-field button,
#layer-material-dialog .clr-field button {
  border-radius: 3px !important;
  margin: 0 !important;       /* Coloris 기본 button의 margin/top 강제 제거 */
  top: auto !important;
  transform: none !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* ── Layer Material Dialog ──────────────────────────────────────────────── */
#layer-material-dialog .lmd-card {
  position: fixed;
  /* Default center; JS may overwrite with explicit pixel coords on drag */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--surface, #1e1f24);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: 14px;
  padding: 16px 18px 14px;
  min-width: 280px;
  max-width: 340px;
  width: 92vw;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Re-enable interaction (outer overlay has pointer-events:none for click-through) */
  pointer-events: auto;
}
#layer-material-dialog .lmd-header {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: grab;
  user-select: none;
}
#layer-material-dialog .lmd-header:active { cursor: grabbing; }
/* Buttons inside the header keep their normal pointer (no grab) */
#layer-material-dialog .lmd-header button,
#layer-material-dialog .lmd-header input,
#layer-material-dialog .lmd-header .lmd-close { cursor: pointer; }
#layer-material-dialog .lmd-sphere {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
#layer-material-dialog .lmd-title-wrap {
  flex: 1;
  min-width: 0;
}
#layer-material-dialog .lmd-title {
  font-weight: 600;
  font-size: 0.83rem;
  color: var(--text, #e0e0e0);
  letter-spacing: 0.01em;
}
#layer-material-dialog .lmd-subtitle {
  font-size: 0.68rem;
  color: var(--text-3, #888);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#layer-material-dialog .lmd-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-3, #888);
  padding: 4px;
  border-radius: 6px;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
#layer-material-dialog .lmd-close:hover {
  color: var(--text, #e0e0e0);
  background: rgba(255, 255, 255, 0.06);
}
#layer-material-dialog .lmd-body {
  padding-top: 2px;
}
#layer-material-dialog .mat-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
}
#layer-material-dialog .mat-label {
  width: 64px;
  flex-shrink: 0;
}
#layer-material-dialog .mat-row input[type="range"] {
  flex: 1;
  accent-color: var(--primary, #7c6aff);
  cursor: pointer;
}
#layer-material-dialog .lmd-color-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
#layer-material-dialog .lmd-color-value {
  font-size: 0.68rem;
  color: var(--text-3, #888);
  font-family: monospace;
}
#layer-material-dialog .lmd-actions {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}
#layer-material-dialog .lmd-btn {
  flex: 1;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
#layer-material-dialog .lmd-btn-secondary {
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  background: var(--surface-hi, rgba(255, 255, 255, 0.07));
  color: var(--text-2, #bbb);
}
#layer-material-dialog .lmd-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
}
#layer-material-dialog .lmd-btn-primary {
  border: 1px solid var(--primary, #7c6aff);
  background: var(--primary, #7c6aff);
  color: #ffffff;
  font-weight: 600;
}
#layer-material-dialog .lmd-btn-primary:hover {
  filter: brightness(1.08);
}
#object-properties .mat-editor {
  gap: 6px !important;
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}
#object-properties .mat-row {
  display: flex !important;        /* flex 컨테이너 */
  align-items: center !important;  /* 자식 전체를 수직 중앙 정렬 */
  min-height: 22px !important;
  gap: 6px !important;
  padding: 2px 0 !important;
}
#object-properties .mat-label {
  line-height: 1 !important;       /* 텍스트의 불필요한 행간 제거 */
  vertical-align: middle !important;
}

/* Force Coloris picker width so 6 swatches (20px each + 6px gap) fit perfectly in one row! */
.clr-picker {
  width: 212px !important;
  /* layer-material-dialog uses z-index 9999, so picker must sit above it */
  z-index: 10001 !important;
}

/* Coloris Swatches: center-aligned grid with uniform gap */
.clr-picker .clr-swatches div {
  justify-content: center !important;
  align-items: center !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  gap: 6px !important;
}

/* Custom Swatch Add Button: override ALL Coloris button defaults (Default Light Mode style) */
#clr-custom-add-btn {
  position: relative !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important; /* Rely on container gap */
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1.5px dashed #4b5563 !important; /* Visible dark grey border in Light Mode */
  background: #f3f4f6 !important; /* Light grey background */
  text-indent: 0 !important;
  overflow: visible !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
  transition: background 0.15s, border-color 0.15s, transform 0.15s !important;
  box-sizing: border-box !important;
}

/* CRITICAL: Hide the ::after overlay that Coloris paints currentColor over the button */
#clr-custom-add-btn::after {
  display: none !important;
}

/* The span inside carries the + text, visible above any overlay (Default Light Mode style) */
#clr-custom-add-btn > span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  color: #1f2937 !important; /* Very dark grey plus sign */
  font-size: 15px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  pointer-events: none !important;
  text-indent: 0 !important;
}

#clr-custom-add-btn:hover {
  background: #e5e7eb !important;
  border-color: #111827 !important;
  transform: scale(1.08) !important;
}

/* Custom Swatch Add Button: Premium Dark Mode styling (inside .clr-dark) */
.clr-dark #clr-custom-add-btn {
  border: 1.5px dashed rgba(255, 255, 255, 0.45) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.clr-dark #clr-custom-add-btn > span {
  color: rgba(255, 255, 255, 0.85) !important;
}

.clr-dark #clr-custom-add-btn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.9) !important;
}

/* Keep normal swatches aligned with a consistent margin/gap */
.clr-picker .clr-swatches button {
  margin: 0 !important; /* Let the container gap handle it! */
}

/* ── Bottom Floating View Tools Bar ── */
.bottom-tools-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  padding: 4px 6px;
  border-radius: 10px;
  box-shadow: none;
  pointer-events: auto;
  transition: opacity 0.2s, transform 0.2s, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body.dark-theme .bottom-tools-bar {
  background: rgba(0, 0, 0, 0.4);
}

.bottom-tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s ease;
}

.bottom-tool-btn svg {
  width: 16px;
  height: 16px;
}

.bottom-tool-btn:hover {
  background: var(--surface-hi);
  color: var(--text);
}

.bottom-tool-btn:active {
  background: var(--border);
}

.bottom-tool-btn.active {
  background: var(--primary-dim);
  color: var(--primary);
}

.bottom-tool-separator {
  width: 1px;
  height: 14px;
  background: var(--border);
  margin: 0 4px;
}

/* Coloris override inside Settings background color picker */
.color-circle .clr-field {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  border: none !important;
  position: absolute !important;
  inset: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.color-circle .clr-field button {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Force flat 2D color circles with absolutely no glossy/crescent shapes or bevels */
.color-circle * {
  box-shadow: none !important;
  background: transparent !important;
  background-image: none !important;
}

/* Hide any pseudo-element decorations, shadows, or gradients */
.color-circle .clr-field::after,
.color-circle .clr-field::before,
.color-circle .clr-field button::after,
.color-circle .clr-field button::before,
.color-circle .clr-field button:after,
.color-circle .clr-field button:before {
  display: none !important;
  content: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-image: none !important;
}

/* Clear contrast borders for color swatches in light mode */
body.light-theme .color-circle {
  border: 2px solid rgba(0, 0, 0, 0.12) !important;
}

/* ── Mobile Responsive Layout adjustments (Prevent watermark overlap) ── */
@media (max-width: 560px) {
  .dropdown-trigger-btn {
    width: calc((100vw - 24px) / 9);
    min-width: 0;
    min-height: 46px;
  }
  .dropdown-trigger-btn .btn-label {
    max-width: calc((100vw - 28px) / 9);
    font-size: 0.43rem;
  }
  .board-search-trigger {
    background: var(--primary-dim);
    border-color: rgba(37, 99, 235, 0.22);
  }
  #find-panel {
    top: 64px;
    right: 8px;
    width: calc(100vw - 16px);
    min-width: 0;
    max-width: 360px;
    resize: none;
  }
  #find-search-input {
    font-size: 16px !important;
  }
  .board-search-result {
    min-height: 46px;
    font-size: 0.88rem;
  }
  #settings-right-panel {
    top: calc(env(safe-area-inset-top) + var(--bar-h) + 6px);
    right: max(8px, env(safe-area-inset-right));
    width: min(310px, calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    height: auto;
    max-height: calc(100dvh - env(safe-area-inset-top) - var(--bar-h) - env(safe-area-inset-bottom) - 18px);
    border: 1px solid var(--panel-border-color);
    border-radius: 14px;
    overflow: hidden;
  }
  #settings-right-panel .right-panel-header {
    height: 46px;
    padding: 0 10px 0 14px;
  }
  #settings-right-panel .right-panel-content {
    padding: 8px;
  }
  #settings-right-panel .annotation-size-settings {
    padding: 10px;
  }
  #settings-right-panel .annotation-size-grid .slider-row {
    grid-template-columns: 68px minmax(100px, 1fr) 40px;
    gap: 8px;
    min-height: 46px;
  }
  .bottom-tools-bar {
    bottom: 52px !important; /* Push up slightly to prevent intersection */
  }
  #byrhinoview-watermark {
    bottom: 18px !important;
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    letter-spacing: 0.05em;
    text-align: center;
  }
}

/* Mobile compositors pay heavily for live backdrop blur over a changing WebGL
   canvas. Opaque glass keeps the same hierarchy without that per-frame cost. */
@media (pointer: coarse) {
  #top-bar,
  #mode-bar,
  .bottom-tools-bar,
  .left-sidebar,
  .sidebar,
  .cg-panel,
  .dropdown-menu,
  .group-popup,
  .toast {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #top-bar,
  .bottom-tools-bar {
    background: var(--surface) !important;
  }
}

/* ── Dynamic Bottom Bar Contrast Adjustments ── */
.bottom-tools-bar.local-dark {
  background: rgba(18, 18, 22, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}
.bottom-tools-bar.local-dark .bottom-tool-btn {
  color: rgba(255, 255, 255, 0.72) !important;
}
.bottom-tools-bar.local-dark .bottom-tool-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}
.bottom-tools-bar.local-dark .bottom-tool-btn.active {
  background: var(--primary) !important;
  color: #ffffff !important;
}

.bottom-tools-bar.local-light {
  background: rgba(255, 255, 255, 0.55) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}
.bottom-tools-bar.local-light .bottom-tool-btn {
  color: rgba(24, 24, 27, 0.75) !important;
}
.bottom-tools-bar.local-light .bottom-tool-btn:hover {
  background: rgba(24, 24, 27, 0.08) !important;
  color: #000000 !important;
}
.bottom-tools-bar.local-light .bottom-tool-btn.active {
  background: var(--primary) !important;
  color: #ffffff !important;
}

/* ── Bottom Bar Grouping and Popover Styling ── */
.bottom-tool-group {
  position: relative;
  display: inline-block;
}

.group-popup {
  position: absolute;
  bottom: calc(100% + 8px); /* Float 8px above the bottom bar */
  left: 50%;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 8px;
  padding: 4px;
  display: flex;
  flex-direction: column; /* Vertical alignment */
  gap: 4px;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(10px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  /* Default = dark glassmorphic; the .local-* class on .bottom-tools-bar overrides. */
  background: rgba(18, 18, 22, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.group-popup.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Popup follows the SAME local-dark/local-light decision as the parent bar,
   so the flyout and its host button always read the same contrast. */
.bottom-tools-bar.local-dark .group-popup {
  background: rgba(18, 18, 22, 0.85);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.bottom-tools-bar.local-dark .group-popup .bottom-tool-btn {
  color: rgba(255, 255, 255, 0.72) !important;
}
.bottom-tools-bar.local-dark .group-popup .bottom-tool-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

.bottom-tools-bar.local-light .group-popup {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.bottom-tools-bar.local-light .group-popup .bottom-tool-btn {
  color: rgba(24, 24, 27, 0.75) !important;
}
.bottom-tools-bar.local-light .group-popup .bottom-tool-btn:hover {
  background: rgba(24, 24, 27, 0.08) !important;
  color: #000000 !important;
}

/* Default (neither local-* class present yet) — keep dark icons for safety. */
.group-popup .bottom-tool-btn {
  color: rgba(255, 255, 255, 0.72) !important;
}
.group-popup .bottom-tool-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

/* ── Cloud File Browser Modal (used by OneDrive picker) ───────────────── */
.cloud-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}
.cloud-modal {
  width: min(560px, 92vw);
  max-height: 80vh;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cloud-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.cloud-modal-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.cloud-modal-close {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-2);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--r-sm);
}
.cloud-modal-close:hover { background: var(--surface-hi); color: var(--text); }
.cloud-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-2);
}
.cloud-crumb {
  background: transparent;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
}
.cloud-crumb:hover { color: var(--primary); background: var(--surface-hi); }
.cloud-crumb:last-child { color: var(--text); font-weight: 500; }
.cloud-crumb-sep { color: var(--text-3); font-size: 13px; }
.cloud-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
  min-height: 240px;
}
.cloud-list:focus { outline: none; }
.cloud-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 18px;
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
  transition: background 0.12s;
}
.cloud-row:hover { background: var(--surface-hi); }
.cloud-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--text-2);
}
.cloud-row-folder .cloud-icon { color: var(--primary); }
.cloud-row-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cloud-row-meta {
  font-size: 11px;
  color: var(--text-3);
  flex-shrink: 0;
}
.cloud-loading,
.cloud-empty {
  padding: 40px 18px;
  text-align: center;
  color: var(--text-2);
  font-size: 13px;
}
.cloud-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
}
.cloud-btn {
  border: 1px solid var(--border);
  background: var(--surface-hi);
  color: var(--text);
  padding: 7px 16px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}
.cloud-btn:hover { background: var(--surface); }

/* ── Note tool: input dialog + bubble + file-panel list ─────────────────── */
.note-dialog-overlay {
  position: fixed; inset: 0; z-index: 10001;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  font-family: inherit;
}
.note-dialog {
  width: min(420px, 92vw);
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  display: flex; flex-direction: column;
}
.note-dialog-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.note-dialog-title { font-size: 14px; font-weight: 600; color: var(--text); }
.note-dialog-close {
  width: 26px; height: 26px;
  border: none; background: transparent;
  color: var(--text-2); font-size: 20px; line-height: 1; cursor: pointer;
  border-radius: 4px;
}
.note-dialog-close:hover { background: var(--surface-hi); color: var(--text); }
.note-dialog-body { padding: 14px 16px; }
.note-dialog-label {
  display: block;
  font-size: 11px; color: var(--text-2);
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em;
}
.note-color-swatches { display: flex; gap: 6px; }
.note-color-swatch {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s, border-color 0.1s;
}
.note-color-swatch:hover { transform: scale(1.12); }
.note-color-swatch.selected {
  border-color: var(--text);
  transform: scale(1.12);
}
.note-dialog-text {
  width: 100%;
  background: var(--surface-hi);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  box-sizing: border-box;
  min-height: 80px;
}
.note-dialog-text:focus { outline: none; border-color: var(--primary); }
.note-dialog-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}
.note-btn {
  border: 1px solid var(--border);
  background: var(--surface-hi);
  color: var(--text);
  padding: 7px 16px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}
.note-btn:hover { background: var(--surface); }
.note-btn-save {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}
.note-btn-save:hover { background: var(--primary-hi); }

/* Floating bubble that appears next to a clicked pin marker */
.note-bubble {
  position: fixed;
  z-index: 9000;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--note-accent, #fbbf24);
  border-radius: var(--r-sm);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  padding: 10px 14px 10px 12px;
  min-width: 200px;
  max-width: 320px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  pointer-events: auto;
  display: none;
}
.note-bubble.visible { display: block; }
.note-bubble-text {
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 8px;
  line-height: 1.4;
}
.note-bubble-actions {
  display: flex; justify-content: flex-end; gap: 6px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.note-bubble-btn {
  background: transparent;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
}
.note-bubble-btn:hover { background: var(--surface-hi); color: var(--text); }
.note-bubble-btn.danger:hover { color: #ef4444; }

/* File-panel notes list */
#notes-section { margin-top: 12px; }
.notes-list { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; }
.notes-empty {
  font-size: 12px; color: var(--text-3);
  padding: 8px 10px; font-style: italic;
}
.note-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  background: transparent;
  transition: background 0.12s;
}
.note-row:hover { background: var(--surface-hi); }
.note-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.2);
}
.note-row-text {
  flex: 1;
  font-size: 12px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.note-row-actions {
  display: flex; gap: 2px;
  opacity: 0.65;
  transition: opacity 0.12s;
}
.note-row:hover .note-row-actions { opacity: 1; }
.note-row-btn {
  width: 22px; height: 22px;
  border: none;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
}
.note-row-btn:hover { background: var(--surface); color: var(--text); }
.note-row-btn.danger:hover { color: #ef4444; }

/* ── Toast (non-blocking notification) ── */
#toast-container {
  position: fixed;
  left: 50%;
  bottom: calc(var(--mode-h) + 18px);
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  max-width: min(560px, calc(100vw - 32px));
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-msg { flex: 1; white-space: pre-line; }
.toast-close {
  flex: none;
  width: 20px; height: 20px;
  margin-top: -1px;
  border: none;
  background: transparent;
  color: var(--text-2);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
}
.toast-close:hover { background: var(--surface-hi); color: var(--text); }