html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; }
.font-jp { font-family: 'Noto Serif JP', serif; }
.font-display { font-family: 'Shippori Mincho', 'Noto Serif JP', serif; }

/* Scroll progress */
#scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, #bc002d, #d4af37, #bc002d);
  z-index: 9999; transition: width 0.1s linear;
  box-shadow: 0 0 10px rgba(188, 0, 45, 0.6);
}

/* Solid cards — backdrop-filter removed (was main scroll-jank source) */
.glass { background: #ffffff; }
.dark .glass { background: #1a1a1d; border-color: rgba(212, 175, 55, 0.15); }
/* Transparent glass only for the fixed nav, with solid fallback */
nav.glass { background: rgba(245, 240, 232, 0.96); }
.dark nav.glass { background: rgba(15, 15, 16, 0.96); }

/* HERO — light = sakura washi paper, dark = night ruby */
.hero-bg {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 182, 193, 0.55) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(255, 255, 255, 0.7) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(236, 64, 122, 0.12) 0%, transparent 50%),
    linear-gradient(135deg, #fde8ec 0%, #fff5f7 40%, #fde8ec 100%);
}
.dark .hero-bg {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(188, 0, 45, 0.85) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(139, 0, 0, 0.6) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(0, 0, 0, 0.7) 0%, transparent 50%),
    linear-gradient(135deg, #0f0f10 0%, #1a0008 50%, #0f0f10 100%);
}

/* HERO content overrides — light = red/dark text on sakura; dark = white on night */
.hero-bg .text-white\/95 { color: #bc002d; }
.hero-bg .text-white\/90,
.hero-bg .text-white\/80 { color: rgba(15, 15, 16, 0.82); }
.hero-bg .text-white\/70 { color: rgba(15, 15, 16, 0.58); }
.hero-bg .text-jp-gold,
.hero-bg .text-jp-gold\/90 { color: #bc002d; }
.hero-bg .bg-white\/10 { background-color: rgba(188, 0, 45, 0.08); }
.hero-bg .hover\:bg-white\/20:hover { background-color: rgba(188, 0, 45, 0.18); }
.hero-bg .border-white\/20 { border-color: rgba(188, 0, 45, 0.22); }
.hero-bg .border-white\/30 { border-color: rgba(188, 0, 45, 0.3); }
.hero-bg .bg-jp-gold.animate-pulse { background-color: #bc002d; }

.dark .hero-bg .text-white\/95 { color: rgba(255, 255, 255, 0.95); }
.dark .hero-bg .text-white\/90,
.dark .hero-bg .text-white\/80 { color: rgba(255, 255, 255, 0.9); }
.dark .hero-bg .text-white\/70 { color: rgba(255, 255, 255, 0.7); }
.dark .hero-bg .text-jp-gold,
.dark .hero-bg .text-jp-gold\/90 { color: #d4af37; }
.dark .hero-bg .bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
.dark .hero-bg .hover\:bg-white\/20:hover { background-color: rgba(255, 255, 255, 0.2); }
.dark .hero-bg .border-white\/20 { border-color: rgba(255, 255, 255, 0.2); }
.dark .hero-bg .border-white\/30 { border-color: rgba(255, 255, 255, 0.3); }
.dark .hero-bg .bg-jp-gold.animate-pulse { background-color: #d4af37; }

/* Torii silhouette stays red in both modes but softer shadow in light */
.hero-bg .torii-silhouette { filter: drop-shadow(0 0 14px rgba(188, 0, 45, 0.3)); }
.dark .hero-bg .torii-silhouette { filter: drop-shadow(0 0 20px rgba(188, 0, 45, 0.6)); opacity: 0.4; }

/* Scroll hint — needs to work on both bgs */
.hero-bg .scroll-hint { color: rgba(15, 15, 16, 0.45); }
.dark .hero-bg .scroll-hint { color: rgba(255, 255, 255, 0.5); }

/* Page header (non-hero pages) — light = sakura pink, dark = ruby */
.page-header {
  background:
    radial-gradient(ellipse at 30% 50%, rgba(236, 64, 122, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(188, 0, 45, 0.08) 0%, transparent 50%),
    linear-gradient(135deg, #fde8ec 0%, #fff5f7 50%, #fde8ec 100%);
  color: #0f0f10;
  padding: 8rem 1.5rem 5rem;
  position: relative;
  overflow: hidden;
}
.dark .page-header {
  background:
    radial-gradient(ellipse at 30% 50%, rgba(188, 0, 45, 0.4) 0%, transparent 60%),
    linear-gradient(135deg, #15000a 0%, #0f0f10 100%);
  color: white;
}
.page-header p { color: rgba(15, 15, 16, 0.72); }
.dark .page-header p { color: rgba(255, 255, 255, 0.8); }
.page-header .text-jp-gold { color: #bc002d; }
.dark .page-header .text-jp-gold { color: #d4af37; }
.page-header .kanji-watermark { color: rgba(236, 64, 122, 0.12); }
.dark .page-header .kanji-watermark { color: rgba(255, 255, 255, 0.05); }

/* Rising sun — light = soft pink, dark = ruby red */
.rising-sun {
  position: absolute;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 182, 193, 0.85) 0%, rgba(248, 187, 208, 0.5) 45%, transparent 75%);
  opacity: 0.8;
}
.dark .rising-sun {
  background: radial-gradient(circle, #ff3355 0%, #bc002d 45%, transparent 75%);
  opacity: 0.9;
}

/* Sun rays — light = soft pink/gold, dark = ruby */
.sun-rays {
  position: absolute;
  width: 700px; height: 700px;
  background: conic-gradient(from 0deg,
    rgba(236, 64, 122, 0.08) 0deg, transparent 20deg,
    rgba(212, 175, 55, 0.05) 40deg, transparent 60deg,
    rgba(236, 64, 122, 0.08) 80deg, transparent 100deg,
    rgba(212, 175, 55, 0.05) 120deg, transparent 140deg,
    rgba(236, 64, 122, 0.08) 160deg, transparent 180deg,
    rgba(212, 175, 55, 0.05) 200deg, transparent 220deg,
    rgba(236, 64, 122, 0.08) 240deg, transparent 260deg,
    rgba(212, 175, 55, 0.05) 280deg, transparent 300deg,
    rgba(236, 64, 122, 0.08) 320deg, transparent 340deg);
  border-radius: 50%;
}
.dark .sun-rays {
  background: conic-gradient(from 0deg,
    rgba(188,0,45,0.12) 0deg, transparent 20deg,
    rgba(212,175,55,0.08) 40deg, transparent 60deg,
    rgba(188,0,45,0.12) 80deg, transparent 100deg,
    rgba(212,175,55,0.08) 120deg, transparent 140deg,
    rgba(188,0,45,0.12) 160deg, transparent 180deg,
    rgba(212,175,55,0.08) 200deg, transparent 220deg,
    rgba(188,0,45,0.12) 240deg, transparent 260deg,
    rgba(212,175,55,0.08) 280deg, transparent 300deg,
    rgba(188,0,45,0.12) 320deg, transparent 340deg);
}

/* Sakura — CSS-only, 8 permanent petals */
#sakura-container { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.sakura {
  position: absolute; top: -20px;
  width: 12px; height: 12px;
  background: radial-gradient(circle at 30% 30%, #ffb6c9, #f48fb1);
  border-radius: 150% 0 150% 0;
  opacity: 0.7;
  animation: fall linear infinite;
  will-change: transform;
}
@keyframes fall {
  0% { transform: translateY(-20px) translateX(0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.7; }
  90% { opacity: 0.6; }
  100% { transform: translateY(105vh) translateX(80px) rotate(540deg); opacity: 0; }
}
.s1 { left: 8%; animation-duration: 14s; animation-delay: -2s; }
.s2 { left: 20%; animation-duration: 17s; animation-delay: -5s; width: 10px; height: 10px; }
.s3 { left: 35%; animation-duration: 12s; animation-delay: -8s; width: 14px; height: 14px; }
.s4 { left: 50%; animation-duration: 16s; animation-delay: -1s; }
.s5 { left: 65%; animation-duration: 13s; animation-delay: -10s; width: 11px; height: 11px; }
.s6 { left: 78%; animation-duration: 15s; animation-delay: -4s; }
.s7 { left: 90%; animation-duration: 18s; animation-delay: -7s; width: 13px; height: 13px; }
.s8 { left: 45%; animation-duration: 19s; animation-delay: -12s; width: 10px; height: 10px; }
@media (prefers-reduced-motion: reduce) { .sakura { display: none; } }
@media (max-width: 640px) { .s2, .s4, .s6, .s8 { display: none; } }

/* Kanji watermark — capped size */
.kanji-watermark {
  font-family: 'Noto Serif JP', serif;
  font-weight: 900;
  color: rgba(188, 0, 45, 0.05);
  position: absolute;
  user-select: none;
  pointer-events: none;
  line-height: 1;
  font-size: 260px;
}
@media (max-width: 768px) { .kanji-watermark { font-size: 160px; } }
.dark .kanji-watermark { color: rgba(212, 175, 55, 0.04); }

/* Title gradient — theme-aware (red/pink in light, gold in dark).
   Tailwind's text-6xl/text-8xl sets line-height:1 → descenders (G, P, g, p)
   clip on Mincho (display font with tall metrics). Override aggressively. */
.gradient-text {
  line-height: 1.35 !important;
  padding-bottom: 0.1em;
  background: linear-gradient(135deg, #bc002d 0%, #ec407a 40%, #bc002d 80%, #8b0000 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer 7s linear infinite;
}
.dark .gradient-text {
  background: linear-gradient(135deg, #d4af37 0%, #f5e3a8 35%, #d4af37 55%, #ffffff 75%, #d4af37 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
}
.gradient-text-red {
  line-height: 1.35 !important;
  padding-bottom: 0.1em;
  background: linear-gradient(135deg, #bc002d, #ff3355, #bc002d);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer 5s linear infinite;
}
@keyframes shimmer { 0% { background-position: 0% center; } 100% { background-position: 250% center; } }
@media (prefers-reduced-motion: reduce) { .gradient-text, .gradient-text-red { animation: none; } }

/* Torii SVG */
.torii-silhouette {
  position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
  width: 180px; opacity: 0.4;
  filter: drop-shadow(0 0 20px rgba(188, 0, 45, 0.6));
}

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-scale { opacity: 0; transform: scale(0.94); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal-scale.visible { opacity: 1; transform: scale(1); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-scale { opacity: 1; transform: none; }
}

/* Content-visibility optimization */
.cv-auto { content-visibility: auto; contain-intrinsic-size: 1px 1200px; }

/* City card — stronger gradient for legibility over bright photos */
.city-card {
  position: relative; overflow: hidden;
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.city-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.35) 35%,
    rgba(0,0,0,0.82) 60%,
    rgba(0,0,0,0.95) 100%);
  z-index: 1;
}
.city-card img {
  transition: transform 0.6s ease, filter 0.4s ease;
  filter: saturate(1.05) brightness(0.9);
}
.city-card:hover img { transform: scale(1.05); filter: saturate(1.2) brightness(0.95); }
.city-card:hover { box-shadow: 0 24px 48px -20px rgba(188, 0, 45, 0.45); }
.city-card > .content { position: relative; z-index: 2; }
.city-card h3 { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7); }
.city-card p { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9); }

/* Day timeline */
.timeline-line {
  position: absolute; left: 27px; top: 40px; bottom: 40px;
  width: 2px;
  background: linear-gradient(180deg, #bc002d 0%, #d4af37 50%, #bc002d 100%);
  opacity: 0.3;
}
.day-item { position: relative; }
.day-dot {
  position: absolute; left: 18px; top: 8px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #bc002d;
  box-shadow: 0 0 0 4px rgba(188, 0, 45, 0.15), 0 0 14px rgba(188, 0, 45, 0.4);
  transition: transform 0.3s ease;
}
.day-item:hover .day-dot { transform: scale(1.25); }
.day-card {
  margin-left: 60px;
  transition: transform 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
}
.day-card:hover { transform: translateX(4px); border-color: #bc002d; }
.day-card.open .day-details { max-height: 2000px; opacity: 1; }
.day-details { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s ease, opacity 0.3s ease; }
.day-card.open .chevron { transform: rotate(180deg); }
.chevron { transition: transform 0.3s ease; }

/* Experience gallery — stronger overlay */
.exp-card {
  position: relative; overflow: hidden;
  transition: box-shadow 0.4s ease;
}
.exp-card img {
  transition: transform 0.5s ease, filter 0.4s ease;
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.92);
}
.exp-card:hover img { transform: scale(1.07); filter: brightness(0.8) saturate(1.15); }
.exp-card:hover { box-shadow: 0 16px 40px -16px rgba(188, 0, 45, 0.5); }
.exp-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0,0,0,0.2) 35%,
    rgba(0,0,0,0.85) 70%,
    rgba(0,0,0,0.95) 100%);
  display: flex; align-items: flex-end;
  padding: 1.25rem;
}
.exp-overlay > div > div:last-child { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9); }
.exp-badge {
  position: absolute; top: 1rem; left: 1rem;
  background: rgba(188, 0, 45, 0.95);
  color: white;
  font-family: 'Noto Serif JP', serif;
  font-weight: 900; font-size: 1.1rem;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(188, 0, 45, 0.5);
  z-index: 3;
}

/* Neon Tokyo — legible on bright backgrounds */
.neon-text {
  color: #ffffff;
  text-shadow:
    0 2px 14px rgba(0, 0, 0, 0.85),
    0 0 20px rgba(255, 51, 85, 0.6),
    0 0 40px rgba(188, 0, 45, 0.8);
}

.counter { font-variant-numeric: tabular-nums; }

/* Tag pills */
.tag-pill {
  display: inline-flex; align-items: center;
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Osmo settings card — theme-aware */
.settings-card { background: #ffffff; color: #0f0f10; }
.dark .settings-card { background: rgba(15, 15, 16, 0.95); color: #f5f0e8; }
.settings-card .text-white\/70 { color: rgba(15, 15, 16, 0.7); }
.dark .settings-card .text-white\/70 { color: rgba(255, 255, 255, 0.7); }
.settings-card em.text-jp-gold { color: #bc002d; font-style: italic; }
.dark .settings-card em.text-jp-gold { color: #d4af37; }

/* Settings row (Osmo) */
.settings-row {
  display: grid; grid-template-columns: 40px 1fr; gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(188, 0, 45, 0.1);
}
.dark .settings-row { border-color: rgba(212, 175, 55, 0.1); }
.settings-row:last-child { border-bottom: none; }
.setting-num {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #bc002d, #8b0000);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900;
  box-shadow: 0 4px 12px rgba(188, 0, 45, 0.4);
}

/* Floating */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.float-anim { animation: float 4s ease-in-out infinite; }
.float-anim-2 { animation: float 4s ease-in-out infinite 1.3s; }
.float-anim-3 { animation: float 4s ease-in-out infinite 2.6s; }
@media (prefers-reduced-motion: reduce) { .float-anim, .float-anim-2, .float-anim-3 { animation: none; } }

/* Mobile menu */
#mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
#mobile-menu.open { max-height: 500px; }

/* Kanji divider */
.kanji-divider {
  display: flex; align-items: center; gap: 1.5rem;
  color: rgba(188, 0, 45, 0.4);
  font-family: 'Noto Serif JP', serif;
  font-weight: 900; font-size: 1.5rem;
}
.kanji-divider::before, .kanji-divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(188,0,45,0.4), transparent);
}

/* Checkbox row */
.check-row {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.55rem 0;
  font-size: 0.95rem;
}
.check-square {
  flex: 0 0 20px; width: 20px; height: 20px;
  border: 2px solid #bc002d;
  border-radius: 4px; margin-top: 2px;
  transition: background 0.2s ease;
}
.check-square:hover { background: rgba(188, 0, 45, 0.1); }

/* Focus ring */
.focus-ring:focus { outline: 2px solid #bc002d; outline-offset: 4px; }

/* Phrases table */
.phrase-row {
  display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: 1rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  transition: background 0.2s ease;
  align-items: center;
}
.dark .phrase-row { border-color: rgba(255,255,255,0.08); }
.phrase-row:hover { background: rgba(188, 0, 45, 0.05); }

/* Speak (TTS) button */
.speak-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(188, 0, 45, 0.1);
  color: #bc002d;
  transition: background 0.2s ease, transform 0.15s ease;
  flex: 0 0 30px;
  cursor: pointer;
  border: none;
}
.speak-btn:hover { background: #bc002d; color: white; transform: scale(1.08); }
.speak-btn:active { transform: scale(0.95); }
.speak-btn.speaking { background: #bc002d; color: white; animation: speak-pulse 1.2s ease-in-out infinite; }
.dark .speak-btn { background: rgba(212, 175, 55, 0.12); color: #d4af37; }
.dark .speak-btn:hover { background: #d4af37; color: #0f0f10; }
.dark .speak-btn.speaking { background: #d4af37; color: #0f0f10; }
@keyframes speak-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(188, 0, 45, 0.5); }
  50% { box-shadow: 0 0 0 8px rgba(188, 0, 45, 0); }
}
.phrase-ja {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Budget bars */
.budget-bar {
  height: 8px;
  border-radius: 4px;
  background: rgba(188, 0, 45, 0.1);
  overflow: hidden;
}
.budget-fill {
  height: 100%;
  background: linear-gradient(90deg, #bc002d, #d4af37);
  border-radius: 4px;
  transition: width 1.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  width: 0%;
}

/* Link with underline */
.link-jp { position: relative; transition: color 0.3s ease; }
.link-jp::after {
  content: ''; position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, #bc002d, #d4af37);
  transition: width 0.3s ease;
}
.link-jp:hover::after { width: 100%; }
.link-jp.active { color: #bc002d; }
.dark .link-jp.active { color: #d4af37; }
.link-jp.active::after { width: 100%; }

/* CTA */
.cta-pulse { position: relative; overflow: hidden; }
.cta-pulse::after {
  content: ''; position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%;
  background: radial-gradient(circle, rgba(255,255,255,0.35) 0%, transparent 60%);
  opacity: 0; transition: opacity 0.3s ease;
}
.cta-pulse:hover::after { opacity: 1; }

/* Scroll hint */
.scroll-hint {
  position: absolute; bottom: 30px; left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  animation: pulse-down 2.5s ease-in-out infinite;
}
@keyframes pulse-down {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.5; }
  50% { transform: translateX(-50%) translateY(8px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .scroll-hint { animation: none; } }

@media (max-width: 768px) {
  .rising-sun { width: 320px; height: 320px; }
  .sun-rays { width: 520px; height: 520px; }
  .torii-silhouette { width: 120px; }
}

.dark body { background: #0a0a0b; color: #e5e5e5; }

/* Page nav (current page highlight helper) */
.current-page { color: #bc002d !important; }
.dark .current-page { color: #d4af37 !important; }

/* ===== Forum connection status ===== */
.connection-dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: #9ca3af;
  box-shadow: 0 0 0 0 rgba(156, 163, 175, 0.4);
}
.connection-dot.live {
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  animation: pulse-live 2.5s ease-in-out infinite;
}
.connection-dot.connecting {
  background: #d4af37;
  animation: pulse-connecting 1.2s ease-in-out infinite;
}
.connection-dot.error {
  background: #dc2626;
}
@keyframes pulse-live {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}
@keyframes pulse-connecting {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ===== Forum ===== */
.forum-input {
  width: 100%;
  padding: 0.6rem 0.9rem;
  font-size: 0.95rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.03);
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  color: inherit;
  transition: border-color 0.2s ease, background 0.2s ease;
  font-family: inherit;
}
.forum-input:focus {
  outline: none;
  border-color: #bc002d;
  background: white;
  box-shadow: 0 0 0 3px rgba(188, 0, 45, 0.12);
}
.dark .forum-input { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.1); }
.dark .forum-input:focus { background: rgba(255, 255, 255, 0.05); border-color: #d4af37; box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18); }

.forum-upload-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-radius: 9999px;
  background: rgba(188, 0, 45, 0.1);
  color: #bc002d;
  font-size: 0.85rem; font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
}
.forum-upload-btn:hover { background: rgba(188, 0, 45, 0.18); }
.dark .forum-upload-btn { background: rgba(212, 175, 55, 0.12); color: #d4af37; }
.dark .forum-upload-btn:hover { background: rgba(212, 175, 55, 0.2); }

.filter-tab {
  padding: 0.45rem 1rem;
  font-size: 0.85rem; font-weight: 700;
  border-radius: 9999px;
  background: transparent;
  color: inherit;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.2s ease;
}
.dark .filter-tab { border-color: rgba(255, 255, 255, 0.1); }
.filter-tab:hover { border-color: #bc002d; color: #bc002d; }
.dark .filter-tab:hover { border-color: #d4af37; color: #d4af37; }
.filter-tab.active {
  background: #bc002d; color: white;
  border-color: #bc002d;
}
.dark .filter-tab.active { background: #d4af37; color: #0f0f10; border-color: #d4af37; }

.forum-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 900; font-size: 0.95rem;
  flex-shrink: 0;
}

.forum-badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.cat-question { background: rgba(58, 90, 154, 0.15); color: #2a4280; }
.cat-tip { background: rgba(90, 138, 58, 0.15); color: #3a6020; }
.cat-story { background: rgba(224, 159, 62, 0.2); color: #7a4d00; }
.cat-photo { background: rgba(188, 0, 45, 0.12); color: #bc002d; }
.dark .cat-question { background: rgba(100, 140, 210, 0.2); color: #9db8ee; }
.dark .cat-tip { background: rgba(140, 200, 100, 0.2); color: #b5d9a0; }
.dark .cat-story { background: rgba(224, 159, 62, 0.25); color: #f0c778; }
.dark .cat-photo { background: rgba(212, 175, 55, 0.18); color: #e6c659; }

.forum-delete {
  background: transparent; border: none; cursor: pointer;
  padding: 0.3rem; border-radius: 50%;
  color: rgba(0, 0, 0, 0.25);
  transition: color 0.2s ease, background 0.2s ease;
}
.forum-delete:hover { color: #bc002d; background: rgba(188, 0, 45, 0.08); }
.dark .forum-delete { color: rgba(255, 255, 255, 0.3); }
.dark .forum-delete:hover { color: #ff5577; background: rgba(255, 85, 119, 0.1); }

.forum-like {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.7rem; border-radius: 9999px;
  background: transparent; border: none; cursor: pointer;
  color: inherit;
  font-weight: 700; font-size: 0.85rem;
  transition: all 0.2s ease;
}
.forum-like:hover { background: rgba(188, 0, 45, 0.08); color: #bc002d; }
.forum-like.liked { color: #bc002d; }
.dark .forum-like:hover { background: rgba(255, 85, 119, 0.1); color: #ff5577; }
.dark .forum-like.liked { color: #ff5577; }

/* FAQ accordion (using <details>/<summary>) */
.faq-item { overflow: hidden; }
.faq-item summary { list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.1rem 1.3rem;
  font-weight: 700; font-size: 1.02rem;
  transition: background 0.2s ease;
}
.faq-summary:hover { background: rgba(188, 0, 45, 0.04); }
.dark .faq-summary:hover { background: rgba(212, 175, 55, 0.04); }
.faq-q { flex: 1; }
.faq-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(188, 0, 45, 0.1); color: #bc002d;
  transition: transform 0.3s ease, background 0.2s ease;
  flex-shrink: 0;
}
.dark .faq-icon { background: rgba(212, 175, 55, 0.12); color: #d4af37; }
.faq-item[open] .faq-icon { transform: rotate(180deg); background: #bc002d; color: white; }
.dark .faq-item[open] .faq-icon { background: #d4af37; color: #0f0f10; }
.faq-answer {
  padding: 0 1.3rem 1.3rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(15, 15, 16, 0.78);
  border-top: 1px solid rgba(0,0,0,0.06);
  padding-top: 1rem;
}
.dark .faq-answer { color: rgba(245, 240, 232, 0.75); border-color: rgba(255,255,255,0.06); }
.faq-answer p { margin-bottom: 0.75rem; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer ul { margin: 0.5rem 0 0.5rem 1.2rem; }
.faq-answer ul li { list-style: disc; padding-left: 0.25rem; margin: 0.3rem 0; }
.faq-answer strong { color: #bc002d; }
.dark .faq-answer strong { color: #d4af37; }

/* Custom icon container */
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(188, 0, 45, 0.1);
  color: #bc002d;
  flex-shrink: 0;
}
.dark .icon-circle { background: rgba(212, 175, 55, 0.12); color: #d4af37; }
.icon-circle-red { background: #bc002d; color: white; box-shadow: 0 4px 14px rgba(188, 0, 45, 0.35); }
.dark .icon-circle-red { background: #bc002d; color: white; }

/* Language switcher dropdown */
[data-lang-switcher] { position: relative; display: inline-block; }
.lang-toggle {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem; font-weight: 700;
  border-radius: 9999px;
  background: rgba(188, 0, 45, 0.08);
  color: inherit;
  transition: background 0.2s ease;
  cursor: pointer; border: none;
}
.lang-toggle:hover { background: rgba(188, 0, 45, 0.15); }
.dark .lang-toggle { background: rgba(255, 255, 255, 0.08); }
.dark .lang-toggle:hover { background: rgba(255, 255, 255, 0.16); }
.lang-menu {
  position: absolute; top: 100%; right: 0; margin-top: 0.5rem;
  min-width: 180px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.25);
  padding: 0.35rem;
  display: none; z-index: 100;
  max-height: 80vh; overflow-y: auto;
}
.dark .lang-menu { background: #1a1a1d; border-color: rgba(255,255,255,0.08); }
[data-lang-switcher].open .lang-menu { display: block; }
.lang-opt {
  display: flex; align-items: center; gap: 0.6rem;
  width: 100%; padding: 0.5rem 0.7rem;
  font-size: 0.9rem; border-radius: 8px;
  text-align: left; cursor: pointer; border: none;
  background: transparent; color: inherit;
  transition: background 0.15s ease;
}
html[dir="rtl"] .lang-opt { text-align: right; }
.lang-opt:hover { background: rgba(188, 0, 45, 0.08); }
.lang-opt.active { background: rgba(188, 0, 45, 0.12); color: #bc002d; font-weight: 700; }
.dark .lang-opt:hover { background: rgba(212, 175, 55, 0.08); }
.dark .lang-opt.active { background: rgba(212, 175, 55, 0.12); color: #d4af37; }
.lang-flag { font-size: 1.05rem; }
.lang-menu[role="menu"] { scrollbar-width: thin; }

/* RTL support for Arabic */
html[dir="rtl"] .timeline-line { left: auto; right: 27px; }
html[dir="rtl"] .day-dot { left: auto; right: 18px; }
html[dir="rtl"] .day-card { margin-left: 0; margin-right: 60px; }
html[dir="rtl"] .lang-menu { right: auto; left: 0; }