/* ===================================================================
   Settings panel — wallpaper, browser sync and backup, opened from the
   menu bar or the dock. A floating window like About, positioned with
   left/top. One column: the wallpapers in one row, then each section
   full width, so the website (no Browser Sync) just has one fewer.
   =================================================================== */
.settings-panel {
    position: fixed;
    top: 0; left: 0;
    width: 820px;
    max-width: calc(100vw - 48px);
    scale: 0.96;
    pointer-events: none;
    transition: scale 0.3s var(--ease-spring);
}
.settings-panel.open { scale: 1; pointer-events: auto; }
.settings-card {
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    color: var(--w-82);
    opacity: 0;
    transition: opacity 0.28s ease;
}
.settings-panel.open .settings-card { opacity: 1; }
/* The language picker, at the far end of the title bar */
.settings-lang { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--w-62); }
.settings-bar .settings-select { cursor: pointer; }

.settings-section { padding: 14px 20px 16px; }
.settings-section + .settings-section { border-top: 1px solid var(--w-12); }
.settings-label {
    margin-bottom: 10px;
    font-size: 0.62rem; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 600;
    color: var(--w-55);
}

.wallpaper-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.wallpaper-swatch {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 0;
    background: none; border: none;
    font: inherit; color: var(--w-62);
    cursor: pointer;
}
.wallpaper-preview {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    box-shadow: 0 0 0 1px var(--w-15), 0 2px 8px var(--k-30);
    transition: box-shadow 0.12s, transform 0.18s var(--ease-spring);
}
.wallpaper-swatch:hover .wallpaper-preview { transform: translateY(-2px); }
.wallpaper-swatch.sel .wallpaper-preview { box-shadow: 0 0 0 2px #0a84ff, 0 2px 8px var(--k-30); }
.wallpaper-name { font-size: 0.74rem; }
.wallpaper-swatch.sel .wallpaper-name { color: #fff; }

.settings-row { display: flex; align-items: center; gap: 16px; cursor: pointer; }
.settings-row-text { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.settings-row-title { font-size: 0.9rem; color: #fff; }
.settings-row-note { font-size: 0.76rem; line-height: 1.45; color: var(--w-55); }
.settings-row + .settings-row { margin-top: 12px; }
.settings-btn {
    flex-shrink: 0;
    height: 28px;
    padding: 0 14px;
    border-radius: 7px;
    border: 1px solid var(--w-15);
    background: var(--w-08);
    color: var(--w-90);
    font: inherit; font-size: 0.82rem; font-weight: 500;
    cursor: pointer;
    transition: background 0.12s;
}
.settings-btn:hover { background: var(--w-15); }
.settings-btn.danger { color: var(--danger); }
.settings-select {
    flex-shrink: 0;
    height: 28px;
    max-width: 180px;
    padding: 0 26px 0 10px;
    border-radius: 7px;
    border: 1px solid var(--w-15);
    background: var(--w-08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-opacity='.7' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 9px center;
    color: var(--w-90);
    font: inherit; font-size: 0.82rem;
    appearance: none; -webkit-appearance: none;
    cursor: pointer;
}
.settings-select:hover { background-color: var(--w-15); }
.settings-select option { background: #2a2a30; color: #fff; }
.settings-btn.danger:hover { background: rgba(255,90,90,0.16); }

/* macOS-style switch on a plain checkbox */
.switch {
    appearance: none; -webkit-appearance: none;
    position: relative;
    flex-shrink: 0;
    width: 38px; height: 22px;
    border-radius: 11px;
    background: var(--w-20);
    cursor: pointer;
    transition: background 0.18s ease;
}
.switch::before {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px var(--k-35);
    transition: translate 0.2s var(--ease-spring);
}
.switch:checked { background: #0a84ff; }
.switch:checked::before { translate: 16px 0; }
.switch:focus-visible { outline: 2px solid #0a84ff; outline-offset: 2px; }