/* /Components/LocaleSelector.razor.rz.scp.css */
/* SPDX-License-Identifier: ISC */
/* Copyright (c) 2026 iBorkedIt */

.locale-selector[b-qwj8wqvm7q] {
    appearance: none;
    background: transparent;
    border: none;
    color: var(--color-text-2);
    font-family: var(--font-body);
    font-size: var(--text-base);
    cursor: pointer;
    padding: 0;
    outline: none;
    /* Inherit opacity from parent footer so it fades with the copyright */
}

    .locale-selector:hover[b-qwj8wqvm7q] {
        color: var(--color-text);
    }

    .locale-selector:focus-visible[b-qwj8wqvm7q] {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
        border-radius: var(--radius-sm);
    }

    /* System picker options — best-effort theming */
    .locale-selector option[b-qwj8wqvm7q] {
        background: var(--color-s0);
        color: var(--color-text);
    }
/* /Components/Settings/AppearanceSection.razor.rz.scp.css */
/* SPDX-License-Identifier: ISC */
/* Copyright (c) 2026 iBorkedIt */

.appearance-section__field[b-2293kmu5h6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.appearance-section__label[b-2293kmu5h6] {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
}

.appearance-section__theme-group[b-2293kmu5h6],
.appearance-section__ratio-group[b-2293kmu5h6] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.appearance-section__theme-btn[b-2293kmu5h6],
.appearance-section__ratio-btn[b-2293kmu5h6] {
    padding: var(--space-1-5) var(--space-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background var(--duration-fast) var(--easing-standard),
                color var(--duration-fast) var(--easing-standard),
                border-color var(--duration-fast) var(--easing-standard);
}

    .appearance-section__theme-btn:hover[b-2293kmu5h6],
    .appearance-section__ratio-btn:hover[b-2293kmu5h6] {
        border-color: var(--color-accent);
        color: var(--color-accent);
    }

    .appearance-section__theme-btn.is-active[b-2293kmu5h6],
    .appearance-section__ratio-btn.is-active[b-2293kmu5h6] {
        background: var(--color-accent);
        border-color: var(--color-accent);
        color: var(--color-on-accent, #fff);
    }

.appearance-section__hint[b-2293kmu5h6] {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}
/* /Components/Settings/BackendsSection.razor.rz.scp.css */
/* SPDX-License-Identifier: ISC */
/* Copyright (c) 2026 iBorkedIt */

/* ── Empty / hint text ──────────────────────────────────────────────────── */

.backends-section__empty[b-ll0djgqjir] {
    margin: 0 0 var(--space-1) 0;
    font-size: var(--text-sm);
    color: var(--color-text-primary);
}

.backends-section__hint[b-ll0djgqjir] {
    margin: 0 0 var(--space-3) 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* ── Backend list ───────────────────────────────────────────────────────── */

.backends-section__list[b-ll0djgqjir] {
    list-style: none;
    margin: 0 0 var(--space-3) 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.backends-section__item[b-ll0djgqjir] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-s1);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
}

.backends-section__item-label[b-ll0djgqjir] {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    font-weight: var(--weight-medium);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.backends-section__item-type[b-ll0djgqjir] {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.backends-section__item-warn[b-ll0djgqjir] {
    font-size: var(--text-sm);
    color: var(--color-rust);
    flex-shrink: 0;
}

.backends-section__remove-btn[b-ll0djgqjir] {
    flex-shrink: 0;
    padding: var(--space-1) var(--space-2);
    background: transparent;
    color: var(--color-error);
    border: 1px solid var(--color-error);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.backends-section__remove-btn:hover[b-ll0djgqjir] {
    background: var(--color-error-glow);
}

/* ── Remove confirmation zone ───────────────────────────────────────────── */

.backends-section__remove-zone[b-ll0djgqjir] {
    padding: var(--space-3);
    background: var(--color-s1);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.backends-section__remove-zone--warning[b-ll0djgqjir] {
    border-color: var(--color-error);
    background: var(--color-error-glow);
}

.backends-section__remove-zone-title[b-ll0djgqjir] {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-error);
}

.backends-section__remove-zone-body[b-ll0djgqjir] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-2);
    line-height: 1.5;
}

.backends-section__remove-zone-offer[b-ll0djgqjir] {
    font-style: italic;
}

.backends-section__remove-zone-actions[b-ll0djgqjir] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.backends-section__btn-danger[b-ll0djgqjir] {
    padding: var(--space-2) var(--space-3);
    background: var(--color-error);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.backends-section__btn-danger:hover[b-ll0djgqjir]  { opacity: 0.88; }
.backends-section__btn-danger:active[b-ll0djgqjir] { opacity: 0.76; }

/* ── Add form ───────────────────────────────────────────────────────────── */

.backends-section__form[b-ll0djgqjir] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 28rem;
    padding: var(--space-3);
    background: var(--color-s1);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}

.backends-section__form-title[b-ll0djgqjir] {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}

.backends-section__field[b-ll0djgqjir] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.backends-section__field-label[b-ll0djgqjir] {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
}

.backends-section__input[b-ll0djgqjir] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: var(--color-s0);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    box-sizing: border-box;
    outline: none;
    transition: border-color var(--transition-fast);
}

.backends-section__input:focus[b-ll0djgqjir] {
    border-color: var(--color-accent);
}

.backends-section__input--error[b-ll0djgqjir] {
    border-color: var(--color-error);
}

.backends-section__field-error[b-ll0djgqjir] {
    font-size: var(--text-xs);
    color: var(--color-error);
}

.backends-section__form-error[b-ll0djgqjir] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-error);
}

.backends-section__form-actions[b-ll0djgqjir] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ── Shared buttons ─────────────────────────────────────────────────────── */

.backends-section__btn-primary[b-ll0djgqjir] {
    padding: var(--space-2) var(--space-4);
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.backends-section__btn-primary:hover[b-ll0djgqjir]  { opacity: 0.88; }
.backends-section__btn-primary:active[b-ll0djgqjir] { opacity: 0.76; }
.backends-section__btn-primary:disabled[b-ll0djgqjir] { opacity: 0.5; cursor: not-allowed; }

.backends-section__btn-secondary[b-ll0djgqjir] {
    padding: var(--space-2) var(--space-3);
    background: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.backends-section__btn-secondary:hover[b-ll0djgqjir]    { background: var(--color-accent-glow); }
.backends-section__btn-secondary:disabled[b-ll0djgqjir] { opacity: 0.5; cursor: not-allowed; }

.backends-section__add-btn[b-ll0djgqjir] {
    align-self: flex-start;
}

/* ── OAuth-specific ─────────────────────────────────────────────────────── */

.backends-section__redirect-info[b-ll0djgqjir] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.backends-section__redirect-uri[b-ll0djgqjir] {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    word-break: break-all;
    padding: var(--space-1) var(--space-2);
    background: var(--color-s2);
    border-radius: var(--radius-sm);
    user-select: all;
}

.backends-section__reconnect-btn[b-ll0djgqjir] {
    flex-shrink: 0;
    padding: var(--space-1) var(--space-2);
    background: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.backends-section__reconnect-btn:hover[b-ll0djgqjir] {
    background: var(--color-accent-glow);
}

/* ── Storage ceiling preset buttons ─────────────────────────────────────── */

.backends-section__ceiling-presets[b-ll0djgqjir] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.backends-section__ceiling-btn[b-ll0djgqjir] {
    padding: var(--space-1) var(--space-2-5, var(--space-2));
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--duration-fast) var(--easing-standard),
                color var(--duration-fast) var(--easing-standard),
                border-color var(--duration-fast) var(--easing-standard);
}

    .backends-section__ceiling-btn:hover[b-ll0djgqjir] {
        border-color: var(--color-accent);
        color: var(--color-accent);
    }

    .backends-section__ceiling-btn.is-active[b-ll0djgqjir] {
        background: var(--color-accent);
        border-color: var(--color-accent);
        color: var(--color-on-accent, #fff);
    }

.backends-section__ceiling-input[b-ll0djgqjir] {
    max-width: 14rem;
}

.backends-section__ceiling-warn[b-ll0djgqjir] {
    margin: var(--space-1) 0 0;
    font-size: var(--text-xs);
    color: var(--color-accent);
}
/* /Components/Settings/CaptureSection.razor.rz.scp.css */
/* SPDX-License-Identifier: ISC */
/* Copyright (c) 2026 iBorkedIt */

.capture-section__field[b-5tz4ic3wrt] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.capture-section__label[b-5tz4ic3wrt] {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-text-primary);
}

.capture-section__slider[b-5tz4ic3wrt] {
    width: 100%;
    max-width: 320px;
    accent-color: var(--color-accent);
}

.capture-section__hint[b-5tz4ic3wrt] {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    margin: 0;
}

.capture-section__format-toggle[b-5tz4ic3wrt] {
    display: flex;
    gap: var(--space-1);
}

.capture-section__format-btn[b-5tz4ic3wrt] {
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.capture-section__format-btn.is-active[b-5tz4ic3wrt] {
    background: var(--color-accent-glow);
    color: var(--color-accent);
    border-color: var(--color-accent);
}
/* /Components/Settings/ExportSection.razor.rz.scp.css */
/* SPDX-License-Identifier: ISC */
/* Copyright (c) 2026 iBorkedIt */

.export-section__descriptions[b-bqcwxtrl3c] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.export-section__description[b-bqcwxtrl3c] {
    font-size: var(--text-base);
    color: var(--color-text-2);
    line-height: 1.55;
    margin: 0;
}

.export-section__recovery-warning[b-bqcwxtrl3c] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-error);
    line-height: 1.45;
    margin: 0;
}

.export-section__recovery-icon[b-bqcwxtrl3c] {
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Button group ────────────────────────────────────────────────────────── */

.export-section__buttons[b-bqcwxtrl3c] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-4) 0;
}

.export-section__btn[b-bqcwxtrl3c] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: opacity var(--transition-fast), background var(--transition-fast);
    white-space: nowrap;
}

.export-section__btn:disabled[b-bqcwxtrl3c] {
    opacity: 0.5;
    cursor: not-allowed;
}

.export-section__btn--config[b-bqcwxtrl3c] {
    background: var(--color-accent);
    color: #fff;
    border: none;
}

.export-section__btn--config:hover:not(:disabled)[b-bqcwxtrl3c] {
    opacity: 0.88;
}

.export-section__btn--recovery[b-bqcwxtrl3c] {
    background: transparent;
    color: var(--color-error);
    border: 1px solid var(--color-error);
}

.export-section__btn--recovery:hover:not(:disabled)[b-bqcwxtrl3c] {
    background: var(--color-error-glow);
}

/* ── Status messages ─────────────────────────────────────────────────────── */

.export-section__statuses[b-bqcwxtrl3c] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.export-section__status[b-bqcwxtrl3c] {
    font-size: var(--text-base);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    margin: 0;
}

.export-section__status--success[b-bqcwxtrl3c] {
    color: var(--color-accent);
    background: var(--color-accent-glow);
}

.export-section__status--error[b-bqcwxtrl3c] {
    color: var(--color-error);
    background: var(--color-error-glow);
}

.export-section__btn--vault[b-bqcwxtrl3c] {
    background: transparent;
    color: var(--color-text-1);
    border: 1px solid var(--color-s2);
}

.export-section__btn--vault:hover:not(:disabled)[b-bqcwxtrl3c] {
    background: var(--color-s1);
}

.export-section__divider[b-bqcwxtrl3c] {
    border: none;
    border-top: 1px solid var(--color-s1);
    margin: var(--space-4) 0 var(--space-3);
}

.export-section__vault-progress[b-bqcwxtrl3c] {
    font-size: var(--text-base);
    color: var(--color-text-2);
    margin: 0 0 var(--space-2);
}

.export-section__spinner[b-bqcwxtrl3c] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: currentColor;
    border-radius: 50%;
    flex-shrink: 0;
}

.export-section__spinner--neutral[b-bqcwxtrl3c] {
    border-color: var(--color-s2);
    border-top-color: var(--color-text-2);
}
/* /Components/Settings/SecuritySection.razor.rz.scp.css */
/* SPDX-License-Identifier: ISC */
/* Copyright (c) 2026 iBorkedIt */

.security-section__unsupported[b-nykuxglri9],
.security-section__empty[b-nykuxglri9] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

/* ── Credential list ─────────────────────────────────────────────────────── */

.security-section__credential-list[b-nykuxglri9] {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.security-section__credential[b-nykuxglri9] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-s0);
}

.security-section__credential.is-revoked[b-nykuxglri9] {
    opacity: 0.5;
}

.security-section__credential-info[b-nykuxglri9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
    flex: 1;
    min-width: 0;
}

.security-section__credential-name[b-nykuxglri9] {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.security-section__credential-meta[b-nykuxglri9] {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.security-section__revoke-btn[b-nykuxglri9] {
    flex-shrink: 0;
    white-space: nowrap;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-error);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-error);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background var(--duration-fast) var(--easing-standard),
                color var(--duration-fast) var(--easing-standard);
}

    .security-section__revoke-btn:hover[b-nykuxglri9] {
        background: var(--color-error);
        color: #fff;
    }

.security-section__revoked-label[b-nykuxglri9] {
    flex-shrink: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

/* ── Revoke confirmation banner ──────────────────────────────────────────── */

.security-section__confirm-banner[b-nykuxglri9] {
    padding: var(--space-3);
    border: 1px solid var(--color-error);
    border-radius: var(--radius-md);
    background: var(--color-error-glow);
    margin-bottom: var(--space-4);
}

    .security-section__confirm-banner p[b-nykuxglri9] {
        margin: 0 0 var(--space-3);
        font-size: var(--text-sm);
        color: var(--color-text-primary);
    }

.security-section__confirm-actions[b-nykuxglri9] {
    display: flex;
    gap: var(--space-2);
}

.security-section__confirm-yes[b-nykuxglri9] {
    padding: var(--space-1-5) var(--space-3);
    border: none;
    border-radius: var(--radius-pill);
    background: var(--color-error);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
}

    .security-section__confirm-yes:disabled[b-nykuxglri9] { opacity: 0.5; cursor: default; }

.security-section__confirm-cancel[b-nykuxglri9] {
    padding: var(--space-1-5) var(--space-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    cursor: pointer;
}

    .security-section__confirm-cancel:disabled[b-nykuxglri9] { opacity: 0.5; cursor: default; }

/* ── Add credential form ─────────────────────────────────────────────────── */

.security-section__register-form[b-nykuxglri9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.security-section__register-label[b-nykuxglri9] {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
}

.security-section__register-input[b-nykuxglri9] {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-s0);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    outline: none;
    transition: border-color var(--duration-fast) var(--easing-standard);
}

    .security-section__register-input:focus[b-nykuxglri9] {
        border-color: var(--color-accent);
    }

.security-section__attachment-toggle[b-nykuxglri9] {
    display: flex;
    gap: var(--space-1);
}

.security-section__attachment-btn[b-nykuxglri9] {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border-subtle);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background var(--duration-fast) var(--easing-standard),
                color var(--duration-fast) var(--easing-standard),
                border-color var(--duration-fast) var(--easing-standard);
}

.security-section__attachment-btn.is-active[b-nykuxglri9] {
    background: var(--color-accent-glow);
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.security-section__attachment-hint[b-nykuxglri9] {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.security-section__register-error[b-nykuxglri9] {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-error);
}

.security-section__register-success[b-nykuxglri9] {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-accent);
}

.security-section__register-actions[b-nykuxglri9] {
    display: flex;
    gap: var(--space-2);
}

.security-section__register-submit[b-nykuxglri9] {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1-5) var(--space-3);
    border: none;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--color-on-accent, #fff);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
}

    .security-section__register-submit:disabled[b-nykuxglri9] { opacity: 0.5; cursor: default; }

.security-section__register-cancel[b-nykuxglri9] {
    padding: var(--space-1-5) var(--space-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    cursor: pointer;
}

    .security-section__register-cancel:disabled[b-nykuxglri9] { opacity: 0.5; cursor: default; }

.security-section__add-btn[b-nykuxglri9] {
    padding: var(--space-1-5) var(--space-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--easing-standard),
                color var(--duration-fast) var(--easing-standard);
}

    .security-section__add-btn:hover[b-nykuxglri9] {
        border-color: var(--color-accent);
        color: var(--color-accent);
    }

.security-section__error[b-nykuxglri9] {
    margin: var(--space-2) 0 0;
    font-size: var(--text-xs);
    color: var(--color-error);
}

.security-section__spinner[b-nykuxglri9] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
}

/* ── Auto-lock subsection ────────────────────────────────────────────────── */

.security-section__divider[b-nykuxglri9] {
    border: none;
    border-top: 1px solid var(--color-border-subtle);
    margin: var(--space-4) 0;
}

.security-section__autolock-heading[b-nykuxglri9] {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}

.security-section__setting-row[b-nykuxglri9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.security-section__setting-label[b-nykuxglri9] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    flex: 1;
    min-width: 0;
}

.security-section__select[b-nykuxglri9] {
    flex-shrink: 0;
    padding: var(--space-1-5) var(--space-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-s0);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    font-family: var(--font-body);
    cursor: pointer;
    outline: none;
    transition: border-color var(--duration-fast) var(--easing-standard);
}

    .security-section__select:focus[b-nykuxglri9] {
        border-color: var(--color-accent);
    }
/* /Components/Settings/StorageStatsSection.razor.rz.scp.css */
/* SPDX-License-Identifier: ISC */
/* Copyright (c) 2026 iBorkedIt */

/* ── Vault-level capacity summary ───────────────────────────────────────── */

.storage-stats__vault-capacity[b-kgd7c0pu1g] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-s0);
    margin-bottom: var(--space-3);
}

.storage-stats__vault-capacity-header[b-kgd7c0pu1g] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.storage-stats__vault-mode[b-kgd7c0pu1g] {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}

.storage-stats__vault-usage[b-kgd7c0pu1g] {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.storage-stats__quota-bar--warn[b-kgd7c0pu1g] {
    background: var(--color-error) !important;
}

/* ── Main grid ───────────────────────────────────────────────────────────── */

.storage-stats[b-kgd7c0pu1g] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */

.storage-stats__toolbar[b-kgd7c0pu1g] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-end;
}

.storage-stats__sync-status[b-kgd7c0pu1g] {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    margin-right: auto;
}

.storage-stats__sync-status--error[b-kgd7c0pu1g] {
    color: var(--color-error);
}

.storage-stats__refresh-btn[b-kgd7c0pu1g] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1-5) var(--space-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.storage-stats__refresh-btn:hover:not(:disabled)[b-kgd7c0pu1g] {
    background: var(--color-surface-hover);
    color: var(--color-text-primary);
}

.storage-stats__refresh-btn:disabled[b-kgd7c0pu1g] {
    opacity: 0.5;
    cursor: default;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */

.storage-stats__card[b-kgd7c0pu1g] {
    padding: var(--space-3) var(--space-4);
    background: var(--color-s1);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.storage-stats__card-header[b-kgd7c0pu1g] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.storage-stats__card-label[b-kgd7c0pu1g] {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}

.storage-stats__type-tag[b-kgd7c0pu1g] {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    padding: 1px var(--space-1-5);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-pill);
}

/* ── Status dot ──────────────────────────────────────────────────────────── */

.storage-stats__status[b-kgd7c0pu1g] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    margin-left: auto;
}

.storage-stats__status[b-kgd7c0pu1g]::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.storage-stats__status--online[b-kgd7c0pu1g]::before  { background: #4caf50; }
.storage-stats__status--offline[b-kgd7c0pu1g]::before { background: var(--color-error); }

.storage-stats__status--online[b-kgd7c0pu1g]  { color: #4caf50; }
.storage-stats__status--offline[b-kgd7c0pu1g] { color: var(--color-error); }

/* ── Data rows ───────────────────────────────────────────────────────────── */

.storage-stats__row[b-kgd7c0pu1g] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
}

.storage-stats__muted[b-kgd7c0pu1g] {
    color: var(--color-text-secondary);
}

/* ── Quota progress bar ──────────────────────────────────────────────────── */

.storage-stats__quota-bar-wrap[b-kgd7c0pu1g] {
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--color-border-subtle);
    overflow: hidden;
}

.storage-stats__quota-bar[b-kgd7c0pu1g] {
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    transition: width var(--transition-slow);
    max-width: 100%;
}

/* ── Badges ──────────────────────────────────────────────────────────────── */

.storage-stats__badge[b-kgd7c0pu1g] {
    font-size: var(--text-xs);
    padding: 1px var(--space-2);
    border-radius: var(--radius-pill);
    font-weight: var(--weight-medium);
    overflow-wrap: anywhere;
}

.storage-stats__badge--ok[b-kgd7c0pu1g] {
    background: rgba(76, 175, 80, 0.12);
    color: #4caf50;
}

.storage-stats__badge--warn[b-kgd7c0pu1g] {
    background: var(--color-accent-glow);
    color: var(--color-accent);
}

.storage-stats__badge--error[b-kgd7c0pu1g] {
    background: var(--color-error-glow);
    color: var(--color-error);
}

.storage-stats__health-time[b-kgd7c0pu1g] {
    margin-left: auto;
    font-size: var(--text-xs);
}

.storage-stats__health-anomaly[b-kgd7c0pu1g] {
    font-size: var(--text-sm);
    color: var(--color-error);
}

/* ── States ──────────────────────────────────────────────────────────────── */

.storage-stats__loading[b-kgd7c0pu1g],
.storage-stats__empty[b-kgd7c0pu1g] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    padding: var(--space-2) 0;
}

.storage-stats__error[b-kgd7c0pu1g] {
    font-size: var(--text-sm);
    color: var(--color-error);
    margin: 0;
}

/* ── Missing-chunk affected-item list ────────────────────────────────────── */

.storage-stats__missing-list[b-kgd7c0pu1g] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.storage-stats__missing-item[b-kgd7c0pu1g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-error-glow);
}

.storage-stats__missing-item--warn[b-kgd7c0pu1g] {
    background: var(--color-accent-glow);
}

.storage-stats__missing-item-info[b-kgd7c0pu1g] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-width: 0;
}

.storage-stats__missing-item-title[b-kgd7c0pu1g] {
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 28ch;
}

.storage-stats__missing-item-open-btn[b-kgd7c0pu1g] {
    flex-shrink: 0;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-s0);
    color: var(--color-text-primary);
    font-size: var(--text-xs);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.storage-stats__missing-item-open-btn:hover[b-kgd7c0pu1g] { background: var(--color-surface-hover); }

/* ── Orphan deletion confirmation ────────────────────────────────────────── */

.storage-stats__confirm-banner[b-kgd7c0pu1g] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-accent-glow);
    border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
}

.storage-stats__confirm-banner--danger[b-kgd7c0pu1g] {
    background: var(--color-error-glow);
    border-color: color-mix(in srgb, var(--color-error) 30%, transparent);
}

.storage-stats__confirm-heading[b-kgd7c0pu1g] {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.storage-stats__confirm-banner--danger .storage-stats__confirm-heading[b-kgd7c0pu1g] {
    color: var(--color-error);
}

.storage-stats__confirm-body[b-kgd7c0pu1g] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    overflow-wrap: anywhere;
}

.storage-stats__confirm-checkbox[b-kgd7c0pu1g] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-error);
    font-weight: var(--weight-medium);
    cursor: pointer;
}

.storage-stats__confirm-actions[b-kgd7c0pu1g] {
    display: flex;
    gap: var(--space-2);
}

.storage-stats__confirm-delete-btn[b-kgd7c0pu1g] {
    padding: var(--space-1-5) var(--space-3);
    border-radius: var(--radius-sm);
    border: none;
    background: var(--color-error);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: opacity var(--transition-fast);
}
.storage-stats__confirm-delete-btn:hover:not(:disabled)[b-kgd7c0pu1g] { opacity: 0.85; }
.storage-stats__confirm-delete-btn:disabled[b-kgd7c0pu1g] { opacity: 0.5; cursor: not-allowed; }

.storage-stats__confirm-cancel-btn[b-kgd7c0pu1g] {
    padding: var(--space-1-5) var(--space-3);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-subtle);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.storage-stats__confirm-cancel-btn:hover:not(:disabled)[b-kgd7c0pu1g] { background: var(--color-surface-hover); }
.storage-stats__confirm-cancel-btn:disabled[b-kgd7c0pu1g] { opacity: 0.5; cursor: not-allowed; }

/* ── Refresh spin animation ──────────────────────────────────────────────── */

@keyframes storage-stats-spin-b-kgd7c0pu1g {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.storage-stats__spin[b-kgd7c0pu1g] {
    animation: storage-stats-spin-b-kgd7c0pu1g 0.8s linear infinite;
    transform-origin: center;
}
/* /Components/Vault/BulkActionBar.razor.rz.scp.css */
/* SPDX-License-Identifier: ISC */
/* Copyright (c) 2026 iBorkedIt */

/* ── Panel (sits above the main bar) ───────────────────────────────────── */

.bulk-bar__panel[b-mkpgbyd1ay] {
    position: fixed;
    bottom: 3.5rem; /* sits above the main bar */
    inset-inline: 0;
    z-index: 300;
    background: var(--color-s1);
    border-top: 1px solid var(--color-border-subtle);
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: 50vh;
    overflow-y: auto;
}

/* ── Main bar ───────────────────────────────────────────────────────────── */

.bulk-bar[b-mkpgbyd1ay] {
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    z-index: 300;
    background: var(--color-s1);
    border-top: 1px solid var(--color-border-subtle);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    height: 3.5rem;
}

.bulk-bar__count[b-mkpgbyd1ay] {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
    flex-shrink: 0;
}

.bulk-bar__actions[b-mkpgbyd1ay] {
    display: flex;
    gap: var(--space-2);
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}

.bulk-bar__action-btn[b-mkpgbyd1ay] {
    flex-shrink: 0;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    cursor: pointer;
}

.bulk-bar__action-btn:disabled[b-mkpgbyd1ay] {
    opacity: 0.4;
    cursor: default;
}

.bulk-bar__action-btn--danger[b-mkpgbyd1ay] {
    color: var(--color-error);
    border-color: var(--color-error-glow);
}

.bulk-bar__done-btn[b-mkpgbyd1ay] {
    flex-shrink: 0;
    padding: var(--space-1) var(--space-3);
    border: none;
    background: transparent;
    color: var(--color-accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
}

/* ── Panel internals ────────────────────────────────────────────────────── */

.bulk-bar__panel-label[b-mkpgbyd1ay] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.bulk-bar__tag-chips[b-mkpgbyd1ay] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1-5);
}

.bulk-bar__tag-chip[b-mkpgbyd1ay] {
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-tag-bg);
    color: var(--color-tag-text);
    font-size: var(--text-xs);
    cursor: pointer;
}

.bulk-bar__tag-chip.is-selected[b-mkpgbyd1ay] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.bulk-bar__tag-chip--private[b-mkpgbyd1ay] { background: var(--color-accent-glow); color: var(--color-accent); }
.bulk-bar__tag-chip--private.is-selected[b-mkpgbyd1ay] { background: var(--color-accent); color: #fff; }
.bulk-bar__tag-chip--confidential[b-mkpgbyd1ay] { background: var(--color-error-glow); color: var(--color-error); }
.bulk-bar__tag-chip--confidential.is-selected[b-mkpgbyd1ay] { background: var(--color-error); color: #fff; }

.bulk-bar__panel-actions[b-mkpgbyd1ay] {
    display: flex;
    gap: var(--space-2);
}

.bulk-bar__confirm-btn[b-mkpgbyd1ay] {
    padding: var(--space-1) var(--space-3);
    border: none;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: #fff;
    font-size: var(--text-sm);
    cursor: pointer;
}

.bulk-bar__confirm-btn:disabled[b-mkpgbyd1ay] {
    opacity: 0.4;
    cursor: default;
}

.bulk-bar__cancel-btn[b-mkpgbyd1ay] {
    padding: var(--space-1) var(--space-3);
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    cursor: pointer;
}

.bulk-bar__delete-btn[b-mkpgbyd1ay] {
    padding: var(--space-1) var(--space-3);
    border: none;
    border-radius: var(--radius-pill);
    background: var(--color-error);
    color: #fff;
    font-size: var(--text-sm);
    cursor: pointer;
}

.bulk-bar__empty-hint[b-mkpgbyd1ay] {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
}
/* /Components/Vault/ContentCard.razor.rz.scp.css */
/* Copyright (c) 2026 iBorkedIt. Licensed under the ISC License. */
/* SPDX-License-Identifier: ISC */

/* ── Base card ─────────────────────────────────────────────────────────── */

.content-card[b-tvbtl8s9gx] {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-card);
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow var(--duration-fast) var(--easing-standard), transform var(--duration-fast) var(--easing-standard);
    /* Enforce consistent aspect ratio in grid — detail view handles unconstrained height */
    aspect-ratio: var(--card-aspect-ratio, 4 / 5);
}

    .content-card:hover[b-tvbtl8s9gx],
    .content-card:focus-visible[b-tvbtl8s9gx] {
        box-shadow: var(--shadow-card-raised);
        transform: translateY(-2px);
        outline: none;
    }

    .content-card:focus-visible[b-tvbtl8s9gx] {
        outline: 2px solid var(--color-focus-ring);
        outline-offset: 2px;
    }

    /* ── Type accent stripe ────────────────────────────────────────────────── */

    .content-card[b-tvbtl8s9gx]::before {
        content: "";
        position: absolute;
        inset-block-start: 0;
        inset-inline: 0;
        block-size: 3px;
        background: var(--card-accent, var(--color-accent-default));
    }

.content-card--bookmark[b-tvbtl8s9gx] {
    --card-accent: var(--color-accent-bookmark);
}

.content-card--snippet[b-tvbtl8s9gx] {
    --card-accent: var(--color-accent-snippet);
}

.content-card--note[b-tvbtl8s9gx] {
    --card-accent: var(--color-accent-note);
}

.content-card--image[b-tvbtl8s9gx] {
    --card-accent: var(--color-accent-image);
}

/* ── Type badge ────────────────────────────────────────────────────────── */

.content-card__badge[b-tvbtl8s9gx] {
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-end: var(--space-2);
    z-index: 1;
}

.content-card__icon[b-tvbtl8s9gx] {
    font-size: var(--text-sm);
    line-height: 1;
    opacity: 0.75;
}

/* ── Body ──────────────────────────────────────────────────────────────── */

.content-card__body[b-tvbtl8s9gx] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Image face ────────────────────────────────────────────────────────── */

.content-card__image-area[b-tvbtl8s9gx] {
    flex: 0 0 100%;
    overflow: hidden;
    background: var(--color-surface-image-placeholder);
    display: flex;
    align-items: center;
    justify-content: center;
}

.content-card__thumbnail[b-tvbtl8s9gx] {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.content-card__image-placeholder[b-tvbtl8s9gx] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-2xl);
    opacity: 0.3;
}

/* ── Card header (title — fixed height, all card types) ────────────────── */

.content-card__header[b-tvbtl8s9gx] {
    flex: 0 0 auto;
    /* space-3 top + space-2 bottom + 1 line of text-sm × leading-snug (≈ 1.14rem) */
    height: 2.5rem;
    /* Extra inline-end padding clears the absolute-positioned type icon */
    padding: var(--space-3) 2rem var(--space-2) var(--space-3);
    overflow: hidden;
}

.content-card__title[b-tvbtl8s9gx] {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
    line-height: var(--leading-snug);
    white-space: nowrap;
    overflow: hidden;
    /* Fade overflow to the right instead of hard-clipping */
    mask-image: linear-gradient(to right, black 75%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 75%, transparent 100%);
}

/* ── Text area ─────────────────────────────────────────────────────────── */

.content-card__text-area[b-tvbtl8s9gx] {
    flex: 1 1 0;
    padding: var(--space-1) var(--space-3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.content-card__url[b-tvbtl8s9gx] {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.content-card__excerpt[b-tvbtl8s9gx] {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: var(--leading-normal);
}

/* Note cards: let the excerpt fill the text area and fade out gracefully */
.content-card--note .content-card__text-area[b-tvbtl8s9gx] {
    overflow: hidden;
}

.content-card--note .content-card__excerpt[b-tvbtl8s9gx] {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    flex: 1 1 0;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.content-card__footer[b-tvbtl8s9gx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--color-border-subtle);
    min-height: 0;
}

/* ── Tag chips ─────────────────────────────────────────────────────────── */

.content-card__tags[b-tvbtl8s9gx] {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-1);
    overflow: hidden;
    min-width: 0;
}

.content-card__tag[b-tvbtl8s9gx] {
    flex-shrink: 0;
    font-size: var(--text-2xs);
    font-weight: var(--weight-medium);
    padding: 1px var(--space-1-5);
    border-radius: var(--radius-pill);
    background: var(--color-tag-bg);
    color: var(--color-tag-text);
    white-space: nowrap;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.content-card__tag--overflow[b-tvbtl8s9gx] {
    background: var(--color-tag-overflow-bg);
    color: var(--color-tag-overflow-text);
}

.content-card__tag--private[b-tvbtl8s9gx] {
    background: var(--color-accent-glow);
    color: var(--color-accent);
}

.content-card__tag--confidential[b-tvbtl8s9gx] {
    background: var(--color-error-glow);
    color: var(--color-error);
}

/* ── Date ──────────────────────────────────────────────────────────────── */

.content-card__date[b-tvbtl8s9gx] {
    flex-shrink: 0;
    font-size: var(--text-2xs);
    color: var(--color-text-tertiary);
    font-variant-numeric: tabular-nums;
}

/* ── Selection overlay ─────────────────────────────────────────────────── */

.content-card--selection-mode[b-tvbtl8s9gx] {
    cursor: default;
}

.content-card--selected[b-tvbtl8s9gx] {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.content-card__select-indicator[b-tvbtl8s9gx] {
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-start: var(--space-2);
    z-index: 1;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 2px solid var(--color-border-subtle);
    background: var(--color-surface-card);
    display: flex;
    align-items: center;
    justify-content: center;
}

.content-card--selected .content-card__select-indicator[b-tvbtl8s9gx] {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.content-card__check[b-tvbtl8s9gx] {
    font-size: var(--text-base);
    color: #fff;
    line-height: 1;
}
/* /Components/Vault/ContentListRow.razor.rz.scp.css */
/* Copyright (c) 2026 iBorkedIt. Licensed under the ISC License. */
/* SPDX-License-Identifier: ISC */

.list-row[b-q0693mfxbc] {
    display: grid;
    grid-template-columns: var(--space-6) 1fr auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-card);
    border-bottom: 1px solid var(--color-border-subtle);
    cursor: pointer;
    transition: background var(--duration-fast) var(--easing-standard);
}

    .list-row:hover[b-q0693mfxbc],
    .list-row:focus-visible[b-q0693mfxbc] {
        background: var(--color-surface-hover);
        outline: none;
    }

    .list-row:focus-visible[b-q0693mfxbc] {
        outline: 2px solid var(--color-focus-ring);
        outline-offset: -2px;
    }

/* Left accent — matches card accent colours */
.list-row[b-q0693mfxbc] {
    border-inline-start: 3px solid transparent;
}

.list-row--bookmark[b-q0693mfxbc] {
    border-inline-start-color: var(--color-accent-bookmark);
}

.list-row--snippet[b-q0693mfxbc] {
    border-inline-start-color: var(--color-accent-snippet);
}

.list-row--note[b-q0693mfxbc] {
    border-inline-start-color: var(--color-accent-note);
}

.list-row--image[b-q0693mfxbc] {
    border-inline-start-color: var(--color-accent-image);
}

/* ── Icon ──────────────────────────────────────────────────────────────── */

.list-row__icon[b-q0693mfxbc] {
    font-size: var(--text-base);
    line-height: 1;
    text-align: center;
}

/* ── Content block ─────────────────────────────────────────────────────── */

.list-row__content[b-q0693mfxbc] {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
    overflow: hidden;
    min-width: 0;
}

.list-row__title[b-q0693mfxbc] {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-row__sub[b-q0693mfxbc] {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Tags ──────────────────────────────────────────────────────────────── */

.list-row__tags[b-q0693mfxbc] {
    display: flex;
    gap: var(--space-1);
    flex-shrink: 0;
}

.list-row__tag[b-q0693mfxbc] {
    font-size: var(--text-2xs);
    font-weight: var(--weight-medium);
    padding: 1px var(--space-1-5);
    border-radius: var(--radius-pill);
    background: var(--color-tag-bg);
    color: var(--color-tag-text);
    white-space: nowrap;
}

.list-row__tag--overflow[b-q0693mfxbc] {
    background: var(--color-tag-overflow-bg);
    color: var(--color-tag-overflow-text);
}

.list-row__tag--private[b-q0693mfxbc] {
    background: var(--color-accent-glow);
    color: var(--color-accent);
}

.list-row__tag--confidential[b-q0693mfxbc] {
    background: var(--color-error-glow);
    color: var(--color-error);
}

/* ── Date ──────────────────────────────────────────────────────────────── */

.list-row__date[b-q0693mfxbc] {
    flex-shrink: 0;
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    font-variant-numeric: tabular-nums;
    min-width: 4.5rem;
    text-align: end;
}

/* ── Responsive: hide tags column on narrow screens ───────────────────── */

@media (max-width: 480px) {
    .list-row[b-q0693mfxbc] {
        grid-template-columns: var(--space-6) 1fr auto;
    }

    .list-row__tags[b-q0693mfxbc] {
        display: none;
    }
}

/* ── Selection state ───────────────────────────────────────────────────── */

.list-row--selection-mode[b-q0693mfxbc] {
    cursor: default;
}

.list-row--selected[b-q0693mfxbc] {
    background: var(--color-accent-glow);
}

.list-row__select-indicator[b-q0693mfxbc] {
    width: var(--space-6);
    height: var(--space-6);
    border-radius: 50%;
    border: 2px solid var(--color-border-subtle);
    background: var(--color-surface-card);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.list-row--selected .list-row__select-indicator[b-q0693mfxbc] {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.list-row__check[b-q0693mfxbc] {
    font-size: var(--text-base);
    color: #fff;
    line-height: 1;
}
/* /Components/Vault/NoBackendWarning.razor.rz.scp.css */
/* SPDX-License-Identifier: ISC */
/* Copyright (c) 2026 iBorkedIt */

.no-backend-warning[b-1e4o5muxjd] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-error);
    animation: no-backend-pulse-b-1e4o5muxjd 2s ease-in-out infinite;
    /* Ensure the banner is always the first thing the user sees */
    position: sticky;
    top: 0;
    z-index: 10;
}

@keyframes no-backend-pulse-b-1e4o5muxjd {
    0%   { background-color: rgba(208, 64, 64, 0.10); }
    50%  { background-color: rgba(208, 64, 64, 0.26); }
    100% { background-color: rgba(208, 64, 64, 0.10); }
}

.no-backend-warning__icon[b-1e4o5muxjd] {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-error);
}

.no-backend-warning__text[b-1e4o5muxjd] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.no-backend-warning__heading[b-1e4o5muxjd] {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-error);
    line-height: 1.3;
}

.no-backend-warning__body[b-1e4o5muxjd] {
    font-size: var(--text-base);
    color: var(--color-text-secondary, var(--color-s2));
    line-height: 1.4;
}

.no-backend-warning__cta[b-1e4o5muxjd] {
    flex-shrink: 0;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-error);
    text-decoration: none;
    white-space: nowrap;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--color-error);
    border-radius: 0.25rem;
}

.no-backend-warning__cta:hover[b-1e4o5muxjd] {
    background-color: rgba(208, 64, 64, 0.12);
}

@media (max-width: 639px) {
    .no-backend-warning[b-1e4o5muxjd] {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .no-backend-warning__cta[b-1e4o5muxjd] {
        width: 100%;
        text-align: center;
    }
}
/* /Components/Vault/PassphraseField.razor.rz.scp.css */
/*
 * PassphraseField.razor.css
 * mnemosia.Web/Components/Vault/PassphraseField.razor.css
 *
 * Scoped to PassphraseField via Blazor CSS isolation.
 * All values reference tokens from tokens.css via CSS custom properties.
 * No hard-coded colours — all theme switching is handled by tokens.css.
 */

/* ================================================================
   FIELD WRAPPER
================================================================ */

.passphrase-field[b-537td6trnk] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ================================================================
   LABEL
================================================================ */

.passphrase-field__label[b-537td6trnk] {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-2);
    transition: color var(--transition-base);
    user-select: none;
}

.passphrase-field__label--error[b-537td6trnk] {
    color: var(--color-error);
}

/* ================================================================
   INPUT WRAPPER — flex container; carries the visual border so
   the input's scroll area is naturally clipped by the toggle edge
================================================================ */

.passphrase-field__input-wrap[b-537td6trnk] {
    display: flex;
    align-items: center;
    background: var(--color-s0);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: inset 0 2px 8px var(--color-shadow);
    overflow: hidden;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

    /* Focused — accent ring via :focus-within so no JS class needed */
    .passphrase-field__input-wrap:focus-within[b-537td6trnk] {
        border-color: var(--color-accent);
        box-shadow: 0 0 0 3px var(--color-accent-glow), inset 0 2px 8px var(--color-shadow);
    }

    /* Error state */
    .passphrase-field__input-wrap--error[b-537td6trnk] {
        border-color: var(--color-error);
        box-shadow: 0 0 0 3px var(--color-error-glow), inset 0 2px 8px var(--color-shadow);
    }

    /* Error overrides focus */
    .passphrase-field__input-wrap--error:focus-within[b-537td6trnk] {
        border-color: var(--color-error);
        box-shadow: 0 0 0 3px var(--color-error-glow), inset 0 2px 8px var(--color-shadow);
    }

/* ================================================================
   INPUT — transparent flex child; scrolls within its own lane
================================================================ */

.passphrase-field__input[b-537td6trnk] {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text);
    /* Slight tracking when masked to make dots feel intentional */
    letter-spacing: 0.06em;
}

    /* Remove tracking when revealed — normal text reads better without it */
    .passphrase-field__input[type="text"][b-537td6trnk] {
        letter-spacing: 0;
    }

    .passphrase-field__input[b-537td6trnk]::placeholder {
        color: var(--color-text-2);
        opacity: 0.6;
    }

/* ================================================================
   SHOW / HIDE TOGGLE
================================================================ */

.passphrase-field__toggle[b-537td6trnk] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    color: var(--color-text-2);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast);
    user-select: none;
}

.passphrase-field__toggle svg[b-537td6trnk] {
    width: 1.125rem;
    height: 1.125rem;
    display: block;
    flex-shrink: 0;
}

    .passphrase-field__toggle:hover[b-537td6trnk] {
        color: var(--color-accent);
    }

    .passphrase-field__toggle:focus-visible[b-537td6trnk] {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }

/* ================================================================
   ERROR MESSAGE
================================================================ */

.passphrase-field__error[b-537td6trnk] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-error);
    /* Soft entrance — error appears without jarring the layout */
    animation: fadeIn 0.15s ease both;
}

    .passphrase-field__error span[aria-hidden][b-537td6trnk] {
        font-size: var(--text-base);
        flex-shrink: 0;
    }
/* /Components/Vault/PendingWritesWarning.razor.rz.scp.css */
/* SPDX-License-Identifier: ISC */
/* Copyright (c) 2026 iBorkedIt */

.pending-writes-warning[b-6qjt1fieei] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-accent);
    background-color: rgba(232, 130, 12, 0.08);
}

.pending-writes-warning__icon[b-6qjt1fieei] {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-accent);
}

.pending-writes-warning__text[b-6qjt1fieei] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.pending-writes-warning__heading[b-6qjt1fieei] {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-accent);
    line-height: 1.3;
}

.pending-writes-warning__body[b-6qjt1fieei] {
    font-size: var(--text-base);
    color: var(--color-text-secondary, var(--color-s2));
    line-height: 1.4;
}

.pending-writes-warning__cta[b-6qjt1fieei] {
    flex-shrink: 0;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
    white-space: nowrap;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--color-accent);
    border-radius: 0.25rem;
}

.pending-writes-warning__cta:hover[b-6qjt1fieei] {
    background-color: rgba(232, 130, 12, 0.12);
}

@media (max-width: 639px) {
    .pending-writes-warning[b-6qjt1fieei] {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .pending-writes-warning__cta[b-6qjt1fieei] {
        width: 100%;
        text-align: center;
    }
}
/* /Components/Vault/StrengthMeter.razor.rz.scp.css */
/*
 * StrengthMeter.razor.css
 * mnemosia.Web/Components/Vault/StrengthMeter.razor.css
 *
 * Scoped to StrengthMeter via Blazor CSS isolation.
 * Segment colours are defined here as explicit values rather than
 * CSS custom properties — they represent a fixed semantic scale
 * (weak → strong) that does not change between light and dark modes.
 */

/* ================================================================
   CONTAINER
================================================================ */

.strength-meter[b-dbzj0l9ew9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ================================================================
   SEGMENTED BAR
================================================================ */

.strength-meter__bar[b-dbzj0l9ew9] {
    display: flex;
    gap: 0.3rem;
}

.strength-meter__segment[b-dbzj0l9ew9] {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    transition: background-color var(--transition-slow);
}

/* Empty — unfilled segment */
.strength-meter__segment--empty[b-dbzj0l9ew9] {
    background-color: var(--color-s2);
    border: 1px solid var(--color-border);
}

/* Score 1 — weak */
.strength-meter__segment--weak[b-dbzj0l9ew9] {
    background-color: #D04040;
    border: 1px solid transparent;
}

/* Score 2 — fair */
.strength-meter__segment--fair[b-dbzj0l9ew9] {
    background-color: #C8880C;
    border: 1px solid transparent;
}

/* Score 3 — good */
.strength-meter__segment--good[b-dbzj0l9ew9] {
    background-color: var(--color-ok);
    border: 1px solid transparent;
}

/* Score 4 — strong */
.strength-meter__segment--strong[b-dbzj0l9ew9] {
    background-color: var(--color-ok);
    border: 1px solid transparent;
}

/* ================================================================
   FOOTER — score label + feedback message
================================================================ */

.strength-meter__footer[b-dbzj0l9ew9] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-3);
    font-size: var(--text-base);
    font-weight: 500;
}

/* Score label — left aligned, bold */
.strength-meter__score[b-dbzj0l9ew9] {
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: var(--text-base);
    white-space: nowrap;
    transition: color var(--transition-base);
}

/* Feedback message — right aligned, normal weight */
.strength-meter__feedback[b-dbzj0l9ew9] {
    text-align: right;
    transition: color var(--transition-base);
    /* Allow wrapping on very small viewports */
    min-width: 0;
}

/* ================================================================
   SCORE COLOUR MODIFIERS
   Applied to both .strength-meter__score and .strength-meter__feedback
================================================================ */

.strength-meter__text--weak[b-dbzj0l9ew9] {
    color: #D04040;
}

.strength-meter__text--fair[b-dbzj0l9ew9] {
    color: #C8880C;
}

.strength-meter__text--good[b-dbzj0l9ew9] {
    color: var(--color-ok);
}

.strength-meter__text--strong[b-dbzj0l9ew9] {
    color: var(--color-ok);
}
/* /Components/Vault/VaultUnlock.razor.rz.scp.css */
/*
 * VaultUnlock.razor.css
 * mnemosia.Web/Components/Vault/VaultUnlock.razor.css
 *
 * Scoped to VaultUnlock via Blazor CSS isolation.
 * All colour values reference tokens from tokens.css.
 * Animations are defined in tokens.css and referenced by class name.
 */

/* ================================================================
   PAGE WRAPPER
================================================================ */

.vault-unlock[b-3o334xgjbs] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    position: relative;
    overflow: hidden;
    background-color: var(--color-base);
    transition: background-color var(--transition-theme);
}

/* ================================================================
   DECORATIVE BACKGROUND
================================================================ */

.vault-unlock__bg[b-3o334xgjbs] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 30% 20%, rgba(14, 25, 50, 0.8) 0%, transparent 60%), radial-gradient(circle at 70% 80%, rgba(20, 30, 60, 0.5) 0%, transparent 50%);
    transition: opacity var(--transition-theme);
}

[data-theme="light"] .vault-unlock__bg[b-3o334xgjbs] {
    background: radial-gradient(circle at 30% 20%, rgba(200, 215, 250, 0.6) 0%, transparent 60%), radial-gradient(circle at 70% 80%, rgba(180, 200, 240, 0.4) 0%, transparent 50%);
}

/* ================================================================
   PRE-MOUNT — hidden before entrance animation fires
================================================================ */

.vault-unlock__pre-mount[b-3o334xgjbs] {
    opacity: 0;
}

/* ================================================================
   WORDMARK — top left
================================================================ */

.vault-unlock__wordmark[b-3o334xgjbs] {
    position: absolute;
    top: var(--space-6);
    left: var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.vault-unlock__logo-badge[b-3o334xgjbs] {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 700;
    color: #060a10;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 8px rgba(232, 130, 12, 0.35);
}

[data-theme="light"] .vault-unlock__logo-badge[b-3o334xgjbs] {
    color: #ffffff;
}

.vault-unlock__logo-text[b-3o334xgjbs] {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--color-text-2);
}

/* ================================================================
   MAIN CARD
================================================================ */

.vault-unlock__card[b-3o334xgjbs] {
    width: 100%;
    max-width: 420px;
    background: var(--color-s1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-10) var(--space-8) var(--space-8);
    box-shadow: inset 0 1px 0 var(--color-highlight), 0 24px 64px rgba(0, 0, 0, 0.65), 0 4px 16px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    position: relative;
    transition: background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

[data-theme="light"] .vault-unlock__card[b-3o334xgjbs] {
    box-shadow: inset 0 1px 0 var(--color-highlight), 0 8px 40px rgba(10, 20, 60, 0.12), 0 2px 8px rgba(10, 20, 60, 0.06);
}

/* ================================================================
   ACCENT STRIPE — left edge
================================================================ */

.vault-unlock__stripe[b-3o334xgjbs] {
    position: absolute;
    top: var(--space-6);
    left: 0;
    bottom: var(--space-6);
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(180deg, var(--color-accent), var(--color-rust));
    opacity: 0.85;
}

/* ================================================================
   HEADER
================================================================ */

.vault-unlock__header[b-3o334xgjbs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

/* Glyph container */
.vault-unlock__glyph-wrap[b-3o334xgjbs] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vault-unlock__glyph[b-3o334xgjbs] {
    width: 52px;
    height: 52px;
    position: relative;
    z-index: var(--z-raised);
}

/* Pulsing ambient ring around glyph */
.vault-unlock__pulse-ring[b-3o334xgjbs] {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid var(--color-accent-glow);
    animation: pulseRing 3s ease-in-out infinite;
}

/* Title block */
.vault-unlock__titles[b-3o334xgjbs] {
    text-align: center;
}

.vault-unlock__title[b-3o334xgjbs] {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.vault-unlock__subtitle[b-3o334xgjbs] {
    font-size: var(--text-base);
    color: var(--color-text-2);
    margin-top: var(--space-2);
    line-height: 1.5;
}

/* ================================================================
   FIELDS
================================================================ */

.vault-unlock__fields[b-3o334xgjbs] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.vault-unlock__hint[b-3o334xgjbs] {
    font-size: var(--text-base);
    color: var(--color-text-2);
    line-height: 1.5;
    margin-top: calc(var(--space-2) * -1);
    text-align: center;
}

/* ================================================================
   STORAGE WARNING NOTICE
================================================================ */

.vault-unlock__notice[b-3o334xgjbs] {
    background: var(--color-accent-glow);
    border: 1px solid rgba(232, 130, 12, 0.30);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
    color: var(--color-accent);
    line-height: 1.55;
}

/* ================================================================
   ACTIONS
================================================================ */

.vault-unlock__actions[b-3o334xgjbs] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

/* Primary submit button */
.vault-unlock__submit[b-3o334xgjbs] {
    width: 100%;
    background: var(--color-s2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-2);
    cursor: not-allowed;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    transition: all var(--transition-base);
    min-height: 44px; /* touch target */
}

.vault-unlock__submit--active[b-3o334xgjbs] {
    background: var(--color-accent);
    border-color: transparent;
    color: #060a10;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 14px rgba(232, 130, 12, 0.35);
}

[data-theme="light"] .vault-unlock__submit--active[b-3o334xgjbs] {
    color: #ffffff;
}

.vault-unlock__submit--active:hover[b-3o334xgjbs] {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 6px 20px rgba(232, 130, 12, 0.45);
}

.vault-unlock__submit:disabled[b-3o334xgjbs] {
    opacity: 0.7;
}

/* Spinner inside submit button */
.vault-unlock__spinner[b-3o334xgjbs] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: #060a10;
    border-radius: 50%;
    flex-shrink: 0;
}

[data-theme="light"] .vault-unlock__spinner[b-3o334xgjbs] {
    border-top-color: #ffffff;
}

/* WebAuthn divider */
.vault-unlock__divider[b-3o334xgjbs] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.vault-unlock__divider-line[b-3o334xgjbs] {
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.vault-unlock__divider-label[b-3o334xgjbs] {
    font-size: var(--text-base);
    color: var(--color-text-2);
    white-space: nowrap;
}

/* WebAuthn button */
.vault-unlock__webauthn[b-3o334xgjbs] {
    width: 100%;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-text-2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    transition: all var(--transition-base);
    min-height: 44px;
}

    .vault-unlock__webauthn:hover:not(:disabled)[b-3o334xgjbs] {
        border-color: var(--color-accent-glow);
        color: var(--color-accent);
    }

    .vault-unlock__webauthn:disabled[b-3o334xgjbs] {
        opacity: 0.45;
        cursor: not-allowed;
    }

/* ================================================================
   MODE SWITCH FOOTER
================================================================ */

.vault-unlock__mode-switch[b-3o334xgjbs] {
    text-align: center;
    font-size: var(--text-base);
    color: var(--color-text-2);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-5);
    margin-top: calc(var(--space-2) * -1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.vault-unlock__mode-link[b-3o334xgjbs] {
    color: var(--color-accent);
    font-weight: 600;
    font-size: var(--text-base);
    font-family: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    padding: 0;
    transition: color var(--transition-fast);
}

    .vault-unlock__mode-link:hover[b-3o334xgjbs] {
        color: var(--color-accent-dim);
    }

/* ================================================================
   LEGAL FOOTER
================================================================ */

.vault-unlock__footer[b-3o334xgjbs] {
    margin-top: var(--space-8);
    font-size: var(--text-base);
    color: var(--color-text-2);
    text-align: center;
    line-height: 1.6;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    opacity: 0.7;
}

/* ================================================================
   IMPORT PANEL
================================================================ */

.vault-unlock__import-link-row[b-3o334xgjbs] {
    text-align: center;
    font-size: var(--text-base);
    margin-top: var(--space-3);
}

.vault-unlock__import-success[b-3o334xgjbs] {
    background: var(--color-accent-glow);
    border: 1px solid rgba(232, 130, 12, 0.30);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
    color: var(--color-accent);
    line-height: 1.55;
}

.vault-unlock__import-file-label[b-3o334xgjbs] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--text-base);
    color: var(--color-text-2);
}

.vault-unlock__import-file-input[b-3o334xgjbs] {
    font-size: var(--text-base);
    color: var(--color-text);
    cursor: pointer;
}

/* ================================================================
   CREDENTIAL ENTRY WIZARD
================================================================ */

.vault-unlock__cred-backend-info[b-3o334xgjbs] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    background: var(--color-s2);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
}

.vault-unlock__cred-backend-label[b-3o334xgjbs] {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-primary);
}

.vault-unlock__cred-backend-type[b-3o334xgjbs] {
    font-size: var(--text-base);
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.vault-unlock__cred-backend-endpoint[b-3o334xgjbs] {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    word-break: break-all;
}

.vault-unlock__cred-field[b-3o334xgjbs] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.vault-unlock__cred-field-label[b-3o334xgjbs] {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
}

.vault-unlock__cred-input[b-3o334xgjbs] {
    width: 100%;
    background: var(--color-s0);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text);
    outline: none;
    box-shadow: inset 0 2px 8px var(--color-shadow);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
    box-sizing: border-box;
}

.vault-unlock__cred-input:focus[b-3o334xgjbs] {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-glow), inset 0 2px 8px var(--color-shadow);
}

/* ================================================================
   RESPONSIVE — narrow viewports
================================================================ */

@media (max-width: 480px) {
    .vault-unlock__card[b-3o334xgjbs] {
        padding: var(--space-8) var(--space-6) var(--space-6);
        border-radius: var(--radius-lg);
    }

    .vault-unlock__wordmark[b-3o334xgjbs] {
        top: var(--space-4);
        left: var(--space-4);
    }
}
/* /Layout/VaultLayout.razor.rz.scp.css */
/* SPDX-License-Identifier: ISC */
/* Copyright (c) 2026 iBorkedIt */

/* ── App shell ──────────────────────────────────────────────────────────── */

.vault-shell[b-zjruw6v3qd] {
    min-height: 100svh;
    background: var(--color-surface-base);
    --vault-header-h: 3.5rem;   /* 56px — consumed by page sticky headers */
}

/* ── Top header — always visible ────────────────────────────────────────── */

.vault-header[b-zjruw6v3qd] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header);
    height: var(--vault-header-h);
    padding: 0 var(--space-4);
    background: var(--color-surface-header);
    border-bottom: 1px solid var(--color-border-subtle);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ── Wordmark ────────────────────────────────────────────────────────────── */

.vault-header__brand[b-zjruw6v3qd] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.vault-header__logo-badge[b-zjruw6v3qd] {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: #060a10;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25),
                0 2px 8px rgba(232,130,12,0.35);
    flex-shrink: 0;
}

[data-theme="light"] .vault-header__logo-badge[b-zjruw6v3qd] {
    color: #ffffff;
}

.vault-header__logo-text[b-zjruw6v3qd] {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--color-text-primary);
    /* Hidden on narrow screens; shown on desktop */
    display: none;
}

/* ── Nav links ───────────────────────────────────────────────────────────── */

.vault-header__nav[b-zjruw6v3qd] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding-left: var(--space-3);
    border-left: 1px solid var(--color-border-subtle);
}

.vault-header__nav[b-zjruw6v3qd]  .vault-header__nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    /* Mobile: icon-only — compact square */
    padding: var(--space-2);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
}

.vault-header__nav[b-zjruw6v3qd]  .vault-header__nav-link:hover {
    background: var(--color-surface-hover);
    color: var(--color-text-primary);
}

.vault-header__nav[b-zjruw6v3qd]  .vault-header__nav-link:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: -2px;
}

.vault-header__nav[b-zjruw6v3qd]  .vault-header__nav-link--active {
    background: var(--color-accent-glow);
    color: var(--color-accent);
}

.vault-header__nav-icon[b-zjruw6v3qd] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Nav labels hidden on mobile, shown on desktop */
.vault-header__nav-label[b-zjruw6v3qd] {
    display: none;
}

/* ── Header action cluster (export warning + lock) ───────────────────────── */

.vault-header__actions[b-zjruw6v3qd] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
    flex-shrink: 0;
}

/* ── Export staleness indicator ──────────────────────────────────────────── */

.vault-header__export-warning[b-zjruw6v3qd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm);
    background: var(--color-accent-glow);
    color: var(--color-accent);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--duration-fast) var(--easing-standard);
}

.vault-header__export-warning:hover[b-zjruw6v3qd] {
    background: color-mix(in srgb, var(--color-accent-glow) 60%, var(--color-accent) 40%);
}

.vault-header__export-warning:focus-visible[b-zjruw6v3qd] {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 1px;
}

/* ── Lock button ─────────────────────────────────────────────────────────── */

.vault-header__lock-btn[b-zjruw6v3qd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--duration-fast) var(--easing-standard),
                border-color var(--duration-fast) var(--easing-standard),
                color var(--duration-fast) var(--easing-standard);
}

.vault-header__lock-btn:hover[b-zjruw6v3qd] {
    background: var(--color-error-glow);
    border-color: var(--color-error);
    color: var(--color-error);
}

.vault-header__lock-btn:focus-visible[b-zjruw6v3qd] {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 1px;
}

/* ── Main content area ───────────────────────────────────────────────────── */

.vault-main[b-zjruw6v3qd] {
    padding-top: var(--vault-header-h);
}

/* ── FAB ─────────────────────────────────────────────────────────────────── */

.vault-fab[b-zjruw6v3qd] {
    position: fixed;
    bottom: var(--space-5);
    right: var(--space-4);
    z-index: var(--z-raised);
    width: 56px;
    height: 56px;
    border-radius: var(--radius-pill);
    border: none;
    background: var(--color-accent);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px var(--color-accent-glow);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.vault-fab svg[b-zjruw6v3qd] {
    width: 24px;
    height: 24px;
}

.vault-fab:hover[b-zjruw6v3qd] {
    transform: scale(1.06);
    box-shadow: 0 6px 24px var(--color-accent-glow);
}

.vault-fab:active[b-zjruw6v3qd] {
    transform: scale(0.96);
}

.vault-fab:focus-visible[b-zjruw6v3qd] {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* ── Mobile bottom tab bar — always hidden ───────────────────────────────── */

.vault-nav[b-zjruw6v3qd] {
    display: none;
}

/* ── Desktop (≥ 640px): show wordmark text + nav labels ─────────────────── */

@media (min-width: 640px) {

    .vault-header[b-zjruw6v3qd] {
        gap: var(--space-4);
        padding: 0 var(--space-5);
    }

    .vault-header__logo-text[b-zjruw6v3qd] {
        display: block;
    }

    .vault-header__nav[b-zjruw6v3qd]  .vault-header__nav-link {
        padding: var(--space-1-5) var(--space-3);
    }

    .vault-header__nav-label[b-zjruw6v3qd] {
        display: block;
    }

}
/* /Pages/OAuthCallback.razor.rz.scp.css */
/* SPDX-License-Identifier: ISC
   Copyright (c) 2026 iBorkedIt */

.oauth-callback__message[b-46kcxy29d6] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    font-family: system-ui, sans-serif;
    color: var(--color-text-dim, #888);
    font-size: var(--text-base);
}
/* /Pages/SettingsView.razor.rz.scp.css */
/* SPDX-License-Identifier: ISC */
/* Copyright (c) 2026 iBorkedIt */

.settings-view[b-jqgyquipji] {
    display: flex;
    flex-direction: column;
}

.settings-view__header[b-jqgyquipji] {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-header);
    border-bottom: 1px solid var(--color-border-subtle);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.settings-view__heading[b-jqgyquipji] {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}

.settings-view__content[b-jqgyquipji] {
    flex: 1;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* ── Desktop: full-width header ─────────────────────────────────────────── */

@media (min-width: 640px) {

    .settings-view__header[b-jqgyquipji] {
        min-height: var(--vault-header-h, 3.5rem);
    }
}

.settings-view__section[b-jqgyquipji] {
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-card);
    padding: var(--space-4);
}

.settings-view__section-heading[b-jqgyquipji] {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.settings-view__placeholder[b-jqgyquipji] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* ── Change passphrase form ─────────────────────────────────────────────── */

.settings-view__form[b-jqgyquipji] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 28rem;
}

.settings-view__form-error[b-jqgyquipji] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-error);
}

.settings-view__submit-btn[b-jqgyquipji] {
    align-self: flex-start;
    padding: var(--space-2) var(--space-4);
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.settings-view__submit-btn:hover[b-jqgyquipji] {
    opacity: 0.88;
}

.settings-view__submit-btn:active[b-jqgyquipji] {
    opacity: 0.76;
}

/* ── Working / success states ───────────────────────────────────────────── */

.settings-view__working[b-jqgyquipji] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.settings-view__success[b-jqgyquipji] {
    margin: 0 0 var(--space-3) 0;
    font-size: var(--text-sm);
    color: var(--color-text-primary);
}

.settings-view__secondary-btn[b-jqgyquipji] {
    padding: var(--space-2) var(--space-3);
    background: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.settings-view__secondary-btn:hover[b-jqgyquipji] {
    background: var(--color-accent-glow);
}
/* /Pages/TagsView.razor.rz.scp.css */
/* SPDX-License-Identifier: ISC */
/* Copyright (c) 2026 iBorkedIt */

.tags-view[b-xemu6tjlm9] {
    display: flex;
    flex-direction: column;
}

.tags-view__header[b-xemu6tjlm9] {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-header);
    border-bottom: 1px solid var(--color-border-subtle);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.tags-view__heading[b-xemu6tjlm9] {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}

.tags-view__content[b-xemu6tjlm9] {
    flex: 1;
    padding: var(--space-4);
}

/* ── Desktop: full-width header ─────────────────────────────────────────── */

@media (min-width: 640px) {

    .tags-view__header[b-xemu6tjlm9] {
        min-height: var(--vault-header-h, 3.5rem);
    }
}

.tags-view__empty[b-xemu6tjlm9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-16) var(--space-4);
    text-align: center;
}

.tags-view__empty-icon[b-xemu6tjlm9] {
    font-size: 3rem;
    line-height: 1;
    opacity: 0.4;
}

.tags-view__empty-heading[b-xemu6tjlm9] {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
}

.tags-view__empty-sub[b-xemu6tjlm9] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
    max-width: 30ch;
}

/* ── Header button ───────────────────────────────────────────────────────── */

.tags-view__add-btn[b-xemu6tjlm9] {
    margin-left: auto;
    padding: var(--space-1) var(--space-3);
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
}

.tags-view__add-btn:disabled[b-xemu6tjlm9] { opacity: 0.5; cursor: not-allowed; }

/* ── Add form ────────────────────────────────────────────────────────────── */

.tags-view__add-form[b-xemu6tjlm9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-s1);
}

/* ── Shared inputs ───────────────────────────────────────────────────────── */

.tags-view__name-input[b-xemu6tjlm9] {
    flex: 1 1 12rem;
    min-width: 0;
    padding: var(--space-1) var(--space-2);
    background: var(--color-s0);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
}

.tags-view__name-input:focus[b-xemu6tjlm9] {
    outline: 2px solid var(--color-accent);
    outline-offset: -1px;
}

.tags-view__sensitivity-select[b-xemu6tjlm9] {
    padding: var(--space-1) var(--space-2);
    background: var(--color-s0);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    cursor: pointer;
}

/* ── Form buttons ────────────────────────────────────────────────────────── */

.tags-view__confirm-btn[b-xemu6tjlm9] {
    padding: var(--space-1) var(--space-3);
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
}

.tags-view__confirm-btn:disabled[b-xemu6tjlm9] { opacity: 0.5; cursor: not-allowed; }

.tags-view__cancel-btn[b-xemu6tjlm9] {
    padding: var(--space-1) var(--space-3);
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    cursor: pointer;
}

.tags-view__cancel-btn:disabled[b-xemu6tjlm9] { opacity: 0.5; cursor: not-allowed; }

.tags-view__form-error[b-xemu6tjlm9],
.tags-view__page-error[b-xemu6tjlm9] {
    width: 100%;
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-error);
}

/* ── Tag list ────────────────────────────────────────────────────────────── */

.tags-view__list[b-xemu6tjlm9] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tags-view__item[b-xemu6tjlm9] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
}

.tags-view__item:last-child[b-xemu6tjlm9] { border-bottom: none; }

/* ── Sensitivity badge ───────────────────────────────────────────────────── */

.tags-view__badge[b-xemu6tjlm9] {
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

.tags-view__badge--public[b-xemu6tjlm9]       { background: var(--color-text-tertiary); }
.tags-view__badge--private[b-xemu6tjlm9]      { background: var(--color-accent); }
.tags-view__badge--confidential[b-xemu6tjlm9] { background: var(--color-error); }

/* ── Tag name / inline edit ──────────────────────────────────────────────── */

.tags-view__name[b-xemu6tjlm9] {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tags-view__name-input--inline[b-xemu6tjlm9] {
    flex: 1 1 10rem;
}

.tags-view__edit-error[b-xemu6tjlm9] {
    font-size: var(--text-xs);
    color: var(--color-error);
}

/* ── Per-row sensitivity select ──────────────────────────────────────────── */

.tags-view__sensitivity-select--inline[b-xemu6tjlm9] {
    font-size: var(--text-xs);
}

/* ── Row action buttons ──────────────────────────────────────────────────── */

.tags-view__action-btn[b-xemu6tjlm9] {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    cursor: pointer;
    line-height: 1;
}

.tags-view__action-btn:hover[b-xemu6tjlm9] { color: var(--color-text-primary); border-color: var(--color-border-strong); }
.tags-view__action-btn:disabled[b-xemu6tjlm9] { opacity: 0.4; cursor: not-allowed; }

.tags-view__action-btn--danger:hover[b-xemu6tjlm9] { color: var(--color-error); border-color: var(--color-error); }
/* /Pages/VaultView.razor.rz.scp.css */
/* Copyright (c) 2026 iBorkedIt. Licensed under the ISC License. */
/* SPDX-License-Identifier: ISC */

/* ── Page shell ────────────────────────────────────────────────────────── */

.vault-view[b-p0h7b1xh6j] {
    display: flex;
    flex-direction: column;
    /* min-height and background are owned by VaultLayout's vault-shell */
}

/* ── Header ────────────────────────────────────────────────────────────── */

.vault-view__header[b-p0h7b1xh6j] {
    position: sticky;
    top: var(--vault-header-h, 3.5rem);
    z-index: var(--z-header);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-header);
    border-bottom: 1px solid var(--color-border-subtle);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.vault-view__heading[b-p0h7b1xh6j] {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}

.vault-view__controls[b-p0h7b1xh6j] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

/* ── Item count badge ──────────────────────────────────────────────────── */

.vault-view__count[b-p0h7b1xh6j] {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-text-tertiary);
    font-variant-numeric: tabular-nums;
}

/* ── View toggle ───────────────────────────────────────────────────────── */

.vault-view__view-toggle[b-p0h7b1xh6j] {
    display: flex;
    gap: 2px;
    padding: 2px;
    background: var(--color-surface-toggle-track);
    border-radius: var(--radius-sm);
}

.vault-view__toggle-btn[b-p0h7b1xh6j] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-8);
    height: var(--space-8);
    border: none;
    border-radius: calc(var(--radius-sm) - 2px);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard);
}

    .vault-view__toggle-btn:hover[b-p0h7b1xh6j] {
        color: var(--color-text-primary);
    }

    .vault-view__toggle-btn.is-active[b-p0h7b1xh6j] {
        background: var(--color-surface-toggle-active);
        color: var(--color-text-primary);
        box-shadow: var(--shadow-toggle-active);
    }

    .vault-view__toggle-btn:focus-visible[b-p0h7b1xh6j] {
        outline: 2px solid var(--color-focus-ring);
        outline-offset: 1px;
    }

/* ── Tag filter bar ─────────────────────────────────────────────────────── */

.vault-filter-bar[b-p0h7b1xh6j] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-s1);
}

.vault-filter-bar__mode[b-p0h7b1xh6j] {
    display: flex;
    gap: 2px;
    padding: 2px;
    background: var(--color-surface-toggle-track);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.vault-filter-bar__mode-btn[b-p0h7b1xh6j] {
    padding: 0 var(--space-2);
    height: var(--space-6);
    border: none;
    border-radius: calc(var(--radius-sm) - 2px);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
    white-space: nowrap;
}

.vault-filter-bar__mode-btn.is-active[b-p0h7b1xh6j] {
    background: var(--color-surface-toggle-active);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-toggle-active);
}

/* ── Typeahead field ────────────────────────────────────────────────────── */

.vault-filter-bar__typeahead[b-p0h7b1xh6j] {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1-5);
    flex: 1;
    min-width: 0;
    padding: 2px var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-s0);
}

.vault-filter-bar__typeahead:focus-within[b-p0h7b1xh6j] {
    border-color: var(--color-accent);
}

.vault-filter-bar__input[b-p0h7b1xh6j] {
    flex: 1;
    min-width: 5rem;
    border: none;
    background: transparent;
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    line-height: var(--space-6);
    outline: none;
    padding: 0;
}

.vault-filter-bar__input[b-p0h7b1xh6j]::placeholder {
    color: var(--color-text-tertiary);
}

/* ── Suggestions dropdown ───────────────────────────────────────────────── */

.vault-filter-bar__suggestions[b-p0h7b1xh6j] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--color-s1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    max-height: 12rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.vault-filter-bar__suggestion[b-p0h7b1xh6j] {
    padding: var(--space-2) var(--space-3);
    border: none;
    background: transparent;
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background var(--duration-fast);
}

.vault-filter-bar__suggestion:hover[b-p0h7b1xh6j],
.vault-filter-bar__suggestion:focus-visible[b-p0h7b1xh6j] {
    background: var(--color-surface-hover);
    outline: none;
}

.vault-filter-chip[b-p0h7b1xh6j] {
    padding: 1px var(--space-2);
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}

.vault-filter-chip:hover[b-p0h7b1xh6j] { color: var(--color-text-primary); border-color: var(--color-border-strong); }

.vault-filter-chip__remove[b-p0h7b1xh6j] {
    margin-left: 3px;
    opacity: 0.65;
}

.vault-filter-chip.is-active[b-p0h7b1xh6j] {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

.vault-filter-chip--private.is-active[b-p0h7b1xh6j] {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.vault-filter-chip--confidential.is-active[b-p0h7b1xh6j] {
    background: var(--color-error);
    border-color: var(--color-error);
}

.vault-filter-bar__clear[b-p0h7b1xh6j] {
    flex-shrink: 0;
    padding: 1px var(--space-2);
    border: none;
    background: transparent;
    color: var(--color-text-tertiary);
    font-size: var(--text-xs);
    cursor: pointer;
    text-decoration: underline;
}

.vault-filter-bar__clear:hover[b-p0h7b1xh6j] { color: var(--color-text-secondary); }

/* ── Content area ──────────────────────────────────────────────────────── */

.vault-view__content[b-p0h7b1xh6j] {
    flex: 1;
    padding: var(--space-4);
}

/* ── Loading state ─────────────────────────────────────────────────────── */

.vault-view__loading[b-p0h7b1xh6j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-12) var(--space-4);
    color: var(--color-text-tertiary);
    font-size: var(--text-sm);
}

@keyframes spin-b-p0h7b1xh6j {
    to {
        transform: rotate(360deg);
    }
}

.vault-view__spinner[b-p0h7b1xh6j] {
    display: block;
    width: 24px;
    height: 24px;
    border: 2px solid var(--color-border-subtle);
    border-top-color: var(--color-accent-default);
    border-radius: 50%;
    animation: spin-b-p0h7b1xh6j 0.7s linear infinite;
}

/* ── Error state ───────────────────────────────────────────────────────── */

.vault-view__error[b-p0h7b1xh6j] {
    padding: var(--space-6) var(--space-4);
    color: var(--color-text-error);
    font-size: var(--text-sm);
    text-align: center;
}

/* ── Empty state ───────────────────────────────────────────────────────── */

.vault-view__empty[b-p0h7b1xh6j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-16) var(--space-4);
    text-align: center;
}

.vault-view__empty-icon[b-p0h7b1xh6j] {
    font-size: 3rem;
    line-height: 1;
    opacity: 0.4;
}

.vault-view__empty-heading[b-p0h7b1xh6j] {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
}

.vault-view__empty-sub[b-p0h7b1xh6j] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
    max-width: 28ch;
}

/* ── Grid layout ───────────────────────────────────────────────────────── */

/*
 * Adaptive column count:
 *   ≥ 1024px (desktop/large tablet): 4 columns
 *     768–1023px (tablet):           3 columns
 *     480–767px (small tablet):      2 columns
 *   < 480px (phone):                 2 columns (min card width enforced)
 *
 * auto-fill with minmax keeps the column count honest without
 * requiring JS. The min value is the controlling factor.
 */

.vault-grid[b-p0h7b1xh6j] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
    gap: var(--space-3);
}

@media (min-width: 480px) {
    .vault-grid[b-p0h7b1xh6j] {
        /* Allow 3 columns above 480px by relaxing the minimum */
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
    }
}

@media (min-width: 768px) {
    .vault-grid[b-p0h7b1xh6j] {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
        gap: var(--space-4);
    }
}

@media (min-width: 1024px) {
    .vault-grid[b-p0h7b1xh6j] {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    }
}

.vault-grid__cell[b-p0h7b1xh6j] {
    /* Cell is transparent — ContentCard fills it */
    display: contents;
}

.vault-grid__cell--clickable[b-p0h7b1xh6j] {
    cursor: pointer;
}

/* ── Select button ─────────────────────────────────────────────────────── */

.vault-view__select-btn[b-p0h7b1xh6j] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background var(--duration-fast) var(--easing-standard),
                color var(--duration-fast) var(--easing-standard),
                border-color var(--duration-fast) var(--easing-standard);
}

.vault-view__select-btn:hover[b-p0h7b1xh6j],
.vault-view__select-btn.is-active[b-p0h7b1xh6j] {
    background: var(--color-accent-glow);
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.vault-view__select-btn:focus-visible[b-p0h7b1xh6j] {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 1px;
}

.vault-grid__cell--selectable[b-p0h7b1xh6j] {
    cursor: default;
}

/* ── Visibility cycling button ──────────────────────────────────────────── */

.vault-view__visibility-btn[b-p0h7b1xh6j] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 var(--space-2);
    height: var(--space-8);
    min-width: 2rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-ok);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--duration-fast) var(--easing-standard),
                color var(--duration-fast) var(--easing-standard);
}

    .vault-view__visibility-btn:hover[b-p0h7b1xh6j] {
        background: color-mix(in srgb, var(--color-ok) 12%, transparent);
    }

    .vault-view__visibility-btn:focus-visible[b-p0h7b1xh6j] {
        outline: 2px solid var(--color-focus-ring);
        outline-offset: 1px;
    }

    /* Private — amber */
    .vault-view__visibility-btn--private[b-p0h7b1xh6j] {
        color: var(--color-accent);
    }

    .vault-view__visibility-btn--private:hover[b-p0h7b1xh6j] {
        background: var(--color-accent-glow);
    }

    /* Confidential — red; inert */
    .vault-view__visibility-btn--confidential[b-p0h7b1xh6j] {
        color: var(--color-error);
        cursor: default;
    }

    .vault-view__visibility-btn--confidential:hover[b-p0h7b1xh6j] {
        background: transparent;
    }

.vault-view__visibility-label[b-p0h7b1xh6j] {
    display: none;
}

@media (min-width: 640px) {
    .vault-view__visibility-btn[b-p0h7b1xh6j] {
        min-width: 7.5rem;
    }

    .vault-view__visibility-label[b-p0h7b1xh6j] {
        display: block;
    }
}

/* ── Desktop: full-width header ─────────────────────────────────────────── */
/*
 * vault-main has margin-left: 64/220px; the sticky header sits inside it, so
 * its left edge starts at the rail's right edge. A negative margin pulls it
 * back to the viewport left so it spans the full page width.
 */


/* ── List layout ───────────────────────────────────────────────────────── */

.vault-list[b-p0h7b1xh6j] {
    display: flex;
    flex-direction: column;
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-card);
    overflow: hidden;
}

/* ── Sort button ───────────────────────────────────────────────────────── */

.vault-view__sort-btn[b-p0h7b1xh6j] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background var(--duration-fast) var(--easing-standard),
                color var(--duration-fast) var(--easing-standard),
                border-color var(--duration-fast) var(--easing-standard);
}

.vault-view__sort-btn:hover[b-p0h7b1xh6j],
.vault-view__sort-btn.is-active[b-p0h7b1xh6j] {
    background: var(--color-accent-glow);
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.vault-view__sort-btn:focus-visible[b-p0h7b1xh6j] {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 1px;
}

/* ── Sort popover ──────────────────────────────────────────────────────── */

/*
 * Backdrop sits below the sticky header (z-header = 100) so the sort button
 * itself stays clickable. Popover sits above the header so it is not clipped
 * by its stacking context.
 */

.vault-sort-backdrop[b-p0h7b1xh6j] {
    position: fixed;
    inset: 0;
    z-index: 90;   /* below --z-header (100) — header stays interactive */
    background: transparent;
}

.vault-sort-popover[b-p0h7b1xh6j] {
    position: fixed;
    /* top and right set via inline style from getBoundingClientRect */
    z-index: 150;  /* above --z-header (100), below --z-modal (200) */
    min-width: 180px;
    background: var(--color-s2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.vault-sort-popover__heading[b-p0h7b1xh6j] {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 var(--space-1);
    padding: 0 var(--space-2);
}

.vault-sort-popover__options[b-p0h7b1xh6j] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vault-sort-option[b-p0h7b1xh6j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-2) var(--space-2);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    text-align: left;
    transition: background var(--duration-fast), color var(--duration-fast);
}

.vault-sort-option:hover[b-p0h7b1xh6j] {
    background: var(--color-surface-toggle-track);
    color: var(--color-text-primary);
}

.vault-sort-option.is-active[b-p0h7b1xh6j] {
    background: var(--color-accent-glow);
    color: var(--color-accent);
}

.vault-sort-option__dir[b-p0h7b1xh6j] {
    font-size: var(--text-base);
    opacity: 0.8;
    flex-shrink: 0;
}

.vault-sort-popover__divider[b-p0h7b1xh6j] {
    height: 1px;
    background: var(--color-border-subtle);
    margin: var(--space-1) 0;
}

.vault-sort-direction[b-p0h7b1xh6j] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-2);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background var(--duration-fast), color var(--duration-fast);
}

.vault-sort-direction:hover[b-p0h7b1xh6j] {
    background: var(--color-surface-toggle-track);
    color: var(--color-text-primary);
}

/* ── Content groups ────────────────────────────────────────────────────── */

.vault-group[b-p0h7b1xh6j] {
    display: flex;
    flex-direction: column;
}

.vault-group + .vault-group[b-p0h7b1xh6j] {
    margin-top: var(--space-2);
}

.vault-group__header[b-p0h7b1xh6j] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-2);
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    text-align: left;
    transition: background var(--duration-fast) var(--easing-standard),
                color var(--duration-fast) var(--easing-standard);
}

.vault-group__header:hover[b-p0h7b1xh6j] {
    background: var(--color-surface-toggle-track);
    color: var(--color-text-primary);
}

.vault-group__header:focus-visible[b-p0h7b1xh6j] {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 1px;
}

.vault-group__chevron[b-p0h7b1xh6j] {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
    transition: transform var(--duration-fast) var(--easing-standard);
    display: inline-block;
}

.vault-group__chevron.is-open[b-p0h7b1xh6j] {
    transform: rotate(90deg);
}

.vault-group__label[b-p0h7b1xh6j] {
    flex: 1;
}

.vault-group__count[b-p0h7b1xh6j] {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-text-tertiary);
    background: var(--color-surface-toggle-track);
    border-radius: var(--radius-pill);
    padding: 1px var(--space-2);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.vault-group__grid[b-p0h7b1xh6j] {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

.vault-group__list[b-p0h7b1xh6j] {
    margin-top: var(--space-1);
    margin-bottom: var(--space-2);
}