.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 28px 0; }
.auth-page::after { content: "AUTH // SECURE ACCESS"; position: fixed; right: 22px; bottom: 18px; color: #39514e; font: 10px Consolas, monospace; letter-spacing: 1.4px; }
.auth-shell { width: min(460px, calc(100% - 28px)); }
.auth-shell.compact { width: min(420px, calc(100% - 28px)); }
.auth-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.auth-brand h1 { font-size: 24px; }
.auth-brand p { margin-top: 4px; color: var(--muted); font-size: 12px; }
.auth-panel { position: relative; padding: 25px; border: 1px solid var(--line); border-radius: 7px; background: rgba(11,23,27,.97); box-shadow: var(--shadow); }
.auth-panel::before { content: ""; position: absolute; top: -1px; left: 24px; width: 74px; height: 2px; background: var(--blue); box-shadow: 0 0 14px rgba(53,224,193,.55); }
.auth-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 24px; padding: 4px; border: 1px solid var(--line); border-radius: 5px; background: #071216; }
.auth-tabs button { min-height: 38px; border: 0; border-radius: 3px; color: #718b86; background: transparent; }
.auth-tabs button.active { color: var(--blue); background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--blue); font-weight: 700; }
.auth-form { display: grid; gap: 16px; }
.auth-form[hidden] { display: none; }
.auth-title { margin-bottom: 2px; }
.auth-title h2 { font-size: 19px; }
.auth-title p { margin-top: 5px; color: var(--muted); font-size: 12px; }
.auth-form label { display: grid; gap: 8px; color: #bdd0cc; font-size: 12px; font-weight: 700; }
.auth-form .primary-button { width: 100%; margin-top: 4px; }
.purchase-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border: 1px solid rgba(184,239,105,.4); border-radius: 5px; color: var(--lime); background: rgba(184,239,105,.07); text-decoration: none; font-size: 13px; font-weight: 700; transition: .18s ease; }
.purchase-button:hover { border-color: var(--lime); background: rgba(184,239,105,.13); box-shadow: 0 0 22px rgba(184,239,105,.1); }
.purchase-button svg { width: 16px; }
.purchase-button svg:last-child { width: 13px; margin-left: 2px; opacity: .7; }
.auth-result { min-height: 20px; margin-top: 14px; color: #7e9893; text-align: center; font-size: 12px; }
.auth-result.error { color: var(--danger); }
.auth-result.success { color: var(--lime); }
.auth-back { display: block; margin-top: 8px; color: var(--blue); text-align: center; text-decoration: none; font-size: 12px; }
.auth-back:hover { color: #73f2dc; }
@media (max-width: 520px) { .auth-panel { padding: 20px; } .auth-brand { margin-inline: 4px; } .auth-tabs button { font-size: 12px; } .auth-page::after { display: none; } }