/* Additional palettes, pattern controls and locally saved looks. */
html[data-background="orbit"] .background-canvas,
html[data-background="horizon"] .background-canvas { display: block; }

html {
  --aurora-1a: #6d7bff; --aurora-1b: #3a2fd0;
  --aurora-2a: #22d3ee; --aurora-2b: #0b7aa6;
  --aurora-3a: #c084fc; --aurora-3b: #7a2fd0;
  --aurora-lite-a: rgba(99, 103, 222, .22); --aurora-lite-b: rgba(22, 148, 174, .15);
  --palette-preview: linear-gradient(135deg, #a08eff, #5dd4d8);
}
html[data-bg-palette="tide"] {
  --aurora-1a: #59d3e4; --aurora-1b: #107b9d;
  --aurora-2a: #74e0e0; --aurora-2b: #177c83;
  --aurora-3a: #739ff4; --aurora-3b: #3447a6;
  --aurora-lite-a: rgba(39, 163, 188, .24); --aurora-lite-b: rgba(49, 179, 161, .17);
  --palette-preview: linear-gradient(135deg, #64d5de, #397fc1);
}
html[data-bg-palette="ember"] {
  --aurora-1a: #ffb474; --aurora-1b: #bb4a42;
  --aurora-2a: #f273a0; --aurora-2b: #a0376c;
  --aurora-3a: #eac079; --aurora-3b: #a56833;
  --aurora-lite-a: rgba(231, 130, 91, .25); --aurora-lite-b: rgba(191, 79, 126, .17);
  --palette-preview: linear-gradient(135deg, #f9b378, #e46e92);
}
html[data-bg-palette="forest"] {
  --aurora-1a: #93e3af; --aurora-1b: #347757;
  --aurora-2a: #54cbb2; --aurora-2b: #16786e;
  --aurora-3a: #bddf85; --aurora-3b: #5e8a37;
  --aurora-lite-a: rgba(91, 169, 109, .23); --aurora-lite-b: rgba(41, 157, 132, .16);
  --palette-preview: linear-gradient(135deg, #a3dd98, #39bfa8);
}
html[data-bg-palette="mono"] {
  --aurora-1a: #b2c3dc; --aurora-1b: #50617e;
  --aurora-2a: #8b9aad; --aurora-2b: #3b4b65;
  --aurora-3a: #d1d7e6; --aurora-3b: #768299;
  --aurora-lite-a: rgba(132, 150, 176, .22); --aurora-lite-b: rgba(99, 117, 142, .16);
  --palette-preview: linear-gradient(135deg, #c7d3e4, #6e819c);
}
html[data-background="aurora"] .o1 { background: radial-gradient(circle at 35% 35%, var(--aurora-1a), var(--aurora-1b) 55%, transparent 72%); }
html[data-background="aurora"] .o2 { background: radial-gradient(circle at 60% 40%, var(--aurora-2a), var(--aurora-2b) 55%, transparent 72%); }
html[data-background="aurora"] .o3 { background: radial-gradient(circle at 50% 50%, var(--aurora-3a), var(--aurora-3b) 55%, transparent 72%); }
html[data-background="aurora"][data-lite="on"] .bg {
  background: radial-gradient(ellipse at 10% 0%, var(--aurora-lite-a), transparent 44%), radial-gradient(ellipse at 90% 100%, var(--aurora-lite-b), transparent 44%);
}

.art-orbit { background: radial-gradient(ellipse at 55% 50%, #38336b, #0e1427 68%); }
.art-orbit::before, .art-orbit::after { content: ""; position: absolute; left: 18%; top: 20%; width: 64%; height: 55%; border: 1px solid rgba(192, 185, 255, .6); border-radius: 50%; transform: rotate(-22deg); }
.art-orbit::after { left: 26%; top: 11%; width: 50%; height: 73%; transform: rotate(27deg); border-color: rgba(136, 209, 224, .45); }
.art-horizon { background: linear-gradient(0deg, rgba(144, 118, 184, .17), transparent 48%), repeating-linear-gradient(0deg, transparent 0 8px, rgba(208, 169, 208, .28) 9px, transparent 10px 14px), radial-gradient(circle at 62% 38%, #e5a4a9 0 11px, transparent 12px), linear-gradient(#21192f 45%, #101729 46%); }

.palette-field { display: grid; grid-template-columns: 27px minmax(0, 1fr); align-items: center; gap: 9px; }
.palette-indicator { width: 27px; height: 27px; border-radius: 50%; background: var(--palette-preview); box-shadow: 0 0 0 3px rgba(190, 186, 232, .1); }
.palette-field select, .seed-control input { min-width: 0; width: 100%; padding: 8px 9px; font-size: 11px; border-radius: 7px; }
.scene-advanced-fields label output { float: right; color: #b7aaff; font: 600 10px var(--font-mono); }
.scene-advanced-fields .pattern-range { margin: 7px 0 12px; }
.seed-control { display: flex; gap: 7px; }
.seed-control button, .look-save-form button, .look-item button, .look-clear-invalid {
  border: 1px solid rgba(184, 171, 255, .28); border-radius: 7px; background: rgba(156, 136, 249, .11); color: #e0d9ff; cursor: pointer; font: 600 11px var(--font-sans);
}
.seed-control button { padding: 7px 10px; }
.seed-control button:hover, .look-save-form button:hover, .look-item button:hover, .look-clear-invalid:hover { background: rgba(156, 136, 249, .24); }
.seed-control button:focus-visible, .look-save-form button:focus-visible, .look-item button:focus-visible, .look-clear-invalid:focus-visible { outline: 2px solid #b6a8ff; outline-offset: 3px; }
.studio-controls:has(.scene-advanced[open]) { position: static !important; }
@supports not selector(:has(*)) { .studio-controls { position: static !important; } }

.looks-panel .studio-section-heading { margin-bottom: 10px; }
.looks-intro { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 0 0 16px; }
.look-save-form { display: flex; gap: 8px; }
.look-save-form input { min-width: 0; flex: 1; font-size: 12px; padding: 10px 12px; border-radius: 8px; }
.look-save-form button { flex: none; padding: 9px 13px; }
.look-save-form button span { margin-left: 4px; font-size: 15px; }
.look-save-form button:disabled { opacity: .5; cursor: not-allowed; }
.look-status { color: #cfc6ff; font-size: 11px; line-height: 1.45; margin: 10px 0 0; }
.look-status:empty { display: none; }
.look-empty { color: var(--muted); font-size: 11px; margin: 14px 0 0; padding: 13px; border: 1px dashed rgba(190, 198, 232, .18); border-radius: 8px; text-align: center; }
.look-list { list-style: none; display: grid; gap: 8px; padding: 0; margin: 12px 0 0; }
.look-list:empty { display: none; }
.look-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid rgba(190, 198, 232, .1); background: rgba(255, 255, 255, .025); border-radius: 9px; }
.look-swatch { width: 28px; height: 28px; border-radius: 7px; background: linear-gradient(135deg, #a08eff, #5dd4d8); }
.look-swatch[data-palette="tide"] { background: linear-gradient(135deg, #64d5de, #397fc1); }
.look-swatch[data-palette="ember"] { background: linear-gradient(135deg, #f9b378, #e46e92); }
.look-swatch[data-palette="forest"] { background: linear-gradient(135deg, #a3dd98, #39bfa8); }
.look-swatch[data-palette="mono"] { background: linear-gradient(135deg, #c7d3e4, #6e819c); }
.look-copy { min-width: 0; }
.look-copy strong, .look-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.look-copy strong { font-size: 12px; color: var(--ink); white-space: normal; overflow-wrap: anywhere; }
.look-copy small { font-size: 10px; color: var(--muted); margin-top: 2px; }
.look-item button { padding: 7px 9px; }
.look-item .look-remove { color: var(--muted); background: transparent; border-color: transparent; }
.look-clear-invalid { margin-top: 10px; padding: 8px 10px; }

html[data-theme="light"] .seed-control button, html[data-theme="light"] .look-save-form button, html[data-theme="light"] .look-item button, html[data-theme="light"] .look-clear-invalid { color: #4b3e99; background: #f0edff; border-color: #d4cbf8; }
html[data-theme="light"] .look-item { background: #f8f9fd; border-color: #e3e6f0; }
html[data-theme="light"] .look-item .look-remove { color: #59627b; background: transparent; border-color: transparent; }
html[data-theme="light"] .look-empty { border-color: #cbd2e1; }
html[data-theme="light"] .look-status, html[data-theme="light"] .scene-advanced-fields label output { color: #5146a6; }
html[data-theme="light"] .studio-section-meta, html[data-theme="light"] .studio-privacy, html[data-theme="light"] .pointer-copy small { color: #596780; }
@media (max-height: 750px) { .studio-controls { position: static !important; } }
@media (max-width: 440px) {
  .look-item { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; }
  .look-item .look-remove { grid-column: 3; padding-top: 3px; padding-bottom: 3px; }
}