:root { --ink: #e9f5ed; --muted: #9fb9aa; --paper: #f6f5ee; --forest: #082c25; --deep: #061d19; --line: rgba(9, 44, 37, .1); --mint: #b7f567; --orange: #f4b65c; --danger: #e66a55; --card: #ffffff; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: var(--forest); background: var(--paper); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; background: var(--paper); }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(107, 179, 236, .6); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.auth-shell { min-height: 100vh; display: grid; place-content: center; gap: 26px; padding: 42px 20px 28px; color: var(--ink); background: radial-gradient(circle at 74% 8%, #1b6048 0, transparent 27%), radial-gradient(circle at 17% 86%, #12463d 0, transparent 31%), var(--deep); }
.brand-lockup { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 800; letter-spacing: -.7px; font-size: 19px; }
.brand-lockup p { margin: 0; white-space: nowrap; }
.brand-lockup.compact { flex-shrink: 0; }
.brand-mark { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 11px; background: var(--mint); transform: rotate(-8deg); }
.brand-mark span { width: 13px; height: 13px; display: block; border-radius: 3px 50% 3px 50%; background: var(--forest); }
.loading-spinner { width: 26px; height: 26px; margin: 0 auto; border: 3px solid rgba(255,255,255,.18); border-top-color: var(--mint); border-radius: 50%; animation: spin .8s linear infinite; }
.loading-text { margin: 0; color: #b8d1c2; font-size: 13px; text-align: center; }
.auth-card { width: min(100%, 445px); padding: clamp(28px, 7vw, 44px); border: 1px solid rgba(255,255,255,.14); border-radius: 24px; background: rgba(255,255,255,.08); backdrop-filter: blur(16px); box-shadow: 0 30px 80px rgba(0,0,0,.24); }
.eyebrow { margin: 0 0 9px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; color: #5f8d77; font-size: 11px; font-weight: 500; letter-spacing: .11em; }
.auth-card .eyebrow { color: #b7dfca; }
h1, h2, p { margin-top: 0; } h1, h2 { letter-spacing: -1.3px; }
.auth-card h1 { margin-bottom: 12px; font-size: clamp(30px, 7vw, 40px); line-height: 1.1; }
.lede { color: #c5d8ce; line-height: 1.65; font-size: 14px; }
form { margin-top: 28px; }
label { display: block; margin: 18px 0 7px; color: #e7f4eb; font-size: 13px; font-weight: 700; }
input { width: 100%; padding: 13px 14px; border: 1px solid rgba(255,255,255,.2); border-radius: 10px; color: white; background: rgba(1,21,17,.32); }
input::placeholder { color: #94aa9f; }
.password-field { position: relative; }.password-field input { padding-right: 48px; }
.remember-field { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; color: #c5d8ce; font-size: 13px; font-weight: 400; }.remember-field input { width: auto; }
.icon-button { position: absolute; top: 5px; right: 5px; width: 37px; height: 37px; border: 0; border-radius: 8px; color: var(--mint); background: transparent; }
.security-note { display: flex; gap: 7px; margin: 17px 0; color: #b8d1c2; font-size: 12px; line-height: 1.5; }.security-note span { color: var(--mint); }
.form-error, .dashboard-error { border-radius: 10px; padding: 10px 12px; color: #ffe4df; background: rgba(188, 55, 31, .4); font-size: 13px; }.dashboard-error { margin: 20px 0 0; color: #872b19; background: #fff0ed; }
.primary-button { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; border-radius: 11px; padding: 14px 17px; color: var(--forest); background: var(--mint); font-weight: 800; transition: transform .18s, background .18s; }.primary-button:hover { background: #d0ff8e; transform: translateY(-1px); }
.fine-print { margin: 20px 0 0; color: #a9c1b3; font-size: 11px; line-height: 1.55; }.auth-footer { margin: 0; color: #92b1a1; text-align: center; font-size: 12px; }
.dashboard { width: min(1250px, calc(100% - 40px)); margin: auto; padding-bottom: 46px; }.topbar { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }.compact { color: var(--forest); font-size: 17px; }.compact .brand-mark { width: 28px; height: 28px; border-radius: 9px; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }.plant-picker select { max-width: 230px; border: 1px solid var(--line); border-radius: 9px; padding: 9px 31px 9px 12px; color: var(--forest); background: white; font-size: 12px; font-weight: 700; }.quiet-button, .avatar { border: 1px solid var(--line); border-radius: 9px; color: var(--forest); background: transparent; font-size: 12px; font-weight: 700; }.quiet-button { padding: 9px 12px; }.quiet-button.is-loading span { display: inline-block; animation: spin .75s linear infinite; }.avatar { display: grid; place-items: center; width: 35px; height: 35px; color: white; background: var(--forest); }
.hero { display: flex; justify-content: space-between; align-items: end; gap: 22px; padding: 40px clamp(24px, 5vw, 56px); min-height: 227px; border-radius: 22px; color: white; background: linear-gradient(115deg, #092d25, #0a503e); overflow: hidden; position: relative; }.hero::after { content: ''; position: absolute; width: 470px; height: 470px; right: -130px; bottom: -285px; border: 1px solid rgba(193,255,130,.38); border-radius: 50%; box-shadow: 0 0 0 62px rgba(193,255,130,.06), 0 0 0 124px rgba(193,255,130,.04); }.hero .eyebrow { color: #b6e8d0; }.hero h1 { max-width: 650px; margin-bottom: 14px; font-size: clamp(28px, 5vw, 46px); }.status-line { display: flex; align-items: center; gap: 9px; color: #c5dace; font-size: 12px; }.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #f4b65c; }.status-dot.online { background: var(--mint); box-shadow: 0 0 0 4px rgba(183,245,103,.15); }.status-dot.offline { background: var(--danger); }.divider { width: 3px; height: 3px; border-radius: 50%; background: #87ac9c; }.hero-stat { z-index: 1; min-width: 138px; padding: 15px; border-radius: 15px; background: rgba(1,28,23,.39); backdrop-filter: blur(5px); text-align: right; }.hero-stat span, .hero-stat small { display: block; color: #b9d8c8; font-size: 11px; }.hero-stat strong { display: block; margin: 4px 0; color: var(--mint); letter-spacing: -1.1px; font-size: 26px; }

/* ---------- Energy flow card ---------- */

.flow-card { margin-top: 18px; padding: clamp(22px, 4vw, 36px); border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg, #fff 0%, #fcfefc 100%); overflow: hidden; }
.flow-heading, .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; row-gap: 10px; flex-wrap: wrap; }
.flow-heading { align-items: flex-start; }
.flow-heading > div, .panel-heading > div { min-width: 0; }
.flow-heading h2, .panel-heading h2 { margin: 0; font-size: 20px; }
.mode-badge { display: inline-flex; align-items: center; gap: 7px; border-radius: 99px; padding: 7px 13px 7px 11px; color: #397458; background: #e7f7de; box-shadow: inset 0 0 0 1px rgba(61, 116, 88, .06); font-size: 11px; font-weight: 800; }
.mode-badge::before { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(57, 116, 88, .1); content: ''; }

/* Single-line schematic. One fixed-aspect (640:320) coordinate space shared
   by the SVG conductors AND the HTML equipment-block overlays, so lines and
   blocks can never drift apart at any width. PV/battery feed the inverter's
   LEFT edge and grid/load feed its RIGHT edge (rather than top/bottom), which
   keeps the whole diagram short on desktop, where width is cheap but height
   is scarce. Each branch is a thin dashed conductor that dims to .35 opacity
   when idle; the small square marker and the direction arrow nearest its
   destination only light up for the direction currently in effect (import vs
   export, charge vs discharge), so the reader never has to infer direction
   from color alone. */
.energy-diagram {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 640 / 320;
  width: 100%;
  max-width: 620px;
  margin: 24px auto 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(27, 58, 92, .05) 27px 28px),
    repeating-linear-gradient(90deg, transparent 0 27px, rgba(27, 58, 92, .05) 27px 28px),
    #eef2f4;
  border: 1px solid #b9c6ce;
  border-radius: 6px;
  font-family: 'Overpass', ui-sans-serif, system-ui, sans-serif;
}

.sk-canvas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sk-canvas-mobile { display: none; }
.sk-line { fill: none; stroke-linecap: square; stroke-dasharray: 6 4; stroke-width: 2; transition: opacity .35s; }
.sk-line-pv { stroke: #c98317; }
.sk-line-grid { stroke: #1b3a5c; }
.sk-line-bat { stroke: #1f6f63; }
.sk-line-load { stroke: #16232f; }
.sk-term { fill: #1b3a5c; }
.sk-arrow, .sk-marker { opacity: 0; transition: opacity .35s; }
.sk-marker { stroke: #fff; stroke-width: 1.5; }
@media (prefers-reduced-motion: reduce) { .sk-marker { display: none; } }

.energy-diagram[data-solar="idle"] .sk-line-pv { opacity: .35; }
.energy-diagram[data-solar="active"] .sk-arrow-solar,
.energy-diagram[data-solar="active"] .sk-marker-solar { opacity: 1; }

.energy-diagram[data-grid="idle"] .sk-line-grid { opacity: .35; }
.energy-diagram[data-grid="import"] .sk-arrow-grid-in,
.energy-diagram[data-grid="import"] .sk-marker-grid-in { opacity: 1; }
.energy-diagram[data-grid="export"] .sk-arrow-grid-out,
.energy-diagram[data-grid="export"] .sk-marker-grid-out { opacity: 1; }

.energy-diagram[data-battery="idle"] .sk-line-bat { opacity: .35; }
.energy-diagram[data-battery="charge"] .sk-arrow-bat-charge,
.energy-diagram[data-battery="charge"] .sk-marker-bat-charge { opacity: 1; }
.energy-diagram[data-battery="discharge"] .sk-arrow-bat-discharge,
.energy-diagram[data-battery="discharge"] .sk-marker-bat-discharge { opacity: 1; }

.energy-diagram[data-load="idle"] .sk-line-load { opacity: .35; }
.energy-diagram[data-load="active"] .sk-arrow-load,
.energy-diagram[data-load="active"] .sk-marker-load { opacity: 1; }

/* Equipment blocks: each centered on its connection point via translate(-50%,-50%)
   so the drawn conductors always meet the block's edge, regardless of width. */
.sk-block { position: absolute; transform: translate(-50%, -50%); width: 26.6%; height: auto; min-height: 24%; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 14px; border: 1.5px solid #1b3a5c; border-radius: 3px; background: #fff; text-align: left; }
.sk-block .sk-tag { font-family: 'Overpass Mono', ui-monospace, monospace; font-size: clamp(8px, 2cqi, 10px); letter-spacing: .05em; color: #51677a; }
.sk-block .sk-title { font-size: clamp(10px, 2.6cqi, 12px); font-weight: 600; color: #16232f; }
.sk-block strong { font-family: 'Overpass Mono', ui-monospace, monospace; font-weight: 700; font-size: clamp(14px, 4cqi, 20px); color: #16232f; font-variant-numeric: tabular-nums; line-height: 1.15; }
.sk-block small { display: block; font-size: clamp(9px, 2.2cqi, 11px); color: #51677a; line-height: 1.4; font-weight: 400; }

.sk-block-pv { left: 19.53%; top: 18.75%; }
.sk-block-grid { left: 80.47%; top: 18.75%; }
.sk-block-bat { left: 19.53%; top: 81.25%; }
.sk-block-load { left: 80.47%; top: 81.25%; }
.sk-block-inv { left: 50%; top: 50%; width: 18.8%; min-height: 27%; background: #f4f1e9; border-width: 2px; }

.energy-diagram[data-solar="active"] .sk-block-pv strong { color: #c98317; }
.energy-diagram[data-grid="import"] .sk-block-grid strong,
.energy-diagram[data-grid="export"] .sk-block-grid strong { color: #1b3a5c; }
.energy-diagram[data-battery="charge"] .sk-block-bat strong,
.energy-diagram[data-battery="discharge"] .sk-block-bat strong { color: #1f6f63; }

.flow-explainer { display: flex; align-items: center; gap: 9px; margin: 16px 0 0; padding: 11px 13px; border: 1px solid rgba(33, 105, 72, .08); border-radius: 10px; color: #507063; background: linear-gradient(90deg, #f1f8f2, #f7fbf8); font-size: 12px; line-height: 1.5; }
.flow-explainer::before { display: grid; flex: 0 0 auto; place-items: center; width: 20px; height: 20px; border-radius: 7px; color: #0a5a44; background: #d7f0d8; content: '↳'; font-size: 14px; font-weight: 800; }

/* Below ~680px the diagram keeps the exact same layout as desktop — PV and
   battery into the inverter's left edge, grid and load into its right edge —
   just redrawn on a taller, narrower coordinate space (a separate SVG,
   sk-canvas-mobile) so the same four corner blocks get enough vertical room
   instead of being squashed flat. */
@media (max-width: 680px) {
  .energy-diagram { aspect-ratio: 360 / 380; max-width: 380px; }
  .sk-canvas-desktop { display: none; }
  .sk-canvas-mobile { display: block; }

  .sk-block { padding: 6px 8px; gap: 1px; }
  .sk-block .sk-tag { font-size: clamp(7px, 1.7cqi, 9px); }
  .sk-block .sk-title { font-size: clamp(9px, 2.2cqi, 11px); }
  .sk-block strong { font-size: clamp(12px, 3.4cqi, 16px); }
  .sk-block small { font-size: clamp(8px, 1.9cqi, 10px); line-height: 1.3; }

  .sk-block-pv { left: 18.06%; top: 14.47%; width: 30.6%; min-height: 22%; }
  .sk-block-bat { left: 18.06%; top: 85.53%; width: 30.6%; min-height: 22%; }
  .sk-block-inv { width: 22.2%; min-height: 24%; }
  .sk-block-grid { left: 81.94%; top: 14.47%; width: 30.6%; min-height: 22%; }
  .sk-block-load { left: 81.94%; top: 85.53%; width: 30.6%; min-height: 22%; }
}

/* ---------- Stat cards & detail panels ---------- */

.stats-section { margin: 18px 0 0; }
.stats-heading { margin: 0 0 14px; }
.stats-heading h2 { margin: 0; font-size: 18px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }.stat-card { min-height: 158px; padding: 21px; border-radius: 17px; background: white; }.stat-card.sun { background: #ffedc2; }.stat-card.battery-stat { background: #e6f8d5; }.stat-card.load { background: #dff2ef; }.stat-card.grid-stat { background: #e7eaf3; }.stat-label { display: block; color: #52675d; font-size: 12px; font-weight: 700; }.stat-card strong { display: block; margin: 15px 0 7px; letter-spacing: -1px; font-size: 28px; }.stat-card small { color: #64766c; font-size: 11px; }.battery-meter { width: 100%; height: 7px; margin: 12px 0 7px; border-radius: 99px; overflow: hidden; background: rgba(20,92,45,.15); }.battery-meter i { display: block; height: 100%; border-radius: inherit; background: #3f9d52; }
.stat-card.battery-stat.is-empty { display: flex; flex-direction: column; justify-content: center; }
.stat-card.battery-stat.is-empty strong, .stat-card.battery-stat.is-empty .battery-meter { display: none; }
.stat-card.battery-stat.is-empty small { font-size: 15px; font-weight: 800; color: #3a5347; }

/* Technical detail panels sit behind a collapsed-by-default (on mobile)
   disclosure so the default scroll only carries the numbers people check
   every time; diagnostics are one tap away instead of always taking space. */
.tech-details { margin-top: 18px; }
.tech-details-summary { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 17px; background: white; cursor: pointer; list-style: none; }
.tech-details-summary::-webkit-details-marker { display: none; }
.tech-details-summary .eyebrow { margin: 0; }
.tech-details-title { flex: 1; font-weight: 800; font-size: 14px; color: var(--forest); }
.tech-details-chevron { color: #52675d; transition: transform .2s; }
.tech-details[open] .tech-details-chevron { transform: rotate(180deg); }
.tech-details .details-grid { margin-top: 14px; }

.details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.panel { padding: 24px; border: 1px solid var(--line); border-radius: 17px; background: white; }.reading-list { margin: 21px 0 0; }.reading-list > div { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 12px 0; border-top: 1px solid var(--line); }.reading-list dt, .reading-list > div > :first-child { color: #587064; font-size: 12px; }.reading-list dd { margin: 0; font-size: 13px; font-weight: 800; }.reading-list small { grid-column: 1 / -1; color: #7b9086; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; }.system-readings > div { padding: 10px 0; }.system-readings dd { text-align: right; overflow-wrap: anywhere; }
.system-readings .stacked-row { grid-template-columns: 1fr; }
.system-readings .stacked-row dd { text-align: left; overflow-wrap: break-word; margin-top: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 880px) { .stats-grid { grid-template-columns: repeat(2, 1fr); }.details-grid { grid-template-columns: 1fr 1fr; }.details-grid .panel:last-child { grid-column: 1 / -1; } }
@media (max-width: 560px) {
  .dashboard { width: min(100% - 24px, 1250px); }
  .topbar { align-items: flex-start; padding: 15px 0; flex-wrap: wrap; }
  .topbar-actions { justify-content: flex-end; flex-wrap: wrap; }
  .plant-picker { width: 100%; order: 3; }
  .plant-picker select { max-width: none; width: 100%; }
  .hero { align-items: flex-start; flex-direction: column; gap: 14px; padding: 20px 18px; min-height: auto; }
  .hero h1 { margin-bottom: 6px; font-size: 24px; }
  .status-line { font-size: 11px; }
  .hero-stat { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 8px; min-width: 100%; padding: 10px 14px; border-radius: 12px; }
  .hero-stat strong { margin: 0 0 0 auto; font-size: 20px; }
  .flow-card { margin-top: 28px; }
  .stats-section { margin: 28px 0 0; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-card { min-height: 118px; padding: 16px; }
  .stat-card strong { margin: 10px 0 5px; font-size: 22px; }
  .stat-card .stat-label { font-size: 11px; }
  .stat-card small { font-size: 10px; }
  .tech-details { margin-top: 28px; }
  .details-grid { grid-template-columns: 1fr; }
  .details-grid .panel:last-child { grid-column: auto; }
  .quiet-button, .avatar { min-height: 44px; }
  .avatar { width: 44px; height: 44px; }
  .quiet-button { padding: 12px 14px; }
  .auth-shell { place-content: start center; }
  .auth-card { border-radius: 20px; }
}