/* ==========================================================================
   RoadVibe — design tokens i style globalne (spójne z prototypem v2)
   Layout RWD: mobile = jedna kolumna + dolny pasek; desktop = sidebar + pełna szerokość.
   Ikony: SVG ze sprite'a (_icon_sprite), kolor przez currentColor.
   ========================================================================== */
:root {
  --asphalt:#15171C;
  --asphalt-2:#1C1F26;
  --asphalt-3:#262A33;
  --asphalt-4:#30343F;
  --cream:#F7F4EE;
  --cream-dim:#9BA0AB;
  --cream-dimmer:#6B707B;
  --coral:#FF6B5C;
  --amber:#FFB84D;
  --lane:#F5C84C;
  --teal:#2A9D9D;
  --green:#4ECB71;
  --red:#FF5C5C;
  --line:rgba(247,244,238,0.10);
  --line-soft:rgba(247,244,238,0.05);
  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --sidenav-w:240px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  height: 100%;
}

body {
  background: var(--asphalt);
  color: var(--cream);
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.font-display {
  font-family: "Outfit", sans-serif;
}

.font-mono {
  font-family: "JetBrains Mono", monospace;
}

::selection {
  background: var(--lane);
  color: var(--asphalt);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--lane);
  outline-offset: 2px;
}

/* --- ikony SVG --- */
.icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.icon-lg {
  width: 28px;
  height: 28px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn .icon {
  width: 18px;
  height: 18px;
}

/* ==========================================================================
   Layout / powłoka aplikacji (RWD)
   ========================================================================== */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--asphalt);
  position: relative;
}

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

.screen-pad {
  padding: 18px 22px 96px;
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}

@media (min-width: 900px) {
  .app-shell {
    flex-direction: row;
  }
  .screen-pad {
    padding: 34px 48px 40px;
  }
}
/* --- typografia --- */
.h-title {
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 27px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.h-sub {
  font-size: 14px;
  color: var(--cream-dim);
  line-height: 1.5;
  margin-top: 6px;
}

.eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lane);
}

.section-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cream-dimmer);
  margin: 4px 0 10px;
}

/* --- przyciski --- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 15px 20px;
  border-radius: 14px;
  width: 100%;
  transition: transform 0.15s, opacity 0.15s;
}

.btn:active {
  transform: scale(0.975);
}

.btn-primary {
  background: var(--lane);
  color: var(--asphalt);
}

.btn-dark {
  background: var(--asphalt-3);
  color: var(--cream);
  border: 1px solid var(--line);
}

.btn-ghost {
  background: transparent;
  color: var(--cream-dim);
  border: 1px solid var(--line);
}

.btn-danger {
  background: transparent;
  color: var(--red);
  border: 1px solid rgba(255, 92, 92, 0.3);
}

.btn:disabled {
  opacity: 0.4;
  pointer-events: none;
}

.btn-sm {
  padding: 10px 14px;
  font-size: 13px;
  border-radius: 11px;
  width: auto;
}

.btn-sm.icon-btn .icon {
  width: 16px;
  height: 16px;
}

/* --- karty / inputy --- */
.card {
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px;
}

.field {
  margin-bottom: 14px;
}

.field label {
  display: block;
  font-size: 12px;
  color: var(--cream-dim);
  margin-bottom: 7px;
  font-weight: 500;
}

.input {
  width: 100%;
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  color: var(--cream);
  font-size: 15px;
  transition: border-color 0.15s;
}

.input:focus {
  outline: none;
  border-color: var(--lane);
}

.input::placeholder {
  color: var(--cream-dimmer);
}

/* --- topbar --- */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0 16px;
}

.topbar .back-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  color: var(--cream);
}

.topbar .back-btn .icon {
  width: 20px;
  height: 20px;
}

.topbar .tb-title {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 18px;
}

/* ==========================================================================
   Nawigacja — dolny pasek (mobile) / sidebar (desktop)
   ========================================================================== */
.appnav {
  z-index: 30;
}

.appnav-brand {
  display: none;
}

.appnav-links {
  display: flex;
}

/* mobile: dolny pasek */
@media (max-width: 899px) {
  .appnav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
    background: rgba(21, 23, 28, 0.94);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--line-soft);
  }
  .appnav-links {
    justify-content: space-around;
    align-items: center;
    width: 100%;
  }
}
/* desktop: lewy sidebar */
@media (min-width: 900px) {
  .appnav {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100dvh;
    width: var(--sidenav-w);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 24px 16px;
    background: var(--asphalt-2);
    border-right: 1px solid var(--line);
  }
  .appnav-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 6px 12px 20px;
  }
  .appnav-logo {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--coral), var(--amber));
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .appnav-logo .icon {
    width: 22px;
    height: 22px;
    color: #fff;
  }
  .appnav-word {
    font-family: "Outfit", sans-serif;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.02em;
  }
  .appnav-links {
    flex-direction: column;
    gap: 4px;
  }
}
.navbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 14px;
  border-radius: 12px;
  color: var(--cream-dimmer);
  transition: color 0.15s, background 0.15s;
}

.navbtn .nico {
  width: 22px;
  height: 22px;
}

.navbtn .nlbl {
  font-size: 10px;
  font-weight: 600;
}

.navbtn.active {
  color: var(--lane);
}

@media (min-width: 900px) {
  .navbtn {
    flex-direction: row;
    justify-content: flex-start;
    gap: 13px;
    width: 100%;
    padding: 12px 14px;
  }
  .navbtn .nico {
    width: 20px;
    height: 20px;
  }
  .navbtn .nlbl {
    font-size: 14px;
    font-weight: 600;
  }
  .navbtn:hover {
    background: var(--asphalt-3);
    color: var(--cream);
  }
  .navbtn.active {
    background: rgba(245, 200, 76, 0.12);
    color: var(--lane);
  }
}
/* --- toast --- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%) translateY(20px);
  background: var(--asphalt-4);
  border: 1px solid var(--line);
  color: var(--cream);
  padding: 11px 18px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.6);
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (min-width: 900px) {
  .toast {
    bottom: 28px;
  }
}
/* --- login / brand --- */
.logo-badge {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--coral), var(--amber));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  box-shadow: 0 12px 30px -8px rgba(255, 107, 92, 0.5);
}

.logo-badge .icon {
  width: 34px;
  height: 34px;
  color: #fff;
}

.brand-big {
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: 40px;
  letter-spacing: -0.03em;
  line-height: 1;
}

.brand-tag {
  font-size: 15px;
  color: var(--cream-dim);
  margin: 10px 0 38px;
  line-height: 1.5;
}

.auth-card {
  width: 100%;
  max-width: 420px;
}

/* --- landing page (publiczna) --- */
.landing {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 32px 22px 24px;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.hero {
  text-align: center;
  padding: 36px 0 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-title {
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: 46px;
  letter-spacing: -0.03em;
  line-height: 1;
}

.hero-tag {
  font-size: 17px;
  color: var(--cream-dim);
  max-width: 560px;
  margin: 14px 0 26px;
  line-height: 1.55;
}

.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 8px;
}

@media (min-width: 640px) {
  .feature-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 980px) {
  .feature-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.feature-card {
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px;
}

.feature-ico {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--coral), var(--amber));
  color: #fff;
  margin-bottom: 12px;
}

.feature-ico .icon {
  width: 24px;
  height: 24px;
}

.landing-footer {
  margin-top: auto;
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--cream-dimmer);
}

.landing-footer a {
  color: var(--cream-dim);
}

/* landing: topbar z kotwicami (sticky od tabletu wzwyż) */
.landing {
  padding-top: 0;
}

.landing-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
}

.lt-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 17px;
}

.lt-brand .icon {
  width: 20px;
  height: 20px;
  color: var(--coral);
}

.lt-links {
  display: none;
  gap: 18px;
  margin-left: auto;
}

.lt-links a {
  color: var(--cream-dim);
  font-size: 14px;
}

.lt-links a:hover {
  color: var(--cream);
}

.lt-cta {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.btn.btn-topbar {
  width: auto;
  padding: 8px 14px;
  font-size: 13px;
}

@media (min-width: 640px) {
  .landing-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--asphalt);
  }
  .lt-links {
    display: flex;
  }
  .lt-cta {
    margin-left: 0;
  }
}
/* landing: żywa sygnatura w hero (osadzony TripProgress) */
.hero {
  padding-top: 24px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cream-dim);
}

.hero-eyebrow .icon {
  width: 15px;
  height: 15px;
  color: var(--coral);
}

.hero-tag b {
  color: var(--cream);
  font-weight: 700;
}

.hero-demo {
  margin-top: 4px;
}

.hero-demo .road-stage {
  border: 1px solid var(--line);
}

.demo-caption {
  text-align: center;
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--cream-dimmer);
}

/* landing: blok „bólu rodzica" (Koncept A) */
.parent-band {
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px 22px;
  margin-top: 26px;
}

.parent-band .h-sub {
  color: var(--cream-dim);
  line-height: 1.55;
}

/* landing: pasek liczb społeczności */
.stat-strip {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  padding: 26px 0 8px;
  text-align: center;
}

.stat-strip b {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-weight: 500;
  font-size: 20px;
  color: var(--lane);
}

.stat-strip span {
  font-size: 12px;
  color: var(--cream-dim);
}

/* landing: sekcje z kotwicami + kroki + cennik + CTA */
.landing-label {
  margin-top: 26px;
}

.step-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 640px) {
  .step-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.step-card {
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px;
}

.step-card .h-sub {
  margin: 6px 0 0;
}

.step-no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--coral);
  color: #4A1B0C;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 10px;
}

.price-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 640px) {
  .price-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.price-card {
  position: relative;
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.price-card.premium {
  border: 2px solid var(--coral);
}

.price-amount {
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: 28px;
  margin: 4px 0 8px;
}

.price-amount span {
  font-size: 13px;
  color: var(--cream-dim);
  font-weight: 400;
}

.price-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--coral);
  color: #4A1B0C;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
}

.price-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.price-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--cream-dim);
  padding: 4px 0;
}

.price-list .icon {
  width: 15px;
  height: 15px;
  color: var(--teal);
  flex: 0 0 auto;
}

.price-card.premium .price-list .icon {
  color: var(--coral);
}

.price-card .btn {
  margin-top: auto;
}

.cta-band {
  text-align: center;
  padding: 40px 0 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* historia tras: badge statusu (PL) */
.trip-status {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  white-space: nowrap;
  background: var(--asphalt-3);
  color: var(--cream-dim);
}

.trip-status-active {
  background: rgba(42, 157, 157, 0.18);
  color: var(--teal);
}

.trip-status-completed {
  background: rgba(78, 203, 113, 0.15);
  color: #4ECB71;
}

.trip-status-cancelled {
  background: rgba(255, 107, 92, 0.14);
  color: var(--coral);
}

/* --- dokumenty (regulamin / prywatność) --- */
.doc {
  max-width: 760px;
}

.doc h2 {
  font-family: "Outfit", sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin: 20px 0 6px;
}

.doc p {
  font-size: 14px;
  color: var(--cream-dim);
  line-height: 1.6;
}

.divider-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--cream-dimmer);
  font-size: 12px;
}

.divider-or::before, .divider-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* --- vehicle / garage --- */
.garage-grid {
  display: grid;
  grid-template-columns: 1fr;
}

.vehicle-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px;
  border-radius: 14px;
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  margin-bottom: 11px;
  cursor: pointer;
  transition: border-color 0.15s;
}

.vehicle-card.active {
  border-color: var(--lane);
}

.vehicle-thumb {
  width: 52px;
  height: 40px;
  border-radius: 9px;
  background: var(--asphalt-3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--cream);
}

.vehicle-thumb .icon {
  width: 32px;
  height: 22px;
}

.vehicle-thumb {
  overflow: hidden;
}

.vehicle-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- graficzny garaż: miejsca parkingowe z zaparkowanymi autami / wolne miejsca --- */
.garage {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--asphalt-2);
}

.garage-roof {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--cream-dim);
  background: repeating-linear-gradient(90deg, var(--asphalt-3) 0 16px, var(--asphalt-4) 16px 32px);
  border-bottom: 3px solid var(--lane);
}

.garage-count {
  color: var(--lane);
  font-weight: 700;
}

.garage-floor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--asphalt-3);
}

@media (min-width: 900px) {
  .garage-floor {
    grid-template-columns: repeat(3, 1fr);
  }
}
.garage-bay {
  position: relative;
  min-height: 156px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 18px 12px 46px;
  text-align: center;
  border-right: 2px dashed rgba(245, 200, 76, 0.22);
  border-bottom: 2px dashed rgba(245, 200, 76, 0.1);
}

.garage-bay.filled {
  cursor: pointer;
  transition: background 0.15s;
}

.garage-bay.filled:hover {
  background: var(--asphalt-2);
}

.garage-bay.active {
  background: rgba(245, 200, 76, 0.08);
  box-shadow: inset 0 0 0 2px var(--lane);
}

.bay-car {
  width: 100%;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bay-car-img {
  max-width: 96%;
  max-height: 66px;
  object-fit: contain;
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.5));
}

.bay-car-icon {
  width: 78px;
  height: 48px;
  color: var(--cream);
}

.bay-name {
  font-weight: 600;
  font-size: 14px;
}

.bay-sub {
  font-size: 11px;
  color: var(--cream-dim);
}

.garage-bay .v-active-chip {
  position: absolute;
  top: 8px;
  left: 8px;
  margin: 0;
}

.bay-actions {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  gap: 6px;
  justify-content: center;
}

.garage-bay.empty {
  cursor: pointer;
  color: var(--cream-dimmer);
  background: transparent;
}

.garage-bay.empty:hover {
  color: var(--lane);
  background: rgba(245, 200, 76, 0.04);
}

.bay-plus {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px dashed currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.bay-plus .icon {
  width: 18px;
  height: 18px;
}

.bay-empty-label {
  font-size: 12px;
}

.vehicle-card.archived {
  opacity: 0.72;
}

.v-name {
  font-size: 14px;
  font-weight: 600;
}

.v-sub {
  font-size: 11px;
  color: var(--cream-dim);
  margin-top: 2px;
}

.v-active-chip {
  font-size: 9px;
  padding: 4px 9px;
  border-radius: 99px;
  background: var(--lane);
  color: var(--asphalt);
  font-weight: 700;
}

.vehicle-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.vehicle-actions .icon-btn .icon {
  width: 16px;
  height: 16px;
}

/* --- znajomi --- */
.friend-search {
  display: flex;
  gap: 10px;
  align-items: center;
}

.friend-search .input {
  flex: 1;
}

/* --- awatary pasażerów (zdjęcie lub inicjał) --- */
.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: inline-flex;
}

.avatar-initial {
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}

.avatar-sm {
  width: 30px;
  height: 30px;
}

.avatar-sm.avatar-initial {
  font-size: 12px;
}

/* --- dobór pasażerów na plannerze --- */
.passenger-pick {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}

.pick-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 11px;
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  cursor: pointer;
}

.pick-row input[type=checkbox] {
  width: 18px;
  height: 18px;
  accent-color: var(--lane);
  flex-shrink: 0;
}

/* --- kreator podróży (TripWizard) --- */
.wizard {
  margin-bottom: 16px;
}

.wizard-steps {
  display: flex;
  gap: 8px;
}

.wstep {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cream-dimmer);
  padding: 8px 4px;
  border-bottom: 2px solid var(--line);
}

.wstep .wstep-no {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--asphalt-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.wstep.active {
  color: var(--cream);
  border-bottom-color: var(--lane);
}

.wstep.active .wstep-no {
  background: var(--lane);
  color: var(--asphalt);
}

.wstep.done .wstep-no {
  background: var(--green);
  color: var(--asphalt);
}

.seat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.seat-grid .seat:nth-child(1),
.seat-grid .seat:nth-child(2) {
  grid-column: span 3;
}

.seat-grid .seat:nth-child(3),
.seat-grid .seat:nth-child(4),
.seat-grid .seat:nth-child(5) {
  grid-column: span 2;
}

.seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 84px;
  border-radius: 12px;
  background: var(--asphalt-3);
  border: 1px dashed var(--line);
  color: var(--cream-dim);
  font-size: 11px;
  text-align: center;
  padding: 8px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.seat.filled {
  border-style: solid;
}

.seat.driver-seat {
  border-color: var(--lane);
  cursor: default;
}

.seat.picking {
  border-color: var(--lane);
  box-shadow: 0 0 0 2px rgba(245, 200, 76, 0.3);
}

.seat .s-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.seat .s-empty {
  background: var(--asphalt-4);
  color: var(--cream-dim);
}

.seat .s-empty .icon {
  width: 16px;
  height: 16px;
}

.model-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.model-opt {
  height: 48px;
  border-radius: 11px;
  background: var(--asphalt-3);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream-dim);
  transition: border-color 0.15s, color 0.15s;
}

.model-opt .icon {
  width: 34px;
  height: 22px;
}

.model-opt.selected {
  border-color: var(--lane);
  color: var(--lane);
}

/* --- zdjęcie auta + edytor dopasowania (VehicleFit) --- */
.vehicle-photo-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 8px;
}

.vehicle-photo-thumb {
  width: 96px;
  height: 60px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--asphalt-3);
  border: 1px solid var(--line);
  flex-shrink: 0;
}

.vehicle-photo-thumb.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream-dim);
}

.vehicle-photo-thumb.empty .icon {
  width: 46px;
  height: 30px;
}

.btn label, label.btn {
  cursor: pointer;
}

.vehicle-fit {
  margin-top: 12px;
}

.fit-stage {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  border: 1px solid var(--line);
  background: var(--asphalt-3);
}

.fit-photo {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* podgląd wyciętego tła: szachownica, by widać było przezroczystość */
.fit-stage.fit-preview {
  background-color: #2b2f36;
  background-image: linear-gradient(45deg, #3a3f4a 25%, transparent 25%, transparent 75%, #3a3f4a 75%), linear-gradient(45deg, #3a3f4a 25%, transparent 25%, transparent 75%, #3a3f4a 75%);
  background-size: 18px 18px;
  background-position: 0 0, 9px 9px;
}

.fit-window {
  position: absolute;
  border: 2px dashed var(--lane);
  border-radius: 8px;
  background: rgba(245, 200, 76, 0.12);
  cursor: move;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.fit-wheel {
  position: absolute;
  transform: translate(-50%, -50%);
  height: 0;
  border-radius: 50%;
  border: 3px solid var(--teal);
  background: rgba(42, 157, 157, 0.18);
  cursor: grab;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.fit-wheel:active {
  cursor: grabbing;
}

.fit-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.fit-range {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--cream-dim);
}

.fit-range input[type=range] {
  flex: 1;
  max-width: 60%;
  accent-color: var(--coral);
}

/* --- planner (desktop: dwie kolumny) --- */
@media (min-width: 900px) {
  .planner-cols {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }
  .garage-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .garage-grid .vehicle-card {
    margin-bottom: 0;
  }
}
/* --- stats --- */
.stat-big-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  margin-bottom: 16px;
}

.stat-box {
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px;
}

.stat-box .sb-val {
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 24px;
}

.stat-box .sb-lbl {
  font-size: 11px;
  color: var(--cream-dim);
  margin-top: 3px;
}

.statline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}

.statline:last-child {
  border-bottom: none;
}

.statline .sl-lbl {
  font-size: 13px;
  color: var(--cream-dim);
  display: flex;
  align-items: center;
  gap: 8px;
}

.statline .sl-lbl .icon {
  width: 16px;
  height: 16px;
  color: var(--green);
}

.statline .sl-val {
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
}

@media (min-width: 700px) {
  .stat-big-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* --- odznaki (status zdobyte/niezdobyte + opis) --- */
.badge-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 700px) {
  .badge-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.badge-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px;
  border-radius: 14px;
  background: var(--asphalt-2);
  border: 1px solid var(--line);
}

.badge-card.locked {
  opacity: 0.55;
}

.badge-ico {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--asphalt-3);
  color: var(--cream-dimmer);
}

.badge-card.earned .badge-ico {
  background: linear-gradient(135deg, var(--coral), var(--amber));
  color: #fff;
}

.badge-ico .icon {
  width: 22px;
  height: 22px;
}

.badge-meta {
  flex: 1;
  min-width: 0;
}

.badge-title {
  font-size: 14px;
  font-weight: 600;
}

.badge-desc {
  font-size: 11px;
  color: var(--cream-dim);
  margin-top: 2px;
  line-height: 1.4;
}

.badge-status {
  font-size: 9px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 99px;
  flex-shrink: 0;
  background: var(--asphalt-3);
  color: var(--cream-dimmer);
}

.badge-card.earned .badge-status {
  background: var(--lane);
  color: var(--asphalt);
}

.badge-holders {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-size: 11px;
  color: var(--cream-dimmer);
}

.badge-holders .icon {
  width: 12px;
  height: 12px;
}

/* --- panel administratora --- */
.admin-table {
  padding: 0;
  overflow-x: auto;
}

.admin-row {
  display: grid;
  grid-template-columns: 1.2fr 2fr 0.9fr 0.8fr 0.7fr;
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
  min-width: 560px;
}

.admin-row:last-child {
  border-bottom: none;
}

.admin-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cream-dimmer);
  font-weight: 600;
}

.admin-muted {
  color: var(--cream-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plan-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 99px;
}

.plan-premium {
  background: var(--lane);
  color: var(--asphalt);
}

.plan-free {
  background: var(--asphalt-3);
  color: var(--cream-dim);
}

.admin-link {
  color: var(--lane);
  font-weight: 600;
}

.admin-link:hover {
  text-decoration: underline;
}

/* chip statusu płatności (backoffice) */
.tx-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 99px;
  white-space: nowrap;
}

.tx-ok {
  background: rgba(78, 203, 113, 0.18);
  color: #4ECB71;
}

.tx-pending {
  background: rgba(245, 200, 76, 0.18);
  color: var(--lane);
}

.tx-fail {
  background: rgba(255, 107, 92, 0.18);
  color: var(--coral);
}

.tx-refund {
  background: var(--asphalt-3);
  color: var(--cream-dim);
}

/* --- plany / subskrypcje --- */
.plans-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 680px) {
  .plans-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.plan-card {
  display: flex;
  flex-direction: column;
}

.plan-name {
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: 18px;
}

.plan-price {
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: 30px;
  margin: 6px 0 14px;
}

.plan-price span {
  font-size: 14px;
  font-weight: 600;
  color: var(--cream-dim);
}

.plan-feats {
  list-style: none;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.plan-feats li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--cream-dim);
}

.plan-feats li .icon {
  width: 15px;
  height: 15px;
  color: var(--green);
  flex-shrink: 0;
}

.plan-card .btn {
  margin-top: auto;
}

/* --- integracje (profil) --- */
.integration-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.integration-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.integration-ico {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  flex-shrink: 0;
  background: var(--asphalt-3);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
}

.integration-ico .icon {
  width: 22px;
  height: 22px;
}

/* --- ekran podróży (pełnoekranowy) + Now Playing --- */
.trip-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 18px 22px 40px;
  width: 100%;
}

@media (min-width: 900px) {
  .trip-screen {
    padding: 28px 48px 48px;
  }
}
.trip-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0 16px;
}

.trip-topbar .tb-title {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: 18px;
}

.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* topbar podróży = nakładka NA scenie (lewy górny róg nieba, obok pigułki pogody po prawej) —
   nie zajmuje wysokości, więc sygnatura sięga górnej krawędzi ekranu */
.trip-screen {
  position: relative;
}

.trip-topbar-overlay {
  position: absolute;
  top: 8px;
  left: 12px;
  right: 120px;
  z-index: 8;
  padding: 0;
  pointer-events: none;
}

.trip-topbar-overlay .topbar-right {
  margin-left: 0;
  pointer-events: auto;
}

.now-playing {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 340px;
  font-size: 12px;
  color: var(--cream-dim);
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 99px;
}

/* obserwujący (właściciel widzi kto i ilu śledzi trasę) */
.observers {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  padding: 5px 10px 5px 8px;
  border-radius: 99px;
}

.observers .obs-eye .icon {
  width: 15px;
  height: 15px;
  color: var(--teal);
}

.obs-avatars {
  display: flex;
}

.obs-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-left: -7px;
  border: 2px solid var(--asphalt-2);
  background: var(--teal);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.obs-dot:first-child {
  margin-left: 0;
}

.obs-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--cream);
  font-family: "JetBrains Mono", monospace;
}

.now-playing .np-ico .icon {
  width: 15px;
  height: 15px;
  color: var(--green);
}

.np-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.np-text b {
  color: var(--cream);
}

.trip-panel {
  margin-top: 20px;
  max-width: 720px;
}

.details-toggle {
  display: none;
}

/* pełnoekranowa scena: edge-to-edge (kompensacja paddingu .trip-screen) + wyższa droga */
.road-stage-full {
  border-radius: 0;
  border-left: none;
  border-right: none;
  margin-left: -22px;
  margin-right: -22px;
}

.road-stage-full .road-sky {
  height: 52vh;
  min-height: 360px;
}

.road-stage-full .road-base {
  height: 210px;
}

.road-stage-full .lane-line {
  bottom: 46px;
  height: 7px;
}

.road-stage-full .grass {
  bottom: 210px;
  height: 26px;
}

.road-stage-full .road-posts {
  bottom: 200px;
  height: 28px;
}

/* rozmiar auta responsywny (vw) — DUŻY na desktopie (~pół szerokości sceny), w całości widoczny na mobile;
   car-unit ma JAWNĄ szerokość, więc SVG/zdjęcie width:100% i nakładka załogi (inset:0) działają. */
.road-stage-full .car-unit {
  bottom: 48px;
  width: clamp(190px, 42vw, 560px);
}

.road-stage-full .car-svg-wrap {
  width: 100%;
}

.road-stage-full .crew-dot {
  font-size: 15px;
  border-width: 3px;
}

@media (min-width: 900px) {
  .road-stage-full {
    margin-left: -48px;
    margin-right: -48px;
  }
  .road-stage-full .road-sky {
    height: 58vh;
    max-height: 640px;
  }
}
/* główne ekrany na desktopie: komfortowa maksymalna szerokość treści tekstowej */
@media (min-width: 900px) {
  .h-title {
    font-size: 32px;
  }
  .auth-card {
    max-width: 440px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}
/* ==========================================================================
   Road stage (sygnatura) — style komponentu React TripProgress
   Ikony auta/pogody/mety to SVG; animacja i paleta jak w prototypie.
   ========================================================================== */
.trip-stage-wrap {
  width: 100%;
}

@media (min-width: 900px) {
  .trip-stage-wrap {
    max-width: 860px;
  }
}
.trip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 10px;
  flex-wrap: wrap;
}

.trip-route {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.trip-route .pt {
  display: flex;
  align-items: center;
  gap: 5px;
}

.dot-a {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--teal);
}

.dot-b {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--coral);
}

.weather-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-family: "JetBrains Mono", monospace;
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  padding: 5px 11px;
  border-radius: 99px;
  color: var(--cream-dim);
}

.weather-pill .icon {
  width: 15px;
  height: 15px;
}

/* pogoda w prawym górnym rogu NIEBA (półprzezroczysta, nad chmurami) */
.weather-pill.sky-pill {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 6;
  background: rgba(20, 24, 31, 0.5);
  border-color: rgba(255, 255, 255, 0.22);
  color: #f3efe7;
  backdrop-filter: blur(2px);
}

/* przyciski-IKONY w pasku odczytu (cofanie / pauza / zakończ / szczegóły) */
.ro-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--asphalt-3);
  color: var(--cream);
  cursor: pointer;
  padding: 0;
}

.ro-btn .icon {
  width: 17px;
  height: 17px;
}

.ro-btn:hover {
  background: var(--asphalt-4);
}

.ro-btn.ro-danger {
  color: var(--coral);
  border-color: rgba(255, 107, 97, 0.45);
}

.ro-btn.ro-active {
  color: var(--asphalt);
  background: var(--teal);
  border-color: var(--teal);
}

.ro-actions {
  display: flex;
  gap: 6px;
  flex: none;
}

.gps-hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 6;
  max-width: 90%;
  text-align: center;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(21, 23, 28, 0.82);
  color: var(--cream);
  font-size: 12px;
  line-height: 1.35;
  border: 1px solid var(--line);
}

.road-stage {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--asphalt-3);
}

.road-sky {
  position: relative;
  height: 180px;
}

/* warstwy nieba (deszcz/zachód/noc) nad stałą bazą dnia — crossfade przez opacity */
.sky-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 2s ease;
  pointer-events: none;
}

@media (min-width: 900px) {
  .road-sky {
    height: 230px;
  }
}
.sky-day {
  background: linear-gradient(180deg, #7cb8e8 0%, #a9d4f0 55%, #cde8f5 100%);
}

.sky-sunset {
  background: linear-gradient(180deg, #3a2540 0%, #6b3a4a 35%, #c4664f 65%, #e8a04d 100%);
}

.sky-night {
  background: linear-gradient(180deg, #0d1230 0%, #1a2150 55%, #2a3470 100%);
}

.sky-rain {
  background: linear-gradient(180deg, #4a5560 0%, #5d6770 55%, #717a85 100%);
}

/* Słońce/księżyc: pozycja (left/top) ORAZ rozmiar liczone w JS z łuku pół-elipsy i ZMIERZONEJ
   wysokości widocznego nieba (scena − jezdnia) — skalują się z każdym ekranem. transform centruje. */
.celestial {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 1s;
}

.sun-el {
  background: radial-gradient(circle, #ffe19a, #ffb84d 70%);
  box-shadow: 0 0 44px 12px rgba(255, 184, 77, 0.4);
}

.moon-el {
  background: radial-gradient(circle, #f0f0ff, #c8c8e0 70%);
  box-shadow: 0 0 30px 6px rgba(200, 200, 255, 0.3);
}

/* chmury-cumulusy (symbol i-cloud): dryf + płynne ściemnianie (deszcz/noc) i płynne
   pojawianie ławicy zachmurzenia (opacity z inline style) */
.cloud-svg {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  transition: opacity 2.2s ease, filter 2.2s ease;
  animation: cloudDrift linear infinite;
} /* chmury dryfują ZAWSZE — pauza auta nie zatrzymuje pogody */
.cloud-svg.cloud-dark {
  filter: brightness(0.55) saturate(0.55);
}

.cloud-svg.cloud-night {
  filter: brightness(0.72) saturate(0.8);
}

/* deszcz: prawdziwe krople (osobne elementy .drop) spadające pionowo */
.rain {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 4;
}

.drop {
  position: absolute;
  top: -14%;
  width: 2.5px;
  height: 18px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, rgba(226, 238, 252, 0.15), rgba(226, 238, 252, 0.95));
  box-shadow: 0 0 2px rgba(226, 238, 252, 0.5);
  animation-name: rainDrop;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes rainDrop {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    transform: translateY(120vh);
    opacity: 0;
  }
}
.road-stage-full .drop {
  height: 26px;
  width: 3px;
}

.hill {
  position: absolute;
  bottom: 70px;
  left: 0;
  width: 100%;
  height: 44px;
  background: #3a6e30;
  border-radius: 50% 50% 0 0/100% 100% 0 0;
  transform: scaleX(1.5);
  opacity: 0.5;
}

/* Pobocze (trawa) tuż nad jezdnią: wygięte ŹDŹBŁA (kafel SVG powtarzany w poziomie),
   w trzech odcieniach zieleni, z pełną „darnią" u dołu — nie zębatka/„góry". */
.grass {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 88px;
  height: 18px;
  z-index: 2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 30'%3E%3Cpath d='M2 30 Q3 16 7 5 Q7 18 8 30 Z' fill='%2343a047'/%3E%3Cpath d='M8 30 Q7 18 3 10 Q9 16 12 30 Z' fill='%232e7d32'/%3E%3Cpath d='M13 30 Q14 14 19 2 Q18 17 19 30 Z' fill='%234caf50'/%3E%3Cpath d='M20 30 Q22 18 27 9 Q24 20 25 30 Z' fill='%23388e3c'/%3E%3Cpath d='M27 30 Q27 15 24 7 Q31 14 32 30 Z' fill='%2343a047'/%3E%3Cpath d='M33 30 Q34 13 38 3 Q38 17 39 30 Z' fill='%232e7d32'/%3E%3Cpath d='M40 30 Q42 17 47 8 Q44 19 45 30 Z' fill='%234caf50'/%3E%3Cpath d='M46 30 Q46 14 43 6 Q51 13 52 30 Z' fill='%23388e3c'/%3E%3Cpath d='M53 30 Q54 12 58 1 Q58 16 59 30 Z' fill='%2343a047'/%3E%3Cpath d='M60 30 Q62 18 66 10 Q63 20 65 30 Z' fill='%232e7d32'/%3E%3Cpath d='M66 30 Q66 15 63 8 Q71 14 72 30 Z' fill='%234caf50'/%3E%3Cpath d='M72 30 Q74 14 78 4 Q77 18 78 30 Z' fill='%23388e3c'/%3E%3C/svg%3E") left bottom repeat-x;
  background-size: auto 100%;
}

.road-base {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 88px;
  background: #33373f;
  border-top: 3px solid #4d525c;
  overflow: hidden;
}

.road-base::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0 2px, transparent 2px 7px);
}

.road-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(42, 157, 157, 0.28), rgba(78, 203, 113, 0.42));
  border-right: 2px solid rgba(78, 203, 113, 0.95);
}

/* pasy: białe, przewijamy background-position o pełen okres wzoru (66px) → brak przeskoku */
/* width:120% + left:-10%: wzór wychodzi poza obie krawędzie (przycięte przez overflow:hidden),
   więc słupki/pasy nie „pojawiają się" nagle przy prawej krawędzi sceny. */
.lane-line {
  position: absolute;
  bottom: 22px;
  left: -10%;
  width: 120%;
  height: 5px;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0 36px, transparent 36px 66px);
}

.lane-line.driving {
  animation: laneScroll 0.55s linear infinite;
}

@keyframes laneScroll {
  to {
    background-position: -66px 0;
  }
}
/* słupki drogowe (białe z czerwonym paskiem) na poboczu; przewijają się jak pasy */
/* słupki drogowe (biało-czerwone) przy krawędzi jezdni; ta sama prędkość co pasy (≈120 px/s):
   okres 88px / .733s = 120 px/s = 66px / .55s (pasy). */
.road-posts {
  position: absolute;
  left: -10%;
  width: 120%;
  bottom: 82px;
  height: 20px;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 78px, #eef0f4 78px 82px, transparent 82px 88px);
}

.road-posts::after {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 100%;
  height: 5px;
  background: repeating-linear-gradient(90deg, transparent 0 78px, #d3382e 78px 82px, transparent 82px 88px);
}

.road-posts.driving, .road-posts.driving::after {
  animation: postScroll 0.733s linear infinite;
}

@keyframes postScroll {
  to {
    background-position: -88px 0;
  }
}
/* Znaki drogowe miejscowości (zielona tablica E-17a na dwóch słupkach):
   start = miejscowość początkowa przy linii startu, koniec = docelowa na końcu drogi (zamiast mety). */
.city-sign {
  position: absolute;
  bottom: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
}

.city-sign.start {
  left: 1%;
}

.city-sign.end {
  right: 1%;
}

.cs-board {
  background: #0e7a3c;
  color: #fff;
  font-weight: 700;
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 4px;
  border: 2px solid #f2f4f0;
  box-shadow: inset 0 0 0 1.5px #0b6330, 0 2px 4px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.4px;
}

.cs-posts {
  display: flex;
  gap: 9px;
  height: 24px;
}

.cs-posts i {
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, #d8dbe0, #7d828b);
}

.road-stage-full .city-sign {
  bottom: 210px;
}

.road-stage-full .cs-board {
  font-size: 15px;
  padding: 7px 14px;
  border-width: 2.5px;
}

.road-stage-full .cs-posts {
  height: 46px;
  gap: 14px;
}

.road-stage-full .cs-posts i {
  width: 4px;
}

.car-unit {
  position: absolute;
  bottom: 12px;
  left: 3%;
  z-index: 5;
  will-change: left;
}

.car-unit.driving {
  animation: carBob 0.45s ease-in-out infinite;
}

@keyframes carBob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}
/* aspect-ratio 2/1: zewnętrzny <svg> nie ma viewBox (jest na <symbol>), więc bez tego dostałby
   domyślne 150px wys. i .car-unit byłby kwadratem — przez co % pozycje twarzy nie trafiałyby w okna. */
.car-svg-wrap {
  position: relative;
  z-index: 2;
  width: 120px;
  aspect-ratio: 2/1;
  display: block;
}

.car-svg {
  width: 100%;
  aspect-ratio: 2/1;
  height: auto;
  display: block;
  filter: drop-shadow(0 7px 8px rgba(0, 0, 0, 0.5));
}

/* kręcące się koła (U2): nakładka na statyczne koła sprite'a — opona+piasta z gradientu,
   spoke (::before, conic) wiruje przy .driving; pozycje 1:1 z viewBox 160×80. */
.svg-wheel {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  background: radial-gradient(circle, #9BA0AB 0 13%, #3a3f4a 13% 42%, #15171C 42% 100%);
}

.svg-wheel::before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: conic-gradient(#5a606c 0 8deg, transparent 8deg 82deg, #5a606c 82deg 98deg, transparent 98deg 172deg, #5a606c 172deg 188deg, transparent 188deg 262deg, #5a606c 262deg 278deg, transparent 278deg 352deg, #5a606c 352deg 360deg);
}

.car-unit.driving .svg-wheel::before {
  animation: wheelSpin 0.45s linear infinite;
}

@keyframes wheelSpin {
  to {
    transform: rotate(360deg);
  }
}
/* strumień chmur (U1): wlatują zza prawej krawędzi, wylatują za lewą — reset pętli poza kadrem */
@keyframes cloudDrift {
  from {
    transform: translateX(118vw);
  }
  to {
    transform: translateX(-52vw);
  }
}
/* Załoga = głowy załogi WOKÓŁ auta (nie w oknach): kierowca + tylni ZA autem (behind, niżej z-index),
   przedni pasażer PRZED autem (front, wyżej z-index). Pozycje (left/top/width w %) liczy placeOccupants(). */
.car-crew {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.car-crew.behind {
  z-index: 1;
} /* pod nadwoziem — auto zasłania dół głowy, wystaje nad dach */
.car-crew.front {
  z-index: 4;
} /* nad nadwoziem — przedni pasażer przed autem */
.crew-dot {
  position: absolute;
  transform: translate(-50%, -50%);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--coral);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* zdjęcia ludzi bez obramowania (tylko inicjał-chip ma border) */
.crew-dot.crew-photo {
  object-fit: cover;
  border: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Auto-ZDJĘCIE na sygnaturze: fotka pojazdu + koła kręcące się w wykrytych pozycjach + twarze w oknie. */
.car-photo-wrap {
  position: relative;
  z-index: 2;
  width: 150px;
  display: block;
  filter: drop-shadow(0 7px 8px rgba(0, 0, 0, 0.5));
}

.road-stage-full .car-photo-wrap {
  width: 100%;
}

.car-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* REALNE koła wycięte ze zdjęcia (okrągły crop), obracane nad statycznym kołem fotki */
.photo-wheel-img {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -50%);
  aspect-ratio: 1;
  border-radius: 50%;
  display: block;
}

.photo-wheel-img.driving {
  animation: photoWheelSpin 0.5s linear infinite;
}

@keyframes photoWheelSpin {
  from {
    transform: translate(-50%, -50%) rotate(0);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
/* twarze nad zdjęciem: rozmiar z szerokości → zostają kołami (centrowanie z bazowego .crew-dot) */
.crew-dot.in-photo {
  height: auto;
}

/* Wycinek głowy (U6): przezroczysty PNG bez kolistego kadru/obwódki — sylwetka głowy z ML.
   Zachowuje własne proporcje (aspect-ratio:auto), delikatny cień odrywa głowę od nieba. */
.crew-dot.crew-cutout {
  aspect-ratio: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
  overflow: visible;
  box-shadow: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}

.road-stage-full .crew-dot.crew-cutout {
  border-width: 0;
}

.trip-readout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: var(--asphalt-2);
}

.trip-readout .pct {
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--lane);
}

.trip-readout .ro-item {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--cream-dim);
  text-align: center;
}

.trip-readout .ro-item b {
  display: block;
  color: var(--cream);
  font-size: 14px;
  margin-top: 2px;
}

.progress-track {
  height: 5px;
  background: var(--asphalt-4);
  position: relative;
}

.progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--teal), #4ECB71);
  width: 0%;
}

/* Auta uczestników wspólnej podróży: TA SAMA wielkość co moje auto, pas wyżej („dalej"),
   z imieniem nad dachem. Płynny ruch daje ekstrapolacja postępu w JS (memberPct), nie CSS. */
.convoy-unit {
  width: 150px;
  z-index: 4;
  bottom: 52px;
}

.road-stage-full .convoy-unit {
  width: clamp(190px, 42vw, 560px);
  bottom: 150px;
}

.convoy-unit .car-photo-wrap, .convoy-unit .car-svg-wrap {
  width: 100%;
}

.convoy-tag {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 9px;
  border-radius: 99px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: "JetBrains Mono", monospace;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  z-index: 5;
}

/* pas uczestnika na drodze: wypełnienie w jego kolorze (szerokość liczona z memberPct jak auto) */
.road-progress.lane-remote {
  border-right-style: solid;
}

/* pauza uczestnika: przygaszone auto + pulsujący znacznik ⏸ przy imieniu */
.convoy-unit.paused-car {
  opacity: 0.85;
}

.convoy-tag.paused {
  animation: pausePulse 1.4s ease-in-out infinite;
}

@keyframes pausePulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
/* META uczestnika: machająca flaga nad autem (zamiast znacznika pauzy) */
.finish-cheer {
  position: absolute;
  top: -52px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  color: var(--lane);
}

.finish-cheer .icon {
  width: 24px;
  height: 24px;
  transform-origin: bottom left;
  animation: flagWave 0.9s ease-in-out infinite;
}

@keyframes flagWave {
  0%, 100% {
    transform: rotate(-8deg);
  }
  50% {
    transform: rotate(16deg) translateY(-2px);
  }
}
/* zaplanowana trasa: termin */
.planned-when {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--lane);
}

.planned-when .icon {
  width: 15px;
  height: 15px;
}

/* ranking (U12) */
.metric-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.metric-tab {
  padding: 8px 14px;
  border-radius: 99px;
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  color: var(--cream-dim);
  font-size: 13px;
  font-weight: 600;
}

.metric-tab.active {
  background: var(--coral);
  border-color: var(--coral);
  color: #4A1B0C;
}

.lb-me {
  display: flex;
  align-items: center;
  gap: 12px;
  border-color: var(--lane);
}

.lb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.lb-row.me {
  background: rgba(245, 200, 76, 0.08);
  border-radius: 10px;
}

.lb-rank {
  min-width: 34px;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  color: var(--cream-dim);
}

.lb-rank.top1 {
  color: var(--lane);
}

.lb-rank.top2 {
  color: #C9C5BC;
}

.lb-rank.top3 {
  color: var(--amber);
}

.lb-nick {
  flex: 1;
  min-width: 0;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-val {
  font-family: "JetBrains Mono", monospace;
  color: var(--lane);
  font-weight: 500;
}

/* META (U9): overlay z konfeti + kartą po dojechaniu do celu */
.finish-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(16, 18, 22, 0.34);
}

.finish-card {
  position: relative;
  z-index: 2;
  background: var(--asphalt-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px 26px;
  text-align: center;
  max-width: 340px;
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.55);
}

.finish-emoji {
  font-size: 42px;
  line-height: 1;
}

.finish-title {
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: 20px;
  margin-top: 8px;
}

.finish-sub {
  font-size: 13px;
  color: var(--cream-dim);
  margin-top: 4px;
}

.confetti {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.confetti-piece {
  position: absolute;
  top: -12px;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  opacity: 0.95;
  animation-name: confettiFall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes confettiFall {
  0% {
    transform: translateY(-12px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(360px) rotate(540deg);
    opacity: 0.9;
  }
}
/* seating chart (komponent React SeatingChart) */
.seat-chart {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 16px;
  background: var(--asphalt-2);
  border-radius: 16px;
  border: 1px solid var(--line);
  position: relative;
}

.seat-chart::before {
  content: "PRZÓD";
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-family: "JetBrains Mono", monospace;
  color: var(--cream-dimmer);
  background: var(--asphalt);
  padding: 0 8px;
}

.seat {
  aspect-ratio: 1.3;
  border-radius: 11px;
  background: var(--asphalt-3);
  border: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 10px;
  color: var(--cream-dim);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s;
  padding: 6px;
}

.seat.filled {
  border-style: solid;
}

.seat.driver-seat {
  border-color: var(--lane);
}

.seat .s-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--asphalt-4);
}

.seat .s-av .icon {
  width: 15px;
  height: 15px;
}

.seat.filled .s-av {
  background: linear-gradient(135deg, var(--coral), var(--amber));
}

/* ==========================================================================
   RESPONSYWNOŚĆ SYGNATURY — te bloki MUSZĄ być na KOŃCU arkusza (ta sama
   specyficzność co reguły bazowe .road-stage-full/.convoy-unit ⇒ wygrywa
   późniejszy; wcześniejsze położenie psuło np. pozycję aut konwoju).
   ========================================================================== */
/* Mobile (pion LUB niski poziomy ekran): sygnatura DOSŁOWNIE na cały ekran (bez tytułu,
   bez paddingów, bez paska pod spodem); szczegóły pokazuje przycisk-ikona w pasku odczytu. */
@media (max-width: 899px), (max-height: 600px) {
  .details-toggle {
    display: flex;
  }
  .trip-screen .trip-panel {
    display: none;
  }
  .trip-screen .trip-panel.open {
    display: block;
    padding: 0 14px 14px;
  }
  .trip-screen {
    padding: 0;
  }
  .trip-screen .road-stage-full {
    margin: 0;
    border: none;
    border-radius: 0;
  }
  /* pod sceną tylko pasek odczytu (~52px) + linia postępu (6px) → niebo = reszta ekranu */
  .road-stage-full .road-sky {
    height: calc(100dvh - 56px);
    min-height: 280px;
    max-height: none;
  }
}
/* Telefon POZIOMO (mało wysokości): kompaktowa scena — niższa jezdnia, mniejsze auta i znaki */
@media (max-height: 540px) {
  .road-stage-full .road-sky {
    height: calc(100dvh - 51px);
    min-height: 170px;
    max-height: none;
  }
  .road-stage-full .road-base {
    height: 110px;
  }
  .road-stage-full .lane-line {
    bottom: 24px;
    height: 5px;
  }
  .road-stage-full .grass {
    bottom: 110px;
    height: 15px;
  }
  .road-stage-full .road-posts {
    bottom: 104px;
    height: 18px;
  }
  .road-stage-full .city-sign {
    bottom: 110px;
  }
  .road-stage-full .cs-board {
    font-size: 12px;
    padding: 5px 10px;
  }
  .road-stage-full .cs-posts {
    height: 26px;
    gap: 10px;
  }
  .road-stage-full .car-unit {
    bottom: 20px;
    width: clamp(130px, 24vw, 230px);
  }
  .road-stage-full .convoy-unit {
    bottom: 74px;
    width: clamp(130px, 24vw, 230px);
  }
  .trip-readout {
    padding: 6px 12px;
  }
  .trip-readout .pct {
    font-size: 18px;
  }
  .ro-btn {
    width: 30px;
    height: 30px;
  }
}
/* wąski pion: ciaśniejszy pasek odczytu, żeby ikony się zmieściły */
@media (max-width: 480px) {
  .trip-readout {
    padding: 10px 10px;
    gap: 6px;
  }
  .trip-readout .ro-item {
    font-size: 9.5px;
  }
  .trip-readout .ro-item b {
    font-size: 12px;
  }
  .trip-readout .pct {
    font-size: 17px;
  }
  .ro-btn {
    width: 31px;
    height: 31px;
    border-radius: 9px;
  }
  .ro-actions {
    gap: 5px;
  }
}