/* =====================================================================
 *  base.css — คอมโพเนนต์ร่วมทุกหน้า อ่านสีจากตัวแปรใน theme.css ทั้งหมด
 *  ห้าม hardcode สีแบรนด์ในไฟล์นี้
 * ===================================================================== */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; min-height:100dvh; font-family:var(--font);
  font-size:var(--fs-md); line-height:1.6; color:var(--text-on-bg);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
img,svg{ display:block; max-width:100%; }

/* ---------- โครงหน้า ---------- */
.shell{ max-width:520px; margin:0 auto; padding:var(--sp-5) var(--sp-4) var(--sp-7); }
.shell.wide{ max-width:1080px; }
.stack{ display:flex; flex-direction:column; gap:var(--sp-4); }
.stack.tight{ gap:var(--sp-3); }
.center{ text-align:center; }
.row{ display:flex; align-items:center; gap:var(--sp-3); }
.row.between{ justify-content:space-between; }
.grow{ flex:1; min-width:0; }

/* ---------- หัวเรื่อง ---------- */
.brandbar{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-2);
  padding:var(--sp-4) 0 var(--sp-5); text-align:center; }
.brandbar #logoSlot img{ max-height:72px; width:auto; }
.brandbar #logoSlot:empty{ display:none; }
.brandbar .kicker{ font-size:var(--fs-xs); letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-on-bg-muted); }
.brandbar .title{ font-size:var(--fs-xl); font-weight:800; letter-spacing:-.01em; line-height:1.25; }
.brandbar .sub{ font-size:var(--fs-sm); color:var(--text-on-bg-muted); }

h1,h2,h3{ margin:0; line-height:1.3; letter-spacing:-.01em; }
h1{ font-size:var(--fs-2xl); font-weight:800; }
h2{ font-size:var(--fs-lg); font-weight:700; }
h3{ font-size:var(--fs-md); font-weight:700; }
p{ margin:0; }
.muted{ color:var(--text-muted); }
.on-bg-muted{ color:var(--text-on-bg-muted); }
.small{ font-size:var(--fs-sm); }
.xsmall{ font-size:var(--fs-xs); }

/* ---------- การ์ด frosted glass (ทึบพอให้อ่านกลางแดด) ---------- */
.card{
  background:var(--surface);
  backdrop-filter:blur(18px) saturate(1.25); -webkit-backdrop-filter:blur(18px) saturate(1.25);
  border:1px solid var(--surface-border);
  border-radius:var(--r-lg); padding:var(--sp-5);
  box-shadow:var(--shadow-md); color:var(--text);
}
.card.flat{ box-shadow:var(--shadow-sm); }
.card.solid{ background:var(--surface-solid); backdrop-filter:none; -webkit-backdrop-filter:none; }
.card + .card{ margin-top:var(--sp-4); }
.card h1,.card h2,.card h3{ color:var(--text); }

.panel{ background:var(--surface-sunk); border-radius:var(--r-md); padding:var(--sp-4); color:var(--text); }

/* ---------- ฟอร์ม ---------- */
.field{ display:flex; flex-direction:column; gap:6px; }
.field > label{ font-size:var(--fs-sm); font-weight:600; color:var(--text); }
.field .hint{ font-size:var(--fs-xs); color:var(--text-muted); }
.req{ color:var(--danger); }

input[type=text],input[type=tel],input[type=password],input[type=email],select,textarea{
  width:100%; min-height:var(--tap-min);
  font-family:inherit; font-size:var(--fs-md); color:var(--text);
  padding:12px 14px; border-radius:var(--r-sm);
  border:1.5px solid var(--field-border, #D5E3DB); background:var(--surface-solid);
  outline:none; transition:border-color .15s, box-shadow .15s;
}
select{ appearance:none; background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235C7D6E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:42px; }
input:focus,select:focus,textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 4px var(--focus-ring); }
input[aria-invalid=true]{ border-color:var(--danger); }
input::placeholder,textarea::placeholder{ color:#A8BEB3; }

/* ช่องกรอกตัวเลขขนาดใหญ่ (ฝั่งเจ้าหน้าที่ + หน้า login) */
.bignum-input{
  font-size:var(--fs-3xl) !important; font-weight:800; text-align:center;
  letter-spacing:.22em; padding:14px 10px !important; min-height:76px;
  font-variant-numeric:tabular-nums;
}

/* ตัวเลือกวัน / ช่องติ๊ก */
.choice-group{ display:grid; gap:var(--sp-2); }
.choice{
  display:flex; align-items:center; gap:var(--sp-3);
  min-height:var(--tap-min); padding:12px 14px;
  border:1.5px solid #D5E3DB; border-radius:var(--r-sm);
  background:var(--surface-solid); color:var(--text);
  font-size:var(--fs-md); font-weight:500; cursor:pointer;
  transition:border-color .15s, background .15s;
}
.choice input{ width:22px; height:22px; accent-color:var(--accent); margin:0; flex:none; }
.choice:has(input:checked){ border-color:var(--accent); background:var(--surface-sunk); font-weight:600; }
.choice:focus-within{ box-shadow:0 0 0 4px var(--focus-ring); }

/* ---------- ปุ่ม ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  width:100%; min-height:var(--tap-min); padding:14px 20px;
  font-family:inherit; font-size:var(--fs-md); font-weight:700; line-height:1.2;
  border:none; border-radius:var(--r-pill); cursor:pointer;
  background:var(--accent); color:var(--accent-ink);
  box-shadow:var(--shadow-sm); transition:transform .12s var(--ease), opacity .15s, background .15s;
}
.btn:active:not(:disabled){ transform:translateY(1px) scale(.995); }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 4px var(--focus-ring); }
.btn:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; }
.btn.lg{ font-size:var(--fs-lg); min-height:60px; }
.btn.dark{ background:var(--brand-1); }
.btn.ghost{ background:transparent; color:var(--text-on-bg);
  border:1.5px solid var(--text-on-bg-muted); box-shadow:none; font-weight:600; }
.btn.ghost-ink{ background:transparent; color:var(--text);
  border:1.5px solid #D5E3DB; box-shadow:none; font-weight:600; }
.btn.auto{ width:auto; }
.btn .spinner{ width:18px; height:18px; border:2.5px solid rgba(255,255,255,.35);
  border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.linkbtn{ background:none; border:none; font-family:inherit; font-size:var(--fs-sm);
  font-weight:600; color:var(--text-on-bg-muted); cursor:pointer;
  min-height:var(--tap-min); display:inline-flex; align-items:center; gap:6px; }
.linkbtn.ink{ color:var(--accent); }

/* ---------- ไอคอน (inline SVG เท่านั้น ห้าม emoji) ---------- */
.ico{ width:20px; height:20px; flex:none; stroke:currentColor; fill:none;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.ico.lg{ width:28px; height:28px; }
.ico.xl{ width:40px; height:40px; }

/* ---------- แจ้งเตือนในหน้า ---------- */
.note{
  display:flex; gap:var(--sp-3); align-items:flex-start;
  border-radius:var(--r-md); padding:var(--sp-4);
  font-size:var(--fs-sm); line-height:1.65;
  background:var(--surface-sunk); color:var(--text);
  border-left:4px solid var(--accent);
}
.note.warn{ border-left-color:var(--warning); background:#FFF8EC; color:#6B4A08; }
.note.err { border-left-color:var(--danger);  background:#FEF0EF; color:#7A231B; }
.note .ico{ margin-top:2px; }
.note b{ font-weight:700; }

/* ---------- ตัวเลขลงทะเบียนขนาดใหญ่ ---------- */
.regnum{
  font-size:var(--fs-huge); font-weight:800; letter-spacing:.10em; line-height:1;
  font-variant-numeric:tabular-nums; color:var(--brand-1);
}
.regnum.on-bg{ color:var(--text-on-bg); }

/* ---------- โหลด / สถานะ ---------- */
.saving{ display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-sm); color:var(--text-muted); }
.skeleton{ background:linear-gradient(90deg,#E8F0EB 25%,#F4F9F6 50%,#E8F0EB 75%);
  background-size:200% 100%; animation:sk 1.2s infinite; border-radius:var(--r-sm); }
@keyframes sk{ to{ background-position:-200% 0; } }

/* ---------- แถบสถานะออฟไลน์ / คิวค้าง ---------- */
.netbar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  padding:10px var(--sp-4); font-size:var(--fs-sm); font-weight:600;
  text-align:center; color:#fff; background:var(--warning);
  display:none;
}
.netbar.show{ display:block; }

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(12px);
  z-index:80; max-width:min(460px,calc(100vw - 32px));
  padding:14px 18px; border-radius:var(--r-md);
  background:var(--brand-1); color:#fff; font-size:var(--fs-sm); line-height:1.55;
  box-shadow:var(--shadow-lg); opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s var(--ease);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast.err{ background:var(--danger); }

/* ---------- overlay ผลลัพธ์เต็มจอ (ฝั่งเจ้าหน้าที่) ----------
   ใช้สีทึบเต็มจอเพื่อไม่ให้ชนกับสีธีมแดงของหน้า staff */
.result{
  position:fixed; inset:0; z-index:90; display:none;
  flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:var(--sp-5); color:#fff;
}
.result.show{ display:flex; animation:pop .18s var(--ease); }
.result.ok{ background:var(--success); }
.result.no{ background:var(--danger); }
@keyframes pop{ from{ opacity:0; transform:scale(.97); } to{ opacity:1; transform:none; } }
.result .ico{ width:76px; height:76px; stroke-width:2.5; }
.result .headline{ font-size:var(--fs-2xl); font-weight:800; margin-top:var(--sp-3); }
.result .who{ font-size:var(--fs-xl); font-weight:700; margin-top:var(--sp-4); }
.result .meta{ font-size:var(--fs-md); opacity:.92; margin-top:6px; }
.result .tapout{ margin-top:var(--sp-6); font-size:var(--fs-sm); opacity:.8; }

/* ---------- เฉพาะ desktop: หน้าที่ไม่รองรับจอใหญ่ ---------- */
.mobile-only-notice{ display:none; }
@media (min-width:900px){
  body.mobile-only .shell{ display:none; }
  body.mobile-only .mobile-only-notice{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:var(--sp-4); min-height:100dvh; text-align:center; padding:var(--sp-5);
  }
}

/* ---------- utility ---------- */
.hidden{ display:none !important; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.divider{ height:1px; background:#DCE9E2; margin:var(--sp-4) 0; border:0; }
.badge{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px;
  border-radius:var(--r-pill); font-size:var(--fs-xs); font-weight:700;
  background:var(--surface-sunk); color:var(--text); }

/* =====================================================================
 *  แอปเจ้าหน้าที่ — ออกแบบให้ใช้มือเดียว กลางแดด เสียงดัง คนต่อคิว
 * ===================================================================== */

/* แถบบนสุด: บอกว่ากำลังอยู่โหมดไหน จุดไหน — กันเจ้าหน้าที่เปิดผิดลิงก์ */
.staffbar{
  display:flex; align-items:center; gap:var(--sp-3);
  background:var(--track); border:1px solid var(--surface-border);
  border-radius:var(--r-md); padding:12px 14px; color:var(--text-on-bg);
}
.staffbar .mode{ font-size:var(--fs-lg); font-weight:800; line-height:1.2; }
.staffbar .where{ font-size:var(--fs-sm); color:var(--text-on-bg-muted); margin-top:2px; }
.staffbar .count{ text-align:right; flex:none; }
.staffbar .count b{ font-size:var(--fs-xl); font-weight:800; display:block; line-height:1; }
.staffbar .count span{ font-size:11px; color:var(--text-on-bg-muted); }

/* จุดสถานะการเชื่อมต่อ */
.dot{ width:9px; height:9px; border-radius:50%; display:inline-block; flex:none; }
.dot.on{ background:#4ADE80; }
.dot.off{ background:#FBBF24; animation:pl 1.2s infinite; }

/* ช่องกรอกเลขขนาดใหญ่ */
.keyin{ text-align:center; }
.keyin label{ display:block; font-size:var(--fs-sm); font-weight:600; color:var(--text);
  margin-bottom:8px; }
.keyin input{
  font-size:56px !important; font-weight:800; text-align:center; letter-spacing:.18em;
  padding:10px 8px !important; min-height:92px; font-variant-numeric:tabular-nums;
  border-width:2px;
}
.keyin input::placeholder{ letter-spacing:.18em; color:#DCE7E1; }

/* ปุ่มสแกน */
.btn.scan{ background:var(--surface-sunk); color:var(--text); box-shadow:none;
  border:1.5px dashed #C9D6CF; font-weight:600; }

/* กล้อง */
.scanwrap{ position:relative; border-radius:var(--r-md); overflow:hidden; background:#101a15; }
.scanwrap video{ width:100%; display:block; aspect-ratio:4/3; object-fit:cover; }
.scanwrap .frame{
  position:absolute; inset:18% 14%; border:3px solid rgba(255,255,255,.9);
  border-radius:14px; box-shadow:0 0 0 100vmax rgba(0,0,0,.35);
}
.scanwrap .hint{ position:absolute; left:0; right:0; bottom:10px; text-align:center;
  color:#fff; font-size:var(--fs-sm); text-shadow:0 1px 4px rgba(0,0,0,.7); }

/* รายการล่าสุด */
.recent{ background:var(--surface); border-radius:var(--r-md); overflow:hidden;
  box-shadow:var(--shadow-sm); color:var(--text); }
.recent .head{ padding:11px 14px; font-size:var(--fs-xs); font-weight:700;
  color:var(--text-muted); background:var(--surface-sunk); }
.recent .item{ display:flex; align-items:center; gap:11px; padding:11px 14px;
  border-top:1px solid #E7EFEA; }
.recent .item .n{ font-size:var(--fs-lg); font-weight:800; font-variant-numeric:tabular-nums;
  min-width:72px; }
.recent .item .who{ flex:1; min-width:0; }
.recent .item .who b{ display:block; font-size:var(--fs-sm); font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.recent .item .who span{ font-size:11.5px; color:var(--text-muted); }
.recent .item .st{ flex:none; font-size:11.5px; font-weight:700; padding:4px 9px;
  border-radius:var(--r-pill); }
.recent .st.ok{ background:#E7F6EE; color:#0B6B3F; }
.recent .st.no{ background:#FDECEA; color:#9B2412; }
.recent .st.wait{ background:#FEF3C7; color:#7C4A03; }
.recent .empty{ padding:24px 14px; text-align:center; color:var(--text-muted);
  font-size:var(--fs-sm); }

/* overlay ผลลัพธ์: เพิ่มสถานะ "รอส่ง" สีเหลือง (ไม่ใช่สำเร็จ ไม่ใช่ผิดพลาด) */
.result.wait{ background:#B45309; }
.result .big{ font-size:64px; font-weight:800; letter-spacing:.1em; line-height:1;
  font-variant-numeric:tabular-nums; margin-top:var(--sp-2); }
.result .flag{ margin-top:var(--sp-4); background:rgba(255,255,255,.18);
  border:1.5px solid rgba(255,255,255,.5); border-radius:var(--r-md);
  padding:12px 16px; font-size:var(--fs-md); font-weight:700; line-height:1.5; }

/* เลือกโหมด */
.modelist .btn{ justify-content:flex-start; text-align:left; padding:16px 20px; }
.modelist .btn small{ display:block; font-weight:500; font-size:var(--fs-xs); opacity:.85;
  margin-top:2px; }

/* =====================================================================
 *  แอปผู้เข้าร่วม (/app/) — ใช้มือถือกลางแดด นิ้วโป้งข้างเดียว
 *  ทุกสีอ่านจากตัวแปรใน theme.css ห้าม hardcode สีแบรนด์
 * ===================================================================== */

@keyframes pl{ 0%,100%{ opacity:1; } 50%{ opacity:.28; } }

/* ---------- หน้าจอ (SPA) ---------- */
.scr{ display:none; }
.scr.on{ display:block; animation:scrIn .18s var(--ease); }
@keyframes scrIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

.scrhead{ display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:var(--sp-2) 0 var(--sp-4); }
.scrhead h2{ font-size:var(--fs-2xl); font-weight:800; color:var(--text-on-bg); }
.scrhead .back{ padding-left:0; }
.scr > .sub{ color:var(--text-on-bg-muted); font-size:var(--fs-sm); margin-bottom:var(--sp-4); }
.scr > .warn{ color:var(--text-on-bg); font-weight:700; text-align:center; }

/* หัวหน้าหลัก: กระชับกว่าหน้า login เพราะเนื้อหาใต้มันสำคัญกว่า */
.brandbar.compact-head{ align-items:stretch; padding:var(--sp-3) 0 var(--sp-5); text-align:left; }
/* หมายเลขลงทะเบียนบนหัวหน้าหลัก — สีผูกกับธีม ไม่ hardcode
   (เดิมเป็น inline style สีขาวโปร่ง พอเปลี่ยนเป็นธีมพื้นสว่างแล้วมองไม่เห็น) */
.badge.nobadge{ background:var(--brand-1); color:var(--accent-ink);
  font-size:var(--fs-lg); font-weight:800; padding:6px 14px;
  font-variant-numeric:tabular-nums; letter-spacing:.06em; }

/* ---------- แถบความคืบหน้าบนหน้าหลัก ---------- */
.strip{
  display:flex; align-items:center; gap:var(--sp-4);
  background:var(--surface); border:1px solid var(--surface-border);
  border-radius:var(--r-md); padding:14px var(--sp-4); color:var(--text);
  box-shadow:var(--shadow-sm); min-height:var(--tap-min);
  text-align:left; width:100%; font-family:inherit;
}
.strip .sn{ font-size:var(--fs-xl); font-weight:800; font-variant-numeric:tabular-nums;
  color:var(--brand-1); flex:none; line-height:1.1; }
.strip .sb{ flex:1; min-width:0; }
.strip .st{ font-size:var(--fs-sm); font-weight:600; }
.strip .bar{ height:8px; border-radius:999px; background:var(--track); overflow:hidden; margin-top:6px; }
.strip .bar i{ display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--brand-2),var(--brand-4)); transition:width .5s var(--ease); }

/* ---------- ตารางเมนู ---------- */
.grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-3); margin-top:var(--sp-4); }
.tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  min-height:104px; padding:var(--sp-4) var(--sp-3);
  background:var(--surface); border:1px solid var(--surface-border);
  border-radius:var(--r-md); box-shadow:var(--shadow-sm);
  color:var(--text); font-family:inherit; font-size:var(--fs-sm); font-weight:700;
  text-align:center; cursor:pointer; position:relative;
  transition:transform .12s var(--ease);
}
.tile:active{ transform:translateY(1px) scale(.99); }
.tile .ic{ color:var(--brand-2); display:flex; }
.tile.off{ opacity:.5; }
.tile.wide{ grid-column:1 / -1; flex-direction:row; gap:var(--sp-3); min-height:76px; }
.tile .pill{
  position:absolute; top:8px; right:8px; min-width:22px; padding:2px 7px;
  border-radius:var(--r-pill); font-size:11px; font-weight:800; line-height:1.5;
  background:var(--accent); color:var(--accent-ink);
}
.tile .pill.done{ background:var(--success); }
.tile .pill.wait{ background:var(--track); color:var(--text-muted); }

/* ---------- บัตรของฉัน ---------- */
.mycard{
  background:var(--surface-solid); border-radius:var(--r-lg); padding:var(--sp-5);
  box-shadow:var(--shadow-lg); color:var(--text); text-align:center;
}
.mycard .qr{ display:flex; justify-content:center; }
.mycard .qr canvas,.mycard .qr img{ width:min(258px,68vw); height:auto; image-rendering:pixelated; }
.mycard .bn{
  font-size:var(--fs-huge); font-weight:800; letter-spacing:.10em; line-height:1;
  font-variant-numeric:tabular-nums; color:var(--brand-1); margin-top:var(--sp-4);
}
.certwrap img,.certwrap canvas{ width:100%; height:auto; border-radius:var(--r-md);
  box-shadow:var(--shadow-md); }

/* ---------- ความคืบหน้า E-Passport ---------- */
.prog{ background:var(--surface); border:1px solid var(--surface-border);
  border-radius:var(--r-lg); padding:var(--sp-5); color:var(--text);
  box-shadow:var(--shadow-md); text-align:center; }
.prog .n{ font-size:var(--fs-huge); font-weight:800; line-height:1;
  font-variant-numeric:tabular-nums; color:var(--brand-1); margin:6px 0 var(--sp-4); }
.prog .n small{ font-size:var(--fs-lg); font-weight:700; color:var(--text-muted); }
.prog .bar{ height:14px; border-radius:999px; background:var(--track); overflow:hidden; }
.prog .bar i{ display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--brand-2),var(--brand-4)); transition:width .6s var(--ease); }

/* ---------- แท็บ ---------- */
.tabs{ display:flex; gap:6px; background:var(--track); border-radius:var(--r-pill); padding:5px; }
.tab{
  flex:1; min-height:44px; border:none; border-radius:var(--r-pill);
  background:transparent; color:var(--text-on-bg-muted);
  font-family:inherit; font-size:var(--fs-sm); font-weight:700; cursor:pointer;
  transition:background .15s, color .15s;
}
.tab.on{ background:var(--surface-solid); color:var(--text); box-shadow:var(--shadow-sm); }

/* ---------- รายการ (แต้ม / บูธ / กำหนดการ) ---------- */
.log{ background:var(--surface); border-radius:var(--r-md); overflow:hidden;
  box-shadow:var(--shadow-sm); color:var(--text); margin-top:var(--sp-3); }
.log .item{ display:flex; align-items:center; gap:var(--sp-3); padding:13px var(--sp-4); }
.log .item + .item{ border-top:1px solid #E7EFEA; }
.log .item .lead{ flex:none; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-sunk); color:var(--text-muted);
  font-size:var(--fs-xs); font-weight:800; font-variant-numeric:tabular-nums; }
.log .item.got .lead{ background:#E7F6EE; color:var(--success); }
.log .item .txt{ flex:1; min-width:0; }
.log .item .txt b{ display:block; font-size:var(--fs-sm); font-weight:700; line-height:1.4; }
.log .item .txt span{ font-size:12.5px; color:var(--text-muted); }
.log .item .tail{ flex:none; font-size:12.5px; font-weight:700; color:var(--text-muted);
  text-align:right; }
.log .item.got .tail{ color:var(--success); }
.log .empty{ padding:28px var(--sp-4); text-align:center; color:var(--text-muted);
  font-size:var(--fs-sm); line-height:1.7; }
.log .grouphead{ padding:11px var(--sp-4); font-size:var(--fs-xs); font-weight:800;
  color:var(--text-muted); background:var(--surface-sunk); }

/* ---------- กำหนดการ ---------- */
.log.sched + .log.sched{ margin-top:var(--sp-4); }
.log .grouphead.day{ padding:14px var(--sp-4); background:var(--brand-1); color:var(--accent-ink); }
.log .grouphead.day b{ display:block; font-size:var(--fs-lg); font-weight:800; }
.log .grouphead.day span{ display:block; font-size:var(--fs-sm); font-weight:600; opacity:.9; margin-top:2px; }
.log.sched .item{ align-items:flex-start; }
.log .item .when{ flex:none; width:82px; font-size:var(--fs-sm); font-weight:800;
  color:var(--brand-1); font-variant-numeric:tabular-nums; line-height:1.5; padding-top:1px; }
.sublist{ margin:7px 0 0; padding:0; list-style:none; }
.sublist li{ position:relative; padding-left:15px; font-size:13.5px; font-weight:400;
  color:var(--text-muted); line-height:1.65; }
.sublist li::before{ content:''; position:absolute; left:2px; top:.72em;
  width:5px; height:5px; border-radius:50%; background:var(--brand-3); }

/* ---------- คูปอง ---------- */
.cpcard{ background:var(--surface); border:1px solid var(--surface-border);
  border-radius:var(--r-lg); padding:var(--sp-5); color:var(--text);
  box-shadow:var(--shadow-md); text-align:center; }
.cpcard + .cpcard{ margin-top:var(--sp-3); }
.cpcard .ttl{ font-size:var(--fs-xl); font-weight:800; margin-top:var(--sp-2); }
.cpcard.used{ opacity:.92; }

/* ช่องกรอกรหัสร้าน 2 หลัก (ทางหนีทีไล่เมื่อสแกนไม่ติด) */
.codebox{ display:flex; gap:8px; margin-top:10px; }
.codebox input{ width:96px; font-size:var(--fs-xl) !important; font-weight:800;
  text-align:center; letter-spacing:.2em; font-variant-numeric:tabular-nums; }
.codebox button{ flex:1; min-height:var(--tap-min); border:none; border-radius:var(--r-sm);
  background:var(--accent); color:var(--accent-ink);
  font-family:inherit; font-size:var(--fs-md); font-weight:700; cursor:pointer; }

/* หน้ายืนยันร้าน — ชื่อร้านต้องใหญ่จนอ่านผิดไม่ได้ */
.bigshop{ background:var(--surface-solid); border-radius:var(--r-lg); padding:var(--sp-6) var(--sp-5);
  box-shadow:var(--shadow-lg); color:var(--text); text-align:center; }
.bigshop .nm{ font-size:var(--fs-2xl); font-weight:800; line-height:1.25; margin-top:var(--sp-3);
  color:var(--brand-1); }
.bigshop .wh{ font-size:var(--fs-md); color:var(--text-muted); margin-top:6px; }

/* ตั๋วที่ใช้แล้ว — นาฬิกาวิ่ง กันสกรีนช็อต */
.live{ background:var(--surface-solid); border-radius:var(--r-lg); padding:var(--sp-5);
  box-shadow:var(--shadow-lg); color:var(--text); text-align:center; margin-top:var(--sp-3); }
.live .clock{ font-size:44px; font-weight:800; letter-spacing:.06em; line-height:1.1;
  font-variant-numeric:tabular-nums; color:var(--brand-1); margin-top:var(--sp-4); }
.live .bandwrap{ height:10px; border-radius:999px; background:var(--track); overflow:hidden;
  margin-top:var(--sp-3); }
.live .band{ height:100%; width:34%; border-radius:999px;
  background:linear-gradient(90deg,var(--brand-2),var(--brand-4)); }
.pulse{ width:9px; height:9px; border-radius:50%; background:var(--success);
  display:inline-block; margin-right:7px; animation:pl 1.2s infinite; }

/* ---------- แผนที่ ---------- */
.mapbox{ background:var(--surface-solid); border-radius:var(--r-md); overflow:hidden;
  box-shadow:var(--shadow-md); color:var(--text); }
.mapbox img{ width:100%; height:auto; }
.mapbox .empty{ padding:40px var(--sp-4); text-align:center; color:var(--text-muted);
  font-size:var(--fs-sm); line-height:1.8; }

/* =====================================================================
 *  หน้าแรก (landing) — ถามให้ชัดว่าจะ "ลงทะเบียน" หรือ "เข้าสู่ระบบ"
 * ===================================================================== */
.shell.landing{ padding-top:var(--sp-7); }

.hero{ text-align:center; margin-bottom:var(--sp-6); }
.hero .herologo{ display:flex; justify-content:center; margin-bottom:var(--sp-4); }
.hero .herologo img{ max-height:var(--logo-h); width:auto; }
.hero .herologo:empty{ display:none; }
.hero .title{ font-size:var(--fs-2xl); font-weight:800; line-height:1.25; letter-spacing:-.01em; }
.hero .tag{ font-size:var(--fs-md); font-weight:600; color:var(--text-on-bg-muted); margin-top:6px; }
.hero .meta{ font-size:var(--fs-sm); color:var(--text-on-bg-muted); margin-top:4px; }

/* ปุ่มใหญ่ 2 ทางเลือก — พื้นที่กดทั้งแถบ ไม่ใช่แค่ตัวหนังสือ */
.bigbtn{
  display:flex; align-items:center; gap:var(--sp-4);
  min-height:84px; padding:18px var(--sp-5);
  border-radius:var(--r-lg); text-decoration:none;
  box-shadow:var(--shadow-md);
  transition:transform .12s var(--ease), box-shadow .15s;
}
.bigbtn:active{ transform:translateY(1px) scale(.995); }
.bigbtn .ic{ flex:none; display:flex; }
.bigbtn .tx{ flex:1; min-width:0; display:block; }
.bigbtn .tx b{ display:block; font-size:var(--fs-lg); font-weight:800; line-height:1.3; }
.bigbtn .tx span{ display:block; font-size:var(--fs-xs); margin-top:3px; line-height:1.5; }
.bigbtn .ar{ flex:none; display:flex; opacity:.7; }

.bigbtn.primary{ background:var(--accent); color:var(--accent-ink); }
.bigbtn.primary .tx span{ opacity:.88; }
.bigbtn.ghost{ background:var(--surface); color:var(--text);
  border:1.5px solid var(--surface-border); box-shadow:var(--shadow-sm); }
.bigbtn.ghost .ic{ color:var(--brand-1); }
.bigbtn.ghost .tx span{ color:var(--text-muted); }

/* ลิงก์ดูข้อมูลโดยไม่ต้องเข้าสู่ระบบ */
.quick{ margin-top:var(--sp-6); }
.quick .qhead{ text-align:center; font-size:var(--fs-xs); font-weight:600;
  color:var(--text-on-bg-muted); margin-bottom:var(--sp-3); }
.quick .qrow{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); }
.quick .qtile{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  min-height:88px; padding:var(--sp-3);
  background:var(--surface); border:1px solid var(--surface-border);
  border-radius:var(--r-md); box-shadow:var(--shadow-sm);
  color:var(--text); font-size:var(--fs-xs); font-weight:700;
  text-align:center; text-decoration:none;
}
.quick .qtile .ico{ color:var(--brand-2); }

/* ---------- ปุ่มย้อนกลับ (ต้องเห็นชัดว่ากดได้) ---------- */
.backbtn{
  display:inline-flex; align-items:center; gap:4px;
  min-height:40px; padding:8px 16px 8px 11px; margin-bottom:var(--sp-2);
  border:1.5px solid var(--surface-border); border-radius:var(--r-pill);
  background:var(--surface); color:var(--text);
  font-family:inherit; font-size:var(--fs-sm); font-weight:700;
  cursor:pointer; box-shadow:var(--shadow-sm);
  transition:transform .12s var(--ease);
}
.backbtn:active{ transform:translateY(1px); }
.backbtn .ico{ width:18px; height:18px; stroke-width:2.2; }

/* ---------- กล่อง "เร็ว ๆ นี้" สำหรับหน้าที่ยังไม่มีข้อมูล ---------- */
.soon{
  background:var(--surface); border:1px solid var(--surface-border);
  border-radius:var(--r-lg); padding:var(--sp-7) var(--sp-5);
  text-align:center; color:var(--text); box-shadow:var(--shadow-sm);
}
.soon .ic{ display:flex; justify-content:center; color:var(--brand-3); }
.soon .tt{ margin-top:var(--sp-3); font-size:var(--fs-xs); font-weight:800;
  letter-spacing:.22em; text-transform:uppercase; color:var(--brand-2); }
.soon .ds{ margin-top:var(--sp-3); font-size:var(--fs-sm); line-height:1.7; color:var(--text-muted); }
.soon .ds b{ display:block; font-size:var(--fs-md); font-weight:700; color:var(--text); margin-bottom:4px; }

/* ---------- แบนเนอร์ท้ายเว็บ ---------- */
.footban{ width:var(--footban-w); max-width:100%; height:auto; margin:0 auto;
  border-radius:var(--r-md); }

/* ---------- แถบเตือนโหมดทดสอบ (ขึ้นเฉพาะโดเมนทดสอบ) ---------- */
.testbar{
  position:fixed; top:0; left:0; right:0; z-index:70;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 14px; text-align:center;
  background:#B45309; color:#fff;
  font-size:13px; font-weight:600; line-height:1.45;
}
.testbar .ico{ width:17px; height:17px; flex:none; }
.testbar b{ font-weight:800; }
.has-testbar body{ padding-top:52px; }
@media (max-width:520px){ .has-testbar body{ padding-top:66px; } }