:root {
  --navy-0: #030b1c;
  --navy-1: #06162f;
  --navy-2: #0a2348;
  --navy-3: #113762;
  --ink: #071a34;
  --muted: #71829d;
  --line: rgba(133, 183, 239, .22);
  --line-strong: rgba(116, 198, 255, .46);
  --cyan: #61ddff;
  --blue: #58a9ff;
  --violet: #a993ff;
  --amber: #ffc86a;
  --green: #75edc3;
  --paper: #f6faff;
  --paper-2: #eaf3fb;
  --shadow: 0 18px 55px rgba(0, 9, 28, .32);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: "Microsoft YaHei", "Noto Sans CJK SC", "PingFang SC", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--navy-0); }
body { margin: 0; min-width: 320px; min-height: 100vh; color: #f6fbff; background: var(--navy-0); font-size: 18px; }
button, input, select { font: inherit; }
button { border: 0; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(97, 221, 255, .78); outline-offset: 2px; }
input, select { min-height: 46px; }
p, h1, h2, h3, h4 { margin: 0; }
small { font-size: 15px; }
.hidden { display: none !important; }

.app-shell { position: relative; min-height: 100vh; overflow: hidden; background: radial-gradient(circle at 15% 10%, rgba(39, 114, 190, .18), transparent 32%), linear-gradient(145deg, #061b3b 0%, #04112a 49%, #020916 100%); }
.ambient, .ambient-grid, .scan-line { position: fixed; pointer-events: none; z-index: 0; }
.ambient { border-radius: 50%; filter: blur(10px); opacity: .5; }
.ambient-one { width: 42vw; height: 42vw; left: -18vw; top: 18vh; background: radial-gradient(circle, rgba(24, 156, 239, .18), transparent 70%); }
.ambient-two { width: 46vw; height: 46vw; right: -22vw; top: -15vh; background: radial-gradient(circle, rgba(106, 71, 255, .15), transparent 70%); }
.ambient-grid { inset: 0; opacity: .14; background-image: linear-gradient(rgba(135, 210, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(135, 210, 255, .12) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.95), transparent 78%); }
.scan-line { left: 0; right: 0; top: -20%; height: 2px; background: linear-gradient(90deg, transparent, rgba(102, 221, 255, .7), transparent); box-shadow: 0 0 24px rgba(102, 221, 255, .7); animation: scan 10s linear infinite; opacity: .44; }
@keyframes scan { to { transform: translateY(125vh); } }

.site-header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; max-width: 1440px; margin: 0 auto; padding: 24px 42px 12px; }
.brand-button { display: inline-flex; align-items: center; gap: 12px; padding: 0; color: #effaff; background: transparent; text-align: left; }
.brand-button strong { display: block; font-size: 18px; letter-spacing: .12em; }
.brand-button small { display: block; margin-top: 3px; color: #8aa4c4; font-size: 11px; letter-spacing: .16em; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(97, 221, 255, .7); border-radius: 10px; color: var(--cyan); font-size: 26px; box-shadow: 0 0 26px rgba(65, 194, 255, .22) inset; }
.service-chip { display: flex; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; color: #a4bedc; font-size: 14px; background: rgba(4, 20, 47, .56); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px currentColor; }
.service-chip.ready .status-dot { color: var(--green); background: var(--green); }
.service-chip.error .status-dot { color: #ff8e91; background: #ff8e91; }

.site-main { position: relative; z-index: 1; }
.home-view { max-width: 1280px; min-height: calc(100vh - 86px); margin: 0 auto; padding: 7vh 38px 42px; }
.hero-copy { max-width: 820px; }
.eyebrow, .panel-kicker, .toolbar-kicker, .card-index { color: #79a4cf; font-size: 12px; letter-spacing: .22em; }
.hero-copy h1 { margin-top: 18px; font-size: clamp(46px, 5.3vw, 78px); line-height: 1.12; letter-spacing: .06em; font-weight: 650; text-shadow: 0 10px 34px rgba(75, 179, 255, .18); }
.hero-copy h1 span { color: #b9d7f7; font-weight: 350; }
.hero-lede { max-width: 650px; margin-top: 24px; color: #9bb5d3; font-size: 19px; line-height: 1.8; }
.hero-rule { display: flex; align-items: center; gap: 8px; width: 220px; margin: 27px 0 42px; }
.hero-rule span { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(97,221,255,0), rgba(97,221,255,.7)); }
.hero-rule span:last-child { background: linear-gradient(90deg, rgba(97,221,255,.7), rgba(97,221,255,0)); }
.hero-rule i { width: 7px; height: 7px; border: 1px solid var(--cyan); border-radius: 50%; box-shadow: 0 0 14px var(--cyan); }

.feature-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.feature-card { position: relative; min-height: 178px; padding: 25px 26px; overflow: hidden; border: 1px solid rgba(140, 196, 243, .2); border-radius: 18px; color: #eef9ff; text-align: left; background: linear-gradient(135deg, rgba(15, 46, 91, .82), rgba(3, 17, 40, .8)); box-shadow: 0 14px 38px rgba(0, 0, 0, .18), inset 0 0 28px rgba(118, 201, 255, .035); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.feature-card:nth-child(-n+3) { grid-column: span 2; }
.feature-card:nth-child(n+4) { grid-column: span 3; }
.feature-card::before { position: absolute; inset: 0; content: ""; background: linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,.055), rgba(255,255,255,0)); transform: translateX(-100%); transition: transform .55s ease; }
.feature-card:hover, .feature-card:focus-visible { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 20px 44px rgba(0, 0, 0, .28), 0 0 28px rgba(83, 194, 255, .11); }
.feature-card:hover::before, .feature-card:focus-visible::before { transform: translateX(100%); }
.feature-card .card-index { position: relative; display: block; color: #7198be; font-size: 11px; }
.card-icon { position: absolute; right: 26px; top: 20px; color: var(--blue); font-size: 38px; font-weight: 200; opacity: .88; }
.feature-card strong { position: relative; display: block; margin-top: 26px; font-size: 26px; letter-spacing: .08em; }
.feature-card small { position: relative; display: block; max-width: 88%; margin-top: 12px; color: #9fb9d4; line-height: 1.6; }
.card-arrow { position: absolute; right: 26px; bottom: 22px; color: #8acfff; font-size: 24px; }
.feature-card-cyan .card-icon { color: var(--cyan); }
.feature-card-violet .card-icon { color: var(--violet); }
.feature-card-amber .card-icon { color: var(--amber); }
.feature-card-green .card-icon { color: var(--green); }
.home-footer { display: flex; align-items: center; gap: 16px; margin-top: 32px; color: #6f8eaf; font-size: 13px; letter-spacing: .1em; }
.footer-line { width: 70px; height: 1px; background: rgba(112, 177, 224, .5); }

.feature-view { max-width: 1320px; margin: 0 auto; padding: 22px 34px calc(58px + var(--safe-bottom)); }
.feature-toolbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; margin-bottom: 22px; }
.back-button { justify-self: start; min-height: 46px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; color: #b8d5ef; background: rgba(10, 33, 67, .72); }
.back-button span { margin-right: 7px; font-size: 22px; }
.toolbar-kicker { text-align: center; font-size: 11px; }
.feature-toolbar h2 { margin-top: 5px; color: #f2fbff; text-align: center; font-size: 32px; letter-spacing: .08em; }
.toolbar-coordinates { justify-self: end; color: #91acc9; font-size: 14px; }
.feature-page { min-width: 0; }
.section-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(560px, 100%); margin-bottom: 18px; padding: 4px; border: 1px solid var(--line); border-radius: 11px; background: rgba(4, 18, 42, .72); }
.section-tab { min-height: 46px; border-radius: 8px; color: #91aac4; background: transparent; font-weight: 600; }
.section-tab.active { color: #05224a; background: linear-gradient(120deg, #7fe4ff, #b4dfff); box-shadow: 0 0 20px rgba(97, 221, 255, .25); }
.map-card, .chart-card, .diagnosis-card, .calendar-panel, .station-picker, .context-banner, .agent-chat-card, .inference-form-card, .job-card, .data-hero { border: 1px solid var(--line); border-radius: 16px; background: rgba(238, 248, 255, .97); box-shadow: var(--shadow); }
.map-card, .chart-card, .diagnosis-card, .calendar-panel, .station-picker, .agent-chat-card, .job-card { color: var(--ink); }
.map-card { padding: 20px; }
.map-card-head, .chart-card-head, .diagnosis-head, .calendar-head, .job-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.map-card-head h3, .chart-card-head h3, .diagnosis-head h3, .calendar-head strong, .job-head h3 { margin-top: 5px; font-size: 25px; letter-spacing: .05em; }
.map-range, .chart-record-label { color: #5d7591; font-size: 14px; white-space: nowrap; }
.geo-map { position: relative; height: 430px; margin-top: 17px; overflow: hidden; border: 1px solid rgba(72, 132, 181, .42); border-radius: 12px; background-color: #dcecf5; background-image: linear-gradient(rgba(41, 113, 151, .17) 1px, transparent 1px), linear-gradient(90deg, rgba(41, 113, 151, .17) 1px, transparent 1px), radial-gradient(circle at 58% 37%, rgba(66, 174, 211, .33), transparent 40%), linear-gradient(145deg, #c9e8ef, #eff6f4 57%, #c1dce4); background-size: 10% 20%, 10% 20%, 100% 100%, 100% 100%; }
.geo-map::after { position: absolute; inset: 6px; pointer-events: none; content: ""; border: 1px solid rgba(31, 103, 145, .55); border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.42); }
.geo-map.leaflet-ready { background-image: linear-gradient(rgba(41, 113, 151, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(41, 113, 151, .08) 1px, transparent 1px); background-size: 10% 20%; }
.geo-map .map-loading { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px 14px; border-radius: 999px; color: #315b78; background: rgba(255,255,255,.84); font-size: 14px; }
.geo-map.ready .map-loading { display: none; }
.geo-map .leaflet-container { z-index: 1; font-family: inherit; background: transparent; }
.geo-map .leaflet-control-attribution { font-size: 10px; }
.geo-map .leaflet-tile-pane { opacity: .72; filter: saturate(.7) contrast(.9); }
.geo-map .leaflet-marker-icon { filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.geo-map.map-tiles-failed .leaflet-tile-pane { opacity: 0; }
.fallback-marker { position: absolute; z-index: 2; width: 30px; height: 30px; transform: translate(-50%, -50%); border: 3px solid #fff; border-radius: 50%; color: #07244a; background: #36a4d1; box-shadow: 0 3px 9px rgba(0,0,0,.35), 0 0 0 6px rgba(53, 164, 209, .22); }
.fallback-marker::after { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; transform: translate(-50%, -50%); content: ""; border-radius: 50%; background: #fff; }
.fallback-marker:hover, .fallback-marker:focus-visible { background: #1c70b5; box-shadow: 0 3px 12px rgba(0,0,0,.4), 0 0 0 10px rgba(53, 164, 209, .25); }
.fallback-marker.selected-marker { z-index: 4; border-color: #083c75; background: var(--amber); box-shadow: 0 3px 9px rgba(0,0,0,.35), 0 0 0 8px rgba(255, 200, 106, .28); }
.fallback-marker.selected-marker::after { background: #083c75; }
.map-axis { position: absolute; z-index: 1; color: rgba(23, 69, 94, .72); font: 12px/1.2 Arial, sans-serif; pointer-events: none; }
.map-axis.north { top: 10px; left: 12px; }
.map-axis.south { bottom: 10px; left: 12px; }
.map-axis.west { left: 12px; bottom: 28px; }
.map-axis.east { right: 12px; bottom: 28px; }
.map-hint { margin: 12px 3px 0; color: #5d7792; font-size: 14px; line-height: 1.5; }
.location-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 17px 20px; border: 1px solid rgba(123, 178, 220, .32); border-radius: 14px; color: var(--ink); background: var(--paper); box-shadow: 0 10px 30px rgba(0, 15, 40, .16); }
.location-bar strong { display: inline-block; margin: 5px 12px 0 0; font-size: 23px; }
.location-coords { color: #56728f; font-size: 15px; }
.panel-kicker { display: block; color: #6385a6; font-size: 11px; letter-spacing: .18em; }

.primary-button, .secondary-button, .ghost-button, .icon-button { min-height: 46px; border-radius: 9px; font-weight: 650; }
.primary-button { padding: 9px 18px; color: #03274c; background: linear-gradient(120deg, #7ae4ff, #b2dfff); box-shadow: 0 8px 20px rgba(41, 136, 190, .2); }
.primary-button:disabled { cursor: not-allowed; color: #93a8bc; background: #d5e0e8; box-shadow: none; }
.secondary-button { padding: 8px 16px; color: #0b436b; border: 1px solid #86b5d8; background: #eaf6ff; }
.ghost-button { padding: 8px 16px; color: #476781; border: 1px solid #a9bfd0; background: #f8fbfd; }
.compact-button { white-space: nowrap; }
.icon-button { width: 46px; color: #1b527b; border: 1px solid #9bbbd2; background: #f4fbff; font-size: 25px; }

.calendar-panel { margin-top: 16px; padding: 20px; }
.calendar-head { align-items: center; }
.calendar-head strong { display: block; }
.calendar-head small { display: block; margin-top: 5px; color: #6c8198; }
.month-actions { display: flex; gap: 8px; }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; }
.calendar-weekdays { margin-top: 20px; color: #71869a; font-size: 14px; text-align: center; }
.calendar-grid { margin-top: 7px; }
.calendar-day { min-height: 46px; border: 1px solid transparent; border-radius: 8px; color: #4d667e; background: #f1f6fa; font-size: 16px; }
.calendar-day.duct { color: #005b9c; border-color: #75c2ef; background: #d8f0ff; font-weight: 750; }
.calendar-day.no-duct { color: #3d6074; background: #f3f8fa; }
.calendar-day.selected { color: #fff; border-color: #0b6ea8; background: #147fc0; box-shadow: 0 0 0 3px rgba(20, 127, 192, .18); }
.calendar-day.no-data, .calendar-day.empty { cursor: default; color: #b6c2cb; background: #edf1f4; }
.calendar-day:not(.no-data):not(.empty):hover { border-color: #1d9bdb; }
.time-picker { margin-top: 18px; padding: 14px; border: 1px solid #b8cede; border-radius: 10px; background: #f5fbff; }
.time-picker-head { display: flex; align-items: center; justify-content: space-between; color: #315975; font-weight: 700; }
.time-picker-head small { color: #6e8295; }
.time-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 10px; }
.time-button { min-height: 46px; border: 1px solid #8dc1df; border-radius: 8px; color: #075589; background: #e6f6ff; font-weight: 700; }
.time-button.no-duct { border-color: #b9cbd4; color: #56717e; background: #f5f9fb; }
.calendar-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 17px; }

.chart-card { margin-top: 16px; padding: 20px; }
.chart-card-head { align-items: center; }
.chart-record-label { overflow-wrap: anywhere; text-align: right; }
.profile-chart { min-height: 440px; margin-top: 12px; overflow: hidden; border: 1px solid #b7ccdb; border-radius: 10px; background: #f7fbfe; }
.profile-chart svg { display: block; width: 100%; height: 440px; }
.chart-placeholder { display: grid; place-items: center; min-height: 440px; color: #71869b; font-size: 16px; }
.chart-grid-line { stroke: #d2e0e8; stroke-width: 1; stroke-dasharray: 3 4; }
.chart-axis { stroke: #637c8d; stroke-width: 1.2; }
.chart-axis-text { fill: #223e52; font-size: 13px; font-family: Arial, sans-serif; }
.chart-axis-title { fill: #102c40; font-size: 14px; font-weight: 700; font-family: inherit; }
.chart-legend-text { fill: #132f45; font-size: 14px; font-family: inherit; }
.contract-message { margin-top: 10px; padding: 10px 12px; border-radius: 8px; color: #9b2f2f; background: #fff0f0; font-size: 14px; }

.diagnosis-card { margin-top: 16px; padding: 20px; }
.diagnosis-head { align-items: center; }
.diagnosis-head h3 { font-size: 26px; }
.duct-badge { padding: 7px 12px; border-radius: 999px; color: #47657d; background: #e6eef3; font-size: 14px; font-weight: 700; white-space: nowrap; }
.duct-badge.active { color: #06654f; background: #d8f6eb; }
.duct-badge.inactive { color: #536d7c; background: #e8f1f5; }
.diagnosis-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-top: 18px; }
.diagnosis-item { padding: 13px 15px; border: 1px solid #cad9e3; border-radius: 10px; background: #f7fbfd; }
.diagnosis-item span { display: block; color: #6a8296; font-size: 14px; }
.diagnosis-item strong { display: block; margin-top: 4px; color: #102f48; font-size: 20px; }
.empty-state { grid-column: 1 / -1; padding: 18px; color: #70879b; text-align: center; }
.diag-agent-box { margin-top: 20px; padding-top: 18px; border-top: 1px solid #d3e0e8; }
.diag-agent-head { display: flex; align-items: baseline; justify-content: space-between; color: #264e68; font-weight: 750; }
.diag-agent-head small { color: #73899b; font-size: 13px; font-weight: 400; }
.diag-quick-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.diag-quick-row button { min-height: 42px; padding: 6px 12px; border: 1px solid #a8cadf; border-radius: 8px; color: #135a82; background: #edf8ff; font-size: 15px; }
.inline-input, .agent-input-row { display: flex; gap: 9px; margin-top: 12px; }
.inline-input input, .agent-input-row input { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid #a9c3d4; border-radius: 8px; color: #143149; background: #fff; }
.inline-input button { min-width: 68px; border-radius: 8px; color: #fff; background: #196ba3; }
.diag-answer { margin: 12px 0 0; padding: 12px; border-left: 3px solid #2b9fd0; color: #31536a; background: #edf7fb; line-height: 1.65; white-space: pre-wrap; }

.station-picker { margin-top: 16px; padding: 20px; }
.station-picker h3 { margin-top: 5px; color: #143953; font-size: 23px; }
.source-choice-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.source-choice-row button { min-height: 82px; padding: 12px 14px; border: 1px solid #9dc2da; border-radius: 10px; color: #174b6a; background: #eef8ff; text-align: left; }
.source-choice-row button:hover { border-color: #148bc5; background: #e2f4ff; }
.source-choice-row strong, .source-choice-row span { display: block; }
.source-choice-row span { margin-top: 5px; color: #718a9c; font-size: 14px; }

.context-banner { display: flex; align-items: center; gap: 14px; padding: 15px 18px; color: var(--ink); }
.context-banner .panel-kicker { flex: 0 0 auto; }
.context-banner strong { font-size: 18px; }
.context-banner small { color: #6e8396; }
.agent-quick-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.agent-quick-grid button { min-height: 58px; padding: 10px; border: 1px solid rgba(102, 191, 229, .52); border-radius: 10px; color: #124b6d; background: linear-gradient(135deg, #e8f8ff, #f7fbff); font-size: 16px; font-weight: 700; }
.agent-quick-grid button:hover { border-color: #1593c8; transform: translateY(-1px); }
.agent-profile-picker { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 14px; border: 1px solid #a9cadc; border-radius: 10px; color: #24506d; background: #eef8fc; }
.agent-profile-picker label { font-weight: 700; }
.agent-profile-picker select { min-width: 190px; padding: 6px 10px; border: 1px solid #a6c2d2; border-radius: 8px; color: #173c55; background: #fff; }
.agent-chat-card { margin-top: 16px; padding: 18px; }
.agent-chat-feed { min-height: 370px; max-height: 590px; overflow-y: auto; padding: 4px; }
.agent-message { display: flex; margin: 12px 0; }
.agent-message.user { justify-content: flex-end; }
.agent-bubble { max-width: min(82%, 780px); padding: 12px 15px; border-radius: 13px; line-height: 1.7; white-space: pre-wrap; }
.agent-message.ai .agent-bubble { border: 1px solid #c3d7e3; color: #224b64; background: #f1f8fb; }
.agent-message.user .agent-bubble { color: #fff; background: #12689d; }
.agent-time { display: block; margin-top: 4px; color: rgba(50, 90, 113, .7); font-size: 12px; }
.agent-message.user .agent-time { color: rgba(255,255,255,.72); }
.agent-input-row { padding-top: 14px; border-top: 1px solid #d0dee6; }
.agent-input-row input { min-height: 50px; }
.agent-input-row .primary-button { min-width: 82px; }

.innovation-hero, .data-hero { position: relative; overflow: hidden; padding: 30px; color: #eef8ff; background: linear-gradient(125deg, rgba(19, 71, 123, .93), rgba(7, 26, 61, .97)); }
.innovation-hero::after, .data-hero::after { position: absolute; right: -8%; top: -120%; width: 46%; height: 340%; transform: rotate(24deg); content: ""; background: linear-gradient(90deg, transparent, rgba(111, 218, 255, .12), transparent); }
.innovation-hero strong { display: block; margin-top: 8px; color: #effaff; font-size: clamp(25px, 3.2vw, 42px); letter-spacing: .06em; }
.innovation-hero small { display: block; margin-top: 18px; color: #abd3ee; font-size: 17px; }
.innovation-divider { display: block; width: 150px; height: 1px; margin-top: 18px; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
.large-section-title { margin: 28px 0 14px; color: #eef9ff; font-size: 27px; letter-spacing: .08em; }
.innovation-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.innovation-cards article { position: relative; min-height: 190px; padding: 22px 22px 22px 76px; border: 1px solid var(--line); border-radius: 14px; color: #dcecff; background: linear-gradient(135deg, rgba(14, 48, 92, .9), rgba(7, 23, 53, .92)); }
.innovation-cards article > span { position: absolute; left: 22px; top: 21px; color: var(--cyan); font: 700 24px/1 Arial, sans-serif; }
.innovation-cards h4 { font-size: 21px; color: #f2fbff; }
.innovation-cards p { margin-top: 14px; color: #a9c2dc; font-size: 16px; line-height: 1.75; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.metric-card { min-height: 168px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: rgba(11, 39, 79, .88); }
.metric-card > span { display: block; color: #9fbadb; font-size: 16px; }
.metric-card > div { display: flex; align-items: center; gap: 11px; margin-top: 25px; }
.metric-card strong { color: #eef8ff; font: 700 clamp(22px, 2.3vw, 31px)/1 Arial, sans-serif; }
.metric-card strong.metric-up { color: var(--cyan); }
.metric-card i { color: #7194b7; font-style: normal; font-size: 23px; }
.metric-card small { display: block; margin-top: 21px; color: #86a4c3; font-size: 14px; line-height: 1.5; }
.metric-card.highlight { border-color: rgba(111, 222, 255, .55); box-shadow: 0 0 28px rgba(74, 195, 255, .13) inset; }

.inference-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .85fr); gap: 16px; }
.inference-map-card { min-width: 0; }
.inference-form-card { align-self: start; padding: 22px; color: var(--ink); }
.inference-form-card h3 { margin-top: 5px; font-size: 25px; }
.inference-form-card label { display: block; margin-top: 17px; color: #56738b; font-size: 15px; font-weight: 700; }
.inference-form-card input { display: block; width: 100%; margin-top: 7px; padding: 8px 11px; border: 1px solid #a8c2d2; border-radius: 8px; color: #16344b; background: #fbfdff; }
.inference-form-card fieldset { margin: 18px 0 0; padding: 0; border: 0; }
.inference-form-card legend { color: #56738b; font-size: 15px; font-weight: 700; }
.time-choice { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.time-choice button { min-height: 46px; border: 1px solid #9fc3d9; border-radius: 8px; color: #1b5a7b; background: #eff9fe; font-weight: 750; }
.time-choice button.active { color: #fff; border-color: #126fa4; background: #1b80b9; }
.full-button { width: 100%; margin-top: 17px; }
.form-message { margin-top: 14px; padding: 10px 11px; border-radius: 8px; color: #9a3b35; background: #fff0ed; font-size: 14px; line-height: 1.5; }
.amber-banner { border-color: rgba(255, 200, 106, .46); }
.job-card { margin-top: 16px; padding: 20px; }
.job-head { align-items: center; }
.job-head h3 { font-size: 23px; }
.job-head > strong { color: #0b6c9b; font: 700 30px/1 Arial, sans-serif; }
.progress-track { height: 12px; margin-top: 18px; overflow: hidden; border-radius: 999px; background: #dce8ee; }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #42b6e2, #6e7cff); transition: width .25s ease; }
.job-stages { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; margin-top: 18px; }
.job-stage { padding: 9px 5px; border: 1px solid #ccdae3; border-radius: 8px; color: #7890a0; background: #f5f9fb; font-size: 13px; text-align: center; }
.job-stage.active { color: #0a628b; border-color: #74c4e3; background: #e1f7ff; font-weight: 750; }
.job-stage.done { color: #18735c; border-color: #98dcc8; background: #e8f8f2; }
.job-meta { margin-top: 14px; color: #60798c; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.job-result { margin-top: 18px; padding-top: 17px; border-top: 1px solid #d3e0e8; }
.job-result h4 { color: #183e55; font-size: 20px; }
.job-result p { margin-top: 9px; color: #4f6f82; line-height: 1.6; }
.compact-result-chart { min-height: 360px; margin-top: 15px; }
.compact-result-chart svg { height: 360px; }

.data-hero { border-color: rgba(102, 222, 255, .3); }
.data-hero h3 { margin-top: 8px; font-size: clamp(25px, 3vw, 38px); }
.data-hero p { margin-top: 13px; color: #a6c6df; line-height: 1.7; }
.data-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.data-stats-grid article { min-height: 157px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: rgba(13, 43, 82, .9); }
.data-stats-grid strong { display: block; color: var(--cyan); font: 700 clamp(26px, 3vw, 42px)/1 Arial, sans-serif; }
.data-stats-grid span { display: block; margin-top: 16px; color: #ebf7ff; font-weight: 700; }
.data-stats-grid small { display: block; margin-top: 7px; color: #91adca; line-height: 1.5; }
.data-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.data-facts > div { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 13px; color: #c5d9ee; background: rgba(6, 28, 60, .72); }
.fact-mark { flex: 0 0 auto; color: var(--cyan); font: 700 16px/1 Arial, sans-serif; }
.data-facts p { line-height: 1.7; }
.data-facts strong { color: #effaff; }

.toast { position: fixed; z-index: 20; left: 50%; bottom: calc(30px + var(--safe-bottom)); transform: translateX(-50%); max-width: min(90vw, 560px); padding: 12px 17px; border: 1px solid rgba(113, 222, 255, .5); border-radius: 999px; color: #eefaff; background: rgba(4, 24, 52, .94); box-shadow: 0 12px 35px rgba(0,0,0,.32); font-size: 15px; text-align: center; }

@media (max-width: 1050px) {
  .home-view { padding-top: 5vh; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .data-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  body { font-size: 16px; }
  .site-header { padding: 18px 20px 8px; }
  .brand-button strong { font-size: 16px; }
  .brand-button small { font-size: 9px; }
  .service-chip { padding: 7px 10px; font-size: 13px; }
  .home-view { padding: 6vh 20px calc(30px + var(--safe-bottom)); }
  .hero-copy h1 { font-size: clamp(40px, 10vw, 62px); }
  .hero-lede { font-size: 17px; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .feature-card:nth-child(-n+4), .feature-card:nth-child(5) { grid-column: auto; }
  .feature-card:nth-child(5) { grid-column: 1 / -1; }
  .feature-card { min-height: 155px; padding: 20px 18px; border-radius: 14px; }
  .feature-card strong { margin-top: 23px; font-size: 21px; }
  .feature-card small { font-size: 14px; }
  .card-icon { right: 16px; top: 17px; font-size: 30px; }
  .card-arrow { right: 16px; bottom: 16px; font-size: 20px; }
  .home-footer { flex-wrap: wrap; gap: 9px; font-size: 12px; }
  .feature-view { padding: 16px 15px calc(42px + var(--safe-bottom)); }
  .feature-toolbar { grid-template-columns: auto 1fr; gap: 11px; }
  .feature-toolbar > div { min-width: 0; }
  .feature-toolbar h2 { font-size: 25px; text-align: left; }
  .toolbar-kicker { text-align: left; }
  .toolbar-coordinates { grid-column: 2; justify-self: start; font-size: 13px; }
  .back-button { grid-row: 1 / span 2; align-self: start; }
  .map-card, .chart-card, .diagnosis-card, .calendar-panel, .station-picker, .inference-form-card, .job-card { padding: 15px; border-radius: 13px; }
  .map-card-head h3, .chart-card-head h3, .diagnosis-head h3, .calendar-head strong { font-size: 21px; }
  .map-card-head, .chart-card-head, .diagnosis-head, .calendar-head, .job-head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .map-range, .chart-record-label { font-size: 12px; white-space: normal; text-align: right; }
  .map-range, .chart-record-label { text-align: left; }
  .geo-map { height: 350px; }
  .location-bar { align-items: flex-start; padding: 14px; }
  .location-bar strong { display: block; margin-right: 0; font-size: 20px; }
  .location-coords { font-size: 14px; }
  .calendar-day { min-height: 42px; font-size: 15px; }
  .profile-chart, .profile-chart svg { min-height: 370px; height: 370px; }
  .chart-placeholder { min-height: 370px; padding: 20px; text-align: center; }
  .diagnosis-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .diagnosis-item { padding: 11px; }
  .diagnosis-item strong { font-size: 18px; }
  .diag-agent-head { gap: 10px; }
  .diag-agent-head small { font-size: 12px; }
  .source-choice-row { gap: 8px; }
  .context-banner { align-items: flex-start; flex-wrap: wrap; gap: 7px 10px; }
  .context-banner small { flex-basis: 100%; font-size: 13px; }
  .agent-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-quick-grid button { min-height: 52px; font-size: 15px; }
  .agent-chat-feed { min-height: 320px; }
  .agent-profile-picker { align-items: stretch; flex-direction: column; }
  .agent-profile-picker select { width: 100%; }
  .innovation-hero, .data-hero { padding: 22px 18px; }
  .innovation-cards { grid-template-columns: 1fr; }
  .innovation-cards article { min-height: auto; padding: 20px 18px 20px 64px; }
  .innovation-cards p { font-size: 15px; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric-card { min-height: 145px; }
  .inference-layout { grid-template-columns: 1fr; }
  .inference-map-card .geo-map { height: 320px; }
  .job-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .data-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .data-stats-grid article { min-height: 142px; padding: 15px; }
  .data-stats-grid strong { font-size: 30px; }
  .data-stats-grid span { margin-top: 12px; font-size: 15px; }
  .data-stats-grid small { font-size: 13px; }
  .data-facts { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .site-header { padding-left: 14px; padding-right: 14px; }
  .brand-mark { width: 32px; height: 32px; }
  .brand-button strong { font-size: 14px; letter-spacing: .08em; }
  .brand-button small { display: none; }
  .service-chip { max-width: 145px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .home-view { padding-left: 14px; padding-right: 14px; }
  .hero-copy h1 { font-size: 39px; letter-spacing: .02em; }
  .hero-lede { margin-top: 16px; font-size: 16px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card:nth-child(-n+4), .feature-card:nth-child(5) { grid-column: 1; }
  .feature-card { min-height: 150px; }
  .feature-card strong { font-size: 19px; letter-spacing: .03em; }
  .feature-card small { max-width: 100%; font-size: 13px; }
  .feature-view { padding-left: 10px; padding-right: 10px; }
  .feature-toolbar h2 { font-size: 23px; }
  .toolbar-coordinates { font-size: 12px; }
  .geo-map { height: 300px; }
  .calendar-weekdays, .calendar-grid { gap: 4px; }
  .calendar-day { min-height: 39px; }
  .calendar-actions { align-items: stretch; flex-direction: column; }
  .calendar-actions button { width: 100%; }
  .chart-card-head { align-items: flex-start; flex-direction: column; gap: 7px; }
  .chart-record-label { text-align: left; }
  .profile-chart, .profile-chart svg { min-height: 330px; height: 330px; }
  .chart-placeholder { min-height: 330px; }
  .diagnosis-grid { grid-template-columns: 1fr 1fr; }
  .diagnosis-item strong { font-size: 17px; }
  .diag-quick-row button { flex: 1 1 30%; padding-left: 6px; padding-right: 6px; font-size: 13px; }
  .source-choice-row { grid-template-columns: 1fr; }
  .time-grid { grid-template-columns: repeat(2, 1fr); }
  .data-stats-grid strong { font-size: 25px; }
  .data-stats-grid span { font-size: 14px; }
  .job-stages { gap: 5px; }
  .job-stage { padding-left: 3px; padding-right: 3px; font-size: 12px; }
}

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