/* JFun Brand v1 - pink / pastel + glassmorphism design system.
   Loaded AFTER each page's own <style>. Uses html:root (higher specificity than a page's :root),
   so it wins no matter where the <link> sits. New classes start with jf-.
   Logo colours: magenta #F20289 -> coral #FB2B52. */

/* ---------- 1. Tokens (light) ---------- */
html:root {
  --jf-pink: #F20289;
  --jf-pink-dark: #C4006E;
  --jf-coral: #FB2B52;
  --jf-grad: linear-gradient(135deg, #F20289 0%, #FB2B52 100%);
  --jf-grad-soft: linear-gradient(135deg, rgba(242,2,137,0.14) 0%, rgba(251,43,82,0.14) 100%);
  --jf-page-bg:
    radial-gradient(900px 520px at 8% -8%, #FFD3E6 0%, rgba(255,211,230,0) 62%),
    radial-gradient(820px 520px at 100% 4%, #FFE1D8 0%, rgba(255,225,216,0) 58%),
    radial-gradient(760px 620px at 55% 108%, #EBDAFF 0%, rgba(235,218,255,0) 62%),
    #FFF5F9;
  --jf-glass: rgba(255, 255, 255, 0.66);
  --jf-glass-strong: rgba(255, 255, 255, 0.82);
  --jf-glass-border: rgba(255, 255, 255, 0.85);
  --jf-glass-shadow: 0 8px 28px rgba(242, 2, 137, 0.10), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  --jf-solid: #FFFFFF;
  --jf-blur: blur(14px) saturate(150%);
  --jf-radius: 16px;
  --jf-radius-sm: 12px;

  /* variables already used by every page */
  --bg-color: #FFF5F9;
  --card-bg: rgba(255, 255, 255, 0.72);
  --text-color: #2D1B2E;
  --text-secondary: #86697E;
  --primary-color: #F20289;
  --primary-dark: #C4006E;
  --accent-blue: #5B8DEF;
  --accent-green: #2FBF8B;
  --accent-orange: #FF9A55;
  --accent-purple: #A66BFF;
  --accent-red: #FF4D6D;
  --border-color: rgba(242, 2, 137, 0.14);
  --shadow-color: rgba(242, 2, 137, 0.12);

  /* PWA layer variables (assets/pwa/jfun-pwa.css) */
  --jf-nav-bg: rgba(255, 255, 255, 0.78);
  --jf-nav-border: rgba(242, 2, 137, 0.16);
  --jf-nav-shadow: 0 -8px 30px rgba(242, 2, 137, 0.14);
  --jf-active: #F20289;
  --jf-text: #86697E;
  --jf-fg: #2D1B2E;
  --jf-toast-bg: #3A2238;
  --jf-skel-a: #FFE3EF;
  --jf-skel-b: #FFF0F6;
}

/* ---------- 2. Tokens (dark) ---------- */
html[data-theme="dark"]:root {
  --jf-page-bg:
    radial-gradient(900px 520px at 8% -8%, rgba(242,2,137,0.28) 0%, rgba(242,2,137,0) 62%),
    radial-gradient(820px 520px at 100% 4%, rgba(251,43,82,0.20) 0%, rgba(251,43,82,0) 58%),
    radial-gradient(760px 620px at 55% 108%, rgba(140,90,255,0.22) 0%, rgba(140,90,255,0) 62%),
    #150A16;
  --jf-glass: rgba(44, 22, 46, 0.62);
  --jf-glass-strong: rgba(52, 27, 54, 0.82);
  --jf-glass-border: rgba(255, 255, 255, 0.10);
  --jf-glass-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  --jf-solid: #241226;
  --bg-color: #150A16;
  --card-bg: rgba(44, 22, 46, 0.68);
  --text-color: #FCEAF4;
  --text-secondary: #C9A7BD;
  --border-color: rgba(255, 255, 255, 0.10);
  --shadow-color: rgba(0, 0, 0, 0.5);
  --jf-nav-bg: rgba(30, 14, 32, 0.80);
  --jf-nav-border: rgba(255, 255, 255, 0.10);
  --jf-nav-shadow: 0 -8px 30px rgba(0, 0, 0, 0.55);
  --jf-active: #FF5AA9;
  --jf-text: #C9A7BD;
  --jf-fg: #FCEAF4;
  --jf-toast-bg: #2E1630;
  --jf-skel-a: #341A36;
  --jf-skel-b: #452446;
}

/* ---------- 3. Page background + base ---------- */
html body {
  background: var(--jf-page-bg);
  background-attachment: fixed;
  color: var(--text-color);
}
html body::selection, html body *::selection { background: rgba(242, 2, 137, 0.22); }
html :focus-visible { outline: 2px solid rgba(242, 2, 137, 0.55); outline-offset: 2px; }

/* ---------- 4. Glass surfaces (only the big ones get blur: keeps low-end phones smooth) ---------- */
html body .navbar,
html body .merged-card,
html body .info-card {
  background: var(--jf-glass);
  -webkit-backdrop-filter: var(--jf-blur);
  backdrop-filter: var(--jf-blur);
  border: 1px solid var(--jf-glass-border);
  box-shadow: var(--jf-glass-shadow);
  border-radius: var(--jf-radius);
}
/* hero banner (wallet / referrals / profile): brand gradient with white text */
html body .referral-section {
  background: var(--jf-grad);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--jf-radius);
  box-shadow: 0 14px 34px rgba(242, 2, 137, 0.30), 0 1px 0 rgba(255, 255, 255, 0.35) inset;
}
html body .referral-link-box { background: rgba(255, 255, 255, 0.22); border: 1px solid rgba(255, 255, 255, 0.28); }

/* small cards: translucent, no blur */
html body .stat-card {
  background: var(--jf-glass);
  border: 1px solid var(--jf-glass-border);
  box-shadow: var(--jf-glass-shadow);
  border-radius: var(--jf-radius-sm);
}
html body .stat-card:hover { box-shadow: 0 12px 30px rgba(242, 2, 137, 0.16); }

/* dark mode: per-type stat numbers use dark hard-coded colours on pages, lift them */
html[data-theme="dark"] body .stat-card .stat-card-value,
html[data-theme="dark"] body .stat-card.balance-card .stat-card-value,
html[data-theme="dark"] body .stat-card.deposit-card .stat-card-value,
html[data-theme="dark"] body .stat-card.withdraw-card .stat-card-value,
html[data-theme="dark"] body .stat-card.refer-card .stat-card-value,
html[data-theme="dark"] body .stat-card.net-card .stat-card-value,
html[data-theme="dark"] body .stat-card.earnings-card .stat-card-value { color: var(--text-color); }

/* dropdowns / modals / toasts must stay readable: solid */
html body .currency-options,
html body .modal-content,
html body .modal-box,
html body .rules-content,
html body .toast {
  background: var(--jf-solid);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  box-shadow: 0 16px 40px rgba(242, 2, 137, 0.18);
}
html body .currency-option.active { background: var(--jf-grad-soft); color: var(--jf-pink); }

/* ---------- 5. Inputs ---------- */
html body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]),
html body select,
html body textarea {
  background: var(--jf-glass-strong);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: var(--jf-radius-sm);
  transition: border-color .2s ease, box-shadow .2s ease;
}
html body input:focus,
html body select:focus,
html body textarea:focus {
  border-color: var(--jf-pink);
  box-shadow: 0 0 0 3px rgba(242, 2, 137, 0.16);
  outline: none;
}
html body ::placeholder { color: var(--text-secondary); opacity: .8; }

/* ---------- 6. Shared PWA layer (bottom nav, install card, toast, theme button) ---------- */
html body .jf-nav {
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-top: 1px solid var(--jf-nav-border);
}
html body .jf-nav-item.active { background: var(--jf-grad-soft); }
html body .jf-nav-item.active::before { background: var(--jf-grad); }
html body .jf-theme-btn,
html body .jf-install {
  -webkit-backdrop-filter: var(--jf-blur);
  backdrop-filter: var(--jf-blur);
  border-color: var(--jf-glass-border);
}
html body .jf-btn-primary { background: var(--jf-grad); box-shadow: 0 6px 16px rgba(242, 2, 137, 0.28); }
html body #jf-progress { background: var(--jf-grad); }
html body .jf-toast { border-left-color: var(--jf-pink); }
html body .jf-toast.jf-success { border-left-color: #2FBF8B; }
html body .jf-toast.jf-error { border-left-color: #FF4D6D; }
html body .jf-toast.jf-warning { border-left-color: #FF9A55; }

/* ---------- 7. Reusable brand classes (use these in new/edited markup) ---------- */
.jf-logo { display: inline-block; width: 44px; height: 44px; object-fit: contain; vertical-align: middle; }
.jf-logo-lg { width: 96px; height: 96px; filter: drop-shadow(0 10px 22px rgba(242, 2, 137, 0.30)); }
.jf-brand-title {
  font-weight: 700; letter-spacing: .2px;
  background: var(--jf-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.jf-glass {
  background: var(--jf-glass);
  -webkit-backdrop-filter: var(--jf-blur); backdrop-filter: var(--jf-blur);
  border: 1px solid var(--jf-glass-border);
  box-shadow: var(--jf-glass-shadow);
  border-radius: var(--jf-radius);
}
.jf-glass-strong { background: var(--jf-glass-strong); }
.jf-btn-brand {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--jf-grad); color: #fff; border: 0; border-radius: var(--jf-radius-sm);
  padding: 12px 18px; font: 600 14px/1 'Poppins', 'Arial', sans-serif; cursor: pointer;
  text-decoration: none; box-shadow: 0 8px 20px rgba(242, 2, 137, 0.30);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.jf-btn-brand:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(242, 2, 137, 0.36); filter: saturate(1.08); }
.jf-btn-brand:active { transform: translateY(0); }
.jf-btn-brand[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.jf-btn-glass {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--jf-glass-strong); color: var(--jf-pink); border: 1px solid var(--border-color);
  border-radius: var(--jf-radius-sm); padding: 11px 16px; font: 600 14px/1 'Poppins', 'Arial', sans-serif;
  cursor: pointer; text-decoration: none;
}
.jf-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: var(--jf-grad-soft); color: var(--jf-pink); font: 600 11px/1.2 'Poppins', 'Arial', sans-serif;
}

/* ---------- 8. Fallbacks and accessibility ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html:root { --jf-glass: rgba(255, 255, 255, 0.94); --jf-glass-strong: #FFFFFF; --jf-nav-bg: #FFFFFF; }
  html[data-theme="dark"]:root { --jf-glass: rgba(44, 22, 46, 0.96); --jf-glass-strong: #2C162E; --jf-nav-bg: #1E0E20; }
}
@media (max-width: 480px) {
  /* lighter blur on small screens = smoother scrolling on low-end phones */
  html:root { --jf-blur: blur(10px) saturate(140%); }
}
@media (prefers-reduced-transparency: reduce) {
  html:root { --jf-glass: rgba(255, 255, 255, 0.96); --jf-glass-strong: #FFFFFF; }
  html[data-theme="dark"]:root { --jf-glass: rgba(44, 22, 46, 0.97); --jf-glass-strong: #2C162E; }
  html body .navbar, html body .merged-card, html body .info-card,
  html body .jf-nav, html body .jf-glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .jf-btn-brand, .jf-btn-glass { transition: none; }
}
@media print {
  html body { background: #fff; }
  html body .navbar, html body .merged-card, html body .info-card, html body .stat-card {
    -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  }
}