/* ============================================================
   style.css — Hosting nevio.cloud
   Dunkles Glas-Design, an iOS angelehnt
   ============================================================ */

:root {
  --bg:             #08080c;
  --surface:        rgba(255, 255, 255, 0.055);
  --surface-2:      rgba(255, 255, 255, 0.09);
  --surface-3:      rgba(255, 255, 255, 0.13);
  --stroke:         rgba(255, 255, 255, 0.10);
  --stroke-2:       rgba(255, 255, 255, 0.17);
  --specular:       rgba(255, 255, 255, 0.28);
  --blur:           blur(44px) saturate(180%);

  --text:           rgba(255, 255, 255, 0.96);
  --text-2:         rgba(255, 255, 255, 0.62);
  --text-3:         rgba(255, 255, 255, 0.38);
  --text-4:         rgba(255, 255, 255, 0.20);

  --blue:   #0a84ff;
  --indigo: #5e5ce6;
  --green:  #30d158;
  --orange: #ff9f0a;
  --red:    #ff453a;
  --purple: #bf5af2;

  --accent:      var(--blue);
  --accent-soft: rgba(10, 132, 255, 0.16);

  --r-lg:   30px;
  --r-md:   22px;
  --r-sm:   14px;
  --r-pill: 999px;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;

  --spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease:   cubic-bezier(0.22, 1, 0.36, 1);

  --shadow:       0 1px 2px rgba(0,0,0,.3), 0 8px 32px rgba(0,0,0,.34);
  --shadow-float: 0 2px 8px rgba(0,0,0,.36), 0 24px 64px rgba(0,0,0,.5);

  --sidebar-w: 256px;
  --topbar-h:  62px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Farbiges Umgebungslicht hinter dem Glas */
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46rem 30rem at 10% -8%,  rgba(10,132,255,.17), transparent 62%),
    radial-gradient(38rem 28rem at 94% 6%,   rgba(191,90,242,.12), transparent 60%),
    radial-gradient(50rem 32rem at 66% 106%, rgba(94,92,230,.11), transparent 64%);
}

h1, h2, h3 { margin: 0; font-weight: 640; letter-spacing: -0.028em; line-height: 1.2; }
h1 { font-size: 28px; }
h2 { font-size: 21px; }
h3 { font-size: 16px; letter-spacing: -0.02em; }
p  { margin: 0 0 var(--sp-3); }

a { color: var(--accent); text-decoration: none; transition: opacity 160ms var(--ease); }
a:hover { opacity: .78; }

code, .mono { font-family: var(--mono); font-size: .92em; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.13);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--r-pill);
}
::selection { background: var(--accent-soft); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); }

/* ------------------------------------------------------------
   Karten
   ------------------------------------------------------------ */
.card {
  position: relative;
  padding: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--surface);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  isolation: isolate;
}

/* Glanzkante oben — macht die Fläche als Glas lesbar */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(to bottom, var(--specular), rgba(255,255,255,.05) 24%, transparent 54%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.card > * { position: relative; }

.card__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.card__title { font-size: 15px; font-weight: 620; }
.card__actions { margin-left: auto; display: flex; gap: var(--sp-2); }

.grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid--stats { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.stat__label {
  font-size: 11px; font-weight: 620; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-3); margin-bottom: 6px;
}
.stat__value {
  font-size: 26px; font-weight: 660; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.stat__foot { font-size: 12px; color: var(--text-3); margin-top: 4px; }

/* ------------------------------------------------------------
   Layout
   ------------------------------------------------------------ */
.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

.sidebar {
  position: sticky; top: 0; height: 100vh; z-index: 40;
  padding: var(--sp-5) var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-5);
  background: rgba(255,255,255,.03);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-right: 1px solid var(--stroke);
}

.brand { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-3); }
.brand__mark {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 11px; font-size: 16px;
  background: linear-gradient(145deg, var(--blue), var(--indigo));
  box-shadow: 0 4px 14px rgba(10,132,255,.34), inset 0 1px 0 rgba(255,255,255,.36);
}
.brand__text { font-size: 14px; font-weight: 640; letter-spacing: -.02em; }
.brand__sub  { font-size: 11px; color: var(--text-3); }

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav__label {
  padding: var(--sp-4) var(--sp-3) var(--sp-2);
  font-size: 11px; font-weight: 620; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-4);
}
.nav__item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 9px var(--sp-3); border-radius: 13px;
  color: var(--text-2); font-size: 14px; font-weight: 520;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.nav__item:hover { background: var(--surface); color: var(--text); opacity: 1; }
.nav__item.is-active {
  color: var(--text); background: var(--surface-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.nav__icon { width: 19px; text-align: center; flex: none; opacity: .9; }

.sidebar__user {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--stroke);
}
.avatar {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 640;
  background: linear-gradient(145deg, var(--purple), #ff375f);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--sp-6);
  background: rgba(8,8,12,.62);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--stroke);
}
.topbar__title { font-size: 16px; font-weight: 620; letter-spacing: -.02em; }
.spacer { flex: 1; }

.content { padding: var(--sp-6); max-width: 1280px; width: 100%; }

.page-head { display: flex; align-items: flex-end; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 18px;
  border: 1px solid var(--stroke-2); border-radius: var(--r-pill);
  background: var(--surface-2);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  color: var(--text);
  font-family: inherit; font-size: 14px; font-weight: 560;
  letter-spacing: -.01em; white-space: nowrap; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  transition: transform 160ms var(--spring), background 160ms var(--ease), opacity 160ms var(--ease);
}
.btn:hover  { background: var(--surface-3); opacity: 1; }
.btn:active { transform: scale(.96); }
.btn:disabled, .btn.is-busy { opacity: .45; pointer-events: none; }

.btn--primary {
  background: var(--accent); border-color: transparent; color: #fff;
  box-shadow: 0 4px 16px rgba(10,132,255,.4), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn--primary:hover { background: #339cff; }

.btn--danger {
  background: var(--red); border-color: transparent; color: #fff;
  box-shadow: 0 4px 16px rgba(255,69,58,.34), inset 0 1px 0 rgba(255,255,255,.26);
}

.btn--ghost {
  background: transparent; border-color: transparent;
  box-shadow: none; color: var(--text-2);
}
.btn--ghost:hover { background: var(--surface); color: var(--text); }

.btn--sm    { height: 30px; padding: 0 13px; font-size: 13px; }
.btn--lg    { height: 46px; padding: 0 26px; font-size: 15px; }
.btn--icon  { width: 38px; padding: 0; }
.btn--block { width: 100%; }

/* ------------------------------------------------------------
   Formulare
   ------------------------------------------------------------ */
.field { margin-bottom: var(--sp-4); }

.label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 560; color: var(--text-2); }

.input, .select, .textarea {
  width: 100%; min-height: 42px; padding: 10px 15px;
  border: 1px solid var(--stroke); border-radius: var(--r-sm);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--text); font-family: inherit; font-size: 15px;
  transition: border-color 160ms var(--ease), background 160ms var(--ease), box-shadow 160ms var(--ease);
}
.input::placeholder { color: var(--text-4); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent);
  background: rgba(255,255,255,.075);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.input--invalid { border-color: var(--red); }

.select {
  appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='rgba(255,255,255,.5)' d='M6 8 0 1.4 1.4 0 6 4.6 10.6 0 12 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
}
.select option { background: #16161c; color: var(--text); }

.hint  { margin-top: 6px; font-size: 12px; color: var(--text-3); }

/* Schalter im iOS-Stil */
.switch { display: inline-flex; align-items: center; gap: var(--sp-3); cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  position: relative; width: 46px; height: 28px; flex: none;
  border-radius: var(--r-pill); background: rgba(255,255,255,.14);
  transition: background 260ms var(--spring);
}
.switch__track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 24px; height: 24px; border-radius: var(--r-pill);
  background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.32);
  transition: transform 260ms var(--spring);
}
.switch input:checked + .switch__track { background: var(--green); }
.switch input:checked + .switch__track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { box-shadow: 0 0 0 4px var(--accent-soft); }

/* ------------------------------------------------------------
   Anzeigen
   ------------------------------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 11px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--stroke);
  font-size: 12px; font-weight: 560; white-space: nowrap;
}
.badge--green  { background: rgba(48,209,88,.16);  border-color: rgba(48,209,88,.3);  color: #74e694; }
.badge--blue   { background: rgba(10,132,255,.16); border-color: rgba(10,132,255,.3); color: #7ebeff; }
.badge--red    { background: rgba(255,69,58,.16);  border-color: rgba(255,69,58,.3);  color: #ff8b83; }
.badge--gray   { color: var(--text-3); }

.dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: currentColor; flex: none; }

.notice {
  display: flex; gap: var(--sp-3); padding: var(--sp-4);
  border-radius: var(--r-sm); border: 1px solid var(--stroke);
  background: var(--surface); font-size: 14px; line-height: 1.5;
}
.notice--info    { background: rgba(10,132,255,.10); border-color: rgba(10,132,255,.24); }
.notice--success { background: rgba(48,209,88,.10);  border-color: rgba(48,209,88,.24); }
.notice--warning { background: rgba(255,159,10,.10); border-color: rgba(255,159,10,.24); }
.notice--danger  { background: rgba(255,69,58,.10);  border-color: rgba(255,69,58,.24); }
.notice__icon    { flex: none; font-size: 16px; }

.empty { padding: var(--sp-7) var(--sp-5); text-align: center; color: var(--text-2); }
.empty__icon  { font-size: 38px; opacity: .28; margin-bottom: var(--sp-3); }
.empty__title { font-size: 16px; font-weight: 620; color: var(--text); margin-bottom: 6px; }
.empty__text  { font-size: 14px; max-width: 42ch; margin: 0 auto var(--sp-4); }

/* ------------------------------------------------------------
   Tabellen
   ------------------------------------------------------------ */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  padding: var(--sp-3) var(--sp-4); text-align: left;
  font-size: 11px; font-weight: 620; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-3);
  border-bottom: 1px solid var(--stroke); white-space: nowrap;
}
.table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid rgba(255,255,255,.05); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: rgba(255,255,255,.035); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   Anmeldeseite
   ------------------------------------------------------------ */
.auth { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-5); }

.auth__card {
  width: min(410px, 100%);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.055);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--stroke-2);
  box-shadow: var(--shadow-float);
  animation: rise 460ms var(--spring);
}
@keyframes rise { from { opacity: 0; transform: translateY(22px) scale(.97); } }

.auth__head { text-align: center; margin-bottom: var(--sp-5); }
.auth__mark {
  width: 56px; height: 56px; margin: 0 auto var(--sp-4);
  display: grid; place-items: center; border-radius: 18px; font-size: 25px;
  background: linear-gradient(145deg, var(--blue), var(--indigo));
  box-shadow: 0 8px 28px rgba(10,132,255,.36), inset 0 1px 0 rgba(255,255,255,.36);
}
.auth__sub { color: var(--text-2); font-size: 14px; margin-top: 7px; }
.auth__foot { margin-top: var(--sp-5); text-align: center; font-size: 13px; color: var(--text-3); }

/* ------------------------------------------------------------
   Toasts
   ------------------------------------------------------------ */
.toasts {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 100;
  display: flex; flex-direction: column; gap: var(--sp-2); pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: var(--sp-3);
  min-width: 260px; max-width: 380px; padding: 12px var(--sp-4);
  border-radius: var(--r-sm);
  background: rgba(28,28,34,.88);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--stroke-2);
  box-shadow: var(--shadow-float);
  font-size: 14px; pointer-events: auto;
  animation: toast-in 280ms var(--spring);
}
@keyframes toast-in  { from { opacity: 0; transform: translateX(30px); } }
@keyframes toast-out { to   { opacity: 0; transform: translateX(30px); } }
.toast.is-leaving { animation: toast-out 160ms var(--ease) forwards; }
.toast--success { border-left: 3px solid var(--green); }
.toast--error   { border-left: 3px solid var(--red); }
.toast--info    { border-left: 3px solid var(--blue); }
.toast--warning { border-left: 3px solid var(--orange); }

/* ------------------------------------------------------------
   Hilfsklassen
   ------------------------------------------------------------ */
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row--between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.muted { color: var(--text-2); }
.dim   { color: var(--text-3); }
.tabular { font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-xs { font-size: 12px; } .text-sm { font-size: 13px; }
.mt-2 { margin-top: var(--sp-2); }  .mb-2 { margin-bottom: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }  .mb-4 { margin-bottom: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }  .mb-5 { margin-bottom: var(--sp-5); }
.hidden { display: none !important; }

/* ------------------------------------------------------------
   Schmale Bildschirme
   ------------------------------------------------------------ */
.sidebar__toggle { display: none; }

@media (max-width: 1024px) {
  :root { --sidebar-w: 0px; }
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: 0; left: 0; width: 274px;
    transform: translateX(-100%);
    transition: transform 280ms var(--spring);
    background: rgba(12,12,18,.94);
  }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar__toggle { display: inline-flex; }
  .content { padding: var(--sp-4); }
  .topbar  { padding: 0 var(--sp-4); }
}

@media (max-width: 640px) {
  h1 { font-size: 23px; }
  .grid { grid-template-columns: 1fr; }
  .card { padding: var(--sp-4); border-radius: 20px; }
  .toasts { left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4); }
  .toast { min-width: 0; max-width: none; }
  .btn { height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

@supports not (backdrop-filter: blur(1px)) {
  .card, .toast, .sidebar, .topbar, .auth__card { background: rgba(20,20,26,.95); }
}

/* ============================================================
   Symbole
   ============================================================ */
.icon {
  width: 18px;
  height: 18px;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vertical-align: -3px;
}
.icon--sm { width: 15px; height: 15px; stroke-width: 1.8; }
.icon--lg { width: 22px; height: 22px; stroke-width: 1.5; }

/* ============================================================
   Regler
   ============================================================ */
.slider { margin-bottom: var(--sp-5); }

.slider__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.slider__label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 560;
  color: var(--text-2);
}

.slider__value {
  margin-left: auto;
  font-size: 19px;
  font-weight: 660;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.slider__unit { font-size: 13px; font-weight: 520; color: var(--text-3); margin-left: 3px; }

/* Die Schiene bekommt links den gefüllten Teil über einen Verlauf,
   dessen Breite per CSS-Variable aus dem Skript kommt. */
.slider__track {
  position: relative;
  height: 30px;
  display: flex;
  align-items: center;
}

.slider__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  margin: 0;
  border-radius: var(--r-pill);
  outline: none;
  cursor: grab;
  background:
    linear-gradient(90deg, var(--blue) 0%, #40c8e0 var(--fill, 50%),
                    rgba(255,255,255,.10) var(--fill, 50%), rgba(255,255,255,.10) 100%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.30);
  transition: box-shadow 160ms var(--ease);
}
.slider__input:active { cursor: grabbing; }

/* Griff — WebKit */
.slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.32), 0 4px 12px rgba(0,0,0,.28),
              inset 0 -1px 1px rgba(0,0,0,.06);
  cursor: grab;
  transition: transform 200ms var(--spring), box-shadow 200ms var(--ease);
}
.slider__input:hover::-webkit-slider-thumb { transform: scale(1.08); }
.slider__input:active::-webkit-slider-thumb { transform: scale(1.16); cursor: grabbing; }

/* Griff — Firefox */
.slider__input::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.32), 0 4px 12px rgba(0,0,0,.28);
  cursor: grab;
  transition: transform 200ms var(--spring);
}
.slider__input:active::-moz-range-thumb { transform: scale(1.16); }

.slider__input:focus-visible { box-shadow: 0 0 0 4px var(--accent-soft); }

.slider__input:disabled { opacity: .4; cursor: not-allowed; }

/* Skala unter dem Regler */
.slider__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
}

.slider__hint { margin-top: 7px; font-size: 12px; color: var(--text-3); }
.slider__hint--warn { color: var(--orange); }

/* Warnfarbe, wenn nahe an der Kapazitätsgrenze */
.slider--warn .slider__input {
  background:
    linear-gradient(90deg, var(--orange) 0%, var(--yellow) var(--fill, 50%),
                    rgba(255,255,255,.10) var(--fill, 50%), rgba(255,255,255,.10) 100%);
}

/* ============================================================
   Reiter mit Symbolen
   ============================================================ */
.tabs {
  display: inline-flex;
  padding: 4px;
  gap: 2px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.055);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  overflow-x: auto;
  max-width: 100%;
}
.tabs::-webkit-scrollbar { display: none; }

.tabs__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 560;
  white-space: nowrap;
  cursor: pointer;
  transition: color 160ms var(--ease), background 260ms var(--spring);
}
.tabs__item:hover { color: var(--text); }
.tabs__item.is-active {
  color: var(--text);
  background: rgba(255,255,255,.13);
  box-shadow: 0 2px 8px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.2);
}

/* ============================================================
   Steuerleiste eines Dienstes
   ============================================================ */
.power {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.power__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--stroke-2);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 560;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  transition: transform 160ms var(--spring), background 160ms var(--ease);
}
.power__btn:hover  { background: var(--surface-3); }
.power__btn:active { transform: scale(.96); }
.power__btn:disabled { opacity: .4; pointer-events: none; }

.power__btn--start {
  background: var(--green); border-color: transparent; color: #04240d;
  box-shadow: 0 4px 16px rgba(48,209,88,.32), inset 0 1px 0 rgba(255,255,255,.34);
}
.power__btn--start:hover { background: #3ee066; }

.power__btn--stop {
  background: var(--surface-2);
}

.power__btn--kill {
  background: transparent;
  border-color: rgba(255,69,58,.35);
  color: var(--red);
  box-shadow: none;
}
.power__btn--kill:hover { background: rgba(255,69,58,.12); }

/* Kennzahlen rechts in der Leiste */
.metrics {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-left: auto;
  flex-wrap: wrap;
}
.metric {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.metric__value { color: var(--text); font-weight: 560; }

@media (max-width: 640px) {
  .metrics { margin-left: 0; width: 100%; }
  .power__btn { flex: 1; justify-content: center; }
}

/* ============================================================
   Dienstliste in der Navigation
   ============================================================ */
.nav__services {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 2px 0 var(--sp-2);
  padding-left: 10px;
  position: relative;
}

/* Feine Führungslinie links, damit die Einrückung Halt bekommt */
.nav__services::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: rgba(255,255,255,.07);
}

.nav__service {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px var(--sp-3) 6px 22px;
  border-radius: 10px;

  /* Etwas technischer und zurückhaltender als die Hauptnavigation */
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: -.01em;
  color: rgba(255, 255, 255, 0.44);

  min-width: 0;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.nav__service:hover {
  background: rgba(255,255,255,.045);
  color: rgba(255,255,255,.72);
  opacity: 1;
}
.nav__service.is-active {
  background: rgba(255,255,255,.075);
  color: rgba(255,255,255,.88);
}
.nav__service--more { font-style: italic; color: var(--text-4); }

/* Statuspunkt */
.nav__dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--text-4);
}
.nav__dot--online {
  background: var(--green);
  box-shadow: 0 0 6px rgba(48,209,88,.6);
}
.nav__dot--pending {
  background: var(--orange);
  animation: navBlink 1.4s ease-in-out infinite;
}
.nav__dot--error   { background: var(--red); box-shadow: 0 0 6px rgba(255,69,58,.5); }
.nav__dot--offline { background: rgba(255,255,255,.22); }
.nav__dot--muted   { background: transparent; }

@keyframes navBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* Benutzerkachel als Verknüpfung zum Konto */
.sidebar__user { transition: background 160ms var(--ease), border-color 160ms var(--ease); }
.sidebar__user:hover      { background: var(--surface-2); border-color: var(--stroke-2); }
.sidebar__user.is-active  { background: var(--surface-2); border-color: var(--stroke-2); }

.sidebar__user-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 1;
  min-width: 0;
  color: inherit;
}
.sidebar__user-link:hover { opacity: 1; }

/* Merkmal für geteilte Instanzen in der Navigation */
.nav__shared {
  margin-left: auto;
  flex: none;
  opacity: .45;
  display: inline-flex;
}
.nav__shared .icon { width: 13px; height: 13px; }
.nav__service:hover .nav__shared { opacity: .75; }

/* ============================================================
   Konsolenausgabe
   ============================================================ */
.console-out {
  height: 480px;
  overflow-y: auto;
  padding: 16px;
  background: rgba(0, 0, 0, .38);

  /* Ligaturen aus: sonst werden -> und != zu Sonderzeichen verschmolzen */
  font-family: "SF Mono", "JetBrains Mono", "Cascadia Mono", "DejaVu Sans Mono",
               ui-monospace, Menlo, Consolas, monospace;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  font-size: 12.5px;
  line-height: 1.6;
  letter-spacing: 0;

  /* Tabulatoren aus Java-Stacktraces sinnvoll darstellen */
  tab-size: 4;
}

.console-out .console__line {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;   /* bricht nicht mitten im Wort, nur wenn nötig */
}

/* Fortsetzungszeilen leicht einrücken, damit lange Ausgaben lesbar bleiben */
.console-out .console__line {
  padding-left: 1.6em;
  text-indent: -1.6em;
}

@media (max-width: 640px) {
  .console-out { height: 360px; font-size: 12px; }
}