:root{
  --bg:#0f172a; --panel:#1e293b; --panel2:#273449; --line:#334155;
  --text:#e2e8f0; --muted:#94a3b8; --accent:#38bdf8; --accent2:#22c55e;
  --warn:#f59e0b; --chip:#0ea5e9; --danger:#ef4444;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--text);}
header{padding:24px 32px;border-bottom:1px solid var(--line);}
h1{margin:0;font-size:22px;font-weight:650;}
.sub{color:var(--muted);font-size:13px;margin-top:4px;}
main{padding:24px 32px;max-width:1100px;margin:0 auto;}

/* --- Navigation --- */
nav{display:flex;gap:6px;margin-top:14px;align-items:center;flex-wrap:wrap;}
.navlink{color:var(--muted);text-decoration:none;font-size:14px;padding:7px 14px;
      border-radius:8px;border:1px solid transparent;}
.navlink:hover{color:var(--text);background:var(--panel);}
.navlink.active{color:var(--accent);border-color:var(--line);background:var(--panel);font-weight:600;}
.navspacer{flex:1;min-width:12px;}

/* --- Sprachschalter: zwei Seiten mit gleitendem Knopf --- */
.langtoggle{position:relative;display:inline-flex;background:var(--panel2);
      border:1px solid var(--line);border-radius:999px;padding:3px;flex:none;
      user-select:none;}
.langtoggle:hover{border-color:var(--accent);}
.lt-knob{position:absolute;top:3px;left:3px;width:calc(50% - 3px);height:calc(100% - 6px);
      background:var(--accent);border-radius:999px;pointer-events:none;
      transition:transform .18s cubic-bezier(.4,.1,.2,1);}
/* translateX(100%) entspricht genau der halben Innenbreite, da beide
   Seiten per flex:1 exakt gleich breit sind. */
.langtoggle[data-lang="en"] .lt-knob{transform:translateX(100%);}
.lt-opt{position:relative;z-index:1;flex:1 1 0;min-width:34px;text-align:center;
      background:none;border:none;padding:4px 10px;border-radius:999px;
      color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.03em;
      cursor:pointer;transition:color .18s;}
.lt-opt:hover{border-color:transparent;color:var(--text);}
.langtoggle[data-lang="de"] .lt-opt[data-set="de"],
.langtoggle[data-lang="en"] .lt-opt[data-set="en"]{color:#04293b;}
.whoami{color:var(--muted);font-size:13px;}
.rolechip{background:var(--accent);color:#04293b;border-radius:999px;padding:1px 9px;
      font-size:11px;font-weight:700;margin-left:4px;}
/* Dashboard-Zugang: kennzeichnen, aber nicht wie Admin-Rechte aussehen lassen */
.rolechip.neutral{background:var(--panel2);color:var(--muted);border:1px solid var(--line);}
.navbtn{padding:6px 13px;font-size:12px;}
input[type=password]{background:var(--panel);border:1px solid var(--line);color:var(--text);
      padding:10px 14px;border-radius:10px;font-size:14px;font-family:inherit;}
input[type=password]:focus{outline:none;border-color:var(--accent);}

/* --- Buttons & Felder --- */
button{background:var(--panel2);border:1px solid var(--line);color:var(--text);padding:9px 16px;
      border-radius:10px;cursor:pointer;font-size:13px;}
button:hover{border-color:var(--accent);}
button.primary{background:var(--accent);color:#04293b;border-color:var(--accent);font-weight:600;}
button.danger{background:transparent;border-color:#7f1d1d;color:#fca5a5;}
button.danger:hover{border-color:var(--danger);background:#7f1d1d;color:#fff;}
button:disabled{opacity:.45;cursor:not-allowed;}
button.primary:disabled{background:var(--panel2);color:var(--muted);border-color:var(--line);}
input[type=text]{background:var(--panel);border:1px solid var(--line);color:var(--text);
      padding:10px 14px;border-radius:10px;font-size:14px;font-family:inherit;}
input[type=text]:focus{outline:none;border-color:var(--accent);}
input.mono{font-family:ui-monospace,Consolas,monospace;font-size:13px;}
input.bad{border-color:var(--danger);}

.toolbar{display:flex;gap:12px;align-items:center;margin:20px 0;flex-wrap:wrap;}
.toolbar input[type=text]{flex:1;min-width:220px;}

.hidden{display:none!important;}
.err{background:#7f1d1d;border:1px solid #b91c1c;padding:12px 16px;border-radius:10px;margin:14px 0;}
.ok-msg{background:#14532d;border:1px solid #16a34a;padding:12px 16px;border-radius:10px;margin:14px 0;}
.token{font-family:ui-monospace,Consolas,monospace;font-size:11px;color:var(--muted);}

.section-divider{display:flex;align-items:center;gap:14px;margin:30px 0 4px;}
.section-divider::before,.section-divider::after{content:"";flex:1;height:2px;background:var(--line);}
.section-divider span{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
      color:var(--accent);white-space:nowrap;}

.card{flex:1 1 0;background:var(--panel);border:1px solid var(--line);border-radius:12px;
      padding:16px 20px;min-width:160px;}
.card .n{font-size:28px;font-weight:700;}
.card .l{color:var(--muted);font-size:12px;margin-top:2px;}
.cards{display:flex;gap:14px;margin:18px 0;flex-wrap:wrap;}

.box{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin:18px 0;}
.box-title{font-size:14px;font-weight:600;color:var(--muted);margin-bottom:14px;}
