*,*::before,*::after{box-sizing:border-box}
:root{--bg:#0b1020;--panel:#121a33;--panel2:#0f162b;--text:#eef2ff;--muted:#9aa4c7;--border:#223058;--accent:#4da6ff;}
/* Grundlayout */
body{margin:0;background:linear-gradient(180deg,var(--bg),#090d1a);color:var(--text);font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Arial;}
.container{max-width:1200px;margin:0 auto;padding:24px;}


/* Typo */
h1{margin:0 0 16px;font-size:28px;} h2{margin:0 0 12px;font-size:22px;}
.lead{color:var(--muted)}


/* Panels & Tables */
.panel{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--border);border-radius:12px;padding:16px;overflow:hidden;overflow:clip}
.table-wrap{overflow:auto;border-radius:8px;border:1px solid var(--border);}
.table{width:100%;border-collapse:separate;border-spacing:0;}
.table thead th{position:sticky;top:0;background:#101936;color:#c8d4ff;padding:10px 12px;border-bottom:1px solid var(--border);text-align:left;}
.table tbody td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.06);}
.table tbody tr:hover{background:rgba(124,192,255,.06);}


/* Metrics (aus dem Admin) */
.metrics{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:14px;margin-bottom:20px;}
.metric{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--border);border-radius:12px;padding:14px;cursor:pointer;transition:transform .05s ease, background .2s ease;}
.metric:hover{transform:translateY(-1px);} .metric.active{outline:2px solid #2d4cff;}
.metric h3{margin:0 0 6px;font-size:14px;color:var(--muted);} .metric .val{font-size:22px;font-weight:700;}


/* Buttons */
.btn{display:inline-block;border:1px solid var(--border);background:var(--panel2);color:var(--text);padding:10px 14px;border-radius:10px;text-decoration:none;cursor:pointer;}
.btn:hover{border-color:#324269;}
.btn-primary{background:var(--accent);color:#091225;border-color:transparent;font-weight:700;}


/* Forms */
.form-grid{display:grid;gap:12px}
.form-grid > *{min-width:0}
.panel .form-grid{overflow:hidden}
label{color:#c8d4ff}
input[type=email],input[type=password]{
  box-sizing:border-box !important;
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  max-width:100%;
  display:block;
  margin:0;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#0b1220;
  color:var(--text);
}


/* Alerts */
.alert{padding:10px 12px;border-radius:10px;margin-bottom:12px}
.alert-danger{background:#3f1b1b;border:1px solid #7f1d1d;color:#fecaca}
.alert-success{background:#052e1a;border:1px solid #14532d;color:#86efac}


/* Layout Helfer */
.row-2{display:grid;gap:20px;grid-template-columns:1.1fr .9fr;}
.row-2.is-single{grid-template-columns:1fr;}
.row-2 > :only-child{grid-column:1 / -1;}
@media (max-width:960px){ .metrics{grid-template-columns:repeat(2,1fr);} .row-2{grid-template-columns:1fr;} }
@media (max-width:520px){ .metrics{grid-template-columns:1fr;} }

/* === Admin UI extensions (Maultaschen) === */
:root{
  --bg: #0f1115;
  --card: #141823;
  --border: #21283a;
  --text: #eaeefb;
  --muted: #9aa3b2;
  --primary: #4098ff;
  --primary-contrast: #fff;
  --ok: #3fb950;
  --warn: #f5a33a;
  --err: #e5534b;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 12px;
  --radius-lg: 16px;
}

html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
a{color:var(--accent);text-decoration:underline;}
a:hover{color:#66b3ff;}

/* Layout */
.container{max-width:1280px;margin:0 auto;padding:24px}
.topbar{
  position:sticky;top:0;z-index:10;
  background:rgba(15,17,21,.8);
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--border);
}
.topbar .title,
.topbar h1{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  margin:0;
  font-size:20px;
  width:100%;
  text-align:center;
  pointer-events:none;
}
@media (max-width: 720px){
  .topbar .title,
  .topbar h1{
    position:static;
    transform:none;
    text-align:center;
    width:100%;
  }
}
.title{font-size:20px;margin:0}

/* Cards & rows */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  margin:16px 0;
  box-shadow:var(--shadow);
}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* Key/Value grid */
.kv{display:grid;grid-template-columns:180px 1fr;gap:8px 12px}
.small{font-size:12px}
.muted{color:var(--muted)}
code{background:#0b0f1a;padding:2px 6px;border-radius:6px;color:#cde6ff}

/* Buttons */
.btn{
  appearance:none;border:0;border-radius:10px;
  padding:10px 14px;font-weight:600;cursor:pointer;display:inline-flex;gap:8px;align-items:center;
  text-decoration:none;
}
.btn-primary{background:var(--primary);color:var(--primary-contrast)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-secondary{background:#24314d;color:#e7eeff;border:1px solid #2b3a5c}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* Alerts */
.alert{border-radius:10px;padding:12px}
.alert.error{background:#2a0f12;border:1px solid #6d1b23;color:#ffb4c2}
.alert.ok{background:#0f2a17;border:1px solid #1b6d2e;color:#b4ffca}
.alert.warn{background:#2a220f;border:1px solid #6d511b;color:#ffe2b4}

/* Streaming Log */
pre.log{
  background:#0b0b0b;color:#d0ffd0;
  padding:12px;border-radius:var(--radius);
  line-height:1.35;white-space:pre-wrap;
  border:1px solid #1b1b1b;
}

/* === /Admin UI extensions === */