:root {
    color-scheme: dark;
    --bg: #071015;
    --bg-deep: #040a0e;
    --panel: rgba(13, 27, 34, .88);
    --panel-solid: #0d1b22;
    --panel-raised: #12252e;
    --line: rgba(139, 180, 194, .15);
    --line-strong: rgba(139, 180, 194, .28);
    --text: #e8f4f5;
    --muted: #79939c;
    --muted-light: #a8bbc1;
    --cyan: #52d4d8;
    --cyan-soft: rgba(82, 212, 216, .12);
    --solar: #f5b942;
    --load: #ff7070;
    --grid: #5aa9ff;
    --battery: #57d98c;
    --purple: #c196ff;
    --danger: #ff6470;
    --radius: 18px;
    --shadow: 0 24px 70px rgba(0, 0, 0, .25);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { min-height: 100%; background: var(--bg); }

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 15% 0%, rgba(41, 130, 133, .16), transparent 31rem),
        radial-gradient(circle at 90% 20%, rgba(42, 92, 124, .11), transparent 26rem),
        linear-gradient(160deg, var(--bg) 0%, var(--bg-deep) 100%);
    letter-spacing: .005em;
}

button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

.ambient-grid {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .23;
    background-image:
        linear-gradient(rgba(97, 157, 166, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(97, 157, 166, .08) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, black, transparent 75%);
}

.topbar {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 15px clamp(18px, 3vw, 50px);
    border-bottom: 1px solid var(--line);
    background: rgba(5, 13, 17, .72);
    backdrop-filter: blur(16px);
    position: relative;
    z-index: 20;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: inherit;
    text-decoration: none;
}

.brand-mark {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    padding: 10px;
    border: 1px solid rgba(82, 212, 216, .28);
    border-radius: 12px;
    background: var(--cyan-soft);
    box-shadow: inset 0 0 22px rgba(82, 212, 216, .04);
}

.brand-mark i { width: 4px; border-radius: 3px; background: var(--cyan); box-shadow: 0 0 9px rgba(82, 212, 216, .5); }
.brand-mark i:nth-child(1) { height: 9px; }
.brand-mark i:nth-child(2) { height: 20px; }
.brand-mark i:nth-child(3) { height: 14px; }
.brand small, .brand strong { display: block; }
.brand small { margin-bottom: 3px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.brand strong { font-size: 17px; font-weight: 630; }

.topbar-actions { display: flex; align-items: center; gap: 13px; }
.connection-badge { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted-light); font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.025); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 8px rgba(255, 100, 112, .55); }
.connection-badge.is-connecting .status-dot { background: var(--solar); animation: statusPulse 1s infinite; }
.connection-badge.is-online { border-color: rgba(87,217,140,.25); color: #bcebd0; background: rgba(87,217,140,.08); }
.connection-badge.is-online .status-dot { background: var(--battery); box-shadow: 0 0 9px rgba(87,217,140,.65); }
.system-clock { min-width: 73px; color: var(--muted-light); font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; letter-spacing: .08em; }
.icon-button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); transition: .2s ease; }
.icon-button:hover { border-color: rgba(82,212,216,.4); background: var(--cyan-soft); transform: translateY(-1px); }
.icon-button svg { width: 17px; fill: var(--muted-light); }

.dashboard-shell { width: min(1700px, 100%); margin: 0 auto; padding: 28px clamp(18px, 3vw, 50px) 38px; }

.summary-grid { display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.metric-card { min-width: 0; position: relative; overflow: hidden; padding: 17px 18px 16px; border: 1px solid var(--line); border-radius: 15px; color: inherit; text-decoration: none; background: linear-gradient(145deg, rgba(18,37,46,.9), rgba(10,22,28,.92)); box-shadow: inset 0 1px rgba(255,255,255,.02); transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.metric-card:hover, .metric-card:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent, var(--cyan)) 38%, transparent); background: linear-gradient(145deg, rgba(21,43,52,.96), rgba(11,25,31,.96)); outline: none; }
.metric-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--accent, var(--cyan)); opacity: .85; box-shadow: 0 0 13px var(--accent, var(--cyan)); }
.metric-card::after { content: ""; position: absolute; width: 90px; height: 90px; right: -55px; top: -55px; border-radius: 50%; background: var(--accent, var(--cyan)); filter: blur(25px); opacity: .08; }
.metric-solar { --accent: var(--solar); }
.metric-load { --accent: var(--load); }
.metric-grid { --accent: var(--grid); }
.metric-battery, .metric-soc { --accent: var(--battery); }
.metric-balance { --accent: var(--cyan); }
.metric-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--muted-light); font-size: 10px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.metric-card[href] .metric-heading::after { content: "↗"; margin-left: auto; color: var(--accent, var(--cyan)); opacity: .45; font-size: 10px; transition: opacity .2s, transform .2s; }
.metric-card[href]:hover .metric-heading::after { opacity: 1; transform: translate(1px,-1px); }
.metric-icon { display: grid; place-items: center; width: 28px; height: 20px; border-radius: 5px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); font-size: 7px; letter-spacing: .04em; }
.metric-value { display: block; overflow: hidden; color: #f4fbfc; font-family: "SFMono-Regular", Consolas, monospace; font-size: clamp(23px, 2vw, 31px); font-weight: 550; letter-spacing: -.07em; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.metric-detail { display: block; overflow: hidden; margin-top: 7px; color: var(--muted); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.metric-card.has-value .metric-value { text-shadow: 0 0 20px color-mix(in srgb, var(--accent) 22%, transparent); }

.operations-grid { display: grid; grid-template-columns: minmax(540px, 1.3fr) minmax(400px, .9fr); gap: 16px; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(14,30,37,.94), rgba(8,19,24,.94)); box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.02); }
.panel-header { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.panel-header h2, .section-header h2 { margin: 3px 0 0; font-size: 17px; font-weight: 620; letter-spacing: -.015em; }
.eyebrow { color: var(--cyan); font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.live-indicator { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.live-indicator i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px rgba(82,212,216,.7); animation: statusPulse 2s infinite; }
.window-label, .panel-tag { padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: rgba(255,255,255,.02); font-family: "SFMono-Regular", Consolas, monospace; font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }

.flow-stage { min-height: 440px; position: relative; display: grid; place-items: center; overflow: hidden; }
.flow-stage::before { content: ""; position: absolute; left: 50%; top: 50%; width: 45%; aspect-ratio: 1; transform: translate(-50%,-47%); border-radius: 50%; background: rgba(82,212,216,.025); box-shadow: 0 0 80px rgba(82,212,216,.07); }
.flow-map { position: relative; width: 100%; max-height: 440px; }
.map-grid path { fill: none; stroke: rgba(132,179,187,.04); stroke-width: 1; }
.flow-track { fill: none; stroke: rgba(127,163,174,.13); stroke-width: 3; stroke-linecap: round; }
.flow-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 4 10; opacity: 0; }
.flow-line.is-active { opacity: 1; animation: flowForward .7s linear infinite; filter: drop-shadow(0 0 5px currentColor); }
.flow-line.is-reverse { animation-direction: reverse; }
.flow-solar { stroke: var(--solar); color: var(--solar); }
.flow-grid { stroke: var(--grid); color: var(--grid); }
.flow-battery { stroke: var(--battery); color: var(--battery); }
.flow-node rect { fill: rgba(13,29,36,.96); stroke: rgba(133,174,185,.22); stroke-width: 1; }
.flow-node .node-title { fill: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.flow-node .node-value { fill: var(--text); font-family: "SFMono-Regular", Consolas, monospace; font-size: 16px; font-weight: 600; letter-spacing: -.04em; }
.node-symbol { fill: currentColor; }
.node-symbol.stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.node-solar { color: var(--solar); }
.node-grid { color: var(--grid); }
.node-battery { color: var(--battery); }
.node-house { color: var(--load); filter: url(#nodeGlow); }
.node-house rect { stroke: rgba(255,112,112,.32); fill: rgba(17,31,38,.98); }
.house-symbol { fill: none; stroke: var(--load); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.flow-label rect { fill: #09141a; stroke: var(--line); }
.flow-label text { fill: var(--muted); font-size: 7px; font-weight: 800; letter-spacing: .08em; }
.flow-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: rgba(7,17,22,.78); backdrop-filter: blur(3px); transition: opacity .4s, visibility .4s; }
.flow-empty.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.flow-empty strong { margin-top: 8px; font-size: 13px; }
.flow-empty small { color: var(--muted); font-size: 10px; }
.waiting-radar { width: 42px; height: 42px; display: grid; place-items: center; position: relative; border: 1px solid rgba(82,212,216,.2); border-radius: 50%; }
.waiting-radar::before, .waiting-radar::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(82,212,216,.14); border-radius: 50%; }
.waiting-radar::after { inset: -1px; border-color: rgba(82,212,216,.25); animation: radarPing 1.8s ease-out infinite; }
.waiting-radar i { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 11px var(--cyan); }

.chart-panel { min-width: 0; }
.chart-legend { min-height: 47px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 10px 19px 7px; }
.legend-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted-light); background: transparent; cursor: pointer; font-size: 9px; font-weight: 700; text-transform: uppercase; transition: .18s ease; }
.legend-toggle i { width: 7px; height: 7px; border-radius: 2px; background: var(--series-color); box-shadow: 0 0 7px color-mix(in srgb, var(--series-color) 40%, transparent); }
.legend-toggle.is-muted { opacity: .38; }
.chart-wrap { height: 317px; position: relative; padding: 3px 14px 14px; }
.chart-wrap canvas { display: block; width: 100%; height: 100%; }
.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 10px; pointer-events: none; transition: opacity .25s; }
.chart-empty.is-hidden { opacity: 0; }

.solar-day-panel { margin-top: 16px; }
.solar-day-summary { display: grid; grid-template-columns: auto auto; align-items: center; gap: 3px 15px; text-align: right; }
.solar-day-summary span { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.solar-day-summary strong { color: var(--solar); font-family: "SFMono-Regular", Consolas, monospace; font-size: 17px; font-weight: 570; }
.solar-day-summary a { grid-column: 1 / -1; color: var(--cyan); font-size: 9px; text-decoration: none; }
.solar-day-legend { min-height: 47px; display: flex; flex-wrap: wrap; align-items: center; gap: 13px; padding: 10px 22px 5px; }
.solar-day-legend > span { display: inline-flex; align-items: center; gap: 7px; color: var(--muted-light); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.solar-day-legend i { width: 8px; height: 8px; border-radius: 2px; box-shadow: 0 0 7px rgba(255,255,255,.12); }
.solar-day-chart-wrap { height: 330px; position: relative; padding: 2px 14px 5px; }
.solar-day-chart-wrap canvas, .history-chart-wrap canvas { width: 100%; height: 100%; display: block; }
.solar-day-footer, .history-chart-footer { min-height: 41px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 10px 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }
.solar-day-footer span:last-child { display: inline-flex; align-items: center; gap: 7px; }
.solar-day-footer i { width: 17px; height: 2px; background: var(--cyan); box-shadow: 0 0 6px rgba(82,212,216,.6); }
.chart-tooltip { position: absolute; z-index: 8; min-width: 145px; display: grid; gap: 7px; padding: 10px 11px; border: 1px solid var(--line-strong); border-radius: 9px; color: var(--muted-light); background: rgba(5,14,18,.95); box-shadow: 0 12px 30px rgba(0,0,0,.35); pointer-events: none; font-size: 9px; backdrop-filter: blur(10px); }
.chart-tooltip strong { color: var(--text); font-size: 10px; }
.chart-tooltip > span { display: flex; justify-content: space-between; gap: 16px; }
.chart-tooltip > span i { color: var(--muted-light); font-style: normal; }
.chart-tooltip > span i::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 2px; background: var(--tooltip-color, var(--cyan)); }
.chart-tooltip b { color: var(--text); font-family: "SFMono-Regular", Consolas, monospace; font-weight: 550; }
.chart-tooltip .tooltip-total { padding-top: 6px; border-top: 1px solid var(--line); }

/* History */
.history-shell { width: min(1500px,100%); margin: 0 auto; padding: 42px clamp(18px,4vw,54px) 70px; }
.history-hero { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 25px; }
.history-hero h1 { margin: 6px 0 7px; font-size: clamp(31px,5vw,50px); font-weight: 570; letter-spacing: -.055em; }
.history-hero p { margin: 0; color: var(--muted); font-size: 12px; }
.date-navigator { display: flex; align-items: stretch; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: rgba(10,23,29,.76); }
.date-navigator button { min-width: 38px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted-light); background: rgba(255,255,255,.025); cursor: pointer; }
.date-navigator button:hover:not(:disabled) { border-color: rgba(82,212,216,.35); color: var(--text); }
.date-navigator button:disabled { opacity: .3; cursor: default; }
.date-navigator label { display: grid; gap: 2px; padding: 3px 8px; }
.date-navigator label span { color: var(--muted); font-size: 7px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.date-navigator input { border: 0; outline: 0; color: var(--text); background: transparent; font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; }
.date-navigator .today-button { padding: 0 11px; color: var(--cyan); font-size: 9px; font-weight: 750; text-transform: uppercase; }
.history-stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 16px; }
.history-stat { position: relative; overflow: hidden; min-height: 93px; display: flex; flex-direction: column; justify-content: center; gap: 9px; padding: 17px 19px; border: 1px solid var(--line); border-radius: 13px; background: rgba(13,28,35,.82); }
.history-stat::before { content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; width: 2px; background: var(--history-color); box-shadow: 0 0 8px var(--history-color); }
.history-stat span { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.history-stat strong { color: var(--text); font-family: "SFMono-Regular", Consolas, monospace; font-size: clamp(19px,2.5vw,27px); font-weight: 560; }
.history-stat.is-loading { opacity: .55; }
.history-chart-wrap { height: min(54vh,550px); min-height: 390px; position: relative; padding: 5px 14px 8px; }
.history-chart-panel { box-shadow: 0 24px 80px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.02); }


.sources-section { margin-top: 30px; }
.section-header { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin-bottom: 14px; }
.section-header p { max-width: 650px; margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.source-count { padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.source-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 11px; }
.source-card { --source-color: var(--cyan); position: relative; overflow: hidden; min-height: 140px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(13,28,35,.82); }
.source-card::after { content: ""; position: absolute; right: -30px; bottom: -45px; width: 100px; height: 100px; border-radius: 50%; background: var(--source-color); filter: blur(40px); opacity: .05; }
.source-card-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.source-type { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.source-type i { width: 7px; height: 7px; border-radius: 50%; background: var(--source-color); box-shadow: 0 0 8px color-mix(in srgb, var(--source-color) 55%, transparent); }
.source-state { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.source-state::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #54666c; }
.source-card.is-live .source-state { color: #9bd4b3; }
.source-card.is-live .source-state::before { background: var(--battery); box-shadow: 0 0 6px var(--battery); }
.source-card.is-stale .source-state { color: #e9c87d; }
.source-card.is-stale .source-state::before { background: var(--solar); }
.source-name { position: relative; z-index: 1; margin: 16px 0 4px; color: var(--muted-light); font-size: 11px; font-weight: 650; }
.source-power { position: relative; z-index: 1; color: var(--text); font-family: "SFMono-Regular", Consolas, monospace; font-size: 25px; font-weight: 550; letter-spacing: -.06em; }
.source-meta { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; color: var(--muted); font-family: "SFMono-Regular", Consolas, monospace; font-size: 8px; }
.source-soc { color: var(--battery); }

.dashboard-footer { display: flex; justify-content: space-between; gap: 18px; padding: 15px clamp(18px,3vw,50px); border-top: 1px solid var(--line); color: var(--muted); background: rgba(4,10,14,.55); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.dashboard-footer strong { margin-left: 5px; color: var(--muted-light); font-family: "SFMono-Regular", Consolas, monospace; font-weight: 500; text-transform: none; }
.noscript { position: fixed; inset: auto 15px 15px; z-index: 50; padding: 12px; border: 1px solid rgba(255,100,112,.3); border-radius: 10px; color: #ffc2c7; background: #2a1116; text-align: center; }

/* Settings */
.settings-shell { width: min(1180px, 100%); margin: 0 auto; padding: 46px clamp(18px,4vw,54px) 80px; }
.settings-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin-bottom: 28px; }
.settings-intro h1 { margin: 5px 0 8px; font-size: clamp(28px,4vw,43px); font-weight: 590; letter-spacing: -.05em; }
.settings-intro p { margin: 0; color: var(--muted); font-size: 13px; }
.unsaved-badge { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid rgba(245,185,66,.25); border-radius: 8px; color: #e8c77e; background: rgba(245,185,66,.06); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.unsaved-badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--solar); }
.settings-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 15px; }
.settings-panel .panel-header > div { display: flex; align-items: center; gap: 12px; }
.step-number { color: var(--cyan); font-family: "SFMono-Regular", Consolas, monospace; font-size: 10px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 15px; padding: 22px; }
.field { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.field-wide { grid-column: 1 / -1; }
.field > span:first-child { color: var(--muted-light); font-size: 10px; font-weight: 700; }
.field small { color: var(--muted); font-size: 9px; line-height: 1.45; }
.field input, .field select { min-width: 0; width: 100%; height: 41px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 8px; outline: none; color: var(--text); background: rgba(3,11,15,.62); font-size: 11px; transition: border-color .18s, box-shadow .18s; }
.field input:focus, .field select:focus { border-color: rgba(82,212,216,.58); box-shadow: 0 0 0 3px rgba(82,212,216,.08); }
.field input::placeholder { color: #50656d; }
.field input:invalid:not(:placeholder-shown) { border-color: rgba(255,100,112,.55); }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 53px; }
.text-button { position: absolute; right: 6px; top: 6px; height: 29px; padding: 0 7px; border: 0; color: var(--cyan); background: transparent; cursor: pointer; font-size: 9px; font-weight: 750; }
.toggle-row { position: relative; min-height: 56px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.018); cursor: pointer; }
.toggle-row span { display: flex; flex-direction: column; gap: 3px; }
.toggle-row strong { color: var(--muted-light); font-size: 10px; }
.toggle-row small { color: var(--muted); font-size: 9px; }
.toggle-input, .mini-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-ui, .mini-toggle i { width: 38px; height: 21px; flex: 0 0 auto; position: relative; border: 1px solid var(--line-strong); border-radius: 999px; background: #081218; transition: .2s; }
.toggle-ui::after, .mini-toggle i::after { content: ""; position: absolute; width: 15px; height: 15px; left: 2px; top: 2px; border-radius: 50%; background: #698087; transition: .2s; }
.toggle-input:checked + .toggle-ui, .mini-toggle input:checked + i { border-color: rgba(82,212,216,.45); background: rgba(82,212,216,.16); }
.toggle-input:checked + .toggle-ui::after, .mini-toggle input:checked + i::after { transform: translateX(17px); background: var(--cyan); box-shadow: 0 0 8px rgba(82,212,216,.6); }
.input-unit { position: relative; }
.input-unit input { padding-right: 42px; }
.input-unit i { position: absolute; right: 11px; top: 13px; color: var(--muted); font-size: 9px; font-style: normal; }
.settings-note { padding: 15px; border-left: 2px solid rgba(82,212,216,.45); border-radius: 0 8px 8px 0; background: rgba(82,212,216,.045); }
.settings-note strong { font-size: 10px; }
.settings-note p { margin: 6px 0 0; color: var(--muted); font-size: 9px; line-height: 1.55; }

.sources-editor { margin-top: 40px; }
.button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border: 1px solid transparent; border-radius: 9px; text-decoration: none; cursor: pointer; font-size: 10px; font-weight: 750; letter-spacing: .02em; transition: .2s ease; }
.button:hover { transform: translateY(-1px); }
.button-secondary { border-color: var(--line-strong); color: var(--muted-light); background: rgba(255,255,255,.025); }
.button-secondary:hover { border-color: rgba(82,212,216,.38); color: var(--text); background: rgba(82,212,216,.06); }
.button-primary { color: #061316; background: var(--cyan); box-shadow: 0 7px 22px rgba(82,212,216,.18); }
.button-primary:hover { background: #6be1e4; box-shadow: 0 8px 27px rgba(82,212,216,.28); }
.button:disabled { opacity: .55; cursor: wait; transform: none; }
.source-editor-list { display: grid; gap: 11px; }
.source-editor-card { border: 1px solid var(--line); border-radius: 14px; background: rgba(13,28,35,.86); transition: border-color .2s; }
.source-editor-card:focus-within { border-color: rgba(82,212,216,.27); }
.source-editor-head { min-height: 62px; display: flex; align-items: center; gap: 12px; padding: 11px 15px; border-bottom: 1px solid var(--line); }
.drag-handle { color: #455b63; letter-spacing: -2px; writing-mode: vertical-lr; user-select: none; }
.source-identity { min-width: 0; flex: 1; display: flex; align-items: center; gap: 11px; }
.source-color-preview { width: 8px; height: 30px; border-radius: 3px; background: var(--source-color, var(--cyan)); box-shadow: 0 0 9px color-mix(in srgb, var(--source-color, var(--cyan)) 35%, transparent); }
.source-identity strong, .source-identity small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.source-identity strong { color: var(--muted-light); font-size: 11px; }
.source-identity small { max-width: min(60vw, 650px); margin-top: 3px; color: var(--muted); font-family: "SFMono-Regular", Consolas, monospace; font-size: 8px; }
.source-editor-controls { display: flex; align-items: center; gap: 13px; }
.mini-toggle { position: relative; display: flex; cursor: pointer; }
.mini-toggle i { width: 34px; height: 19px; }
.mini-toggle i::after { width: 13px; height: 13px; }
.mini-toggle input:checked + i::after { transform: translateX(15px); }
.remove-source { width: 29px; height: 29px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: transparent; cursor: pointer; font-size: 18px; line-height: 1; }
.remove-source:hover { border-color: rgba(255,100,112,.4); color: #ff969e; background: rgba(255,100,112,.06); }
.source-fields { display: grid; grid-template-columns: 1fr 1.25fr .8fr .7fr; gap: 14px 12px; padding: 16px; }
.topic-field { grid-column: span 3; }
.soc-field { grid-column: span 3; }
.unit-field { grid-column: span 1; }
.include-total-field { grid-column: span 1; position: relative; min-height: 41px; display: flex; align-items: center; gap: 9px; align-self: end; cursor: pointer; }
.include-total-field input { position: absolute; opacity: 0; pointer-events: none; }
.include-total-field > i { width: 18px; height: 18px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 5px; background: rgba(3,11,15,.62); }
.include-total-field input:checked + i { border-color: rgba(82,212,216,.5); background: rgba(82,212,216,.15); }
.include-total-field input:checked + i::after { content: "✓"; color: var(--cyan); font-size: 11px; font-style: normal; font-weight: 800; }
.include-total-field span { display: flex; flex-direction: column; gap: 2px; }
.include-total-field strong { color: var(--muted-light); font-size: 9px; }
.include-total-field small { color: var(--muted); font-size: 8px; line-height: 1.3; }
.field em { color: var(--muted); font-size: 8px; font-style: normal; font-weight: 500; }
.color-field > span:last-child { display: grid; grid-template-columns: 42px 1fr; }
.color-field input[type="color"] { padding: 5px; border-radius: 8px 0 0 8px; }
.color-field input[type="text"] { border-left: 0; border-radius: 0 8px 8px 0; font-family: "SFMono-Regular", Consolas, monospace; text-transform: uppercase; }
.empty-editor { min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px dashed var(--line-strong); border-radius: 14px; color: var(--muted); }
.empty-editor strong { color: var(--muted-light); font-size: 12px; }
.empty-editor span { font-size: 10px; }
.settings-actions { position: sticky; z-index: 10; bottom: 14px; display: flex; align-items: center; justify-content: flex-end; gap: 9px; margin-top: 24px; padding: 12px; border: 1px solid var(--line-strong); border-radius: 13px; background: rgba(9,20,25,.88); box-shadow: 0 18px 50px rgba(0,0,0,.35); backdrop-filter: blur(16px); }
.save-status { flex: 1; padding-left: 4px; color: var(--muted); font-size: 10px; }
.save-status.is-error { color: #ff9ca3; }
.save-status.is-success { color: #8be1ae; }
.button-spinner { display: none; width: 13px; height: 13px; border: 2px solid rgba(6,19,22,.3); border-top-color: #061316; border-radius: 50%; animation: spin .6s linear infinite; }
.button.is-loading .button-label { display: none; }
.button.is-loading .button-spinner { display: block; }
.alert { margin-bottom: 18px; padding: 12px 14px; border-radius: 9px; font-size: 11px; }
.alert-error { border: 1px solid rgba(255,100,112,.3); color: #ffc3c7; background: rgba(255,100,112,.07); }
.fatal-state { min-height: calc(100vh - 82px); display: grid; place-items: center; padding: 25px; }
.fatal-state-card { max-width: 480px; padding: 34px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); }
.fatal-state-card h1 { margin: 8px 0; }
.fatal-state-card p { margin: 0 0 22px; color: var(--muted); line-height: 1.6; }

/* Dashboard intelligence */
.topbar-intelligence-link { min-height: 34px; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.panel-link { color: var(--cyan); font-size: 10px; font-weight: 700; text-decoration: none; }
.dashboard-intelligence-panel { margin-top: 16px; }
.dashboard-insight-grid { display: grid; grid-template-columns: repeat(6, minmax(130px, 1fr)); }
.dashboard-insight { --insight-color: var(--cyan); min-width: 0; position: relative; padding: 18px 19px; border-right: 1px solid var(--line); }
.dashboard-insight:last-child { border-right: 0; }
.dashboard-insight::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 2px; background: var(--insight-color); opacity: .7; box-shadow: 0 0 8px color-mix(in srgb, var(--insight-color) 45%, transparent); }
.dashboard-insight span, .dashboard-insight small { display: block; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.dashboard-insight span { font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.dashboard-insight strong { display: block; overflow: hidden; margin: 9px 0 6px; color: var(--text); font-family: "SFMono-Regular", Consolas, monospace; font-size: clamp(16px,1.5vw,22px); font-weight: 560; letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-insight small { font-size: 8px; }
.dashboard-insight.is-loading { opacity: .48; }
.insight-solar, .insight-forecast { --insight-color: var(--solar); }
.insight-battery, .insight-healthy { --insight-color: var(--battery); }
.insight-carbon, .insight-cost { --insight-color: var(--cyan); }
.insight-warning, .insight-critical { --insight-color: var(--danger); }
.dashboard-alert-strip { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px; padding: 12px 18px; border-top: 1px solid rgba(255,100,112,.2); color: #ffc4c8; background: rgba(255,100,112,.055); font-size: 9px; }
.dashboard-alert-strip strong { text-transform: uppercase; letter-spacing: .08em; }
.dashboard-alert-strip span { color: var(--muted-light); }
.dashboard-alert-strip a { color: #ff9da4; text-decoration: none; }

/* Intelligence page */
.intelligence-shell { width: min(1600px,100%); margin: 0 auto; padding: 38px clamp(18px,3.6vw,56px) 75px; }
.intelligence-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 18px; }
.intelligence-hero h1 { margin: 6px 0 7px; font-size: clamp(33px,5vw,52px); font-weight: 570; letter-spacing: -.06em; }
.intelligence-hero p { margin: 0; color: var(--muted); font-size: 12px; }
.intelligence-controls { display: grid; grid-template-columns: auto auto auto; align-items: center; gap: 8px; }
.period-tabs { display: flex; gap: 3px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: rgba(10,23,29,.76); }
.period-tabs button { min-height: 34px; padding: 0 11px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; cursor: pointer; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.period-tabs button:hover { color: var(--text); }
.period-tabs button.is-active { color: #061316; background: var(--cyan); box-shadow: 0 5px 16px rgba(82,212,216,.17); }
.compact-date-navigator { height: 44px; padding: 4px; }
.compact-date-navigator label { padding-block: 1px; }
.export-button { height: 44px; }
.intelligence-status { margin-bottom: 13px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: rgba(255,255,255,.018); font-size: 9px; }
.intelligence-status.is-ready { border-color: rgba(87,217,140,.18); color: #a9dabe; background: rgba(87,217,140,.04); }
.intelligence-status.is-error { border-color: rgba(255,100,112,.28); color: #ffadb3; background: rgba(255,100,112,.05); }
.intelligence-kpis { display: grid; grid-template-columns: repeat(8,minmax(120px,1fr)); gap: 9px; margin-bottom: 15px; }
.intelligence-kpi { --kpi-color: var(--cyan); min-width: 0; position: relative; overflow: hidden; min-height: 111px; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: rgba(13,28,35,.84); }
.intelligence-kpi::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 2px; background: var(--kpi-color); box-shadow: 0 0 9px var(--kpi-color); }
.intelligence-kpi span, .intelligence-kpi small { display: block; overflow: hidden; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.intelligence-kpi span { font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.intelligence-kpi strong { display: block; overflow: hidden; margin: 12px 0 9px; color: var(--text); font-family: "SFMono-Regular", Consolas, monospace; font-size: clamp(18px,1.7vw,25px); font-weight: 560; letter-spacing: -.05em; white-space: nowrap; text-overflow: ellipsis; }
.intelligence-kpi small { font-size: 8px; }
.intelligence-kpi.metric-solar { --kpi-color: var(--solar); }
.intelligence-kpi.metric-load { --kpi-color: var(--load); }
.intelligence-kpi.metric-grid { --kpi-color: var(--grid); }
.intelligence-kpi.metric-health { --kpi-color: var(--battery); }
.intelligence-kpi.metric-warning { --kpi-color: var(--danger); }
.intelligence-kpi.is-loading { opacity: .5; }
.intelligence-chart-grid { display: grid; grid-template-columns: 1.35fr .85fr; gap: 15px; margin-top: 15px; }
.intelligence-chart-panel { min-width: 0; overflow: hidden; }
.intelligence-legend { min-height: 42px; display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 8px 22px 3px; }
.intelligence-legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted-light); font-size: 8px; font-weight: 750; text-transform: uppercase; }
.intelligence-legend i { width: 8px; height: 8px; border-radius: 2px; }
.intelligence-chart-wrap { height: 350px; position: relative; padding: 5px 12px 7px; }
.intelligence-chart-wrap canvas { width: 100%; height: 100%; display: block; }
.intelligence-services-grid { grid-template-columns: 1fr 1fr; }
.service-summary { min-height: 84px; display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; padding: 11px 18px 2px; }
.service-summary > div { min-width: 0; padding: 10px; border-right: 1px solid var(--line); }
.service-summary > div:last-child { border-right: 0; }
.service-summary span, .service-summary strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.service-summary span { color: var(--muted); font-size: 8px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.service-summary strong { margin-top: 8px; color: var(--text); font-family: "SFMono-Regular", Consolas, monospace; font-size: 14px; font-weight: 560; }
.service-summary .service-message { grid-column: 1 / -1; display: grid; place-items: center; min-height: 65px; border-right: 0; color: var(--muted); font-size: 10px; }
.service-chart-wrap { height: 270px; }
.intelligence-detail-grid { grid-template-columns: 1fr 1fr; }
.intelligence-detail-panel { min-width: 0; overflow: hidden; }
.battery-intelligence-list, .health-overview { min-height: 230px; padding: 16px 18px; }
.battery-intelligence-list { display: grid; gap: 10px; }
.battery-intelligence-card { --battery-color: var(--battery); padding: 14px; border: 1px solid var(--line); border-left: 2px solid var(--battery-color); border-radius: 10px; background: rgba(255,255,255,.018); }
.battery-intelligence-card > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.battery-intelligence-card > div:first-child strong { font-size: 11px; }
.battery-intelligence-card > div:first-child span { color: var(--battery-color); font-family: "SFMono-Regular", Consolas, monospace; font-size: 15px; }
.battery-mini-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 13px; }
.battery-mini-grid div { min-width: 0; }
.battery-mini-grid span, .battery-mini-grid b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.battery-mini-grid span { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.battery-mini-grid b { margin-top: 5px; color: var(--muted-light); font-family: "SFMono-Regular", Consolas, monospace; font-size: 10px; font-weight: 550; }
.charge-origin-note, .health-footer { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: rgba(82,212,216,.025); font-size: 9px; }
.detail-empty { min-height: 190px; display: grid; place-items: center; color: var(--muted); font-size: 10px; }
.health-badge { padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.health-badge.is-healthy { border-color: rgba(87,217,140,.25); color: #a6dfbc; background: rgba(87,217,140,.06); }
.health-badge.is-warning { border-color: rgba(245,185,66,.28); color: #e9c879; background: rgba(245,185,66,.06); }
.health-badge.is-critical { border-color: rgba(255,100,112,.3); color: #ffabb1; background: rgba(255,100,112,.06); }
.active-alert-list { display: grid; gap: 7px; margin-bottom: 11px; }
.active-alert { padding: 10px 11px; border-left: 2px solid var(--solar); border-radius: 0 7px 7px 0; color: var(--muted-light); background: rgba(245,185,66,.045); font-size: 9px; }
.active-alert.is-critical { border-color: var(--danger); background: rgba(255,100,112,.055); }
.health-source-list { display: grid; gap: 1px; margin-bottom: 11px; }
.health-source-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border-bottom: 1px solid var(--line); color: var(--muted-light); font-size: 9px; }
.health-source-row strong { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 8px; text-transform: uppercase; }
.health-source-row strong::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #596d74; }
.health-source-row.is-live strong { color: #91cda8; }
.health-source-row.is-live strong::before { background: var(--battery); box-shadow: 0 0 6px var(--battery); }
.health-source-row.is-stale strong { color: #e2bf70; }
.health-source-row.is-stale strong::before { background: var(--solar); }
.metric-method-note { margin-top: 15px; padding: 15px 18px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: rgba(255,255,255,.015); font-size: 9px; line-height: 1.55; }
.metric-method-note strong { color: var(--muted-light); }
.metric-method-note p { margin: 5px 0 0; }

/* Intelligence settings */
.intelligence-settings-grid { margin-top: 15px; }
.octopus-fields { display: none; grid-template-columns: 1fr 1fr; gap: 15px; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: rgba(90,169,255,.035); }
.octopus-fields.is-active { display: grid; }
.time-range { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 7px; }
.time-range i { color: var(--muted); font-size: 9px; font-style: normal; }
.source-fields .solar-config-field, .source-fields .battery-config-field { grid-column: span 1; }

@keyframes statusPulse { 50% { opacity: .35; transform: scale(.78); } }
@keyframes flowForward { to { stroke-dashoffset: -14; } }
@keyframes radarPing { from { opacity: .8; transform: scale(.5); } to { opacity: 0; transform: scale(1.4); } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1220px) {
    .summary-grid { grid-template-columns: repeat(3, 1fr); }
    .operations-grid { grid-template-columns: 1fr; }
    .chart-wrap { height: 350px; }
    .dashboard-insight-grid { grid-template-columns: repeat(3,1fr); }
    .dashboard-insight:nth-child(3) { border-right: 0; }
    .dashboard-insight:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
    .intelligence-hero { align-items: flex-start; flex-direction: column; }
    .intelligence-controls { width: 100%; grid-template-columns: auto 1fr auto; }
    .intelligence-kpis { grid-template-columns: repeat(4,1fr); }
}

@media (max-width: 850px) {
    .settings-grid { grid-template-columns: 1fr; }
    .source-fields { grid-template-columns: 1fr 1fr; }
    .topic-field, .soc-field { grid-column: span 2; }
    .unit-field { grid-column: span 1; }
    .history-hero { align-items: flex-start; flex-direction: column; }
    .history-stat-grid { grid-template-columns: 1fr 1fr; }
    .intelligence-controls { grid-template-columns: 1fr; }
    .period-tabs { justify-content: stretch; }
    .period-tabs button { flex: 1; }
    .compact-date-navigator { width: 100%; }
    .export-button { width: 100%; }
    .intelligence-chart-grid, .intelligence-services-grid, .intelligence-detail-grid { grid-template-columns: 1fr; }
    .octopus-fields { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
    .topbar { min-height: 70px; padding-block: 12px; }
    .brand-mark { width: 37px; height: 37px; }
    .brand small { display: none; }
    .brand strong { font-size: 14px; }
    .system-clock { display: none; }
    .connection-badge { padding: 0 9px; }
    .topbar-intelligence-link { display: none; }
    .dashboard-shell { padding-top: 18px; }
    .summary-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .metric-card { padding: 14px; }
    .metric-value { font-size: 22px; }
    .metric-icon { display: none; }
    .flow-stage { min-height: 330px; }
    .flow-map { transform: scale(1.06); }
    .chart-wrap { height: 300px; }
    .solar-day-chart-wrap { height: 300px; padding-inline: 5px; }
    .solar-day-summary { grid-template-columns: 1fr; gap: 2px; }
    .solar-day-summary a { display: none; }
    .solar-day-footer, .history-chart-footer { align-items: flex-start; flex-direction: column; }
    .panel-header { min-height: 67px; padding: 15px 17px; }
    .section-header { align-items: flex-start; }
    .dashboard-footer { flex-direction: column; gap: 7px; }
    .settings-shell { padding-top: 30px; }
    .settings-intro { align-items: flex-start; flex-direction: column; }
    .settings-intro h1 { font-size: 30px; }
    .settings-page .topbar .button { padding: 0 10px; font-size: 9px; }
    .source-fields { grid-template-columns: 1fr; }
    .topic-field, .soc-field, .unit-field, .include-total-field { grid-column: span 1; }
    .source-identity small { max-width: 48vw; }
    .settings-actions { flex-wrap: wrap; }
    .save-status { flex-basis: 100%; min-height: 16px; }
    .history-shell { padding-top: 28px; }
    .date-navigator { width: 100%; }
    .date-navigator label { flex: 1; }
    .history-stat-grid { gap: 8px; }
    .history-stat { min-height: 82px; padding: 13px; }
    .history-chart-wrap { height: 390px; min-height: 0; padding-inline: 4px; }
    .dashboard-insight-grid { grid-template-columns: repeat(2,1fr); }
    .dashboard-insight { min-height: 100px; padding: 15px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .dashboard-insight:nth-child(2n) { border-right: 0; }
    .dashboard-insight:nth-last-child(-n+2) { border-bottom: 0; }
    .dashboard-insight:nth-child(3) { border-right: 1px solid var(--line); }
    .dashboard-alert-strip { grid-template-columns: 1fr; gap: 6px; }
    .intelligence-shell { padding-top: 26px; }
    .intelligence-hero h1 { font-size: 34px; }
    .intelligence-kpis { grid-template-columns: repeat(2,1fr); gap: 7px; }
    .intelligence-kpi { min-height: 98px; padding: 13px; }
    .intelligence-kpi strong { font-size: 19px; }
    .intelligence-chart-wrap { height: 310px; padding-inline: 3px; }
    .service-summary { grid-template-columns: 1fr; padding-inline: 13px; }
    .service-summary > div { border-right: 0; border-bottom: 1px solid var(--line); }
    .service-summary > div:last-child { border-bottom: 0; }
    .service-chart-wrap { height: 260px; }
    .battery-mini-grid { grid-template-columns: repeat(2,1fr); }
    .intelligence-page .topbar .button { padding: 0 9px; font-size: 8px; }
    .time-range { grid-template-columns: 1fr; }
    .time-range i { text-align: center; }
}

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