/* ═══════════════════════════════════════
   base.css — shared variables, reset, utilities
   Used by all pages
═══════════════════════════════════════ */
:root {
  --grape:  #6C63FF;
  --grape-d:#5a52e0;
  --coral:  #FF6B6B;
  --sun:    #FFD23F;
  --sky:    #4ECDC4;
  --green:  #3ECF8E;
  --mint:   #A8E6CF;
  --blush:  #FFB3C6;
  --ink:    #2B2D42;
  --muted:  #8D99AE;
  --white:  #FFFFFF;
  --cloud:  #F8F9FF;
  --border: #E8EAF6;
  --shadow: 0 8px 28px rgba(0,0,0,.09);
  --shadow-lg: 0 20px 56px rgba(0,0,0,.14);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Nunito', sans-serif; background: var(--cloud); color: var(--ink); min-height: 100vh; }

/* ── Shared toast ── */
#toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  background: #1A1347; color: #fff; padding: 12px 28px; border-radius: 50px;
  font-weight: 800; font-size: .9rem; z-index: 9999;
  opacity: 0; transition: opacity .3s; pointer-events: none; white-space: nowrap;
}
#toast.show { opacity: 1; }

/* ── Shared breadcrumb ── */
.breadcrumb {
  background: var(--white); border-bottom: 1px solid var(--border);
  padding: 10px 40px; font-size: .82rem; font-weight: 700; color: var(--muted);
  display: flex; align-items: center; gap: 6px;
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--grape); }
.breadcrumb .sep { color: var(--border); }
.breadcrumb .current { color: var(--ink); font-weight: 800; }

/* ── Skeleton shimmer ── */
@keyframes shimmer { to { background-position: -200% 0; } }
.skel {
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite;
  border-radius: 6px;
}

/* ── Utility ── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .55s ease, transform .55s ease; }
.revealed { opacity: 1; transform: translateY(0); }