/* ===== RESET & BASE ===== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Sphere Logo palette — colors pulled directly from the
     S-with-orbit favicon: periwinkle indigo + soft pink on a
     deep navy canvas. Basic, minimal, on-brand. */
  --primary: #5b6ee8;
  --primary-dark: #3f51c2;
  --primary-light: #eef0fe;
  --primary-glow: rgba(91, 110, 232, 0.14);
  --accent: #e879a8;
  --accent-light: #fce7f0;
  --text: #0b0f1c;
  --text-light: #5a6178;
  --bg: #ffffff;
  --bg-alt: #f7f8fc;
  --border: #e1e4f0;
  --success: #5b6ee8;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow: 0 1px 3px rgba(11, 15, 28, 0.06), 0 1px 2px rgba(11, 15, 28, 0.04);
  --shadow-md: 0 4px 6px rgba(11, 15, 28, 0.05), 0 2px 4px rgba(11, 15, 28, 0.04);
  --shadow-lg: 0 10px 24px rgba(11, 15, 28, 0.08);
  --shadow-xl: 0 20px 48px rgba(11, 15, 28, 0.12);
  --transition: 0.25s ease;
  --transition-slow: 0.4s ease;
}

/* Dark mode — exact navy from the favicon, lighter periwinkle for contrast */
:root[data-theme="dark"] {
  --primary: #8b9eff;
  --primary-dark: #5b6ee8;
  --primary-light: rgba(139, 158, 255, 0.14);
  --primary-glow: rgba(139, 158, 255, 0.12);
  --accent: #f0a0c4;
  --accent-light: rgba(240, 160, 196, 0.14);
  --text: #f0f3ff;
  --text-light: #9ba1c0;
  --bg: #0b0f1c;
  --bg-alt: #161b30;
  --border: #252a45;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.5);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px; /* offset anchor jumps so fixed navbar doesn't hide section tops */
}

body {
  font-family: 'Montserrat', 'Satoshi', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: var(--text);
  /* Ambient periwinkle/pink wash spans the WHOLE page (fixed) so
     no section ever shows a hard color cut at its edges. Very low
     opacity — reads as soft atmospheric tinting, not a gradient. */
  background:
    radial-gradient(ellipse at 18% 12%, rgba(91, 110, 232, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 82% 35%, rgba(232, 121, 168, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 30% 70%, rgba(91, 110, 232, 0.04) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 92%, rgba(232, 121, 168, 0.04) 0%, transparent 50%),
    var(--bg);
  background-attachment: fixed;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background 0.3s ease, color 0.3s ease;
}
[data-theme="dark"] body {
  background: #18181B;
}

/* Tight modern display tracking on big marketing titles */
h1,
.section-title,
.course-hero h1,
.about-section h2,
.logo {
  font-weight: 700;
  letter-spacing: -0.035em;   /* DM Sans looks best tightly tracked at display sizes */
}
.logo {
  font-weight: 700;
  letter-spacing: -0.02em;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

/* ===== PAGE LOAD ANIMATION ===== */
.page-loaded .fade-up {
  animation: fadeUp 0.6s ease forwards;
}

.fade-up {
  opacity: 0;
  transform: translateY(24px);
}

.fade-up:nth-child(2) { animation-delay: 0.1s; }
.fade-up:nth-child(3) { animation-delay: 0.2s; }
.fade-up:nth-child(4) { animation-delay: 0.3s; }

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== UTILITIES ===== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: none;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(255,255,255,0.2), transparent);
  opacity: 0;
  transition: opacity var(--transition);
}

.btn:hover::after {
  opacity: 1;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 6px rgba(11, 15, 28, 0.12);
}

.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(11, 15, 28, 0.18);
}

.btn-outline {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}

.btn-outline:hover {
  background: var(--primary);
  color: #fff;
  transform: translateY(-2px);
}

.btn-accent {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 6px rgba(11, 15, 28, 0.12);
}

.btn-accent:hover {
  filter: brightness(0.92);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(11, 15, 28, 0.18);
}

.section-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--primary);
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.section-label::before {
  content: '';
  width: 32px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
}

.section-title {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.section-desc {
  font-size: 1.1rem;
  color: var(--text-light);
  max-width: 600px;
  line-height: 1.7;
}

/* ===== NAVBAR ===== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: all var(--transition);
}

[data-theme="dark"] .navbar {
  background: rgba(11, 15, 28, 0.92);
}

.navbar.scrolled {
  border-bottom-color: var(--border);
  box-shadow: var(--shadow);
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: left center;
  border: none;
  outline: none;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}
.logo:focus,
.logo:focus-visible {
  outline: none;
}

/* Hover: gentle lift + subtle icon bounce — no boxes, no shadows */
.logo:hover {
  transform: translateY(-1px) scale(1.02);
}
.logo:hover .logo-icon {
  transform: rotate(-4deg) scale(1.08);
}
.logo:hover .logo-icon img {
  transform: scale(1.05);
}

/* Active (click): snappy press-down */
.logo:active {
  transform: scale(0.97);
  transition-duration: 0.1s;
}
.logo:active .logo-icon {
  transform: rotate(0deg) scale(0.95);
  transition-duration: 0.1s;
}

.nav-home-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  transition: all var(--transition);
  flex-shrink: 0;
}

.nav-home-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
  transform: translateY(-1px);
}

.nav-home-btn svg {
  display: block;
}

.logo-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}
@media (max-width: 540px) {
  /* Slightly smaller on phones so it doesn't dominate the navbar */
  .logo-icon { width: 38px; height: 38px; }
}

.logo-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease, filter 0.2s ease;
  background: transparent;
  border: none;
  display: block;
}

/* Logo is now transparent white strokes (no background). White
   reads naturally on dark navbars; on light navbars we invert
   the image so the strokes flip to black and stay visible.
   Favicon (a separate file) keeps its black rounded-square
   background and isn't affected by this filter. */
[data-theme="light"] .logo-icon img,
[data-theme="light"] .dash-sidebar-brand-logo img {
  filter: invert(1);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-light);
  transition: color var(--transition);
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
  transition: width var(--transition);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--primary);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Compact navbar buttons — the global .btn padding (14px 30px) sits
   too tall in the 72px navbar; tighten to fit cleanly. */
.nav-cta .btn {
  padding: 9px 18px;
  font-size: 0.85rem;
  border-radius: 9px;
}
.nav-cta .btn-outline {
  border-width: 1.5px;
}

.theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: #111827;               /* dark icon in light mode */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  transition: all var(--transition);
}
[data-theme="dark"] .theme-toggle {
  color: #ffffff;               /* white icon in dark mode */
}

.theme-toggle:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);        /* brand color on hover — works both modes */
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}

.hamburger span {
  width: 24px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all var(--transition);
}

/* ===== HERO ===== */
.hero {
  padding: 150px 0 80px;
  /* Transparent — the body's fixed ambient wash spans across, so
     the hero blends seamlessly into the next section. Animated
     blobs supply the local visual punch. */
  background: transparent;
  position: relative;
  overflow: hidden;
}

.hero::before { content: none; }
.hero::after { content: none; }

/* ===== ANIMATED BACKGROUND BLOBS ===== */
.hero-blobs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  /* Fade the blobs to nothing at the hero's bottom edge so they
     dissolve into the body mesh instead of clipping into a hard line. */
  -webkit-mask: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
          mask: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
.hero-blob {
  position: absolute;
  border-radius: 50%;
  /* Lower blur radius — was 80px which is heavy on GPU.
     30px still looks soft and atmospheric, just smoother. */
  filter: blur(30px);
}
.blob-a {
  width: 540px;
  height: 540px;
  top: -180px;
  right: -140px;
  background: radial-gradient(circle, rgba(91, 110, 232, 0.28) 0%, transparent 70%);
  animation: blob-float-a 22s ease-in-out infinite;
}
.blob-b {
  width: 420px;
  height: 420px;
  top: 20%;
  left: -120px;
  background: radial-gradient(circle, rgba(197, 203, 245, 0.24) 0%, transparent 70%);
  animation: blob-float-b 28s ease-in-out infinite;
}
.blob-c {
  width: 360px;
  height: 360px;
  top: 30%;
  left: 45%;
  /* Mint-teal accent blob — secondary Stripe color for visual variety */
  background: radial-gradient(circle, rgba(232, 121, 168, 0.18) 0%, transparent 70%);
  animation: blob-float-c 24s ease-in-out infinite;
}
[data-theme="dark"] .blob-a { background: radial-gradient(circle, rgba(139, 158, 255, 0.32) 0%, transparent 70%); }
[data-theme="dark"] .blob-b { background: radial-gradient(circle, rgba(91, 110, 232, 0.28) 0%, transparent 70%); }
[data-theme="dark"] .blob-c { background: radial-gradient(circle, rgba(240, 160, 196, 0.20) 0%, transparent 70%); }

@keyframes blob-float-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-40px, 30px) scale(1.08); }
  66%      { transform: translate(30px, -20px) scale(0.96); }
}
@keyframes blob-float-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(50px, -40px) scale(1.1); }
  70%      { transform: translate(-20px, 30px) scale(0.95); }
}
@keyframes blob-float-c {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-60px, 50px) scale(1.12); }
}

/* Put container above blobs */
.hero > .container { position: relative; z-index: 1; }

.hero .container {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 1200px;
  gap: 40px;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}
.hero .container > div { width: 100%; }
.hero p {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.hero-actions,
.hero-stats {
  justify-content: center;
}
.hero-badge {
  margin-left: auto;
  margin-right: auto;
}
/* Keep the cycling title from clipping. The cycling words are:
   "Intern Roadmap" (14), "Creative Skills" (15), "Ads Manager" (11),
   "Full Proficiency" (16). We reserve 17ch on the highlight so the
   longest one has room with the inline-block translate animation. */
.hero h1 {
  max-width: 100%;
  font-size: clamp(2.1rem, 4.2vw, 2.9rem);  /* slightly smaller so all phrases fit */
  padding: 0 12px;                          /* breathing room inside container */
  text-wrap: balance;                       /* nicer wrapping where it does happen */
}
.hero h1 .highlight {
  display: inline-block;   /* needed for the typing translateY animation */
  /* No min-width — the highlight hugs its current word so there's no
     awkward gap between "Marketing" and the cycling phrase. The title
     subtly resizes each cycle but stays tightly together. */
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
}

.hero-badge .pulse {
  width: 8px;
  height: 8px;
  background: var(--success);
  border-radius: 50%;
  display: inline-block;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

/* Featured 3D logo at the top of the hero */
.hero-logo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
  position: relative;
}
.hero-logo-wrap::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 110, 232, 0.28) 0%, transparent 65%);
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  filter: blur(20px);
}
.hero-logo {
  width: 140px;
  height: 140px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 12px 28px rgba(139, 158, 255, 0.35))
          drop-shadow(0 6px 14px rgba(91, 110, 232, 0.35));
  animation: logo-float 6s ease-in-out infinite;
}
@keyframes logo-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.hero h1 {
  font-size: clamp(2.4rem, 4.6vw, 3.2rem);
  font-weight: 800;
  line-height: 1.08;
  margin-bottom: 18px;
  letter-spacing: -0.035em;
}

.hero h1 .highlight {
  background: linear-gradient(135deg, var(--primary) 0%, #5b6ee8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero p {
  font-size: 1.05rem;
  color: var(--text-light);
  margin-bottom: 32px;
  max-width: 620px;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  gap: 14px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}
.hero-actions .btn {
  padding: 14px 28px;
  font-size: 0.95rem;
}

.hero-stats {
  display: flex;
  gap: 0;
  padding-top: 0;
  border-top: none;
  align-items: stretch;
}
.hero-stat {
  flex: 1;
  padding: 0 28px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-stat + .hero-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 14%;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, var(--border) 30%, var(--border) 70%, transparent 100%);
}

.hero-stat strong {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--primary) 0%, #5b6ee8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 4px;
}

.hero-stat span {
  font-size: 0.78rem;
  color: var(--text-light);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero-visual {
  position: relative;
}

.hero-card {
  background: var(--bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  position: relative;
  z-index: 1;
}

/* ===== Hero Auth Card — same look as login.html, tighter for hero column ===== */
.hero-auth-card {
  width: 100%;
  max-width: 100%;
  padding: 28px 26px;
  border-radius: var(--radius-lg);
  text-align: center;
}
/* Static, centered, non-clickable logo on the hero auth card */
.hero-auth-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 18px;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: default;
  user-select: none;
  pointer-events: none;       /* not clickable */
  transform: none !important; /* override any inherited hover transforms */
  width: fit-content;
}
.hero-auth-logo:hover,
.hero-auth-logo:active {
  transform: none !important;
  filter: none;
}
.hero-auth-logo .logo-icon {
  width: 32px;
  height: 32px;
  transform: none !important;
}
.hero-auth-logo .logo-icon img {
  transform: none !important;
}
.hero-auth-card h1 {
  font-size: 1.5rem;
  margin-bottom: 4px;
}
.hero-auth-card .auth-subtitle {
  margin-bottom: 22px;
  font-size: 0.85rem;
}
.hero-auth-card .auth-form {
  gap: 14px;
  text-align: left;
}
.hero-auth-card .form-group input {
  padding: 11px 14px;
  font-size: 0.88rem;
}
.hero-auth-card .form-row {
  font-size: 0.8rem;
  margin: 2px 0;
}
.hero-auth-card .auth-footer {
  text-align: center;
}
.hero-auth-card .auth-form .btn {
  padding: 12px 18px;
  font-size: 0.92rem;
  font-weight: 700;
}
.hero-auth-card .auth-divider {
  margin: 18px 0;
  font-size: 0.78rem;
}
.hero-auth-card .auth-social {
  margin-bottom: 14px;
}
.hero-auth-card .oauth-btn {
  padding: 11px 14px;
  font-size: 0.88rem;
}
.hero-auth-card .auth-footer {
  font-size: 0.85rem;
  margin: 0;
}

.hero-card-header {
  background: linear-gradient(135deg, var(--primary) 0%, #5b6ee8 100%);
  color: #fff;
  padding: 28px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-card-header h3 {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.hero-card-header p {
  font-size: 0.85rem;
  opacity: 0.85;
  margin-top: 4px;
}

.hero-card-body {
  padding: 24px 28px;
}

.hero-module {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  transition: all var(--transition);
}

.hero-module:last-child {
  border-bottom: none;
}

.hero-module:hover {
  padding-left: 8px;
}

.hero-module-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  color: #fff;
  box-shadow: 0 4px 10px -2px rgba(91, 110, 232, 0.25);
}

.hero-module-icon.blue   { background: linear-gradient(135deg, #8b9eff 0%, #2563eb 100%); box-shadow: 0 4px 10px -2px rgba(91, 110, 232, 0.35); }
.hero-module-icon.amber  { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); box-shadow: 0 4px 10px -2px rgba(245, 158, 11, 0.35); }
.hero-module-icon.green  { background: linear-gradient(135deg, #34d399 0%, #e879a8 100%); box-shadow: 0 4px 10px -2px rgba(16, 185, 129, 0.35); }
.hero-module-icon.purple { background: linear-gradient(135deg, #c5cbf5 0%, #5b6ee8 100%); box-shadow: 0 4px 10px -2px rgba(91, 110, 232, 0.35); }
.hero-module-icon.pink   { background: linear-gradient(135deg, #f0a0c4 0%, #d4548c 100%); box-shadow: 0 4px 10px -2px rgba(232, 121, 168, 0.35); }
.hero-module-icon.red    { background: linear-gradient(135deg, #f87171 0%, #dc2626 100%); box-shadow: 0 4px 10px -2px rgba(220, 38, 38, 0.35); }
.hero-module-icon.teal   { background: linear-gradient(135deg, #5eead4 0%, #0d9488 100%); box-shadow: 0 4px 10px -2px rgba(13, 148, 136, 0.35); }
.hero-module-icon.orange { background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%); box-shadow: 0 4px 10px -2px rgba(234, 88, 12, 0.35); }

.hero-module-text h4 {
  font-size: 0.9rem;
  font-weight: 600;
}

.hero-module-text span {
  font-size: 0.78rem;
  color: var(--text-light);
  line-height: 1.4;
}

.hero-module-meta {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-light);
  background: #fff;
  border: 1px solid var(--border);
  padding: 3px 10px;
  border-radius: 50px;
  white-space: nowrap;
  flex-shrink: 0;
}

[data-theme="dark"] .hero-module-meta {
  background: var(--bg-alt);
}

.hero-card-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hero-card-badge {
  background: rgba(255, 255, 255, 0.2);
  padding: 3px 12px;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

.hero-card-footer {
  padding: 16px 28px 20px;
  border-top: 1px solid var(--border);
}

.hero-card-tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.hero-card-tools span {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-light);
  background: var(--bg-alt);
  padding: 4px 10px;
  border-radius: 50px;
  border: 1px solid var(--border);
}

.floating-badge {
  position: absolute;
  background: var(--bg);
  border-radius: 14px;
  padding: 14px 20px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  animation: float 3s ease-in-out infinite;
  border: 1px solid var(--border);
}

.floating-badge.top-right {
  top: -10px;
  right: -20px;
}

.floating-badge.bottom-left {
  bottom: 20px;
  left: -20px;
  animation-delay: 1.5s;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ===== TRUSTED BY / LOGOS ===== */
.trusted-by {
  padding: 60px 0;
  border-bottom: 1px solid var(--border);
}

.trusted-by .container {
  text-align: center;
}

.trusted-by p {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-light);
  margin-bottom: 28px;
}

.logo-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  opacity: 0.5;
}

.logo-strip .brand-logo {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-light);
  letter-spacing: -0.02em;
  transition: opacity var(--transition);
}

.logo-strip .brand-logo:hover {
  opacity: 0.8;
}

/* ===== FEATURES ===== */
.features {
  padding: 70px 0;
  position: relative;
  overflow: hidden;
  /* Transparent — body-level violet mesh shows through for continuous flow */
  background: transparent;
}
[data-theme="dark"] .features {
  background: transparent;
}
.features > .container { position: relative; z-index: 1; }

.features-header {
  text-align: center;
  margin-bottom: 40px;
}

.features-header .section-label {
  justify-content: center;
}

.features-header .section-desc {
  margin: 0 auto;
}

.features-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
}

.feature-tag {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-light);
  padding: 8px 20px;
  border-radius: 50px;
  border: 1px solid var(--primary);
  transition: all var(--transition);
}

.feature-tag:hover {
  background: var(--primary);
  color: #fff;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.feature-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px;
  transition: all var(--transition-slow);
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), #5b6ee8);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-slow);
}

.feature-card:hover::before {
  transform: scaleX(1);
}

.feature-card:hover {
  border-color: var(--primary-light);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 20px;
  color: #fff;
  box-shadow: 0 6px 14px -3px rgba(91, 110, 232, 0.3);
  transition: transform var(--transition), box-shadow var(--transition);
}

.feature-icon.blue   { background: linear-gradient(135deg, #8b9eff 0%, #2563eb 100%); box-shadow: 0 6px 14px -3px rgba(91, 110, 232, 0.4); }
.feature-icon.amber  { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); box-shadow: 0 6px 14px -3px rgba(245, 158, 11, 0.4); }
.feature-icon.green  { background: linear-gradient(135deg, #34d399 0%, #e879a8 100%); box-shadow: 0 6px 14px -3px rgba(16, 185, 129, 0.4); }
.feature-icon.purple { background: linear-gradient(135deg, #c5cbf5 0%, #5b6ee8 100%); box-shadow: 0 6px 14px -3px rgba(91, 110, 232, 0.4); }
.feature-icon.pink   { background: linear-gradient(135deg, #f0a0c4 0%, #d4548c 100%); box-shadow: 0 6px 14px -3px rgba(232, 121, 168, 0.4); }
.feature-icon.red    { background: linear-gradient(135deg, #f87171 0%, #dc2626 100%); box-shadow: 0 6px 14px -3px rgba(220, 38, 38, 0.4); }
.feature-icon.teal   { background: linear-gradient(135deg, #5eead4 0%, #0d9488 100%); box-shadow: 0 6px 14px -3px rgba(13, 148, 136, 0.4); }
.feature-icon.orange { background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%); box-shadow: 0 6px 14px -3px rgba(234, 88, 12, 0.4); }

.feature-card:hover .feature-icon {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 10px 20px -4px rgba(91, 110, 232, 0.5);
}

.feature-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.feature-card p {
  font-size: 0.9rem;
  color: var(--text-light);
  line-height: 1.7;
}

/* ===== CURRICULUM ===== */
.curriculum {
  padding: 70px 0;
  position: relative;
  overflow: hidden;
  /* Transparent — body-level violet mesh shows through for continuous flow */
  background: transparent;
}
[data-theme="dark"] .curriculum {
  background: transparent;
}
.curriculum > .container { position: relative; z-index: 1; }

.curriculum-header {
  text-align: center;
  margin-bottom: 40px;
}

.curriculum-header .section-label {
  justify-content: center;
}

.curriculum-header .section-desc {
  margin: 0 auto;
}

.modules-list {
  max-width: 800px;
  margin: 0 auto;
}

.module-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
  transition: all var(--transition);
}

.module-item:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow);
}

.module-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  cursor: pointer;
  user-select: none;
}

.module-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.module-number {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary-light), rgba(91, 110, 232, 0.1));
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.module-info h3 {
  font-size: 1rem;
  font-weight: 600;
}

.module-info span {
  font-size: 0.8rem;
  color: var(--text-light);
}

.module-toggle {
  font-size: 1.2rem;
  color: var(--text-light);
  transition: transform var(--transition);
}

.module-item.open .module-toggle {
  transform: rotate(180deg);
}

.module-lessons {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.module-item.open .module-lessons {
  max-height: 600px;
}

.lesson-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px 14px 80px;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--text-light);
  transition: all var(--transition);
}

.lesson-item:hover {
  background: var(--bg-alt);
  color: var(--primary);
  padding-left: 88px;
}

.lesson-item .icon {
  font-size: 0.85rem;
}

.lesson-item .duration {
  margin-left: auto;
  font-size: 0.8rem;
  background: var(--bg-alt);
  padding: 2px 10px;
  border-radius: 50px;
}

/* ===== INSTRUCTOR ===== */
.instructor {
  padding: 70px 0;
  position: relative;
  overflow: hidden;
  /* Transparent — body-level violet mesh shows through for continuous flow */
  background: transparent;
}
[data-theme="dark"] .instructor {
  background: transparent;
}
.instructor > .container { position: relative; z-index: 1; }

.instructor .container {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 56px;
  align-items: center;
}

.instructor-img {
  width: 380px;
  height: 380px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--primary-light), #c7d2fe, #eef0fe);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6rem;
  position: relative;
  overflow: hidden;
}

.instructor-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(91, 110, 232, 0.08));
  border-radius: var(--radius-lg);
}

/* ===== Program Outcome Carousel ===== */
.outcome-carousel {
  width: 380px;
  height: 380px;
  max-width: 100%;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary-light), #c7d2fe, #eef0fe);
  box-shadow: var(--shadow-lg);
}
.outcome-slides {
  position: absolute;
  inset: 0;
  perspective: 1200px;
}
.outcome-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity 0.7s cubic-bezier(.4, 0, .2, 1),
    transform 0.9s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.outcome-slide.active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
  pointer-events: auto;
}
/* Direction-aware enter: incoming slide drifts in from the side */
.outcome-slide.entering-next { animation: outcome-enter-next 0.8s cubic-bezier(.4, 0, .2, 1) both; }
.outcome-slide.entering-prev { animation: outcome-enter-prev 0.8s cubic-bezier(.4, 0, .2, 1) both; }
/* Direction-aware leave: outgoing slide drifts away the opposite way */
.outcome-slide.leaving-next { animation: outcome-leave-next 0.8s cubic-bezier(.4, 0, .2, 1) both; z-index: 0; }
.outcome-slide.leaving-prev { animation: outcome-leave-prev 0.8s cubic-bezier(.4, 0, .2, 1) both; z-index: 0; }

@keyframes outcome-enter-next {
  0%   { opacity: 0; transform: translateX(8%) scale(1.06); filter: blur(4px); }
  100% { opacity: 1; transform: translateX(0)  scale(1);    filter: blur(0); }
}
@keyframes outcome-enter-prev {
  0%   { opacity: 0; transform: translateX(-8%) scale(1.06); filter: blur(4px); }
  100% { opacity: 1; transform: translateX(0)   scale(1);    filter: blur(0); }
}
@keyframes outcome-leave-next {
  0%   { opacity: 1; transform: translateX(0)    scale(1); }
  100% { opacity: 0; transform: translateX(-6%) scale(0.96); }
}
@keyframes outcome-leave-prev {
  0%   { opacity: 1; transform: translateX(0)   scale(1); }
  100% { opacity: 0; transform: translateX(6%) scale(0.96); }
}

.outcome-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: center;
}
/* Ken Burns: subtle slow zoom on the active image so the slide feels alive
   even between transitions. */
.outcome-slide.active img {
  animation: outcome-kenburns 7s ease-in-out forwards;
}
@keyframes outcome-kenburns {
  0%   { transform: scale(1)    translate(0, 0); }
  100% { transform: scale(1.07) translate(-1.2%, -0.8%); }
}
@media (prefers-reduced-motion: reduce) {
  .outcome-slide,
  .outcome-slide.active img,
  .outcome-slide.entering-next,
  .outcome-slide.entering-prev,
  .outcome-slide.leaving-next,
  .outcome-slide.leaving-prev {
    animation: none !important;
    transition: opacity 0.3s ease !important;
    transform: none !important;
    filter: none !important;
  }
}
.outcome-placeholder {
  color: var(--primary);
}
.outcome-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: none;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: opacity 0.25s ease, background 0.2s ease, transform 0.2s ease;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
}
.outcome-carousel:hover .outcome-nav,
.outcome-carousel:focus-within .outcome-nav {
  opacity: 1;
  pointer-events: auto;
}
.outcome-nav:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.08);
}
.outcome-prev { left: 12px; }
.outcome-next { right: 12px; }

/* Touch devices: no hover state, keep arrows visible for accessibility */
@media (hover: none) {
  .outcome-nav {
    opacity: 1;
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.7);
  }
}
.outcome-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 3;
}
.outcome-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all var(--transition);
}
.outcome-dot.active {
  background: #fff;
  width: 20px;
  border-radius: 4px;
}

/* Admin outcome editor */
.outcome-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.outcome-admin-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--border);
  background: var(--bg);
}
.outcome-admin-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.outcome-admin-tile-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  z-index: 2;
}
.outcome-admin-tile-remove:hover {
  background: #ef4444;
}
.outcome-admin-upload {
  aspect-ratio: 1;
  border-radius: 10px;
  border: 2px dashed var(--border);
  background: var(--bg);
  color: var(--text-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  transition: all var(--transition);
}
.outcome-admin-upload:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-glow);
}

.instructor-info .section-label {
  margin-bottom: 8px;
}

.instructor-info h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.instructor-role {
  background: linear-gradient(135deg, var(--primary) 0%, #5b6ee8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
  margin-bottom: 16px;
  font-size: 1.05rem;
}

.instructor-info p {
  color: var(--text-light);
  margin-bottom: 24px;
  line-height: 1.7;
}

.instructor-stats {
  display: flex;
  gap: 32px;
}

.instructor-stat {
  text-align: center;
  padding: 16px 20px;
  background: var(--bg-alt);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  min-width: 100px;
}

.instructor-stat strong {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary) 0%, #5b6ee8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.instructor-stat span {
  font-size: 0.75rem;
  color: var(--text-light);
  font-weight: 500;
}

/* ===== TESTIMONIALS ===== */
.testimonials {
  padding: 70px 0;
  background: transparent;
}

.testimonials-header {
  text-align: center;
  margin-bottom: 40px;
}

.testimonials-header .section-label {
  justify-content: center;
}

.testimonials-header .section-desc {
  margin: 0 auto;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.testimonial-card {
  background: linear-gradient(135deg, #0b0f1c 0%, #3f51c2 55%, #161b30 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: transform 0.1s ease-out, box-shadow var(--transition), border-color var(--transition);
  position: relative;
  color: #f7f8fc;
  box-shadow: 0 12px 32px -12px rgba(63, 81, 194, 0.45);
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
}

.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: 16px;
  right: 24px;
  font-size: 4rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.18);
  font-family: Georgia, serif;
  pointer-events: none;
  z-index: 0;
}

.testimonial-card::after {
  /* subtle glow in the corner for depth */
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(197, 203, 245, 0.3), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Dark-mode keeps the same dark-violet style — no override needed */

.testimonial-card > * { position: relative; z-index: 1; }

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -14px rgba(63, 81, 194, 0.6);
  border-color: rgba(255, 255, 255, 0.18);
}

.testimonial-stars {
  color: #fbbf24;
  margin-bottom: 16px;
  font-size: 0.95rem;
  letter-spacing: 2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.testimonial-card blockquote {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.7;
  margin-bottom: 24px;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c5cbf5 0%, #e1e4f0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #3f51c2;
  font-size: 0.85rem;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.25);
}
.testimonial-avatar.has-photo {
  background: none;
  padding: 0;
}
.testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   STUDENT DASHBOARD
   ============================================================ */
.dash-page {
  padding: 110px 0 80px;
  min-height: 80vh;
}

/* Hero */
.dash-hero {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  padding: 44px 48px;
  border-radius: 24px;
  background: linear-gradient(135deg, #2563eb 0%, #161b30 55%, #5b6ee8 100%);
  color: #fff;
  margin-bottom: 36px;
  box-shadow: 0 24px 48px -20px rgba(91, 110, 232, 0.55);
  flex-wrap: wrap;
  overflow: hidden;
}
.dash-hero-deco {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.18), transparent 70%);
  pointer-events: none;
}
.dash-hero::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: 20%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.1), transparent 70%);
  pointer-events: none;
}
.dash-hero-stats {
  display: flex;
  gap: 28px;
  margin-top: 20px;
  position: relative;
  z-index: 1;
}
.dash-hero-stat strong {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}
.dash-hero-stat span {
  font-size: 0.78rem;
  opacity: 0.8;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dash-hero-text { flex: 1; min-width: 260px; }
.dash-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0.85;
  margin: 0 0 8px;
}
.dash-hero h1 {
  font-size: 1.9rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: #fff;
  letter-spacing: -0.02em;
}
.dash-hero-sub {
  margin: 0;
  opacity: 0.92;
  font-size: 0.95rem;
}
.dash-continue-btn {
  background: #fff;
  color: #2563eb;
  padding: 14px 22px;
  font-weight: 700;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.dash-continue-btn:hover {
  background: #f7f8fc;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.25);
}

/* 3-card grid */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}
.dash-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  min-height: 200px;
  position: relative;
  overflow: hidden;
}
.dash-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -10px rgba(0, 0, 0, 0.15);
  border-color: transparent;
}
.dash-card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.dash-card-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-light);
  margin: 0;
}
.dash-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.dash-card-icon.blue   { background: linear-gradient(135deg, #8b9eff 0%, #2563eb 100%); box-shadow: 0 4px 10px -2px rgba(91, 110, 232, 0.35); }
.dash-card-icon.green  { background: linear-gradient(135deg, #34d399 0%, #e879a8 100%); box-shadow: 0 4px 10px -2px rgba(16, 185, 129, 0.35); }
.dash-card-icon.amber  { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); box-shadow: 0 4px 10px -2px rgba(245, 158, 11, 0.35); }
.dash-card-icon.purple { background: linear-gradient(135deg, #c5cbf5 0%, #5b6ee8 100%); box-shadow: 0 4px 10px -2px rgba(91, 110, 232, 0.35); }

/* Progress ring */
.dash-progress-card {
  align-items: center;
  text-align: center;
}
.dash-progress-card .dash-card-header-row {
  width: 100%;
}
.progress-ring-wrap {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 4px auto;
}
.progress-ring-bg { stroke: var(--border); opacity: 0.4; }
.progress-ring-fg {
  stroke: url(#ringGradient);
  transition: stroke-dashoffset 1s cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0 2px 8px rgba(139, 158, 255, 0.3));
}
.progress-sub {
  margin: 14px 0 0;
  font-size: 0.82rem;
  color: var(--text-light);
  font-weight: 500;
}
.progress-ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.progress-ring-text strong {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  background: linear-gradient(135deg, #8b9eff 0%, #5b6ee8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.progress-ring-text span {
  font-size: 0.78rem;
  color: var(--text-light);
  margin-top: 6px;
  font-weight: 600;
}

/* Current Week card */
.week-num {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  margin-bottom: 6px;
  display: block;
}
.week-title {
  font-size: 0.95rem;
  color: var(--text);
  margin: 0 0 auto;
  line-height: 1.4;
  font-weight: 500;
}
.week-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  margin-top: 14px;
  font-size: 0.85rem;
}
.week-meta-label {
  color: var(--text-light);
}
.week-meta strong {
  color: var(--primary);
  font-weight: 700;
}

/* Upcoming reminder card */
.reminder-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 6px;
  display: block;
}
.reminder-desc {
  font-size: 0.88rem;
  color: var(--text-light);
  margin: 0 0 auto;
  line-height: 1.5;
}
.reminder-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  margin-top: 14px;
}
.reminder-status {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 50px;
}
.reminder-status.pending {
  background: rgba(251, 191, 36, 0.15);
  color: #b45309;
}
.reminder-status.submitted {
  background: rgba(16, 185, 129, 0.15);
  color: #047857;
}
.reminder-link {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
}
.reminder-link:hover { text-decoration: underline; }

/* Dashboard sections (activity) */
.dash-section {
  margin-bottom: 32px;
}
.dash-section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.dash-section-header h2 {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}
.dash-section-sub {
  font-size: 0.82rem;
  color: var(--text-light);
}

/* Activity feed */
.activity-feed {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.activity-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.activity-item:last-child { border-bottom: none; }
.activity-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.activity-icon.blue   { background: linear-gradient(135deg, #8b9eff 0%, #2563eb 100%); }
.activity-icon.green  { background: linear-gradient(135deg, #34d399 0%, #e879a8 100%); }
.activity-icon.purple { background: linear-gradient(135deg, #c5cbf5 0%, #5b6ee8 100%); }
.activity-icon.amber  { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); }
.activity-icon.pink   { background: linear-gradient(135deg, #f0a0c4 0%, #d4548c 100%); }
.activity-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.activity-body strong {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.activity-body span {
  font-size: 0.82rem;
  color: var(--text-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-item time {
  font-size: 0.78rem;
  color: var(--text-light);
  white-space: nowrap;
}
.activity-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--text-light);
  font-size: 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  list-style: none;
}

/* Mobile tweaks */
@media (max-width: 640px) {
  .dash-hero {
    padding: 28px 24px;
    border-radius: 18px;
  }
  .dash-hero h1 { font-size: 1.4rem; }
  .dash-hero-stats { gap: 16px; margin-top: 16px; }
  .dash-hero-stat strong { font-size: 1.2rem; }
  .dash-continue-btn {
    width: 100%;
    justify-content: center;
  }
  .dash-page { padding: 30px 0 80px; }
  .activity-item {
    padding: 14px 16px;
    gap: 10px;
  }
  .activity-body span { font-size: 0.75rem; }
  .progress-ring-wrap { width: 130px; height: 130px; }
}

/* Persistent nav tabs (Dashboard / Course / Profile) */
.nav-tab-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-light);
  transition: color var(--transition);
  position: relative;
  text-decoration: none;
  padding: 4px 0;
}
.nav-tab-link::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #8b9eff 0%, #5b6ee8 100%);
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition);
}
.nav-tab-link:hover {
  color: var(--primary);
}
.nav-tab-link:hover::after {
  transform: scaleX(0.6);
}
.nav-tab-link.active {
  color: var(--primary);
  font-weight: 700;
}
.nav-tab-link.active::after {
  transform: scaleX(1);
}
@media (max-width: 900px) {
  .nav-tab-item { display: none; }
}

/* ============================================================
   ABOUT STRATOS SPHERE ACADEMY
   ============================================================ */
.about-section {
  padding: 70px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  /* Transparent — body-level violet mesh shows through for continuous flow */
  background: transparent;
}
[data-theme="dark"] .about-section {
  background: transparent;
}
.about-section > .container { position: relative; z-index: 1; }
.about-section .section-label,
.about-section .section-title {
  text-align: center;
}
.about-desc {
  max-width: 760px;
  margin: 16px auto 40px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-light);
}

/* Logo framing in About section — let the logo's built-in rounded
   navy frame BE the visual frame, just add a soft halo glow behind */
.about-logo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}
.about-logo-frame {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  transition: transform 0.35s cubic-bezier(.4, 0, .2, 1);
}
.about-logo-frame::before {
  /* Soft ambient halo bleeding outward — no harsh edges */
  content: '';
  position: absolute;
  inset: -28px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
              rgba(91, 110, 232, 0.5) 0%,
              rgba(139, 158, 255, 0.28) 35%,
              transparent 70%);
  filter: blur(28px);
  z-index: -1;
  opacity: 0.85;
  transition: opacity 0.35s ease;
}
.about-logo-frame::after { content: none; }
.about-logo-frame:hover {
  transform: translateY(-4px) scale(1.04);
}
.about-logo-frame:hover::before {
  opacity: 1;
}
.about-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 28px rgba(139, 158, 255, 0.45))
          drop-shadow(0 4px 12px rgba(91, 110, 232, 0.4));
}
.about-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  max-width: 980px;
  margin: 0 auto;
}
.about-pillar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px;
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.about-pillar:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -10px rgba(0, 0, 0, 0.12);
}
.about-pillar-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-bottom: 16px;
}
.about-pillar-icon.blue   { background: linear-gradient(135deg, #8b9eff 0%, #2563eb 100%); box-shadow: 0 6px 14px -3px rgba(91, 110, 232, 0.4); }
.about-pillar-icon.purple { background: linear-gradient(135deg, #c5cbf5 0%, #5b6ee8 100%); box-shadow: 0 6px 14px -3px rgba(91, 110, 232, 0.4); }
.about-pillar-icon.green  { background: linear-gradient(135deg, #34d399 0%, #e879a8 100%); box-shadow: 0 6px 14px -3px rgba(16, 185, 129, 0.4); }
.about-pillar h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text);
}
.about-pillar p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-light);
  line-height: 1.55;
}

/* ============================================================
   PREREQUISITES / LOCKED LESSON
   ============================================================ */
.lesson-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  padding: 60px 24px;
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
}
.lesson-locked-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 24px -6px rgba(245, 158, 11, 0.45);
  margin-bottom: 20px;
}
.lesson-locked h2 {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.lesson-locked p {
  color: var(--text-light);
  font-size: 0.95rem;
  margin: 0 0 24px;
  line-height: 1.6;
}
.lesson-locked p strong { color: var(--text); }

.lock-req-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  text-align: left;
}
.lock-req {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 500;
}
.lock-req:last-child { border-bottom: none; }
.lock-req-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--primary-glow);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lesson-locked-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Lock pill inside curriculum lesson items */
.lesson-item.is-locked {
  opacity: 0.65;
}
.lesson-item-lock {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  margin-right: 8px;
  background: rgba(251, 191, 36, 0.15);
  color: #b45309;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
[data-theme="dark"] .lesson-item-lock {
  background: rgba(251, 191, 36, 0.18);
  color: #fbbf24;
}

/* ============================================================
   ADMIN ANALYTICS
   ============================================================ */
.analytics-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 12px;
}
.analytics-stat-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.analytics-stat-card .label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-light);
}
.analytics-stat-card .value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  margin: 4px 0;
  background: linear-gradient(135deg, #8b9eff 0%, #5b6ee8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.analytics-stat-card .hint {
  font-size: 0.78rem;
  color: var(--text-light);
}
.analytics-status {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-light);
}
.analytics-empty {
  padding: 30px 24px;
  background: var(--bg);
  border: 2px dashed var(--border);
  border-radius: 14px;
  color: var(--text-light);
  font-size: 0.9rem;
  line-height: 1.6;
}
.analytics-empty strong { color: var(--text); }

/* Bar chart rows */
.analytics-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.analytics-bar-row {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  gap: 16px;
  align-items: center;
  padding: 8px 0;
}
.analytics-bar-label {
  font-size: 0.85rem;
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.analytics-bar-track {
  height: 10px;
  background: var(--border);
  border-radius: 50px;
  overflow: hidden;
}
.analytics-bar-fill {
  height: 100%;
  border-radius: 50px;
  transition: width 0.6s ease;
}
.analytics-bar-fill.blue   { background: linear-gradient(90deg, #8b9eff 0%, #2563eb 100%); }
.analytics-bar-fill.green  { background: linear-gradient(90deg, #34d399 0%, #e879a8 100%); }
.analytics-bar-fill.purple { background: linear-gradient(90deg, #c5cbf5 0%, #5b6ee8 100%); }
.analytics-bar-fill.pink   { background: linear-gradient(90deg, #f0a0c4 0%, #d4548c 100%); }
.analytics-bar-fill.amber  { background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%); }
.analytics-bar-value {
  min-width: 80px;
  text-align: right;
  line-height: 1.1;
}
.analytics-bar-value strong {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
}
.analytics-bar-value span {
  display: block;
  font-size: 0.74rem;
  color: var(--text-light);
  margin-top: 2px;
}

/* Engagement chart (30 day bars) */
.engagement-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 140px;
  padding: 0 4px;
}
.engagement-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  gap: 4px;
}
.engagement-bar {
  width: 100%;
  min-height: 2px;
  background: linear-gradient(180deg, #5b6ee8 0%, #8b9eff 100%);
  border-radius: 4px 4px 0 0;
  transition: all 0.4s ease;
  cursor: default;
}
.engagement-bar-col:hover .engagement-bar {
  filter: brightness(1.15);
}
.engagement-day {
  font-size: 0.62rem;
  color: var(--text-light);
  font-weight: 600;
}

/* Leaderboard table */
.leaderboard-wrap {
  overflow-x: auto;
}
.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.leaderboard-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-light);
  border-bottom: 2px solid var(--border);
  background: var(--bg);
}
.leaderboard-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.leaderboard-table tr:last-child td { border-bottom: none; }
.leaderboard-table tr.podium td { background: linear-gradient(90deg, rgba(251, 191, 36, 0.06), transparent); }
.leaderboard-table tr:hover td { background: var(--bg); }
.leaderboard-table .rank {
  font-weight: 700;
  font-size: 1rem;
  width: 48px;
}
.leaderboard-table .name { font-weight: 600; }
.leaderboard-table .name .username {
  display: block;
  font-weight: 400;
  font-size: 0.76rem;
  color: var(--text-light);
  margin-top: 2px;
}

/* ===== Avatar Adjuster Modal ===== */
.avatar-adjuster-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: adjusterFadeIn 0.2s ease-out;
}
@keyframes adjusterFadeIn { from { opacity: 0; } to { opacity: 1; } }
.avatar-adjuster {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 360px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.avatar-adjuster-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1rem;
}
.avatar-adjuster-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text-light);
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-adjuster-close:hover { background: var(--border); color: var(--text); }
.avatar-adjuster-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: #0b0f1c;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.avatar-adjuster-viewport {
  position: relative;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.avatar-adjuster-viewport:active { cursor: grabbing; }
.avatar-adjuster-img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  pointer-events: none;
  -webkit-user-drag: none;
}
.avatar-adjuster-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(11, 15, 28, 0.75);
  border-radius: 50%;
  width: 280px;
  height: 280px;
  margin: auto;
}
.avatar-adjuster-controls {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.avatar-adjuster-zoom {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  outline: none;
}
.avatar-adjuster-zoom::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  border: 2px solid var(--surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.avatar-adjuster-zoom::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  border: 2px solid var(--surface);
}
.avatar-adjuster-actions {
  padding: 12px 20px 20px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.avatar-adjuster-actions .btn { padding: 10px 20px; font-size: 0.85rem; }

.testimonial-name strong {
  display: block;
  font-size: 0.9rem;
  color: #ffffff;
}

.testimonial-name span {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
}

/* ===== PRICING ===== */
.pricing {
  padding: 100px 0;
}

.pricing-header {
  text-align: center;
  margin-bottom: 40px;
}

.pricing-header .section-label {
  justify-content: center;
}

.pricing-header .section-desc {
  margin: 0 auto;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 960px;
  margin: 0 auto;
}

.pricing-card {
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  text-align: center;
  transition: all var(--transition);
  position: relative;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.pricing-card.popular {
  border-color: var(--primary);
  transform: scale(1.04);
  box-shadow: var(--shadow-xl);
  background: linear-gradient(to bottom, var(--bg) 0%, var(--primary-light) 100%);
}

.pricing-card.popular:hover {
  transform: scale(1.04) translateY(-4px);
}

.pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--primary) 0%, #5b6ee8 100%);
  color: #fff;
  padding: 5px 22px;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.pricing-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.pricing-card .price {
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.pricing-card .price span {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-light);
}

.pricing-card .price-desc {
  font-size: 0.85rem;
  color: var(--text-light);
  margin-bottom: 28px;
}

.pricing-features {
  text-align: left;
  margin-bottom: 28px;
}

.pricing-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 0.88rem;
  color: var(--text-light);
}

.pricing-features li .check {
  color: var(--success);
  font-weight: bold;
  font-size: 1rem;
}

.pricing-card .btn {
  width: 100%;
  justify-content: center;
}

/* ===== NEWSLETTER ===== */
.newsletter {
  padding: 70px 0;
  background: var(--bg-alt);
}

.newsletter .container {
  max-width: 640px;
  text-align: center;
}

.newsletter .section-label {
  justify-content: center;
}

.newsletter-form {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}

.newsletter-form input {
  flex: 1;
  padding: 14px 20px;
  border: 2px solid var(--border);
  border-radius: 10px;
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
  transition: all var(--transition);
  outline: none;
}

.newsletter-form input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.newsletter-form input::placeholder {
  color: var(--text-light);
}

.newsletter-note {
  margin-top: 12px;
  font-size: 0.8rem;
  color: var(--text-light);
}

/* ===== CTA ===== */
.cta {
  padding: 70px 0;
  /* Logo-mirror: periwinkle top-left → pink bottom-right on the
     exact navy from the favicon. Looks like a stretched-out logo. */
  background:
    radial-gradient(ellipse at 20% 30%, rgba(91, 110, 232, 0.60) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(232, 121, 168, 0.50) 0%, transparent 55%),
    #0b0f1c;
  color: #ffffff;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.08) 0%, transparent 50%);
  pointer-events: none;
}

.cta .container {
  position: relative;
  z-index: 1;
}

.cta h2 {
  font-size: 2.6rem;
  font-weight: 800;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.cta p {
  font-size: 1.1rem;
  opacity: 0.9;
  margin-bottom: 36px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

.cta .btn {
  background: #fff;
  color: var(--primary-dark);
  font-size: 1rem;
  padding: 16px 40px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.cta .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

/* ===== FOOTER ===== */
.footer {
  padding: 80px 0 30px;
  border-top: 1px solid var(--border);
  /* Soft periwinkle wash — visible but breathable, lets the body
     mesh peek through so it doesn't feel like a hard-cut block. */
  background:
    radial-gradient(ellipse at 30% 10%, rgba(91, 110, 232, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(232, 121, 168, 0.06) 0%, transparent 55%),
    rgba(91, 110, 232, 0.04);
}
[data-theme="dark"] .footer {
  background:
    radial-gradient(ellipse at 30% 10%, rgba(139, 158, 255, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(240, 160, 196, 0.08) 0%, transparent 55%),
    rgba(139, 158, 255, 0.04);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.footer-brand p {
  color: var(--text-light);
  font-size: 0.9rem;
  margin-top: 16px;
  line-height: 1.7;
}

.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all var(--transition);
  background: var(--bg-alt);
}

.footer-social a:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
  transform: translateY(-2px);
}

.footer-col h4 {
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: 0.02em;
}

.footer-col a {
  display: block;
  font-size: 0.85rem;
  color: var(--text-light);
  padding: 5px 0;
  transition: all var(--transition);
}

.footer-col a:hover {
  color: var(--primary);
  padding-left: 4px;
}

.footer-bottom {
  text-align: center;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-light);
}

/* ===== BACK TO TOP ===== */
.back-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bg-alt);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: all var(--transition);
  flex-shrink: 0;
}

.back-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

.back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary) 0%, #5b6ee8 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  border: none;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--transition);
  z-index: 999;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-xl);
}

/* ===== STICKY ENROLL BAR ===== */
.sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 998;
  background: var(--bg);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  padding: 12px 0;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.sticky-bar.visible {
  transform: translateY(0);
}

.sticky-bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sticky-bar-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sticky-bar-info h4 {
  font-size: 0.95rem;
  font-weight: 700;
}

.sticky-bar-info .price {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
}

.sticky-bar-info .price .original {
  font-size: 0.85rem;
  color: var(--text-light);
  text-decoration: line-through;
  font-weight: 400;
  margin-left: 6px;
}

.sticky-bar .btn {
  padding: 10px 24px;
}

/* ===== AUTH PAGES (Login / Signup) ===== */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 24px 60px;
  background: linear-gradient(135deg, var(--bg) 0%, var(--primary-light) 50%, var(--bg) 100%);
  position: relative;
  overflow: hidden;
}

.auth-page::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.auth-page::after {
  content: '';
  position: absolute;
  bottom: -150px;
  left: -150px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(91, 110, 232, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 44px 40px;
  position: relative;
  z-index: 1;
}

.auth-card .logo {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 32px;
}

.auth-card h1 {
  font-size: 1.6rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.auth-card .auth-subtitle {
  text-align: center;
  color: var(--text-light);
  font-size: 0.9rem;
  margin-bottom: 32px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

.form-group input {
  padding: 13px 16px;
  border: 2px solid var(--border);
  border-radius: 10px;
  font-size: 0.92rem;
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
  transition: all var(--transition);
  outline: none;
}

.form-group input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.form-group input::placeholder {
  color: var(--text-light);
}

.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
}

/* Password show/hide toggle */
.password-wrap {
  position: relative;
  display: block;
}
.password-wrap input {
  width: 100%;
  padding-right: 46px;
  box-sizing: border-box;
}
.password-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--text-light);
  cursor: pointer;
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color var(--transition), background var(--transition);
}
.password-toggle:hover {
  color: var(--primary);
  background: var(--primary-glow);
}
.password-toggle:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.password-toggle svg {
  width: 20px;
  height: 20px;
  display: block;
}

.form-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--text-light);
  font-weight: 500;
}

.form-row label input[type="checkbox"] {
  accent-color: var(--primary);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.form-row a {
  color: var(--primary);
  font-weight: 600;
  transition: color var(--transition);
}

.form-row a:hover {
  color: var(--primary-dark);
}

.auth-form .btn {
  width: 100%;
  justify-content: center;
  padding: 14px;
  margin-top: 6px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
  color: var(--text-light);
  font-size: 0.8rem;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-social {
  display: flex;
  gap: 12px;
}

.auth-social button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}

.auth-social button:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.auth-footer {
  text-align: center;
  margin-top: 28px;
  font-size: 0.88rem;
  color: var(--text-light);
}

.auth-footer a {
  color: var(--primary);
  font-weight: 600;
  transition: color var(--transition);
}

.auth-footer a:hover {
  color: var(--primary-dark);
}

/* ===== COURSE PAGE ===== */
.course-hero {
  padding: 120px 0 60px;
  background: linear-gradient(135deg, var(--bg) 0%, var(--primary-light) 50%, var(--bg) 100%);
  position: relative;
  overflow: hidden;
}

.course-hero::before {
  content: '';
  position: absolute;
  top: -150px;
  right: -150px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.course-hero .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
  align-items: start;
  position: relative;
  z-index: 1;
}

.course-meta {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.course-tag {
  background: var(--primary-light);
  color: var(--primary);
  padding: 5px 14px;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 600;
}

.course-hero h1 {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.course-hero > .container > div > p {
  color: var(--text-light);
  font-size: 1.05rem;
  margin-bottom: 24px;
  line-height: 1.7;
}

.course-stats {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.course-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  color: var(--text-light);
  background: var(--bg-alt);
  padding: 6px 14px;
  border-radius: 50px;
  border: 1px solid var(--border);
}

.enrollment-card {
  background: var(--bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 32px;
  position: sticky;
  top: 96px;
  border: 1px solid var(--border);
}

.enrollment-card .price {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.enrollment-card .price .original {
  font-size: 1rem;
  color: var(--text-light);
  text-decoration: line-through;
  font-weight: 400;
  margin-left: 8px;
}

.enrollment-card .price-note {
  font-size: 0.85rem;
  color: var(--success);
  font-weight: 600;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.enrollment-card .btn {
  width: 100%;
  justify-content: center;
  margin-bottom: 12px;
}

.enrollment-features {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.enrollment-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 0.85rem;
  color: var(--text-light);
}

.enrollment-features .check {
  color: var(--success);
}

/* Course Content Tabs */
.course-content {
  padding: 60px 0 100px;
}

/* When the course-hero is removed, push content down past the
   72px fixed navbar instead of relying on hero spacing. */
.course-content.course-content-top {
  padding-top: 110px;
}

.course-tabs {
  display: flex;
  border-bottom: 2px solid var(--border);
  margin-bottom: 40px;
  gap: 0;
}

.course-tab {
  padding: 14px 28px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-light);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}

.course-tab:hover {
  color: var(--text);
}

.course-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
  animation: fadeUp 0.3s ease;
}

/* ===== LESSON PAGE ===== */
.lesson-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: calc(100vh - 72px);
  margin-top: 72px;
}

.lesson-sidebar {
  background: var(--bg-alt);
  border-right: 1px solid var(--border);
  padding: 24px 0;
  overflow-y: auto;
  height: calc(100vh - 72px);
  position: sticky;
  top: 72px;
}

.sidebar-header {
  padding: 0 20px 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

.sidebar-header a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--primary);
  font-weight: 500;
  margin-bottom: 8px;
  transition: all var(--transition);
}

.sidebar-header a:hover {
  gap: 12px;
}

.sidebar-header h3 {
  font-size: 0.95rem;
  font-weight: 700;
}

.sidebar-progress {
  margin-top: 12px;
}

.progress-bar {
  height: 6px;
  background: var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), #5b6ee8);
  border-radius: 6px;
  transition: width 0.5s ease;
}

.progress-text {
  font-size: 0.75rem;
  color: var(--text-light);
  margin-top: 6px;
}

.sidebar-module {
  padding: 14px 20px 6px;
}

.sidebar-module-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-light);
  margin-bottom: 8px;
}

.sidebar-lesson {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  font-size: 0.85rem;
  color: var(--text-light);
  cursor: pointer;
  transition: all var(--transition);
  border-left: 3px solid transparent;
}

.sidebar-lesson:hover {
  background: var(--bg);
  color: var(--text);
}

.sidebar-lesson.active {
  background: var(--bg);
  color: var(--primary);
  border-left-color: var(--primary);
  font-weight: 600;
}

.sidebar-lesson.completed {
  color: var(--success);
}

.sidebar-lesson .lesson-icon {
  font-size: 0.8rem;
  width: 20px;
  text-align: center;
}

.lesson-main {
  padding: 40px 60px;
  max-width: 900px;
}

.lesson-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-light);
  margin-bottom: 24px;
}

.lesson-breadcrumb a:hover {
  color: var(--primary);
}

.video-player {
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #0b0f1c 0%, #161b30 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.video-player::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(91, 110, 232, 0.15) 0%, transparent 50%);
  pointer-events: none;
}

.play-btn {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.8rem;
  cursor: pointer;
  transition: all var(--transition);
  border: 2px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  position: relative;
  z-index: 1;
}

.play-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.08);
  border-color: rgba(255, 255, 255, 0.4);
}

.video-duration {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  backdrop-filter: blur(4px);
  z-index: 1;
}

/* Clean YouTube thumbnail preview (replaces the ugly YouTube watermark fallback) */
.yt-thumb-player {
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #0b0f1c 0%, #161b30 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.yt-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* If we fell back to hqdefault (which is 480x360, YouTube-watermarked for unlisted/missing videos),
   hide the image and rely on the gradient background for a clean look */
.yt-thumb-img.yt-thumb-fallback {
  display: none;
}
.yt-thumb-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%);
  transition: background var(--transition);
}
.yt-thumb-player:hover .yt-thumb-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
}
.yt-thumb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: all var(--transition);
  z-index: 2;
}
.yt-thumb-play svg {
  margin-left: 4px; /* optically center the triangle */
}
.yt-thumb-player:hover .yt-thumb-play {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translate(-50%, -50%) scale(1.08);
}
.yt-thumb-hint {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.lesson-content h1 {
  font-size: 1.9rem;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.lesson-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  font-size: 0.85rem;
  color: var(--text-light);
}

.lesson-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.lesson-body {
  line-height: 1.8;
  color: var(--text);
}

.lesson-body h2 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 36px 0 12px;
}

.lesson-body h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 24px 0 8px;
}

.lesson-body p {
  margin-bottom: 16px;
}

.lesson-body ul, .lesson-body ol {
  margin: 0 0 16px 24px;
}

.lesson-body li {
  list-style: disc;
  margin-bottom: 8px;
}

.lesson-body ol li {
  list-style: decimal;
}

.key-takeaways {
  background: var(--primary-light);
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 28px;
  margin: 32px 0;
}

.key-takeaways h3 {
  margin-top: 0 !important;
  color: var(--primary);
}

.lesson-complete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  margin-top: 32px;
  border: 2px solid var(--success);
  background: transparent;
  color: var(--success);
  font-family: inherit;
}

.lesson-complete-btn:hover {
  background: var(--success);
  color: #fff;
}

.lesson-complete-btn.completed {
  background: var(--success);
  color: #fff;
}

.lesson-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.lesson-nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--primary);
  font-size: 0.9rem;
  transition: all var(--transition);
  padding: 8px 16px;
  border-radius: 8px;
}

.lesson-nav a:hover {
  background: var(--primary-light);
}

/* ===== MOBILE NAV CTA (hidden on desktop) ===== */
.nav-mobile-cta {
  display: none;
}

/* ===== SIDEBAR DRAWER (hidden on desktop) ===== */
.sidebar-toggle {
  display: none;
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 1001;
  background: linear-gradient(135deg, var(--primary) 0%, #5b6ee8 100%);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 12px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  gap: 8px;
  align-items: center;
  transition: all var(--transition);
}

.sidebar-toggle:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-2px);
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
  display: block;
  opacity: 1;
}

/* ===== ADMIN PANEL ===== */
.admin-page {
  padding: 100px 0 60px;
  min-height: 100vh;
  background: var(--bg-alt);
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 16px;
}

.admin-header h1 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.admin-header p {
  color: var(--text-light);
  font-size: 0.9rem;
}

.admin-stats-bar {
  display: flex;
  gap: 12px;
}

.admin-stat-chip {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 20px;
  text-align: center;
}

.admin-stat-value {
  font-size: 1.1rem;
  font-weight: 700;
  display: block;
  background: linear-gradient(135deg, var(--primary) 0%, #5b6ee8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.admin-stat-label {
  font-size: 0.72rem;
  color: var(--text-light);
  font-weight: 500;
}

.admin-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  align-items: start;
}

/* Admin Sidebar */
.admin-sidebar {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: sticky;
  top: 96px;
}

.admin-sidebar-header {
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--border);
}

.admin-sidebar-header h3 {
  font-size: 0.95rem;
  font-weight: 700;
}

.admin-sidebar-header p {
  font-size: 0.78rem;
  color: var(--text-light);
}

.admin-lesson-list {
  padding: 8px 0;
  max-height: calc(100vh - 250px);
  overflow-y: auto;
}

.admin-sidebar-month {
  padding: 14px 20px 6px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-light);
}

.admin-sidebar-lesson {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 0.82rem;
  color: var(--text-light);
  cursor: pointer;
  transition: all var(--transition);
  border-left: 3px solid transparent;
}

.admin-sidebar-lesson:hover {
  background: var(--bg-alt);
  color: var(--text);
}

.admin-sidebar-lesson.active {
  background: var(--primary-light);
  color: var(--primary);
  border-left-color: var(--primary);
  font-weight: 600;
}

.admin-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.admin-dot.published {
  background: var(--success);
}

.admin-dot.draft {
  background: var(--border);
}

/* Admin Editor */
.admin-editor {
  min-width: 0;
}

.admin-editor-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.admin-editor-week {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--primary);
}

.admin-editor-actions {
  display: flex;
  gap: 10px;
}

.admin-editor-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.admin-editor-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
}

.admin-editor-card h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.admin-card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.admin-card-header-row h3 {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.admin-editor-card .form-group {
  margin-bottom: 16px;
}

.admin-editor-card select,
.admin-editor-card textarea {
  width: 100%;
  padding: 13px 16px;
  border: 2px solid var(--border);
  border-radius: 10px;
  font-size: 0.92rem;
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
  transition: all var(--transition);
  outline: none;
  resize: vertical;
}

.admin-editor-card select:focus,
.admin-editor-card textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

/* Video Preview */
.admin-video-preview {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #0b0f1c, #161b30);
  margin-top: 12px;
}

.admin-video-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.4);
  font-size: 0.9rem;
}

/* Section Blocks */
.admin-section-block {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-top: 14px;
  background: var(--bg-alt);
}

.admin-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.admin-section-header span {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.admin-section-remove {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: all var(--transition);
}

.admin-section-remove:hover {
  border-color: #ef4444;
  color: #ef4444;
  background: #fee2e2;
}

.admin-section-block input,
.admin-section-block textarea {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.88rem;
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: all var(--transition);
  margin-bottom: 8px;
}

.admin-section-block input:last-child,
.admin-section-block textarea:last-child {
  margin-bottom: 0;
}

.admin-section-block input:focus,
.admin-section-block textarea:focus {
  border-color: var(--primary);
}

/* Takeaway Rows */
.admin-takeaway-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.admin-takeaway-row input {
  flex: 1;
  padding: 10px 14px;
  border: 2px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.88rem;
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: all var(--transition);
}

.admin-takeaway-row input:focus {
  border-color: var(--primary);
}

/* Admin Tabs */
.admin-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px;
}

.admin-tab {
  flex: 1;
  padding: 12px 20px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-light);
  cursor: pointer;
  transition: all var(--transition);
}

.admin-tab:hover {
  color: var(--text);
  background: var(--bg-alt);
}

.admin-tab.active {
  background: linear-gradient(135deg, var(--primary) 0%, #5b6ee8 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(91, 110, 232, 0.3);
}

/* Admin Card Image Upload */
.admin-cards-grid {
  /* Match the student-facing course-cards-grid layout exactly so
     what the admin sees is what the student sees (true WYSIWYG). */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.admin-card-upload {
  display: flex;
  flex-direction: column;
  border: 1.5px solid rgba(15, 23, 42, 0.45);
  border-radius: 14px;
  overflow: hidden;
  background: #f4f1ea;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
[data-theme="dark"] .admin-card-upload {
  background: #1a1c28;
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.admin-card-preview {
  /* Match the public course card's aspect ratio so what the admin
     sees in the preview is what the student sees on course.html. */
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Body section under the image — mirrors student-side .course-card-body */
.admin-card-body {
  padding: 16px 18px 30px 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
  min-height: 76px;
  border-top: 1px solid var(--border);
  background: #f4f1ea;
}
[data-theme="dark"] .admin-card-body {
  background: #1a1c28;
}
.admin-card-body h3 {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: none;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--text);
}

.admin-card-preview.blue { background: linear-gradient(135deg, #0b1120 0%, #1e293b 55%, #312e81 100%); }
.admin-card-preview.amber { background: linear-gradient(135deg, #0b1120 0%, #1e293b 55%, #78350f 100%); }
.admin-card-preview.green { background: linear-gradient(135deg, #0b1120 0%, #1e293b 55%, #064e3b 100%); }
.admin-card-preview.purple { background: linear-gradient(135deg, #0b1120 0%, #1e293b 55%, #4c1d95 100%); }

.admin-card-preview-icon {
  position: absolute;
  bottom: 12px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #fff;
  outline: none;
  cursor: pointer;
  transition: all var(--transition);
  z-index: 3;
}

.admin-card-preview-icon:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.admin-card-preview-icon:focus {
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

.month-prefix-label {
  outline: none;
  cursor: text;
  padding: 2px 8px;
  border-radius: 6px;
  transition: all var(--transition);
  border: 1px dashed transparent;
  display: inline-block;
  min-width: 40px;
}

.month-prefix-label:hover {
  background: var(--primary-light);
  border-color: var(--primary);
}

.month-prefix-label:focus {
  background: var(--primary-light);
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-glow);
}

/* OAuth buttons */
.oauth-btn {
  transition: all var(--transition);
  position: relative;
}

.oauth-btn:hover {
  border-color: var(--primary) !important;
  background: var(--bg-alt) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.oauth-btn:active {
  transform: translateY(0);
}

.admin-card-preview-img {
  /* Fill the 16:9 box and cover-crop — identical to the public course
     card. Vertical pan is handled by object-position so what's
     visible always matches what the student will see. Cursor hints
     it's draggable. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  cursor: grab;
  border-radius: var(--radius) var(--radius) 0 0;
  user-select: none;
  -webkit-user-drag: none;
  transition: none;
}

.admin-card-preview-img:active {
  cursor: grabbing;
}

.admin-card-preview-img.dragging {
  cursor: grabbing;
}

.admin-card-preview::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%);
  border-radius: var(--radius) var(--radius) 0 0;
  pointer-events: none;
  z-index: 1;
}

.admin-card-remove-overlay {
  position: absolute;
  bottom: 8px;
  right: 54px;
  z-index: 3;
}

.admin-card-remove-overlay button {
  background: rgba(239, 68, 68, 0.9);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  backdrop-filter: blur(4px);
  transition: all var(--transition);
}

.admin-card-remove-overlay button:hover {
  background: rgba(220, 38, 38, 1);
}

.admin-card-upload-info {
  padding: 12px 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.admin-card-upload-info strong {
  font-size: 0.88rem;
}

.admin-card-upload-info .profile-avatar-upload {
  justify-content: center;
}

/* ===== COURSE CARDS — Skool-style compact grid ===== */
.course-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.course-card-link {
  display: flex;
  flex-direction: column;
  /* Warm off-white card surface — softer on the eyes than the rest
     of the page's pure white. Local to course cards only. */
  background: #f4f1ea;
  border: 1.5px solid rgba(15, 23, 42, 0.45);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  text-decoration: none;
  color: inherit;
  position: relative;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
[data-theme="dark"] .course-card-link {
  /* Warmer dark slate (less blue than --bg-alt) so the cards lift
     off the navy page the same way the cream cards lift off the
     warm-white page in light mode. */
  background: #1a1c28;
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.course-card-link:hover,
.admin-card-upload:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -10px rgba(15, 23, 42, 0.30);
}

.course-card-link:hover .course-card-arrow {
  transform: translateX(3px);
}

.course-card-link:hover .course-card-icon {
  transform: scale(1.08);
}

/* Card image/visual area — 16:9 aspect ratio */
.course-card-img {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.course-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.35) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* Course card placeholder gradients — sophisticated slate-navy base
   with a deep, muted accent in the corner. No more candy-bright fades. */
.course-card-img.blue {
  background: linear-gradient(135deg, #0b1120 0%, #1e293b 55%, #312e81 100%);
}

.course-card-img.amber {
  background: linear-gradient(135deg, #0b1120 0%, #1e293b 55%, #78350f 100%);
}

.course-card-img.green {
  background: linear-gradient(135deg, #0b1120 0%, #1e293b 55%, #064e3b 100%);
}

.course-card-img.purple {
  background: linear-gradient(135deg, #0b1120 0%, #1e293b 55%, #4c1d95 100%);
}

.course-card-icon {
  position: absolute;
  bottom: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  color: #fff;
  transition: transform 0.25s ease;
  z-index: 2;
}

.course-card-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(8px);
  color: #fff;
  padding: 3px 10px;
  border-radius: 50px;
  font-size: 0.68rem;
  font-weight: 700;
  z-index: 2;
  letter-spacing: 0.4px;
  border: 1px solid rgba(255,255,255,0.18);
}

/* Card body — tight Skool-style. Padding kept generous so the card
   keeps the same vertical footprint as when the phase pill was here.
   Title pinned to the top edge of the body section, right under the
   cover image, with a quiet indent from the left for a classy feel. */
.course-card-body {
  padding: 16px 18px 30px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
  min-height: 76px;
}

.course-card-tag {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 3px 8px;
  border-radius: 5px;
  margin-top: 6px;
  width: fit-content;
  font-family: 'Montserrat', sans-serif;
}

.course-card-tag.blue   { background: var(--primary-light); color: var(--primary); }
.course-card-tag.amber  { background: #fef3c7; color: #92400e; }
.course-card-tag.green  { background: #d1fae5; color: #065f46; }
.course-card-tag.purple { background: #eef0fe; color: #5b6ee8; }

[data-theme="dark"] .course-card-tag.amber  { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
[data-theme="dark"] .course-card-tag.green  { background: rgba(16, 185, 129, 0.15); color: #34d399; }
[data-theme="dark"] .course-card-tag.purple { background: rgba(139, 158, 255, 0.15); color: #c5cbf5; }

.course-card-body h3 {
  /* Montserrat — same body family the rest of the site uses. Quiet,
     modern, geometric. Sized small so the title sits cleanly under
     the cover image. */
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: none;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--text);
  /* Clamp to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-card-body p {
  font-size: 0.8rem;
  color: var(--text-light);
  line-height: 1.45;
  margin: 0 0 10px;
  /* Clamp to 2 lines for compact card */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  gap: 8px;
}

.course-card-lessons {
  font-size: 0.74rem;
  color: var(--text-light);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.course-card-arrow {
  font-size: 1rem;
  color: var(--primary);
  font-weight: 700;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

/* ===== PROFILE PAGE ===== */
.profile-page {
  padding: 100px 0 60px;
  min-height: 100vh;
  background: var(--bg-alt);
}

.profile-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  align-items: start;
}

/* Profile Sidebar */
.profile-sidebar {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  position: sticky;
  top: 96px;
}

.profile-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.profile-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, #5b6ee8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: 0 4px 15px rgba(91, 110, 232, 0.25);
}

.profile-avatar-initials {
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
}

.profile-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

.profile-avatar-upload {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-light);
  cursor: pointer;
  transition: all var(--transition);
  margin-bottom: 6px;
}

.profile-avatar-upload:hover {
  background: var(--primary);
  color: #fff;
}

.profile-avatar-remove {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.78rem;
  color: var(--text-light);
  cursor: pointer;
  padding: 4px 8px;
  transition: color var(--transition);
}

.profile-avatar-remove:hover {
  color: #ef4444;
}

.profile-sidebar-info {
  text-align: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.profile-sidebar-info h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.profile-sidebar-info p {
  font-size: 0.82rem;
  color: var(--text-light);
}

.profile-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-light);
  cursor: pointer;
  transition: all var(--transition);
}

.profile-nav-item:hover {
  background: var(--bg-alt);
  color: var(--text);
}

.profile-nav-item.active {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
}

.profile-nav-item span {
  font-size: 1.1rem;
  width: 24px;
  text-align: center;
}

/* Profile Content */
.profile-content {
  position: relative;
}

.profile-toast {
  position: fixed;
  top: 88px;
  right: 24px;
  background: #065f46;
  color: #d1fae5;
  padding: 14px 24px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  z-index: 1001;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.profile-section {
  display: none;
}

.profile-section.active {
  display: block;
  animation: fadeUp 0.3s ease;
}

.profile-section-header {
  margin-bottom: 32px;
}

.profile-section-header h2 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.profile-section-header p {
  color: var(--text-light);
  font-size: 0.92rem;
}

.profile-form {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
}

.profile-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.profile-form .form-group {
  margin-bottom: 18px;
}

.profile-form select,
.profile-form textarea {
  width: 100%;
  padding: 13px 16px;
  border: 2px solid var(--border);
  border-radius: 10px;
  font-size: 0.92rem;
  font-family: inherit;
  background: var(--bg);
  color: var(--text);
  transition: all var(--transition);
  outline: none;
  resize: vertical;
}

.profile-form select:focus,
.profile-form textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.profile-form-divider {
  height: 1px;
  background: var(--border);
  margin: 28px 0;
}

.profile-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

/* Toggle Switch */
.profile-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.profile-toggle-row:last-of-type {
  border-bottom: none;
}

.profile-toggle-row strong {
  font-size: 0.9rem;
  display: block;
  margin-bottom: 2px;
}

.profile-toggle-row p {
  font-size: 0.8rem;
  color: var(--text-light);
  margin: 0;
}

.toggle-switch {
  position: relative;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 26px;
  cursor: pointer;
  transition: all var(--transition);
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  left: 3px;
  transition: all var(--transition);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--primary);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(22px);
}

/* Progress Overview */
.progress-overview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.progress-overview-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
}

.progress-overview-value {
  font-size: 1.8rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary) 0%, #5b6ee8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 4px;
}

.progress-overview-label {
  font-size: 0.8rem;
  color: var(--text-light);
  font-weight: 500;
}

/* Progress Timeline */
.progress-timeline {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
}

.progress-timeline-item {
  display: flex;
  gap: 20px;
  padding-bottom: 28px;
  position: relative;
}

.progress-timeline-item:last-child {
  padding-bottom: 0;
}

.progress-timeline-item::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 28px;
  bottom: 0;
  width: 2px;
  background: var(--border);
}

.progress-timeline-item:last-child::before {
  display: none;
}

.progress-timeline-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 3px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: all var(--transition);
}

.progress-timeline-item.completed .progress-timeline-dot {
  border-color: var(--primary);
  background: var(--primary);
}

.progress-timeline-item.completed .progress-timeline-dot::after {
  content: '\2713';
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-timeline-item.completed::before {
  background: var(--primary);
}

.progress-timeline-content h4 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.progress-timeline-content p {
  font-size: 0.82rem;
  color: var(--text-light);
  margin-bottom: 6px;
}

.progress-timeline-status {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 50px;
  background: var(--bg-alt);
  color: var(--text-light);
}

.progress-timeline-item.completed .progress-timeline-status {
  background: var(--primary-light);
  color: var(--primary);
}

/* Nav Profile Avatar (logged in) */
.nav-profile-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border-radius: 50px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  transition: all var(--transition);
  text-decoration: none;
  color: var(--text);
}

.nav-profile-link:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.nav-profile-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, #5b6ee8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.nav-profile-avatar span {
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.nav-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nav-profile-name {
  font-size: 0.85rem;
  font-weight: 600;
}

/* ===== SEARCH OVERLAY ===== */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 120px;
}

.search-overlay.active { display: flex; }

.search-box {
  width: 100%;
  max-width: 560px;
  background: var(--bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  border: 1px solid var(--border);
}

.search-input-wrap {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  gap: 12px;
  border-bottom: 1px solid var(--border);
}

.search-input-wrap input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1rem;
  font-family: inherit;
  background: transparent;
  color: var(--text);
}

.search-input-wrap input::placeholder { color: var(--text-light); }

.search-icon { font-size: 1.1rem; color: var(--text-light); }
.search-close { cursor: pointer; font-size: 1.1rem; color: var(--text-light); background: none; border: none; }

.search-results {
  max-height: 360px;
  overflow-y: auto;
  padding: 8px;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  color: var(--text);
}

.search-result-item:hover { background: var(--bg-alt); }

.search-result-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.search-result-info h4 { font-size: 0.88rem; font-weight: 600; }
.search-result-info span { font-size: 0.75rem; color: var(--text-light); }

.search-empty {
  padding: 32px;
  text-align: center;
  color: var(--text-light);
  font-size: 0.9rem;
}

/* ===== GLOBAL SEARCH — group labels, highlight, avatars, hints ===== */
.search-box {
  max-width: 640px;
}
.search-results {
  max-height: min(60vh, 540px);
}
.search-group-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 14px 6px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-light);
}
.search-group-label:first-child { padding-top: 4px; }
.search-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-light);
}
.search-result-item.is-active {
  background: var(--bg-alt);
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.search-result-info mark {
  background: rgba(99, 91, 255, 0.18);
  color: inherit;
  padding: 0 1px;
  border-radius: 3px;
}
.search-result-icon-lesson   { background: rgba(99,91,255,.12);  color: #635bff; }
.search-result-icon-bonus    { background: rgba(251,191,36,.15); color: #d97706; }
.search-result-icon-post     { background: rgba(16,185,129,.15); color: #059669; }
.search-result-icon-ann      { background: rgba(236,72,153,.15); color: #db2777; }
.search-result-icon-resource { background: rgba(14,165,233,.15); color: #0284c7; }
.search-result-avatar {
  background: linear-gradient(135deg, #635bff, #8b5cf6);
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  overflow: hidden;
}
.search-result-avatar img { width: 100%; height: 100%; object-fit: cover; }

.search-empty-title {
  font-weight: 600;
  color: var(--text);
  font-size: 0.95rem;
  margin-bottom: 12px;
}
.search-empty-hint { font-size: 0.85rem; margin-top: 4px; }
.search-empty-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 10px 0 14px;
}
.search-empty-hints span {
  font-size: 0.72rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text-light);
}
.search-shortcut-hint {
  font-size: 0.75rem;
  color: var(--text-light);
  margin-top: 6px;
}
.search-shortcut-hint kbd {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
  color: var(--text);
}

[data-theme="dark"] .search-result-icon-lesson   { background: rgba(139,124,255,.18); color: #a8a4ff; }
[data-theme="dark"] .search-result-icon-bonus    { background: rgba(251,191,36,.18); color: #fcd34d; }
[data-theme="dark"] .search-result-icon-post     { background: rgba(52,211,153,.18); color: #6ee7b7; }
[data-theme="dark"] .search-result-icon-ann      { background: rgba(244,114,182,.18); color: #f9a8d4; }
[data-theme="dark"] .search-result-icon-resource { background: rgba(56,189,248,.18); color: #7dd3fc; }
[data-theme="dark"] .search-result-info mark { background: rgba(139,124,255,.28); }

/* ===== NOTIFICATIONS ===== */
.notif-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: #111827;               /* dark icon in light mode */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  transition: all var(--transition);
}
[data-theme="dark"] .notif-btn {
  color: #ffffff;               /* white icon in dark mode */
}

.notif-btn:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
}

.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notif-dropdown {
  position: absolute;
  top: 50px;
  right: 0;
  width: 320px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xl);
  z-index: 1001;
  display: none;
  overflow: hidden;
}

.notif-dropdown.active { display: block; }

.notif-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 0.9rem;
}

.notif-list { max-height: 280px; overflow-y: auto; }

.notif-item {
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--text-light);
  background: transparent;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
  font-family: inherit;
  transition: background var(--transition);
}

/* Buttons (clickable notifs) get a pointer cursor + active feedback */
button.notif-item.is-clickable {
  cursor: pointer;
}
button.notif-item.is-clickable:hover { background: var(--bg-alt); }
button.notif-item.is-clickable:active { background: var(--primary-light); }
button.notif-item.is-clickable:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--primary);
}
button.notif-item.is-clickable .notif-item-text strong::after {
  content: ' →';
  color: var(--primary);
  opacity: 0;
  transition: opacity var(--transition);
}
button.notif-item.is-clickable:hover .notif-item-text strong::after { opacity: 1; }

.notif-item:hover { background: var(--bg-alt); }
.notif-item.unread { background: var(--primary-light); }
[data-theme="dark"] .notif-item.unread { background: rgba(139, 158, 255, 0.10); }
.notif-item-icon { font-size: 1rem; flex-shrink: 0; margin-top: 2px; }
.notif-item-text { flex: 1; min-width: 0; }
.notif-item-text strong { display: block; color: var(--text); font-size: 0.82rem; line-height: 1.4; }
.notif-item-text span { font-size: 0.72rem; }

.notif-empty {
  padding: 24px;
  text-align: center;
  color: var(--text-light);
  font-size: 0.85rem;
}

/* ===== QUIZ ===== */
.quiz-section {
  margin-top: 32px;
  padding: 28px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.quiz-section h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.quiz-question {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.quiz-question:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.quiz-question p {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.quiz-options { display: flex; flex-direction: column; gap: 6px; }

.quiz-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 0.85rem;
  transition: all var(--transition);
  background: var(--bg);
}

.quiz-option:hover { border-color: var(--primary); }
.quiz-option.selected { border-color: var(--primary); background: var(--primary-light); }
.quiz-option.correct { border-color: var(--success); background: #d1fae5; }
.quiz-option.wrong { border-color: #ef4444; background: #fee2e2; }

.quiz-option input { display: none; }

.quiz-submit { margin-top: 16px; display: flex; align-items: center; gap: 12px; }

/* Admin Quiz Editor */
.admin-quiz-question {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 12px;
  background: var(--bg);
  position: relative;
}

.admin-quiz-question-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.admin-quiz-question-header span {
  font-weight: 600;
  font-size: 0.88rem;
}

.admin-quiz-option-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.admin-quiz-option-row input[type="text"] {
  flex: 1;
}

.admin-quiz-option-row input[type="radio"] {
  accent-color: var(--success);
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.admin-quiz-option-row .correct-label {
  font-size: 0.72rem;
  color: var(--success);
  font-weight: 600;
  white-space: nowrap;
}

.quiz-result {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
}

.quiz-result.pass { background: #d1fae5; color: #065f46; }
.quiz-result.fail { background: #fee2e2; color: #991b1b; }

/* ===== Q&A / COMMENTS ===== */
.qa-section {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 2px solid var(--border);
}

.qa-section h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.qa-form {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.qa-form textarea {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: 10px;
  font-size: 0.88rem;
  font-family: inherit;
  resize: vertical;
  min-height: 80px;
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color var(--transition);
}

.qa-form textarea:focus { border-color: var(--primary); }

.qa-comments { display: flex; flex-direction: column; gap: 16px; }

.qa-comment {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: var(--bg-alt);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.qa-comment-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--primary);
  flex-shrink: 0;
}

.qa-comment-body { flex: 1; }
.qa-comment-name { font-weight: 600; font-size: 0.85rem; }
.qa-comment-date { font-size: 0.72rem; color: var(--text-light); margin-left: 8px; }
.qa-comment-text { font-size: 0.85rem; margin-top: 4px; line-height: 1.6; color: var(--text-light); }

.qa-empty {
  text-align: center;
  padding: 24px;
  color: var(--text-light);
  font-size: 0.85rem;
}

/* ===== CERTIFICATE ===== */
.certificate-card {
  text-align: center;
  padding: 48px 32px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
}

.certificate-card.earned { border-color: var(--success); }

.certificate-icon { font-size: 4rem; margin-bottom: 16px; }
.certificate-card h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; }
.certificate-card p { color: var(--text-light); font-size: 0.9rem; margin-bottom: 24px; }

.certificate-progress {
  max-width: 300px;
  margin: 0 auto 24px;
}

.certificate-progress-bar {
  height: 10px;
  background: var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
}

.certificate-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--success));
  border-radius: 10px;
  transition: width 0.5s ease;
}

.certificate-progress-text { font-size: 0.8rem; color: var(--text-light); }

/* ===== STREAK ===== */
.streak-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-radius: var(--radius);
  margin-bottom: 24px;
}

[data-theme="dark"] .streak-card { background: linear-gradient(135deg, rgba(251,191,36,0.15), rgba(245,158,11,0.1)); }

.streak-fire { font-size: 2rem; }
.streak-info strong { font-size: 1.1rem; display: block; }
.streak-info span { font-size: 0.8rem; color: var(--text-light); }

/* ===== BOOKMARK ===== */
.bookmark-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px;
  transition: transform var(--transition);
  opacity: 0.4;
}

.bookmark-btn:hover { transform: scale(1.2); opacity: 0.7; }
.bookmark-btn.active { opacity: 1; }

/* ===== LOADING STATES ===== */
.btn.loading {
  pointer-events: none;
  opacity: 0.7;
}

.btn.loading::before {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-right: 8px;
}

.btn-outline.loading::before {
  border-color: rgba(91, 110, 232, 0.3);
  border-top-color: var(--primary);
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ===== SKELETON LOADER ===== */
.skeleton {
  background: linear-gradient(90deg, var(--bg-alt) 25%, var(--border) 50%, var(--bg-alt) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-title { height: 24px; width: 60%; margin-bottom: 16px; }
.skeleton-rect { height: 200px; margin-bottom: 16px; }

/* ===== PROGRESS BADGE ON COURSE CARDS ===== */
.course-card-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.68rem;
  color: var(--text-light);
}

.course-card-progress-bar {
  flex: 1;
  height: 3px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.course-card-progress-fill {
  height: 100%;
  background: var(--success);
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* ===== UNSAVED WARNING ===== */
.unsaved-banner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 12px 20px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  z-index: 1500;
  transition: transform 0.3s ease;
}

.unsaved-banner.visible { transform: translateX(-50%) translateY(0); }
.unsaved-banner .btn { padding: 8px 16px; font-size: 0.8rem; }

/* ===== 404 PAGE ===== */
.error-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
}

.error-page h1 { font-size: 6rem; font-weight: 700; color: var(--primary); margin-bottom: 8px; }
.error-page h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 12px; }
.error-page p { color: var(--text-light); margin-bottom: 28px; }

/* ===== LESSON CERTIFICATE BANNER ===== */
.lesson-cert-banner {
  margin-top: 48px;
  padding: 40px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #2563eb 0%, #5b6ee8 100%);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.lesson-cert-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.1) 0%, transparent 50%);
  pointer-events: none;
}

.lesson-cert-banner .cert-emoji {
  font-size: 3.5rem;
  margin-bottom: 16px;
  display: block;
}

.lesson-cert-banner h2 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 8px;
  border: none;
  padding: 0;
  color: #fff;
}

.lesson-cert-banner p {
  opacity: 0.9;
  font-size: 0.95rem;
  margin-bottom: 24px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.lesson-cert-banner .btn {
  background: #fff;
  color: #2563eb;
  font-weight: 700;
  padding: 14px 32px;
  font-size: 1rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  position: relative;
  z-index: 1;
}

.lesson-cert-banner .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}

/* ===== LESSON SECTION SEPARATORS ===== */
.lesson-body h2 {
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.lesson-body h2:first-child {
  padding-top: 0;
  border-top: none;
}

/* ===== ASSIGNMENTS ===== */
.assignment-section {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 2px solid var(--border);
}

.assignment-header {
  margin-bottom: 20px;
}

.assignment-header h2 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.assignment-header p {
  color: var(--text-light);
  font-size: 0.9rem;
  line-height: 1.6;
}

.assignment-dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 40px 24px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  background: var(--bg-alt);
  position: relative;
}

.assignment-dropzone:hover,
.assignment-dropzone.dragover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.assignment-dropzone-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
  display: block;
}

.assignment-dropzone-text {
  font-size: 0.9rem;
  color: var(--text-light);
  margin-bottom: 4px;
}

.assignment-dropzone-text strong {
  color: var(--primary);
  cursor: pointer;
}

.assignment-dropzone-hint {
  font-size: 0.75rem;
  color: var(--text-light);
  opacity: 0.7;
}

.assignment-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.assignment-files {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.assignment-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.85rem;
  transition: all var(--transition);
}

.assignment-file:hover {
  border-color: var(--primary-light);
}

.assignment-file-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.assignment-file-icon.image { background: #eef0fe; }
.assignment-file-icon.video { background: #eef0fe; }
.assignment-file-icon.pdf { background: #fee2e2; }
.assignment-file-icon.link { background: rgba(99, 91, 255, 0.15); color: var(--primary); }
[data-theme="dark"] .assignment-file-icon.link { background: rgba(139, 158, 255, 0.18); color: #c5cbf5; }

.assignment-file-name a {
  color: var(--primary);
  text-decoration: none;
  word-break: break-all;
}
.assignment-file-name a:hover { text-decoration: underline; }
[data-theme="dark"] .assignment-file-name a { color: #c5cbf5; }

/* OR divider between dropzone and link input */
.assignment-or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  color: var(--text-light);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.8px;
}
.assignment-or-divider::before,
.assignment-or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.assignment-or-divider span {
  padding: 0 4px;
}

/* Paste-a-link section */
.assignment-link-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-alt);
}
[data-theme="dark"] .assignment-link-section {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
}
.assignment-link-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.assignment-link-hint {
  font-weight: 400;
  color: var(--text-light);
  font-size: 0.78rem;
}
.assignment-link-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-wrap: wrap;
}
.assignment-link-row input[type="url"] {
  flex: 1;
  min-width: 200px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.assignment-link-row input[type="url"]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.18);
}
.assignment-link-row input[type="url"]::placeholder {
  color: var(--text-light);
}
.assignment-link-row .btn {
  white-space: nowrap;
}

.assignment-file-info {
  flex: 1;
  min-width: 0;
}

.assignment-file-name {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.assignment-file-size {
  font-size: 0.75rem;
  color: var(--text-light);
}

.assignment-file-remove {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  flex-shrink: 0;
}

.assignment-file-remove:hover {
  background: #fee2e2;
  color: #dc2626;
}

.assignment-submit {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.assignment-submit .btn {
  padding: 12px 28px;
}

.assignment-submitted {
  margin-top: 20px;
  padding: 20px 24px;
  background: #d1fae5;
  border: 1px solid #6ee7b7;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 12px;
}

[data-theme="dark"] .assignment-submitted {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.3);
}

.assignment-submitted-icon {
  font-size: 1.5rem;
}

.assignment-submitted-text strong {
  display: block;
  color: #065f46;
  font-size: 0.95rem;
}

[data-theme="dark"] .assignment-submitted-text strong {
  color: #6ee7b7;
}

.assignment-submitted-text span {
  font-size: 0.8rem;
  color: #047857;
}

[data-theme="dark"] .assignment-submitted-text span {
  color: #34d399;
}

.assignment-resubmit {
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 600;
  color: #047857;
  cursor: pointer;
  background: none;
  border: none;
  text-decoration: underline;
  font-family: inherit;
}

[data-theme="dark"] .assignment-resubmit {
  color: #34d399;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .hero .container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero-visual {
    max-width: 500px;
  }

  .features-grid,
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
  }

  .pricing-card.popular {
    transform: none;
  }

  .pricing-card.popular:hover {
    transform: translateY(-4px);
  }

  .instructor .container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .instructor-img {
    margin: 0 auto;
  }

  .instructor-stats {
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
  }

  .instructor-info .section-label {
    justify-content: center;
  }

  .course-hero .container {
    grid-template-columns: 1fr;
  }

  .enrollment-card {
    position: static;
  }

  /* Trusted-by: reformat instead of hiding */
  .trusted-by {
    padding: 40px 0;
  }

  .logo-strip {
    gap: 24px;
  }

  .logo-strip .brand-logo {
    font-size: 1.1rem;
  }

  /* Lesson sidebar: slide-out drawer */
  .sidebar-toggle {
    display: flex;
  }

  .lesson-layout {
    grid-template-columns: 1fr;
  }

  .lesson-sidebar {
    position: fixed;
    left: -320px;
    top: 72px;
    width: 300px;
    height: calc(100vh - 72px);
    z-index: 1001;
    transition: left 0.3s ease;
    box-shadow: none;
    border-right: 1px solid var(--border);
  }

  .lesson-sidebar.open {
    left: 0;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
  }

  .lesson-main {
    padding: 24px;
  }

  /* Profile page */
  .profile-layout {
    grid-template-columns: 1fr;
  }

  .profile-sidebar {
    position: static;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0 20px;
    padding: 24px;
  }

  .profile-avatar-section {
    grid-row: 1 / 3;
    margin-bottom: 0;
  }

  .profile-sidebar-info {
    text-align: left;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
    align-self: end;
  }

  .profile-sidebar-nav {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
  }

  .profile-nav-item {
    padding: 8px 14px;
    font-size: 0.82rem;
  }

  /* Admin panel */
  .admin-layout {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    position: static;
  }

  .admin-lesson-list {
    max-height: 300px;
  }

  /* Course cards */
  .course-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Course tabs: horizontal scroll */
  .course-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .course-tabs::-webkit-scrollbar {
    display: none;
  }

  .course-tab {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 14px 20px;
  }
}

@media (max-width: 768px) {
  /* === MOBILE NAV === */
  .nav-links {
    display: none;
  }

  .nav-links.mobile-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 16px 24px;
    gap: 8px;
    box-shadow: var(--shadow-md);
    z-index: 999;
  }

  .nav-links.mobile-open a::after {
    display: none;
  }

  .nav-links.mobile-open a {
    padding: 12px 16px;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 1rem;
    border-radius: 8px;
  }

  .nav-links.mobile-open a:hover,
  .nav-links.mobile-open a:active {
    background: var(--bg-alt);
  }

  /* Hamburger X animation */
  .hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .hamburger.active span:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  /* Show mobile CTA, hide desktop CTA */
  .nav-mobile-cta {
    display: list-item;
  }

  .nav-mobile-cta a {
    display: flex;
    text-align: center;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

  .nav-cta .btn-outline,
  .nav-cta .btn-primary {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  /* === HERO === */
  .hero {
    padding: 120px 0 60px;
  }

  .hero h1 {
    font-size: 2.2rem;
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-stats {
    gap: 20px;
    flex-wrap: wrap;
  }

  .hero-stat {
    min-width: 80px;
    flex: 1 1 auto;
    text-align: center;
  }

  .hero-card {
    max-width: 100%;
  }

  .hero-card-body {
    padding: 16px 20px;
  }

  .hero-card-header {
    padding: 18px 20px;
  }

  .floating-badge {
    display: none;
  }

  /* === TYPOGRAPHY === */
  .section-title {
    font-size: 1.7rem;
  }

  /* === GRIDS === */
  .features-grid,
  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  /* === MODULES === */
  .module-info h3 {
    font-size: 0.9rem;
    word-break: break-word;
  }

  .module-number {
    width: 36px;
    height: 36px;
    font-size: 0.8rem;
  }

  .module-header {
    padding: 16px;
  }

  .lesson-item {
    padding: 12px 16px 12px 56px;
    font-size: 0.85rem;
    min-height: 44px;
  }

  /* === LESSON PAGE === */
  .lesson-content h1 {
    font-size: 1.5rem;
  }

  .lesson-body h2 {
    font-size: 1.2rem;
  }

  .lesson-meta {
    flex-wrap: wrap;
    gap: 10px;
  }

  .lesson-meta span {
    padding: 4px 10px;
    background: var(--bg-alt);
    border-radius: 6px;
    font-size: 0.8rem;
  }

  .video-player {
    border-radius: 12px;
  }

  .play-btn {
    width: 60px;
    height: 60px;
    font-size: 1.4rem;
  }

  .key-takeaways {
    padding: 20px;
    margin: 24px 0;
  }

  .lesson-nav {
    flex-direction: column;
    gap: 12px;
  }

  .lesson-nav a {
    justify-content: center;
  }

  .sidebar-toggle {
    bottom: 20px;
    left: 20px;
  }

  /* === INSTRUCTOR === */
  .instructor-img {
    width: 260px;
    height: 260px;
    font-size: 4rem;
  }
  .outcome-carousel {
    width: 260px;
    height: 260px;
  }

  .instructor-info h2 {
    font-size: 1.5rem;
  }

  .instructor-stats {
    gap: 12px;
  }

  .instructor-stat {
    min-width: 80px;
    padding: 12px 14px;
  }

  .instructor-stat strong {
    font-size: 1.1rem;
  }

  /* === FOOTER === */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  /* === CTA === */
  .cta h2 {
    font-size: 1.8rem;
  }

  /* === NEWSLETTER === */
  .newsletter-form {
    flex-direction: column;
  }

  .newsletter-form input {
    width: 100%;
    padding: 14px 16px;
    font-size: 1rem;
  }

  .newsletter-form .btn {
    width: 100%;
    justify-content: center;
    padding: 14px;
  }

  /* === TRUSTED BY === */
  .trusted-by {
    padding: 30px 0;
  }

  .logo-strip {
    gap: 16px;
  }

  .logo-strip .brand-logo {
    font-size: 0.95rem;
  }

  /* === ADMIN PANEL === */
  .admin-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .admin-tabs {
    flex-direction: column;
  }

  .admin-cards-grid {
    grid-template-columns: 1fr;
  }

  .admin-editor-topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-editor-actions {
    justify-content: stretch;
  }

  .admin-editor-actions .btn {
    flex: 1;
    justify-content: center;
  }

  .admin-editor-card {
    padding: 20px;
  }

  .admin-card-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* === COURSE CARDS === */
  .course-cards-grid {
    grid-template-columns: 1fr;
  }

  .course-card-img {
    height: 150px;
  }

  .course-card-icon {
    font-size: 1rem;
    width: 36px;
    height: 36px;
  }

  .course-card-body {
    padding: 20px;
  }

  /* === PROFILE PAGE === */
  .profile-sidebar {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .profile-sidebar-info {
    text-align: center;
  }

  .profile-sidebar-nav {
    justify-content: center;
  }

  .profile-form-grid {
    grid-template-columns: 1fr;
  }

  .progress-overview {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .profile-form {
    padding: 24px;
  }

  .profile-form-actions {
    flex-direction: column;
  }

  .profile-form-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .profile-section-header h2 {
    font-size: 1.3rem;
  }

  /* === COURSE HERO === */
  .course-hero h1 {
    font-size: 1.8rem;
  }

  .course-stats {
    gap: 10px;
  }

  .course-stat {
    font-size: 0.8rem;
    padding: 5px 10px;
  }

  /* === STICKY BAR === */
  .sticky-bar .container {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  /* === BACK TO TOP === */
  .back-to-top {
    bottom: 80px;
  }
}

@media (max-width: 480px) {
  /* === AUTH === */
  .auth-card {
    padding: 32px 24px;
  }

  .auth-social {
    flex-direction: column;
  }

  .auth-card h1 {
    font-size: 1.3rem;
  }

  /* === CONTAINER === */
  .container {
    padding: 0 16px;
  }

  /* === HERO === */
  .hero {
    padding: 110px 0 48px;
  }

  .hero h1 {
    font-size: 1.8rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .hero-badge {
    font-size: 0.75rem;
    padding: 6px 14px;
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
  }

  .hero-stats {
    gap: 16px;
  }

  .hero-stat strong {
    font-size: 1.3rem;
  }

  /* === SECTION TYPOGRAPHY === */
  .section-title {
    font-size: 1.4rem;
  }

  .section-desc {
    font-size: 0.95rem;
  }

  .section-label {
    font-size: 0.72rem;
  }

  /* === FEATURE CARDS === */
  .feature-card {
    padding: 24px;
  }

  .feature-card h3 {
    font-size: 1rem;
  }

  /* === TESTIMONIALS === */
  .testimonial-card {
    padding: 24px;
  }

  .testimonial-card blockquote {
    font-size: 0.88rem;
  }

  /* === CTA === */
  .cta {
    padding: 60px 0;
  }

  .cta h2 {
    font-size: 1.5rem;
  }

  .cta p {
    font-size: 0.95rem;
  }

  /* === FOOTER: 1 column === */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer {
    padding: 48px 0 24px;
  }

  /* === COURSE HERO === */
  .course-hero {
    padding: 100px 0 40px;
  }

  .course-hero h1 {
    font-size: 1.5rem;
  }

  .course-stats {
    gap: 8px;
  }

  .course-stat {
    font-size: 0.75rem;
    padding: 4px 8px;
  }

  /* === COURSE TABS === */
  .course-tab {
    padding: 10px 16px;
    font-size: 0.85rem;
  }

  /* === MODULE ITEMS === */
  .module-header {
    padding: 14px 12px;
  }

  .module-header-left {
    gap: 10px;
  }

  .module-info h3 {
    font-size: 0.85rem;
  }

  .module-info span {
    font-size: 0.72rem;
  }

  /* === LESSON PAGE === */
  .lesson-main {
    padding: 16px;
  }

  .lesson-content h1 {
    font-size: 1.3rem;
  }

  .lesson-body h2 {
    font-size: 1.1rem;
  }

  .lesson-meta span {
    font-size: 0.75rem;
  }

  .lesson-complete-btn {
    font-size: 0.9rem;
    padding: 14px;
  }

  .lesson-breadcrumb {
    font-size: 0.72rem;
    flex-wrap: wrap;
  }

  /* === NEWSLETTER === */
  .newsletter {
    padding: 48px 0;
  }

  /* === TRUSTED BY === */
  .trusted-by p {
    font-size: 0.72rem;
    margin-bottom: 16px;
  }

  .logo-strip .brand-logo {
    font-size: 0.85rem;
  }

  /* === BACK TO TOP === */
  .back-to-top {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 1rem;
  }

  /* === SIDEBAR TOGGLE === */
  .sidebar-toggle {
    padding: 10px 16px;
    font-size: 0.85rem;
  }

  /* === INSTRUCTOR === */
  .instructor {
    padding: 60px 0;
  }

  .instructor-img {
    width: 220px;
    height: 220px;
    font-size: 3.5rem;
  }
  .outcome-carousel {
    width: 220px;
    height: 220px;
  }

  .instructor-info h2 {
    font-size: 1.3rem;
  }

  .instructor-stats {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .instructor-stat {
    flex: 1 1 70px;
    min-width: 70px;
    padding: 10px 8px;
  }
}

@media (max-width: 360px) {
  .hero h1 {
    font-size: 1.5rem;
  }

  .section-title {
    font-size: 1.25rem;
  }

  .hero-stats {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  .hero-stat {
    text-align: center;
  }

  .course-hero h1 {
    font-size: 1.3rem;
  }

  .cta h2 {
    font-size: 1.3rem;
  }

  .auth-card {
    padding: 24px 16px;
  }

  .nav-links.mobile-open {
    padding: 12px 16px;
  }

  .sidebar-toggle-label {
    display: none;
  }

  .sidebar-toggle {
    padding: 12px;
    border-radius: 50%;
  }

  .logo {
    font-size: 1rem;
  }

  .logo-icon {
    width: 36px;
    height: 36px;
  }

  .lesson-content h1 {
    font-size: 1.15rem;
  }
}

/* ============================================================
   COMMUNITY FEED + BIG WINS (Home tab)
   ============================================================ */
.dash-community-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
.community-feed-card,
.wins-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

/* ----- Post composer ----- */
.post-composer {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.post-composer-avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b9eff, #5b6ee8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  overflow: hidden;
}
.post-composer-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-composer-body {
  flex: 1;
  min-width: 0;
}
.post-composer-body textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 0.92rem;
  resize: none;
  background: var(--bg-alt);
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.post-composer-body textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(91, 110, 232, 0.12);
}
.post-composer-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.post-char-count {
  font-size: 0.78rem;
  color: var(--text-light);
}
.post-composer-footer .btn {
  padding: 8px 18px;
  font-size: 0.85rem;
}

/* ----- Post list ----- */
.post-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 540px;
  overflow-y: auto;
  padding-right: 4px;
}
.post-list::-webkit-scrollbar { width: 6px; }
.post-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.post-item {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: var(--bg-alt);
  border-radius: 12px;
  border: 1px solid var(--border);
  position: relative;
  transition: border-color 0.2s ease;
}
.post-item:hover { border-color: rgba(91, 110, 232, 0.3); }
.post-avatar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b9eff, #5b6ee8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
  overflow: hidden;
}
.post-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-body {
  flex: 1;
  min-width: 0;
}
.post-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.post-meta strong {
  font-size: 0.88rem;
  color: var(--text);
}
.post-meta time {
  font-size: 0.75rem;
  color: var(--text-light);
}
.post-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.post-delete-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.post-item:hover .post-delete-btn { opacity: 1; }
.post-delete-btn:hover {
  background: #fee2e2;
  color: #991b1b;
}
[data-theme="dark"] .post-delete-btn:hover {
  background: rgba(220, 38, 38, 0.2);
  color: #fca5a5;
}
.post-empty,
.wins-empty {
  text-align: center;
  padding: 36px 16px;
  color: var(--text-light);
}
.post-empty-icon,
.wins-empty-icon {
  margin-bottom: 12px;
  color: var(--primary);
  opacity: 0.6;
  font-size: 2rem;
  line-height: 1;
}
.post-empty p,
.wins-empty p {
  margin: 0;
  font-size: 0.9rem;
}

/* ----- Wins ----- */
.win-composer {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.win-composer input,
.win-composer textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.9rem;
  background: var(--bg);
  color: var(--text);
  resize: none;
}
.win-composer input:focus,
.win-composer textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(91, 110, 232, 0.12);
}
.win-composer-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.btn-sm {
  padding: 8px 16px;
  font-size: 0.82rem;
}
.wins-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 540px;
  overflow-y: auto;
  padding-right: 4px;
}
.wins-list::-webkit-scrollbar { width: 6px; }
.wins-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.win-item {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.06), rgba(91, 110, 232, 0.05));
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 12px;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
[data-theme="dark"] .win-item {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(91, 110, 232, 0.12));
}
.win-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -8px rgba(91, 110, 232, 0.3);
}
.win-trophy {
  flex-shrink: 0;
  font-size: 1.6rem;
  line-height: 1.2;
  filter: drop-shadow(0 2px 4px rgba(251, 191, 36, 0.4));
}
.win-body {
  flex: 1;
  min-width: 0;
}
.win-body h4 {
  margin: 0 0 4px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}
.win-body p {
  margin: 0 0 8px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-light);
}
.win-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 0.74rem;
  color: var(--text-light);
}
.win-author { font-weight: 600; }
.win-delete-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card-bg, var(--bg));
  color: var(--text-light);
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  /* Always visible (was opacity:0 + hover-only — invisible on mobile and
     with tall image posts where you can't reach the corner without
     scrolling past the X). */
  opacity: 1;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.win-delete-btn:hover {
  background: #fee2e2;
  border-color: #ef4444;
  color: #991b1b;
  transform: scale(1.05);
}
[data-theme="dark"] .win-delete-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

/* Stack on mobile */
@media (max-width: 900px) {
  .dash-community-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   EVENTS PAGE
   ============================================================ */
.events-page {
  padding: 100px 0 80px;
  min-height: 60vh;
}
.events-hero {
  text-align: center;
  margin-bottom: 32px;
}
.events-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--primary);
  margin-bottom: 12px;
}
.events-hero h1 {
  font-size: clamp(2rem, 4.4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.events-hero-sub {
  font-size: 1rem;
  color: var(--text-light);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.6;
}
.events-filters {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.events-filter {
  padding: 10px 22px;
  border-radius: 50px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-light);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.events-filter:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.events-filter.active {
  background: linear-gradient(135deg, var(--primary), #5b6ee8);
  color: #fff;
  border-color: transparent;
}
.events-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 780px;
  margin: 0 auto;
}
.event-card {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 22px 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgba(91, 110, 232, 0.25);
  border-color: rgba(91, 110, 232, 0.35);
}
.event-date-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(139, 158, 255, 0.1), rgba(91, 110, 232, 0.12));
  border: 1px solid rgba(91, 110, 232, 0.2);
  border-radius: 14px;
  padding: 14px 8px;
  min-width: 76px;
}
.event-month {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--primary);
}
.event-day {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--text);
  margin-top: 2px;
}
.event-body { min-width: 0; }
.event-type-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.event-type-badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 50px;
  background: var(--primary-light);
  color: var(--primary);
}
.event-type-badge.workshop { background: rgba(139, 158, 255, 0.12); color: #2563eb; }
.event-type-badge.masterclass { background: rgba(251, 191, 36, 0.16); color: #b45309; }
.event-type-badge.qna { background: rgba(34, 197, 94, 0.14); color: #15803d; }
.event-type-badge.deadline { background: rgba(232, 121, 168, 0.12); color: #be123c; }
.event-time {
  font-size: 0.78rem;
  color: var(--text-light);
}
.event-body h3 {
  margin: 0 0 6px;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--text);
}
.event-body p {
  margin: 0 0 8px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-light);
}
.event-location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-light);
}
.event-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}
.events-empty {
  text-align: center;
  padding: 80px 24px;
  border: 1px dashed var(--border);
  border-radius: 16px;
  background: var(--bg);
}
.events-empty-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--primary);
  opacity: 0.6;
}
.events-empty h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.events-empty p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-light);
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 700px) {
  .event-card {
    grid-template-columns: 64px 1fr;
    grid-template-rows: auto auto;
  }
  .event-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: flex-end;
  }
}

/* ============================================================
   FACEBOOK-STYLE FEED (Home page)
   ============================================================ */
.feed-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  /* Sage forest with warm terracotta highlight on the right */
  background:
    radial-gradient(ellipse at 90% 50%, rgba(232, 121, 168, 0.40) 0%, transparent 60%),
    linear-gradient(135deg, #5b6ee8 0%, #3f51c2 100%);
  border-radius: 16px;
  margin-bottom: 20px;
  color: #ffffff;
  box-shadow: 0 8px 24px -10px rgba(91, 110, 232, 0.45);
}
.feed-welcome-text { min-width: 0; }
.feed-welcome-text h1 {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.feed-welcome-text p {
  margin: 0;
  font-size: 0.86rem;
  opacity: 0.92;
}
.feed-continue-btn {
  background: #fff !important;
  color: var(--primary-dark) !important;
  font-size: 0.85rem;
  padding: 10px 18px;
  flex-shrink: 0;
  white-space: nowrap;
}
.feed-continue-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* Marketing Intern Graduate banner — appears when all 16 lessons are
   complete. Sits at the very top of the feed so the celebration is the
   first thing the student sees. Same dark slate-navy palette family as
   the quote card so the dashboard reads as one cohesive surface. */
.graduate-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, #064e3b 0%, #0f172a 50%, #1e1b4b 100%);
  color: #f1f5f9;
  border: 1px solid rgba(16, 185, 129, 0.30);
  box-shadow: 0 12px 32px -14px rgba(15, 23, 42, 0.6);
  overflow: hidden;
}
.graduate-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% 18%, rgba(16, 185, 129, 0.22) 0%, transparent 45%),
    radial-gradient(circle at 0% 100%, rgba(99, 91, 255, 0.14) 0%, transparent 55%);
  pointer-events: none;
}
.graduate-banner > * { position: relative; z-index: 1; }
.graduate-banner-icon {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: rgba(16, 185, 129, 0.22);
  border: 1px solid rgba(52, 211, 153, 0.40);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #34d399;
}
.graduate-banner-body { flex: 1; min-width: 0; }
.graduate-banner-eyebrow {
  margin: 0 0 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: #34d399;
}
.graduate-banner h2 {
  margin: 0 0 4px;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #fff;
}
.graduate-banner-sub {
  margin: 0;
  font-size: 0.88rem;
  color: #cbd5e1;
}
.graduate-banner-btn {
  flex-shrink: 0;
  background: #10b981;
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #fff;
  padding: 11px 18px;
  font-weight: 700;
}
.graduate-banner-btn:hover {
  background: #059669;
  transform: translateY(-1px);
}
@media (max-width: 600px) {
  .graduate-banner {
    flex-wrap: wrap;
    padding: 18px 18px 20px;
  }
  .graduate-banner-btn { width: 100%; justify-content: center; }
}

/* Motivational quote card — sits above the composer on Feed.
   Deep slate-navy gradient with a subtle indigo accent for a
   sophisticated, executive-feeling banner (no candy colors). */
.quote-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px;
  margin-bottom: 18px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #1e1b4b 100%);
  color: #f1f5f9;
  border: 1px solid rgba(99, 91, 255, 0.18);
  box-shadow: 0 10px 28px -14px rgba(15, 23, 42, 0.6);
  overflow: hidden;
}
.quote-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% 18%, rgba(99, 91, 255, 0.20) 0%, transparent 45%),
    radial-gradient(circle at 0% 100%, rgba(99, 91, 255, 0.10) 0%, transparent 55%);
  pointer-events: none;
}
/* Thin accent bar on the left edge to anchor it visually */
.quote-card::after {
  content: '';
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 14%;
  width: 3px;
  background: linear-gradient(180deg, #635bff 0%, #8b9eff 100%);
  border-radius: 0 3px 3px 0;
  pointer-events: none;
}
.quote-card-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(99, 91, 255, 0.18);
  border: 1px solid rgba(139, 158, 255, 0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c7d2fe;
  position: relative;
  z-index: 1;
}
.quote-card-body {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.quote-card.is-swapping .quote-card-body {
  opacity: 0;
  transform: translateY(-4px);
}
.quote-card-eyebrow {
  margin: 0 0 8px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: #a5b4fc;
}
.quote-card-text {
  margin: 0 0 8px;
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.55;
  color: #f1f5f9;
  font-style: italic;
  letter-spacing: -0.005em;
}
.quote-card-author {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.2px;
}
.quote-card-refresh {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(255, 255, 255, 0.04);
  color: #cbd5e1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), transform var(--transition), border-color var(--transition);
  position: relative;
  z-index: 1;
}
.quote-card-refresh:hover {
  background: rgba(99, 91, 255, 0.20);
  border-color: rgba(139, 158, 255, 0.45);
  color: #fff;
  transform: rotate(120deg);
}
.quote-card-refresh:active {
  transform: rotate(180deg);
}

/* Mobile — slightly tighter padding on small screens */
@media (max-width: 600px) {
  .quote-card {
    padding: 16px 18px;
    gap: 12px;
  }
  .quote-card-icon {
    width: 38px;
    height: 38px;
  }
  .quote-card-text {
    font-size: 0.98rem;
  }
}

/* Facebook-style composer card */
.fb-composer-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.fb-composer-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.fb-composer-trigger {
  flex: 1;
  text-align: left;
  background: var(--bg-alt);
  border: none;
  border-radius: 50px;
  padding: 12px 18px;
  color: var(--text-light);
  cursor: pointer;
  font-size: 0.95rem;
  font-family: inherit;
  transition: background 0.18s ease;
}
.fb-composer-trigger:hover {
  background: var(--border);
}
.fb-composer-expanded {
  margin-top: 12px;
}
.fb-composer-expanded textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 0.95rem;
  resize: none;
  background: var(--bg-alt);
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.fb-composer-expanded textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(91, 110, 232, 0.12);
}
.fb-composer-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.fb-composer-actions {
  display: flex;
  gap: 8px;
}

/* Facebook-style post cards (no max-height scroll, breathing room) */
.fb-post-list {
  max-height: none !important;
  overflow-y: visible !important;
  padding-right: 0 !important;
  gap: 14px;
}
.fb-post-list .post-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.fb-post-list .post-item:hover {
  border-color: rgba(91, 110, 232, 0.3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.fb-post-list .post-avatar {
  width: 42px;
  height: 42px;
  font-size: 0.9rem;
}
.fb-post-list .post-meta strong { font-size: 0.95rem; }
.fb-post-list .post-text {
  font-size: 0.95rem;
  margin-top: 6px;
}

/* ============================================================
   DASHBOARD SIDEBAR LAYOUT (Home page)
   ============================================================ */
.dash-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}
.dash-sidebar {
  position: sticky;
  top: 92px;
  align-self: start;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 12px;
  box-shadow: var(--shadow-sm);
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}
.dash-sidebar-close {
  display: none;
}
.dash-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dash-sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  color: var(--text);
  font-weight: 500;
  font-size: 0.92rem;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  position: relative;
}
.dash-sidebar-link svg {
  flex-shrink: 0;
  color: var(--text-light);
  transition: color 0.18s ease;
}
.dash-sidebar-link span:not(.sidebar-badge) {
  flex: 1;
  min-width: 0;
}
.dash-sidebar-link:hover {
  background: var(--bg-alt);
  color: var(--primary);
}
.dash-sidebar-link:hover svg { color: var(--primary); }
.dash-sidebar-link.active {
  background: linear-gradient(135deg, rgba(139, 158, 255, 0.12), rgba(91, 110, 232, 0.14));
  color: var(--primary);
  font-weight: 700;
}
.dash-sidebar-link.active svg { color: var(--primary); }
.sidebar-badge {
  background: var(--primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 50px;
  min-width: 22px;
  text-align: center;
}

/* Online-count variant — green pill so it reads instantly as "X people are here now" */
.sidebar-badge.sidebar-badge-online {
  background: #10b981;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.sidebar-badge.sidebar-badge-online::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px #fff;
}

/* ===== Members panel ===== */
.members-section {
  margin-bottom: 32px;
}
.members-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.members-section-head h2 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.members-section-count {
  background: var(--bg-alt);
  color: var(--text-light);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 50px;
  border: 1px solid var(--border);
}
.members-online-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
  flex-shrink: 0;
  animation: members-pulse 2s ease-in-out infinite;
}
@keyframes members-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.05); }
}

.members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.member-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-alt);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.member-card:hover {
  transform: translateY(-1px);
  border-color: var(--primary);
  box-shadow: 0 6px 18px -10px rgba(99, 91, 255, 0.4);
}
.member-card.is-online {
  border-color: rgba(16, 185, 129, 0.45);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.05) 0%, var(--bg-alt) 100%);
}
[data-theme="dark"] .member-card.is-online {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.10) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.member-avatar {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: visible;
  flex-shrink: 0;
}
.member-avatar img,
.member-avatar .member-initials {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 700;
  font-size: 0.95rem;
  object-fit: cover;
}
[data-theme="dark"] .member-avatar .member-initials {
  background: rgba(139, 158, 255, 0.18);
  color: #c5cbf5;
}
.member-online-indicator {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid var(--bg-alt);
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.35);
}

.member-info {
  flex: 1;
  min-width: 0;
}
.member-name {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}
.member-status {
  font-size: 0.78rem;
  color: var(--text-light);
  margin-top: 2px;
}
.member-card.is-online .member-status {
  color: #059669;
  font-weight: 600;
}
[data-theme="dark"] .member-card.is-online .member-status {
  color: #34d399;
}

.member-role-badge {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--primary-light);
  color: var(--primary);
}
[data-theme="dark"] .member-role-badge {
  background: rgba(139, 158, 255, 0.18);
  color: #c5cbf5;
}

.members-empty {
  grid-column: 1 / -1;
  padding: 24px 16px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--bg-alt);
}

/* Mobile: hidden sidebar w/ slide-in drawer + toggle */
.dash-sidebar-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  margin-bottom: 16px;
  width: fit-content;
}
.dash-sidebar-toggle:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.dash-main {
  min-width: 0;
  max-width: 720px;
  width: 100%;
}
.dash-panel {
  display: none;
  animation: panelFade 0.25s ease-out;
}
.dash-panel.active { display: block; }
@keyframes panelFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dash-panel-header {
  margin-bottom: 24px;
}
.dash-panel-header h1 {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.dash-panel-header p {
  font-size: 0.95rem;
  color: var(--text-light);
  margin: 0;
}
.dash-empty {
  text-align: center;
  padding: 60px 24px;
  border: 1px dashed var(--border);
  border-radius: 16px;
  color: var(--text-light);
}

/* ----- Announcements ----- */
.ann-composer {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ann-composer input,
.ann-composer textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.9rem;
  background: var(--bg);
  color: var(--text);
  resize: none;
}
.ann-composer input:focus,
.ann-composer textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(91, 110, 232, 0.12);
}
.ann-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}
.ann-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 26px;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  /* Long URLs and other unbreakable strings shouldn't punch out of
     the card. anywhere lets the browser break inside words when
     there's no whitespace to wrap on. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ann-item:hover {
  border-color: rgba(91, 110, 232, 0.4);
  box-shadow: 0 6px 20px -10px rgba(91, 110, 232, 0.25);
}
.ann-item.pinned {
  border-left: 4px solid var(--primary);
  background: linear-gradient(135deg, rgba(91, 110, 232, 0.05), transparent 70%);
}
.ann-pin-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--primary-light);
  padding: 3px 8px;
  border-radius: 50px;
  margin-bottom: 10px;
}
.ann-item h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 10px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text);
}
.ann-item p {
  font-size: 0.93rem;
  line-height: 1.65;
  color: var(--text);
  margin: 0 0 14px;
  white-space: pre-wrap;
}
.ann-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-light);
}
.ann-meta span { font-weight: 600; }
.ann-delete-btn,
.faq-delete-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
  font-size: 1.2rem;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.ann-item:hover .ann-delete-btn,
.faq-item:hover .faq-delete-btn {
  opacity: 1;
}
.ann-delete-btn:hover,
.faq-delete-btn:hover {
  background: rgba(220, 38, 38, 0.15);
  color: #991b1b;
}

/* ----- FAQ ----- */
.faq-composer {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.faq-composer input,
.faq-composer textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.9rem;
  background: var(--bg);
  color: var(--text);
  resize: none;
}
.faq-composer input:focus,
.faq-composer textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(91, 110, 232, 0.12);
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.faq-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  position: relative;
  transition: border-color 0.2s ease;
}
.faq-item:hover { border-color: rgba(91, 110, 232, 0.3); }
.faq-item summary {
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  list-style: none;
  padding-right: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--primary);
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { content: '−'; }
.faq-answer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-light);
}

/* ----- Chat ----- */
.chat-window {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 14px;
  height: 60vh;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-top: 16px;
}
.chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: var(--text-light);
}
.chat-empty-icon {
  margin-bottom: 12px;
  color: var(--primary);
  opacity: 0.5;
}
.chat-empty p { margin: 0; font-size: 0.92rem; }
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.chat-messages::-webkit-scrollbar { width: 8px; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.chat-group {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.chat-group.mine {
  flex-direction: row-reverse;
}
.chat-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b9eff, #5b6ee8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.78rem;
  overflow: hidden;
}
.chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chat-bubbles {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 75%;
}
.chat-group.mine .chat-bubbles {
  align-items: flex-end;
}
.chat-name {
  font-size: 0.74rem;
  color: var(--text-light);
  margin-bottom: 2px;
  font-weight: 600;
}
.chat-name time {
  margin-left: 6px;
  font-weight: 400;
  opacity: 0.7;
}
.chat-bubble {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 9px 14px;
  border-radius: 14px;
  border-top-left-radius: 6px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text);
  word-wrap: break-word;
  white-space: pre-wrap;
  position: relative;
  max-width: 100%;
}
.chat-group.mine .chat-bubble {
  background: linear-gradient(135deg, #8b9eff, #5b6ee8);
  color: #fff;
  border: none;
  border-top-right-radius: 6px;
  border-top-left-radius: 14px;
}
.chat-delete-btn {
  position: absolute;
  top: 2px;
  right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 0.95rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.chat-bubble:hover .chat-delete-btn { opacity: 0.6; }
.chat-delete-btn:hover { opacity: 1; }
.chat-composer {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.chat-composer input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 0.92rem;
  background: var(--bg);
  color: var(--text);
}
.chat-composer input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(91, 110, 232, 0.12);
}
.chat-composer .btn {
  padding: 10px 22px;
}

/* @mention autocomplete dropdown — sits above the chat input */
.chat-mention-dropdown {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  max-width: 320px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.18), 0 4px 10px -4px rgba(15, 23, 42, 0.08);
  padding: 4px;
  z-index: 50;
}
[data-theme="dark"] .chat-mention-dropdown {
  background: #161b30;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.6);
}
.chat-mention-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--text);
  transition: background 0.12s ease;
}
.chat-mention-item:hover,
.chat-mention-item.is-active {
  background: var(--primary-light);
}
[data-theme="dark"] .chat-mention-item:hover,
[data-theme="dark"] .chat-mention-item.is-active {
  background: rgba(139, 158, 255, 0.15);
}
.chat-mention-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 700;
  font-size: 0.72rem;
}
[data-theme="dark"] .chat-mention-avatar {
  background: rgba(139, 158, 255, 0.18);
  color: #c5cbf5;
}
.chat-mention-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chat-mention-name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mention pill rendered inside chat bubbles */
.chat-mention {
  display: inline;
  padding: 1px 6px;
  margin: 0 1px;
  border-radius: 6px;
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
  white-space: nowrap;
}
[data-theme="dark"] .chat-mention {
  background: rgba(139, 158, 255, 0.22);
  color: #c5cbf5;
}
/* Slightly different shade when the mention is inside the user's own bubble */
.chat-message.mine .chat-mention {
  background: rgba(255, 255, 255, 0.20);
  color: #fff;
}

/* Mobile sidebar drawer */
@media (max-width: 900px) {
  .dash-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .dash-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 80vw;
    max-height: 100vh;
    border-radius: 0;
    border-right: 1px solid var(--border);
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(.4, 0, .2, 1);
    z-index: 100;
    padding-top: 60px;
  }
  .dash-sidebar.is-open {
    transform: translateX(0);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  }
  .dash-sidebar-close {
    display: flex;
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    line-height: 1;
  }
  .dash-sidebar-toggle {
    display: inline-flex;
  }
  .dash-sidebar.is-open + .dash-sidebar-toggle::before,
  .dash-sidebar.is-open ~ * .dash-sidebar-overlay,
  body:has(.dash-sidebar.is-open)::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99;
    cursor: pointer;
  }
}

/* ============================================================
   ADMIN STUDENTS TABLE
   ============================================================ */
.students-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.students-table thead th {
  text-align: left;
  font-weight: 700;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-light);
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
  white-space: nowrap;
}
.students-table tbody td {
  padding: 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text);
}
.students-table tbody tr:hover {
  background: var(--bg-alt);
}
.students-table code {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.82rem;
  color: var(--text-light);
}
.students-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}
[data-theme="dark"] .students-avatar { color: var(--bg); }
/* Real profile picture variant — same footprint as the initials badge but
   renders the actual uploaded photo. object-fit:cover keeps non-square
   uploads from stretching. */
.students-avatar-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  display: block;
}

.role-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 50px;
}
.role-badge.student {
  background: var(--primary-light);
  color: var(--primary);
}
.role-badge.admin {
  background: rgba(232, 121, 168, 0.18);
  color: var(--accent);
}

.students-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 130px;
}
.students-progress-bar {
  flex: 1;
  height: 5px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.students-progress-fill {
  height: 100%;
  background: var(--primary);
  transition: width 0.3s ease;
}
.students-progress span {
  font-size: 0.74rem;
  color: var(--text-light);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.students-delete-btn {
  padding: 6px 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-light);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}
.students-delete-btn:hover {
  border-color: #ef4444;
  background: #fee2e2;
  color: #991b1b;
}
[data-theme="dark"] .students-delete-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

/* Sticky Actions column — pins View/Make Admin/Remove to the right edge so
   they remain visible while the rest of the wide table scrolls horizontally.
   Without this, the buttons fall off-screen on smaller laptops.
   Note: we DON'T set display:flex on the td itself — that strips it from the
   table-row layout and the buttons drift away from their row. Instead, we
   keep the cell as a table-cell and rely on inline-block buttons + nowrap. */
.students-table thead th:last-child,
.students-table tbody td.students-actions-cell {
  position: sticky;
  right: 0;
  z-index: 2;
  background: var(--card-bg, var(--bg));
  /* faint left edge so the sticky column feels separated from the scrolling area */
  box-shadow: -8px 0 12px -8px rgba(0, 0, 0, 0.08);
  min-width: 260px;
  white-space: nowrap;
  text-align: right;
  vertical-align: middle;
}
.students-table thead th:last-child {
  background: var(--bg-alt);
  text-align: right;
  padding-right: 18px;
}
.students-table tbody tr:hover td.students-actions-cell {
  background: var(--bg-alt);
}
[data-theme="dark"] .students-table thead th:last-child,
[data-theme="dark"] .students-table tbody td.students-actions-cell {
  box-shadow: -8px 0 12px -8px rgba(0, 0, 0, 0.4);
}
/* Action buttons inside the sticky cell — explicit inline-block so they
   always render side-by-side, never stack. Small gap controlled by the
   leading space in the JS-emitted HTML. */
.students-actions-cell > button {
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
}
.students-actions-cell > button:first-child { margin-left: 0; }

/* Reset password button — sits between role-toggle and Remove in the
   admin students table. Same shape as the other action buttons. */
.students-resetpw-btn {
  padding: 6px 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-light);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  margin-left: 4px;
}
.students-resetpw-btn:disabled { opacity: 0.6; cursor: wait; }
.students-resetpw-btn:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
}
[data-theme="dark"] .students-resetpw-btn:hover {
  background: rgba(99, 91, 255, 0.18);
  color: #c5cbf5;
}

/* ============================================================
   PASSWORD RESET MODAL — overlay + card
   ============================================================ */
.pwreset-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 10, 30, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: pwresetFadeIn 0.2s ease;
}
@keyframes pwresetFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.pwreset-modal {
  background: var(--card-bg, var(--bg));
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%;
  max-width: 460px;
  padding: 0;
  position: relative;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
  animation: pwresetSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pwresetSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pwreset-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-light);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s ease;
}
.pwreset-close:hover {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}

.pwreset-header {
  padding: 28px 28px 12px;
  text-align: center;
}
.pwreset-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--primary-light);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.pwreset-header h3 {
  font-size: 19px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  margin: 0 0 6px !important;
  color: var(--text);
}
.pwreset-header p {
  font-size: 13px !important;
  color: var(--text-light) !important;
  margin: 0 !important;
}
.pwreset-header code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-light);
}

.pwreset-body { padding: 20px 28px; }
.pwreset-body label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.pwreset-input-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.pwreset-input-row input[type="text"] {
  flex: 1;
  padding: 11px 14px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  font-size: 14px !important;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace !important;
}
.pwreset-input-row input[type="text"]:focus {
  outline: none !important;
  border-color: var(--primary) !important;
}
.pwreset-gen-btn {
  padding: 11px 14px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-light);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.pwreset-gen-btn:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
}
.pwreset-hint {
  margin-top: 10px !important;
  font-size: 12px !important;
  color: var(--text-light) !important;
  line-height: 1.5 !important;
}

.pwreset-success {
  margin-top: 18px;
  padding: 16px;
  background: var(--primary-light);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
  border-radius: 10px;
}
.pwreset-success-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 8px;
}
.pwreset-success-box {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 8px;
}
.pwreset-success-box code {
  flex: 1;
  padding: 11px 14px;
  background: var(--card-bg, var(--bg));
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--text);
  word-break: break-all;
}
.pwreset-copy-btn {
  padding: 11px 14px;
  border: 1px solid var(--primary);
  background: var(--primary);
  color: white;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.pwreset-copy-btn:hover { opacity: 0.9; }

.pwreset-footer {
  padding: 16px 28px 24px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.pwreset-cancel-btn,
.pwreset-save-btn {
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-light);
  transition: all 0.15s ease;
}
.pwreset-cancel-btn:hover {
  color: var(--text);
  border-color: var(--border-strong, var(--text-light));
}
.pwreset-save-btn {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.pwreset-save-btn:hover { opacity: 0.85; }
.pwreset-save-btn:disabled { opacity: 0.6; cursor: wait; }

@media (max-width: 540px) {
  .pwreset-modal { max-width: 100%; }
  .pwreset-input-row { flex-direction: column; }
  .pwreset-gen-btn { width: 100%; }
}

/* Role-toggle button (Make Admin / Make Student). Direction-coded:
   - .to-admin = positive promotion → indigo (matches primary action)
   - .to-student = cautionary demotion → amber so admin pauses before clicking */
.students-role-btn {
  padding: 6px 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-light);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  margin-left: 4px;
}
.students-role-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}
.students-role-btn.to-admin:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
}
.students-role-btn.to-student:hover {
  border-color: #ca8a04;
  background: #fef9c3;
  color: #854d0e;
}
[data-theme="dark"] .students-role-btn.to-admin:hover {
  background: rgba(99, 91, 255, 0.18);
  color: #c5cbf5;
}
[data-theme="dark"] .students-role-btn.to-student:hover {
  background: rgba(234, 179, 8, 0.18);
  color: #fde68a;
}

@media (max-width: 768px) {
  .students-table thead { display: none; }
  .students-table tbody td {
    display: block;
    padding: 8px 14px;
    border: none;
  }
  .students-table tbody tr {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }
}

/* Status badge in Students table — "Logged in" vs "Not yet" */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 50px;
  white-space: nowrap;
}
.status-badge .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-badge.active {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}
.status-badge.active .status-dot {
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
  animation: status-pulse 2.4s ease-in-out infinite;
}
[data-theme="dark"] .status-badge.active {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
}
.status-badge.pending {
  background: rgba(148, 163, 184, 0.14);
  color: #64748b;
}
.status-badge.pending .status-dot {
  background: #94a3b8;
}
[data-theme="dark"] .status-badge.pending {
  background: rgba(148, 163, 184, 0.18);
  color: #cbd5e1;
}
@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); }
  50%      { box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.28); }
}

/* ============================================================
   POST COMPOSER — IMAGE + VIDEO UPLOAD
   ============================================================ */
.fb-composer-tools {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.composer-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-light);
  border-radius: 50px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}
.composer-tool-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}
.composer-tool-btn svg {
  flex-shrink: 0;
}

/* Pending media preview in the composer */
.composer-media-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.composer-media-item {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.composer-media-item img,
.composer-media-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.composer-media-item.video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}
.composer-media-vidlabel {
  position: absolute;
  bottom: 4px;
  left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.composer-media-vidlabel svg {
  flex-shrink: 0;
}
.composer-media-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease;
}
.composer-media-remove:hover {
  background: rgba(220, 38, 38, 0.9);
}

/* ============================================================
   POST CARD MEDIA — rendered images / video inside posts
   ============================================================ */
.post-media {
  margin-top: 12px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-alt);
}
.post-media img,
.post-media video {
  width: 100%;
  display: block;
}
.post-media.single img {
  max-height: 480px;
  object-fit: cover;
}
.post-media.grid-2,
.post-media.grid-3,
.post-media.grid-4 {
  display: grid;
  gap: 4px;
}
.post-media.grid-2 {
  grid-template-columns: 1fr 1fr;
}
.post-media.grid-2 img {
  height: 240px;
  object-fit: cover;
}
.post-media.grid-3 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 240px 240px;
}
.post-media.grid-3 .span-2 {
  grid-row: span 2;
  height: 100%;
  object-fit: cover;
}
.post-media.grid-3 img:not(.span-2) {
  height: 240px;
  object-fit: cover;
}
.post-media.grid-4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 200px 200px;
}
.post-media.grid-4 img {
  height: 200px;
  object-fit: cover;
}
.post-media.video {
  margin-top: 8px;
  background: #000;
}
.post-media.video video {
  max-height: 480px;
  background: #000;
}

/* Footer logo — smaller icon + non-interactive (it isn't a link) */
.footer-brand .logo {
  cursor: default;
  pointer-events: none;
  font-size: 1.05rem;
  gap: 8px;
}
.footer-brand .logo:hover {
  transform: none;
}
.footer-brand .logo:hover .logo-icon,
.footer-brand .logo:hover .logo-icon img {
  transform: none;
}
.footer-brand .logo .logo-icon {
  width: 28px;
  height: 28px;
}

/* Bell pulse animation when a new notification arrives */
.notif-btn.notif-pulse {
  animation: notif-bell-pulse 0.9s cubic-bezier(.36, .07, .19, .97) both;
}
@keyframes notif-bell-pulse {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(-12deg) scale(1.08); }
  30%  { transform: rotate(10deg) scale(1.08); }
  45%  { transform: rotate(-8deg); }
  60%  { transform: rotate(6deg); }
  75%  { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}
.notif-btn.notif-pulse .notif-badge {
  animation: notif-badge-flash 0.9s ease-out both;
}
@keyframes notif-badge-flash {
  0%   { box-shadow: 0 0 0 0 rgba(99, 91, 255, 0.6); }
  60%  { box-shadow: 0 0 0 8px rgba(99, 91, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(99, 91, 255, 0); }
}

/* Small "Announcement / Feed / Win" chip in front of notif text */
.notif-kind {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 7px;
  margin-right: 6px;
  border-radius: 50px;
  background: var(--primary-light);
  color: var(--primary);
  vertical-align: middle;
}

/* ============================================================
   REACTIONS — emoji pills + add-reaction palette
   Used on Feed posts and Announcements
   ============================================================ */
.reactions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.react-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 50px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
  color: var(--text);
  transition: all 0.15s ease;
}
.react-pill:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}
.react-pill.mine {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}
.react-emoji { font-size: 0.95rem; line-height: 1; }
.react-count { font-weight: 700; font-variant-numeric: tabular-nums; }

.react-picker-wrap { position: relative; display: inline-block; }
.react-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 50px;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
  transition: all 0.15s ease;
}
.react-add-btn:hover {
  border-style: solid;
  border-color: var(--primary);
  color: var(--primary);
}
.react-add-btn svg { flex-shrink: 0; }

.react-palette {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 50px;
  box-shadow: 0 8px 24px rgba(11, 15, 28, 0.18);
  z-index: 10;
  white-space: nowrap;
  animation: react-palette-pop 0.18s ease-out;
}
@keyframes react-palette-pop {
  from { opacity: 0; transform: translateY(4px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.react-palette[hidden] { display: none; }
.react-palette-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.react-palette-btn:hover {
  transform: scale(1.25);
  background: var(--bg-alt);
}

/* Mark as read button on announcement cards */
.ann-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}
.ann-read-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 50px;
  border: 1px solid var(--primary);
  background: var(--primary);
  color: var(--bg);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  transition: all 0.18s ease;
}
[data-theme="dark"] .ann-read-btn { color: #0a2540; }
.ann-read-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.ann-read-btn.read {
  background: transparent;
  color: var(--text-light);
  border-color: var(--border);
}
.ann-read-btn.read:hover {
  border-color: var(--text-light);
  color: var(--text);
}

/* Read announcements get a faded look so the unread ones stand out */
.ann-item.read {
  opacity: 0.65;
  border-left-color: var(--border);
}
.ann-item.read:hover { opacity: 0.95; }
.ann-item.unread {
  position: relative;
}
.ann-item.unread::after {
  content: '';
  position: absolute;
  top: 14px;
  right: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px rgba(99, 91, 255, 0.18);
  pointer-events: none;
}
.ann-item.pinned.unread::after { right: 14px; top: 14px; }

/* Announcement composer footer — pin toggle on the left, buttons on the right */
.ann-composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.ann-pin-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-light);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.ann-pin-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--primary);
}
.ann-pin-toggle:hover { color: var(--text); }
.ann-composer-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 540px) {
  .ann-composer-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .ann-composer-buttons { justify-content: flex-end; }
}

/* ============================================================
   SHARE WINS — clean composer card
   ============================================================ */
.win-composer-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  margin: 16px 0 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.win-composer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.win-composer-trophy {
  font-size: 1.8rem;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(212, 163, 115, 0.45));
}
.win-composer-head > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.win-composer-head strong {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.win-composer-head span {
  font-size: 0.82rem;
  color: var(--text-light);
}
.win-composer-card input[type="text"],
.win-composer-card textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 0.92rem;
  background: var(--bg-alt);
  color: var(--text);
  resize: vertical;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.win-composer-card input[type="text"]:focus,
.win-composer-card textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.12);
}
.win-composer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.win-composer-tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.win-composer-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 540px) {
  .win-composer-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .win-composer-buttons { justify-content: flex-end; }
}

/* Make win cards a touch more breathable now that they can carry media */
.win-item .post-media {
  margin-top: 12px;
}
.win-item .post-media img,
.win-item .post-media video {
  border-radius: 10px;
}

/* ============================================================
   POST COMMENTS — toggle button + threaded list + inline composer
   ============================================================ */
.post-actions-row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}
.post-comment-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--text-light);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
}
.post-comment-toggle:hover {
  background: var(--bg-alt);
  color: var(--primary);
}
.post-comment-toggle svg { flex-shrink: 0; }

.post-comments {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.post-comments[hidden] { display: none; }

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}
.comment-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.comment-avatar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.7rem;
  overflow: hidden;
}
[data-theme="dark"] .comment-avatar { color: #0a2540; }
.comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.comment-body {
  flex: 1;
  min-width: 0;
}
.comment-bubble {
  background: var(--bg-alt);
  border-radius: 14px;
  padding: 8px 14px;
  display: inline-block;
  max-width: 100%;
}
.comment-bubble strong {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  margin-right: 4px;
}
.comment-bubble p {
  display: inline;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text);
  word-wrap: break-word;
  white-space: pre-wrap;
}
.comment-meta {
  margin-top: 4px;
  margin-left: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.72rem;
  color: var(--text-light);
}
.comment-delete-btn {
  border: none;
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.72rem;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.comment-delete-btn:hover { color: #ef4444; }

.comment-composer {
  display: flex;
  align-items: center;
  gap: 8px;
}
.comment-avatar-me {
  width: 30px;
  height: 30px;
}
.comment-input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 0.88rem;
  background: var(--bg-alt);
  color: var(--text);
  min-width: 0;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.comment-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.12);
}
.comment-send-btn {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: var(--bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}
[data-theme="dark"] .comment-send-btn { color: #0a2540; }
.comment-send-btn:hover:not(:disabled) {
  filter: brightness(1.05);
  transform: scale(1.05);
}
.comment-send-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ============================================================
   ADMIN EVENT COMPOSER (events.html)
   ============================================================ */
.events-admin-bar {
  max-width: 780px;
  margin: 0 auto 20px;
}
.events-admin-bar .btn-primary {
  width: fit-content;
}
.event-composer {
  margin-top: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--shadow-sm);
}
.event-composer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.event-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-light);
}
.event-field-full { grid-column: 1 / -1; }
.event-field span {
  font-weight: 600;
  color: var(--text);
}
.event-field span em {
  font-weight: 400;
  font-style: normal;
  color: var(--text-light);
  font-size: 0.78rem;
}
.event-composer input[type="text"],
.event-composer input[type="url"],
.event-composer input[type="datetime-local"],
.event-composer select,
.event-composer textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-alt);
  color: var(--text);
  font-family: inherit;
  font-size: 0.92rem;
  resize: vertical;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.event-composer input:focus,
.event-composer select:focus,
.event-composer textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.12);
}
.event-composer-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.event-composer-toast {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(0, 212, 168, 0.12);
  color: #059669;
  font-size: 0.85rem;
}
@media (max-width: 600px) {
  .event-composer-grid {
    grid-template-columns: 1fr;
  }
  .event-field-full { grid-column: 1; }
}

/* ============================================================
   CHAT — replies + reactions + hover actions
   ============================================================ */
/* Each message is its own row now (no more grouping into one
   chat-bubbles wrapper) so replies and reactions can render per
   message. Visual grouping comes from hiding the avatar on
   non-head messages. */
.chat-message {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 1px 0;
}
.chat-message.group-head {
  margin-top: 10px;
}
.chat-message.mine {
  flex-direction: row-reverse;
}
.chat-message .chat-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg);
  font-weight: 700;
  font-size: 0.78rem;
  overflow: hidden;
}
[data-theme="dark"] .chat-message .chat-avatar { color: #0a2540; }
.chat-message .chat-avatar.hidden {
  visibility: hidden;
}
.chat-message .chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chat-message-body {
  display: flex;
  flex-direction: column;
  max-width: 75%;
  min-width: 0;
}
.chat-message.mine .chat-message-body {
  align-items: flex-end;
}

/* Reply quote sitting above the bubble */
.chat-reply-quote {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px 10px 18px 10px;
  margin-bottom: -10px;
  font-size: 0.74rem;
  color: var(--text-light);
  background: var(--bg-alt);
  border-left: 2px solid var(--primary);
  border-radius: 10px 10px 0 0;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.chat-reply-quote:hover { background: var(--border); }
.chat-reply-quote svg { flex-shrink: 0; opacity: 0.7; }
.chat-reply-name { font-weight: 700; color: var(--primary); flex-shrink: 0; }
.chat-reply-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Bubble row: bubble + hover action buttons + per-message palette */
.chat-bubble-row {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.chat-message.mine .chat-bubble-row {
  flex-direction: row-reverse;
}
.chat-bubble {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 9px 14px;
  border-radius: 14px;
  border-top-left-radius: 6px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text);
  word-wrap: break-word;
  white-space: pre-wrap;
  position: relative;
  max-width: 100%;
  z-index: 1;
}
.chat-message.mine .chat-bubble {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  border: none;
  border-top-right-radius: 6px;
  border-top-left-radius: 14px;
}
[data-theme="dark"] .chat-message.mine .chat-bubble { color: #0a2540; }

/* Flash highlight when scrolled-to via reply quote click */
.chat-message.flash .chat-bubble {
  animation: chat-msg-flash 1.4s ease-out;
}
@keyframes chat-msg-flash {
  0%, 60% { box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.4); }
  100%    { box-shadow: 0 0 0 0 rgba(99, 91, 255, 0); }
}

/* Hover actions next to each bubble (React / Reply / Delete) */
.chat-msg-actions {
  display: flex;
  gap: 2px;
  align-items: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.chat-bubble-row:hover .chat-msg-actions,
.chat-bubble-row:focus-within .chat-msg-actions {
  opacity: 1;
}
.chat-action-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  transition: all 0.15s ease;
}
.chat-action-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--bg-alt);
  transform: translateY(-1px);
}
.chat-action-btn.chat-delete-btn:hover {
  border-color: #ef4444;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

/* Per-message reaction palette popup */
.chat-react-palette {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 50px;
  box-shadow: 0 8px 24px rgba(11, 15, 28, 0.18);
  z-index: 20;
  white-space: nowrap;
  animation: react-palette-pop 0.18s ease-out;
}
.chat-message.mine .chat-react-palette {
  left: auto;
  right: 0;
}
.chat-react-palette[hidden] { display: none; }

/* Existing chat reactions — rendered as a row of pills below the bubble */
.chat-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  margin-left: 6px;
}
.chat-message.mine .chat-reactions {
  justify-content: flex-end;
  margin-left: 0;
  margin-right: 6px;
}
.chat-react-pill {
  padding: 2px 8px;
  font-size: 0.74rem;
  background: var(--bg);
  border: 1px solid var(--border);
}

/* "Replying to [name]" preview chip above the chat input */
.chat-reply-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin-top: 12px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 12px;
  font-size: 0.82rem;
}
.chat-reply-preview-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat-reply-preview-label {
  color: var(--text-light);
}
.chat-reply-preview-text {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-reply-preview-cancel {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.chat-reply-preview-cancel:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* ============================================================
   MEDIA LIGHTBOX — full-size image viewer for posts / wins
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(5, 8, 16, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;          /* never trap clicks while invisible */
  transition: opacity 0.2s ease;
  cursor: zoom-out;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox[hidden] { display: none; }

.lightbox-stage {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.lightbox-img {
  max-width: 92vw;
  max-height: 86vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  cursor: default;
  user-select: none;
  /* Pop-in animation when the lightbox first opens */
  animation: lightbox-pop 0.22s cubic-bezier(.4, 0, .2, 1);
}
@keyframes lightbox-pop {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

.lightbox-close {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.15s ease, transform 0.15s ease;
  z-index: 2;
}
.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: scale(1.05);
}

.lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.15s ease, transform 0.15s ease;
  z-index: 2;
}
.lightbox-prev { left: 18px; }
.lightbox-next { right: 18px; }
.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-50%) scale(1.06);
}

.lightbox-counter {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2;
}

@media (max-width: 540px) {
  .lightbox-close { top: 12px; right: 12px; width: 36px; height: 36px; }
  .lightbox-nav { width: 40px; height: 40px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
}

/* ============================================================
   BADGES — achievement toast + profile grid + member-card chips
   ============================================================ */

/* Slide-in toast on newly-earned achievement */
.badge-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 280px;
  max-width: 360px;
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fef3c7 0%, #fff 100%);
  border: 1px solid #fbbf24;
  box-shadow: 0 14px 40px -10px rgba(15, 23, 42, 0.30);
  transform: translateX(110%);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.32s ease;
}
.badge-toast.is-visible {
  transform: translateX(0);
  opacity: 1;
}
[data-theme="dark"] .badge-toast {
  background: linear-gradient(135deg, #422006 0%, #161b30 100%);
  border-color: #d97706;
  color: #f0f3ff;
}
.badge-toast-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  background: rgba(251, 191, 36, 0.18);
  border: 1px solid rgba(251, 191, 36, 0.40);
}
.badge-toast-eyebrow {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #92400e;
  margin-bottom: 2px;
}
[data-theme="dark"] .badge-toast-eyebrow { color: #fbbf24; }
.badge-toast-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}
[data-theme="dark"] .badge-toast-title { color: #fff; }
.badge-toast-desc {
  font-size: 0.8rem;
  color: #475569;
  margin-top: 2px;
}
[data-theme="dark"] .badge-toast-desc { color: #cbd5e1; }

/* Profile achievements grid */
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.achievement-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  opacity: 0.55;
}
.achievement-card.is-earned {
  opacity: 1;
  border-color: rgba(251, 191, 36, 0.55);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.06) 0%, var(--bg) 100%);
  box-shadow: 0 4px 14px -8px rgba(251, 191, 36, 0.45);
}
[data-theme="dark"] .achievement-card.is-earned {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.10) 0%, rgba(255, 255, 255, 0.02) 100%);
}
.achievement-card:hover { transform: translateY(-1px); }
.achievement-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: var(--bg-alt);
  border: 1px solid var(--border);
}
.achievement-card.is-earned .achievement-icon {
  background: rgba(251, 191, 36, 0.18);
  border-color: rgba(251, 191, 36, 0.40);
}
.achievement-meta { flex: 1; min-width: 0; }
.achievement-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text);
  letter-spacing: -0.005em;
}
.achievement-desc {
  font-size: 0.76rem;
  color: var(--text-light);
  margin-top: 2px;
}
.achievement-status {
  flex-shrink: 0;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 50px;
  background: rgba(251, 191, 36, 0.18);
  color: #92400e;
}
.achievement-status.locked {
  background: var(--bg-alt);
  color: var(--text-light);
}
[data-theme="dark"] .achievement-status { color: #fbbf24; }
[data-theme="dark"] .achievement-status.locked { color: var(--text-light); }

/* Member-card badge chips (top 3 prestige) */
.member-badges {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
}
.member-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 0.85rem;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.35);
  cursor: help;
}

/* Member-card "Send message" button */
.member-message-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
}
.member-message-btn:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
}
[data-theme="dark"] .member-message-btn:hover {
  background: rgba(139, 158, 255, 0.18);
  color: #c5cbf5;
}

/* ============================================================
   DIRECT MESSAGES — left rail (conv list) + right rail (thread)
   ============================================================ */
.dm-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  height: calc(100vh - 280px);
  min-height: 480px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
  overflow: hidden;
}
@media (max-width: 720px) {
  .dm-layout { grid-template-columns: 1fr; height: auto; }
}

/* Left rail: conversation list */
.dm-conv-list {
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 8px;
  background: var(--bg-alt);
}
[data-theme="dark"] .dm-conv-list { background: rgba(255, 255, 255, 0.02); }
.dm-conv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 16px;
  color: var(--text-light);
}
.dm-conv-empty-icon { color: var(--text-light); margin-bottom: 8px; opacity: 0.4; }
.dm-conv-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--text);
  transition: background 0.14s ease;
}
.dm-conv-item:hover { background: var(--bg); }
.dm-conv-item.is-active { background: var(--primary-light); }
[data-theme="dark"] .dm-conv-item.is-active { background: rgba(139, 158, 255, 0.18); }
.dm-conv-avatar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 700;
  font-size: 0.82rem;
}
.dm-conv-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dm-conv-body { flex: 1; min-width: 0; }
.dm-conv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.dm-conv-name {
  font-weight: 600;
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-conv-time {
  font-size: 0.7rem;
  color: var(--text-light);
  flex-shrink: 0;
}
.dm-conv-last {
  font-size: 0.78rem;
  color: var(--text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.dm-conv-unread {
  background: var(--primary);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 50px;
  min-width: 20px;
  text-align: center;
  flex-shrink: 0;
}

/* Right rail: thread */
.dm-thread {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dm-thread-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-light);
  padding: 40px 20px;
}
.dm-thread-empty-icon { color: var(--text-light); opacity: 0.35; margin-bottom: 12px; }
.dm-thread-empty h3 { font-size: 1.1rem; margin: 0 0 6px; color: var(--text); }
.dm-thread-empty p { font-size: 0.88rem; margin: 0; }
.dm-thread-active {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dm-thread-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
[data-theme="dark"] .dm-thread-header { background: rgba(255, 255, 255, 0.02); }
.dm-thread-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.dm-thread-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dm-thread-meta { flex: 1; min-width: 0; }
.dm-thread-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}
.dm-thread-status {
  font-size: 0.74rem;
  color: var(--text-light);
}
.dm-thread-close {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
}
.dm-thread-close:hover { background: var(--bg); color: var(--text); }

.dm-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg);
}
.dm-messages-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  font-size: 0.9rem;
}
.dm-message {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 75%;
}
.dm-message.mine {
  align-items: flex-end;
  align-self: flex-end;
}
.dm-message-bubble {
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--bg-alt);
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.4;
  word-wrap: break-word;
  border: 1px solid var(--border);
}
[data-theme="dark"] .dm-message-bubble { background: rgba(255, 255, 255, 0.04); }
.dm-message.mine .dm-message-bubble {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.dm-message-time {
  font-size: 0.68rem;
  color: var(--text-light);
  margin-top: 3px;
  padding: 0 4px;
}

.dm-composer {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.dm-composer input {
  flex: 1;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.dm-composer input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.16);
}
.dm-composer .btn {
  padding: 10px 22px;
}

/* Close X on the sync-error banner so admins can dismiss it */
.sync-error-banner-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.sync-error-banner-close:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.06);
}
#syncErrorBanner code {
  background: rgba(120, 53, 15, 0.08);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.85em;
  font-family: ui-monospace, 'SF Mono', Monaco, Consolas, monospace;
}

/* ============================================================
   GLOBAL TEXT-OVERFLOW SAFETY + AUTO-LINK STYLING
   Applied to every user-content container so a long URL or
   unbroken token can't punch out of its card.
   ============================================================ */
.post-text,
.win-body p,
.faq-answer,
.qa-comment-text,
.comment-body p,
.chat-bubble,
.dm-message-bubble,
.ann-item p {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Auto-linkified URLs inside posts/announcements/comments/etc. */
.auto-link {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
  font-weight: 500;
}
.auto-link:hover {
  text-decoration-thickness: 2px;
  color: var(--primary-dark);
}
[data-theme="dark"] .auto-link {
  color: #c5cbf5;
}
[data-theme="dark"] .auto-link:hover {
  color: #fff;
}
/* Inside the user's own DM bubble (indigo background) the link
   needs to read against white, not against indigo. */
.dm-message.mine .auto-link {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.6);
}
.dm-message.mine .auto-link:hover {
  text-decoration-color: #fff;
}
.chat-message.mine .auto-link {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.6);
}

/* ============================================================
   ADMIN — Submission inspector modal
   ============================================================ */
.students-view-btn {
  background: var(--primary-light);
  color: var(--primary);
  border: 1px solid transparent;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}
.students-view-btn:hover {
  background: var(--primary);
  color: #fff;
  transform: translateY(-1px);
}
[data-theme="dark"] .students-view-btn {
  background: rgba(139, 158, 255, 0.18);
  color: #c5cbf5;
}
[data-theme="dark"] .students-view-btn:hover {
  background: var(--primary);
  color: #fff;
}

.sub-inspector-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 15, 28, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  opacity: 0;
  transition: opacity 0.22s ease;
  padding: 24px;
}
.sub-inspector-overlay.is-open { opacity: 1; }
.sub-inspector {
  background: var(--bg);
  border-radius: 16px;
  width: 100%;
  max-width: 720px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  box-shadow: 0 30px 80px -20px rgba(15, 23, 42, 0.45);
  overflow: hidden;
  transform: translateY(8px) scale(0.99);
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
.sub-inspector-overlay.is-open .sub-inspector {
  transform: translateY(0) scale(1);
}

.sub-inspector-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
[data-theme="dark"] .sub-inspector-head {
  background: rgba(255, 255, 255, 0.02);
}
.sub-inspector-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
[data-theme="dark"] .sub-inspector-avatar {
  background: rgba(139, 158, 255, 0.18);
  color: #c5cbf5;
}
.sub-inspector-meta { flex: 1; min-width: 0; }
.sub-inspector-meta h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}
.sub-inspector-meta p {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: var(--text-light);
}
.sub-inspector-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
}
.sub-inspector-close:hover {
  background: var(--bg);
  color: var(--text);
}

.sub-inspector-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sub-row {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--bg);
}
.sub-row-submitted {
  border-left: 4px solid #10b981;
}
.sub-row-empty {
  background: var(--bg-alt);
  opacity: 0.75;
}
[data-theme="dark"] .sub-row-empty {
  background: rgba(255, 255, 255, 0.02);
}
.sub-row-pending {
  border-left: 4px solid #f59e0b;
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.05) 0%, var(--bg) 100%);
}
[data-theme="dark"] .sub-row-pending {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.10) 0%, rgba(255, 255, 255, 0.02) 100%);
}
.sub-row-status.awaiting {
  background: rgba(245, 158, 11, 0.18);
  color: #b45309;
  margin-left: 4px;
}
[data-theme="dark"] .sub-row-status.awaiting {
  background: rgba(251, 191, 36, 0.18);
  color: #fbbf24;
}
.sub-pending-banner {
  padding: 14px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fef3c7 0%, var(--bg) 80%);
  border: 1px solid #fbbf24;
  color: #78350f;
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 14px;
}
[data-theme="dark"] .sub-pending-banner {
  background: linear-gradient(135deg, #422006 0%, rgba(255, 255, 255, 0.02) 80%);
  color: #fcd34d;
  border-color: #d97706;
}
.sub-pending-banner strong { color: inherit; }
.sub-pending-dm-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.sub-pending-dm-btn:hover {
  background: currentColor;
}
.sub-pending-dm-btn:hover { color: #fff7ed; }
[data-theme="dark"] .sub-pending-dm-btn:hover { color: #422006; }
.sub-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.sub-row-week {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-light);
}
.sub-row-status {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 50px;
}
.sub-row-status.submitted {
  background: rgba(16, 185, 129, 0.15);
  color: #047857;
}
[data-theme="dark"] .sub-row-status.submitted {
  background: rgba(52, 211, 153, 0.18);
  color: #34d399;
}
.sub-row-status.not-submitted {
  background: var(--bg-alt);
  color: var(--text-light);
  border: 1px solid var(--border);
}
.sub-row-date {
  font-size: 0.74rem;
  color: var(--text-light);
  margin-left: auto;
}
.sub-row-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.sub-row-empty-note {
  font-size: 0.8rem;
  color: var(--text-light);
  font-style: italic;
}

.sub-row-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.sub-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
}
[data-theme="dark"] .sub-item {
  background: rgba(255, 255, 255, 0.02);
}
.sub-item-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.sub-item-meta { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sub-item-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  word-break: break-all;
}
.sub-item-name a {
  color: var(--primary);
  text-decoration: none;
}
.sub-item-name a:hover { text-decoration: underline; }
[data-theme="dark"] .sub-item-name a { color: #c5cbf5; }
.sub-item-sub {
  font-size: 0.74rem;
  color: var(--text-light);
  margin-top: 1px;
}
.sub-item-tag {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 50px;
  background: var(--bg);
  color: var(--text-light);
  border: 1px solid var(--border);
  flex-shrink: 0;
  cursor: help;
}
.sub-item-open {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--primary-light);
  transition: all 0.15s ease;
}
.sub-item-open:hover {
  background: var(--primary);
  color: #fff;
}
[data-theme="dark"] .sub-item-open {
  background: rgba(139, 158, 255, 0.18);
  color: #c5cbf5;
}
[data-theme="dark"] .sub-item-open:hover {
  background: var(--primary);
  color: #fff;
}

@media (max-width: 600px) {
  .sub-inspector-overlay { padding: 12px; }
  .sub-inspector-head { padding: 14px 16px; }
  .sub-inspector-body { padding: 12px 14px 16px; }
}

/* ============================================================
   HERO V2 — editorial layout + bento grid + animated mesh bg
   ============================================================ */

.hero.hero-v2 {
  position: relative;
  /* Top padding trimmed: was clamp(140px, 18vw, 220px) which left a huge
     blank gap between navbar and the eyebrow on desktop. New value still
     clears the fixed navbar (~70px) but pulls the eyebrow + title up so
     the fold feels packed. */
  padding: clamp(80px, 9vw, 120px) 0 clamp(40px, 6vw, 80px);
  overflow: hidden;
  isolation: isolate;
}

/* Animated mesh gradient background — drifting indigo / pink / mint blobs */
.hero-mesh {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.hero-mesh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.22;
  animation: meshDrift 22s ease-in-out infinite;
  will-change: transform;
}
[data-theme="dark"] .hero-mesh-blob { opacity: 0.40; filter: blur(110px); }

.mesh-blob-a {
  width: 480px; height: 480px;
  background: #635bff;
  top: -140px; left: -120px;
}
.mesh-blob-b {
  width: 560px; height: 560px;
  background: #4c1d95;
  top: 30%; right: -180px;
  animation-delay: -8s;
}
.mesh-blob-c {
  width: 380px; height: 380px;
  background: #8b9eff;
  bottom: -100px; left: 32%;
  animation-delay: -15s;
}
@keyframes meshDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(40px, -50px, 0) scale(1.08); }
  66%      { transform: translate3d(-30px, 40px, 0) scale(0.92); }
}

/* Subtle grid texture — extra depth */
.hero-mesh-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 80%);
  pointer-events: none;
}
[data-theme="dark"] .hero-mesh-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
}

/* Centered single-column hero with tight vertical rhythm.
   Reading order top → bottom:
     1. Eyebrow pill (chip)
     2. Title (BIG)
     3. Sub (calm)
     4. CTAs (the ask)
     5. Sphere Academy badge card (the brand)
     6. 2-card status row (the proof)
     7. Trust avatars + caption (the people)
   Each child shrinks to its own content + self-centers via the flex
   column's align-items: center. Wide elements (title, sub, mini-cards,
   centered logo card) opt back into spanning the column. */
.hero-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  gap: 0;
}
.hero-centered > * { max-width: 100%; }

/* Vertical rhythm — each element controls its own bottom margin so
   the sections breathe without feeling cramped or gapped. */
.hero-centered .hero-eyebrow      { margin: 0 auto 10px; }
.hero-centered .hero-title        { margin: 0 0 18px; }
.hero-centered .hero-sub          { margin: 0 auto 32px; }
.hero-centered .hero-actions      { margin: 0 auto 40px; }
.hero-centered .bento-logo-centered { margin: 0 auto 14px; }
.hero-centered .hero-mini-cards   { margin: 0 auto 28px; }
.hero-centered .hero-trust        { margin: 0 auto; }

/* Elements that need full column width for proper wrapping */
.hero-centered .hero-title,
.hero-centered .hero-sub {
  width: 100%;
}
.hero-centered .bento-logo-centered { width: 100%; max-width: 380px; }
.hero-centered .hero-mini-cards     { width: 100%; max-width: 540px; }

/* Elements that should self-center (size to content) */
/* Force these to size to their content, then center as a block.
   width: fit-content is more reliable than width: auto for flex
   items; auto-margins guarantee horizontal centering even if a
   later rule re-specifies display. Higher specificity (.hero.hero-v2)
   beats any cascading width: 100% from older hero rules. */
.hero.hero-v2 .hero-centered .hero-eyebrow,
.hero.hero-v2 .hero-centered .hero-actions,
.hero.hero-v2 .hero-centered .hero-trust {
  width: fit-content;
  max-width: 100%;
  align-self: center;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

/* Eyebrow label above headline */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 50px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--text);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  margin-bottom: 22px;
}
[data-theme="dark"] .hero-eyebrow {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
}
.hero-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #635bff;
  box-shadow: 0 0 0 4px rgba(99, 91, 255, 0.20);
  animation: heroPulse 2s ease-in-out infinite;
}
@keyframes heroPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(99, 91, 255, 0.20); }
  50%      { box-shadow: 0 0 0 8px rgba(99, 91, 255, 0.06); }
}

/* Editorial headline — big, tight tracking */
.hero-title {
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0 0 22px;
  color: var(--text);
}
/* Animated gradient on 'Roadmap' — continuous left-to-right shimmer
   through the indigo family (deep → mid → pale → mid → deep) so it
   reads as motion without the green/pink off-tones. */
.hero-title-gradient {
  /* Dark violet family but every stop is bright enough to
     stay visible against the #18181B background. The
     previous gradient had #312e81 at the edges which is
     SO dark it disappeared into the page when the gradient
     position landed there, making the word invisible.
     Now the darkest stop is #7c3aed (rich violet) which
     still pops against dark backgrounds. */
  background: linear-gradient(90deg,
    #7c3aed 0%,
    #8b5cf6 18%,
    #a78bfa 35%,
    #c084fc 50%,
    #a78bfa 65%,
    #8b5cf6 82%,
    #7c3aed 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* 5s linear infinite — gradient flows continuously, never
     pauses, and you can clearly see the color motion travel
     across each word in the rotation. */
  animation: gradientShift 5s linear infinite;
  display: inline-block;
}
@keyframes gradientShift {
  0%   { background-position: 300% 50%; }
  100% { background-position: -300% 50%; }
}

.hero-sub {
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.65;
  color: var(--text-light);
  max-width: 560px;
  margin: 0 auto 32px;
}
.hero-sub strong { color: var(--text); font-weight: 700; }

.hero-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.hero-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  font-size: 0.95rem;
  box-shadow: 0 8px 24px -8px rgba(99, 91, 255, 0.45);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hero-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px rgba(99, 91, 255, 0.55);
}
.hero-cta-primary svg { transition: transform 0.18s ease; }
.hero-cta-primary:hover svg { transform: translateX(4px); }

/* Trust strip — avatar pile + caption */
.hero-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}
.hero-trust-avatars {
  display: flex;
}
.trust-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  border: 2px solid var(--bg);
  margin-left: -8px;
  letter-spacing: -0.01em;
  overflow: hidden;
  flex-shrink: 0;
}
.trust-avatar:first-child { margin-left: 0; }
/* Photo variant — real student avatar from sphere_users */
.trust-avatar-photo { padding: 0; background: var(--bg-alt); }
.trust-avatar-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.trust-avatar-more {
  background: var(--bg);
  color: var(--text-light);
  border: 2px dashed var(--border);
  font-size: 0.78rem;
}
[data-theme="dark"] .trust-avatar { border-color: var(--bg); }
.hero-trust p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-light);
}

/* ===== BENTO GRID ===== */
.hero-bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 12px;
}
.bento-card {
  position: relative;
  padding: 20px;
  border-radius: 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: 0 6px 18px -10px rgba(15, 23, 42, 0.10);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.bento-card:hover {
  transform: translateY(-3px);
  border-color: rgba(99, 91, 255, 0.40);
  box-shadow: 0 14px 32px -12px rgba(99, 91, 255, 0.30);
}
[data-theme="dark"] .bento-card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Logo card — spans both columns of top row */
.bento-logo {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px;
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
  color: #fff;
  border-color: rgba(99, 91, 255, 0.30);
}

/* Centered variant — sits on its own under the CTAs as a compact
   branded badge card. Hugs the logo + name with snug padding instead
   of stretching across the column. */
.bento-logo-centered {
  grid-column: auto;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 16px;
  text-align: center;
  padding: 12px 18px;
  gap: 12px;
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
  justify-content: center;
}
.bento-logo-centered .bento-logo-img {
  width: 44px;
  height: 44px;
}
[data-theme="dark"] .bento-logo-centered {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}
/* Kill the dark-card glow halo on the centered variant — only the
   logo + text should show, no animated radial backdrop. */
.bento-logo-centered .bento-logo-glow { display: none; }
/* Re-color the meta text so it's readable on the light surface */
.bento-logo-centered .bento-logo-meta strong { color: var(--text); }
.bento-logo-centered .bento-logo-meta span   { color: var(--text-light); }
.bento-logo-centered:hover {
  transform: translateY(-3px);
  border-color: rgba(99, 91, 255, 0.55);
  box-shadow: 0 18px 40px -14px rgba(99, 91, 255, 0.30);
}

/* Two-card status row sitting under the Sphere Academy card */
.hero-mini-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 560px;
  margin: 0 auto;
}
.hero-mini-cards .bento-card {
  text-align: left;
}
@media (max-width: 540px) {
  .hero-mini-cards { grid-template-columns: 1fr; }
}
.bento-logo-glow {
  position: absolute;
  inset: -50%;
  background: radial-gradient(circle at 80% 30%, rgba(232, 121, 168, 0.25), transparent 50%),
              radial-gradient(circle at 20% 70%, rgba(99, 91, 255, 0.30), transparent 55%);
  pointer-events: none;
  animation: bentoLogoGlow 16s ease-in-out infinite;
}
@keyframes bentoLogoGlow {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.1); opacity: 0.85; }
}
.bento-logo-img {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  position: relative;
  z-index: 1;
  /* Premium app-icon container — violet brand gradient
     behind the transparent logo so it reads as a polished
     icon, not just floating strokes on the card. Same vibe
     as the favicon at a smaller scale. */
  background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 50%, #c084fc 100%);
  padding: 8px;
  object-fit: contain;
  box-sizing: border-box;  /* keep 56×56 outer, padding eats inward */
  box-shadow: 0 6px 16px -4px rgba(99, 91, 255, 0.45);
}
/* Inside the bento card, the navbar's light-mode invert filter
   would flip our white planet to black against the violet — kill
   it here so the white glyph stays white on the gradient. */
[data-theme="light"] .bento-logo-img {
  filter: none !important;
}
.bento-logo-meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bento-logo-meta strong {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.bento-logo-meta span {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.4px;
}

/* Stat card */
.bento-stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 120px;
}
.bento-stat-value {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(135deg, #635bff 0%, #e879a8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.bento-stat-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 12px;
  line-height: 1.3;
}

/* Phases card */
.bento-phases {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 120px;
}
.bento-phase-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.phase-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  flex-shrink: 0;
}
.phase-pill-1 { background: linear-gradient(135deg, #312e81, #635bff); }
.phase-pill-2 { background: linear-gradient(135deg, #78350f, #f59e0b); }
.phase-pill-3 { background: linear-gradient(135deg, #064e3b, #10b981); }
.phase-pill-4 { background: linear-gradient(135deg, #4c1d95, #a855f7); }

/* Live presence card */
.bento-live {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: auto;
}
.bento-live-pulse {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #635bff;
  flex-shrink: 0;
  position: relative;
  box-shadow: 0 0 0 4px rgba(99, 91, 255, 0.20);
  animation: heroPulse 2s ease-in-out infinite;
}
.bento-live-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.bento-live-meta strong {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
}
.bento-live-meta span {
  font-size: 0.74rem;
  color: var(--text-light);
}

/* Outcome card — graduate. Same surface as the Live community card
   (plain bento default) so the two cards visually match; the indigo
   accent lives on the small icon tile, not the card background. */
.bento-outcome {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bento-outcome-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(99, 91, 255, 0.18);
  border: 1px solid rgba(99, 91, 255, 0.35);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
[data-theme="dark"] .bento-outcome-icon { color: #c5cbf5; }
.bento-outcome-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.bento-outcome-text strong {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}
.bento-outcome-text span {
  font-size: 0.72rem;
  color: var(--text-light);
}

/* ============================================================
   TOOLS MARQUEE — auto-scrolling tool list under hero
   ============================================================ */
.tools-marquee {
  position: relative;
  padding: 28px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  background: var(--bg-alt);
}
[data-theme="dark"] .tools-marquee {
  background: rgba(255, 255, 255, 0.02);
}

/* Soft fade on edges so chips don't pop in/out hard */
.tools-marquee-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.tools-marquee-fade-l {
  left: 0;
  background: linear-gradient(90deg, var(--bg-alt), transparent);
}
.tools-marquee-fade-r {
  right: 0;
  background: linear-gradient(-90deg, var(--bg-alt), transparent);
}
[data-theme="dark"] .tools-marquee-fade-l {
  background: linear-gradient(90deg, rgba(11, 15, 28, 0.95), transparent);
}
[data-theme="dark"] .tools-marquee-fade-r {
  background: linear-gradient(-90deg, rgba(11, 15, 28, 0.95), transparent);
}

.tools-marquee-track {
  display: flex;
  gap: 32px;
  width: max-content;
  animation: marqueeScroll 55s linear infinite;
}
.tools-marquee:hover .tools-marquee-track {
  animation-play-state: paused;
}
@keyframes marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.tools-marquee-list {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-right: 32px;
  flex-shrink: 0;
}
.tool-chip {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: color 0.18s ease;
}
.tool-chip:hover { color: var(--primary); }
.tool-dot {
  font-size: 0.7rem;
  color: var(--text-light);
  opacity: 0.4;
}

/* ============================================================
   RESPONSIVE — stack hero + tighten bento on small screens
   ============================================================ */
@media (max-width: 900px) {
  .hero.hero-v2 { padding: 50px 0 30px; }
  .hero-bento { max-width: 460px; margin: 0 auto; }
  .mesh-blob-a, .mesh-blob-b, .mesh-blob-c {
    width: 320px; height: 320px;
    filter: blur(70px);
  }
}
@media (max-width: 540px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-cta-primary, .hero-actions .btn-outline { width: 100%; justify-content: center; }
  .hero-bento { grid-template-columns: 1fr; }
  .bento-logo { grid-column: 1; }
  .tools-marquee { padding: 20px 0; }
  .tool-chip { font-size: 0.88rem; }
  .tools-marquee-list { gap: 20px; padding-right: 20px; }
}

/* ============================================================
   MOBILE APP POLISH — Phase 1 fixes for native-app feel on phones
   Audit: 2026-05-15. Fixes iOS zoom, touch targets, hover-only UI,
   safe areas, reduced-motion, and several mobile-only layout bugs.
   ============================================================ */

/* 1. iOS Safari zooms on focus when input font < 16px. Forcing 16px
   below 768px is the global one-liner fix. Keeps the design's
   smaller sizes for desktop. */
@media (max-width: 768px) {
  input, textarea, select {
    font-size: 16px !important;
  }
  /* Re-shrink the search input's visual padding so it still feels compact */
  .auth-form input,
  .auth-form textarea {
    padding: 12px 14px;
  }
}

/* 2. Always-visible delete buttons (was hover-only — unreachable on touch).
   Same treatment as .win-delete-btn (already fixed). */
.post-delete-btn,
.ann-delete-btn,
.faq-delete-btn,
.chat-delete-btn {
  opacity: 0.55;
  transition: opacity 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.post-delete-btn:hover,
.ann-delete-btn:hover,
.faq-delete-btn:hover,
.chat-delete-btn:hover {
  opacity: 1;
}
@media (max-width: 768px) {
  /* Touch devices — full opacity so users can see + tap reliably */
  .post-delete-btn,
  .ann-delete-btn,
  .faq-delete-btn,
  .chat-delete-btn,
  .win-delete-btn {
    opacity: 1 !important;
  }
  /* Touch-target bump to 40px on phones */
  .post-delete-btn,
  .ann-delete-btn,
  .faq-delete-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.25rem !important;
  }
  .chat-delete-btn {
    width: 32px !important;
    height: 32px !important;
  }
}

/* 3. Safe-area insets — keep fixed elements clear of iOS notch + home bar.
   `env()` falls back to 0 on browsers without notches. */
.navbar {
  padding-top: env(safe-area-inset-top, 0);
}
.back-to-top,
.sidebar-toggle,
.badge-toast,
.unsaved-banner,
.sticky-bar {
  bottom: calc(var(--btt-bottom, 28px) + env(safe-area-inset-bottom, 0));
}
/* For elements that explicitly set `bottom` we just stack the safe-area on top */
.back-to-top { --btt-bottom: 28px; }
.sidebar-toggle { --btt-bottom: 24px; }

/* 4. Notification dropdown — fit-on-screen on phones */
@media (max-width: 480px) {
  .notif-dropdown {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    right: 12px !important;
    left: 12px !important;
  }
  .notif-list { max-height: 60vh; }
}

/* 5. Admin Students table — undo desktop sticky on phones (sticky col
   makes the scroll behavior weird on small screens). Let the whole
   table scroll horizontally instead — cleaner on touch. */
@media (max-width: 768px) {
  .students-table thead th:last-child,
  .students-table tbody td.students-actions-cell {
    position: static !important;
    box-shadow: none !important;
    min-width: 220px !important;
  }
  .students-actions-cell {
    text-align: left !important;
  }
  .students-progress {
    min-width: 100px !important;
  }
}

/* 6. Generic touch-target bump for icon buttons on phones */
@media (max-width: 768px) {
  .btn,
  .nav-tab-item,
  .members-tab,
  .hamburger,
  .theme-toggle,
  .notif-btn,
  .back-btn {
    min-height: 44px;
    min-width: 44px;
  }
}

/* 7. Respect prefers-reduced-motion across decorative animations.
   Was only applied to outcome-carousel; now blanket-applies to mesh,
   marquee, glows, pulses. Keeps the site usable for motion-sensitive
   users + saves battery on phones. */
@media (prefers-reduced-motion: reduce) {
  .tools-marquee-track,
  .hero-mesh-blob,
  .bento-logo-glow,
  .notif-badge,
  .bento-live-pulse,
  .hero-title-gradient,
  .hero-blob,
  .blob-a,
  .blob-b,
  .blob-c,
  .live-pulse-dot {
    animation: none !important;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 8. Tap feedback for cards — touch devices have no :hover, so :active
   gives an instant "I pressed it" cue. */
@media (hover: none) and (pointer: coarse) {
  .bento-card:active,
  .feature-card:active,
  .event-card:active,
  .about-pillar:active,
  .course-card:active,
  .post:active,
  .win-item:active,
  .ann-item:active {
    transform: scale(0.985);
    transition: transform 0.08s ease;
  }
}

/* 9. Modals + bottom sheets — full-screen on phones for breathing room.
   Avatar adjuster + submission inspector were too narrow on small screens. */
@media (max-width: 480px) {
  .sub-inspector,
  .avatar-adjuster {
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 32px) !important;
    margin: 8px;
  }
  .avatar-adjuster-viewport {
    max-width: calc(100vw - 64px);
  }
}

/* 10. Forms — full-width buttons and inputs on mobile for thumb reach */
@media (max-width: 480px) {
  .auth-form .btn,
  .auth-form input,
  .auth-form textarea {
    width: 100%;
  }
  .auth-card {
    padding: 28px 22px;
    margin: 16px;
  }
}

/* ============================================================
   EMIL KOWALSKI MASTER THEME — 2026 redesign
   Applied last so it wins specificity for the global override.
   Monochrome palette + Inter Tight + hairline borders + restrained
   motion. Touches every page without per-page rewrites by overriding
   the CSS variables that the rest of the codebase already references.
   ============================================================ */

/* ---------- 1. Typography — Inter Tight everywhere ---------- */
html, body, button, input, textarea, select, .btn, .lockup-text,
.hero h1, h1, h2, h3, h4, h5, h6, p, a, li, td, th, label, span {
  font-family: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-feature-settings: 'ss01', 'cv11';
  letter-spacing: -0.005em;
  font-size: 15px;
  line-height: 1.55;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
}
.hero h1, .auth-card h1 {
  letter-spacing: -0.035em !important;
  font-weight: 600 !important;
}
code, pre, .lesson-id, .phase-week {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace !important;
}

/* ---------- 2. Color palette — monochrome with indigo accent ---------- */
:root {
  --primary: #635bff;
  --primary-light: rgba(99, 91, 255, 0.08);
  --primary-glow: rgba(99, 91, 255, 0.2);
  --accent: #635bff;
  --accent-pink: #635bff;            /* neutralize pink accents */
  --bg: #fafafa;
  --bg-alt: #ffffff;
  --bg-elevated: #ffffff;
  --card-bg: #ffffff;
  --text: #0a0a0a;
  --text-light: #737373;
  --text-muted: #a3a3a3;
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.14);
  --shadow: none;
  --shadow-md: none;
  --shadow-lg: none;
}
[data-theme="dark"] {
  --primary: #635bff;
  --primary-light: rgba(99, 91, 255, 0.14);
  --primary-glow: rgba(99, 91, 255, 0.3);
  --accent: #8b9eff;
  --accent-pink: #8b9eff;
  --bg: #0a0a0a;
  --bg-alt: #111111;
  --bg-elevated: #111111;
  --card-bg: #111111;
  --text: #fafafa;
  --text-light: #a3a3a3;
  --text-muted: #737373;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
}

/* ---------- 3. Hide visual noise (legacy blobs, marquee, glow) ----------
   .hero-mesh / .hero-mesh-blob / .mesh-blob-* are intentionally
   re-enabled below (Animated Aurora). Older .hero-blob set stays off. */
.hero-blobs,
.hero-blob,
.blob-a, .blob-b, .blob-c,
.bento-logo-glow,
.bento-live-pulse,
.tools-marquee {
  display: none !important;
}

/* ============================================================
   HERO BACKGROUND — Architectural Grid Lines
   AWS / engineering / blueprint aesthetic. Thin straight lines
   in a uniform grid imply precision, structure, and trust.
   Perfect for an education platform — looks like a textbook
   grid or a CAD canvas. No animation, no color tint.
   ============================================================ */
.hero.hero-v2 {
  overflow: hidden !important;
  position: relative;
  /* Base = deep neutral with very subtle vignette so the grid
     fades slightly at the edges (no harsh borders). */
  background:
    radial-gradient(ellipse 90% 75% at 50% 35%, #1d1d22 0%, #141417 70%, #0e0e11 100%);
}

/* Safety: keep horizontal scroll off even if the no-wrap H1 line
   overflows slightly on very narrow phones (iPhone SE etc.) —
   the hero shows the visible portion, page won't side-scroll. */
body { overflow-x: hidden; }
.hero.hero-v2 .hero-line {
  overflow: hidden !important;
  text-overflow: clip !important;
}

/* On mobile: shrink the hero container's side padding so the
   big H1 has more horizontal room before it overflows. The big
   font-size from index.html needs every pixel it can get on
   narrow Pixel/iPhone widths. */
@media (max-width: 600px) {
  .hero.hero-v2 .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .hero.hero-v2 .hero-title {
    max-width: 100% !important;
  }

  /* Shrink the CTA buttons on mobile so they read as subordinate
     to the big headline. Compact pill shape, lighter shadow,
     small icon — still tap-friendly (~38-40px tall) but reads
     as supporting action rather than competing with the brand
     statement above. */
  .hero.hero-v2 .hero-cta-primary,
  .hero.hero-v2 .hero-actions .btn-outline {
    padding: 7px 14px !important;
    font-size: 0.76rem !important;
    width: auto !important;
    min-height: 0 !important;
    box-shadow: 0 2px 8px -2px rgba(99, 91, 255, 0.22) !important;
    gap: 6px !important;
  }
  /* Make the arrow icon inside the primary CTA smaller too,
     proportional to the new text size. */
  .hero.hero-v2 .hero-cta-primary svg {
    width: 13px !important;
    height: 13px !important;
  }
  .hero.hero-v2 .hero-actions {
    flex-direction: row !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-bottom: 28px !important;
  }
}

/* The grid itself sits on a pseudo-element so we can fade it
   at the corners via a radial mask — keeps the lines feeling
   premium instead of "graph paper". */
.hero.hero-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Layered linear gradients = vertical + horizontal lines.
     Major grid every 96px, minor grid every 24px for hierarchy. */
  background-image:
    /* Major vertical lines */
    linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    /* Major horizontal lines */
    linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    /* Minor vertical lines */
    linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    /* Minor horizontal lines */
    linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size:
    96px 96px,
    96px 96px,
    24px 24px,
    24px 24px;
  /* Mask the grid to fade out at edges — radial vignette so
     the corners feel atmospheric, not boxed-in. */
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 90%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 90%);
}

/* Light mode — same grid pattern with slate-gray lines on warm white */
[data-theme="light"] .hero.hero-v2 {
  background:
    radial-gradient(ellipse 90% 75% at 50% 35%, #ffffff 0%, #fafafa 70%, #f1f5f9 100%);
}
[data-theme="light"] .hero.hero-v2::before {
  background-image:
    linear-gradient(to right, rgba(15, 23, 42, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.08) 1px, transparent 1px),
    linear-gradient(to right, rgba(15, 23, 42, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.03) 1px, transparent 1px);
}

/* Hide ALL the legacy decorative aurora / mesh / grid markup */
.hero.hero-v2 .hero-mesh,
.hero.hero-v2 .hero-mesh-blob,
.hero.hero-v2 .hero-mesh-grid,
.hero.hero-v2 .mesh-blob-a,
.hero.hero-v2 .mesh-blob-b,
.hero.hero-v2 .mesh-blob-c {
  display: none !important;
}

/* Content sits above the grid */
.hero.hero-v2 .container { position: relative; z-index: 2; }

/* ============================================================
   DARK BACKGROUND — pure flat #18181B. No stars, no galaxy,
   no nebula. Removed because the star field's 35 radial
   gradients + background-attachment: fixed combo was forcing
   a full-page repaint on every scroll pixel, especially
   painful on mobile. Net result: dramatically smoother scroll,
   no jank, no lag. The foreground content (cards, headline,
   buttons) does all the visual work now.
   ============================================================ */
[data-theme="dark"] body {
  background-color: #18181B !important;
  background-image: none !important;
}
[data-theme="light"] body {
  background-color: #fafafa !important;
  background-image: none !important;
}

/* Hero used to be transparent for the old Saturn background.
   Now the hero has its own cosmic background (aurora + starfield)
   defined in the AURORA section below — let that one win. */
[data-theme="dark"] .hero.hero-v2 {
  /* background overrides handled by the cosmic section below */
}
[data-theme="dark"] .phases-preview,
[data-theme="dark"] .features,
[data-theme="dark"] .curriculum,
[data-theme="dark"] .testimonials,
[data-theme="dark"] .about-section,
[data-theme="dark"] section {
  background: transparent !important;
}

/* ============================================================
   SATURN-STYLE PLANET BACKGROUND — sphere with tilted rings,
   atmosphere halo, scattered stars. Grok-inspired.
   ============================================================ */

.hero.hero-v2 .hero-saturn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  animation: saturnBreathe 14s ease-in-out infinite;
  will-change: transform;
  /* Light blur — Saturn reads as atmospheric background but
     keeps enough detail to look like a planet, not a smear.
     Foreground content still pops because it's a separate layer. */
  filter: blur(5px);
  opacity: 0.8;
}
[data-theme="light"] .hero.hero-v2 .hero-saturn {
  filter: blur(5px);
  opacity: 0.5;
}

@keyframes saturnBreathe {
  0%, 100% { transform: scale(1) translateY(0); }
  50%      { transform: scale(1.015) translateY(-4px); }
}

/* Star twinkle — staggered fade across the field */
.hero.hero-v2 .saturn-stars circle {
  animation: starTwinkle 6s ease-in-out infinite;
}
.hero.hero-v2 .saturn-stars circle:nth-child(2n)  { animation-duration: 5s; animation-delay: -2s; }
.hero.hero-v2 .saturn-stars circle:nth-child(3n)  { animation-duration: 7s; animation-delay: -3s; }
.hero.hero-v2 .saturn-stars circle:nth-child(4n)  { animation-duration: 8s; animation-delay: -1s; }
.hero.hero-v2 .saturn-stars circle:nth-child(5n)  { animation-duration: 4s; animation-delay: -4s; }

@keyframes starTwinkle {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .hero.hero-v2 .hero-saturn { animation: none !important; }
  .hero.hero-v2 .saturn-stars circle { animation: none !important; }
  .hero.hero-v2 .saturn-streaks,
  .hero.hero-v2 .saturn-streaks-front { animation: none !important; }
}

/* Sci-fi motion streaks — slow pulse so the light beam feels alive */
.hero.hero-v2 .saturn-streaks {
  transform-origin: 720px 387px;
  animation: streakPulse 8s ease-in-out infinite;
  mix-blend-mode: screen;
}
.hero.hero-v2 .saturn-streaks-front {
  transform-origin: 720px 387px;
  animation: streakPulse 8s ease-in-out infinite reverse;
  animation-delay: -2s;
  mix-blend-mode: screen;
}

@keyframes streakPulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

/* Light mode: dim the planet so it doesn't overwhelm white text below */
[data-theme="light"] .hero.hero-v2 .hero-saturn { opacity: 0.55; }

/* (Legacy liquid sphere CSS retained below for fallback / easy revert) */

/* Solid dark base — html and hero both stay on the same flat
   #18181B so there's no seam between sections. */
[data-theme="dark"] html {
  background-color: #18181B !important;
}
[data-theme="dark"] .hero.hero-v2 {
  background-color: transparent !important;
}
[data-theme="light"] html {
  background-color: #fafafa !important;
}
[data-theme="light"] .hero.hero-v2 {
  background-color: transparent !important;
}

.hero.hero-v2 .hero-waves {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  overflow: hidden !important;
}

/* Sphere stage — anchors the orb to the center of the hero */
.hero.hero-v2 .hero-sphere-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 760px;
  height: 760px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Outer halo — soft ambient glow extending past the sphere body */
.hero.hero-v2 .hero-sphere-halo {
  position: absolute;
  inset: -160px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(99, 91, 255, 0.30) 0%,
    rgba(99, 91, 255, 0.12) 35%,
    rgba(99, 91, 255, 0.04) 60%,
    transparent 80%);
  filter: blur(24px);
  animation: sphereHaloBreathe 18s ease-in-out infinite;
  will-change: transform, opacity;
}
[data-theme="light"] .hero.hero-v2 .hero-sphere-halo {
  background: radial-gradient(circle,
    rgba(99, 91, 255, 0.16) 0%,
    rgba(99, 91, 255, 0.08) 35%,
    rgba(99, 91, 255, 0.02) 60%,
    transparent 80%);
}

/* The sphere body — gradient orb with 3D shading */
.hero.hero-v2 .hero-sphere {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%,
      rgba(165, 172, 255, 0.95) 0%,
      rgba(139, 158, 255, 0.80) 12%,
      rgba(99, 91, 255, 0.70) 30%,
      rgba(76, 29, 149, 0.55) 55%,
      rgba(49, 46, 129, 0.40) 75%,
      rgba(10, 10, 24, 0.85) 100%);
  box-shadow:
    inset -40px -50px 100px rgba(10, 10, 24, 0.5),
    inset 30px 40px 80px rgba(165, 172, 255, 0.15);
  animation: sphereBreathe 12s ease-in-out infinite;
  will-change: transform;
  overflow: hidden;
}
[data-theme="light"] .hero.hero-v2 .hero-sphere {
  background:
    radial-gradient(circle at 35% 30%,
      rgba(255, 255, 255, 0.85) 0%,
      rgba(197, 203, 245, 0.65) 18%,
      rgba(139, 158, 255, 0.50) 40%,
      rgba(99, 91, 255, 0.32) 65%,
      rgba(99, 91, 255, 0.08) 90%);
  box-shadow:
    inset -40px -50px 100px rgba(76, 29, 149, 0.2),
    inset 30px 40px 80px rgba(255, 255, 255, 0.4);
}

/* Drifting inner highlight — like light reflecting on glass */
.hero.hero-v2 .hero-sphere-highlight {
  position: absolute;
  top: 14%;
  left: 18%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.12) 35%,
    transparent 65%);
  filter: blur(25px);
  animation: highlightDrift 14s ease-in-out infinite;
  will-change: transform;
}

@keyframes sphereHaloBreathe {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.08); }
}
@keyframes sphereBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}
@keyframes highlightDrift {
  0%, 100% { transform: translate(0,    0)    rotate(0deg); }
  33%      { transform: translate(30px, -20px) rotate(8deg); }
  66%      { transform: translate(-20px, 30px) rotate(-6deg); }
}

/* Bottom vignette — fades the lower sphere edge into the body
   color so there's no sharp line into the next section. */
/* Bottom vignette removed — was painting solid #0a0a18 over the
   body's fixed star field at the hero's bottom, which made the
   stars disappear over the last 22% of the hero, then reappear
   below it. The visible "no stars → stars" band looked like a
   horizontal color cut. With the vignette gone, the body's
   global star field shows continuously through the hero into
   every section underneath. */
.hero.hero-v2 .hero-waves::after { content: none !important; }

@media (max-width: 720px) {
  .hero.hero-v2 .hero-sphere-stage {
    width: 540px;
    height: 540px;
  }
  .hero.hero-v2 .hero-sphere-highlight {
    width: 160px;
    height: 160px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero.hero-v2 .hero-sphere-halo,
  .hero.hero-v2 .hero-sphere,
  .hero.hero-v2 .hero-sphere-highlight {
    animation: none !important;
  }
}
.hero.hero-v2 .hero-mesh-blob {
  display: block !important;
  position: absolute !important;
  border-radius: 50% !important;
  filter: blur(140px) !important;
  opacity: 0.45 !important;
  will-change: transform !important;
  animation: auroraDrift 32s ease-in-out infinite !important;
}
[data-theme="dark"] .hero.hero-v2 .hero-mesh-blob {
  opacity: 0.55 !important;
  filter: blur(130px) !important;
}
.hero.hero-v2 .mesh-blob-a {
  width: 520px !important; height: 520px !important;
  top: -140px !important; left: -120px !important;
  background: #635bff !important;
  animation-duration: 32s !important;
}
.hero.hero-v2 .mesh-blob-b {
  width: 620px !important; height: 620px !important;
  top: 28% !important; right: -180px !important; left: auto !important;
  background: #4c1d95 !important;
  animation-duration: 38s !important;
  animation-delay: -10s !important;
}
.hero.hero-v2 .mesh-blob-c {
  /* Sit half above / half below the hero boundary so the blur
     smears across the section line and there's no visible seam. */
  width: 520px !important; height: 520px !important;
  bottom: -260px !important; left: 30% !important; top: auto !important;
  background: #8b9eff !important;
  animation-duration: 35s !important;
  animation-delay: -18s !important;
}
.hero.hero-v2 .hero-mesh-grid { display: none !important; }

/* Make sure hero content stays clearly above the aurora layer */
.hero.hero-v2 .container,
.hero.hero-v2 .hero-centered {
  position: relative;
  z-index: 1;
}

@keyframes auroraDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(60px, -40px, 0) scale(1.08); }
  66%      { transform: translate3d(-40px, 50px, 0) scale(0.94); }
}

@media (prefers-reduced-motion: reduce) {
  .hero.hero-v2 .hero-mesh-blob { animation: none !important; }
}

/* Re-enable the animated indigo gradient on "Roadmap" only — the rest
   of the hero title stays solid. The original keyframes (gradientShift)
   still live higher up in this file; we just stop overriding them. */
.hero h1 .highlight {
  background: none !important;
  -webkit-text-fill-color: var(--text) !important;
  color: var(--text) !important;
  animation: none !important;
}
.hero-title-gradient {
  /* Same bright-violet palette as the primary rule above —
     just re-declared here with !important so this block,
     which lives inside the Emil-theme overrides, can't fall
     back to the old dark gradient that was invisible against
     the #18181B background. */
  background: linear-gradient(90deg,
    #7c3aed 0%,
    #8b5cf6 18%,
    #a78bfa 35%,
    #c084fc 50%,
    #a78bfa 65%,
    #8b5cf6 82%,
    #7c3aed 100%
  ) !important;
  background-size: 300% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: gradientShift 5s linear infinite !important;
}

/* "Skills You'll Build" section — trimmed back to a normal section
   gap now that the Outcome Strip + Phases Preview fill the space
   between hero and this section. */
section.features,
#features {
  padding-top: 72px !important;
}
.features-header {
  margin-top: 0 !important;
}

/* ============================================================
   OUTCOME STRIP — bold stats below the hero
   ============================================================ */
.outcome-strip {
  padding: 56px 0 32px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.outcome-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.outcome-stat-num {
  font-family: 'Inter Tight', sans-serif !important;
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 8px;
  background: linear-gradient(180deg, var(--text) 0%, var(--text-light) 120%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.outcome-stat-label {
  font-size: 13px;
  color: var(--text-light);
  letter-spacing: -0.005em;
}
@media (max-width: 640px) {
  .outcome-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}

/* ============================================================
   PHASES PREVIEW — 4-card grid below the outcome strip
   ============================================================ */
.phases-preview {
  padding: 72px 0;
}
.phases-preview-header {
  text-align: center;
  max-width: 580px;
  margin: 0 auto 40px;
}
.phases-preview-eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  font-weight: 500;
  margin-bottom: 12px;
}
.phases-preview-h {
  font-size: clamp(26px, 4vw, 36px) !important;
  letter-spacing: -0.025em !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  margin-bottom: 12px !important;
  color: var(--text);
}
.phases-preview-sub {
  font-size: 15px;
  color: var(--text-light);
  line-height: 1.55;
}
.phases-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 880px;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .phases-preview-grid { grid-template-columns: 1fr; }
}
.phase-card {
  display: block;
  padding: 24px 22px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
  position: relative;
  overflow: hidden;
}
.phase-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--primary) 4%, var(--card-bg));
}
.phase-card:hover .phase-card-arrow { transform: translateX(3px); color: var(--primary); }
.phase-card-num {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px;
  font-weight: 500;
  color: var(--primary);
  letter-spacing: 0.04em;
  margin-bottom: 14px;
  display: inline-block;
  padding: 3px 9px;
  background: var(--primary-light);
  border-radius: 6px;
}
.phase-card h3 {
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 6px !important;
  color: var(--text);
}
.phase-card p {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--text-light);
  margin-bottom: 18px !important;
}
.phase-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px;
  color: var(--text-light);
  font-weight: 500;
  letter-spacing: 0.02em;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.phase-card-arrow {
  transition: transform 0.2s ease, color 0.2s ease;
  color: var(--text-light);
}

/* ---------- 4. Cards, posts, items — hairline borders only, no shadows ---------- */
.card,
.post,
.win-item,
.ann-item,
.faq-item,
.event-card,
.bento-card,
.feature-card,
.about-pillar,
.course-card,
.lesson-card,
.pricing-card,
.testimonial-card,
.outcome-card,
.member-card,
.dm-conversation,
.auth-card,
.admin-editor-card,
.dash-card,
.lesson-locked,
.key-takeaways,
.quiz-section,
.assignment-section,
.qa-section,
.sub-inspector,
.avatar-adjuster,
.cert-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.card:hover,
.post:hover,
.win-item:hover,
.bento-card:hover,
.feature-card:hover,
.event-card:hover,
.about-pillar:hover,
.course-card:hover,
.lesson-card:hover,
.member-card:hover {
  border-color: var(--border-strong) !important;
  box-shadow: none !important;
  transform: none !important;
}
/* Section backgrounds — keep flat, hairline-divided */
section, .section, .dash-section { background: transparent !important; }

/* ---------- 5. Buttons — Emil's filled/ghost duo ---------- */
.btn {
  border-radius: 8px !important;
  font-family: 'Inter Tight', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  padding: 9px 16px !important;
  font-size: 14px !important;
  transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
  box-shadow: none !important;
}
.btn-primary {
  background: var(--text) !important;
  color: var(--bg) !important;
  border: 1px solid var(--text) !important;
}
.btn-primary:hover {
  opacity: 0.85 !important;
  transform: translateY(-1px) !important;
  background: var(--text) !important;
  color: var(--bg) !important;
}
.btn-outline {
  background: transparent !important;
  color: var(--text-light) !important;
  border: 1px solid var(--border-strong) !important;
}
.btn-outline:hover {
  color: var(--text) !important;
  border-color: var(--text-light) !important;
  background: transparent !important;
}

/* ---------- 6. Navbar — frosted, hairline bottom ---------- */
.navbar {
  background: color-mix(in srgb, var(--bg) 85%, transparent) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.navbar.scrolled {
  background: color-mix(in srgb, var(--bg) 92%, transparent) !important;
  box-shadow: none !important;
}
.logo {
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  font-size: 15px !important;
}
.nav-links a {
  font-size: 14px !important;
  color: var(--text-light) !important;
  font-weight: 400 !important;
}
.nav-links a:hover { color: var(--text) !important; }

/* ---------- 7. Hero — strip decoration, narrow column ---------- */
.hero, .hero.hero-v2 {
  background: transparent !important;
  padding: clamp(72px, 9vw, 110px) 0 clamp(40px, 6vw, 64px) !important;
}
.hero-centered, .hero .container, .hero-bento {
  max-width: 640px !important;
  margin: 0 auto !important;
  text-align: center !important;
  display: block !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}
.hero p {
  color: var(--text-light) !important;
  font-size: 17px !important;
  max-width: 480px !important;
  margin: 0 auto 28px !important;
  line-height: 1.55 !important;
}
.hero-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 10px !important;
  border: 1px solid var(--border) !important;
  border-radius: 100px !important;
  font-size: 11px !important;
  color: var(--text-light) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  background: transparent !important;
  margin-bottom: 22px !important;
}
/* Removed duplicate dot — the HTML already has <span class="hero-pulse"></span>
   inside the eyebrow which renders the pulsing indigo dot. The CSS
   ::before was stacking a second static dot beside it. */
.hero-eyebrow::before {
  content: none !important;
}
.hero-actions {
  display: flex !important;
  gap: 8px !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}

/* Sphere card (bento-logo-centered) — keep but flatten */
.bento-logo-centered, .bento-card.bento-logo {
  background: var(--bg-alt) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  margin: 24px auto !important;
  max-width: fit-content !important;
}

/* Mini-cards (Live community + Marketing Intern Graduate) */
.bento-live, .bento-graduate, .bento-mini {
  background: var(--bg-alt) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
}

/* ---------- 8. Inputs / textareas ---------- */
input, textarea, select {
  background: var(--bg-alt) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 8px !important;
  font-family: 'Inter Tight', sans-serif !important;
  font-size: 14px !important;
  padding: 10px 12px !important;
  transition: border-color 0.15s ease !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--text-light) !important;
  box-shadow: none !important;
}
@media (max-width: 768px) {
  input, textarea, select { font-size: 16px !important; }
}

/* ---------- 9. Tables (admin students table) ---------- */
.students-table thead th {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--text-light) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}
.students-table tbody td {
  border-bottom: 1px solid var(--border) !important;
  font-size: 14px !important;
}
.students-table tbody tr:hover {
  background: color-mix(in srgb, var(--text) 3%, var(--bg)) !important;
}

/* ---------- 10. Badges, pills, chips ---------- */
.role-badge, .status-badge, .tag, .chip {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: 100px !important;
  padding: 3px 9px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg) !important;
  color: var(--text-light) !important;
}
.role-badge.admin {
  background: var(--primary-light) !important;
  color: var(--primary) !important;
  border-color: transparent !important;
}
.role-badge.student {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text-light) !important;
}
.status-badge.active {
  background: rgba(34, 197, 94, 0.1) !important;
  color: #16a34a !important;
  border-color: transparent !important;
}
.status-badge.pending {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
}

/* ---------- 11. Course cards — flatten ---------- */
.course-card { border-radius: 10px !important; overflow: hidden !important; }
.course-card-img { border-radius: 0 !important; }
.course-card-body h3 {
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* ---------- 12. Lesson sidebar ---------- */
.lesson-sidebar {
  background: var(--bg) !important;
  border-right: 1px solid var(--border) !important;
}
.sidebar-lesson {
  border-left: 2px solid transparent !important;
  font-size: 13px !important;
  color: var(--text-light) !important;
}
.sidebar-lesson.active {
  background: color-mix(in srgb, var(--primary) 6%, var(--bg)) !important;
  color: var(--text) !important;
  border-left-color: var(--primary) !important;
  font-weight: 500 !important;
}
.sidebar-module-title {
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  font-weight: 500 !important;
}

/* ---------- 13. Lesson content typography ---------- */
.lesson-body {
  font-size: 15px !important;
  line-height: 1.7 !important;
}
.lesson-body h2 {
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  margin: 40px 0 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--border) !important;
}
.lesson-body h2:first-child { border-top: none !important; padding-top: 0 !important; }
.lesson-body h3 {
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
}
.lesson-body p { font-size: 15px !important; color: var(--text) !important; }
.lesson-body ul, .lesson-body ol { padding-left: 22px !important; }
.lesson-body li { color: var(--text) !important; font-size: 15px !important; }
.lesson-body strong { color: var(--text) !important; font-weight: 600 !important; }

/* Pro Tip / Key Takeaways callouts — flatten */
.key-takeaways {
  background: var(--bg-alt) !important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--primary) !important;
  border-radius: 8px !important;
  padding: 18px 20px !important;
}
.key-takeaways h3 {
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--primary) !important;
  margin-bottom: 10px !important;
}

/* ---------- 14. Avatars — keep but neutralize gradient ---------- */
.nav-profile-avatar, .composer-avatar, .members-avatar {
  background: var(--text) !important;
  color: var(--bg) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
}

/* ---------- 15. Feed / tabs ---------- */
.dash-tabs, .members-tabs {
  border-bottom: 1px solid var(--border) !important;
  background: transparent !important;
}
.dash-tab-item, .members-tab {
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  color: var(--text-light) !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
}
.dash-tab-item.active, .members-tab.active {
  color: var(--text) !important;
  border-bottom-color: var(--text) !important;
  background: transparent !important;
}

/* ---------- 16. Animations — fade-up on scroll (Emil signature) ---------- */
.fade-up-emil {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.fade-up-emil.in-view {
  opacity: 1;
  transform: translateY(0);
}
.fade-up-emil.in-view.d1 { transition-delay: 80ms; }
.fade-up-emil.in-view.d2 { transition-delay: 160ms; }
.fade-up-emil.in-view.d3 { transition-delay: 240ms; }
.fade-up-emil.in-view.d4 { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  .fade-up-emil { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- 17. Footer ---------- */
footer {
  border-top: 1px solid var(--border) !important;
  background: transparent !important;
  padding: 28px 0 !important;
  font-size: 12px !important;
  color: var(--text-muted) !important;
}

/* ---------- 18. Misc decorative items to hide / flatten ---------- */
.live-pulse-dot, .notif-badge { animation: none !important; }
.gradient-text {
  background: none !important;
  -webkit-text-fill-color: var(--text) !important;
  color: var(--text) !important;
}

/* ---------- 19. Auth (login/signup) — center, narrow, calm ---------- */
.auth-page { background: var(--bg) !important; padding: 80px 20px !important; }
.auth-card {
  max-width: 380px !important;
  margin: 0 auto !important;
  padding: 32px 28px !important;
}
.auth-subtitle { color: var(--text-light) !important; font-size: 14px !important; }
.auth-footer { font-size: 13px !important; color: var(--text-light) !important; }

/* ---------- 20. Sticky bar / Mark Complete — flatten ---------- */
.sticky-bar, .lesson-complete-btn {
  background: var(--text) !important;
  color: var(--bg) !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  border: none !important;
  box-shadow: none !important;
}
.lesson-complete-btn.completed {
  background: var(--bg-alt) !important;
  color: var(--text-light) !important;
  border: 1px solid var(--border) !important;
}

/* ============================================================
   HERO + PHASES ALIGNMENT PASS (May 18, scaled-up edition)
   - Wider hero column (780px) so the title fits on one line
   - Bigger navbar logo, title, CTAs, bento cards, avatars
   - Same equal-height / center-axis discipline as before
   ============================================================ */

/* Centered hero column — back to a balanced 880px now that the
   headline is a two-liner (no longer needs to stretch wide). All
   other children center within this container via their own
   max-widths. */
.hero.hero-v2 .hero-centered {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  max-width: 880px !important;
  margin: 0 auto !important;
  gap: 28px !important;
}

/* Hero title — uppercase two-liner. Each line is wrapped in a
   .hero-line span with white-space: nowrap so neither line can
   collapse into a third row regardless of viewport width.
     Line 1: BECOME A MARKETER BUSINESSES
     Line 2: CAN TRUST TO GROW.
   Font is intentionally kept small enough that line 1 fits on a
   typical phone-width viewport, since nowrap would otherwise force
   horizontal overflow. */
html body .hero.hero-v2 .hero-title,
html body .hero.hero-v2 h1.hero-title {
  display: block !important;
  font-size: clamp(18px, 2.6vw, 36px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  white-space: normal !important;
  text-align: center !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  overflow: visible !important;
}
html body .hero.hero-v2 .hero-title .hero-line,
html body .hero.hero-v2 h1.hero-title .hero-line {
  display: block !important;
  white-space: nowrap !important;
  overflow: visible !important;
  width: auto !important;
  max-width: none !important;
}
@media (max-width: 720px) {
  html body .hero.hero-v2 .hero-title,
  html body .hero.hero-v2 h1.hero-title {
    font-size: clamp(15px, 4.4vw, 26px) !important;
    max-width: 96vw !important;
  }
  html body .hero.hero-v2 .hero-title .hero-line,
  html body .hero.hero-v2 h1.hero-title .hero-line {
    white-space: nowrap !important;
  }
}
@media (max-width: 380px) {
  html body .hero.hero-v2 .hero-title,
  html body .hero.hero-v2 h1.hero-title {
    font-size: clamp(13px, 4vw, 22px) !important;
  }
}

/* Subheadline rules removed — the .hero-sub element was deleted
   from index.html per user request ("remove the text 16 hands-on
   lessons..."), so its dedicated rules here would only apply to
   ghosts. Other .hero-sub rules elsewhere in the file are scoped
   to different sections (course/lesson) and stay in place. */

/* Testimonial cards — the Emil theme flattened their dark gradient
   background to white but the text inside is still styled white,
   so the quote becomes invisible on light mode. Force theme-aware
   text colors on all the testimonial inner elements. */
.testimonial-card {
  color: var(--text) !important;
}
.testimonial-card blockquote {
  color: var(--text) !important;
}
.testimonial-card .testimonial-stars {
  color: #f59e0b !important;
}
.testimonial-card .testimonial-name strong,
.testimonial-card .testimonial-name b {
  color: var(--text) !important;
}
.testimonial-card .testimonial-name span {
  color: var(--text-light) !important;
}

/* CTA microcopy — small trust signals immediately below the buttons */
.hero.hero-v2 .hero-cta-microcopy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px !important;
  color: var(--text-light) !important;
  margin: -10px auto 0 !important;
  letter-spacing: -0.005em;
  font-weight: 500;
}
.hero.hero-v2 .hero-cta-microcopy span:first-child {
  color: var(--text);
  font-weight: 600;
}

/* Empty spacer where the trust microcopy used to live — preserves
   the vertical rhythm between CTAs and the Sphere badge card. */
.hero.hero-v2 .hero-cta-microcopy-spacer {
  height: 8px;
}

/* Navbar logo — bigger image + bolder wordmark */
.logo {
  font-size: 17px !important;
  font-weight: 700 !important;
  gap: 10px !important;
}
.logo-icon {
  width: 38px !important;
  height: 38px !important;
}
.logo-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* CTA buttons — bigger pill shape */
.hero.hero-v2 .hero-actions .btn,
.hero.hero-v2 .hero-cta-primary,
.hero.hero-v2 .btn-primary,
.hero.hero-v2 .btn-outline {
  padding: 14px 26px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 100px !important;
  letter-spacing: -0.005em !important;
}
.hero.hero-v2 .hero-actions .btn svg {
  width: 18px !important;
  height: 18px !important;
}
.hero.hero-v2 .hero-actions {
  gap: 12px !important;
}

/* Sphere card — wider, taller, more premium */
.hero.hero-v2 .bento-logo-centered {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  width: auto !important;
  max-width: 380px !important;
  margin: 6px auto !important;
  padding: 18px 26px !important;
}
.hero.hero-v2 .bento-logo-img {
  width: 52px !important;
  height: 52px !important;
}
.hero.hero-v2 .bento-logo-meta strong {
  font-size: 17px !important;
  font-weight: 700 !important;
}
.hero.hero-v2 .bento-logo-meta span {
  font-size: 12px !important;
}

/* Mini-cards row — bigger, equal-height grid */
.hero.hero-v2 .hero-mini-cards {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 640px !important;
  margin: 0 auto !important;
  align-items: stretch !important;
}
.hero.hero-v2 .bento-live,
.hero.hero-v2 .bento-outcome {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 20px 22px !important;
  height: 100% !important;
  min-height: 84px !important;
}
.hero.hero-v2 .bento-live-pulse {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}
.hero.hero-v2 .bento-outcome-icon {
  width: 48px !important;
  height: 48px !important;
  flex-shrink: 0 !important;
}
.hero.hero-v2 .bento-live-meta,
.hero.hero-v2 .bento-outcome-text {
  text-align: left !important;
  min-width: 0 !important;
  flex: 1 !important;
}
.hero.hero-v2 .bento-live-meta strong,
.hero.hero-v2 .bento-outcome-text strong {
  font-size: 15px !important;
  font-weight: 700 !important;
}
.hero.hero-v2 .bento-live-meta span,
.hero.hero-v2 .bento-outcome-text span {
  font-size: 12px !important;
}

/* Trust strip — bigger avatars, stacked above caption */
.hero.hero-v2 .hero-trust {
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 16px auto 0 !important;
  width: fit-content !important;
}
.hero.hero-v2 .hero-trust-avatars {
  display: flex !important;
  justify-content: center !important;
}
.hero.hero-v2 .trust-avatar {
  width: 36px !important;
  height: 36px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: 2px solid var(--bg) !important;
}
.hero.hero-v2 .trust-avatar + .trust-avatar {
  margin-left: -10px !important;
}
.hero.hero-v2 .hero-trust p {
  margin: 0 !important;
  text-align: center !important;
  font-size: 14px !important;
  color: var(--text-light) !important;
}

/* Hero eyebrow — slightly bigger to match the scaled-up hero */
.hero.hero-v2 .hero-eyebrow {
  font-size: 12px !important;
  padding: 6px 14px !important;
  letter-spacing: 0.06em !important;
}

/* Move "What's Inside / Four phases" section down ~5cm (188px) */
.phases-preview {
  padding-top: 260px !important; /* 72 normal + 188 (5cm) added */
}

/* ============================================================
   VIDEO PLAYER EMPTY STATES — admin inline composer + student "soon"
   ============================================================ */
.video-player-admin,
.video-player-coming {
  background: var(--bg-alt) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.video-player-admin .play-btn,
.video-player-coming .play-btn,
.video-player-admin .video-duration,
.video-player-coming .video-duration { display: none !important; }

.video-empty-admin,
.video-empty-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 28px;
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}
.video-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.video-empty-admin h3,
.video-empty-soon h3 {
  font-family: 'Inter Tight', sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  margin: 0 0 6px !important;
  color: var(--text) !important;
}
.video-empty-admin p,
.video-empty-soon p {
  font-size: 14px !important;
  color: var(--text-light) !important;
  line-height: 1.5 !important;
  margin: 0 0 16px !important;
}
.video-empty-hint {
  color: var(--primary);
  font-weight: 500;
}
.video-empty-form {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.video-empty-form input[type="url"] {
  flex: 1;
  min-width: 200px;
  padding: 11px 14px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  font-size: 14px !important;
  font-family: inherit !important;
}
.video-empty-form input[type="url"]:focus {
  outline: none !important;
  border-color: var(--primary) !important;
}
.video-empty-form .btn {
  flex-shrink: 0;
  padding: 11px 18px !important;
}
.video-empty-link {
  font-size: 13px;
  color: var(--text-light);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.video-empty-link:hover {
  color: var(--text);
  border-color: var(--text);
}

@media (max-width: 540px) {
  .video-empty-admin,
  .video-empty-soon { padding: 22px 18px; }
  .video-empty-form { flex-direction: column; }
  .video-empty-form input[type="url"],
  .video-empty-form .btn { width: 100% !important; }
}

/* ============================================================
   ROTATING WORD — the headline's last word cycles through
   GROW → SCALE → LEAD → DELIVER → ALIGN with a soft
   scale+blur+fade swap. This class is now applied to the
   same element as .hero-title-gradient so the gradient
   clips directly to the text (avoids the nested-span
   background-clip issue that left the word invisible in
   some browsers). JS toggles .is-swapping every ~3.5s.
   ============================================================ */
.rotating-word {
  /* line-height: 1 ensures the transform doesn't bleed into
     the line above or below. will-change reserves a paint
     layer so the swap animates on the GPU without juddering
     the rest of the headline. */
  line-height: 1;
  will-change: opacity, transform, filter;
}
/* When the rotating-word is ALSO the gradient element, we
   need both gradientShift (continuous) AND wordSwap (one-shot)
   running together. Use comma-separated animation values so
   the gradient flow never pauses during the text swap. */
.hero-title-gradient.rotating-word.is-swapping {
  animation:
    gradientShift 5s linear infinite,
    wordSwap 0.9s cubic-bezier(0.65, 0, 0.35, 1) !important;
}
@keyframes wordSwap {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
  45% {
    opacity: 0;
    transform: scale(0.82);
    filter: blur(8px);
  }
  55% {
    opacity: 0;
    transform: scale(1.18);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}
/* Respect motion preferences — users who asked for reduced
   motion get an instant text swap with no scale animation. */
@media (prefers-reduced-motion: reduce) {
  .rotating-word.is-swapping { animation: none; }
  .hero-title-gradient.rotating-word.is-swapping {
    animation: gradientShift 5s linear infinite !important;
  }
}

/* ============================================================
   LIGHT MODE OVERRIDE — the dark-mode gradient (#7c3aed →
   #c084fc) goes too light against a white background. The
   #c084fc and #a78bfa stops are nearly invisible on #fafafa.
   Use deeper violets so every stop has at least 4.5:1 contrast
   against the light background. The animation stays the same
   so motion is identical between themes.

   CRITICAL: use `background-image` instead of the `background`
   shorthand. The shorthand resets `background-clip` to its
   initial value (border-box), which makes the gradient render
   as a solid violet rectangle instead of being clipped to the
   text shape. Setting `background-image` alone leaves clip,
   color, etc. untouched from the base rule.
   ============================================================ */
[data-theme="light"] .hero-title-gradient,
[data-theme="light"] .hero-title-gradient.rotating-word {
  background-image: linear-gradient(90deg,
    #4c1d95 0%,
    #5b21b6 18%,
    #6d28d9 35%,
    #7c3aed 50%,
    #6d28d9 65%,
    #5b21b6 82%,
    #4c1d95 100%
  ) !important;
  background-size: 300% 100% !important;
  /* Belt-and-suspenders: re-assert the clip + transparent
     fill so this override can't accidentally lose them. */
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* ============================================================
   DASHBOARD SIDEBAR — ICON RAIL MODE (desktop only)
   Converts the original 240px text+icon sidebar into a slim
   64px icon-only rail pinned to the left edge of the viewport.
   Mobile keeps its existing drawer behavior. The rail also
   absorbs the search / profile / night-mode / logout actions
   that used to live in the top navbar.
   ============================================================ */
@media (min-width: 901px) {
  /* Pin the rail to the screen edge, full-height. The grid
     padding is removed on the LEFT so nothing sits to the
     left of the rail. */
  .dash-layout {
    grid-template-columns: 64px 1fr !important;
    gap: 0 !important;
    padding: 0 24px 0 0 !important;
    max-width: none !important;
  }
  .dash-sidebar.dash-sidebar-rail {
    position: fixed !important;
    left: 0 !important;
    top: 72px !important;       /* sits flush under the navbar */
    bottom: 0 !important;
    width: 64px !important;
    align-self: stretch !important;
    border-radius: 0 !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: 1px solid var(--border) !important;
    box-shadow: none !important;
    padding: 14px 8px !important;
    background: var(--bg) !important;
    z-index: 90 !important;
    /* The rail itself stays overflow:visible so tooltips (which
       render via ::after positioned 14px to the right of each
       icon) can escape the 64px column. Vertical scrolling is
       delegated to the inner .dash-sidebar-nav so the rail can
       still let tooltips peek out the side while items inside
       scroll independently on short laptop viewports. */
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* Inner nav handles vertical scroll when total item height
     exceeds the rail height. Tooltips on each link are positioned
     using `position: fixed` (see override below) so they escape
     even though this container has overflow-y. The custom
     scrollbar is hidden to keep the rail clean. */
  .dash-sidebar.dash-sidebar-rail .dash-sidebar-nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
    /* Hide scrollbar everywhere — content scrolls fine without
       a visible bar since the user can drag-scroll on touch and
       hover-wheel-scroll on desktop. Keeps the rail pristine. */
    scrollbar-width: none !important;            /* Firefox */
    -ms-overflow-style: none !important;         /* IE/Edge */
  }
  .dash-sidebar.dash-sidebar-rail .dash-sidebar-nav::-webkit-scrollbar {
    display: none !important;                    /* Chromium/Safari */
    width: 0 !important;
    height: 0 !important;
  }
  /* The grid still allocates 64px on the left for the sidebar,
     so the main content's flow position is correct. The fixed
     position of the rail just paints it; the grid column
     prevents the main content from sliding underneath.

     Main content is constrained to a comfortable reading width
     and centered within the remaining viewport space (the 1fr
     column from the rail's right edge to the viewport's right
     edge). This keeps the feed visually balanced instead of
     stretching all the way across on wide monitors. */
  .dash-main {
    grid-column: 2 !important;
    width: 100% !important;
    max-width: 860px !important;
    margin: 0 auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  /* Each link becomes a centered 48×48 button. Text labels are
     hidden by default; tooltip shows on hover via the
     data-tooltip attribute. */
  .dash-sidebar-rail .dash-sidebar-link {
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 12px !important;
    position: relative !important;
    margin: 0 auto !important;
    gap: 0 !important;
  }
  .dash-sidebar-rail .dash-sidebar-link > span:not(.sidebar-badge) {
    display: none !important;
  }
  /* Badges (Announcements count, online dot, DM unread) need
     to float over the top-right corner of the icon since the
     text label they normally sit beside is gone. */
  .dash-sidebar-rail .dash-sidebar-link .sidebar-badge {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    font-size: 0.65rem !important;
    line-height: 16px !important;
    text-align: center !important;
  }
  /* Tooltip — superseded by the JS-managed .rail-tooltip in
     script.js, which uses position:fixed to escape the rail's
     overflow:auto container (the CSS pseudo-tooltips below
     were getting clipped once the nav started scrolling).
     Disabled here so the two tooltips don't render together. */
  .dash-sidebar-rail .dash-sidebar-link[data-tooltip]::after,
  .dash-sidebar-rail .dash-sidebar-link[data-tooltip]::before {
    display: none !important;
  }
  .dash-sidebar-rail .dash-sidebar-link[data-tooltip]:not(:hover)::after { /* legacy */
    content: none !important;
  }
  /* Original pseudo-tooltip rules kept below for reference but
     are no-ops because of the display:none rules above. */
  .dash-sidebar-rail .dash-sidebar-link[data-tooltip]._legacy::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    background: #0a0a0a;
    color: #fafafa;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.20);
    opacity: 0;
    transform: translateY(-50%) translateX(-4px);
    transition: opacity 0.15s ease 0.05s, transform 0.15s ease 0.05s;
  }
  /* Small triangle arrow on the left edge of the tooltip,
     pointing toward the icon. Built with CSS borders. */
  .dash-sidebar-rail .dash-sidebar-link[data-tooltip]::before {
    content: '';
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    border-style: solid;
    border-width: 5px 6px 5px 0;
    border-color: transparent #0a0a0a transparent transparent;
    pointer-events: none;
    z-index: 1000;
    opacity: 0;
    transform: translateY(-50%) translateX(-4px);
    transition: opacity 0.15s ease 0.05s, transform 0.15s ease 0.05s;
  }
  .dash-sidebar-rail .dash-sidebar-link[data-tooltip]:hover::after,
  .dash-sidebar-rail .dash-sidebar-link[data-tooltip]:hover::before {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
  /* Divider between navigation and account actions. */
  .dash-sidebar-rail .dash-sidebar-divider {
    width: 32px;
    height: 1px;
    background: var(--border);
    margin: 8px auto;
  }
  /* Action buttons (search/theme/logout) should match link styling.
     Reset native button defaults so they render identically to <a>. */
  .dash-sidebar-rail .dash-sidebar-action {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: var(--text) !important;
    font-family: inherit !important;
  }
  .dash-sidebar-rail .dash-sidebar-action:hover {
    background: var(--bg-alt) !important;
  }
  /* Logout gets a subtle warning hue on hover so destructive
     actions read differently from navigation. */
  .dash-sidebar-rail .dash-sidebar-logout:hover {
    background: rgba(220, 38, 38, 0.08) !important;
    color: #dc2626 !important;
  }
  /* Mobile close button is irrelevant in rail mode. */
  .dash-sidebar-rail .dash-sidebar-close {
    display: none !important;
  }

  /* ----- EXPANDED RAIL MODE — premium polish -----
     When the user clicks the toggle button, the sidebar grows
     from 64px to 240px and labels become visible. Icons stay
     left-aligned, labels sit right next to them, badges float
     to the right edge. Premium touches: brand header at top,
     section labels, refined active + hover states.

     Smooth motion: width transitions with a longer, gentler
     cubic-bezier so the rail eases into position. Labels +
     brand + section labels fade in once the rail has reached
     full width (staggered via animation-delay) for that
     "premium app reveal" feel. */
  .dash-sidebar-rail {
    transition: width 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    overflow-x: hidden;
  }
  .dash-sidebar-rail.is-expanded {
    width: 240px !important;
    padding: 14px 10px !important;
  }
  /* Fade for the text labels + brand + section headers.
     Directional timing for that "premium app" feel:
     - On COLLAPSE: labels fade out FIRST (fast, 0.12s, no delay),
       then the rail shrinks behind them. Otherwise the text
       would awkwardly clip mid-collapse.
     - On EXPAND: rail widens FIRST, then labels fade in AFTER
       the rail has reached enough width (0.18s delay). Feels
       like the app is "revealing" content. */
  .dash-sidebar-rail .dash-sidebar-link > span:not(.sidebar-badge),
  .dash-sidebar-rail .dash-sidebar-brand,
  .dash-sidebar-rail .dash-sidebar-section-label {
    opacity: 0;
    transform: translateX(-6px);
    /* Default state = collapsed → labels fade OUT fast */
    transition: opacity 0.12s ease, transform 0.12s ease;
  }
  .dash-sidebar-rail.is-expanded .dash-sidebar-link > span:not(.sidebar-badge),
  .dash-sidebar-rail.is-expanded .dash-sidebar-brand,
  .dash-sidebar-rail.is-expanded .dash-sidebar-section-label {
    opacity: 1;
    transform: translateX(0);
    /* Expanded state → labels fade IN after the rail widens */
    transition: opacity 0.25s ease 0.18s, transform 0.25s ease 0.18s;
  }
  /* Smooth the dash-layout grid column reflow too. CSS can't
     transition grid-template-columns directly, but we can
     animate the .dash-main margin so the visual shift feels
     like a slide instead of a snap. */
  .dash-main {
    transition: margin-left 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  }
  /* Links + action buttons get identical treatment when expanded.
     The aggressive selectors include both a.dash-sidebar-link and
     button.dash-sidebar-link explicitly so the UA stylesheet
     defaults on <button> (text-align:center, appearance, padding)
     can't push the text away from the icon. */
  .dash-sidebar-rail.is-expanded .dash-sidebar-link,
  .dash-sidebar-rail.is-expanded a.dash-sidebar-link,
  .dash-sidebar-rail.is-expanded button.dash-sidebar-link {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 42px !important;
    justify-content: flex-start !important;
    padding: 0 12px !important;
    gap: 12px !important;
    text-align: left !important;
    font-family: inherit !important;
    font-size: 0.9rem !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
  .dash-sidebar-rail.is-expanded .dash-sidebar-link svg {
    flex-shrink: 0 !important;
    width: 18px !important;
    height: 18px !important;
  }
  /* Text label — left-aligned, takes available space, truncates.
     text-align: left forces buttons (which inherit text-align:
     center from the UA stylesheet) to align like anchors do.
     We use block display + width:100% so the span fills the row
     and the badge can float to its right end. */
  .dash-sidebar-rail.is-expanded .dash-sidebar-link > span:not(.sidebar-badge),
  .dash-sidebar-rail.is-expanded button.dash-sidebar-link > span:not(.sidebar-badge),
  .dash-sidebar-rail.is-expanded a.dash-sidebar-link > span:not(.sidebar-badge) {
    display: block !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
    letter-spacing: -0.005em !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* Active state — subtle violet fill + left edge bar for the
     "premium product app" feel (think Linear / Notion). */
  .dash-sidebar-rail.is-expanded .dash-sidebar-link.active {
    background: rgba(99, 91, 255, 0.10) !important;
    color: var(--primary) !important;
    position: relative;
    font-weight: 600;
  }
  .dash-sidebar-rail.is-expanded .dash-sidebar-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--primary);
    border-radius: 0 3px 3px 0;
  }
  [data-theme="dark"] .dash-sidebar-rail.is-expanded .dash-sidebar-link.active {
    background: rgba(139, 92, 246, 0.16) !important;
    color: #c4b5fd !important;
  }
  /* Hover state — gentle background lift */
  .dash-sidebar-rail.is-expanded .dash-sidebar-link:hover {
    background: rgba(99, 91, 255, 0.06) !important;
  }
  [data-theme="dark"] .dash-sidebar-rail.is-expanded .dash-sidebar-link:hover {
    background: rgba(255, 255, 255, 0.05) !important;
  }
  /* Logout hover — soft red tint to flag destructive action */
  .dash-sidebar-rail.is-expanded .dash-sidebar-logout:hover {
    background: rgba(220, 38, 38, 0.08) !important;
    color: #dc2626 !important;
  }
  /* Hide tooltips when expanded — labels are right there */
  .dash-sidebar-rail.is-expanded .dash-sidebar-link[data-tooltip]::after,
  .dash-sidebar-rail.is-expanded .dash-sidebar-link[data-tooltip]::before {
    display: none !important;
  }
  /* Badges move inline next to the text instead of top-right corner */
  .dash-sidebar-rail.is-expanded .dash-sidebar-link .sidebar-badge {
    position: static !important;
    margin-left: auto !important;
    flex-shrink: 0;
  }
  /* Wider divider in expanded mode */
  .dash-sidebar-rail.is-expanded .dash-sidebar-divider {
    width: auto !important;
    margin: 10px 12px !important;
  }
  /* Section labels — only visible when expanded. Inserted via JS
     above each section so admin can see "COMMUNITY" and "ACCOUNT"
     groupings. Hidden when collapsed (icon-only mode). */
  .dash-sidebar-section-label {
    display: none;
  }
  .dash-sidebar-rail.is-expanded .dash-sidebar-section-label {
    display: block;
    padding: 6px 14px 4px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-light);
    opacity: 0.65;
  }
  /* When expanded, the layout reserves more space on the left */
  body:has(.dash-sidebar-rail.is-expanded) .dash-layout {
    grid-template-columns: 240px 1fr !important;
  }
  body.with-rail:has(.dash-sidebar-rail.is-expanded) .course-content,
  body.with-rail:has(.dash-sidebar-rail.is-expanded) .events-page,
  body.with-rail:has(.dash-sidebar-rail.is-expanded) > section:not(.navbar):not(.dash-page) {
    padding-left: calc(240px + 24px) !important;
  }

  /* Brand header inside the expanded rail — small "Sphere Academy"
     wordmark above the toggle. Adds polish + branding without
     stealing nav real estate. */
  .dash-sidebar-rail .dash-sidebar-brand {
    display: none;
  }
  .dash-sidebar-rail.is-expanded .dash-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    flex: 1 1 auto;
    min-width: 0;
    /* Clickable now (built as an <a> tag) — kill default
       anchor styling and add hover affordance. */
    text-decoration: none !important;
    color: inherit;
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.15s ease;
  }
  .dash-sidebar-rail.is-expanded .dash-sidebar-brand:hover {
    background: rgba(99, 91, 255, 0.08);
  }
  [data-theme="dark"] .dash-sidebar-rail.is-expanded .dash-sidebar-brand:hover {
    background: rgba(139, 92, 246, 0.12);
  }

  /* HEADER ROW — wraps the brand + toggle button so they sit
     side-by-side when expanded. When collapsed, the brand is
     hidden and only the toggle shows (centered in the slot). */
  .dash-sidebar-rail .dash-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
    padding-bottom: 8px;
  }
  .dash-sidebar-rail.is-expanded .dash-sidebar-header {
    justify-content: space-between;
    padding: 6px 4px 10px;
  }
  /* Logo container — transparent so the logo PNG reads cleanly
     instead of fighting a purple gradient backdrop (the planet
     in the logo is the same violet so the old gradient made
     them merge into a single blob). A slim ring frames it. */
  .dash-sidebar-brand-logo {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: transparent;
    flex-shrink: 0;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .dash-sidebar-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(99, 91, 255, 0.28));
  }
  /* Wordmark — single line, never wraps. Tracks tighter for a
     more polished, intentional look. */
  .dash-sidebar-brand-text {
    font-size: 0.94rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.15;
  }
  /* Slight hover lift on the whole brand row for "click → profile"
     affordance polish. */
  .dash-sidebar-rail.is-expanded .dash-sidebar-brand:hover .dash-sidebar-brand-logo img {
    transform: scale(1.08);
    transition: transform 0.18s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .dash-sidebar-rail.is-expanded .dash-sidebar-brand .dash-sidebar-brand-logo img {
    transition: transform 0.18s ease;
  }

  /* The toggle button — chevron in the header row. When
     collapsed, it's centered alone (brand is hidden). When
     expanded, it sits inline to the right of the brand. */
  .dash-sidebar-rail .dash-sidebar-toggle-btn {
    display: flex !important;
    width: 32px;
    height: 32px;
    margin: 0;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-light);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .dash-sidebar-rail .dash-sidebar-toggle-btn:hover {
    background: rgba(99, 91, 255, 0.10);
    color: var(--primary);
  }
  .dash-sidebar-rail .dash-sidebar-toggle-btn svg {
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .dash-sidebar-rail.is-expanded .dash-sidebar-toggle-btn svg {
    transform: rotate(180deg);
  }
  /* Hide the ENTIRE right-side navbar group when the icon rail
     is present. The rail now owns search, notifications, theme
     toggle, profile, admin panel, and log out — so the navbar's
     .nav-cta cluster is fully redundant. Same applies to the
     mobile-only "Log In" CTA in .nav-links (which only shows for
     logged-out users, and logged-in users see the rail anyway). */
  body:has(.dash-sidebar-rail) .nav-cta {
    display: none !important;
  }
  /* With .nav-cta gone, the flex-justify:space-between layout
     would push .nav-links to the right edge of the navbar.
     Absolutely-center .nav-links so the Home / Course / Events
     tabs sit perfectly in the middle of the navbar. */
  body:has(.dash-sidebar-rail) .navbar .container {
    position: relative;
  }
  body:has(.dash-sidebar-rail) .nav-links {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  /* On non-dashboard pages with the rail (course.html, events.html,
     marked with body.with-rail), the rail is overlaid via fixed
     positioning but the page content needs 64px of left padding
     so it doesn't sit underneath. Dashboard handles this via the
     .dash-layout grid, but those pages don't use that grid. */
  body.with-rail .course-content,
  body.with-rail .events-page,
  body.with-rail > section:not(.navbar):not(.dash-page) {
    padding-left: calc(64px + 24px) !important;
    box-sizing: border-box;
  }
}

/* On mobile, the rail collapses back to a slide-out drawer (per
   .dash-sidebar mobile rules), so the page content doesn't need
   the 64px shift. */
@media (max-width: 900px) {
  body.with-rail .course-content,
  body.with-rail .events-page {
    padding-left: 0;
  }
}

/* ============================================================
   FEED VISIBILITY BOOST — feed cards (composer, posts, quote)
   were melting into the page background because every surface
   used the same var(--bg). Bumping card backgrounds to a
   distinctly-contrasting tone + stronger borders + bigger
   shadows so each card reads as a separate "window" on top
   of the page.
   ============================================================ */

/* LIGHT MODE — cards become bright white against the #fafafa
   page background, with a darker border so edges are crisp. */
[data-theme="light"] .fb-composer-card,
[data-theme="light"] .fb-post-list .post-item,
[data-theme="light"] .post-comments-section,
[data-theme="light"] .ann-card,
[data-theme="light"] .faq-card,
[data-theme="light"] .win-card,
[data-theme="light"] .member-card,
[data-theme="light"] .dm-conversation-card,
[data-theme="light"] .event-card,
[data-theme="light"] .course-card {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 14px -8px rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .fb-composer-card:hover,
[data-theme="light"] .fb-post-list .post-item:hover,
[data-theme="light"] .ann-card:hover,
[data-theme="light"] .faq-card:hover,
[data-theme="light"] .win-card:hover,
[data-theme="light"] .event-card:hover,
[data-theme="light"] .course-card:hover {
  border-color: rgba(99, 91, 255, 0.35) !important;
  box-shadow: 0 6px 20px -8px rgba(99, 91, 255, 0.22), 0 2px 6px rgba(15, 23, 42, 0.08) !important;
}

/* Inputs (textarea, composer trigger) — same contrast bump so
   the "What's on your mind" pill clearly reads as interactive. */
[data-theme="light"] .fb-composer-trigger,
[data-theme="light"] .fb-composer-expanded textarea {
  background: #f3f4f6 !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
}
[data-theme="light"] .fb-composer-trigger:hover {
  background: #e5e7eb !important;
}
[data-theme="light"] .fb-composer-expanded textarea:focus {
  background: #ffffff !important;
  border-color: #635bff !important;
}

/* DARK MODE — flat #18181B is the page; cards lift to a slightly
   lighter shade (#27272a, zinc-800) with brighter borders. */
[data-theme="dark"] .fb-composer-card,
[data-theme="dark"] .fb-post-list .post-item,
[data-theme="dark"] .post-comments-section,
[data-theme="dark"] .ann-card,
[data-theme="dark"] .faq-card,
[data-theme="dark"] .win-card,
[data-theme="dark"] .member-card,
[data-theme="dark"] .dm-conversation-card,
[data-theme="dark"] .event-card,
[data-theme="dark"] .course-card {
  background: #27272a !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

/* Explicit override: chat messages should NEVER get the card
   styling — they're inline bubbles in a flowing conversation,
   not standalone cards. A previous version of this rule had a
   stray duplicate box-shadow line that re-introduced a shadow
   band on every row ("cuts" the user reported); that line is
   removed so the chat now scrolls as one continuous surface. */
.chat-message,
[data-theme="light"] .chat-message,
[data-theme="dark"] .chat-message,
.chat-group,
[data-theme="light"] .chat-group,
[data-theme="dark"] .chat-group {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
[data-theme="dark"] .fb-composer-card:hover,
[data-theme="dark"] .fb-post-list .post-item:hover,
[data-theme="dark"] .ann-card:hover,
[data-theme="dark"] .faq-card:hover,
[data-theme="dark"] .win-card:hover,
[data-theme="dark"] .event-card:hover,
[data-theme="dark"] .course-card:hover {
  border-color: rgba(139, 158, 255, 0.40) !important;
  background: #2d2d31 !important;
  box-shadow: 0 8px 28px -8px rgba(99, 91, 255, 0.30), 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}

/* Composer inputs in dark mode */
[data-theme="dark"] .fb-composer-trigger,
[data-theme="dark"] .fb-composer-expanded textarea {
  background: #1f1f23 !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: #f4f4f5 !important;
}
[data-theme="dark"] .fb-composer-trigger:hover {
  background: #2a2a2e !important;
}
[data-theme="dark"] .fb-composer-expanded textarea:focus {
  background: #1a1a1d !important;
  border-color: #8b5cf6 !important;
}

/* On mobile, the sidebar reverts to its existing drawer behavior
   — text labels become visible again since space isn't tight. */
@media (max-width: 900px) {
  .dash-sidebar-rail .dash-sidebar-link > span:not(.sidebar-badge) {
    display: inline !important;
  }
  .dash-sidebar-rail .dash-sidebar-divider {
    width: 100%;
    height: 1px;
    background: var(--border);
    margin: 8px 0;
  }
}

/* ============================================================
   DARK MODE VISIBILITY BOOST — Against the flat #18181B base,
   the previous translucent card/button styles were too dim.
   This block lifts contrast on every foreground element so
   cards, buttons, and helper text all pop against the dark.
   ============================================================ */

/* Bento cards (Sphere Academy, Live community, Marketing Intern
   Graduate) — bump background + border so they read as distinct
   surfaces on the dark backdrop instead of melting into it. */
[data-theme="dark"] .bento-card,
[data-theme="dark"] .bento-logo-centered {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.50) !important;
}
[data-theme="dark"] .bento-card:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(99, 91, 255, 0.55) !important;
}

/* Hero eyebrow pill (MARKETING INTERN TRAINING PROGRAM) — same
   treatment so the chip is clearly framed. */
[data-theme="dark"] .hero-eyebrow {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
  color: #f4f4f5 !important;
}

/* Outline button (View Roadmap) — was purple-on-dark which gets
   lost on #18181B. Switch to a high-contrast white outline with
   bright text so it sits next to the primary CTA at equal weight. */
[data-theme="dark"] .btn-outline {
  color: #f4f4f5 !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}
[data-theme="dark"] .btn-outline:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  color: #ffffff !important;
}

/* "8 marketing interns training the Stratos way" caption — the
   default --text-light (#a3a3a3) was reading too soft. Bump it
   so it's a clear secondary line, not a whisper. */
[data-theme="dark"] .hero-trust p {
  color: #d4d4d8 !important;
  font-weight: 500;
}

/* Mini-card titles + sublabels — make sure the white pops and
   the grey sublabel isn't fading into the card background. */
[data-theme="dark"] .bento-outcome-title,
[data-theme="dark"] .bento-logo-text strong {
  color: #ffffff !important;
}
[data-theme="dark"] .bento-outcome-sub,
[data-theme="dark"] .bento-logo-text span {
  color: #d4d4d8 !important;
}

/* ============================================================
   SCROLL FADE-IN — sections + cards smoothly fade up into view
   as the user scrolls past. Pure CSS state with IntersectionObserver
   adding .is-visible when the element crosses the viewport.
   The .reveal-children variant cascades all direct children with
   a staggered delay so feature cards / phase cards / testimonial
   cards appear one after another instead of all at once.
   Respects prefers-reduced-motion.
   ============================================================ */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  /* GPU hint — kept light so we don't burn memory on every
     section. Only triggers a paint layer when the element is
     about to animate. */
  will-change: opacity, transform;
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children — when .reveal-children gets .is-visible,
   each direct child runs the slide-up animation with an
   8% offset so they appear one after another. */
.reveal-children > * {
  opacity: 0;
}
.reveal-children.is-visible > * {
  animation: revealChildSlide 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.reveal-children.is-visible > *:nth-child(1)  { animation-delay: 0s;    }
.reveal-children.is-visible > *:nth-child(2)  { animation-delay: 0.08s; }
.reveal-children.is-visible > *:nth-child(3)  { animation-delay: 0.16s; }
.reveal-children.is-visible > *:nth-child(4)  { animation-delay: 0.24s; }
.reveal-children.is-visible > *:nth-child(5)  { animation-delay: 0.32s; }
.reveal-children.is-visible > *:nth-child(6)  { animation-delay: 0.40s; }
.reveal-children.is-visible > *:nth-child(7)  { animation-delay: 0.48s; }
.reveal-children.is-visible > *:nth-child(8)  { animation-delay: 0.56s; }
.reveal-children.is-visible > *:nth-child(9)  { animation-delay: 0.64s; }
.reveal-children.is-visible > *:nth-child(10) { animation-delay: 0.72s; }

@keyframes revealChildSlide {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .reveal-children > * { opacity: 1 !important; }
  .reveal-children.is-visible > * { animation: none !important; }
}

/* ============================================================
   DASHBOARD PROFILE OVERVIEW CARD — LinkedIn-style sidebar
   widget on the right of the dashboard. Sticky, ~300px wide,
   visible on viewports ≥ 1200px. Below that, it hides so the
   feed can use the full width.
   ============================================================ */
/* Profile card — hidden by default, then revealed as a floating
   widget on wide screens (≥1560px) where there's enough room
   beside the centered feed. Positioned via fixed + viewport-
   center math so it sits right next to the feed without
   pushing it off-center. */
.dash-profile-card { display: none; }

@media (min-width: 1560px) {
  .dash-profile-card {
    display: block !important;
    position: fixed !important;
    top: 92px !important;
    /* Position the card in the MIDDLE of the right-side empty
       space (between the feed's right edge and the viewport
       right edge) — not jammed against the edge. The feed is
       max 860px centered on the viewport, so its right edge
       sits at 50% + 430px. The empty space to the right of
       the feed is then (50% - 430px) wide. We center the 300px
       card inside that gap by anchoring at right: calc(...).
       Result: equal breathing room on both sides of the card,
       reads as a deliberate "sidebar" rather than something
       glued to the screen edge. */
    right: calc((50% - 430px - 300px) / 2) !important;
    left: auto !important;
    width: 300px !important;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    align-self: auto !important;
    grid-column: auto !important;
    z-index: 80;
  }
}

/* On medium-width viewports (1560-1759px) the expanded sidebar
   pushes the feed into the right-edge-anchored card. Hide the
   card in that range when expanded; it reappears the moment
   the user collapses the sidebar. */
@media (min-width: 1560px) and (max-width: 1759px) {
  body:has(.dash-sidebar-rail.is-expanded) .dash-profile-card {
    display: none !important;
  }
}

/* Hidden on narrower viewports — feed takes the full row */
.dash-profile-card { display: none; }

@media (min-width: 1200px) {
  .dash-profile-card {
    position: sticky;
    top: 92px;
    align-self: start;
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 8px 24px -12px rgba(15, 23, 42, 0.10);
  }
}

[data-theme="dark"] .dash-profile-card {
  background: #27272a !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.30), 0 8px 24px -10px rgba(0, 0, 0, 0.50) !important;
}

/* Gradient cover strip at the top — feels like a LinkedIn
   banner. Uses the existing brand violet palette. */
.dash-profile-cover {
  height: 76px;
  background: linear-gradient(135deg, #635bff 0%, #8b5cf6 50%, #c084fc 100%);
}

/* Avatar — overlaps the cover by 50%, white ring around it */
.dash-profile-avatar {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  margin: -44px auto 0;
  background: linear-gradient(135deg, #8b9eff, #5b6ee8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.55rem;
  border: 4px solid var(--bg);
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.dash-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
[data-theme="dark"] .dash-profile-avatar {
  border-color: #27272a;
}

.dash-profile-info {
  padding: 10px 20px 16px;
  text-align: center;
}
.dash-profile-info h3 {
  margin: 4px 0 4px;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
}
.dash-profile-role {
  margin: 0 0 8px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--primary);
}
.dash-profile-tagline {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-light);
  line-height: 1.45;
}

/* Progress section */
.dash-profile-section {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
}
.dash-profile-section-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-light);
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}
.dash-profile-section-label span:last-child {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.dash-profile-progress-bar {
  height: 6px;
  background: rgba(99, 91, 255, 0.15);
  border-radius: 99px;
  overflow: hidden;
}
.dash-profile-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #635bff, #8b5cf6, #c084fc);
  border-radius: 99px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.dash-profile-progress-hint {
  margin: 8px 0 0;
  font-size: 0.74rem;
  color: var(--text-light);
}

/* Stats row */
.dash-profile-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
}
.dash-profile-stat {
  text-align: center;
}
.dash-profile-stat strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.dash-profile-stat span {
  font-size: 0.7rem;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* Earned badges row — shows unlocked achievement icons. */
.dash-profile-badges {
  padding: 12px 18px 14px;
  border-top: 1px solid var(--border);
}
.dash-profile-badges-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.dash-profile-badge {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(99, 91, 255, 0.12), rgba(192, 132, 252, 0.12));
  border: 1px solid rgba(99, 91, 255, 0.20);
  font-size: 1.05rem;
  cursor: help;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.dash-profile-badge:hover {
  transform: translateY(-1px) scale(1.05);
  border-color: rgba(99, 91, 255, 0.45);
}
.dash-profile-badge-more {
  background: transparent;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-light);
  border-style: dashed;
}
[data-theme="dark"] .dash-profile-badge {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.18), rgba(192, 132, 252, 0.10));
  border-color: rgba(139, 92, 246, 0.30);
}

/* Action buttons */
.dash-profile-actions {
  padding: 14px 20px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dash-profile-cta {
  width: 100%;
  justify-content: center;
  padding: 11px 16px !important;
  font-size: 0.86rem !important;
}
.dash-profile-view {
  width: 100%;
  justify-content: center;
  padding: 10px 16px !important;
  font-size: 0.82rem !important;
}

/* ============================================================
   PROFILE COVER BANNER — Facebook-style cover photo above the
   profile layout. Falls back to a brand gradient if no photo
   uploaded. Edit button overlays in the bottom-right.
   ============================================================ */
.profile-cover-banner {
  position: relative;
  height: 260px;
  border-radius: 16px;
  overflow: hidden;
  margin: 0 0 24px;
  background: linear-gradient(135deg, #4338ca 0%, #635bff 35%, #8b5cf6 70%, #c084fc 100%);
  box-shadow: 0 4px 16px -8px rgba(15, 23, 42, 0.18);
}
[data-theme="dark"] .profile-cover-banner {
  box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.50);
}
.profile-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.profile-cover-edit {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.15s ease;
}
.profile-cover-edit:hover {
  background: rgba(0, 0, 0, 0.75);
}
.profile-cover-remove {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.profile-cover-remove:hover {
  background: #dc2626;
}
@media (max-width: 720px) {
  .profile-cover-banner { height: 160px; border-radius: 12px; }
  .profile-cover-edit { font-size: 0.75rem; padding: 6px 10px; }
  .profile-cover-edit span { display: none; }
}

/* ============================================================
   MY ACTIVITY — user's own posts + wins feed on profile page.
   Tab toggle + scrollable list of activity cards.
   ============================================================ */
.activity-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  padding-bottom: 0;
}
.activity-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-light);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.activity-tab:hover { color: var(--text); }
.activity-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.activity-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  background: var(--bg-alt, rgba(99, 91, 255, 0.10));
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.activity-tab.active .activity-tab-count {
  background: rgba(99, 91, 255, 0.18);
  color: var(--primary);
}
.activity-feed {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.activity-item {
  padding: 16px 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
[data-theme="dark"] .activity-item {
  background: #27272a !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}
.activity-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.activity-item-type {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
}
.activity-item-time {
  font-size: 0.74rem;
  color: var(--text-light);
}
.activity-item h4 {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.activity-item-text {
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.activity-item-media {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 6px;
  margin-top: 12px;
}
.activity-item-media img,
.activity-item-media video {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--bg-alt, #f3f4f6);
}
.activity-empty {
  padding: 28px 24px;
  text-align: center;
  background: var(--bg-alt, rgba(99, 91, 255, 0.04));
  border-radius: 12px;
  border: 1px dashed var(--border);
}
.activity-empty p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-light);
}

/* ============================================================
   PUBLIC PROFILE VIEW BANNER — appears at the top of
   .profile-content when ?user=X is in the URL (someone is
   viewing another member's profile). Shows a back link to the
   community + a label naming whose profile this is.
   ============================================================ */
.public-view-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  margin: 0 0 20px;
  background: linear-gradient(135deg, rgba(99, 91, 255, 0.10), rgba(139, 92, 246, 0.06));
  border: 1px solid rgba(99, 91, 255, 0.20);
  border-radius: 12px;
  font-size: 0.88rem;
}
[data-theme="dark"] .public-view-banner {
  background: linear-gradient(135deg, rgba(99, 91, 255, 0.18), rgba(139, 92, 246, 0.10)) !important;
  border-color: rgba(139, 92, 246, 0.35) !important;
}
.public-view-back {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.86rem;
  white-space: nowrap;
}
.public-view-back:hover {
  text-decoration: underline;
}
.public-view-label {
  color: var(--text-light);
  font-size: 0.86rem;
}
.public-view-label strong {
  color: var(--text);
  font-weight: 700;
}
@media (max-width: 540px) {
  .public-view-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* ============================================================
   AVATAR ROLE RINGS — visible status indicator around the
   avatar based on the user's role.
     admin    → gold ring + subtle glow
     graduate → blue ring (Marketing Intern Graduate)
     student  → no ring (default)
   Applied via .avatar-inner.avatar-role-admin /
   .avatar-inner.avatar-role-graduate inside _avatarHTML().
   ============================================================ */
.avatar-inner.avatar-role-admin {
  box-shadow:
    0 0 0 2px #fbbf24,
    0 0 0 4px rgba(251, 191, 36, 0.25),
    0 2px 6px rgba(251, 191, 36, 0.30);
}
.avatar-inner.avatar-role-graduate {
  box-shadow:
    0 0 0 2px #06b6d4,
    0 0 0 4px rgba(6, 182, 212, 0.22),
    0 2px 6px rgba(6, 182, 212, 0.25);
}
/* If the avatar lives in a clip-overflow wrapper (most do, since
   they're rounded), the outer shadow would get cut off. Counteract
   by giving the avatar element itself a matching radius and letting
   the box-shadow extend outside its own bounds. Wrappers that hide
   overflow will lose the ring — pages where this matters use
   overflow:visible on the parent. */
.avatar-inner {
  border-radius: 50%;
  display: block;
}
img.avatar-inner {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   CONFETTI BURST + ANIMATED CHECKMARK — fires when a lesson is
   marked complete for the first time. Pure CSS particles spawned
   from the button's center with random trajectories. Auto-clean
   after 1.6s via JS removal.
   ============================================================ */
.confetti-burst {
  position: fixed;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 99999;
}
.confetti-piece {
  position: absolute;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  left: -4px;
  top: -7px;
  --tx: 0px;
  --ty: 0px;
  --rot: 360deg;
  animation: confetti-fall 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  will-change: transform, opacity;
}
@keyframes confetti-fall {
  0% {
    transform: translate(0, 0) rotate(0);
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--tx), calc(var(--ty) + 220px)) rotate(var(--rot));
    opacity: 0;
  }
}

/* Big animated checkmark overlay. The SVG path uses
   stroke-dasharray so the check "draws" itself. */
.lesson-complete-check {
  position: fixed;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 100000;
  animation: check-pop 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.lesson-complete-check svg {
  position: absolute;
  width: 80px;
  height: 80px;
  left: -40px;
  top: -40px;
  filter: drop-shadow(0 4px 14px rgba(16, 185, 129, 0.45));
}
.lesson-complete-check svg circle {
  fill: none;
  stroke: #10b981;
  stroke-width: 3;
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  animation: check-circle 0.5s ease forwards;
}
.lesson-complete-check svg path {
  fill: none;
  stroke: #10b981;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: check-mark 0.4s 0.45s ease forwards;
}
@keyframes check-circle {
  to { stroke-dashoffset: 0; }
}
@keyframes check-mark {
  to { stroke-dashoffset: 0; }
}
@keyframes check-pop {
  0%   { transform: scale(0); opacity: 0; }
  20%  { transform: scale(1.1); opacity: 1; }
  40%  { transform: scale(1); }
  80%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* Honor reduced-motion preferences — skip celebrations entirely */
@media (prefers-reduced-motion: reduce) {
  .confetti-piece,
  .lesson-complete-check,
  .lesson-complete-check svg circle,
  .lesson-complete-check svg path { animation: none !important; }
}

/* ============================================================
   BONUS COURSE VIEWER — bonus-course.html?id=X
   Course hero with cover image + title, then a stacked list
   of expandable lesson cards with embedded video + content.
   ============================================================ */
.bonus-course-hero {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  align-items: center;
  padding: 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 8px 24px -12px rgba(15, 23, 42, 0.08);
}
[data-theme="dark"] .bonus-course-hero {
  background: #27272a;
  border-color: rgba(255, 255, 255, 0.10);
}
.bonus-course-cover {
  height: 180px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #635bff 0%, #8b5cf6 50%, #c084fc 100%);
}
.bonus-course-meta h1 {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.bonus-course-desc {
  margin: 0 0 12px;
  color: var(--text-light);
  font-size: 1rem;
  line-height: 1.55;
}
.bonus-course-stats {
  margin: 0;
  font-size: 0.86rem;
  color: var(--text-light);
  font-weight: 500;
}
@media (max-width: 720px) {
  .bonus-course-hero {
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .bonus-course-cover { height: 140px; }
  .bonus-course-meta h1 { font-size: 1.4rem; }
}

/* Lesson cards — collapsible (<details>). Each summary shows
   a numbered chip + title + description; expanding reveals
   the embedded video + content. */
.bonus-lesson {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.bonus-lesson[open] {
  border-color: rgba(99, 91, 255, 0.40);
  box-shadow: 0 6px 18px -10px rgba(99, 91, 255, 0.30);
}
[data-theme="dark"] .bonus-lesson {
  background: #27272a;
  border-color: rgba(255, 255, 255, 0.10);
}
[data-theme="dark"] .bonus-lesson[open] {
  border-color: rgba(139, 92, 246, 0.55);
}
.bonus-lesson summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.bonus-lesson summary::-webkit-details-marker { display: none; }
.bonus-lesson-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #635bff, #8b5cf6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.86rem;
}
.bonus-lesson-summary-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bonus-lesson-summary-body strong {
  font-size: 1rem;
  color: var(--text);
}
.bonus-lesson-summary-body span {
  font-size: 0.86rem;
  color: var(--text-light);
  line-height: 1.45;
}
.bonus-lesson-chevron {
  flex-shrink: 0;
  color: var(--text-light);
  transition: transform 0.25s ease;
}
.bonus-lesson[open] .bonus-lesson-chevron {
  transform: rotate(180deg);
  color: var(--primary);
}
.bonus-lesson-body {
  padding: 0 18px 20px;
  border-top: 1px solid var(--border);
  margin-top: 0;
}
[data-theme="dark"] .bonus-lesson-body {
  border-top-color: rgba(255, 255, 255, 0.10);
}
.bonus-lesson-video {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  margin: 14px 0;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}
.bonus-lesson-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.bonus-lesson-content {
  margin-top: 8px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
}
.bonus-lesson-content p {
  margin: 0 0 12px;
}
.bonus-lesson-content p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   GROUPS — multi-group chat system. Two views toggle on the
   chat panel: groups list (default) and group chat (after
   selecting a group). Admins see a "+ New Group" button.
   ============================================================ */
.groups-view {
  display: block;
}
.groups-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 8px;
}
.group-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}
[data-theme="dark"] .group-card {
  background: #27272a;
  border-color: rgba(255, 255, 255, 0.10);
}
.group-card:hover {
  transform: translateY(-2px);
  border-color: rgba(99, 91, 255, 0.40);
  box-shadow: 0 6px 18px -10px rgba(99, 91, 255, 0.30);
}
.group-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #635bff, #8b5cf6, #c084fc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.group-card-body {
  flex: 1;
  min-width: 0;
}
.group-card-body strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.group-card-body p {
  margin: 0;
  font-size: 0.84rem;
  color: var(--text-light);
  line-height: 1.4;
}
.group-card-arrow {
  flex-shrink: 0;
  color: var(--text-light);
  transition: transform 0.15s ease, color 0.15s ease;
}
.group-card:hover .group-card-arrow {
  transform: translateX(3px);
  color: var(--primary);
}

/* Group chat view — chat header with back arrow */
.group-chat-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.group-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 14px;
}
[data-theme="dark"] .group-chat-header {
  background: #27272a;
  border-color: rgba(255, 255, 255, 0.10);
}
.group-chat-back {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.group-chat-back:hover {
  background: rgba(99, 91, 255, 0.10);
  color: var(--primary);
}
.group-chat-meta {
  flex: 1;
  min-width: 0;
}
.group-chat-meta h2 {
  margin: 0 0 2px;
  font-size: 1.1rem;
  font-weight: 700;
}
.group-chat-meta p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-light);
}
.group-chat-delete:hover {
  background: rgba(220, 38, 38, 0.08) !important;
  color: #dc2626 !important;
  border-color: #dc2626 !important;
}

/* New Group modal */
.group-create-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.group-create-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.group-create-dialog {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 24px 60px -10px rgba(0, 0, 0, 0.45);
  max-height: 90vh;
  overflow-y: auto;
}
[data-theme="dark"] .group-create-dialog {
  background: #27272a;
  border-color: rgba(255, 255, 255, 0.12);
}
.group-create-dialog h3 {
  margin: 0 0 6px;
  font-size: 1.2rem;
  font-weight: 700;
}

/* ============================================================
   LEADERBOARD — ranked list of top contributors. Three tabs
   (Overall / Most Posts / Most Wins) with medal icons for the
   top 3 and a subtle "you're in here" highlight for the
   current user's row.
   ============================================================ */
.leaderboard-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
  flex-wrap: wrap;
}
.leaderboard-tab {
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-light);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
  font-family: inherit;
}
.leaderboard-tab:hover { color: var(--text); }
.leaderboard-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
[data-theme="dark"] .leaderboard-row {
  background: #27272a;
  border-color: rgba(255, 255, 255, 0.10);
}
.leaderboard-row:hover {
  transform: translateY(-2px);
  border-color: rgba(99, 91, 255, 0.40);
  box-shadow: 0 6px 18px -10px rgba(99, 91, 255, 0.30);
}
.leaderboard-row-mine {
  background: linear-gradient(135deg, rgba(99, 91, 255, 0.08), rgba(192, 132, 252, 0.04)) !important;
  border-color: rgba(99, 91, 255, 0.35) !important;
}
[data-theme="dark"] .leaderboard-row-mine {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(192, 132, 252, 0.08)) !important;
  border-color: rgba(139, 92, 246, 0.45) !important;
}
.leaderboard-rank {
  font-size: 1.2rem;
  font-weight: 700;
  width: 40px;
  text-align: center;
  flex-shrink: 0;
  color: var(--text-light);
}
.leaderboard-row:nth-child(1) .leaderboard-rank,
.leaderboard-row:nth-child(2) .leaderboard-rank,
.leaderboard-row:nth-child(3) .leaderboard-rank {
  font-size: 1.5rem;
}
.leaderboard-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b9eff, #5b6ee8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
}
.leaderboard-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.leaderboard-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.leaderboard-meta strong {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leaderboard-sub {
  font-size: 0.78rem;
  color: var(--text-light);
}
.leaderboard-score {
  text-align: right;
  flex-shrink: 0;
}
.leaderboard-score strong {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.leaderboard-score span {
  font-size: 0.68rem;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.leaderboard-empty {
  padding: 36px 24px;
  text-align: center;
  background: var(--bg-alt, rgba(99, 91, 255, 0.04));
  border-radius: 12px;
  border: 1px dashed var(--border);
}
.leaderboard-empty p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-light);
}

/* ============================================================
   BOOKMARK BUTTON — sits next to the Comment button in the
   post actions row. Filled state = saved. Tap toggles.
   ============================================================ */
.post-bookmark-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-light);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  font-family: inherit;
}
.post-bookmark-btn:hover {
  background: var(--bg-alt, rgba(99, 91, 255, 0.04));
  color: var(--text);
  border-color: rgba(99, 91, 255, 0.30);
}
.post-bookmark-btn.is-saved {
  color: var(--primary);
  background: rgba(99, 91, 255, 0.10);
  border-color: rgba(99, 91, 255, 0.40);
}
[data-theme="dark"] .post-bookmark-btn.is-saved {
  color: #c4b5fd;
  background: rgba(139, 92, 246, 0.18);
  border-color: rgba(139, 92, 246, 0.45);
}

/* ============================================================
   TOAST NOTIFICATIONS — slide in from bottom-right, auto-
   dismiss. Replaces browser alert() for non-blocking feedback.
   Stacks vertically; respects safe areas on mobile.
   ============================================================ */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: calc(100vw - 48px);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 14px;
  background: var(--bg);
  color: var(--text);
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.25), 0 4px 12px rgba(15, 23, 42, 0.10);
  font-size: 0.9rem;
  font-weight: 500;
  max-width: 380px;
  min-width: 240px;
  pointer-events: auto;
  animation: toastIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  border-left: 3px solid var(--primary);
}
[data-theme="dark"] .toast {
  background: #27272a;
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.50), 0 4px 12px rgba(0, 0, 0, 0.30);
}
.toast.toast-success { border-left-color: #10b981; }
.toast.toast-error   { border-left-color: #dc2626; }
.toast.toast-warn    { border-left-color: #f59e0b; }
.toast.toast-info    { border-left-color: var(--primary); }
.toast-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.78rem;
  color: #fff;
  background: var(--primary);
}
.toast-success .toast-icon { background: #10b981; }
.toast-error   .toast-icon { background: #dc2626; }
.toast-warn    .toast-icon { background: #f59e0b; }
.toast-text { flex: 1; min-width: 0; line-height: 1.4; }
.toast.toast-leaving {
  animation: toastOut 0.22s ease forwards;
}
@keyframes toastIn {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes toastOut {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(110%); opacity: 0; }
}
@media (max-width: 540px) {
  .toast-container {
    left: 12px;
    right: 12px;
    bottom: calc(80px + env(safe-area-inset-bottom, 0));
  }
  .toast { min-width: 0; width: 100%; max-width: none; }
}

/* ============================================================
   MOBILE BOTTOM NAV — Instagram/TikTok-style native app feel.
   On phones (<768px) the icon rail collapses into a horizontal
   bar pinned to the bottom of the viewport with the most-used
   tabs: Feed, Course, Notifications, Profile.
   ============================================================ */
@media (max-width: 767px) {
  body.with-rail .dash-mobile-nav,
  body:has(.dash-sidebar-rail) .dash-mobile-nav {
    display: flex !important;
  }
}
.dash-mobile-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  height: calc(64px + env(safe-area-inset-bottom, 0));
  padding-bottom: env(safe-area-inset-bottom, 0);
  background: var(--bg);
  border-top: 1px solid var(--border);
  justify-content: space-around;
  align-items: stretch;
  box-shadow: 0 -4px 16px -8px rgba(15, 23, 42, 0.12);
}
[data-theme="dark"] .dash-mobile-nav {
  background: #18181B;
  border-top-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 -4px 16px -8px rgba(0, 0, 0, 0.50);
}
.dash-mobile-nav a,
.dash-mobile-nav button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: transparent;
  border: none;
  color: var(--text-light);
  font-size: 0.66rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  padding: 8px 4px;
  position: relative;
  transition: color 0.15s ease;
}
.dash-mobile-nav a:hover,
.dash-mobile-nav button:hover,
.dash-mobile-nav a.active,
.dash-mobile-nav button.active {
  color: var(--primary);
}
.dash-mobile-nav svg {
  width: 22px;
  height: 22px;
}
.dash-mobile-nav .mobile-nav-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 18px);
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  background: #dc2626;
  color: #fff;
  border-radius: 99px;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
/* When mobile bottom nav is showing, hide the side rail on
   mobile + add bottom padding to body so content doesn't sit
   under the nav. */
@media (max-width: 767px) {
  .dash-sidebar.dash-sidebar-rail {
    display: none !important;
  }
  body:has(.dash-mobile-nav) {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0));
  }
}

/* ============================================================
   FREEZE THE FEED — user complained the main content shifts
   sideways every time the sidebar collapses / expands. Cause:
   .dash-layout was a CSS grid with `64px 1fr` collapsed and
   `240px 1fr` expanded — column-2 (the feed) shifted ~88px
   right when the sidebar grew.

   Fix: convert .dash-layout to block layout on desktop. The
   sidebar and profile card are both position:fixed already,
   so they don't need grid columns. The feed (.dash-main) is
   the only flow content; centering it on the viewport
   (margin: 0 auto + max-width) keeps it visually anchored
   regardless of sidebar state.
   ============================================================ */
@media (min-width: 901px) {
  .dash-layout {
    display: block !important;
    grid-template-columns: none !important;
    max-width: none !important;
    padding: 0 !important;
  }
  body:has(.dash-sidebar-rail.is-expanded) .dash-layout {
    grid-template-columns: none !important;
  }
  .dash-main {
    max-width: 860px !important;
    margin: 0 auto !important;
    width: 100% !important;
    padding: 0 24px !important;
    grid-column: auto !important;
    /* Drop the margin-left transition — there's no longer a
       column shift to animate. The feed never moves. */
    transition: none !important;
  }
}

/* ===== LESSON NOTES — floating FAB + slide-in drawer ===== */
.lesson-notes-fab {
  position: fixed;
  right: 24px;
  bottom: 96px;            /* sits above the back-to-top button */
  z-index: 1900;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px 12px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.lesson-notes-fab:hover {
  transform: translateY(-2px);
  background: var(--bg-alt);
  box-shadow: 0 12px 28px rgba(0,0,0,0.18), 0 3px 8px rgba(0,0,0,0.10);
}
.lesson-notes-fab svg { color: var(--primary); }
.lesson-notes-fab-label { letter-spacing: 0.01em; }
.lesson-notes-dot {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 2px var(--bg);
}

.lesson-notes-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(2px);
  z-index: 2050;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.lesson-notes-backdrop.open { opacity: 1; pointer-events: auto; }

.lesson-notes-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(420px, 92vw);
  height: 100vh;
  background: var(--bg);
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 32px rgba(0,0,0,0.18);
  z-index: 2100;
  display: flex;
  flex-direction: column;
  transform: translateX(105%);
  transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1);
}
.lesson-notes-drawer.open { transform: translateX(0); }

.lesson-notes-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--border);
}
.lesson-notes-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.lesson-notes-sub {
  font-size: 0.78rem;
  color: var(--text-light);
  margin-top: 2px;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lesson-notes-close {
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 1.1rem;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lesson-notes-close:hover { background: var(--bg-alt); color: var(--text); }

.lesson-notes-textarea {
  flex: 1;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--text);
  padding: 16px 20px;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.6;
}
.lesson-notes-textarea::placeholder { color: var(--text-light); }

.lesson-notes-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
}
.lesson-notes-status {
  font-size: 0.72rem;
  color: var(--text-light);
  letter-spacing: 0.01em;
}
.lesson-notes-actions {
  display: inline-flex;
  gap: 6px;
}
.btn-outline-mini {
  appearance: none;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--transition);
}
.btn-outline-mini:hover { background: var(--bg-alt); border-color: var(--primary); color: var(--primary); }

@media (max-width: 600px) {
  .lesson-notes-fab {
    right: 12px;
    bottom: 76px;
    padding: 10px 14px 10px 12px;
    font-size: 0.8rem;
  }
  .lesson-notes-fab-label { display: none; }
  .lesson-notes-drawer { width: 100vw; }
}

/* ===== RESOURCE LIBRARY ===== */
.resources-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}
.resources-chip {
  appearance: none;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-light);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
}
.resources-chip:hover { color: var(--text); border-color: var(--text-light); }
.resources-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.resource-card {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 14px 14px 14px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg);
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  overflow: hidden;
}
.resource-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  border-color: var(--primary);
}

.resource-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.resource-card-icon-template { background: rgba(99,91,255,.12);  color: #635bff; }
.resource-card-icon-swipe    { background: rgba(236,72,153,.12); color: #db2777; }
.resource-card-icon-tool     { background: rgba(14,165,233,.15); color: #0284c7; }
.resource-card-icon-reading  { background: rgba(251,191,36,.16); color: #d97706; }
.resource-card-icon-video    { background: rgba(16,185,129,.15); color: #059669; }

[data-theme="dark"] .resource-card-icon-template { background: rgba(139,124,255,.18); color: #a8a4ff; }
[data-theme="dark"] .resource-card-icon-swipe    { background: rgba(244,114,182,.18); color: #f9a8d4; }
[data-theme="dark"] .resource-card-icon-tool     { background: rgba(56,189,248,.18); color: #7dd3fc; }
[data-theme="dark"] .resource-card-icon-reading  { background: rgba(251,191,36,.20); color: #fcd34d; }
[data-theme="dark"] .resource-card-icon-video    { background: rgba(52,211,153,.18); color: #6ee7b7; }

.resource-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.resource-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.resource-card-badge {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-light);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 3px 8px;
  border-radius: 999px;
}
.resource-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--text);
}
.resource-card-desc {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-light);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.resource-card-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
}
.resource-card-host {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--primary);
  letter-spacing: 0.01em;
}

.resource-del {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: none;
  background: rgba(0,0,0,0.04);
  color: var(--text-light);
  font-size: 0.85rem;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
}
.resource-card:hover .resource-del { display: inline-flex; }
.resource-del:hover { background: rgba(239,68,68,0.12); color: #ef4444; }

.resource-composer {
  margin-top: 24px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-alt);
}
.resource-form-row { margin-bottom: 10px; }
.resource-form-row input,
.resource-form-row textarea,
.resource-form-row select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
}
.resource-form-row textarea { resize: vertical; min-height: 60px; }
.resource-form-grid {
  display: grid;
  grid-template-columns: 1fr 140px 140px;
  gap: 10px;
}
@media (max-width: 540px) {
  .resource-form-grid { grid-template-columns: 1fr; }
}
.resource-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}

/* ===== SAVED SECTION on profile.html ===== */
.saved-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}
.saved-tab {
  appearance: none;
  background: none;
  border: none;
  color: var(--text-light);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  padding: 10px 14px 14px;
  cursor: pointer;
  position: relative;
  transition: color 0.18s ease;
}
.saved-tab:hover { color: var(--text); }
.saved-tab.active { color: var(--primary); font-weight: 600; }
.saved-tab.active::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--primary);
}

.saved-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.saved-empty p { color: var(--text-light); }

.saved-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  text-decoration: none;
  color: var(--text);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.saved-item:hover {
  background: var(--bg-alt);
  border-color: var(--primary);
  transform: translateX(2px);
}
.saved-item-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.saved-item-author {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}
.saved-item-time {
  font-size: 0.72rem;
  color: var(--text-light);
  margin-left: auto;
}
.saved-item-text {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.saved-item-media { color: var(--text-light); font-style: italic; }

.saved-type-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 999px;
}
.saved-type-post   { background: rgba(99,91,255,.12);  color: #635bff; }
.saved-type-win    { background: rgba(251,191,36,.18); color: #d97706; }
.saved-type-lesson { background: rgba(16,185,129,.15); color: #059669; }
.saved-type-note   { background: rgba(236,72,153,.12); color: #db2777; }

[data-theme="dark"] .saved-type-post   { background: rgba(139,124,255,.18); color: #a8a4ff; }
[data-theme="dark"] .saved-type-win    { background: rgba(251,191,36,.20); color: #fcd34d; }
[data-theme="dark"] .saved-type-lesson { background: rgba(52,211,153,.18); color: #6ee7b7; }
[data-theme="dark"] .saved-type-note   { background: rgba(244,114,182,.18); color: #f9a8d4; }

/* "Use Sphere logo" button on profile.html — sits between
   Change Photo + Remove Photo. Subtle violet styling so it
   reads as the official brand option. */
.profile-avatar-use-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  padding: 7px 14px;
  border-radius: 8px;
  background: rgba(99, 91, 255, 0.10);
  color: var(--primary);
  border: 1px solid rgba(99, 91, 255, 0.25);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.profile-avatar-use-logo:hover {
  background: rgba(99, 91, 255, 0.18);
  border-color: var(--primary);
  transform: translateY(-1px);
}
[data-theme="dark"] .profile-avatar-use-logo {
  background: rgba(139, 124, 255, 0.14);
  color: #c4b5fd;
  border-color: rgba(139, 124, 255, 0.28);
}
[data-theme="dark"] .profile-avatar-use-logo:hover {
  background: rgba(139, 124, 255, 0.22);
  border-color: #a8a4ff;
}

/* ===== POST / WIN / ANN — corner action buttons + inline editor =====
   Pencil (Edit) sits in the top-right corner. Trash (Delete) sits
   in the BOTTOM-right corner. Keeping them on opposite ends avoids
   overlapping the timestamp at the top, and also separates the
   destructive action from the safe one so they can't be confused.
   Both are completely hidden at rest and fade in only when the
   user hovers the card — so reading stays clean. */
.post-actions-corner {
  position: absolute;
  inset: 8px 8px 8px auto;          /* top:8 right:8 bottom:8, left:auto */
  right: 8px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;             /* let timestamp clicks pass through */
}
.post-actions-corner .post-corner-btn { pointer-events: auto; }
.post-corner-btn {
  /* Reset any legacy positioning from .post-delete-btn / .win-delete-btn
     / .ann-delete-btn so the new corner layout owns positioning. */
  position: static !important;
  appearance: none;
  background: var(--bg);
  border: 1px solid var(--border);
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  color: var(--text-light);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;                       /* fully hidden at rest */
  font-size: inherit !important;
  line-height: 1 !important;
  top: auto !important;
  right: auto !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  transition: opacity 0.18s ease, transform 0.18s ease,
              background 0.18s ease, color 0.18s ease,
              border-color 0.18s ease;
}
/* On card hover the buttons settle into place and become visible */
.post-item:hover .post-corner-btn,
.win-item:hover .post-corner-btn,
.ann-item:hover .post-corner-btn,
.post-item:focus-within .post-corner-btn,
.win-item:focus-within .post-corner-btn,
.ann-item:focus-within .post-corner-btn {
  opacity: 0.92;
  transform: translateY(0);
}
/* Touch devices have no hover — show the buttons permanently
   so users can still edit / delete their own posts on phones. */
@media (hover: none), (pointer: coarse) {
  .post-corner-btn { opacity: 0.7 !important; transform: translateY(0) !important; }
}
.post-corner-btn:hover {
  background: rgba(99, 91, 255, 0.10);
  border-color: var(--primary);
  color: var(--primary);
  opacity: 1;
}
[data-theme="dark"] .post-corner-btn {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
}
[data-theme="dark"] .post-corner-btn:hover {
  background: rgba(139, 124, 255, 0.16);
  border-color: rgba(139, 124, 255, 0.45);
  color: #c4b5fd;
}
/* Trash variant — warm-red hover. The bottom-right position keeps
   it well clear of the timestamp at top. */
.post-corner-btn-danger:hover {
  background: rgba(220, 38, 38, 0.10) !important;
  border-color: rgba(220, 38, 38, 0.40) !important;
  color: #dc2626 !important;
}
[data-theme="dark"] .post-corner-btn-danger:hover {
  background: rgba(248, 113, 113, 0.16) !important;
  border-color: rgba(248, 113, 113, 0.40) !important;
  color: #fca5a5 !important;
}

.post-menu-popover {
  position: absolute;
  top: 38px;
  right: 0;
  min-width: 180px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 5px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.10);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 30;
  animation: postMenuIn 0.14s cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes postMenuIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.post-menu-item {
  appearance: none;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background 0.14s ease;
}
.post-menu-item:hover { background: var(--bg-alt); }
.post-menu-item svg { flex-shrink: 0; opacity: 0.75; }
.post-menu-item-danger { color: #dc2626; }
.post-menu-item-danger:hover { background: rgba(220, 38, 38, 0.08); }
.post-menu-item-danger svg { opacity: 0.9; }

/* "(edited)" indicator next to the timestamp */
.post-edited {
  color: var(--text-light);
  font-size: 0.75em;
  font-style: italic;
  margin-left: 4px;
  cursor: help;
}

/* Inline editor that replaces the post text when "Edit" is clicked */
.post-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-alt);
  animation: postEditorIn 0.18s ease;
}
@keyframes postEditorIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.post-editor-input,
.post-editor-textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  padding: 9px 12px;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.post-editor-input:focus,
.post-editor-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.12);
}
.post-editor-textarea { resize: none; min-height: 70px; max-height: 480px; }
.post-editor-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.post-editor-count {
  margin-right: auto;
  font-size: 0.72rem;
  color: var(--text-light);
  font-variant-numeric: tabular-nums;
}
.btn-primary-mini {
  appearance: none;
  background: var(--primary);
  border: 1px solid var(--primary);
  color: #fff;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 7px;
  cursor: pointer;
  transition: filter 0.18s ease, transform 0.18s ease;
}
.btn-primary-mini:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-primary-mini:disabled { opacity: 0.5; cursor: not-allowed; }

/* Make sure post-item / win-item / ann-item have positioning
   context for the absolute-positioned .post-menu. */
.post-item,
.win-item,
.ann-item { position: relative; }

/* Override: legacy .post-delete-btn / .win-delete-btn /
   .ann-delete-btn CSS gave them absolute positioning + the
   hover-to-reveal opacity trick. Now they live INSIDE the
   kebab menu popover so we need to reset that styling. */
.post-menu-item.post-delete-btn,
.post-menu-item.win-delete-btn,
.post-menu-item.ann-delete-btn {
  position: static !important;
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #dc2626 !important;
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
}
.post-menu-item.post-delete-btn:hover,
.post-menu-item.win-delete-btn:hover,
.post-menu-item.ann-delete-btn:hover {
  background: rgba(220, 38, 38, 0.08) !important;
  color: #dc2626 !important;
}

/* ============================================================
   CHAT — SMOOTHNESS REFINEMENTS
   Tighten consecutive-message clusters, softer bubble corners,
   gentle entrance, smarter reaction pill placement. Builds on
   the existing chat CSS by overriding the rougher edges.
   ============================================================ */

/* The chat-messages region IS the conversation surface — one
   continuous rounded card. Messages sit on top of it without
   any per-row backgrounds or shadow bands (those were creating
   the "may mga cut" effect the user reported). */
.chat-messages {
  gap: 0 !important;
  padding: 16px 18px 8px !important;
  scroll-behavior: smooth;
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 16px -10px rgba(15, 23, 42, 0.06);
}
[data-theme="dark"] .chat-messages {
  background: #1f1f23 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.30), 0 8px 24px -10px rgba(0, 0, 0, 0.40) !important;
}
.chat-messages::-webkit-scrollbar { width: 6px; }
.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(127, 127, 127, 0.18);
  border-radius: 8px;
}
.chat-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(127, 127, 127, 0.32);
}

/* Per-row spacing rules:
   - First message of a cluster (group-head) → 14px above
   - Continued messages (not group-head)    → 2px above
   This is what makes the feed feel like a stream rather than a
   list of cards. */
.chat-message {
  padding: 0 !important;
  margin-top: 2px;
  align-items: flex-end !important;
}
.chat-message.group-head {
  margin-top: 14px !important;
}
.chat-message:first-child,
.chat-message:first-child.group-head { margin-top: 0 !important; }

/* The name + timestamp header renders only on the group-head;
   hide it on continued messages so consecutive bubbles cluster
   tight without repeating the author label. */
.chat-message:not(.group-head) .chat-name { display: none; }

/* ---- Smoother bubble corners ---- */
.chat-bubble {
  border-radius: 20px !important;
  padding: 8px 14px !important;
  font-size: 0.9rem;
  line-height: 1.45;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.chat-bubble:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* Cluster-aware corners — only the first bubble of a cluster
   gets the small "tail" corner; continued messages get a fully
   rounded shape on the matching side. This is the visual cue
   that says "same person is still talking". */

/* Theirs (left side): tail = top-left small on head only */
.chat-message:not(.mine) .chat-bubble {
  border-top-left-radius: 20px !important;
}
.chat-message:not(.mine).group-head .chat-bubble {
  border-top-left-radius: 6px !important;
}
.chat-message:not(.mine):not(.group-head) .chat-bubble {
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
}
.chat-message:not(.mine):has(+ .chat-message:not(.group-head)) .chat-bubble {
  border-bottom-left-radius: 8px !important;
}

/* Mine (right side): tail = top-right small on head only */
.chat-message.mine .chat-bubble {
  border-top-right-radius: 20px !important;
  border-top-left-radius: 20px !important;
}
.chat-message.mine.group-head .chat-bubble {
  border-top-right-radius: 6px !important;
}
.chat-message.mine:not(.group-head) .chat-bubble {
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}
.chat-message.mine:has(+ .chat-message.mine:not(.group-head)) .chat-bubble {
  border-bottom-right-radius: 8px !important;
}

/* ---- Smoother gradient for own bubbles ---- */
.chat-message.mine .chat-bubble {
  background: linear-gradient(135deg, #6c63ff 0%, #5b5af0 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(108, 99, 255, 0.18) !important;
  box-shadow: 0 2px 8px rgba(99, 91, 255, 0.18);
}
[data-theme="dark"] .chat-message.mine .chat-bubble {
  color: #fff !important;
  background: linear-gradient(135deg, #7c70ff 0%, #6353ff 100%) !important;
  box-shadow: 0 2px 10px rgba(124, 112, 255, 0.28);
}

/* Their bubbles — soft, modern */
.chat-message:not(.mine) .chat-bubble {
  background: var(--bg-alt) !important;
  border: 1px solid var(--border) !important;
}
[data-theme="dark"] .chat-message:not(.mine) .chat-bubble {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ---- Gentle entrance ---- */
@keyframes chat-msg-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.chat-message .chat-bubble {
  animation: chat-msg-in 0.22s cubic-bezier(0.32, 0.72, 0, 1) both;
}

/* ---- Reaction pills — sit cleanly BELOW the bubble with a small
   gap so they don't overlap the message or look orphaned. Slight
   indent matches the bubble edge for a tidy alignment. ---- */
.chat-reactions {
  position: relative;
  margin-top: 4px !important;
  margin-left: 8px !important;
  z-index: 2;
  animation: chat-react-in 0.22s cubic-bezier(0.32, 0.72, 0, 1) both;
}
.chat-message.mine .chat-reactions {
  margin-right: 8px !important;
  margin-left: auto !important;
  justify-content: flex-end;
}
@keyframes chat-react-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-react-pill {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  padding: 2px 9px !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.chat-react-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.chat-react-pill.mine {
  background: rgba(99, 91, 255, 0.10) !important;
  border-color: rgba(99, 91, 255, 0.40) !important;
}
[data-theme="dark"] .chat-react-pill {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}
[data-theme="dark"] .chat-react-pill.mine {
  background: rgba(139, 124, 255, 0.18) !important;
  border-color: rgba(139, 124, 255, 0.45) !important;
}

/* ---- Hover actions: unified Messenger-style toolbar pill that
   floats beside the bubble. One rounded container holds all the
   icon buttons; the container itself has the bg/border/shadow,
   individual buttons are transparent until hover. Sits 14px
   away from the bubble so there's clear breathing room. ---- */
.chat-bubble-row {
  position: relative !important;
  align-items: center !important;
  gap: 0 !important;
}
.chat-msg-actions {
  position: absolute !important;
  top: 50% !important;
  left: calc(100% + 14px) !important;
  transform: translateY(-50%) translateX(-4px);
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 3px !important;
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10), 0 1px 3px rgba(15, 23, 42, 0.06);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
  margin: 0 !important;
  z-index: 5;
}
.chat-message.mine .chat-msg-actions {
  left: auto !important;
  right: calc(100% + 14px) !important;
  transform: translateY(-50%) translateX(4px);
}
.chat-bubble-row:hover .chat-msg-actions,
.chat-bubble-row:focus-within .chat-msg-actions {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  pointer-events: auto;
}
[data-theme="dark"] .chat-msg-actions {
  background: #2a2a2e !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.40), 0 1px 3px rgba(0, 0, 0, 0.30);
}

/* Individual icon buttons inside the toolbar pill —
   transparent at rest, soft fill on hover. */
.chat-action-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: none !important;
  color: var(--text-light) !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.chat-action-btn + .chat-action-btn { margin-left: 2px !important; }
.chat-action-btn svg {
  width: 14px;
  height: 14px;
  display: block;
}
.chat-action-btn:hover {
  background: rgba(99, 91, 255, 0.12) !important;
  color: var(--primary) !important;
  transform: scale(1.05);
}
.chat-action-btn.chat-delete-btn:hover {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #ef4444 !important;
}
[data-theme="dark"] .chat-action-btn {
  color: rgba(255, 255, 255, 0.65) !important;
}
[data-theme="dark"] .chat-action-btn:hover {
  background: rgba(139, 124, 255, 0.22) !important;
  color: #c4b5fd !important;
}
[data-theme="dark"] .chat-action-btn.chat-delete-btn:hover {
  background: rgba(248, 113, 113, 0.20) !important;
  color: #fca5a5 !important;
}

/* ---- Smoother composer ---- */
.chat-composer {
  margin-top: 12px !important;
  padding: 8px !important;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 16px;
  gap: 6px !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.chat-composer:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.10);
}
.chat-composer input {
  background: transparent !important;
  border: none !important;
  padding: 8px 12px !important;
  font-size: 0.94rem !important;
}
.chat-composer input:focus {
  outline: none !important;
  box-shadow: none !important;
}
.chat-composer button {
  border-radius: 12px !important;
  padding: 8px 18px !important;
  font-weight: 600;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.chat-composer button:hover { transform: translateY(-1px); filter: brightness(1.05); }
.chat-composer button:active { transform: translateY(0); }

/* ---- Avatar polish — soft ring on hover ---- */
.chat-message .chat-avatar {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.chat-message .chat-avatar:hover {
  transform: scale(1.06);
  box-shadow: 0 4px 12px rgba(99, 91, 255, 0.18);
}

/* ---- Name + time — cleaner typography ---- */
.chat-name {
  font-size: 0.76rem !important;
  margin: 0 6px 4px !important;
  letter-spacing: 0.01em;
}
.chat-name strong { font-weight: 600; color: var(--text); }
.chat-name time {
  font-size: 0.7rem !important;
  opacity: 0.6;
}

/* ============================================================
   GROUPS — Discord-style server / channel layout
   ============================================================ */
.group-detail-view {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 160px);
  min-height: 560px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
[data-theme="dark"] .group-detail-view {
  background: #1f1f23;
  border-color: rgba(255, 255, 255, 0.08);
}
.group-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
[data-theme="dark"] .group-detail-header {
  background: #18181b;
  border-color: rgba(255, 255, 255, 0.08);
}
.group-detail-back {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-light);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.group-detail-back:hover { background: rgba(99,91,255,0.10); color: var(--primary); }
.group-detail-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #635bff, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.group-detail-title { flex: 1; min-width: 0; }
.group-detail-title h2 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.group-detail-title p { margin: 2px 0 0; font-size: 0.78rem; color: var(--text-light); }
.group-detail-settings {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-light);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.group-detail-settings:hover { background: rgba(99,91,255,0.10); color: var(--primary); border-color: var(--primary); }

.group-detail-body {
  display: grid;
  grid-template-columns: 240px 1fr;
  flex: 1;
  min-height: 0;
}
.group-channels {
  border-right: 1px solid var(--border);
  padding: 14px 8px;
  overflow-y: auto;
  background: var(--bg-alt);
}
[data-theme="dark"] .group-channels {
  background: #18181b;
  border-color: rgba(255, 255, 255, 0.06);
}
.group-channels::-webkit-scrollbar { width: 6px; }
.group-channels::-webkit-scrollbar-thumb { background: rgba(127,127,127,0.18); border-radius: 8px; }

.group-channels-section { margin-bottom: 12px; }
.group-channels-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 6px;
}
.group-channels-label {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-light);
}
.group-channels-add {
  width: 18px; height: 18px;
  border-radius: 4px;
  background: transparent;
  border: none;
  color: var(--text-light);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.group-channels-add:hover { color: var(--primary); background: rgba(99,91,255,0.10); }

.group-channel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-light);
  cursor: pointer;
  user-select: none;
  transition: background 0.12s ease, color 0.12s ease;
  position: relative;
}
.group-channel:hover { background: rgba(127,127,127,0.10); color: var(--text); }
.group-channel.is-active {
  background: rgba(99,91,255,0.14);
  color: var(--primary);
  font-weight: 600;
}
[data-theme="dark"] .group-channel.is-active {
  background: rgba(139,124,255,0.18);
  color: #c4b5fd;
}
.group-channel .channel-hash {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-light);
  width: 14px;
  text-align: center;
}
.group-channel.is-active .channel-hash { color: var(--primary); }
.group-channel .channel-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.group-channel .channel-badge {
  font-size: 0.65rem;
  font-weight: 700;
  background: var(--primary);
  color: #fff;
  padding: 1px 6px;
  border-radius: 99px;
  min-width: 18px;
  text-align: center;
}
.channel-del {
  display: none;
  background: transparent;
  border: none;
  color: var(--text-light);
  cursor: pointer;
  font-size: 1rem;
  width: 18px;
  height: 18px;
  line-height: 1;
  border-radius: 4px;
  padding: 0;
}
.group-channel:hover .channel-del { display: inline-block; }
.channel-del:hover { background: rgba(220,38,38,0.12); color: #dc2626; }

.group-main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.group-channel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}
.group-channel-header h3 { margin: 0; font-size: 0.95rem; font-weight: 700; }
.group-channel-header .channel-hash { font-size: 1.2rem; color: var(--text-light); }
.group-channel-header .channel-topic {
  font-size: 0.78rem;
  color: var(--text-light);
  padding-left: 10px;
  border-left: 1px solid var(--border);
  margin-left: 4px;
}
.group-main .chat-window {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.group-main .chat-messages { flex: 1; min-height: 0; }
.group-main .chat-composer { padding: 12px 18px; border-top: 1px solid var(--border); margin-top: 0; }

/* Events panel */
.group-events-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.group-events-header h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.group-events-list {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.group-event-card {
  display: flex;
  align-items: stretch;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
}
[data-theme="dark"] .group-event-card { background: rgba(255,255,255,0.04); }
.group-event-date {
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--bg-alt);
  border-radius: 8px;
  padding: 6px;
}
.group-event-date strong { font-size: 0.7rem; font-weight: 700; color: var(--primary); letter-spacing: 0.08em; }
.group-event-date span { font-size: 1.4rem; font-weight: 800; line-height: 1; margin-top: 2px; }
.group-event-body { flex: 1; min-width: 0; }
.group-event-body h4 { margin: 0 0 4px; font-size: 0.95rem; font-weight: 700; }
.group-event-time { font-size: 0.78rem; color: var(--text-light); font-weight: 500; }
.group-event-body p { margin: 6px 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--text); }
.group-event-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.group-event-del {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-light);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.group-event-del:hover { background: rgba(220,38,38,0.12); color: #dc2626; border-color: rgba(220,38,38,0.40); }

/* Members panel */
.group-members-header { padding: 14px 18px; border-bottom: 1px solid var(--border); }
.group-members-header h3 { margin: 0; font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.group-members-count {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-light);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 99px;
}
.group-members-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.group-member {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.group-member:hover { background: var(--bg-alt); }
.group-member-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #635bff, #8b5cf6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  overflow: hidden;
  flex-shrink: 0;
}
.group-member-avatar img { width: 100%; height: 100%; object-fit: cover; }
.group-member-info { flex: 1; min-width: 0; }
.group-member-name { font-size: 0.92rem; font-weight: 600; }
.group-member-role {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 99px;
  margin-top: 2px;
}
.role-owner    { background: rgba(251,191,36,0.18); color: #d97706; }
.role-moderator{ background: rgba(99,91,255,0.14);  color: var(--primary); }
.role-member   { background: var(--bg-alt); color: var(--text-light); border: 1px solid var(--border); }
[data-theme="dark"] .role-owner    { background: rgba(251,191,36,0.22); color: #fcd34d; }
[data-theme="dark"] .role-moderator{ background: rgba(139,124,255,0.22); color: #c4b5fd; }
[data-theme="dark"] .role-member   { background: rgba(255,255,255,0.06); color: var(--text-light); border-color: rgba(255,255,255,0.10); }

.group-member-actions { display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s ease; }
.group-member:hover .group-member-actions { opacity: 1; }
.group-member-action {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-light);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
}
.group-member-action:hover { background: rgba(99,91,255,0.12); color: var(--primary); border-color: var(--primary); }
.group-member-action-danger:hover {
  background: rgba(220,38,38,0.12) !important;
  color: #dc2626 !important;
  border-color: rgba(220,38,38,0.40) !important;
}

/* ===== JITSI MODAL ===== */
.jitsi-modal {
  position: fixed;
  inset: 0;
  z-index: 99000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;          /* never capture clicks while invisible */
  transition: opacity 0.18s ease;
}
.jitsi-modal[hidden] { display: none; }
.jitsi-modal.open { opacity: 1; pointer-events: auto; }
.jitsi-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 22, 0.78);
  backdrop-filter: blur(6px);
}
.jitsi-modal-content {
  position: relative;
  width: min(1240px, 96vw);
  height: min(800px, 92vh);
  background: var(--bg);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
}
.jitsi-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.jitsi-modal-header h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.jitsi-modal-header p { margin: 2px 0 0; font-size: 0.76rem; color: var(--text-light); }
.jitsi-leave-btn {
  background: #dc2626;
  border: none;
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.jitsi-leave-btn:hover { filter: brightness(1.1); }
.jitsi-modal-frame-wrap { flex: 1; min-height: 0; }
.jitsi-modal-frame-wrap iframe { width: 100%; height: 100%; border: none; display: block; }

/* ===== GROUP MODAL (settings / new channel / new event) ===== */
.group-modal {
  position: fixed;
  inset: 0;
  z-index: 98000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;          /* never capture clicks while invisible */
  transition: opacity 0.18s ease;
}
.group-modal[hidden] { display: none; }
.group-modal.open { opacity: 1; pointer-events: auto; }
.group-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 22, 0.62);
  backdrop-filter: blur(4px);
}
.group-modal-content {
  position: relative;
  width: min(460px, 92vw);
  background: var(--bg);
  border-radius: 14px;
  padding: 24px 22px 18px;
  border: 1px solid var(--border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.group-modal-content h3 { margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; }
.group-modal-sub { margin: 0 0 14px; font-size: 0.82rem; color: var(--text-light); }
.group-modal-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-light);
  margin: 12px 0 6px;
  letter-spacing: 0.01em;
}
.group-modal-content input[type="text"],
.group-modal-content input[type="datetime-local"],
.group-modal-content textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-alt);
  color: var(--text);
  font-family: inherit;
  font-size: 0.92rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.group-modal-content input:focus,
.group-modal-content textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.12);
  background: var(--bg);
}
.group-modal-content textarea { resize: vertical; min-height: 70px; }
.group-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 18px;
}

/* Mobile — stack the 2-column layout */
@media (max-width: 720px) {
  .group-detail-body { grid-template-columns: 1fr; }
  .group-channels {
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: 200px;
  }
  .jitsi-modal-content { width: 100vw; height: 100vh; border-radius: 0; }
}

/* ============================================================
   PWA — install prompt banner + standalone-mode polish
   Shows a subtle "Install Sphere Academy" pill at the bottom of
   the page when the browser fires beforeinstallprompt. Hidden
   by default; reveals when body.pwa-installable is set.
   ============================================================ */
.pwa-install-banner {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%) translateY(20px);
  z-index: 9500;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.08);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text);
  opacity: 0;
  transition: opacity 0.24s ease, transform 0.24s ease;
}
body.pwa-installable .pwa-install-banner {
  display: inline-flex;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
body.pwa-installed .pwa-install-banner { display: none !important; }
.pwa-install-banner-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #635bff, #8b5cf6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.pwa-install-banner-icon img { width: 100%; height: 100%; object-fit: contain; }
.pwa-install-banner-text { line-height: 1.2; }
.pwa-install-banner-text strong { display: block; font-weight: 600; }
.pwa-install-banner-text span { font-size: 0.72rem; color: var(--text-light); }
.pwa-install-banner-cta {
  appearance: none;
  background: var(--primary);
  color: #fff;
  border: none;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.pwa-install-banner-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.pwa-install-banner-close {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-light);
  font-size: 1.1rem;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
}
.pwa-install-banner-close:hover { background: var(--bg-alt); color: var(--text); }
[data-theme="dark"] .pwa-install-banner {
  background: #27272a;
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.40), 0 2px 6px rgba(0, 0, 0, 0.30);
}

/* Standalone display tweaks — when the app is launched from the
   home screen icon, hide the "Log In" CTAs in the navbar so the
   experience feels app-like. */
@media (display-mode: standalone) {
  .nav-mobile-cta { display: none !important; }
  /* Add a touch more bottom padding so iOS home indicator
     doesn't overlap the mobile nav. */
  body:has(.dash-mobile-nav) {
    padding-bottom: calc(86px + env(safe-area-inset-bottom, 0)) !important;
  }
}

/* ============================================================
   FINAL OVERRIDES — placed at end of file so they win against
   any earlier !important rules that have equal specificity.
   ============================================================ */

/* Hero CTAs on mobile must be small + compact. There's an earlier
   rule (around line 13499) that forces padding:14px 26px and
   font-size:15px with !important on .hero.hero-v2 buttons —
   that was overriding our mobile media query because it came
   later in source order. These end-of-file rules win because
   they're the LAST !important rules in cascade order. */
@media (max-width: 600px) {
  .hero.hero-v2 .hero-actions .btn,
  .hero.hero-v2 .hero-cta-primary,
  .hero.hero-v2 .btn-primary,
  .hero.hero-v2 .btn-outline,
  .hero.hero-v2 .hero-actions .btn-outline {
    padding: 7px 14px !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    width: auto !important;
    min-height: 0 !important;
    box-shadow: 0 2px 8px -2px rgba(99, 91, 255, 0.22) !important;
    gap: 6px !important;
    border-radius: 999px !important;
  }
  .hero.hero-v2 .hero-cta-primary svg,
  .hero.hero-v2 .hero-actions .btn svg {
    width: 13px !important;
    height: 13px !important;
  }
  .hero.hero-v2 .hero-actions {
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 28px !important;
    flex-wrap: nowrap !important;
  }
}

/* ============================================================
   HERO EYEBROW — make it more visible (user feedback)
   Bumped: bigger text, more padding, stronger background +
   border, brighter pulse dot. Placed in the FINAL OVERRIDES
   block so it wins against all earlier eyebrow rules.
   ============================================================ */
.hero.hero-v2 .hero-eyebrow {
  padding: 9px 18px !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  gap: 10px !important;
  margin-bottom: 28px !important;
  /* Stronger background + border = more visible chip */
  background: rgba(99, 91, 255, 0.08) !important;
  border: 1px solid rgba(99, 91, 255, 0.30) !important;
  color: var(--text) !important;
  box-shadow: 0 4px 14px -4px rgba(99, 91, 255, 0.25),
              0 0 0 1px rgba(99, 91, 255, 0.04) inset !important;
}
[data-theme="dark"] .hero.hero-v2 .hero-eyebrow {
  background: rgba(139, 124, 255, 0.14) !important;
  border-color: rgba(139, 124, 255, 0.40) !important;
  color: #e9e6ff !important;
  box-shadow: 0 4px 16px -4px rgba(139, 124, 255, 0.35),
              0 0 0 1px rgba(139, 124, 255, 0.08) inset !important;
}

/* Brighter pulse dot — bigger, more glow */
.hero.hero-v2 .hero-eyebrow .hero-pulse {
  width: 10px !important;
  height: 10px !important;
  background: #635bff !important;
  box-shadow: 0 0 0 5px rgba(99, 91, 255, 0.22),
              0 0 12px 2px rgba(99, 91, 255, 0.45) !important;
}
[data-theme="dark"] .hero.hero-v2 .hero-eyebrow .hero-pulse {
  background: #8b7cff !important;
  box-shadow: 0 0 0 5px rgba(139, 124, 255, 0.28),
              0 0 14px 2px rgba(139, 124, 255, 0.55) !important;
}

/* On mobile, slightly tone down padding so it doesn't dominate */
@media (max-width: 600px) {
  .hero.hero-v2 .hero-eyebrow {
    padding: 7px 14px !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.05em !important;
  }
}

/* ============================================================
   HERO HEADLINE — make it BIG and dominating on desktop
   User feedback: too small for the wide hero area, should
   stand out more. Bumped the cap from 92px → 120px (+30%)
   and tightened letter-spacing so the longer line still fits
   on a single row.
   ============================================================ */
.hero.hero-v2 .hero-title {
  font-size: clamp(32px, 7.4vw, 120px) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.05em !important;
  font-weight: 800 !important;
  max-width: 1850px !important;
  margin-bottom: 28px !important;
}
.hero.hero-v2 .hero-title .hero-line {
  white-space: nowrap !important;
  overflow: hidden !important;
}

/* Mobile keeps a sane size — bump min so it stays bold on
   small viewports too, but the desktop cap can run high. */
@media (max-width: 600px) {
  .hero.hero-v2 .hero-title {
    font-size: clamp(32px, 8.4vw, 96px) !important;
    letter-spacing: -0.045em !important;
  }
}

/* ============================================================
   SPHERE COACH — AI Marketing Copilot
   Floating bubble (bottom-right) + slide-up chat panel.
   ============================================================ */
.sphere-coach { position: relative; }

/* ---- Floating launcher bubble ---- */
.sphere-coach-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 8500;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px 12px 14px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #635bff 0%, #8b5cf6 100%);
  color: #fff;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 12px 28px -8px rgba(99, 91, 255, 0.55),
              0 4px 10px rgba(15, 23, 42, 0.18);
  transition: transform 0.18s cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 0.18s ease;
}
.sphere-coach-fab:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 18px 38px -8px rgba(99, 91, 255, 0.62),
              0 6px 14px rgba(15, 23, 42, 0.22);
}
.sphere-coach-fab:active { transform: translateY(-1px) scale(1.0); }
.sphere-coach-fab svg { flex-shrink: 0; }
.sphere-coach-fab-label { font-weight: 600; }

/* Subtle pulse ring to draw the eye on first load. Plays a few
   times then settles down so it doesn't get annoying. */
.sphere-coach-fab-pulse {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(99, 91, 255, 0.55);
  animation: sphereCoachPulse 2.2s ease-out 0.5s 3;
}
@keyframes sphereCoachPulse {
  0%   { box-shadow: 0 0 0 0 rgba(99, 91, 255, 0.55); }
  100% { box-shadow: 0 0 0 22px rgba(99, 91, 255, 0); }
}

/* Hide the label on small screens — keep it as a compact bubble */
@media (max-width: 600px) {
  .sphere-coach-fab {
    padding: 12px !important;
    right: 14px;
    bottom: 14px;
  }
  .sphere-coach-fab-label { display: none; }
}

/* ---- Chat panel ---- */
.sphere-coach-panel {
  position: fixed;
  right: 22px;
  bottom: 88px;
  width: 380px;
  max-width: calc(100vw - 24px);
  height: min(620px, calc(100vh - 120px));
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25),
              0 4px 10px rgba(15, 23, 42, 0.10);
  z-index: 8400;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(20px) scale(0.98);
  opacity: 0;
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1),
              opacity 0.22s ease;
}
.sphere-coach-panel[hidden] { display: none; }
.sphere-coach-panel.is-open {
  transform: translateY(0) scale(1);
  opacity: 1;
}
[data-theme="dark"] .sphere-coach-panel {
  background: #1f1f23;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5),
              0 4px 10px rgba(0, 0, 0, 0.30);
}

/* On mobile, panel becomes full screen */
@media (max-width: 600px) {
  .sphere-coach-panel {
    right: 0;
    bottom: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }
}

/* ---- Header ---- */
.sphere-coach-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.sphere-coach-avatar {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, #635bff, #8b5cf6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sphere-coach-titles { flex: 1; min-width: 0; line-height: 1.2; }
.sphere-coach-titles strong { font-size: 0.95rem; font-weight: 700; display: block; }
.sphere-coach-titles span {
  font-size: 0.72rem;
  color: var(--text-light);
  display: block;
  margin-top: 2px;
}
.sphere-coach-reset,
.sphere-coach-close {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-light);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  transition: all 0.15s ease;
}
.sphere-coach-reset:hover { background: rgba(220, 38, 38, 0.10); color: #dc2626; border-color: rgba(220, 38, 38, 0.40); }
.sphere-coach-close:hover { background: var(--bg); color: var(--text); }

/* ---- Messages ---- */
.sphere-coach-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}
.sphere-coach-messages::-webkit-scrollbar { width: 6px; }
.sphere-coach-messages::-webkit-scrollbar-thumb {
  background: rgba(127, 127, 127, 0.20);
  border-radius: 8px;
}

.sphere-coach-msg {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  max-width: 100%;
  animation: sphereCoachMsgIn 0.22s cubic-bezier(0.32, 0.72, 0, 1) both;
}
@keyframes sphereCoachMsgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sphere-coach-msg-user { justify-content: flex-end; }
.sphere-coach-msg-user .sphere-coach-bubble {
  background: linear-gradient(135deg, #635bff, #5b5af0);
  color: #fff;
  border-top-right-radius: 6px;
  max-width: 80%;
}
.sphere-coach-msg-ai .sphere-coach-bubble {
  background: var(--bg-alt);
  color: var(--text);
  border-top-left-radius: 6px;
  max-width: 85%;
}
[data-theme="dark"] .sphere-coach-msg-ai .sphere-coach-bubble {
  background: rgba(255, 255, 255, 0.06);
}
.sphere-coach-msg-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #635bff, #8b5cf6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 4px;
}
.sphere-coach-bubble {
  padding: 9px 13px;
  border-radius: 16px;
  font-size: 0.88rem;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.sphere-coach-bubble strong { font-weight: 700; }
.sphere-coach-bubble em { font-style: italic; }
.sphere-coach-bubble code {
  background: rgba(0, 0, 0, 0.10);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
}
[data-theme="dark"] .sphere-coach-bubble code { background: rgba(255, 255, 255, 0.10); }
.sphere-coach-bubble pre {
  background: rgba(0, 0, 0, 0.08);
  padding: 8px 10px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 6px 0;
  font-size: 0.82em;
}
[data-theme="dark"] .sphere-coach-bubble pre { background: rgba(0, 0, 0, 0.40); }
.sphere-coach-bubble pre code { background: transparent; padding: 0; }
.sphere-coach-bubble ul { margin: 6px 0; padding-left: 18px; }
.sphere-coach-bubble li { margin: 2px 0; }
.sphere-coach-msg-user .sphere-coach-bubble code,
.sphere-coach-msg-user .sphere-coach-bubble pre { background: rgba(255, 255, 255, 0.18); color: #fff; }

.sphere-coach-msg-error {
  align-self: center;
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
  border: 1px solid rgba(220, 38, 38, 0.30);
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.78rem;
  max-width: 90%;
  text-align: center;
}
[data-theme="dark"] .sphere-coach-msg-error {
  background: rgba(248, 113, 113, 0.18);
  color: #fca5a5;
  border-color: rgba(248, 113, 113, 0.40);
}

/* Typing indicator */
.sphere-coach-typing .sphere-coach-bubble {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 12px 14px;
}
.sphere-coach-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  animation: sphereCoachDot 1.2s ease-in-out infinite;
}
.sphere-coach-dot:nth-child(2) { animation-delay: 0.15s; }
.sphere-coach-dot:nth-child(3) { animation-delay: 0.30s; }
@keyframes sphereCoachDot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

/* Welcome state */
.sphere-coach-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px 8px;
}
.sphere-coach-welcome-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, #635bff, #8b5cf6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  box-shadow: 0 8px 20px -6px rgba(99, 91, 255, 0.45);
}
.sphere-coach-welcome h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 6px;
}
.sphere-coach-welcome p {
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--text-light);
  margin: 0 0 8px;
  max-width: 280px;
}
.sphere-coach-tip {
  font-size: 0.72rem !important;
  margin-top: 6px !important;
  opacity: 0.75;
}

/* ---- Suggestion chips ---- */
.sphere-coach-suggests {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 10px;
}
.sphere-coach-suggests button {
  appearance: none;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.sphere-coach-suggests button:hover {
  background: rgba(99, 91, 255, 0.10);
  border-color: var(--primary);
  color: var(--primary);
}

/* ---- Composer ---- */
.sphere-coach-composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
}
.sphere-coach-composer textarea {
  flex: 1;
  min-height: 38px;
  max-height: 140px;
  resize: none;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sphere-coach-composer textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.12);
}
.sphere-coach-composer button {
  appearance: none;
  background: linear-gradient(135deg, #635bff, #5b5af0);
  color: #fff;
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px -3px rgba(99, 91, 255, 0.45);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.sphere-coach-composer button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.sphere-coach-composer button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Hide the FAB inside the dashboard mobile bottom-nav so it
   doesn't overlap the existing navigation */
@media (max-width: 767px) {
  body:has(.dash-mobile-nav) .sphere-coach-fab {
    bottom: calc(80px + env(safe-area-inset-bottom, 0)) !important;
  }
  body:has(.dash-mobile-nav) .sphere-coach-panel {
    bottom: calc(150px + env(safe-area-inset-bottom, 0)) !important;
    height: calc(100dvh - 170px) !important;
  }
}

/* ============================================================
   SPHERE COACH — admin setup card (shown when no endpoint yet)
   ============================================================ */
.sphere-coach-setup {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 20px 18px 16px;
  background: linear-gradient(180deg, rgba(99, 91, 255, 0.04) 0%, transparent 100%);
  border-radius: 12px;
  border: 1px solid var(--border);
  margin: 8px 0;
}
[data-theme="dark"] .sphere-coach-setup {
  background: linear-gradient(180deg, rgba(139, 124, 255, 0.08) 0%, transparent 100%);
  border-color: rgba(255, 255, 255, 0.08);
}
.sphere-coach-setup-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #635bff, #8b5cf6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  box-shadow: 0 6px 16px -4px rgba(99, 91, 255, 0.45);
}
.sphere-coach-setup h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
}
.sphere-coach-setup > p {
  margin: 0 0 14px;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-light);
  text-align: center;
}
.sphere-coach-setup > p a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}
.sphere-coach-setup > p a:hover { text-decoration: underline; }

.sphere-coach-setup-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
[data-theme="dark"] .sphere-coach-setup-steps {
  background: rgba(255, 255, 255, 0.03);
}
.sphere-coach-setup-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.8rem;
  line-height: 1.5;
}
.sphere-coach-setup-step span {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.72rem;
}
.sphere-coach-setup-step div { color: var(--text); padding-top: 2px; }
.sphere-coach-setup-step a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}
.sphere-coach-setup-step a:hover { text-decoration: underline; }
.sphere-coach-setup-step code {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
}

.sphere-coach-setup-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-light);
  margin-bottom: 6px;
}
.sphere-coach-setup-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.sphere-coach-setup-row input {
  flex: 1;
  min-width: 0;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 0.8rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sphere-coach-setup-row input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 91, 255, 0.12);
}
.sphere-coach-setup-save,
.sphere-coach-setup-test {
  appearance: none;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.78rem;
  transition: all 0.15s ease;
}
.sphere-coach-setup-save {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.sphere-coach-setup-save:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.sphere-coach-setup-save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.sphere-coach-setup-test {
  width: 100%;
  margin-bottom: 10px;
}
.sphere-coach-setup-test:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}
.sphere-coach-setup-test:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.sphere-coach-setup-hint {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-light);
  text-align: center;
}
.sphere-coach-setup-hint code {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  padding: 1px 4px;
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
}
.sphere-coach-setup-hint em { color: var(--text); font-style: italic; }