/* v6.1: light-first setup and image editor; playback remains unchanged. */
:root:not([data-theme="dark"]) { color-scheme:light; --bg:#f5f7fa; --line:#e1e7ef; --text:#191f28; --muted:#66758a; --accent:#3182f6; }
:root:not([data-theme="dark"]) #setup { background:radial-gradient(ellipse at 50% 15%,#eaf2ff,transparent 65%),#f5f7fa; }
:root:not([data-theme="dark"]) .console { background:#fff; border-color:var(--line); box-shadow:0 16px 48px #23477c0c; border-radius:20px; }
:root:not([data-theme="dark"]) .console-head { background:#f8faff; color:#66758a; }
:root:not([data-theme="dark"]) .dot { background:#c5d1e0; }
:root:not([data-theme="dark"]) .dot:first-child { background:var(--accent); }
:root:not([data-theme="dark"]) .log span:last-child { color:#334155; }
:root:not([data-theme="dark"]) .log.ok span:first-child { color:#087f5b; }
:root:not([data-theme="dark"]) .log.warn span:first-child { color:#9c6500; }
:root:not([data-theme="dark"]) .log.error span:first-child { color:#c92a3d; }
:root:not([data-theme="dark"]) .log.info span:first-child { color:#2464ba; }
:root:not([data-theme="dark"]) .log.dim span { color:#66758a !important; }
:root:not([data-theme="dark"]) .meter { background:#eaf0f8; }
:root:not([data-theme="dark"]) .launch { background:#3182f6; color:#fff; border-radius:14px; }
:root:not([data-theme="dark"]) .launch:hover:not(:disabled) { background:#1b64da; }
:root:not([data-theme="dark"]) .text-button,:root:not([data-theme="dark"]) .note { color:#66758a; }
:root:not([data-theme="dark"]) .setup-tool { background:#fff; }
:root:not([data-theme="dark"]) #settingsDialog { background:#fff; color-scheme:light; box-shadow:0 24px 80px #132f5730; }
:root:not([data-theme="dark"]) #settingsDialog::backdrop { background:#15294466; }
:root:not([data-theme="dark"]) #settingsDialog button,:root:not([data-theme="dark"]) .upload-label { background:#f2f6fc; border-color:#dce5f0; color:#334155; }
:root:not([data-theme="dark"]) #settingsDialog textarea,:root:not([data-theme="dark"]) .settings-grid input { background:#f9fbfe; border-color:#dce5f0; color:#191f28; }
:root:not([data-theme="dark"]) #settingsMessage.settings-error { color:#c92a3d; }
button:focus-visible { outline-color:var(--accent); }
.settings-bottom { position:sticky; bottom:-26px; padding:16px 0; background:#10171f; z-index:2; }
:root:not([data-theme="dark"]) .settings-bottom { background:#fff; }
#settingsDialog .apply-settings { width:100%; min-height:56px; border:0; border-radius:12px; font-size:17px; font-weight:750; background:var(--accent); color:#142012; }
:root:not([data-theme="dark"]) #settingsDialog .apply-settings { background:#3182f6; color:#fff; }
.image-editor { grid-column:1/-1; min-width:0; border:1px solid var(--line); border-radius:14px; padding:18px; }
.image-editor h3 { margin:0 0 8px; font-size:18px; }
.image-add { display:flex; gap:8px; margin:12px 0; flex-wrap:wrap; }
.image-add .image-path { flex:1; min-width:180px; }
.image-editor button { min-height:40px; flex-shrink:0; }
.image-list { display:grid; gap:8px; max-height:340px; overflow:auto; margin:16px 0; }
.image-row { display:flex; align-items:center; gap:6px; min-width:0; }
.image-row img { width:42px; height:42px; object-fit:cover; border-radius:7px; background:var(--line); flex-shrink:0; }
.image-row input { flex:1; width:0; }
#settingsDialog .image-row button { padding:8px; }
.image-json { border-top:1px solid var(--line); padding-top:12px; }
.image-json summary { cursor:pointer; font-size:13px; color:var(--muted); }
.image-json textarea { margin:12px 0; width:100%; }
.settings-grid .image-editor .history-toggle { display:flex; flex-direction:row; align-items:center; gap:10px; margin-top:20px; }
.image-history { border-top:1px solid var(--line); margin-top:12px; }
.history-row { display:flex; gap:8px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
.history-row span { flex:1; font-size:12px; overflow-wrap:anywhere; }
@media(max-width:520px) { .image-editor { padding:12px; } .image-row { flex-wrap:wrap; } .image-row input { min-width:100px; } .settings-bottom { bottom:-18px; } .history-row { flex-wrap:wrap; } }

/* Header/footer component styles — scoped to setup only. */
#setup .brand { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; padding:0 0 22px; border-bottom:1px solid var(--line); letter-spacing:normal; }
#setup .brand-lockup { display:flex; align-items:center; gap:13px; min-width:0; }
#setup .brand-symbol { display:grid; grid-template-columns:repeat(2,9px); grid-template-rows:repeat(2,9px); gap:4px; align-content:center; justify-content:center; width:50px; height:50px; flex-shrink:0; border:1px solid #ffffff22; border-radius:16px; background:linear-gradient(145deg,#294535,#15251d); box-shadow:0 5px 14px #0002; transform:rotate(-5deg); }
#setup .brand-symbol i { background:var(--accent); border-radius:2px; }
#setup .brand-symbol i:nth-child(2) { opacity:.5; }
#setup .brand-symbol i:nth-child(3) { opacity:.75; }
#setup .brand-copy { display:flex; flex-direction:column; gap:5px; }
#setup .brand .mark { color:var(--text); font-size:20px; line-height:1.2; font-weight:800; letter-spacing:-.04em; }
#setup .brand-caption { font-size:10px; font-weight:650; letter-spacing:.14em; color:var(--muted); }
#setup .brand .edition { display:inline-flex; align-items:center; gap:7px; flex-shrink:0; padding:8px 11px; border:1px solid var(--line); border-radius:9px; font-size:10px; font-weight:700; letter-spacing:.08em; background:#ffffff05; }
#setup .footer { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px; margin-top:14px; border:1px solid var(--line); border-radius:14px; background:#ffffff04; font-size:12px; line-height:1.6; }
#setup .footer-message { display:flex; align-items:center; gap:12px; min-width:0; }
#setup .footer-icon { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:11px; background:#b5f58812; color:var(--accent); flex-shrink:0; font-size:18px; font-weight:600; }
#setup .footer-copy { display:flex; flex-direction:column; gap:3px; min-width:0; }
#setup .footer-label { color:var(--text); font-size:12px; font-weight:750; }
#setup #summary { overflow-wrap:anywhere; }
#setup #retry { flex-shrink:0; border:1px solid var(--line); border-radius:9px; padding:9px 12px; background:#ffffff07; color:var(--text); text-decoration:none; font-size:12px; transition:background .15s,border-color .15s; }
#setup #retry:hover:not(:disabled) { border-color:var(--accent); background:#b5f58810; }
#setup .source-note { display:flex; align-items:flex-start; gap:8px; margin:15px 4px 0; color:var(--muted); font-size:11px; line-height:1.7; }
#setup .source-note::before { content:''; width:5px; height:5px; border:1px solid currentColor; border-radius:50%; margin-top:6px; flex-shrink:0; }
#setup .source-note .note { margin:0; font-size:inherit; color:inherit; overflow-wrap:anywhere; }
:root:not([data-theme="dark"]) #setup .brand-symbol { background:linear-gradient(145deg,#4c98ff,#2469e3); border-color:#ffffff70; box-shadow:0 6px 16px #3182f62b; }
:root:not([data-theme="dark"]) #setup .brand-symbol i { background:#fff; }
:root:not([data-theme="dark"]) #setup .brand .edition { background:#eaf2ff; color:#286bd1; border-color:#d5e5ff; }
:root:not([data-theme="dark"]) #setup .footer { background:#fff; box-shadow:0 4px 16px #23477c05; }
:root:not([data-theme="dark"]) #setup .footer-icon { background:#edf4ff; color:#3182f6; }
:root:not([data-theme="dark"]) #setup #retry { background:#f4f8fe; color:#286bd1; border-color:#deE9f9; }
:root:not([data-theme="dark"]) #setup #retry:hover:not(:disabled) { background:#eaf2ff; border-color:#a9caff; }
@media(max-width:480px) { #setup .brand { gap:10px; } #setup .brand-symbol { width:42px; height:42px; border-radius:13px; } #setup .brand-lockup { gap:10px; } #setup .brand .mark { font-size:18px; } #setup .brand-caption { font-size:8px; letter-spacing:.1em; } #setup .brand .edition { font-size:8px; padding:7px 8px; } #setup .footer { flex-wrap:wrap; padding:14px; gap:12px; } #setup #retry { margin-left:auto; } }