/* auth.css — shared look for the sign-in, password reset and document verification pages.
   Navy background, one white card, works from 320px phones to desktops. */
:root { --navy:#1a3a6b; --navy-2:#24519e; --navy-deep:#0f2347; --gold:#f0b429; --gold-2:#d49b1a;
        --ink:#1f2937; --muted:#5b6474; --line:#d7dde7; --ok:#1f8a4c; --err:#b42318; }
*, *::before, *::after { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center;
       padding:24px 16px; padding-bottom:max(24px, env(safe-area-inset-bottom));
       background:radial-gradient(900px 520px at 50% 0%, #24519e 0%, #1a3a6b 38%, #0f2347 100%) fixed;
       color:var(--ink); font:15px/1.5 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }

.auth-brand { text-align:center; color:#fff; margin-bottom:18px; }
.auth-brand img { width:64px; height:64px; display:block; margin:0 auto 10px; }
.auth-brand .name { font-size:17px; font-weight:700; letter-spacing:1.5px; }
.auth-brand .sub { font-size:12.5px; color:#c9d6ee; margin-top:2px; }

.auth-card { width:100%; max-width:400px; background:#fff; border-radius:16px; padding:26px 22px 22px;
             box-shadow:0 18px 50px rgba(5,15,35,.35); }
.auth-card h1 { margin:0 0 4px; font-size:21px; color:var(--navy); }
.auth-card .lead { margin:0 0 18px; font-size:13.5px; color:var(--muted); }

.field { margin-bottom:14px; }
.field label { display:block; margin-bottom:6px; font-size:13px; font-weight:600; color:var(--ink); }
.in { display:block; width:100%; min-height:48px; padding:11px 13px; font:inherit; font-size:16px; color:var(--ink);
      background:#f8fafc; border:1px solid #c6cfdc; border-radius:10px; -webkit-appearance:none; appearance:none; }
.in:focus { outline:none; border-color:var(--navy); background:#fff; box-shadow:0 0 0 3px rgba(26,58,107,.15); }
.pw { position:relative; }
.pw .in { padding-right:52px; }
.pw-toggle { position:absolute; right:4px; top:50%; transform:translateY(-50%); width:44px; height:40px; border:0; border-radius:8px;
             background:transparent; color:var(--muted); font-size:19px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.pw-toggle:hover { color:var(--navy); background:#eef2f8; }

.btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:50px; margin-top:6px; padding:0 18px;
       font:inherit; font-size:15.5px; font-weight:600; color:#fff; background:var(--navy); border:0; border-radius:11px; cursor:pointer;
       text-decoration:none; -webkit-tap-highlight-color:transparent; }
.btn:hover { background:var(--navy-2); }
.btn:active { transform:scale(.99); }
.btn-gold { background:var(--gold); color:#1f1a0a; }
.btn-gold:hover { background:var(--gold-2); }
.btn-light { background:#fff; color:var(--navy); border:1px solid var(--line); }
.btn-light:hover { background:#f1f5fb; }
.btn .ic { font-size:19px; }

.msg { display:flex; gap:9px; align-items:flex-start; padding:11px 12px; margin-bottom:14px; border-radius:10px; font-size:13.5px; }
.msg .ic { font-size:17px; margin-top:2px; flex-shrink:0; }
.msg-err { background:#fef3f2; color:var(--err); border:1px solid #fecdca; }
.msg-ok  { background:#ecfdf3; color:#05603a; border:1px solid #abefc6; }
.msg-info{ background:#eef4ff; color:#1e3a8a; border:1px solid #d1e0ff; }

.links { margin-top:16px; text-align:center; font-size:13.5px; }
.links a { color:var(--navy); font-weight:600; text-decoration:none; }
.links a:hover { text-decoration:underline; }
.auth-foot { margin-top:18px; text-align:center; font-size:12px; color:#9fb3d6; }
.auth-foot a { color:#dbe6fb; text-decoration:none; }

.or { display:flex; align-items:center; gap:10px; margin:16px 0 12px; font-size:12px; color:var(--muted); }
.or::before, .or::after { content:""; flex:1; height:1px; background:#e3e8f0; }

@media (min-width:600px) { .auth-card { padding:32px 30px 26px; } .auth-brand img { width:72px; height:72px; } }