/* ============================================================
   GVMS Parking — ธีมกลาง v3 "เรียบหรู มาตรฐาน"
   ขาว/ดำ/เทาอุ่น + แดงเข้ม #C8102E จุดเดียว · ไม่มีเงา ใช้เส้นบาง 1px และช่องว่าง
   ============================================================ */
:root{
  --bg:#F4F4F2;--card:#FFFFFF;--card2:#FAFAF8;
  --ink:#111111;--ink2:#3C3C3C;--muted:#6B6B6B;--faint:#9A9A9A;--line:#E4E4E0;--line2:#EEEEEA;--rule:#111111;
  --accent:#C8102E;--accent-soft:#FBEAED;--green:#1E9E5C;--green-soft:#E6F4EC;--amber:#B8860B;--amber-soft:#FBF3DC;--red:#C8102E;--red-soft:#FBEAED;
  --navy:#102C3C;--brand:#20A5D7;--brand2:#92D5BD;--brand3:#EDFFA3;--blue:#111111;--blue-ink:#111111;--blue-soft:#EFEFEC;--green-ink:#146B39;--amber-ink:#6E5200;--red-ink:#8E0B21;
  --font:"IBM Plex Sans Thai","Noto Sans Thai",system-ui,sans-serif;--display:"IBM Plex Sans Thai","Noto Sans Thai",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --r:6px;--r-sm:4px;--sh:none;--sh-lg:none;
}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14.5px/1.55 var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--ink)}a:hover{color:var(--accent)}button,input,select,textarea{font:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;margin:0;line-height:1.15;letter-spacing:-.015em}
h1{font-size:34px}h2{font-size:22px}h3{font-size:15px;font-weight:500}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500}
.muted{color:var(--muted)}.faint{color:var(--faint)}.small{font-size:.86rem}.xs{font-size:.76rem}.mono{font-family:var(--mono)}.right{text-align:right}.center{text-align:center}.num{font-variant-numeric:tabular-nums}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.sp{flex:1}.stack{display:flex;flex-direction:column;gap:8px}
.grid{display:grid;gap:24px}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.g2,.g3,.g4{grid-template-columns:1fr}}
.wrap{padding:28px 32px 48px;max-width:1480px;margin:0 auto}.wrap.full{max-width:none}
@media(max-width:700px){.wrap{padding:16px}}

/* ---------- top bar (หน้าจอที่ยังใช้ header แนวนอน) ---------- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;height:58px;padding:0 28px;background:var(--card);border-bottom:1px solid var(--line);color:var(--ink)}
.top .brand{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500}
.top .brand b{display:inline-grid;place-items:center;width:28px;height:28px;background:var(--ink);color:#fff;border-radius:3px;font:500 10.5px var(--mono);letter-spacing:.08em}
.top nav{display:flex;gap:2px;margin-left:8px;overflow-x:auto}.top nav a{color:var(--muted);text-decoration:none;padding:7px 12px;border-radius:4px;white-space:nowrap;font-size:.9rem}.top nav a.on{background:var(--ink);color:#fff;font-weight:500}.top nav a:hover{color:var(--ink)}
.top .who{font-size:.85rem;color:var(--muted);text-align:right;line-height:1.25}.top .who b{display:block;color:var(--ink);font-weight:500}
.top .clock{font:400 1.15rem var(--mono);color:var(--ink);letter-spacing:.04em}
.top .btn.ghost{color:var(--ink)}
.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#C9C9C4;margin-right:6px;vertical-align:middle}
.status-dot.on{background:var(--green)}.status-dot.off{background:var(--accent)}

/* ---------- cards / tiles ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.card.flat{border:0;background:transparent;padding:0}.card.pad0{padding:0;overflow:hidden}.card h3{margin-bottom:12px}
.card .hd{display:flex;align-items:center;gap:10px;margin:-20px -22px 16px;padding:12px 22px;border-bottom:1px solid var(--line2)}
.tile{display:flex;flex-direction:column;gap:10px;padding:22px 0 20px;border-top:1px solid var(--rule)}
.tile .lbl{display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500}.tile .lbl svg{display:none}
.tile b{display:block;font:300 44px/1 var(--display);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}.tile b small{font-size:22px;color:var(--faint);font-weight:300}
.tile.red{border-top-color:var(--accent)}.tile.red .lbl{color:var(--accent)}.tile.red b{color:var(--accent)}
.tile .sub{font-size:13px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tile .sub i{color:var(--line);font-style:normal}.tile .sub strong{font-weight:500;color:var(--ink)}
/* ---------- portal shell (sidebar) ---------- */
.shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100%;transition:grid-template-columns .18s}
.shell.mini{grid-template-columns:72px minmax(0,1fr)}
.side .brand .mark-sm{display:none;height:40px;width:auto}.side .brand .collapse{margin-left:auto;background:transparent;border:1px solid var(--line);border-radius:8px;width:30px;height:30px;display:grid;place-items:center;cursor:pointer;color:var(--muted);flex:none}.side .brand .collapse:hover{color:var(--ink);border-color:var(--ink)}
.side .brand{flex-wrap:wrap}.side .brand .collapse{position:absolute;right:10px;top:10px}.side{position:relative}
.shell.mini .side{padding:16px 10px 14px;align-items:center}.shell.mini .side .brand{padding:0 0 14px;align-items:center;width:100%}.shell.mini .side .brand .mark,.shell.mini .side .brand .t{display:none}.shell.mini .side .brand .mark-sm{display:block;margin:34px auto 0}.shell.mini .side .brand .collapse{right:auto;left:50%;transform:translateX(-50%);top:0}.shell.mini .side .brand .collapse svg{transform:rotate(180deg)}
.shell.mini .side nav{width:100%}.shell.mini .side nav a{justify-content:center;padding:0;width:52px;margin:0 auto}.shell.mini .side nav .lb,.shell.mini .side nav .chev,.shell.mini .side nav .sec,.shell.mini .side nav .kids{display:none}.shell.mini .side nav a .sp{display:none}
.shell.mini .side .user{padding:12px 0 0;justify-content:center}.shell.mini .side .user .t,.shell.mini .side .user a{display:none}
.side{background:var(--card);border-right:1px solid var(--line);color:var(--ink);display:flex;flex-direction:column;padding:22px 14px 18px;gap:6px;position:sticky;top:0;height:100vh}
.side .brand{display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:0 8px;padding:2px 10px 18px;border-bottom:1px solid var(--line)}
.side .brand b{display:grid;place-items:center;width:30px;height:30px;border-radius:3px;background:var(--ink);color:#fff;font:500 11px var(--mono);letter-spacing:.08em}.side .brand .mark{height:44px;width:auto;flex:none;margin-bottom:2px}.logo-img{height:34px;width:auto;display:block}
.side .brand .t{display:contents}.side .brand .t span:first-child{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);line-height:1;padding-bottom:9px}.side .brand .t span:last-child{flex-basis:100%;font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em;line-height:1.25;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto;margin-top:8px;scrollbar-width:none}.side nav::-webkit-scrollbar{display:none}
.side nav a{display:flex;align-items:center;gap:12px;height:40px;padding:0 12px;border-radius:6px;color:#5A5A5A;font-size:14px;text-decoration:none}
.side nav a.on{background:var(--ink);color:#fff;font-weight:500}.side nav a:hover{background:var(--blue-soft);color:var(--ink)}.side nav a.on:hover{background:var(--ink);color:#fff}
.side nav a.grp{cursor:pointer}.side nav a.grp.act{color:var(--ink);font-weight:500}.side nav .chev{transition:transform .15s;color:var(--faint)}.side nav .chev.open{transform:rotate(180deg)}
.side nav a,.side nav .sec,.side nav .kids{flex:none}.side nav .kids{display:none;flex-direction:column;gap:1px;margin:2px 0 4px}.side nav .kids.open{display:flex}
.side nav a.sub{height:34px;padding-left:22px;font-size:13px;color:var(--muted)}.side nav a.sub .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5;margin:0 5px}.side nav a.sub.on .dot{opacity:1}
.side nav .sec{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);padding:20px 12px 8px;font-weight:500}
.side .user{display:flex;align-items:center;gap:10px;padding:14px 12px 0;border-top:1px solid var(--line);margin-top:auto}
.side .user .t{display:flex;flex-direction:column;line-height:1.2;font-size:13px;font-weight:500}.side .user .t span{font-size:11px;color:var(--muted);font-weight:400}
.side .user a{color:var(--muted);font-size:12px;margin-left:auto;text-decoration:none}.side .user a:hover{color:var(--accent)}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;display:inline-grid;place-items:center;font-weight:500;font-size:12px}
.phead{display:flex;align-items:flex-end;gap:24px;padding:34px 44px 0}.phead .t{display:flex;flex-direction:column;gap:6px}.phead h1{font-size:34px}
.phead .pill-status{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);font-family:var(--font)}
.phead .clock{font:600 26px var(--font);color:var(--ink);letter-spacing:.01em;font-variant-numeric:tabular-nums;line-height:1}
.pbody{padding:26px 44px 40px;display:flex;flex-direction:column;gap:28px}
/* ---------- มือถือ (≤820px): แถบบน + เมนูลิ้นชักเลื่อนจากซ้าย ---------- */
.mtop{display:none}.mask{display:none}
@media(max-width:820px){
  .shell,.shell.mini{grid-template-columns:1fr}
  .side,.shell.mini .side{position:fixed;left:0;top:0;bottom:0;width:min(300px,86vw);height:auto;padding:18px 14px calc(18px + env(safe-area-inset-bottom));transform:translateX(-102%);transition:transform .22s ease;z-index:60;box-shadow:0 20px 60px rgba(0,0,0,.35);align-items:stretch;overflow-y:auto}
  .shell.nav-open .side{transform:none}
  .shell.mini .side nav a{width:auto;padding:0 12px;justify-content:flex-start;margin:0}.shell.mini .side nav .lb{display:inline}.shell.mini .side nav .chev,.shell.mini .side nav .kids{display:flex}.shell.mini .side nav .kids{display:none}.shell.mini .side nav .kids.open{display:flex}.shell.mini .side nav .sec{display:block}
  .shell.mini .side .brand{padding:2px 10px 18px;align-items:flex-end}.shell.mini .side .brand .mark{display:block;margin:0}.shell.mini .side .brand .mark-sm{display:none}.shell.mini .side .brand .t{display:contents}
  .side .brand .collapse{display:none}
  .shell.mini .side .user{padding:14px 12px 0;justify-content:flex-start}.shell.mini .side .user .t,.shell.mini .side .user a{display:flex}
  .mask{display:block;position:fixed;inset:0;background:rgba(16,44,60,.45);opacity:0;pointer-events:none;transition:opacity .2s;z-index:55}.shell.nav-open .mask{opacity:1;pointer-events:auto}
  .mtop{display:flex;align-items:center;gap:10px;height:56px;padding:0 12px 0 8px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
  .mtop .hb{display:grid;place-items:center;width:40px;height:40px;border:0;background:transparent;color:var(--ink);border-radius:10px}.mtop .hb:active{background:var(--line2)}
  .mtop img{height:28px;width:auto}.mtop .pn{font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
  .mtop .bell{margin:0;width:36px;height:36px}
  .phead{padding:14px 16px 0;gap:10px;align-items:center}.phead .t{gap:2px}.phead h1{font-size:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw}.phead .eyebrow{font-size:10.5px}
  .phead .pill-status,.phead > .bell{display:none}.phead .clock{font-size:17px}
  .pbody{padding:14px 12px 28px;gap:14px}
  .g4,.g3,.g2{grid-template-columns:1fr}
  .tile b{font-size:28px}
}
.sec-h{display:flex;align-items:baseline;gap:14px;margin-bottom:12px}.sec-h .eyebrow{color:var(--muted)}.sec-h .sp{flex:1}.sec-h a{font-size:12.5px;font-weight:500;text-decoration:none;border-bottom:1px solid var(--ink)}.sec-h a:hover{border-color:var(--accent)}
.chd{display:flex;align-items:center;gap:10px;padding:12px 22px;border-bottom:1px solid var(--line2)}.chd h3{margin:0}.chd .sp{flex:1}.chd a{font-size:12.5px;font-weight:500;text-decoration:none;border-bottom:1px solid var(--ink)}
.mini-lane{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;background:#fff}
.mini-lane .hd{display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:12px;color:var(--muted);white-space:nowrap;min-width:0}.mini-lane .hd>span:nth-child(2){overflow:hidden;text-overflow:ellipsis;min-width:0}.mini-lane .hd .no{flex:none;font:500 12px var(--mono);color:var(--ink);letter-spacing:.06em}.mini-lane .hd .pill{flex:none}
.mini-lane .img{height:104px;background:linear-gradient(170deg,#2A2E33,#101214);display:flex;align-items:flex-end;padding:10px;position:relative;overflow:hidden}.mini-lane .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.mini-lane .img .plate{position:relative;font-size:13px}
.mini-lane .st{padding:8px 10px 10px;font-size:12px;font-weight:500;display:flex;align-items:center;gap:6px}.mini-lane .st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.mini-lane .st.ok{color:var(--green)}.mini-lane .st.warn{color:var(--amber)}.mini-lane .st.bad{color:var(--accent)}.mini-lane .st.idle{color:var(--faint)}
.ovr{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}.ovr .t{display:flex;flex-direction:column;line-height:1.35;font-size:13px;font-weight:500}.ovr .t span{font-size:12.5px;color:var(--muted);font-weight:400}

/* ---------- buttons / forms ---------- */
.btn{background:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:var(--r-sm);padding:0 16px;height:38px;cursor:pointer;font-weight:500;font-size:13.5px;display:inline-flex;align-items:center;justify-content:center;gap:8px;line-height:1;transition:background .12s,color .12s,border-color .12s}
.btn:hover{background:#333;border-color:#333}.btn:disabled{opacity:.4;cursor:default}
.btn.amber{background:var(--ink);border-color:var(--ink);color:#fff}.btn.green{background:var(--green);border-color:var(--green)}.btn.green:hover{background:#177a47}.btn.red{background:var(--accent);border-color:var(--accent)}.btn.red:hover{background:#a50c25}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}.btn.ghost:hover{border-color:var(--ink);background:#fff}
.btn.sm{height:30px;padding:0 11px;font-size:12.5px}.btn.lg{height:48px;padding:0 24px;font-size:15px}.btn.xl{height:60px;padding:0 30px;font-size:18px;border-radius:6px}
input,select,textarea{border:1px solid #C9C9C4;border-radius:var(--r-sm);padding:9px 12px;background:#fff;color:var(--ink);width:100%;height:40px;transition:border .12s}textarea{height:auto}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink)}
label{font-size:12px;font-weight:500;color:var(--muted);display:block;margin-bottom:6px}.f{display:flex;flex-direction:column;gap:2px}
input[type=checkbox]{width:auto;height:auto}

/* ---------- tables ---------- */
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.9rem;background:transparent}
th{text-align:left;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:12px 12px 12px 0;border-bottom:1px solid var(--rule);font-weight:500;white-space:nowrap;background:transparent}
td{padding:13px 12px 13px 0;border-bottom:1px solid var(--line);vertical-align:middle}tbody tr:hover td{background:transparent}tr:last-child td{border-bottom:1px solid var(--line)}
.card.pad0 table th:first-child,.card.pad0 table td:first-child{padding-left:22px}.card.pad0 table th:last-child,.card.pad0 table td:last-child{padding-right:22px}

/* ---------- ป้ายทะเบียน ---------- */
.plate{display:inline-flex;align-items:baseline;gap:6px;font-family:var(--mono);font-weight:500;color:#111;background:#fff;border:1.5px solid #111;border-radius:4px;padding:2px 10px;white-space:nowrap;font-size:14px;letter-spacing:.02em;vertical-align:middle;box-shadow:none}
.plate small{font-family:var(--font);font-size:10px;color:var(--muted);font-weight:400;letter-spacing:0}
.plate.lg{font-size:1.9rem;padding:4px 16px;border-radius:6px;border-width:2px}.plate.xl{font-size:3rem;padding:6px 22px;border-radius:8px;border-width:3px}
/* ป้ายทะเบียนแบบป้ายจริง: เลขบนตัวหนา จังหวัดบรรทัดล่าง กรอบดำมน */
/* สัดส่วนป้ายจริง ≈ 2.3:1 กรอบเส้นเดียว */
.plate.real{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:0;line-height:1;padding:0 10px;min-width:86px;height:38px;border:1.5px solid #111;border-radius:5px;background:#fff;box-shadow:none;box-sizing:border-box}
.plate.real b{font-family:var(--font);font-weight:700;font-size:15.5px;letter-spacing:.03em;color:#111;white-space:nowrap}
.plate.real small{font-family:var(--font);font-size:8.5px;font-weight:500;color:#111;letter-spacing:.04em;margin-top:2px;white-space:nowrap}
.plate.unknown{color:var(--muted);border-style:dashed;font-family:var(--font);font-size:.95em}

/* ---------- pills / decisions ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;padding:0;border-radius:0;letter-spacing:.02em;white-space:nowrap;background:transparent}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.pill.b{color:var(--ink)}.pill.g{color:var(--green)}.pill.r{color:var(--accent)}.pill.a{color:var(--amber)}.pill.m{color:var(--muted)}
.decision{display:inline-flex;align-items:center;gap:8px;padding:0;border-radius:0;font-weight:500;border:0;background:transparent;font-size:13.5px}
.decision::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;background:currentColor}
.decision.allow{color:var(--green)}.decision.deny{color:var(--accent)}.decision.pending{color:var(--amber)}.decision.muted{color:var(--muted)}
.decision .why{font-weight:400;font-size:.9em;color:var(--muted)}
.attn{border-left:3px solid var(--accent);background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:10px 14px;border-radius:0 var(--r) var(--r) 0;color:var(--ink);font-size:13.5px}
.attn.warn{border-left-color:var(--amber)}.attn.ok{border-left-color:var(--green)}
.money{font:300 1.6rem var(--display);color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}.money.big{font-size:2.8rem;line-height:1}.money.due{color:var(--accent)}.money.ok{color:var(--green)}
.kv{display:grid;grid-template-columns:120px 1fr;gap:8px 12px;font-size:.92rem}.kv span{color:var(--muted)}
.empty{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px;text-align:center;color:var(--faint);font-size:.9rem}

/* ---------- lane tiles (Live) ---------- */
.lane-tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.lane-tile .hd{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line2);color:var(--ink)}
.lane-tile .hd .no{font:500 18px var(--mono);letter-spacing:.04em}
.lane-tile .hd h3{font-size:14px;font-weight:500}.lane-tile .hd .sub{font-size:11.5px;color:var(--muted)}
.lane-tile .img{background:linear-gradient(170deg,#2A2E33,#101214);aspect-ratio:16/9;display:grid;place-items:center;color:#6B7A90;position:relative;font-size:.85rem}
.lane-tile .img img{width:100%;height:100%;object-fit:cover;display:block}
.lane-tile .img .ts{position:absolute;top:8px;right:10px;font:400 11px var(--mono);color:#A9ACB2}
.lane-tile .bd{padding:14px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.lane-tile .ft{padding:12px 16px;border-top:1px solid var(--line2);display:flex;gap:8px;flex-wrap:wrap}
.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{display:inline-flex;align-items:center;gap:6px;font:400 11px var(--mono);border:1px solid var(--line);border-radius:3px;padding:3px 8px;background:#fff;color:var(--muted)}
.bar-state{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.bar-state::before{content:"";width:6px;height:6px;border-radius:50%;background:#C9C9C4}
.bar-state.open{color:var(--green)}.bar-state.open::before{background:var(--green)}.bar-state.locked{color:var(--accent)}.bar-state.locked::before{background:var(--accent)}

/* ---------- feed ---------- */
.feed{max-height:460px;overflow:auto;display:flex;flex-direction:column}
.feed .it{display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.feed .it:last-child{border-bottom:1px solid var(--line)}.feed .it img,.feed .it .noimg{width:56px;height:36px;object-fit:cover;border-radius:3px;background:linear-gradient(170deg,#2A2E33,#101214)}.feed .it .noimg{display:grid;place-items:center;color:#6B7A90;font-size:.6rem}
.feed .it .t{font:400 11px var(--mono);color:var(--muted)}

/* ---------- modal / toast ---------- */
.modal{position:fixed;inset:0;background:rgba(17,17,17,.5);display:none;align-items:center;justify-content:center;z-index:40;padding:16px}.modal.on{display:flex}
.modal .box{background:#fff;border:1px solid var(--line);border-radius:8px;padding:24px 26px;width:min(600px,100%);max-height:92vh;overflow:auto}
.modal .box.wide{width:min(860px,100%)}
.toast{position:fixed;right:24px;bottom:24px;background:var(--ink);color:#fff;padding:11px 16px;border-radius:4px;z-index:60;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;max-width:420px;font-size:13.5px}
.toast.on{opacity:1;transform:none}.toast.err{background:var(--accent)}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}.tabs a{padding:9px 14px;text-decoration:none;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;font-weight:500;margin-bottom:-1px}.tabs a.on{color:var(--ink);border-color:var(--ink)}

/* ---------- misc ---------- */
.bars{display:flex;align-items:flex-end;gap:4px;height:130px;padding-bottom:20px;position:relative;border-bottom:1px solid var(--line)}
.card.chart-fill{display:flex;flex-direction:column}.card.chart-fill .bars{flex:1;height:auto;min-height:160px}
.bars div{flex:1;background:var(--ink);position:relative;min-width:6px;min-height:2px}.bars div:hover{background:var(--accent)}
.bars div span{position:absolute;bottom:-22px;left:0;right:0;text-align:center;font:400 .66rem var(--mono);color:var(--faint)}
.bars div i{position:absolute;top:-18px;left:0;right:0;text-align:center;font:400 .62rem var(--mono);color:var(--muted);font-style:normal;white-space:nowrap}
.hbar{display:flex;align-items:flex-end;gap:3px;height:110px}.hbar div{flex:1;background:#D9D9D5;min-height:2px}.hbar div.hi{background:var(--ink)}.hbar div.now{background:var(--accent)}
.dev{display:flex;flex-wrap:wrap;gap:6px}.dev span{display:inline-flex;align-items:center;gap:6px;font:400 11px var(--mono);border:1px solid var(--line);border-radius:3px;padding:4px 8px;background:#fff;color:var(--ink2)}.dev i{width:6px;height:6px;border-radius:50%;background:#C9C9C4}.dev i.on{background:var(--green)}.dev i.off{background:var(--accent)}
.skeleton{background:linear-gradient(90deg,#EEEEEA,#F7F7F4,#EEEEEA);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:4px;min-height:18px}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}
.sec-rule{display:flex;align-items:center;gap:12px;margin:26px 0 12px}.sec-rule h3{font-size:15px}.sec-rule::after{content:"";flex:1;height:1px;background:var(--line)}
code{font-family:var(--mono);font-size:.85em;background:var(--blue-soft);padding:1px 5px;border-radius:3px}

/* ---------- login ---------- */
.login{min-height:100%;display:grid;place-items:center;background:var(--bg)}
.login .box{background:#fff;border:1px solid var(--line);border-radius:8px;padding:30px;width:min(400px,92vw)}
@media(max-width:700px){.top{height:auto;flex-wrap:wrap;padding:8px 12px;gap:8px}.top .who{display:none}}

/* ---------- Live ช่องทาง v2 ---------- */
.live-strip{display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--muted);padding:12px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.live-strip span b{font-weight:600;color:var(--ink);margin-right:4px}.live-strip span.ok b{color:var(--green)}.live-strip span.warn b{color:var(--amber)}.live-strip span.bad b{color:var(--red)}
.lane-tile.lt2 .hd .no{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--ink);color:#fff;font:600 14px var(--mono);letter-spacing:.02em}
.lane-tile.lt2 .hd .t{min-width:0}.lane-tile.lt2 .hd h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lane-tile.lt2 .img .ph{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12.5px}.lane-tile.lt2 .img .ph svg{width:28px;height:28px;opacity:.6}
.lane-tile.lt2 .ev{display:flex;gap:12px;align-items:flex-start}.lane-tile.lt2 .evt{display:flex;flex-direction:column;gap:3px;min-width:0}.lane-tile.lt2 .why{font-size:12.5px;color:var(--muted)}
.lane-tile.lt2 .chips{display:flex;gap:6px;flex-wrap:wrap}.lane-tile.lt2 .chip{display:inline-flex;align-items:center;gap:6px;font:400 11px var(--mono);border:1px solid var(--line);border-radius:999px;padding:2px 8px;color:var(--muted)}
.lane-tile.lt2.has-wait{border-color:var(--amber)}
.bar-state{font-size:11.5px;font-weight:500;padding:3px 9px;border-radius:999px;background:#EEF0F2;color:var(--muted)}.bar-state.open{background:var(--green-soft);color:var(--green-ink)}.bar-state.locked{background:var(--red-soft);color:var(--red-ink)}

/* ---------- แจ้งเตือน ---------- */
.bell{position:relative;display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;color:var(--muted);border:1px solid var(--line);background:var(--card);margin-right:6px}.bell:hover{color:var(--ink)}
.bell b{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--amber);color:#fff;font-size:11px;font-weight:600;display:grid;place-items:center}.bell.crit b{background:var(--red)}.bell.crit{color:var(--red);border-color:var(--red)}
.al-list{display:flex;flex-direction:column}.al{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line2)}.al:first-child{border-top:0}
.al .t{display:flex;flex-direction:column;gap:2px;min-width:0}.al .t b{font-weight:600}.al .t span{font-size:13px;color:var(--muted)}.al .t small{font-size:11.5px;color:var(--faint)}
.al .ac{display:flex;gap:6px}.al.closed{opacity:.7}.al.critical .t b{color:var(--red)}