/* Layout: dark navy command band on top, quiet cool-grey canvas below.
   Volt yellow is the single accent: brand mark, active tab, today's bar. */
:root{
  --bg:#F2F5F9; --surface:#FFFFFF; --surface-2:#E8EDF4; --ink:#0E1B2E; --ink-2:#51627A; --line:#D3DBE6;
  --band:#0F2547; --band-ink:#EAF0FA; --band-ink-2:#9FB2D0;
  --primary:#12306B; --on-primary:#FFFFFF; --volt:#FFC83D; --bar:#2A5BB5;
  --ok:#12805C; --info:#1F6FEB; --warn:#946000; --bad:#B42318;
  --font-display:'Prompt','Sarabun',system-ui,sans-serif;
  --font-body:'Sarabun','Noto Sans Thai',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A111D; --surface:#111B2C; --surface-2:#18253A; --ink:#E7EDF7; --ink-2:#93A4BE; --line:#24344D;
    --band:#060B14; --band-ink:#EAF0FA; --band-ink-2:#8FA3C4;
    --primary:#FFC83D; --on-primary:#0A111D; --volt:#FFC83D; --bar:#6F9DF0;
    --ok:#3CCB97; --info:#6AA6FF; --warn:#F2B24A; --bad:#FF7A6B; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0A111D; --surface:#111B2C; --surface-2:#18253A; --ink:#E7EDF7; --ink-2:#93A4BE; --line:#24344D;
  --band:#060B14; --band-ink:#EAF0FA; --band-ink-2:#8FA3C4;
  --primary:#FFC83D; --on-primary:#0A111D; --volt:#FFC83D; --bar:#6F9DF0;
  --ok:#3CCB97; --info:#6AA6FF; --warn:#F2B24A; --bad:#FF7A6B; color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:15px;line-height:1.55}
h1,h2,h3{font-family:var(--font-display);font-weight:600;margin:0;text-wrap:balance}
h1{font-size:22px} h2{font-size:16px} h3{font-size:14px}
p{margin:0}
.muted{color:var(--ink-2)}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.band{background:var(--band);color:var(--band-ink)}
.band .wrap{display:flex;align-items:center;gap:8px 20px;flex-wrap:wrap;padding-block:10px 0}
.brand{display:flex;align-items:center;gap:10px}
.mark{width:34px;height:34px;border-radius:6px;background:var(--volt);display:grid;place-items:center;flex:none}
.brand b{display:block;font-family:var(--font-display);font-size:19px;font-weight:600;letter-spacing:.06em;line-height:1.2}
.brand small{display:block;font-size:12px;color:var(--band-ink-2);line-height:1.3}
.clock{margin-left:auto;font-family:var(--font-mono);font-size:13px;color:var(--band-ink-2);font-variant-numeric:tabular-nums}
.nav{display:flex;gap:2px;overflow-x:auto;flex:1 1 100%;order:3;scrollbar-width:none}
.nav a{padding:10px 14px;color:var(--band-ink-2);text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap;font-family:var(--font-display);font-size:14px;font-weight:500}
.nav a:hover{color:#fff}
.nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--volt)}
@media (min-width:860px){.nav{flex:0 1 auto;order:0;margin-left:12px;align-self:stretch;align-items:flex-end}.band .wrap{padding-block:0}.brand{padding-block:10px}.clock{padding-block:10px}}
main{padding-bottom:24px}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-block:22px 14px}
.head p{margin-top:2px;max-width:62ch}
.stack{display:flex;flex-direction:column;gap:16px;min-width:0}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:16px;align-items:start}
.grid-eq{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px}
@media (max-width:900px){.grid2{grid-template-columns:minmax(0,1fr)}}
.sticky{position:sticky;top:12px}
@media (max-width:900px){.sticky{position:static}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:16px;min-width:0}
.card>h2{margin-bottom:10px}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));background:var(--surface);border:1px solid var(--line);border-radius:8px}
.strip>div{padding:14px 16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 -1px -1px 0}
.strip dt{font-size:12.5px;color:var(--ink-2)}
.strip dd{margin:2px 0 0;font-family:var(--font-mono);font-size:24px;font-weight:500;font-variant-numeric:tabular-nums}
.strip dd small{font-family:var(--font-body);font-size:13px;color:var(--ink-2);font-weight:400}
dl,dd{margin:0}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.f{display:flex;flex-direction:column;gap:4px;min-width:0}
.f>span{font-size:12.5px;color:var(--ink-2)}
input,select,textarea,button{font:inherit;color:inherit}
input,select,textarea{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:8px 10px;min-width:0;width:100%}
input[type=number]{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--info);outline-offset:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border-radius:6px;border:1px solid var(--line);background:var(--surface-2);cursor:pointer;font-weight:500;white-space:nowrap}
.btn:hover{border-color:var(--ink-2)}
.btn.primary{background:var(--primary);color:var(--on-primary);border-color:transparent}
.btn.primary:hover{filter:brightness(1.12)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--bad)}
.btn.sm{padding:4px 10px;font-size:13px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pill{--c:var(--ink-2);display:inline-flex;align-items:center;gap:6px;padding:1px 10px;border-radius:999px;font-size:12.5px;font-weight:500;color:var(--c);background:color-mix(in srgb,var(--c) 13%,var(--surface));border:1px solid color-mix(in srgb,var(--c) 35%,transparent);white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
.st-ok{--c:var(--ok)} .st-charging{--c:var(--info)} .st-idle{--c:var(--warn)} .st-maint{--c:var(--bad)}
.tw{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-weight:500;font-size:12.5px;color:var(--ink-2);padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl .n{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tr[data-act]{cursor:pointer}
.tbl tr[data-act]:hover td,.tbl tr.sel td{background:var(--surface-2)}
.tbl small{display:block;color:var(--ink-2);font-size:12.5px}
.linkbtn{background:none;border:0;padding:0;cursor:pointer;text-align:left;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.tile{border:1px solid var(--line);border-radius:6px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;min-width:0}
.tile b{font-family:var(--font-display);font-weight:600}
.tile .sub{font-size:12.5px;color:var(--ink-2)}
.tile .live{font-family:var(--font-mono);font-size:13px;font-variant-numeric:tabular-nums}
.st-title{display:flex;align-items:baseline;gap:8px;margin:14px 0 8px;flex-wrap:wrap}
.crow{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;align-items:end;padding:12px 0;border-top:1px solid var(--line)}
.rrow{display:grid;grid-template-columns:minmax(120px,1.4fr) 100px 100px minmax(110px,1fr) 100px auto;gap:8px;align-items:end;padding:8px 0;border-top:1px solid var(--line)}
@media (max-width:720px){.rrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tlist{display:flex;flex-direction:column;gap:4px}
.tlist button{display:flex;justify-content:space-between;gap:10px;align-items:baseline;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:8px 12px;cursor:pointer}
.tlist button[aria-pressed="true"]{border-color:var(--primary);box-shadow:inset 3px 0 0 var(--volt);background:var(--surface-2)}
.tlist small{color:var(--ink-2);font-family:var(--font-mono);font-size:12.5px;white-space:nowrap}
.rcpt h3{font-size:15px}
.rcpt .meta{font-size:13px;color:var(--ink-2);margin:4px 0 10px;display:grid;gap:1px}
.rcpt table{width:100%;border-collapse:collapse;font-size:14px}
.rcpt td{padding:6px 0;border-bottom:1px dashed var(--line);vertical-align:top}
.rcpt td.n{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:12px}
.rcpt td.n.neg{color:var(--ok)}
.rcpt small{display:block;color:var(--ink-2);font-size:12.5px}
.rcpt .tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;font-family:var(--font-display);font-weight:600}
.rcpt .tot span:last-child{font-family:var(--font-mono);font-size:26px;font-weight:500;font-variant-numeric:tabular-nums}
.rcpt .note{font-size:12.5px;color:var(--ink-2);margin-top:6px}
.acards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px}
.acard{border:1px solid var(--line);border-radius:8px;padding:14px;background:var(--surface);display:flex;flex-direction:column;gap:10px;min-width:0}
.acard header{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap}
.meter{height:8px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.meter i{display:block;height:100%;background:var(--info);width:0}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.kv dt{font-size:12.5px;color:var(--ink-2)}
.kv dd{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.bar{display:block;height:6px;background:var(--surface-2);border-radius:3px;margin-top:4px;min-width:60px}
.bar i{display:block;height:100%;background:var(--bar);border-radius:3px}
details>summary{cursor:pointer;font-family:var(--font-display);font-weight:500}
details[open]>summary{margin-bottom:12px}
.banner{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;border:1px dashed var(--line);border-radius:8px;padding:10px 14px;margin-bottom:16px;background:var(--surface)}
.chart text{fill:var(--ink-2);font-family:var(--font-body);font-size:12px}
.chart .val{fill:var(--ink);font-family:var(--font-mono);font-size:11px}
.chart line{stroke:var(--line)}
footer{padding-block:20px 32px;font-size:13px;color:var(--ink-2)}
footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
#toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:6px;font-size:14px;max-width:min(92vw,460px);z-index:20;box-shadow:0 4px 16px rgba(0,0,0,.25)}
#copybox{position:fixed;left:0;right:0;bottom:0;padding:12px max(16px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:var(--surface);border-top:1px solid var(--line);z-index:15;display:flex;gap:10px;align-items:flex-start}
#copybox textarea{height:96px;font-family:var(--font-mono);font-size:12.5px}
@media (prefers-reduced-motion:no-preference){.meter i{transition:width .9s linear}}
.conn-bar{background:color-mix(in srgb,var(--bad) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--bad) 40%,transparent);color:var(--ink);border-radius:8px;padding:8px 14px;margin-top:12px}
.st-online{--c:var(--ok)} .st-offline{--c:var(--ink-2)} .st-fault{--c:var(--bad)}
.cpgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px}
.url{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.url code,.mono{font-family:var(--font-mono);font-size:13px;background:var(--surface-2);padding:2px 8px;border-radius:4px;overflow-wrap:anywhere}
.logbox{max-height:300px;overflow:auto;background:var(--surface-2);border-radius:6px;padding:8px 10px;font-family:var(--font-mono);font-size:12px;line-height:1.5}
.logbox div{white-space:pre-wrap;overflow-wrap:anywhere}
.logbox .in{color:var(--info)} .logbox .out{color:var(--ok)} .logbox .sys{color:var(--warn)}
.help{font-size:13px;color:var(--ink-2)}
.chk{display:flex;gap:8px;align-items:flex-start}
.chk input{width:auto;margin-top:5px}
.rrow.six{grid-template-columns:minmax(110px,1.2fr) minmax(110px,1fr) minmax(130px,1fr) minmax(100px,.8fr) 120px 110px auto}
@media (max-width:720px){.rrow.six{grid-template-columns:repeat(2,minmax(0,1fr))}}
[hidden]{display:none!important}
img{max-width:100%}
/* ---------- หน้าล็อกอิน + บัญชีผู้ดูแล ---------- */
.login-page{min-height:100vh;display:flex;flex-direction:column}
.login-page .band .wrap{padding-block:10px}
.login-main{flex:1;display:grid;place-items:start center;padding:48px 16px}
.login-card{width:min(100%,380px);display:flex;flex-direction:column;gap:14px;padding:24px}
.login-card h1{font-size:20px}
.login-card .muted{margin-top:-8px;font-size:14px}
.login-btn{padding:10px 14px;margin-top:2px}
.form-err{border:1px solid color-mix(in srgb,var(--bad) 45%,transparent);background:color-mix(in srgb,var(--bad) 10%,var(--surface));color:var(--ink);border-radius:6px;padding:8px 12px;font-size:14px}
.help summary{font-family:var(--font-body);font-weight:400;font-size:13px;color:var(--ink-2)}
.help p+p{margin-top:6px}
.who{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--band-ink-2)}
.who b{color:var(--band-ink);font-weight:500}
.who .btn{background:transparent;border-color:color-mix(in srgb,var(--band-ink-2) 45%,transparent);color:var(--band-ink)}
.who .btn:hover{border-color:var(--band-ink)}
@media (min-width:860px){.who{padding-block:10px}}
.pw-bar{background:color-mix(in srgb,var(--warn) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);border-radius:8px;padding:8px 14px;margin-top:12px;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.pw-form{display:flex;flex-direction:column;gap:12px}
.acct-grid{display:grid;grid-template-columns:minmax(0,460px) minmax(0,380px);gap:16px;align-items:start}
@media (max-width:900px){.acct-grid{grid-template-columns:minmax(0,1fr)}}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px}
.facts dt{color:var(--ink-2)}