:root {
	--yellow: #f5b800;
	--bg: #f5f5f7;
	--ink: #29292d;
	--muted: #909096;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Noto Sans Thai', sans-serif; background: var(--bg); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid #715600; outline-offset: 2px; }
a { color: inherit; }

.sidebar { width: 216px; background: #fff; position: fixed; inset: 0 auto 0 0; padding: 26px 16px; display: flex; flex-direction: column; z-index: 50; overflow-y: auto; }
.brand { font-size: 26px; font-weight: 800; letter-spacing: -1px; padding: 0 10px; margin-bottom: 22px; display: flex; align-items: center; gap: 8px; }
.brand span { color: var(--yellow); }
.brand img { height: 1em; width: auto; }
.navbtn { border: 0; background: none; text-align: left; padding: 12px 14px; margin-bottom: 4px; color: #85858e; border-radius: 12px; width: 100%; font-size: 13px; display: flex; align-items: center; text-decoration: none; }
.navbtn b { display: inline-block; width: 26px; font-size: 16px; font-weight: 600; }
.navbtn:hover { background: #f8f4e2; color: var(--ink); }
.navbtn.active { background: var(--yellow); color: #fff; box-shadow: 0 7px 20px rgba(245,184,0,.15); }
.navbtn.active:hover { background: var(--yellow); color: #fff; }
.store { margin-top: auto; border-radius: 14px; padding: 16px; background: #fff6d8; font-size: 12px; }
.store strong { display: block; font-size: 14px; margin: 6px 0; }

.main { margin-left: 216px; padding: 26px 28px; min-height: 100vh; background-color: rgb(255 226 226); }
.top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 12px; }
.top h1 { font-size: 24px; font-weight: 700; margin: 0; }
.smalltxt { font-size: 12px; color: var(--muted); }
.avatar { width: 38px; height: 38px; background: var(--ink); color: #fff; display: grid; place-items: center; border-radius: 12px; font-size: 13px; font-weight: 700; }

.panel { background: #fff; border-radius: 16px; padding: 18px; }
.sectiontitle { font-size: 16px; font-weight: 700; margin: 0 0 14px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.stat b { display: block; font-size: 24px; margin-top: 8px; }

.table { font-size: 13px; vertical-align: middle; width: 100%; }
.table th { color: #95959c; font-weight: 500; background: #fafafa; padding: 12px; text-align: left; }
.table td { padding: 13px 12px; border-top: 1px solid #f0f0f2; }
.tablewrap { overflow-x: auto; }

.pill { font-size: 10px; padding: 5px 8px; background: #f6f6f8; border-radius: 6px; display: inline-block; }
.pill-warn { background: #fff3cd; color: #7a5a00; }
.pill-danger { background: #fde2e1; color: #a12a24; }
.pill-ok { background: #e6f4ea; color: #1e7b34; }

.btn-yellow { background: var(--yellow); border: 0; color: #fff; padding: 11px 16px; border-radius: 10px; font-weight: 600; }
.btn-yellow:disabled { opacity: .5; cursor: not-allowed; }
/* ปุ่มสีฟ้า — ใช้คู่กับ btn-yellow เช่น ปุ่ม "สมัครสมาชิก" ข้างปุ่มเข้าสู่ระบบ (2026-10-26) — เป็น <a> ได้ จัดข้อความกึ่งกลางให้ */
.btn-blue { background: #3f8bef; border: 0; color: #fff; padding: 11px 16px; border-radius: 10px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn-blue:hover { background: #2f7ae0; color: #fff; }
.btn-light-custom { background: #f5f5f7; border: 0; padding: 8px 12px; border-radius: 9px; font-size: 12px; }
.dine-btn.active { background: #72d926; color: #fff; font-weight: 600; }
.btn-outline-ink { background: #fff; border: 1px solid #e3e3e7; padding: 8px 12px; border-radius: 9px; font-size: 12px; }
/* ลิงก์เล็กในตาราง (ดูรายละเอียด / เบอร์โทร) เป็นปุ่มชิป — 2026-10-23 */
.chip-btn { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border: 1px solid #e3e3e7; border-radius: 999px; background: #fff; color: #5a5a62; font-size: 11.5px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.chip-btn:hover, .chip-btn:focus { background: #fff8e0; border-color: var(--yellow); color: #b07f00; text-decoration: none; }
.acc-shop-name { color: var(--ink); font-weight: 700; text-decoration: none; }
.acc-shop-name:hover { color: #b07f00; text-decoration: none; }
/* ปุ่มที่เป็น <a> ทั้งระบบ — ไม่มีเส้นใต้ (2026-10-23) */
a.btn-yellow, a.btn-sm-yellow, a.btn-outline-ink, a.btn-light-custom, a.btn,
a[class*="-btn"], a[class*="btn-"], a.pm-tab,
a.btn-yellow:hover, a.btn-sm-yellow:hover, a.btn-outline-ink:hover, a.btn-light-custom:hover, a.btn:hover,
a[class*="-btn"]:hover, a[class*="btn-"]:hover, a.pm-tab:hover { text-decoration: none; }

.badge-source-recipe { background: #e8f0fe; color: #1a4fb4; }
.badge-source-stock { background: #f3e8fe; color: #6b1ab4; }

.pos-totals-row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 13px; }
.pos-totals-row.total { font-weight: 700; font-size: 15px; border-top: 1px dashed #d8d8dc; margin-top: 4px; padding-top: 7px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.mobilemenu { display: none; }
.form-label.small { font-size: 12px; color: var(--muted); }

/* ── Numbered form sections (e.g. items/item_edit.php) ── */
.step-title { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.step-title > i.bi { font-size: 17px; color: var(--yellow); }
.step-badge { width: 26px; height: 26px; border-radius: 50%; background: var(--yellow); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }
.form-label.small > i.bi, .form-check-label.small > i.bi { color: var(--muted); margin-right: 4px; }
.form-label > i.bi { color: var(--muted); margin-right: 5px; }
/* icon in front of a panel title (every page except Dashboard/รายรับรายวัน) */
.sectiontitle > i.bi { color: var(--yellow); margin-right: 8px; font-size: .95em; }
.subhead { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.subhead > i.bi { color: var(--yellow); }

.icon-input { width: 56px; text-align: center; font-size: 20px; padding: 6px; }
.emoji-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.emoji-pick { width: 32px; height: 32px; border-radius: 8px; border: 1px solid #e3e3e7; background: #fff; font-size: 16px; line-height: 1; display: grid; place-items: center; padding: 0; }
.emoji-pick:hover, .emoji-pick.active { border-color: var(--yellow); background: #fff9e6; }
.hint-box { background: #fff6d8; border-radius: 12px; padding: 12px 14px; font-size: 12px; color: #6b5600; }
.unit-base-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fafafa; border-radius: 10px; padding: 12px 14px; }
.preview-card { border: 1px solid #f0f0f2; border-radius: 12px; padding: 14px; }
.preview-card .preview-result { font-size: 20px; font-weight: 700; margin: 4px 0; }
.preview-card .preview-formula { font-size: 11px; color: var(--muted); }

.colorpick { display: flex; gap: 14px; flex-wrap: wrap; }
.colorpick input { position: absolute; opacity: 0; width: 0; height: 0; }
.colorpick-option { display: flex; align-items: center; gap: 10px; border: 1px solid #e3e3e7; border-radius: 12px; padding: 10px 14px; cursor: pointer; font-size: 12px; }
.colorpick-option .swatch { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(0,0,0,.08); flex-shrink: 0; }
.colorpick-option:has(input:checked) { border-color: var(--yellow); background: #fff9e6; color: #755a00; font-weight: 600; }

.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.auth-card { background: #fff; border-radius: 18px; padding: 36px; width: 100%; max-width: 420px; }
.auth-card .brand { padding: 0; margin-bottom: 26px; justify-content: center; }
.auth-card .brand img { height: 88px; width: auto; }

@media (max-width: 900px) {
	.stats { grid-template-columns: repeat(2, 1fr); }
	.sidebar { transform: translateX(-100%); transition: .2s; width: 216px; box-shadow: 15px 0 50px rgba(0,0,0,.08); }
	.sidebar.open { transform: translateX(0); }
	.main { margin-left: 0; padding: 18px 16px; }
	.mobilemenu { display: inline-flex; border: 0; background: #fff; border-radius: 8px; padding: 8px 12px; margin-right: 8px; }
	.top h1 { font-size: 20px; }
}

@media print {
	.sidebar, .top, .no-print { display: none !important; }
	.main { margin-left: 0 !important; padding: 0 !important; }
	body { background: #fff; }

	/* 80mm thermal receipt roll (default) — height is intentionally "auto" so the page
	   grows with the number of line items instead of paginating. Shops that pick 58mm
	   in ตั้งค่าร้าน get an override from views/templates/_paper_width.php. */
	@page { size: 80mm auto; margin: 4mm 3mm; }
	.receipt-card {
		max-width: none !important;
		width: 100% !important;
		border-radius: 0 !important;
		padding: 0 !important;
	}
	/* receipt sizes are in vw (= share of the printed page width), not px: Chrome on Android ignores
	   @page size and lays the page out at the tablet's screen width, then shrinks it onto the roll —
	   px text/QR came out tiny there. Sized against the 80mm page's 74mm printable width (≈280px),
	   so desktop Chrome prints exactly as before (14px = 5vw, 13px = 4.6vw, …) and Android matches it. */
	.main { min-height: 0 !important; }
	.receipt-card { font-size: 4.6vw; }
	/* Android + RawBT ("Paper Roll"): each printed page has a fixed height (≈1.38 × its width), and RawBT
	   trims the white border off every page then scales it to the roll width. So: keep a short bill on ONE
	   page (tight spacing — the full-width item table then holds the width, so the QR keeps its size;
	   a page holding only the QR got blown up to full width), and end with a tiny dot so the trailing
	   blank feed isn't trimmed away (otherwise the cutter cuts through the last line). */
	.receipt-card .sectiontitle { font-size: 5vw !important; margin-bottom: 1vw; }
	.receipt-card .smalltxt { font-size: 3.6vw !important; }
	.receipt-card .table { font-size: 3.9vw; margin-bottom: 0; }
	.receipt-card .table th, .receipt-card .table td { padding: 1vw .7vw; }
	.receipt-card .pos-totals-row { font-size: 4.6vw; padding: .6vw 0; }
	.receipt-card .pos-totals-row.total { font-size: 5.4vw; }
	.receipt-card .mt-3, .receipt-card .mb-3 { margin-top: 2.5vw !important; margin-bottom: 0 !important; }
	/* QR ≈ its on-screen share of the receipt (200px of ~445px), centered; % of the box so it never runs off the paper */
	/* a longer bill (VAT + cash change rows, SALE-20261101-…) no longer fits RawBT's first page: the page break cut
	   through the QR and the rest of it, alone on page 2, was blown up to full width. Keep the QR block whole, and
	   start it with a full-width dashed rule so whichever page it lands on stays roll-wide (= not scaled up). */
	.receipt-card .receipt-qr-block { break-inside: avoid; page-break-inside: avoid; border-top: .4vw dashed #000; padding-top: 2vw; }
	#receiptQrBox { margin-top: 1vw !important; }
	#receiptQrBox img, #receiptQrBox canvas { width: 45% !important; height: auto !important; aspect-ratio: 1; margin: 0 auto; image-rendering: pixelated; }
	/* blank feed (the cutter sits ~15mm above the print head) closed by a small dot that stops the trim.
	   These values = the print the user approved (SALE-…-0035/0051, 2026-10-30); later tweaks were rolled back.
	   Blank 20vw → 7vw: user marked ~⅓ of the printed blank as enough (it prints scaled up on RawBT's 2nd page). */
	.receipt-card::after { content: '.'; display: block; text-align: center; padding-top: 7vw; font-size: 3vw; line-height: 1; }
	.receipt-card { break-inside: avoid; page-break-inside: avoid; }
}

/* ── POS screen (visual language ported from index_mocup.html, adapted to real data) ── */
.pos-wrap { display: grid; grid-template-columns: minmax(0,1fr) 325px; gap: 24px; align-items: start; }
.pos-search { width: 100%; border: 0; background: #fff; padding: 14px 18px; border-radius: 12px; outline-color: var(--yellow); margin-bottom: 20px; }
.pos-categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; margin-bottom: 18px; }
.pos-category { background: #fff; border: 1px solid transparent; border-radius: 13px; padding: 14px 6px; color: #929299; font-size: 11px; text-align: center; }
.pos-category.active { border-color: var(--yellow); background: #fff9e6; color: #755a00; }
.pos-category span { display: block; font-size: 24px; margin-bottom: 6px; }
.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.pos-tile { padding: 0; border: 1px solid transparent; background: #fff; border-radius: 16px; overflow: hidden; text-align: left; transition: .18s; cursor: pointer; }
.pos-tile:hover { border-color: var(--yellow); transform: translateY(-2px); }
.pos-tile.unavailable { cursor: not-allowed; }
.pos-tile.unavailable:hover { border-color: transparent; transform: none; }
.pos-tile.unavailable .pos-tile-img-wrap, .pos-tile.unavailable .pos-tile-info { filter: grayscale(1); opacity: .5; }
.pos-tile-img-wrap { height: 110px; display: grid; place-items: center; font-size: 52px; background: radial-gradient(ellipse, #fff4df, #fff 70%); overflow: hidden; }
.pos-tile-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.pos-tile-info { padding: 0 14px 14px; }
.pos-tile .name { font-weight: 600; font-size: 13px; display: block; margin-top: 12px; }
.pos-tile .tag { font-size: 10px; color: #71946d; margin: 6px 0; }
.pos-tile .price { font-weight: 700; font-size: 15px; margin-top: 10px; }
.pos-tile .add { float: right; border-radius: 9px; background: #fff5cf; color: #ad7d00; width: 28px; height: 28px; display: grid; place-items: center; font-size: 16px; }
.pos-notice { background: #fff8e5; border-radius: 12px; padding: 13px 16px; font-size: 12px; display: flex; gap: 12px; align-items: center; margin-top: 20px; color: #856714; }
.pos-bill { position: sticky; top: 14px; align-self: start; }
.pos-billhead { display: flex; justify-content: space-between; border-bottom: 1px dashed #e5e5e8; padding-bottom: 16px; }
.pos-orderrow { display: flex; gap: 10px; align-items: center; margin: 16px 0; }
.pos-orderrow .emoji { background: #fff8e8; border-radius: 12px; font-size: 22px; padding: 6px; width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; }
.pos-orderrow .emoji img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.pos-orderrow strong { font-size: 12px; }
.pos-orderrow .mods { font-size: 10px; color: var(--muted); }
.qty-stepper { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.qty-stepper button { border: 0; width: 22px; height: 22px; border-radius: 6px; background: #f3f3f5; display: grid; place-items: center; }
.qty-stepper span { font-size: 12px; }
.pos-cart-empty { text-align: center; padding: 40px 0; color: var(--muted); font-size: 13px; }
.pos-total { border-top: 1px dashed #ddd; padding-top: 16px; margin-top: 18px; }
.pos-line { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 10px; }
.pos-line.grand { font-size: 19px; font-weight: 700; }
.modifier-group-box { border: 1px solid #efefef; border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.modifier-group-box .group-label { font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.payment-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }

@media (max-width: 1150px) {
	.pos-wrap { grid-template-columns: 1fr 290px; }
}
@media (max-width: 900px) {
	.pos-wrap { grid-template-columns: 1fr; }
	.pos-bill { position: static; }
	.pos-categories { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
}

/* Shop plans (migration_006) — locked sidebar entries for the basic plan + /upgrade plan cards */
.navbtn-locked { opacity: .55; }
.navbtn-locked .lock { margin-left: auto; font-size: 11px; }
.navgroup-label { font-size: 11px; color: var(--muted); padding: 14px 14px 6px; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.plan-card { display: flex; flex-direction: column; border: 2px solid transparent; }
.plan-card.current { border-color: var(--yellow); }
.plan-features { padding-left: 18px; margin: 0 0 14px; font-size: 13px; }
.plan-features li { margin-bottom: 4px; }
.plan-option { display: block; border: 2px solid #e6e6ea; border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; }
.plan-option:has(input:checked) { border-color: var(--yellow); background: #fffbea; }
.plan-option.disabled { opacity: .55; cursor: not-allowed; }
.plan-option input { margin-right: 6px; }

/* Dashboard (2026-10-20 redesign) */
.dash .panel { box-shadow: 0 4px 18px rgba(41,41,45,.04); transition: box-shadow .2s, transform .2s; }
.dash-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 16px; }
.dash-range-text { display: flex; align-items: center; gap: 12px; }
.dash-range-text > i { font-size: 18px; color: #7a5a00; background: #fff6d8; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; }
.dash-range-text strong { font-size: 14px; }
.dash-range-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dash-range-controls .form-select { width: auto; min-width: 150px; border-radius: 10px; }
.dash-custom { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dash-custom .form-control { width: auto; border-radius: 10px; }
.btn-sm-yellow { padding: 6px 14px; font-size: 13px; }
.dash-data { transition: opacity .2s; }
.dash.is-loading .dash-data { opacity: .35; pointer-events: none; }
.dash.is-loading .dash-data .panel { position: relative; overflow: hidden; }
.dash.is-loading .dash-data .panel::after,
.skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); animation: dash-shimmer 1.2s infinite; }
.skeleton { position: relative; background: #f6f6f8; border-radius: 12px; }
@keyframes dash-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.kpi-card:hover, .dash-data .panel:hover { box-shadow: 0 10px 28px rgba(41,41,45,.08); }
.kpi-card { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.kpi-card:hover { transform: translateY(-2px); }
.kpi-head { display: flex; align-items: flex-start; gap: 12px; }
.kpi-icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 21px; }
.kpi-icon-orange { background: #fff1d6; color: #e08a00; }
.kpi-icon-blue { background: #e5efff; color: #2f6fdd; }
.kpi-icon-green { background: #e2f6ec; color: #1a8a55; }
.kpi-icon-purple { background: #efe9ff; color: #6d4fd6; }
.kpi-value { font-size: 24px; font-weight: 800; line-height: 1.2; margin-top: 2px; white-space: nowrap; }
.kpi-value small { font-size: 13px; font-weight: 600; color: var(--muted); }
.kpi-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.kpi-delta-wrap { display: flex; flex-direction: column; gap: 4px; }
.kpi-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 20px; width: fit-content; }
.kpi-delta-up { background: #e2f6ec; color: #1a8a55; }
.kpi-delta-down { background: #fde2e1; color: #c0392b; }
.kpi-delta-flat, .kpi-delta-none { background: #f2f2f4; color: #75757c; font-weight: 500; }
.kpi-spark { width: 110px; height: 48px; flex: 0 0 auto; }
.min-w-0 { min-width: 0; }
.kpi-top .kpi-head { height: 100%; }
.kpi-top-name { font-weight: 700; font-size: 15px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kpi-top-qty { font-size: 13px; font-weight: 700; margin-top: 6px; }
.kpi-top-empty { font-size: 13px; color: var(--muted); margin-top: 8px; }
.kpi-top-thumb { position: relative; flex: 0 0 auto; width: 64px; height: 64px; border-radius: 14px; background: #fff6d8; display: grid; place-items: center; font-size: 28px; }
.kpi-top-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.kpi-crown { position: absolute; top: -10px; right: -8px; font-size: 18px; }

.dash-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.dash-link-btn { font-size: 12px; font-weight: 600; color: #b07f00; border: 1px solid #f3dc94; border-radius: 10px; padding: 6px 12px; text-decoration: none; white-space: nowrap; }
.dash-link-btn:hover { background: #fff6d8; color: #7a5a00; }
.dash-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 12px; color: var(--muted); font-size: 13px; text-align: center; }
.dash-empty i { font-size: 28px; opacity: .5; }

.chart-trend { height: 300px; }
.donut-wrap { position: relative; max-width: 220px; margin: 0 auto 16px; aspect-ratio: 1; }
.donut-wrap canvas { position: relative; z-index: 1; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.donut-center b { font-size: 20px; font-weight: 800; }
.donut-center span { font-size: 12px; color: var(--muted); }
.cat-legend { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.cat-legend li { display: grid; grid-template-columns: 12px 1fr auto 42px; align-items: center; gap: 10px; padding: 6px 0; }
.cat-legend .dot { width: 10px; height: 10px; border-radius: 50%; }
.cat-legend .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-legend .amt { font-weight: 600; }
.cat-legend .pct { color: var(--muted); text-align: right; }

.dash-table .row-link { cursor: pointer; transition: background .15s; }
.dash-table .row-link:hover { background: #fffbea; }
.row-chevron { color: var(--muted); text-decoration: none; }

.top-list { list-style: none; padding: 0; margin: 0; }
.top-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.top-list li + li { border-top: 1px solid #f3f3f5; }
.top-list .rank { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: #f2f2f4; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #75757c; }
.top-list .rank-1 { background: #fff1c2; font-size: 15px; }
.top-list .thumb { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; background: #fff6d8; display: grid; place-items: center; font-size: 18px; overflow: hidden; }
.top-list .thumb img { width: 100%; height: 100%; object-fit: cover; }
.top-list .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.top-list .name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-list .qty { font-size: 12px; font-weight: 700; white-space: nowrap; }
.top-list .bar { flex: 1; height: 7px; border-radius: 6px; background: #f2f2f4; overflow: hidden; }
.top-list .bar span { display: block; height: 100%; width: var(--w); border-radius: 6px; background: linear-gradient(90deg, #f5b800, #ffd451); animation: dash-bar .8s ease-out; }
.top-list .amt { font-size: 12px; color: var(--muted); white-space: nowrap; min-width: 70px; text-align: right; }
@keyframes dash-bar { from { width: 0; } }

.dash a.btn-outline-ink, .dash a.btn-yellow { text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.dash-range-controls form { margin: 0; }
.date-nav { display: flex; align-items: center; gap: 4px; background: #f5f5f7; border-radius: 12px; padding: 3px; }
.date-nav .form-control { width: auto; border: 0; background: #fff; border-radius: 9px; }
.date-nav-btn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: var(--ink); text-decoration: none; }
.date-nav-btn:hover { background: #fff; }
.date-nav-btn.disabled { opacity: .3; }

.sub-section { border-top: 1px dashed #ececef; margin-top: 16px; padding-top: 14px; }
.sub-title { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.channel-list { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.channel-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding: 5px 0; align-items: center; }
.channel-list .amt { font-weight: 600; min-width: 80px; text-align: right; }

.donut-split { display: grid; grid-template-columns: minmax(150px, 200px) 1fr; gap: 18px; align-items: center; }
.donut-split .donut-wrap { margin: 0 auto; width: 100%; }
.compare-panel { display: flex; flex-direction: column; }
.compare-pct { font-size: 30px; font-weight: 800; line-height: 1.2; margin-bottom: 2px; }
.compare-pct.up { color: #1a8a55; }
.compare-pct.down { color: #c0392b; }
.compare-pct.flat { color: var(--muted); }
.chart-compare { flex: 1; min-height: 170px; margin: 12px 0 6px; }

@media (max-width: 575.98px) {
	.donut-split { grid-template-columns: 1fr; }
	.date-nav { flex: 1; justify-content: space-between; }
	.dash-range-controls > * { flex: 1 1 auto; }
	.dash-toolbar { flex-direction: column; align-items: stretch; }
	.dash-range-controls .form-select { flex: 1; }
	.chart-trend { height: 240px; }
	.kpi-value { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
	.dash *, .dash *::after { animation: none !important; transition: none !important; }
	.kpi-card:hover { transform: none; }
}

/* เปิด/ปิดกะ */
.shift-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 8px 12px; margin-bottom: 14px; font-size: 13px; }
.shift-stat { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed #ececef; font-size: 14px; }
.shift-stat:last-child { border-bottom: 0; }
.shift-stat strong { font-variant-numeric: tabular-nums; }
.shift-stat.total { font-size: 16px; font-weight: 700; border-top: 2px solid #29292d; border-bottom: 0; margin-top: 4px; padding-top: 10px; }
.shift-big { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.denom-table td, .denom-table th { vertical-align: middle; }
.denom-table input { max-width: 110px; text-align: right; }
.denom-table .amt { text-align: right; font-variant-numeric: tabular-nums; min-width: 100px; }

/* เลือกโมดูล (สมัคร / ค่าบริการ) */
.module-list { display: flex; flex-direction: column; gap: 8px; }
.module-option { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; border: 1px solid #e3e3e7; border-radius: 12px; padding: 10px 12px; cursor: pointer; background: #fff; font-size: 13px; }
.module-option:has(input:checked) { border-color: var(--yellow); background: #fffbea; }
.module-option.locked { cursor: default; }
.module-option input { margin-top: 3px; }
.module-option .pill { margin-left: 4px; }
.module-price { text-align: right; font-weight: 700; white-space: nowrap; }
.module-total { border-top: 2px solid #29292d; margin-top: 12px; padding-top: 10px; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.cycle-option { display: flex; gap: 10px; align-items: center; border: 1px solid #e3e3e7; border-radius: 12px; padding: 10px 12px; cursor: pointer; background: #fff; }
.cycle-option:has(input:checked) { border-color: var(--yellow); background: #fffbea; }
.pay-qr { display: inline-block; background: #fff; padding: 8px; border-radius: 10px; border: 1px solid #ececef; }

/* ค่าใช้จ่ายต่อวัน — จุดเด่นของหน้าเลือกโมดูล */
.daily-hero { margin-top: 14px; padding: 16px 18px; border-radius: 14px; background: linear-gradient(135deg, #fff6d6 0%, #ffe9a3 100%); border: 1px solid #f5d76e; text-align: center; }
.daily-hero-label { font-size: 13px; font-weight: 600; color: #7a5a00; }
.daily-hero-amount { font-size: 40px; font-weight: 800; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; }
.daily-hero-amount small { font-size: 16px; font-weight: 700; color: #7a5a00; }
.daily-hero-sub { font-size: 13px; color: #1e7b34; margin-top: 2px; }
.cycle-perday { display: block; font-size: 12px; font-weight: 700; color: #b8860b; }
@media (max-width: 575.98px) { .daily-hero-amount { font-size: 32px; } }

/* ── /platform/modules (โมดูลและราคา) — scoped under .pm / .pm-*, nothing global ── */
.pm-bell { position: relative; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--ink); background: #fff; font-size: 18px; text-decoration: none; }
.pm-bell:hover { color: var(--ink); background: #f8f4e2; }
.pm-bell-badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e5484d; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.pm-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: stretch; background: #fff8e1; border: 1px solid #f7e3a1; border-radius: 18px; padding: 16px; margin-bottom: 14px; }
.pm-hero-intro { display: flex; gap: 14px; align-items: center; }
.pm-hero-icon { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; font-size: 30px; background: #ffe7a3; color: #c98a00; }
.pm-hero-title { font-size: 18px; font-weight: 800; margin: 0 0 4px; }
.pm-hero-text { font-size: 13px; color: var(--muted); margin: 0; }
.pm-sum { display: flex; gap: 12px; background: #fff; border-radius: 14px; padding: 14px; box-shadow: 0 4px 14px rgba(41,41,45,.05); }
.pm-sum-body { flex: 1; min-width: 0; }
.pm-sum-price { margin: 4px 0 2px; font-size: 13px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.pm-sum-price strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.pm-sum-day { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.pm-sum-day strong { font-size: 26px; font-weight: 800; color: #7a5a00; font-variant-numeric: tabular-nums; line-height: 1.15; }
.pm-sum-day span { font-size: 13px; font-weight: 700; color: #7a5a00; }
.pm-icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; }
.pm-icon-lg { width: 56px; height: 56px; border-radius: 16px; font-size: 25px; }
.pm-tone-yellow { background: #fff1d6; color: #e08a00; }
.pm-tone-blue { background: #e5efff; color: #2f6fdd; }
.pm-tone-green { background: #e2f6ec; color: #1a8a55; }
.pm-tone-purple { background: #efe9ff; color: #6d4fd6; }
.pm-tone-pink { background: #ffe8ee; color: #d6456e; }
.pm-tone-sky { background: #e3f4fb; color: #1f88b8; }
.pm-tone-gray { background: #f1f1f3; color: #6b6b72; }
.pm-tone-orange { background: #ffe9dc; color: #d9622b; }
.pm-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 7px; white-space: nowrap; }
.pm-badge-ok { background: #e2f6ec; color: #1a7f4e; }
.pm-badge-off { background: #fde2e1; color: #a12a24; }
.pm-badge-warn { background: #fff3cd; color: #7a5a00; }
.pm-badge-purple { background: #efe9ff; color: #6d4fd6; }
.pm-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; background: #fff; border-radius: 16px; padding: 8px; margin-bottom: 14px; }
.pm-tabs { display: flex; gap: 4px; overflow-x: auto; max-width: 100%; scrollbar-width: thin; }
.pm-tab { flex: 0 0 auto; border: 0; background: transparent; padding: 9px 14px; border-radius: 11px; font-size: 13px; color: var(--ink); white-space: nowrap; }
.pm-tab:hover { background: #f8f4e2; }
.pm-tab.active { background: var(--yellow); color: #fff; font-weight: 600; }
.pm-search { position: relative; flex: 0 1 340px; margin: 0; }
.pm-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.pm-search input { width: 100%; border: 1px solid #e8e9ec; border-radius: 11px; padding: 9px 12px 9px 36px; font-size: 13px; }
.pm-search input:focus { outline: 2px solid rgba(245,184,0,.45); border-color: var(--yellow); }
.pm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pm-card { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 14px; background: #fff; border-radius: 18px; padding: 16px; box-shadow: 0 4px 14px rgba(41,41,45,.04); scroll-margin-top: 16px; }
.pm-card:target { outline: 2px solid var(--yellow); }
.pm-card-title { font-size: 18px; font-weight: 800; margin: 4px 0 0; }
.pm-card-desc { font-size: 13px; color: #5e6068; margin: 10px 0 0; }
.pm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pm-chip { font-size: 12px; background: #f3f3f5; border-radius: 8px; padding: 4px 10px; }
.pm-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.pm-card-side { display: flex; flex-direction: column; gap: 10px; }
.pm-price { border: 1px solid #ececef; border-radius: 14px; padding: 12px; }
.pm-switch { width: 2.6em !important; height: 1.4em; cursor: pointer; }
.pm-switch:checked { background-color: #22a06b; border-color: #22a06b; }
.pm-seg { display: flex; background: #f5f5f7; border-radius: 9px; padding: 3px; margin-bottom: 10px; }
.pm-seg-btn { flex: 1; border: 0; background: transparent; border-radius: 7px; padding: 5px 4px; font-size: 11px; color: #5e6068; white-space: nowrap; }
.pm-seg-btn.active { background: #fff3cd; color: #7a5a00; font-weight: 700; }
.pm-price-main { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pm-price-main strong { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pm-price-main span { font-size: 12px; color: var(--muted); }
.pm-free { font-size: 22px !important; font-weight: 800; color: #1a7f4e !important; }
/* ราคาต่อวัน — the unit the admin sets, so it leads; month/year sit underneath, smaller */
.pm-day { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; background: #fff8e1; border: 1px solid #f5d76e; border-radius: 11px; padding: 8px 12px; margin-bottom: 10px; }
.pm-day-label { font-size: 11px; font-weight: 700; color: #7a5a00; width: 100%; }
.pm-day strong { font-size: 30px; font-weight: 800; color: #29292d; font-variant-numeric: tabular-nums; line-height: 1.1; }
.pm-day-unit { font-size: 14px; font-weight: 700; color: #7a5a00; }
.pm-day-free { background: #e6f4ea; border-color: #b9e0c5; }
.pm-day-free strong { color: #1a7f4e; }
.pm-price-sub strong { font-size: 18px; }
.pm-hint { font-size: 10px; color: var(--muted); margin-top: 6px; }
.pm-edit { align-self: flex-end; }
.pm-empty { text-align: center; padding: 40px 16px; background: #fff; border-radius: 18px; color: var(--muted); }
.pm-empty > i { font-size: 28px; display: block; margin-bottom: 6px; }
.pm-preview { background: #fff8e1; border-radius: 10px; padding: 10px 12px; font-size: 13px; }
@media (max-width: 1399.98px) { .pm-card { grid-template-columns: 1fr; } .pm-edit { align-self: stretch; } }
@media (max-width: 1199.98px) { .pm-hero { grid-template-columns: 1fr 1fr; } .pm-hero-intro { grid-column: 1 / -1; } }
@media (max-width: 991.98px) { .pm-grid { grid-template-columns: 1fr; } .pm-search { flex: 1 1 100%; } }
@media (max-width: 575.98px) { .pm-hero { grid-template-columns: 1fr; padding: 12px; } .pm-hero-icon { width: 52px; height: 52px; font-size: 24px; } .pm-card { padding: 14px; } }
.pm-save { color: #1a7f4e; font-weight: 600; }

/* ── /billing (ค่าบริการ) — scoped under .bl / .bl-*, reuses .pm-badge/.pm-chip ── */
.pm-badge-sky { background: #e3f4fb; color: #1f6f96; }
.bl-tone-yellow { background: #fff1d6; color: #e08a00; }
.bl-tone-blue { background: #e5efff; color: #2f6fdd; }
.bl-tone-green { background: #e2f6ec; color: #1a8a55; }
.bl-tone-purple { background: #efe9ff; color: #6d4fd6; }
.bl-tone-pink { background: #ffe8ee; color: #d6456e; }
.bl-tone-sky { background: #e3f4fb; color: #1f88b8; }
.bl-tone-gray { background: #f1f1f3; color: #6b6b72; }
.bl-tone-orange { background: #ffe9dc; color: #d9622b; }
.bl-h2 { font-size: 17px; font-weight: 800; margin: 0 0 2px; }
.bl-h2-icon { color: var(--yellow); }
.bl-status { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 320px); gap: 14px; align-items: center; background: #fff; border-radius: 16px; padding: 14px 16px; margin-bottom: 14px; }
.bl-status-icon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 20px; background: #e2f6ec; color: #1a8a55; }
.bl-status.is-trial .bl-status-icon { background: #fff1d6; color: #e08a00; }
.bl-status-title { font-weight: 800; font-size: 16px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.bl-status-left { font-size: 13px; font-weight: 700; color: #1a7f4e; }
.bl-progress { height: 6px; background: #f1f1f3; border-radius: 6px; margin-top: 8px; overflow: hidden; max-width: 420px; }
.bl-progress span { display: block; height: 100%; background: var(--yellow); border-radius: 6px; }
.bl-status-mods .pill { margin: 0 4px 4px 0; }
.bl-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: center; background: #fff8e1; border: 1px solid #f7e3a1; border-radius: 18px; padding: 16px; margin-bottom: 14px; }
.bl-hero-intro { display: flex; gap: 14px; align-items: center; }
.bl-hero-icon { flex: 0 0 auto; width: 68px; height: 68px; border-radius: 18px; display: grid; place-items: center; font-size: 32px; background: #ffe7a3; color: #c98a00; }
.bl-hero-title { font-size: 20px; font-weight: 800; margin: 0 0 4px; }
.bl-hero-text { font-size: 13px; color: #5e6068; margin: 0; }
.bl-hero-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; background: #fff; border-radius: 14px; padding: 12px; }
.bl-point { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.bl-point strong { display: block; font-size: 13px; }
.bl-point span:not(.bl-point-icon) { color: var(--muted); }
.bl-point-icon { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 17px; }
.bl-list-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.bl-head-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #fff1d6; color: #e08a00; font-size: 17px; flex: 0 0 auto; }
.bl-seg { display: flex; background: #f5f5f7; border-radius: 10px; padding: 3px; align-self: flex-start; }
.bl-seg-btn { border: 0; background: transparent; border-radius: 8px; padding: 6px 12px; font-size: 12px; color: #5e6068; white-space: nowrap; }
.bl-seg-btn.active { background: var(--yellow); color: #fff; font-weight: 700; }
.bl-list { display: flex; flex-direction: column; gap: 8px; }
.bl-row { position: relative; border: 1px solid #e8e9ec; border-radius: 14px; background: #fff; transition: border-color .15s, background .15s; }
.bl-row.is-on { border-color: #f5d76e; background: #fffcf0; }
.bl-row-main { display: grid; grid-template-columns: auto auto minmax(0, 1fr) 84px 84px 34px; gap: 12px; align-items: center; padding: 12px 8px 12px 14px; margin: 0; cursor: pointer; }
.bl-check { width: 20px; height: 20px; accent-color: #f5b800; cursor: pointer; }
.bl-check:disabled { cursor: not-allowed; }
.bl-icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 21px; }
.bl-row-name { font-weight: 800; font-size: 15px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.bl-row-desc { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.bl-price { text-align: right; line-height: 1.2; }
.bl-price strong { display: block; font-variant-numeric: tabular-nums; }
.bl-price span { font-size: 11px; color: var(--muted); }
.emph-day .bl-price-day strong { font-size: 17px; color: var(--ink); }
.emph-day .bl-price-month strong { font-size: 13px; color: #6b6b72; font-weight: 600; }
.emph-month .bl-price-month strong { font-size: 17px; color: var(--ink); }
.emph-month .bl-price-day strong { font-size: 13px; color: #6b6b72; font-weight: 600; }
.bl-more { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; border-radius: 8px; background: #f5f5f7; color: #5e6068; }
.bl-more[aria-expanded="true"] i { display: inline-block; transform: rotate(180deg); }
.bl-details { padding: 0 14px 12px 82px; }
.bl-summary { position: sticky; top: 16px; }
.bl-daily { background: linear-gradient(135deg, #fff6d6 0%, #ffe9a3 100%); border: 1px solid #f5d76e; border-radius: 16px; padding: 16px; text-align: center; }
.bl-daily-label { font-size: 13px; font-weight: 600; color: #7a5a00; }
.bl-daily-amount { font-size: 40px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.bl-daily-amount small { font-size: 16px; color: #7a5a00; }
.bl-daily-note { font-size: 11px; color: #7a5a00; }
.bl-link-danger { border: 0; background: none; color: #e5484d; font-size: 12px; padding: 0; }
.bl-selected { list-style: none; padding: 0; margin: 0; }
.bl-selected li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 26px; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px dashed #ececef; font-size: 13px; }
.bl-sel-icon { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; }
.bl-sel-price { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bl-sel-x { border: 0; background: none; color: #5e6068; padding: 2px; border-radius: 6px; }
.bl-sel-x:hover { background: #fde2e1; color: #a12a24; }
.bl-sel-lock { color: #b8bcc4; text-align: center; font-size: 12px; }
.bl-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px solid var(--ink); margin-top: 8px; padding-top: 10px; }
.bl-total strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.bl-cycles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bl-cycle { display: flex; gap: 8px; border: 1px solid #e8e9ec; border-radius: 12px; padding: 10px; cursor: pointer; margin: 0; }
.bl-cycle.is-on { border-color: var(--yellow); background: #fffbea; }
.bl-cycle input { accent-color: #f5b800; margin-top: 3px; }
.bl-cycle-body { display: flex; flex-direction: column; font-size: 12px; min-width: 0; }
.bl-cycle-body strong { font-size: 13px; }
.bl-cycle-price { font-weight: 700; font-size: 13px; }
.bl-cycle-day { color: #b8860b; font-weight: 600; }
.bl-pay-line { display: flex; justify-content: space-between; margin: 12px 0 8px; font-size: 13px; }
.bl-pay-line strong { font-size: 16px; }
.bl-cta { padding: 13px 16px; font-size: 15px; }
.bl-empty { text-align: center; color: var(--muted); padding: 28px 12px; }
.bl-empty i { font-size: 26px; display: block; margin-bottom: 4px; }
.bl-order-detail td { background: #fafafb; }
.bl-mobilebar { display: none; }
@media (max-width: 1199.98px) {
	.bl-hero { grid-template-columns: 1fr; }
	.bl-status { grid-template-columns: auto minmax(0, 1fr); }
	.bl-status-mods { grid-column: 1 / -1; }
}
@media (max-width: 991.98px) {
	.bl-summary { position: static; }
	.bl-order { padding-bottom: 76px; }
	.bl-mobilebar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; gap: 10px; align-items: center; justify-content: space-between; background: #fff; padding: 10px 16px; box-shadow: 0 -6px 20px rgba(41,41,45,.12); }
	.bl-mobilebar strong { font-size: 17px; }
}
@media (max-width: 767.98px) {
	.bl-row-main { grid-template-columns: auto auto minmax(0, 1fr) 34px; padding-right: 8px; }
	.bl-row-main .bl-price { grid-column: 3; text-align: left; }
	.bl-row-main .bl-price-day { grid-row: 2; }
	.bl-row-main .bl-price-month { grid-row: 3; }
	.bl-row-main .bl-price strong { display: inline; margin-right: 4px; }
	.bl-more { top: 22px; transform: none; }
	.bl-details { padding-left: 14px; }
	.bl-hero-points { grid-template-columns: 1fr; }
	.bl-cycles { grid-template-columns: 1fr; }
	.bl-daily-amount { font-size: 34px; }
}

/* map picker (ตั้งค่าร้าน) + mini map (platform shop detail) */
.map-picker { height: 420px; border-radius: 12px; border: 1px solid #e8e9ec; }
.map-mini { height: 220px; border-radius: 12px; border: 1px solid #e8e9ec; }
.map-results { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; max-height: 180px; overflow-y: auto; }
.map-result { text-align: left; border: 1px solid #e8e9ec; background: #fff; border-radius: 8px; padding: 6px 10px; font-size: 12px; }
.map-result:hover { background: #fff8e1; border-color: #f5d76e; }
@media (max-width: 575.98px) { .map-picker { height: 60vh; } }

/* ผังโต๊ะ (tables) */
.tbl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tbl-card { display: flex; flex-direction: column; gap: 4px; width: 100%; min-height: 110px; text-align: left; padding: 14px; border: 2px solid #e8e9ec; background: #fff; border-radius: 14px; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.tbl-card:hover { border-color: var(--yellow); box-shadow: 0 8px 20px rgba(41,41,45,.08); color: inherit; }
.tbl-card.busy { background: #fff6d8; border-color: #f5d76e; }
.tbl-card.billing { background: #fde2e1; border-color: #f0a19c; }
.tbl-name { font-size: 20px; font-weight: 800; line-height: 1.2; word-break: break-word; }
.tbl-meta { font-size: 12px; color: #75757c; }
@media (max-width: 575.98px) { .tbl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tbl-total { font-weight: 800; font-size: 15px; margin-top: auto; }
.tbl-round { border: 1px solid #efeff2; border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.tbl-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px dashed #ececef; }
.tbl-item-qty { font-weight: 800; min-width: 30px; }
.tbl-item-name { font-weight: 600; font-size: 14px; }
.tbl-item-price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl-item.cancelled .tbl-item-qty, .tbl-item.cancelled .tbl-item-name, .tbl-item.cancelled .tbl-item-price { text-decoration: line-through; color: var(--muted); }
.tbl-note-btn { border: 0; background: none; padding: 0; font-size: 10px; color: #b8860b; text-align: left; }
.tbl-split-pick { display: none; align-items: center; gap: 4px; }
.tbl-split-pick .tbl-split-qty { width: 62px; padding: 2px 22px 2px 6px; }
.tbl-splitting .tbl-split-pick { display: flex; }
.tbl-item.paid .tbl-item-qty, .tbl-item.paid .tbl-item-name, .tbl-item.paid .tbl-item-price { color: var(--muted); }
.tbl-qr-alert { font-size: 11px; font-weight: 700; color: #fff; background: #d6456e; border-radius: 6px; padding: 3px 6px; animation: tblPulse 1.6s ease-in-out infinite; }
@keyframes tblPulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .tbl-qr-alert { animation: none; } }

/* ลูกค้าสั่งเองผ่าน QR (guest/menu) — phone-first, no sidebar */
.guest-body { background: #fff8e8; padding-bottom: 86px; }
.guest-head { background: #fff; padding: 14px 16px 10px; position: sticky; top: 0; z-index: 20; box-shadow: 0 2px 12px rgba(41,41,45,.06); }
.guest-table { font-size: 22px; font-weight: 800; line-height: 1.2; }
.guest-main { padding: 14px 16px; max-width: 900px; margin: 0 auto; }
.guest-status summary { cursor: pointer; }
.guest-round { border-top: 1px dashed #ececef; padding: 8px 0; font-size: 13px; }
.guest-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; gap: 12px; align-items: center; justify-content: space-between; background: #fff; padding: 12px 16px; box-shadow: 0 -6px 20px rgba(41,41,45,.12); }
.guest-qty button { width: 34px; height: 34px; font-size: 18px; }
.guest-qty span { font-size: 15px; min-width: 20px; text-align: center; }
.guest-body .pos-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* จอครัว (kitchen/index) — full screen, readable from a step away */
.kds-body { background: #efeff2; min-height: 100vh; }
.kds-head { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: #fff; padding: 10px 16px; box-shadow: 0 2px 12px rgba(41,41,45,.08); }
.kds-head .pill { font-size: 13px; }
.kds-title { font-size: 20px; }
.kds-main { padding: 16px; }
.kds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; align-items: start; }
.kds-card { background: #fff; border-radius: 14px; border-top: 8px solid #d6456e; display: flex; flex-direction: column; box-shadow: 0 4px 14px rgba(41,41,45,.06); }
.kds-card.cooking { border-top-color: var(--yellow); }
.kds-card.warn .kds-time { color: #b8860b; }
.kds-card.late { box-shadow: 0 0 0 3px #e2554b; }
.kds-card.late .kds-time { color: #c0392b; }
.kds-card.fresh { animation: tblPulse 1.2s ease-in-out 3; }
.kds-card-head { display: flex; justify-content: space-between; gap: 8px; padding: 12px 14px 8px; border-bottom: 1px dashed #e3e3e7; }
.kds-label { font-size: 18px; font-weight: 800; line-height: 1.2; }
.kds-sub { font-size: 12px; color: var(--muted); font-weight: 500; }
.kds-time { font-size: 18px; font-weight: 800; text-align: right; white-space: nowrap; }
.kds-lines { padding: 8px 14px; flex: 1; }
.kds-line { display: flex; gap: 8px; padding: 5px 0; font-size: 16px; font-weight: 600; }
.kds-line.cancelled { color: #c0392b; text-decoration: line-through; }
.kds-qty { font-weight: 800; min-width: 32px; }
.kds-mods { font-size: 13px; color: #55555c; font-weight: 500; }
.kds-note { font-size: 14px; color: #c0392b; font-weight: 700; }
.kds-actions { display: flex; gap: 8px; padding: 10px 14px 14px; }
.kds-btn { padding: 12px; font-size: 15px; }
.kds-empty { text-align: center; color: var(--muted); padding: 80px 0; font-size: 18px; }
.kds-empty i { font-size: 46px; }
.kds-done-title { font-weight: 700; margin: 22px 0 8px; color: #55555c; }
.kds-done { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.kds-done-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: #fff; border-radius: 10px; padding: 8px 12px; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .kds-card.fresh { animation: none; } }

/* รายงานโต๊ะ (tables/report) */
.tblr-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.tblr-bars { display: flex; align-items: flex-end; gap: 4px; height: 170px; padding-top: 16px; }
.tblr-bar-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; cursor: default; }
.tblr-bar-col:focus-visible { outline: 2px solid #715600; outline-offset: 2px; border-radius: 4px; }
.tblr-bar { width: 100%; max-width: 22px; background: var(--yellow); border-radius: 4px 4px 0 0; }
.tblr-bar-col:hover .tblr-bar, .tblr-bar-col:focus .tblr-bar { background: #c99700; }
.tblr-bar-val { font-size: 11px; font-weight: 700; min-height: 15px; }
.tblr-bar-label { font-size: 10px; color: var(--muted); margin-top: 4px; border-top: 1px solid #e3e3e7; width: 100%; text-align: center; padding-top: 2px; }

/* ยกเลิกบิล (pos/receipt) */
.receipt-card { position: relative; }
.receipt-void-stamp { position: absolute; top: 46px; left: 50%; transform: translateX(-50%) rotate(-12deg); border: 4px solid #c0392b; color: #c0392b; font-size: 28px; font-weight: 800; padding: 2px 18px; border-radius: 10px; opacity: .55; pointer-events: none; }

/* ชุดแนะนำตามประเภทร้าน — shop side (subscription/_preset_picker: /signup, /billing) */
.preset-picker { margin-bottom: 14px; }
.preset-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.preset-head strong { font-size: 15px; }
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.preset-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; background: #fff; border: 2px solid #ececef; border-radius: 14px; padding: 12px; color: inherit; transition: border-color .15s, box-shadow .15s; }
.preset-card:hover:not(:disabled) { border-color: #f5d76e; box-shadow: 0 6px 18px rgba(41,41,45,.07); }
.preset-card.active { border-color: var(--yellow); background: #fff8e1; box-shadow: 0 0 0 3px rgba(245,184,0,.18); }
.preset-card:disabled { opacity: .55; cursor: not-allowed; }
.preset-icon { font-size: 28px; line-height: 1; }
.preset-name { font-size: 15px; font-weight: 800; }
.preset-tagline { font-size: 12px; color: #6b6b72; }
.preset-benefits { display: flex; flex-direction: column; gap: 2px; font-size: 12px; margin-top: 2px; }
.preset-benefits i { color: #1a7f4e; }
.preset-price { margin-top: auto; padding-top: 6px; font-size: 12px; font-weight: 700; color: #7a5a00; }
.preset-price strong { font-size: 20px; font-weight: 800; color: #29292d; }
.preset-soon { margin-top: auto; padding-top: 6px; font-size: 12px; font-weight: 700; color: #a12a24; }
.preset-status { margin-top: 8px; min-height: 1em; }
/* platform side (/platform/modules) */
.pm-hero.pm-hero-solo { grid-template-columns: 1fr; }
.pm-presets { background: #fff; border-radius: 16px; padding: 14px; margin-bottom: 14px; }
.pm-presets-title { font-size: 15px; }
.pm-preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.pm-preset { display: flex; flex-direction: column; gap: 4px; border: 1px solid #ececef; border-radius: 14px; padding: 12px; }
.pm-preset.is-hidden { opacity: .6; }
.pm-preset-icon { font-size: 28px; line-height: 1; }
.pm-preset-name { font-size: 16px; font-weight: 800; }
.pm-chip-off { opacity: .55; text-decoration: line-through; }
.pm-preset-mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 12px; }

/* โปรโมชั่น (promotions/form) + สมาชิก/โปร ในหน้าต่างชำระเงิน */
.promo-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.promo-type { display: flex; gap: 8px; align-items: flex-start; border: 2px solid #ececef; border-radius: 12px; padding: 10px; cursor: pointer; }
.promo-type:has(input:checked) { border-color: var(--yellow); background: #fff8e1; }
.promo-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 2px 12px; max-height: 260px; overflow-y: auto; }
.member-box, .promo-box { border: 1px solid #ececef; border-radius: 10px; padding: 8px 10px; }
.promo-line { font-size: 11px; color: #1a7f4e; font-weight: 600; }