/* ส่วนเพิ่มสำหรับตัวโปรแกรมจริง (styles.css มาจากต้นแบบ) */
.shell{max-width:1280px;margin:0 auto;padding:16px max(16px,env(safe-area-inset-right,0px)) 32px max(16px,env(safe-area-inset-left,0px))}
.bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;font-size:13.5px}
.bar .tag{font-weight:600}
.app{min-height:calc(100vh - 80px)}
.loading-box{display:grid;gap:10px;padding:18px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.loading-box div{display:flex;gap:10px;align-items:center;color:var(--muted)}
.spin{width:18px;height:18px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--lime-ink);animation:spin 1s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
.err{background:var(--bad-bg);color:var(--bad);border-radius:12px;padding:12px 14px;font-size:14.5px}
.mat .ph{background:var(--navy-2)}
.mat .ph img{width:100%;height:100%;object-fit:cover;display:block}
.select{min-height:44px;border:1px solid var(--line);border-radius:12px;padding:0 12px;font:inherit;background:var(--surface);color:var(--ink);max-width:100%}
.mini-chart{display:flex;align-items:flex-end;gap:6px;height:140px;padding-top:10px}
.mini-chart div{flex:1;display:grid;gap:4px;justify-items:center;font-size:11px;color:var(--muted)}
.mini-chart i{display:block;width:100%;max-width:34px;background:var(--c-new);border-radius:6px 6px 2px 2px;min-height:2px}
.tbl-wrap table{min-width:560px}
.camp-row{display:grid;gap:6px;padding:14px 0;border-top:1px solid var(--line)}
.camp-row:first-child{border-top:0}
.camp-row ul{margin:0;padding-left:18px;font-size:13.5px;color:var(--ink-2)}
.empty{color:var(--muted);text-align:center;padding:28px 10px}
.nb{display:grid}
.entry{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.entry:first-child{border-top:0}
@media (max-width:640px){.entry{grid-template-columns:1fr;gap:6px}}
.entry .when{font-size:12.5px;color:var(--muted);display:grid;gap:6px;align-content:start}
.steps4{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
@media (max-width:760px){.steps4{grid-template-columns:1fr}}
.s4{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:13.5px}
.s4 .lb{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:2px}
.diff{margin-top:8px;font-family:ui-monospace,monospace;font-size:12.5px;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:8px 12px;white-space:pre-wrap}
.diff .m{color:var(--bad)} .diff .p{color:var(--good)}
.uploader{border:2px dashed var(--line);border-radius:12px;padding:14px;display:grid;gap:10px;background:var(--soft)}
.upl-item{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--surface)}
.upl-item img{width:96px;height:96px;object-fit:cover;border-radius:10px;background:var(--navy-2)}
.issue{background:var(--warn-bg);border-radius:8px;padding:8px 10px;font-size:13.5px}
.code-box{font-family:ui-monospace,monospace;font-size:12.5px;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:10px 12px;white-space:pre-wrap;overflow-x:auto}
.topbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.brand2{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-family:var(--num);font-size:17px}
.ws-sel{min-height:40px;font-weight:700;max-width:260px}
.grow{flex:1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.gate{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-radius:var(--r);padding:14px 18px;margin-bottom:12px;font-size:15px}
.gate.warn{background:var(--warn-bg)} .gate.bad{background:var(--bad-bg)} .gate.info{background:var(--info-bg)}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.plans{grid-template-columns:1fr}}
.plan{border:2px solid var(--line);border-radius:var(--r);padding:18px;display:grid;gap:8px;background:var(--surface);align-content:start}
.plan.cur{border-color:var(--lime-ink)}
.plan .price{font-family:var(--num);font-size:30px;font-weight:800}
.plan .price small{font-size:14px;color:var(--muted);font-weight:600}
.qr{display:grid;gap:10px;justify-items:center;text-align:center;padding:18px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.qr img{width:240px;max-width:100%;background:#fff;border-radius:12px}
.kv2{display:grid;grid-template-columns:160px minmax(0,1fr);gap:8px 14px;font-size:14.5px;align-items:center}
@media (max-width:600px){.kv2{grid-template-columns:1fr}}
.code6{font-family:var(--num);font-size:30px;font-weight:800;letter-spacing:.15em}

.int-box{display:grid;gap:8px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--soft)}
.int-row{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:10px;background:var(--surface);border:1px solid var(--line);font-weight:500;cursor:pointer}
.int-row input{width:18px;height:18px;margin-top:3px;accent-color:var(--lime-ink);flex:none}
.int-search{display:grid;gap:6px}

.pay-qr{max-width:460px;margin:0 auto}
.qr-img{width:300px;max-width:100%;border-radius:14px;border:1px solid var(--line);background:#fff}
.line-btn{background:#06C755;color:#fff;border-color:#06C755}
.line-btn:hover{background:#05b04c}
/* ---------- ยิงแอดไลฟ์สด ---------- */
.live-list{display:grid;gap:10px;margin-top:12px}
.live-item{display:flex;gap:12px;align-items:center;text-align:left;width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);cursor:pointer;font:inherit;color:inherit}
.live-item[aria-pressed=true]{border-color:var(--navy,#0B1B4D);box-shadow:0 0 0 3px rgba(200,255,30,.55)}
.live-item b{display:block;font-size:15px}
.live-item small{color:var(--muted)}
.live-badge{flex:none;display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:8px;background:#E8233A;color:#fff;font-weight:800;font-size:12px;letter-spacing:.04em}
.live-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;animation:livePulse 1.2s ease-in-out infinite}
.live-badge.vod{background:#5b6478}.live-badge.vod::before{animation:none;opacity:.6}
@keyframes livePulse{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.live-badge::before{animation:none}}
.live-sum{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;margin-top:14px;padding:14px 16px;border-radius:14px;background:var(--navy,#0B1B4D);color:#fff}
.live-sum b{font-size:26px;color:#C8FF1E}
.live-tips{margin:12px 0 0;padding-left:18px;display:grid;gap:9px;font-size:14px;line-height:1.55}
.live-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.btn.live-go{background:#E8233A;border-color:#E8233A;color:#fff}
.mode.mode-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.mode.mode-2{grid-template-columns:1fr}}

/* ชิปตัวช่วยกรอก / งบสำเร็จรูป */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chip{border:1.5px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:999px;padding:5px 12px;font:inherit;font-size:13.5px;cursor:pointer}
.chip:hover,.chip[aria-pressed=true]{border-color:var(--lime-ink,#3D6B00);background:var(--lime-soft,#F1FFD1);color:var(--ink)}