:root {
  
  --bg: #0e1116;
  --surface: #161b22;
  --surface-raised: #1e2530;
  --surface-hover: #262e3b;
  --border: #29313c;
  --border-strong: #38414f;

  --ink: #e7eaf0;
  --ink-dim: #8b93a3;
  --ink-faint: #5a6272;

  
  --signal: #3d8bd4;
  --signal-dim: #17324d;
  --signal-ink: #f4f8fc;
  --signal-hover: #5aa3e0;

  
  --warning: #d99a3d;
  --warning-dim: #4a3a1f;
  --severity-high: #e2703d;
  --severity-high-dim: #4a2a1c;
  --info: #2fb8c4;
  --info-dim: #163a3d;
  --ok: #3fc088;
  --ok-dim: #163d2c;
  --fault: #e5484d;
  --fault-dim: #3d1f21;

  
  --font-ui: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 24px -12px rgba(0, 0, 0, 0.55);
}

@media (prefers-color-scheme: light) {
  
  :root { color-scheme: dark; }
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

html {
  height: 100%;
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  
  overflow-x: hidden;
  
  overflow-wrap: anywhere;
}

h1, h2, h3 { font-family: var(--font-ui); margin: 0; }

button, input { font-family: inherit; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.app {
  display: grid;
  grid-template-columns: 300px 1fr;
  
  flex: 1 0 auto;
  min-height: 0;
}

.rail {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 28px 24px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.rail__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 36px;
}

.rail__logo {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: linear-gradient(155deg, var(--signal), #1c5786);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--signal-ink);
  flex: none;
}

.rail__title {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.panel {
  padding: 48px 56px;
  max-width: 760px;
  width: 100%;
}

.rail__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.rail__step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 30px;
}

.rail__step::before {
  
  content: '';
  position: absolute;
  left: 7px;
  top: 20px;
  bottom: -4px;
  width: 2px;
  background: var(--border-strong);
}

.rail__step:last-child::before { display: none; }

.rail__step.is-done::before { background: var(--ok-dim); }

.rail__pin {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--surface);
  margin-top: 2px;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.rail__step.is-active .rail__pin {
  border-color: var(--signal);
  background: var(--signal);
  box-shadow: 0 0 0 4px var(--signal-dim);
  animation: pin-pulse 1.8s ease-in-out infinite;
}

.rail__step.is-done .rail__pin {
  border-color: var(--ok);
  background: var(--ok);
}

.rail__step.is-done .rail__pin::after {
  content: '';
  display: block;
  width: 4px;
  height: 8px;
  border-right: 2px solid #0d2018;
  border-bottom: 2px solid #0d2018;
  transform: rotate(45deg);
  margin: 1px 0 0 5px;
}

@keyframes pin-pulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--signal-dim); }
  50% { box-shadow: 0 0 0 7px transparent; }
}

.rail__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rail__label {
  font-size: 13px;
  color: var(--ink-faint);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rail__label-short { display: none; }

.rail__step.is-active .rail__label,
.rail__step.is-done .rail__label { color: var(--ink-dim); }

.rail__value {
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 210px;
}

.rail__step.is-clickable { cursor: pointer; }
.rail__step.is-clickable:hover .rail__value { color: var(--signal); }

.rail__step.is-auto .rail__value::after {
  content: ' · авто';
  color: var(--ink-faint);
  font-family: var(--font-ui);
  font-size: 11px;
}

.step-header { margin-bottom: 28px; }

.step-header__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--ink-faint);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  margin-bottom: 14px;
}
.step-header__back:hover { color: var(--signal); }

.step-header h2 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.step-header p {
  margin: 8px 0 0;
  color: var(--ink-dim);
  font-size: 15px;
  max-width: 52ch;
}

.search-input-wrap { position: relative; margin-bottom: 20px; }

.search-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px 14px 44px;
  color: var(--ink);
  font-size: 15px;
  transition: border-color 0.15s;
}
.search-input:focus { border-color: var(--signal); outline: none; }
.search-input::placeholder { color: var(--ink-faint); }

.search-input-wrap svg {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--ink-faint);
  pointer-events: none;
}

.search-hint {
  font-size: 13px;
  color: var(--ink-faint);
  margin: -8px 0 16px;
}

.option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.option-grid--brands {
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}

.option-grid--cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.option-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  font-size: 14.5px;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.option-card:hover {
  border-color: var(--signal);
  background: var(--surface-raised);
}
.option-card:active { transform: scale(0.98); }

.option-card__title {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink);
}

.option-card__meta {
  font-size: 13px;
  color: var(--ink-dim);
}

.brand-card {
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 16px 12px;
}

.brand-card__logo {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: none;
  background: var(--surface-raised);
}
.brand-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}
.brand-card__logo-fallback {
  display: none;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  letter-spacing: 0.02em;
}
.brand-card__logo.is-monogram .brand-card__logo-fallback { display: block; }

.brand-card__name {
  font-size: 13.5px;
  line-height: 1.3;
  word-break: break-word;
}

.brand-card__logo.mono-0.is-monogram { background: #3a4a5c; }
.brand-card__logo.mono-1.is-monogram { background: #4a4066; }
.brand-card__logo.mono-2.is-monogram { background: #405a52; }
.brand-card__logo.mono-3.is-monogram { background: #5c4a3a; }
.brand-card__logo.mono-4.is-monogram { background: #4a3a52; }
.brand-card__logo.mono-5.is-monogram { background: #3a5252; }

.empty-state, .skeleton-list { grid-column: 1 / -1; }

.empty-state {
  padding: 32px 20px;
  text-align: center;
  color: var(--ink-dim);
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
}
.empty-state strong { display: block; color: var(--ink); margin-bottom: 4px; }

.skeleton-list { display: contents; }
.skeleton-card {
  height: 52px;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-raised) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.fuel-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  color: var(--ink);
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 600;
  transition: border-color 0.15s, background 0.15s;
}
.fuel-chip:hover { border-color: var(--signal); background: var(--surface-raised); }
.fuel-chip__icon { width: 22px; height: 22px; color: var(--signal); flex: none; }
.fuel-chip__icon svg { width: 100%; height: 100%; }

.purpose-choice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.purpose-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 22px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.purpose-card:hover { border-color: var(--signal); background: var(--surface-raised); transform: translateY(-1px); }
.purpose-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--signal-dim);
  color: var(--signal);
  display: flex;
  align-items: center;
  justify-content: center;
}
.purpose-card__icon svg { width: 20px; height: 20px; }
.purpose-card__title { font-size: 17px; font-weight: 700; color: var(--ink); }
.purpose-card__desc { font-size: 13.5px; color: var(--ink-dim); line-height: 1.5; }

.repair-overall {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 14px 18px;
  background: var(--surface-raised);
  border-radius: var(--radius-md);
}
.repair-overall__label { font-size: 13.5px; color: var(--ink-dim); font-weight: 600; }
.repair-variant-card { margin-bottom: 20px; }
.repair-time { color: var(--ink-faint); font-size: 13px; margin: -8px 0 16px; }
.repair-steps { margin: 0; padding-left: 22px; color: var(--ink); line-height: 1.8; }
.repair-steps li { margin-bottom: 4px; }
.repair-safety { border-left: 3px solid var(--warning); padding-left: 14px; }
.repair-safety h4 { color: var(--warning); }
.repair-reject-btn { margin-top: 6px; }

.purchase-verdict {
  margin-bottom: 28px;
  padding: 18px 22px;
  background: var(--surface-raised);
  border-left: 3px solid var(--signal);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.purchase-verdict h4 {
  margin: 0 0 8px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--signal);
  font-weight: 700;
}
.purchase-verdict p { margin: 0; font-size: 15px; color: var(--ink); line-height: 1.55; }

.purchase-section-title {
  margin: 32px 0 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.purchase-section-title:first-of-type { margin-top: 0; }

.purchase-issue-card { margin-bottom: 14px; }
.purchase-mileage-tag { color: var(--ink-faint); font-size: 13px; margin: 8px 0 0; }

.purchase-unit-list { display: flex; flex-direction: column; gap: 10px; }
.purchase-unit-row {
  padding: 14px 18px;
  background: var(--surface-raised);
  border-radius: var(--radius-md);
}
.purchase-unit-row__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.purchase-unit-row__name { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.purchase-unit-row__notes { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-dim); line-height: 1.5; }
.purchase-pros-cons { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; font-size: 13.5px; }
.purchase-pros-cons ul { margin: 0; padding-left: 16px; color: var(--ink-dim); }
.purchase-pros-cons .is-pro { color: var(--ok); font-weight: 700; flex: none; }
.purchase-pros-cons .is-con { color: var(--fault); font-weight: 700; flex: none; }

.purchase-rust-block { border-left: 3px solid var(--fault); padding-left: 14px; }
.purchase-rust-block h4 { color: var(--fault); }
.purchase-checklist { list-style: none; margin: 0; padding: 0; }
.purchase-checklist li {
  padding: 9px 0 9px 26px;
  position: relative;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--ink-dim);
}
.purchase-checklist li:last-child { border-bottom: none; }
.purchase-checklist li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 15px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
}

.purchase-schedule { display: flex; flex-direction: column; gap: 12px; }
.purchase-schedule-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.purchase-schedule-row:last-child { border-bottom: none; }
.purchase-schedule-row__mileage { font-weight: 700; color: var(--signal); font-size: 13.5px; }
.purchase-schedule-row ul { margin: 0; padding-left: 18px; color: var(--ink-dim); font-size: 13.5px; line-height: 1.6; }
@media (max-width: 520px) {
  .purchase-schedule-row { grid-template-columns: 1fr; gap: 4px; }
}

.codes-panel { margin-bottom: 28px; }

.codes-input-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.codes-input-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  min-height: 56px;
  transition: border-color 0.15s;
}
.codes-input-wrap:focus-within { border-color: var(--signal); }

.code-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.code-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  padding: 6px 6px 6px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.code-chip.is-valid { background: var(--ok-dim); color: var(--ok); border-color: rgba(74, 222, 158, 0.3); }
.code-chip.is-invalid { background: var(--fault-dim); color: var(--fault); border-color: rgba(255, 93, 93, 0.35); }

.code-chip__remove {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: inherit;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.code-chip__remove:hover { background: rgba(255, 255, 255, 0.18); }

.codes-input {
  flex: 1;
  min-width: 140px;
  background: none;
  border: none;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 15px;
  padding: 6px 4px;
}
.codes-input:focus { outline: none; }
.codes-input::placeholder { color: var(--ink-faint); font-family: var(--font-ui); }

.codes-hint {
  min-height: 20px;
  font-size: 13.5px;
  margin: 10px 0 0;
  color: var(--ink-dim);
}
.codes-hint.is-error { color: var(--fault); }
.codes-hint.is-warning { color: var(--warning); }
.codes-hint.is-ok { color: var(--ok); }
.codes-hint.is-info { color: var(--info); }

.upload-zone {
  margin-top: 18px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 26px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.upload-zone:hover, .upload-zone.is-dragover {
  border-color: var(--signal);
  background: rgba(255, 157, 61, 0.06);
}
.upload-zone__icon { width: 28px; height: 28px; color: var(--ink-faint); flex: none; }
.upload-zone strong { display: block; font-size: 14.5px; }
.upload-zone span { display: block; font-size: 13px; color: var(--ink-dim); margin-top: 2px; }

.upload-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  align-items: center;
}
.upload-preview {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  display: block;
}
.upload-status {
  font-size: 13.5px;
  color: var(--ink-dim);
}
.upload-status.is-error { color: var(--fault); }

.obd-bluetooth-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.obd-bluetooth-btn--danger {
  color: var(--fault);
  border-color: var(--fault-dim);
}
.obd-bluetooth-btn--danger:hover:not(:disabled) {
  background: var(--fault-dim);
  border-color: var(--fault);
}

.upload-disabled-note {
  margin: 16px 0 0;
  padding: 14px 16px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--ink-dim);
  font-size: 13.5px;
}

.or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 16px;
  color: var(--ink-faint);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.or-divider::before, .or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.symptoms-input-wrap { position: relative; }
.symptoms-input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 52px 14px 16px;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14.5px;
  line-height: 1.55;
  resize: vertical;
  min-height: 92px;
}
.symptoms-input:focus { border-color: var(--signal); outline: none; }
.symptoms-input::placeholder { color: var(--ink-faint); }

.voice-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-raised);
  color: var(--ink-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.voice-btn svg { width: 17px; height: 17px; position: relative; z-index: 1; }
.voice-btn:hover { border-color: var(--signal); color: var(--signal); }
.voice-btn.is-listening {
  border-color: var(--fault);
  color: var(--fault);
  background: var(--fault-dim);
}
.voice-btn__pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--fault);
  opacity: 0;
}
.voice-btn.is-listening .voice-btn__pulse {
  animation: voice-pulse 1.4s ease-out infinite;
}
@keyframes voice-pulse {
  0% { opacity: 0.6; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(1.3); }
}

.symptoms-hint {
  min-height: 20px;
  font-size: 13px;
  margin: 8px 0 0;
  color: var(--ink-faint);
}
.symptoms-hint.is-warning { color: var(--warning); }
.refine-explainer {
  padding: 14px 16px;
  margin: 0 0 20px;
  background: var(--info-dim);
  border-left: 3px solid var(--info);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}
.symptoms-hint.is-ok { color: var(--ok); }
.symptoms-hint.is-error { color: var(--fault); }

.summary-symptoms {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin: 0 0 24px;
}
.summary-symptoms__label {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin: 0 0 8px;
}
.summary-symptoms__text { margin: 0; color: var(--ink-dim); line-height: 1.55; }

.provider-select {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.provider-select__label {
  font-size: 12.5px;
  color: var(--ink-faint);
  margin-right: 2px;
}
.provider-chip {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink-dim);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.provider-chip:hover { border-color: var(--ink-dim); color: var(--ink); }
.provider-chip.is-active {
  border-color: var(--signal);
  background: var(--signal-dim);
  color: var(--signal);
}

.upload-preview-item {
  position: relative;
  width: 72px;
  height: 72px;
  flex: none;
}
.upload-preview-item__badge {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-raised);
}
.upload-preview-item.is-loading .upload-preview-item__badge {
  background: var(--signal);
  animation: badge-pulse 1s ease-in-out infinite;
}
.upload-preview-item.is-done .upload-preview-item__badge {
  background: var(--ok);
}
.upload-preview-item.is-done .upload-preview-item__badge::after {
  content: '';
  width: 5px;
  height: 8px;
  border-right: 2px solid #0d2018;
  border-bottom: 2px solid #0d2018;
  transform: rotate(45deg) translate(-1px, -1px);
}
.upload-preview-item.is-error .upload-preview-item__badge {
  background: var(--fault);
  color: #3d0f0f;
  font-weight: 700;
  font-size: 12px;
}
.upload-preview-item.is-error .upload-preview-item__badge::after {
  content: '×';
  line-height: 1;
}
@keyframes badge-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}

.upload-status-panel {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
}
.upload-status-panel__row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.upload-status-panel__spinner {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  border-top-color: var(--signal);
  flex: none;
  animation: spin 0.8s linear infinite;
}
.upload-status-panel__text {
  font-size: 13.5px;
  color: var(--ink-dim);
}
.upload-progress-track {
  margin-top: 10px;
  height: 4px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.upload-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--signal);
  border-radius: 999px;
  transition: width 0.2s ease;
}
@keyframes spin { to { transform: rotate(360deg); } }

.upload-status-panel.is-uploading .upload-status-panel__spinner { border-top-color: var(--signal); }

.upload-status-panel.is-processing .upload-progress-fill {
  background: repeating-linear-gradient(
    90deg, var(--signal) 0 16px, transparent 16px 32px
  );
  animation: progress-scan 0.9s linear infinite;
}
@keyframes progress-scan { to { background-position: 32px 0; } }

.upload-status-panel.is-done {
  border-color: rgba(74, 222, 158, 0.35);
}
.upload-status-panel.is-done .upload-status-panel__spinner {
  border: none;
  background: var(--ok);
  animation: none;
  position: relative;
}
.upload-status-panel.is-done .upload-status-panel__spinner::after {
  content: '';
  position: absolute;
  top: 3px; left: 4px;
  width: 5px; height: 8px;
  border-right: 2px solid #0d2018;
  border-bottom: 2px solid #0d2018;
  transform: rotate(45deg);
}
.upload-status-panel.is-done .upload-status-panel__text { color: var(--ok); }
.upload-status-panel.is-done .upload-progress-fill { background: var(--ok); }

.upload-status-panel.is-error { border-color: rgba(255, 93, 93, 0.35); }
.upload-status-panel.is-error .upload-status-panel__spinner {
  border: none;
  background: var(--fault);
  animation: none;
}
.upload-status-panel.is-error .upload-status-panel__text { color: var(--fault); }
.upload-status-panel.is-error .upload-progress-fill { background: var(--fault); }

.step-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.btn {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 15px;
  padding: 13px 26px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-block; 
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s, transform 0.1s;
}
.btn:active { transform: scale(0.98); }

.btn--primary {
  background: var(--signal);
  color: var(--signal-ink);
}
.btn--primary:hover:not(:disabled) { background: var(--signal-hover); }
.btn--primary:disabled { background: var(--surface-raised); color: var(--ink-faint); cursor: not-allowed; }

.btn--ghost {
  background: none;
  border-color: var(--border-strong);
  color: var(--ink-dim);
}
.btn--ghost:hover { border-color: var(--ink-dim); color: var(--ink); }

.success-panel__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ok-dim);
  color: var(--ok);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 18px;
}

.success-panel h2 { font-size: 24px; margin-bottom: 10px; }
.success-panel p { color: var(--ink-dim); max-width: 56ch; margin: 0 0 24px; }

.summary-list {
  display: grid;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin: 0 0 24px;
}
.summary-list > div { display: flex; justify-content: space-between; gap: 16px; }
.summary-list dt { color: var(--ink-faint); font-size: 13.5px; }
.summary-list dd { margin: 0; font-family: var(--font-mono); text-align: right; }

.summary-list--confirm dd { max-width: 60%; word-break: break-word; }

.decode-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 20px;
  text-align: center;
}
.decode-loading__spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--border-strong);
  border-top-color: var(--signal);
  animation: spin 0.8s linear infinite;
}
.decode-loading p { color: var(--ink-dim); max-width: 44ch; }

.decode-error {
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: var(--fault-dim);
  border: 1px solid rgba(255, 93, 93, 0.35);
  color: var(--fault);
  margin-bottom: 20px;
}

.results-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.codes-quicknav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 18px;
  margin-bottom: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.codes-quicknav__label {
  width: 100%;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin: 0 0 2px;
}
.codes-quicknav__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13.5px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.codes-quicknav__chip:hover { border-color: var(--signal); background: var(--surface-hover); }
.codes-quicknav__chip:active { transform: scale(0.96); }
.codes-quicknav__chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--border-strong);
}
.codes-quicknav__chip.is-low .codes-quicknav__chip-dot { background: var(--ok); }
.codes-quicknav__chip.is-medium .codes-quicknav__chip-dot { background: var(--warning); }
.codes-quicknav__chip.is-high .codes-quicknav__chip-dot { background: var(--severity-high); }
.codes-quicknav__chip.is-critical .codes-quicknav__chip-dot { background: var(--fault); }
.codes-quicknav__chip.is-pending .codes-quicknav__chip-dot { background: var(--info); }

@keyframes resultCardHighlightPulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  30% { box-shadow: 0 0 0 3px var(--signal); }
}
.result-card.is-nav-highlighted { animation: resultCardHighlightPulse 1s ease; }

.back-to-top-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s, border-color 0.15s;
  z-index: 40;
}
.back-to-top-btn.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top-btn:hover { border-color: var(--signal); }
.back-to-top-btn svg { width: 18px; height: 18px; }
@media (max-width: 480px) {
  .back-to-top-btn { right: 14px; bottom: 14px; width: 40px; height: 40px; }
}

.result-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 22px;
}
.result-card.is-not-found { opacity: 0.85; }

.result-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 10px;
}
.result-card__code {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 17px;
  white-space: nowrap;
}

.severity-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex: none;
}
.severity-badge.is-low { background: var(--ok-dim); color: var(--ok); }
.severity-badge.is-medium { background: var(--warning-dim); color: var(--warning); }
.severity-badge.is-high { background: var(--severity-high-dim); color: var(--severity-high); }
.severity-badge.is-critical { background: var(--fault-dim); color: var(--fault); }
.severity-badge.is-unknown { background: var(--surface-raised); color: var(--ink-faint); }

.result-card__title { font-size: 18px; margin: 0 0 8px; }
.result-card__description { color: var(--ink-dim); margin: 0 0 16px; line-height: 1.55; }
.result-card__not-found-reason { color: var(--ink-faint); font-size: 14px; margin: 0; }

.pending-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--info-dim);
  color: var(--info);
  white-space: nowrap;
}
.pending-card__text { color: var(--ink-dim); font-size: 14px; line-height: 1.55; margin: 0 0 16px; }
.pending-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-raised);
  overflow: hidden;
}
.pending-progress__fill {
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--info), transparent);
  animation: pending-progress-slide 1.6s ease-in-out infinite;
}
@keyframes pending-progress-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
@media (prefers-reduced-motion: reduce) {
  .pending-progress__fill { animation: none; width: 100%; background: var(--info); opacity: 0.5; }
  .result-card.is-nav-highlighted { animation: none; }
  .back-to-top-btn { transition: opacity 0.2s, visibility 0.2s; }
}

.variants-count-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--ink-dim);
  white-space: nowrap;
  flex: none;
}

.result-variant--multi {
  padding: 4px 0;
}
.result-variant__label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin: 0 0 8px;
  font-weight: 700;
}
.result-variant__head {
  display: none; 
}
.result-variant__head .result-card__title { margin: 0; flex: 1; min-width: 140px; }

.variant-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 10px 0 16px;
}
.variant-meta__item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: help;
}
.variant-meta__label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  font-weight: 700;
}
.result-variant__divider {
  border: none;
  border-top: 1px dashed var(--border-strong);
  margin: 22px 0;
}

.result-block { margin-top: 16px; }
.result-block h4 {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin: 0 0 8px;
}
.result-block ul { margin: 0; padding-left: 20px; color: var(--ink-dim); font-size: 14.5px; line-height: 1.6; }
.result-block ul li { margin-bottom: 4px; }

.part-number { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.part-note { color: var(--ink-dim); font-size: 13.5px; margin: 4px 0 0; }
.part-disclaimer { color: var(--ink-faint); font-size: 12.5px; margin: 8px 0 0; font-style: italic; }

.confidence-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 8px;
  text-transform: none;
}
.confidence-tag.is-high { background: var(--ok-dim); color: var(--ok); }
.confidence-tag.is-medium { background: var(--warning-dim); color: var(--warning); }
.confidence-tag.is-low { background: var(--surface-raised); color: var(--ink-faint); }

.analog-list li { list-style: none; margin-left: -20px; padding-left: 0; }

.related-list { padding-left: 0; }
.related-list li {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.related-list li:last-child { border-bottom: none; }
.related-code {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--ink);
}
.related-code.is-present {
  background: var(--signal-dim);
  color: var(--signal);
}
.related-relation { font-size: 13px; color: var(--ink-dim); }
.related-note { font-size: 13px; color: var(--ink-faint); }

.feedback-block {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.feedback-block__label { font-size: 13.5px; color: var(--ink-dim); }
.feedback-btn {
  font-size: 13px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink-dim);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.feedback-btn:hover { border-color: var(--ink-dim); color: var(--ink); }
.feedback-btn:disabled { opacity: 0.6; cursor: default; }
.feedback-btn.is-selected[data-helpful="1"] { border-color: var(--ok); background: var(--ok-dim); color: var(--ok); }
.feedback-btn.is-selected[data-helpful="0"] { border-color: var(--fault); background: var(--fault-dim); color: var(--fault); }
.feedback-block__status { font-size: 12.5px; color: var(--ink-faint); }

.relation-diagram-wrap {
  margin-bottom: 24px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.relation-diagram-title {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin: 0 0 16px;
}

.diagram-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.diagram-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 22px 12px;
  text-align: center;
}
.diagram-node + .diagram-node { border-top: 1px dashed var(--border); }
.diagram-node__icon {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--signal-dim), var(--surface-raised));
  border: 1px solid var(--border-strong);
  color: var(--signal);
  display: flex;
  align-items: center;
  justify-content: center;
}
.diagram-node__icon svg { width: 27px; height: 27px; }
.diagram-node__label {
  margin: 12px 0 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}
.diagram-node__stem {
  width: 2px;
  height: 20px;
  background: var(--border-strong);
  margin: 2px 0;
}
.diagram-node__codes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 560px;
}
.diagram-code {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 14px;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  min-width: 0;
  max-width: 100%;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.diagram-code:hover { border-color: var(--signal); background: var(--surface-hover); }
.diagram-code__num {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.diagram-code__title {
  font-size: 11px;
  color: var(--ink-faint);
  line-height: 1.4;
  overflow-wrap: break-word;
}

.symptom-analysis { margin-bottom: 24px; }

.overall-conclusion {
  margin-bottom: 24px;
  padding: 22px 26px;
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, var(--surface-raised), var(--surface));
  border: 1.5px solid var(--border-strong);
  border-left-width: 5px;
  border-left-color: var(--signal);
}

.overall-conclusion__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.overall-conclusion__icon {
  color: var(--signal);
  font-size: 18px;
  line-height: 1;
}
.overall-conclusion__head h3 {
  font-size: 19px;
  margin: 0;
  flex: 1;
  min-width: 160px;
}

.overall-conclusion__summary {
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.65;
  margin: 0;
}
.overall-conclusion__priority {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--ink-dim);
  display: flex;
  align-items: center;
  gap: 8px;
}
.symptom-analysis__title { font-size: 19px; margin: 0 0 6px; }

.symptoms-text-quote {
  margin-bottom: 20px;
  padding: 14px 18px;
  border-left: 3px solid var(--border-strong);
  background: var(--surface-raised);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.symptoms-text-quote h4 {
  margin: 0 0 6px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  font-weight: 700;
}
.symptoms-text-quote p { margin: 0; font-size: 14px; color: var(--ink-dim); font-style: italic; line-height: 1.5; }

.wizard-entry {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 28px;
  padding: 22px 24px;
  background: linear-gradient(135deg, var(--signal-dim) 0%, var(--surface-raised) 55%);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--signal);
  border-radius: var(--radius-lg);
}
.wizard-entry--loading { display: block; text-align: center; padding: 20px; }
.wizard-entry__icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--signal);
}
.wizard-entry__icon svg { width: 24px; height: 24px; }
.wizard-entry__body { flex: 1; min-width: 0; }
.wizard-entry__title { margin: 0 0 8px; font-size: 17px; }
.wizard-entry__text { margin: 0 0 16px; font-size: 14px; color: var(--ink-dim); line-height: 1.55; max-width: 60ch; }
@media (max-width: 560px) {
  .wizard-entry { flex-direction: column; align-items: flex-start; padding: 18px; }
  .wizard-entry__title { font-size: 16px; }
}

.wizard-question-card {
  margin-top: 24px;
  padding: 20px 22px;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
}
.wizard-question-card__step {
  margin: 0 0 6px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--signal);
  font-weight: 700;
}
.wizard-question-card h3 { margin: 0 0 16px; font-size: 17px; }
.wizard-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.wizard-option-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.wizard-option-btn:hover:not(:disabled) { border-color: var(--signal); }
.wizard-option-btn:disabled { cursor: default; opacity: 0.5; }
.wizard-option-btn.is-selected { border-color: var(--signal); background: var(--signal-dim); color: var(--signal); }
.wizard-option-btn__box {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--border-strong);
  position: relative;
  transition: border-color 0.15s, background 0.15s;
}
.wizard-option-btn.is-selected .wizard-option-btn__box {
  border-color: var(--signal);
  background: var(--signal);
}
.wizard-option-btn.is-selected .wizard-option-btn__box::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--signal-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.wizard-step-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wizard-step-actions .btn--ghost { border-color: transparent; color: var(--ink-faint); }
.wizard-step-actions .btn--ghost:hover:not(:disabled) { border-color: var(--border-strong); color: var(--ink-dim); }

.wizard-conclusion-card {
  margin-top: 24px;
  padding: 20px 22px;
  background: var(--ok-dim);
  border: 1px solid var(--ok);
  border-radius: var(--radius-md);
}
.wizard-conclusion-card h3 { margin: 0 0 10px; font-size: 16px; color: var(--ok); }
.wizard-conclusion-card p { margin: 0; font-size: 14.5px; color: var(--ink); line-height: 1.55; }

.nice-alert-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}

.nice-alert-overlay[hidden] { display: none; }
.nice-alert {
  max-width: 360px;
  width: 100%;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.nice-alert__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--fault-dim);
  color: var(--fault);
  display: flex;
  align-items: center;
  justify-content: center;
}
.nice-alert__icon svg { width: 24px; height: 24px; }
.nice-alert h3 { margin: 0 0 10px; font-size: 17px; }
.nice-alert p { margin: 0 0 20px; font-size: 14px; color: var(--ink-dim); line-height: 1.5; }
.nice-alert .btn { width: 100%; }

.share-modal { max-width: 440px; text-align: left; }
.share-modal h3 { text-align: center; }
.share-modal p { text-align: center; }
.share-link-row { display: flex; gap: 8px; }
.ai-key-row { display: flex; gap: 8px; align-items: center; }
.ai-key-row .auth-input { flex: 1; }

.model-combobox { position: relative; }
.model-combobox__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  z-index: 30;
}
.model-combobox__item {
  padding: 9px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.model-combobox__item:hover, .model-combobox__item.is-active { background: var(--surface-hover); }
.model-combobox__item-id { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
.model-combobox__item-label { font-size: 12px; color: var(--ink-faint); }

.web-search-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--ink-faint);
  cursor: pointer;
}
.web-search-toggle input[type="checkbox"] { flex: none; }
.share-link-row .auth-input { flex: 1; font-family: var(--font-mono); font-size: 12.5px; }
.share-link-row .btn { width: auto; white-space: nowrap; padding: 10px 16px; font-size: 13px; }

.btn--compact {
  padding: 6px 13px;
  font-size: 12.5px;
  color: var(--ink-faint);
  border-color: transparent;
  background: var(--surface-raised);
}
.btn--compact:hover { color: var(--ink-dim); border-color: var(--border-strong); }

.actions-menu { display: inline-block; margin-bottom: 24px; }

.report-chat {
  margin-top: 28px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.report-chat__title {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
}
.report-chat__messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
  margin-bottom: 14px;
  padding-right: 4px;
}
.chat-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.chat-msg--user {
  align-self: flex-end;
  background: var(--signal-dim);
  color: var(--ink);
  border-bottom-right-radius: 3px;
}
.chat-msg--assistant {
  align-self: flex-start;
  background: var(--surface-raised);
  color: var(--ink-dim);
  border-bottom-left-radius: 3px;
}
.report-chat__form { display: flex; gap: 10px; }
.report-chat__input { flex: 1; }
@media (max-width: 480px) {
  .report-chat__form { flex-direction: column; }
  .chat-msg { max-width: 95%; }
}
.actions-menu__wrap { position: relative; display: inline-block; }
.actions-menu__trigger { display: inline-flex; align-items: center; }
.actions-menu__chevron {
  width: 12px;
  height: 12px;
  margin-left: 5px;
  transition: transform 0.15s;
}
.actions-menu__trigger[aria-expanded="true"] .actions-menu__chevron { transform: rotate(180deg); }
.actions-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 252px;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  padding: 6px;
  z-index: 50;
}

.actions-menu__panel--align-right { left: auto; right: 0; }

.data-table tr.has-open-menu { position: relative; z-index: 10; }
.actions-menu__item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  color: var(--ink);
  font-size: 13.5px;
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s;
}
.actions-menu__item:hover { background: var(--surface-hover); }
.actions-menu__item svg { width: 16px; height: 16px; flex: none; color: var(--ink-faint); }
.actions-menu__divider { height: 1px; background: var(--border); margin: 6px 4px; }
@media (max-width: 480px) {
  
  .actions-menu__panel { left: 0; right: 0; min-width: 0; width: max-content; max-width: calc(100vw - 64px); }
}

.legal-doc__updated {
  color: var(--ink-faint);
  font-size: 13px;
  margin: -8px 0 28px;
}
.legal-doc__toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin-bottom: 36px;
}
.legal-doc__toc h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  margin: 0 0 12px;
}
.legal-doc__toc ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
  columns: 2;
  column-gap: 28px;
}
.legal-doc__toc li { margin-bottom: 6px; break-inside: avoid; }
.legal-doc__toc a { color: var(--ink-dim); font-size: 13.5px; text-decoration: none; }
.legal-doc__toc a:hover { color: var(--signal); }
.legal-doc article { color: var(--ink-dim); font-size: 15px; line-height: 1.7; }
.legal-doc article h2 {
  font-size: 19px;
  color: var(--ink);
  margin: 40px 0 14px;
  padding-top: 8px;
  scroll-margin-top: 20px;
}
.legal-doc article h2:first-of-type { margin-top: 0; }
.legal-doc article h3 {
  font-size: 15.5px;
  color: var(--ink);
  margin: 22px 0 8px;
}
.legal-doc article p { margin: 0 0 14px; }
.legal-doc article ul, .legal-doc article ol { margin: 0 0 14px; padding-left: 24px; }
.legal-doc article li { margin-bottom: 6px; }
.legal-doc article strong { color: var(--ink); font-weight: 600; }
.legal-doc article a { color: var(--signal); }
.legal-doc__placeholder {
  background: var(--warning-dim, var(--surface-raised));
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  color: var(--warning, var(--ink));
  font-family: var(--font-mono);
  font-size: 0.9em;
}
.legal-doc__callout {
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--signal);
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin: 0 0 20px;
  font-size: 14px;
}
@media (max-width: 640px) {
  .legal-doc__toc ul { columns: 1; }
}

.symptom-analysis__disclaimer {
  color: var(--ink-faint);
  font-size: 13.5px;
  font-style: italic;
  margin: 0 0 16px;
}

.symptom-clarify {
  padding: 16px 18px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--ink-dim);
}
.symptom-clarify p { margin: 0; }

.cause-card .result-card__head { justify-content: flex-start; gap: 10px; }

.suggested-codes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
}
.auth-card h1 { font-size: 22px; margin: 0 0 8px; }
.auth-card__hint { color: var(--ink-dim); font-size: 14px; line-height: 1.5; margin: 0 0 22px; }
.auth-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 13px 16px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.02em;
}
.auth-input:focus { border-color: var(--signal); outline: none; }

.user-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.user-bar__brand { display: flex; align-items: center; gap: 10px; margin-right: 10px; }
.user-bar__logo { width: 30px; height: 30px; font-size: 15px; }
.user-bar__title { font-size: 15px; }
.rail__logo-img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.user-bar__nav { display: flex; gap: 4px; flex-wrap: wrap; }

.user-bar__notifications { position: relative; }
.user-bar__theme { position: relative; }
.user-bar__theme-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: none;
  border: 1px solid transparent;
  color: var(--ink-dim);
  cursor: pointer;
}
.user-bar__theme-btn:hover { border-color: var(--border-strong); color: var(--ink); }
.user-bar__theme-btn svg { width: 18px; height: 18px; }
.user-bar__theme-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  z-index: 40;
  padding: 14px;
}
.user-bar__theme-header {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
}
.theme-picker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.theme-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s;
}
.theme-swatch:hover { border-color: var(--border-strong); }
.theme-swatch.is-active { border-color: var(--signal); }
.theme-swatch__preview {
  display: block;
  width: 100%;
  height: 32px;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.theme-swatch__label { font-size: 11px; color: var(--ink-dim); text-align: center; line-height: 1.3; }
.theme-swatch.is-active .theme-swatch__label { color: var(--ink); font-weight: 700; }

.user-bar__bell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: none;
  border: 1px solid transparent;
  color: var(--ink-dim);
  cursor: pointer;
}
.user-bar__bell:hover { border-color: var(--border-strong); color: var(--ink); }
.user-bar__bell svg { width: 18px; height: 18px; }
.user-bar__bell-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--fault);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}
.user-bar__notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  z-index: 40;
  overflow: hidden;
}
.user-bar__notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
}
.user-bar__notif-header button {
  background: none;
  border: none;
  color: var(--signal);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.user-bar__notif-list { max-height: 320px; overflow-y: auto; }
.user-bar__notif-item {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.user-bar__notif-item:last-child { border-bottom: none; }
.user-bar__notif-item.is-unread { background: var(--signal-dim); }
.user-bar__notif-item p { margin: 0 0 4px; font-size: 13px; color: var(--ink); line-height: 1.4; }
.user-bar__notif-item span { font-size: 11px; color: var(--ink-faint); }
.user-bar__notif-empty { padding: 20px 14px; text-align: center; font-size: 13px; color: var(--ink-faint); }
.user-bar__link {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-dim);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.user-bar__link:hover { color: var(--ink); background: var(--surface-hover); }
.user-bar__link.is-active { color: var(--signal); background: var(--signal-dim); }
.user-bar__account { display: flex; align-items: center; gap: 12px; }
.user-bar__label { font-size: 13.5px; color: var(--ink-dim); }
.user-bar__logout {
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
}
.user-bar__logout:hover { border-color: var(--fault); color: var(--fault); }

.page-shell {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 24px 60px;
  
  width: 100%;
  flex: 1;
}
@media (max-width: 860px) {
  .page-shell { padding: 28px 20px 56px; }
}
@media (max-width: 480px) {
  .page-shell { padding: 24px 14px 48px; }
}
.page-shell h1 { font-size: 26px; margin: 0 0 6px; }
.page-shell__subtitle { color: var(--ink-dim); margin: 0 0 28px; }

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.site-footer__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px 28px;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 32px;
}
.site-footer__brand { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.site-footer__brand-row { display: flex; align-items: center; gap: 10px; }
.site-footer__name { font-weight: 700; font-size: 16px; color: var(--ink); }

.site-footer__domain { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); }
.site-footer__tagline { font-size: 13.5px; color: var(--ink-dim); max-width: 320px; margin: 4px 0 0; line-height: 1.5; }
.site-footer__col h3 {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  margin: 0 0 14px;
  font-weight: 600;
}
.site-footer__col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.site-footer__col a { color: var(--ink-dim); font-size: 13.5px; text-decoration: none; }
.site-footer__col a:hover { color: var(--signal); }
.site-footer__col span { color: var(--ink-faint); font-size: 12.5px; line-height: 1.5; }
.site-footer__bottom {
  border-top: 1px solid var(--border);
}
.site-footer__bottom-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink-faint);
}
.site-footer__disclaimer { max-width: 560px; }

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  background: var(--surface-raised);
  border-top: 1px solid var(--border-strong);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
}
.cookie-banner__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-dim);
  max-width: 720px;
}
.cookie-banner__text a { color: var(--signal); }
.cookie-banner__btn { flex-shrink: 0; padding: 10px 26px; }
@media (max-width: 640px) {
  .cookie-banner { flex-direction: column; align-items: stretch; text-align: center; padding: 16px 18px; }
  .cookie-banner__text { max-width: none; }
}
@media (max-width: 720px) {
  .site-footer__inner { grid-template-columns: 1fr; gap: 26px; }
  .site-footer__bottom-inner { flex-direction: column; gap: 8px; }
}

.tab-switcher {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  margin-bottom: 24px;
}
.tab-switcher__btn {
  padding: 9px 20px;
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  color: var(--ink-dim);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tab-switcher__btn:hover:not(.is-active) { color: var(--ink); }
.tab-switcher__btn.is-active { background: var(--signal); color: var(--signal-ink); }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  
  table-layout: fixed;
}
.data-table th, .data-table td {
  overflow: hidden;
  text-overflow: ellipsis;
}
.data-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}
.data-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--ink-dim);
  white-space: nowrap;
}
.data-table tr:hover td { background: var(--surface-hover); }

.data-table--sticky-action.is-scroll-needed td:last-child,
.data-table--sticky-action.is-scroll-needed th:last-child {
  position: sticky;
  right: 0;
  background: var(--bg);
  box-shadow: -8px 0 8px -8px rgba(0,0,0,0.5);
}
.data-table--sticky-action.is-scroll-needed th:last-child { background: var(--bg); }
.data-table--sticky-action.is-scroll-needed tr:hover td:last-child { background: var(--surface-hover); }
.data-table .mono { font-family: var(--font-mono); color: var(--ink); }

.cell-sub { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; white-space: normal; overflow: visible; text-overflow: clip; }

.data-table td .btn { white-space: nowrap; }

.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 28px; }
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.stat-card__value { font-family: var(--font-mono); font-size: 26px; font-weight: 700; color: var(--ink); }
.stat-card__label { font-size: 12.5px; color: var(--ink-faint); margin-top: 4px; }

.admin-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin-bottom: 24px;
}
.admin-section h2 { font-size: 17px; margin: 0 0 16px; }

.pill-badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.pill-badge.is-admin { background: var(--signal-dim); color: var(--signal); }
.pill-badge.is-active { background: var(--ok-dim); color: var(--ok); }
.pill-badge.is-inactive { background: var(--fault-dim); color: var(--fault); }
.pill-badge.is-pending { background: var(--warning-dim); color: var(--warning); }
.pill-badge.is-error { background: var(--fault-dim); color: var(--fault); cursor: help; }

.admin-session-photos { margin-bottom: 20px; }
.admin-session-photos h4 {
  margin: 0 0 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  font-weight: 700;
}
.admin-session-photos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.admin-session-photos__grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  display: block;
  transition: transform 0.15s, border-color 0.15s;
}
.admin-session-photos__grid a:hover img { border-color: var(--signal); transform: scale(1.02); }

.token-reveal {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--ok-dim);
  border: 1px solid rgba(74, 222, 158, 0.35);
}
.token-reveal p { margin: 0 0 8px; font-size: 13px; color: var(--ok); }
.token-reveal code {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  background: var(--bg);
  padding: 10px 12px;
  border-radius: 8px;
  word-break: break-all;
  user-select: all;
}

.refine-block { margin-bottom: 26px; }
.refine-block h3 { font-size: 15.5px; margin: 0 0 14px; }
.refine-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.refine-row:last-child { border-bottom: none; }
.refine-row__text { flex: 1; min-width: 200px; color: var(--ink-dim); font-size: 14px; line-height: 1.5; }
.refine-row__source {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-faint);
}
.refine-select { max-width: 160px; padding: 9px 12px; font-size: 13.5px; }

.catalog-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  align-items: start;
}
.catalog-brands__list {
  max-height: 70vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.catalog-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.catalog-brand-row:last-child { border-bottom: none; }
.catalog-brand-row.is-selected { background: var(--signal-dim); }
.catalog-brand-row__name {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: none;
  border: none;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-align: left;
}
.catalog-brand-row__count { font-size: 11.5px; font-weight: 500; color: var(--ink-faint); }

.catalog-models {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  min-height: 200px;
}
.catalog-models__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.catalog-models__head h2 { font-size: 19px; margin: 0; }
.catalog-models__bulk { display: flex; gap: 8px; }
.catalog-models__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px 16px;
}

.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  flex: none;
}
.toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-switch__slider {
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--border-strong);
  position: relative;
  transition: background 0.15s;
  flex: none;
}
.toggle-switch__slider::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform 0.15s;
}
.toggle-switch input:checked + .toggle-switch__slider { background: var(--ok); }
.toggle-switch input:checked + .toggle-switch__slider::before { transform: translateX(16px); background: #08130d; }
.toggle-switch__label { font-size: 13.5px; color: var(--ink-dim); }
.toggle-switch--labeled { padding: 6px 4px; }

@media (max-width: 720px) {
  .catalog-layout { grid-template-columns: 1fr; }
  .catalog-brands__list { max-height: 40vh; }
}

@media (max-width: 860px) {
  .app {
    grid-template-columns: 1fr;
    
    align-content: start;
  }

  .rail {
    position: static;
    height: auto;
    padding: 16px 12px;
    border-right: none;
    border-bottom: 1px solid var(--border);
    overflow: visible;
    
    min-width: 0;
  }
  .rail__brand { margin-bottom: 14px; padding: 0 8px; }

  
  .rail__steps {
    --mobile-step-w: calc((100vw - 24px) / 3);
    display: flex;
    overflow-x: auto;
    overflow-y: visible;
    gap: 0;
    padding: 6px 0 10px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .rail__steps::before,
  .rail__steps::after {
    content: '';
    flex: 0 0 var(--mobile-step-w);
  }

  .rail__step {
    flex: 0 0 var(--mobile-step-w);
    width: var(--mobile-step-w);
    flex-direction: column;
    align-items: center;
    padding: 0;
    gap: 6px;
    scroll-snap-align: center;
  }

  .rail__step::before {
    left: calc(var(--mobile-step-w) / 2);
    right: auto;
    top: 8px;
    bottom: auto;
    width: var(--mobile-step-w);
    height: 2px;
  }
  .rail__step:last-child::before { display: none; }

  .rail__pin { position: relative; z-index: 1; margin-top: 0; }

  .rail__text { align-items: center; text-align: center; width: 100%; }
  .rail__label { font-size: 11.5px; letter-spacing: 0.01em; line-height: 1.25; padding: 0 4px; }
  
  .rail__label-full { display: block; }
  .rail__label-short { display: none; }
  .rail__value {
    max-width: calc(var(--mobile-step-w) - 6px);
    font-size: 11.5px;
  }

  .panel { padding: 28px 20px 56px; }

  
  .tab-switcher { flex-wrap: wrap; max-width: 100%; }
  .tab-switcher__btn { padding: 9px 14px; font-size: 13px; }

  
  .data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .data-table th, .data-table td { white-space: nowrap; }
}
@media (max-width: 480px) {
  .panel { padding: 24px 14px 48px; }
}
@media (max-width: 480px) {
  .result-card,
  .wizard-question-card,
  .wizard-conclusion-card,
  .relation-diagram-wrap,
  .admin-section {
    padding: 16px 14px;
  }
  .auth-card { padding: 28px 18px; }
}

.print-header { display: none; }

@media print {
  :root {
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-raised: #f6f6f8;
    --surface-hover: #f0f0f2;
    --border: #d9d9de;
    --border-strong: #b7b7c0;
    --ink: #16161a;
    --ink-dim: #45454e;
    --ink-faint: #6e6e78;
    --signal: #c96a12;
    --signal-dim: #fbe6d2;
    --ok: #1f8a5c;
    --ok-dim: #dcf3e8;
    --fault: #c22b2b;
    --fault-dim: #fbdede;
    --severity-high: #c9531f;
    --severity-high-dim: #fbe3d5;
    --info: #1f5fae;
    --info-dim: #dbe9fa;
  }

  body { background: #fff; }

  
  .no-print, .user-bar, .rail, .step-actions, .feedback-block, .site-footer, .cookie-banner,
  #brandSearch, .catalog-layout > .catalog-brands, .data-table button,
  .page-shell__subtitle a, .voice-btn, .upload-zone, .or-divider,
  .provider-select { display: none !important; }

  .app { display: block; }
  .panel, .page-shell { max-width: 100%; padding: 0; margin: 0; }

  .print-header {
    display: block;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--ink);
  }
  .print-header__title { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
  .print-header__meta { font-size: 12px; color: var(--ink-faint); }

  .result-card, .overall-conclusion, .symptom-clarify, .cause-card,
  .relation-diagram-wrap {
    break-inside: avoid;
    box-shadow: none !important;
  }

  a { color: var(--ink); text-decoration: none; }

  .print-footer {
    display: block;
    margin-top: 24px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 10.5px;
    color: var(--ink-faint);
  }
}
.print-footer { display: none; }