/* ============================================================================
   ROII BATTLE — PUBLIC DESIGN SYSTEM  (v2 "poster" · ดำ/แดง · Bebas Neue + Prompt)
   ----------------------------------------------------------------------------
   โหลดผ่าน 'extraStyles' => ['css/battle-view.css'] ของทุกหน้า /battle (+ judge)
   ทุกคลาส namespace  .bt-*  (ห้ามใช้ .btn .card .chip ของเว็บ — ชน style.css)
   ใช้ CSS vars ของเว็บ: --red --c1 --c2 --bd --bd2 --tx --mu --gn --yl (มี fallback)
   Bebas Neue + Prompt โหลดแล้วจาก layouts/public.php · มือถือก่อน · ไม่มี horizontal scroll
   ⚠️ layout พิมพ์ $content 2 รอบ → ห้ามใส่ id= ใน view ใช้ class / data-bt-*

   COMPONENT INDEX
   --- โครง ---------------------------------------------------------------
   .bt-wrap(.bt-wrap--narrow)  ตัวห่อหน้า            .bt-split(+.bt-sticky)  2 คอลัมน์ + แถบข้าง
   .bt-g2 .bt-g3 .bt-g4 .bt-grid  กริด               .bt-flex .bt-wrapr      แถว flex / wrap
   .bt-back  ลิงก์ย้อนกลับ    .bt-crumb  breadcrumb   .bt-hr  เส้นคั่น
   --- ฮีโร่ / หัวข้อ -----------------------------------------------------
   .bt-hero(.bt-hero--slash .has-cover)  โปสเตอร์     .bt-badge/.bt-eyebrow   ป้ายแดงบนหัว
   .bt-mega(+ <span class=o>)  ตัวใหญ่ Bebas เอียง     .bt-lead  ย่อหน้าใต้หัว
   .bt-nav/.bt-acts/.bt-hero-links  แถวปุ่ม             .bt-hstats  ตัวเลขใต้ฮีโร่
   .bt-sec(.lb .bar .cnt)  หัวข้อส่วน + slash          .bt-disp .bt-num        ฟอนต์ Bebas / เลขตรง
   --- ปุ่ม / ป้าย --------------------------------------------------------
   .bt-btn(.ghost .red .green .outline .lg .sm .block)  .bt-chip(.solid .live --c)  .bt-dot(.pulse)
   .bt-tier(--c)  ป้ายระดับ ELO     .bt-seg  สวิตช์เลือกโหมด    .bt-tabs/.bt-tab/.bt-panel  แท็บ
   --- การ์ด / ข้อมูล -----------------------------------------------------
   .bt-card(.blk .pad)  .bt-tc  การ์ดรายการ+.bt-cov ปก   .bt-stats/.bt-stat  ตัวเลข   .bt-kv  คู่ key/value
   .bt-av(.sm .lg .xl .sq --s --h)  อวตาร halftone       .bt-who  อวตาร+ชื่อ+รอง
   .bt-bar(--c) แท่งความคืบหน้า  .bt-vbar แท่งโหวต 2 ฝั่ง    .bt-tbl-w/.bt-tbl  ตาราง
   .bt-callout(--c)  กล่องแจ้ง   .bt-note(.err .ok)  ข้อความเล็ก  .bt-warn  กล่องเหลือง  .bt-empty
   .bt-announce  แถบประกาศเขียว   .bt-steps/.bt-step  ขั้นตอน   .bt-tl  timeline   .bt-prog  pipeline
   --- แข่ง / โหวต ---------------------------------------------------------
   .bt-vs-stage > .bt-vs-top .bt-vs-grid(.bt-vs-side.a/.b .ph .crew .nm .pct .cnt) .bt-vs-mid .bt-vs-foot
   .bt-vote(.voted .on)  ปุ่มโหวต   .bt-cd/.bt-cdbox  นับถอยหลัง   .bt-post/.bt-postlink  ลิงก์โพสต์
   .bt-bracket > .bt-col > .bt-m(.run) > .bt-m-h + .bt-side(.win .lose .tbd .bye)  สาย
   .bt-podium/.bt-pod(.p1)  โพเดียม   .bt-rank  อันดับ    .bt-score-row  คะแนนซ้าย-กลาง-ขวา
   .bt-beat(.locked) + .bt-art + .bt-wave  การ์ดบีท   .bt-embed  ฝังคลิป
   --- ฟอร์ม / พอร์ทัล ---------------------------------------------------
   .bt-form .bt-fld .bt-in .bt-fgrid .bt-check .bt-drop .bt-chk .bt-lockbox .bt-hp
   .bt-mycard .bt-next  พอร์ทัล    .bt-minivs  คู่แข่งย่อ   .bt-rhero .bt-hist .bt-wl .bt-delta  โปรไฟล์แร็ปเปอร์
   .bt-score-side .bt-crit .bt-nums .bt-area .bt-total  กรรมการให้คะแนน
   ============================================================================ */

/* ---------- 0. TOKENS ---------- */
:root{
  --bt-red:var(--red,#CC2229);--bt-rbr:var(--rbr,#E8272F);
  --bt-gn:var(--gn,#22c55e);--bt-yl:var(--yl,#facc15);--bt-bl:var(--bl,#3b82f6);--bt-am:#f59e0b;--bt-rd:#ef4444;--bt-lv:var(--lv,#a29bfe);
  --bt-disp:'Bebas Neue','Prompt',Impact,sans-serif;--bt-body:'Prompt','Noto Sans Thai',system-ui,sans-serif;
  --bt-ease:cubic-bezier(.2,.8,.2,1);
}
@keyframes btRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes btBlink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes btPulse{0%{box-shadow:0 0 0 0 currentColor}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ---------- 1. BASE ---------- */
/* ตัวห่อหน้า — ทุกหน้า public ครอบด้วยอันนี้ (กัน overflow แนวนอน) */
.bt-wrap{max-width:1140px;margin:0 auto;padding:20px 16px 90px;color:var(--tx);min-width:0;overflow-wrap:anywhere}
.bt-wrap--narrow{max-width:720px}
.bt-wrap *,.bt-wrap *::before,.bt-wrap *::after{box-sizing:border-box}
.bt-wrap a{color:inherit}
.bt-wrap [hidden]{display:none!important}
.bt-wrap :focus-visible,.bt-hero :focus-visible{outline:2px solid var(--bt-rbr);outline-offset:2px}
/* ฟอนต์โปสเตอร์: Bebas (ละติน) · ไทย fallback Prompt — ห้าม faux-bold */
.bt-disp,.bt-mega,.bt-sec .lb,.bt-sec .lbl,.bt-tier,.bt-cd,.bt-num-d,.bt-vs-side .nm,.bt-vs-side .pct,.bt-vs-mid .v,.bt-pod .nm,.bt-pod .elo,.bt-pod .rk,.bt-col h3,.bt-step .n,.bt-stat .v,.bt-total,.bt-score-row .l,.bt-score-row .r,.bt-wl,.bt-delta,.bt-cov .big,.bt-cov .ttl,.bt-rank{font-family:var(--bt-disp);font-weight:400;font-synthesis:none}
.bt-num,.bt-count{font-variant-numeric:tabular-nums}
.bt-muted{color:var(--mu)}.bt-red{color:var(--bt-red)}.bt-gn{color:var(--bt-gn)}.bt-yl{color:var(--bt-yl)}
.bt-flex{display:flex;align-items:center;gap:10px;min-width:0}
.bt-wrapr{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.bt-hr{height:1px;background:var(--bd);margin:14px 0;border:0}
.bt-g2,.bt-g3,.bt-g4{display:grid;gap:14px}
.bt-g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.bt-g3{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.bt-g4{grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}
.bt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:14px}
/* คอลัมน์หลัก + แถบข้าง (≤900px ซ้อนเป็นคอลัมน์เดียว) */
.bt-split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.bt-split>*{min-width:0}
.bt-sticky{position:sticky;top:76px}
@media(max-width:900px){.bt-split{grid-template-columns:minmax(0,1fr)}.bt-sticky{position:static}}
.bt-back{display:inline-flex;align-items:center;gap:7px;color:var(--mu)!important;text-decoration:none;font-size:12.5px;font-weight:600;margin-bottom:14px}
.bt-back:hover{color:var(--bt-red)!important}
.bt-crumb{font-size:12px;color:var(--mu);display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.bt-crumb a{text-decoration:none}.bt-crumb a:hover{color:var(--tx)}

/* ---------- 2. HERO (โปสเตอร์) ---------- */
/* ฮีโร่ดำ + halftone · ใส่ .bt-hero--slash = แถบแดงเฉียง · .has-cover = รูปปกเป็นพื้น (style="background-image") */
.bt-hero{position:relative;isolation:isolate;overflow:hidden;background:#0a0a0a;border:1px solid var(--bd);border-radius:22px;padding:32px 28px;margin-bottom:22px;background-size:cover;background-position:center}
.bt-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at 88% 12%,rgba(204,34,41,.30),transparent 55%)}
.bt-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(rgba(0,0,0,.55) 1.2px,transparent 1.6px) 0 0/5px 5px,linear-gradient(90deg,rgba(10,10,10,.96) 28%,rgba(10,10,10,.45) 70%,rgba(10,10,10,.85))}
.bt-hero--slash::before{inset:-20% -10%;background:linear-gradient(115deg,transparent 56%,var(--bt-red) 56%,var(--bt-red) 73%,transparent 73%);opacity:.92}
.bt-hero h1{font-size:clamp(24px,4.6vw,38px);line-height:1.18;font-weight:900;margin:0 0 8px;color:#fff;text-wrap:balance}
.bt-hero h1 .hl{color:var(--bt-red)}
.bt-hero p,.bt-lead{margin:0;color:#c9c5c0;font-size:14px;line-height:1.75;max-width:560px}
.bt-hero--center{text-align:center}.bt-hero--center p{margin-inline:auto}
/* ป้ายแดงเหนือหัวข้อ */
.bt-badge,.bt-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;color:#fff;background:var(--bt-red);border-radius:5px;padding:6px 12px;margin-bottom:14px}
.bt-badge .dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:btBlink 1.4s infinite}
.bt-badge.gn,.bt-eyebrow.gn{background:var(--bt-gn);color:#04210f}
/* หัวใหญ่ Bebas เอียง · ใส่ <span class="o"> = ตัวอักษรโครงเส้น */
.bt-mega{font-size:clamp(52px,11vw,120px);line-height:.84;letter-spacing:.02em;font-style:italic;margin:14px 0 10px;overflow-wrap:anywhere}
.bt-mega .o{color:transparent;-webkit-text-stroke:2px var(--tx)}
.bt-nav,.bt-acts,.bt-hero-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.bt-hstats{display:flex;gap:26px;margin-top:24px;flex-wrap:wrap}
.bt-hstats>div b{font-family:var(--bt-disp);font-weight:400;font-size:34px;line-height:1;display:block;letter-spacing:1px}
.bt-hstats>div span{font-size:11px;color:var(--mu);letter-spacing:1px}
/* การ์ดคู่ที่กำลังโหวต (ลอยในฮีโร่) */
.bt-livecard{display:block;background:rgba(0,0,0,.78);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:16px;text-decoration:none;color:var(--tx)}
.bt-livecard:hover{border-color:#fff}
.bt-champbox{background:rgba(0,0,0,.7);border:1px solid rgba(250,204,21,.4);border-radius:16px;padding:14px 16px;min-width:220px}
@media(max-width:700px){.bt-hero{padding:24px 18px;border-radius:18px}.bt-hero--slash::before{opacity:.5}.bt-mega .o{-webkit-text-stroke-width:1.5px}}

/* ---------- 3. SECTION HEADER ---------- */
/* หัวข้อส่วน: slash แดง + ชื่อ Bebas + เส้น + ตัวนับ  <div class="bt-sec"><span class="lb"><i class="bi bi-fire"></i> ชื่อ</span><span class="bar"></span><span class="cnt">3</span></div> */
.bt-sec{display:flex;align-items:center;gap:12px;margin:32px 0 14px}
.bt-sec::before{content:"";width:7px;height:22px;background:var(--bt-red);transform:skewX(-18deg);flex:0 0 7px}
.bt-sec .lb,.bt-sec .lbl{font-size:22px;letter-spacing:2px;line-height:1.1;color:var(--tx);display:inline-flex;align-items:center;gap:9px;text-transform:uppercase}
.bt-sec .lb i,.bt-sec .lbl i{color:var(--bt-red);font-size:.8em}
.bt-sec .bar,.bt-sec .ln{flex:1;height:1px;background:linear-gradient(90deg,var(--bd2,var(--bd)),transparent);min-width:12px}
.bt-sec .cnt{font-size:11px;font-weight:700;color:var(--mu);border:1px solid var(--bd2,var(--bd));border-radius:100px;padding:2px 11px;white-space:nowrap}

/* ---------- 4. BUTTONS / CHIPS ---------- */
/* ปุ่ม: ค่าเริ่ม = แดง · .ghost เทา · .green เขียว · .outline โครงแดง · .lg .sm .block */
.bt-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--bt-red);border:1px solid var(--bt-red);color:#fff!important;text-decoration:none;font-weight:700;font-size:13.5px;line-height:1.3;padding:11px 18px;border-radius:10px;cursor:pointer;font-family:inherit;transition:transform .15s,filter .15s,border-color .15s;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.bt-btn:hover{transform:translateY(-1px);filter:brightness(1.12)}
.bt-btn:active{transform:none}
.bt-btn.ghost{background:var(--c2);border-color:var(--bd2,var(--bd));color:var(--tx)!important;filter:none}
.bt-btn.ghost:hover{border-color:var(--bt-red);filter:none}
.bt-btn.green{background:var(--bt-gn);border-color:var(--bt-gn);color:#04210f!important}
.bt-btn.outline{background:transparent;border-color:var(--bt-red);color:var(--bt-red)!important}
.bt-btn.sm{padding:7px 12px;font-size:12px;border-radius:8px}
.bt-btn.lg{padding:14px 24px;font-size:15px;border-radius:12px}
.bt-btn.block{display:flex;width:100%}
.bt-btn[disabled],.bt-btn.is-off{opacity:.45;cursor:not-allowed;transform:none;filter:none}
/* ป้ายสถานะ: สีผ่าน style="--c:#22c55e" · .solid = พื้นทึบ · .live = แดงทึบ */
.bt-chip{--_c:var(--c,#9a9a9a);display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.3px;line-height:1.5;border-radius:100px;padding:3px 10px;border:1px solid var(--bd2,var(--bd));background:rgba(255,255,255,.05);color:var(--c,var(--tx));white-space:nowrap}
.bt-chip.solid{background:var(--c,var(--bt-red));border-color:transparent;color:#fff}
.bt-chip.live{color:#fff;background:var(--bt-red);border-color:var(--bt-red)}
@supports (background:color-mix(in srgb,red 10%,transparent)){
  .bt-chip{background:color-mix(in srgb,var(--c,#9a9a9a) 14%,transparent);border-color:color-mix(in srgb,var(--c,#9a9a9a) 36%,transparent)}
  .bt-chip.solid{background:color-mix(in srgb,var(--c,var(--bt-red)) 62%,#000);border-color:var(--c,var(--bt-red))}
  .bt-chip.live{background:var(--bt-red);border-color:var(--bt-red)}
  /* ตัวอักษรชิปสีเข้ม (เช่นแดง #CC2229 บนดำ = 2.9:1) ผสมขาว 40% ให้ผ่าน AA 4.5:1 — ชิป solid/live ยังเป็นตัวขาวบนพื้นทึบ */
  .bt-chip:not(.solid):not(.live){color:color-mix(in srgb,var(--c,var(--tx)) 60%,#fff)}
}
.bt-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}
.bt-dot.pulse{animation:btPulse 1.4s infinite}
/* ป้ายระดับ ELO  <span class="bt-tier" style="--c:#facc15">LEGEND</span> */
.bt-tier{display:inline-block;font-size:13px;letter-spacing:1.5px;line-height:1.4;padding:1px 7px;border-radius:5px;color:var(--c,var(--mu));border:1px solid var(--c,var(--bd2))}
@supports (border-color:color-mix(in srgb,red 10%,transparent)){.bt-tier{border-color:color-mix(in srgb,var(--c,#888) 45%,transparent)}}

/* ---------- 5. TABS / SEG ---------- */
/* แท็บ (JS สลับ .on + [data-bt-panel]) — ขีดเส้นใต้แดง · ล้นเลื่อนแนวนอนเฉพาะแถบ */
.bt-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--bd);margin-bottom:16px;-webkit-overflow-scrolling:touch}
.bt-tabs::-webkit-scrollbar{display:none}
.bt-tab{flex:0 0 auto;background:none;border:0;border-bottom:2px solid transparent;color:var(--mu);padding:12px 14px;font-weight:600;font-size:13px;cursor:pointer;font-family:inherit;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;text-decoration:none;margin-bottom:-1px}
.bt-tab:hover{color:var(--tx)}
.bt-tab.on{color:var(--tx);border-bottom-color:var(--bt-red)}
.bt-tab .n{font-size:10.5px;background:var(--c3,#1c1c1c);border-radius:100px;padding:1px 7px;color:var(--mu)}
.bt-tab .pip{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--bt-red);animation:btBlink 1.4s infinite}
.bt-js .bt-panel{display:none}
.bt-js .bt-panel.on{display:block}
/* สวิตช์เลือก 1 ใน n  <div class="bt-seg"><button class="on">A</button><button>B</button></div> */
.bt-seg{display:inline-flex;background:var(--c2);border:1px solid var(--bd2,var(--bd));border-radius:10px;padding:3px;gap:2px;max-width:100%;overflow-x:auto}
.bt-seg button,.bt-seg a{border:0;background:none;padding:6px 12px;border-radius:7px;font-size:12px;font-weight:700;color:var(--mu);cursor:pointer;font-family:inherit;text-decoration:none;white-space:nowrap}
.bt-seg .on{background:var(--c,var(--bt-red));color:#fff}

/* ---------- 6. CARDS / COVER ---------- */
/* การ์ดทั่วไป (legacy = แถว flex) · .blk = block · .pad = padding 18 */
.bt-card{background:var(--c1);border:1px solid var(--bd);border-radius:16px;padding:14px;display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--tx);min-width:0}
.bt-card.blk{display:block}.bt-card.pad{padding:18px}
a.bt-card{transition:border-color .15s,transform .15s}
a.bt-card:hover{border-color:var(--bt-red)}
/* ปกรายการ: monogram ใหญ่ + slash สี (--cc) บนพื้น (--cb) · ถ้ามีรูปใส่ <img> + .has-img  */
.bt-cov{position:relative;display:block;aspect-ratio:16/8;max-width:100%;overflow:hidden;background:var(--cb,#140707);isolation:isolate;text-decoration:none}
.bt-cov::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 52%,var(--cc,var(--bt-red)) 52%,var(--cc,var(--bt-red)) 70%,transparent 70%);opacity:.85;z-index:-1}
.bt-cov::after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(0,0,0,.5) 1px,transparent 1.5px) 0 0/4px 4px;z-index:-1}
.bt-cov>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.bt-cov.has-img::before{display:none}
.bt-cov .big{position:absolute;left:16px;bottom:6px;font-size:clamp(54px,9vw,78px);line-height:.85;font-style:italic;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.85)}
.bt-cov .ttl{position:absolute;right:14px;bottom:14px;max-width:60%;text-align:right;font-size:20px;letter-spacing:2px;line-height:1;color:#fff}
.bt-cov .bt-chip{position:absolute;top:12px;left:12px}
/* การ์ดรายการแข่ง: <article class="bt-card bt-tc"><a class="bt-cov">…</a><div class="bt-body">…</div></article> */
.bt-tc{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;border-radius:18px;transition:transform .2s,border-color .2s;animation:btRise .3s ease both}
.bt-tc:hover{transform:translateY(-3px);border-color:var(--bt-red)}
.bt-body{padding:16px;display:flex;flex-direction:column;gap:9px;flex:1;min-width:0}
.bt-title{font-size:17px;font-weight:800;line-height:1.3;margin:0}
.bt-title a{text-decoration:none}
.bt-sub{font-size:12.5px;color:var(--mu);line-height:1.55;margin:0}
.bt-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11.5px;color:var(--mu)}
.bt-meta i{color:var(--bt-red);margin-right:4px}
.bt-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:auto;padding-top:6px}
/* แถบประกาศเขียว (ประกาศผู้เข้ารอบ) */
.bt-announce{display:flex;align-items:center;gap:14px;background:linear-gradient(90deg,rgba(34,197,94,.14),rgba(34,197,94,.03));border:1px solid rgba(34,197,94,.45);border-radius:14px;padding:13px 16px;margin-bottom:12px;text-decoration:none;color:var(--tx)}
.bt-announce:hover{border-color:var(--bt-gn)}
.bt-announce .ic{width:40px;height:40px;border-radius:11px;background:var(--bt-gn);color:#04210f;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
.bt-announce .tx{flex:1;min-width:0;font-size:12.5px;line-height:1.5;color:var(--mu)}
.bt-announce .tx b{display:block;font-size:14.5px;color:var(--tx)}
.bt-announce .go{color:var(--bt-gn);font-weight:800;font-size:12.5px;white-space:nowrap}
.bt-empty{text-align:center;padding:38px 20px;border:1.5px dashed var(--bd2,var(--bd));border-radius:16px;color:var(--mu);font-size:14px;line-height:1.7}
.bt-empty a{color:var(--bt-red);font-weight:700}
.bt-champ{display:flex;gap:16px;align-items:center;background:linear-gradient(135deg,rgba(204,34,41,.2),var(--c1) 70%);border:1px solid var(--bt-red);border-radius:18px;padding:18px 20px;margin-bottom:22px}
.bt-champ .k{font-size:11px;letter-spacing:2px;font-weight:800;color:var(--bt-red);text-transform:uppercase}
.bt-champ .n{font-size:24px;font-weight:900;line-height:1.2}

/* ---------- 7. AVATAR / WHO ---------- */
/* อวตาร halftone: ขนาด style="--s:44px" · เฉดสี style="--h:350" (0-360) · ใส่ <img> ได้ · .sq = มุมมน */
.bt-av{--s:30px;width:var(--s);height:var(--s);flex:0 0 var(--s);border-radius:50%;position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;font-family:var(--bt-disp);font-weight:400;font-style:normal;font-size:calc(var(--s)*.44);letter-spacing:1px;line-height:1;color:rgba(255,255,255,.94);background:radial-gradient(circle at 30% 22%,hsl(var(--h,355) 38% 46%),hsl(var(--h,355) 30% 16%) 72%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.bt-av::after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(0,0,0,.35) 1px,transparent 1.4px) 0 0/4px 4px;mix-blend-mode:multiply;pointer-events:none}
.bt-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bt-av:has(img)::after{opacity:.3}
.bt-av .bi,.bt-av i{position:relative;z-index:1;font-size:.9em}
.bt-av.sq{border-radius:calc(var(--s)*.28)}
.bt-av.sm{--s:22px}.bt-av.md{--s:44px}.bt-av.lg{--s:64px}.bt-av.xl{--s:88px}
@media(max-width:560px){.bt-av.xl{--s:68px}}
/* อวตาร + ชื่อ + บรรทัดรอง */
.bt-who{display:flex;align-items:center;gap:10px;min-width:0}
.bt-who>div{min-width:0}
.bt-who b{display:block;font-weight:700;font-size:13.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-who small{display:block;color:var(--mu);font-size:11.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- 8. BARS ---------- */
/* แท่งความคืบหน้า  <div class="bt-bar" style="--c:#a29bfe"><i style="width:40%"></i></div> */
.bt-bar{height:8px;border-radius:10px;background:var(--c3,#1c1c1c);overflow:hidden}
.bt-bar>i{display:block;height:100%;background:var(--c,var(--bt-red));border-radius:inherit;transition:width .6s var(--bt-ease)}
/* แท่งโหวต 2 ฝั่ง (แดง / ขาว)  <div class="bt-vbar"><i style="width:58%"></i><i style="width:42%"></i></div> */
.bt-vbar{display:flex;height:10px;border-radius:10px;overflow:hidden;background:var(--c3,#1c1c1c);gap:2px}
.bt-vbar>i{display:block;height:100%;transition:width .7s var(--bt-ease)}
.bt-vbar>i:first-child{background:var(--bt-red)}
.bt-vbar>i:last-child{background:#e9e5df}
/* legacy meter (match.php เดิม) */
.bt-meter{background:var(--c2);border:1px solid var(--bd);border-radius:14px;padding:14px 16px;margin-bottom:18px}
.bt-meter-bar{display:flex;height:26px;border-radius:8px;overflow:hidden;background:var(--c3,#1c1c1c)}
.bt-meter-bar .a{background:var(--bt-red);transition:width .6s ease;display:flex;align-items:center;padding-left:8px;color:#fff;font-size:12px;font-weight:800;min-width:0}
.bt-meter-bar .b{background:#e9e5df;transition:width .6s ease;flex:1;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;color:#111;font-size:12px;font-weight:800}
.bt-meter-foot{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:var(--mu)}

/* ---------- 9. VS STAGE (หน้าแมตช์) ---------- */
/* เวทีแยกจอ 2 ฝั่ง:
   <section class="bt-vs-stage"><div class="bt-vs-top">…chips…</div>
     <div class="bt-vs-grid">
       <div class="bt-vs-side a [win|mine]" style="--h:350"><div class="ph" data-i="YG"></div><span class="crew">CREW</span><div class="nm">NAME</div><div class="pct">58%</div><span class="cnt">2,418 โหวต</span></div>
       <div class="bt-vs-side b" …/></div>
     <div class="bt-vs-mid"><div class="v">VS</div></div>
     <div class="bt-vs-foot"><div class="bt-vbar">…</div> [ปุ่ม .bt-vote · .bt-cdbox · ปุ่ม .bt-vote]</div></section> */
.bt-vs-stage{position:relative;margin:18px 0 20px;border-radius:24px;overflow:hidden;border:1px solid var(--bd);isolation:isolate;background:#000}
.bt-vs-grid{display:grid;grid-template-columns:1fr 1fr;min-height:420px}
.bt-vs-side{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;isolation:isolate;min-width:0}
.bt-vs-side .ph{position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at 50% 35%,hsl(var(--h,355) 34% 36%),hsl(var(--h,355) 30% 8%) 70%)}
.bt-vs-side .ph::after{content:attr(data-i);position:absolute;inset:0;display:grid;place-items:center;font-family:var(--bt-disp);font-size:clamp(110px,20vw,240px);color:rgba(255,255,255,.07);line-height:1;padding-bottom:60px}
.bt-vs-side .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bt-vs-side .ph.has-img::after{display:none}
.bt-vs-side::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(rgba(0,0,0,.6) 1.2px,transparent 1.6px) 0 0/5px 5px,linear-gradient(transparent 35%,rgba(0,0,0,.92))}
.bt-vs-side.a{clip-path:polygon(0 0,100% 0,92% 100%,0 100%);margin-right:-4%}
.bt-vs-side.b{clip-path:polygon(8% 0,100% 0,100% 100%,0 100%);margin-left:-4%;text-align:right;align-items:flex-end}
.bt-vs-side .crew{font-size:11px;font-weight:700;letter-spacing:2px;color:var(--mu);text-transform:uppercase}
.bt-vs-side .nm{font-size:clamp(38px,6.5vw,76px);line-height:.9;letter-spacing:.02em;font-style:italic;margin:6px 0 10px;overflow-wrap:anywhere;max-width:100%}
.bt-vs-side .pct{font-size:clamp(32px,5vw,56px);line-height:1;font-variant-numeric:tabular-nums}
.bt-vs-side .cnt{font-size:12px;color:var(--mu)}
.bt-vs-side.win .nm{color:var(--bt-yl)}
.bt-vs-side.mine .pct{color:var(--bt-red)}
.bt-vs-mid{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:3;text-align:center;pointer-events:none}
.bt-vs-mid .v{font-size:clamp(64px,10vw,124px);line-height:.8;color:#fff;font-style:italic;text-shadow:6px 6px 0 var(--bt-red)}
.bt-vs-top{position:absolute;top:0;left:0;right:0;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 20px;flex-wrap:wrap}
.bt-vs-foot{position:relative;z-index:4;background:#0b0b0b;border-top:1px solid var(--bd);padding:16px 20px;display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}
.bt-vs-foot .bt-vbar{grid-column:1/-1;height:14px}
@media(max-width:640px){.bt-vs-grid{min-height:340px}.bt-vs-side{padding:16px}.bt-vs-top{padding:12px}.bt-vs-foot{grid-template-columns:1fr 1fr;padding:14px}.bt-vs-foot .bt-cdbox{grid-column:1/-1;order:-1}.bt-vs-foot .bt-vbar{order:-2}}
/* legacy VS (การ์ดนักแข่ง 3 คอลัมน์) */
.bt-vs{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:stretch;margin-bottom:18px}
.bt-fighter{background:var(--c1);border:1px solid var(--bd);border-radius:16px;padding:16px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;transition:border-color .2s,background .2s;min-width:0}
.bt-fighter .nm{font-size:18px;font-weight:900;line-height:1.2;overflow-wrap:anywhere}
.bt-fighter .sub{font-size:12px;color:var(--mu)}
.bt-fighter.mine{border-color:var(--bt-red);background:rgba(204,34,41,.10)}
.bt-fighter.win{border-color:var(--bt-gn);background:rgba(34,197,94,.08)}
.bt-fighter .crown{font-size:11px;font-weight:800;letter-spacing:1.5px;color:var(--bt-gn)}
.bt-vsmark{align-self:center;font-family:var(--bt-disp);font-weight:400;font-style:italic;font-size:30px;color:var(--bt-red)}
/* คู่แข่งย่อ (หน้าส่งคลิป / การ์ดแมตช์)  <div class="bt-minivs"><div class="bt-who">…</div><span class="v">VS</span><div class="bt-who">…</div></div> */
.bt-minivs{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;padding:16px;border-radius:18px;background:var(--c1);border:1px solid var(--bd)}
.bt-minivs .v{font-family:var(--bt-disp);font-size:38px;color:var(--bt-red);font-style:italic;line-height:1}

/* ---------- 10. VOTE / COUNTDOWN / POSTS ---------- */
.bt-vote-row,.bt-voterow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.bt-vote-row form{margin:0}
/* ปุ่มโหวต: <button class="bt-vote [voted]">โหวต X<small>แตะเพื่อโหวต</small></button> (.bt-vote-btn = ชื่อเดิม) */
.bt-vote,.bt-vote-btn{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--c2);border:2px solid var(--bd2,var(--bd));color:var(--tx)!important;font-weight:800;font-size:14px;line-height:1.35;border-radius:14px;padding:14px 8px;cursor:pointer;font-family:inherit;text-decoration:none;transition:border-color .15s,transform .15s,background .15s;-webkit-tap-highlight-color:transparent}
.bt-vote small,.bt-vote-btn small{font-weight:500;color:var(--mu);font-size:11.5px}
.bt-vote:hover,.bt-vote-btn:hover{border-color:var(--bt-red);transform:translateY(-2px)}
.bt-vote.voted,.bt-vote.on,.bt-vote-btn.voted,.bt-vote-btn.on{background:var(--bt-red);border-color:var(--bt-red);color:#fff!important}
.bt-vote.voted small,.bt-vote.on small,.bt-vote-btn.voted small,.bt-vote-btn.on small{color:rgba(255,255,255,.85)}
.bt-vote[disabled],.bt-vote-btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.bt-count{font-weight:800;color:var(--tx)}
/* นับถอยหลัง: <div class="bt-cdbox"><span class="bt-cd" data-bt-until="…">—</span><small>ปิดโหวต …</small></div> */
.bt-cd{font-size:24px;letter-spacing:2px;line-height:1;font-variant-numeric:tabular-nums;color:var(--tx)}
.bt-cd.red{color:var(--bt-red)}
.bt-cdbox{text-align:center}
.bt-cdbox small{display:block;font-size:10.5px;color:var(--mu);letter-spacing:1px;margin-top:3px}
/* โพสต์ Social / ฝังคลิป */
.bt-post{margin-bottom:14px}
.bt-embed{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;border:1px solid var(--bd);cursor:pointer}
.bt-embed img{width:100%;height:100%;object-fit:cover;opacity:.85}
.bt-embed .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.bt-embed .play span{width:68px;height:68px;border-radius:50%;background:var(--bt-red);color:#fff;display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:0 6px 24px rgba(204,34,41,.5)}
.bt-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.bt-postlink{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--c2);border:1px solid var(--bd);border-radius:12px;padding:12px 14px;text-decoration:none;font-weight:700;min-width:0}
.bt-postlink:hover{border-color:var(--bt-red)}
.bt-postlink .pi{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:18px;color:#fff;flex-shrink:0;background:#222}
.bt-break{display:grid;gap:10px}
.bt-brow{background:var(--c1);border:1px solid var(--bd);border-radius:12px;padding:12px 14px}
.bt-brow .t{display:flex;justify-content:space-between;font-size:12.5px;font-weight:800;margin-bottom:8px}
.bt-brow .t span{color:var(--mu);font-weight:600}
.bt-total{font-size:46px;line-height:1;text-align:center;margin:6px 0}
/* แถวคะแนน ซ้าย | หัวข้อ | ขวา */
.bt-score-row{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--bd);font-size:13px}
.bt-score-row:last-child{border:0}
.bt-score-row .l,.bt-score-row .r{font-size:26px;line-height:1}
.bt-score-row .r{text-align:right}
.bt-score-row .m{text-align:center;color:var(--mu);font-size:11.5px;min-width:96px}

/* ---------- 11. BRACKET ---------- */
/* สาย: เลื่อนแนวนอนเฉพาะกล่อง · คอลัมน์ = รอบ · .bt-m = แมตช์ (a ลิงก์ไปหน้าแมตช์)
   <div class="bt-bracket"><div class="bt-col"><h3>รอบแรก</h3><div class="bt-col-body"><a class="bt-m run" href="…">
     <div class="bt-m-h"><span>#1</span><span class="bt-chip" style="--c:#CC2229">โหวต</span></div>
     <div class="bt-side win"><span class="bt-av"></span><span class="nm">NAME<span class="sub">CREW</span></span><span class="sc">78.4</span></div>
     <div class="bt-side lose">…</div></a></div></div></div> */
.bt-bracket{display:flex;gap:18px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x proximity;max-width:100%;-webkit-overflow-scrolling:touch}
.bt-col{flex:0 0 min(78vw,270px);scroll-snap-align:start;display:flex;flex-direction:column;gap:12px}
.bt-col h3{font-size:17px;letter-spacing:3px;color:var(--mu);margin:0 0 2px;text-transform:uppercase}
.bt-col-body{display:flex;flex-direction:column;justify-content:space-around;gap:12px;flex:1}
.bt-grp{font-size:10px;font-weight:800;letter-spacing:2px;color:var(--bt-red);margin:4px 0 -4px;text-transform:uppercase}
.bt-m{display:block;background:var(--c1);border:1px solid var(--bd);border-radius:12px;overflow:hidden;text-decoration:none;color:var(--tx);transition:border-color .15s,transform .15s,box-shadow .15s;animation:btRise .3s ease both}
.bt-m:hover{border-color:var(--bt-red);transform:translateY(-2px)}
.bt-m.run{border-color:var(--bt-red);box-shadow:0 0 0 3px rgba(204,34,41,.15)}
.bt-m-h{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:5px 10px;font-size:10.5px;color:var(--mu);border-bottom:1px solid var(--bd);background:var(--c2)}
.bt-m-h .bt-chip{font-size:9.5px;padding:1px 8px}
.bt-side{display:flex;align-items:center;gap:9px;padding:8px 10px;font-size:13px;font-weight:700;border-left:3px solid transparent;min-height:44px}
.bt-side+.bt-side{border-top:1px solid var(--bd)}
.bt-side .nm{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt-side .sub{display:block;font-size:10.5px;font-weight:600;color:var(--mu)}
.bt-side .sc{margin-left:auto;font-family:var(--bt-disp);font-weight:400;font-size:16px;color:var(--mu);font-variant-numeric:tabular-nums}
.bt-side.win{border-left-color:var(--bt-gn);background:rgba(34,197,94,.08)}
.bt-side.win .nm{color:#fff}.bt-side.win .sc{color:var(--bt-gn)}
.bt-side.lose{opacity:.5}
.bt-side.tbd{color:var(--mu);font-weight:500;font-style:italic}
.bt-side.bye{color:var(--mu);font-weight:800;letter-spacing:2px;font-size:11px}

/* ---------- 12. TABLE / STATS / KV ---------- */
/* ตาราง: <div class="bt-tbl-w"><table class="bt-tbl">…</table></div> (.bt-scroll/.bt-table = ชื่อเดิม) · แถวตัวเอง = tr.me · .bt-tbl--min = กว้างขั้นต่ำ 640 */
.bt-tbl-w,.bt-scroll{overflow-x:auto;border:1px solid var(--bd);border-radius:14px;background:var(--c1);max-width:100%;-webkit-overflow-scrolling:touch}
.bt-tbl,.bt-table{width:100%;border-collapse:collapse;font-size:13px}
.bt-tbl--min{min-width:640px}
.bt-tbl th,.bt-table th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--mu);padding:12px 14px;border-bottom:1px solid var(--bd);background:var(--c2);white-space:nowrap}
.bt-tbl td,.bt-table td{padding:11px 14px;border-bottom:1px solid var(--bd);vertical-align:middle}
.bt-tbl tr:last-child td,.bt-table tr:last-child td{border-bottom:0}
.bt-tbl tr:hover td{background:rgba(255,255,255,.02)}
.bt-tbl tr.me td,.bt-me td,tr.bt-me{background:rgba(204,34,41,.08)}
.bt-me{background:rgba(204,34,41,.08)}
.bt-rank{display:inline-block;min-width:40px;font-size:22px;font-style:italic;color:var(--mu);line-height:1}
.bt-rank.top{color:var(--bt-red)}
/* ตัวเลขสรุป: <div class="bt-stats"><div class="bt-stat"><div class="v">#3</div><div class="l">อันดับ</div></div>…</div> */
.bt-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin:16px 0}
.bt-stat{background:var(--c1);border:1px solid var(--bd);border-radius:14px;padding:12px 14px;text-align:center;min-width:0}
.bt-stat .v{font-size:32px;line-height:1.05;letter-spacing:1px}
.bt-stat .l{font-size:11px;color:var(--mu);letter-spacing:1px;text-transform:uppercase}
.bt-win{color:var(--bt-gn);font-weight:800}
.bt-loss{color:var(--bt-rd);font-weight:800}
/* key/value: <dl class="bt-kv"><dt>ค่าสมัคร</dt><dd>฿100</dd>…</dl> */
.bt-kv{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:13px;margin:0}
.bt-kv dt{color:var(--mu)}.bt-kv dd{margin:0;text-align:right;font-weight:600;min-width:0;overflow-wrap:anywhere}

/* ---------- 13. CALLOUT / NOTE ---------- */
/* กล่องแจ้ง: style="--c:#22c55e" (ค่าเริ่ม = เหลือง)  <div class="bt-callout"><i class="bi bi-info-circle"></i><div>ข้อความ</div></div> */
.bt-callout{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.65;padding:12px 14px;border-radius:12px;margin:10px 0;background:rgba(250,204,21,.07);border:1px solid rgba(250,204,21,.3);color:var(--tx)}
.bt-callout>i{color:var(--c,var(--bt-yl));margin-top:3px}
.bt-callout>div{min-width:0}
@supports (background:color-mix(in srgb,red 10%,transparent)){.bt-callout{background:color-mix(in srgb,var(--c,var(--bt-yl)) 8%,transparent);border-color:color-mix(in srgb,var(--c,var(--bt-yl)) 32%,transparent)}}
.bt-callout.err{--c:var(--bt-rd)}.bt-callout.ok{--c:var(--bt-gn)}.bt-callout.red{--c:var(--bt-red)}
/* ข้อความเล็ก (ไม่มีกรอบ) */
.bt-note{font-size:12.5px;color:var(--mu);line-height:1.6;margin:6px 0}
.bt-note.err{color:var(--bt-rd)}.bt-note.ok{color:var(--bt-gn)}
.bt-warn{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.5);color:var(--bt-am);border-radius:12px;padding:12px 14px;font-size:13px;font-weight:700;margin-bottom:14px}

/* ---------- 14. STEPS / TIMELINE / PROGRESS ---------- */
/* ขั้นตอน (เลขแดง Bebas)  <div class="bt-steps"><div class="bt-step"><div class="n">01</div><b>สมัคร</b><small>…</small></div>…</div> */
.bt-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:10px;margin:16px 0}
.bt-step{background:var(--c1);border:1px solid var(--bd);border-radius:14px;padding:14px}
.bt-step .n{font-size:40px;line-height:.9;color:var(--bt-red)}
.bt-step b{display:block;font-size:13.5px;margin-top:6px}
.bt-step small{color:var(--mu);font-size:11.5px;line-height:1.5;display:block;margin-top:2px}
/* timeline แนวตั้ง  <div class="bt-tl"><div class="it done|cur"><span class="b"><i class="bi bi-check"></i></span><div><b>ชื่อ</b><small>รายละเอียด</small></div></div>…</div> */
.bt-tl{display:flex;flex-direction:column;padding:4px 0 8px}
.bt-tl .it{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;position:relative;padding-bottom:16px}
.bt-tl .it::before{content:"";position:absolute;left:10px;top:22px;bottom:0;width:2px;background:var(--bd2,var(--bd))}
.bt-tl .it:last-child::before{display:none}
.bt-tl .b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;background:var(--c3,#1c1c1c);border:2px solid var(--bd2,var(--bd));color:var(--mu)}
.bt-tl .it.done .b{background:var(--bt-gn);border-color:var(--bt-gn);color:#04210f}
.bt-tl .it.cur .b{background:var(--bt-red);border-color:var(--bt-red);color:#fff;box-shadow:0 0 0 4px rgba(204,34,41,.25)}
.bt-tl .it b{font-size:13.5px;display:block}
.bt-tl .it small{font-size:12px;color:var(--mu)}
/* pipeline สถานะรายการ  <div class="bt-prog"><div class="s done">รับสมัคร</div><div class="s cur">คัดเลือก</div><div class="s">…</div></div> */
.bt-prog{display:flex;margin-top:18px;overflow-x:auto;scrollbar-width:none;max-width:100%}
.bt-prog::-webkit-scrollbar{display:none}
.bt-prog .s{flex:1;min-width:84px;position:relative;padding-top:15px;font-size:11px;color:var(--mu);text-align:center;white-space:nowrap}
.bt-prog .s::before{content:"";position:absolute;top:4px;left:0;right:0;height:2px;background:var(--bd2,var(--bd))}
.bt-prog .s::after{content:"";position:absolute;top:0;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--c3,#1c1c1c);border:2px solid var(--bd2,var(--bd))}
.bt-prog .s.done{color:var(--tx)}.bt-prog .s.done::before{background:var(--bt-red)}.bt-prog .s.done::after{background:var(--bt-red);border-color:var(--bt-red)}
.bt-prog .s.cur{color:#fff;font-weight:700}.bt-prog .s.cur::after{background:#fff;border-color:var(--bt-red);box-shadow:0 0 0 4px rgba(204,34,41,.35)}

/* ---------- 15. PODIUM / BEATS ---------- */
/* โพเดียม top3 (วางอันดับ 1 ไว้กลาง)  <div class="bt-podium"><div class="bt-pod"><span class="rk">2</span>…<div class="nm">NAME</div><div class="elo" style="--c:#cbd5e1">1590</div></div><div class="bt-pod p1">…</div>…</div> */
.bt-podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:12px;align-items:end;margin:20px 0}
.bt-pod{background:var(--c1);border:1px solid var(--bd);border-radius:18px;padding:18px 14px;text-align:center;position:relative;overflow:hidden;min-width:0}
.bt-pod .rk{font-size:70px;line-height:.8;position:absolute;right:10px;top:8px;color:rgba(255,255,255,.06)}
.bt-pod .nm{font-size:24px;letter-spacing:1px;margin-top:10px;line-height:1;overflow-wrap:anywhere}
.bt-pod .elo{font-size:36px;color:var(--c,var(--tx));line-height:1;margin-top:8px}
.bt-pod.p1{border-color:rgba(250,204,21,.5);background:linear-gradient(180deg,rgba(250,204,21,.09),var(--c1) 60%);padding-top:26px}
.bt-pod.p1 .elo{font-size:48px}
@media(max-width:560px){.bt-podium{grid-template-columns:minmax(0,1fr)}.bt-pod.p1{order:-1}}
/* ค้นหา/กรอง */
.bt-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.bt-filter input,.bt-filter select{background:var(--c2);color:var(--tx);border:1px solid var(--bd2,var(--bd));border-radius:10px;padding:10px 12px;font-family:inherit;font-size:13px;min-width:0;flex:1 1 130px}
.bt-filter input:focus,.bt-filter select:focus{border-color:var(--bt-red);outline:none}
/* การ์ดบีท: ปก 16:9 (.cover) หรือภาพจานเสียงสี่เหลี่ยม (.art) + ปุ่มเล่น (.play span) · .locked = ยังไม่เปิดเผย
   <div class="bt-beat"><div class="art" style="--h:5"><span class="play"><span><i class="bi bi-play-fill"></i></span></span></div><div class="info"><div class="ttl">ชื่อ</div><div class="meta">chips</div></div></div> */
.bt-beat{background:var(--c1);border:1px solid var(--bd);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.bt-beat .cover,.bt-beat .art{position:relative;aspect-ratio:16/9;background:radial-gradient(circle at 30% 30%,hsl(var(--h,355) 45% 30%),#090909 75%);cursor:pointer;overflow:hidden}
.bt-beat .art::after{content:"";position:absolute;inset:0;background:repeating-radial-gradient(circle at 50% 50%,transparent 0 6px,rgba(0,0,0,.35) 6px 7px);pointer-events:none}
.bt-beat .cover img,.bt-beat .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bt-beat .cover iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.bt-beat .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1}
.bt-beat .play span{width:54px;height:54px;border-radius:50%;background:var(--bt-red);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 6px 26px rgba(204,34,41,.5)}
.bt-beat .info{padding:12px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.bt-beat .ttl{font-weight:800;font-size:14.5px;line-height:1.3}
.bt-beat .meta{display:flex;flex-wrap:wrap;gap:5px}
.bt-beat.locked{border-style:dashed;text-align:center}
.bt-beat.locked .art,.bt-beat.locked .cover{background:repeating-linear-gradient(45deg,#111 0 10px,#0b0b0b 10px 20px);cursor:default}
.bt-beat.locked .art::after{display:none}
.bt-beat.locked .lockbox{padding:26px 14px;display:flex;flex-direction:column;align-items:center;gap:8px}
.bt-beat.locked .ic{font-size:34px;color:var(--bt-red)}
/* คลื่นเสียง (ตกแต่ง): <div class="bt-wave on"><i style="height:40%"></i>…</div> */
.bt-wave{display:flex;align-items:center;gap:2px;height:30px}
.bt-wave i{flex:1;background:var(--bd2,#2a2a2a);border-radius:2px}
.bt-wave.on i:nth-child(-n+18){background:var(--bt-red)}

/* ---------- 16. FORMS ---------- */
/* ฟอร์ม: <form class="bt-form"><label class="bt-fld"><span>ชื่อ <b class="req">*</b></span><input class="bt-in"><small>คำใบ้</small></label> … */
.bt-form{display:flex;flex-direction:column;gap:16px}
.bt-fld{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:600;min-width:0}
.bt-fld>span{color:var(--mu);font-weight:600;display:flex;align-items:center;gap:6px}
.bt-fld .req,.bt-req{color:var(--bt-red)}
.bt-fld .opt{margin-left:auto;font-size:10px;font-weight:600;color:var(--mu);background:var(--c2);padding:2px 8px;border-radius:5px}
.bt-fld small{color:var(--mu);font-weight:400;font-size:11.5px;line-height:1.55}
.bt-in,.bt-area{width:100%;background:var(--c2);border:1px solid var(--bd2,var(--bd));border-radius:10px;padding:12px 13px;color:var(--tx);font-family:inherit;font-size:14px;outline:none;transition:border-color .15s,box-shadow .15s;color-scheme:dark}
.bt-in:focus,.bt-area:focus{border-color:var(--bt-red);box-shadow:0 0 0 3px rgba(204,34,41,.18)}
.bt-in.ok{border-color:rgba(34,197,94,.6)}.bt-in.bad{border-color:rgba(239,68,68,.7)}
textarea.bt-in,.bt-area{resize:vertical;min-height:90px;line-height:1.6}
.bt-fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px}
/* กล่องรวมฟอร์ม (หัวข้อ + เนื้อหา)  <section class="bt-card blk bt-formcard"><h2><i class="bi bi-person"></i> หัวข้อ</h2>… */
.bt-formcard{padding:20px}
.bt-formcard>h2{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:800;margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--bd)}
.bt-formcard>h2 i{width:30px;height:30px;border-radius:9px;background:var(--bt-red);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
/* ช่องติ๊กยอมรับ (ติ๊กแล้วขอบแดง)  <label class="bt-check"><input type="checkbox"><span>ข้อความ</span></label> */
.bt-check{display:flex;gap:12px;align-items:flex-start;background:var(--c2);border:1.5px solid var(--bd);border-radius:12px;padding:13px 14px;cursor:pointer;font-size:13px;line-height:1.6}
.bt-check:has(input:checked){border-color:var(--bt-red);background:rgba(204,34,41,.07)}
.bt-check input{margin-top:3px;width:19px;height:19px;accent-color:var(--bt-red);flex-shrink:0}
/* พื้นที่อัปโหลดไฟล์ (เส้นประ) */
.bt-drop{border:2px dashed var(--bd2,var(--bd));border-radius:14px;padding:20px;text-align:center;color:var(--mu);font-size:12.5px;background:var(--c2);cursor:pointer}
.bt-drop:hover{border-color:var(--bt-red)}
.bt-drop>i{font-size:26px;color:var(--bt-red);display:block;margin-bottom:6px}
.bt-drop img{max-width:100%;border-radius:10px}
/* เช็คลิสต์ผลตรวจ: <div class="bt-chk"><div class="ok"><i class="bi bi-check-circle-fill"></i> ข้อความ</div><div>…</div></div> */
.bt-chk{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.bt-chk>div{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--mu)}
.bt-chk>div i{color:var(--mu2,#777)}
.bt-chk>div.ok{color:var(--tx)}.bt-chk>div.ok i{color:var(--bt-gn)}
.bt-chk>div.bad{color:var(--bt-rd)}.bt-chk>div.bad i{color:var(--bt-rd)}
/* กล่องเส้นประ "ล็อกอยู่" */
.bt-lockbox{border:1px dashed var(--bd2,var(--bd));border-radius:12px;padding:10px;text-align:center;font-size:11.5px;color:var(--mu);margin-top:8px}
/* ช่อง honeypot (ซ่อน) */
.bt-hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
/* ผลตรวจ inline: <div class="bt-out ok|bad|unk"> */
.bt-out{margin-top:10px;font-size:12.5px;line-height:1.6;border-radius:10px}
.bt-out.ok,.bt-out.bad,.bt-out.unk{padding:10px 12px}
.bt-out.ok{color:var(--bt-gn);background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.45)}
.bt-out.bad{color:var(--bt-rd);background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.45)}
.bt-out.unk{color:var(--bt-am);background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.45)}

/* ---------- 17. PORTAL / RAPPER ---------- */
/* พอร์ทัลผู้แข่ง: <article class="bt-mycard"><div class="hd">…</div><div class="bt-next">…</div><div class="bt-tl bt-pad">…</div></article> */
.bt-mycard{border-radius:20px;border:1px solid var(--bd);background:var(--c1);overflow:hidden;margin-bottom:18px}
.bt-mycard .hd{padding:16px 18px;display:flex;gap:14px;align-items:center;border-bottom:1px solid var(--bd);flex-wrap:wrap}
.bt-mycard .sec{padding:14px 18px;border-bottom:1px solid var(--bd)}
.bt-mycard .sec:last-child{border-bottom:0}
.bt-pad{padding:4px 18px 16px}
/* "สิ่งที่ต้องทำต่อ" — กล่องแดงเด่น  <div class="bt-next"><div>ข้อความ</div><a class="bt-btn">ไปทำ</a></div> */
.bt-next{margin:16px 18px;border-radius:16px;padding:16px;background:linear-gradient(110deg,rgba(204,34,41,.22),rgba(204,34,41,.05));border:1px solid rgba(204,34,41,.5);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center}
.bt-next.gn{background:linear-gradient(110deg,rgba(34,197,94,.16),rgba(34,197,94,.04));border-color:rgba(34,197,94,.5)}
@media(max-width:640px){.bt-next{grid-template-columns:minmax(0,1fr)}}
/* โปรไฟล์แร็ปเปอร์ */
.bt-rhero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:center;padding:24px;border-radius:22px;border:1px solid var(--bd);background:linear-gradient(110deg,#0f0f0f 55%,rgba(204,34,41,.25));position:relative;overflow:hidden;margin-bottom:18px}
.bt-rhero h1{font-family:var(--bt-disp);font-weight:400;font-synthesis:none;font-size:clamp(40px,7vw,76px);line-height:.9;font-style:italic;margin:0 0 6px;overflow-wrap:anywhere}
@media(max-width:700px){.bt-rhero{grid-template-columns:minmax(0,1fr);padding:18px}}
/* ประวัติแมตช์  <div class="bt-hist"><span class="bt-wl w">W</span><div class="bt-who">…</div><span class="bt-delta bt-win">+14</span></div> */
.bt-hist{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--bd);min-width:0}
.bt-hist:last-child{border:0}
.bt-wl{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:17px;flex-shrink:0}
.bt-wl.w{background:rgba(34,197,94,.15);color:var(--bt-gn)}.bt-wl.l{background:rgba(239,68,68,.12);color:var(--bt-rd)}
.bt-delta{font-size:18px;margin-left:auto;white-space:nowrap}

/* ---------- 18. JUDGE ---------- */
.bt-score-side{background:var(--c1);border:1px solid var(--bd);border-radius:16px;padding:14px;margin-bottom:14px}
.bt-score-side h3{margin:0 0 10px;font-size:16px}
.bt-crit{display:grid;grid-template-columns:110px 1fr;gap:8px;align-items:center;margin-bottom:10px;font-size:13px;font-weight:700}
.bt-crit.bad{color:var(--bt-rd)}
.bt-nums{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.bt-nums label{position:relative;cursor:pointer}
.bt-nums input{position:absolute;opacity:0;inset:0;cursor:pointer;width:100%;height:100%;margin:0}
.bt-nums span{display:block;text-align:center;padding:9px 0;border:1px solid var(--bd2,var(--bd));border-radius:8px;font-size:13px;font-weight:800;background:var(--c2)}
.bt-nums input:checked+span{background:var(--bt-red);border-color:var(--bt-red);color:#fff}
.bt-nums input:focus-visible+span{outline:2px solid var(--tx);outline-offset:1px}

/* ---------- 19. TOAST ---------- */
.bt-toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;z-index:90;background:#111;border:1px solid var(--bd2,var(--bd));border-left:3px solid var(--bt-gn);border-radius:12px;padding:12px 16px;font-size:13px;box-shadow:0 10px 40px rgba(0,0,0,.6);transition:opacity .3s,transform .3s;pointer-events:none;max-width:calc(100% - 32px)}
.bt-toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- 20. RESPONSIVE / MOTION ---------- */
@media(max-width:560px){
  .bt-wrap{padding:14px 14px 90px}
  .bt-vs{gap:6px}
  .bt-fighter{padding:12px 6px}
  .bt-fighter .nm{font-size:15px}
  .bt-vsmark{font-size:22px}
  .bt-crit{grid-template-columns:1fr}
  .bt-nums span{padding:11px 0}
  .bt-sec .lb,.bt-sec .lbl{font-size:19px}
  .bt-minivs{grid-template-columns:1fr;gap:8px;text-align:center}
  .bt-minivs .bt-who{justify-content:center}
  .bt-announce{flex-wrap:wrap}
  .bt-btn.block-m{display:flex;width:100%}
}
@media(prefers-reduced-motion:reduce){
  .bt-wrap *,.bt-hero *,.bt-wrap *::before,.bt-wrap *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .bt-tc:hover,.bt-m:hover,.bt-btn:hover,.bt-vote:hover,.bt-vote-btn:hover{transform:none}
}

/* ============================================================================
   ROII UI KIT skin สำหรับ .bt-* — ย้ายมาจาก app/Views/public/battle/_skin.php
   อยู่ท้ายไฟล์ = ทับโครงเดิมด้านบน · <style> ของแต่ละหน้า (อยู่ใน body) ยังชนะเหมือนเดิม
   ห้ามลอยตอน hover · ห้ามเปลี่ยนชื่อ class ที่ JS ใช้ (.on .voted .mine .bt-js .drag .over)
   ========================================================================== */
 ของหน้า
 *
 * battle-view.css (โครง .bt-*) ยังเป็นตัวหลัก · ไฟล์นี้แค่ "ทับหน้าตา" ให้เข้าชุดกับ style.css (ROII UI KIT r-* / .rc)
 *   ปุ่ม/ชิป/แท็บ = แคปซูล พื้นดำโปร่ง ขอบแดงจาง ไอคอนแดง · หลัก/เลือกอยู่ = แดงไล่เฉด (--r-grad)
 *   การ์ดมุม 16px · hover = ขอบแดง + แสงแดง (--r-glow) เท่านั้น — ห้ามลอย/translateY (เจ้าของไม่เอา)
 *   หัวข้อส่วน = ตัวขาว + ขีดแดงสั้นใต้หัวข้อ (เหมือน .r-sec-h / .r-box-h)
 *
 * ⚠️ CSS ล้วน ไม่มี id / script · ห้ามเปลี่ยนชื่อ class ที่ JS ใช้ (.on .voted .mine .bt-js .drag .over ฯลฯ)
 * ⚠️ require ไว้ "ก่อน" <style> ของหน้า → กฎเฉพาะหน้าที่ specificity เท่ากันยังชนะ
 */
?>
<style>
/* ---- keyframes: เข้าแบบจาง (แทน btRise ที่เลื่อนขึ้น) ---- */
@keyframes btSkinFade{from{opacity:0}to{opacity:1}}

/* ---- ปุ่ม: แคปซูล · ค่าเริ่ม = แดงไล่เฉด · ghost = แก้วดำขอบแดงจาง ---- */
.bt-btn{border-radius:999px;background:var(--r-grad);border-color:var(--rbr);font-family:'Prompt',sans-serif;font-weight:600;transition:color .18s,background-color .18s,border-color .18s,filter .18s}
.bt-btn:hover,.bt-btn:active{transform:none;filter:brightness(1.08)}
.bt-btn.ghost{background:var(--r-glass);border-color:var(--r-line);color:#d6d3cd!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.bt-btn.ghost i{color:var(--red)}
.bt-btn.ghost:hover{color:#fff!important;border-color:var(--red);background:rgba(204,34,41,.14);filter:none}
.bt-btn.outline{background:var(--r-glass);border-color:var(--red);color:#ff5a60!important}
.bt-btn.outline:hover{color:#fff!important;background:rgba(204,34,41,.14);filter:none}
.bt-btn.sm{padding:7px 13px;border-radius:999px}
.bt-btn.lg{padding:14px 26px;border-radius:999px}
.bt-btn[disabled],.bt-btn.is-off{transform:none}

/* ลิงก์ย้อนกลับ = ชิปเล็ก */
.bt-back{padding:7px 15px 7px 12px;border-radius:999px;background:var(--r-glass);border:1px solid var(--r-line);color:#d6d3cd!important;transition:color .18s,border-color .18s,background-color .18s}
.bt-back i{color:var(--red)}
.bt-back:hover{color:#fff!important;border-color:var(--red);background:rgba(204,34,41,.14)}
.bt-crumb{font-family:'Bebas Neue','Prompt',sans-serif;font-size:12.5px;letter-spacing:2px}
.bt-crumb a{color:var(--mu);transition:color .18s}
.bt-crumb a:hover{color:#fff}
.bt-crumb>:last-child{color:var(--red)}

/* ---- ป้าย / ชิป ---- */
.bt-badge,.bt-eyebrow{border-radius:999px;background:var(--r-grad);padding:6px 14px 6px 12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 14px rgba(0,0,0,.45)}
.bt-tier{border-radius:999px;padding:1px 9px}

/* ---- หัวข้อส่วน: ตัวขาว + ขีดแดงสั้นใต้หัวข้อ (แทน slash เฉียง + เส้นไล่เฉด) ---- */
.bt-sec{position:relative;gap:10px;margin:36px 0 18px;padding-bottom:12px;border-bottom:1px solid var(--bd)}
.bt-sec::before{position:absolute;left:0;bottom:-1px;width:64px;height:2px;flex:none;transform:none;background:var(--red)}
.bt-sec .lb,.bt-sec .lbl{color:#fff;letter-spacing:2.5px}
.bt-sec .bar,.bt-sec .ln{background:none}
.bt-sec .cnt{padding:3px 12px;border-color:rgba(204,34,41,.32);background:rgba(204,34,41,.1);color:#ff5a60}

/* ---- แท็บ = แถวชิป .rc (JS สลับ .on เหมือนเดิม) ---- */
.bt-tabs{gap:8px;border-bottom:0;padding:2px 0 4px;margin-bottom:18px}
.bt-tab{margin-bottom:0;padding:9px 18px 9px 14px;border:1px solid var(--r-line);border-radius:999px;background:var(--r-glass);color:#d6d3cd;font-family:'Prompt',sans-serif;font-size:12.5px;line-height:1;transition:color .18s,background-color .18s,border-color .18s}
.bt-tab i{color:var(--red)}
.bt-tab:hover{color:#fff;border-color:var(--red);background:rgba(204,34,41,.14)}
.bt-tab.on,.bt-tab.on:hover{color:#fff;background:var(--r-grad);border-color:var(--rbr)}
.bt-tab.on i{color:#fff}
.bt-tab.on .n{background:rgba(0,0,0,.28);color:#fff}
.bt-tab.on .pip{background:#fff}
.bt-seg{border-radius:999px;background:var(--r-glass);border-color:var(--r-line);padding:4px}
.bt-seg button,.bt-seg a{border-radius:999px;font-family:'Prompt',sans-serif;font-weight:600;transition:color .18s,background-color .18s}
.bt-seg button:hover,.bt-seg a:hover{color:#fff}
.bt-seg .on{background:var(--c,var(--r-grad));color:#fff}

/* ---- ฮีโร่ / แผงเด่น ---- */
.bt-hero{border-color:rgba(204,34,41,.2);border-radius:20px}
.bt-rhero{border-color:rgba(204,34,41,.2);border-radius:20px}
.bt-hstats>div b{color:#fff}
.bt-livecard{border-color:var(--r-line);border-radius:16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:border-color .18s,box-shadow .18s}

/* ---- การ์ด: มุม 16 · พื้นไล่เฉดของ kit · hover = ขอบแดง + แสงแดง (ไม่ลอย) ---- */
.bt-card,.bt-step,.bt-stat,.bt-beat,.bt-pod,.bt-minivs,.bt-score-side,.bt-brow,.bt-mycard{background:var(--r-card-bg)}
.bt-step,.bt-stat,.bt-minivs,.bt-brow{border-radius:16px}
.bt-tc{border-radius:16px;transition:border-color .18s,box-shadow .18s;animation-name:btSkinFade}
.bt-tc .bt-cov>img{transition:transform .45s ease}
.bt-tc:hover .bt-cov>img{transform:scale(1.05)}
.bt-tc .bt-title a{transition:color .18s}
.bt-tc .bt-title a:hover{color:#fff}
a.bt-card{transition:border-color .18s,box-shadow .18s}
a.bt-card:hover,.bt-tc:hover,.bt-livecard:hover,.bt-postlink:hover,.bt-m:hover,a.bt-pod:hover{transform:none;border-color:rgba(204,34,41,.55);box-shadow:var(--r-glow)}
.bt-m{transition:border-color .18s,box-shadow .18s;animation-name:btSkinFade}
.bt-m.run:hover{box-shadow:0 0 0 3px rgba(204,34,41,.15),var(--r-glow)}
.bt-postlink{border-radius:14px;transition:border-color .18s,box-shadow .18s}
.bt-postlink .pi{border-radius:50%}
.bt-announce{border-radius:16px}
.bt-champ{border-radius:16px}
.bt-stat .v{color:#fff}

/* ---- ปุ่มโหวต: กรอบแก้ว ขอบแดงจาง · hover = ขอบแดง + แสง · โหวตแล้ว = แดงไล่เฉด ---- */
.bt-vote,.bt-vote-btn{border-radius:16px;border-color:var(--r-line);background:var(--r-glass);font-family:'Prompt',sans-serif;transition:border-color .18s,box-shadow .18s,background-color .18s}
.bt-vote:hover,.bt-vote-btn:hover{transform:none;border-color:var(--red);box-shadow:var(--r-glow)}
.bt-vote.voted,.bt-vote.on,.bt-vote-btn.voted,.bt-vote-btn.on{background:var(--r-grad);border-color:var(--rbr)}
.bt-vote[disabled],.bt-vote-btn[disabled]{transform:none;box-shadow:none}

/* ---- เวที / คลิป / บีท = กรอบแดงแบบ .r-media ---- */
.bt-vs-stage{border-color:rgba(204,34,41,.3);border-radius:20px;box-shadow:0 0 0 6px rgba(204,34,41,.05),0 30px 70px -26px rgba(204,34,41,.45)}
.bt-embed{border-radius:16px;border-color:rgba(204,34,41,.3);box-shadow:0 0 0 6px rgba(204,34,41,.05),0 30px 70px -26px rgba(204,34,41,.55)}
.bt-embed .play span,.bt-beat .play span{background:var(--r-grad)}

/* ---- ตาราง / ข้อมูล ---- */
.bt-tbl-w,.bt-scroll{border-radius:16px}
.bt-tbl tr:hover td{background:rgba(204,34,41,.05)}
.bt-bar>i{background:var(--c,var(--r-grad))}

/* ---- กล่องแจ้ง / ว่าง ---- */
.bt-callout,.bt-warn{border-radius:14px}
.bt-empty{border:1px dashed rgba(204,34,41,.25);background:var(--c1);padding:44px 22px}
.bt-lockbox{border-color:rgba(204,34,41,.25);border-radius:14px}

/* ---- ฟอร์ม = .r-input / .r-label ---- */
.bt-fld>span{color:#b9b6b0;font-weight:700;letter-spacing:.3px}
.bt-fld .opt{border-radius:999px}
.bt-in,.bt-area{border-radius:14px;background:rgba(255,255,255,.03);border-color:var(--r-soft-bd);font-family:'Prompt',sans-serif;transition:border-color .18s,background-color .18s}
.bt-in:focus,.bt-area:focus{border-color:var(--red);background:rgba(204,34,41,.04);box-shadow:none}
.bt-in option,.bt-filter select option{background:#151515}
.bt-filter input,.bt-filter select{border-radius:999px;padding:10px 16px;background:var(--r-soft);border-color:var(--r-soft-bd);font-family:'Prompt',sans-serif}
.bt-filter input:focus,.bt-filter select:focus{background:rgba(204,34,41,.06)}
.bt-formcard>h2{position:relative;color:#fff}
.bt-formcard>h2::after{content:"";position:absolute;left:0;bottom:-1px;width:44px;height:2px;background:var(--red)}
.bt-formcard>h2 i{border-radius:50%;background:rgba(204,34,41,.12);border:1px solid rgba(204,34,41,.32);color:var(--red)}
.bt-check{border-radius:14px;border-width:1px;transition:border-color .18s,background-color .18s}
.bt-drop{border-radius:16px;border-color:rgba(204,34,41,.25);transition:border-color .18s,background-color .18s}
.bt-drop:hover{background:rgba(204,34,41,.05)}
.bt-nums span{border-radius:10px;transition:border-color .18s,background-color .18s}
.bt-nums label:hover span{border-color:var(--red)}
.bt-nums input:checked+span{background:var(--r-grad);border-color:var(--rbr)}

/* ---- พอร์ทัล ---- */
.bt-next{border-radius:16px}
.bt-tl .it.cur .b{background:var(--r-grad)}
.bt-wl{border-radius:50%}

@media(prefers-reduced-motion:reduce){
  .bt-tc .bt-cov>img,.bt-tc:hover .bt-cov>img{transition:none;transform:none}
}