/* ============================================================================
   NYXORIQ Parking — โครงแบบ A
   เมนูซ้ายถาวร + เนื้อหาเป็นการ์ด + ธีมอุ่นสว่าง

   ที่มา: เจ้าของเลือกจาก mockup 5 แนว แล้วเลือกจาก 3 การจัดวาง
   เหตุผลที่เลือก A: เป็นแบบเดียวที่ย่อลงแท็บเล็ตได้เองโดยไม่ต้องเขียนโค้ดเพิ่ม
   และ รปภ. ที่ตู้คือคนที่ยังไม่ได้ออกแบบหน้าจอให้

   🔴 การ์ด กับ ตาราง ใช้คนละที่ และมีกฎว่าเมื่อไหร่ใช้อะไร
      การ์ด = แต่ละใบคือ "ของที่ต้องลงมือทำอะไรบางอย่าง" (รับเงิน · ตัดสิน)
      ตาราง = แต่ละแถวคือ "ของที่ต้องกวาดตาอ่าน" (log เหตุการณ์ · ผลค้นหา)
      ถ้าเอาของที่มี 9 คอลัมน์ไปทำเป็นการ์ด จะอ่านยากกว่าเดิม

   🔴 แต่ห้ามโปร่งเกินไป — 📄 Parking Boss ถูกบ่นว่า "โปร่งเกินไปสำหรับงานหลายลาน"
      ส่วน T2/OPS-COM/ParkPow หนาแน่นมากและยังขายได้
   ========================================================================= */

:root{
  /* ---- ธีมอุ่นสว่าง (จาก mockup 04) ---- */
  --bg:#f6f5f2; --panel:#ffffff; --panel-2:#f1efe9;
  --line:#d8d5cc; --line-soft:#eceae4;

  --ink:#22211e; --ink-2:#44423c; --dim:#6d6a62;

  --in:#15803d; --out:#1d4ed8;
  /* 🔴 เหลืองอ่านไม่ออกกลางแดด ⇒ ส้มอำพัน */
  --warn:#a8720f; --bad:#c0392b;
  --hik:#b8500f; --dah:#6d28d9;
  /* 🔴 "ยังไม่รู้ / ต้องให้คนตัดสิน" ไม่ใช่ warning ไม่ใช่ error
     เป็นสถานะปกติของระบบที่ซื่อสัตย์ ⇒ แยกด้วยเส้นประ ไม่ใช่สีแรง */
  --unknown:#6d6a62;

  --tint-in:#e9f4ec; --tint-out:#e9effa;
  --warn-bg:#fffaf0; --warn-line:#c8871b; --warn-ink:#8a5a0b;
  --on-accent:#ffffff;

  /* เมนูซ้าย — เทาอุ่นเข้ม อยู่ในตระกูลสีเดียวกับพื้น ไม่ใช่น้ำเงินกรมท่า */
  --rail:#2a2825; --rail-ink:#a8a49b; --rail-grp:#6e6a62;

  --ring:0 0 0 1px rgba(34,33,30,.09);
  --shadow-card:0 1px 3px rgba(34,33,30,.07);
  --shadow-up:0 2px 8px rgba(34,33,30,.10);
  --shadow-pop:0 18px 44px rgba(34,33,30,.20), 0 0 0 1px rgba(34,33,30,.10);
  --shade:rgba(34,33,30,.5);
  --hover:rgba(34,33,30,.04);

  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.25rem; --sp-6:1.5rem; --sp-8:2rem;
  --r-sm:9px; --r:12px; --r-lg:16px; --r-pill:999px;

  --t-xs:.75rem; --t-sm:.8125rem; --t-base:.9375rem;
  --t-md:1rem; --t-lg:1.125rem; --t-xl:1.375rem; --t-display:1.75rem;
  --rail-w:188px;
}

/* ธีมมืด — ยังเป็นโทนอุ่น ไม่ใช่น้ำเงิน
   🔴 ไม่ใช่เพราะสวย แต่เพราะ รปภ. กะดึกในป้อมมืด
      จอสว่างจ้าทำให้รูม่านตาหด แล้วมองออกไปอ่านป้ายนอกป้อมไม่เห็น */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#161513; --panel:#201f1c; --panel-2:#292722;
    --line:#3a3833; --line-soft:#2b2926;
    --ink:#ecebe5; --ink-2:#c8c5bc; --dim:#98948b;
    --in:#5cc47f; --out:#8ab4ff; --warn:#dba84a; --bad:#ef7a6c;
    --hik:#e8935a; --dah:#b49cff; --unknown:#98948b;
    --tint-in:#16291d; --tint-out:#1a2235;
    --warn-bg:#2b2109; --warn-line:#8a6a1b; --warn-ink:#e8c47f;
    --on-accent:#0f1a12;
    --rail:#100f0e; --rail-ink:#8e8a82; --rail-grp:#5e5b55;
    /* ธีมมืดเงามองไม่เห็น ⇒ ใช้ ring สว่างจางๆ ยกพื้นผิวแทน */
    --ring:0 0 0 1px rgba(255,255,255,.09);
    --shadow-card:0 0 0 1px rgba(255,255,255,.08);
    --shadow-up:0 0 0 1px rgba(255,255,255,.14);
    --shadow-pop:0 20px 48px rgba(0,0,0,.66), 0 0 0 1px rgba(255,255,255,.13);
    --shade:rgba(0,0,0,.74);
    --hover:rgba(255,255,255,.05);
  }
}

*{box-sizing:border-box;margin:0}

/* 🔴🔴 ต้องอยู่ก่อนทุกกฎ และต้องมี !important
   เบราว์เซอร์มีกฎ [hidden]{display:none} อยู่แล้ว แต่มันแพ้กฎที่ใช้ class
   ⇒ .gate{display:grid} ทำให้ el.hidden = true "ดูเหมือนทำงาน" แต่ไม่ทำงาน
   เจอจริง 2026-09-21: ล็อกอินสำเร็จแล้วการ์ดล็อกอินยังทับทั้งจอ */
[hidden]{display:none !important}

/* 🔴 fallback stack ต้องใช้ได้จริง — ลานที่ตู้อาจออฟไลน์ ฟอนต์จะโหลดไม่ได้
   line-height 1.6: ไทยมีสระบน/วรรณยุกต์ซ้อน ที่ 1.5 ไม้โทชนแถวบน */
body{
  background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Sans Thai","Noto Sans Thai","Segoe UI",system-ui,sans-serif;
  font-size:var(--t-base); line-height:1.6;
  -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums;
}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.012em}

/* ============================ โครงหน้า ============================ */
.shell{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);min-height:100vh}
.content{min-width:0;display:flex;flex-direction:column}

/* ---------------------------- เมนูซ้าย ---------------------------- */
.rail{background:var(--rail);padding:var(--sp-4) var(--sp-3);display:flex;
  flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;overflow-y:auto}
.rail .mk{display:flex;align-items:center;gap:var(--sp-2);padding:0 var(--sp-2) var(--sp-4)}
.rail .mk b{color:#fff;font-size:var(--t-sm);letter-spacing:.08em;font-weight:700}
.rail button{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);
  background:none;border:0;color:var(--rail-ink);text-align:left;padding:.5rem .65rem;
  border-radius:var(--r-sm);font:inherit;font-size:var(--t-sm);cursor:pointer;
  transition:background .15s,color .15s;width:100%}
.rail button:hover{background:rgba(255,255,255,.07);color:#fff}
.rail button.on{background:var(--bg);color:var(--ink);font-weight:600}
.rail button b{background:var(--warn-line);color:#fff;border-radius:var(--r-pill);
  padding:0 .45rem;font-size:var(--t-xs);font-weight:700}
.rail .grp{font-size:.68rem;letter-spacing:.14em;color:var(--rail-grp);
  padding:var(--sp-4) .65rem var(--sp-1);text-transform:uppercase}
.rail .railfoot{margin-top:auto;padding-top:var(--sp-4);display:grid;gap:var(--sp-2)}
.rail .who{padding:0 .65rem;line-height:1.3}
.rail .who b{background:none;padding:0;color:#fff;font-size:var(--t-sm);font-weight:600;
  display:block}
.rail .who small{color:var(--rail-grp);font-size:var(--t-xs)}

.mark{width:26px;height:26px;border-radius:8px;background:var(--in);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:.9rem;flex:0 0 auto}

/* ---------------------------- แถบบน ---------------------------- */
.topbar{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-3) var(--sp-5);
  background:var(--panel);box-shadow:0 1px 0 var(--line-soft);
  position:sticky;top:0;z-index:9;flex-wrap:wrap}
.spacer{flex:1}
.occ{min-width:150px}
.occ-head{display:flex;align-items:baseline;gap:var(--sp-2)}
.occ b{font-size:var(--t-xl);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.occ small{color:var(--dim);font-size:var(--t-xs)}
.bar{height:5px;background:var(--line-soft);border-radius:var(--r-pill);margin-top:5px}
.bar i{display:block;height:100%;border-radius:var(--r-pill);background:var(--in);
  transition:width .45s cubic-bezier(.4,0,.2,1)}

main{padding:var(--sp-5);max-width:1480px;flex:1}

/* ========================= แถบตัวเลขสรุป ========================= */
.stats{display:grid;gap:var(--sp-3);margin-bottom:var(--sp-5);
  grid-template-columns:repeat(auto-fit,minmax(138px,1fr))}
.stat{background:var(--panel);border-radius:var(--r);padding:var(--sp-3) var(--sp-4);
  box-shadow:var(--shadow-card);display:flex;flex-direction:column}
.stat small{color:var(--dim);font-size:var(--t-xs);font-weight:500;order:1;line-height:1.4}
.stat b{font-size:var(--t-display);font-weight:700;line-height:1.1;letter-spacing:-.03em;
  order:2;margin-top:2px}
/* ตัวเลขที่บอกว่า "ระบบยังตอบไม่ได้" ต้องเด่นเท่ากับตัวเลขที่ดูดี */
.stat.alert{background:var(--warn-bg);box-shadow:0 0 0 1px var(--warn-line)}
.stat.alert b{color:var(--warn-ink)}
.stat.alert small{color:var(--warn-ink)}

/* ============================ การ์ด ============================ */
/* 🔴 ใช้กับของที่ "ต้องลงมือทำอะไรบางอย่าง" เท่านั้น */
.cards{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(266px,1fr))}
.card2{background:var(--panel);border-radius:var(--r-lg);padding:var(--sp-4);
  box-shadow:var(--shadow-card);display:flex;flex-direction:column;transition:box-shadow .15s}
.card2:hover{box-shadow:var(--shadow-up)}
.card2 .plate{font-size:var(--t-lg);font-weight:700;letter-spacing:.02em}
.card2 .meta{color:var(--dim);font-size:var(--t-xs);margin:2px 0 var(--sp-3);line-height:1.5}
.card2 .money{font-size:1.625rem;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.card2 .sub{color:var(--dim);font-size:var(--t-xs);margin-top:2px}
.card2 .act{display:flex;gap:var(--sp-2);margin-top:var(--sp-3)}
.card2 .act button{flex:1}
/* ใบที่ระบบตัดสินเองไม่ได้ — ต้องดูต่างจากใบปกติตั้งแต่ยังไม่อ่าน */
.card2.review{background:var(--warn-bg);box-shadow:0 0 0 1px var(--warn-line)}
.card2.review .money{font-size:var(--t-base);color:var(--warn-ink);font-weight:600}
.card2.paid .money{color:var(--in)}

/* ============================ ตาราง ============================ */
/* 🔴 ใช้กับของที่ "ต้องกวาดตาอ่าน" — log เหตุการณ์ · ผลค้นหา
   ตารางเลื่อนในกรอบตัวเอง ไม่ดันทั้งหน้าไปทางขวา */
.tablewrap{background:var(--panel);border-radius:var(--r);overflow-x:auto;
  box-shadow:var(--shadow-card)}
table{width:100%;border-collapse:collapse;min-width:640px}
th{text-align:left;background:var(--panel-2);color:var(--dim);font-size:var(--t-xs);
  font-weight:600;letter-spacing:.03em;padding:var(--sp-2) var(--sp-3);white-space:nowrap;
  border-bottom:1px solid var(--line-soft)}
td{padding:var(--sp-2) var(--sp-3);vertical-align:middle;
  border-bottom:1px solid var(--line-soft);font-size:var(--t-sm)}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--hover)}
.plate{font-size:var(--t-md);font-weight:600;letter-spacing:.02em}
.plate.none{color:var(--bad);font-style:italic;font-size:var(--t-sm);font-weight:400}
time{color:var(--dim);font-size:var(--t-sm)}
td.ref{font-size:var(--t-xs);color:var(--dim);word-break:break-all;max-width:20ch}

/* ============================ ป้ายสถานะ ============================ */
/* 🔴 ต้องอ่านออกโดยไม่ต้องพึ่งสี — กลางแดด เขียว/ส้ม/แดง กลืนกันหมด */
.tag{display:inline-block;font-size:var(--t-xs);font-weight:600;padding:.1rem .5rem;
  border-radius:var(--r-pill);white-space:nowrap;background:var(--line-soft);color:var(--ink-2)}
.tag.IN{background:var(--tint-in);color:var(--in)}
.tag.OUT{background:var(--tint-out);color:var(--out)}
.tag.hikvision{color:var(--hik);background:transparent;box-shadow:var(--ring)}
.tag.dahua{color:var(--dah);background:transparent;box-shadow:var(--ring)}
.tag.warn{background:var(--warn-bg);color:var(--warn-ink)}
.tag.bad{background:var(--warn-bg);color:var(--bad)}
/* 🔴 "ยังไม่รู้" ต่างจาก warning/error ด้วยรูปทรง ไม่ใช่แค่สี */
.tag.unknown{background:transparent;color:var(--unknown);border:1px dashed var(--unknown)}

.note{color:var(--dim);font-size:var(--t-sm);margin:0 0 var(--sp-4);max-width:84ch;
  line-height:1.75}
.note b{color:var(--warn-ink)}
.empty{color:var(--dim);padding:var(--sp-8);text-align:center;background:var(--panel);
  border-radius:var(--r);box-shadow:var(--shadow-card)}
.sechead{display:flex;align-items:baseline;gap:var(--sp-3);margin-bottom:var(--sp-3);
  flex-wrap:wrap}
.sechead h4{font-size:var(--t-lg);font-weight:700}
.sechead .chip{background:var(--panel-2);border-radius:var(--r-pill);padding:.15rem .7rem;
  font-size:var(--t-xs);color:var(--dim)}
.sechead .chip.w{background:var(--warn-bg);color:var(--warn-ink);font-weight:600}

/* ============================== ผังลาน ============================== */
.gates{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.gates section{background:var(--panel);border-radius:var(--r);padding:var(--sp-4);
  box-shadow:var(--shadow-card)}
.gates h3{font-size:var(--t-md);margin-bottom:var(--sp-3)}
.lane{border-left:3px solid var(--line);padding:var(--sp-1) 0 var(--sp-1) var(--sp-3);
  margin-bottom:var(--sp-3)}
.lane.IN{border-left-color:var(--in)} .lane.OUT{border-left-color:var(--out)}
.lane em{color:var(--dim);font-style:normal;font-size:var(--t-xs);display:block;margin-top:2px}
.dev{font-size:var(--t-xs);color:var(--dim);margin-top:var(--sp-1)}

/* =========================== หน้าเข้าสู่ระบบ =========================== */
.gate{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);
  z-index:20;padding:var(--sp-4)}
.gate .card{background:var(--panel);border-radius:var(--r-lg);padding:var(--sp-8);
  width:min(94vw,386px);box-shadow:var(--shadow-pop)}
.brand{display:flex;align-items:center;gap:var(--sp-3)}
.brand h2{font-size:var(--t-md);letter-spacing:.09em;font-weight:700}
.brand span{color:var(--dim);letter-spacing:0;font-weight:400;margin-left:.35rem}
.brand-lg{justify-content:center;margin-bottom:var(--sp-6)}
.brand-lg .mark{width:34px;height:34px;border-radius:10px;font-size:1.05rem}
.modes{display:flex;gap:2px;margin-bottom:var(--sp-5);background:var(--bg);
  border-radius:var(--r-pill);padding:4px}
.modes button{flex:1;background:none;border:0;border-radius:var(--r-pill);color:var(--dim);
  padding:var(--sp-2);font:inherit;font-size:var(--t-sm);cursor:pointer;
  transition:background .15s,color .15s}
.modes button.on{background:var(--panel);color:var(--ink);font-weight:600;
  box-shadow:var(--shadow-card)}
.gate label{display:block;color:var(--dim);font-size:var(--t-xs);font-weight:500;
  margin-bottom:var(--sp-4)}
.gate input{display:block;width:100%;margin-top:var(--sp-2);background:var(--panel);
  color:var(--ink);border:0;box-shadow:var(--ring);border-radius:var(--r-sm);
  padding:.6rem .75rem;font:inherit;font-size:var(--t-base);transition:box-shadow .15s}
.gate input:focus{outline:0;box-shadow:0 0 0 2px var(--in)}
.gate button[type=submit]{width:100%;background:var(--in);color:var(--on-accent);border:0;
  border-radius:var(--r-sm);padding:.7rem;font:inherit;font-size:var(--t-base);
  font-weight:600;cursor:pointer;margin-top:var(--sp-2);transition:filter .15s}
.gate button[type=submit]:hover{filter:brightness(1.08)}
.gate button[type=submit]:disabled{opacity:.5;cursor:default}
.err{color:var(--bad);font-size:var(--t-sm);margin-bottom:var(--sp-3);font-weight:500}
.hint{color:var(--dim);font-size:var(--t-xs);margin-top:var(--sp-5);line-height:1.8}

/* ============================== ปุ่ม ============================== */
button.ghost{background:transparent;border:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:var(--rail-ink);
  border-radius:var(--r-sm);padding:.45rem .7rem;font:inherit;font-size:var(--t-sm);
  cursor:pointer;transition:background .15s,color .15s;width:100%}
button.ghost:hover{background:rgba(255,255,255,.08);color:#fff}
main button.ghost{box-shadow:var(--ring);color:var(--ink-2);width:auto}
main button.ghost:hover{background:var(--hover);color:var(--ink)}
button.act{background:var(--in);color:var(--on-accent);border:0;border-radius:var(--r-sm);
  padding:.45rem .8rem;font:inherit;font-size:var(--t-sm);font-weight:600;cursor:pointer;
  white-space:nowrap;transition:filter .15s}
button.act:hover{filter:brightness(1.08)}
button.act.warn{background:var(--warn-line)}
button.act:disabled{opacity:.4;cursor:default}
.bar-actions{display:flex;gap:var(--sp-2);align-items:center;margin-bottom:var(--sp-4);
  flex-wrap:wrap}
.bar-actions input{background:var(--panel);color:var(--ink);border:0;box-shadow:var(--ring);
  border-radius:var(--r-sm);padding:.45rem .7rem;font:inherit;font-size:var(--t-sm);width:140px}

/* ============================= หน้าตั้งค่า ============================= */
.settings{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(348px,1fr))}
.settings section{background:var(--panel);border-radius:var(--r);padding:var(--sp-4);
  box-shadow:var(--shadow-card)}
.settings h3{font-size:var(--t-md);margin-bottom:var(--sp-1)}
.settings .sub{color:var(--dim);font-size:var(--t-xs);margin-bottom:var(--sp-3);line-height:1.7}
.opt{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r-sm);cursor:pointer;transition:background .15s}
.opt:hover{background:var(--hover)}
.opt.on{background:var(--tint-in);box-shadow:inset 0 0 0 1px var(--in)}
.opt.off{opacity:.45;cursor:not-allowed}
/* 🔴 ยังไม่ทดสอบกับของจริง — ต้องเลือกได้ (จะได้ทดสอบ) แต่ต้องดูไม่เหมือนของพร้อมใช้
   ลายทางเฉียง = "ยังสร้างไม่เสร็จ" ซึ่งเป็นภาษาสากลอยู่แล้ว */
.opt.untested{box-shadow:inset 0 0 0 1px var(--warn-line);
  background:repeating-linear-gradient(135deg,transparent 0 9px,var(--warn-bg) 9px 18px)}
.opt.untested b{color:var(--warn-ink)}
.opt input{margin-top:.3rem;accent-color:var(--in);flex:0 0 auto}
.opt b{display:block;font-weight:600;font-size:var(--t-sm)}
.opt em{font-style:normal;color:var(--dim);font-size:var(--t-xs);line-height:1.6}
/* 🔴 min-width:0 ทั้งแม่และลูก — flex item ไม่ยอมหดต่ำกว่าเนื้อหาตัวเองโดยค่าตั้งต้น
   <select> ที่มีตัวเลือกยาวจะดันทะลุการ์ดออกไป (เจอจริง 2026-09-22 ล้น 68px) */
.settings .num{display:flex;gap:var(--sp-2);align-items:center;margin-top:var(--sp-2);
  min-width:0;flex-wrap:wrap}
.settings .num>span{flex:0 0 auto;white-space:nowrap;color:var(--dim)}
.settings .num input,.num input[type=password],.num input[placeholder]{
  background:var(--panel);color:var(--ink);border:0;box-shadow:var(--ring);
  border-radius:var(--r-sm);padding:.45rem .65rem;font:inherit;font-size:var(--t-sm);
  flex:1 1 140px;min-width:0;width:auto;transition:box-shadow .15s}
.settings .num input:focus,.num input:focus{outline:0;box-shadow:0 0 0 2px var(--in)}
.settings select{background:var(--panel);color:var(--ink);border:0;box-shadow:var(--ring);
  border-radius:var(--r-sm);padding:.45rem .65rem;font:inherit;font-size:var(--t-sm);
  flex:1 1 0;min-width:0;max-width:100%}
select{background:var(--panel);color:var(--ink);border:0;box-shadow:var(--ring);
  border-radius:var(--r-sm);padding:.45rem .7rem;font:inherit;font-size:var(--t-sm)}
.warnbox{background:var(--warn-bg);border-radius:var(--r-sm);padding:var(--sp-3);
  font-size:var(--t-xs);color:var(--warn-ink);margin-top:var(--sp-3);line-height:1.7;
  box-shadow:inset 0 0 0 1px var(--warn-line)}

/* ============================== กล่อง QR ============================== */
.modal{position:fixed;inset:0;background:var(--shade);display:grid;place-items:center;
  z-index:30;padding:var(--sp-4);backdrop-filter:blur(3px)}
.modal .box{background:var(--panel);border-radius:var(--r-lg);padding:var(--sp-6);
  width:min(94vw,364px);text-align:center;box-shadow:var(--shadow-pop)}
.modal h3{font-size:var(--t-md);margin-bottom:var(--sp-1)}
.modal .amt{font-size:2.25rem;font-weight:700;letter-spacing:-.03em;
  margin:var(--sp-1) 0 var(--sp-4);line-height:1.05}
/* 🔴 QR ต้องมีพื้นขาวเสมอ แม้ธีมมืด — เครื่องสแกนอ่านโค้ดกลับสีไม่ได้ */
.modal svg{display:block;margin:0 auto;border-radius:var(--r-sm);background:#fff;padding:10px}
.modal .pay{color:var(--dim);font-size:var(--t-xs);margin-top:var(--sp-3);
  word-break:break-all;line-height:1.5;max-height:3.6em;overflow:auto}
.modal .sim{background:var(--warn-bg);color:var(--warn-ink);border-radius:var(--r-sm);
  padding:var(--sp-3);font-size:var(--t-xs);margin-top:var(--sp-3);line-height:1.7;
  box-shadow:inset 0 0 0 1px var(--warn-line)}
.modal .row{display:flex;gap:var(--sp-2);margin-top:var(--sp-4)}
.modal .row input{flex:1;min-width:0;background:var(--panel);color:var(--ink);border:0;
  box-shadow:var(--ring);border-radius:var(--r-sm);padding:.45rem .65rem;font:inherit;
  font-size:var(--t-sm)}
.modal .msg{font-size:var(--t-sm);margin-top:var(--sp-3);line-height:1.6;font-weight:600}
.modal .msg.bad{color:var(--bad)} .modal .msg.wait{color:var(--warn-ink)}
.modal .msg.ok{color:var(--in)}

pre.notice{background:var(--panel-2);border-radius:var(--r-sm);padding:var(--sp-3);
  font:inherit;font-size:var(--t-xs);line-height:1.85;white-space:pre-wrap;color:var(--ink-2);
  margin-bottom:var(--sp-3);max-height:15em;overflow:auto;box-shadow:var(--ring)}

/* ============================== หน้าราคา ============================== */
.ratenow{font-size:var(--t-lg);font-weight:600;padding:var(--sp-3) var(--sp-4);
  background:var(--panel-2);border-radius:var(--r-sm);margin-bottom:var(--sp-3);
  line-height:1.7;box-shadow:var(--ring)}
.rategrid{display:grid;gap:var(--sp-3);margin:var(--sp-3) 0;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.ratefield{display:block;min-width:0}
.ratefield span{display:block;font-size:var(--t-xs);color:var(--dim);font-weight:500;
  margin-bottom:var(--sp-1)}
.ratefield input{width:100%;background:var(--panel);color:var(--ink);border:0;
  box-shadow:var(--ring);border-radius:var(--r-sm);padding:.5rem .7rem;font:inherit;
  font-size:var(--t-base);transition:box-shadow .15s}
.ratefield input:focus{outline:0;box-shadow:0 0 0 2px var(--in)}
.ratefield em{display:block;font-style:normal;color:var(--dim);font-size:var(--t-xs);
  margin-top:var(--sp-1);line-height:1.5}
/* 🔴 ผลกระทบต้องเด่นกว่าช่องกรอก — มันคือสิ่งที่ควรใช้ตัดสินใจ */
.simbox{padding:var(--sp-3) var(--sp-4);border-radius:var(--r);background:var(--panel-2);
  font-size:var(--t-sm);line-height:1.75;margin-bottom:var(--sp-3);box-shadow:var(--ring)}
.simbox.ok{background:var(--tint-in);box-shadow:inset 0 0 0 1px var(--in)}
.simbox.bad{background:var(--warn-bg);box-shadow:inset 0 0 0 1px var(--bad)}
.simbox em{display:block;font-style:normal;color:var(--dim);font-size:var(--t-xs);
  margin-top:var(--sp-2)}

/* ============================== หน้าค้นหา ============================== */
.searchbar{display:flex;gap:var(--sp-2);align-items:center;margin-bottom:var(--sp-4);
  flex-wrap:wrap}
.searchbar input{background:var(--panel);color:var(--ink);border:0;box-shadow:var(--ring);
  border-radius:var(--r-sm);padding:.6rem .85rem;font:inherit;font-size:var(--t-base);
  min-width:0;transition:box-shadow .15s}
.searchbar input:focus{outline:0;box-shadow:0 0 0 2px var(--in)}
#sq{flex:1 1 260px}
.searchbar input[type=date]{flex:0 0 auto;font-size:var(--t-sm)}
.searchbar button{flex:0 0 auto}

/* ==================== จอแคบ — เมนูย้ายลงล่าง ==================== */
/* 🔴 เมนูซ้ายกิน 188px ซึ่งเป็นหายนะบนแท็บเล็ตที่ตู้
   ⇒ บนจอแคบมันกลายเป็นแถบแนวนอนติดขอบล่าง ซึ่งนิ้วโป้งเอื้อมถึงง่ายที่สุด */
@media (max-width:820px){
  :root{--t-display:1.5rem}
  .shell{grid-template-columns:minmax(0,1fr)}
  .rail{position:fixed;bottom:0;left:0;right:0;top:auto;height:auto;flex-direction:row;
    gap:var(--sp-1);padding:var(--sp-2);z-index:15;overflow-x:auto;scrollbar-width:none;
    box-shadow:0 -2px 12px rgba(0,0,0,.18)}
  .rail::-webkit-scrollbar{display:none}
  .rail .mk,.rail .grp,.rail .who{display:none}
  /* 🔴 ห้ามซ่อนปุ่มออกจากระบบบนจอแคบ — แท็บเล็ตที่ตู้คือเครื่องที่ใช้ร่วมกัน
     ถ้าออกจากระบบไม่ได้ กะถัดไปจะทำงานในนามของคนกะก่อน แล้วยอดเงินสดจะผิดคน
     (ชื่อผู้ใช้ซ่อนได้ ปุ่มออกซ่อนไม่ได้ — คนละเรื่องกัน) */
  .rail .railfoot{margin:0 0 0 auto;padding:0;flex:0 0 auto;
    position:sticky;right:0;background:var(--rail);padding-left:var(--sp-2)}
  .rail .railfoot button.ghost{width:auto;white-space:nowrap}
  .rail button{width:auto;flex:0 0 auto;white-space:nowrap}
  main{padding:var(--sp-3) var(--sp-3) 4.5rem}
  .topbar{padding:var(--sp-3)}
  .cards{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
}