/* Garage Legacy UI, in the spirit of Car Mechanic Simulator: the 3D workshop fills the screen and the interface
   stays at the edges. Smoked-glass panels (near-black, translucent), crisp 4–6 px corners, white type, uppercase
   condensed labels, one amber signal colour and condition colours (green / yellow / orange / red). Menus live in a
   tablet; tapping a part opens a radial menu at the tap point. */
:root {
  --bg: #0b0c0e;
  --glass: rgba(12, 13, 15, 0.82);
  --glass-2: rgba(22, 24, 27, 0.92);
  --surface: rgba(255, 255, 255, 0.04);
  --surface-2: rgba(255, 255, 255, 0.07);
  --raise: rgba(255, 255, 255, 0.11);
  --panel: #0f1013;
  --panel-2: #0f1013;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.16);
  --text: #ececec;
  --muted: #9a9ea6;
  --faint: #676b73;
  --acc: #f6a821;
  --acc-2: #e08f0b;
  --acc-ink: #1a1102;
  --acc-soft: rgba(246, 168, 33, 0.12);
  --blue: #5cb8ff;
  --good: #58c46b;
  --fair: #e3cf3e;
  --worn: #f0922c;
  --bad: #e5484d;
  --pad: #6b4a3a;
  --r: 4px;
  --r-lg: 6px;
  --font: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  --cond: 'Barlow Condensed', 'Barlow', sans-serif;
  --game: 'Barlow Condensed', 'Barlow', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  font-family: var(--font);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body, #app { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); }
body { -webkit-user-select: none; user-select: none; font-size: 15px; -webkit-font-smoothing: antialiased; }
canvas { display: block; touch-action: none; cursor: grab; }
button { font-family: inherit; }
input, textarea { font-family: inherit; }
h2, h3, h4 { font-family: var(--cond); font-weight: 700; letter-spacing: 0.02em; margin: 0.4em 0; line-height: 1.15; }
h4 { font-size: 12.5px; text-transform: uppercase; color: var(--muted); letter-spacing: 0.12em; font-weight: 600; }
p { line-height: 1.5; margin: 0.4em 0; }
a { color: var(--blue); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.grow { flex: 1; }
.row { display: flex; align-items: center; gap: 8px; }
.row.wrap { flex-wrap: wrap; }
.row.end { justify-content: flex-end; margin-top: 14px; }
.warn { color: var(--worn); }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
kbd { font: 600 10px/1 var(--mono); padding: 3px 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); color: var(--muted); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.4); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* boot */
.boot { position: fixed; inset: 0; display: grid; place-content: center; text-align: center; gap: 10px; z-index: 50; background: var(--bg); }
.boot b { font: 700 38px var(--cond); letter-spacing: 0.22em; color: var(--text); }
.boot small { color: var(--muted); max-width: 520px; padding: 0 16px; line-height: 1.5; }

.ui-layer { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
.ui-layer > * { pointer-events: auto; }

/* buttons: flat, crisp, uppercase */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--surface-2); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r); padding: 8px 14px; font: 600 14px/1.15 var(--cond); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; }
.btn .ico { width: 17px; height: 17px; }
.btn:hover { background: var(--raise); border-color: rgba(255, 255, 255, 0.3); }
.btn:active { background: rgba(255, 255, 255, 0.15); }
.btn.primary { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.btn.primary:hover { background: #ffb63f; border-color: #ffb63f; }
.btn.success { background: var(--good); border-color: var(--good); color: #07160a; }
.btn.success:hover { background: #6bd27d; }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.blue { background: var(--blue); border-color: var(--blue); color: #04131f; }
.btn.danger-ghost { background: transparent; border-color: rgba(229, 72, 77, 0.55); color: #f08a8d; }
.btn.warn-ghost { background: transparent; border-color: rgba(240, 146, 44, 0.55); color: #f5b06a; }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.on { border-color: var(--acc); color: var(--acc); background: var(--acc-soft); }
.btn.small { padding: 6px 11px; font-size: 13px; }
.btn.tiny { padding: 3px 8px; font-size: 11.5px; }
.btn.big { padding: 12px 22px; font-size: 16px; letter-spacing: 0.08em; }
.btn.icon { padding: 6px; border-color: transparent; background: transparent; }
.btn.icon:hover { background: var(--surface-2); }
.btn.icon .ico { width: 18px; height: 18px; }
.btn.disabled { opacity: 0.35; pointer-events: none; }
.btn.right { background: rgba(88, 196, 107, 0.18); border-color: var(--good); }
.btn.wrong { background: rgba(229, 72, 77, 0.18); border-color: var(--bad); }
.btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.btn.wide { width: 100%; }
/* camera views */
.btn.seg { background: transparent; border-color: transparent; padding: 5px 9px; font-size: 12.5px; color: var(--muted); }
.btn.seg:hover { color: var(--text); background: var(--surface-2); }

.chip { display: inline-flex; align-items: center; font: 600 11.5px/1 var(--cond); letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 7px 3px; border-radius: 3px; border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap; }
.chip.req { color: var(--acc); border-color: rgba(246, 168, 33, 0.5); }
.chip.good { color: var(--good); border-color: rgba(88, 196, 107, 0.5); }
.chip.warn { color: var(--worn); border-color: rgba(240, 146, 44, 0.5); }
.chip.bad { color: var(--bad); border-color: rgba(229, 72, 77, 0.5); }
.chip.sys { font-size: 10.5px; }
.chip.required { color: #fff; background: var(--bad); border-color: var(--bad); }
.chip.recommended { color: var(--acc-ink); background: var(--worn); border-color: var(--worn); }
.chip.observed { color: #04131f; background: var(--blue); border-color: var(--blue); }
.chip.vip { color: var(--acc-ink); background: var(--acc); border-color: var(--acc); }

/* condition bar: thin segmented gauge with the figure beside it */
.cbar { position: relative; height: 14px; min-width: 120px; flex: 1; background: rgba(255, 255, 255, 0.07); border-radius: 2px; overflow: hidden; }
.cbar::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(0, 0, 0, 0.45) calc(10% - 1px) 10%); pointer-events: none; }
.cbar i { position: absolute; inset: 0 auto 0 0; }
.cbar span { position: relative; z-index: 1; font: 600 10.5px/14px var(--mono); padding-left: 6px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); }
.cbar.good i { background: var(--good); }
.cbar.fair i { background: var(--fair); }
.cbar.worn i { background: var(--worn); }
.cbar.bad i { background: var(--bad); }
.cbar.unk i { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.08) 0 6px, transparent 6px 12px); }

/* top left: cash, day, reputation */
.topbar { position: absolute; top: 14px; left: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-top: env(safe-area-inset-top); pointer-events: none; }
.topbar > * { pointer-events: auto; }
.hud-money { display: flex; align-items: center; gap: 8px; background: none; border: none; padding: 0; color: var(--text); cursor: pointer; }
.hud-money .ico { width: 22px; height: 22px; color: var(--acc); }
.hud-money .v { font: 700 26px/1 var(--cond); letter-spacing: 0.02em; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
.hud-line { display: flex; align-items: baseline; gap: 10px; font: 600 14px var(--cond); letter-spacing: 0.06em; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
.hud-line small { color: var(--muted); margin-right: 4px; }
.hud-line .clock { color: var(--text); font-family: var(--mono); font-size: 13px; }
.hud-line .clock.late { color: var(--worn); }
.hud-rep { display: flex; align-items: center; gap: 8px; margin-top: 2px; background: none; border: none; padding: 0; color: var(--text); cursor: pointer; }
.hud-rep .lvl { display: flex; align-items: baseline; gap: 3px; font: 700 13px var(--cond); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
.hud-rep .lvl small { color: var(--acc); font-size: 11px; letter-spacing: 0.08em; }
.repbar { display: block; width: 120px; height: 4px; background: rgba(255, 255, 255, 0.15); border-radius: 2px; overflow: hidden; }
.repbar i { display: block; height: 100%; background: var(--acc); }

/* bottom left: the tablet button */
.dock { position: absolute; left: 16px; bottom: 16px; padding-bottom: env(safe-area-inset-bottom); }
.tablet-btn { position: relative; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px 0 12px; background: var(--glass); border: 1px solid var(--line-2); border-radius: var(--r-lg); color: var(--text); cursor: pointer; font: 600 15px var(--cond); letter-spacing: 0.1em; text-transform: uppercase; backdrop-filter: blur(8px); transition: border-color 0.12s, background 0.12s; }
.tablet-btn .ico { width: 22px; height: 22px; color: var(--acc); }
.tablet-btn:hover { border-color: var(--acc); background: rgba(20, 21, 24, 0.9); }
.tablet-btn[data-badge]:not([data-badge=''])::after, .tbadge { content: attr(data-badge); position: absolute; top: -7px; right: -7px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--acc); color: var(--acc-ink); font: 700 11px/19px var(--mono); text-align: center; }

/* the tablet: an app home screen */
.modal.tablet { width: min(760px, 100%); border-radius: 22px; border: 10px solid #1c1d20; box-shadow: 0 0 0 1px #2c2d31, 0 30px 80px rgba(0, 0, 0, 0.7); background: linear-gradient(160deg, #191b1f, #0f1012); }
.modal.tablet .modal-head { border-bottom: none; padding: 14px 16px 6px 24px; }
.modal.tablet .modal-head h2 { font-size: 15px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 12px; padding: 12px 4px 18px; }
.app { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; background: none; border: none; color: var(--text); cursor: pointer; font: 600 14px var(--cond); letter-spacing: 0.05em; }
.app .ai { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(180deg, #2a2c31, #1d1f23); border: 1px solid rgba(255, 255, 255, 0.09); color: var(--acc); transition: transform 0.1s, border-color 0.12s; }
.app .ai .ico { width: 30px; height: 30px; stroke-width: 1.6; }
.app:hover .ai { border-color: var(--acc); transform: translateY(-2px); }
.app .tbadge { top: -6px; right: calc(50% - 42px); }

/* top right: task tracker */
.goals { position: absolute; right: 16px; top: 14px; width: 320px; display: flex; flex-direction: column; gap: 2px; padding-top: env(safe-area-inset-top); }
.gh { font: 600 11.5px var(--cond); letter-spacing: 0.2em; text-transform: uppercase; color: var(--acc); margin: 0 0 4px 2px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9); }
.goal { display: flex; align-items: baseline; gap: 10px; text-align: left; background: var(--glass); border: none; border-left: 2px solid transparent; border-radius: 0 var(--r) var(--r) 0; padding: 8px 12px; color: var(--muted); font-size: 13.5px; line-height: 1.35; cursor: pointer; backdrop-filter: blur(8px); transition: background 0.12s; }
.goal.main { color: var(--text); border-left-color: var(--acc); font-weight: 600; font-size: 14px; }
.goal:hover { background: rgba(26, 27, 31, 0.92); }
.goal .tag { flex: none; min-width: 46px; font: 600 10.5px var(--cond); letter-spacing: 0.12em; color: var(--faint); text-transform: uppercase; }
.goal.main .tag { color: var(--acc); }
body.panel-open .goals { display: none; }

/* tool belt */
.toolbelt:empty { display: none; }
.toolbelt { position: absolute; left: 16px; bottom: 74px; display: flex; flex-direction: column; gap: 6px; background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 9px; max-width: 340px; backdrop-filter: blur(8px); }
.tgroup { display: flex; flex-wrap: nowrap; align-items: center; gap: 3px; }
.tgroup small { width: 62px; font: 600 10.5px var(--cond); color: var(--faint); letter-spacing: 0.1em; }
.tsize { width: 33px; height: 28px; border-radius: 3px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--muted); font: 600 12px var(--mono); cursor: pointer; }
.tsize:hover { color: var(--text); }
.tsize.on { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); }

/* bottom: the car strip */
.vbar { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 9px 12px; display: flex; flex-direction: column; gap: 7px; max-width: min(900px, calc(100vw - 420px)); backdrop-filter: blur(8px); }
.vtitle { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.vtitle b { font: 700 17px var(--cond); letter-spacing: 0.04em; text-transform: uppercase; }
.vtitle small { color: var(--muted); }
.vrow { display: flex; flex-wrap: wrap; gap: 5px; }
.vrow.views { gap: 1px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }

/* radial menu on a part */
.radial-wrap { position: fixed; inset: 0; z-index: 25; }
.radial { position: absolute; width: 0; height: 0; }
.radial::before { content: ''; position: absolute; left: -100px; top: -100px; width: 200px; height: 200px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.12); background: radial-gradient(circle, rgba(10, 11, 13, 0.55) 0 40%, rgba(10, 11, 13, 0.15) 70%, transparent 71%); animation: rin 0.18s ease-out; }
@keyframes rin { from { transform: scale(0.6); opacity: 0; } }
.rcenter { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); width: 104px; text-align: center; pointer-events: none; }
.rcenter b { display: block; font: 700 13.5px/1.15 var(--cond); letter-spacing: 0.04em; text-transform: uppercase; text-shadow: 0 1px 3px #000; }
.rcenter small { display: block; margin-top: 3px; font: 500 11px var(--mono); color: var(--muted); text-shadow: 0 1px 3px #000; }
.ropt { position: absolute; width: 0; height: 0; padding: 0; border: none; background: none; cursor: pointer; color: var(--text); animation: rin 0.2s ease-out both; }
.ropt .rico { position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--glass-2); border: 1px solid var(--line-2); transition: background 0.1s, border-color 0.1s, transform 0.1s; }
.ropt .rico .ico { width: 22px; height: 22px; }
.ropt .rl { position: absolute; left: 50%; top: 27px; transform: translateX(-50%); white-space: nowrap; font: 600 11.5px var(--cond); letter-spacing: 0.08em; text-transform: uppercase; text-shadow: 0 1px 3px #000, 0 0 8px #000; }
.ropt:hover .rico { border-color: var(--acc); transform: scale(1.08); }
.ropt.primary .rico { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
.ropt.disabled { opacity: 0.35; cursor: default; }

/* side panel */
.side-panel { position: absolute; top: 14px; right: 16px; bottom: 16px; width: 390px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; transform: translateX(calc(100% + 24px)); transition: transform 0.22s ease; z-index: 3; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); }
.side-panel.open { transform: none; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 10px 10px 16px; border-bottom: 1px solid var(--line); }
.panel-head h3 { font-size: 20px; margin: 0; letter-spacing: 0.04em; text-transform: uppercase; }
.panel-body { overflow-y: auto; padding: 12px 16px 18px; flex: 1; -webkit-user-select: text; user-select: text; }
.section { margin-top: 16px; }
.actions { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.actions > .row { gap: 6px; }
.cond .condrow { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.cond .condrow small { color: var(--muted); width: 70px; }
.warnline { color: var(--worn); font-size: 13px; margin-top: 6px; }
.reasons { margin: 4px 0; padding-left: 18px; font-size: 13.5px; }
.reasons li { margin: 3px 0; color: #f2c49c; }
.reasons li.safety { color: #f19a9c; }
.tipbox { margin-top: 12px; background: rgba(92, 184, 255, 0.08); border-left: 2px solid var(--blue); border-radius: 0 var(--r) var(--r) 0; padding: 9px 12px; font-size: 13.5px; line-height: 1.5; }
.warnbox { margin-top: 12px; background: rgba(229, 72, 77, 0.08); border-left: 2px solid var(--bad); border-radius: 0 var(--r) var(--r) 0; padding: 9px 12px; font-size: 13.5px; line-height: 1.5; }
.warnbox > b:first-child { display: block; font: 600 11px var(--cond); letter-spacing: 0.12em; text-transform: uppercase; color: var(--bad); margin-bottom: 2px; }
.warnbox ul { margin: 6px 0 0; padding-left: 18px; }
.tray { display: flex; flex-direction: column; gap: 5px; }
.trayitem { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.trayitem > span { flex: 1.3; }

/* procedure */
.steps { padding-left: 22px; margin: 6px 0; }
.steps li { margin: 5px 0; color: var(--muted); font-size: 14px; }
.steps li.done { color: var(--good); text-decoration: line-through; text-decoration-color: rgba(88, 196, 107, 0.5); }
.steps li.cur { color: var(--text); font-weight: 600; }
.steps li.cur::marker { color: var(--acc); }
.steps .tool { display: block; font: 500 12px var(--mono); color: var(--blue); }
.stepbox { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--acc); border-radius: var(--r); padding: 10px; }
.torque input[type='range'] { flex: 1; accent-color: var(--acc); }
.torque .nm { font: 700 20px var(--cond); color: var(--acc); width: 80px; text-align: right; }
.torque .spec { font: 600 13px var(--mono); color: var(--blue); min-height: 16px; }
.torque .btn.choice { display: flex; width: 100%; justify-content: flex-start; margin: 4px 0; text-transform: none; letter-spacing: 0; }

/* modal */
.modal-wrap { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); display: grid; place-items: center; z-index: 20; padding: 16px; animation: fade 0.15s; }
.modal { width: min(560px, 100%); max-height: calc(100vh - 32px); background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r-lg); display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); animation: pop 0.16s ease; }
.modal.wide { width: min(980px, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 12px 12px 22px; border-bottom: 1px solid var(--line); }
.modal-head h2 { font-size: 22px; margin: 0; letter-spacing: 0.06em; text-transform: uppercase; }
.modal-body { padding: 16px 22px 22px; overflow-y: auto; -webkit-user-select: text; user-select: text; }
.noanim, .noanim .modal { animation: none !important; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: translateY(8px); opacity: 0; } }
.story { font-size: 17px; line-height: 1.65; color: #dcdcdc; }
.story-modal .modal { width: min(620px, 100%); }
blockquote { margin: 12px 0; padding: 4px 0 4px 16px; border-left: 2px solid var(--acc); font-style: italic; font-size: 16px; color: #dcdcdc; }
.milestone .modal { border-color: var(--acc); }
.milestone h2 { color: var(--acc); }

/* cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin: 8px 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; display: flex; flex-direction: column; gap: 6px; color: var(--text); text-align: left; }
.card.on { border-color: var(--acc); }
.card.slim { flex-direction: row; align-items: center; padding: 8px 12px; gap: 10px; margin: 5px 0; }
.card.job h4 { color: var(--text); text-transform: none; letter-spacing: 0.02em; font-size: 18px; font-weight: 700; }
.card.job.vip { border-color: var(--acc); }
.card.tool.own { opacity: 0.7; }
.card.level.cur { border-color: var(--good); }
.card.level.past { opacity: 0.55; }
.card.mode { cursor: pointer; font-family: inherit; align-items: flex-start; padding: 18px; transition: border-color 0.15s, background 0.15s; }
.card.mode:hover { border-color: var(--acc); background: var(--surface-2); }
.card.mode .micon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r); border: 1px solid rgba(246, 168, 33, 0.4); color: var(--acc); margin-bottom: 4px; }
.card.mode .micon .ico { width: 22px; height: 22px; }
.card.mode h3 { font-size: 24px; margin: 0; letter-spacing: 0.05em; text-transform: uppercase; }
.card.mode p { color: var(--muted); }
.choice { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; margin: 6px 0; color: var(--text); cursor: pointer; }
.choice:hover { border-color: var(--acc); }
.choice small { color: var(--muted); grid-column: 1 / -1; }
.choice .cbar { grid-column: 1 / -1; }

.customer { display: flex; gap: 12px; align-items: flex-start; }
.customer.compact { align-items: center; }
.portrait { width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 700 16px var(--cond); color: #1b1b1b; border: 2px solid rgba(255, 255, 255, 0.25); }
.quote { font-style: italic; color: #d9d4c8; }
.quote.small { font-size: 13.5px; }
.causes { margin: 4px 0; padding-left: 18px; font-size: 14px; columns: 2; }
.finding { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.finding > span:first-child { flex: 1 1 100%; }
.btn.tiny.on { border-color: var(--acc); color: var(--acc); }
.rline { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.rline .p { font: 600 13px var(--mono); }
.rline .ap { font-size: 16px; width: 22px; text-align: center; }
.rtotal { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; font-size: 13px; color: var(--muted); }
.rtotal b { font: 700 18px var(--mono); color: var(--text); }
.reply { margin-top: 12px; padding: 10px 12px; background: rgba(140, 204, 122, 0.07); border: 1px solid rgba(140, 204, 122, 0.25); border-radius: var(--r-lg); font-size: 14px; }
.test { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); }
.test.blocked b { color: var(--muted); }
.result { background: #141311; border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 10px 12px; font: 500 13px/1.5 var(--mono); }
.result h4 { margin: 0 0 6px; color: var(--acc); }
.l-read { color: #d6f0ff; }
.l-say { color: var(--text); font-family: var(--font); font-size: 14px; }
.l-means { color: var(--good); font-family: var(--font); font-size: 14px; }
.l-learn { color: var(--blue); font-family: var(--font); font-size: 13.5px; }
.tlog { padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
details summary { cursor: pointer; color: var(--muted); font-weight: 600; }

/* result / invoice */
.result-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 10px; }
.bigstat { background: rgba(236, 230, 218, 0.04); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px 12px; display: flex; flex-direction: column; }
.bigstat small { color: var(--muted); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
.bigstat b { font: 700 24px var(--mono); }
.bigstat.pos b { color: var(--good); }
.bigstat.neg b { color: var(--bad); }
.invoice > div { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.invoice > div span:last-child { font-family: var(--mono); }
.invoice .sub { color: var(--muted); }
ul.good, ul.bad, ul.notes, .obslist { list-style: none; padding: 0; margin: 8px 0; }
ul.good li { color: var(--good); margin: 3px 0; }
ul.bad li { color: #f29a8e; margin: 3px 0; }
ul.notes li { color: var(--worn); margin: 3px 0; }
.obslist li { padding: 5px 0 5px 10px; border-left: 3px solid var(--line-2); margin: 4px 0; }
.obslist li.bad { border-color: var(--bad); }
.obslist li.warn { border-color: var(--worn); }
.obslist li.ok { border-color: var(--good); }

/* tabs & shop */
.tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 14px; flex-wrap: wrap; background: rgba(0, 0, 0, 0.3); border-radius: 999px; width: fit-content; max-width: 100%; }
.btn.tab { background: transparent; box-shadow: none; margin: 0; border-radius: 999px; color: var(--muted); padding: 7px 14px; font-size: 14px; }
.btn.tab:hover { color: var(--text); filter: none; }
.btn.tab.on { background: linear-gradient(180deg, #ffcb45, #ffa61a); color: var(--acc-ink); box-shadow: 0 2px 0 #c66a00; }
.cash { float: right; margin-top: -44px; font: 700 15px var(--mono); color: var(--good); }
.split { display: grid; grid-template-columns: 240px 1fr; gap: 14px; }
.plist { display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow-y: auto; padding-right: 4px; }
.plist small.sys, .mlist small.sys, .checklist small.sys { font: 700 10px var(--mono); letter-spacing: 0.12em; color: var(--muted); margin: 10px 0 3px; display: block; }
.pitem, .mitem { text-align: left; background: transparent; border: 1px solid transparent; color: var(--text); padding: 6px 8px; border-radius: var(--r); cursor: pointer; font-size: 14px; }
.pitem:hover, .mitem:hover { background: rgba(255, 255, 255, 0.05); }
.pitem.on, .mitem.on { border-color: var(--acc); background: rgba(240, 162, 59, 0.08); }
.pitem.want { color: var(--acc); }
.pitem .dot { color: var(--acc); margin-left: 4px; font-size: 10px; }
.mitem .read { color: var(--good); margin-left: 6px; font-size: 12px; }
.offer { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.offer.blocked { opacity: 0.45; }
.offer .price { display: flex; flex-direction: column; align-items: flex-end; }
.offer .price b { font: 700 16px var(--mono); }
.offer .price small { color: var(--muted); font-size: 11px; }

/* planner */
.phead { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.phead h3 { font-size: 24px; margin: 0; }
.conds { display: flex; flex-direction: column; gap: 6px; }
.crow { display: grid; grid-template-columns: 100px 1fr 150px; gap: 10px; align-items: center; font-weight: 600; }
.crow small { font-size: 11px; }
.stages { padding-left: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.stages li { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 8px 10px; font-size: 13.5px; }
.stages li.done { border-color: rgba(140, 204, 122, 0.5); background: rgba(140, 204, 122, 0.07); }
.stages li.cur { border-color: var(--acc); background: rgba(240, 162, 59, 0.07); }
.stages li.optional { opacity: 0.55; }
.checklist { columns: 2; column-gap: 20px; }
.citem { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; font-size: 14px; break-inside: avoid; }
.citem .ic { width: 16px; text-align: center; font-weight: 700; }
.citem.done .ic { color: var(--good); }
.citem.todo .ic { color: var(--bad); }
.citem.unknown .ic { color: var(--blue); }
.citem.locked { opacity: 0.55; }
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ba figure { margin: 0; position: relative; }
.ba img { width: 100%; border-radius: var(--r-lg); display: block; border: 1px solid var(--line-2); }
.ba figcaption { position: absolute; left: 10px; top: 10px; font: 800 18px var(--cond); letter-spacing: 0.14em; background: rgba(0, 0, 0, 0.6); padding: 3px 10px; border-radius: 6px; }
.ba figure:last-child figcaption { color: var(--acc); }

/* manual */
.msplit { display: grid; grid-template-columns: 250px 1fr; gap: 16px; min-height: 60vh; }
.mnav { display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--line); padding-right: 10px; }
.msearch { background: #141311; border: 1px solid var(--line-2); color: var(--text); border-radius: var(--r); padding: 8px 10px; }
.mlist { display: flex; flex-direction: column; max-height: 62vh; overflow-y: auto; }
.pad { padding: 2px 8px; }
.mpage h2 { font-size: 28px; color: var(--acc); }
.mfield h5 { margin: 12px 0 2px; font: 700 11px var(--mono); letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; }
.mfield ul { margin: 4px 0; padding-left: 20px; line-height: 1.5; }
.mdiagram { margin: 12px 0; background: #141311; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px; }
.mdiagram figcaption { font: 600 12px var(--mono); color: var(--muted); margin-top: 6px; }
.diagram { width: 100%; height: auto; color: var(--text); font-family: var(--font); font-size: 14px; }
.diagram text { fill: var(--text); }
.diagram text.small { font-size: 12px; fill: var(--muted); }
.diagram text.acc { fill: var(--acc); }
.diagram text.warn { fill: var(--worn); }
.diagram .stroke { fill: none; stroke: var(--text); stroke-width: 2; }
.diagram .stroke.dim { stroke: var(--muted); }
.diagram .stroke.acc { stroke: var(--acc); }
.diagram .stroke.warn { stroke: var(--worn); }
.diagram .dash { stroke-dasharray: 5 5; stroke-width: 1.5; fill: none; stroke: var(--muted); }
.diagram .dash.acc { stroke: var(--acc); }
.diagram .belt { stroke: #666; stroke-width: 5; fill: none; }
.diagram .wire { stroke: var(--acc); stroke-width: 2.5; fill: none; }
.diagram .wire.dim { stroke: var(--muted); }
.diagram .fill-acc { fill: var(--acc); }
.diagram .fill-dim { fill: #555a60; }
.diagram .fill-pad { fill: var(--pad); }
.diagram .fill-pad.warn { fill: #a0482e; }
.diagram .fill-disc { fill: #7c7771; }
.diagram .fill-disc.worn { fill: #7b5238; }
.diagram .fill-oil { fill: #8a6a1c; }
.diagram .barfill { fill: var(--good); opacity: 0.8; }
.diagram .barfill.warn { fill: var(--worn); }
.specs { width: 100%; border-collapse: collapse; font-size: 14px; margin: 6px 0; }
.specs th { text-align: left; color: var(--muted); font-weight: 600; padding: 5px 10px 5px 0; width: 38%; }
.specs td { padding: 5px 0; border-bottom: 1px dashed var(--line); font-family: var(--mono); font-size: 13px; }
.quiz { margin-top: 16px; padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: var(--r-lg); }
.quiz .row { margin-top: 8px; }
.learnbar { margin-bottom: 8px; }
.floating-exit { position: absolute; left: 50%; top: 70px; transform: translateX(-50%); z-index: 6; }

/* career */
.skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.sdot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 8px; vertical-align: 1px; }
.skill { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px; }
.xpbar { height: 6px; background: rgba(255, 255, 255, 0.08); border-radius: 3px; margin: 6px 0; overflow: hidden; }
.xpbar i { display: block; height: 100%; }
.perks { list-style: none; padding: 0; margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.perks li.on { color: var(--text); }
.achs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.ach { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 8px 10px; opacity: 0.45; display: flex; flex-direction: column; }
.ach.on { opacity: 1; border-color: rgba(240, 162, 59, 0.5); }
.ach b { color: var(--text); }
.ach.on b { color: var(--acc); }
.toggle { display: flex; align-items: center; gap: 8px; margin: 6px 0; cursor: pointer; }
.toggle input { accent-color: var(--acc); width: 18px; height: 18px; }

/* toasts: small notifications under the task tracker */
.toasts { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; z-index: 30; width: min(520px, calc(100vw - 32px)); }
.toast { background: var(--glass-2); border: 1px solid var(--line); border-left: 3px solid var(--muted); border-radius: var(--r); padding: 8px 14px; font-size: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); animation: pop 0.2s; transition: opacity 0.5s, transform 0.5s; backdrop-filter: blur(8px); }
.toast.out { opacity: 0; transform: translateY(-6px); }
.toast.warn { border-left-color: var(--worn); }
.toast.ok, .toast.money { border-left-color: var(--good); }
.toast.level, .toast.achievement { border-left-color: var(--acc); color: var(--acc); font-weight: 600; }
.toast.learn { border-left-color: var(--blue); }

/* 3D overlays */
.marker-layer, .label-layer { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.fmarker { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border: 2px solid var(--acc); border-radius: 50%; background: rgba(246, 168, 33, 0.2); }
.fmarker.active { animation: pulse 0.9s infinite; background: var(--acc); }
@keyframes pulse { 50% { transform: scale(1.45); } }
.plabel { position: absolute; left: 0; top: 0; transform-origin: left center; font: 600 12px var(--cond); letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: rgba(10, 11, 13, 0.85); border-left: 2px solid var(--acc); border-radius: 2px; padding: 2px 7px; white-space: nowrap; margin: -11px 0 0 10px; }

/* title: a game main menu over the garage */
.title-screen { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 clamp(24px, 8vw, 120px); background: linear-gradient(90deg, rgba(5, 6, 8, 0.9) 0%, rgba(5, 6, 8, 0.65) 38%, rgba(5, 6, 8, 0) 75%); z-index: 15; }
.title-card { max-width: 440px; }
.logo { font-family: var(--cond); font-weight: 700; font-size: clamp(54px, 8.5vw, 104px); line-height: 0.88; letter-spacing: 0.06em; text-transform: uppercase; }
.logo span { display: block; color: #fff; }
.logo b { display: block; color: var(--acc); font-weight: 700; }
.title-card .tag { font-size: 16px; color: #cfcfcf; margin: 18px 0 34px; }
.title-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; width: 280px; }
.title-actions .btn { justify-content: flex-start; padding: 13px 18px; font-size: 17px; letter-spacing: 0.14em; border-color: transparent; background: transparent; border-left: 3px solid transparent; border-radius: 0; }
.title-actions .btn:hover { background: linear-gradient(90deg, rgba(246, 168, 33, 0.16), transparent); border-left-color: var(--acc); }
.title-actions .btn.primary { background: linear-gradient(90deg, rgba(246, 168, 33, 0.22), transparent); border-left-color: var(--acc); color: #fff; }
.title-actions .btn.primary .ico { color: var(--acc); }
.title-actions .btn.ghost { color: var(--muted); }
.title-foot { position: absolute; left: clamp(24px, 8vw, 120px); bottom: 22px; margin: 0; font: 500 11.5px var(--mono); color: var(--faint); }
body.in-title .topbar, body.in-title .dock, body.in-title .goals, body.in-title .vbar, body.in-title .toolbelt { display: none; }
body.driving .topbar, body.driving .dock, body.driving .goals, body.driving .vbar, body.driving .toolbelt, body.driving .side-panel, body.driving .marker-layer, body.driving .label-layer { display: none; }

/* drive HUD */
#drive-hud { position: fixed; inset: 0; pointer-events: none; z-index: 12; font-family: var(--font); }
#drive-hud > * { pointer-events: auto; }
.dh-top { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.dh-goal { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 8px 12px; font-size: 14px; max-width: 520px; }
#drive-hud .feed { position: absolute; top: 70px; left: 12px; width: min(420px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.obs { background: var(--panel); border-left: 3px solid var(--muted); border-radius: 0 var(--r) var(--r) 0; padding: 7px 10px; font-size: 14px; transition: opacity 1s; }
.obs.bad { border-color: var(--bad); }
.obs.warn { border-color: var(--worn); }
.obs.ok { border-color: var(--good); }
.obs.old { opacity: 0.55; }
.dh-checks { position: absolute; top: 70px; right: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 8px 12px; font: 600 13px var(--mono); display: flex; flex-direction: column; gap: 4px; }
.dh-checks .ok { color: var(--good); }
.dash { position: absolute; right: 16px; bottom: 16px; display: flex; align-items: flex-end; gap: 14px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 12px 16px; }
.speedo { display: flex; flex-direction: column; align-items: center; }
.speedo b { font: 700 46px/1 var(--mono); }
.speedo small { color: var(--muted); }
.tacho { width: 160px; height: 14px; background: rgba(255, 255, 255, 0.08); border-radius: var(--r); position: relative; margin-bottom: 6px; }
.tacho .bar { height: 100%; border-radius: var(--r); background: var(--good); width: 10%; }
.tacho .bar.red { background: var(--bad); }
.tacho .gear { position: absolute; right: 0; top: -30px; font: 700 20px var(--mono); color: var(--acc); }
.lights { display: flex; flex-direction: column; gap: 5px; }
.lights span { display: block; color: var(--faint); opacity: 0.5; line-height: 0; }
.lights span.on { color: #ff4a3a; opacity: 1; }
.dh-help { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font-size: 12px; color: var(--muted); background: rgba(12, 14, 17, 0.7); padding: 4px 10px; border-radius: 6px; }
.touch { display: none; position: absolute; left: 12px; right: 12px; bottom: 110px; gap: 10px; }
.touch button { width: 76px; height: 76px; border-radius: 50%; border: 2px solid var(--line-2); background: rgba(20, 23, 27, 0.7); color: var(--text); font-size: 22px; font-weight: 700; touch-action: none; }
.touch .sp { flex: 1; }
.touch .tg { background: rgba(140, 204, 122, 0.3); font-size: 15px; }
.touch .tb { background: rgba(236, 106, 90, 0.3); font-size: 14px; }
@media (pointer: coarse) {
  .touch { display: flex; }
  .dh-help { display: none; }
}

/* responsive */
@media (max-width: 1100px) {
  .goals { width: 270px; }
  .vbar { max-width: none; left: 200px; right: 16px; transform: none; }
}
@media (max-width: 760px) and (orientation: portrait) {
  body { font-size: 14px; }
  .topbar { top: 10px; left: 12px; }
  .hud-money .v { font-size: 22px; }
  .repbar { width: 90px; }
  .goals { top: 10px; right: 10px; width: 52vw; }
  .goal.minor { display: none; }
  .goal { padding: 7px 10px; font-size: 12.5px; }
  .gh { display: none; }
  .dock { left: 12px; bottom: 12px; }
  .tablet-btn { height: 52px; padding: 0 14px; }
  .tablet-btn kbd { display: none; }
  .vbar { left: 12px; right: 12px; bottom: 74px; padding: 8px 10px; }
  .vtitle small { display: none; }
  .vrow { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .vrow::-webkit-scrollbar { display: none; }
  .vrow .btn { flex: none; }
  .toolbelt { left: 12px; right: 12px; bottom: 190px; max-width: none; flex-direction: row; overflow-x: auto; padding: 6px; }
  .side-panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: 64vh; border-radius: 12px 12px 0 0; transform: translateY(105%); z-index: 12; }
  .side-panel.open { transform: none; }
  .modal-wrap { padding: 0; align-items: end; }
  .modal, .modal.wide { width: 100%; max-height: 90vh; border-radius: 12px 12px 0 0; }
  .modal.tablet { border-width: 8px; border-radius: 22px 22px 0 0; border-bottom: none; }
  .apps { grid-template-columns: repeat(3, 1fr); gap: 18px 8px; }
  .app .ai { width: 62px; height: 62px; }
  .streak { grid-template-columns: repeat(4, 1fr); }
  .split, .msplit { grid-template-columns: 1fr; }
  .plist, .mlist { max-height: 180px; }
  .mnav { border-right: none; border-bottom: 1px solid var(--line); padding: 0 0 8px; }
  .checklist, .causes { columns: 1; }
  .crow { grid-template-columns: 80px 1fr; }
  .crow small { display: none; }
  .ba { grid-template-columns: 1fr; }
  .cash { float: none; margin: 0 0 8px; }
  .offer { grid-template-columns: 1fr auto; }
  .offer > .row { grid-column: 1 / -1; }
  .dash { right: 8px; bottom: 8px; padding: 8px 10px; }
  .speedo b { font-size: 34px; }
  .tacho { width: 100px; }
  .dh-checks { top: auto; bottom: 200px; right: 8px; font-size: 11px; }
  .title-screen { align-items: flex-end; padding-bottom: 70px; background: linear-gradient(0deg, rgba(5, 6, 8, 0.95) 0%, rgba(5, 6, 8, 0.7) 55%, rgba(5, 6, 8, 0.1) 100%); }
  .title-actions { width: 100%; }
}
.tgauge { position: relative; width: 12px; height: 64px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
.tgauge i { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(0deg, #4fa8ff, #7fd67a 50%, var(--acc)); }
.tgauge.hot i { background: var(--bad); }
.tgauge small { position: relative; font: 700 8px var(--mono); text-align: center; color: #fff; }
.card.job.locked { opacity: 0.7; }
.lockline { margin-top: 6px; padding: 7px 10px; border-radius: var(--r); background: rgba(240, 162, 59, 0.08); color: var(--acc); font-size: 13px; font-weight: 600; }
.fusebox { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.fuse { display: flex; gap: 8px; align-items: center; text-align: left; padding: 8px 10px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); cursor: pointer; }
.fuse b { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 5px; background: #d9a21b; color: #1b1307; font: 700 13px var(--mono); flex: none; }
.fuse:hover { border-color: var(--acc); }
.fuse small { font-size: 12px; }

/* ---------------- Phase 5: finding cars ---------------- */
.listings { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.listing .lphoto { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r); background: var(--surface); }
.listing .price { color: var(--good); font-size: 17px; }
.listing .claims { margin: 0; padding-left: 18px; font-size: 13px; color: var(--muted); }
.listing ol.bids { margin: 4px 0 0; padding-left: 18px; font: 500 12px var(--mono); color: var(--muted); }
.obslist li.warn { border-color: var(--acc); }
body.at-site .dock, body.at-site .goals, body.at-site .vbar { display: none !important; }
.sitebar { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; max-width: min(820px, calc(100vw - 360px)); }
.sitebar .vtitle { display: flex; align-items: center; gap: 8px; }
.sitebar .vrow { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.sitebar p.quote { margin: 0; }
@media (max-width: 760px) { .sitebar { max-width: calc(100vw - 20px); } }

/* ---------------- Phase 6: body & interior ---------------- */
.panels { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.prow { display: grid; grid-template-columns: minmax(130px, 1fr) 40px 110px 84px 64px 110px 160px 130px; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--r); background: rgba(255, 255, 255, 0.02); }
.prow .pl { color: var(--muted); font-size: 12px; text-align: right; }
.prow .cbar.small { min-width: 100px; }
.prow .btn { white-space: nowrap; }
.prow b .chip { margin-left: 6px; }
.chip.bad { color: var(--bad); border-color: rgba(236, 106, 90, 0.45); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.swatch { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; color: #fff; font-size: 16px; text-shadow: 0 1px 2px #000; }
.swatch.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--acc); }
@media (max-width: 760px) { .prow { grid-template-columns: 1fr auto; } .prow .pl { text-align: left; } }

/* ---------------- Phase 7: live data graph ---------------- */
.lgraph { margin: 6px 0; color: var(--blue); }
.lgraph svg { width: 100%; height: 64px; background: rgba(143, 195, 227, 0.06); border-radius: 6px; }

/* job steps: diagnose → repair → return */
.jobsteps { display: flex; gap: 4px; list-style: none; padding: 0; margin: 14px 0 6px; counter-reset: st; }
.jobsteps li { flex: 1; counter-increment: st; padding: 7px 0 0; border-top: 3px solid var(--line-2); font: 600 13px var(--cond); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.jobsteps li::before { content: counter(st) '  '; font-family: var(--mono); font-size: 11px; }
.jobsteps li.done { color: var(--good); border-color: var(--good); }
.jobsteps li.cur { color: var(--text); border-color: var(--acc); }

/* daily: streak calendar, tasks, VIP */
.streak { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 8px 0 14px; }
.sday { display: flex; flex-direction: column; gap: 5px; min-height: 72px; padding: 8px 7px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.sday small { font: 600 10.5px var(--cond); color: var(--faint); letter-spacing: 0.12em; text-transform: uppercase; }
.sday b { font-size: 12.5px; line-height: 1.25; color: var(--muted); }
.sday.got { opacity: 0.45; }
.sday.got small::after { content: ' ✓'; color: var(--good); }
.sday.now { border-color: var(--acc); background: var(--acc-soft); }
.sday.now small { color: var(--acc); }
.sday.now b { color: var(--text); }
.sday.big { border-style: dashed; }
.dtask { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.dtask b { font-size: 14px; font-weight: 600; }
.dtask.claimed { opacity: 0.45; }
.dbar { height: 4px; margin: 6px 0 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.dbar i { display: block; height: 100%; background: var(--acc); }
.dtask.done .dbar i { background: var(--good); }
.vipline { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; padding: 10px 12px; border-radius: 0 var(--r) var(--r) 0; background: var(--surface); border-left: 2px solid var(--acc); font-size: 14px; }
.vipline b { font: 600 13px var(--cond); letter-spacing: 0.1em; text-transform: uppercase; color: var(--acc); }

/* the rest, in the same language */
.portrait { border: 1px solid rgba(255, 255, 255, 0.25); font-family: var(--cond); }
.rline .p, .invoice > div span:last-child { font: 600 13.5px var(--mono); color: var(--text); }
.rtotal b { font: 700 20px var(--cond); color: var(--acc); }
.result { background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line); border-radius: var(--r); }
.bigstat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.bigstat small { font: 600 11px var(--cond); letter-spacing: 0.12em; }
.bigstat b { font: 700 28px/1.1 var(--cond); }
.pitem, .mitem { border-radius: var(--r); }
.pitem.on, .mitem.on { border-color: var(--acc); background: var(--acc-soft); }
.offer .price b { font: 700 17px var(--cond); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 12px; flex-wrap: wrap; padding: 0; background: none; border-radius: 0; width: auto; }
.btn.tab { border: none; border-radius: 0; background: transparent; color: var(--muted); padding: 8px 12px 9px; box-shadow: inset 0 -2px 0 transparent; }
.btn.tab:hover { background: transparent; color: var(--text); }
.btn.tab.on { background: transparent; color: var(--text); box-shadow: inset 0 -2px 0 var(--acc); }
.skill, .ach, .stages li, .prow { border-radius: var(--r); }
.skill b { font: 700 15px var(--cond); letter-spacing: 0.04em; text-transform: uppercase; }
.sdot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 8px; vertical-align: 1px; }
.xpbar { height: 4px; }
.lockline { border-radius: var(--r); }
.msearch { background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line-2); border-radius: var(--r); }
.dh-goal, .dh-checks, .dash, .sitebar { background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-lg); backdrop-filter: blur(8px); }
.speedo b { font: 700 46px/1 var(--cond); }
.obs { background: var(--glass); border-radius: 0 var(--r) var(--r) 0; }

@media (max-width: 760px) and (orientation: portrait) { .streak { grid-template-columns: repeat(4, 1fr); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------------- phones: landscape only ---------------- */
/* a phone held upright gets a "turn it sideways" screen; the game is laid out for landscape */
.rotate { display: none; }
@media (orientation: portrait) and (pointer: coarse) and (max-width: 900px) {
  .rotate { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 32px; text-align: center; background: var(--bg); color: var(--text); }
  .rotate .ico { width: 64px; height: 64px; color: var(--acc); stroke-width: 1.4; animation: turn 2.4s ease-in-out infinite; }
  .rotate b { font: 700 22px var(--cond); letter-spacing: 0.1em; text-transform: uppercase; }
  .rotate small { color: var(--muted); font-size: 14px; max-width: 280px; line-height: 1.5; }
}
@keyframes turn { 0%, 25% { transform: rotate(0); } 55%, 100% { transform: rotate(-90deg); } }

/* landscape phone: short screen, everything compact and at the edges */
@media (orientation: landscape) and (max-height: 520px) {
  body { font-size: 13px; }
  .topbar { top: 8px; left: calc(10px + env(safe-area-inset-left)); gap: 2px; padding-top: 0; }
  .hud-money .v { font-size: 20px; }
  .hud-money .ico { width: 18px; height: 18px; }
  .hud-line { font-size: 12.5px; }
  .repbar { width: 80px; }
  .goals { top: 8px; right: calc(10px + env(safe-area-inset-right)); width: min(300px, 36vw); padding-top: 0; }
  .gh, .goal.minor { display: none; }
  .goal { padding: 6px 10px; font-size: 12.5px; }
  .dock { left: calc(10px + env(safe-area-inset-left)); bottom: 10px; padding-bottom: 0; }
  .tablet-btn { height: 44px; padding: 0 12px; font-size: 13px; }
  .tablet-btn kbd { display: none; }
  .vbar { left: calc(140px + env(safe-area-inset-left)); right: calc(10px + env(safe-area-inset-right)); bottom: 8px; transform: none; max-width: none; padding: 6px 8px; gap: 5px; }
  .vtitle { display: none; }
  .vrow { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .vrow::-webkit-scrollbar { display: none; }
  .vrow .btn { flex: none; }
  .vrow.views { padding-bottom: 4px; }
  .btn.small { padding: 6px 10px; font-size: 12.5px; }
  .toolbelt { left: auto; right: calc(10px + env(safe-area-inset-right)); bottom: 96px; top: auto; flex-direction: row; max-width: 60vw; overflow-x: auto; padding: 6px; }
  /* side panel: a full-height column on the right */
  .side-panel { top: 6px; bottom: 6px; right: calc(6px + env(safe-area-inset-right)); left: auto; width: min(380px, 46vw); height: auto; border-radius: var(--r-lg); transform: translateX(calc(100% + 24px)); }
  .side-panel.open { transform: none; }
  .panel-head { padding: 8px 8px 7px 14px; }
  .panel-head h3 { font-size: 17px; }
  .panel-body { padding: 8px 14px 12px; }
  /* windows: nearly the whole screen, short header */
  .modal-wrap { padding: 6px; align-items: center; }
  .modal, .modal.wide { width: min(980px, calc(100vw - 12px)); max-height: calc(100vh - 12px); border-radius: var(--r-lg); }
  .modal-head { padding: 8px 8px 7px 16px; }
  .modal-head h2 { font-size: 18px; }
  .modal-body { padding: 10px 16px 14px; }
  .modal.tablet { width: min(720px, calc(100vw - 12px)); border-width: 7px; }
  .apps { grid-template-columns: repeat(6, 1fr); gap: 12px 6px; padding: 4px 0 8px; }
  .app { font-size: 12.5px; gap: 6px; }
  .app .ai { width: 54px; height: 54px; border-radius: 13px; }
  .app .ai .ico { width: 24px; height: 24px; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .streak { grid-template-columns: repeat(7, 1fr); }
  .sday { min-height: 56px; padding: 6px; }
  .result-head { grid-template-columns: repeat(3, 1fr); }
  .bigstat b { font-size: 22px; }
  /* title: menu on the left, garage on the right */
  .title-screen { align-items: center; padding: 0 calc(28px + env(safe-area-inset-left)); background: linear-gradient(90deg, rgba(5, 6, 8, 0.92) 0%, rgba(5, 6, 8, 0.6) 45%, rgba(5, 6, 8, 0) 80%); }
  .logo { font-size: 54px; }
  .title-card .tag { margin: 10px 0 18px; font-size: 14px; }
  .title-actions { width: 250px; }
  .title-actions .btn { padding: 10px 16px; font-size: 15px; }
  .title-foot { bottom: 10px; left: calc(28px + env(safe-area-inset-left)); }
  .radial { transform: scale(0.88); }
  .toasts { top: 8px; }
  /* drive HUD */
  .dash { right: 10px; bottom: 10px; padding: 8px 12px; }
  .speedo b { font-size: 34px; }
  .touch { bottom: 14px; left: calc(12px + env(safe-area-inset-left)); right: 190px; }
  .touch button { width: 64px; height: 64px; }
}