/* Minimal, ohne Framework */
:root { --bg:#0b1020; --card:#121a33; --text:#e8ecff; --muted:#aab3d6; --line:#22305f; --accent:#5dd6ff; --danger:#ff6b6b; --ok:#51f2a0; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:#070b16; color:var(--text); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
header { background: var(--bg); border-bottom:1px solid var(--line); padding: 12px 16px; display:flex; gap:16px; align-items:center; }
header .brand { font-weight:700; }
header nav { display:flex; gap:12px; flex-wrap:wrap; }
header .spacer { flex:1; }
.container { max-width: 1200px; margin: 0 auto; padding: 18px 16px 40px; }
.card { background: var(--card); border:1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 14px; }
.hstack { display:flex; gap:12px; align-items:center; }
.vstack { display:flex; flex-direction:column; gap:10px; }
.grid { display:grid; gap:12px; grid-template-columns: repeat(12, 1fr); }
.col-12 { grid-column: span 12; }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }

@media (max-width: 900px){
  .col-6, .col-4, .col-3 { grid-column: span 12; }
}

h1,h2,h3 { margin: 0 0 10px; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; color: var(--muted); font-weight: 600; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align:left; vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 13px; }
tr:hover td { background: rgba(255,255,255,0.02); }

input, select, textarea { width: 100%; background: #0a1026; border: 1px solid var(--line); border-radius: 8px; padding: 10px; color: var(--text); }
textarea { min-height: 90px; }
label { display:block; margin: 10px 0 6px; color: var(--muted); font-size: 13px; }

.btn { display:inline-block; border:1px solid var(--line); background:#0a1026; padding: 9px 12px; border-radius: 8px; color: var(--text); cursor:pointer; }
.btn:hover { border-color: #3750a5; }
.btn.primary { background: rgba(93,214,255,0.12); border-color: rgba(93,214,255,0.35); }
.btn.danger { background: rgba(255,107,107,0.12); border-color: rgba(255,107,107,0.35); }
.badge { display:inline-block; padding: 3px 8px; border-radius: 999px; font-size: 12px; border:1px solid var(--line); color: var(--muted); }
.badge.ok { color: var(--ok); border-color: rgba(81,242,160,0.35); background: rgba(81,242,160,0.10); }
.badge.warn { color: #ffd166; border-color: rgba(255,209,102,0.35); background: rgba(255,209,102,0.10); }
.badge.danger { color: var(--danger); border-color: rgba(255,107,107,0.35); background: rgba(255,107,107,0.10); }

.flash { padding: 10px 12px; border-radius: 10px; border:1px solid var(--line); margin-bottom: 12px; }
.flash.ok { border-color: rgba(81,242,160,0.35); background: rgba(81,242,160,0.08); }
.flash.err { border-color: rgba(255,107,107,0.35); background: rgba(255,107,107,0.08); }

small.muted { color: var(--muted); }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; color: #d6dcff; }