:root {
  color-scheme: dark;

  --bg:            #0e1116;
  --bg-elevated:   #161b22;
  --bg-sunken:     #0d1117;
  --bg-input:      #0b0e13;
  --border:        #242b36;
  --border-strong: #323b49;

  --text:          #e6edf3;
  --text-muted:    #8b98a9;
  --text-faint:    #5d6a7a;

  --accent:        #f0883e;
  --accent-hover:  #ff9d55;
  --accent-dim:    rgba(240, 136, 62, 0.12);
  --on-accent:     #1a1207;

  --ok:      #3fb950;
  --ok-hover: #4cc75e;
  --on-ok:   #08210c;
  --warn:    #d29922;
  --danger:  #f85149;
  --info:    #58a6ff;

  
  --ok-text:     #7ee787;
  --warn-text:   #e3b341;
  --danger-text: #ff9d96;
  --info-text:   #79c0ff;
  --rcon-text:   #a5d6ff;

  
  --ok-bg:         rgba(63, 185, 80, 0.10);
  --ok-bg-strong:  rgba(63, 185, 80, 0.15);
  --ok-border:     rgba(63, 185, 80, 0.35);
  --warn-bg:       rgba(210, 153, 34, 0.12);
  --warn-bg-strong: rgba(210, 153, 34, 0.18);
  --warn-border:   rgba(210, 153, 34, 0.35);
  --warn-glow:     rgba(210, 153, 34, 0.25);
  --danger-bg:     rgba(248, 81, 73, 0.10);
  --danger-bg-strong: rgba(248, 81, 73, 0.18);
  --danger-border: rgba(248, 81, 73, 0.35);
  --danger-glow:   rgba(248, 81, 73, 0.30);
  --info-bg:       rgba(88, 166, 255, 0.10);
  --info-border:   rgba(88, 166, 255, 0.35);

  --console-bg:   #080b0f;
  --console-text: #b9c6d4;

  --hover-soft:  rgba(255, 255, 255, 0.04);
  --hover-mid:   rgba(255, 255, 255, 0.08);
  --overlay:     rgba(13, 17, 23, 0.72);
  --overlay-strong: rgba(13, 17, 23, 0.95);
  --shadow:      rgba(0, 0, 0, 0.45);

  --radius: 6px;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}


:root[data-theme="hell"] {
  color-scheme: light;

  --bg:            #f4f6f8;
  --bg-elevated:   #ffffff;
  --bg-sunken:     #eceff3;
  --bg-input:      #ffffff;
  --border:        #d5dae1;
  --border-strong: #b9c1cc;

  --text:          #161b22;
  --text-muted:    #5a6673;
  --text-faint:    #737f8d;

  --accent:        #c2560f;
  --accent-hover:  #a84a0c;
  --accent-dim:    rgba(194, 86, 15, 0.10);
  --on-accent:     #ffffff;

  --ok:      #1a7f37;
  --ok-hover: #166c2e;
  --on-ok:   #ffffff;
  --warn:    #9a6700;
  --danger:  #cf222e;
  --info:    #0969da;

  --ok-text:     #12682c;
  --warn-text:   #7d5300;
  --danger-text: #b4212c;
  --info-text:   #0757ac;
  --rcon-text:   #0757ac;

  --ok-bg:         rgba(26, 127, 55, 0.08);
  --ok-bg-strong:  rgba(26, 127, 55, 0.14);
  --ok-border:     rgba(26, 127, 55, 0.30);
  --warn-bg:       rgba(154, 103, 0, 0.10);
  --warn-bg-strong: rgba(154, 103, 0, 0.16);
  --warn-border:   rgba(154, 103, 0, 0.35);
  --warn-glow:     rgba(154, 103, 0, 0.20);
  --danger-bg:     rgba(207, 34, 46, 0.08);
  --danger-bg-strong: rgba(207, 34, 46, 0.14);
  --danger-border: rgba(207, 34, 46, 0.30);
  --danger-glow:   rgba(207, 34, 46, 0.22);
  --info-bg:       rgba(9, 105, 218, 0.08);
  --info-border:   rgba(9, 105, 218, 0.30);

  --hover-soft:  rgba(16, 22, 34, 0.04);
  --hover-mid:   rgba(16, 22, 34, 0.07);
  --overlay:     rgba(255, 255, 255, 0.82);
  --overlay-strong: rgba(255, 255, 255, 0.96);
  --shadow:      rgba(16, 22, 34, 0.14);
}


:root[data-design="kompakt"] {
  color-scheme: dark;

  --bg:            #080c11;
  --bg-elevated:   #111822;
  --bg-sunken:     #0b1017;
  --bg-input:      #070b10;
  --border:        #1b2430;
  --border-strong: #2a3644;

  --text:          #dfe9f3;
  --text-muted:    #8398ac;
  --text-faint:    #5a6d80;

  --accent:        #2dd4bf;
  --accent-hover:  #5eead4;
  --accent-dim:    rgba(45, 212, 191, 0.14);
  --on-accent:     #032620;

  --ok:      #34d399;
  --ok-hover: #4ade9f;
  --on-ok:   #032218;
  --warn:    #fbbf24;
  --danger:  #fb7185;
  --info:    #60a5fa;

  --ok-text:     #6ee7b7;
  --warn-text:   #fcd34d;
  --danger-text: #fda4af;
  --info-text:   #93c5fd;
  --rcon-text:   #99f6e4;

  --ok-bg:         rgba(52, 211, 153, 0.10);
  --ok-bg-strong:  rgba(52, 211, 153, 0.16);
  --ok-border:     rgba(52, 211, 153, 0.34);
  --warn-bg:       rgba(251, 191, 36, 0.11);
  --warn-bg-strong: rgba(251, 191, 36, 0.17);
  --warn-border:   rgba(251, 191, 36, 0.34);
  --warn-glow:     rgba(251, 191, 36, 0.24);
  --danger-bg:     rgba(251, 113, 133, 0.10);
  --danger-bg-strong: rgba(251, 113, 133, 0.17);
  --danger-border: rgba(251, 113, 133, 0.34);
  --danger-glow:   rgba(251, 113, 133, 0.28);
  --info-bg:       rgba(96, 165, 250, 0.10);
  --info-border:   rgba(96, 165, 250, 0.34);

  --console-bg:   #050809;
  --console-text: #b6c8d6;

  --hover-soft:  rgba(45, 212, 191, 0.05);
  --hover-mid:   rgba(45, 212, 191, 0.10);
  --overlay:     rgba(6, 10, 14, 0.76);
  --overlay-strong: rgba(6, 10, 14, 0.96);
  --shadow:      rgba(0, 0, 0, 0.6);
}

:root[data-design="oben"] {
  color-scheme: dark;

  --bg:            #101119;
  --bg-elevated:   #191b26;
  --bg-sunken:     #14151e;
  --bg-input:      #0d0e15;
  --border:        #262939;
  --border-strong: #363a4f;

  --text:          #e9e8f5;
  --text-muted:    #9b9ab5;
  --text-faint:    #6b6a85;

  --accent:        #a78bfa;
  --accent-hover:  #c4b5fd;
  --accent-dim:    rgba(167, 139, 250, 0.16);
  --on-accent:     #1b1039;

  --ok:      #4ade80;
  --ok-hover: #6ee7a0;
  --on-ok:   #04220f;
  --warn:    #f59e0b;
  --danger:  #f87171;
  --info:    #818cf8;

  --ok-text:     #86efac;
  --warn-text:   #fbbf24;
  --danger-text: #fca5a5;
  --info-text:   #a5b4fc;
  --rcon-text:   #c4b5fd;

  --ok-bg:         rgba(74, 222, 128, 0.10);
  --ok-bg-strong:  rgba(74, 222, 128, 0.16);
  --ok-border:     rgba(74, 222, 128, 0.32);
  --warn-bg:       rgba(245, 158, 11, 0.12);
  --warn-bg-strong: rgba(245, 158, 11, 0.18);
  --warn-border:   rgba(245, 158, 11, 0.34);
  --warn-glow:     rgba(245, 158, 11, 0.26);
  --danger-bg:     rgba(248, 113, 113, 0.10);
  --danger-bg-strong: rgba(248, 113, 113, 0.17);
  --danger-border: rgba(248, 113, 113, 0.32);
  --danger-glow:   rgba(248, 113, 113, 0.28);
  --info-bg:       rgba(129, 140, 248, 0.11);
  --info-border:   rgba(129, 140, 248, 0.34);

  --console-bg:   #0a0a12;
  --console-text: #c3c2d8;

  --hover-soft:  rgba(167, 139, 250, 0.06);
  --hover-mid:   rgba(167, 139, 250, 0.12);
  --overlay:     rgba(10, 10, 18, 0.74);
  --overlay-strong: rgba(10, 10, 18, 0.96);
  --shadow:      rgba(0, 0, 0, 0.55);

  --radius: 10px;
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
  color-scheme: light;

  --bg:            #f4f6f8;
  --bg-elevated:   #ffffff;
  --bg-sunken:     #eceff3;
  --bg-input:      #ffffff;
  --border:        #d5dae1;
  --border-strong: #b9c1cc;

  --text:          #161b22;
  --text-muted:    #5a6673;
  --text-faint:    #737f8d;

  --accent:        #c2560f;
  --accent-hover:  #a84a0c;
  --accent-dim:    rgba(194, 86, 15, 0.10);
  --on-accent:     #ffffff;

  --ok:      #1a7f37;
  --ok-hover: #166c2e;
  --on-ok:   #ffffff;
  --warn:    #9a6700;
  --danger:  #cf222e;
  --info:    #0969da;

  --ok-text:     #12682c;
  --warn-text:   #7d5300;
  --danger-text: #b4212c;
  --info-text:   #0757ac;
  --rcon-text:   #0757ac;

  --ok-bg:         rgba(26, 127, 55, 0.08);
  --ok-bg-strong:  rgba(26, 127, 55, 0.14);
  --ok-border:     rgba(26, 127, 55, 0.30);
  --warn-bg:       rgba(154, 103, 0, 0.10);
  --warn-bg-strong: rgba(154, 103, 0, 0.16);
  --warn-border:   rgba(154, 103, 0, 0.35);
  --warn-glow:     rgba(154, 103, 0, 0.20);
  --danger-bg:     rgba(207, 34, 46, 0.08);
  --danger-bg-strong: rgba(207, 34, 46, 0.14);
  --danger-border: rgba(207, 34, 46, 0.30);
  --danger-glow:   rgba(207, 34, 46, 0.22);
  --info-bg:       rgba(9, 105, 218, 0.08);
  --info-border:   rgba(9, 105, 218, 0.30);

  --hover-soft:  rgba(16, 22, 34, 0.04);
  --hover-mid:   rgba(16, 22, 34, 0.07);
  --overlay:     rgba(255, 255, 255, 0.82);
  --overlay-strong: rgba(255, 255, 255, 0.96);
  --shadow:      rgba(16, 22, 34, 0.14);
}
}



* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

[x-cloak] { display: none !important; }

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


.centered {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
}

.plattform { display: inline-flex; align-items: center; gap: 5px; }
.plattform-icon { width: 13px; height: 13px; flex: none; fill: currentColor; }

.brand {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 4px;
}
.brand h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.brand .version { color: var(--text-faint); font-size: 12px; font-family: var(--mono); }
.subtitle { color: var(--text-muted); margin: 0 0 26px; font-size: 13px; }


.field { margin-bottom: 16px; }
label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}
input[type="text"], input[type="password"], input[type="number"],
input[type="time"], input[type="date"], input[type="datetime-local"],
input[type="email"], input[type="search"], input[type="url"], select, textarea {
  width: 100%;
  padding: 9px 11px;
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}


select option {
  background: var(--bg-elevated);
  color: var(--text);
}
select option:checked {
  
  background: var(--accent);
  color: var(--on-accent);
}

@supports (appearance: base-select) {
  select, ::picker(select) { appearance: base-select; }
  select { display: flex; align-items: center; gap: 8px; cursor: pointer; }
  select::picker-icon { color: var(--text-muted); font-size: 11px; transition: transform 0.15s ease; }
  select:open::picker-icon { transform: rotate(180deg); }
  ::picker(select) {
    background: var(--bg-elevated);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: 0 12px 30px var(--shadow);
    padding: 4px;
    margin-top: 4px;
    max-height: min(60vh, 420px);
    overflow-y: auto;
  }
  select option {
    background: transparent;
    padding: 6px 10px;
    border-radius: calc(var(--radius) - 2px);
    font-size: 13.5px;
  }
  select option:hover,
  select option:focus-visible { background: var(--hover-mid); color: var(--text); outline: none; }
  select option:checked { background: var(--accent-dim); color: var(--text); font-weight: 600; }
  select option::checkmark { content: none; }
  select optgroup { font-size: 11px; color: var(--text-faint); }
  select optgroup legend { padding: 8px 10px 4px; font-weight: 600; letter-spacing: 0.04em; }
}

input[type="checkbox"], input[type="radio"], input[type="range"], progress {
  accent-color: var(--accent);
}


input[type="time"], input[type="date"], input[type="datetime-local"] {
  color-scheme: dark;
  font-family: var(--mono);
  
  max-width: 190px;
}
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  cursor: pointer;
  filter: invert(1);
}
input[type="time"]:hover::-webkit-calendar-picker-indicator,
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator {
  opacity: 1;
}
.hint { font-size: 12px; color: var(--text-faint); margin-top: 5px; }

button {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text);
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--text-faint); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
button.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
button.block { width: 100%; }
button.ghost { background: transparent; }


.alert {
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  margin-bottom: 16px;
  border: 1px solid;
}
.alert.error { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--danger-text); }
.alert.ok    { background: var(--ok-bg);  border-color: var(--ok-border);  color: var(--ok-text); }
.alert.warn  { background: var(--warn-bg); border-color: var(--warn-border);  color: var(--accent-hover); }


.app { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }

.sidebar {
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  padding: 20px 0;
  display: flex;
  flex-direction: column;
}
.sidebar .brand { padding: 0 20px 20px; margin: 0; border-bottom: 1px solid var(--border); }
.sidebar nav { padding: 14px 10px; flex: 1; }
.nav-item {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.nav-item:hover { background: var(--hover-soft); color: var(--text); }
.nav-item.active { background: var(--accent-dim); color: var(--accent); }

.sidebar-footer { padding: 14px 20px 0; border-top: 1px solid var(--border); font-size: 12px; }
.sidebar-footer .who { color: var(--text); margin-bottom: 2px; }
.sidebar-footer .role { color: var(--text-faint); font-family: var(--mono); margin-bottom: 10px; }

main { padding: 28px 32px; max-width: 1100px; }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.page-head h2 { margin: 0; font-size: 19px; font-weight: 600; }


.panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.panel-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.panel-body { padding: 16px; }

.empty { padding: 48px 24px; text-align: center; color: var(--text-muted); }
.empty .big { font-size: 15px; color: var(--text); margin-bottom: 6px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left;
  padding: 10px 16px;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
}
td { padding: 11px 16px; border-bottom: 1px solid var(--border); }
tr:last-child td { border-bottom: none; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-family: var(--mono);
  background: var(--hover-soft);
  color: var(--text-muted);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.running    { color: var(--ok); }
.badge.ok         { color: var(--ok); }
.badge.stopped    { color: var(--text-faint); }
.badge.installing,
.badge.updating,
.badge.starting   { color: var(--warn); }
.badge.crashed,
.badge.error      { color: var(--danger); }
.badge.uninstalled { color: var(--warn); }

.kv { display: grid; grid-template-columns: 190px 1fr; gap: 9px 20px; font-size: 13px; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; font-family: var(--mono); font-size: 12px; word-break: break-all; }

.ws-state { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-family: var(--mono); color: var(--text-faint); }
.ws-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); }
.ws-state.on { color: var(--ok); }


.steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--text-faint);
}
.steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.steps .nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 50%;
  border: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1;
}
.steps li.done { color: var(--ok); }
.steps li.done .nr { border-color: var(--ok-border); color: var(--ok); }


.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--shadow);
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 50;
  overflow-y: auto;
}
.modal {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.modal-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  font-weight: 600;
}
.modal-body { padding: 20px; overflow-y: auto; }
.modal-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.field.invalid input, .field.invalid select { border-color: var(--danger); }

.section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 22px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.section-label:first-child { margin-top: 0; }



.port-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  align-items: start;
}
.port-grid > .field {
  display: grid;
  grid-template-rows: auto auto auto;
  row-gap: 4px;
  align-content: start;
}
@supports (grid-template-rows: subgrid) {
  .port-grid > .field {
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
}
.port-grid > .field > label {
  min-height: 2.6em;
  display: flex;
  align-items: flex-end;
  margin-bottom: 0;
}
.port-grid > .field > .hint { align-self: start; }

.port-grid > .field > label > .label-text { display: block; }
.proto { font-family: var(--mono); font-size: 10px; color: var(--text-faint); margin-left: 5px; }

.progress-track {
  height: 6px;
  background: var(--bg-input);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.progress-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.25s ease;
}
.progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 7px;
}
.progress-meta .pct { font-family: var(--mono); color: var(--accent); }

.console {
  background: var(--console-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  padding: 12px 14px;
  height: 380px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--console-text);
}
.console .line-err { color: var(--danger-text); }
.console .line-ok { color: var(--ok-text); }
.console .line-cmd { color: var(--text-faint); }

.console .line-warn { color: var(--warn-text); }
.console .line-info { color: var(--info-text); }
.console .line-mark { color: var(--info-text); }
.console-empty { color: var(--text-faint); }

.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }
button.danger { border-color: var(--danger-border); color: var(--danger-text); }
button.danger:hover:not(:disabled) { border-color: var(--danger); background: var(--danger-bg); }
button.small { padding: 5px 11px; font-size: 12px; }

.crumb { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 13px; padding: 0; }
.crumb:hover { color: var(--text); }

tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--hover-soft); }

tr.needs-update td { background: var(--warn-bg); }
tr.needs-update td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
tr.running td { background: var(--ok-bg-strong); }
tr.running td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
tr.running.clickable:hover td { background: var(--ok-bg-strong); }
tr.crashed td { background: var(--danger-bg); }
tr.crashed td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
tr.crashed.clickable:hover td { background: var(--danger-bg); }

.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
.checkbox-row input { width: auto; }

.notice {
  font-size: 12px;
  color: var(--text-muted);
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: var(--radius);
  padding: 9px 12px;
  margin-bottom: 16px;
}


.game-thumb {
  width: 68px;
  height: 32px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--border);
  display: block;
  background: var(--bg-input);
}
.game-thumb.placeholder {
  display: grid;
  place-items: center;
  font-size: 9px;
  font-family: var(--mono);
  color: var(--text-faint);
  letter-spacing: 0.04em;
}

.game-header {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 22px;
}
.game-header img {
  width: 160px;
  height: 75px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
}
.game-header .titles { flex: 1; }
.game-header h2 { margin: 0 0 5px; font-size: 20px; font-weight: 600; }
.game-header .sub { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--text-faint); font-family: var(--mono); }

.tabs { display: flex; gap: 4px; }
.tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 0;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.console .line-in { color: var(--accent); }


.saved-cmds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip {
  background: var(--bg-elevated); border: 1px solid var(--border-strong); color: var(--text);
  border-radius: 20px; padding: 4px 12px; font: inherit; font-size: 12px; cursor: pointer;
  font-family: var(--mono);
}
.chip:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.chip:disabled { opacity: 0.45; cursor: not-allowed; }
.chip.edit { font-family: var(--sans); color: var(--text-muted); border-style: dashed; }
.saved-cmds-edit { margin-top: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.saved-cmd-row { display: grid; grid-template-columns: 180px 1fr auto; gap: 8px; margin-bottom: 8px; }
.saved-cmd-row input { width: 100%; }


.card-layout { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 20px; align-items: stretch; }
.card-layout > .server-card { align-self: start; }

.card-form { display: flex; flex-direction: column; }
.card-form > .row-actions { margin-top: auto; padding-top: 20px; }
.server-card { border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; background: var(--bg-sunken); }
.server-card-image { width: 100%; height: 150px; object-fit: cover; display: block; }
.server-card-body { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 6px; }
.server-card-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.server-card-game { color: var(--text-muted); font-size: 12px; margin-top: -4px; }
.server-card-address { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.server-card-address code { font-family: var(--mono); font-size: 14px; color: var(--accent); }
.server-card-connect { font-size: 12px; color: var(--text-muted); }
.server-card-desc { font-size: 13px; white-space: pre-line; margin-top: 4px; }
.server-card-ports { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; margin-top: 4px; font-family: var(--mono); }
.server-card-footer { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-faint); }
.server-card .dim { color: var(--text-faint); }
.card-form .field { display: block; margin-bottom: 12px; }
.card-form .field span { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.card-form input, .card-form textarea { width: 100%; }
@media (max-width: 900px) { .card-layout { grid-template-columns: 1fr; } }

.cmd-row { display: flex; gap: 8px; margin-top: 12px; }
.cmd-row input {
  flex: 1;
  font-family: var(--mono);
  font-size: 12px;
}
.cmd-row input:disabled { opacity: 0.5; }

button.ok { background: var(--ok); border-color: var(--ok); color: var(--on-ok); font-weight: 600; }
button.ok:hover:not(:disabled) { background: var(--ok-hover); border-color: var(--ok-hover); }

.uptime { font-family: var(--mono); font-size: 12px; color: var(--text-muted); }
.edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }


.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}
.setting-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
}
.setting-card .st-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.setting-card .st-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.setting-card .st-desc {
  font-size: 11.5px;
  color: var(--text-faint);
  line-height: 1.45;
  margin-bottom: 12px;
}
.setting-card .st-input { margin-top: auto; }
.setting-card.invalid { border-color: var(--danger); }
.setting-card.info-card { background: var(--info-bg); border-color: var(--info-border); }
.setting-card .st-unit { font-size: 11px; color: var(--text-faint); margin-left: 6px; font-family: var(--mono); }
.setting-card .st-range { font-size: 10.5px; color: var(--text-faint); font-family: var(--mono); margin-top: 5px; }


.toggle {
  position: relative;
  width: 42px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 11px;
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, border-color 0.15s;
}
.toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-faint);
  transition: transform 0.15s, background 0.15s;
}
.toggle.on { background: var(--ok-bg-strong); border-color: var(--ok); }
.toggle.on::after { transform: translateX(20px); background: var(--ok); }
.toggle:disabled { opacity: 0.45; cursor: not-allowed; }

.config-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  bottom: 0;
}
.config-bar .spacer { flex: 1; }


.config-files {
  font-family: var(--mono); font-size: 11px; color: var(--text-faint);
  text-transform: none; letter-spacing: 0; font-weight: 400;
  max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.config-layout { display: grid; grid-template-columns: 200px 1fr; align-items: start; }
.config-nav {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 8px; border-right: 1px solid var(--border);
  position: sticky; top: 0; align-self: stretch;
}
.config-nav-item {
  display: flex; align-items: center; gap: 8px;
  background: none; border: none; border-left: 2px solid transparent; border-radius: 0 var(--radius) var(--radius) 0;
  padding: 7px 10px; text-align: left; cursor: pointer;
  color: var(--text-muted); font-size: 12.5px; font-weight: 500; line-height: 1.3;
}
.config-nav-item span:first-child { flex: 1; }
.config-nav-item .count { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); }
.config-nav-item:hover { color: var(--text); background: var(--hover-soft); }
.config-nav-item.active { color: var(--accent); border-left-color: var(--accent); background: var(--hover-soft); }
.config-nav-item.invalid { color: var(--danger); }
.config-nav-item.invalid .count { color: var(--danger); }
.config-content { min-width: 0; }
@media (max-width: 900px) {
  .config-layout { grid-template-columns: 1fr; }
  .config-nav {
    flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border);
    position: static; padding: 8px;
  }
  .config-nav-item { white-space: nowrap; border-left: none; border-bottom: 2px solid transparent; border-radius: 0; }
  .config-nav-item.active { border-bottom-color: var(--accent); }
  .config-files { display: none; }
}

.oxide-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.oxide-version { font-family: var(--mono); font-size: 12px; }
.tag-update { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-border); padding: 2px 8px; border-radius: 20px; font-size: 11px; }
.tag-ok { background: var(--ok-bg-strong); color: var(--ok); border: 1px solid var(--ok-bg-strong); padding: 2px 8px; border-radius: 20px; font-size: 11px; }
.console .line-rcon { color: var(--rcon-text); }


.plugin-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.plugin-toolbar input[type="text"] { flex: 1; min-width: 200px; }
.plugin-toolbar select { width: auto; }

.plugin-list { display: flex; flex-direction: column; gap: 10px; }
.plugin-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.plugin-item.is-installed { border-color: var(--ok-border); }
.plugin-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--bg-input);
  border: 1px solid var(--border);
  flex: 0 0 auto;
}
.plugin-body { flex: 1; min-width: 0; }
.plugin-title { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plugin-meta { font-size: 11px; color: var(--text-faint); font-family: var(--mono); margin: 3px 0 6px; }
.plugin-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.plugin-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex: 0 0 auto; }

.pager { display: flex; align-items: center; gap: 12px; justify-content: center; margin-top: 18px; font-size: 12px; color: var(--text-muted); }
.tag-installed { background: var(--ok-bg-strong); color: var(--ok); border: 1px solid var(--ok-bg-strong); padding: 1px 7px; border-radius: 20px; font-size: 10px; }
.tag-manual { background: var(--hover-soft); color: var(--text-faint); border: 1px solid var(--border-strong); padding: 1px 7px; border-radius: 20px; font-size: 10px; }


.cmd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; }
.cmd-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cmd-card .cmd-title { font-size: 13.5px; font-weight: 600; }
.cmd-card .cmd-desc { font-size: 11.5px; color: var(--text-faint); line-height: 1.45; }
.cmd-card .cmd-args { display: flex; flex-direction: column; gap: 6px; }
.cmd-card input { font-size: 13px; padding: 7px 10px; }
.cmd-card .cmd-foot { display: flex; justify-content: flex-end; margin-top: auto; }
.cmd-preview { font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); word-break: break-all; }

.wipe-target {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.wipe-target.selected { border-color: var(--danger-border); background: var(--danger-bg); }
.wipe-target input[type="checkbox"] { width: auto; margin-top: 3px; }
.wipe-target .wt-title { font-size: 13.5px; font-weight: 600; }
.wipe-target .wt-desc { font-size: 11.5px; color: var(--text-faint); line-height: 1.45; margin: 3px 0 6px; }
.wipe-target .wt-files { font-family: var(--mono); font-size: 11px; color: var(--text-muted); }
.wipe-warning {
  background: var(--danger-bg);
  border: 1px solid var(--danger-glow);
  color: var(--danger-text);
  border-radius: var(--radius);
  padding: 10px 13px;
  font-size: 12.5px;
  margin-bottom: 16px;
  line-height: 1.5;
}


.role-pill {
  font-size: 10px;
  font-family: var(--mono);
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
}
.role-pill.admin { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
.row-disabled { opacity: 0.5; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

.assign-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.assign-item {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: 13px;
  cursor: pointer;
}
.assign-item input { width: auto; }
.assign-item.on { border-color: var(--ok-border); }

.sched-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.sched-item.off { opacity: 0.55; }
.sched-body { flex: 1; min-width: 0; }
.sched-title { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sched-meta { font-size: 11px; font-family: var(--mono); color: var(--text-faint); margin-top: 4px; }
.sched-last { font-size: 11.5px; margin-top: 5px; }
.sched-last.ok { color: var(--ok); }
.sched-last.fail { color: var(--danger); }

.sched-verlauf { margin-top: 8px; }
.sched-verlauf table { width: 100%; border-collapse: collapse; }
.sched-verlauf td { padding: 3px 10px 3px 0; border: 0; font-size: 12px; vertical-align: top; }
.link-knopf { background: none; border: 0; padding: 0; color: var(--text-muted); font-size: 12px; cursor: pointer; }
.link-knopf:hover { color: var(--accent); }
.tag-action { background: var(--hover-soft); border: 1px solid var(--border-strong); color: var(--text-muted); padding: 1px 8px; border-radius: 20px; font-size: 10px; }


.fw-rule {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--radius);
  background: var(--bg); border: 1px solid var(--border);
  margin-bottom: 6px; font-size: 13px;
}
.fw-rule .fw-port { font-family: var(--mono); font-size: 12px; color: var(--text-muted); margin-left: auto; }
.fw-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.fw-dot.on { background: var(--ok); }
.fw-dot.off { background: var(--text-faint); }

.acc-group { margin-bottom: 18px; }
.acc-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.acc-title { font-size: 14px; font-weight: 600; }
.acc-desc { font-size: 11.5px; color: var(--text-faint); line-height: 1.45; margin-bottom: 8px; }
.acc-entry {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 9px 12px; margin-bottom: 6px;
}
.acc-entry .acc-id { font-family: var(--mono); font-size: 12px; color: var(--text-muted); }
.acc-entry .acc-name { font-size: 13px; font-weight: 500; }
.acc-empty { font-size: 12px; color: var(--text-faint); padding: 6px 2px; }
.acc-form { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; align-items: end; }
@media (max-width: 900px) { .acc-form { grid-template-columns: 1fr; } }

.perm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }
.perm-item {
  display: flex; align-items: flex-start; gap: 9px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 9px 12px; cursor: pointer;
}
.perm-item input { width: auto; margin-top: 2px; }
.perm-item .perm-label { font-size: 13px; font-weight: 500; }
.perm-item .perm-desc { font-size: 11px; color: var(--text-faint); line-height: 1.4; }


.port-state {
  font-size: 10.5px;
  font-family: var(--mono);
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
}
.port-state.ok { color: var(--ok); background: var(--ok-bg-strong); }
.port-state.bad { color: var(--danger); background: var(--danger-bg); }




* { scrollbar-color: var(--border-strong) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 6px;
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
::-webkit-scrollbar-corner { background: transparent; }
.modal-body::-webkit-scrollbar-thumb,
.console::-webkit-scrollbar-thumb { border-color: var(--bg-elevated); }


.modal { max-width: min(760px, 94vw); max-height: 92vh; }
.modal.wide { max-width: min(940px, 96vw); }
.modal-body { max-height: calc(92vh - 130px); }


.console { height: clamp(240px, 46vh, 720px); }


.toolbar .ctl {
  min-width: 130px;
  padding: 9px 16px;
  font-size: 14px;
  justify-content: center;
  text-align: center;
}


.nav-group-label {
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 14px 12px 5px;
}
.nav-item.sub { padding-left: 26px; font-size: 12.5px; }
.nav-sep { height: 1px; background: var(--border); margin: 10px 8px; }
.shop-teaser { padding: 64px 24px; }
.help-steps { margin: 0 0 12px; padding-left: 22px; line-height: 1.55; }
.help-steps li { margin-bottom: 10px; }
.help-steps code { font-family: var(--mono); font-size: 12px; }
.shop-preis { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--accent); white-space: nowrap; }

.shop-actions { margin-top: auto; padding-top: 14px; display: flex; align-items: center; gap: 10px; justify-content: flex-end; }


.dash-reihe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 900px) { .dash-reihe { grid-template-columns: 1fr; } }

.zustand-liste { display: flex; flex-direction: column; gap: 10px; }
.zustand-zeile { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.zustand-zeile .punkt {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg);
}
.zustand-zeile.warn .punkt { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.zustand-zeile.bad .punkt { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg); }
.zustand-zeile .was { color: var(--text-muted); min-width: 108px; }
.zustand-zeile .wert { color: var(--text); }
.zustand-zeile .tat { margin-left: auto; }

.tipp-text { font-size: 13.5px; line-height: 1.65; color: var(--text); min-height: 62px; }
.tipp-fuss { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.tipp-fuss .hint { margin: 0; }

.spiel-reihe { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.spiel-kachel {
  display: block; padding: 0; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-sunken); overflow: hidden; cursor: pointer; text-align: left;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.spiel-kachel:hover { border-color: var(--accent); transform: translateY(-2px); }
.spiel-kachel img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.spiel-kachel .name { display: block; padding: 8px 10px; font-size: 12.5px; color: var(--text); }


.design-grid { display: grid; gap: 18px; }
.design-karte {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 1fr);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-sunken); overflow: hidden;
}
.design-bild {
  position: relative; display: block; padding: 0; border: 0; cursor: zoom-in;
  background: var(--console-bg); line-height: 0;
  border-right: 1px solid var(--border);
}

.design-bild { aspect-ratio: 32 / 15; }
.design-bild img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.design-bild:hover img { opacity: 0.88; }
.design-lupe {
  position: absolute; right: 10px; bottom: 10px;
  background: var(--overlay-strong); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 20px;
  padding: 4px 11px; font-size: 11px; font-family: var(--mono); line-height: 1.4;
}

.design-karte.paket { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-dim), 0 10px 26px var(--shadow); }
.design-karte.paket .design-bild { border-right-color: var(--accent); }
.design-karte.paket .design-fahne {
  position: absolute; left: 0; top: 14px; z-index: 1;
  background: var(--accent); color: var(--on-accent);
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 14px 5px 12px; border-radius: 0 3px 3px 0;
  box-shadow: 0 2px 10px var(--shadow);
}

.design-karte.paket .statt { color: var(--text-faint); text-decoration: line-through; font-size: 12px; margin-right: 6px; }


.marke-karte { border-color: var(--border-strong); background: var(--bg-elevated); }
.marke-karte .design-bild { border-right-color: var(--border-strong); }

.design-text { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }

.design-text .st-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.design-text .st-title { font-size: 15px; font-weight: 600; color: var(--text); }
.design-text .st-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin-bottom: 6px; }
.design-text .st-desc.dim { color: var(--text-faint); }


.galerie { position: relative; background: var(--console-bg); line-height: 0; }
.galerie img { width: 100%; height: auto; display: block; }
.galerie-pfeil {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 62px; padding: 0;
  background: var(--overlay-strong); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.galerie-pfeil:hover { border-color: var(--accent); color: var(--accent); }
.galerie-pfeil.links { left: 10px; }
.galerie-pfeil.rechts { right: 10px; }
.galerie-fuss { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 20px; }
.galerie-text { flex: 1; min-width: 240px; font-size: 13px; color: var(--text-muted); }
.galerie-punkte { display: flex; gap: 7px; }
.galerie-punkte button {
  width: 9px; height: 9px; padding: 0; border-radius: 50%;
  border: 1px solid var(--border-strong); background: transparent; cursor: pointer;
}
.galerie-punkte button.an { background: var(--accent); border-color: var(--accent); }


@media (max-width: 900px) {
  .design-karte { grid-template-columns: 1fr; }
  .design-bild { border-right: 0; border-bottom: 1px solid var(--border); }
  .design-bild img { aspect-ratio: 32 / 15; height: auto; }
}

@media (max-width: 700px) {
  .galerie-pfeil { width: 30px; height: 48px; font-size: 15px; }
}

.disk-plan { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 0 0 16px;
             padding: 10px 14px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; color: var(--text-muted); }
.disk-plan b { color: var(--text); font-family: var(--mono); }
.disk-plan.knapp { border-color: var(--warn-border); }
.disk-plan.zu_wenig { border-color: var(--danger-border); }
.disk-verdict { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; }
.disk-verdict.ok { background: var(--ok-bg-strong); color: var(--ok-text); }
.disk-verdict.knapp { background: var(--warn-bg-strong); color: var(--warn-text); }
.disk-verdict.zu_wenig { background: var(--danger-bg-strong); color: var(--danger-text); }

.version-kanal { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 20px; font-size: 10px; font-weight: 600;
                 letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; }
.version-kanal.beta { color: var(--warn); border: 1px solid var(--warn-border); }
.version-kanal.dev { color: var(--danger); border: 1px solid var(--danger-border); }

.restart-overlay { position: fixed; inset: 0; z-index: 1000; background: var(--console-bg); backdrop-filter: blur(3px);
                   display: flex; align-items: center; justify-content: center; animation: restart-fade 0.25s ease-out; }
.restart-card { text-align: center; padding: 36px 40px; max-width: 460px; }
.restart-title { font-size: 18px; font-weight: 600; margin-top: 18px; }
.restart-text { color: var(--text-muted); font-size: 13px; line-height: 1.5; margin-top: 10px; margin-bottom: 14px; }
.restart-ring { position: relative; width: 72px; height: 72px; margin: 0 auto; }
.restart-ring div { position: absolute; inset: 0; border: 3px solid transparent; border-top-color: var(--accent); border-radius: 50%;
                    animation: restart-spin 1.1s linear infinite; }
.restart-ring div:nth-child(2) { inset: 10px; border-top-color: var(--ok); animation-duration: 1.6s; animation-direction: reverse; }
.restart-ring div:nth-child(3) { inset: 20px; border-top-color: var(--info); animation-duration: 2.2s; }
@keyframes restart-spin { to { transform: rotate(360deg); } }
@keyframes restart-fade { from { opacity: 0; } to { opacity: 1; } }

.del-choice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--border);
              border-radius: 8px; cursor: pointer; font-size: 13px; line-height: 1.45; }
.del-choice input { width: auto; margin-top: 3px; flex-shrink: 0; }
.del-choice > span { display: flex; flex-direction: column; gap: 4px; }
.del-choice.active { border-color: var(--accent); background: var(--accent-dim); }
.del-choice.off { opacity: 0.5; cursor: not-allowed; }
.badge.spieldaten::before { display: none; }
.badge.spieldaten { margin-left: 8px; font-weight: 500; color: var(--text-muted); border: 1px solid var(--border); background: transparent; cursor: help; }
.shop-kauf-preis { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; margin-bottom: 10px; }
.shop-kauf-preis strong { font-size: 20px; }

.log-toolbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; font-size: 12px; }
.logview { background: var(--bg-sunken); border: 1px solid var(--border); border-radius: 6px; height: 62vh; overflow: auto;
           font-family: var(--mono); font-size: 12px; line-height: 1.45; margin-bottom: 12px; }
.logview .row { display: flex; white-space: pre; }
.logview.wrap .row { white-space: pre-wrap; }
.logview .ln { flex: 0 0 64px; text-align: right; padding: 0 12px 0 6px; color: var(--text-faint); user-select: none;
               border-right: 1px solid var(--border); margin-right: 10px; }
.logview .tx { flex: 1; min-width: 0; word-break: break-all; }
.logview .row:hover { background: var(--hover-soft); }
.logview .row.line-err .tx { color: var(--danger-text); }
.logview .row.line-warn .tx { color: var(--warn-text); }
.instance-image-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.instance-image-row img { width: 96px; height: 54px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-sunken); }
.panel-head.collapsible { cursor: pointer; user-select: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.panel-head.collapsible .chev { display: inline-block; font-size: 10px; opacity: 0.6; margin-right: 8px; transition: transform 0.15s; }
.panel-head.collapsible .chev.open { transform: rotate(90deg); }
a.button { display: inline-block; text-decoration: none; }
.shop-teaser svg { color: var(--accent); opacity: 0.85; margin-bottom: 18px; }
.shop-teaser .big { font-size: 17px; margin-bottom: 10px; }
.nav-item .chev { float: right; opacity: 0.6; font-size: 10px; transition: transform 0.15s; }
.nav-item .chev.open { transform: rotate(90deg); }

.user-block {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid transparent;
}
.user-block:hover { background: var(--hover-soft); border-color: var(--border); }
.user-avatar {
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600;
  border: 1px solid var(--accent);
}
.user-block .meta { min-width: 0; flex: 1; }
.user-block .meta .who { font-size: 13px; }
.user-block .meta .role { font-size: 10.5px; }

.user-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 5px;
  box-shadow: 0 10px 30px var(--shadow);
  z-index: 40;
}
.user-menu button {
  display: block; width: 100%; text-align: left;
  background: none; border: none;
  padding: 8px 10px; border-radius: var(--radius);
  font-size: 13px; color: var(--text-muted); cursor: pointer;
}
.user-menu button:hover { background: var(--hover-soft); color: var(--text); }
.user-menu .sep { height: 1px; background: var(--border); margin: 4px 2px; }


.setup-hint {
  background: linear-gradient(180deg, var(--accent-dim), var(--accent-dim));
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 18px;
}
.setup-hint h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.setup-hint p { margin: 0 0 14px; font-size: 13px; color: var(--text-muted); line-height: 1.55; max-width: 640px; }


tr.gesperrt { opacity: 0.55; cursor: not-allowed; }

.speicher-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding: 10px 16px;
  border: 1px solid var(--warn-border);
  border-radius: var(--radius);
  background: var(--warn-bg);
  color: var(--warn-text);
  font-size: 13px;
}

.license-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 10px 16px;
  border: 1px solid var(--danger-border);
  border-radius: var(--radius);
  background: var(--danger-bg);
  color: var(--text);
  font-size: 13px;
}


.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 18px;
  margin-top: 6px;
}


.lang-row { margin-top: 18px; display: flex; justify-content: flex-end; }
.lang-row select { width: auto; font-size: 12px; padding: 5px 8px; }
.menu-lang {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--text-muted);
}
.menu-lang select { width: auto; max-width: 140px; flex: 0 0 auto; font-size: 12px; padding: 3px 6px; }


.zuweisungen { display: flex; flex-direction: column; gap: 10px; }
.zuweisung { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); padding: 10px 12px; }
.zuweisung.on { border-color: var(--border-strong); }
.zuweisung-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.zuweisung-kopf .assign-item { margin: 0; }
.rechte {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px 18px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border);
}
.rechte-titel {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 4px;
}

.recht.unter { margin-left: 6px; padding-left: 12px; border-left: 2px solid var(--border); }

.recht.gesperrt { opacity: 0.45; cursor: not-allowed; }


fieldset.nur-lesen { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.nur-lesen:disabled :is(input, select, textarea) { opacity: 0.7; cursor: not-allowed; }


.rolle-zeile {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 0; border-top: 1px solid var(--border);
}
.rolle-zeile:first-of-type { border-top: 0; }
.rolle-name { font-weight: 600; font-size: 13.5px; }
.konto-art { margin-left: 6px; font-size: 12px; color: var(--text-muted); }
.konto-rolle { width: auto; min-width: 210px; padding: 5px 8px; font-size: 12.5px; }
.recht { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); cursor: pointer; padding: 3px 0; }
.recht input { width: auto; margin: 0; }
.recht.an { color: var(--text); }


.marke-zeile { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.marke-vorschau {
  display: flex; align-items: center; justify-content: center;
  min-width: 190px; height: 64px; padding: 8px 14px;
  background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius);
}
.marke-vorschau.leer { border-style: dashed; }
.marke-vorschau img { max-height: 48px; max-width: 220px; object-fit: contain; }
.marke-knoepfe { display: flex; gap: 8px; }


.brand .marke-logo {
  display: block; height: 26px; width: auto; max-width: 100%;
  object-fit: contain; object-position: left center; margin-bottom: 8px;
}
:root[data-layout="kompakt"] .brand .marke-logo { height: 24px; max-width: 34px; margin: 0 0 6px; }

:root[data-layout="kompakt"] .brand:has(.marke-logo:not([hidden]))::before { content: none; }
:root[data-layout="oben"] .brand .marke-logo { display: inline-block; height: 20px; margin: 0 8px 0 0; vertical-align: middle; }
.menu-lang > span { flex: 1; min-width: 0; }

.menu-hinweis {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 6px 12px; font-size: 13px; color: var(--text-muted);
  background: none; border: 0; text-align: left; cursor: pointer;
}
.menu-hinweis:hover { background: var(--hover-soft); color: var(--text); }
.menu-hinweis .dim { font-size: 11.5px; color: var(--accent); }



.link-btn {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: var(--bg-input);
  color: var(--text);
  font-size: 12px;
  text-decoration: none;
}
.link-btn:hover { border-color: var(--accent); color: var(--accent); }
.verlauf { margin: 14px 0 20px; }
.verlauf > summary { cursor: pointer; color: var(--text-muted); font-size: 13px; }
.verlauf-eintrag { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.verlauf-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.release-notes {
  margin: 12px 0 0;
  padding: 12px 14px;
  max-height: 260px;
  overflow: auto;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  color: var(--text-muted);
}



.menu-backdrop { position: fixed; inset: 0; z-index: 190; }
.ctx-menu {
  position: fixed;
  min-width: 230px;
  padding: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px var(--shadow);
}
.ctx-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; font-size: 13px; }
.ctx-sub { font-family: var(--mono); font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.ctx-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}
.ctx-item:hover { background: var(--hover-soft); }
.ctx-item.danger { color: var(--danger); }
.ctx-sep { height: 1px; background: var(--border); margin: 6px 2px; }


.dialog-backdrop {
  position: fixed;
  inset: 0;
  background: var(--shadow);
  display: grid;
  place-items: center;
  padding: 24px;
  
  z-index: 200;
}
.dialog {
  width: 100%;
  max-width: 460px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px var(--shadow);
  overflow: hidden;
}
.dialog.danger { border-color: var(--danger-border); }
.dialog-body { padding: 22px 24px 18px; }
.dialog-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dialog-title .mark {
  width: 22px; height: 22px; flex: 0 0 auto;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700;
  background: var(--accent-dim); color: var(--accent);
}
.dialog.danger .dialog-title .mark { background: var(--danger-bg); color: var(--danger); }
.dialog-message { font-size: 13.5px; line-height: 1.55; color: var(--text); }
.dialog-detail { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); margin-top: 8px; }
.dialog-input { margin-top: 16px; }
.dialog-error { font-size: 12px; color: var(--danger); margin-top: 6px; }
.dialog-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}


.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.metric-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.metric-label {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 6px;
}
.metric-value { font-size: 24px; font-weight: 600; line-height: 1.1; }
.metric-value .unit { font-size: 14px; font-weight: 400; color: var(--text-muted); margin-left: 3px; }
.metric-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }


.bar { height: 6px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 3px; overflow: hidden; margin-top: 10px; }
.bar > span { display: block; height: 100%; background: var(--ok); transition: width .4s ease, background .4s ease; }
.bar.warn > span { background: var(--warn); }
.bar.crit > span { background: var(--danger); }


.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.seg button {
  background: transparent; border: 0; border-right: 1px solid var(--border);
  color: var(--text-muted); padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer;
}
.seg button:last-child { border-right: 0; }
.seg button:hover { color: var(--text); }
.seg button.active { background: var(--bg-elevated); color: var(--text); }
.seg .count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px;
              background: var(--hover-mid); font-size: 11px; text-align: center; }

.seg button.has-update { color: var(--warn); }
.seg button.has-update .count {
  background: var(--warn-bg-strong); color: var(--warn); font-weight: 600;
  animation: update-puls 2s ease-in-out infinite;
}
.seg button.has-update.active .count { animation: none; }
@keyframes update-puls {
  0%, 100% { box-shadow: 0 0 0 0 var(--warn-border); }
  50% { box-shadow: 0 0 0 5px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .seg button.has-update .count { animation: none; }
}

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.tile {
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; position: relative;
}
.tile.clickable { cursor: pointer; }
.tile.clickable:hover { border-color: var(--accent); }
.tile.gesperrt { opacity: 0.55; cursor: not-allowed; }

.tile.needs-update { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn-border), 0 0 14px var(--warn-glow); }
.tile.needs-update.clickable:hover { border-color: var(--warn); box-shadow: 0 0 0 1px var(--warn-border), 0 0 20px var(--warn-border); }
.tile.running { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok-border), 0 0 16px var(--ok-bg-strong); }
.tile.running.clickable:hover { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok-border), 0 0 22px var(--ok-border); }
.tile.crashed { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger-border), 0 0 16px var(--danger-glow); }
.tile.crashed.clickable:hover { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger-border), 0 0 22px var(--danger-border); }

.tile-actions { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; z-index: 2; }
.tile-action {
  width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1px solid var(--hover-mid);
  background: var(--overlay); color: var(--text); font-size: 12px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0.8;
  backdrop-filter: blur(2px); transition: opacity 0.12s, background 0.12s, transform 0.12s;
}
.tile-action:hover { opacity: 1; background: var(--overlay-strong); border-color: var(--accent); transform: scale(1.08); }
.tile-action.stop:hover { border-color: var(--danger); color: var(--danger); }
.tile-action.available { color: var(--warn); border-color: var(--warn-border); opacity: 1; }
.tile-action.available:hover { border-color: var(--warn); }
.tile-action:disabled { opacity: 0.4; cursor: default; transform: none; }
.tile-image { width: 100%; height: 110px; object-fit: cover; display: block; background: var(--bg-sunken); }
.tile-image.placeholder { display: flex; align-items: center; justify-content: center;
                          color: var(--text-faint); font-family: var(--mono); font-size: 12px; }
.tile-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.tile-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tile-head .badge { white-space: nowrap; flex-shrink: 0; }
.group-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0 12px; color: var(--text-muted);
                 font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.group-divider::before, .group-divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.group-divider.first { margin-top: 0; }
tr.group-row td { padding: 8px 14px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
                  color: var(--text-muted); background: var(--bg); }
.tile-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-meta { display: flex; gap: 12px; font-size: 12px; color: var(--text-muted); font-family: var(--mono); }
.tile-meta b { color: var(--text); font-weight: 500; }
.tile-ports { font-family: var(--mono); font-size: 11px; color: var(--text-faint); }

.usage-cell { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.usage-cell .dim { color: var(--text-faint); }

.session-row { display: flex; align-items: center; gap: 12px; }
.session-agent {
  font-size: 11px; color: var(--text-faint);
  max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}




.nav-instance {
  margin: 4px 0 10px 10px;
  padding-left: 10px;
  border-left: 2px solid var(--border);
}
.nav-instance-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 4px 9px;
}
.nav-instance-head .name {
  font-size: 12.5px;
  color: var(--text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-instance-head .state {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 2px;
}
.nav-instance-head .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-faint);
  flex: 0 0 auto;
}
.nav-instance-head .dot.running { background: var(--ok); }
.nav-instance-head .dot.error { background: var(--danger); }
.nav-instance-head .dot.installing,
.nav-instance-head .dot.updating,
.nav-instance-head .dot.starting { background: var(--warn); }
.nav-thumb {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  object-fit: cover;
  border: 1px solid var(--border);
  flex: 0 0 auto;
}
.nav-instance .nav-item.sub { padding-left: 12px; }

:root[data-layout="standard"] .nav-unter {
  margin: 2px 0 8px 10px;
  padding-left: 10px;
  border-left: 2px solid var(--border);
}
:root[data-layout="standard"] .nav-unter .nav-item.sub { padding-left: 12px; }




.progress-track.indeterminate .progress-fill {
  width: 32%;
  animation: leitstand-indeterminate 1.5s ease-in-out infinite;
}
@keyframes leitstand-indeterminate {
  0%   { margin-left: -32%; }
  100% { margin-left: 100%; }
}



.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; min-width: 0; }
.crumb-link {
  background: none;
  border: none;
  padding: 2px 4px;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  font-family: var(--mono);
  border-radius: 4px;
}
.crumb-link:hover { background: var(--hover-soft); }
.crumb-sep { color: var(--text-faint); font-family: var(--mono); font-size: 12px; }

.file-icon { width: 28px; text-align: center; opacity: 0.75; }
.file-check { width: 22px; padding-right: 0; }
.file-check input { width: auto; margin: 0; cursor: pointer; }
tr.selected td { background: var(--accent-dim); }

.file-editor {
  width: 100%;
  min-height: 420px;
  resize: vertical;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
  tab-size: 2;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.file-editor:focus { outline: none; border-color: var(--accent); }
.file-editor[readonly] { color: var(--text-muted); }


.game-header .server-name {
  font-size: 12px;
  color: var(--text-muted);
  margin: 2px 0 6px;
}
.game-header .server-name span {
  font-family: var(--mono);
  color: var(--text);
}


.tile { position: relative; }
.note-mark {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--hover-mid);
  background: var(--overlay); color: var(--text-faint);
  font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; backdrop-filter: blur(2px);
}
.note-mark:hover { border-color: var(--accent); color: var(--text); }
.note-mark.ok { color: var(--ok); border-color: var(--ok-border); }
.note-mark.problem { color: var(--danger); border-color: var(--danger-border); }
.note-mark.work { color: var(--warn); border-color: var(--warn-border); }
.note-mark.inline { position: static; width: 24px; height: 24px; font-size: 13px; backdrop-filter: none; background: var(--bg-elevated); }
.note-mark.small { width: 20px; height: 20px; font-size: 11px; cursor: default; }
.note-line { color: var(--text-muted); font-size: 12px; margin-top: 2px; white-space: pre-line; }
.note-status-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.note-choice {
  border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-muted);
  padding: 7px 12px; border-radius: 999px; font-size: 13px; cursor: pointer;
}
.note-choice.active.ok { color: var(--ok); border-color: var(--ok); }
.note-choice.active.problem { color: var(--danger); border-color: var(--danger); }
.note-choice.active.work { color: var(--warn); border-color: var(--warn); }
.note-choice.active.none { color: var(--text); border-color: var(--text-muted); }
.note-list { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.note-item { display: flex; align-items: center; gap: 8px; }

.note-mark.mit-text::after {
  content: ''; position: absolute; right: -2px; top: -2px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-elevated);
}
.note-mark.inline.mit-text::after { right: -3px; top: -3px; }
.tile-note {
  font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-left: 16px; position: relative;
}
.tile-note::before { content: '✎'; position: absolute; left: 0; top: 0; color: var(--accent); font-size: 11px; }

td .tile-note { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; max-width: 460px; line-height: 1.4; }

.tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.tile-foot .tile-ports { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-mark.flach {
  position: static; width: auto; height: auto; border: 0; background: none; backdrop-filter: none;
  border-radius: 4px; padding: 2px 4px; font-size: 12px; gap: 6px; max-width: 55%;
  color: var(--text-faint);
}
.note-mark.flach:hover { background: var(--bg-hover, var(--hover-soft)); color: var(--text); }
.note-mark.flach.ok { color: var(--ok); }
.note-mark.flach.problem { color: var(--danger); }
.note-mark.flach.work { color: var(--warn); }
.note-mark.flach.mit-text::after { content: none; }
.note-mark.flach .note-kurz {
  color: var(--text-muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px;
}




@media (min-width: 861px) {
  
  
  :root[data-layout="kompakt"] .app { grid-template-columns: 62px 1fr; }
  :root[data-layout="kompakt"] .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; width: 62px; z-index: 40;
    white-space: nowrap;
    transition: width 0.16s ease, box-shadow 0.16s ease;
  }
  :root[data-layout="kompakt"] .sidebar:hover,
  :root[data-layout="kompakt"] .sidebar:focus-within { width: 224px; box-shadow: 8px 0 28px var(--shadow); }
  
  :root[data-layout="kompakt"] .sidebar .brand {
    position: relative; height: 34px; padding: 0 0 14px 18px; overflow: hidden;
  }
  :root[data-layout="kompakt"] .sidebar .brand::before {
    content: "L"; position: absolute; left: 0; top: 0; width: 44px; text-align: center;
    font-size: 21px; font-weight: 700; line-height: 30px; color: var(--accent);
    transition: opacity 0.16s ease;
  }
  :root[data-layout="kompakt"] .sidebar:hover .brand::before,
  :root[data-layout="kompakt"] .sidebar:focus-within .brand::before { opacity: 0; }
  :root[data-layout="kompakt"] .sidebar .brand h1 { font-size: 15px; letter-spacing: 3px; }
  :root[data-layout="kompakt"] .sidebar .brand .version,
  :root[data-layout="kompakt"] .sidebar .brand .version-kanal { visibility: hidden; }
  :root[data-layout="kompakt"] .sidebar:hover .brand .version,
  :root[data-layout="kompakt"] .sidebar:hover .brand .version-kanal,
  :root[data-layout="kompakt"] .sidebar:focus-within .brand .version,
  :root[data-layout="kompakt"] .sidebar:focus-within .brand .version-kanal { visibility: visible; }
  :root[data-layout="kompakt"] .sidebar nav { padding: 12px 8px; overflow: hidden; }
  :root[data-layout="kompakt"] .nav-item { overflow: hidden; text-overflow: clip; padding-left: 40px; position: relative; }
  :root[data-layout="kompakt"] .nav-item[data-icon]::before {
    content: attr(data-icon); position: absolute; left: 0; top: 0; bottom: 0; width: 38px;
    display: flex; align-items: center; justify-content: center; font-size: 16px;
  }
  :root[data-layout="kompakt"] .nav-item.sub { padding-left: 46px; }
  :root[data-layout="kompakt"] .nav-item .chev { opacity: 0; }
  :root[data-layout="kompakt"] .sidebar:hover .nav-item .chev { opacity: 0.6; }
  
  :root[data-layout="kompakt"] .sidebar .brand h1,
  :root[data-layout="kompakt"] .nav-item,
  :root[data-layout="kompakt"] .nav-instance .name,
  :root[data-layout="kompakt"] .nav-instance .state span,
  :root[data-layout="kompakt"] .ws-state { color: transparent; transition: color 0.16s ease; }
  
  :root[data-layout="kompakt"] .user-block .meta,
  :root[data-layout="kompakt"] .user-block > span { visibility: hidden; }
  :root[data-layout="kompakt"] .sidebar:hover .user-block .meta,
  :root[data-layout="kompakt"] .sidebar:hover .user-block > span,
  :root[data-layout="kompakt"] .sidebar:focus-within .user-block .meta,
  :root[data-layout="kompakt"] .sidebar:focus-within .user-block > span { visibility: visible; }
  :root[data-layout="kompakt"] .nav-item[data-icon]::before { color: var(--text-muted); }
  :root[data-layout="kompakt"] .nav-item.active[data-icon]::before { color: var(--accent); }
  :root[data-layout="kompakt"] .sidebar:hover .brand h1,
  :root[data-layout="kompakt"] .sidebar:focus-within .brand h1 { color: var(--text); }
  :root[data-layout="kompakt"] .sidebar:hover .nav-instance .state span,
  :root[data-layout="kompakt"] .sidebar:hover .ws-state,
  :root[data-layout="kompakt"] .sidebar:focus-within .ws-state { color: var(--text-muted); }
  :root[data-layout="kompakt"] .sidebar:hover .nav-item,
  :root[data-layout="kompakt"] .sidebar:focus-within .nav-item { color: var(--text-muted); }
  :root[data-layout="kompakt"] .sidebar:hover .nav-item.active,
  :root[data-layout="kompakt"] .sidebar:focus-within .nav-item.active { color: var(--accent); }
  :root[data-layout="kompakt"] .sidebar:hover .nav-instance .name,
  :root[data-layout="kompakt"] .sidebar:hover .user-block .who { color: var(--text); }
  
  :root[data-layout="kompakt"] .ws-state::before { background: var(--text-faint); }
  :root[data-layout="kompakt"] .ws-state.on::before { background: var(--ok); }
  
  :root[data-layout="kompakt"] .nav-unter,
  :root[data-layout="kompakt"] .nav-instance .nav-item.sub {
    max-height: 0; opacity: 0; overflow: hidden; padding-top: 0; padding-bottom: 0;
    border: 0; margin: 0;
    transition: max-height 0.18s ease, opacity 0.18s ease;
  }
  :root[data-layout="kompakt"] .sidebar:hover .nav-unter,
  :root[data-layout="kompakt"] .sidebar:focus-within .nav-unter { max-height: 340px; opacity: 1; }
  :root[data-layout="kompakt"] .sidebar:hover .nav-instance .nav-item.sub,
  :root[data-layout="kompakt"] .sidebar:focus-within .nav-instance .nav-item.sub {
    max-height: 40px; opacity: 1; padding: 8px 12px 8px 46px;
  }
  :root[data-layout="kompakt"] .nav-instance-head { padding-left: 6px; }
  :root[data-layout="kompakt"] .sidebar-footer { padding: 12px 10px 0; }
  :root[data-layout="kompakt"] .user-block { padding: 8px; }
  
  :root[data-layout="kompakt"] .user-menu {
    position: fixed; left: 70px; right: auto; bottom: 16px; min-width: 250px; z-index: 60;
  }
  
  :root[data-layout="kompakt"] main { grid-column: 2; max-width: 1400px; padding: 26px 34px; }

  
  :root[data-layout="oben"] .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  :root[data-layout="oben"] .sidebar {
    flex-direction: row; align-items: center; gap: 14px;
    border-right: 0; border-bottom: 1px solid var(--border);
    
    padding: 0 max(18px, calc((100% - 1400px) / 2 + 34px)); height: 56px;
    position: sticky; top: 0; z-index: 30;
  }
  :root[data-layout="oben"] .sidebar .brand {
    padding: 0; border: 0; display: flex; align-items: baseline; gap: 8px; flex-shrink: 0;
  }
  :root[data-layout="oben"] .sidebar .brand h1 { font-size: 15px; letter-spacing: 3px; }
  :root[data-layout="oben"] .sidebar nav {
    display: flex; align-items: center; gap: 4px; padding: 0; flex: 1; min-width: 0;
    overflow-x: auto; scrollbar-width: none;
  }
  :root[data-layout="oben"] .sidebar nav::-webkit-scrollbar { display: none; }
  :root[data-layout="oben"] .sidebar nav > template + div,
  :root[data-layout="oben"] .nav-item { width: auto; white-space: nowrap; }
  :root[data-layout="oben"] .nav-item { padding: 7px 10px; }
  
  :root[data-layout="oben"] .nav-item .chev { float: none; display: inline-block; margin-left: 6px; vertical-align: middle; }
  :root[data-layout="oben"] .nav-item .chev.open { transform: rotate(90deg); }
  
  :root[data-layout="oben"] .sidebar nav { padding-right: 12px; }
  :root[data-layout="oben"] .nav-sep { display: none; }
  
  :root[data-layout="oben"] .nav-instance {
    position: fixed; left: 0; right: 0; top: 56px; z-index: 25;
    display: flex; align-items: center; gap: 6px; overflow-x: auto;
    background: var(--bg-elevated); border-bottom: 1px solid var(--border);
    padding: 7px max(18px, calc((100% - 1400px) / 2 + 34px)); margin: 0;
  }
  :root[data-layout="oben"] .nav-instance-head { margin: 0 12px 0 0; flex-shrink: 0; }
  :root[data-layout="oben"] .nav-instance .nav-item.sub { padding: 6px 10px; font-size: 12.5px; }
  
  :root[data-layout="oben"] .nav-unter {
    position: absolute; top: calc(100% - 4px); min-width: 220px; z-index: 35;
    background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius);
    padding: 6px; box-shadow: 0 12px 30px var(--shadow);
  }
  :root[data-layout="oben"] .nav-unter .nav-item.sub { padding-left: 12px; }

  :root[data-layout="oben"] .sidebar-footer {
    border: 0; padding: 0; display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  }
  :root[data-layout="oben"] .sidebar-footer .ws-state { margin: 0 !important; }
  :root[data-layout="oben"] .user-block { padding: 5px 8px; }
  :root[data-layout="oben"] .user-menu { top: calc(100% + 6px); bottom: auto; right: 0; left: auto; }
  :root[data-layout="oben"] main { max-width: 1400px; margin: 0 auto; padding: 26px 34px; width: 100%; }
  
  :root[data-layout="oben"] .app:has(.nav-instance) main { padding-top: 96px; }
}




@keyframes ls-puls {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50%      { box-shadow: 0 0 0 4px transparent; opacity: 0.55; }
}

@keyframes ls-auf {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes ls-schimmer {
  from { background-position: -160px 0; }
  to   { background-position: 240px 0; }
}

@media (prefers-reduced-motion: no-preference) {
  :root[data-design] .tiles .tile,
  :root[data-design] .panel { animation: ls-auf 0.32s cubic-bezier(0.22, 1, 0.36, 1) both; }
  :root[data-design] .tiles .tile:nth-child(2) { animation-delay: 0.04s; }
  :root[data-design] .tiles .tile:nth-child(3) { animation-delay: 0.08s; }
  :root[data-design] .tiles .tile:nth-child(4) { animation-delay: 0.12s; }
  :root[data-design] .tiles .tile:nth-child(5) { animation-delay: 0.16s; }
  :root[data-design] .tiles .tile:nth-child(6) { animation-delay: 0.2s; }
  :root[data-design] .tiles .tile:nth-child(n+7) { animation-delay: 0.24s; }

  :root[data-design] .badge.running::before { animation: ls-puls 2.4s ease-in-out infinite; }

  :root[data-design] .bar > span {
    background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    background-size: 160px 100%;
    background-repeat: no-repeat;
    animation: ls-schimmer 2.8s ease-in-out infinite;
  }
}


:root[data-design] .tile { transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
:root[data-design] .tile.clickable:hover { transform: translateY(-3px); box-shadow: 0 10px 26px var(--shadow); }
:root[data-design] .btn-primary,
:root[data-design] button.primary { transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease; }
:root[data-design] button.primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 16px var(--accent-dim); }


:root[data-design="kompakt"] .nav-item { border-radius: 0 var(--radius) var(--radius) 0; }
:root[data-design="kompakt"] .nav-item.active {
  box-shadow: inset 3px 0 0 var(--accent), 0 0 18px -6px var(--accent);
  background: linear-gradient(90deg, var(--accent-dim), transparent 70%);
}
:root[data-design="kompakt"] .nav-item[data-icon]::before { transition: transform 0.16s ease; }
:root[data-design="kompakt"] .nav-item:hover[data-icon]::before { transform: scale(1.14); }
:root[data-design="kompakt"] .panel-head {
  letter-spacing: 1.4px;
  border-bottom-color: var(--accent-dim);
}
:root[data-design="kompakt"] .console { box-shadow: inset 0 0 40px rgba(45, 212, 191, 0.05); }


:root[data-design="oben"] .panel,
:root[data-design="oben"] .tile,
:root[data-design="oben"] .modal { border-radius: 14px; }
:root[data-design="oben"] .sidebar {
  background: rgba(16, 17, 25, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: rgba(167, 139, 250, 0.22);
  box-shadow: 0 1px 0 rgba(167, 139, 250, 0.08), 0 10px 30px -18px rgba(0, 0, 0, 0.8);
}
:root[data-design="oben"] .nav-item { position: relative; border-radius: 8px; }
:root[data-design="oben"] .nav-item::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: 2px; height: 2px;
  background: var(--accent); border-radius: 2px; opacity: 0;
  transition: left 0.18s ease, right 0.18s ease, opacity 0.18s ease;
}
:root[data-design="oben"] .nav-item.active { background: var(--accent-dim); }
:root[data-design="oben"] .nav-item.active::after { left: 12px; right: 12px; opacity: 1; }
:root[data-design="oben"] .nav-item:hover::after { left: 16px; right: 16px; opacity: 0.45; }


:root[data-design="oben"] main {
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(167, 139, 250, 0.13), transparent 70%),
    radial-gradient(700px 360px at 5% 0%, rgba(96, 165, 250, 0.06), transparent 70%);
}


:root[data-design="oben"] .page-head h2 {
  font-size: 24px; letter-spacing: -0.2px; position: relative; padding-bottom: 6px;
  background: linear-gradient(90deg, #f1efff 0%, #c4b5fd 60%, #a78bfa 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root[data-design="oben"] .page-head h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
}
:root[data-design="oben"] .panel-head { font-weight: 600; letter-spacing: 0.6px; padding-left: 26px; position: relative; }
:root[data-design="oben"] .panel-head::before {
  content: ""; position: absolute; left: 12px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent);
}
:root[data-design="oben"] .panel { border-color: rgba(167, 139, 250, 0.14); }


:root[data-design="oben"] .tiles { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
:root[data-design="oben"] .tile { background: var(--bg-elevated); border-color: rgba(167, 139, 250, 0.16); }
:root[data-design="oben"] .tile-image { height: 168px; border-radius: 0; transition: transform 0.5s ease; }
:root[data-design="oben"] .tile.clickable:hover .tile-image { transform: scale(1.04); }
:root[data-design="oben"] .tile-image.placeholder { height: 168px; }
:root[data-design="oben"] .tile-body { padding: 0 14px 14px; gap: 10px; }
:root[data-design="oben"] .tile-head {
  position: absolute; left: 0; right: 0; top: 96px; height: 72px; padding: 0 14px 12px; z-index: 1;
  align-items: flex-end; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(12, 12, 20, 0.92) 70%);
}
:root[data-design="oben"] .tile-head .tile-name { font-size: 17px; font-weight: 700; letter-spacing: -0.2px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); }
:root[data-design="oben"] .tile-head .badge {
  pointer-events: auto; background: rgba(12, 12, 20, 0.7); border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 3px 9px; border-radius: 20px;
}
:root[data-design="oben"] .tile-head .tag-manual,
:root[data-design="oben"] .tile-head .tag-update { pointer-events: auto; }
:root[data-design="oben"] .tile-meta { margin-top: 12px; gap: 6px; font-family: inherit; display: grid; grid-template-columns: repeat(3, 1fr); }
:root[data-design="oben"] .tile-meta > span {
  background: var(--bg-sunken); border: 1px solid var(--border); border-radius: 8px; padding: 4px 6px;
  font-size: 10.5px; display: inline-flex; gap: 4px; align-items: baseline; justify-content: center;
  white-space: nowrap; min-width: 0; overflow: hidden; color: var(--text-faint);
}
:root[data-design="oben"] .tile-meta b { font-family: var(--mono); }
:root[data-design="oben"] .tile-ports { font-size: 11px; }

:root[data-design="oben"] .tile.running,
:root[data-design="oben"] .tile.crashed,
:root[data-design="oben"] .tile.needs-update { border-color: rgba(167, 139, 250, 0.16); box-shadow: none; }
:root[data-design="oben"] .tile::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.55;
}
:root[data-design="oben"] .tile.running::before { background: linear-gradient(90deg, transparent, var(--ok), transparent); opacity: 1; box-shadow: 0 0 14px var(--ok); }
:root[data-design="oben"] .tile.crashed::before { background: linear-gradient(90deg, transparent, var(--danger), transparent); opacity: 1; box-shadow: 0 0 14px var(--danger); }
:root[data-design="oben"] .tile.needs-update::before { background: linear-gradient(90deg, transparent, var(--warn), transparent); opacity: 1; }
:root[data-design="oben"] .tile-actions { top: 10px; right: 10px; }


@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
:root[data-design="oben"] .metric-card {
  position: relative; padding-right: 96px; min-height: 104px; overflow: hidden;
  background: linear-gradient(135deg, var(--bg-elevated), var(--bg));
  border-color: rgba(167, 139, 250, 0.14);
  transition: --p 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
:root[data-design="oben"] .metric-card { --ring: var(--accent); }
:root[data-design="oben"] .metric-card:has(.bar.warn) { --ring: var(--warn); }
:root[data-design="oben"] .metric-card:has(.bar.crit) { --ring: var(--danger); }
:root[data-design="oben"] .metric-card[style*="--p"]::before {
  content: ""; position: absolute; right: 16px; top: 50%; width: 66px; height: 66px; margin-top: -33px; border-radius: 50%;
  background: conic-gradient(var(--ring) calc(var(--p) * 1%), rgba(167, 139, 250, 0.14) 0);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
  mask: radial-gradient(circle, transparent 58%, #000 60%);
  filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.35));
}
:root[data-design="oben"] .metric-card[style*="--p"]::after {
  content: counter(prozent) "%"; counter-reset: prozent round(var(--p));
  position: absolute; right: 16px; top: 50%; width: 66px; margin-top: -9px; text-align: center;
  font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--text);
}
:root[data-design="oben"] .metric-card .bar { display: none; }
:root[data-design="oben"] .metric-value { font-size: 26px; letter-spacing: -0.3px; }
:root[data-design="oben"] .metric-label { color: var(--accent); letter-spacing: 0.1em; }


:root[data-design="oben"] th { color: var(--accent); letter-spacing: 0.08em; }
:root[data-design="oben"] .badge.running { background: rgba(74, 222, 128, 0.12); border-radius: 20px; padding: 2px 9px; }
:root[data-design="oben"] button.primary { box-shadow: 0 6px 18px -6px var(--accent); }






:root[data-design="neon"] {
  color-scheme: dark;

  --bg:            #070a14;
  --bg-elevated:   #0e1324;
  --bg-sunken:     #090d1a;
  --bg-input:      #05070f;
  --border:        #1d2645;
  --border-strong: #324066;

  --text:          #e8edff;
  --text-muted:    #8e9ccd;
  --text-faint:    #5c6897;

  --accent:        #ff2d7e;
  --accent-hover:  #ff6aa4;
  --accent-dim:    rgba(255, 45, 126, 0.16);
  --on-accent:     #19000a;

  
  --ok:      #1ef0b0;
  --ok-hover: #5bf7c8;
  --on-ok:   #00241a;
  --warn:    #ffb020;
  --danger:  #ff4d5e;
  --info:    #22d3ee;

  --ok-text:     #6ff5d2;
  --warn-text:   #ffcb6b;
  --danger-text: #ff9aa5;
  --info-text:   #7ee7fb;
  --rcon-text:   #9bf0ff;

  --ok-bg:         rgba(30, 240, 176, 0.10);
  --ok-bg-strong:  rgba(30, 240, 176, 0.17);
  --ok-border:     rgba(30, 240, 176, 0.38);
  --warn-bg:       rgba(255, 176, 32, 0.11);
  --warn-bg-strong: rgba(255, 176, 32, 0.18);
  --warn-border:   rgba(255, 176, 32, 0.38);
  --warn-glow:     rgba(255, 176, 32, 0.28);
  --danger-bg:     rgba(255, 77, 94, 0.11);
  --danger-bg-strong: rgba(255, 77, 94, 0.18);
  --danger-border: rgba(255, 77, 94, 0.38);
  --danger-glow:   rgba(255, 77, 94, 0.32);
  --info-bg:       rgba(34, 211, 238, 0.10);
  --info-border:   rgba(34, 211, 238, 0.36);

  --console-bg:   #03050d;
  --console-text: #9fe3ff;

  --hover-soft:  rgba(255, 45, 126, 0.06);
  --hover-mid:   rgba(255, 45, 126, 0.13);
  --overlay:     rgba(4, 6, 14, 0.78);
  --overlay-strong: rgba(4, 6, 14, 0.96);
  --shadow:      rgba(0, 0, 0, 0.66);

  
  --radius: 2px;
}


:root[data-design="neon"] body {
  background-image:
    radial-gradient(900px 420px at 12% -8%, rgba(255, 45, 126, 0.13), transparent 70%),
    radial-gradient(760px 380px at 92% -4%, rgba(34, 211, 238, 0.11), transparent 70%),
    linear-gradient(rgba(140, 170, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 170, 255, 0.045) 1px, transparent 1px);
  background-size: auto, auto, 46px 46px, 46px 46px;
  background-attachment: fixed;
}


:root[data-design="neon"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    180deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
  opacity: 0.55;
}

:root[data-design="neon"] .sidebar {
  background: linear-gradient(180deg, #0a0f1f 0%, #070a14 100%);
  border-right: 1px solid var(--border);
  box-shadow: inset -1px 0 0 rgba(255, 45, 126, 0.16);
}
:root[data-design="neon"] .brand h1 {
  letter-spacing: 4px;
  background: linear-gradient(90deg, #ff2d7e 0%, #c084fc 45%, #22d3ee 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
:root[data-design="neon"] .brand .version { color: var(--info-text); }


:root[data-design="neon"] .nav-item {
  border-radius: 0;
  position: relative;
  padding-left: 16px;
  transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}
:root[data-design="neon"] .nav-item::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.18s ease;
}
:root[data-design="neon"] .nav-item:hover { padding-left: 20px; }
:root[data-design="neon"] .nav-item:hover::before { transform: scaleY(1); }
:root[data-design="neon"] .nav-item.active {
  background: linear-gradient(90deg, var(--accent-dim), transparent 75%);
  color: var(--text);
  padding-left: 20px;
}
:root[data-design="neon"] .nav-item.active::before {
  transform: scaleY(1);
  box-shadow: 0 0 10px var(--accent), 0 0 20px rgba(255, 45, 126, 0.45);
}


:root[data-design="neon"] .panel,
:root[data-design="neon"] .tile,
:root[data-design="neon"] .modal,
:root[data-design="neon"] .metric-card {
  position: relative;
  border-radius: 2px;
  background:
    linear-gradient(var(--bg-elevated), var(--bg-elevated)) padding-box,
    linear-gradient(135deg, rgba(255, 45, 126, 0.5), rgba(34, 211, 238, 0.28) 45%, transparent 60%) border-box;
  border: 1px solid transparent;
}
:root[data-design="neon"] .panel::before,
:root[data-design="neon"] .metric-card::before {
  content: "";
  position: absolute;
  inset: 5px;
  pointer-events: none;
  background:
    linear-gradient(var(--info), var(--info)) left top / 10px 1px no-repeat,
    linear-gradient(var(--info), var(--info)) left top / 1px 10px no-repeat,
    linear-gradient(var(--info), var(--info)) right top / 10px 1px no-repeat,
    linear-gradient(var(--info), var(--info)) right top / 1px 10px no-repeat,
    linear-gradient(var(--info), var(--info)) left bottom / 10px 1px no-repeat,
    linear-gradient(var(--info), var(--info)) left bottom / 1px 10px no-repeat,
    linear-gradient(var(--info), var(--info)) right bottom / 10px 1px no-repeat,
    linear-gradient(var(--info), var(--info)) right bottom / 1px 10px no-repeat;
  opacity: 0.45;
}

:root[data-design="neon"] .panel-head {
  background: linear-gradient(90deg, rgba(255, 45, 126, 0.12), transparent 60%);
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  padding-left: 26px;
  position: relative;
}
:root[data-design="neon"] .panel-head::before {
  content: "";
  position: absolute;
  left: 12px; top: 50%;
  width: 7px; height: 7px;
  margin-top: -3px;
  background: var(--accent);
  transform: rotate(45deg);
  box-shadow: 0 0 10px var(--accent);
}

:root[data-design="neon"] .page-head h2 {
  font-family: var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow: 0 0 22px rgba(255, 45, 126, 0.45);
}


:root[data-design="neon"] button {
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  letter-spacing: 0.04em;
  position: relative;
  overflow: hidden;
}
:root[data-design="neon"] button.primary {
  box-shadow: 0 0 0 1px rgba(255, 45, 126, 0.5), 0 0 18px rgba(255, 45, 126, 0.3);
}
:root[data-design="neon"] button:not(:disabled)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.22) 50%, transparent 80%);
  transform: translateX(-130%);
}
:root[data-design="neon"] button:hover:not(:disabled)::after {
  animation: neon-wisch 0.55s ease;
}
@keyframes neon-wisch { to { transform: translateX(130%); } }

:root[data-design="neon"] input,
:root[data-design="neon"] select,
:root[data-design="neon"] textarea { border-radius: 0; }
:root[data-design="neon"] input:focus,
:root[data-design="neon"] select:focus,
:root[data-design="neon"] textarea:focus {
  box-shadow: 0 0 0 1px var(--accent), 0 0 16px rgba(255, 45, 126, 0.28);
}


:root[data-design="neon"] .tile-image {
  border-radius: 0;
  filter: saturate(0.45) contrast(1.1) brightness(0.8);
  transition: filter 0.45s ease, transform 0.6s ease;
}
:root[data-design="neon"] .tile.clickable:hover .tile-image {
  filter: saturate(1.15) contrast(1.05) brightness(1);
  transform: scale(1.04);
}
:root[data-design="neon"] .tile::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}
:root[data-design="neon"] .tile.clickable:hover::after { opacity: 1; }
:root[data-design="neon"] .tile-name {
  font-family: var(--mono);
  letter-spacing: 0.04em;
}


:root[data-design="neon"] .tile.running {
  border-color: transparent;
  box-shadow: 0 0 0 1px var(--ok-border), 0 0 26px rgba(30, 240, 176, 0.18);
}
:root[data-design="neon"] .tile.running::after {
  opacity: 1;
  background: linear-gradient(90deg, transparent, var(--ok), transparent);
  width: 45%;
  right: auto;
  animation: neon-lauf 4s linear infinite;
}
@keyframes neon-lauf {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(230%); }
}


:root[data-design="neon"] .metric-label {
  font-family: var(--mono);
  color: var(--accent);
  letter-spacing: 0.18em;
}
:root[data-design="neon"] .metric-value {
  font-family: var(--mono);
  font-size: 27px;
  color: var(--info-text);
  text-shadow: 0 0 20px rgba(34, 211, 238, 0.45);
}
:root[data-design="neon"] .bar {
  border-radius: 0;
  height: 8px;
  background: #060a14;
  border-color: var(--border);
}
:root[data-design="neon"] .bar > span {
  background:
    repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 8px),
    linear-gradient(90deg, var(--ok), var(--info));
  color: rgba(0, 0, 0, 0.45);
  box-shadow: 0 0 12px rgba(30, 240, 176, 0.5);
}
:root[data-design="neon"] .bar.warn > span {
  background: repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 8px),
              linear-gradient(90deg, var(--warn), #ff7a45);
  box-shadow: 0 0 12px var(--warn-glow);
}
:root[data-design="neon"] .bar.crit > span {
  background: repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 8px),
              linear-gradient(90deg, var(--danger), #ff2d7e);
  box-shadow: 0 0 12px var(--danger-glow);
}

:root[data-design="neon"] .badge {
  border-radius: 0;
  font-family: var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 10px;
}
:root[data-design="neon"] .badge.running::before {
  box-shadow: 0 0 8px var(--ok);
  animation: neon-puls 2.2s ease-in-out infinite;
}
@keyframes neon-puls { 50% { opacity: 0.35; } }


:root[data-design="neon"] .console {
  position: relative;
  border-radius: 0;
  background:
    repeating-linear-gradient(180deg, rgba(34, 211, 238, 0.045) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55)),
    var(--console-bg);
  text-shadow: 0 0 9px rgba(34, 211, 238, 0.28);
}

:root[data-design="neon"] table thead th {
  font-family: var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
:root[data-design="neon"] tbody tr.clickable:hover { background: var(--hover-mid); }



:root[data-design="kloetzchen"] {
  color-scheme: dark;

  --bg:            #1d1f26;
  --bg-elevated:   #30333c;
  --bg-sunken:     #24262e;
  --bg-input:      #16181d;
  --border:        #15171c;
  --border-strong: #0e1013;

  --text:          #f2f2f2;
  --text-muted:    #b6b7bd;
  --text-faint:    #85868d;

  --accent:        #67b537;
  --accent-hover:  #7ccb47;
  --accent-dim:    rgba(103, 181, 55, 0.18);
  --on-accent:     #0e2106;

  --ok:      #67b537;
  --ok-hover: #7ccb47;
  --on-ok:   #0e2106;
  --warn:    #e8a33d;
  --danger:  #c7392f;
  --info:    #4aa3c7;

  --ok-text:     #9fdc6e;
  --warn-text:   #f3c06b;
  --danger-text: #ef8279;
  --info-text:   #8fd0e8;
  --rcon-text:   #c6a86a;

  --ok-bg:         rgba(103, 181, 55, 0.14);
  --ok-bg-strong:  rgba(103, 181, 55, 0.22);
  --ok-border:     rgba(103, 181, 55, 0.5);
  --warn-bg:       rgba(232, 163, 61, 0.14);
  --warn-bg-strong: rgba(232, 163, 61, 0.22);
  --warn-border:   rgba(232, 163, 61, 0.5);
  --warn-glow:     rgba(232, 163, 61, 0.3);
  --danger-bg:     rgba(199, 57, 47, 0.16);
  --danger-bg-strong: rgba(199, 57, 47, 0.24);
  --danger-border: rgba(199, 57, 47, 0.55);
  --danger-glow:   rgba(199, 57, 47, 0.35);
  --info-bg:       rgba(74, 163, 199, 0.14);
  --info-border:   rgba(74, 163, 199, 0.5);

  --console-bg:   #101115;
  --console-text: #d6d7da;

  --hover-soft:  rgba(255, 255, 255, 0.05);
  --hover-mid:   rgba(255, 255, 255, 0.11);
  --overlay:     rgba(10, 11, 14, 0.8);
  --overlay-strong: rgba(10, 11, 14, 0.96);
  --shadow:      rgba(0, 0, 0, 0.7);

  
  --radius: 0px;
}


:root[data-design="kloetzchen"] body {
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0 4px, transparent 4px 8px);
  background-attachment: fixed;
}

:root[data-design="kloetzchen"] * { border-radius: 0 !important; }


:root[data-design="kloetzchen"] .panel,
:root[data-design="kloetzchen"] .tile,
:root[data-design="kloetzchen"] .modal,
:root[data-design="kloetzchen"] .metric-card,
:root[data-design="kloetzchen"] .alert {
  border: 2px solid var(--border-strong);
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.14),
    inset -2px -2px 0 rgba(0, 0, 0, 0.45),
    0 3px 0 rgba(0, 0, 0, 0.35);
}

:root[data-design="kloetzchen"] .sidebar {
  background: #2b2d35;
  border-right: 3px solid var(--border-strong);
  box-shadow: inset -3px 0 0 rgba(0, 0, 0, 0.35), inset 2px 0 0 rgba(255, 255, 255, 0.07);
}


:root[data-design="kloetzchen"] .sidebar .brand {
  background:
    linear-gradient(180deg, #6aa636 0 10px, #5c8f2e 10px 14px, #7b5733 14px 100%);
  border-bottom: 3px solid var(--border-strong);
  padding-top: 14px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.3);
}
:root[data-design="kloetzchen"] .brand h1,
:root[data-design="kloetzchen"] .page-head h2,
:root[data-design="kloetzchen"] .panel-head,
:root[data-design="kloetzchen"] .metric-value,
:root[data-design="kloetzchen"] button,
:root[data-design="kloetzchen"] .tile-name {
  
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
}
:root[data-design="kloetzchen"] .brand h1 {
  font-family: var(--mono);
  letter-spacing: 2px;
  color: #ffffff;
}
:root[data-design="kloetzchen"] .brand .version { color: #e6f3d8; }


:root[data-design="kloetzchen"] .nav-item {
  background: #3a3d47;
  border: 2px solid var(--border-strong);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.13), inset -2px -2px 0 rgba(0, 0, 0, 0.4);
  margin-bottom: 4px;
  font-family: var(--mono);
  transition: background 0.08s steps(2), transform 0.08s steps(2);
}
:root[data-design="kloetzchen"] .nav-item:hover { background: #474b57; }
:root[data-design="kloetzchen"] .nav-item:active { transform: translate(1px, 1px); }
:root[data-design="kloetzchen"] .nav-item.active {
  background: #4a6b2c;
  color: #f4ffe8;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.18), inset -2px -2px 0 rgba(0, 0, 0, 0.45);
}
:root[data-design="kloetzchen"] .nav-item.sub { background: #343741; }

:root[data-design="kloetzchen"] .panel-head {
  
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.14) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, #3c3f4a, #32353e);
  border-bottom: 2px solid var(--border-strong);
  font-family: var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f2f2f2;
}
:root[data-design="kloetzchen"] .page-head h2 {
  font-family: var(--mono);
  letter-spacing: 1px;
}


:root[data-design="kloetzchen"] button {
  background: linear-gradient(180deg, #6d7180, #585c69);
  border: 2px solid var(--border-strong);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.2), inset -2px -2px 0 rgba(0, 0, 0, 0.42);
  font-family: var(--mono);
  letter-spacing: 0.04em;
  transition: filter 0.08s steps(2);
}
:root[data-design="kloetzchen"] button:hover:not(:disabled) { filter: brightness(1.18); }
:root[data-design="kloetzchen"] button:active:not(:disabled) {
  box-shadow: inset -2px -2px 0 rgba(255, 255, 255, 0.12), inset 2px 2px 0 rgba(0, 0, 0, 0.45);
  transform: translate(1px, 1px);
}

:root[data-design="kloetzchen"] button.primary {
  background: linear-gradient(180deg, #55933a, #3c7420);
  color: #ffffff;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}
:root[data-design="kloetzchen"] button.primary:hover:not(:disabled) { filter: brightness(1.22); }

:root[data-design="kloetzchen"] input,
:root[data-design="kloetzchen"] select,
:root[data-design="kloetzchen"] textarea {
  border: 2px solid var(--border-strong);
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.5);
  font-family: var(--mono);
}


:root[data-design="kloetzchen"] .tiles { gap: 14px; }
:root[data-design="kloetzchen"] .tile {
  background: #30333c;
  transition: transform 0.1s steps(2), box-shadow 0.1s steps(2);
}
:root[data-design="kloetzchen"] .tile-image {
  border: 3px solid var(--border-strong);
  box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.45);
  image-rendering: pixelated;
  filter: contrast(1.08) saturate(1.05);
}
:root[data-design="kloetzchen"] .tile.clickable:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.22),
    inset -2px -2px 0 rgba(0, 0, 0, 0.45),
    0 6px 0 rgba(0, 0, 0, 0.4);
}
:root[data-design="kloetzchen"] .tile.clickable:hover .tile-image {
  filter: contrast(1.08) saturate(1.05) brightness(1.35);
}
:root[data-design="kloetzchen"] .tile-name { font-family: var(--mono); }
:root[data-design="kloetzchen"] .tile.running {
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.16),
    inset -2px -2px 0 rgba(0, 0, 0, 0.45),
    0 0 0 2px var(--ok), 0 3px 0 rgba(0, 0, 0, 0.35);
}


:root[data-design="kloetzchen"] .metric-label {
  font-family: var(--mono);
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
:root[data-design="kloetzchen"] .metric-value { font-family: var(--mono); font-size: 25px; }
:root[data-design="kloetzchen"] .bar {
  height: 12px;
  background: #15171c;
  border: 2px solid var(--border-strong);
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.5);
}
:root[data-design="kloetzchen"] .bar > span {
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, #8ae04f 0 50%, #5ba52f 50% 100%);
  transition: width 0.4s steps(12);
}
:root[data-design="kloetzchen"] .bar.warn > span {
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0 1px, transparent 1px 6px),
              linear-gradient(180deg, #f2b85a 0 50%, #cf8c25 50% 100%);
}
:root[data-design="kloetzchen"] .bar.crit > span {
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0 1px, transparent 1px 6px),
              linear-gradient(180deg, #e05449 0 50%, #a82a21 50% 100%);
}

:root[data-design="kloetzchen"] .badge {
  border: 2px solid var(--border-strong);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.15), inset -1px -1px 0 rgba(0, 0, 0, 0.4);
  font-family: var(--mono);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.06em;
}
:root[data-design="kloetzchen"] .badge::before { border-radius: 0 !important; width: 7px; height: 7px; }

:root[data-design="kloetzchen"] .badge.running::before { animation: klotz-fackel 1.6s steps(3) infinite; }
@keyframes klotz-fackel {
  0%   { opacity: 1; }
  50%  { opacity: 0.55; }
  100% { opacity: 1; }
}

:root[data-design="kloetzchen"] .console {
  border: 2px solid var(--border-strong);
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.55);
  font-family: var(--mono);
}

:root[data-design="kloetzchen"] table thead th {
  background: #3c3f4a;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 2px solid var(--border-strong);
}
:root[data-design="kloetzchen"] tbody tr.clickable:hover { background: var(--hover-mid); }

:root[data-design="kloetzchen"] .ws-state.on::before { box-shadow: 0 0 0 2px rgba(103, 181, 55, 0.3); }



@media (prefers-reduced-motion: reduce) {
  :root[data-design="neon"] .tile.running::after,
  :root[data-design="neon"] .badge.running::before,
  :root[data-design="neon"] button:hover:not(:disabled)::after,
  :root[data-design="kloetzchen"] .badge.running::before { animation: none; }
  :root[data-design="neon"] .tile.running::after { width: 100%; left: 0; right: 0; }
}






:root[data-design="comic"] {
  color-scheme: light;

  --bg:            #f5efe1;
  --bg-elevated:   #fffdf5;
  --bg-sunken:     #ece4d2;
  --bg-input:      #fffdf5;
  --border:        #15130f;
  --border-strong: #000000;

  --text:          #15130f;
  --text-muted:    #57514a;
  --text-faint:    #6e6961;

  --accent:        #e23b4b;
  --accent-hover:  #f2545f;
  --accent-dim:    rgba(226, 59, 75, 0.14);
  --on-accent:     #fffdf5;

  --ok:      #2e9e4f;
  --ok-hover: #35b45a;
  --on-ok:   #fffdf5;
  --warn:    #f2a007;
  --danger:  #d31f2e;
  --info:    #1a6fd4;

  --ok-text:     #1c6b35;
  --warn-text:   #8a5900;
  --danger-text: #9e1320;
  --info-text:   #114f96;
  --rcon-text:   #114f96;

  --ok-bg:         rgba(46, 158, 79, 0.14);
  --ok-bg-strong:  rgba(46, 158, 79, 0.22);
  --ok-border:     #15130f;
  --warn-bg:       rgba(242, 160, 7, 0.18);
  --warn-bg-strong: rgba(242, 160, 7, 0.28);
  --warn-border:   #15130f;
  --warn-glow:     rgba(242, 160, 7, 0.4);
  --danger-bg:     rgba(211, 31, 46, 0.12);
  --danger-bg-strong: rgba(211, 31, 46, 0.2);
  --danger-border: #15130f;
  --danger-glow:   rgba(211, 31, 46, 0.35);
  --info-bg:       rgba(26, 111, 212, 0.12);
  --info-border:   #15130f;

  
  --console-bg:   #15130f;
  --console-text: #f5efe1;

  --hover-soft:  rgba(21, 19, 15, 0.05);
  --hover-mid:   rgba(21, 19, 15, 0.1);
  --overlay:     rgba(245, 239, 225, 0.86);
  --overlay-strong: rgba(245, 239, 225, 0.97);
  --shadow:      rgba(21, 19, 15, 0.9);

  --radius: 6px;
}


:root[data-design="comic"] body {
  background-image:
    radial-gradient(rgba(21, 19, 15, 0.1) 1.1px, transparent 1.2px),
    radial-gradient(rgba(226, 59, 75, 0.07) 1.1px, transparent 1.2px);
  background-size: 11px 11px, 11px 11px;
  background-position: 0 0, 5px 5px;
  background-attachment: fixed;
}


:root[data-design="comic"] .panel,
:root[data-design="comic"] .tile,
:root[data-design="comic"] .modal,
:root[data-design="comic"] .metric-card,
:root[data-design="comic"] .alert,
:root[data-design="comic"] .console {
  border: 3px solid var(--border-strong);
  box-shadow: 5px 5px 0 var(--border-strong);
}

:root[data-design="comic"] .sidebar {
  background: var(--bg-elevated);
  border-right: 3px solid var(--border-strong);
}
:root[data-design="comic"] .sidebar .brand {
  background: var(--accent);
  border-bottom: 3px solid var(--border-strong);
  padding-top: 16px;
}
:root[data-design="comic"] .brand h1 {
  color: #fffdf5;
  font-weight: 800;
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 var(--border-strong);
}
:root[data-design="comic"] .brand .version { color: #fff4d6; }


:root[data-design="comic"] .nav-item {
  border: 2px solid transparent;
  margin-bottom: 4px;
  font-weight: 600;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
:root[data-design="comic"] .nav-item:hover {
  background: #fff0b8;
  border-color: var(--border-strong);
  transform: translate(-1px, -1px);
}
:root[data-design="comic"] .nav-item.active {
  background: var(--accent);
  color: #fffdf5;
  border-color: var(--border-strong);
  box-shadow: 3px 3px 0 var(--border-strong);
}


:root[data-design="comic"] .panel-head {
  background: var(--border-strong);
  color: #fffdf5;
  border-bottom: 0;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
:root[data-design="comic"] .page-head h2 {
  font-weight: 800;
  font-size: 23px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 var(--accent);
}


:root[data-design="comic"] button {
  border: 3px solid var(--border-strong);
  box-shadow: 3px 3px 0 var(--border-strong);
  font-weight: 700;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
}
:root[data-design="comic"] button:hover:not(:disabled) {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--border-strong);
}
:root[data-design="comic"] button:active:not(:disabled) {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--border-strong);
}
:root[data-design="comic"] button.primary { color: #fffdf5; }

:root[data-design="comic"] input,
:root[data-design="comic"] select,
:root[data-design="comic"] textarea {
  border: 2px solid var(--border-strong);
  box-shadow: 2px 2px 0 rgba(21, 19, 15, 0.25);
}


:root[data-design="comic"] .tile {
  background: var(--bg-elevated);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
:root[data-design="comic"] .tile-image { border-bottom: 3px solid var(--border-strong); }
:root[data-design="comic"] .tile.clickable:hover {
  transform: translate(-3px, -3px) rotate(-0.6deg);
  box-shadow: 9px 9px 0 var(--border-strong);
}
:root[data-design="comic"] .tile-name { font-weight: 800; }
:root[data-design="comic"] .tile.running { box-shadow: 5px 5px 0 var(--ok); }
:root[data-design="comic"] .tile.crashed { box-shadow: 5px 5px 0 var(--danger); }
:root[data-design="comic"] .tile.needs-update { box-shadow: 5px 5px 0 var(--warn); }


:root[data-design="comic"] .badge,
:root[data-design="comic"] .tag-update,
:root[data-design="comic"] .tag-manual {
  border: 2px solid var(--border-strong);
  font-weight: 800;
  text-transform: uppercase;
  transform: rotate(-2deg);
}
:root[data-design="comic"] .badge.running { background: var(--ok); color: #fffdf5; }
:root[data-design="comic"] .badge.running::before { background: #fffdf5; animation: comic-blink 1.6s steps(2) infinite; }
@keyframes comic-blink { 50% { opacity: 0.3; } }


:root[data-design="comic"] .metric-label {
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--accent);
}
:root[data-design="comic"] .metric-value {
  font-size: 30px;
  font-weight: 800;
  text-shadow: 2px 2px 0 var(--accent);
}

:root[data-design="comic"] .metric-value .unit { text-shadow: none; font-weight: 700; }
:root[data-design="comic"] .bar {
  height: 12px;
  border: 2px solid var(--border-strong);
  background: #fffdf5;
}
:root[data-design="comic"] .bar > span {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.45) 0 4px, transparent 4px 8px),
    var(--ok);
}
:root[data-design="comic"] .bar.warn > span {
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.45) 0 4px, transparent 4px 8px), var(--warn);
}
:root[data-design="comic"] .bar.crit > span {
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.45) 0 4px, transparent 4px 8px), var(--danger);
}


:root[data-design="comic"] .alert.warn { color: var(--warn-text); }

:root[data-design="comic"] table thead th {
  background: var(--border-strong);
  color: #fffdf5;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.06em;
}
:root[data-design="comic"] tbody tr.clickable:hover { background: #fff0b8; }
:root[data-design="comic"] .console { color: var(--console-text); }



:root[data-design="urzeit"] {
  color-scheme: dark;

  
  --bg:            #0d1511;
  --bg-elevated:   #16211a;
  --bg-sunken:     #111a15;
  --bg-input:      #09100c;
  --border:        #243528;
  --border-strong: #35503c;

  --text:          #ece7d6;
  --text-muted:    #9aa891;
  --text-faint:    #6d7c6b;

  --accent:        #d98324;
  --accent-hover:  #f2a03f;
  --accent-dim:    rgba(217, 131, 36, 0.16);
  --on-accent:     #1a0d02;

  --ok:      #9ed154;
  --ok-hover: #b4e070;
  --on-ok:   #13210a;
  --warn:    #e8b23a;
  --danger:  #d9533f;
  --info:    #5fb8c4;

  --ok-text:     #c4e78c;
  --warn-text:   #f0cd86;
  --danger-text: #f0998c;
  --info-text:   #9adbe4;
  --rcon-text:   #e8c99a;

  --ok-bg:         rgba(158, 209, 84, 0.12);
  --ok-bg-strong:  rgba(158, 209, 84, 0.2);
  --ok-border:     rgba(158, 209, 84, 0.42);
  --warn-bg:       rgba(224, 161, 58, 0.12);
  --warn-bg-strong: rgba(224, 161, 58, 0.2);
  --warn-border:   rgba(224, 161, 58, 0.42);
  --warn-glow:     rgba(224, 161, 58, 0.3);
  --danger-bg:     rgba(192, 69, 59, 0.14);
  --danger-bg-strong: rgba(192, 69, 59, 0.22);
  --danger-border: rgba(192, 69, 59, 0.46);
  --danger-glow:   rgba(192, 69, 59, 0.34);
  --info-bg:       rgba(107, 164, 201, 0.12);
  --info-border:   rgba(107, 164, 201, 0.4);

  --console-bg:   #070c09;
  --console-text: #cfd6c2;

  --hover-soft:  rgba(217, 131, 36, 0.06);
  --hover-mid:   rgba(217, 131, 36, 0.13);
  --overlay:     rgba(7, 12, 9, 0.82);
  --overlay-strong: rgba(7, 12, 9, 0.97);
  --shadow:      rgba(0, 0, 0, 0.7);

  --radius: 3px;
}


:root[data-design="urzeit"] body {
  background-image:
    
    radial-gradient(900px 440px at 80% -6%, rgba(232, 146, 46, 0.22), transparent 72%),
    radial-gradient(1000px 480px at 16% -10%, rgba(95, 184, 196, 0.16), transparent 70%),
    
    linear-gradient(180deg, rgba(154, 192, 160, 0.07) 0, transparent 230px),
    
    linear-gradient(180deg, transparent 40%, rgba(5, 14, 9, 0.55) 100%),
    repeating-linear-gradient(107deg, rgba(255, 255, 255, 0.014) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(23deg, rgba(0, 0, 0, 0.12) 0 3px, transparent 3px 9px);
  background-attachment: fixed;
}


:root[data-design="urzeit"] body::before,
:root[data-design="urzeit"] body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20320%22%20width%3D%22200%22%20height%3D%22320%22%20color%3D%22%23000%22%3E%3Cpath%20d%3D%22M92.2%20298.5Q56.9%20273.7%206.2%20281.6Q50.2%20308.1%2092.2%20298.5Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M92.2%20298.5Q135.4%20300.0%20173.6%20265.8Q122.3%20267.5%2092.2%20298.5Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M90.9%20281.3Q57.4%20256.7%208.5%20263.3Q50.2%20289.6%2090.9%20281.3Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M90.9%20281.3Q132.3%20283.6%20169.7%20251.4Q120.4%20252.0%2090.9%20281.3Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M89.9%20264.3Q58.2%20240.0%2011.1%20245.3Q50.7%20271.5%2089.9%20264.3Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M89.9%20264.3Q129.6%20267.4%20166.2%20237.2Q118.8%20236.8%2089.9%20264.3Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M89.2%20247.6Q59.4%20223.6%2014.2%20227.8Q51.5%20253.7%2089.2%20247.6Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M89.2%20247.6Q127.3%20251.3%20163.0%20223.2Q117.5%20221.9%2089.2%20247.6Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M89.0%20231.1Q61.0%20207.6%2017.6%20210.5Q52.8%20236.1%2089.0%20231.1Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M89.0%20231.1Q125.3%20235.5%20160.0%20209.4Q116.6%20207.1%2089.0%20231.1Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M89.1%20214.9Q62.9%20191.8%2021.4%20193.7Q54.4%20218.9%2089.1%20214.9Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M89.1%20214.9Q123.7%20219.9%20157.4%20195.7Q116.0%20192.6%2089.1%20214.9Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M89.6%20199.0Q65.2%20176.4%2025.6%20177.2Q56.5%20202.0%2089.6%20199.0Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M89.6%20199.0Q122.5%20204.5%20155.1%20182.3Q115.8%20178.3%2089.6%20199.0Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M90.5%20183.3Q67.8%20161.2%2030.2%20161.1Q59.0%20185.4%2090.5%20183.3Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M90.5%20183.3Q121.6%20189.4%20153.2%20169.0Q115.9%20164.3%2090.5%20183.3Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M91.8%20167.9Q70.8%20146.4%2035.2%20145.4Q61.8%20169.1%2091.8%20167.9Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M91.8%20167.9Q121.1%20174.4%20151.5%20155.8Q116.2%20150.5%2091.8%20167.9Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M93.4%20152.7Q74.1%20131.9%2040.5%20130.1Q65.1%20153.1%2093.4%20152.7Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M93.4%20152.7Q120.9%20159.6%20150.1%20142.8Q117.0%20136.9%2093.4%20152.7Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M95.5%20137.8Q77.8%20117.8%2046.2%20115.1Q68.8%20137.5%2095.5%20137.8Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M95.5%20137.8Q121.2%20145.0%20149.1%20129.9Q118.0%20123.5%2095.5%20137.8Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M97.8%20123.2Q81.8%20103.9%2052.2%20100.6Q72.8%20122.1%2097.8%20123.2Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M97.8%20123.2Q121.8%20130.6%20148.4%20117.2Q119.4%20110.4%2097.8%20123.2Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M100.6%20108.8Q86.2%2090.4%2058.6%2086.5Q77.3%20107.2%20100.6%20108.8Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M100.6%20108.8Q122.8%20116.3%20148.0%20104.5Q121.1%2097.4%20100.6%20108.8Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M103.8%2094.7Q90.8%2077.2%2065.3%2072.8Q82.1%2092.5%20103.8%2094.7Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M103.8%2094.7Q124.1%20102.3%20147.9%2092.0Q123.1%2084.6%20103.8%2094.7Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M107.3%2080.8Q95.8%2064.3%2072.4%2059.6Q87.3%2078.2%20107.3%2080.8Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M107.3%2080.8Q125.9%2088.4%20148.1%2079.6Q125.4%2072.1%20107.3%2080.8Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M111.2%2067.2Q101.1%2051.7%2079.8%2046.7Q93.0%2064.3%20111.2%2067.2Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M111.2%2067.2Q128.1%2074.7%20148.7%2067.2Q128.1%2059.7%20111.2%2067.2Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M115.5%2053.9Q106.8%2039.5%2087.4%2034.3Q99.0%2050.7%20115.5%2053.9Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M115.5%2053.9Q130.6%2061.2%20149.6%2054.9Q131.0%2047.5%20115.5%2053.9Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M120.1%2040.8Q112.7%2027.6%2095.4%2022.4Q105.3%2037.4%20120.1%2040.8Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M120.1%2040.8Q133.6%2047.8%20150.9%2042.7Q134.4%2035.5%20120.1%2040.8Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M125.2%2028.0Q118.9%2016.0%20103.7%2010.9Q112.1%2024.6%20125.2%2028.0Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M125.2%2028.0Q136.9%2034.6%20152.5%2030.6Q138.0%2023.7%20125.2%2028.0Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M130.6%2015.4Q125.4%204.7%20112.2%20-0.2Q119.2%2012.0%20130.6%2015.4Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M130.6%2015.4Q140.7%2021.6%20154.5%2018.5Q142.0%2012.0%20130.6%2015.4Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M94.0%20316.0L93.1%20307.8L92.3%20299.6L91.6%20291.5L91.0%20283.4L90.5%20275.4L90.0%20267.5L89.7%20259.6L89.4%20251.8L89.2%20244.0L89.0%20236.3L89.0%20228.7L89.0%20221.1L89.2%20213.5L89.4%20206.0L89.7%20198.6L90.0%20191.2L90.5%20183.9L91.0%20176.7L91.6%20169.5L92.3%20162.3L93.1%20155.2L94.0%20148.2L95.0%20141.2L96.0%20134.3L97.1%20127.5L98.3%20120.7L99.6%20113.9L100.9%20107.2L102.4%20100.6L103.9%2094.0L105.5%2087.5L107.2%2081.1L109.0%2074.7L110.9%2068.3L112.8%2062.0L114.8%2055.8L116.9%2049.6L119.1%2043.5L121.4%2037.4L123.8%2031.4L126.2%2025.5L128.7%2019.6L131.3%2013.8L134.0%208.0%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222.6%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}
:root[data-design="urzeit"] body::before {
  left: 196px; bottom: -70px;
  width: 330px; height: 520px;
  opacity: 0.13;
  filter: invert(1) sepia(1) saturate(1.6) hue-rotate(58deg);
  transform: rotate(-8deg);
}
:root[data-design="urzeit"] body::after {
  right: -60px; top: 20px;
  width: 300px; height: 470px;
  opacity: 0.14;
  filter: invert(1) sepia(1) saturate(1.4) hue-rotate(58deg);
  transform: scaleX(-1) rotate(-14deg);
}


:root[data-design="urzeit"] .app::before {
  content: "";
  position: fixed;
  left: 180px; right: 0; bottom: -140px;
  height: 340px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(55% 100% at 26% 100%, rgba(236, 142, 44, 0.2), rgba(236, 142, 44, 0.05) 45%, transparent 72%);
  animation: urzeit-feuer 7s ease-in-out infinite;
}


:root[data-design="urzeit"] .sidebar {
  position: relative;
  isolation: isolate;
}
:root[data-design="urzeit"] .sidebar::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 300px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(70% 70% at 42% 92%, rgba(240, 146, 44, 0.28), rgba(226, 110, 30, 0.08) 45%, transparent 74%);
  animation: urzeit-feuer 7s ease-in-out infinite;
}
:root[data-design="urzeit"] .sidebar::after {
  content: "";
  position: absolute;
  left: -26px; bottom: 78px;
  width: 210px; height: 330px;
  z-index: -1;
  pointer-events: none;
  opacity: 0.22;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20320%22%20width%3D%22200%22%20height%3D%22320%22%20color%3D%22%23000%22%3E%3Cpath%20d%3D%22M92.2%20298.5Q56.9%20273.7%206.2%20281.6Q50.2%20308.1%2092.2%20298.5Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M92.2%20298.5Q135.4%20300.0%20173.6%20265.8Q122.3%20267.5%2092.2%20298.5Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M90.9%20281.3Q57.4%20256.7%208.5%20263.3Q50.2%20289.6%2090.9%20281.3Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M90.9%20281.3Q132.3%20283.6%20169.7%20251.4Q120.4%20252.0%2090.9%20281.3Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M89.9%20264.3Q58.2%20240.0%2011.1%20245.3Q50.7%20271.5%2089.9%20264.3Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M89.9%20264.3Q129.6%20267.4%20166.2%20237.2Q118.8%20236.8%2089.9%20264.3Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M89.2%20247.6Q59.4%20223.6%2014.2%20227.8Q51.5%20253.7%2089.2%20247.6Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M89.2%20247.6Q127.3%20251.3%20163.0%20223.2Q117.5%20221.9%2089.2%20247.6Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M89.0%20231.1Q61.0%20207.6%2017.6%20210.5Q52.8%20236.1%2089.0%20231.1Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M89.0%20231.1Q125.3%20235.5%20160.0%20209.4Q116.6%20207.1%2089.0%20231.1Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M89.1%20214.9Q62.9%20191.8%2021.4%20193.7Q54.4%20218.9%2089.1%20214.9Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M89.1%20214.9Q123.7%20219.9%20157.4%20195.7Q116.0%20192.6%2089.1%20214.9Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M89.6%20199.0Q65.2%20176.4%2025.6%20177.2Q56.5%20202.0%2089.6%20199.0Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M89.6%20199.0Q122.5%20204.5%20155.1%20182.3Q115.8%20178.3%2089.6%20199.0Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M90.5%20183.3Q67.8%20161.2%2030.2%20161.1Q59.0%20185.4%2090.5%20183.3Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M90.5%20183.3Q121.6%20189.4%20153.2%20169.0Q115.9%20164.3%2090.5%20183.3Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M91.8%20167.9Q70.8%20146.4%2035.2%20145.4Q61.8%20169.1%2091.8%20167.9Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M91.8%20167.9Q121.1%20174.4%20151.5%20155.8Q116.2%20150.5%2091.8%20167.9Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M93.4%20152.7Q74.1%20131.9%2040.5%20130.1Q65.1%20153.1%2093.4%20152.7Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M93.4%20152.7Q120.9%20159.6%20150.1%20142.8Q117.0%20136.9%2093.4%20152.7Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M95.5%20137.8Q77.8%20117.8%2046.2%20115.1Q68.8%20137.5%2095.5%20137.8Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M95.5%20137.8Q121.2%20145.0%20149.1%20129.9Q118.0%20123.5%2095.5%20137.8Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M97.8%20123.2Q81.8%20103.9%2052.2%20100.6Q72.8%20122.1%2097.8%20123.2Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M97.8%20123.2Q121.8%20130.6%20148.4%20117.2Q119.4%20110.4%2097.8%20123.2Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M100.6%20108.8Q86.2%2090.4%2058.6%2086.5Q77.3%20107.2%20100.6%20108.8Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M100.6%20108.8Q122.8%20116.3%20148.0%20104.5Q121.1%2097.4%20100.6%20108.8Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M103.8%2094.7Q90.8%2077.2%2065.3%2072.8Q82.1%2092.5%20103.8%2094.7Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M103.8%2094.7Q124.1%20102.3%20147.9%2092.0Q123.1%2084.6%20103.8%2094.7Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M107.3%2080.8Q95.8%2064.3%2072.4%2059.6Q87.3%2078.2%20107.3%2080.8Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M107.3%2080.8Q125.9%2088.4%20148.1%2079.6Q125.4%2072.1%20107.3%2080.8Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M111.2%2067.2Q101.1%2051.7%2079.8%2046.7Q93.0%2064.3%20111.2%2067.2Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M111.2%2067.2Q128.1%2074.7%20148.7%2067.2Q128.1%2059.7%20111.2%2067.2Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M115.5%2053.9Q106.8%2039.5%2087.4%2034.3Q99.0%2050.7%20115.5%2053.9Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M115.5%2053.9Q130.6%2061.2%20149.6%2054.9Q131.0%2047.5%20115.5%2053.9Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M120.1%2040.8Q112.7%2027.6%2095.4%2022.4Q105.3%2037.4%20120.1%2040.8Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M120.1%2040.8Q133.6%2047.8%20150.9%2042.7Q134.4%2035.5%20120.1%2040.8Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M125.2%2028.0Q118.9%2016.0%20103.7%2010.9Q112.1%2024.6%20125.2%2028.0Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M125.2%2028.0Q136.9%2034.6%20152.5%2030.6Q138.0%2023.7%20125.2%2028.0Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M130.6%2015.4Q125.4%204.7%20112.2%20-0.2Q119.2%2012.0%20130.6%2015.4Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M130.6%2015.4Q140.7%2021.6%20154.5%2018.5Q142.0%2012.0%20130.6%2015.4Z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M94.0%20316.0L93.1%20307.8L92.3%20299.6L91.6%20291.5L91.0%20283.4L90.5%20275.4L90.0%20267.5L89.7%20259.6L89.4%20251.8L89.2%20244.0L89.0%20236.3L89.0%20228.7L89.0%20221.1L89.2%20213.5L89.4%20206.0L89.7%20198.6L90.0%20191.2L90.5%20183.9L91.0%20176.7L91.6%20169.5L92.3%20162.3L93.1%20155.2L94.0%20148.2L95.0%20141.2L96.0%20134.3L97.1%20127.5L98.3%20120.7L99.6%20113.9L100.9%20107.2L102.4%20100.6L103.9%2094.0L105.5%2087.5L107.2%2081.1L109.0%2074.7L110.9%2068.3L112.8%2062.0L114.8%2055.8L116.9%2049.6L119.1%2043.5L121.4%2037.4L123.8%2031.4L126.2%2025.5L128.7%2019.6L131.3%2013.8L134.0%208.0%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222.6%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat center bottom / contain;
  filter: invert(1) sepia(1) saturate(2.2) hue-rotate(55deg) brightness(0.8);
  transform: rotate(-6deg);
}
@keyframes urzeit-feuer {
  0%, 100% { opacity: 0.75; transform: scaleY(1); }
  35%      { opacity: 1;    transform: scaleY(1.06); }
  60%      { opacity: 0.82; transform: scaleY(0.97); }
}

:root[data-design="urzeit"] .sidebar {
  background: linear-gradient(180deg, #13211a, #0d1511);
  border-right: 1px solid var(--border);
  box-shadow: inset -2px 0 0 rgba(217, 131, 36, 0.18);
}
:root[data-design="urzeit"] .brand h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--text);
  text-shadow: 0 2px 10px rgba(217, 131, 36, 0.35);
}
:root[data-design="urzeit"] .sidebar .brand {
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(217, 131, 36, 0.28);
}
:root[data-design="urzeit"] .brand .version { color: var(--accent); }


:root[data-design="urzeit"] .nav-item {
  border-radius: 0;
  position: relative;
  padding-left: 18px;
  transition: background 0.18s ease, color 0.18s ease;
}
:root[data-design="urzeit"] .nav-item::before {
  content: "";
  position: absolute;
  left: 4px; top: 50%;
  width: 4px; height: 4px;
  margin-top: -2px;
  background: var(--accent);
  transform: rotate(45deg) scale(0);
  transition: transform 0.18s ease;
}
:root[data-design="urzeit"] .nav-item:hover { background: linear-gradient(90deg, var(--hover-mid), transparent 70%); }
:root[data-design="urzeit"] .nav-item:hover::before { transform: rotate(45deg) scale(1); }
:root[data-design="urzeit"] .nav-item.active {
  background: linear-gradient(90deg, var(--accent-dim), transparent 80%);
  color: var(--text);
  box-shadow: inset 2px 0 0 var(--accent);
}
:root[data-design="urzeit"] .nav-item.active::before { transform: rotate(45deg) scale(1.3); }


:root[data-design="urzeit"] .panel,
:root[data-design="urzeit"] .tile,
:root[data-design="urzeit"] .modal,
:root[data-design="urzeit"] .metric-card {
  border: 1px solid var(--border);
  
  background-image:
    repeating-linear-gradient(107deg, rgba(255, 255, 255, 0.012) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(17deg, rgba(0, 0, 0, 0.1) 0 2px, transparent 2px 7px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 22px rgba(0, 0, 0, 0.45);
}

:root[data-design="urzeit"] .panel,
:root[data-design="urzeit"] .metric-card { position: relative; }
:root[data-design="urzeit"] .panel::before,
:root[data-design="urzeit"] .metric-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(217, 131, 36, 0.25) 35%, transparent 75%);
}
:root[data-design="urzeit"] .metric-card { padding-left: 18px; }
:root[data-design="urzeit"] .metric-card::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), transparent 80%);
  opacity: 0.55;
}
:root[data-design="urzeit"] .panel-head {
  background: linear-gradient(180deg, #1d2d22, #16211a);
  border-bottom: 2px solid var(--accent);
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  
  clip-path: polygon(0 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 10px));
}
:root[data-design="urzeit"] .page-head h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 8px;
}
:root[data-design="urzeit"] .page-head h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 120px; height: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(217, 131, 36, 0.2) 55%, transparent);
}

:root[data-design="urzeit"] button {
  background: linear-gradient(180deg, #223327, #18261c);
  border: 1px solid var(--border-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  letter-spacing: 0.03em;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  transition: box-shadow 0.18s ease, background 0.18s ease;
}
:root[data-design="urzeit"] button:hover:not(:disabled) {
  background: linear-gradient(180deg, #2b4030, #1f2f24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 14px rgba(217, 131, 36, 0.3);
}
:root[data-design="urzeit"] button.primary {
  background: linear-gradient(180deg, #e08c2a, #b96a16);
  border-color: #8a4e0c;
  color: #1a0d02;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}

:root[data-design="urzeit"] input,
:root[data-design="urzeit"] select,
:root[data-design="urzeit"] textarea {
  border-radius: 2px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}
:root[data-design="urzeit"] input:focus,
:root[data-design="urzeit"] select:focus,
:root[data-design="urzeit"] textarea:focus { box-shadow: 0 0 0 1px var(--accent), 0 0 14px rgba(217, 131, 36, 0.25); }


:root[data-design="urzeit"] .tile-image {
  border-radius: 0;
  filter: brightness(0.82) sepia(0.18) saturate(1.05);
  transition: filter 0.4s ease, transform 0.6s ease;
}
:root[data-design="urzeit"] .tile.clickable:hover .tile-image {
  filter: brightness(1.02) sepia(0.06) saturate(1.1);
  transform: scale(1.03);
}
:root[data-design="urzeit"] .tile::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 110px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(217, 131, 36, 0.16), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
:root[data-design="urzeit"] .tile.clickable:hover::after { opacity: 1; }
:root[data-design="urzeit"] .tile-image { border-bottom: 2px solid rgba(217, 131, 36, 0.45); }
:root[data-design="urzeit"] .tile-name {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0.04em;
}

:root[data-design="urzeit"] .tile.running { animation: urzeit-glut 5s ease-in-out infinite; }
@keyframes urzeit-glut {
  0%, 100% { box-shadow: 0 0 0 1px var(--ok-border), 0 0 16px rgba(224, 135, 42, 0.18), 0 8px 22px rgba(0, 0, 0, 0.5); }
  50%      { box-shadow: 0 0 0 1px var(--ok-border), 0 0 30px rgba(224, 135, 42, 0.34), 0 8px 22px rgba(0, 0, 0, 0.5); }
}

:root[data-design="urzeit"] .metric-label {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0.14em;
  color: var(--accent);
}
:root[data-design="urzeit"] .metric-value {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  color: var(--text);
}
:root[data-design="urzeit"] .bar {
  height: 9px;
  border-radius: 1px;
  background: #0d0f12;
  border-color: var(--border);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
}
:root[data-design="urzeit"] .bar > span {
  background: linear-gradient(180deg, #b4e070, #6a9c35);
  box-shadow: 0 0 10px rgba(158, 209, 84, 0.4);
}
:root[data-design="urzeit"] .bar.warn > span {
  background: linear-gradient(180deg, #edc07a, #c2871f);
  box-shadow: 0 0 10px var(--warn-glow);
}
:root[data-design="urzeit"] .bar.crit > span {
  background: linear-gradient(180deg, #e08b82, #9c2f27);
  box-shadow: 0 0 10px var(--danger-glow);
}

:root[data-design="urzeit"] .badge {
  border-radius: 1px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 10px;
}
:root[data-design="urzeit"] .console {
  border-radius: 2px;
  background:
    radial-gradient(130% 100% at 50% 0%, rgba(217, 131, 36, 0.05), transparent 60%),
    var(--console-bg);
}
:root[data-design="urzeit"] table thead th {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom-color: var(--border-strong);
}
:root[data-design="urzeit"] tbody tr.clickable:hover { background: var(--hover-soft); }



@media (prefers-reduced-motion: reduce) {
  :root[data-design="comic"] .badge.running::before,
  :root[data-design="urzeit"] .tile.running { animation: none; }
  :root[data-design="comic"] .tile.clickable:hover { transform: translate(-3px, -3px); }
}



:root[data-design] button.ok {
  background: var(--ok);
  border-color: var(--ok);
  color: var(--on-ok);
  text-shadow: none;
}
:root[data-design] button.ok:hover:not(:disabled) { background: var(--ok-hover); border-color: var(--ok-hover); }


:root[data-design="neon"] .link-knopf,
:root[data-design="kloetzchen"] .link-knopf,
:root[data-design="comic"] .link-knopf,
:root[data-design="urzeit"] .link-knopf { padding: 7px 14px; font-size: 12.5px; }