/* Theme variables (dark-first with light fallbacks) */
:root {
  --bg-dark: #0f172a; /* slate-900 */
  --panel: rgba(30,41,59,0.8);
  --muted: #94a3b8;
  --accent-blue: #3b82f6;
  --accent-purple: #8b5cf6;
  --glass: rgba(255,255,255,0.04);
}

/* Base */
body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background: var(--bg-dark); color: #f8fafc; margin:0; }
.bg-dark { background: var(--bg-dark); }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0b1220; }
::-webkit-scrollbar-thumb { background: #475569; border-radius: 6px; }

/* Cards / Steps */
.step-card { background: rgba(15,23,42,0.65); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.04); padding: 1.25rem; transition: transform 0.25s ease, box-shadow 0.25s ease; color: #e6edf3; }
.step-card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(139,92,246,0.12); border-color: rgba(139,92,246,0.18); }

/* Hero effects */
.fade-in-up { animation: fadeInUp 0.8s ease-out forwards; opacity: 0; transform: translateY(20px); }
@keyframes fadeInUp { to { opacity:1; transform: translateY(0); } }
.pulse-glow { animation: pulseGlow 2s infinite alternate; }
@keyframes pulseGlow { from { box-shadow: 0 6px 22px rgba(59,130,246,0.15); } to { box-shadow: 0 18px 48px rgba(139,92,246,0.18); } }
.concept-badge { background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight:800; }

/* Utilities */
.font-outfit { font-family: 'Outfit', sans-serif; }
.mono { font-family: 'JetBrains Mono', monospace; }
.max-w-6xl { max-width: 72rem; }

/* Small helpers */
a { color: #c7d2fe; }

/* Legacy light helpers (for posts converted from light templates) */
.light-panel { background: #ffffff; color:#111827; border-radius:12px; padding:1rem; }

/* Print friendly */
@media print { nav, footer { display:none; } }

/* Channel logo: rounded, entry animation and 'beats' border effect */
.logo-wrap { display:block; margin:0 auto 1rem; width:140px; height:140px; position:relative; }
.channel-logo { width:100%; height:100%; border-radius:9999px; object-fit:cover; display:block; border: 4px solid rgba(255,255,255,0.06); box-shadow: 0 10px 30px rgba(139,92,246,0.14); }
/* soft ambient glow */
.logo-wrap::before { content: ""; position:absolute; inset:-6px; border-radius:9999px; pointer-events:none; background: radial-gradient(circle at center, rgba(139,92,246,0.12), transparent 40%); filter: blur(10px); opacity:0.95; }
/* rhythmic beat ring */
.logo-wrap::after { content: ""; position:absolute; inset:-12px; border-radius:9999px; pointer-events:none; box-shadow: 0 0 0 0 rgba(139,92,246,0.15); animation: ringBeat 1.2s infinite cubic-bezier(.2,.7,.2,1); }
@keyframes logoEnter { from { opacity:0; transform: translateY(-18px) scale(0.88) rotate(-6deg); } to { opacity:1; transform: translateY(0) scale(1) rotate(0); } }
@keyframes ringBeat {
  0%   { box-shadow: 0 0 0 0 rgba(139,92,246,0.18); transform: scale(1); opacity:1; }
  8%   { box-shadow: 0 0 28px 8px rgba(139,92,246,0.34); transform: scale(1.04); opacity:1; }
  20%  { box-shadow: 0 0 8px 3px rgba(139,92,246,0.12); transform: scale(1.01); opacity:0.8; }
  40%  { box-shadow: 0 0 0 0 rgba(139,92,246,0.06); transform: scale(1); opacity:0.6; }
  52%  { box-shadow: 0 0 18px 6px rgba(139,92,246,0.14); transform: scale(1.02); opacity:0.85; }
  70%  { box-shadow: 0 0 6px 2px rgba(139,92,246,0.08); transform: scale(1.005); opacity:0.75; }
  100% { box-shadow: 0 0 0 0 rgba(139,92,246,0); transform: scale(1); opacity:0; }
}
.logo-enter { animation: logoEnter 700ms cubic-bezier(.2,.9,.2,1) forwards; }

/* Fine-tune for smaller screens */
@media (max-width:640px) { .logo-wrap { width:110px; height:110px; } }