/*
 * Shared EV Battery Manager UI. This is deliberately framework-free so the
 * same file can be used by PHP Cloud and by pages served from ESP32.
 */
/* Continuous time zoom for History. It adjusts the displayed window only. */
.history-chart-header-tools { display:flex; flex:0 1 auto; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:7px 12px; }.history-chart-zoom { display:inline-flex; align-items:center; overflow:hidden; border:1px solid rgba(56,189,248,.4); border-radius:7px; color:#bae6fd; background:rgba(8,47,73,.24); font-size:.68rem; font-weight:800; white-space:nowrap; }.history-chart-zoom button { display:grid; width:31px; height:30px; place-items:center; padding:0; border:0; color:#e0f2fe; background:rgba(15,23,42,.44); font:inherit; font-size:1.15rem; font-weight:850; line-height:1; cursor:pointer; }.history-chart-zoom button:hover:not(:disabled) { background:rgba(14,116,144,.48); }.history-chart-zoom button:disabled { color:#64748b; cursor:not-allowed; }.history-chart-zoom span { box-sizing:border-box; width:84px; padding:0 6px; font-variant-numeric:tabular-nums; text-align:center; }
@media(max-width:760px) { .history-chart-header-tools { width:100%; justify-content:space-between; }.history-chart-zoom { order:-1; } }

/* Detailed cell history keeps the stored snapshot compact while offering a
   practical, touch-friendly selector for the lines currently shown. */
.cell-history-section { margin-top:22px; padding-top:2px; border-top:1px solid rgba(148,163,184,.15); }.cell-history-heading { margin-top:16px; }.cell-history-controls { display:flex; align-items:end; justify-content:space-between; flex-wrap:wrap; gap:10px 16px; margin:0 2px 10px; }.cell-history-module { display:grid; gap:6px; min-width:170px; }.cell-history-module .label { margin:0; }.cell-history-module select { min-height:32px; padding:6px 28px 6px 9px; border:1px solid rgba(148,163,184,.28); border-radius:7px; color:#e2e8f0; background:#111827; font:inherit; font-size:.76rem; font-weight:750; }.cell-history-selection-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:6px; }.cell-history-selection-actions .history-selection-note { margin-right:3px; }.cell-history-action-button { min-height:30px; padding:6px 9px; border:1px solid rgba(148,163,184,.28); border-radius:7px; color:#cbd5e1; background:rgba(15,23,42,.64); font:inherit; font-size:.7rem; font-weight:800; cursor:pointer; }.cell-history-action-button:hover:not(:disabled) { border-color:rgba(56,189,248,.72); color:#fff; }.cell-history-action-button:disabled { color:#64748b; cursor:not-allowed; }.cell-history-cells { display:flex; flex-wrap:wrap; gap:5px; margin:0 2px 13px; }.cell-history-cells > button { display:grid; min-width:66px; gap:2px; padding:6px 7px; border:1px solid rgba(148,163,184,.24); border-radius:7px; color:#94a3b8; background:rgba(15,23,42,.48); font:inherit; text-align:left; cursor:pointer; }.cell-history-cells > button strong { color:#cbd5e1; font-size:.66rem; }.cell-history-cells > button span { font-size:.62rem; font-weight:700; }.cell-history-cells > button.is-selected { border-color:rgba(56,189,248,.82); color:#e0f2fe; background:rgba(14,116,144,.27); }.cell-history-cells > button.is-selected strong { color:#f0f9ff; }.cell-history-cells > button:disabled { opacity:.45; cursor:not-allowed; }.cell-history-legend { max-width:min(740px,100%); }.cell-history-line { vector-effect:non-scaling-stroke; }
.cell-history-summary-toggles { display:flex; flex-wrap:wrap; gap:5px; margin:0 2px 10px; }.cell-history-summary-toggles button { min-height:29px; padding:5px 8px; border:1px solid rgba(148,163,184,.27); border-radius:7px; color:#94a3b8; background:rgba(15,23,42,.48); font:inherit; font-size:.68rem; font-weight:800; cursor:pointer; }.cell-history-summary-toggles button:hover { border-color:rgba(56,189,248,.68); color:#e2e8f0; }.cell-history-summary-toggles button.is-active { border-color:rgba(56,189,248,.76); color:#e0f2fe; background:rgba(14,116,144,.28); }
@media(max-width:620px) { .cell-history-controls { align-items:start; flex-direction:column; }.cell-history-module { width:100%; }.cell-history-module select { width:100%; }.cell-history-selection-actions { justify-content:flex-start; }.cell-history-cells > button { min-width:61px; } }

/* A cell tooltip becomes a small action menu when a specific cell is chosen. */
.cells-chart-tooltip { pointer-events:auto; }.cell-history-tooltip-link { display:inline-flex; width:max-content; min-height:25px; align-items:center; margin-top:4px; padding:4px 7px; border:1px solid rgba(56,189,248,.5); border-radius:5px; color:#e0f2fe; background:rgba(14,116,144,.22); font-size:.68rem; font-weight:800; text-decoration:none; }.cell-history-tooltip-link:hover { border-color:#7dd3fc; color:#fff; background:rgba(14,116,144,.46); }
.cell-history-menu { position:fixed; z-index:20; padding:5px; border:1px solid rgba(148,163,184,.34); border-radius:7px; background:rgba(8,11,16,.98); box-shadow:0 12px 28px rgba(0,0,0,.46); }.cell-history-menu[hidden] { display:none; }.cell-history-menu a { display:inline-flex; min-height:29px; align-items:center; padding:5px 8px; border-radius:5px; color:#e0f2fe; font-size:.72rem; font-weight:800; text-decoration:none; white-space:nowrap; }.cell-history-menu a:hover { color:#fff; background:rgba(14,116,144,.42); }

/* Device sharing controls. */
.sidebar-action-link { text-decoration:none; }
.auth-demo-footnote { margin-top:-8px; }
.share-device-button{min-height:29px;margin:0 6px 0 0;padding:5px 8px;border:1px solid rgba(56,189,248,.42);border-radius:6px;color:#bae6fd;background:rgba(12,74,110,.16);font:inherit;font-size:.71rem;font-weight:800;cursor:pointer}.share-device-button:hover{background:rgba(12,74,110,.42)}.device-inline-form{display:inline}
.device-group-form{display:flex;min-width:250px;align-items:center;gap:5px}.device-group-form select,.device-group-form [data-device-group-custom]{min-width:0;padding:6px 7px;border:1px solid rgba(148,163,184,.28);border-radius:6px;color:#e2e8f0;background:rgba(15,23,42,.68);font:inherit;font-size:.72rem;font-weight:700}.device-group-form [data-device-group-custom]{width:112px}.device-group-form select{width:112px;cursor:pointer}.device-group-form button{padding:6px 7px;border:1px solid rgba(56,189,248,.42);border-radius:6px;color:#bae6fd;background:rgba(8,47,73,.3);font:inherit;font-size:.65rem;font-weight:800;cursor:pointer}.device-group-form button:hover:not(:disabled){border-color:#38bdf8;color:#fff;background:rgba(14,116,144,.4)}.device-group-form select:disabled,.device-group-form [data-device-group-custom]:disabled,.device-group-form button:disabled{opacity:.55;cursor:not-allowed}.battery-group-label{display:inline-flex;align-items:center;max-width:100%;margin-top:4px;padding:3px 7px;overflow:hidden;border:1px solid rgba(56,189,248,.24);border-radius:999px;color:#bae6fd;background:rgba(8,47,73,.22);font-size:.61rem;font-weight:800;letter-spacing:.04em;text-overflow:ellipsis;white-space:nowrap}
/* One shared time controller: the active time window applies to both history
   charts, so controls should never be duplicated inside each chart header. */
.history-workspace { padding-bottom:88px !important; }.history-pan-navigator--floating { position:fixed; z-index:24; left:50%; bottom:12px; display:flex !important; width:min(720px,calc(100vw - 28px)); min-height:43px; align-items:center; gap:10px; margin:0; padding:6px 8px; transform:translateX(-50%); border-color:rgba(56,189,248,.4); background:rgba(8,11,16,.96); box-shadow:0 10px 28px rgba(0,0,0,.48); backdrop-filter:blur(10px); }.history-pan-navigator--floating .history-pan-track { display:grid; flex:1 1 160px; min-width:0; grid-template-columns:auto minmax(90px,1fr); align-items:center; gap:9px; }.history-pan-navigator--floating .history-pan-track.is-idle { display:none; }.history-pan-navigator--floating .history-pan-heading { display:flex !important; align-items:center; gap:7px; min-width:0; white-space:nowrap; }.history-pan-navigator--floating .history-pan-heading span { color:#94a3b8; font-size:.62rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }.history-pan-navigator--floating .history-pan-heading strong { overflow:hidden; font-size:.68rem; text-overflow:ellipsis; white-space:nowrap; }.history-pan-navigator--floating input[type="range"] { min-width:90px; }.history-pan-navigator--floating .history-chart-zoom { flex:0 0 auto; }
@media(max-width:620px) { .history-workspace { padding-bottom:76px !important; }.history-pan-navigator--floating { bottom:7px; width:calc(100vw - 16px); gap:7px; padding:5px 6px; }.history-pan-navigator--floating .history-pan-track { grid-template-columns:minmax(0,1fr); }.history-pan-navigator--floating .history-pan-heading { display:none !important; }.history-pan-navigator--floating input[type="range"] { min-width:0; }.history-pan-navigator--floating .history-chart-zoom span { min-width:48px; padding:0 5px; } }

:root {
    --brand-primary:#d97706;
    --brand-primary-rgb:217,119,6;
    --brand-secondary:#fb923c;
    --page-bg:#080b10;
    --panel-border:rgba(148,163,184,.18);
    --text-main:#f8fafc;
    --text-muted:#94a3b8;
}
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; color:var(--text-main); font-family:Arial,sans-serif; background:radial-gradient(circle at top left,rgba(var(--brand-primary-rgb),.24),transparent 34rem),linear-gradient(180deg,#0f172a 0%,var(--page-bg) 42%,#05070b 100%); }
button,input { font:inherit; }
a { color:inherit; }
.app-shell { display:grid; grid-template-columns:248px minmax(0,1fr); gap:16px; min-height:100vh; padding:14px clamp(10px,2vw,24px) 28px; }
.custom-top-bar,.panel { border:1px solid var(--panel-border); border-radius:8px; background:linear-gradient(180deg,rgba(30,41,59,.88),rgba(15,23,42,.9)); box-shadow:0 18px 48px rgba(0,0,0,.24); }
.custom-top-bar { position:sticky; top:14px; display:flex; height:calc(100vh - 42px); min-height:440px; padding:20px 16px; flex-direction:column; background:linear-gradient(180deg,rgba(15,23,42,.94),rgba(2,6,23,.88)); }
#HEADER_BRAND { margin:0; font-size:1.65rem; font-weight:800; } #HEADER_BRAND span { color:var(--brand-secondary); }
.firmware-version { margin:8px 0 20px; color:var(--text-muted); font-size:.75rem; font-weight:750; letter-spacing:.06em; text-transform:uppercase; }
.device-identity { display:inline-flex; align-items:baseline; gap:5px; white-space:nowrap; }.device-firmware-version { color:#94a3b8; font-size:.72em; font-weight:700; letter-spacing:.015em; text-transform:none; }.label .device-serial,.label .device-firmware-version { color:#7892ad; font-size:.66rem; }.battery-table-name .device-serial,.battery-table-name .device-firmware-version { font-size:.66rem; }.live-ring-battery-head .device-serial,.live-ring-battery-head .device-firmware-version { color:#7186a0; font-size:.66rem; }
.top-bar-title-divider { width:min(160px,70%); height:3px; margin:0; border:0; border-radius:999px; background:linear-gradient(90deg,transparent,var(--brand-secondary),transparent); }
.cloud-nav { display:grid; gap:5px; margin-top:16px; padding-top:8px; border-top:1px solid var(--panel-border); }
.custom-nav-item { display:block; padding:10px 12px; border-radius:8px; color:#cbd5e1; font-size:.92rem; font-weight:700; text-decoration:none; }.custom-nav-item.is-active { color:#fff; background:var(--brand-primary); }.custom-nav-item:not(.is-disabled):hover { color:#fff; background:rgba(var(--brand-primary-rgb),.2); }.custom-nav-item.is-disabled { cursor:not-allowed; opacity:.38; }
.sidebar-actions { margin-top:20px; padding-top:18px; border-top:1px solid var(--panel-border); }.cloud-account { margin-top:auto; }.sidebar-section-title,.label { margin:0; color:var(--text-muted); font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.cloud-email { overflow:hidden; margin:9px 10px 4px; color:#e2e8f0; font-size:.82rem; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }.sidebar-language { display:flex; margin:8px 10px 4px; }.sidebar-action { display:block; width:100%; margin-top:5px; padding:9px 10px; border:0; border-radius:8px; color:#cbd5e1; background:transparent; font-size:.92rem; font-weight:700; text-align:left; cursor:pointer; }.sidebar-action:hover { color:#fff; background:rgba(var(--brand-primary-rgb),.2); }.sidebar-actions form { margin:0; }
.app-main { min-width:0; }.view-header { display:flex; align-items:end; justify-content:space-between; gap:16px; padding:5px 2px 15px; }.view-title { margin:0; font-size:clamp(1.45rem,2.4vw,2rem); }.view-subtitle,.empty p,.updated { color:var(--text-muted); }.view-subtitle { margin:5px 0 0; font-weight:600; }.connection { padding:7px 10px; border:1px solid var(--panel-border); border-radius:999px; color:var(--text-muted); font-size:.8rem; font-weight:700; white-space:nowrap; }.dot { display:inline-block; width:8px; height:8px; margin-right:6px; border-radius:50%; background:#f59e0b; }.dot.ok { background:#22c55e; box-shadow:0 0 10px #22c55e; }
.summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:16px; }.summary-item,.battery { padding:15px; }.summary-label,.label { color:var(--text-muted); font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }.summary-value { margin-top:5px; font-size:1.65rem; font-weight:850; }.batteries { display:grid; grid-template-columns:repeat(auto-fill,minmax(265px,1fr)); gap:16px; }.battery { display:flex; min-height:290px; flex-direction:column; }.battery-head { display:flex; min-height:54px; align-items:start; justify-content:space-between; gap:8px; }.battery h2 { margin:3px 0 0; font-size:1.2rem; }.state { padding:4px 8px; border:1px solid var(--panel-border); border-radius:999px; color:#cbd5e1; font-size:.68rem; font-weight:800; white-space:nowrap; }.state.ok { border-color:rgba(34,197,94,.5); color:#86efac; background:rgba(34,197,94,.1); }.state.error { border-color:rgba(239,68,68,.5); color:#fca5a5; background:rgba(239,68,68,.1); }.soc { display:flex; align-items:center; gap:12px; margin:18px 0 14px; }.battery-icon { position:relative; width:58px; height:30px; padding:3px; border:2px solid #cbd5e1; border-radius:5px; }.battery-icon:after { content:''; position:absolute; top:8px; right:-6px; width:4px; height:10px; border-radius:0 3px 3px 0; background:#cbd5e1; }.battery-fill { height:100%; border-radius:2px; background:var(--brand-secondary); transition:width .25s; }.soc-value { font-size:1.65rem; font-weight:850; }.metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.metric { padding:9px; border:1px solid rgba(148,163,184,.14); border-radius:8px; background:rgba(15,23,42,.6); }.metric-value { margin-top:4px; overflow-wrap:anywhere; font-size:1rem; font-weight:800; }.battery-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:auto; padding-top:13px; }.battery-toggle,.battery-detail-link { display:flex; min-height:38px; align-items:center; justify-content:center; gap:6px; padding:8px 10px; border-radius:7px; font-size:.78rem; font-weight:750; text-decoration:none; transition:background .15s,border-color .15s,color .15s; }.battery-toggle { border:1px solid rgba(var(--brand-primary-rgb),.7); color:#fff; background:var(--brand-primary); cursor:pointer; }.battery-toggle:hover { background:#b45309; }.battery-toggle.is-enabled { border-color:rgba(239,68,68,.55); color:#fecaca; background:rgba(127,29,29,.3); }.battery-toggle.is-enabled:hover { background:rgba(153,27,27,.55); }.battery-toggle:disabled { cursor:not-allowed; opacity:.45; }.battery-detail-link { border:1px solid rgba(148,163,184,.28); color:#dbe5ee; background:transparent; }.battery-detail-link:hover { border-color:rgba(var(--brand-primary-rgb),.62); color:#fff; background:rgba(var(--brand-primary-rgb),.13); }
.empty { padding:44px 20px; text-align:center; }.empty h2 { margin:0; font-size:1.25rem; }.empty p { max-width:48ch; margin:8px auto 0; line-height:1.55; }
.settings-panel { width:min(100%,620px); padding:22px; }.settings-panel-header { margin-bottom:22px; }.settings-panel-header h2 { margin:4px 0 0; font-size:1.3rem; }.settings-panel-header p:last-child { max-width:52ch; margin:8px 0 0; color:var(--text-muted); font-size:.88rem; line-height:1.5; }.settings-form { max-width:440px; }
.telemetry-access-panel { margin-bottom:14px; border-color:rgba(56,189,248,.38); background:linear-gradient(135deg,rgba(8,47,73,.2),rgba(15,23,42,.92) 64%); }.telemetry-access-form { max-width:510px; }.telemetry-access-intro { margin-bottom:16px; }.telemetry-access-intro h2 { margin:4px 0 0; color:#f8fafc; font-size:1.3rem; }.telemetry-access-intro p:last-child { max-width:52ch; margin:8px 0 0; color:var(--text-muted); font-size:.88rem; line-height:1.5; }.telemetry-access-toggle { display:flex; align-items:flex-start; gap:12px; color:#e2e8f0; cursor:pointer; }.telemetry-access-toggle .switch-control { flex:0 0 auto; margin-top:1px; }.telemetry-access-toggle strong { display:block; color:#f8fafc; font-size:.84rem; }.telemetry-access-toggle small { display:block; max-width:54ch; margin-top:4px; color:var(--text-muted); font-size:.74rem; font-weight:600; line-height:1.45; }.telemetry-access-form .scan-button { width:max-content; margin-top:4px; }.telemetry-access-registration { margin:1px 0 2px; padding:14px; border:1px solid rgba(56,189,248,.28); border-radius:8px; background:rgba(8,47,73,.14); }.telemetry-access-registration .telemetry-access-intro h2 { font-size:1rem; }.telemetry-access-registration .telemetry-access-intro p:last-child { font-size:.76rem; }
.account-delete-panel { margin-top:14px; border-color:rgba(248,113,113,.38); background:linear-gradient(135deg,rgba(127,29,29,.13),rgba(15,23,42,.92) 62%); }.account-delete-panel .settings-panel-header { margin-bottom:16px; }.account-delete-trigger { min-height:36px; padding:7px 12px; font-size:.75rem; }.account-delete-confirmation { display:flex; align-items:flex-start; gap:9px; color:#fecaca; font-size:.78rem; font-weight:700; line-height:1.4; }.account-delete-confirmation input { width:16px; height:16px; flex:0 0 auto; margin:1px 0 0; accent-color:#ef4444; }.account-delete-dialog .cloud-form { gap:14px; }.account-delete-dialog .form-field { margin-top:2px; }.settings-integrations-panel { margin-bottom:14px; }.settings-integrations-panel > .settings-panel-header { margin-bottom:16px; }.settings-integration-card { padding:16px; border:1px solid rgba(56,189,248,.3); border-radius:9px; background:linear-gradient(135deg,rgba(8,47,73,.17),rgba(2,6,23,.24)); }.settings-integration-card-header { margin-bottom:15px; }.settings-integration-card-header h3 { margin:4px 0 0; color:#f8fafc; font-size:1rem; }.settings-integration-card-header p:last-child { max-width:52ch; margin:7px 0 0; color:var(--text-muted); font-size:.8rem; line-height:1.45; }.settings-summary-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin:0 0 16px; }.settings-summary-list div { min-width:0; padding:10px; border:1px solid rgba(148,163,184,.17); border-radius:7px; background:rgba(2,6,23,.2); }.settings-summary-list dt { color:var(--text-muted); font-size:.62rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }.settings-summary-list dd { overflow:hidden; margin:5px 0 0; color:#e2e8f0; font-size:.76rem; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }
.user-telemetry-notice { margin:14px; color:#cbd5e1; border-color:rgba(56,189,248,.32); background:rgba(8,47,73,.22); }
.user-devices-table td:first-child > strong,.user-devices-table td:first-child > span { display:block; }.user-devices-table td:first-child > span { margin-top:3px; color:var(--text-muted); font-size:.68rem; font-weight:700; }
.licensing-header { margin-bottom:15px; }.plan-grid { display:grid; grid-template-columns:repeat(3,minmax(220px,1fr)); gap:14px; max-width:1080px; }.plan-card { display:flex; min-height:300px; flex-direction:column; padding:19px; border-color:rgba(148,163,184,.25); }.plan-card.is-current { border-color:rgba(56,189,248,.78); box-shadow:0 0 0 1px rgba(14,116,144,.24),0 16px 34px rgba(2,132,199,.1); }.plan-card.is-featured { background:linear-gradient(145deg,rgba(14,116,144,.17),rgba(15,23,42,.92) 65%); }.plan-card-header { display:flex; align-items:start; justify-content:space-between; gap:10px; }.plan-card h2 { margin:2px 0 0; color:#f8fafc; font-size:1.35rem; }.plan-card-header > span { padding:4px 7px; border:1px solid rgba(56,189,248,.55); border-radius:99px; color:#bae6fd; background:rgba(14,116,144,.17); font-size:.61rem; font-weight:850; line-height:1.1; text-align:center; }.plan-price { display:grid; min-height:43px; gap:3px; margin:17px 0 13px; }.plan-price strong { color:#f8fafc; font-size:1.22rem; font-weight:850; }.plan-price small { color:#94a3b8; font-size:.7rem; font-weight:650; }.plan-card ul { display:grid; gap:9px; margin:0; padding:0; list-style:none; color:#cbd5e1; font-size:.78rem; line-height:1.35; }.plan-card li { position:relative; padding-left:17px; }.plan-card li::before { position:absolute; left:0; color:#38bdf8; content:'✓'; font-weight:900; }.plan-note,.plan-roadmap { margin:14px 0 0; color:#94a3b8; font-size:.69rem; line-height:1.45; }.plan-roadmap { margin-top:auto; padding-top:14px; border-top:1px solid rgba(148,163,184,.16); color:#bae6fd; }.licensing-status,.licensing-request { width:min(100%,680px); margin-top:14px; }.licensing-status { padding:16px 18px; }.licensing-status h2 { margin:4px 0; font-size:1.08rem; }.licensing-status p:last-child { margin:0; color:var(--text-muted); font-size:.82rem; }
.devices-plan-usage { margin:0 0 13px; color:var(--text-muted); font-size:.77rem; }.devices-plan-usage a { color:#7dd3fc; font-weight:800; text-decoration:none; }.devices-plan-usage a:hover { color:#e0f2fe; text-decoration:underline; }
.page-back-link { display:inline-flex; min-height:34px; align-items:center; gap:7px; margin:5px 0 18px; padding:7px 10px; border:1px solid rgba(148,163,184,.32); border-radius:7px; color:#dbe5ee; background:rgba(15,23,42,.62); font-size:.76rem; font-weight:800; text-decoration:none; transition:border-color .15s,background .15s,color .15s; }.page-back-link:hover { border-color:rgba(56,189,248,.72); color:#fff; background:rgba(14,116,144,.22); }.detail-hero { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:16px; }.detail-hero h1 { margin:0; font-size:clamp(1.5rem,2.8vw,2.2rem); }.detail-hero p { margin:5px 0 0; color:var(--text-muted); }.detail-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px; }.detail-card { display:grid; grid-template-columns:minmax(0,1fr) 42px; min-height:76px; align-items:center; gap:12px; padding:14px; }.detail-card-icon { display:grid; place-items:center; }.metric-icon { display:grid; width:42px; height:42px; place-items:center; border:1px solid rgba(var(--brand-primary-rgb),.28); border-radius:8px; color:#dbeafe; background:rgba(var(--brand-primary-rgb),.12); }.metric-icon svg { width:34px; height:34px; }.detail-card .metric-value { font-size:1.35rem; }.section-header { display:flex; align-items:end; justify-content:space-between; gap:12px; margin:24px 2px 10px; }.section-header h2 { margin:0; font-size:1.08rem; }.section-header p { margin:3px 0 0; color:var(--text-muted); font-size:.82rem; }.chart-panel { padding:16px; overflow-x:auto; }.cells-chart-wrap { position:relative; min-width:800px; }.cells-chart { display:block; width:100%; height:280px; }.cells-chart rect:focus { outline:none; filter:brightness(1.35); }.chart-bar { cursor:pointer; }.chart-bar:hover,.chart-bar.is-selected { stroke:#f8fafc !important; stroke-width:2 !important; filter:brightness(1.25); }.cells-chart-tooltip { position:absolute; z-index:2; display:grid; min-width:160px; gap:3px; padding:9px 10px; border:1px solid rgba(148,163,184,.32); border-radius:7px; color:#e2e8f0; background:rgba(8,11,16,.96); box-shadow:0 12px 28px rgba(0,0,0,.4); font-size:.75rem; line-height:1.35; pointer-events:none; }.cells-chart-tooltip strong { color:#fff; font-size:.8rem; }.chart-axis { fill:var(--text-muted); font-size:11px; }.chart-label { fill:#cbd5e1; font-size:10px; }.cells-chart-legend { display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:12px; color:var(--text-muted); font-size:.75rem; font-weight:700; }.cells-chart-legend span { display:inline-flex; align-items:center; gap:5px; }.legend-swatch { width:10px; height:10px; border-radius:3px; background:#38bdf8; }.legend-swatch--minimum { background:#818cf8; }.legend-swatch--maximum { background:#f97316; }.legend-swatch--balancing { background:#c084fc; }.legend-swatch--outside { background:#fb7185; }.module-grid,.errors-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }.module-card { padding:14px; }.module-header { display:flex; justify-content:space-between; gap:10px; margin-bottom:12px; }.module-header h3 { margin:0; font-size:1rem; }.module-header span { color:var(--text-muted); font-size:.82rem; font-weight:700; }.cells-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }.cell { min-width:0; min-height:49px; padding:6px 3px; border:1px solid rgba(56,189,248,.28); border-radius:7px; color:#e2e8f0; background:rgba(15,23,42,.62); font:inherit; text-align:center; cursor:pointer; transition:border-color .15s,background .15s,box-shadow .15s,transform .15s; }.cell:hover { border-color:rgba(56,189,248,.82); background:rgba(56,189,248,.11); }.cell.is-minimum { border-color:#818cf8; background:rgba(129,140,248,.14); }.cell.is-maximum { border-color:#f97316; background:rgba(249,115,22,.14); }.cell.is-balancing { border-color:#c084fc; background:rgba(192,132,252,.16); }.cell.is-outside-limit { border-color:#fb7185; background:rgba(251,113,133,.16); }.cell.is-selected { z-index:1; border-color:#f8fafc; box-shadow:0 0 0 2px rgba(248,250,252,.75); transform:translateY(-1px); }.cell-id { display:block; overflow:hidden; color:var(--text-muted); font-size:.61rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }.cell-voltage { display:block; margin-top:3px; overflow:hidden; font-size:.68rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }.temperature-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }.temperature-chip { padding:4px 7px; border-radius:99px; color:#cbd5e1; background:rgba(51,65,85,.7); font-size:.69rem; font-weight:700; }.error-card { padding:14px; border-left:3px solid #ef4444; }.error-card h3 { margin:0; color:#fecaca; font-size:.96rem; }.error-card p { margin:5px 0 0; color:#cbd5e1; font-size:.82rem; }.error-card time { display:block; margin-top:8px; color:var(--text-muted); font-size:.72rem; }
.auth-page { background:radial-gradient(circle at 15% 15%,rgba(var(--brand-primary-rgb),.28),transparent 32rem),linear-gradient(180deg,#0f172a 0%,var(--page-bg) 70%,#05070b 100%); }.auth-layout { display:grid; min-height:100vh; grid-template-columns:minmax(330px,1fr) minmax(400px,.9fr); }.auth-brand { display:flex; padding:clamp(2rem,6vw,6rem); flex-direction:column; border-right:1px solid var(--panel-border); }.auth-brand-copy { max-width:40rem; margin:auto 0; }.auth-brand-copy h1 { max-width:12ch; margin:0; font-size:clamp(3rem,6vw,5.6rem); line-height:.98; letter-spacing:-.065em; }.auth-brand-copy p:last-child { max-width:28rem; margin:1.6rem 0 0; color:#cbd5e1; font-size:1.05rem; line-height:1.6; }.auth-footnote { margin:0; color:var(--text-muted); font-size:.82rem; }.auth-panel { display:grid; padding:2rem; place-items:center; background:rgba(2,6,23,.25); }.auth-card { width:min(100%,430px); }.auth-card h2 { margin:5px 0 0; font-size:clamp(1.9rem,3vw,2.45rem); letter-spacing:-.045em; }.auth-card > .view-subtitle { margin:9px 0 28px; line-height:1.5; }
.cloud-form { display:grid; gap:14px; }.form-field { display:grid; gap:6px; color:#cbd5e1; font-size:.82rem; font-weight:750; }.form-field input { width:100%; min-height:48px; padding:10px; border:1px solid var(--panel-border); border-radius:7px; outline:0; color:#f8fafc; background:rgba(15,23,42,.85); }.form-field input:focus { border-color:var(--brand-secondary); box-shadow:0 0 0 3px rgba(var(--brand-primary-rgb),.18); }.field-hint { color:var(--text-muted); font-size:.75rem; font-weight:600; }.scan-button { min-height:46px; padding:8px 12px; border:1px solid rgba(var(--brand-primary-rgb),.55); border-radius:8px; color:#fff; background:var(--brand-primary); font-weight:750; cursor:pointer; }.scan-button:hover { background:#b45309; }.form-footnote { margin:3px 0 0; color:var(--text-muted); font-size:.88rem; text-align:center; }.form-footnote a { color:var(--brand-secondary); font-weight:800; text-decoration:none; }.form-footnote a:hover { text-decoration:underline; }.form-alert { margin:0 0 4px; padding:10px 12px; border:1px solid rgba(239,68,68,.45); border-radius:8px; color:#fecaca; background:rgba(127,29,29,.25); font-size:.86rem; line-height:1.4; }.form-alert--success { border-color:rgba(34,197,94,.45); color:#bbf7d0; background:rgba(20,83,45,.34); }.resend-code { min-height:42px; justify-content:center; border:1px solid var(--panel-border); text-align:center; }
.chart-section-header { align-items:center; }.chart-range-switch { display:flex; flex-wrap:wrap; gap:6px; }.chart-control,.chart-module-button { border:1px solid rgba(148,163,184,.3); border-radius:7px; color:#cbd5e1; background:rgba(15,23,42,.64); font:inherit; font-size:.73rem; font-weight:800; cursor:pointer; transition:border-color .15s,background .15s,color .15s; }.chart-control { min-height:32px; padding:6px 9px; }.chart-control:hover,.chart-module-button:hover { border-color:rgba(56,189,248,.72); color:#fff; }.chart-control.is-active,.chart-module-button.is-active { border-color:rgba(56,189,248,.85); color:#e0f2fe; background:rgba(14,116,144,.3); }.cells-chart-module-controls { display:flex; gap:7px; margin-bottom:12px; padding-bottom:2px; overflow-x:auto; scrollbar-width:thin; }.chart-module-button { display:grid; min-width:66px; min-height:38px; padding:5px 8px; place-items:center; white-space:nowrap; }.chart-module-button span { color:var(--text-muted); font-size:.61rem; font-weight:700; }.chart-module-button.is-active span { color:#bae6fd; }.chart-panel { overflow:visible; }.cells-chart-wrap { min-width:0; }.cells-chart-footer { display:flex; flex-direction:column; gap:4px; }.cells-chart-range-note { color:var(--text-muted); font-size:.72rem; font-weight:700; }.cells-chart-legend { margin-top:4px; }
.cells-chart-zoom-controls { display:flex; align-items:center; justify-content:center; gap:10px; margin:-2px 0 10px; color:var(--text-muted); font-size:.73rem; font-weight:800; }.chart-zoom-button { width:28px; height:28px; border:1px solid rgba(148,163,184,.3); border-radius:6px; color:#e2e8f0; background:rgba(15,23,42,.64); font:inherit; font-size:1.2rem; line-height:1; cursor:pointer; }.chart-zoom-button:hover:not(:disabled) { border-color:rgba(56,189,248,.72); color:#fff; }.chart-zoom-button:disabled { cursor:not-allowed; opacity:.35; }.legend-swatch--global-minimum { background:#6366f1; }.legend-swatch--global-maximum { background:#f59e0b; }.legend-balance-marker { display:grid; width:12px; height:12px; place-items:center; border:1px solid #fff; border-radius:50%; color:#fff; background:#ef4444; font-size:.7rem; font-style:normal; font-weight:900; line-height:1; }.cell { position:relative; }.cell.is-module-minimum { border-color:#818cf8; background:rgba(129,140,248,.14); }.cell.is-module-maximum { border-color:#f97316; background:rgba(249,115,22,.14); }.cell.is-global-minimum { border-color:#6366f1; background:rgba(99,102,241,.17); }.cell.is-global-maximum { border-color:#f59e0b; background:rgba(245,158,11,.16); }.cell.is-balancing:not(.is-module-minimum):not(.is-module-maximum):not(.is-global-minimum):not(.is-global-maximum) { border-color:rgba(56,189,248,.28); background:rgba(15,23,42,.62); }.cell-balancing-marker { position:absolute; z-index:1; display:grid; place-items:center; box-sizing:border-box; pointer-events:none; top:4px; right:4px; width:14px; height:14px; color:#fff; background:#ef4444; font-size:.76rem; font-style:normal; font-weight:900; line-height:1; }
.chart-panel { overflow-x:auto; overflow-y:visible; }.cells-chart-wrap { width:max-content; min-width:100%; }.cells-chart-zoom-controls small { display:block; margin-top:1px; color:var(--text-muted); font-size:.62rem; font-weight:650; text-align:center; }.legend-balance-marker { width:12px; height:14px; border:0; border-radius:0; color:#f43f5e; background:transparent; }.legend-balance-marker svg,.cell-balancing-marker svg { width:100%; height:100%; fill:currentColor; }.cell-balancing-marker { top:3px; right:3px; width:15px; height:17px; border:0; border-radius:0; color:#f43f5e; background:transparent; filter:drop-shadow(0 1px 1px rgba(0,0,0,.55)); }
.chart-panel { overflow:visible; }.cells-chart-layout { display:flex; min-width:0; }.cells-chart-axis { display:block; width:58px; height:280px; flex:0 0 58px; }.cells-chart-scroll { min-width:0; flex:1; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; }.cells-chart-wrap { width:100%; min-width:100%; }.cells-chart { max-width:none; }.cells-chart-scroll .cells-chart { display:block; }
.cells-chart-layout { display:grid; width:100%; grid-template-columns:58px minmax(0,1fr); }.cells-chart-axis { width:58px; min-width:0; max-width:58px; }.cells-chart-scroll { width:100%; }.cells-chart-wrap { min-width:0; }
.cells-chart-stage { position:relative; width:100%; min-width:0; }.cells-chart-y-axis { position:absolute; z-index:2; top:0; bottom:0; left:0; width:58px; pointer-events:none; }.cells-chart-y-label { position:absolute; right:4px; color:var(--text-muted); font-size:11px; line-height:1; transform:translateY(-50%); white-space:nowrap; }.cells-chart-stage .cells-chart-scroll { margin-left:58px; width:calc(100% - 58px); min-width:0; }.cells-chart-stage .cells-chart-wrap { min-width:0; }
.cells-chart-tooltip[hidden] { display:none; }
.cells-chart-tooltip { pointer-events:auto; }

/* Cell-extrema legend and module cards: local values use purple/orange;
   BMS-reported global values use blue/yellow, so the distinction remains
   clear even before the white chart-bar outline is noticed. */
.legend-swatch--minimum { background:#8b5cf6; }.legend-swatch--maximum { background:#f97316; }.legend-swatch--global-minimum { background:#2563eb; }.legend-swatch--global-maximum { background:#eab308; }
.cell.is-module-minimum { border-color:#8b5cf6; background:rgba(139,92,246,.14); }.cell.is-module-maximum { border-color:#f97316; background:rgba(249,115,22,.14); }.cell.is-global-minimum { border-color:#2563eb; background:rgba(37,99,235,.18); }.cell.is-global-maximum { border-color:#eab308; background:rgba(234,179,8,.16); }
.detail-hero-actions { display:flex; align-items:center; gap:9px; }.detail-action-link { display:inline-flex; min-height:34px; align-items:center; gap:7px; padding:7px 10px; border:1px solid rgba(148,163,184,.32); border-radius:7px; color:#dbe5ee; background:rgba(15,23,42,.62); font-size:.76rem; font-weight:800; text-decoration:none; }.detail-action-link:hover { border-color:rgba(56,189,248,.72); color:#fff; background:rgba(14,116,144,.22); }.detail-action-link svg { width:16px; height:16px; color:#38bdf8; }.history-data-state { display:inline-flex; align-items:center; gap:7px; color:var(--text-muted); font-size:.75rem; font-weight:750; }.history-data-state i { width:7px; height:7px; border-radius:50%; background:#f59e0b; box-shadow:0 0 9px rgba(245,158,11,.72); }.history-workspace { padding:16px; }.history-controls { display:flex; align-items:center; justify-content:space-between; gap:13px; padding-bottom:14px; border-bottom:1px solid rgba(148,163,184,.14); }.history-controls .label,.history-selector .label { margin-bottom:7px; white-space:nowrap; }.history-range-buttons,.history-preset-buttons,.history-metric-buttons { display:flex; flex-wrap:wrap; gap:5px; }.history-range-buttons button,.history-preset-buttons button,.history-metric-buttons button { min-height:31px; padding:6px 10px; border:1px solid rgba(148,163,184,.28); border-radius:7px; color:#cbd5e1; background:rgba(15,23,42,.64); font:inherit; font-size:.75rem; font-weight:800; cursor:pointer; }.history-range-buttons button:hover,.history-preset-buttons button:hover,.history-metric-buttons button:hover { border-color:rgba(56,189,248,.72); color:#fff; }.history-range-buttons button.is-active,.history-preset-buttons button.is-active,.history-metric-buttons button.is-active { border-color:rgba(56,189,248,.85); color:#e0f2fe; background:rgba(14,116,144,.3); }.history-metric-buttons button { display:inline-flex; align-items:center; gap:6px; }.history-metric-buttons i { width:7px; height:7px; border-radius:99px; }.history-last-updated,.history-selection-note { margin:0; color:var(--text-muted); font-size:.72rem; font-weight:700; }.history-selector-row { display:grid; grid-template-columns:auto minmax(0,1fr); gap:22px; padding:15px 0 8px; }.history-selection-note { margin:0 0 12px; }.comparison-chart { position:relative; min-width:0; }.comparison-chart-header { display:flex; align-items:start; justify-content:space-between; gap:12px; margin:0 2px 9px; }.comparison-chart h2 { margin:0; font-size:1.04rem; }.comparison-chart-header p { margin:4px 0 0; color:var(--text-muted); font-size:.71rem; font-weight:600; }.trend-legend { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px 10px; color:#cbd5e1; font-size:.68rem; font-weight:750; }.trend-legend span,.trend-tooltip span { display:inline-flex; align-items:center; gap:5px; }.trend-legend i,.trend-tooltip i { width:8px; height:8px; border-radius:99px; }.comparison-canvas { height:350px; }.comparison-canvas svg { display:block; width:100%; height:100%; overflow:visible; touch-action:pan-y; }.trend-grid-line { stroke:rgba(148,163,184,.18); stroke-width:1; }.trend-axis-label { fill:#94a3b8; font-size:10px; font-weight:650; }.trend-tooltip { position:absolute; z-index:3; display:grid; min-width:148px; gap:5px; padding:9px 10px; border:1px solid rgba(148,163,184,.32); border-radius:7px; color:#e2e8f0; background:rgba(8,11,16,.97); box-shadow:0 12px 28px rgba(0,0,0,.4); font-size:.72rem; line-height:1.35; pointer-events:none; }.trend-tooltip strong { color:#fff; font-size:.74rem; }.trend-tooltip[hidden] { display:none; }
.language-switcher { display:inline-flex; overflow:hidden; border:1px solid var(--panel-border); border-radius:7px; background:rgba(15,23,42,.75); }.language-switcher button { min-width:34px; min-height:30px; padding:5px 7px; border:0; border-left:1px solid var(--panel-border); color:var(--text-muted); background:transparent; font-size:.7rem; font-weight:850; cursor:pointer; }.language-switcher button:first-of-type { border-left:0; }.language-switcher button:hover { color:#fff; background:rgba(56,189,248,.13); }.language-switcher button.is-active { color:#e0f2fe; background:rgba(14,116,144,.42); }.auth-language { position:fixed; z-index:3; top:16px; right:18px; }
@media(max-width:1000px) { .detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:800px) { .app-shell { display:block; padding:8px 8px 18px; }.custom-top-bar { position:static; height:auto; min-height:0; margin-bottom:14px; }.cloud-nav,.cloud-account { display:none; }.auth-layout { grid-template-columns:1fr; }.auth-brand { min-height:auto; padding:1.5rem; border-right:0; border-bottom:1px solid var(--panel-border); }.auth-brand-copy,.auth-footnote { display:none; }.auth-panel { align-items:start; padding:2.5rem 1.4rem; }.view-header { align-items:start; flex-direction:column; }.summary { grid-template-columns:1fr; } } @media(max-width:620px) { .detail-grid { grid-template-columns:1fr; }.detail-hero { align-items:start; flex-direction:column; }.cells-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }.chart-section-header { align-items:start; flex-direction:column; }.chart-range-switch { width:100%; }.chart-control { flex:1; }.chart-panel { padding:12px 10px; }.cells-chart,.cells-chart-axis { height:250px; }.chart-axis { font-size:10px; }.chart-label { font-size:9px; }.cells-chart-legend { gap:7px 11px; font-size:.7rem; }.cells-chart-tooltip { min-width:142px; font-size:.71rem; } }
@media(max-width:620px) { .cells-chart-y-label { font-size:10px; } }
.history-custom-dates { display:inline-flex; align-items:end; gap:7px; }.history-custom-dates[hidden] { display:none; }.history-custom-dates label { display:grid; gap:3px; color:var(--text-muted); font-size:.63rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }.history-custom-dates input { min-height:31px; width:174px; padding:5px 7px; border:1px solid rgba(148,163,184,.28); border-radius:7px; color:#e2e8f0; background:rgba(15,23,42,.75); font:inherit; font-size:.75rem; color-scheme:dark; }.trend-pointer-line { stroke:rgba(226,232,240,.78); stroke-width:1.2; stroke-dasharray:5 5; vector-effect:non-scaling-stroke; pointer-events:none; }.trend-selection-range { fill:rgba(56,189,248,.18); stroke:rgba(56,189,248,.9); stroke-width:1; vector-effect:non-scaling-stroke; pointer-events:none; }
.trend-axis-title { font-size:7px; font-weight:850; letter-spacing:.02em; text-transform:uppercase; }
.comparison-canvas { height:390px; }.trend-axis-label { font-family:inherit; font-size:10px; font-weight:500; }.trend-axis-title { font-size:9px; font-weight:700; letter-spacing:.01em; }
.detail-hero-actions { flex-wrap:wrap; }.configuration-form > .form-alert { margin:16px 20px 0; }
.configuration-form { width:min(100%,760px); padding:0; overflow:hidden; }.configuration-section { padding:20px; border-bottom:1px solid rgba(148,163,184,.16); }.configuration-section:last-of-type { border-bottom:0; }.configuration-section-header { margin-bottom:16px; }.configuration-section-header h2 { margin:4px 0 0; font-size:1.08rem; }.configuration-section-header p { margin:5px 0 0; color:var(--text-muted); font-size:.82rem; line-height:1.45; }.configuration-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.configuration-fields--general { grid-template-columns:minmax(0,1fr); max-width:440px; }.input-with-unit { position:relative; }.input-with-unit input { padding-right:42px; }.input-with-unit span { position:absolute; right:12px; bottom:15px; color:var(--text-muted); font-size:.76rem; font-weight:750; pointer-events:none; }.configuration-actions { display:flex; justify-content:flex-end; padding:16px 20px; border-top:1px solid rgba(148,163,184,.16); }.configuration-actions .scan-button { min-width:176px; }
.configuration-access-notice { width:min(100%,760px); margin:0 0 14px; }.configuration-device-actions { display:flex; flex-wrap:wrap; gap:9px; }.configuration-device-actions .detail-action-link { min-height:38px; cursor:pointer; }.configuration-device-actions .detail-action-link:disabled { cursor:not-allowed; opacity:.42; }.configuration-switch { align-content:start; }.switch-control { display:inline-flex; width:max-content; align-items:center; cursor:pointer; }.switch-control input { position:absolute; width:1px; height:1px; opacity:0; }.switch-control i { position:relative; display:block; width:44px; height:25px; border:1px solid rgba(148,163,184,.42); border-radius:99px; background:rgba(51,65,85,.72); transition:background .16s,border-color .16s; }.switch-control i::after { position:absolute; top:3px; left:3px; width:17px; height:17px; border-radius:50%; background:#cbd5e1; box-shadow:0 1px 3px rgba(0,0,0,.45); content:''; transition:transform .16s,background .16s; }.switch-control input:checked + i { border-color:rgba(34,197,94,.74); background:rgba(22,163,74,.62); }.switch-control input:checked + i::after { transform:translateX(19px); background:#f0fdf4; }.switch-control input:focus-visible + i { box-shadow:0 0 0 3px rgba(56,189,248,.23); }.switch-control input:disabled + i { cursor:not-allowed; opacity:.45; }
.device-friendly-name { display:flex; align-items:baseline; gap:7px; margin:5px 0 9px; color:var(--text-muted); font-size:.76rem; font-weight:700; }.device-friendly-name span { font-size:.65rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }.device-friendly-name strong { min-width:0; overflow:hidden; color:#e2e8f0; font-size:.84rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.configuration-layout { display:grid; grid-template-columns:minmax(0,760px) minmax(210px,300px); align-items:start; gap:14px; }.configuration-device-panel { padding:18px; }.configuration-device-panel .configuration-section-header { margin-bottom:14px; }.configuration-device-panel .configuration-device-actions { display:grid; grid-template-columns:1fr; }.configuration-device-panel .detail-action-link { width:100%; justify-content:center; text-align:center; }.configuration-device-panel .configuration-section-header p { margin:5px 0 0; color:var(--text-muted); font-size:.78rem; line-height:1.45; }.configuration-device-panel .configuration-section-header h2 { margin:4px 0 0; font-size:1.08rem; } @media(max-width:1080px) { .configuration-layout { grid-template-columns:minmax(0,1fr); }.configuration-device-panel { width:min(100%,760px); }.configuration-device-panel .configuration-device-actions { grid-template-columns:repeat(3,minmax(0,1fr)); } } @media(max-width:620px) { .configuration-device-panel .configuration-device-actions { grid-template-columns:1fr; } }
.detail-summary-heading { margin-top:0; }.detail-card--live { position:relative; display:flex; min-height:154px; flex-direction:column; gap:0; padding:13px 14px 10px; overflow:hidden; background:linear-gradient(180deg,rgba(30,41,59,.88),rgba(15,23,42,.9)); }.metric-live-topline,.health-card-topline { display:flex; align-items:center; justify-content:space-between; gap:10px; }.detail-card--live .detail-card-icon,.health-card .detail-card-icon { width:38px; height:38px; flex:0 0 38px; }.detail-card--live .metric-icon,.health-card .metric-icon { width:38px; height:38px; }.detail-card--live .metric-icon svg,.health-card .metric-icon svg { width:30px; height:30px; }.detail-card--live .metric-value { margin-top:10px; font-size:clamp(1.35rem,2.2vw,1.7rem); font-weight:850; line-height:1.05; letter-spacing:-.035em; }.metric-secondary { margin-top:4px; color:#cbd5e1; font-size:.78rem; font-weight:750; line-height:1.1; }.metric-detail { display:flex; min-height:17px; align-items:center; gap:6px; margin:7px 0 0; overflow:hidden; color:var(--text-muted); font-size:.71rem; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }.metric-live-status { width:6px; height:6px; flex:0 0 6px; border-radius:50%; background:#22c55e; box-shadow:0 0 8px rgba(34,197,94,.55); }.detail-card--live.is-warning .metric-live-status { background:#fb7185; box-shadow:0 0 8px rgba(251,113,133,.55); }.metric-sparkline { width:100%; height:24px; margin-top:auto; overflow:visible; }.metric-sparkline polyline { fill:none; stroke:#38bdf8; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }.metric-sparkline.is-warning polyline { stroke:#fb7185; }.metric-sparkline.is-loading line { stroke:rgba(56,189,248,.4); stroke-width:1.2; stroke-dasharray:3 4; animation:metric-sparkline-wait 1.1s linear infinite; }.health-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-bottom:16px; }.health-card { min-height:138px; padding:13px 14px; }.health-card .detail-card-icon { display:grid; place-items:center; }.metric-mini-values { display:grid; grid-template-columns:repeat(auto-fit,minmax(54px,1fr)); gap:6px; margin-top:14px; }.metric-mini-values span { min-width:0; padding-right:6px; border-right:1px solid rgba(148,163,184,.16); }.metric-mini-values span:last-child { padding-right:0; border-right:0; }.metric-mini-values small { display:block; overflow:hidden; color:var(--text-muted); font-size:.58rem; font-weight:750; letter-spacing:.04em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }.metric-mini-values strong { display:block; margin-top:3px; overflow:hidden; color:#f8fafc; font-size:.9rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }.health-emphasis { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-top:13px; padding-top:10px; border-top:1px solid rgba(148,163,184,.16); }.health-emphasis small { color:var(--text-muted); font-size:.67rem; font-weight:750; letter-spacing:.04em; text-transform:uppercase; }.health-emphasis strong { color:#f8fafc; font-size:1.18rem; font-weight:850; line-height:1; letter-spacing:-.025em; }
.contactor-card { min-height:152px; }.contactor-schematic { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:12px; }.contactor-node { display:grid; min-width:0; justify-items:center; gap:3px; padding:6px 3px; border:1px solid rgba(100,116,139,.32); border-radius:7px; color:#64748b; background:rgba(2,6,23,.22); }.contactor-node small { color:currentColor; font-size:.57rem; font-weight:850; letter-spacing:.07em; line-height:1; }.contactor-node svg { width:40px; max-width:100%; height:17px; overflow:visible; }.contactor-node path { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; vector-effect:non-scaling-stroke; }.contactor-node .contactor-blade { stroke-width:2.8; transition:stroke .2s; }.contactor-node.is-closed { border-color:rgba(74,222,128,.54); color:#86efac; background:rgba(20,83,45,.18); box-shadow:inset 0 0 16px rgba(34,197,94,.08),0 0 12px rgba(34,197,94,.08); }.contactor-node.is-closed .contactor-blade { stroke:#f0fdf4; stroke-width:4.2; }.contactor-joined { fill:#4ade80; stroke:#f0fdf4; stroke-width:1.35; filter:drop-shadow(0 0 3px rgba(74,222,128,.95)); }.contactor-node.is-open { border-color:rgba(148,163,184,.24); color:#94a3b8; }.contactor-node.is-unknown { border-style:dashed; color:#64748b; }.contactor-pwm { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:7px; margin-top:8px; padding-top:8px; border-top:1px solid rgba(148,163,184,.16); }.contactor-pwm span { display:flex; align-items:baseline; gap:5px; white-space:nowrap; }.contactor-pwm small { color:var(--text-muted); font-size:.59rem; font-weight:800; letter-spacing:.05em; }.contactor-pwm strong { color:#dbeafe; font-size:.7rem; font-weight:850; }.contactor-pwm > i { display:block; height:5px; overflow:hidden; border-radius:99px; background:rgba(100,116,139,.3); }.contactor-pwm b { display:block; height:100%; border-radius:inherit; background:#38bdf8; box-shadow:0 0 8px rgba(56,189,248,.65); }
.technical-diagnostics-card { grid-column:span 2; min-height:0; }.technical-diagnostics-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 12px; margin-top:12px; }.technical-diagnostics-list span { min-width:0; color:#cbd5e1; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.68rem; font-weight:700; line-height:1.35; } @media(max-width:620px) { .technical-diagnostics-card { grid-column:span 1; }.technical-diagnostics-list { grid-template-columns:1fr; } }
@keyframes metric-sparkline-wait { to { stroke-dashoffset:-14; } }
.current-limit-meter { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:3px 8px; margin-top:10px; color:#86efac; }.current-limit-meter span { overflow:hidden; color:var(--text-muted); font-size:.59rem; font-weight:800; letter-spacing:.05em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }.current-limit-meter strong { color:inherit; font-size:.64rem; font-weight:850; white-space:nowrap; }.current-limit-meter i { grid-column:1 / -1; display:block; height:5px; overflow:hidden; border-radius:99px; background:rgba(148,163,184,.2); }.current-limit-meter b { display:block; width:var(--usage); height:100%; border-radius:inherit; background:currentColor; box-shadow:0 0 8px currentColor; }
.energy-flow-card.is-discharging .current-limit-meter { color:#fb923c; }
.detail-grid--live { display:block; margin-bottom:16px; }.live-overview { display:grid; grid-template-columns:minmax(260px,1.55fr) minmax(168px,.8fr) minmax(158px,.75fr) minmax(158px,.75fr); gap:12px; }.energy-flow-card,.overview-soc-card,.overview-metric-card { min-width:0; min-height:174px; padding:15px; overflow:hidden; background:linear-gradient(145deg,rgba(30,41,59,.92),rgba(12,19,33,.94)); }.energy-flow-card { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 116px; align-items:center; gap:6px 12px; border-color:rgba(56,189,248,.38); }.energy-flow-card.no-flow { grid-template-columns:minmax(0,1fr); }.energy-flow-copy { min-width:0; }.energy-flow-value { margin-top:8px; overflow:hidden; color:#f8fafc; font-size:clamp(1.7rem,3.1vw,2.35rem); font-weight:870; letter-spacing:-.05em; line-height:1; text-overflow:ellipsis; white-space:nowrap; }.energy-flow-current { margin-top:6px; color:#cbd5e1; font-size:.82rem; font-weight:800; }.energy-flow-state { display:flex; align-items:center; gap:6px; margin:10px 0 0; overflow:hidden; color:#a5f3c8; font-size:.73rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }.energy-flow-state i { width:7px; height:7px; flex:0 0 7px; border-radius:99px; background:currentColor; box-shadow:0 0 9px currentColor; }.energy-flow-visual { display:grid; place-items:center; color:#4ade80; }.energy-flow-visual svg { width:116px; max-width:100%; overflow:visible; }.energy-flow-path { fill:none; stroke:currentColor; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:7 7; animation:energy-flow-dash 1.3s linear infinite; }.energy-flow-visual circle { fill:rgba(34,197,94,.16); stroke:currentColor; stroke-width:1.4; }.energy-flow-home { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }.energy-flow-card .metric-sparkline { grid-column:1 / -1; height:21px; margin-top:0; }.energy-flow-card.is-discharging { border-color:rgba(249,115,22,.5); }.energy-flow-card.is-discharging .energy-flow-visual { color:#fb923c; }.energy-flow-card.is-discharging .energy-flow-state { color:#fdba74; }.energy-flow-card.is-discharging .metric-sparkline polyline { stroke:#fb923c; }.energy-flow-card.is-alarm { border-color:rgba(251,113,133,.68); }.energy-flow-card.is-alarm .energy-flow-visual,.energy-flow-card.is-alarm .energy-flow-state { color:#fb7185; }.energy-flow-card.is-alarm .metric-sparkline polyline { stroke:#fb7185; }.energy-flow-card.is-offline { border-color:rgba(148,163,184,.34); }.energy-flow-card.is-offline .energy-flow-visual,.energy-flow-card.is-offline .energy-flow-state { color:#94a3b8; }.energy-flow-card.is-offline .energy-flow-path { animation:none; }.energy-flow-card.is-offline .metric-sparkline polyline { stroke:#64748b; }.overview-soc-card { display:grid; justify-items:center; align-content:start; padding-top:15px; text-align:center; }.overview-soc-card > .label { justify-self:start; }.overview-soc-gauge { position:relative; display:grid; width:108px; height:108px; margin-top:8px; place-items:center; border-radius:50%; background:conic-gradient(#38bdf8 var(--soc),rgba(71,85,105,.34) 0); box-shadow:0 0 0 1px rgba(56,189,248,.24),0 14px 28px rgba(2,132,199,.13); }.overview-soc-gauge::before { position:absolute; width:88px; height:88px; border-radius:50%; background:#101a2c; content:''; }.overview-soc-gauge > div { position:relative; display:grid; gap:2px; place-items:center; }.overview-soc-gauge strong { color:#f8fafc; font-size:1.5rem; letter-spacing:-.045em; }.overview-soc-gauge small { color:#7dd3fc; font-size:.58rem; font-weight:850; letter-spacing:.1em; }.overview-soc-card > p { margin:8px 0 0; color:var(--text-muted); font-size:.66rem; font-weight:700; }.overview-metric-card { display:flex; flex-direction:column; }.overview-metric-topline { display:flex; align-items:center; justify-content:space-between; gap:8px; }.overview-metric-card .detail-card-icon { width:34px; height:34px; flex:0 0 34px; }.overview-metric-card .metric-icon { width:34px; height:34px; }.overview-metric-card .metric-icon svg { width:26px; height:26px; }.overview-metric-value { display:block; margin-top:14px; overflow:hidden; color:#f8fafc; font-size:clamp(1.25rem,2.1vw,1.65rem); font-weight:850; letter-spacing:-.035em; line-height:1.05; text-overflow:ellipsis; white-space:nowrap; }.overview-metric-detail { min-height:31px; margin:7px 0 0; color:var(--text-muted); font-size:.66rem; font-weight:650; line-height:1.35; }.overview-metric-card .metric-sparkline { height:22px; margin-top:auto; }.overview-metric-card.is-warning { border-color:rgba(251,113,133,.58); }.live-context-strip { display:flex; align-items:center; gap:0; min-height:52px; margin-top:12px; padding:0 14px; overflow:hidden; }.live-context-strip span { display:grid; min-width:0; flex:1 1 0; gap:3px; padding:0 13px; border-left:1px solid rgba(148,163,184,.16); }.live-context-strip span:first-child { padding-left:0; border-left:0; }.live-context-strip span:last-child { padding-right:0; }.live-context-strip small { overflow:hidden; color:var(--text-muted); font-size:.57rem; font-weight:800; letter-spacing:.06em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }.live-context-strip strong { overflow:hidden; color:#dbeafe; font-size:.73rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.device-runtime-strip { display:flex; align-items:stretch; gap:7px; margin:0 0 14px; overflow-x:auto; scrollbar-width:thin; }.device-runtime-item { display:grid; min-width:132px; gap:3px; padding:8px 10px; border:1px solid rgba(148,163,184,.22); border-radius:8px; background:rgba(15,23,42,.62); }.device-runtime-item small { overflow:hidden; color:var(--text-muted); font-size:.59rem; font-weight:800; letter-spacing:.055em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }.device-runtime-item strong { overflow:hidden; color:#e2e8f0; font-size:.75rem; text-overflow:ellipsis; white-space:nowrap; }.device-runtime-item.is-ok { border-color:rgba(74,222,128,.38); }.device-runtime-item.is-ok strong { color:#86efac; }.device-runtime-item.is-muted strong { color:#cbd5e1; }.device-runtime-item.is-balancing { border-color:rgba(192,132,252,.48); background:rgba(88,28,135,.16); }.device-runtime-item.is-balancing strong { color:#e9d5ff; }.device-runtime-item.is-balancing::before { width:6px; height:6px; border-radius:50%; background:#c084fc; box-shadow:0 0 9px rgba(192,132,252,.8); content:''; }
@keyframes energy-flow-dash { to { stroke-dashoffset:-28; } }
@media(max-width:1050px) { .live-overview { grid-template-columns:repeat(2,minmax(0,1fr)); }.energy-flow-card { grid-column:span 2; }.overview-soc-card,.overview-metric-card { min-height:160px; } }
@media(max-width:620px) { .live-overview { gap:9px; }.energy-flow-card,.overview-soc-card,.overview-metric-card { min-height:154px; padding:13px; }.energy-flow-card { grid-template-columns:minmax(0,1fr) 100px; }.energy-flow-card.no-flow { grid-template-columns:minmax(0,1fr); }.energy-flow-visual svg { width:100px; }.energy-flow-value { font-size:1.7rem; }.overview-soc-gauge { width:96px; height:96px; }.overview-soc-gauge::before { width:78px; height:78px; }.overview-soc-gauge strong { font-size:1.32rem; }.live-context-strip { align-items:stretch; min-height:0; padding:5px 10px; }.live-context-strip span { min-width:33.333%; padding:7px 8px; }.live-context-strip strong { font-size:.66rem; } }
.overview-soh-card { display:grid; min-width:0; min-height:174px; padding:15px; overflow:hidden; align-content:start; background:linear-gradient(145deg,rgba(30,41,59,.92),rgba(12,19,33,.94)); }.overview-soh-topline { display:flex; align-items:center; justify-content:space-between; gap:8px; }.overview-soh-card .detail-card-icon { width:34px; height:34px; flex:0 0 34px; }.overview-soh-card .detail-card-icon .metric-icon { width:34px; height:34px; }.overview-soh-card .detail-card-icon .metric-icon svg { width:26px; height:26px; }.overview-soh-gauge { --soh-color:#4ade80; position:relative; display:grid; width:100px; height:100px; margin:9px auto 0; place-items:center; border-radius:50%; background:conic-gradient(var(--soh-color) var(--soh),rgba(71,85,105,.34) 0); box-shadow:0 0 0 1px rgba(74,222,128,.32),0 14px 28px rgba(34,197,94,.14); }.overview-soh-gauge::before { position:absolute; width:80px; height:80px; border-radius:50%; background:#101a2c; content:''; }.overview-soh-gauge > div { position:relative; display:grid; gap:2px; place-items:center; }.overview-soh-gauge strong { color:#f8fafc; font-size:1.28rem; letter-spacing:-.045em; line-height:1; }.overview-soh-gauge small { color:var(--soh-color); font-size:.56rem; font-weight:850; letter-spacing:.1em; }.overview-soh-card > p { min-height:18px; margin:7px 0 0; overflow:hidden; color:var(--text-muted); font-size:.66rem; font-weight:700; line-height:1.35; text-align:center; text-overflow:ellipsis; }.overview-soh-card.is-watch .overview-soh-gauge { --soh-color:#fbbf24; box-shadow:0 0 0 1px rgba(251,191,36,.32),0 14px 28px rgba(245,158,11,.14); }.overview-soh-card.is-poor .overview-soh-gauge { --soh-color:#fb7185; box-shadow:0 0 0 1px rgba(251,113,133,.32),0 14px 28px rgba(225,29,72,.14); }.overview-soh-card.is-unknown .overview-soh-gauge { --soh-color:#94a3b8; background:conic-gradient(rgba(100,116,139,.55) 0 100%,rgba(71,85,105,.34) 0); box-shadow:0 0 0 1px rgba(148,163,184,.2); }.overview-soh-card.is-unknown .overview-soh-gauge strong { color:#cbd5e1; }
@media(max-width:1050px) { .overview-soh-card { min-height:160px; } }
@media(max-width:620px) { .overview-soh-card { min-height:154px; padding:13px; }.overview-soh-gauge { width:92px; height:92px; }.overview-soh-gauge::before { width:74px; height:74px; } }
.error-section-header { align-items:center; }.error-actions { display:flex; align-items:center; gap:8px; }.clear-errors-button { min-height:32px; padding:6px 10px; border:1px solid rgba(251,113,133,.5); border-radius:7px; color:#fecaca; background:rgba(127,29,29,.2); font:inherit; font-size:.74rem; font-weight:800; cursor:pointer; }.clear-errors-button:hover:not(:disabled) { background:rgba(153,27,27,.45); }.clear-errors-button:disabled { cursor:not-allowed; opacity:.45; }.last-errors-menu { position:relative; }.last-errors-menu summary { min-height:32px; padding:7px 10px; border:1px solid rgba(148,163,184,.28); border-radius:7px; color:#cbd5e1; background:rgba(15,23,42,.64); font-size:.74rem; font-weight:800; cursor:pointer; list-style:none; }.last-errors-menu summary::-webkit-details-marker { display:none; }.last-errors-list { position:absolute; z-index:4; top:calc(100% + 6px); right:0; display:grid; width:min(340px,calc(100vw - 30px)); gap:8px; padding:10px; border:1px solid rgba(148,163,184,.34); border-radius:8px; background:#0b1220; box-shadow:0 14px 32px rgba(0,0,0,.45); }.last-errors-list article { display:grid; grid-template-columns:auto 1fr; gap:5px 8px; padding-bottom:8px; border-bottom:1px solid rgba(148,163,184,.13); }.last-errors-list article:last-child { padding-bottom:0; border-bottom:0; }.last-errors-list strong { align-self:center; font-size:.78rem; }.last-errors-list p,.last-errors-list time { grid-column:1 / -1; margin:0; color:var(--text-muted); font-size:.72rem; line-height:1.35; }.history-errors-header { margin-top:22px; }.history-error-card { display:flex; align-items:start; justify-content:space-between; gap:12px; }.history-error-card .state { flex:0 0 auto; }.subscription-notice { position:fixed; z-index:6; top:13px; right:92px; display:grid; gap:2px; padding:7px 10px; border:1px solid rgba(245,158,11,.54); border-radius:8px; color:#fef3c7; background:rgba(120,53,15,.92); box-shadow:0 10px 24px rgba(0,0,0,.34); font-size:.69rem; font-weight:750; text-decoration:none; }.subscription-notice strong { color:#fff; font-size:.73rem; }.subscription-status { width:min(100%,720px); margin-bottom:14px; padding:20px; }.subscription-status h2 { margin:5px 0 0; font-size:1.25rem; }.subscription-status > p { max-width:60ch; margin:8px 0 0; color:var(--text-muted); line-height:1.5; }.subscription-status.is-inactive { border-color:rgba(251,113,133,.45); }.subscription-status.is-active { border-color:rgba(34,197,94,.4); }.subscription-price { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-top:18px; padding-top:14px; border-top:1px solid rgba(148,163,184,.16); color:var(--text-muted); font-size:.8rem; font-weight:700; }.subscription-price strong { color:#fff; font-size:1.15rem; }.subscription-request { width:min(100%,620px); padding:20px; }.form-field select,.form-field textarea { width:100%; border:1px solid var(--panel-border); border-radius:7px; outline:0; color:#f8fafc; background:rgba(15,23,42,.85); font:inherit; }.form-field select { min-height:48px; padding:10px; }.form-field textarea { min-height:96px; padding:10px; resize:vertical; }.form-field select:focus,.form-field textarea:focus { border-color:var(--brand-secondary); box-shadow:0 0 0 3px rgba(var(--brand-primary-rgb),.18); }
.clear-errors-button--muted { border-color:rgba(148,163,184,.35); color:#cbd5e1; background:rgba(15,23,42,.64); }.clear-errors-button--muted:hover:not(:disabled) { background:rgba(51,65,85,.75); }.detail-error-card { display:flex; align-items:start; justify-content:space-between; gap:12px; }.detail-error-card .state { flex:0 0 auto; }.detail-error-card.is-resolved { border-left-color:#22c55e; }.subscription-notice { right:128px; }.account-subscription-status { display:flex; width:min(100%,620px); align-items:center; justify-content:space-between; gap:16px; margin-bottom:14px; padding:16px 18px; }.account-subscription-status h2 { margin:4px 0 0; font-size:1rem; }.account-subscription-status p:last-child { margin:5px 0 0; color:var(--text-muted); font-size:.8rem; }.account-subscription-status.is-active { border-color:rgba(34,197,94,.4); }.account-subscription-status.is-inactive { border-color:rgba(251,113,133,.45); }
@media(max-width:620px) { .error-section-header { align-items:start; flex-direction:column; }.error-actions { width:100%; }.clear-errors-button { flex:1; }.subscription-notice { top:50px; right:8px; }.subscription-price { align-items:start; flex-direction:column; }.history-error-card { align-items:start; flex-direction:column; } }
@media(max-width:760px) { .history-controls { align-items:start; flex-wrap:wrap; }.history-last-updated { width:100%; margin-left:0; }.history-selector-row { grid-template-columns:1fr; gap:12px; }.comparison-chart-header { flex-direction:column; }.trend-legend { justify-content:flex-start; }.comparison-canvas { height:270px; }.detail-hero-actions { width:100%; justify-content:space-between; }.history-custom-dates { flex-basis:100%; align-items:end; flex-direction:column; }.history-custom-dates input { width:min(100%,250px); } }
@media(max-width:620px) { .configuration-section { padding:16px; }.configuration-fields { grid-template-columns:1fr; }.configuration-actions { padding:14px 16px; }.configuration-actions .scan-button { width:100%; } }
@media(max-width:760px) { .plan-grid { grid-template-columns:1fr; }.plan-card { min-height:0; }.plan-roadmap { margin-top:14px; } }
@media(max-width:620px) { .account-subscription-status { align-items:start; flex-direction:column; }.account-subscription-status .detail-action-link { width:100%; justify-content:center; }.detail-error-card { align-items:start; flex-direction:column; }.settings-summary-list { grid-template-columns:1fr; } }
.mobile-nav-toggle { display:none; } @media(max-width:800px) { .mobile-nav-toggle { display:inline-flex; width:max-content; min-height:36px; align-items:center; justify-content:center; gap:7px; margin:8px 0 4px; padding:7px 11px; border:1px solid rgba(148,163,184,.28); border-radius:999px; color:#cbd5e1; background:rgba(15,23,42,.62); font:inherit; font-size:.72rem; font-weight:800; letter-spacing:.03em; cursor:pointer; transition:border-color .15s,background .15s,color .15s; }.mobile-nav-toggle svg { width:16px; height:16px; }.mobile-nav-toggle:hover,.mobile-nav-toggle[aria-expanded="true"] { border-color:rgba(56,189,248,.62); color:#e0f2fe; background:rgba(14,116,144,.22); }.cloud-mobile-panel { display:none; }.cloud-mobile-panel.is-open { display:grid; gap:9px; margin:8px 0 10px; padding:9px; border:1px solid rgba(148,163,184,.2); border-radius:10px; background:rgba(15,23,42,.52); }.cloud-mobile-panel.is-open .cloud-nav { display:grid; margin:0; padding:0; }.cloud-mobile-panel.is-open .cloud-nav .custom-nav-item { padding:10px 11px; border-radius:7px; }.cloud-mobile-panel.is-open .cloud-account { display:block; margin:0; padding:12px 11px 4px; border-top:1px solid rgba(148,163,184,.16); }.cloud-mobile-panel.is-open .cloud-account .sidebar-action { width:100%; justify-content:center; margin-top:10px; } }
.devices-header { margin-bottom:14px; }.one-time-key-panel { width:min(100%,720px); margin-bottom:14px; padding:18px 20px; border-color:rgba(34,197,94,.45); background:linear-gradient(135deg,rgba(20,83,45,.24),rgba(15,23,42,.88)); }.one-time-key-panel h2 { margin:5px 0 0; font-size:1.1rem; }.one-time-key-panel p:not(.label) { max-width:66ch; margin:7px 0 13px; color:var(--text-muted); font-size:.82rem; line-height:1.45; }.one-time-key { display:block; width:max-content; max-width:100%; overflow:auto; padding:10px 12px; border:1px solid rgba(74,222,128,.4); border-radius:7px; color:#dcfce7; background:rgba(2,44,34,.68); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:clamp(.9rem,2.5vw,1.05rem); font-weight:800; letter-spacing:.08em; user-select:all; white-space:nowrap; }.device-add-panel { width:min(100%,760px); margin:0 0 14px; padding:0; overflow:hidden; }.device-add-panel summary { display:flex; min-height:45px; align-items:center; padding:0 17px; color:#e0f2fe; font-size:.82rem; font-weight:800; cursor:pointer; list-style:none; }.device-add-panel summary::-webkit-details-marker { display:none; }.device-add-panel summary::after { margin-left:auto; color:#38bdf8; content:'+'; font-size:1.1rem; }.device-add-panel[open] summary { border-bottom:1px solid rgba(148,163,184,.16); background:rgba(14,116,144,.12); }.device-add-panel[open] summary::after { content:'−'; }.device-add-form { padding:18px; }.device-add-form .settings-panel-header { margin-bottom:15px; }.device-add-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.device-add-actions { display:flex; justify-content:flex-end; margin-top:16px; }.devices-table-panel { width:100%; padding:0; overflow:hidden; }.devices-table-wrap { overflow-x:auto; }.devices-table { width:100%; min-width:770px; border-collapse:collapse; }.devices-table th,.devices-table td { padding:13px 14px; border-bottom:1px solid rgba(148,163,184,.14); text-align:left; vertical-align:middle; }.devices-table th { color:var(--text-muted); background:rgba(15,23,42,.52); font-size:.66rem; font-weight:850; letter-spacing:.07em; text-transform:uppercase; }.devices-table td { color:#cbd5e1; font-size:.8rem; }.devices-table tbody tr:last-child td { border-bottom:0; }.devices-table tbody tr:hover { background:rgba(30,41,59,.35); }.devices-table td strong { color:#f8fafc; font-size:.84rem; }.devices-table code { color:#bfdbfe; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.76rem; }.devices-table time { color:var(--text-muted); white-space:nowrap; }.device-status,.device-key-status { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-size:.73rem; font-weight:750; }.device-status i { width:7px; height:7px; border-radius:50%; background:#64748b; box-shadow:0 0 0 3px rgba(100,116,139,.12); }.device-status.is-online { color:#bbf7d0; }.device-status.is-online i { background:#22c55e; box-shadow:0 0 9px rgba(34,197,94,.72); }.device-key-status { padding:4px 7px; border:1px solid rgba(245,158,11,.34); border-radius:99px; color:#fde68a; background:rgba(120,53,15,.16); }.device-key-status.is-used { border-color:rgba(34,197,94,.35); color:#bbf7d0; background:rgba(20,83,45,.15); }.remove-device-button { min-height:29px; padding:5px 8px; border:1px solid rgba(251,113,133,.42); border-radius:6px; color:#fecaca; background:rgba(127,29,29,.14); font:inherit; font-size:.71rem; font-weight:800; cursor:pointer; }.remove-device-button:hover { background:rgba(153,27,27,.42); }.devices-empty { padding:31px 20px; text-align:center; }.devices-empty h2 { margin:0; color:#f8fafc; font-size:1rem; }.devices-empty p { max-width:45ch; margin:7px auto 0; color:var(--text-muted); font-size:.82rem; line-height:1.45; }.visually-hidden { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.devices-demo-note { display:inline-flex; margin:0 0 12px; padding:6px 9px; border:1px solid rgba(56,189,248,.32); border-radius:6px; color:#bae6fd; background:rgba(14,116,144,.14); font-size:.72rem; font-weight:700; }.remove-device-button:disabled { cursor:not-allowed; opacity:.42; }
.device-remove-dialog { width:min(430px,calc(100vw - 28px)); padding:0; border:1px solid rgba(251,113,133,.46); border-radius:10px; color:#e2e8f0; background:#111827; box-shadow:0 24px 60px rgba(0,0,0,.56); }.device-remove-dialog::backdrop { background:rgba(2,6,23,.72); }.device-remove-dialog-content { padding:20px; }.device-remove-dialog h2 { margin:5px 0 0; color:#fff; font-size:1.1rem; }.device-remove-dialog p:not(.label) { margin:9px 0 0; color:var(--text-muted); font-size:.84rem; line-height:1.45; }.device-remove-dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:19px; }.dialog-cancel-button { min-height:29px; padding:5px 10px; border:1px solid rgba(148,163,184,.35); border-radius:6px; color:#cbd5e1; background:rgba(15,23,42,.72); font:inherit; font-size:.71rem; font-weight:800; cursor:pointer; }.dialog-cancel-button:hover { background:rgba(51,65,85,.75); }
.layout-toggle-button { min-height:32px; padding:6px 10px; border:1px solid rgba(56,189,248,.5); border-radius:7px; color:#e0f2fe; background:rgba(14,116,144,.18); font:inherit; font-size:.73rem; font-weight:800; cursor:pointer; }.layout-toggle-button:hover,.layout-toggle-button[aria-pressed="true"] { border-color:rgba(56,189,248,.8); background:rgba(14,116,144,.38); }.battery-layout-hint { margin:-5px 0 12px; color:var(--text-muted); font-size:.77rem; }.battery.is-layout-editing { position:relative; cursor:grab; outline:1px dashed rgba(56,189,248,.44); outline-offset:3px; }.battery.is-layout-editing:active { cursor:grabbing; }.battery.is-dragging { opacity:.46; }.battery.is-drag-over { outline:2px solid rgba(56,189,248,.9); background:rgba(14,116,144,.13); }.battery-layout-controls { position:absolute; z-index:2; top:9px; left:9px; display:flex; gap:4px; }.battery-layout-controls button { display:grid; width:27px; height:27px; place-items:center; border:1px solid rgba(56,189,248,.55); border-radius:6px; color:#e0f2fe; background:rgba(15,23,42,.92); font:inherit; font-size:.9rem; font-weight:850; cursor:pointer; }.battery-layout-controls button:hover { background:rgba(14,116,144,.52); }
.battery-live-status,#battery-state { position:fixed; z-index:6; top:13px; right:128px; padding:7px 10px; box-shadow:0 10px 24px rgba(0,0,0,.34); pointer-events:none; }.app-main.has-subscription-notice .battery-live-status,.app-main.has-subscription-notice #battery-state { right:316px; }
@media(max-width:620px) { .layout-toggle-button { align-self:flex-start; }.battery-layout-hint { margin-top:0; }.battery.is-layout-editing { touch-action:pan-y; } }
@media(max-width:620px) { .battery-live-status,#battery-state { top:50px; right:8px; }.app-main.has-subscription-notice .battery-live-status,.app-main.has-subscription-notice #battery-state { top:96px; right:8px; } }
@media(max-width:620px) { .device-add-form { padding:16px; }.device-add-fields { grid-template-columns:1fr; }.device-add-actions .scan-button { width:100%; }.one-time-key-panel { padding:16px; }.devices-table-panel { margin-top:0; } }
.users-header { margin-bottom:14px; }.users-table-panel { width:100%; padding:0; overflow:hidden; }.users-table { min-width:1320px; }.users-table td { white-space:nowrap; }.admin-inline-form { display:flex; align-items:center; gap:6px; }.users-table select,.admin-inline-form input[type="date"] { min-height:31px; padding:5px 7px; border:1px solid rgba(148,163,184,.32); border-radius:6px; color:#e2e8f0; background:rgba(15,23,42,.74); font:inherit; font-size:.73rem; color-scheme:dark; }.admin-save-button,.admin-add-year-button { min-height:30px; padding:5px 8px; border:1px solid rgba(56,189,248,.46); border-radius:6px; color:#e0f2fe; background:rgba(14,116,144,.2); font:inherit; font-size:.71rem; font-weight:800; cursor:pointer; }.admin-add-year-button { border-color:rgba(56,189,248,.3); color:#bae6fd; background:rgba(14,116,144,.1); }.admin-save-button:hover { background:rgba(14,116,144,.45); }.admin-add-year-button:hover { background:rgba(14,116,144,.28); }.admin-role { display:inline-flex; padding:4px 7px; border:1px solid rgba(148,163,184,.33); border-radius:99px; color:#cbd5e1; background:rgba(30,41,59,.45); font-size:.7rem; font-weight:800; }.admin-role--admin { border-color:rgba(192,132,252,.48); color:#e9d5ff; background:rgba(107,33,168,.17); }.admin-reset-button { white-space:nowrap; }.admin-password-notice { width:min(100%,720px); margin-bottom:14px; padding:18px 20px; border-color:rgba(245,158,11,.5); background:linear-gradient(135deg,rgba(120,53,15,.23),rgba(15,23,42,.88)); }.admin-password-notice h2 { margin:5px 0 0; font-size:1.1rem; }.admin-password-notice p:not(.label) { max-width:66ch; margin:7px 0 13px; color:var(--text-muted); font-size:.82rem; line-height:1.45; }.admin-password-notice code { display:block; width:max-content; max-width:100%; overflow:auto; padding:10px 12px; border:1px solid rgba(245,158,11,.46); border-radius:7px; color:#fef3c7; background:rgba(69,26,3,.48); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:1rem; font-weight:850; letter-spacing:.08em; user-select:all; white-space:nowrap; }
@media(max-width:620px) { .users-table-panel { margin-top:0; }.admin-password-notice { padding:16px; } }
.admin-password-delivery { margin:11px 0 0 !important; font-size:.76rem !important; font-weight:750; }.admin-password-delivery.is-sent { color:#bbf7d0 !important; }.admin-password-delivery.is-failed { color:#fecaca !important; }.admin-user-link { display:grid; gap:3px; color:#f8fafc; text-decoration:none; }.admin-user-link span { color:#7dd3fc; font-size:.68rem; font-weight:750; }.admin-user-link:hover strong,.admin-user-link:hover span { color:#fff; text-decoration:underline; }.user-detail-header .page-back-link { margin:0 0 15px; }.user-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; width:min(100%,900px); margin-bottom:14px; }.user-detail-panel { padding:19px 20px; }.user-detail-panel h2 { overflow-wrap:anywhere; margin:5px 0 16px; color:#fff; font-size:1.05rem; }.user-detail-count { display:block; margin:4px 0 13px; color:#fff; font-size:2rem; line-height:1; }.user-detail-list { display:grid; grid-template-columns:minmax(112px,.8fr) minmax(0,1.2fr); gap:9px 12px; margin:0; padding-top:13px; border-top:1px solid rgba(148,163,184,.16); font-size:.78rem; }.user-detail-list dt { color:var(--text-muted); font-weight:700; }.user-detail-list dd { min-width:0; margin:0; color:#e2e8f0; overflow-wrap:anywhere; }.user-devices-panel { width:min(100%,1180px); }.user-devices-heading { padding:18px 20px 13px; border-bottom:1px solid rgba(148,163,184,.14); }.user-devices-heading h2 { margin:4px 0 0; color:#fff; font-size:1.02rem; }.user-devices-empty { margin:0; padding:25px 20px; color:var(--text-muted); font-size:.83rem; }.user-devices-table { min-width:980px; }.user-devices-table small { display:block; margin-top:4px; color:var(--text-muted); font-size:.68rem; line-height:1.25; }.user-device-errors { color:#fca5a5 !important; }
@media(max-width:760px) { .user-detail-grid { grid-template-columns:1fr; } }.user-detail-header .view-title { font-size:clamp(1.35rem,7vw,2rem); }
.system-header { margin-bottom:15px; }.system-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:14px; }.system-summary-card { display:grid; min-height:126px; align-content:start; gap:7px; padding:17px; }.system-summary-card span { color:var(--text-muted); font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }.system-summary-card strong { color:#fff; font-size:clamp(1.35rem,2.4vw,1.9rem); line-height:1.1; }.system-summary-card small { margin-top:auto; color:#94a3b8; font-size:.7rem; font-weight:650; line-height:1.35; }.system-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(270px,.75fr); gap:14px; width:min(100%,1180px); }.system-panel { min-width:0; padding:0; overflow:hidden; }.system-panel-heading { display:flex; align-items:start; justify-content:space-between; gap:12px; padding:18px 20px 13px; border-bottom:1px solid rgba(148,163,184,.14); }.system-panel-heading h2 { margin:4px 0 0; color:#fff; font-size:1.02rem; }.system-panel-heading > strong { color:#e0f2fe; font-size:.9rem; }.system-table-wrap { overflow-x:auto; }.system-table { width:100%; min-width:570px; border-collapse:collapse; }.system-table th,.system-table td { padding:12px 15px; border-bottom:1px solid rgba(148,163,184,.13); text-align:left; }.system-table tr:last-child td { border-bottom:0; }.system-table th { color:var(--text-muted); background:rgba(15,23,42,.5); font-size:.65rem; font-weight:850; letter-spacing:.07em; text-transform:uppercase; }.system-table td { color:#cbd5e1; font-size:.78rem; }.system-table td:first-child { color:#f1f5f9; font-weight:750; }.system-list { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0; margin:0; padding:5px 20px; }.system-list dt,.system-list dd { padding:10px 0; border-bottom:1px solid rgba(148,163,184,.12); font-size:.78rem; }.system-list dt { color:var(--text-muted); font-weight:700; }.system-list dd { margin:0; color:#f1f5f9; font-weight:800; text-align:right; }.system-list dt:last-of-type,.system-list dd:last-child { border-bottom:0; }.system-state { font-size:.7rem !important; }.system-state.is-ready { color:#bbf7d0 !important; }.system-state.is-missing { color:#fecaca !important; }
.analytics-header { margin-bottom:15px; }.analytics-reset-form { margin:0; }.analytics-panel { min-width:0; padding:0; overflow:hidden; }.analytics-table { min-width:880px; }.analytics-table td { vertical-align:middle; }.analytics-table .analytics-value { color:#fbbf24; font-variant-numeric:tabular-nums; font-weight:850; white-space:nowrap; }.analytics-table .analytics-missing { color:var(--text-muted); font-weight:650; }.analytics-device-link { display:grid; gap:3px; width:max-content; max-width:100%; color:#e0f2fe; text-decoration:none; }.analytics-device-link:hover strong { color:#38bdf8; text-decoration:underline; }.analytics-device-link .device-identity { font-size:.68rem; }
.system-mqtt-panel { width:min(100%,1180px); margin-top:14px; }.system-mqtt-grid { margin-top:14px; }.system-mqtt-description { max-width:680px; margin:7px 0 0; color:#94a3b8; font-size:.75rem; font-weight:600; line-height:1.45; }.system-mqtt-table { min-width:1140px; }.system-mqtt-acl-table { min-width:850px; }.system-table code { color:#c4b5fd; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.72rem; white-space:nowrap; }.system-empty { color:#94a3b8 !important; font-style:italic; }.system-mqtt-state { font-weight:800; white-space:nowrap; }.system-mqtt-state.is-ready { color:#86efac; }.system-mqtt-state.is-warning { color:#fcd34d; }.system-mqtt-state.is-missing { color:#fca5a5; }
@media(max-width:980px) { .system-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }.system-grid { grid-template-columns:1fr; } } @media(max-width:520px) { .system-summary { grid-template-columns:1fr; }.system-summary-card { min-height:104px; }.system-panel-heading { padding:16px; }.system-list { padding:5px 16px; }.system-table th,.system-table td { padding:11px 12px; } }
.detail-command-actions { display:flex; flex-basis:100%; justify-content:flex-start; gap:8px; }.detail-command-button { min-height:34px; padding:7px 10px; border:1px solid rgba(148,163,184,.35); border-radius:7px; color:#e2e8f0; background:rgba(15,23,42,.72); font:inherit; font-size:.74rem; font-weight:800; cursor:pointer; }.detail-command-button--enable { border-color:rgba(var(--brand-primary-rgb),.7); color:#fff; background:var(--brand-primary); }.detail-command-button--enable:hover { background:#b45309; }.detail-command-button--disable,.detail-command-button--reset { border-color:rgba(239,68,68,.55); color:#fecaca; background:rgba(127,29,29,.3); }.detail-command-button--disable:hover,.detail-command-button--reset:hover { background:rgba(153,27,27,.55); }.battery-command-feedback { width:max-content; max-width:100%; margin:0 0 14px; padding:7px 10px; border:1px solid rgba(56,189,248,.34); border-radius:7px; color:#bae6fd; background:rgba(14,116,144,.13); font-size:.76rem; font-weight:700; }.battery-command-dialog { width:min(430px,calc(100vw - 28px)); padding:0; border:1px solid rgba(56,189,248,.44); border-radius:10px; color:#e2e8f0; background:#111827; box-shadow:0 24px 60px rgba(0,0,0,.56); }.battery-command-dialog::backdrop { background:rgba(2,6,23,.72); }.battery-command-dialog-content { padding:20px; }.battery-command-dialog h2 { margin:5px 0 0; color:#fff; font-size:1.1rem; }.battery-command-dialog p:not(.label) { margin:9px 0 0; color:var(--text-muted); font-size:.84rem; line-height:1.45; }.battery-command-dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:19px; }
@media(max-width:620px) { .detail-command-actions { justify-content:stretch; }.detail-command-button { flex:1; }.battery-command-feedback { width:100%; margin-left:0; }.battery-command-dialog-actions .detail-command-button { flex:0 0 auto; } }
.detail-hero-actions { display:grid; grid-template-columns:repeat(2,max-content); justify-content:end; }.detail-command-actions { grid-column:1 / -1; justify-content:end; }
@media(max-width:760px) { .detail-hero-actions { justify-content:end; } }
@media(max-width:620px) { .detail-hero-actions { display:flex; justify-content:flex-end; }.detail-command-actions { flex-basis:100%; justify-content:flex-end; } }
.terms-consent { display:flex; align-items:flex-start; gap:9px; margin:2px 0 15px; color:var(--text-muted); font-size:.76rem; line-height:1.45; }.terms-consent input { width:16px; height:16px; flex:0 0 16px; margin:2px 0 0; accent-color:var(--brand-primary); }.terms-consent a,.cloud-legal-footer a { color:#7dd3fc; font-weight:750; text-decoration:none; }.terms-consent a:hover,.cloud-legal-footer a:hover { color:#fff; text-decoration:underline; }.cloud-legal-footer { margin:20px 0 2px; color:var(--text-muted); font-size:.72rem; text-align:center; }.auth-page .cloud-legal-footer { position:fixed; z-index:2; right:18px; bottom:14px; }.legal-page { min-height:100vh; padding:30px 16px; color:var(--text); background:var(--page-bg); }.legal-layout { width:min(100%,900px); margin:0 auto; }.legal-header { margin:0 0 18px; }.legal-header #HEADER_BRAND { display:inline-block; color:#fff; text-decoration:none; }.legal-header .firmware-version { margin:5px 0 0; }.legal-document { padding:clamp(20px,4vw,38px); }.legal-document h1 { margin:6px 0 0; color:#fff; font-size:clamp(1.45rem,3vw,2rem); }.legal-document h2 { margin:25px 0 7px; color:#f8fafc; font-size:1rem; }.legal-document p { margin:0; color:#cbd5e1; font-size:.88rem; line-height:1.6; }.legal-document section p + p { margin-top:8px; }.legal-date { margin-top:8px !important; color:var(--text-muted) !important; font-size:.76rem !important; }.legal-return { margin:15px 2px 0; font-size:.84rem; }.legal-return .page-back-link { margin:0; }.legal-page .cloud-legal-footer { margin-top:22px; }
@media(max-width:800px) { .auth-page .cloud-legal-footer { position:static; margin:0 0 14px; } }.terms-consent { font-size:.74rem; }
.system-export-form { display:grid; justify-items:end; gap:5px; margin:0; }.system-export-form .scan-button { width:auto; min-height:34px; padding:7px 11px; font-size:.73rem; }.system-export-form small { max-width:31ch; color:var(--text-muted); font-size:.64rem; font-weight:650; line-height:1.3; text-align:right; }
@media(max-width:800px) { .system-export-form { justify-items:start; }.system-export-form small { text-align:left; } }
.dashboard-header-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; }.dashboard-view-switch { display:inline-flex; overflow:hidden; border:1px solid rgba(148,163,184,.3); border-radius:7px; background:rgba(15,23,42,.64); }.dashboard-view-switch button { display:inline-flex; min-height:32px; align-items:center; gap:5px; padding:6px 9px; border:0; border-left:1px solid rgba(148,163,184,.24); color:#94a3b8; background:transparent; font:inherit; font-size:.72rem; font-weight:800; cursor:pointer; }.dashboard-view-switch button:first-child { border-left:0; }.dashboard-view-switch button:hover { color:#e0f2fe; background:rgba(14,116,144,.22); }.dashboard-view-switch button[aria-pressed="true"] { color:#e0f2fe; background:rgba(14,116,144,.46); }.dashboard-view-switch button > span:first-child { font-size:1rem; line-height:1; }.layout-toggle-button:disabled { cursor:not-allowed; opacity:.45; }.battery-table-panel { padding:0; overflow:hidden; }.battery-table-wrap { overflow-x:auto; }.battery-table { width:100%; min-width:1000px; border-collapse:collapse; }.battery-table th,.battery-table td { padding:12px 14px; border-bottom:1px solid rgba(148,163,184,.13); text-align:left; vertical-align:middle; }.battery-table tr:last-child td { border-bottom:0; }.battery-table th { color:var(--text-muted); background:rgba(15,23,42,.5); font-size:.65rem; font-weight:850; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap; }.battery-table td { color:#dbe5ee; font-size:.79rem; font-weight:700; white-space:nowrap; }.battery-table td > small,.battery-table-name small { display:block; margin-top:3px; color:var(--text-muted); font-size:.66rem; font-weight:700; }.battery-table-name { display:grid; gap:2px; min-width:180px; color:#f8fafc; text-decoration:none; }.battery-table-name:hover strong { color:#7dd3fc; text-decoration:underline; }.battery-table-soc { color:#f8fafc !important; font-size:.93rem !important; font-weight:850 !important; }.battery-table-alerts { color:var(--text-muted) !important; text-align:center; }.battery-table-alerts.has-alerts { color:#fca5a5 !important; }.battery-table-actions { display:flex; align-items:center; justify-content:flex-end; gap:7px; }.battery-table-actions .battery-toggle { min-height:31px; padding:6px 9px; font-size:.71rem; }.battery-table-actions .battery-detail-link { min-width:31px; min-height:31px; padding:5px 9px; font-size:1.25rem; line-height:1; }
@media(max-width:800px) { .dashboard-header-actions { width:100%; justify-content:space-between; }.dashboard-view-switch button span:last-child { display:none; }.dashboard-view-switch button { min-width:35px; justify-content:center; padding:6px; } } @media(max-width:520px) { .dashboard-header-actions { align-items:stretch; }.dashboard-view-switch { flex:0 0 auto; }.layout-toggle-button { flex:1; } }
.battery-table tbody tr.is-layout-editing { cursor:grab; background:rgba(14,116,144,.08); outline:1px dashed rgba(56,189,248,.36); outline-offset:-2px; }.battery-table tbody tr.is-layout-editing:active { cursor:grabbing; }.battery-table tbody tr.is-dragging { opacity:.45; }.battery-table tbody tr.is-drag-over { outline:2px solid rgba(56,189,248,.88); background:rgba(14,116,144,.2); }.battery-table-name-cell { display:flex; align-items:center; gap:8px; }.battery-table-layout-controls { display:flex; flex:0 0 auto; gap:3px; }.battery-table-layout-controls button { display:grid; width:24px; height:24px; place-items:center; padding:0; border:1px solid rgba(56,189,248,.55); border-radius:5px; color:#e0f2fe; background:rgba(15,23,42,.92); font:inherit; font-size:.78rem; font-weight:850; cursor:pointer; }.battery-table-layout-controls button:hover { background:rgba(14,116,144,.55); }
.operations-dashboard { display:grid; gap:14px; }.operations-overview { display:grid; grid-template-columns:minmax(0,1fr) repeat(2,auto); align-items:center; gap:28px; padding:18px 20px; background:radial-gradient(circle at 82% 5%,rgba(56,189,248,.14),transparent 18rem),rgba(15,23,42,.74); }.operations-overview h2 { margin:4px 0 0; color:#fff; font-size:1.2rem; }.operations-overview-stat { display:grid; gap:3px; min-width:98px; }.operations-overview-stat span { color:var(--text-muted); font-size:.66rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }.operations-overview-stat strong { color:#f8fafc; font-size:1.25rem; }.operations-overview-stat strong.is-charging { color:#86efac; }.operations-overview-stat strong.is-discharging { color:#7dd3fc; }.operations-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }.operation-battery { position:relative; display:grid; gap:13px; padding:16px; overflow:hidden; }.operation-battery::after { position:absolute; top:-42px; right:-24px; width:148px; height:148px; border-radius:50%; background:radial-gradient(circle,rgba(56,189,248,.12),transparent 68%); content:''; pointer-events:none; }.operation-battery--charging::after { background:radial-gradient(circle,rgba(34,197,94,.15),transparent 68%); }.operation-battery--offline::after { background:radial-gradient(circle,rgba(100,116,139,.13),transparent 68%); }.operation-battery-head,.operation-footer { position:relative; z-index:1; display:flex; align-items:start; justify-content:space-between; gap:9px; }.operation-battery-head h2 { max-width:21ch; margin:3px 0 0; color:#fff; font-size:1.05rem; line-height:1.18; }.operation-main { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(116px,.8fr); align-items:center; gap:13px; }.operation-soc { display:grid; gap:2px; }.operation-soc strong { color:#fff; font-size:2rem; line-height:1; letter-spacing:-.04em; }.operation-soc span,.operation-flow span { color:var(--text-muted); font-size:.67rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }.operation-flow { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:7px; padding:9px; border:1px solid rgba(148,163,184,.15); border-radius:8px; background:rgba(2,6,23,.28); }.operation-flow i { display:grid; width:27px; height:27px; grid-row:span 2; place-items:center; border-radius:50%; color:#bae6fd; background:rgba(14,116,144,.3); font-size:1rem; font-style:normal; }.operation-battery--charging .operation-flow i { color:#bbf7d0; background:rgba(20,83,45,.42); }.operation-battery--offline .operation-flow i { color:#cbd5e1; background:rgba(71,85,105,.45); }.operation-flow strong { grid-column:2; color:#f8fafc; font-size:.9rem; }.operation-soc-track { position:relative; z-index:1; height:7px; overflow:hidden; border-radius:99px; background:rgba(100,116,139,.3); }.operation-soc-track i { display:block; width:var(--battery-soc); height:100%; border-radius:inherit; background:linear-gradient(90deg,#0ea5e9,#38bdf8); }.operation-battery--charging .operation-soc-track i { background:linear-gradient(90deg,#16a34a,#4ade80); }.operation-battery--offline .operation-soc-track i { background:#64748b; }.operation-metrics { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0; }.operation-metrics div { min-width:0; padding:7px; border-left:2px solid rgba(56,189,248,.42); background:rgba(15,23,42,.42); }.operation-metrics dt { overflow:hidden; color:var(--text-muted); font-size:.58rem; font-weight:800; letter-spacing:.05em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }.operation-metrics dd { overflow:hidden; margin:4px 0 0; color:#e2e8f0; font-size:.77rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }.operation-footer { align-items:center; padding-top:1px; }.operation-alert { overflow:hidden; max-width:58%; color:#86efac; font-size:.7rem; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }.operation-alert.has-alerts { color:#fca5a5; }.operation-footer .battery-detail-link { min-height:30px; padding:5px 8px; font-size:.7rem; }
@media(max-width:720px) { .operations-overview { grid-template-columns:1fr 1fr; gap:14px; }.operations-overview > :first-child { grid-column:1 / -1; }.operations-overview-stat { min-width:0; } } @media(max-width:420px) { .operations-grid { grid-template-columns:1fr; }.operation-main { grid-template-columns:1fr; }.operation-flow { width:100%; }.operation-soc strong { font-size:1.8rem; } }
.flow-dashboard { width:min(100%,1180px); }.live-flow-panel { padding:clamp(16px,3vw,30px); overflow:hidden; background:radial-gradient(circle at 50% 46%,rgba(14,116,144,.15),transparent 23rem),linear-gradient(135deg,rgba(15,23,42,.96),rgba(8,15,29,.88)); }.live-flow-header { display:flex; align-items:start; justify-content:space-between; gap:20px; }.live-flow-header h2 { margin:4px 0 0; color:#fff; font-size:clamp(1.25rem,2vw,1.55rem); }.live-flow-header p:not(.label) { max-width:50ch; margin:6px 0 0; color:var(--text-muted); font-size:.76rem; line-height:1.4; }.live-flow-total { display:grid; flex:0 0 auto; justify-items:end; gap:4px; padding:9px 11px; border:1px solid rgba(56,189,248,.32); border-radius:8px; background:rgba(8,47,73,.28); }.live-flow-total span,.live-flow-footer > span { color:var(--text-muted); font-size:.65rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }.live-flow-total strong { color:#7dd3fc; font-size:1.15rem; }.live-flow-graph { display:grid; grid-template-columns:minmax(82px,1fr) minmax(35px,.52fr) minmax(88px,1fr) minmax(35px,.52fr) minmax(82px,1fr); align-items:center; gap:8px; min-height:250px; margin:14px 0 18px; }.live-flow-node { position:relative; z-index:1; display:grid; min-height:132px; place-items:center; align-content:center; gap:5px; padding:11px 8px; border:1px solid rgba(148,163,184,.22); border-radius:14px; background:rgba(15,23,42,.72); text-align:center; box-shadow:0 14px 35px rgba(0,0,0,.18); }.live-flow-node::before { position:absolute; inset:-1px; z-index:-1; border-radius:inherit; background:linear-gradient(145deg,rgba(56,189,248,.2),transparent 52%); content:''; }.live-flow-node i { display:grid; width:38px; height:38px; place-items:center; border-radius:50%; color:#bae6fd; background:rgba(14,116,144,.32); font-size:1.25rem; font-style:normal; }.live-flow-node--storage i { color:#bbf7d0; background:rgba(20,83,45,.42); }.flow-dashboard.is-discharging .live-flow-node--storage i { color:#7dd3fc; background:rgba(8,47,73,.56); }.live-flow-node span { color:#cbd5e1; font-size:.69rem; font-weight:800; }.live-flow-node strong { color:#fff; font-size:1.13rem; }.live-flow-node small { color:var(--text-muted); font-size:.61rem; font-weight:700; line-height:1.25; }.live-flow-link { position:relative; height:24px; border-radius:99px; background:rgba(71,85,105,.3); }.live-flow-link i { position:absolute; inset:7px 2px; border-radius:inherit; background:repeating-linear-gradient(90deg,rgba(125,211,252,.96) 0 8px,transparent 8px 16px); animation:live-flow-particles .72s linear infinite; }.live-flow-link--reverse i { animation-direction:reverse; }.live-flow-link span { position:absolute; z-index:1; top:calc(100% + 3px); left:50%; color:#bae6fd; font-size:.61rem; font-weight:850; transform:translateX(-50%); white-space:nowrap; }.flow-dashboard.is-charging .live-flow-link:last-of-type i { background:repeating-linear-gradient(90deg,rgba(74,222,128,.96) 0 8px,transparent 8px 16px); }.flow-dashboard.is-discharging .live-flow-link:last-of-type i { background:repeating-linear-gradient(90deg,rgba(56,189,248,.96) 0 8px,transparent 8px 16px); }.live-flow-footer { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:12px; padding-top:14px; border-top:1px solid rgba(148,163,184,.14); }.live-flow-footer > div { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }.live-device-chip { display:inline-flex; min-width:0; align-items:center; gap:7px; padding:6px 8px; border:1px solid rgba(56,189,248,.22); border-radius:6px; color:#cbd5e1; background:rgba(15,23,42,.56); font-size:.69rem; text-decoration:none; }.live-device-chip:hover { border-color:rgba(56,189,248,.66); color:#fff; }.live-device-chip span { overflow:hidden; max-width:17ch; text-overflow:ellipsis; white-space:nowrap; }.live-device-chip strong { color:#7dd3fc; font-size:.68rem; }.live-device-chip.is-charging strong { color:#86efac; }.live-device-chip.is-offline { opacity:.55; }.live-device-chip.is-offline strong { color:#94a3b8; } @keyframes live-flow-particles { to { background-position:32px 0; } }
@media(max-width:620px) { .live-flow-header { align-items:start; flex-direction:column; gap:10px; }.live-flow-total { justify-items:start; }.live-flow-graph { grid-template-columns:minmax(68px,1fr) minmax(24px,.32fr) minmax(72px,1fr) minmax(24px,.32fr) minmax(68px,1fr); gap:4px; min-height:210px; }.live-flow-node { min-height:114px; padding:8px 4px; border-radius:10px; }.live-flow-node i { width:31px; height:31px; font-size:1rem; }.live-flow-node span { font-size:.61rem; }.live-flow-node strong { font-size:.93rem; }.live-flow-node small { font-size:.54rem; }.live-flow-link { height:16px; }.live-flow-link i { inset:4px 1px; }.live-flow-link span { font-size:.53rem; }.live-flow-footer { grid-template-columns:1fr; gap:8px; }.live-flow-footer > div { justify-content:flex-start; } }
.live-energy-layout { position:relative; display:grid; grid-template-columns:minmax(180px,1fr) minmax(180px,.9fr) minmax(180px,1fr); align-items:center; gap:clamp(34px,7vw,96px); min-height:430px; margin-top:18px; padding:12px clamp(32px,6vw,74px); }.live-energy-layout::before { position:absolute; inset:50% 12% auto; height:1px; background:linear-gradient(90deg,transparent,rgba(56,189,248,.28),transparent); content:''; }.live-battery-column { z-index:1; display:grid; align-content:center; gap:16px; min-width:0; }.live-battery-column--left { justify-items:end; }.live-battery-column--right { justify-items:start; }.live-ring-battery { position:relative; display:grid; width:min(100%,238px); gap:10px; padding:12px; border:1px solid rgba(56,189,248,.28); border-radius:11px; color:#e2e8f0; background:linear-gradient(135deg,rgba(14,116,144,.16),rgba(15,23,42,.8)); box-shadow:0 11px 26px rgba(0,0,0,.19); text-decoration:none; transition:transform .16s,border-color .16s,box-shadow .16s; }.live-ring-battery:hover { z-index:3; border-color:rgba(56,189,248,.72); color:#fff; box-shadow:0 15px 30px rgba(0,0,0,.3); transform:translateY(-2px); }.live-ring-battery.is-charging { border-color:rgba(74,222,128,.4); background:linear-gradient(135deg,rgba(20,83,45,.28),rgba(15,23,42,.8)); }.live-ring-battery.is-offline { border-color:rgba(100,116,139,.3); opacity:.58; }.live-ring-battery-head { display:flex; align-items:start; justify-content:space-between; gap:8px; }.live-ring-battery-head > div { display:grid; min-width:0; gap:2px; }.live-ring-battery-head span { overflow:hidden; color:#f8fafc; font-size:.78rem; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }.live-ring-battery-head small { overflow:hidden; color:var(--text-muted); font-size:.6rem; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }.live-ring-battery-head > strong { flex:0 0 auto; color:#7dd3fc; font-size:.59rem; font-weight:850; }.live-ring-battery.is-charging .live-ring-battery-head > strong { color:#86efac; }.live-ring-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }.live-ring-metrics span { display:grid; gap:3px; min-width:0; padding:7px; border:1px solid rgba(148,163,184,.12); border-radius:6px; background:rgba(2,6,23,.25); }.live-ring-metrics small { overflow:hidden; color:var(--text-muted); font-size:.54rem; font-weight:800; letter-spacing:.05em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }.live-ring-metrics b { overflow:hidden; color:#f8fafc; font-size:.78rem; text-overflow:ellipsis; white-space:nowrap; }.live-ring-battery footer { display:flex; align-items:center; justify-content:space-between; color:#7dd3fc; font-size:.73rem; font-weight:850; }.live-ring-battery.is-charging footer { color:#86efac; }.live-ring-battery footer i { font-size:.9rem; font-style:normal; }.live-home-node { position:relative; z-index:2; display:grid; min-width:0; min-height:174px; place-items:center; align-content:center; gap:7px; padding:18px 12px; border:1px solid rgba(56,189,248,.52); border-radius:50%; color:#e0f2fe; background:radial-gradient(circle at 50% 36%,rgba(56,189,248,.25),rgba(8,47,73,.48) 48%,rgba(15,23,42,.92) 72%); box-shadow:0 0 0 12px rgba(14,116,144,.07),0 17px 44px rgba(0,0,0,.34); text-align:center; }.live-home-node i { display:grid; width:40px; height:40px; place-items:center; border-radius:50%; color:#fff; background:rgba(14,116,144,.5); font-size:1.4rem; font-style:normal; }.live-home-node span { color:#e0f2fe; font-size:.74rem; font-weight:850; }.live-home-node strong { color:#fff; font-size:1.3rem; }.live-home-node small { color:#94a3b8; font-size:.61rem; font-weight:750; }.live-ring-flow { position:absolute; top:50%; width:clamp(34px,5vw,82px); height:13px; overflow:hidden; border-radius:99px; background:rgba(71,85,105,.3); transform:translateY(-50%); }.live-ring-battery.is-left .live-ring-flow { right:calc(clamp(34px,5vw,82px) * -1); }.live-ring-battery.is-right .live-ring-flow { left:calc(clamp(34px,5vw,82px) * -1); }.live-ring-flow i { position:absolute; inset:3px 1px; border-radius:inherit; background:repeating-linear-gradient(90deg,rgba(125,211,252,.96) 0 7px,transparent 7px 14px); animation:live-flow-particles .72s linear infinite; }.live-ring-battery.is-charging .live-ring-flow i { background:repeating-linear-gradient(90deg,rgba(74,222,128,.96) 0 7px,transparent 7px 14px); }.live-ring-battery.is-left.is-charging .live-ring-flow i,.live-ring-battery.is-right.is-discharging .live-ring-flow i { animation-direction:reverse; }.live-ring-battery.is-offline .live-ring-flow { display:none; }
.live-group-flow-list{display:grid;gap:28px;margin-top:22px}.live-group-flow{position:relative;padding-top:30px}.live-group-flow+.live-group-flow{border-top:1px solid rgba(148,163,184,.18)}.live-group-heading{position:absolute;z-index:3;top:0;left:0;display:flex;align-items:baseline;gap:7px;max-width:100%;padding:5px 9px;border:1px solid rgba(56,189,248,.28);border-radius:7px;background:rgba(8,47,73,.38)}.live-group-heading span{color:#7dd3fc;font-size:.6rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.live-group-heading strong{overflow:hidden;color:#f8fafc;font-size:.8rem;text-overflow:ellipsis;white-space:nowrap}.live-group-heading small{color:#94a3b8;font-size:.62rem;font-weight:700;white-space:nowrap}.live-group-flow .live-energy-layout{margin-top:0}@media(max-width:720px){.live-group-flow-list{gap:24px;margin-top:18px}.live-group-flow{padding-top:31px}.live-group-heading{max-width:100%;right:0;width:max-content}.live-group-heading small{overflow:hidden;text-overflow:ellipsis}.live-group-flow .live-energy-layout{margin-top:0}}
@media(max-width:720px) { .live-energy-layout { grid-template-columns:1fr; gap:14px; min-height:0; margin-top:13px; padding:8px 0 0; }.live-energy-layout::before,.live-ring-flow { display:none; }.live-home-node { grid-row:1; min-height:144px; width:min(100%,220px); justify-self:center; }.live-battery-column { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); justify-items:stretch; gap:9px; }.live-battery-column--left { grid-row:2; }.live-battery-column--right { grid-row:3; }.live-ring-battery { width:100%; }.live-ring-battery-head > strong { font-size:.54rem; } }
.live-ring-battery.is-left .live-ring-flow { right:-64px; }.live-ring-battery.is-right .live-ring-flow { left:-64px; }

/* The connection is deliberately routed horizontally and then vertically to Home. */
.live-flow-summary { display:grid; flex:0 0 auto; gap:7px; }.live-flow-summary .live-flow-total { flex:initial; }.live-flow-counts { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; }.live-flow-counts span { padding:4px 6px; border:1px solid rgba(148,163,184,.18); border-radius:5px; color:#94a3b8; background:rgba(15,23,42,.48); font-size:.61rem; font-weight:750; white-space:nowrap; }.live-flow-counts b { color:#e2e8f0; }.live-flow-counts .is-charging { color:#86efac; }.live-flow-counts .is-discharging { color:#fda4af; }.live-ring-battery.is-discharging .live-ring-battery-head > strong,.live-ring-battery.is-discharging footer { color:#fda4af; }.live-energy-connectors { position:absolute; inset:0; z-index:0; width:100%; height:100%; overflow:visible; pointer-events:none; }.live-connector-path { fill:none; stroke:rgba(125,211,252,.9); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:7 8; animation:live-connector-particles .72s linear infinite; }.live-connector-path.is-charging { color:#4ade80; stroke:#4ade80; }.live-connector-path.is-discharging { color:#fb7185; stroke:#fb7185; }.live-connector-path.is-standby { color:#94a3b8; stroke:#94a3b8; opacity:.65; animation:none; }.live-connector-path.is-reverse { animation-direction:reverse; } @keyframes live-connector-particles { to { stroke-dashoffset:-30; } }
@media(max-width:720px) { .live-flow-summary { width:100%; }.live-flow-counts { justify-content:flex-start; }.live-energy-connectors { display:none; } }

/* A global mode marker makes it clear that no account telemetry is shown. */
.demo-mode-context { display:flex; align-items:center; gap:9px; width:min(100%,760px); margin:0 0 14px; padding:9px 11px; border:1px solid rgba(56,189,248,.34); border-radius:8px; color:#bae6fd; background:rgba(14,116,144,.14); font-size:.75rem; line-height:1.35; }
.demo-mode-context strong { flex:0 0 auto; color:#e0f2fe; font-size:.76rem; }

/* Fixed indicators share one row: battery state and subscription notice. */
.app-top-indicators { position:fixed; z-index:6; top:13px; right:18px; display:flex; align-items:center; justify-content:flex-end; gap:10px; }.app-top-indicators .subscription-notice,.app-top-indicators .battery-live-status,.app-top-indicators #battery-state { position:static; top:auto; right:auto; margin:0; box-shadow:0 10px 24px rgba(0,0,0,.34); }.app-top-indicators .battery-live-status,.app-top-indicators #battery-state { pointer-events:none; }
@media(max-width:620px) { .app-top-indicators { top:8px; right:8px; max-width:calc(100vw - 16px); flex-wrap:wrap; gap:6px; }.app-top-indicators .subscription-notice { padding:6px 8px; font-size:.64rem; }.app-top-indicators .subscription-notice strong { font-size:.68rem; }.app-top-indicators .battery-live-status,.app-top-indicators #battery-state { padding:6px 8px; font-size:.64rem; }.app-main.has-subscription-notice .demo-mode-context { margin-top:58px; } }

/* One status palette everywhere: offline, alarm, active power flow, then online. */
.state.offline { border-color:rgba(100,116,139,.55); color:#cbd5e1; background:rgba(71,85,105,.2); }.live-ring-battery.status-ok .live-ring-battery-head > strong { color:#86efac; }.live-ring-battery.status-error .live-ring-battery-head > strong { color:#fca5a5; }.live-ring-battery.status-offline .live-ring-battery-head > strong { color:#94a3b8; }

/* In the Live view, discharge flow is orange while an alarm is visible on the whole device card. */
.live-flow-counts .is-discharging { color:#fb923c; }.live-ring-battery.is-discharging footer { color:#ea580c; }.live-connector-path.is-discharging { color:#c2410c; stroke:#c2410c; }.live-ring-battery.status-error { border-color:rgba(239,68,68,.78); background:linear-gradient(135deg,rgba(127,29,29,.28),rgba(15,23,42,.84)); box-shadow:0 0 0 1px rgba(239,68,68,.12),0 11px 26px rgba(0,0,0,.22); }

/* Pro: conservative, current-telemetry battery review. */
.battery-insights-heading { margin-top:24px; }.battery-insights { padding:17px; overflow:hidden; background:radial-gradient(circle at 100% 0,rgba(56,189,248,.12),transparent 21rem),linear-gradient(145deg,rgba(15,23,42,.95),rgba(8,15,29,.93)); }.battery-insights--attention { border-color:rgba(251,113,133,.52); }.battery-insights--monitor { border-color:rgba(251,191,36,.46); }.battery-insights--stable { border-color:rgba(74,222,128,.38); }.battery-insights--offline { border-color:rgba(148,163,184,.34); }.battery-insights-header { display:flex; align-items:start; justify-content:space-between; gap:15px; }.battery-insights-header h2 { margin:4px 0 0; color:#fff; font-size:1.08rem; }.battery-insights-header p:not(.label) { max-width:52ch; margin:5px 0 0; color:#94a3b8; font-size:.76rem; font-weight:600; line-height:1.4; }.battery-insight-state { display:grid; flex:0 0 auto; justify-items:end; gap:3px; padding:7px 9px; border:1px solid rgba(148,163,184,.3); border-radius:7px; color:#cbd5e1; background:rgba(15,23,42,.58); text-align:right; }.battery-insight-state strong { color:#bbf7d0; font-size:.72rem; }.battery-insight-state span { color:#94a3b8; font-size:.61rem; font-weight:700; }.battery-insight-state.is-attention strong { color:#fda4af; }.battery-insight-state.is-monitor strong { color:#fcd34d; }.battery-insight-state.is-offline strong { color:#cbd5e1; }.battery-insight-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:7px; margin:15px 0 10px; }.battery-insight-metric { min-width:0; padding:8px 9px; border:1px solid rgba(148,163,184,.14); border-radius:7px; background:rgba(2,6,23,.24); }.battery-insight-metric span { display:block; overflow:hidden; color:#94a3b8; font-size:.57rem; font-weight:800; letter-spacing:.05em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }.battery-insight-metric strong { display:block; margin-top:4px; overflow:hidden; color:#f8fafc; font-size:.88rem; text-overflow:ellipsis; white-space:nowrap; }.battery-insight-list { display:grid; gap:7px; }.battery-insight-item { display:grid; grid-template-columns:21px minmax(0,1fr); gap:9px; align-items:start; padding:8px 9px; border-left:2px solid rgba(56,189,248,.55); border-radius:6px; background:rgba(15,23,42,.46); }.battery-insight-item > i { display:grid; width:18px; height:18px; place-items:center; border-radius:50%; color:#bae6fd; background:rgba(14,116,144,.34); font-size:.68rem; font-style:normal; font-weight:900; }.battery-insight-item h3 { margin:0; color:#e2e8f0; font-size:.76rem; }.battery-insight-item p { margin:3px 0 0; color:#94a3b8; font-size:.7rem; font-weight:600; line-height:1.38; }.battery-insight-item.is-warning { border-left-color:#f59e0b; }.battery-insight-item.is-warning > i { color:#fef3c7; background:rgba(180,83,9,.4); }.battery-insight-item.is-critical { border-left-color:#fb7185; }.battery-insight-item.is-critical > i { color:#fecdd3; background:rgba(190,24,93,.36); }.battery-insight-item.is-normal { border-left-color:#4ade80; }.battery-insight-item.is-normal > i { color:#bbf7d0; background:rgba(22,101,52,.34); }.battery-insight-disclaimer { margin:11px 0 0; color:#64748b; font-size:.64rem; font-weight:600; line-height:1.35; }
@media(max-width:620px) { .battery-insights { padding:14px; }.battery-insights-header { flex-direction:column; gap:10px; }.battery-insight-state { justify-items:start; text-align:left; }.battery-insight-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }.battery-insight-item p { font-size:.69rem; } }

/* Historical Pro review and energy balance beneath the telemetry chart. */
.battery-health-trends-host { margin-top:10px; }.battery-health-trends { border-color:rgba(56,189,248,.32); background:radial-gradient(circle at 100% 0,rgba(20,184,166,.11),transparent 20rem),linear-gradient(145deg,rgba(15,23,42,.95),rgba(8,15,29,.93)); }.history-energy-summary { margin:13px 0 6px; padding:13px; border:1px solid rgba(148,163,184,.2); border-radius:9px; background:linear-gradient(135deg,rgba(15,23,42,.68),rgba(8,15,29,.66)); }.history-energy-heading { display:flex; align-items:start; justify-content:space-between; gap:13px; }.history-energy-heading .label { margin:0 0 3px; }.history-energy-heading p:not(.label),.history-energy-heading > span { margin:0; color:#94a3b8; font-size:.69rem; font-weight:650; line-height:1.35; }.history-energy-heading > span { flex:0 0 auto; color:#cbd5e1; white-space:nowrap; }.history-energy-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:11px; }.history-energy-card { min-width:0; padding:9px 10px; border:1px solid rgba(148,163,184,.16); border-radius:7px; background:rgba(2,6,23,.28); }.history-energy-card span { display:block; overflow:hidden; color:#94a3b8; font-size:.61rem; font-weight:800; letter-spacing:.045em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }.history-energy-card strong { display:block; margin-top:4px; color:#e2e8f0; font-size:1rem; letter-spacing:-.02em; }.history-energy-card.is-charge { border-color:rgba(34,197,94,.32); }.history-energy-card.is-charge strong,.history-energy-card.is-positive strong { color:#86efac; }.history-energy-card.is-discharge { border-color:rgba(249,115,22,.34); }.history-energy-card.is-discharge strong,.history-energy-card.is-negative strong { color:#fdba74; }.history-energy-card.is-positive { border-color:rgba(34,197,94,.32); }.history-energy-card.is-negative { border-color:rgba(249,115,22,.34); }.history-energy-card.is-neutral strong { color:#e2e8f0; }
@media(max-width:620px) { .history-energy-heading { display:block; }.history-energy-heading > span { display:block; margin-top:5px; white-space:normal; }.history-energy-cards { grid-template-columns:1fr; }.history-energy-card { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }.history-energy-card strong { flex:0 0 auto; margin-top:0; font-size:.95rem; } }

/* One analysis surface in Details, plus a deliberately non-interactive Pro preview. */
.battery-analysis-panel { position:relative; margin:18px 0 0; padding:16px; overflow:hidden; }.battery-analysis-panel--history { margin-top:10px; }.battery-analysis-panel-header { display:flex; align-items:start; justify-content:space-between; gap:14px; }.battery-analysis-panel-header h2 { margin:0; color:#fff; font-size:1.08rem; }.battery-analysis-panel-header p { max-width:56ch; margin:4px 0 0; color:#94a3b8; font-size:.76rem; font-weight:600; line-height:1.4; }.battery-analysis-panel .history-info-button { flex:0 0 auto; }.battery-analysis-panel .battery-health-trends-host { margin:0; }.battery-analysis-loading { display:flex; align-items:center; gap:10px; min-height:100px; padding:16px 0 4px; color:#94a3b8; }.battery-analysis-loading > i { width:18px; height:18px; flex:0 0 18px; border:2px solid rgba(56,189,248,.22); border-top-color:#38bdf8; border-radius:50%; animation:battery-analysis-spin .8s linear infinite; }.battery-analysis-loading strong,.battery-analysis-loading span { display:block; }.battery-analysis-loading strong { color:#dbeafe; font-size:.78rem; }.battery-analysis-loading span { max-width:50ch; margin-top:3px; font-size:.7rem; font-weight:600; line-height:1.4; }.battery-insights--embedded { padding:15px 0 0; background:transparent; }.battery-insights--embedded .battery-insights-header h3,.battery-health-trends--embedded .battery-insights-header h3 { margin:0; color:#e2e8f0; font-size:.83rem; }.battery-insights--embedded .battery-insight-disclaimer { display:none; }.battery-health-trends--embedded { margin-top:14px; padding:14px 0 0; border-top:1px solid rgba(148,163,184,.16); background:transparent; }.battery-analysis-panel--history .battery-health-trends--embedded { margin-top:14px; padding:0; border-top:0; }.battery-analysis-panel--locked { min-height:258px; }.battery-analysis-preview { filter:blur(5px); opacity:.58; pointer-events:none; user-select:none; }.battery-analysis-preview .battery-insight-metrics { margin-top:15px; }.battery-analysis-lock { position:absolute; z-index:1; top:50%; left:50%; width:min(100% - 32px,430px); padding:15px 17px; border:1px solid rgba(56,189,248,.45); border-radius:9px; background:rgba(8,15,29,.94); box-shadow:0 16px 42px rgba(0,0,0,.42); text-align:center; transform:translate(-50%,-42%); }.battery-analysis-lock .label { margin:0 0 5px; }.battery-analysis-lock h3 { margin:0; color:#f8fafc; font-size:1rem; }.battery-analysis-lock p:not(.label) { margin:6px auto 12px; color:#94a3b8; font-size:.74rem; font-weight:600; line-height:1.4; }.battery-analysis-lock .detail-action-link { display:inline-flex; min-height:31px; padding:6px 10px; font-size:.7rem; }
@keyframes battery-analysis-spin { to { transform:rotate(360deg); } }
@media(max-width:620px) { .battery-analysis-panel { padding:14px; }.battery-analysis-panel-header { flex-direction:column; }.battery-analysis-panel .history-info-button { align-self:flex-start; }.battery-analysis-panel--locked { min-height:295px; }.battery-analysis-lock { transform:translate(-50%,-37%); } }

/* Keep the fixed battery state below, rather than beside, the subscription notice. */
.app-main.has-subscription-notice .battery-live-status,
.app-main.has-subscription-notice #battery-state { top:58px; right:128px; }

@media(max-width:620px) {
    .demo-mode-context { margin-top:58px; align-items:flex-start; flex-direction:column; gap:3px; }
    .app-main.has-subscription-notice .battery-live-status,
    .app-main.has-subscription-notice #battery-state { top:96px; right:8px; }
}

/* Alert rules and the account-scoped incident inbox. */
.alerts-header { align-items:center; }.alerts-email-target { max-width:100%; padding:7px 10px; border:1px solid rgba(56,189,248,.3); border-radius:999px; color:#bae6fd; background:rgba(8,47,73,.3); font-size:.72rem; font-weight:750; overflow-wrap:anywhere; }
.alerts-layout { display:grid; grid-template-columns:minmax(280px,.85fr) minmax(340px,1.35fr); gap:14px; align-items:start; }.alerts-create,.alerts-rules { padding:18px; }.alerts-create .settings-panel-header,.alerts-rules .settings-panel-header { margin-bottom:15px; }.alerts-create .settings-form { display:grid; max-width:none; gap:13px; }.alerts-create .settings-form > label { display:grid; gap:6px; color:#dbe5ee; font-size:.74rem; font-weight:800; }.alerts-create .settings-form > label[hidden] { display:none !important; }.alerts-create .settings-form input,.alerts-create .settings-form select { width:100%; min-width:0; min-height:40px; padding:9px 10px; border:1px solid rgba(148,163,184,.28); border-radius:7px; outline:0; color:#e2e8f0; background:#101827; font:inherit; font-size:.82rem; }.alerts-create .settings-form input::placeholder { color:#64748b; }.alerts-create .settings-form input:focus,.alerts-create .settings-form select:focus { border-color:rgba(56,189,248,.9); box-shadow:0 0 0 3px rgba(14,116,144,.18); }.alerts-create .settings-form .primary-button { justify-self:start; min-height:39px; padding:9px 15px; border:1px solid rgba(56,189,248,.74); border-radius:7px; color:#fff; background:linear-gradient(135deg,#075985,#0e7490); font:inherit; font-size:.78rem; font-weight:850; cursor:pointer; box-shadow:0 7px 15px rgba(8,47,73,.26); transition:transform .15s,background .15s,border-color .15s; }.alerts-create .settings-form .primary-button:hover:not(:disabled) { border-color:#7dd3fc; background:linear-gradient(135deg,#0c6f9c,#0891b2); transform:translateY(-1px); }.alerts-create .settings-form .primary-button:disabled { cursor:not-allowed; opacity:.48; }.alerts-create small { display:block; margin-top:0; color:var(--text-muted); font-size:.68rem; font-weight:600; line-height:1.35; }.alerts-rule-list { display:grid; gap:8px; }.alert-rule { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px; border:1px solid rgba(148,163,184,.16); border-radius:8px; background:rgba(2,6,23,.2); }.alert-rule.is-disabled { opacity:.54; }.alert-rule strong { color:#f8fafc; font-size:.83rem; }.alert-rule p { margin:4px 0 0; color:var(--text-muted); font-size:.71rem; line-height:1.35; }.alert-rule-actions { display:flex; flex:0 0 auto; flex-wrap:wrap; justify-content:flex-end; gap:5px; }.alert-rule-actions form,.alert-remove-form { margin:0; }.compact-button { min-height:31px; padding:6px 8px; border:1px solid rgba(56,189,248,.42); border-radius:6px; color:#dbeafe; background:rgba(14,116,144,.12); font-size:.69rem; font-weight:800; cursor:pointer; }.compact-button:hover { border-color:rgba(56,189,248,.82); color:#fff; background:rgba(14,116,144,.28); }.compact-button.danger { border-color:rgba(248,113,113,.46); color:#fecaca; background:rgba(127,29,29,.15); }.compact-button.danger:hover { border-color:rgba(248,113,113,.8); background:rgba(127,29,29,.34); }.alerts-empty { padding:28px 10px; }.alerts-incidents { display:grid; gap:10px; }.alert-incident { display:flex; align-items:start; justify-content:space-between; gap:14px; padding:14px; border-left:3px solid rgba(245,158,11,.7); }.alert-incident.severity-alarm { border-left-color:#f87171; }.alert-incident.severity-info { border-left-color:#38bdf8; }.alert-incident-main { display:flex; flex:1 1 auto; justify-content:space-between; gap:18px; min-width:0; }.alert-incident h3 { margin:8px 0 4px; color:#fff; font-size:.94rem; }.alert-incident p { max-width:68ch; margin:0; color:#cbd5e1; font-size:.76rem; line-height:1.45; }.alert-incident dl { display:grid; grid-template-columns:repeat(3,minmax(100px,1fr)); align-self:center; gap:10px; min-width:min(42%,390px); margin:0; }.alert-incident dl div { min-width:0; }.alert-incident dt { color:var(--text-muted); font-size:.6rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }.alert-incident dd { overflow:hidden; margin:4px 0 0; color:#e2e8f0; font-size:.72rem; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }
@media(max-width:900px) { .alerts-layout { grid-template-columns:1fr; }.alert-incident-main { display:grid; gap:12px; }.alert-incident dl { min-width:0; } }
@media(max-width:620px) { .alerts-header { align-items:start; flex-direction:column; gap:8px; }.alerts-email-target { border-radius:7px; }.alert-rule { align-items:start; flex-direction:column; }.alert-rule-actions { justify-content:flex-start; }.alert-incident { flex-direction:column; }.alert-incident-main { width:100%; }.alert-incident dl { grid-template-columns:1fr 1fr; }.alert-remove-form { align-self:flex-end; } }

/* Channel controls deliberately look available/roadmapped without pretending
   that SMS or WhatsApp can be selected before their provider integration. */
.alert-channels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:0; padding:10px; border:1px solid rgba(148,163,184,.18); border-radius:8px; background:rgba(2,6,23,.2); }.alert-channels legend { padding:0 4px; color:var(--text-muted); font-size:.65rem; font-weight:850; letter-spacing:.07em; text-transform:uppercase; }.alerts-create .settings-form .alert-channel { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:6px; row-gap:2px; min-width:0; padding:8px; border:1px solid rgba(56,189,248,.26); border-radius:6px; color:#e0f2fe; background:rgba(14,116,144,.1); font-size:.74rem; cursor:default; }.alerts-create .settings-form .alert-channel.is-coming { border-color:rgba(148,163,184,.18); color:#94a3b8; background:rgba(15,23,42,.35); }.alerts-create .settings-form .alert-channel input[type="checkbox"] { width:15px; min-width:15px; min-height:15px; height:15px; margin:0; accent-color:#38bdf8; }.alerts-create .settings-form .alert-channel span { overflow:hidden; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }.alerts-create .settings-form .alert-channel small { grid-column:2; color:#7dd3fc; font-size:.6rem; font-weight:700; }.alerts-create .settings-form .alert-channel.is-coming small { color:#64748b; }.alert-clear-all-form { margin:0; }
@media(max-width:620px) { .alert-channels { grid-template-columns:1fr; } }

/* Admin security audit. The table intentionally keeps long, untrusted values
   contained so a User-Agent or event detail cannot distort the page. */
.security-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:14px; }.security-summary-card { display:grid; gap:5px; min-height:104px; padding:17px; }.security-summary-card span,.security-summary-card small { color:var(--text-muted); font-size:.69rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }.security-summary-card strong { color:#f8fafc; font-size:1.7rem; line-height:1; }.security-summary-card.severity-high { border-color:rgba(245,158,11,.5); }.security-summary-card.severity-high strong { color:#fbbf24; }.security-summary-card.severity-critical { border-color:rgba(248,113,113,.55); }.security-summary-card.severity-critical strong { color:#f87171; }.security-info-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:14px; }.security-info-card { padding:16px 18px; }.security-info-card p:not(.label) { max-width:70ch; margin:6px 0 0; color:#cbd5e1; font-size:.78rem; line-height:1.45; }.security-events-panel { padding:0; overflow:hidden; }.security-events-heading { display:flex; align-items:end; justify-content:space-between; gap:18px; padding:18px 20px 15px; border-bottom:1px solid rgba(148,163,184,.14); }.security-events-heading h2 { margin:4px 0 0; color:#fff; font-size:1.06rem; }.security-events-heading p:not(.label) { max-width:65ch; margin:6px 0 0; color:var(--text-muted); font-size:.75rem; line-height:1.35; }.security-filters { display:flex; flex:0 0 auto; flex-wrap:wrap; align-items:end; justify-content:flex-end; gap:7px; }.security-filters label { display:grid; gap:4px; color:var(--text-muted); font-size:.64rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }.security-filters select { min-height:32px; padding:5px 8px; border:1px solid rgba(148,163,184,.3); border-radius:6px; color:#e2e8f0; background:#101827; font:inherit; font-size:.73rem; text-transform:none; }.security-table-wrap { overflow-x:auto; }.security-table { width:100%; min-width:1350px; border-collapse:collapse; }.security-table th,.security-table td { padding:11px 12px; border-bottom:1px solid rgba(148,163,184,.13); text-align:left; vertical-align:top; }.security-table th { color:var(--text-muted); background:rgba(15,23,42,.5); font-size:.63rem; font-weight:850; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap; }.security-table td { max-width:230px; color:#dbe5ee; font-size:.74rem; font-weight:700; line-height:1.35; }.security-table td > small { display:block; max-width:230px; overflow:hidden; margin-top:4px; color:var(--text-muted); font-size:.65rem; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }.security-table td > code { display:block; max-width:230px; overflow:hidden; color:#cbd5e1; font-size:.68rem; text-overflow:ellipsis; white-space:nowrap; }.security-table td form { margin:0; }.security-event.severity-warning { box-shadow:inset 3px 0 0 rgba(245,158,11,.7); }.security-event.severity-high { box-shadow:inset 3px 0 0 #f97316; }.security-event.severity-critical { box-shadow:inset 3px 0 0 #f87171; }.security-event.is-reviewed { opacity:.58; }.security-severity { display:block; color:#bae6fd; font-size:.69rem; font-weight:850; }.severity-warning .security-severity { color:#fbbf24; }.severity-high .security-severity { color:#fb923c; }.severity-critical .security-severity { color:#f87171; }
@media(max-width:900px) { .security-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }.security-info-grid { grid-template-columns:1fr; }.security-events-heading { align-items:start; flex-direction:column; }.security-filters { justify-content:flex-start; } }
@media(max-width:620px) { .security-summary-card { min-height:92px; padding:14px; }.security-summary-card strong { font-size:1.4rem; }.security-filters { width:100%; }.security-filters label { flex:1 1 130px; }.security-filters select { width:100%; } }
.security-table .security-event-type { max-width:250px; white-space:normal; overflow-wrap:anywhere; text-overflow:clip; }.security-table .security-event-details { min-width:260px; max-width:390px; overflow:visible; color:#cbd5e1; line-height:1.45; text-overflow:clip; white-space:normal; overflow-wrap:anywhere; }
.security-heading-actions { display:flex; flex-wrap:wrap; align-items:end; justify-content:flex-end; gap:7px; }.security-clear-form,.security-event-actions form { margin:0; }.security-event-actions { display:flex; flex-wrap:wrap; gap:5px; min-width:150px; } @media(max-width:900px) { .security-heading-actions { justify-content:flex-start; } }

/* History chart event layer: error triangle + its timestamp line. */
.history-event-toggle { display:inline-flex; min-height:31px; align-items:center; gap:6px; padding:6px 10px; border:1px solid rgba(148,163,184,.28); border-radius:7px; color:#94a3b8; background:rgba(15,23,42,.64); font:inherit; font-size:.75rem; font-weight:800; cursor:pointer; }.history-event-toggle i { position:relative; display:inline-grid; width:13px; height:13px; place-items:center; border-radius:50%; background:#fb7185; box-shadow:0 1px 3px rgba(0,0,0,.38); }.history-event-toggle i::after { color:#fff1f2; content:'!'; font-size:10px; font-weight:900; line-height:1; }.history-event-toggle.is-active { border-color:rgba(251,113,133,.62); color:#fecdd3; background:rgba(127,29,29,.2); }.history-event-toggle:hover { border-color:rgba(251,113,133,.82); color:#fff; }.trend-error-marker { cursor:pointer; outline:none; }.trend-error-marker line { stroke:rgba(251,113,133,.72); stroke-width:1.15; stroke-dasharray:3 4; vector-effect:non-scaling-stroke; }.trend-error-marker circle { fill:#f43f5e; stroke:#fff1f2; stroke-width:1; vector-effect:non-scaling-stroke; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); }.trend-error-marker path { fill:none; stroke:#fff1f2; stroke-width:1.8; stroke-linecap:round; vector-effect:non-scaling-stroke; }.trend-error-marker:hover line,.trend-error-marker:focus line { stroke:#fda4af; stroke-width:1.8; }.trend-error-marker:hover circle,.trend-error-marker:focus circle { fill:#fb7185; stroke:#fff; stroke-width:1.5; }.trend-tooltip-error { color:#fecaca; font-weight:800; }
.trend-tooltip span.is-highlighted { color:#fff; font-weight:850; }
.trend-tooltip-markers circle { vector-effect:non-scaling-stroke; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); }

/* The navigator pans a selected custom time window without changing its duration. */
.history-pan-navigator { display:grid; grid-template-columns:auto minmax(160px,1fr); align-items:center; gap:12px; margin:11px 2px 0; padding:10px 11px; border:1px solid rgba(148,163,184,.17); border-radius:8px; background:rgba(2,6,23,.24); }.history-pan-heading { display:grid; gap:2px; color:var(--text-muted); font-size:.65rem; font-weight:800; letter-spacing:.045em; text-transform:uppercase; }.history-pan-heading strong { color:#cbd5e1; font-size:.7rem; font-weight:700; letter-spacing:0; text-transform:none; white-space:nowrap; }.history-pan-navigator input[type="range"] { width:100%; min-width:0; height:18px; margin:0; padding:0; appearance:none; -webkit-appearance:none; background:transparent; cursor:ew-resize; }.history-pan-navigator input[type="range"]::-webkit-slider-runnable-track { height:3px; border:0; border-radius:999px; background:rgba(100,116,139,.66); }.history-pan-navigator input[type="range"]::-webkit-slider-thumb { width:13px; height:13px; margin-top:-5px; appearance:none; -webkit-appearance:none; border:2px solid #e0f2fe; border-radius:50%; background:#38bdf8; box-shadow:0 0 0 3px rgba(14,116,144,.24),0 2px 5px rgba(0,0,0,.45); }.history-pan-navigator input[type="range"]::-moz-range-track { height:3px; border:0; border-radius:999px; background:rgba(100,116,139,.66); }.history-pan-navigator input[type="range"]::-moz-range-progress { background:transparent; }.history-pan-navigator input[type="range"]::-moz-range-thumb { width:10px; height:10px; border:2px solid #e0f2fe; border-radius:50%; background:#38bdf8; box-shadow:0 0 0 3px rgba(14,116,144,.24),0 2px 5px rgba(0,0,0,.45); }
@media(max-width:620px) { .history-pan-navigator { grid-template-columns:1fr; gap:8px; }.history-pan-heading { grid-template-columns:auto 1fr; align-items:center; gap:8px; }.history-pan-heading strong { text-align:right; white-space:normal; } }

/* History data retention help. */
.history-hero-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:9px; }.history-info-button { display:inline-flex; min-height:32px; align-items:center; gap:7px; padding:6px 10px; border:1px solid rgba(56,189,248,.42); border-radius:7px; color:#dbeafe; background:rgba(14,116,144,.12); font:inherit; font-size:.74rem; font-weight:800; cursor:pointer; }.history-info-button:hover { border-color:rgba(56,189,248,.84); color:#fff; background:rgba(14,116,144,.28); }.history-info-button span { display:grid; width:15px; height:15px; place-items:center; border:1px solid currentColor; border-radius:50%; font-family:Georgia,serif; font-size:.62rem; font-weight:800; line-height:1; }.history-retention-dialog { width:min(620px,calc(100vw - 28px)); max-height:min(760px,calc(100vh - 28px)); padding:0; border:1px solid rgba(56,189,248,.42); border-radius:11px; color:#e2e8f0; background:#111827; box-shadow:0 24px 64px rgba(0,0,0,.62); }.history-retention-dialog::backdrop { background:rgba(2,6,23,.76); }.history-retention-dialog-content { padding:20px; overflow:auto; }.history-retention-dialog-heading { display:flex; align-items:start; justify-content:space-between; gap:16px; }.history-retention-dialog h2 { margin:5px 0 0; color:#fff; font-size:1.12rem; }.history-retention-intro { margin:12px 0 14px; color:#cbd5e1; font-size:.8rem; line-height:1.48; }.history-retention-tiers { display:grid; gap:7px; margin:0; }.history-retention-tiers div { padding:10px 11px; border:1px solid rgba(148,163,184,.16); border-radius:8px; background:rgba(2,6,23,.24); }.history-retention-tiers dt { color:#f1f5f9; font-size:.78rem; font-weight:800; }.history-retention-tiers dd { margin:4px 0 0; color:#94a3b8; font-size:.72rem; line-height:1.4; }.history-retention-plan { margin:13px 0 0; padding:10px 11px; border-left:3px solid rgba(56,189,248,.8); color:#cbd5e1; background:rgba(14,116,144,.12); font-size:.76rem; line-height:1.45; }.history-retention-plan strong { margin-right:4px; color:#e0f2fe; }.history-retention-dialog-actions { display:flex; justify-content:flex-end; margin-top:16px; }.history-dialog-close { display:grid; width:29px; height:29px; place-items:center; padding:0; border:1px solid rgba(148,163,184,.3); border-radius:7px; color:#cbd5e1; background:rgba(15,23,42,.65); font:inherit; font-size:1.25rem; line-height:1; cursor:pointer; }.history-dialog-close:hover { color:#fff; background:rgba(51,65,85,.76); }
@media(max-width:620px) { .history-hero-actions { width:100%; justify-content:space-between; }.history-retention-dialog-content { padding:16px; }.history-retention-dialog h2 { font-size:1.02rem; } }

/* Administrator MFA setup and recovery codes. */
.mfa-setup-guide { display:grid; gap:10px; margin:18px 0; padding:14px; border:1px solid rgba(56,189,248,.28); border-radius:9px; background:rgba(8,47,73,.18); }.mfa-setup-guide > p { margin:0; color:#cbd5e1; font-size:.78rem; font-weight:650; line-height:1.45; }.mfa-qr-card { display:grid; justify-items:center; gap:8px; padding:13px; border:1px solid rgba(56,189,248,.28); border-radius:8px; background:rgba(2,6,23,.26); }.mfa-qr-card p { max-width:280px; margin:0; color:#94a3b8; font-size:.68rem; font-weight:700; line-height:1.4; text-align:center; }.mfa-qr-code { display:grid; width:202px; height:202px; place-items:center; padding:5px; border-radius:7px; background:#f8fafc; box-shadow:0 5px 16px rgba(0,0,0,.28); }.mfa-qr-code canvas,.mfa-qr-code img { display:block; max-width:100%; height:auto; }.mfa-setup-guide dl { display:grid; gap:8px; margin:0; }.mfa-setup-guide dl > div { display:grid; grid-template-columns:112px minmax(0,1fr); gap:8px; align-items:center; }.mfa-setup-guide dt { color:#94a3b8; font-size:.68rem; font-weight:800; text-transform:uppercase; }.mfa-setup-guide dd { min-width:0; margin:0; overflow-wrap:anywhere; color:#f1f5f9; font-size:.78rem; font-weight:750; }.mfa-setup-guide code { color:#bae6fd; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.06em; word-break:break-all; }.mfa-copy-button { margin:7px 0 0; padding:4px 7px; border:1px solid rgba(56,189,248,.38); border-radius:5px; color:#dbeafe; background:rgba(14,116,144,.14); font:inherit; font-size:.67rem; font-weight:800; cursor:pointer; }.mfa-copy-button:hover { color:#fff; background:rgba(14,116,144,.32); }.mfa-recovery-option { margin-top:17px; border-top:1px solid rgba(148,163,184,.18); padding-top:13px; }.mfa-recovery-option summary { color:#94a3b8; font-size:.75rem; font-weight:800; cursor:pointer; }.mfa-recovery-option .cloud-form { margin-top:13px; }.mfa-recovery-option .detail-action-link { cursor:pointer; }.mfa-recovery-codes-panel { width:min(100%,720px); padding:20px; }.mfa-recovery-codes-panel .form-alert { margin:0 0 14px; }.mfa-recovery-code-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0 0 18px; }.mfa-recovery-code-grid code { display:block; padding:9px 10px; border:1px solid rgba(148,163,184,.22); border-radius:7px; color:#e0f2fe; background:rgba(2,6,23,.3); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.8rem; font-weight:750; letter-spacing:.05em; text-align:center; }.mfa-recovery-codes-panel form { margin:0; }.mfa-recovery-codes-panel .scan-button { width:auto; } @media(max-width:520px) { .mfa-setup-guide dl > div { grid-template-columns:1fr; gap:3px; }.mfa-recovery-code-grid { grid-template-columns:1fr; } }

/* Stable contact points keep an open contactor centered like a closed one. */
.contactor-terminal { fill:currentColor; stroke:rgba(15,23,42,.92); stroke-width:1.2; }

/* A device alarm is shown by its status, not as a false diagnosis of the power reading. */
.energy-flow-card.is-alarm { border-color:rgba(56,189,248,.38); }
.device-runtime-item.is-error { border-color:rgba(251,113,133,.68); background:rgba(127,29,29,.16); }.device-runtime-item.is-error strong { color:#fecaca; }

/* Dashboard table sorting. The table order remains editable in Manage layout mode. */
.battery-table-sort-button { display:inline-flex; width:100%; align-items:center; justify-content:space-between; gap:6px; padding:0; border:0; color:inherit; background:transparent; font:inherit; font-size:inherit; font-weight:inherit; letter-spacing:inherit; text-align:left; text-transform:inherit; cursor:pointer; }.battery-table-sort-button:hover:not(:disabled),.battery-table-sort-button.is-active { color:#e0f2fe; }.battery-table-sort-button i { color:#64748b; font-size:.8rem; font-style:normal; line-height:1; }.battery-table-sort-button.is-active i { color:#38bdf8; }.battery-table-sort-button:disabled { cursor:default; opacity:.6; }
.battery-command-feedback.is-error { border-color:rgba(251,113,133,.52); color:#fecaca; background:rgba(127,29,29,.2); }

/* Keep SOC and SOH gauges on one shared baseline despite different headers. */
.overview-soc-card,.overview-soh-card { display:flex; flex-direction:column; align-items:center; }.overview-soc-card > .label { align-self:flex-start; }.overview-soh-topline { width:100%; }.overview-soc-gauge,.overview-soh-gauge { margin: auto auto 0; }.overview-soc-card > p,.overview-soh-card > p { min-height:18px; }

/* Current relative to the active charge/discharge limit: a small position marker, not a progress bar. */
.current-limits-card .metric-mini-values { margin-top:14px; }.health-current-limit { display:grid; grid-template-columns:auto minmax(36px,1fr) auto; align-items:center; gap:7px; margin-top:10px; padding-top:9px; border-top:1px solid rgba(148,163,184,.16); color:#86efac; }.health-current-limit span { overflow:hidden; color:var(--text-muted); font-size:.59rem; font-weight:800; letter-spacing:.05em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }.health-current-limit strong { color:inherit; font-size:.68rem; font-weight:850; white-space:nowrap; }.health-current-limit > i { position:relative; display:block; height:4px; border-radius:99px; background:rgba(148,163,184,.26); }.health-current-limit > i::before,.health-current-limit > i::after { position:absolute; top:50%; width:1px; height:7px; background:rgba(148,163,184,.38); content:''; transform:translateY(-50%); }.health-current-limit > i::before { left:0; }.health-current-limit > i::after { right:0; }.health-current-limit b { position:absolute; z-index:1; top:50%; left:var(--current-position); display:block; width:3px; height:11px; border-radius:99px; background:currentColor; box-shadow:0 0 8px currentColor; transform:translate(-50%,-50%); }.health-current-limit.is-discharging { color:#fb923c; }

/* Analytics links may expose a foreign device only in explicitly read-only admin mode. */
.detail-hero.is-admin-read-only .detail-command-actions,.error-section-header.is-admin-read-only .error-actions { display:none; }