/* ═══════════════════════════════════════════════════════════════════════
   Inloggningen (/admin/login/) - första rummet i samma hus som panelen.

   Samma tokens och storlekar som manage.css, men bara det som sidan
   behöver. Länkas inte ihop med panelens CSS: den är skriven för skalet
   med skena och topplist, och skulle bara dra in regler som inte gäller.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme:light;
  --surface:#fff; --surface-2:#F7F9FC; --line:#E2E7EF; --line-strong:#CBD2DE;
  --ink:#0D172E; --ink-2:#3C4760; --ink-3:#6B7690;
  --accent:#4DD97D; --accent-fg:#06240F; --accent-deep:#1E8A45; --accent-soft:#E6F9EC; --link:#186F92;
  --danger:#B91C1C; --danger-soft:#FDECEC; --warn:#8A5A00; --warn-soft:#FEF5D6;
  --rail:#0A1226; --rail-ink:#D6DEEA; --rail-ink-2:#8A97B2;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --fs-xs:15px; --fs-sm:16px; --fs:18px; --fs-lg:24px; --fs-xl:32px;
  --r:14px; --r-sm:10px;
  --shadow-lg:0 24px 60px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;font-family:var(--font);font-size:var(--fs);line-height:1.55;color:var(--ink);
  -webkit-font-smoothing:antialiased;
  background:var(--rail);
  background-image:radial-gradient(700px 460px at 15% -5%,rgba(77,217,125,.16),transparent 62%),
                   radial-gradient(700px 460px at 105% 105%,rgba(44,168,211,.16),transparent 62%)}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.wrap{width:100%;max-width:480px;margin:0 auto;padding:9vh 16px 48px}
.mark{display:block;text-align:center;color:#fff;font-size:var(--fs-lg);font-weight:800;letter-spacing:-.01em}
.mark-sub{display:block;text-align:center;margin-top:4px;font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--rail-ink-2)}

.card{margin-top:26px;background:var(--surface);border-radius:var(--r);padding:34px;box-shadow:var(--shadow-lg)}
h1{margin:0;font-size:var(--fs-xl);font-weight:800;letter-spacing:-.025em;line-height:1.15;text-wrap:balance}
.lede{margin:8px 0 26px;color:var(--ink-2);font-size:var(--fs)}

.flash{display:flex;gap:13px;align-items:flex-start;padding:16px 22px;border-radius:var(--r);margin:0 0 20px;
  font-size:var(--fs-sm);font-weight:600;line-height:1.5}
.flash.error{background:var(--danger-soft);color:var(--danger)}
.flash.warning{background:var(--warn-soft);color:var(--warn)}
.flash svg{flex:0 0 auto;margin-top:2px}
.flash p{margin:0}
.flash p + p{margin-top:6px}

.field{margin-bottom:20px}
label.f{display:block;margin-bottom:8px;font-size:var(--fs-xs);font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2)}
.field input{width:100%;padding:15px 16px;border:2px solid var(--line-strong);border-radius:var(--r-sm);
  background:#fff;color:var(--ink);font-size:var(--fs)}
.field input::placeholder{color:#A3ACBD}
.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.field.has-error input{border-color:var(--danger)}
.pw{position:relative;display:block}
.pw input{padding-right:96px}
.pw .show{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:var(--surface-2);
  color:var(--ink-2);font-size:var(--fs-xs);font-weight:700;padding:9px 12px;border-radius:8px;cursor:pointer}
.pw .show:hover{background:var(--line)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;
  border:2px solid var(--accent);border-radius:var(--r-sm);padding:15px 24px;background:var(--accent);
  color:var(--accent-fg);font-size:var(--fs);font-weight:800;cursor:pointer;margin-top:6px}
.btn:hover{filter:brightness(1.05)}
.help{margin:18px 0 0;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.5}
.help a{color:var(--link);font-weight:700}

.foot{text-align:center;margin-top:24px;font-size:var(--fs-xs);color:var(--rail-ink-2);line-height:1.8}
.foot a{color:var(--rail-ink);font-weight:700}
.foot a:hover{color:#fff}
.status{display:inline-flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;background:#34D399;box-shadow:0 0 8px rgba(52,211,153,.6)}

@media (max-width:520px){
  .wrap{padding-top:5vh}
  .card{padding:24px 20px}
  h1{font-size:28px}
}