/* NeXtFile – Seite „Passwort festlegen / vergessen“ (Runde 1030, Paket BENUTZER). Hell/Dunkel nach System oder der
   gemerkten Wahl der Anmeldeseite (localStorage „theme“ -> html[data-theme]). Handy zuerst. */
:root{ --akzent:#3b5bdb; --akzent2:#4c6ef5; --tuerkis:#14B8B2; --bg1:#eef2fb; --bg2:#dbe4fb; --karte:#fff; --linie:#e3e8f2;
  --text:#1c2431; --leise:#6b7688; --feld:#f6f8fc; --rot:#e03131; --gruen:#2f9e44; color-scheme:light; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg1:#0e1116; --bg2:#161d2e; --karte:#171b22; --linie:#262c38; --text:#e7ecf3; --leise:#8b95a7;
    --feld:#10141b; --rot:#ff8787; --gruen:#8ce0a0; --tuerkis:#2FD0C9; color-scheme:dark; }
}
:root[data-theme="dark"]{ --bg1:#0e1116; --bg2:#161d2e; --karte:#171b22; --linie:#262c38; --text:#e7ecf3; --leise:#8b95a7;
  --feld:#10141b; --rot:#ff8787; --gruen:#8ce0a0; --tuerkis:#2FD0C9; color-scheme:dark; }
*{ box-sizing:border-box; }
html, body{ margin:0; min-height:100%; }
body{ font-family:"Segoe UI",system-ui,-apple-system,sans-serif; color:var(--text); background:linear-gradient(160deg,var(--bg1),var(--bg2));
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  padding:max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)); }
.karte{ width:400px; max-width:100%; background:var(--karte); border:1px solid var(--linie); border-radius:20px; padding:26px 26px 24px;
  box-shadow:0 24px 70px rgba(30,45,90,.16); }
.marke{ display:flex; align-items:center; gap:12px; margin:0 0 18px; }
.logo{ width:44px; height:44px; border-radius:13px; background:linear-gradient(135deg,var(--akzent),var(--akzent2)); display:block;
  box-shadow:0 10px 24px rgba(59,91,219,.38); flex:0 0 auto; }
.logo svg{ width:100%; height:100%; display:block; }
.marke b{ display:block; font-size:19px; letter-spacing:.2px; }
.marke i{ font-style:normal; }
.marke .x{ color:var(--tuerkis); }
.marke small{ display:block; font-size:12px; color:var(--leise); margin-top:2px; }
h1{ font-size:18px; margin:0 0 8px; }
p{ margin:0 0 10px; line-height:1.5; color:var(--leise); font-size:14px; }
p b{ color:var(--text); }
label{ display:block; font-size:12px; font-weight:600; color:var(--leise); margin:14px 0 6px; }
.feld{ position:relative; display:flex; align-items:center; }
input{ width:100%; padding:12px 13px; border-radius:11px; border:1px solid var(--linie); background:var(--feld); color:var(--text);
  font:inherit; font-size:16px; outline:none; transition:border-color .15s, box-shadow .15s; }
.feld input{ padding-right:84px; }
input:focus{ border-color:var(--akzent2); box-shadow:0 0 0 3px rgba(76,110,245,.18); }
.zeigen{ position:absolute; right:6px; border:0; background:transparent; color:var(--akzent); font:inherit; font-size:12.5px; font-weight:600;
  padding:6px 9px; border-radius:8px; cursor:pointer; }
.hinweis{ font-size:12.5px; color:var(--leise); margin:8px 0 0; }
button.los{ width:100%; margin-top:20px; padding:13px; border:0; border-radius:11px; cursor:pointer; font:inherit; font-size:15px; font-weight:600;
  background:linear-gradient(135deg,var(--akzent),var(--akzent2)); color:#fff; box-shadow:0 10px 24px rgba(59,91,219,.30); }
button.los:disabled{ opacity:.6; cursor:default; }
a.los{ display:block; text-align:center; text-decoration:none; margin-top:18px; padding:13px; border-radius:11px; font-weight:600; font-size:15px;
  background:linear-gradient(135deg,var(--akzent),var(--akzent2)); color:#fff; }
.fehler{ color:var(--rot); font-size:13px; min-height:18px; margin-top:12px; }
.ok{ color:var(--gruen); }
.leise-link{ display:block; text-align:center; margin-top:14px; color:var(--akzent); font-size:13px; text-decoration:none; }
.leise-link:hover{ text-decoration:underline; }
.symbol{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; margin:2px 0 12px; font-size:26px; }
.symbol.gut{ background:rgba(47,158,68,.12); color:var(--gruen); }
.symbol.weg{ background:rgba(224,49,49,.10); color:var(--rot); }
.symbol svg{ width:28px; height:28px; }
.ring{ width:28px; height:28px; margin:18px auto; border-radius:50%; border:3px solid var(--linie); border-top-color:var(--akzent);
  animation:dreh .8s linear infinite; }
@keyframes dreh{ to{ transform:rotate(360deg); } }
.fuss{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px; font-size:11.5px; color:var(--leise); }
#version{ font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
@media (max-width:440px){ .karte{ padding:22px 18px 20px; border-radius:18px; } }