.password-page {
    min-height: calc(100vh - 160px);
    padding: 86px 20px 100px;
    background:
        radial-gradient(circle at top left, rgba(197,160,89,.12), transparent 24%),
        radial-gradient(circle at bottom right, rgba(2,44,34,.08), transparent 28%),
        linear-gradient(180deg, #f8faf9 0%, #eef3f1 100%);
}

.password-card {
    max-width: 560px;
    margin: 0 auto;
    padding: 38px;
    border-radius: 32px;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(2,44,34,.08);
    box-shadow: 0 24px 60px rgba(0,0,0,.08);
}

.password-kicker {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(197,160,89,.14);
    color: #856225;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.password-card h1 {
    color: var(--text-primary);
    font-size: 2.4rem;
    font-weight: 950;
    letter-spacing: -1.2px;
    margin-bottom: 12px;
}

.password-card p {
    color: #64746f;
    line-height: 1.8;
}

.password-card label {
    display: block;
    margin: 16px 0 8px;
    color: #18372f;
    font-size: 13px;
    font-weight: 900;
}

.password-card input {
    width: 100%;
    min-height: 54px;
    border-radius: 17px;
    border: 1px solid rgba(2,44,34,.13);
    padding: 0 15px;
    outline: none;
}

.password-card input:focus {
    border-color: rgba(197,160,89,.85);
    box-shadow: 0 0 0 4px rgba(197,160,89,.13);
}

.password-card button:not(.password-toggle-btn) {
    width: 100%;
    min-height: 54px;
    margin-top: 20px;
    border: 0;
    border-radius: 17px;
    background: linear-gradient(135deg,#ecd098,var(--color-accent),#a88039);
    color: #082d25;
    font-weight: 950;
    letter-spacing: .07em;
    text-transform: uppercase;
    cursor: pointer;
}

.password-alert {
    padding: 13px 14px;
    border-radius: 16px;
    margin: 16px 0;
    font-size: 13px;
    font-weight: 800;
}

.password-alert.success {
    background: rgba(15,122,95,.08);
    color: #0f674f;
    border: 1px solid rgba(15,122,95,.14);
}

.password-alert.error {
    background: rgba(180,35,24,.08);
    color: #9f2c22;
    border: 1px solid rgba(180,35,24,.14);
}

.password-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    color: #8b6829;
    font-weight: 900;
    text-decoration: none;
}

.password-back:hover {
    color: var(--color-accent);
}

.password-input-wrap {
    position: relative;
}

.password-error {
    font-size: 12px;
    color: #9f2c22;
    font-weight: 700;
    margin-top: 4px;
}

.password-card button i {
    margin-right: 6px;
}

/* ── Password show/hide toggle ─────────────────────────────── */
.password-toggle-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: var(--clr-muted-l, #7a8682);
    font-size: 15px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color 0.15s ease;
    font-family: inherit;
}

.password-toggle-btn:hover {
    color: var(--clr-gold-dark, #a88039);
}

/* make room for toggle button inside input */
.password-input-wrap input[type="password"],
.password-input-wrap input[type="text"] {
    padding-right: 40px;
}

/* ── Autofill override ──────────────────────────────────── */

.password-card input:-webkit-autofill,
.password-card input:-webkit-autofill:hover,
.password-card input:-webkit-autofill:focus,
.password-card input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #1a2238 inset;
    -webkit-text-fill-color: #f0ede8;
    caret-color: #f0ede8;
    transition: background-color 9999s ease-in-out 0s;
}

html[data-theme="light"] .password-card input:-webkit-autofill,
html[data-theme="light"] .password-card input:-webkit-autofill:hover,
html[data-theme="light"] .password-card input:-webkit-autofill:focus,
html[data-theme="light"] .password-card input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
    -webkit-text-fill-color: #111113;
    caret-color: #111113;
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 575px) {
    .password-page {
        padding: 48px 14px 60px;
    }

    .password-card {
        padding: 26px 20px;
        border-radius: 22px;
    }

    .password-card h1 {
        font-size: 1.8rem;
    }
}

/* ── Dark mode ──────────────────────────────────────────── */

html[data-theme="dark"] .password-page {
    background:
        radial-gradient(circle at top left, rgba(197,160,89,.09), transparent 24%),
        radial-gradient(circle at bottom right, rgba(2,44,34,.12), transparent 28%),
        linear-gradient(180deg, #09091c 0%, #0e1222 100%);
}

html[data-theme="dark"] .password-card {
    background: #131a2c;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 24px 60px rgba(0,0,0,.28);
}

html[data-theme="dark"] .password-card h1 {
    color: #f0ede8;
}

html[data-theme="dark"] .password-card p {
    color: rgba(255,255,255,.60);
}

html[data-theme="dark"] .password-card label {
    color: rgba(255,255,255,.82);
}

html[data-theme="dark"] .password-card input {
    background: #1e2940;
    border: 1px solid rgba(255,255,255,.12);
    color: #f0ede8;
}

html[data-theme="dark"] .password-card input:focus {
    border-color: rgba(197,160,89,.85);
    box-shadow: 0 0 0 4px rgba(197,160,89,.13);
}

/* ── Light mode explicit (override any inherited dark) ─── */

html[data-theme="light"] .password-page {
    background:
        radial-gradient(circle at top left, rgba(197,160,89,.12), transparent 24%),
        radial-gradient(circle at bottom right, rgba(2,44,34,.08), transparent 28%),
        linear-gradient(180deg, #f8faf9 0%, #eef3f1 100%);
}

html[data-theme="light"] .password-card {
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(2,44,34,.08);
}