/*
 * Lookas — Auth-Seiten (E-Mail-Aktionen). Geteilt von action.html + index.html.
 * Design-Tokens 1:1 aus dem App-/Landing-System (siehe web/src/styles.css,
 * packages/estimage_core/lib/theme/lookas_brand.dart, DESIGN.md):
 * neutraler Grund, 1px-Hairlines, KEINE Schatten/Transparenz auf Flächen,
 * Orange (#ED9E2F) als einziger Marken-Akzent.
 */

@font-face{
  font-family:'Fredoka';font-weight:400 700;font-style:normal;font-display:swap;
  src:url('/assets/fonts/fredoka.woff2') format('woff2');
}
@font-face{
  font-family:'Plus Jakarta Sans';font-weight:400 800;font-style:normal;font-display:swap;
  src:url('/assets/fonts/jakarta.woff2') format('woff2');
}

:root{
  --bg:#F4F4F5; --surface:#FFFFFF; --surface-2:#ECECEE; --border:#DEDEE2;
  --ink:#1B1B1D; --ink-soft:#6C6C72; --ink-faint:#9A9AA0;
  --orange:#ED9E2F; --orange-deep:#D8702E; --on-orange:#1A1409; --black:#0A0A0B;
  --bronze:#D4A373; --bronze-ink:#8A5A2B;
  --terra:#B0563C; --terra-soft:#F7E7E1; --terra-border:#E7C3B6;
  --acc-soft:#F6ECDD; --acc-border:#E7CBA3;
  --halo:rgba(237,158,47,0.13);
  --r-sm:14px; --r:18px; --r-lg:24px; --r-pill:999px;
  --font-display:'Fredoka','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  --font-body:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(0.22,1,0.36,1);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#161617; --surface:#202022; --surface-2:#2A2A2C; --border:#34343A;
    --ink:#F2F2F3; --ink-soft:#9B9BA2; --ink-faint:#75757C;
    --bronze-ink:#E0B98C;
    --terra:#D98A6E; --terra-soft:#2C2018; --terra-border:#4A3427;
    --acc-soft:#2A2416; --acc-border:#4A3D24;
    --halo:rgba(237,158,47,0.17);
  }
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--font-body);color:var(--ink);
  background:
    radial-gradient(120% 70% at 50% -12%, var(--halo), transparent 62%),
    var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100%;display:grid;place-items:center;padding:32px 20px;
}

.card{
  width:100%;max-width:404px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:40px 32px 34px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}

.brand{display:block;margin-bottom:26px;color:var(--ink);text-decoration:none}
.brand svg{height:42px;width:auto;display:block}

.eyebrow{
  font-family:var(--font-body);font-weight:700;font-size:0.72rem;
  letter-spacing:0.15em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 12px;
}
h1{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.55rem,5vw,1.95rem);line-height:1.12;letter-spacing:-0.01em;
  margin:0 0 12px;color:var(--ink);text-wrap:balance;
}
.lead{font-size:1rem;line-height:1.56;color:var(--ink-soft);margin:0 auto;max-width:31ch}
.lead b{color:var(--ink);font-weight:600}

.badge{
  width:76px;height:76px;border-radius:50%;display:grid;place-items:center;margin:2px 0 22px;
  border:1px solid var(--acc-border);background:var(--acc-soft);
}
.badge svg{width:38px;height:38px;color:var(--orange)}
.badge--err{border-color:var(--terra-border);background:var(--terra-soft)}
.badge--err svg{color:var(--terra)}

.actions{display:flex;flex-direction:column;gap:11px;width:100%;margin-top:26px}
.btn{
  appearance:none;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-display);font-weight:600;font-size:1.02rem;
  padding:14px 22px;border-radius:var(--r-pill);border:1px solid transparent;
  transition:transform .08s var(--ease),background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease);
}
.btn:active{transform:scale(0.975)}
.btn[disabled]{opacity:0.6;cursor:default}
.btn--primary{background:var(--orange);color:var(--on-orange)}
.btn--primary:hover:not([disabled]){background:var(--orange-deep)}
.btn--ghost{background:var(--surface);color:var(--ink);border-color:var(--border)}
.btn--ghost:hover{border-color:var(--bronze)}
.btn svg{width:18px;height:18px}

.hint{margin:16px 0 0;font-size:0.86rem;color:var(--ink-faint);line-height:1.5}
.hint a,.linklike{color:var(--bronze-ink);font-weight:600;text-decoration:none;cursor:pointer}
.hint a:hover,.linklike:hover{text-decoration:underline}

.field{width:100%;text-align:left;margin-top:22px}
.field>label{display:block;font-weight:600;font-size:0.9rem;margin:0 0 7px;color:var(--ink)}
.inputwrap{position:relative;display:flex;align-items:center}
.field input{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--surface-2);
  border:1.5px solid var(--border);border-radius:var(--r-sm);padding:13px 46px 13px 14px;
  transition:border-color .15s var(--ease),background .15s var(--ease);
}
.field input::placeholder{color:var(--ink-faint)}
.field input:focus{outline:none;border-color:var(--orange);background:var(--surface)}
.reveal{
  position:absolute;right:6px;appearance:none;border:0;background:transparent;cursor:pointer;
  width:34px;height:34px;display:grid;place-items:center;color:var(--ink-faint);border-radius:10px;
}
.reveal:hover{color:var(--ink-soft)}
.reveal svg{width:19px;height:19px}
.fieldnote{margin:9px 2px 0;font-size:0.82rem;color:var(--ink-faint)}
.field--error input{border-color:var(--terra)}
.errline{margin:9px 2px 0;font-size:0.84rem;color:var(--terra);font-weight:600;min-height:1.1em}

/* spinner (loading state) */
.spin{
  width:34px;height:34px;border-radius:50%;margin:6px 0 20px;
  border:3px solid var(--border);border-top-color:var(--orange);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

#view{width:100%;display:flex;flex-direction:column;align-items:center;animation:rise .35s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

:where(a,button,input):focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms !important}}
@media (max-width:520px){.card{padding:32px 22px 28px}}