:root{
  --bg:#0d0d0f; --panel:#121214; --panel2:#16161a;
  --text:#e9e9ef; --muted:#a0a0aa;
  --brand:#ff2b4d;      /* แดงหลัก */
  --brand2:#b3122c;     /* แดงเข้ม */
  --accent:#ff6b82;     /* ไฮไลต์ชมพูแดง */
  --radius:16px; --shadow:0 12px 36px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.6 "Inter",system-ui,Segoe UI,Roboto,Arial,sans-serif; color:var(--text);
  background:
    radial-gradient(1000px 600px at 90% -20%, rgba(255,43,77,.08), transparent 60%),
    radial-gradient(800px 400px at -10% 10%, rgba(255,43,77,.05), transparent 55%),
    var(--bg);
}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:24px 16px 96px}

/* ===== Header ===== */
.header{position:sticky;top:0;z-index:10;background:linear-gradient(180deg,#0e0e10 0,#0c0c0e 65%,transparent)}
.header-row{display:flex;justify-content:center;padding:6px 16px 12px}
.cap{display:flex;align-items:center;gap:12px;background:#000;border:1px solid #1a1a1a;border-radius:999px;padding:8px 12px;box-shadow:0 0 30px rgba(0,0,0,.6)}
.logo{display:flex;align-items:center;gap:10px;background:#0f0f10;border:1px solid #1a1a1a;border-radius:999px;padding:8px 10px}
.logo img{height:28px;width:auto}
.badge{background:linear-gradient(180deg,var(--brand),var(--brand2));color:#fff;padding:4px 10px;border-radius:999px;font-weight:800;letter-spacing:.4px}
.spacer{flex:1}
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid #2a2a2a;background:#121214;color:var(--text);padding:10px 14px;border-radius:999px;font-weight:700;box-shadow:var(--shadow);transition:.18s}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid rgba(255,43,77,.5);outline-offset:2px}
.btn.primary{background:linear-gradient(180deg,var(--brand),var(--brand2));color:#fff;border-color:#4a0f14}
.btn.ghost{background:#0e0e10}

/* ===== Filters ===== */
.controls{display:grid;grid-template-columns:1fr;gap:10px;margin:8px auto 10px;max-width:980px}
@media(min-width:720px){
  .controls{grid-template-columns:1fr 180px 200px 220px 140px}
}
.input,.select{background:var(--panel2);border:1px solid #222;border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:10px}
.input input{all:unset;flex:1;color:var(--text)}
.footer-row{display:flex;justify-content:space-between;align-items:center;color:var(--muted)}
.section-title{margin:6px 0 12px;font-size:22px;font-weight:800}

/* ===== Select (dark theme) ===== */
.select{ position:relative; background:var(--panel2); border:1px solid #222; border-radius:12px;
  padding:12px 42px 12px 14px; display:flex; align-items:center; gap:10px }
.select svg{ flex:0 0 auto }
.select select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:transparent; border:0; outline:0; width:100%;
  color:var(--text); font:inherit; line-height:1.4; padding:0; color-scheme:dark; cursor:pointer;
}
.select::after{
  content:""; position:absolute; right:14px; top:50%;
  width:10px; height:10px; border-right:2px solid var(--brand); border-bottom:2px solid var(--brand);
  transform:translateY(-50%) rotate(45deg); pointer-events:none; opacity:.9;
}
.select:focus-within{ box-shadow:0 0 0 2px rgba(255,43,77,.15); border-color:#2a2a2a }
.select select option{ background:var(--panel2); color:var(--text) }

/* ===== Switcher (Hot Only) ===== */
.switcher{
  display:flex; align-items:center; gap:8px;
  background:var(--panel2); border:1px solid #222; border-radius:12px; padding:12px 14px;
}
.switcher input[type="checkbox"]{
  appearance:none; width:38px; height:22px; border-radius:999px; position:relative; cursor:pointer;
  background:#252525; border:1px solid #333; transition:.2s;
}
.switcher input[type="checkbox"]::after{
  content:""; position:absolute; top:50%; left:3px; transform:translateY(-50%);
  width:16px; height:16px; border-radius:50%; background:#999; transition:.2s;
}
.switcher input[type="checkbox"]:checked{
  background:linear-gradient(180deg,#ff6b82,#ff2b4d);
  border-color:#4a0f14;
}
.switcher input[type="checkbox"]:checked::after{ left:19px; background:#111 }
.switcher span{font-size:14px;color:#e8e8ea}

/* ===== Grid cards ===== */
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:linear-gradient(180deg,#111113,#0f0f10);border:1px solid #222;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);position:relative}
.card:hover{transform:translateY(-3px)}
.card:focus-within{outline:2px solid rgba(255,43,77,.25); outline-offset:2px}
.hero{position:relative;aspect-ratio:16/9;background:#090909;overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover;display:block}
.pill{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:6px 10px;font-size:12px}
.hot{
  position:absolute;right:10px;top:10px;
  background:linear-gradient(180deg,#ff445f,#ff7b92);
  color:#190308;border-radius:999px;padding:6px 10px;font-weight:900;
  box-shadow:0 0 20px rgba(255,68,95,.25);
}
/* Pin button (★) */
.pin-btn{
  position:absolute; right:10px; bottom:10px; z-index:2;
  border:1px solid #2a2a2a; background:#0f0f10; color:var(--brand);
  border-radius:999px; padding:6px 10px; cursor:pointer; font-weight:800;
  box-shadow:0 2px 10px rgba(0,0,0,.35); transition:.18s;
}
.pin-btn:hover{ transform:translateY(-1px); background:#151515; }
.pin-btn:focus-visible{ outline:2px solid rgba(255,43,77,.5); outline-offset:2px }

.body{padding:14px}
.row{display:flex;gap:12px;align-items:center}
.thumb{width:42px;height:42px;border-radius:10px;border:1px solid #2a2a2a;object-fit:cover}
.title{font-weight:800}
.sub{color:#a0a0aa;font-size:12px}
.stats{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;margin-top:12px;align-items:center}
.chip{
  background:#19060b;
  border:1px solid #4a0f14;
  color:#ffdfe6;
  padding:8px 10px;border-radius:12px;
}
.win{
  width:76px;height:76px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(100% 100% at 50% 0,#26060e,#0d0d0f);
  border:2px solid #4a0f14;
  box-shadow:0 0 35px rgba(255,43,77,.18),inset 0 0 18px rgba(255,43,77,.10);
}
.win .pct{color:#ffb6c6;font-size:18px;font-weight:800}
.win small{color:#ff7f93;font-size:10px;letter-spacing:.6px}
.until{margin-top:8px;font-size:12px;color:#ffc5d1}
.counting{font-variant-numeric:tabular-nums}

/* ===== Progress bar ===== */
.progress{height:6px;background:#222;border-radius:4px;overflow:hidden;margin-top:6px}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand2));width:100%;transition:width .5s linear}

/* ===== Floating & Modal ===== */
.float{position:fixed;right:16px;bottom:16px;z-index:20}
.fab{
  background:linear-gradient(180deg,var(--brand),var(--brand2));
  color:#fff;border:none;border-radius:999px;padding:12px 16px;font-weight:800;
  box-shadow:0 0 0 6px rgba(255,43,77,.12);
}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:18px;z-index:30}
.modal.open{display:flex}
.modal-card{width:min(100%,720px);background:linear-gradient(180deg,#111113,#0f0f0f);border:1px solid #26262a;border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.modal-head{padding:12px 14px;background:#0b0b0c;border-bottom:1px solid #1f1f23;display:flex;gap:10px;align-items:center}
.close{margin-left:auto;background:#16161a;border:1px solid #2a2a2e;color:#ddd;padding:8px 10px;border-radius:10px;cursor:pointer}
.modal-body{display:grid;grid-template-columns:1fr;gap:14px;padding:14px}
@media(min-width:760px){.modal-body{grid-template-columns:6fr 5fr}}
.meta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.meta .box{background:#0f0f10;border:1px solid #232328;border-radius:12px;padding:12px}

/* ===== Hourly Heatmap ===== */
.hm-wrap{
  margin-top:12px;
  background:#0f0f10;
  border:1px solid #232328;
  border-radius:12px;
  padding:12px;
}
.hm-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.hm-head strong{font-size:14px}
.heatmap{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:6px;
}
.heatmap .cell{
  height:24px;
  border-radius:6px;
  border:1px solid #222;
  background:#131315;
  position:relative;
}
.heatmap .cell::after{
  content:attr(data-h);
  position:absolute; inset:auto 6px 4px auto;
  font-size:10px; color:#aaa; opacity:.0; transition:.2s;
}
.heatmap .cell:hover::after{opacity:.9}
.hm-legend{
  display:flex;align-items:center;gap:8px;margin-top:8px;color:#bfbfc7;font-size:12px
}
.hm-scale{display:grid;grid-template-columns:repeat(5, 16px);gap:6px}
.hm-scale i{display:block;height:8px;border-radius:6px;border:1px solid #2a2a2a;background:#191919}

/* โทนแดงสำหรับ heatmap (เวอร์ชันแรก) */
.hm-c1{ background:#201016; border-color:#3a1a22;}
.hm-c2{ background:#3a1520; border-color:#5b1f30;}
.hm-c3{ background:#66162a; border-color:#8a2140;}
.hm-c4{ background:#a5213f; border-color:#c52b4c;}
.hm-c5{ background:#e8365a; border-color:#ff4b70;}

.hm-scale i:nth-child(1){background:#201016;border-color:#3a1a22}
.hm-scale i:nth-child(2){background:#3a1520;border-color:#5b1f30}
.hm-scale i:nth-child(3){background:#66162a;border-color:#8a2140}
.hm-scale i:nth-child(4){background:#a5213f;border-color:#c52b4c}
.hm-scale i:nth-child(5){background:#e8365a;border-color:#ff4b70}

/* ===== Card Animations ===== */
.card{transition:transform .25s ease, opacity .25s ease}
.fade-in{animation:fadeIn .4s ease forwards}
.fade-out{animation:fadeOut .35s ease forwards}
@keyframes fadeIn{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:translateY(0)} }
@keyframes fadeOut{ from{opacity:1; transform:translateY(0)} to{opacity:0; transform:translateY(-12px)} }

/* ===== Toast (ทั่วไป) ===== */
.toast-container{
  position:fixed; bottom:80px; right:20px; display:flex; flex-direction:column; gap:8px; z-index:9999;
}
.toast{
  background:linear-gradient(180deg,var(--brand),var(--brand2));
  color:#fff; padding:10px 16px; border-radius:12px; font-weight:700;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  opacity:0; transform:translateX(120%);
}
.toast.show{ animation:toastIn .4s ease forwards; }
.toast.hide{ animation:toastOut .6s ease forwards; }

@keyframes toastIn{ from{ transform:translateX(120%); opacity:0 } to{ transform:translateX(0); opacity:1 } }
@keyframes toastOut{ from{ opacity:1; transform:translateX(0) } to{ opacity:0; transform:translateX(120%) } }

/* ===== Avg Box (แทนกราฟเล็ก) ===== */
.avgrow{display:grid;grid-template-columns:120px 1fr 60px;gap:10px;align-items:center}
.avgrow .label{color:#cfcfd8;font-weight:700}
.avgrow .bar{height:10px;background:#1a1a1d;border:1px solid #26262b;border-radius:999px;overflow:hidden}
.avgrow .bar span{display:block;height:100%;background:linear-gradient(180deg,var(--brand),var(--brand2))}
.avgrow .bar span.hotbar{background:linear-gradient(180deg,#ff6b82,#ff3b5c)}
#avgMeta{opacity:.75}

/* ===== Stats (Top / Leaderboard) ===== */
.stats-box{display:grid;grid-template-columns:1fr;gap:20px;margin-top:32px}
@media(min-width:760px){ .stats-box{grid-template-columns:1fr 1fr} }
.stat-col{background:#0e0e10;border:1px solid #222;border-radius:16px;padding:14px;box-shadow:var(--shadow)}
.stat-col h2{margin:0 0 10px;font-size:18px;font-weight:800}
.stat-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.stat-list li{background:#111;border:1px solid #2a2a2a;border-radius:12px;padding:8px 12px;display:flex;justify-content:space-between;align-items:center;font-size:14px}

/* ===== Dashboard ===== */
.dashboard{margin-top:20px}
.accordion-btn{
  width:100%; text-align:left; background:#1a1a1a; border:1px solid #2a2a2a; padding:10px 14px;
  font-size:16px; font-weight:600; cursor:pointer; border-radius:10px; color:var(--accent);
  display:flex; align-items:center; justify-content:space-between;
}
.accordion-btn:hover{ background:#222 }
.accordion-btn::after{ content:"▸"; transition:transform .3s }
.accordion-btn.active::after{ transform:rotate(90deg) }
.accordion-content{ max-height:0; overflow:hidden; transition:max-height .35s ease, padding .25s ease }
.accordion-content.open{ padding:12px 0; max-height:1000px }
.summary-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:16px }
.summary-grid .card.small{ background:#111; border:1px solid #2a2a2a; padding:10px; border-radius:10px; text-align:center }
.summary-grid h4{ margin:0 0 6px; font-size:14px; color:#999 }
.summary-grid div{ font-size:18px; font-weight:700; color:var(--brand) }
.chart-wrap{ background:#111; border:1px solid #2a2a2a; padding:12px; border-radius:10px; margin-bottom:16px }
.chart-wrap h4{ margin:0 0 8px; font-size:15px; font-weight:600; color:#ccc }

/* ===== Minor helpers ===== */
.tip{
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid #2a2a2a;
  background: #0f0f10;
  border-radius: 10px;
  font-size: 13px;
  color: #f3f3f5;
  opacity: .95;
}

/* ===== Accessibility & Motion ===== */
:focus-visible{ outline:2px solid rgba(255,43,77,.4); outline-offset:2px }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important }
}

/* ===== Admin indicator ===== */
.admin-indicator {
  position: fixed;
  left: 16px;
  bottom: 86px;
  z-index: 9998;
  display: none;
}
.admin-indicator .pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg,#1a1a1a,#131313);
  border: 1px solid #2a2a2a;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  color: var(--brand);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .3px;
  cursor: pointer;
  user-select: none;
}
.admin-indicator .dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #28e07d;
  box-shadow: 0 0 0 3px rgba(40,224,125,.15);
}
.admin-indicator .txt { opacity: .95; }
.admin-indicator.show { display: block; animation: adminIn .35s ease forwards; }
@keyframes adminIn { from { opacity:0; transform: translateY(8px)} to{opacity:1; transform:none} }
.admin-indicator.off .dot { background:#ff5d5d; box-shadow:0 0 0 3px rgba(255,93,93,.15); }

/* (มีซ้ำ heatmap-wrap .cell จากข้างบนแล้ว เลยใช้โทนเทาเดิม) */
.heatmap-wrap .cell{height:20px;border-radius:6px;border:1px solid #2a2a2a;background:#151515}

/* ===== Compare box ===== */
.compare-box{
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 12px;
  align-items: start;
}
@media (max-width: 760px){
  .compare-box{ grid-template-columns: 1fr; }
}
#compareSelect{
  width: 100%;
  min-height: 180px;
  background: #111;
  border: 1px solid #2a2a2a;
  color: var(--text);
  border-radius: 10px;
  padding: 8px;
  font: inherit;
}
#compareSelect option{ padding: 6px 8px; }

/* ===== Heatmap (global & modal – โทนแดงอีกชุด) ===== */
.heatmap{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 6px;
}
.heatmap .cell{
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  border: 1px solid #242424;
  background: #141414;
}
.heatmap .hm-c1{ background:#211018; }
.heatmap .hm-c2{ background:#3c1423; }
.heatmap .hm-c3{ background:#681830; }
.heatmap .hm-c4{ background:#a0203f; }
.heatmap .hm-c5{ background:linear-gradient(180deg,#ff2b4d,#b3122c); border-color:#4a0f14; }

/* เลเจนด์เล็ก ๆ ใต้ heatmap (ในโมดัล) */
.hm-legend{ display:flex; align-items:center; gap:10px; margin-top:8px; }
.hm-legend .hm-scale{ display:flex; gap:6px; }
.hm-legend .hm-scale i{
  width:18px; height:18px; border-radius:4px; border:1px solid #242424; display:inline-block;
}
.hm-legend .hm-scale i:nth-child(1){ background:#211018; }
.hm-legend .hm-scale i:nth-child(2){ background:#3c1423; }
.hm-legend .hm-scale i:nth-child(3){ background:#681830; }
.hm-legend .hm-scale i:nth-child(4){ background:#a0203f; }
.hm-legend .hm-scale i:nth-child(5){ background:linear-gradient(180deg,#ff2b4d,#b3122c); border-color:#4a0f14; }

/* anomaly list เน้นตัวเลข */
#anomalyList li b{ color:var(--brand); font-weight:800; }

/* badges/amounts ในลิสต์ */
.stat-list .amt {
  font-weight: 800;
  color: var(--brand);
}
.stat-list .tag {
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 8px;border-radius:999px;font-size:12px;font-weight:700;
  border:1px solid #2a2a2a;background:#0f0f10;color:#e9e9ef;
}
.stat-list .tag.hot {
  border-color:#4a0f14;
  background:linear-gradient(180deg,#1b0a0f,#14090c);
  color:#ffdfe6;
}
.stat-list .gsub { color:#a0a0aa; font-size:12px }

/* ===== กระพริบเตือนก่อน “หาย/ถูกแทนที่” ===== */
@keyframes blinkWarn {
  0%, 100% { opacity: 1; }
  50%      { opacity: .2; }
}
.card.blink-warn {
  animation: blinkWarn .6s ease-in-out 3 both;
}

/* ===== Rolling list (slide up & recycle) ===== */
.rolling-list{ overflow: hidden; }
.rolling-list li{ will-change: transform, opacity; }

.slide-in-up  { animation: rollIn  .35s ease both; }
.slide-out-up { animation: rollOut .35s ease forwards; }

@keyframes rollIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rollOut {
  to { opacity: 0; transform: translateY(-12px); }
}

/* ===== กระพริบก่อน “ออก/ปิดตัวเอง” ===== */
@keyframes blinkExit {
  0%, 100% { opacity: 1; }
  20%, 60% { opacity: .15; }
  40%, 80% { opacity: 1; }
}
.blink-exit { animation: blinkExit .9s ease forwards; }

/* ===== Toast: next to BONUSTIME on desktop, mobile-friendly ===== */
.float { position: fixed; right: 16px; bottom: 16px; z-index: 20; }
.float .toast-container{
  position: absolute;
  right: 0;
  bottom: 56px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2000;
  max-width: min(90vw, 420px);
  pointer-events: none;
}
.float .toast{
  pointer-events: auto;
  background: linear-gradient(180deg, var(--brand), var(--brand2));
  color: #fff;
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  opacity: 0;
  transform: translateX(120%);
}
.float .toast.show { animation: toastIn .4s ease forwards; }
.float .toast.hide { animation: toastOut .6s ease forwards; }

/* จอเล็ก → Toast ไปบนสุด ใต้ header ไม่บังคอนเทนต์ */
@media (max-width: 640px){
  .float .toast-container{
    position: fixed;
    top: 64px;
    left: 12px;
    right: 12px;
    bottom: auto;
    align-items: stretch;
    max-width: none;
  }
  .float .toast{
    width: 100%;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
    transform: translateY(-12px);
  }
}

/* section-head / updatedAt */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.section-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
}
.updatedAt {
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
}
#updatedAt.flash {
  animation: blink 1.2s ease;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ปุ่มควบคุม (ให้หน้าตาเหมือนกล่อง filter ด้านซ้าย) */
.control-btn{
  width:100%;
  background:var(--panel2);
  border:1px solid #222;
  border-radius:12px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--text);
  font:inherit;
  font-weight:700;
  text-align:left;
  cursor:pointer;
  box-shadow:var(--shadow);
}

.control-btn:hover{
  transform:translateY(-1px);
  transition:.18s;
}

.control-btn:focus-visible{
  outline:2px solid rgba(255,43,77,.5);
  outline-offset:2px;
}

.control-btn .ico{ width:20px; text-align:center; }
.control-btn[aria-pressed="false"] .ico{ opacity:.85 }

/* ปุ่มรีเฟรช: ให้เด่นด้วยแดง */
.refresh-btn{
  background:linear-gradient(180deg,var(--brand),var(--brand2));
  color:#fff;
  font-weight:800;
  justify-content:center;
  text-align:center;
}
.refresh-btn:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
}
.refresh-btn:focus-visible{
  outline:2px solid rgba(255,43,77,.5);
  outline-offset:2px;
}