:root { --ink:#001f2b; --lime:#d9ff3f; --aqua:#00d5df; --paper:#f3f1eb; --muted:#65757b; }
* { box-sizing:border-box; }
html { background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; font-size:10px; }
body { margin:0; min-height:100vh; }
a { color:inherit; text-decoration:none; }
.auth-header { align-items:center; background:var(--ink); color:#fff; display:flex; height:9rem; justify-content:space-between; padding:1.6rem 5vw; }
.brand { align-items:center; display:grid; grid-template-columns:4.5rem auto; grid-template-rows:1fr 1fr; }
.brand i { background:var(--lime); clip-path:polygon(50% 0,100% 100%,66% 72%,54% 93%,37% 56%,0 100%); grid-row:1/3; height:4rem; margin-right:1.2rem; width:4rem; }
.brand strong { font-size:2rem; letter-spacing:-.08em; line-height:1; }
.brand span { font-size:.8rem; letter-spacing:.18em; }
.back { font-size:1.1rem; font-weight:700; letter-spacing:.12em; }
.auth-shell { display:grid; grid-template-columns:minmax(30rem,1fr) minmax(38rem,64rem); min-height:calc(100vh - 9rem); }
.auth-intro { background:var(--ink); color:#fff; padding:10vh 7vw; position:relative; }
.auth-intro::after { background:var(--lime); bottom:7rem; clip-path:polygon(50% 0,100% 100%,66% 72%,54% 93%,37% 56%,0 100%); content:''; height:15rem; opacity:.95; position:absolute; right:7vw; width:18rem; }
.auth-intro > span,.form-heading > span { color:var(--aqua); font-size:1.1rem; font-weight:700; letter-spacing:.2em; }
.auth-intro h1 { font-size:clamp(5rem,7vw,10rem); letter-spacing:-.08em; line-height:.82; margin:3rem 0; }
.auth-intro p { font-size:1.6rem; line-height:1.65; max-width:48rem; }
.auth-intro ul { font-size:1.2rem; line-height:2; list-style:none; margin:4rem 0 0; padding:0; }
.auth-intro li::before { color:var(--lime); content:'✓'; font-weight:700; margin-right:1rem; }
.auth-card { align-self:center; padding:6rem 7vw; position:relative; }
.tabs { border-bottom:.1rem solid #b8c2c3; display:flex; gap:2.5rem; margin-bottom:5rem; }
.tabs button { background:none; border:0; border-bottom:.3rem solid transparent; color:var(--muted); cursor:pointer; font-size:1.1rem; font-weight:700; letter-spacing:.12em; padding:0 0 1.5rem; }
.tabs button.active { border-color:var(--ink); color:var(--ink); }
.form-heading h2 { font-size:clamp(3.2rem,4vw,5rem); letter-spacing:-.06em; line-height:.95; margin:1.5rem 0 4rem; }
.form-heading em { color:#008995; font-style:normal; }
.auth-form { display:grid; gap:2rem; }
.auth-form label:not(.check) { display:grid; font-size:1.1rem; font-weight:700; gap:.8rem; letter-spacing:.06em; text-transform:uppercase; }
.auth-form input:not([type=checkbox]) { background:#fff; border:.1rem solid #b8c2c3; border-radius:0; color:var(--ink); font-size:1.6rem; min-height:5.6rem; padding:1.4rem 1.6rem; width:100%; }
.auth-form input:focus { border-color:#008995; outline:.2rem solid rgba(0,137,149,.2); }
.check { align-items:flex-start; display:flex; font-size:1.1rem; gap:1rem; line-height:1.5; }
.check input { accent-color:var(--ink); margin:.1rem 0 0; }
.help { color:var(--muted); font-size:1.1rem; line-height:1.5; margin:-1rem 0 0; }
.submit { align-items:center; background:var(--lime); border:0; color:var(--ink); cursor:pointer; display:flex; font-size:1.2rem; font-weight:700; justify-content:space-between; margin-top:1rem; min-height:6rem; padding:0 2.2rem; }
.submit.secondary { background:var(--ink); color:#fff; justify-content:center; }
.submit:disabled { cursor:wait; opacity:.55; }
.message { border-left:.3rem solid transparent; font-size:1.2rem; line-height:1.5; margin-top:2rem; min-height:2rem; padding-left:1rem; }
.message.error { border-color:#e51e3a; color:#a40c24; }
.message.success { border-color:#008995; color:#006c74; }
.loading { font-size:1.2rem; font-weight:700; letter-spacing:.1em; padding:5rem 0; }
.account-data { background:#fff; margin:0 0 4rem; padding:1rem 2.5rem; }
.account-data div { align-items:center; border-bottom:.1rem solid #d6dcda; display:flex; justify-content:space-between; padding:1.8rem 0; }
.account-data div:last-child { border:0; }
.account-data dt { color:var(--muted); font-size:1.1rem; text-transform:uppercase; }
.account-data dd { font-size:1.3rem; font-weight:700; margin:0; }
#account-view h3 { font-size:1.6rem; margin:0 0 2rem; }
.logout { background:none; border:0; color:#a40c24; cursor:pointer; font-size:1.1rem; font-weight:700; margin-top:3rem; padding:0; text-decoration:underline; text-underline-offset:.6rem; }
[hidden] { display:none !important; }
@media (max-width:850px) { .auth-shell { grid-template-columns:1fr; } .auth-intro { min-height:48rem; padding:7rem 3rem; } .auth-intro::after { bottom:4rem; height:10rem; right:3rem; width:12rem; } .auth-card { padding:5rem 3rem 8rem; } }