:root {
  --fixit-primary: #8b5cf6;
  --fixit-primary-hover: #a78bfa;
  --fixit-primary-soft: rgba(139,92,246,.14);
  --fixit-secondary: #2f8fff;
  --fixit-success: #2fb36d;
  --fixit-danger: #e45068;
  --fixit-background: #070a11;
  --fixit-surface: #0e131d;
  --fixit-surface-2: #121925;
  --fixit-surface-3: #151d2b;
  --fixit-text: #f4f7fb;
  --fixit-muted: #a5b0c2;
  --fixit-border: rgba(255,255,255,.10);
  --fixit-radius: 1rem;
  --fixit-shadow: 0 16px 40px rgba(0,0,0,.34);
}

html, body { min-height: 100%; }
body {
  background:
    radial-gradient(circle at 85% 8%, rgba(139,92,246,0.18), transparent 28%),
    radial-gradient(circle at 12% 25%, rgba(47,143,255,0.12), transparent 26%),
    linear-gradient(180deg, #070a11 0%, #090d15 45%, #06080d 100%) !important;
  color: var(--fixit-text) !important;
}

a { color: var(--fixit-primary); }
a:hover, a:focus { color: var(--fixit-primary-hover); }

.fixit-navbar.navbar {
  background: rgba(4, 7, 12, .92) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.fixit-brand {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  color: var(--fixit-text) !important;
  text-decoration: none;
}
.fixit-brand-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
.fixit-brand-title {
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: .01em;
  font-size: 1.45rem;
}
.fixit-brand-subtitle {
  display: block;
  margin-top: .15rem;
  color: var(--fixit-muted);
  font-size: .66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.navbar-toggler {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 1rem;
  padding: .62rem .75rem;
  background: rgba(255,255,255,.03);
}
.navbar-toggler:focus { box-shadow: 0 0 0 .18rem rgba(139,92,246,.24); }
.navbar-toggler-icon { filter: invert(1); }
.navbar .nav-link, .navbar .dropdown-toggle { color: var(--fixit-muted) !important; }
.navbar .nav-link:hover, .navbar .nav-link:focus,
.navbar .dropdown-toggle:hover, .navbar .dropdown-toggle:focus { color: #fff !important; }

.container { max-width: 1180px; }
#missinghid,
#offlinebar,
#onlinebar,
#mainmenu,
#lastConnected {
  background: rgba(11,16,24,.78);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 1.25rem;
  box-shadow: var(--fixit-shadow);
}
#missinghid, #offlinebar, #onlinebar {
  padding: 1rem !important;
  margin-bottom: 1rem;
}
#missinghid p, #offlinebar p, #onlinebar p { color: var(--fixit-text) !important; }
#mainmenu { padding: 1rem .7rem 1.1rem !important; }
#devname, #d-bat { color: #fff !important; }
.text-muted { color: var(--fixit-muted) !important; }
.text-danger { color: #ffb0bc !important; }
.text-secondary { color: var(--fixit-muted) !important; }

#mainTabs {
  border-bottom: 1px solid rgba(255,255,255,.08);
  gap: .55rem;
  padding-bottom: .2rem;
}
#mainTabs .nav-link {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: .95rem;
  background: rgba(255,255,255,.03);
  color: var(--fixit-muted);
  font-weight: 700;
  padding: .85rem 1rem;
}
#mainTabs .nav-link:hover {
  color: #fff;
  border-color: rgba(139,92,246,.35);
}
#mainTabs .nav-link.active {
  background: linear-gradient(180deg, rgba(139,92,246,.2), rgba(139,92,246,.1));
  color: #fff;
  border-color: rgba(139,92,246,.55);
  box-shadow: inset 0 0 0 1px rgba(139,92,246,.14), 0 8px 22px rgba(139,92,246,.12);
}
#mainTabs .nav-link i { color: var(--fixit-primary); }

#controller-svg-container {
  background:
    radial-gradient(circle at 50% 0%, rgba(139,92,246,.14), transparent 42%),
    linear-gradient(180deg, rgba(23,30,43,.99), rgba(12,16,24,.99));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 1.35rem;
  padding: 1.1rem 1rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 18px 40px rgba(0,0,0,.28);
}

.card,
.text-bg-light,
.modal-content,
.dropdown-menu,
.alert,
#aboutdrift > .container > div:first-child {
  background: linear-gradient(180deg, rgba(15,20,30,.96), rgba(11,15,23,.96)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 1.15rem !important;
  color: var(--fixit-text) !important;
  box-shadow: var(--fixit-shadow);
}
.card-header,
.modal-header,
.modal-footer {
  background: rgba(255,255,255,.02) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #fff !important;
}
.card-header i,
.modal-title i,
#onlinebar b,
#circularityCheckIcon,
#aboutdrift i,
footer a,
footer svg,
.btn-outline-primary,
.btn-link,
.skip-btn { color: var(--fixit-primary) !important; }
.card-body, .card-body p, .card-body span, .card-body dd, .card-body dt, .card-body li,
.modal-body, .modal-body p, .modal-body span, .modal-body li,
#aboutdrift p, #aboutdrift span, #info-content p, #debug-content p,
#fwinfoextra p, #fwinfoextra span, #fwinfoextra dt, #fwinfoextra dd,
#fwinfoextra-hw dt, #fwinfoextra-hw dd { color: var(--fixit-text) !important; }
pre {
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: .75rem;
  color: #f0f4fa;
  padding: .55rem .7rem;
}
canvas#stickCanvas {
  background: #f6f7f9;
  border: 1px solid #d7dce3;
  border-radius: 1rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

.btn {
  border-radius: .95rem;
  font-weight: 700;
  padding: .78rem 1rem;
}
.btn-primary {
  --bs-btn-bg: var(--fixit-primary);
  --bs-btn-border-color: var(--fixit-primary);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--fixit-primary-hover);
  --bs-btn-hover-border-color: var(--fixit-primary-hover);
  --bs-btn-active-bg: #7c3aed;
  --bs-btn-active-border-color: #7c3aed;
  box-shadow: 0 10px 24px rgba(139,92,246,.18);
}
.btn-outline-primary {
  --bs-btn-color: var(--fixit-primary);
  --bs-btn-border-color: rgba(139,92,246,.55);
  --bs-btn-hover-bg: rgba(139,92,246,.14);
  --bs-btn-hover-border-color: var(--fixit-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: rgba(139,92,246,.18);
  --bs-btn-active-border-color: var(--fixit-primary);
  --bs-btn-active-color: #fff;
}
.btn-outline-secondary,
.btn-secondary {
  --bs-btn-bg: rgba(255,255,255,.03);
  --bs-btn-border-color: rgba(255,255,255,.14);
  --bs-btn-color: var(--fixit-text);
  --bs-btn-hover-bg: rgba(255,255,255,.08);
  --bs-btn-hover-border-color: rgba(255,255,255,.22);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: rgba(255,255,255,.12);
  --bs-btn-active-border-color: rgba(255,255,255,.24);
}
.btn-success {
  --bs-btn-bg: #183a2a;
  --bs-btn-border-color: #275f45;
  --bs-btn-color: #8cf0b7;
  --bs-btn-hover-bg: #1d4732;
  --bs-btn-hover-border-color: #2f7d59;
  --bs-btn-hover-color: #bff9d2;
}
.btn-danger {
  --bs-btn-bg: #3b1a24;
  --bs-btn-border-color: #673040;
  --bs-btn-color: #ffb5c3;
  --bs-btn-hover-bg: #4c202d;
  --bs-btn-hover-border-color: #8d4156;
  --bs-btn-hover-color: #ffd6df;
}
.btn-group > .dropdown-toggle-split { min-width: 42px; }
.dropdown-menu { padding: .4rem; }
.dropdown-item {
  color: var(--fixit-text);
  border-radius: .7rem;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: rgba(139,92,246,.12);
  color: #fff;
}

.accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: rgba(255,255,255,.08);
  --bs-accordion-btn-bg: rgba(255,255,255,.02);
  --bs-accordion-active-bg: rgba(139,92,246,.10);
  --bs-accordion-active-color: #fff;
  --bs-accordion-color: var(--fixit-text);
  --bs-accordion-btn-color: var(--fixit-text);
}
.accordion-item {
  background: linear-gradient(180deg, rgba(15,20,30,.96), rgba(11,15,23,.96)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 1rem !important;
  overflow: hidden;
  margin-bottom: .9rem;
}
.accordion-button {
  box-shadow: none !important;
  background: rgba(255,255,255,.02) !important;
  color: var(--fixit-text) !important;
}
.accordion-button:not(.collapsed) {
  color: #fff !important;
  background: rgba(139,92,246,.12) !important;
  border-bottom: 1px solid rgba(139,92,246,.25);
}
.accordion-button:focus { box-shadow: 0 0 0 .18rem rgba(139,92,246,.16) !important; }
.accordion-button::after { filter: invert(1) brightness(1.1); }
.accordion-body { background: rgba(255,255,255,.015); color: var(--fixit-text) !important; }
#quickTestAccordion .accordion-collapse .accordion-body { background-color: rgba(139,92,246,0.05); }
.test-icon-usb, .test-icon-buttons, .test-icon-haptic, .test-icon-adaptive,
.test-icon-lights, .test-icon-speaker, .test-icon-microphone, .test-icon-headphone {
  color: var(--fixit-primary) !important;
}

#aboutdrift { bottom: 70px !important; }
#aboutdrift > .container > div:first-child {
  border: 1px solid rgba(139,92,246,.35) !important;
}
#lastConnected {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  padding: .85rem 1rem;
  gap: .55rem;
  background: rgba(11,16,24,.9);
}
#lastConnectedInfo { color: var(--fixit-text); }
#lastConnectedWarning p { color: #ffc0cb !important; }

footer {
  background: linear-gradient(180deg, rgba(10,14,22,.98), rgba(7,10,17,.98)) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
footer p, footer span, footer li, footer .mb-0 { color: var(--fixit-muted) !important; }
footer a { text-decoration-color: rgba(139,92,246,.55); }

.fixit-footer-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 72px;
}
.fixit-footer-logo {
  width: 54px;
  height: 54px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.28));
}
.fixit-footer-text {
  text-align: center;
}
@media (max-width: 575.98px) {
  .fixit-footer-content {
    flex-direction: column;
    gap: .55rem;
    padding-left: .75rem;
    padding-right: .75rem;
  }
  .fixit-footer-logo {
    width: 48px;
    height: 48px;
  }
}

#alert-container .alert {
  box-shadow: var(--fixit-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 1 !important;
  border-width: 1px !important;
}
.alert-info {
  color: #dcecff !important;
  background: rgba(47,143,255,.26) !important;
  border-color: rgba(47,143,255,.52) !important;
}
.alert-warning {
  color: #ffe0c7 !important;
  background: rgba(139,92,246,.28) !important;
  border-color: rgba(139,92,246,.52) !important;
}
.alert-danger {
  color: #ffd6de !important;
  background: rgba(228,80,104,.30) !important;
  border-color: rgba(228,80,104,.56) !important;
}
.alert-success {
  color: #d8ffe8 !important;
  background: rgba(47,179,109,.28) !important;
  border-color: rgba(47,179,109,.52) !important;
}
.btn-close { filter: invert(1); }

@media (max-width: 767.98px) {
  body { zoom: 1 !important; }
  .fixit-brand-title { font-size: 1.18rem; }
  .fixit-brand-subtitle { font-size: .58rem; }
  #mainmenu { padding: .85rem .3rem .95rem !important; }
  #mainTabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  #mainTabs::-webkit-scrollbar { display:none; }
  #mainTabs .nav-link { white-space: nowrap; }
}


/* Controller visibility + symbol fixes */
#controller-svg svg, #qt-controller-svg {
  filter:
    drop-shadow(0 16px 28px rgba(0,0,0,.28))
    drop-shadow(0 4px 18px rgba(139,92,246,.08));
}

.fixit-inline-symbol,
.inline-symbol,
#quickTestModal .accordion-body svg[width="20"],
#quickTestModal .card-body svg[width="20"] {
  width: 20px;
  height: 20px;
  vertical-align: -4px;
  color: #d8e1ef;
  fill: currentColor;
  stroke: currentColor;
}

#quickTestAccordion .alert svg,
#quickTestModal .alert svg,
#quickTestModal p svg,
#quickTestModal span svg,
#quickTestModal li svg {
  color: #d8e1ef;
  fill: currentColor;
  stroke: currentColor;
}


/* v3 – controller + PlayStation symbol refinement */
.fixit-ps-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.05em;
  margin: 0 .08em;
  color: #c7d0de !important;
  font-family: Arial, sans-serif;
  font-size: 1.08em;
  font-weight: 700;
  line-height: 1;
  vertical-align: -0.04em;
  text-shadow: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Main joystick canvas: visibly white panel like range calibration. */
#stickCanvas {
  display: block;
  background: #ffffff !important;
  border: 1px solid #d6d9df !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#stickCanvas + * { color: inherit; }



/* Controller visuals are owned by the SVG + JavaScript. Do not override fill/stroke here.
   Keep rendering instantaneous: SVG stroke/filter transitions caused visible outline flicker. */
#controller-svg-placeholder svg *,
#quick-test-controller-svg-placeholder svg * {
  transition: none !important;
}
#controller-svg-placeholder svg g,
#quick-test-controller-svg-placeholder svg g {
  filter: none !important;
}


/* === FIX IT Android app layout fixes v0.4.3 === */
/* Never let the start-screen drift notice overlap the Connect control. */
#aboutdrift.about-drift-section,
#aboutdrift {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  margin: 1rem 0 !important;
}

/* LX / LY / RX / RY always stay in one row, including narrow phones. */
.fixit-stick-values {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .2rem;
  width: 100%;
  align-items: start;
}
.fixit-stick-values > div {
  min-width: 0 !important;
  padding: .35rem .1rem !important;
}
.fixit-stick-values span {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.1;
}
.fixit-stick-values pre {
  min-width: 0 !important;
  width: 100%;
  margin: .18rem 0 0 !important;
  padding: 0 !important;
  font-size: clamp(.68rem, 3.1vw, .88rem);
  line-height: 1.2;
  white-space: nowrap;
  overflow: visible;
}


/* Auftragsbezogene Kalibrierung – TEST. Ohne fixit_session bleibt die öffentliche GUI unverändert. */
.fixit-order-session{
  margin:.35rem 0 .85rem;
  padding:1rem 1.05rem;
  border:1px solid rgba(139,92,246,.48);
  border-radius:1rem;
  background:linear-gradient(180deg,rgba(139,92,246,.16),rgba(11,15,23,.98));
  box-shadow:0 14px 34px rgba(0,0,0,.28);
}
.fixit-order-session-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.fixit-order-session-head>div{display:grid;gap:.15rem}.fixit-order-session-head strong{font-size:1.12rem;color:#fff}
.fixit-order-kicker{font-size:.68rem;letter-spacing:.1em;font-weight:800;color:#c4a7ff}
.fixit-order-session p{margin:.7rem 0;color:var(--fixit-muted)!important}
.fixit-order-ok,.fixit-order-bad{display:inline-flex;padding:.38rem .65rem;border-radius:999px;font-size:.78rem;font-weight:800}
.fixit-order-ok{background:rgba(47,179,109,.24);border:1px solid rgba(47,179,109,.48);color:#c8ffdc}
.fixit-order-bad{background:rgba(228,80,104,.24);border:1px solid rgba(228,80,104,.5);color:#ffd5dd}
.fixit-order-session-head small{display:block;margin-top:.35rem;color:#ffd5dd}
.fixit-order-session-actions{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap}.fixit-order-state{font-size:.86rem;color:var(--fixit-muted)}
.fixit-order-state a{color:var(--fixit-primary);font-weight:800}

/* v3: Auftragsmodus ohne Infobanner - nur kompakter Rücksprung */
.fixit-order-return-wrap {
  display: flex;
  justify-content: flex-end;
  margin: .35rem 0 .8rem;
}
.fixit-order-return-btn {
  width: auto;
  min-width: 170px;
  padding: .58rem .9rem;
}
@media (max-width: 575.98px) {
  .fixit-order-return-wrap { justify-content: stretch; }
  .fixit-order-return-btn { width: 100%; }
}


#lastConnected {
  flex: 0 0 auto;
  width: 100%;
}

/* === FIX-IT Startseite: Logo im Freiraum, Versionsleiste am echten Seitenende === */
/* body ist in index.html als Flex-Spalte mit voller Viewport-Hoehe definiert. */
#aboutdrift.about-drift-section {
  flex: 1 1 auto;
  width: 100%;
}

#aboutdrift.about-drift-section > .container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.fixit-home-logo-space {
  /* Nicht schrumpfen lassen: sonst ragt das zentrierte Logo bei wenig Höhe
     nach oben in "Zuletzt verbunden" hinein. */
  flex: 1 0 320px;
  min-height: 320px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin-top: 1rem;
  padding: 1.25rem 1rem 1.75rem;
}

.fixit-home-logo {
  width: min(320px, 42vw);
  max-height: 270px;
  height: auto;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 18px 35px rgba(0,0,0,.34));
}

.app-footer {
  margin-top: auto;
  flex: 0 0 auto;
  width: 100%;
}

.fixit-footer-content {
  min-height: 58px;
}

/* Im Footer steht nur noch die Versions-/Projektzeile. */
.fixit-footer-logo {
  display: none !important;
}

@media (max-width: 575.98px) {
  .fixit-home-logo-space {
    flex-basis: 240px;
    min-height: 240px;
    margin-top: .85rem;
    padding: 1rem .75rem 1.25rem;
  }
  .fixit-home-logo {
    width: min(230px, 70vw);
    max-height: 205px;
  }
  .fixit-footer-content {
    min-height: 52px;
  }
}