.auth-page {
    min-height: 100vh;
    display: flex;
    padding: 20px;
}

/* margin:auto, bukan align-items:center — form daftar sekarang jauh lebih
   tinggi dari viewport HP. align-items:center membuat bagian atas kartu
   tidak bisa di-scroll, margin:auto berhenti di center saat ada ruang lebih
   dan menempel ke atas saat konten melebihi layar. */
.auth-container {
    width: 100%;
    max-width: 400px;
    margin: auto;
}

.auth-logo {
    text-align: center;
    margin-bottom: 32px;
}

.auth-logo h1 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px;
}

.auth-logo p {
    color: var(--text-muted);
    font-size: 14px;
}

.auth-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 32px;
}

.auth-card h2 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
}

.auth-card .subtitle {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 24px;
}

.auth-footer {
    text-align: center;
    margin-top: 24px;
    color: var(--text-muted);
    font-size: 14px;
}

.auth-footer a {
    color: var(--accent);
    font-weight: 500;
}

.auth-footer a:hover {
    text-decoration: underline;
}

.auth-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--danger);
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 16px;
    display: none;
}

.auth-error.show {
    display: block;
}

.btn-full {
    width: 100%;
    padding: 12px;
    font-size: 15px;
}

/* ── Entrance ───────────────────────────────────────── */

.auth-logo {
    animation: fadeUp 0.4s ease both;
}

.auth-card {
    animation: scaleIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.auth-footer {
    animation: fadeUp 0.4s 0.1s ease both;
}

/* ── Field helpers ───────────────────────────────────── */

.field-error {
    font-size: 12px;
    color: var(--danger);
    margin-top: 6px;
}

.field-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

/* .input-affix/.input-action pindah ke global.css: Settings tidak memuat
   auth.css sehingga tombol mata di sana tidak pernah kebagian gaya. */

.link-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ── Password strength ───────────────────────────────── */

.strength {
    margin-top: 10px;
}

.strength-bars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.strength-bars span {
    height: 4px;
    border-radius: 2px;
    background: var(--border);
    transition: background-color 0.15s ease;
}

.strength-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.strength-meta strong {
    font-weight: 600;
    color: var(--text-muted);
}

.strength[data-score='1'] .strength-bars span.is-on,
.strength[data-score='0'] .strength-bars span.is-on {
    background: var(--danger);
}

.strength[data-score='1'] .strength-meta strong,
.strength[data-score='0'] .strength-meta strong {
    color: var(--danger);
}

.strength[data-score='2'] .strength-bars span.is-on {
    background: var(--warning);
}

.strength[data-score='2'] .strength-meta strong {
    color: var(--warning);
}

.strength[data-score='3'] .strength-bars span.is-on {
    background: var(--accent);
}

.strength[data-score='3'] .strength-meta strong {
    color: var(--accent);
}

.strength[data-score='4'] .strength-bars span.is-on {
    background: var(--success);
}

.strength[data-score='4'] .strength-meta strong {
    color: var(--success);
}

/* ── Reset password card ─────────────────────────────── */

.auth-alt {
    text-align: center;
    margin-top: 16px;
}

.link-btn {
    background: none;
    border: 0;
    padding: 0;
    font-size: 14px;
    color: var(--accent);
    cursor: pointer;
    text-decoration: underline;
}

.link-btn:hover {
    color: var(--text-primary);
}

.reset-step {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.reset-step .btn + .btn {
    margin-top: 8px;
}

.reset-back {
    display: block;
    margin: 18px auto 0;
}