:root {
  color-scheme: dark;
  --bg: #071217;
  --bg-deep: #050d11;
  --surface: #0d191f;
  --surface-2: #111f26;
  --surface-3: #16242b;
  --line: #26343b;
  --line-soft: #1c2a31;
  --text: #f3f6f7;
  --text-soft: #c5cdd1;
  --muted: #89969c;
  --accent: #ff6b00;
  --accent-light: #ff812e;
  --accent-soft: rgba(255, 107, 0, 0.13);
  --green: #2db984;
  --green-soft: rgba(45, 185, 132, 0.14);
  --danger: #f04438;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  min-height: 100%;
  background: #03090c;
  overscroll-behavior: none;
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 50% -10%, rgba(42, 72, 82, 0.4), transparent 34rem),
    #03090c;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

button, input, textarea, select { font: inherit; }
button, label, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
svg { display: block; width: 1.15rem; height: 1.15rem; fill: currentColor; }
h1, h2, h3, p { margin-top: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.hidden { display: none !important; }

.app-splash {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  background: radial-gradient(circle at 50% 38%, rgba(255,107,0,.18), transparent 12rem), #071217;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s ease, visibility .24s ease;
  visibility: hidden;
}
.is-booting .app-splash { opacity: 1; visibility: visible; pointer-events: auto; }
.is-booting .app-shell { visibility: hidden; }
.app-splash img { width: 76px; height: 76px; filter: drop-shadow(0 10px 18px rgba(0,0,0,.28)); }
.app-splash strong { margin-top: 2px; font-size: .92rem; letter-spacing: .08em; }
.app-splash span { color: #aebbc0; font-size: .68rem; }

.auth-gate { position: fixed; z-index: 190; inset: 0; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 50% 25%, rgba(255,107,0,.14), transparent 18rem), #071217; }
.auth-card { width: min(100%, 390px); display: grid; gap: 11px; border: 1px solid var(--line); border-radius: 14px; padding: 24px; background: linear-gradient(145deg, #14242b, #0b171c); box-shadow: var(--shadow); }
.auth-card > img { width: 62px; height: 62px; margin-bottom: 5px; }
.auth-card h1 { margin: 0; font-size: 1.22rem; }
.auth-card p { margin: 0; color: var(--muted); font-size: .73rem; line-height: 1.45; }
.auth-form, .member-form { display: grid; gap: 10px; margin-top: 6px; }
.auth-form label, .member-form label { display: grid; gap: 5px; color: var(--text-soft); font-size: .66rem; font-weight: 750; }
.auth-form input, .member-form input { min-height: 43px; font-size: .76rem; }
.auth-message { min-height: 18px; color: #ffad9f !important; }
body.is-auth-required .app-shell { visibility: hidden; }

.member-list { display: grid; gap: 7px; padding: 14px 16px 4px; }
.member-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line-soft); border-radius: 7px; padding: 9px; background: rgba(4,12,16,.25); }
.member-item strong { display: block; font-size: .7rem; }
.member-item span { display: block; margin-top: 2px; color: var(--muted); font-size: .6rem; }
.member-role { color: var(--green) !important; font-weight: 800; text-align: right; }
.member-form { padding: 14px 16px 16px; border-top: 1px solid var(--line-soft); }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.app-shell {
  position: relative;
  width: min(100%, 460px);
  min-height: 100vh;
  margin: 0 auto;
  background:
    radial-gradient(circle at 18% 4%, rgba(33, 71, 80, 0.17), transparent 17rem),
    linear-gradient(180deg, #08151a 0%, var(--bg) 38%, var(--bg-deep) 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 25px 70px rgba(0,0,0,.48);
}

.main {
  min-height: 100vh;
  padding: max(8px, env(safe-area-inset-top)) 14px calc(94px + env(safe-area-inset-bottom));
}

.mobile-status {
  min-height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px;
  color: #fff;
  font-size: .67rem;
  font-weight: 800;
}

.status-symbols { letter-spacing: 1px; font-size: .58rem; }

.topbar {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.035);
}

.network-status {
  width: 100%;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  border: 1px solid rgba(255,171,78,.28);
  border-radius: 6px;
  padding: 6px 8px;
  background: rgba(255,107,0,.08);
  color: #ffc38f;
  text-align: left;
  font-size: .6rem;
}
.network-status .status-dot { flex: 0 0 auto; }
.network-status-action { margin-left: auto; color: var(--text); font-size: .57rem; font-weight: 800; white-space: nowrap; }

.brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.brand-mark { color: #fff; }
.brand-mark svg { width: 24px; height: 24px; }
.brand strong { display: block; font-size: .76rem; letter-spacing: .01em; }
.brand > div > span { display: block; max-width: 170px; margin-top: 2px; overflow: hidden; color: var(--muted); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.header-actions { display: flex; align-items: center; gap: 3px; }

.connection-pill {
  display: none;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: .68rem;
}

.status-dot {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(45,185,132,.55);
}
.status-dot.muted { background: #647178; box-shadow: none; }

.icon-button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--text);
}
.notification-button svg { width: 19px; height: 19px; }
.page-title { display: none; }

.view { display: none; }
.view.active { display: block; animation: view-in .18s ease-out; }
@keyframes view-in { from { opacity: .4; transform: translateY(3px); } }

.demo-case-panel { margin: 12px 0 14px; padding: 15px; background: linear-gradient(135deg, rgba(255,107,0,.13), rgba(255,107,0,.04)); border: 1px solid rgba(255,145,67,.3); border-radius: 12px; }
.demo-case-panel h2 { margin: 3px 0 4px; font-size: 1rem; }
.demo-case-panel p { margin: 0; color: var(--text-soft); font-size: .72rem; line-height: 1.45; }
.demo-case-list { display: grid; gap: 7px; margin-top: 13px; }
.demo-case-list button { display: flex; justify-content: space-between; gap: 10px; align-items: center; width: 100%; padding: 11px 12px; color: var(--text); background: rgba(7,18,23,.58); border: 1px solid var(--line); border-radius: 8px; text-align: left; }
.demo-case-list button.active { color: #191006; background: var(--accent); border-color: var(--accent); }
.demo-case-list strong, .demo-case-list span { display: block; }
.demo-case-list strong { font-size: .78rem; }
.demo-case-list span { color: inherit; opacity: .72; font-size: .66rem; text-align: right; }
.demo-case-panel > small { display: block; margin-top: 10px; color: var(--muted); font-size: .6rem; line-height: 1.4; }
.is-public-demo .app-nav, .is-public-demo .notification-button, .is-public-demo #resetDemo, .is-public-demo .network-status, .is-public-demo .ocr-actions, .is-public-demo .privacy-note, .is-public-demo .voice-label, .is-public-demo .voice-box, .is-public-demo .quick-picks, .is-public-demo .popular-label, .is-public-demo .vehicle-edit-button, .is-public-demo .result-tools { display: none !important; }
.is-public-demo .main { padding-bottom: 28px; }
.is-public-demo #partRequest, .is-public-demo #correctionInput { color: var(--text-soft); background: rgba(255,255,255,.035); cursor: default; }
.is-public-demo .flow-controls { position: static; bottom: auto; margin-top: 14px; }

.flow-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 12px 0 14px;
}

.flow-steps button {
  position: relative;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
}

.flow-steps button:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 11px;
  left: calc(50% + 12px);
  width: calc(100% - 24px);
  height: 1px;
  background: #354148;
}

.flow-steps button.done:not(:last-child)::after { background: var(--green); }

.flow-steps button > span {
  position: relative;
  z-index: 1;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #2b363c;
  color: #d2d8da;
  font-size: .66rem;
  font-weight: 800;
}

.flow-steps button small { font-size: .61rem; white-space: nowrap; }
.flow-steps button.active { color: var(--accent); }
.flow-steps button.active > span { background: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--accent-soft); }
.flow-steps button.done { color: #70caa6; }
.flow-steps button.done > span { background: var(--green); color: transparent; }
.flow-steps button.done > span::after { content: "✓"; position: absolute; color: #fff; font-size: .75rem; }
.flow-steps button:disabled { cursor: default; opacity: .7; }

.mobile-flow { display: block; }
[data-flow-step] { display: none; }
[data-flow-step].active-flow-step { display: block; }

.app-card {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 14px;
  background: linear-gradient(145deg, rgba(18,32,39,.96), rgba(11,23,29,.96));
  box-shadow: var(--shadow);
}

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.card-head h2 { margin-bottom: 3px; font-size: .98rem; line-height: 1.25; }
.card-head p { margin: 0; color: var(--muted); font-size: .72rem; line-height: 1.4; }
.card-kicker { display: block; margin-bottom: 3px; color: var(--accent); font-size: .61rem; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }

.soft-badge, .warn-badge, .dealer-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  padding: 4px 7px;
  background: var(--green-soft);
  color: var(--green);
  font-size: .61rem;
  font-weight: 700;
  white-space: nowrap;
}

.scan-drop {
  position: relative;
  width: 100%;
  min-height: 138px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  border: 1px dashed rgba(255,107,0,.65);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,107,0,.08), transparent 6rem),
    rgba(4,12,16,.3);
  text-align: center;
  cursor: pointer;
  overflow: hidden;
}
.file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.scan-drop strong { font-size: .84rem; }
.scan-drop > span:last-child { color: var(--muted); font-size: .64rem; }
.scan-icon { color: var(--accent); }
.scan-icon svg { width: 37px; height: 37px; }
.document-preview { width: 100%; max-height: 180px; object-fit: cover; }

.scan-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-top: 10px;
}
.scan-actions label, .document-source-button {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(19,32,39,.82);
  color: var(--text-soft);
  font-size: .61rem;
  font-weight: 650;
  line-height: 1.15;
  cursor: pointer;
}
.scan-actions label:hover, .document-source-button:hover { border-color: var(--accent); color: var(--accent); }
.scan-actions svg { width: 18px; height: 18px; }

.ocr-actions { display: grid; gap: 7px; margin-top: 10px; }
.ocr-status {
  border-left: 2px solid #526168;
  padding: 7px 9px;
  background: rgba(0,0,0,.15);
  color: var(--muted);
  font-size: .67rem;
  line-height: 1.35;
}
.ocr-status[data-status="ready"] { border-color: var(--green); color: #80d2b1; }
.ocr-status[data-status="pending"] { border-color: var(--accent); color: #ffc293; }
.ocr-status[data-status="error"] { border-color: var(--danger); color: #ff9d95; }

.vehicle-grid, .summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.vehicle-field, .summary-grid > div {
  min-height: 49px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 8px;
  background: rgba(5,14,18,.4);
}
.vehicle-field span, .summary-grid span { display: block; color: var(--muted); font-size: .59rem; }
.vehicle-field strong, .summary-grid strong { display: block; margin-top: 3px; font-size: .71rem; overflow-wrap: anywhere; }
.vehicle-edit-button { grid-column: 1 / -1; min-height: 38px; border: 1px dashed rgba(255,107,0,.72); border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: .66rem; font-weight: 800; }
.vehicle-edit-button::before { content: "✎"; margin-right: 6px; }
.vehicle-placeholder { grid-column: 1/-1; padding: 9px; border: 1px dashed var(--line); border-radius: 6px; color: var(--muted); font-size: .66rem; text-align: center; }

.test-docs { margin-top: 10px; border: 1px solid var(--line); border-radius: 6px; background: rgba(5,14,18,.35); }
.test-docs summary { min-height: 36px; padding: 9px 10px; color: var(--muted); font-size: .67rem; font-weight: 700; cursor: pointer; list-style: none; }
.test-docs summary::after { content: "+"; float: right; color: var(--accent); }
.test-docs[open] summary::after { content: "−"; }
.test-docs summary::-webkit-details-marker { display: none; }
.test-doc-list { display: grid; gap: 5px; max-height: 190px; overflow: auto; padding: 0 8px 8px; }
.test-doc-button { display: grid; gap: 2px; width: 100%; border: 1px solid var(--line); border-radius: 5px; padding: 8px; background: var(--surface); color: var(--text); text-align: left; }
.test-doc-button strong { font-size: .68rem; }
.test-doc-button span { color: var(--muted); font-size: .58rem; }
.test-doc-button.active { border-color: var(--green); background: var(--green-soft); }

.privacy-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; color: var(--muted); font-size: .61rem; }
.privacy-note svg { width: 14px; height: 14px; color: #899ba2; }

textarea, input, select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 11px;
  background: linear-gradient(180deg, #16242b, #121f25);
  color: var(--text);
  outline: none;
}
textarea::placeholder, input::placeholder { color: #707f85; }
textarea:focus, input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
textarea { min-height: 72px; resize: vertical; font-size: .82rem; }

.voice-label, .popular-label { margin: 10px 0 6px; color: var(--text-soft); font-size: .66rem; }
.voice-box { min-height: 54px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 6px; padding: 8px; background: rgba(5,14,18,.36); }
.record-button { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border: 0; background: transparent; color: var(--accent); }
.record-button svg { width: 26px; height: 26px; }
.waveform { flex: 1; height: 22px; opacity: .7; background: repeating-linear-gradient(90deg, #5a666b 0 2px, transparent 2px 5px); mask-image: linear-gradient(0deg, transparent, #000 25%, #000 75%, transparent); }
.voice-time { color: var(--text); font-size: .63rem; text-align: right; }
.voice-time small { display: block; margin-top: 5px; color: var(--muted); font-size: .55rem; }
.record-button.recording { color: var(--danger); animation: record-pulse 1s ease-in-out infinite; }
.record-button.recording svg { filter: drop-shadow(0 0 5px rgba(240,68,56,.7)); }
.voice-playback { width: 100%; height: 34px; margin-top: 7px; accent-color: var(--accent); }
@keyframes record-pulse { 50% { transform: scale(1.08); } }

.quick-picks, .edit-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.quick-picks button, .edit-chips button { min-height: 26px; border: 1px solid var(--line); border-radius: 13px; padding: 5px 9px; background: #1a282f; color: var(--text-soft); font-size: .6rem; }
.quick-picks button:hover, .edit-chips button:hover { border-color: var(--accent); color: var(--accent); }

.primary-button, .secondary-button, .text-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 6px;
  padding: 9px 12px;
  font-weight: 750;
  font-size: .7rem;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.primary-button { border: 1px solid var(--accent); background: linear-gradient(180deg, var(--accent-light), var(--accent)); color: #fff; box-shadow: 0 8px 18px rgba(255,107,0,.15); }
.secondary-button { border: 1px solid var(--line); background: linear-gradient(180deg, #202d34, #18252b); color: var(--text); }
.text-button { min-height: 32px; border: 0; background: transparent; color: var(--accent); }
.primary-button:active, .secondary-button:active { transform: translateY(1px); }
.primary-button:disabled, .secondary-button:disabled { opacity: .45; cursor: not-allowed; }
.full-width { width: 100%; }
.is-loading::before { content: ""; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.flow-controls {
  position: sticky;
  z-index: 20;
  bottom: calc(72px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: .9fr 1.35fr;
  gap: 7px;
  margin-top: 10px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(8,18,23,.91);
  box-shadow: 0 10px 28px rgba(0,0,0,.4);
  backdrop-filter: blur(16px);
}
.flow-hint { grid-column: 1/-1; color: var(--muted); font-size: .61rem; line-height: 1.35; }
#view-search[data-current-step="part"] .part-card > #analyzeRequest { display: none; }
#view-search[data-current-step="confirm"] .flow-controls { display: none; }

.empty-state { min-height: 110px; display: grid; place-items: center; align-content: center; gap: 3px; border: 1px dashed var(--line); border-radius: 7px; padding: 14px; background: rgba(4,12,16,.26); color: var(--muted); text-align: center; }
.empty-state strong { color: var(--text); font-size: .78rem; }
.empty-state span { font-size: .66rem; }
.confirm-sentence { display: none; }
.summary-section { margin-bottom: 10px; border: 1px solid var(--line); border-radius: 7px; padding: 11px; background: rgba(4,12,16,.25); }
.summary-section h3 { margin-bottom: 8px; font-size: .74rem; }
.summary-section .summary-grid { margin: 0; }
.part-summary .edit-chips { margin: 0; }
.field-label { display: block; margin: 10px 0 6px; color: var(--text-soft); font-size: .66rem; font-weight: 700; }
.button-row { display: flex; gap: 7px; margin-top: 11px; }
.button-row > * { flex: 1; }

.result-tools { display: grid; grid-template-columns: .7fr 1.45fr .7fr; gap: 5px; margin: 0 0 10px; }
.result-tools button { min-height: 30px; border: 1px solid var(--line); border-radius: 5px; padding: 5px; background: #152229; color: var(--text-soft); font-size: .57rem; }
.result-tools button.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.results-list { display: grid; gap: 8px; }
.result-card { display: grid; gap: 8px; }
.search-query { border: 1px solid var(--line); border-radius: 6px; padding: 8px; background: rgba(4,12,16,.25); }
.search-query.compact { min-height: 0; margin-bottom: 6px; padding: 6px 8px; }
.search-query span, .candidate-title { display: block; color: var(--muted); font-size: .55rem; font-weight: 800; text-transform: uppercase; }
.search-query strong { display: block; margin-top: 2px; font-size: .64rem; line-height: 1.25; overflow-wrap: anywhere; }
.candidate-list { display: grid; gap: 6px; }
.candidate-title { margin: 2px 0 0; }
.candidate-card { position: relative; min-height: 72px; display: grid; gap: 4px; border: 1px solid var(--line); border-radius: 7px; padding: 10px 44px 10px 54px; background: linear-gradient(145deg, #17252c, #111e24); }
.candidate-card::before { content: "OE"; position: absolute; top: 10px; left: 10px; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #3b4b53; border-radius: 5px; background: #f2f4f5; color: #19252b; font-size: .57rem; font-weight: 900; }
.candidate-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.candidate-head strong { font-size: .76rem; overflow-wrap: anywhere; }
.candidate-copy { position: absolute; top: 50%; right: 10px; width: 26px; height: 26px; display: grid; place-items: center; transform: translateY(-50%); border: 0; border-radius: 5px; background: var(--accent); color: #fff; }
.candidate-copy svg { width: 13px; height: 13px; }
.candidate-actions { display: grid; gap: 3px; }
.candidate-actions small { color: var(--muted); font-size: .58rem; }
.candidate-actions a { color: var(--green); font-size: .61rem; font-weight: 700; text-decoration: none; }
.source-note { padding: 7px; border-left: 2px solid var(--accent); color: var(--muted); font-size: .62rem; }
.variant-warning { margin: 0; border: 1px solid rgba(255,107,0,.3); border-radius: 5px; padding: 7px; background: var(--accent-soft); color: #ffc194; font-size: .59rem; }
.dealer-links { display: grid; gap: 5px; }
.dealer-link { min-height: 42px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; background: #111e24; color: var(--text); text-decoration: none; }
.dealer-link strong { font-size: .66rem; }
.dealer-link small { display: block; color: var(--green); font-size: .55rem; }
.dealer-link svg { color: var(--accent); }

.section-intro { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.section-intro h2 { margin: 0; font-size: 1.02rem; }
.section-intro .card-kicker { margin-bottom: 2px; }
.history-tabs { display: grid; grid-template-columns: repeat(3,1fr); margin-bottom: 10px; padding: 2px; border: 1px solid var(--line-soft); border-radius: 6px; background: #111e24; }
.history-tabs button { min-height: 28px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: .61rem; }
.history-tabs button.active { background: var(--accent); color: #fff; }
.history-list, .dealer-list { display: grid; gap: 6px; }
.history-item, .dealer-card { border: 1px solid var(--line); border-radius: 7px; padding: 10px; background: linear-gradient(145deg, #16242b, #101d23); }
.history-item { position: relative; min-height: 66px; padding-left: 54px; }
.history-item::before { content: "◉"; position: absolute; top: 12px; left: 10px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #46565e; color: #dbe1e3; }
.history-item-header, .dealer-card-header, .dealer-card-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.history-item h3, .dealer-card h3 { margin: 0; font-size: .72rem; }
.history-item span, .dealer-card span { display: block; color: var(--muted); font-size: .58rem; line-height: 1.4; }
.history-item > span:last-child { position: absolute; right: 9px; bottom: 9px; border-radius: 4px; padding: 3px 5px; background: var(--green-soft); color: var(--green); }
.dealer-card-header { margin-bottom: 8px; }
.dealer-card-footer { align-items: center; }
.dealer-card-footer a { max-width: 215px; overflow: hidden; color: var(--muted); font-size: .58rem; text-overflow: ellipsis; text-decoration: none; white-space: nowrap; }
.dealer-status.inactive { background: rgba(148,163,184,.14); color: #a9b6bd; }
.dealer-actions { display: flex; gap: 4px; }
.small-button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: transparent; color: var(--text-soft); }
.small-button svg { width: 15px; height: 15px; }
.danger-button { color: #ee766d; }
.round-add { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); font-size: 1.2rem; line-height: 1; text-decoration: none; }

.dealer-form-card { margin-top: 14px; }
.dealer-form { display: grid; gap: 10px; }
.dealer-form label { display: grid; gap: 5px; color: var(--text-soft); font-size: .64rem; font-weight: 700; }
.dealer-form input, .dealer-form select { min-height: 40px; font-size: .71rem; }

.settings-list { overflow: hidden; border: 1px solid var(--line-soft); border-radius: 8px; background: #101d23; }
.settings-row { width: 100%; min-height: 46px; display: grid; grid-template-columns: 28px minmax(0,1fr) auto auto; align-items: center; gap: 7px; border: 0; border-bottom: 1px solid var(--line-soft); padding: 7px 10px; background: transparent; color: var(--text); text-align: left; }
.settings-row:last-child { border-bottom: 0; }
.settings-row strong { display: block; font-size: .67rem; }
.settings-row small { display: block; margin-top: 2px; color: var(--muted); font-size: .56rem; }
.settings-icon { display: grid; place-items: center; color: var(--text-soft); }
.settings-icon svg { width: 15px; height: 15px; }
.row-value { color: var(--muted); font-size: .59rem; }
.chevron { color: #c1c9cd; font-size: 1rem; }
.profile-editor { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); background: rgba(4,12,16,.35); }
.profile-editor input { min-height: 36px; padding: 8px; font-size: .68rem; }
.profile-editor button { min-height: 36px; }
.logout-button { width: 100%; min-height: 42px; margin-top: 8px; border: 1px solid rgba(240,68,56,.22); border-radius: 7px; background: rgba(240,68,56,.05); color: var(--danger); font-size: .66rem; font-weight: 700; text-align: left; padding: 10px; }

#view-settings.active { min-height: calc(100dvh - 138px); display: flex; flex-direction: column; }
#view-settings.active .section-intro { min-height: 78px; }
#view-settings.active .settings-list { flex: 1; }
#view-settings.active .settings-row { min-height: 60px; padding: 10px 12px; }
#view-settings.active .settings-row strong { font-size: .78rem; }
#view-settings.active .settings-row small, #view-settings.active .row-value { font-size: .65rem; }
#view-settings.active .settings-icon svg { width: 18px; height: 18px; }
#view-settings.active .profile-editor { padding: 10px 12px; }
#view-settings.active .profile-editor input, #view-settings.active .profile-editor button { min-height: 42px; font-size: .74rem; }
#view-settings.active .logout-button { min-height: 50px; margin-top: 10px; font-size: .75rem; }

.app-dialog { width: min(420px, calc(100vw - 28px)); max-height: min(620px, calc(100vh - 28px)); border: 1px solid var(--line); border-radius: 12px; padding: 0; background: #132128; color: var(--text); box-shadow: 0 22px 60px rgba(0,0,0,.55); }
.app-dialog::backdrop { background: rgba(0,0,0,.58); backdrop-filter: blur(2px); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 16px 10px; border-bottom: 1px solid var(--line-soft); }
.dialog-head h2 { margin: 0; font-size: .93rem; }
.dialog-close { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #223139; color: var(--text); font-size: 1.25rem; line-height: 1; }
.app-dialog > p, #settingsDialogContent, .notification-empty { padding: 12px 16px; color: var(--muted); font-size: .7rem; line-height: 1.5; }
.dialog-actions { display: grid; gap: 7px; padding: 0 16px 16px; }
.dialog-option { display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: #18282f; color: var(--text); text-align: left; }
.dialog-option:hover { border-color: var(--accent); }
.dialog-option strong { font-size: .73rem; }
.dialog-option span, .about-copy span { color: var(--muted); font-size: .62rem; }
.dialog-choice { display: flex; align-items: center; gap: 8px; margin: 9px 0; color: var(--text); font-size: .7rem; }
.dialog-choice input { width: auto; accent-color: var(--accent); }
.about-copy { display: grid; gap: 4px; }
.about-copy strong { color: var(--text); font-size: .78rem; }
.about-copy p { margin: 7px 0 0; }
.notification-empty { display: grid; justify-items: center; gap: 4px; padding: 30px 16px; text-align: center; }
.notification-empty strong { color: var(--text); font-size: .78rem; }
.vehicle-editor { display: grid; gap: 10px; padding: 14px 16px 16px; }
.vehicle-editor label { display: grid; gap: 5px; color: var(--text-soft); font-size: .64rem; font-weight: 750; }
.vehicle-editor input { min-height: 40px; padding: 9px; font-size: .72rem; }
.vehicle-editor-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

body[data-theme="light"] { --page: #e7edf0; --surface: #ffffff; --surface-2: #f4f7f8; --text: #17242a; --text-soft: #304049; --muted: #60717a; --line: #c9d5da; --line-soft: #dce5e8; --shadow: 0 10px 28px rgba(34,55,65,.12); background: var(--page); color: var(--text); }
body[data-theme="light"] .app-shell, body[data-theme="light"] .app-nav { background: rgba(248,251,252,.95); }
body[data-theme="light"] .app-card, body[data-theme="light"] .settings-list, body[data-theme="light"] .history-tabs, body[data-theme="light"] .history-item, body[data-theme="light"] .dealer-card { background: #fff; }
body[data-theme="light"] textarea, body[data-theme="light"] input, body[data-theme="light"] select, body[data-theme="light"] .scan-actions label, body[data-theme="light"] .document-source-button, body[data-theme="light"] .result-tools button, body[data-theme="light"] .app-dialog, body[data-theme="light"] .dialog-option { background: #f7fafb; color: var(--text); }
body[data-theme="light"] .network-status { border-color: rgba(184,104,20,.3); background: #fff3e7; color: #8b4708; }

.app-nav {
  position: fixed;
  z-index: 40;
  right: max(0px, calc((100vw - 460px) / 2));
  bottom: 0;
  left: max(0px, calc((100vw - 460px) / 2));
  border-top: 1px solid #1e2b32;
  background: rgba(7,17,22,.95);
  backdrop-filter: blur(18px);
}
.nav-list { display: grid; grid-template-columns: repeat(4,1fr); padding: 6px 5px calc(6px + env(safe-area-inset-bottom)); }
.nav-item { min-height: 54px; display: grid; place-items: center; align-content: center; gap: 4px; border: 0; background: transparent; color: #8d999e; font-size: .57rem; }
.nav-icon { position: relative; display: grid; place-items: center; }
.nav-icon svg { width: 19px; height: 19px; }
.nav-item.active { color: var(--accent); }
.nav-item.active .nav-icon::after { content: ""; position: absolute; top: -7px; width: 22px; height: 2px; border-radius: 2px; background: var(--accent); }

.toast { position: fixed; z-index: 80; right: max(12px, calc((100vw - 430px) / 2)); bottom: calc(76px + env(safe-area-inset-bottom)); left: max(12px, calc((100vw - 430px) / 2)); border: 1px solid #35434a; border-radius: 7px; padding: 10px 12px; background: #19272e; color: #fff; box-shadow: var(--shadow); font-size: .7rem; opacity: 0; transform: translateY(8px); pointer-events: none; transition: .18s ease; }
.toast.show { opacity: 1; transform: translateY(0); }

@media (min-width: 520px) {
  body { padding: 18px 0; }
  .app-shell { min-height: calc(100vh - 36px); border: 1px solid #27363d; border-radius: 18px; overflow: hidden; }
  .main { min-height: calc(100vh - 36px); }
  .app-nav { bottom: 18px; border-radius: 0 0 18px 18px; }
  .connection-pill { display: flex; }
  .mobile-status { padding-top: 2px; }
}

@media (max-width: 360px) {
  .main { padding-right: 10px; padding-left: 10px; }
  .scan-actions label { flex-direction: column; }
  .candidate-card { padding-left: 48px; }
  .brand > div > span { max-width: 110px; }
}

@media (hover: none) and (pointer: coarse) {
  button, a, label { touch-action: manipulation; }
  button:not(:disabled):active { transform: scale(.985); }
}

@media (display-mode: standalone) {
  .mobile-status { display: none; }
  .main { padding-top: max(10px, env(safe-area-inset-top)); }
  .app-shell { min-height: 100dvh; }
}

html[data-display-mode="standalone"] .mobile-status { display: none; }
html[data-display-mode="standalone"] .app-shell { min-height: 100dvh; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}