/* ==========================================================================
   Kaddu Glass Theme — site-wide dark glass skin
   Loaded after style.css (and dashboard.css) on every page.
   .hx-body  = public pages (with home.css chrome)
   .hx-dash  = bot console (dashboard.html)
   ========================================================================== */

:root {
  --hx-bg: #07070b;
  --hx-text: #f4f4f6;
  --hx-text-2: #b9b9c6;
  --hx-text-3: #80808f;
  --hx-orange: #ff6b00;
  --hx-orange-2: #ff9a3c;
  --hx-gold: #fbbf24;
  --hx-surface: rgba(255, 255, 255, 0.055);
  --hx-surface-2: rgba(255, 255, 255, 0.085);
  --hx-line: rgba(255, 255, 255, 0.11);
  --hx-line-2: rgba(255, 255, 255, 0.2);
  --hx-solid: #14141d;           /* modal / dropdown surface */
  --hx-solid-2: #1b1b27;
  --hx-blur: blur(18px) saturate(160%);
  --hx-ease: cubic-bezier(.22, .9, .3, 1);
}

/* ---------- 1. Re-map the old light palette to dark ---------- */
.hx-body, .hx-dash {
  --primary-subtle: rgba(255, 107, 0, .12);
  --primary-border: rgba(255, 107, 0, .35);
  --accent-gold-bg: rgba(251, 191, 36, .12);
  --accent-gold-border: rgba(251, 191, 36, .32);
  --accent-green-bg: rgba(16, 185, 129, .13);
  --accent-green-border: rgba(16, 185, 129, .32);
  --bg-page: #07070b;
  --bg-surface: var(--hx-surface);
  --bg-subtle: rgba(255, 255, 255, .045);
  --bg-hover: rgba(255, 255, 255, .09);
  --text-main: #f4f4f6;
  --text-body: #c4c4d0;
  --text-muted: #9a9aab;
  --text-dim: #6f6f80;
  --border-light: var(--hx-line);
  --border-strong: var(--hx-line-2);
  --shadow-sm: none;
  --shadow-md: 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, .45);

  /* dashboard.css */
  --dash-bg: #07070b;
  --dash-sidebar: rgba(255, 255, 255, .035);
  --dash-card: var(--hx-surface);
  --dash-card-hover: var(--hx-surface-2);
  --dash-border: var(--hx-line);
  --dash-border-strong: var(--hx-line-2);
  --dash-text: #f4f4f6;
  --dash-text-body: #c4c4d0;
  --dash-muted: #9a9aab;
  --dash-primary-subtle: rgba(255, 107, 0, .12);
  --dash-primary-border: rgba(255, 107, 0, .35);
  --dash-green-bg: rgba(16, 185, 129, .13);
  --dash-green-border: rgba(16, 185, 129, .32);
  --dash-green-text: #4ade80;
}

body.hx-body, body.hx-dash {
  background: var(--hx-bg) !important;
  color: var(--text-body);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.hx-body h1, .hx-body h2, .hx-body h3, .hx-body h4,
.hx-dash h1, .hx-dash h2, .hx-dash h3, .hx-dash h4 { color: var(--text-main); }
.hx-body ::selection, .hx-dash ::selection { background: rgba(255, 107, 0, .45); color: #fff; }

/* Ambient glow for dashboard (public pages get it from home.css markup) */
body.hx-dash::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(600px 500px at -5% -10%, rgba(255, 107, 0, .22), transparent 60%),
    radial-gradient(520px 480px at 105% 35%, rgba(124, 58, 237, .18), transparent 60%),
    radial-gradient(480px 420px at 30% 110%, rgba(14, 165, 233, .12), transparent 60%);
}

/* ---------- 2. Glass surfaces (cards / panels) ---------- */
.hx-body :is(.content-card, .article-box, .store-header-box, .store-search-container, .product-item-card,
  .trust-proof-item, .trust-proof-strip, .desktop-hud-bar, .aio-card, .poster-card, .telegram-box,
  .rule-card, .faq-item, .contact-card, .blog-card, .toc-box, .pro-tip-box, .data-table-wrap, .calc-card),
.hx-dash :is(.dash-card, .dash-sidebar, .active-group-custom-card, .custom-card-topbar, .bot-squad-section,
  .coupon-box, .custom-glory-section, .custom-card-actions-bar, .bot-slot-card, .server-loader-card,
  .fampay-pack-card, .dash-warning-box, .server-timer-pill) {
  background: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025)) !important;
  border-color: var(--hx-line) !important;
  -webkit-backdrop-filter: var(--hx-blur); backdrop-filter: var(--hx-blur);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  color: var(--text-body);
}
.hx-body :is(.content-card, .article-box, .product-item-card, .aio-card, .poster-card) {
  border-radius: 18px !important;
  transition: transform .4s var(--hx-ease), border-color .4s ease, box-shadow .4s ease;
}
.hx-body :is(.article-box, .product-item-card, .aio-card, .poster-card):hover {
  transform: translateY(-4px);
  border-color: var(--hx-line-2) !important;
  box-shadow: 0 22px 55px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .1) !important;
}

/* Solid dark surfaces for overlays (modals, dropdowns, popups) */
:is(.hx-body, .hx-dash) :is(.modal-dialog, .auth-card, .profile-card, .giveaway-modal-card, .yt-popup-card,
  .user-dropdown-menu, .notif-dropdown-panel, .api-modal-card, .region-dropdown-modal, .dash-user-dropdown,
  .cookie-consent-banner) {
  background: linear-gradient(160deg, #1d1d2a, #121219) !important;
  border: 1px solid var(--hx-line-2) !important;
  color: var(--text-body);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6) !important;
}
:is(.hx-body, .hx-dash) :is(.modal-overlay, .auth-overlay, .yt-popup-overlay, .giveaway-modal-overlay) {
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
:is(.hx-body, .hx-dash) :is(.notif-dropdown-header, .notif-dropdown-footer, .notif-empty-icon, .api-nav-tabs,
  .spin-wheel-center, .giveaway-ticket-code, .yt-popup-mascot) {
  background: rgba(255, 255, 255, .05) !important; border-color: var(--hx-line) !important;
}
:is(.hx-body, .hx-dash) :is(.notif-card-item:hover, .notif-card-item.unread, .user-dropdown-link:hover, .dash-dropdown-link:hover) {
  background: rgba(255, 255, 255, .06) !important;
}
:is(.hx-body, .hx-dash) .api-nav-tab.active { background: rgba(255, 255, 255, .12) !important; color: #fff !important; }

/* ---------- 3. Text that was hard-coded dark ---------- */
:is(.hx-body, .hx-dash) :is(.product-price-current, .dash-brand-wrap, .dash-brand-title, .dash-user-name,
  .dash-card-title, .clan-text-info h3, .clan-sub-meta span strong, .glory-target-left, .bot-squad-title,
  .bot-name, .coupon-box-title, .active-groups-header-title, .dash-view-header-title, .api-modal-title,
  .api-form-label, .region-option-item, .dash-dropdown-link, .user-dropdown-link, .notif-card-title) {
  color: var(--text-main) !important;
}

/* ---------- 4. Light tinted badges -> translucent tints ---------- */
:is(.hx-body, .hx-dash) :is(.file-badge-download, .trust-highlight-banner, .rule-badge-shield, .order-success-icon,
  .giveaway-result-banner, .custom-status-tag.running, .live-sync-badge, .api-endpoint-badge.get,
  .server-success-icon, .dash-api-pill) {
  background: rgba(16, 185, 129, .13) !important; border-color: rgba(16, 185, 129, .32) !important;
}
:is(.hx-body, .hx-dash) :is(.file-badge-account, .rule-badge-lock, .dash-warning-box) {
  background: rgba(251, 191, 36, .1) !important; border-color: rgba(251, 191, 36, .3) !important;
}
:is(.hx-body, .hx-dash) :is(.rule-badge-trophy, .clan-emblem-badge, .fampay-pack-card.popular, .dash-role-badge, .dash-credit-pill) {
  background: rgba(255, 107, 0, .12) !important; border-color: rgba(255, 107, 0, .35) !important;
}
:is(.hx-body, .hx-dash) :is(.file-badge-service, .api-endpoint-badge.post, .file-badge-telegram) {
  background: rgba(59, 130, 246, .14) !important; color: #93c5fd !important; border-color: rgba(59, 130, 246, .3) !important;
}
:is(.hx-body, .hx-dash) :is(.file-badge-course) { background: rgba(139, 92, 246, .14) !important; border-color: rgba(139, 92, 246, .3) !important; }
:is(.hx-body, .hx-dash) :is(.file-badge-api) { background: rgba(20, 184, 166, .14) !important; border-color: rgba(20, 184, 166, .3) !important; }
:is(.hx-body, .hx-dash) :is(.file-badge-likes, .custom-status-tag.stopped, .server-error-icon, .btn-ctrl.danger) {
  background: rgba(239, 68, 68, .12) !important; border-color: rgba(239, 68, 68, .32) !important;
}
:is(.hx-body, .hx-dash) .clan-emblem-badge .clan-lvl-tag { background: #1b1b27 !important; }

/* ---------- 5. Inputs & controls ---------- */
:is(.hx-body, .hx-dash) :is(input, textarea, select):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
:is(.hx-body, .hx-dash) :is(.form-input, .dash-input, .dash-select-btn, .api-input, .region-search-input, .counter-value-box) {
  background: rgba(255, 255, 255, .06) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--hx-line) !important;
  border-radius: 12px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
:is(.hx-body, .hx-dash) :is(input, textarea, select):focus {
  background: rgba(255, 255, 255, .09) !important;
  border-color: rgba(255, 154, 60, .7) !important;
  box-shadow: 0 0 0 4px rgba(255, 107, 0, .18) !important; outline: none;
}
:is(.hx-body, .hx-dash) ::placeholder { color: var(--text-dim) !important; }
:is(.hx-body, .hx-dash) select option { background: #15151f; color: #f4f4f6; }

:is(.hx-body, .hx-dash) :is(.btn-primary, .product-btn-buy, .btn-start-group, .btn-ctrl.primary, .btn-open-giveaway-popup,
  .btn-cookie-accept, .btn-generate-coupon.active, .btn-poster-action) {
  background: linear-gradient(135deg, var(--hx-orange), var(--hx-orange-2)) !important;
  color: #fff !important; border: 0 !important; border-radius: 999px !important;
  box-shadow: 0 8px 26px rgba(255, 107, 0, .38) !important;
  transition: transform .25s var(--hx-ease), box-shadow .25s ease !important;
}
:is(.hx-body, .hx-dash) :is(.btn-primary, .product-btn-buy, .btn-start-group, .btn-ctrl.primary):hover {
  transform: translateY(-2px); box-shadow: 0 12px 34px rgba(255, 107, 0, .52) !important;
}
:is(.hx-body, .hx-dash) :is(.btn-secondary, .btn-ctrl, .panel-pill-btn.light, .btn-counter, .dash-btn-icon, .btn-generate-coupon,
  .service-btn, .pill-btn, .calc-tab-btn, .filter-btn, .blog-filter-btn, .store-search-clear, .btn-header-notif, .btn-cookie-decline) {
  background: rgba(255, 255, 255, .06) !important; color: var(--text-body) !important;
  border: 1px solid var(--hx-line) !important;
}
:is(.hx-body, .hx-dash) :is(.service-btn.active, .pill-btn.active, .calc-tab-btn.active, .filter-btn.active, .blog-filter-btn.active) {
  background: linear-gradient(135deg, var(--hx-orange), var(--hx-orange-2)) !important; color: #fff !important; border-color: transparent !important;
}
.hx-body .service-btn { border-radius: 999px !important; }

/* ---------- 6. Inline-style light backgrounds left in page HTML ---------- */
:is(.hx-body, .hx-dash) [style*="background: #fff"], :is(.hx-body, .hx-dash) [style*="background:#fff"],
:is(.hx-body, .hx-dash) [style*="background: #ffffff"], :is(.hx-body, .hx-dash) [style*="background: white"],
:is(.hx-body, .hx-dash) [style*="background: #f8fafc"], :is(.hx-body, .hx-dash) [style*="background: #fafaf9"],
:is(.hx-body, .hx-dash) [style*="background: #f4f4f5"], :is(.hx-body, .hx-dash) [style*="background: #f1f5f9"],
:is(.hx-body, .hx-dash) [style*="background: #f9fafb"], :is(.hx-body, .hx-dash) [style*="background-color: #fff"] {
  background: rgba(255, 255, 255, .055) !important;
}
:is(.hx-body, .hx-dash) :is([style*="background: #ecfdf5"], [style*="background: #f0fdf4"]) { background: rgba(16, 185, 129, .12) !important; }
:is(.hx-body, .hx-dash) :is([style*="background: #fff7ed"], [style*="background: #ffedd5"]) { background: rgba(255, 107, 0, .12) !important; }
:is(.hx-body, .hx-dash) :is([style*="background: #fffbeb"], [style*="background: #fefce8"], [style*="background: #fef08a"]) { background: rgba(251, 191, 36, .12) !important; }
:is(.hx-body, .hx-dash) :is([style*="background: #eff6ff"], [style*="background: #f0f9ff"], [style*="background: #e0e7ff"]) { background: rgba(59, 130, 246, .13) !important; }
:is(.hx-body, .hx-dash) :is([style*="background: #fef2f2"]) { background: rgba(239, 68, 68, .12) !important; }
:is(.hx-body, .hx-dash) :is([style*="background: #f5f3ff"]) { background: rgba(139, 92, 246, .13) !important; }
:is(.hx-body, .hx-dash) :is([style*="color: #18181b"], [style*="color: #0f172a"], [style*="color: #111827"],
  [style*="color: #1e293b"], [style*="color: #27272a"], [style*="color:#18181b"]) { color: var(--text-main) !important; }
:is(.hx-body, .hx-dash) :is([style*="color: #3f3f46"], [style*="color: #334155"], [style*="color: #475569"]) { color: var(--text-body) !important; }
:is(.hx-body, .hx-dash) :is([style*="border: 1px solid #e"], [style*="border-bottom: 1px solid #e"], [style*="border-top: 1px solid #e"]) {
  border-color: var(--hx-line) !important;
}

/* ---------- 7. Tables, code, misc content ---------- */
.hx-body table { border-collapse: collapse; width: 100%; }
.hx-body :is(th, td) { border-color: var(--hx-line) !important; color: var(--text-body); }
.hx-body th { background: rgba(255, 255, 255, .06) !important; color: var(--text-main) !important; }
.hx-body tr:nth-child(even) td { background: rgba(255, 255, 255, .02); }
.hx-body code { background: rgba(255, 255, 255, .08); color: #fcd34d; padding: 1px 6px; border-radius: 6px; }
.hx-body a:not([class]) { color: var(--hx-orange-2); }
.hx-body .card-tag {
  background: rgba(255, 107, 0, .12) !important; color: var(--hx-orange-2) !important;
  border: 1px solid rgba(255, 107, 0, .3) !important; border-radius: 999px !important;
}
.hx-body hr { border-color: var(--hx-line); }

/* Old page chrome that the new header/footer replace */
.hx-body > .header, .hx-body > .site-footer, .hx-body > .footer, .hx-body > .mobile-bottom-dock { display: none !important; }

/* ---------- 8. Content pages (legal, about, articles) ---------- */
.hx-page main.container, .hx-page main.hx-wrap { position: relative; }
.hx-page main.container { max-width: 1100px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.hx-page .content-card { padding: 22px 18px !important; }
.hx-page .content-card h1 {
  font-size: clamp(26px, 5vw, 42px) !important; line-height: 1.12; letter-spacing: -.02em;
  background: linear-gradient(90deg, #fff 30%, #fcd34d); -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
.hx-page .content-card h3 { border-color: var(--hx-line) !important; }
.hx-page .content-card :is(p, li) { color: var(--text-body); }
@media (min-width: 768px) {
  .hx-page .content-card { padding: 36px 40px !important; }
}

/* Page hero strip injected above content */
.hx-page-hero { margin: 18px 0 4px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--hx-text-3); flex-wrap: wrap; }
.hx-page-hero a { color: var(--hx-text-2); }
.hx-page-hero a:hover { color: var(--hx-orange-2); }
.hx-page-hero span.sep { opacity: .5; }

/* ---------- 9. STORE ---------- */
.hx-store .store-header-box {
  position: relative; overflow: hidden; border-radius: 24px !important; padding: 28px 22px !important; text-align: left;
  background: radial-gradient(120% 120% at 100% 0%, rgba(255, 107, 0, .45), transparent 55%),
              radial-gradient(90% 90% at 0% 100%, rgba(124, 58, 237, .35), transparent 60%),
              linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)) !important;
}
.hx-store .store-header-box::after {
  content: ''; position: absolute; right: -30px; top: -26px; width: 130px; height: 130px; opacity: .55;
  background: url(logo-mascot.png) center / contain no-repeat; filter: drop-shadow(0 0 40px rgba(255, 107, 0, .6));
  animation: hxStoreBob 6s ease-in-out infinite; pointer-events: none;
}
@keyframes hxStoreBob { 50% { transform: translateY(-10px) rotate(-4deg); } }
.hx-store .store-main-title { font-size: clamp(26px, 5vw, 44px) !important; font-weight: 900 !important; letter-spacing: -.02em; max-width: 720px; color: #fff !important; position: relative; z-index: 1; }
.hx-store .store-main-subtitle { color: var(--hx-text-2) !important; max-width: 620px; position: relative; z-index: 1; }
.hx-store .store-live-badge { background: rgba(34, 197, 94, .15) !important; border: 1px solid rgba(34, 197, 94, .35) !important; color: #4ade80 !important; position: relative; z-index: 1; }

.hx-store .store-search-container { border-radius: 20px !important; padding: 14px !important; background: rgba(14, 14, 22, .78) !important; }
.hx-store .store-search-bar { background: rgba(255, 255, 255, .06) !important; border: 1px solid var(--hx-line) !important; border-radius: 999px !important; }
.hx-store .store-search-bar:focus-within { border-color: rgba(255, 154, 60, .7) !important; box-shadow: 0 0 0 4px rgba(255, 107, 0, .16); }
.hx-store .store-search-input { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.hx-store .service-nav { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; flex-wrap: nowrap !important; }
.hx-store .service-nav::-webkit-scrollbar { display: none; }
.hx-store .service-btn { flex: none; white-space: nowrap; }

.hx-store .products-grid { display: grid !important; gap: 14px !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.hx-store .product-item-card { overflow: hidden; display: flex; flex-direction: column; padding: 0 !important; }
.hx-store .product-card-thumb { position: relative; border-radius: 0 !important; isolation: isolate; }
.hx-store .product-card-thumb::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .18) 50%, transparent 65%);
  transform: translateX(-120%); transition: transform .9s var(--hx-ease);
}
.hx-store .product-item-card:hover .product-card-thumb::after { transform: translateX(120%); }
.hx-store .product-thumb-icon { filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .5)); transition: transform .5s var(--hx-ease); }
.hx-store .product-item-card:hover .product-thumb-icon { transform: scale(1.12) rotate(-4deg); }
.hx-store .product-card-body { display: flex; flex-direction: column; flex: 1; }
.hx-store .product-card-title { color: #fff !important; }
.hx-store .product-card-category { color: var(--hx-orange-2) !important; }
.hx-store .product-specs-list li { color: var(--text-body) !important; }
.hx-store .product-price-section { margin-top: auto; }
.hx-store .product-price-current { font-size: 22px !important; font-weight: 900 !important; }
.hx-store .product-price-mrp { color: var(--text-dim) !important; }
.hx-store .product-discount-tag { color: #4ade80 !important; }
.hx-store .product-btn-action { border-radius: 999px !important; }
.hx-store .product-thumb-badge-left { background: rgba(0, 0, 0, .45) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, .15); }
.hx-store .store-result-counter, .hx-store .store-search-meta { color: var(--text-muted) !important; }
.hx-store .store-result-counter strong { color: #fff; }
.hx-store .store-empty-results { background: var(--hx-surface) !important; border: 1px dashed var(--hx-line-2) !important; border-radius: 18px; }
.hx-store .store-console-banner { border-radius: 18px !important; -webkit-backdrop-filter: var(--hx-blur); backdrop-filter: var(--hx-blur); }

@media (max-width: 420px) {
  .hx-store .products-grid { gap: 10px !important; }
  .hx-store .product-card-body { padding: 12px !important; }
  .hx-store .product-card-title { font-size: 14px !important; }
  .hx-store .product-specs-list { display: none; }
  .hx-store .product-btn-action { font-size: 12px !important; padding: 10px 8px !important; }
}
@media (min-width: 768px) {
  .hx-store .store-header-box { padding: 40px 36px !important; }
  .hx-store .store-header-box::after { width: 260px; height: 260px; right: 20px; top: auto; bottom: -70px; opacity: .9; }
  .hx-store .store-main-title, .hx-store .store-main-subtitle { max-width: calc(100% - 260px) !important; }
  .hx-store .store-search-container { position: sticky; top: calc(var(--hx-header-h, 66px) + 8px); z-index: 50; }
  .hx-store .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px !important; }
}
@media (min-width: 1200px) {
  .hx-store .store-header-box { padding: 56px 52px !important; }
  .hx-store .products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (min-width: 1800px) {
  .hx-store .products-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}

/* Price banner (image shows ₹99) only belongs on the store — keep content pages AdSense-clean */
.hx-page:not(.hx-store) .glory-ad-banner-link { display: none !important; }

/* ---------- 10. Giveaway page tweaks ---------- */
.hx-body :is(.wheel-card-wrapper, .rule-info-card) {
  background: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025)) !important;
  border-color: var(--hx-line) !important; border-radius: 18px !important;
  -webkit-backdrop-filter: var(--hx-blur); backdrop-filter: var(--hx-blur);
}
.hx-body .big-wheel-center-cap { background: #1b1b27 !important; }
.hx-body .normal-giveaway-card {
  border-radius: 24px !important; border: 1px solid var(--hx-line) !important;
  background: radial-gradient(120% 120% at 100% 0%, rgba(251, 191, 36, .35), transparent 55%),
              linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)) !important;
}

/* ---------- 11. DASHBOARD (bot console) ---------- */
.hx-dash .dash-navbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 100000 !important;
  background: rgba(7, 7, 11, .7) !important; border-bottom: 1px solid var(--hx-line) !important;
  -webkit-backdrop-filter: var(--hx-blur); backdrop-filter: var(--hx-blur);
}
.hx-dash .dash-brand-wrap,
.hx-dash .dash-brand-text {
  color: #ffffff !important;
}
.hx-dash .dash-brand-wrap b,
.hx-dash .dash-brand-wrap strong,
.hx-dash .dash-brand-text b,
.hx-dash .dash-brand-text strong {
  color: var(--hx-orange, #ff6b00) !important;
}
.hx-dash .dash-brand-img {
  filter: drop-shadow(0 0 10px rgba(255, 107, 0, 0.55)) !important;
}
.hx-dash .dash-sidebar { border-right: 1px solid var(--hx-line) !important; box-shadow: none !important; }
.hx-dash .dash-menu-item { color: var(--text-muted) !important; border-radius: 12px !important; transition: background .25s ease, color .25s ease; }
.hx-dash .dash-menu-item:hover { background: rgba(255, 255, 255, .06) !important; color: #fff !important; }
.hx-dash .dash-menu-item.active { background: linear-gradient(135deg, rgba(255, 107, 0, .22), rgba(255, 107, 0, .08)) !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255, 107, 0, .4); }
.hx-dash .dash-menu-badge, .hx-dash .custom-uptime-tag { background: rgba(255, 255, 255, .08) !important; color: var(--text-body) !important; }
.hx-dash .dash-card { border-radius: 18px !important; }
.hx-dash .custom-progress-track, .hx-dash .pipeline-connector { background: rgba(255, 255, 255, .1) !important; }
.hx-dash .pipeline-node .node-dot { background: rgba(255, 255, 255, .08) !important; }
.hx-dash .panel-pill-btn.dark, .hx-dash .panel-pill-btn.danger { background: rgba(0, 0, 0, .35) !important; border-color: var(--hx-line) !important; }
.hx-dash .dash-bottom-dock {
  background: rgba(16, 16, 24, .78) !important; border: 1px solid var(--hx-line) !important;
  -webkit-backdrop-filter: var(--hx-blur); backdrop-filter: var(--hx-blur);
}
.hx-dash .dash-user-badge { background: rgba(255, 255, 255, .06) !important; border-color: var(--hx-line) !important; }
.hx-dash .fampay-qr-wrapper { background: #fff !important; } /* QR must stay white to scan */
.hx-dash .api-input { background: rgba(255, 255, 255, .05) !important; }

/* QR codes & payment images stay readable */
.hx-body :is(#qrcode, .qr-box, .upi-qr-box, [id*="qr"]) { background: #fff !important; }

@media (prefers-reduced-motion: reduce) {
  .hx-store .store-header-box::after { animation: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hx-body :is(.content-card, .article-box, .product-item-card), .hx-dash .dash-card { background: #15151f !important; }
}

/* ---------- 12. Coming-soon products (store) ---------- */
.hx-store .product-item-card.is-soon { position: relative; }
.hx-store .product-item-card.is-soon .product-card-thumb { filter: saturate(.55) brightness(.85); }
.hx-store .product-item-card.is-soon .product-price-section { opacity: .55; }
.hx-store .badge-soon { background: linear-gradient(90deg, #fbbf24, #ff9a3c) !important; color: #1a1205 !important; font-weight: 900 !important; }
.hx-store .product-btn-soon {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
  background: rgba(251, 191, 36, .1) !important; color: #fcd34d !important; border: 1px dashed rgba(251, 191, 36, .45) !important;
  border-radius: 999px !important; font-weight: 800; font-family: inherit; box-shadow: none !important;
}
.hx-store .product-btn-soon:hover { background: rgba(251, 191, 36, .16) !important; }
.hx-store .store-soon-note {
  margin: 0 0 18px; padding: 14px 16px; border-radius: 16px; display: flex; gap: 12px; align-items: center; font-size: 13.5px; color: var(--text-body);
  background: rgba(251, 191, 36, .08); border: 1px solid rgba(251, 191, 36, .3);
}
.hx-store .store-soon-note b { color: #fcd34d; }
.hx-store .store-soon-note svg { flex: none; width: 22px; height: 22px; color: #fcd34d; }

/* ---------- 13. Store lock screen (store not open yet) ---------- */
body.hx-store-locked { overflow: hidden !important; height: 100vh; }
body.hx-store-locked > main { filter: blur(14px) saturate(.8); pointer-events: none; user-select: none; transform: scale(1.02); }
.hx-store-lock {
  position: fixed; inset: 0; z-index: 800; display: flex; align-items: center; justify-content: center;
  padding: calc(var(--hx-header-h, 60px) + 16px) 16px 110px;
  background: radial-gradient(70% 60% at 50% 40%, rgba(255, 107, 0, .18), transparent 70%), rgba(5, 5, 9, .55);
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  animation: hxLockIn .6s ease both;
}
.hx-lock-card {
  width: 100%; max-width: 480px; text-align: center; padding: 34px 24px 24px; border-radius: 28px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .12);
  animation: hxLockPop .7s cubic-bezier(.22, .9, .3, 1) .1s both;
}
.hx-lock-ico {
  width: 76px; height: 76px; margin: 0 auto 16px; border-radius: 24px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #fbbf24, #ff6b00); box-shadow: 0 16px 40px rgba(255, 107, 0, .45);
  animation: hxStoreBob 4s ease-in-out infinite;
}
.hx-lock-ico svg { width: 36px; height: 36px; }
.hx-lock-card h1 { font-size: clamp(30px, 7vw, 46px); font-weight: 900; line-height: 1.05; margin: 14px 0 10px; color: #fff; letter-spacing: -.02em; }
.hx-lock-card h1 span { background: linear-gradient(90deg, #fbbf24, #ff9a3c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx-lock-card p { font-size: 15px; line-height: 1.6; color: var(--hx-text-2); margin: 0 auto 20px; max-width: 380px; }
.hx-lock-card strong { color: #fff; }
.hx-lock-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.hx-lock-back { display: inline-block; margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--hx-text-3); }
.hx-lock-back:hover { color: var(--hx-orange-2); }
@keyframes hxLockIn { from { opacity: 0; } }
@keyframes hxLockPop { from { opacity: 0; transform: translateY(24px) scale(.96); } }
@media (min-width: 1200px) { .hx-store-lock { padding-bottom: 24px; } }

/* ---------- 14. Article hero image ---------- */
.hx-article-hero { margin: 16px 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--hx-line); box-shadow: 0 20px 50px rgba(0, 0, 0, .4); background: #0e0e16; }
.hx-article-hero img { width: 100%; max-height: 460px; object-fit: cover; display: block; }

/* ---------- 16. Profile pill + account menu ---------- */
:is(.hx-body, .hx-dash) .user-profile-pill {
  display: inline-flex !important; align-items: center; gap: 8px; padding: 4px 10px 4px 4px !important; border-radius: 999px !important; cursor: pointer;
  background: rgba(255, 255, 255, .07) !important; border: 1px solid rgba(255, 255, 255, .14) !important; box-shadow: none !important;
  transition: background .2s ease, border-color .2s ease;
}
:is(.hx-body, .hx-dash) .user-profile-pill:hover { background: rgba(255, 255, 255, .12) !important; border-color: rgba(255, 154, 60, .5) !important; }
:is(.hx-body, .hx-dash) .user-pill-name { color: #f4f4f6 !important; font-weight: 700; font-size: 13px; }
:is(.hx-body, .hx-dash) .udm-caret { color: #9a9aab; transition: transform .25s ease; }
:is(.hx-body, .hx-dash) .user-avatar-circle { width: 30px !important; height: 30px !important; font-weight: 900; color: #fff !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, .12); }

:is(.hx-body, .hx-dash) .udm {
  width: 290px !important; padding: 8px !important; border-radius: 20px !important; overflow: hidden;
  background: linear-gradient(165deg, rgba(32, 32, 46, .97), rgba(16, 16, 24, .98)) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important; box-shadow: 0 30px 70px rgba(0, 0, 0, .6) !important;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.udm-head { display: flex; align-items: center; gap: 12px; padding: 12px 10px 14px; margin: -8px -8px 8px; border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: radial-gradient(120% 140% at 0% 0%, rgba(255, 107, 0, .25), transparent 60%); }
.udm-avatar { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; font-weight: 900; color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .12), 0 10px 24px rgba(0, 0, 0, .35); }
.udm-id { min-width: 0; }
.udm-id strong { display: block; font-size: 14.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.udm-id small { display: block; font-size: 12px; color: #ff9a3c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.udm-uid { margin-top: 6px; display: inline-flex; align-items: center; gap: 5px; font: 600 10.5px/1 ui-monospace, Consolas, monospace; color: #b9b9c6; cursor: pointer;
  padding: 4px 8px; border-radius: 999px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .1); }
.udm-uid:hover { color: #fff; border-color: rgba(255, 154, 60, .5); }
.udm-balance { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; margin: 0 0 8px; border-radius: 14px;
  background: rgba(251, 191, 36, .08); border: 1px solid rgba(251, 191, 36, .25); }
.udm-balance small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #b9a77a; }
.udm-balance b { font-size: 18px; font-weight: 900; color: #fcd34d; }
.udm-balance b span { font-size: 12px; font-weight: 600; color: #b9a77a; }
.udm-topup { font-family: inherit; font-size: 12px; font-weight: 800; color: #1a1205; cursor: pointer; padding: 8px 12px; border-radius: 999px; border: 0;
  background: linear-gradient(90deg, #fde047, #f59e0b); box-shadow: 0 6px 16px rgba(245, 158, 11, .35); }
.udm-group { padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); margin-bottom: 4px; }
:is(.hx-body, .hx-dash) .udm .user-dropdown-link {
  display: flex !important; align-items: center; gap: 10px; padding: 10px !important; border-radius: 12px; cursor: pointer; text-decoration: none;
  font-size: 13.5px; font-weight: 600; color: #e4e4ea !important; background: transparent !important; transition: background .2s ease, color .2s ease;
}
:is(.hx-body, .hx-dash) .udm .user-dropdown-link > svg:first-child { flex: none; color: #9a9aab; }
:is(.hx-body, .hx-dash) .udm .user-dropdown-link span { flex: 1; }
:is(.hx-body, .hx-dash) .udm .user-dropdown-link:hover { background: rgba(255, 255, 255, .07) !important; color: #fff !important; }
:is(.hx-body, .hx-dash) .udm .user-dropdown-link:hover > svg:first-child { color: #ff9a3c; }
.udm-chev { color: #5f5f70; }
.udm-price { font-style: normal; font-size: 11px; font-weight: 800; color: #4ade80; padding: 3px 8px; border-radius: 999px; background: rgba(34, 197, 94, .12); border: 1px solid rgba(34, 197, 94, .3); white-space: nowrap; }
:is(.hx-body, .hx-dash) .udm .user-dropdown-link.logout { color: #fca5a5 !important; }
:is(.hx-body, .hx-dash) .udm .user-dropdown-link.logout svg { color: #f87171 !important; }
:is(.hx-body, .hx-dash) .udm .user-dropdown-link.logout:hover { background: rgba(239, 68, 68, .12) !important; }
@media (max-width: 420px) { :is(.hx-body, .hx-dash) .udm { width: min(290px, calc(100vw - 24px)) !important; } }

/* Profile settings modal polish */
:is(.hx-body, .hx-dash) .profile-card, :is(.hx-body, .hx-dash) .auth-card { border-radius: 24px !important; }
:is(.hx-body, .hx-dash) :is(.profile-card, .auth-card) :is(label, .form-label) { color: #c4c4d0 !important; }
:is(.hx-body, .hx-dash) :is(.profile-tab, .auth-tab, .ptab-btn) { color: #9a9aab !important; }
:is(.hx-body, .hx-dash) :is(.profile-tab.active, .auth-tab.active, .ptab-btn.active) { color: #ff9a3c !important; border-color: #ff9a3c !important; }

/* Region Dropdown Stacking & Dark Theme Polish */
.hx-dash #launch-new-group-card {
  position: relative !important;
  z-index: 30 !important;
}

.hx-dash .dash-card:has(.region-dropdown-modal.open),
.hx-dash #launch-new-group-card.region-open {
  position: relative !important;
  z-index: 1000 !important;
}

.hx-dash #region-field-group:has(.region-dropdown-modal.open),
.hx-dash #region-field-group.region-open {
  position: relative !important;
  z-index: 1001 !important;
}

.hx-dash .region-dropdown-modal {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  width: 100% !important;
  background: linear-gradient(165deg, #1c1c28 0%, #12121b 100%) !important;
  border: 1px solid rgba(255, 107, 0, 0.4) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  z-index: 1005 !important;
  padding: 10px !important;
}

.hx-dash .active-groups-header-bar,
.hx-dash .active-groups-list {
  position: relative !important;
  z-index: 2 !important;
}

.hx-dash .dash-brand-icon {
  background: linear-gradient(135deg, #ff6b00 0%, #ea580c 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.35) !important;
}

.hx-dash .dash-live-badge {
  background: rgba(34, 197, 94, 0.12) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

:is(.hx-body, .hx-dash) .udm,
:is(.hx-body, .hx-dash) .user-dropdown-menu,
.hx-dash .header-user-area {
  z-index: 100002 !important;
}

.hx-dash .region-search-input {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  font-size: 13px !important;
}

.hx-dash .region-search-input:focus {
  border-color: #ff6b00 !important;
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.25) !important;
}

.hx-dash .region-list-box {
  max-height: 240px !important;
  overflow-y: auto !important;
}

.hx-dash .region-list-box::-webkit-scrollbar {
  width: 6px !important;
}

.hx-dash .region-list-box::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 4px !important;
}

.hx-dash .region-list-box::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: 4px !important;
}

.hx-dash .region-list-box::-webkit-scrollbar-thumb:hover {
  background: #ff6b00 !important;
}

.hx-dash .region-option-item {
  color: #d1d5db !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  transition: all 0.15s ease !important;
}

.hx-dash .region-option-item:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  color: #ffffff !important;
}

.hx-dash .region-option-item.selected {
  background: rgba(255, 107, 0, 0.22) !important;
  color: #ff8533 !important;
  font-weight: 700 !important;
  border: 1px solid rgba(255, 107, 0, 0.35) !important;
}

/* ---------- 17. Launch polish: calmer headers, clear payment history, new subscribe popup ---------- */
/* Phone header: the dock already has Store, and the avatar alone identifies the account */
@media (max-width: 600px) {
  .hx-header .btn-nav-store { display: none !important; }
  :is(.hx-body, .hx-dash) .user-profile-pill { padding: 3px !important; gap: 0; }
  :is(.hx-body, .hx-dash) .user-profile-pill .user-pill-name,
  :is(.hx-body, .hx-dash) .user-profile-pill .udm-caret { display: none !important; }
}
.hx-dash .dash-brand-img { width: 32px; height: 32px; object-fit: contain; flex: none; }
.hx-dash .dash-empty-logo { display: block; margin: 0 auto 12px; object-fit: contain; opacity: .9; }
.hx-dash .active-groups-header-bar { gap: 10px; }
.hx-dash .live-clock-badge[hidden] { display: none !important; }

/* Coupons: two matching cards */
.hx-dash .coupon-box { border-radius: 18px !important; }
.hx-dash .coupon-box-title { color: var(--text-main) !important; }
.hx-dash .coupon-box-title svg { color: var(--hx-orange-2); }
.hx-dash .coupon-redeem-row { display: flex; gap: 8px; }
.hx-dash .coupon-redeem-row .dash-input { flex: 1; min-width: 0; }
.hx-dash .btn-redeem-coupon { background: linear-gradient(135deg, var(--hx-orange), var(--hx-orange-2)) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; white-space: nowrap; }
@media (max-width: 480px) {
  .hx-dash .coupon-redeem-row { flex-direction: column; }
  .hx-dash .btn-redeem-coupon { width: 100%; justify-content: center; }
}

/* Payment history */
.hx-dash .txn-table td { padding: 12px; vertical-align: top; color: var(--text-body) !important; }
.hx-dash .txn-id { font-family: ui-monospace, Consolas, monospace; }
.hx-dash .txn-order { display: block; font-size: 13px; font-weight: 700; color: #7dd3fc; word-break: break-all; }
.hx-dash .txn-utr { display: inline-block; margin-top: 6px; font-size: 12px; color: #e4e4ea; padding: 3px 8px; border-radius: 8px; background: rgba(255, 255, 255, .06); border: 1px solid var(--hx-line); word-break: break-all; }
.hx-dash .txn-utr em { font-style: normal; font-weight: 800; color: var(--text-muted); margin-right: 4px; letter-spacing: .06em; }
@media (max-width: 700px) {
  .hx-dash .txn-table, .hx-dash .txn-table tbody { display: block; width: 100%; }
  .hx-dash .txn-table thead { display: none; }
  .hx-dash .txn-table tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 14px 4px; }
  .hx-dash .txn-table td { display: block; padding: 0 !important; border: 0 !important; }
  .hx-dash .txn-table td:nth-child(1) { grid-column: 1 / -1; }
  .hx-dash .txn-table td:nth-child(2) { grid-column: 1; font-size: 14px; color: var(--text-main) !important; }
  .hx-dash .txn-table td:nth-child(3) { grid-column: 2; grid-row: 2; text-align: right; font-size: 16px; }
  .hx-dash .txn-table td:nth-child(4) { grid-column: 1; font-size: 12px !important; }
  .hx-dash .txn-table td:nth-child(5) { grid-column: 2; grid-row: 3; text-align: right; }
  .hx-dash .txn-table td[colspan] { grid-column: 1 / -1; text-align: center; padding: 24px 8px !important; }
}

/* Subscribe popup */
:is(.hx-body, .hx-dash) .yt-popup-card.yt2 { position: relative; width: min(400px, calc(100vw - 32px)); padding: 24px 22px 18px !important; border-radius: 22px !important; text-align: left; overflow: hidden; }
.yt2 .popup-close-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font-size: 13px;
  background: rgba(255, 255, 255, .07) !important; border: 1px solid var(--hx-line) !important; color: #d4d4dc !important; }
.yt2 .popup-close-x:hover { background: rgba(255, 255, 255, .14) !important; }
.yt2-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-right: 40px; }
.yt2-head img { width: 52px; height: 52px; object-fit: contain; flex: none; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid var(--hx-line); padding: 5px; box-sizing: border-box; }
.yt2-head b { display: block; font-size: 15px; color: #fff; }
.yt2-head small { display: block; font-size: 12.5px; color: var(--hx-text-3); }
.yt2 .yt-popup-title { font-size: 20px !important; line-height: 1.2; font-weight: 800; color: #fff !important; margin: 0 0 8px !important; text-align: left; }
.yt2 .yt-popup-desc { font-size: 14px !important; line-height: 1.55; color: var(--hx-text-2) !important; margin: 0 0 18px !important; text-align: left; }
.yt2 .yt-subscribe-btn { display: flex !important; align-items: center; justify-content: center; gap: 9px; width: 100%; box-sizing: border-box; padding: 13px 16px !important; border-radius: 999px !important;
  background: #ff0033 !important; color: #fff !important; font-size: 15px; font-weight: 800; text-decoration: none; box-shadow: none !important; }
.yt2 .yt-subscribe-btn:hover { background: #e6002e !important; }
.yt2 .yt-dismiss-btn { display: block; width: 100%; margin-top: 8px; padding: 10px; background: none !important; border: 0 !important; color: var(--hx-text-3) !important; font: 600 13px/1 inherit; font-family: inherit; cursor: pointer; }
.yt2 .yt-dismiss-btn:hover { color: #fff !important; }