/* =========================================================================
   BMS GO — skin v5 "soft green"
   Loads AFTER studio.css. Markup and links are untouched; everything here is
   token + surface styling, so app.js keeps injecting the same chrome.

   v4 read flat because every card was white on white with a 1px rule. v5 puts
   the color back the way the reference comp does it: each card carries a pale
   tint of its own hue plus a solid icon tile, spacing opens up, and the type
   is a looped Thai face at lighter weights.

   Fonts are self-hosted under /assets/fonts — the CSP is default-src 'self',
   so a Google Fonts <link> would be blocked with no visible error.
   ========================================================================= */

@import "/assets/fonts/face.css";

/* ---- tokens ------------------------------------------------------------ */
html[data-ui-theme] {
  --canvas:#f6faf7; --paper:#ffffff; --surface:#f1f6f2; --surface2:#e7efe9;
  --line:#e4ebe5; --line2:#cbdbcf; --ink:#0f2018; --muted:#5b7266;
  --brand:#0f2018; --brand2:#0b6f3e; --accent:#12a05a; --accent-ink:#ffffff;
  --mint:#e4f6ec; --action-soft:#e4f6ec;
  --ok:#12a05a; --warn:#c07a09; --bad:#c0392b; --info:#0d8f97;
  --radius:14px;

  /* card hues — pale fill / hairline / solid tile */
  --c1:#12a05a; --c1s:#e4f6ec; --c1l:#bde7cf;   /* green    */
  --c2:#0d8f97; --c2s:#e0f4f6; --c2l:#b7e2e6;   /* teal     */
  --c3:#d98d0c; --c3s:#fdf1dc; --c3l:#f3ddb2;   /* amber    */
  --c4:#6b52d3; --c4s:#eeeafc; --c4l:#d5cbf5;   /* violet   */
  --c5:#2b6fd6; --c5s:#e7f0fd; --c5l:#c4d9f8;   /* blue     */

  --v4-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
  --v4-thai:"IBM Plex Sans Thai Looped","Noto Sans Thai","Sarabun",sans-serif;
  --v4-shadow:0 6px 20px #0f20180a;
  --v4-shadow-lg:0 14px 40px #0f20180f;
  --v4-glow:0 6px 16px #12a05a33;
}
html[data-ui-theme="dark"] {
  --canvas:#0a1712; --paper:#11221b; --surface:#17291f; --surface2:#1d3327;
  --line:#22392e; --line2:#325043; --ink:#e9f4ed; --muted:#96b0a3;
  --brand:#e9f4ed; --brand2:#43dc8c; --accent:#2fd07a; --accent-ink:#04140d;
  --mint:#132e21; --action-soft:#132e21;
  --ok:#2fd07a; --warn:#e3bc6c; --bad:#f09186; --info:#5ad2da;

  --c1:#2fd07a; --c1s:#12301f; --c1l:#215c3c;
  --c2:#4cd2d8; --c2s:#0e2d31; --c2l:#1d5459;
  --c3:#efb04a; --c3s:#2f2413; --c3l:#5c4620;
  --c4:#9b86f0; --c4s:#221d3a; --c4l:#413769;
  --c5:#6699ef; --c5s:#132441; --c5l:#2a477a;

  --v4-shadow:0 6px 20px #0004;
  --v4-shadow-lg:0 14px 40px #00000059;
  --v4-glow:0 6px 16px #2fd07a2e;
}

/* ---- type -------------------------------------------------------------- */
html[data-ui-theme] body,
html[data-ui-theme] :is(button,input,select,textarea){font-family:var(--v4-thai)}
html[data-ui-theme] body{background:var(--canvas)}
html[data-ui-theme] :is(h1,h2,h3,h4){font-weight:600;letter-spacing:-.01em;line-height:1.32}
html[data-ui-theme] :is(.energy-kicker,.eyebrow,.rankings-kicker,.metric-eyebrow)
  {color:var(--accent);background:transparent;font-size:11.5px;font-weight:600;letter-spacing:.16em}
html[data-ui-theme] :is(.energy-stat b,.hero-instrument-value,.hero-instrument dd,
  .home-health-metric strong,.home-fw-version,.metric-card b,.bcard b,.home-fw-name span)
  {font-family:var(--v4-mono);font-variant-numeric:tabular-nums;letter-spacing:-.03em}

/* page canvas gets the same soft wash as the comp */
html[data-ui-theme] .home-page .wrap{
  background:linear-gradient(180deg,#eef8f1 0,var(--canvas) 420px)}
html[data-ui-theme="dark"] .home-page .wrap{
  background:linear-gradient(180deg,#0f2419 0,var(--canvas) 420px)}

/* ---- surfaces ---------------------------------------------------------- */
html[data-ui-theme] :is(.card,.board,.dev,.tablewrap,.dashboard-panel,.home-firmware,
  .phone-flash-home,.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,.metric-card,.rankings-card,.resistance-bin,
  .release-card,.fw-result-card,.fw-board-card,.home-fw-list,.download-card,.hero-instrument,
  .bcard,.mcard,.metric-group,.summary-card,.health-card,.soc-card,.personal-card,
  .fw-detail-hero,.fw-picker-card){
  background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--v4-shadow)}
html[data-ui-theme] .fw-device-stage{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px}

html[data-ui-theme] :is(.btn,.energy-btn,.burger,.live-button,.theme-picker>summary,
  .fw-picker-close){border-radius:12px;font-weight:600;min-height:42px}
html[data-ui-theme] body :is(.btn.primary,.energy-btn.primary,.btn.lime,.energy-btn.lime){
  background:linear-gradient(135deg,var(--accent),var(--brand2));border-color:transparent;
  color:var(--accent-ink);font-weight:700;box-shadow:var(--v4-glow)}
html[data-ui-theme] body :is(.btn.primary,.energy-btn.primary):hover{filter:brightness(1.05)}

/* sidebar */
html[data-ui-theme] .sidebar{background:var(--paper);border-right:1px solid var(--line)}
html[data-ui-theme] .sidebar .brand::before{background:var(--accent);border-radius:4px}
html[data-ui-theme] .nav-link{border-radius:11px;padding:11px 14px}
html[data-ui-theme] .nav-link[aria-current="page"]{
  background:var(--action-soft);color:var(--brand2);box-shadow:none;font-weight:600}

/* ---- home · hero ------------------------------------------------------- */
html[data-ui-theme] .home-hero{border-bottom:0;padding:38px 0 32px;margin:0;gap:20px 44px}
html[data-ui-theme] .home-hero h1{font-size:clamp(32px,3.4vw,44px);line-height:1.24;margin:10px 0 18px}
html[data-ui-theme] .home-hero p{font-size:15.5px;line-height:1.8}
html[data-ui-theme] .home-hero .hero-actions{margin-top:26px;gap:12px}
html[data-ui-theme] .home-hero .hero-actions .energy-btn{padding:14px 26px;font-size:15px}
html[data-ui-theme] .hero-instrument{border-radius:22px;padding:24px;box-shadow:var(--v4-shadow-lg)}
html[data-ui-theme] .hero-instrument-head{color:var(--accent);font-weight:600;letter-spacing:.08em}
html[data-ui-theme] .hero-instrument-head span:last-child{color:var(--muted)}
html[data-ui-theme] .hero-instrument-value{font-size:52px;line-height:1;margin:18px 0 12px}
html[data-ui-theme] .hero-instrument dl{
  grid-template-columns:1fr 1fr;gap:10px;padding:14px 0 0;border-top:1px solid var(--line)}
html[data-ui-theme] .hero-instrument dl>div{
  background:var(--c1s);border-radius:13px;padding:11px 13px}
html[data-ui-theme] .hero-instrument dd{font-size:19px;margin-top:5px}
html[data-ui-theme] .hero-instrument>a{color:var(--accent);font-weight:600}

/* ---- home · stat cards, one hue each ---------------------------------- */
html[data-ui-theme] .home-page .energy-stats{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;
  background:transparent;border:0;border-radius:0;overflow:visible;margin:6px 0 10px}
html[data-ui-theme] .home-page .energy-stat{
  display:flex;flex-direction:column;gap:0;padding:20px 18px;
  border:1px solid var(--c1l);border-radius:18px;background:var(--c1s);box-shadow:none}
html[data-ui-theme] .home-page .energy-stat .stat-icon{
  width:46px;height:46px;min-height:46px;margin:0 0 16px;padding:0;border:0;border-radius:14px;
  display:grid;place-items:center;background:var(--c1);color:#fff}
html[data-ui-theme] .home-page .energy-stat .stat-icon .paper-icon{width:23px;height:23px;stroke-width:1.7}
html[data-ui-theme] .home-page .energy-stat b{
  font-size:30px;line-height:1;color:var(--ink);font-weight:600}
html[data-ui-theme] .home-page .energy-stat>span{
  margin-top:9px;color:var(--muted);font-size:13px;font-weight:500}
html[data-ui-theme] .home-page .energy-stat .stat-action{
  margin-top:14px;color:var(--c1);font-size:12px;font-weight:600}
html[data-ui-theme] .home-page .energy-stat:hover{
  transform:translateY(-2px);box-shadow:var(--v4-shadow);transition:.18s}
html[data-ui-theme] .home-page .health-index-link>b{font-size:19px!important;letter-spacing:0}

html[data-ui-theme] .home-page .energy-stat:nth-child(2){background:var(--c2s);border-color:var(--c2l)}
html[data-ui-theme] .home-page .energy-stat:nth-child(2) .stat-icon{background:var(--c2)}
html[data-ui-theme] .home-page .energy-stat:nth-child(2) .stat-action{color:var(--c2)}
html[data-ui-theme] .home-page .energy-stat:nth-child(3){background:var(--c3s);border-color:var(--c3l)}
html[data-ui-theme] .home-page .energy-stat:nth-child(3) .stat-icon{background:var(--c3)}
html[data-ui-theme] .home-page .energy-stat:nth-child(3) .stat-action{color:var(--c3)}
html[data-ui-theme] .home-page .energy-stat:nth-child(4){background:var(--c4s);border-color:var(--c4l)}
html[data-ui-theme] .home-page .energy-stat:nth-child(4) .stat-icon{background:var(--c4)}
html[data-ui-theme] .home-page .energy-stat:nth-child(4) .stat-action{color:var(--c4)}
html[data-ui-theme] .home-page .energy-stat:nth-child(5){background:var(--c5s);border-color:var(--c5l)}
html[data-ui-theme] .home-page .energy-stat:nth-child(5) .stat-icon{background:var(--c5)}
html[data-ui-theme] .home-page .energy-stat:nth-child(5) .stat-action{color:var(--c5)}

/* ---- home · three steps as colored tiles ------------------------------ */
html[data-ui-theme] .getting-started{border:0;background:transparent;margin:34px 0 8px;padding:0}
html[data-ui-theme] .getting-started h2{font-size:27px;margin:10px 0}
html[data-ui-theme] .getting-started>p{color:var(--muted);font-size:14.5px}
html[data-ui-theme] .start-steps{
  counter-reset:v4step;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}
html[data-ui-theme] .start-steps li{
  counter-increment:v4step;border:1px solid var(--line);border-radius:18px;
  background:var(--paper);box-shadow:var(--v4-shadow);padding:22px}
html[data-ui-theme] .start-steps summary{
  display:flex;align-items:center;gap:13px;font-size:16.5px;font-weight:600;list-style:none}
html[data-ui-theme] .start-steps summary::-webkit-details-marker{display:none}
html[data-ui-theme] .start-steps summary::before{
  content:counter(v4step);width:42px;height:42px;flex:0 0 42px;border-radius:14px;
  display:grid;place-items:center;color:#fff;font-size:17px;font-weight:600;
  background:linear-gradient(135deg,var(--c1),var(--brand2))}
html[data-ui-theme] .start-steps li:nth-child(2) summary::before{
  background:linear-gradient(135deg,#3d86e8,var(--c5))}
html[data-ui-theme] .start-steps li:nth-child(3) summary::before{
  background:linear-gradient(135deg,#efac2b,var(--c3))}
html[data-ui-theme] .start-steps p{font-size:13.5px;line-height:1.75;color:var(--muted)}

/* ---- home · firmware --------------------------------------------------- */
html[data-ui-theme] .home-firmware{background:transparent;border:0;box-shadow:none;padding:0;margin:34px 0}
html[data-ui-theme] .home-firmware-head h2{font-size:27px}
html[data-ui-theme] .fw-board-tabs button{
  border:1px solid var(--line);border-radius:99px;background:var(--paper);
  color:var(--muted);min-height:38px;padding:8px 18px;font-weight:500}
html[data-ui-theme] body .fw-board-tabs button.is-active{
  background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;box-shadow:var(--v4-glow)}
html[data-ui-theme] .fw-board-card{border-radius:16px;overflow:hidden}
html[data-ui-theme] .fw-board-photo{background:var(--c1s);height:118px}
html[data-ui-theme] .fw-board-card:nth-child(2) .fw-board-photo{background:var(--c2s)}
html[data-ui-theme] .fw-board-card:nth-child(3) .fw-board-photo{background:var(--c3s)}
html[data-ui-theme] .fw-board-card:nth-child(4) .fw-board-photo{background:var(--c4s)}
html[data-ui-theme] .fw-board-card:nth-child(5) .fw-board-photo{background:var(--c5s)}
html[data-ui-theme] .fw-board-card.is-selected{border-color:var(--accent);box-shadow:0 0 0 2px #12a05a29}
html[data-ui-theme] .fw-board-card.is-selected .fw-board-check{background:var(--accent);color:#fff}
html[data-ui-theme] .fw-board-count{color:var(--accent);font-weight:600}
html[data-ui-theme] .home-fw-row{padding:14px 16px}
html[data-ui-theme] .home-fw-row:hover{background:var(--mint)}
html[data-ui-theme] .home-fw-version{
  background:var(--surface);border-radius:9px;padding:6px 11px;color:var(--ink);font-weight:600;font-size:12px}
html[data-ui-theme] .home-fw-detail{
  border:1px solid var(--line2);border-radius:10px;color:var(--brand2);font-weight:600;padding:8px 12px}

/* ---- home · community health ------------------------------------------ */
html[data-ui-theme] .home-health-card{
  background:linear-gradient(135deg,var(--c1s),var(--paper) 70%);
  border:1px solid var(--c1l);border-radius:22px;box-shadow:var(--v4-shadow);padding:26px}
html[data-ui-theme] .home-health-head .energy-kicker{background:transparent;border:0;color:var(--accent)}
html[data-ui-theme] .home-health-grid{gap:16px;margin-top:22px}
html[data-ui-theme] .home-health-metric{
  background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:none}
html[data-ui-theme] .health-symbol{
  width:42px;height:42px;flex:0 0 42px;border-radius:13px;background:var(--c1);color:#fff;font-weight:600}
html[data-ui-theme] .home-health-metric.resistance .health-symbol{background:var(--c2)}
html[data-ui-theme] .home-health-metric.mos .health-symbol{background:var(--c3)}
html[data-ui-theme] .home-health-metric strong{font-size:26px;color:var(--ink);font-weight:600}

/* ---- home · quick links + privacy ------------------------------------- */
html[data-ui-theme] .quick-link{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px}
html[data-ui-theme] .quick-link .qicon{
  width:38px;height:38px;border-radius:12px;background:var(--paper);color:var(--accent);
  display:grid;place-items:center}
html[data-ui-theme] .quick-link:hover{background:var(--mint);border-color:var(--c1l)}
html[data-ui-theme] .privacy-card .shield{
  width:44px;height:44px;border-radius:14px;background:var(--c1);color:#fff;
  display:grid;place-items:center;font-size:20px}

/* ---- home · support block, the one saturated surface ------------------ */
html[data-ui-theme] .paper-support{
  background:linear-gradient(140deg,#0f7a45,#12a05a 58%,#17b567);
  border:0;border-radius:20px;color:#fff;box-shadow:0 12px 30px #12a05a40;padding:26px}
html[data-ui-theme] .paper-support :is(h2,p,a){color:#fff}
html[data-ui-theme] .paper-support p{opacity:.9}
html[data-ui-theme] .paper-support-links{gap:10px;display:grid;grid-template-columns:1fr 1fr}
html[data-ui-theme] .paper-support-links a{
  background:#ffffff26;border:1px solid #ffffff33;border-radius:13px;padding:12px 14px;font-weight:600}
html[data-ui-theme] .paper-support-links a:hover{background:#ffffff3d;text-decoration:none}
html[data-ui-theme] .phone-flash-home{border-radius:20px;padding:26px}

/* ---- community float panel (LINE · Fanpage · Group · TikTok) ---------- */
html[data-ui-theme] .social-float-toggle{border-radius:99px;font-weight:600;box-shadow:var(--v4-shadow)}
html[data-ui-theme] .social-float-panel{border-radius:18px;box-shadow:var(--v4-shadow-lg)}
html[data-ui-theme] .social-float-link{border-radius:13px}
html[data-ui-theme] .social-float-link .social-float-icon{
  border-radius:12px;background:var(--surface);color:var(--ink)}
html[data-ui-theme] .social-float-link b{color:var(--brand2)}
html[data-ui-theme] .social-float-arrow{color:var(--accent)}

/* ---- reading width ----------------------------------------------------
   theme-modes.css lets .wrap grow to the full viewport beside the sidebar,
   which on a wide monitor stretches a five-column grid past comfortable
   reading width. Cap it and centre the leftover space instead. */
@media(min-width:961px){
  html[data-ui-theme] body .wrap{
    width:auto;max-width:1320px;
    margin-left:max(var(--sidebar-w),calc((100vw - 1320px)/2));
    margin-right:auto}
  html[data-ui-theme] body .wrap.narrow{max-width:900px}
}

/* ---- device page (/BMS-xxxx, /LUX-xxxx, /IR-xxxx) --------------------- */
html[data-ui-theme] .devhead{
  background:var(--paper);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--v4-shadow);padding:16px 20px;gap:12px}
html[data-ui-theme] .devhead h1{font-size:20px;font-weight:600}
html[data-ui-theme] .pill{
  padding:5px 12px;border-radius:99px;font-size:12px;font-weight:600;
  background:var(--surface);border:1px solid var(--line);color:var(--muted)}
html[data-ui-theme] body .pill.lime{
  background:var(--c1s);border-color:var(--c1l);color:var(--brand2)}
html[data-ui-theme] .pill.ok{background:var(--c1s);border-color:var(--c1l);color:var(--brand2)}
/* the IP chip is an action, not a status — give it its own outlined look so
   it stops reading as another green status pill next to "สด 9 วิ" */
html[data-ui-theme] body a.iplink{
  background:var(--paper);border:1px solid var(--c5l);color:var(--c5);
  padding:6px 13px;font-weight:600}
html[data-ui-theme] body a.iplink:hover{background:var(--c5s);filter:none}
html[data-ui-theme] .copy{
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  color:var(--muted);font-weight:500;padding:8px 12px}
html[data-ui-theme] .copy:hover{background:var(--surface);color:var(--ink)}
html[data-ui-theme] .tabbar{gap:9px;margin-bottom:18px}
html[data-ui-theme] .bcard{border-radius:18px;padding:18px}
html[data-ui-theme] .bcard .hero{
  background:linear-gradient(135deg,var(--c1s),var(--paper) 78%);
  border:1px solid var(--c1l);border-radius:16px}
html[data-ui-theme] .badges .badge{
  border-radius:99px;padding:6px 13px;font-size:12.5px;font-weight:500;
  background:var(--surface);border:1px solid var(--line);color:var(--muted)}
html[data-ui-theme] body .badges .badge.on{
  background:var(--c1s);border-color:var(--c1l);color:var(--brand2);font-weight:600}
html[data-ui-theme] .detail-toggle{
  border-radius:12px;border:1px solid var(--line);background:var(--surface);
  color:var(--brand2);font-weight:600;min-height:44px}
html[data-ui-theme] .detail-toggle:hover{background:var(--mint);border-color:var(--c1l)}

/* ---- misc pages ------------------------------------------------------- */
html[data-ui-theme] :is(.tabbtn,.metric-group-tabs button){border-radius:99px;padding:8px 16px}
html[data-ui-theme] body :is(.tabbtn.sel,.metric-group-tabs button.active){
  background:var(--accent);border-color:var(--accent);color:#fff}
html[data-ui-theme] :is(.badge.on,.pill.ok){background:var(--mint);color:var(--ok);border-color:var(--c1l)}
html[data-ui-theme] .seo-copy{background:var(--surface);border-radius:16px;padding:20px}

@media(max-width:1100px){
  html[data-ui-theme] .home-page .energy-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:720px){
  html[data-ui-theme] .home-page .energy-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  html[data-ui-theme] .home-page .health-index-link{grid-column:1/-1}
  html[data-ui-theme] .start-steps{grid-template-columns:1fr}
  html[data-ui-theme] .paper-support-links{grid-template-columns:1fr}
}