:root { --i-bg: rgba(19,22,28,.70); --i-border: rgba(255,255,255,.15); --i-text: #f4f5f8; --i-muted: rgba(244,245,248,.62); }
:root[data-theme="light"] { --i-bg: rgba(255,255,255,.56); --i-border: rgba(30,35,45,.12); --i-text:#1d2027; --i-muted:rgba(29,32,39,.62); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --i-bg: rgba(255,255,255,.56); --i-border: rgba(30,35,45,.12); --i-text:#1d2027; --i-muted:rgba(29,32,39,.62); } }
body { margin:0; min-height:100vh; color:var(--i-text); font-family:var(--font-apple); background:#11151c url('/static/wallpaper_dark.jpg') center/cover fixed; }
.insights-shell { max-width:1200px; margin:auto; padding:28px 24px 42px; }
.page-head { margin:0 0 18px; }.page-head h1 { margin:0; font-size:1.45rem; }.page-head small { font-size:.72rem; color:var(--i-muted); margin-left:6px; }
.now-card,.card { background:var(--i-bg); backdrop-filter:blur(26px) saturate(180%); -webkit-backdrop-filter:blur(26px) saturate(180%); border:1px solid var(--i-border); box-shadow:0 10px 34px rgba(0,0,0,.22); border-radius:24px; }
.now-card { padding:22px 24px; font-size:1.08rem; line-height:1.45; font-weight:650; border-left:4px solid #34c759; }
.insights-grid { display:grid; grid-template-columns:1fr 1.35fr; gap:16px; margin:16px 0; }.card { padding:18px 20px; }h2 { font-size:1rem; margin:0 0 13px; }h2 span { color:var(--i-muted); font-size:.78rem; font-weight:500; }
.stack { display:grid; gap:8px; }.note { padding:10px 12px; border-radius:12px; background:rgba(128,128,128,.12); font-size:.9rem; }.note.warning { border-left:3px solid #ff9f0a; }.note.ok { border-left:3px solid #34c759; }
.phases { display:flex; gap:8px; flex-wrap:wrap; }.phases b { padding:5px 9px; background:rgba(10,132,255,.13); border-radius:10px; font-size:.85rem; }.phases i { font-style:normal; color:var(--i-muted); font-weight:600; }ul { margin:12px 0 8px; padding-left:18px; }li { margin:4px 0; font-size:.9rem; }li b { margin-left:4px; }.delta,p,.updated { color:var(--i-muted); font-size:.8rem; }.timeline { display:grid; gap:0; }.event { display:grid; grid-template-columns:56px 1fr; gap:10px; padding:10px 0; border-top:1px solid var(--i-border); font-size:.93rem; }.event time { color:var(--i-muted); font-variant-numeric:tabular-nums; }.event.critical span { color:#ff6961; font-weight:700; }.event.warning span { color:#ffb340; }.updated { margin:12px 2px; }
@media(max-width:760px) { .insights-shell { padding:20px 14px 32px; }.insights-grid { grid-template-columns:1fr; }.now-card,.card { border-radius:18px; }.now-card { padding:17px; } }

/* ── Разбор потребления: профиль дня, недели, тепловая карта ───────── */
.section-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:22px 2px 10px; }
.section-head h2 { margin:0; font-size:1.05rem; }
.section-head span { color:var(--i-muted); font-size:.8rem; }
.chips { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.chip { background:var(--i-bg); border:1px solid var(--i-border); border-radius:14px; padding:9px 13px; min-width:120px; }
.chip b { display:block; font-size:1.12rem; font-variant-numeric:tabular-nums; }
.chip i { font-style:normal; color:var(--i-muted); font-size:.74rem; letter-spacing:.02em; text-transform:uppercase; }
.chip.up b { color:#ff9f0a; } .chip.down b { color:#34c759; }
.charts2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.chart-card h3 { margin:0 0 2px; font-size:.95rem; }
.chart-card .sub { color:var(--i-muted); font-size:.76rem; margin-bottom:8px; }
.chart-card svg { width:100%; height:auto; display:block; overflow:visible; }
.legend { display:flex; gap:14px; flex-wrap:wrap; color:var(--i-muted); font-size:.74rem; margin-top:6px; }
.legend i { display:inline-block; width:14px; height:3px; border-radius:2px; vertical-align:middle; margin-right:5px; }
.ch-grid { stroke:var(--i-border); stroke-width:1; }
.ch-axis { fill:var(--i-muted); font-size:9px; }
.ch-band { fill:#0a84ff; opacity:.16; }
.ch-med { fill:none; stroke:#0a84ff; stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round; }
.ch-mean { fill:none; stroke:#ff9f0a; stroke-width:1.6; stroke-dasharray:4 3; }
.ch-now { stroke:#34c759; stroke-width:1.4; stroke-dasharray:3 3; }
.ch-bar { fill:#0a84ff; opacity:.78; } .ch-bar.we { fill:#ff9f0a; opacity:.8; }
.ch-val { fill:var(--i-text); font-size:9px; font-variant-numeric:tabular-nums; }
.heat { display:grid; grid-template-columns:26px repeat(24, 1fr); gap:2px; align-items:center; }
.heat .h-lab { color:var(--i-muted); font-size:.68rem; }
.heat .cell { aspect-ratio:1; border-radius:3px; background:rgba(10,132,255,.10); }
.heat .hours { grid-column:2 / -1; display:grid; grid-template-columns:repeat(24,1fr); color:var(--i-muted); font-size:.62rem; }
@media(max-width:860px) { .charts2 { grid-template-columns:1fr; } .heat .cell { border-radius:2px; } }