/* ==========================================================================
   Settings — redesign (Plum Design System, console register)
   ==========================================================================
   Source: design_handoff_settings_redesign / "Settings - Redesign.dc.html".
   Loaded after style.css and privacy-settings.css, so equal-specificity rules
   here win. Everything new is prefixed `sx-`; the handful of legacy classes
   that app.js still emits (.settings-menu-row, .settings-toggle, .upd-*,
   .raid-cand, .lr-*, .privacy-*, .apps-manage-*) are re-pointed below.

   Register: monochrome. Selection and "on" toggles use --text, never the
   wine accent. Colour is reserved for status pills. Mono for anything
   machine-shaped (ids, sizes, timestamps, versions, eyebrows). */

/* ------------------------------------------------------------------ shell */

@media (min-width: 641px) {
    #settings-section.section.active {
        padding: 28px;
        background: rgba(0, 0, 0, .5);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
    }

    #settings-section.active > .settings-content {
        width: min(980px, 94%);
        height: 88%;
        max-height: 780px;
        border-radius: var(--radius-xl);
    }

    /* Close × — ghost, 30px. */
    .settings-modal-close {
        top: 14px;
        right: 14px;
        width: 30px;
        height: 30px;
        background: transparent;
        color: var(--muted);
        border-radius: var(--radius-sm);
    }

    .settings-modal-close:hover {
        background: var(--accent-wash);
        color: var(--text);
    }

    /* ---- Sidebar ---- */
    #settings-section > .settings-content > .settings-menu-group {
        flex: 0 0 236px;
        width: 236px;
        min-width: 236px;
        max-width: 236px;
        padding: 0;
        gap: 0;
        background: var(--bg-band);
        border-right: 1px solid var(--border);
        overflow: hidden;
        border-top-left-radius: var(--radius-xl);
        border-bottom-left-radius: var(--radius-xl);
    }

    .settings-modal-eyebrow {
        padding: 22px 20px 12px;
        margin: 0;
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: var(--w-regular);
        letter-spacing: .01em;
        text-transform: none;
        color: var(--faint);
    }

    #settings-section .sx-nav {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 0 10px;
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    #settings-section .sx-nav-group {
        padding: 14px 10px 4px;
        font-family: var(--font-mono);
        font-size: 10.5px;
        letter-spacing: .01em;
        color: var(--faint);
    }

    #settings-section .sx-nav-group:first-child {
        padding-top: 10px;
    }

    #settings-section .settings-menu-row {
        gap: 11px;
        padding: 8px 10px;
        border: 0;
        border-radius: var(--radius-sm);
        color: var(--muted);
        font-size: 13.5px;
        font-weight: 480;
        letter-spacing: -.01em;
        transition: background var(--transition-fast), color var(--transition-fast);
    }

    #settings-section .settings-menu-row:hover {
        background: var(--accent-wash);
        color: var(--muted);
    }

    #settings-section .settings-menu-row.active {
        background: var(--accent-wash);
        color: var(--text);
        font-weight: 620;
    }

    #settings-section .settings-menu-row svg:first-child {
        width: 16px;
        height: 16px;
        opacity: 1;
    }

    #settings-section .settings-menu-row > span {
        flex: 1;
    }

    #settings-section .settings-menu-row > .sx-nav-count {
        flex: none;
        font-family: var(--font-mono);
        font-size: 10.5px;
        color: var(--faint);
    }

    #settings-section .sx-nav-footer {
        flex: none;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px 14px;
        border-top: 1px solid var(--border);
    }

    /* ---- Main ---- */
    .settings-main {
        padding: 32px 40px 48px;
    }

    .settings-main > * {
        max-width: 640px;
    }

    .settings-main .settings-content {
        gap: 22px;
        max-width: 640px;
    }

    .settings-main .settings-content + .settings-content {
        margin-top: 22px;
    }

    /* The mobile header inside a borrowed sub-section is never shown on
       desktop; the panel carries its own .sx-head. */
    .settings-main .settings-mobile-header {
        display: none;
    }
}

/* Sidebar bits that only exist for the modal are hidden on the phone, where
   the sticky header and the Account row already say the same things. */
.sx-nav-footer {
    display: none;
}

.sx-nav-group {
    padding: 14px 16px 4px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .01em;
    color: var(--faint);
}

.sx-nav-count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--faint);
}

.sx-nav-avatar {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: var(--radius-md);
    background: var(--accent-wash);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 620;
}

.sx-nav-meta {
    min-width: 0;
    flex: 1;
}

.sx-nav-name {
    display: block;
    font-size: 12.5px;
    font-weight: 560;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sx-nav-sub {
    display: block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Toast — bottom of the modal, ink on paper, 12.5px. */
.settings-toast-container .toast {
    padding: 8px 14px;
    border-radius: var(--radius-md);
    background: var(--text);
    color: var(--bg);
    border: 0;
    box-shadow: var(--shadow-lift);
}

.settings-toast-container .toast-message {
    font-size: 12.5px;
    font-weight: 520;
    white-space: nowrap;
}

/* --------------------------------------------------------------- headings */

.sx-head h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 620;
    letter-spacing: -.025em;
    line-height: 1.2;
    color: var(--text);
}

.sx-lede {
    margin: 6px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--muted);
}

.sx-head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.sx-head-row > .sx-head {
    min-width: 0;
}

.sx-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-family: var(--font-sans);
    font-size: 12.5px;
    cursor: pointer;
}

.sx-back:hover {
    color: var(--text);
}

.sx-back + h2 {
    margin-top: 6px;
}

.sx-eyebrow {
    margin: 0 0 10px 2px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .01em;
    color: var(--faint);
}

.sx-eyebrow-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 2px 10px;
}

.sx-eyebrow-row .sx-eyebrow {
    margin: 0;
}

.sx-eyebrow.is-wide {
    font-size: 10.5px;
    letter-spacing: .06em;
}

.sx-note {
    margin: 0;
    padding: 0 2px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--faint);
}

.sx-note.is-muted {
    font-size: 12.5px;
    color: var(--muted);
}

.sx-note.is-after {
    margin-top: 8px;
}

.sx-link {
    font-size: 12px;
    color: var(--accent);
    text-decoration: none;
    background: transparent;
    border: 0;
    padding: 0;
    font-family: var(--font-sans);
    cursor: pointer;
}

.sx-link:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------------ cards */

.sx-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-width: 0;
}

.sx-card.is-lift {
    box-shadow: var(--shadow);
}

.sx-card.is-plain {
    background: transparent;
}

.sx-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    min-width: 0;
}

.sx-row + .sx-row,
.sx-row + .sx-band,
.sx-band + .sx-row,
.sx-rows > * + * {
    border-top: 1px solid var(--border);
}

.sx-row.is-band,
.sx-band {
    background: var(--bg-band);
}

.sx-row.is-tight {
    padding: 13px 18px;
    gap: 14px;
}

.sx-row.is-loose {
    padding: 18px 20px;
}

.sx-row.is-review {
    background: color-mix(in srgb, var(--status-review) 5%, transparent);
}

.sx-row-main {
    flex: 1;
    min-width: 0;
}

.sx-row-title {
    font-size: 14px;
    font-weight: 560;
    letter-spacing: -.01em;
    color: var(--text);
}

.sx-row-title-line {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sx-row-title-line .sx-row-title {
    white-space: nowrap;
}

.sx-row-sub {
    margin-top: 2px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted);
}

.sx-row-sub.is-mono,
.sx-mono {
    font-family: var(--font-mono);
    font-size: 11.5px;
}

.sx-row-sub.is-mono-md {
    font-family: var(--font-mono);
    font-size: 12px;
}

.sx-row-sub .is-faint,
.is-faint {
    color: var(--faint);
}

.sx-row-value {
    flex: none;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--muted);
    white-space: nowrap;
}

.sx-row-value.is-sm {
    font-size: 11.5px;
    text-align: right;
}

.sx-row-note {
    flex: 1;
    font-size: 12.5px;
    color: var(--muted);
}

.sx-row-note.is-faint {
    font-size: 12px;
    color: var(--faint);
}

/* Rows that navigate somewhere are buttons. */
button.sx-row {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    font-family: var(--font-sans);
    cursor: pointer;
}

button.sx-row:hover {
    background: var(--accent-wash);
}

button.sx-row:disabled {
    cursor: default;
    opacity: .6;
}

.sx-chevron {
    flex: none;
    color: var(--faint);
}

/* Key/value rows (About, Developer, diagnostics). */
.sx-kv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

.sx-kv + .sx-kv {
    border-top: 1px solid var(--border);
}

.sx-kv.is-wide {
    padding: 12px 18px;
}

.sx-kv.is-x22 {
    padding: 12px 22px;
}

.sx-kv-k {
    font-size: 13px;
    color: var(--muted);
}

.sx-kv-v {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--text);
    text-align: right;
}

.sx-kv-v.is-muted {
    color: var(--muted);
}

.sx-kv-v.is-secret {
    font-size: 13px;
    letter-spacing: .04em;
    -webkit-user-select: all;
    user-select: all;
}

.sx-copy-btn {
    display: inline-flex;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--faint);
    cursor: pointer;
}

.sx-copy-btn:hover {
    color: var(--text);
}

/* Empty state. */
.sx-empty {
    padding: 14px 18px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    font-size: 13px;
    color: var(--faint);
}

/* Icon tiles. */
.sx-icon-tile {
    width: 34px;
    height: 34px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--bg-band);
    border: 1px solid var(--border);
    color: var(--muted);
}

.sx-icon-tile.is-32 {
    width: 32px;
    height: 32px;
}

.sx-icon-tile.is-36 {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    color: var(--text);
}

.sx-icon-tile.is-36.is-muted {
    color: var(--muted);
    border-radius: var(--radius-md);
}

.sx-icon-tile.is-40 {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
}

.sx-icon-tile.is-dashed {
    background: transparent;
    border-style: dashed;
    border-color: var(--border-strong);
    color: var(--faint);
}

.sx-icon-tile img {
    width: 22px;
    height: 22px;
    display: block;
}

/* Avatars. */
.sx-avatar {
    width: 48px;
    height: 48px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--text);
    color: var(--bg);
    font-size: 16px;
    font-weight: 620;
    letter-spacing: -.02em;
}

.sx-avatar.is-36 {
    width: 36px;
    height: 36px;
    font-size: 12.5px;
    background: var(--bg-band);
    border: 1px solid var(--border);
    color: var(--text);
}

.sx-avatar.is-36.is-owner {
    background: var(--accent-wash);
    border: 0;
}

.sx-avatar.is-36.is-disabled {
    border-style: dashed;
    border-color: var(--border-strong);
    color: var(--faint);
}

/* ---------------------------------------------------------------- buttons */

.sx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 30px;
    padding: 0 11px;
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: var(--w-medium);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    flex: none;
    transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.sx-btn.is-md {
    height: 36px;
    padding: 0 15px;
    font-size: 13.5px;
    border-radius: var(--radius-sm);
}

.sx-btn.is-primary {
    background: var(--text);
    color: var(--bg);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}

.sx-btn.is-primary:hover:not(:disabled) {
    filter: brightness(1.15);
    transform: translateY(-1px);
}

.sx-btn.is-ghost {
    border-color: var(--border-strong);
}

.sx-btn.is-ghost:hover:not(:disabled) {
    border-color: var(--muted);
    background: var(--surface);
}

.sx-btn.is-danger {
    border-color: var(--border-strong);
    color: var(--status-rejected);
}

.sx-btn.is-danger:hover:not(:disabled) {
    border-color: var(--status-rejected);
    background: color-mix(in srgb, var(--status-rejected) 8%, transparent);
}

.sx-btn.is-block {
    width: 100%;
}

.sx-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.sx-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sx-actions.is-end {
    justify-content: flex-end;
}

.sx-actions.is-center {
    justify-content: center;
}

.sx-actions .sx-spacer {
    flex: 1;
}

.sx-actions.is-tight {
    gap: 6px;
}

/* --------------------------------------------------------- pills & badges */

.sx-pill {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: .02em;
    white-space: nowrap;
    color: var(--muted);
}

.sx-pill.is-live { color: var(--status-live); }
.sx-pill.is-review { color: var(--status-review); }
.sx-pill.is-rejected { color: var(--status-rejected); }
.sx-pill.is-draft,
.sx-pill.is-faint { color: var(--faint); }
.sx-pill.is-sm { font-size: 11px; }

.sx-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: var(--w-medium);
    letter-spacing: .02em;
    white-space: nowrap;
    color: var(--status-draft);
}

.sx-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.sx-status.is-live { color: var(--status-live); }
.sx-status.is-review { color: var(--status-review); }
.sx-status.is-rejected { color: var(--status-rejected); }
.sx-status.is-draft { color: var(--status-draft); }

.sx-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xs);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .02em;
    color: var(--muted);
    white-space: nowrap;
}

.sx-badge.is-accent {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border-strong));
}

/* ------------------------------------------------------------------ forms */

.sx-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.sx-field-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .01em;
    color: var(--faint);
}

.sx-input,
.sx-textarea,
.settings-main .sx-input,
.settings-main .sx-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: var(--w-regular);
    line-height: 1.4;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.sx-input::placeholder,
.sx-textarea::placeholder {
    color: var(--faint);
}

.sx-input:focus,
.sx-textarea:focus,
.settings-main .sx-input:focus,
.settings-main .sx-textarea:focus {
    border-color: var(--accent);
    box-shadow: var(--ring-focus);
}

.sx-input.is-error,
.sx-textarea.is-error,
.settings-main .sx-input.is-error,
.settings-main .sx-textarea.is-error {
    border-color: var(--status-rejected);
}

.sx-input.is-mono {
    font-family: var(--font-mono);
    letter-spacing: .06em;
}

.sx-textarea {
    resize: vertical;
    line-height: 1.55;
}

.sx-textarea.is-code,
.settings-main .sx-textarea.is-code {
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.5;
}

.sx-select,
.settings-main .sx-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 6px 28px 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2397979F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 9px center;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: var(--w-regular);
    font-variant-numeric: tabular-nums;
    outline: none;
    cursor: pointer;
}

.sx-select.is-band,
.settings-main .sx-select.is-band {
    background-color: var(--bg-band);
}

.sx-select:focus,
.settings-main .sx-select:focus {
    border-color: var(--accent);
    box-shadow: var(--ring-focus);
}

.sx-select.is-time {
    padding-right: 10px;
    background-image: none;
}

.sx-inline-input,
.settings-main .sx-inline-input {
    width: 220px;
    max-width: 100%;
    padding: 7px 11px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: var(--w-regular);
    outline: none;
}

.sx-inline-input:focus,
.settings-main .sx-inline-input:focus {
    border-color: var(--accent);
    box-shadow: var(--ring-focus);
}

.sx-check {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}

.sx-check input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--text);
    flex: none;
}

.sx-check.is-row {
    gap: 10px;
    padding: 11px 14px;
    font-size: 13.5px;
}

.sx-check.is-row > span:first-of-type {
    flex: 1;
}

.sx-check.is-nested {
    padding: 10px 14px 10px 38px;
    border-top: 1px solid var(--border);
    background: var(--bg-band);
    font-size: 13px;
}

.sx-check.is-nested input[type="checkbox"] {
    width: 14px;
    height: 14px;
}

.sx-check .sx-mono {
    color: var(--muted);
}

.sx-box {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.sx-box > * + * {
    border-top: 1px solid var(--border);
}

.sx-box-band {
    padding: 14px 14px 12px;
    background: var(--bg-band);
}

/* Toggle — 38×22 pill, on = ink fill + paper knob. Re-points the legacy
   .settings-toggle markup that every checkbox in settings already uses. */
.settings-toggle,
.settings-main .settings-toggle {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    flex-shrink: 0;
}

.settings-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.settings-toggle .toggle-slider,
.settings-main .settings-toggle .toggle-slider {
    position: absolute;
    inset: 0;
    width: 38px;
    height: 22px;
    cursor: pointer;
    border-radius: var(--radius-pill);
    background: var(--bg-band);
    border: 1px solid var(--border-strong);
    transition: background .18s ease, border-color .18s ease;
}

.settings-toggle .toggle-slider::before,
.settings-main .settings-toggle .toggle-slider::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--faint);
    box-shadow: none;
    transform: translateX(0);
    transition: transform .18s ease, background .18s ease;
}

.settings-toggle input:checked + .toggle-slider,
.settings-main .settings-toggle input:checked + .toggle-slider {
    background: var(--text);
    border-color: var(--text);
}

.settings-toggle input:checked + .toggle-slider::before,
.settings-main .settings-toggle input:checked + .toggle-slider::before {
    background: var(--bg);
    transform: translateX(16px);
}

.settings-toggle input:disabled + .toggle-slider {
    opacity: .5;
    cursor: not-allowed;
}

/* Segmented control (Formats). Re-points .lr-seg. */
.lr-seg,
.sx-seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-band);
}

.lr-seg .lr-seg-btn,
.sx-seg button {
    padding: 6px 12px;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 12px;
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.lr-seg .lr-seg-btn:hover,
.sx-seg button:hover {
    color: var(--text);
}

.lr-seg .lr-seg-btn.active,
.sx-seg button.is-on {
    color: var(--text);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.lr-seg.lr-disabled .lr-seg-btn {
    cursor: default;
}

/* Details / summary. */
.sx-details > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    font-size: 13.5px;
    font-weight: 560;
    color: var(--text);
}

.sx-details > summary::-webkit-details-marker {
    display: none;
}

.sx-details > summary .sx-mono {
    color: var(--muted);
}

.sx-details.is-quiet > summary {
    font-weight: var(--w-regular);
    color: var(--muted);
}

.sx-details > summary .sx-chevron {
    transition: transform .18s ease;
}

.sx-details[open] > summary .sx-chevron {
    transform: rotate(180deg);
}

.sx-details pre {
    margin: 0 18px 14px;
    padding: 12px;
    border-radius: var(--radius-sm);
    background: var(--bg-band);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--muted);
    max-height: 280px;
    overflow: auto;
}

.sx-details-body {
    padding: 0 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sx-details-body .sx-q {
    font-size: 13px;
    font-weight: 560;
}

.sx-details-body .sx-a {
    margin: 2px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--muted);
}

.sx-details-body.is-mono {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.6;
    display: block;
}

/* Progress bars. */
.sx-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--bg-band);
    overflow: hidden;
}

.sx-bar > i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 2px;
    background: var(--text);
    transition: width .3s ease;
}

.sx-bar.is-6 {
    height: 6px;
    border-radius: 999px;
}

.sx-bar.is-6 > i {
    border-radius: 999px;
}

.sx-bar > i.is-muted { background: var(--muted); }
.sx-bar > i.is-faint { background: var(--faint); }
.sx-bar > i.is-review { background: var(--status-review); }
.sx-bar > i.is-rejected { background: var(--status-rejected); }

.sx-bar > i.is-indet {
    width: 45%;
    animation: sxIndet 1.3s ease-in-out infinite;
}

@keyframes sxIndet {
    0% { margin-left: -45%; }
    100% { margin-left: 100%; }
}

.sx-spin {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid var(--border-strong);
    border-top-color: var(--text);
    animation: sxSpin .9s linear infinite;
}

@keyframes sxSpin {
    to { transform: rotate(360deg); }
}

/* Metric tiles (Users summary, Device Status, app dialog). */
.sx-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.sx-tiles.is-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sx-tiles.is-gap-8 {
    gap: 8px;
}

.sx-tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    min-width: 0;
}

.sx-tile.is-band {
    background: var(--bg-band);
    padding: 10px 12px;
}

.sx-tile-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .01em;
    color: var(--faint);
}

.sx-tile.is-band .sx-tile-label {
    font-size: 10.5px;
    letter-spacing: 0;
}

.sx-tile-value {
    margin-top: 4px;
    font-size: 20px;
    font-weight: 620;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.sx-tile.is-band .sx-tile-value {
    margin-top: 3px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: var(--w-regular);
    letter-spacing: 0;
}

.sx-tile-unit {
    font-size: 12.5px;
    font-weight: 440;
    color: var(--muted);
}

/* Metric tiles with a bar (Device Status). */
.sx-metric {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    min-width: 0;
}

.sx-metric-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.sx-metric-label {
    font-size: 13px;
    color: var(--muted);
}

.sx-metric-hint {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--faint);
    white-space: nowrap;
}

.sx-metric-hint.is-live { color: var(--status-live); }
.sx-metric-hint.is-review { color: var(--status-review); }
.sx-metric-hint.is-rejected { color: var(--status-rejected); }

.sx-metric-value {
    margin-top: 6px;
    font-size: 26px;
    font-weight: 620;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.sx-metric .sx-bar {
    margin-top: 12px;
}

.sx-metric .sx-bar > i {
    transition: width .8s cubic-bezier(.22, 1, .36, 1), background-color .4s ease;
}

.sx-metric .sx-bar > i.warn { background: var(--status-review); }
.sx-metric .sx-bar > i.bad { background: var(--status-rejected); }

/* Signal glyph (Device Status Wi-Fi). Re-points .devstat-sig. */
.devstat-sig,
.sx-sig {
    display: inline-flex;
    align-items: flex-end;
    gap: 2.5px;
    height: 14px;
    flex: none;
}

.devstat-sig i,
.sx-sig i {
    width: 4px;
    border-radius: 1.5px;
    background: var(--border-strong);
    transition: background-color .4s ease;
}

.devstat-sig i:nth-child(1), .sx-sig i:nth-child(1) { height: 5px; }
.devstat-sig i:nth-child(2), .sx-sig i:nth-child(2) { height: 8px; }
.devstat-sig i:nth-child(3), .sx-sig i:nth-child(3) { height: 11px; }
.devstat-sig i:nth-child(4), .sx-sig i:nth-child(4) { height: 14px; }
.devstat-sig i.on, .sx-sig i.on { background: var(--text); }
.devstat-sig.weak i.on, .sx-sig.weak i.on { background: var(--status-review); }

/* Process table (Device Status). */
.sx-proc-head,
.sx-proc-row,
.sx-proc-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px 64px 84px;
    gap: 12px;
    align-items: center;
    padding: 9px 18px;
    border-top: 1px solid var(--border);
    font-size: 13px;
}

.sx-proc-head {
    padding: 8px 18px;
    background: var(--bg-band);
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--faint);
}

.sx-proc-head > span:not(:first-child),
.sx-proc-row > span:not(:first-child) {
    text-align: right;
}

.sx-proc-row > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sx-proc-row > span:not(:first-child) {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

.sx-proc-row > span.is-pid {
    color: var(--muted);
}

.sx-proc-row > span.hot {
    color: var(--status-review);
}

.sx-proc-foot {
    display: flex;
    justify-content: space-between;
    background: var(--bg-band);
    font-size: 12px;
    color: var(--faint);
}

.sx-proc-foot .sx-mono {
    font-variant-numeric: tabular-nums;
}

.sx-proc-empty {
    padding: 14px 18px;
    border-top: 1px solid var(--border);
    font-size: 12.5px;
    color: var(--faint);
}

/* Storage usage segments. */
.sx-usage-bar {
    display: flex;
    height: 12px;
    gap: 3px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-band);
    border: 1px solid var(--border);
}

.sx-usage-bar > span {
    display: block;
    height: 100%;
    min-width: 0;
    transition: width .3s ease;
}

.sx-usage-bar > span.is-photos,
.sx-swatch.is-photos { background: var(--text); }

.sx-usage-bar > span.is-drive,
.sx-swatch.is-drive { background: var(--muted); }

.sx-usage-bar > span.is-apps,
.sx-swatch.is-apps { background: var(--faint); }

.sx-usage-bar > span.is-cache,
.sx-swatch.is-cache,
.sx-hatch {
    background: repeating-linear-gradient(135deg, var(--faint) 0 2px, transparent 2px 4px);
}

.sx-usage-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--muted);
}

.sx-usage-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.sx-usage-legend .sx-legend-name {
    color: var(--text);
}

.sx-usage-legend .sx-mono {
    color: var(--muted);
}

.sx-swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex: none;
}

.sx-swatch.is-cache {
    border: 1px solid var(--border-strong);
}

.sx-swatch.is-free {
    background: var(--bg-band);
    border: 1px solid var(--border-strong);
}

/* Steppers (RAID wizard header, scan). */
.sx-stepper {
    display: flex;
    gap: 14px;
}

.sx-step {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--faint);
}

.sx-step > span {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xs);
    border: 1px solid currentColor;
    font-family: var(--font-mono);
    font-size: 10.5px;
    background: transparent;
}

.sx-step.is-on,
.sx-step.is-done {
    color: var(--text);
}

.sx-step.is-on > span {
    background: var(--accent-wash);
}

.sx-stepper.is-scan {
    justify-content: center;
    gap: 12px;
    margin-top: 22px;
}

.sx-stepper.is-scan .sx-step > span {
    width: 20px;
    height: 20px;
    border: 0;
    background: var(--bg-band);
    color: var(--muted);
}

.sx-stepper.is-scan .sx-step.is-on > span {
    background: var(--text);
    color: var(--bg);
}

.sx-stepper.is-scan .sx-step.is-done > span {
    background: var(--bg-band);
    color: var(--text);
}

/* Option rows (radio cards). */
.sx-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: transparent;
    cursor: pointer;
    text-align: left;
    color: var(--text);
    font-family: var(--font-sans);
    width: 100%;
    box-sizing: border-box;
}

.sx-option.is-top {
    align-items: flex-start;
    padding: 12px 14px;
}

.sx-option input[type="radio"] {
    margin: 0;
    accent-color: var(--text);
    flex: none;
}

.sx-option.is-top input[type="radio"] {
    margin-top: 2px;
}

.sx-option:hover {
    border-color: var(--border-strong);
}

.sx-option.is-selected,
.sx-option.selected {
    border-color: var(--text);
    background: var(--accent-wash);
}

.sx-option.is-disabled,
.sx-option:disabled {
    opacity: .5;
    cursor: default;
}

.sx-option-main {
    flex: 1;
    min-width: 0;
}

.sx-option-title {
    display: block;
    font-size: 13.5px;
    font-weight: 560;
}

.sx-option-sub {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--faint);
}

.sx-option-desc {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted);
}

.sx-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Chips (attachments). */
.sx-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-band);
    font-size: 12.5px;
}

.sx-chip .sx-mono {
    font-size: 11.5px;
}

.sx-chip .sx-chip-size {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--faint);
}

.sx-chip-x {
    display: inline-flex;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--faint);
    cursor: pointer;
}

.sx-chip-x:hover {
    color: var(--text);
}

.sx-add-file {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    font-family: var(--font-sans);
    font-size: 12.5px;
    cursor: pointer;
}

.sx-add-file:hover {
    border-color: var(--muted);
    color: var(--text);
}

/* Notice boxes. */
.sx-notice {
    display: flex;
    gap: 9px;
    padding: 11px 13px;
    border-radius: var(--radius-md);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--muted);
    background: var(--bg-band);
    border: 1px solid var(--border);
}

.sx-notice.is-live {
    color: var(--status-live);
    background: color-mix(in srgb, var(--status-live) 9%, transparent);
    border-color: color-mix(in srgb, var(--status-live) 26%, transparent);
}

.sx-notice.is-review {
    color: var(--status-review);
    background: color-mix(in srgb, var(--status-review) 9%, transparent);
    border-color: color-mix(in srgb, var(--status-review) 26%, transparent);
}

.sx-notice.is-rejected {
    color: var(--status-rejected);
    background: color-mix(in srgb, var(--status-rejected) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--status-rejected) 35%, var(--border-strong));
    font-size: 13px;
    padding: 10px 13px;
}

/* Code block (one-line command with copy). */
.sx-code-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 22px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-band);
}

.sx-code-row code {
    flex: 1;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--text);
    overflow-wrap: anywhere;
}

/* Recovery code block. */
.sx-code-block {
    padding: 16px 18px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg-band);
    font-family: var(--font-mono);
    font-size: 15px;
    line-height: 1.7;
    letter-spacing: .06em;
    text-align: center;
    -webkit-user-select: all;
    user-select: all;
    overflow-wrap: anywhere;
}

.sx-code-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 14px;
    padding: 14px 18px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg-band);
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: .06em;
    text-align: center;
    -webkit-user-select: all;
    user-select: all;
}

/* QR + key (2FA dialog). */
.sx-qr-row {
    display: flex;
    gap: 16px;
    align-items: center;
}

.sx-qr {
    width: 132px;
    height: 132px;
    flex: none;
    box-sizing: border-box;
    padding: 6px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-strong);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sx-qr img {
    width: 100%;
    height: 100%;
    display: block;
    image-rendering: pixelated;
}

.sx-qr-key {
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: .04em;
    -webkit-user-select: all;
    user-select: all;
    overflow-wrap: anywhere;
}

/* Search field (Applications). */
.sx-search {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 38px;
    padding: 0 14px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--faint);
}

.sx-search input,
.settings-main .sx-search input[type="text"] {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: var(--w-regular);
    outline: none;
    box-shadow: none;
}

.sx-search input::placeholder {
    color: var(--faint);
}

.sx-search-clear {
    display: inline-flex;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--faint);
    cursor: pointer;
}

.sx-search-clear[hidden] {
    display: none;
}

/* Slider (quota). */
.sx-slider {
    position: relative;
    height: 22px;
}

.sx-slider-track,
.sx-slider-used {
    position: absolute;
    left: 0;
    top: 9px;
    height: 4px;
    border-radius: 2px;
}

.sx-slider-track {
    right: 0;
    background: var(--border-strong);
}

.sx-slider-used {
    width: 0;
    background: var(--faint);
}

.sx-slider-mark {
    position: absolute;
    top: 5px;
    width: 1px;
    height: 12px;
    background: var(--text);
}

.sx-slider input[type="range"] {
    position: absolute;
    inset: 0;
    width: 100%;
    margin: 0;
    background: transparent;
    accent-color: var(--text);
    cursor: pointer;
}

.sx-slider-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--faint);
}

.sx-big-number {
    font-size: 20px;
    font-weight: 620;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.sx-big-number .sx-tile-unit {
    font-size: 12px;
}

.sx-number-input,
.settings-main .sx-number-input {
    width: 76px;
    padding: 6px 8px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    outline: none;
}

/* ---------------------------------------------------------------- dialogs */

.sx-dialog-backdrop {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: color-mix(in srgb, var(--bg) 55%, transparent);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    animation: sxFade .15s ease;
}

.sx-dialog-backdrop.is-fixed {
    position: fixed;
    z-index: 2000;
}

@keyframes sxFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.sx-dialog {
    width: 420px;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lift);
    overflow: hidden;
    color: var(--text);
    animation: sxFade .15s ease;
}

.sx-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px 0;
    flex: none;
}

.sx-dialog-head h3 {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: 16px;
    font-weight: 620;
    letter-spacing: -.02em;
    color: var(--text);
}

.sx-dialog-head .sx-mono {
    color: var(--faint);
    font-size: 11px;
}

.sx-dialog-head.is-profile {
    align-items: center;
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--border);
}

.sx-dialog-head.is-profile .sx-dialog-name {
    font-size: 15px;
    font-weight: 620;
    letter-spacing: -.02em;
}

.sx-dialog-body {
    padding: 12px 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    min-height: 0;
}

.sx-dialog-body.is-flush {
    padding: 0;
    gap: 0;
}

.sx-dialog-body p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}

.sx-dialog-body p.is-faint {
    font-size: 12px;
    color: var(--faint);
}

.sx-dialog-body p b,
.sx-dialog-body p strong {
    font-weight: 620;
    color: var(--text);
}

.sx-dialog-body p .sx-mono {
    font-size: inherit;
    color: inherit;
}

.sx-dialog-section {
    padding: 14px 20px 6px;
}

.sx-dialog-section + .sx-dialog-section {
    padding: 10px 20px 16px;
}

.sx-dialog-section .sx-field-label {
    display: block;
    margin-bottom: 8px;
}

.sx-dialog-foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: var(--bg-band);
    flex: none;
}

.sx-dialog-list {
    padding: 12px 0 0;
    max-height: 360px;
    overflow-y: auto;
}

.sx-dialog-list .sx-activity-row {
    padding: 10px 20px;
    border-top: 1px solid var(--border);
}

/* ------------------------------------------------------------- activity */

.sx-activity-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    font-size: 13.5px;
}

.sx-activity-row + .sx-activity-row {
    border-top: 1px solid var(--border);
}

.sx-activity-row .sx-activity-meta {
    color: var(--muted);
}

.sx-activity-row .sx-activity-meta.is-mono {
    font-family: var(--font-mono);
    font-size: 12px;
}

.sx-activity-row .is-rejected {
    color: var(--status-rejected);
}

.sx-activity-time {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--faint);
    white-space: nowrap;
}

/* ---------------------------------------------------------------- users */

.sx-member-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 100px auto;
    align-items: center;
    gap: 14px;
    padding: 13px 18px;
}

.sx-member-row + .sx-member-row {
    border-top: 1px solid var(--border);
}

.sx-member-row.is-disabled .sx-row-title {
    color: var(--muted);
}

.sx-member-row .sx-row-sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sx-quota {
    min-width: 0;
}

.sx-quota-text {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.sx-quota-text .is-faint {
    color: var(--faint);
}

.sx-quota .sx-bar {
    margin-top: 6px;
}

.sx-member-row.is-disabled .sx-quota-text,
.sx-member-row.is-disabled .sx-row-sub {
    color: var(--faint);
}

.sx-invite-row .sx-invite-email {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: -.01em;
}

/* -------------------------------------------------------------- storage */

.sx-drive-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px 0;
}

.sx-drive-name {
    font-size: 16px;
    font-weight: 620;
    letter-spacing: -.02em;
}

.sx-drive-free {
    text-align: right;
    flex: none;
}

.sx-drive-free .sx-big-number {
    display: block;
}

.sx-drive-free .sx-unit {
    font-size: 11.5px;
    color: var(--muted);
}

.sx-drive-usage {
    padding: 18px 22px 6px;
}

.sx-drive-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px 16px;
    margin-top: 8px;
    border-top: 1px solid var(--border);
}

.sx-drive-foot .sx-spacer {
    flex: 1;
}

/* Attention cards (unmounted / foreign drives). */
.sx-drive-attn {
    padding: 14px 18px;
}

.sx-drive-attn + .sx-drive-attn {
    border-top: 1px solid var(--border);
}

.sx-drive-attn .sx-actions {
    margin-top: 12px;
}

/* RAID intro mode tiles. */
.sx-mode-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 0 20px 18px;
}

.sx-mode-tile {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-band);
    padding: 12px 14px;
    min-width: 0;
}

.sx-mode-tile-name {
    font-size: 13px;
    font-weight: 560;
}

.sx-mode-tile-desc {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--muted);
}

.sx-raid-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: var(--bg-band);
}

.sx-raid-foot .sx-note {
    margin-left: auto;
}

/* RAID wizard. */
.sx-wiz-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-band);
}

.sx-wiz-title {
    font-size: 14px;
    font-weight: 620;
    letter-spacing: -.015em;
}

.sx-wiz-body {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sx-wiz-body .sx-step-title {
    font-size: 15px;
    font-weight: 620;
    letter-spacing: -.02em;
}

.sx-wiz-body p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}

.sx-wiz-body .sx-readonly {
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-band);
    font-family: var(--font-mono);
    font-size: 13px;
}

.sx-wiz-body .sx-field.is-260 .sx-input,
.settings-main .sx-wiz-body .sx-field.is-260 .sx-input {
    width: 260px;
    max-width: 100%;
}

.sx-wiz-body .sx-field.is-140 .sx-input,
.settings-main .sx-wiz-body .sx-field.is-140 .sx-input {
    width: 140px;
}

.sx-review {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.sx-review-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    font-size: 13px;
}

.sx-review-row + .sx-review-row {
    border-top: 1px solid var(--border);
}

.sx-review-row > span:first-child {
    color: var(--muted);
}

.sx-phases {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
}

.sx-phase {
    display: flex;
    gap: 10px;
    color: var(--faint);
}

.sx-phase > span {
    width: 16px;
    flex: none;
    font-family: var(--font-mono);
    font-size: 11px;
}

.sx-phase.is-on,
.sx-phase.is-done {
    color: var(--text);
}

.sx-raid-error {
    font-size: 12.5px;
    color: var(--status-rejected);
}

.sx-raid-error:empty {
    display: none;
}

/* RAID candidates (rendered by app.js). */
#raid-candidates .raid-cand {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text);
    text-align: left;
    font-family: var(--font-sans);
    cursor: pointer;
}

#raid-candidates .raid-cand + .raid-cand {
    margin-top: 6px;
}

#raid-candidates .raid-cand:hover:not(:disabled) {
    border-color: var(--border-strong);
}

#raid-candidates .raid-cand.selected {
    border-color: var(--text);
    background: var(--accent-wash);
}

#raid-candidates .raid-cand.is-disabled {
    opacity: .5;
    cursor: default;
}

#raid-candidates .raid-cand-radio {
    width: 13px;
    height: 13px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    box-sizing: border-box;
}

#raid-candidates .raid-cand.selected .raid-cand-radio {
    border: 4px solid var(--text);
}

#raid-candidates .raid-cand-icon {
    display: none;
}

#raid-candidates .raid-cand-main {
    flex: 1;
    min-width: 0;
}

#raid-candidates .raid-cand-nameline {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

#raid-candidates .raid-cand-name {
    font-size: 13.5px;
    font-weight: 560;
}

#raid-candidates .raid-cand-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: none;
}

#raid-candidates .raid-cand-state,
#raid-candidates .raid-cand-sub,
#raid-candidates .raid-cand-lock {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--faint);
}

#raid-candidates .raid-cand-lock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
}

#raid-candidates .settings-item-help {
    font-size: 12.5px;
    color: var(--muted);
}

/* RAID group. */
.sx-group-member {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
}

.sx-group-member.is-add {
    border-top-style: dashed;
    border-top-color: var(--border-strong);
}

.sx-group-member .sx-row-title {
    font-size: 13.5px;
}

.sx-group-member .sx-tag {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--faint);
}

.sx-group-member .sx-tag.is-review {
    color: var(--status-review);
}

.sx-group-member .sx-row-sub {
    margin-top: 1px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--faint);
}

.sx-group-member .sx-row-err {
    margin-top: 2px;
    font-size: 12px;
    color: var(--status-review);
}

.sx-group-cap {
    width: 120px;
    flex: none;
}

.sx-group-cap .sx-quota-text {
    font-size: 11px;
    color: var(--faint);
}

.sx-protect-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 14px 20px 16px;
}

.sx-protect-tile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text);
    text-align: left;
    font-family: var(--font-sans);
    cursor: pointer;
    min-width: 0;
}

.sx-protect-tile:hover:not(:disabled) {
    border-color: var(--border-strong);
}

.sx-protect-tile.is-selected {
    border-color: var(--text);
    background: var(--accent-wash);
}

.sx-protect-tile:disabled {
    opacity: .55;
    cursor: default;
}

.sx-protect-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.sx-protect-name {
    font-size: 13.5px;
    font-weight: 620;
    letter-spacing: -.01em;
}

.sx-protect-tag {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--faint);
    white-space: nowrap;
}

.sx-protect-bar {
    display: flex;
    height: 10px;
    gap: 2px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--bg-band);
}

.sx-protect-bar > span:first-child {
    background: var(--text);
}

.sx-protect-bar > span:last-child {
    flex: 1;
}

.sx-protect-lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
    color: var(--muted);
}

.sx-protect-lines b {
    font-weight: 560;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.sx-card-head {
    padding: 16px 20px 0;
}

.sx-card-head .sx-card-title {
    font-size: 14px;
    font-weight: 620;
    letter-spacing: -.015em;
}

.sx-card-head p {
    margin: 4px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted);
}

/* ----------------------------------------------------------- appearance */

.settings-theme-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.settings-theme-card {
    flex: none;
    text-align: left;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.settings-theme-card:hover {
    border-color: var(--border-strong);
}

.settings-theme-card.active {
    border-color: var(--text);
    background: var(--surface);
}

.settings-theme-preview {
    display: block;
    height: 72px;
    padding: 10px;
    box-sizing: border-box;
    margin: 0;
    border-radius: var(--radius-sm);
}

.settings-theme-preview-dark {
    background: #0A0A0B;
    border: 1px solid #26262A;
}

.settings-theme-preview-light {
    background: #FCFCFC;
    border: 1px solid #DEDEE1;
}

.settings-theme-preview-system {
    background: linear-gradient(100deg, #0A0A0B 50%, #FCFCFC 50%);
    border: 1px solid var(--border-strong);
}

.settings-theme-preview-dot,
.settings-theme-preview-bar,
.settings-theme-preview-bar2 {
    display: block;
    border-radius: 3px;
}

.settings-theme-preview-dot {
    width: 40%;
    height: 6px;
}

.settings-theme-preview-bar {
    width: 70%;
    height: 5px;
    margin-top: 8px;
}

.settings-theme-preview-bar2 {
    width: 55%;
    height: 5px;
    margin-top: 6px;
}

.settings-theme-preview-dark .settings-theme-preview-dot { background: #F4F4F5; }
.settings-theme-preview-dark .settings-theme-preview-bar,
.settings-theme-preview-dark .settings-theme-preview-bar2 { background: #34343A; }
.settings-theme-preview-light .settings-theme-preview-dot { background: #101012; }
.settings-theme-preview-light .settings-theme-preview-bar,
.settings-theme-preview-light .settings-theme-preview-bar2 { background: #DEDEE1; }
.settings-theme-preview-system .settings-theme-preview-dot { background: #F4F4F5; }
.settings-theme-preview-system .settings-theme-preview-bar { background: linear-gradient(100deg, #34343A 60%, #DEDEE1 60%); }

.settings-theme-card-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding: 0 2px;
    font-size: 13px;
    font-weight: 560;
}

.settings-theme-card-tag {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: var(--w-regular);
    color: var(--faint);
}

.settings-theme-card-tag:empty {
    display: none;
}

.settings-theme-card.active .settings-theme-card-tag.is-current::before {
    content: attr(data-label);
}

/* ------------------------------------------------------ language & region */

.sx-map {
    min-height: 150px;
    background: var(--bg-band);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--faint);
    font-family: var(--font-mono);
    font-size: 11px;
}

.sx-map:empty::before {
    content: attr(data-placeholder);
}

.sx-map svg {
    display: block;
}

.sx-zone-row .sx-row-title {
    font-size: 15px;
}

.sx-clock {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 520;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

/* Zone list — unfolds under the summary row from "Change". Re-points
   .lr-zone-list / .lr-zone-row. */
#lr-zone-list {
    max-height: 264px;
    overflow-y: auto;
    border-top: 1px solid var(--border);
}

#lr-zone-list[hidden] {
    display: none;
}

#lr-zone-list .lr-zone-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    border: 0;
    border-top: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    text-align: left;
    font-family: var(--font-sans);
    cursor: pointer;
}

#lr-zone-list .lr-zone-row:first-child {
    border-top: 0;
}

#lr-zone-list .lr-zone-row:hover {
    background: var(--accent-wash);
}

#lr-zone-list .lr-zone-row.selected {
    background: var(--accent-wash);
}

#lr-zone-list.lr-disabled .lr-zone-row {
    cursor: default;
    opacity: .6;
}

#lr-zone-list .lr-zone-main {
    flex: 1;
    min-width: 0;
}

#lr-zone-list .lr-zone-city {
    display: block;
    font-size: 13.5px;
    font-weight: 480;
}

#lr-zone-list .lr-zone-row.selected .lr-zone-city {
    font-weight: 620;
}

#lr-zone-list .lr-zone-meta {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--faint);
}

#lr-zone-list .lr-zone-time {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

#lr-zone-list .lr-zone-check {
    width: 16px;
    display: inline-flex;
    justify-content: center;
    color: var(--text);
    visibility: hidden;
}

#lr-zone-list .lr-zone-row.selected .lr-zone-check {
    visibility: visible;
}

/* Language list. */
.sx-lang-search {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 40px;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
    color: var(--faint);
}

.sx-lang-search input,
.settings-main .sx-lang-search input[type="text"] {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: var(--w-regular);
    outline: none;
    box-shadow: none;
}

.sx-lang-count {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--faint);
    white-space: nowrap;
}

.sx-lang-list {
    max-height: 336px;
    overflow-y: auto;
}

.sx-lang-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border: 0;
    border-top: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    text-align: left;
    font-family: var(--font-sans);
    cursor: pointer;
}

.sx-lang-row:first-child {
    border-top: 0;
}

.sx-lang-row:hover:not(:disabled) {
    background: var(--accent-wash);
}

.sx-lang-row.is-selected {
    background: var(--accent-wash);
}

.sx-lang-row:disabled,
.sx-lang-row.is-soon {
    opacity: .55;
    cursor: default;
}

.sx-lang-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.sx-lang-native {
    font-size: 13.5px;
    font-weight: 480;
}

.sx-lang-row.is-selected .sx-lang-native {
    font-weight: 620;
}

.sx-lang-en {
    font-size: 12px;
    color: var(--muted);
}

.sx-lang-tag {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--faint);
}

.sx-lang-check {
    width: 16px;
    display: inline-flex;
    justify-content: center;
    color: var(--text);
}

.sx-lang-empty {
    padding: 16px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--faint);
}

/* -------------------------------------------------------------- update */

.sx-upd-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.upd-tile,
.sx-upd-tile {
    width: 40px;
    height: 40px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--bg-band);
    color: var(--text);
}

.upd-tile.is-ok {
    background: color-mix(in srgb, var(--status-live) 12%, transparent);
    color: var(--status-live);
}

.upd-tile.is-warn {
    background: color-mix(in srgb, var(--status-review) 12%, transparent);
    color: var(--status-review);
}

.upd-tile.is-error {
    background: color-mix(in srgb, var(--status-rejected) 12%, transparent);
    color: var(--status-rejected);
}

.upd-tile svg {
    width: 18px;
    height: 18px;
}

.sx-upd-text {
    flex: 1;
    min-width: 0;
}

.upd-headline {
    font-size: 15.5px;
    font-weight: 620;
    letter-spacing: -.015em;
}

.upd-sub {
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--muted);
}

.upd-sub:empty {
    display: none;
}

.upd-size {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--faint);
    white-space: nowrap;
}

.upd-prog {
    margin-top: 20px;
}

.upd-pct-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 13px;
}

.upd-pct {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.upd-phase {
    color: var(--muted);
}

.upd-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--bg-band);
    overflow: hidden;
}

.upd-bar > i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--text);
    transition: width .4s ease;
}

.upd-bar > i.upd-bar-indet {
    width: 45%;
    animation: sxIndet 1.3s ease-in-out infinite;
}

.upd-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 9px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

.upd-meta > span:last-child {
    color: var(--faint);
}

.upd-indet {
    margin-top: 18px;
}

.upd-indet-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    font-size: 13px;
}

.upd-spin {
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 1.5px solid var(--border-strong);
    border-top-color: var(--text);
    animation: sxSpin .9s linear infinite;
}

.upd-hint {
    margin-top: 9px;
    font-size: 11.5px;
    color: var(--faint);
}

.upd-notes {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.upd-notes::before {
    content: attr(data-title);
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--faint);
}

.upd-note {
    display: flex;
    gap: 9px;
    margin-bottom: 6px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--muted);
}

.upd-note::before {
    content: "·";
    color: var(--faint);
}

.upd-note:last-child {
    margin-bottom: 0;
}

.upd-notice {
    display: flex;
    gap: 9px;
    margin-top: 16px;
    padding: 11px 13px;
    border-radius: var(--radius-md);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--muted);
    background: var(--bg-band);
    border: 1px solid var(--border);
}

.upd-notice.is-ok {
    color: var(--status-live);
    background: color-mix(in srgb, var(--status-live) 9%, transparent);
    border-color: color-mix(in srgb, var(--status-live) 26%, transparent);
}

.upd-notice.is-warn {
    color: var(--status-review);
    background: color-mix(in srgb, var(--status-review) 9%, transparent);
    border-color: color-mix(in srgb, var(--status-review) 26%, transparent);
}

.upd-notice.is-error {
    color: var(--status-rejected);
    background: color-mix(in srgb, var(--status-rejected) 7%, transparent);
    border-color: color-mix(in srgb, var(--status-rejected) 30%, transparent);
}

.upd-notice-ico {
    display: inline-flex;
    flex: none;
    margin-top: 1px;
}

.upd-notice-ico:empty {
    display: none;
}

.upd-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
}

.upd-trailing {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--faint);
    white-space: nowrap;
}

.upd-detail {
    margin: 12px 0 0;
    padding: 12px;
    border-radius: var(--radius-sm);
    background: var(--bg-band);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--muted);
}

.sx-upd-nested {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 18px 12px 34px;
    border-top: 1px solid var(--border);
    background: var(--bg-band);
}

.sx-upd-nested > .sx-row-note {
    font-size: 13px;
}

.sx-upd-nested-hint {
    padding: 8px 18px 12px 34px;
    border-top: 1px solid var(--border);
    background: var(--bg-band);
    font-size: 12px;
    color: var(--faint);
}

.sx-upd-nested-hint:empty {
    display: none;
}

.upd-window-pick {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.upd-window-dash {
    color: var(--faint);
}

.sx-upd-build {
    padding: 4px 18px 14px;
    border-top: 1px solid var(--border);
    background: var(--bg-band);
}

.sx-upd-build .sx-kv {
    padding: 9px 0;
    font-size: 12.5px;
}

.sx-upd-build .sx-kv-v {
    font-size: 12.5px;
}

.sx-upd-build .sx-eyebrow {
    margin: 12px 0 4px;
    font-size: 10.5px;
}

/* ------------------------------------------------------------- privacy */

.privacy-center {
    display: flex;
    flex-direction: column;
    gap: 22px;
    color: var(--text);
}

.privacy-center .privacy-intro {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--muted);
}

.privacy-center .privacy-page-head h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 620;
    letter-spacing: -.025em;
    line-height: 1.2;
}

.privacy-center .privacy-page-head .sx-back + h2 {
    margin-top: 6px;
}

.privacy-center .privacy-group {
    min-width: 0;
}

.privacy-center .privacy-group-title {
    margin: 0 0 10px 2px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: var(--w-regular);
    letter-spacing: .01em;
    color: var(--faint);
}

.privacy-menu-group {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
}

.privacy-center .privacy-menu-row {
    min-height: 0;
    gap: 14px;
    padding: 14px 18px;
    background: transparent;
    color: var(--text);
    font-family: var(--font-sans);
}

.privacy-menu-row + .privacy-menu-row {
    border-top: 1px solid var(--border);
}

.privacy-center .privacy-menu-row:hover {
    background: var(--accent-wash);
}

.privacy-menu-row > .sx-icon-tile {
    color: var(--muted);
}

.privacy-menu-row > .sx-icon-tile svg {
    width: 16px;
    height: 16px;
}

.privacy-row-copy strong {
    font-size: 14px;
    font-weight: 560;
    letter-spacing: -.01em;
}

.privacy-row-copy small {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--muted);
}

.privacy-row-value {
    max-width: 160px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--muted);
    white-space: nowrap;
}

.privacy-chevron {
    display: inline-flex;
    color: var(--faint);
    font-size: 14px;
}

.privacy-recommendation {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 0;
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-band);
    color: var(--text);
    text-align: left;
    font-family: var(--font-sans);
    cursor: pointer;
}

.privacy-recommendation:hover {
    border-color: var(--border-strong);
}

.privacy-recommendation > .privacy-row-copy > span {
    display: block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--faint);
}

.privacy-recommendation > .privacy-row-copy > strong {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    font-weight: 560;
}

.privacy-recommendation > .privacy-row-copy > small {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--muted);
}

.privacy-center .privacy-note {
    margin: 0;
    padding: 0 2px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--faint);
}

.privacy-center .privacy-note.is-lead {
    font-size: 12.5px;
    color: var(--muted);
    padding: 0;
}

.privacy-center .privacy-card {
    margin: 0;
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.privacy-center .privacy-card > strong {
    font-size: 14px;
    font-weight: 560;
    letter-spacing: -.01em;
}

.privacy-center .privacy-card > p {
    margin: 4px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--muted);
    white-space: normal;
}

.privacy-center .privacy-card .privacy-actions {
    margin-top: 12px;
}

/* Row cards: a list of items sharing one bordered card. */
.privacy-center .privacy-rows {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
}

.privacy-center .privacy-rows > .privacy-card {
    border: 0;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 18px;
}

.privacy-center .privacy-rows > .privacy-card + .privacy-card {
    border-top: 1px solid var(--border);
}

.privacy-center .privacy-rows > .privacy-card > .privacy-row-copy {
    flex: 1;
    min-width: 0;
}

.privacy-center .privacy-rows > .privacy-card .privacy-row-copy > strong {
    display: block;
    font-size: 14px;
    font-weight: 560;
    letter-spacing: -.01em;
}

.privacy-center .privacy-rows > .privacy-card .privacy-row-copy > p {
    margin: 3px 0 0;
    font-family: var(--font-mono);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--muted);
    white-space: normal;
    overflow-wrap: anywhere;
}

.privacy-center .privacy-rows > .privacy-card .privacy-row-copy > p.is-sans {
    font-family: var(--font-sans);
    font-size: 12.5px;
}

.privacy-center .privacy-rows > .privacy-card .privacy-actions {
    margin: 0;
    flex: none;
}

.privacy-center .privacy-rows > .privacy-foot {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
    border-top: 1px solid var(--border);
    background: var(--bg-band);
}

.privacy-center .privacy-button,
.privacy-confirm .privacy-button {
    min-height: 30px;
    height: 30px;
    padding: 0 11px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: var(--w-medium);
    line-height: 1;
    white-space: nowrap;
}

.privacy-center .privacy-button:hover,
.privacy-confirm .privacy-button:hover {
    border-color: var(--muted);
    background: var(--surface);
}

.privacy-center .privacy-danger,
.privacy-confirm .privacy-danger {
    color: var(--status-rejected);
}

.privacy-center .privacy-danger:hover,
.privacy-confirm .privacy-danger:hover {
    border-color: var(--status-rejected);
    background: color-mix(in srgb, var(--status-rejected) 8%, transparent);
}

.privacy-center .privacy-primary {
    min-width: 0;
    min-height: 36px;
    height: 36px;
    padding: 0 15px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--text);
    color: var(--bg);
    font-size: 13.5px;
    font-weight: var(--w-medium);
}

.privacy-center .privacy-primary:hover {
    background: var(--text);
    filter: brightness(1.15);
    opacity: 1;
}

.privacy-center .privacy-actions {
    gap: 8px;
}

.privacy-state {
    margin: 0;
    padding: 14px 18px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    font-size: 13px;
    color: var(--faint);
}

.privacy-state > p {
    margin: 0 0 10px;
}

/* Permission rows: title + description + toggle. */
.privacy-center .privacy-rows > .privacy-card.privacy-permission-row {
    padding: 13px 18px;
    gap: 16px;
}

.privacy-permission {
    gap: 16px;
}

.privacy-permission strong {
    font-size: 14px;
    font-weight: 560;
    letter-spacing: -.01em;
}

.privacy-permission small {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--muted);
}

.privacy-permission > input {
    width: 38px;
    height: 22px;
    flex: 0 0 38px;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--bg-band);
    position: relative;
    transition: background .18s ease, border-color .18s ease;
}

.privacy-permission > input::before {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--faint);
    transform: translateX(0);
    transition: transform .18s ease, background .18s ease;
}

.privacy-permission > input:checked {
    background: var(--text);
    border-color: var(--text);
}

.privacy-permission > input:checked::before {
    margin-left: 0;
    background: var(--bg);
    transform: translateX(16px);
}

/* Diagnostics details. */
.privacy-center .privacy-diagnostics {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
}

.privacy-center .privacy-diagnostics > details {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.privacy-center .privacy-diagnostics > details + details {
    border-top: 1px solid var(--border);
}

.privacy-center .privacy-diagnostics summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    min-height: 0;
    font-size: 13.5px;
    font-weight: 560;
    cursor: pointer;
}

.privacy-center .privacy-diagnostics summary::-webkit-details-marker {
    display: none;
}

.privacy-center .privacy-diagnostic summary span {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--muted);
}

.privacy-center .privacy-diagnostics pre {
    margin: 0 18px 14px;
    padding: 12px;
    border-radius: var(--radius-sm);
    background: var(--bg-band);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.6;
    color: var(--muted);
}

.privacy-center .privacy-diagnostics .privacy-note {
    margin: 0 18px 14px;
    padding: 0;
}

.privacy-center .privacy-prepared {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--muted);
}

/* Scan hero. */
.privacy-scan-hero {
    padding: 28px 26px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.privacy-scan-symbol {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: var(--radius-lg);
    background: var(--bg-band);
    color: var(--text);
}

.privacy-scan-symbol svg {
    width: 26px;
    height: 26px;
}

.privacy-scan-hero[data-scan-outcome="clean"] .privacy-scan-symbol {
    color: var(--status-live);
    background: color-mix(in srgb, var(--status-live) 10%, transparent);
}

.privacy-scan-hero[data-scan-outcome="review"] .privacy-scan-symbol,
.privacy-scan-hero[data-scan-outcome="incomplete"] .privacy-scan-symbol,
[data-theme="dark"] .privacy-scan-hero[data-scan-outcome="review"] .privacy-scan-symbol,
[data-theme="dark"] .privacy-scan-hero[data-scan-outcome="incomplete"] .privacy-scan-symbol {
    color: var(--status-review);
    background: color-mix(in srgb, var(--status-review) 10%, transparent);
}

[data-theme="dark"] .privacy-scan-hero[data-scan-outcome="clean"] .privacy-scan-symbol {
    color: var(--status-live);
    background: color-mix(in srgb, var(--status-live) 10%, transparent);
}

.privacy-scan-hero[data-scan-outcome="review"] {
    padding: 28px 26px 24px;
}

.privacy-scan-hero[data-scan-outcome="review"] .privacy-scan-symbol {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg);
    margin-bottom: 14px;
}

.privacy-scan-hero[data-scan-outcome="review"] .privacy-scan-symbol svg {
    width: 26px;
    height: 26px;
}

.privacy-scan-hero h4 {
    font-size: 20px;
    font-weight: 620;
    letter-spacing: -.03em;
    line-height: 1.3;
}

.privacy-center .privacy-scan-description {
    margin: 8px auto 0;
    font-size: 13.5px;
    line-height: 1.6;
}

.privacy-scan-steps {
    justify-content: center;
    gap: 12px;
    margin: 22px 0 0;
}

.privacy-scan-steps li {
    flex: none;
    gap: 7px;
    font-size: 12px;
    color: var(--faint);
}

.privacy-scan-steps li span {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-xs);
    background: var(--bg-band);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 10.5px;
}

.privacy-scan-steps .is-current {
    color: var(--text);
    font-weight: var(--w-regular);
}

.privacy-scan-steps .is-current span {
    background: var(--text);
    color: var(--bg);
}

.privacy-scan-steps .is-done {
    color: var(--text);
}

.privacy-scan-steps .is-done span {
    color: var(--text);
}

.privacy-scan-hero .privacy-progress {
    margin: 22px 0 0;
    padding: 18px 0 0;
}

.privacy-scan-hero .privacy-progress > strong {
    font-size: 14px;
    font-weight: 560;
}

.privacy-center .privacy-scan-hero .privacy-progress > p {
    margin-top: 3px;
    font-size: 12.5px;
}

.privacy-progress-label {
    margin: 12px 0 6px;
    font-size: 12px;
}

.privacy-progress-label b {
    font-size: 17px;
    font-weight: 560;
}

.privacy-progress progress {
    height: 6px;
    border-radius: 3px;
    background: var(--bg-band);
}

.privacy-progress progress::-webkit-progress-bar {
    background: var(--bg-band);
}

.privacy-progress progress::-webkit-progress-value {
    background: var(--text);
}

.privacy-progress progress::-moz-progress-bar {
    background: var(--text);
}

.privacy-center .privacy-current-file {
    margin: 8px 0 0;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
    text-align: left;
}

.privacy-center .privacy-scan-date {
    margin: 20px 0 0;
    font-size: 12px;
}

.privacy-scan-metrics {
    margin: 14px 0 0;
    padding-top: 18px;
}

.privacy-scan-metrics dd {
    font-size: 26px;
    font-weight: 560;
    letter-spacing: -.02em;
}

.privacy-scan-cta {
    margin-top: 22px;
}

.privacy-center .privacy-scan-caution {
    margin: 14px 0 0;
    padding: 11px 13px;
    border-radius: var(--radius-md);
    background: var(--bg-band);
    border: 1px solid var(--border);
    font-size: 12.5px;
}

.privacy-center .privacy-detection {
    display: block;
    padding: 13px 18px;
}

.privacy-center .privacy-detection > strong {
    display: block;
    font-size: 14px;
    font-weight: 560;
    letter-spacing: -.01em;
}

.privacy-center .privacy-detection-path {
    margin: 3px 0 0;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--muted);
}

.privacy-center .privacy-detection-threat {
    margin: 3px 0 0;
    font-size: 12.5px;
    color: var(--muted);
}

.privacy-center .privacy-detection-threat .sx-mono {
    color: var(--muted);
}

.privacy-center .privacy-detection .privacy-actions {
    margin-top: 10px;
    gap: 6px;
}

.privacy-center .privacy-scan-help-group {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
}

.privacy-center .privacy-scan-help {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.privacy-center .privacy-scan-help + .privacy-scan-help {
    border-top: 1px solid var(--border);
}

.privacy-center .privacy-scan-help summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    min-height: 0;
    line-height: 1.4;
    font-size: 13.5px;
    color: var(--muted);
}

.privacy-center .privacy-scan-help summary::-webkit-details-marker {
    display: none;
}

.privacy-center .privacy-scan-help summary::after {
    content: "";
    width: 14px;
    height: 14px;
    flex: none;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236A6A72' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center / contain no-repeat;
}

.privacy-center .privacy-scan-help[open] summary::after {
    transform: rotate(180deg);
}

.privacy-center .privacy-scan-help .privacy-help-body {
    padding: 0 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.privacy-center .privacy-scan-help h5 {
    margin: 0;
    font-size: 13px;
    font-weight: 560;
}

.privacy-center .privacy-scan-help p {
    margin: 2px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--muted);
}

.privacy-center .privacy-scan-help .privacy-help-body.is-mono {
    display: block;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.6;
}

.privacy-center .privacy-scan-help .privacy-help-body.is-mono p {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
}

.privacy-center .privacy-scan-help pre {
    margin: 8px 18px 14px;
    padding: 12px;
    border-radius: var(--radius-sm);
    background: var(--bg-band);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.6;
    color: var(--muted);
}

/* ---------------------------------------------------------------- apps */

.apps-manage-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.apps-manage-group {
    min-width: 0;
}

.apps-manage-subhead {
    margin: 0 0 10px 2px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: var(--w-regular);
    letter-spacing: .01em;
    text-transform: none;
    color: var(--faint);
}

.apps-manage-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.apps-manage-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    border-radius: 0;
}

.apps-manage-row:hover {
    background: transparent;
}

.apps-manage-row + .apps-manage-row {
    border-top: 1px solid var(--border);
}

.apps-manage-icon {
    width: 36px;
    height: 36px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--bg-band);
    border: 1px solid var(--border);
    color: var(--text);
    overflow: hidden;
}

.apps-manage-icon svg {
    width: 17px;
    height: 17px;
}

.apps-manage-icon img {
    width: 22px;
    height: 22px;
    display: block;
}

.apps-manage-info {
    flex: 1;
    min-width: 0;
}

.apps-manage-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 560;
}

.apps-manage-sub {
    display: block;
    margin-top: 1px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--muted);
}

.apps-manage-usage {
    flex: none;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--muted);
}

.apps-manage-actions {
    display: flex;
    gap: 6px;
    flex: none;
}

.apps-manage-empty {
    padding: 14px 18px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    font-size: 13px;
    color: var(--faint);
}

/* --------------------------------------------------------------- about */

.sx-about-hero {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 22px 24px;
}

.sx-about-render {
    width: 112px;
    height: 112px;
    flex: none;
    border-radius: var(--radius-lg);
    background: var(--bg-band);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sx-about-render img {
    height: 96px;
    width: auto;
    max-width: 96px;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .18));
}

.sx-about-main {
    flex: 1;
    min-width: 0;
}

.sx-about-name-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.sx-about-name {
    font-size: 22px;
    font-weight: 620;
    letter-spacing: -.025em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sx-about-line {
    margin-top: 6px;
    font-size: 13px;
    color: var(--muted);
}

.sx-about-foot {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px;
    font-size: 12px;
    color: var(--faint);
}

.sx-about-foot a {
    color: var(--faint);
    text-decoration: none;
}

.sx-about-foot a:hover {
    color: var(--text);
}

.sx-about-foot > span {
    display: flex;
    gap: 14px;
}

/* -------------------------------------------------------------- support */

.sx-support-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.sx-support-tile {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    text-align: left;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.sx-support-tile:hover {
    border-color: var(--border-strong);
}

.sx-support-tile-title {
    display: block;
    font-size: 15px;
    font-weight: 620;
    letter-spacing: -.015em;
}

.sx-support-tile-sub {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--muted);
}

.sx-support-strip {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-band);
}

.sx-support-strip > span:first-child {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    color: var(--muted);
}

.sx-support-strip .sx-mono {
    color: var(--text);
}

.sx-form-card {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sx-form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 560;
}

.sx-form-label .is-opt {
    font-weight: 440;
    color: var(--faint);
}

.sx-form-help {
    margin-top: 5px;
    font-size: 12px;
    color: var(--faint);
}

.sx-form-count {
    display: flex;
    justify-content: flex-end;
    margin-top: 5px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--faint);
}

.sx-attach-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.sx-attach-row .sx-note {
    padding: 0;
}

.sx-form-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.sx-form-info > span:first-child {
    flex: none;
    margin-top: 1px;
    color: var(--faint);
}

.sx-form-info p {
    flex: 1;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--muted);
}

.sx-form-info .sx-link {
    font-size: inherit;
}

.sx-done-card {
    padding: 28px 26px;
    text-align: center;
}

.sx-done-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--status-live) 10%, transparent);
    color: var(--status-live);
}

.sx-done-title {
    font-size: 20px;
    font-weight: 620;
    letter-spacing: -.03em;
}

.sx-done-card p {
    max-width: 400px;
    margin: 8px auto 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--muted);
}

.sx-done-card p .sx-mono {
    font-size: 12.5px;
    color: var(--text);
}

.sx-done-card p .is-text {
    color: var(--text);
}

.sx-done-card .sx-actions {
    margin-top: 22px;
}

/* ------------------------------------------------------------ developer */

.sx-dev-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
}

.sx-dev-title {
    font-size: 15.5px;
    font-weight: 620;
    letter-spacing: -.015em;
}

.sx-dev-head .sx-row-sub {
    margin-top: 4px;
}

.sx-dev-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 22px;
    border-top: 1px solid var(--border);
}

.sx-dev-row > .sx-row-title {
    flex: 1;
    font-size: 13.5px;
}

.sx-dev-row.is-foot {
    gap: 12px;
    background: var(--bg-band);
}

.sx-dev-row.is-foot .sx-note {
    padding: 0;
}

.sx-dev-details > summary {
    padding: 12px 22px;
}

.sx-dev-details > summary .sx-mono {
    font-size: 11px;
    color: var(--faint);
}

.sx-dev-details .sx-details-body {
    padding: 4px 22px 16px;
}

.sx-dev-hint {
    padding: 10px 22px 12px;
    border-top: 1px solid var(--border);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--status-review);
}

/* ------------------------------------------------------- legacy bridges */

/* app.js still sets `style.display` on a few blocks; make sure nothing we
   don't need from the old panel styling leaks into the new markup. */
.settings-main .sx-card .settings-item-help,
.sx-card .settings-item-help {
    padding: 0;
    font-size: 12.5px;
    color: var(--muted);
}

/* The old inline-panel buttons are not used by the new markup, but a few
   JS renderers (RAID fallback error card) still emit them. */
.settings-main .sx-card .settings-btn-primary,
.settings-main .sx-card .settings-btn-secondary {
    width: auto;
    margin: 0;
}

/* ---------------------------------------------------------------- phone */

@media (max-width: 640px) {
    .sx-head h2 {
        display: none;
    }

    .sx-lede {
        margin-top: 0;
    }

    .sx-head-row {
        align-items: center;
    }

    .settings-content > .sx-head + *,
    .settings-content > .sx-head-row + * {
        margin-top: 0;
    }

    .settings-content {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .sx-nav-group {
        padding: 12px 16px 2px;
    }

    .sx-tiles,
    .sx-tiles.is-2,
    .sx-mode-tiles,
    .sx-protect-tiles,
    .settings-theme-cards,
    .sx-support-tiles {
        grid-template-columns: 1fr;
    }

    .sx-member-row {
        grid-template-columns: 36px minmax(0, 1fr) auto;
    }

    .sx-member-row .sx-quota {
        grid-column: 2 / -1;
    }

    .sx-about-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .sx-wiz-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .sx-stepper {
        flex-wrap: wrap;
        gap: 8px 12px;
    }

    .sx-dialog-backdrop {
        padding: 16px;
        align-items: flex-end;
    }

    .sx-dialog {
        width: 100%;
    }

    .sx-proc-head,
    .sx-proc-row {
        grid-template-columns: minmax(0, 1fr) 52px 52px 70px;
        gap: 8px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .sx-drive-head,
    .sx-drive-usage,
    .sx-drive-foot {
        padding-left: 16px;
        padding-right: 16px;
    }

    .sx-drive-foot {
        flex-wrap: wrap;
    }

    .sx-code-row {
        margin-left: 16px;
        margin-right: 16px;
    }

    .sx-dev-head,
    .sx-dev-row,
    .sx-dev-details > summary,
    .sx-dev-details .sx-details-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .sx-inline-input,
    .settings-main .sx-inline-input {
        width: 140px;
    }
}


/* The legacy panel styling turned any #settings-totp-status into a card row.
   In the redesign it is the row's own sub-line. */
.settings-main #settings-totp-status,
#settings-totp-status {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}


/* The strength meter only means something once something is typed; it ships
   aria-hidden until then, so hide it visually too. */
.sx-dialog .password-strength[aria-hidden="true"] {
    display: none;
}

.sx-dialog .password-strength {
    margin-top: -6px;
}


/* The privacy confirm is a native <dialog> (focus trap + platform dismissal).
   Dress it as the settings sheet so every confirmation reads the same. */
.privacy-confirm {
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-lift);
    max-width: min(440px, calc(100vw - 32px));
}

.privacy-confirm::backdrop {
    background: color-mix(in srgb, #000 45%, transparent);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.privacy-confirm h3 {
    margin: 0;
    padding: 16px 20px 0;
    font-size: 16px;
    font-weight: 620;
    letter-spacing: -.02em;
}

.privacy-confirm p {
    margin: 0;
    padding: 12px 20px 18px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}

.privacy-confirm form {
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    background: var(--bg-band);
    gap: 8px;
}

/* ------------------------------------------------------- markup helpers */

.sx-only-mobile { display: block; }
.sx-only-desktop { display: none; }

@media (min-width: 641px) {
    .settings-main .sx-only-mobile { display: none; }
    .settings-main .sx-only-desktop { display: block; }
    #settings-raid-menu-row { display: none !important; }
}

.sx-profile-row { padding: 18px 20px; }
.sx-profile-name { font-size: 17px; font-weight: 620; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-band-label { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 560; color: var(--text); }
.sx-row.sx-row-12x20 { padding: 12px 20px; }
.sx-row.sx-row-11 { padding: 11px 18px; gap: 14px; justify-content: space-between; }
.sx-row.sx-row-12 { padding: 12px 18px; }
.sx-row.is-between { justify-content: space-between; }
.sx-row-title.is-13 { font-size: 13.5px; }
.sx-row-sub.is-12 { font-size: 12px; margin-top: 1px; }
.sx-row-sub.is-review { color: var(--status-review); margin-top: 6px; }
.sx-mono.is-125 { font-size: 12.5px; }
.sx-wiz-body p.is-125 { font-size: 12.5px; }
.sx-mt-3 { margin-top: 3px; }
.sx-mt-8 { margin-top: 8px; }
.sx-mb-5 { margin-bottom: 5px; }
.sx-mb-12 { margin-bottom: 12px; }
.sx-grow { flex: 1; }
.sx-kvs { border-top: 1px solid var(--border); }
.sx-kv.sx-kv-10 { padding: 10px 16px; }
.sx-tiles.is-top { align-items: start; }
.sx-actions.is-top { align-items: flex-start; }
.sx-actions.is-top > .sx-textarea { flex: 1; }
.sx-step > em { font-style: normal; }
.sx-step.active, .sx-step.done { color: var(--text); }
.sx-step.active > span { background: var(--accent-wash); }
.sx-details-inline > summary { padding: 10px 0 0; font-size: 12.5px; }
.sx-details-inline .sx-details-body { padding: 10px 0 0; }
.sx-details-inline .sx-details-body .sx-a { margin: 0 0 6px; }
.sx-attach-chips { display: contents; }
.sx-row-band-note { padding: 10px 18px; border-top: 1px solid var(--border); }
.sx-drive-list { display: flex; flex-direction: column; gap: 10px; }
.sx-drive-list:empty { display: none; }
.sx-drive-list > .sx-empty:only-child { margin: 0; }
.sx-field.is-140 .sx-input { width: 140px; }
.sx-wiz-body .sx-options .sx-note { margin: 2px 0; }
.sx-wiz-body .sx-options .sx-field { margin-top: 6px; }
.sx-textarea.is-code { width: 100%; box-sizing: border-box; }
.upd-actions .sx-btn:disabled { opacity: .5; }
.sx-dialog-body .sx-tiles { margin: 0; }
.sx-dialog-body .sx-box .sx-check.is-row .sx-mono { font-size: 11.5px; color: var(--muted); }
.sx-dialog-body .sx-box .sx-row { padding: 11px 14px; gap: 14px; }
.sx-dialog-body .sx-box .sx-row .sx-row-title { font-size: 13.5px; }
.sx-dialog-body .sx-box .sx-row .sx-row-sub { font-size: 12px; margin-top: 0; }
.sx-dialog-body .sx-box .sx-row.is-muted .sx-row-title { color: var(--muted); }
.sx-dialog-body .sx-box .sx-row.is-muted .sx-row-sub { color: var(--faint); }