@font-face {
  font-family: PanelMontserrat;
  src: url('assets/panel-montserrat-20261015.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
.panel-replica {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1024 / 600;
  overflow: hidden;
  background: #000;
  border-radius: 6px;
  isolation: isolate;
}
.panel-artboard {
  position: absolute;
  width: 1024px;
  height: 600px;
  left: 0;
  top: 0;
  transform-origin: top left;
  font-family: PanelMontserrat, sans-serif;
  font-weight: 500;
  color: #f2f5f7;
  letter-spacing: 0;
}
.panel-artboard * { box-sizing: border-box; letter-spacing: 0; }
.panel-artboard > img { display: block; position: absolute; inset: 0; width: 1024px; height: 600px; }
.panel-reading { position: absolute; margin: 0; white-space: nowrap; line-height: 1.2; font-size: 24px; font-variant-numeric: tabular-nums; }
.panel-reading.center { text-align: center; }
.panel-clock { left: 28px; top: 24px; font-size: 48px; }
.panel-date { left: 34px; top: 84px; font-size: 28px; }
.panel-solar { left: 484px; top: 32px; font-size: 48px; color: #ffd84a; }
.panel-logo { left: 748px; top: 18px; font-size: 48px; white-space: pre; }
.panel-logo span { color: #00c9f4; }
.panel-outside { left: 60px; top: 205px; font-size: 40px; line-height: 1; }
.panel-outside-humidity { left: 50px; top: 247px; width: 150px; font-size: 20px; }
.panel-pressure { left: 50px; top: 271px; width: 150px; font-size: 20px; }
.panel-inside { left: 385px; top: 400px; font-size: 40px; line-height: 1; }
.panel-inside-humidity { left: 375px; top: 442px; width: 150px; font-size: 20px; }
.panel-starter-voltage { left: 205px; top: 442px; }
.panel-percent { left: 837px; top: 311px; width: 90px; }
.panel-voltage { left: 845px; top: 342px; }
.panel-current { left: 845px; top: 372px; }
.panel-watts { left: 845px; top: 402px; }
.panel-charge-time { left: 845px; top: 432px; width: 165px; font-size: 20px; }
.panel-battery { position: absolute; width: 32px; height: 71px; left: 866px; top: 236px; border: 3px solid #fff; border-radius: 3px; }
.panel-battery::before { content: ''; box-sizing: border-box; position: absolute; width: 10px; height: 8px; border: 3px solid #fff; border-bottom: 0; border-radius: 2px 2px 0 0; top: -11px; left: 50%; transform: translateX(-50%); }
.panel-battery i { position: absolute; left: 3px; top: calc(5px + var(--row) * 12px); width: 20px; height: 7px; border-radius: 2px; background: #071014; opacity: .2; }
.panel-battery i.lit { background: #5ad67d; opacity: 1; }
.panel-battery i.charging { background: #9dff5a; animation: panel-charge 1.2s ease-in-out infinite; }
.panel-battery.starter { left: 235px; top: 366px; width: 28px; height: 66px; }
.panel-battery.starter i { width: 16px; height: 6px; top: calc(5px + var(--row) * 11px); }
.panel-battery i.discharging { animation: panel-discharge 1.2s ease-in-out infinite; }
@keyframes panel-charge { 0%,100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes panel-discharge { 0%,100% { background: #5ad67d; } 50% { background: #f05d5e; } }
@media (prefers-reduced-motion: reduce) { .panel-battery i { animation: none !important; } }
/* Scale the fixed physical display as one unit; its labels never reflow independently. */
.panel-only { margin: 0; min-height: 100vh; background: #000; display: grid; place-items: center; }
.panel-only .panel-replica { max-width: 1280px; border-radius: 0; }
.framed-preview { min-width: 0; max-width: 1120px; justify-self: center; width: 100%; }
.framed-preview .panel-screen { min-width: 0; padding: 14px; border: 10px solid #050709; border-radius: 26px; background: #090e12; box-shadow: 0 24px 60px #0008, inset 0 0 0 1px #34434c; }
.paired-displays { display: grid; grid-template-columns: 272px minmax(0, 1fr); align-items: center; gap: 28px; }
.phone-frame { position: relative; min-width: 0; padding: 0 8px; background: #080b10; border: 3px solid #37434b; border-radius: 34px; box-shadow: 0 20px 48px #0009, inset 0 0 0 2px #050709; }
.phone-frame::before { content: ''; position: absolute; width: 3px; height: 42px; top: 91px; left: -6px; background: #56616a; border-radius: 2px 0 0 2px; }
.phone-frame::after { content: ''; position: absolute; width: 3px; height: 34px; top: 116px; right: -6px; background: #56616a; border-radius: 0 2px 2px 0; }
.phone-top { height: 28px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.phone-top span { width: 40px; height: 4px; border-radius: 4px; background: #29343b; }
.phone-top i { width: 7px; height: 7px; border-radius: 50%; background: #12222b; box-shadow: inset 0 0 0 2px #29343b; }
.phone-bottom { height: 25px; display: grid; place-items: center; }
.phone-bottom span { width: 76px; height: 3px; background: #a3aeb7; border-radius: 4px; }
@font-face { font-family: AppRoboto; src: url('assets/app-roboto-regular-20261015.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: AppMaterialIcons; src: url('assets/app-materialicons-regular-20261015.otf') format('opentype'); font-display: block; }
/* The app cockpit uses a 390px artboard with its Flutter card dimensions and colors. */
.app-readings { min-width: 0; position: relative; overflow: hidden; background: #080b10; border-radius: 8px; }
.app-artboard { position: absolute; left: 0; top: 0; width: 390px; padding: 16px; transform-origin: top left; font-family: AppRoboto, sans-serif; color: #e6e1e9; font-size: 14px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.app-artboard * { box-sizing: border-box; letter-spacing: 0; }
.app-card { padding: 16px; border-radius: 8px; border: 1px solid #ffffff14; background: #111821; }
.app-artboard .green { color: #60f0b4; }
.app-artboard .cyan { color: #00d4ff; }
.app-artboard .amber { color: #ffc857; }
.app-icon { font-family: AppMaterialIcons; font-weight: normal; font-style: normal; font-size: 24px; width: 24px; height: 24px; line-height: 1; display: inline-block; flex-shrink: 0; }
.app-card h2 { font-size: 22px; font-weight: 900; line-height: 28px; margin: 0; display: flex; align-items: center; gap: 10px; }
.app-energy h2 > span { min-width: 0; font-size: 22px; }
.app-energy-body { display: grid; grid-template-columns: 8fr 11fr; gap: 16px; align-items: center; margin-top: 18px; }
.app-battery-column { display: flex; flex-direction: column; align-items: center; }
.app-battery { position: relative; width: 54px; height: 110px; margin-top: 6px; padding: 6px; border: 2px solid #ffffff8c; border-radius: 8px; background: #0003; display: grid; grid-template-rows: repeat(4, 1fr); gap: 6px; }
.app-battery::before { content: ''; position: absolute; width: 28px; height: 8px; background: #ffffff2e; left: 50%; transform: translateX(-50%); top: -8px; border-radius: 4px 4px 0 0; }
.app-battery i { display: block; border-radius: 4px; background: #ffffff1a; }
.app-battery i.filled { background: #60f0b4e6; }
.app-battery i.pulse { animation: app-charge 1.3s ease-in-out infinite; }
.app-soc { font-size: 22px; font-weight: 900; line-height: 1; margin-top: 8px; }
.app-flow { font-size: 12px; font-weight: 800; color: #60f0b4; line-height: 15px; }
.app-values { margin: 0; display: grid; gap: 10px; }
.app-values > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 32px; padding: 0 10px; border: 1px solid; border-radius: 7px; background: #ffffff0a; }
.app-values > .amber { border-color: #ffc85733; }
.app-values > .cyan { border-color: #00d4ff33; }
.app-values > .green { border-color: #60f0b433; }
.app-values dt { font-size: 12px; font-weight: 700; color: #ffffff8c; min-width: 0; }
.app-values dd { margin: 0; font-size: 14px; font-weight: 900; white-space: nowrap; }
.app-tanks { margin-top: 14px; padding: 14px; }
.app-tanks h2 { font-size: 16px; line-height: 24px; justify-content: space-between; }
.app-tanks-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; height: 188px; align-items: center; margin-top: 14px; }
.app-tank { display: flex; align-items: center; gap: 10px; min-width: 0; }
.app-tank-vessel { width: 76px; height: 158px; border: 1px solid #ffffff1f; border-radius: 8px; background: #0003; position: relative; overflow: hidden; flex-shrink: 0; }
.app-tank-vessel > span { position: absolute; bottom: 0; left: 0; right: 0; background: #00d4ffb8; }
.app-tank.grey .app-tank-vessel > span { background: #ffc857b8; }
.app-tank-vessel .app-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #ffffffb3; }
.app-tank strong { display: block; font-size: 24px; font-weight: 900; }
.app-tank > div:last-child > span { display: block; margin-top: 4px; color: #ffffff9e; }
.app-climate { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.app-climate .app-card { height: 168px; padding: 12px; }
.app-climate .app-card > .app-icon { font-size: 22px; width: 22px; height: 22px; }
.app-climate h2 { font-size: 13px; line-height: 16px; font-weight: 400; color: #ffffff8c; margin: 10px 0 6px; }
.app-climate-row { display: flex; justify-content: space-between; align-items: end; gap: 8px; }
.app-climate-row > strong { font-size: 22px; font-weight: 900; white-space: nowrap; }
.app-climate-row > span { text-align: right; }
.app-climate small { display: block; font-size: 10px; color: #ffffff80; }
.app-climate b { font-size: 15px; }
.app-climate p { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 10px 0 0; }
.app-climate p .app-icon { width: 16px; height: 16px; font-size: 16px; }
@keyframes app-charge { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
@media (max-width: 1199px) and (min-width: 981px) {
  .paired-displays { grid-template-columns: 224px minmax(0, 1fr); gap: 22px; }
  .framed-preview .panel-screen { padding: 12px; }
}
@media (max-width: 700px) {
  .framed-preview .panel-screen { padding: 10px; border-width: 7px; border-radius: 22px; }
  .paired-displays { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .paired-displays > .panel-screen { grid-row: 1; }
  .phone-frame { width: min(288px, calc(100% - 12px)); justify-self: center; }
  .app-readings { width: 100%; max-width: 390px; justify-self: center; }
}
@media (prefers-reduced-motion: reduce) { .app-battery i { animation: none; } }