/* ============================================================
   flj-wow.css — Japanese neo-Tokyo color burst (homepage)
   Sakura · torii · neon mint · gold · indigo night
   ============================================================ */

html.flj-dark :root {
  --jp-red: #ff3d52;
  --jp-vermillion: #e63946;
  --jp-sakura: #ff6b9d;
  --jp-sakura-soft: #ffb7d5;
  --jp-mint: #00f5d4;
  --jp-cyan: #38bdf8;
  --jp-gold: #fbbf24;
  --jp-purple: #c084fc;
  --jp-indigo: #6366f1;
  html.flj-dark --wow-aurora: linear-gradient(125deg,
    html.flj-dark rgba(255, 61, 82, 0.45) 0%,
    html.flj-dark rgba(255, 107, 157, 0.35) 22%,
    html.flj-dark rgba(192, 132, 252, 0.3) 45%,
    html.flj-dark rgba(56, 189, 248, 0.28) 68%,
    rgba(0, 245, 212, 0.32) 100%);
  html.flj-dark --wow-mesh: radial-gradient(ellipse 100% 80% at 50% -30%, rgba(255, 107, 157, 0.22), transparent 55%),
              html.flj-dark radial-gradient(ellipse 70% 50% at 100% 10%, rgba(192, 132, 252, 0.18), transparent 50%),
              html.flj-dark radial-gradient(ellipse 60% 45% at 0% 40%, rgba(0, 245, 212, 0.14), transparent 50%),
              radial-gradient(ellipse 50% 40% at 80% 90%, rgba(255, 61, 82, 0.12), transparent 45%);
}

/* ── Living night-sky background (dark homepage only) ── */
html.flj-dark body.flj-home::before {
  opacity: 0.1 !important;
  background-image:
    html.flj-dark radial-gradient(circle at 50% 110%, transparent 34%, rgba(255, 183, 210, 0.5) 36%, transparent 40%),
    html.flj-dark radial-gradient(circle at 0% 110%, transparent 34%, rgba(0, 245, 212, 0.35) 36%, transparent 40%),
    radial-gradient(circle at 100% 110%, transparent 34%, rgba(255, 61, 82, 0.4) 36%, transparent 40%) !important;
}

html.flj-dark body.flj-home::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--wow-mesh);
  opacity: 0.55;
  animation: wowMeshDrift 24s ease-in-out infinite alternate;
}

@keyframes wowMeshDrift {
html.flj-dark 0% { opacity: 0.7; transform: scale(1); }
html.flj-dark 100% { opacity: 1; transform: scale(1.04) translateY(-1%); }
}

/* Neo-Tokyo burst effects: dark homepage only (light uses flj-kawaii.css) */

html.flj-dark body.flj-home .site-main::after {
  background: radial-gradient(circle, rgba(255, 107, 157, 0.1) 0%, transparent 70%) !important;
  width: 640px !important;
  height: 640px !important;
}

/* ── Nav sparkle ── */
html.flj-dark .nav-logo-kanji {
  color: var(--jp-red) !important;
  text-shadow: 0 0 20px rgba(255, 61, 82, 0.6), 0 0 40px rgba(255, 107, 157, 0.3);
}

html.flj-dark #main-nav.scrolled {
  border-bottom-color: rgba(255, 107, 157, 0.15) !important;
  box-shadow: 0 8px 40px rgba(255, 61, 82, 0.08), 0 4px 24px rgba(0, 0, 0, 0.4) !important;
}

/* ── HERO — first "wow" moment (dark theme only) ── */
html.flj-dark #hero {
  background:
    html.flj-dark radial-gradient(ellipse 90% 70% at 15% 0%, rgba(255, 61, 82, 0.28), transparent 55%),
    html.flj-dark radial-gradient(ellipse 70% 55% at 95% 15%, rgba(192, 132, 252, 0.22), transparent 50%),
    html.flj-dark radial-gradient(ellipse 55% 45% at 50% 100%, rgba(0, 245, 212, 0.12), transparent 55%),
    linear-gradient(180deg, #0c0e22 0%, #08091a 100%) !important;
}

html.flj-dark .hero-aurora {
  position: absolute;
  inset: -15% -8%;
  pointer-events: none;
  z-index: 0;
  background: var(--wow-aurora);
  filter: blur(80px);
  opacity: 0.55;
  animation: wowAurora 12s ease-in-out infinite alternate;
}

@keyframes wowAurora {
html.flj-dark 0% { transform: translateX(-3%) rotate(-2deg) scale(1); opacity: 0.45; }
html.flj-dark 50% { transform: translateX(2%) rotate(1deg) scale(1.05); opacity: 0.6; }
html.flj-dark 100% { transform: translateX(4%) rotate(2deg) scale(1.02); opacity: 0.5; }
}

html.flj-dark .hero-glow-1 {
  width: 680px !important;
  height: 680px !important;
  background: radial-gradient(circle, rgba(255, 61, 82, 0.35) 0%, transparent 68%) !important;
  animation: wowPulse 8s ease-in-out infinite;
}

html.flj-dark .hero-glow-2 {
  position: absolute;
  width: 500px;
  height: 500px;
  top: 10%;
  right: -80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(192, 132, 252, 0.28) 0%, transparent 70%);
  pointer-events: none;
  animation: wowPulse 10s ease-in-out infinite 1s;
}

html.flj-dark .hero-glow-3 {
  position: absolute;
  width: 420px;
  height: 420px;
  bottom: 5%;
  left: 35%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 245, 212, 0.2) 0%, transparent 70%);
  pointer-events: none;
  animation: wowPulse 9s ease-in-out infinite 2s;
}

@keyframes wowPulse {
html.flj-dark 0%, html.flj-dark 100% { transform: scale(1); opacity: 0.7; }
html.flj-dark 50% { transform: scale(1.08); opacity: 1; }
}

html.flj-dark .hero-floaters {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

html.flj-dark .hero-float-k {
  position: absolute;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  line-height: 1;
  opacity: 0.12;
  animation: wowFloat 14s ease-in-out infinite;
}

html.flj-dark .hero-float-k:nth-child(1) { top: 18%; left: 8%; font-size: 4rem; color: var(--jp-sakura); animation-delay: 0s; text-shadow: 0 0 40px rgba(255, 107, 157, 0.5); }
html.flj-dark .hero-float-k:nth-child(2) { top: 55%; left: 4%; font-size: 3rem; color: var(--jp-mint); animation-delay: 2s; text-shadow: 0 0 40px rgba(0, 245, 212, 0.4); }
html.flj-dark .hero-float-k:nth-child(3) { top: 25%; right: 12%; font-size: 5rem; color: var(--jp-red); animation-delay: 1s; text-shadow: 0 0 50px rgba(255, 61, 82, 0.5); }
html.flj-dark .hero-float-k:nth-child(4) { bottom: 22%; right: 8%; font-size: 3.5rem; color: var(--jp-gold); animation-delay: 3s; text-shadow: 0 0 40px rgba(251, 191, 36, 0.45); }
html.flj-dark .hero-float-k:nth-child(5) { top: 70%; left: 42%; font-size: 2.8rem; color: var(--jp-purple); animation-delay: 4s; text-shadow: 0 0 40px rgba(192, 132, 252, 0.45); }

@keyframes wowFloat {
html.flj-dark 0%, html.flj-dark 100% { transform: translateY(0) rotate(0deg); opacity: 0.14; }
html.flj-dark 50% { transform: translateY(-18px) rotate(6deg); opacity: 0.28; }
}

html.flj-dark .hero-eyebrow {
  background: linear-gradient(135deg, rgba(255, 61, 82, 0.2), rgba(255, 107, 157, 0.1)) !important;
  border-color: rgba(255, 107, 157, 0.45) !important;
  color: var(--jp-sakura-soft) !important;
  box-shadow: 0 0 24px rgba(255, 107, 157, 0.15);
}

html.flj-dark .hero-method {
  background: linear-gradient(135deg, rgba(255, 61, 82, 0.15), rgba(192, 132, 252, 0.08)) !important;
  border-color: rgba(255, 107, 157, 0.35) !important;
}

html.flj-dark .hero-method-chip {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 107, 157, 0.2) !important;
  color: #eee !important;
}

html.flj-dark .hero-method-chip:nth-child(odd) { border-color: rgba(0, 245, 212, 0.25) !important; }
html.flj-dark .hero-method-day {
  background: linear-gradient(135deg, var(--jp-red), var(--jp-sakura)) !important;
  box-shadow: 0 4px 16px rgba(255, 61, 82, 0.4);
}

html.flj-dark body.flj-home .hero-title-accent {
  filter: drop-shadow(0 0 24px rgba(255, 107, 157, 0.28));
}

html.flj-dark .hero-subtitle { color: var(--text2) !important; }

html.flj-dark .hero-stat-num {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: currentColor;
  color: #fff;
}

html.flj-dark .hero-img-wrap::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--jp-red), var(--jp-sakura), var(--jp-mint), var(--jp-purple));
  background-size: 300% 300%;
  animation: gradShift 6s ease infinite;
  z-index: -1;
  opacity: 0.75;
}

html.flj-dark .hero-img {
  border: 2px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55), 0 0 60px rgba(255, 107, 157, 0.15) !important;
}

/* ── Section eyebrows & titles ── */
html.flj-dark .section-eyebrow {
  color: var(--jp-sakura) !important;
  text-shadow: 0 0 20px rgba(255, 107, 157, 0.3);
}

html.flj-dark .section-eyebrow::before {
  background: linear-gradient(90deg, var(--jp-red), var(--jp-sakura)) !important;
  box-shadow: 0 0 12px rgba(255, 61, 82, 0.5);
}

html.flj-dark .section-title {
  text-shadow: 0 0 40px rgba(255, 107, 157, 0.12);
}

html.flj-dark .page-header {
  background: var(--wow-mesh) !important;
}

html.flj-dark .page-eyebrow {
  color: var(--jp-sakura) !important;
}

html.flj-dark .page-eyebrow::before {
  background: linear-gradient(90deg, var(--jp-red), var(--jp-mint)) !important;
}

html.flj-dark .page-title {
  background: linear-gradient(135deg, #fff 20%, var(--jp-sakura-soft) 55%, var(--jp-mint) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 24px rgba(255, 107, 157, 0.2));
}

/* ── Learning path — rainbow steps ── */
html.flj-dark #learning-path-section {
  background:
    html.flj-dark linear-gradient(180deg, transparent 0%, rgba(18, 21, 46, 0.6) 50%, transparent 100%),
    radial-gradient(ellipse 80% 50% at 50% 50%, rgba(99, 102, 241, 0.1), transparent) !important;
}

html.flj-dark .path-steps::before {
  background: linear-gradient(90deg, var(--jp-red), var(--jp-sakura), var(--jp-gold), var(--jp-mint), var(--jp-purple)) !important;
  height: 3px !important;
  box-shadow: 0 0 16px rgba(255, 107, 157, 0.4);
}

html.flj-dark .path-step:nth-child(1) .path-step-num { background: rgba(255, 61, 82, 0.2); border-color: rgba(255, 61, 82, 0.55); color: #ff8a9a; box-shadow: 0 0 20px rgba(255, 61, 82, 0.25); }
html.flj-dark .path-step:nth-child(2) .path-step-num { background: rgba(56, 189, 248, 0.18); border-color: rgba(56, 189, 248, 0.5); color: #7dd3fc; box-shadow: 0 0 20px rgba(56, 189, 248, 0.2); }
html.flj-dark .path-step:nth-child(3) .path-step-num { background: rgba(251, 191, 36, 0.18); border-color: rgba(251, 191, 36, 0.5); color: #fcd34d; box-shadow: 0 0 20px rgba(251, 191, 36, 0.2); }
html.flj-dark .path-step:nth-child(4) .path-step-num { background: rgba(192, 132, 252, 0.18); border-color: rgba(192, 132, 252, 0.5); color: #d8b4fe; box-shadow: 0 0 20px rgba(192, 132, 252, 0.2); }
html.flj-dark .path-step:nth-child(5) .path-step-num { background: rgba(0, 245, 212, 0.15); border-color: rgba(0, 245, 212, 0.45); color: var(--jp-mint); box-shadow: 0 0 20px rgba(0, 245, 212, 0.2); }

html.flj-dark .path-step:hover {
  background: rgba(18, 21, 46, 0.85) !important;
  border-color: rgba(255, 107, 157, 0.25) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), 0 0 30px rgba(255, 107, 157, 0.08) !important;
}

html.flj-dark .path-hub-cta a {
  color: var(--jp-sakura) !important;
  border-bottom-color: rgba(255, 107, 157, 0.5) !important;
}

/* ── Rank cards — vivid headers ── */
html.flj-dark .rank-card-btn[data-rank="nomin"] .rank-card-header {
  background: linear-gradient(180deg, #a0622a, #6b4423) !important;
  box-shadow: inset 0 -1px 0 rgba(251, 191, 36, 0.3);
}
html.flj-dark .rank-card-btn[data-rank="samurai"] .rank-card-header {
  background: linear-gradient(180deg, #2563eb, #1e3a8a) !important;
  box-shadow: inset 0 -1px 0 rgba(56, 189, 248, 0.4);
}
html.flj-dark .rank-card-btn[data-rank="shogun"] .rank-card-header {
  background: linear-gradient(180deg, #7c3aed, #4c1d95) !important;
  box-shadow: inset 0 -1px 0 rgba(192, 132, 252, 0.4);
}
html.flj-dark .rank-card-btn[data-rank="tenno"] .rank-card-header {
  background: linear-gradient(180deg, #d97706, #92400e) !important;
  box-shadow: inset 0 -1px 0 rgba(251, 191, 36, 0.5);
}

html.flj-dark .rank-card-btn--unlocked {
  border-color: rgba(0, 245, 212, 0.4) !important;
  box-shadow: 0 0 24px rgba(0, 245, 212, 0.12), var(--shadow-card) !important;
}

/* ── Cultural grid — neon hover ── */
html.flj-dark .gc {
  border: 2px solid transparent;
  transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.35s, border-color 0.3s !important;
}

html.flj-dark .gc:hover {
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 40px rgba(255, 107, 157, 0.15) !important;
}

html.flj-dark .diag-banner {
  background: linear-gradient(90deg, #0a0a12, #1a0a14, #0a1218, #140a1a, #0a0a12) !important;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--jp-red), var(--jp-sakura), var(--jp-mint), var(--jp-purple)) 1;
}

html.flj-dark .diag-banner-text {
  background: linear-gradient(90deg, #fff, var(--jp-sakura-soft), #fff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

html.flj-dark .diag-dot {
  background: var(--jp-sakura) !important;
  box-shadow: 0 0 10px var(--jp-sakura);
}

/* ── Stats — each card a color ── */
html.flj-dark .stat-card:nth-child(1) { border-top: 3px solid var(--jp-red); }
html.flj-dark .stat-card:nth-child(1) .stat-icon-wrap { background: rgba(255, 61, 82, 0.15); border-color: rgba(255, 61, 82, 0.35); }
html.flj-dark .stat-card:nth-child(1) .stat-num { background: linear-gradient(135deg, #fff, var(--jp-red)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

html.flj-dark .stat-card:nth-child(2) { border-top: 3px solid var(--jp-sakura); }
html.flj-dark .stat-card:nth-child(2) .stat-icon-wrap { background: rgba(255, 107, 157, 0.15); border-color: rgba(255, 107, 157, 0.35); }
html.flj-dark .stat-card:nth-child(2) .stat-num { background: linear-gradient(135deg, #fff, var(--jp-sakura)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

html.flj-dark .stat-card:nth-child(3) { border-top: 3px solid var(--jp-gold); }
html.flj-dark .stat-card:nth-child(3) .stat-icon-wrap { background: rgba(251, 191, 36, 0.15); border-color: rgba(251, 191, 36, 0.35); }
html.flj-dark .stat-card:nth-child(3) .stat-num { background: linear-gradient(135deg, #fff, var(--jp-gold)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

html.flj-dark .stat-card:nth-child(4) { border-top: 3px solid var(--jp-mint); }
html.flj-dark .stat-card:nth-child(4) .stat-icon-wrap { background: rgba(0, 245, 212, 0.12); border-color: rgba(0, 245, 212, 0.35); }
html.flj-dark .stat-card:nth-child(4) .stat-num { background: linear-gradient(135deg, #fff, var(--jp-mint)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ── Tool cards — colored glows ── */
html.flj-dark #tools-section {
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(18, 21, 46, 0.9) 50%, var(--bg) 100%) !important;
}

html.flj-dark .tool-card:nth-child(1) .tool-card-glow { background: rgba(255, 61, 82, 0.35); }
html.flj-dark .tool-card:nth-child(1):hover::after { background: var(--jp-red); }
html.flj-dark .tool-card:nth-child(2) .tool-card-glow { background: rgba(56, 189, 248, 0.35); }
html.flj-dark .tool-card:nth-child(2):hover::after { background: var(--jp-cyan); }
html.flj-dark .tool-card:nth-child(3) .tool-card-glow { background: rgba(251, 191, 36, 0.35); }
html.flj-dark .tool-card:nth-child(3):hover::after { background: var(--jp-gold); }
html.flj-dark .tool-card:nth-child(4) .tool-card-glow { background: rgba(192, 132, 252, 0.35); }
html.flj-dark .tool-card:nth-child(4):hover::after { background: var(--jp-purple); }
html.flj-dark .tool-card:nth-child(5) .tool-card-glow { background: rgba(0, 245, 212, 0.3); }
html.flj-dark .tool-card:nth-child(5):hover::after { background: var(--jp-mint); }
html.flj-dark .tool-card:nth-child(6) .tool-card-glow { background: rgba(255, 107, 157, 0.35); }
html.flj-dark .tool-card:nth-child(6):hover::after { background: var(--jp-sakura); }

/* ── Quiz section rainbow top ── */
html.flj-dark #quiz-section {
  background:
    html.flj-dark radial-gradient(ellipse 80% 60% at 50% 0%, rgba(99, 102, 241, 0.15), transparent),
    linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%) !important;
}

html.flj-dark .quiz-wrap::before {
  height: 4px !important;
  background: linear-gradient(90deg, var(--jp-red), var(--jp-sakura), var(--jp-gold), var(--jp-mint), var(--jp-purple)) !important;
  background-size: 200% 100% !important;
  animation: gradShift 4s ease infinite !important;
}

html.flj-dark .quiz-prompt { color: var(--jp-sakura) !important; text-shadow: 0 0 24px rgba(255, 107, 157, 0.25); }

/* ── CTA finale ── */
html.flj-dark #cta-section {
  background:
    html.flj-dark radial-gradient(ellipse 70% 60% at 50% 50%, rgba(124, 58, 237, 0.2), transparent),
    html.flj-dark radial-gradient(ellipse 50% 40% at 20% 60%, rgba(255, 61, 82, 0.18), transparent),
    linear-gradient(180deg, #08091a, #12102a) !important;
}

html.flj-dark .cta-glow-1 { background: radial-gradient(circle, rgba(192, 132, 252, 0.25) 0%, transparent 70%) !important; }
html.flj-dark .cta-glow-2 { background: radial-gradient(circle, rgba(255, 61, 82, 0.2) 0%, transparent 70%) !important; }

html.flj-dark .cta-jp-big {
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.08), rgba(0, 245, 212, 0.06));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── Inner pages — colorful cards ── */
html.flj-dark .pricing-card.featured {
  border-color: rgba(255, 61, 82, 0.55) !important;
  box-shadow: 0 0 40px rgba(255, 61, 82, 0.2), var(--shadow-card) !important;
}

html.flj-dark .pricing-card:nth-child(1) { border-top: 3px solid var(--jp-gold); }
html.flj-dark .pricing-card:nth-child(2) { border-top: 3px solid var(--jp-red); }
html.flj-dark .pricing-card:nth-child(3) { border-top: 3px solid #d4a820; }
html.flj-dark .pricing-card:nth-child(4) { border-top: 3px solid var(--jp-purple); }

html.flj-dark .skill-card:nth-child(3n+1):hover { border-color: rgba(255, 61, 82, 0.4) !important; }
html.flj-dark .skill-card:nth-child(3n+2):hover { border-color: rgba(0, 245, 212, 0.4) !important; }
html.flj-dark .skill-card:nth-child(3n):hover { border-color: rgba(192, 132, 252, 0.4) !important; }

html.flj-dark .login-box::before {
  height: 4px !important;
  background: linear-gradient(90deg, var(--jp-red), var(--jp-sakura), var(--jp-mint)) !important;
}

html.flj-dark .flj-callout {
  border-color: rgba(255, 107, 157, 0.2) !important;
  background: linear-gradient(145deg, rgba(30, 20, 50, 0.85), rgba(13, 15, 18, 0.92)) !important;
}

html.flj-dark .faq-item[open] {
  border-color: rgba(255, 107, 157, 0.4) !important;
  box-shadow: 0 8px 32px rgba(255, 107, 157, 0.1) !important;
}

html.flj-dark .user-rank-strip {
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3), 0 0 30px color-mix(in srgb, var(--rank-color) 15%, transparent) !important;
}

/* ── Footer rainbow line ── */
html.flj-dark footer {
  position: relative;
  background: linear-gradient(180deg, var(--bg2) 0%, #060712 100%) !important;
}

html.flj-dark footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--jp-red), var(--jp-sakura), var(--jp-gold), var(--jp-mint), var(--jp-purple));
}

html.flj-dark .footer-brand-jp {
  text-shadow: 0 0 16px rgba(255, 61, 82, 0.5);
}

/* ── Signup gate pop ── */
html.flj-dark .flj-gate-card {
  border-color: rgba(255, 107, 157, 0.45) !important;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.65), 0 0 80px rgba(255, 107, 157, 0.2) !important;
}

html.flj-dark .flj-gate-jp {
  filter: drop-shadow(0 0 20px rgba(255, 107, 157, 0.4));
}

/* ── Homepage-only: sakura drift + torii accent ── */
html.flj-dark body.flj-home #main-nav::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--red, #E6483D);
  opacity: 0.25;
  transition: opacity 0.3s;
}

html.flj-dark body.flj-home #main-nav.scrolled::after {
  opacity: 0.45;
}

html.flj-dark .wow-sakura-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

html.flj-dark .wow-sakura-layer span {
  position: absolute;
  top: -24px;
  width: 11px;
  height: 11px;
  border-radius: 50% 0 50% 50%;
  background: linear-gradient(135deg, var(--jp-sakura-soft), var(--jp-sakura));
  opacity: 0;
  filter: blur(0.3px);
  box-shadow: 0 0 8px rgba(255, 107, 157, 0.35);
  animation: wowSakuraFall linear infinite;
}

html.flj-dark .wow-sakura-layer span:nth-child(1) { left: 6%;  animation-duration: 14s; animation-delay: 0s;   width: 9px;  height: 9px; }
html.flj-dark .wow-sakura-layer span:nth-child(2) { left: 14%; animation-duration: 18s; animation-delay: 2s;   }
html.flj-dark .wow-sakura-layer span:nth-child(3) { left: 22%; animation-duration: 12s; animation-delay: 5s;   width: 13px; height: 13px; background: linear-gradient(135deg, #ffd6e6, #ff8fab); }
html.flj-dark .wow-sakura-layer span:nth-child(4) { left: 31%; animation-duration: 16s; animation-delay: 1s;   }
html.flj-dark .wow-sakura-layer span:nth-child(5) { left: 40%; animation-duration: 20s; animation-delay: 7s;   width: 8px;  height: 8px; }
html.flj-dark .wow-sakura-layer span:nth-child(6) { left: 48%; animation-duration: 13s; animation-delay: 3s;   }
html.flj-dark .wow-sakura-layer span:nth-child(7) { left: 56%; animation-duration: 17s; animation-delay: 9s;   width: 12px; height: 12px; }
html.flj-dark .wow-sakura-layer span:nth-child(8) { left: 64%; animation-duration: 15s; animation-delay: 0.5s; }
html.flj-dark .wow-sakura-layer span:nth-child(9) { left: 72%; animation-duration: 19s; animation-delay: 4s;   width: 10px; height: 10px; }
html.flj-dark .wow-sakura-layer span:nth-child(10) { left: 80%; animation-duration: 11s; animation-delay: 6s;   }
html.flj-dark .wow-sakura-layer span:nth-child(11) { left: 88%; animation-duration: 16s; animation-delay: 8s;   width: 14px; height: 14px; }
html.flj-dark .wow-sakura-layer span:nth-child(12) { left: 94%; animation-duration: 14s; animation-delay: 2.5s; }
html.flj-dark .wow-sakura-layer span:nth-child(13) { left: 18%; animation-duration: 22s; animation-delay: 11s;  width: 7px;  height: 7px;  opacity: 0.5; }
html.flj-dark .wow-sakura-layer span:nth-child(14) { left: 52%; animation-duration: 21s; animation-delay: 13s;  }
html.flj-dark .wow-sakura-layer span:nth-child(15) { left: 76%; animation-duration: 23s; animation-delay: 10s;  width: 9px;  height: 9px; }

@keyframes wowSakuraFall {
html.flj-dark 0% { transform: translateY(-20px) rotate(0deg) translateX(0);     opacity: 0; }
html.flj-dark 8% { opacity: 0.55; }
html.flj-dark 50% { transform: translateY(48vh) rotate(180deg) translateX(30px); opacity: 0.45; }
html.flj-dark 92% { opacity: 0.2; }
html.flj-dark 100% { transform: translateY(105vh) rotate(360deg) translateX(-20px); opacity: 0; }
}

html.flj-dark .hero-torii-accent {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(520px, 90vw);
  height: 48px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  background:
    html.flj-dark linear-gradient(var(--jp-red), var(--jp-red)) 12% 0 / 14px 100% no-repeat,
    html.flj-dark linear-gradient(var(--jp-red), var(--jp-red)) 88% 0 / 14px 100% no-repeat,
    linear-gradient(var(--jp-vermillion), var(--jp-red)) 0 72% / 100% 10px no-repeat;
  filter: drop-shadow(0 0 24px rgba(255, 61, 82, 0.45));
}

html.flj-dark .hero-title-red {
  animation: fadeUp 0.7s ease 0.25s both, gradShift 5s ease infinite !important;
}

html.flj-dark .hero-title {
  text-shadow: 0 0 60px rgba(255, 107, 157, 0.15);
}

html.flj-dark body.flj-home #hero .btn-hero-primary,
html.flj-dark body.flj-home #cta-section .btn-hero-primary {
  background: linear-gradient(135deg, var(--jp-red) 0%, var(--jp-sakura) 50%, var(--jp-vermillion) 100%) !important;
  box-shadow: 0 4px 24px rgba(255, 61, 82, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

html.flj-dark body.flj-home #hero .btn-hero-primary:hover,
html.flj-dark body.flj-home #cta-section .btn-hero-primary:hover {
  box-shadow: 0 10px 36px rgba(255, 61, 82, 0.5), 0 0 32px rgba(255, 107, 157, 0.2) !important;
}

html.flj-dark .btn-hero-ghost:hover {
  border-color: rgba(255, 107, 157, 0.45) !important;
  color: var(--jp-sakura-soft) !important;
  box-shadow: 0 0 24px rgba(255, 107, 157, 0.12);
}

html.flj-dark .hero-stat-div {
  background: linear-gradient(180deg, transparent, rgba(255, 107, 157, 0.35), transparent) !important;
}

html.flj-dark .path-step-icon {
  filter: drop-shadow(0 0 12px rgba(255, 107, 157, 0.25));
}

html.flj-dark .path-step:nth-child(1):hover .path-step-icon { color: #ff8a9a; text-shadow: 0 0 20px rgba(255, 61, 82, 0.5); }
html.flj-dark .path-step:nth-child(2):hover .path-step-icon { filter: drop-shadow(0 0 16px rgba(56, 189, 248, 0.5)); }
html.flj-dark .path-step:nth-child(3):hover .path-step-icon { filter: drop-shadow(0 0 16px rgba(251, 191, 36, 0.5)); }
html.flj-dark .path-step:nth-child(4):hover .path-step-icon { filter: drop-shadow(0 0 16px rgba(192, 132, 252, 0.5)); }
html.flj-dark .path-step:nth-child(5):hover .path-step-icon { filter: drop-shadow(0 0 16px rgba(0, 245, 212, 0.5)); }

/* Cultural grid — each tile its own neon halo */
html.flj-dark .gc:nth-child(1):hover { box-shadow: 0 0 40px rgba(251, 191, 36, 0.35); }
html.flj-dark .gc:nth-child(2):hover { box-shadow: 0 0 40px rgba(255, 61, 82, 0.4); }
html.flj-dark .gc:nth-child(3):hover { box-shadow: 0 0 40px rgba(56, 189, 248, 0.35); }
html.flj-dark .gc:nth-child(4):hover { box-shadow: 0 0 40px rgba(34, 211, 238, 0.35); }
html.flj-dark .gc:nth-child(5):hover { box-shadow: 0 0 40px rgba(74, 222, 128, 0.35); }
html.flj-dark .gc:nth-child(6):hover { box-shadow: 0 0 40px rgba(249, 115, 22, 0.35); }
html.flj-dark .gc:nth-child(7):hover { box-shadow: 0 0 40px rgba(167, 139, 250, 0.4); }
html.flj-dark .gc:nth-child(8):hover { box-shadow: 0 0 40px rgba(245, 158, 11, 0.4); }
html.flj-dark .gc:nth-child(9):hover { box-shadow: 0 0 40px rgba(168, 85, 247, 0.35); }
html.flj-dark .gc:nth-child(10):hover { box-shadow: 0 0 40px rgba(56, 189, 248, 0.35); }
html.flj-dark .gc:nth-child(11):hover { box-shadow: 0 0 40px rgba(74, 222, 128, 0.4); }
html.flj-dark .gc:nth-child(12):hover { box-shadow: 0 0 40px rgba(255, 61, 82, 0.45); }

html.flj-dark #structured-promo {
  background:
    html.flj-dark radial-gradient(ellipse 60% 80% at 0% 50%, rgba(255, 61, 82, 0.15), transparent),
    html.flj-dark radial-gradient(ellipse 50% 70% at 100% 50%, rgba(0, 245, 212, 0.1), transparent),
    linear-gradient(135deg, #0c0818 0%, #120a14 50%, #081218 100%) !important;
  border-top: 2px solid transparent !important;
  border-bottom: 2px solid transparent !important;
  border-image: linear-gradient(90deg, var(--jp-red), var(--jp-sakura), var(--jp-mint)) 1 !important;
}

html.flj-dark .promo-day-card:nth-child(1) { border-top: 2px solid var(--jp-red); }
html.flj-dark .promo-day-card:nth-child(2) { border-top: 2px solid var(--jp-gold); }
html.flj-dark .promo-day-card:nth-child(3) { border-top: 2px solid var(--jp-sakura); }
html.flj-dark .promo-day-card:nth-child(4) { border-top: 2px solid var(--jp-cyan); }
html.flj-dark .promo-day-card:nth-child(5) { border-top: 2px solid var(--jp-purple); }
html.flj-dark .promo-day-card:nth-child(6) { border-top: 2px solid var(--jp-mint); }

html.flj-dark .promo-day-card:hover {
  border-color: rgba(255, 107, 157, 0.35) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 0 24px rgba(255, 107, 157, 0.1);
}

html.flj-dark .rank-card.rank-featured {
  border-color: rgba(251, 191, 36, 0.45) !important;
  box-shadow: 0 0 32px rgba(251, 191, 36, 0.15), var(--shadow-card, 0 24px 60px rgba(0,0,0,.45)) !important;
}

html.flj-dark .ranks-grid .rank-card:nth-child(2):hover { border-color: rgba(56, 189, 248, 0.4) !important; box-shadow: 0 32px 80px rgba(0,0,0,.55), 0 0 40px rgba(56, 189, 248, 0.12) !important; }
html.flj-dark .ranks-grid .rank-card:nth-child(3):hover { border-color: rgba(251, 191, 36, 0.4) !important; box-shadow: 0 32px 80px rgba(0,0,0,.55), 0 0 40px rgba(251, 191, 36, 0.12) !important; }
html.flj-dark .ranks-grid .rank-card:nth-child(4):hover { border-color: rgba(192, 132, 252, 0.45) !important; box-shadow: 0 32px 80px rgba(0,0,0,.55), 0 0 40px rgba(192, 132, 252, 0.15) !important; }

html.flj-dark #cta-section .section-title span {
  background: linear-gradient(135deg, var(--jp-red), var(--jp-sakura), var(--jp-gold)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 20px rgba(255, 107, 157, 0.3));
}

html.flj-dark .cta-jp-big {
  font-size: clamp(6rem, 18vw, 14rem) !important;
  opacity: 0.06 !important;
  filter: drop-shadow(0 0 40px rgba(255, 107, 157, 0.2));
}

/* Inner pages — vivid headers & glass cards */
html.flj-dark .page-header {
  position: relative;
  overflow: hidden;
}

html.flj-dark .page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--wow-aurora);
  filter: blur(100px);
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
}

html.flj-dark .page-header > * {
  position: relative;
  z-index: 1;
}

html.flj-dark .flj-glass-card,
html.flj-dark .pricing-card,
html.flj-dark .login-box,
html.flj-dark .quiz-wrap {
  border-color: rgba(255, 107, 157, 0.12) !important;
}

html.flj-dark .flj-glass-card:hover,
html.flj-dark .skill-card:hover {
  border-color: rgba(255, 107, 157, 0.28) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 32px rgba(255, 107, 157, 0.08) !important;
}

html.flj-dark ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--jp-red), var(--jp-sakura), var(--jp-purple)) !important;
}

html.flj-dark .nav-study {
  border-color: rgba(255, 107, 157, 0.45) !important;
  color: var(--jp-sakura) !important;
  box-shadow: 0 0 16px rgba(255, 107, 157, 0.12);
}

html.flj-dark .nav-study:hover {
  background: rgba(255, 107, 157, 0.12) !important;
  box-shadow: 0 0 24px rgba(255, 107, 157, 0.2);
}

html.flj-dark .nav-links a.active::after {
  background: linear-gradient(90deg, var(--jp-red), var(--jp-mint)) !important;
  height: 2px !important;
  box-shadow: 0 0 8px rgba(255, 107, 157, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  html.flj-dark body.flj-home::after,
  html.flj-dark .hero-aurora,
  html.flj-dark .hero-glow-1,
  html.flj-dark .hero-glow-2,
  html.flj-dark .hero-glow-3,
  html.flj-dark .hero-float-k,
  html.flj-dark .wow-sakura-layer span,
  html.flj-dark .hero-img-wrap::before,
  html.flj-dark .quiz-wrap::before,
  html.flj-dark .hero-title-line,
  html.flj-dark .hero-stat-num,
  html.flj-dark .reveal,
  html.flj-dark .reveal-scale,
  html.flj-dark .rank-card-btn,
  html.flj-dark .tool-card,
html.flj-dark .path-step {
    animation: none !important;
    transition: none !important;
  }
}