:root {
      color-scheme: dark;
      --bg: #050807;
      --panel: #0d1713;
      --panel-2: #111f1a;
      --line: rgba(62, 211, 155, .28);
      --text: #eef8f3;
      --muted: #91a69b;
      --accent: #39d99a;
      --accent-2: #4f8cff;
      --danger: #ff5d65;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 24px;
      font: 15px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 20% 10%, rgba(57, 217, 154, .14), transparent 28%),
        radial-gradient(circle at 86% 20%, rgba(79, 140, 255, .13), transparent 26%),
        linear-gradient(145deg, #050807, #07100d 54%, #050807);
    }
    .card {
      width: min(420px, 100%);
      border: 1px solid var(--line);
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(17, 31, 26, .96), rgba(9, 16, 14, .98));
      box-shadow: 0 28px 90px rgba(0, 0, 0, .48);
      padding: 30px;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 24px;
    }
    .mark {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      overflow: hidden;
      background: #070b10;
      font-size: 22px;
      box-shadow: 0 10px 30px rgba(57, 217, 154, .24);
    }
    .mark img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    h1 {
      margin: 0;
      font-size: 24px;
      line-height: 1.1;
      letter-spacing: 0;
    }
    .sub {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 13px;
    }
    .error {
      margin: 0 0 16px;
      border: 1px solid rgba(255, 93, 101, .35);
      border-radius: 10px;
      padding: 10px 12px;
      color: #ffb1b5;
      background: rgba(255, 93, 101, .11);
      font-size: 13px;
    }
    form {
      display: grid;
      gap: 15px;
    }
    label {
      display: block;
      margin-bottom: 7px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 760;
      text-transform: uppercase;
      letter-spacing: .08em;
    }
    input[type="text"],
    input[type="password"] {
      width: 100%;
      min-height: 46px;
      border: 1px solid rgba(145, 166, 155, .3);
      border-radius: 10px;
      background: var(--panel-2);
      color: var(--text);
      padding: 0 12px;
      font: inherit;
      outline: none;
    }
    input:focus {
      border-color: rgba(57, 217, 154, .78);
      box-shadow: 0 0 0 3px rgba(57, 217, 154, .13);
    }
    .password-row {
      display: grid;
      grid-template-columns: 1fr 46px;
      gap: 8px;
    }
    /* Auge-Knopf (Phil, 01.09.2026: "haesslich, rahmen weg, nur das auge,
       wenn aktiv farbig, wenn inaktiv grau"). Kein Rahmen, kein Kasten --
       nur das Glyph. Die volle 46px-Spalte der .password-row bleibt die
       Trefferflaeche, das Glyph sitzt nur mittig darin: sichtbar klein,
       anfassbar gross (dasselbe Muster wie .watchlist-toggle-btn in
       positions.html).
       ZUSTAND: grau = Passwort verborgen, farbig = Passwort sichtbar. Damit
       das nicht ALLEIN an der Farbe haengt, wechselt zusaetzlich die Form
       des Glyphs (bi-eye <-> bi-eye-slash) -- dieselbe Regel wie beim
       Watchlist-Auge. */
    .icon-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      border: 0;
      background: none;
      color: var(--muted);
      cursor: pointer;
      font-size: 17px;
      padding: 0;
      transition: color .12s;
    }
    .icon-btn:hover { color: var(--text); }
    .icon-btn.ist-an { color: var(--accent); }
    .icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
    .remember {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--text);
      user-select: none;
      cursor: pointer;
      margin: 2px 0 4px;
      font-size: 14px;
      font-weight: 650;
      text-transform: none;
      letter-spacing: 0;
    }
    .remember input {
      width: 18px;
      height: 18px;
      accent-color: var(--accent);
    }
    button[type="submit"] {
      min-height: 48px;
      border: 0;
      border-radius: 10px;
      color: #06110d;
      background: linear-gradient(135deg, var(--accent), #7ee7bd);
      font: inherit;
      font-weight: 850;
      cursor: pointer;
      box-shadow: 0 16px 34px rgba(57, 217, 154, .22);
    }
    button[type="submit"]:hover { filter: brightness(1.04); }
    .foot {
      margin-top: 18px;
      color: var(--muted);
      font-size: 12px;
      text-align: center;
    }
    .foot a {
      color: var(--accent);
      text-decoration: none;
    }