/* Permanent dark vaporwave palette. Decorative accents are not financial states. */
:root {
  color-scheme: dark;
  --void: #090014; --ink: #E0E0E0; --panel: rgb(26 16 60 / 80%);
  --magenta: #FF00FF; --cyan: #00FFFF; --orange: #FF9900;
  --neon-magenta: var(--magenta); --neon-cyan: var(--cyan); --neon-orange: var(--orange);
  --border: #2D1B4E; --muted: #b6acd0;
  --sunset: linear-gradient(to right, #FF9900, #FF00FF, #00FFFF);
  --display: 'Orbitron', sans-serif;
  --body: 'Share Tech Mono', monospace;
  --mono: 'Share Tech Mono', monospace;
  /* Semantic accounting colors: green = profit, red = loss, yellow = warning. */
  --profit: #7DFF79; --loss: #FF7078; --warning: #FFF36A;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; background: var(--void); color: var(--ink); font: 16px/1.6 var(--body); overflow-x: hidden; isolation: isolate; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, summary { cursor: pointer; }
button { border-radius: 0; }
[hidden] { display: none !important; }
::selection { background: var(--magenta); color: var(--void); }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 5px; box-shadow: 0 0 22px rgb(0 255 255 / 35%); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 20px; top: -100px; z-index: 100; padding: 12px 20px; background: var(--cyan); color: var(--void); }
.skip-link:focus { top: 15px; }
/* Fixed atmosphere remains behind all controls and text. */
.atmosphere { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.sun-orb { position: absolute; width: min(80vw, 1000px); aspect-ratio: 1; top: -35%; right: -12%; border-radius: 50%; background: linear-gradient(160deg, var(--orange), var(--magenta) 55%, #6920ff); filter: blur(90px); opacity: .23; }
.grid-floor { position: absolute; width: 200%; height: 110%; left: -50%; top: 40%; transform: perspective(500px) rotateX(60deg); transform-origin: center top; background-image: repeating-linear-gradient(90deg, transparent 0 79px, rgb(0 255 255 / 35%) 79px 81px), repeating-linear-gradient(0deg, transparent 0 79px, rgb(255 0 255 / 38%) 79px 81px); mask-image: linear-gradient(transparent, #000 28%, #000 70%, transparent); }
body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .24; background: repeating-linear-gradient(0deg, transparent 0 3px, rgb(0 0 0 / 28%) 3px 4px), repeating-linear-gradient(90deg, rgb(255 0 100 / 7%) 0 1px, rgb(0 255 255 / 5%) 1px 2px, transparent 2px 4px); }
#shop-particles { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.app-header, .workspace, .public-workspace { position: relative; z-index: 1; }
.app-header { display: flex; align-items: center; gap: 32px; padding: 22px max(28px, calc((100vw - 1400px) / 2)); background: rgb(9 0 20 / 92%); border-bottom: 1px solid var(--magenta); box-shadow: 0 2px 24px rgb(255 0 255 / 16%); }
.wordmark { font: 900 clamp(23px, 2.5vw, 34px)/1.2 var(--display); letter-spacing: -.05em; color: var(--cyan); text-shadow: 3px 2px 0 rgb(255 0 255 / 65%), 0 0 18px rgb(0 255 255 / 45%); }
.app-nav { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.app-nav nav { display: flex; gap: 12px; align-items: center; }
.app-nav form { margin: 0; }
.nav-link { display: flex; align-items: center; gap: 11px; padding: 10px 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .055em; border-bottom: 2px solid transparent; transition: color 160ms linear, border-color 160ms linear; }
.nav-link:hover, .nav-link.selected { color: var(--cyan); border-bottom-color: var(--magenta); background: rgb(255 0 255 / 7%); }
.nav-icon { width: 23px; height: 23px; border: 1px solid var(--magenta); display: inline-flex; align-items: center; justify-content: center; transform: rotate(45deg); color: var(--cyan); transition: transform 180ms linear, box-shadow 180ms linear; }
.nav-icon > span { transform: rotate(-45deg); }
.nav-link:hover .nav-icon { transform: rotate(135deg); box-shadow: 0 0 16px var(--magenta); }
.nav-link:hover .nav-icon > span { transform: rotate(-135deg); }
#menu-toggle { display: none; }
.workspace { max-width: 1460px; margin: auto; padding: 48px 32px max(32px, env(safe-area-inset-bottom)); }
.public-workspace { max-width: 1200px; margin: auto; padding: 45px 28px; }
h1, h2, h3, .record-title { font-family: var(--display); font-weight: 700; text-transform: uppercase; line-height: 1.25; overflow-wrap: anywhere; }
h1 { font-size: clamp(30px, 4vw, 60px); letter-spacing: -.045em; margin: 0; background: var(--sunset); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 12px rgb(255 0 255 / 28%)); }
h2, .record-title { font-size: clamp(18px, 2vw, 25px); margin: 0; color: var(--cyan); text-shadow: 0 0 16px rgb(0 255 255 / 25%); }
h3 { font-size: 19px; margin: 0; }
p { margin: 12px 0; }
.muted, .vehicle-spec, .field-help, .empty-inline { color: var(--muted); }
.money, .mono, .vin, .amount { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.money { white-space: nowrap; }
.profit { color: var(--profit); }
.loss { color: var(--loss); }
.warning, .field-help.warning { color: var(--warning); }
.vin { font-size: 13px; letter-spacing: .06em; overflow-wrap: anywhere; color: var(--muted); }
.eyebrow, .count { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.eyebrow { display: block; margin-bottom: 8px; }
.count { padding: 4px 9px; border: 1px solid var(--border); }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 35px; }
.page-heading .muted { max-width: 760px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 12px; min-height: 46px; padding: 11px 24px; border: 1px solid var(--magenta); background: rgb(255 0 255 / 12%); color: var(--ink); font-size: 14px; text-transform: uppercase; letter-spacing: .07em; transform: skewX(-12deg); box-shadow: 0 0 12px rgb(255 0 255 / 20%), inset 0 0 12px rgb(255 0 255 / 7%); transition: transform 160ms linear, background 160ms linear, color 160ms linear, box-shadow 160ms linear; }
.button > span { display: inline-block; transform: skewX(12deg); transition: transform 160ms linear; }
.button:hover { transform: skewX(0); background: var(--magenta); color: var(--void); box-shadow: 0 0 20px rgb(255 0 255 / 65%), 0 0 45px rgb(255 0 255 / 35%); }
.button:hover > span { transform: skewX(0); }
.button.secondary { border-color: var(--cyan); background: rgb(0 255 255 / 7%); box-shadow: 0 0 12px rgb(0 255 255 / 14%); }
.button.secondary:hover { background: var(--cyan); box-shadow: 0 0 20px rgb(0 255 255 / 65%), 0 0 45px rgb(0 255 255 / 30%); }
.button:disabled { opacity: .5; cursor: wait; }
.text-button { padding: 8px 4px; border: 0; background: transparent; color: var(--cyan); text-transform: uppercase; font-size: 13px; }
.text-link, .back-link { color: var(--cyan); text-decoration: underline; text-underline-offset: 5px; }
.back-link { display: inline-block; margin-bottom: 26px; font-size: 14px; }
.text-button:hover, .text-link:hover, .back-link:hover { color: var(--ink); text-shadow: 0 0 14px var(--cyan); }
/* Reusable terminal chrome: three lights in a dark title strip. */
.panel, .dashboard-totals, .vehicle-card, .sold-card { position: relative; background: var(--panel); backdrop-filter: blur(12px); border: 1px solid rgb(0 255 255 / 24%); border-top: 2px solid var(--cyan); box-shadow: 0 0 22px rgb(0 255 255 / 6%), 4px 4px 0 rgb(255 0 255 / 12%); padding-top: 61px; }
.panel::before, .dashboard-totals::before, .vehicle-card::before, .sold-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 31px; border-bottom: 1px solid var(--border); background: radial-gradient(circle at 17px 15px, var(--magenta) 0 3px, transparent 4px), radial-gradient(circle at 32px 15px, var(--cyan) 0 3px, transparent 4px), radial-gradient(circle at 47px 15px, var(--orange) 0 3px, transparent 4px), rgb(9 0 20 / 65%); }
.panel { padding: 60px 26px 26px; margin-bottom: 26px; }
.dashboard-totals { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr; padding-top: 32px; margin-bottom: 42px; }
.total-main, .total-profit { padding: 25px; min-width: 0; container-type: inline-size; }
.total-profit, .status-counts { border-left: 1px solid var(--border); }
.total-main > .money, .total-profit > .money { display: block; font-size: clamp(27px, 3vw, 44px); margin: 10px 0; letter-spacing: -.05em; }
.dashboard-totals .muted { font-size: 12px; }
.neon-rule { height: 2px; background: var(--sunset); margin-top: 20px; box-shadow: 0 0 12px rgb(255 0 255 / 40%); }
.status-counts { padding: 18px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.status-counts > div { display: flex; flex-direction: column; border-bottom: 1px solid var(--border); }
.status-counts span { font-size: 11px; color: var(--muted); letter-spacing: .07em; }
.status-counts strong { font-size: 26px; color: var(--cyan); font-variant-numeric: tabular-nums; }
.vehicle-grid, .sold-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 24px 0 42px; }
.vehicle-card, .sold-card { padding: 50px 23px 23px; display: flex; flex-direction: column; min-width: 0; transition: transform 180ms linear, box-shadow 180ms linear; }
.vehicle-card:hover, .sold-card:hover { transform: translateY(-4px); box-shadow: 0 0 24px rgb(0 255 255 / 22%), 4px 4px 0 rgb(255 0 255 / 40%); }
.status-sourcing { --status-color: var(--orange); }
.status-owned, .status-open { --status-color: var(--cyan); }
.status-listed, .status-in_progress { --status-color: var(--magenta); }
.status-sold, .status-done { --status-color: #b69bff; }
.vehicle-card { border-top-color: var(--status-color, var(--cyan)); }
.sold-card { border-top-color: #b69bff; }
.status-badge { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 5px 9px; border: 1px solid var(--status-color, var(--cyan)); color: var(--status-color, var(--cyan)); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; background: rgb(9 0 20 / 60%); }
.status-badge::before { content: ''; width: 5px; height: 5px; background: currentColor; box-shadow: 0 0 8px currentColor; }
.status-badge.large { font-size: 14px; padding: 9px 13px; }
.vehicle-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.vehicle-body { flex: 1; padding: 24px 0; }
.vehicle-body h3 { margin: 8px 0 14px; }
.vehicle-spec { font-size: 13px; }
.vehicle-bottom { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; padding-top: 17px; border-top: 1px solid var(--border); }
.vehicle-bottom > div { min-width: 0; flex: 1 1 145px; }
.vehicle-bottom > div > span, .financial-strip > div > span, .sale-profit > span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; margin-bottom: 5px; }
.vehicle-bottom .money { font-size: 18px; }
.vehicle-arrow { margin-left: auto; color: var(--cyan); font-size: 24px; }
.sold-card h3 { margin: 22px 0 10px; }
.sale-date { color: var(--muted); font-size: 13px; margin: 10px 0 20px; }
.sale-profit { border-top: 1px solid var(--border); padding-top: 15px; margin-top: auto; }
.sale-profit .money { font-size: 25px; }
.sold-card > span:last-child { position: absolute; right: 22px; bottom: 22px; color: var(--cyan); font-size: 24px; }
.financial-strip { display: flex; flex-wrap: wrap; gap: 26px; padding: 24px; margin-bottom: 26px; border-left: 3px solid var(--magenta); background: var(--panel); }
.financial-strip > div { flex: 1 1 230px; min-width: 0; }
.financial-strip .money { font-size: 25px; }
.section-navigation { display: flex; flex-wrap: wrap; gap: 24px; padding: 15px 0; margin-bottom: 26px; border-bottom: 1px solid var(--magenta); color: var(--cyan); text-transform: uppercase; font-size: 13px; }
.section-navigation a:hover { text-shadow: 0 0 12px var(--cyan); }
.detail-columns { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 26px; align-items: start; }
.detail-primary, .detail-secondary { min-width: 0; }
.form-stack { display: flex; flex-direction: column; gap: 19px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.span-two { grid-column: span 2; }
label { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.optional { color: var(--muted); display: contents; }
input, select, textarea { width: 100%; min-height: 46px; padding: 11px 12px; border: 1px solid #8c70a9; border-radius: 0; background: rgb(9 0 20 / 90%); color: var(--ink); }
input:hover, select:hover, textarea:hover { border-color: var(--cyan); }
textarea { resize: vertical; }
select option { background: var(--void); }
input[type=file] { font-size: 13px; overflow: hidden; }
input[type=file]::file-selector-button { color: var(--cyan); background: var(--void); border: 1px solid var(--cyan); padding: 6px 9px; margin-right: 12px; font: inherit; }
.section-rule { display: flex; justify-content: space-between; gap: 18px; margin: 28px 0 22px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; text-transform: uppercase; }
.form-actions, .vin-controls { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 16px; margin-top: 26px; }
.vin-controls { justify-content: flex-start; margin-top: 16px; }
.field-help { font-size: 13px; }
.scanner-panel { padding: 18px; margin: 20px 0; border: 1px solid var(--cyan); background: var(--void); }
.scanner-panel video { display: block; width: 560px; max-width: 100%; max-height: 320px; background: var(--void); }
.scanner-panel p { font-size: 14px; }
.form-disclosure { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); }
summary { color: var(--cyan); }
.form-disclosure > summary, .record-details > summary { min-height: 44px; }
.form-disclosure[open] > .form-stack, .record-details[open] > form { padding-top: 24px; }
.record-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.document-row, .job-row { display: flex; align-items: center; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--border); }
.document-row > div, .job-row > div { flex: 1; min-width: 0; }
.document-row strong, .document-row span, .document-row p { overflow-wrap: anywhere; }
.document-row p, .document-row span:not(.document-icon) { display: block; font-size: 13px; color: var(--muted); }
.document-icon { color: var(--cyan); font-size: 28px; }
.job-row h3 { margin-bottom: 7px; font-size: 17px; }
.job-row > .money { font-size: 17px; }
.job-indicator { width: 10px; height: 10px; border: 1px solid var(--cyan); transform: rotate(45deg); flex-shrink: 0; }
.job-indicator.in_progress { background: var(--warning); border-color: var(--warning); }
.job-indicator.done { background: var(--profit); border-color: var(--profit); }
.photo-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.photo-gallery figure { margin: 0; border: 1px solid var(--border); background: var(--void); padding: 6px; }
.photo-gallery img { display: block; width: 100%; height: 200px; object-fit: cover; }
.photo-gallery figcaption { padding: 8px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.sale-panel { border-top-color: var(--magenta); }
.sale-panel h2, .closed-panel h2 { margin-bottom: 18px; }
.context-note { border-left: 2px solid var(--magenta); padding: 8px 20px; margin: 20px 0; }
.context-note p { font-size: 14px; color: var(--muted); }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--muted); font-weight: 400; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; }
th, td { padding: 15px 12px; border-bottom: 1px solid var(--border); }
thead { background: rgb(9 0 20 / 65%); }
tbody tr:hover { background: rgb(0 255 255 / 4%); }
tfoot th, tfoot td { border-top: 2px solid var(--cyan); border-bottom: 0; }
tfoot .money { font-size: 24px; }
.amount { text-align: right; }
.nowrap { white-space: nowrap; }
.job-timeline { border-top: 1px solid var(--border); padding-top: 14px; font-size: 14px; }
.job-timeline > div { display: flex; justify-content: space-between; gap: 12px; margin: 9px 0; }
.job-timeline dt { color: var(--muted); }
.job-timeline dd { margin: 0; }
.notice { padding: 18px 22px; margin-bottom: 26px; border: 1px solid var(--border); background: var(--panel); }
.notice-error { border-left: 3px solid var(--loss); color: var(--loss); }
.notice-success { border-left: 3px solid var(--profit); color: var(--profit); }
.notice ul { margin-bottom: 0; }
.empty-state { border: 1px dashed var(--cyan); padding: 30px; margin-bottom: 30px; background: var(--panel); }
.empty-state p { color: var(--muted); }
.empty-state .button { margin-top: 15px; }
.empty-inline { font-size: 14px; padding: 14px 0; }
.login-layout { min-height: 78vh; display: grid; place-items: center; }
.login-panel { width: min(100%, 540px); padding: 76px 48px 48px; border-top-color: var(--magenta); box-shadow: 0 0 65px rgb(255 0 255 / 13%), 8px 8px 0 rgb(0 255 255 / 15%); }
.login-panel h1 { font-size: clamp(36px, 7vw, 65px); margin-bottom: 30px; }
.login-panel h2 { margin-bottom: 12px; }
.login-panel > p { margin-bottom: 28px; }
.login-panel .button { margin-top: 10px; }
.error-page { max-width: 760px; margin: 8vh auto; }
.error-page h1 { margin: 15px 0 25px; }
.error-page p { margin-bottom: 28px; }
.page-footer { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--border); padding-top: 22px; margin-top: 50px; color: var(--muted); font-size: 12px; }
.icon-button { width: 46px; height: 46px; align-items: center; justify-content: center; border: 1px solid var(--cyan); color: var(--cyan); background: var(--void); }
.menu-lines, .menu-lines::before, .menu-lines::after { display: block; position: relative; width: 20px; height: 2px; background: var(--cyan); }
.menu-lines::before, .menu-lines::after { content: ''; position: absolute; }
.menu-lines::before { top: -6px; }
.menu-lines::after { top: 6px; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: #694083; border: 2px solid var(--void); }
@media (max-width: 1150px) {
  .app-header { gap: 20px; padding: 22px 24px; }
  .nav-link { padding: 9px 7px; font-size: 12px; gap: 8px; }
  .app-nav nav { gap: 4px; }
  .nav-icon { display: none; }
  .vehicle-grid, .sold-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-columns { grid-template-columns: minmax(0, 1fr) 290px; gap: 20px; }
  .dashboard-totals { grid-template-columns: 1fr 1fr; }
  .status-counts { grid-column: span 2; grid-template-columns: repeat(4, 1fr); border-left: 0; border-top: 1px solid var(--border); }
  .status-counts > div { flex-direction: row; justify-content: space-between; align-items: center; gap: 10px; border: 0; }
}
@media (max-width: 900px) {
  .detail-columns { grid-template-columns: 1fr; }
  .detail-secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
  .page-heading { align-items: flex-start; }
  .page-heading .button { flex-shrink: 0; }
}
@media (max-width: 720px) {
  html { scroll-padding-top: 30px; }
  .app-header { justify-content: space-between; padding: 17px 20px; z-index: 20; }
  #menu-toggle { display: flex; }
  .app-nav { display: flex; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - 81px); max-height: calc(100dvh - 81px); overflow-y: auto; flex-direction: column; align-items: stretch; gap: 16px; padding: 23px; background: rgb(9 0 20 / 98%); border-bottom: 2px solid var(--magenta); box-shadow: 0 18px 35px rgb(0 0 0 / 60%); visibility: hidden; pointer-events: none; }
  .app-nav.is-open { visibility: visible; pointer-events: auto; }
  .app-nav nav { flex-direction: column; align-items: stretch; gap: 10px; }
  .nav-link { min-height: 48px; padding: 10px 12px; font-size: 15px; gap: 17px; }
  .nav-icon { display: inline-flex; }
  .app-nav .text-button { width: 100%; text-align: left; min-height: 44px; padding-left: 12px; }
  .workspace { padding: 30px 20px max(25px, env(safe-area-inset-bottom)); }
  .public-workspace { padding: 30px 20px; }
  .page-heading { flex-direction: column; gap: 20px; }
  .section-heading { align-items: flex-start; }
  .total-main, .total-profit { padding: 20px 15px; }
  .total-main > .money, .total-profit > .money { font-size: clamp(22px, 5.7vw, 36px); }
  .dashboard-totals .eyebrow { font-size: 10px; }
  .dashboard-totals .muted { font-size: 11px; }
  .status-counts { padding: 16px; gap: 14px; grid-template-columns: 1fr 1fr; }
  .vehicle-grid, .sold-grid { grid-template-columns: 1fr; }
  .panel { padding: 53px 20px 22px; }
  .detail-secondary { display: block; }
  .form-grid { gap: 18px; }
  .financial-strip { padding: 20px; gap: 22px; }
  .financial-strip .money { font-size: 23px; }
  .section-navigation { gap: 20px; }
  .form-actions > .button { flex: 1; }
  .photo-gallery img { height: 150px; }
  .login-panel { padding: 65px 27px 35px; }
  .page-footer { flex-direction: column; gap: 8px; }
  .sun-orb { width: 150vw; top: -10%; right: -75%; filter: blur(55px); }
}
@media (max-width: 440px) {
  .dashboard-totals { grid-template-columns: 1fr; }
  .total-profit { border-left: 0; border-top: 1px solid var(--border); }
  .status-counts { grid-column: auto; }
  .form-grid { grid-template-columns: 1fr; }
  .span-two { grid-column: auto; }
  .section-heading { flex-wrap: wrap; }
  .form-actions { flex-direction: column; }
  .vehicle-bottom { gap: 15px; }
  .job-row { gap: 10px; flex-wrap: wrap; }
  .job-row > .money { margin-left: auto; }
  .button { padding: 11px 18px; }
}
/* Fit the full supported monetary range inside each summary cell. */
.total-main > .money, .total-profit > .money { font-size: clamp(16px, 8cqi, 44px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  #shop-particles { display: none; }
  .vehicle-card:hover, .sold-card:hover { transform: none; }
  .button, .button > span, .button:hover, .button:hover > span { transform: none; }
  .nav-link:hover .nav-icon { transform: rotate(45deg); }
  .nav-link:hover .nav-icon > span { transform: rotate(-45deg); }
}

.vin-camera-frame { position: relative; max-width: 720px; }
.scanner-panel .vin-camera-frame video { width: 100%; max-height: none; height: auto; }
.vin-camera-guide { position: absolute; left: 5%; top: 35%; width: 90%; height: 30%; border: 2px solid var(--cyan); box-shadow: 0 0 0 100vmax #0006; clip-path: inset(-100% -6%); pointer-events: none; }
.vin-camera-frame { overflow: hidden; }

.vehicle-thumbnail { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover; margin-top: 20px; border: 1px solid var(--border); }
.photo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 8px 8px; }
.photo-actions form { margin: 0; max-width: 100%; }
.photo-actions .button { min-height: 44px; padding: 10px; font-size: 12px; white-space: normal; }
.photo-thumbnail-label { color: var(--cyan); font-size: 12px; padding: 10px 0; }
.photo-delete { color: #ffb5bd; }