/* Three user-selectable appearances. Green is the original/default theme.
   Paper comes from paper.css. Dark is inspired by the supplied BMS Go View UI. */
html[data-ui-theme="green"] { color-scheme: light; }
html[data-ui-theme="paper"] { color-scheme: light; }
html[data-ui-theme="dark"] {
  color-scheme: dark;
  --paper: #14231d;
  --surface: #1a2c24;
  --surface2: #21362c;
  --line: #2d473c;
  --line2: #3b594c;
  --ink: #f2f6f3;
  --brand: #b7eb40;
  --brand2: #64daa7;
  --accent: #b7eb40;
  --accent-ink: #122018;
  --mint: #1c3428;
  --muted: #9aaba3;
  --ok: #43cc78;
  --warn: #e4a92c;
  --bad: #ff6253;
  --info: #55afe0;
  --radius: 22px;
  --shadow: 0 1px 0 #ffffff08 inset, 0 12px 30px #00000018;
}

/* Structural rules used by the shared home-page markup. They stay available
   when paper.css is disabled for the original green appearance. */
.paper-icon { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.home-fw-tools { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.home-fw-search { display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--line2); border-radius: 8px; background: var(--paper); }
.home-fw-search input { min-width: 0; width: 165px; padding: 9px 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 12px; }
.home-fw-search svg { width: 16px; height: 16px; }
.home-fw-more { display: inline-flex; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); width: 100%; font-size: 13px; font-weight: 700; }
.home-fw-more[hidden] { display: none; }
.home-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.home-bottom .phone-flash-home { display: block; margin: 0; padding: 26px; }
.paper-support { position: relative; padding: 26px; }
.paper-support h2 { margin: 0 0 8px; }
.paper-support p { margin: 0 0 22px; color: var(--muted); }
.paper-support-links { display: flex; flex-wrap: wrap; gap: 14px 22px; }
.paper-support-links a { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; }
.paper-support-links svg { width: 19px; height: 19px; }
.paper-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; text-align: left; }
.paper-footer-row nav { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.foot .paper-footer-row a { margin: 0; }

html[data-ui-theme="green"] .home-fw-heading { border-bottom: 1px solid var(--line2); background: var(--surface); font-size: 11px; font-weight: 700; }
html[data-ui-theme="green"] .paper-support { color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
html[data-ui-theme="green"] .paper-support-links a { color: var(--brand2); }
html[data-ui-theme="green"] .sidebar .brand { justify-content: flex-start; gap: 12px; padding: 0 22px; }
html[data-ui-theme="green"] .sidebar .brand > .ic { display: block; width: 42px; height: 42px; flex: 0 0 42px; padding: 8px; color: #fff; background: linear-gradient(145deg,#08713b,#17a157); border-radius: 12px; box-shadow: 0 7px 16px #08713b2e; }
html[data-ui-theme="green"] .sidebar .brand > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The selector is shared by all three appearances. */
/* Fill the space beside the sidebar, including when the sidebar is collapsed.
   Auto width accounts for the sidebar margin and the existing page padding. */
@media (min-width: 961px) {
  html body .wrap { max-width: none; width: auto; }
}

.theme-picker { position: relative; }
.theme-picker > summary { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 7px 11px; border: 1px solid var(--line2); border-radius: 10px; background: var(--paper); color: var(--ink); cursor: pointer; list-style: none; font-size: 12px; font-weight: 700; user-select: none; }
.theme-picker > summary::-webkit-details-marker { display: none; }
.theme-picker > summary::after { content: "⌄"; margin-left: 1px; color: var(--muted); font-size: 13px; transition: transform .16s ease; }
.theme-picker[open] > summary::after { transform: rotate(180deg); }
.theme-picker-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-menu { position: absolute; z-index: 100; top: calc(100% + 9px); right: 0; width: 278px; padding: 9px; border: 1px solid var(--line); border-radius: 15px; background: var(--paper); box-shadow: 0 18px 48px #0003; }
.theme-menu-title { display: block; padding: 5px 7px 9px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .09em; }
.theme-choice { display: grid; grid-template-columns: 42px minmax(0,1fr) 18px; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.theme-choice:hover { background: var(--surface); }
.theme-choice[aria-pressed="true"] { border-color: var(--line2); background: var(--surface); }
.theme-choice strong,.theme-choice small { display: block; }
.theme-choice strong { font-size: 13px; line-height: 1.35; }
.theme-choice small { margin-top: 2px; color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.theme-check { opacity: 0; color: var(--brand2); font-size: 16px; font-weight: 900; }
.theme-choice[aria-pressed="true"] .theme-check { opacity: 1; }
.theme-swatch { position: relative; display: block; width: 42px; height: 32px; overflow: hidden; border: 1px solid #0002; border-radius: 8px; }
.theme-swatch::before,.theme-swatch::after { content: ""; position: absolute; }
.theme-swatch.green { background: #fff; }
.theme-swatch.green::before { inset: 0 26px 0 0; background: #1b4332; }
.theme-swatch.green::after { left: 20px; right: 4px; top: 7px; height: 6px; border-radius: 4px; background: #b7e34b; box-shadow: 0 10px 0 #e8ede4; }
.theme-swatch.paper { background: #fffefa; }
.theme-swatch.paper::before { inset: 0; opacity: .55; background: repeating-linear-gradient(transparent 0 7px,#bfd0da 7px 8px); }
.theme-swatch.paper::after { left: 5px; right: 5px; top: 6px; height: 7px; background: #252522; box-shadow: 0 12px 0 #dedcd4; }
.theme-swatch.dark { background: #081610; }
.theme-swatch.dark::before { left: 4px; right: 4px; top: 5px; height: 21px; border: 1px solid #355144; border-radius: 7px; background: #14251d; }
.theme-swatch.dark::after { left: 9px; top: 10px; width: 12px; height: 12px; border-radius: 50%; border: 3px solid #b7eb40; }

html[data-ui-theme="dark"] body { background: #08150f; color: var(--ink); }
html[data-ui-theme="dark"] body::before { display: none; }
html[data-ui-theme="dark"] a { color: var(--brand2); }
html[data-ui-theme="dark"] h1,html[data-ui-theme="dark"] h2,html[data-ui-theme="dark"] h3,html[data-ui-theme="dark"] h4 { color: var(--ink); }
html[data-ui-theme="dark"] .sidebar { background: #0c1b15; color: var(--ink); border-color: #1c3329; }
html[data-ui-theme="dark"] .sidebar .brand { color: var(--ink); border-color: var(--line); }
html[data-ui-theme="dark"] .sidebar .brand > .ic { color: #122018; padding: 6px; border-radius: 10px; background: var(--accent); }
html[data-ui-theme="dark"] .nav-link { color: #a8b7b0; }
html[data-ui-theme="dark"] .nav-link:hover { color: var(--ink); background: #172a22; }
html[data-ui-theme="dark"] .nav-link[aria-current="page"] { color: #142018; background: var(--accent); box-shadow: none; }
html[data-ui-theme="dark"] .nav-fw-picker,html[data-ui-theme="dark"] .nav-fw-picker:hover { color: var(--ink); background: #182b22; border-color: var(--line); }
html[data-ui-theme="dark"] .sidebar-foot { color: var(--ink); background: #14261e; border-color: var(--line); transform: none; }
html[data-ui-theme="dark"] .topbar { background: #0d1d17f2; border-color: #1c3329; box-shadow: none; backdrop-filter: blur(14px); }
html[data-ui-theme="dark"] .burger,html[data-ui-theme="dark"] .live-button,html[data-ui-theme="dark"] .theme-picker > summary { color: var(--ink); background: #152820; border-color: var(--line); }
html[data-ui-theme="dark"] .livedot,html[data-ui-theme="dark"] .online-dot { background: #49d77f; box-shadow: 0 0 0 4px #49d77f20; }
html[data-ui-theme="dark"] .btn,html[data-ui-theme="dark"] .energy-btn { color: var(--ink); background: #172a22; border-color: var(--line2); }
html[data-ui-theme="dark"] .btn:hover,html[data-ui-theme="dark"] .energy-btn:hover { color: var(--ink); background: #20372d; }
html[data-ui-theme="dark"] .btn.primary,html[data-ui-theme="dark"] .energy-btn.primary,html[data-ui-theme="dark"] .btn.lime,html[data-ui-theme="dark"] .energy-btn.lime { color: #142018; background: var(--accent); border-color: var(--accent); }
html[data-ui-theme="dark"] :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea) { color: var(--ink); background: #0e1e18; border-color: var(--line2); }
html[data-ui-theme="dark"] :where(input,textarea)::placeholder { color: #71837a; }
html[data-ui-theme="dark"] :where(.card,.board,.dev,.tablewrap,.dashboard-panel,.energy-stat,.home-health-card,.home-firmware,.phone-flash-home,.paper-support,.blog-card,.group-panel,.bms-family-group,.inv-card,.inv-compact,.group-view,.group-inverter,.full-flow,.privacy-summary,.privacy-card,.privacy-browser,.leader-card,.bms-online-card,.flow-node,.mini-system,.full-flow-node,.inv-flow-point,.local-flow,.fw-detail-hero,.fw-picker-card,.summary-card,.health-card,.soc-card,.personal-card,.resistance-bin,.release-card) { color: var(--ink); background: var(--paper); border-color: var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
html[data-ui-theme="dark"] :where(.card.soft,.seo-copy,.privacy-list li,.ranking-method,.blog-note,.blog-subscribe,.compare-form,.fit-note.good,.phone-success) { color: var(--ink); background: var(--surface); border-color: var(--line); }
html[data-ui-theme="dark"] .energy-hero,html[data-ui-theme="dark"] .blog-hero,html[data-ui-theme="dark"] .privacy-hero,html[data-ui-theme="dark"] .rankings-hero,html[data-ui-theme="dark"] .wiring-hero,html[data-ui-theme="dark"] .phone-flash-hero { color: var(--ink); background: linear-gradient(145deg,#10261d,#0d1d17); border-color: var(--line); box-shadow: var(--shadow); }
html[data-ui-theme="dark"] .home-hero { background-image: radial-gradient(circle at 86% 12%,#b7eb4012,transparent 34%),linear-gradient(145deg,#10261d,#0d1d17); }
html[data-ui-theme="dark"] .home-hero::before,html[data-ui-theme="dark"] .home-hero::after,html[data-ui-theme="dark"] .home-health-card::before,html[data-ui-theme="dark"] .paper-support::before { display: none; }
html[data-ui-theme="dark"] .energy-hero p,html[data-ui-theme="dark"] .blog-hero p,html[data-ui-theme="dark"] .privacy-hero p,html[data-ui-theme="dark"] .phone-flash-home p { color: var(--muted); }
html[data-ui-theme="dark"] .energy-kicker,html[data-ui-theme="dark"] .eyebrow,html[data-ui-theme="dark"] .rankings-kicker,html[data-ui-theme="dark"] .metric-eyebrow { color: var(--accent); background: transparent; border: 0; }
html[data-ui-theme="dark"] .energy-hero.home-hero .hero-product { filter: invert(88%) sepia(18%) saturate(247%) hue-rotate(95deg) brightness(106%); opacity: .74; }
html[data-ui-theme="dark"] .line-cta { color: var(--ink); background: #12271e; border-color: var(--line2); box-shadow: none; }
html[data-ui-theme="dark"] .line-cta:hover { background: #183126; }
html[data-ui-theme="dark"] .line-btn { color: #122018; background: var(--accent); }
html[data-ui-theme="dark"] .energy-stat span,html[data-ui-theme="dark"] .energy-stat .stat-action { color: var(--muted); }
html[data-ui-theme="dark"] .energy-stat .stat-icon,html[data-ui-theme="dark"] .quick-link .qicon,html[data-ui-theme="dark"] .health-symbol { color: var(--accent); }
html[data-ui-theme="dark"] .energy-stat b,html[data-ui-theme="dark"] .home-health-metric strong { color: var(--ink); }
html[data-ui-theme="dark"] .energy-stat:hover,html[data-ui-theme="dark"] .bms-online-card:hover,html[data-ui-theme="dark"] .inv-compact:hover,html[data-ui-theme="dark"] .home-health-metric:hover,html[data-ui-theme="dark"] .blog-card:hover { border-color: #527064; box-shadow: 0 10px 26px #0003; }
html[data-ui-theme="dark"] .home-health-metric,html[data-ui-theme="dark"] .quick-link { color: var(--ink); background: #172a22; border-color: var(--line); border-radius: 15px; }
html[data-ui-theme="dark"] .quick-link:hover { background: #20372d; }
html[data-ui-theme="dark"] .dashboard-grid .privacy-card { background: #14231d; }
html[data-ui-theme="dark"] .home-fw-row:hover { background: #1a3027; }
html[data-ui-theme="dark"] .home-fw-heading,html[data-ui-theme="dark"] th { color: var(--muted); background: var(--surface); }
html[data-ui-theme="dark"] .home-fw-state.ready { color: #122018; background: var(--accent); }
html[data-ui-theme="dark"] .home-fw-search { background: #0e1e18; border-color: var(--line2); }
html[data-ui-theme="dark"] .home-fw-search input { color: var(--ink); background: transparent; }
html[data-ui-theme="dark"] .home-bottom .phone-flash-home .energy-btn,html[data-ui-theme="dark"] .home-health-head .energy-btn { color: var(--ink); background: #172a22; border-color: var(--line2); }
html[data-ui-theme="dark"] .blog-tag { color: var(--ink)!important; background: var(--surface2)!important; border-color: var(--line); }
html[data-ui-theme="dark"] .blog-article-banner,html[data-ui-theme="dark"] .download-card { background: #10271d; }
html[data-ui-theme="dark"] .blog-content,html[data-ui-theme="dark"] .blog-note,html[data-ui-theme="dark"] .blog-end,html[data-ui-theme="dark"] .blog-share a,html[data-ui-theme="dark"] .blog-article-head>p,html[data-ui-theme="dark"] .privacy-section p,html[data-ui-theme="dark"] .privacy-list li { color: #bdc9c3; }
html[data-ui-theme="dark"] .monitor-card-head .card-icon,html[data-ui-theme="dark"] .compact-row .row-icon,html[data-ui-theme="dark"] .privacy-summary-icon,html[data-ui-theme="dark"] .privacy-card>span,html[data-ui-theme="dark"] .metric-icon { color: var(--accent); background: var(--surface2); }
html[data-ui-theme="dark"] .bms-fw-toggle,html[data-ui-theme="dark"] .bms-fw-toggle:hover,html[data-ui-theme="dark"] .bms-fw-group.is-expanded .bms-fw-toggle { color: var(--ink); background: var(--surface); border-color: var(--line2); }
html[data-ui-theme="dark"] .bms-family-head>b,html[data-ui-theme="dark"] .privacy-meta span,html[data-ui-theme="dark"] .privacy-toc a,html[data-ui-theme="dark"] .sample-badge { color: var(--ink); background: var(--surface); border-color: var(--line); }
html[data-ui-theme="dark"] .tabbtn { color: var(--muted); background: var(--paper); border-color: var(--line); }
html[data-ui-theme="dark"] .tabbtn.sel,html[data-ui-theme="dark"] .metric-group-tabs button.active { color: #122018; background: var(--accent); border-color: var(--accent); }
html[data-ui-theme="dark"] .metric-group-tabs { background: var(--paper); border-color: var(--line); }
html[data-ui-theme="dark"] .rankings-live { color: var(--muted); }
html[data-ui-theme="dark"] .compare-input-row input { color: var(--ink); background: #0d1d17; border-color: var(--line2); }
html[data-ui-theme="dark"] .inverter-page { --inv-blue: var(--ink); --inv-cyan: #43d6a1; --inv-cyan-dark: #27aa78; --inv-pale: var(--surface); --inv-line: var(--line); --inv-muted: var(--muted); background: transparent; }
html[data-ui-theme="dark"] .inverter-page .full-tile,html[data-ui-theme="dark"] .inverter-page .full-tile.featured { color: var(--ink); background: var(--surface); border-color: var(--line); }
html[data-ui-theme="dark"] .inverter-page .full-tile.featured>b { color: var(--accent); }
html[data-ui-theme="dark"] .local-flow-node .flow-icon { color: var(--accent); background: var(--surface2); border-color: var(--line); }
html[data-ui-theme="dark"] .history-canvas { background: #0d1d17; }
html[data-ui-theme="dark"] .wiring-map,html[data-ui-theme="dark"] .lan-map,html[data-ui-theme="dark"] .bus-figure { background: var(--paper); border-color: var(--line); }
html[data-ui-theme="dark"] .fw-picker-shade { background: #020805cc; }
html[data-ui-theme="dark"] .fw-picker-dialog { color: var(--ink); background: #102019; border-color: var(--line); }
html[data-ui-theme="dark"] .fw-picker-close,html[data-ui-theme="dark"] .fw-board-choice>span,html[data-ui-theme="dark"] .fw-result-card,html[data-ui-theme="dark"] .fw-picker-loading,html[data-ui-theme="dark"] .fw-picker-empty { color: var(--ink); background: var(--surface); border-color: var(--line); }
html[data-ui-theme="dark"] .fw-board-choice input:checked+span { color: var(--ink); background: #20392d; border-color: var(--accent); }
html[data-ui-theme="dark"] .fw-board-choice input:checked+span i { background: var(--accent); border-color: var(--accent); }
html[data-ui-theme="dark"] .log { color: #d7eee1; background: #06100c; }
html[data-ui-theme="dark"] .social-float-panel,html[data-ui-theme="dark"] .theme-menu { color: var(--ink); background: #102019; border-color: var(--line); }
html[data-ui-theme="dark"] .social-float-toggle,html[data-ui-theme="dark"] .social-float-toggle:hover { color: #122018; background: var(--accent); border-color: var(--accent); }
html[data-ui-theme="dark"] .social-float-link:hover { background: var(--surface); }
html[data-ui-theme="dark"] .social-float-link.line .social-float-icon,html[data-ui-theme="dark"] .social-float-link.facebook .social-float-icon,html[data-ui-theme="dark"] .social-float-link.facebook-group .social-float-icon,html[data-ui-theme="dark"] .social-float-link.tiktok .social-float-icon { color: #122018; background: var(--accent); }
html[data-ui-theme="dark"] .foot { color: var(--muted); border-color: var(--line); }

@media(max-width:640px) {
  .home-fw-tools,.home-fw-search { width: 100%; }
  .home-fw-search input { width: 100%; min-height: 40px; font-size: 16px; }
  .home-fw-heading { display: none; }
  .home-bottom { grid-template-columns: 1fr; }
  .paper-footer-row { align-items: flex-start; flex-direction: column; }
  .theme-picker > summary { width: 38px; height: 38px; justify-content: center; padding: 0; border-radius: 50%; }
  .theme-picker > summary span { display: none; }
  .theme-picker > summary::after { display: none; }
  /* Anchor to the positioned topbar. Its backdrop-filter contains fixed
     descendants, so a viewport-style bottom offset places this menu offscreen. */
  .theme-picker { position: static; }
  html .topbar:has(.theme-picker[open]) { z-index: 46; }
  .theme-menu { position: absolute; top: calc(100% + 8px); right: 12px; bottom: auto; left: 12px; width: auto; max-height: calc(100vh - 160px); max-height: calc(100dvh - 160px); overflow-y: auto; overscroll-behavior: contain; border-radius: 18px; }
  html[data-ui-theme="dark"] .wrap { padding-bottom: 88px; }
  html[data-ui-theme="dark"] .topbar { position: fixed; z-index: 43; top: auto; right: 0; bottom: 0; left: 0; height: 66px; padding: 0 16px; border-top: 1px solid var(--line); border-bottom: 0; }
  html[data-ui-theme="dark"] .burger { color: var(--accent); border-color: transparent; background: #1a3027; }
  html[data-ui-theme="dark"] .topbar-title { color: var(--ink); }
  html[data-ui-theme="dark"] .theme-picker > summary { color: var(--accent); background: #1a3027; }
  html[data-ui-theme="dark"] .theme-menu { top: auto; bottom: calc(100% + 10px); }
  html[data-ui-theme="dark"] .social-float { bottom: 78px; }
}

@media(prefers-reduced-motion:reduce) {
  .theme-picker > summary::after { transition: none; }
}