/* ระบบดีไซน์ของ badminton.t0r.app — ต่อยอดจาก stock.t0r.app (app4)
   ================================================================
   ไฟล์นี้ยกโครงและตัวแปรสีมาจาก app4 ทั้งชุด แล้วเพิ่มของที่แอปนี้มีแต่ที่นั่นไม่มี:
   ตารางคอร์ดว่าง การ์ดก๊วน กล่องเข้าร่วม รายการแจ้งเตือน และผังเกม
   (ส่วนที่เพิ่มอยู่ท้ายไฟล์ใต้หัวข้อ "ของที่แอปนี้มีเพิ่ม")

   หลักที่ยึดทั้งไฟล์ เหมือนเดิมสี่ข้อ:

   1) ระนาบเดียว  ไม่มีเงา ไม่มีการ์ดซ้อนการ์ด แบ่งพื้นที่ด้วยเส้น hairline
      กับระยะห่างเท่านั้น ข้อยกเว้นเดียวคือการ์ดก๊วน ซึ่งเป็นของที่ต้องกดได้
      และต้องอ่านเป็นชิ้น ๆ แยกจากกันจริง ๆ
   2) สีมีความหมายเสมอ  เขียว = ว่าง/จ่ายแล้ว  แดง = ยกเลิก/เต็ม  เหลือง = รอดำเนินการ
      นอกนั้นเป็นกลาง ไม่มีสีตกแต่งในตัวเนื้อหา  gradient มีที่เดียวคือพื้นหลังของทั้งหน้า
      (Marine Foam ใน body::before) และห้ามมีอะไรวางทับมันโดยไม่มีพื้นทึบรองตัวหนังสือ
   3) ตัวเลขคือเนื้อหา  ทุกตัวเลขเป็น tabular-nums ชิดขวา หลักตรงกันทุกแถว
   4) นิ้วโป้งอยู่ล่าง  แอปนี้ถูกเปิดบนมือถือระหว่างยืนรอคอร์ด เมนูหลักจึงเป็นแถบล่าง
      และทุกปุ่มที่ต้องกดจริงสูงอย่างน้อย 2.5rem
   ================================================================ */

/* ---------------- ฟอนต์ ----------------
   ชุดเดียวกับ t0r.app (app1): Poppins สำหรับอักษรละติน Noto Sans Thai สำหรับภาษาไทย
   และ JetBrains Mono สำหรับรหัสสินค้า/บาร์โค้ด Poppins ไม่มีสระวรรณยุกต์ไทยเลย
   ตัวอักษรไทยจึงตกไปที่ตัวถัดไปในลิสต์ทุกตัว — ลำดับนี้ห้ามสลับ

   ไฟล์ .woff2 อยู่ในไบนารีไปด้วย (embed static) ไม่ได้ดึงจาก fonts.googleapis.com
   เครื่องหน้าร้านที่เน็ตหลุดจึงยังได้ฟอนต์เดิม ไม่ใช่ฟอนต์สำรองของระบบ
   เอาเฉพาะ subset ที่ใช้จริง: ละตินของ Poppins/JetBrains และไทยของ Noto — รวม 128KB */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url(/static/fonts/poppins-400-latin.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url(/static/fonts/poppins-500-latin.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url(/static/fonts/poppins-600-latin.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url(/static/fonts/poppins-700-latin.woff2) format('woff2')}
/* ตัวแปรผัน น้ำหนัก 400–700 อยู่ในไฟล์เดียว */
@font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/static/fonts/noto-sans-thai-400-700-thai.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/static/fonts/jetbrains-mono-400-latin.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(/static/fonts/jetbrains-mono-500-latin.woff2) format('woff2')}

/* ---------------- สี ----------------
   ธีมสว่างบนพื้นไล่สี "Marine Foam" (เขียวน้ำทะเลเข้ม -> ขาวอมเขียว) พื้นไล่สีอยู่ที่
   body::before ส่วนเนื้อหาทั้งหมดวางบนพื้นทึบสีขาวอมเขียว แก้ธีมทั้งแอปคือแก้บล็อกนี้บล็อกเดียว

   เดิมเป็นธีมมืด azure ยกมาจาก app1/app4 — เปลี่ยนเมื่อ 22 ก.ย. 2026 ตามที่ผู้ใช้ขอ
   ปลายสว่างของ Marine Foam คือ #EAF7F2 ซึ่งเกือบขาว ตัวหนังสือสีสว่างจึงใช้ไม่ได้อีกต่อไป
   ทั้งแอปเลยต้องกลับเป็นตัวหนังสือเข้มบนพื้นสว่าง ไม่ใช่แค่เปลี่ยนสีพื้น

   ข้อควรระวังกลับด้านจากเดิม: --accent เป็นเขียวน้ำทะเล "เข้ม" ตัวหนังสือบนพื้นสีนี้
   จึงต้องเป็นสีขาว (--on-accent) ไม่ใช่สีพื้นหน้าแบบธีมมืด

   พื้นทุกตัวเป็นสีทึบโดยตั้งใจ ไม่ใช่ขาวโปร่ง — แถบบน แถบล่าง แถบข้าง และหัวตาราง
   เป็น sticky/fixed ถ้าโปร่งแสงจะเห็นเนื้อหาไหลผ่านอยู่ข้างหลังตอนเลื่อน อ่านไม่ออก */
:root{
  /* พื้นและเส้น — ทุกค่าทึบ เห็นพื้นไล่สีได้ตรงที่ไม่มีกล่องทับเท่านั้น */
  --bg:#cfe7e2;             /* สีแทนพื้นไล่สีเวลาต้องใช้เป็นสีเดี่ยว เช่นช่องที่เลยเวลาแล้ว */
  --surface:#fbfefd;        /* การ์ด แถบ ช่องกรอก */
  --surface-2:#e5f3ef;      /* หัวตาราง แถบสรุป ชิป */
  --hover:#f0f9f6;          /* พื้นแถวตอนเอาเมาส์ชี้ */
  --line:#bcd8d4;           /* เส้นขอบหลัก */
  --line-soft:#d7eae6;      /* เส้นคั่นในตาราง — จางกว่า --line ขึ้นไปหาสีพื้นกล่อง */
  --line-strong:#7fada9;    /* ขอบตอนชี้/โฟกัส เข้มกว่าเส้นปกติ */

  /* ตัวอักษร ไล่จากเข้มสุด (เด่นสุด) ไปจางสุด — กลับทิศจากธีมมืดเดิม */
  --ink:#08292c;            /* หัวข้อและตัวเลขสำคัญ */
  --ink-2:#14454a;          /* เนื้อความ */
  --ink-3:#24545a;          /* ป้ายกำกับ ข้อมูลรอง */
  --ink-4:#35646a;          /* จางสุด หน่วยและ placeholder */

  /* สีหลัก = ปลายเข้มของ Marine Foam ใช้กับปุ่มหลัก ลิงก์ และสถานะ active */
  --accent:#0f5c63;
  --accent-ink:#0a464c;     /* ตอนชี้จะ "เข้มขึ้น" ไม่ใช่สว่างขึ้นแบบธีมมืด */
  --accent-weak:#e2eff0;    /* พื้นจาง = --accent ผสมลงบนพื้นขาว ~10% */
  --accent-line:#9dc0c2;
  --on-accent:#ffffff;      /* ตัวหนังสือบนพื้นสีหลัก = ขาว */

  /* สีความหมาย — เข้มพอที่จะอ่านบนพื้นสว่าง (ชุดเดิมสว่างเกินไปสำหรับธีมนี้) */
  --pos:#0f7a4e;  --pos-weak:#e0f2e8;
  --neg:#b3261e;  --neg-weak:#fbe9e7;  --neg-line:#e8b4af;
  --warn:#8a6100; --warn-weak:#fbf1dc;

  --rail-w:15rem;
  --tabbar-h:4.25rem;
  --radius:10px;            /* กล่องใหญ่ */
  --radius-sm:8px;          /* ปุ่มและช่องกรอก */
  color-scheme:light;       /* สกรอลล์บาร์ ปุ่มล้างช่องค้นหา และ autofill ของเบราว์เซอร์สว่างตาม */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background-color:#0f5c63;color:var(--ink-2);
  font:15px/1.6 "Poppins","Noto Sans Thai",-apple-system,BlinkMacSystemFont,"Segoe UI","Sarabun",sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* ---------------- พื้นหลัง Marine Foam ----------------
   ไล่สี 145 องศาสี่สต็อป + เกรนละเอียด แล้วเบลอบาง ๆ กันสีเป็นแถบ (banding)
   สูตรเดียวกับที่ผู้ใช้ส่งมาจาก 21st.dev Gradient Builder แต่ทำเป็น CSS ชั้นเดียว
   ไม่ใช่คอมโพเนนต์ React เพราะแอปนี้เรนเดอร์จากเซิร์ฟเวอร์ล้วน

   ทำไมต้องเป็น position:fixed ไม่ใช่ใส่พื้นให้ body ตรง ๆ: หน้าที่ยาวกว่าจอจะยืดพื้นไล่สี
   ตามความสูงทั้งหน้า สีที่เห็นบนจอจึงเปลี่ยนไปตามความยาวของหน้า หน้าที่ยาวต่างกัน
   จะได้พื้นคนละสีกัน ตรึงไว้กับ viewport แล้วทุกหน้าได้พื้นเดียวกันพอดี

   inset ติดลบไว้กันขอบขาวที่เกิดจาก blur ดึงสีจากนอกกรอบเข้ามา */
body::before{
  content:"";position:fixed;inset:-2vmax;z-index:-1;pointer-events:none;
  background-color:#0f5c63;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.060'/></svg>"),
    linear-gradient(145deg,#0f5c63 0%,#3f9ea8 33%,#a9e2d9 67%,#eaf7f2 100%);
  background-size:120px 120px,cover;
  background-blend-mode:overlay,normal;
  filter:blur(.5vmax);
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{color:var(--ink);margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.num{font-variant-numeric:tabular-nums}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ================= โครงหน้า =================
   จอแคบ: แถบชื่อบน + เนื้อหา + แถบเมนูล่าง
   จอกว้าง: แถบข้างซ้ายค้างไว้ + เนื้อหา (แถบล่างหายไป) */
.app{min-height:100vh}
.main{min-width:0}

/* เนื้อหาวางบนแผ่นสว่างโปร่ง ไม่ใช่วางบนพื้นไล่สีตรง ๆ
   พื้น Marine Foam มีทั้งโซนเข้ม (#0f5c63) และโซนเกือบขาว (#eaf7f2) ตัวหนังสือสีเข้ม
   บนโซนเข้มเหลือคอนทราสต์ ~1.3:1 อ่านไม่ออก และของที่ไม่ได้อยู่ในกล่องไหนเลย
   (หัวข้อหน้า คำอธิบายใต้หัวข้อ หมายเหตุ คำอธิบายสัญลักษณ์) มีอยู่แทบทุกหน้า
   จะไล่ใส่พื้นให้ทีละชิ้นก็พลาดง่าย แผ่นเดียวคลุมทั้งหน้าจึงคุมได้แน่นอนกว่า

   ค่า .72 เป็นจุดที่คำนวณไว้: ตัวหนังสือจางสุด (--ink-4) บนแผ่นนี้ที่วางบนจุดเข้มสุด
   ของพื้นไล่สี ยังได้ ~4.9:1 ผ่าน WCAG AA ถ้าลดลงกว่านี้ต้องทำ --ink-4 ให้เข้มขึ้นอีก
   margin รอบนอกเปิดให้เห็นพื้นไล่สีเป็นกรอบ ไม่งั้นแผ่นนี้จะกินจอทั้งจอ */
.page{max-width:80rem;margin:.75rem auto;padding:1rem 1rem calc(var(--tabbar-h) + 1.5rem);
  background:rgba(252,255,254,.72);border:1px solid rgba(255,255,255,.5);
  border-radius:var(--radius)}
/* หน้าเข้าสู่ระบบ/สมัครสมาชิกไม่เอาแผ่นนี้ — การ์ดของมันลอยอยู่บนพื้นไล่สีโดยตรง */
.page:has(>.authwrap){background:none;border:0}

/* ---------- แถบชื่อบน (เฉพาะจอแคบ) ---------- */
.topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:.75rem;
  min-height:3.25rem;padding:.5rem .9rem;
  background:var(--surface);border-bottom:1px solid var(--line)}
.topbar .brand{font-weight:650;color:var(--ink);font-size:.95rem;letter-spacing:-.01em}
.topbar .who{margin-left:auto;font-size:.8rem;color:var(--ink-3);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:11rem}

/* ---------- แถบข้างซ้าย (เฉพาะจอกว้าง) ---------- */
.rail{display:none}
.rail-brand{display:flex;align-items:center;gap:.6rem;padding:1.1rem 1.15rem .9rem;
  font-weight:650;color:var(--ink);font-size:1rem;letter-spacing:-.01em}
.rail-brand .mark{display:flex;align-items:center;justify-content:center;
  width:1.75rem;height:1.75rem;border-radius:var(--radius);
  background:var(--accent);color:var(--on-accent);flex:0 0 auto}
.rail-brand .mark .ic{width:16px;height:16px}
.rail nav{display:flex;flex-direction:column;gap:1px;padding:.25rem .6rem;flex:1 1 auto;overflow-y:auto}
.rail nav a{display:flex;align-items:center;gap:.65rem;min-height:2.3rem;padding:.4rem .6rem;
  border-radius:var(--radius);color:var(--ink-2);font-size:.9rem;text-decoration:none}
.rail nav a:hover{background:var(--surface-2);color:var(--ink)}
.rail nav a.on{background:var(--accent-weak);color:var(--accent-ink);font-weight:600}
.rail nav .ic{width:18px;height:18px;flex:0 0 auto;color:var(--ink-4)}
.rail nav a.on .ic{color:var(--accent)}
.rail nav a span{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-foot{border-top:1px solid var(--line);padding:.7rem .85rem;display:flex;align-items:center;gap:.6rem}
.rail-foot .id{flex:1 1 auto;min-width:0}
.rail-foot .id b{display:block;font-size:.85rem;color:var(--ink);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-foot .id span{font-size:.74rem;color:var(--ink-4)}
.rail-foot button{background:none;border:1px solid var(--line);border-radius:var(--radius);
  padding:.3rem .6rem;font:inherit;font-size:.78rem;color:var(--ink-3);cursor:pointer;white-space:nowrap}
.rail-foot button:hover{border-color:var(--neg);color:var(--neg)}

/* ---------- แถบเมนูล่าง — บริเวณที่นิ้วโป้งเอื้อมถึงตอนถือแท็บเล็ตมือเดียว ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  background:var(--surface);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom)}
.tabbar a,.tabbar summary{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.18rem;
  min-height:var(--tabbar-h);padding:.5rem .25rem;
  color:var(--ink-3);font-size:.7rem;text-decoration:none;cursor:pointer;
  list-style:none;-webkit-tap-highlight-color:transparent;position:relative}
.tabbar summary::-webkit-details-marker{display:none}
.tabbar .ic{width:22px;height:22px}
.tabbar a.on{color:var(--accent);font-weight:600}
.tabbar a.on .ic{stroke-width:2}
.tabbar a:hover{text-decoration:none}
/* ขีดบาง ๆ เหนือรายการที่เปิดอยู่ แทนการถมสีทั้งช่อง */
.tabbar a.on::before{content:"";position:absolute;top:0;left:22%;right:22%;height:2px;
  background:var(--accent);border-radius:0 0 2px 2px}

/* แผ่นเมนูที่เหลือ เปิดขึ้นมาจากด้านล่าง ปิดโดยแตะที่ไหนก็ได้ ทั้งหมดนี้ไม่ใช้ JS */
.moremenu{position:static}
.moremenu[open]>summary{color:var(--accent)}
.moremenu[open]>summary::after{content:"";position:fixed;inset:0;
  background:rgba(2,6,10,.66);z-index:-1}
.more-panel{
  position:fixed;left:0;right:0;bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  background:var(--surface);border-top:1px solid var(--line);
  box-shadow:0 -14px 32px rgba(2,6,10,.5);
  padding:.5rem .6rem .7rem;max-height:60vh;overflow-y:auto;overscroll-behavior:contain;
  animation:sheet .16s ease-out}
.more-panel a{display:flex;align-items:center;gap:.75rem;min-height:3rem;padding:.55rem .75rem;
  border-radius:var(--radius);color:var(--ink-2);font-size:.95rem;text-decoration:none}
.more-panel a.on{background:var(--accent-weak);color:var(--accent-ink);font-weight:600}
.more-panel .ic{width:20px;height:20px;color:var(--ink-4)}
.more-panel form{margin-top:.35rem;padding-top:.6rem;border-top:1px solid var(--line-soft)}
.more-panel form button{width:100%;min-height:2.9rem;background:none;border:1px solid var(--line);
  border-radius:var(--radius);font:inherit;font-size:.9rem;color:var(--ink-3);cursor:pointer}
@keyframes sheet{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.more-panel{animation:none}}

/* ================= หัวหน้าและ section ================= */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;padding:.5rem 0 1rem}
.page-head h1{font-size:1.35rem;font-weight:650;letter-spacing:-.02em}
.page-head .lead{color:var(--ink-3);font-size:.88rem;margin:.15rem 0 0}
.page-actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}

/* section คั่นด้วยเส้นบาง ๆ ไม่ใช่กล่อง — ทั้งหน้าจึงอ่านเป็นแผ่นเดียวต่อเนื่อง */
.section{padding-top:1.5rem;margin-top:1.5rem;border-top:1px solid var(--line)}
.section:first-of-type{padding-top:0;margin-top:0;border-top:none}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;
  flex-wrap:wrap;margin-bottom:.85rem}
.section-head h2{font-size:.95rem;font-weight:650;letter-spacing:-.01em}
.section-head .hint{font-size:.8rem;color:var(--ink-4)}
.note{font-size:.82rem;color:var(--ink-4);margin:.6rem 0 0;max-width:56rem}
.muted{color:var(--ink-3)}
.small{font-size:.85rem}
.mono{font-family:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:.85em;letter-spacing:-.01em}

/* ================= แถบตัวเลขสรุป =================
   แถบเดียวแบ่งช่องด้วยเส้น ไม่ใช่การ์ดหลายใบ
   ตัวเลขชุดนี้ต้องอ่านเทียบกันเป็นชุด การใส่ขอบให้แต่ละใบทำให้มันอ่านเป็นของแยกกัน */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;margin-bottom:1.25rem}
.metric{padding:.8rem 1rem;border-left:1px solid var(--line-soft)}
.metric:first-child{border-left:none}
.metric span{display:block;font-size:.76rem;color:var(--ink-3);margin-bottom:.15rem;
  letter-spacing:.01em}
.metric b{display:block;font-size:1.45rem;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.2}
.metric b.pos{color:var(--pos)}
.metric b.neg{color:var(--neg)}
.metric b.warn{color:var(--warn)}
.metric em{font-style:normal;font-size:.76rem;color:var(--ink-4);font-weight:400}

/* ================= ตาราง =================
   ขอบเดียวรอบตาราง เส้นในบางกว่าขอบนอก หัวตารางค้างไว้ตอนเลื่อน */
.table{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:auto;max-height:none}
table{width:100%;border-collapse:collapse;font-size:.9rem}
thead th{position:sticky;top:0;z-index:1;background:var(--surface-2);
  padding:.6rem .85rem;text-align:left;white-space:nowrap;
  font-size:.72rem;font-weight:650;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase;
  border-bottom:1px solid var(--line)}
tbody td{padding:.7rem .85rem;text-align:left;white-space:nowrap;
  border-bottom:1px solid var(--line-soft);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--hover)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
td.wrap{white-space:normal;min-width:11rem}
tfoot td{padding:.7rem .85rem;background:var(--surface-2);font-weight:650;color:var(--ink);
  border-top:1px solid var(--line);white-space:nowrap}
tfoot td.n{text-align:right;font-variant-numeric:tabular-nums}
tr.dim{color:var(--ink-4)}
tr.dim .pname{color:var(--ink-4)}

/* ชื่อสินค้าเป็นตัวหลักของแถว รหัส/รายละเอียดรองลงมาอยู่บรรทัดล่าง */
.pname{color:var(--ink);font-weight:600;text-decoration:none}
tbody tr:hover .pname{color:var(--accent-ink)}
.sub{display:block;font-size:.76rem;color:var(--ink-4);font-weight:400;
  font-variant-numeric:tabular-nums;margin-top:.1rem}
.unit{font-size:.78rem;color:var(--ink-4);font-weight:400}
.pos{color:var(--pos)}
.neg{color:var(--neg)}
.warnc{color:var(--warn)}

.tag{display:inline-flex;align-items:center;padding:.08rem .4rem;border-radius:3px;
  font-size:.72rem;font-weight:650;letter-spacing:.01em;white-space:nowrap}
.tag.pos{background:var(--pos-weak);color:var(--pos)}
.tag.neg{background:var(--neg-weak);color:var(--neg)}
.tag.warn{background:var(--warn-weak);color:var(--warn)}
.tag.flat{background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line)}

/* ================= ปุ่ม ================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:2.5rem;padding:.45rem .85rem;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--ink-2);font:inherit;font-size:.88rem;font-weight:500;
  cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--hover);border-color:var(--line-strong);color:var(--ink);text-decoration:none}
.btn .ic{width:16px;height:16px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.btn.primary:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:var(--on-accent)}
.btn.danger{color:var(--neg);border-color:var(--line)}
.btn.danger:hover{background:var(--neg-weak);border-color:var(--neg);color:var(--neg)}
.btn.quiet{border-color:transparent;background:none;color:var(--ink-3)}
.btn.quiet:hover{background:var(--surface-2);color:var(--ink)}
.btn.sm{min-height:2.05rem;padding:.25rem .6rem;font-size:.82rem}
.btn.icon{padding:.3rem;min-width:2.05rem}
.btn.block{width:100%}
.btn.lg{min-height:3.1rem;font-size:1rem;padding:.6rem 1.2rem}

/* ================= ฟอร์ม ================= */
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:0 1.1rem}
.fld{display:block;margin-bottom:1rem}
/* ป้ายกำกับช่อง — ช่องรหัสผ่านมีปุ่มลูกตาอยู่ในกล่องด้วย label จึงครอบอินพุตไม่ได้
   ป้ายของช่องพวกนั้นเลยเป็น <label for> ที่ห่อ <span> ไว้อีกชั้น ทั้งสองแบบหน้าตาเดียวกัน */
.fld>span,.fld>label>span,.fldhead>label>span{display:block;font-size:.8rem;font-weight:600;color:var(--ink-3);
  margin-bottom:.3rem}
.fld>span i,.fld>label>span i{color:var(--neg);font-style:normal}
.fld input,.fld select,.fld textarea{
  width:100%;min-height:2.6rem;padding:.5rem .65rem;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface);font:inherit;font-size:.95rem;color:var(--ink)}
.fld input::placeholder{color:var(--ink-4)}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.fld input.money{text-align:right;font-variant-numeric:tabular-nums;font-size:1.05rem}
.fld small{display:block;font-size:.78rem;color:var(--ink-4);margin-top:.3rem}
.fld.tight{margin-bottom:.6rem}
.formrow{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end}
.formrow .fld{margin-bottom:0}
.formrow .grow{flex:1 1 12rem}
.formrow .btn{min-height:2.6rem}
.actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-top:1rem}
.err{color:var(--neg);font-size:.88rem;margin:0 0 .9rem}

/* ================= ช่องยิงบาร์โค้ด =================
   ช่องเดียวของทั้งหน้าที่ต้องโฟกัสค้างไว้ จึงเป็นของชิ้นเดียวที่มีขอบเข้ม
   คนขายเหลือบมาแล้วต้องรู้ทันทีว่าเคอร์เซอร์ยังอยู่ตรงนี้ ไม่ได้หลุดไปช่องอื่น */
.scan{display:flex;gap:.6rem;margin-bottom:1.1rem}
.scan .grow{flex:1 1 auto;min-width:0;position:relative}
.scan .ic-lead{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);
  width:20px;height:20px;color:var(--ink-4);pointer-events:none}
.scan input{width:100%;min-height:3.25rem;padding:.6rem .9rem .6rem 2.7rem;
  border:1.5px solid var(--accent);border-radius:var(--radius);
  background:var(--surface);font:inherit;font-size:1.05rem;color:var(--ink)}
.scan input::placeholder{color:var(--ink-4);font-size:.98rem}
.scan input:focus{outline:none;box-shadow:0 0 0 3px var(--accent-weak)}
.scan .btn{min-height:3.25rem;padding:.5rem 1.1rem}

/* ================= ตัวปรับจำนวน −/+ =================
   คลิกเดียวเปลี่ยนจำนวน ไม่ต้องพิมพ์แล้วกดยืนยัน
   ปุ่มกว้าง 2.5rem ขึ้นไปเพื่อให้กดโดนด้วยนิ้วโป้งโดยไม่ต้องเล็ง */
.stepper{display:inline-flex;align-items:stretch;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.stepper button{width:2.6rem;border:none;background:var(--surface);color:var(--ink-2);
  font:inherit;font-size:1.15rem;line-height:1;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.stepper button:hover{background:var(--accent-weak);color:var(--accent-ink)}
.stepper button:active{background:var(--accent-line)}
.stepper input{width:3.6rem;min-height:2.5rem;border:none;border-left:1px solid var(--line);
  border-right:1px solid var(--line);text-align:center;font:inherit;font-size:.95rem;
  font-variant-numeric:tabular-nums;color:var(--ink);background:var(--surface);padding:.3rem .2rem}
.stepper input:focus{outline:none;background:var(--accent-weak)}
/* ปุ่มยืนยันจำนวนที่พิมพ์เอง ซ่อนไว้ให้คีย์บอร์ด/สกรีนรีดเดอร์ยังใช้ได้
   คนพิมพ์เองกด Enter ในช่องก็ submit ได้อยู่แล้ว */
.stepper .apply{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.qtycell{display:flex;align-items:center;justify-content:flex-end;gap:.5rem}

/* ================= หน้าขาย ================= */
/* จอกว้าง: ตะกร้าซ้าย สรุปยอดขวาค้างไว้ ไม่ต้องเลื่อนหาปุ่มคิดเงิน
   จอแคบ: เรียงลงมา แล้วแถบคิดเงินไปติดขอบล่างแทน */
.till{display:grid;gap:1.1rem}
.cart-total{display:none}

/* แถบคิดเงินติดขอบล่าง เหนือแถบเมนู — อยู่ในระยะนิ้วโป้งพอดี */
.paybar{
  position:fixed;left:0;right:0;bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  z-index:20;background:var(--surface);border-top:1px solid var(--line);
  padding:.7rem .9rem;box-shadow:0 -6px 20px rgba(2,6,10,.4)}
.paybar-in{max-width:80rem;margin:0 auto;display:flex;align-items:center;gap:.75rem}
.paybar .sum{flex:1 1 auto;min-width:0}
.paybar .sum span{display:block;font-size:.74rem;color:var(--ink-3)}
.paybar .sum b{display:block;font-size:1.6rem;font-weight:650;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.15}
.paybar .btn{flex:0 0 auto}

.paypick{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-bottom:.9rem}
.paypick label{display:flex;align-items:center;justify-content:center;min-height:2.7rem;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  font-size:.9rem;font-weight:600;color:var(--ink-3);cursor:pointer}
.paypick input{position:absolute;opacity:0;pointer-events:none}
.paypick label:has(input:checked){background:var(--accent-weak);border-color:var(--accent);
  color:var(--accent-ink)}

/* ปุ่มเลือกสินค้าที่ไม่มีบาร์โค้ด — เป้ากดใหญ่ ไม่ต้องเล็ง */
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.5rem}
.picks form{margin:0}
.pick{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;width:100%;
  min-height:3.5rem;padding:.6rem .8rem;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);font:inherit;text-align:left;cursor:pointer}
.pick:hover{border-color:var(--accent);background:var(--accent-weak)}
.pick b{color:var(--ink);font-size:.92rem;font-weight:600}
.pick span{color:var(--ink-3);font-size:.78rem;font-variant-numeric:tabular-nums}

/* ================= สถานะว่างและข้อความแจ้ง ================= */
.empty{padding:2.75rem 1.25rem;text-align:center;background:var(--surface);
  border:1px dashed var(--line);border-radius:var(--radius);color:var(--ink-3)}
.empty p{margin:0 0 .35rem}
.empty .btn{margin-top:1rem}

.msg{display:flex;align-items:flex-start;gap:.6rem;padding:.7rem .9rem;margin:0 0 1rem;
  border:1px solid var(--line);border-left-width:3px;border-radius:var(--radius);
  font-size:.9rem;background:var(--surface)}
.msg.ok{border-left-color:var(--pos);background:var(--pos-weak);color:var(--pos)}
.msg.bad{border-left-color:var(--neg);background:var(--neg-weak);color:var(--neg)}
.msg.warn{border-left-color:var(--warn);background:var(--warn-weak);color:var(--warn)}
.msg .btn{margin-left:auto;flex:0 0 auto}

/* ================= ตัวกรองช่วงเวลา ================= */
.toolbar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem}
.toolbar .search{flex:1 1 18rem;min-width:0;position:relative}
.toolbar .search .ic-lead{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--ink-4);pointer-events:none}
.toolbar .search input{width:100%;min-height:2.6rem;padding:.5rem .7rem .5rem 2.4rem;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  font:inherit;font-size:.95rem;color:var(--ink)}
.toolbar .search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.toolbar select{min-height:2.6rem;padding:.5rem 2rem .5rem .7rem;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface);font:inherit;font-size:.9rem;color:var(--ink)}
.toolbar input[type=date]{min-height:2.6rem;padding:.5rem .7rem;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface);font:inherit;font-size:.9rem;color:var(--ink)}
.toolbar .check{display:inline-flex;align-items:center;gap:.45rem;font-size:.88rem;color:var(--ink-2);
  padding:.5rem .2rem}
.toolbar .check input{width:1.05rem;height:1.05rem;accent-color:var(--accent)}

/* ================= กราฟ =================
   ตัวกราฟชิดซ้ายและเลื่อนดูได้ในกล่องของตัวเอง (.chart-scroll ดูส่วนหน้ารายงานท้ายไฟล์)
   แท่งยอดขายเป็นสีหลัก แท่งกำไรทับอยู่ข้างในเป็นสีเขียว — อ่านเป็น "ส่วนที่เหลือจากยอดนั้น" */
.chart{margin-bottom:.4rem}
.bars{height:10.5rem;display:block}
.bar-sales{fill:var(--accent);opacity:.5}
.bar-profit{fill:var(--pos)}
.bar-label{font-size:10px;fill:var(--ink-4)}

/* ================= รายละเอียดแบบคู่คีย์-ค่า ================= */
.kv{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.25rem;margin:0;font-size:.9rem}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0;color:var(--ink);font-variant-numeric:tabular-nums}

/* กล่องเดี่ยว ใช้เฉพาะหน้าที่ยืนอยู่ลำพังจริง ๆ เช่นหน้าเข้าสู่ระบบ */
.solo{max-width:23rem;margin:9vh auto 0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.6rem 1.5rem}
.solo h1{font-size:1.2rem;font-weight:650;margin-bottom:.2rem}
.solo .lead{color:var(--ink-3);font-size:.88rem;margin:0 0 1.4rem}

/* ================= จอกว้าง ================= */
@media (min-width:1024px){
  .app{display:grid;grid-template-columns:var(--rail-w) 1fr}
  .rail{display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
    background:rgba(252,255,254,.80);border-right:1px solid var(--line)}
  .topbar{display:none}
  .tabbar{display:none}
  .page{padding:1.5rem 1.75rem 3rem}
  .page-head{padding:.25rem 0 1.25rem}
  .page-head h1{font-size:1.5rem}

  /* จอกว้างพอให้สรุปยอดอยู่ข้างตะกร้า ไม่ต้องมีแถบล่าง */
  .till{grid-template-columns:minmax(0,1fr) 20rem;align-items:start}
  .paybar{display:none}
  .cart-total{display:block;position:sticky;top:1.5rem;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    padding:1.1rem 1.15rem}
  .cart-total .grand{padding-bottom:.9rem;margin-bottom:.9rem;border-bottom:1px solid var(--line)}
  .cart-total .grand span{display:block;font-size:.78rem;color:var(--ink-3)}
  .cart-total .grand b{display:block;font-size:1.9rem;font-weight:650;color:var(--ink);
    font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.15}
}

@media (min-width:1440px){
  .page{padding-left:2.25rem;padding-right:2.25rem}
}

/* ================= ขายดีช่วงไหน ================= */
/* ประโยคสรุปบรรทัดเดียว วางบนตารางเพื่อให้คนที่ไม่อ่านตารางก็ได้คำตอบ */
.peak{margin:0 0 1rem;padding:.7rem .85rem;background:var(--accent-weak);
  border-left:3px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;
  font-size:.9rem;line-height:1.65;color:var(--ink-2)}
.peak b{color:var(--accent-ink);font-weight:650}

.sub-head{font-size:.82rem;font-weight:600;color:var(--ink-3);margin:1.1rem 0 .5rem}
.sub-head:first-of-type{margin-top:0}

/* แท่งเทียบสัดส่วน ยาวเทียบกับช่วงที่ขายดีที่สุด ไม่ใช่เทียบผลรวม */
th.share-h{font-weight:500;color:var(--ink-4)}
td.share{width:9rem;min-width:6rem}
td.share i{display:block;height:.45rem;border-radius:3px;background:var(--accent-line)}
tr.dim td.share i{background:var(--line)}
.tag em{font-style:normal;color:var(--ink-4);margin-left:.25rem}

/* ================= หน้ารายงาน — โครงเดียวกับ money.t0r.app (app3) =================
   หน้ารายงานของ app3 วางเป็นสามชั้น: หัวหน้าพร้อมปุ่มของหน้านั้น → แถบเครื่องมือที่เป็น
   ราง .seg → แถบสรุปแบบการ์ดที่มี "ตัวเลขนำ" หนึ่งตัวมาก่อนตัวเลขประกอบ
   คลาสในส่วนนี้จึงใช้ชื่อเดียวกับฝั่งนั้นทั้งหมด ใครแก้สองแอปพร้อมกันจะได้ไม่ต้องแปลชื่อ */

/* ป้ายกำกับตัวเล็กเหนือตัวเลข — ตัวพิมพ์ใหญ่เว้นห่าง อ่านเป็นหัวข้อไม่ใช่เนื้อความ */
.cap{display:block;font-size:.78rem;font-weight:600;letter-spacing:.07em;
  color:var(--ink-4);text-transform:uppercase}

/* ราง .seg: พื้นจม ตัวที่เลือกเป็นชิปพื้นกล่อง — เบากว่าการถมสีเข้มทั้งปุ่มแบบเดิม
   หน้าที่มีทั้งรางและฟอร์มช่วงวันที่เรียงกันจะได้ไม่กลายเป็นแถบสีสองก้อนแย่งสายตากับตัวเลข */
.seg{display:inline-flex;gap:2px;padding:3px;max-width:100%;overflow-x:auto;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
  scrollbar-width:none;-ms-overflow-style:none}
.seg::-webkit-scrollbar{display:none}
.seg a{display:inline-flex;align-items:center;min-height:2.1rem;padding:.3rem .75rem;
  border:1px solid transparent;border-radius:calc(var(--radius) - 4px);
  color:var(--ink-3);font-size:.85rem;text-decoration:none;white-space:nowrap}
.seg a:hover{color:var(--ink);text-decoration:none}
.seg a.on{background:var(--surface);border-color:var(--line);color:var(--ink);font-weight:600}

/* แถบสรุปแบบการ์ด: ตัวเลขนำกินเต็มแถวบนจอแคบ และเป็นคอลัมน์ที่กว้างกว่าเพื่อนบนจอกว้าง
   ลำดับการอ่านอยู่ที่ตำแหน่ง ไม่ใช่ที่ขนาดตัวอักษร — ตัวเลขทุกใบจึงโตเท่ากัน
   ห้าตัวที่โตไม่เท่ากันอ่านเทียบกันยาก ทั้งที่เป็นเงินหน่วยเดียวกันทั้งแถบ */
.summary{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;margin-bottom:1.5rem}
/* บรรทัด .asof ลอยอยู่ใต้แถบโดยไม่กินความสูง (ดูกฎของมันข้างล่าง) ต้องเผื่อที่ให้มันเอง
   ไม่งั้นมันจะไปชนหัวข้อของส่วนถัดไป */
.summary:has(.asof){margin-bottom:2.1rem}
.summary .lead-group{grid-column:1/-1;position:relative;display:flex;flex-direction:column;
  margin-bottom:1.15rem}
.summary .summary-lead,.summary .metric{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);min-width:0}
.summary .summary-lead{flex:1;padding:.8rem 1.05rem .9rem;border-left:1px solid var(--line)}
.summary .metrics{display:contents}
.summary .metric{padding:.7rem 1.05rem .75rem;border-left:1px solid var(--line)}
.lead-val{display:block;margin-top:.3rem;font-size:1.75rem;line-height:1.25;font-weight:650;
  color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.lead-val.pos{color:var(--pos)}
.lead-val.neg{color:var(--neg)}
/* บรรทัดกำกับใต้การ์ดตัวเลขนำ วางลอยแบบ absolute จึงไม่กินความสูงของแถว
   ถ้าปล่อยให้อยู่ในสายการวางปกติ การ์ดใบนี้จะเตี้ยกว่าเพื่อนทั้งแถว */
.asof{position:absolute;top:100%;right:.15rem;margin:.25rem 0 0;
  text-align:right;font-size:.72rem;color:var(--ink-4)}
/* สามช่องบนจอแคบ: ช่องท้ายกินเต็มแถว ไม่ทิ้งไว้ครึ่งแถวโดดเดี่ยวข้างที่ว่าง */
@media (max-width:539px){
  .summary .metrics.three>.metric:last-child,
  .summary .metrics.five>.metric:last-child{grid-column:1/-1}
}
@media (min-width:700px){
  .summary{gap:.8rem}
  .summary:has(.metrics.three){grid-template-columns:1.4fr repeat(3,1fr)}
  .summary:has(.metrics.four){grid-template-columns:1.3fr repeat(4,1fr)}
  .summary .lead-group{grid-column:auto;margin-bottom:0}
}
/* บรรทัดขยายใต้ตัวเลขในกล่องสรุป — ตัวเล็กสีจาง ไม่ใช่ .cap ที่เป็นตัวพิมพ์ใหญ่ */
.metric .sub{display:block;margin-top:.15rem;font-size:.74rem;color:var(--ink-3);
  line-height:1.4;font-weight:400;font-variant-numeric:tabular-nums}
/* แถบตัวเลขที่ยืนเดี่ยวโดยไม่มีตัวเลขนำนำหน้า ต้องมีขอบของตัวเอง (เหมือน .metrics.boxed ของ app3) */
.metrics.two{grid-template-columns:repeat(2,1fr)}
.metrics.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:539px){.metrics.three{grid-template-columns:repeat(2,1fr)}}

/* กราฟไม่มีกล่องครอบ — มันมีเส้นฐานกับเส้นอ้างอิงของตัวเองอยู่แล้ว
   ชิดซ้ายเสมอ ไม่จัดกึ่งกลาง ตัวเลขกำกับแกนจะได้ตรงแนวกับหัวข้อส่วนและตารางข้างล่าง */
.chart-scroll{display:flex;overflow-x:auto}
.chart-scroll .bars{flex:0 0 auto}
.bar-grid{stroke:var(--line-soft);stroke-width:1}
.bar-axis{stroke:var(--line);stroke-width:1}
.bar-tick{font-size:9px;fill:var(--ink-4);font-variant-numeric:tabular-nums}
.legend-bars{display:flex;gap:1.1rem;margin:.4rem 0 0;font-size:.74rem;color:var(--ink-3)}
.legend-bars i{display:inline-block;width:1rem;height:4px;border-radius:20px;
  margin-right:.4rem;vertical-align:3px}
.legend-bars i.sales{background:var(--accent);opacity:.5}
.legend-bars i.profit{background:var(--pos)}

/* ================= ปุ่มเปิดดูรหัสผ่าน =================
   หน้าตาและการวางปุ่มยกมาจาก food.t0r.app (app5) — คลาส .pwfield/.pwtoggle ชื่อเดียวกัน
   ปุ่มเป็นสี่เหลี่ยม 44px ลอยอยู่ในกรอบช่องกรอกทางขวา จัดกึ่งกลางแนวตั้ง ไม่ใช่แถบสูงเต็มช่อง
   44px คือขนาดเป้ากดขั้นต่ำที่กดด้วยนิ้วโป้งบนแท็บเล็ตได้โดยไม่ต้องเล็ง ซึ่งเป็นเครื่อง
   ที่ทั้งสองแอปถูกใช้งานจริง ส่วนความสูงหักขอบ 1px สองด้านออก ปุ่มจึงไม่ทับเส้นกรอบ
   (app5 เขียนตายตัวเป็น 43px เพราะช่องกรอกของเขาสูง 45px — ของที่นี่สูงไม่เท่ากันทุกหน้า)

   ไอคอนใช้ 1em รับขนาดจาก font-size ของปุ่มเหมือน icons.tsx ของ app5 ทั้งชุด
   สีปกติเป็นสีป้ายกำกับ ชี้แล้วเป็นสีหลัก และไม่เปลี่ยนสีตามสถานะกด — สถานะบอกด้วย
   ตัวไอคอน (ตาเปิด/ตาขีด) อยู่แล้ว ย้อมสีเพิ่มอีกชั้นทำให้ปุ่มดูเหมือนกำลังโดนเลือกอยู่

   ที่ต่างจาก app5 คือ progressive enhancement: ที่นั่นเป็น React ปุ่มมีก็ต่อเมื่อมี JS
   ที่นี่หน้าเว็บมาจากเซิร์ฟเวอร์ ปุ่มจึงถูกส่งมาพร้อม hidden แล้ว app.js เป็นตัวเอาออก
   เบราว์เซอร์ที่ไม่รันสคริปต์จะไม่เห็นปุ่มที่กดแล้วไม่มีอะไรเกิดขึ้น และฟอร์มยังส่งได้ครบ */
.pwfield{position:relative;display:block}
/* เว้นที่ด้านขวาให้ปุ่ม ไม่งั้นรหัสยาว ๆ จะวิ่งไปอยู่ใต้ปุ่มจนอ่านไม่ออกตอนกดดู */
.pwfield input{width:100%;padding-right:3rem}
.pwtoggle{position:absolute;top:50%;right:1px;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;
  width:44px;height:calc(100% - 2px);padding:0;border:0;background:none;
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--ink-3);font-size:1.15rem;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pwtoggle[hidden]{display:none}
.pwtoggle:hover{color:var(--accent)}
/* โฟกัสต้องเห็นชัด — ปุ่มนี้ไล่ด้วย Tab ได้ offset ติดลบเพื่อให้กรอบอยู่ในช่อง ไม่ล้นออกนอกขอบ */
.pwtoggle:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.pwtoggle .ic{width:1em;height:1em;stroke-width:1.8}
.pwtoggle .ic-off{display:none}
.pwtoggle[aria-pressed=true] .ic-on{display:none}
.pwtoggle[aria-pressed=true] .ic-off{display:block}
/* ช่องตั้งรหัสในตารางผู้ใช้ เดิมเป็นสไตล์ฝังในเทมเพลต ย้ายมาเป็นคลาสเพราะตอนนี้มีปุ่มอยู่ในกล่องด้วย */
.pw-cell{display:flex;align-items:center;gap:.5rem}
.pw-cell .pwfield{width:10rem}
.inp{min-height:2.5rem;padding:.4rem .6rem;border:1px solid var(--line);
  border-radius:var(--radius-sm);font:inherit;color:var(--ink);background:var(--surface)}
.inp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}

/* ================= พิมพ์ =================
   หน้าจอเป็นธีมมืด แต่กระดาษต้องเป็นหมึกดำบนขาว การพิมพ์พื้นมืดออกมาคือหมึกหมดตลับ
   และเครื่องพิมพ์ส่วนใหญ่ตัดพื้นหลังทิ้งอยู่แล้ว ตัวหนังสือสว่างจะกลายเป็นขาวบนขาว
   จึงกลับค่าตัวแปรทั้งชุดตรงนี้ที่เดียว กฎอื่นทั้งไฟล์ไม่ต้องรู้เรื่องนี้เลย */
@media print{
  body::before{display:none}
  :root{
    --bg:#fff;--surface:#fff;--surface-2:#f4f6f8;--hover:#fff;
    --line:#c8ced5;--line-soft:#e4e8ec;--line-strong:#98a1aa;
    --ink:#11161c;--ink-2:#39424c;--ink-3:#5c6670;--ink-4:#6f7883;
    --accent:#1c4f82;--accent-ink:#16416c;--accent-weak:#eaf1f8;--accent-line:#c3d7e9;
    --on-accent:#fff;
    --pos:#136c43;--pos-weak:#e8f4ee;--neg:#a72b1e;--neg-weak:#fcefed;
    --warn:#8a6100;--warn-weak:#fdf5e4;
    color-scheme:light;
  }
  .rail,.topbar,.tabbar,.paybar,.page-actions,.btn,.seg,.pwtoggle,form,.authart{display:none!important}
  /* ซ่อนแถบซ้ายอย่างเดียวไม่พอ: .app เป็นกริดสองคอลัมน์ พอ .rail หายไปแต่รางคอลัมน์ยังอยู่
     เนื้อหาจะเลื่อนไปนั่งในรางกว้าง 15rem แล้วทั้งหน้าถูกบีบเหลือเศษหนึ่งของกระดาษ */
  .app{display:block}
  body{background:#fff;color:#11161c}
  .page{padding:0;max-width:none}
  .table,.metrics,.summary .metric,.summary .summary-lead{border:1px solid var(--line)}
  thead th{position:static}
}

/* ================================================================
   ของที่แอปนี้มีเพิ่มจาก app4
   ================================================================ */

/* ---------------- หน้าเดี่ยว (เข้าสู่ระบบ / สมัคร) ---------------- */
.solo-alt{margin:1.1rem 0 0;padding-top:1rem;border-top:1px solid var(--line-soft);
  font-size:.86rem;color:var(--ink-3);text-align:center}

/* ---------------- หน้าจัดการรูปหน้าเข้าสู่ระบบ ---------------- */
/* รูปตัวอย่างใช้สัดส่วนเดียวกับแผงซ้ายของหน้าเข้าสู่ระบบ (3:4 และ object-fit:cover)
   แอดมินจึงเห็นตั้งแต่ตอนอัปว่ารูปจะถูกครอบตรงไหน ไม่ใช่ไปเห็นตอนเปิดหน้าล็อกอินจริง */
.slidelist{display:flex;flex-direction:column;gap:.9rem}
.slideitem{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;align-items:start;
  padding:.85rem;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius)}
.slideitem img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;
  border-radius:var(--radius-sm);background:var(--bg)}
.si-body{min-width:0}
.si-body>b{display:block;color:var(--ink);font-size:.98rem;font-weight:650}
.si-body .note{margin:.2rem 0 .5rem}
.si-body .fld{margin-bottom:.6rem}
.si-acts{margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--line-soft)}
.fld input[type=file]{width:100%;padding:.55rem .7rem;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface);font:inherit;
  font-size:.86rem;color:var(--ink-2)}
.fld input[type=file]::file-selector-button{margin-right:.7rem;padding:.4rem .8rem;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface-2);color:var(--ink-2);font:inherit;font-size:.82rem;cursor:pointer}
.fld input[type=file]::file-selector-button:hover{background:var(--hover);
  border-color:var(--line-strong)}

/* ---------------- หน้าเข้าสู่ระบบ ---------------- */
/* การ์ดสองช่องกลางจอ: ซ้ายเป็นสไลด์ภาพ ขวาเป็นฟอร์ม
   ต่ำกว่า 900px ตัดช่องซ้ายทิ้งทั้งช่อง เหลือฟอร์มอย่างเดียว ไม่ได้ย่อภาพลงมาวางไว้ข้างบน
   เพราะภาพเป็นของประดับล้วน บนมือถือที่คนเปิดมาเพื่อล็อกอินให้เร็วที่สุดมันมีแต่ดันฟอร์มลงไป

   นี่เป็นข้อยกเว้นข้อที่สองของ "ระนาบเดียว" ต่อจากการ์ดก๊วน — หน้านี้ยืนอยู่ลำพังนอกโครง
   ของแอป (ไม่มีแถบข้าง ไม่มีแถบล่าง) การ์ดจึงเป็นสิ่งเดียวที่บอกขอบเขตของเนื้อหา */
.page:has(>.authwrap){max-width:none;padding:1rem}
.authwrap{display:grid;place-items:center;min-height:calc(100dvh - 2rem)}
.authcard{display:grid;grid-template-columns:1fr;width:100%;max-width:58rem;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:18px}
.authart{display:none}
@media (min-width:900px){
  .authcard{grid-template-columns:1fr 1fr;min-height:37rem}
  .authart{display:block;position:relative;background:var(--bg)}
}

/* สไลด์ทุกใบซ้อนกันอยู่ที่เดียว ใบที่กำลังแสดงคือใบที่มี .on ใบที่กำลังออกมี .out ชั่วคราว
   ทุกใบสูงเท่ากันเพราะกินพื้นที่ช่องซ้ายทั้งช่อง (object-fit:cover) ภาพจึงไม่บิด */
.slides{position:absolute;inset:0;overflow:hidden}
.slide{position:absolute;inset:0;margin:0;opacity:0}
.slide.on{opacity:1}
.slide img{display:block;width:100%;height:100%;object-fit:cover}
.slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.4rem 1.8rem 3.2rem;
  background:linear-gradient(to top,rgba(4,32,36,.94) 30%,rgba(4,32,36,0))}
.slide figcaption b{display:block;color:#fff;font-size:1.12rem;font-weight:650;letter-spacing:-.01em}
.slide figcaption span{display:block;margin-top:.4rem;font-size:.86rem;line-height:1.55;
  color:rgba(232,240,246,.72)}

.dots{position:absolute;left:50%;bottom:1.15rem;transform:translateX(-50%);display:flex;gap:.45rem}
.dots[hidden]{display:none}
/* ชื่อสไลด์อยู่ในปุ่มเป็นข้อความจริงแล้วย่อให้มองไม่เห็น ไม่ได้ใส่เป็น aria-label
   เพราะแผงนี้ aria-hidden อยู่แล้ว ข้อความในปุ่มจึงมีไว้ให้คนอ่านโค้ดรู้ว่าปุ่มไหนคือใบไหน */
.dot{width:.5rem;height:.5rem;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.42);text-indent:-9999px;overflow:hidden;white-space:nowrap}
.dot:hover,.dot.on{background:#fff}

.authform{padding:2rem 1.5rem 1.8rem}
@media (min-width:900px){.authform{display:flex;align-items:center;padding:3rem 3.2rem}}
.authform .stag{width:100%;max-width:21rem;margin:0 auto}
.authbrand{display:inline-flex;align-items:center;gap:.45rem;margin-bottom:1.7rem;
  font-size:.82rem;font-weight:600;color:var(--ink-3)}
.authbrand .ic{width:17px;height:17px;color:var(--accent)}
.authform h1{font-size:1.55rem;font-weight:700;letter-spacing:-.025em;margin-bottom:.35rem}
.authform .lead{margin:0 0 1.7rem;font-size:.88rem;color:var(--ink-3)}
.authform .err{margin-bottom:1.1rem}
.authform form{margin:0}
.authform .solo-alt{margin-top:1.6rem}
.fldhead{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;
  margin-bottom:.35rem}
.fldhead>label{margin:0}
.fldhead>label>span{margin-bottom:0}
.fldhead .hint{font-size:.76rem;color:var(--ink-4)}

/* ------- การเคลื่อนไหว -------
   ทั้งหมดอยู่ใน no-preference เครื่องที่ตั้งค่าลดการเคลื่อนไหวจึงได้หน้าเดียวกันแบบนิ่ง ๆ
   ไม่ใช่หน้าที่ใช้ไม่ได้ (app.js ก็ไม่เลื่อนสไลด์อัตโนมัติให้ในกรณีนั้น) */
@media (prefers-reduced-motion:no-preference){
  .authcard{animation:authIn .55s cubic-bezier(.2,.7,.3,1) both}
  .stag>*{animation:authRise .5s cubic-bezier(.2,.7,.3,1) both}
  .stag>*:nth-child(1){animation-delay:.18s}
  .stag>*:nth-child(2){animation-delay:.28s}
  .stag>*:nth-child(3){animation-delay:.38s}
  .stag>*:nth-child(4){animation-delay:.48s}
  .stag>*:nth-child(5){animation-delay:.58s}
  .stag>*:nth-child(6){animation-delay:.68s}
  /* ใบที่จะเข้าเริ่มจากขวา ใบที่ออกไปทางซ้าย ทิศเดียวกับที่สายตากวาดอ่าน */
  .slide{transform:translateX(3rem);transition:opacity .8s ease-in-out,transform .8s ease-in-out}
  .slide.on{transform:none}
  .slide.out{transform:translateX(-3rem)}
  .dot{transition:background-color .3s}
}
@keyframes authIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes authRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ไอคอนลูกศรกลับด้าน ใช้ทำปุ่ม "ถัดไป" จากไอคอน "ย้อนกลับ" ตัวเดียวกัน
   แทนที่จะเก็บ path อีกชุดที่เป็นภาพสะท้อนของกันและกัน */
.ic.flip{transform:scaleX(-1)}

/* ---------------- แถบเลือกวัน ---------------- */
/* ปุ่มก่อนหน้า/ถัดไปอยู่ติดช่องวันที่ เพราะคนดูคอร์ดว่างเลื่อนทีละวัน
   ไม่ได้เปิดปฏิทินแล้วเลือกวันที่โดยตรง */
.daybar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.daybar input[type=date]{min-height:2.6rem;padding:.5rem .7rem;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface);font:inherit;color:var(--ink)}
.daybar .daylabel{color:var(--ink);font-weight:650;font-size:.95rem;margin-left:.25rem}
.daybar .btn.icon{min-height:2.6rem}

/* ---------------- ตารางคอร์ดว่าง ---------------- */
/* คอร์ดเป็นแถว เวลาเป็นคอลัมน์ ทั้งเย็นอ่านได้ในหน้าจอเดียวโดยเลื่อนแนวนอน
   คอลัมน์ชื่อคอร์ดค้างไว้ ไม่งั้นพอเลื่อนไปดูสี่ทุ่มจะไม่รู้ว่าแถวไหนคือคอร์ดอะไร */
.legend{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:.75rem;
  font-size:.78rem;color:var(--ink-3)}
.legend span{display:inline-flex;align-items:center;gap:.4rem}
.legend .sw{display:inline-block;width:.85rem;height:.85rem;border-radius:3px;
  border:1px solid var(--line);background:var(--surface-2)}
.legend .sw.free{background:var(--accent-weak);border-color:var(--accent-line)}
.legend .sw.taken{background:var(--surface-2)}
.legend .sw.mine{background:var(--pos-weak);border-color:var(--pos)}
.legend .sw.past{background:var(--bg)}

/* contain:paint จำเป็นจริง ๆ ไม่ใช่ของประดับ — overflow:auto อย่างเดียวคุมแค่การวาด
   แต่ความกว้างของตารางยังดันให้ "ทั้งหน้า" เลื่อนแนวนอนได้ (วัดแล้วเกินไป 168px ที่จอ 1280)
   ทั้งที่ควรเลื่อนอยู่ในกรอบนี้กรอบเดียว เป็นมาตั้งแต่เวอร์ชันแรก เพิ่งเห็นตอนพื้นเป็นไล่สี
   เพราะโซนที่เกินออกไปกลายเป็นแถบสีทึบข้างขวา */
.gridwrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:auto;contain:paint;-webkit-overflow-scrolling:touch}
.grid{width:auto;min-width:100%;border-collapse:separate;border-spacing:0;font-size:.85rem}
.grid thead th{position:sticky;top:0;z-index:2;background:var(--surface-2);
  padding:.5rem .35rem;min-width:4.6rem;text-align:center;white-space:nowrap;
  font-size:.72rem;font-weight:650;color:var(--ink-3);letter-spacing:.02em;
  border-bottom:1px solid var(--line)}
.grid th.cn{position:sticky;left:0;z-index:3;min-width:6.5rem;text-align:left;
  background:var(--surface-2);border-right:1px solid var(--line);
  padding:.55rem .75rem;color:var(--ink);font-size:.85rem;font-weight:600;text-transform:none}
.grid tbody th.cn{z-index:1;background:var(--surface)}
.grid tbody th.cn span{display:block;font-size:.72rem;font-weight:400;color:var(--ink-4)}
.grid td{padding:3px}

/* ช่องหนึ่งช่อง — ช่องที่ว่างเป็นลิงก์ ช่องที่ไม่ว่างเป็นข้อความเฉย ๆ
   ทุกสถานะเป็นกล่องที่มีกรอบเท่ากันหมด ขนาดเท่ากันด้วย ไม่งั้นแถวจะกระโดดเวลาสลับสถานะ
   ที่ต้องมีกรอบแม้แต่ช่องที่จองแล้ว/เลยเวลา เพราะช่องเปล่าไม่มีกรอบอ่านได้เป็น
   "ยังไม่มีข้อมูล" พอ ๆ กับ "เต็ม" — แถวที่เต็มทั้งแถวต้องดูออกว่าเต็ม
   ตัวกล่องเองจึงแทนเส้นคั่นแถวไปในตัว ตารางนี้ไม่มีเส้น hairline คั่นแถวแล้ว */
.gc{display:flex;align-items:center;justify-content:center;
  width:4.6rem;min-height:2.9rem;padding:.3rem .35rem;border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);background:var(--surface-2);
  font-size:.78rem;text-align:center;white-space:nowrap;overflow:hidden}
/* ความกว้างของช่องคงที่ ไม่ได้ยืดตามป้าย ไม่งั้นก๊วนชื่อยาวช่องเดียวดันคอลัมน์นั้น
   กว้างกว่าเพื่อนทั้งตาราง ป้ายที่ยาวเกินถูกตัดด้วย ellipsis (ตัวเต็มอยู่ใน title) */
.gc .lbl{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.gc.free .lbl,.gc.mine .lbl{font-weight:600;font-variant-numeric:tabular-nums}
a.gc.free{background:var(--accent-weak);border-color:var(--accent-line);
  color:var(--accent-ink);text-decoration:none}
a.gc.free:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
/* ช่องที่จองแล้วเป็นกล่องเรียบ ขอบจางกว่าช่องว่าง ลำดับความเด่นจึงเป็น
   ว่าง (ขอบสว่างสุด) > จองแล้ว > เลยเวลา ไม่ใช่กล่องเท่ากันหมดจนหาช่องที่กดได้ไม่เจอ */
.gc.taken{background:var(--surface-2);border-color:var(--line-soft);color:var(--ink-4)}
.gc.mine{background:var(--pos-weak);border-color:var(--pos);color:var(--pos);font-weight:600}
/* ช่องที่เลยเวลาเป็นกล่องจมลงไปในพื้นหลัง เข้มกว่าพื้นกล่องตาราง กดไม่ได้และไม่ชวนให้กด */
.gc.past{background:var(--bg);border-color:var(--line-soft);color:var(--ink-4);opacity:.5}

/* ---------------- การ์ด ---------------- */
/* ของชิ้นเดียวในแอปที่มีขอบรอบตัวจริง ๆ เพราะก๊วนหนึ่งใบต้องอ่านเป็นก้อนเดียว
   และทั้งใบกดได้ ไม่ใช่กดได้แค่ตรงชื่อ */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:.75rem}
.card{display:flex;flex-direction:column;gap:.25rem;padding:.9rem 1rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  color:var(--ink-2);text-decoration:none}
.card:hover{border-color:var(--line-strong);background:var(--hover);text-decoration:none}
.card.wide{grid-column:1/-1}
.card>b{color:var(--ink);font-size:1rem;font-weight:650;letter-spacing:-.01em}
.card .sub{font-size:.82rem;color:var(--ink-3)}
.card .kv{margin-top:.5rem}
.cardgo{margin-top:.6rem;font-size:.82rem;color:var(--accent);
  display:inline-flex;align-items:center;gap:.3rem}
.cardgo .ic{width:14px;height:14px}

.gc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}
.gc-head b{color:var(--ink);font-size:1rem;font-weight:650;letter-spacing:-.01em}
.gc-foot{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;
  margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--line-soft)}
.gc-foot .seats{font-size:.85rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.gc-foot .seats em{font-style:normal;color:var(--ink-4);font-size:.8rem}
.gc-foot .fee{color:var(--ink);font-size:.95rem;font-weight:650;font-variant-numeric:tabular-nums}

/* แถบสัดส่วนที่นั่ง — บอก "ใกล้เต็มแค่ไหน" ได้เร็วกว่าอ่านเลข 8/12 */
.bar{height:3px;margin-top:.55rem;background:var(--line-soft);border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:2px}

/* ---------------- กล่องเข้าร่วมก๊วน ---------------- */
/* ตัวเลขที่ต้องจ่ายกับปุ่มกดต้องอยู่ในสายตาเดียวกัน คนตัดสินใจจากสองอย่างนี้พร้อมกัน */
.joinbox{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1rem 1.1rem;background:var(--accent-weak);border:1px solid var(--accent-line);
  border-radius:var(--radius)}
.jb-cost span{display:block;font-size:.78rem;color:var(--ink-3)}
.jb-cost b{display:block;font-size:1.6rem;font-weight:650;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.2}
.jb-cost em{display:block;font-style:normal;font-size:.78rem;color:var(--ink-4);margin-top:.15rem}

/* ข้อความแจ้งที่มีปุ่มอยู่ในตัว เช่นคำเชิญจากคิวสำรองบนหน้าหลัก */
.msg.callout{align-items:center;justify-content:space-between;gap:.9rem;flex-wrap:wrap}
.msg.callout b{display:block;color:var(--ink)}
.msg.callout span{display:block;font-size:.82rem;color:var(--ink-3)}

.note.quote{border-left:3px solid var(--line-strong);padding-left:.8rem;color:var(--ink-3)}

/* ---------------- แจ้งเตือน ---------------- */
/* ทั้งแถวเป็นปุ่ม submit เพราะการกดอ่านเปลี่ยนสถานะ จึงต้องเป็น POST ไม่ใช่ลิงก์
   (ตัวโหลดล่วงหน้าของเบราว์เซอร์จะทำให้ทั้งหน้ากลายเป็นอ่านแล้วโดยไม่มีใครอ่าน) */
.notes{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden}
.note-row{border-bottom:1px solid var(--line-soft)}
.note-row:last-child{border-bottom:none}
.note-btn{display:block;width:100%;text-align:left;padding:.85rem 1rem;
  background:none;border:0;font:inherit;color:var(--ink-2);cursor:pointer}
.note-btn:hover{background:var(--hover)}
.note-btn b{display:block;color:var(--ink);font-weight:600;font-size:.92rem}
.note-btn span{display:block;font-size:.85rem;color:var(--ink-3);margin-top:.1rem}
.note-btn em{display:block;font-style:normal;font-size:.75rem;color:var(--ink-4);margin-top:.35rem}
/* ยังไม่อ่าน = ขีดสีหลักด้านซ้าย ไม่ใช่ถมพื้นทั้งแถว รายการที่ยังไม่อ่านสิบรายการ
   ที่ถูกถมสีทั้งหมดจะอ่านเป็นบล็อกสีเดียว แยกไม่ออกว่ามีกี่รายการ */
.note-row.unread .note-btn{border-left:3px solid var(--accent);padding-left:calc(1rem - 3px)}
.note-row.unread .note-btn b{color:var(--accent-ink)}

/* จุดแดงบนปุ่ม "เมนู" ของแถบล่าง — ในแผ่นเมนูมีตัวเลขเต็ม ตรงนี้บอกแค่ว่ามีของใหม่ */
.tabbar .dot{position:absolute;top:.75rem;right:calc(50% - 1rem);
  width:.5rem;height:.5rem;border-radius:50%;background:var(--neg)}

/* ---------------- ผังเกม ---------------- */
.round{margin-bottom:1.25rem}
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:.6rem}
.game{padding:.75rem .85rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius)}
.gm-court{font-size:.74rem;font-weight:650;color:var(--ink-3);letter-spacing:.04em;
  text-transform:uppercase;margin-bottom:.5rem}
.gm-teams{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.5rem}
.team{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.team span{font-size:.85rem;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ทีมที่ชนะเน้นด้วยสีตัวอักษรอย่างเดียว ไม่ใส่พื้น — การ์ดเกมเล็กเกินกว่าจะมีพื้นสองสี */
.team.win span{color:var(--pos);font-weight:600}
.gm-vs{font-size:.95rem;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums;
  padding:0 .35rem;white-space:nowrap}
.gm-score{display:flex;align-items:center;gap:.35rem;margin-top:.6rem;
  padding-top:.6rem;border-top:1px solid var(--line-soft)}
.gm-score span{color:var(--ink-4)}

/* ---------------- ฟอร์มในตาราง ---------------- */
/* แถวตารางที่แก้ค่าได้ในที่ ใช้กับหน้าจัดการคอร์ดและช่องเวลาที่อยู่ของสมาชิก
   ฟอร์มจริงอยู่นอก <tr> แล้วอินพุตอ้างถึงด้วย form="..." เพราะ HTML ไม่ให้วาง
   <form> คร่อม <td> หลายช่อง */
.inline{display:inline-flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.inp.tiny{width:4.5rem;text-align:right;font-variant-numeric:tabular-nums}
.inp.money{width:6rem;text-align:right;font-variant-numeric:tabular-nums}
.rowacts{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:flex-end}
.rowacts form{margin:0}
.btn.sm.danger{color:var(--neg)}
.danger-row{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--line)}
.daypick{display:flex;gap:.9rem;flex-wrap:wrap}

/* ---------------- ปุ่มเลือกคอร์ด ---------------- */
/* .pick ยกมาจาก app4 (ปุ่มเลือกสินค้าไม่มีบาร์โค้ด) ที่นี่เป็น checkbox ซ่อนอยู่ในป้าย
   คอร์ดที่ถูกจองไปแล้วยังแสดงอยู่แต่กดไม่ได้ — การซ่อนทำให้คนนับคอร์ดไม่ตรงกับที่เห็นในสนาม */
.pick.pickable{position:relative;cursor:pointer}
.pick.pickable input{position:absolute;opacity:0;pointer-events:none}
.pick.pickable:has(input:checked){background:var(--accent-weak);border-color:var(--accent)}
.pick.pickable:has(input:checked) b{color:var(--accent-ink)}
.pick.pickable:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.pick.off{opacity:.5;cursor:default}
.pick.off:hover{border-color:var(--line);background:var(--surface)}

/* ---------------- ปรับของเดิมให้เข้ากับแอปนี้ ---------------- */
/* แถบชื่อบนของจอแคบมีลิงก์ไปหน้าแจ้งเตือนพร้อมป้ายตัวเลข */
.topbar .who{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink-3);
  text-decoration:none}
.topbar .who:hover{color:var(--ink);text-decoration:none}
.metric b.sm{font-size:1rem;line-height:1.5}
.section .picks{margin-bottom:.5rem}
.section form.formrow{margin-top:1rem}
.rowacts .btn.sm.danger:hover{background:var(--neg-weak);border-color:var(--neg)}

@media (min-width:1024px){
  /* จอกว้างมีที่พอให้การ์ดก๊วนเรียงสามใบ และตารางคอร์ดไม่ต้องเลื่อนแนวนอนอีก */
  .cards{grid-template-columns:repeat(auto-fill,minmax(19rem,1fr))}
}