* { box-sizing: border-box; }
:root {
  --bg: #040711;
  --panel: rgba(10, 17, 30, .9);
  --border: rgba(126, 181, 255, .22);
  --text: #eef6ff;
  --muted: #9aaec8;
  --blue: #26a8ff;
  --violet: #8d4dff;
  --green: #45ef8b;
  --yellow: #ffd166;
  --red: #ff5370;
  --shadow: 0 24px 80px rgba(0,0,0,.48);
}
body {
  margin: 0;
  color: var(--text);
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 20% 4%, rgba(38,168,255,.17), transparent 26%),
    radial-gradient(circle at 86% 20%, rgba(141,77,255,.14), transparent 28%),
    linear-gradient(135deg, #040711, #07101d 55%, #03050b);
}
button { font-family: inherit; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 270px 1fr; }
.sidebar {
  min-height: 100vh;
  padding: 20px 14px;
  border-right: 1px solid var(--border);
  background: rgba(4,8,15,.72);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
}
.game-logo { display: flex; align-items: center; gap: 12px; padding: 12px 10px 24px; }
.game-logo span {
  width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center;
  font-weight: 950; font-size: 29px; font-style: italic;
  background: linear-gradient(135deg, var(--blue), var(--violet));
}
.game-logo strong { display: block; letter-spacing: .05em; }
.game-logo small { display: block; color: var(--muted); margin-top: 3px; }
.nav-btn, .logout, .reset {
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  color: #cad8ec;
  background: transparent;
  cursor: pointer;
  border-radius: 15px;
  padding: 13px 14px;
  margin-bottom: 8px;
  font-weight: 850;
  transition: .15s ease;
}
.nav-btn:hover, .nav-btn.active {
  color: white;
  border-color: rgba(38,168,255,.32);
  background: linear-gradient(90deg, rgba(38,168,255,.18), rgba(141,77,255,.1));
}
.logout, .reset {
  margin-top: 8px;
  color: #d8e5f7;
  border-color: rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
}
.reset { color: #ffd6df; }
.mini-team {
  margin: 24px 0 14px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: rgba(255,255,255,.045);
}
.car-art {
  height: 88px;
  border-radius: 18px;
  margin-bottom: 12px;
  background:
    radial-gradient(circle at 20% 60%, rgba(38,168,255,.5), transparent 14%),
    radial-gradient(circle at 75% 62%, rgba(141,77,255,.5), transparent 14%),
    linear-gradient(135deg, rgba(16,25,45,.9), rgba(3,7,15,.9));
}
.mini-team strong, .mini-team small { display:block; }
.mini-team small { color: var(--muted); margin-top: 5px; }

.main { padding: 20px; max-width: 1540px; width: 100%; }
.hud { display: grid; grid-template-columns: 1fr 1.5fr 1fr .8fr .9fr; gap: 12px; margin-bottom: 18px; }
.hud > div, .panel {
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}
.hud > div { border-radius: 18px; padding: 15px; }
.label, .kicker {
  display: block;
  color: var(--muted);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 900;
}
.hud strong { display: block; margin-top: 5px; font-size: 1.05rem; }
.money { color: var(--green); }
.rp { color: #7dd0ff; }
.view { display: none; }
.view.active { display: block; }
.grid-3 { display: grid; grid-template-columns: 1.5fr 1fr .9fr; gap: 16px; margin-bottom: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.panel { border-radius: 24px; padding: 18px; }
.panel.big { min-height: 350px; }
.panel h2, .panel h3 { margin: 6px 0 12px; letter-spacing: -.04em; }
.panel h2 { font-size: 1.8rem; }
.panel h3 { font-size: 1.25rem; }
.muted { color: var(--muted); line-height: 1.6; }
.panel-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.badge {
  border: 1px solid rgba(69,239,139,.28);
  background: rgba(69,239,139,.1);
  color: #a9ffc9;
  border-radius: 999px;
  padding: 8px 11px;
  font-size: .78rem;
  font-weight: 950;
  white-space: nowrap;
}
.track-card { display: grid; grid-template-columns: 1.3fr .7fr; gap: 14px; }
.track-visual {
  min-height: 220px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 30% 20%, rgba(38,168,255,.14), transparent 30%),
    linear-gradient(135deg, rgba(9,17,31,.96), rgba(2,4,10,.85));
  position: relative;
  overflow: hidden;
}
.track-map {
  position: absolute;
  inset: 34px 38px;
  border: 6px solid rgba(38,168,255,.95);
  border-left-color: rgba(141,77,255,.95);
  border-radius: 46% 54% 42% 58%;
  filter: drop-shadow(0 0 18px rgba(38,168,255,.62));
  transform: rotate(-18deg);
}
.track-map:after {
  content: "";
  position: absolute;
  right: 24px; bottom: -10px;
  width: 24px; height: 24px;
  background: repeating-conic-gradient(#fff 0 25%, #111 0 50%) 50%/10px 10px;
  border-radius: 4px;
}
.race-meta { display: grid; gap: 10px; }
.race-meta div, .rules-list div, .news-feed div, .finance-card, .standing-row, .race-row, .driver-row, .upgrade-card, .calendar-card, .radio-feed div {
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(2,5,12,.38);
  border-radius: 15px;
}
.race-meta div { padding: 13px; }
.race-meta span { color: var(--muted); font-size: .78rem; display:block; }
.race-meta strong { display:block; margin-top: 5px; }
.action-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.btn {
  border: 0; border-radius: 14px;
  padding: 12px 15px;
  color: white; font-weight: 900;
  cursor: pointer;
}
.btn.primary { background: linear-gradient(135deg, var(--blue), var(--violet)); }
.btn.ghost {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.13);
}
.btn.danger { background: rgba(255,83,112,.14); border: 1px solid rgba(255,83,112,.25); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.rules-list { display: grid; gap: 10px; }
.rules-list div { padding: 13px; display: flex; justify-content: space-between; }
.rules-list span { color: var(--green); font-weight: 950; }
.meter { height: 10px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; }
.meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--violet)); }
.driver-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.driver-card { border: 1px solid rgba(255,255,255,.09); border-radius: 18px; background: rgba(2,5,12,.35); padding: 14px; }
.driver-card .portrait {
  height: 80px;
  border-radius: 16px;
  background: radial-gradient(circle at 50% 22%, rgba(255,255,255,.32), transparent 14%), linear-gradient(135deg, rgba(38,168,255,.22), rgba(141,77,255,.18));
  margin-bottom: 12px;
}
.statbar { display: grid; grid-template-columns: 115px 1fr 34px; gap: 10px; align-items: center; margin: 8px 0; color: var(--muted); font-size: .86rem; }
.statbar .bar { height: 7px; background: rgba(255,255,255,.09); border-radius: 999px; overflow: hidden; }
.statbar .bar span { display:block; height:100%; background: linear-gradient(90deg, var(--blue), var(--violet)); }
.car-line { margin: 10px 0; }
.news-feed, .radio-feed { display: grid; gap: 10px; max-height: 260px; overflow: auto; }
.news-feed div, .radio-feed div { padding: 13px; color: #d9e6f7; }
.news-feed time { color: var(--blue); font-weight: 900; margin-right: 8px; }

.calendar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 16px; }
.calendar-card { padding: 14px; position: relative; overflow: hidden; }
.calendar-card.current { border-color: rgba(38,168,255,.55); background: rgba(38,168,255,.11); }
.calendar-card.completed { border-color: rgba(69,239,139,.35); background: rgba(69,239,139,.08); }
.calendar-card.locked { opacity: .6; }
.calendar-card h3 { margin: 8px 0; }
.calendar-card .round { color: var(--blue); font-weight: 950; font-size: .8rem; text-transform: uppercase; }
.calendar-card .status { display: inline-block; margin-top: 10px; padding: 6px 9px; border-radius: 999px; background: rgba(255,255,255,.08); color: #dceaff; font-size: .78rem; font-weight: 900; }
.calendar-card .pb { color: var(--yellow); font-weight: 900; }

.driver-table { display: grid; gap: 12px; }
.driver-row { display: grid; grid-template-columns: 1.2fr repeat(8, .6fr); gap: 10px; padding: 14px; align-items: center; }
.driver-row.header {
  color: var(--muted);
  background: transparent;
  border: 0;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
}
.upgrade-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.upgrade-card { padding: 15px; }
.upgrade-card h3 { margin-top: 0; }
.upgrade-card p { color: var(--muted); line-height: 1.5; }
.upgrade-card .upgrade-cost { display: flex; justify-content: space-between; margin: 12px 0; color: #dceaff; }
.race-layout { grid-template-columns: .9fr 1.1fr; }
.weekend-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0; }
.step {
  padding: 12px 9px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
}
.step b {
  display: inline-grid; place-items: center;
  width: 25px; height: 25px;
  border-radius: 50%;
  margin-right: 7px;
  background: rgba(255,255,255,.1);
}
.step.active { border-color: rgba(38,168,255,.55); background: rgba(38,168,255,.12); }
.race-buttons, .strategy-buttons, .special-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 13px 0; }
.strategy {
  flex: 1; min-width: 130px;
  padding: 13px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.045);
  color: white;
  cursor: pointer;
  font-weight: 900;
}
.strategy.active { border-color: rgba(38,168,255,.55); background: rgba(38,168,255,.15); }
.strategy-box { border-top: 1px solid rgba(255,255,255,.09); margin-top: 16px; padding-top: 12px; }
.race-progress { display: grid; gap: 8px; margin-top: 18px; }
.race-progress span { color: var(--muted); }
.race-table, .standings { display: grid; gap: 8px; }
.race-row, .standing-row {
  display: grid;
  grid-template-columns: 40px 1.35fr .95fr .7fr .7fr .8fr;
  gap: 10px;
  padding: 11px;
  align-items: center;
  font-size: .92rem;
}
.race-row.header, .standing-row.header {
  background: transparent; border: 0;
  color: var(--muted);
  font-size: .76rem;
  text-transform: uppercase;
  font-weight: 950;
  letter-spacing: .08em;
}
.race-row.player, .standing-row.player { border-color: rgba(38,168,255,.45); background: rgba(38,168,255,.12); }
.race-row .energy { color: var(--green); font-weight: 900; }
.race-row .low { color: var(--red); }
.race-log { height: 260px; overflow: auto; display: flex; flex-direction: column-reverse; gap: 8px; }
.log-entry { border-left: 3px solid var(--blue); padding: 10px 12px; background: rgba(255,255,255,.045); border-radius: 10px; color: #dceaff; }
.log-entry.warning { border-left-color: var(--yellow); }
.log-entry.bad { border-left-color: var(--red); }
.log-entry.good { border-left-color: var(--green); }
.finance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
.finance-card { padding: 15px; }
.finance-card strong { display:block; font-size: 1.4rem; margin: 8px 0; }
.positive { color: var(--green); }
.negative { color: var(--red); }
.modal-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(0,0,0,.62);
  z-index: 20;
}
.modal-backdrop.active { display: grid; }
.modal {
  width: min(560px, 100%);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 28px;
  background: rgba(10,17,30,.98);
  box-shadow: var(--shadow);
}
.modal h2 { margin: 10px 0; font-size: 2rem; }
.modal p { color: var(--muted); line-height: 1.65; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }


.transfer-layout {
  grid-template-columns: 1.2fr .8fr;
}
.transfer-controls {
  display: grid;
  grid-template-columns: 1fr 1fr .7fr;
  gap: 12px;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background: rgba(2,5,12,.32);
}
.transfer-controls label {
  display: grid;
  gap: 7px;
  color: #dceaff;
  font-weight: 850;
  font-size: .86rem;
}
.transfer-controls input,
.transfer-controls select {
  width: 100%;
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(144,174,220,.24);
  background: rgba(1,4,10,.58);
  color: white;
  padding: 0 11px;
  outline: none;
}
.transfer-controls select option {
  color: #0b1220;
}
.market-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.market-card,
.slot-card {
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(2,5,12,.38);
  border-radius: 18px;
  padding: 15px;
}
.market-card h3,
.slot-card h3 {
  margin: 0 0 8px;
}
.market-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 10px 0 12px;
}
.tag {
  display: inline-flex;
  width: fit-content;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(38,168,255,.11);
  border: 1px solid rgba(38,168,255,.25);
  color: #cae8ff;
  font-size: .76rem;
  font-weight: 900;
}
.tag.gold {
  background: rgba(255,209,102,.1);
  border-color: rgba(255,209,102,.25);
  color: #ffe3a2;
}
.tag.green {
  background: rgba(69,239,139,.1);
  border-color: rgba(69,239,139,.25);
  color: #a9ffc9;
}
.transfer-price {
  display: grid;
  gap: 7px;
  margin: 12px 0;
  color: var(--muted);
}
.transfer-price b {
  color: var(--text);
}
.slot-list {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}
.slot-card.active {
  border-color: rgba(38,168,255,.45);
  background: rgba(38,168,255,.10);
}
.negotiation-good {
  color: var(--green);
}
.negotiation-bad {
  color: var(--red);
}


.sponsor-layout {
  grid-template-columns: 1.15fr .85fr;
}
.sponsor-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
  margin: 16px 0;
}
.sponsor-summary div,
.sponsor-card,
.offer-card {
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(2,5,12,.38);
  border-radius: 18px;
  padding: 15px;
}
.sponsor-summary span {
  display: block;
  color: var(--muted);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
}
.sponsor-summary b {
  display: block;
  margin-top: 7px;
  font-size: 1.2rem;
}
.sponsor-offers,
.sponsor-current {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}
.offer-card h3,
.sponsor-card h3 {
  margin: 6px 0 8px;
}
.offer-top,
.sponsor-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.offer-money {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 12px 0;
}
.offer-money div {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  border-radius: 14px;
  padding: 10px;
}
.offer-money span {
  display: block;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 850;
}
.offer-money b {
  display: block;
  margin-top: 5px;
}
.risk-low { color: var(--green); }
.risk-medium { color: var(--yellow); }
.risk-high { color: var(--red); }
.contract-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}


.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  place-items: center;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(10px);
}
.loading-overlay.active {
  display: grid;
}
.loading-card {
  width: min(420px, calc(100% - 32px));
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 28px;
  background: rgba(10,17,30,.98);
  box-shadow: var(--shadow);
  text-align: center;
}
.spinner {
  width: 44px;
  height: 44px;
  margin: 0 auto 16px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.12);
  border-top-color: var(--blue);
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.fatal-error-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  top: 16px;
  z-index: 60;
  display: none;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  border: 1px solid rgba(255,83,112,.45);
  border-radius: 18px;
  padding: 14px 16px;
  background: rgba(70, 7, 20, .96);
  color: white;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.fatal-error-banner.active {
  display: flex;
}
.fatal-error-banner p {
  margin: 4px 0;
}
.fatal-error-banner small {
  color: #ffd3dc;
}
.fatal-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.fatal-actions button {
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.1);
  color: white;
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 850;
}
.debug-layout {
  grid-template-columns: .95fr 1.05fr;
}
.debug-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}
.debug-checks {
  display: grid;
  gap: 8px;
}
.debug-check {
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(2,5,12,.38);
  border-radius: 14px;
  padding: 11px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.debug-check.ok b {
  color: var(--green);
}
.debug-check.warn b {
  color: var(--yellow);
}
.debug-check.bad b {
  color: var(--red);
}
.debug-pre {
  width: 100%;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(0,0,0,.28);
  border-radius: 16px;
  padding: 13px;
  color: #dceaff;
  font-size: .82rem;
}
.debug-pre.tall {
  max-height: 360px;
}


body:not(.dev-mode) .dev-only,
body:not(.dev-mode) .dev-indicator {
  display: none !important;
}
.dev-indicator {
  margin: 10px 0 14px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,209,102,.28);
  background: rgba(255,209,102,.1);
  color: #ffe3a2;
  font-weight: 950;
  text-align: center;
  letter-spacing: .08em;
  font-size: .78rem;
}


.session-steps {
  grid-template-columns: repeat(6, 1fr);
}
.qualifying-detail {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}
.qualifying-card {
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(2,5,12,.38);
  border-radius: 16px;
  padding: 12px;
}
.qualifying-card h4 {
  margin: 0 0 8px;
}
.quali-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.quali-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  border-radius: 12px;
  padding: 8px 10px;
  font-size: .86rem;
}
.quali-line.player {
  border-color: rgba(38,168,255,.45);
  background: rgba(38,168,255,.10);
}
.quali-line b {
  color: #eef6ff;
}
.quali-line small {
  color: var(--muted);
}
.rule-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}
.rule-chip {
  display: inline-flex;
  border-radius: 999px;
  padding: 6px 9px;
  border: 1px solid rgba(38,168,255,.24);
  background: rgba(38,168,255,.09);
  color: #cdeaff;
  font-size: .75rem;
  font-weight: 900;
}


.time-control-panel {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(2,5,12,.38);
  border-radius: 18px;
  padding: 13px;
  margin: 14px 0;
}
.time-control-panel strong {
  display: block;
  margin-top: 4px;
}
.time-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.sim-speed.active {
  border-color: rgba(38,168,255,.55);
  background: rgba(38,168,255,.16);
}
.analysis-layout {
  grid-template-columns: 1.05fr .95fr;
}
.analysis-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
  margin: 16px 0;
}
.analysis-card,
.analysis-driver-card,
.analysis-timeline-row,
.analysis-recommendations div {
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(2,5,12,.38);
  border-radius: 16px;
  padding: 13px;
}
.analysis-card span,
.analysis-driver-card span {
  display: block;
  color: var(--muted);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
}
.analysis-card b {
  display: block;
  margin-top: 6px;
  font-size: 1.25rem;
}
.analysis-driver-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.analysis-driver-card h4 {
  margin: 6px 0 10px;
  font-size: 1.05rem;
}
.analysis-timeline {
  display: grid;
  gap: 9px;
  max-height: 520px;
  overflow: auto;
}
.analysis-timeline-row {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 10px;
  align-items: center;
}
.timeline-lap {
  color: var(--blue);
  font-weight: 950;
}
.timeline-bars {
  display: grid;
  gap: 6px;
}
.timeline-driver {
  display: grid;
  grid-template-columns: 110px 1fr 42px 42px;
  gap: 8px;
  align-items: center;
  font-size: .82rem;
}
.timeline-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.timeline-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--violet));
}
.analysis-recommendations {
  display: grid;
  gap: 9px;
}
.analysis-empty {
  color: var(--muted);
  line-height: 1.6;
}


.tech-mini-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.tech-mini-summary div,
.technical-rule-card {
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(2,5,12,.38);
  border-radius: 16px;
  padding: 12px;
}
.tech-mini-summary span {
  display: block;
  color: var(--muted);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
}
.tech-mini-summary b {
  display: block;
  margin-top: 5px;
}
.technical-rule-card {
  grid-column: 1 / -1;
}
.fixed-part {
  border-color: rgba(255,209,102,.24);
}
.setup-card {
  grid-column: 1 / -1;
}
.setup-row {
  display: grid;
  grid-template-columns: 160px 1fr 64px;
  gap: 12px;
  align-items: center;
  margin: 10px 0;
  color: #dceaff;
  font-weight: 850;
}
.setup-row input {
  width: 100%;
  accent-color: var(--blue);
}


.partner-layout {
  grid-template-columns: 1fr 1fr;
}
.partner-effects {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
  margin: 16px 0;
}
.partner-effects div,
.partner-card,
.partner-offer-card {
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(2,5,12,.38);
  border-radius: 18px;
  padding: 14px;
}
.partner-effects span {
  display: block;
  color: var(--muted);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
}
.partner-effects b {
  display: block;
  margin-top: 6px;
  font-size: 1.18rem;
}
.partner-current,
.partner-offers {
  display: grid;
  gap: 14px;
}
.partner-card h3,
.partner-offer-card h3 {
  margin: 8px 0 8px;
}
.partner-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.partner-bonus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0;
}
.partner-bonus-grid div {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  border-radius: 13px;
  padding: 9px;
}
.partner-bonus-grid span {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 850;
}
.partner-bonus-grid b {
  display: block;
  margin-top: 4px;
}
.partner-rule-note {
  color: var(--muted);
  line-height: 1.5;
  margin: 8px 0 0;
}
.partner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}


.manufacturer-layout {
  grid-template-columns: .95fr 1.05fr;
}
.manufacturer-profile-grid {
  display: grid;
  gap: 14px;
}
.manufacturer-card {
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(2,5,12,.38);
  border-radius: 18px;
  padding: 14px;
}
.manufacturer-card h3 {
  margin: 8px 0;
}
.manufacturer-card .partner-bonus-grid {
  margin-top: 10px;
}
.manufacturer-standings .standing-row {
  grid-template-columns: 44px 1.2fr .8fr .8fr .8fr .8fr;
}
.powertrain-badge {
  display: inline-flex;
  width: fit-content;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(69,239,139,.25);
  background: rgba(69,239,139,.09);
  color: #a9ffc9;
  font-size: .74rem;
  font-weight: 900;
}
.customer-team-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.customer-team-list span {
  display: inline-flex;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  color: #dceaff;
  font-size: .76rem;
  font-weight: 850;
}


.system-health strong {
  color: var(--green);
}
.system-health strong.bad {
  color: var(--red);
}


.race-map-panel {
  min-height: 430px;
}
.track2d-shell {
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,.09);
  background:
    radial-gradient(circle at 30% 30%, rgba(38,168,255,.15), transparent 25%),
    radial-gradient(circle at 70% 70%, rgba(141,77,255,.12), transparent 26%),
    rgba(2,5,12,.38);
  border-radius: 22px;
  padding: 16px;
}
.track2d-map {
  contain: layout paint;
  transform: translateZ(0);
  position: relative;
  height: 310px;
  border-radius: 24px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,.035), transparent),
    radial-gradient(circle at center, rgba(0,0,0,.28), rgba(0,0,0,.05));
}
.track2d-line {
  position: absolute;
  inset: 34px 48px;
  border-radius: 48% 52% 44% 56%;
  transform: rotate(-8deg);
}
.track2d-line.outer {
  border: 14px solid rgba(38,168,255,.88);
  box-shadow: 0 0 30px rgba(38,168,255,.22);
}
.track2d-line.inner {
  inset: 66px 88px;
  border: 3px dashed rgba(255,255,255,.22);
}
.track2d-start,
.track2d-attack,
.track2d-pit,
.track2d-overlay {
  position: absolute;
  z-index: 3;
  padding: 6px 8px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .06em;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.55);
}
.track2d-start { right: 72px; bottom: 72px; color: white; }
.track2d-attack { left: 64px; top: 64px; color: #cdeaff; border-color: rgba(38,168,255,.36); }
.track2d-pit { right: 86px; top: 70px; color: #ffe3a2; border-color: rgba(255,209,102,.36); }
.track2d-overlay {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: 120px;
  text-align: center;
  color: #a9ffc9;
  background: rgba(0,0,0,.65);
}
.track2d-overlay.warning {
  color: #ffe3a2;
  border-color: rgba(255,209,102,.42);
}
.track-car {
  position: absolute;
  z-index: 5;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  transform: translate3d(-999px, -999px, 0);
  display: grid;
  place-items: center;
  color: #06101f;
  font-size: .66rem;
  font-weight: 950;
  border: 2px solid rgba(255,255,255,.72);
  background: #dceaff;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  will-change: transform, opacity;
  transition: box-shadow .18s ease, opacity .18s ease;
}
.track-car.player {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--blue), var(--violet));
  color: white;
  box-shadow: 0 0 24px rgba(38,168,255,.55);
}
.track-car.attack {
  box-shadow: 0 0 28px rgba(255,209,102,.75), 0 0 8px rgba(255,255,255,.5);
  border-color: #ffd166;
}
.track-car.pit {
  outline: 3px solid rgba(69,239,139,.35);
}
.track-car.low-energy {
  border-color: var(--red);
}
.track-car .tooltip {
  position: absolute;
  left: 50%;
  bottom: 130%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(0,0,0,.82);
  color: white;
  font-size: .68rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.track-car:hover .tooltip {
  opacity: 1;
}
.track2d-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  color: var(--muted);
  font-size: .82rem;
}
.legend-dot {
  display: inline-flex;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}
.legend-dot.player { background: var(--blue); }
.legend-dot.rival { background: #dceaff; }
.legend-dot.attack { background: var(--yellow); }
.legend-dot.pit { background: var(--green); }


.online-layout { grid-template-columns: 1fr 1fr; }
.online-actions { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0; }
.online-checks { display:grid; gap:9px; }
.online-check { border:1px solid rgba(255,255,255,.09); background:rgba(2,5,12,.38); border-radius:14px; padding:11px; display:flex; justify-content:space-between; gap:10px; }
.online-check.ok b { color: var(--green); }
.online-check.warn b { color: var(--yellow); }
.online-check.bad b { color: var(--red); }

@media (max-width: 1120px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: relative; min-height: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .game-logo, .mini-team { grid-column: 1 / -1; }
  .hud, .grid-3, .grid-2, .race-layout, .upgrade-grid, .finance-grid, .calendar-grid, .market-grid, .transfer-controls, .transfer-layout, .sponsor-layout, .sponsor-summary, .offer-money, .debug-layout, .debug-actions, .analysis-layout, .analysis-summary, .analysis-driver-grid, .tech-mini-summary, .setup-row, .partner-layout, .partner-effects, .partner-bonus-grid, .manufacturer-layout, .online-layout { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .main { padding: 12px; }
  .hud { grid-template-columns: 1fr; }
  .track-card, .driver-cards, .weekend-steps, .quali-mini-grid, .timeline-driver { grid-template-columns: 1fr; }
  .race-row, .standing-row, .driver-row { grid-template-columns: 1fr; }
}