:root{
  --primary:#6C63FF;--bg:#0f1221;--card:#171a2a;--text:#e9ecff;--muted:#9aa1c7;
}
*{box-sizing:border-box}
html {
  background-color: #0f1221; /* สีพื้นหลังหลัก */
}
body{
  margin:0;
  background:linear-gradient(180deg,#0f1221,#0b0e1a);
  font-family:"Noto Sans Thai",system-ui;
  color:var(--text)
}
.wrap{max-width:560px;margin:0 auto;padding:16px}
.head{
  display:flex;align-items:center;gap:10px;margin-bottom:8px
}
.backbtn{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 12px;border-radius:12px;
  background:#1a1e34;border:1px solid #2a3050;
  color:#c9cff6;text-decoration:none;font-weight:600;
}
.backbtn:active{transform:translateY(1px)}
.title{font-weight:700;font-size:18px}
.notice{background:#15182a;border-radius:12px;padding:10px 12px;font-size:14px;color:#9aa1c7;margin-bottom:12px}
.box{background:var(--card);border:1px solid #222642;border-radius:16px;padding:14px;margin-bottom:10px}
.row{display:flex;justify-content:space-between;margin:6px 0}
.sts{font-weight:700}
.pages{display:flex;justify-content:center;gap:8px;margin-top:10px}
.pages button{background:#1a1e34;border:1px solid #2a3050;color:#c9cff6;border-radius:8px;padding:6px 10px;cursor:pointer}
.pages button.active{background:var(--primary);color:#fff}
.pages button:disabled{opacity:.5;cursor:not-allowed}

/* ✅ Popup styling */
.popup {
  position: fixed;inset:0;background:rgba(0,0,0,0.6);
  display:none;align-items:center;justify-content:center;
  z-index:9999;animation:fadeIn .25s ease forwards;
}
.popup.show{display:flex}
.popup-box{
  background:#171a2a;border:1px solid #2a3050;border-radius:16px;
  max-width:320px;width:90%;text-align:center;
  padding:20px 18px 16px;color:#e9ecff;
  transform:scale(.8);animation:popIn .25s ease forwards;
  box-shadow:0 8px 25px rgba(0,0,0,0.4);
}
.popup-box h3{margin:0 0 8px;font-size:18px;font-weight:700}
.popup-box p{margin:0 0 16px;font-size:15px;line-height:1.4}
.popup-box button{
  background:var(--primary);color:#fff;border:none;border-radius:12px;
  padding:10px 16px;font-weight:600;font-size:15px;cursor:pointer;
  transition:background .2s ease;
}
.popup-box button:hover{background:#7a74ff}
@keyframes popIn{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* 🔁 ปุ่มรีโหลด */
.reload-btn{
  background:#1a1e34;
  border:1px solid #2a3050;
  color:#c9cff6;
  border-radius:12px;
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .2s;
}
.reload-btn:hover{background:#20253f}
.reload-btn .icon{font-size:18px;display:inline-block;transition:transform .3s ease;}
.spin{animation:spin 1s linear infinite;}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.success-icon{
  color:#2ecc71;
  transform:scale(1.1);
  transition:transform .3s ease;
}


/* ===============================
   🌐 Custom Language Dropdown
   =============================== */
.lang-dropdown {
  position: relative;
  display: inline-block;
}

.lang-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(145deg,#15182a,#0f1221);
  border: 1.5px solid #6c63ff;
  border-radius: 999px;
  padding: 6px 14px;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all .25s ease;
  box-shadow: 0 0 8px rgba(108,99,255,.25);
}
.lang-btn:hover {
  border-color: #8a7cff;
  box-shadow: 0 0 12px rgba(138,124,255,.4);
}
.lang-btn .flag-icon {
  width: 22px;
  height: 16px;
  border-radius: 4px;
  object-fit: cover;
}
.lang-btn .arrow {
  margin-left: 6px;
  font-size: 12px;
  opacity: 0.7;
}

.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #171a2a;
  border: 1px solid #2a3050;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,.5);
  display: none;
  z-index: 999;
}
.lang-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  color: #e9ecff;
  transition: all .2s ease;
}
.lang-item:hover {
  background: rgba(108,99,255,0.15);
}
.lang-item .flag-icon {
  width: 22px;
  height: 16px;
  border-radius: 4px;
  object-fit: cover;
}