:root {
  --navy: #2a3342;
  --navy-2: #42b8c8;
  --primary: #42b8c8;
  --primary-dark: #299cac;
  --green: #62b983;
  --green-dark: #419764;
  --blue: #42b8c8;
  --amber: #c99546;
  --red: #e87566;
  --ink: #2a3342;
  --muted: #666666;
  --line: #dce6eb;
  --surface: #ffffff;
  --background: #f7fafc;
  --shadow: 0 8px 24px rgba(42, 51, 66, 0.06);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; color-scheme: light; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--background);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}
body.tool-body {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
button, input, textarea, select { font: inherit; letter-spacing: 0; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }

.topbar {
  min-height: 64px;
  color: #fff;
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: sticky;
  top: 0;
  z-index: 1000;
  flex: 0 0 auto;
}
.topbar-inner {
  width: min(1180px, calc(100% - 32px));
  min-height: 64px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 26px;
}
.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand-mark {
  width: 36px; height: 36px; padding: 8px;
  border-radius: 8px; background: var(--navy-2);
  display: flex; align-items: flex-end; justify-content: center; gap: 3px;
}
.brand-mark i { width: 4px; border-radius: 3px; background: #73d3b8; }
.brand-mark i:nth-child(1) { height: 10px; }
.brand-mark i:nth-child(2) { height: 17px; background: #65a8ef; }
.brand-mark i:nth-child(3) { height: 23px; background: #edb54d; }
.brand-name { font-size: 17px; font-weight: 800; white-space: nowrap; }
.nav { flex: 1; display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { padding: 9px 11px; border-radius: 6px; color: rgba(255,255,255,.68); font-size: 14px; white-space: nowrap; }
.nav a:hover, .nav a.active { color: #fff; background: rgba(255,255,255,.1); }
.admin-link { padding: 8px 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 6px; color: rgba(255,255,255,.84); font-size: 13px; white-space: nowrap; }

.page { width: min(1320px, calc(100% - 32px)); margin: 0 auto; padding: 18px 0 22px; }
.page-head { min-height: 78px; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex: 0 0 auto; }
.eyebrow { display: block; margin-bottom: 5px; color: var(--green); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.page-title { margin: 0; color: var(--ink); font-size: 26px; line-height: 1.25; }
.page-subtitle { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.status-note { color: var(--muted); font-size: 13px; white-space: nowrap; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.panel-pad { padding: 18px; }
.panel-title { margin: 0; font-size: 18px; line-height: 1.4; }
.panel-desc { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.section-title { margin: 0 0 14px; font-size: 17px; }
.tool-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(360px, .82fr); gap: 14px; align-items: stretch; min-height: 0; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.stack { display: grid; gap: 14px; min-height: 0; }
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }

.button {
  min-height: 40px; padding: 0 17px; border: 0; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  color: #fff; background: var(--green); font-weight: 700; font-size: 14px;
}
.button:hover { background: var(--green-dark); }
.button.secondary { color: #41536a; background: #eaf0f6; }
.button.secondary:hover { background: #dfe8f1; }
.button.danger { color: #a33b35; background: #fce9e7; }
.button.full { width: 100%; }
.button:disabled { color: #f5f7fa; background: #aab6c5; }
.button-icon { width: 18px; text-align: center; font-size: 17px; }

.segmented { display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: 7px; background: #edf3f8; }
.segmented button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 5px; color: #667589; background: transparent; font-weight: 700; }
.segmented button.active { color: #fff; background: var(--navy); }

.field { display: grid; gap: 7px; }
.field label { color: #4d5d72; font-size: 13px; font-weight: 700; }
.input, .select, .textarea {
  width: 100%; border: 1px solid #ccd8e5; border-radius: 6px; outline: none; color: var(--ink); background: #fff;
}
.input, .select { height: 40px; padding: 0 12px; }
.textarea { min-height: 150px; padding: 12px; resize: vertical; line-height: 1.7; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(47,138,108,.12); }
.hint { color: var(--muted); font-size: 12px; line-height: 1.6; }

.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.metric { min-height: 82px; padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: #f7fafc; }
.metric-label { display: block; color: var(--muted); font-size: 12px; }
.metric-value { display: block; margin-top: 7px; color: var(--ink); font-size: 24px; font-weight: 800; overflow-wrap: anywhere; }
.metric-unit { margin-left: 4px; color: var(--muted); font-size: 11px; font-weight: 500; }
.result-main { padding: 18px; color: #fff; background: var(--navy); border-radius: 8px; box-shadow: 0 10px 24px rgba(23,35,57,.15); }
.result-main .metric { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.08); }
.result-main .metric-label { color: rgba(255,255,255,.66); }
.result-main .metric-value { color: #fff; }

.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th { padding: 11px 12px; color: #536278; background: #f3f7fa; text-align: left; font-weight: 800; white-space: nowrap; }
.data-table td { padding: 11px 12px; border-top: 1px solid #e5ecf3; vertical-align: middle; }
.data-table tr:hover td { background: #f9fbfd; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 7px; }
.table-scroll .data-table th:first-child, .table-scroll .data-table td:first-child { padding-left: 15px; }
.table-input { width: 100px; height: 34px; padding: 0 9px; border: 1px solid #d2dde8; border-radius: 5px; text-align: right; }

.page.tool-page {
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 18px max(16px, calc((100% - 1320px) / 2)) 22px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #9aa8b7 transparent;
  scrollbar-width: thin;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}
.tool-page::-webkit-scrollbar { width: 9px; }
.tool-page::-webkit-scrollbar-track { background: transparent; }
.tool-page::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 8px; background: #9aa8b7; background-clip: padding-box; }
.tool-page::-webkit-scrollbar-thumb:hover { background-color: #7d8c9d; }
.tool-page > .tool-grid { flex: 1; }
.tool-page > .tool-grid > .panel,
.tool-page > .tool-grid > .stack { min-height: 0; }
.tool-page > .tool-grid > .panel { overflow: hidden; }
.tool-page .table-scroll { min-height: 0; }

.entry-head { min-height: 30px; padding: 0 10px; border: 1px solid var(--line); border-bottom: 0; border-radius: 7px 7px 0 0; color: #667589; background: #f3f7fa; display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 800; }
.hour-grid { padding: 9px; border: 1px solid var(--line); border-radius: 0 0 7px 7px; background: #f8fafc; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.hour-entry { min-width: 0; min-height: 45px; padding: 5px 6px 5px 9px; border: 1px solid #dce5ee; border-radius: 6px; background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.hour-entry:focus-within { border-color: #8ac3b1; box-shadow: 0 0 0 2px rgba(47,138,108,.1); }
.hour-meta { min-width: 52px; display: flex; align-items: center; gap: 5px; color: #35465c; font-size: 12px; }
.hour-meta b { display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.hour-meta small { color: #8a6870; font-size: 9px; font-weight: 700; }
.hour-meta em { width: 20px; height: 20px; border-radius: 4px; display: grid; place-items: center; font-size: 10px; font-style: normal; font-weight: 800; }
.hour-meta em.day { color: #8c6518; background: #fff3d9; }
.hour-meta em.night { color: #466a96; background: #e9f1fb; }
.hour-entry .table-input { width: min(70px, 44%); height: 32px; padding: 0 7px; outline: none; }

.sample-grid { padding: 9px; border: 1px solid var(--line); border-radius: 0 0 7px 7px; background: #f8fafc; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.sample-entry { min-width: 0; min-height: 44px; padding: 5px; border: 1px solid #dce5ee; border-radius: 6px; background: #fff; display: grid; grid-template-columns: 25px minmax(0,1fr) 30px; align-items: center; gap: 5px; }
.sample-number { color: #69788b; font-size: 11px; font-weight: 800; text-align: center; }
.sample-entry .table-input { width: 100%; height: 32px; }
.sample-remove { width: 28px; height: 28px; padding: 0; border: 1px solid #f2c8c4; border-radius: 5px; color: #c4453d; background: #fff0ee; display: grid; place-items: center; }
.sample-remove:hover { border-color: #e9a9a4; background: #fde5e2; }
.sample-remove span { width: 11px; height: 12px; border: 2px solid currentColor; border-top: 0; border-radius: 0 0 2px 2px; position: relative; }
.sample-remove span::before { content: ''; position: absolute; left: -3px; top: -4px; width: 13px; height: 2px; border-radius: 2px; background: currentColor; }
.sample-remove span::after { content: ''; position: absolute; left: 2px; top: -7px; width: 4px; height: 3px; border: 2px solid currentColor; border-bottom: 0; border-radius: 2px 2px 0 0; }
.compact-action { margin-top: 10px; min-height: 36px; }

.noise-workspace { min-height: 0; display: grid; grid-template-columns: minmax(620px,1.35fr) minmax(420px,.85fr); gap: 14px; align-items: start; }
.noise-entry-panel { min-width: 0; }
.noise-result-column { min-width: 0; display: grid; gap: 14px; }
.noise-area-flow { margin-bottom: 16px; padding: 14px; border: 1px solid #d6e2e6; border-left: 4px solid var(--amber); border-radius: 7px; background: #f8fbfb; }
.noise-area-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.noise-area-heading > div:first-child span, .noise-area-heading > div:first-child strong { display: block; }
.noise-area-heading > div:first-child span { color: var(--amber); font-size: 10px; font-weight: 800; }
.noise-area-heading > div:first-child strong { margin-top: 3px; font-size: 14px; }
#noiseAreaLimit { display: flex; align-items: baseline; gap: 6px; color: var(--muted); font-size: 10px; white-space: nowrap; }
#noiseAreaLimit b { color: var(--ink); font-size: 17px; }
#noiseAreaLimit i { color: #a7b3bc; font-style: normal; }
#noiseAreaLimit em { color: var(--muted); font-size: 9px; font-style: normal; }
.noise-area-options { margin-top: 12px; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 7px; }
.noise-area-options button { min-width: 0; min-height: 52px; padding: 7px 5px; border: 1px solid #d3dfe4; border-radius: 6px; color: #5c6c78; background: #fff; }
.noise-area-options button b, .noise-area-options button span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.noise-area-options button b { color: var(--ink); font-size: 12px; }
.noise-area-options button span { margin-top: 3px; font-size: 9px; }
.noise-area-options button:hover { border-color: #8ebcaf; }
.noise-area-options button.active { border-color: var(--green); color: var(--green-dark); background: #e8f5f1; box-shadow: inset 0 0 0 1px var(--green); }
.noise-actions { margin-top: 16px; display: flex; justify-content: flex-end; gap: 9px; }
.noise-summary .eyebrow { color: #79d8bd; }
.stat-result-panel { overflow: hidden; }
.stat-result-head { padding: 14px 16px 11px; border-bottom: 1px solid var(--line); }
.stat-result-head span, .stat-result-head strong { display: block; }
.stat-result-head span { color: var(--green); font-size: 10px; font-weight: 800; }
.stat-result-head strong { margin-top: 3px; font-size: 17px; }
.stat-primary { padding: 14px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.stat-primary > div { min-width: 0; padding: 12px; border-left: 3px solid var(--green); background: #eff7f5; }
.stat-primary span, .stat-primary strong, .stat-secondary span, .stat-secondary strong { display: block; }
.stat-primary span { color: #5d7475; font-size: 10px; }
.stat-primary strong { margin-top: 7px; color: var(--ink); font-size: 24px; }
.stat-secondary { padding: 0 14px 14px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; }
.stat-secondary > div { padding: 9px 11px; border: 1px solid var(--line); background: #fafcfc; }
.stat-secondary span { color: var(--muted); font-size: 9px; }
.stat-secondary strong { margin-top: 4px; font-size: 15px; }
.noise-ai-focus { min-height: 300px; padding: 22px; border-top: 4px solid var(--green); overflow: visible; }
.noise-ai-focus .ai-analysis-summary { font-size: 17px; }
.calculation-details { padding: 0 16px 16px; }
.calculation-details summary { min-height: 48px; display: flex; align-items: center; color: var(--ink); font-size: 13px; font-weight: 800; cursor: pointer; }
.calculation-details summary::after { content: '+'; margin-left: auto; color: var(--green); font-size: 20px; font-weight: 400; }
.calculation-details[open] summary::after { content: '−'; }
.calculation-details .notice { margin-top: 0; }

.notice { padding: 13px 15px; border-left: 4px solid var(--green); border-radius: 0 6px 6px 0; color: #59697c; background: #f0f7f5; font-size: 13px; line-height: 1.65; }
.air-workspace { min-height: 0; display: grid; grid-template-columns: minmax(620px,1.35fr) minmax(420px,.85fr); gap: 14px; align-items: start; }
.air-entry-panel { min-width: 0; }
.air-result-column { min-width: 0; display: grid; gap: 14px; }
.air-actions { margin-top: 16px; display: flex; justify-content: flex-end; gap: 9px; }
.air-result-summary .eyebrow { color: #79d8bd; }
.air-result-summary .metric-value { font-size: 25px; }
.air-result-summary #primaryValue { font-size: 18px; }
.air-result-summary #gradeValue { font-size: 20px; }
.air-control-panel { overflow: hidden; border-top: 4px solid var(--amber); }
.air-control-panel > header { padding: 13px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.air-control-panel header span, .air-control-panel header strong { display: block; }
.air-control-panel header span { color: var(--amber); font-size: 10px; font-weight: 800; }
.air-control-panel header strong { margin-top: 3px; font-size: 17px; }
.air-control-panel header small { color: var(--muted); font-size: 10px; }
.air-control-empty { min-height: 72px; padding: 18px; color: var(--muted); background: #fbfcfc; font-size: 12px; display: flex; justify-content: center; flex-direction: column; }
.air-control-empty strong, .air-control-empty span { display: block; }
.air-control-empty strong { color: var(--green-dark); font-size: 15px; }
.air-control-empty span { margin-top: 5px; line-height: 1.55; }
.air-control-targets { padding: 12px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.air-control-targets > div { min-width: 0; padding: 12px; border-left: 4px solid var(--amber); background: #fff8eb; }
.air-control-targets > div.danger { border-color: var(--red); background: #fff0ef; }
.air-control-targets span, .air-control-targets strong { display: block; overflow-wrap: anywhere; }
.air-control-targets span { color: #765f38; font-size: 10px; }
.air-control-targets strong { margin-top: 6px; color: var(--ink); font-size: 17px; }
.air-ai-focus { min-height: 300px; padding: 22px; border-top: 4px solid var(--green); overflow: visible; }
.air-ai-focus .ai-analysis-summary { font-size: 17px; }
.air-detail-panel { overflow: hidden; }
.air-detail-panel summary { min-height: 50px; padding: 0 16px; display: flex; align-items: center; color: var(--ink); font-size: 13px; font-weight: 800; cursor: pointer; }
.air-detail-panel summary::after { content: '+'; margin-left: auto; color: var(--green); font-size: 20px; font-weight: 400; }
.air-detail-panel[open] summary::after { content: '−'; }
.air-detail-body { padding: 0 14px 14px; }
.air-detail-panel > .notice { margin: 0 14px 14px; }
.error-box { display: none; padding: 12px 14px; border-radius: 6px; color: #983c36; background: #fcecea; font-size: 13px; }
.error-box.show { display: block; }

.home-summary { width: 100%; min-width: 0; max-width: 100%; padding: 22px 26px 20px; overflow: hidden; color: #fff; background: var(--navy); border-radius: 8px; box-shadow: 0 12px 30px rgba(18,35,57,.17); }
.home-summary-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.home-summary h1 { margin: 3px 0 0; font-size: 29px; }
.home-summary-top p { max-width: 620px; margin: 8px 0 0; color: rgba(255,255,255,.68); font-size: 14px; }
.home-summary .eyebrow { color: #78d3b9; }
.home-environment {
  --aqi-color: #64c8aa;
  --aqi-progress: 0deg;
  width: 100%; min-width: 0; max-width: 100%; margin-top: 18px;
  border: 1px solid rgba(255,255,255,.14); border-radius: 7px;
  background: #202e45; position: relative; overflow: hidden;
}
.home-environment[data-aqi="good"] { --aqi-color: #e8c45b; }
.home-environment[data-aqi="light"] { --aqi-color: #e79a49; }
.home-environment[data-aqi="moderate"] { --aqi-color: #e16d64; }
.home-environment[data-aqi="heavy"] { --aqi-color: #b77bc4; }
.home-environment[data-aqi="severe"] { --aqi-color: #a95b72; }
.home-environment-head { min-height: 60px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.home-environment-title { min-width: 0; display: flex; align-items: center; gap: 18px; }
.home-environment-title > span { color: #7fd4c0; font-size: 13px; font-weight: 800; white-space: nowrap; }
.home-environment-title > span i { margin-left: 7px; color: rgba(255,255,255,.48); font-size: 10px; font-style: normal; font-weight: 500; }
.home-environment-title > div { min-width: 0; padding-left: 18px; border-left: 1px solid rgba(255,255,255,.12); }
.home-environment-title strong, .home-environment-title small { display: block; }
.home-environment-title strong { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.home-environment-title small { margin-top: 3px; color: rgba(255,255,255,.5); font-size: 10px; }
.home-environment-actions { flex-shrink: 0; display: flex; gap: 7px; }
.home-environment-actions button { min-height: 31px; padding: 0 10px; border: 1px solid rgba(255,255,255,.15); border-radius: 5px; color: rgba(255,255,255,.73); background: rgba(255,255,255,.06); font-size: 10px; }
.home-environment-actions button:hover { color: #fff; border-color: rgba(127,212,192,.5); background: rgba(127,212,192,.1); }
.home-environment-actions button:disabled { opacity: .55; }
.home-environment-main { width: 100%; min-width: 0; max-width: 100%; min-height: 154px; display: grid; grid-template-columns: minmax(250px,.92fr) minmax(280px,1fr) minmax(340px,1.28fr); }
.home-environment-main > section { min-width: 0; padding: 18px; }
.home-environment-main > section + section { border-left: 1px solid rgba(255,255,255,.1); }
.home-environment-main:hover { background: rgba(255,255,255,.025); }
.home-weather-block { display: grid; grid-template-columns: 66px minmax(0,1fr); grid-template-rows: 1fr auto; align-items: center; column-gap: 15px; }
.home-weather-block > i { width: 66px; color: #f1c35b; font-size: 55px; text-align: center; }
.home-weather-reading { min-width: 0; }
.home-weather-reading > div { display: flex; align-items: baseline; gap: 9px; }
.home-weather-reading strong { font-size: 38px; line-height: 1; white-space: nowrap; }
.home-weather-reading span { min-width: 0; overflow: hidden; color: rgba(255,255,255,.86); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.home-weather-reading small { display: block; margin-top: 7px; color: rgba(255,255,255,.52); font-size: 11px; }
.home-weather-quick { grid-column: 1 / -1; padding-top: 13px; display: flex; gap: 20px; }
.home-weather-quick span { color: rgba(255,255,255,.5); font-size: 10px; }
.home-weather-quick b { margin-left: 5px; color: rgba(255,255,255,.86); font-size: 11px; }
.home-air-block { display: flex; align-items: center; gap: 15px; }
.home-aqi-gauge { width: 96px; height: 96px; padding: 7px; border-radius: 50%; flex: 0 0 auto; background: conic-gradient(var(--aqi-color) var(--aqi-progress), rgba(255,255,255,.09) 0); }
.home-aqi-gauge > div { width: 100%; height: 100%; border-radius: 50%; background: #202e45; display: grid; place-content: center; text-align: center; }
.home-aqi-gauge small { color: rgba(255,255,255,.5); font-size: 9px; }
.home-aqi-gauge strong { display: block; margin-top: 1px; color: var(--aqi-color); font-size: 29px; line-height: 1; }
.home-air-copy { min-width: 0; flex: 1; }
.home-air-copy > span, .home-air-copy > small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-air-copy > span { color: var(--aqi-color); font-size: 15px; font-weight: 800; }
.home-air-copy > small { margin-top: 5px; color: rgba(255,255,255,.5); font-size: 10px; }
.home-pollutants { margin-top: 12px; display: grid; gap: 5px; }
.home-pollutants span { min-width: 0; color: rgba(255,255,255,.67); font-size: 9px; overflow-wrap: anywhere; }
.home-pollutants i { width: 38px; color: rgba(255,255,255,.42); display: inline-block; font-style: normal; }
.home-advice-block { display: flex; flex-direction: column; }
.home-advice-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.home-advice-title > span { font-size: 13px; font-weight: 800; }
.home-advice-title > small { padding: 3px 7px; border-radius: 4px; color: #8bdcc6; background: rgba(100,200,170,.1); font-size: 9px; white-space: nowrap; }
.home-advice-block > p { margin: 10px 0 0; min-height: 39px; color: rgba(255,255,255,.72); display: -webkit-box; overflow: hidden; font-size: 12px; line-height: 1.65; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.home-suitable-list { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.home-suitable-list span { max-width: 100%; padding: 4px 7px; border: 1px solid rgba(127,212,192,.16); border-radius: 4px; color: #a4dfcf; background: rgba(127,212,192,.07); font-size: 9px; overflow-wrap: anywhere; }
.home-advice-foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.home-advice-foot small { min-width: 0; color: rgba(255,255,255,.4); font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-advice-foot small.warning { color: #f1c35b; }
.home-advice-foot b { color: #79bff0; font-size: 10px; white-space: nowrap; }
.home-advice-foot b i { margin-left: 4px; font-style: normal; }
.home-environment-facts { min-height: 48px; padding: 0 16px; border-top: 1px solid rgba(255,255,255,.1); display: grid; grid-template-columns: repeat(4,minmax(100px,.72fr)) minmax(180px,1.3fr); align-items: center; }
.home-environment-facts > div { min-width: 0; padding: 0 12px; border-right: 1px solid rgba(255,255,255,.09); display: flex; align-items: baseline; justify-content: center; gap: 7px; }
.home-environment-facts > div:first-child { padding-left: 0; }
.home-environment-facts span { color: rgba(255,255,255,.42); font-size: 9px; white-space: nowrap; }
.home-environment-facts strong { overflow: hidden; color: rgba(255,255,255,.86); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.home-environment-facts > small { padding-left: 15px; color: rgba(255,255,255,.38); font-size: 9px; text-align: right; }
.home-environment[data-state="loading"] .home-environment-main { opacity: .65; }
.home-environment[data-state="error"] { border-color: rgba(207,81,72,.48); }
.home-environment[data-state="stale"] .home-environment-facts > small { color: #f1c35b; }
.home-stats { width: 100%; min-width: 0; margin-top: 18px; border-top: 1px solid rgba(255,255,255,.12); display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.home-stat { min-width: 0; padding: 13px 10px 0; border-right: 1px solid rgba(255,255,255,.12); text-align: center; }
.home-stat:last-child { border-right: 0; }
.home-stat strong { display: block; font-size: 25px; }
.home-stat span { color: rgba(255,255,255,.58); font-size: 12px; }
.module-heading { margin: 16px 0 10px; display: flex; align-items: baseline; justify-content: space-between; }
.module-heading h2 { margin: 0; font-size: 20px; }
.module-heading span { color: var(--muted); font-size: 13px; }
.module-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.module-card { min-height: 104px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); display: flex; align-items: center; gap: 12px; }
.module-card:hover { border-color: #b9d8cd; transform: translateY(-1px); }
.module-icon { width: 52px; height: 52px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; color: #2d77d3; background: #eaf3ff; font-size: 14px; font-weight: 900; }
.module-card:nth-child(2) .module-icon { color: #b77a18; background: #fff5e4; }
.module-card:nth-child(3) .module-icon, .module-card:nth-child(7) .module-icon { color: #287a61; background: #e9f7f2; }
.module-card:nth-child(4) .module-icon { color: #7759ce; background: #f1edff; }
.module-card:nth-child(5) .module-icon { color: #3478d4; background: #ebf4ff; }
.module-card:nth-child(6) .module-icon { color: #526fd1; background: #eef1ff; }
.module-card.environment-module .module-icon { color: #277a62; background: #e6f5f0; }
.module-card h3 { margin: 0; font-size: 17px; }
.module-card p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.module-card:last-child { grid-column: auto; }

/* City environment */
.modal-open { overflow: hidden; }
.city-picker { width: min(580px, 100%); }
.city-picker .modal-head div { min-width: 0; }
.city-picker .modal-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.city-search { padding: 16px 20px 12px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; }
.city-picker-status { padding: 0 20px 9px; color: #667589; font-size: 12px; font-weight: 800; }
.city-picker-status.error { color: var(--red); }
.city-results { min-height: 260px; max-height: min(460px, 58vh); padding: 0 12px 14px; overflow-y: auto; }
.city-option { width: 100%; min-height: 60px; padding: 0 12px; border: 0; border-bottom: 1px solid #e5ecf2; color: var(--ink); background: transparent; display: flex; align-items: center; justify-content: space-between; text-align: left; }
.city-option:hover { background: #f4f8f7; }
.city-option strong, .city-option small { display: block; }
.city-option strong { font-size: 15px; }
.city-option small { margin-top: 4px; color: var(--muted); font-size: 12px; }
.city-option i { color: var(--green); font-size: 12px; font-style: normal; font-weight: 800; }
.city-loading, .city-empty { min-height: 220px; display: grid; place-items: center; color: var(--muted); font-size: 13px; }

.environment-page { gap: 14px; }
.environment-toolbar { min-height: 70px; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.environment-actions { display: flex; gap: 8px; }
.environment-loading, .environment-error { min-height: 420px; flex: 1; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.68); align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.environment-loading strong { margin-top: 14px; font-size: 18px; }
.environment-loading p, .environment-error p { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.environment-error { display: none; }
.environment-error.show { display: flex; }
.environment-error > strong { font-size: 20px; }
.environment-error > div { margin-top: 18px; display: flex; gap: 8px; }
.environment-content { width: 100%; min-width: 0; max-width: 100%; display: grid; gap: 14px; }
.environment-status { padding: 9px 14px; border-left: 4px solid var(--amber); color: #73551b; background: #fff6df; font-size: 12px; }
.environment-overview { width: 100%; min-width: 0; max-width: 100%; min-height: 284px; color: #fff; background: #172339; border-radius: 8px; overflow: hidden; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(360px,.85fr); box-shadow: 0 12px 30px rgba(18,35,57,.14); }
.weather-overview { width: 100%; min-width: 0; max-width: 100%; padding: 24px 28px; background: radial-gradient(circle at 18% 16%, rgba(101,168,239,.17), transparent 34%), #172339; }
.environment-location { display: flex; align-items: baseline; gap: 10px; }
.environment-location span { font-size: 22px; font-weight: 800; }
.environment-location small { color: rgba(255,255,255,.54); font-size: 12px; }
.current-weather { margin-top: 18px; display: flex; align-items: center; gap: 20px; }
.current-weather > i { width: 92px; color: #f2c45f; font-size: 76px; line-height: 1; text-align: center; }
.current-weather strong { display: block; font-size: 66px; line-height: .95; }
.current-weather sup { margin-left: 3px; color: rgba(255,255,255,.68); font-size: 22px; }
.current-weather div > span { display: block; margin-top: 8px; color: rgba(255,255,255,.8); font-size: 17px; }
.weather-range { margin-top: 16px; display: flex; gap: 20px; color: rgba(255,255,255,.58); font-size: 12px; }
.weather-range b { margin-left: 5px; color: #fff; font-size: 13px; }
.weather-facts { margin-top: 19px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.11); display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
.weather-facts span { padding: 0 12px; border-right: 1px solid rgba(255,255,255,.1); }
.weather-facts span:first-child { padding-left: 0; }
.weather-facts span:last-child { border-right: 0; }
.weather-facts small, .weather-facts b { display: block; }
.weather-facts small { color: rgba(255,255,255,.48); font-size: 11px; }
.weather-facts b { margin-top: 5px; font-size: 13px; }
.aqi-overview { width: 100%; min-width: 0; max-width: 100%; padding: 24px 28px; background: #f8fafc; color: var(--ink); display: flex; align-items: center; justify-content: center; gap: 28px; }
.aqi-gauge { width: 176px; height: 176px; border-radius: 50%; padding: 16px; flex: 0 0 auto; position: relative; background: conic-gradient(#00e400 0 16.66%, #f1cf27 16.66% 33.33%, #ff7e00 33.33% 50%, #e54843 50% 66.66%, #8f3f97 66.66% 83.33%, #7e2633 83.33%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.aqi-gauge::before { content: ''; position: absolute; inset: 8px; border: 8px solid #f8fafc; border-radius: 50%; }
.aqi-gauge-inner { height: 100%; border-radius: 50%; position: relative; z-index: 1; background: #fff; display: flex; align-items: center; justify-content: center; flex-direction: column; box-shadow: 0 8px 22px rgba(23,35,57,.1); }
.aqi-gauge-inner small { color: var(--muted); font-size: 11px; font-weight: 800; }
.aqi-gauge-inner strong { margin-top: 2px; font-size: 48px; line-height: 1; }
.aqi-gauge-inner span { margin-top: 6px; padding: 3px 8px; border-radius: 4px; color: #17674e; background: #e3f5ef; font-size: 11px; font-weight: 800; }
.aqi-gauge > i { width: 50%; height: 2px; position: absolute; z-index: 3; left: 50%; top: 50%; transform-origin: 0 50%; transition: transform .5s ease; }
.aqi-gauge > i::after { content: ''; width: 10px; height: 10px; position: absolute; right: 5px; top: -4px; border: 2px solid #fff; border-radius: 50%; background: #172339; box-shadow: 0 1px 5px rgba(0,0,0,.3); }
.aqi-gauge.good .aqi-gauge-inner span { color: #675817; background: #fff5bf; }
.aqi-gauge.light .aqi-gauge-inner span, .aqi-gauge.moderate .aqi-gauge-inner span { color: #8b4510; background: #ffead6; }
.aqi-gauge.heavy .aqi-gauge-inner span, .aqi-gauge.severe .aqi-gauge-inner span { color: #772d34; background: #f5e4e7; }
.aqi-copy { max-width: 210px; }
.aqi-copy > span { font-size: 18px; font-weight: 800; }
.aqi-copy p { margin: 9px 0; color: #617085; font-size: 12px; }
.aqi-copy p strong { color: var(--ink); }
.aqi-copy > small { color: #718095; font-size: 11px; line-height: 1.65; }

.environment-band { width: 100%; min-width: 0; max-width: 100%; padding: 22px 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.82); }
.band-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.band-heading h2 { margin: 2px 0 0; font-size: 19px; }
.band-heading > span { color: var(--muted); font-size: 11px; }
.advice-source { padding: 4px 8px; border-radius: 4px; color: var(--green-dark) !important; background: #e6f4ef; font-weight: 800; }
.advice-main { margin-top: 14px; padding: 16px 18px; border-left: 4px solid var(--green); background: #f1f7f5; }
.advice-main strong { font-size: 19px; }
.advice-main p { margin: 7px 0 0; color: #56677a; font-size: 13px; line-height: 1.7; }
.advice-columns { margin-top: 14px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.advice-columns h3 { margin: 0 0 8px; color: #657489; font-size: 12px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 7px; }
.tag-list span { padding: 5px 9px; border-radius: 5px; font-size: 12px; font-weight: 700; }
.tag-list.good span { color: #236a55; background: #e3f3ed; }
.tag-list.warning span { color: #8a5e14; background: #fff0ce; }
.indicator-grid { margin-top: 17px; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; }
.advice-indicator { min-width: 0; min-height: 104px; padding: 11px; border: 1px solid #e0e8ef; border-radius: 7px; background: #fff; display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: center; gap: 8px; }
.advice-indicator > span { width: 28px; height: 28px; border-radius: 6px; color: #516175; background: #edf2f6; display: grid; place-items: center; font-size: 11px; font-weight: 900; }
.advice-indicator small, .advice-indicator strong { display: block; }
.advice-indicator small { color: var(--muted); font-size: 10px; }
.advice-indicator strong { margin-top: 3px; font-size: 14px; }
.advice-indicator p { min-width: 0; margin: 3px 0 0; grid-column: 1 / -1; color: #7b8899; font-size: 10px; line-height: 1.45; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.advice-indicator.good > span { color: #236a55; background: #e3f3ed; }
.advice-indicator.warning > span { color: #93651c; background: #fff0cf; }
.advice-indicator.danger > span { color: #a5443d; background: #fae7e5; }

.environment-analysis-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(340px,.75fr); gap: 14px; }
.trend-canvas-wrap { width: 100%; margin-top: 8px; overflow-x: auto; }
.trend-canvas-wrap canvas { display: block; }
.chart-legend { display: flex; align-items: center; gap: 5px; }
.chart-legend i, .chart-legend b { width: 12px; height: 3px; display: inline-block; }
.chart-legend i { background: var(--green); }
.chart-legend b { margin-left: 6px; background: rgba(52,120,212,.45); }
.hourly-weather-list { margin-top: 8px; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); border-top: 1px solid #e5ebf1; }
.hourly-weather-list > div { padding: 10px 5px 0; border-right: 1px solid #e5ebf1; text-align: center; }
.hourly-weather-list > div:last-child { border-right: 0; }
.hourly-weather-list span, .hourly-weather-list strong, .hourly-weather-list small { display: block; }
.hourly-weather-list span { color: var(--muted); font-size: 10px; }
.hourly-weather-list i { margin: 6px 0; color: #cd8c25; font-size: 24px; }
.hourly-weather-list strong { font-size: 13px; }
.hourly-weather-list small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.pollutant-list { margin-top: 18px; display: grid; gap: 14px; }
.pollutant-row { display: grid; grid-template-columns: 118px minmax(80px,1fr) 54px; align-items: center; gap: 10px; }
.pollutant-row > div:first-child { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.pollutant-row strong { font-size: 12px; }
.pollutant-row span, .pollutant-row small { color: var(--muted); font-size: 9px; white-space: nowrap; }
.pollutant-row > small { text-align: right; }
.pollutant-track { height: 7px; overflow: hidden; border-radius: 4px; background: #e8edf2; }
.pollutant-track i { display: block; height: 100%; border-radius: 4px; background: #00a968; }
.pollutant-track i.good { background: #d0b41e; }
.pollutant-track i.light { background: #e98726; }
.pollutant-track i.moderate { background: #d64e46; }
.pollutant-track i.heavy { background: #8e4893; }
.pollutant-track i.severe { background: #7e2633; }
.air-hourly { margin-top: 16px; display: grid; grid-template-columns: repeat(12,minmax(62px,1fr)); overflow-x: auto; border-left: 1px solid #e3e9ef; }
.air-hour { min-width: 62px; padding: 10px 5px; border-right: 1px solid #e3e9ef; border-bottom: 4px solid #00a968; text-align: center; }
.air-hour.good { border-bottom-color: #d0b41e; }
.air-hour.light { border-bottom-color: #e98726; }
.air-hour.moderate { border-bottom-color: #d64e46; }
.air-hour.heavy { border-bottom-color: #8e4893; }
.air-hour.severe { border-bottom-color: #7e2633; }
.air-hour span, .air-hour strong, .air-hour small { display: block; }
.air-hour span, .air-hour small { color: var(--muted); font-size: 9px; }
.air-hour strong { margin: 5px 0 3px; font-size: 16px; }
.warning-strip { padding: 14px 18px; border-left: 4px solid #d94d45; color: #7e342f; background: #fce9e7; }
.warning-strip strong { font-size: 14px; }
.warning-strip p { margin: 5px 0 0; font-size: 11px; line-height: 1.6; }
.environment-source { padding: 2px 4px 8px; color: var(--muted); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; font-size: 10px; }

.map-page .page-head { min-height: 66px; }
.map-panel { flex: 1; min-height: 0; overflow: hidden; }
.map-frame { width: 100%; height: 100%; min-height: 0; border: 0; display: block; background: #dfe7ee; }
.upload-zone { padding: 28px 20px; border: 1px dashed #b9c8d8; border-radius: 7px; background: #f7fafc; text-align: center; }
.upload-zone input { max-width: 100%; }
.audio-player { width: 100%; margin-top: 14px; }
.progress { height: 8px; border-radius: 4px; overflow: hidden; background: #e3eaf1; }
.progress i { display: block; width: 0; height: 100%; background: var(--green); transition: width .2s; }
.ranking { display: grid; gap: 12px; }
.rank-item { padding: 14px; border: 1px solid var(--line); border-radius: 7px; }
.rank-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.rank-name { font-weight: 800; }
.rank-bar { height: 8px; margin-top: 9px; border-radius: 4px; background: #e6edf3; overflow: hidden; }
.rank-bar i { display: block; height: 100%; background: var(--green); }
.rank-detail { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.source-workspace { min-height: 0; flex: 0 0 auto; display: grid; grid-template-columns: minmax(620px,1.35fr) minmax(420px,.85fr); gap: 14px; align-items: start; }
.source-audio-workstation { min-width: 0; padding: 0 18px 18px; overflow: hidden; }
.source-file-bar { min-height: 74px; margin: 0 -18px 16px; padding: 12px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.source-file-bar input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.source-file-bar label { min-width: 92px; min-height: 46px; padding: 6px 10px; border: 1px solid #cad9df; border-radius: 6px; color: var(--green-dark); background: #edf7f4; display: flex; justify-content: center; flex-direction: column; cursor: pointer; }
.source-file-bar label span, .source-file-bar label strong, #audioMeta b, #audioMeta small { display: block; }
.source-file-bar label span { font-size: 9px; }
.source-file-bar label strong { margin-top: 2px; font-size: 12px; }
#audioMeta { min-width: 0; flex: 1; }
#audioMeta b, #audioMeta small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#audioMeta b { font-size: 12px; }
#audioMeta small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.source-file-bar .button { min-height: 38px; flex: 0 0 auto; }
.waveform-shell { border: 1px solid var(--line); border-radius: 7px; background: #f6fafb; overflow: hidden; }
.waveform-toolbar { min-height: 56px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: #fff; display: flex; align-items: center; gap: 10px; }
.waveform-toolbar > div { min-width: 0; flex: 1; }
.waveform-toolbar strong, .waveform-toolbar small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.waveform-toolbar strong { font-size: 12px; }
.waveform-toolbar small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.waveform-toolbar > span { color: var(--green-dark); font-size: 10px; font-weight: 800; }
.wave-play { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: var(--green); display: grid; place-items: center; font-size: 12px; }
.waveform-canvas-wrap { min-height: 210px; position: relative; overflow: hidden; }
.waveform-canvas-wrap canvas { width: 100%; height: 210px; display: block; cursor: crosshair; }
.waveform-canvas-wrap > i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-right: 2px solid #d58f23; background: rgba(213,143,35,.09); pointer-events: none; }
.waveform-canvas-wrap > p { position: absolute; inset: 0; margin: 0; color: var(--muted); display: grid; place-items: center; font-size: 12px; pointer-events: none; }
.waveform-shell[data-state="ready"] .waveform-canvas-wrap > p { display: none; }
.source-process { min-height: 62px; margin-top: 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 7px; background: #fff; display: flex; align-items: center; }
.source-process > div { min-width: 92px; display: flex; align-items: center; gap: 7px; color: #83909c; }
.source-process > div i { width: 25px; height: 25px; border-radius: 50%; color: #71808d; background: #e8eef1; display: grid; place-items: center; font-size: 10px; font-style: normal; font-weight: 800; }
.source-process > div span { font-size: 10px; font-weight: 700; }
.source-process > b { height: 1px; flex: 1; background: #dbe4e8; }
.source-process[data-state="prepare"] [data-step="prepare"], .source-process[data-state="model"] [data-step="model"], .source-process[data-state="result"] [data-step="result"], .source-process[data-state="done"] > div { color: var(--green-dark); }
.source-process[data-state="prepare"] [data-step="prepare"] i, .source-process[data-state="model"] [data-step="model"] i, .source-process[data-state="result"] [data-step="result"] i, .source-process[data-state="done"] > div i { color: #fff; background: var(--green); }
.source-process[data-state="model"] [data-step="prepare"] i, .source-process[data-state="result"] [data-step="prepare"] i, .source-process[data-state="result"] [data-step="model"] i { color: #fff; background: #77b6a5; }
.source-audio-workstation > .progress { height: 4px; margin-top: 10px; }
.source-result-column { min-width: 0; display: grid; gap: 14px; }
.source-result-summary .eyebrow { color: #79d8bd; }
.source-result-summary .metric-value { font-size: 20px; }
.source-ranking-panel { overflow: hidden; }
.source-ranking-panel > header { padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.source-ranking-panel header span, .source-ranking-panel header strong { display: block; }
.source-ranking-panel header span { color: var(--green); font-size: 10px; font-weight: 800; }
.source-ranking-panel header strong { margin-top: 3px; font-size: 17px; }
.source-ranking-panel header small { color: var(--muted); font-size: 9px; }
.source-ranking-panel .ranking { padding: 14px; }
.source-ranking-panel .rank-item:first-child { border-left: 4px solid var(--green); background: #f0f8f5; }

.canvas-wrap { padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: #f4f7fa; }
#renderCanvas { width: 100%; aspect-ratio: 16 / 9; display: block; background: #fff; }
.legend { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: 12px; }
.legend i { width: 12px; height: 12px; border-radius: 2px; display: inline-block; margin-right: 4px; vertical-align: -1px; }

.material-tabs { margin-bottom: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.material-tabs button { height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: #56667a; font-weight: 700; }
.material-tabs button.active { color: #fff; border-color: var(--navy); background: var(--navy); }
.materials-page .material-tabs { flex: 0 0 auto; }
.material-list { min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.material-card { padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow); }
.material-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.material-number { color: var(--blue); font-size: 12px; font-weight: 800; }
.material-card h3 { margin: 4px 0 0; font-size: 16px; }
.badge { padding: 4px 8px; border-radius: 5px; color: var(--green-dark); background: #e7f5f0; font-size: 11px; font-weight: 800; white-space: nowrap; }
.badge.history { color: #876115; background: #fff2d8; }
.badge.abolished { color: #a14942; background: #fbe9e7; }
.material-meta { margin-top: 10px; color: var(--muted); font-size: 12px; }
.material-summary { margin-top: 9px; padding: 9px 10px; border-left: 3px solid #ccdae7; background: #f7fafc; color: #59687a; font-size: 12px; line-height: 1.5; }
.material-actions { margin-top: 10px; display: flex; gap: 8px; }
.materials-search-bar { margin-bottom: 12px; padding: 10px; display: flex; align-items: center; gap: 8px; }
.materials-search-input { min-width: 240px; height: 40px; padding: 0 12px; border: 1px solid #cbd9df; border-radius: 6px; background: #fff; display: flex; align-items: center; gap: 10px; flex: 1; }
.materials-search-input span { color: var(--green); font-size: 10px; font-weight: 800; }
.materials-search-input input { min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; color: var(--ink); background: transparent; flex: 1; }
.materials-ai-button { background: #255f9f; }
.materials-ai-button:hover { background: #1d4e85; }
.materials-ai-result { margin-bottom: 12px; overflow: hidden; border-top: 4px solid #255f9f; }
.materials-ai-result > header { padding: 14px 17px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.materials-ai-result header span, .materials-ai-result header strong { display: block; }
.materials-ai-result header span { color: #255f9f; font-size: 10px; font-weight: 800; }
.materials-ai-result header strong { margin-top: 4px; font-size: 15px; }
.materials-ai-result header small { color: var(--muted); font-size: 9px; }
.materials-ai-loading { min-height: 110px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.materials-ai-hits { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.materials-ai-hits article { min-width: 0; padding: 15px 17px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; gap: 11px; }
.materials-ai-hits article > i { width: 25px; height: 25px; border-radius: 50%; color: #fff; background: #255f9f; display: grid; place-items: center; flex: 0 0 auto; font-size: 10px; font-style: normal; font-weight: 800; }
.materials-ai-hits article > div { min-width: 0; }
.materials-ai-hits article span { color: #255f9f; font-size: 10px; font-weight: 800; }
.materials-ai-hits article h3 { margin: 4px 0 0; font-size: 14px; }
.materials-ai-hits article p { margin: 7px 0 0; color: #526675; font-size: 11px; line-height: 1.6; }
.materials-ai-hits article small { display: block; margin-top: 6px; color: #8a6a33; font-size: 9px; }
.materials-ai-hits article div > div { margin-top: 8px; display: flex; gap: 12px; }
.materials-ai-hits article a { color: var(--green-dark); font-size: 10px; font-weight: 800; }
.materials-empty { grid-column: 1 / -1; min-height: 120px; padding: 24px; color: var(--muted); background: #fff; display: grid; place-items: center; text-align: center; }

.graphics-workspace { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(300px,.7fr) minmax(0,1.7fr); gap: 14px; }
.graphics-controls { align-content: start; overflow-y: auto; }
.graphics-controls .upload-zone { padding: 18px 14px; }
.graphics-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.graphics-summary > div { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: #f7fafc; }
.graphics-summary span { display: block; color: var(--muted); font-size: 11px; }
.graphics-summary strong { display: block; margin-top: 4px; color: var(--ink); font-size: 18px; overflow-wrap: anywhere; }
.graphics-preview { min-height: 0; display: flex; flex-direction: column; }
.graphics-preview .canvas-wrap { flex: 1; min-height: 0; display: grid; place-items: center; position: relative; }
.graphics-preview #renderCanvas { width: 100%; height: 100%; max-height: 100%; object-fit: contain; aspect-ratio: auto; }
.graphics-loading { position: absolute; inset: 0; z-index: 2; display: none; align-items: center; justify-content: center; gap: 10px; color: #172339; background: rgba(247,250,252,.78); backdrop-filter: blur(2px); }
.graphics-loading.show { display: flex; }
.graphics-loading strong { font-size: 15px; letter-spacing: 0; }
.graphics-product-workspace { min-height: 0; flex: 0 0 auto; display: grid; gap: 10px; }
.graphics-import-bar { min-height: 74px; padding: 11px 13px; display: grid; grid-template-columns: minmax(280px,1fr) auto auto; align-items: center; gap: 14px; }
.graphics-file-control { min-width: 0; display: flex; align-items: center; gap: 11px; }
.graphics-file-control input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.graphics-file-control label { min-width: 92px; min-height: 46px; padding: 6px 10px; border: 1px solid #c9d8de; border-radius: 6px; color: var(--green-dark); background: #eef7f4; display: flex; justify-content: center; flex-direction: column; cursor: pointer; }
.graphics-file-control label span, .graphics-file-control label strong { display: block; }
.graphics-file-control label span { font-size: 9px; }
.graphics-file-control label strong { margin-top: 2px; font-size: 12px; }
.graphics-file-control > div { min-width: 0; }
.graphics-file-control > div b, .graphics-file-control > div small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.graphics-file-control > div b { font-size: 12px; }
.graphics-file-control > div small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.graphics-selectors { display: flex; gap: 8px; }
.graphics-selectors label > span { display: block; margin-bottom: 3px; color: var(--muted); font-size: 9px; }
.graphics-selectors .select { width: 122px; height: 36px; }
.graphics-toolbar { display: flex; flex-wrap: wrap; gap: 7px; justify-content: flex-end; }
.graphics-toolbar .button { min-height: 36px; padding: 0 12px; font-size: 12px; }
.graphics-toolbar .ai-action { background: #255f9f; }
.graphics-toolbar .ai-action:hover { background: #1d4e85; }
.graphics-status-row { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.graphics-status-row .graphics-summary { width: min(430px,100%); }
.graphics-status-row .graphics-summary > div { padding: 7px 10px; }
.graphics-status-row .graphics-summary strong { margin-top: 2px; font-size: 14px; }
.graphics-note { color: var(--muted); font-size: 10px; }
.graphics-stage { min-height: 560px; display: grid; grid-template-columns: minmax(0,1.55fr) minmax(360px,.65fr); gap: 14px; }
.graphics-stage .graphics-preview { min-height: 0; }
.graphics-ai-focus { min-height: 100%; padding: 22px; border-top: 4px solid #255f9f; overflow: visible; }
.graphics-ai-focus .ai-analysis-summary { font-size: 17px; }
.graphics-preview .legend { margin-top: 10px; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 5px; }
.graphics-preview .legend span { min-width: 0; padding: 7px; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.graphics-preview .legend i { width: 100%; height: 8px; margin: 0 0 5px; display: block; }
.graphics-preview .legend b, .graphics-preview .legend small { display: block; overflow-wrap: anywhere; }
.graphics-preview .legend b { color: var(--ink); font-size: 10px; }
.graphics-preview .legend small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.loading-spinner { width: 24px; height: 24px; border: 3px solid #c7d8d3; border-top-color: #248d74; border-radius: 50%; animation: graphics-spin .75s linear infinite; box-sizing: border-box; }
@keyframes graphics-spin { to { transform: rotate(360deg); } }

.promo { min-height: 260px; padding: 28px; border-radius: 8px; color: #fff; background: var(--navy) center/cover no-repeat; position: relative; overflow: hidden; display: flex; align-items: flex-end; }
.promo::before { content: ""; position: absolute; inset: 0; background: rgba(12,28,46,.65); }
.promo-content { width: min(520px, 78%); position: relative; z-index: 1; }
.promo h2 { margin: 7px 0; font-size: 28px; }
.promo p { margin: 0 0 18px; color: rgba(255,255,255,.7); }
.third-party { position: absolute; right: 18px; top: 18px; z-index: 2; padding: 5px 8px; border: 1px solid rgba(255,255,255,.35); border-radius: 5px; font-size: 11px; }
.char-count { margin-top: 6px; color: var(--muted); font-size: 12px; text-align: right; }
.footer-links { margin-top: 18px; display: flex; justify-content: center; gap: 12px; color: var(--muted); font-size: 12px; }
.text-link { border: 0; padding: 0; color: var(--green-dark); background: none; font-weight: 800; }

.modal-mask { position: fixed; z-index: 50; inset: 0; padding: 20px; display: none; align-items: center; justify-content: center; background: rgba(9,22,37,.62); }
.modal-mask.open { display: flex; }
.modal { width: min(620px, 100%); max-height: 88vh; overflow: hidden; background: #fff; border-radius: 8px; box-shadow: 0 24px 70px rgba(0,0,0,.26); display: flex; flex-direction: column; }
.modal-head { min-height: 66px; padding: 0 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.modal-head h2 { margin: 0; font-size: 21px; }
.icon-button { width: 36px; height: 36px; border: 0; border-radius: 6px; color: #647388; background: #edf2f7; display: grid; place-items: center; font-size: 22px; }
.modal-body { padding: 3px 22px; overflow-y: auto; }
.privacy-section { padding: 17px 0; border-bottom: 1px solid var(--line); }
.privacy-section:last-child { border-bottom: 0; }
.privacy-section h3 { margin: 0 0 8px; color: var(--green-dark); font-size: 16px; }
.privacy-section p { margin: 7px 0 0; color: #58677a; font-size: 14px; line-height: 1.8; }
.modal-foot { padding: 14px 22px 20px; }

.toast { position: fixed; z-index: 100; left: 50%; bottom: 32px; max-width: min(420px, calc(100% - 32px)); padding: 11px 16px; border-radius: 6px; color: #fff; background: rgba(23,35,57,.94); font-size: 13px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: .2s; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

.login-page { min-height: 100vh; padding: 24px; display: grid; place-items: center; background: #e9eff5; }
.login-shell { width: min(420px, 100%); }
.login-brand { margin-bottom: 16px; display: flex; align-items: center; justify-content: center; gap: 11px; }
.login-card { padding: 28px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 18px 50px rgba(23,35,57,.12); }
.login-card h1 { margin: 0; font-size: 24px; text-align: center; }
.login-card > p { margin: 8px 0 22px; color: var(--muted); font-size: 13px; text-align: center; }
.login-fields { display: grid; gap: 14px; }
.back-home { display: block; margin-top: 14px; color: var(--muted); font-size: 13px; text-align: center; }
.admin-page { width: min(1320px, calc(100% - 32px)); margin: 0 auto; padding: 18px 0 22px; }
.admin-workspace { height: calc(100vh - 64px); overflow: hidden; display: flex; flex-direction: column; }
.admin-workspace > .panel { min-height: 0; flex: 1; padding-bottom: 12px; display: flex; flex-direction: column; }
.admin-workspace > .panel > .table-scroll { min-height: 0; flex: 1; overflow: auto; }
.admin-workspace .data-table thead { position: sticky; top: 0; z-index: 2; }
.admin-toolbar { margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.admin-tabs { display: flex; gap: 8px; }
.admin-tabs button { height: 40px; padding: 0 15px; border: 1px solid var(--line); border-radius: 6px; color: #5d6c80; background: #fff; font-weight: 800; }
.admin-tabs button.active { color: #fff; border-color: var(--navy); background: var(--navy); }
.pagination { margin-top: 16px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.pagination span { color: var(--muted); font-size: 13px; }
.json-summary { max-width: 380px; color: #536278; line-height: 1.55; white-space: normal; overflow-wrap: anywhere; }
.feedback-cell { min-width: 320px; max-width: 620px; white-space: pre-wrap; line-height: 1.65; }
.audio-dock { position: fixed; z-index: 20; right: 20px; bottom: 20px; width: min(420px, calc(100% - 40px)); padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 16px 45px rgba(23,35,57,.18); display: none; }
.audio-dock.show { display: block; }
.audio-dock-head { margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.audio-dock audio { width: 100%; }

/* Unified AI analysis */
.ai-analysis { min-width: 0; padding: 18px; overflow: auto; }
.ai-analysis.embedded { margin-top: 2px; padding: 16px 0 0; border-top: 1px solid var(--line); overflow: visible; }
.ai-analysis-head { min-width: 0; display: flex; align-items: center; gap: 10px; }
.ai-analysis-mark { width: 42px; height: 42px; border-radius: 8px; color: #72d5ba; background: #1e3850; display: grid; place-items: center; flex: 0 0 auto; font-size: 13px; font-weight: 900; position: relative; }
.ai-analysis-mark i { width: 7px; height: 7px; border-radius: 2px; background: #f0bd56; position: absolute; right: 7px; top: 7px; transform: rotate(45deg); }
.ai-analysis-mark i:first-child { width: 4px; height: 4px; right: auto; left: 7px; top: auto; bottom: 8px; background: #72d5ba; }
.ai-analysis-head > div { min-width: 0; flex: 1; }
.ai-analysis-head strong, .ai-analysis-head small { display: block; }
.ai-analysis-head strong { color: var(--ink); font-size: 16px; }
.ai-analysis-head small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.ai-risk { padding: 4px 7px; border-radius: 4px; font-size: 9px; font-weight: 800; white-space: nowrap; }
.ai-risk.good { color: #24745b; background: #e6f5ef; }
.ai-risk.warning { color: #886018; background: #fff3d8; }
.ai-risk.danger { color: #a33f38; background: #fde9e7; }
.ai-analysis-empty { margin-top: 16px; min-height: 84px; padding: 17px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); background: #f7fafc; font-size: 12px; line-height: 1.7; display: flex; align-items: center; }
.ai-analysis-empty.error { color: #9f433d; background: #fff5f4; }
.ai-analysis-loading { min-height: 112px; margin-top: 14px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: center; flex-direction: column; }
.ai-analysis-loading p { margin: 9px 0 0; color: var(--muted); font-size: 11px; }
.ai-analysis-summary { margin: 14px 0 0; color: var(--ink); font-size: 15px; line-height: 1.65; font-weight: 800; }
.ai-analysis-detail { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.ai-analysis-metrics { margin-top: 13px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.ai-analysis-metrics > div { min-width: 0; padding: 9px; border-left: 3px solid #c9d5e1; background: #f5f8fb; }
.ai-analysis-metrics > div.good { border-color: #55b996; }
.ai-analysis-metrics > div.warning { border-color: #dda33a; }
.ai-analysis-metrics > div.danger { border-color: #d9655d; }
.ai-analysis-metrics span, .ai-analysis-metrics strong { display: block; overflow-wrap: anywhere; }
.ai-analysis-metrics span { color: var(--muted); font-size: 9px; }
.ai-analysis-metrics strong { margin-top: 4px; font-size: 12px; }
.ai-analysis-columns { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.ai-analysis-columns b { font-size: 11px; }
.ai-analysis-columns p { margin: 7px 0 0; padding-left: 11px; color: #536278; font-size: 10px; line-height: 1.55; position: relative; }
.ai-analysis-columns p::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #54b595; position: absolute; left: 0; top: 6px; }
.map-ai-layout { min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(0,1fr); }
.map-ai-layout .map-panel { height: auto; min-height: 0; }
.analysis-drawer-mask { position: fixed; z-index: 80; inset: 0; background: rgba(8,20,31,.42); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
.analysis-drawer-mask.open { opacity: 1; pointer-events: auto; }
.analysis-drawer { position: fixed; z-index: 81; top: 0; right: 0; width: min(520px, calc(100vw - 32px)); height: 100vh; background: #fff; box-shadow: -20px 0 60px rgba(13,31,45,.2); transform: translateX(102%); transition: transform .24s ease; display: flex; flex-direction: column; }
.analysis-drawer.open { transform: translateX(0); }
.analysis-drawer > header { min-height: 76px; padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.analysis-drawer > header span, .analysis-drawer > header strong { display: block; }
.analysis-drawer > header span { color: var(--green-dark); font-size: 10px; font-weight: 800; }
.analysis-drawer > header strong { margin-top: 4px; color: var(--ink); font-size: 18px; }
.analysis-drawer-body { min-height: 0; padding: 20px; overflow-y: auto; }
.analysis-drawer-body .ai-analysis-summary { font-size: 17px; }
body.drawer-open { overflow: hidden; }

@media (max-width: 900px) {
  .topbar-inner { width: calc(100% - 24px); gap: 14px; }
  .brand-name { display: none; }
  .admin-link { display: none; }
  .page { width: calc(100% - 24px); padding-top: 18px; }
  .page.tool-page { width: 100%; padding: 18px 12px 22px; }
  .admin-workspace { height: auto; min-height: calc(100vh - 64px); overflow: visible; display: block; }
  .tool-grid, .two-col, .graphics-workspace, .noise-workspace, .air-workspace, .graphics-stage, .source-workspace { grid-template-columns: 1fr; }
  .graphics-import-bar { grid-template-columns: 1fr; }
  .graphics-toolbar { justify-content: flex-start; }
  .tool-page > .tool-grid > .panel { overflow: visible; }
  .module-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .material-list { overflow: visible; }
  .map-panel { height: calc(100vh - 170px); min-height: 520px; }
  .graphics-preview { min-height: 420px; }
  .environment-overview, .environment-analysis-grid { grid-template-columns: 1fr; }
  .map-ai-layout { grid-template-columns: 1fr; }
  .map-ai-layout .map-panel { height: 560px; }
  .ai-analysis-columns { grid-template-columns: 1fr; }
  .aqi-overview { min-height: 230px; }
  .indicator-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .home-environment-main { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .home-advice-block { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.1); }
  .home-environment-facts { grid-template-columns: repeat(4,minmax(0,1fr)); padding: 9px 14px; row-gap: 9px; }
  .home-environment-facts > small { grid-column: 1 / -1; padding: 0; text-align: left; }
}

@media (max-width: 620px) {
  .analysis-drawer { top: auto; bottom: 0; width: 100%; max-height: 82vh; height: auto; border-radius: 8px 8px 0 0; transform: translateY(102%); }
  .analysis-drawer.open { transform: translateY(0); }
  .analysis-drawer > header { min-height: 68px; }
  .analysis-drawer-body { padding: 16px; }
}

@media (max-width: 620px) {
  .topbar-inner { min-height: 58px; }
  .topbar { min-height: 58px; }
  .brand-mark { width: 32px; height: 32px; }
  .nav a { padding: 8px 9px; font-size: 13px; }
  .page-head { align-items: flex-start; flex-direction: column; gap: 5px; }
  .page-title { font-size: 24px; }
  .module-grid { grid-template-columns: 1fr; }
  .module-card:last-child { grid-column: auto; }
  .module-card { min-height: 96px; }
  .home-summary { padding: 18px 16px; }
  .home-summary h1 { font-size: 24px; }
  .home-stats { margin-top: 18px; }
  .home-stat strong { font-size: 22px; }
  .home-page { overflow-x: hidden; }
  .home-summary-top > .brand-mark { display: none; }
  .home-environment-head { padding: 12px; align-items: flex-start; }
  .home-environment-title { align-items: flex-start; flex-direction: column; gap: 7px; }
  .home-environment-title > div { padding-left: 0; border-left: 0; }
  .home-environment-title > span i { display: none; }
  .home-environment-actions { flex-direction: column; }
  .home-environment-actions button { min-height: 29px; }
  .home-environment-main { grid-template-columns: 1fr; }
  .home-environment-main > section { padding: 16px 14px; }
  .home-environment-main > section + section { border-left: 0; border-top: 1px solid rgba(255,255,255,.1); }
  .home-advice-block { grid-column: auto; }
  .home-weather-block { grid-template-columns: 60px minmax(0,1fr); }
  .home-weather-block > i { width: 60px; font-size: 50px; }
  .home-weather-reading strong { font-size: 34px; }
  .home-air-block { justify-content: center; }
  .home-aqi-gauge { width: 88px; height: 88px; }
  .home-environment-facts { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 12px; }
  .home-environment-facts > div { padding: 3px 8px; }
  .home-environment-facts > div:nth-child(2) { border-right: 0; }
  .home-environment-facts > div:nth-child(3) { padding-left: 0; }
  .home-environment-facts > small { grid-column: 1 / -1; }
  .panel-pad { padding: 16px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promo { min-height: 240px; padding: 21px; }
  .promo-content { width: 88%; }
  .promo h2 { font-size: 24px; }
  .table-input { width: 84px; }
  .hour-grid, .sample-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .noise-area-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .noise-area-options { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .noise-actions { flex-direction: column-reverse; }
  .noise-actions .button { width: 100%; }
  .stat-primary { grid-template-columns: 1fr; }
  .air-actions { flex-direction: column-reverse; }
  .air-actions .button { width: 100%; }
  .air-control-targets { grid-template-columns: 1fr; }
  .material-list { grid-template-columns: 1fr; }
  .materials-search-bar { align-items: stretch; flex-wrap: wrap; }
  .materials-search-input { flex-basis: 100%; }
  .materials-search-bar .button { flex: 1; }
  .materials-ai-hits { grid-template-columns: 1fr; }
  .graphics-summary { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .graphics-selectors { width: 100%; }
  .graphics-selectors label { min-width: 0; flex: 1; }
  .graphics-selectors .select { width: 100%; }
  .graphics-status-row { align-items: flex-start; flex-direction: column; }
  .graphics-preview .legend { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .source-file-bar { align-items: stretch; flex-wrap: wrap; }
  .source-file-bar #audioMeta { min-width: 180px; }
  .source-file-bar .button { width: 100%; }
  .source-process > div { min-width: 0; flex-direction: column; text-align: center; }
  .admin-page { width: calc(100% - 24px); }
  .admin-toolbar { align-items: flex-start; flex-direction: column; }
  .environment-toolbar { align-items: flex-start; flex-direction: column; gap: 10px; }
  .environment-toolbar .page-subtitle { max-width: none; }
  .environment-actions { width: 100%; flex-direction: row; }
  .environment-actions .button { min-height: 36px; padding: 0 11px; flex: 1; font-size: 12px; }
  .environment-overview { min-height: 0; }
  .weather-overview { padding: 20px; }
  .current-weather > i { width: 72px; font-size: 60px; }
  .current-weather strong { font-size: 54px; }
  .weather-facts { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 12px; }
  .weather-facts span { min-width: 0; }
  .weather-facts b { white-space: normal; overflow-wrap: anywhere; }
  .weather-facts span:nth-child(2) { border-right: 0; }
  .weather-facts span:nth-child(3) { padding-left: 0; }
  .aqi-overview { padding: 20px 14px; gap: 12px; justify-content: flex-start; }
  .aqi-gauge { width: 132px; height: 132px; padding: 13px; }
  .aqi-gauge-inner strong { font-size: 40px; }
  .aqi-copy { min-width: 0; max-width: none; flex: 1; }
  .aqi-copy > span { font-size: 16px; }
  .aqi-copy > small { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
  .environment-band { padding: 18px 14px; }
  .advice-columns { grid-template-columns: 1fr; gap: 12px; }
  .indicator-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hourly-weather-list { grid-template-columns: repeat(6,72px); overflow-x: auto; }
  .pollutant-row { grid-template-columns: 108px minmax(70px,1fr) 48px; gap: 7px; }
  .city-picker-mask { padding: 10px; align-items: flex-end; }
  .city-picker { max-height: 90vh; border-radius: 8px 8px 0 0; }
}

/* Product visual system: clearer hierarchy, calmer surfaces, stronger AI affordance. */
.topbar { background: #122a32; box-shadow: 0 3px 12px rgba(10,30,37,.12); }
.topbar-inner { width: min(1320px, calc(100% - 32px)); gap: 17px; }
.brand-name { font-size: 16px; }
.nav { gap: 1px; }
.nav a { padding: 9px 8px; color: rgba(255,255,255,.72); font-size: 13px; }
.nav a:hover { background: rgba(255,255,255,.07); }
.nav a.active { color: #fff; background: rgba(91,199,169,.16); box-shadow: inset 0 -2px #62c9ad; }
.admin-link { padding: 8px 10px; font-size: 12px; }

.home-summary { padding: 4px 0 0; color: var(--ink); background: transparent; border-radius: 0; box-shadow: none; overflow: visible; }
.home-summary h1 { color: var(--ink); font-size: 30px; }
.home-summary-top { padding: 0 4px 2px; align-items: center; }
.home-summary-top p { margin-top: 6px; color: var(--muted); }
.home-summary .eyebrow { color: var(--green); }
.home-summary-top > .brand-mark { background: #1c4650; box-shadow: 0 7px 18px rgba(20,55,64,.16); }
.home-environment { margin-top: 15px; border-color: rgba(255,255,255,.13); border-radius: 8px; background: #18353e; box-shadow: 0 12px 30px rgba(17,45,53,.16); }
.home-environment-head { background: rgba(255,255,255,.025); }
.home-stats { margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.9); box-shadow: var(--shadow); overflow: hidden; }
.home-stat { padding: 10px; border-right-color: var(--line); }
.home-stat strong { color: var(--ink); font-size: 22px; }
.home-stat span { color: var(--muted); font-size: 11px; }
.module-heading { margin: 17px 0 10px; }
.module-heading h2 { color: var(--ink); font-size: 21px; }
.module-card { min-height: 116px; padding: 15px; border-color: var(--line); border-radius: 8px; box-shadow: 0 5px 15px rgba(21,52,62,.055); position: relative; overflow: hidden; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.module-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #4b8fd7; }
.module-card:nth-child(2)::before { background: #d49a34; }
.module-card:nth-child(3)::before, .module-card:nth-child(4)::before { background: #36a483; }
.module-card:nth-child(5)::before { background: #6c72cf; }
.module-card:nth-child(6)::before { background: #4f83d8; }
.module-card:nth-child(7)::before { background: #2f9677; }
.module-card:nth-child(8)::before { background: #7892aa; }
.module-card:hover { border-color: #9fcdbf; box-shadow: 0 10px 24px rgba(21,66,61,.1); transform: translateY(-2px); }
.module-card > span:last-child { min-width: 0; }
.module-card em { display: inline-block; margin-bottom: 5px; color: var(--green); font-size: 10px; line-height: 1; font-style: normal; font-weight: 800; }
.module-card h3 { color: var(--ink); font-size: 16px; line-height: 1.25; }
.module-card p { margin-top: 5px; font-size: 12px; line-height: 1.45; }
.module-icon { width: 50px; height: 50px; }

.page-head { min-height: 76px; }
.page-title { font-size: 27px; }
.page-subtitle { max-width: 720px; }
.panel { border-color: var(--line); box-shadow: 0 5px 16px rgba(18,48,58,.055); }
.button { background: var(--green); box-shadow: 0 3px 8px rgba(22,131,106,.12); }
.button.secondary { box-shadow: none; }
.segmented button.active { background: #17343d; }
.result-main { background: #17343d; box-shadow: 0 9px 22px rgba(18,50,59,.13); }

.ai-analysis-head { gap: 12px; }
.ai-analysis-mark { width: 44px; height: 44px; color: #73d4b8; background: #173b46; }
.ai-analysis-head strong { font-size: 16px; line-height: 1.3; }
.ai-analysis-head small { margin-top: 4px; font-size: 11px; }
.ai-risk { padding: 5px 8px; border-radius: 5px; font-size: 10px; }
.ai-analysis-empty { min-height: 88px; padding: 18px; color: #607181; background: #f3f7f8; font-size: 13px; }
.ai-analysis-summary { margin-top: 16px; font-size: 15px; line-height: 1.6; }
.ai-analysis-detail { font-size: 12px; line-height: 1.65; }
.ai-analysis-metrics { gap: 7px; }
.ai-analysis-metrics > div { padding: 10px; background: #f1f6f7; }
.ai-analysis-metrics span { font-size: 10px; }
.ai-analysis-metrics strong { font-size: 13px; line-height: 1.35; }
.ai-analysis-columns { gap: 16px; }
.ai-analysis-columns b { font-size: 12px; }
.ai-analysis-columns p { color: #526676; font-size: 11px; line-height: 1.6; }

@media (max-width: 900px) {
  .topbar-inner { width: calc(100% - 24px); }
  .home-summary { padding-top: 2px; }
  .module-card { min-height: 112px; }
}

@media (max-width: 620px) {
  .home-summary-top { padding: 0 2px 2px; }
  .home-summary h1 { font-size: 25px; }
  .home-stats { margin-top: 10px; }
  .module-heading { align-items: flex-start; gap: 5px; flex-direction: column; }
  .module-card { min-height: 102px; }
  .module-card em { margin-bottom: 4px; }
}

/* Home environment contrast pass */
.home-environment {
  color: #f7fbfc;
  background: #193b44;
}
.home-environment-title strong,
.home-weather-reading strong,
.home-advice-title > span { color: #ffffff; }
.home-environment-title small { color: rgba(255,255,255,.68); }
.home-environment-title > span i { color: rgba(255,255,255,.62); }
.home-weather-reading span { color: rgba(255,255,255,.94); }
.home-weather-reading small { color: rgba(255,255,255,.68); }
.home-weather-quick span { color: rgba(255,255,255,.64); }
.home-weather-quick b { color: #ffffff; }
.home-air-copy > small { color: rgba(255,255,255,.66); }
.home-pollutants span { color: rgba(255,255,255,.78); }
.home-pollutants i { color: rgba(255,255,255,.58); }
.home-advice-block > p { color: rgba(255,255,255,.92); }
.home-advice-title > small { color: #a9e6d5; background: rgba(101,211,181,.15); }
.home-suitable-list span { color: #b5eadc; background: rgba(111,213,187,.1); border-color: rgba(127,212,192,.3); }
.home-advice-foot small { color: rgba(255,255,255,.62); }
.home-advice-foot b { color: #8dcbf4; }
.home-environment-facts span { color: rgba(255,255,255,.62); }
.home-environment-facts strong { color: #ffffff; }
.home-environment-facts > small { color: rgba(255,255,255,.58); }

/* 2026 light environmental product system */
.topbar {
  min-height: 64px;
  color: var(--ink);
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid #e4ecef;
  box-shadow: 0 2px 12px rgba(42,51,66,.04);
  backdrop-filter: blur(14px);
}
.topbar-inner { width: min(1440px, calc(100% - 48px)); }
.topbar .brand-mark { background: #e9f7f9; }
.topbar .brand-mark i { background: #62b983; }
.topbar .brand-mark i:nth-child(2) { background: #42b8c8; }
.topbar .brand-mark i:nth-child(3) { background: #c99546; }
.brand-name { color: #2a3342; }
.nav a { color: #5d6674; border-radius: 8px; font-weight: 600; }
.nav a:hover { color: #238d9c; background: #eef9fa; }
.nav a.active { color: #237f8c; background: #e3f5f7; box-shadow: inset 0 -2px 0 #42b8c8; }
.admin-link { color: #4f5d6b; border-color: #d7e2e7; border-radius: 8px; background: #fff; }
.admin-link:hover { color: #237f8c; border-color: #9cd9e1; background: #f4fbfc; }

.page { width: min(1440px, calc(100% - 48px)); }
.panel { border-color: #dce6eb; border-radius: 12px; box-shadow: var(--shadow); }
.button { border-radius: 9px; color: #fff; background: #42b8c8; box-shadow: none; }
.button:hover { background: #299cac; }
.button.secondary { color: #56616f; background: #edf2f5; }
.button.secondary:hover { background: #e2eaee; }
.button.danger { color: #bd5145; background: #fdeceb; }
.input, .select, .textarea { border-color: #ccdbe1; border-radius: 9px; }
.input:focus, .select:focus, .textarea:focus { border-color: #42b8c8; box-shadow: 0 0 0 3px rgba(66,184,200,.13); }
.segmented { border-color: #d9e5e9; border-radius: 10px; background: #eef4f6; }
.segmented button { border-radius: 7px; }
.segmented button.active { color: #237f8c; background: #fff; box-shadow: 0 2px 8px rgba(42,51,66,.08); }
.result-main { color: #2a3342; background: #eef8f9; border: 1px solid #cfe9ed; border-radius: 12px; box-shadow: none; }
.result-main .metric { border-color: #d5e9ec; background: rgba(255,255,255,.82); }
.result-main .metric-label { color: #66727e; }
.result-main .metric-value { color: #2a3342; }
.result-main .eyebrow { color: #238d9c; }

.home-page { padding-top: 26px; padding-bottom: 42px; }
.home-intro { min-height: 88px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.home-intro h1 { margin: 4px 0 0; color: #2a3342; font-size: 30px; line-height: 1.25; }
.home-intro p { margin: 7px 0 0; color: #666; font-size: 14px; }
.home-intro .eyebrow { color: #299cac; }
.home-live-status { min-width: 184px; padding: 12px 14px; border: 1px solid #dce9ec; border-radius: 12px; background: #fff; display: grid; grid-template-columns: 10px 1fr; column-gap: 9px; align-items: center; }
.home-live-status i { width: 9px; height: 9px; border-radius: 50%; background: #62b983; box-shadow: 0 0 0 4px rgba(98,185,131,.13); grid-row: span 2; }
.home-live-status span { color: #7a838e; font-size: 11px; }
.home-live-status strong { margin-top: 2px; color: #2a3342; font-size: 13px; }

.home-environment {
  color: #2a3342;
  border: 1px solid #dbe7eb;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(42,51,66,.07);
  overflow: hidden;
}
.home-environment-head { min-height: 76px; padding: 14px 18px; border-bottom: 1px solid #e3ecef; background: #fff; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.home-environment-title { display: flex; align-items: center; gap: 20px; min-width: 0; }
.home-environment-title > span { color: #238d9c; font-size: 13px; font-weight: 800; white-space: nowrap; }
.home-environment-title > span i { margin-left: 7px; color: #88919b; font-size: 11px; font-style: normal; font-weight: 500; }
.home-environment-title > div { min-width: 0; padding-left: 20px; border-left: 1px solid #dce6eb; }
.home-environment-title strong, .home-environment-title small { display: block; }
.home-environment-title strong { color: #2a3342; font-size: 21px; line-height: 1.25; }
.home-environment-title small { margin-top: 4px; color: #777; font-size: 11px; }
.home-environment-actions { display: flex; gap: 8px; }
.home-environment-actions button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 9px; color: #59636f; background: #edf2f5; font-size: 12px; font-weight: 700; }
.home-environment-actions button:last-child { color: #fff; background: #42b8c8; }
.home-environment-actions button:hover { background: #e1e9ed; }
.home-environment-actions button:last-child:hover { background: #299cac; }

.home-environment-layout { display: grid; grid-template-columns: minmax(0, 1.38fr) minmax(360px, .72fr); min-height: 330px; }
.home-environment-visual {
  --city-image: linear-gradient(135deg,#dff3f5,#f2faf8);
  min-width: 0;
  min-height: 330px;
  padding: 28px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) 230px;
  grid-template-rows: 1fr auto;
  gap: 20px;
  color: #fff;
  background-image: linear-gradient(90deg,rgba(32,54,64,.82),rgba(32,54,64,.38)), var(--city-image);
  background-size: cover;
  background-position: center;
  isolation: isolate;
  overflow: hidden;
}
.home-weather-atmosphere { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .45; }
.home-environment[data-weather="sun"] .home-weather-atmosphere { background: linear-gradient(125deg,rgba(255,243,192,.42),transparent 45%); }
.home-environment[data-weather="partly"] .home-weather-atmosphere,
.home-environment[data-weather="cloud"] .home-weather-atmosphere { background: linear-gradient(180deg,rgba(225,236,240,.18),rgba(63,82,91,.1)); }
.home-environment[data-weather="rain"] .home-weather-atmosphere { opacity: .34; background-image: repeating-linear-gradient(108deg,transparent 0 22px,rgba(220,241,247,.7) 23px 24px,transparent 25px 45px); }
.home-environment[data-weather="fog"] .home-weather-atmosphere { opacity: .5; background: linear-gradient(180deg,rgba(238,245,246,.45),rgba(210,223,226,.14)); }
.home-weather-block { min-width: 0; align-self: center; display: block; }
.home-weather-primary { display: flex; align-items: center; gap: 18px; }
.home-weather-primary > i { width: 74px; color: #fff; font-size: 64px; line-height: 1; text-align: center; filter: drop-shadow(0 3px 10px rgba(20,32,40,.18)); }
.home-weather-reading > div { display: flex; align-items: baseline; gap: 12px; }
.home-weather-reading strong { color: #fff; font-size: 56px; line-height: 1; font-weight: 700; }
.home-weather-reading span { color: rgba(255,255,255,.96); font-size: 16px; }
.home-weather-reading small { display: block; margin-top: 8px; color: rgba(255,255,255,.78); font-size: 13px; }
.home-weather-quick { margin-top: 22px; display: flex; gap: 24px; }
.home-weather-quick span { color: rgba(255,255,255,.74); font-size: 12px; }
.home-weather-quick b { margin-left: 5px; color: #fff; font-size: 14px; }
.home-air-block { align-self: center; padding: 18px; border: 1px solid rgba(255,255,255,.26); border-radius: 14px; background: rgba(255,255,255,.16); backdrop-filter: blur(10px); display: flex; align-items: center; gap: 15px; }
.home-aqi-gauge { width: 80px; height: 80px; padding: 7px; border-radius: 50%; background: conic-gradient(#62b983 var(--aqi-progress,0deg),rgba(255,255,255,.23) 0); display: grid; place-items: center; flex: 0 0 auto; }
.home-aqi-gauge > div { width: 100%; height: 100%; border-radius: 50%; background: rgba(34,55,64,.78); display: flex; align-items: center; justify-content: center; flex-direction: column; }
.home-aqi-gauge small { color: rgba(255,255,255,.7); font-size: 10px; }
.home-aqi-gauge strong { margin-top: 1px; color: #fff; font-size: 28px; line-height: 1; }
.home-air-copy { min-width: 0; }
.home-air-copy > span, .home-air-copy > small { display: block; }
.home-air-copy > span { color: #fff; font-size: 15px; font-weight: 800; }
.home-air-copy > small { margin-top: 8px; color: rgba(255,255,255,.74); font-size: 11px; line-height: 1.45; }
.home-environment-facts { grid-column: 1 / -1; min-width: 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.25); display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; }
.home-environment-facts > div { min-width: 0; padding: 0 16px; border-right: 1px solid rgba(255,255,255,.22); }
.home-environment-facts > div:first-child { padding-left: 0; }
.home-environment-facts > div:last-child { border-right: 0; }
.home-environment-facts span, .home-environment-facts strong { display: block; }
.home-environment-facts span { color: rgba(255,255,255,.68); font-size: 10px; }
.home-environment-facts strong { margin-top: 5px; color: #fff; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.home-advice-block { min-width: 0; padding: 28px; border-left: 1px solid #e1ebee; color: #2a3342; background: linear-gradient(145deg,#f5fbfc,#fff 55%); display: flex; flex-direction: column; }
.home-advice-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.home-advice-title > div { display: flex; align-items: center; gap: 10px; }
.home-advice-title > div i { width: 34px; height: 34px; border-radius: 10px; color: #238d9c; background: #def3f5; display: grid; place-items: center; font-size: 12px; font-style: normal; font-weight: 900; }
.home-advice-title > div span { color: #2a3342; font-size: 17px; font-weight: 800; }
.home-advice-title > small { padding: 5px 8px; border-radius: 7px; color: #34845a; background: #e7f5ec; font-size: 10px; }
.home-advice-block > p { margin: 28px 0 0; color: #3f4b59; font-size: 17px; line-height: 1.7; font-weight: 650; }
.home-pollutants { margin-top: 22px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.home-pollutants span { min-width: 0; padding: 10px 7px; border: 1px solid #dfeaec; border-radius: 9px; color: #4e5c68; background: #fff; font-size: 11px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-pollutants i { color: #7a858e; font-style: normal; }
.home-suitable-list { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 7px; }
.home-suitable-list span { padding: 6px 9px; border: 1px solid #cfe8d8; border-radius: 8px; color: #3c835a; background: #eff8f2; font-size: 11px; }
.home-advice-foot { margin-top: auto; padding-top: 22px; border-top: 1px solid #e4edef; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.home-advice-foot small { min-width: 0; color: #777; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-advice-foot a { color: #238d9c; font-size: 12px; font-weight: 800; white-space: nowrap; }
.home-advice-foot a i { margin-left: 4px; font-style: normal; }
.home-data-status { min-height: 36px; padding: 0 18px; border-top: 1px solid #e7eef0; background: #fbfdfd; display: flex; align-items: center; gap: 8px; }
.home-data-status i { width: 6px; height: 6px; border-radius: 50%; background: #62b983; }
.home-data-status small { color: #7b858e; font-size: 10px; }
.home-environment[data-state="loading"] .home-environment-layout { opacity: .72; }
.home-environment[data-state="error"] { border-color: rgba(232,117,102,.55); }
.home-environment[data-state="error"] .home-data-status i { background: #e87566; }

.home-stats { margin: 18px 0 28px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.home-stat { min-width: 0; min-height: 98px; padding: 18px 20px; border: 1px solid #dce6eb; border-radius: 12px; background: #fff; box-shadow: 0 7px 20px rgba(42,51,66,.045); display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; }
.home-stat > span { color: #747e88; font-size: 11px; }
.home-stat > strong { color: #2a3342; font-size: 28px; line-height: 1; grid-row: span 2; }
.home-stat > small { margin-top: 8px; color: #238d9c; font-size: 13px; font-weight: 800; }

.module-heading { margin: 0 0 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.module-heading .eyebrow { margin-bottom: 4px; color: #299cac; font-size: 10px; }
.module-heading h2 { margin: 0; color: #2a3342; font-size: 23px; }
.module-heading > span { color: #777; font-size: 12px; }
.module-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.module-card { min-height: 132px; padding: 18px; border: 1px solid #dce6eb; border-radius: 12px; background: #fff; box-shadow: 0 7px 20px rgba(42,51,66,.045); display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 14px; align-items: start; position: relative; overflow: hidden; transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.module-card::before { content: none; }
.module-card:hover { border-color: #a9dce2; box-shadow: 0 12px 28px rgba(42,51,66,.08); transform: translateY(-2px); }
.module-card .module-icon { width: 48px; height: 48px; border-radius: 12px; color: #238d9c; background: #e8f7f9; display: grid; place-items: center; font-size: 11px; font-weight: 900; }
.module-card:nth-child(2) .module-icon { color: #9a6d2c; background: #fbf3e6; }
.module-card:nth-child(3) .module-icon,
.module-card:nth-child(4) .module-icon { color: #3c835a; background: #eaf6ee; }
.module-card:nth-child(5) .module-icon { color: #627184; background: #eef2f5; }
.module-card:nth-child(6) .module-icon { color: #397f89; background: #e8f7f9; }
.module-card:nth-child(7) .module-icon { color: #3f7f5a; background: #eaf6ee; }
.module-card:nth-child(8) .module-icon { color: #66727e; background: #eef2f5; }
.module-card > span:last-child { min-width: 0; }
.module-card em { margin: 0 0 6px; color: #238d9c; font-size: 9px; }
.module-card h3 { margin: 0; color: #2a3342; font-size: 15px; line-height: 1.35; }
.module-card p { margin: 7px 0 0; color: #6c747d; font-size: 11px; line-height: 1.55; }

@media (max-width: 1120px) {
  .home-environment-layout { grid-template-columns: minmax(0,1.2fr) minmax(330px,.8fr); }
  .home-environment-visual { grid-template-columns: minmax(0,1fr) 200px; padding: 24px; }
  .home-advice-block { padding: 24px; }
  .module-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 820px) {
  .topbar-inner { width: calc(100% - 24px); gap: 14px; }
  .brand-name { display: none; }
  .admin-link { display: none; }
  .page { width: calc(100% - 24px); }
  .home-page { padding-top: 16px; }
  .home-intro { min-height: 76px; margin-bottom: 14px; }
  .home-intro h1 { font-size: 25px; }
  .home-live-status { display: none; }
  .home-environment-title { gap: 12px; }
  .home-environment-title > div { padding-left: 12px; }
  .home-environment-layout { grid-template-columns: 1fr; }
  .home-environment-visual { min-height: 320px; }
  .home-advice-block { min-height: 270px; border-left: 0; border-top: 1px solid #e1ebee; }
}

@media (max-width: 620px) {
  .home-intro p { max-width: 310px; font-size: 12px; }
  .home-environment-head { align-items: flex-start; }
  .home-environment-title { align-items: flex-start; flex-direction: column; gap: 5px; }
  .home-environment-title > div { padding-left: 0; border-left: 0; }
  .home-environment-actions button { padding: 0 10px; }
  .home-environment-visual { min-height: 350px; padding: 22px; grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .home-air-block { width: fit-content; padding: 12px 14px; }
  .home-aqi-gauge { width: 66px; height: 66px; }
  .home-weather-reading strong { font-size: 46px; }
  .home-environment-facts { grid-column: auto; grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 14px; }
  .home-environment-facts > div { padding: 0 10px; }
  .home-environment-facts > div:nth-child(2) { border-right: 0; }
  .home-environment-facts > div:nth-child(3) { padding-left: 0; }
  .home-advice-block { padding: 22px; }
  .home-advice-block > p { margin-top: 20px; font-size: 15px; }
  .home-stats { grid-template-columns: 1fr; gap: 9px; }
  .home-stat { min-height: 76px; padding: 14px 16px; }
  .module-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .module-grid { grid-template-columns: 1fr; gap: 10px; }
  .module-card { min-height: 110px; }
}

/* City environment visual system */
.environment-page { gap: 16px; }
.environment-toolbar { min-height: 82px; }
.environment-toolbar .eyebrow { color: #299cac; }
.environment-actions .button { min-height: 38px; }
.environment-content { gap: 16px; }
.environment-status { border-left-color: #c99546; border-radius: 8px; background: #fff8eb; }
.environment-overview { min-height: 352px; border: 1px solid #dce6eb; border-radius: 16px; color: #2a3342; background: #fff; box-shadow: 0 16px 40px rgba(42,51,66,.07); grid-template-columns: minmax(0,1.42fr) minmax(340px,.58fr); }
.weather-overview {
  --city-image: linear-gradient(135deg,#dff3f5,#f3faf9);
  min-height: 352px;
  padding: 30px 32px;
  position: relative;
  color: #fff;
  background-image: linear-gradient(90deg,rgba(31,52,61,.82),rgba(31,52,61,.36)),var(--city-image);
  background-size: cover;
  background-position: center;
  isolation: isolate;
  overflow: hidden;
}
.environment-weather-atmosphere { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .42; }
.environment-overview[data-weather="sun"] .environment-weather-atmosphere { background: linear-gradient(125deg,rgba(255,244,196,.42),transparent 48%); }
.environment-overview[data-weather="partly"] .environment-weather-atmosphere,
.environment-overview[data-weather="cloud"] .environment-weather-atmosphere { background: linear-gradient(180deg,rgba(224,235,239,.2),rgba(76,94,101,.12)); }
.environment-overview[data-weather="rain"] .environment-weather-atmosphere { opacity: .3; background-image: repeating-linear-gradient(108deg,transparent 0 24px,rgba(221,242,247,.7) 25px 26px,transparent 27px 49px); }
.environment-overview[data-weather="fog"] .environment-weather-atmosphere { opacity: .5; background: linear-gradient(180deg,rgba(239,245,246,.48),rgba(210,223,226,.15)); }
.environment-location { position: relative; z-index: 1; }
.environment-location span { color: #fff; font-size: 26px; }
.environment-location small { color: rgba(255,255,255,.72); }
.current-weather { position: relative; z-index: 1; }
.current-weather > i { color: #fff; filter: drop-shadow(0 3px 10px rgba(20,32,40,.18)); }
.current-weather strong, .current-weather > div > span { color: #fff; }
.weather-range { position: relative; z-index: 1; color: rgba(255,255,255,.74); }
.weather-range b { color: #fff; }
.weather-facts { position: relative; z-index: 1; border-top-color: rgba(255,255,255,.25); }
.weather-facts span { border-right-color: rgba(255,255,255,.22); }
.weather-facts small { color: rgba(255,255,255,.68); }
.weather-facts b { color: #fff; }
.city-photo-credit { position: absolute; right: 12px; bottom: 9px; z-index: 2; color: rgba(255,255,255,.68); font-size: 9px; }
.city-photo-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.aqi-overview { padding: 28px; color: #2a3342; background: #fff; display: flex; align-items: stretch; justify-content: flex-start; flex-direction: column; gap: 16px; }
.aqi-gauge { width: 100%; height: 116px; padding: 18px 20px 28px; border: 1px solid #d7e9ec; border-radius: 12px; background: #f0f9fa; box-shadow: none; position: relative; }
.aqi-gauge::before { content: none; }
.aqi-gauge-inner { height: auto; border-radius: 0; background: transparent; box-shadow: none; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: end; justify-items: start; }
.aqi-gauge-inner small { color: #6d7781; font-size: 10px; grid-column: 1; }
.aqi-gauge-inner strong { margin-top: 4px; color: #2a3342; font-size: 42px; line-height: 1; grid-column: 1; grid-row: 2; }
.aqi-gauge-inner span { margin: 0; padding: 5px 9px; border-radius: 7px; color: #3f855b; background: #e6f5eb; font-size: 11px; grid-column: 2; grid-row: 1 / 3; align-self: center; }
.aqi-gauge > i { width: calc(var(--aqi-level,0%) - 32px); max-width: calc(100% - 32px); height: 6px; position: absolute; left: 16px; top: auto; bottom: 13px; border-radius: 6px; background: #62b983; transform: none !important; transform-origin: initial; transition: width .5s ease; }
.aqi-gauge > i::after { content: none; }
.aqi-gauge.good > i { background: #42b8c8; }
.aqi-gauge.light > i,
.aqi-gauge.moderate > i,
.aqi-gauge.heavy > i,
.aqi-gauge.severe > i { background: #e87566; }
.aqi-gauge.good .aqi-gauge-inner span { color: #237f8c; background: #e3f5f7; }
.aqi-gauge.light .aqi-gauge-inner span,
.aqi-gauge.moderate .aqi-gauge-inner span,
.aqi-gauge.heavy .aqi-gauge-inner span,
.aqi-gauge.severe .aqi-gauge-inner span { color: #b14e43; background: #fdeceb; }
.aqi-copy { max-width: none; }
.aqi-copy > span { color: #2a3342; font-size: 18px; }
.aqi-copy p { color: #666; }
.aqi-copy > small { color: #666; font-size: 11px; }
.aqi-level-scale { margin-top: auto; padding-top: 14px; border-top: 1px solid #e3ecef; position: relative; display: grid; grid-template-columns: repeat(5,1fr); gap: 4px; }
.aqi-level-scale > i { height: 6px; position: absolute; left: 0; right: 0; top: 0; border-radius: 6px; background: linear-gradient(90deg,#62b983 0 20%,#42b8c8 20% 40%,rgba(232,117,102,.55) 40% 70%,#e87566 70%); }
.aqi-level-scale span { color: #7a838e; font-size: 9px; text-align: center; }

.environment-band { padding: 24px 26px; border: 1px solid #dce6eb; border-radius: 12px; background: #fff; box-shadow: 0 7px 22px rgba(42,51,66,.04); }
.band-heading .eyebrow { color: #299cac; }
.advice-source { border-radius: 7px; color: #3f855b !important; background: #e8f5ec; }
.advice-main { border-left-color: #42b8c8; border-radius: 0 9px 9px 0; background: #eff9fa; }
.advice-main p { color: #59636f; }
.advice-indicator { border-radius: 10px; box-shadow: none; }
.advice-indicator.good > span { color: #3f855b; background: #e8f5ec; }
.advice-indicator.warning > span,
.advice-indicator.danger > span { color: #b14e43; background: #fdeceb; }
.pollutant-track { background: #e8eff2; }
.pollutant-track i { background: #62b983; }
.pollutant-track i.good { background: #42b8c8; }
.pollutant-track i.light,
.pollutant-track i.moderate,
.pollutant-track i.heavy,
.pollutant-track i.severe { background: #e87566; }
.air-hour { border-bottom-color: #62b983; }
.air-hour.good { border-bottom-color: #42b8c8; }
.air-hour.light,
.air-hour.moderate,
.air-hour.heavy,
.air-hour.severe { border-bottom-color: #e87566; }

@media (max-width: 920px) {
  .environment-overview { grid-template-columns: 1fr; }
  .weather-overview { min-height: 340px; }
  .aqi-overview { display: grid; grid-template-columns: minmax(220px,.7fr) minmax(0,1fr); }
  .aqi-level-scale { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .environment-toolbar { align-items: flex-start; flex-direction: column; }
  .weather-overview { min-height: 380px; padding: 24px; }
  .weather-facts { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 16px; }
  .weather-facts span:nth-child(2) { border-right: 0; }
  .aqi-overview { padding: 22px; display: flex; }
  .environment-band { padding: 20px; }
}

/* Map analysis reusable drawer */
.map-page .page-head { margin-bottom: 16px; }
.map-page .map-panel { border-radius: 12px; box-shadow: var(--shadow); }
.analysis-drawer-mask { display: none; background: rgba(42,51,66,.24); }
.analysis-drawer { top: 64px; width: min(480px,calc(100vw - 76px)); height: calc(100vh - 64px); border-left: 1px solid #dce6eb; background: #fff; box-shadow: -12px 0 32px rgba(42,51,66,.1); transition: transform .24s ease,width .24s ease; }
.analysis-drawer.open.collapsed { width: 58px; }
.analysis-drawer > header { min-height: 72px; padding: 14px 18px; }
.analysis-drawer > header span { color: #299cac; }
.analysis-drawer-body { padding: 22px; }
.analysis-drawer-handle { width: 42px; height: 74px; padding: 0; border: 1px solid #cfe3e7; border-right: 0; border-radius: 10px 0 0 10px; color: #237f8c; background: #fff; box-shadow: -7px 5px 18px rgba(42,51,66,.09); position: absolute; left: -42px; top: 22px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 7px; }
.analysis-drawer-handle span { font-size: 11px; font-weight: 900; }
.analysis-drawer-handle i { font-size: 20px; line-height: 1; font-style: normal; transition: transform .2s ease; }
.analysis-drawer.collapsed > header,
.analysis-drawer.collapsed > .analysis-drawer-body { display: none; }
.analysis-drawer.collapsed .analysis-drawer-handle { width: 58px; height: 100%; border: 0; border-radius: 0; box-shadow: none; left: 0; top: 0; background: #eef9fa; }
.analysis-drawer.collapsed .analysis-drawer-handle i { transform: rotate(180deg); }

@media (max-width: 620px) {
  .analysis-drawer-mask { display: block; }
  .analysis-drawer { top: auto; bottom: 0; width: 100%; max-height: 82vh; height: auto; border-left: 0; border-top: 1px solid #dce6eb; border-radius: 14px 14px 0 0; transform: translateY(102%); }
  .analysis-drawer.open { transform: translateY(0); }
  .analysis-drawer.open.collapsed { width: 100%; height: 54px; min-height: 54px; }
  .analysis-drawer-handle { width: 72px; height: 38px; left: auto; right: 14px; top: -38px; border: 1px solid #cfe3e7; border-bottom: 0; border-radius: 9px 9px 0 0; flex-direction: row; }
  .analysis-drawer.collapsed .analysis-drawer-handle { width: 100%; height: 54px; position: static; flex-direction: row; }
  .analysis-drawer-body { max-height: calc(82vh - 68px); }
}

/* Noise and air workspaces */
.noise-workspace,
.air-workspace { grid-template-columns: minmax(620px,1.4fr) minmax(390px,.72fr); gap: 16px; }
.noise-area-flow { border: 1px solid #dbe7ea; border-left: 4px solid #42b8c8; border-radius: 10px; background: #f6fbfc; }
.noise-area-heading > div:first-child span { color: #299cac; }
.noise-area-options { gap: 8px; }
.noise-area-options button { min-height: 56px; border-color: #d7e3e7; border-radius: 9px; color: #666; }
.noise-area-options button:hover { border-color: #9cd9e1; }
.noise-area-options button.active { border-color: #42b8c8; color: #237f8c; background: #e9f7f9; box-shadow: inset 0 0 0 1px #42b8c8; }
.hour-grid,
.sample-grid { border-color: #dce6eb; border-radius: 0 0 10px 10px; background: #f7fafc; gap: 8px; }
.hour-entry,
.sample-entry { border-color: #dbe5ea; border-radius: 9px; }
.hour-entry:focus-within { border-color: #42b8c8; box-shadow: 0 0 0 2px rgba(66,184,200,.12); }
.sample-remove { border-radius: 8px; color: #c9584c; background: #fdeceb; }
.noise-ai-focus,
.air-ai-focus { min-height: 270px; border-top: 4px solid #42b8c8; border-radius: 12px; }
.calculation-details summary::after,
.air-detail-panel summary::after { color: #42b8c8; }
.calculation-details .notice,
.air-detail-panel > .notice { border-left-color: #42b8c8; background: #eff9fa; }
.stat-primary > div { border-left-color: #42b8c8; background: #eff9fa; }

.air-entry-column { min-width: 0; display: grid; gap: 16px; }
.air-results-panel { overflow: hidden; }
.air-results-panel > header { padding: 14px 16px; border-bottom: 1px solid #dce6eb; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.air-results-panel header span,
.air-results-panel header strong { display: block; }
.air-results-panel header span { color: #299cac; font-size: 10px; font-weight: 800; }
.air-results-panel header strong { margin-top: 3px; color: #2a3342; font-size: 17px; }
.air-results-panel header small { color: #777; font-size: 10px; }
.air-results-panel .air-detail-body { padding-top: 14px; }
.air-control-panel { border-top-color: #62b983; }
.air-control-panel header span { color: #3f855b; }
.air-control-targets > div { border-left-color: #62b983; background: #eff8f2; }
.air-control-targets > div.danger { border-color: #e87566; background: #fdeceb; }
.material-tabs button.active { color: #237f8c; border-color: #42b8c8; background: #e9f7f9; }

@media (max-width: 900px) {
  .noise-workspace,
  .air-workspace { grid-template-columns: 1fr; }
}

/* Pollution atlas workbench */
.graphics-product-workspace { gap: 14px; }
.graphics-workbench { padding: 0; overflow: hidden; }
.graphics-flow { min-height: 42px; padding: 0 16px; border-bottom: 1px solid #e2ebee; background: #f8fbfc; display: flex; align-items: center; gap: 26px; }
.graphics-flow span { color: #7a838e; font-size: 10px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.graphics-flow i { width: 20px; height: 20px; border: 1px solid #ccdbe0; border-radius: 50%; color: #77838d; background: #fff; display: grid; place-items: center; font-style: normal; }
.graphics-flow span.active { color: #237f8c; }
.graphics-flow span.active i { color: #fff; border-color: #42b8c8; background: #42b8c8; }
.graphics-command-row { min-height: 84px; padding: 14px 16px; display: grid; grid-template-columns: minmax(280px,1fr) auto auto; align-items: center; gap: 16px; }
.graphics-file-control { min-width: 0; gap: 12px; }
.graphics-file-control label { min-width: 136px; min-height: 46px; padding: 0 12px; border: 1px dashed #9cd4dc; border-radius: 10px; color: #237f8c; background: #eef9fa; align-items: center; justify-content: center; flex-direction: row; gap: 9px; }
.graphics-file-control label span:not(.upload-line-icon) { display: none; }
.graphics-file-control label strong { margin: 0; font-size: 12px; }
.upload-line-icon { width: 18px; height: 18px; border: 1.5px solid currentColor; border-radius: 4px; position: relative; }
.upload-line-icon::before { content: ''; width: 6px; height: 6px; border-left: 1.5px solid currentColor; border-top: 1.5px solid currentColor; position: absolute; left: 5px; top: 2px; transform: rotate(45deg); }
.upload-line-icon::after { content: ''; width: 1.5px; height: 9px; background: currentColor; position: absolute; left: 7px; top: 3px; }
.graphics-file-control > div b { color: #2a3342; font-size: 12px; }
.graphics-file-control > div small { color: #777; font-size: 9px; }
.graphics-selectors { gap: 10px; }
.graphics-selectors label > span { margin-bottom: 4px; color: #666; }
.graphics-selectors .select { width: 132px; height: 38px; }
.graphics-toolbar { align-self: end; }
.graphics-toolbar .button { min-height: 38px; border-radius: 9px; }
.graphics-status-row { min-height: 48px; }
.graphics-product-workspace[data-state="empty"] .graphics-status-row { display: none; }
.graphics-summary { gap: 8px; }
.graphics-status-row .graphics-summary > div { padding: 8px 11px; border-color: #dce6eb; border-radius: 9px; background: #fff; }
.graphics-status-row .graphics-summary span { color: #777; font-size: 9px; }
.graphics-status-row .graphics-summary strong { color: #2a3342; font-size: 15px; }
.graphics-stage { min-height: 580px; grid-template-columns: minmax(0,1.52fr) minmax(350px,.68fr); gap: 16px; }
.graphics-preview { padding: 18px; }
.graphics-preview-head { min-height: 46px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.graphics-preview-head span,
.graphics-preview-head strong { display: block; }
.graphics-preview-head span { color: #299cac; font-size: 9px; font-weight: 800; }
.graphics-preview-head strong { margin-top: 3px; color: #2a3342; font-size: 16px; }
.download-action { min-height: 36px; padding: 0 12px; }
.download-line-icon { width: 15px; height: 16px; border-bottom: 1.5px solid currentColor; position: relative; }
.download-line-icon::before { content: ''; width: 1.5px; height: 10px; background: currentColor; position: absolute; left: 7px; top: 0; }
.download-line-icon::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; position: absolute; left: 4px; top: 4px; transform: rotate(45deg); }
.canvas-wrap { min-height: 0; padding: 10px; border-color: #d9e4e8; border-radius: 10px; background: #f7fafc; aspect-ratio: 16 / 9; }
.graphics-preview #renderCanvas { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; image-rendering: auto; }
.graphics-preview .legend { margin-top: 12px; gap: 7px; }
.graphics-preview .legend span { padding: 8px; border-color: #dce6eb; border-radius: 8px; }
.graphics-preview .legend i { height: 10px; border-radius: 4px; }
.graphics-preview .legend b { color: #2a3342; font-size: 10px; }
.graphics-preview .legend small { color: #666; font-size: 8px; }
.graphics-ai-panel { min-height: 100%; padding: 0; overflow: hidden; border-top: 4px solid #42b8c8; }
.graphics-ai-panel > header { min-height: 76px; padding: 14px 18px; border-bottom: 1px solid #dce6eb; background: #f7fbfc; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.graphics-ai-panel > header span,
.graphics-ai-panel > header strong { display: block; }
.graphics-ai-panel > header span { color: #299cac; font-size: 9px; font-weight: 800; }
.graphics-ai-panel > header strong { margin-top: 4px; color: #2a3342; font-size: 16px; }
.graphics-ai-panel > header .button { min-height: 36px; padding: 0 12px; font-size: 11px; }
.graphics-ai-focus { min-height: 0; padding: 20px; border-top: 0; }
.graphics-ai-focus .ai-analysis-summary { font-size: 16px; }

@media (max-width: 980px) {
  .graphics-command-row { grid-template-columns: 1fr auto; }
  .graphics-file-control { grid-column: 1 / -1; }
  .graphics-stage { grid-template-columns: 1fr; }
  .graphics-ai-panel { min-height: 360px; }
}

@media (max-width: 620px) {
  .graphics-flow { gap: 12px; justify-content: space-between; }
  .graphics-flow span { gap: 4px; font-size: 9px; }
  .graphics-command-row { grid-template-columns: 1fr; }
  .graphics-file-control { align-items: flex-start; flex-direction: column; }
  .graphics-file-control label { width: 100%; }
  .graphics-selectors { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .graphics-selectors .select { width: 100%; }
  .graphics-toolbar { justify-content: stretch; }
  .graphics-toolbar .button { flex: 1; }
  .graphics-preview .legend { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .graphics-ai-panel > header { align-items: flex-start; flex-direction: column; }
}

/* Shared theme switcher. The existing light interface remains eco-simple. */
.home-lower-grid,
.data-foundation { display: contents; }
.home-foundation-head { display: none; }
.theme-switcher { flex: 0 0 auto; position: relative; z-index: 1200; }
.theme-switch-button {
  min-height: 36px; padding: 0 11px; border: 1px solid rgba(255,255,255,.2); border-radius: 7px;
  color: rgba(255,255,255,.9); background: rgba(255,255,255,.06); display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 800; white-space: nowrap;
}
.theme-switch-button:hover { background: rgba(255,255,255,.12); }
.theme-switch-button > i { width: 14px; height: 14px; border: 1px solid currentColor; border-radius: 3px; background: linear-gradient(90deg,#54e5d2 0 48%,transparent 48%); position: relative; }
.theme-switch-button > i::after { content: ''; width: 4px; height: 4px; border: 1px solid currentColor; border-radius: 1px; position: absolute; right: 1px; bottom: 1px; }
.theme-switch-button b { font-size: 13px; font-weight: 500; transition: transform .18s ease; }
.theme-switcher.open .theme-switch-button b { transform: rotate(180deg); }
.theme-menu {
  width: 286px; padding: 7px; border: 1px solid #d7e2e8; border-radius: 8px; background: #fff;
  box-shadow: 0 16px 38px rgba(16,29,43,.2); position: absolute; right: 0; top: calc(100% + 9px); display: none;
}
.theme-switcher.open .theme-menu { display: grid; gap: 4px; }
.theme-menu button { width: 100%; min-height: 58px; padding: 9px 10px; border: 0; border-radius: 6px; color: #334257; background: transparent; display: flex; align-items: center; gap: 10px; text-align: left; }
.theme-menu button:hover { background: #f1f6f8; }
.theme-menu button.active { color: #237f8c; background: #e9f7f9; }
.theme-menu button > i { width: 18px; height: 18px; border: 1px solid #b8c8d0; border-radius: 50%; flex: 0 0 auto; }
.theme-menu button.active > i { border: 5px solid #42b8c8; }
.theme-menu strong, .theme-menu small { display: block; }
.theme-menu strong { font-size: 13px; }
.theme-menu small { margin-top: 3px; color: #7a8793; font-size: 10px; }
.theme-switcher-floating { position: fixed; top: 18px; right: 18px; }
.theme-switcher-floating .theme-switch-button { color: #425268; border-color: #d6e1e8; background: rgba(255,255,255,.9); }
html[data-theme="eco-simple"] .theme-switch-button { color: #425268; border-color: #d6e1e8; background: #fff; }
html[data-theme="eco-simple"] .theme-switch-button:hover { background: #f2f7f9; }

/* Environmental technology theme */
html[data-theme="eco-tech"] {
  color-scheme: dark;
  --navy: #061b2a;
  --navy-2: #0ab7c4;
  --primary: #31d6d0;
  --primary-dark: #16aeb2;
  --green: #62dda4;
  --green-dark: #31b77e;
  --blue: #49bde7;
  --amber: #e7b95c;
  --red: #ff7f73;
  --ink: #ebfbff;
  --muted: #8fafbb;
  --line: rgba(100,224,218,.2);
  --surface: rgba(6,35,49,.9);
  --background: #04151f;
  --shadow: 0 16px 36px rgba(0,9,16,.28);
}
html[data-theme="eco-tech"] body {
  color: var(--ink);
  background-color: #04151f;
  background-image: linear-gradient(180deg,rgba(2,16,25,.2),rgba(2,14,22,.88)), url('/cityimg/%E5%B9%BF%E5%B7%9E.webp');
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}
html[data-theme="eco-tech"] body.tool-body,
html[data-theme="eco-tech"] body:not(.home-body) {
  background-image: linear-gradient(rgba(58,190,185,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(58,190,185,.035) 1px,transparent 1px),linear-gradient(180deg,#061c29,#03131d);
  background-size: 46px 46px,46px 46px,auto;
}
html[data-theme="eco-tech"] .topbar {
  min-height: 66px; background: rgba(3,22,34,.86); border-bottom-color: rgba(83,226,220,.22);
  box-shadow: 0 8px 26px rgba(0,9,15,.16); backdrop-filter: blur(16px);
}
html[data-theme="eco-tech"] .topbar-inner { width: min(1540px,calc(100% - 36px)); min-height: 66px; gap: 14px; }
html[data-theme="eco-tech"] .brand-mark {
  width: 39px; height: 39px; border: 1px solid rgba(143,255,231,.54); border-radius: 8px;
  background: linear-gradient(145deg,#18b9c5,#42dfc8); box-shadow: 0 0 20px rgba(45,218,205,.24);
}
html[data-theme="eco-tech"] .brand-mark i { background: #eaffff; }
html[data-theme="eco-tech"] .brand-mark i:nth-child(2),
html[data-theme="eco-tech"] .brand-mark i:nth-child(3) { background: #eaffff; }
html[data-theme="eco-tech"] .brand-name { color: #f3ffff; text-shadow: 0 2px 10px rgba(30,222,213,.14); }
html[data-theme="eco-tech"] .nav { justify-content: center; }
html[data-theme="eco-tech"] .nav a { padding: 22px 9px 19px; border-radius: 0; color: #9fc0ca; font-size: 13px; position: relative; }
html[data-theme="eco-tech"] .nav a:hover { color: #eaffff; background: rgba(54,225,215,.05); }
html[data-theme="eco-tech"] .nav a.active { color: #fff; background: transparent; }
html[data-theme="eco-tech"] .nav a.active::after { content: ''; height: 2px; background: #63e7df; box-shadow: 0 0 10px #32ccc8; position: absolute; left: 9px; right: 9px; bottom: 10px; }
html[data-theme="eco-tech"] .admin-link,
html[data-theme="eco-tech"] .theme-switch-button { min-height: 38px; border-color: rgba(127,225,221,.28); border-radius: 7px; color: #d9f7f7; background: rgba(39,125,143,.18); }
html[data-theme="eco-tech"] .admin-link { padding: 9px 11px; }
html[data-theme="eco-tech"] .theme-menu { border-color: rgba(92,224,216,.32); color: #eaffff; background: rgba(4,29,42,.98); box-shadow: 0 18px 42px rgba(0,7,12,.44); }
html[data-theme="eco-tech"] .theme-menu button { color: #b8d4dc; }
html[data-theme="eco-tech"] .theme-menu button:hover { background: rgba(70,219,211,.08); }
html[data-theme="eco-tech"] .theme-menu button.active { color: #ecffff; background: rgba(51,214,204,.13); }
html[data-theme="eco-tech"] .theme-menu small { color: #789ca8; }
html[data-theme="eco-tech"] .theme-switcher-floating .theme-switch-button { color: #d9f7f7; border-color: rgba(127,225,221,.28); background: rgba(4,29,42,.88); }

html[data-theme="eco-tech"] .page { width: min(1460px,calc(100% - 36px)); }
html[data-theme="eco-tech"] .page.tool-page {
  width: 100%;
  max-width: none;
  padding-left: max(18px,calc((100% - 1460px)/2));
  padding-right: max(18px,calc((100% - 1460px)/2));
}
html[data-theme="eco-tech"] .page-head,
html[data-theme="eco-tech"] .environment-toolbar,
html[data-theme="eco-tech"] .admin-toolbar { border-bottom: 1px solid rgba(81,218,211,.14); }
html[data-theme="eco-tech"] .page-title,
html[data-theme="eco-tech"] .panel-title,
html[data-theme="eco-tech"] .section-title { color: #f0ffff; }
html[data-theme="eco-tech"] .page-subtitle,
html[data-theme="eco-tech"] .panel-desc,
html[data-theme="eco-tech"] .status-note,
html[data-theme="eco-tech"] .hint { color: #8fafbb; }
html[data-theme="eco-tech"] .eyebrow { color: #58ddd2; }
html[data-theme="eco-tech"] .panel,
html[data-theme="eco-tech"] details.panel,
html[data-theme="eco-tech"] .environment-band {
  border-color: rgba(91,222,215,.2); background: rgba(5,33,47,.9); box-shadow: var(--shadow); backdrop-filter: blur(12px);
}
html[data-theme="eco-tech"] .panel:hover { border-color: rgba(98,229,221,.32); }
html[data-theme="eco-tech"] .input,
html[data-theme="eco-tech"] .select,
html[data-theme="eco-tech"] .textarea,
html[data-theme="eco-tech"] .table-input {
  color: #edffff; border-color: rgba(102,205,205,.28); background: rgba(2,21,32,.84); caret-color: #65e5dc;
}
html[data-theme="eco-tech"] .input:focus,
html[data-theme="eco-tech"] .select:focus,
html[data-theme="eco-tech"] .textarea:focus { border-color: #45d7cf; box-shadow: 0 0 0 3px rgba(49,214,208,.12); }
html[data-theme="eco-tech"] .field label { color: #b8d5dc; }
html[data-theme="eco-tech"] .button { color: #05272b; background: #63e2da; box-shadow: 0 5px 16px rgba(55,211,203,.18); }
html[data-theme="eco-tech"] .button:hover { background: #83eee7; }
html[data-theme="eco-tech"] .button.secondary { color: #c9eef0; border: 1px solid rgba(88,211,207,.24); background: rgba(23,90,107,.3); }
html[data-theme="eco-tech"] .button.secondary:hover { background: rgba(35,125,140,.4); }
html[data-theme="eco-tech"] .button:disabled { color: #78939d; background: rgba(64,96,105,.42); box-shadow: none; }
html[data-theme="eco-tech"] .segmented { border-color: rgba(96,214,210,.24); background: rgba(2,20,31,.72); }
html[data-theme="eco-tech"] .segmented button { color: #89aab5; }
html[data-theme="eco-tech"] .segmented button.active { color: #062429; background: #55d9cf; }
html[data-theme="eco-tech"] .metric { border-color: rgba(102,226,217,.18); background: rgba(6,46,60,.64); }
html[data-theme="eco-tech"] .metric-label,
html[data-theme="eco-tech"] .metric-unit { color: #86a9b3; }
html[data-theme="eco-tech"] .metric-value { color: #f4ffff; }
html[data-theme="eco-tech"] .result-main { border: 1px solid rgba(93,231,221,.28); color: #efffff; background: rgba(4,35,49,.94); box-shadow: 0 14px 34px rgba(0,10,17,.34),inset 0 0 34px rgba(39,210,200,.045); }
html[data-theme="eco-tech"] .notice { color: #9fc0c8; border-color: rgba(90,213,208,.28); background: rgba(5,31,43,.84); }
html[data-theme="eco-tech"] .error-box { color: #ffaaa1; }
html[data-theme="eco-tech"] .table-scroll { border-color: rgba(101,208,204,.2); }
html[data-theme="eco-tech"] .data-table th { color: #a9ccd3; background: rgba(11,56,70,.74); }
html[data-theme="eco-tech"] .data-table td { border-top-color: rgba(95,195,194,.14); }
html[data-theme="eco-tech"] .data-table tr:hover td { background: rgba(44,170,164,.07); }
html[data-theme="eco-tech"] .modal { color: #eaffff; border: 1px solid rgba(93,222,215,.25); background: #082839; }
html[data-theme="eco-tech"] .modal-head,
html[data-theme="eco-tech"] .modal-foot { border-color: rgba(95,205,202,.18); }
html[data-theme="eco-tech"] .city-photo-credit { display: none; }
html[data-theme="eco-tech"] .ai-analysis-empty { color: #9bbbc3; border-color: rgba(94,203,199,.18); background: rgba(7,46,59,.72); }
html[data-theme="eco-tech"] .ai-analysis-empty.error { color: #ffaaa1; background: rgba(117,43,43,.2); }
html[data-theme="eco-tech"] .ai-analysis-metrics > div { background: rgba(8,52,65,.7); }
html[data-theme="eco-tech"] .ai-analysis-columns p { color: #9ab9c2; }
html[data-theme="eco-tech"] .air-control-empty { color: #91b2bb; background: rgba(6,42,55,.75); }

/* Technology theme: homepage cockpit */
html[data-theme="eco-tech"] body.home-body {
  --tech-city-image: url('/cityimg/%E5%B9%BF%E5%B7%9E.webp');
  background-image: linear-gradient(180deg,rgba(2,17,27,.38) 0,rgba(2,16,25,.72) 58%,#03131c 100%),var(--tech-city-image);
  background-position: center top;
  background-size: min(1920px,100vw) auto;
  background-repeat: no-repeat;
}
html[data-theme="eco-tech"] .home-page { width: min(1500px,calc(100% - 36px)); padding-top: 44px; padding-bottom: 56px; }
html[data-theme="eco-tech"] .home-intro { min-height: 118px; margin-bottom: 18px; justify-content: center; text-align: center; position: relative; }
html[data-theme="eco-tech"] .home-intro h1 { margin-top: 8px; color: #f3ffff; font-size: 42px; text-shadow: 0 5px 22px rgba(0,8,13,.42); }
html[data-theme="eco-tech"] .home-intro p { color: #9bc1ca; }
html[data-theme="eco-tech"] .home-intro .eyebrow { color: #65e5d8; letter-spacing: 0; }
html[data-theme="eco-tech"] .home-live-status { border-color: rgba(103,224,214,.24); color: #bbdce1; background: rgba(3,31,44,.7); position: absolute; right: 0; top: 24px; }
html[data-theme="eco-tech"] .home-live-status strong { color: #77e5b4; }
html[data-theme="eco-tech"] .home-environment {
  margin-top: 0; border: 1px solid rgba(118,238,228,.6); border-radius: 8px; color: #efffff;
  background: rgba(3,24,36,.44); box-shadow: 0 22px 50px rgba(0,8,14,.34),inset 0 0 36px rgba(51,216,205,.045); overflow: hidden; backdrop-filter: blur(7px);
}
html[data-theme="eco-tech"] .home-environment-head { min-height: 68px; border-bottom-color: rgba(104,225,216,.2); background: rgba(3,28,41,.68); }
html[data-theme="eco-tech"] .home-environment-title > span { color: #72e6dc; }
html[data-theme="eco-tech"] .home-environment-title > span i,
html[data-theme="eco-tech"] .home-environment-title small { color: #85aab3; }
html[data-theme="eco-tech"] .home-environment-title strong { color: #f2ffff; }
html[data-theme="eco-tech"] .home-environment-title > div { border-left-color: rgba(107,221,215,.22); }
html[data-theme="eco-tech"] .home-environment-actions button { color: #bfe1e5; border: 1px solid rgba(100,220,214,.24); background: rgba(22,85,101,.34); }
html[data-theme="eco-tech"] .home-environment-actions button:last-child { color: #05272c; background: #5bd9d0; }
html[data-theme="eco-tech"] .home-environment-layout { grid-template-columns: minmax(0,1.55fr) minmax(350px,.62fr); min-height: 430px; }
html[data-theme="eco-tech"] .home-environment-visual {
  min-height: 430px; padding: 36px;
  background-image: linear-gradient(90deg,rgba(2,24,36,.8),rgba(2,24,36,.13) 54%,rgba(2,24,36,.3)),var(--tech-city-image,var(--city-image));
  background-position: center; background-size: cover;
}
html[data-theme="eco-tech"] .home-weather-block { padding: 18px; border: 1px solid rgba(115,231,221,.3); border-radius: 7px; background: rgba(2,28,41,.5); backdrop-filter: blur(7px); }
html[data-theme="eco-tech"] .home-air-block { padding: 17px; border: 1px solid rgba(112,231,222,.3); border-radius: 7px; background: rgba(2,28,41,.55); backdrop-filter: blur(7px); }
html[data-theme="eco-tech"] .home-environment-facts { border-top-color: rgba(118,231,222,.28); }
html[data-theme="eco-tech"] .home-environment-facts > div { border-right-color: rgba(120,228,220,.23); }
html[data-theme="eco-tech"] .home-advice-block { border-left: 1px solid rgba(104,224,216,.24); color: #eaffff; background: rgba(3,31,44,.76); }
html[data-theme="eco-tech"] .home-advice-title { border-bottom-color: rgba(99,219,211,.18); }
html[data-theme="eco-tech"] .home-advice-title i { color: #04262a; background: #62ddd3; }
html[data-theme="eco-tech"] .home-advice-title span,
html[data-theme="eco-tech"] .home-advice-block > p { color: #efffff; }
html[data-theme="eco-tech"] .home-pollutants span { border-color: rgba(100,215,210,.22); color: #d8f3f4; background: rgba(21,74,89,.32); }
html[data-theme="eco-tech"] .home-suitable-list span { color: #8be3b4; border-color: rgba(91,212,156,.24); background: rgba(40,139,98,.16); }
html[data-theme="eco-tech"] .home-advice-foot { border-top-color: rgba(100,211,207,.17); }
html[data-theme="eco-tech"] .home-advice-foot a { color: #67e0d8; }
html[data-theme="eco-tech"] .home-data-status { border-top-color: rgba(101,216,210,.17); color: #789da8; background: rgba(2,23,34,.74); }
html[data-theme="eco-tech"] .home-lower-grid { margin-top: 18px; display: grid; grid-template-columns: minmax(320px,.62fr) minmax(0,1.38fr); gap: 16px; align-items: stretch; }
html[data-theme="eco-tech"] .data-foundation,
html[data-theme="eco-tech"] .home-capability { min-width: 0; padding: 18px; border: 1px solid rgba(93,224,216,.3); border-radius: 8px; background: rgba(4,29,42,.72); box-shadow: var(--shadow); backdrop-filter: blur(10px); }
html[data-theme="eco-tech"] .data-foundation { display: block; }
html[data-theme="eco-tech"] .home-foundation-head { min-height: 54px; padding-bottom: 13px; border-bottom: 1px solid rgba(94,218,211,.22); display: block; }
html[data-theme="eco-tech"] .home-foundation-head span { color: #54d9d0; font-size: 9px; font-weight: 800; }
html[data-theme="eco-tech"] .home-foundation-head h2 { margin: 4px 0 0; color: #f1ffff; font-size: 22px; }
html[data-theme="eco-tech"] .home-foundation-head p { margin: 5px 0 0; color: #789ca7; font-size: 10px; }
html[data-theme="eco-tech"] .home-stats { margin: 12px 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; display: grid; grid-template-columns: 1fr; gap: 8px; overflow: visible; }
html[data-theme="eco-tech"] .home-stat { min-height: 75px; padding: 12px 14px; border: 1px solid rgba(89,207,203,.2); border-radius: 7px; color: #eaffff; background: rgba(9,52,66,.58); display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; text-align: left; }
html[data-theme="eco-tech"] .home-stat:last-child { border-right: 1px solid rgba(89,207,203,.2); }
html[data-theme="eco-tech"] .home-stat span { color: #a4c5cc; }
html[data-theme="eco-tech"] .home-stat strong { grid-column: 2; grid-row: 1 / span 2; color: #f2ffff; font-size: 29px; }
html[data-theme="eco-tech"] .home-stat small { margin-top: 5px; color: #5ed9d0; font-weight: 800; }
html[data-theme="eco-tech"] .home-capability .module-heading { min-height: 54px; margin: 0 0 12px; padding-bottom: 13px; border-bottom: 1px solid rgba(94,218,211,.22); }
html[data-theme="eco-tech"] .module-heading h2 { color: #f1ffff; }
html[data-theme="eco-tech"] .module-heading > span { color: #789ca7; }
html[data-theme="eco-tech"] .module-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
html[data-theme="eco-tech"] .module-card { min-height: 112px; padding: 12px; border-color: rgba(92,211,206,.2); color: #eaffff; background: rgba(8,49,63,.54); box-shadow: none; }
html[data-theme="eco-tech"] .module-card:hover { border-color: rgba(94,231,220,.56); background: rgba(12,66,78,.7); transform: translateY(-1px); }
html[data-theme="eco-tech"] .module-icon,
html[data-theme="eco-tech"] .module-card:nth-child(n) .module-icon { width: 43px; height: 43px; color: #6ee4d9; background: rgba(53,201,190,.12); }
html[data-theme="eco-tech"] .module-card h3 { color: #f0ffff; font-size: 14px; }
html[data-theme="eco-tech"] .module-card em { color: #52d5cc; }
html[data-theme="eco-tech"] .module-card p { color: #7f9fa9; font-size: 10px; }

/* Technology theme: tool-specific surfaces */
html[data-theme="eco-tech"] .entry-head,
html[data-theme="eco-tech"] .hour-grid,
html[data-theme="eco-tech"] .sample-grid { color: #91b2bc; border-color: rgba(100,208,204,.2); background: rgba(3,24,36,.68); }
html[data-theme="eco-tech"] .hour-entry,
html[data-theme="eco-tech"] .sample-entry,
html[data-theme="eco-tech"] .noise-area-options button { color: #9ebdc5; border-color: rgba(94,202,199,.22); background: rgba(6,40,53,.84); }
html[data-theme="eco-tech"] .hour-meta,
html[data-theme="eco-tech"] .noise-area-options button b { color: #e7fafa; }
html[data-theme="eco-tech"] .noise-area-flow { border-color: rgba(91,213,207,.23); border-left-color: #55d9d0; background: rgba(4,30,42,.8); }
html[data-theme="eco-tech"] .noise-area-options button.active { color: #77e7df; border-color: #4fd8d0; background: rgba(37,161,157,.16); box-shadow: inset 0 0 0 1px rgba(79,216,208,.5); }
html[data-theme="eco-tech"] .calculation-details .notice,
html[data-theme="eco-tech"] .air-detail-panel > .notice,
html[data-theme="eco-tech"] .stat-primary > div { color: #a6c5cc; border-color: #4fd8d0; background: rgba(17,75,86,.42); }
html[data-theme="eco-tech"] .air-results-panel > header,
html[data-theme="eco-tech"] .graphics-ai-panel > header,
html[data-theme="eco-tech"] .source-ranking-panel > header { border-color: rgba(92,204,201,.2); background: rgba(8,48,61,.74); }
html[data-theme="eco-tech"] .air-results-panel header strong,
html[data-theme="eco-tech"] .graphics-ai-panel > header strong,
html[data-theme="eco-tech"] .graphics-file-control > div b,
html[data-theme="eco-tech"] .graphics-preview-head strong { color: #ebffff; }
html[data-theme="eco-tech"] .air-control-targets > div { border-left-color: #63dda8; background: rgba(39,128,91,.16); }
html[data-theme="eco-tech"] .material-tabs button { color: #9ab8c1; border-color: rgba(96,201,199,.2); background: rgba(4,32,44,.76); }
html[data-theme="eco-tech"] .material-tabs button.active { color: #eaffff; border-color: #50d8d0; background: rgba(41,166,159,.2); }
html[data-theme="eco-tech"] .graphics-flow { border-color: rgba(90,202,199,.18); background: rgba(3,25,36,.75); }
html[data-theme="eco-tech"] .graphics-flow i { color: #9ab7bf; border-color: rgba(92,203,199,.28); background: rgba(4,34,46,.9); }
html[data-theme="eco-tech"] .graphics-flow span.active i { color: #05272c; border-color: #55d9d0; background: #55d9d0; }
html[data-theme="eco-tech"] .graphics-file-control label { color: #67e0d8; border-color: rgba(90,218,211,.46); background: rgba(36,142,139,.13); }
html[data-theme="eco-tech"] .graphics-status-row .graphics-summary > div { border-color: rgba(92,202,199,.2); background: rgba(4,33,46,.86); }
html[data-theme="eco-tech"] .graphics-status-row .graphics-summary strong { color: #ecffff; }
html[data-theme="eco-tech"] .canvas-wrap { border-color: rgba(91,203,199,.2); background: rgba(2,19,29,.84); }
html[data-theme="eco-tech"] .graphics-preview .legend span { border-color: rgba(91,203,199,.18); background: rgba(6,38,51,.7); }
html[data-theme="eco-tech"] .graphics-preview .legend b { color: #eaffff; }
html[data-theme="eco-tech"] #renderCanvas { background: #051f2d; }
html[data-theme="eco-tech"] .analysis-drawer { border-left-color: rgba(91,213,207,.28); color: #eaffff; background: #072838; box-shadow: -14px 0 38px rgba(0,8,14,.4); }
html[data-theme="eco-tech"] .analysis-drawer-handle { color: #70e5dc; border-color: rgba(98,222,215,.34); background: #0a3445; }
html[data-theme="eco-tech"] .analysis-drawer.collapsed .analysis-drawer-handle { background: #0a3445; }
html[data-theme="eco-tech"] .source-file-bar { border-color: rgba(93,208,204,.2); background: rgba(7,45,58,.75); }
html[data-theme="eco-tech"] .waveform-shell { border-color: rgba(91,211,206,.22); background: rgba(2,22,34,.82); }
html[data-theme="eco-tech"] .waveform-toolbar { border-color: rgba(91,203,200,.18); background: rgba(7,44,57,.72); }
html[data-theme="eco-tech"] .source-process { border-color: rgba(91,203,200,.2); background: rgba(5,37,50,.76); }
html[data-theme="eco-tech"] .source-ranking-panel .rank-item:first-child { border-left-color: #63dda8; background: rgba(38,135,95,.16); }
html[data-theme="eco-tech"] .materials-search-bar { background: rgba(5,35,48,.92); }
html[data-theme="eco-tech"] .materials-search-input { border-color: rgba(93,203,200,.24); background: rgba(2,23,34,.82); }
html[data-theme="eco-tech"] .materials-search-input input { color: #eaffff; }
html[data-theme="eco-tech"] .material-card { border-color: rgba(93,204,201,.2); background: rgba(5,35,48,.9); }
html[data-theme="eco-tech"] .material-summary { color: #9dbcc4; border-left-color: #54d9d0; background: rgba(8,52,65,.7); }
html[data-theme="eco-tech"] .materials-empty { color: #8fafbb; background: rgba(5,35,48,.82); }
html[data-theme="eco-tech"] .promo { border: 1px solid rgba(93,209,204,.22); }

/* Technology theme: environment and administration */
html[data-theme="eco-tech"] .environment-status { color: #f0cf86; background: rgba(148,104,29,.2); }
html[data-theme="eco-tech"] .environment-overview { border: 1px solid rgba(101,224,216,.25); background: rgba(3,28,41,.88); box-shadow: var(--shadow); }
html[data-theme="eco-tech"] .weather-overview { background-image: linear-gradient(90deg,rgba(3,28,41,.74),rgba(3,28,41,.18)),var(--tech-city-image,var(--city-image)); background-color: #072b3a; }
html[data-theme="eco-tech"] .aqi-overview { color: #eaffff; background: rgba(4,35,48,.94); }
html[data-theme="eco-tech"] .aqi-gauge { border-color: rgba(98,218,211,.26); background: rgba(7,51,64,.72); }
html[data-theme="eco-tech"] .aqi-gauge::before { border-color: #082f40; }
html[data-theme="eco-tech"] .aqi-gauge-inner { background: transparent; }
html[data-theme="eco-tech"] .aqi-gauge-inner small { color: #8eb0ba; }
html[data-theme="eco-tech"] .aqi-gauge-inner strong { color: #f2ffff; }
html[data-theme="eco-tech"] .aqi-copy > span { color: #efffff; }
html[data-theme="eco-tech"] .aqi-copy p,
html[data-theme="eco-tech"] .aqi-copy > small { color: #8fafbb; }
html[data-theme="eco-tech"] .aqi-level-scale { border-top-color: rgba(93,205,201,.2); }
html[data-theme="eco-tech"] .aqi-level-scale span { color: #8fafbb; }
html[data-theme="eco-tech"] .advice-main { border-left-color: #54d9d0; background: rgba(8,52,65,.7); }
html[data-theme="eco-tech"] .advice-main p { color: #a3c1c8; }
html[data-theme="eco-tech"] .advice-card,
html[data-theme="eco-tech"] .advice-indicator { border-color: rgba(91,202,199,.18); background: rgba(6,41,54,.72); }
html[data-theme="eco-tech"] .pollutant-track { background: rgba(104,157,165,.22); }
html[data-theme="eco-tech"] .environment-source { color: #7899a3; border-color: rgba(93,202,199,.16); }
html[data-theme="eco-tech"] .login-page { background-image: linear-gradient(180deg,rgba(2,18,28,.6),rgba(2,17,26,.9)),url('/cityimg/%E5%B9%BF%E5%B7%9E.webp'); background-position: center; background-size: cover; }
html[data-theme="eco-tech"] .login-card { color: #eaffff; border: 1px solid rgba(100,225,217,.26); background: rgba(4,31,44,.9); box-shadow: 0 20px 48px rgba(0,8,14,.4); backdrop-filter: blur(14px); }
html[data-theme="eco-tech"] .back-home { color: #91b5be; }
html[data-theme="eco-tech"] .admin-tabs { border-color: rgba(94,204,201,.22); background: rgba(4,31,43,.72); }
html[data-theme="eco-tech"] .admin-tabs button { color: #8eadb7; }
html[data-theme="eco-tech"] .admin-tabs button.active { color: #062429; background: #58d9d0; }
html[data-theme="eco-tech"] .audio-dock { color: #eaffff; border-color: rgba(93,210,205,.28); background: #082f40; }

@media (max-width: 1250px) {
  html[data-theme="eco-tech"] .brand-name { font-size: 15px; }
  html[data-theme="eco-tech"] .nav a { padding-left: 7px; padding-right: 7px; font-size: 12px; }
  html[data-theme="eco-tech"] .theme-switch-button span { display: none; }
  html[data-theme="eco-tech"] .home-lower-grid { grid-template-columns: 1fr; }
  html[data-theme="eco-tech"] .data-foundation .home-stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 900px) {
  .theme-switch-button span { display: none; }
  .theme-switch-button { width: 38px; padding: 0; justify-content: center; }
  .theme-switch-button b { display: none; }
  html[data-theme="eco-tech"] .topbar-inner { gap: 8px; }
  html[data-theme="eco-tech"] .brand-name { display: none; }
  html[data-theme="eco-tech"] .nav { justify-content: flex-start; }
  html[data-theme="eco-tech"] .admin-link { display: none; }
  html[data-theme="eco-tech"] .home-environment-layout { grid-template-columns: 1fr; }
  html[data-theme="eco-tech"] .home-advice-block { border-top: 1px solid rgba(104,224,216,.24); border-left: 0; }
  html[data-theme="eco-tech"] .module-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  html[data-theme="eco-tech"] .home-live-status { display: none; }
}

@media (max-width: 620px) {
  .theme-menu { width: min(286px,calc(100vw - 24px)); position: fixed; right: 12px; top: 62px; }
  .theme-switcher-floating { top: 12px; right: 12px; }
  html[data-theme="eco-tech"] body { background-attachment: scroll; background-image: linear-gradient(180deg,rgba(3,20,30,.88),rgba(3,18,27,.98)),url('/cityimg/%E5%B9%BF%E5%B7%9E-mobile.webp'); }
  html[data-theme="eco-tech"] body.home-body { background-image: linear-gradient(180deg,rgba(2,17,27,.3),rgba(2,16,25,.9) 62%,#03131c 100%),var(--tech-city-image-mobile,var(--tech-city-image)); background-size: auto 720px; }
  html[data-theme="eco-tech"] .topbar,
  html[data-theme="eco-tech"] .topbar-inner { min-height: 58px; }
  html[data-theme="eco-tech"] .topbar-inner { width: calc(100% - 20px); }
  html[data-theme="eco-tech"] .brand-mark { width: 34px; height: 34px; }
  html[data-theme="eco-tech"] .nav a { padding: 18px 8px 16px; font-size: 11px; }
  html[data-theme="eco-tech"] .nav a.active::after { bottom: 7px; }
  html[data-theme="eco-tech"] .page,
  html[data-theme="eco-tech"] .home-page { width: calc(100% - 24px); }
  html[data-theme="eco-tech"] .home-page { padding-top: 22px; }
  html[data-theme="eco-tech"] .home-intro { min-height: 92px; }
  html[data-theme="eco-tech"] .home-intro h1 { font-size: 29px; }
  html[data-theme="eco-tech"] .home-intro p { font-size: 12px; }
  html[data-theme="eco-tech"] .home-environment-head { min-height: 92px; align-items: flex-start; }
  html[data-theme="eco-tech"] .home-environment-title { align-items: flex-start; flex-direction: column; gap: 7px; }
  html[data-theme="eco-tech"] .home-environment-title > div { padding-left: 0; border-left: 0; }
  html[data-theme="eco-tech"] .home-environment-visual { min-height: 380px; padding: 18px; }
  html[data-theme="eco-tech"] .home-weather-block,
  html[data-theme="eco-tech"] .home-air-block { width: 100%; }
  html[data-theme="eco-tech"] .home-environment-facts { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 15px; }
  html[data-theme="eco-tech"] .data-foundation .home-stats { grid-template-columns: 1fr; }
  html[data-theme="eco-tech"] .data-foundation,
  html[data-theme="eco-tech"] .home-capability { padding: 14px; }
  html[data-theme="eco-tech"] .module-grid { grid-template-columns: 1fr; }
  html[data-theme="eco-tech"] .module-card { min-height: 94px; }
  html[data-theme="eco-tech"] .module-card p { font-size: 11px; }
  html[data-theme="eco-tech"] .environment-overview { border-radius: 7px; }
  html[data-theme="eco-tech"] .aqi-overview { background: rgba(4,35,48,.96); }
}

/* Taste audit pass: reference-aligned city cockpit */
.tech-only,
.tech-city-switch { display: none; }

html[data-theme="eco-tech"] body.home-body {
  background-color: #03131d;
  background-image:
    linear-gradient(rgba(72,213,207,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(72,213,207,.035) 1px,transparent 1px),
    linear-gradient(180deg,#061d2b 0,#041720 46%,#020e15 100%);
  background-size: 64px 64px,64px 64px,auto;
  background-position: center top;
  background-repeat: repeat,repeat,no-repeat;
}

html[data-theme="eco-tech"] .tech-only { display: grid; }
html[data-theme="eco-tech"] .tech-city-switch {
  min-height: 40px; padding: 0 15px; border: 1px solid rgba(134,235,230,.32); border-radius: 8px;
  color: #e9ffff; background: rgba(42,111,132,.34); display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; white-space: nowrap;
}
html[data-theme="eco-tech"] .tech-city-switch:hover { border-color: rgba(124,239,232,.62); background: rgba(55,145,157,.44); }
html[data-theme="eco-tech"] .tech-city-switch:active { transform: translateY(1px); }

@media (min-width: 901px) {
  html[data-theme="eco-tech"] .topbar,
  html[data-theme="eco-tech"] .topbar-inner { min-height: 76px; }
  html[data-theme="eco-tech"] .topbar { background: rgba(3,24,37,.92); }
  html[data-theme="eco-tech"] .topbar-inner { width: min(1460px,calc(100% - 32px)); gap: 16px; }
  html[data-theme="eco-tech"] .brand-mark { width: 44px; height: 44px; }
  html[data-theme="eco-tech"] .brand-name { font-size: 19px; }
  html[data-theme="eco-tech"] .nav a { padding: 27px 10px 23px; font-size: 14px; }
  html[data-theme="eco-tech"] .nav a.active::after { bottom: 11px; }
  html[data-theme="eco-tech"] .admin-link,
  html[data-theme="eco-tech"] .theme-switch-button { min-height: 40px; }
  html[data-theme="eco-tech"] .analysis-drawer { top: 76px; height: calc(100vh - 76px); }

  html[data-theme="eco-tech"] .home-page { width: min(1320px,calc(100% - 48px)); padding-top: 42px; padding-bottom: 72px; }
  html[data-theme="eco-tech"] .home-intro { min-height: 150px; margin-bottom: 26px; }
  html[data-theme="eco-tech"] .home-intro .eyebrow,
  html[data-theme="eco-tech"] .home-intro p,
  html[data-theme="eco-tech"] .home-live-status { display: none; }
  html[data-theme="eco-tech"] .home-intro h1 {
    margin: 0; color: #f6ffff; font-size: clamp(44px,4vw,56px); line-height: 1.08; font-weight: 850;
    text-shadow: 0 0 28px rgba(97,229,221,.18),0 8px 30px rgba(0,8,14,.5);
  }

  html[data-theme="eco-tech"] .home-environment {
    min-height: 630px; border: 2px solid rgba(196,255,249,.82); border-radius: 30px; position: relative;
    color: #efffff; background: rgba(2,21,32,.28); box-shadow: 0 0 0 1px rgba(77,223,216,.22),0 26px 70px rgba(0,8,14,.48),inset 0 0 48px rgba(67,218,208,.07);
    overflow: hidden; isolation: isolate; backdrop-filter: none;
  }
  html[data-theme="eco-tech"] .home-environment::before {
    content: ''; position: absolute; inset: 11px; z-index: 5; border: 1px solid rgba(96,228,220,.64); border-radius: 20px;
    box-shadow: inset 0 0 24px rgba(55,219,208,.08); pointer-events: none;
  }
  html[data-theme="eco-tech"] .home-environment::after {
    content: ''; width: 58%; height: 1px; position: absolute; z-index: 4; left: 21%; top: 18px;
    background: linear-gradient(90deg,transparent,rgba(146,255,246,.8),transparent); box-shadow: 0 0 14px rgba(71,231,221,.62);
    animation: cockpit-scan 8s ease-in-out infinite; pointer-events: none;
  }
  html[data-theme="eco-tech"] .home-environment-head {
    min-height: 0; padding: 0; border: 0; background: transparent; position: absolute; z-index: 7; left: 48px; top: 38px; right: 48px;
    display: block; pointer-events: none;
  }
  html[data-theme="eco-tech"] .home-environment-title { width: 250px; display: flex; align-items: flex-start; flex-direction: column; gap: 8px; }
  html[data-theme="eco-tech"] .home-environment-title > span { color: #91efe7; font-size: 13px; }
  html[data-theme="eco-tech"] .home-environment-title > span i { color: rgba(229,255,252,.7); }
  html[data-theme="eco-tech"] .home-environment-title > div { padding: 0; border: 0; }
  html[data-theme="eco-tech"] .home-environment-title strong { color: #fff; font-size: 30px; line-height: 1.1; }
  html[data-theme="eco-tech"] .home-environment-title small { margin-top: 5px; color: rgba(225,251,250,.66); }
  html[data-theme="eco-tech"] .home-environment-actions { display: none; }

  html[data-theme="eco-tech"] .home-environment-layout {
    min-height: 594px; padding: 24px; position: relative; z-index: 1; isolation: isolate;
    display: grid; grid-template-columns: clamp(240px,22vw,300px) minmax(270px,1fr) clamp(255px,23vw,315px); grid-template-rows: 240px 1fr 94px;
    background-image: linear-gradient(180deg,rgba(2,24,36,.14),rgba(2,18,28,.14)),var(--tech-city-image,var(--city-image));
    background-position: center; background-size: cover;
  }
  html[data-theme="eco-tech"] .home-environment-layout::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg,rgba(2,23,35,.38),transparent 34%,transparent 66%,rgba(2,23,35,.4));
  }
  html[data-theme="eco-tech"] .home-environment-visual { display: contents; }
  html[data-theme="eco-tech"] .home-weather-atmosphere { z-index: 0; opacity: .2; }

  html[data-theme="eco-tech"] .home-weather-block {
    grid-column: 1; grid-row: 1; min-width: 0; min-height: 240px; margin: 0; padding: 94px 20px 16px;
    align-self: stretch; border: 1px solid rgba(111,230,221,.54); border-bottom: 0; border-radius: 10px 10px 0 0;
    background: rgba(3,28,42,.5); box-shadow: inset 0 0 28px rgba(67,217,207,.045); backdrop-filter: blur(7px); position: relative; z-index: 2;
  }
  html[data-theme="eco-tech"] .home-weather-primary { gap: 12px; }
  html[data-theme="eco-tech"] .home-weather-primary > i { width: 58px; font-size: 52px; }
  html[data-theme="eco-tech"] .home-weather-reading strong { font-size: 42px; }
  html[data-theme="eco-tech"] .home-weather-reading span { font-size: 14px; }
  html[data-theme="eco-tech"] .home-weather-reading small { margin-top: 6px; font-size: 11px; }
  html[data-theme="eco-tech"] .home-weather-quick { margin-top: 14px; gap: 12px; }
  html[data-theme="eco-tech"] .home-weather-quick span { font-size: 10px; }
  html[data-theme="eco-tech"] .home-weather-quick b { font-size: 12px; }

  html[data-theme="eco-tech"] .home-environment-facts {
    grid-column: 1; grid-row: 2 / 4; min-width: 0; min-height: 0; margin: 0; padding: 18px;
    border: 1px solid rgba(111,230,221,.54); border-top-color: rgba(111,230,221,.18); border-radius: 0 0 10px 10px;
    background: rgba(3,28,42,.5); backdrop-filter: blur(7px); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; gap: 0; position: relative; z-index: 2;
  }
  html[data-theme="eco-tech"] .home-environment-facts > div {
    min-height: 92px; padding: 18px 10px; border-right: 1px solid rgba(119,228,220,.22); border-bottom: 1px solid rgba(119,228,220,.22); display: flex; justify-content: center; flex-direction: column;
  }
  html[data-theme="eco-tech"] .home-environment-facts > div:nth-child(2n) { border-right: 0; }
  html[data-theme="eco-tech"] .home-environment-facts > div:nth-last-child(-n+2) { border-bottom: 0; }
  html[data-theme="eco-tech"] .home-environment-facts span { font-size: 10px; }
  html[data-theme="eco-tech"] .home-environment-facts strong { margin-top: 8px; font-size: 18px; }

  html[data-theme="eco-tech"] .home-air-block {
    grid-column: 3; grid-row: 1; min-width: 0; min-height: 240px; margin: 0; padding: 82px 20px 16px;
    align-self: stretch; border: 1px solid rgba(111,230,221,.54); border-bottom: 0; border-radius: 10px 10px 0 0;
    background: rgba(3,28,42,.54); box-shadow: inset 0 0 28px rgba(67,217,207,.045); backdrop-filter: blur(7px); display: flex; justify-content: center; position: relative; z-index: 2;
  }
  html[data-theme="eco-tech"] .home-aqi-gauge { width: 108px; height: 108px; padding: 8px; box-shadow: 0 0 20px rgba(88,228,217,.18); }
  html[data-theme="eco-tech"] .home-aqi-gauge small { font-size: 11px; }
  html[data-theme="eco-tech"] .home-aqi-gauge strong { font-size: 38px; }
  html[data-theme="eco-tech"] .home-air-copy > span { font-size: 15px; }

  html[data-theme="eco-tech"] .home-advice-block {
    grid-column: 3; grid-row: 2 / 4; min-width: 0; min-height: 0; margin: 0; padding: 18px 20px;
    border: 1px solid rgba(111,230,221,.54); border-top-color: rgba(111,230,221,.18); border-radius: 0 0 10px 10px;
    color: #eaffff; background: rgba(3,28,42,.68); backdrop-filter: none; display: flex; position: static; z-index: 2;
  }
  html[data-theme="eco-tech"] .home-advice-title {
    width: clamp(215px,19vw,265px); position: absolute; z-index: 7; right: 50px; top: 42px; padding-bottom: 12px;
    border-bottom: 1px solid rgba(111,229,221,.2);
  }
  html[data-theme="eco-tech"] .home-advice-title > div i { width: 28px; height: 28px; border-radius: 6px; }
  html[data-theme="eco-tech"] .home-advice-title > div span { font-size: 15px; }
  html[data-theme="eco-tech"] .home-advice-title > small { background: rgba(48,143,103,.24); }
  html[data-theme="eco-tech"] .home-advice-block > p {
    min-height: 58px; margin: 0; padding: 0 20px; position: absolute; z-index: 6; left: calc(23% + 42px); right: calc(24% + 42px); bottom: 28px;
    border: 1px solid rgba(119,231,222,.48); border-radius: 7px; color: #f4ffff; background: rgba(3,34,47,.72); box-shadow: inset 0 0 24px rgba(69,216,207,.055);
    display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1.45; text-align: center; backdrop-filter: blur(8px);
  }
  html[data-theme="eco-tech"] .home-pollutants { margin-top: 10px; display: grid; grid-template-columns: 1fr; gap: 0; }
  html[data-theme="eco-tech"] .home-pollutants span {
    min-height: 42px; padding: 0 4px; border: 0; border-bottom: 1px solid rgba(109,219,213,.15); border-radius: 0;
    color: #f0ffff; background: transparent; display: flex; align-items: center; justify-content: space-between; font-size: 13px; text-align: left;
  }
  html[data-theme="eco-tech"] .home-pollutants i { color: #8fd8d4; font-size: 12px; }
  html[data-theme="eco-tech"] .home-suitable-list { display: none; }
  html[data-theme="eco-tech"] .home-advice-foot { margin-top: auto; padding-top: 14px; border-top-color: rgba(103,217,211,.18); }
  html[data-theme="eco-tech"] .home-advice-foot small { max-width: 140px; color: #7ea9b1; }
  html[data-theme="eco-tech"] .home-data-status { min-height: 34px; padding: 0 34px; border-top-color: rgba(101,216,210,.2); color: #7ca1aa; background: rgba(2,20,30,.8); }

  html[data-theme="eco-tech"] .home-lower-grid { margin-top: 46px; display: grid; grid-template-columns: minmax(0,.94fr) minmax(0,1.06fr); gap: 18px; align-items: stretch; }
  html[data-theme="eco-tech"] .data-foundation,
  html[data-theme="eco-tech"] .home-capability {
    min-width: 0; padding: 26px; border: 1px solid rgba(100,226,218,.56); border-radius: 10px;
    background: rgba(4,30,43,.74); box-shadow: 0 20px 46px rgba(0,8,14,.3),inset 0 0 28px rgba(55,213,203,.04); backdrop-filter: blur(10px);
  }
  html[data-theme="eco-tech"] .home-foundation-head,
  html[data-theme="eco-tech"] .home-capability .module-heading { min-height: 70px; margin: 0 0 18px; padding: 0 0 15px; border-bottom: 1px solid rgba(99,218,212,.28); }
  html[data-theme="eco-tech"] .home-foundation-head h2,
  html[data-theme="eco-tech"] .module-heading h2 { font-size: 25px; }
  html[data-theme="eco-tech"] .home-foundation-head p,
  html[data-theme="eco-tech"] .module-heading > span { display: none; }
  html[data-theme="eco-tech"] .home-stats { margin: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  html[data-theme="eco-tech"] .home-stat {
    min-height: 112px; padding: 18px; border-color: rgba(94,210,205,.3); border-radius: 8px; background: rgba(9,51,65,.68);
  }
  html[data-theme="eco-tech"] .home-stat:last-child { border-right-color: rgba(94,210,205,.3); }
  html[data-theme="eco-tech"] .home-stat strong { font-size: 32px; }
  html[data-theme="eco-tech"] .module-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
  html[data-theme="eco-tech"] .home-capability .module-card.environment-module,
  html[data-theme="eco-tech"] .home-capability .module-card:last-child { display: none; }
  html[data-theme="eco-tech"] .module-card { min-height: 104px; padding: 14px; border-radius: 8px; grid-template-columns: 42px minmax(0,1fr); }
  html[data-theme="eco-tech"] .module-card h3 { font-size: 13px; }
  html[data-theme="eco-tech"] .module-card p { display: none; }
}

@media (min-width: 901px) and (max-width: 1100px) {
  html[data-theme="eco-tech"] .home-page { width: calc(100% - 32px); }
  html[data-theme="eco-tech"] .home-environment-layout { grid-template-columns: 235px minmax(250px,1fr) 250px; }
  html[data-theme="eco-tech"] .home-weather-reading strong { font-size: 36px; }
  html[data-theme="eco-tech"] .home-aqi-gauge { width: 92px; height: 92px; }
  html[data-theme="eco-tech"] .home-advice-block > p { left: 285px; right: 300px; font-size: 13px; }
  html[data-theme="eco-tech"] .home-lower-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  html[data-theme="eco-tech"] .tech-city-switch { display: none; }
  html[data-theme="eco-tech"] body.home-body {
    background-image: linear-gradient(rgba(72,213,207,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(72,213,207,.035) 1px,transparent 1px),linear-gradient(180deg,#061d2b,#020e15);
    background-size: 42px 42px,42px 42px,auto;
  }
}

@keyframes cockpit-scan {
  0%,100% { opacity: .22; transform: translateY(0); }
  50% { opacity: .72; transform: translateY(570px); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="eco-tech"] .tech-aqi-gauge::after { transition: none; }
  html[data-theme="eco-tech"] .home-environment::after { animation: none; }
  html[data-theme="eco-tech"] .module-card,
  html[data-theme="eco-tech"] .tech-city-switch { transition: none; }
}

/* Reference-locked technology homepage. The simple homepage remains unchanged. */
.tech-home-shell { display: none; }
.simple-home-shell { display: contents; }

html[data-theme="eco-tech"] body.home-body {
  min-height: 100dvh;
  color: #fff;
  background-color: #031722;
  background-image: var(--tech-city-image,url('/cityimg/%E5%B9%BF%E5%B7%9E.webp'));
  background-position: center 74px;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

html[data-theme="eco-tech"] body.home-body .topbar,
html[data-theme="eco-tech"] body.home-body .topbar-inner { min-height: 74px; }
html[data-theme="eco-tech"] body.home-body .topbar {
  background: rgba(2,23,36,.88);
  border-bottom: 1px solid rgba(129,238,234,.34);
  box-shadow: 0 1px 0 rgba(181,255,251,.08),0 9px 26px rgba(0,8,15,.3);
  backdrop-filter: blur(14px);
}
html[data-theme="eco-tech"] body.home-body .topbar-inner { width: calc(100% - 32px); gap: 14px; }
html[data-theme="eco-tech"] body.home-body .brand-mark { width: 46px; height: 46px; }
html[data-theme="eco-tech"] body.home-body .brand-name,
html[data-theme="eco-tech"] .nav a,
html[data-theme="eco-tech"] .admin-link,
html[data-theme="eco-tech"] .theme-switch-button,
html[data-theme="eco-tech"] .tech-city-switch { color: #fff; }
html[data-theme="eco-tech"] body.home-body .brand-name { font-size: 20px; }
html[data-theme="eco-tech"] .nav { gap: 1px; position: relative; }
html[data-theme="eco-tech"] .nav::before,
html[data-theme="eco-tech"] .nav::after { content: none; pointer-events: none; }
@media (min-width: 1200px) {
  html[data-theme="eco-tech"] .nav:not(:empty) {
    flex: 0 1 auto;
    margin-inline: auto;
    overflow: visible;
    isolation: isolate;
  }
  html[data-theme="eco-tech"] .nav:not(:empty)::before {
    content: '';
    position: absolute;
    z-index: 0;
    left: -42px;
    right: -42px;
    bottom: -1px;
    height: 9px;
    background:
      radial-gradient(ellipse at 50% 50%,rgba(173,255,250,.8) 0,rgba(78,232,225,.3) 25%,transparent 68%),
      linear-gradient(90deg,rgba(102,224,218,.12),rgba(115,240,234,.66) 18%,#dcfffd 50%,rgba(115,240,234,.66) 82%,rgba(102,224,218,.12)) center/100% 1px no-repeat;
    filter: drop-shadow(0 0 5px rgba(73,228,221,.5));
  }
  html[data-theme="eco-tech"] .nav:not(:empty)::after { content: none; }

}
html[data-theme="eco-tech"] .nav a {
  padding: 25px 9px 23px; border: 1px solid transparent; font-size: 14px; opacity: .84; z-index: 1;
  display: inline-flex; align-items: center; gap: 5px;
  transition: color .18s cubic-bezier(.16,1,.3,1),background .18s cubic-bezier(.16,1,.3,1),opacity .18s cubic-bezier(.16,1,.3,1);
}
html[data-theme="eco-tech"] .nav a > svg {
  width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: color .16s ease,filter .16s ease,transform .16s ease;
}
html[data-theme="eco-tech"] .nav a:hover,
html[data-theme="eco-tech"] .nav a.active { color: #fff; opacity: 1; }
html[data-theme="eco-tech"] .nav a:hover { background: rgba(77,210,205,.07); }
html[data-theme="eco-tech"] .nav a.active { background: transparent; box-shadow: none; }
html[data-theme="eco-tech"] .nav a:hover > svg,
html[data-theme="eco-tech"] .nav a.active > svg { color: #8af6ef; filter: drop-shadow(0 0 5px rgba(94,235,228,.65)); }
html[data-theme="eco-tech"] .nav a:hover > svg { transform: translateY(-1px); }
html[data-theme="eco-tech"] .nav a.active::after { z-index: 2; bottom: 9px; background: #7cf2eb; }
html[data-theme="eco-tech"] .admin-link,
html[data-theme="eco-tech"] .theme-switch-button,
html[data-theme="eco-tech"] .tech-city-switch {
  min-height: 42px; border: 1px solid rgba(164,240,237,.4); border-radius: 8px; background: rgba(63,132,151,.3);
}
html[data-theme="eco-tech"] .tech-city-switch,
html[data-theme="eco-tech"] .admin-link {
  padding: 0 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: color .18s cubic-bezier(.16,1,.3,1),border-color .18s cubic-bezier(.16,1,.3,1),background .18s cubic-bezier(.16,1,.3,1),box-shadow .18s cubic-bezier(.16,1,.3,1),transform .18s cubic-bezier(.16,1,.3,1);
}
html[data-theme="eco-tech"] .theme-switch-button {
  transition: color .18s cubic-bezier(.16,1,.3,1),border-color .18s cubic-bezier(.16,1,.3,1),background .18s cubic-bezier(.16,1,.3,1),box-shadow .18s cubic-bezier(.16,1,.3,1),transform .18s cubic-bezier(.16,1,.3,1);
}
html[data-theme="eco-tech"] .top-action-icon {
  width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: #9af7f0; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(86,231,223,.4));
}
html[data-theme="eco-tech"] .tech-city-switch:hover,
html[data-theme="eco-tech"] .admin-link:hover,
html[data-theme="eco-tech"] .theme-switch-button:hover {
  border-color: rgba(174,250,246,.7); background: rgba(65,153,166,.42); box-shadow: 0 0 13px rgba(63,216,208,.13);
}
html[data-theme="eco-tech"] .theme-switch-button > i { color: #9af7f0; box-shadow: 0 0 6px rgba(86,231,223,.28); }
html[data-theme="eco-tech"] .tech-city-switch:active,
html[data-theme="eco-tech"] .admin-link:active,
html[data-theme="eco-tech"] .theme-switch-button:active { transform: translateY(1px) scale(.985); }
html[data-theme="eco-tech"] .nav a:focus-visible,
html[data-theme="eco-tech"] .tech-city-switch:focus-visible,
html[data-theme="eco-tech"] .admin-link:focus-visible,
html[data-theme="eco-tech"] .theme-switch-button:focus-visible {
  outline: 2px solid rgba(141,246,239,.9); outline-offset: 2px;
}
html[data-theme="eco-simple"] .nav a > svg,
html[data-theme="eco-simple"] .top-action-icon { display: none; }

html[data-theme="eco-tech"] .simple-home-shell { display: none; }
html[data-theme="eco-tech"] .tech-home-shell {
  width: 100%; min-width: 0; display: grid; gap: clamp(8px,1vh,12px);
}
html[data-theme="eco-tech"] .home-page {
  width: min(1680px,82vw);
  margin: 0 auto;
  padding: clamp(6px,.8vh,10px) 0 clamp(8px,1vh,12px);
}
html[data-theme="eco-tech"] .tech-home-title { min-width: 0; display: grid; place-items: center; }
html[data-theme="eco-tech"] .tech-home-title h1 {
  margin: 0; color: #fff; font-size: clamp(23px,1.48vw,27px); line-height: 1.08; font-weight: 900; text-align: center;
  text-shadow: 0 0 13px rgba(103,239,233,.34),0 5px 24px rgba(0,10,18,.58);
}

html[data-theme="eco-tech"] .tech-cockpit {
  --aqi-progress: 0deg;
  min-width: 0; min-height: 360px; padding: 15px; border: 2px solid rgba(255,255,255,.96); border-radius: 38px;
  color: #fff; background: rgba(3,25,38,.025); box-shadow: 0 0 0 1px rgba(94,232,224,.3),0 0 42px rgba(44,211,205,.22),inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 40px rgba(43,208,200,.035);
  position: relative; isolation: isolate; overflow: hidden;
}
html[data-theme="eco-tech"] .tech-cockpit::before {
  content: none;
}
html[data-theme="eco-tech"] .tech-cockpit-grid {
  width: 100%; height: 100%; min-height: 0; position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(220px,.72fr) minmax(300px,1.36fr) minmax(220px,.72fr); gap: 12px;
}
html[data-theme="eco-tech"] .tech-weather-panel,
html[data-theme="eco-tech"] .tech-air-panel {
  min-width: 0; min-height: 0; border: 1px solid rgba(148,236,231,.62); border-radius: 30px;
  background: linear-gradient(180deg,rgba(2,31,49,.46),rgba(2,29,44,.3)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 32px rgba(73,220,211,.04); backdrop-filter: none;
  overflow: hidden;
}

html[data-theme="eco-tech"] .tech-weather-panel { display: grid; grid-template-rows: minmax(102px,.9fr) 2fr; }
html[data-theme="eco-tech"] .tech-weather-head {
  min-width: 0; padding: clamp(14px,1.5vw,23px); display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
html[data-theme="eco-tech"] .tech-city-copy strong,
html[data-theme="eco-tech"] .tech-city-copy small { display: block; color: #fff; }
html[data-theme="eco-tech"] .tech-city-copy strong { max-width: 170px; overflow: hidden; font-size: clamp(25px,2.15vw,36px); line-height: 1.16; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="eco-tech"] .tech-city-copy strong + strong { margin-top: 5px; }
html[data-theme="eco-tech"] .tech-city-copy small { margin-top: 7px; color: rgba(255,255,255,.82); font-size: 11px; }
html[data-theme="eco-tech"] .tech-weather-status { flex: 0 0 auto; display: grid; justify-items: center; gap: 5px; }
html[data-theme="eco-tech"] .tech-weather-status i { color: #fff; font-size: clamp(44px,3.8vw,64px); line-height: 1; filter: drop-shadow(0 0 12px rgba(113,238,232,.26)); }
html[data-theme="eco-tech"] .tech-weather-status span { max-width: 72px; overflow: hidden; color: #fff; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="eco-tech"] .tech-weather-grid {
  min-height: 0; margin: 0 17px 13px; border-top: 1px solid rgba(148,229,225,.22);
  position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(4,minmax(0,1fr));
}
html[data-theme="eco-tech"] .tech-weather-grid::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg,transparent calc(50% - .5px),rgba(148,229,225,.18) calc(50% - .5px),rgba(148,229,225,.18) calc(50% + .5px),transparent calc(50% + .5px)),
    linear-gradient(180deg,
      transparent 0,
      transparent calc(25% - .5px),rgba(148,229,225,.16) calc(25% - .5px),rgba(148,229,225,.16) calc(25% + .5px),transparent calc(25% + .5px),
      transparent calc(50% - .5px),rgba(148,229,225,.16) calc(50% - .5px),rgba(148,229,225,.16) calc(50% + .5px),transparent calc(50% + .5px),
      transparent calc(75% - .5px),rgba(148,229,225,.16) calc(75% - .5px),rgba(148,229,225,.16) calc(75% + .5px),transparent calc(75% + .5px),
      transparent 100%);
}
html[data-theme="eco-tech"] .tech-weather-metric {
  min-width: 0; padding: 9px 8px; position: relative; z-index: 1;
  display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 9px;
}
html[data-theme="eco-tech"] .tech-metric-icon {
  width: 32px; height: 32px; border: 1px solid rgba(178,247,243,.7); border-radius: 50%; color: #fff;
  display: grid; place-items: center; font-size: 9px; font-weight: 800; line-height: 1;
}
html[data-theme="eco-tech"] .tech-metric-icon svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(124,242,235,.52));
}
html[data-theme="eco-tech"] .tech-weather-metric small,
html[data-theme="eco-tech"] .tech-weather-metric strong { display: block; min-width: 0; overflow: hidden; color: #fff; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="eco-tech"] .tech-weather-metric small { margin-bottom: 4px; color: rgba(255,255,255,.76); font-size: 10px; font-weight: 600; }
html[data-theme="eco-tech"] .tech-weather-metric strong { font-family: Bahnschrift,"Segoe UI",sans-serif; font-size: clamp(17px,1.65vw,26px); line-height: 1.05; font-variant-numeric: tabular-nums; }
html[data-theme="eco-tech"] .tech-weather-wind strong { font-size: clamp(14px,1.2vw,18px); }

html[data-theme="eco-tech"] .tech-city-stage { min-width: 0; min-height: 0; position: relative; display: block; }
html[data-theme="eco-tech"] .tech-city-stage p {
  min-height: clamp(44px,6.4vh,62px); margin: 0; padding: 8px 18px; border: 1px solid rgba(173,247,243,.72); border-radius: 0 0 20px 20px;
  color: #fff; background: rgba(4,34,49,.68); box-shadow: 0 0 14px rgba(70,222,215,.24),inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 16px rgba(86,229,221,.05);
  position: absolute; left: 0; right: 0; bottom: 2px; display: flex; align-items: center; justify-content: center;
  overflow: hidden; font-size: clamp(12px,1.15vw,16px); line-height: 1.45; font-weight: 650; text-align: center;
  backdrop-filter: none;
  transition: border-color .18s cubic-bezier(.16,1,.3,1),background .18s cubic-bezier(.16,1,.3,1),box-shadow .18s cubic-bezier(.16,1,.3,1);
}
html[data-theme="eco-tech"] .tech-city-stage:hover p,
html[data-theme="eco-tech"] .tech-city-stage:focus-visible p {
  border-color: rgba(211,255,252,.9); background: rgba(6,46,61,.78); box-shadow: 0 0 18px rgba(70,222,215,.32),inset 0 1px 0 rgba(255,255,255,.1);
}
html[data-theme="eco-tech"] .tech-city-stage:focus-visible { outline: 0; }
html[data-theme="eco-tech"] .tech-ai-label { flex: 0 0 auto; margin-right: 3px; color: #fff; font-weight: 850; }
html[data-theme="eco-tech"] .tech-city-stage p > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

html[data-theme="eco-tech"] .tech-air-panel {
  padding: 12px clamp(14px,1.5vw,20px); display: flex; flex-direction: column;
  background: linear-gradient(180deg,rgba(2,30,48,.62),rgba(2,27,42,.4));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 38px rgba(73,220,211,.055),0 0 18px rgba(31,190,188,.06);
}
html[data-theme="eco-tech"] .tech-air-title {
  min-height: 40px; padding: 0; border: 0;
  display: flex; align-items: center; justify-content: center;
}
html[data-theme="eco-tech"] .tech-air-title i { display: none; }
html[data-theme="eco-tech"] .tech-air-title h2 { margin: 0; color: #fff; font-size: clamp(18px,1.5vw,22px); line-height: 1; text-align: center; }

html[data-theme="eco-tech"] .tech-aqi-wrap {
  min-height: 126px; padding: 14px 0 16px; flex: 0 0 auto;
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 18px;
  border-bottom: 1px solid rgba(139,229,224,.24);
}
html[data-theme="eco-tech"] .tech-aqi-gauge {
  min-width: 0; width: auto; padding: 0 0 18px; border: 0; border-radius: 0;
  background: none; box-shadow: none; position: relative;
}
html[data-theme="eco-tech"] .tech-aqi-gauge::before,
html[data-theme="eco-tech"] .tech-aqi-gauge::after {
  content: ''; height: 6px; border-radius: 3px; position: absolute; left: 0; bottom: 0;
}
html[data-theme="eco-tech"] .tech-aqi-gauge::before {
  width: 100%; border: 1px solid rgba(151,229,225,.24);
  background: rgba(116,219,213,.1); box-shadow: inset 0 0 8px rgba(65,211,204,.08);
}
html[data-theme="eco-tech"] .tech-aqi-gauge::after {
  width: var(--aqi-ratio,0%); max-width: 100%;
  background: #82ede6; box-shadow: 0 0 10px rgba(92,235,226,.48);
  transition: width .35s cubic-bezier(.16,1,.3,1);
}
html[data-theme="eco-tech"] .tech-aqi-gauge > div {
  width: auto; height: auto; border: 0; border-radius: 0; background: none;
  display: flex; align-items: flex-end; gap: 9px; text-align: left;
}
html[data-theme="eco-tech"] .tech-aqi-gauge strong {
  color: #fff; font-family: Bahnschrift,"Segoe UI",sans-serif; font-size: clamp(52px,4.4vw,72px); line-height: .78;
  font-variant-numeric: tabular-nums; text-shadow: 0 0 15px rgba(143,246,240,.18);
}
html[data-theme="eco-tech"] .tech-aqi-gauge small {
  padding-bottom: 2px; color: rgba(218,255,252,.72); font-size: 12px; font-weight: 800;
}
html[data-theme="eco-tech"] .tech-aqi-wrap > span {
  min-width: 58px; padding-left: 18px; border-left: 1px solid rgba(139,229,224,.28);
  color: #b9fff9; font-size: clamp(24px,2vw,32px); font-weight: 850; line-height: 1; text-align: center;
  text-shadow: 0 0 9px rgba(109,237,230,.26);
}

html[data-theme="eco-tech"] .tech-factor-list {
  min-height: 0; flex: 1; padding-top: 13px;
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); gap: 8px;
}
html[data-theme="eco-tech"] .tech-factor-row {
  min-width: 0; min-height: 0; padding: 8px 5px; border: 1px solid rgba(144,225,221,.16); border-radius: 10px;
  color: #fff; background: rgba(6,47,62,.2); display: grid; grid-template-rows: auto auto auto; place-items: center; align-content: center; gap: 4px;
  text-align: center; outline: 0;
  transition: border-color .18s cubic-bezier(.16,1,.3,1),background .18s cubic-bezier(.16,1,.3,1),box-shadow .18s cubic-bezier(.16,1,.3,1),transform .18s cubic-bezier(.16,1,.3,1);
}
html[data-theme="eco-tech"] .tech-factor-row:last-child { border-bottom-color: rgba(144,225,221,.16); }
html[data-theme="eco-tech"] .tech-factor-row.is-selected,
html[data-theme="eco-tech"] .tech-factor-row:hover,
html[data-theme="eco-tech"] .tech-factor-row:focus-visible {
  border-color: rgba(188,251,247,.56); border-radius: 10px;
  background: rgba(72,175,177,.22);
  box-shadow: 0 0 14px rgba(71,217,210,.12),inset 0 1px 0 rgba(255,255,255,.06);
}
html[data-theme="eco-tech"] .tech-factor-icon {
  width: 32px; height: 32px; border: 1px solid rgba(159,241,236,.56); border-radius: 50%; color: #dffffc;
  display: grid; place-items: center; font-size: 8px; font-weight: 900;
}
html[data-theme="eco-tech"] .tech-factor-row.is-selected .tech-factor-icon,
html[data-theme="eco-tech"] .tech-factor-row:hover .tech-factor-icon {
  color: #062f39; border-color: rgba(207,255,252,.8); background: #8be9e4; box-shadow: 0 0 9px rgba(91,232,224,.28);
}
html[data-theme="eco-tech"] .tech-factor-icon svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(116,239,232,.48));
}
html[data-theme="eco-tech"] .tech-factor-row strong { color: #fff; font-size: clamp(12px,1vw,15px); line-height: 1; }
html[data-theme="eco-tech"] .tech-factor-row > span:last-child { color: rgba(255,255,255,.9); font-family: Bahnschrift,"Segoe UI",sans-serif; font-size: clamp(12px,1vw,15px); font-weight: 800; line-height: 1; white-space: nowrap; text-align: center; font-variant-numeric: tabular-nums; }
html[data-theme="eco-tech"] .tech-factor-row b { color: inherit; font-weight: inherit; }
html[data-theme="eco-tech"] .tech-factor-row small { margin-left: 3px; color: rgba(255,255,255,.7); font-size: 8px; }
html[data-theme="eco-tech"] .tech-data-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

html[data-theme="eco-tech"] .tech-lower-grid { min-width: 0; min-height: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
html[data-theme="eco-tech"] .tech-foundation-panel,
html[data-theme="eco-tech"] .tech-capability-panel {
  min-width: 0; min-height: 0; padding: clamp(11px,1.3vw,18px); padding-bottom: 12px; border: 1px solid rgba(129,231,225,.62); border-radius: 14px;
  background: linear-gradient(180deg,rgba(3,27,41,.72),rgba(3,31,44,.64)); box-shadow: 0 0 24px rgba(42,207,200,.08),inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 26px rgba(54,208,199,.04); backdrop-filter: none;
  display: grid; grid-template-rows: auto minmax(0,1fr); overflow: hidden;
}
html[data-theme="eco-tech"] .tech-panel-title {
  min-height: 31px; padding: 0 0 8px; border-bottom: 1px solid rgba(137,229,224,.32); display: flex; align-items: center; gap: 9px;
}
html[data-theme="eco-tech"] .tech-panel-title i { width: 3px; height: 15px; background: #74eee7; box-shadow: 0 0 8px rgba(71,230,220,.5); }
html[data-theme="eco-tech"] .tech-panel-title h2 { margin: 0; color: #fff; font-size: clamp(18px,1.5vw,22px); line-height: 1; }
html[data-theme="eco-tech"] .tech-foundation-grid,
html[data-theme="eco-tech"] .tech-capability-grid { min-height: 0; padding-top: 9px; display: grid; gap: 8px; }
html[data-theme="eco-tech"] .tech-foundation-grid { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: minmax(0,1fr); gap: 14px; }
html[data-theme="eco-tech"] .tech-foundation-column {
  min-width: 0; min-height: 0; border: 1px solid rgba(128,224,219,.42); border-radius: 7px;
  background: rgba(7,49,64,.56); display: grid; grid-template-rows: repeat(2,minmax(0,1fr)); position: relative; overflow: hidden;
}
html[data-theme="eco-tech"] .tech-foundation-column::before {
  content: ''; height: 1px; position: absolute; z-index: 1; top: 50%; left: 0; right: 66px;
  background: rgba(137,229,224,.28); pointer-events: none;
}
html[data-theme="eco-tech"] .tech-foundation-column > a,
html[data-theme="eco-tech"] .tech-foundation-column > div {
  min-width: 0; min-height: 0; padding: 7px 70px 7px 14px; color: #fff;
  display: grid; grid-template-columns: 40px minmax(0,1fr); align-items: center; gap: 12px;
}
html[data-theme="eco-tech"] .tech-data-icon,
html[data-theme="eco-tech"] .tech-capability-icon {
  border: 1px solid rgba(133,238,232,.48); color: #eaffff; background: rgba(46,170,165,.1); display: grid; place-items: center; font-weight: 900;
}
html[data-theme="eco-tech"] .tech-data-icon { width: 40px; height: 40px; border-radius: 7px; align-self: center; justify-self: start; }
html[data-theme="eco-tech"] .tech-data-icon svg {
  width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(111,239,232,.56));
}
html[data-theme="eco-tech"] .tech-foundation-grid strong,
html[data-theme="eco-tech"] .tech-foundation-grid small { display: block; color: #fff; }
html[data-theme="eco-tech"] .tech-foundation-grid strong { margin-top: 4px; font-size: clamp(22px,1.9vw,30px); line-height: 1; }
html[data-theme="eco-tech"] .tech-foundation-grid strong { font-family: Bahnschrift,"Segoe UI",sans-serif; font-variant-numeric: tabular-nums; }
html[data-theme="eco-tech"] .tech-foundation-grid small { overflow: hidden; color: rgba(255,255,255,.9); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="eco-tech"] .tech-foundation-accent {
  width: 56px; height: 56px; border: 1px solid rgba(157,240,235,.52); color: #bafffa; background: rgba(24,99,111,.5);
  display: grid; place-items: center; position: absolute; z-index: 2; right: 10px; top: 50%; transform: translateY(-50%);
  box-shadow: 0 0 16px rgba(71,217,210,.12),inset 0 1px 0 rgba(255,255,255,.06); pointer-events: none;
}
html[data-theme="eco-tech"] .tech-foundation-accent-model { border-radius: 8px; }
html[data-theme="eco-tech"] .tech-foundation-accent-point { border-radius: 50%; }
html[data-theme="eco-tech"] .tech-foundation-accent svg {
  width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(111,239,232,.44));
}
html[data-theme="eco-tech"] .tech-capability-grid { grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); }
html[data-theme="eco-tech"] .tech-capability-grid a {
  min-width: 0; min-height: 0; padding: 7px 9px; border: 1px solid rgba(128,224,219,.32); border-radius: 7px;
  color: #fff; background: rgba(7,49,64,.56); display: grid; grid-template-columns: 40px minmax(0,1fr); align-items: center; gap: 9px;
}
html[data-theme="eco-tech"] .tech-capability-icon { width: 40px; height: 40px; border-radius: 7px; align-self: center; justify-self: start; }
html[data-theme="eco-tech"] .tech-capability-icon svg {
  width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(111,239,232,.5));
}
html[data-theme="eco-tech"] .tech-capability-grid strong { min-width: 0; overflow: hidden; color: #fff; font-size: clamp(11px,1vw,14px); line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="eco-tech"] .tech-foundation-column > a,
html[data-theme="eco-tech"] .tech-capability-grid a { transition: border-color .18s cubic-bezier(.16,1,.3,1),background .18s cubic-bezier(.16,1,.3,1),transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s cubic-bezier(.16,1,.3,1); }
html[data-theme="eco-tech"] .tech-foundation-column > a:hover,
html[data-theme="eco-tech"] .tech-capability-grid a:hover,
html[data-theme="eco-tech"] .tech-foundation-column > a:focus-visible,
html[data-theme="eco-tech"] .tech-capability-grid a:focus-visible {
  border-color: rgba(188,255,251,.72); background: rgba(37,119,133,.58); box-shadow: 0 0 14px rgba(63,216,208,.1); outline: 0; transform: translateY(-1px);
}
html[data-theme="eco-tech"] .tech-foundation-column > a:hover,
html[data-theme="eco-tech"] .tech-foundation-column > a:focus-visible { transform: none; }
html[data-theme="eco-tech"] .tech-capability-grid a:active { transform: translateY(0) scale(.99); }

@media (min-width: 1000px) {
  html[data-theme="eco-tech"] body.home-body .home-page { min-height: 820px; }
  html[data-theme="eco-tech"] .tech-home-shell { grid-template-rows: 44px minmax(520px,2.25fr) minmax(185px,.9fr); }
}

@media (min-width: 1000px) and (min-height: 700px) {
  html[data-theme="eco-tech"] body.home-body { height: 100dvh; min-height: 0; overflow: hidden; }
  html[data-theme="eco-tech"] body.home-body .home-page { height: calc(100dvh - 75px); min-height: 0; }
  html[data-theme="eco-tech"] .tech-home-shell { height: 100%; grid-template-rows: clamp(40px,4.2vh,44px) minmax(0,2.25fr) minmax(200px,.95fr); }
}

@media (min-width: 1000px) and (max-width: 1199px) {
  html[data-theme="eco-tech"] .home-page { width: calc(100% - 32px); }
  html[data-theme="eco-tech"] body.home-body .brand-name,
  html[data-theme="eco-tech"] body.home-body .admin-link { display: none; }
  html[data-theme="eco-tech"] body.home-body .topbar-inner { gap: 8px; }
  html[data-theme="eco-tech"] .nav a { padding-left: 6px; padding-right: 6px; font-size: 12px; }
  html[data-theme="eco-tech"] .tech-weather-metric strong { font-size: 13px; }
}

@media (min-width: 1200px) and (max-width: 1550px) {
  html[data-theme="eco-tech"] body.home-body .topbar-inner { width: calc(100% - 20px); gap: 8px; }
  html[data-theme="eco-tech"] body.home-body .brand-mark { width: 40px; height: 40px; }
  html[data-theme="eco-tech"] body.home-body .brand-name { font-size: 16px; }
  html[data-theme="eco-tech"] .nav a { padding-left: 5px; padding-right: 5px; gap: 3px; font-size: 12px; }
  html[data-theme="eco-tech"] .nav a > svg { width: 13px; height: 13px; }
  html[data-theme="eco-tech"] body.home-body .tech-city-switch,
  html[data-theme="eco-tech"] body.home-body .admin-link { padding-left: 10px; padding-right: 10px; }
  html[data-theme="eco-tech"] body.home-body .theme-switch-button { padding-left: 10px; padding-right: 10px; }
  html[data-theme="eco-tech"] .tech-weather-metric { grid-template-columns: 30px minmax(0,1fr); gap: 6px; }
  html[data-theme="eco-tech"] .tech-metric-icon { width: 28px; height: 28px; }
  html[data-theme="eco-tech"] .tech-metric-icon svg { width: 16px; height: 16px; }
  html[data-theme="eco-tech"] .tech-weather-metric small { font-size: 9px; }
  html[data-theme="eco-tech"] .tech-weather-metric strong { font-size: 19px; }
  html[data-theme="eco-tech"] .tech-weather-wind strong { font-size: 14px; }
}

@media (min-width: 1000px) and (max-height: 790px) {
  html[data-theme="eco-tech"] .tech-home-title h1 { font-size: 22px; }
  html[data-theme="eco-tech"] .tech-cockpit { padding: 12px; }
  html[data-theme="eco-tech"] .tech-city-copy strong { font-size: 22px; }
  html[data-theme="eco-tech"] .tech-weather-status i { font-size: 38px; }
  html[data-theme="eco-tech"] .tech-air-panel { padding-top: 8px; padding-bottom: 8px; }
  html[data-theme="eco-tech"] .tech-air-title { min-height: 32px; padding: 0; }
  html[data-theme="eco-tech"] .tech-aqi-wrap { min-height: 82px; padding: 8px 0 10px; gap: 12px; }
  html[data-theme="eco-tech"] .tech-aqi-gauge { width: auto; padding: 0 0 12px; }
  html[data-theme="eco-tech"] .tech-aqi-gauge > div { border: 0; }
  html[data-theme="eco-tech"] .tech-aqi-gauge strong { font-size: 42px; }
  html[data-theme="eco-tech"] .tech-factor-list { grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); }
  html[data-theme="eco-tech"] .tech-factor-row { min-height: 0; padding-top: 4px; padding-bottom: 4px; }
  html[data-theme="eco-tech"] .tech-factor-icon { width: 22px; height: 22px; }
  html[data-theme="eco-tech"] .tech-factor-icon svg { width: 14px; height: 14px; }
}

@media (max-width: 999px) {
  html[data-theme="eco-tech"] body.home-body { overflow-x: hidden; background-position: center 58px; background-size: auto 100dvh; }
  html[data-theme="eco-tech"] body.home-body .topbar,
  html[data-theme="eco-tech"] body.home-body .topbar-inner { min-height: 58px; }
  html[data-theme="eco-tech"] body.home-body .brand-name,
  html[data-theme="eco-tech"] body.home-body .tech-city-switch { display: none; }
  html[data-theme="eco-tech"] .nav a { padding-top: 18px; padding-bottom: 17px; font-size: 11px; }
  html[data-theme="eco-tech"] .home-page { width: calc(100% - 24px); padding: 18px 0 32px; }
  html[data-theme="eco-tech"] .tech-home-shell { display: block; }
  html[data-theme="eco-tech"] .tech-home-title { min-height: 76px; }
  html[data-theme="eco-tech"] .tech-home-title h1 { font-size: clamp(28px,7.8vw,38px); }
  html[data-theme="eco-tech"] .tech-cockpit { min-height: 0; padding: 12px; }
  html[data-theme="eco-tech"] .tech-cockpit-grid { height: auto; grid-template-columns: 1fr; }
  html[data-theme="eco-tech"] .tech-weather-panel { min-height: 420px; }
  html[data-theme="eco-tech"] .tech-city-stage { min-height: 260px; }
  html[data-theme="eco-tech"] .tech-air-panel { min-height: 390px; }
  html[data-theme="eco-tech"] .tech-city-stage p { bottom: 8px; }
  html[data-theme="eco-tech"] .tech-lower-grid { margin-top: 14px; grid-template-columns: 1fr; }
  html[data-theme="eco-tech"] .tech-foundation-panel,
  html[data-theme="eco-tech"] .tech-capability-panel { min-height: 250px; }
  html[data-theme="eco-tech"] .tech-capability-grid { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(3,minmax(0,1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="eco-tech"] .tech-aqi-gauge::after { transition: none; }
  html[data-theme="eco-tech"] .nav a,
  html[data-theme="eco-tech"] .nav a > svg,
  html[data-theme="eco-tech"] .tech-city-switch,
  html[data-theme="eco-tech"] .admin-link,
  html[data-theme="eco-tech"] .theme-switch-button,
  html[data-theme="eco-tech"] .tech-city-stage p,
  html[data-theme="eco-tech"] .tech-factor-row,
  html[data-theme="eco-tech"] .tech-foundation-column > a,
  html[data-theme="eco-tech"] .tech-capability-grid a { transition: none; }
}
/* 2026-07-18 AQI dial and environment consistency */
html[data-theme="eco-tech"] .tech-cockpit {
  --aqi-color: #69d6a1;
  --aqi-color-rgb: 105,214,161;
  --aqi-progress: 0deg;
}
html[data-theme="eco-tech"] .tech-cockpit[data-aqi="good"] { --aqi-color: #67d5df; --aqi-color-rgb: 103,213,223; }
html[data-theme="eco-tech"] .tech-cockpit[data-aqi="light"] { --aqi-color: #eac45b; --aqi-color-rgb: 234,196,91; }
html[data-theme="eco-tech"] .tech-cockpit[data-aqi="moderate"] { --aqi-color: #ec9254; --aqi-color-rgb: 236,146,84; }
html[data-theme="eco-tech"] .tech-cockpit[data-aqi="heavy"] { --aqi-color: #e36567; --aqi-color-rgb: 227,101,103; }
html[data-theme="eco-tech"] .tech-cockpit[data-aqi="severe"] { --aqi-color: #c46ed7; --aqi-color-rgb: 196,110,215; }

html[data-theme="eco-tech"] .tech-city-stage p {
  min-height: clamp(56px,7vh,70px);
  padding-top: 10px;
  padding-bottom: 10px;
}
html[data-theme="eco-tech"] .tech-city-stage p > span {
  min-width: 0;
  overflow: hidden;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
}

html[data-theme="eco-tech"] .tech-aqi-wrap {
  min-height: 132px;
  padding: 12px 0 15px;
  grid-template-columns: 106px minmax(0,1fr);
  gap: 17px;
}
html[data-theme="eco-tech"] .tech-aqi-gauge {
  width: 104px;
  height: 104px;
  min-width: 104px;
  padding: 8px;
  border: 1px solid rgba(var(--aqi-color-rgb),.5);
  border-radius: 50%;
  background: conic-gradient(from -90deg,var(--aqi-color) 0 var(--aqi-progress),rgba(181,235,232,.13) var(--aqi-progress) 360deg);
  box-shadow: 0 0 0 5px rgba(var(--aqi-color-rgb),.06),0 0 22px rgba(var(--aqi-color-rgb),.2),inset 0 0 15px rgba(var(--aqi-color-rgb),.08);
  position: relative;
  display: grid;
  place-items: center;
  transition: border-color .35s ease,background .5s ease,box-shadow .35s ease;
}
html[data-theme="eco-tech"] .tech-aqi-gauge::before,
html[data-theme="eco-tech"] .tech-aqi-gauge::after { content: none; }
html[data-theme="eco-tech"] .tech-aqi-gauge > div {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(189,246,242,.18);
  border-radius: 50%;
  background: rgba(4,31,44,.9);
  box-shadow: inset 0 0 18px rgba(0,8,15,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}
html[data-theme="eco-tech"] .tech-aqi-gauge small {
  padding: 0;
  color: rgba(226,255,252,.64);
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
}
html[data-theme="eco-tech"] .tech-aqi-gauge strong {
  color: #fff;
  font-family: Bahnschrift,"Segoe UI",sans-serif;
  font-size: clamp(34px,2.5vw,43px);
  line-height: .95;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 13px rgba(var(--aqi-color-rgb),.34);
}
html[data-theme="eco-tech"] .tech-aqi-copy {
  min-width: 0;
  padding-left: 16px;
  border-left: 1px solid rgba(139,229,224,.24);
  display: flex;
  justify-content: center;
  flex-direction: column;
}
html[data-theme="eco-tech"] .tech-aqi-copy strong,
html[data-theme="eco-tech"] .tech-aqi-copy small,
html[data-theme="eco-tech"] .tech-aqi-copy p { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html[data-theme="eco-tech"] .tech-aqi-copy strong {
  color: #fff;
  font-size: clamp(15px,1.25vw,19px);
  line-height: 1.2;
  white-space: nowrap;
}
html[data-theme="eco-tech"] .tech-aqi-copy strong span { color: var(--aqi-color); text-shadow: 0 0 8px rgba(var(--aqi-color-rgb),.28); }
html[data-theme="eco-tech"] .tech-aqi-copy small {
  margin-top: 8px;
  color: rgba(232,255,253,.68);
  font-size: 10px;
  white-space: nowrap;
}
html[data-theme="eco-tech"] .tech-aqi-copy p {
  max-height: 2.8em;
  margin: 7px 0 0;
  color: rgba(232,255,253,.54);
  font-size: 9px;
  line-height: 1.4;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
html[data-theme="eco-tech"] .tech-cockpit[data-aqi="heavy"] .tech-aqi-gauge,
html[data-theme="eco-tech"] .tech-cockpit[data-aqi="severe"] .tech-aqi-gauge {
  animation: tech-aqi-alert 1.8s ease-in-out infinite;
}
html[data-theme="eco-tech"] .tech-factor-row.is-selected .tech-factor-icon,
html[data-theme="eco-tech"] .tech-factor-row:hover .tech-factor-icon {
  color: #062f39;
  border-color: rgba(235,255,253,.88);
  background: var(--aqi-color);
  box-shadow: 0 0 10px rgba(var(--aqi-color-rgb),.32);
}
@keyframes tech-aqi-alert {
  0%,100% { box-shadow: 0 0 0 5px rgba(var(--aqi-color-rgb),.06),0 0 18px rgba(var(--aqi-color-rgb),.18); }
  50% { box-shadow: 0 0 0 7px rgba(var(--aqi-color-rgb),.1),0 0 30px rgba(var(--aqi-color-rgb),.34); }
}

@media (min-width:1000px) and (max-height:790px) {
  html[data-theme="eco-tech"] .tech-aqi-wrap { min-height: 92px; padding: 7px 0 9px; grid-template-columns: 82px minmax(0,1fr); gap: 12px; }
  html[data-theme="eco-tech"] .tech-aqi-gauge { width: 80px; height: 80px; min-width: 80px; padding: 6px; }
  html[data-theme="eco-tech"] .tech-aqi-gauge strong { font-size: 31px; }
  html[data-theme="eco-tech"] .tech-aqi-copy { padding-left: 11px; }
  html[data-theme="eco-tech"] .tech-aqi-copy small { margin-top: 5px; }
  html[data-theme="eco-tech"] .tech-aqi-copy p { margin-top: 4px; -webkit-line-clamp: 1; }
}
@media (max-width:999px) {
  html[data-theme="eco-tech"] .tech-aqi-wrap { grid-template-columns: 118px minmax(0,1fr); }
  html[data-theme="eco-tech"] .tech-aqi-gauge { width: 112px; height: 112px; min-width: 112px; }
}
@media (prefers-reduced-motion:reduce) {
  html[data-theme="eco-tech"] .tech-aqi-gauge { transition: none; animation: none !important; }
}

/* 2026-07-18 environment image fit and AQI dial */
html[data-theme="eco-tech"] .weather-overview {
  background-image: linear-gradient(90deg,rgba(3,28,41,.86),rgba(3,28,41,.2) 54%,rgba(3,28,41,.52)),var(--tech-city-image,var(--city-image));
  background-size: 100% 100%,contain;
  background-position: center,center;
  background-repeat: no-repeat,no-repeat;
}
html[data-theme="eco-tech"] .aqi-overview {
  --aqi-color: #69d6a1;
  --aqi-color-rgb: 105,214,161;
  padding: 28px;
  display: grid;
  grid-template-columns: 132px minmax(0,1fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  gap: 20px 22px;
}
html[data-theme="eco-tech"] .aqi-gauge.good { --aqi-color: #67d5df; --aqi-color-rgb: 103,213,223; }
html[data-theme="eco-tech"] .aqi-gauge.light { --aqi-color: #eac45b; --aqi-color-rgb: 234,196,91; }
html[data-theme="eco-tech"] .aqi-gauge.moderate { --aqi-color: #ec9254; --aqi-color-rgb: 236,146,84; }
html[data-theme="eco-tech"] .aqi-gauge.heavy { --aqi-color: #e36567; --aqi-color-rgb: 227,101,103; }
html[data-theme="eco-tech"] .aqi-gauge.severe { --aqi-color: #c46ed7; --aqi-color-rgb: 196,110,215; }
html[data-theme="eco-tech"] .aqi-gauge {
  width: 132px;
  height: 132px;
  padding: 8px;
  grid-column: 1;
  grid-row: 1;
  border: 1px solid rgba(var(--aqi-color-rgb),.5);
  border-radius: 50%;
  background: conic-gradient(from -90deg,var(--aqi-color) 0 var(--aqi-level),rgba(181,235,232,.14) var(--aqi-level) 100%);
  box-shadow: 0 0 0 5px rgba(var(--aqi-color-rgb),.06),0 0 24px rgba(var(--aqi-color-rgb),.2),inset 0 0 15px rgba(var(--aqi-color-rgb),.08);
}
html[data-theme="eco-tech"] .aqi-gauge::before { content: none; }
html[data-theme="eco-tech"] .aqi-gauge-inner {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(var(--aqi-color-rgb),.24);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 34%,rgba(var(--aqi-color-rgb),.12),rgba(3,28,41,.94) 68%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-shadow: inset 0 0 16px rgba(var(--aqi-color-rgb),.08);
}
html[data-theme="eco-tech"] .aqi-gauge-inner small {
  color: rgba(217,251,248,.68);
  font-size: 10px;
  letter-spacing: 0;
}
html[data-theme="eco-tech"] .aqi-gauge-inner strong {
  margin-top: 2px;
  color: #fff;
  font-size: 40px;
  line-height: 1;
  text-shadow: 0 0 13px rgba(var(--aqi-color-rgb),.34);
}
html[data-theme="eco-tech"] .aqi-gauge-inner span {
  margin-top: 7px;
  padding: 0;
  color: var(--aqi-color);
  background: transparent;
  font-size: 12px;
}
html[data-theme="eco-tech"] .aqi-gauge > i { display: none; }
html[data-theme="eco-tech"] .aqi-copy { min-width: 0; grid-column: 2; grid-row: 1; }
html[data-theme="eco-tech"] .aqi-copy > span { color: #efffff; font-size: 20px; }
html[data-theme="eco-tech"] .aqi-copy p { margin: 10px 0; }
html[data-theme="eco-tech"] .aqi-copy p strong,
html[data-theme="eco-tech"] .aqi-gauge + .aqi-copy > span { color: var(--aqi-color); }
html[data-theme="eco-tech"] .aqi-level-scale { margin-top: 0; grid-column: 1 / -1; grid-row: 2; }
html[data-theme="eco-tech"] .aqi-gauge.heavy,
html[data-theme="eco-tech"] .aqi-gauge.severe { animation: environment-aqi-alert 2.6s ease-in-out infinite; }
@keyframes environment-aqi-alert {
  0%,100% { box-shadow: 0 0 0 5px rgba(var(--aqi-color-rgb),.06),0 0 18px rgba(var(--aqi-color-rgb),.18); }
  50% { box-shadow: 0 0 0 7px rgba(var(--aqi-color-rgb),.1),0 0 30px rgba(var(--aqi-color-rgb),.34); }
}
@media (max-width: 1180px) {
  html[data-theme="eco-tech"] .aqi-overview { grid-template-columns: 112px minmax(0,1fr); gap: 16px; }
  html[data-theme="eco-tech"] .aqi-gauge { width: 112px; height: 112px; min-width: 112px; }
  html[data-theme="eco-tech"] .aqi-gauge-inner strong { font-size: 34px; }
}
@media (max-width: 760px) {
  html[data-theme="eco-tech"] .weather-overview {
    background-size: 100% 100%,auto 100%;
    background-position: center,center;
  }
  html[data-theme="eco-tech"] .aqi-overview { grid-template-columns: 112px minmax(0,1fr); padding: 22px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="eco-tech"] .aqi-gauge { animation: none !important; }
}