*, *::before, *::after { box-sizing: border-box; }

/* ══ DARK THEME (default) ══════════════════════════════════════════════════ */
:root, [data-theme="dark"] {
    --login-bg-from:  #0f172a;
    --login-bg-mid:   #1e3a5f;
    --login-bg-to:    #0f172a;
    --card-bg:        rgba(255,255,255,.06);
    --card-border:    rgba(255,255,255,.12);
    --card-shadow:    rgba(0,0,0,.4);
    --heading-c:      #e2e8f0;
    --badge-bg:       rgba(59,130,246,.3);
    --badge-c:        #93c5fd;
    --badge-border:   rgba(59,130,246,.4);
    --label-c:        #cbd5e1;
    --input-bg:       rgba(255,255,255,.08);
    --input-border:   rgba(255,255,255,.15);
    --input-c:        #f1f5f9;
    --input-focus-bg: rgba(255,255,255,.12);
    --placeholder-c:  #475569;
    --icon-c:         #64748b;
    --divider-line:   rgba(255,255,255,.1);
    --divider-c:      #475569;
    --eye-bg:         rgba(255,255,255,.08);
    --eye-border:     rgba(255,255,255,.15);
    --eye-c:          #64748b;
    --eye-hover-c:    #94a3b8;
    --footer-c:       #475569;
    --brand-h1:       #fff;
    --brand-p:        #94a3b8;
    --alert-err-bg:   rgba(239,68,68,.15);
    --alert-err-c:    #fca5a5;
    --alert-ok-bg:    rgba(34,197,94,.15);
    --alert-ok-c:     #86efac;
}

/* ══ LIGHT THEME ════════════════════════════════════════════════════════════ */
[data-theme="light"] {
    --login-bg-from:  #dbeafe;
    --login-bg-mid:   #eff6ff;
    --login-bg-to:    #dbeafe;
    --card-bg:        #ffffff;
    --card-border:    rgba(0,0,0,.1);
    --card-shadow:    rgba(0,0,0,.12);
    --heading-c:      #0f172a;
    --badge-bg:       rgba(37,99,235,.1);
    --badge-c:        #2563eb;
    --badge-border:   rgba(37,99,235,.3);
    --label-c:        #475569;
    --input-bg:       #f8fafc;
    --input-border:   rgba(0,0,0,.15);
    --input-c:        #0f172a;
    --input-focus-bg: #fff;
    --placeholder-c:  #94a3b8;
    --icon-c:         #94a3b8;
    --divider-line:   rgba(0,0,0,.1);
    --divider-c:      #94a3b8;
    --eye-bg:         #f8fafc;
    --eye-border:     rgba(0,0,0,.15);
    --eye-c:          #94a3b8;
    --eye-hover-c:    #64748b;
    --footer-c:       #94a3b8;
    --brand-h1:       #0f172a;
    --brand-p:        #64748b;
    --alert-err-bg:   rgba(220,38,38,.08);
    --alert-err-c:    #b91c1c;
    --alert-ok-bg:    rgba(22,163,74,.08);
    --alert-ok-c:     #15803d;
}

body {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--login-bg-from) 0%, var(--login-bg-mid) 50%, var(--login-bg-to) 100%);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Segoe UI', system-ui, sans-serif;
    padding: 1.5rem;
    transition: background .25s;
}

.auth-wrapper { width: 100%; max-width: 440px; }

/* ── Brand ── */
.brand { text-align: center; margin-bottom: 2rem; }
.brand-icon {
    width: 64px; height: 64px; border-radius: 18px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 1rem; box-shadow: 0 8px 32px rgba(59,130,246,.4);
}
.brand-icon i { font-size: 1.8rem; color: #fff; }
.brand h1 { font-size: 1.5rem; font-weight: 700; color: var(--brand-h1); margin: 0; }
.brand p  { color: var(--brand-p); font-size: .875rem; margin: .25rem 0 0; }

/* ── Card ── */
.card {
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--card-border);
    border-radius: 20px; padding: 2rem;
    box-shadow: 0 20px 60px var(--card-shadow);
    transition: background .25s, border-color .25s;
}
.card-heading {
    font-size: 1.1rem; font-weight: 600; color: var(--heading-c);
    margin-bottom: 1.5rem; display: flex; align-items: center; gap: .5rem;
}
.card-heading .badge-mode {
    font-size: .7rem; font-weight: 500; border-radius: 20px; padding: .2rem .6rem;
    background: var(--badge-bg); color: var(--badge-c); border: 1px solid var(--badge-border);
}

/* ── Form controls ── */
.form-label { color: var(--label-c); font-size: .83rem; font-weight: 500; margin-bottom: .4rem; }
.form-control {
    background: var(--input-bg); border: 1px solid var(--input-border);
    border-radius: 10px; color: var(--input-c);
    padding: .65rem 1rem; font-size: .92rem;
    transition: border-color .2s, box-shadow .2s, background .25s;
}
.form-control:focus {
    background: var(--input-focus-bg); border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.25); color: var(--input-c);
}
.form-control::placeholder { color: var(--placeholder-c); }

.input-group-text {
    background: var(--input-bg); border: 1px solid var(--input-border);
    border-radius: 10px 0 0 10px; color: var(--icon-c);
    transition: background .25s;
}
.input-group .form-control       { border-radius: 0 10px 10px 0; }
.input-group .form-control:focus { border-color: #3b82f6; }

.btn-primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border: none; border-radius: 10px; padding: .7rem; width: 100%;
    font-weight: 600; font-size: .95rem; letter-spacing: .01em;
    transition: opacity .2s, transform .1s;
}
.btn-primary:hover  { opacity: .9; transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

/* ── Alerts ── */
.alert { border-radius: 10px; font-size: .875rem; padding: .75rem 1rem; border: none; margin-bottom: 1.25rem; }
.alert-danger  { background: var(--alert-err-bg); color: var(--alert-err-c); }
.alert-success { background: var(--alert-ok-bg);  color: var(--alert-ok-c); }

/* ── Eye toggle ── */
.toggle-eye {
    background: var(--eye-bg); border: 1px solid var(--eye-border);
    border-left: none; border-radius: 0 10px 10px 0;
    color: var(--eye-c); cursor: pointer; padding: 0 .75rem;
    display: flex; align-items: center; transition: background .25s;
}
.toggle-eye:hover { color: var(--eye-hover-c); }

/* ── Layout helpers ── */
.name-row    { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.footer-note { text-align: center; color: var(--footer-c); font-size: .78rem; margin-top: 1.5rem; }

@media (max-width: 480px) {
    .name-row { grid-template-columns: 1fr; }
    .card     { padding: 1.5rem; }
}