/* BMS GO Studio — shared public UI, light and dark. Load after page CSS.
   Orange is for actions; green/amber/red retain their status meaning. */
html[data-ui-theme] {
  color-scheme: light;
  --canvas:#f5f3ec; --paper:#fffefa; --surface:#eeede6; --surface2:#e6e4db;
  --line:#dcdad1; --line2:#bdbbb1; --ink:#242521; --muted:#65675f;
  --brand:#242521; --brand2:#a94020; --accent:#b74724; --accent-ink:#fffefa;
  --mint:#e6eee6; --ok:#287343; --warn:#8a5e12; --bad:#b03932; --info:#356d8c;
  --action-soft:#f4e6db; --radius:6px; --shadow:none;
  --sans:"Noto Sans Thai","Sarabun","Segoe UI",sans-serif;
}
html[data-ui-theme="dark"] {
  color-scheme:dark;
  --canvas:#20211f; --paper:#292b27; --surface:#30322d; --surface2:#3b3d36;
  --line:#42443d; --line2:#62655b; --ink:#f2f1e9; --muted:#b5b7ab;
  --brand:#f2f1e9; --brand2:#eea27c; --accent:#e59573; --accent-ink:#27251f;
  --mint:#2b3b30; --ok:#82c797; --warn:#e3bc6c; --bad:#f09186; --info:#8cbcd3;
  --action-soft:#3b3029;
}
html[data-ui-theme] body {background:var(--canvas);color:var(--ink);font-family:var(--sans);line-height:1.7}
html[data-ui-theme] body::before {display:none}
html[data-ui-theme] :is(h1,h2,h3,h4) {color:var(--ink);font-weight:600;letter-spacing:-.025em}
html[data-ui-theme] h1 {line-height:1.35}
html[data-ui-theme] a {color:var(--brand2)}
html[data-ui-theme] :is(button,input,select,textarea) {font-family:var(--sans)}
html[data-ui-theme] :is(input,select,textarea) {color:var(--ink);background-color:var(--paper);border-color:var(--line2);accent-color:var(--accent)}
html[data-ui-theme] :is(a,button,input,select,textarea,summary):focus-visible {outline:2px solid var(--brand2);outline-offset:3px}
html[data-ui-theme] :is(.sidebar,.topbar,.theme-menu,.social-float-panel,.fw-picker-dialog) {background:var(--paper);color:var(--ink);border-color:var(--line);box-shadow:none;backdrop-filter:none}
html[data-ui-theme] .sidebar .brand {color:var(--ink);font-size:23px;letter-spacing:-.6px}
html[data-ui-theme] .sidebar .brand>.ic {display:none}
html[data-ui-theme] .sidebar .brand::before {content:"";width:15px;height:15px;flex:0 0 15px;background:var(--accent);border-radius:2px}
html[data-ui-theme] .sidebar-foot {transform:none;box-shadow:none;background:transparent;color:var(--muted);border-color:var(--line)}
html[data-ui-theme] .nav-link {color:var(--muted);border-radius:4px;font-weight:500}
html[data-ui-theme] .nav-link:hover {background:var(--surface);color:var(--ink)}
html[data-ui-theme] .nav-link[aria-current="page"] {background:var(--action-soft);color:var(--brand2);box-shadow:inset 3px 0 var(--accent);font-weight:600}
html[data-ui-theme] .nav-fw-picker {background:transparent;border-color:var(--line);color:var(--ink)}
html[data-ui-theme] :is(.btn,.energy-btn,.burger,.live-button,.theme-picker>summary,.fw-picker-close) {background:var(--paper);color:var(--ink);border:1px solid var(--line2);border-radius:6px;box-shadow:none;font-weight:600}
html[data-ui-theme] :is(.btn,.energy-btn) {min-height:40px}
html[data-ui-theme] :is(.btn,.energy-btn):hover {background:var(--surface);border-color:var(--line2);color:var(--ink);transform:none;box-shadow:none}
html[data-ui-theme] body :is(.btn.primary,.energy-btn.primary,.btn.lime,.energy-btn.lime) {background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:none}
html[data-ui-theme] body :is(.btn.primary,.energy-btn.primary,.btn.lime,.energy-btn.lime):hover {filter:brightness(.93)}
html[data-ui-theme] :is(.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,.monitor-card,.bms-online-card,.home-health-metric,.metric-card,.rankings-card,.resistance-bin,.release-card,.fw-result-card,.fw-board-card,.fw-device-stage,.home-fw-list,.getting-started,.download-card,.blog-article-banner,.fw-picker-loading,.fw-picker-empty) {
  color:var(--ink);background:var(--paper);border-color:var(--line);border-radius:6px;box-shadow:none;
}
html[data-ui-theme] :is(.energy-hero,.blog-hero,.privacy-hero,.rankings-hero,.wiring-hero,.phone-flash-hero) {background:var(--paper);color:var(--ink);border-color:var(--line);border-radius:6px;box-shadow:none}
html[data-ui-theme] :is(.energy-hero,.blog-hero,.privacy-hero,.home-health-card,.paper-support)::before,
html[data-ui-theme] :is(.energy-hero,.blog-hero,.privacy-hero)::after {display:none}
html[data-ui-theme] :is(.energy-kicker,.eyebrow,.rankings-kicker,.metric-eyebrow) {color:var(--muted);background:transparent;letter-spacing:.06em}
html[data-ui-theme] :is(.energy-stat span,.energy-stat .stat-action,.blog-content,.blog-note,.blog-end,.blog-share a,.blog-article-head>p,.privacy-section p,.privacy-list li) {color:var(--muted)}
html[data-ui-theme] :is(.card.soft,.seo-copy,.privacy-list li,.ranking-method,.blog-note,.blog-subscribe,.compare-form,.fit-note.good,.phone-success,.quick-link,.bms-fw-toggle,.bms-fw-group.is-expanded .bms-fw-toggle,.home-fw-heading,th,.home-fw-search,.fw-board-choice>span) {background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:none}
html[data-ui-theme] :is(.energy-stat,.bms-online-card,.inv-compact,.home-health-metric,.blog-card,.fw-board-card):hover {border-color:var(--line2);box-shadow:none;transform:none}
html[data-ui-theme] :is(.energy-stat .stat-icon,.quick-link .qicon,.health-symbol,.monitor-card-head .card-icon,.compact-row .row-icon,.privacy-summary-icon,.privacy-card>span,.metric-icon) {background:transparent;color:var(--ink);border-radius:0}
html[data-ui-theme] :is(.energy-stat b,.home-health-metric strong,.home-fw-name b,.home-fw-version) {color:var(--ink);font-variant-numeric:tabular-nums}
html[data-ui-theme] :is(.line-cta,.line-cta:hover) {background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:none;transform:none}
html[data-ui-theme] .line-btn {background:transparent;color:var(--brand2)}
html[data-ui-theme] :is(.line-ic,.line-body small) {color:var(--muted)}
html[data-ui-theme] :is(.quick-link:hover,.home-fw-row:hover,.social-float-link:hover) {background:var(--surface)}
html[data-ui-theme] :is(.tabbtn,.metric-group-tabs,.metric-group-tabs button,.fw-board-tabs button) {background:transparent;color:var(--muted);border-color:var(--line);box-shadow:none;border-radius:4px}
html[data-ui-theme] body :is(.tabbtn.sel,.metric-group-tabs button.active,.fw-board-tabs button.is-active) {background:var(--action-soft);color:var(--brand2);border-color:var(--accent);box-shadow:none}
html[data-ui-theme] .fw-board-tabs button {border:0;border-bottom:2px solid transparent;border-radius:0;min-height:42px}
html[data-ui-theme] body .fw-board-tabs button.is-active {background:transparent;border-bottom-color:var(--accent)}
html[data-ui-theme] .fw-board-photo {background:#eeede6}
html[data-ui-theme] .fw-board-photo img {mix-blend-mode:multiply}
html[data-ui-theme] .fw-board-card.is-selected {border-color:var(--brand2);box-shadow:inset 0 0 0 1px var(--brand2)}
html[data-ui-theme] .fw-board-check {background:var(--surface);box-shadow:none}
html[data-ui-theme] .fw-board-card.is-selected .fw-board-check {background:var(--accent);color:var(--accent-ink)}
html[data-ui-theme] .fw-step {background:transparent;color:var(--muted);border-right:1px solid var(--line);border-radius:0;font-size:16px}
html[data-ui-theme] .home-fw-detail {border-color:var(--line);color:var(--brand2);background:transparent}
html[data-ui-theme] .home-fw-detail:hover {background:var(--surface)}
html[data-ui-theme] .home-fw-state.ready {background:var(--mint);color:var(--ok)}
html[data-ui-theme] .fw-board-choice input:checked+span {background:var(--action-soft);color:var(--ink);border-color:var(--accent)}
html[data-ui-theme] .fw-board-choice input:checked+span i {background:var(--accent);border-color:var(--accent)}
html[data-ui-theme] .blog-tag {color:var(--muted)!important;background:var(--surface)!important}
html[data-ui-theme] :is(.bms-family-head>b,.privacy-meta span,.privacy-toc a,.sample-badge) {background:var(--surface);color:var(--ink);border-color:var(--line)}
html[data-ui-theme] .inverter-page {--inv-blue:var(--ink);--inv-cyan:var(--info);--inv-cyan-dark:var(--info);--inv-pale:var(--surface);--inv-line:var(--line);--inv-muted:var(--muted);background:transparent}
html[data-ui-theme] body.inverter-page {background:var(--canvas)}
html[data-ui-theme] .inverter-page :is(.full-tile,.full-tile.featured) {background:var(--paper);color:var(--ink);border-color:var(--line)}
html[data-ui-theme] .inverter-page .full-tile.featured>b {color:var(--info)}
html[data-ui-theme] .inverter-page :is(.full-section,.local-flow) {background:var(--paper);border-color:var(--line);border-radius:6px;box-shadow:none}
html[data-ui-theme] .inverter-ring::before {background:var(--paper)}
html[data-ui-theme] .inverter-ring {box-shadow:none}
html[data-ui-theme] .inverter-page .full-tile.featured .tile-icon {background:var(--surface);box-shadow:none}
html[data-ui-theme] .local-flow-node .flow-icon {background:var(--surface);color:var(--info);border-color:var(--line)}
html[data-ui-theme] :is(.history-canvas,.wiring-map,.lan-map,.bus-figure) {background:var(--paper);border-color:var(--line)}
html[data-ui-theme] .log {background:var(--surface);color:var(--ink)}
html[data-ui-theme] .social-float-toggle {background:var(--paper);color:var(--ink);border-color:var(--line2);box-shadow:none}
html[data-ui-theme] .social-float-link .social-float-icon {background:var(--surface);color:var(--ink)}
html[data-ui-theme] .foot {color:var(--muted);border-color:var(--line)}
html[data-ui-theme] .theme-menu {border-radius:6px}
html[data-ui-theme] .theme-swatch {border-radius:3px}
html[data-ui-theme] .theme-swatch.paper {background:#f5f3ec}
html[data-ui-theme] .theme-swatch.dark {background:#20211f}
html[data-ui-theme] .theme-swatch::before {display:none}
html[data-ui-theme] .theme-swatch::after {left:7px;right:7px;top:9px;width:auto;height:6px;border:0;border-radius:1px;background:var(--accent);box-shadow:0 10px 0 var(--line)}
/* Homepage: quiet hierarchy rather than a stack of competing panels. */
html[data-ui-theme] .home-hero {display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.85fr);gap:16px 44px;padding:32px 0 36px;margin:0 0 24px;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;min-height:0}
html[data-ui-theme] .home-hero :is(h1,p) {max-width:none}
html[data-ui-theme] .home-hero h1 {font-size:clamp(32px,3.2vw,48px);margin:8px 0 16px;letter-spacing:-.035em}
html[data-ui-theme] .home-hero p {font-size:15px;line-height:1.85;margin:0;color:var(--muted)}
html[data-ui-theme] .home-hero .hero-actions {margin-top:24px}
html[data-ui-theme] .home-hero .hero-actions .energy-btn {padding:10px 18px;font-size:14px}
html[data-ui-theme] .hero-instrument {align-self:center;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:24px}
.hero-instrument-head {display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--muted);letter-spacing:.04em}
.hero-instrument-value {font-size:48px;line-height:1.3;margin:18px 0 8px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.hero-instrument-value small {font-size:14px;font-weight:400;color:var(--muted)}
.hero-instrument dl {display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0;padding:16px 0;border-top:1px solid var(--line)}
.hero-instrument dt {color:var(--muted);font-size:12px}.hero-instrument dd {margin:4px 0 0;font-size:20px;font-variant-numeric:tabular-nums}
.hero-instrument-note {font-size:11px;color:var(--muted);margin-top:10px}
html[data-ui-theme] .home-page .energy-stats {grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:6px;margin:0 0 32px;overflow:hidden;background:var(--paper)}
html[data-ui-theme] .home-page .energy-stat {display:flex;flex-direction:column;gap:8px;min-height:0;padding:18px;border:0;border-right:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none}
html[data-ui-theme] .home-page .energy-stat:last-child {border-right:0}
html[data-ui-theme] .home-page .health-index-link {grid-column:auto}
html[data-ui-theme] .home-page .energy-stat .stat-icon::after {display:none}
html[data-ui-theme] .home-page .energy-stat>b {align-self:flex-start;font-weight:600;letter-spacing:-.03em}
html[data-ui-theme] .home-page .energy-stat::before {display:none}
html[data-ui-theme] .home-page .energy-stat .stat-icon {position:static;width:24px;height:24px;min-height:0;margin:0;background:transparent;color:var(--ink);writing-mode:horizontal-tb;transform:none;border:0;border-radius:0;padding:0}
html[data-ui-theme] .home-page .energy-stat b {font-size:26px;line-height:1.3}
html[data-ui-theme] .home-page .energy-stat span {font-size:12px;color:var(--muted)}
html[data-ui-theme] .home-page .energy-stat .stat-action {margin:4px 0 0;padding:0;border:0;font-size:11px}
html[data-ui-theme] .getting-started {padding:0 0 24px;border:0;border-bottom:1px solid var(--line);background:transparent;margin:24px 0 32px;border-radius:0}
html[data-ui-theme] .getting-started h2 {font-size:25px}
html[data-ui-theme] .start-steps {grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
html[data-ui-theme] .start-steps li {border:0;border-left:1px solid var(--line);border-radius:0;padding:0 0 0 18px}
html[data-ui-theme] .start-steps summary {font-size:15px;font-weight:600}
html[data-ui-theme] .start-steps p {font-size:13px}
html[data-ui-theme] .home-firmware {padding:0;border:0;border-radius:0;background:transparent;margin:32px 0}
html[data-ui-theme] .home-firmware-head h2 {font-size:25px}
html[data-ui-theme] .fw-device-stage {padding:18px}
html[data-ui-theme] .home-health-card {margin:28px 0}
html[data-ui-theme] .dashboard-grid .privacy-card {background:var(--paper)}
html[data-ui-theme] :is(.livedot,.online-dot) {background:var(--ok);box-shadow:none;animation:none}
html[data-ui-theme] :is(.bcard,.mcard,.metric-group,.hero-stat,.summary-card,.health-card,.soc-card,.personal-card,.fw-detail-hero,.fw-picker-card) {background:var(--paper);border-color:var(--line);border-radius:6px;box-shadow:none}
html[data-ui-theme] :is(.badge.on,.pill.ok) {background:var(--mint);color:var(--ok);border-color:var(--ok)}
html[data-ui-theme] .detail-toggle:hover {background:var(--surface);transform:none}
html[data-ui-theme] .log .k {color:var(--ok)}
html[data-ui-theme] .log .e {color:var(--bad)}
html[data-ui-theme] .fw-picker-shade {background:#171814b8;backdrop-filter:none}
html[data-ui-theme] .fw-picker-dialog {border-radius:6px}
html[data-ui-theme] .energy-empty {border-radius:6px}
html[data-ui-theme] .home-page .health-index-link>b {font-size:20px!important}
html[data-ui-theme] .home-fw-row {grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 90px auto}
html[data-ui-theme] .home-page .energy-stat:focus-visible {outline:2px solid var(--brand2);outline-offset:-3px}
@media(max-width:1100px) {
  html[data-ui-theme] .home-hero {gap:24px;grid-template-columns:1fr 1fr}
  html[data-ui-theme] .home-page .energy-stats {grid-template-columns:repeat(3,minmax(0,1fr))}
  html[data-ui-theme] .home-page .energy-stat {border-bottom:1px solid var(--line)}
}
@media(max-width:720px) {
  html[data-ui-theme] .home-fw-row {grid-template-columns:minmax(0,1fr) auto}
  html[data-ui-theme] .home-hero {grid-template-columns:1fr;padding:16px 0 24px}
  html[data-ui-theme] .hero-instrument {padding:20px}
  html[data-ui-theme] .start-steps {grid-template-columns:1fr;gap:18px}
  html[data-ui-theme] .home-page .energy-stats {grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-ui-theme] .home-page .energy-stat {padding:16px}
  html[data-ui-theme] .home-page .health-index-link {grid-column:1/-1}
}
@media(max-width:640px) {
  html[data-ui-theme] .topbar {position:sticky;top:0;bottom:auto;left:auto;right:auto;height:60px;padding:0 16px;border-top:0;border-bottom:1px solid var(--line)}
  html[data-ui-theme] .wrap {padding-bottom:32px}
  html[data-ui-theme] .theme-menu {top:calc(100% + 8px);bottom:auto;border-radius:6px}
  html[data-ui-theme] .theme-picker>summary {background:var(--paper);color:var(--ink)}
  html[data-ui-theme] .social-float {bottom:20px}
  html[data-ui-theme] .hero-actions {flex-wrap:wrap}
  html[data-ui-theme] :is(input,select,textarea) {font-size:16px}
}