:root { --ink:#17201d; --blue:#123f52; --paper:#f1ece2; --sheet:#fffcf6; --orange:#d26c3d; --rule:#d7cfc1; font-family:Aptos,"Segoe UI",sans-serif; color:var(--ink); background:var(--blue); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--blue); }
body::before { content:""; position:fixed; inset:0; opacity:.055; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(360px,.92fr) minmax(480px,1.08fr); }
.identity-panel { position:relative; min-height:100vh; padding:52px 56px 42px; overflow:hidden; display:flex; flex-direction:column; color:#edf2ed; background:#123f52; }
.identity-panel::after { content:"12"; position:absolute; right:-35px; bottom:-75px; color:rgba(255,255,255,.035); font:700 300px/1 Georgia,serif; }
.brand-lockup { display:flex; align-items:center; gap:16px; padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,.18); }
.brand-lockup>span { width:52px; height:52px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.72); font:800 14px/1 Bahnschrift,sans-serif; letter-spacing:.1em; transform:rotate(-2deg); }
.brand-lockup strong { display:block; font:700 28px/1 Georgia,serif; }.brand-lockup small { display:block; margin-top:5px; color:#afc3c2; font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.identity-copy { margin:auto 0; position:relative; z-index:1; }.identity-copy>p { color:#efb08e; font:800 9px/1 Bahnschrift,sans-serif; letter-spacing:.18em; }.identity-copy h1 { margin:18px 0 40px; max-width:560px; font:500 clamp(38px,4.5vw,67px)/1.02 Georgia,serif; }.identity-copy h1 em { color:#efb08e; font-weight:400; }
.security-note { max-width:400px; display:flex; gap:12px; align-items:center; padding:14px 0; border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); color:#c1d0cd; font-size:11px; line-height:1.5; }.security-note i { width:8px; height:8px; flex:none; border-radius:50%; background:#82c596; box-shadow:0 0 0 5px rgba(130,197,150,.12); }
.identity-panel footer { color:#87a1a3; font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
.form-panel { min-height:100vh; padding:50px; display:grid; place-items:center; background:var(--paper); }
form { width:min(440px,100%); padding:46px 48px 42px; background:var(--sheet); border:1px solid var(--rule); box-shadow:0 25px 80px rgba(17,43,50,.16); }
.eyebrow { margin:0 0 12px; color:var(--orange); font:800 9px/1 Bahnschrift,sans-serif; letter-spacing:.18em; } h2 { margin:0; font:600 35px/1.1 Georgia,serif; }.intro { margin:14px 0 32px; color:#6b756f; font-size:12px; line-height:1.55; }
label { display:grid; gap:8px; margin-top:17px; } label>span { color:#59645e; font:800 8px/1 Bahnschrift,sans-serif; letter-spacing:.11em; text-transform:uppercase; } input { width:100%; min-width:0; border:1px solid var(--rule); background:white; padding:13px 14px; color:var(--ink); font:inherit; outline:0; } input:focus { border-color:#1c6078; box-shadow:0 0 0 3px rgba(28,96,120,.1); }
.password-wrap { display:grid; grid-template-columns:1fr auto; }.password-wrap input { grid-column:1/-1; grid-row:1; padding-right:66px; }.password-wrap button { grid-column:2; grid-row:1; z-index:1; border:0; padding:0 14px; color:#6f7772; background:transparent; font-size:10px; font-weight:800; text-transform:uppercase; }
.error { margin:16px 0 0; padding:10px 12px; border-left:3px solid #a83e35; color:#8f302a; background:#fff0ec; font-size:11px; }
.sign-in { width:100%; margin-top:24px; border:1px solid var(--blue); padding:13px 16px; display:flex; justify-content:space-between; color:white; background:var(--blue); font-weight:800; cursor:pointer; }.sign-in:hover { background:#1c6078; }.sign-in:disabled { opacity:.6; cursor:wait; }.sign-in span { color:#efb08e; }
.privacy { margin:18px 0 0; color:#858d88; font-size:9px; line-height:1.5; }
@media (max-width:850px) { .login-shell{grid-template-columns:1fr}.identity-panel{min-height:auto;padding:28px 28px 32px}.identity-copy{margin:60px 0 25px}.identity-copy h1{font-size:40px}.identity-panel footer{display:none}.form-panel{min-height:auto;padding:30px 20px 50px}form{padding:36px 30px} }