/* Designer's chrome and ambient-light layer; functional styles remain in styles.css. */
:root {
  --ambient:#3aa0ff;
  --ambient-glow:rgba(58,160,255,.35);
  --ambient-soft:rgba(58,160,255,.18);
  --chrome-ring:conic-gradient(from 200deg,#fbfcfe,#8d95a2 11%,#f4f6f9 21%,
    #383e48 36%,#23272f 44%,#c6ccd4 55%,#ffffff 63%,#5c6370 79%,#e3e6eb 90%,#fbfcfe);
  --chrome-band:linear-gradient(170deg,#fbfcfe,#8d95a2 18%,#2a2f38 46%,#c6ccd4 70%,#ffffff 84%,#5c6370);
  --chrome-hairline:linear-gradient(135deg,rgba(205,210,218,.42),
    rgba(205,210,218,.05) 40%,rgba(205,210,218,.22));
  --carbon-trim:repeating-linear-gradient(135deg,#16191d 0 4px,#292e35 4px 6px);
}

.view {
  flex:1;padding:12px 12px 24px;border:8px solid transparent;
  background:linear-gradient(var(--ink-950),var(--ink-950)) padding-box,var(--carbon-trim) border-box;
  box-shadow:inset 0 0 0 1px #828891;
}
#view-audit .panel {
  border:6px solid transparent;
  background:linear-gradient(var(--ink-900),var(--ink-900)) padding-box,var(--carbon-trim) border-box;
  box-shadow:0 0 0 1px #828891,inset 0 0 0 1px #424952;
}
#view-audit .panel-corners::before,#view-audit .panel-corners::after {content:none;}
.intro-layout {display:grid;grid-template-columns:minmax(0,1fr);}
.intro-hero {grid-template-columns:minmax(0,1fr);gap:12px;width:100%;margin:0 auto;}
.intro-hero > * {min-width:0;}
.intro-hero .video-frame {width:100%;align-self:start;}
.intro-controls {display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;}
.intro-description {max-width:86ch;margin:12px auto;text-align:center;padding:0 12px;}
.intro-description p {line-height:1.7;color:var(--paper);}
.intro-description .intro-principal {color:var(--muted);font-size:13px;margin-top:12px;}
.cinematic-btn {padding:14px 22px;border-color:var(--ambient);background:var(--ambient-soft);font-weight:600;letter-spacing:.03em;}
.cinematic-btn:focus-visible {outline:2px solid var(--ambient);outline-offset:4px;}
.intro-controls [hidden] {display:none;}
.intro-about {margin-top:20px;}
.intro-about summary {cursor:pointer;color:var(--muted);margin-bottom:12px;}

/* The existing switch is checked for night: silver belongs to unchecked day mode. */
body:has(#daynight-toggle:not(:checked)) {
  --ambient:#cdd2da;
  --ambient-glow:rgba(205,210,218,.35);
  --ambient-soft:rgba(205,210,218,.16);
}
@keyframes flair-breath { 0%,100% {opacity:.75;} 50% {opacity:1;} }
@keyframes flair-lamp { 0%,100% {opacity:.55;} 50% {opacity:1;} }

.topbar {position:relative;}
.topbar::after {
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--ambient) 20%,var(--ambient) 80%,transparent);
  box-shadow:0 0 14px var(--ambient-glow),0 0 4px var(--ambient);
  animation:flair-breath 4.5s ease-in-out infinite;
  pointer-events:none;
}
.nav-item.active {
  position:relative;
  background:linear-gradient(90deg,var(--ambient-soft),transparent 85%);
  box-shadow:inset 0 0 0 1px rgba(205,210,218,.14);
  padding-right:30px;
}
.nav-item.active::after {
  content:"";position:absolute;right:12px;top:50%;
  width:7px;height:7px;margin-top:-3.5px;border-radius:50%;
  background:var(--ambient);box-shadow:0 0 10px var(--ambient);
  animation:flair-breath 4.5s ease-in-out infinite;
}
.nav-item.active .ico {color:var(--ambient);}
.rail-brand img {
  box-sizing:border-box;border-radius:50%;border:3px solid transparent;
  background:var(--chrome-ring) border-box;
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 18px var(--ambient-glow);
}
.panel {
  border-color:transparent;
  background:linear-gradient(var(--ink-900),var(--ink-900)) padding-box,
    var(--chrome-hairline) border-box;
}
.live-pill {
  color:#ffcf85;border-color:rgba(255,181,71,.45);
  background:rgba(255,181,71,.08);padding:5px 12px;border-radius:999px;
}
.live-pill::before {
  content:"";width:7px;height:7px;border-radius:50%;
  background:#ffb547;box-shadow:0 0 10px #ffb547;
  animation:flair-lamp 2.2s ease-in-out infinite;
}
.live-pill.is-connected {
  color:#9ff0c4;border-color:rgba(95,211,154,.45);background:rgba(95,211,154,.08);
}
.live-pill.is-connected::before {
  background:#5fd39a;box-shadow:0 0 10px #5fd39a;animation:none;
}
#backend-login input {
  width:100%;min-width:0;padding:10px 12px;
  color:var(--paper);background:var(--ink-950);
  border:1px solid var(--line);border-radius:var(--radius-m);
}
:is(#backend-login,.intro-copy) .btn-start {
  position:relative;overflow:hidden;justify-self:start;align-self:start;
  width:80px;height:80px;padding:0;margin-top:10px;
  border-radius:50%;border:6px solid transparent;
  background:radial-gradient(circle at 50% 28%,#2b3142,#0c0e13 62%,#050608) padding-box,
    var(--chrome-ring) border-box;
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 0 3px var(--ink-950),0 0 0 4px var(--ambient-soft),
    0 0 24px var(--ambient-glow),0 6px 14px rgba(0,0,0,.6),inset 0 2px 3px rgba(0,0,0,.85);
  color:#e6e9ee;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-family:var(--font-body);font-size:9px;letter-spacing:.18em;cursor:pointer;
}
:is(#backend-login,.intro-copy) .btn-start::before {
  content:"";position:absolute;left:10%;right:10%;top:4%;height:42%;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0));pointer-events:none;
}
:is(#backend-login,.intro-copy) .btn-start svg {
  width:18px;height:18px;stroke:var(--ambient);filter:drop-shadow(0 0 4px var(--ambient));
}
:is(#backend-login,.intro-copy) .btn-start:active {transform:scale(.97);}
:is(#backend-login,.intro-copy) .btn-start:focus-visible {outline:2px solid var(--ambient);outline-offset:4px;}
:is(#backend-login,.intro-copy) .btn-start:disabled {opacity:.5;cursor:wait;}

.video-frame,.car-stage,.garage-stage {
  padding:11px;border-radius:22px;border:2px solid transparent;
  background:linear-gradient(180deg,#15181f,#050608 60%) padding-box,var(--chrome-band) border-box;
  box-shadow:0 22px 30px -18px var(--ambient),0 24px 34px -12px rgba(0,0,0,.85),
    inset 0 1px 0 rgba(255,255,255,.14);
}
.video-frame video,.video-frame .intro-video,.car-stage video,.garage-stage video {
  inset:11px;border-radius:12px;width:calc(100% - 22px);height:calc(100% - 22px);object-fit:cover;display:block;
}
.video-frame .intro-video[hidden] {display:none;}
.video-frame .intro-video {object-fit:contain;}
.video-frame::after,.car-stage::after,.garage-stage::after {
  content:"";position:absolute;inset:11px;border-radius:12px;
  background:linear-gradient(118deg,rgba(255,255,255,.09),rgba(255,255,255,.03) 28%,transparent 29%);
  pointer-events:none;z-index:1;
}
.car-stage .overlay-trigger,.garage-stage .overlay-trigger {
  z-index:2;border-radius:999px;background:rgba(10,12,16,.62);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(205,210,218,.22),0 6px 16px rgba(0,0,0,.5);
}

.lifecycle {flex-wrap:wrap;row-gap:20px;}
.lifecycle .stage {
  display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--paper-dim);
}
.lifecycle .stage .count {
  --dial:#5fd39a;
  position:relative;width:140px;height:140px;box-sizing:border-box;flex-shrink:0;
  border-radius:50%;border:10px solid transparent;
  background:radial-gradient(circle at 50% 38%,#1c2230,#0b0d12 70%,#050608) padding-box,
    var(--chrome-ring) border-box;
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 0 3px var(--ink-950),
    0 0 0 4.5px var(--ambient-soft),0 0 22px var(--ambient-glow),inset 0 2px 4px rgba(0,0,0,.85);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-variant-numeric:tabular-nums;font-size:36px;font-weight:700;letter-spacing:0;color:var(--paper);
}
.lifecycle .stage:nth-child(2) .count {--dial:#ffb547;}
.lifecycle .stage:nth-child(3) .count {--dial:#ff4a5c;}
.lifecycle .stage .count::before {
  content:"";position:absolute;inset:6px;border-radius:50%;
  background:repeating-conic-gradient(rgba(205,210,218,.4) 0 1.2deg,transparent 1.2deg 6deg);
  -webkit-mask:radial-gradient(circle,transparent 58%,#000 59%,#000 68%,transparent 69%);
  mask:radial-gradient(circle,transparent 58%,#000 59%,#000 68%,transparent 69%);
  pointer-events:none;
}
.lifecycle .stage .count::after {
  content:"";position:absolute;inset:22px;border-radius:50%;border:3px solid var(--dial);
  box-shadow:0 0 8px var(--dial);opacity:.85;
  background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 55%);
  pointer-events:none;
}
@media (max-width:720px) {
  .lifecycle .stage {min-width:140px;}
  .lifecycle .stage .count {width:112px;height:112px;font-size:30px;}
}
@media (prefers-reduced-motion:reduce) {
  .topbar::after,.nav-item.active::after,.live-pill::before {animation:none;}
}

.garage-tablet {
  position:relative;isolation:isolate;width:100%;margin:0;
  padding:0;border:0;border-radius:0;background:none;box-shadow:none;
  animation:none;transform:none;transition:none;
}
.tablet-screen {
  padding:0;border:0;border-radius:0;background:none;box-shadow:none;
}
.tablet-screen > .panel-head h2 {font-size:24px;}
#garage-session-status {font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;}
.garage-tablet .garage-stage {
  min-height:0;margin-top:14px;border:1px solid var(--line);border-radius:9px;
  box-shadow:none;background:#080a0d;padding:6px;
}
.garage-tablet .garage-video {inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);border-radius:6px;}
.garage-tablet .garage-stage::after {inset:6px;border-radius:6px;}
.garage-tablet #garage-sound-btn {margin-top:12px;}
.tablet-queue-heading {margin-top:20px;}
.tablet-counters {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.tablet-counter {
  --queue-light:#3aa0ff;
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;min-width:0;min-height:168px;padding:28px 16px 20px;border:1px solid #303640;border-radius:10px;
  color:var(--paper);background:radial-gradient(ellipse at 50% 0%,var(--ambient-soft),transparent 65%),#0c0f13;
  cursor:pointer;box-shadow:inset 0 1px rgba(255,255,255,.05);
}
.tablet-counter:nth-child(2) {--queue-light:#ffb547;}
.tablet-counter:nth-child(3) {--queue-light:#ff4a5c;}
.tablet-counter::before {
  content:"";position:absolute;top:10px;width:5px;height:5px;border-radius:50%;
  background:var(--queue-light);box-shadow:0 0 9px var(--queue-light);pointer-events:none;
}
.tablet-count {font-family:var(--font-body);font-variant-numeric:tabular-nums;font-size:clamp(32px,4vw,60px);line-height:1.2;}
.tablet-label {font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;}
.tablet-counter .small {text-align:center;font-size:12px;}
.tablet-counter:hover {border-color:var(--queue-light);}
@media (max-width:900px) {
  .tablet-counters {grid-template-columns:1fr;}
}
@media (max-width:600px) {
  .view {padding:10px 10px 20px;border-width:6px;}
  .tablet-screen > .panel-head {flex-wrap:wrap;gap:8px;}
  .tablet-counter {padding:20px 10px 12px;}
}