/* Background settings UI copied from tjyh.fun (2026-10-08). */
        .settings-overlay {
            position: fixed;
            inset: 0;
            z-index: 70;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 24px;
            background: rgba(4, 8, 18, 0.42);
            backdrop-filter: blur(18px);
        }

        .settings-overlay.is-open {
            display: flex;
        }

        .settings-panel {
            width: min(480px, 100%);
            max-height: min(80vh, 720px);
            overflow: auto;
            padding: 24px;
            border-radius: 28px;
            background: rgba(13, 18, 31, 0.86);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: rgba(244, 247, 252, 0.94);
            box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
        }

        .settings-title {
            font-size: 1.18rem;
            font-weight: 600;
            letter-spacing: 0.06em;
        }

        .settings-subtitle {
            margin: 8px 0 0;
            color: rgba(227, 234, 245, 0.72);
            line-height: 1.6;
        }

        .settings-section {
            margin-top: 18px;
        }

        .settings-note {
            display: block;
            margin-bottom: 8px;
            color: rgba(227, 234, 245, 0.62);
            font-size: 0.9rem;
        }

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

        .settings-input,
        .settings-select,
        .settings-action {
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(255, 255, 255, 0.06);
            color: rgba(248, 250, 255, 0.96);
            font: inherit;
        }

        .settings-input,
        .settings-select {
            width: 100%;
            padding: 12px 14px;
            outline: none;
        }

        .settings-file {
            padding: 10px 0;
            border: 0;
            background: transparent;
        }

        .settings-action {
            padding: 11px 16px;
            cursor: pointer;
        }

        .settings-status {
            min-height: 20px;
            margin-top: 10px;
            color: rgba(249, 204, 204, 0.92);
            font-size: 0.88rem;
        }


:root { --wallpaper: url("/studio/web/assets/assets/homepage-background.jpg"); }
/* Native dialog supplies focus containment and Escape; source visual rules stay. */
dialog.settings-overlay { inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border: 0; border-radius: 0; color: inherit; }
dialog.settings-overlay[open] { display: flex; }
dialog.settings-overlay::backdrop { background: transparent; }
.settings-panel { text-align: left; }
.settings-panel h2 { margin: 0; }
.settings-panel .settings-action { min-height: 44px; text-align: center; }
.settings-input:focus-visible, .settings-select:focus-visible, .settings-action:focus-visible, .settings-url > summary:focus-visible { outline: 2px solid #cee1ff; outline-offset: 3px; }
.settings-select option { color: white; background: #111927; }
.settings-row { margin-top: 10px; }
.settings-row .settings-select { flex: 1; min-width: 170px; }
.settings-status { line-height: 1.5; }
.wallpaper-preview { aspect-ratio: 3/1; border-radius: 12px; margin-top: 16px; background-size: cover; background-position: center; background-image: var(--wallpaper); }
.directory-current { font-size: .86rem; color: rgba(245,248,255,.97); font-weight: 700; }
html[data-wallpaper-mode="dynamic"] .home-scene .tile::before { background: linear-gradient(135deg,rgba(205,232,255,.16),rgba(92,170,245,.08)); animation: wallpaper-breathe 18s ease-in-out infinite alternate; }
@keyframes wallpaper-breathe { from { opacity: .25; } to { opacity: 1; } }
body.is-auth-locked .home-scene .tile::before, body.is-auth-pending .home-scene .tile::before { animation-play-state: paused; }
@media(max-width:768px) { dialog.settings-overlay { padding: 18px; } .settings-panel { padding: 22px; max-height: calc(100dvh - 36px); } .directory-current { display:none; } }
@media(prefers-reduced-motion:reduce) { html[data-wallpaper-mode="dynamic"] .home-scene .tile::before { animation: none; } }

/* One fixed cover image spans the desktop viewport. Only tile backplates fade;
   labels, glyphs, active faces and the existing motion keep full opacity. */
html[data-wallpaper-presentation="desktop"] #app[data-surface="home"]{isolation:isolate}
html[data-wallpaper-presentation="desktop"] #app[data-surface="home"]::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:var(--wallpaper);background-size:cover;background-position:center;background-repeat:no-repeat}
html[data-wallpaper-presentation="desktop"] #app[data-surface="home"]>.system-bar,
html[data-wallpaper-presentation="desktop"] .home-scene,
html[data-wallpaper-presentation="desktop"] .home-scene .tiles-grid{background:transparent}
html[data-wallpaper-presentation="desktop"] .home-scene .tile{background:rgb(var(--desktop-tile-rgb,0 120 215) / var(--desktop-tile-opacity,.65))}
html[data-wallpaper-presentation="desktop"] .home-scene .tile::before{background:none;animation:none}
/* Each tile supplies exactly one backplate. Transparent mosaic faces avoid
   multiplying the alpha when their individual faces turn over that plate. */
html[data-wallpaper-presentation="desktop"] .home-scene .live-cell-face,
html[data-wallpaper-presentation="desktop"] .home-scene .live-tile-header{background:none}
.settings-tile-style{display:grid;grid-template-columns:1fr 56px;gap:12px;align-items:center;margin-top:18px}
.settings-tile-style label{font-size:.85rem;color:rgba(227,234,245,.8)}
.settings-tile-style input[type="color"]{width:56px;min-height:36px;padding:3px;border:1px solid #ffffff30;border-radius:8px;background:transparent}
.settings-tile-style input[type="range"]{grid-column:1/-1;width:100%;min-height:36px;padding:0;accent-color:#9fcef5;background:none;border:0}
.settings-tile-style label[for="wallpaperTransparency"]{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px}
.settings-tile-style input:disabled{opacity:.45;cursor:default}
.settings-caption{font-size:.75rem;line-height:1.7;color:rgba(227,234,245,.6);margin:8px 0 0}
html:not([data-wallpaper-presentation="desktop"]) .settings-desktop-options{display:none}
.settings-url > summary{cursor:pointer;font-size:.9rem;color:rgba(227,234,245,.8);padding:6px 0}
.settings-url-fields{margin-top:10px}