body[data-page=livery] { background: radial-gradient(circle at 82% 5%, #285444, transparent 34%), #102b25; }
.livery-heading { margin: .4rem 0 1.3rem; }
.livery-heading h1 { margin-bottom: .55rem; }
.livery-heading > p:last-child { max-width: 680px; color: var(--muted); margin: 0; }
.livery-boundary { max-width: 1100px; margin-bottom: 2rem; }
.livery-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1.2rem; align-items: start; }
.livery-controls, .livery-stage { border-radius: 18px; }
.livery-controls { border-top: 4px solid var(--gold); }
.livery-controls .eyebrow, .livery-stage .eyebrow { margin: 0; }
.livery-controls h2, .livery-stage h2 { margin-top: .35rem; }
.livery-control-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.livery-controls select, .livery-controls input { width: 100%; }
.livery-controls .button-row { margin-top: 1.5rem; }
.livery-actions button { flex: 1 1 140px; min-width: 0; }
.livery-actions .primary { margin-top: 0; }
.livery-stage { border-top: 4px solid var(--signal); position: sticky; top: 1rem; }
.livery-stage-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.livery-stage-head > div { min-width: 0; }
.livery-stage-head h2 { overflow-wrap: anywhere; }
#livery-draft-badge { flex-shrink: 0; display: inline-block; padding: .45rem .55rem; border: 1px solid var(--gold); font: 700 .62rem Consolas, ui-monospace, monospace; letter-spacing: .12em; color: var(--gold); }
.livery-preview { --paint-base: #1a5953; --paint-accent: #e8b86b; background: radial-gradient(circle at 50% 35%, #355f52, #102b25 76%); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.livery-preview svg { display: block; width: 100%; height: auto; }
.track-line { fill: none; stroke: #79918b; stroke-width: 2; opacity: .25; }
.car-shadow { fill: none; stroke: #081012; stroke-width: 30; stroke-linecap: round; opacity: .7; }
.tyre { fill: #0a1112; stroke: #758585; stroke-width: 4; }
.rim { fill: #84908b; stroke: #e8dfca; stroke-width: 5; }
.body-paint { fill: var(--paint-base); stroke: #e9e6d9; stroke-width: 5; stroke-linejoin: round; }
.glass { fill: #101d21; stroke: #c7d4cd; stroke-width: 4; }
.glass-line { fill: none; stroke: #c7d4cd; stroke-width: 4; }
.pattern { display: none; fill: var(--paint-accent); opacity: .98; }
.livery-preview[data-template=heritage] .pattern-heritage,
.livery-preview[data-template=sprint] .pattern-sprint,
.livery-preview[data-template=split] .pattern-split { display: block; }
.roundel { fill: #fbf4e5; stroke: #152326; stroke-width: 3; }
#preview-number { fill: #172527; font: 800 30px 'Segoe UI', Arial, sans-serif; }
.decal { display: none; fill: #fff4da; stroke: #162528; stroke-width: 2; }
.decal .fox-eye { fill: none; stroke: #152326; stroke-width: 3; stroke-linecap: round; }
.livery-preview[data-decal=maple] .decal-maple,
.livery-preview[data-decal=fox] .decal-fox { display: block; }
.lamp { fill: none; stroke: #f5dbad; stroke-width: 7; stroke-linecap: round; }
.livery-stage-note { color: var(--gold); font-size: .77rem; text-transform: uppercase; letter-spacing: .06em; }
#livery-saved-at { min-height: 1.5em; }
.livery-preview[data-base-color=pine] { --paint-base: #1a5953; }
.livery-preview[data-base-color=cream] { --paint-base: #f0e5ce; }
.livery-preview[data-base-color=copper] { --paint-base: #c96748; }
.livery-preview[data-base-color=gold] { --paint-base: #e8b86b; }
.livery-preview[data-base-color=charcoal] { --paint-base: #263235; }
.livery-preview[data-base-color=sky] { --paint-base: #7aa9ba; }
.livery-preview[data-accent-color=pine] { --paint-accent: #1a5953; }
.livery-preview[data-accent-color=cream] { --paint-accent: #f0e5ce; }
.livery-preview[data-accent-color=copper] { --paint-accent: #c96748; }
.livery-preview[data-accent-color=gold] { --paint-accent: #e8b86b; }
.livery-preview[data-accent-color=charcoal] { --paint-accent: #263235; }
.livery-preview[data-accent-color=sky] { --paint-accent: #7aa9ba; }
@media (max-width: 850px) {
  .livery-grid { grid-template-columns: minmax(0, 1fr); }
  .livery-stage { order: -1; position: static; }
}
@media (max-width: 500px) {
  .livery-control-pair { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .livery-stage-head { display: block; }
  #livery-draft-badge { margin-bottom: .8rem; }
  .livery-actions button { flex-basis: 100%; }
  .livery-heading { margin-top: .2rem; }
  .livery-boundary { margin-bottom: 1.2rem; font-size: .9rem; line-height: 1.5; }
  .livery-stage, .livery-controls { padding: 1rem; }
  .livery-stage-head h2, .livery-controls h2 { font-size: 1.55rem; }
  .livery-stage-head { display: flex; align-items: flex-start; flex-wrap: wrap; }
  #livery-draft-badge { margin: 0; }
  .livery-stage-note { font-size: .72rem; letter-spacing: .03em; }
}