/* ═══════════════════════════════════════════════════════════════
 *  ADX ENHANCE v2 — Complete Mobile-First Design System
 *  Loads AFTER style.css. Fixes spacing, structure, alignment.
 *  Mobile-first: everything designed for 360px+ screens first,
 *  then scaled up for tablets/desktop.
 * ═══════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ── */
:root {
  --adx-bg: #f0f2f5;
  --adx-card: #ffffff;
  --adx-card-alt: #f7f8fa;
  --adx-border: rgba(0,0,0,0.06);
  --adx-border-strong: rgba(0,0,0,0.1);
  --adx-text: #111827;
  --adx-text-2: #374151;
  --adx-text-3: #6b7280;
  --adx-text-4: #9ca3af;
  --adx-blue: #2563eb;
  --adx-blue-light: rgba(37,99,235,0.08);
  --adx-blue-glow: rgba(37,99,235,0.18);
  --adx-green: #059669;
  --adx-green-light: rgba(5,150,105,0.08);
  --adx-red: #dc2626;
  --adx-purple: #7c3aed;
  --adx-purple-light: rgba(124,58,237,0.06);
  --adx-gold: #d97706;
  --adx-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --adx-shadow-sm: 0 1px 6px rgba(0,0,0,0.06);
  --adx-shadow-md: 0 4px 16px rgba(0,0,0,0.07);
  --adx-shadow-lg: 0 8px 30px rgba(0,0,0,0.1);
  --adx-r-sm: 10px;
  --adx-r-md: 14px;
  --adx-r-lg: 20px;
  --adx-r-xl: 24px;
  --adx-r-full: 9999px;
  --adx-header-h: 52px;
  --adx-nav-h: 58px;
  --adx-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ═══════════════════════════════════════
 *  1. GLOBAL RESET & BODY
 * ═══════════════════════════════════════ */
body {
  background: var(--adx-bg) !important;
  color: var(--adx-text) !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  padding-top: var(--adx-header-h) !important;
  padding-bottom: calc(var(--adx-nav-h) + var(--adx-safe-bottom)) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Kill overflow on everything */
html, body, main, section, div {
  max-width: 100vw;
}

/* Remove janky page-in animation on mobile */
@media (max-width: 768px) {
  body > * { animation: none !important; }
}

/* ═══════════════════════════════════════
 *  2. HEADER — clean, compact, centered
 * ═══════════════════════════════════════ */
.site-header {
  height: var(--adx-header-h) !important;
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom: 1px solid var(--adx-border) !important;
  box-shadow: none !important;
}

.site-header.scrolled {
  box-shadow: var(--adx-shadow-xs) !important;
}

.site-header-inner {
  height: 100%;
  padding: 0 16px !important;
  max-width: 100% !important;
}

.site-header-title {
  font-size: 1.05em !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  background: linear-gradient(135deg, var(--adx-blue), var(--adx-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ═══════════════════════════════════════
 *  3. BOTTOM NAV — proper height, no overlap
 * ═══════════════════════════════════════ */
.site-nav {
  height: var(--adx-nav-h) !important;
  padding: 4px 8px calc(4px + var(--adx-safe-bottom)) !important;
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: saturate(180%) blur(16px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(16px) !important;
  border-top: 1px solid var(--adx-border) !important;
  box-shadow: 0 -1px 8px rgba(0,0,0,0.03) !important;
  gap: 0 !important;
}

.site-nav-link {
  font-size: 10px !important;
  gap: 2px !important;
  padding: 4px 0 !important;
  border-radius: 8px !important;
}

.nav-icon {
  font-size: 1.3em !important;
}

.site-nav-link.active {
  color: var(--adx-blue) !important;
}

.site-nav-link.active .nav-icon {
  background: var(--adx-blue-light) !important;
  border-radius: 12px !important;
  padding: 3px 14px !important;
}

/* ═══════════════════════════════════════
 *  4. LIVE COUNTER & COUNTDOWN — clean bars
 * ═══════════════════════════════════════ */
.live-counter {
  background: var(--adx-card) !important;
  border-bottom: 1px solid var(--adx-border) !important;
  padding: 7px 16px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--adx-text-3) !important;
  text-align: center !important;
  letter-spacing: 0.01em;
}

.live-counter #userCount {
  color: var(--adx-red) !important;
  font-weight: 700 !important;
}

.countdown-timer {
  background: var(--adx-purple-light) !important;
  border-bottom: 1px solid var(--adx-border) !important;
  padding: 6px 16px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--adx-purple) !important;
  text-align: center !important;
}

/* ═══════════════════════════════════════
 *  5. ADX AD CONTAINERS — centered, clean
 * ═══════════════════════════════════════ */
.adx-top-ads {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--adx-card-alt);
  border-bottom: 1px solid var(--adx-border);
}

.adx-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--adx-card);
  border-radius: var(--adx-r-sm);
  overflow: hidden;
  box-shadow: var(--adx-shadow-xs);
  border: 1px solid var(--adx-border);
  position: relative;
  max-width: 100%;
}

.adx-slot::before {
  content: 'Ad';
  position: absolute;
  top: 3px;
  right: 5px;
  font-size: 8px;
  color: var(--adx-text-4);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 1;
  pointer-events: none;
  opacity: 0.6;
}

.adx-slot-300x250 {
  width: 300px;
  min-height: 250px;
  max-width: calc(100vw - 24px);
}

.adx-slot-336x280 {
  width: 336px;
  min-height: 280px;
  max-width: calc(100vw - 24px);
}

.adx-slot-loading {
  background: linear-gradient(90deg, #eef1f5 25%, #f8f9fb 50%, #eef1f5 75%);
  background-size: 200% 100%;
  animation: adxShimmer 1.5s ease infinite;
}
@keyframes adxShimmer {
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

/* ═══════════════════════════════════════
 *  6. MAIN CONTENT — proper spacing
 * ═══════════════════════════════════════ */
.app-content {
  padding: 20px 16px 100px !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  min-height: auto !important;
}

/* ═══════════════════════════════════════
 *  7. PROGRESS BAR — clean, thin
 * ═══════════════════════════════════════ */
.progress-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto 16px !important;
  background: var(--adx-blue-light) !important;
  border-radius: var(--adx-r-full) !important;
  padding: 2px !important;
  overflow: hidden;
}

.progress-bar {
  height: 5px !important;
  background: linear-gradient(90deg, var(--adx-blue), var(--adx-purple)) !important;
  border-radius: var(--adx-r-full) !important;
}

.progress-bar::after {
  display: none !important;
}

.progress-text {
  font-size: 10.5px !important;
  color: var(--adx-text-4) !important;
  margin-top: 5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════
 *  8. STAGE HEADING — clean hierarchy
 * ═══════════════════════════════════════ */
.stage-heading {
  font-size: 1.15em !important;
  font-weight: 700 !important;
  color: var(--adx-text) !important;
  line-height: 1.4 !important;
  margin: 8px 0 16px !important;
  text-align: center !important;
}

.stage-heading span {
  font-size: 0.72em !important;
  color: var(--adx-text-3) !important;
  display: block !important;
  margin-top: 4px !important;
  font-weight: 400 !important;
}

/* ═══════════════════════════════════════
 *  9. MAIN IMAGE & PLAY BUTTON — centered
 * ═══════════════════════════════════════ */
.play-btn-wrapper {
  display: flex !important;
  justify-content: center !important;
  position: relative !important;
}

.main-image {
  width: 82% !important;
  max-width: 320px !important;
  height: auto !important;
  border-radius: var(--adx-r-lg) !important;
  box-shadow: var(--adx-shadow-md) !important;
  display: block !important;
}

.play-btn {
  width: 50px !important;
  height: 50px !important;
  background: rgba(255,255,255,0.95) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important;
  border-radius: 50% !important;
}

.play-btn::after {
  border-left-color: var(--adx-blue) !important;
}

/* ═══════════════════════════════════════
 *  10. THUMB STRIP — clean 3-column grid
 * ═══════════════════════════════════════ */
.thumb-strip {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 8px !important;
  width: 88% !important;
  max-width: 320px !important;
  margin: 14px auto 0 !important;
}

.thumb-item {
  border-radius: var(--adx-r-sm) !important;
  box-shadow: var(--adx-shadow-sm) !important;
  overflow: hidden !important;
  aspect-ratio: 3/4 !important;
}

.thumb-lock {
  font-size: 1.2em !important;
  background: rgba(0,0,0,0.25) !important;
  backdrop-filter: blur(3px) !important;
}

.unlock-text {
  font-size: 12px !important;
  color: var(--adx-text-3) !important;
  text-align: center !important;
  margin: 10px 0 0 !important;
}

/* ═══════════════════════════════════════
 *  11. CTA BUTTON (Fixed) — above nav
 * ═══════════════════════════════════════ */
.button-container {
  position: fixed !important;
  bottom: calc(var(--adx-nav-h) + var(--adx-safe-bottom)) !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(255,255,255,0.97) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-top: 1px solid var(--adx-border) !important;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.05) !important;
  padding: 10px 16px calc(10px + var(--adx-safe-bottom, 0px)) !important;
  z-index: 998 !important;
  display: flex !important;
  justify-content: center !important;
  flex-direction: row !important;
}

.btn {
  border-radius: var(--adx-r-md) !important;
  font-weight: 700 !important;
  font-size: 0.95em !important;
  padding: 14px 24px !important;
  letter-spacing: -0.01em;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 10px var(--adx-blue-glow), var(--adx-shadow-xs) !important;
  border: none !important;
  position: relative;
  overflow: hidden;
}

.btn::after {
  background: linear-gradient(180deg, rgba(255,255,255,0.12), transparent) !important;
}

.btn-gold, .btn-blue {
  background: linear-gradient(135deg, var(--adx-blue), #4f46e5) !important;
  color: #fff !important;
}

.btn-ok {
  background: linear-gradient(135deg, var(--adx-green), #047857) !important;
  box-shadow: 0 2px 10px var(--adx-green-light), var(--adx-shadow-xs) !important;
}

.btn-primary {
  width: 100% !important;
  max-width: 380px !important;
  font-size: 1em !important;
  padding: 15px 20px !important;
}

.button-container .btn {
  width: 100% !important;
  max-width: 380px !important;
  margin: 0 !important;
}

@keyframes pulse {
  0%,100%{ box-shadow: 0 2px 10px var(--adx-blue-glow), var(--adx-shadow-xs) }
  50%{ box-shadow: 0 4px 24px rgba(37,99,235,0.3), var(--adx-shadow-sm) }
}

/* ═══════════════════════════════════════
 *  12. CONNECTING CONTENT — clean card
 * ═══════════════════════════════════════ */
.connecting-content {
  background: var(--adx-card) !important;
  border: 1px solid var(--adx-border) !important;
  border-radius: var(--adx-r-xl) !important;
  box-shadow: var(--adx-shadow-sm) !important;
  padding: 24px 18px !important;
  width: 100% !important;
  text-align: center !important;
}

.connecting-heading {
  font-size: 1.15em !important;
  font-weight: 700 !important;
  color: var(--adx-text) !important;
  margin-bottom: 16px !important;
  line-height: 1.35 !important;
}

.connecting-images {
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 12px !important;
}

.connecting-images .play-btn-wrapper {
  width: 75% !important;
  max-width: 240px !important;
}

.connecting-images img {
  width: 100% !important;
  height: auto !important;
  border-radius: var(--adx-r-lg) !important;
  box-shadow: var(--adx-shadow-md) !important;
  border: 2px solid var(--adx-border) !important;
}

@keyframes float {
  from{transform:translateY(0)}
  to{transform:translateY(-4px)}
}

/* ═══════════════════════════════════════
 *  13. FORM CONTAINER — clean card
 * ═══════════════════════════════════════ */
.form-container {
  background: var(--adx-card) !important;
  border: 1px solid var(--adx-border) !important;
  border-radius: var(--adx-r-xl) !important;
  box-shadow: var(--adx-shadow-sm) !important;
  padding: 22px 18px !important;
  width: 100% !important;
  text-align: center !important;
}

.form-container h2 {
  font-size: 1.1em !important;
  font-weight: 700 !important;
  margin-bottom: 18px !important;
  line-height: 1.35 !important;
}

.form-container h2 span {
  font-size: 0.68em !important;
  color: var(--adx-text-3) !important;
  font-weight: 400 !important;
}

.radio-group {
  gap: 6px !important;
}

.radio-group label {
  background: var(--adx-card-alt) !important;
  border: 1.5px solid var(--adx-border-strong) !important;
  border-radius: var(--adx-r-full) !important;
  padding: 10px 14px !important;
  font-size: 0.85em !important;
  font-weight: 500 !important;
  color: var(--adx-text-2) !important;
  transition: all 0.2s ease !important;
}

.radio-group input[type="radio"]:checked + label {
  background: var(--adx-blue) !important;
  color: #fff !important;
  border-color: var(--adx-blue) !important;
  box-shadow: 0 2px 8px var(--adx-blue-glow) !important;
}

/* ═══════════════════════════════════════
 *  14. REWARD TRIGGER BUTTON
 * ═══════════════════════════════════════ */
.adx-reward-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 22px;
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #fff;
  border: none;
  border-radius: var(--adx-r-full);
  font-size: 0.88em;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(217,119,6,0.25);
  transition: all 0.2s ease;
  font-family: inherit;
}

.adx-reward-trigger:active {
  transform: scale(0.96);
}

/* ═══════════════════════════════════════
 *  15. ARTICLE SECTION — clean, readable
 * ═══════════════════════════════════════ */
.article-section {
  padding: 16px 12px !important;
  background: var(--adx-bg) !important;
}

.article-container {
  background: var(--adx-card) !important;
  border-radius: var(--adx-r-xl) !important;
  border: 1px solid var(--adx-border) !important;
  box-shadow: var(--adx-shadow-sm) !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  padding: 22px 18px !important;
  animation: none !important;
}

.article-container h2 {
  font-size: 1.1em !important;
  font-weight: 700 !important;
  color: var(--adx-text) !important;
  line-height: 1.4 !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid var(--adx-blue-light) !important;
  margin-bottom: 14px !important;
}

.article-container h3 {
  font-size: 0.95em !important;
  font-weight: 700 !important;
  color: var(--adx-blue) !important;
  margin-top: 20px !important;
  margin-bottom: 8px !important;
  padding-left: 10px !important;
  border-left: 3px solid var(--adx-blue) !important;
  line-height: 1.4 !important;
}

.article-container p {
  font-size: 0.88em !important;
  line-height: 1.75 !important;
  color: var(--adx-text-2) !important;
  margin-top: 8px !important;
  margin-bottom: 6px !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.article-container ul,
.article-container ol {
  padding-left: 18px !important;
  font-size: 0.88em !important;
  line-height: 1.75 !important;
  color: var(--adx-text-2) !important;
  margin-top: 8px !important;
}

.article-container ul li {
  margin-bottom: 6px !important;
}

.article-container ul li::marker {
  color: var(--adx-blue) !important;
}

.article-container strong {
  color: var(--adx-text) !important;
}

.article-container table {
  border-radius: var(--adx-r-sm) !important;
  overflow: hidden !important;
  border: 1px solid var(--adx-border) !important;
  font-size: 0.82em !important;
}

.article-container th {
  background: var(--adx-blue-light) !important;
  color: var(--adx-blue) !important;
  font-weight: 700 !important;
  padding: 10px 12px !important;
}

.article-container td {
  padding: 9px 12px !important;
  border-bottom: 1px solid var(--adx-border) !important;
}

/* ═══════════════════════════════════════
 *  16. TOAST NOTIFICATION — proper position
 * ═══════════════════════════════════════ */
.toast-notification {
  position: fixed !important;
  bottom: calc(var(--adx-nav-h) + 70px + var(--adx-safe-bottom)) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(12px) !important;
  max-width: 280px !important;
  min-width: 200px !important;
  background: var(--adx-card) !important;
  border: 1px solid var(--adx-border) !important;
  border-radius: var(--adx-r-md) !important;
  box-shadow: var(--adx-shadow-lg) !important;
  padding: 10px 14px !important;
  font-size: 12px !important;
  z-index: 997 !important;
}

.toast-notification.show {
  transform: translateX(-50%) translateY(0) !important;
}

.toast-icon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  font-size: 10px !important;
  background: var(--adx-green) !important;
  border-radius: 50% !important;
}

/* ═══════════════════════════════════════
 *  17. BOTTOM ANCHOR AD — below nav
 * ═══════════════════════════════════════ */
.adx-anchor-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--adx-border);
  box-shadow: 0 -2px 12px rgba(0,0,0,0.04);
  padding: 3px 0 calc(3px + var(--adx-safe-bottom));
  min-height: 50px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.adx-anchor-bottom.adx-loaded {
  transform: translateY(0);
}

.adx-anchor-close {
  position: absolute;
  top: -20px;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  line-height: 1;
  padding: 0;
}

/* When anchor ad shows — push nav, CTA, toast up */
body.adx-anchor-visible .site-nav {
  bottom: 54px !important;
}

body.adx-anchor-visible .button-container {
  bottom: calc(54px + var(--adx-nav-h) + var(--adx-safe-bottom)) !important;
}

body.adx-anchor-visible .toast-notification {
  bottom: calc(54px + var(--adx-nav-h) + 70px + var(--adx-safe-bottom)) !important;
}

body.adx-anchor-visible {
  padding-bottom: calc(var(--adx-nav-h) + 54px + var(--adx-safe-bottom)) !important;
}

/* ═══════════════════════════════════════
 *  18. FOOTER — clean, structured
 * ═══════════════════════════════════════ */
.site-footer {
  background: #0f172a !important;
  padding: 30px 16px calc(20px + var(--adx-nav-h) + var(--adx-safe-bottom)) !important;
  font-size: 0.82em !important;
}

.footer-grid {
  gap: 20px !important;
  max-width: 420px !important;
  margin: 0 auto !important;
}

.footer-col h3 {
  font-size: 0.88em !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.9) !important;
  margin-bottom: 10px !important;
  -webkit-text-fill-color: rgba(255,255,255,0.9) !important;
  background: none !important;
}

.footer-col p {
  font-size: 0.82em !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,0.5) !important;
}

.footer-links a {
  font-size: 0.82em !important;
  color: rgba(255,255,255,0.5) !important;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  padding: 12px 0 0 !important;
  margin-top: 16px !important;
}

.footer-bottom p {
  font-size: 0.72em !important;
  color: rgba(255,255,255,0.2) !important;
}

/* ═══════════════════════════════════════
 *  19. LEGAL PAGES — mobile readable
 * ═══════════════════════════════════════ */
.legal-page {
  padding: 16px 12px !important;
  max-width: 420px !important;
  margin: 0 auto !important;
}

.legal-card {
  background: var(--adx-card) !important;
  border-radius: var(--adx-r-xl) !important;
  border: 1px solid var(--adx-border) !important;
  box-shadow: var(--adx-shadow-sm) !important;
  padding: 22px 18px !important;
}

.legal-page h1 {
  font-size: 1.25em !important;
  font-weight: 700 !important;
  margin-bottom: 2px !important;
}

.legal-page .last-updated {
  font-size: 11px !important;
  color: var(--adx-text-4) !important;
  margin-bottom: 18px !important;
}

.legal-page h2 {
  font-size: 0.98em !important;
  margin-top: 22px !important;
  margin-bottom: 6px !important;
  font-weight: 700 !important;
}

.legal-page p {
  font-size: 0.86em !important;
  line-height: 1.7 !important;
  color: var(--adx-text-2) !important;
}

.legal-page ul, .legal-page ol {
  font-size: 0.86em !important;
  line-height: 1.7 !important;
}

/* Contact form */
.contact-form input,
.contact-form textarea {
  border-radius: var(--adx-r-sm) !important;
  border: 1.5px solid var(--adx-border-strong) !important;
  padding: 11px 14px !important;
  font-size: 0.88em !important;
  background: var(--adx-card-alt) !important;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--adx-blue) !important;
  box-shadow: 0 0 0 3px var(--adx-blue-light) !important;
}

.contact-form button {
  border-radius: var(--adx-r-md) !important;
  padding: 13px !important;
  font-size: 0.92em !important;
  background: var(--adx-blue) !important;
}

/* ═══════════════════════════════════════
 *  20. READING PROGRESS BAR
 * ═══════════════════════════════════════ */
.reading-progress {
  height: 2.5px !important;
  background: linear-gradient(90deg, var(--adx-blue), var(--adx-purple)) !important;
}

/* ═══════════════════════════════════════
 *  21. MODALS & OVERLAYS — consistent
 * ═══════════════════════════════════════ */
.exit-modal-content {
  border-radius: var(--adx-r-xl) !important;
  padding: 24px 20px 18px !important;
  max-width: 360px !important;
}

.exit-modal-content .btn-exit-primary {
  border-radius: var(--adx-r-md) !important;
  background: var(--adx-blue) !important;
}

.exit-modal-content .btn-stay {
  border-radius: var(--adx-r-md) !important;
}

.modal-content {
  border-radius: var(--adx-r-xl) !important;
}

/* ═══════════════════════════════════════
 *  22. SCROLLBAR (subtle)
 * ═══════════════════════════════════════ */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 4px; }

/* ═══════════════════════════════════════
 *  23. SELECTION
 * ═══════════════════════════════════════ */
::selection {
  background: var(--adx-blue-light);
  color: inherit;
}

/* ═══════════════════════════════════════
 *  24. GPT AD IFRAMES — prevent overflow
 * ═══════════════════════════════════════ */
[id^="div-gpt-ad-"],
[data-ad-slot] {
  max-width: 100% !important;
  overflow: hidden !important;
}

[id^="div-gpt-ad-"] > div,
[id^="div-gpt-ad-"] > iframe,
[data-ad-slot] > div,
[data-ad-slot] > iframe {
  max-width: 100% !important;
}

/* ═══════════════════════════════════════
 *  25. AUTO SLIDER (stage pages)
 * ═══════════════════════════════════════ */
.auto-slider-container {
  max-width: 100% !important;
  overflow: hidden !important;
}

/* ═══════════════════════════════════════
 *  26. RELATED ARTICLES
 * ═══════════════════════════════════════ */
.related-articles {
  max-width: 420px !important;
  margin: 0 auto !important;
  padding: 0 12px 24px !important;
}

.related-grid {
  gap: 10px !important;
}

.related-card {
  background: var(--adx-card) !important;
  border-radius: var(--adx-r-md) !important;
  border: 1px solid var(--adx-border) !important;
  padding: 14px !important;
}

/* ═══════════════════════════════════════
 *  27. MATERIAL CARD (direct-video page)
 * ═══════════════════════════════════════ */
.material-card {
  text-align: center;
}

.button-wrapper {
  margin-top: 16px;
}

/* ═══════════════════════════════════════
 *  28. 404 PAGE
 * ═══════════════════════════════════════ */
body > div[style*="min-height:calc(100vh"] {
  padding: 20px 16px !important;
}

/* ═══════════════════════════════════════════════════════════
 *  DESKTOP OVERRIDES (769px+)
 * ═══════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  body {
    padding-top: 60px !important;
    padding-bottom: 0 !important;
    font-size: 15px !important;
  }

  .site-header {
    height: 60px !important;
  }

  .site-header-inner {
    max-width: 960px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
  }

  .site-nav {
    position: static !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 20px 8px !important;
    justify-content: center !important;
  }

  .site-nav-link {
    flex-direction: row !important;
    font-size: 0.84em !important;
    padding: 8px 14px !important;
  }

  .app-content {
    max-width: 600px !important;
    padding-bottom: 40px !important;
  }

  .article-container,
  .legal-card {
    max-width: 640px !important;
    padding: 32px 28px !important;
  }

  .adx-top-ads {
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    padding: 14px 0;
  }

  .button-container {
    position: static !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 16px 0 !important;
    backdrop-filter: none !important;
  }

  .toast-notification {
    bottom: 24px !important;
  }

  body.adx-anchor-visible .site-nav {
    bottom: 0 !important;
  }

  body.adx-anchor-visible {
    padding-bottom: 0 !important;
  }

  .site-footer {
    padding: 40px 20px 24px !important;
  }

  .footer-grid {
    max-width: 960px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
 *  SMALL PHONE FIX (360px and below)
 * ═══════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
  body { font-size: 13.5px !important; }
  .stage-heading { font-size: 1.05em !important; }
  .btn-primary { font-size: 0.92em !important; padding: 13px 16px !important; }
  .article-container { padding: 18px 14px !important; }
  .connecting-content, .form-container { padding: 18px 14px !important; }
  .adx-slot-300x250, .adx-slot-336x280 { min-height: 200px; }
}