.theme-panel{--tp-bg:#f1f0f3;--tp-panel:#ffffff;--tp-ink:#252330;--tp-muted:#5d5a68;--tp-line:#c4c0cd;--tp-accent:#6a45c8;--tp-bad:#b3261e;color:var(--tp-ink);font:14px/1.5 system-ui,sans-serif;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:16px;align-items:start}
.theme-controls{display:grid;gap:12px;min-width:0}
#surface-view[data-surface="theme"]:not([hidden]){width:min(1560px,calc(100% - 24px))}
:where(html[data-theme="dark"]) .theme-panel{--tp-bg:#19191f;--tp-panel:#25252e;--tp-ink:#eeedf5;--tp-muted:#b3afc1;--tp-line:#514d61;--tp-accent:#b6a1ff;--tp-bad:#ffb3be}
html[data-fairystack-skin] .theme-panel{--tp-bg:var(--skin-page);--tp-panel:var(--skin-panel);--tp-ink:var(--skin-ink);--tp-muted:var(--skin-muted);--tp-line:var(--skin-line);--tp-accent:var(--skin-accent);--tp-bad:var(--skin-bad)}
.theme-panel *{box-sizing:border-box}
.theme-panel button{background:var(--tp-panel);color:var(--tp-ink);border:1px solid var(--tp-line);border-radius:4px;padding:5px 12px;cursor:pointer;font:inherit;font-size:13px}
.theme-panel button[aria-pressed="true"]{background:var(--tp-ink);color:var(--tp-panel);border-color:var(--tp-ink)}
.theme-panel button:disabled{color:var(--tp-muted);cursor:wait}
.theme-panel :is(button,input,.wallpaper-focus):focus-visible{outline:3px solid var(--tp-accent);outline-offset:2px}
.theme-panel input[type="range"],.theme-panel input[type="checkbox"]{accent-color:var(--tp-accent)}
.theme-head{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between}
.theme-head h1{margin:0;font-size:17px}
.theme-modes{display:flex;gap:3px}
.theme-error{margin:0;font-size:12px;color:var(--tp-bad)}
.theme-label{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tp-muted)}
.theme-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.theme-panel .theme-swatch{display:grid;gap:6px;padding:6px;text-align:left;border-radius:6px;background:var(--tp-panel);color:var(--tp-ink)}
.theme-panel .theme-swatch[aria-pressed="true"]{background:var(--tp-panel);color:var(--tp-ink);border-color:var(--tp-accent);box-shadow:0 0 0 2px var(--tp-accent)}
.theme-swatch-art{position:relative;display:block;height:70px;padding:8px;border-radius:4px;background:var(--swatch-page);border:1px solid var(--swatch-line);overflow:hidden}
.swatch-panel{display:grid;gap:4px;align-content:start;height:100%;width:72%;padding:6px 8px;background:var(--swatch-panel);border:1px solid var(--swatch-line);border-radius:min(var(--swatch-radius),10px)}
.swatch-panel b{font:700 15px/1 var(--swatch-font);color:var(--swatch-ink)}
.swatch-panel i{display:block;height:3px;border-radius:2px;background:var(--swatch-muted)}
.swatch-panel i+i{width:60%;background:var(--swatch-accent)}
.swatch-button{position:absolute;right:8px;bottom:8px;width:24px;height:12px;border-radius:min(var(--swatch-radius),6px);background:var(--swatch-button)}
.theme-swatch-name{font-size:12px;line-height:1.3;overflow-wrap:anywhere}
.theme-swatch[aria-pressed="true"] .theme-swatch-name{font-weight:700}
.theme-wallpaper,.theme-decorations{padding:12px;border:1px solid var(--tp-line);border-radius:6px;background:var(--tp-panel);color:var(--tp-ink)}
.theme-wallpaper-head,.theme-decorations{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.theme-wallpaper label,.theme-decorations label{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--tp-ink)}
.theme-wallpaper output{min-width:3ch;font-size:12px;color:var(--tp-muted)}
:is(.theme-wallpaper [data-wallpaper-status],.theme-decorations [data-decorations-status]){margin:0;font-size:12px;color:var(--tp-muted)}
.theme-wallpaper [data-wallpaper-status]{margin-top:6px}
:is(.theme-wallpaper [data-wallpaper-status],.theme-decorations [data-decorations-status]).failed{color:var(--tp-bad)}
.theme-decorations [data-decorations]{display:flex;flex-wrap:wrap;gap:8px 16px}
.theme-wallpapers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:8px 0 0;padding:0;list-style:none}
.theme-wallpaper [data-wallpaper-status]:empty,.theme-wallpapers:empty{display:none}
.theme-wallpapers li{display:grid;gap:6px;justify-items:start;min-width:0;padding:8px;border:1px solid var(--tp-line);border-radius:4px;background:var(--tp-bg);color:var(--tp-ink)}
.theme-wallpapers li button{padding:3px 10px;font-size:12px}
.theme-download{font-size:12px;color:var(--tp-ink)}
.theme-feed{margin:12px 0 0}
.theme-feed a{color:var(--tp-ink)}
.theme-feed p{margin:4px 0 0;font-size:12px;color:var(--tp-muted)}
.theme-feed p:empty{display:none}
.wallpaper-focus{position:relative;display:inline-block;max-width:100%;line-height:0;cursor:crosshair;touch-action:none;user-select:none}
.wallpaper-focus img{display:block;max-width:min(200px,100%);max-height:150px;border-radius:2px}
.wallpaper-marker{position:absolute;width:18px;height:18px;border:2px solid #ffffff;border-radius:50%;box-shadow:0 0 0 2px #000000b3,inset 0 0 0 2px #000000b3;transform:translate(-50%,-50%);pointer-events:none}
.theme-preview{position:sticky;top:12px;display:grid;gap:6px;min-width:0}
.theme-preview-bar{display:flex;gap:8px;align-items:center;justify-content:space-between}
.theme-panel .theme-preview-bar button{padding:2px 10px;font-size:12px}
.theme-preview-stage{position:relative;overflow:hidden;border:1px solid var(--tp-line);border-radius:6px;background:var(--tp-bg);min-height:120px}
.theme-preview-stage .console-preview-frame{position:absolute;left:0;top:0;display:block;border:0;background:var(--tp-bg);color:var(--tp-ink)}
.theme-slots{display:flex;flex-wrap:wrap;gap:2px}
.theme-wallpapers [data-wallpaper-zoom]{min-width:0;width:100%}
.theme-panel .theme-slots button{padding:2px 7px;font-size:11px;border-radius:3px}
.theme-wallpaper-row{display:flex;gap:8px;align-items:center}
@media(max-width:960px){.theme-panel{grid-template-columns:minmax(0,1fr)}.theme-preview{order:-1;top:0;z-index:2;padding:6px 0;background:var(--tp-bg)}}
/* Clears the console menu button that floats over the top right on phones. */
@media(max-width:620px){.theme-preview-bar{padding-right:44px}}
@media(max-width:760px){.theme-swatches{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}.wallpaper-focus img{max-width:150px}}
.theme-wallpaper.dropping{outline:2px dashed var(--skin-accent,#7a55d6);outline-offset:4px}