:root { --portal:#1769e0; --portal-dark:#07182d; --portal-soft:#eaf3ff; --ink:#17263c; --muted:#708097; --line:#dce6f1; --red:#c93649; --green:#087b58; }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; color:var(--ink); font-family:Inter,"Segoe UI",sans-serif; background:#f4f8fd; }
.portal { min-height:100vh; display:grid; grid-template-columns:minmax(310px,.92fr) minmax(440px,1.08fr); }
.portal-brand { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(32px,5vw,72px); color:#fff; background:linear-gradient(145deg,var(--portal-dark),color-mix(in srgb,var(--portal) 70%,#07182d)); }
.portal-brand::before,.portal-brand::after { content:""; position:absolute; border:1px solid rgba(255,255,255,.16); border-radius:50%; }
.portal-brand::before { width:360px;height:360px;right:-150px;bottom:-125px; }.portal-brand::after { width:210px;height:210px;left:-110px;top:22%; }
.brand { position:relative;z-index:1;display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none;font-size:1.15rem;font-weight:800; }.brand-mark { width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2); }
.welcome { position:relative;z-index:1;max-width:470px; }.eyebrow { text-transform:uppercase;letter-spacing:.15em;font-size:.72rem;font-weight:800;color:rgba(255,255,255,.72); }.welcome h1 { margin:16px 0;font-size:clamp(2.4rem,4.5vw,4rem);line-height:1.06;letter-spacing:-.045em; }.welcome p { max-width:410px;color:rgba(255,255,255,.78);line-height:1.65; }
.boundary { position:relative;z-index:1;font-size:.78rem;color:rgba(255,255,255,.72); }.boundary strong { color:#fff; }
.form-panel { display:grid;place-items:center;padding:32px; }.form-wrap { width:min(100%,430px); }.mobile-brand { display:none;color:var(--portal-dark);margin-bottom:42px; }.mobile-brand .brand-mark { color:#fff;background:var(--portal); }
h2 { margin:0 0 8px;font-size:1.9rem;letter-spacing:-.035em; }.subtitle { margin:0 0 26px;color:var(--muted);line-height:1.55; }
.tabs { display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);margin-bottom:24px; }.tab { padding:12px;border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);font-weight:700;cursor:pointer; }.tab.active { color:var(--portal);border-color:var(--portal); }
form { display:none; } form.active { display:block; }.field { margin-bottom:17px; }.field label { display:block;margin-bottom:7px;font-size:.78rem;font-weight:700;color:#43536a; }.field input { width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:9px;font:inherit;outline:none; }.field input:focus { border-color:var(--portal);box-shadow:0 0 0 4px color-mix(in srgb,var(--portal) 12%,transparent); }
.password-row { display:flex;justify-content:space-between;align-items:baseline; }.text-button { border:0;background:none;color:var(--portal);font-weight:700;cursor:pointer; }.submit { width:100%;padding:14px;border:0;border-radius:9px;background:var(--portal);color:#fff;font-weight:800;cursor:pointer;box-shadow:0 10px 24px color-mix(in srgb,var(--portal) 25%,transparent); }.submit:disabled { opacity:.6;cursor:wait; }
.message { min-height:22px;margin:15px 0 0;text-align:center;font-size:.84rem;line-height:1.5;color:var(--muted); }.message.error { color:var(--red); }.message.success { color:var(--green); }.switch-note { margin-top:20px;text-align:center;color:var(--muted);font-size:.76rem;line-height:1.5; }.switch-note a { color:var(--portal);font-weight:700; }
@media(max-width:760px){.portal{display:block}.portal-brand{display:none}.form-panel{min-height:100vh;padding:24px}.mobile-brand{display:flex}.form-wrap{width:min(100%,430px)}}