/* RSPnow! – Standard-Corporate-Design (dunkel) · (c) Ulrich Alexis Patrick Christiansen, Norderstedt */
:root {
  --bg: #02060c;
  --bg2: #060d17;
  --panel: #0a1422;
  --panel2: #0d1a2c;
  --line: #16263b;
  --line2: #1f3651;
  --text: #d7e4f2;
  --muted: #7d93ab;
  --dim: #4b5f76;
  --cyan: #31d9ff;
  --green: #22efaa;
  --amber: #ffbd4a;
  --red: #ff4f67;
  --violet: #a78bfa;
  --mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", "SFMono-Regular", Consolas, "DejaVu Sans Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --topbar-h: 54px;
  --footer-h: 34px;
  --radius: 10px;
  --glow-cyan: 0 0 0 1px rgba(49, 217, 255, .25), 0 0 24px rgba(49, 217, 255, .12);
}

html, body { background: var(--bg); color: var(--text); }
body {
  font-family: var(--sans);
  font-size: 14px;
  min-height: 100vh;
  padding-top: var(--topbar-h);
  padding-bottom: calc(var(--footer-h) + 12px);
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(49, 217, 255, .07), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(34, 239, 170, .05), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
body.fullscreen { padding-top: 12px; }
body.fullscreen .cc-topbar { display: none; }
a { color: var(--cyan); }
a:hover { color: #7fe8ff; }
::selection { background: rgba(49, 217, 255, .35); }
.mono, .label, .chip, code, kbd, .table-console td.mono { font-family: var(--mono); }
.text-muted, .muted { color: var(--muted) !important; }
.text-cyan { color: var(--cyan) !important; }
.text-green { color: var(--green) !important; }
.text-amber { color: var(--amber) !important; }
.text-red { color: var(--red) !important; }

/* ---------------------------------------------------------------- Topbar */
.cc-topbar {
  position: fixed; inset: 0 0 auto 0; height: var(--topbar-h); z-index: 1030;
  display: flex; align-items: center; gap: 18px; padding: 0 18px;
  background: rgba(3, 9, 17, .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(49, 217, 255, .08), 0 10px 30px rgba(0, 0, 0, .35);
}
.cc-logo {
  font-family: var(--mono); font-weight: 800; font-size: 20px; letter-spacing: .5px;
  text-decoration: none; white-space: nowrap; display: flex; align-items: baseline; gap: 0;
}
.cc-logo .w { color: #fff; }
.cc-logo .b { color: var(--cyan); text-shadow: 0 0 14px rgba(49, 217, 255, .55); }
.cc-logo .sub { font-size: 10px; color: var(--muted); font-weight: 500; margin-left: 10px; letter-spacing: 2px; text-transform: uppercase; }
.cc-version {
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  border: 1px solid var(--line2); border-radius: 20px; padding: 2px 8px;
}
.cc-nav { display: flex; gap: 4px; margin-left: 8px; overflow-x: auto; scrollbar-width: none; }
.cc-nav::-webkit-scrollbar { display: none; }
.cc-nav a {
  font-family: var(--mono); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--muted); text-decoration: none; padding: 7px 12px; border-radius: 7px;
  border: 1px solid transparent; white-space: nowrap;
}
.cc-nav a:hover { color: var(--text); background: rgba(49, 217, 255, .06); }
.cc-nav a.active { color: var(--cyan); border-color: rgba(49, 217, 255, .35); background: rgba(49, 217, 255, .08); }
.cc-spacer { flex: 1; }
.cc-controls { display: flex; align-items: center; gap: 10px; }
.cc-clock {
  font-family: var(--mono); font-size: 18px; color: var(--text); letter-spacing: 1px;
  min-width: 92px; text-align: right; font-variant-numeric: tabular-nums;
}
.cc-clock small { display: block; font-size: 10px; color: var(--muted); letter-spacing: 1.5px; text-align: right; margin-top: -3px; }

/* ---------------------------------------------------------------- Footer */
.cc-footer {
  position: fixed; inset: auto 0 0 0; height: var(--footer-h); z-index: 1030;
  display: flex; align-items: center; gap: 14px; padding: 0 12px;
  background: rgba(3, 9, 17, .95); border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; color: var(--muted);
}
.cc-footer .btn-fs {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.5px; padding: 3px 10px;
  border: 1px solid var(--line2); color: var(--cyan); background: transparent; border-radius: 5px;
}
.cc-footer .btn-fs:hover { background: rgba(49, 217, 255, .08); border-color: var(--cyan); }
.cc-footer .ver { margin-left: auto; white-space: nowrap; }

/* ---------------------------------------------------------------- Karten */
.console-card {
  background: linear-gradient(180deg, rgba(13, 26, 44, .92), rgba(8, 17, 30, .92));
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .03);
  position: relative; overflow: hidden;
}
.console-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(49, 217, 255, .55), transparent); opacity: .5;
}
.console-card .cc-head {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  border-bottom: 1px solid var(--line);
}
.console-card .cc-head .title {
  font-family: var(--mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--cyan);
}
.console-card .cc-head .title i { margin-right: 6px; }
.console-card .cc-head .tools { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.console-card .cc-body { padding: 16px; }

.label {
  font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 4px;
}
.value { font-family: var(--mono); font-size: 14px; color: var(--text); word-break: break-word; }
.value.big { font-size: 22px; }

.diagnostic-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}
.diagnostic-grid .cell {
  background: rgba(2, 6, 12, .55); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
}

/* ---------------------------------------------------------------- Chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; letter-spacing: 1.3px;
  text-transform: uppercase; padding: 3px 9px; border-radius: 20px; border: 1px solid var(--line2);
  color: var(--muted); background: rgba(255, 255, 255, .02); white-space: nowrap; line-height: 1.4;
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .9; }
.chip.no-dot::before { display: none; }
.chip.cyan { color: var(--cyan); border-color: rgba(49, 217, 255, .4); background: rgba(49, 217, 255, .07); }
.chip.green { color: var(--green); border-color: rgba(34, 239, 170, .4); background: rgba(34, 239, 170, .07); }
.chip.amber { color: var(--amber); border-color: rgba(255, 189, 74, .45); background: rgba(255, 189, 74, .07); }
.chip.red { color: var(--red); border-color: rgba(255, 79, 103, .5); background: rgba(255, 79, 103, .09); }
.chip.pulse::before { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ---------------------------------------------------------------- Formulare / Buttons */
.form-control, .form-select {
  background-color: rgba(2, 6, 12, .75); border: 1px solid var(--line2); color: var(--text);
  font-family: var(--mono); font-size: 13px;
}
.form-control:focus, .form-select:focus {
  background-color: rgba(2, 6, 12, .9); color: var(--text); border-color: var(--cyan);
  box-shadow: 0 0 0 .2rem rgba(49, 217, 255, .18);
}
.form-control::placeholder { color: var(--dim); }
.form-control:disabled, .form-select:disabled { background-color: rgba(10, 20, 34, .6); color: var(--dim); }
.form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2331d9ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.form-select option { background: var(--panel); color: var(--text); }
.form-check-input { background-color: var(--bg); border-color: var(--line2); }
.form-check-input:checked { background-color: var(--cyan); border-color: var(--cyan); }
.form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(49, 217, 255, .18); border-color: var(--cyan); }
.form-range::-webkit-slider-thumb { background: var(--cyan); }
.form-range::-moz-range-thumb { background: var(--cyan); }
.form-range::-webkit-slider-runnable-track { background: var(--line2); }
.form-range::-moz-range-track { background: var(--line2); }
.form-text { color: var(--muted); }
.input-group-text { background: var(--panel2); border-color: var(--line2); color: var(--muted); font-family: var(--mono); font-size: 12px; }

.btn { font-family: var(--mono); font-size: 12px; letter-spacing: 1px; border-radius: 7px; }
.btn-console {
  color: var(--cyan); border: 1px solid rgba(49, 217, 255, .45); background: rgba(49, 217, 255, .06);
}
.btn-console:hover, .btn-console:focus { color: #001018; background: var(--cyan); border-color: var(--cyan); }
.btn-console.active { color: #001018; background: var(--cyan); }
.btn-go { color: #00140d; background: var(--green); border: 1px solid var(--green); font-weight: 700; }
.btn-go:hover { color: #00140d; background: #62ffc6; border-color: #62ffc6; box-shadow: 0 0 20px rgba(34, 239, 170, .35); }
.btn-warn { color: var(--amber); border: 1px solid rgba(255, 189, 74, .5); background: rgba(255, 189, 74, .06); }
.btn-warn:hover, .btn-warn.active { color: #1a1000; background: var(--amber); border-color: var(--amber); }
.btn-danger-soft { color: var(--red); border: 1px solid rgba(255, 79, 103, .5); background: rgba(255, 79, 103, .07); }
.btn-danger-soft:hover, .btn-danger-soft.active { color: #fff; background: var(--red); border-color: var(--red); }
.btn-ghost { color: var(--muted); border: 1px solid var(--line2); background: transparent; }
.btn-ghost:hover { color: var(--text); border-color: var(--muted); }
.btn-icon { padding: 4px 9px; }

/* ---------------------------------------------------------------- Tabellen */
.table-console { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--line); margin: 0; }
.table-console th {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted); font-weight: 500; border-bottom-color: var(--line2) !important; white-space: nowrap;
}
.table-console td { vertical-align: middle; font-size: 13px; }
.table-console tbody tr:hover td { background: rgba(49, 217, 255, .035); }
.color-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 10px currentColor; vertical-align: middle; }

/* ---------------------------------------------------------------- Modals / Toasts */
.modal-content { background: var(--panel); border: 1px solid var(--line2); color: var(--text); border-radius: 12px; }
.modal-header, .modal-footer { border-color: var(--line); }
.modal-title { font-family: var(--mono); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--cyan); }
.btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
.section-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--cyan);
  border-bottom: 1px dashed var(--line2); padding-bottom: 6px; margin: 18px 0 12px;
}
.section-label:first-child { margin-top: 0; }

#rn-toasts { position: fixed; right: 16px; bottom: calc(var(--footer-h) + 14px); z-index: 2000; display: flex; flex-direction: column; gap: 8px; }
.rn-toast {
  font-family: var(--mono); font-size: 12px; padding: 10px 14px; border-radius: 8px; max-width: 420px;
  background: var(--panel2); border: 1px solid var(--line2); color: var(--text); box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  animation: tin .2s ease-out;
}
.rn-toast.ok { border-left: 3px solid var(--green); }
.rn-toast.err { border-left: 3px solid var(--red); }
.rn-toast.warn { border-left: 3px solid var(--amber); }
@keyframes tin { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Bildschirmsperre mit Spinner während Backend-Kommunikation */
#rn-lock {
  position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center;
  background: rgba(2, 6, 12, .55); backdrop-filter: blur(2px); cursor: progress;
}
#rn-lock.show { display: flex; }
#rn-lock .spin {
  width: 54px; height: 54px; border-radius: 50%; border: 3px solid rgba(49, 217, 255, .15);
  border-top-color: var(--cyan); animation: spin .8s linear infinite; box-shadow: var(--glow-cyan);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- Pegelmeter */
.meter-wrap { position: relative; }
.meter-wrap canvas { display: block; width: 100%; }
.meter-caption {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.meter-caption .val { color: var(--text); font-size: 13px; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.meter-caption .val.clip { color: var(--red); }

/* ---------------------------------------------------------------- Login */
.login-shell { min-height: calc(100vh - var(--topbar-h) - var(--footer-h) - 12px); display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.login-card { width: 100%; max-width: 420px; }
.login-card .brand { font-family: var(--mono); font-size: 34px; font-weight: 800; text-align: center; margin-bottom: 4px; }
.login-card .brand .w { color: #fff; }
.login-card .brand .b { color: var(--cyan); text-shadow: 0 0 18px rgba(49, 217, 255, .6); }
.login-card .claim { text-align: center; color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 22px; }

/* ---------------------------------------------------------------- Kundenportal */
.rn-hero {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 18px 20px; border-radius: 14px; border: 1px solid var(--line);
  background: linear-gradient(120deg, rgba(49, 217, 255, .08), rgba(34, 239, 170, .04) 60%, transparent);
}
.rn-hero h1 { font-size: 22px; margin: 0; font-weight: 600; }
.rn-hero .sub { color: var(--muted); font-size: 13px; }
.onair-lamp {
  font-family: var(--mono); font-weight: 800; letter-spacing: 4px; font-size: 15px;
  padding: 8px 16px; border-radius: 8px; border: 2px solid #3a1820; color: #5a2530; background: #12070a;
  transition: all .2s;
}
.onair-lamp.on {
  color: #fff; border-color: var(--red); background: radial-gradient(circle at 50% 40%, #ff6a7e, #c8102e);
  box-shadow: 0 0 30px rgba(255, 79, 103, .7), inset 0 0 12px rgba(255, 255, 255, .3);
  animation: lamp 2s ease-in-out infinite;
}
@keyframes lamp { 50% { box-shadow: 0 0 46px rgba(255, 79, 103, .9), inset 0 0 12px rgba(255, 255, 255, .3); } }

.connect-btn {
  width: 100%; padding: 20px; font-size: 18px; letter-spacing: 4px; font-weight: 800; border-radius: 12px;
  font-family: var(--mono); text-transform: uppercase; transition: all .15s;
}
.connect-btn.go { color: #00140d; background: linear-gradient(180deg, #4dffc0, var(--green)); border: 0; box-shadow: 0 10px 34px rgba(34, 239, 170, .25); }
.connect-btn.go:hover { box-shadow: 0 10px 44px rgba(34, 239, 170, .45); transform: translateY(-1px); }
.connect-btn.stop { color: #fff; background: linear-gradient(180deg, #ff6a7e, var(--red)); border: 0; box-shadow: 0 10px 34px rgba(255, 79, 103, .25); }
.connect-btn:disabled { opacity: .45; transform: none; box-shadow: none; }

.step-badge {
  width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 12px; font-weight: 700; color: #001018; background: var(--cyan); flex: 0 0 auto;
}
.step-badge.done { background: var(--green); }
.studio-msg {
  border: 1px solid rgba(255, 189, 74, .5); background: rgba(255, 189, 74, .08); color: #ffe2a8;
  border-radius: 10px; padding: 12px 16px; display: flex; gap: 12px; align-items: flex-start;
}
.studio-msg i { color: var(--amber); font-size: 20px; }
.status-line { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.status-line:last-child { border-bottom: 0; }
.status-line .led { width: 10px; height: 10px; border-radius: 50%; background: var(--dim); flex: 0 0 auto; }
.status-line .led.ok { background: var(--green); box-shadow: 0 0 10px var(--green); }
.status-line .led.warn { background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.status-line .led.err { background: var(--red); box-shadow: 0 0 10px var(--red); }
.status-line .k { color: var(--muted); }
.status-line .v { margin-left: auto; font-family: var(--mono); font-size: 12px; }

/* ---------------------------------------------------------------- Intern */
.big-toggle {
  font-family: var(--mono); font-weight: 800; letter-spacing: 3px; padding: 14px; border-radius: 10px; width: 100%;
}
.evlog { font-family: var(--mono); font-size: 12px; max-height: 320px; overflow-y: auto; }
.evlog .ev { display: flex; gap: 10px; padding: 4px 0; border-bottom: 1px dashed rgba(31, 54, 81, .6); }
.evlog .ev .t { color: var(--dim); flex: 0 0 auto; }
.evlog .ev.ok .m { color: var(--green); }
.evlog .ev.warn .m { color: var(--amber); }
.evlog .ev.err .m { color: var(--red); }
.evlog .ev.note .m { color: var(--violet); }
.evlog .ev.onair .m { color: var(--red); font-weight: 700; }
.vmeter-row { display: flex; gap: 18px; justify-content: center; align-items: stretch; }
.vmeter-col { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.vmeter-col .meter-wrap { width: 100%; max-width: 150px; }
.url-preview { font-family: var(--mono); font-size: 11.5px; color: var(--green); background: rgba(2, 6, 12, .8); border: 1px dashed var(--line2); border-radius: 6px; padding: 8px 10px; word-break: break-all; }
.wait-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; background: rgba(255, 189, 74, .04); }
.pre-log { font-family: var(--mono); font-size: 11px; color: var(--muted); background: rgba(2, 6, 12, .8); border: 1px solid var(--line); border-radius: 6px; padding: 8px; max-height: 160px; overflow: auto; white-space: pre-wrap; margin: 0; }
.tab-pane-rn { display: none; }
.tab-pane-rn.active { display: block; animation: tin .15s ease-out; }

@media (max-width: 768px) {
  .cc-logo .sub, .cc-clock small { display: none; }
  .cc-topbar { gap: 10px; padding: 0 10px; }
  .cc-clock { font-size: 15px; min-width: 70px; }
  .cc-footer .copy { display: none; }
}