/* Theme Editor modal styles */
:root {
  --te-z: 9999;
}

.te-modal {
  position: fixed;
  inset: 0;
  z-index: var(--te-z);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.te-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.te-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 22, 0.82);
  backdrop-filter: blur(8px);
}


.te-panel {
  position: relative;
  z-index: 1;
  width: min(95vw, 1300px);
  max-height: 94vh;
  background: rgba(10, 18, 34, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.07);
  /* ONE shell radius for the whole family, this large editor included: -lg /
     18px. The S6 register further down used to re-state this same value, so
     the two declarations can no longer drift apart — this is the only one. */
  border-radius: var(--uo-radius-lg);
  padding: 24px 28px 20px;
  display: flex;
  flex-direction: column;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* The accent halo is added by the winning per-id rules below
     (`#themeEditorModal .te-panel`, `#teSceneLibModal .te-panel`) and by the
     Theme Library's own `.tl-panel` register, so it lives in one place each. */
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}



.te-modal.open .te-panel {
  transform: translateY(0) scale(1);
}

.te-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
  flex-shrink: 0;
}

.te-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(99, 102, 241, 0.85);
  margin: 0 0 3px;
}

.te-title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}

.te-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 0;
  padding: 0;
  margin: 0;
  transform-origin: center center;
}

.te-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  transform: rotate(90deg);
}

.te-body {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) 320px;
  gap: 20px;
  flex: 1;
  min-height: 0;
  position: relative;
}

.te-tabs-sidebar {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.te-tab-btn {
  text-align: left;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.5);
  border-radius: 9px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s;
  font-weight: 500;
  white-space: nowrap;
}

.te-tab-btn:hover {
  background: rgba(99, 102, 241, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.te-tab-btn.active {
  background: rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.4);
  color: #c7d2fe;
}

.te-tab-btn:focus,
.te-close:focus,
.te-btn:focus,
.te-range:focus,
.te-select:focus,
.te-text-input:focus,
.te-color-input:focus {
  outline: 3px solid rgba(99, 102, 241, 0.25);
  outline-offset: 2px;
}

.te-preview-area {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  min-width: 0;
}

.te-preview-header {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 14px;
  align-self: stretch;
  text-align: center;
}

.te-preview-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 24px 16px 20px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.4);
  transition:
    background 0.3s,
    color 0.3s;
  position: relative;
  overflow: hidden;
  min-height: 220px;
}

.te-preview-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: none;
}

.te-preview-modes {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 4px;
  background: rgba(0, 0, 0, 0.25);
  padding: 4px;
  border-radius: 999px;
}

.te-preview-mode {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.55);
  cursor: default;
  transition: all 0.2s;
}

.te-preview-mode.active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.te-preview-card {
  position: relative;
  z-index: 1;
  width: min(88%, 240px);
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(10, 18, 34, 0.88);
  color: #f8fafc;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  text-align: left;
}

.te-preview-card-title {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 8px;
}

.te-preview-card-body {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  line-height: 1.4;
}

.te-preview-chip {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: #6366f1;
  color: #fff;
  flex-shrink: 0;
}

.te-preview-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.85;
}

.te-preview-stat-label {
  font-size: 0.7rem;
  opacity: 0.6;
}

.te-preview-stat-value {
  font-size: 0.85rem;
  font-weight: 700;
}

.te-preview-logo {
  position: relative;
  z-index: 1;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.te-preview-logo-mark {
  height: 16px;
  width: auto;
  flex-shrink: 0;
}

.te-preview-logo-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.te-preview-logo-name {
  font-family:
    "Plus Jakarta Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.te-preview-logo-subtitle {
  font-family:
    "Plus Jakarta Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 7px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--th-accent);
  opacity: 0.86;
  transition: color 0.3s;
}

.te-color-preview-section {
  margin-top: 16px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
}

.te-color-preview-title {
  margin-bottom: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.te-color-preview-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 18, 34, 0.95);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}

.te-color-preview-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.te-color-preview-chip,
.te-color-preview-pill {
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.te-color-preview-chip {
  background: #6366f1;
  color: #fff;
  text-transform: uppercase;
}

.te-color-preview-pill {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #e2e8f0;
}

.te-color-preview-modal {
  border-radius: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.te-color-preview-modal-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 4px;
}

.te-color-preview-modal-body {
  font-size: 0.82rem;
  line-height: 1.45;
  opacity: 0.85;
}

.te-preview-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  border-radius: 14px;
  pointer-events: none;
}

.te-preview-timer {
  position: relative;
  z-index: 1;
  font-size: 2.6rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #fff;
  transition: color 0.3s;
  line-height: 1;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.te-preview-btn {
  position: relative;
  z-index: 1;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 10px 28px;
  border-radius: 999px;
  color: #fff;
  transition: background 0.3s, transform 0.2s;
  cursor: default;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.te-preview-btn:focus {
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.25);
}

.te-controls {
  overflow-y: auto;
  padding-right: 4px;
  min-width: 0;
}

.te-controls::-webkit-scrollbar {
  width: 4px;
}

.te-controls::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.te-tab-pane {
  display: none;
  flex-direction: column;
  gap: 12px;
}

.te-tab-pane.active {
  display: flex;
}

.te-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.te-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.te-color-input {
  width: 100%;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  padding: 3px;
}

.te-select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #f8fafc;
  font-size: 0.85rem;
  cursor: pointer;
}

.te-select option {
  background: #0f172a;
  color: #e2e8f0;
}

.te-text-input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #f8fafc;
  font-size: 0.85rem;
  transition: border-color 0.2s;
}

.te-text-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.te-text-input:focus {
  outline: none;
  border-color: rgba(99, 102, 241, 0.5);
}

.te-file-input {
  width: 100%;
  padding: 6px 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}

.te-file-input::file-selector-button {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #f8fafc;
  cursor: pointer;
  font-size: 0.78rem;
  margin-right: 8px;
  transition: background 0.2s;
}

.te-file-input::file-selector-button:hover {
  background: rgba(255, 255, 255, 0.12);
}

.te-img-preview {
  border-radius: 8px;
  overflow: hidden;
  max-height: 100px;
  background: rgba(255, 255, 255, 0.05);
}

.te-img-preview img {
  width: 100%;
  height: auto;
  display: block;
}

.te-range {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  outline: none;
  cursor: pointer;
  transition: background 0.2s;
}

.te-range:hover {
  background: rgba(255, 255, 255, 0.22);
}

.te-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #818cf8, #6366f1);
  border: 2px solid #fff;
  cursor: grab;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s, box-shadow 0.15s;
}

.te-range::-webkit-slider-thumb:hover {
  transform: scale(1.12);
}

.te-range:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.18);
  box-shadow: 0 0 0 5px rgba(99, 102, 241, 0.25);
}

.te-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #818cf8, #6366f1);
  border: 2px solid #fff;
  cursor: grab;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.te-range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}

.te-range-val {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.35);
  text-align: right;
}

.te-scene-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.te-scene-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 6px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: all 0.2s;
  color: rgba(255, 255, 255, 0.7);
}

.te-scene-card:hover {
  border-color: rgba(99, 102, 241, 0.4);
  background: rgba(99, 102, 241, 0.08);
}

.te-scene-card.active {
  border-color: rgba(99, 102, 241, 0.65);
  background: rgba(99, 102, 241, 0.18);
  color: #e0e7ff;
}

.te-scene-thumb {
  width: 100%;
  aspect-ratio: 1.6;
  border-radius: 6px;
  display: block;
  position: relative;
  overflow: hidden;
  /* fallback while async thumbnails paint */
  background: #0d1526;
}

.te-scene-thumb--particles {
  background:
    linear-gradient(135deg, #0f172a, #1e1b4b),
    radial-gradient(
      circle at 30% 40%,
      rgba(199, 210, 254, 0.8) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 70% 60%,
      rgba(199, 210, 254, 0.6) 1px,
      transparent 1px
    );
  background-size:
    auto,
    24px 24px,
    18px 18px;
}

.te-scene-thumb--aurora {
  background:
    linear-gradient(180deg, #020617 30%, transparent),
    linear-gradient(
      120deg,
      transparent 20%,
      rgba(52, 211, 153, 0.55) 45%,
      rgba(99, 102, 241, 0.45) 65%,
      transparent 85%
    );
}

.te-scene-thumb--rain {
  background:
    linear-gradient(180deg, #0f172a, #1e293b),
    repeating-linear-gradient(
      115deg,
      transparent,
      transparent 6px,
      rgba(148, 163, 184, 0.35) 6px,
      rgba(148, 163, 184, 0.35) 7px
    );
}

.te-scene-thumb--bubbles {
  background:
    linear-gradient(180deg, #020617, #0f172a),
    radial-gradient(circle at 30% 65%, rgba(165, 180, 252, 0.25) 2px, transparent 2px),
    radial-gradient(circle at 50% 40%, rgba(165, 180, 252, 0.2) 3px, transparent 3px),
    radial-gradient(circle at 70% 55%, rgba(165, 180, 252, 0.15) 2px, transparent 2px);
  background-size:
    auto,
    40px 40px,
    60px 60px,
    50px 50px;
}

.te-scene-thumb--starfield {
  background:
    linear-gradient(180deg, #020617 20%, #0f172a),
    radial-gradient(circle at 20% 30%, rgba(254, 249, 195, 0.5) 1px, transparent 1px),
    radial-gradient(circle at 45% 15%, rgba(254, 249, 195, 0.4) 1px, transparent 1px),
    radial-gradient(circle at 70% 25%, rgba(254, 249, 195, 0.3) 1px, transparent 1px),
    radial-gradient(circle at 30% 60%, rgba(254, 249, 195, 0.2) 1px, transparent 1px),
    radial-gradient(circle at 65% 70%, rgba(254, 249, 195, 0.15) 1px, transparent 1px);
  background-size:
    auto,
    30px 30px,
    40px 40px,
    25px 25px,
    50px 50px,
    35px 35px;
}

.te-scene-thumb--embers {
  background:
    linear-gradient(180deg, #020617, #1c1917),
    radial-gradient(circle at 50% 80%, rgba(249, 115, 22, 0.35) 3px, transparent 3px),
    radial-gradient(circle at 30% 70%, rgba(251, 146, 60, 0.25) 2px, transparent 2px),
    radial-gradient(circle at 70% 85%, rgba(249, 115, 22, 0.2) 2px, transparent 2px);
  background-size:
    auto,
    50px 50px,
    40px 40px,
    35px 35px;
}

.te-scene-thumb--ripples {
  background:
    linear-gradient(180deg, #020617, #0f172a),
    radial-gradient(circle at 30% 50%, rgba(103, 232, 249, 0.2) 1px, transparent 1px),
    radial-gradient(circle at 50% 45%, rgba(103, 232, 249, 0.08) 8px, transparent 8px),
    radial-gradient(circle at 50% 45%, rgba(103, 232, 249, 0.04) 14px, transparent 14px);
  background-size:
    auto,
    50px 50px,
    30px 30px,
    50px 50px;
}

.te-scene-thumb--comets {
  background:
    linear-gradient(150deg, #020617 30%, #1e1b2e),
    linear-gradient(80deg, transparent 30%, rgba(254, 240, 138, 0.35) 40%, transparent 50%),
    linear-gradient(120deg, transparent 35%, rgba(254, 240, 138, 0.25) 45%, transparent 55%);
}

.te-scene-thumb--galaxy {
  background:
    linear-gradient(135deg, #0f0a1a, #020617),
    radial-gradient(circle at 50% 50%, rgba(167, 139, 250, 0.2) 6px, transparent 6px),
    radial-gradient(circle at 50% 50%, rgba(167, 139, 250, 0.08) 14px, transparent 14px),
    radial-gradient(circle at 35% 38%, rgba(167, 139, 250, 0.55) 1px, transparent 1px),
    radial-gradient(circle at 55% 42%, rgba(167, 139, 250, 0.35) 1px, transparent 1px),
    radial-gradient(circle at 45% 52%, rgba(167, 139, 250, 0.3) 1px, transparent 1px),
    radial-gradient(circle at 65% 48%, rgba(167, 139, 250, 0.2) 1px, transparent 1px),
    radial-gradient(circle at 30% 55%, rgba(167, 139, 250, 0.25) 1px, transparent 1px),
    radial-gradient(circle at 42% 35%, rgba(167, 139, 250, 0.15) 1px, transparent 1px);
  background-size:
    auto,
    20px 20px,
    40px 40px,
    40px 40px,
    35px 35px,
    50px 50px,
    30px 30px,
    45px 45px,
    25px 25px;
}

.te-scene-thumb--snow {
  background:
    linear-gradient(180deg, #020617 20%, #0f172a),
    radial-gradient(circle at 25% 30%, rgba(255, 255, 255, 0.55) 1px, transparent 1px),
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.4) 1px, transparent 1px),
    radial-gradient(circle at 70% 35%, rgba(255, 255, 255, 0.5) 1px, transparent 1px),
    radial-gradient(circle at 40% 60%, rgba(255, 255, 255, 0.35) 1px, transparent 1px),
    radial-gradient(circle at 60% 70%, rgba(255, 255, 255, 0.25) 1px, transparent 1px);
  background-size:
    auto,
    26px 26px,
    34px 34px,
    30px 30px,
    44px 44px,
    36px 36px;
}

.te-scene-thumb--condensation {
  background:
    linear-gradient(180deg, #0f172a, #1e293b),
    radial-gradient(circle at 25% 35%, rgba(186, 230, 253, 0.4) 2px, transparent 2px),
    radial-gradient(circle at 55% 25%, rgba(186, 230, 253, 0.3) 3px, transparent 3px),
    radial-gradient(circle at 75% 55%, rgba(186, 230, 253, 0.35) 2px, transparent 2px),
    radial-gradient(circle at 40% 70%, rgba(186, 230, 253, 0.25) 3px, transparent 3px);
  background-size:
    auto,
    42px 42px,
    58px 58px,
    46px 46px,
    64px 64px;
}

.te-scene-thumb--grass {
  background:
    linear-gradient(180deg, #020617 45%, #052e16),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 6px,
      rgba(74, 222, 128, 0.4) 6px,
      rgba(74, 222, 128, 0.4) 7px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 10px,
      rgba(34, 197, 94, 0.5) 10px,
      rgba(34, 197, 94, 0.5) 11px
    );
  background-size:
    auto,
    14px 100%,
    22px 100%;
}

.te-scene-thumb--flourish {
  background:
    linear-gradient(135deg, #020617, #1e1b4b),
    linear-gradient(
      100deg,
      transparent 20%,
      rgba(226, 232, 240, 0.45) 40%,
      rgba(226, 232, 240, 0.1) 60%,
      transparent 80%
    );
}

.te-scene-thumb--starorbit {
  background:
    linear-gradient(135deg, #060e1b, #0a0e27),
    radial-gradient(circle at 50% 50%, rgba(199, 210, 254, 0.2) 5px, transparent 5px),
    radial-gradient(circle at 50% 50%, rgba(199, 210, 254, 0.08) 11px, transparent 11px),
    radial-gradient(circle at 30% 30%, rgba(199, 210, 254, 0.6) 1px, transparent 1px),
    radial-gradient(circle at 60% 40%, rgba(199, 210, 254, 0.4) 1px, transparent 1px),
    radial-gradient(circle at 45% 60%, rgba(199, 210, 254, 0.35) 1px, transparent 1px),
    radial-gradient(circle at 70% 55%, rgba(199, 210, 254, 0.25) 1px, transparent 1px);
  background-size:
    auto,
    34px 34px,
    58px 58px,
    30px 30px,
    44px 44px,
    38px 38px,
    52px 52px;
}

.te-scene-thumb--blackhole {
  background:
    linear-gradient(135deg, #020617, #0a0e27),
    radial-gradient(circle at 50% 50%, #000000 0 12%, rgba(0,0,0,0.85) 13%, transparent 16%),
    radial-gradient(circle at 50% 50%, rgba(165, 180, 252, 0.9) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 50%, rgba(165, 180, 252, 0.35) 0 14%, transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(255, 200, 180, 0.45) 0 3px, transparent 6px),
    radial-gradient(circle at 32% 30%, rgba(203, 213, 225, 0.5) 1px, transparent 1px),
    radial-gradient(circle at 62% 42%, rgba(203, 213, 225, 0.35) 1px, transparent 1px),
    radial-gradient(circle at 44% 58%, rgba(203, 213, 225, 0.3) 1px, transparent 1px);
  background-size:
    auto,
    46px 46px,
    46px 46px,
    46px 46px,
    46px 46px,
    38px 38px,
    46px 46px,
    34px 34px;
}

.te-scene-thumb--fireflies {
  background:
    linear-gradient(180deg, #04140a, #020617),
    radial-gradient(circle at 30% 40%, rgba(217, 249, 157, 0.95) 1.5px, transparent 2px),
    radial-gradient(circle at 60% 25%, rgba(217, 249, 157, 0.6) 1px, transparent 1px),
    radial-gradient(circle at 45% 70%, rgba(190, 242, 100, 0.75) 1.5px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(217, 249, 157, 0.4) 1px, transparent 1px),
    radial-gradient(circle at 25% 75%, rgba(217, 249, 157, 0.5) 1px, transparent 1px);
  background-size:
    auto,
    60px 60px,
    44px 44px,
    70px 70px,
    52px 52px,
    64px 64px;
}

.te-scene-thumb--leaves {
  background:
    linear-gradient(180deg, #16121f, #0a0f1a),
    radial-gradient(ellipse 18% 30% at 30% 30%, rgba(249, 168, 212, 0.9), transparent 70%),
    radial-gradient(ellipse 14% 24% at 60% 55%, rgba(251, 146, 60, 0.7), transparent 70%),
    radial-gradient(ellipse 16% 26% at 45% 80%, rgba(249, 168, 212, 0.5), transparent 70%);
  background-size:
    auto,
    90px 90px,
    70px 70px,
    80px 80px;
}

.te-scene-thumb--dandelion {
  background:
    linear-gradient(180deg, #020617, #0a1020),
    radial-gradient(circle at 30% 30%, rgba(254, 249, 195, 0.85) 2px, transparent 4px),
    radial-gradient(circle at 60% 55%, rgba(254, 249, 195, 0.5) 1.5px, transparent 3px),
    radial-gradient(circle at 45% 78%, rgba(254, 249, 195, 0.6) 2px, transparent 4px);
  background-size:
    auto,
    70px 70px,
    60px 60px,
    75px 75px;
}

.te-scene-thumb--campfire {
  background:
    linear-gradient(180deg, #020617, #0c0a08),
    radial-gradient(circle at 50% 78%, rgba(251, 146, 60, 0.75) 0 6%, rgba(251, 146, 60, 0.35) 10%, transparent 16%),
    radial-gradient(circle at 50% 72%, rgba(254, 215, 170, 0.9) 0 3px, transparent 5px),
    radial-gradient(circle at 40% 30%, rgba(251, 191, 36, 0.4) 1px, transparent 1px),
    radial-gradient(circle at 60% 45%, rgba(251, 146, 60, 0.35) 1px, transparent 1px);
  background-size:
    auto,
    110px 110px,
    90px 90px,
    80px 80px,
    70px 70px;
}

.te-scene-thumb--butterflies {
  background:
    linear-gradient(180deg, #10140a, #020617),
    radial-gradient(ellipse 22% 18% at 35% 40%, rgba(240, 171, 252, 0.9), transparent 70%),
    radial-gradient(ellipse 20% 16% at 65% 65%, rgba(240, 171, 252, 0.6), transparent 70%),
    radial-gradient(ellipse 16% 14% at 45% 25%, rgba(167, 139, 250, 0.7), transparent 70%);
  background-size:
    auto,
    90px 90px,
    80px 80px,
    70px 70px;
}

.te-scene-thumb--thunderstorm {
  background:
    linear-gradient(180deg, #0a0f1a, #060b16),
    linear-gradient(115deg, transparent 38%, rgba(200, 215, 245, 0.7) 40%, rgba(200, 215, 245, 0.3) 42%, transparent 44%),
    linear-gradient(115deg, transparent 58%, rgba(200, 215, 245, 0.5) 60%, rgba(200, 215, 245, 0.2) 62%, transparent 64%),
    radial-gradient(circle at 50% 15%, rgba(190, 205, 240, 0.6) 0 3px, transparent 5px);
  background-size:
    auto,
    auto,
    auto,
    auto;
}

.te-scene-thumb--eclipse {
  background:
    linear-gradient(180deg, #0a0e27, #020617),
    radial-gradient(circle at 50% 45%, rgba(253, 230, 138, 0.95) 0 6%, rgba(253, 230, 138, 0.45) 12%, transparent 20%),
    radial-gradient(circle at 50% 45%, #0a0e27 0 5%, rgba(10, 14, 39, 0.9) 6%, transparent 8%),
    radial-gradient(circle at 30% 25%, rgba(219, 228, 245, 0.7) 1px, transparent 1px);
  background-size:
    auto,
    auto,
    auto,
    70px 70px;
}

.te-scene-thumb--ocean {
  background:
    linear-gradient(180deg, #04101c 30%, #0a1e30),
    linear-gradient(180deg, rgba(56, 189, 248, 0.6), rgba(12, 74, 110, 0.9)),
    repeating-linear-gradient(180deg, transparent 0 6px, rgba(220, 245, 255, 0.35) 6px 8px, transparent 8px 14px);
  background-size:
    auto,
    auto,
    auto;
}

.te-scene-thumb--neoncity {
  background:
    linear-gradient(180deg, #050818 35%, #0d1026),
    linear-gradient(90deg, transparent 40%, rgba(34, 211, 238, 0.5) 45%, transparent 55%),
    linear-gradient(90deg, transparent 60%, rgba(244, 114, 182, 0.45) 65%, transparent 75%),
    linear-gradient(115deg, transparent 30%, rgba(200, 215, 245, 0.35) 33%, transparent 36%);
  background-size:
    auto,
    80px 80px,
    90px 90px,
    auto;
}

.te-scene-thumb--inkwater {
  background:
    linear-gradient(180deg, #14505f, #0a2a33),
    radial-gradient(circle at 40% 40%, rgba(11, 18, 32, 0.85) 0 5%, transparent 12%),
    radial-gradient(circle at 40% 40%, rgba(11, 18, 32, 0.5) 0 8%, transparent 16%),
    radial-gradient(circle at 65% 60%, rgba(11, 18, 32, 0.55) 0 4%, transparent 10%);
  background-size:
    auto,
    90px 90px,
    110px 110px,
    80px 80px;
}

.te-scene-thumb--caustics {
  background:
    linear-gradient(180deg, #042a3a, #03182a),
    radial-gradient(circle at 40% 40%, rgba(125, 211, 252, 0.5) 0 3px, transparent 8px),
    radial-gradient(circle at 60% 60%, rgba(125, 211, 252, 0.35) 0 3px, transparent 8px),
    radial-gradient(circle at 50% 30%, rgba(186, 230, 253, 0.4) 0 2px, transparent 6px);
  background-size:
    auto,
    70px 70px,
    80px 80px,
    60px 60px;
}

.te-scene-thumb--jellyfish {
  background: linear-gradient(180deg, #03101c, #07182a),
    radial-gradient(circle at 50% 45%, rgba(167, 139, 250, 0.4) 0 10px, transparent 16px),
    radial-gradient(circle at 40% 60%, rgba(165, 180, 252, 0.3) 0 6px, transparent 12px);
  background-size: auto, 90px 120px, 70px 90px;
}

.te-scene-thumb--confetti {
  background: linear-gradient(180deg, #0f0a1a, #1a0f24),
    radial-gradient(circle at 30% 30%, rgba(251, 191, 36, 0.8) 1.5px, transparent 2px),
    radial-gradient(circle at 55% 60%, rgba(244, 114, 182, 0.7) 1.5px, transparent 2px),
    radial-gradient(circle at 70% 35%, rgba(96, 165, 250, 0.7) 1.5px, transparent 2px),
    radial-gradient(circle at 45% 80%, rgba(74, 222, 128, 0.6) 1.5px, transparent 2px);
  background-size: auto, 60px 60px, 70px 70px, 55px 55px, 65px 65px;
}

.te-scene-thumb--lighthouse {
  background: linear-gradient(180deg, #0a1424, #1c2c46),
    radial-gradient(ellipse 10% 22% at 50% 20%, rgba(253, 230, 138, 0.9), transparent 70%);
  background-size: auto, 90px 90px;
}

.te-scene-thumb--balloon {
  background: linear-gradient(180deg, #1a1440, #3a2a60),
    radial-gradient(ellipse 12% 14% at 50% 30%, rgba(250, 204, 21, 0.85), transparent 70%),
    radial-gradient(ellipse 10% 12% at 30% 55%, rgba(244, 114, 182, 0.7), transparent 70%),
    radial-gradient(ellipse 10% 12% at 68% 50%, rgba(96, 165, 250, 0.7), transparent 70%);
  background-size: auto, 80px 80px, 70px 70px, 70px 70px;
}

.te-scene-thumb--blossomstorm {
  background: linear-gradient(180deg, #1a1230, #2a1a42),
    radial-gradient(ellipse 20% 30% at 22% 40%, rgba(249, 168, 212, 0.85), transparent 70%),
    radial-gradient(circle at 80% 15%, rgba(250, 240, 255, 0.6) 4px, transparent 7px);
  background-size: auto, 110px 110px, 80px 80px;
}

.te-scene-thumb--meteor {
  background: linear-gradient(180deg, #050b18, #0d1526),
    linear-gradient(115deg, transparent 55%, rgba(226, 232, 240, 0.7) 62%, transparent 68%),
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.7) 1.5px, transparent 3px),
    radial-gradient(circle at 60% 70%, rgba(255, 255, 255, 0.5) 1.5px, transparent 3px);
  background-size: auto, 140px 90px, 50px 50px, 60px 60px;
}

.te-scene-thumb--lanterns {
  background: linear-gradient(180deg, #0c1226, #1a2238),
    radial-gradient(circle at 30% 60%, rgba(253, 186, 116, 0.8) 3px, transparent 6px),
    radial-gradient(circle at 55% 35%, rgba(251, 146, 60, 0.7) 2.5px, transparent 5px),
    radial-gradient(circle at 75% 65%, rgba(254, 215, 170, 0.6) 2px, transparent 4px);
  background-size: auto, 90px 110px, 100px 90px, 80px 100px;
}

.te-scene-thumb--koi {
  background: linear-gradient(180deg, #06221e, #031410),
    radial-gradient(ellipse 16% 8% at 35% 45%, rgba(251, 191, 36, 0.9), transparent 70%),
    radial-gradient(ellipse 14% 7% at 65% 55%, rgba(239, 68, 68, 0.8), transparent 70%),
    radial-gradient(ellipse 12% 6% at 50% 70%, rgba(255, 255, 255, 0.7), transparent 70%);
  background-size: auto, 90px 70px, 90px 70px, 80px 60px;
}

/* Celestial Clockwork: brass rings on midnight (matches the scene's fallback
   backdrop if a card's canvas ever fails to render). */
.te-scene-thumb--ornate {
  background: radial-gradient(circle at 30% 55%, rgba(201, 162, 39, 0.5) 0 18%, rgba(201, 162, 39, 0.16) 30%, transparent 52%),
    radial-gradient(circle at 76% 32%, rgba(240, 192, 74, 0.35) 0 11%, transparent 34%),
    radial-gradient(circle at 62% 80%, rgba(224, 163, 122, 0.26) 0 9%, transparent 30%),
    linear-gradient(180deg, #0a0f22, #05060f);
}

.te-scene-thumb--origami {
  background: linear-gradient(180deg, #0d1830, #233a5e 55%, #c98574),
    radial-gradient(circle at 50% 80%, rgba(255, 236, 205, 0.8) 5px, transparent 12px);
  background-size: auto, 100px 100px;
}

.te-scene-thumb--lighttunnel {
  background: radial-gradient(circle at 72% 24%, #f4f1ff 0 5px, rgba(210, 220, 255, 0.5) 6px, transparent 12px),
    radial-gradient(ellipse at 38% 68%, rgba(158, 172, 220, 0.75) 16%, transparent 58%),
    radial-gradient(ellipse at 68% 52%, rgba(110, 125, 190, 0.6) 15%, transparent 52%);
  background-color: #0a1024;
}

.te-scene-thumb--fireworks {
  background:
    radial-gradient(circle at 32% 36%, rgba(251, 191, 36, 0.8) 0 3px, rgba(251, 191, 36, 0.2) 10px, transparent 24px),
    radial-gradient(circle at 69% 28%, rgba(244, 114, 182, 0.75) 0 2px, rgba(167, 139, 250, 0.18) 9px, transparent 22px),
    radial-gradient(circle at 53% 64%, rgba(226, 232, 240, 0.55) 0 1.5px, transparent 12px),
    linear-gradient(180deg, #020617, #070b1a);
}

.te-scene-thumb--mistysunrise {
  background: linear-gradient(180deg, #1a1430 0 30%, #4a2f55 46%, #b26a70 58%, #f2b489 70%, #241c36 70.5%);
}

.te-scene-thumb--cloudsea {
  background: linear-gradient(180deg, #0a0e1f 0 35%, #2b2350 55%, #8a6aa0 72%, #141225 73%);
}

.te-scene-thumb--dunes {
  background: linear-gradient(180deg, #2a1d3a 0 28%, #c98f63 40%, #d9a95f 55%, #b98a4a 100%);
}

.te-scene-label {
  font-size: 0.72rem;
  font-weight: 600;
}

/* Featured shelf + view-all */
.te-featured-shelf {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}

.te-view-all-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(99, 102, 241, 0.35);
  background: rgba(99, 102, 241, 0.14);
  color: #c7d2fe;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 12px;
}

.te-view-all-btn:hover {
  background: rgba(99, 102, 241, 0.26);
  border-color: rgba(99, 102, 241, 0.6);
  transform: translateY(-1px);
  color: #e0e7ff;
}

/* Static scene-preview thumbnail frame */
.te-scene-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 6px;
}

/* Hover preview — live animated preview of a hovered scene card */
.te-hover-preview {
  position: fixed;
  z-index: 400;
  width: 300px;
  background: #0b111f;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 10px 10px 8px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px) scale(0.98);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.te-hover-preview.open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.te-hover-preview-canvas {
  width: 100%;
  aspect-ratio: 1.6;
  border-radius: 8px;
  display: block;
  background: #020617;
}

.te-hover-preview-label {
  display: block;
  margin-top: 7px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.75);
}

/* Scene library modal — matches the site's settings-modals pattern */
.te-scene-lib-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.te-scene-lib-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.te-scene-lib-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(10px);
}

.te-scene-lib-panel {
  position: relative;
  z-index: 1;
  width: min(92vw, 720px);
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  background: #0b111f;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--uo-radius-lg);
  padding: 26px 28px 20px;
  transform: translateY(24px) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.te-scene-lib-modal.open .te-scene-lib-panel {
  transform: translateY(0) scale(1);
}

.te-scene-lib-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
}

.te-scene-lib-eyebrow {
  margin: 0 0 3px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(99, 102, 241, 0.85);
}

.te-scene-lib-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}

.te-scene-lib-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.te-scene-lib-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: white;
  transform: rotate(90deg);
}

.te-scene-lib-search {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font-size: 0.85rem;
  margin-bottom: 12px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

.te-scene-lib-search::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.te-scene-lib-search:focus {
  outline: none;
  border-color: rgba(99, 102, 241, 0.55);
  background: rgba(255, 255, 255, 0.1);
}

.te-scene-lib-moods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.te-lib-mood {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.te-lib-mood:hover {
  border-color: rgba(99, 102, 241, 0.45);
  background: rgba(255, 255, 255, 0.09);
  color: #c7d2fe;
}

.te-lib-mood.active {
  background: rgba(99, 102, 241, 0.22);
  border-color: rgba(99, 102, 241, 0.55);
  color: #e0e7ff;
}

.te-scene-lib-grid {
  grid-template-columns: repeat(4, 1fr);
  overflow-y: auto;
  padding-right: 4px;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.te-scene-lib-grid::-webkit-scrollbar {
  width: 5px;
}

.te-scene-lib-grid::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.te-scene-lib-count {
  margin-top: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
}

/* Toggle switch (checkbox options like Curtain Style / Shooting Stars) */
.te-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  padding: 2px 0;
}

.te-toggle-row input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.te-toggle-track {
  position: relative;
  width: 38px;
  height: 21px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
}

.te-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #cbd5e1;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s;
}

.te-toggle-row input[type="checkbox"]:checked + .te-toggle-track {
  background: rgba(99, 102, 241, 0.55);
  border-color: rgba(99, 102, 241, 0.75);
}

.te-toggle-row input[type="checkbox"]:checked + .te-toggle-track .te-toggle-thumb {
  transform: translateX(17px);
  background: #fff;
}

.te-toggle-row:hover .te-toggle-track {
  border-color: rgba(99, 102, 241, 0.5);
}

.te-toggle-state {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.2s;
}

.te-toggle-row input[type="checkbox"]:checked ~ .te-toggle-state {
  color: #c7d2fe;
}

/* Scene option select (e.g. leaf type) */
.te-scene-select {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 0.8rem;
  outline: none;
}

.te-scene-select:focus {
  border-color: rgba(99, 102, 241, 0.6);
}

/* Color picker card */
/* Compact inline variant for tight spaces */
.te-color-picker--compact {
  gap: 6px;
  padding: 3px 8px;
  border-radius: 8px;
  width: auto;
  flex: none;
  display: inline-flex;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  transition: all 0.2s ease;
  user-select: none;
  align-items: center;
}

.te-color-picker--compact:hover {
  border-color: rgba(99, 102, 241, 0.35);
  background: rgba(99, 102, 241, 0.06);
}

.te-color-picker--compact:focus-visible {
  outline: 3px solid rgba(99, 102, 241, 0.4);
  outline-offset: 2px;
}

.te-color-picker--compact:active {
  transform: scale(0.98);
}

.te-color-picker--compact .te-color-picker-swatch {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border-width: 1.5px;
  flex-shrink: 0;
  transition: background 0.25s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.te-color-picker--compact .te-color-picker-info {
  flex: none;
  flex-direction: row;
  align-items: center;
  gap: 0;
}

.te-color-picker--compact .te-color-picker-label {
  display: none;
}

.te-color-picker--compact .te-color-picker-hex {
  font-size: 0.78rem;
  font-weight: 600;
  font-family: monospace;
  color: #e2e8f0;
  letter-spacing: 0.02em;
}

.te-color-picker--compact .te-color-picker-arrow {
  font-size: 0.5rem;
  color: rgba(255, 255, 255, 0.2);
  margin-left: 2px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.te-color-picker--compact:hover .te-color-picker-arrow {
  transform: translateY(1px);
}

.te-color-input-hidden {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.te-color-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.te-color-picker:hover {
  border-color: rgba(99, 102, 241, 0.35);
  background: rgba(99, 102, 241, 0.06);
}

.te-color-picker:focus-visible {
  outline: 3px solid rgba(99, 102, 241, 0.4);
  outline-offset: 2px;
}

.te-color-picker:active {
  transform: scale(0.98);
}

.te-color-picker-swatch {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
  transition: background 0.25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.te-color-picker-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.te-color-picker-label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
}

.te-color-picker-hex {
  font-size: 0.92rem;
  font-weight: 600;
  font-family: monospace;
  color: #e2e8f0;
  letter-spacing: 0.02em;
  transition: color 0.25s ease;
}

.te-color-picker-arrow {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.25);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.te-color-picker:hover .te-color-picker-arrow {
  transform: translateY(1px);
}

.te-scene-bg-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
}

/* Heading row for the pairing presets: label + info trigger (tooltip is
   wired by theme-engine, same pattern as the Overlay field). The trigger
   only appears for scenes that ship presetCombos — see .has-combos below. */
.te-scene-bg-label-row {
  display: flex;
  align-items: center;
  justify-content: center;
  /* centred over the centred preset tiles, and kept centred after the library
     took its own left register (the builder inherits the same rule) */
  text-align: center;
  gap: 6px;
  margin-top: 12px;
  margin-bottom: 3px;
}

.te-scene-bg-label-row .te-scene-bg-label {
  margin: 0;
}

.te-scene-bg-label-row .te-tooltip-trigger {
  display: none;
}

.te-scene-bg-label-row.has-combos .te-tooltip-trigger {
  display: inline-flex;
}

/* Scene presets */
.te-scene-bg-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.te-scene-bg-swatch {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  flex-shrink: 0;
  outline: none;
  overflow: hidden;
}

.te-scene-bg-swatch:hover {
  transform: translateY(-2px);
  z-index: 1;
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.te-scene-bg-swatch:focus-visible {
  outline: 3px solid rgba(99, 102, 241, 0.5);
  outline-offset: 2px;
}

.te-scene-bg-swatch.active {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5), 0 0 10px rgba(99, 102, 241, 0.2);
  transform: translateY(-1px);
}

/* Lighter border ring for very dark swatches so they're distinguishable from bg */
.te-scene-bg-swatch[data-color="#000000"],
.te-scene-bg-swatch[data-color="#050510"],
.te-scene-bg-swatch[data-color="#0a0015"],
.te-scene-bg-swatch[data-color="#2b2436"],
.te-scene-bg-swatch[data-color="#23304a"],
.te-scene-bg-swatch[data-color="#1f2e24"] {
  border-color: rgba(255, 255, 255, 0.18);
}

/* Checkmark on active swatch */
.te-scene-bg-swatch.active::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

.te-scene-bg-swatch--custom {
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border-style: dashed;
  border-color: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.35);
  line-height: 1;
}

.te-scene-bg-swatch--custom:hover {
  border-color: rgba(99, 102, 241, 0.5);
  color: #c7d2fe;
  background: rgba(99, 102, 241, 0.12);
}

.te-scene-bg-swatch--custom::after {
  /* The plus is a real line icon now (`.te-swatch-plus`), so the checkmark
     pseudo-element must stay out of the way. */
  content: none;
}

/* The plus itself: a flex-centred 14px line glyph, so it sits on the swatch's
   optical centre instead of the text baseline the old `content: "+"` used
   (user, 2026-10-21: "that same plus isnt centered"). */
.te-swatch-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  pointer-events: none;
}

.te-swatch-plus svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* On the pairing row the add tile is the same box as a pair tile (56×30), not
   a 28px square: it reads as one more tile in the family instead of a stray
   control under it (user, 2026-10-21). The row has `width: 100%`, so this tile
   wraps onto its own centred line. */
.te-scene-combo-row + .te-scene-bg-swatch--custom {
  width: 56px;
  height: 36px;
  border-radius: 7px;
}

/* Saved presets: the swatch keeps its 28px box and the remove button rides the
   corner, so the colour still owns the whole tile. */
.te-swatch-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.te-swatch-del {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(15, 20, 35, 0.96);
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.14s ease, background 0.14s ease, color 0.14s ease;
  z-index: 2;
}

.te-swatch-del svg {
  width: 9px;
  height: 9px;
  display: block;
}

.te-swatch-wrap:hover .te-swatch-del,
.te-swatch-wrap:focus-within .te-swatch-del,
.te-swatch-del:focus-visible {
  opacity: 1;
}

.te-swatch-del:hover {
  background: #ef4444;
  border-color: #ef4444;
  color: #fff;
}

.te-scene-bg-swatch--custom.active {
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
}

/* No `content: "+"` on the active state either: the line glyph is the only
   plus now, and a pseudo-element one would double it (2026-10-21). */
.te-scene-bg-swatch--custom.active::after {
  content: none;
}

/* Shell colours (fireworks): Multi-Colored, the single-colour presets, and any
   custom pick. The row IS the firing order, so it reads left to right like a
   set list — a chip carries an × once it is part of the show (2026-10-21). */
.te-shell-colors {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.te-shell-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.te-shell-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px 0 9px;
  /* Not a full pill. Every other control in this panel is a 8-9px rounded
     rect (inputs, cards, swatches, tabs); at 999px the shells read as a
     different design language bolted onto the row (user, 2026-10-21). */
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  outline: none;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.te-shell-chip:hover {
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.te-shell-chip:focus-visible {
  outline: 3px solid rgba(99, 102, 241, 0.55);
  outline-offset: 2px;
}

.te-shell-chip.active {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.te-shell-dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.te-shell-dot--multi {
  background: conic-gradient(
    #ff264a,
    #ffc42e,
    #00e07a,
    #2874ff,
    #a44aff,
    #ff40c4,
    #ff264a
  );
}

.te-shell-x {
  font-size: 0.8rem;
  line-height: 1;
  opacity: 0.7;
  margin-left: 1px;
}

.te-shell-chip--add {
  border-style: dashed;
}

.te-shell-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  opacity: 0.8;
}

.te-shell-plus svg {
  width: 12px;
  height: 12px;
  display: block;
}

/* Combined line+accent combo swatches (split half-and-half) */
.te-scene-combo-swatch {
  /* 56×36: the middle of the tile is a real target ("apply both"), and the
     extra height closes the size gap to the shell chips above (28px tall), so
     the suggested row reads as the same register instead of a strip of small
     swatches under a wall of chips (user, 2026-10-22). 56 wide is the widest
     that keeps six tiles on one line in the library's 373px column. */
  width: 56px;
  height: 36px;
  border-radius: 7px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  flex-shrink: 0;
  outline: none;
  overflow: hidden;
  padding: 0;
  display: inline-flex;
}

.te-scene-combo-swatch span {
  flex: 1;
  display: block;
}

.te-scene-combo-swatch .te-combo-line {
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.te-scene-combo-swatch:hover {
  transform: translateY(-2px);
  z-index: 1;
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.te-scene-combo-swatch:focus-visible {
  outline: 3px solid rgba(99, 102, 241, 0.5);
  outline-offset: 2px;
}

.te-scene-combo-swatch.active {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5), 0 0 10px rgba(99, 102, 241, 0.2);
  transform: translateY(-1px);
}

/* Suggested pair rows (background + a scene color option) */
.te-scene-combo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  width: 100%;
}

.te-scene-combo-swatch .te-combo-half {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  outline: none;
  display: block;
}

.te-scene-combo-swatch .te-combo-half:hover {
  filter: brightness(1.25);
}

/* The seam is its own control: it applies BOTH halves of the pair. Overlaid on
   the 50/50 split so the pair still reads as one tile, and named in its
   tooltip so the extra target is discoverable. */
.te-scene-combo-swatch .te-combo-both {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 16px;
  transform: translateX(-50%);
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.22),
    rgba(255, 255, 255, 0)
  );
  transition: background 0.15s ease;
}

.te-scene-combo-swatch .te-combo-both:hover,
.te-scene-combo-swatch .te-combo-both:focus-visible {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 0.06)
  );
}

.te-scene-combo-swatch .te-combo-both:focus-visible {
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px rgba(99, 102, 241, 0.9);
}

.te-scene-combo-swatch .te-combo-del {
  position: absolute;
  top: 0;
  right: 0;
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0 4px 0 7px;
  background: rgba(10, 14, 26, 0.82);
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.14s ease, background 0.14s ease, color 0.14s ease;
  z-index: 3;
}

.te-scene-combo-swatch .te-combo-del svg {
  width: 9px;
  height: 9px;
  display: block;
}

.te-scene-combo-swatch:hover .te-combo-del,
.te-scene-combo-swatch:focus-within .te-combo-del {
  opacity: 1;
}

.te-scene-combo-swatch .te-combo-del:hover {
  background: #ef4444;
  color: #fff;
}

.te-scene-combo-swatch .te-combo-both-dot {
  flex: 0 0 auto;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.3);
}

.te-scene-combo-swatch .te-combo-half:focus-visible {
  outline: 3px solid rgba(99, 102, 241, 0.6);
  outline-offset: -1px;
  position: relative;
  z-index: 1;
}

.te-scene-combo-swatch .te-combo-half + .te-combo-half {
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

/* Selected ring per half, so a mixed pair (bg from one tile, wing from
   another) shows both halves highlighted */
.te-scene-combo-swatch .te-combo-half.active {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.95),
    inset 0 0 0 3px rgba(99, 102, 241, 0.55);
}

.te-scene-bg-swatch .te-swatch-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: rgba(10, 18, 34, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.75);
  pointer-events: none;
  z-index: 10;
  font-weight: 500;
  font-family: monospace;
  letter-spacing: 0.02em;
}

.te-scene-bg-swatch:hover .te-swatch-tooltip {
  display: block;
}

.te-scene-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.te-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.te-footer-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.te-footer-menu-wrap {
  position: relative;
  flex-shrink: 0;
}

.te-more-btn {
  font-size: 1.05rem;
  line-height: 1;
  padding: 10px 14px;
}

.te-footer-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  min-width: 175px;
  background: rgba(10, 18, 34, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: all 0.2s ease;
  z-index: 20;
}

.te-footer-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.te-menu-item {
  text-align: left;
  padding: 9px 12px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.te-menu-item:hover {
  background: rgba(99, 102, 241, 0.15);
  color: #fff;
}

.te-btn {
  padding: 10px 20px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.86rem;
  transition: all 0.2s;
}

.te-btn-primary {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
}

.te-btn-primary:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.te-btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

.te-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
}

.te-btn-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.72);
}

.te-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
}

.te-tooltip-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.te-tooltip-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  font-weight: 700;
  cursor: help;
  border: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
  transition: all 0.2s;
  line-height: 1;
  text-decoration: none;
  font-family: inherit;
  padding: 0;
}

.te-tooltip-trigger:hover,
.te-tooltip-trigger:focus {
  background: rgba(99, 102, 241, 0.3);
  color: #c7d2fe;
  outline: none;
}

.te-tooltip {
  display: none;
  position: fixed;
  z-index: 100000;
  background: rgba(10, 18, 34, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 12px 14px;
  max-width: 320px;
  width: max-content;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  pointer-events: none;
}

.te-toast-root {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 20000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.te-toast {
  min-width: 260px;
  max-width: min(90vw, 360px);
  padding: 12px 14px;
  border-radius: 12px;
  /* Bound to the shared dialog tokens so a custom/olive theme repaints the
     toast too (user, 2026-10-11). */
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
  background: var(--surface-bg, rgba(10, 18, 34, 0.96));
  color: var(--text-main, #f8fafc);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.32);
  pointer-events: auto;
  transform: translateY(8px);
  opacity: 0;
  transition: all 0.2s ease;
}

.te-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.te-toast-success {
  border-color: rgba(34, 197, 94, 0.3);
}

.te-toast-error {
  border-color: rgba(248, 113, 113, 0.35);
}

.te-toast-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.78;
  margin-bottom: 4px;
}

.te-toast-message {
  font-size: 0.9rem;
  line-height: 1.4;
}

/* ── System-popup shell (.te-confirm-*): extracted 2026-10-05 to
   timer.css §Surface 3 so both dialog families share one tokenized
   shell. (Includes the popup-* keyframes that lived here — timer.css
   defines the same ones, and both sheets always load.) ── */

/* ── Custom theme list (Expanded Settings) ── */
.te-theme-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  transition: all 0.15s;
}
.te-theme-row:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(99, 102, 241, 0.25);
}
.te-theme-row.active {
  border-color: rgba(99, 102, 241, 0.5);
  background: rgba(99, 102, 241, 0.1);
}
.te-theme-row-apply {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 5px 2px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s;
}
.te-theme-row-apply:hover {
  color: #fff;
}
.te-theme-row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.te-theme-row.active .te-theme-row-apply {
  color: #c7d2fe;
}
.te-theme-row-active {
  flex-shrink: 0;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #c7d2fe;
  background: rgba(99, 102, 241, 0.2);
  border: 1px solid rgba(99, 102, 241, 0.35);
  border-radius: 999px;
  padding: 2px 8px;
}
.te-theme-row-menu-wrap {
  position: relative;
  flex-shrink: 0;
}
.te-theme-row-more {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s;
}
.te-theme-row-more:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.te-theme-row-more[aria-expanded="true"] {
  background: rgba(99, 102, 241, 0.2);
  color: #c7d2fe;
}
.te-theme-row-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  right: 0;
  min-width: 150px;
  background: rgba(10, 18, 34, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: all 0.2s ease;
  z-index: 20;
}
.te-theme-row-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.te-theme-row-menu .te-menu-item {
  font-size: 0.8rem;
}
.te-theme-row-menu .te-menu-item-danger {
  color: #fca5a5;
}
.te-theme-row-menu .te-menu-item-danger:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #fff;
}

@media (max-width: 1080px) {
  .te-panel {
    width: min(96vw, 980px);
  }

  .te-body {
    /* auto: let the longest tab label ("Background") size the track so
       labels never wrap onto a second line under their icon */
    grid-template-columns: minmax(110px, auto) minmax(0, 1fr) 230px;
  }

  .te-tab-btn {
    padding-inline: 10px;
  }
}

@media (max-width: 820px) {
  .te-modal {
    align-items: stretch;
    justify-content: stretch;
  }

  .te-panel {
    width: 100%;
    max-height: 100vh;
    min-height: 100vh;
    border-radius: 0;
    padding: 18px;
  }

  .te-body {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .te-tabs-sidebar {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .te-controls {
    padding-right: 0;
  }

  .te-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .te-footer-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}
/* ═══════════════════════════════════════════════════════════
   Theme Library modal (tl-*) — opened from the theme pickers.
   Mirrors the builder's scene-library panel; shares the
   .te-scene-grid / .te-scene-card / .te-scene-thumb card styles.
   ═══════════════════════════════════════════════════════════ */
/* The library is slotted into the page wrapper, whose timer column is centred,
   so `.tl-section-label`, `.te-label` and every scene-option label inherited
   `text-align: center` (2026-10-19 sitewide census). A dialog owns its text
   register: panel/section/field labels read left, the centred count line and
   the swatch-pair headings opt back in below. */
.tl-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  /* own text register — see the note above */
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.tl-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.tl-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(10px);
}

.tl-panel {
  position: relative;
  z-index: 1;
  width: min(94vw, 1020px);
  max-height: 86vh;
  /* v3 layout: header fixed at the top, then a two-column body — the preset
     grid on the left, the Animated Scene panel (live preview + the same
     controls the builder shows) on the right, so a picked preset is editable
     in place without leaving the modal. */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #0b111f;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--uo-radius-lg);
  padding: 26px 28px 20px;
  transform: translateY(24px) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.tl-modal.open .tl-panel {
  transform: translateY(0) scale(1);
}

.tl-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
}

.tl-eyebrow {
  margin: 0 0 3px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.tl-title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
}

.tl-close {
  background: rgba(255, 255, 255, 0.06);
  border: none;
  color: rgba(255, 255, 255, 0.7);
  /* Family close contract: 34px flex-centred circle + the shared 16px
     `uo-line-close` glyph. This used to be the one close in the app that did
     not match — a 30px 9px-radius square with a text ✕. */
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.tl-close svg {
  display: block;
  width: 16px;
  height: 16px;
}

.tl-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  transform: rotate(90deg);
}

.tl-search {
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 0.88rem;
  outline: none;
  margin-bottom: 12px;
}

.tl-search:focus {
  border-color: rgba(255, 255, 255, 0.28);
}

.tl-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 14px;
}

.tl-filter-pill {
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease,
    border-color 0.18s ease;
}

.tl-filter-pill:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

.tl-filter-pill.active {
  background: rgba(255, 255, 255, 0.92);
  color: #0b111f;
  border-color: transparent;
}

/* Two-column body: browse on the left, the scene panel on the right. The body
   (not a section) is the flex child that absorbs the panel's remaining height,
   so the grid scrolls instead of pushing anything out of view. */
.tl-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  gap: 22px;
  overflow: hidden;
}
.tl-browse {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.tl-scene-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
  padding-left: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
.tl-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex: none;
}
/* The shared panel's SVG partials declare no width/height (repo convention), so
   an un-pinned glyph falls back to its 300×150 default box. Pin the exact
   geometry the builder's S6 block gives them — the library renders the same
   panel and must match it pixel-for-pixel. */
.tl-scene-panel .te-color-picker-arrow svg,
.tl-scene-panel .te-tooltip-trigger svg {
  width: 14px;
  height: 14px;
  flex: none;
  vertical-align: -2px;
}
.tl-panel-head .tl-section-label {
  margin: 0;
}

/* Live preview window: the selected scene runs inside the modal (the scene
   runtime is single-instance, so the preview owns it while the modal is open
   and hands the page background back on close). */
.tl-preview-stage {
  position: relative;
  flex: none;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.tl-preview-stage .te-preview-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.tl-preview-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.45);
}
/* The shared panel (scene-panel.html) stacks its controls in the column. */
.tl-panel-fields {
  min-height: 0;
}
.tl-panel-fields .te-scene-panel {
  display: flex;
  flex-direction: column;
}
.tl-grid {
  flex: 1 1 auto;
  min-height: 120px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.tl-count {
  margin-top: 12px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
}

.tl-section-label {
  margin: 0 0 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.tl-editor-reset {
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease,
    border-color 0.18s ease;
}
.tl-editor-reset:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
.tl-editor-reset[hidden] {
  display: none;
}

/* Commit bar (user, 2026-10-18): Reset + Apply moved out of the panel head
   into a footer that closes the modal. The panel is a flex column, so the bar
   sits on the bottom edge and absorbs the empty strip that used to trail the
   last control; the controls the buttons act on are now directly above them. */
.tl-footer {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.tl-footer[hidden] {
  display: none;
}
.tl-footer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.tl-footer .tl-editor-reset {
  padding: 8px 16px;
  border-radius: var(--uo-radius-sm, 9px);
  font-size: 0.8rem;
}
.tl-footer .tl-apply-btn {
  padding: 9px 20px;
  border-radius: var(--uo-radius-sm, 9px);
  font-size: 0.82rem;
}
.tl-apply-btn {
  padding: 4px 13px;
  border-radius: 999px;
  /* The library's one committing control follows the active palette, like the
     rest of the app's accent vocabulary — the indigo literals here were the
     last fixed CTA in a theme-aware modal (user, 2026-10-18). */
  border: 1px solid color-mix(in srgb, var(--th-accent, #6366f1) 50%, transparent);
  background: color-mix(in srgb, var(--th-accent, #6366f1) 22%, transparent);
  color: color-mix(in srgb, var(--th-accent, #6366f1) 40%, #ffffff);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}
.tl-apply-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--th-accent, #6366f1) 40%, transparent);
  border-color: color-mix(in srgb, var(--th-accent, #6366f1) 75%, transparent);
  color: #ffffff;
}
/* Nothing selected: the button is present but visibly inert, rather than
   disappearing and leaving the head with an unexplained gap. */
.tl-apply-btn:disabled {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.34);
  cursor: default;
}
.tl-apply-btn[hidden] {
  display: none;
}

/* Narrow screens: stack the browse column over the scene panel. */
@media (max-width: 900px) {
  .tl-body {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  .tl-scene-panel {
    overflow-y: visible;
    padding-left: 0;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 16px;
  }
  .tl-grid {
    max-height: 240px;
  }
}

/* "Open theme library" buttons beneath the theme-option grids */
.open-theme-library-btn {
  margin-top: 10px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease,
    color 0.18s ease;
}

.open-theme-library-btn:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

/* Scene badge on scene-derived custom themes in the builder lists */
.te-theme-row-scene-badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 1px 7px;
  margin-left: 8px;
  white-space: nowrap;
}

/*._UO-S6-START_*/
/* ═══════════════════════════════════════════════════════════
   SURFACE 6 — theme editor chrome (built 2026-10-10; revised same day
   after the user's first look).
   Refined vocabulary on the ORIGINAL structure (spec §4.6): panel +
   preview-frame radii on the --uo-* scale, accent-soft tab states, tinted
   secondary chrome, NEUTRAL card elevation. Tab PANES and their controls
   keep their own logic — chrome only. Theme-adaptive via local --s6-*
   vars re-mapped under body.custom-theme-active. No ids, class names,
   data-* attrs or close chains touched.
   GATE-1 FEEDBACK APPLIED (2026-10-10, user): NO GLOW — the accent halo
   under the primary button is gone (its --s6-glow var with it); the
   gradient fill stays because the ORIGINAL .te-btn-primary was already a
   gradient. Separator hairlines were far more prominent than the original
   rgba(255,255,255,.07) weight, so the tinted separator is dialled back to
   ~.13 alpha — about the original weight, with a blue cast.
   Strip via lab/zz-uo-remove-uos.mjs.
   ═══════════════════════════════════════════════════════════ */
.te-modal,
.tl-modal {
  --s6-accent: #6366f1;
  --s6-accent-text: var(--accent-header);
  --s6-accent-border: rgba(99, 102, 241, 0.35);
  --s6-accent-soft: rgba(99, 102, 241, 0.16);
  --s6-accent-strong: rgba(99, 102, 241, 0.2);
  --s6-label: #8fa4d4;
  --s6-secondary: #b9c8ea;
  --s6-secondary-bg: rgba(123, 139, 178, 0.12);
  --s6-secondary-border: rgba(123, 139, 178, 0.25);
  --s6-hairline: rgba(123, 139, 178, 0.13);
  --s6-elev: 0 18px 50px rgba(0, 0, 0, 0.35), 0 2px 10px rgba(0, 0, 0, 0.3);
  --s6-ease: 0.18s var(--uo-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}
body.custom-theme-active .te-modal,
body.custom-theme-active .tl-modal {
  --s6-accent: var(--th-accent, #6366f1);
  --s6-accent-text: color-mix(in srgb, var(--th-accent, #6366f1) 55%, var(--th-surface-text, #e8eefc));
  --s6-accent-border: color-mix(in srgb, var(--th-accent, #6366f1) 35%, transparent);
  --s6-accent-soft: color-mix(in srgb, var(--th-accent, #6366f1) 16%, transparent);
  --s6-accent-strong: color-mix(in srgb, var(--th-accent, #6366f1) 20%, transparent);
  --s6-label: color-mix(in srgb, var(--th-accent, #6366f1) 45%, var(--th-surface-text, #e8eefc));
  --s6-secondary: color-mix(in srgb, var(--th-accent, #6366f1) 40%, var(--th-surface-text, #e8eefc));
  --s6-secondary-bg: color-mix(in srgb, var(--th-accent, #6366f1) 8%, transparent);
  --s6-secondary-border: color-mix(in srgb, var(--th-accent, #6366f1) 20%, transparent);
  --s6-hairline: color-mix(in srgb, var(--th-accent, #6366f1) 13%, transparent);
}

/* ── panel shell + header ── */
#themeEditorModal .te-panel {
  /* Radius intentionally absent: the base .te-panel rule owns the family
     shell radius, so there is exactly one place to change it. */
  /* The add-task reference treatment: accent edge + two-layer neutral
     elevation (user, 2026-10-13 — "the exact same glow as it"). */
  border-color: var(--uo-glow-edge);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.35),
    0 2px 10px rgba(0, 0, 0, 0.3);
}
#themeEditorModal .te-header {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--s6-hairline);
  margin-bottom: 16px;
}
#themeEditorModal .te-eyebrow {
  color: var(--s6-accent-text);
}
#themeEditorModal .te-close {
  background: var(--s6-secondary-bg);
  border-color: var(--s6-secondary-border);
  color: var(--s6-secondary);
  transition:
    background var(--s6-ease),
    border-color var(--s6-ease),
    color var(--s6-ease),
    transform var(--s6-ease);
}
#themeEditorModal .te-close:hover {
  background: var(--s6-accent-soft);
  border-color: var(--s6-accent-border);
  color: #ffffff;
}

/* ── tab sidebar (chrome; the panes keep their own controls) ── */
#themeEditorModal .te-tab-btn {
  color: var(--s6-secondary);
  transition:
    background var(--s6-ease),
    border-color var(--s6-ease),
    color var(--s6-ease),
    transform var(--s6-ease);
}
#themeEditorModal .te-tab-btn:hover {
  background: var(--s6-accent-soft);
  border-color: var(--s6-accent-border);
  color: #ffffff;
}
#themeEditorModal .te-tab-btn.active {
  background: var(--s6-accent-strong);
  border-color: var(--s6-accent-border);
  color: color-mix(in srgb, var(--s6-accent) 30%, #ffffff);
}
#themeEditorModal .te-tab-btn:active {
  transform: scale(0.98);
}

/* ── preview frame edges ── */
#themeEditorModal .te-preview-area {
  border-radius: var(--uo-radius-md, 12px);
  border-color: var(--s6-hairline);
  background: var(--s6-secondary-bg);
}
#themeEditorModal .te-preview-header {
  color: var(--s6-label);
}

/* ── footer + button vocabulary ── */
#themeEditorModal .te-footer {
  border-top-color: var(--s6-hairline);
}
#themeEditorModal .te-btn {
  border-radius: var(--uo-radius-sm, 9px);
  transition:
    background var(--s6-ease),
    border-color var(--s6-ease),
    color var(--s6-ease),
    filter 0.18s ease,
    box-shadow 0.2s ease,
    transform 180ms var(--uo-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}
#themeEditorModal .te-btn-primary {
  background: linear-gradient(135deg, var(--s6-accent), color-mix(in srgb, var(--s6-accent) 78%, #000));
}
#themeEditorModal .te-btn-primary:hover {
  filter: brightness(1.08);
}
#themeEditorModal .te-btn-primary:active {
  transform: scale(0.97);
}
body.custom-theme-active #themeEditorModal .te-btn-primary {
  background: var(--s6-accent);
}
#themeEditorModal .te-btn-secondary {
  background: var(--s6-secondary-bg);
  border-color: var(--s6-secondary-border);
  color: var(--s6-secondary);
}
#themeEditorModal .te-btn-secondary:hover {
  background: var(--s6-accent-soft);
  border-color: var(--s6-accent-border);
  color: #ffffff;
}
#themeEditorModal .te-btn-ghost {
  border-color: var(--s6-secondary-border);
  color: var(--s6-secondary);
}
#themeEditorModal .te-btn-ghost:hover {
  background: var(--s6-accent-soft);
  border-color: var(--s6-accent-border);
  color: #ffffff;
}

/* ── footer ⋯ menu ── */
#themeEditorModal .te-footer-menu {
  border-color: var(--s6-hairline);
  border-radius: var(--uo-radius-md, 12px);
  box-shadow: var(--s6-elev);
}
#themeEditorModal .te-menu-item:hover {
  background: var(--s6-accent-soft);
  color: #ffffff;
}

/* ── scene-library dialog inherits the shell tokens (spec §4.6) ── */
#themeEditorModal .te-scene-lib-panel {
  /* Radius lives in the base rule (see the te-panel note above). */
  /* The add-task reference treatment (user, 2026-10-13). */
  border-color: var(--uo-glow-edge);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.35),
    0 2px 10px rgba(0, 0, 0, 0.3);
}
#themeEditorModal .te-scene-lib-eyebrow {
  color: var(--s6-accent-text);
}
#themeEditorModal .te-scene-lib-close {
  background: var(--s6-secondary-bg);
  border-color: var(--s6-secondary-border);
  color: var(--s6-secondary);
}
#themeEditorModal .te-scene-lib-close:hover {
  background: var(--s6-accent-soft);
  border-color: var(--s6-accent-border);
  color: #ffffff;
}

/* ── theme-library dialog (sibling modal) inherits the same register ── */
.tl-panel {
  /* Radius lives in the base .tl-panel rule above. */
  /* The add-task reference treatment (user, 2026-10-13). */
  border-color: var(--uo-glow-edge);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.35),
    0 2px 10px rgba(0, 0, 0, 0.3);
}
.tl-header {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--s6-hairline);
  margin-bottom: 16px;
}
.tl-eyebrow {
  color: var(--s6-accent-text);
}
.tl-close {
  background: var(--s6-secondary-bg);
  color: var(--s6-secondary);
  /* `transform` must stay in the list or the family hover spin snaps
     instantly instead of easing like every other close control. */
  transition:
    background var(--s6-ease),
    color var(--s6-ease),
    transform var(--s6-ease);
}
.tl-close:hover {
  background: var(--s6-accent-soft);
  color: #ffffff;
}
/* ── icon shells inside the chrome ──
   The icon partials embedded by the builder declare no width/height, so an
   inline <svg> falls back to its 300×150 default box and blows the chrome
   apart (giant tab glyphs, labels pushed onto the next tab). Pin the
   gate-approved placeholder geometry: 14px box, 6px gap, −2px baseline.
   16px for the round close button, matching the icon it replaces. ── */
#themeEditorModal .te-tab-btn svg,
#themeEditorModal .te-btn svg,
#themeEditorModal .te-menu-item svg,
#themeEditorModal .te-color-picker-arrow svg,
#themeEditorModal .te-tooltip-trigger svg {
  width: 14px;
  height: 14px;
  flex: none;
  vertical-align: -2px;
}
#themeEditorModal .te-tab-btn svg,
#themeEditorModal .te-btn svg,
#themeEditorModal .te-menu-item svg {
  margin-right: 6px;
}
#themeEditorModal .te-close svg,
.te-scene-lib-close svg,
.tl-close svg {
  width: 16px;
  height: 16px;
}
/*._UO-S6-END_*/

/* ═══════════════════════════════════════════════════════════════════════
   Builder + library dialogs follow the active theme (2026-10-21)

   These two dialogs were the last surfaces pinned to the site navy:
   `.te-panel` / `.te-scene-lib-panel` / `.tl-panel` hardcode
   `rgba(10,18,34,.98)` or `#0b111f`, and everything inside them is white at a
   fixed alpha, plus indigo for tabs, sliders and selected cards. Applied over
   a warm or olive theme the dialog read as a navy slab dropped into a brown
   page (user: "theme library and theme builder modal colors are hardcoded").

   The panels now take the same `--th-surface` every other themed panel uses,
   and re-derive a three-level text register plus hairlines and washes from
   `--th-surface-text`, so the hierarchy (title → label → meta) survives on a
   light surface as well as a dark one. Accents (active tab, selected card,
   slider thumb, focus rings) read `--th-accent`.

   Deliberately NOT remapped: `.te-preview-*` and `.te-color-preview-card` are
   simulated timers rendered on their own backdrop, and `.te-btn-primary` keeps
   white text on the accent so the CTA stays legible at every accent value.
   ═══════════════════════════════════════════════════════════════════════ */

body.custom-theme-active .te-panel,
body.custom-theme-active .te-scene-lib-panel,
body.custom-theme-active .tl-panel {
  --dlg-fg: var(--th-surface-text, #ffffff);
  --dlg-fg-2: color-mix(in srgb, var(--dlg-fg) 74%, transparent);
  --dlg-fg-3: color-mix(in srgb, var(--dlg-fg) 48%, transparent);
  --dlg-fg-4: color-mix(in srgb, var(--dlg-fg) 30%, transparent);
  --dlg-line: color-mix(in srgb, var(--dlg-fg) 13%, transparent);
  --dlg-wash: color-mix(in srgb, var(--dlg-fg) 5%, transparent);
  --dlg-wash-2: color-mix(in srgb, var(--dlg-fg) 9%, transparent);
  --dlg-accent: var(--th-accent, #6366f1);
  scrollbar-color: var(--dlg-line) transparent;
}

/* The shell background itself is set in timer.css next to the other themed
   dialogs (it needs the page-level accent rules that live there). Inside it,
   the library's live-preview well and its rail hairline were still literal
   white alphas, which disappear on a light surface. */
body.custom-theme-active .tl-panel .tl-scene-panel {
  border-left-color: var(--dlg-line);
}

body.custom-theme-active .tl-panel .tl-preview-stage {
  background: var(--dlg-wash);
  border-color: var(--dlg-line);
}

/* ── text register ── */
body.custom-theme-active .te-panel .te-title,
body.custom-theme-active .te-scene-lib-panel .te-scene-lib-title,
body.custom-theme-active .tl-panel .tl-title,
body.custom-theme-active .te-panel .te-close:hover,
body.custom-theme-active .te-scene-lib-panel .te-scene-lib-close:hover,
body.custom-theme-active .tl-panel .tl-close:hover,
body.custom-theme-active .te-panel .te-menu-item:hover,
body.custom-theme-active .te-panel .te-theme-row-apply:hover,
body.custom-theme-active .te-panel .te-theme-row-more:hover,
body.custom-theme-active .te-panel .te-scene-lib-search,
body.custom-theme-active .tl-panel .tl-search,
body.custom-theme-active .te-panel .te-scene-select,
body.custom-theme-active .te-panel .te-select,
body.custom-theme-active .te-panel .te-text-input,
body.custom-theme-active .tl-panel .tl-filter-pill:hover,
body.custom-theme-active .tl-panel .tl-editor-reset:hover,
body.custom-theme-active .te-panel .te-shell-chip:hover,
body.custom-theme-active .te-panel .te-shell-chip.active {
  color: var(--dlg-fg);
}

body.custom-theme-active .te-panel .te-tab-btn,
body.custom-theme-active .te-panel .te-scene-card,
body.custom-theme-active .te-panel .te-shell-chip,
body.custom-theme-active .te-panel .te-menu-item,
body.custom-theme-active .te-panel .te-btn-secondary,
body.custom-theme-active .te-panel .te-btn-ghost,
body.custom-theme-active .te-panel .te-theme-row-apply,
body.custom-theme-active .te-panel .te-file-input,
body.custom-theme-active .te-scene-lib-panel .te-lib-mood,
body.custom-theme-active .tl-panel .tl-filter-pill,
body.custom-theme-active .tl-panel .tl-editor-reset,
body.custom-theme-active .te-panel .te-toggle-state,
body.custom-theme-active .te-panel .te-scene-bg-swatch .te-swatch-tooltip {
  color: var(--dlg-fg-2);
}

body.custom-theme-active .te-panel .te-close,
body.custom-theme-active .te-panel .te-label,
body.custom-theme-active .te-panel .te-range-val,
body.custom-theme-active .te-panel .te-color-picker-label,
body.custom-theme-active .te-panel .te-scene-bg-label,
body.custom-theme-active .te-panel .te-toggle-state,
body.custom-theme-active .te-panel .te-tooltip-trigger,
body.custom-theme-active .te-panel .te-theme-row-scene-badge,
body.custom-theme-active .te-panel .te-text-input::placeholder,
body.custom-theme-active .tl-panel .tl-eyebrow,
body.custom-theme-active .tl-panel .tl-section-label,
body.custom-theme-active .tl-panel .tl-count,
body.custom-theme-active .tl-panel .tl-preview-empty,
body.custom-theme-active .tl-panel .tl-search::placeholder,
body.custom-theme-active .te-scene-lib-panel .te-scene-lib-close,
body.custom-theme-active .te-scene-lib-panel .te-scene-lib-count,
body.custom-theme-active .te-scene-lib-panel .te-scene-lib-search::placeholder,
body.custom-theme-active .tl-panel .tl-close {
  color: var(--dlg-fg-3);
}

body.custom-theme-active .te-panel .te-color-picker-arrow,
body.custom-theme-active .te-panel .te-color-picker--compact .te-color-picker-arrow {
  color: var(--dlg-fg-4);
}

/* ── surfaces inside the dialog ── */
body.custom-theme-active .te-panel .te-tab-btn:hover {
  background: color-mix(in srgb, var(--dlg-accent) 12%, transparent);
}

body.custom-theme-active .te-panel .te-tab-btn.active {
  background: color-mix(in srgb, var(--dlg-accent) 22%, transparent);
  border-color: color-mix(in srgb, var(--dlg-accent) 44%, transparent);
  color: color-mix(in srgb, var(--dlg-accent) 52%, var(--dlg-fg));
}

body.custom-theme-active .te-panel .te-scene-card {
  background: var(--dlg-wash);
  border-color: var(--dlg-line);
}

body.custom-theme-active .te-panel .te-scene-card:hover {
  background: color-mix(in srgb, var(--dlg-accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--dlg-accent) 42%, transparent);
}

body.custom-theme-active .te-panel .te-scene-card.active {
  background: color-mix(in srgb, var(--dlg-accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--dlg-accent) 62%, transparent);
  color: color-mix(in srgb, var(--dlg-accent) 38%, var(--dlg-fg));
}

body.custom-theme-active .te-panel .te-shell-chip {
  background: var(--dlg-wash);
  border-color: var(--dlg-line);
}

body.custom-theme-active .te-panel .te-shell-chip:hover {
  background: var(--dlg-wash-2);
  border-color: var(--dlg-fg-4);
}

body.custom-theme-active .te-panel .te-shell-chip.active {
  background: var(--dlg-wash-2);
  border-color: var(--dlg-fg-3);
  box-shadow: inset 0 0 0 1px var(--dlg-line);
}

body.custom-theme-active .te-panel .te-text-input,
body.custom-theme-active .te-panel .te-select,
body.custom-theme-active .te-panel .te-scene-select,
body.custom-theme-active .te-panel .te-scene-lib-search,
body.custom-theme-active .tl-panel .tl-search {
  background: var(--dlg-wash);
  border-color: var(--dlg-line);
}

body.custom-theme-active .te-panel .te-select option {
  background: var(--th-surface, #0f172a);
  color: var(--dlg-fg);
}

body.custom-theme-active .te-panel .te-btn-secondary,
body.custom-theme-active .te-panel .te-btn-ghost {
  background: var(--dlg-wash);
  border-color: var(--dlg-line);
}

body.custom-theme-active .te-panel .te-btn-secondary:hover,
body.custom-theme-active .te-panel .te-btn-ghost:hover {
  background: var(--dlg-wash-2);
}

body.custom-theme-active .te-panel .te-footer {
  border-top-color: var(--dlg-line);
}

body.custom-theme-active .te-panel .te-tabs-sidebar {
  border-color: var(--dlg-line);
}

/* The custom swatch has no colour of its own, so it must not keep the white
   wash: on a light surface it vanished entirely. */
body.custom-theme-active .te-panel .te-scene-bg-swatch--custom {
  background: var(--dlg-wash);
  border-color: var(--dlg-line);
  color: var(--dlg-fg-3);
}

body.custom-theme-active .te-panel .te-scene-bg-swatch--custom:hover {
  background: color-mix(in srgb, var(--dlg-accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--dlg-accent) 48%, transparent);
  color: color-mix(in srgb, var(--dlg-accent) 45%, var(--dlg-fg));
}

body.custom-theme-active .te-panel .te-scene-bg-swatch.active {
  border-color: var(--dlg-fg);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dlg-accent) 55%, transparent);
}

body.custom-theme-active .te-panel .te-scene-bg-swatch:focus-visible,
body.custom-theme-active .te-panel .te-scene-combo-swatch:focus-visible {
  outline-color: color-mix(in srgb, var(--dlg-accent) 60%, transparent);
}

body.custom-theme-active .tl-panel .tl-filter-pill.active {
  background: var(--dlg-fg);
  color: var(--th-surface, #0b111f);
}

body.custom-theme-active .tl-panel .tl-search:focus {
  border-color: var(--dlg-fg-4);
}

/* Sliders: the indigo thumb gradient was the loudest leftover indigo in the
   builder — on a warm theme the track and thumb now belong to the palette. */
body.custom-theme-active .te-panel .te-range,
body.custom-theme-active .te-panel .te-range::-moz-range-track {
  background: var(--dlg-line);
}

body.custom-theme-active .te-panel .te-range:hover {
  background: var(--dlg-fg-4);
}

body.custom-theme-active .te-panel .te-range::-webkit-slider-thumb,
body.custom-theme-active .te-panel .te-range::-moz-range-thumb {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--dlg-accent) 62%, #fff),
    var(--dlg-accent)
  );
  border-color: var(--dlg-fg);
}

body.custom-theme-active .te-panel .te-toggle-track {
  background: var(--dlg-wash-2);
  border-color: var(--dlg-line);
}

/* Floating menus that belong to the dialog wall (footer ⋯ menu, row menu,
   tooltip) ride the same tokens. They are children of the panel, so the
   `--dlg-*` values resolve. */
body.custom-theme-active .te-panel .te-footer-menu,
body.custom-theme-active .te-panel .te-theme-row-menu,
body.custom-theme-active .te-panel .te-tooltip,
body.custom-theme-active .te-scene-lib-panel .te-tooltip {
  background: var(--th-surface, rgba(10, 18, 34, 0.98));
  border-color: var(--dlg-line);
  color: var(--dlg-fg-2);
}

/* Coarse pointers (phones and tablets): compact icon controls were 19–34px,
   below a comfortable tap target. Isolated controls sell hit area through a
   centred pseudo-element; stacked task buttons grow instead, so two 44px
   targets never overlap. */
@media (pointer: coarse) {
  #qsCloseBtn,
  #taskPopupClose,
  #patchNotesCloseBtn,
  #dismissUpdateNoticeBtn,
  #statisticsCloseBtn,
  #sessionLogClose,
  #teCloseBtn,
  #teSceneLibClose,
  #tlClose,
  .qs-tile-edit,
  .qs-step-btn {
    position: relative;
  }

  #qsCloseBtn::after,
  #taskPopupClose::after,
  #patchNotesCloseBtn::after,
  #dismissUpdateNoticeBtn::after,
  #statisticsCloseBtn::after,
  #sessionLogClose::after,
  #teCloseBtn::after,
  #teSceneLibClose::after,
  #tlClose::after,
  .qs-tile-edit::after,
  .qs-step-btn::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  .task-actions {
    gap: 10px;
  }

  .task-done-toggle,
  .task-edit-btn,
  .task-delete-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 8px 10px;
  }
}