:root {
  --canvas: #010102;
  --sidebar: #08090a;
  --surface-1: #0f1011;
  --surface-2: #141516;
  --surface-3: #18191a;
  --hairline: #23252a;
  --hairline-strong: #34343a;
  --primary: #5e6ad2;
  --primary-hover: #7c87e8;
  --ink: #f7f8f8;
  --ink-muted: #d0d6e0;
  --ink-subtle: #8a8f98;
  --ink-tertiary: #62666d;
  --success: #35b75b;
  --warning: #c8a55a;
  --danger: #d86a6a;
  --sidebar-width: 236px;
  color-scheme: dark;
  font-family: Inter, "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-size: 14px; line-height: 1.5; letter-spacing: -0.02em; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--sidebar-width); display: flex; flex-direction: column; background: var(--sidebar); border-right: 1px solid #1d1e21; }
.brand-row { height: 65px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 17px; font-weight: 650; letter-spacing: -0.5px; }
.brand-product { color: var(--ink-tertiary); font-weight: 500; margin-left: 3px; }
.brand-mark { width: 25px; height: 25px; position: relative; display: inline-grid; place-items: center; background: var(--primary); border-radius: 7px; overflow: hidden; }
.brand-mark span { position: absolute; width: 3px; border-radius: 5px; background: white; transform: rotate(43deg); }
.brand-mark span:nth-child(1) { height: 10px; left: 7px; bottom: 4px; opacity: .68; }
.brand-mark span:nth-child(2) { height: 17px; left: 12px; bottom: 3px; }
.brand-mark span:nth-child(3) { height: 9px; left: 17px; top: 3px; opacity: .82; }
.workspace-switcher { margin: 4px 12px 12px; min-height: 53px; padding: 8px 10px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; background: #0e0f10; border: 1px solid var(--hairline); border-radius: 8px; color: var(--ink-muted); cursor: pointer; }
.workspace-switcher:hover { background: var(--surface-2); }
.workspace-switcher > svg { width: 14px; color: var(--ink-tertiary); }
.workspace-avatar { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; background: #232636; color: #aab1f0; font-size: 12px; font-weight: 700; }
.workspace-switcher strong, .workspace-switcher small { display: block; }
.workspace-switcher strong { color: var(--ink-muted); font-size: 12px; font-weight: 550; }
.workspace-switcher small { color: var(--ink-tertiary); font-size: 10px; margin-top: 1px; }
.main-nav { flex: 1; padding: 3px 10px; overflow-y: auto; }
.main-nav::-webkit-scrollbar { width: 0; }
.nav-label { margin: 9px 9px 6px; color: #555960; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.nav-label-spaced { margin-top: 19px; }
.nav-item { width: 100%; min-height: 38px; padding: 0 9px; display: flex; align-items: center; gap: 11px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-subtle); text-decoration: none; font-size: 12.5px; text-align: left; cursor: pointer; transition: color .15s ease, background .15s ease; }
.nav-item svg { width: 16px; height: 16px; flex: none; }
.nav-item span:nth-child(2) { flex: 1; }
.nav-item:hover { color: var(--ink-muted); background: #111214; }
.nav-item.active { color: var(--ink); background: #18191c; box-shadow: inset 0 0 0 1px #202125; }
.nav-item.active svg { color: #aeb5f7; }
.nav-count { color: var(--ink-tertiary); font-size: 10px; }
.nav-badge { min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 5px; color: #c5c9f8; background: rgba(94,106,210,.18); font-size: 9px; }
.nav-badge.warning { color: #e2c589; background: rgba(200,165,90,.14); }
.live-dot { flex: none !important; width: 6px; height: 6px; background: var(--success); border-radius: 50%; box-shadow: 0 0 0 3px rgba(53,183,91,.09); }
.beta-tag { flex: none !important; color: #9099e8; font-size: 8px; font-weight: 700; letter-spacing: .08em; }
.sidebar-footer { padding: 8px 10px 12px; border-top: 1px solid #191a1d; }
.sync-card { padding: 8px 10px 10px; margin-bottom: 4px; }
.sync-card div { display: flex; align-items: center; gap: 7px; }
.sync-card strong { color: var(--ink-subtle); font-size: 10.5px; font-weight: 500; }
.sync-card > span { color: #4f5359; font-size: 9.5px; margin-left: 13px; }
.sync-pulse { width: 6px; height: 6px; background: var(--success); border-radius: 50%; box-shadow: 0 0 0 3px rgba(53,183,91,.08); }
.user-card { width: 100%; padding: 8px; display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center; border: 0; border-radius: 7px; background: transparent; text-align: left; cursor: pointer; }
.user-card:hover { background: #111214; }
.user-avatar { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #242631; color: #b8bdf0; font-size: 10px; }
.user-card strong, .user-card small { display: block; }
.user-card strong { color: var(--ink-muted); font-size: 11px; font-weight: 550; }
.user-card small { color: var(--ink-tertiary); font-size: 9.5px; }
.user-card svg { width: 14px; color: var(--ink-tertiary); }
.sidebar-close, .menu-button { display: none !important; }

.main-content { min-height: 100vh; margin-left: var(--sidebar-width); }
.topbar { position: sticky; top: 0; z-index: 30; height: 65px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; background: rgba(1,1,2,.88); backdrop-filter: blur(16px); border-bottom: 1px solid #1c1d20; }
.topbar-left, .topbar-actions, .breadcrumb { display: flex; align-items: center; }
.breadcrumb { gap: 9px; font-size: 11.5px; }
.breadcrumb span, .breadcrumb i { color: var(--ink-tertiary); font-style: normal; }
.breadcrumb strong { color: var(--ink-muted); font-weight: 500; }
.topbar-actions { gap: 8px; }
.command-search { width: 206px; height: 32px; padding: 0 8px 0 10px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--hairline); border-radius: 7px; background: #0d0e0f; color: var(--ink-tertiary); font-size: 10.5px; cursor: pointer; }
.command-search:hover { border-color: var(--hairline-strong); }
.command-search svg { width: 14px; }
.command-search span { flex: 1; text-align: left; }
kbd { padding: 1px 5px; border: 1px solid #2b2c30; border-radius: 4px; background: #17181a; color: #70747a; font-family: inherit; font-size: 9px; }
.icon-button { width: 32px; height: 32px; display: inline-grid; place-items: center; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--ink-subtle); cursor: pointer; }
.icon-button:hover { border-color: var(--hairline); background: var(--surface-2); color: var(--ink); }
.notification-button { position: relative; }
.notification-button span { position: absolute; top: -3px; right: -3px; min-width: 15px; height: 15px; display: grid; place-items: center; border: 2px solid var(--canvas); border-radius: 999px; background: var(--danger); color: white; font-size: 7px; font-weight: 700; }
.primary-button, .secondary-button, .inverse-button { border: 0; border-radius: 7px; font-weight: 550; cursor: pointer; transition: background .15s, transform .1s; }
.primary-button:active, .secondary-button:active, .inverse-button:active { transform: translateY(1px); }
.primary-button { padding: 9px 14px; background: var(--primary); color: white; }
.primary-button:hover { background: var(--primary-hover); }
.primary-button.compact { height: 32px; padding: 0 11px; display: flex; align-items: center; gap: 6px; font-size: 11px; }
.primary-button svg { width: 13px; }
.secondary-button { min-height: 34px; padding: 0 11px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--hairline); background: var(--surface-1); color: var(--ink-subtle); font-size: 10.5px; }
.secondary-button:hover { background: var(--surface-2); color: var(--ink-muted); }
.secondary-button svg { width: 14px; }
.inverse-button { padding: 10px 15px; background: white; color: black; font-size: 12px; }
.inverse-button:hover { background: #e4e4e5; }

.page-wrap { max-width: 1480px; margin: 0 auto; padding: 34px 34px 22px; }
.page-heading { margin-bottom: 25px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.eyebrow-row, .eyebrow { color: var(--ink-tertiary); font-size: 9px; font-weight: 650; letter-spacing: .11em; }
.eyebrow-row { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.status-dot { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(53,183,91,.08); }
.page-heading h1 { margin: 0; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.14; letter-spacing: -1.35px; font-weight: 590; }
.page-heading p { margin: 8px 0 0; color: var(--ink-subtle); font-size: 12px; }
.heading-controls { display: flex; align-items: center; gap: 8px; }
.select-control { height: 34px; min-width: 145px; padding: 0 7px 0 10px; display: flex; align-items: center; gap: 6px; border: 1px solid var(--hairline); border-radius: 7px; background: var(--surface-1); }
.select-control svg { width: 13px; color: var(--ink-tertiary); }
.select-control select { flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink-muted); font-size: 10.5px; cursor: pointer; }

.alert-banner { position: relative; min-height: 56px; margin-bottom: 16px; padding: 10px 42px 10px 12px; display: flex; align-items: center; gap: 11px; border: 1px solid rgba(200,165,90,.25); border-radius: 9px; background: rgba(200,165,90,.07); transition: opacity .2s, transform .2s, height .2s, margin .2s, padding .2s; }
.alert-banner.hidden { opacity: 0; transform: translateY(-5px); height: 0; min-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; border-width: 0; }
.alert-icon { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 7px; background: rgba(200,165,90,.12); color: #d7b66f; }
.alert-icon svg { width: 16px; }
.alert-copy { flex: 1; min-width: 0; }
.alert-copy strong, .alert-copy span { display: block; }
.alert-copy strong { color: #e0d4bb; font-size: 11.5px; font-weight: 600; }
.alert-copy span { margin-top: 1px; color: #928873; font-size: 9.5px; }
.alert-action, .alert-dismiss { border: 0; background: transparent; cursor: pointer; }
.alert-action { color: #d1b577; font-size: 10.5px; font-weight: 550; }
.alert-action:hover { color: #efd594; }
.alert-dismiss { position: absolute; top: 15px; right: 13px; color: #716a5b; font-size: 18px; }

.kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.kpi-card, .panel { background: var(--surface-1); border: 1px solid var(--hairline); box-shadow: inset 0 1px rgba(255,255,255,.018); }
.kpi-card { position: relative; min-width: 0; padding: 15px 15px 13px; border-radius: 9px; overflow: hidden; }
.kpi-card:hover { border-color: #303137; background: #111213; }
.kpi-card.risk-card::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--warning); opacity: .55; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; }
.kpi-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 6px; background: #191a1c; color: #a1a5ac; }
.kpi-icon svg { width: 14px; }
.kpi-icon.lavender { color: #aab1f0; background: rgba(94,106,210,.13); }
.metric-trend { font-size: 8.5px; }
.metric-trend.up, .metric-trend.down-good { color: #6ecb8a; }
.metric-trend.down { color: #81a6dd; }
.metric-trend.warning { padding: 2px 6px; border-radius: 4px; background: rgba(200,165,90,.11); color: #d1b576; }
.kpi-card > p { margin: 12px 0 3px; color: var(--ink-subtle); font-size: 10.5px; }
.metric { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.metric strong { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.2; letter-spacing: -1px; font-weight: 590; }
.metric span { color: var(--ink-tertiary); font-size: 9.5px; }
.kpi-card > small { display: block; margin-top: 7px; color: var(--ink-tertiary); font-size: 8.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-split { margin-top: 7px; display: flex; gap: 7px; color: var(--ink-tertiary); font-size: 8px; white-space: nowrap; }
.status-split span, .health-legend span { display: flex; align-items: center; gap: 3px; }
.status-split i, .health-legend i { width: 5px; height: 5px; border-radius: 50%; }
i.ok { background: var(--success); } i.caution { background: var(--warning); } i.danger { background: var(--danger); } i.offline { background: #55585e; }
.progress { height: 3px; margin-top: 8px; overflow: hidden; background: #25262a; border-radius: 5px; }
.progress i { height: 100%; display: block; background: linear-gradient(90deg, var(--primary), var(--warning)); border-radius: inherit; }

.dashboard-grid { display: grid; gap: 10px; margin-top: 10px; }
.main-grid { grid-template-columns: minmax(0, 1.65fr) minmax(350px, .85fr); }
.lower-grid { grid-template-columns: minmax(0, 1.65fr) minmax(300px, .72fr); }
.action-grid { grid-template-columns: 1fr 1fr; }
.panel { border-radius: 10px; overflow: hidden; }
.panel-header { min-height: 66px; padding: 15px 17px 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.panel-header h2 { margin: 0; font-size: 13px; font-weight: 590; letter-spacing: -.2px; }
.panel-header p { margin: 3px 0 0; color: var(--ink-tertiary); font-size: 9.5px; }
.segmented { padding: 2px; display: flex; gap: 1px; border: 1px solid var(--hairline); border-radius: 6px; background: #0b0c0d; }
.segmented button { min-width: 35px; height: 23px; padding: 0 7px; border: 0; border-radius: 4px; background: transparent; color: var(--ink-tertiary); font-size: 9px; cursor: pointer; }
.segmented button:hover { color: var(--ink-muted); }
.segmented button.active { background: #202124; color: var(--ink-muted); }
.chart-summary { padding: 0 18px 12px; display: flex; gap: 31px; }
.chart-summary div { min-width: 0; }
.chart-summary span, .chart-summary strong { display: block; }
.chart-summary span { color: var(--ink-tertiary); font-size: 8.5px; }
.chart-summary strong { margin-top: 3px; font-size: 15px; font-weight: 560; }
.chart-summary strong small { color: var(--ink-tertiary); font-size: 8px; font-weight: 400; }
.legend { width: 6px; height: 6px; margin-right: 5px; display: inline-block; border-radius: 2px; }
.legend.pv { background: #8790e8; }.legend.usage { background: #71757d; }.legend.ess { background: #6d91b8; }
.chart-wrap { position: relative; height: 208px; margin: 0 10px 8px; }
.chart-wrap svg { width: 100%; height: 100%; overflow: visible; }
.chart-tooltip { position: absolute; z-index: 2; min-width: 112px; padding: 8px 9px; opacity: 0; pointer-events: none; border: 1px solid #34363b; border-radius: 6px; background: #18191c; box-shadow: 0 9px 28px rgba(0,0,0,.28); font-size: 8px; transform: translate(-50%, -105%); transition: opacity .1s; }
.chart-tooltip.visible { opacity: 1; }
.chart-tooltip strong { display: block; margin-bottom: 4px; color: var(--ink-muted); font-size: 9px; }
.chart-tooltip span { display: flex; justify-content: space-between; gap: 10px; color: var(--ink-tertiary); }
.chart-tooltip b { color: var(--ink-muted); font-weight: 500; }

.asset-title-line { display:flex;align-items:center;gap:8px; }
.asset-title-line .live-badge { padding:2px 5px;font-size:6px; }
.chart-head-tools { display:flex;align-items:center;gap:10px; }
.stream-clock { color:var(--ink-tertiary);font:7px ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap; }
.stream-clock b { margin-left:3px;color:#7bc38c;font-weight:550; }
.asset-live-grid { padding:0 16px 10px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px; }
.asset-live-card { --asset:#8e97ee;position:relative;min-width:0;padding:10px;border:1px solid #292a30;border-radius:7px;background:#131416;color:var(--ink);text-align:left;cursor:pointer;overflow:hidden;transition:opacity .18s,border-color .18s,background .18s,transform .18s; }
.asset-live-card::before { content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--asset);opacity:.85; }
.asset-live-card:hover { transform:translateY(-1px);border-color:#3a3c44;background:#161719; }
.asset-live-card:not(.active) { opacity:.36;filter:saturate(.45); }
.asset-live-card.ess { --asset:#67b9a1; }.asset-live-card.ev { --asset:#d6a65f; }.asset-live-card.meter { --asset:#8ea8c9; }
.asset-live-label { display:grid;grid-template-columns:auto 1fr;column-gap:6px;align-items:center; }
.asset-live-label>i { grid-row:1/3;width:25px;height:25px;display:grid;place-items:center;border-radius:5px;background:color-mix(in srgb,var(--asset) 12%,#17181b);color:var(--asset);font:6px ui-monospace;font-style:normal; }
.asset-live-label b { color:var(--ink-subtle);font-size:7.5px;font-weight:550; }
.asset-live-label em { color:var(--ink-tertiary);font-size:5.8px;font-style:normal; }
.asset-live-card>strong { margin:9px 0 7px;display:block;color:var(--ink-muted);font-size:13px;font-weight:570;white-space:nowrap; }
.asset-live-card>strong small { color:var(--ink-tertiary);font-size:6px;font-weight:400; }
.asset-current { display:flex;align-items:center;color:var(--ink-tertiary);font-size:6px; }
.asset-current>i { width:4px;height:4px;margin-right:5px;border-radius:50%;background:var(--asset);box-shadow:0 0 0 3px color-mix(in srgb,var(--asset) 11%,transparent); }
.asset-current b { margin-left:auto;color:var(--asset);font-size:6.5px;font-weight:550; }
.chart-axis-note { padding:0 17px 2px;display:flex;justify-content:space-between;color:var(--ink-tertiary);font-size:6px; }
.chart-axis-note span:last-child { display:flex;align-items:center;gap:4px; }
.chart-axis-note i { width:4px;height:4px;border-radius:50%;background:#63bd79;animation:pulse 1.8s infinite; }
.energy-series-line { stroke-dashoffset:0;animation:seriesReveal .65s ease both; }
.energy-series-area { animation:areaReveal .4s ease both; }
.energy-live-point { transform-box:fill-box;transform-origin:center;animation:livePoint 1.8s ease infinite; }
.value-shift { animation:valueShift .38s ease; }
.chart-tooltip span.pcs b{color:#a7aef1}.chart-tooltip span.ess b{color:#7bc5b0}.chart-tooltip span.ev b{color:#ddb575}.chart-tooltip span.meter b{color:#a1b8d3}
@keyframes seriesReveal{from{opacity:.2;stroke-dashoffset:18}to{opacity:1;stroke-dashoffset:0}}@keyframes areaReveal{from{opacity:0}to{opacity:1}}@keyframes livePoint{50%{transform:scale(1.65);opacity:.55}}@keyframes valueShift{0%{opacity:.35;transform:translateY(2px)}100%{opacity:1;transform:none}}

/* Continuous energy stream */
.stream-clock{display:flex;align-items:center}.stream-clock>i{width:4px;height:4px;margin-right:4px;border-radius:50%;background:#65c07d;box-shadow:0 0 0 4px rgba(101,192,125,.08);animation:pulse 1.2s infinite}
.asset-stream-rail{margin:0 16px 8px;display:flex;align-items:stretch;border-top:1px solid #292b31;border-bottom:1px solid #292b31;background:#111214;overflow:auto}.asset-stream-item{--asset:#8e97ee;position:relative;min-width:145px;padding:10px 12px;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;gap:2px 7px;align-items:center;flex:1;border:0;border-right:1px solid #292b31;background:transparent;color:var(--ink);text-align:left;cursor:pointer;transition:opacity .18s,background .18s}.asset-stream-item:last-child{border-right:0}.asset-stream-item:hover{background:#17181b}.asset-stream-item:not(.active){opacity:.28}.asset-stream-item.ess{--asset:#67b9a1}.asset-stream-item.ev{--asset:#d6a65f}.asset-stream-item.meter{--asset:#8ea8c9}.asset-code{grid-row:1/3;width:27px;height:27px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--asset) 35%,#24262b);border-radius:50%;color:var(--asset);font:6px ui-monospace}.asset-name,.asset-name small{display:block}.asset-name{color:var(--ink-subtle);font-size:7px}.asset-name small{margin-top:2px;color:var(--ink-tertiary);font-size:5.5px}.asset-stream-item>strong{grid-row:1/3;grid-column:3;align-self:center;color:var(--ink-muted);font-size:13px;font-weight:570;white-space:nowrap}.asset-stream-item>strong b{color:var(--asset);font:inherit}.asset-stream-item>strong small{margin-left:3px;color:var(--ink-tertiary);font-size:6px;font-weight:400}.asset-stream-item>em{position:absolute;right:10px;bottom:5px;display:flex;align-items:center;gap:3px;color:var(--ink-tertiary);font-size:5px;font-style:normal}.asset-stream-item>em i{width:3px;height:3px;border-radius:50%;background:var(--asset)}
.asset-live-panel .chart-wrap{height:235px;margin-top:0;background:#0f1012}.stream-guide{stroke:#24262b;stroke-width:1;stroke-dasharray:1 8}.stream-guide.zero{stroke:#34373f;stroke-dasharray:none}.stream-axis-label,.stream-time-label{fill:#52565e;font-size:7px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.stream-time-label.now{fill:#76c28a}.stream-area{stroke:none}.stream-area.pcs{fill:url(#streamPcsFill)}.stream-area.meter{fill:url(#streamMeterFill)}.stream-line,.stream-glow{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.stream-glow{stroke-width:6;opacity:.1;filter:url(#streamGlow)}.stream-line{transition:opacity .2s}.stream-line[data-series="meter"]{stroke-dasharray:2 6;animation:streamDash 1.1s linear infinite}.stream-endpoint{stroke:#0f1012;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:livePoint 1.3s ease infinite;transition:opacity .2s}.stream-end-label{font:6px ui-monospace;transition:opacity .2s}.stream-sweep{stroke:#8b94de;stroke-width:1;opacity:.24;filter:url(#streamGlow);animation:sweepPulse 1.2s ease infinite}.stream-hit{cursor:crosshair}.series-muted{opacity:.08!important}.series-disabled{opacity:0!important;pointer-events:none}
@keyframes streamDash{to{stroke-dashoffset:-16}}@keyframes sweepPulse{50%{opacity:.6}}

.live-badge { padding: 3px 6px; display: flex; align-items: center; gap: 4px; border: 1px solid rgba(53,183,91,.18); border-radius: 4px; color: #6cc183; background: rgba(53,183,91,.06); font-size: 7px; font-weight: 650; letter-spacing: .08em; }
.live-badge i { width: 4px; height: 4px; border-radius: 50%; background: var(--success); animation: pulse 1.8s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.energy-flow { position: relative; height: 244px; margin: 0 18px 5px; }
.flow-node { position: absolute; z-index: 2; width: 86px; text-align: center; }
.flow-node small, .flow-node strong, .flow-node em { display: block; }
.flow-node small { margin-top: 4px; color: var(--ink-tertiary); font-size: 8px; }
.flow-node strong { margin-top: 1px; color: var(--ink-muted); font-size: 10px; font-weight: 550; }
.flow-node em { color: #62666d; font-size: 7.5px; font-style: normal; }
.node-icon { width: 32px; height: 32px; margin: auto; display: grid; place-items: center; border: 1px solid #2d2e33; border-radius: 8px; background: #18191b; color: #969ba4; }
.node-icon svg { width: 16px; }
.flow-node.asset-pcs .node-icon{color:#8e97ee;border-color:#3d4166;background:#171824}.flow-node.asset-ess .node-icon{color:#67b9a1;border-color:#315347;background:#131d1a}.flow-node.asset-ev .node-icon{color:#d6a65f;border-color:#57482f;background:#1e1a13}.flow-node.asset-meter .node-icon{color:#8ea8c9;border-color:#394655;background:#151a20}
.node-pv { left: 50%; top: 0; transform: translateX(-50%); }
.node-grid { left: 0; top: 93px; }
.node-ess { right: 0; top: 93px; }
.node-load { left: 50%; bottom: 0; transform: translateX(-50%); }
.node-core { left: 50%; top: 94px; transform: translateX(-50%); }
.core-ring { width: 46px; height: 46px; margin: auto; display: grid; place-items: center; border: 1px solid rgba(94,106,210,.45); border-radius: 50%; background: rgba(94,106,210,.09); color: #aab1f0; box-shadow: 0 0 0 7px rgba(94,106,210,.025); }
.core-ring svg { width: 18px; }
.flow-line { position: absolute; z-index: 1; overflow: hidden; background: #292b30; }
.flow-line i { position: absolute; display: block; border-radius: 50%; background: #8b93e5; box-shadow: 0 0 5px #737bd0; animation: flow 2s linear infinite; }
.line-pv { top: 67px; left: 50%; width: 1px; height: 37px; }
.line-pv i, .line-load i { width: 3px; height: 7px; left: -1px; }
.line-grid { top: 115px; left: 75px; width: calc(50% - 94px); height: 1px; }
.line-ess { top: 115px; right: 75px; width: calc(50% - 94px); height: 1px; }
.line-grid i, .line-ess i { width: 7px; height: 3px; top: -1px; }
.line-grid i { animation-direction: reverse; }
.line-load { top: 153px; bottom: 65px; left: 50%; width: 1px; }
.line-ess i { background: #7195bc; }
@keyframes flow { from { transform: translate(0,0); } to { transform: translate(40px,40px); } }
.flow-footer { padding: 11px 17px 13px; display: flex; justify-content: space-around; border-top: 1px solid #202125; color: var(--ink-tertiary); font-size: 8.5px; }
.flow-footer strong { margin-left: 4px; color: var(--ink-muted); font-weight: 550; }
.flow-panel{position:relative}.flow-node{border:0;background:transparent;color:var(--ink);font-family:inherit;cursor:pointer;transition:opacity .2s,transform .2s}.flow-node:hover .node-icon,.flow-node.active .node-icon{transform:scale(1.1);box-shadow:0 0 0 5px color-mix(in srgb,currentColor 8%,transparent)}.flow-node.active strong{color:var(--ink)}.flow-node.active em{color:#8b9099}.node-icon{transition:transform .2s,box-shadow .2s}.energy-flow.has-focus .flow-node:not(.active){opacity:.28}.core-ring{position:relative;animation:coreBreath 2.1s ease-in-out infinite}.core-ring::before,.core-ring::after{content:"";position:absolute;inset:-7px;border:1px solid rgba(126,135,220,.12);border-radius:50%;animation:coreOrbit 5s linear infinite}.core-ring::after{inset:-13px;border-style:dashed;animation-duration:9s;animation-direction:reverse}.flow-line{overflow:visible;transition:opacity .2s,box-shadow .2s}.flow-line i{animation:none}.line-pv i,.line-load i{box-shadow:0 -16px 5px rgba(142,151,238,.35),0 -32px 5px rgba(142,151,238,.12)}.line-grid i{background:#8ea8c9;box-shadow:-22px 0 5px rgba(142,168,201,.32),-44px 0 5px rgba(142,168,201,.1);animation:flowRight 1.35s linear infinite}.line-ess i{background:#67b9a1;box-shadow:22px 0 5px rgba(103,185,161,.32),44px 0 5px rgba(103,185,161,.1);animation:flowLeft 1.15s linear infinite}.line-pv i{background:#8e97ee;animation:flowDown .95s linear infinite}.line-load i{background:#d6a65f;box-shadow:0 -16px 5px rgba(214,166,95,.32),0 -32px 5px rgba(214,166,95,.1);animation:flowDown 1.2s linear infinite}.energy-flow[data-focus="pcs"] .flow-line:not(.line-pv),.energy-flow[data-focus="meter"] .flow-line:not(.line-grid),.energy-flow[data-focus="ess"] .flow-line:not(.line-ess),.energy-flow[data-focus="ev"] .flow-line:not(.line-load){opacity:.12}.energy-flow[data-focus="pcs"] .line-pv,.energy-flow[data-focus="meter"] .line-grid,.energy-flow[data-focus="ess"] .line-ess,.energy-flow[data-focus="ev"] .line-load{box-shadow:0 0 9px currentColor}.flow-footer{gap:12px;justify-content:flex-end;align-items:center}.flow-insight{margin-right:auto;display:flex;align-items:center;gap:5px;max-width:48%;color:#858b97}.flow-insight i{width:5px;height:5px;flex:0 0 auto;border-radius:50%;background:#7781d2;box-shadow:0 0 0 4px rgba(119,129,210,.08)}
@keyframes flowDown{from{transform:translateY(-10px)}to{transform:translateY(58px)}}@keyframes flowRight{from{transform:translateX(-12px)}to{transform:translateX(160px)}}@keyframes flowLeft{from{transform:translateX(12px)}to{transform:translateX(-160px)}}@keyframes coreBreath{50%{box-shadow:0 0 0 10px rgba(94,106,210,.045)}}@keyframes coreOrbit{to{transform:rotate(360deg)}}
.flow-footer{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;text-align:center}.flow-insight{grid-column:1/-1;margin-right:0;max-width:none;justify-content:center}.flow-node{padding:0}

.map-ops-grid { grid-template-columns:minmax(0,1.5fr) minmax(280px,.6fr); }
.map-panel,.forecast-panel { min-height:300px; }
.korea-map { position:relative;height:235px;margin:0 15px 12px;overflow:hidden;border:1px solid #202226;border-radius:8px;background:#0b0c0d; }
.korea-map>svg { position:absolute;left:50%;top:5px;width:270px;height:225px;transform:translateX(-50%);color:#272a31; }
.korea-map>svg path:first-child { fill:#131519;stroke:#31343c;stroke-width:1.2; }
.korea-map>svg path:last-child { stroke:#292c33;stroke-width:1; }
.map-marker { position:absolute;display:flex;align-items:center;gap:5px;border:0;background:transparent;color:var(--ink-subtle);text-align:left;cursor:pointer; }
.map-marker>i { width:8px;height:8px;border:2px solid #0b0c0d;border-radius:50%;box-shadow:0 0 0 3px rgba(53,183,91,.12);background:var(--success); }
.map-marker.caution>i{background:var(--warning);box-shadow:0 0 0 4px rgba(200,165,90,.12)}.map-marker.danger>i{background:var(--danger);box-shadow:0 0 0 4px rgba(216,106,106,.13)}
.map-marker span,.map-marker small{display:block}.map-marker span{font-size:8px;font-weight:550}.map-marker small{color:var(--ink-tertiary);font-size:6.5px;font-weight:400;white-space:nowrap}.map-marker:hover span{color:var(--ink)}
.m-seoul{left:49%;top:49px}.m-hwaseong{left:43%;top:76px}.m-incheon{left:31%;top:55px}.m-sejong{left:40%;top:125px}.m-daejeon{left:54%;top:143px}
.map-legend{position:absolute;left:10px;bottom:9px;padding:5px 7px;display:flex;gap:9px;border:1px solid #222429;border-radius:5px;background:rgba(15,16,17,.88);color:var(--ink-tertiary);font-size:6.5px}.map-legend span{display:flex;align-items:center;gap:3px}.map-legend i{width:4px;height:4px;border-radius:50%}

/* Readable energy routing */
.energy-flow{height:320px;margin:0 14px 5px}.flow-routing{position:absolute;inset:0;z-index:0;width:100%;height:100%;overflow:visible}.flow-routing path{fill:none;vector-effect:non-scaling-stroke}.route-base{stroke:#292c32;stroke-width:1.2}.route-live{stroke-width:2;stroke-linecap:round;stroke-dasharray:2 11;animation:routeTravel 1.25s linear infinite;transition:opacity .2s,filter .2s}.route-live.route-pcs{stroke:#8e97ee}.route-live.route-meter{stroke:#8ea8c9;animation-direction:reverse}.route-live.route-ess{stroke:#67b9a1;animation-direction:reverse}.route-live.route-ev{stroke:#d6a65f}.energy-flow>.flow-node{width:96px}.energy-flow>.node-pv{left:auto;right:4px;top:8px;transform:none}.energy-flow>.node-grid{left:auto;right:4px;top:auto;bottom:8px}.energy-flow>.node-ess{left:4px;right:auto;top:50%;transform:translateY(-50%)}.energy-flow>.node-load{left:auto;right:4px;top:50%;bottom:auto;transform:translateY(-50%)}.energy-flow>.node-core{left:50%;top:50%;width:112px;transform:translate(-50%,-50%);pointer-events:none}.energy-flow>.node-core .core-ring{width:52px;height:52px}.energy-flow>.node-core em{margin-top:3px;font-size:6.5px;white-space:nowrap}.energy-flow.has-focus .node-core{opacity:1}.energy-flow[data-focus="pcs"] .route-live:not(.route-pcs),.energy-flow[data-focus="meter"] .route-live:not(.route-meter),.energy-flow[data-focus="ess"] .route-live:not(.route-ess),.energy-flow[data-focus="ev"] .route-live:not(.route-ev){opacity:.08}.energy-flow[data-focus="pcs"] .route-pcs,.energy-flow[data-focus="meter"] .route-meter,.energy-flow[data-focus="ess"] .route-ess,.energy-flow[data-focus="ev"] .route-ev{filter:drop-shadow(0 0 4px currentColor);stroke-width:3}.flow-node strong{white-space:nowrap}.flow-node em{white-space:nowrap}
@keyframes routeTravel{to{stroke-dashoffset:-26}}

/* Site map with energy telemetry */
.site-map-live{display:flex;align-items:center;gap:5px;color:#77bf88;font-size:6.5px}.site-map-live i{width:5px;height:5px;border-radius:50%;background:#64bd79;box-shadow:0 0 0 4px rgba(100,189,121,.08);animation:pulse 1.5s infinite}.site-energy-map{height:235px;margin:0 15px 12px;display:grid;grid-template-columns:minmax(190px,.75fr) minmax(360px,1.4fr);overflow:hidden;border:1px solid #202226;border-radius:8px;background:#0b0c0d}.site-map-visual{position:relative;min-width:0;border-right:1px solid #24262b;overflow:hidden}.site-map-visual>svg{position:absolute;left:50%;top:4px;width:238px;height:225px;transform:translateX(-50%);color:#272a31}.site-map-visual>svg path:first-child{fill:#131519;stroke:#31343c;stroke-width:1.2}.site-map-visual>svg path:last-child{fill:none;stroke:#292c33;stroke-width:1}.map-energy-pin{position:absolute;padding:0;display:flex;align-items:center;gap:4px;border:0;background:transparent;color:var(--ink-subtle);text-align:left;cursor:pointer}.map-energy-pin>i{width:7px;height:7px;flex:0 0 auto;border:2px solid #0b0c0d;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px rgba(53,183,91,.11)}.map-energy-pin.caution>i{background:var(--warning);box-shadow:0 0 0 3px rgba(200,165,90,.12)}.map-energy-pin.danger>i{background:var(--danger);box-shadow:0 0 0 3px rgba(216,106,106,.12)}.map-energy-pin span,.map-energy-pin b{display:block}.map-energy-pin span{font-size:7px;font-weight:550}.map-energy-pin b{margin-top:1px;color:var(--ink-tertiary);font:5.5px ui-monospace}.map-energy-pin:hover span{color:var(--ink)}.pin-pangyo{left:51%;top:43px}.pin-hwaseong{left:41%;top:72px}.pin-incheon{left:26%;top:52px}.pin-sejong{left:38%;top:126px}.pin-daejeon{left:53%;top:151px}.site-energy-list{padding:5px 8px;display:grid;align-content:center}.site-energy-row{width:100%;min-height:42px;padding:5px 7px;display:grid;grid-template-columns:minmax(92px,1.25fr) repeat(4,minmax(48px,.78fr));gap:7px;align-items:center;border:0;border-bottom:1px solid #222429;background:transparent;color:var(--ink-subtle);text-align:left;cursor:pointer}.site-energy-row:last-child{border-bottom:0}.site-energy-row:hover{background:#141619}.site-energy-row>span:not(.site-energy-place){padding-left:7px;border-left:1px solid #25272c}.site-energy-row small,.site-energy-row b{display:block}.site-energy-row small{color:var(--ink-tertiary);font-size:5.5px;font-weight:400}.site-energy-row b{margin-top:2px;color:var(--ink-muted);font-size:7px;font-weight:540;white-space:nowrap}.site-energy-place{position:relative;padding-left:12px}.site-energy-place>i{position:absolute;left:0;top:50%;width:5px;height:5px;border-radius:50%;background:var(--success);transform:translateY(-50%)}.site-energy-row.caution .site-energy-place>i{background:var(--warning)}.site-energy-row.danger .site-energy-place>i{background:var(--danger)}.site-energy-place>b{font-size:8px}.site-energy-place>small{margin-top:1px}

.map-energy-pin.map-linked span{color:#d7d9df}.map-energy-pin.map-linked>i{transform:scale(1.35)}.site-energy-row.map-linked{background:#181a20;box-shadow:inset 2px 0 #6972c4}
.forecast-panel{padding-bottom:14px}.forecast-gauge{padding:5px 17px 13px}.forecast-gauge>div{position:relative;height:7px;margin-bottom:8px;border-radius:6px;background:#26272b}.forecast-gauge>div i{height:100%;display:block;border-radius:inherit;background:linear-gradient(90deg,#5e6ad2 0 72%,#c8a55a 90%,#d86a6a 100%)}.forecast-gauge>div b{position:absolute;top:-13px;color:#9f8960;font-size:6px;font-weight:400;transform:translateX(-50%)}.forecast-gauge>div b::after{content:"";position:absolute;left:50%;top:10px;width:1px;height:10px;background:#776641}.forecast-gauge>span{display:inline-block;color:var(--ink-tertiary);font-size:7.5px}.forecast-gauge>span:last-child{float:right}.forecast-gauge strong{color:var(--ink-muted);font-size:10px}
.forecast-timeline{height:105px;margin:6px 17px 18px;padding-top:8px;display:flex;align-items:flex-end;gap:5px;border-bottom:1px solid #2a2b30}.forecast-timeline>span{position:relative;flex:1;min-height:12px;border-radius:2px 2px 0 0;background:#3b3e55}.forecast-timeline>span.warn{background:linear-gradient(#b59554,#635130)}.forecast-timeline i{position:absolute;left:50%;bottom:-15px;color:var(--ink-tertiary);font-size:6px;font-style:normal;transform:translateX(-50%)}.forecast-action{width:calc(100% - 34px);margin:0 17px;justify-content:center}

.text-button { padding: 4px; border: 0; background: transparent; color: var(--ink-tertiary); font-size: 9px; cursor: pointer; }
.text-button:hover { color: var(--ink-muted); }
.site-table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { padding: 8px 15px; border-top: 1px solid #202125; border-bottom: 1px solid #202125; background: #0c0d0e; color: #5c6067; font-size: 8px; font-weight: 500; text-align: left; white-space: nowrap; }
td { padding: 10px 15px; border-bottom: 1px solid #1d1e21; color: var(--ink-subtle); font-size: 9.5px; white-space: nowrap; }
tbody tr { cursor: pointer; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #121315; }
.site-name { min-width: 150px; display: flex; align-items: center; gap: 9px; }
.site-symbol { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid #292b30; border-radius: 6px; background: #18191c; color: #9ba1aa; font-size: 9px; font-weight: 600; }
.site-name strong, .site-name small { display: block; }
.site-name strong { color: var(--ink-muted); font-size: 9.5px; font-weight: 520; }
.site-name small { color: #555960; font-size: 7.5px; }
.status-chip { padding: 2px 6px; display: inline-flex; align-items: center; gap: 4px; border-radius: 4px; font-size: 8px; }
.status-chip i, .connection i { width: 4px; height: 4px; border-radius: 50%; }
.status-chip.normal { color: #76c68c; background: rgba(53,183,91,.07); }.status-chip.normal i { background: var(--success); }
.status-chip.caution { color: #d0b377; background: rgba(200,165,90,.08); }.status-chip.caution i { background: var(--warning); }
.status-chip.danger { color: #d98787; background: rgba(216,106,106,.08); }.status-chip.danger i { background: var(--danger); }
.risk-text { color: #d0b377; font-weight: 550; }
.soc { width: 29px; height: 3px; margin-right: 4px; display: inline-block; background: #26272b; border-radius: 3px; vertical-align: middle; overflow: hidden; }
.soc i { height: 100%; display: block; background: #747cc7; }
.connection { display: inline-flex; align-items: center; gap: 4px; color: #686c72; font-size: 8px; }.connection i { background: var(--success); }.connection.delayed { color: #9e895e; }.connection.delayed i { background: var(--warning); }

.health-donut-wrap { padding: 6px 20px 17px; display: flex; align-items: center; justify-content: center; gap: 28px; }
.health-donut { width: 112px; height: 112px; padding: 9px; border-radius: 50%; background: conic-gradient(#727bd1 0 96.8%, #4f4530 96.8% 98.8%, #66383a 98.8% 100%); }
.health-donut::before { content: ""; position: absolute; }
.health-donut > div { width: 94px; height: 94px; display: grid; place-content: center; border-radius: 50%; background: var(--surface-1); text-align: center; }
.health-donut strong { font-size: 19px; font-weight: 580; letter-spacing: -.7px; }
.health-donut span { color: var(--ink-tertiary); font-size: 8px; }
.health-legend { display: grid; grid-template-columns: auto auto; gap: 10px 14px; color: var(--ink-tertiary); font-size: 8px; }
.health-legend span { min-width: 63px; }
.health-legend strong { margin-left: auto; color: var(--ink-muted); font-weight: 500; }
.device-bars { padding: 12px 17px 15px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; border-top: 1px solid #202125; }
.device-bars div > span { display: flex; justify-content: space-between; color: var(--ink-tertiary); font-size: 7.5px; }
.device-bars em { color: #656970; font-style: normal; }
.device-bars div > i { height: 3px; margin-top: 5px; display: block; border-radius: 3px; background: #27282c; overflow: hidden; }
.device-bars b { height: 100%; display: block; border-radius: inherit; background: #7178bf; }

.activity-row { width: 100%; min-height: 57px; padding: 9px 15px; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; border: 0; border-top: 1px solid #202125; background: transparent; text-align: left; cursor: pointer; }
.activity-row:hover { background: #121315; }
.severity { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 7px; }
.severity svg { width: 14px; }
.severity.danger { color: #d67c7c; background: rgba(216,106,106,.09); }.severity.warning { color: #ceb174; background: rgba(200,165,90,.09); }.severity.caution { color: #8b929c; background: #191a1d; }
.activity-copy strong, .activity-copy small, .activity-meta strong, .activity-meta small { display: block; }
.activity-copy strong { color: var(--ink-muted); font-size: 9.5px; font-weight: 520; }
.activity-copy small, .activity-meta small { margin-top: 2px; color: #555960; font-size: 7.5px; }
.activity-meta { text-align: right; }
.activity-meta strong { color: var(--ink-tertiary); font-size: 8px; font-weight: 500; }
.activity-meta .urgency { color: #d18585; }
.request-type { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid #2a2d3b; border-radius: 7px; background: rgba(94,106,210,.07); color: #969ee7; font-size: 8px; font-weight: 650; }

.ai-promo { position: relative; min-height: 150px; margin-top: 10px; padding: 30px 34px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; overflow: hidden; border: 1px solid #2b2d3b; border-radius: 11px; background: #101114; }
.ai-promo::after { content: ""; position: absolute; width: 280px; height: 280px; top: -200px; left: 60px; border: 1px solid rgba(94,106,210,.13); border-radius: 50%; box-shadow: 0 0 0 45px rgba(94,106,210,.018), 0 0 0 90px rgba(94,106,210,.012); pointer-events: none; }
.ai-promo-mark { position: relative; z-index: 1; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid #3a3e58; border-radius: 12px; background: rgba(94,106,210,.11); color: #aeb5f7; }
.ai-promo-mark svg { width: 24px; height: 24px; }
.ai-promo > div:nth-child(2) { position: relative; z-index: 1; }
.ai-promo h2 { margin: 5px 0 4px; font-size: 19px; font-weight: 570; letter-spacing: -.65px; }
.ai-promo p { margin: 0; color: var(--ink-subtle); font-size: 10px; }
.dashboard-footer { padding: 20px 2px 0; display: flex; justify-content: space-between; color: #45484e; font-size: 8px; }

.ai-drawer { position: fixed; z-index: 80; top: 0; right: 0; width: min(410px, 100vw); height: 100vh; display: flex; flex-direction: column; background: #0b0c0d; border-left: 1px solid var(--hairline); box-shadow: -20px 0 50px rgba(0,0,0,.4); transform: translateX(102%); transition: transform .25s ease; }
.ai-drawer.open { transform: translateX(0); }
.drawer-backdrop, .sidebar-backdrop { position: fixed; inset: 0; z-index: 70; opacity: 0; visibility: hidden; background: rgba(0,0,0,.58); backdrop-filter: blur(2px); transition: opacity .2s, visibility .2s; }
.drawer-backdrop.open, .sidebar-backdrop.open { opacity: 1; visibility: visible; }
.drawer-header { height: 65px; padding: 0 16px 0 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--hairline); }
.drawer-header > div, .drawer-header > div > span { display: flex; align-items: center; }
.drawer-header > div { gap: 10px; }
.drawer-header > div > span:last-child { align-items: flex-start; flex-direction: column; }
.drawer-header strong { font-size: 12px; font-weight: 580; }.drawer-header small { color: var(--ink-tertiary); font-size: 8px; }
.ai-small-mark { width: 27px; height: 27px; display: grid !important; place-items: center; border-radius: 7px; background: var(--primary); color: white; font-size: 13px; }
.ai-context { padding: 9px 18px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid #1c1d20; background: #0e0f10; color: var(--ink-tertiary); font-size: 8px; }
.chat-stream { flex: 1; padding: 22px 18px; overflow-y: auto; }
.ai-message { display: flex; align-items: flex-start; gap: 9px; }
.ai-avatar { width: 25px; height: 25px; flex: none; display: grid; place-items: center; border: 1px solid #34374a; border-radius: 7px; color: #9fa7ed; background: rgba(94,106,210,.08); font-size: 11px; }
.ai-message > div { max-width: 310px; padding: 10px 12px; border: 1px solid var(--hairline); border-radius: 3px 9px 9px 9px; background: var(--surface-1); }
.ai-message p { margin: 0; color: var(--ink-muted); font-size: 10.5px; }
.ai-message small { margin-top: 7px; display: block; color: var(--ink-tertiary); font-size: 8px; }
.user-message { margin: 15px 0 15px auto; max-width: 82%; padding: 9px 11px; border-radius: 9px 3px 9px 9px; background: var(--primary); color: white; font-size: 10.5px; }
.typing { display: flex; gap: 3px; padding: 13px !important; }
.typing i { width: 4px; height: 4px; border-radius: 50%; background: #858a93; animation: typing 1.2s infinite; }.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes typing { 0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-3px);opacity:1} }
.suggestions { margin: 20px 0 0 34px; display: flex; flex-wrap: wrap; gap: 6px; }
.suggestions button { padding: 6px 8px; border: 1px solid var(--hairline); border-radius: 6px; background: transparent; color: var(--ink-subtle); font-size: 8.5px; cursor: pointer; }.suggestions button:hover { color: #b8bdf0; border-color: #3b3f5b; background: rgba(94,106,210,.05); }
.chat-form { padding: 12px 14px 15px; display: grid; grid-template-columns: 1fr auto; gap: 7px; border-top: 1px solid var(--hairline); }
.chat-form textarea { min-height: 45px; max-height: 100px; padding: 11px 12px; resize: none; border: 1px solid #2b2d32; border-radius: 8px; outline: 0; background: #121315; color: var(--ink); font-size: 10.5px; }.chat-form textarea:focus { border-color: #565d99; }
.chat-form button { width: 40px; height: 40px; align-self: center; display: grid; place-items: center; border: 0; border-radius: 8px; background: var(--primary); color: white; cursor: pointer; }.chat-form button:hover { background: var(--primary-hover); }.chat-form button svg { width: 16px; }
.chat-form small { grid-column: 1 / -1; color: #4d5056; font-size: 7.5px; text-align: center; }

.modal-backdrop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; opacity: 0; visibility: hidden; background: rgba(0,0,0,.68); backdrop-filter: blur(3px); transition: opacity .2s, visibility .2s; }
.modal-backdrop.open { opacity: 1; visibility: visible; }
.modal { width: min(560px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; border: 1px solid #303238; border-radius: 11px; background: #0f1011; box-shadow: 0 24px 70px rgba(0,0,0,.55); transform: translateY(8px) scale(.99); transition: transform .2s; }.modal-backdrop.open .modal { transform: translateY(0) scale(1); }
.modal-header { padding: 18px 19px 15px; display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid var(--hairline); }
.modal-header h2 { margin: 3px 0 0; font-size: 18px; font-weight: 580; letter-spacing: -.5px; }
.modal-content { padding: 18px 19px; }
.modal-actions { padding: 12px 19px; display: flex; justify-content: flex-end; gap: 7px; border-top: 1px solid var(--hairline); background: #0d0e0f; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }.form-field.full { grid-column: 1 / -1; }.form-field label { display: block; margin-bottom: 5px; color: var(--ink-subtle); font-size: 9px; }.form-field input,.form-field select,.form-field textarea { width: 100%; min-height: 36px; padding: 8px 9px; border: 1px solid #292b30; border-radius: 6px; outline: 0; background: #141516; color: var(--ink-muted); font-size: 10px; }.form-field textarea { min-height: 66px; resize: vertical; }.form-field input:focus,.form-field select:focus,.form-field textarea:focus { border-color: #555d9b; }.impact-box { margin-top: 15px; padding: 12px; border: 1px solid #2a2d3a; border-radius: 7px; background: rgba(94,106,210,.045); }.impact-box > strong { color: #aeb5e9; font-size: 9.5px; }.impact-metrics { margin-top: 9px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }.impact-metrics span { color: var(--ink-tertiary); font-size: 8px; }.impact-metrics b { display:block;margin-top:2px;color:var(--ink-muted);font-size:11px;font-weight:550; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; border: 1px solid var(--hairline); border-radius: 7px; background: var(--hairline); }.detail-grid div { padding: 10px; background: #121315; }.detail-grid span,.detail-grid strong { display:block; }.detail-grid span { color:var(--ink-tertiary);font-size:8px; }.detail-grid strong { margin-top:2px;color:var(--ink-muted);font-size:10px;font-weight:520; }.detail-note { margin-top:12px;padding:11px;border-radius:7px;background:#17181a;color:var(--ink-subtle);font-size:9px;line-height:1.7; }

.search-overlay { position: fixed; inset: 0; z-index: 100; padding-top: 13vh; display: flex; align-items: flex-start; justify-content: center; opacity: 0; visibility: hidden; background: rgba(0,0,0,.62); backdrop-filter: blur(4px); transition: opacity .15s, visibility .15s; }.search-overlay.open { opacity:1;visibility:visible; }
.search-dialog { width: min(520px, calc(100% - 28px)); overflow: hidden; border: 1px solid #34363c; border-radius: 10px; background: #111214; box-shadow: 0 25px 80px rgba(0,0,0,.55); }
.search-input-wrap { height: 53px; padding: 0 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--hairline); }.search-input-wrap svg { color:var(--ink-subtle); }.search-input-wrap input { flex:1;border:0;outline:0;background:transparent;color:var(--ink);font-size:12px; }.search-results { padding:8px; }.search-results > p { margin:4px 8px 7px;color:var(--ink-tertiary);font-size:8px;text-transform:uppercase;letter-spacing:.08em; }.search-results button { width:100%;padding:8px;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;border:0;border-radius:6px;background:transparent;text-align:left;cursor:pointer; }.search-results button:hover { background:#1a1b1e; }.result-icon { width:29px;height:29px;display:grid;place-items:center;border:1px solid #2c2e33;border-radius:6px;background:#17181a;color:#999fa8;font-size:9px; }.search-results strong,.search-results small { display:block; }.search-results strong{color:var(--ink-muted);font-size:10px;font-weight:520}.search-results small{color:var(--ink-tertiary);font-size:8px}.search-results em{color:var(--ink-tertiary);font-style:normal;}

.toast-region { position: fixed; z-index: 110; right: 18px; bottom: 18px; display: grid; gap: 8px; }.toast { min-width: 230px; padding: 10px 12px; display: flex; align-items: center; gap: 8px; border: 1px solid #34363c; border-radius: 7px; background: #17181a; box-shadow: 0 14px 38px rgba(0,0,0,.4); color: var(--ink-muted); font-size: 9.5px; animation: toastIn .22s ease; }.toast i { width:6px;height:6px;border-radius:50%;background:var(--success); }.toast.out { opacity:0;transform:translateY(5px);transition:.2s; }@keyframes toastIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

@media (max-width: 1180px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .kpi-card:nth-child(4), .kpi-card:nth-child(5) { grid-column: span 1; }
  .main-grid { grid-template-columns: 1fr; }
  .map-ops-grid { grid-template-columns:1fr 1fr; }
  .flow-panel { min-height: 340px; }
  .energy-flow { max-width: 430px; margin-inline: auto; width: calc(100% - 36px); }
}

@media (max-width: 900px) {
  :root { --sidebar-width: 224px; }
  .sidebar { transform: translateX(-102%); transition: transform .22s ease; box-shadow: 20px 0 50px rgba(0,0,0,.45); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-close, .menu-button { display: inline-grid !important; }
  .sidebar-backdrop { z-index: 35; }
  .main-content { margin-left: 0; }
  .topbar { padding: 0 18px; }
  .menu-button { margin-right: 8px; }
  .lower-grid { grid-template-columns: 1fr; }
  .health-panel { min-height: 300px; }
}

@media (max-width: 700px) {
  .topbar { height: 58px; padding: 0 12px; }
  .breadcrumb span, .breadcrumb i, .command-search, .primary-button.compact { display: none; }
  .page-wrap { padding: 23px 13px 18px; }
  .page-heading { align-items: flex-start; flex-direction: column; margin-bottom: 18px; }
  .page-heading h1 { font-size: 27px; }
  .heading-controls { width: 100%; }
  .select-control { flex: 1; }
  .alert-banner { align-items: flex-start; flex-wrap: wrap; }
  .alert-copy { width: calc(100% - 45px); flex: auto; }
  .alert-action { margin-left: 40px; }
  .kpi-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .kpi-grid::-webkit-scrollbar { height: 0; }
  .kpi-card { min-width: 210px; scroll-snap-align: start; }
  .metric strong { font-size: 24px; }
  .panel-header { padding-inline: 14px; }
  .asset-live-panel .panel-header { align-items:stretch;flex-direction:column; }
  .chart-head-tools { justify-content:space-between; }
  .asset-live-grid { padding-inline:14px;grid-template-columns:1fr 1fr; }
  .chart-summary { gap: 16px; padding-inline: 14px; overflow-x: auto; }
  .chart-summary div { min-width: 100px; }
  .chart-wrap { height: 190px; }
  .action-grid { grid-template-columns: 1fr; }
  .map-ops-grid { grid-template-columns:1fr; }
  .site-panel { margin-right: 0; }
  .site-table-wrap { padding-bottom: 3px; }
  .health-donut-wrap { gap: 20px; }
  .ai-promo { padding: 25px 22px; grid-template-columns: auto 1fr; gap: 16px; }
  .ai-promo .inverse-button { grid-column: 1 / -1; width: 100%; }
  .dashboard-footer { flex-direction: column; gap: 4px; }
  .form-grid { grid-template-columns: 1fr; }.form-field.full { grid-column:auto; }
}

@media (max-width: 430px) {
  .page-heading p { max-width: 320px; }
  .secondary-button #refreshText { display: none; }
  .secondary-button { width:34px;padding:0;justify-content:center; }
  .asset-live-card { padding:8px; }.asset-live-card>strong{font-size:11px}.stream-clock{display:none}
  .energy-flow { transform: scale(.91); transform-origin: center top; width: 110%; margin-left: -5%; }
  .flow-footer { margin-top: -15px; }
  .health-donut-wrap { align-items: flex-start; }
  .health-donut { width: 98px; height: 98px; padding: 8px; }.health-donut > div { width:82px;height:82px; }.health-donut strong {font-size:17px}
  .health-legend { grid-template-columns: 1fr; gap: 6px; }
  .device-bars { grid-template-columns: 1fr; }
  .ai-promo-mark { width:42px;height:42px; }
  .ai-promo h2 { font-size:17px; }
  .impact-metrics { grid-template-columns:1fr; }
  .detail-grid { grid-template-columns:1fr; }
}

@media (max-width: 1180px) {
  .map-ops-grid{grid-template-columns:1fr}
  .site-energy-map{grid-template-columns:minmax(210px,.7fr) minmax(380px,1.3fr)}
}

@media (max-width: 700px) {
  .site-energy-map{height:auto;grid-template-columns:1fr}
  .site-map-visual{height:225px;border-right:0;border-bottom:1px solid #24262b}
  .site-energy-list{padding:5px}
  .site-energy-row{grid-template-columns:minmax(85px,1.2fr) repeat(4,minmax(45px,.7fr));gap:4px}
  .site-energy-row>span:not(.site-energy-place){padding-left:4px}
}

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