:root {
  --bg: #050812;
  --panel: rgba(12, 20, 35, 0.86);
  --panel-2: rgba(16, 27, 45, 0.92);
  --line: rgba(83, 201, 255, 0.22);
  --cyan: #35d6ff;
  --blue: #1179ff;
  --white: #f6fbff;
  --muted: #8ea8bd;
  --green: #49f0a7;
  --yellow: #ffd166;
  --red: #ff5874;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100%;
  font-family: Inter, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--white);
  background:
    radial-gradient(circle at 15% 15%, rgba(16, 121, 255, 0.18), transparent 34rem),
    radial-gradient(circle at 85% 5%, rgba(53, 214, 255, 0.14), transparent 26rem),
    linear-gradient(135deg, #050812 0%, #09111f 48%, #04060d 100%);
}

button, select, input { font: inherit; }
a { color: inherit; text-decoration: none; }

.jkd-shell { display: flex; min-height: 100vh; }
.jkd-sidebar {
  width: 286px;
  padding: 22px 18px;
  border-right: 1px solid rgba(75, 179, 255, 0.16);
  background: rgba(3, 7, 14, 0.68);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  height: 100vh;
}

.jkd-brand { display: flex; align-items: center; gap: 13px; margin-bottom: 28px; }
.jkd-brand-mark {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  border: 1px solid rgba(53, 214, 255, 0.34);
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(17, 121, 255, 0.18), rgba(53, 214, 255, 0.06));
  box-shadow: 0 0 28px rgba(53, 214, 255, 0.16);
  overflow: hidden;
}
.jkd-brand-mark img { width: 52px; height: 52px; object-fit: contain; }
.jkd-brand-mark.fallback-mark::before { content: 'JK'; font-size: 19px; font-weight: 900; color: var(--cyan); }
.jkd-brand-text strong { display: block; font-size: 18px; letter-spacing: .3px; }
.jkd-brand-text small { color: var(--muted); }

.jkd-nav { display: grid; gap: 8px; }
.jkd-nav a {
  padding: 12px 14px;
  color: #bed4e5;
  border: 1px solid transparent;
  border-radius: 15px;
  transition: 160ms ease;
}
.jkd-nav a:hover,
.jkd-nav a.active {
  color: var(--white);
  border-color: rgba(53, 214, 255, 0.28);
  background: linear-gradient(90deg, rgba(17, 121, 255, 0.22), rgba(53, 214, 255, 0.08));
  box-shadow: 0 0 24px rgba(17, 121, 255, 0.12);
}

.jkd-sidebar-card {
  margin-top: 24px;
  padding: 14px;
  border-radius: 17px;
  background: rgba(9, 18, 32, 0.92);
  border: 1px solid rgba(53, 214, 255, 0.18);
  display: flex;
  align-items: center;
  gap: 10px;
}
.jkd-sidebar-card strong { display:block; font-size: 14px; }
.jkd-sidebar-card small { display:block; color: var(--muted); margin-top: 2px; }
.dot { width: 11px; height: 11px; border-radius: 999px; display: inline-block; }
.dot-demo { background: var(--cyan); box-shadow: 0 0 18px rgba(53, 214, 255, 0.85); }

.jkd-main { flex: 1; padding: 28px; max-width: 1680px; margin: 0 auto; }
.jkd-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(16, 28, 48, 0.88), rgba(7, 14, 27, 0.78));
  border: 1px solid rgba(83, 201, 255, 0.18);
  box-shadow: var(--shadow);
}
.eyebrow { margin: 0 0 7px; text-transform: uppercase; letter-spacing: .18em; color: var(--cyan); font-weight: 800; font-size: 12px; }
h1, h2, h3 { margin: 0; line-height: 1.08; }
h1 { font-size: clamp(32px, 4vw, 58px); }
h2 { font-size: 22px; }
h3 { font-size: 17px; }
.hero-text { margin: 10px 0 0; color: #a8c1d5; max-width: 760px; }
.hero-status { text-align: right; display: grid; gap: 8px; justify-items: end; }
.hero-status small { color: var(--muted); }
.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(53, 214, 255, 0.28);
  color: var(--cyan);
  background: rgba(53, 214, 255, 0.09);
  font-weight: 800;
}
.status-pill.running { color: var(--green); border-color: rgba(73, 240, 167, 0.45); background: rgba(73, 240, 167, 0.10); }
.status-pill.saved { color: var(--yellow); border-color: rgba(255, 209, 102, 0.38); background: rgba(255, 209, 102, 0.10); }
.status-pill.error { color: var(--red); border-color: rgba(255, 88, 116, 0.45); background: rgba(255, 88, 116, 0.10); }

.control-strip {
  margin-top: 18px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(83, 201, 255, 0.14);
  border-radius: 24px;
  background: rgba(8, 17, 31, 0.70);
}
.control-group { display: grid; gap: 7px; min-width: 245px; }
.control-group.wide { min-width: 310px; }
.control-group.compact { min-width: 190px; }
.control-group label { color: var(--muted); font-size: 13px; font-weight: 700; }
select, input {
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(53, 214, 255, 0.20);
  background: rgba(4, 10, 20, 0.92);
  color: var(--white);
  padding: 0 14px;
  outline: none;
}
input:focus, select:focus { border-color: rgba(53, 214, 255, 0.55); box-shadow: 0 0 0 3px rgba(53, 214, 255, 0.10); }
.button-row { display:flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.btn {
  height: 46px;
  padding: 0 18px;
  border-radius: 15px;
  border: 1px solid rgba(53, 214, 255, 0.18);
  color: var(--white);
  cursor: pointer;
  font-weight: 900;
  transition: transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primary { background: linear-gradient(135deg, var(--blue), var(--cyan)); box-shadow: 0 12px 28px rgba(17, 121, 255, 0.25); }
.btn-secondary { background: rgba(18, 31, 51, 0.95); }
.btn-ghost { background: rgba(53, 214, 255, 0.07); }
.mini-btn {
  border: 1px solid rgba(53, 214, 255, 0.26);
  border-radius: 13px;
  color: var(--white);
  background: rgba(53, 214, 255, 0.08);
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 900;
}

.profile-panel,
.gauge-card,
.center-stack,
.metric-card,
.chart-panel,
.workshop-note {
  border: 1px solid rgba(83, 201, 255, 0.16);
  background: linear-gradient(145deg, rgba(13, 24, 42, 0.86), rgba(5, 11, 21, 0.84));
  box-shadow: var(--shadow);
}
.profile-panel { margin-top: 18px; border-radius: 30px; padding: 20px; }
.panel-header { display:flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 14px; }
.profile-readiness {
  min-width: 190px;
  border: 1px solid rgba(83, 201, 255, 0.20);
  border-radius: 20px;
  background: rgba(4, 11, 22, 0.68);
  padding: 12px 16px;
  display: grid;
  justify-items: end;
  gap: 3px;
}
.profile-readiness span { color: var(--muted); font-weight: 800; font-size: 12px; }
.profile-readiness strong { font-size: 27px; color: var(--cyan); }
.profile-readiness.ready strong { color: var(--green); }
.profile-readiness.warn strong { color: var(--yellow); }
.profile-readiness.alert strong { color: var(--red); }
.profile-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1.2fr; gap: 14px; }
.profile-card {
  border-radius: 24px;
  border: 1px solid rgba(83, 201, 255, 0.14);
  background: rgba(4, 11, 22, 0.55);
  padding: 16px;
}
.profile-card h3 { margin-bottom: 13px; color: #dff7ff; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.form-grid label { display: grid; gap: 6px; min-width: 0; }
.form-grid span { color: var(--muted); font-size: 12px; font-weight: 850; }
.form-grid input, .form-grid select { width: 100%; height: 42px; }
.tire-grid, .gear-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.helper-row { display: grid; gap: 8px; margin-top: 12px; }
.helper-row span { color: #91abc0; font-size: 12px; line-height: 1.45; }
.profile-result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.profile-result-grid div {
  border: 1px solid rgba(53, 214, 255, 0.12);
  border-radius: 16px;
  padding: 10px;
  background: rgba(8, 18, 32, 0.66);
}
.profile-result-grid span { display: block; color: var(--muted); font-size: 12px; font-weight: 850; }
.profile-result-grid strong { display: block; margin-top: 5px; font-size: 18px; }
.profile-note { margin: 12px 0 0; color: #9eb8ca; font-size: 13px; line-height: 1.45; }

.cockpit-grid { margin-top: 18px; display: grid; grid-template-columns: minmax(330px, 1fr) 280px minmax(330px, 1fr); gap: 18px; align-items: stretch; }
.gauge-card { border-radius: 30px; padding: 20px; min-height: 370px; position: relative; overflow: hidden; }
.gauge-card::after {
  content: '';
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 50% 70%, rgba(53, 214, 255, 0.18), transparent 42%);
  pointer-events: none;
}
.gauge-topline,
.gauge-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; position: relative; z-index: 2; }
.gauge-topline span,
.gauge-footer span { color: var(--muted); font-weight: 700; }
.gauge-topline strong { font-size: 26px; }
.gauge-card canvas { width: 100%; height: 290px; position: relative; z-index: 1; }
.gear-badge,
.run-badge {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(53, 214, 255, 0.10);
  border: 1px solid rgba(53, 214, 255, 0.22);
  color: var(--cyan) !important;
}

.center-stack { border-radius: 30px; padding: 16px; display: grid; gap: 12px; }
.power-card,
.mini-card {
  border-radius: 22px;
  border: 1px solid rgba(83, 201, 255, 0.14);
  background: rgba(4, 11, 22, 0.58);
  padding: 16px;
}
.power-card span,
.mini-card span { display:block; color: var(--muted); font-weight: 800; font-size: 13px; }
.power-card strong { display:block; margin-top: 7px; font-size: 42px; letter-spacing: -1px; }
.power-card small { color: var(--cyan); font-size: 19px; font-weight: 900; }
.mini-card strong { display:block; margin-top: 6px; font-size: 25px; }
.temp-card.warn,
.mini-card.warn { border-color: rgba(255, 209, 102, .45); background: rgba(255, 209, 102, 0.06); }
.temp-card.alert,
.mini-card.alert { border-color: rgba(255, 88, 116, .50); background: rgba(255, 88, 116, 0.08); box-shadow: 0 0 24px rgba(255, 88, 116, 0.12); }

.metric-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 18px; }
.metric-card { border-radius: 22px; padding: 16px; }
.metric-card span { display:block; color: var(--muted); font-size: 13px; font-weight: 800; }
.metric-card strong { display:block; margin-top: 8px; font-size: 28px; }
.metric-card small { display:block; margin-top: 4px; color: #7691a8; }

.chart-panel { margin-top: 18px; border-radius: 30px; padding: 22px; }
.legend { display:flex; gap: 14px; color: var(--muted); font-weight: 800; font-size: 13px; flex-wrap: wrap; justify-content: flex-end; }
.line { display:inline-block; width: 24px; height: 4px; border-radius: 99px; margin-right: 7px; vertical-align: middle; }
.line.power { background: var(--cyan); }
.line.torque { background: var(--green); }
.line.speed { background: var(--yellow); }
#performanceChart { width: 100%; height: 420px; border-radius: 20px; background: rgba(4, 9, 18, 0.55); }

.workshop-note { margin-top: 18px; border-radius: 26px; padding: 20px; }
.workshop-note p { color: #a9c0d2; max-width: 980px; }
.note-list { display:flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.note-list span { padding: 9px 12px; border-radius: 999px; background: rgba(53, 214, 255, 0.08); border: 1px solid rgba(53, 214, 255, 0.16); color: #bce9f7; font-weight: 800; font-size: 13px; }

@media (max-width: 1440px) {
  .profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1180px) {
  .jkd-shell { display: block; }
  .jkd-sidebar { width: auto; height: auto; position: relative; }
  .jkd-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cockpit-grid { grid-template-columns: 1fr; }
  .center-stack { grid-template-columns: repeat(2, 1fr); }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .control-strip { flex-wrap: wrap; align-items: stretch; }
}

@media (max-width: 760px) {
  .profile-grid, .form-grid, .profile-result-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .jkd-main { padding: 16px; }
  .jkd-hero, .control-strip, .panel-header { display: grid; text-align: left; }
  .hero-status { justify-items: start; text-align: left; }
  .jkd-nav { grid-template-columns: 1fr; }
  .center-stack, .metric-grid { grid-template-columns: 1fr; }
  .button-row { justify-content: stretch; }
  .btn { width: 100%; }
}

/* Step 6.2 Live-Prep - praxisfreundliche unbekannte Werte */
.form-grid .span-2 { grid-column: 1 / -1; }
.info-card {
  border: 1px solid rgba(53, 214, 255, 0.18);
  border-radius: 17px;
  background: rgba(53, 214, 255, 0.06);
  padding: 12px;
  display: grid;
  gap: 5px;
}
.info-card strong { color: #dff7ff; font-size: 13px; }
.info-card span { color: #9eb8ca; font-size: 12px; line-height: 1.45; }


/* Step 6.2 Live-Prepare */
.live-prep-panel{
  margin: 18px 0 22px;
  padding: 20px;
  border: 1px solid rgba(0, 225, 255, .22);
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(7, 16, 31, .92), rgba(4, 9, 18, .96));
  box-shadow: 0 0 38px rgba(0, 225, 255, .08), inset 0 0 0 1px rgba(255,255,255,.03);
}
.live-header{align-items:flex-start;gap:16px;}
.panel-subtext{margin:.25rem 0 0;color:#9fb5c7;max-width:760px;line-height:1.5;}
.live-badge{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#d9f7ff;font-weight:800;white-space:nowrap;}
.live-badge.ok{background:rgba(0,255,170,.12);border-color:rgba(0,255,170,.35);color:#aaffdf;}
.live-badge.warn{background:rgba(255,196,0,.12);border-color:rgba(255,196,0,.35);color:#ffeaa3;}
.live-badge.error{background:rgba(255,72,102,.12);border-color:rgba(255,72,102,.35);color:#ffb7c5;}
.live-prep-grid{display:grid;grid-template-columns:1.1fr 1.2fr .9fr;gap:16px;margin-top:16px;}
.live-card{border:1px solid rgba(255,255,255,.09);border-radius:20px;background:rgba(255,255,255,.045);padding:16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);}
.live-card h3{margin:0 0 12px;color:#ffffff;}
.live-form-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.live-button-row{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px;}
.live-small-note{margin:12px 0 0;color:#aabac8;font-size:.92rem;line-height:1.45;}
.live-stage-row{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.live-stage-row span{color:#6feaff;font-size:.8rem;text-transform:uppercase;letter-spacing:.09em;font-weight:800;}
.live-stage-row strong{color:#fff;line-height:1.35;}
.signal-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;}
.signal-grid div{border-radius:16px;padding:12px;background:rgba(0,0,0,.26);border:1px solid rgba(255,255,255,.08);}
.signal-grid div.ok{border-color:rgba(0,255,170,.38);background:rgba(0,255,170,.07);}
.signal-grid div.warn{border-color:rgba(255,196,0,.38);background:rgba(255,196,0,.07);}
.signal-grid div.error{border-color:rgba(255,72,102,.38);background:rgba(255,72,102,.07);}
.signal-grid span{display:block;color:#9fb5c7;font-size:.8rem;}
.signal-grid strong{display:block;color:#fff;font-size:1.15rem;margin-top:4px;}
.signal-grid small{display:block;color:#8ca3b8;margin-top:2px;font-size:.78rem;}
.live-log-line{margin:12px 0 0;color:#96aabc;font-size:.86rem;word-break:break-all;}
.live-checklist-card ol{margin:0;padding-left:20px;color:#c7d6e3;line-height:1.6;}
.live-checklist-card strong{color:#7cf4ff;}
@media (max-width: 1100px){.live-prep-grid{grid-template-columns:1fr}.signal-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.live-form-grid{grid-template-columns:1fr 1fr 1fr;}}
@media (max-width: 720px){.live-form-grid,.signal-grid{grid-template-columns:1fr}.live-header{flex-direction:column}.live-badge{white-space:normal}.live-button-row .btn{width:100%;}}

/* Step 6.3 Messaufnahme */
.recording-panel{
  margin: 18px 0 22px;
  padding: 20px;
  border: 1px solid rgba(73, 240, 167, .24);
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(5, 20, 28, .88), rgba(4, 9, 18, .96));
  box-shadow: 0 0 38px rgba(73, 240, 167, .08), inset 0 0 0 1px rgba(255,255,255,.03);
}
.recording-header{align-items:flex-start;gap:16px;}
.recording-badge{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#d9f7ff;font-weight:900;white-space:nowrap;}
.recording-badge.running{background:rgba(255,196,0,.13);border-color:rgba(255,196,0,.35);color:#ffeaa3;}
.recording-badge.warn{background:rgba(255,196,0,.11);border-color:rgba(255,196,0,.30);color:#ffeaa3;}
.recording-badge.ok{background:rgba(0,255,170,.12);border-color:rgba(0,255,170,.35);color:#aaffdf;}
.recording-grid{display:grid;grid-template-columns: .95fr 1.05fr;gap:16px;margin-top:16px;}
.recording-card{border:1px solid rgba(255,255,255,.09);border-radius:20px;background:rgba(255,255,255,.045);padding:16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);}
.recording-card h3{margin:0 0 12px;color:#ffffff;}
.recording-button-row{display:flex;flex-wrap:wrap;gap:10px;}
.recording-note{margin:12px 0 0;color:#aabac8;font-size:.92rem;line-height:1.45;}
.recording-note strong{color:#7cf4ff;}
.recording-stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.recording-stats-grid div{border-radius:16px;padding:12px;background:rgba(0,0,0,.26);border:1px solid rgba(255,255,255,.08);}
.recording-stats-grid span{display:block;color:#9fb5c7;font-size:.8rem;font-weight:800;}
.recording-stats-grid strong{display:block;color:#fff;font-size:1.15rem;margin-top:4px;}
.recording-file-line{margin:12px 0 0;color:#96aabc;font-size:.86rem;word-break:break-all;}
@media (max-width: 1100px){.recording-grid{grid-template-columns:1fr}.recording-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width: 720px){.recording-stats-grid{grid-template-columns:1fr}.recording-header{flex-direction:column}.recording-badge{white-space:normal}.recording-button-row .btn{width:100%;}}


.signal-finder-panel {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(70, 204, 255, 0.22);
  border-radius: 16px;
  background: rgba(4, 12, 24, 0.55);
  max-height: 260px;
  overflow: auto;
  display: grid;
  gap: 7px;
  font-size: 0.86rem;
}
.signal-finder-panel > strong {
  color: #dff8ff;
  letter-spacing: 0.02em;
}
.signal-finder-panel > span {
  color: #91a5b8;
}
.signal-finder-panel div {
  padding: 7px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  color: #c8d6e2;
}
.signal-finder-panel em {
  color: #58d6ff;
  font-style: normal;
}
.signal-finder-panel b { color: #ffffff; }
.signal-finder-panel strong { color: #b8f4ff; }