/* Farben aus der Palette „Kino“ wie die Seite im Heimnetz (Feature a): Surface0/1/3, Text, Accent, AccentSoft, Signal. */
:root{color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:#0A0C10;color:#F3F1EA;font:16px/1.45 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
main{max-width:480px;margin:0 auto;padding:24px 20px 40px}
.brand{color:#F5B841;font-weight:700;font-size:15px;margin:0 0 8px}
h1{font-size:24px;line-height:1.25;margin:0 0 8px}
.lead{color:#B9B6AD;margin:0 0 20px}
.tabs{display:flex;background:#141821;border:1px solid #232A3E;border-radius:10px;padding:4px;margin:0 0 20px}
.tabs button{flex:1;height:40px;border:0;border-radius:8px;background:none;color:#9A9790;font:inherit;font-size:14px}
.tabs button.on{background:#232A3E;color:#F3F1EA;font-weight:600}
label{display:block;color:#B9B6AD;font-size:14px;margin:0 0 14px}
input{display:block;width:100%;height:48px;margin-top:6px;padding:0 14px;background:#141821;border:1px solid #232A3E;border-radius:10px;color:#F3F1EA;font:inherit}
input:focus{outline:2px solid #F3F1EA;outline-offset:1px}
input.bad{border-color:#FF6B60}
.err{color:#FF6B60;min-height:1.4em;margin:4px 0 8px;font-size:14px;font-weight:600}
.go{width:100%;height:52px;border:0;border-radius:10px;background:#F5B841;color:#0A0C10;font:inherit;font-weight:700}
.go:disabled{background:#232A3E;color:#9A9790}
.foot,.muted{color:#9A9790;font-size:13px}
.foot{margin-top:20px}
/* Sicherheitskonzept, Fall k: der Satz gegen nachgeahmte Seiten steht über den Feldern. */
.guard{margin:-8px 0 20px}
/* Sicherheitskonzept, Fall f: der Satz vor dem Senden, gut lesbar, nicht als Fehler. */
.trust{color:#B9B6AD;font-size:14px;margin:0 0 12px}
/* Code: ein Feld, Rahmen Accent, 19 SemiBold mit fester Breite. Ein Spiegel hinter dem durchsichtigen Text markiert ein
   falsches Zeichen mit heller Fläche (Bildvorgabe 23.10.). */
.codebox{position:relative;height:60px;margin:8px 0 4px;background:#141821;border:2px solid #F5B841;border-radius:10px}
.codebox.bad{border-color:#FF6B60}
.codebox .mirror,.codebox input{position:absolute;inset:0;margin:0;height:100%;padding:0 14px;border:0;border-radius:10px;
  font:600 19px/56px ui-monospace,'SF Mono',Menlo,Consolas,monospace;letter-spacing:.06em;white-space:pre}
.codebox .mirror{color:#F3F1EA;overflow:hidden}
.codebox .mirror mark{background:#4A2A2A;color:#FF6B60;border-radius:3px}
.codebox input{background:transparent;color:transparent;caret-color:#F3F1EA}
.codebox input:focus{outline:none}
#sent{text-align:center}
.check{width:72px;height:72px;border-radius:50%;background:#302818;margin:40px auto 16px;display:flex;align-items:center;justify-content:center}
.dots{display:flex;gap:6px;justify-content:center;margin:12px 0}
.dots span{width:6px;height:6px;border-radius:50%;background:#F5B841;opacity:.35;animation:dot 1.2s infinite}
.dots span:nth-child(2){animation-delay:.2s}
.dots span:nth-child(3){animation-delay:.4s}
.dots.off{display:none}
@keyframes dot{40%{opacity:1}}
/* Code-Seite: Der Hinweis steht direkt unter dem Feld; eine Meldung ersetzt ihn (Bildvorgabe 23.10.). */
#cerr:empty{display:none}
#cerr,#chint{margin:6px 0 24px}
#cerr:not(:empty)+#chint{display:none}
[hidden]{display:none!important}