/* 驾驶区以场地和方向盘为主体，手机滚动操作时保留场地与圈数。 */
.page-drive { width: min(1500px, calc(100% - 48px)); padding-bottom: 24px; }
.drive-app [hidden] { display: none !important; }
.drive-heading { display: flex; justify-content: space-between; align-items: center; padding: 25px 0 21px; gap: 18px; }
.drive-heading .eyebrow { margin-bottom: 4px; font-size: 11px; }
.drive-heading h1 { font-size: 29px; }
.drive-heading .text-link { font-size: 13px; }
.drive-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; padding-bottom: 16px; }
.drive-project { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--muted); }
.drive-project select { min-height: 44px; border: 1px solid #b5c0ad; border-radius: 7px; padding: 8px 30px 8px 12px; color: var(--ink); background: var(--paper); max-width: 230px; }
.drive-mode { display: flex; background: #e5e9db; padding: 4px; border-radius: 8px; gap: 2px; }
.drive-mode button, .drive-viewbar button { min-height: 38px; background: transparent; border: 0; padding: 7px 13px; font-size: 13px; border-radius: 5px; }
.drive-mode button[aria-pressed=true] { background: var(--green); color: var(--paper); }
.manual-toggle { display: flex; align-items: center; gap: 7px; font-size: 13px; margin-left: auto; min-height: 44px; }
.drive-app input[type=checkbox] { accent-color: var(--green); width: 17px; height: 17px; }
.button.compact { min-height: 43px; font-size: 13px; padding: 9px 18px; border-radius: 8px; }
.drive-progress { display: flex; align-items: center; gap: 28px; border-block: 1px solid var(--line); padding: 11px 0; margin-bottom: 18px; }
.drive-progress > span { font-size: 12px; color: #7d887a; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.drive-progress b { font-size: 11px; display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid #c9d1c1; border-radius: 50%; font-weight: 500; }
.drive-progress .current { color: var(--green); font-weight: 600; }
.drive-progress .current b { background: var(--green); color: var(--paper); border-color: var(--green); }
.drive-progress .complete b { background: #d7e4c9; border-color: #96af84; color: var(--green); }
.drive-layout { display: grid; grid-template-columns: minmax(0, 1fr) 335px; gap: 26px; align-items: start; }
.drive-world { min-width: 0; }
.drive-viewbar { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 0 0 10px; }
.drive-viewbar > div { display: flex; gap: 4px; }
.drive-viewbar button[aria-pressed=true] { background: #e3e8d8; color: var(--green); font-weight: 600; }
.drive-viewbar label { font-size: 12px; display: flex; align-items: center; gap: 6px; }
.drive-viewport { position: relative; height: clamp(350px, 48vh, 570px); border-radius: 12px; overflow: hidden; background: #d9e1c8; border: 1px solid #cbd4be; }
#sim-canvas { display: block; width: 100%; height: 100%; }
.drive-scene-tag { position: absolute; top: 15px; left: 17px; font-size: 11px; color: #38513c; pointer-events: none; }
.drive-wheel-hud { position: absolute; bottom: 14px; right: 15px; background: #f6f4ebf2; padding: 10px 15px; border-radius: 8px; pointer-events: none; border: 1px solid #d2d9c7; }
.drive-wheel-hud strong { display: block; font-size: 20px; font-variant-numeric: tabular-nums; line-height: 1.4; }
.drive-wheel-hud small { color: var(--muted); display: block; font-size: 11px; margin-top: 3px; }
.drive-pause-cover { position: absolute; inset: 0; background: #edf0e3e8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 30px; text-align: center; }
.drive-pause-cover strong { font-size: 28px; }
.drive-pause-cover p { max-width: 430px; font-size: 14px; }
.drive-instruments { display: flex; align-items: center; gap: 30px; padding: 15px 4px; border-bottom: 1px solid var(--line); }
.drive-instruments p { display: flex; align-items: baseline; gap: 7px; font-variant-numeric: tabular-nums; }
.drive-instruments strong { font-size: 22px; font-weight: 600; line-height: 1.2; }
.drive-instruments span { font-size: 10px; color: var(--muted); }
.drive-instruments .drive-engine { margin-left: auto; background: #e4e9dc; padding: 5px 9px; border-radius: 4px; white-space: nowrap; }
.drive-instruments .is-stalled { background: #f3d8c6; color: #97441b; }
.drive-task { display: flex; gap: 14px; padding: 20px 0 14px; }
.drive-task-index { padding-top: 1px; font-size: 19px; color: #a2764e; font-family: Georgia, serif; }
.drive-task h2 { font-size: 17px; margin-bottom: 6px; letter-spacing: 0; }
.drive-task p { font-size: 13px; color: var(--muted); }
.drive-task .drive-message { color: #996038; margin-top: 7px; min-height: 21px; }
.drive-console { background: #eeefe5; border: 1px solid #d9dfcf; border-radius: 12px; padding: 18px; }
.steering-heading { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--muted); gap: 6px; }
.steering-center-light { color: #336847; white-space: nowrap; }
.steering-center-light.is-turned { color: #b56430; }
.steering-readout { font-size: 29px; line-height: 1.3; font-weight: 650; letter-spacing: -.04em; margin-top: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.steering-return { font-size: 13px; color: #996038; min-height: 22px; margin-top: 5px; }
.steering-visual { display: flex; align-items: center; justify-content: space-around; gap: 12px; margin: 12px 0 4px; }
.steering-wheel { width: 176px; flex-shrink: 0; touch-action: none; user-select: none; cursor: grab; }
.steering-wheel:active { cursor: grabbing; }
.steering-wheel svg { width: 100%; }
.wheel-track { stroke: #d4dccb; stroke-width: 1; fill: none; stroke-dasharray: 1 6; }
.wheel-index { fill: #bc6535; }
.wheel-rim { stroke: #2c4538; stroke-width: 19; fill: #e4e7da; }
.wheel-spoke { stroke: #355541; stroke-width: 15; stroke-linejoin: round; fill: none; }
.wheel-center-mark { stroke: #faf8eb; stroke-width: 6; stroke-linecap: round; }
.wheel-hub { fill: #2c4538; }
.wheel-logo { stroke: #d8e0cb; stroke-width: 1.5; }
.front-wheel-preview { text-align: center; max-width: 83px; }
.front-wheel-preview > span, .front-wheel-preview small { font-size: 10px; color: var(--muted); }
.front-wheel-preview svg { width: 82px; margin: 8px 0 2px; }
.front-wheel-preview svg path { stroke: #a1ad94; stroke-width: 4; fill: none; }
.front-wheel-preview rect { fill: #355541; }
.steering-range { width: 100%; height: 30px; cursor: ew-resize; accent-color: var(--green); margin: 3px 0 0; }
.steering-scale { display: flex; justify-content: space-between; gap: 4px; font-size: 9px; color: var(--muted); margin-top: -2px; }
.steering-scale b { color: var(--green); }
.steering-steps { display: flex; gap: 5px; margin-top: 13px; }
.steering-steps button { flex: 1; min-height: 41px; padding: 7px 2px; border: 1px solid #b7c4aa; border-radius: 5px; background: #f6f5ed; font-size: 11px; white-space: nowrap; }
.steering-steps button:nth-child(2) { background: #dbe5cd; font-weight: 600; }
.steering-note { font-size: 10px; line-height: 1.7; color: var(--muted); margin: 10px 0 15px; }
.drive-gears { display: flex; align-items: center; gap: 10px; padding-top: 15px; border-top: 1px solid #d3dcc8; }
.drive-gears > span { font-size: 11px; }
.drive-gears > div { display: flex; gap: 4px; }
.drive-gears button { background: #f5f4ea; min-width: 36px; min-height: 48px; border: 1px solid #bcc8b1; border-radius: 5px; padding: 4px 7px; font-size: 15px; font-weight: 600; }
.drive-gears button small { font-size: 9px; display: block; font-weight: 400; }
.drive-gears button[aria-pressed=true] { background: var(--green); color: var(--paper); border-color: var(--green); }
.drive-gears #sim-handbrake { margin-left: auto; font-size: 10px; font-weight: 500; min-width: 82px; }
.drive-gears #sim-handbrake[aria-pressed=true] { background: #f0d8c7; color: #965026; border-color: #cea989; }
.drive-pedals { display: flex; gap: 12px; margin-top: 15px; }
.drive-pedals button { flex: 1; touch-action: none; user-select: none; min-height: 72px; border-radius: 7px; border: 1px solid #8ea77b; background: #d9e4cb; color: #30503a; box-shadow: inset 0 -5px 0 #b8caa4; transition: background 80ms; }
.drive-pedals span { display: block; font-size: 17px; font-weight: 600; }
.drive-pedals small { display: block; font-size: 10px; margin-top: 3px; }
.drive-pedals .pedal-brake { background: #e9dbc9; border-color: #c4aa87; color: #815c38; box-shadow: inset 0 -5px 0 #d5c0a4; }
.drive-pedals button.is-held, .drive-pedals button:active { background: var(--green); color: var(--paper); box-shadow: inset 0 3px 0 #183b29; }
.drive-line-pause { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); margin-top: 17px; }
.drive-clutch { margin-top: 15px; padding-top: 12px; border-top: 1px solid #d3dcc8; }
.drive-clutch label, .drive-clutch > div { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.drive-clutch label span, .drive-clutch > div { color: var(--muted); font-size: 10px; }
.drive-clutch input { width: 100%; accent-color: var(--green); min-height: 34px; }
.drive-clutch p { font-size: 10px; color: var(--muted); margin-top: 6px; }
.drive-ignition { width: 100%; min-height: 44px; margin-top: 12px; background: #b95f32; color: var(--paper); border: none; border-radius: 5px; }
.drive-mirrors { border-top: 1px solid var(--line); margin-top: 10px; }
.drive-mirrors summary { cursor: pointer; font-size: 12px; padding: 12px 0; }
.drive-mirrors summary span { font-size: 10px; color: var(--muted); margin-left: 8px; }
.drive-mirrors > div { display: flex; gap: 15px; padding-bottom: 10px; }
.drive-mirrors figure { margin: 0; width: calc(50% - 7px); }
.drive-mirrors canvas { width: 100%; height: 145px; display: block; border: 5px solid #354f3d; border-radius: 18px 18px 28px 28px; background: #d9e1c8; }
.drive-mirrors figcaption { color: var(--muted); font-size: 10px; margin-top: 5px; }
.drive-bottom { display: flex; align-items: start; justify-content: space-between; gap: 22px; padding-top: 20px; margin-top: 18px; border-top: 1px solid var(--line); }
.drive-bottom details { flex: 1; }
.drive-bottom summary { cursor: pointer; min-height: 44px; padding: 10px 0; font-size: 12px; }
.drive-bottom summary span { margin-left: 10px; font-size: 11px; color: var(--muted); }
.drive-bottom > button { min-height: 44px; font-size: 12px; }
.drive-help { max-width: 830px; font-size: 12px; color: var(--muted); padding: 12px 0; }
.drive-help p + p { margin-top: 9px; }
.drive-help b { font-weight: 600; color: #466045; }
.drive-help ol { padding-left: 20px; }
.drive-model-note { font-size: 11px; color: var(--muted); margin: 13px 0; }
.drive-model-note a { text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; margin-left: 8px; }
.drive-result { margin-top: 23px; padding: 24px; background: #e1e9d5; border-radius: 8px; }
.drive-result h2 { font-size: 24px; }
.drive-result p:not(.eyebrow) { font-size: 14px; margin: 12px 0 17px; }
@media (max-width: 1100px) {
  .drive-layout { grid-template-columns: minmax(0, 1fr) 310px; gap: 18px; }
  .drive-console { padding: 15px; }
  .drive-instruments { gap: 17px; }
  .drive-instruments p { flex-direction: column; gap: 3px; }
  .drive-progress { gap: 18px; }
  .drive-toolbar { gap: 10px; }
  .steering-wheel { width: 162px; }
  .steering-readout { font-size: 27px; }
  .drive-gears { gap: 7px; }
  .drive-viewbar label { font-size: 10px; }
}
@media (max-width: 800px) {
  .page-drive { width: calc(100% - 24px); }
  body.is-driving .site-header { width: calc(100% - 24px); min-height: 58px; padding-top: 0; }
  body.is-driving .site-header nav { display: none; }
  body.is-driving .brand-mark { width: 30px; height: 30px; border-radius: 8px; }
  body.is-driving .brand-mark svg { width: 25px; }
  body.is-driving .brand { font-size: 18px; }
  body.is-driving .license-tag { margin-left: auto; }
  .drive-heading { padding: 14px 0; }
  .drive-heading h1 { font-size: 23px; }
  .drive-heading .eyebrow { font-size: 10px; }
  .drive-heading .text-link { font-size: 11px; }
  .drive-toolbar { gap: 7px 10px; }
  .drive-project { font-size: 0; gap: 0; }
  .drive-project select { font-size: 12px; width: 143px; min-height: 40px; padding-left: 8px; }
  .drive-mode { margin-left: auto; }
  .drive-mode button { font-size: 11px; padding-inline: 9px; min-height: 36px; }
  .manual-toggle { margin-left: 0; font-size: 11px; min-height: 34px; }
  #sim-pause { margin-left: auto; min-height: 36px; padding: 7px 15px; font-size: 12px; }
  .drive-progress { gap: 14px; overflow-x: auto; margin-bottom: 10px; padding-block: 9px; }
  .drive-progress > span { font-size: 10px; gap: 5px; }
  .drive-progress b { width: 19px; height: 19px; font-size: 9px; }
  .drive-layout { display: flex; flex-direction: column; gap: 0; }
  .drive-world { display: contents; }
  .drive-viewbar { order: 0; width: 100%; padding-bottom: 7px; }
  .drive-viewbar button { font-size: 11px; padding-inline: 10px; min-height: 39px; }
  .drive-viewbar label { font-size: 10px; white-space: nowrap; }
  .drive-viewport { order: 1; position: sticky; top: 0; z-index: 5; width: 100%; height: min(34vh, 280px); min-height: 215px; border-radius: 8px; }
  .drive-scene-tag { top: 9px; left: 10px; font-size: 9px; }
  .drive-wheel-hud { bottom: 9px; right: 9px; padding: 6px 9px; border-radius: 5px; }
  .drive-wheel-hud strong { font-size: 17px; }
  .drive-wheel-hud small { font-size: 9px; }
  .drive-instruments { order: 2; width: 100%; gap: 20px; padding: 11px 2px; }
  .drive-instruments strong { font-size: 20px; }
  .drive-instruments span { font-size: 9px; }
  .drive-instruments .drive-engine { padding: 4px 6px; font-size: 9px; }
  .drive-task { order: 3; padding: 13px 0; gap: 10px; }
  .drive-task h2 { font-size: 15px; }
  .drive-task p { font-size: 11px; }
  .drive-task .drive-message { font-size: 10px; min-height: 0; }
  .drive-task-index { font-size: 16px; }
  .drive-console { order: 4; width: 100%; display: grid; grid-template-columns: minmax(115px, .8fr) 1.2fr; gap: 4px 14px; padding: 15px; }
  .steering-heading { grid-column: 1 / -1; font-size: 10px; }
  .steering-readout { grid-column: 2; grid-row: 2; font-size: 23px; margin-top: 16px; align-self: end; }
  .steering-return { grid-column: 2; grid-row: 3; font-size: 11px; margin-top: 0; align-self: start; }
  .steering-visual { display: contents; }
  .steering-wheel { width: min(125px, 100%); grid-column: 1; grid-row: 2 / 5; }
  .front-wheel-preview { grid-column: 2; grid-row: 4; display: flex; align-items: center; gap: 6px; max-width: none; }
  .front-wheel-preview svg { width: 42px; height: 35px; margin: 0; }
  .front-wheel-preview > span, .front-wheel-preview small { font-size: 9px; }
  .steering-range { grid-column: 1 / -1; margin-top: 6px; }
  .steering-scale, .steering-steps, .steering-note, .drive-gears, .drive-clutch, .drive-pedals, .drive-ignition, .drive-line-pause { grid-column: 1 / -1; }
  .steering-steps { margin-top: 9px; }
  .steering-steps button { min-height: 44px; font-size: 12px; }
  .steering-note { margin: 8px 0; font-size: 10px; }
  .drive-gears { padding-top: 11px; justify-content: space-between; }
  .drive-gears > div { flex: 1; }
  .drive-gears > div button { flex: 1; }
  .drive-gears #sim-handbrake { margin-left: 5px; }
  .drive-pedals { margin-top: 9px; }
  .drive-pedals button { min-height: 68px; }
  .drive-line-pause { margin: 12px 0 0; }
  .drive-mirrors { order: 5; width: 100%; margin-top: 17px; }
  .drive-mirrors canvas { height: 104px; border-width: 4px; }
  .drive-mirrors summary { font-size: 11px; }
  .drive-mirrors summary span { font-size: 9px; }
  .drive-bottom { flex-direction: column; gap: 4px; padding-top: 11px; }
  .drive-bottom summary { font-size: 11px; }
  .drive-bottom summary span { font-size: 10px; }
  .drive-model-note { font-size: 10px; }
}
@media (max-height: 520px) and (min-width: 680px) {
  .drive-viewport { min-height: 270px; height: 65vh; }
  .drive-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; }
  .drive-world { display: block; }
  .drive-console { display: block; }
  .steering-visual { max-height: 125px; }
  .steering-wheel { width: 120px; }
  .steering-readout { margin-top: 9px; }
  .drive-gears > div button { min-width: 33px; }
}