:root {
  --bg: #0d0d0f;
  --bg-secondary: #131318;
  --bg-card: #15151c;
  --bg-card-hover: #1c1c24;
  --bg-glass: rgba(255, 255, 255, 0.035);
  --bg-glass-hover: rgba(255, 255, 255, 0.07);
  --line: rgba(255, 255, 255, 0.08);
  --line-hover: rgba(255, 255, 255, 0.18);
  --line-active: #00f076;
  --ink: #f8fafc;
  --text: #f8fafc;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
  --white: #ffffff;
  --green: #00f076;
  --green-dark: #00c761;
  --green-soft: rgba(0, 240, 118, 0.12);
  --neon-green: #00f076;
  --neon-green-glow: 0 0 16px rgba(0, 240, 118, 0.4);
  --crimson: #ff2d4d;
  --crimson-glow: 0 0 16px rgba(255, 45, 77, 0.45);
  --crimson-soft: rgba(255, 45, 77, 0.12);
  --orange: #ff5e36;
  --mono: "IBM Plex Mono", monospace;
  --body: "Noto Sans Thai", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  color-scheme: dark;
  /* Slim dark scrollbar for the entire app */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}
/* WebKit slim scrollbar (Chrome, Safari, Edge) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 240, 118, 0.3);
}
/* Prevent elastic overscroll on iOS/macOS */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 14px;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}
.site-main {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 1 0 auto;
}
.container {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  box-sizing: border-box;
}
.section {
  padding: 22px 0 36px;
}
.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  color: #00f076;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

/* Topbar */
.topbar {
  background: #09090c;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  font-size: 11px;
}
.topbar-inner {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbar a { text-decoration: none; color: #cbd5e1; transition: color 0.2s; }
.topbar a:hover { color: var(--green); }
.topbar-left { display: flex; align-items: center; gap: 8px; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.topbar-divider { color: rgba(255, 255, 255, 0.15); }
.topbar-admin-link {
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 8px;
  border-radius: 4px;
  color: #cbd5e1 !important;
  font-weight: 600;
}
.topbar-admin-link:hover { background: rgba(0, 240, 118, 0.15); color: var(--green) !important; }
.topbar-balance { display: flex; align-items: center; gap: 6px; }
.topbar-balance b { color: var(--green); margin-left: 2px; }
.topbar-add-btn {
  background: linear-gradient(135deg, #00f076, #00c761);
  color: #000000 !important;
  font-weight: 800;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 6px;
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  box-shadow: 0 0 10px rgba(0, 240, 118, 0.4);
  transition: all 0.2s ease;
  text-decoration: none;
}
.topbar-add-btn:hover {
  background: #00ff7f;
  box-shadow: 0 0 16px rgba(0, 240, 118, 0.7);
  transform: translateY(-1px);
}
.topbar-login-link {
  color: var(--green) !important;
  font-weight: 700;
}

/* Site Header (Frosted Glass like AimUp) */
.site-header {
  background: rgba(13, 13, 17, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: border-color 0.2s ease;
}
.nav-main {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo: D4 PLAY */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.logo-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 16px rgba(0, 240, 118, 0.35), 0 0 8px rgba(255, 45, 77, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: #121216;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.logo-text { display: flex; flex-direction: column; }
.logo-brand {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1;
}
.logo-d4 {
  color: #00f076;
  text-shadow: 0 0 14px rgba(0, 240, 118, 0.5);
}
.logo-topup,
.logo-play {
  color: #ff2d4d;
  text-shadow: 0 0 14px rgba(255, 45, 77, 0.5);
}
.logo-tagline {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #94a3b8;
  margin-top: 3px;
}

/* Main Navigation */
.main-menu {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 4px;
}
.main-menu a {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 100%;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  color: #cbd5e1;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}
.main-menu a:hover {
  color: #ffffff;
}
.main-menu a.active {
  color: var(--green);
  border-color: var(--green);
}

/* Nav Dropdown */
.nav-dropdown-item { position: relative; height: 100%; display: flex; align-items: center; }
.nav-link-dropdown { display: flex; align-items: center; gap: 6px; padding: 0 16px; height: 100%; font-weight: 600; font-size: 13px; color: #cbd5e1; text-decoration: none; border-bottom: 2px solid transparent; cursor: pointer; transition: 0.2s; }
.nav-dropdown-item:hover .nav-link-dropdown, .nav-link-dropdown.active { color: #ffffff; }
.nav-badge-sale { background: var(--crimson); color: #fff; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 999px; box-shadow: 0 0 10px rgba(255, 45, 77, 0.5); }
.nav-arrow { font-size: 10px; opacity: 0.7; }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 280px;
  background: #14141a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 240, 118, 0.1);
  padding: 8px;
  display: none;
  z-index: 50;
  backdrop-filter: blur(24px);
}
.nav-dropdown-item.open .nav-dropdown-menu,
.nav-dropdown-item:hover .nav-dropdown-menu {
  display: block;
  animation: fadeInDown 0.18s ease-out;
}
.dropdown-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: #f8fafc;
  transition: all 0.18s ease;
}
.dropdown-row:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateX(3px);
}
.dropdown-icon-col {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  display: grid;
  place-items: center;
  font-size: 16px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.icon-uid { border-color: rgba(0, 240, 118, 0.3); background: rgba(0, 240, 118, 0.1); }
.icon-mail { border-color: rgba(255, 45, 77, 0.3); background: rgba(255, 45, 77, 0.1); }
.dropdown-text-col strong { display: block; font-size: 13px; font-weight: 700; color: #fff; }
.dropdown-text-col small { display: block; font-size: 11px; color: #94a3b8; margin-top: 1px; }
.dropdown-title-badge { display: flex; align-items: center; gap: 6px; }
.pill-sale { background: var(--crimson); color: #fff; font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: 4px; }
.dropdown-divider { height: 1px; background: rgba(255, 255, 255, 0.06); margin: 6px 4px; }

/* Account & Login Button in Navbar */
.header-actions { display: flex; align-items: center; gap: 12px; }
.user-header-group { display: flex; align-items: center; gap: 10px; }
.header-wallet-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 240, 118, 0.08);
  border: 1px solid rgba(0, 240, 118, 0.25);
  padding: 6px 12px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.2s;
}
.header-wallet-badge:hover {
  background: rgba(0, 240, 118, 0.16);
  border-color: var(--green);
  box-shadow: 0 0 12px rgba(0, 240, 118, 0.3);
}
.hw-label { font-size: 10px; color: #94a3b8; }
.hw-val { font-size: 13px; font-weight: 800; color: var(--green); font-family: var(--mono); }
.hw-plus { width: 18px; height: 18px; border-radius: 50%; background: var(--green); color: #000; display: grid; place-items: center; font-size: 12px; font-weight: 900; }
.account-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  padding: 6px 12px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 12px;
  transition: all 0.2s;
}
.account-link:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}
.account-dot {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #00f076, #ff2d4d);
  color: #000;
  display: grid;
  place-items: center;
  font: 800 10px var(--mono);
}
.account-name { display: block; font-size: 12px; font-weight: 700; color: #fff; }
.account-tier { display: block; font-size: 9px; color: #94a3b8; }
.login-btn {
  background: linear-gradient(135deg, #00f076, #00c761);
  color: #000 !important;
  font-weight: 800;
  box-shadow: 0 0 18px rgba(0, 240, 118, 0.35);
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 13px;
  transition: all 0.2s;
}
.login-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 24px rgba(0, 240, 118, 0.55);
}

/* ==============================================================
   HOME HERO SECTION & D4 PLAY BANNER
   ============================================================== */
.home-hero.d4-hero {
  background: radial-gradient(circle at 50% 0%, rgba(0, 240, 118, 0.07) 0%, transparent 70%),
              radial-gradient(circle at 100% 50%, rgba(255, 45, 77, 0.06) 0%, transparent 60%),
              #0d0d0f;
  border-bottom: 1px solid var(--line);
  padding: 56px 0 64px;
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
}
.eyebrow-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 6px 14px;
  border-radius: 999px;
  font: 700 11px var(--mono);
  color: #00f076;
  letter-spacing: 0.5px;
  margin-bottom: 18px;
}
.eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00f076;
  box-shadow: 0 0 8px #00f076;
  animation: pulseDot 1.6s infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}
.hero-heading {
  font-size: 46px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -1.2px;
  margin: 0 0 16px;
  color: #ffffff;
}
.gradient-text {
  background: linear-gradient(135deg, #00f076 0%, #00e0ff 50%, #ff2d4d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-desc {
  color: #94a3b8;
  font-size: 15px;
  line-height: 1.7;
  max-width: 520px;
  margin: 0 0 24px;
}
.hero-actions { display: flex; gap: 14px; margin-bottom: 24px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 12px 20px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}
.neon-btn,
.btn.primary,
.btn-primary {
  background: linear-gradient(135deg, #00f076, #00c761);
  color: #000;
  font-weight: 800;
  box-shadow: 0 0 20px rgba(0, 240, 118, 0.4);
  border: none;
}
.neon-btn:hover,
.btn.primary:hover,
.btn-primary:hover {
  box-shadow: 0 0 30px rgba(0, 240, 118, 0.65);
  transform: translateY(-2px);
}
.ghost-neon,
.btn.ghost,
.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f8fafc;
}
.ghost-neon:hover,
.btn.ghost:hover,
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--green);
  color: var(--green);
}
.btn.full {
  width: 100%;
}

/* FAQ Accordion */
.faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}
.faq details {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px 20px;
  transition: all 0.2s ease;
}
.faq details[open] {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(0, 240, 118, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.faq summary {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "＋";
  font-size: 18px;
  color: var(--green);
  font-weight: 800;
  transition: transform 0.2s ease;
}
.faq details[open] summary::after {
  content: "－";
  color: var(--crimson);
}
.faq details p {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: #cbd5e1;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.mini-trust {
  display: flex;
  gap: 16px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 500;
}
.mini-trust span { display: flex; align-items: center; gap: 4px; }

/* Hero Banner Graphic Card */
.hero-visual-card {
  position: relative;
}
.hero-banner-wrap {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7),
              0 0 30px rgba(0, 240, 118, 0.2),
              0 0 30px rgba(255, 45, 77, 0.15);
  aspect-ratio: 16/9;
  background: #111116;
}
.hero-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(13, 13, 15, 0.8) 100%);
  pointer-events: none;
}
.hero-banner-badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(13, 13, 15, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 240, 118, 0.3);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
}
.pulse-circle {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00f076;
  box-shadow: 0 0 10px #00f076;
}

/* ==============================================================
   4-CATEGORY LAUNCHPAD (OverTopup Style)
   ============================================================== */
.launchpad-section {
  padding: 32px 0 16px;
  background: #0d0d0f;
}
.launchpad-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.launchpad-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #14141b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px 16px;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}
.card-uid { background: linear-gradient(135deg, rgba(0, 240, 118, 0.06) 0%, #14141b 100%); }
.card-link { background: linear-gradient(135deg, rgba(37, 99, 235, 0.06) 0%, #14141b 100%); }
.card-mail { background: linear-gradient(135deg, rgba(255, 45, 77, 0.06) 0%, #14141b 100%); }
.card-card { background: linear-gradient(135deg, rgba(168, 85, 247, 0.06) 0%, #14141b 100%); }
.card-wallet { background: linear-gradient(135deg, rgba(0, 240, 118, 0.06) 0%, #14141b 100%); }

.launchpad-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55);
}
.card-uid:hover { border-color: rgba(0, 240, 118, 0.5); box-shadow: 0 14px 34px rgba(0, 240, 118, 0.2); }
.card-link:hover { border-color: rgba(37, 99, 235, 0.5); box-shadow: 0 14px 34px rgba(37, 99, 235, 0.2); }
.card-mail:hover { border-color: rgba(255, 45, 77, 0.5); box-shadow: 0 14px 34px rgba(255, 45, 77, 0.2); }
.card-card:hover { border-color: rgba(168, 85, 247, 0.5); box-shadow: 0 14px 34px rgba(168, 85, 247, 0.2); }
.card-wallet:hover { border-color: rgba(0, 240, 118, 0.5); box-shadow: 0 14px 34px rgba(0, 240, 118, 0.2); }

.launchpad-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.launchpad-card:hover .launchpad-icon {
  transform: scale(1.08);
}
.card-uid .launchpad-icon { background: rgba(0, 240, 118, 0.15); color: #00f076; border-color: rgba(0, 240, 118, 0.35); box-shadow: 0 0 12px rgba(0, 240, 118, 0.2); }
.card-link .launchpad-icon { background: rgba(37, 99, 235, 0.15); color: #60a5fa; border-color: rgba(37, 99, 235, 0.35); box-shadow: 0 0 12px rgba(37, 99, 235, 0.2); }
.card-mail .launchpad-icon { background: rgba(255, 45, 77, 0.15); color: #ff2d4d; border-color: rgba(255, 45, 77, 0.35); box-shadow: 0 0 12px rgba(255, 45, 77, 0.2); }
.card-card .launchpad-icon { background: rgba(168, 85, 247, 0.15); color: #c084fc; border-color: rgba(168, 85, 247, 0.35); box-shadow: 0 0 12px rgba(168, 85, 247, 0.2); }
.card-wallet .launchpad-icon { background: rgba(0, 240, 118, 0.15); color: #00f076; border-color: rgba(0, 240, 118, 0.35); box-shadow: 0 0 12px rgba(0, 240, 118, 0.2); }

.launchpad-content { flex: 1; min-width: 0; }
.launchpad-content strong { display: block; font-size: 13.5px; font-weight: 800; color: #ffffff; white-space: nowrap; }
.launchpad-content small { display: block; font-size: 11px; color: #94a3b8; margin-top: 2px; white-space: nowrap; }
.launchpad-tag {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}
.tag-sale { background: rgba(255, 45, 77, 0.2); color: #ff2d4d; border: 1px solid rgba(255, 45, 77, 0.35); }
.tag-purple { background: rgba(168, 85, 247, 0.2); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.35); }
.tag-green { background: rgba(0, 240, 118, 0.15); color: #00f076; border: 1px solid rgba(0, 240, 118, 0.35); }

/* Launchpad responsive handled in comprehensive responsive section below */

/* ==============================================================
   QUANTITY SELECTOR COMPONENT (OverTopup Card Style)
   ============================================================== */
.quantity-selector-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 18px;
  width: fit-content;
  flex-wrap: wrap;
}
.qty-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #1c1c24;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}
.qty-btn:hover:not(:disabled) {
  background: #00f076;
  color: #000;
  border-color: #00f076;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 240, 118, 0.3);
}
.qty-btn:active:not(:disabled) {
  transform: translateY(0);
}
.qty-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.qty-input {
  width: 64px;
  height: 40px;
  background: #0d0d12;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  text-align: center;
  outline: none;
  font-family: 'IBM Plex Mono', monospace;
}
.qty-input:focus {
  border-color: #00f076;
  box-shadow: 0 0 0 2px rgba(0, 240, 118, 0.2);
}
.qty-summary-label {
  font-size: 14px;
  color: #94a3b8;
  margin-left: 8px;
}
.qty-summary-label b {
  color: #00f076;
  font-size: 16px;
  font-weight: 800;
}

/* ==============================================================
   AIMUP STYLE SECTION HEADER
   ============================================================== */
.aim-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.aim-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.4px;
  margin: 0 0 6px;
  color: #ffffff;
}
.aim-title-bar {
  width: 6px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff2d4d, #00f076);
  display: inline-block;
  box-shadow: 0 0 10px rgba(0, 240, 118, 0.4);
}
.aim-subtitle {
  color: #94a3b8;
  font-size: 13px;
  margin: 0;
}
.aim-view-all {
  color: var(--green);
  font-weight: 700;
  font-size: 13px;
  transition: color 0.2s;
}
.aim-view-all:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* ==============================================================
   PRODUCT & GAME CARDS (AimUp Squircle Style)
   ============================================================== */
.game-list, .all-games, .game-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.all-games { grid-template-columns: repeat(6, 1fr); }

.home-game-showcase {
  overflow: hidden;
}
.game-marquee-viewport {
  position: relative;
  overflow: hidden;
  padding: 4px 6px 12px;
  margin: 0 -6px;
}
.game-marquee-viewport::before,
.game-marquee-viewport::after {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 44px;
  pointer-events: none;
  content: '';
}
.game-marquee-viewport::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg) 5%, transparent);
}
.game-marquee-viewport::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg) 5%, transparent);
}
.game-marquee-track {
  display: flex;
  width: max-content;
  animation: d4-game-marquee 42s linear infinite;
  will-change: transform;
}
.game-marquee-reverse .game-marquee-track {
  animation-name: d4-game-marquee-reverse;
  animation-duration: 46s;
}
.game-marquee-set {
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
  gap: 16px;
  padding-right: 16px;
}
.game-marquee .game-item {
  flex: 0 0 188px;
  width: 188px;
}
.game-marquee-viewport:hover .game-marquee-track,
.game-marquee-viewport:focus-within .game-marquee-track {
  animation-play-state: paused;
}
@keyframes d4-game-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
@keyframes d4-game-marquee-reverse {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

.game-item {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.game-item:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.065);
  border-color: rgba(0, 240, 118, 0.45);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 240, 118, 0.18);
}
.game-cover {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #181822;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.game-real-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  transition: transform 0.35s ease;
}
.game-item:hover .game-real-img {
  transform: scale(1.08);
}
.game-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, transparent 35%, transparent 70%, rgba(13, 13, 15, 0.45) 100%);
  pointer-events: none;
  z-index: 1;
}
.game-short-logo {
  font: 800 42px var(--mono);
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: -1px;
  text-shadow: 0 0 20px rgba(0, 240, 118, 0.3);
  transition: transform 0.3s ease;
}
.game-item:hover .game-short-logo {
  transform: scale(1.08);
}
.game-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}
.game-tag-badge {
  background: rgba(13, 13, 15, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f8fafc;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  white-space: nowrap !important;
  word-break: keep-all !important;
  flex-shrink: 0;
  line-height: 1.2;
}

/* Specific Tag Colors */
.game-tag-badge.tag-popular {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.9) 0%, rgba(185, 28, 28, 0.95) 100%);
  border-color: rgba(248, 113, 113, 0.6);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.4);
}
.game-tag-badge.tag-trending {
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.9) 0%, rgba(194, 65, 12, 0.95) 100%);
  border-color: rgba(251, 146, 60, 0.6);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(249, 115, 22, 0.4);
}
.game-tag-badge.tag-recommended {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.9) 0%, rgba(180, 83, 9, 0.95) 100%);
  border-color: rgba(250, 204, 21, 0.6);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(234, 179, 8, 0.4);
}
.game-tag-badge.tag-new {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.9) 0%, rgba(14, 116, 144, 0.95) 100%);
  border-color: rgba(34, 211, 238, 0.6);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(6, 182, 212, 0.4);
}
.game-tag-badge.tag-promo {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.9) 0%, rgba(126, 34, 206, 0.95) 100%);
  border-color: rgba(192, 132, 252, 0.6);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(168, 85, 247, 0.4);
}
.game-tag-badge.tag-card {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.9) 0%, rgba(29, 78, 216, 0.95) 100%);
  border-color: rgba(96, 165, 250, 0.6);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.4);
}
.game-tag-badge.tag-custom {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.9) 0%, rgba(5, 150, 105, 0.95) 100%);
  border-color: rgba(52, 211, 153, 0.6);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.4);
}
.game-category-chip {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #f1f5f9;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.2px;
}
.game-cover-bottom {
  position: absolute;
  bottom: 8px;
  left: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
}
.game-auto-badge {
  display: inline-block;
  background: rgba(0, 240, 118, 0.2);
  border: 1px solid rgba(0, 240, 118, 0.4);
  color: #00f076;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  backdrop-filter: blur(8px);
}
.game-brand-watermark {
  position: absolute;
  bottom: 6px;
  right: 8px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: #09090d;
  border: 1.5px solid rgba(0, 240, 118, 0.75);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.85), 0 0 12px rgba(0, 240, 118, 0.4);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.game-item:hover .game-brand-watermark {
  transform: scale(1.08);
  border-color: #00f076;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.95), 0 0 18px rgba(0, 240, 118, 0.65);
}
.watermark-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.game-meta {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.game-meta h3 {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 4px;
  line-height: 1.3;
}
.game-field-desc {
  font-size: 11px;
  color: #94a3b8;
  margin: 0 0 12px;
  line-height: 1.4;
  flex: 1;
}
.game-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 10px;
}
.price-label { font-size: 11px; color: #94a3b8; }
.price-val { font-size: 16px; font-weight: 800; color: #00f076; font-family: var(--mono); }

/* Reviews, Trust Stats, Category Chips */
.trust-stats-bar {
  background: #111116;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 32px 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}
.stat-card strong {
  display: block;
  font-size: 26px;
  font-weight: 900;
  color: #ffffff;
  font-family: var(--mono);
  letter-spacing: -0.5px;
}
.stat-card span {
  display: block;
  font-size: 12px;
  color: #94a3b8;
  margin-top: 4px;
}
.reviews-section {
  background: #111116;
  border-top: 1px solid var(--line);
  padding: 60px 0;
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 30px;
}
.review-card {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 22px;
}
.review-stars { color: #f59e0b; font-size: 14px; margin-bottom: 10px; }
.review-card p { color: #cbd5e1; font-size: 13px; line-height: 1.6; margin: 0 0 16px; font-style: italic; }
.review-author { display: flex; align-items: center; gap: 10px; }
.author-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00f076, #00c761);
  color: #000;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
}
.review-author b { display: block; font-size: 12px; color: #fff; }
.review-author small { display: block; font-size: 10px; color: #94a3b8; }

/* Page Head & Catalog Tools */
.page-head {
  background: #111116;
  border-bottom: 1px solid var(--line);
  padding: 38px 0;
}
.page-head h1 { font-size: 31px; margin: 0 0 7px; color: #fff; }
.breadcrumbs { display: flex; gap: 8px; align-items: center; font-size: 11px; color: #94a3b8; margin-bottom: 14px; }
.breadcrumbs b { color: var(--green); }
.catalog-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.catalog-tools-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.search-box-wrap {
  flex: 1;
  max-width: 420px;
}
.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #16161c;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  transition: all 0.2s;
}
.search-box:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 16px rgba(0, 240, 118, 0.2);
}
.search-box input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
}
.search-box input::placeholder { color: #64748b; }
.sort-dropdown-wrap label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #94a3b8;
}
.sort-dropdown-wrap select {
  background: #16161c;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #fff;
  padding: 8px 12px;
  font-size: 13px;
  outline: none;
  cursor: pointer;
}
.search-result-count {
  font-size: 12.5px;
  color: #94a3b8;
  white-space: nowrap;
}

/* Category Chips */
.category-tabs-home { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.category-tabs-home button, .category-chips .chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  border-radius: 10px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.category-tabs-home button:hover, .category-chips .chip:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}
.category-tabs-home button.active, .category-chips .chip.active {
  background: rgba(0, 240, 118, 0.12);
  border-color: var(--green);
  color: var(--green);
  box-shadow: 0 0 12px rgba(0, 240, 118, 0.25);
}

/* Detail Page, Game Page & Cards */
.detail-wrap { padding: 34px 0 70px; }
.game-heading {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #15151c;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 24px;
}
.detail-icon {
  width: 82px;
  height: 82px;
  border-radius: 14px;
  background: #1c1c24;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: grid;
  place-items: center;
  font: 800 24px var(--mono);
  color: #fff;
  text-shadow: 0 0 16px rgba(0, 240, 118, 0.4);
}
.game-heading h1 { font-size: 26px; margin: 2px 0 6px; color: #fff; }
.game-heading p { margin: 0; color: #94a3b8; font-size: 13px; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; margin-top: 6px; }
.help-layout { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; }
.wallet-layout { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; }
.account-layout { display: grid; grid-template-columns: 360px 1fr; gap: 28px; align-items: start; }
.wallet-sidebar { display: flex; flex-direction: column; gap: 20px; }
.wallet-checkout-card h3 { font-size: 16px; margin: 0 0 16px; color: #fff; font-weight: 800; }
.sticky-sidebar {
  position: sticky;
  top: 88px;
  z-index: 10;
}

.service-card, .order-card, .profile-card, .account-main, .contact-card {
  background: #14141c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 26px 28px;
  color: #f8fafc;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}
.service-card + .service-card { margin-top: 24px; }
.wallet-form-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.card-title { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.card-title > span {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  background: var(--green);
  color: #000;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 900 12px var(--body);
  box-shadow: 0 0 10px rgba(0, 240, 118, 0.4);
}
.card-title h2 { font-size: 17px; margin: 1px 0 2px; color: #fff; letter-spacing: -0.2px; }
.card-title p { color: #94a3b8; font-size: 12px; margin: 0; }

/* Package Options Grid (Modern 2-Column Wide Layout) */
.package-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}
@media (max-width: 640px) {
  .package-options {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
.choice-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.choice-row input { display: none; }
.choice-row span {
  display: block;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.03);
  color: #cbd5e1;
  transition: all 0.2s;
}
.choice-row span:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}
.choice-row input:checked + span {
  border-color: var(--green);
  background: rgba(0, 240, 118, 0.08);
  box-shadow: 0 0 16px rgba(0, 240, 118, 0.2), inset 0 0 0 1px var(--green);
  color: #fff;
}
.field { display: block; color: #94a3b8; font-size: 11px; font-weight: 600; margin-top: 16px; }
.field input {
  display: block;
  width: 100%;
  background: #1b1b22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 8px;
  outline: 0;
  font-family: inherit;
  font-size: 13px;
  transition: all 0.2s;
}
.field input:focus {
  border-color: var(--green);
  box-shadow: 0 0 16px rgba(0, 240, 118, 0.25);
}

/* Modals in Dark Theme */
.modal-backdrop {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
}
.modal-card {
  background: #14141a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 240, 118, 0.1);
  border-radius: 18px;
}
.modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 20px 24px 16px;
}
.modal-header h3 { color: #fff; }
.modal-close {
  color: #94a3b8;
  background: transparent;
  border: 0;
}
.modal-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.modal-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px 24px 22px;
}

/* Site Footer (4-Column Layout) */
.site-footer {
  background: #08080b;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  margin-top: 60px;
  padding: 56px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.1fr 1.2fr;
  gap: 40px;
  padding-bottom: 48px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-brand p {
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.7;
  margin: 0;
  max-width: 360px;
}

.payment-trust-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.pt-badge {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
}

.footer-col h3 {
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.2px;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-col h3::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 14px;
  background: var(--green);
  border-radius: 2px;
}

.footer-col a,
.footer-col button {
  color: #94a3b8;
  transition: all 0.2s ease;
  font-size: 13px;
  margin: 8px 0;
  display: block;
  text-decoration: none;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.footer-col a:hover,
.footer-col button:hover {
  color: var(--green);
  transform: translateX(4px);
}

.footer-contact-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-contact-link {
  display: flex !important;
  align-items: center;
  gap: 8px;
  background: rgba(0, 240, 118, 0.1) !important;
  border: 1px solid rgba(0, 240, 118, 0.3) !important;
  color: var(--green) !important;
  font-weight: 700 !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  text-align: center;
  justify-content: center;
  margin: 0 !important;
}

.footer-contact-link:hover {
  background: rgba(0, 240, 118, 0.2) !important;
  transform: translateY(-2px) !important;
}

.footer-hours-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #94a3b8;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 22px 0;
  color: #64748b;
  font: 500 11px var(--mono);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-secure-tag { color: var(--green); }

/* Desktop responsive breakpoints (mobile handled in comprehensive responsive section below) */
@media(max-width: 1200px) {
  .game-list, .all-games, .game-grid { grid-template-columns: repeat(4, 1fr); }
}
@media(max-width: 900px) {
  .detail-layout, .help-layout, .wallet-layout, .account-layout { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ==============================================================
   D4-GAMECENTER ADVANCED PRODUCTION UX/UI STYLES
   ============================================================== */

/* Modal & Dialog System */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(12, 28, 22, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  animation: modalFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.97) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-card {
  background: #14141a;
  color: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 240, 118, 0.1);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.modal-md { max-width: 560px; }
.modal-qr {
  max-width: 390px;
  max-height: 94vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

@media (max-height: 520px) {
  .modal-qr {
    max-height: 98vh;
    overflow-y: auto;
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--line);
}

.modal-header h3 {
  margin: 0 0 4px;
  font-size: 18px;
  letter-spacing: -0.3px;
}

.modal-close {
  background: transparent;
  border: 0;
  font-size: 20px;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
}
.modal-close:hover { background: var(--bg); color: var(--ink); }

.modal-body { padding: 22px 24px; }
.modal-footer {
  padding: 16px 24px 22px;
  display: flex;
  gap: 10px;
  border-top: 1px solid var(--line);
}

/* Thai PromptPay QR Box */
.thai-qr-box {
  background: #003764;
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  color: #fff;
  box-shadow: 0 10px 30px rgba(0, 55, 100, 0.2);
}

.thai-qr-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 14px;
}

.thai-qr-logo {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.5px;
}

.thai-qr-network {
  font-size: 12px;
  color: #b9d5ec;
  font-weight: 600;
}

.thai-qr-canvas {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  display: inline-block;
  margin: 0 auto;
}

.qr-svg-graphic {
  width: 170px;
  height: 170px;
  display: block;
}

.thai-qr-info {
  margin-top: 14px;
  font-size: 11px;
  color: #c9e0f3;
  line-height: 1.6;
}
.thai-qr-info .payee-name { display: block; font-weight: 600; }
.thai-qr-info .ref-code { display: block; opacity: 0.85; font-family: var(--mono); font-size: 10px; }

.qr-summary-box {
  margin-top: 18px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 18px;
}

.qr-amount-row, .qr-timer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 13px;
}

.qr-amount-text {
  font-size: 22px;
  font-family: var(--mono);
  color: var(--green);
}

.qr-countdown {
  font-family: var(--mono);
  background: rgba(0, 240, 118, 0.12);
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid rgba(0, 240, 118, 0.35);
  color: var(--green);
}
.qr-countdown.urgent { color: #f87171; border-color: rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.15); }
.qr-countdown.expired { color: #ef4444; border-color: #ef4444; background: rgba(239, 68, 68, 0.2); }

.qr-tips {
  margin-top: 14px;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
}
.qr-tips p { margin: 0; }

.qr-footer { flex-direction: column; gap: 8px; }
.qr-confirm-btn { padding: 14px; font-size: 14px; }

/* Guide Modal */
.guide-body { display: grid; gap: 16px; }
.guide-box {
  background: var(--green-soft);
  border: 1px solid #d0e7dc;
  border-radius: 8px;
  padding: 16px;
}
.guide-step-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--mono);
  color: var(--green);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.guide-text { margin: 0; line-height: 1.7; font-size: 13px; color: var(--ink); }
.guide-hint-card {
  background: #fdfdfd;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}
.guide-hint-card code {
  font-family: var(--mono);
  color: var(--green);
  font-weight: 600;
  background: var(--bg);
  padding: 3px 8px;
  border-radius: 4px;
}
.guide-note {
  font-size: 11px;
  line-height: 1.6;
  color: #7a632e;
  background: #fff9e6;
  border: 1px solid #fae6ab;
  padding: 12px;
  border-radius: 8px;
}

/* Order Detail Modal & Steam Redeem Key */
.od-status-banner {
  background: #eef8f2;
  border: 1px solid #c7ebd4;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.od-status-badge {
  font-weight: 700;
  font-size: 13px;
  color: #1a7a4c;
}
.od-table { display: grid; gap: 10px; }
.od-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 12px;
}
.od-row span { color: var(--muted); }
.od-row b { color: var(--ink); font-weight: 600; }
.od-val-copy { display: flex; align-items: center; gap: 8px; }
.od-val-copy button {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 5px;
  padding: 3px 7px;
  font-size: 10px;
  cursor: pointer;
  color: var(--green);
}
.od-val-copy button:hover { background: var(--green-soft); border-color: var(--green); }
.text-large { font-size: 18px; font-family: var(--mono); color: var(--green); }
.text-green { color: var(--green); }
.text-credit { color: #1e8756; font-weight: 700; }

.redeem-code-box {
  margin-top: 20px;
  background: #192520;
  color: #fff;
  border-radius: 10px;
  padding: 18px;
}
.rc-title { display: block; font-size: 12px; font-weight: 700; color: #6ee7b7; margin-bottom: 10px; }
.rc-code-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 10px 14px;
}
.rc-code-row code {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 1px;
  color: #fff;
}
.rc-code-row button { padding: 6px 14px; font-size: 12px; }
.redeem-code-box small { display: block; margin-top: 10px; color: #a2bdb3; font-size: 10px; }

/* Live Ticker Bar */
.live-ticker-strip {
  background: #0f2c22;
  color: #9cd4bd;
  border-bottom: 1px solid #1a4537;
  overflow: hidden;
  font-size: 11px;
  padding: 7px 0;
}
.ticker-container {
  display: flex;
  align-items: center;
  gap: 16px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.ticker-container::-webkit-scrollbar { display: none; }
.ticker-label {
  color: #ff9a6e;
  font-weight: 700;
  font-family: var(--mono);
  font-size: 10px;
  flex: 0 0 auto;
}
.ticker-items {
  display: flex;
  gap: 28px;
}
.ticker-item {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.ticker-item strong { color: #fff; }
.ticker-item small { color: #72a893; font-size: 9px; }

/* Trust Metrics Bar */
.trust-stats-bar {
  background: #111116;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 32px 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}
.stat-card strong {
  display: block;
  font-size: 28px;
  font-family: var(--mono);
  color: #00f076;
  letter-spacing: -1px;
}
.stat-card span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #94a3b8;
  font-weight: 600;
}

/* Category Filter Tabs & Chips */
.category-tabs-home {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.category-tabs-home button {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 600;
  font-size: 12px;
  color: #94a3b8;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.18s;
}
.category-tabs-home button:hover { border-color: var(--green); color: var(--green); background: rgba(0, 240, 118, 0.06); }
.category-tabs-home button.active {
  background: rgba(0, 240, 118, 0.15);
  color: var(--green);
  border-color: var(--green);
  box-shadow: 0 0 12px rgba(0, 240, 118, 0.25);
}

.catalog-filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}
.category-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.category-chips .chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  cursor: pointer;
  transition: 0.18s;
}
.category-chips .chip:hover { border-color: var(--green); color: var(--green); background: rgba(0, 240, 118, 0.06); }
.category-chips .chip.active {
  background: rgba(0, 240, 118, 0.15);
  color: var(--green);
  border-color: var(--green);
  box-shadow: 0 0 12px rgba(0, 240, 118, 0.25);
}

.sort-dropdown-wrap label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.sort-dropdown-wrap select {
  background: #16161c;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 12px;
  color: #fff;
  outline: none;
  cursor: pointer;
}

.clear-search-btn {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
}
.clear-search-btn:hover { color: #fff; }

.empty-catalog-box {
  text-align: center;
  padding: 60px 20px;
  background: #14141a;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: #fff;
}
.empty-icon { font-size: 44px; margin-bottom: 14px; }
.empty-catalog-box h3 { margin: 0 0 6px; font-size: 18px; color: #fff; }
.empty-catalog-box p { color: var(--muted); margin: 0 0 18px; font-size: 13px; }

/* Game Card Enhancements (AimUp Squircle) */
.game-cover {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.12) 0%, rgba(20, 20, 26, 0.95) 80%),
              var(--game, #181822);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.game-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, var(--game, rgba(0, 240, 118, 0.2)) 0%, transparent 70%);
  opacity: 0.35;
  transition: opacity 0.3s;
}
.game-item:hover .game-cover::before {
  opacity: 0.65;
}
.game-short-logo {
  position: relative;
  z-index: 1;
  font: 900 46px var(--mono);
  color: #ffffff;
  letter-spacing: -1px;
  text-shadow: 0 0 24px rgba(255, 255, 255, 0.6), 0 4px 12px rgba(0, 0, 0, 0.8);
  transition: transform 0.28s ease;
}
.game-item:hover .game-short-logo {
  transform: scale(1.12);
}
.game-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}
.game-tag-badge {
  background: rgba(13, 13, 15, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f8fafc;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap !important;
  word-break: keep-all !important;
  flex-shrink: 0;
  line-height: 1.2;
}
.game-category-chip {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #f1f5f9;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.2px;
}
.game-cover-bottom {
  position: absolute;
  bottom: 8px;
  left: 10px;
  right: 10px;
  z-index: 2;
}
.game-auto-badge {
  display: inline-block;
  background: rgba(0, 240, 118, 0.15);
  border: 1px solid rgba(0, 240, 118, 0.35);
  color: #00f076;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  backdrop-filter: blur(8px);
}
.game-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 10px;
  margin-top: 6px;
}
.price-label { font-size: 11px; color: #94a3b8; }
.price-val { font-size: 16px; font-weight: 800; font-family: var(--mono); color: var(--green); }

/* Game Detail Page Upgrades */
.detail-title-info h1 { font-size: 26px; margin: 4px 0 6px; letter-spacing: -0.5px; }
.detail-title-info p { margin: 0; color: var(--muted); font-size: 12px; }
.detail-badge-row { display: flex; gap: 8px; flex-wrap: wrap; }
.tag-pill {
  font-size: 9px;
  font-weight: 700;
  background: var(--green);
  color: #fff;
  padding: 3px 8px;
  border-radius: 4px;
}
.tag-pill.soft { background: var(--green-soft); color: var(--green); }
.tag-pill.auto { background: #fff0e9; color: var(--orange); }

.field-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.field-label { font-weight: 700; font-size: 12px; color: var(--ink); }
.guide-help-btn {
  background: transparent;
  border: 0;
  color: var(--green);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.guide-help-btn:hover { text-decoration: underline; background: var(--green-soft); }

.verify-input-wrap {
  display: flex;
  gap: 8px;
}
.main-field-input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  outline: none;
  font-family: inherit;
  transition: 0.18s;
}
.main-field-input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}
.verify-btn {
  white-space: nowrap;
  padding: 0 18px;
  background: linear-gradient(135deg, #00f076, #00c761);
  color: #000;
  font-weight: 800;
  font-size: 12px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(0, 240, 118, 0.3);
  transition: all 0.2s ease;
}
.verify-btn:hover:not(:disabled) {
  background: #00ff7f;
  box-shadow: 0 0 20px rgba(0, 240, 118, 0.6);
  transform: translateY(-1px);
}
.verify-btn:disabled {
  background: #272732;
  color: #94a3b8;
  cursor: not-allowed;
  box-shadow: none;
}
.field-hint { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; }

.verified-ign-badge {
  margin-top: 10px;
  background: rgba(0, 240, 118, 0.12);
  border: 1px solid rgba(0, 240, 118, 0.35);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
}
.verified-ign-badge strong { color: var(--green); }
.v-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green);
  color: #000;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: bold;
}

/* Package Cards */
.pkg-card {
  position: relative;
  cursor: pointer;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.pkg-card input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.pkg-card:has(input:focus-visible) .pkg-content,
.pkg-card input:focus-visible + .pkg-content {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.pkg-content {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 14px;
  text-align: left;
  background: #14141d;
  color: #fff;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  height: 66px;
  min-height: 66px;
  max-height: 66px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.pkg-card:hover .pkg-content {
  border-color: rgba(0, 240, 118, 0.35);
  background: #181926;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.pkg-card.selected .pkg-content {
  border-color: #00f076;
  background: rgba(0, 240, 118, 0.05);
  box-shadow: 0 0 0 1px #00f076, 0 4px 20px rgba(0, 240, 118, 0.12);
}

/* Radio circle indicator */
.pkg-radio-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid #4b5563;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.3);
  transition: all 0.18s ease;
}

.pkg-card:hover .pkg-radio-circle {
  border-color: #00f076;
}

.pkg-card.selected .pkg-radio-circle {
  border-color: #00f076;
  background: rgba(0, 240, 118, 0.15);
  box-shadow: 0 0 8px rgba(0, 240, 118, 0.35);
}

.pkg-radio-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00f076;
  opacity: 0;
  transform: scale(0.4);
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.pkg-card.selected .pkg-radio-dot {
  opacity: 1;
  transform: scale(1);
}

/* Main Info block: Radio + Icon + Text */
.pkg-main-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.pkg-icon-wrap {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pkg-product-img {
  max-width: 32px;
  max-height: 32px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.45));
  transition: transform 0.2s ease;
}

.pkg-card:hover .pkg-product-img {
  transform: scale(1.08);
}

.pkg-text-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
  text-align: left;
}

.pkg-title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.3;
}

.pkg-amount {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.1px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-height: 0;
  text-align: left;
}

.pkg-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.pkg-price {
  font-size: 14.5px;
  font-weight: 800;
  color: #00f076;
  letter-spacing: -0.2px;
  line-height: 1.2;
}

.pkg-pricing-split {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.retail-strike {
  color: #64748b;
  font-size: 11.5px;
  text-decoration: line-through;
}

.reseller-accent {
  color: #38bdf8 !important;
}

.pkg-reseller-badge {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
  font-weight: 600;
}

.pkg-detail-line {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
  font-weight: 400;
}

.pkg-card.selected .pkg-detail-line {
  color: #cbd5e1;
}

.pkg-bonus-sub {
  font-size: 11px;
  color: #38bdf8;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

/* Side Badges: Points Pill and Out-of-Stock */
.pkg-side-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.pkg-points-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2.5px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.28);
  white-space: nowrap;
  letter-spacing: -0.1px;
  box-shadow: 0 1px 4px rgba(245, 158, 11, 0.1);
}

.pkg-status-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1.5px 6px;
  border-radius: 4px;
  color: #fff;
  white-space: nowrap;
  line-height: 1.25;
}

.pkg-status-badge.badge-hot {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 1px 4px rgba(239, 68, 68, 0.4);
}

.pkg-status-badge.badge-best {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  box-shadow: 0 1px 4px rgba(139, 92, 246, 0.4);
}

.pkg-status-badge.badge-bonus {
  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
  box-shadow: 0 1px 4px rgba(236, 72, 153, 0.4);
}

.pkg-status-badge.badge-rec {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 1px 4px rgba(245, 158, 11, 0.4);
}

.pkg-status-badge.badge-out-of-stock {
  background: #334155 !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Out of Stock (สินค้าหมด) Styling for Package Cards */
.pkg-card.out-of-stock,
.pkg-card.disabled {
  cursor: not-allowed !important;
  user-select: none;
}

.pkg-card.out-of-stock .pkg-content,
.pkg-card.disabled .pkg-content {
  background: rgba(18, 20, 29, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed !important;
  opacity: 0.5;
  filter: grayscale(0.9);
}

.pkg-card.out-of-stock:hover .pkg-content,
.pkg-card.disabled:hover .pkg-content {
  background: rgba(18, 20, 29, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  box-shadow: none !important;
  transform: none !important;
}

.pkg-card.out-of-stock .pkg-amount {
  color: #94a3b8 !important;
}

.pkg-card.out-of-stock .pkg-detail-line {
  color: #64748b !important;
}

.pkg-card.out-of-stock .pkg-price {
  color: #64748b !important;
  text-decoration: line-through;
  text-decoration-color: rgba(239, 68, 68, 0.6);
}

.pkg-card.out-of-stock .pkg-bonus-sub {
  color: #475569 !important;
}

.pkg-card.out-of-stock .retail-strike,
.pkg-card.out-of-stock .reseller-accent {
  color: #475569 !important;
}

.pkg-card.out-of-stock .pkg-badge,
.pkg-badge.badge-out-of-stock {
  background: linear-gradient(135deg, #475569 0%, #334155 100%) !important;
  color: #cbd5e1 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}

/* Disabled Submit Buttons (Out of stock state) */
.checkout-submit-btn.disabled-btn,
.mobile-sticky-btn.disabled-btn,
.btn.disabled-btn {
  background: #1e293b !important;
  color: #64748b !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 0.75 !important;
}

/* Platform Store Out of Stock Card */
.platform-store-card.out-of-stock {
  opacity: 0.55;
  filter: grayscale(0.85);
  cursor: not-allowed;
}

.platform-store-card.out-of-stock:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* Sidebar Order Summary Game Card */
.summary-game-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
  margin: 14px 0 18px;
}
.summary-cover-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  max-height: 220px;
  background: #111116;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.summary-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.summary-cover-fallback {
  font-size: 36px;
  font-weight: 800;
  font-family: var(--mono);
  color: #fff;
}
.summary-cover-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(21, 21, 28, 0.75) 100%);
  pointer-events: none;
}
.summary-badge-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: rgba(13, 13, 16, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #00f076;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
}
.summary-game-details {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.summary-game-name {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  line-height: 1.35;
  word-break: break-word;
}
.summary-pack-pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  background: rgba(0, 240, 118, 0.08);
  border: 1px solid rgba(0, 240, 118, 0.25);
  border-radius: 6px;
  padding: 4px 10px;
  color: #00f076;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--mono);
}
.summary-pack-pill .pack-dot {
  font-size: 8px;
  color: #00f076;
}

/* Fallback .summary-game */
.summary-game {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.summary-game b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}
.summary-game small {
  display: block;
  font-size: 12.5px;
  color: #00f076;
  font-weight: 700;
}

.summary-selected-type-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  font-size: 12px;
}
.summary-selected-type-row .st-lbl {
  color: #94a3b8;
  font-weight: 500;
}
.summary-selected-type-row .st-val {
  color: #00f076;
  font-weight: 700;
}

/* Step 1: Game Type Selector (OverTopup style) */
.game-type-selector-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 10px;
}
@media (max-width: 640px) {
  .game-type-selector-grid {
    grid-template-columns: 1fr;
  }
}
.game-type-card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 18px;
  background: rgba(255, 255, 255, 0.025);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #94a3b8;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
}
.game-type-card-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
  transform: translateY(-1px);
}
.game-type-card-btn.active {
  border-color: #00f076;
  background: rgba(0, 240, 118, 0.08);
  color: #ffffff;
  box-shadow: 0 0 20px rgba(0, 240, 118, 0.18), inset 0 0 0 1px #00f076;
}
.type-check-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  transition: all 0.2s;
}
.game-type-card-btn.active .type-check-indicator {
  background: #00f076;
  color: #000;
  font-weight: 900;
}

/* Game Guide & Instructions Card (OverTopup style) */
.game-guide-card {
  background: #14141b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  margin-top: 0;
  margin-bottom: 14px;
}
.guide-top-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #00f076;
  background: rgba(0, 240, 118, 0.1);
  border: 1px solid rgba(0, 240, 118, 0.25);
  padding: 3px 9px;
  border-radius: 6px;
  letter-spacing: 0.2px;
}
.game-guide-text {
  font-size: 13px;
  line-height: 1.6;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 12px;
  white-space: pre-line;
}
.game-guide-rich-block {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  min-width: 24px;
  margin: 3px 0;
  padding: 3px 7px;
  border-radius: 6px;
  white-space: pre-wrap;
  word-break: break-word;
}
.game-guide-rich-marker {
  flex: 0 0 auto;
  font-weight: 800;
}
.guide-text .game-guide-rich-block {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
}
.guide-editor {
  overflow: hidden;
  border: 1px solid #27272a;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(24, 24, 27, 0.98), rgba(9, 9, 11, 0.98));
}
.guide-editor-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #27272a;
  background: rgba(16, 185, 129, 0.07);
}
.guide-editor-heading strong,
.guide-editor-heading small {
  display: block;
}
.guide-editor-heading strong {
  color: #f4f4f5;
  font-size: 12px;
}
.guide-editor-heading small {
  margin-top: 3px;
  color: #a1a1aa;
  font-size: 10.5px;
}
.guide-editor-count {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 999px;
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.1);
  font-size: 10px;
  font-weight: 700;
}
.guide-editor-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(220px, 0.75fr);
  gap: 12px;
  padding: 12px;
}
.guide-editor-blocks {
  display: grid;
  gap: 9px;
  min-width: 0;
}
.guide-editor-block {
  padding: 9px;
  border: 1px solid #3f3f46;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.025);
  transition: border-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.guide-editor-block:hover {
  border-color: rgba(16, 185, 129, 0.55);
}
.guide-editor-block.is-dragging {
  opacity: 0.45;
  transform: scale(0.99);
}
.guide-editor-block-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
}
.guide-drag-handle {
  cursor: grab;
  user-select: none;
  color: #6ee7b7;
  font-size: 15px;
  letter-spacing: -3px;
  line-height: 1;
}
.guide-drag-handle:active {
  cursor: grabbing;
}
.guide-editor-block-number {
  color: #a1a1aa;
  font-size: 10.5px;
  font-weight: 700;
}
.guide-editor-block-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.guide-editor-block-actions button,
.guide-editor-toolbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 25px;
  padding: 0 7px;
  border: 1px solid #3f3f46;
  border-radius: 5px;
  color: #d4d4d8;
  background: #18181b;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}
.guide-editor-block-actions button:hover,
.guide-editor-toolbar button:hover,
.guide-editor-toolbar button.is-active {
  border-color: #10b981;
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.13);
}
.guide-editor-block-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}
.guide-editor-block-actions button:last-child:hover {
  border-color: #f87171;
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.1);
}
.guide-editor-textarea {
  min-height: 74px;
  resize: vertical;
  line-height: 1.55;
}
.guide-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
}
.guide-editor-toolbar select {
  min-height: 25px;
  max-width: 112px;
  padding: 0 5px;
  border: 1px solid #3f3f46;
  border-radius: 5px;
  color: #d4d4d8;
  background: #18181b;
  font-size: 10px;
}
.guide-editor-toolbar select:focus {
  outline: 1px solid #10b981;
}
.guide-editor-add {
  min-height: 38px;
  border: 1px dashed rgba(16, 185, 129, 0.5);
  border-radius: 8px;
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.06);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}
.guide-editor-add:hover {
  background: rgba(16, 185, 129, 0.13);
}
.guide-editor-preview {
  min-width: 0;
  min-height: 170px;
  padding: 12px;
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: 9px;
  background: #111827;
}
.guide-editor-preview-label {
  margin-bottom: 10px;
  color: #93c5fd;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.guide-editor-preview .game-guide-rich-block {
  font-size: 12px !important;
}
.guide-editor-rich-panel {
  min-width: 0;
}
.guide-editor-rich-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 8px;
  border: 1px solid #3f3f46;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #18181b;
}
.guide-editor-rich-toolbar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 27px;
  height: 26px;
  padding: 0 7px;
  border: 1px solid #3f3f46;
  border-radius: 5px;
  color: #d4d4d8;
  background: #111113;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}
.guide-editor-rich-toolbar button:hover {
  border-color: #10b981;
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.13);
}
.guide-editor-toolbar-label {
  margin-left: 3px;
  color: #71717a;
  font-size: 10px;
}
.guide-color-swatch {
  padding: 0 !important;
  font-size: 12px !important;
}
.guide-background-swatch {
  color: #fff !important;
}
.guide-editor-rich-content {
  min-height: 220px;
  padding: 12px;
  border: 1px solid #3f3f46;
  border-radius: 0 0 8px 8px;
  color: #f8fafc;
  background: #121214;
  outline: none;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.guide-editor-rich-content:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.25);
}
.guide-editor-rich-content:empty::before {
  content: 'พิมพ์คำแนะนำของเกมที่นี่...';
  color: #71717a;
  pointer-events: none;
}
.guide-editor-rich-help {
  display: block;
  margin-top: 6px;
  color: #71717a;
  font-size: 10.5px;
  line-height: 1.45;
}
.game-guide-rich-html a,
.game-guide-rich-block a {
  color: #60a5fa;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.game-guide-rich-html p,
.game-guide-rich-html div {
  margin: 0 0 6px;
}
.game-guide-rich-html ul,
.game-guide-rich-html ol {
  margin: 4px 0 6px;
  padding-left: 22px;
}
@media (max-width: 820px) {
  .guide-editor-workspace {
    grid-template-columns: 1fr;
  }
  .guide-editor-preview {
    order: -1;
  }
}
.game-assurance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 768px) {
  .game-assurance-grid {
    grid-template-columns: 1fr;
  }
}
.assurance-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}
.assure-icon {
  font-size: 22px;
  flex-shrink: 0;
}
.assurance-box strong {
  display: block;
  font-size: 12.5px;
  color: #fff;
}
.assurance-box small {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
}

/* Payment Method Options */
.payment-options {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}
.pm-option {
  position: relative;
  cursor: pointer;
  display: block;
}
.pm-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.pm-option:has(input:focus-visible) .pm-card-body,
.pm-option input:focus-visible + .pm-card-body {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.pm-card-body {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 18px 24px;
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 20px;
}
.pm-option:hover .pm-card-body {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
}
.pm-option.selected .pm-card-body {
  border-color: var(--green);
  background: rgba(0, 240, 118, 0.08);
  box-shadow: 0 0 24px rgba(0, 240, 118, 0.2), inset 0 0 0 1px var(--green);
}
.pm-icon-badge {
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: all 0.2s ease;
}
.pm-option.selected .pm-icon-badge {
  background: rgba(0, 240, 118, 0.15);
  border-color: rgba(0, 240, 118, 0.4);
  box-shadow: 0 0 16px rgba(0, 240, 118, 0.25);
}
.pm-emoji {
  font-size: 26px;
}
.pm-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.pm-name {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.2px;
}
.pm-desc {
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.5;
}
.pm-radio-ring {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.pm-option.selected .pm-radio-ring {
  border-color: var(--green);
}
.pm-radio-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.2s ease;
}
.pm-option.selected .pm-radio-dot {
  opacity: 1;
  transform: scale(1);
}

/* Summary Lines (Separated Key-Value) */
.summary-lines {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 18px 0 22px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.summary-lines > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: 14px;
  color: #94a3b8;
}
.summary-lines > div b {
  color: #ffffff;
  font-weight: 700;
  font-family: var(--mono);
  font-size: 14.5px;
}
.summary-lines > div.total {
  padding-top: 14px;
  margin-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.14);
}
.summary-lines > div.total span {
  color: #ffffff;
  font-weight: 800;
  font-size: 15px;
}
.summary-lines > div.total strong {
  font-size: 22px;
  font-weight: 900;
  color: var(--green);
  font-family: var(--mono);
  text-shadow: 0 0 14px rgba(0, 240, 118, 0.35);
}

.discount-line b { color: var(--crimson); }
.mono-text { font-family: var(--mono); font-size: 11px; }

/* Wallet Virtual Card - Cyber Luxury Titanium */
.wallet-summary-card {
  position: relative;
  background: linear-gradient(135deg, #0b1f17 0%, #0d281e 50%, #103828 100%);
  border: 1px solid rgba(0, 240, 118, 0.35);
  color: #fff;
  border-radius: 18px;
  padding: 24px 26px;
  margin-bottom: 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 24px rgba(0, 240, 118, 0.15);
  overflow: hidden;
}
.wallet-summary-card::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(0, 240, 118, 0.2), transparent 70%);
  pointer-events: none;
}
.wsc-top { display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 1; }
.wsc-sub { font-size: 11px; font-family: var(--mono); color: #86efac; letter-spacing: 1px; font-weight: 700; }
.wsc-balance { display: flex; align-items: baseline; font-size: 38px; font-family: var(--mono); margin-top: 6px; letter-spacing: -1px; color: #ffffff; text-shadow: 0 0 16px rgba(0, 240, 118, 0.4); }
.wsc-balance small {
  font-size: 18px;
  color: var(--green);
  font-weight: 800;
  margin-left: 8px;
  letter-spacing: 0;
  text-shadow: 0 0 12px rgba(0, 240, 118, 0.5);
}
.wsc-chip {
  background: rgba(0, 240, 118, 0.15);
  border: 1px solid rgba(0, 240, 118, 0.3);
  color: var(--green);
  font-size: 10px;
  font-family: var(--mono);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
}
.wsc-bottom {
  display: flex;
  gap: 32px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 1;
}
.wsc-stat small { display: block; font-size: 10px; color: #94a3b8; font-weight: 600; margin-bottom: 2px; }
.wsc-stat b { font-size: 15px; font-weight: 700; font-family: var(--mono); color: #f1f5f9; }

.quick-amount-label { font-size: 12px; color: #cbd5e1; margin-top: 16px; font-weight: 700; }
.quick-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.quick-row button {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px 10px;
  color: #cbd5e1;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--mono);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}
.quick-row button:hover {
  background: rgba(0, 240, 118, 0.08);
  border-color: rgba(0, 240, 118, 0.4);
  color: var(--green);
  transform: translateY(-2px);
}
.quick-row button.active {
  background: rgba(0, 240, 118, 0.15);
  border-color: var(--green);
  color: var(--green);
  box-shadow: 0 0 16px rgba(0, 240, 118, 0.25);
  transform: translateY(-2px);
}
@media(max-width: 650px) {
  .quick-row { grid-template-columns: repeat(3, 1fr); }
}

.points-bonus-tip {
  margin-top: 14px;
  background: rgba(0, 240, 118, 0.08);
  border: 1px solid rgba(0, 240, 118, 0.25);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 13.5px;
  color: var(--green);
}
.points-bonus-tip strong {
  color: #ffffff;
}

/* Account Page - Modern E-sports Profile */
.profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #13131a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 30px 24px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}
.profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0, 240, 118, 0.25), rgba(0, 240, 118, 0.08));
  border: 2px solid var(--green);
  box-shadow: 0 0 24px rgba(0, 240, 118, 0.35);
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 14px;
}
.profile-card h2 {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 8px;
}
.profile-header-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.profile-identity-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.profile-badge-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 12px;
}
.profile-role-wrap {
  margin-bottom: 0;
}
.profile-role-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.profile-role-pill.retail {
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #60a5fa;
}
.profile-role-pill.reseller {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}
.profile-uid-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 4px 10px;
}
.profile-uid-chip code { font-family: var(--mono); font-size: 11px; color: #cbd5e1; }
.profile-uid-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 6px 14px;
  margin: 4px 0 16px;
  width: 100%;
}
.profile-uid-row code { font-family: var(--mono); font-size: 11px; color: #cbd5e1; }
.copy-btn-tiny {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 10px;
  cursor: pointer;
  color: var(--green);
  font-weight: 700;
}
.copy-btn-tiny:hover { background: rgba(0, 240, 118, 0.15); }
.profile-info-grid {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.profile-secondary-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.profile-contact-phone-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.profile-contact-phone-main {
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
}
.profile-settings-dropdown {
  position: relative;
  flex-shrink: 0;
}
.profile-settings-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border: 1px solid rgba(0, 240, 118, 0.25);
  border-radius: 8px;
  background: rgba(0, 240, 118, 0.08);
  color: var(--green);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  list-style: none;
  white-space: nowrap;
}
.profile-settings-trigger::-webkit-details-marker { display: none; }
.profile-settings-trigger:hover,
.profile-settings-dropdown[open] .profile-settings-trigger {
  background: rgba(0, 240, 118, 0.16);
  border-color: rgba(0, 240, 118, 0.5);
}
.profile-settings-chevron {
  display: inline-flex;
  align-items: center;
  transition: transform 0.15s ease;
}
.profile-settings-dropdown[open] .profile-settings-chevron {
  transform: rotate(180deg);
}
.profile-settings-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  display: grid;
  gap: 3px;
  min-width: 190px;
  padding: 6px;
  background: #1a1a22;
  border: 1px solid rgba(0, 240, 118, 0.25);
  border-radius: 10px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
}
.profile-settings-menu button,
.profile-settings-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #e2e8f0;
  cursor: pointer;
  font: inherit;
  font-size: 11.5px;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
}
.profile-settings-menu svg,
.profile-settings-trigger svg,
.profile-actions-stack svg {
  flex: 0 0 auto;
}
.profile-settings-menu button span,
.profile-settings-menu a span {
  min-width: 0;
}
.profile-settings-menu button:hover,
.profile-settings-menu a:hover {
  background: rgba(0, 240, 118, 0.1);
  color: var(--green);
}
.profile-settings-menu-divider {
  height: 1px;
  margin: 4px 2px;
  background: rgba(255, 255, 255, 0.08);
}
.profile-phone-box {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 14px;
  text-align: left;
}
.profile-phone-box small {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 4px;
}
.phone-verified-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.phone-verified-row strong {
  font-size: 14px;
  color: #ffffff;
  font-family: var(--mono);
}
.verified-check {
  font-size: 10px;
  font-weight: 700;
  color: var(--green);
  background: rgba(0, 240, 118, 0.1);
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(0, 240, 118, 0.25);
}
.profile-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  margin-bottom: 8px;
}
.profile-stats-row .profile-stat {
  margin-bottom: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 8px 12px;
}
.profile-stat {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  margin-bottom: 8px;
}
.profile-stat small { color: #94a3b8; font-size: 11px; }
.profile-stat strong { color: #ffffff; font-size: 13.5px; font-family: var(--mono); }

.profile-actions-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  width: 100%;
}
.profile-actions-stack .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  font-size: 12.5px;
  padding: 10px 14px;
}
.logout-btn { color: var(--crimson); border-color: rgba(255, 45, 77, 0.3); }
.logout-btn:hover { border-color: var(--crimson); color: var(--crimson); background: rgba(255, 45, 77, 0.12); }

/* Account Tabs (AimUp Style) */
.account-tabs {
  display: flex;
  gap: 8px;
  background: rgba(255, 255, 255, 0.03);
  padding: 6px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 24px;
  overflow-x: auto;
}
.account-tabs button {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.account-tabs button:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}
.account-tabs button.active {
  background: rgba(0, 240, 118, 0.15);
  color: var(--green);
  border: 1px solid rgba(0, 240, 118, 0.35);
  box-shadow: 0 0 14px rgba(0, 240, 118, 0.2);
}

/* History Cards */
.history-table {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.history-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 18px 22px;
  transition: all 0.2s ease;
}
.history-row.clickable {
  cursor: pointer;
}
.history-row:hover,
.history-row.clickable:hover {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(0, 240, 118, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.hr-left-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}
.hr-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: grid;
  place-items: center;
  font-size: 20px;
  flex-shrink: 0;
}
.hr-icon-badge.credit {
  background: rgba(0, 240, 118, 0.1);
  border-color: rgba(0, 240, 118, 0.3);
}
.hr-left {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hr-left small code {
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 11px;
}
.hr-left b {
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
}
.hr-left small {
  color: #94a3b8;
  font-size: 12px;
  font-family: var(--mono);
}
.history-redeem-pill {
  display: inline-block;
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: #60a5fa;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  width: fit-content;
  margin-top: 4px;
}
.hr-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
}
.hr-right strong {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  font-family: var(--mono);
}
.hr-right .text-credit {
  color: var(--green);
  font-size: 16px;
  font-weight: 800;
  font-family: var(--mono);
}
.status-badge-success {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 240, 118, 0.12);
  border: 1px solid rgba(0, 240, 118, 0.3);
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 6px;
  font-style: normal;
}
.empty-history-icon { font-size: 38px; display: block; margin-bottom: 10px; }

/* Reviews Section */
.reviews-header { margin-bottom: 35px; }
.reviews-header .eyebrow {
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  display: block;
  margin-bottom: 8px;
}
.reviews-header h2 {
  color: #ffffff;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin: 0 0 6px;
}
.section-sub { color: #94a3b8; font-size: 14px; margin: 4px 0 0; }
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.review-card {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.review-stars { color: #f59e0b; font-size: 14px; margin-bottom: 10px; letter-spacing: 2px; }
.review-card p {
  font-size: 13px;
  line-height: 1.7;
  color: #cbd5e1;
  margin: 0 0 16px;
  font-style: italic;
}
.review-author { display: flex; align-items: center; gap: 10px; }
.author-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--green);
  color: #000;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 12px;
}
.review-author b { display: block; font-size: 12px; color: #fff; }
.review-author small { display: block; font-size: 10px; color: #94a3b8; }
.review-author small { color: var(--muted); font-size: 10px; }

/* Header & Topbar enhancements */
.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.3);
  margin-right: 7px;
}
.topbar-left { display: flex; align-items: center; }
.topbar-divider { opacity: 0.3; }
.topbar-login-link { color: #a9decb; font-weight: 600; }

.user-header-group { display: flex; align-items: center; gap: 12px; }
.header-wallet-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--green-soft);
  border: 1px solid #c2e2d3;
  padding: 6px 12px;
  border-radius: 8px;
  text-decoration: none;
}
.hw-label { font-size: 10px; color: var(--green-dark); }
.hw-val { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--green); }
.hw-plus {
  background: var(--green);
  color: #fff;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  line-height: 1;
}

.account-info-text { display: flex; flex-direction: column; text-align: left; }
.account-name { font-size: 12px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.account-tier { font-size: 9px; color: var(--orange); font-weight: 600; }

.payment-trust-logos {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.pt-badge {
  background: rgba(255, 255, 255, 0.12);
  color: #d1e7dc;
  font-size: 9px;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 600;
}
.text-link-btn {
  background: transparent;
  border: 0;
  color: #b9cec5;
  cursor: pointer;
  padding: 0;
  font-size: 10px;
  display: block;
  margin: 8px 0;
  text-align: left;
}
.text-link-btn:hover { color: #fff; text-decoration: underline; }
.footer-secure-tag { font-size: 9px; color: #a9decb; font-family: var(--mono); }

/* Mobile Bottom Navigation (Cyberpunk Dark Neon Style) */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: rgba(13, 13, 18, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 999;
  justify-content: space-around;
  align-items: center;
  padding: 0 6px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.6);
}
.mobile-bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: #94a3b8;
  flex: 1;
  height: 100%;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.mob-icon { display: flex; align-items: center; justify-content: center; line-height: 1; transition: transform 0.2s; }
.mob-label { font-size: 10.5px; font-weight: 600; }
.mobile-bottom-nav a:hover,
.mobile-bottom-nav a.active {
  color: #00f076;
}
.mobile-bottom-nav a.active .mob-icon {
  transform: translateY(-2px);
  filter: drop-shadow(0 0 8px rgba(0, 240, 118, 0.65));
}
.mobile-bottom-nav a.active .mob-label {
  font-weight: 800;
  color: #00f076;
}

/* Toast Enhanced */
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
}
.toast-icon { font-size: 18px; line-height: 1; }
.toast-success { border-left: 4px solid #34d399; }
.toast-error { border-left: 4px solid #f87171; }
.toast-info { border-left: 4px solid #60a5fa; }

/* Realtime update gate: a focused release notice for tabs that stayed open during deploys. */
.realtime-update-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147483647 !important;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 12, 10, 0.85);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  animation: realtimeUpdateFadeIn 0.28s ease-out both;
  pointer-events: auto !important;
}

.realtime-update-modal {
  position: relative;
  width: min(100%, 470px);
  overflow: hidden;
  padding: 34px 34px 30px;
  color: #f8fafc;
  text-align: center;
  background:
    radial-gradient(circle at 50% -10%, rgba(0, 240, 118, 0.16), transparent 42%),
    linear-gradient(150deg, rgba(21, 35, 30, 0.98), rgba(9, 14, 18, 0.99));
  border: 1px solid rgba(0, 240, 118, 0.35);
  border-radius: 24px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.75), 0 0 46px rgba(0, 240, 118, 0.16);
  animation: realtimeUpdateLift 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
  pointer-events: auto !important;
}

.realtime-update-modal::after {
  position: absolute;
  inset: auto 14% 0;
  height: 1px;
  content: '';
  background: linear-gradient(90deg, transparent, rgba(0, 240, 118, 0.7), transparent);
}

.realtime-update-orbit {
  position: relative;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin: 0 auto 22px;
  color: var(--green);
  border: 1px solid rgba(0, 240, 118, 0.34);
  border-radius: 50%;
  box-shadow: 0 0 28px rgba(0, 240, 118, 0.15), inset 0 0 20px rgba(0, 240, 118, 0.08);
}

.realtime-update-orbit::before,
.realtime-update-orbit::after {
  position: absolute;
  inset: 7px;
  content: '';
  border: 1px dashed rgba(0, 240, 118, 0.24);
  border-radius: 50%;
  animation: realtimeUpdateSpin 8s linear infinite;
}

.realtime-update-orbit::after {
  inset: -5px;
  border-color: rgba(255, 94, 54, 0.24);
  animation-direction: reverse;
  animation-duration: 12s;
}

.realtime-update-orbit-core {
  position: relative;
  z-index: 1;
  font: 700 34px/1 var(--mono);
  transform: translateY(-1px);
}

.realtime-update-orbit-dot {
  position: absolute;
  top: 5px;
  right: 7px;
  width: 8px;
  height: 8px;
  background: #ff5e36;
  border: 2px solid #122018;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255, 94, 54, 0.8);
}

.realtime-update-kicker {
  margin-bottom: 10px;
  color: var(--green);
  font: 700 10px/1.2 var(--mono);
  letter-spacing: 0.14em;
}

.realtime-update-modal h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 5vw, 30px);
  font-weight: 900;
  letter-spacing: -0.03em;
}

.realtime-update-modal p {
  max-width: 360px;
  margin: 13px auto 0;
  color: #a7b7b1;
  font-size: 14px;
  line-height: 1.8;
}

.realtime-update-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 20px auto 22px;
  color: #c4d3cd;
  font-size: 11px;
}

.realtime-update-meta code {
  max-width: 120px;
  overflow: hidden;
  color: #7ee8ad;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 10px var(--mono);
}

.realtime-update-status-dot {
  width: 7px;
  height: 7px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 240, 118, 0.8);
}

.realtime-update-confirm {
  width: 100%;
  min-height: 48px;
  padding: 0 20px;
  color: #04130c;
  font-size: 14px;
  font-weight: 900;
  background: linear-gradient(135deg, #00f076, #00c761);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0, 240, 118, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  cursor: pointer !important;
  pointer-events: auto !important;
  user-select: none;
}

.realtime-update-confirm:hover,
.realtime-update-confirm:focus-visible {
  filter: brightness(1.08);
  outline: none;
  box-shadow: 0 14px 28px rgba(0, 240, 118, 0.34);
  transform: translateY(-2px);
}

.realtime-update-confirm:disabled {
  opacity: 0.65;
  cursor: not-allowed !important;
  transform: none;
  filter: grayscale(0.5);
}

.realtime-update-dismiss {
  margin-top: 12px;
  width: 100%;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: #a1a1aa;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer !important;
  pointer-events: auto !important;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.realtime-update-dismiss:hover {
  color: #e4e4e7;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
}

/* Page interaction lockdown when update modal is active */
body.update-lockdown {
  overflow: hidden !important;
}
body.update-lockdown #root > *:not(.realtime-update-backdrop) {
  pointer-events: none !important;
  user-select: none !important;
}
body.update-lockdown .realtime-update-backdrop,
body.update-lockdown .realtime-update-backdrop * {
  pointer-events: auto !important;
}

.realtime-update-autosave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 16px auto 0;
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 10px;
  animation: realtimeUpdateLift 0.25s ease-out both;
}

.realtime-update-autosave.saving {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.25);
}

.realtime-update-autosave.saved {
  color: #00f076;
  background: rgba(0, 240, 118, 0.12);
  border: 1px solid rgba(0, 240, 118, 0.25);
}

.realtime-update-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(56, 189, 248, 0.3);
  border-top-color: #38bdf8;
  border-radius: 50%;
  animation: realtimeUpdateSpin 0.7s linear infinite;
}

@keyframes realtimeUpdateFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes realtimeUpdateLift {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes realtimeUpdateSpin { to { transform: rotate(360deg); } }

@media (max-width: 520px) {
  .realtime-update-modal { padding: 28px 22px 24px; border-radius: 20px; }
  .realtime-update-orbit { width: 68px; height: 68px; margin-bottom: 18px; }
  .realtime-update-modal p { font-size: 13px; line-height: 1.7; }
}

@media (prefers-reduced-motion: reduce) {
  .realtime-update-backdrop,
  .realtime-update-modal,
  .realtime-update-orbit::before,
  .realtime-update-orbit::after { animation: none; }
}
/* ============================================================
   SCROLL BEHAVIOR: COMPREHENSIVE TOUCH & DEVICE SCROLLING
   ============================================================ */

/* --- Horizontal Scroll Utility (all pill/chip/tab rows) --- */
.topup-type-chips,
.account-tabs,
.category-chips,
.category-tabs-home,
.filament-filter-pills,
.filament-nav {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Hide scrollbar on horizontal scroll areas but keep scrollable */
.topup-type-chips,
.account-tabs,
.category-chips,
.category-tabs-home {
  scrollbar-width: none;
}
.topup-type-chips::-webkit-scrollbar,
.account-tabs::-webkit-scrollbar,
.category-chips::-webkit-scrollbar,
.category-tabs-home::-webkit-scrollbar {
  display: none;
}

/* Account tabs: ensure horizontal scroll on all devices */
.account-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
}
.account-tabs button {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Category chips: horizontal scroll with no wrap */
.category-chips {
  flex-wrap: nowrap;
  overflow-x: auto;
}
.category-chips .chip {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Category tabs home: horizontal scroll */
.category-tabs-home {
  flex-wrap: nowrap;
  overflow-x: auto;
}
.category-tabs-home button {
  flex-shrink: 0;
  white-space: nowrap;
}

/* --- Vertical Scroll: Modals --- */
.modal-card {
  overscroll-behavior: contain;
}
.modal-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* --- Vertical Scroll: Chat containers --- */
.customer-chat-container,
.ticket-chat-messages {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

/* --- Vertical Scroll: Admin sidebar nav & page content --- */
.filament-nav {
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}
.filament-nav::-webkit-scrollbar { width: 4px; }
.filament-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 99px; }

.filament-page-content {
  overflow: visible;
}

/* --- Horizontal Scroll: Data Tables --- */
.table-responsive,
.admin-table-wrap,
.filament-card {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Table scroll on small screens: show slim scrollbar */
.table-responsive,
.admin-table-wrap {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
.table-responsive::-webkit-scrollbar,
.admin-table-wrap::-webkit-scrollbar {
  height: 4px;
}
.table-responsive::-webkit-scrollbar-thumb,
.admin-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
}

/* Filament filter pills: horizontal scroll on mobile */
.filament-filter-pills {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
}
.filament-filter-pills::-webkit-scrollbar { display: none; }
.filament-pill { flex-shrink: 0; white-space: nowrap; }

/* --- Vertical Scroll: Sessions, Ticket Lists, History --- */
.sessions-list {
  max-height: 600px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}
.history-table {
  max-height: 800px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* --- Quick Amount Row: Clean 3-column grid on mobile (Zero blowout) --- */
@media(max-width: 480px) {
  .quick-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .quick-row button {
    min-width: 0 !important;
    width: 100% !important;
    padding: 9px 4px !important;
    font-size: 13px !important;
    text-align: center !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }
}

/* --- Package Options: ensure scroll access on small screens --- */
@media(max-width: 480px) {
  .package-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
}

/* --- Prevent body scroll when modal is open (JS adds class) --- */
body.modal-open {
  overflow: hidden;
}

/* --- Game type selector grid: horizontal scroll on tiny phones --- */
@media(max-width: 480px) {
  .game-type-selector-grid {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding-bottom: 4px;
  }
  .game-type-selector-grid::-webkit-scrollbar { display: none; }
  .game-type-card-btn {
    flex-shrink: 0;
    min-width: 130px;
  }
}

/* --- Smooth scroll anchor links --- */
[id] {
  scroll-margin-top: 80px;
}

/* ============================================================
   RESPONSIVE: COMPREHENSIVE MULTI-DEVICE MOBILE UI
   ============================================================ */

/* --- Tablet (max 900px) --- */
@media(max-width: 900px) {
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .reviews-grid { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr; gap: 20px; }
  .launchpad-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hero-copy { text-align: center; align-items: center; display: flex; flex-direction: column; }
  .hero-heading { font-size: 30px; }
  .hero-desc { max-width: 100%; text-align: center; font-size: 13px; }
  .hero-actions { justify-content: center; flex-wrap: wrap; }
  .mini-trust { justify-content: center; flex-wrap: wrap; }
  .aim-section-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .aim-view-all { font-size: 13px; }
}

/* --- Mobile / Tablet (max 768px) - OverTopup Style Mobile Experience --- */
@media(max-width: 768px) {
  /* Header: Slim, sticky, clean */
  .topbar { display: none !important; }
  .site-header { position: sticky; top: 0; z-index: 90; }
  .nav-main { height: 52px; padding: 0 18px !important; }
  .logo-badge { width: 32px; height: 32px; border-radius: 8px; }
  .logo-brand { font-size: 14px; }
  .logo-tagline { display: none; }
  .logo { gap: 8px; }
  .account-info-text { display: none; }
  .header-wallet-badge { padding: 4px 8px; gap: 4px; }
  .hw-label { display: none; }
  .hw-val { font-size: 11px; }
  .hw-plus { width: 14px; height: 14px; font-size: 10px; }
  .account-link { padding: 4px; border-radius: 8px; }
  .account-dot { width: 28px; height: 28px; font-size: 10px; border-radius: 7px; }
  .login-btn { padding: 5px 12px; font-size: 11px; border-radius: 8px; }
  .user-header-group { gap: 6px !important; }
  .header-admin-pill { padding: 4px 8px !important; font-size: 11px !important; }
  .header-reseller-pill { padding: 4px 8px !important; font-size: 11px !important; }
  .header-reward-badge { padding: 4px 8px !important; font-size: 11px !important; }
  @media(max-width: 480px) {
    .header-reward-badge { display: none !important; }
    .header-admin-pill span:last-child,
    .header-reseller-pill span:last-child { display: none !important; }
    .header-admin-pill,
    .header-reseller-pill { padding: 5px 6px !important; font-size: 14px !important; border-radius: 6px !important; }
  }

  /* Site Main & Bottom Safe Space */
  .site-main,
  .main-viewport {
    padding-bottom: 80px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Container & Section: Generous whitespace, zero edge clipping */
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
  .section {
    padding: 16px 0 24px !important;
  }

  /* HERO ON MOBILE: Promotional Banner FIRST, Hide giant redundant text block (OverTopup Style) */
  .home-hero.d4-hero {
    padding: 10px 0 4px !important;
    background: transparent !important;
    border-bottom: none !important;
  }
  .hero-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  /* Hide the giant desktop hero marketing text, buttons, and trust checks on mobile */
  .hero-copy {
    display: none !important;
  }
  .hero-visual-card {
    width: 100% !important;
    order: 1 !important;
  }
  /* Promotional Banner Carousel: Sleek 16:9 ratio, no giant minimum height */
  .hero-promo-carousel {
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 14px !important;
    border: 1.5px solid rgba(0, 240, 118, 0.3) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(0, 240, 118, 0.12) !important;
  }
  .carousel-content-overlay {
    bottom: 24px !important;
    left: 14px !important;
    right: 14px !important;
  }
  .carousel-badge {
    font-size: 9.5px !important;
    padding: 2px 8px !important;
    margin-bottom: 4px !important;
  }
  .carousel-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin-bottom: 2px !important;
  }
  .carousel-sub {
    display: none !important;
  }
  .carousel-live-tag {
    bottom: 6px !important;
    left: 14px !important;
    font-size: 8.5px !important;
    padding: 2px 6px !important;
  }
  .carousel-dots {
    bottom: 6px !important;
  }
  .carousel-arrow {
    display: none !important;
  }

  /* Launchpad (4 Categories: UID, ID-PASS, Cards, Wallet) - immediately below banner */
  .launchpad-section {
    padding: 10px 0 14px !important;
    background: transparent !important;
  }
  .launchpad-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .launchpad-card {
    position: relative !important;
    padding: 24px 10px 10px 10px !important;
    border-radius: 12px !important;
    gap: 8px !important;
    align-items: center !important;
  }
  .launchpad-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
    border-radius: 9px !important;
    flex-shrink: 0 !important;
  }
  .launchpad-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .launchpad-content strong {
    font-size: 12px !important;
    display: block !important;
    white-space: normal !important;
    line-height: 1.25 !important;
  }
  .launchpad-content small {
    font-size: 9.5px !important;
    display: block !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    margin-top: 2px !important;
  }
  .launchpad-tag {
    position: absolute !important;
    font-size: 8px !important;
    padding: 2px 6px !important;
    top: 5px !important;
    right: 8px !important;
    line-height: 1.3 !important;
    border-radius: 4px !important;
    margin: 0 !important;
    z-index: 2 !important;
  }

  /* Catalog Section Head: "เติมเกมยอดนิยม" */
  .aim-section-head {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-bottom: 8px !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .aim-title {
    font-size: 16px !important;
    margin: 0 !important;
  }
  .aim-title-bar {
    width: 4px !important;
    height: 16px !important;
  }
  .aim-subtitle {
    display: none !important;
  }
  .aim-view-all {
    font-size: 11.5px !important;
    white-space: nowrap !important;
  }

  /* Game Grid: Clean 2 columns on mobile */
  .game-list, .all-games, .game-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .game-item {
    border-radius: 14px !important;
  }
  .game-cover {
    aspect-ratio: 1 / 1 !important;
  }
  .game-short-logo {
    font-size: 28px !important;
  }
  .game-meta {
    padding: 10px 10px 12px !important;
  }
  .game-meta h3 {
    font-size: 12.5px !important;
    margin-bottom: 2px !important;
  }
  .game-field-desc {
    font-size: 9.5px !important;
    margin-bottom: 6px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .game-price-row {
    padding-top: 6px !important;
  }
  .price-label {
    font-size: 9.5px !important;
  }
  .price-val {
    font-size: 13.5px !important;
  }
  .game-auto-badge {
    font-size: 8.5px !important;
    padding: 2px 6px !important;
  }
  .game-brand-watermark {
    width: 30px !important;
    height: 30px !important;
    bottom: 4px !important;
    right: 6px !important;
  }

  /* Page Head & Breadcrumbs (Clean spacing, balanced typography, zero edge clipping) */
  .page-head {
    padding: 18px 0 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .page-head-title-row {
    gap: 12px !important;
    align-items: center !important;
    margin-top: 8px !important;
  }
  .page-head-title-row img {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
  }
  .page-head h1 {
    font-size: 20px !important;
    font-weight: 800 !important;
    margin: 0 0 4px !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
  }
  .page-head p {
    font-size: 12px !important;
    color: #94a3b8 !important;
    line-height: 1.45 !important;
    margin: 4px 0 0 !important;
  }
  .breadcrumbs {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    color: #94a3b8 !important;
  }
  .breadcrumbs a, .breadcrumbs span, .breadcrumbs b {
    display: inline-block !important;
  }
  .topup-category-banner { padding: 8px 10px; font-size: 11.5px; gap: 8px; margin-bottom: 12px; border-radius: 10px; }
  .topup-category-banner strong { font-size: 12px; }
  .topup-category-banner p { font-size: 10.5px; margin-top: 2px; }
  .banner-icon { font-size: 16px; }
  .topup-pill { padding: 5px 12px; font-size: 11.5px; }
  .topup-pill-badge { font-size: 8px; }

  /* Account Page (Mobile Responsive, Compact Profile & Zero Horizontal Overflow) */
  .account-layout {
    grid-template-columns: 100% !important;
    gap: 14px !important;
    padding-bottom: 110px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  .profile-card {
    padding: 14px !important;
    border-radius: 14px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .profile-header-meta {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .profile-avatar {
    width: 48px !important;
    height: 48px !important;
    font-size: 17px !important;
    margin-bottom: 0 !important;
    flex-shrink: 0 !important;
  }
  .profile-identity-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    min-width: 0 !important;
    flex: 1 !important;
  }
  .profile-card h2 {
    font-size: 15px !important;
    margin: 0 0 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }
  .profile-badge-line {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 0 !important;
    width: 100% !important;
  }
  .profile-role-pill {
    font-size: 9.5px !important;
    padding: 2px 8px !important;
    margin: 0 !important;
  }
  .profile-uid-chip {
    display: inline-flex !important;
    align-items: center !important;
    padding: 2px 7px !important;
    font-size: 9.5px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 6px !important;
    gap: 5px !important;
  }
  .profile-uid-chip code {
    font-size: 9.5px !important;
  }
  .copy-btn-tiny {
    font-size: 8.5px !important;
    padding: 1px 5px !important;
    border-radius: 4px !important;
  }
  .profile-info-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 2px !important;
  }
  .profile-phone-box {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .profile-phone-box small {
    font-size: 10px !important;
    margin-bottom: 0 !important;
    color: #94a3b8 !important;
  }
  .phone-verified-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .phone-verified-row strong {
    font-size: 12px !important;
    color: #fff !important;
  }
  .verified-check {
    font-size: 9px !important;
    padding: 1px 5px !important;
    border-radius: 4px !important;
  }
  .profile-stats-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .profile-stats-row .profile-stat {
    padding: 7px 10px !important;
    border-radius: 8px !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.025) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    box-sizing: border-box !important;
  }
  .profile-stat small {
    font-size: 10px !important;
    color: #94a3b8 !important;
  }
  .profile-stat strong {
    font-size: 12.5px !important;
    color: var(--green) !important;
  }
  .profile-actions-stack {
    margin-top: 4px !important;
    gap: 6px !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .profile-actions-stack .btn-topup-dcoin {
    padding: 9px 12px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .profile-secondary-actions {
    display: grid !important;
    grid-template-columns: 1.05fr 1.05fr 0.9fr !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .profile-secondary-actions .btn {
    font-size: 10px !important;
    padding: 7px 4px !important;
    border-radius: 8px !important;
    text-align: center !important;
    white-space: nowrap !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  .account-main {
    padding: 14px 12px !important;
    border-radius: 14px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  .account-tabs {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
    padding: 4px !important;
    margin-bottom: 12px !important;
  }
  .account-tabs::-webkit-scrollbar {
    display: none !important;
  }
  .account-tabs button {
    font-size: 11px !important;
    padding: 7px 10px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
  }
  .history-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .hr-left-wrap {
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 10px !important;
  }
  .hr-icon-badge {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
  }
  .hr-left {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .hr-left b {
    font-size: 12.5px !important;
    word-break: break-word !important;
  }
  .hr-left small {
    font-size: 10px !important;
    word-break: break-all !important;
  }
  .hr-right {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-top: 1px dashed rgba(255, 255, 255, 0.08) !important;
    padding-top: 8px !important;
    margin-top: 2px !important;
    width: 100% !important;
  }
  .hr-right strong {
    font-size: 13.5px !important;
  }
  .session-card {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .session-title-row {
    flex-direction: column !important;
    gap: 4px !important;
    align-items: flex-start !important;
  }
  .session-meta {
    font-size: 10.5px !important;
    word-break: break-all !important;
  }

  /* All Page Layouts: 100% width, Zero blowout, Clean vertical flow */
  .wallet-layout,
  .help-layout,
  .detail-layout,
  .jcr-checkout-layout,
  .reseller-apply-layout {
    grid-template-columns: 100% !important;
    gap: 16px !important;
    padding-bottom: 110px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* All Cards: Consistent internal padding, rounded corners, zero blowout */
  .service-card,
  .order-card,
  .contact-card,
  .wallet-checkout-card,
  .jcr-cart-card,
  .app-status-card,
  .app-form-card,
  .checkout-summary-card,
  .detail-sidebar {
    padding: 16px 14px !important;
    border-radius: 14px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Wallet Page */
  .wallet-form-steps {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 14px !important;
  }
  .quick-amount-label {
    font-size: 12px !important;
    margin: 12px 0 8px !important;
  }
  .quick-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .quick-row button {
    min-width: 0 !important;
    width: 100% !important;
    padding: 10px 4px !important;
    font-size: 13px !important;
    text-align: center !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }
  .points-bonus-tip {
    font-size: 11.5px !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    margin-top: 10px !important;
  }

  /* Help Page */
  .help-sidebar {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Detail Page (Game Page) */
  .sticky-sidebar {
    position: static !important;
    margin-top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .package-options {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .pkg-card {
    padding: 10px 8px !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
  }
  .pkg-amount { font-size: 13.5px !important; }
  .pkg-detail-line { font-size: 11.5px !important; line-height: 1.4 !important; }
  .pkg-price { font-size: 14px !important; }
  .game-type-selector-grid {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 8px !important;
    padding-bottom: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .game-type-card-btn {
    flex-shrink: 0 !important;
    min-width: 130px !important;
  }
  .quantity-selector-box {
    padding: 8px 12px !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .qty-btn { width: 34px !important; height: 34px !important; font-size: 16px !important; }
  .qty-input { width: 44px !important; height: 34px !important; font-size: 14px !important; }
  .pm-card-body {
    padding: 12px 14px !important;
    gap: 12px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  /* Checkout Page (JCR-Shop Mobile Optimization) */
  .jcr-cart-col,
  .jcr-pay-col {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 14px !important;
  }
  .jcr-cart-pkg-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .jcr-cart-price-col {
    align-self: flex-end !important;
  }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr; gap: 20px; padding: 24px 0; }
  .footer-brand p { font-size: 11.5px; }
  .footer-bottom { flex-direction: column; gap: 6px; text-align: center; font-size: 9.5px; }

  /* Modals on Mobile */
  .modal-backdrop {
    z-index: 1050 !important;
    padding: 12px !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px) !important;
  }
  .modal-card { width: calc(100% - 16px) !important; max-width: 100% !important; border-radius: 14px !important; max-height: calc(100vh - 40px) !important; }
  .modal-card.modal-md { max-height: calc(100vh - 40px) !important; overflow-y: auto !important; }
  .modal-header h3 { font-size: 14.5px !important; }
  .modal-body { padding: 14px !important; }
  .modal-footer { padding: 12px !important; }

  /* Admin Page */
  .admin-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .admin-tabs::-webkit-scrollbar { display: none; }
  .admin-tabs button { flex-shrink: 0; font-size: 11px; white-space: nowrap; }
  .admin-stat-card { padding: 12px 10px; }
  .admin-stat-card h4 { font-size: 10px; }
  .admin-stat-val { font-size: 20px; }
  .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin-table { min-width: 700px; font-size: 11.5px; }
  .admin-table th, .admin-table td { padding: 8px 8px; }

  /* Checkout Summary */
  .checkout-summary-card { padding: 14px; border-radius: 12px; }
}

/* --- Mobile Specific Additions (max 650px) --- */
@media(max-width: 650px) {
  .mobile-bottom-nav { display: flex !important; }
  .main-viewport { padding-bottom: 76px !important; }
  .site-footer { margin-bottom: 64px !important; }
  .toast { bottom: 76px !important; }
  .main-menu { display: none !important; }

  /* Catalog Tools */
  .catalog-tools { flex-direction: column; align-items: stretch; gap: 8px; }
  .search-box-wrap { max-width: 100%; }
  .catalog-tools-right { justify-content: space-between; width: 100%; }

  .service-card { padding: 12px 10px; border-radius: 12px; }
  .card-title h2 { font-size: 13.5px; }
}

/* --- Small Phone (max 480px) --- */
@media(max-width: 480px) {
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
  .nav-main {
    height: 52px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .logo-badge { width: 30px; height: 30px; border-radius: 7px; }
  .logo-brand { font-size: 13.5px; }
  .header-actions { gap: 8px; }

  .launchpad-card {
    position: relative !important;
    padding: 22px 8px 8px 8px !important;
    gap: 7px !important;
  }
  .launchpad-icon { width: 32px !important; height: 32px !important; font-size: 16px !important; }
  .launchpad-content strong { font-size: 11px !important; white-space: normal !important; line-height: 1.2 !important; }
  .launchpad-content small { font-size: 9px !important; white-space: normal !important; line-height: 1.2 !important; }
  .launchpad-tag { top: 4px !important; right: 6px !important; font-size: 7.5px !important; padding: 1.5px 5px !important; }

  .aim-title { font-size: 15px !important; }

  .profile-avatar { width: 44px !important; height: 44px !important; font-size: 15px !important; }
  .profile-card h2 { font-size: 14px !important; }
  .profile-secondary-actions {
    grid-template-columns: 1fr 1fr !important;
  }
  .profile-secondary-actions .logout-btn {
    grid-column: span 2 !important;
  }

  .mobile-bottom-nav { height: 56px; }
  .mob-icon { width: 22px; height: 22px; }
  .mob-label { font-size: 9px; }
}
/* ============================================================
   TICKET 001: Phone OTP Auth, Member Roles, and Session Management
   ============================================================ */

/* Profile Role Pills & Phone Verified */
.profile-role-wrap {
  margin: 6px 0 10px;
}
.profile-role-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.profile-role-pill.retail {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}
.profile-role-pill.reseller {
  background: rgba(168, 85, 247, 0.16);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.4);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.15);
}
.profile-phone-box {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 8px 12px;
  margin: 10px 0;
  text-align: left;
}
.profile-phone-box small {
  color: var(--text-muted);
  font-size: 0.75rem;
  display: block;
  margin-bottom: 2px;
}
.phone-verified-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.phone-verified-row strong {
  font-size: 0.95rem;
  color: var(--text);
  font-family: var(--font-mono, monospace);
}
.verified-check {
  font-size: 0.72rem;
  font-weight: 700;
  color: #34d399;
  background: rgba(16, 185, 129, 0.12);
  padding: 2px 8px;
  border-radius: 999px;
}
.switch-role-btn {
  font-size: 0.8rem;
  border-color: rgba(168, 85, 247, 0.3) !important;
  color: #c084fc !important;
}
.switch-role-btn:hover {
  background: rgba(168, 85, 247, 0.1) !important;
}

/* Trusted Devices & Sessions Tab */
.sessions-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.session-info-callout {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 12px;
  align-items: flex-start;
}
.session-info-callout .info-icon {
  font-size: 20px;
  line-height: 1;
}
.session-info-callout strong {
  display: block;
  font-size: 0.9rem;
  color: #93c5fd;
  margin-bottom: 4px;
}
.session-info-callout p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.sessions-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.session-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  transition: all 0.2s ease;
}
.session-card.current {
  border-color: rgba(52, 211, 153, 0.4);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(16, 185, 129, 0.05));
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.08);
}
.session-icon {
  font-size: 26px;
  line-height: 1;
  padding: 10px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.session-details {
  flex: 1;
}
.session-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.session-title-row h4 {
  margin: 0;
  font-size: 0.98rem;
  color: var(--text);
}
.current-device-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: #34d399;
  background: rgba(16, 185, 129, 0.14);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.session-meta {
  margin: 0 0 4px;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.session-meta code {
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.8rem;
}
.session-time {
  font-size: 0.78rem;
  color: #94a3b8;
}
.btn-revoke-tiny {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.25);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.btn-revoke-tiny:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
}
.revoke-all-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.revoke-all-btn {
  color: #f87171 !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  font-size: 0.85rem;
}
.revoke-all-btn:hover {
  background: rgba(239, 68, 68, 0.1) !important;
}

/* Phone OTP Auth Form Container & Card */
.auth-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 16px 70px;
}
.auth-card {
  width: 100%;
  max-width: 440px;
  background: #14141b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 240, 118, 0.08);
}
.auth-logo-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #00f076, #00c761);
  color: #000;
  display: grid;
  place-items: center;
  font: 900 18px var(--mono);
  box-shadow: 0 0 16px rgba(0, 240, 118, 0.35);
  flex-shrink: 0;
}
.auth-form-body {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: #64748b;
  font-size: 11px;
  margin: 6px 0;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.auth-divider span {
  padding: 0 10px;
}

/* Phone OTP Auth Form */
.phone-input-group {
  display: flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.phone-input-group:focus-within {
  border-color: var(--primary, #38bdf8);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}
.country-prefix {
  padding: 0 14px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  height: 46px;
  user-select: none;
}
.phone-input-group input {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  flex: 1;
}
.demo-login-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quick-demo-btn.reseller-demo {
  border-color: rgba(168, 85, 247, 0.4);
  color: #c084fc;
}
.quick-demo-btn.reseller-demo:hover {
  background: rgba(168, 85, 247, 0.12);
}

/* OTP Screen Elements */
.otp-sent-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.2);
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 12px;
}
.otp-sent-banner small {
  display: block;
  font-size: 0.76rem;
  color: var(--text-muted);
}
.otp-sent-banner strong {
  font-size: 0.98rem;
  color: #38bdf8;
  font-family: var(--font-mono, monospace);
}
.btn-link-edit {
  background: none;
  border: none;
  color: var(--primary, #38bdf8);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  padding: 4px;
}
.otp-ref-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.otp-ref-row strong {
  color: var(--text);
}
.otp-digit-field {
  font-family: var(--font-mono, monospace) !important;
  font-size: 1.4rem !important;
  letter-spacing: 0.35em !important;
  text-align: center !important;
  font-weight: 700 !important;
  color: #38bdf8 !important;
}
.demo-hint-box {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  color: #fbbf24;
  margin: 10px 0 14px;
}
.demo-hint-box code {
  background: rgba(0, 0, 0, 0.25);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: bold;
}
.onboarding-toggle {
  margin: 10px 0;
}
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--ink, #1f2925) !important;
  cursor: pointer;
  font-weight: 500;
}
.checkbox-label span {
  color: var(--ink, #1f2925) !important;
}
.onboarding-fields {
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.resend-otp-wrap {
  text-align: center;
  margin-top: 12px;
}
.btn-link {
  background: none;
  border: none;
  color: var(--primary, #38bdf8);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-link:hover {
  text-decoration: underline;
}

/* Security Alert Box in Modal */
.security-alert-box {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 10px;
  margin-bottom: 16px;
  align-items: flex-start;
}
.security-alert-box .sec-icon {
  font-size: 20px;
  line-height: 1;
}
.security-alert-box strong {
  display: block;
  font-size: 0.88rem;
  color: #fbbf24;
  margin-bottom: 2px;
}
.security-alert-box p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.35;
}
.step-badge-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
}
.step-num.active {
  background: var(--primary, #38bdf8);
  color: #0f172a;
}
.step-num.completed {
  background: #34d399;
  color: #0f172a;
}

/* ============================================================
   TICKET 002: Reseller Wholesale Package Pricing & Saved Recipients
   ============================================================ */

/* Reseller Active Notice Banner */
.reseller-active-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.16), rgba(99, 102, 241, 0.12));
  border: 1px solid rgba(168, 85, 247, 0.45);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.12);
  margin-bottom: 20px;
}
.reseller-active-banner .banner-icon {
  font-size: 28px;
  line-height: 1;
}
.reseller-active-banner strong {
  display: block;
  color: #c084fc;
  font-size: 0.96rem;
  margin-bottom: 2px;
}
.reseller-active-banner p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

/* Package Card Reseller Overrides */
.pkg-card.reseller-card {
  border-color: rgba(168, 85, 247, 0.25);
}
.pkg-card.reseller-card.selected {
  border-color: #c084fc;
  background: linear-gradient(145deg, rgba(168, 85, 247, 0.15), rgba(15, 23, 42, 0.9));
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.25);
}
.pkg-reseller-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.35);
  padding: 2px 8px;
  border-radius: 999px;
  margin-bottom: 4px;
}
.pkg-pricing-split {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}
.retail-strike {
  font-size: 0.8rem;
  color: #94a3b8;
  text-decoration: line-through;
}
.reseller-accent {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: #c084fc !important;
}

/* Summary Card Reseller Enhancements */
.reseller-benefit-line {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(168, 85, 247, 0.25);
}
.text-reseller {
  color: #c084fc !important;
  font-weight: 700;
}
.reseller-glow {
  color: #c084fc !important;
  text-shadow: 0 0 12px rgba(168, 85, 247, 0.4);
}
.strike-muted {
  text-decoration: line-through;
  color: var(--text-muted) !important;
  font-size: 0.9rem;
}

/* Quick Saved Recipients Strip */
.quick-recipients-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--green-soft, #e9f3ee);
  border: 1px solid #cce0d6;
  border-radius: 10px;
  margin-bottom: 16px;
}
.qr-label {
  font-size: 0.78rem;
  color: var(--green, #16634a);
  font-weight: 700;
}
.qr-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.qr-chip-pill {
  background: #fff;
  border: 1px solid #cce0d6;
  color: var(--ink, #1f2925);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
}
.qr-chip-pill:hover {
  background: #dbeef2;
  border-color: var(--green, #16634a);
  color: var(--green, #16634a);
}
.qr-chip-pill.active {
  background: var(--green, #16634a);
  border-color: var(--green, #16634a);
  color: #fff;
  font-weight: 700;
}
.qr-chip-more {
  background: none;
  border: none;
  color: var(--green, #16634a);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
}
.qr-chip-more:hover {
  text-decoration: underline;
}

/* Header Action Buttons */
.field-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.saved-rec-open-btn {
  background: var(--green-soft, #e9f3ee);
  border: 1px solid #b8d9cb;
  color: var(--green, #16634a);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}
.saved-rec-open-btn:hover {
  background: #d4ebd0;
}

/* Save Recipient Checkbox & Nickname Input */
.save-recipient-section {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sub-rec-input {
  max-width: 340px;
  font-size: 0.88rem !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

/* Order Summary Promo Code */
.order-promo-section {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 8px;
}
.order-promo-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  margin-bottom: 6px;
}
.order-promo-input-row {
  display: flex;
  gap: 6px;
}
.order-promo-input-row input {
  flex: 1;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  outline: none;
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
  font-family: inherit;
  transition: border-color 0.2s;
}
.order-promo-input-row input:focus {
  border-color: #00f076;
  background: rgba(0, 240, 118, 0.03);
}
.order-promo-input-row button {
  background: #00f076;
  color: #000000;
  border: none;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.order-promo-input-row button:hover {
  background: #00d968;
  box-shadow: 0 0 12px rgba(0, 240, 118, 0.35);
}
.order-promo-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--green-soft);
  border: 1px solid #cce0d6;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 11px;
  color: var(--green-dark);
  font-weight: 600;
}
.order-promo-applied button {
  background: none;
  border: none;
  color: #dc2626;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.order-promo-tip {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 5px;
}
.order-promo-tip code {
  background: var(--green-soft);
  color: var(--green);
  padding: 1px 4px;
  border-radius: 4px;
  font-weight: 600;
}

/* Customer Reference Input */
.customer-ref-field {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.customer-ref-field .field-label {
  color: #c084fc;
  font-size: 0.88rem;
  font-weight: 600;
}

/* Saved Recipient Modal Elements */
.recipient-search-wrap {
  margin-bottom: 12px;
}
.recipient-consent-box {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(59, 130, 246, 0.25);
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 14px;
}
.recipient-consent-box span {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.recipient-consent-box b {
  color: #93c5fd;
}
.recipient-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
}
.recipient-item-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  transition: all 0.2s;
}
.recipient-item-card:hover {
  border-color: rgba(56, 189, 248, 0.4);
  background: rgba(15, 23, 42, 0.95);
}
.rec-info {
  flex: 1;
  cursor: pointer;
}
.rec-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.rec-title-row strong {
  font-size: 0.94rem;
  color: var(--text);
}
.rec-ign-badge {
  font-size: 0.72rem;
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid rgba(52, 211, 153, 0.3);
}
.rec-id-row {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.rec-id-row code {
  color: #38bdf8;
  font-family: var(--font-mono, monospace);
}
.rec-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rec-pick-btn {
  font-size: 0.8rem !important;
  padding: 6px 14px !important;
}
.rec-del-btn {
  font-size: 0.9rem !important;
  padding: 6px 10px !important;
  opacity: 0.7;
}
.rec-del-btn:hover {
  opacity: 1;
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}
.empty-recipient-box {
  text-align: center;
  padding: 30px 16px;
}
.empty-rec-icon {
  font-size: 36px;
  line-height: 1;
  display: block;
  margin-bottom: 10px;
  opacity: 0.6;
}
.empty-recipient-box h4 {
  margin: 0 0 6px;
  font-size: 0.98rem;
  color: var(--text);
}

/* ============================================================
   TICKET 003: Reseller Application Submission & Document Upload Flow
   ============================================================ */

.reseller-onboarding-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}

/* ==========================================================================
   Minimal Reseller Registration (AimUp Clean Minimalist Style)
   ========================================================================== */
.reseller-min-container {
  max-width: 680px;
  margin: 32px auto 60px;
  padding: 0 16px;
}
.reseller-min-header {
  margin-bottom: 22px;
}
.reseller-min-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #00f076;
  background: rgba(0, 240, 118, 0.12);
  border: 1px solid rgba(0, 240, 118, 0.28);
  padding: 3px 10px;
  border-radius: 6px;
  letter-spacing: 0.3px;
}
.reseller-demo-link {
  background: none;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  color: #94a3b8;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s;
}
.reseller-demo-link:hover {
  border-color: #00f076;
  color: #00f076;
  background: rgba(0, 240, 118, 0.08);
}
.reseller-min-title {
  font-size: 26px;
  font-weight: 800;
  color: #ffffff;
  margin: 10px 0 6px;
  letter-spacing: -0.3px;
}
.reseller-min-sub {
  font-size: 13px;
  color: #94a3b8;
  margin: 0;
  line-height: 1.5;
}
.reseller-min-sub a {
  color: #00f076;
  text-decoration: underline;
  cursor: pointer;
}
.reseller-min-card {
  background: #14141b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 24px 26px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
}
@media (max-width: 480px) {
  .reseller-min-container {
    padding: 0 12px;
    margin: 16px auto 36px;
  }
  .reseller-min-card {
    padding: 16px 14px;
    border-radius: 12px;
  }
  .reseller-min-title {
    font-size: 20px;
  }
}
.reseller-field-group {
  margin-top: 16px;
}
.reseller-field-group:first-child {
  margin-top: 0;
}
.reseller-field-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #cbd5e1;
  margin-bottom: 6px;
}
.reseller-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 6px;
}
.reseller-type-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: left;
}
.reseller-type-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.reseller-type-btn.active {
  border-color: #00f076;
  background: rgba(0, 240, 118, 0.08);
  color: #ffffff;
  box-shadow: 0 0 14px rgba(0, 240, 118, 0.2);
}
.type-radio-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.reseller-type-btn.active .type-radio-dot {
  border-color: #00f076;
}
.type-radio-dot-inner {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00f076;
  display: none;
}
.reseller-type-btn.active .type-radio-dot-inner {
  display: block;
}

.reseller-min-input {
  width: 100%;
  background: #1c1d27;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  padding: 10px 14px;
  color: #ffffff;
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.reseller-min-input:focus {
  border-color: #00f076;
  box-shadow: 0 0 0 2px rgba(0, 240, 118, 0.2);
}
.reseller-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.reseller-grid-3 {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 12px;
}

.reseller-docs-box {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 16px;
}
.docs-box-title {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  margin: 0 0 10px;
}
.docs-file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}
.docs-choose-btn {
  padding: 7px 16px;
  background: #272834;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
}
.docs-choose-btn:hover {
  background: #323344;
  border-color: rgba(255, 255, 255, 0.25);
}
.docs-file-name {
  font-size: 12px;
  color: #64748b;
  word-break: break-all;
}
.docs-file-name.selected {
  color: #00f076;
  font-weight: 600;
}

.reseller-min-submit-btn {
  width: 100%;
  margin-top: 22px;
  padding: 13px 20px;
  background: linear-gradient(135deg, #00f076 0%, #00c761 100%);
  border: none;
  border-radius: 8px;
  color: #000000;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(0, 240, 118, 0.35);
}
.reseller-min-submit-btn:hover:not(:disabled) {
  background: #00ff7f;
  box-shadow: 0 6px 24px rgba(0, 240, 118, 0.55);
  transform: translateY(-1px);
}
.reseller-min-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.reseller-min-footer-note {
  font-size: 11.5px;
  color: #64748b;
  text-align: center;
  margin: 14px 0 0;
  line-height: 1.5;
}

/* Minimal Status View */
.app-status-card {
  background: #14141b;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
}
.app-status-card.status-submitted {
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.1);
}
.app-status-card.status-approved {
  border-color: rgba(0, 240, 118, 0.45);
  box-shadow: 0 0 20px rgba(0, 240, 118, 0.1);
}
.app-status-card.status-info_required {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.1);
}
.app-status-card.status-rejected {
  border-color: rgba(239, 68, 68, 0.45);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.1);
}
.status-badge-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.status-badge-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: #ffffff;
}
.status-detail-body p {
  color: #94a3b8;
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0 0 16px;
}
.app-summary-table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  background: rgba(255, 255, 255, 0.04);
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 16px;
}
.app-summary-table span {
  color: #94a3b8;
  font-size: 0.8rem;
  display: block;
}
.app-summary-table b {
  color: #ffffff;
  font-size: 0.9rem;
}
.approved-actions {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}
.action-required-box blockquote,
.rejected-box blockquote {
  margin: 8px 0 14px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border-left: 3px solid #fbbf24;
  color: #fbbf24;
  font-size: 0.9rem;
  border-radius: 0 8px 8px 0;
}
.rejected-box blockquote {
  border-left-color: #f87171;
  color: #f87171;
}

/* Demo Simulator Bar */
.demo-simulator-bar {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}
.sim-label {
  display: block;
  font-size: 0.78rem;
  color: #fbbf24;
  font-weight: 700;
  margin-bottom: 8px;
}
.sim-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.btn-sim {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s;
}
.btn-sim.approve {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.35);
}
.btn-sim.approve:hover { background: rgba(16, 185, 129, 0.25); }
.btn-sim.info {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.35);
}
.btn-sim.info:hover { background: rgba(59, 130, 246, 0.25); }
.btn-sim.reject {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.35);
}
.btn-sim.reject:hover { background: rgba(239, 68, 68, 0.25); }
.btn-sim.reset {
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}
.btn-sim.reset:hover { background: rgba(255, 255, 255, 0.15); }

@media(max-width: 600px) {
  .reseller-type-grid,
  .reseller-grid-2,
  .reseller-grid-3,
  .app-summary-table {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   TICKET 004: Storefront Reseller Report & Order History Export
   ============================================================ */

.reseller-report-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.report-notice-callout {
  display: flex;
  gap: 14px;
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 12px;
  padding: 14px 18px;
  align-items: flex-start;
}
.notice-icon {
  font-size: 22px;
  line-height: 1;
}
.report-notice-callout strong {
  display: block;
  font-size: 0.92rem;
  color: #c084fc;
  margin-bottom: 2px;
}
.report-notice-callout p {
  margin: 0;
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Stats Grid */
.report-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.report-stat-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.report-stat-card.highlight {
  border-color: rgba(52, 211, 153, 0.3);
  background: rgba(16, 185, 129, 0.06);
}
.report-stat-card small {
  font-size: 0.76rem;
  color: var(--text-muted);
}
.report-stat-card strong {
  font-size: 1.35rem;
  color: var(--text);
  line-height: 1.2;
}
.report-stat-card .stat-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.text-savings {
  color: #34d399 !important;
}
.text-reseller {
  color: #c084fc !important;
}

/* Toolbar */
.report-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 280px;
}
.search-input-wrap {
  position: relative;
  flex: 1;
}
.clear-search-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.85rem;
}
.clear-search-btn:hover {
  color: var(--text);
}
.toolbar-select {
  width: auto;
  min-width: 170px;
}
.toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.toolbar-btn {
  font-size: 0.82rem !important;
  padding: 8px 14px !important;
  white-space: nowrap;
}
.export-csv-btn {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border: none !important;
  color: #fff !important;
}
.export-csv-btn:hover {
  filter: brightness(1.1);
}

/* Table Card */
.report-table-card {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
}
.table-responsive {
  width: 100%;
  overflow-x: auto;
}
.reseller-data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.84rem;
}
.reseller-data-table th {
  background: rgba(255, 255, 255, 0.03);
  padding: 12px 14px;
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}
.reseller-data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: middle;
}
.table-row-clickable {
  cursor: pointer;
  transition: background 0.15s;
}
.table-row-clickable:hover {
  background: rgba(168, 85, 247, 0.07);
}
.col-date {
  color: var(--text-muted);
  white-space: nowrap;
}
.col-id code {
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.78rem;
  color: #93c5fd;
}
.col-custref {
  white-space: nowrap;
}
.custref-badge {
  display: inline-block;
  background: rgba(168, 85, 247, 0.18);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #d8b4fe;
  font-weight: 600;
  font-size: 0.76rem;
  padding: 2px 8px;
  border-radius: 6px;
}
.col-game b {
  display: block;
  color: var(--text);
}
.col-game small {
  color: var(--text-muted);
  font-size: 0.74rem;
}
.col-player {
  white-space: nowrap;
}
.player-id-text {
  display: block;
  font-family: monospace;
  font-size: 0.82rem;
  color: var(--text);
}
.player-ign-sub {
  display: block;
  font-size: 0.74rem;
  color: #38bdf8;
}
.col-amount strong {
  display: block;
  color: var(--text);
  font-size: 0.95rem;
}
.saving-tag {
  display: block;
  font-size: 0.72rem;
  color: #34d399;
  font-weight: 600;
}
.col-payment {
  color: var(--text-muted);
  font-size: 0.8rem;
}
.col-status {
  white-space: nowrap;
}
.empty-report-box {
  text-align: center;
  padding: 40px 20px;
}
.empty-report-box span {
  font-size: 36px;
  display: block;
  margin-bottom: 8px;
  opacity: 0.6;
}
.empty-report-box h4 {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 1rem;
}
.empty-report-box p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.84rem;
}

.reseller-report-page-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media(max-width: 900px) {
  .report-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .report-toolbar { flex-direction: column; align-items: stretch; }
  .toolbar-left { flex-direction: column; }
  .toolbar-select { width: 100%; }
}

/* ============================================================
   TICKET 005: Admin Workspace & Reseller Verification Flow
   ============================================================ */

.topbar-admin-link {
  color: #fbbf24 !important;
  font-weight: 700 !important;
}

.admin-workspace-layout {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Filament Topbar Header */
.admin-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px 24px;
  border-radius: 16px;
  flex-wrap: wrap;
  gap: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.admin-brand-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.admin-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #0f172a;
  font-weight: 900;
  font-size: 1.2rem;
  letter-spacing: -0.05em;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.35);
}
.admin-title {
  margin: 0;
  font-size: 1.3rem;
  color: var(--text);
  letter-spacing: 0.03em;
}
.admin-sub {
  color: #f59e0b;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.admin-staff-strip {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.staff-profile-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.staff-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #3b82f6;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
}
.staff-meta b {
  display: block;
  font-size: 0.84rem;
  color: var(--text);
}
.staff-role-pill {
  display: inline-block;
  font-size: 0.68rem;
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
}
.role-switcher-dropdown-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.role-switcher-dropdown-wrap small {
  color: var(--text-muted);
  font-size: 0.76rem;
  white-space: nowrap;
}
.role-select {
  background: #1e293b;
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  cursor: pointer;
}

/* Nav Tabs */
.admin-nav-tabs {
  display: flex;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 10px;
  overflow-x: auto;
}
.admin-nav-tab {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.admin-nav-tab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}
.admin-nav-tab.active {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

/* Content Card */
.admin-content-card {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 24px;
}
.admin-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.filter-pill-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.filter-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.2s;
}
.filter-pill:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
}
.filter-pill.active {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
  font-weight: 700;
}
.admin-stats-summary {
  font-size: 0.82rem;
  color: var(--text-muted);
}
.admin-stats-summary b {
  color: #fbbf24;
}

/* Table */
.admin-data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.85rem;
}
.admin-data-table th {
  background: rgba(255, 255, 255, 0.03);
  padding: 12px 14px;
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}
.admin-data-table td {
  padding: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: middle;
}
.badge-sub {
  display: inline-block;
  font-size: 0.74rem;
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 8px;
  border-radius: 6px;
  color: var(--text);
}
.link-channel {
  color: #38bdf8;
  font-size: 0.8rem;
}
.btn-inspect {
  font-size: 0.8rem !important;
  padding: 6px 12px !important;
  white-space: nowrap;
}

/* Modal Verification Inspection */
.admin-verify-modal {
  max-width: 820px !important;
}
.admin-modal-tag-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.badge-mono {
  font-family: monospace;
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.8rem;
  color: #93c5fd;
}
.admin-verify-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-height: 75vh;
  overflow-y: auto;
  padding: 10px 0;
}
.admin-card-section {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 18px;
}
.section-label {
  margin: 0 0 14px;
  font-size: 0.95rem;
  color: #fbbf24;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.verify-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.verify-field small {
  display: block;
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.verify-field strong {
  display: block;
  font-size: 0.92rem;
  color: var(--text);
}
.pii-reveal-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pii-reveal-row code {
  font-size: 0.92rem;
  background: rgba(0, 0, 0, 0.3);
  padding: 4px 8px;
  border-radius: 6px;
  color: #38bdf8;
  letter-spacing: 0.04em;
}
.btn-unmask {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fbbf24;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-unmask:hover {
  background: rgba(251, 191, 36, 0.15);
  border-color: #fbbf24;
}
.btn-unmask.unmasked {
  color: var(--text-muted);
}
.pii-hint {
  display: block;
  font-size: 0.72rem;
  color: #94a3b8;
  margin-top: 4px;
}
.sales-channel-link {
  color: #38bdf8;
  font-size: 0.85rem;
  word-break: break-all;
}
.vol-pill {
  display: inline-block;
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
}
.bank-verified-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.match-tag {
  display: inline-block;
  font-size: 0.74rem;
  color: #34d399;
  font-weight: 700;
}

/* Documents */
.doc-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.doc-section-head .section-label {
  margin: 0;
}
.retention-tag {
  font-size: 0.74rem;
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 600;
}
.docs-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.doc-preview-card {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.doc-type-icon {
  font-size: 28px;
}
.doc-meta b {
  display: block;
  font-size: 0.85rem;
  color: var(--text);
}
.doc-meta small {
  display: block;
  font-size: 0.74rem;
  color: var(--text-muted);
}
.doc-status-valid {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.72rem;
  color: #34d399;
  font-weight: 600;
}

/* Checklist */
.checklist-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.84rem;
  color: var(--text);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.02);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.checklist-item input {
  margin-top: 3px;
}

/* Decision Section */
.decision-section {
  border-color: rgba(245, 158, 11, 0.25);
  background: rgba(245, 158, 11, 0.03);
}
.decision-buttons-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.btn-success-admin {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #fff !important;
  border: none !important;
  padding: 10px 18px !important;
  font-weight: 700 !important;
}
.btn-warning-admin {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  padding: 10px 18px !important;
  font-weight: 700 !important;
}
.btn-warning-admin:hover {
  background: rgba(245, 158, 11, 0.25) !important;
}
.btn-danger-admin {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  padding: 10px 18px !important;
  font-weight: 700 !important;
}
.btn-danger-admin:hover {
  background: rgba(239, 68, 68, 0.25) !important;
}

.action-subform {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.action-subform h5 {
  margin: 0;
  font-size: 0.95rem;
}
.reject-subform h5 { color: #f87171; }
.info-subform h5 { color: #60a5fa; }
.subform-actions {
  display: flex;
  gap: 10px;
}
.btn-danger {
  background: #ef4444;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}

/* Placeholder */
.placeholder-info-box {
  text-align: center;
  padding: 40px 20px;
}
.placeholder-info-box .icon {
  font-size: 40px;
  display: block;
  margin-bottom: 12px;
}
.placeholder-info-box h3 {
  margin: 0 0 8px;
  color: var(--text);
}
.placeholder-info-box p {
  margin: 0 0 12px;
  color: var(--text-muted);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

/* Audit Logs */
.audit-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.audit-header-row h4 {
  margin: 0;
  font-size: 1rem;
  color: var(--text);
}
.audit-table td {
  font-size: 0.82rem;
}
.log-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
}
.log-badge.unmask_pii {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}
.log-badge.approve_reseller {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}
.log-badge.request_more_info {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}
.log-badge.reject_application {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}
.log-badge.four_eyes_approved {
  background: rgba(16, 185, 129, 0.25);
  color: #34d399;
}
.log-badge.four_eyes_rejected {
  background: rgba(239, 68, 68, 0.25);
  color: #f87171;
}
.log-badge.freeze_wallet {
  background: rgba(56, 189, 248, 0.25);
  color: #38bdf8;
}
.log-badge.unfreeze_wallet {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}
.log-badge.ban_account {
  background: rgba(239, 68, 68, 0.25);
  color: #ef4444;
}
.log-badge.unban_account {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}
.log-badge.revoke_reseller {
  background: rgba(245, 158, 11, 0.25);
  color: #fbbf24;
}

/* 4-Eyes Principle Specific Styling (Ticket 006) */
.four-eyes-header-banner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 24px;
}
.fe-header-icon {
  font-size: 32px;
  line-height: 1;
}
.four-eyes-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.four-eyes-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all 0.2s;
}
.four-eyes-card.status-approved {
  border-color: rgba(16, 185, 129, 0.25);
}
.four-eyes-card.status-rejected {
  border-color: rgba(239, 68, 68, 0.25);
}
.fe-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 12px;
}
.fe-card-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.fe-type-badge {
  font-size: 0.76rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
}
.fe-type-badge.bank_refund {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}
.fe-type-badge.account_recovery {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}
.fe-title-text {
  margin: 0;
  font-size: 1rem;
  color: var(--text);
}
.fe-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.fe-detail-item small {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.fe-detail-item b {
  display: block;
  font-size: 0.92rem;
  color: var(--text);
}
.fe-reason-box {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.84rem;
  color: #cbd5e1;
  line-height: 1.4;
}

/* Pause banner */
.fe-pause-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  flex-wrap: wrap;
}
.fe-pause-banner.paused {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
}
.fe-pause-banner.ready {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.fe-pause-banner .pause-icon {
  font-size: 24px;
}
.fe-pause-banner .pause-text {
  flex: 1;
}
.fe-pause-banner .pause-text b {
  display: block;
  font-size: 0.86rem;
  color: var(--text);
}
.fe-pause-banner .pause-text p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.btn-fastforward {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #0f172a !important;
  font-weight: 800 !important;
  border: none !important;
  cursor: pointer;
  white-space: nowrap;
}

/* Warnings and Action Box */
.fe-approval-action-box {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 12px 16px;
}
.fe-warning-badge {
  font-size: 0.84rem;
  padding: 10px 14px;
  border-radius: 8px;
  line-height: 1.4;
}
.fe-warning-badge.self-requester {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fca5a5;
}
.fe-warning-badge.role-mismatch {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fde047;
}
.fe-warning-badge.cooling-off {
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: #93c5fd;
}
.fe-ready-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.fe-ready-label {
  font-size: 0.86rem;
  color: #34d399;
}
.fe-btn-group {
  display: flex;
  gap: 10px;
}

/* Stamps */
.fe-stamp {
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
}
.fe-stamp.approved {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
}
.fe-stamp.rejected {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
}

/* Member Restrictions (Ticket 006) */
.member-management-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 14px;
}
.member-status-tags {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.badge-danger {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
}
.badge-warning {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
}
.badge-success {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.member-action-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.btn-ghost-action {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  font-size: 0.76rem !important;
  padding: 4px 8px !important;
  cursor: pointer;
  border-radius: 6px;
}
.btn-ghost-action:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}
.btn-ghost-action.text-warning { color: #38bdf8 !important; }
.btn-ghost-action.text-success { color: #34d399 !important; }
.btn-ghost-action.text-danger { color: #f87171 !important; }

/* Audit Trail Explorer Metrics & Tools (Ticket 007) */
.audit-metrics-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.audit-metric-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.metric-label {
  font-size: 0.74rem;
  color: var(--text-muted);
}
.metric-val {
  font-size: 1.1rem;
  color: var(--text);
  font-weight: 800;
}
.audit-actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.log-badge.wallet_adjustment {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}
.log-badge.anonymize_account {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

@media(max-width: 992px) {
  .audit-metrics-grid { grid-template-columns: repeat(2, 1fr); }
}

@media(max-width: 768px) {
  .admin-header-bar { flex-direction: column; align-items: flex-start; }
  .verify-grid-2 { grid-template-columns: 1fr; }
  .docs-preview-grid { grid-template-columns: 1fr; }
  .fe-card-grid { grid-template-columns: 1fr; }
  .audit-metrics-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FILAMENT 3 EXACT BACKOFFICE THEME
   ============================================================ */
.filament-admin-app {
  display: flex;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  background-color: #09090b; /* zinc-950 */
  color: #f4f4f5; /* zinc-100 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Thai", sans-serif;
  font-size: 13px;
}

.filament-sidebar {
  width: 230px;
  background-color: #09090b;
  border-right: 1px solid #27272a; /* zinc-800 */
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-height: 100vh;
  z-index: 40;
  flex-shrink: 0;
  overflow-y: auto;
}

.filament-sidebar-brand {
  height: 54px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #27272a;
}

.filament-brand-link {
  font-size: 1rem;
  font-weight: 700;
  color: #f4f4f5;
  text-decoration: none;
  letter-spacing: -0.02em;
}

.filament-sidebar-close-btn {
  display: none;
}

.filament-menu-toggle-btn {
  display: none;
}

.filament-sidebar-backdrop {
  display: none;
}

.filament-nav {
  padding: 12px 8px;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.filament-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: #a1a1aa; /* zinc-400 */
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}

.filament-nav-item:hover {
  background-color: #18181b; /* zinc-900 */
  color: #f4f4f5;
}

.filament-nav-item.active {
  background-color: #18181b;
  border-color: #27272a;
  color: #10b981; /* emerald-500 */
  font-weight: 600;
}

.filament-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  line-height: 1;
}

.filament-nav-label {
  flex: 1;
}

.filament-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
}

.filament-badge.warning {
  background-color: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

.filament-badge.danger {
  background-color: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.filament-badge.info {
  background-color: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.filament-sidebar-footer {
  padding: 12px;
  border-top: 1px solid #27272a;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: #09090b;
}

.filament-staff-chip {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filament-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #27272a;
  color: #f4f4f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.74rem;
  border: 1px solid #3f3f46;
}

.filament-staff-meta {
  display: flex;
  flex-direction: column;
}

.filament-staff-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: #f4f4f5;
}

.filament-role-badge {
  font-size: 0.68rem;
  color: #10b981;
  font-weight: 600;
}

.filament-rbac-switcher label {
  display: block;
  font-size: 0.68rem;
  color: #71717a;
  margin-bottom: 3px;
}

.filament-select {
  width: 100%;
  background-color: #18181b;
  border: 1px solid #27272a;
  color: #f4f4f5;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 0.74rem;
  cursor: pointer;
}

.filament-back-link {
  color: #71717a;
  font-size: 0.74rem;
  text-decoration: none;
  transition: color 0.15s;
}

.filament-back-link:hover {
  color: #f4f4f5;
}

/* Main Content Area */
.filament-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #09090b;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.filament-main::-webkit-scrollbar {
  width: 8px;
}

.filament-main::-webkit-scrollbar-track {
  background: #09090b;
}

.filament-main::-webkit-scrollbar-thumb {
  background: #27272a;
  border-radius: 4px;
}

.filament-main::-webkit-scrollbar-thumb:hover {
  background: #3f3f46;
}

.filament-topbar {
  height: 54px;
  background-color: #09090b;
  border-bottom: 1px solid #27272a;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 30;
  flex-shrink: 0;
}

.filament-topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.filament-topbar-left .workspace-tag {
  font-size: 0.72rem;
  font-weight: 700;
  color: #71717a;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.filament-topbar-left .sep {
  color: #52525b;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.filament-topbar-left .current {
  color: #f4f4f5;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filament-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #71717a;
}

.filament-breadcrumbs .sep {
  color: #52525b;
}

.filament-breadcrumbs .current {
  color: #f4f4f5;
  font-weight: 500;
}

.filament-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.filament-storefront-btn {
  font-size: 0.76rem;
  color: #10b981;
  text-decoration: none;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 600;
}

.filament-user-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #e4e4e7;
}

.filament-avatar-sm {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #27272a;
  color: #f4f4f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.68rem;
}

/* Page Content */
.filament-page-content {
  padding: 24px 32px 100px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.filament-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.filament-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.filament-header-actions-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.filament-page-title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: #f4f4f5;
  letter-spacing: -0.02em;
}

.filament-btn-primary {
  background-color: #10b981; /* Filament primary emerald */
  color: #09090b;
  font-weight: 600;
  border: none;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background-color 0.15s;
}

.filament-btn-primary:hover {
  background-color: #059669;
  color: #fff;
}

/* Table Card */
.filament-card {
  background-color: #121214; /* zinc-925 */
  border: 1px solid #27272a;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.filament-table-toolbar {
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #27272a;
  flex-wrap: wrap;
  gap: 12px;
}

.filament-filter-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.filament-pill {
  background: transparent;
  border: 1px solid #27272a;
  color: #a1a1aa;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.filament-pill:hover {
  background: #27272a;
  color: #f4f4f5;
}

.filament-pill.active {
  background: #27272a;
  border-color: #3f3f46;
  color: #f4f4f5;
  font-weight: 600;
}

.filament-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.filament-search-icon {
  position: absolute;
  left: 10px;
  color: #71717a;
  font-size: 0.76rem;
}

.filament-search-input {
  background-color: #09090b;
  border: 1px solid #27272a;
  color: #f4f4f5;
  padding: 6px 10px 6px 30px;
  border-radius: 6px;
  font-size: 0.78rem;
  width: 220px;
  outline: none;
  transition: border-color 0.15s;
}

.filament-search-input:focus {
  border-color: #10b981;
}

/* Table */
.filament-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.8125rem;
}

.filament-table th {
  background-color: #18181b;
  color: #a1a1aa;
  font-weight: 600;
  padding: 12px 18px;
  border-bottom: 1px solid #27272a;
  white-space: nowrap;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.filament-table td {
  padding: 14px 18px;
  border-bottom: 1px solid #202024;
  color: #e4e4e7;
  vertical-align: middle;
}

.filament-table tr:hover td {
  background-color: rgba(255, 255, 255, 0.02);
}

/* Master-detail pricing editor */
.pricing-matrix-toolbar-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: min(320px, 100%);
}

.pricing-pack-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(320px, 100%);
  padding: 7px 10px;
  box-sizing: border-box;
  color: #71717a;
  background: #09090b;
  border: 1px solid #27272a;
  border-radius: 7px;
}

.pricing-pack-search:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.pricing-pack-search input {
  width: 100%;
  min-width: 0;
  padding: 0;
  color: #f4f4f5;
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 12px;
}

.pricing-pack-search input::placeholder {
  color: #71717a;
}

.pricing-matrix-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pricing-editor-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr);
  gap: 12px;
  min-width: 0;
}

.pricing-pack-list-panel,
.pricing-pack-editor {
  min-width: 0;
  overflow: hidden;
  background: #121214;
  border: 1px solid #27272a;
  border-radius: 10px;
}

.pricing-panel-heading,
.pricing-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #27272a;
}

.pricing-panel-heading > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pricing-panel-heading strong {
  color: #f4f4f5;
  font-size: 13px;
}

.pricing-panel-heading > div > span {
  padding: 2px 7px;
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.14);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}

.pricing-panel-hint,
.pricing-editor-eyebrow {
  color: #71717a;
  font-size: 10px;
}

.pricing-pack-list {
  max-height: 446px;
  padding: 7px;
  overflow-y: auto;
}

.pricing-pack-list-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  width: 100%;
  color: #e4e4e7;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: grab;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.pricing-pack-list-item:hover {
  background: #1a1a1e;
  border-color: #3f3f46;
}

.pricing-pack-list-item.selected {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.75);
  box-shadow: inset 3px 0 #3b82f6;
}

.pricing-pack-list-item.dragging {
  opacity: 0.5;
}

.pricing-pack-list-item.drag-over {
  border-color: rgba(96, 165, 250, 0.9);
  box-shadow: 0 -2px 0 #60a5fa;
}

.pricing-pack-list-main {
  display: grid;
  grid-template-columns: 18px 28px minmax(0, 1fr) auto auto;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: 8px;
  padding: 10px 9px;
  color: #e4e4e7;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: inherit;
}

.pricing-pack-list-main:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: -2px;
}

.pricing-pack-drag-handle {
  color: #71717a;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  user-select: none;
}

.pricing-pack-list-item:hover .pricing-pack-drag-handle,
.pricing-pack-list-item.selected .pricing-pack-drag-handle {
  color: #93c5fd;
}

.pricing-pack-list-order {
  color: #71717a;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.pricing-pack-list-item.selected .pricing-pack-list-order {
  color: #93c5fd;
  font-weight: 800;
}

.pricing-pack-list-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.pricing-pack-list-copy strong {
  overflow: hidden;
  color: #f4f4f5;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pricing-pack-list-copy > span {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 5px;
  overflow: hidden;
  color: #71717a;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pricing-pack-list-copy em {
  flex: 0 0 auto;
  padding: 1px 5px;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.12);
  border-radius: 4px;
  font-style: normal;
  font-size: 9px;
}

.pricing-pack-list-copy em.empty {
  color: #71717a;
  background: #27272a;
}

.pricing-pack-list-price {
  color: #34d399;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.pricing-pack-list-recommend {
  padding: 2px 5px;
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.16);
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}

.pricing-editor-header {
  align-items: flex-start;
}

.pricing-editor-header h4 {
  max-width: 360px;
  margin: 4px 0 0;
  overflow: hidden;
  color: #f4f4f5;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pricing-editor-delete {
  flex: 0 0 auto;
  padding: 6px 9px;
  color: #f87171;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
}

.pricing-editor-delete:hover {
  background: rgba(239, 68, 68, 0.16);
}

.pricing-editor-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}

.pricing-editor-section-label {
  padding-bottom: 6px;
  color: #60a5fa;
  border-bottom: 1px solid #27272a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.pricing-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pricing-editor-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
  color: #a1a1aa;
  font-size: 10px;
  font-weight: 700;
}

.pricing-editor-field-wide {
  grid-column: 1 / -1;
}

.pricing-editor-field input,
.pricing-editor-field select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 9px;
  color: #f4f4f5;
  background: #09090b;
  border: 1px solid #3f3f46;
  border-radius: 6px;
  outline: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
}

.pricing-editor-field input:focus,
.pricing-editor-field select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.pricing-editor-field-retail input {
  color: #fff;
  border-color: rgba(16, 185, 129, 0.45);
}

.pricing-editor-field-wholesale input {
  color: #34d399;
}

.pricing-editor-field-cost input {
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.35);
}

.pricing-profit-summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 11px;
  color: #a1a1aa;
  background: #09090b;
  border: 1px solid #27272a;
  border-radius: 7px;
  font-size: 11px;
}

.pricing-profit-summary strong {
  font-size: 14px;
}

.pricing-profit-summary strong.positive {
  color: #34d399;
}

.pricing-profit-summary strong.negative {
  color: #f87171;
}

.pricing-profit-summary small {
  color: #71717a;
  font-size: 10px;
}

.pricing-bonus-input {
  display: flex;
  align-items: center;
  padding: 0 9px;
  background: #09090b;
  border: 1px solid #3f3f46;
  border-radius: 6px;
}

.pricing-bonus-input b {
  color: #34d399;
  font-size: 14px;
}

.pricing-bonus-input input {
  padding: 8px 5px;
  border: 0;
  box-shadow: none;
}

.pricing-bonus-input input:focus {
  box-shadow: none;
}

.pricing-bonus-input span {
  color: #71717a;
  font-size: 10px;
  white-space: nowrap;
}

.pricing-recommended-toggle {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 11px;
  color: #cbd5e1;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 7px;
  cursor: pointer;
  font-size: 11px;
}

.pricing-recommended-toggle input {
  margin-top: 2px;
  accent-color: #3b82f6;
}

.pricing-recommended-toggle span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pricing-recommended-toggle small {
  color: #93a4ba;
  font-size: 10px;
  font-weight: 400;
}

.pricing-empty-state,
.pricing-empty-editor {
  display: grid;
  min-height: 180px;
  place-content: center;
  padding: 24px;
  color: #71717a;
  text-align: center;
  font-size: 12px;
  line-height: 1.7;
}

.pricing-editor-footer {
  position: sticky;
  bottom: -20px;
  z-index: 2;
  padding-bottom: 4px;
  background: #18181b;
}

@media (max-width: 780px) {
  .pricing-editor-layout {
    grid-template-columns: 1fr;
  }

  .pricing-pack-list {
    max-height: 260px;
  }
}

@media (max-width: 520px) {
  .pricing-editor-grid {
    grid-template-columns: 1fr;
  }

  .pricing-editor-field-wide {
    grid-column: auto;
  }

  .pricing-matrix-actions {
    width: 100%;
    justify-content: stretch;
  }

  .pricing-matrix-actions button {
    flex: 1 1 auto;
  }

  .pricing-pack-list-main {
    grid-template-columns: 16px 24px minmax(0, 1fr) auto;
  }

  .pricing-pack-list-recommend {
    display: none;
  }
}

.filament-action-link {
  color: #10b981;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.filament-action-link:hover {
  background-color: rgba(16, 185, 129, 0.1);
}

.filament-table-footer {
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #27272a;
  color: #a1a1aa;
  font-size: 0.76rem;
}

/* Filament 3 Dedicated Dark Modals */
.filament-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1050;
  display: grid;
  place-items: center;
  padding: 24px 16px calc(env(safe-area-inset-bottom, 0px) + 24px) 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  animation: modalFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

body.modal-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.filament-modal-card {
  background: #18181b !important;
  border: 1px solid #3f3f46 !important;
  border-radius: 12px !important;
  color: #f4f4f5 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  width: 100%;
  display: flex !important;
  flex-direction: column !important;
  max-height: min(90vh, 840px) !important;
  overflow: hidden !important;
  overscroll-behavior: contain;
}

.filament-modal-card.modal-md {
  max-width: 560px;
}

.filament-modal-card.modal-lg {
  max-width: 880px;
}

.filament-modal-card.modal-xl {
  max-width: 1040px;
}

.filament-modal-header {
  padding: 16px 22px;
  border-bottom: 1px solid #27272a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: #18181b;
  position: sticky;
  top: 0;
  z-index: 10;
}

.filament-modal-close {
  background: transparent;
  border: none;
  color: #a1a1aa;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: all 0.15s;
}

.filament-modal-close:hover {
  color: #f4f4f5;
  background: #27272a;
}

.filament-modal-body {
  padding: 22px;
  flex: 1 1 auto;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Custom Sleek Scrollbar for Modals, Tables and Views */
.filament-modal-body::-webkit-scrollbar,
.filament-modal-card::-webkit-scrollbar,
.filament-table-container::-webkit-scrollbar,
.filament-main::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.filament-modal-body::-webkit-scrollbar-track,
.filament-modal-card::-webkit-scrollbar-track,
.filament-table-container::-webkit-scrollbar-track,
.filament-main::-webkit-scrollbar-track {
  background: rgba(24, 24, 27, 0.6);
}
.filament-modal-body::-webkit-scrollbar-thumb,
.filament-modal-card::-webkit-scrollbar-thumb,
.filament-table-container::-webkit-scrollbar-thumb,
.filament-main::-webkit-scrollbar-thumb {
  background: #3f3f46;
  border-radius: 4px;
}
.filament-modal-body::-webkit-scrollbar-thumb:hover,
.filament-modal-card::-webkit-scrollbar-thumb:hover,
.filament-table-container::-webkit-scrollbar-thumb:hover,
.filament-main::-webkit-scrollbar-thumb:hover {
  background: #52525b;
}

/* Filament Dark Warning Banner (Soft on eyes, NO blinding yellow!) */
.filament-warning-banner {
  background: rgba(245, 158, 11, 0.08) !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  color: #fbbf24 !important;
  font-size: 0.82rem !important;
  line-height: 1.5 !important;
}

.filament-warning-banner b {
  color: #f59e0b !important;
}

.filament-warning-banner small {
  display: block;
  margin-top: 4px;
  color: #d97706 !important;
  opacity: 0.9;
}

.filament-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  color: #e4e4e7;
  font-size: 0.82rem;
  font-weight: 500;
}

.filament-form-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #e4e4e7;
  margin-bottom: 4px;
}

.filament-form-input,
.filament-form-select,
.filament-form-textarea {
  background-color: #141417 !important;
  border: 1px solid #3f3f46 !important;
  border-radius: 8px !important;
  color: #f4f4f5 !important;
  padding: 9px 13px !important;
  font-size: 0.86rem !important;
  outline: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease-in-out;
}

.filament-form-input::placeholder,
.filament-form-textarea::placeholder {
  color: #71717a !important;
  opacity: 0.85;
}

.filament-form-input:focus,
.filament-form-select:focus,
.filament-form-textarea:focus {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
  background-color: #18181b !important;
}

.form-section-card {
  background: #18181b;
  border: 1px solid #27272a;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-section-title {
  font-size: 13px;
  font-weight: 700;
  color: #38bdf8;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid #27272a;
}

.filament-btn-secondary {
  background: #27272a;
  border: 1px solid #3f3f46;
  color: #e4e4e7;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.84rem;
  cursor: pointer;
  transition: all 0.15s;
}

.filament-btn-secondary:hover {
  background: #3f3f46;
  color: #ffffff;
}

@keyframes fadeInBackdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media(max-width: 1024px) {
  .filament-admin-app {
    display: flex;
    flex-direction: row;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    position: relative;
  }

  .filament-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 280px !important;
    max-width: 85vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    z-index: 1000 !important;
    background: #09090b !important;
    border-right: 1px solid #27272a !important;
    border-bottom: none !important;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: none;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    overflow-y: auto !important;
  }

  .filament-sidebar.is-open {
    transform: translateX(0) !important;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.9) !important;
  }

  .filament-sidebar-backdrop {
    display: block !important;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 999;
    animation: fadeInBackdrop 0.2s ease;
  }

  .filament-sidebar-brand {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 52px;
    border-bottom: 1px solid #27272a;
    flex-shrink: 0;
  }

  .filament-sidebar-close-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #a1a1aa;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .filament-sidebar-close-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
  }

  .filament-menu-toggle-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #f4f4f5;
    cursor: pointer;
    flex-shrink: 0;
    margin-right: 10px;
    transition: all 0.15s;
  }
  .filament-menu-toggle-btn:hover {
    background: rgba(0, 240, 118, 0.1);
    color: #00f076;
    border-color: rgba(0, 240, 118, 0.3);
  }

  .filament-nav {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 12px 8px !important;
    gap: 3px !important;
    width: 100% !important;
  }

  .filament-nav-section-title {
    display: block !important;
  }

  .filament-nav-item {
    width: 100% !important;
    font-size: 0.84rem !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    flex-shrink: 0;
  }

  .filament-sidebar-footer {
    display: flex !important;
    flex-direction: column !important;
    padding: 12px !important;
    border-top: 1px solid #27272a !important;
    flex-shrink: 0 !important;
  }

  .filament-main {
    flex: 1;
    min-width: 0;
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
  }

  .filament-topbar {
    padding: 0 16px !important;
    height: 52px !important;
  }

  .filament-page-content {
    padding: 16px 14px 60px !important;
  }

  .filament-page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .filament-page-title {
    font-size: 18px;
  }
  .filament-table-toolbar {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }
  .filament-filter-pills {
    flex-wrap: wrap;
  }
  .filament-pill {
    font-size: 11px;
    padding: 4px 10px;
  }
  .filament-search-wrap {
    max-width: 100%;
  }
  .filament-card {
    border-radius: 8px;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .filament-table {
    font-size: 11.5px;
    min-width: 640px;
  }
  .filament-table th {
    padding: 8px 12px;
    font-size: 10px;
  }
  .filament-table td {
    padding: 10px 12px;
  }
  .filament-table-footer {
    flex-direction: column;
    gap: 8px;
    font-size: 11px;
  }
  .orders-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .order-metric-card {
    padding: 12px;
    gap: 10px;
  }
  .order-metric-val {
    font-size: 20px;
  }
  .order-metric-lbl {
    font-size: 10px;
  }
  .ticket-layout-grid {
    grid-template-columns: 1fr;
  }
  .ticket-layout-grid > div:first-child {
    height: auto !important;
    max-height: 380px !important;
  }
}

@media(max-width: 650px) {
  .filament-sidebar { padding: 8px 10px; }
  .filament-nav { gap: 4px; padding: 2px 0 6px; }
  .filament-nav-item { font-size: 10.5px; padding: 6px 10px; }
  .filament-page-content { padding: 10px 8px; }
  .filament-page-title { font-size: 16px; }
  .filament-card {
    padding: 12px 10px !important;
    border-radius: 8px;
  }
  .filament-topbar-left .workspace-tag,
  .filament-topbar-left .sep {
    display: none;
  }
  .filament-topbar-right .filament-user-badge span {
    display: none;
  }
  .filament-header-actions,
  .filament-header-actions-group {
    width: 100%;
    gap: 6px;
  }
  .filament-header-actions button,
  .filament-header-actions-group button {
    font-size: 11px !important;
    padding: 7px 10px !important;
    flex: 1 1 auto;
    text-align: center;
    justify-content: center;
  }
  .filament-modal-backdrop {
    padding: 12px 8px calc(env(safe-area-inset-bottom, 0px) + 16px) 8px !important;
  }
  .filament-modal-card {
    max-height: calc(100dvh - 24px) !important;
    border-radius: 12px !important;
  }
  .filament-modal-header {
    padding: 12px 14px !important;
  }
  .filament-modal-body {
    padding: 14px 14px !important;
  }
  .filament-search-input,
  .filament-form-input {
    max-width: 100% !important;
  }
  .orders-metrics-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .order-metric-card { padding: 10px !important; }
  .filament-btn-primary { font-size: 11px !important; padding: 7px 12px !important; }
}

@media(max-width: 380px) {
  .orders-metrics-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   ADMIN + SHARED RESPONSIVE HARDENING (ALL DEVICE SIZES)
   Keeps wide data inside local scroll areas instead of blowing out the page.
   ============================================================ */
.filament-admin-app,
.filament-main,
.filament-page-content,
.filament-card,
.filament-table-toolbar,
.filament-page-header,
.filament-header-actions,
.filament-header-actions-group {
  min-width: 0;
}

.filament-table-container {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.filament-table-container > .filament-table {
  min-width: 920px;
}

.games-admin-table-wrap {
  margin-inline: 0;
  border-radius: 8px;
}

.games-admin-table {
  min-width: 1180px !important;
}

.games-admin-table .table-game-cell {
  min-width: 170px;
  max-width: 240px;
}

.games-admin-table .table-game-cell > div {
  min-width: 0;
}

.games-admin-table .table-game-cell strong,
.games-admin-table .table-game-cell code {
  overflow-wrap: anywhere;
}

.games-admin-actions {
  flex-wrap: nowrap;
}

/* Laptop / compact desktop */
@media (max-width: 1366px) and (min-width: 1025px) {
  .filament-sidebar {
    width: 220px;
  }

  .filament-topbar {
    padding-inline: 20px;
  }

  .filament-page-content {
    padding: 20px 20px 84px;
    gap: 16px;
  }

  .filament-page-title {
    font-size: 1.2rem;
  }

  .games-admin-card {
    padding: 18px !important;
  }

  .filament-table th {
    padding: 10px 12px;
  }

  .filament-table td {
    padding: 11px 12px;
  }
}

/* Tablet + small laptop navigation and controls */
@media (max-width: 1024px) {
  .filament-topbar {
    min-height: 48px;
    height: auto;
    gap: 10px;
    padding-block: 7px;
  }

  .filament-topbar-right {
    flex: 0 0 auto;
  }

  .filament-page-header {
    width: 100%;
  }

  .filament-header-actions,
  .filament-header-actions-group {
    max-width: 100%;
  }

  .games-admin-card {
    padding: 14px !important;
  }

  .games-admin-toolbar {
    align-items: stretch !important;
    gap: 10px !important;
  }

  .games-admin-toolbar > .filament-form-input {
    width: 100% !important;
    max-width: none !important;
    min-height: 42px;
  }

  .games-admin-filter-pills {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 1px 1px 5px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .games-admin-filter-pills::-webkit-scrollbar {
    display: none;
  }

  .admin-filter-pill,
  .filament-pill {
    min-height: 38px;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .admin-icon-btn,
  .admin-slide-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    max-width: 40px;
  }

  .filament-form-input,
  .filament-search-input,
  .filament-select,
  .filament-btn-primary,
  .filament-btn-secondary,
  .filament-action-btn {
    min-height: 40px;
  }

  .filament-modal-card.modal-xl,
  .filament-modal-card.modal-lg,
  .filament-modal-card.modal-md {
    width: min(100%, 760px) !important;
    max-width: 100% !important;
  }

  .pricing-panel-heading,
  .pricing-editor-header {
    flex-wrap: wrap;
  }
}

/* Phone: games manager becomes readable cards instead of a squeezed table. */
@media (max-width: 720px) {
  .filament-page-content {
    padding-inline: 10px !important;
  }

  .filament-page-header {
    gap: 8px;
  }

  .filament-page-title {
    width: 100%;
    font-size: clamp(15px, 4.5vw, 18px);
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .filament-topbar-left .current {
    font-size: 11px;
  }

  .filament-storefront-btn {
    padding: 6px 8px;
    font-size: 10.5px;
  }

  .games-admin-card {
    padding: 10px !important;
    overflow: visible !important;
  }

  .games-admin-table-wrap {
    overflow: visible !important;
    border-radius: 0;
  }

  .games-admin-table {
    display: block;
    width: 100%;
    min-width: 0 !important;
  }

  .games-admin-table thead {
    display: none;
  }

  .games-admin-table tbody {
    display: grid;
    width: 100%;
    gap: 10px;
  }

  .games-admin-table tbody tr {
    display: grid;
    width: 100%;
    min-width: 0;
    padding: 12px;
    background: #151518;
    border: 1px solid #27272a;
    border-radius: 12px;
    box-sizing: border-box;
  }

  .games-admin-table tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    gap: 12px;
    padding: 8px 0 !important;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
    white-space: normal !important;
    text-align: right;
    background: transparent !important;
  }

  .games-admin-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 92px;
    color: #71717a;
    font-size: 10px;
    font-weight: 700;
    text-align: left;
  }

  .games-admin-table tbody td > * {
    min-width: 0;
    max-width: calc(100% - 104px);
  }

  .games-admin-table .games-admin-primary-cell {
    display: block;
    padding: 0 0 11px !important;
    margin-bottom: 3px;
    text-align: left;
  }

  .games-admin-table .games-admin-primary-cell::before {
    display: none;
  }

  .games-admin-table .games-admin-primary-cell > * {
    max-width: 100%;
  }

  .games-admin-table .table-game-cell {
    max-width: none;
    min-width: 0;
  }

  .games-admin-table .table-game-cell strong {
    display: block;
    font-size: 13px;
    line-height: 1.35;
  }

  .games-admin-table .games-admin-actions-cell {
    border-bottom: 0;
    padding-bottom: 0 !important;
  }

  .games-admin-table .games-admin-actions {
    max-width: none;
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .games-admin-table .badge-pill-sm,
  .games-admin-table .status-dot,
  .games-admin-table .game-tag-badge {
    max-width: 100%;
  }

  .filament-modal-backdrop {
    place-items: end center;
    padding: max(8px, env(safe-area-inset-top, 0px)) 0 0 !important;
  }

  .filament-modal-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - max(8px, env(safe-area-inset-top, 0px))) !important;
    border-radius: 16px 16px 0 0 !important;
    border-bottom: 0 !important;
  }

  .filament-modal-header {
    padding: 12px 14px !important;
  }

  .filament-modal-close {
    min-width: 40px;
    min-height: 40px;
  }

  .filament-modal-body {
    padding: 12px !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .pricing-editor-layout {
    gap: 10px;
  }

  .pricing-pack-list {
    max-height: min(230px, 28dvh);
  }
}

/* Tiny phone hardening */
@media (max-width: 420px) {
  .filament-page-content {
    padding-inline: 8px !important;
  }

  .games-admin-card {
    padding: 8px !important;
  }

  .games-admin-table tbody tr {
    padding: 10px;
  }

  .games-admin-table tbody td::before {
    flex-basis: 78px;
    font-size: 9.5px;
  }

  .games-admin-table tbody td > * {
    max-width: calc(100% - 90px);
  }

  .games-admin-table .games-admin-primary-cell > * {
    max-width: 100%;
  }

  .games-admin-actions .admin-icon-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    max-width: 38px;
  }
}

/* Shared storefront safety: no child should force a page-wide horizontal scroll. */
.site-main,
.main-viewport,
.detail-layout,
.detail-steps,
.service-card,
.order-card,
.pkg-selector-container,
.pkg-scroll-outer,
.pkg-scroll-container {
  min-width: 0;
}

@media (max-width: 900px) {
  .detail-layout,
  .help-layout,
  .wallet-layout,
  .account-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .sticky-sidebar {
    position: static;
    top: auto;
  }
}

@media (max-width: 560px) {
  .pkg-controls-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .pkg-search-box,
  .pkg-sort-dropdown,
  .pkg-view-toggle {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
  }

  .pkg-view-toggle {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }

  .pkg-view-toggle-btn {
    justify-content: center;
    min-height: 40px;
  }

  .pkg-price-filter-pills {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .pkg-price-filter-pills::-webkit-scrollbar {
    display: none;
  }

  .pkg-filter-pill-btn {
    flex: 0 0 auto;
    min-height: 38px;
  }

  .quantity-selector-box {
    flex-wrap: wrap;
  }

  .qty-summary-label {
    width: 100%;
    margin-left: 0 !important;
    padding-top: 6px;
  }
}

/* ==========================================================================
   D4 PLATFORM STORE (ร้านค้า PRO) - CYBER COMMERCE THEME
   ========================================================================== */
.platform-store-page {
  padding-top: 36px;
  padding-bottom: 90px;
}

.platform-store-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
  background: rgba(15, 23, 32, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
}

.store-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(0, 240, 118, 0.15);
  border-top-color: #00f076;
  border-radius: 50%;
  animation: platform-spin 0.8s linear infinite;
  margin-bottom: 18px;
}

@keyframes platform-spin {
  to { transform: rotate(360deg); }
}

/* 1. HERO SECTION */
.platform-store-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  padding: 36px 32px;
  background: linear-gradient(135deg, rgba(16, 26, 38, 0.92) 0%, rgba(10, 15, 22, 0.96) 100%);
  border: 1px solid rgba(0, 229, 160, 0.2);
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  margin-bottom: 36px;
  position: relative;
  overflow: hidden;
}

.platform-store-hero::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(0, 229, 160, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.platform-store-hero-content {
  max-width: 680px;
}

.platform-store-badges {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.store-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font: 700 11px var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.store-pill-badge.cyan {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.store-pill-badge.emerald {
  background: rgba(0, 240, 118, 0.12);
  color: #00f076;
  border: 1px solid rgba(0, 240, 118, 0.3);
}

.platform-store-hero h1 {
  margin: 0 0 12px;
  color: #ffffff;
  font-size: clamp(26px, 3.8vw, 42px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.platform-store-hero p {
  margin: 0;
  color: #94a3b8;
  font-size: 15px;
  line-height: 1.7;
}

/* USER WALLET CARD IN HERO */
.platform-store-wallet-card {
  flex: 0 0 280px;
  padding: 22px;
  background: rgba(11, 17, 25, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.wallet-label {
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.wallet-balance {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-bottom: 16px;
}

.wallet-balance strong {
  font: 800 28px var(--mono);
  color: #00f076;
  letter-spacing: -0.02em;
}

.wallet-balance small {
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
}

.store-wallet-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 16px;
  border-radius: 9px;
  font-weight: 700;
  font-size: 14px;
  background: #00f076;
  color: #05140b;
  text-decoration: none;
  transition: all 0.2s ease;
}

.store-wallet-btn:hover {
  background: #22f78b;
  box-shadow: 0 0 16px rgba(0, 240, 118, 0.35);
  transform: translateY(-1px);
}

.store-wallet-btn.secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.store-wallet-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* 2. SECTION HEADERS */
.platform-store-section {
  margin-top: 48px;
}

.platform-store-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 20px;
}

.head-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-icon {
  font-size: 24px;
}

.platform-store-section-head h2 {
  margin: 0;
  color: #ffffff;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.head-sub {
  color: #94a3b8;
  font-size: 13px;
}

/* FLASH SALE SECTION */
.flash-sale-section {
  background: rgba(245, 158, 11, 0.03);
  border: 1px dashed rgba(245, 158, 11, 0.3);
  border-radius: 20px;
  padding: 26px;
  margin-bottom: 40px;
}

.platform-flash-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.platform-flash-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  background: linear-gradient(145deg, #181920 0%, #101217 100%);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s, border-color 0.2s;
}

.platform-flash-card:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 158, 11, 0.6);
  box-shadow: 0 14px 30px rgba(245, 158, 11, 0.12);
}

.flash-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.flash-badge {
  display: inline-block;
  padding: 3px 8px;
  background: #f59e0b;
  color: #0f172a;
  font: 800 10px var(--mono);
  border-radius: 4px;
  letter-spacing: 0.05em;
}

.countdown-pill {
  font: 700 11px var(--mono);
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.12);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.flash-card-body h3 {
  margin: 0 0 6px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
}

.flash-card-body p {
  margin: 0 0 14px;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.5;
}

.flash-pricing {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.prices {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.flash-sale-price {
  font: 800 24px var(--mono);
  color: #f59e0b;
}

.flash-orig-price {
  font: 500 14px var(--mono);
  color: #64748b;
  text-decoration: line-through;
}

.discount-tag {
  padding: 3px 7px;
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 6px;
  font: 700 12px var(--mono);
}

/* 3. FILTER BAR */
.platform-filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.platform-category-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  flex: 1;
}

.cat-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.cat-pill-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.cat-pill-btn.active {
  background: rgba(0, 240, 118, 0.14);
  border-color: #00f076;
  color: #00f076;
  box-shadow: 0 0 12px rgba(0, 240, 118, 0.2);
}

.platform-search-wrap {
  position: relative;
  min-width: 260px;
}

.platform-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 34px 10px 14px;
  background: #0d131a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.platform-search-input:focus {
  outline: none;
  border-color: #00f076;
  box-shadow: 0 0 0 3px rgba(0, 240, 118, 0.15);
}

.platform-search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #64748b;
  cursor: pointer;
  font-size: 12px;
}

/* 4. PRODUCT CARDS GRID */
.platform-store-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.platform-store-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #111823 0%, #0c1017 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.platform-store-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 240, 118, 0.4);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35), 0 0 18px rgba(0, 240, 118, 0.08);
}

.store-card-image-wrap {
  position: relative;
  width: 100%;
  height: 160px;
  background: #090e14;
  overflow: hidden;
}

.platform-store-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.platform-store-card:hover .platform-store-image {
  transform: scale(1.04);
}

.platform-store-image-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #131b26 0%, #0a0e14 100%);
}

.fallback-icon {
  font-size: 48px;
  filter: drop-shadow(0 0 10px rgba(0, 240, 118, 0.3));
}

.store-card-type-chip {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 3px 8px;
  background: rgba(10, 15, 22, 0.85);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  font: 700 10px var(--mono);
  color: #38bdf8;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.store-card-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px;
}

.store-card-content h3 {
  margin: 0 0 6px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
}

.store-card-content p {
  margin: 0 0 14px;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.store-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 14px;
}

.store-card-price {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.store-card-price .currency {
  font: 700 16px var(--mono);
  color: #00f076;
}

.store-card-price strong {
  font: 800 22px var(--mono);
  color: #ffffff;
}

.store-card-price small {
  font-size: 12px;
  color: #64748b;
  margin-left: 4px;
}

.store-stock-tag {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}

.store-stock-tag.good {
  background: rgba(0, 240, 118, 0.1);
  color: #00f076;
}

.store-stock-tag.low {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
}

.store-stock-tag.out {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}

.store-buy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.store-buy-btn.primary {
  background: #00f076;
  color: #031409;
}

.store-buy-btn.primary:hover:not(:disabled) {
  background: #25f78c;
  box-shadow: 0 0 16px rgba(0, 240, 118, 0.35);
  transform: translateY(-1px);
}

.store-buy-btn.disabled, .store-buy-btn:disabled {
  background: rgba(255, 255, 255, 0.06);
  color: #64748b;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.platform-store-empty {
  grid-column: 1 / -1;
  padding: 60px 20px;
  text-align: center;
  background: rgba(15, 23, 32, 0.6);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}

.empty-icon {
  font-size: 42px;
  margin-bottom: 12px;
}

.platform-store-empty h3 {
  margin: 0 0 6px;
  color: #ffffff;
}

.platform-store-empty p {
  margin: 0 0 16px;
  color: #94a3b8;
  font-size: 14px;
}

/* 5. RANDOM BOX / CRATES */
.random-box-section {
  margin-top: 60px;
}

.platform-boxes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.platform-box-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: linear-gradient(180deg, #171626 0%, #0d0c17 100%);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 18px;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.3);
  text-align: center;
  transition: transform 0.2s, border-color 0.2s;
  overflow: hidden;
}

.platform-box-card:hover {
  transform: translateY(-4px);
  border-color: rgba(168, 85, 247, 0.6);
  box-shadow: 0 16px 40px rgba(168, 85, 247, 0.15);
}

.box-card-glow {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.25) 0%, transparent 70%);
  pointer-events: none;
}

.box-card-icon-wrap {
  margin: 10px auto 16px;
}

.box-emoji {
  font-size: 56px;
  filter: drop-shadow(0 0 16px rgba(168, 85, 247, 0.4));
}

.box-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.platform-box-card h3 {
  margin: 0 0 6px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
}

.platform-box-card p {
  margin: 0 0 16px;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.5;
}

.box-card-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-bottom: 18px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
}

.box-card-price span {
  color: #a855f7;
  font-size: 12px;
  font-weight: 600;
}

.box-card-price strong {
  font: 800 22px var(--mono);
  color: #ffffff;
}

.box-card-price small {
  color: #64748b;
  font-size: 12px;
}

.box-card-actions {
  display: grid;
  gap: 8px;
}

.store-inspect-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.store-inspect-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

/* 6. CONTENT (ARTICLES & FAQ) */
.platform-content-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 64px;
}

.platform-articles-list, .platform-faq-accordion {
  display: grid;
  gap: 12px;
}

.platform-article-card {
  padding: 18px;
  background: rgba(17, 24, 34, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  transition: border-color 0.2s;
}

.platform-article-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.article-tag {
  font: 700 11px var(--mono);
  color: #38bdf8;
  text-transform: uppercase;
}

.article-meta small {
  color: #64748b;
  font-size: 11px;
}

.platform-article-card h3 {
  margin: 0 0 6px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
}

.platform-article-card p {
  margin: 0;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.6;
}

/* FAQ ACCORDION */
.faq-item-card {
  background: rgba(17, 24, 34, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.faq-item-card.open {
  border-color: rgba(0, 240, 118, 0.35);
  background: rgba(17, 24, 34, 0.9);
}

.faq-question-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 16px 18px;
  background: transparent;
  border: none;
  color: #ffffff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.faq-toggle-icon {
  font-size: 18px;
  color: #00f076;
  margin-left: 12px;
  font-weight: 800;
}

.faq-answer-body {
  padding: 0 18px 16px;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.65;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 12px;
}

.faq-answer-body p {
  margin: 0;
}

.content-empty-hint {
  padding: 24px;
  text-align: center;
  color: #64748b;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
}

/* 7. DIALOG / MODAL SHEETS */
.platform-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(5, 8, 12, 0.75);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  animation: platform-fade-in 0.2s ease-out;
}

@keyframes platform-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.platform-modal-dialog {
  width: 100%;
  max-width: 520px;
  background: #0f1620;
  border: 1px solid rgba(0, 240, 118, 0.3);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 240, 118, 0.1);
  overflow: hidden;
  animation: platform-scale-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.platform-modal-dialog.drop-rate-dialog {
  border-color: rgba(168, 85, 247, 0.35);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(168, 85, 247, 0.1);
}

@keyframes platform-scale-in {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.dialog-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
}

.dialog-icon {
  font-size: 28px;
}

.dialog-header h3 {
  margin: 0;
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
}

.dialog-header p {
  margin: 3px 0 0;
  color: #94a3b8;
  font-size: 12px;
}

.dialog-close-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
}

.dialog-close-btn:hover {
  color: #ffffff;
}

.dialog-body {
  padding: 24px;
}

.code-delivery-box {
  background: #080c10;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.code-box-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 12px;
  color: #94a3b8;
  font-weight: 600;
}

.copy-all-btn {
  background: transparent;
  border: 1px solid rgba(0, 240, 118, 0.4);
  color: #00f076;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.copy-all-btn:hover {
  background: rgba(0, 240, 118, 0.12);
}

.code-items-list {
  display: grid;
  gap: 8px;
}

.code-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

.code-value {
  font: 700 15px var(--mono);
  color: #00f076;
  letter-spacing: 0.04em;
  word-break: break-all;
}

.code-copy-btn {
  flex-shrink: 0;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.code-copy-btn:hover {
  background: #00f076;
  color: #031409;
  border-color: #00f076;
}

.dialog-notice {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.5;
  padding: 10px 14px;
  background: rgba(56, 189, 248, 0.06);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 8px;
}

.dialog-footer {
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* DROP RATE TABLE */
.drop-rate-table-wrap {
  max-height: 320px;
  overflow-y: auto;
}

.drop-rate-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.drop-rate-table th {
  text-align: left;
  padding: 8px 12px;
  color: #64748b;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.drop-rate-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #ffffff;
}

.drop-rate-table .text-right {
  text-align: right;
}

.reward-type-chip {
  display: inline-block;
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  border-radius: 4px;
  font-size: 11px;
}

.rate-num {
  font: 700 14px var(--mono);
  color: #a855f7;
}

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 960px) {
  .platform-store-hero {
    flex-direction: column;
    align-items: stretch;
  }
  .platform-store-wallet-card {
    flex: auto;
  }
  .platform-store-grid, .platform-flash-grid, .platform-boxes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .platform-content-section {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .platform-store-grid, .platform-flash-grid, .platform-boxes-grid {
    grid-template-columns: 1fr;
  }
  .platform-filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .platform-search-wrap {
    min-width: 100%;
  }
}


/* D4 visual refresh: neon commerce, shared across public pages. */
:root {
  --bg: #080a0d;
  --bg-secondary: #0d1117;
  --bg-card: #11161c;
  --bg-card-hover: #172027;
  --line: rgba(255, 255, 255, 0.09);
  --line-hover: rgba(255, 255, 255, 0.22);
  --green: #00f076;
  --crimson: #ff365a;
  --electric-blue: #38bdf8;
  --violet: #a78bfa;
}

body {
  background:
    radial-gradient(circle at 12% -10%, rgba(0, 240, 118, 0.09), transparent 28rem),
    radial-gradient(circle at 94% 16%, rgba(255, 54, 90, 0.07), transparent 25rem),
    var(--bg);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.22;
  background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}

a, button, input, select { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.container { width: min(1240px, calc(100% - 48px)); }
.section { padding: 36px 0 48px; }

.topbar {
  background: rgba(5, 8, 10, 0.94);
  border-bottom-color: rgba(0, 240, 118, 0.14);
  letter-spacing: 0.02em;
}
.topbar-inner { height: 36px; }
.topbar-left { color: #9fb1bc; }
.topbar-right { gap: 18px; }
.site-header {
  background: rgba(8, 10, 13, 0.82);
  border-bottom-color: rgba(255,255,255,0.1);
  box-shadow: 0 10px 36px rgba(0,0,0,0.35);
}
.nav-main { height: 78px; }
.logo-badge { border-radius: 14px; box-shadow: 0 0 0 1px rgba(0,240,118,0.18), 0 0 24px rgba(0,240,118,0.24); }
.logo-brand { letter-spacing: -0.8px; }
.main-menu { gap: 2px; }
.main-menu a, .nav-link-dropdown { padding-inline: 13px; font-size: 12.5px; letter-spacing: 0.01em; }
.main-menu a.active, .nav-link-dropdown.active { border-bottom-color: var(--green); }
.header-actions { gap: 8px; }

.home-hero.d4-hero {
  padding: 80px 0 78px;
  background:
    linear-gradient(90deg, rgba(8,10,13,0.8), rgba(8,10,13,0.38)),
    radial-gradient(circle at 68% 25%, rgba(0,240,118,0.1), transparent 32rem),
    radial-gradient(circle at 100% 75%, rgba(255,54,90,0.1), transparent 28rem),
    #080a0d;
}
.hero-grid { grid-template-columns: minmax(0, 1.03fr) minmax(390px, 0.97fr); gap: 64px; }
.hero-heading { font-size: clamp(42px, 4.5vw, 62px); max-width: 720px; line-height: 1.08; }
.hero-desc { max-width: 590px; color: #a7b7c3; }
.eyebrow-badge { background: rgba(0,240,118,0.07); border-color: rgba(0,240,118,0.23); }
.hero-promo-carousel { border-radius: 24px; min-height: 330px; box-shadow: 24px 24px 0 rgba(255,54,90,0.08), 0 18px 56px rgba(0,0,0,0.72), 0 0 38px rgba(0,240,118,0.12); }
.hero-promo-carousel::after { content: 'D4 / LIVE SERVICE'; position: absolute; top: 16px; right: 18px; z-index: 2; color: rgba(255,255,255,0.7); font: 700 10px var(--mono); letter-spacing: 0.12em; }
.hero-actions { gap: 10px; }
.btn { border-radius: 8px; }
.neon-btn, .btn.primary, .btn-primary { box-shadow: 0 10px 28px rgba(0,240,118,0.2); }

.home-intel-bar {
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(12,17,21,0.82);
}
.home-intel-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.intel-item { display: flex; align-items: center; gap: 12px; min-height: 92px; padding: 17px 24px; border-right: 1px solid rgba(255,255,255,0.08); }
.intel-item:first-child { padding-left: 0; }
.intel-item:last-child { border-right: 0; }
.intel-item strong, .intel-item small { display: block; }
.intel-item strong { color: #fff; font: 800 20px var(--mono); letter-spacing: -0.04em; }
.intel-item small { color: #82919d; font-size: 11px; margin-top: 3px; }
.intel-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; font: 700 10px var(--mono); border: 1px solid currentColor; }
.intel-mark.green { color: var(--green); background: rgba(0,240,118,0.08); }
.intel-mark.cyan { color: var(--electric-blue); background: rgba(56,189,248,0.08); }
.intel-mark.red { color: var(--crimson); background: rgba(255,54,90,0.08); }
.intel-mark.purple { color: var(--violet); background: rgba(167,139,250,0.08); }

.launchpad-section { padding: 32px 0 26px; background: rgba(5,8,10,0.46); }
.launchpad-grid { gap: 12px; }
.launchpad-card { min-height: 76px; border-radius: 11px; background: rgba(17,22,28,0.9); border-color: rgba(255,255,255,0.11); }
.launchpad-card:hover { transform: translateY(-4px); }
.launchpad-content small { color: #8797a2; }
.launchpad-tag { border: 1px solid rgba(255,255,255,0.09); }

.aim-section-head { margin-bottom: 20px; border-bottom-color: rgba(255,255,255,0.1); }
.aim-title { font-size: 22px; }
.aim-subtitle { color: #82919d; }
.game-item { border-radius: 14px; background: rgba(15,21,26,0.88); border-color: rgba(255,255,255,0.1); }
.game-item:hover { transform: translateY(-6px); border-color: rgba(0,240,118,0.5); box-shadow: 0 18px 34px rgba(0,0,0,0.48), 0 0 22px rgba(0,240,118,0.12); }
.game-cover { border-bottom-color: rgba(255,255,255,0.1); }
.game-meta { padding: 13px 14px 15px; }
.game-meta h3 { font-size: 14px; }
.game-field-desc { color: #82919d; }

.page-head {
  padding: 54px 0 40px;
  background:
    linear-gradient(90deg, rgba(0,240,118,0.06), transparent 36%),
    rgba(10,14,18,0.86);
  position: relative;
  overflow: hidden;
}
.page-head::after { content: 'D4 / CATALOG'; position: absolute; right: max(24px, calc((100% - 1240px) / 2)); bottom: 24px; color: rgba(255,255,255,0.12); font: 700 10px var(--mono); letter-spacing: 0.15em; }
.page-head h1 { font-size: clamp(28px, 4vw, 42px); letter-spacing: -0.04em; }
.breadcrumbs { text-transform: uppercase; letter-spacing: 0.08em; font: 700 10px var(--mono); }
.breadcrumbs b { color: var(--green); }
.topup-type-chips { gap: 7px; margin-bottom: 22px; }
.topup-pill { border-radius: 8px; background: rgba(255,255,255,0.035); border-color: rgba(255,255,255,0.1); }
.topup-pill:hover, .topup-pill.active { background: rgba(0,240,118,0.1); border-color: rgba(0,240,118,0.56); box-shadow: 0 0 18px rgba(0,240,118,0.12); }
.catalog-tools { padding: 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); background: rgba(17,22,28,0.7); }
.search-box, .sort-dropdown-wrap select { background: #0b1014; border-color: rgba(255,255,255,0.12); border-radius: 8px; }
.topup-category-banner { border-radius: 10px; }

.home-section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.home-section-head h2 { margin: 5px 0 6px; color: #fff; font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.05em; }
.home-section-head p { margin: 0; color: #83929d; font-size: 13px; }
.text-action { color: var(--green); font-size: 12px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.text-action span { margin-left: 5px; }
/* ==========================================================================
   HOMEPAGE NEXT-GEN CYBER-GLASSMORPHISM STYLING
   ========================================================================== */

/* Trust Highlights Grid */
.trust-highlights-section {
  margin-top: 24px;
  margin-bottom: 40px;
}
.trust-highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}
.trust-highlight-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(19, 27, 36, 0.75) 0%, rgba(10, 15, 22, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}
.trust-highlight-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 240, 118, 0.4);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 240, 118, 0.12);
}
.trust-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.trust-highlight-card:hover .trust-icon-wrap {
  transform: scale(1.08);
}
.trust-icon-blue {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.35);
  box-shadow: 0 0 14px rgba(59, 130, 246, 0.2);
}
.trust-icon-green {
  background: rgba(0, 240, 118, 0.15);
  color: #00f076;
  border: 1px solid rgba(0, 240, 118, 0.35);
  box-shadow: 0 0 14px rgba(0, 240, 118, 0.2);
}
.trust-icon-amber {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.2);
}
.trust-icon-purple {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.35);
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.2);
}
.trust-text-wrap {
  flex: 1;
  min-width: 0;
}
.trust-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
.trust-title-row strong {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}
.trust-pill {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  letter-spacing: 0.02em;
}
.trust-pill-blue { background: rgba(59, 130, 246, 0.15); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.3); }
.trust-pill-green { background: rgba(0, 240, 118, 0.15); color: #86efac; border: 1px solid rgba(0, 240, 118, 0.3); }
.trust-pill-amber { background: rgba(245, 158, 11, 0.15); color: #fde68a; border: 1px solid rgba(245, 158, 11, 0.3); }
.trust-pill-purple { background: rgba(168, 85, 247, 0.15); color: #d8b4fe; border: 1px solid rgba(168, 85, 247, 0.3); }
.trust-text-wrap p {
  margin: 0;
  font-size: 12.5px;
  color: #94a3b8;
  line-height: 1.5;
}

/* Cyber Voucher Cards & Campaign Board */
.home-promo-rail {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 40px;
}
.promo-voucher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 20px;
}
.cyber-voucher-card {
  position: relative;
  display: flex;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(20, 27, 36, 0.94) 0%, rgba(9, 13, 18, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(16px);
  overflow: hidden;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease, box-shadow 0.28s ease;
}
.cyber-voucher-card:hover {
  transform: translateY(-6px);
}

.voucher-theme-1 {
  border-color: rgba(0, 240, 118, 0.35);
  background: linear-gradient(145deg, rgba(0, 240, 118, 0.07), rgba(12, 17, 23, 0.96) 55%);
}
.voucher-theme-1:hover {
  border-color: rgba(0, 240, 118, 0.65);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 35px rgba(0, 240, 118, 0.18);
}
.voucher-theme-2 {
  border-color: rgba(56, 189, 248, 0.35);
  background: linear-gradient(145deg, rgba(56, 189, 248, 0.07), rgba(12, 17, 23, 0.96) 55%);
}
.voucher-theme-2:hover {
  border-color: rgba(56, 189, 248, 0.65);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 35px rgba(56, 189, 248, 0.18);
}
.voucher-theme-3 {
  border-color: rgba(168, 85, 247, 0.35);
  background: linear-gradient(145deg, rgba(168, 85, 247, 0.07), rgba(12, 17, 23, 0.96) 55%);
}
.voucher-theme-3:hover {
  border-color: rgba(168, 85, 247, 0.65);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 35px rgba(168, 85, 247, 0.18);
}

/* Left Voucher Stub */
.voucher-stub {
  width: 105px;
  min-width: 105px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 10px;
  background: rgba(0, 0, 0, 0.38);
  position: relative;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.stub-badge-icon {
  font-size: 26px;
  margin-bottom: 6px;
  filter: drop-shadow(0 0 10px rgba(0, 240, 118, 0.3));
}
.stub-main-val {
  font: 900 20px var(--mono);
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
}
.voucher-theme-1 .stub-main-val { color: #00f076; text-shadow: 0 0 14px rgba(0, 240, 118, 0.3); }
.voucher-theme-2 .stub-main-val { color: #38bdf8; text-shadow: 0 0 14px rgba(56, 189, 248, 0.3); }
.voucher-theme-3 .stub-main-val { color: #c084fc; text-shadow: 0 0 14px rgba(168, 85, 247, 0.3); }

.stub-sub-label {
  font: 800 9.5px var(--mono);
  color: #94a3b8;
  letter-spacing: 0.12em;
  margin-top: 5px;
}
.stub-watermark {
  position: absolute;
  bottom: -8px;
  right: -8px;
  font: 900 42px var(--mono);
  color: rgba(255, 255, 255, 0.03);
  pointer-events: none;
}

/* Perforation Divider with Notches */
.voucher-perforation {
  position: relative;
  width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.voucher-notch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #090d12;
  border: 1px solid rgba(255, 255, 255, 0.12);
  position: absolute;
  left: -10px;
  z-index: 2;
}
.voucher-notch-top { top: -10px; }
.voucher-notch-bottom { bottom: -10px; }
.voucher-dash-line {
  height: 100%;
  border-left: 2px dashed rgba(255, 255, 255, 0.14);
}

/* Voucher Main Content */
.voucher-main-content {
  flex: 1;
  padding: 22px 22px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.voucher-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.voucher-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 7px;
  font: 800 11px var(--mono);
  letter-spacing: 0.04em;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.voucher-theme-1 .voucher-badge { color: #00f076; border-color: rgba(0, 240, 118, 0.3); background: rgba(0, 240, 118, 0.12); }
.voucher-theme-2 .voucher-badge { color: #38bdf8; border-color: rgba(56, 189, 248, 0.3); background: rgba(56, 189, 248, 0.12); }
.voucher-theme-3 .voucher-badge { color: #c084fc; border-color: rgba(168, 85, 247, 0.3); background: rgba(168, 85, 247, 0.12); }

.voucher-type-pill {
  font: 700 10px var(--mono);
  color: #94a3b8;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
}
.voucher-title {
  margin: 0 0 6px;
  font-size: 16.5px;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  letter-spacing: -0.02em;
}
.voucher-desc {
  margin: 0;
  color: #94a3b8;
  font-size: 12.5px;
  line-height: 1.55;
}

/* Perks List */
.voucher-perks-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 12px 0 10px;
}
.voucher-perk-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 3px 8px;
  border-radius: 6px;
}
.voucher-theme-1 .voucher-perk-chip { color: #86efac; }
.voucher-theme-2 .voucher-perk-chip { color: #93c5fd; }
.voucher-theme-3 .voucher-perk-chip { color: #d8b4fe; }

/* Interactive Code Box */
.voucher-code-action-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  margin: 8px 0 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px dashed rgba(0, 240, 118, 0.45);
  box-shadow: inset 0 0 14px rgba(0, 240, 118, 0.05);
}
.voucher-code-display {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.code-label {
  font: 700 9px var(--mono);
  color: #64748b;
  letter-spacing: 0.1em;
}
.code-text {
  font: 800 14.5px var(--mono);
  color: #00f076;
  letter-spacing: 0.06em;
}
.voucher-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 15px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  background: linear-gradient(135deg, #00f076, #00c761);
  color: #020617;
  transition: all 0.2s ease;
  box-shadow: 0 0 12px rgba(0, 240, 118, 0.25);
}
.voucher-copy-btn:hover {
  transform: scale(1.04);
  box-shadow: 0 0 18px rgba(0, 240, 118, 0.45);
}
.voucher-copy-btn.copied {
  background: #10b981;
  color: #fff;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.4);
}

.voucher-footer {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.voucher-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  text-decoration: none;
  transition: gap 0.2s ease;
}
.voucher-cta-link:hover {
  gap: 9px;
  text-shadow: 0 0 10px rgba(0, 240, 118, 0.4);
}
.cta-arrow {
  font-size: 14px;
  transition: transform 0.2s ease;
}
.voucher-cta-link:hover .cta-arrow {
  transform: translate(2px, -2px);
}
.voucher-security-tag {
  font-size: 11px;
  color: #64748b;
}

/* Ambient Shimmer Flare */
.voucher-ambient-shimmer {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.04), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  transition: left 0.7s ease;
}
.cyber-voucher-card:hover .voucher-ambient-shimmer {
  left: 150%;
}

/* Proof & Live Status Grid */
.home-proof-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 16px;
  margin-top: 20px;
}
.proof-panel {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
.proof-panel-main {
  padding: 32px;
  background: linear-gradient(145deg, rgba(18, 25, 33, 0.88), rgba(9, 14, 18, 0.95));
}
.proof-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.proof-status-pill {
  font: 700 11px var(--mono);
  color: #00f076;
  background: rgba(0, 240, 118, 0.12);
  border: 1px solid rgba(0, 240, 118, 0.3);
  padding: 3px 9px;
  border-radius: 6px;
}
.proof-panel-main h2 {
  margin: 8px 0 12px;
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.04em;
  line-height: 1.25;
}
.proof-panel-main p {
  margin: 0;
  color: #94a3b8;
  font-size: 13.5px;
  line-height: 1.7;
}
.proof-list {
  display: grid;
  gap: 12px;
  margin: 24px 0;
}
.proof-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #cbd5e1;
}
.proof-check-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 240, 118, 0.15);
  border: 1px solid rgba(0, 240, 118, 0.35);
  color: #00f076;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.proof-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
}

/* Side Live Operations Hub */
.proof-panel-side {
  padding: 24px;
  background: linear-gradient(145deg, rgba(14, 20, 27, 0.95), rgba(6, 9, 13, 0.98));
  display: flex;
  flex-direction: column;
}
.proof-terminal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.terminal-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}
.terminal-dots > span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.terminal-dots > span:nth-child(1) { background: #ef4444; }
.terminal-dots > span:nth-child(2) { background: #f59e0b; }
.terminal-dots > span:nth-child(3) { background: #10b981; }

.terminal-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 10.5px var(--mono);
  color: #00f076;
  letter-spacing: 0.1em;
}
.terminal-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00f076;
  box-shadow: 0 0 10px #00f076;
  animation: terminal-pulse 1.8s infinite ease-in-out;
}
@keyframes terminal-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}

/* Live Ticker Box */
.proof-live-ticker {
  margin: 16px 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.live-ticker-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 8px;
}
.ticker-count {
  font: 700 10px var(--mono);
  color: #64748b;
}
.live-ticker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  animation: ticker-fade 0.35s ease;
}
@keyframes ticker-fade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.ticker-user-info {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ticker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00f076;
  box-shadow: 0 0 8px #00f076;
}
.ticker-user-info strong {
  color: #f8fafc;
}
.ticker-game {
  color: #94a3b8;
}
.ticker-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ticker-amount {
  font: 700 11px var(--mono);
  color: #00f076;
}
.ticker-time {
  font-size: 10px;
  color: #64748b;
}

/* Pipeline Timeline */
.proof-timeline-wrap {
  margin-top: 4px;
}
.proof-timeline-title {
  font: 700 11px var(--mono);
  color: #64748b;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.proof-terminal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
  color: #94a3b8;
  font-size: 12.5px;
}
.proof-terminal-row:last-child {
  border-bottom: 0;
}
.proof-terminal-row b {
  margin-left: auto;
  color: #475569;
  font: 700 11px var(--mono);
}
.proof-terminal-row.active {
  color: #f8fafc;
}
.proof-terminal-row.active b {
  color: #00f076;
}
.proof-terminal-row .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #334155;
  flex-shrink: 0;
}
.proof-terminal-row.active .status-dot {
  background: #00f076;
  box-shadow: 0 0 10px #00f076;
}

.proof-terminal-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 700 10px var(--mono);
  color: #475569;
  letter-spacing: 0.08em;
}
.server-status {
  color: #10b981;
}

@media (max-width: 980px) {
  .main-menu a, .nav-link-dropdown { padding-inline: 8px; }
  .hero-grid { gap: 34px; }
  .home-intel-grid { grid-template-columns: repeat(2, 1fr); }
  .home-howto-pipeline { grid-template-columns: repeat(2, 1fr); }
  .home-proof-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .container { width: min(100% - 28px, 620px); }
  .topbar-left { max-width: 58%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .topbar-right { gap: 8px; }
  .topbar-right > a:first-child { display: none; }
  .nav-main { height: 66px; }
  .logo { gap: 8px; }
  .logo-badge { width: 38px; height: 38px; }
  .logo-brand { font-size: 17px; }
  .logo-tagline { font-size: 7px; }
  .main-menu { display: none; }
  .account-info-text { display: none; }
  .account-link { padding: 5px; border: 0; background: transparent; }
  .header-actions { margin-left: auto; }
  .home-hero.d4-hero { padding: 46px 0 44px; }
  .hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .hero-copy { align-items: flex-start; text-align: left; }
  .hero-heading { font-size: 38px; }
  .hero-desc { font-size: 13px; }
  .hero-actions { flex-wrap: wrap; }
  .hero-promo-carousel { min-height: 230px; border-radius: 16px; box-shadow: 12px 12px 0 rgba(255,54,90,0.08), 0 16px 36px rgba(0,0,0,0.62); }
  .mini-trust { flex-wrap: wrap; gap: 7px 14px; font-size: 11px; }
  .home-intel-grid { grid-template-columns: repeat(2, 1fr); }
  .intel-item { min-height: 74px; padding: 12px 10px; }
  .intel-item:first-child { padding-left: 10px; }
  .intel-item:nth-child(even) { border-right: 0; }
  .intel-item strong { font-size: 16px; }
  .launchpad-grid { grid-template-columns: repeat(2, 1fr); }
  .launchpad-card { padding: 11px; gap: 8px; }
  .launchpad-content strong { font-size: 12px; }
  .launchpad-content small { font-size: 10px; white-space: normal; }
  .launchpad-tag { display: none; }
  .home-section-head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .trust-highlights-grid { grid-template-columns: 1fr; }
  .home-howto-pipeline, .promo-voucher-grid { grid-template-columns: 1fr; }
  .cyber-voucher-card { flex-direction: column; }
  .voucher-stub { width: 100%; min-width: 100%; flex-direction: row; gap: 14px; padding: 12px 18px; justify-content: flex-start; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .stub-badge-icon { margin-bottom: 0; font-size: 22px; }
  .stub-main-val { font-size: 18px; }
  .stub-sub-label { margin-top: 0; }
  .voucher-perforation { display: none; }
  .voucher-main-content { padding: 18px; }
  .howto-connector-arrow { display: none; }
  .page-head { padding: 36px 0 30px; }
  .page-head::after { display: none; }
  .catalog-tools { align-items: stretch; }
  .home-proof-grid { gap: 10px; }
  .proof-panel-main { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

/* Single announcement surface requested for launch campaigns. */
.announcement-backdrop {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 5, 7, 0.78);
  backdrop-filter: blur(12px);
  animation: announcement-fade 0.22s ease both;
}
.announcement-modal {
  position: relative;
  width: min(620px, 100%);
  overflow: hidden;
  border: 1px solid rgba(0,240,118,0.35);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(18,26,31,0.98), rgba(7,11,14,0.98));
  box-shadow: 0 30px 100px rgba(0,0,0,0.72), 18px 18px 0 rgba(255,54,90,0.08), 0 0 45px rgba(0,240,118,0.14);
  animation: announcement-rise 0.28s cubic-bezier(0.16,1,0.3,1) both;
}
.announcement-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  background: rgba(0,0,0,0.36);
  color: #fff;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}
.announcement-close:hover { background: var(--crimson); border-color: var(--crimson); }
.announcement-image { display: block; width: 100%; max-height: 260px; object-fit: cover; border-bottom: 1px solid rgba(255,255,255,0.08); }
.announcement-body { padding: 28px 30px 30px; }
.announcement-kicker { color: var(--green); font: 700 10px var(--mono); letter-spacing: 0.15em; }
.announcement-body h2 { margin: 10px 0 8px; color: #fff; font-size: clamp(24px, 4vw, 34px); letter-spacing: -0.05em; }
.announcement-body p { margin: 0; color: #a2b0b9; line-height: 1.75; white-space: pre-line; }
.announcement-action { margin-top: 22px; }
@keyframes announcement-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes announcement-rise { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) {
  .announcement-backdrop { padding: 14px; }
  .announcement-body { padding: 22px; }
  .announcement-image { max-height: 190px; }
}

/* Print Styles for E-Receipt & Tax Invoice */
@media print {
  body * {
    visibility: hidden;
  }
  #printable-tax-invoice,
  #printable-tax-invoice * {
    visibility: visible;
  }
  #printable-tax-invoice {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 20mm;
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }
  @page {
    size: A4 portrait;
    margin: 10mm;
  }
}

/* ============================================================
   IMPECCABLE STOREFRONT POLISH ENHANCEMENTS
   ============================================================ */

/* 1. Fulfillment Exception & Dynamic Order Status in OrderDetailModal */
.od-status-badge.pending {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}
.od-status-badge.processing {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.35);
}
.od-status-badge.exception {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
}
.od-status-badge.refunded {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.35);
}
.od-status-badge.success {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}
.od-exception-callout {
  background: #fff1f2;
  border: 1px solid #fecdd3;
  border-radius: 8px;
  padding: 14px;
  margin: 14px 0;
}
.od-exception-callout strong {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #be123c;
  font-size: 13px;
  margin-bottom: 4px;
}
.od-exception-callout p {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.5;
}
.od-exception-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.od-btn-refund {
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.od-btn-refund:hover {
  background: var(--green-dark);
}
.od-btn-support {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.od-btn-support:hover {
  border-color: var(--green);
  color: var(--green);
}
.od-security-callout {
  margin-top: 8px;
  padding: 8px 10px;
  background: #fff1f2;
  border: 1px solid #fecdd3;
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: #9f1239;
}

/* 2. Order Confirmation Modal with Live Stepper */
.order-confirm-card {
  text-align: center;
  padding: 28px 24px;
}
.order-confirm-warning {
  color: var(--accent);
  display: block;
  margin-top: 8px;
  font-size: 11px;
}
.shortfall-warning {
  display: inline-block;
  margin-top: 6px;
  color: #dc2626;
  font-size: 11px;
  font-weight: 600;
}
.order-confirm-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--green-soft);
  color: var(--green);
  font: 600 12px var(--mono);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.order-confirm-card h2 {
  font-size: 22px;
  margin: 0 0 6px;
  color: var(--ink);
}
.order-confirm-card p {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 20px;
}
.fulfillment-stepper {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin: 20px 0 24px;
  padding: 0 10px;
}
.fulfillment-stepper::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 36px;
  right: 36px;
  height: 2px;
  background: var(--line);
  z-index: 1;
}
.stepper-step {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.stepper-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--line);
  display: grid;
  place-items: center;
  font: 600 11px var(--mono);
  color: var(--muted);
  transition: all 0.2s;
}
.stepper-step.active .stepper-circle {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  box-shadow: 0 0 0 4px var(--green-soft);
}
.stepper-step.done .stepper-circle {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.stepper-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
}
.stepper-step.active .stepper-label {
  color: var(--green);
  font-weight: 700;
}
.stepper-step.done .stepper-label {
  color: var(--ink);
}
.order-confirm-summary {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 20px;
  text-align: left;
}
.order-confirm-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 5px 0;
  color: var(--muted);
}
.order-confirm-row b {
  color: var(--ink);
}
.order-confirm-code-box {
  background: #0f261e;
  color: #6ee7b7;
  border-radius: 8px;
  padding: 14px;
  margin: 14px 0;
  text-align: center;
}
.order-confirm-code {
  font: 700 18px var(--mono);
  letter-spacing: 2px;
  margin: 6px 0;
}

/* 3. Inline Form Validation */
.field input.has-error {
  border-color: #ef4444 !important;
  background-color: #fef2f2 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}
.main-field-input.has-error {
  border-color: #ef4444 !important;
  background-color: rgba(239, 68, 68, 0.08) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25) !important;
}
.field-error-msg {
  display: block;
  color: #dc2626;
  font-size: 11px;
  font-weight: 600;
  margin-top: 6px;
}

/* 4. Speed Assurance Badge (Replacing redundant Step 1) */
.speed-assurance-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 240, 118, 0.05);
  border: 1px solid rgba(0, 240, 118, 0.2);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12.5px;
  color: #00f076;
  font-weight: 600;
  margin-bottom: 18px;
}

/* 5. Mobile Sticky Checkout Bar */
.mobile-sticky-checkout {
  display: none;
}
@media(max-width: 650px) {
  .mobile-sticky-checkout {
    display: block;
    position: fixed;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    background: rgba(20, 20, 27, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 8px 16px;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.6);
    z-index: 100;
  }
  .mobile-sticky-checkout-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }
  .mobile-sticky-total small {
    display: block;
    font-size: 10px;
    color: var(--muted);
  }
  .mobile-sticky-total strong {
    font: 700 18px var(--mono);
    color: var(--green);
  }
  .mobile-sticky-btn {
    flex: 1;
    background: var(--green);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
  }
}

/* Mobile checkout: one clear CTA, with enough room for the fixed action bar. */
@media (max-width: 650px) {
  .desktop-only-checkout-action {
    display: none !important;
  }

  .detail-layout {
    padding-bottom: calc(190px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .mobile-sticky-checkout {
    padding: 10px 12px;
  }

  .mobile-sticky-checkout-inner {
    gap: 10px;
  }

  .mobile-sticky-total {
    flex: 0 0 92px;
    min-width: 0;
  }

  .mobile-sticky-total small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-sticky-btn {
    min-height: 48px;
    padding-inline: 10px;
  }
}

/* Ticket modal: allow the form to shrink and scroll inside the viewport on iOS. */
.filament-modal-body {
  min-height: 0;
}

.customer-ticket-form {
  min-height: 0;
}

@media (max-width: 720px) {
  .customer-ticket-modal {
    max-height: calc(100dvh - max(8px, env(safe-area-inset-top, 0px))) !important;
  }

  .customer-ticket-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
    position: sticky;
    bottom: -12px;
    margin-inline: -12px;
    padding: 12px !important;
    background: #18181b;
  }

  .customer-ticket-actions button {
    min-height: 44px;
    width: 100%;
  }
}

/* ============================================================
   IMPECCABLE ADMIN WORKSPACE POLISH
   ============================================================ */
.filament-nav-item:focus-visible,
.filament-pill:focus-visible,
.filament-btn-primary:focus-visible,
.filament-btn-secondary:focus-visible,
.filament-table-action-btn:focus-visible,
.filament-search-input:focus-visible {
  outline: 2px solid #34d399 !important;
  outline-offset: 2px !important;
}

.filament-modal-close,
.modal-close {
  min-width: 44px;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

.btn-success-admin:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.6);
}

/* ============================================================
   NAVBAR GAME DROPDOWN MENU (JUNEBIKOSHOP STYLE)
   ============================================================ */
.nav-dropdown-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

.nav-link-dropdown {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  height: 100%;
  color: var(--ink);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s;
}

.nav-link-dropdown:hover,
.nav-link-dropdown.active,
.nav-dropdown-item:hover .nav-link-dropdown {
  color: var(--green);
}

.nav-badge-sale {
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 999px;
  letter-spacing: 0.2px;
  animation: pulseSale 2s infinite;
}

@keyframes pulseSale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.nav-arrow {
  font-size: 9px;
  color: var(--muted);
  transition: transform 0.2s ease;
}

.nav-dropdown-item:hover .nav-arrow,
.nav-dropdown-item.open .nav-arrow {
  transform: rotate(180deg);
  color: var(--green);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% - 2px);
  left: 0;
  min-width: 260px;
  background: #14141b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 240, 118, 0.1);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.nav-dropdown-item:hover .nav-dropdown-menu,
.nav-dropdown-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.dropdown-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  text-decoration: none;
  border-radius: 10px;
  transition: background 0.15s, transform 0.15s;
  color: #ffffff;
}

.dropdown-row:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(3px);
}

.dropdown-icon-col {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 18px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.icon-uid {
  background: rgba(0, 240, 118, 0.15);
  color: #00f076;
  border-color: rgba(0, 240, 118, 0.3);
}

.icon-mail {
  background: rgba(255, 45, 77, 0.15);
  color: #ff2d4d;
  border-color: rgba(255, 45, 77, 0.3);
}

.icon-link {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  border-color: rgba(59, 130, 246, 0.3);
}

.icon-all {
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  border-color: rgba(255, 255, 255, 0.1);
}

.dropdown-text-col {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
}

.dropdown-text-col strong {
  font-size: 13px;
  color: #ffffff;
  font-weight: 700;
}

.dropdown-text-col small {
  font-size: 11px;
  color: #94a3b8;
}

.dropdown-title-badge {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pill-sale {
  background: #ff2d4d;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
}

.dropdown-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 6px 4px;
}

/* ============================================================
   TOPUP CATEGORIES FILTER BAR (GAMES CATALOG)
   ============================================================ */
.topup-type-chips {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.topup-type-chips::-webkit-scrollbar {
  display: none;
}

.topup-pill {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.topup-pill:hover {
  border-color: var(--green);
  color: var(--green);
  background: rgba(0, 240, 118, 0.08);
}

.topup-pill.active {
  background: rgba(0, 240, 118, 0.15);
  border-color: var(--green);
  color: var(--green);
  box-shadow: 0 0 16px rgba(0, 240, 118, 0.25);
}

.topup-pill-badge {
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 999px;
  margin-left: 2px;
}

.topup-category-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--green-soft);
  border: 1px solid #cce0d6;
  border-radius: 10px;
  margin-bottom: 22px;
  color: var(--green-dark);
}

.topup-category-banner.mail {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #9f1239;
}

.topup-category-banner.link {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}

.topup-category-banner .banner-icon {
  font-size: 22px;
}

.topup-category-banner p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

/* Card badges */
.game-topup-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 700;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.game-topup-badge.uid {
  background: #059669;
  color: #fff;
}

.game-topup-badge.mail {
  background: #e11d48;
  color: #fff;
}

.game-topup-badge.link {
  background: #2563eb;
  color: #fff;
}

/* ============================================================
   EMAIL & PASS AND DROP LINK FORM CONTROLS (GAME DETAIL)
   ============================================================ */
.email-pass-box {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.email-pass-box .main-field-input {
  background: transparent;
  color: #fff;
  color-scheme: dark;
}
.email-pass-box .main-field-input::placeholder { color: #94a3b8; opacity: 1; }
.email-pass-box .main-field-input:-webkit-autofill,
.email-pass-box .main-field-input:-webkit-autofill:hover,
.email-pass-box .main-field-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  transition: background-color 9999s ease-out 0s;
}

.login-provider-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.login-provider-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.2s ease;
}

.login-provider-btn:hover {
  border-color: rgba(0, 240, 118, 0.4);
  background: rgba(0, 240, 118, 0.08);
  color: #fff;
}

.login-provider-btn.active {
  background: rgba(0, 240, 118, 0.15);
  border-color: #00f076;
  color: #00f076;
  box-shadow: 0 0 12px rgba(0, 240, 118, 0.25);
}

.pass-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.pass-input-wrap input {
  padding-right: 44px;
}

.pass-toggle-btn {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  font-size: 15px;
  cursor: pointer;
  color: #94a3b8;
  padding: 4px;
  transition: color 0.15s;
}
.pass-toggle-btn:hover {
  color: #00f076;
}

.security-guarantee-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(0, 240, 118, 0.05);
  border: 1px solid rgba(0, 240, 118, 0.18);
  border-radius: 10px;
  font-size: 11.5px;
  color: #94a3b8;
  line-height: 1.55;
}
.security-guarantee-box strong {
  color: #00f076;
  font-weight: 700;
}

.drop-link-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(56, 189, 248, 0.06);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 10px;
  font-size: 12px;
  color: #7dd3fc;
  line-height: 1.5;
  margin-bottom: 14px;
}
.drop-link-guide-copy .game-guide-rich-block {
  color: #7dd3fc !important;
  margin: 0;
  padding: 0;
}

.drop-link-card {
  background: rgba(255, 255, 255, 0.03);
  border: 2px dashed rgba(56, 189, 248, 0.35);
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  margin: 14px 0;
}

.drop-link-card h4 {
  margin: 0 0 6px;
  color: #38bdf8;
  font-size: 14px;
}

.drop-link-url-box {
  display: flex;
  gap: 8px;
  margin: 10px 0;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 8px 12px;
  align-items: center;
}

.drop-link-url-box code {
  flex: 1;
  font-size: 12px;
  color: #38bdf8;
  word-break: break-all;
  text-align: left;
}

/* =============================================================
   JCR-SHOP Style Payment Methods & Adaptive Checkout Button
   ============================================================= */
.jcr-payment-card {
  transition: all 0.3s ease;
}

.jcr-payment-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.jcr-pm-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  user-select: none;
}

.jcr-pm-item:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.jcr-pm-item.selected {
  border-color: var(--green);
  background: rgba(0, 240, 118, 0.08);
  box-shadow: 0 0 20px rgba(0, 240, 118, 0.2), inset 0 0 0 1px var(--green);
}

.jcr-pm-left {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #1b1b22;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.jcr-pm-item.selected .jcr-pm-left {
  background: rgba(0, 240, 118, 0.15);
  border-color: rgba(0, 240, 118, 0.4);
  box-shadow: 0 0 12px rgba(0, 240, 118, 0.3);
}

.jcr-pm-content {
  flex: 1;
  min-width: 0;
}

.jcr-pm-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.jcr-pm-title {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
}

.jcr-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-block;
  letter-spacing: 0.2px;
}

.jcr-badge-credit {
  background: #f97316;
  color: #000;
}

.jcr-badge-instant {
  background: var(--green);
  color: #000;
  font-weight: 800;
}

.jcr-pm-sub {
  font-size: 12px;
  font-weight: 600;
  color: #fb923c;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.jcr-otp-tag {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 500;
}

.jcr-shortfall-alert {
  display: block;
  font-size: 11px;
  color: #f87171;
  font-weight: 600;
  margin-top: 3px;
}

.jcr-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 5px 0 3px;
}

.jcr-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  line-height: 1.3;
}

.jcr-tag.tag-green {
  background: rgba(0, 240, 118, 0.15);
  color: var(--green);
  border: 1px solid rgba(0, 240, 118, 0.25);
}

.jcr-tag.tag-orange {
  background: rgba(249, 115, 22, 0.15);
  color: #fb923c;
  border: 1px solid rgba(249, 115, 22, 0.25);
}

.jcr-pm-desc {
  font-size: 11px;
  color: #94a3b8;
  margin: 3px 0 0;
  line-height: 1.35;
}

.jcr-pm-radio {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 8px;
}

.jcr-radio-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  transition: all 0.2s ease;
  position: relative;
  display: block;
}

.jcr-pm-item:hover .jcr-radio-dot {
  border-color: rgba(255, 255, 255, 0.4);
}

.jcr-radio-dot.checked {
  border-color: var(--green);
  background: var(--green);
  box-shadow: 0 0 10px rgba(0, 240, 118, 0.6);
}

.jcr-radio-dot.checked::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #16a34a;
}

/* Compact Payment List */
.jcr-pm-item.compact {
  padding: 11px 14px;
  gap: 12px;
  border-radius: 10px;
}

.jcr-pm-left.compact {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  font-size: 18px;
}

.jcr-pm-title-row.compact {
  margin-bottom: 2px;
  gap: 8px;
}

.jcr-pm-compact-sub {
  font-size: 11.5px;
  color: #94a3b8;
  display: block;
}

/* On-Page Terms & Guidance Card for Checkout */
.jcr-checkout-terms-card {
  margin-top: 18px;
  border-color: rgba(239, 68, 68, 0.25);
  background: rgba(28, 27, 34, 0.95);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.jcr-checkout-terms-card .card-title span {
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.4);
}

.checkout-terms-content {
  padding-top: 12px;
}

/* Sidebar Warning Callout on GamePage (Every Game) */
.game-sidebar-warning-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.game-sidebar-warning-box .warning-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}

.game-sidebar-warning-box strong {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #f87171;
  margin-bottom: 3px;
}

.game-sidebar-warning-box p {
  font-size: 11.5px;
  line-height: 1.5;
  color: #cbd5e1;
  margin: 0;
}

/* JCR Peach Button when payment method not selected */
.checkout-btn-choose-pm {
  background: rgba(255, 94, 54, 0.15) !important;
  color: #ff7a59 !important;
  border: 1px solid rgba(255, 94, 54, 0.35) !important;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  padding: 13px 18px;
  box-shadow: 0 0 16px rgba(255, 94, 54, 0.15);
  transition: all 0.2s ease;
  cursor: pointer;
  text-align: center;
}

.checkout-btn-choose-pm:hover {
  background: rgba(255, 94, 54, 0.25) !important;
  color: #ff9e85 !important;
  transform: translateY(-1px);
  box-shadow: 0 0 24px rgba(255, 94, 54, 0.3);
}

.choose-pm-mobile {
  background: rgba(255, 94, 54, 0.15) !important;
  color: #ff7a59 !important;
}

/* Terms Agreement in Order Summary */
.order-terms-row {
  margin: 12px 0 14px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  border-radius: 8px;
}

.terms-agree-label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-size: 11px !important;
  color: #94a3b8 !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
}

.terms-agree-label input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--green);
}

.terms-link-text {
  color: var(--green);
  text-decoration: underline;
}

/* Highlight pulse when user clicks "กรุณาเลือกวิธีชำระเงิน" */
@keyframes highlightSectionPulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 240, 118, 0.6); }
  50% { box-shadow: 0 0 0 8px rgba(0, 240, 118, 0.2); }
  100% { box-shadow: 0 0 0 0 rgba(0, 240, 118, 0); }
}

.highlight-pulse {
  animation: highlightSectionPulse 1.2s ease-in-out;
  border-color: var(--green) !important;
}

/* =============================================================
   Dedicated Checkout & Cart Page Layout (JCR-SHOP Design)
   ============================================================= */
.jcr-checkout-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
  margin-top: 1.5rem;
  margin-bottom: 3rem;
}

@media (max-width: 960px) {
  .jcr-checkout-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.jcr-cart-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.jcr-pay-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.jcr-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.jcr-section-header h2 {
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}

.jcr-cart-count {
  background: rgba(0, 240, 118, 0.12);
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 9999px;
  border: 1px solid rgba(0, 240, 118, 0.25);
}

.jcr-cart-card {
  background: #15151c;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.jcr-cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 16px;
}

.jcr-cart-game-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.jcr-cart-avatar {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--game, #16a34a);
  color: #ffffff;
  font-weight: 900;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(0, 240, 118, 0.3);
}

.jcr-cart-game-info h3 {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 3px;
}

.jcr-topup-badge-sm {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  padding: 1px 8px;
  border-radius: 4px;
}

.jcr-cart-edit-link {
  font-size: 12px;
  font-weight: 600;
  color: #38bdf8;
  text-decoration: none;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 5px 10px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.jcr-cart-edit-link:hover {
  background: rgba(56, 189, 248, 0.2);
  color: #7dd3fc;
}

.jcr-cart-pkg-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.jcr-cart-pkg-title strong {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  display: block;
  margin-bottom: 6px;
}

.jcr-cart-player-val {
  font-size: 13px;
  color: #94a3b8;
  margin: 0 0 4px;
}

.jcr-cart-player-val span {
  color: #cbd5e1;
}

.jcr-cart-player-val code {
  background: #1b1b22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--green);
  font-weight: 700;
  font-size: 13px;
}

.jcr-cart-ign {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
  background: rgba(0, 240, 118, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(0, 240, 118, 0.25);
  margin-top: 4px;
}

.jcr-cart-price-col {
  text-align: right;
  flex-shrink: 0;
}

.jcr-cart-price-col .pkg-price {
  font-size: 18px;
  font-weight: 800;
  color: var(--green);
  display: block;
  font-family: var(--mono);
}

.jcr-cart-price-col .retail-strike {
  font-size: 12px;
  color: #64748b;
  display: block;
}

.jcr-cart-price-col .reseller-accent {
  color: #a855f7;
}

.jcr-cart-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.jcr-coin-earn {
  font-size: 12px;
  font-weight: 700;
  color: #f59e0b;
}

.jcr-cart-del-btn {
  background: transparent;
  border: none;
  color: var(--crimson);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.jcr-cart-del-btn:hover {
  background: rgba(255, 45, 77, 0.12);
}

.empty-cart-box {
  background: #15151c;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 60px 24px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   Hero Ambient Background & Promotion Carousel (Banner to BG & Posters)
   ========================================================================== */
.home-hero {
  position: relative;
  overflow: hidden;
}
.hero-ambient-bg {
  position: absolute;
  inset: -30px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  transition: opacity 0.5s ease, filter 0.5s ease;
}
.hero-ambient-bg .ambient-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.15);
}
.hero-ambient-bg .ambient-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 65% 45%, rgba(13, 13, 18, 0.15) 0%, rgba(13, 13, 18, 0.75) 60%, #0d0d12 95%);
}

.hero-visual-card {
  position: relative;
  z-index: 1;
}
.hero-promo-carousel {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #15151e;
  border: 1.5px solid rgba(0, 240, 118, 0.25);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 240, 118, 0.1);
  aspect-ratio: 16 / 9;
  min-height: 290px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-promo-carousel:hover {
  border-color: rgba(0, 240, 118, 0.5);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 45px rgba(0, 240, 118, 0.2);
}
.carousel-slide-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  text-decoration: none;
  color: inherit;
}
.carousel-img-wrap {
  position: absolute;
  inset: 0;
}
.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-promo-carousel:hover .carousel-img {
  transform: scale(1.04);
}
.carousel-gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(10, 10, 14, 0.95) 100%);
}
.carousel-content-overlay {
  position: absolute;
  bottom: 50px;
  left: 22px;
  right: 22px;
  z-index: 2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
.carousel-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: linear-gradient(135deg, #00f076, #059669);
  color: #000;
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  margin-bottom: 8px;
  box-shadow: 0 2px 10px rgba(0, 240, 118, 0.4);
}
.carousel-title {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 4px;
  line-height: 1.3;
}
.carousel-sub {
  font-size: 13px;
  color: #cbd5e1;
  margin: 0;
  opacity: 0.92;
  line-height: 1.4;
}
.carousel-live-tag {
  position: absolute;
  bottom: 14px;
  left: 22px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  background: rgba(10, 10, 14, 0.8);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-size: 11px;
  color: #fff;
  font-weight: 600;
}
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(15, 15, 20, 0.75);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  opacity: 0;
  transition: all 0.2s ease;
  line-height: 1;
}
.hero-promo-carousel:hover .carousel-arrow {
  opacity: 0.95;
}
.carousel-arrow:hover {
  opacity: 1 !important;
  background: #00f076;
  color: #000;
  border-color: #00f076;
  transform: translateY(-50%) scale(1.08);
}
.carousel-arrow.prev { left: 14px; }
.carousel-arrow.next { right: 14px; }
.carousel-dots {
  position: absolute;
  bottom: 16px;
  right: 22px;
  z-index: 2;
  display: flex;
  gap: 6px;
}
.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.25s ease;
}
.carousel-dot.active {
  width: 24px;
  background: #00f076;
  box-shadow: 0 0 10px rgba(0, 240, 118, 0.6);
}

/* ==========================================================================
   Admin Backend Styles for Banners, Games, Promos, Settings
   ========================================================================== */
.filament-sub-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 20px;
}
.sub-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.sub-card-header h3 {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 4px;
}
.sub-card-header p {
  font-size: 12.5px;
  color: #94a3b8;
  margin: 0;
}
.ambient-settings-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 16px;
  align-items: flex-start;
}
@media (max-width: 900px) {
  .ambient-settings-grid {
    grid-template-columns: 1fr;
  }
}
.quick-image-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.pill-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 4px 10px;
  color: #94a3b8;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}
.pill-btn:hover {
  background: rgba(0, 240, 118, 0.12);
  color: #00f076;
  border-color: rgba(0, 240, 118, 0.3);
}
.filament-range-slider {
  width: 100%;
  accent-color: #00f076;
  margin-top: 8px;
  cursor: pointer;
}

/* Promo Posters Admin Grid */
.promos-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.promo-admin-card {
  background: #181924;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.2s;
}
.promo-admin-card.inactive {
  opacity: 0.55;
  border-style: dashed;
}
.pac-thumb {
  position: relative;
  width: 100%;
  height: 140px;
  background: #101015;
}
.pac-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pac-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 240, 118, 0.9);
  color: #000;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
}
.pac-info {
  padding: 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pac-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.pac-sub {
  font-size: 12px;
  color: #94a3b8;
}
.pac-link {
  font-size: 11px;
  color: #38bdf8;
  margin-top: 6px;
  word-break: break-all;
}
.pac-actions {
  padding: 10px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  gap: 8px;
  background: rgba(0, 0, 0, 0.2);
}
.pac-toggle-btn, .pac-edit-btn, .pac-del-btn {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s;
}
.pac-toggle-btn.on {
  background: rgba(0, 240, 118, 0.1);
  color: #00f076;
  border-color: rgba(0, 240, 118, 0.3);
}
.pac-toggle-btn.off {
  background: rgba(255, 255, 255, 0.05);
  color: #94a3b8;
  border-color: rgba(255, 255, 255, 0.1);
}
.pac-edit-btn {
  background: rgba(56, 189, 248, 0.1);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.3);
}
.pac-del-btn {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
  margin-left: auto;
}

/* Games Admin Toolbar */
.games-admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.games-admin-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.admin-filter-pill {
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.admin-filter-pill.active {
  background: #00f076;
  color: #000;
  border-color: #00f076;
  font-weight: 700;
}
.table-game-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cell-game-img {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.badge-pill-sm {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap !important;
  word-break: keep-all !important;
  flex-shrink: 0;
  line-height: 1.2;
}

/* ==============================================================
   ADMIN FIXED SQUARE ICON ACTION BUTTONS (Filament Standard + Tooltip)
   No layout shift, no button expansion, rock-solid hover & click
   ============================================================== */
.admin-icon-btn,
.admin-slide-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  max-width: 32px;
  padding: 0;
  border-radius: 8px;
  font-size: 13.5px;
  line-height: 1;
  cursor: pointer;
  background: #18181b;
  border: 1px solid #3f3f46;
  color: #e4e4e7;
  position: relative;
  box-sizing: border-box;
  flex-shrink: 0;
  user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.admin-icon-btn:hover,
.admin-slide-btn:hover {
  transform: translateY(-1px);
  z-index: 20;
}

.admin-icon-btn:active,
.admin-slide-btn:active {
  transform: translateY(0);
}

.admin-icon-btn .btn-icon,
.admin-slide-btn .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  line-height: 1;
  pointer-events: none;
}

/* Hide label text to prevent expanding and layout shift */
.admin-icon-btn .btn-label,
.admin-slide-btn .btn-label {
  display: none !important;
}

/* Modern Floating Tooltip */
.admin-icon-btn[data-tooltip]::after,
.admin-slide-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  background: #141416;
  color: #f4f4f5;
  border: 1px solid #3f3f46;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  z-index: 100;
  line-height: 1.2;
}

.admin-icon-btn[data-tooltip]::before,
.admin-slide-btn[data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  border: 4px solid transparent;
  border-top-color: #3f3f46;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  z-index: 100;
}

.admin-icon-btn[data-tooltip]:hover::after,
.admin-icon-btn[data-tooltip]:hover::before,
.admin-slide-btn[data-tooltip]:hover::after,
.admin-slide-btn[data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Edit & Cost: Modern Tech Blue */
.admin-icon-btn.slide-btn-edit,
.admin-slide-btn.slide-btn-edit {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.35);
  color: #60a5fa;
}
.admin-icon-btn.slide-btn-edit:hover,
.admin-icon-btn.slide-btn-edit:focus-visible,
.admin-slide-btn.slide-btn-edit:hover,
.admin-slide-btn.slide-btn-edit:focus-visible {
  background: rgba(59, 130, 246, 0.22);
  border-color: #3b82f6;
  color: #93c5fd;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
}

/* Pricing & Packages: Radiant Emerald Green */
.admin-icon-btn.slide-btn-pricing,
.admin-slide-btn.slide-btn-pricing {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.35);
  color: #34d399;
}
.admin-icon-btn.slide-btn-pricing:hover,
.admin-icon-btn.slide-btn-pricing:focus-visible,
.admin-slide-btn.slide-btn-pricing:hover,
.admin-slide-btn.slide-btn-pricing:focus-visible {
  background: rgba(16, 185, 129, 0.22);
  border-color: #10b981;
  color: #6ee7b7;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

/* Status: Deactivate (Active state -> click to close) */
.admin-icon-btn.slide-btn-status-off,
.admin-slide-btn.slide-btn-status-off {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}
.admin-icon-btn.slide-btn-status-off:hover,
.admin-icon-btn.slide-btn-status-off:focus-visible,
.admin-slide-btn.slide-btn-status-off:hover,
.admin-slide-btn.slide-btn-status-off:focus-visible {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #fca5a5;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}

/* Status: Activate (Inactive state -> click to open) */
.admin-icon-btn.slide-btn-status-on,
.admin-slide-btn.slide-btn-status-on {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.35);
  color: #34d399;
}
.admin-icon-btn.slide-btn-status-on:hover,
.admin-icon-btn.slide-btn-status-on:focus-visible,
.admin-slide-btn.slide-btn-status-on:hover,
.admin-slide-btn.slide-btn-status-on:focus-visible {
  background: rgba(16, 185, 129, 0.22);
  border-color: #10b981;
  color: #6ee7b7;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

/* Delete: Crimson Red */
.admin-icon-btn.slide-btn-delete,
.admin-slide-btn.slide-btn-delete {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.35);
  color: #f87171;
}
.admin-icon-btn.slide-btn-delete:hover,
.admin-icon-btn.slide-btn-delete:focus-visible,
.admin-slide-btn.slide-btn-delete:hover,
.admin-slide-btn.slide-btn-delete:focus-visible {
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.45);
}
.tag-pill-sm {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}
.code-badge {
  font-family: var(--mono);
  font-size: 13px;
  color: #00f076;
  background: rgba(0, 240, 118, 0.08);
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(0, 240, 118, 0.2);
}
.table-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.filament-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 12px;
  height: 30px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid #3f3f46;
  background: #18181b;
  color: #e4e4e7;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.filament-action-btn:hover {
  background: #27272a;
  border-color: #52525b;
  color: #fff;
}

.filament-action-btn.btn-primary {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
  color: #34d399;
}

.filament-action-btn.btn-primary:hover {
  background: #10b981;
  color: #09090b;
  border-color: #10b981;
}

.filament-action-btn.btn-danger {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
}

.filament-action-btn.btn-danger:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  color: #fff !important;
  border-color: rgba(239, 68, 68, 0.6) !important;
}

/* ==============================================================
   ADMIN ORDERS & FULFILLMENT MANAGEMENT BOARD
   ============================================================== */
.orders-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.order-metric-card {
  background: #18181b;
  border: 1px solid #27272a;
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.order-metric-card:hover {
  border-color: #3f3f46;
  transform: translateY(-2px);
}
.order-metric-icon {
  font-size: 24px;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
}
.order-metric-val {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}
.order-metric-lbl {
  font-size: 11px;
  font-weight: 600;
  color: #a1a1aa;
}

.order-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.order-status-badge.pending {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}
.order-status-badge.processing {
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: #60a5fa;
}
.order-status-badge.action_required {
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
  animation: pulse-soft 2s infinite ease-in-out;
}
.order-status-badge.completed {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
}
.order-status-badge.refunded {
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #c084fc;
}
.order-status-badge.cancelled,
.order-status-badge.failed {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #f87171;
}

.order-status-badge .spin-icon {
  display: inline-block;
  animation: spin-soft 2s linear infinite;
  line-height: 1;
}

@keyframes spin-soft {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.new-order-highlight {
  border: 1px solid rgba(0, 240, 118, 0.6) !important;
  box-shadow: 0 0 16px rgba(0, 240, 118, 0.25) !important;
  background: rgba(0, 240, 118, 0.04) !important;
  animation: new-order-pulse 3s ease-out;
}

@keyframes new-order-pulse {
  0% {
    box-shadow: 0 0 24px rgba(0, 240, 118, 0.6);
    border-color: #00f076;
  }
  100% {
    box-shadow: 0 0 16px rgba(0, 240, 118, 0.25);
    border-color: rgba(0, 240, 118, 0.6);
  }
}

.live-tracker-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(6, 182, 212, 0.08) 100%);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 10px;
  margin-bottom: 14px;
  font-size: 12.5px;
  color: #a7f3d0;
}
.live-tracker-indicator .live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  display: inline-block;
  margin-right: 6px;
  box-shadow: 0 0 8px #10b981;
  animation: pulse-soft 1.5s infinite ease-in-out;
}

@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.order-id-chip {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: #f4f4f5;
  background: rgba(255, 255, 255, 0.05);
  padding: 3px 7px;
  border-radius: 5px;
  border: 1px solid #27272a;
}

.copy-chip-btn {
  background: #27272a;
  border: 1px solid #3f3f46;
  color: #d4d4d8;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
}
.copy-chip-btn:hover {
  background: #3f3f46;
  color: #fff;
  border-color: #52525b;
}
.copy-chip-btn.copied {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.5);
  color: #34d399;
}

.order-credentials-card {
  background: #09090b;
  border: 1px solid #27272a;
  border-radius: 8px;
  padding: 14px;
  margin: 12px 0;
}
.order-credential-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 12px;
}
.order-credential-row:last-child {
  border-bottom: none;
}
.order-credential-label {
  color: #71717a;
  font-weight: 600;
}
.order-credential-value {
  font-family: var(--mono);
  color: #f4f4f5;
  display: flex;
  align-items: center;
  gap: 8px;
}

.order-modal-action-btn {
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  transition: all 0.15s;
}
.order-modal-action-btn.btn-complete {
  background: #10b981;
  color: #09090b;
}
.order-modal-action-btn.btn-complete:hover {
  background: #059669;
  color: #fff;
}
.order-modal-action-btn.btn-progress {
  background: rgba(59, 130, 246, 0.18);
  border: 1px solid rgba(59, 130, 246, 0.4);
  color: #60a5fa;
}
.order-modal-action-btn.btn-progress:hover {
  background: rgba(59, 130, 246, 0.3);
}
.order-modal-action-btn.btn-request-info {
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}
.order-modal-action-btn.btn-request-info:hover {
  background: rgba(245, 158, 11, 0.3);
}
.order-modal-action-btn.btn-refund {
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
}
.order-modal-action-btn.btn-refund:hover {
  background: rgba(239, 68, 68, 0.3);
}

/* ==============================================================
   ADMIN CUSTOMER SUPPORT TICKETS BOARD
   ============================================================== */
.ticket-layout-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 16px;
  min-height: 600px;
}
@media (max-width: 991px) {
  .ticket-layout-grid {
    grid-template-columns: 1fr;
  }
}

.ticket-item-card {
  background: #18181b;
  border: 1px solid #27272a;
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-bottom: 8px;
}
.ticket-item-card:hover {
  border-color: #3f3f46;
  background: #202024;
}
.ticket-item-card.active {
  background: #27272a;
  border-color: #10b981;
}

.ticket-status-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ticket-status-pill.open {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}
.ticket-status-pill.in_progress {
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: #60a5fa;
}
.ticket-status-pill.resolved {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
}
.ticket-status-pill.closed {
  background: rgba(113, 113, 122, 0.15);
  border: 1px solid rgba(113, 113, 122, 0.35);
  color: #a1a1aa;
}

.ticket-priority-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}
.ticket-priority-tag.urgent {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
}
.ticket-priority-tag.high {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}
.ticket-priority-tag.normal {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}
.ticket-priority-tag.low {
  background: rgba(255, 255, 255, 0.06);
  color: #a1a1aa;
}

/* Chat thread pane */
.ticket-chat-pane {
  background: #18181b;
  border: 1px solid #27272a;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  height: 650px;
  overflow: hidden;
}

.ticket-chat-header {
  padding: 14px 18px;
  border-bottom: 1px solid #27272a;
  background: #141416;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.ticket-chat-messages {
  flex: 1;
  padding: 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #0d0d0f;
}

.chat-bubble {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
}
.chat-bubble.customer {
  align-self: flex-start;
  background: #27272a;
  color: #f4f4f5;
  border-bottom-left-radius: 2px;
}
.chat-bubble.staff {
  align-self: flex-end;
  background: #064e3b;
  border: 1px solid #059669;
  color: #fff;
  border-bottom-right-radius: 2px;
}

.chat-bubble-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 11px;
}
.chat-bubble.customer .chat-bubble-meta {
  color: #a1a1aa;
}
.chat-bubble.staff .chat-bubble-meta {
  color: #6ee7b7;
  justify-content: flex-end;
}

.quick-reply-pill {
  background: #202024;
  border: 1px solid #3f3f46;
  color: #d4d4d8;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s;
}
.quick-reply-pill:hover {
  background: #27272a;
  color: #10b981;
  border-color: #10b981;
}

.ticket-chat-input-box {
  padding: 12px 16px;
  background: #141416;
  border-top: 1px solid #27272a;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Typing Indicator Animation & Bubbles */
.chat-typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 12px;
  animation: fadeInTyping 0.25s ease-out;
  margin-bottom: 2px;
}
.chat-typing-indicator.customer-view {
  align-self: flex-start;
  background: #1f1f23;
  border: 1px solid #2e2e33;
  color: #a1a1aa;
}
.chat-typing-indicator.admin-view {
  align-self: flex-start;
  background: #27272a;
  border: 1px solid #3f3f46;
  color: #d4d4d8;
}
.chat-typing-indicator .typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 2px;
}
.chat-typing-indicator .typing-dot {
  width: 5px;
  height: 5px;
  background-color: #10b981;
  border-radius: 50%;
  opacity: 0.4;
  animation: typingBounce 1.4s infinite ease-in-out both;
}
.chat-typing-indicator .typing-dot:nth-child(1) {
  animation-delay: -0.32s;
}
.chat-typing-indicator .typing-dot:nth-child(2) {
  animation-delay: -0.16s;
}
.chat-typing-indicator .typing-dot:nth-child(3) {
  animation-delay: 0s;
}

@keyframes typingBounce {
  0%, 80%, 100% {
    transform: scale(0.7);
    opacity: 0.35;
  }
  40% {
    transform: scale(1.15);
    opacity: 1;
  }
}
@keyframes fadeInTyping {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==============================================================
   ADMIN DEPOSIT SLIPS & BANK VERIFICATION
   ============================================================== */
.slip-thumb-wrap {
  width: 48px;
  height: 64px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #3f3f46;
  cursor: pointer;
  background: #09090b;
  position: relative;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.slip-thumb-wrap:hover {
  transform: scale(1.08);
  border-color: #10b981;
}
.slip-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slip-zoom-modal-content {
  display: flex;
  gap: 20px;
  max-width: 820px;
}
@media (max-width: 768px) {
  .slip-zoom-modal-content {
    flex-direction: column;
  }
}
.slip-full-img {
  max-width: 360px;
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
  border: 1px solid #3f3f46;
}

/* Customer Support Tickets View on Storefront */
.customer-ticket-card {
  background: #141416;
  border: 1px solid #27272a;
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 12px;
  transition: all 0.2s ease;
}
.customer-ticket-card:hover {
  border-color: #3f3f46;
}
.customer-ticket-card.has-reply {
  border-color: rgba(16, 185, 129, 0.4);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.05) 0%, #141416 100%);
}
.customer-chat-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 420px;
  overflow-y: auto;
  padding: 16px;
  background: #0d0d0f;
  border-radius: 8px;
  border: 1px solid #222226;
  margin-bottom: 14px;
}
.customer-chat-bubble {
  max-width: 82%;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
}
.customer-chat-bubble.customer {
  align-self: flex-end;
  background: #10b981;
  color: #09090b;
  font-weight: 500;
  border-radius: 14px 14px 2px 14px;
}
.customer-chat-bubble.staff {
  align-self: flex-start;
  background: #1f1f23;
  color: #f4f4f5;
  border: 1px solid #2e2e33;
  border-radius: 14px 14px 14px 2px;
}
.customer-chat-meta {
  font-size: 11px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.customer-chat-bubble.customer .customer-chat-meta {
  color: rgba(0, 0, 0, 0.6);
  justify-content: flex-end;
}
.customer-chat-bubble.staff .customer-chat-meta {
  color: #a1a1aa;
}

/* Customer Support Chat Modal: Fixed container & locked scroll */
.customer-chat-modal {
  max-width: 560px;
  width: 94%;
  height: 600px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: #141416;
  border: 1px solid #27272a;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65);
}

.customer-chat-modal .filament-modal-header {
  flex-shrink: 0;
  padding: 14px 18px;
  border-bottom: 1px solid #222226;
  background: #18181b;
}

.customer-chat-modal .customer-chat-container {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  padding: 16px;
  background: #0d0d0f;
  margin-bottom: 0;
  border-radius: 0;
  border: none;
}

.customer-chat-modal .customer-chat-footer {
  flex-shrink: 0;
  padding: 12px 16px;
  background: #141416;
  border-top: 1px solid #222226;
}

/* Rating CSAT Widget */
.csat-rating-box {
  background: #18181b;
  border: 1px solid #2e2e33;
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 8px;
}

.star-rating-row {
  display: flex;
  gap: 8px;
  margin: 8px 0;
  font-size: 26px;
  cursor: pointer;
}

.star-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 24px;
  line-height: 1;
  transition: transform 0.15s ease;
}

.star-btn:hover {
  transform: scale(1.25);
}

.csat-tag-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0;
}

.csat-tag-pill {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  background: #27272a;
  color: #a1a1aa;
  border: 1px solid #3f3f46;
  cursor: pointer;
  transition: all 0.15s ease;
}

.csat-tag-pill:hover,
.csat-tag-pill.selected {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.4);
}

/* ============================================================
   COOKIE CONSENT BANNER (PDPA COMPLIANT - D4 THEME)
   ============================================================ */
.cookie-consent-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 920px;
  background: rgba(14, 20, 30, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(16, 185, 129, 0.28);
  box-shadow: 0 20px 45px -8px rgba(0, 0, 0, 0.75), 0 0 20px rgba(16, 185, 129, 0.12);
  border-radius: 18px;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  z-index: 9995;
  animation: slideUpCookie 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideUpCookie {
  from {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.cookie-consent-content {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.cookie-icon-wrap {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.18) 0%, rgba(16, 185, 129, 0.03) 70%);
  border: 1px solid rgba(16, 185, 129, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cookie-emoji {
  font-size: 22px;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(16, 185, 129, 0.3));
}

.cookie-text-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.cookie-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #e4e4e7;
}

.cookie-status-hint {
  font-size: 11.5px;
  color: #71717a;
}

.cookie-privacy-link {
  color: #10b981;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.cookie-privacy-link:hover {
  color: #34d399;
}

.cookie-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.cookie-btn {
  padding: 8px 20px;
  border-radius: 9999px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.cookie-btn-decline {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #a1a1aa;
}

.cookie-btn-decline:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
}

.cookie-btn-accept {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  color: #04241a;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.38);
}

.cookie-btn-accept:hover {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.55);
}

/* Mobile Cookie Banner: sits nicely above mobile-bottom-nav */
@media (max-width: 768px) {
  .cookie-consent-bar {
    bottom: 74px; /* Sits above mobile bottom nav */
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    transform: none;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 14px;
    gap: 12px;
    border-radius: 14px;
  }

  @keyframes slideUpCookie {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .cookie-text {
    font-size: 12px;
  }

  .cookie-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .cookie-btn {
    text-align: center;
    padding: 8px 12px;
    font-size: 13px;
  }
}

/* ============================================================
   PRIVACY POLICY PAGE (PDPA)
   ============================================================ */
.privacy-page {
  min-height: 80vh;
  padding-bottom: 60px;
}

.privacy-hero {
  padding: 48px 0 36px;
  background: radial-gradient(circle at 50% 0%, rgba(16, 185, 129, 0.12) 0%, rgba(9, 12, 18, 0.4) 70%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
}

.privacy-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 9999px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}

.privacy-title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}

.privacy-subtitle {
  max-width: 680px;
  margin: 0 auto 16px;
  color: #a1a1aa;
  font-size: 14px;
  line-height: 1.6;
}

.privacy-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 12px;
  color: #71717a;
}

.privacy-body {
  margin-top: 32px;
}

.privacy-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  align-items: start;
}

.privacy-toc {
  position: sticky;
  top: 96px;
  background: rgba(18, 24, 38, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 18px 16px;
}

.privacy-toc h4 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: #34d399;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.privacy-toc nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.privacy-toc a {
  font-size: 12.5px;
  color: #a1a1aa;
  padding: 6px 10px;
  border-radius: 8px;
  transition: all 0.15s ease;
  line-height: 1.4;
}

.privacy-toc a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  padding-left: 14px;
}

.privacy-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.privacy-card {
  background: rgba(18, 24, 38, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 24px 28px;
  scroll-margin-top: 100px;
}

.privacy-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 12px;
}

.p-num {
  font-family: monospace;
  font-size: 14px;
  font-weight: 800;
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 4px 8px;
  border-radius: 6px;
}

.privacy-card-header h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #f4f4f5;
}

.privacy-card p {
  color: #a1a1aa;
  font-size: 13.5px;
  line-height: 1.7;
  margin: 0 0 14px;
}

.privacy-list {
  margin: 0;
  padding-left: 20px;
  color: #d4d4d8;
  font-size: 13.5px;
  line-height: 1.75;
}

.privacy-list li {
  margin-bottom: 10px;
}

.privacy-list strong {
  color: #f4f4f5;
}

.privacy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.p-box {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 16px;
}

.p-box h4 {
  margin: 0 0 6px;
  font-size: 14px;
  color: #34d399;
}

.p-box p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #a1a1aa;
}

.rights-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.right-item {
  background: rgba(0, 0, 0, 0.2);
  border-left: 3px solid #10b981;
  padding: 12px 16px;
  border-radius: 0 10px 10px 0;
  font-size: 13px;
  color: #d4d4d8;
  line-height: 1.6;
}

.right-item strong {
  color: #fff;
  display: block;
  margin-bottom: 2px;
}

.p-tip {
  background: rgba(16, 185, 129, 0.08);
  border: 1px dashed rgba(16, 185, 129, 0.3);
  padding: 12px 16px;
  border-radius: 10px;
  color: #34d399 !important;
  font-size: 13px !important;
  margin-top: 14px !important;
}

.contact-box-card {
  background: linear-gradient(145deg, rgba(16, 185, 129, 0.08) 0%, rgba(18, 24, 38, 0.8) 100%);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 14px;
  padding: 20px 24px;
  margin-top: 12px;
}

.contact-box-card h3 {
  margin: 0 0 12px;
  font-size: 15px;
  color: #34d399;
}

.contact-box-card p {
  margin: 0 0 8px;
  font-size: 13px;
  color: #e4e4e7;
  line-height: 1.6;
}

.contact-box-card p:last-child {
  margin-bottom: 0;
}

.footer-legal-links {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer-legal-link {
  color: #a1a1aa;
  font-size: 12px;
  transition: color 0.15s ease;
  text-decoration: none;
}

.footer-legal-link:hover {
  color: #34d399;
}

.footer-legal-dot {
  color: #52525b;
  font-size: 10px;
}

@media (max-width: 900px) {
  .privacy-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .privacy-toc {
    display: none;
  }

  .privacy-card {
    padding: 18px 18px;
  }
}

/* ==========================================================================
   Admin Staff Workspace Login Screen
   ========================================================================== */
.admin-login-screen {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px 64px;
  background: radial-gradient(circle at 50% 20%, rgba(16, 185, 129, 0.08), transparent 60%),
              radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.05), transparent 50%),
              #090d16;
}

.admin-login-card {
  width: 100%;
  max-width: 440px;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7),
              0 0 0 1px rgba(255, 255, 255, 0.05),
              0 0 30px -10px rgba(16, 185, 129, 0.15);
  padding: 36px 32px;
  backdrop-filter: blur(12px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-login-brand {
  text-align: center;
  margin-bottom: 28px;
}

.admin-login-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(59, 130, 246, 0.15));
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 16px;
  box-shadow: 0 8px 16px -4px rgba(16, 185, 129, 0.25);
}

.admin-login-brand h2 {
  font-size: 22px;
  font-weight: 700;
  color: #f8fafc;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.admin-login-brand p {
  font-size: 13px;
  color: #94a3b8;
  margin: 0;
  line-height: 1.5;
}

.admin-login-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.admin-login-alert {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}

.admin-login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-login-field label {
  font-size: 12px;
  font-weight: 600;
  color: #cbd5e1;
  letter-spacing: 0.01em;
}

.admin-login-field input {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 12px 14px;
  color: #f8fafc;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-login-field input:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.admin-login-field input::placeholder {
  color: #64748b;
}

.admin-login-submit {
  margin-top: 6px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 13px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.admin-login-submit:hover:not(:disabled) {
  background: linear-gradient(135deg, #34d399, #10b981);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.45);
}

.admin-login-submit:active:not(:disabled) {
  transform: translateY(0);
}

.admin-login-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.admin-login-sublink {
  text-align: center;
  margin-top: 8px;
}

.admin-login-sublink a {
  color: #94a3b8;
  font-size: 13px;
  text-decoration: none;
  transition: color 0.15s ease;
}

.admin-login-sublink a:hover {
  color: #10b981;
  text-decoration: underline;
}

@media (max-width: 480px) {
  .admin-login-card {
    padding: 24px 20px;
    border-radius: 14px;
  }

  .admin-login-brand h2 {
    font-size: 20px;
  }
}

/* ==========================================================================
   Pre-Payment Advice & Terms Confirmation Modal (OverTopup Style)
   ========================================================================== */
.preconfirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 10, 14, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: preconfirmFadeIn 0.22s ease-out;
}

@keyframes preconfirmFadeIn {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.preconfirm-dialog {
  display: grid;
  grid-template-columns: 1.18fr 1fr;
  gap: 22px;
  max-width: 920px;
  width: 100%;
  max-height: 92vh;
  box-sizing: border-box;
}

.preconfirm-card {
  background: #1c1b22;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  padding: 26px 28px;
  color: #e2e8f0;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 1px rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
}

.preconfirm-terms-card {
  justify-content: space-between;
}

.preconfirm-summary-card {
  gap: 16px;
}

.preconfirm-card-title {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 18px 0;
  letter-spacing: -0.2px;
}

.preconfirm-terms-title {
  text-align: center;
  margin-bottom: 22px;
}

.preconfirm-bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.preconfirm-bullet-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.68;
  color: #cbd5e1;
}

.preconfirm-bullet-dash {
  color: #ef4444;
  font-weight: 700;
  flex-shrink: 0;
  font-size: 15px;
  line-height: 1.5;
}

.preconfirm-bullet-content {
  flex: 1;
}

.preconfirm-text-red {
  color: #f87171;
  font-weight: 700;
}

.preconfirm-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  vertical-align: middle;
  margin: 0 5px;
  transition: all 0.18s ease;
  line-height: 1;
}

.preconfirm-info-btn:hover {
  background: #00f076;
  color: #000000;
  transform: scale(1.1);
}

.preconfirm-terms-agree-wrap {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.preconfirm-checkbox-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  font-size: 14.5px;
  font-weight: 600;
  color: #ffffff;
}

.preconfirm-checkbox-input {
  width: 19px;
  height: 19px;
  accent-color: #00f076 !important;
  cursor: pointer;
  border-radius: 4px;
}

/* Right Summary Card */
.preconfirm-info-rows {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.preconfirm-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13.5px;
}

.preconfirm-row-label {
  color: #94a3b8;
  font-weight: 500;
}

.preconfirm-row-val {
  color: #ffffff;
  font-weight: 600;
  text-align: right;
}

.preconfirm-row-val.mono {
  font-family: var(--mono, ui-monospace, monospace);
  letter-spacing: 0.3px;
}

.preconfirm-section-header {
  font-size: 12.5px;
  color: #94a3b8;
  margin-top: 4px;
  margin-bottom: 2px;
  font-weight: 500;
}

.preconfirm-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 0;
}

.preconfirm-pm-val {
  text-align: right;
}

.preconfirm-pm-badge {
  display: block;
  font-size: 11.5px;
  color: #94a3b8;
  font-weight: 400;
  margin-top: 2px;
}

.preconfirm-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 4px;
  font-size: 14px;
}

.preconfirm-total-label {
  color: #ffffff;
  font-weight: 600;
}

.preconfirm-total-amount {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  font-family: var(--mono, ui-monospace, monospace);
}

/* Submit & Sub Action Buttons (Neon Green Border Style) */
.btn-preconfirm-submit {
  width: 100%;
  background: #0d1e15;
  border: 2px solid #00f076;
  color: #ffffff;
  padding: 13px 20px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(0, 240, 118, 0.4), inset 0 0 8px rgba(0, 240, 118, 0.15);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.2px;
  margin-top: 8px;
}

.btn-preconfirm-submit:hover:not(:disabled) {
  background: #00f076;
  color: #000000;
  box-shadow: 0 0 26px rgba(0, 240, 118, 0.8), 0 4px 16px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

.btn-preconfirm-submit:active:not(:disabled) {
  transform: translateY(0);
}

.btn-preconfirm-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: none;
  background: rgba(255, 255, 255, 0.03);
}

.preconfirm-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 2px;
}

.btn-preconfirm-back {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}

.btn-preconfirm-back:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}

.btn-preconfirm-cancel {
  background: transparent;
  border: 1px solid rgba(244, 63, 94, 0.35);
  color: #fb7185;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}

.btn-preconfirm-cancel:hover {
  background: rgba(244, 63, 94, 0.14);
  color: #ffffff;
  border-color: #f43f5e;
}

/* Responsive for Mobile Devices */
@media (max-width: 768px) {
  .preconfirm-backdrop {
    padding: 14px;
    align-items: flex-start;
  }

  .preconfirm-dialog {
    grid-template-columns: 1fr;
    gap: 16px;
    max-height: 94vh;
    overflow-y: auto;
    padding-bottom: 20px;
  }

  .preconfirm-card {
    padding: 20px 18px;
  }

  .preconfirm-card-title {
    font-size: 16.5px;
    margin-bottom: 14px;
  }

  .preconfirm-bullet-item {
    font-size: 13px;
  }
}

/* =============================================================
   REFERRAL & AFFILIATE PROGRAM STYLES (แนะนำเพื่อนรับ 5%)
   ============================================================= */
.profile-referral-mini {
  background: linear-gradient(135deg, rgba(0, 240, 118, 0.06), rgba(59, 130, 246, 0.06));
  border: 1px solid rgba(0, 240, 118, 0.22);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0 16px;
  transition: border-color 0.2s;
}

.profile-referral-mini:hover {
  border-color: rgba(0, 240, 118, 0.45);
}

.profile-referral-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.profile-referral-header .rate-badge {
  background: rgba(0, 240, 118, 0.18);
  color: #00f076;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
}

.profile-referral-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.4);
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 8px;
}

.profile-referral-box code {
  font-family: monospace;
  font-weight: 800;
  color: #00f076;
  letter-spacing: 0.5px;
  font-size: 13px;
}

.profile-referral-link-btn {
  background: none;
  border: none;
  color: #38bdf8;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-align: left;
  width: 100%;
  display: block;
  transition: color 0.2s;
}

.profile-referral-link-btn:hover {
  color: #7dd3fc;
  text-decoration: underline;
}

/* Full Referral Tab Page Layout */
.referral-container {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.referral-hero-card {
  background: linear-gradient(135deg, #09261a 0%, #0f172a 100%);
  border: 1px solid rgba(0, 240, 118, 0.35);
  border-radius: 16px;
  padding: 24px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  box-shadow: 0 10px 30px rgba(0, 240, 118, 0.08);
  position: relative;
  overflow: hidden;
}

.referral-hero-content {
  flex: 1;
}

.referral-badge-pill {
  display: inline-block;
  background: rgba(0, 240, 118, 0.15);
  color: #00f076;
  border: 1px solid rgba(0, 240, 118, 0.35);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
}

.referral-hero-content h2 {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin: 4px 0 8px;
}

.referral-hero-content p {
  color: var(--muted, #a1a1aa);
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0;
}

.referral-hero-rate {
  background: rgba(0, 240, 118, 0.1);
  border: 2px solid #00f076;
  border-radius: 16px;
  padding: 16px 22px;
  text-align: center;
  min-width: 125px;
  box-shadow: 0 0 20px rgba(0, 240, 118, 0.2);
}

.referral-hero-rate .rate-num {
  font-size: 38px;
  font-weight: 900;
  color: #00f076;
  line-height: 1;
}

.referral-hero-rate .rate-label {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  margin-top: 4px;
  letter-spacing: 0.5px;
}

/* Referral Share Card */
.referral-share-card {
  background: var(--card-bg, #18181b);
  border: 1px solid var(--border-color, #27272a);
  border-radius: 16px;
  padding: 24px;
}

.referral-share-card h3 {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 4px;
}

.referral-share-subtitle {
  color: var(--muted, #a1a1aa);
  font-size: 13px;
  margin-bottom: 18px;
}

.referral-inputs-row {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.2fr);
  gap: 16px;
  align-items: flex-end;
}

@media (max-width: 768px) {
  .referral-inputs-row {
    grid-template-columns: 1fr;
  }
}

.referral-input-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
}

.referral-input-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #a1a1aa);
  margin-bottom: 6px;
}

.referral-copy-field {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}

.referral-copy-field input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid #3f3f46;
  border-radius: 8px;
  padding: 9px 12px;
  color: #fff;
  font-size: 13.5px;
  box-sizing: border-box;
}

.referral-copy-field input.code-input {
  font-family: monospace;
  font-weight: 800;
  letter-spacing: 1px;
  color: #00f076;
}

.referral-copy-field button {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
}

/* KPI Cards Grid */
.referral-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.ref-stat-card {
  background: var(--card-bg, #18181b);
  border: 1px solid var(--border-color, #27272a);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  gap: 16px;
  align-items: center;
}

.ref-stat-card.highlight {
  border-color: rgba(0, 240, 118, 0.4);
  background: linear-gradient(135deg, rgba(0, 240, 118, 0.05), #18181b);
}

.ref-stat-icon {
  font-size: 28px;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

.ref-stat-icon.gold {
  background: rgba(245, 158, 11, 0.15);
}

.ref-stat-icon.glow {
  background: rgba(0, 240, 118, 0.15);
}

.ref-stat-info {
  flex: 1;
}

.ref-stat-info small {
  font-size: 12px;
  color: var(--muted, #a1a1aa);
  display: block;
}

.ref-stat-value {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  margin: 2px 0;
}

.ref-stat-value .unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted, #a1a1aa);
}

.ref-stat-sub {
  font-size: 11.5px;
  color: var(--muted, #a1a1aa);
  display: block;
}

.btn-convert-referral {
  margin-top: 10px;
  background: linear-gradient(135deg, #00f076, #10b981) !important;
  color: #09090b !important;
  font-weight: 800 !important;
  border: none !important;
  padding: 9px 14px !important;
  border-radius: 10px !important;
  font-size: 12.5px !important;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 240, 118, 0.25);
  transition: opacity 0.2s, transform 0.15s;
}

.btn-convert-referral:hover:not(:disabled) {
  transform: translateY(-1px);
}

.btn-convert-referral:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* 3-Step Guide */
.referral-guide-box {
  background: var(--card-bg, #18181b);
  border: 1px solid var(--border-color, #27272a);
  border-radius: 16px;
  padding: 24px;
}

.referral-guide-box h3 {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  margin: 0;
}

.referral-steps-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.ref-step-item {
  flex: 1;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 20px 14px;
  position: relative;
}

.step-badge {
  display: inline-block;
  background: rgba(59, 130, 246, 0.15);
  color: #38bdf8;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  margin-bottom: 8px;
}

.step-icon {
  font-size: 30px;
  margin-bottom: 8px;
}

.ref-step-item h4 {
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

.ref-step-item p {
  font-size: 12px;
  color: var(--muted, #a1a1aa);
  line-height: 1.5;
  margin: 0;
}

.ref-step-arrow {
  font-size: 22px;
  color: var(--muted, #71717a);
  font-weight: bold;
}

/* Referral History Box */
.referral-history-box {
  background: var(--card-bg, #18181b);
  border: 1px solid var(--border-color, #27272a);
  border-radius: 16px;
  padding: 24px;
}

.referral-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.referral-history-header h3 {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 4px;
}

.referral-history-header .subtitle {
  font-size: 12.5px;
  color: var(--muted, #a1a1aa);
  margin: 0;
}

.referral-table-wrap {
  overflow-x: auto;
}

.referral-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.referral-table th {
  padding: 12px 14px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted, #a1a1aa);
  border-bottom: 1px solid #27272a;
}

.referral-table td {
  padding: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #fff;
}

.rate-tag {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 11.5px;
}

@media (max-width: 768px) {
  .referral-hero-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .referral-steps-grid {
    flex-direction: column;
  }
  .ref-step-arrow {
    transform: rotate(90deg);
    margin: 4px 0;
  }
}

/* ========================================================================= */
/* 🎮 D4Topup - Advanced Scrollable Package Selector & Filter Toolbar        */
/* ========================================================================= */

.pkg-selector-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Header summary bar */
.pkg-header-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.pkg-counter-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  color: #cbd5e1;
}

.pkg-counter-tag strong {
  color: #00f076;
}

.pkg-view-toggle {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
}

.pkg-view-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}

.pkg-view-toggle-btn:hover {
  color: #fff;
}

.pkg-view-toggle-btn.active {
  background: rgba(0, 240, 118, 0.15);
  color: #00f076;
  box-shadow: 0 0 10px rgba(0, 240, 118, 0.15);
}

/* Search and Sort Toolbar */
.pkg-controls-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pkg-search-box {
  flex: 1;
  min-width: 200px;
  position: relative;
  display: flex;
  align-items: center;
}

.pkg-search-icon {
  position: absolute;
  left: 12px;
  color: #94a3b8;
  font-size: 13px;
  pointer-events: none;
}

.pkg-search-input {
  width: 100%;
  background: #14141a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 10px 34px 10px 34px;
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  transition: all 0.2s ease;
}

.pkg-search-input:focus {
  outline: none;
  border-color: #00f076;
  box-shadow: 0 0 14px rgba(0, 240, 118, 0.2);
  background: #181922;
}

.pkg-search-clear-btn {
  position: absolute;
  right: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #94a3b8;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
}

.pkg-search-clear-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.pkg-sort-dropdown {
  background: #14141a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 10px 14px;
  color: #e2e8f0;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
}

.pkg-sort-dropdown:focus {
  border-color: #00f076;
}

/* Price Range Pills */
.pkg-price-filter-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.pkg-filter-pill-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #94a3b8;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.18s ease;
}

.pkg-filter-pill-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

.pkg-filter-pill-btn.active {
  background: rgba(0, 240, 118, 0.12);
  border-color: #00f076;
  color: #00f076;
  box-shadow: 0 0 12px rgba(0, 240, 118, 0.2);
}

/* Scrollable Container with Smooth Inner Scroll */
.pkg-scroll-outer {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.18);
  padding: 12px;
}

.pkg-scroll-container {
  max-height: 440px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 6px 6px 4px;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pkg-group + .pkg-group {
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  padding-top: 16px;
}

.pkg-group-title {
  margin: 0 0 10px;
  color: #d8dee9;
  font-size: 13px;
  font-weight: 800;
}

/* Modern WebKit Scrollbar */
.pkg-scroll-container::-webkit-scrollbar {
  width: 6px;
}

.pkg-scroll-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
}

.pkg-scroll-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 10px;
}

.pkg-scroll-container::-webkit-scrollbar-thumb:hover {
  background: #00f076;
}

/* Bottom Scroll Indicator */
.pkg-scroll-hint-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px 2px;
  color: #64748b;
  font-size: 11.5px;
  font-weight: 500;
  text-align: center;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
  margin-top: 8px;
}

/* List View Style (Alternative to Grid) */
.package-options.list-mode {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.package-options.list-mode .pkg-card {
  width: 100%;
}

.package-options.list-mode .pkg-content {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  min-height: auto;
  padding: 12px 18px;
  text-align: left;
}

.package-options.list-mode .pkg-icon-wrap {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  margin: 0 12px 0 0;
}

.package-options.list-mode .pkg-product-img {
  max-width: 40px;
  max-height: 40px;
}

.package-options.list-mode .pkg-top-row {
  width: auto;
  flex: 1;
  min-width: 0;
  justify-content: flex-start;
  gap: 4px;
}

.package-options.list-mode .pkg-amount {
  min-height: 0;
  -webkit-line-clamp: 1;
}

.package-options.list-mode .pkg-bottom-row {
  width: auto;
  flex-shrink: 0;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-top: 0;
}

.package-options.list-mode .pkg-badge {
  position: static;
  margin-left: 8px;
}

/* Adaptive Grid Layouts when package count is low */
.package-options.pkg-grid-1 {
  grid-template-columns: minmax(0, 1fr);
  max-width: 380px;
  margin: 0 auto;
}

.package-options.pkg-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.package-options.pkg-grid-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Empty State */
.pkg-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #94a3b8;
}

.pkg-empty-state p {
  margin: 8px 0 14px;
  font-size: 13.5px;
}

.pkg-reset-btn {
  background: rgba(0, 240, 118, 0.12);
  border: 1px solid #00f076;
  color: #00f076;
  padding: 7px 18px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.pkg-reset-btn:hover {
  background: #00f076;
  color: #000;
}

@media (max-width: 768px) {
  .pkg-scroll-container {
    max-height: 380px;
  }
  .pkg-controls-row {
    flex-direction: column;
  }
}

/* ============================================================
   BOOOSTUP & OVERTOPUP MULTI-STEP WALLET FLOW THEME
   ============================================================ */
.topup-flow-wrapper {
  max-width: 820px;
  margin: 0 auto;
  padding: 24px 16px 60px;
}

.topup-breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #a1a1aa;
  margin-bottom: 12px;
}

.topup-breadcrumb-nav a,
.topup-breadcrumb-nav button {
  color: #a1a1aa;
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s;
}

.topup-breadcrumb-nav a:hover,
.topup-breadcrumb-nav button:hover {
  color: #00f076;
}

.topup-flow-title {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 16px;
  letter-spacing: -0.5px;
}

.topup-balance-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(22, 22, 30, 0.95), rgba(28, 28, 38, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px 20px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  flex-wrap: wrap;
  gap: 12px;
}

.topup-balance-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topup-balance-icon {
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(0, 240, 118, 0.12);
  border: 1px solid rgba(0, 240, 118, 0.25);
  border-radius: 10px;
}

.topup-balance-label {
  font-size: 12.5px;
  color: #a1a1aa;
  display: block;
}

.topup-balance-val {
  font-size: 18px;
  font-weight: 800;
  color: #00f076;
}

.topup-balance-rate {
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #d4d4d8;
  font-weight: 600;
}

/* Stepper Progress Bar */
.topup-stepper-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin: 30px 10px 32px;
}

.topup-stepper-line {
  position: absolute;
  top: 18px;
  left: 36px;
  right: 36px;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  z-index: 1;
}

.topup-stepper-line-active {
  position: absolute;
  top: 18px;
  left: 36px;
  height: 2px;
  background: #00f076;
  z-index: 1;
  transition: width 0.3s ease;
}

.topup-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 2;
  position: relative;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
}

.topup-step-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #181820;
  border: 2px solid #3f3f46;
  color: #a1a1aa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  transition: all 0.25s;
}

.topup-step-item.is-active .topup-step-circle {
  background: #00f076;
  border-color: #00f076;
  color: #000;
  box-shadow: 0 0 16px rgba(0, 240, 118, 0.5);
}

.topup-step-item.is-completed .topup-step-circle {
  background: #059669;
  border-color: #059669;
  color: #fff;
}

.topup-step-text {
  font-size: 12.5px;
  font-weight: 600;
  color: #71717a;
  transition: color 0.2s;
  white-space: nowrap;
}

.topup-step-item.is-active .topup-step-text {
  color: #00f076;
  font-weight: 700;
}

.topup-step-item.is-completed .topup-step-text {
  color: #10b981;
}

/* Methods List */
.topup-section-header {
  margin-bottom: 20px;
}

.topup-section-header h2 {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 4px;
}

.topup-section-header p {
  font-size: 13px;
  color: #a1a1aa;
  margin: 0;
}

.topup-methods-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.topup-method-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(22, 22, 30, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 18px 22px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

.topup-method-card:hover {
  background: rgba(28, 28, 40, 0.95);
  border-color: rgba(0, 240, 118, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 240, 118, 0.1);
}

.topup-method-card.is-disabled {
  opacity: 0.5;
  filter: grayscale(100%);
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.04);
}

.topup-method-card.is-disabled:hover {
  transform: none;
  box-shadow: none;
  background: rgba(22, 22, 30, 0.85);
  border-color: rgba(255, 255, 255, 0.04);
}

.topup-method-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.topup-method-icon-wrap {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.topup-method-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.topup-method-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.topup-method-name {
  font-size: 15.5px;
  font-weight: 700;
  color: #fff;
}

.topup-method-desc {
  font-size: 12.5px;
  color: #a1a1aa;
  line-height: 1.4;
}

.topup-method-action {
  flex-shrink: 0;
}

.topup-method-btn {
  background: rgba(0, 240, 118, 0.12);
  color: #00f076;
  border: 1px solid rgba(0, 240, 118, 0.35);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
  cursor: pointer;
}

.topup-method-card:hover .topup-method-btn {
  background: #00f076;
  color: #000;
  box-shadow: 0 0 14px rgba(0, 240, 118, 0.4);
}

.topup-method-badge-off {
  background: rgba(255, 255, 255, 0.06);
  color: #a1a1aa;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

/* Trust Card */
.topup-trust-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 14px 18px;
  margin-top: 24px;
  font-size: 12.5px;
  color: #a1a1aa;
  line-height: 1.5;
}

.topup-trust-card strong {
  color: #e4e4e7;
}

/* Step 2: Amount Card */
.topup-amount-card {
  background: rgba(22, 22, 30, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
}

.topup-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 20px;
}

.topup-card-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  font-size: 13px;
  color: #d4d4d8;
}

.topup-card-features div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topup-card-features span.bullet {
  color: #00f076;
  font-size: 14px;
}

.topup-input-container {
  display: flex;
  align-items: center;
  background: rgba(10, 10, 15, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 4px 16px;
  transition: all 0.2s;
}

.topup-input-container:focus-within {
  border-color: #00f076;
  box-shadow: 0 0 16px rgba(0, 240, 118, 0.25);
}

.topup-input-container.has-error {
  border-color: #ef4444;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.25);
}

.topup-input-prefix {
  font-size: 20px;
  font-weight: 700;
  color: #71717a;
  padding-right: 10px;
}

.topup-input-field {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  padding: 12px 0;
}

.topup-input-suffix {
  font-size: 15px;
  font-weight: 800;
  color: #00f076;
  padding-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}

.topup-submit-action-btn {
  width: 100%;
  margin-top: 24px;
  padding: 15px 24px;
  background: linear-gradient(135deg, #00f076 0%, #00b050 100%);
  color: #000;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 240, 118, 0.35);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.topup-submit-action-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 240, 118, 0.5);
  filter: brightness(1.05);
}

.topup-submit-action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(60%);
  box-shadow: none;
  transform: none;
}

@media (max-width: 640px) {
  .topup-stepper-bar {
    margin: 20px 0 24px;
  }
  .topup-step-text {
    font-size: 11px;
  }
  .topup-step-circle {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  .topup-stepper-line,
  .topup-stepper-line-active {
    top: 15px;
    left: 24px;
    right: 24px;
  }
  .topup-method-card {
    padding: 14px 16px;
  }
  .topup-method-icon-wrap {
    width: 42px;
    height: 42px;
    font-size: 20px;
  }
  .topup-method-name {
    font-size: 14px;
  }
  .topup-method-btn {
    padding: 6px 12px;
    font-size: 12px;
  }
}

/* Final responsive cascade overrides — keep after component styles. */
@media (max-width: 900px) {
  .filament-admin-app .games-admin-toolbar {
    align-items: stretch !important;
    gap: 10px !important;
  }

  .filament-admin-app .games-admin-toolbar > .filament-form-input {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 100% !important;
    min-height: 42px;
  }

  .filament-admin-app .games-admin-filter-pills {
    width: 100%;
    margin-left: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 5px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .filament-admin-app .games-admin-filter-pills::-webkit-scrollbar {
    display: none;
  }

  .filament-admin-app .admin-filter-pill {
    flex: 0 0 auto;
    min-height: 38px;
    white-space: nowrap;
  }

  .filament-admin-app .admin-icon-btn,
  .filament-admin-app .admin-slide-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    max-width: 40px;
  }
}

@media (max-width: 720px) {
  .filament-admin-app .games-admin-table-wrap {
    overflow: visible !important;
  }

  .filament-admin-app .games-admin-table {
    display: block;
    width: 100%;
    min-width: 0 !important;
  }

  .filament-admin-app .games-admin-table thead {
    display: none;
  }

  .filament-admin-app .games-admin-table tbody {
    display: grid;
    width: 100%;
    gap: 10px;
  }

  .filament-admin-app .games-admin-table tbody tr {
    display: grid;
    width: 100%;
    min-width: 0;
  }

  .filament-admin-app .games-admin-table tbody td {
    display: flex;
  }
}

@media (max-width: 560px) {
  .pkg-controls-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    flex-direction: unset !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .pkg-search-box,
  .pkg-sort-dropdown,
  .pkg-view-toggle {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
  }

  .pkg-view-toggle {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }

  .pkg-price-filter-pills {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .pkg-price-filter-pills::-webkit-scrollbar {
    display: none;
  }

  .pkg-filter-pill-btn {
    flex: 0 0 auto;
    min-height: 38px;
  }
}

/* ==========================================================================
   D4 PLATFORM COMMERCE & PROVIDER HUB (ADMIN) - CYBERPUNK LUXURY THEME
   ========================================================================== */
.platform-hub {
  display: grid;
  gap: 20px;
}

/* LOADING CARD */
.platform-loading-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  background: rgba(14, 20, 27, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
}

.platform-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(56, 189, 248, 0.15);
  border-top-color: #38bdf8;
  border-radius: 50%;
  animation: platform-spin 0.8s linear infinite;
  margin-bottom: 16px;
}

.platform-loading-card h3 {
  margin: 0 0 6px;
  color: #ffffff;
  font-size: 18px;
}

.platform-loading-card p {
  margin: 0;
  color: #94a3b8;
  font-size: 13px;
}

/* 1. HERO */
.platform-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 26px 28px;
  background: linear-gradient(135deg, rgba(16, 24, 34, 0.95) 0%, rgba(9, 13, 19, 0.98) 100%);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 16px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
  position: relative;
  overflow: hidden;
}

.platform-hero::after {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.platform-hero-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.platform-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font: 700 10.5px var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.platform-pill-badge.cyan {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.platform-pill-badge.emerald {
  background: rgba(0, 240, 118, 0.12);
  color: #00f076;
  border: 1px solid rgba(0, 240, 118, 0.3);
}

.platform-pill-badge.violet {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.platform-pill-badge.blue {
  background: rgba(96, 165, 250, 0.12);
  color: #93c5fd;
  border: 1px solid rgba(96, 165, 250, 0.3);
}

.platform-pill-badge.purple {
  background: rgba(192, 132, 252, 0.12);
  color: #e9d5ff;
  border: 1px solid rgba(192, 132, 252, 0.3);
}

.platform-hero h2 {
  margin: 0 0 6px;
  color: #ffffff;
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.platform-hero p {
  margin: 0;
  color: #94a3b8;
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 680px;
}

/* NOTIFICATION FLASH */
.platform-notification {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: rgba(0, 240, 118, 0.08);
  border: 1px solid rgba(0, 240, 118, 0.3);
  border-radius: 12px;
  color: #d1fae5;
  font-size: 13px;
  animation: platform-fade-in 0.2s ease-out;
}

.platform-notification-icon {
  color: #00f076;
}

.platform-notification-body {
  flex: 1;
}

.platform-notification-close {
  background: transparent;
  border: none;
  color: #6ee7b7;
  cursor: pointer;
  font-size: 14px;
}

/* 2. TABS NAVIGATION */
.platform-tabs-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.platform-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: rgba(255, 255, 255, 0.03);
  color: #94a3b8;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.platform-inline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 0;
  vertical-align: middle;
}

.platform-inline-icon svg {
  display: block;
}

.platform-tab-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.platform-tab-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.platform-tab-btn.active {
  background: rgba(14, 21, 30, 0.95);
  border-color: rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  box-shadow: 0 -2px 10px rgba(56, 189, 248, 0.08);
}

.platform-tab-badge {
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-radius: 999px;
  font: 700 11px var(--mono);
}

.platform-tab-btn.active .platform-tab-badge {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
}

/* 3. OVERVIEW METRICS */
.platform-overview-wrap {
  display: grid;
  gap: 20px;
}

.platform-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.platform-metric-card {
  padding: 20px;
  background: linear-gradient(145deg, #111823 0%, #0c1017 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s;
}

.platform-metric-card:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.4);
}

.platform-metric-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.platform-metric-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0;
}

.platform-metric-card.color-blue .platform-metric-icon {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
}

.platform-metric-card.color-emerald .platform-metric-icon {
  color: #00f076;
  background: rgba(0, 240, 118, 0.12);
}

.platform-metric-card.color-amber .platform-metric-icon {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.12);
}

.platform-metric-card.color-cyan .platform-metric-icon {
  color: #22d3ee;
  background: rgba(6, 182, 212, 0.12);
}

.platform-metric-card.color-purple .platform-metric-icon {
  color: #c084fc;
  background: rgba(168, 85, 247, 0.12);
}

.platform-metric-card.color-teal .platform-metric-icon {
  color: #2dd4bf;
  background: rgba(20, 184, 166, 0.12);
}

.platform-metric-arrow {
  font-size: 14px;
  color: #64748b;
  transition: transform 0.2s;
}

.platform-metric-card:hover .platform-metric-arrow {
  transform: translateX(3px);
  color: #38bdf8;
}

.platform-metric-num {
  font: 800 32px var(--mono);
  color: #ffffff;
  line-height: 1;
  margin-bottom: 6px;
}

.platform-metric-title {
  font-weight: 700;
  font-size: 14px;
  color: #f1f5f9;
  margin-bottom: 3px;
}

.platform-metric-sub {
  color: #64748b;
  font-size: 12px;
}

/* ACCENT BORDERS ON METRICS */
.platform-metric-card.color-blue { border-left: 3px solid #38bdf8; }
.platform-metric-card.color-emerald { border-left: 3px solid #00f076; }
.platform-metric-card.color-amber { border-left: 3px solid #f59e0b; }
.platform-metric-card.color-cyan { border-left: 3px solid #06b6d4; }
.platform-metric-card.color-purple { border-left: 3px solid #a855f7; }
.platform-metric-card.color-teal { border-left: 3px solid #14b8a6; }

/* READINESS CARD */
.platform-readiness-card {
  padding: 24px;
  background: rgba(14, 20, 28, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
}

.platform-readiness-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.platform-readiness-head h3 {
  margin: 6px 0 4px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
}

.platform-readiness-head p {
  margin: 0;
  color: #94a3b8;
  font-size: 13px;
}

.platform-checklist-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.platform-check-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

.check-bullet {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 240, 118, 0.15);
  color: #00f076;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}

.platform-check-item strong {
  display: block;
  color: #ffffff;
  font-size: 13px;
  margin-bottom: 2px;
}

.platform-check-item small {
  display: block;
  color: #94a3b8;
  font-size: 11.5px;
  line-height: 1.5;
}

.platform-check-item code {
  color: #38bdf8;
  font-size: 11px;
}

.platform-check-item a {
  color: #00f076;
  text-decoration: underline;
}

.platform-two-col {
  display: grid;
  grid-template-columns: minmax(360px, 440px) 1fr;
  gap: 16px;
  align-items: start;
}

.platform-wide-card {
  grid-column: 1 / -1;
}

.platform-form-card, .platform-table-card {
  padding: 22px;
  background: rgba(14, 20, 28, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
}

.platform-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.platform-card-head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 3px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
}

.platform-card-head p {
  margin: 0;
  color: #94a3b8;
  font-size: 12.5px;
}

.platform-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.platform-field {
  display: grid;
  gap: 6px;
}

.platform-field-wide {
  grid-column: 1 / -1;
}

.platform-field-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  font-weight: 600;
  color: #cbd5e1;
}

.platform-field-hint {
  font-size: 11px;
  color: #64748b;
  font-weight: 400;
}

.platform-field input:not([type="checkbox"]),
.platform-field select,
.platform-field textarea {
  width: 100%;
  box-sizing: border-box;
  background: #090e14;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  padding: 10px 12px;
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.platform-field input:focus,
.platform-field select:focus,
.platform-field textarea:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}

.platform-toggle-row {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 8px 0;
  flex-wrap: wrap;
}

.platform-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #e2e8f0;
  font-size: 13px;
  cursor: pointer;
}

.platform-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #00f076;
}

/* ADAPTER CHOICES */
.platform-adapter-choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}

.platform-adapter-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.platform-adapter-choice:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}

.platform-adapter-choice.selected {
  background: rgba(56, 189, 248, 0.1);
  border-color: #38bdf8;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.15);
}

.adapter-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
}

.platform-adapter-choice.selected .adapter-icon {
  color: #00f076;
  background: rgba(0, 240, 118, 0.12);
}

.adapter-text strong {
  display: block;
  font-size: 13px;
  color: #ffffff;
  margin-bottom: 2px;
}

.adapter-text small {
  display: block;
  font-size: 11.5px;
  color: #94a3b8;
  line-height: 1.4;
}

.platform-security-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 8px;
  color: #e9d5ff;
  font-size: 12px;
}

/* 5. ITEM CARDS IN TABLES */
.platform-list {
  display: grid;
  gap: 10px;
}

.platform-list-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  transition: border-color 0.2s;
}

.platform-list-card:hover {
  border-color: rgba(255, 255, 255, 0.14);
}

.platform-list-card-main {
  flex: 1;
  min-width: 0;
}

.platform-list-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.platform-list-card-title strong {
  color: #ffffff;
  font-size: 14px;
}

.platform-list-card-meta {
  color: #94a3b8;
  font-size: 12px;
}

.platform-list-card-meta code {
  color: #38bdf8;
  font-family: var(--mono);
}

.platform-list-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.platform-btn-action {
  padding: 6px 11px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #cbd5e1;
  transition: all 0.2s;
}

.platform-btn-action:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
}

.platform-btn-action.test {
  background: rgba(56, 189, 248, 0.1);
  border-color: rgba(56, 189, 248, 0.3);
  color: #38bdf8;
}

.platform-btn-action.test:hover {
  background: rgba(56, 189, 248, 0.2);
}

.platform-btn-action.edit:hover {
  border-color: #00f076;
  color: #00f076;
}

.platform-btn-action.delete:hover {
  border-color: #ef4444;
  color: #ef4444;
}

.platform-status-chip, .platform-health-chip, .platform-stock-chip, .platform-type-pill {
  padding: 3px 8px;
  border-radius: 6px;
  font: 700 11px var(--mono);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
}

.platform-status-chip.active { background: rgba(0, 240, 118, 0.12); color: #00f076; border: 1px solid rgba(0, 240, 118, 0.25); }
.platform-status-chip.inactive { background: rgba(255, 255, 255, 0.06); color: #94a3b8; border: 1px solid rgba(255, 255, 255, 0.1); }
.platform-health-chip.healthy { background: rgba(0, 240, 118, 0.12); color: #00f076; border: 1px solid rgba(0, 240, 118, 0.25); }
.platform-health-chip.unhealthy { background: rgba(239, 68, 68, 0.12); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.25); }
.platform-stock-chip.good { background: rgba(0, 240, 118, 0.12); color: #00f076; }
.platform-stock-chip.low { background: rgba(245, 158, 11, 0.12); color: #fbbf24; }
.platform-stock-chip.empty { background: rgba(239, 68, 68, 0.12); color: #f87171; }
.platform-type-pill { background: rgba(56, 189, 248, 0.1); color: #38bdf8; }

/* Modern Provider Card Redesign */
.platform-provider-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.platform-provider-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.15);
}

.platform-provider-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.platform-provider-identity {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 200px;
}

.platform-provider-icon-badge {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.platform-provider-icon-badge.wondd {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.35);
}

.platform-provider-icon-badge.wepay {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.35);
}

.platform-provider-icon-badge.generic {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.35);
}

.platform-provider-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.platform-provider-name {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}

.platform-provider-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #94a3b8;
  flex-wrap: wrap;
}

.platform-provider-meta code {
  color: #38bdf8;
  font-family: var(--mono);
  background: rgba(56, 189, 248, 0.1);
  padding: 1px 6px;
  border-radius: 4px;
}

.platform-provider-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.platform-provider-info-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}

.platform-provider-endpoint {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 180px;
  overflow: hidden;
}

.platform-info-label {
  color: #64748b;
  font-size: 11px;
  white-space: nowrap;
}

.platform-endpoint-code {
  color: #94a3b8;
  font-size: 11px;
  font-family: var(--mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

.platform-provider-balance-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  white-space: nowrap;
}

.platform-provider-balance-badge.loaded {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}

.platform-provider-balance-badge .bal-value {
  font-weight: 800;
  color: #facc15;
  font-family: var(--mono);
}

.platform-provider-card-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.platform-provider-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
}

.platform-provider-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.platform-provider-btn.balance {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}

.platform-provider-btn.balance:hover:not(:disabled) {
  background: rgba(245, 158, 11, 0.22);
  border-color: #fbbf24;
  color: #fef08a;
  transform: translateY(-1px);
}

.platform-provider-btn.import {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.35);
  color: #34d399;
}

.platform-provider-btn.import:hover:not(:disabled) {
  background: rgba(16, 185, 129, 0.22);
  border-color: #34d399;
  color: #6ee7b7;
  transform: translateY(-1px);
}

.platform-provider-btn.sync {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.35);
  color: #60a5fa;
}

.platform-provider-btn.sync:hover:not(:disabled) {
  background: rgba(59, 130, 246, 0.22);
  border-color: #60a5fa;
  color: #93c5fd;
  transform: translateY(-1px);
}

.platform-provider-btn.test {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.35);
  color: #38bdf8;
}

.platform-provider-btn.test:hover:not(:disabled) {
  background: rgba(56, 189, 248, 0.22);
  border-color: #38bdf8;
  color: #7dd3fc;
  transform: translateY(-1px);
}

.campaign-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border-radius: 4px;
  font: 700 10.5px var(--mono);
  letter-spacing: 0.04em;
}
.campaign-tag.popup { background: rgba(6, 182, 212, 0.15); color: #22d3ee; }
.campaign-tag.sale { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.campaign-tag.article { background: rgba(96, 165, 250, 0.15); color: #93c5fd; }
.campaign-tag.faq { background: rgba(168, 85, 247, 0.15); color: #c084fc; }

.price-tag {
  color: #00f076;
  font-weight: 700;
  font-family: var(--mono);
}

.cost-tag {
  color: #64748b;
  font-family: var(--mono);
}

.platform-empty-state {
  padding: 42px 20px;
  text-align: center;
  background: rgba(255, 255, 255, 0.015);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.platform-empty-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 10px;
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 12px;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.08);
}

.platform-empty-state h4 {
  margin: 8px 0 4px;
  color: #ffffff;
}

.platform-empty-state p {
  margin: 0;
  color: #64748b;
  font-size: 12.5px;
}

/* 6. RANDOM BOX VISUAL BUILDER */
.platform-box-builder {
  background: #090e14;
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.builder-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.builder-header h4 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #e9d5ff;
  font-size: 14px;
}

.builder-weight-badge {
  font: 700 11px var(--mono);
  color: #c084fc;
  background: rgba(168, 85, 247, 0.12);
  padding: 2px 8px;
  border-radius: 6px;
}

.builder-draft-row {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1fr 0.8fr auto;
  gap: 8px;
  margin-bottom: 12px;
}

.builder-draft-row .short {
  width: 70px;
}

.builder-items-table {
  display: grid;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
}

.builder-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  font-size: 12px;
}

.builder-item-row .item-name {
  flex: 2;
  color: #ffffff;
}

.builder-item-row .item-val {
  flex: 1;
  color: #94a3b8;
  font-family: var(--mono);
}

.builder-item-row .item-prob {
  flex: 1;
  color: #c084fc;
  font-weight: 700;
  font-family: var(--mono);
}

.item-del-btn {
  background: transparent;
  border: none;
  color: #64748b;
  cursor: pointer;
  padding: 2px 6px;
  font-size: 12px;
}

.item-del-btn:hover {
  color: #ef4444;
}

.builder-empty-hint {
  margin: 10px 0;
  text-align: center;
  color: #64748b;
  font-size: 12px;
}

/* 7. LIVE POPUP PREVIEW */
.platform-live-preview {
  margin-bottom: 16px;
}

.preview-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #38bdf8;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
}

.preview-popup-box {
  padding: 16px;
  background: #080d13;
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 12px;
  text-align: center;
}

.preview-popup-img {
  width: 100%;
  max-height: 120px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
}

.preview-popup-box h4 {
  margin: 0 0 6px;
  color: #ffffff;
  font-size: 15px;
}

.preview-popup-box p {
  margin: 0 0 12px;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.5;
}

.preview-btn {
  font-size: 12px;
  padding: 8px 16px;
}

.platform-stock-textarea {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
}

.platform-stock-footer {
  display: grid;
  gap: 8px;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .platform-two-col {
    grid-template-columns: 1fr;
  }
  .platform-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .platform-checklist-grid {
    grid-template-columns: 1fr;
  }
  .builder-draft-row {
    grid-template-columns: 1fr;
  }
  .builder-draft-row .short {
    width: 100%;
  }
}

@media (max-width: 580px) {
  .platform-metric-grid {
    grid-template-columns: 1fr;
  }
  .platform-form-grid {
    grid-template-columns: 1fr;
  }
  .platform-hero {
    flex-direction: column;
    align-items: stretch;
  }
  .platform-list-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .platform-list-card-actions {
    width: 100%;
    justify-content: flex-start;
  }
}