:root {
  --bg: #10141a;
  --panel: #171d26;
  --line: #263140;
  --fg: #dde5ef;
  --dim: #8496ab;
  --accent: #4da3ff;
  --good: #57d38c;
  --bad: #ff6b6b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Kopfzeile */
.bar {
  display: flex; align-items: center; gap: 1.5rem;
  padding: .6rem 1.2rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.brand { font-weight: 600; letter-spacing: .3px; }
.brand .srv { color: var(--dim); font-weight: 400; font-size: .85em; }
.bar nav { display: flex; gap: 1rem; flex: 1; flex-wrap: wrap; }
.bar nav a { color: var(--fg); }
.bar nav a:hover { color: var(--accent); }
.me { display: flex; align-items: center; gap: .8rem; }
.who { color: var(--dim); font-size: .9em; }
.tier {
  background: var(--line); color: var(--fg);
  padding: .1rem .45rem; border-radius: 4px; font-size: .85em; margin-left: .3rem;
}

main { padding: 1.2rem; max-width: 1500px; }
h1 { font-size: 1.35rem; margin: 0 0 .3rem; }
h2 { font-size: 1.05rem; margin: 1.8rem 0 .6rem; }
.meta, .hint { color: var(--dim); font-size: .88em; margin: .2rem 0 1rem; }
.msg {
  background: #1d3a2a; border: 1px solid #2f5c43; color: #b7ecc9;
  padding: .5rem .8rem; border-radius: 6px;
}
.error {
  background: #3a1d1d; border: 1px solid #5c2f2f; color: #f3b9b9;
  padding: .5rem .8rem; border-radius: 6px;
}

/* -------------------------------------------------------------- Anmeldung */
body.centered {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 1rem;
}
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 1.4rem;
}
.card.narrow, .narrow { max-width: 420px; }
.login { width: 340px; display: flex; flex-direction: column; gap: .8rem; }
.login h1 { margin-bottom: .2rem; }

label { display: block; font-size: .9em; color: var(--dim); margin-bottom: .6rem; }
label.check { display: flex; align-items: center; gap: .4rem; }
input, select {
  width: 100%; margin-top: .25rem; padding: .45rem .6rem;
  background: #0d1116; color: var(--fg);
  border: 1px solid var(--line); border-radius: 6px; font: inherit;
}
input[type=checkbox] { width: auto; margin: 0; }
button {
  padding: .45rem .9rem; border-radius: 6px; border: 1px solid var(--line);
  background: var(--accent); color: #06121f; font: inherit; font-weight: 600;
  cursor: pointer;
}
button:hover { filter: brightness(1.1); }
button.danger { background: var(--bad); color: #2a0b0b; }
button.link {
  background: none; border: none; color: var(--dim);
  font-weight: 400; padding: 0; text-decoration: underline;
}
form.inline { display: inline; }

/* ---------------------------------------------------------------- Kacheln */
.tiles { display: flex; flex-wrap: wrap; gap: .9rem; margin: 1rem 0; }
.tile {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: .9rem 1.2rem; min-width: 170px;
}
.tile .n { font-size: 1.8rem; font-weight: 600; }
.tile .l { font-size: .9em; }
.tile .s { font-size: .78em; color: var(--dim); margin-top: .2rem; }

/* --------------------------------------------------------------- Tabellen */
.filter {
  display: flex; gap: .6rem; align-items: end; flex-wrap: wrap; margin-bottom: 1rem;
}
.filter input, .filter select { width: auto; min-width: 130px; }
.filter label { margin: 0; }

table { border-collapse: collapse; width: 100%; font-size: .92em; }
th, td { padding: .35rem .6rem; border-bottom: 1px solid var(--line); text-align: left; }
th { color: var(--dim); font-weight: 500; font-size: .85em; white-space: nowrap; }
tbody tr:hover { background: #1a212c; }
td.r, th.r { text-align: right; }
td.c { text-align: center; }
td.dim, .dim { color: var(--dim); }
td.small, .small { font-size: .86em; }
td.good { color: var(--good); font-weight: 600; }
td.nowrap { white-space: nowrap; }
.tag {
  background: var(--line); color: var(--dim);
  padding: 0 .35rem; border-radius: 4px; font-size: .8em;
}

table.admin input, table.admin select { width: auto; margin: 0; }
table.admin td { vertical-align: middle; }
.cols { display: flex; gap: 2.5rem; flex-wrap: wrap; align-items: start; }

@media (max-width: 720px) {
  .bar { gap: .6rem; }
  main { padding: .8rem; }
  table { font-size: .85em; }
}

/* ------------------------------------------------------- Warteschlange */
.state {
  padding: .1rem .45rem; border-radius: 4px;
  font-size: .82em; text-transform: uppercase; letter-spacing: .3px;
  background: var(--line); color: var(--dim);
}
.state.queued  { background: #2a3550; color: #9db8f0; }
.state.running { background: #3a3320; color: #ffd479; }
.state.done    { background: #1d3a2a; color: #8fe3b0; }
.state.failed  { background: #3a1d1d; color: #ff9c9c; }
.state.cancelled { background: #2b2b2b; color: #a0a0a0; }
.bad { color: var(--bad); }

/* ------------------------------------------------- Serverauswahl + Status */
.srvpick { display: flex; align-items: center; gap: .4rem; }
.srvpick label { margin: 0; font-size: .85em; }
.srvpick select { width: auto; margin: 0; padding: .2rem .4rem; font-size: .9em; }
.bar nav a.here { color: var(--accent); font-weight: 600; }

.statusbar {
  display: flex; align-items: center; gap: .6rem;
  padding: .35rem 1.2rem;
  background: #131922; border-bottom: 1px solid var(--line);
  font-size: .86em; color: var(--dim);
}
.statusbar strong { color: var(--fg); font-weight: 600; }
.sb-dot {
  width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--line); flex: none;
}
.sb-dot.live { background: #ffd479; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.sb-more { margin-left: auto; }

tr.faded td { opacity: .45; }
a.reset { font-size: .85em; align-self: center; }
.warn { color: #ffd479; }
button.secondary { background: var(--line); color: var(--fg); }