:root{--navy:#102f42;--teal:#166d75;--teal-2:#0d5f62;--tint:#e6f4f1;
  --surface:#fcfcfb;--page:#f4f7f8;--ink:#0b0b0b;--ink-2:#52514e;--muted:#898781;--grid:#e1e0d9;--axis:#c3c2b7;--line:rgba(11,11,11,.10);
  --s1:#2a78d6;--crit:#d03b3b;--serious:#ec835a;--warn:#fab219;--good:#0ca30c;--going:#2a78d6;
  font-family:Prompt,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--page);color-scheme:light}
/* โหมดมืด: เปิดเองจากปุ่มธีม (ค่าเริ่มต้นสว่าง ไม่ตามเครื่อง) */
:root[data-theme="dark"]{color-scheme:dark;--surface:#1a1a19;--page:#0d0d0d;--ink:#fff;--ink-2:#c3c2b7;--muted:#898781;--grid:#2c2c2a;--axis:#383835;--line:rgba(255,255,255,.10);--s1:#3987e5;--going:#3987e5;--tint:#173a3c}
:root[data-theme="dark"]{color-scheme:dark;--surface:#1a1a19;--page:#0d0d0d;--ink:#fff;--ink-2:#c3c2b7;--grid:#2c2c2a;--axis:#383835;--line:rgba(255,255,255,.10);--s1:#3987e5;--going:#3987e5;--tint:#173a3c}
*{box-sizing:border-box}body{margin:0;background:var(--page)}[hidden]{display:none!important}
button,input{font:inherit}button{cursor:pointer}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:10px;padding:10px 16px;font-weight:600;font-size:15px;min-height:44px;text-decoration:none}
.btn.primary{background:var(--teal);color:#fff}.btn.sm{min-height:36px;padding:6px 12px;font-size:14px}
.btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px #ffffff55}
/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(160deg,#102f42,#166d75)}
.login-card{width:min(400px,100%);background:#fff;color:#173746;border-radius:20px;padding:28px 24px;display:grid;gap:14px}
.login-card img{width:110px;height:auto}.login-card h1{margin:0;font-size:24px}.login-card p{margin:0;color:#68838f;font-size:14px;line-height:1.6}
.fld{display:grid;gap:6px;font-weight:600;font-size:14px}.fld input{border:1px solid #dce6e9;border-radius:10px;min-height:50px;padding:10px 12px;font-size:16px}
.chk{display:flex;gap:8px;align-items:center;font-size:14px;color:#68838f}.err{color:#c62828!important;min-height:1.2em}.back{color:var(--teal);font-weight:600;text-decoration:none;font-size:14px}
/* top */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;background:var(--navy);color:#fff;padding:10px clamp(14px,3vw,32px)}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-size:18px;font-weight:600}.brand img{background:#fff;border-radius:8px;padding:3px 6px;height:36px;width:auto}.brand b{color:#9fe0d3}
.tabs{display:flex;gap:4px;margin-left:8px}.tabs a{color:#bad0d9;text-decoration:none;padding:8px 12px;border-radius:9px;font-weight:600;font-size:15px}.tabs a[aria-current=page]{background:#ffffff1f;color:#fff}
.top-r{margin-left:auto;display:flex;align-items:center;gap:8px}.sync{font-size:13px;color:#a4c8d3}
.wrap{max-width:1400px;margin:0 auto;padding:18px clamp(14px,3vw,32px) 60px}
/* filters */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:14px}
.f-lab{font-size:14px;color:var(--ink-2);margin-right:4px}
.filters button{border:0;background:var(--surface);color:var(--ink);border-radius:999px;padding:7px 14px;font-weight:600;font-size:14px;min-height:38px;box-shadow:inset 0 0 0 1px var(--line)}
.filters button[aria-pressed=true]{background:var(--teal);color:#fff;box-shadow:none}
.f-note{font-size:13px;color:var(--muted);margin-left:6px}
main.loading .card,main.loading .kpis{opacity:.55;transition:opacity .2s}
/* kpis */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.kpi{background:var(--surface);border-radius:16px;padding:14px 16px;box-shadow:inset 0 0 0 1px var(--line)}
.kpi b{display:block;font-size:30px;line-height:1.15;font-weight:700}.kpi span{display:block;font-size:13.5px;color:var(--ink-2);margin-top:2px}
.kpi small{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);margin-top:6px}
.kpi i{width:10px;height:10px;border-radius:2px;flex:none}
/* grid & cards */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.card{background:var(--surface);border-radius:16px;padding:16px 18px;box-shadow:inset 0 0 0 1px var(--line);min-width:0}
.card.span2{grid-column:1/-1}
.card h2{margin:0;font-size:17px}.sub{margin:2px 0 10px;font-size:13px;color:var(--ink-2)}
.chart{position:relative;min-height:60px}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart text{font-family:inherit}
.empty{color:var(--muted);font-size:14px;padding:16px 0}
details{margin-top:8px}summary{cursor:pointer;font-size:13px;color:var(--ink-2);padding:6px 0}
.dt{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:4px}.dt th,.dt td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--grid)}.dt td.n,.dt th.n{text-align:right;font-variant-numeric:tabular-nums}
/* horizontal bars (HTML) */
.hb{display:grid;gap:8px}
.hb-row{display:grid;grid-template-columns:minmax(90px,38%) 1fr;align-items:center;gap:10px;border-radius:8px;padding:2px 4px;outline:none}
.hb-row:hover,.hb-row:focus-visible{background:var(--tint)}
.hb-lab{font-size:14px;color:var(--ink);display:flex;align-items:center;gap:7px;min-width:0}.hb-lab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb-lab i{width:10px;height:10px;border-radius:2px;flex:none}
.hb-track{display:flex;align-items:center;gap:8px;min-width:0}
.hb-bar{height:16px;border-radius:0 4px 4px 0;background:var(--s1);min-width:2px;flex:none}
.hb-val{font-size:13.5px;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
/* lists */
.tlist{width:100%;border-collapse:collapse;font-size:14px}.tlist th{font-size:12.5px;color:var(--muted);font-weight:600;text-align:left;padding:6px 8px;border-bottom:1px solid var(--grid)}
.tlist td{padding:8px;border-bottom:1px solid var(--grid);vertical-align:top}.tlist td.n{text-align:right;font-variant-numeric:tabular-nums}
.tlist a{color:var(--teal);font-weight:600;text-decoration:none}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--ink-2)}.tag i{width:9px;height:9px;border-radius:2px}
/* tooltip */
.tip{position:fixed;z-index:50;pointer-events:none;background:var(--surface);color:var(--ink);border-radius:10px;padding:8px 10px;font-size:13px;box-shadow:0 6px 20px rgba(0,0,0,.18),inset 0 0 0 1px var(--line);max-width:240px}
.tip b{display:block;font-size:16px}.tip span{color:var(--ink-2)}
@media(max-width:900px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.grid{grid-template-columns:1fr}.tabs a{padding:6px 8px;font-size:14px}.brand span{display:none}.sync{display:none}}
@media(max-width:480px){.kpi b{font-size:24px}.top{gap:8px}.hb-row{grid-template-columns:minmax(80px,42%) 1fr}.tlist .hide-s{display:none}}
.tlist th.n{text-align:right}
.kpis{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:900px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* แท็บหลังบ้าน 4 หน้า: มือถือเลื่อนด้านข้างได้ */
.tabs{overflow-x:auto;scrollbar-width:none;min-width:0;flex:1 1 auto}.tabs::-webkit-scrollbar{display:none}.tabs a{flex:none}

/* สต็อก */
.stock-sec{grid-column:1/-1;margin-top:10px}
.sec-h{margin:4px 0 10px;font-size:20px}.sec-h small{font-size:13px;font-weight:400;color:var(--muted);margin-left:8px}
.tlist .dot{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}

/* แผนที่ + สถานะโหลด */
.status{background:#fff7e8;color:#7a4b12;border-radius:12px;padding:10px 14px;font-size:14px;margin:0 0 12px}
.linkish{background:none;border:0;color:var(--teal);font-weight:700;cursor:pointer;font:inherit;padding:0}
.mapcard{margin-bottom:12px}.map-h{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:flex-start}
.map-tg{display:flex;gap:14px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-2)}.map-tg label{display:flex;gap:6px;align-items:center}
.dmap{height:440px;border-radius:12px;overflow:hidden;background:#e8eef0;margin-top:6px}
.map-leg{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--ink-2);margin-top:8px}.map-leg span{display:inline-flex;align-items:center;gap:6px}.map-leg i{width:11px;height:11px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.leaflet-popup-content{font-family:inherit;font-size:13.5px;line-height:1.5;color:#173746}.leaflet-popup-content a{color:#166d75;font-weight:600}
@media(max-width:900px){.dmap{height:340px}}

@media(max-width:600px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.kpi{padding:8px 10px;border-radius:12px}.kpi b{font-size:20px}.kpi span{font-size:12px;line-height:1.3}.kpi small{font-size:11px;margin-top:3px}.map-tg{font-size:12.5px;gap:10px}}
/* ---- แผนที่เต็มจอ ---- */
.dmap-wrap{position:relative;isolation:isolate}
.fs-bar{position:absolute;top:10px;right:10px;z-index:1000;display:flex;gap:8px}
.fs-btn{width:44px;height:44px;border-radius:12px;border:0;background:#fff;color:#102f42;font-size:22px;line-height:1;box-shadow:0 1px 5px rgba(0,0,0,.3);cursor:pointer;display:grid;place-items:center;padding:0}
.fs-btn:active{background:#eef4f5}.fs-lay{display:none}
.mapcard.fs{position:fixed;inset:0;z-index:3000;margin:0;border-radius:0;padding:0;border:0;background:#e8eef0}
.mapcard.fs .map-h>div:first-child{display:none}
.mapcard.fs .dmap-wrap,.mapcard.fs .dmap{height:100vh;height:100dvh;border-radius:0;margin:0}
.mapcard.fs .fs-bar{top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right))}
.mapcard.fs .fs-lay{display:grid}.mapcard.fs .fs-lay[aria-expanded=true]{background:#166d75;color:#fff}
.mapcard.fs .map-tg,.mapcard.fs .map-leg{display:none}
.mapcard.fs.lay .map-h{position:absolute;z-index:1001;top:calc(max(10px,env(safe-area-inset-top)) + 54px);right:max(10px,env(safe-area-inset-right));display:block}
.mapcard.fs.lay .map-tg{display:grid;gap:10px;background:#fff;color:#102f42;border-radius:12px;padding:12px 14px;box-shadow:0 2px 10px rgba(0,0,0,.25);font-size:14.5px;max-width:min(300px,calc(100vw - 20px))}
.mapcard.fs.lay .map-tg label{min-height:28px}
.mapcard.fs.lay .map-leg{display:flex;position:absolute;z-index:1001;left:10px;right:10px;bottom:max(24px,calc(env(safe-area-inset-bottom) + 18px));background:rgba(255,255,255,.95);color:#102f42;border-radius:12px;padding:8px 12px;margin:0;box-shadow:0 2px 10px rgba(0,0,0,.25);font-size:12.5px}
@media(pointer:coarse){.mapcard.fs .leaflet-control-zoom{display:none}}
.mapcard.fs .leaflet-control-attribution{font-size:10px}
body.map-fs{overflow:hidden}
a.kpi-cov{text-decoration:none;color:inherit;box-shadow:inset 3px 0 0 #7b3fc4}a.kpi-cov:active{opacity:.8}
.fs-btn.wide{width:auto;padding:0 14px;font-size:15px;font-weight:700;font-family:inherit;gap:6px;white-space:nowrap}

/* ===== แผนที่หน้าตาแบบหน้าเว็บหลัก (umplus-help): แผนที่เต็มพื้นที่ + ปุ่มลอย + คำอธิบายสี + หมุดหยดน้ำ ===== */
.mx-legend{position:absolute;z-index:500;left:12px;top:12px;background:#fff;border-radius:14px;padding:8px 12px;font-size:12.5px;font-weight:600;color:#161B3D;display:grid;gap:3px;box-shadow:0 8px 28px rgba(22,27,61,.12),0 1px 3px rgba(22,27,61,.08)}
.mx-legend[hidden]{display:none}.mx-legend span{display:flex;align-items:center;gap:8px}
.mx-legend i{width:12px;height:12px;border-radius:50%;flex:none;border:2px solid #fff;box-shadow:0 0 0 1px #D9DEF3}
.mx-legend i.ln{width:16px;height:5px;border-radius:3px;border:0;box-shadow:none}.mx-legend i.sq{border-radius:3px}
.mx-legend .lg-sep{height:1px;background:#E3E6EF;margin:3px 0}
.lp.danger{background:#E5383B}.lp.urgent{background:#f57c00}.lp.open{background:#2D45C8}.lp.going{background:#7B8CEB}.lp.done{background:#2E9E57}
.mx-fabs{position:absolute;z-index:500;right:12px;top:12px;display:grid;gap:10px}
.fab{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;border:0;background:#fff;color:#1F2A5E;padding:0;cursor:pointer;box-shadow:0 8px 28px rgba(22,27,61,.12),0 1px 3px rgba(22,27,61,.08)}
.fab:hover{background:#f4f6fb}.fab.on{background:#2D45C8;color:#fff}.fab.busy svg{animation:mxspin 1s linear infinite}
@keyframes mxspin{to{transform:rotate(360deg)}}
.layer-menu{position:absolute;z-index:600;right:68px;top:12px;background:#fff;border-radius:18px;padding:6px;width:250px;max-height:calc(100% - 24px);overflow:auto;display:grid;gap:2px;align-content:start;box-shadow:0 8px 28px rgba(22,27,61,.16),0 1px 3px rgba(22,27,61,.08)}
.layer-menu[hidden]{display:none}
.lm-bases{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.lm-bases button{min-height:40px;border:0;border-radius:12px;background:#F2F3F7;font:inherit;font-size:14px;font-weight:700;color:#161B3D;cursor:pointer}
.lm-bases button[aria-pressed=true]{background:#2D45C8;color:#fff}
.layer-menu hr{border:0;border-top:1px solid #D9DEF3;margin:4px 6px}
.layer-menu .tg{display:flex;align-items:center;gap:10px;min-height:42px;padding:0 10px;font-size:14px;font-weight:600;color:#161B3D;cursor:pointer;border-radius:10px}
.layer-menu .tg:hover{background:#F2F3F7}.layer-menu .tg input{width:20px;height:20px;accent-color:#2D45C8;flex:none}
.flood-key{display:grid;gap:3px;padding:0 12px 6px 40px;font-size:12px;color:#5a659f}.flood-key span{display:flex;align-items:center;gap:7px}
.flood-key i{width:16px;height:5px;border-radius:3px;flex:none}.flood-key i.sq{width:11px;height:11px}
.lm-src{margin:4px 10px 6px;font-size:11.5px;color:#5B6386}
.leaflet-div-icon.um-pin,.leaflet-div-icon.me-dot{background:none;border:0}
.um-pin span{display:block;width:26px;height:26px;border:3px solid #fff;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 3px 8px rgba(15,33,136,.4);margin:2px;position:relative}
.um-pin span::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:#fff;left:6px;top:6px}
.um-pin.open span{background:#2D45C8}.um-pin.going span{background:#7B8CEB}.um-pin.done span{background:#2E9E57}.um-pin.urgent span{background:#f57c00}
.um-pin.danger span{background:#E5383B;animation:pinpulse 1.2s ease-in-out infinite}
@keyframes pinpulse{0%,100%{box-shadow:0 0 0 0 rgba(211,47,47,.55),0 3px 8px rgba(15,33,136,.4)}50%{box-shadow:0 0 0 10px rgba(211,47,47,0),0 3px 8px rgba(15,33,136,.4)}}
@media(prefers-reduced-motion:reduce){.um-pin.danger span{animation:none}}
.me-dot span{display:block;width:18px;height:18px;border-radius:50%;background:#2D45C8;border:3px solid #fff;box-shadow:0 0 0 6px rgba(45,69,200,.25)}
/* แดชบอร์ด: ตำแหน่งบนการ์ดแผนที่ */
.dmap{height:480px}.dmap-wrap .mx-legend[hidden],.mx-legend span[hidden]{display:none}
.map-note{font-size:12.5px;color:var(--muted);margin:6px 2px 0}.map-note:empty{display:none}
.mapcard.fs .mx-legend{top:max(12px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left))}
.mapcard.fs .mx-fabs{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}
@media(max-width:900px){.dmap{height:380px}.mx-legend{font-size:11.5px;padding:6px 10px;left:10px;top:10px}.mx-legend .lg-sep,.mx-legend .lg-x{display:none}.mx-fabs{right:10px;top:10px;gap:8px}.fab{width:42px;height:42px;border-radius:12px}.layer-menu{right:60px;top:10px;width:230px}}

/* เคสจากโซเชียลรอคัด (วงแหวนสีตามระดับ) + ทีมที่แชร์ตำแหน่ง */
.lead-pin span{display:block;width:20px;height:20px;border-radius:50%;border:2.5px dashed #fab219;background:radial-gradient(circle,#fab219 0 4px,#fff 5px);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.lead-pin.u3 span{border-color:#d03b3b;background:radial-gradient(circle,#d03b3b 0 4px,#fff 5px)}.lead-pin.u2 span{border-color:#ec835a;background:radial-gradient(circle,#ec835a 0 4px,#fff 5px)}
.lead-lg{display:inline-block;width:10px;height:10px;border-radius:50%;border:2px dashed #d03b3b;background:#fff}
.live-tm span{display:inline-block;white-space:nowrap;background:#fff;border:2px solid #2E9E57;color:#161B3D;border-radius:99px;padding:1px 8px;font-size:11.5px;font-weight:600;box-shadow:0 2px 6px rgba(0,0,0,.25);transform:translate(-12px,-12px)}


/* ---------- ภาพรวมจาก Help Me (ส่วนบนสุดของแดชบอร์ด) ---------- */
.hm-hero{display:grid;gap:14px;margin-bottom:22px}
.hm-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.hm-eyebrow{margin:0;display:flex;align-items:center;gap:6px;color:var(--primary);font-weight:700;font-size:13px}
.hm-head h2{margin:2px 0 0;font-size:26px;letter-spacing:-.01em}
.hm-upd{margin:2px 0 0;color:var(--muted);font-size:13px}
.hm-link{display:inline-flex;align-items:center;gap:6px;background:#fff;border-radius:999px;padding:9px 16px;font-weight:600;font-size:14px;color:var(--primary);text-decoration:none;box-shadow:0 1px 2px rgba(22,27,61,.06),0 8px 24px rgba(22,27,61,.06)}
.hm-link:hover{background:var(--tint)}
.hm-bar{background:#fff;border-radius:20px;padding:14px 16px;box-shadow:0 1px 2px rgba(22,27,61,.04),0 8px 24px rgba(22,27,61,.06);display:grid;gap:10px}
.hm-seg{display:flex;height:12px;border-radius:999px;overflow:hidden;gap:3px;background:var(--bg)}
.hm-seg span{min-width:6px}
.s-open{background:#E5383B}.s-going{background:#7B8CEB}.s-done{background:#2E9E57}
.hm-legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;color:var(--muted)}
.hm-legend span{display:inline-flex;align-items:center;gap:6px}.hm-legend b{color:var(--ink)}.hm-legend small{color:var(--muted)}
.hm-legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
.hm-legend.sm{font-size:12.5px;justify-content:center}
.hm-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.hm-tile{--c:var(--primary);--t:var(--tint);background:#fff;border-radius:22px;padding:16px 16px 14px;display:grid;gap:2px;position:relative;overflow:hidden;box-shadow:0 1px 2px rgba(22,27,61,.04),0 8px 24px rgba(22,27,61,.06)}
.hm-tile::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:var(--c);opacity:.85}
.hm-ic{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--t);color:var(--c);margin-bottom:6px}
.hm-ic .ic{width:20px;height:20px}
.hm-l{font-size:13.5px;color:var(--muted);font-weight:600}
.hm-v{font-size:34px;line-height:1.1;font-weight:700;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.hm-tile small{font-size:12.5px;color:var(--muted)}
.t-red{--c:#E5383B;--t:#FDECEC}.t-red .hm-v{color:#E5383B}
.t-blue{--c:#5B6FE0;--t:#E9ECFB}.t-green{--c:#2E9E57;--t:#E3F5E9}.t-green .hm-v{color:#2E9E57}
.t-navy{--c:#1F2A5E;--t:#E6E8F2}.t-orange{--c:#E8710A;--t:#FFF1E3}.t-orange .hm-v{color:#C25E06}
.hm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hm-card{background:#fff;border-radius:22px;padding:16px 18px;box-shadow:0 1px 2px rgba(22,27,61,.04),0 8px 24px rgba(22,27,61,.06);min-width:0}
.hm-card.span2{grid-column:span 2}
.hm-card h3{margin:0 0 10px;font-size:15.5px}
.hm-days svg{width:100%;height:auto;display:block}.hm-days text{font-size:10.5px;fill:var(--muted)}
.b-new{fill:#2D45C8;background:#2D45C8}.b-done{fill:#2E9E57;background:#2E9E57}
.hm-speed{display:grid;gap:10px}
.hm-metric{display:grid;background:var(--bg);border-radius:16px;padding:10px 12px}.hm-metric span{font-size:12.5px;color:var(--muted)}.hm-metric b{font-size:24px;line-height:1.2}.hm-metric small{font-size:12px;color:var(--muted)}
.hm-waits{display:grid;grid-template-columns:auto repeat(3,1fr);align-items:center;gap:8px;background:var(--bg);border-radius:16px;padding:10px 12px}
.hm-waits>span{font-size:12.5px;color:var(--muted);grid-column:1/-1}.hm-waits div{display:grid;text-align:center}.hm-waits b{font-size:22px}.hm-waits small{font-size:11.5px;color:var(--muted)}
.hm-waits b.warn{color:#C25E06}.hm-waits b.bad{color:#E5383B}
.hm-table .tlist{width:100%}
.dash-sec{display:flex;align-items:center;gap:8px;margin:6px 0 10px}
@media(max-width:1100px){.hm-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}.hm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.hm-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.hm-grid{grid-template-columns:1fr}.hm-card.span2{grid-column:auto}.hm-v{font-size:28px}.hm-head h2{font-size:22px}}
/* โหมดมืด */
html.dash[data-theme="dark"] .hm-tile,html.dash[data-theme="dark"] .hm-card,html.dash[data-theme="dark"] .hm-bar,html.dash[data-theme="dark"] .hm-link{background:var(--surface);box-shadow:0 8px 24px rgba(0,0,0,.25)}
html.dash[data-theme="dark"] .hm-metric,html.dash[data-theme="dark"] .hm-waits,html.dash[data-theme="dark"] .hm-seg{background:rgba(255,255,255,.06)}
html.dash[data-theme="dark"] .hm-v{color:var(--ink)}html.dash[data-theme="dark"] .t-red .hm-v{color:#FF6B6E}html.dash[data-theme="dark"] .t-green .hm-v{color:#4FD083}html.dash[data-theme="dark"] .t-orange .hm-v{color:#FFA24D}
html.dash[data-theme="dark"] .hm-ic{background:rgba(255,255,255,.08)}
.hm-grid{align-items:start}

/* ตัวเลข Help Me อยู่ในส่วน "เคสในระบบ Helpme+" ใช้การ์ดแบบเดียวกัน · ป้าย Help Me บอกแหล่งข้อมูล */
.hm-src{margin:-4px 0 8px;font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center}.hm-src a{color:var(--primary);font-weight:600;text-decoration:none;display:inline-flex;gap:4px;align-items:center}
.hm-tag{display:inline-block;font-size:11px;font-weight:700;color:var(--primary);background:var(--tint);border-radius:999px;padding:1px 8px;vertical-align:middle;margin-left:4px}
.kpi .hm-tag{display:inline-block;font-size:10.5px;margin:0 0 0 4px;color:var(--primary)}
.kpi.hm-k i{background:var(--c)}.kpi.t-red b{color:#E5383B}.kpi.t-green b{color:#2E9E57}.kpi.t-orange b{color:#C25E06}
.card .hm-bar{background:none;box-shadow:none;padding:0}
html.dash[data-theme="dark"] .card .hm-bar{background:none}html.dash[data-theme="dark"] .hm-tag{background:rgba(255,255,255,.08)}
html.dash[data-theme="dark"] .kpi.t-red b{color:#FF6B6E}html.dash[data-theme="dark"] .kpi.t-green b{color:#4FD083}