/* Gedeelde stijl voor de losse inlog/registratie-pagina's (login, verify,
   pin-instellen). Bewust een eigen, kleine stylesheet i.p.v. het hergebruiken
   van style.css: die is toegesneden op het canvas/widget-systeem (o.a.
   overflow:hidden op body) en veel te groot voor een simpel formulier. Kleuren
   zijn dezelfde tokens als het donkere thema in style.css, zodat het visueel
   bij de rest van de app past. */

:root {
  --ink: #f4f3ee;
  --ink-dim: rgba(244, 243, 238, 0.72);
  --glass-bg: rgba(10, 14, 20, 0.7);
  --glass-border: rgba(244, 243, 238, 0.22);
  --accent: #7fe7c4;
  --accent-warn: #ff8a65;
  --ui-font: -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 14px;
}

/* Zelfde contrastkleur-keuze als op het bord (widget-instellingen, zie
   accent-picker.js) - "mint" is de standaard en heeft dus geen eigen
   override nodig, zelfde waarden als in style.css. */
:root[data-accent="blauw"] {
  --accent: #7ecbe7;
}

:root[data-accent="lavendel"] {
  --accent: #b3a1e0;
}

:root[data-accent="framboos"] {
  --accent: #f28fb0;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: var(--ui-font);
  color: var(--ink);
  background-color: #0b0d12;
  background-image: radial-gradient(1.6px 1.6px at 12% 18%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 28% 62%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 46% 30%, #fff, transparent),
    radial-gradient(1px 1px at 63% 74%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 78% 22%, #fff, transparent),
    radial-gradient(1px 1px at 88% 58%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 8% 82%, #fff, transparent),
    radial-gradient(1px 1px at 55% 12%, #fff, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 360px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 28px 26px;
}

.auth-card h1 {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 700;
}

.auth-card p.auth-slogan {
  margin: 0 0 14px;
  font-size: 14px;
  font-style: italic;
  color: var(--accent);
}

.auth-card p.auth-sub {
  margin: 0 0 22px;
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.5;
}

.auth-field {
  margin-bottom: 16px;
}

.auth-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-dim);
  margin-bottom: 6px;
}

.auth-field input {
  width: 100%;
  font-family: var(--ui-font);
  font-size: 18px;
  color: var(--ink);
  background: rgba(244, 243, 238, 0.08);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 10px 12px;
}

.auth-field input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.auth-btn {
  width: 100%;
  font-family: var(--ui-font);
  font-size: 16px;
  font-weight: 700;
  color: #05261c;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.auth-btn:hover {
  background: #96f0d3;
}

.auth-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.auth-link-btn {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 14px;
  background: none;
  border: none;
  color: var(--ink-dim);
  font-family: var(--ui-font);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

.auth-link-btn:hover {
  color: var(--ink);
}

.auth-message {
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.auth-message--error {
  background: rgba(255, 138, 101, 0.15);
  border: 1px solid var(--accent-warn);
  color: #ffb499;
}

.auth-message--info {
  background: rgba(127, 231, 196, 0.12);
  border: 1px solid var(--accent);
  color: var(--ink);
}

.hidden {
  display: none;
}