:root {
  --ink: #332c2b;
  --ink-soft: #4f4745;
  --muted: #706866;
  --line: #e2dedc;
  --line-strong: #cbc4c1;
  --canvas: #f4f7f6;
  --surface: #ffffff;
  --surface-soft: #f8faf9;
  --nav: #00554b;
  --nav-soft: #0b685d;
  --copper: #f08519;
  --copper-soft: #fff0e2;
  --blue: #00554b;
  --blue-soft: #e5f0ee;
  --cyan: #7c6fb0;
  --cyan-soft: #efedf7;
  --green: #009b4c;
  --amber: #f08519;
  --amber-soft: #fff0e2;
  --purple: #7c6fb0;
  --focus: rgba(0, 85, 75, 0.28);
  --shadow-sm: 0 2px 6px rgba(51, 44, 43, 0.08);
  --shell-sidebar-width: 248px;
  --shell-sidebar-compact-width: 76px;
  --shell-header-height: 62px;
  --shell-content-gutter: 28px;
  --control-radius: 8px;
  --touch-target: 44px;
  --motion-fast: 180ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --z-header: 10;
  --z-drawer-backdrop: 20;
  --z-drawer: 30;
  --z-assistant: 40;
  --z-assistant-panel: 50;
  --z-auth: 60;
}

* { box-sizing: border-box; }

html {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--canvas);
}

body {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(0, 85, 75, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(0, 85, 75, 0.035) 1px, transparent 1px),
    var(--canvas);
  background-size: 72px 72px;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; }
button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }

.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }

.icon {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.auth-pending,
body.auth-locked {
  min-width: 0;
  overflow: hidden;
}

body.sidebar-menu-open { overflow: hidden; }

.login-screen {
  position: fixed;
  z-index: var(--z-auth);
  inset: 0;
  width: 100%;
  min-height: 100vh;
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: #f5fbf9;
  background:
    radial-gradient(circle at 12% 12%, rgba(0, 163, 90, 0.22), transparent 32%),
    radial-gradient(circle at 92% 88%, rgba(240, 133, 25, 0.18), transparent 28%),
    linear-gradient(135deg, #003f38 0%, #00554b 56%, #043c37 100%);
}

.login-screen::before {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  content: "";
  pointer-events: none;
  mask-image: linear-gradient(to right, #000, transparent 78%);
}

.login-orbit {
  position: fixed;
  border: 1px solid rgba(140, 222, 201, 0.14);
  border-radius: 50%;
  pointer-events: none;
}

.login-orbit::after {
  position: absolute;
  top: 50%;
  left: -5px;
  width: 10px;
  height: 10px;
  background: var(--copper);
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(240, 133, 25, 0.75);
  content: "";
}

.login-orbit-one { right: -220px; bottom: -300px; width: 720px; height: 720px; transform: rotate(-18deg); }
.login-orbit-two { right: -90px; bottom: -170px; width: 460px; height: 460px; transform: rotate(28deg); }

.login-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: clamp(50px, 8vw, 130px);
  width: min(1180px, calc(100% - 64px));
  min-height: 100%;
  margin: 0 auto;
  padding: 54px 0;
  align-items: center;
}

.login-story { min-width: 0; }

.login-brand-panel {
  display: grid;
  width: 276px;
  min-height: 82px;
  margin-bottom: clamp(50px, 8vh, 90px);
  padding: 10px 14px;
  place-items: center;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 42px rgba(0, 26, 23, 0.22);
}

.login-brand-panel img { display: block; width: 100%; height: auto; }

.login-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  color: #9bcac0;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.login-kicker span { width: 34px; height: 2px; background: var(--copper); }

.login-story h1 {
  margin-bottom: 22px;
  color: #fff;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  font-size: clamp(48px, 5.1vw, 72px);
  font-weight: 750;
  line-height: 1.13;
  letter-spacing: -0.035em;
}

.login-story h1 em { color: #f49a3f; font-style: normal; }
.login-story > p { max-width: 610px; margin-bottom: 32px; color: #b9d7d1; font-size: 15px; line-height: 1.9; }

.login-energy-map {
  position: relative;
  max-width: 640px;
  height: 164px;
  margin-top: 12px;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.energy-map-label { position: absolute; z-index: 1; top: 15px; left: 0; display: flex; gap: 10px; align-items: baseline; }
.energy-map-label span { color: #87bdb2; font-size: 9px; letter-spacing: 0.18em; }
.energy-map-label b { color: #e8f5f1; font-size: 12px; }
.login-energy-map svg { width: 100%; height: 100%; overflow: visible; }
.login-energy-map path { fill: none; stroke-linecap: round; }
.energy-flow-base { stroke: rgba(255, 255, 255, 0.1); stroke-width: 8; }
.energy-flow-live { stroke: url(#loginFlowGradient); stroke-width: 3; stroke-dasharray: 12 10; animation: login-flow 12s linear infinite; }
.login-energy-map circle { fill: #00554b; stroke: #8fdccb; stroke-width: 3; }

.login-station-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 640px;
  margin-top: 24px;
}

.login-station-facts div { min-width: 0; padding-right: 18px; }
.login-station-facts div + div { padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, 0.14); }
.login-station-facts span { display: block; margin-bottom: 7px; color: #7fb2a8; font-size: 10px; }
.login-station-facts strong { display: block; overflow: hidden; color: #f3faf8; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }

.login-panel {
  padding: 34px 36px 24px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 22px;
  box-shadow: 0 34px 80px rgba(0, 25, 22, 0.34);
  backdrop-filter: blur(18px);
}

.login-panel-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; }
.login-panel-meta > span { color: var(--nav); }
.login-panel-meta b { display: flex; gap: 7px; align-items: center; color: #378064; font-weight: 600; letter-spacing: 0; }
.login-panel-meta i { width: 7px; height: 7px; background: #31ad70; border-radius: 50%; box-shadow: 0 0 0 5px rgba(49, 173, 112, 0.1); }
.login-panel h2 { margin-bottom: 8px; font-size: 25px; letter-spacing: -0.03em; }
.login-panel > p { margin-bottom: 24px; color: var(--muted); font-size: 12px; }

.login-role-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 25px;
  padding: 5px;
  background: #edf3f1;
  border-radius: 12px;
}

.login-role-button {
  display: flex;
  gap: 10px;
  min-width: 0;
  padding: 12px 11px;
  align-items: center;
  color: #65706d;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.login-role-button .icon { flex: 0 0 auto; width: 20px; height: 20px; }
.login-role-button span { min-width: 0; }
.login-role-button strong, .login-role-button small { display: block; }
.login-role-button strong { margin-bottom: 3px; font-size: 12px; }
.login-role-button small { overflow: hidden; font-size: 9px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.login-role-button.is-active { color: var(--nav); background: #fff; box-shadow: 0 3px 10px rgba(32, 65, 58, 0.1); }
.login-role-button[data-login-role="admin"].is-active .icon { color: var(--copper); }
.login-role-button[data-login-role="authorized"].is-active .icon { color: var(--green); }

.login-form { display: grid; gap: 17px; }
.login-screen.is-demo-login .login-field { display: none; }
.login-screen.is-demo-login .login-form { gap: 12px; }
.login-field > span { display: block; margin-bottom: 8px; color: #5d5755; font-size: 11px; font-weight: 700; }
.login-field > div { display: flex; min-height: 50px; align-items: center; color: #8a9491; background: #fafcfb; border: 1px solid #d8e1df; border-radius: 10px; transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease; }
.login-field > div:focus-within { color: var(--nav); background: #fff; border-color: #73a69b; box-shadow: 0 0 0 4px rgba(0, 85, 75, 0.1); }
.login-field > div > .icon { flex: 0 0 auto; width: 17px; height: 17px; margin-left: 15px; }
.login-field input { width: 100%; min-width: 0; padding: 14px 12px; color: var(--ink); font: inherit; font-size: 13px; background: transparent; border: 0; outline: 0; }
.login-field input::placeholder { color: #a4aba9; }
.login-field button { display: grid; flex: 0 0 auto; width: var(--touch-target); height: var(--touch-target); margin-right: 3px; place-items: center; color: #87918e; background: transparent; border: 0; border-radius: var(--control-radius); cursor: pointer; }
.login-field button:hover { color: var(--nav); background: #edf4f2; }

.login-feedback { margin: -5px 0 0; padding: 9px 11px; color: #a12d2d; font-size: 11px; line-height: 1.5; background: #fff1ef; border: 1px solid #f3d0cb; border-radius: 8px; }
.login-feedback.is-working { color: #34665c; background: #edf7f4; border-color: #c8e3dc; }
.login-feedback.is-success { color: #157344; background: #ecf8f1; border-color: #bfe5ce; }

.login-submit {
  display: flex;
  min-height: 52px;
  margin-top: 2px;
  padding: 0 18px;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  background: var(--nav);
  border: 0;
  border-radius: 10px;
  box-shadow: 0 12px 24px rgba(0, 85, 75, 0.2);
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.login-submit:hover { background: #06483f; box-shadow: 0 15px 28px rgba(0, 85, 75, 0.26); transform: translateY(-1px); }
.login-submit:disabled { cursor: wait; opacity: 0.68; transform: none; }
.login-submit .icon { width: 18px; height: 18px; transform: rotate(180deg); }

.login-permission-note { display: flex; gap: 11px; margin-top: 20px; padding: 13px; color: #5d6966; background: #f4f7f6; border-left: 3px solid var(--copper); border-radius: 3px 9px 9px 3px; }
.login-permission-note > .icon { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; color: var(--copper); }
.login-permission-note strong, .login-permission-note span { display: block; }
.login-permission-note strong { margin-bottom: 3px; color: var(--ink-soft); font-size: 11px; }
.login-permission-note span { font-size: 9px; line-height: 1.6; }
.login-panel footer { display: flex; justify-content: space-between; margin-top: 22px; padding-top: 18px; color: #9a9f9e; font-size: 9px; border-top: 1px solid #e5e9e8; }
.login-panel footer b { color: #66716e; }

@keyframes login-flow { to { stroke-dashoffset: -176; } }

.app-shell {
  display: grid;
  grid-template-columns: var(--shell-sidebar-width) minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100vh;
  padding: 26px 20px 22px;
  overflow: hidden;
  color: #f7fbff;
  background: var(--nav);
}

.sidebar-toggle,
.mobile-menu-toggle {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 0;
  border-radius: var(--control-radius);
  cursor: pointer;
}

.sidebar-toggle {
  width: 34px;
  height: 34px;
  margin-left: auto;
}

.sidebar-toggle:hover,
.sidebar-toggle:focus-visible,
.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.2);
  outline: 2px solid rgba(255, 255, 255, 0.72);
  outline-offset: 2px;
}

.sidebar-toggle .icon,
.mobile-menu-toggle .icon { width: 19px; height: 19px; }

.brand { display: grid; gap: 12px; }

.brand-logo-panel {
  display: grid;
  min-height: 70px;
  place-items: center;
  padding: 9px 10px;
  background: #fff;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}

.brand-logo { display: block; width: 100%; height: auto; }
.sidebar-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.brand-site { min-width: 0; padding: 0 3px; }
.brand-site strong { display: block; font-size: 16px; letter-spacing: 0.01em; white-space: nowrap; }
.brand-site span { display: block; margin-top: 4px; color: #b9d2cd; font-size: 12px; white-space: nowrap; }

.nav-list { display: grid; gap: 6px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 13px;
  color: #bdc8d6;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: default;
  transition: color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
}

.nav-item .icon { width: 18px; height: 18px; }
.nav-item.active, .nav-item:hover { color: #fff; background: var(--nav-soft); }
.nav-item.active .icon { color: #f7a34c; }
.nav-item[data-page] { cursor: pointer; }

.session-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 30px;
  gap: 10px;
  padding: 11px;
  align-items: center;
  background: rgba(0, 47, 42, 0.36);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.session-avatar { display: grid; width: 34px; height: 34px; place-items: center; color: #fff; font-size: 12px; font-weight: 800; background: linear-gradient(145deg, var(--copper), #d66d08); border-radius: 9px; }
.session-avatar.is-authorized { background: linear-gradient(145deg, #18a461, #007e43); }
.session-card div { min-width: 0; }
.session-card small, .session-card strong, .session-card div span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-card small { color: #81b2a8; font-size: 8px; }
.session-card strong { margin-top: 3px; color: #fff; font-size: 11px; }
.session-card div span { margin-top: 2px; color: #b4d0ca; font-size: 8px; }
.session-card button { display: grid; width: 30px; height: 30px; place-items: center; color: #a8cbc4; background: transparent; border: 0; border-radius: 7px; cursor: pointer; }
.session-card button:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.session-card button .icon { width: 16px; height: 16px; }

.gateway-card {
  margin-top: auto;
  padding: 16px;
  background: #06473f;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.gateway-heading, .gateway-status { display: flex; align-items: center; }
.gateway-heading { gap: 8px; color: #bdd6d1; font-size: 12px; }

.gateway-icon {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  color: #f6a14a;
  background: rgba(240, 133, 25, 0.14);
  border-radius: 7px;
}

.gateway-card strong { display: block; margin: 12px 0 11px; color: #fff; font-size: 14px; word-break: break-all; }
.gateway-status { gap: 7px; color: #b8d0cc; font-size: 11px; }
.gateway-status b { margin-left: auto; color: #8de0b3; }
.status-dot, .pulse { flex: 0 0 auto; width: 8px; height: 8px; background: #49b77f; border-radius: 50%; }
.gateway-status.is-delayed .status-dot { background: var(--amber); }
.gateway-status.is-delayed b { color: #ffc886; }
.gateway-status.is-waiting .status-dot { background: #8aa39f; }
.gateway-status.is-waiting b { color: #b8d0cc; }

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer-backdrop);
  display: none;
  background: rgba(0, 32, 29, 0.46);
  border: 0;
}

.dashboard { min-width: 0; padding: 0 var(--shell-content-gutter) 34px; }

.dashboard-page { min-width: 0; }

.platform-header {
  position: relative;
  z-index: var(--z-header);
  display: grid;
  grid-template-columns: var(--touch-target) minmax(0, 1fr) var(--touch-target);
  align-items: center;
  min-height: var(--shell-header-height);
  margin: 0 calc(-1 * var(--shell-content-gutter)) 24px;
  padding: 0 var(--shell-content-gutter);
  color: #fff;
  background: var(--nav);
}

.platform-brand {
  grid-column: 2;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.platform-brand img {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: 40px;
  padding: 3px 7px;
  background: #fff;
  border-radius: 7px;
}

.platform-brand strong {
  min-width: 0;
  overflow: hidden;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-menu-toggle {
  grid-column: 1;
  display: none;
  width: var(--touch-target);
  height: var(--touch-target);
}

.platform-meta {
  position: absolute;
  top: 50%;
  right: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translateY(-50%);
}

.platform-meta .weather-strip,
.platform-meta .status-strip {
  min-height: 38px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: none;
}

.platform-meta .weather-strip {
  display: flex;
  grid-template: none;
  gap: 7px;
  white-space: nowrap;
}

.platform-meta .weather-strip .icon { grid-row: auto; }
.platform-meta .weather-strip small { grid-column: auto; }

.platform-meta .weather-strip span,
.platform-meta .weather-strip strong,
.platform-meta .weather-strip small,
.platform-meta .status-strip span,
.platform-meta .status-strip strong { color: #fff; }

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.topbar-compact {
  align-items: center;
  margin-bottom: 18px;
}

.topbar-compact h1 { margin-bottom: 0; }

.context-line { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; color: var(--copper); font-size: 12px; font-weight: 700; }
.context-line .icon { width: 14px; height: 14px; fill: currentColor; }

h1 { margin-bottom: 7px; font-size: 32px; line-height: 1.2; letter-spacing: -0.02em; }
.page-summary { margin-bottom: 0; color: var(--muted); font-size: 13px; }
.topbar-status { display: flex; align-items: center; gap: 10px; }

.weather-strip {
  display: grid;
  grid-template: auto auto / 18px auto auto;
  align-items: center;
  column-gap: 7px;
  min-height: 40px;
  padding: 5px 11px;
  color: var(--nav);
  background: #edf7f4;
  border: 1px solid #cee5df;
  border-radius: 9px;
}

.weather-strip .icon { grid-row: 1 / 3; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.weather-strip span { color: var(--muted); font-size: 10px; white-space: nowrap; }
.weather-strip strong { color: var(--ink); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.weather-strip small { grid-column: 2 / 4; color: var(--nav); font-size: 9px; white-space: nowrap; }
.weather-strip.is-stale { color: #8b5a20; background: #fff6e8; border-color: #efdbbd; }
.weather-strip.is-error { color: #8a4640; background: #fdf0ee; border-color: #efd0cc; }

.mode-badge {
  padding: 6px 9px;
  color: #8b4708;
  background: var(--amber-soft);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.mode-badge.is-live { color: #006d36; background: #e2f5e9; }
.mode-badge.is-delayed { color: #8b4708; background: var(--amber-soft); }
.mode-badge.is-waiting { color: #52645f; background: #e8efed; }
.mode-badge.is-error { color: #a12d2d; background: #fde9e7; }

.status-strip {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 0 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: var(--shadow-sm);
}

.status-strip span { color: var(--muted); font-size: 12px; }
.status-strip strong { color: var(--ink-soft); font-size: 12px; font-variant-numeric: tabular-nums; }
.pulse { box-shadow: 0 0 0 0 rgba(73, 183, 127, 0.45); animation: pulse 2s infinite; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }

.kpi-card, .panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: var(--shadow-sm);
}

.kpi-card { min-width: 0; padding: 16px; }
.kpi-icon, .section-icon, .meter-type-icon { display: grid; flex: 0 0 auto; place-items: center; border-radius: 9px; }
.kpi-icon { width: 34px; height: 34px; }
.kpi-icon .icon { width: 18px; height: 18px; }
.tone-total .kpi-icon { color: var(--blue); background: var(--blue-soft); }
.tone-peak .kpi-icon { color: var(--amber); background: var(--amber-soft); }
.tone-flat .kpi-icon { color: var(--green); background: #e6f5ed; }
.tone-valley .kpi-icon { color: var(--cyan); background: var(--cyan-soft); }
.home-kpi-card .kpi-icon {
  --kpi-primary: #00665b;
  --kpi-accent: #00a85a;
  --kpi-secondary: #7d6db3;
  background: #e8f3f1;
  box-shadow: inset 0 0 0 1px rgba(0, 102, 91, 0.035);
}
.home-kpi-card .kpi-icon-month,
.home-kpi-card .kpi-icon-carbon {
  --kpi-primary: #007567;
  --kpi-accent: #00a85a;
  background: #e8f6ef;
}
.home-kpi-card .kpi-icon-load {
  --kpi-accent: #f57c00;
  --kpi-secondary: #7d6db3;
}
.home-kpi-card .kpi-icon-cooling {
  --kpi-primary: #0b8072;
  --kpi-accent: #7d6db3;
  background: #f0eef8;
}
.home-kpi-card .kpi-icon-eer {
  --kpi-primary: #00665b;
  --kpi-accent: #00a85a;
}
.home-kpi-card .kpi-icon-cost {
  --kpi-primary: #00665b;
  --kpi-accent: #f57c00;
  background: #fff2e6;
}
.home-kpi-card .kpi-icon-online {
  --kpi-primary: #00665b;
  --kpi-accent: #00a85a;
  --kpi-secondary: #7d6db3;
}
.home-kpi-card .kpi-icon {
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  box-shadow: none;
}
.home-kpi-card .kpi-icon-electricity { background-image: url("./assets/generated/kpi/kpi-electricity.png"); }
.home-kpi-card .kpi-icon-month { background-image: url("./assets/generated/kpi/kpi-month.png"); }
.home-kpi-card .kpi-icon-load { background-image: url("./assets/generated/kpi/kpi-load.png"); }
.home-kpi-card .kpi-icon-cooling { background-image: url("./assets/generated/kpi/kpi-cooling.png"); }
.home-kpi-card .kpi-icon-eer { background-image: url("./assets/generated/kpi/kpi-eer.png"); }
.home-kpi-card .kpi-icon-cost { background-image: url("./assets/generated/kpi/kpi-cost.png"); }
.home-kpi-card .kpi-icon-carbon { background-image: url("./assets/generated/kpi/kpi-carbon.png"); }
.home-kpi-card .kpi-icon-online { background-image: url("./assets/generated/kpi/kpi-online.png"); }
.home-kpi-card .kpi-icon .kpi-glyph { visibility: hidden; }
.home-kpi-card .kpi-glyph {
  overflow: visible;
  fill: none;
  stroke: var(--kpi-primary);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home-kpi-card .kpi-glyph .kpi-primary {
  fill: none;
  stroke: var(--kpi-primary);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home-kpi-card .kpi-glyph .kpi-accent {
  fill: none;
  stroke: var(--kpi-accent);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home-kpi-card .kpi-glyph .kpi-secondary {
  fill: none;
  stroke: var(--kpi-secondary);
  stroke-width: 2.1;
}
.home-kpi-card .kpi-glyph .kpi-solid {
  fill: currentColor;
  stroke: none;
}
.home-kpi-card .kpi-icon .kpi-accent.kpi-solid { color: var(--kpi-accent); }
.home-kpi-card .kpi-icon .kpi-primary.kpi-solid { color: var(--kpi-primary); }
.home-kpi-card .kpi-icon .kpi-soft {
  fill: var(--kpi-accent);
  stroke: none;
  opacity: 0.13;
}
.home-kpi-card .kpi-glyph .kpi-cut {
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.home-kpi-card .kpi-glyph .kpi-dash { stroke-dasharray: 1.5 2.2; }
.home-kpi-card .kpi-glyph .kpi-check {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kpi-card > div { min-width: 0; }
.kpi-label, .formula-hint { color: var(--muted); font-size: 12px; }

.kpi-card strong {
  font-size: 27px;
}

.kpi-value-unit { margin-left: 7px; color: var(--muted); font-size: 12px; font-style: normal; font-weight: 700; }

.metric-card-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 34px;
}

.metric-card-title {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-card-value {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  margin-top: 9px;
}

.metric-card-value strong {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.metric-card-unit {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* Compact metric cards: icon spans both text rows, matching the dashboard visual spec. */
:is(.home-kpi-card, .kpi-card, .energy-data-item, .analysis-kpi) {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  min-height: 112px;
  column-gap: 14px;
  row-gap: 4px;
}

:is(.home-kpi-card, .kpi-card, .energy-data-item, .analysis-kpi) > .metric-card-heading {
  display: contents;
}

:is(.home-kpi-card, .kpi-card, .energy-data-item, .analysis-kpi) > .metric-card-heading > :is(.kpi-icon, .energy-data-icon, .analysis-kpi-icon) {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  width: 50px;
  height: 50px;
  border-radius: 12px;
}

:is(.home-kpi-card, .kpi-card, .energy-data-item, .analysis-kpi) > .metric-card-heading > :is(.kpi-icon, .energy-data-icon, .analysis-kpi-icon) .icon {
  width: 24px;
  height: 24px;
}

:is(.home-kpi-card, .kpi-card, .energy-data-item, .analysis-kpi) .metric-card-title {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;
}

:is(.home-kpi-card, .kpi-card, .energy-data-item, .analysis-kpi) > .metric-card-value {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  gap: 5px;
  margin-top: 0;
}

:is(.home-kpi-card, .kpi-card, .energy-data-item, .analysis-kpi) > .metric-card-value strong {
  font-size: clamp(24px, 1.7vw, 30px);
  line-height: 1;
}

:is(.home-kpi-card, .kpi-card, .energy-data-item, .analysis-kpi) > .metric-card-value .metric-card-unit {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 650;
}

.home-kpi-card > .metric-card-heading > .kpi-icon {
  align-self: stretch;
  width: 54px;
  height: auto;
  min-height: 52px;
}
.home-kpi-card { grid-template-columns: 54px minmax(0, 1fr); }

.content-grid { display: grid; grid-template-columns: minmax(670px, 1fr) 344px; gap: 14px; margin-bottom: 14px; }
.panel { padding: 18px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.section-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
.section-icon { width: 36px; height: 36px; color: var(--blue); background: var(--blue-soft); }
.section-icon .icon { width: 18px; height: 18px; }
.section-title h2 { margin-bottom: 3px; font-size: 18px; }
.section-title p { margin-bottom: 0; color: var(--muted); font-size: 12px; }
.system-diagram-title h2 { margin-bottom: 0; }
.system-diagram-icon {
  background-color: #fff;
  background-image: url("./assets/generated/digital-twin-icon-cropped.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(0, 102, 91, 0.08);
}
.system-diagram-icon .twin-glyph { visibility: hidden; }
.system-diagram-icon .twin-glyph {
  width: 22px;
  height: 22px;
  overflow: visible;
  fill: none;
  stroke: #00665b;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.twin-glyph .twin-base,
.twin-glyph .twin-digital {
  fill: none;
  stroke: #00665b;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.twin-glyph .twin-digital { stroke: #7d6db3; }
.twin-glyph .twin-dash { stroke-dasharray: 2 2; }
.twin-glyph .twin-node { color: #7d6db3; }
.twin-glyph .twin-accent { color: #00a85a; }
.twin-glyph .twin-solid {
  fill: currentColor;
  stroke: none;
}

.ghost-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 13px;
  color: var(--ink-soft);
  background: var(--surface-soft);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, transform 120ms ease;
}

.ghost-button:hover { color: var(--blue); background: var(--blue-soft); border-color: #a9c3e8; }
.ghost-button:active { transform: translateY(1px); }

.meter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

.meter-card {
  min-width: 0;
  padding: 14px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.meter-card:hover { background: #fff; border-color: #b9c8da; transform: translateY(-1px); }
.meter-card.status-live { border-color: rgba(0, 155, 76, 0.28); }
.meter-card.status-delayed { border-color: rgba(240, 133, 25, 0.34); }
.meter-card.status-stale, .meter-card.status-waiting { background: #f5f7f6; }
.meter-card.status-stale .meter-total, .meter-card.status-waiting .meter-total { color: #7e8885; }
.meter-overview {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 13px;
}
.meter-summary, .meter-name { min-width: 0; }
.meter-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.meter-type-icon {
  width: 32px;
  height: 32px;
  color: var(--blue);
  background: var(--blue-soft);
}
.meter-type-icon .icon { width: 17px; height: 17px; }
.meter-card .meter-type-icon {
  width: 88px;
  height: 72px;
  overflow: hidden;
  background: transparent;
}
.meter-card .equipment-image {
  display: block;
  width: 100%;
  height: 100%;
  padding: 2px;
  box-sizing: border-box;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  mix-blend-mode: multiply;
  filter: contrast(1.08) saturate(0.92);
}
.meter-card .equipment-image-snowflake,
.meter-card .equipment-image-pump,
.meter-card .equipment-image-fan,
.meter-card .equipment-image-droplet { transform: none; }
.meter-heading strong { display: block; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.ratio-chip {
  color: #8b4708;
  background: var(--amber-soft);
  border-radius: 999px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.meter-total { margin-bottom: 3px; font-size: 23px; font-weight: 850; line-height: 1.2; font-variant-numeric: tabular-nums; }
.meter-total small { color: var(--muted); font-size: 11px; font-weight: 600; }
.phase-bars { display: grid; gap: 8px; }

.phase-row {
  display: grid;
  grid-template-columns: 22px minmax(50px, 1fr) 70px;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
}

.phase-row > strong { color: var(--ink-soft); text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; }
.bar-track, .rank-line, .capacity-track { overflow: hidden; background: #e5ebf2; border-radius: 999px; }
.bar-track { height: 6px; }
.bar-fill, .rank-line span, .capacity-track span { display: block; height: 100%; border-radius: inherit; }
.peak { background: var(--amber); }
.flat { background: var(--green); }
.valley { background: var(--purple); }
.meter-footer { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.capacity-track { flex: 1; height: 4px; }
.capacity-track span { background: var(--copper); }
.live-label { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-size: 10px; font-weight: 700; }
.live-label::before { width: 6px; height: 6px; content: ""; background: currentColor; border-radius: 50%; }
.live-label.status-delayed { color: #bd6813; }
.live-label.status-stale { color: #a4473e; }
.live-label.status-waiting { color: #71817d; }

.donut-wrap { display: grid; place-items: center; padding: 6px 0 18px; }
.donut-chart { position: relative; display: grid; width: 190px; height: 190px; place-items: center; }
.donut { width: 190px; height: 190px; border-radius: 50%; background: conic-gradient(var(--amber) 0deg, var(--green) 0deg, var(--purple) 0deg); }

.donut::after {
  position: absolute;
  inset: 29px;
  content: "";
  background: var(--surface);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line);
}

.donut-center { position: absolute; z-index: 1; display: grid; max-width: 112px; place-items: center; text-align: center; }
.donut-center strong { font-size: 18px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.donut-center span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.donut-legend { display: grid; grid-template-columns: repeat(3, auto); gap: 8px; margin-top: 13px; }

.donut-legend > span {
  display: grid;
  grid-template-columns: 8px auto;
  align-items: center;
  column-gap: 5px;
  min-width: 72px;
  padding: 7px 8px;
  background: var(--surface-soft);
  border-radius: 8px;
}

.donut-legend i { grid-row: 1 / span 2; width: 8px; height: 20px; border-radius: 4px; }
.donut-legend b { color: var(--ink-soft); font-size: 11px; }
.donut-legend em { color: var(--muted); font-size: 10px; font-style: normal; font-variant-numeric: tabular-nums; }
.legend-peak { background: var(--amber); }
.legend-flat { background: var(--green); }
.legend-valley { background: var(--purple); }
.ranking-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
.ranking-period-switch {
  display: flex;
  width: 100%;
  padding: 3px;
  background: var(--surface-soft);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
}
.ranking-period-switch button {
  flex: 1;
  min-height: 30px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.ranking-period-switch button:hover { color: var(--ink-soft); background: var(--surface); }
.ranking-period-switch button[aria-pressed="true"] { color: #fff; background: var(--green); box-shadow: 0 2px 6px rgba(0, 107, 85, 0.22); }
.ranking-period-switch button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ranking h3 { margin-bottom: 3px; color: var(--ink-soft); font-size: 13px; }
.ranking-period-note { margin: 0 0 12px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.ranking-list { display: grid; gap: 8px; }

.rank-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 92px;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.rank-item > span:last-child { color: var(--ink-soft); text-align: right; font-size: 10px; font-variant-numeric: tabular-nums; }
.rank-no { display: grid; width: 24px; height: 24px; place-items: center; color: #fff; background: var(--ink-soft); border-radius: 7px; font-weight: 800; }
.rank-item strong { display: block; margin-bottom: 5px; overflow: hidden; color: var(--ink-soft); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.rank-line { height: 5px; }
.rank-line span { background: var(--blue); }
.rank-item.is-empty { opacity: 0.58; }
.rank-item.is-empty .rank-no { background: #8c9793; }

.trend-panel { margin-bottom: 14px; }
.trend-heading { align-items: flex-start; }

.trend-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trend-controls label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.trend-controls select {
  min-width: 190px;
  min-height: 36px;
  padding: 0 34px 0 11px;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  cursor: pointer;
}

.trend-controls select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.trend-granularity {
  display: inline-flex;
  padding: 3px;
  background: var(--surface-soft);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
}

.trend-granularity button {
  min-width: 34px;
  min-height: 28px;
  padding: 0 10px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.trend-granularity button:hover { color: var(--ink-soft); background: var(--surface); }

.trend-granularity button[aria-pressed="true"] {
  color: #fff;
  background: var(--green);
  box-shadow: 0 2px 6px rgba(0, 107, 85, 0.22);
}

.trend-granularity button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.range-badge,
.chart-unit {
  color: #77410d;
  background: var(--amber-soft);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.range-badge { padding: 7px 9px; white-space: nowrap; }

.trend-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 20px;
  background: var(--surface-soft);
  border-radius: 9px;
}

.trend-summary > div {
  min-width: 0;
  padding: 12px 14px;
}

.trend-summary > div + div { border-left: 1px solid var(--line); }
.trend-summary span, .trend-summary small { display: block; color: var(--muted); font-size: 10px; }

.trend-summary strong {
  display: inline-block;
  margin: 5px 5px 2px 0;
  color: var(--ink);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.trend-summary small { display: inline; }

.trend-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.chart-block { min-width: 0; }
.chart-block + .chart-block { padding-left: 22px; border-left: 1px solid var(--line); }

.chart-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.chart-heading h3 { margin-bottom: 3px; color: var(--ink); font-size: 14px; }
.chart-heading p { margin-bottom: 0; color: var(--muted); font-size: 10px; }
.chart-unit { flex: 0 0 auto; padding: 5px 8px; }

.chart-canvas {
  min-height: 260px;
  overflow: hidden;
}

.chart-canvas svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 260px;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}

.chart-empty {
  display: grid;
  min-height: 260px;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--muted);
  background: linear-gradient(180deg, rgba(229, 240, 238, 0.42), transparent);
  border: 1px dashed var(--line-strong);
  border-radius: 9px;
}

.chart-empty .icon { width: 22px; height: 22px; color: var(--blue); }
.chart-empty strong { color: var(--ink-soft); font-size: 13px; }
.chart-empty span { font-size: 10px; }

.chart-grid-line { stroke: var(--line); stroke-width: 1; }
.chart-axis-line { stroke: var(--line-strong); stroke-width: 1; }
.chart-axis-label { fill: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.chart-axis-label.axis-heat { fill: #b75f0b; font-weight: 700; }
.chart-axis-label.axis-cooling { fill: var(--purple); font-weight: 700; }
.chart-axis-label.axis-eer { fill: var(--green); font-weight: 700; }
.chart-bar { fill: var(--copper); transition: fill 160ms ease; }
.chart-bar:hover { fill: #c96c10; }
.chart-line { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart-point { fill: var(--surface); stroke: var(--blue); stroke-width: 2; }
.chart-point-latest { fill: var(--green); stroke: var(--surface); stroke-width: 3; }
.chart-focus-band { fill: var(--blue-soft); opacity: 0.58; }

.trend-note {
  margin: 13px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
}

.table-panel { padding-bottom: 10px; }
.table-heading { align-items: flex-start; }

.formula-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  color: #77410d;
  background: var(--amber-soft);
  border-radius: 8px;
  white-space: nowrap;
}

.dashboard-page[hidden] { display: none; }

.energy-process-panel { margin-bottom: 14px; }

.chart-legend {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 12px;
  color: var(--muted);
  font-size: 10px;
}

.chart-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.chart-legend i { display: block; width: 16px; height: 2px; border-radius: 2px; }
.chart-legend i.line-heat { background: var(--copper); }
.chart-legend i.line-cooling { background: var(--purple); }
.chart-legend i.line-supply { background: var(--green); }
.chart-legend i.line-return { background: var(--cyan); }

.energy-chart-line {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.energy-chart-latest { fill: var(--surface); stroke-width: 3; }
.energy-chart-line.line-heat, .energy-chart-latest.line-heat { stroke: var(--copper); }
.energy-chart-line.line-cooling, .energy-chart-latest.line-cooling { stroke: var(--purple); }
.energy-chart-line.line-supply, .energy-chart-latest.line-supply { stroke: var(--green); }
.energy-chart-line.line-return, .energy-chart-latest.line-return { stroke: var(--cyan); }

.energy-process-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.75fr) minmax(0, 3fr);
  gap: 14px;
  align-items: stretch;
}

.energy-meter-visual {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.energy-meter-image-frame {
  display: grid;
  min-height: 176px;
  place-items: center;
  padding: 10px 14px 4px;
}

.energy-meter-image-frame img {
  display: block;
  width: 100%;
  height: 176px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.energy-meter-visual figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.energy-meter-visual figcaption strong,
.energy-meter-visual figcaption span { display: block; }
.energy-meter-visual figcaption strong { margin-bottom: 3px; color: var(--ink); font-size: 12px; }
.energy-meter-visual figcaption span { color: var(--muted); font-size: 10px; }

.equipment-state {
  flex: 0 0 auto;
  padding: 5px 7px;
  color: #52645f;
  background: #e8efed;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.equipment-state.is-live { color: #006d36; background: #e2f5e9; }
.equipment-state.is-delayed { color: #8b4708; background: var(--amber-soft); }
.equipment-state.is-stale { color: #a12d2d; background: #fde9e7; }

.energy-data-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.energy-data-item {
  position: relative;
  min-width: 0;
  min-height: 108px;
  padding: 14px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-top: 3px solid var(--nav);
  border-radius: 9px;
}

.energy-data-icon {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--nav);
  background: var(--blue-soft);
  border-radius: 9px;
}

.energy-data-icon .icon { width: 17px; height: 17px; }
.energy-data-item > div { min-width: 0; }

.energy-data-item strong {
  font-size: 23px;
}

.energy-data-item.tone-heat, .energy-data-item.tone-difference { border-top-color: var(--copper); }
.energy-data-item.tone-heat .energy-data-icon,
.energy-data-item.tone-difference .energy-data-icon { color: var(--copper); background: var(--amber-soft); }
.energy-data-item.tone-cooling, .energy-data-item.tone-return { border-top-color: var(--purple); }
.energy-data-item.tone-cooling .energy-data-icon,
.energy-data-item.tone-return .energy-data-icon { color: var(--purple); background: var(--cyan-soft); }
.energy-data-item.tone-live-flow, .energy-data-item.tone-supply { border-top-color: var(--green); }
.energy-data-item.tone-live-flow .energy-data-icon,
.energy-data-item.tone-supply .energy-data-icon { color: var(--green); background: #e6f5ed; }

.device-facts {
  display: grid;
  grid-template-columns: 0.8fr 0.65fr 2fr 1fr;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
}

.device-facts > div { min-width: 0; padding: 15px 16px; }
.device-facts > div + div { border-left: 1px solid var(--line); }
.device-facts dt { margin-bottom: 7px; color: var(--muted); font-size: 11px; }
.device-facts dd { margin: 0; overflow-wrap: anywhere; color: var(--ink-soft); font-size: 13px; font-weight: 700; }

.analysis-filter-panel { margin-bottom: 14px; }

.analysis-filter-main {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.analysis-mode-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, auto);
  padding: 3px;
  background: #e8efed;
  border-radius: 9px;
}

.analysis-mode-button {
  min-height: 36px;
  padding: 0 16px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.analysis-mode-button.is-active {
  color: #fff;
  background: var(--nav);
  box-shadow: var(--shadow-sm);
  font-weight: 800;
}

.analysis-date-controls,
.analysis-range-fields,
.analysis-parameter-grid {
  display: flex;
  align-items: end;
  gap: 10px;
}

.analysis-range-fields[hidden], .analysis-field[hidden] { display: none; }
.analysis-date-separator { padding-bottom: 10px; color: var(--muted); font-size: 11px; }

.analysis-field { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 700; }

.analysis-field input {
  width: 154px;
  height: 38px;
  padding: 0 10px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.analysis-field input:focus { outline: 3px solid var(--focus); border-color: var(--nav); }

.analysis-primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 16px;
  color: #fff;
  background: var(--nav);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.analysis-primary-button:hover { background: var(--nav-soft); }
.analysis-primary-button .icon { width: 15px; height: 15px; }

.analysis-parameters {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}

.analysis-parameters summary { width: fit-content; color: var(--nav); cursor: pointer; font-size: 11px; font-weight: 800; }
.analysis-parameter-grid { flex-wrap: wrap; margin-top: 13px; }
.analysis-parameter-grid .analysis-field input { width: 176px; }

.analysis-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.analysis-kpi {
  position: relative;
  min-width: 0;
  min-height: 108px;
  padding: 14px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--nav);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
}

.analysis-kpi::after { display: none; }

.analysis-kpi > * { position: relative; z-index: 1; }
.analysis-kpi strong { font-size: 22px; }
.analysis-kpi-unit { margin-left: 6px; color: var(--muted); font-size: 10px; font-style: normal; font-weight: 700; }
.analysis-kpi-icon {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--nav);
  background: var(--blue-soft);
  border-radius: 9px;
}
.analysis-kpi-icon .icon { width: 17px; height: 17px; }
.analysis-kpi.tone-cooling, .analysis-kpi.tone-cop { border-top-color: var(--purple); }
.analysis-kpi.tone-cost, .analysis-kpi.tone-unit-cost { border-top-color: var(--copper); }
.analysis-kpi.tone-income { border-top-color: var(--green); }
.analysis-kpi.tone-cooling .analysis-kpi-icon,
.analysis-kpi.tone-cop .analysis-kpi-icon { color: var(--purple); background: var(--cyan-soft); }
.analysis-kpi.tone-cost .analysis-kpi-icon,
.analysis-kpi.tone-unit-cost .analysis-kpi-icon { color: var(--copper); background: var(--amber-soft); }
.analysis-kpi.tone-income .analysis-kpi-icon { color: var(--green); background: #e6f5ed; }

.analysis-coverage-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 13px 16px;
  color: var(--ink-soft);
  background: #e9f5f1;
  border: 1px solid #c9e1da;
  border-radius: 10px;
}

.analysis-coverage-icon { display: grid; flex: 0 0 auto; width: 34px; height: 34px; place-items: center; color: var(--green); background: #fff; border-radius: 50%; }
.analysis-coverage-icon .icon { width: 18px; height: 18px; }
.analysis-coverage-card strong { display: block; margin-bottom: 3px; font-size: 12px; }
.analysis-coverage-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }

.analysis-chart-panel { margin-bottom: 14px; }
.analysis-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.analysis-chart-block { min-width: 0; padding: 2px 18px 4px 0; }
.analysis-chart-block + .analysis-chart-block { padding: 2px 0 4px 18px; border-left: 1px solid var(--line); }
.chart-legend i.bar-electricity { height: 8px; background: var(--nav); }
.chart-legend i.bar-cooling { height: 8px; background: var(--purple); }
.chart-legend i.bar-cost { height: 8px; background: var(--copper); }
.chart-legend i.bar-revenue { height: 8px; background: var(--green); }
.analysis-chart-bar { rx: 3px; }
.analysis-chart-bar.bar-electricity { fill: var(--nav); }
.analysis-chart-bar.bar-cooling { fill: var(--purple); }
.analysis-chart-bar.bar-cost { fill: var(--copper); }
.analysis-chart-bar.bar-revenue { fill: var(--green); }

.analysis-detail-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 14px; margin-bottom: 14px; }
.analysis-insights { display: grid; gap: 9px; }
.analysis-insight {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  padding: 11px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 9px;
}
.analysis-insight b { display: grid; width: 30px; height: 30px; place-items: center; color: var(--nav); background: var(--blue-soft); border-radius: 8px; font-size: 11px; }
.analysis-insight strong { display: block; margin-bottom: 3px; font-size: 12px; }
.analysis-insight p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }

.benchmark-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.benchmark-grid > div { min-width: 0; padding: 12px; }
.benchmark-grid > div:nth-child(n + 4) { border-top: 1px solid var(--line); }
.benchmark-grid > div:not(:nth-child(3n + 1)) { border-left: 1px solid var(--line); }
.benchmark-grid span, .benchmark-grid small { display: block; color: var(--muted); font-size: 9px; }
.benchmark-grid strong { display: block; margin: 5px 0 3px; overflow: hidden; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.benchmark-source { margin: 10px 0 0; color: var(--muted); font-size: 9px; }

.analysis-table-panel { padding-bottom: 10px; }
.analysis-table { min-width: 1320px; }
.analysis-table td:first-child { color: var(--ink); font-weight: 800; }
.analysis-state { display: inline-flex; padding: 4px 7px; color: #7e4a16; background: var(--amber-soft); border-radius: 999px; font-size: 9px; font-weight: 800; }
.analysis-state.is-complete { color: #006d36; background: #e2f5e9; }
.analysis-state.is-missing { color: #7a706e; background: #ece9e8; }

.algorithm-page { max-width: 1760px; margin: 0 auto; }
.algorithm-topbar { align-items: flex-end; }
.algorithm-command-panel { padding: 0; overflow: hidden; }
.algorithm-model-identity {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  padding: 18px 20px;
  color: #eef8f5;
  background: var(--nav);
}
.algorithm-model-mark,
.algorithm-assistant-avatar {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: var(--copper);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
}
.algorithm-model-mark .icon,
.algorithm-assistant-avatar .icon { width: 25px; height: 25px; }
.algorithm-model-identity h2 { margin: 2px 0 5px; color: #fff; font-size: 24px; letter-spacing: -0.02em; }
.algorithm-model-identity p { max-width: 840px; margin: 0; color: #cfe1dd; font-size: 11px; line-height: 1.65; }
.algorithm-eyebrow { color: #90c7bc; font-size: 9px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.algorithm-connection-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  color: #f7dfc7;
  background: rgba(240, 133, 25, 0.13);
  border: 1px solid rgba(240, 133, 25, 0.38);
  border-radius: 7px;
  font-size: 10px;
  font-weight: 800;
}
.algorithm-connection-state i { width: 7px; height: 7px; background: var(--copper); border-radius: 50%; }
.algorithm-connection-state.is-online { color: #d9f3e3; background: rgba(0, 155, 76, 0.16); border-color: rgba(119, 220, 162, 0.42); }
.algorithm-connection-state.is-online i { background: #77dca2; }
.algorithm-connection-state.is-error { color: #ffd9d3; background: rgba(195, 70, 60, 0.17); border-color: rgba(255, 178, 166, 0.4); }
.algorithm-connection-state.is-error i { background: #ff9d8e; }
.algorithm-command-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr); }
.algorithm-command-copy,
.algorithm-config { min-width: 0; padding: 19px 20px 20px; }
.algorithm-config { background: var(--surface-soft); border-left: 1px solid var(--line); }
.algorithm-step-label { display: block; margin-bottom: 11px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: 0.1em; }
.algorithm-scenario-switch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.algorithm-scenario-switch button {
  min-height: 64px;
  padding: 10px 12px;
  color: var(--ink-soft);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.algorithm-scenario-switch button:hover { border-color: #91b5ae; }
.algorithm-scenario-switch button.is-active { color: var(--nav); background: var(--blue-soft); border-color: #75a69c; box-shadow: inset 0 0 0 1px #75a69c; }
.algorithm-scenario-switch strong,
.algorithm-scenario-switch small { display: block; }
.algorithm-scenario-switch strong { margin-bottom: 5px; font-size: 12px; }
.algorithm-scenario-switch small { color: var(--muted); font-size: 9px; }
.algorithm-scenario-copy { margin: 12px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.algorithm-config-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.algorithm-config-fields label > span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 9px; font-weight: 700; }
.algorithm-config-fields select {
  width: 100%;
  min-height: 40px;
  padding: 0 32px 0 10px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--control-radius);
  cursor: pointer;
}
.algorithm-config-fields select:focus-visible,
.algorithm-assistant-form input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--nav); }
.algorithm-run-button {
  display: inline-flex;
  min-height: 42px;
  margin-top: 12px;
  padding: 0 15px;
  align-items: center;
  gap: 8px;
  color: #fff;
  background: var(--nav);
  border: 1px solid var(--nav);
  border-radius: var(--control-radius);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}
.algorithm-run-button:hover { background: var(--nav-soft); border-color: var(--nav-soft); }
.algorithm-run-button:disabled { cursor: not-allowed; opacity: 0.68; }
.algorithm-run-button.is-running:disabled { cursor: wait; }
.algorithm-run-button .icon { width: 15px; height: 15px; }
.algorithm-run-button.is-running .icon { animation: spin 700ms linear infinite; }
.algorithm-run-note { margin: 8px 0 0; color: var(--muted); font-size: 9px; line-height: 1.5; }

.algorithm-timeline-panel { margin-top: 14px; }
.algorithm-preview-tag { flex: 0 0 auto; padding: 6px 9px; color: #6b5c8f; background: var(--cyan-soft); border-radius: 7px; font-size: 9px; font-weight: 800; }
.algorithm-timeline-wrap { overflow-x: auto; padding-bottom: 4px; }
.algorithm-timeline { min-width: 900px; }
.algorithm-time-row,
.algorithm-track { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; align-items: center; }
.algorithm-time-row { margin-bottom: 4px; }
.algorithm-time-row > div { display: grid; grid-template-columns: repeat(13, 1fr); color: var(--muted); font-size: 8px; font-weight: 700; }
.algorithm-time-row b { transform: translateX(-2px); }
.algorithm-time-row b:last-child { justify-self: end; transform: none; }
.algorithm-track { min-height: 48px; border-top: 1px solid #ece9e8; }
.algorithm-track:last-child { border-bottom: 1px solid #ece9e8; }
.algorithm-track-label b,
.algorithm-track-label small { display: block; }
.algorithm-track-label b { color: var(--ink-soft); font-size: 11px; }
.algorithm-track-label small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.algorithm-segment-grid,
.algorithm-load-track { display: grid; grid-template-columns: repeat(12, minmax(34px, 1fr)); align-items: center; gap: 3px; min-height: 30px; }
.algorithm-segment-grid i {
  display: grid;
  min-height: 27px;
  padding: 0 8px;
  place-items: center;
  overflow: hidden;
  color: var(--ink-soft);
  background: #edf1f0;
  border-radius: 5px;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}
.algorithm-price-track .is-valley { color: #61557f; background: var(--cyan-soft); }
.algorithm-price-track .is-flat { color: #006d36; background: #e5f4eb; }
.algorithm-price-track .is-peak { color: #9a500c; background: var(--copper-soft); }
.algorithm-action-track .is-charge { color: #61557f; background: #e9e5f5; }
.algorithm-action-track .is-hold { color: #5e6c68; background: #edf1f0; }
.algorithm-action-track .is-discharge { color: #006d36; background: #dff1e7; }
.algorithm-unit-track i { justify-items: start; color: #52645f; background: #edf2f1; }
.algorithm-unit-track .is-emphasis { color: #8b4708; background: #fff0e2; }
.algorithm-load-track { align-items: end; height: 38px; padding: 4px 0; border-bottom: 1px solid #b9ccc8; }
.algorithm-load-track i { height: var(--level); min-height: 4px; background: var(--nav); border-radius: 3px 3px 0 0; opacity: 0.82; }
.algorithm-output-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 16px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.algorithm-output-grid > div { min-width: 0; padding: 13px; }
.algorithm-output-grid > div + div { border-left: 1px solid var(--line); }
.algorithm-output-grid span,
.algorithm-output-grid small { display: block; color: var(--muted); font-size: 9px; }
.algorithm-output-grid strong { display: block; margin: 6px 0 4px; font-size: 16px; }

.algorithm-lower-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr); gap: 14px; margin-top: 14px; }
.algorithm-recommendations { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.algorithm-recommendations li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.algorithm-recommendations li:first-child { padding-top: 0; border-top: 0; }
.algorithm-recommendations li > span { display: grid; width: 28px; height: 28px; place-items: center; color: var(--nav); background: var(--blue-soft); border-radius: 7px; font-size: 10px; font-weight: 800; }
.algorithm-recommendations strong { display: block; margin: 1px 0 4px; font-size: 11px; }
.algorithm-recommendations p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.algorithm-recommendations li > small { padding: 4px 6px; color: #7b5b35; background: var(--copper-soft); border-radius: 5px; font-size: 8px; font-weight: 800; }
.algorithm-readiness-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.algorithm-readiness-list li { display: flex; min-height: 39px; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); }
.algorithm-readiness-list li:first-child { border-top: 0; }
.algorithm-readiness-list li > span { display: flex; min-width: 0; align-items: center; gap: 8px; }
.algorithm-readiness-list i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; }
.algorithm-readiness-list i.is-ready { background: var(--green); }
.algorithm-readiness-list i.is-waiting { background: var(--copper); }
.algorithm-readiness-list b { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.algorithm-readiness-list small { flex: 0 0 auto; color: var(--muted); font-size: 9px; }
.algorithm-run-status { margin: 12px 0 0; padding: 9px 10px; color: #5c5654; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 7px; font-size: 9px; line-height: 1.55; }
.algorithm-run-status.is-warning { color: #8b4708; background: var(--copper-soft); border-color: #f1c28e; }

.algorithm-assistant-panel { margin-top: 14px; }
.algorithm-assistant-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 13px; }
.algorithm-assistant-avatar { width: 44px; height: 44px; color: var(--nav); background: var(--blue-soft); border-color: #b9d1cc; }
.algorithm-assistant-avatar .icon { width: 22px; height: 22px; }
.algorithm-assistant-head span { color: var(--muted); font-size: 9px; }
.algorithm-assistant-head h2 { margin: 3px 0 0; font-size: 15px; }
.algorithm-assistant-head .algorithm-assistant-state { padding: 5px 8px; color: #61557f; background: var(--cyan-soft); border-radius: 6px; font-weight: 800; }
.algorithm-assistant-head .algorithm-assistant-state.is-online { color: #006d36; background: #e2f5e9; }
.algorithm-assistant-head .algorithm-assistant-state.is-error { color: #a12d2d; background: #fde9e7; }
.algorithm-conversation { display: grid; gap: 8px; max-height: 260px; overflow-y: auto; padding: 12px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 9px; }
.algorithm-message { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 9px; width: min(760px, 92%); }
.algorithm-message > span { display: grid; width: 26px; height: 26px; place-items: center; color: #fff; background: var(--nav); border-radius: 6px; font-size: 8px; font-weight: 800; }
.algorithm-message p { margin: 0; padding: 9px 11px; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 7px; font-size: 10px; line-height: 1.65; white-space: pre-wrap; }
.algorithm-message.is-user { grid-template-columns: minmax(0, 1fr) 26px; justify-self: end; }
.algorithm-message.is-user > span { grid-column: 2; grid-row: 1; color: var(--nav); background: var(--blue-soft); }
.algorithm-message.is-user p { grid-column: 1; grid-row: 1; color: #fff; background: var(--nav-soft); border-color: var(--nav-soft); }
.algorithm-assistant-form { margin-top: 11px; }
.algorithm-assistant-form > label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 9px; font-weight: 700; }
.algorithm-assistant-form > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.algorithm-assistant-form input { min-width: 0; min-height: 44px; padding: 0 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--control-radius); }
.algorithm-assistant-form button { display: inline-flex; min-height: 44px; padding: 0 15px; align-items: center; gap: 8px; color: #fff; background: var(--nav); border: 1px solid var(--nav); border-radius: var(--control-radius); cursor: pointer; font-size: 10px; font-weight: 800; }
.algorithm-assistant-form button:hover { background: var(--nav-soft); }
.algorithm-assistant-form button:disabled { cursor: not-allowed; opacity: 0.62; }
.algorithm-assistant-form input:disabled { color: var(--muted); background: #f0f2f1; cursor: not-allowed; }
.algorithm-assistant-form button .icon { width: 14px; height: 14px; transform: rotate(180deg); }
.algorithm-assistant-form > small { display: block; margin-top: 7px; color: var(--muted); font-size: 8px; }

.quality-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.quality-kpi {
  min-width: 0;
  padding: 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--nav);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
}

.quality-kpi:nth-child(3), .quality-kpi:nth-child(4) { border-top-color: var(--copper); }
.quality-kpi:nth-child(5) { border-top-color: var(--purple); }
.quality-kpi span, .quality-kpi small { display: block; color: var(--muted); font-size: 10px; }
.quality-kpi strong { display: block; margin: 7px 0 5px; overflow: hidden; font-size: 22px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }

.quality-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr); gap: 14px; margin-bottom: 14px; }
.quality-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.quality-facts div { min-width: 0; padding: 12px; }
.quality-facts div:not(:nth-child(4n + 1)) { border-left: 1px solid var(--line); }
.quality-facts div:nth-child(n + 5) { border-top: 1px solid var(--line); }
.quality-facts dt { margin-bottom: 5px; color: var(--muted); font-size: 10px; }
.quality-facts dd { margin: 0; overflow: hidden; color: var(--ink); font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.quality-notice { margin: 12px 0 0; padding: 10px 12px; color: var(--muted); background: var(--surface-soft); border-left: 3px solid var(--copper); border-radius: 6px; font-size: 10px; line-height: 1.6; }
.quality-flag-list { display: grid; gap: 11px; }
.quality-flag-item > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.quality-flag-item strong { font-size: 11px; }
.quality-flag-item span { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.quality-flag-bar { height: 5px; overflow: hidden; background: #edf1ef; border-radius: 999px; }
.quality-flag-bar span { display: block; height: 100%; background: var(--copper); border-radius: inherit; }
.quality-event-panel { padding-bottom: 10px; }
.quality-table { min-width: 980px; }
.quality-table td:nth-child(2) strong, .quality-table td:nth-child(2) small { display: block; }
.quality-table td:nth-child(2) small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.quality-tags { display: flex; flex-wrap: wrap; gap: 5px; max-width: 330px; }
.quality-tags span { padding: 3px 6px; color: #8b4708; background: var(--amber-soft); border-radius: 999px; font-size: 9px; font-weight: 800; }
.quality-severity { display: inline-flex; padding: 4px 7px; border-radius: 999px; font-size: 9px; font-weight: 800; }
.quality-severity.is-warning { color: #8b4708; background: var(--amber-soft); }
.quality-severity.is-invalid { color: #a12d2d; background: #fde9e7; }
.quality-event-id { display: block; max-width: 220px; overflow: hidden; color: var(--muted); font-family: Consolas, "Courier New", monospace; font-size: 10px; text-overflow: ellipsis; }

.formula-hint .icon { width: 14px; height: 14px; }
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 9px; }
table { width: 100%; min-width: 1280px; border-collapse: collapse; background: var(--surface); }
th, td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--line); font-size: 12px; white-space: nowrap; }
th { color: #536279; background: #f0f4f8; font-size: 11px; font-weight: 800; }
tbody tr:hover { background: #f8fafc; }
tbody tr:last-child td { border-bottom: 0; }
td { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.table-device { display: flex; align-items: center; gap: 9px; }
.table-device .meter-type-icon { width: 42px; height: 34px; }
.table-device strong { display: block; color: var(--ink); font-size: 12px; }
.table-device small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }

.device-id {
  max-width: 315px;
  overflow: hidden;
  color: var(--muted);
  font-family: Consolas, "Courier New", monospace;
  font-size: 11px;
  text-overflow: ellipsis;
}

.ratio-chip { display: inline-flex; min-width: 46px; justify-content: center; padding: 4px 7px; font-size: 10px; }
.actual-value { color: var(--ink); font-weight: 800; }
.status-ok { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-weight: 800; }
.status-ok .icon { width: 14px; height: 14px; }
.status-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; }
.status-pill::before { width: 7px; height: 7px; content: ""; background: currentColor; border-radius: 50%; }
.status-pill.status-live { color: var(--green); }
.status-pill.status-delayed { color: #bd6813; }
.status-pill.status-stale { color: #a4473e; }
.status-pill.status-waiting { color: #71817d; }
.empty-state { display: grid; min-height: 92px; place-items: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 8px; font-size: 11px; }
.empty-state.compact { min-height: 84px; }
.ghost-button.is-refreshing .icon { animation: spin 520ms ease-out; }

.home-page { max-width: 1760px; margin: 0 auto; }
.home-topbar { align-items: flex-end; }
.home-topbar .topbar-status { flex-wrap: wrap; justify-content: flex-end; }
.home-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.home-kpi-card {
  min-width: 0;
  min-height: 108px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: var(--shadow-sm);
}
.home-kpi-card > div { min-width: 0; }
.home-kpi-card strong {
  font-size: 24px;
}
.home-system-panel { margin-bottom: 14px; }
.home-reserved-badge {
  padding: 6px 10px;
  color: var(--nav);
  background: var(--blue-soft);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.home-system-placeholder {
  display: grid;
  min-height: 330px;
  place-content: center;
  justify-items: center;
  color: #8ca39e;
  background:
    linear-gradient(90deg, rgba(0, 85, 75, 0.03) 1px, transparent 1px),
    linear-gradient(180deg, rgba(0, 85, 75, 0.03) 1px, transparent 1px),
    #fbfcfc;
  background-size: 42px 42px;
  border: 1px dashed #b8cbc7;
  border-radius: 9px;
  text-align: center;
}
.home-system-placeholder .icon { width: 38px; height: 38px; margin-bottom: 12px; color: #7fa29b; }
.home-system-placeholder strong { color: #55736d; font-size: 16px; }
.home-system-placeholder span { margin-top: 7px; font-size: 11px; }
.home-system-stage {
  position: relative;
  height: min(48vw, 540px);
  min-height: 420px;
  overflow: hidden;
  background: #f5f7f3;
  border: 1px solid #dce3df;
  border-radius: 9px;
}
.home-system-stage plant-twin-3d { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-system-stage canvas { display: block; width: 100%; height: 100%; }
.twin-view-switch { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.twin-view-switch button {
  min-height: 32px;
  padding: 0 11px;
  color: var(--ink-soft);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
.twin-view-switch button:hover { color: var(--nav); border-color: #9bbab3; }
.twin-view-switch button[aria-pressed="true"] { color: #fff; background: var(--nav); border-color: var(--nav); }
.twin-view-state { margin-left: 5px; padding: 1px 5px; color: #5f6f75; background: #e3e9e8; border-radius: 999px; font-size: 9px; font-weight: 800; }
.twin-view-switch button[aria-pressed="true"] .twin-view-state { color: #eef4f2; background: rgba(255, 255, 255, 0.18); }
.twin-status,
.twin-season-state,
.twin-legend,
.twin-hint {
  position: absolute;
  z-index: 2;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(214, 222, 218, 0.94);
  box-shadow: 0 2px 7px rgba(51, 44, 43, 0.07);
  backdrop-filter: blur(7px);
  pointer-events: none;
}
.twin-status { top: 12px; left: 12px; display: flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.twin-status .status-dot { width: 7px; height: 7px; }
.twin-season-state { top: 12px; right: 12px; display: flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; color: #5f6f75; font-size: 10px; font-weight: 800; }
.season-state-dot { width: 7px; height: 7px; border-radius: 50%; background: #8b9a9f; box-shadow: 0 0 0 3px rgba(139, 154, 159, 0.14); }
.twin-legend { bottom: 12px; left: 12px; display: grid; gap: 5px; padding: 8px 11px; border-radius: 8px; font-size: 9px; }
.twin-legend span { display: flex; align-items: center; gap: 5px; }
.twin-legend i { width: 14px; height: 4px; margin-left: 3px; border-radius: 999px; }
.twin-legend i:first-child { margin-left: 0; }
.twin-legend .is-chilled-supply { background: #1f6fb8; }
.twin-legend .is-chilled-return { background: #6fb1e0; }
.twin-legend .is-cooling-supply { background: #2e8b62; }
.twin-legend .is-cooling-return { background: #8fbf6a; }
.twin-legend .is-hp-inactive { background: repeating-linear-gradient(90deg, #71818a 0 5px, #c5cfd2 5px 8px); }
.twin-hint { right: 12px; bottom: 12px; padding: 6px 10px; border-radius: 999px; color: var(--muted); font-size: 9px; }
.home-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.home-chart-panel { min-width: 0; }
.home-wide-panel { grid-column: 1 / -1; }
.home-panel-stat {
  flex: 0 0 auto;
  padding: 6px 9px;
  color: var(--nav);
  background: var(--blue-soft);
  border-radius: 7px;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.home-chart-canvas { min-height: 250px; }
.home-chart-canvas svg { display: block; width: 100%; height: 250px; }
.energy-chart-line.line-load, .energy-chart-latest.line-load { stroke: var(--nav); }
.energy-chart-line.line-carbon, .energy-chart-latest.line-carbon { stroke: var(--green); }
.home-chart-legend { display: flex; justify-content: center; gap: 22px; margin-top: 4px; color: var(--muted); font-size: 10px; }
.home-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.home-chart-legend i { width: 14px; height: 7px; border-radius: 2px; }
.home-chart-legend i.is-electricity { background: var(--nav); }
.home-chart-legend i.is-cooling { background: var(--purple); }
.home-chart-legend i.is-eer {
  position: relative;
  height: 2px;
  background: var(--green);
  border-radius: 999px;
}
.home-chart-legend i.is-eer::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  content: "";
  background: var(--surface);
  border: 2px solid var(--green);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.efficiency-eer-line {
  fill: none;
  stroke: var(--green);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.efficiency-eer-point {
  fill: var(--surface);
  stroke: var(--green);
  stroke-width: 2.5;
}
.home-tou-chart { display: grid; gap: 14px; min-height: 250px; align-content: center; }
.home-tou-total { display: flex; align-items: baseline; justify-content: space-between; color: var(--muted); font-size: 11px; }
.home-tou-total strong { color: var(--ink); font-size: 28px; font-variant-numeric: tabular-nums; }
.home-tou-stack { display: flex; height: 24px; overflow: hidden; background: #edf1f0; border-radius: 6px; }
.home-tou-stack span { min-width: 2px; }
.home-tou-stack .is-peak { background: var(--copper); }
.home-tou-stack .is-flat { background: var(--green); }
.home-tou-stack .is-valley { background: var(--purple); }
.home-tou-rows { display: grid; gap: 9px; }
.home-tou-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 11px; }
.home-tou-row i { width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; }
.home-tou-row span { display: flex; align-items: center; color: var(--muted); }
.home-tou-row b { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.home-tou-opportunity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  color: var(--muted);
  font-size: 11px;
  background: #f5f8f7;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.home-tou-opportunity strong { color: var(--green-dark); font-variant-numeric: tabular-nums; }
.home-mini-bar { height: 7px; overflow: hidden; background: #e8eeec; border-radius: 999px; }
.home-mini-bar em { display: block; height: 100%; border-radius: inherit; }
.home-equipment-chart { display: grid; gap: 13px; min-height: 250px; align-content: center; }
.home-equipment-row { display: grid; grid-template-columns: 82px minmax(0, 1fr) 92px; align-items: center; gap: 11px; font-size: 11px; }
.home-equipment-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-equipment-row strong { text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; }
.home-equipment-row .home-mini-bar em { background: linear-gradient(90deg, var(--nav), #2b8b7d); }
.home-heatmap-key { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; }
.home-heatmap-key i { width: 24px; height: 8px; background: linear-gradient(90deg, #edf3f1, var(--nav)); border-radius: 3px; }
.home-heatmap { min-width: 620px; overflow-x: auto; }
.home-heatmap-row { display: grid; grid-template-columns: 108px repeat(7, minmax(64px, 1fr)); gap: 5px; margin-bottom: 5px; }
.home-heatmap-row > * { min-height: 30px; }
.home-heatmap-label { display: flex; align-items: center; overflow: hidden; color: var(--ink-soft); font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.home-heatmap-date { display: grid; place-items: center; color: var(--muted); font-size: 10px; }
.home-heatmap-cell { display: grid; place-items: center; color: #31544e; background: #edf3f1; border-radius: 5px; font-size: 9px; font-variant-numeric: tabular-nums; }
.home-heatmap-cell.is-missing { color: #909b99; background: #f1f2f2; }
.home-heatmap-cell.is-collecting { color: #9a5d20; background: #fff2e5; }
.home-quality-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-height: 250px; align-content: center; }
.home-quality-item { padding: 14px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 8px; }
.home-quality-item span { display: block; color: var(--muted); font-size: 10px; }
.home-quality-item strong { display: block; margin-top: 7px; font-size: 18px; font-variant-numeric: tabular-nums; }
.home-carbon-empty { display: grid; min-height: 250px; place-content: center; justify-items: center; color: var(--muted); text-align: center; }
.home-carbon-empty .icon { width: 30px; height: 30px; margin-bottom: 10px; color: var(--green); }
.home-carbon-empty strong { color: var(--ink-soft); font-size: 14px; }
.home-carbon-empty span { max-width: 320px; margin-top: 6px; font-size: 10px; line-height: 1.6; }

@keyframes pulse {
  70% { box-shadow: 0 0 0 7px rgba(73, 183, 127, 0); }
  100% { box-shadow: 0 0 0 0 rgba(73, 183, 127, 0); }
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 961px) {
  .app-shell.sidebar-collapsed { grid-template-columns: var(--shell-sidebar-compact-width) minmax(0, 1fr); }
  .app-shell.sidebar-collapsed .sidebar { gap: 18px; padding-inline: 14px; }
  .app-shell.sidebar-collapsed .sidebar-toggle { margin-inline: auto; }
  .app-shell.sidebar-collapsed .sidebar-toggle .icon { transform: rotate(180deg); }
  .app-shell.sidebar-collapsed .brand { display: none; }
  .app-shell.sidebar-collapsed .brand-site { display: none; }
  .app-shell.sidebar-collapsed .nav-item {
    justify-content: center;
    gap: 0;
    width: 46px;
    padding: 0;
  }
  .app-shell.sidebar-collapsed .nav-item span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .app-shell.sidebar-collapsed .nav-item .icon { width: 20px; height: 20px; }
  .app-shell.sidebar-collapsed .session-card {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 8px;
    padding: 10px 6px;
  }
  .app-shell.sidebar-collapsed .session-card > div { display: none; }
  .app-shell.sidebar-collapsed .session-card button { color: #d4e5e1; }
  .app-shell.sidebar-collapsed .gateway-card { display: none; }
}

@media (min-width: 961px) and (max-height: 780px) {
  .login-layout {
    padding: 24px 0;
  }
  .login-brand-panel {
    width: 230px;
    min-height: 68px;
    margin-bottom: 24px;
  }
  .login-kicker { margin-bottom: 14px; }
  .login-story h1 {
    margin-bottom: 14px;
    font-size: clamp(42px, 4.2vw, 58px);
    line-height: 1.1;
  }
  .login-story > p {
    margin-bottom: 18px;
    line-height: 1.65;
  }
  .login-energy-map { height: 120px; }
  .login-station-facts { margin-top: 16px; }
  .login-panel { padding: 26px 30px 20px; }
  .login-panel-meta,
  .login-role-switch { margin-bottom: 18px; }
  .login-form { gap: 13px; }
  .login-permission-note { margin-top: 16px; }
  .login-panel footer {
    margin-top: 16px;
    padding-top: 14px;
  }
}

@media (max-width: 1380px) {
  .platform-brand { gap: 10px; }
  .platform-brand img { height: 34px; }
  .platform-brand strong { font-size: 18px; }
  .platform-meta { right: 20px; }
  .content-grid { grid-template-columns: 1fr; }
  .analysis-panel { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .analysis-panel > .panel-heading { grid-column: 1 / -1; }
  .energy-process-layout { grid-template-columns: 190px minmax(0, 1fr); }
  .energy-data-item { padding: 12px; }
  .energy-data-item strong { font-size: 19px; }
  .analysis-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .algorithm-output-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .algorithm-output-grid > div:nth-child(3) { border-left: 0; }
  .algorithm-output-grid > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .quality-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quality-layout { grid-template-columns: 1fr; }
  .home-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1280px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 208px minmax(0, 1fr); }
  .dashboard { padding-inline: 20px; }
  .platform-header { margin-inline: -20px; padding-inline: 20px; }
  .platform-brand strong { font-size: 16px; }
  .platform-meta .status-strip > span:not(.pulse) { display: none; }
  .meter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trend-heading { display: grid; }
  .trend-controls { flex-wrap: wrap; }
  .trend-grid { grid-template-columns: 1fr; }
  .chart-block + .chart-block { padding: 20px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .energy-process-layout { grid-template-columns: 1fr; }
  .energy-meter-visual { grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: 1fr; }
  .energy-meter-image-frame { min-height: 150px; }
  .energy-meter-image-frame img { height: 150px; }
  .energy-meter-visual figcaption { border-top: 0; border-left: 1px solid var(--line); }
  .device-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .device-facts > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .device-facts > div:nth-child(4) { border-top: 1px solid var(--line); }
  .analysis-filter-main { align-items: stretch; flex-direction: column; }
  .analysis-date-controls { flex-wrap: wrap; }
  .analysis-chart-grid, .analysis-detail-grid { grid-template-columns: 1fr; }
  .analysis-chart-block + .analysis-chart-block { padding: 20px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .algorithm-command-grid,
  .algorithm-lower-grid { grid-template-columns: 1fr; }
  .algorithm-config { border-top: 1px solid var(--line); border-left: 0; }
  .quality-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quality-facts div:not(:nth-child(4n + 1)) { border-left: 0; }
  .quality-facts div:nth-child(even) { border-left: 1px solid var(--line); }
  .quality-facts div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .home-chart-grid { grid-template-columns: 1fr; }
  .home-wide-panel { grid-column: auto; }
  .home-system-stage { height: 440px; min-height: 380px; }
  .home-system-panel .panel-heading { align-items: flex-start; flex-direction: column; }
  .twin-view-switch { justify-content: flex-start; }
}

@media (max-width: 960px) {
  .app-shell,
  .app-shell.sidebar-collapsed { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed;
    z-index: var(--z-drawer);
    width: min(280px, 84vw);
    max-width: calc(100vw - 32px);
    padding: 22px 20px;
    pointer-events: none;
    transform: translateX(-102%);
    transition: transform var(--motion-fast) var(--ease-out);
  }
  .app-shell.sidebar-mobile-open .sidebar { pointer-events: auto; transform: translateX(0); }
  .app-shell.sidebar-mobile-open .sidebar-backdrop { display: block; }
  .sidebar-toggle { display: none; }
  .mobile-menu-toggle { display: grid; }
  .session-card { grid-template-columns: 34px minmax(0, 1fr) var(--touch-target); }
  .session-card button { width: var(--touch-target); height: var(--touch-target); }
  .dashboard { padding-inline: 20px; }
  .platform-header {
    grid-template-rows: auto auto;
    row-gap: 8px;
    min-height: 104px;
    margin-inline: -20px;
    padding: 10px 20px;
  }
  .platform-brand { grid-row: 1; }
  .mobile-menu-toggle { grid-row: 1; }
  .platform-meta {
    position: static;
    grid-row: 2;
    grid-column: 1 / 4;
    justify-self: end;
    transform: none;
  }
  .topbar,
  .topbar-compact,
  .home-topbar {
    align-items: flex-start;
    flex-direction: column;
  }
  .topbar-status,
  .home-topbar .topbar-status {
    width: 100%;
    justify-content: flex-start;
  }
  .login-layout {
    grid-template-columns: 1fr;
    gap: 34px;
    width: min(620px, calc(100% - 44px));
    padding: 36px 0;
  }
  .login-brand-panel { width: 238px; min-height: 70px; margin-bottom: 38px; }
  .login-story h1 { font-size: clamp(42px, 9vw, 58px); }
  .login-story > p { margin-bottom: 22px; }
  .login-energy-map { height: 130px; }
  .login-panel { width: 100%; }
  .algorithm-topbar { align-items: flex-start; }
}

@media (max-width: 620px) {
  .dashboard { padding-inline: 14px; }
  .platform-header {
    grid-template-columns: var(--touch-target) minmax(0, 1fr) var(--touch-target);
    min-height: 56px;
    margin-inline: -14px;
    padding-inline: 14px;
  }
  .platform-brand { gap: 8px; }
  .platform-brand img { height: 30px; padding: 2px 5px; border-radius: 5px; }
  .platform-brand strong {
    font-size: 13px;
    line-height: 1.25;
    text-align: left;
    text-overflow: clip;
    white-space: normal;
  }
  .platform-meta { gap: 6px; }
  .platform-meta .weather-strip,
  .platform-meta .status-strip { min-height: 34px; padding: 4px 8px; }
  .platform-meta .status-strip > span:not(.pulse) { display: none; }
  .topbar-status { gap: 8px; }
  .weather-strip,
  .status-strip { max-width: 100%; }
  .login-layout { width: min(100% - 28px, 480px); gap: 26px; padding: 22px 0; }
  .login-brand-panel { width: 210px; min-height: 62px; margin-bottom: 30px; }
  .login-kicker { font-size: 9px; letter-spacing: 0.14em; }
  .login-story h1 { margin-bottom: 16px; font-size: 38px; letter-spacing: -0.04em; }
  .login-story > p { font-size: 13px; line-height: 1.7; }
  .login-energy-map { display: none; }
  .login-station-facts { margin-top: 0; }
  .login-station-facts div { padding-right: 10px; }
  .login-station-facts div + div { padding-left: 10px; }
  .login-station-facts strong { font-size: 10px; }
  .login-panel { padding: 27px 22px 20px; border-radius: 17px; }
  .login-panel h2 { font-size: 22px; }
  .login-role-button { gap: 7px; padding: 10px 8px; }
  .login-role-button .icon { width: 17px; height: 17px; }
  .login-role-button small { display: none; }
  .algorithm-model-identity { grid-template-columns: 44px minmax(0, 1fr); padding: 16px; }
  .algorithm-model-mark { width: 44px; height: 44px; }
  .algorithm-model-identity h2 { font-size: 19px; }
  .algorithm-connection-state { grid-column: 1 / -1; justify-self: start; }
  .algorithm-command-copy,
  .algorithm-config { padding: 16px; }
  .algorithm-scenario-switch,
  .algorithm-config-fields { grid-template-columns: 1fr; }
  .algorithm-scenario-switch button { min-height: 56px; }
  .algorithm-output-grid { grid-template-columns: 1fr; }
  .algorithm-output-grid > div + div { border-top: 1px solid var(--line); border-left: 0; }
  .algorithm-recommendations li { grid-template-columns: 28px minmax(0, 1fr); }
  .algorithm-recommendations li > small { grid-column: 2; justify-self: start; }
  .algorithm-readiness-list li { align-items: flex-start; flex-direction: column; gap: 4px; padding: 9px 0; }
  .algorithm-assistant-head { grid-template-columns: 40px minmax(0, 1fr); }
  .algorithm-assistant-avatar { width: 40px; height: 40px; }
  .algorithm-assistant-head .algorithm-assistant-state { grid-column: 2; justify-self: start; }
  .algorithm-assistant-form button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .algorithm-assistant-form button { width: 44px; padding: 0; justify-content: center; }
}

.global-assistant {
  position: fixed;
  z-index: var(--z-assistant);
  inset: 0;
  pointer-events: none;
}

.assistant-launcher {
  position: absolute;
  right: 24px;
  bottom: 24px;
  display: grid;
  width: 104px;
  min-height: 112px;
  padding: 6px 8px 8px;
  place-items: center;
  color: var(--nav);
  background: var(--surface);
  border: 0;
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 63, 56, 0.22);
  cursor: pointer;
  pointer-events: auto;
  transition: box-shadow var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}
.assistant-launcher:hover { box-shadow: 0 8px 14px rgba(0, 63, 56, 0.28); transform: translateY(-2px); }
.assistant-launcher img { width: 70px; height: 74px; object-fit: contain; }
.assistant-launcher > span { display: grid; gap: 1px; text-align: center; }
.assistant-launcher strong { font-size: 11px; }
.assistant-launcher small { color: var(--muted); font-size: 9px; font-weight: 700; }
.assistant-launcher.is-online small { color: #00783c; }
.assistant-launcher.is-error small { color: #a12d2d; }
.assistant-launcher[hidden],
.assistant-icon-button[hidden],
.assistant-composer-actions button[hidden] { display: none; }

.assistant-panel {
  position: absolute;
  z-index: var(--z-assistant-panel);
  right: 24px;
  bottom: 24px;
  display: flex;
  width: min(410px, calc(100vw - 48px));
  max-height: min(710px, calc(100dvh - 48px));
  overflow: hidden;
  flex-direction: column;
  color: var(--ink);
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0, 63, 56, 0.24);
  pointer-events: auto;
  animation: assistant-panel-in var(--motion-fast) var(--ease-out);
}
.assistant-panel[hidden] { display: none; }
@keyframes assistant-panel-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.assistant-panel-header {
  display: flex;
  min-height: 72px;
  padding: 10px 12px 10px 14px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #fff;
  background: var(--nav);
}
.assistant-identity { display: flex; min-width: 0; align-items: center; gap: 10px; }
.assistant-mini-avatar { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; overflow: hidden; background: #fff; border-radius: 10px; }
.assistant-mini-avatar img { width: 43px; height: 46px; object-fit: contain; }
.assistant-identity h2 { margin: 0; color: #fff; font-size: 15px; letter-spacing: -0.01em; }
.assistant-identity p { display: flex; margin: 4px 0 0; align-items: center; gap: 6px; color: #d5e8e4; font-size: 10px; }
.assistant-identity p i { width: 8px; height: 8px; flex: 0 0 auto; background: #f4b56f; border-radius: 50%; }
.assistant-identity p i.is-online { background: #78dda3; }
.assistant-identity p i.is-error { background: #ff9d8e; }
.assistant-header-actions { display: flex; flex: 0 0 auto; gap: 4px; }
.assistant-icon-button {
  display: grid;
  width: var(--touch-target);
  height: var(--touch-target);
  padding: 0;
  place-items: center;
  color: #e7f3f0;
  background: transparent;
  border: 0;
  border-radius: var(--control-radius);
  cursor: pointer;
}
.assistant-icon-button:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.assistant-icon-button:disabled { cursor: not-allowed; opacity: 0.5; }
.assistant-icon-button .icon { width: 18px; height: 18px; }

.assistant-notice,
.assistant-permission-notice,
.assistant-privacy-note { margin: 0; font-size: 10px; line-height: 1.55; }
.assistant-notice { min-height: 34px; padding: 9px 14px; color: var(--muted); background: var(--surface-soft); border-bottom: 1px solid var(--line); }
.assistant-notice.is-warning { color: #8b4708; background: var(--copper-soft); }
.assistant-notice.is-error { color: #a12d2d; background: #fde9e7; }

.assistant-conversation {
  display: flex;
  min-height: 160px;
  overflow-y: auto;
  padding: 14px;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  background: var(--canvas);
  overscroll-behavior: contain;
}
.assistant-message { display: flex; width: min(92%, 330px); align-items: flex-start; gap: 8px; }
.assistant-message.is-user { align-self: flex-end; justify-content: flex-end; }
.assistant-message-avatar { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; overflow: hidden; background: #fff; border-radius: 7px; }
.assistant-message-avatar img { width: 27px; height: 29px; object-fit: contain; }
.assistant-message-content { min-width: 0; }
.assistant-message p { margin: 0; padding: 9px 11px; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.assistant-message.is-user p { color: #fff; background: var(--nav-soft); border-color: var(--nav-soft); }
.assistant-message.is-error p { color: #8d2e2e; background: #fde9e7; border-color: #efb6af; }
.assistant-message-actions { display: flex; margin-top: 4px; gap: 4px; }
.assistant-message-actions button { min-width: var(--touch-target); min-height: var(--touch-target); padding: 0 8px; color: var(--muted); background: transparent; border: 0; border-radius: 7px; cursor: pointer; font-size: 9px; }
.assistant-message-actions button:hover { color: var(--nav); background: var(--blue-soft); }
.assistant-message-actions .icon { margin-right: 4px; vertical-align: -2px; }
.assistant-typing { display: inline-flex; min-height: 20px; align-items: center; gap: 4px; }
.assistant-typing i { width: 5px; height: 5px; background: var(--nav); border-radius: 50%; animation: assistant-typing 900ms ease-in-out infinite; }
.assistant-typing i:nth-child(2) { animation-delay: 120ms; }
.assistant-typing i:nth-child(3) { animation-delay: 240ms; }
@keyframes assistant-typing { 50% { opacity: 0.35; transform: translateY(-2px); } }

.assistant-permission-notice { padding: 11px 14px; color: #6a542f; background: var(--copper-soft); border-top: 1px solid #f1c28e; }
.assistant-composer { padding: 12px 14px 10px; border-top: 1px solid var(--line); }
.assistant-composer > label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 10px; font-weight: 700; }
.assistant-composer textarea {
  display: block;
  width: 100%;
  min-height: 54px;
  max-height: 120px;
  resize: vertical;
  padding: 10px 11px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--control-radius);
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
}
.assistant-composer textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--nav); }
.assistant-composer textarea:disabled { color: var(--muted); background: #f0f2f1; cursor: not-allowed; }
.assistant-composer-actions { display: flex; margin-top: 8px; align-items: center; gap: 6px; }
.assistant-composer-actions button {
  display: inline-flex;
  min-height: var(--touch-target);
  padding: 0 11px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--control-radius);
  cursor: pointer;
  font-size: 10px;
  font-weight: 800;
}
.assistant-secondary-button { color: var(--nav); background: var(--surface); border: 1px solid var(--line-strong); }
.assistant-secondary-button:hover { background: var(--blue-soft); border-color: #91b5ae; }
.assistant-secondary-button.is-listening { color: #fff; background: var(--copper); border-color: var(--copper); }
.assistant-primary-button { margin-left: auto; color: #fff; background: var(--nav); border: 1px solid var(--nav); }
.assistant-primary-button:hover { background: var(--nav-soft); border-color: var(--nav-soft); }
.assistant-composer-actions button:disabled { cursor: not-allowed; opacity: 0.58; }
.assistant-composer-actions .icon { width: 15px; height: 15px; }
.assistant-privacy-note { padding: 0 14px 12px; color: var(--muted); background: var(--surface); }

@media (max-width: 620px) {
  .assistant-launcher { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: 80px; min-height: 86px; padding: 4px 5px 6px; }
  .assistant-launcher img { width: 54px; height: 57px; }
  .assistant-launcher strong { font-size: 10px; }
  .assistant-launcher small { font-size: 8px; }
  .assistant-panel { right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); width: calc(100vw - 16px); max-height: calc(100dvh - 16px - env(safe-area-inset-bottom)); border-radius: 14px; }
  .assistant-panel-header { min-height: 66px; padding-left: 10px; }
  .assistant-mini-avatar { width: 44px; height: 44px; }
  .assistant-mini-avatar img { width: 39px; height: 42px; }
  .assistant-identity h2 { font-size: 14px; }
  .assistant-header-actions { gap: 0; }
  .assistant-conversation { padding: 12px 10px; }
  .assistant-composer { padding-inline: 10px; }
  .assistant-privacy-note { padding-inline: 10px; }
  .assistant-composer-actions { flex-wrap: wrap; }
  .assistant-primary-button { flex: 1 0 88px; }
}

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