/* Current NunaVPN light palette, typefaces and control sizes. */
:root {
  color-scheme: light;
  --bg: #edeff4; --surface: #fff; --field: #f4f6fa; --fg: #0d1017;
  --muted: #5c606c; --line: #dfe3eb; --brand: #5143d7; --blue: #006faf; --error: #be2932;
  font-family: Onest, "Segoe UI", system-ui, sans-serif;
  color: var(--fg); background: var(--bg); -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
a { color: var(--brand); text-underline-offset: 4px; }
button, a, input { -webkit-tap-highlight-color: transparent; }
svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 2; padding: 12px; background: white; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.auth-screen {
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 40px 20px;
  background: radial-gradient(ellipse at 18% 12%, #dddaf9 0, transparent 48%), radial-gradient(ellipse at 90% 88%, #daedf7 0, transparent 45%), var(--bg);
}
.auth-card { width: 100%; max-width: 500px; border: 1px solid #e0e1ef; border-radius: 24px; background: var(--surface); box-shadow: 0 24px 70px rgba(44, 44, 85, .11), 0 3px 12px rgba(30, 36, 60, .035); }
.auth-brand { display: flex; align-items: center; gap: 12px; min-height: 82px; padding: 16px 30px; border-bottom: 1px solid var(--line); border-radius: 24px 24px 0 0; background: linear-gradient(110deg, #f6f4ff, #f3f9ff); }
.auth-brand img { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; object-fit: contain; }
.auth-brand strong { font: 700 18px Unbounded, Onest, sans-serif; letter-spacing: -.6px; }
.brand-caption { margin-left: auto; font-size: 12px; color: var(--muted); }
.auth-content { padding: 30px; min-width: 0; }
.auth-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 22px; border: 1px solid #dfdcf9; border-radius: 16px; color: var(--brand); background: linear-gradient(135deg, #efedff, #edf6ff); }
.auth-icon svg { width: 26px; }
.eyebrow { margin: 0 0 10px; color: var(--brand); font-size: 12px; font-weight: 600; }
h1 { margin: 0; font: 700 30px/1.22 Unbounded, Onest, sans-serif; letter-spacing: -.7px; overflow-wrap: anywhere; }
.message { margin: 13px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.reset-form[hidden] { display: none; }
.reset-form { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 26px; }
.reset-field { margin: 0 0 8px 2px; font-size: 13px; font-weight: 600; }
.input-wrap { display: flex; align-items: center; min-width: 0; min-height: 54px; border: 1px solid var(--line); border-radius: 13px; background: var(--field); transition: border-color .16s, box-shadow .16s; }
.input-wrap > svg { flex: 0 0 20px; width: 20px; margin-left: 15px; color: #777c8a; }
.input-wrap input { width: 100%; min-width: 0; min-height: 52px; padding: 12px; border: 0; border-radius: 13px; outline: 0; color: var(--fg); background: transparent; font-size: 16px; }
.input-wrap input::placeholder { color: #818592; opacity: 1; }
.input-wrap:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(81, 67, 215, .14); }
.field-hint { margin: 8px 2px 20px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.reset-error { margin: 12px 0 0; color: var(--error); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.reset-error:empty { display: none; }
.primary-button { min-height: 54px; width: 100%; margin-top: 22px; padding: 15px 16px; border: 0; border-radius: 13px; color: white; background: linear-gradient(135deg, var(--brand), var(--blue)); font-size: 15px; font-weight: 600; line-height: 1.5; cursor: pointer; box-shadow: 0 9px 22px rgba(81, 67, 215, .2); transition: filter .16s, transform .16s; overflow-wrap: anywhere; }
.primary-button:hover { filter: brightness(1.07); }
.primary-button:active { transform: scale(.99); }
.primary-button:disabled { opacity: .65; cursor: wait; }
.primary-button:focus-visible, a:focus-visible { outline: 3px solid #006faf; outline-offset: 4px; }
.note { margin: 22px 0 0; font-size: 12px; line-height: 1.55; color: var(--muted); overflow-wrap: anywhere; }
.auth-footer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 8px; padding: 15px 22px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.auth-footer a { display: inline-flex; min-height: 36px; align-items: center; gap: 5px; font-weight: 600; text-decoration: none; }
.auth-footer a:hover { text-decoration: underline; }
.page-note { margin: 22px 0 0; padding: 0 8px; color: var(--muted); font-size: 12px; line-height: 1.5; text-align: center; }
@media (max-width: 540px) {
  .auth-screen { justify-content: flex-start; padding: 20px 12px; padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .auth-card { border-radius: 20px; }
  .auth-brand { min-height: 74px; padding: 14px 22px; border-radius: 20px 20px 0 0; }
  .auth-content { padding: 24px 22px; }
  .auth-icon { margin-bottom: 20px; }
  h1 { font-size: 25px; letter-spacing: -.5px; }
  .message { font-size: 14px; }
  .auth-footer { padding: 12px 18px; }
}
@media (max-width: 360px) { .auth-brand, .auth-content { padding-left: 18px; padding-right: 18px; } .brand-caption { display: none; } h1 { font-size: 23px; } }
@media (max-height: 680px) { .auth-screen { justify-content: flex-start; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }