.app-shell {
  position: relative;
  min-height: 100vh;
  padding: 22px 24px 22px;
  overflow: hidden;
}

.app-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(7, 28, 45, 0.62), rgba(13, 39, 62, 0.42)),
    url("../img/crane-badge.jpg") center center / cover no-repeat;
  transform: scale(1.02);
  z-index: 0;
}

.app-shell::after {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(100, 207, 255, 0.10), transparent 20%),
    radial-gradient(circle at 82% 12%, rgba(255, 196, 77, 0.08), transparent 18%);
  pointer-events: none;
  z-index: 0;
}

.ambient { position: fixed; border-radius: 999px; filter: blur(80px); opacity: 0.28; pointer-events: none; }
.ambient-a { top: 40px; left: 3%; width: 240px; height: 240px; background: rgba(70, 183, 216, 0.44); }
.ambient-b { top: 90px; right: 6%; width: 280px; height: 280px; background: rgba(47, 120, 212, 0.34); }
.ambient-c { bottom: 12%; right: 32%; width: 300px; height: 300px; background: rgba(33, 171, 127, 0.2); }

.hero-shell { position: relative; z-index: 5; max-width: 1820px; margin: 0 auto 20px; min-height: 116px; border-radius: 28px; overflow: visible; box-shadow: var(--shadow-lg); border: 1px solid rgba(202,223,240,0.92); background: linear-gradient(160deg, rgba(245,251,255,0.92), rgba(231,242,252,0.88)); }
.hero-media,
.hero-scrim { display: none; }
.hero-overlay { position: relative; min-height: 116px; padding: 18px 22px 16px; display: flex; justify-content: space-between; gap: 18px; align-items: center; overflow: visible; }
.hero-copy { position: relative; display: flex; flex-direction: column; justify-content: center; max-width: 620px; color: var(--text-0); padding: 0; margin: 0; border-radius: 0; overflow: visible; background: transparent; border: none; box-shadow: none; z-index: 1; }
.hero-copy .eyebrow { margin-bottom: 6px; color: #6e88a4; font-size: 11px; letter-spacing: 0.14em; }
.hero-copy h1 { margin: 0 0 8px; font-size: clamp(20px, 2vw, 26px); line-height: 1.06; font-weight: 800; letter-spacing: 0.01em; color: var(--text-0); }
.subline { margin: 0; max-width: 620px; color: var(--text-2); font-size: 13px; line-height: 1.55; }

.hero-status-grid { margin-left: auto; align-self: center; display: grid; align-content: start; gap: 10px; width: min(1080px, 100%); grid-template-columns: minmax(0, 2.15fr) minmax(390px, 1fr); }
.meta-chip { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 999px; background: rgba(255,255,255,0.76); border: 1px solid var(--line); box-shadow: var(--shadow-md); backdrop-filter: blur(16px); }
.spotlight-chip { background: rgba(247, 251, 255, 0.9); border: 1px solid rgba(199, 222, 241, 0.56); }
.meta-chip strong { display: block; font-size: 13px; color: var(--text-0); line-height: 1.2; }
.meta-chip small { display: block; color: var(--text-2); font-size: 11px; line-height: 1.2; }
.meta-icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(47,120,212,0.12); color: var(--primary); flex: none; font-size: 14px; }
.meta-icon.ok { background: rgba(33,171,127,0.16); position: relative; }
.meta-icon.ok::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 7px rgba(33,171,127,0.12); }
.account-button { margin-left: auto; min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,0.86); color: var(--text-0); font-size: 12px; font-weight: 700; }
.info-chip { padding: 8px 12px; align-items: center; }
.info-chip .meta-icon { margin-top: 2px; }
.chip-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; flex: 1; min-width: 0; }
.merged-metrics { grid-template-columns: minmax(220px, 2.2fr) minmax(120px, 1.06fr) minmax(58px, 0.56fr) minmax(76px, 0.74fr) minmax(70px, 0.68fr) minmax(62px, 0.62fr); column-gap: 4px; }
.merged-info-chip { min-height: 60px; }
.chip-field { min-width: 0; }
.chip-label { display: block; margin-bottom: 3px; color: var(--text-2); font-size: 10px; line-height: 1.05; }
.chip-field strong { font-size: 11px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.merged-info-chip #vehicleVin { font-size: 11px; letter-spacing: -0.01em; }
.location-stack { position: relative; }
.location-fallback.hidden { display: none; }
.location-fallback {
  position: absolute;
  top: calc(100% + 8px);
  left: 18px;
  right: 18px;
  z-index: 20;
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 22px;
  background: rgba(247, 251, 255, 0.96);
  border: 1px solid rgba(199, 222, 241, 0.72);
  box-shadow: 0 18px 34px rgba(39, 86, 129, 0.18);
  backdrop-filter: blur(18px);
}
.location-fallback-label { color: var(--text-2); font-size: 11px; line-height: 1.2; }
.location-fallback-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
.location-fallback select { min-height: 38px; border-radius: 12px; border: 1px solid rgba(195, 214, 229, 0.92); background: rgba(255,255,255,0.96); padding: 0 10px; color: #17324d; }
.mini-ghost-button, .mini-primary-button { min-height: 36px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.mini-ghost-button { border: 1px solid rgba(195, 214, 229, 0.92); background: rgba(255,255,255,0.82); color: #17324d; }
.mini-primary-button { border: none; background: linear-gradient(180deg, #58b0ef, #2f78d4); color: #fff; }
.status-chip { position: relative; min-height: 60px; padding: 8px 18px 8px 12px; gap: 12px; border-radius: 999px; }
.status-section { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.status-section > div { min-width: 0; }
.account-section { padding: 6px 12px 6px 14px; border-left: 1px solid rgba(199, 222, 241, 0.72); border-radius: 999px; background: linear-gradient(160deg, rgba(236,244,252,0.92), rgba(228,239,249,0.78)); }
.status-chip .status-section:first-child { flex: 1.15; }
.status-chip strong { font-size: 12px; line-height: 1.15; }
.status-chip small { font-size: 10px; line-height: 1.1; }
.status-chip #liveClock { font-size: 14px; white-space: nowrap; }
.status-chip .status-section:first-child small,
.status-chip .account-section small { display: none; }

.dashboard-grid { position: relative; z-index: 2; max-width: 1600px; margin: 0 auto; height: calc(100vh - 168px); display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 14px; }
.column { min-height: 0; overflow: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: #bfd2e4 transparent; }
.right-column { overflow: hidden; }

.panel { position: relative; margin-bottom: 16px; background: var(--panel); border: 1px solid rgba(202,223,240,0.92); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); backdrop-filter: blur(18px); overflow: hidden; }
.panel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.34), transparent 38%); pointer-events: none; }
.panel > * { position: relative; }
.panel-head, .conversation-top { display: flex; justify-content: space-between; gap: 10px; padding: 14px 16px 0; }
.panel-head h2, .conversation-top h2 { margin: 0; font-size: 18px; font-weight: 800; }
.panel-tag { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; background: rgba(47,120,212,0.1); color: var(--primary); font-size: 12px; font-weight: 700; }
.panel-head-analysis { align-items: start; }
.analysis-head-meta { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.fault-pill { display: grid; gap: 3px; min-width: 260px; max-width: 420px; padding: 9px 14px; border-radius: 18px; background: linear-gradient(160deg, rgba(247,252,255,0.98), rgba(236,245,253,0.94)); border: 1px solid rgba(205,223,237,0.9); }
.fault-pill span { color: var(--text-2); font-size: 11px; line-height: 1.2; }
.fault-pill strong { color: var(--text-0); font-size: 13px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.hero-card, .property-list, .timeline, .channel-cards, .risk-grid, .recommend-grid, .history-list, .quick-actions, .conversation-stream, .composer { padding: 14px 16px 16px; }
.health-home-body { padding: 14px 16px 18px; display: grid; gap: 14px; }
.health-home-score-card { padding: 18px 20px; border-radius: var(--radius-lg); border: 1px solid rgba(209,226,239,0.9); background: linear-gradient(160deg, rgba(247,252,255,0.98), rgba(235,244,252,0.94)); display: grid; gap: 10px; }
.health-home-score-card strong { font-size: 56px; color: var(--primary-strong); line-height: 1; }
.health-home-score-card p { margin: 0; color: var(--text-1); font-size: 15px; line-height: 1.7; max-width: 520px; }
.health-home-score-card.tone-excellent { border-color: rgba(33,171,127,0.35); background: linear-gradient(160deg, rgba(243,253,248,0.98), rgba(233,249,241,0.94)); }
.health-home-score-card.tone-excellent strong { color: #168561; }
.health-home-score-card.tone-good { border-color: rgba(72,142,222,0.34); background: linear-gradient(160deg, rgba(243,248,255,0.98), rgba(232,242,253,0.94)); }
.health-home-score-card.tone-good strong { color: #2c69ba; }
.health-home-score-card.tone-fair { border-color: rgba(244,162,89,0.34); background: linear-gradient(160deg, rgba(255,249,241,0.98), rgba(252,242,232,0.94)); }
.health-home-score-card.tone-fair strong { color: #b86412; }
.health-home-score-card.tone-poor { border-color: rgba(236,124,73,0.34); background: linear-gradient(160deg, rgba(255,246,241,0.98), rgba(252,238,231,0.94)); }
.health-home-score-card.tone-poor strong { color: #b55216; }
.health-home-score-card.tone-bad { border-color: rgba(231,93,93,0.34); background: linear-gradient(160deg, rgba(255,244,244,0.98), rgba(253,235,235,0.94)); }
.health-home-score-card.tone-bad strong { color: #b04141; }
.health-home-actions { display: flex; justify-content: flex-start; }
.health-home-note { margin: -2px 0 0; color: var(--text-2); font-size: 13px; line-height: 1.7; }
.health-detail-button { min-width: 180px; min-height: 44px; font-weight: 700; }
.health-body { padding: 14px 16px 16px; display: grid; gap: 12px; }
.health-summary-grid { display: grid; grid-template-columns: minmax(220px, 0.9fr) minmax(0, 2.1fr); gap: 12px; }
.health-overview-card, .health-context-card, .health-subsystem-card, .health-alert-card, .health-trend-card { background: rgba(255,255,255,0.82); border: 1px solid rgba(209,226,239,0.9); border-radius: var(--radius-lg); }
.health-overview-card { padding: 16px; display: grid; gap: 8px; align-content: center; background: linear-gradient(160deg, rgba(247,252,255,0.98), rgba(235,244,252,0.94)); }
.health-caption { color: var(--text-2); font-size: 12px; }
.health-overview-card strong { font-size: 34px; color: var(--primary-strong); line-height: 1; }
.health-overview-card p { margin: 0; color: var(--text-1); font-size: 13px; line-height: 1.55; }
.health-context-card { padding: 16px; }
.health-context-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
.health-context-item { min-width: 0; }
.health-context-item span { display: block; margin-bottom: 4px; color: var(--text-2); font-size: 11px; }
.health-context-item strong { display: block; font-size: 13px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subsystem-health-grid, .health-alert-list, .health-trend-list { display: grid; gap: 12px; }
.subsystem-health-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.health-subsystem-card { padding: 14px 16px; }
.health-subsystem-card.band-excellent, .health-subsystem-card.band-green { border-color: rgba(125, 212, 173, 0.9); background: linear-gradient(180deg, rgba(247,255,252,0.96), rgba(239,251,246,0.92)); }
.health-subsystem-card.band-good, .health-subsystem-card.band-yellow { border-color: rgba(92, 151, 220, 0.92); background: linear-gradient(180deg, rgba(244,249,255,0.98), rgba(233,242,253,0.92)); }
.health-subsystem-card.band-fair, .health-subsystem-card.band-orange { border-color: rgba(235, 150, 77, 0.95); background: linear-gradient(180deg, rgba(255,247,239,0.98), rgba(255,238,224,0.92)); }
.health-subsystem-card.band-poor, .health-subsystem-card.band-red { border-color: rgba(236, 124, 73, 0.95); background: linear-gradient(180deg, rgba(255,246,241,0.98), rgba(252,238,231,0.92)); }
.health-subsystem-card.band-bad { border-color: rgba(227, 107, 107, 0.95); background: linear-gradient(180deg, rgba(255,244,244,0.98), rgba(255,232,232,0.92)); }
.health-subsystem-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.health-subsystem-head h3 { margin: 0; font-size: 15px; font-weight: 800; }
.health-subsystem-head span { color: var(--primary-strong); font-size: 15px; font-weight: 800; }
.health-subsystem-card.band-excellent .health-subsystem-head span, .health-subsystem-card.band-green .health-subsystem-head span { color: #168561; }
.health-subsystem-card.band-good .health-subsystem-head span, .health-subsystem-card.band-yellow .health-subsystem-head span { color: #2c69ba; }
.health-subsystem-card.band-fair .health-subsystem-head span, .health-subsystem-card.band-orange .health-subsystem-head span { color: #b45f14; }
.health-subsystem-card.band-poor .health-subsystem-head span, .health-subsystem-card.band-red .health-subsystem-head span { color: #b55216; }
.health-subsystem-card.band-bad .health-subsystem-head span { color: #b04141; }
.health-subsystem-card p { margin: 0; color: var(--text-2); font-size: 12px; line-height: 1.6; }
.health-alert-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.health-alert-card { padding: 14px 16px; display: grid; gap: 8px; }
.health-alert-head { display: flex; justify-content: space-between; gap: 10px; }
.health-alert-head strong { font-size: 14px; }
.health-alert-head span { font-size: 12px; color: var(--primary-strong); font-weight: 700; }
.health-alert-card p, .health-alert-card small { margin: 0; color: var(--text-2); line-height: 1.6; }
.health-trend-list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.health-trend-card { padding: 12px 10px; display: grid; gap: 4px; text-align: center; }
.health-trend-card span { color: var(--text-2); font-size: 11px; }
.health-trend-card strong { font-size: 16px; color: var(--text-0); }
.health-trend-card small { color: var(--text-2); font-size: 11px; }
.health-metric-table-wrap { border: 1px solid rgba(209,226,239,0.9); border-radius: var(--radius-lg); background: rgba(255,255,255,0.82); overflow: hidden; }
.health-metric-table { width: 100%; border-collapse: collapse; }
.health-metric-table thead { background: rgba(238,246,253,0.98); }
.health-metric-table th, .health-metric-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid rgba(219,231,241,0.9); vertical-align: top; font-size: 13px; }
.health-metric-table tbody tr:last-child td { border-bottom: none; }
.health-metric-table td strong { display: block; margin-bottom: 4px; font-size: 13px; }
.health-metric-table td small { display: block; color: var(--text-2); line-height: 1.45; }
.health-metric-status { display: inline-flex; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.health-metric-status.normal { background: rgba(33,171,127,0.12); color: #14835f; }
.health-metric-status.attention { background: rgba(255,196,77,0.16); color: #9a6a00; }
.health-metric-status.risk { background: rgba(231,93,93,0.12); color: #b04141; }
.health-stream-pill { min-width: 260px; }
.ui-hidden { display: none !important; }
.detail-shell { position: relative; z-index: 2; max-width: 1820px; margin: 0 auto; display: grid; gap: 16px; }
.detail-shell-tight { gap: 14px; }
.detail-hero-panel { padding: 18px 22px 16px; border-radius: 28px; background: linear-gradient(160deg, rgba(245,251,255,0.92), rgba(231,242,252,0.88)); border: 1px solid rgba(202,223,240,0.92); box-shadow: var(--shadow-lg); display: grid; gap: 14px; }
.detail-hero-top { display: flex; justify-content: space-between; gap: 18px; align-items: center; }
.detail-hero-top-inline { align-items: flex-start; }
.detail-hero-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: end; }
.detail-header-copy h1 { margin: 0 0 8px; font-size: 30px; }
.detail-header-copy p { margin: 0; color: var(--text-2); line-height: 1.6; }
.detail-head-meta { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; align-items: stretch; }
.detail-head-meta-compact { flex-wrap: nowrap; }
.detail-meta-card-status strong { font-size: 22px; }
.health-header-copy { max-width: none; }
.health-panel-title { margin: 0; font-size: 22px; font-weight: 800; color: var(--text-0); }
.detail-meta-card { min-width: 160px; padding: 10px 14px; border-radius: 18px; border: 1px solid rgba(209,226,239,0.9); background: rgba(255,255,255,0.82); }
.detail-meta-card span { display: block; margin-bottom: 6px; color: var(--text-2); font-size: 11px; }
.detail-meta-card strong { display: block; font-size: 30px; color: var(--text-0); line-height: 1.1; }
.detail-hero-match { display: grid; gap: 10px; }
.detail-hero-actions { align-self: center; display: flex; gap: 10px; justify-content: flex-end; }
.detail-panel { padding: 16px 18px; }
.detail-panel-compact { padding: 14px 16px; }
.match-strip { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(320px, 1fr); gap: 10px; align-items: center; }
.match-strip-3 { grid-template-columns: minmax(220px, 0.9fr) minmax(360px, 1.4fr) minmax(160px, 0.6fr); }
.match-strip-compact { grid-template-columns: minmax(240px, 0.95fr) minmax(180px, 0.55fr) minmax(180px, 0.55fr); }
.detail-toolbar { display: grid; grid-template-columns: max-content max-content max-content max-content; gap: 10px; align-items: center; justify-content: start; }
.detail-toolbar-inline { grid-template-columns: max-content max-content max-content max-content max-content max-content; justify-content: end; }
.detail-toolbar-actions { display: flex; gap: 10px; justify-content: flex-start; }
.match-segment { padding: 8px 12px; border-radius: 16px; border: 1px solid rgba(209,226,239,0.9); background: rgba(255,255,255,0.82); min-height: 58px; display: flex; flex-direction: column; justify-content: center; }
.match-segment span { display: block; margin-bottom: 4px; color: var(--text-2); font-size: 10px; }
.match-segment strong { display: block; font-size: 13px; line-height: 1.35; color: var(--text-1); }
.match-segment.match-vin { min-width: 240px; }
.detail-toolbar > .match-segment:nth-child(2),
.detail-toolbar-inline > .match-segment:nth-child(2) { min-width: 120px; }
.detail-toolbar > .match-segment:nth-child(3),
.detail-toolbar-inline > .match-segment:nth-child(3) { min-width: 180px; }
.compact-segment { min-height: 52px; padding: 6px 10px; }
.compact-segment strong { font-size: 12px; }
.compact-meta-card { min-width: 140px; padding: 8px 12px; }
.compact-meta-card strong { font-size: 22px; }
.compact-button { min-width: 120px; min-height: 40px; }
.hierarchy-tree { display: grid; gap: 12px; }
.hierarchy-node { padding: 10px 14px; border-radius: 20px; border: 1px solid rgba(209,226,239,0.9); background: rgba(255,255,255,0.82); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); }
.hierarchy-node.level-0 { background: linear-gradient(160deg, rgba(247,252,255,0.98), rgba(235,244,252,0.94)); }
.hierarchy-node.level-1 { margin-left: 0; }
.hierarchy-node.level-2 { margin-left: 0; }
.hierarchy-node.level-3 { margin-left: 0; }
.hierarchy-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 6px; }
.hierarchy-head strong { font-size: 14px; }
.hierarchy-score-cluster { display: flex; align-items: center; gap: 10px; }
.hierarchy-score { font-size: 20px; font-weight: 800; color: var(--primary-strong); line-height: 1; }
.hierarchy-grade { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.grade-excellent { background: rgba(33,171,127,0.14); color: #14835f; }
.grade-good { background: rgba(72,142,222,0.14); color: #2c69ba; }
.grade-fair { background: rgba(244,162,89,0.16); color: #b86412; }
.grade-poor { background: rgba(236,124,73,0.18); color: #b55216; }
.grade-bad { background: rgba(231,93,93,0.14); color: #b04141; }
.hierarchy-note { margin: 0; color: var(--text-2); font-size: 11px; line-height: 1.45; }
.hierarchy-node.tone-excellent { border-color: rgba(33,171,127,0.35); background: linear-gradient(160deg, rgba(243,253,248,0.98), rgba(233,249,241,0.94)); }
.hierarchy-node.tone-good { border-color: rgba(72,142,222,0.32); background: linear-gradient(160deg, rgba(243,248,255,0.98), rgba(232,242,253,0.94)); }
.hierarchy-node.tone-fair { border-color: rgba(244,162,89,0.32); background: linear-gradient(160deg, rgba(255,249,241,0.98), rgba(252,242,232,0.94)); }
.hierarchy-node.tone-poor { border-color: rgba(236,124,73,0.32); background: linear-gradient(160deg, rgba(255,246,241,0.98), rgba(252,238,231,0.94)); }
.hierarchy-node.tone-bad { border-color: rgba(231,93,93,0.34); background: linear-gradient(160deg, rgba(255,244,244,0.98), rgba(253,235,235,0.94)); }
.hierarchy-node.level-0 > .hierarchy-tree { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.hierarchy-node.level-1 .hierarchy-note { display: none; }
.hierarchy-alerts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hierarchy-alert-chip { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; background: rgba(244, 162, 89, 0.16); color: #9c5510; font-size: 11px; font-weight: 700; }
.summary-chip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.summary-chip { padding: 14px 16px; border-radius: 20px; border: 1px solid rgba(209,226,239,0.9); background: rgba(255,255,255,0.82); }
.summary-chip span { display: block; margin-bottom: 6px; color: var(--text-2); font-size: 11px; }
.summary-chip strong { display: block; font-size: 18px; }
.detail-section-title { margin: 0 0 10px; font-size: 17px; font-weight: 800; }
.detail-section-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 12px; }
.detail-section-meta { color: var(--text-2); font-size: 12px; }
.metric-group-list { display: grid; gap: 10px; }
.metric-group-card { padding: 10px 12px; border-radius: 20px; border: 1px solid rgba(209,226,239,0.9); background: linear-gradient(160deg, rgba(247,252,255,0.98), rgba(237,245,253,0.94)); }
.metric-group-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 8px; }
.metric-group-head h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--text-0); }
.metric-group-head span { color: var(--text-2); font-size: 12px; font-weight: 700; }
.metric-scenario-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.metric-scenario-card { padding: 10px; border-radius: 18px; border: 1px solid rgba(209,226,239,0.9); background: rgba(255,255,255,0.88); }
.metric-scenario-head { margin-bottom: 8px; }
.metric-scenario-head strong { font-size: 13px; font-weight: 800; color: var(--text-0); }
.metric-pill-grid { display: grid; gap: 6px; }
.metric-pill { padding: 5px 7px; border-radius: 10px; border: 1px solid rgba(209,226,239,0.86); background: rgba(244,249,253,0.92); }
.metric-pill-head { display: grid; grid-template-columns: auto max-content; gap: 6px; align-items: center; }
.metric-pill-head span { color: var(--text-2); font-size: 9px; line-height: 1.15; }
.metric-pill-head strong { font-size: 11px; font-weight: 800; color: var(--text-0); line-height: 1.1; text-align: right; }
.metric-pill-foot { margin-top: 3px; display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.metric-pill-foot small { color: var(--text-2); font-size: 9px; font-weight: 700; }
.metric-pill-foot em { font-style: normal; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 999px; }
.metric-pill-foot .chip-normal { background: rgba(33,171,127,0.12); color: #14835f; }
.metric-pill-foot .chip-attention { background: rgba(244,162,89,0.16); color: #b86412; }
.metric-pill-foot .chip-risk { background: rgba(231,93,93,0.12); color: #b04141; }
.metric-pill.tone-excellent { border-color: rgba(33,171,127,0.28); background: rgba(243,253,248,0.92); }
.metric-pill.tone-good { border-color: rgba(72,142,222,0.28); background: rgba(243,248,255,0.92); }
.metric-pill.tone-fair { border-color: rgba(244,162,89,0.3); background: rgba(255,249,241,0.92); }
.metric-pill.tone-poor { border-color: rgba(236,124,73,0.3); background: rgba(255,246,241,0.92); }
.metric-pill.tone-bad { border-color: rgba(231,93,93,0.3); background: rgba(255,244,244,0.92); }
.detail-card-list { display: grid; gap: 12px; }
.detail-anomaly-card { padding: 14px 16px; border-radius: 20px; border: 1px solid rgba(209,226,239,0.9); background: rgba(255,255,255,0.82); }
.detail-anomaly-card strong { display: block; margin-bottom: 8px; font-size: 15px; }
.detail-anomaly-card p, .detail-anomaly-card small { margin: 0; color: var(--text-2); line-height: 1.6; }
.detail-anomaly-card small { display: block; margin-top: 8px; }
.detail-empty { padding: 18px 20px; border-radius: 20px; border: 1px dashed rgba(182, 207, 227, 0.9); color: var(--text-2); background: rgba(255,255,255,0.66); }
.metric-compact-wrap { margin-top: 6px; }
.health-metric-table-compact th,
.health-metric-table-compact td { padding: 10px 12px; font-size: 12px; }
.health-metric-table-compact td strong { font-size: 12px; }
.health-metric-table-compact td small { font-size: 11px; line-height: 1.4; }
.hero-card { display: flex; justify-content: space-between; gap: 16px; background: linear-gradient(150deg, rgba(245,251,255,0.98), rgba(233,243,252,0.92)); border: 1px solid rgba(206,223,236,0.9); border-radius: var(--radius-lg); }
.hero-label { margin: 0 0 6px; color: var(--text-2); font-size: 12px; }
.hero-card h3 { margin: 0 0 10px; font-size: 30px; font-weight: 800; }
.hero-fault-primary { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.3; color: var(--text-1); }
.hero-fault { margin: 0; max-width: 380px; line-height: 1.65; color: var(--text-1); }
.hero-score { min-width: 120px; text-align: center; padding: 10px 14px; border-radius: 22px; background: rgba(47,120,212,0.08); }
.hero-score span { display: block; color: var(--text-2); font-size: 11px; margin-bottom: 6px; }
.hero-score strong { font-size: 36px; color: var(--primary-strong); }

.property-list, .timeline, .channel-cards, .risk-grid, .recommend-grid, .history-list { display: grid; gap: 12px; }
.property-list { padding-top: 0; }
.property-card, .timeline li, .channel-card, .risk-card, .recommend-card, .history-item { background: rgba(255,255,255,0.82); border: 1px solid rgba(209,226,239,0.9); border-radius: var(--radius-lg); }
.property-card { padding: 14px 16px; }
.property-card span { display: block; color: var(--text-2); font-size: 12px; margin-bottom: 6px; }
.property-card strong { display: block; line-height: 1.55; font-size: 15px; }
.property-card.split { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }

.timeline { list-style: none; margin: 0; }
.timeline li { position: relative; padding: 14px 16px 14px 44px; }
.timeline li::before { content: attr(data-step); position: absolute; left: 14px; top: 14px; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(33,171,127,0.14); color: var(--green); font-size: 11px; font-weight: 800; }
.timeline strong { display: block; margin-bottom: 6px; }
.timeline p, .channel-card p, .risk-card p, .recommend-card p, .history-item p { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.65; }

.channel-card, .risk-card, .recommend-card, .history-item { padding: 16px; }
.channel-card strong, .risk-card h3, .recommend-card h3, .history-item h3 { display: block; margin: 0 0 8px; font-size: 16px; font-weight: 800; }
.empty-text { color: var(--text-2); }
.risk-card-head, .history-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.risk-score { color: var(--primary-strong); font-size: 16px; font-weight: 800; }
.progress-track { height: 7px; border-radius: 999px; background: rgba(210,226,240,0.92); overflow: hidden; margin-bottom: 8px; }
.progress-track span { display: block; height: 100%; border-radius: inherit; }
.progress-track .risk-progress-fill { background: linear-gradient(90deg, #58b0ef, #1f63c7); box-shadow: 0 0 10px rgba(47,120,212,0.25); }
.progress-band.progress-green { background: linear-gradient(90deg, #4dbf94, #21ab7f); }
.progress-band.progress-yellow { background: linear-gradient(90deg, #f0cd5f, #d4a72c); }
.progress-band.progress-orange { background: linear-gradient(90deg, #f4a259, #e57c23); }
.progress-band.progress-red { background: linear-gradient(90deg, #ef6b6b, #d64747); }
.recommend-meta, .history-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.recommend-meta span, .history-meta span { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; background: rgba(47,120,212,0.08); color: var(--primary); font-size: 12px; font-weight: 700; }

.conversation-panel { height: 100%; display: flex; flex-direction: column; margin-bottom: 0; }
.conversation-title-wrap { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.conversation-actions { display: flex; gap: 8px; flex: none; }
.ghost-button { min-height: 38px; padding: 0 14px; border: 1px solid var(--line); background: rgba(255,255,255,0.76); color: var(--text-0); border-radius: 16px; }
.quick-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; min-width: 0; }
.quick-actions button { padding: 7px 10px; border: 1px solid rgba(205,223,237,0.9); background: linear-gradient(160deg, rgba(247,252,255,0.98), rgba(236,245,253,0.94)); color: var(--text-1); font-size: 11px; font-weight: 700; line-height: 1.3; border-radius: var(--radius-md); }

.conversation-stream { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 6px; padding-bottom: 8px; }
.bubble { max-width: 92%; padding: 12px 14px; line-height: 1.65; font-size: 13px; white-space: pre-wrap; word-break: break-word; box-shadow: 0 10px 28px rgba(55,98,140,0.08); border-radius: var(--radius-lg); animation: bubble-in 0.24s ease-out; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.bubble.assistant, .bubble.system { align-self: flex-start; background: linear-gradient(160deg, rgba(246,251,255,0.98), rgba(235,244,252,0.94)); border: 1px solid rgba(198,219,234,0.92); }
.bubble.user { align-self: flex-end; background: linear-gradient(160deg, var(--primary), var(--primary-strong)); color: #fff; }
.bubble.error { align-self: flex-start; background: linear-gradient(160deg, rgba(255,247,247,0.98), rgba(255,238,238,0.95)); border: 1px solid rgba(232,181,181,0.9); color: #8c4141; }
.bubble-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; font-weight: 800; }
.bubble.user .bubble-head { color: rgba(255,255,255,0.82); }
.vin-candidate-list { display: grid; gap: 8px; margin-top: 10px; }
.vin-candidate-button { width: 100%; padding: 9px 12px; border: 1px solid rgba(179, 208, 229, 0.95); border-radius: 14px; background: rgba(255,255,255,0.86); color: var(--text-0); font-size: 12px; font-weight: 700; line-height: 1.4; text-align: left; cursor: pointer; }
.vin-candidate-button:hover { border-color: rgba(47,120,212,0.55); background: rgba(241,248,255,0.96); }
.flow-choice-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.flow-choice-button { min-height: 34px; padding: 7px 12px; border: 1px solid rgba(96,151,204,0.38); border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(235,246,255,0.94)); color: var(--text-0); font-size: 12px; font-weight: 800; cursor: pointer; }
.flow-choice-button:hover { border-color: rgba(47,120,212,0.62); transform: translateY(-1px); }
.flow-choice-button.secondary { background: rgba(255,255,255,0.72); color: var(--text-1); }
.flow-choice-button.selected { background: linear-gradient(180deg, #58b0ef, #2f78d4); color: #fff; border-color: transparent; }
.flow-choice-button:disabled { cursor: not-allowed; opacity: 0.72; transform: none; }
.repair-step-media { margin: 12px 0 4px; padding: 8px; border: 1px solid rgba(190,215,232,0.86); border-radius: 16px; background: rgba(255,255,255,0.72); }
.repair-step-media img { display: block; width: 100%; max-width: min(720px, 100%); max-height: 34vh; margin: 0 auto; object-fit: contain; border-radius: 12px; }
.repair-step-media figcaption { margin-top: 6px; color: var(--text-1); font-size: 11px; font-weight: 700; text-align: center; }

.composer { padding-top: 8px; border-top: 1px solid rgba(208,224,237,0.88); }
.composer-row { display: grid; grid-template-columns: minmax(0, 1fr) 108px; gap: 10px; align-items: stretch; }
.composer textarea { width: 100%; resize: none; border: 1px solid var(--line); border-radius: 18px; padding: 10px 12px; min-height: 68px; color: var(--text-0); background: rgba(255,255,255,0.92); outline: none; }
.send-button { min-width: 96px; min-height: 68px; border: none; border-radius: 18px; background: linear-gradient(180deg, #58b0ef, #2f78d4); color: #fff; font-weight: 800; box-shadow: 0 16px 26px rgba(47,120,212,0.26); }
.send-button:disabled, .ghost-button:disabled, .quick-actions button:disabled { cursor: not-allowed; opacity: 0.56; }

.auth-modal.hidden { display: none; }
.auth-modal { position: fixed; inset: 0; z-index: 20; }
.auth-backdrop { position: absolute; inset: 0; background: rgba(17, 34, 54, 0.42); backdrop-filter: blur(8px); }
.auth-dialog { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 32px)); padding: 22px; border-radius: 28px; background: rgba(255,255,255,0.94); border: 1px solid rgba(198, 219, 234, 0.92); box-shadow: 0 30px 70px rgba(31, 67, 104, 0.2); }
.auth-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.auth-head h2 { margin: 0 0 8px; }
.auth-head p { margin: 0; color: var(--text-2); line-height: 1.6; }
.auth-form { display: grid; gap: 14px; }
.field { display: grid; gap: 8px; }
.field span { font-size: 13px; font-weight: 700; color: var(--text-1); }
.field input, .field select { width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: 16px; padding: 0 14px; background: rgba(255,255,255,0.9); color: var(--text-0); }
.login-preview { min-height: 92px; padding: 14px 16px; border-radius: 20px; background: linear-gradient(160deg, rgba(245,251,255,0.98), rgba(233,243,252,0.92)); border: 1px solid rgba(206,223,236,0.9); color: var(--text-1); line-height: 1.6; }
.login-preview strong { display: block; margin-bottom: 6px; }
.auth-actions { display: flex; justify-content: space-between; gap: 12px; }

body.detail-page {
  overflow: auto;
}

body.detail-page .app-shell {
  overflow: visible;
  min-height: auto;
  padding-bottom: 28px;
}

@media (max-width: 1280px) {
  body { overflow: auto; }
  .hero-overlay { flex-direction: column; align-items: stretch; }
  .hero-status-grid { width: 100%; grid-template-columns: minmax(0, 1fr); margin-left: 0; }
  .merged-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .status-chip { width: 100%; }
  .dashboard-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); height: calc(100vh - 196px); }
  .conversation-panel { height: 100%; }
}

@media (max-width: 980px) {
  .app-shell { padding: 16px 14px 20px; }
  .hero-overlay, .hero-status-grid, .panel-head, .auth-head, .auth-actions { flex-direction: column; align-items: stretch; }
  .hero-shell { min-height: 180px; }
  .hero-overlay { min-height: 180px; padding: 14px 14px 12px; }
  .hero-copy h1 { font-size: 24px; }
  .subline { font-size: 11px; }
  .hero-status-grid { display: grid; grid-template-columns: 1fr; width: 100%; }
  .meta-chip { min-width: 0; }
  .chip-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .location-fallback { left: 12px; right: 12px; }
  .dashboard-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); height: calc(100vh - 186px); gap: 12px; }
  .conversation-top { flex-direction: column; align-items: stretch; }
  .conversation-title-wrap { flex-direction: column; align-items: stretch; }
  .analysis-head-meta { justify-content: flex-start; }
  .fault-pill { min-width: 0; max-width: none; }
  .health-summary-grid,
  .subsystem-health-grid,
  .health-alert-list,
  .health-trend-list,
  .health-context-grid,
  .detail-grid-2,
  .summary-chip-grid,
  .match-strip { grid-template-columns: 1fr; }
  .match-strip-3 { grid-template-columns: 1fr; }
  .detail-toolbar,
  .detail-toolbar-inline { grid-template-columns: 1fr 1fr; }
  .match-segment.match-vin,
  .detail-toolbar > .match-segment:nth-child(2),
  .detail-toolbar > .match-segment:nth-child(3),
  .detail-toolbar-inline > .match-segment:nth-child(2),
  .detail-toolbar-inline > .match-segment:nth-child(3) { min-width: 0; }
  .metric-matrix-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .metric-scenario-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-hero-top,
  .detail-hero-bottom { grid-template-columns: 1fr; flex-direction: column; align-items: stretch; display: grid; }
  .detail-head-meta { justify-content: flex-start; }
  .detail-head-meta-compact { flex-wrap: wrap; }
  .hierarchy-node.level-0 > .hierarchy-tree { grid-template-columns: 1fr; }
  .conversation-panel { height: 100%; }
}

@media (max-width: 720px) {
  .chip-metrics { grid-template-columns: 1fr; gap: 8px; }
  .info-chip { border-radius: 26px; }
  .merged-metrics { grid-template-columns: 1fr; }
  .status-chip { flex-direction: column; align-items: stretch; border-radius: 26px; }
  .account-section { padding-left: 0; border-left: none; padding-top: 8px; border-top: 1px solid rgba(199, 222, 241, 0.72); }
  .location-fallback-row { grid-template-columns: 1fr; }
  .composer-row { grid-template-columns: 1fr; }
  .send-button { min-height: 44px; }
  .dashboard-grid { grid-template-columns: 1fr; height: auto; }
  .right-column { grid-column: 1 / -1; overflow: auto; }
  .detail-section-head { flex-direction: column; align-items: flex-start; }
  .detail-toolbar,
  .detail-toolbar-inline { grid-template-columns: 1fr; }
  .metric-matrix-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-scenario-grid { grid-template-columns: 1fr; }
  .hierarchy-score-cluster { flex-direction: column; align-items: flex-end; gap: 6px; }
}