@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,500;0,600;0,700;1,500&display=swap');

:root { --paper:#f4f7fc; --surface:#ffffff; --ink:#15233b; --muted:#62718a; --line:#d9e2f0; --accent:#0066ff; --accent-light:#00bbff; --accent-soft:#e0edff; --brand-gradient:linear-gradient(135deg,#00bbff,#0066ff); --sage:#5f9d7c; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Be Vietnam Pro", sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(480px, 1.15fr) minmax(430px, .85fr); }
.auth-story { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 44px clamp(44px, 6vw, 94px); color:#eef3fb; background:#0f1d36; }
.auth-story::before { content:""; position:absolute; width:520px; height:520px; right:-230px; top:-230px; border:1px solid rgba(255,255,255,.09); border-radius:50%; box-shadow: 0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(255,255,255,.02); }
.auth-story::after { content:""; position:absolute; inset:auto -10% -32% 20%; height:60%; transform:rotate(-7deg); border-radius:50%; background:radial-gradient(circle at 40% 25%, rgba(0,140,255,.34), transparent 62%); }
/* Logo | NOTEBOOK straight on the dark panel */
.auth-brand { position:relative; z-index:1; display:flex; align-items:center; gap:14px; width:max-content; color:rgba(255,255,255,.72); text-decoration:none; }
.auth-brand > span:last-child { padding-left:14px; border-left:1px solid rgba(255,255,255,.22); }
/* Single-colour white version of logo.svg for dark backgrounds; the file itself is unchanged */
.auth-brand img { filter:brightness(0) invert(1); }
.auth-brand > span:last-child, .mobile-brand > span { font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:12px; }
.mobile-brand > span { color:var(--muted); }
/* logo.svg (99x72) has ~17px of empty space above and below the artwork at this width;
   negative margins absorb it without clipping any of the logo. */
.auth-brand img, .mobile-brand img { display:block; width:112px; height:auto; margin:-13px 0 -14px; }
.brand-mark { display:grid; place-items:center; }
.story-copy { position:relative; z-index:1; max-width:680px; margin:auto 0 54px; }
.eyebrow, .auth-kicker { display:block; margin-bottom:18px; color:#7fb2f2; font-size:11px; font-weight:700; letter-spacing:.18em; }
.story-copy h1 { margin:0; font-size:clamp(44px,5.5vw,78px); line-height:1.08; letter-spacing:-.055em; }
.story-copy h1 em { color:#9dbff0; font-family:Georgia,serif; font-weight:400; }
.story-copy p { max-width:590px; margin:30px 0 0; color:#b8c5da; font-size:15px; line-height:1.85; }
.feature-row { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.feature-row article { min-height:122px; padding:17px; border:1px solid rgba(255,255,255,.1); border-radius:16px; background:rgba(255,255,255,.035); }
.feature-row article>span { display:block; margin-bottom:17px; color:#7fb2f2; font-size:11px; font-weight:700; }
.feature-row strong, .feature-row small { display:block; }
.feature-row strong { font-size:14px; }
.feature-row small { margin-top:7px; color:#93a4bf; font-size:12px; line-height:1.55; }
.privacy-note { position:relative; z-index:1; display:flex; align-items:center; gap:8px; margin:23px 0 0; color:#8697b3; font-size:12px; }
.privacy-note span { width:6px; height:6px; border-radius:50%; background:#86a27a; box-shadow:0 0 0 4px rgba(134,162,122,.12); }
.auth-panel { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:42px clamp(30px,5vw,76px); background:var(--surface); }
.auth-card { width:min(100%,430px); }
.mobile-brand { display:none; align-items:center; gap:10px; margin-bottom:42px; font-size:14px; }

.auth-heading h2 { margin:0; font-size:36px; letter-spacing:-.045em; }
.auth-heading p { margin:12px 0 28px; color:var(--muted); font-size:14px; line-height:1.6; }
.auth-kicker { margin-bottom:12px; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-bottom:25px; padding:4px; border-radius:12px; background:#e6edf8; }
.auth-tab { min-height:38px; border:0; border-radius:9px; color:var(--muted); background:transparent; font-size:13px; font-weight:600; }
.auth-tab.active { color:var(--ink); background:var(--surface); box-shadow:0 2px 8px rgba(54,48,37,.08); }
#authForm { display:grid; gap:16px; }
.field { display:grid; gap:8px; color:#3e4c63; font-size:13px; font-weight:600; }
.input-wrap { display:flex; align-items:center; min-height:50px; border:1px solid var(--line); border-radius:12px; background:#fff; transition:.18s ease; }
.input-wrap:focus-within { border-color:rgba(0,102,255,.7); box-shadow:0 0 0 4px rgba(0,102,255,.12); }
.input-wrap>svg { flex:0 0 auto; width:17px; margin-left:15px; fill:none; stroke:#8795ab; stroke-width:1.5; }
.input-wrap input { min-width:0; flex:1; height:48px; padding:0 13px; border:0; outline:0; color:var(--ink); background:transparent; font-size:14px; }
.input-wrap input::placeholder { color:#9aa7ba; }
.password-toggle { display:grid; place-items:center; width:42px; height:42px; margin-right:4px; border:0; border-radius:9px; color:#8795ab; background:transparent; }
.password-toggle:hover { background:#eef3fb; }
.password-toggle svg { width:17px; fill:none; stroke:currentColor; stroke-width:1.5; }
.auth-error { padding:11px 13px; border:1px solid #efb9ab; border-radius:10px; color:#a64634; background:#fff2ed; font-size:13px; line-height:1.5; }
.submit-button { display:flex; align-items:center; justify-content:center; gap:10px; min-height:50px; margin-top:3px; border:0; border-radius:12px; color:white; background:var(--brand-gradient); font-size:14px; font-weight:600; box-shadow:0 8px 20px rgba(0,102,255,.24); transition:.18s ease; }
.submit-button:hover { transform:translateY(-1px); filter:brightness(.94); box-shadow:0 12px 26px rgba(0,102,255,.32); }
.submit-button:disabled { cursor:wait; opacity:.65; transform:none; }
.submit-button svg { width:16px; fill:none; stroke:currentColor; stroke-width:1.8; }
.auth-switch { margin:24px 0 0; color:var(--muted); text-align:center; font-size:13px; }
.auth-switch button { padding:0; border:0; color:var(--accent); background:transparent; font-weight:600; }
.auth-footer { margin:48px 0 0; color:#9aa7ba; font-size:12px; }
[hidden] { display:none !important; }
@media (max-width:900px) { .auth-shell { grid-template-columns:1fr; } .auth-story { display:none; } .auth-panel { min-height:100vh; } .mobile-brand { display:flex; } }
@media (max-width:520px) { .auth-panel { justify-content:flex-start; padding:28px 22px; } .auth-card { margin:auto 0; } .auth-heading h2 { font-size:31px; } .auth-footer { margin-top:auto; padding-top:34px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; } }

/* Registration turned off by an admin */
.auth-tabs[hidden], .auth-switch[hidden], .auth-closed[hidden] { display: none; }
.auth-closed { margin: 24px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; text-align: center; }