/* Back to basic: shared paper surfaces for every public BMSGO page.
   Load after page styles. Status colours remain semantic; chrome is neutral. */
:root {
  color-scheme: light;
  --paper: #fffefa;
  --surface: #f5f4f0;
  --surface2: #eeede8;
  --line: #e1dfd8;
  --line2: #cbc9c1;
  --ink: #242421;
  --brand: #1d1d1b;
  --brand2: #42423d;
  --accent: #e9e7df;
  --accent-ink: #242421;
  --mint: #f2f1eb;
  --muted: #66665f;
  --radius: 8px;
  --shadow: 0 2px 3px #2424210a, 0 7px 18px #24242104;
  --sans: "Noto Sans Thai", "Sarabun", "Segoe UI", sans-serif;
  --sidebar-w: 238px;
  --topbar-h: 68px;
}
body { background: #f7f7f3; color: var(--ink); font: 15px/1.7 var(--sans); }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .22; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23808080' opacity='.22' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E"); }
.wrap { max-width: 1480px; padding: 32px 36px 40px; }
.wrap > *, .grid > *, .dashboard-grid > * { min-width: 0; }
h1,h2,h3 { color: var(--ink); letter-spacing: -.025em; line-height: 1.4; }
p { text-wrap: pretty; }
a { text-underline-offset: 4px; }
:where(a,button,input,select,textarea,summary):focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
:where(button,input,select,textarea) { font-family: var(--sans); }
:where(input,select,textarea) { accent-color: var(--ink); }
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea { border-color: var(--line2); border-radius: 6px; }
.sidebar { background: #fbfbf8; border-color: var(--line); box-shadow: none; }
.sidebar .brand { height: 90px; justify-content: flex-start; gap: 10px; padding: 0 25px; border: 0; font-size: 25px; letter-spacing: -.8px; }
.sidebar .brand > .ic { width: 29px; height: 38px; }
.sidebar-nav { gap: 4px; padding: 10px 16px 20px; scrollbar-width: thin; }
.nav-link { color: #42423d; font-size: 13px; font-weight: 600; border-radius: 5px; padding: 10px 12px; gap: 14px; }
.nav-link:hover { background: #eeede7; color: var(--ink); }
.nav-fw-picker,.nav-fw-picker:hover { background: var(--surface); border-color: var(--line); color: var(--ink); }
.nav-link[aria-current=page] { background: #20201e; color: #fff; box-shadow: 0 2px 3px #0001; }
.sidebar-foot { margin: 10px 17px 20px; padding: 15px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 3px; color: var(--ink); transform: rotate(-2deg); box-shadow: var(--shadow); }
.topbar { height: var(--topbar-h); padding: 0 32px; background: #fbfbf8f2; border-color: var(--line); backdrop-filter: blur(8px); }
.topbar-title { font-size: 14px; font-weight: 600; }
.burger { width: 36px; height: 36px; border: 1px solid var(--line); box-shadow: 0 1px 3px #00000005; font-size: 17px; }
.live-button { background: var(--paper); border-color: var(--line); color: var(--ink); }
.btn,.energy-btn { border: 1px solid var(--line2); border-radius: 5px; background: var(--paper); color: var(--ink); box-shadow: none; font-weight: 600; }
.btn.primary,.energy-btn.primary,.btn.lime,.energy-btn.lime { background: var(--ink); border: 1px solid var(--ink); color: #fff; }
.btn:hover,.energy-btn:hover { background: #eeede7; color: var(--ink); }
.btn.primary:hover,.energy-btn.primary:hover,.btn.lime:hover,.energy-btn.lime:hover { background: #41413b; color: #fff; }
.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 {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.card.soft,.seo-copy { background: var(--surface); border-color: var(--line); border-radius: var(--radius); }
.energy-hero,.blog-hero,.privacy-hero { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.energy-hero::before,.energy-hero::after,.blog-hero::after,.privacy-hero::after { display: none; }
.energy-hero p,.blog-hero p,.privacy-hero p,.phone-flash-home p { color: var(--muted); }
.energy-kicker,.eyebrow,.home-health-head .energy-kicker { padding: 0; border: 0; border-radius: 0; color: var(--ink); background: transparent; font-size: 11px; font-weight: 700; letter-spacing: .11em; }
.energy-hero { min-height: 0; padding: 30px; }
.energy-hero h1 { margin-top: 9px; font-size: clamp(27px,3vw,38px); line-height: 1.4; }
.home-hero { overflow: visible; min-height: 350px; padding: 36px 38px 30px; margin: 10px 8px 30px; background-image: repeating-linear-gradient(transparent 0 30px,#a8bfd223 30px 31px); }
.home-hero::before { display: block; width: 1px; height: auto; top: 0; bottom: 0; left: 27px; right: auto; background: #d8b8b64a; box-shadow: none; border: 0; border-radius: 0; }
.home-hero::after { display: block; width: 105px; height: 27px; top: 12px; right: -24px; border: 1px solid #d5cdb92b; border-radius: 0; background: #e8dfc891; transform: rotate(38deg); }
.home-hero h1 { max-width: 64%; font-size: clamp(32px,3.7vw,48px); line-height: 1.38; letter-spacing: -.045em; margin: 12px 0; }
.home-hero p { max-width: 57%; font-size: 15px; line-height: 1.9; }
.energy-hero.home-hero .hero-product { display: block; top: 50px; right: 12px; bottom: auto; width: 42%; height: 240px; max-width: none; opacity: 1; object-fit: contain; filter: none; }
.home-hero .hero-actions { margin-top: 20px; }
.home-hero .hero-actions .energy-btn { padding: 7px 12px; font-size: 12px; background: var(--paper); color: var(--ink); border-color: var(--line2); }
.line-cta { border: 1px solid #242421; border-radius: 6px; background: #242421; box-shadow: 0 2px 3px #0002; color: #fff; padding: 12px; gap: 10px; }
.line-cta:hover { transform: none; background: #363631; box-shadow: 0 3px 6px #0002; }
.home-hero .line-cta { max-width: 64%; margin: 20px 0 0; }
.line-ic { width: 27px; height: 27px; flex-basis: 27px; background: transparent; border: 0; }
.line-ic svg { width: 22px; height: 22px; }
.line-body b { font-size: 13px; }
.line-body small { font-size: 11px; }
.line-btn { padding: 10px 13px; border-radius: 4px; color: #242421; font-size: 12px; }
.home-page .energy-stats { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 18px; margin: 0 8px 26px; }
.energy-stat { position: relative; padding: 20px 18px 13px; }
.energy-stat .stat-icon,.energy-stat:nth-child(n) .stat-icon,.quick-link .qicon,.health-symbol,.home-health-metric.resistance .health-symbol,.home-health-metric.mos .health-symbol { background: transparent; color: var(--ink); border-radius: 0; }
.paper-icon { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.energy-stat .stat-icon { justify-content: flex-start; width: 30px; height: 32px; margin: 0 0 15px; }
.energy-stat b { font-size: 30px; font-weight: 650; line-height: 1.35; font-variant-numeric: tabular-nums; }
.energy-stat span { color: #4f4f49; font-size: 12px; }
.energy-stat .stat-action { display: block; border-top: 1px solid var(--line); padding-top: 9px; margin-top: 13px; font-size: 11px; color: var(--ink); font-weight: 500; }
.energy-stat:hover,.bms-online-card:hover,.inv-compact:hover,.home-health-metric:hover,.blog-card:hover { border-color: #aaa89e; box-shadow: 0 4px 10px #00000009; transform: translateY(-1px); }
.home-health-card { position: relative; padding: 24px 27px; margin: 0 0 24px; }
.home-health-card::before,.paper-support::before { content: ""; position: absolute; top: 15px; bottom: 15px; left: -4px; width: 8px; background: radial-gradient(circle at 4px 5px,#f0efea 0 3px,#d4d2ca 3px 4px,transparent 4px) 0 0/8px 27px; pointer-events: none; }
.home-health-head h2 { font-size: 23px; line-height: 1.5; margin: 6px 0; }
.home-health-head p { font-size: 12px; }
.home-health-head .energy-btn { background: transparent; color: var(--ink); border-color: var(--line2); font-size: 12px; }
.home-health-metric { background: var(--paper); border-color: var(--line); border-radius: 5px; padding: 17px; }
.home-health-metric strong { font-size: 28px; line-height: 1.5; }
.home-health-metric small,.home-health-metric em { font-size: 11px; white-space: normal; }
.home-health-foot,.home-health-foot span:last-child { color: var(--muted); font-weight: 400; }
.dashboard-grid { grid-template-columns: 1.25fr 1fr; gap: 20px; }
.dashboard-panel { padding: 23px; }
.dashboard-panel h2 { font-size: 20px; margin: 0 0 7px; }
.quick-links { gap: 9px; }
.quick-link { padding: 12px; border-radius: 5px; font-size: 13px; gap: 10px; }
.quick-link::after { content: "›"; margin-left: auto; font-size: 21px; font-weight: 400; }
.quick-link:hover { border-color: var(--line2); background: var(--surface); }
.quick-link .qicon { width: 28px; height: 32px; flex: 0 0 28px; }
.privacy-card .shield { background: transparent; color: var(--ink); width: 32px; height: 32px; margin-bottom: 15px; }
.dashboard-grid .privacy-card { background: repeating-linear-gradient(transparent 0 30px,#a8bfd21c 30px 31px),var(--paper); }
.home-firmware { position: relative; padding: 24px; margin: 26px 0; }
.home-firmware-head { margin: 0 0 19px; align-items: center; }
.home-firmware-head h2 { font-size: 23px; line-height: 1.5; }
.home-firmware-head .energy-kicker { margin-bottom: 5px; }
.home-fw-list { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.home-fw-row { grid-template-columns: minmax(0,1.25fr) minmax(0,1fr) minmax(85px,.45fr) 92px 88px; gap: 14px; padding: 13px 8px; }
.home-fw-row:hover { background: #f5f4ee; }
.home-fw-name b { font-size: 13px; }
.home-fw-name span { font-size: 10px; }
.home-fw-state.ready { background: #292927; color: #fff; border-radius: 4px; font-weight: 500; font-size: 10px; padding: 3px 7px; }
.home-fw-heading { border-bottom: 1px solid var(--line2); background: var(--surface); font-size: 11px; font-weight: 600; }
.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: 5px; 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: 600; }
.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; }
.home-bottom .phone-flash-home h2 { font-size: 21px; }
.home-bottom .phone-flash-home p { font-size: 13px; }
.home-bottom .phone-flash-home .energy-btn { margin-top: 20px; background: transparent; color: var(--ink); border-color: var(--line2); font-size: 13px; }
.paper-support { position: relative; padding: 26px; }
.paper-support h2 { margin: 0 0 8px; font-size: 21px; }
.paper-support p { color: var(--muted); font-size: 13px; margin: 0 0 22px; }
.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: 600; font-size: 12px; }
.paper-support-links svg { width: 19px; height: 19px; }
.home-page .seo-copy { background: transparent; border: 0; padding: 14px 0; font-size: 12px; }
.home-page .seo-copy h2 { font-size: 14px; }
/* Secondary pages, firmware dialogs, guides, monitoring and blog. */
.rankings-hero { background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.rankings-hero::before,.rankings-hero::after,.soc-card::after { display: none; }
.rankings-live { color: var(--muted); }
.rankings-live i { background: #727269; box-shadow: none; }
.summary-card.majority::before,.summary-card.middle::before,.summary-card.worst::before { background: #96968c; }
.rankings-hero h1,.rankings-kicker,.rankings-hero .compare-form label,.metric-eyebrow { color: var(--ink); }
.rankings-hero p,.rankings-hero-meta,.rankings-hero .compare-form p,.compare-form small,.compare-message,.rankings-legacy-link { color: var(--muted); }
.rankings-legacy-link:hover { color: var(--ink); }
.compare-form { background: var(--surface); border-color: var(--line); border-radius: 6px; }
.compare-input-row input { background: var(--paper); color: var(--ink); border-color: var(--line2); }
.summary-card,.health-card,.soc-card,.personal-card,.resistance-bin { background: var(--paper); border-radius: 8px; border-color: var(--line); box-shadow: var(--shadow); }
.summary-card small,.cell-main-reading small,.metric-note,.soc-card p,.soc-count,.personal-position,.personal-card dd small,.ranking-method p,.resistance-bin p { color: var(--muted); }
.metric-icon.percent,.metric-icon.heat,.metric-icon.resistance { background: var(--surface); color: var(--ink); }
.ranking-method { background: var(--surface); border-color: var(--line); border-radius: 8px; }
.metric-group-tabs button.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.metric-group-tabs button.active b,.metric-group-tabs button.active small,.metric-group-tabs button.active span { color: inherit; }
.metric-group-tabs { border-radius: 8px; }
.metric-group-tabs button { border-radius: 5px; }
.metric-group-tabs button:hover { background: var(--surface2); color: var(--ink); }
.inverter-page { --inv-blue: var(--ink); --inv-cyan: #515149; --inv-cyan-dark: #30302b; --inv-pale: var(--surface); --inv-line: var(--line); --inv-muted: var(--muted); background: transparent; }
.inverter-page .energy-btn { border-color: var(--line2); color: var(--ink); }
.inverter-page .energy-btn:hover { background: var(--surface); }
.inverter-page .local-flow::before { background: none; }
.local-flow-node .flow-icon { border-color: var(--line); background: var(--surface); color: var(--ink); border-radius: 6px; }
.local-flow-node .flow-label,.inverter-ring span,.inverter-ring small,.flow-summary,.inverter-page .inv-card-meta { color: var(--muted); }
.inverter-page .full-tile,.inverter-page .full-tile.featured { background: var(--paper); border-color: var(--line); border-radius: 6px; }
.inverter-page .full-tile.featured>b { color: var(--ink); }
.inverter-page .full-tile>b small,.inverter-page .full-tile em { color: var(--muted); }
.history-canvas { background: var(--paper); }
.wiring-hero,.wiring-map,.lan-map,.bus-figure,.phone-flash-hero { background: var(--paper); border-color: var(--line); border-radius: 8px; }
.download-card { background: #292927; box-shadow: var(--shadow); border-radius: 8px; }
.phone-success { background: var(--surface); }
.home-fw-version { white-space: normal; overflow-wrap: anywhere; font-size: 12px; }
.bms-online-card,.flow-node,.mini-system,.full-flow-node,.inv-flow-point,.local-flow,.privacy-list li,.fw-detail-hero,.fw-picker-card { border-color: var(--line); background: var(--paper); border-radius: 8px; box-shadow: var(--shadow); }
.bms-fw-toggle,.bms-fw-toggle:hover,.bms-fw-group.is-expanded .bms-fw-toggle { border-color: var(--line2); color: var(--ink); background: var(--surface); border-radius: 5px; box-shadow: none; }
.bms-fw-toggle::after,.bms-fw-group.is-expanded .bms-fw-toggle::after { background: var(--surface2); }
.monitor-card-head .card-icon,.compact-row .row-icon,.privacy-summary-icon,.privacy-card>span { background: var(--surface); color: var(--ink); }
.bms-family-head>b,.privacy-meta span,.privacy-toc a { border-color: var(--line); background: var(--surface); color: var(--ink); }
.tabbtn,.tabbtn.sel,.blog-filter { border-radius: 5px; }
.tabbtn.sel { background: var(--ink); box-shadow: none; }
.privacy-section p,.privacy-list li,.blog-content,.blog-note,.blog-end,.blog-share a,.blog-article-head>p { color: #4c4c46; }
.blog-note,.blog-subscribe { background: var(--surface); border-color: var(--line); border-radius: 6px; }
.blog-article-banner { background: #292927; border-radius: 8px; }
.blog-tag { color: var(--ink)!important; background: var(--surface)!important; border: 1px solid var(--line); border-radius: 4px; }
.log { background: #252523; color: #efeee8; }
.social-float-panel { background: var(--paper); border-color: var(--line); box-shadow: 0 8px 28px #0001; border-radius: 8px; }
.social-float-toggle,.social-float-toggle:hover { background: var(--ink); border-color: var(--ink); box-shadow: 0 3px 10px #0002; }
.social-float-link.line .social-float-icon,.social-float-link.facebook .social-float-icon,.social-float-link.facebook-group .social-float-icon,.social-float-link.tiktok .social-float-icon { background: #32322e; border-radius: 5px; }
.social-float-link:hover { background: var(--surface); }
th { background: var(--surface); color: var(--ink); }
th,td { border-color: var(--line); }
.sitefoot, #sitefoot { color: var(--muted); border-color: var(--line); }
.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; }
.paper-footer-brand { font-size: 16px; font-weight: 700; }
@media(min-width:1500px) { .home-hero h1 { font-size: 50px; } }
@media(max-width:1200px) {
  .wrap { padding: 26px; }
  .home-hero { padding: 30px; }
  .home-hero h1 { font-size: 36px; }
  .home-hero .line-cta { max-width: 76%; }
  .home-page .energy-stats { gap: 12px; }
  .energy-stat { padding: 16px 12px 12px; }
  .home-fw-row { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr) 80px 92px 88px; gap: 9px; }
  .home-firmware-head { align-items: flex-start; flex-direction: column; }
}
@media(max-width:960px) {
  .wrap,.topbar { margin-left: 0; }
  .sidebar { box-shadow: 8px 0 30px #00000010; }
  .sidebar.open { transform: translateX(0); }
  body.sidebar-collapsed .sidebar.open { transform: translateX(0); }
  .home-hero h1 { max-width: 66%; }
  .home-hero .line-cta { max-width: 73%; }
  .home-page .energy-stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
}
@media(max-width:640px) {
  body { font-size: 14px; }
  .wrap { padding: 18px 16px 30px; }
  .topbar { padding: 0 16px; height: 60px; }
  .home-hero { padding: 28px 22px 22px; margin: 4px 0 20px; }
  .home-hero::before { left: 12px; }
  .home-hero::after { right: -9px; width: 69px; height: 22px; top: 7px; }
  .home-hero h1 { max-width: none; font-size: 32px; }
  .home-hero p { max-width: none; font-size: 14px; }
  .energy-hero.home-hero .hero-product { position: relative; width: 100%; height: 170px; top: auto; right: auto; margin: 15px 0 -4px; }
  .home-hero .line-cta { max-width: none; flex-wrap: wrap; }
  .line-ic { display: none; }
  .line-body { flex: 1 1 100%; order: 0; }
  .line-btn { order: 1; margin: 3px 0 0; padding: 7px 10px; }
  .home-page .energy-stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 0 0 22px; }
  .home-page .health-index-link { grid-column: 1/-1; }
  .home-health-card { padding: 20px; }
  .home-health-head h2 { font-size: 21px; }
  .home-health-head .energy-btn { width: auto; margin-top: 12px; }
  .home-health-grid { grid-template-columns: 1fr; }
  .home-health-metric { padding: 14px; }
  .home-health-metric strong { font-size: 26px; }
  .dashboard-panel { padding: 20px; }
  .quick-links { grid-template-columns: 1fr; }
  .home-firmware { padding: 20px 14px; }
  .home-firmware-head h2 { font-size: 21px; }
  .home-fw-tools,.home-fw-search { width: 100%; }
  .home-fw-search input { width: 100%; min-height: 40px; font-size: 16px; }
  .home-fw-row { grid-template-columns: minmax(0,1fr) auto; gap: 6px 10px; padding: 15px 3px; }
  .home-fw-heading { display: none; }
  .home-fw-device { grid-column: 1/-1; }
  .home-fw-name b,.home-fw-device { white-space: normal; overflow-wrap: anywhere; }
  .home-fw-version { grid-column: 1; }
  .home-fw-detail { grid-column: 2; grid-row: 3; }
  .home-bottom { grid-template-columns: 1fr; }
  .paper-footer-row { align-items: flex-start; flex-direction: column; }
  .energy-hero:not(.home-hero) h1 { font-size: 27px; max-width: none; }
  .energy-hero:not(.home-hero) p { max-width: none; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior: auto!important; animation-duration: .01ms!important; animation-iteration-count: 1!important; transition-duration: .01ms!important; }
}