/* ============================================================
   Auth pages: login, forgot password, create new password.
   Brand palette kept: amber #FFBF00, dark #333, gray #e9ecef, flag.
   Two-panel card. A panel's colour scheme is set by .auth-dark /
   .auth-light through CSS variables, so the SAME brand/form markup
   adapts whether it sits on the dark side or the white side.
   ============================================================ */
:root{
    --auth-amber:#FFBF00; --auth-amber-dark:#e0a800; --auth-dark:#333;
    --auth-bg:#e9ecef; --auth-ink:#2b2f33; --auth-muted:#6b7280; --auth-line:#e3e6ea;
}
html.auth-html{ scrollbar-gutter: stable both-edges; background:var(--auth-bg); }
html.auth-html *, html.auth-html *::before, html.auth-html *::after{ box-sizing:border-box; }

body.auth-body{
    background:var(--auth-bg); margin:0; color:var(--auth-ink); font-size:14px;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
}

.auth-nav{ background:var(--auth-dark); color:#fff; height:48px; display:flex; align-items:center; padding:0 22px; }
.auth-nav .auth-brandword{ font-weight:800; font-size:14px; letter-spacing:.4px; }
.auth-nav .auth-brandword span{ color:var(--auth-amber); }

.auth-wrap{ min-height:calc(100vh - 48px); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px 16px; gap:16px; }
.auth-card{
    width:100%; max-width:880px; background:#fff; border-radius:16px; overflow:hidden;
    display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--auth-line);
    box-shadow:0 12px 34px rgba(17,24,39,.14), 0 2px 8px rgba(17,24,39,.07);
}
.auth-foot{ text-align:center; font-size:12px; color:#8a9099; }

/* ---- Panels ---- */
.auth-panel{ position:relative; padding:42px 36px; display:flex; flex-direction:column; justify-content:center; }
.auth-dark{
    background:linear-gradient(150deg,#2b2b2b 0%, #3a3a3a 62%, #474747 100%);
    --panel-fg:#ffffff; --panel-soft:#d7d9dc; --panel-label:#cbd2d9;
}
.auth-dark::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--auth-amber); }
.auth-light{
    background:#fff;
    --panel-fg:var(--auth-ink); --panel-soft:var(--auth-muted); --panel-label:#55606a;
}

/* ---- Brand content (adapts to its panel) ---- */
.auth-brand{ gap:12px; }
.auth-brand img{ width:72px; height:auto; margin-bottom:6px; }
.auth-dark .auth-brand img{ filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.auth-brand .b-sub{ font-size:12px; font-weight:800; letter-spacing:.6px; color:var(--auth-amber); text-transform:uppercase; }
.auth-brand .b-title{ font-size:23px; line-height:1.22; font-weight:800; margin:0; color:var(--panel-fg); }
.auth-brand .b-tag{ font-size:13.5px; color:var(--panel-soft); margin-top:2px; line-height:1.5; }
.auth-features{ list-style:none; padding:0; margin:16px 0 0; display:flex; flex-direction:column; gap:10px; }
.auth-features li{ font-size:13px; color:var(--panel-soft); display:flex; align-items:center; gap:11px; }
.auth-features i{ color:var(--auth-amber); width:16px; text-align:center; }

/* ---- Form content (adapts to its panel) ---- */
.auth-form .f-title{ font-size:22px; font-weight:800; margin:0 0 4px; color:var(--panel-fg); }
.auth-form .f-lead{ font-size:13.5px; color:var(--panel-soft); margin:0 0 20px; }
.auth-intro{ font-size:13px; color:var(--panel-soft); margin:0 0 12px; line-height:1.5; }
.auth-field{ margin-bottom:16px; }
.auth-field label{ display:block; font-size:12.5px; font-weight:700; color:var(--panel-label); margin-bottom:6px; letter-spacing:.2px; }
.auth-input{ position:relative; }
.auth-input > i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#9aa3ad; font-size:14px; pointer-events:none; }
.auth-input input{
    width:100%; height:46px; border:1.5px solid #d7dce1; border-radius:10px;
    padding:0 44px 0 40px; font-size:14.5px; color:var(--auth-ink); background:#fff; outline:none;
    transition:border-color .15s, box-shadow .15s;
}
.auth-input input::placeholder{ color:#aab2bb; }
.auth-input input:focus{ border-color:var(--auth-amber); box-shadow:0 0 0 3px rgba(255,191,0,.25); }
.auth-eye{ position:absolute; right:8px; top:50%; transform:translateY(-50%); border:0; background:transparent; color:#9aa3ad; cursor:pointer; padding:7px; font-size:14px; line-height:1; }
.auth-eye:hover{ color:var(--auth-dark); }

.auth-row{ display:flex; justify-content:flex-end; align-items:center; margin:-2px 0 18px; }
.auth-row.center{ justify-content:center; margin:14px 0 0; }
.auth-link{ font-size:13px; color:#1f6feb; text-decoration:none; font-weight:600; }
.auth-dark .auth-link{ color:var(--auth-amber); }     /* keep the link readable on the dark panel */
.auth-link:hover{ text-decoration:underline; }

.auth-btn{
    width:100%; height:48px; border:0; border-radius:10px; cursor:pointer;
    background:var(--auth-amber); color:#333; font-weight:800; font-size:15px; letter-spacing:.3px;
    box-shadow:0 3px 9px rgba(255,191,0,.42); transition:background .15s, transform .02s;
}
.auth-btn:hover{ background:var(--auth-amber-dark); }
.auth-btn:active{ transform:translateY(1px); }

.auth-note{ margin-top:16px; font-size:12px; color:var(--panel-soft); display:flex; align-items:center; gap:7px; justify-content:center; }
.auth-note i{ color:#2e9d4f; }

/* ---- Password-rules box (reset page) ---- */
.auth-rules{ font-size:12.5px; border-radius:10px; padding:11px 13px; margin:0 0 16px;
    background:rgba(255,191,0,.12); border:1px solid rgba(255,191,0,.55); color:var(--panel-fg); }
.auth-rules ul{ margin:6px 0 0; padding-left:20px; }
.auth-rules li{ margin:2px 0; color:var(--panel-soft); }

/* ---- Inline alert ---- */
.auth-alert{ border-radius:10px; font-size:13.5px; padding:11px 14px; margin-bottom:18px; border:1px solid transparent; }
.auth-alert-danger{ background:#fdecee; color:#b02a37; border-color:#f5c2c7; }
.auth-alert-success{ background:#e7f6ec; color:#17683a; border-color:#badbcc; }
.auth-alert-info{ background:#e7f1fe; color:#0b5394; border-color:#b6d4fe; }
.auth-alert-warning{ background:#fff6e0; color:#8a6400; border-color:#ffe08a; }

@media (max-width: 760px){
    .auth-card{ grid-template-columns:1fr; max-width:460px; }
    .auth-panel{ padding:30px 26px; }
    .auth-brand .b-title{ font-size:20px; }
    .auth-features{ display:none; }
    .auth-card .auth-brand{ order:-1; }   /* coat of arms / branding always on top on mobile */
}