:root {
    --ink: #102f29;
    --forest: #001f1b;
    --forest-raised: #073a32;
    --accent: #4ac337;
    --accent-soft: #e9f7e6;
    --energy-usage: #cf701b;
    --energy-usage-hover: #ae5710;
    --energy-usage-highlight: #ffad52;
    --energy-generation: #299b25;
    --surface: #ffffff;
    --canvas: #f3f6f4;
    --muted: #61736c;
    --line: #dce6df;
    --danger: #a63a32;
    --danger-soft: #ffede9;
    --warning: #825910;
    --warning-soft: #fff1ca;
    --radius: 20px;
    color: var(--ink);
    background: var(--canvas);
    font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html, body { min-width: 0; min-height: 100vh; margin: 0; }
body { color: var(--ink); background: var(--canvas); font-family: inherit; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
a { text-underline-offset: 4px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
    outline: 3px solid var(--forest);
    outline-offset: 4px;
}
.helios-sidebar :is(button, a, input, select, summary):focus-visible { outline-color: var(--accent); }

.helios-shell {
    display: grid;
    grid-template-columns: 292px minmax(0, 1fr);
    min-height: 100vh;
    background: var(--canvas);
}
.helios-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px 20px;
    min-width: 0;
    color: #fff;
    background: var(--forest);
}
.brand { display: flex; align-items: center; gap: 13px; padding: 0 7px 8px; }
.brand-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    color: var(--forest);
    background: var(--accent);
    border-radius: 15px;
    font-size: 34px;
    font-weight: 650;
    letter-spacing: -3px;
    line-height: 1;
}
.brand-mark span { align-self: flex-start; margin-top: 5px; font-size: 21px; }
.brand h1, .topbar h2, .panel h2, .phase-card h3, .device-panel h3 { margin: 0; }
.brand h1 { font-size: 1.85rem; font-weight: 600; letter-spacing: -.055em; }
.eyebrow {
    margin: 0 0 6px;
    color: var(--muted);
    font-size: .67rem;
    font-weight: 650;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.helios-sidebar .eyebrow { color: #b0c9bf; }
.workspace-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    color: #e9f7e6;
    border: 1px solid #31534a;
    border-radius: 14px;
    font-size: .82rem;
    line-height: 1.5;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
.workspace-link > span:last-child { font-size: 1.15rem; color: var(--accent); }
.workspace-link:hover { color: white; background: var(--forest-raised); border-color: var(--accent); }
.panel { padding: 18px 16px; background: var(--forest-raised); border: 1px solid #254a40; border-radius: var(--radius); }
.panel-title, .control-row, .topbar, .phase-header, .device-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.panel-title { justify-content: flex-start; margin-bottom: 18px; }
.symbol {
    display: grid;
    place-items: center;
    flex: 0 0 29px;
    width: 29px;
    height: 29px;
    color: #c6f4bc;
    background: #1c5040;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
}
.panel-title h2 { color: white; font-size: .92rem; font-weight: 600; letter-spacing: -.015em; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 4px; margin-bottom: 18px; background: var(--forest); border-radius: 24px; }
.data-sources { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.segmented button { min-height: 37px; padding: 4px 6px; color: #d3e3dc; background: transparent; border: 0; border-radius: 20px; font-size: .8rem; }
.segmented button:hover:not(:disabled):not(.active) { background: #204b3e; color: white; }
.segmented button.active { color: var(--forest); background: var(--accent); font-weight: 700; }
.field { display: grid; gap: 8px; margin-bottom: 16px; min-width: 0; color: #d1e3d9; font-size: .78rem; font-weight: 500; }
.field input, .field select {
    width: 100%;
    min-width: 0;
    min-height: 43px;
    padding: 10px 12px;
    color: white;
    background: var(--forest);
    border: 1px solid #54766a;
    border-radius: 12px;
    font-size: .85rem;
}
.field input::placeholder { color: #a6bdb3; }
.field input:focus, .field select:focus { border-color: var(--accent); }
.field input:disabled { opacity: .55; }
.field input[aria-invalid="true"] { border-color: #ffb4a6; }
.panel-help, .input-error { margin: 0 0 14px; color: #bdd3c8; font-size: .76rem; line-height: 1.65; }
.input-error { color: #ffb4a6; }
.setup-link { color: #b3eda7; font-size: .78rem; }
.setup-link:hover { color: white; }
.pv-presets { display: flex; flex-wrap: wrap; gap: 7px; }
.pv-presets button { min-height: 36px; padding: 7px 12px; color: #c6edbc; background: transparent; border: 1px solid #618354; border-radius: 20px; font-size: .78rem; }
.pv-presets button:hover { color: var(--forest); background: var(--accent); border-color: var(--accent); }
.toggle { display: flex; align-items: center; gap: 8px; color: #d1e3d9; font-size: .78rem; font-weight: 500; }
.toggle input { width: 17px; height: 17px; accent-color: var(--accent); }
.icon-button { display: grid; place-items: center; flex: 0 0 37px; width: 37px; height: 37px; color: var(--forest); background: #c8e9bf; border: 0; border-radius: 50%; }
.icon-button:hover { background: var(--accent); }
.refresh-icon { display: inline-block; font-size: 1.3rem; line-height: 1; }
.checklist { display: grid; gap: 11px; padding: 0; margin: 0; color: #bdd3c8; font-size: .75rem; line-height: 1.5; list-style: none; }
.checklist li { display: flex; align-items: flex-start; gap: 9px; }
.checklist li span { flex: 0 0 7px; height: 7px; margin-top: 6px; border: 1px solid #87aa99; border-radius: 50%; }

.dashboard { display: flex; flex-direction: column; gap: 22px; padding: 30px; min-width: 0; width: 100%; max-width: 1720px; margin-inline: auto; }
.topbar { min-height: 150px; padding: 26px 30px; color: white; background: var(--forest); border-radius: 24px; }
.topbar > div:first-child { min-width: 0; }
.topbar .eyebrow { color: #b3d3c3; margin-bottom: 10px; }
.topbar h2 { font-size: clamp(1.7rem, 3vw, 2.65rem); font-weight: 550; letter-spacing: -.05em; line-height: 1.1; }
.dashboard-intro { margin: 12px 0 0; color: #c0d7cb; font-size: .82rem; line-height: 1.6; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; min-height: 36px; padding: 9px 13px; color: #334d44; background: #e2ebe5; border: 1px solid transparent; border-radius: 24px; font-size: .75rem; font-weight: 650; white-space: nowrap; }
.status-pill span { width: 7px; height: 7px; background: currentColor; border-radius: 50%; }
.status-pill.ok { color: #174f20; background: #dcf4d5; }
.status-pill.simulation { color: #405968; background: #eaf0f4; }
.status-pill.simulation span { background: transparent; border: 1.5px solid currentColor; }
.status-pill.danger { color: #8f3029; background: var(--danger-soft); }
.alert-box { padding: 17px 20px; color: var(--danger); background: var(--danger-soft); border: 1px solid #edc8c1; border-radius: 16px; font-size: .88rem; line-height: 1.6; }
.alert-box p { margin: 4px 0 0; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.energy-grid, .metrics-grid.diagnostics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.metric-card, .phase-card, .device-panel { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.metric-card { display: flex; flex-direction: column; align-items: stretch; min-height: 156px; padding: 19px; }
.metric-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.metric-heading p { margin: 0; color: #435d51; font-size: .78rem; font-weight: 600; line-height: 1.45; }
.metric-symbol { display: grid; flex: 0 0 29px; place-items: center; width: 29px; height: 29px; color: #3a5c4a; background: #edf3ee; border-radius: 10px; font-size: .61rem; font-weight: 650; }
.metric-card strong { display: block; margin: 11px 0 9px; color: var(--ink); font-size: clamp(1.55rem, 2.5vw, 2.15rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.metric-card > span { margin-top: auto; color: var(--muted); font-size: .73rem; line-height: 1.5; }
.metrics-grid:not(.diagnostics-grid) .metric-card:first-child, .energy-grid .metric-card:first-child { background: var(--accent-soft); border-color: #cde5c6; }
.metrics-grid:not(.diagnostics-grid) .metric-card:first-child .metric-symbol, .energy-grid .metric-card:first-child .metric-symbol { color: var(--forest); background: #c9eebc; }
.energy-grid .metric-card:nth-child(2) .metric-symbol { color: #174f20; background: #d9efcf; }
.balance-explanation { margin: 16px 0 0; color: var(--muted); font-size: .79rem; line-height: 1.65; }
.phase-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.phase-card { padding: 21px; }
.phase-header h3 { font-size: 1.23rem; font-weight: 600; letter-spacing: -.035em; }
.phase-header > span { padding: 5px 10px; color: #255b32; background: #e9f7e6; border-radius: 20px; font-size: .68rem; font-weight: 600; }
.phase-card.warning .phase-header > span { color: var(--warning); background: var(--warning-soft); }
.phase-card.danger .phase-header > span { color: var(--danger); background: var(--danger-soft); }
.power-bar { height: 5px; margin: 19px 0; overflow: hidden; background: #edf2ed; border-radius: 5px; }
.power-bar span { display: block; height: 100%; background: #4ac337; border-radius: inherit; transition: width 180ms ease; }
.phase-card.warning .power-bar span { background: #d6ab45; }
.phase-card.danger .power-bar span { background: var(--danger); }
.phase-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.phase-values div { min-width: 0; min-height: 64px; padding: 11px 12px; background: #f3f6f3; border-radius: 12px; }
.phase-values dt { color: var(--muted); font-size: .62rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.phase-values dd { margin: 6px 0 0; color: var(--ink); font-size: 1.04rem; font-weight: 600; line-height: 1.35; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.phase-note { margin: 15px 0 0; padding: 12px; color: var(--danger); background: var(--danger-soft); border-radius: 12px; font-size: .76rem; line-height: 1.5; }
.device-panel { min-height: 88px; padding: 20px 23px; }
.device-panel h3 { font-size: 1rem; font-weight: 600; }
.device-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; min-width: 0; }
.device-meta span { min-width: 0; max-width: 100%; padding: 7px 10px; color: #4c6658; background: #f1f5f0; border-radius: 10px; font-size: .7rem; line-height: 1.5; overflow-wrap: anywhere; }
.spinning { animation: spin .9s linear infinite; }
#blazor-error-ui { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 1600px) {
    .helios-shell { grid-template-columns: 310px minmax(0, 1fr); }
    .helios-sidebar { padding: 34px 25px; }
    .dashboard { padding: 34px 42px; }
}
@media (max-width: 1150px) {
    .helios-shell { grid-template-columns: 266px minmax(0, 1fr); }
    .helios-sidebar { padding: 24px 16px; }
    .dashboard { padding: 24px; }
    .topbar { flex-wrap: wrap; gap: 18px; padding: 24px; }
    .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .phase-card { padding: 16px; }
    .phase-values { gap: 7px; }
    .phase-values div { padding: 10px 8px; }
    .device-panel { align-items: flex-start; flex-direction: column; }
    .device-meta { justify-content: flex-start; }
}
@media (max-width: 900px) {
    .helios-shell { grid-template-columns: minmax(0, 1fr); }
    .helios-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; padding: 24px; gap: 18px; }
    .brand { align-self: center; padding: 0; }
    .workspace-link { align-self: center; }
    .panel:last-child { grid-column: 1 / -1; }
    .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard { padding: 24px; }
    .topbar { flex-wrap: nowrap; }
}
@media (max-width: 600px) {
    .helios-sidebar { grid-template-columns: minmax(0, 1fr); padding: 20px 16px; gap: 16px; }
    .brand { padding: 4px 4px 8px; }
    .checklist { grid-template-columns: minmax(0, 1fr); }
    .dashboard { gap: 16px; padding: 20px 16px; }
    .topbar { align-items: flex-start; flex-direction: column; padding: 23px; min-height: 0; border-radius: 20px; }
    .topbar h2 { font-size: 2rem; }
    .metric-card { min-height: 152px; padding: 16px; }
    .metric-heading { gap: 5px; }
    .metric-symbol { flex-basis: 24px; width: 24px; height: 24px; font-size: .55rem; border-radius: 8px; }
    .metric-heading p { font-size: .74rem; }
    .metrics-grid, .energy-grid, .metrics-grid.diagnostics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .phase-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .phase-card { padding: 21px; }
    .phase-values div { padding: 12px; }
    .phase-values dt { font-size: .67rem; }
    .phase-values dd { font-size: 1.1rem; }
    .device-panel { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Shared workspace for the imported Helios visual design. Existing experiment styles remain scoped. */
.energy-workspace { display: grid; grid-template-columns: 84px minmax(0, 1fr); min-height: 100vh; background: var(--canvas); }
.energy-main { min-width: 0; }
.energy-workspace select, .energy-workspace input { max-width: 100%; }
.energy-workspace svg { flex-shrink: 0; }
@media (max-width: 900px) { .energy-workspace { display: block; } }
/* Router focus announces the page heading; interactive controls retain their focus rings. */
h1[tabindex="-1"]:focus { outline: none; }

/* Body-level chart tooltip escapes horizontal chart clipping and stays within the viewport. */
.energy-chart-tooltip { position:fixed;z-index:10000;display:grid;gap:6px;width:max-content;max-width:min(300px,calc(100vw - 16px));padding:12px 14px;background:var(--forest);color:white;border:1px solid #527b67;border-radius:4px;box-shadow:0 6px 20px #001f1b33;pointer-events:none;font-size:12px;line-height:1.5;overflow-wrap:anywhere; }
.energy-chart-tooltip strong { font-size:14px; }