:root { --navy:#102d35; --green:#087f61; --cream:#f4f1e8; --card:#fffdfa; --line:#dcd6c8; --red:#c83d32; --ink:#10201d; --muted:#6f756f; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; padding:28px; color:var(--ink); background:radial-gradient(circle at 85% 15%,#dce8df,transparent 33%),var(--cream); font-family:Arial,sans-serif; }
.access-shell { width:min(980px,100%); min-height:600px; display:grid; grid-template-columns:1.05fr .95fr; overflow:hidden; border:1px solid var(--line); border-radius:22px; background:var(--card); box-shadow:0 24px 70px #17332b20; }
.brand-panel { position:relative; padding:64px 56px; overflow:hidden; color:white; background:var(--navy); }
.brand-panel h1 { max-width:420px; margin:14px 0 22px; font:700 58px/1 Georgia,serif; }
.brand-panel>p:not(.eyebrow) { max-width:390px; color:#c9dad7; line-height:1.7; }
.eyebrow { margin:0; color:#1aa37d; font-size:12px; font-weight:800; letter-spacing:2px; }
.brand-mark { position:absolute; right:-55px; bottom:-95px; color:#ffffff0b; font:700 420px/1 Georgia,serif; }
.form-panel { padding:48px 54px; align-self:center; }
.tabs { display:flex; gap:6px; margin-bottom:44px; padding:5px; border-radius:999px; background:#efede6; }
.tabs button { flex:1; padding:11px; border:0; border-radius:999px; color:var(--muted); background:transparent; cursor:pointer; }
.tabs button.active { color:white; background:var(--navy); }
h2 { margin:8px 0 28px; font:700 34px/1.1 Georgia,serif; }
label { display:grid; gap:8px; margin:17px 0; font-size:13px; font-weight:700; }
input { width:100%; padding:14px 15px; border:1px solid var(--line); border-radius:9px; background:white; font:inherit; outline:none; }
input:focus { border-color:var(--green); box-shadow:0 0 0 3px #0b86631a; }
.primary { width:100%; margin-top:12px; padding:15px; border:0; border-radius:9px; color:white; background:var(--navy); font-weight:800; cursor:pointer; }
.primary:disabled { opacity:.6; }
form small { display:block; margin-top:14px; color:var(--muted); line-height:1.5; text-align:center; }
.message { min-height:22px; margin:18px 0 0; color:var(--red); font-size:13px; text-align:center; }
.message.success { color:var(--green); }
.creator-footer { position:fixed; right:22px; bottom:12px; color:var(--muted); font-size:11px; letter-spacing:.3px; }
@media (max-width:760px) { body{padding:0}.access-shell{min-height:100vh;grid-template-columns:1fr;border:0;border-radius:0}.brand-panel{padding:34px}.brand-panel h1{font-size:40px}.brand-mark{display:none}.form-panel{padding:34px} }