@import url("https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800;900&family=Fraunces:ital,opsz,wght@0,9..144,400;1,9..144,400;1,9..144,500&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root{
  --ground:#F1F7FC; --surface:#FFFFFF; --ink:#0B3A63; --ink-soft:#2E5C82; --muted:#6A87A0;
  --line:rgba(11,58,99,.14); --line-2:rgba(11,58,99,.26);
  --blue:#0F79C4; --blue-deep:#0B4C86; --blue-2:#41B6E6; --sun:#F4B12A;
  --f-display:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-serif:'Fraunces',Georgia,serif; --f-mono:'JetBrains Mono',ui-monospace,monospace;
}
:root[data-theme="dark"]{
  --ground:#061A27; --surface:#0E2A3D; --ink:#EAF4FB; --ink-soft:#B7D2E4; --muted:#7F9CB2;
  --line:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.26); --blue:#41B6E6;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--f-display);background:var(--ground);color:var(--ink);-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit;text-decoration:none}

.auth2{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}

.auth2-media{position:relative;overflow:hidden;background:#0B3A63}
.auth2-media::before{content:"";position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1508672019048-805c876b67e2?w=1400&q=80&auto=format') center/cover;filter:grayscale(1) contrast(1.05) brightness(.82)}
.auth2-media .veil{position:absolute;inset:0;z-index:1;background:linear-gradient(120deg,rgba(6,26,39,.88),rgba(11,76,134,.5) 55%,rgba(58,170,53,.34))}
.auth2-media .brand{position:absolute;left:0;bottom:0;z-index:2;padding:56px clamp(28px,5vw,64px);color:#fff}
.auth2-media .eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase}
.auth2-media .eyebrow::before{content:"";width:40px;height:2px;background:var(--sun)}
.auth2-media h1{font-weight:900;letter-spacing:-.02em;text-transform:uppercase;font-size:clamp(2.2rem,4vw,3.4rem);line-height:.95;margin:22px 0 12px}
.auth2-media h1 em{font-family:var(--f-serif);font-style:italic;font-weight:400;text-transform:none;color:var(--sun)}
.auth2-media .lead{font-family:var(--f-serif);font-size:1.1rem;color:rgba(255,255,255,.92);max-width:34ch}

.auth2-form{display:flex;align-items:center;justify-content:center;padding:40px 24px}
.form-wrap{width:100%;max-width:420px}
.f-eyebrow{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.form-wrap h2{font-weight:800;letter-spacing:-.02em;font-size:2rem;margin:10px 0 6px}
.f-sub{color:var(--muted);font-size:.98rem;margin-bottom:24px}
.form-wrap form{display:flex;flex-direction:column}
.form-wrap label{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:16px 0 6px}
.form-wrap input[type=email],.form-wrap input[type=password],.form-wrap input[type=text]{width:100%;padding:13px 14px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-family:var(--f-display);font-size:1rem}
.form-wrap input:focus{outline:2px solid var(--blue);border-color:var(--blue)}
.f-remember{flex-direction:row;align-items:center;gap:10px;margin-top:18px;font-family:var(--f-display);font-size:.9rem;letter-spacing:0;text-transform:none;color:var(--ink-soft)}
.f-remember input{width:auto}
.form-wrap button[type=submit]{margin-top:24px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 22px;border:0;cursor:pointer;font-family:var(--f-display);font-weight:700;font-size:1rem;color:#fff;background:linear-gradient(135deg,var(--blue-deep),var(--blue) 60%,var(--blue-2))}
.form-wrap button[type=submit] svg{width:17px;height:17px}
.f-error{background:rgba(192,57,43,.08);border:1px solid rgba(192,57,43,.3);color:#a93226;padding:11px 14px;font-size:.9rem;margin-bottom:14px}
.f-error ul{margin:0;padding-left:18px}
.f-fielderr{display:block;color:#c0392b;font-size:.8rem;margin-top:5px}
.f-back{display:inline-block;margin-top:28px;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.f-back:hover{color:var(--blue)}

@media(max-width:820px){
  .auth2{grid-template-columns:1fr}
  .auth2-media{min-height:34vh}
  .auth2-media .brand{padding:32px}
}