.fuel-surface-status-row .fuel-surface-status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
}

.fuel-surface-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid var(--border-bright);
  color: var(--text);
  background: #2a3544;
}

.fuel-surface-badge[data-surface="wet"] {
  background: #1a3a5c;
  border-color: #4ea8de;
  color: #9fd4f5;
}

.fuel-surface-badge[data-surface="dry"] {
  background: #3a3420;
  border-color: #c4a35a;
  color: #f0d9a0;
}

.fuel-weather-cell {
  white-space: nowrap;
  max-width: 220px;
}

.fuel-weather-pill {
  display: inline-block;
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--border-bright);
  background: #2a3544;
  color: var(--text);
  vertical-align: middle;
}

.fuel-weather-pill[data-surface="wet"] {
  background: #1a3a5c;
  border-color: #4ea8de;
  color: #9fd4f5;
}

.fuel-weather-pill[data-surface="dry"] {
  background: #3a3420;
  border-color: #c4a35a;
  color: #f0d9a0;
}

#fuel-weather-hint {
  margin: 0 0 10px;
}

/* Fuel tab — colours & controls (V5 parity). Does not touch live timing. */

.fuel-lap-row {
  display: flex;
  gap: 6px;
}

.fuel-lap-row .fuel-lap-min,
.fuel-lap-row .fuel-lap-sec {
  width: 50px;
}

.fuel-lap-row .fuel-lap-ms {
  width: 60px;
}

/* Toolbar */
.fuel-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.fuel-toolbar-sep {
  width: 1px;
  height: 28px;
  margin: 0 4px;
  background: var(--border-bright);
  flex-shrink: 0;
}

/* FCY buttons — match desktop V5 theme.py */
button.btn-fcy {
  background: #fdda24;
  border-color: #e6c200;
  color: #1a1a1a;
  font-weight: 700;
  letter-spacing: 0.02em;
}

button.btn-fcy:hover {
  background: #e6c200;
  border-color: #c9a800;
  color: #1a1a1a;
}

button.btn-end-fcy {
  background: #2ea86a;
  border-color: #248f58;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
}

button.btn-end-fcy:hover {
  background: #248f58;
  border-color: #1d7346;
  color: #fff;
}

/* Fuel table — row colours from backend (override generic table stripes) */
#fuel-table tbody tr td {
  background-color: var(--fuel-row-bg, var(--row-a)) !important;
  color: var(--fuel-row-fg, var(--text));
  transition: filter 0.12s ease;
}

#fuel-table tbody tr:hover td {
  filter: brightness(0.94);
}

#fuel-table tbody tr.selected td {
  box-shadow: inset 0 0 0 2px var(--cyan);
  outline: none;
}

#fuel-table tbody tr.fuel-strat-stop td:first-child {
  box-shadow: inset 3px 0 0 var(--cyan);
}

#fuel-table tbody tr.fuel-row-fcy td {
  --fuel-row-bg: #ffe566;
  --fuel-row-fg: #1a1a1a;
}

#fuel-table tbody tr[data-row-bg] td {
  background-color: attr(data-row-bg type(<color>)) !important;
  color: attr(data-row-fg type(<color>));
}

#fuel-table .fuel-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(0, 0, 0, 0.18);
}

#fuel-table tr.fuel-row-fcy .fuel-status {
  background: rgba(0, 0, 0, 0.12);
  color: #1a1a1a;
}

#fuel-table .fuel-status-empty { color: #ffd0d0; }
#fuel-table .fuel-status-critical { color: #ffb080; }
#fuel-table .fuel-status-low { color: #ffe08a; }
#fuel-table .fuel-status-green { color: #b8f0c8; }
#fuel-table .fuel-status-FCY { color: #1a1a1a; }

.fuel-legend {
  margin: 0 0 10px;
  padding: 8px 10px;
  background: var(--panel-alt);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.fuel-legend-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  vertical-align: -2px;
  margin-right: 4px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.fuel-legend-swatch.fcy { background: #ffe566; }
.fuel-legend-swatch.low { background: #ffbe5a; }
.fuel-legend-swatch.ok { background: #6ec49a; }

/* Strategy table — alternating rows, no fuel gradient */
#strategy-table tbody tr:nth-child(odd) td {
  background: var(--row-a) !important;
}

#strategy-table tbody tr:nth-child(even) td {
  background: var(--row-b) !important;
}

#strategy-table tbody tr:hover td {
  background: var(--panel-hi) !important;
}

#strategy-table tbody tr td:last-child {
  font-weight: 600;
  color: var(--text-dim);
}

#strategy-table tbody tr[data-manual="1"] td:last-child {
  color: var(--accent);
}

/* Fuel chart */
#fuel-chart-wrap {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px;
}

/* Fuel pages strip (inside Fuel panel only — not the top menu) */
.fuel-pages-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 10px 12px;
  background: var(--panel, #1a1d24);
  border: 1px solid var(--border, #2a3040);
}

.fuel-pages-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim, #9aa0a8);
  flex-shrink: 0;
}

.fuel-page-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.fuel-page-pill-wrap {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border, #2a3040);
  background: var(--panel-alt, #12151c);
}

.fuel-page-pill {
  border: 0;
  background: transparent;
  color: var(--text, #e8eaed);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  cursor: pointer;
  white-space: nowrap;
}

.fuel-page-pill:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
}

.fuel-page-pill.active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}

.fuel-page-del {
  border: 0;
  border-left: 1px solid var(--border, #2a3040);
  background: transparent;
  color: var(--text-dim, #9aa0a8);
  font-size: 16px;
  line-height: 1;
  padding: 0 10px;
  cursor: pointer;
}

.fuel-page-del:hover {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}

.fuel-page-add {
  width: 36px;
  height: 36px;
  border: 1px dashed var(--border-bright, #3a4254);
  background: transparent;
  color: var(--text, #e8eaed);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fuel-page-add:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.fuel-page-add:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.fuel-page-modal-card {
  position: relative;
  max-width: 420px;
}

.fuel-page-modal-x {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: transparent;
  color: var(--text-dim, #9aa0a8);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

.fuel-page-modal-x:hover {
  color: #fff;
}

/* Learned burn rate from the last race at this circuit. An offer, not an
   application — a rate from a previous weekend is stale if the car changed,
   and only the crew knows that. */
.fuel-learned-burn {
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid #4ea8de;
  border-left-width: 3px;
  background: #1a3a5c;
}

.fuel-learned-text {
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.5;
  color: #d6ecfa;
}

.fuel-learned-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}