@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Outfit:wght@400;500;600;700;800;900&family=Fira+Code:wght@400;500&family=Caveat:wght@400;500;600;700&family=Dancing+Script:wght@400;500;600;700&display=swap');

:root {
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-heading: 'Outfit', sans-serif;
  --font-mono: 'Fira Code', monospace;
  --font-cursive: 'Caveat', 'Dancing Script', cursive;

  /* GMAT Club Iconic Corporate Color System */
  --bg-primary: #f4f6f9;
  --bg-white: #ffffff;
  --bg-navy: #0f2042;
  --bg-navy-light: #1c325c;
  --accent-orange: #f25c05;
  --accent-orange-hover: #d14d02;
  --accent-blue: #0284c7;
  --accent-blue-hover: #0369a1;

  /* 3D card figures — professional steel-blue on navy */
  --hero3d-highlight: #d6e8f8;
  --hero3d-light: #9fc5e8;
  --hero3d-mid: #6b9fd4;
  --hero3d-deep: #3d6f9e;
  --hero3d-shadow: #1e3a5c;
  --hero3d-particle: #c5ddf5;
  --hero3d-accent: #8eb8e8;
  --hero3d-accent-strong: #5a93c4;

  /* Neutral tones */
  --text-dark: #1e293b;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --border-color: #cbd5e1;
  --border-light: #e2e8f0;

  /* Component tokens */
  --bg-card: #ffffff;
  --border-glass: #cbd5e1;
  --text-primary: #1e293b;

  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 6px -1px rgba(15, 32, 66, 0.05), 0 2px 4px -1px rgba(15, 32, 66, 0.03);
  --shadow-lg: 0 10px 15px -3px rgba(15, 32, 66, 0.06), 0 4px 6px -2px rgba(15, 32, 66, 0.03);

  --transition-smooth: all 0.2s ease-in-out;
}

/* Light/Dark Toggle maintains compatibility but keeps the GMAT Club Navy/White tone */

.light-theme {
  --bg-primary: #fafbfe;
  --bg-white: #ffffff;
  --border-color: #e2e8f0;
  --border-light: #f1f5f9;
  --text-dark: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-dark);
  font-family: var(--font-sans);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ========================================
   Math Notation Rendering (NCERT Textbook Style)
   ======================================== */

/* Angle notation — — scaled to match cap height of the label letter (NCERT style) */

.math-angle-wrap {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  line-height: inherit;
  vertical-align: baseline;
}

.math-angle {
  font-size: 1.42em;
  line-height: 1;
  font-weight: inherit;
  font-style: normal;
  display: inline-block;
  vertical-align: baseline;
  position: relative;
  top: 0.06em;
  margin-right: 0.02em;
  font-family: "Times New Roman", "Cambria Math", "STIX Two Math", serif;
}

.math-angle-label {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* Superscript (exponents): bold, smaller, true superscript */

sup.math-sup {
  font-size: 0.62em;
  vertical-align: super;
  line-height: 0;
  font-weight: 800;
  letter-spacing: 0;
  display: inline;
  position: relative;
  top: -0.42em;
}

/* Radical — one unbreakable unit: tall — + vinculum over the entire radicand */

.math-radical {
  display: inline-flex;
  align-items: stretch;
  flex-wrap: nowrap;
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1;
  margin: 0 0.06em;
  flex-shrink: 0;
}

.math-radical-symbol {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-size: 1.35em;
  font-weight: 400;
  line-height: 0.75;
  margin-right: -0.5px;
  padding-bottom: 0.04em;
  letter-spacing: 0;
  flex-shrink: 0;
  align-self: stretch;
}

/* Taller — when the radicand is a stacked fraction */

.math-radical:has(.math-fraction-in-radical) .math-radical-symbol {
  font-size: 2.15em;
  line-height: 0.62;
  padding-bottom: 0;
}

/* Vinculum (top bar) spans full radicand width — numerator AND denominator */

.math-radical-overline {
  display: inline-flex;
  align-items: center;
  border-top: 1.5px solid currentColor;
  padding-top: 0.1em;
  line-height: 1.2;
  flex: 1 1 auto;
  min-width: 0;
}

.math-radical-content {
  display: inline-block;
  padding: 0 0.18em;
  white-space: nowrap;
  letter-spacing: 0;
  font-weight: inherit;
  line-height: 1.2;
}

/* Fractions inside a radical — numerator/denominator grouped under one root bar */

.math-fraction-in-radical {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  vertical-align: middle;
  padding: 0 2px;
  line-height: 1.15;
  width: 100%;
}

.expert-derive-formula .math-fraction-line,
.math-radical .math-fraction-line {
  width: 100%;
  height: 1px;
  background-color: currentColor;
  opacity: 0.45;
  margin: 2px 0;
  border: none;
  flex-shrink: 0;
}

.expert-derive-formula .math-fraction-num,
.expert-derive-formula .math-fraction-den,
.math-radical .math-fraction-num,
.math-radical .math-fraction-den {
  display: block;
  text-align: center;
  white-space: nowrap;
  padding: 0 2px;
  line-height: 1.2;
}

/* Custom Scrollbar - Professional & Highly Visible */

html {
  scrollbar-width: auto;
  scrollbar-color: var(--accent-orange) rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  border: 4px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb {
  background: var(--accent-orange);
  border-radius: 8px;
  border: 4px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-orange-hover);
  border: 4px solid transparent;
  background-clip: padding-box;
}

/* App Container Layout - Redesigned to Vertical Flow with Top Navigation Header */

.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--bg-primary);
  width: 100%;
}

/* Sticky Top Navigation Header */

.top-navbar {
  background: #0b1329;
  border-bottom: 2px solid #1e293b;
  color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  padding: 0 24px 0 10px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(10px);
}

.top-navbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
}

.top-navbar-brand-logo-container {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
  margin-right: 0px;
}

.top-navbar-brand-logo-container .math-svg-zoom-btn {
  display: none !important;
}

.top-navbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  box-shadow: 0 3px 0 #020617, inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: translateY(0);
  height: 44px;
  box-sizing: border-box;
}

.top-navbar-brand:hover {
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 4px 0 #020617, 0 0 15px rgba(56, 189, 248, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.top-navbar-brand:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 #020617, 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.top-navbar-brand-logo-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  cursor: pointer !important;
  transform: scale(1) rotate(0deg) !important;
  filter: none !important;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.top-navbar-brand:hover .top-navbar-brand-logo-svg {
  transform: scale(1.1) rotate(3deg) !important;
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.5)) !important;
}

.logo-infinity-spark {
  stroke-dasharray: 45 175;
  stroke-dashoffset: 0;
  animation: sparkFlow 3s linear infinite;
  transition: animation-duration 0.3s ease;
}

.logo-infinity-spark--1 {
  animation-delay: 0s;
}

.logo-infinity-spark--2 {
  animation-delay: -1.5s;
}

.top-navbar-brand:hover .logo-infinity-spark {
  animation-duration: 1.3s;
}

@keyframes sparkFlow {
  to {
    stroke-dashoffset: -220;
  }
}

.top-navbar-brand-logo-svg line {
  transform-origin: 50px 50px;
  animation: slashSway 3s ease-in-out infinite alternate;
}

@keyframes slashSway {
  0% { transform: rotate(-5deg); opacity: 0.7; }
  100% { transform: rotate(5deg); opacity: 1; }
}

.top-navbar-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.top-navbar-brand-title {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.brand-word {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  transition: all 0.3s ease;
}

.brand-word--something {
  background: linear-gradient(120deg, #ffffff 30%, #38bdf8 70%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textShine 6s linear infinite, wordFloat 3.5s ease-in-out infinite alternate;
  animation-delay: 0s, 0s;
}

.brand-word--by {
  background: linear-gradient(120deg, #38bdf8 30%, #818cf8 70%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textShine 6s linear infinite, wordFloat 3.5s ease-in-out infinite alternate;
  animation-delay: 0s, 0.25s;
}

.brand-word--zero {
  background: linear-gradient(120deg, #ea580c 20%, #f97316 50%, #f59e0b 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textShine 4s linear infinite, wordFloat 3.5s ease-in-out infinite alternate;
  animation-delay: 0s, 0.5s;
}

@keyframes wordFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-3px); }
}

.top-navbar-brand:hover .brand-word--something {
  animation-duration: 2s, 1.5s;
  text-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
}

.top-navbar-brand:hover .brand-word--by {
  animation-duration: 2s, 1.5s;
  text-shadow: 0 0 12px rgba(129, 140, 248, 0.4);
}

.top-navbar-brand:hover .brand-word--zero {
  animation-duration: 1.5s, 1.5s;
  text-shadow: 0 0 12px rgba(249, 115, 22, 0.5);
}

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

.top-navbar-brand-sub {
  font-size: 8px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  animation: letterPulse 4s ease-in-out infinite alternate;
  transition: all 0.3s ease;
}

.top-navbar-brand:hover .top-navbar-brand-sub {
  color: #ffffff;
  letter-spacing: 0.28em;
}

@keyframes letterPulse {
  0% { letter-spacing: 0.12em; color: #475569; }
  100% { letter-spacing: 0.22em; color: #94a3b8; }
}

.top-navbar-links {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 8px 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.top-navbar-links::-webkit-scrollbar {
  display: none;
}

.top-navbar-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  padding: 0 11px; /* reduced from 16px to save space */
  height: 44px;
  white-space: nowrap;
  box-sizing: border-box;
  font-family: var(--font-heading);
  font-size: 0.71rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 3px 0 #020617, inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.2s ease, border-color 0.2s ease;
  user-select: none;
  transform: translateY(0);
  animation: navbarLinkEntrance 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.top-navbar-link:nth-child(1) { animation-delay: 0.05s; }

.top-navbar-link:nth-child(2) { animation-delay: 0.10s; }

.top-navbar-link:nth-child(3) { animation-delay: 0.15s; }

.top-navbar-link:nth-child(4) { animation-delay: 0.20s; }

.top-navbar-link:nth-child(5) { animation-delay: 0.25s; }

.top-navbar-link:nth-child(6) { animation-delay: 0.30s; }

.top-navbar-link:nth-child(7) { animation-delay: 0.35s; }

.top-navbar-link:nth-child(8) { animation-delay: 0.40s; }

.top-navbar-link:nth-child(9) { animation-delay: 0.45s; }

.top-navbar-link:nth-child(10) { animation-delay: 0.50s; }

.top-navbar-link:nth-child(11) { animation-delay: 0.55s; }

.top-navbar-link:nth-child(12) { animation-delay: 0.60s; }

.top-navbar-link:nth-child(13) { animation-delay: 0.65s; }

.top-navbar-link:nth-child(14) { animation-delay: 0.70s; }

.top-navbar-link:nth-child(15) { animation-delay: 0.75s; }

.top-navbar-link:hover {
  color: #ffffff;
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 0 #020617, inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 8px 16px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

.top-navbar-link:active {
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 #020617, inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.top-navbar-link.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #ff7e33 0%, #e64a00 50%, #ff7e33 100%) !important;
  background-size: 200% 200% !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 3px 0 #9e3100, inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 14px rgba(230, 74, 0, 0.35) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  animation: navbarLinkEntrance 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) backwards, topNavActiveGradient 4s ease infinite;
}

.top-navbar-link.active:hover {
  background: linear-gradient(180deg, #ff9452 0%, #ff5500 100%) !important;
  box-shadow: 0 3px 0 #9e3100, inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 16px rgba(230, 74, 0, 0.3) !important;
  transform: translateY(-1px);
}

@keyframes navbarLinkEntrance {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes topNavActiveGradient {
  0% { background-position: 0% 50%; box-shadow: 0 3px 0 #9e3100, inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 14px rgba(230, 74, 0, 0.35); }
  50% { background-position: 100% 50%; box-shadow: 0 3px 0 #9e3100, inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 18px rgba(230, 74, 0, 0.5); }
  100% { background-position: 0% 50%; box-shadow: 0 3px 0 #9e3100, inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 14px rgba(230, 74, 0, 0.35); }
}

/* Responsive adjustments to completely avoid horizontal scroll on smaller desktop screens */

@media (max-width: 1366px) {
  .top-navbar {
    padding: 0 16px 0 8px;
  }
  .top-navbar-links {
    gap: 5px;
  }
  .top-navbar-link {
    padding: 0 8px;
    font-size: 0.66rem;
    gap: 3px;
  }
  .top-navbar-brand-sub {
    display: none !important;
  }
  .top-navbar-brand-text {
    justify-content: center;
  }
  .top-navbar-brand {
    padding: 0 8px;
    gap: 6px;
  }
  .brand-word {
    font-size: 0.95rem;
  }
}

@media (max-width: 1100px) {
  .top-navbar {
    padding: 0 8px 0 6px;
  }
  .top-navbar-links {
    gap: 3px;
  }
  .top-navbar-link {
    padding: 0 6px;
    font-size: 0.62rem;
    letter-spacing: 0.02em;
  }
  .brand-word {
    font-size: 0.85rem;
  }
  .top-navbar-brand-logo-container {
    width: 28px;
    height: 28px;
  }
}

.top-navbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.top-navbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.top-navbar-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.72);
  color: #e2e8f0;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.top-navbar-icon-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(251, 146, 60, 0.35);
  background: rgba(30, 41, 59, 0.9);
}

/* Sub-Header Stats Banner */

.stats-banner {
  background: #f8fafc;
  border-bottom: 1px solid var(--border-color);
  padding: 8px 24px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
  box-shadow: inset 0 -1px 2px rgba(0,0,0,0.01);
}

.stats-banner-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stats-banner-bullet {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  display: inline-block;
}

/* Main Content Wrapper */

.main-content {
  flex-grow: 1;
  padding: 24px;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

/* Forum Layouts */

.forum-boards-index {
  display: grid;
  grid-template-columns: 2.6fr 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 1024px) {
  .forum-boards-index {
    grid-template-columns: 1fr;
  }
}

/* GMAT Club Category Panel */

.forum-category-panel {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 24px;
}

.forum-category-header {
  background: var(--bg-navy);
  color: #ffffff;
  padding: 12px 18px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--accent-orange);
}

.forum-category-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Bulletin Board Table Rows */

.forum-board-row {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 1.6fr;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-color);
  align-items: center;
  transition: var(--transition-smooth);
}

.forum-board-row:last-child {
  border-bottom: none;
}

.forum-board-row:hover {
  background: rgba(242, 92, 5, 0.02);
}

/* 3D Chapters Panel & Cards (Tactile Strips) */

.forum-category-panel-3d {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.forum-category-panel-3d .forum-category-header {
  background: var(--bg-navy);
  color: #ffffff;
  padding: 14px 20px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.94rem;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  border-bottom: 3.5px solid var(--accent-orange);
  box-shadow: 0 4px 6px -1px rgba(15, 32, 66, 0.08);
}

.forum-category-panel-3d .forum-board-row {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 1.6fr;
  padding: 16px 20px;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-left: 5px solid var(--subject-color, var(--border-light)) !important;
  border-bottom: 4px solid rgba(15, 32, 66, 0.08);
  border-radius: 8px;
  align-items: center;
  transform: translateY(0);
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.15s,
              background-color 0.15s;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.01);
  user-select: none;
}

.forum-category-panel-3d .forum-board-row:hover {
  transform: translateY(-3px);
  border-color: var(--accent-orange);
  border-left-color: var(--subject-color) !important;
  border-bottom: 6px solid var(--accent-orange-hover);
  box-shadow: 0 8px 16px -2px rgba(15, 32, 66, 0.08), 0 4px 8px -2px rgba(15, 32, 66, 0.04);
  background: #fcfdfe;
}

.forum-category-panel-3d .forum-board-row:active {
  transform: translateY(1px);
  border-bottom: 2px solid var(--accent-orange-hover);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

@keyframes professionalLinkBlink {
  0%, 100% {
    color: var(--bg-navy);
    text-shadow: 0 0 0px rgba(37, 99, 235, 0);
  }
  50% {
    color: #2563eb; /* Sleek professional blue */
    text-shadow: 0 0 8px rgba(37, 99, 235, 0.3);
  }
}

.forum-board-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--bg-navy);
  cursor: pointer;
  transition: var(--transition-smooth);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: professionalLinkBlink 2.5s infinite ease-in-out;
}

.forum-board-title:hover {
  color: var(--accent-orange);
  text-decoration: underline;
  animation: none;
  text-shadow: 0 0 10px rgba(242, 92, 5, 0.4);
}

.forum-board-description {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 4px;
  font-weight: 500;
  line-height: 1.4;
}

.forum-board-stats {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
}

.forum-board-stats-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 500;
}

.forum-board-last-post {
  font-size: 0.74rem;
  color: var(--text-secondary);
  line-height: 1.4;
  border-left: 1px dashed var(--border-color);
  padding-left: 14px;
}

.forum-board-last-post-user {
  font-weight: 700;
  color: var(--accent-blue);
  cursor: pointer;
}

.forum-board-last-post-user:hover {
  text-decoration: underline;
}

.forum-board-last-post-time {
  font-size: 0.68rem;
  color: var(--text-muted);
  display: block;
}

/* Sidebar Widgets (vBulletin Style) */

.forum-sidebar-card {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
  padding: 16px;
  margin-bottom: 20px;
}

.forum-sidebar-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.82rem;
  text-transform: uppercase;
  color: var(--bg-navy);
  border-bottom: 2px solid var(--accent-orange);
  padding-bottom: 6px;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ========================================
   StudyHub Breadcrumbs and Chapter Headers (Premium Styling)
   ======================================= */

.studyhub-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%); /* 3D Strip background */
  border-top: 1px solid rgba(255, 255, 255, 0.12); /* 3D top bevel */
  border-bottom: 4px solid #020617; /* 3D bottom extrusion shadow */
  border-radius: 12px;
  padding: 14px 20px;
  margin-bottom: 24px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.studyhub-breadcrumbs-title-area {
  display: flex;
  align-items: center;
  gap: 12px;
}

.studyhub-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.08); /* Dark glass button */
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f1f5f9;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.studyhub-back-btn:hover {
  background-color: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateX(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.studyhub-breadcrumbs-subtitle {
  display: block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8; /* Professional contrasting slate */
  margin-bottom: 4px;
}

@keyframes professional3DButtonBlink {
  0%, 100% {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); /* Brand orange */
    border-bottom: 3px solid #b45309; /* 3D extrusion bottom */
    box-shadow: 0 3px 5px rgba(234, 88, 12, 0.15), 0 0 4px rgba(234, 88, 12, 0.1);
    transform: translateY(0);
  }
  50% {
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%); /* Highlight glow */
    border-bottom: 3px solid #d97706;
    box-shadow: 0 5px 12px rgba(249, 115, 22, 0.35), 0 0 10px rgba(249, 115, 22, 0.25);
    transform: translateY(-0.5px);
  }
}

.studyhub-breadcrumbs-title {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 850;
  letter-spacing: -0.01em;
  color: #ffffff; /* Contrast text */
  line-height: 1;
  padding: 6px 14px;
  border-radius: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  animation: professional3DButtonBlink 2s infinite ease-in-out;
  cursor: default;
  user-select: none;
}

.studyhub-jump-board {
  display: flex;
  align-items: center;
  gap: 8px;
}

.studyhub-jump-board-label {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8; /* Matching label color */
}

.studyhub-jump-board-select {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: #f8fafc;
  background-color: rgba(255, 255, 255, 0.08); /* Dark glass select */
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  transition: var(--transition-smooth);
  outline: none;
}

.studyhub-jump-board-select option {
  background-color: #0f172a; /* Slate background inside options */
  color: #f8fafc;
}

.studyhub-jump-board-select:hover {
  border-color: var(--accent-orange);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.studyhub-jump-board-select:focus {
  border-color: var(--accent-orange);
  box-shadow: 0 0 0 2px rgba(242, 92, 5, 0.35);
}

/* Chapter Header Card - Premium 3D Flash Card Styling */

.studyhub-chapter-header-card {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.85);
  border-left: 1px solid rgba(226, 232, 240, 0.85);
  border-right: 2px solid #e2e8f0; /* 3D side edge bevel */
  border-bottom: 4px solid #cbd5e1; /* 3D bottom extrusion edge */
  border-radius: 14px;
  padding: 26px 28px;
  margin-bottom: 24px;
  box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.08), 0 4px 8px -2px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.3s ease;
  cursor: default;
}

.studyhub-chapter-header-card:hover {
  transform: translateY(-5px);
  border-bottom: 6px solid #ea580c; /* Warm orange 3D highlight edge when active */
  border-right-color: #cbd5e1;
  box-shadow: 0 16px 28px -6px rgba(15, 23, 42, 0.12), 0 8px 16px -4px rgba(15, 23, 42, 0.08);
}

@keyframes professionalLeftBarPulse {
  0%, 100% {
    opacity: 0.85;
    background: linear-gradient(to bottom, var(--accent-orange), var(--accent-blue));
  }
  50% {
    opacity: 1;
    background: linear-gradient(to bottom, #2563eb, var(--accent-orange));
  }
}

.studyhub-chapter-header-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, var(--accent-orange), var(--accent-blue));
  animation: professionalLeftBarPulse 3s infinite ease-in-out;
}

@keyframes professionalBadgePulse {
  0%, 100% {
    background-color: rgba(242, 92, 5, 0.08);
    border-color: rgba(242, 92, 5, 0.15);
    box-shadow: 0 0 0px rgba(242, 92, 5, 0);
  }
  50% {
    background-color: rgba(242, 92, 5, 0.15);
    border-color: rgba(242, 92, 5, 0.35);
    box-shadow: 0 0 6px rgba(242, 92, 5, 0.15);
  }
}

.studyhub-active-board-badge {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-orange);
  background-color: rgba(242, 92, 5, 0.08);
  padding: 4px 10px;
  border-radius: 9999px;
  border: 1px solid rgba(242, 92, 5, 0.15);
  animation: professionalBadgePulse 2s infinite ease-in-out;
}

.studyhub-chapter-title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 850;
  letter-spacing: -0.02em;
  color: var(--bg-navy);
  margin-top: -4px;
}

.studyhub-chapter-desc {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 2px;
}

.studyhub-syllabus-section {
  border-top: 1px solid var(--border-light);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.studyhub-syllabus-title {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.studyhub-topics-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

@keyframes professionalPillPulse {
  0%, 100% {
    background-color: var(--border-light);
    border-color: var(--border-light);
    box-shadow: 0 0 0px rgba(59, 130, 246, 0);
  }
  50% {
    background-color: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.25);
    box-shadow: 0 0 6px rgba(59, 130, 246, 0.15);
    color: var(--accent-blue);
  }
}

.studyhub-topic-pill {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background-color: var(--border-light);
  border: 1px solid var(--border-light);
  padding: 6px 12px;
  border-radius: 8px;
  transition: var(--transition-smooth);
  cursor: default;
  animation: professionalPillPulse 2.5s infinite ease-in-out;
}

.studyhub-topic-pill:hover {
  background-color: rgba(2, 132, 199, 0.05);
  border-color: rgba(2, 132, 199, 0.2);
  color: var(--accent-blue);
  animation: none;
}

/* ========================================
   Chapter Flash Notes Panel
   ======================================== */

.flash-notes-panel {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(15, 32, 66, 0.08);
  overflow: hidden;
  margin-bottom: 20px;
}

.flash-notes-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  background: linear-gradient(100deg, var(--bg-navy) 0%, #1c325c 100%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.flash-notes-header-title {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #ffffff;
}

.flash-notes-badge {
  margin-left: auto;
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 2px 8px;
  border-radius: 9999px;
  letter-spacing: 0.03em;
}

.flash-notes-scroll {
  max-height: 680px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(15,32,66,0.6) transparent;
}

/* Individual flash note card */

.flash-note-card {
  padding: 14px 16px;
  border-left: 5px solid transparent;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  margin-bottom: 12px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: default;
  box-shadow: 0 2px 6px rgba(15, 32, 66, 0.04);
}

.flash-note-card:nth-child(even) {
  transform: rotate(0.4deg);
}

.flash-note-card:nth-child(odd) {
  transform: rotate(-0.4deg);
}

.flash-note-card:last-child {
  margin-bottom: 0;
}

.flash-note-card:hover {
  transform: translateY(-3px) rotate(0deg) scale(1.01);
  box-shadow: 0 6px 16px rgba(15, 32, 66, 0.1);
  filter: brightness(0.98);
}

/* Tag + Title header row */

.flash-note-top {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

/* Colored tag badge pill */

.flash-note-tag {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Card concept title */

.flash-note-title {
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--bg-navy);
  line-height: 1.35;
  flex: 1;
}

/* Explanation paragraph */

.flash-note-body {
  font-size: 0.7rem;
  color: var(--text-secondary);
  line-height: 1.65;
  font-weight: 500;
  margin: 0 0 8px 0;
}

/* Formula / expression code block */

.flash-note-formula {
  font-family: var(--font-sans);
  font-size: 0.67rem;
  font-weight: 700;
  color: inherit;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 5px;
  padding: 6px 10px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow-x: auto;
  word-break: normal;
}

/* Practice stopwatch timer HUD */

.timer-widget {
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
}

.timer-digits {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--accent-orange);
}

/* Multiple-choice option cards (A-E layout) */

.mcq-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 20px 0;
}

/* 3D Option Card Base */

.mcq-option-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: var(--bg-white);
  border: 1px solid var(--opt-border-color, var(--border-light));
  border-bottom: 4px solid var(--opt-3d-shadow, rgba(0, 0, 0, 0.08));
  border-radius: 10px;
  cursor: pointer;
  transform: translateY(0);
  transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.15s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.15s, background-color 0.15s, color 0.15s;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-dark);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
  user-select: none;
}

/* Dynamic Hover Effect (lifts up and shadow increases) */

.mcq-option-row:hover {
  transform: translateY(-2px);
  border-color: var(--opt-theme-color);
  border-bottom: 6px solid var(--opt-3d-shadow);
  box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.04), 0 4px 8px -2px rgba(0, 0, 0, 0.02);
}

/* Dynamic Active/Press Effect */

.mcq-option-row:active {
  transform: translateY(2px);
  border-bottom: 2px solid var(--opt-3d-shadow);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

/* Selected State (stays pressed down, rich color borders and background tint) */

.mcq-option-row.selected {
  transform: translateY(2px) !important;
  background: var(--opt-selected-bg) !important;
  border-color: var(--opt-theme-color) !important;
  border-bottom: 2px solid var(--opt-theme-dark) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02) !important;
  color: var(--opt-theme-dark) !important;
}

/* Individual Option Color Schemes (most professional) */

/* Option A - Elegant Indigo */

.mcq-option-row.opt-a {
  --opt-theme-color: #6366f1;
  --opt-theme-dark: #4338ca;
  --opt-selected-bg: #e0e7ff;
  --opt-3d-shadow: #c7d2fe;
  --opt-bullet-border: #818cf8;
  --opt-bullet-text: #4f46e5;
  --opt-bullet-bg: #eff6ff;
}

.mcq-option-row.opt-a:hover {
  background: #f5f7ff;
}

/* Option B - Vibrant Teal */

.mcq-option-row.opt-b {
  --opt-theme-color: #0d9488;
  --opt-theme-dark: #0f766e;
  --opt-selected-bg: #ccfbf1;
  --opt-3d-shadow: #99f6e4;
  --opt-bullet-border: #2dd4bf;
  --opt-bullet-text: #0d9488;
  --opt-bullet-bg: #f0fdfa;
}

.mcq-option-row.opt-b:hover {
  background: #f0fbf9;
}

/* Option C - Deep Amethyst/Purple */

.mcq-option-row.opt-c {
  --opt-theme-color: #8b5cf6;
  --opt-theme-dark: #6d28d9;
  --opt-selected-bg: #f3e8ff;
  --opt-3d-shadow: #e9d5ff;
  --opt-bullet-border: #a78bfa;
  --opt-bullet-text: #7c3aed;
  --opt-bullet-bg: #f5f3ff;
}

.mcq-option-row.opt-c:hover {
  background: #f9f7ff;
}

/* Option D - Warm Amber */

.mcq-option-row.opt-d {
  --opt-theme-color: #f59e0b;
  --opt-theme-dark: #b45309;
  --opt-selected-bg: #fef3c7;
  --opt-3d-shadow: #fde68a;
  --opt-bullet-border: #fbbf24;
  --opt-bullet-text: #d97706;
  --opt-bullet-bg: #fffbeb;
}

.mcq-option-row.opt-d:hover {
  background: #fffdf5;
}

/* Option E - Sophisticated Rose */

.mcq-option-row.opt-e {
  --opt-theme-color: #db2777;
  --opt-theme-dark: #be185d;
  --opt-selected-bg: #fce7f3;
  --opt-3d-shadow: #fbcfe8;
  --opt-bullet-border: #f472b6;
  --opt-bullet-text: #db2777;
  --opt-bullet-bg: #fdf2f8;
}

.mcq-option-row.opt-e:hover {
  background: #fff5f8;
}

/* 3D MCQ Bullet Styling */

.mcq-bullet {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--opt-bullet-border, var(--border-color));
  background: var(--opt-bullet-bg, var(--bg-white));
  color: var(--opt-bullet-text, var(--text-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 800;
  flex-shrink: 0;
  transition: all 0.15s ease-in-out;
  box-shadow: inset 0 -1.5px 0 rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.04);
}

.mcq-option-row:hover .mcq-bullet {
  border-color: var(--opt-theme-color);
  transform: scale(1.05);
}

/* Bullet when Selected */

.mcq-option-row.selected .mcq-bullet {
  border-color: var(--opt-theme-color) !important;
  background: var(--opt-theme-color) !important;
  color: #ffffff !important;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.15) !important;
}

/* Correct Option (Submitted state override) */

.mcq-option-row.correct {
  transform: translateY(2px) !important;
  background: #f0fdf4 !important;
  border-color: #10b981 !important;
  border-bottom: 2px solid #047857 !important;
  color: #065f46 !important;
  box-shadow: none !important;
}

.mcq-option-row.correct .mcq-bullet {
  border-color: #10b981 !important;
  background: #10b981 !important;
  color: #ffffff !important;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.15) !important;
}

/* Incorrect Option (Submitted state override) */

.mcq-option-row.incorrect {
  transform: translateY(2px) !important;
  background: #fef2f2 !important;
  border-color: #ef4444 !important;
  border-bottom: 2px solid #b91c1c !important;
  color: #991b1b !important;
  box-shadow: none !important;
}

.mcq-option-row.incorrect .mcq-bullet {
  border-color: #ef4444 !important;
  background: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.15) !important;
}

/* Show Solution bar */

.show-solution-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  padding: 14px 0 4px;
  border-top: 1px dashed var(--border-color);
}

.show-solution-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #1e40af 0%, #0f2042 100%);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 11px 28px;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: opacity 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
  box-shadow: 0 2px 8px rgba(15, 32, 66, 0.22);
}

.show-solution-btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(15, 32, 66, 0.28);
}

.show-solution-btn:active {
  transform: translateY(0);
  opacity: 1;
}

.show-solution-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 500;
  text-align: center;
}

/* ============================================================
   Expert Step Cards — 3D Colored Cards with Blinking Badges
   ============================================================ */

/* Step color palette (rotates through 7 vivid colors) */

.expert-derive-card[data-step="0"] { --step-color: #6366f1; --step-shadow: rgba(99,102,241,0.35); --step-bg: linear-gradient(135deg, #eef2ff 0%, #f0f4ff 100%); --step-border: #818cf8; }

.expert-derive-card[data-step="1"] { --step-color: #0ea5e9; --step-shadow: rgba(14,165,233,0.35); --step-bg: linear-gradient(135deg, #e0f7ff 0%, #f0fbff 100%); --step-border: #38bdf8; }

.expert-derive-card[data-step="2"] { --step-color: #10b981; --step-shadow: rgba(16,185,129,0.35); --step-bg: linear-gradient(135deg, #d1fae5 0%, #ecfdf5 100%); --step-border: #34d399; }

.expert-derive-card[data-step="3"] { --step-color: #f59e0b; --step-shadow: rgba(245,158,11,0.35); --step-bg: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%); --step-border: #fbbf24; }

.expert-derive-card[data-step="4"] { --step-color: #ef4444; --step-shadow: rgba(239,68,68,0.35); --step-bg: linear-gradient(135deg, #fee2e2 0%, #fff5f5 100%); --step-border: #f87171; }

.expert-derive-card[data-step="5"] { --step-color: #8b5cf6; --step-shadow: rgba(139,92,246,0.35); --step-bg: linear-gradient(135deg, #ede9fe 0%, #f5f3ff 100%); --step-border: #a78bfa; }

.expert-derive-card[data-step="6"] { --step-color: #ec4899; --step-shadow: rgba(236,72,153,0.35); --step-bg: linear-gradient(135deg, #fce7f3 0%, #fdf4f8 100%); --step-border: #f472b6; }

/* 3D Card base */

.expert-derive-card {
  background: var(--step-bg, linear-gradient(135deg, #f8fafc 0%, #ffffff 100%));
  border: 1.5px solid var(--step-border, var(--border-color));
  border-radius: 14px;
  padding: 18px 18px 16px;
  margin-bottom: 16px;
  position: relative;
  /* 3D layered shadow effect */
  box-shadow:
    0 1px 0px var(--step-border, #e2e8f0),
    0 4px 0px var(--step-shadow, rgba(0,0,0,0.1)),
    0 8px 24px var(--step-shadow, rgba(0,0,0,0.07)),
    0 1px 3px rgba(0,0,0,0.08);
  transform: translateY(0px);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  overflow: hidden;
}

.expert-derive-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--step-color, #6366f1), transparent);
  border-radius: 14px 14px 0 0;
}

.expert-derive-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0px var(--step-border, #e2e8f0),
    0 7px 0px var(--step-shadow, rgba(0,0,0,0.12)),
    0 16px 32px var(--step-shadow, rgba(0,0,0,0.1)),
    0 2px 6px rgba(0,0,0,0.08);
}

/* ---- Blinking Step Badge Button ---- */

@keyframes step-badge-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--step-shadow, rgba(99,102,241,0.5)), 0 2px 6px var(--step-shadow, rgba(99,102,241,0.3));
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 6px rgba(0,0,0,0), 0 2px 12px var(--step-shadow, rgba(99,102,241,0.5));
    opacity: 0.85;
  }
}

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

.step-badge-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
  padding: 4px 14px 4px 10px;
  border-radius: 20px;
  border: 1.5px solid var(--step-color, #6366f1);
  background: linear-gradient(270deg,
    var(--step-color, #6366f1) 0%,
    color-mix(in srgb, var(--step-color, #6366f1) 80%, white) 40%,
    var(--step-color, #6366f1) 100%
  );
  background-size: 200% auto;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  font-family: var(--font-cursive);
  letter-spacing: 0.02em;
  line-height: 1.1;
  cursor: default;
  pointer-events: none;
  /* 3D press */
  box-shadow:
    0 3px 0px color-mix(in srgb, var(--step-color, #6366f1) 60%, black),
    0 5px 12px var(--step-shadow, rgba(99,102,241,0.35));
  animation: step-badge-pulse 1.6s ease-in-out infinite, step-badge-shimmer 3s linear infinite;
}

.step-badge-btn .step-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  display: inline-block;
  flex-shrink: 0;
  animation: step-badge-pulse 1.6s ease-in-out infinite;
}

.expert-derive-formula,
.math-formula-block {
  background: #f1f5f9;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 8px 12px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--bg-navy);
  margin: 10px 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  word-break: normal;
  -webkit-overflow-scrolling: touch;
}

.expert-derive-formula:has(.ncert-comparison-table-wrap),
.math-formula-block:has(.ncert-comparison-table-wrap) {
  white-space: normal;
  padding: 0;
  background: transparent;
  border: none;
  overflow-x: auto;
}

/* NCERT-style comparison tables in solution steps */

.ncert-comparison-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 4px 0;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  -webkit-overflow-scrolling: touch;
}

.ncert-comparison-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.78rem;
  line-height: 1.45;
  text-align: left;
}

.ncert-comparison-table thead th {
  padding: 10px 12px;
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 2px solid #94a3b8;
}

.ncert-comparison-table__point-col {
  background: #1e293b;
  color: #f8fafc;
  width: 18%;
}

.ncert-comparison-table__auto-col {
  background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
  color: #fff;
  width: 41%;
}

.ncert-comparison-table__hetero-col {
  background: linear-gradient(135deg, #c2410c 0%, #ea580c 100%);
  color: #fff;
  width: 41%;
}

.ncert-comparison-table tbody tr {
  border-bottom: 1px solid #e2e8f0;
}

.ncert-comparison-table tbody tr:last-child {
  border-bottom: none;
}

.ncert-comparison-table__row-even {
  background: #fff;
}

.ncert-comparison-table__row-odd {
  background: #f8fafc;
}

.ncert-comparison-table__point {
  padding: 10px 12px;
  font-weight: 700;
  color: #0f172a;
  background: #f1f5f9;
  border-right: 1px solid #e2e8f0;
  vertical-align: top;
  white-space: nowrap;
}

.ncert-comparison-table__auto,
.ncert-comparison-table__hetero {
  padding: 10px 12px;
  font-weight: 500;
  color: #334155;
  vertical-align: top;
}

.ncert-comparison-table__auto {
  border-right: 1px solid #e2e8f0;
  background: rgba(22, 163, 74, 0.04);
}

.ncert-comparison-table__hetero {
  background: rgba(234, 88, 12, 0.04);
}

@media (max-width: 640px) {
  .ncert-comparison-table {
    min-width: 480px;
    font-size: 0.72rem;
  }

  .ncert-comparison-table thead th,
  .ncert-comparison-table__point,
  .ncert-comparison-table__auto,
  .ncert-comparison-table__hetero {
    padding: 8px 10px;
  }
}

/* Discussion Replies Trees (VBulletin post lists) */

.forum-discussion-thread {
  margin-top: 24px;
  border-top: 2px solid var(--border-color);
  padding-top: 20px;
}

.forum-discussion-post {
  display: flex;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  margin-bottom: 16px;
  background: var(--bg-white);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.forum-discussion-post-author {
  width: 150px;
  background: #f8fafc;
  border-right: 1px solid var(--border-color);
  padding: 14px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.forum-discussion-post-author-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bg-navy-light);
  color: #ffffff;
  font-weight: 800;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  box-shadow: var(--shadow-sm);
}

.forum-discussion-post-author-name {
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--bg-navy);
}

.forum-discussion-post-author-badge {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--accent-orange);
  background: rgba(242, 92, 5, 0.1);
  padding: 2px 6px;
  border-radius: 99px;
  margin-top: 4px;
  text-transform: uppercase;
}

.forum-discussion-post-author-kudos {
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 6px;
}

.forum-discussion-post-body {
  padding: 16px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.forum-discussion-post-content {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.forum-discussion-post-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid var(--border-light);
  padding-top: 10px;
  margin-top: 12px;
}

/* Core buttons */

.btn-primary {
  background: var(--accent-orange);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-smooth);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.btn-primary:hover {
  background: var(--accent-orange-hover);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  border-radius: 4px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 0.78rem;
  cursor: pointer;
  transition: var(--transition-smooth);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-secondary:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.btn-navy {
  background: var(--bg-navy);
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 0.78rem;
  cursor: pointer;
  transition: var(--transition-smooth);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.btn-navy:hover {
  background: var(--bg-navy-light);
}

/* inputs */

.form-input {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  color: var(--text-dark);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 0.82rem;
  outline: none;
  transition: var(--transition-smooth);
}

.form-input:focus {
  border-color: var(--accent-orange);
  box-shadow: 0 0 0 2px rgba(242, 92, 5, 0.15);
}

.text-gradient {
  color: var(--bg-navy);
  background: none;
  -webkit-text-fill-color: initial;
}

.glass-panel {
  background: var(--bg-white);
  border: 1px solid var(--border-color) !important;
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
}

.glass-panel-hover {
  transition: var(--transition-smooth);
}

.glass-panel-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: #cbd5e1 !important;
}

.glowing-blob {
  display: none !important;
}

/* Source Code Board Explorer Styles */

.source-code-container {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  min-height: 550px;
}

@media (max-width: 768px) {
  .source-code-container {
    grid-template-columns: 1fr;
  }
}

.file-tree-panel {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.file-tree-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.file-tree-item:hover {
  background: #f1f5f9;
  color: var(--bg-navy);
}

.file-tree-item.active {
  background: #e2e8f0;
  color: var(--bg-navy);
  border-left: 3px solid var(--accent-orange);
  padding-left: 9px;
}

.code-viewer-panel {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 8px;
  border: 1px solid #1e293b;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.code-viewer-header {
  background: #1e293b;
  border-bottom: 1px solid #334155;
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.code-viewer-title {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: bold;
  color: #38bdf8;
}

.code-viewer-meta {
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 500;
}

.code-viewer-content {
  padding: 20px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.6;
  overflow-y: auto;
  max-height: 500px;
  white-space: pre-wrap;
  background: #090d16;
}

/* Textbook Catalog Virtual Bookshelf Styles */

.bookshelf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.book-card-3d {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.book-card-3d:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(15, 32, 66, 0.1);
  border-color: var(--accent-orange);
}

.book-cover-strip {
  height: 12px;
  width: 100%;
}

.book-info-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
}

/* Solutions Subboard Chapters Listing */

.solutions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Symmetrical 3x4 Class-Wise grid */

.class-wise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 16px;
}

@media (max-width: 1024px) {
  .class-wise-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .class-wise-grid {
    grid-template-columns: 1fr;
  }
}

/* Symmetrical 3D Tactile Class Card */

.class-card {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.class-card:hover {
  transform: translateY(-4px);
  border-color: #cbd5e1;
  box-shadow: 0 8px 24px rgba(15, 32, 66, 0.12);
}

.class-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.class-card-level-badge {
  font-size: 13.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.class-card-portal-tag {
  font-size: 15px;
  font-weight: 700;
  color: #64748b;
}

.class-card-title {
  font-size: 1.72rem;
  font-weight: 900;
  color: #0f2042;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: 4px;
}

.class-card-sub {
  font-size: 13.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.05em;
}

.class-card-subjects-section {
  border-top: 1px solid #f1f5f9;
  padding-top: 12px;
  margin-top: 12px;
}

.class-card-subjects-title {
  font-size: 13.5px;
  text-transform: uppercase;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  display: block;
}

.class-card-pills-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.class-card-pill {
  font-size: 13.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.class-card-footer {
  border-top: 1px solid #f1f5f9;
  padding-top: 16px;
  margin-top: 16px;
}

.class-card-button {
  width: 100%;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
  text-decoration: none;
}

.class-card-button:hover {
  filter: brightness(1.05);
}

.class-card-button:active {
  transform: scale(0.96);
}

/* Symmetrical Grid for Subjects inside Class Cards */

.class-card-subjects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (max-width: 480px) {
  .class-card-subjects-grid {
    grid-template-columns: 1fr;
  }
}

/* Subject Mini Grid Block */

.subject-grid-item {
  background: rgba(15, 32, 66, 0.02);
  border: 1px solid rgba(15, 32, 66, 0.05);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  transition: all 0.2s ease;
}

.subject-grid-item:hover {
  background: rgba(15, 32, 66, 0.04);
  border-color: rgba(15, 32, 66, 0.1);
}

.subject-grid-label {
  font-size: 11px;
  font-weight: 800;
  color: #0f2042;
  line-height: 1.2;
}

.subject-grid-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* 3D Tactile Subject Toggle Banner */

.toggle-banner {
  background: #0f172a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 24px;
  display: flex;
  justify-content: center;
  gap: 16px;
  align-items: center;
  box-shadow: inset 0 -1px 2px rgba(0,0,0,0.01);
}

.toggle-banner-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 24px;
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 3px 0 #020617, inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  min-width: 140px;
}

.toggle-banner-btn:hover {
  color: #ffffff;
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
  border-color: rgba(255, 255, 255, 0.15);
}

.toggle-banner-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #020617, inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toggle-banner-btn.active-maths {
  color: #ffffff;
  background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 3px 0 #312e81, inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 12px rgba(99, 102, 241, 0.25) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
  animation: toggleBannerPulseMaths 2.5s infinite alternate;
}

@keyframes toggleBannerPulseMaths {
  0% { transform: scale(1); box-shadow: 0 3px 0 #312e81, inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 12px rgba(99, 102, 241, 0.25); }
  100% { transform: scale(1.02); box-shadow: 0 3px 0 #312e81, inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 12px 24px rgba(99, 102, 241, 0.5); }
}

.toggle-banner-btn.active-maths:hover {
  background: linear-gradient(180deg, #818cf8 0%, #4f46e5 100%) !important;
}

.toggle-banner-btn.active-science {
  color: #ffffff;
  background: linear-gradient(180deg, #0d9488 0%, #0f766e 100%) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 3px 0 #115e59, inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 12px rgba(13, 148, 136, 0.25) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
  animation: toggleBannerPulseScience 2.5s infinite alternate;
}

@keyframes toggleBannerPulseScience {
  0% { transform: scale(1); box-shadow: 0 3px 0 #115e59, inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 12px rgba(13, 148, 136, 0.25); }
  100% { transform: scale(1.02); box-shadow: 0 3px 0 #115e59, inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 12px 24px rgba(13, 148, 136, 0.5); }
}

.toggle-banner-btn.active-science:hover {
  background: linear-gradient(180deg, #14b8a6 0%, #0f766e 100%) !important;
}

/* Interactive Maths Solver Premium CSS Dashboard */

.studyhub-board-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 4px;
}

.studyhub-board-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 9px 10px;
  text-align: left;
  font-family: var(--font-heading);
  color: var(--text-secondary);
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    0 4px 0 #cbd5e1,
    inset 0 2px 0 rgba(255, 255, 255, 0.9),
    inset 0 -2px 0 rgba(0, 0, 0, 0.05),
    0 6px 12px rgba(15, 32, 66, 0.08);
  transition:
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease;
  animation: studyhubBoardTabIn 0.45s ease both, studyhubInactiveFloat 4s ease-in-out infinite;
}

.studyhub-board-tab:nth-child(2) {
  animation-delay: 0.08s;
}

.studyhub-board-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 60%
  );
  transform: translateX(-120%);
  transition: transform 0.55s ease;
  pointer-events: none;
}

.studyhub-board-tab:hover {
  transform: translateY(-2px) scale(1.01);
  border-color: #cbd5e1;
  color: var(--bg-navy);
  box-shadow:
    0 6px 0 #94a3b8,
    inset 0 2px 0 rgba(255, 255, 255, 1),
    inset 0 -2px 0 rgba(0, 0, 0, 0.05),
    0 10px 20px rgba(15, 32, 66, 0.12);
}

.studyhub-board-tab:hover::before {
  transform: translateX(120%);
}

.studyhub-board-tab:active {
  transform: translateY(4px) scale(0.99);
  box-shadow:
    0 0px 0 #cbd5e1,
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.02),
    0 2px 4px rgba(15, 32, 66, 0.05);
}

.studyhub-board-tab__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
  color: var(--bg-navy);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s ease, color 0.25s ease;
}

.studyhub-board-tab:hover .studyhub-board-tab__icon {
  transform: scale(1.08) rotate(-4deg);
}

.studyhub-board-tab__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.studyhub-board-tab__label {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: inherit;
}

.studyhub-board-tab__hint {
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-muted);
  transition: color 0.22s ease;
}

.studyhub-board-tab--chapters.is-active {
  color: #ffffff;
  background: linear-gradient(145deg, #1c325c 0%, #0f2042 100%);
  border-color: #1c325c;
  box-shadow:
    0 5px 0 #061122,
    inset 0 2px 0 rgba(255, 255, 255, 0.15),
    inset 0 -3px 0 rgba(0, 0, 0, 0.3),
    0 8px 16px rgba(15, 32, 66, 0.4);
  animation: studyhubBoardTabIn 0.45s ease both, studyhubBoardTabGlowNavy 3s ease-in-out infinite;
}

.studyhub-board-tab--chapters.is-active .studyhub-board-tab__icon {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.08) 100%);
  color: #ffffff;
  animation: studyhubBoardTabIconPulse 2s ease-in-out infinite;
}

.studyhub-board-tab--chapters.is-active .studyhub-board-tab__hint {
  color: rgba(255, 255, 255, 0.72);
}

.studyhub-board-tab--solver.is-active {
  color: #ffffff;
  background: linear-gradient(145deg, #f97316 0%, #f25c05 100%);
  border-color: #ea580c;
  box-shadow:
    0 5px 0 #9a3412,
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    inset 0 -3px 0 rgba(0, 0, 0, 0.2),
    0 8px 16px rgba(242, 92, 5, 0.4);
  animation: studyhubBoardTabIn 0.45s ease both, studyhubBoardTabGlowOrange 3s ease-in-out infinite;
}

.studyhub-board-tab--solver.is-active .studyhub-board-tab__icon {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.1) 100%);
  color: #ffffff;
  animation: studyhubBoardTabIconPulse 2s ease-in-out infinite 0.15s;
}

.studyhub-board-tab--solver.is-active .studyhub-board-tab__hint {
  color: rgba(255, 255, 255, 0.85);
}

.studyhub-board-tab.is-active:hover {
  transform: translateY(-2px) scale(1.02);
}

@keyframes studyhubBoardTabIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes studyhubInactiveFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-2px) scale(1.01);
    box-shadow:
      0 5px 0 #cbd5e1,
      inset 0 2px 0 rgba(255, 255, 255, 0.9),
      inset 0 -2px 0 rgba(0, 0, 0, 0.05),
      0 8px 16px rgba(15, 32, 66, 0.1);
  }
}

@keyframes studyhubBoardTabGlowNavy {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow:
      0 5px 0 #061122,
      inset 0 2px 0 rgba(255, 255, 255, 0.15),
      inset 0 -3px 0 rgba(0, 0, 0, 0.3),
      0 8px 16px rgba(15, 32, 66, 0.4);
  }
  50% {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
      0 7px 0 #061122,
      inset 0 2px 0 rgba(255, 255, 255, 0.2),
      inset 0 -3px 0 rgba(0, 0, 0, 0.3),
      0 12px 24px rgba(28, 50, 92, 0.55);
  }
}

@keyframes studyhubBoardTabGlowOrange {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow:
      0 5px 0 #9a3412,
      inset 0 2px 0 rgba(255, 255, 255, 0.3),
      inset 0 -3px 0 rgba(0, 0, 0, 0.2),
      0 8px 16px rgba(242, 92, 5, 0.4);
  }
  50% {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
      0 7px 0 #9a3412,
      inset 0 2px 0 rgba(255, 255, 255, 0.4),
      inset 0 -3px 0 rgba(0, 0, 0, 0.2),
      0 12px 24px rgba(242, 92, 5, 0.6);
  }
}

@keyframes studyhubBoardTabIconPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

@media (max-width: 640px) {
  .studyhub-board-tabs {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .studyhub-board-tab {
    min-height: 38px;
    padding: 7px 8px;
    gap: 6px;
  }

  .studyhub-board-tab__icon {
    width: 22px;
    height: 22px;
  }

  .studyhub-board-tab__label {
    font-size: 0.74rem;
  }

  .studyhub-board-tab__hint {
    font-size: 0.58rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .studyhub-board-tab,
  .studyhub-board-tab__icon,
  .studyhub-board-tab--chapters.is-active,
  .studyhub-board-tab--solver.is-active {
    animation: none;
    transition: none;
  }

  .studyhub-board-tab:hover {
    transform: none;
  }
}

.solver-container {
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.solver-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 16px;
  margin-bottom: 20px;
}

.solver-input-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
}

.solver-input {
  width: 100%;
  background: #020617;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 16px 48px 16px 20px;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #f1f5f9;
  transition: all 0.15s ease-in-out;
}

.solver-input:focus {
  outline: none;
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.25);
}

.solver-clear-btn {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #64748b;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  transition: color 0.1s;
}

.solver-clear-btn:hover {
  color: #cbd5e1;
}

.solver-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .solver-layout {
    grid-template-columns: 8fr 4fr;
  }
}

.solver-builder-panel {
  background: #020617;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 16px;
}

/* Category select sections inside builder */

.solver-section-title {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #64748b;
  font-weight: 800;
  margin-bottom: 10px;
  display: block;
}

.solver-builder-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 992px) {
  .solver-builder-grid {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.solver-keyboard-column {
  display: flex;
  flex-direction: column;
}

.solver-toolbox-column {
  display: flex;
  flex-direction: column;
  border-left: none;
  padding-left: 0;
}

@media (min-width: 992px) {
  .solver-toolbox-column {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    padding-left: 20px;
  }
  .light-theme .solver-toolbox-column {
    border-left-color: #cbd5e1;
  }
}

.solver-toolbox-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 8px;
  margin-bottom: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}

.solver-toolbox-tabs::-webkit-scrollbar {
  display: none;
}

.solver-toolbox-tab-btn {
  padding: 6px 10px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  color: #94a3b8;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease-in-out;
}

.solver-toolbox-tab-btn:hover {
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.03);
}

.solver-toolbox-tab-btn.active {
  color: #c084fc;
  background: rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.2);
}

.solver-toolbox-content {
  flex-grow: 1;
}

.solver-keyboard-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 16px;
}

.solver-key-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 850;
  color: #f1f5f9;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 3px 0 #020617, inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: all 0.05s ease;
  user-select: none;
}

.solver-key-btn:hover {
  color: #ffffff;
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
  border-color: rgba(255, 255, 255, 0.12);
}

.solver-key-btn:active {
  transform: translateY(3px);
  box-shadow: 0 0px 0 #020617, inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.solver-key-btn.key-solve {
  color: #ffffff;
  background: linear-gradient(180deg, #c084fc 0%, #7e22ce 100%) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 3px 0 #581c87, inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  font-size: 1.25rem;
}

.solver-key-btn.key-solve:hover {
  background: linear-gradient(180deg, #d8b4fe 0%, #7e22ce 100%) !important;
}

.solver-key-btn.key-solve:active {
  box-shadow: 0 0px 0 #581c87 !important;
  transform: translateY(3px);
}

.solver-key-btn.key-op {
  color: #c084fc;
  background: linear-gradient(180deg, #131a30 0%, #080d1a 100%);
  border-color: rgba(168, 85, 247, 0.15);
  font-size: 1.2rem;
}

/* Category layouts for characters / functions lists */

.solver-char-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  margin-bottom: 16px;
}

.solver-fn-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 16px;
}

.solver-char-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 6px;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: #cbd5e1;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.1s;
}

.solver-char-btn:hover {
  color: #ffffff;
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.1);
}

.solver-examples-list {
  background: rgba(2, 6, 23, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 16px;
  max-height: 440px;
  overflow-y: auto;
}

.solver-example-card {
  padding: 10px 14px;
  background: rgba(30, 41, 59, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  transition: all 0.15s ease-in-out;
}

.solver-example-card:hover {
  background: rgba(30, 41, 59, 0.5);
  border-color: rgba(255, 255, 255, 0.08);
}

.solver-example-label {
  font-size: 8px;
  text-transform: uppercase;
  color: #c084fc;
  font-weight: 800;
  margin-bottom: 2px;
  display: block;
}

.solver-example-val {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #e2e8f0;
}

/* Solutions steps styling */

.solver-steps-container {
  background: #020617;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 20px;
  margin-top: 24px;
}

.solver-step-item {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.solver-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #94a3b8;
  flex-shrink: 0;
  margin-top: 2px;
}

.solver-step-body {
  flex-grow: 1;
}

.solver-step-title {
  font-size: 12px;
  font-weight: 850;
  color: #e2e8f0;
  margin-bottom: 4px;
}

.solver-step-expl {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.5;
  font-weight: 600;
  margin-bottom: 8px;
}

.solver-step-expr {
  display: block;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #c084fc;
  font-weight: 700;
  overflow-x: auto;
}

.solver-result-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 16px;
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.solver-result-badge {
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.2);
  border-radius: 8px;
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 900;
  color: #c084fc;
}

.solver-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  background: rgba(2, 6, 23, 0.2);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

/* Light theme overrides for solver */

.light-theme .solver-container {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.light-theme .solver-header h3 {
  color: #0f172a;
}

.light-theme .solver-header p {
  color: #475569;
}

.light-theme .solver-input {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

.light-theme .solver-input:focus {
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
}

.light-theme .solver-builder-panel {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.light-theme .solver-key-btn {
  color: #334155;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  border-color: #cbd5e1;
  box-shadow: 0 3px 0 #cbd5e1, inset 0 1px 0 #ffffff;
}

.light-theme .solver-key-btn:hover {
  color: #0f172a;
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
}

.light-theme .solver-key-btn:active {
  transform: translateY(3px);
  box-shadow: 0 0px 0 #cbd5e1, inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.light-theme .solver-key-btn.key-solve {
  color: #ffffff;
  background: linear-gradient(180deg, #c084fc 0%, #7e22ce 100%) !important;
  border-color: rgba(168, 85, 247, 0.2) !important;
  box-shadow: 0 3px 0 #581c87, inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.light-theme .solver-key-btn.key-solve:hover {
  background: linear-gradient(180deg, #d8b4fe 0%, #7e22ce 100%) !important;
}

.light-theme .solver-key-btn.key-solve:active {
  box-shadow: 0 0px 0 #581c87 !important;
  transform: translateY(3px);
}

.light-theme .solver-key-btn.key-op {
  color: #7e22ce;
  background: linear-gradient(180deg, #fcfaff 0%, #f3e8ff 100%);
  border-color: rgba(168, 85, 247, 0.2);
}

.light-theme .solver-toolbox-tabs {
  border-bottom-color: #cbd5e1;
}

.light-theme .solver-toolbox-tab-btn {
  color: #475569;
}

.light-theme .solver-toolbox-tab-btn:hover {
  color: #0f172a;
  background: rgba(0, 0, 0, 0.04);
}

.light-theme .solver-toolbox-tab-btn.active {
  color: #7e22ce;
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.2);
}

.light-theme .solver-char-btn {
  color: #334155;
  background: #ffffff;
  border-color: #cbd5e1;
}

.light-theme .solver-char-btn:hover {
  color: #0f172a;
  background: #f1f5f9;
  border-color: #94a3b8;
}

.light-theme .solver-examples-list {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.light-theme .solver-example-card {
  background: #ffffff;
  border-color: #e2e8f0;
}

.light-theme .solver-example-card:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.light-theme .solver-example-val {
  color: #334155;
}

.light-theme .solver-steps-container {
  background: #ffffff;
  border-color: #cbd5e1;
}

.light-theme .solver-step-num {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

.light-theme .solver-step-title {
  color: #0f172a;
}

.light-theme .solver-step-expl {
  color: #475569;
}

.light-theme .solver-step-expr {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #7e22ce;
}

.light-theme .solver-result-footer {
  border-top-color: #e2e8f0;
}

.light-theme .solver-result-badge {
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.2);
  color: #7e22ce;
}

.light-theme .solver-placeholder {
  background: #f8fafc;
  border-color: #cbd5e1;
}

/* Advanced visual mathematical elements */

.math-eq-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 700;
  color: #f1f5f9;
  padding: 28px;
  background: rgba(2, 6, 23, 0.4);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  margin-bottom: 20px;
  min-height: 100px;
}

.light-theme .math-eq-container {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
}

.math-system-brace {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 600px;
  margin: 12px auto;
  padding: 16px;
  background: rgba(2, 6, 23, 0.2);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.02);
}

.light-theme .math-system-brace {
  background: rgba(241, 245, 249, 0.5);
  border-color: #cbd5e1;
}

.math-system-brace-left {
  font-size: 5.5rem;
  font-weight: 200;
  color: #c084fc;
  line-height: 1;
  user-select: none;
  font-family: system-ui, -apple-system, sans-serif;
  margin-top: -8px;
}

.math-system-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-grow: 1;
}

.math-system-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 700;
  color: #f1f5f9;
}

.light-theme .math-system-row {
  color: #0f172a;
}

.math-fraction {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  padding: 0 6px;
}

.math-fraction-num {
  padding-bottom: 3px;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 4px;
}

.math-fraction-line {
  width: 100%;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.2);
  margin: 2px 0;
}

.light-theme .math-fraction-line {
  background-color: rgba(15, 23, 42, 0.2);
}

.math-fraction-den {
  padding-top: 3px;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 4px;
}

.math-eq-container .math-radical {
  display: inline-flex;
  align-items: stretch;
}

.math-eq-container .math-radical-symbol {
  font-size: 2.5rem;
  font-weight: 300;
  color: #c084fc;
  margin-right: -4px;
  margin-top: -6px;
}

.math-eq-container .math-radical-overline {
  border-top: 2px solid #c084fc;
  padding-top: 4px;
  margin-top: 4px;
}

.math-eq-container .math-radical-content {
  padding-left: 6px;
  display: inline-block;
}

/* Category selector header & specific templates selection card grids */

.solver-category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 12px;
  margin-bottom: 20px;
}

.light-theme .solver-category-tabs {
  border-bottom-color: #cbd5e1;
}

.solver-category-tab-btn {
  padding: 10px 16px;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 800;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  display: flex;
  align-items: center;
  gap: 6px;
}

.solver-category-tab-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.solver-category-tab-btn.active {
  color: #ffffff;
  background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.25);
}

.light-theme .solver-category-tab-btn {
  color: #475569;
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.light-theme .solver-category-tab-btn:hover {
  color: #0f172a;
  background: #e2e8f0;
}

.light-theme .solver-category-tab-btn.active {
  color: #ffffff;
  background: linear-gradient(135deg, #a855f7 0%, #7e22ce 100%);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.15);
}

.solver-mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.solver-mode-card-btn {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: #020617;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease-in-out;
}

.solver-mode-card-btn:hover {
  background: rgba(30, 41, 59, 0.3);
  border-color: rgba(168, 85, 247, 0.3);
  transform: translateY(-1px);
}

.solver-mode-card-btn.active {
  background: rgba(168, 85, 247, 0.08);
  border-color: #a855f7;
  box-shadow: 0 0 0 1px #a855f7, 0 4px 12px rgba(168, 85, 247, 0.1);
}

.light-theme .solver-mode-card-btn {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.light-theme .solver-mode-card-btn:hover {
  background: #f1f5f9;
  border-color: #7e22ce;
}

.light-theme .solver-mode-card-btn.active {
  background: rgba(168, 85, 247, 0.05);
  border-color: #7e22ce;
  box-shadow: 0 0 0 1px #7e22ce, 0 4px 12px rgba(168, 85, 247, 0.05);
}

.solver-mode-card-icon {
  font-size: 1.4rem;
  line-height: 1;
}

.solver-mode-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.solver-mode-card-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: #f1f5f9;
}

.light-theme .solver-mode-card-title {
  color: #0f172a;
}

.solver-mode-card-desc {
  font-size: 0.68rem;
  color: #64748b;
  line-height: 1.3;
}

.light-theme .solver-mode-card-desc {
  color: #475569;
}

/* Elegant borderless bottom-bordered input values inside templates */

.solver-template-card {
  margin-bottom: 24px;
  background: rgba(15, 23, 42, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 20px;
}

.light-theme .solver-template-card {
  background: rgba(241, 245, 249, 0.5);
  border-color: #cbd5e1;
}

.solver-template-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.solver-template-input {
  width: 80px;
  background: rgba(168, 85, 247, 0.05) !important;
  border: none !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 4px 4px 0 0 !important;
  padding: 4px 8px !important;
  font-family: var(--font-mono) !important;
  font-size: 1.6rem !important;
  font-weight: 850 !important;
  color: #c084fc !important;
  text-align: center !important;
  outline: none !important;
  transition: all 0.15s ease-in-out !important;
}

.solver-template-input:focus,
.solver-template-input.focused {
  border-bottom-color: #a855f7 !important;
  background: rgba(168, 85, 247, 0.15) !important;
  box-shadow: inset 0 -4px 0 rgba(168, 85, 247, 0.1) !important;
}

.solver-template-var-input {
  width: 50px !important;
  color: #14b8a6 !important;
}

.solver-template-input::placeholder {
  color: rgba(255, 255, 255, 0.15) !important;
}

.light-theme .solver-template-input {
  background: rgba(168, 85, 247, 0.03) !important;
  border-bottom-color: rgba(15, 23, 42, 0.2) !important;
}

.light-theme .solver-template-input:focus,
.light-theme .solver-template-input.focused {
  border-bottom-color: #7e22ce !important;
  background: rgba(168, 85, 247, 0.08) !important;
}

/* Custom Standalone Question Cards & Lists */

.forum-header-box {
  background: var(--bg-navy);
  color: #ffffff;
  padding: 12px 18px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--border-color);
  border-bottom: 3px solid var(--accent-orange);
  border-radius: 8px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}

.forum-header-box-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.forum-questions-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.forum-question-card {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: var(--transition-smooth);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.forum-question-card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(242, 92, 5, 0.4);
  background: rgba(242, 92, 5, 0.01);
}

.forum-card-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}

.forum-card-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.forum-card-tag-num {
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent-blue);
  background: rgba(10, 110, 189, 0.1);
  padding: 2px 10px;
  border-radius: 4px;
  border: 1px solid rgba(10, 110, 189, 0.2);
}

.forum-card-tag-diff {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  border: 1px solid transparent;
}

.forum-card-tag-diff.easy {
  background: #ecfdf5;
  color: #059669;
  border-color: #a7f3d0;
}

.forum-card-tag-diff.medium {
  background: #fffbeb;
  color: #d97706;
  border-color: #fde68a;
}

.forum-card-tag-diff.hard {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fca5a5;
}

.forum-card-tag-rate {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 700;
}

.forum-card-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--bg-navy);
  line-height: 1.5;
  margin: 0;
  transition: color var(--transition-smooth);
}

/* — NCERT figure animations (global fallback for legacy inline SVG) — */

@keyframes ncert-fig-highlight-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(22, 163, 74, 0)); }
  50% { filter: drop-shadow(0 0 6px rgba(22, 163, 74, 0.55)); }
}

.ncert-figure-container svg [stroke="#16a34a"],
.ncert-figure-container svg [fill="#bbf7d0"] {
  animation: ncert-fig-highlight-pulse 1.6s ease-in-out infinite;
}

.ncert-figure--animated svg line[stroke-dasharray]:not([class*="fig-"]),
.ncert-figure--animated svg path[stroke-dasharray]:not([class*="fig-"]) {
  stroke-dasharray: 8 4;
  animation: ncert-ray-flow 2s linear infinite;
}

@keyframes ncert-ray-flow {
  from { stroke-dashoffset: 20; }
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ncert-figure-container svg [stroke="#16a34a"],
  .ncert-figure-container svg [fill="#bbf7d0"],
  .ncert-figure--animated svg line[stroke-dasharray],
  .ncert-figure--animated svg path[stroke-dasharray] {
    animation: none !important;
  }
}

/* — NCERT figure viewer (question cards & solution panels) — */

.ncert-figure-viewer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin-top: 12px;
  border-radius: 10px;
}

.ncert-figure-viewer__content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.ncert-figure-viewer__content .ncert-figure {
  margin: 0;
  display: flex;
  justify-content: center;
  width: 100%;
}

.ncert-figure-viewer__content svg {
  display: block;
  width: 100%;
  height: auto !important;
  max-width: 100%;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  cursor: zoom-in;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
  box-sizing: border-box;
}

.ch4-dual-figures {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  cursor: zoom-in;
}

.ch4-dual-figures__panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(126, 184, 232, 0.18);
  background: rgba(7, 12, 24, 0.55);
}

.ch4-dual-figures__label {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(159, 197, 232, 0.92);
  text-align: center;
}

.ch4-dual-figures__panel svg {
  width: 100%;
  height: auto;
  min-height: 280px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.ncert-figure-viewer--card .ncert-figure-viewer__content .ch4-dual-figures {
  width: min(820px, 100%);
}

.ncert-figure-viewer--detail .ncert-figure-viewer__content .ch4-dual-figures {
  width: min(960px, 100%);
}

@media (max-width: 720px) {
  .ch4-dual-figures {
    flex-direction: column;
  }
}

.ch4-galv-conv {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 100%;
}

.ch4-galv-conv__given {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgba(251, 191, 36, 0.95);
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(251, 191, 36, 0.22);
  background: rgba(251, 191, 36, 0.06);
}

.ch4-galv-conv .ch4-dual-figures {
  width: 100%;
}

.ch4-triple-figures {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}

.ch4-triple-figures .ch4-dual-figures__panel {
  flex: 1;
  min-width: 0;
}

@media (max-width: 960px) {
  .ch4-triple-figures {
    flex-direction: column;
  }
}

.ch4-galv-conv__ratios {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}

.ch4-galv-conv__ratio-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 8px 12px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(56, 189, 248, 0.18);
  background: rgba(15, 23, 42, 0.65);
}

.ch4-galv-conv__ratio-label {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.95);
}

.ch4-galv-conv__ratio-formula {
  font-family: ui-monospace, monospace;
  font-size: 0.72rem;
  color: #67e8f9;
  font-weight: 600;
}

/* Default size — question list cards */

.ncert-figure-viewer--card .ncert-figure-viewer__content svg {
  width: min(540px, 100%);
}

/* Default size — opened question / PDF */

.ncert-figure-viewer--detail .ncert-figure-viewer__content svg {
  width: min(660px, 100%);
}

/* Zoomed — proportional resize (width + height:auto, no transform clipping) */

.ncert-figure-viewer.is-zoomed {
  z-index: 2;
}

.ncert-figure-viewer--card.is-zoomed .ncert-figure-viewer__content svg {
  width: min(1170px, 100%);
}

.ncert-figure-viewer--detail.is-zoomed .ncert-figure-viewer__content svg {
  width: min(1350px, 100%);
}

.forum-question-card:has(.ncert-figure-viewer.is-zoomed) {
  align-items: flex-start;
  overflow: visible;
}

/* Let zoomed figures expand — don't clip inside post panels */

.forum-category-panel:has(.ncert-figure-viewer.is-zoomed) {
  overflow: visible;
}

.ncert-figure-viewer.is-zoomed .ncert-figure-viewer__content svg {
  cursor: zoom-out;
  border-color: rgba(242, 92, 5, 0.45);
  box-shadow: 0 16px 32px -8px rgba(15, 32, 66, 0.18);
}

/* NCERT Table 8.1 sidebar */

.ncert-table-sidebar-card .ncert-figure-viewer {
  margin-top: 4px;
}

.ncert-table-sidebar-card .ncert-figure-viewer__content {
  align-items: flex-start;
}

.ncert-table-sidebar-card .ncert-figure-viewer__content .ncert-figure {
  display: block;
  width: 100%;
}

.ncert-table-sidebar-card .ncert-table-svg-figure svg {
  width: 100%;
  height: auto !important;
  border: 1.5px solid #0f172a;
  background: #dceefb;
}

/* Full-screen popup zoom (Table 8.1, etc.) */

.ncert-figure-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.ncert-figure-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 32, 66, 0.72);
  backdrop-filter: blur(4px);
}

.ncert-figure-lightbox__panel {
  position: relative;
  z-index: 1;
  max-width: min(96vw, 1120px);
  max-height: 92vh;
  overflow: auto;
  border-radius: 10px;
  box-shadow: 0 24px 48px -12px rgba(15, 32, 66, 0.45);
}

.ncert-figure-lightbox__content {
  display: block;
  line-height: 0;
}

.ncert-figure-lightbox__content .ncert-figure {
  margin: 0;
  display: block;
}

/* Native SVG width 560px → 2— = 1120px, capped to viewport */

.ncert-figure-lightbox__content svg {
  display: block;
  width: min(1120px, 92vw) !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 8px;
  border: 1.5px solid #0f172a;
}

.ncert-figure-lightbox__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: rgba(255, 255, 255, 0.97);
  color: #0f2042;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(15, 32, 66, 0.18);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.ncert-figure-lightbox__close:hover {
  border-color: var(--accent-orange, #f25c05);
  color: var(--accent-orange, #f25c05);
}

.ncert-figure-lightbox__badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 2;
  background: var(--accent-orange, #f25c05);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  padding: 4px 9px;
  border-radius: 5px;
  letter-spacing: 0.06em;
}

.forum-sidebar-card:has(.ncert-figure-viewer.is-zoomed) {
  overflow: visible;
}

.ncert-figure-zoom-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: rgba(255, 255, 255, 0.96);
  color: #0f2042;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 32, 66, 0.12);
  transition: all 0.2s ease;
}

.ncert-figure-zoom-btn:hover {
  border-color: var(--accent-orange, #f25c05);
  color: var(--accent-orange, #f25c05);
  background: #fff;
}

.ncert-figure-zoomed-badge {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 5;
  background: var(--accent-orange, #f25c05);
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  padding: 3px 7px;
  border-radius: 4px;
  letter-spacing: 0.06em;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(242, 92, 5, 0.35);
}

.forum-question-card:hover .forum-card-title {
  color: var(--accent-orange);
}

.forum-card-theory-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  color: #059669;
  background: #f0fdf4;
  border: 1px solid #dcfce7;
  border-radius: 4px;
  padding: 2px 8px;
  width: fit-content;
}

.forum-card-action {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.forum-card-action-text {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-blue);
  display: flex;
  align-items: center;
  transition: color var(--transition-smooth);
}

.forum-question-card:hover .forum-card-action-text {
  color: var(--accent-orange);
}

.forum-card-action-stats {
  display: flex;
  align-items: center;
  gap: 16px;
}

.forum-card-stat-item {
  text-align: right;
  font-size: 10px;
  font-weight: 700;
}

.forum-card-stat-label {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  display: block;
  font-weight: 600;
}

.forum-card-stat-val {
  color: var(--bg-navy);
}

.forum-card-stat-val.orange {
  color: var(--accent-orange);
}

@media (max-width: 640px) {
  .forum-question-card {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .forum-card-action {
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
    justify-content: space-between;
  }
}

/* —
   — Floating Sticky Flashcards & Recall Widget
   — */

/* 1. Minimised FAB Trigger Button */

.floating-sticky-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(135deg, var(--bg-navy) 0%, #172a53 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 20px rgba(15, 32, 66, 0.35);
  border-radius: 50px;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.floating-sticky-fab:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 25px rgba(242, 92, 5, 0.25);
  border-color: var(--accent-orange);
}

.floating-sticky-fab-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--accent-orange);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
  color: #ffffff;
  margin-left: 2px;
}

/* 2. Dragging & Wrapper Panel */

.sticky-note-wrapper {
  position: fixed;
  bottom: 84px;
  right: 24px;
  z-index: 1000;
  width: 335px;
  touch-action: none; /* disables browser scrolling when dragging */
  filter: drop-shadow(0 15px 35px rgba(15, 32, 66, 0.25));
  transition: filter 0.2s ease;
}

.sticky-note-wrapper.dragging {
  filter: drop-shadow(0 25px 45px rgba(15, 32, 66, 0.4));
}

.drag-handle {
  cursor: grab;
}

.drag-handle:active {
  cursor: grabbing;
}

/* Washi Tape decoration */

.sticky-note-tape {
  position: absolute;
  left: 50%;
  top: -14px;
  transform: translateX(-50%) rotate(-1deg);
  width: 95px;
  height: 26px;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  z-index: 10;
  pointer-events: auto;
}

/* Light/Dark variations of washi tape */

.light-theme .sticky-note-tape {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.08);
}

/* 3. Sticky Note Container */

.sticky-note-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 385px;
  border-radius: 12px;
  border: 1px solid;
  padding: 14px 16px 12px 16px;
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Subtle page curl / dog ear effect in bottom corner */

.sticky-note-container::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 16px 16px;
  border-color: transparent transparent rgba(0, 0, 0, 0.08) transparent;
  pointer-events: none;
}

/* 4. Header Bar */

.sticky-note-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
  margin-bottom: 8px;
  flex-shrink: 0;
}

.sticky-note-pin {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.sticky-note-chapter-tag {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.8;
}

.sticky-note-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  border: none;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.sticky-note-action-btn:hover {
  background: rgba(0, 0, 0, 0.12);
}

/* 5. Subheader */

.sticky-note-sub-header {
  font-size: 8px;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.5px;
  opacity: 0.6;
  margin-bottom: 8px;
  flex-shrink: 0;
}

/* 6. Ruled Paper Content & 3D Card Setup */

.sticky-note-body-wrapper {
  flex-grow: 1;
  perspective: 1000px;
  position: relative;
  margin-bottom: 12px;
  height: calc(100% - 100px);
}

.sticky-note-card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.sticky-note-card.flipped {
  transform: rotateY(180deg);
}

/* Card Faces */

.sticky-note-card-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.face-front {
  z-index: 2;
  transform: rotateY(0deg);
}

.face-back {
  transform: rotateY(180deg);
}

/* Ruled Note Lines background */

.ruled-lines-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px);
  background-size: 100% 22px;
  pointer-events: none;
  z-index: 1;
}

.card-face-content {
  position: relative;
  z-index: 2;
  padding: 8px 10px 8px 24px; /* Left indent represents notepad margin */
  border-left: 1px solid rgba(239, 68, 68, 0.25); /* Margin line */
  margin-left: 8px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.face-tag-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--accent-orange);
  margin-bottom: 6px;
}

.face-tag-label.back-label {
  color: #059669;
}

/* Text Displays inside Sticky Note */

.card-text-display {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.45;
  overflow-y: auto;
  flex-grow: 1;
  padding-right: 4px;
  scrollbar-width: thin;
}

/* Hide scrollbar default styles */

.card-text-display::-webkit-scrollbar {
  width: 6px;
}

.card-text-display::-webkit-scrollbar-thumb {
  background-color: rgba(15, 32, 66, 0.5);
  border-radius: 10px;
}

.card-text-display.back-text {
  font-size: 0.78rem;
  font-weight: 500;
}

/* Mathematical formulas box inside back side */

.sticky-note-formula-box {
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: inherit;
  white-space: nowrap;
  overflow-x: auto;
  word-break: normal;
}

.flip-hint {
  font-size: 8px;
  font-weight: 700;
  opacity: 0.55;
  text-align: center;
  padding-top: 6px;
  border-top: 1px dashed rgba(0, 0, 0, 0.06);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 7. Footer controls */

.sticky-note-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px dashed rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}

/* Color dot buttons */

.color-picker-dots {
  display: flex;
  gap: 5px;
}

.color-dot-btn {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: transform 0.2s ease;
  padding: 0;
}

.color-dot-btn:hover {
  transform: scale(1.2);
}

.color-dot-btn.active {
  transform: scale(1.2);
  box-shadow: 0 0 0 2px rgba(15, 32, 66, 0.2);
  border-color: rgba(0, 0, 0, 0.4);
}

/* Sticky note navigation layout */

.sticky-note-navigation {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.06);
  border: none;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease;
  padding: 0;
}

.nav-btn-icon:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.12);
}

.sticky-note-index-indicator {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  opacity: 0.8;
}

/* Custom spin for lucide sync/rotate icon */

@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin-slow {
  animation: spin-slow 8s linear infinite;
}

/* Micro pulse animation for FAB */

@keyframes pulse-subtle {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

.animate-pulse-subtle {
  animation: pulse-subtle 3s ease-in-out infinite;
}

/* Responsive constraints */

@media (max-width: 480px) {
  .sticky-note-wrapper {
    width: 290px;
    right: 12px;
    bottom: 70px;
  }
  .sticky-note-container {
    height: 360px;
  }
}

/* ========================================
   Student Q&A & Community Discussion Board Styles
   ======================================== */

.studyhub-discussion-tabs {
  display: flex;
  gap: 12px;
  border-bottom: 2px solid var(--border-light);
  padding-bottom: 1px;
  margin-bottom: 20px;
}

.studyhub-discussion-tab-btn {
  background: none;
  border: none;
  padding: 10px 16px;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  position: relative;
  transition: var(--transition-smooth);
}

.studyhub-discussion-tab-btn:hover {
  color: var(--bg-navy);
}

.studyhub-discussion-tab-btn.active {
  color: var(--accent-orange);
}

.studyhub-discussion-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--accent-orange);
  border-radius: 99px;
}

/* Discussion Board Controls (Search & Filter) */

.discussion-board-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.discussion-search-input-wrapper {
  position: relative;
  flex: 1;
  min-width: 200px;
}

.discussion-search-input {
  width: 100%;
  padding: 8px 12px 8px 32px;
  font-size: 12px;
  font-family: var(--font-sans);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background-color: var(--bg-white);
  color: var(--text-dark);
  outline: none;
  transition: var(--transition-smooth);
}

.discussion-search-input:focus {
  border-color: var(--accent-orange);
  box-shadow: 0 0 0 2px rgba(242, 92, 5, 0.1);
}

.discussion-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.discussion-filter-select {
  padding: 8px 12px;
  font-size: 11px;
  font-family: var(--font-sans);
  font-weight: 600;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background-color: var(--bg-white);
  color: var(--text-secondary);
  cursor: pointer;
  outline: none;
}

.discussion-filter-select:hover {
  border-color: #cbd5e1;
}

.discussion-ask-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--accent-orange);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.discussion-ask-btn:hover {
  background-color: var(--accent-orange-hover);
  transform: translateY(-1px);
}

/* Form Panel */

.discussion-form-panel {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

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

.discussion-form-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
}

.discussion-form-input {
  padding: 9px 12px;
  font-size: 12px;
  font-family: var(--font-sans);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background-color: var(--bg-white);
  color: var(--text-dark);
  outline: none;
}

.discussion-form-input:focus {
  border-color: var(--accent-orange);
}

.discussion-form-textarea {
  min-height: 100px;
  resize: vertical;
}

/* Image Upload Widget */

.discussion-image-upload-area {
  border: 2px dashed var(--border-color);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.01);
  cursor: pointer;
  transition: var(--transition-smooth);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.discussion-image-upload-area:hover {
  border-color: var(--accent-orange);
  background-color: rgba(242, 92, 5, 0.02);
}

.discussion-image-upload-text {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
}

.discussion-image-preview-container {
  margin-top: 10px;
  position: relative;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow: hidden;
  max-width: 150px;
}

.discussion-image-preview {
  width: 100%;
  display: block;
  object-fit: cover;
  height: 100px;
}

.discussion-image-remove-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  background-color: rgba(15, 32, 66, 0.8);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
}

.discussion-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}

/* Thread Cards List */

.discussion-threads-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.discussion-thread-card {
  background-color: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: flex-start;
  transition: var(--transition-smooth);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.discussion-thread-card:hover {
  transform: translateY(-1px);
  border-color: #cbd5e1;
  box-shadow: var(--shadow-md);
}

/* Upvote Box */

.discussion-upvote-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  background-color: rgba(15, 32, 66, 0.03);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  min-width: 44px;
  transition: var(--transition-smooth);
}

.discussion-upvote-box:hover {
  background-color: rgba(242, 92, 5, 0.05);
  border-color: rgba(242, 92, 5, 0.2);
}

.discussion-upvote-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}

.discussion-upvote-btn:hover {
  color: var(--accent-orange);
  transform: translateY(-1px);
}

.discussion-upvote-btn.liked {
  color: var(--accent-orange);
}

.discussion-upvote-count {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 800;
  color: var(--bg-navy);
  margin-top: 2px;
}

.discussion-thread-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}

.discussion-thread-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 600;
}

.discussion-thread-author {
  color: var(--accent-blue);
  font-weight: 700;
}

.discussion-thread-concept-tag {
  font-size: 8px;
  background-color: var(--border-light);
  color: var(--text-secondary);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
}

.discussion-thread-card-title {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--bg-navy);
  line-height: 1.3;
}

.discussion-thread-card-title:hover {
  color: var(--accent-orange);
}

.discussion-thread-snippet {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Thumbnail and Replies Indicator */

.discussion-card-right-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: center;
}

.discussion-thread-thumbnail {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid var(--border-color);
}

.discussion-replies-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  background-color: var(--bg-primary);
  padding: 4px 8px;
  border-radius: 6px;
}

/* Thread Detail View */

.discussion-thread-detail-container {
  background-color: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.discussion-detail-back-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-blue);
  cursor: pointer;
}

.discussion-detail-back-btn:hover {
  text-decoration: underline;
}

.discussion-detail-header-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.discussion-detail-title-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.discussion-detail-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 850;
  color: var(--bg-navy);
  line-height: 1.25;
}

.discussion-detail-body {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  font-weight: 500;
  white-space: pre-line;
}

.discussion-detail-image-wrapper {
  margin: 16px 0;
  max-width: 100%;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.discussion-detail-image {
  max-width: 100%;
  max-height: 400px;
  display: block;
  margin: 0 auto;
}

.discussion-replies-section {
  border-top: 1px solid var(--border-light);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.discussion-replies-heading {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--bg-navy);
}

.discussion-reply-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
}

.discussion-reply-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.discussion-reply-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.discussion-reply-meta {
  font-size: 9px;
  color: var(--text-muted);
  font-weight: 600;
}

.discussion-reply-author {
  color: var(--text-dark);
  font-weight: 700;
}

.discussion-reply-text {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  font-weight: 500;
}

/* ========================================
   Launch Tab Buttons 3D Styling (Colorful & Premium)
   ======================================= */

.btn-3d-launch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #ffffff !important;
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 16px;
  border-radius: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  border-right: 1px solid rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.2s ease;
  user-select: none;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
}

.btn-3d-launch:hover {
  filter: brightness(1.08);
}

.btn-3d-launch:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

/* Textbook Button - Ocean Blue */

.btn-3d-textbook {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
  border-bottom: 4px solid #0369a1 !important;
}

.btn-3d-textbook:active {
  border-bottom: 1px solid #0369a1 !important;
}

/* Notes Button - Emerald Green */

.btn-3d-notes {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-bottom: 4px solid #047857 !important;
}

.btn-3d-notes:active {
  border-bottom: 1px solid #047857 !important;
}

/* Flashcards Button - Indigo */

.btn-3d-flashcards {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  border-bottom: 4px solid #3730a3 !important;
}

.btn-3d-flashcards:active {
  border-bottom: 1px solid #3730a3 !important;
}

/* Formulas Button - Crimson Red */

.btn-3d-formulas {
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%) !important;
  border-bottom: 4px solid #be123c !important;
}

.btn-3d-formulas:active {
  border-bottom: 1px solid #be123c !important;
}

/* Video Lessons Button - Royal Violet */

.btn-3d-videos {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
  border-bottom: 4px solid #6d28d9 !important;
}

.btn-3d-videos:active {
  border-bottom: 1px solid #6d28d9 !important;
}

/* Q&A Quiz Button - Warm Tangerine Orange */

.btn-3d-quiz {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
  border-bottom: 4px solid #c2410c !important;
}

.btn-3d-quiz:active {
  border-bottom: 1px solid #c2410c !important;
}

/* —
   — In-place Inline Math Diagrams & Graphs Zoom
   — */

/* Container for math diagrams to support inline zoom */

.math-svg-wrapper {
  position: relative;
  display: inline-block;
  margin: 16px auto;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: #111827;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  max-width: 100%;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.math-svg-wrapper svg {
  display: block;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  max-width: 100%;
  cursor: zoom-in;
}

.math-svg-wrapper svg:hover {
  filter: brightness(1.08);
}

/* Zoom Button Overlay */

.math-svg-zoom-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.85);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.math-svg-wrapper:hover .math-svg-zoom-btn {
  opacity: 1;
  transform: scale(1);
}

.math-svg-zoom-btn:hover {
  background: #0f172a;
  border-color: var(--accent-orange, #f25c05);
  color: var(--accent-orange, #f25c05);
  box-shadow: 0 0 8px rgba(242, 92, 5, 0.4);
}

.math-svg-zoom-btn svg {
  cursor: pointer !important;
  pointer-events: none;
}

.math-svg-zoom-btn .zoom-out-icon {
  display: none;
}

/* Zoomed State Styling */

.math-svg-wrapper.is-zoomed {
  border-color: rgba(242, 92, 5, 0.4);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
  overflow-x: auto;
  overflow-y: hidden;
}

.math-svg-wrapper.is-zoomed > svg {
  width: 100% !important;
  min-width: 1000px !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  cursor: zoom-out;
}

.math-svg-wrapper.is-zoomed .math-svg-zoom-btn .zoom-in-icon {
  display: none;
}

.math-svg-wrapper.is-zoomed .math-svg-zoom-btn .zoom-out-icon {
  display: block;
}

/* Zoomed indicator badge at the bottom-left */

.math-svg-wrapper::after {
  content: 'ZOOMED';
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: var(--accent-orange, #f25c05);
  color: #ffffff;
  font-size: 8px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  opacity: 0;
  transform: translateY(6px);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 5;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.math-svg-wrapper.is-zoomed::after {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================
   Sidebar 3D Sticky Note Cards for Chapter Formulae
   ======================================== */

.sidebar-sticky-notes-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 12px 6px;
  overflow: visible;
}

.sidebar-sticky-note {
  position: relative;
  border-radius: 4px;
  padding: 16px 14px 14px 22px;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.08), 
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 10px 15px -3px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: visible;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* 3D Drop shadow page peel simulation using pseudo element */

.sidebar-sticky-note::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 6px;
  width: 90%;
  height: 12px;
  background: rgba(0, 0, 0, 0.07);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
  transform: rotate(-2.5deg);
  z-index: -1;
  transition: all 0.3s ease;
}

/* Alternate rotational tilts to look organic */

.sidebar-sticky-note.tilt-left {
  transform: rotate(-1.2deg);
}

.sidebar-sticky-note.tilt-right {
  transform: rotate(0.8deg);
}

/* Reverse shadow angle for right tilted cards */

.sidebar-sticky-note.tilt-right::after {
  transform: rotate(2.5deg);
  left: auto;
  right: 6px;
}

/* 3D Pushpin */

.sidebar-sticky-note-pin {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 3px 3px, #fca5a5, #b91c1c);
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.25), 
    inset -2px -2px 3px rgba(0, 0, 0, 0.45),
    0 5px 8px rgba(0, 0, 0, 0.15);
  z-index: 5;
}

.sidebar-sticky-note-pin::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 4px;
  width: 1.5px;
  height: 5px;
  background: #9ca3af;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35);
}

/* Ruled paper lined background pattern */

.sidebar-ruled-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.035) 1px, transparent 1px);
  background-size: 100% 20px;
  pointer-events: none;
  z-index: 1;
  border-radius: 4px;
}

/* Margin Red line */

.sidebar-sticky-note-content-wrapper {
  position: relative;
  z-index: 2;
  border-left: 1px solid rgba(239, 68, 68, 0.22);
  padding-left: 10px;
  margin-left: -4px;
}

/* Color palettes */

.sidebar-sticky-note.note-yellow {
  background-color: #fef9c3; /* tailwind yellow-100 */
  border-color: rgba(234, 179, 8, 0.15);
  color: #713f12; /* tailwind yellow-900 */
}

.sidebar-sticky-note.note-teal {
  background-color: #ecfeff; /* tailwind teal-50 */
  border-color: rgba(20, 184, 166, 0.15);
  color: #115e59; /* tailwind teal-800 */
}

.sidebar-sticky-note.note-pink {
  background-color: #fdf2f8; /* tailwind pink-50 */
  border-color: rgba(236, 72, 153, 0.15);
  color: #831843; /* tailwind pink-900 */
}

.sidebar-sticky-note.note-lavender {
  background-color: #f5f3ff; /* tailwind violet-50 */
  border-color: rgba(139, 92, 246, 0.15);
  color: #4c1d95; /* tailwind violet-900 */
}

.sidebar-sticky-note.note-orange {
  background-color: #fff7ed; /* tailwind orange-50 */
  border-color: rgba(249, 115, 22, 0.15);
  color: #7c2d12; /* tailwind orange-900 */
}

/* Active Highlight Status styling */

.sidebar-sticky-note.note-active {
  transform: scale(1.03) rotate(-0.5deg) translateY(-2px) !important;
  box-shadow: 
    0 10px 20px rgba(0, 0, 0, 0.12),
    0 6px 6px rgba(0, 0, 0, 0.1),
    0 0 0 2px #f97316,
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  z-index: 10;
}

.sidebar-sticky-note.note-active::after {
  box-shadow: 0 12px 20px rgba(249, 115, 22, 0.25);
  background: rgba(249, 115, 22, 0.1);
  width: 92%;
}

.sidebar-sticky-note.note-active .sidebar-sticky-note-pin {
  background: radial-gradient(circle at 3px 3px, #fca5a5, #dc2626);
  box-shadow: 
    0 1px 3px rgba(220, 38, 38, 0.4), 
    inset -2px -2px 3px rgba(0, 0, 0, 0.5),
    0 6px 12px rgba(220, 38, 38, 0.3);
}

/* Inner elements styling */

.sidebar-sticky-note-name {
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.95;
}

.sidebar-sticky-note-tag {
  background-color: #f97316;
  color: #ffffff;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
  padding: 1.5px 4.5px;
  border-radius: 3px;
  letter-spacing: 0.05em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  transform: rotate(2deg);
}

.sidebar-sticky-note-expr {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.035);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  padding: 6px 8px;
  margin: 6px 0;
  white-space: nowrap;
  overflow-x: auto;
  word-break: normal;
  line-height: 1.4;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
}

.sidebar-sticky-note-desc {
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.4;
  opacity: 0.8;
  margin: 0;
}

/* Expanding Textbook Explanation Drawer */

.sidebar-sticky-note-details-drawer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}

.sidebar-sticky-note-details-drawer.expanded {
  max-height: 500px; /* High threshold to handle detailed formulas */
  opacity: 1;
}

.sidebar-sticky-note-details-content {
  color: inherit;
}

/* Print Stylesheet for Professional PDF Generation */

@media print {
  /* Hide all interactive screen elements */
  #root,
  .forum-boards-index,
  .navbar,
  .header,
  .footer,
  .timer-widget,
  .forum-sidebar-card,
  button,
  .btn-primary,
  .btn-secondary {
    display: none !important;
    visibility: hidden !important;
  }

  /* Reset layout constraints for printing */
  html, body {
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 12pt !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Display printable container */
  .printable-pdf-container {
    display: block !important;
    visibility: visible !important;
  }
}

/* --- PRINT & DOWNLOAD PDF CONTAINER STYLES --- */

/* Hide printable container by default on screen */

.printable-pdf-container {
  display: none;
}

/* Common styling rules for printable container (print & download) */

.printable-pdf-container {
  width: 100%;
  max-width: 100%;
  padding: 20px;
  background: #ffffff;
  color: #0f172a;
  box-shadow: none;
  border: none;
}

.printable-pdf-container * {
  visibility: visible !important;
  text-shadow: none !important;
}

/* Force background colors during printing/download */

.printable-pdf-container .bg-slate-50,
.printable-pdf-container .bg-slate-100 {
  background-color: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

.printable-pdf-container .bg-slate-900,
.printable-chapter-pdf-container .bg-slate-900 {
  background-color: #0f172a !important;
  color: #ffffff !important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

.printable-pdf-container .bg-slate-900 *,
.printable-chapter-pdf-container .bg-slate-900 * {
  color: #ffffff !important;
}

/* Assignment block must stay dark-on-light even inside/near slate-900 PDF sections */

.printable-pdf-container .assignment-answer-card,
.printable-pdf-container .assignment-answer-card--pdf,
.printable-chapter-pdf-container .assignment-answer-card,
.printable-chapter-pdf-container .assignment-answer-card--pdf {
  background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%) !important;
  border-left: 4px solid #2563eb !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

.printable-pdf-container .assignment-answer-card *,
.printable-pdf-container .assignment-answer-card--pdf *,
.printable-chapter-pdf-container .assignment-answer-card *,
.printable-chapter-pdf-container .assignment-answer-card--pdf * {
  color: #1e293b !important;
}

.printable-pdf-container .assignment-answer-title,
.printable-chapter-pdf-container .assignment-answer-title {
  color: #1d4ed8 !important;
  font-weight: 800 !important;
}

.printable-pdf-container .pdf-final-conclusion-body .answer-key-term,
.printable-chapter-pdf-container .pdf-final-conclusion-body .answer-key-term {
  color: #6ee7b7 !important;
  border-bottom-color: #34d399 !important;
}

.printable-pdf-container .ncert-figure-pdf img,
.printable-chapter-pdf-container .ncert-figure-pdf img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
}

.printable-pdf-container .ncert-figure-pdf-caption,
.printable-chapter-pdf-container .ncert-figure-pdf-caption {
  color: #334155 !important;
}

.printable-pdf-container .assignment-answer-body,
.printable-chapter-pdf-container .assignment-answer-body {
  color: #1e293b !important;
  font-weight: 500 !important;
  line-height: 1.75 !important;
}

.printable-pdf-container .pdf-figure-block,
.printable-chapter-pdf-container .pdf-figure-block {
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}

.printable-pdf-container .ncert-figure-pdf,
.printable-chapter-pdf-container .ncert-figure-pdf {
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}

/* Format visual SVGs beautifully for page printing / download */

.printable-pdf-container svg,
.printable-chapter-pdf-container svg {
  background-color: #ffffff !important; /* switch dark mode SVG to light mode for printing */
  border: 1px solid #cbd5e1 !important;
  display: block !important;
  margin: 15px auto !important;
  max-width: 100% !important;
  box-shadow: none !important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

/* Override internal SVG classes for light-mode printing / download */

.printable-pdf-container svg rect {
  fill: #ffffff !important;
}

.printable-pdf-container svg pattern path {
  stroke: #e2e8f0 !important;
}

.printable-pdf-container svg line {
  stroke: #475569 !important;
}

.printable-pdf-container svg polygon {
  fill: rgba(59, 130, 246, 0.08) !important;
  stroke: #2563eb !important;
}

.printable-pdf-container svg text {
  fill: #0f172a !important;
}

.printable-pdf-container svg circle {
  stroke: none !important;
}

/* html2pdf splits the rendered canvas at these nodes */

.printable-pdf-container .html2pdf__page-break,
.printable-chapter-pdf-container .html2pdf__page-break {
  page-break-before: always !important;
  break-before: page !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  clear: both !important;
}

/* PDF section pagination — keep key blocks intact */

.printable-pdf-container .pdf-keep-together,
.printable-chapter-pdf-container .pdf-keep-together,
.printable-pdf-container .pdf-final-conclusion,
.printable-chapter-pdf-container .pdf-final-conclusion,
.printable-pdf-container .assignment-answer-card,
.printable-pdf-container .assignment-answer-card--pdf,
.printable-chapter-pdf-container .assignment-answer-card,
.printable-chapter-pdf-container .assignment-answer-card--pdf {
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}

.printable-pdf-container .assignment-answer-card,
.printable-pdf-container .assignment-answer-card--pdf,
.printable-chapter-pdf-container .assignment-answer-card,
.printable-chapter-pdf-container .assignment-answer-card--pdf {
  padding-bottom: 20px !important;
  margin-bottom: 16px !important;
}

/* Ensure page breaks don't split diagrams awkwardly */

.printable-pdf-container svg,
.printable-chapter-pdf-container svg,
.printable-pdf-container div[style*="text-align:center"],
.printable-chapter-pdf-container div[style*="text-align:center"] {
  page-break-inside: avoid !important;
  break-inside: avoid !important;
}

/* Standard animation classes */

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

.animate-spin {
  animation: spin 1s linear infinite;
}

/* --- PREMIUM INTERACTIVE CHAPTER DOWNLOAD BUTTON --- */

.btn-pro-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
  background: transparent;
  box-shadow: none;
}

/* Active Pro Subscription State (blinking dark navy/slate border box, no filled background highlight) */

.btn-pro-download.pro-active {
  color: #0f172a;
  animation: proBoxBlinkActive 2s infinite ease-in-out;
}

.btn-pro-download.pro-active:hover {
  transform: translateY(-2.5px) scale(1.03);
  color: #1e3a8a;
  background-color: rgba(15, 23, 42, 0.05);
}

.btn-pro-download.pro-active:active {
  transform: translateY(1px) scale(0.97);
}

/* Locked Free State (blinking gray/slate border box, no filled background highlight) */

.btn-pro-download.pro-locked {
  color: #475569;
  animation: proBoxBlinkLocked 2s infinite ease-in-out;
}

.btn-pro-download.pro-locked:hover {
  transform: translateY(-2.5px) scale(1.03);
  color: #1e293b;
  background-color: rgba(71, 85, 105, 0.08);
}

.btn-pro-download.pro-locked:active {
  transform: translateY(1px) scale(0.97);
}

/* Hover Sweep Shimmer Effect */

.btn-pro-download::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -75%;
  width: 40%;
  height: 200%;
  background: rgba(255, 255, 255, 0.25);
  transform: rotate(30deg);
  pointer-events: none;
}

.btn-pro-download:hover::after {
  left: 140%;
  transition: all 0.8s ease-in-out;
}

@keyframes proBoxBlinkActive {
  0%, 100% {
    border-color: rgba(15, 23, 42, 0.2);
    box-shadow: 0 0 4px rgba(15, 23, 42, 0.08);
    background-color: rgba(15, 23, 42, 0.01);
  }
  50% {
    border-color: rgba(15, 23, 42, 0.85);
    box-shadow: 0 0 10px rgba(15, 23, 42, 0.25);
    background-color: rgba(15, 23, 42, 0.05);
  }
}

@keyframes proBoxBlinkLocked {
  0%, 100% {
    border-color: rgba(71, 85, 105, 0.15);
    box-shadow: 0 0 3px rgba(71, 85, 105, 0.05);
    background-color: rgba(71, 85, 105, 0.01);
  }
  50% {
    border-color: rgba(71, 85, 105, 0.7);
    box-shadow: 0 0 8px rgba(71, 85, 105, 0.2);
    background-color: rgba(71, 85, 105, 0.04);
  }
}

/* --- PREMIUM TEXTBOOK READER STYLES --- */

.reader-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 16px;
  margin-bottom: 24px;
}

.reader-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  padding: 10px 16px;
  border-radius: 12px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
  gap: 12px;
}

.reader-controls-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reader-controls-label {
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

.reader-controls-group {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  padding: 4px;
  border-radius: 8px;
}

.reader-btn-font {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 750;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.reader-btn-font:hover {
  color: var(--text-dark);
  background: var(--bg-white);
}

.reader-btn-font.active {
  color: #ffffff;
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
  box-shadow: 0 2px 6px rgba(6, 182, 212, 0.25);
  border-color: transparent;
}

.reader-btn-theme {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.reader-btn-theme.theme-light {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #1e293b;
}

.reader-btn-theme.theme-sepia {
  background: #f4ebd0;
  border-color: #d1c19b;
  color: #5b4636;
}

.reader-btn-theme.theme-dark {
  background: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}

.reader-btn-theme.active {
  outline: 2px solid var(--accent-blue);
  outline-offset: 1px;
  font-weight: 900;
}

.reader-bookmark-toggle {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-white);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-smooth);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 750;
}

.reader-bookmark-toggle:hover {
  color: var(--accent-orange);
  border-color: var(--accent-orange);
  background-color: rgba(242, 92, 5, 0.02);
}

.reader-bookmark-toggle.active {
  background: rgba(242, 92, 5, 0.1);
  color: var(--accent-orange);
  border-color: var(--accent-orange);
}

/* Textbook Content Container */

.reader-page-card {
  border-radius: 16px;
  padding: 36px;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  transition: all 0.3s ease-in-out;
}

.reader-page-card.theme-light {
  background: #ffffff;
  color: #1e293b;
  border-color: #e2e8f0;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.04);
}

.reader-page-card.theme-sepia {
  background: #fdfaf2;
  color: #4a3b32;
  border-color: #ebdcb9;
  box-shadow: 0 10px 25px -5px rgba(91, 70, 54, 0.04);
}

.reader-page-card.theme-dark {
  background: #0d111d;
  color: #cbd5e1;
  border-color: #1e293b;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}

.reader-page-title {
  font-family: var(--font-heading);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.reader-page-card.theme-light .reader-page-title { color: #0f172a; }

.reader-page-card.theme-sepia .reader-page-title { color: #2d1f14; }

.reader-page-card.theme-dark .reader-page-title { color: #ffffff; }

.reader-page-body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  line-height: 1.85;
}

/* Reader injected SVG figures (Physics Ch1/Ch2, etc.) */

.reader-figure-slot {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 18px 0;
}

.reader-figure-slot svg {
  display: block;
  width: 100%;
  max-width: min(720px, 100%);
  height: auto !important;
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22);
}

.reader-page-card.theme-light .reader-figure-slot svg {
  border: 1px solid #cbd5e1;
}

.reader-page-card.theme-dark .reader-figure-slot svg,
.reader-page-card.theme-sepia .reader-figure-slot svg {
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.reader-page-body p {
  margin-bottom: 20px;
}

.reader-page-body p.reader-section-head {
  font-weight: 800;
  font-size: 1.05em;
  margin-top: 28px;
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}

.reader-page-body p.reader-example-head {
  font-weight: 700;
  margin-top: 26px;
  margin-bottom: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(120, 120, 120, 0.25);
}

.reader-page-body p.reader-solution-head {
  font-weight: 700;
  margin-top: 12px;
  margin-bottom: 8px;
  color: inherit;
  opacity: 0.92;
}

.reader-page-body p.reader-exercise-q {
  margin-top: 18px;
  margin-bottom: 12px;
  padding-left: 12px;
  border-left: 3px solid rgba(242, 92, 5, 0.45);
}

.reader-page-body p.reader-math-line {
  background: rgba(2, 132, 199, 0.07);
  border-left: 3px solid var(--accent-blue);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  margin-top: 6px;
  margin-bottom: 10px;
  font-weight: 600;
  line-height: 1.7;
  overflow-x: auto;
}

.reader-page-card.theme-dark .reader-page-body p.reader-math-line {
  background: rgba(96, 165, 250, 0.1);
}

.reader-page-card.theme-sepia .reader-page-body p.reader-math-line {
  background: rgba(120, 80, 40, 0.08);
}

.reader-highlight-box {
  padding: 20px;
  border-radius: 12px;
  font-size: 0.95em;
  font-style: italic;
  font-weight: 600;
  margin-top: 28px;
  border-left: 4px solid var(--accent-blue);
  background: linear-gradient(90deg, rgba(2, 132, 199, 0.06) 0%, rgba(99, 102, 241, 0.06) 100%);
}

.reader-page-card.theme-light .reader-highlight-box {
  color: #0f172a;
}

.reader-page-card.theme-sepia .reader-highlight-box {
  color: #2d1f14;
}

.reader-page-card.theme-dark .reader-highlight-box {
  color: #ffffff;
}

.reader-navigation-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(120, 120, 120, 0.15);
  padding-top: 24px;
  margin-top: 36px;
}

/* Sidebar elements */

.reader-notes-panel {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 380px;
}

.reader-note-item {
  padding: 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  transition: var(--transition-smooth);
}

.reader-note-item:hover {
  border-color: var(--border-color);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.reader-note-text {
  font-size: 11.5px;
  color: var(--text-dark);
  line-height: 1.5;
  font-weight: 600;
}

.reader-bookmarks-panel {
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-md);
}

.reader-bookmark-badge-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.reader-bookmark-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.reader-bookmark-badge:hover {
  color: var(--text-dark);
  border-color: var(--border-color);
}

.reader-bookmark-badge.active {
  color: #ffffff;
  background: var(--bg-navy);
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}

/* --- REVISION NOTES STYLING --- */

.revision-notes-intro {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px;
  border-radius: 16px;
  border: 1px solid rgba(59, 130, 246, 0.18);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.revision-notes-intro__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
}

.revision-notes-intro__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.revision-notes-intro__text {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}

.revision-notes-sections {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.revision-note-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Section heading — 3D button */

.revision-heading-btn-3d {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom: 5px solid rgba(0, 0, 0, 0.22);
  color: #fff;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-heading);
  box-shadow: 0 6px 14px -4px rgba(15, 23, 42, 0.22);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.15s ease, border-bottom-width 0.12s ease;
  user-select: none;
}

.revision-heading-btn-3d:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.revision-heading-btn-3d:active {
  transform: translateY(3px);
  border-bottom-width: 2px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
}

.revision-heading-btn-3d--blue {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  border-bottom-color: #0369a1;
}

.revision-heading-btn-3d--emerald {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-bottom-color: #047857;
}

.revision-heading-btn-3d--indigo {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  border-bottom-color: #3730a3;
}

.revision-heading-btn-3d--violet {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  border-bottom-color: #6d28d9;
}

.revision-heading-btn-3d--orange {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  border-bottom-color: #c2410c;
}

.revision-heading-btn-3d--rose {
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
  border-bottom-color: #be123c;
}

.revision-heading-btn-3d__left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.revision-heading-btn-3d__badge {
  flex-shrink: 0;
  min-width: 44px;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
}

.revision-heading-btn-3d__title {
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.revision-heading-btn-3d__meta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.92;
}

.revision-heading-btn-3d__chevron {
  transition: transform 0.2s ease;
}

.revision-heading-btn-3d__chevron.is-open {
  transform: rotate(90deg);
}

/* Topic rows — arrow 3D buttons */

.revision-topic-list {
  list-style: none;
  margin: 0;
  padding: 0 4px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.revision-topic-arrow-btn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 11px 14px 11px 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  border-left: 4px solid #3b82f6;
  border-bottom: 4px solid #cbd5e1;
  box-shadow: 0 3px 0 #e2e8f0, 0 4px 10px rgba(15, 23, 42, 0.04);
  transition: transform 0.12s ease, border-bottom-width 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.revision-topic-arrow-btn:hover {
  transform: translateY(-1px);
  border-bottom-width: 5px;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  box-shadow: 0 4px 0 #cbd5e1, 0 6px 14px rgba(15, 23, 42, 0.06);
}

.revision-topic-arrow-btn:active {
  transform: translateY(2px);
  border-bottom-width: 2px;
  box-shadow: 0 1px 0 #cbd5e1;
}

.revision-topic-arrow-btn--activity {
  border-left-color: #d97706;
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
}

.revision-topic-arrow-btn--activity .revision-topic-arrow-btn__icon {
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
  border-bottom-color: #b45309;
}

.revision-topic-arrow-btn--box {
  border-left-color: #7c3aed;
  background: linear-gradient(180deg, #faf5ff 0%, #f3e8ff 100%);
}

.revision-topic-arrow-btn--box .revision-topic-arrow-btn__icon {
  background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
  border-bottom-color: #6d28d9;
}

.revision-topic-arrow-btn__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom: 3px solid #1d4ed8;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
}

.revision-topic-arrow-btn__text {
  flex: 1;
  min-width: 0;
  font-size: 0.88rem;
  line-height: 1.72;
  color: var(--text-secondary);
  font-weight: 500;
}

.revision-notes-sidebar__list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.revision-notes-sidebar__list li + li {
  margin-top: 8px;
}

@media (max-width: 640px) {
  .revision-heading-btn-3d {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .revision-heading-btn-3d__meta {
    align-self: flex-end;
  }
}

/* --- PREMIUM 3D FLIPPING FLASHCARDS --- */

.flashcard-deck-wrapper {
  perspective: 1200px;
  width: 100%;
  max-width: 650px;
  margin: 32px auto;
}

.flashcard-container-3d {
  position: relative;
  width: 100%;
  height: 300px;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.flashcard-container-3d.flipped {
  transform: rotateY(180deg);
}

.flashcard-card-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 12px 28px rgba(15, 32, 66, 0.12);
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: var(--transition-smooth);
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
}

/* Front Face Styling */

.flashcard-card-face.face-front {
  background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 100%);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.08);
}

.flashcard-card-face.face-front:hover {
  border-color: rgba(236, 72, 153, 0.35);
  box-shadow: 0 15px 35px rgba(236, 72, 153, 0.12);
}

/* Back Face Styling */

.flashcard-card-face.face-back {
  background: #ffffff;
  color: #1e293b;
  transform: rotateY(180deg);
  border-color: #e2e8f0;
}

.light-theme .flashcard-card-face.face-back {
  background: #fafbfe;
  color: #0f172a;
}

.flashcard-badge {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 9999px;
  align-self: flex-start;
  border: 1px solid transparent;
}

.flashcard-badge.badge-front {
  color: #f472b6;
  background: rgba(244, 114, 182, 0.1);
  border-color: rgba(244, 114, 182, 0.2);
}

.flashcard-badge.badge-back {
  color: #0d9488;
  background: rgba(13, 148, 136, 0.1);
  border-color: rgba(13, 148, 136, 0.2);
}

.flashcard-card-text {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  text-align: center;
  line-height: 1.6;
  word-break: break-word;
}

.flashcard-footer-tip {
  font-size: 10px;
  font-weight: 750;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.face-front .flashcard-footer-tip {
  color: #94a3b8;
}

/* Mastered badge count top bar */

.flashcard-hud-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-secondary);
}

.flashcard-mastered-pill {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.2);
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 11px;
}

.formula-grid-layout {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

@media (max-width: 768px) {
  .formula-grid-layout {
    grid-template-columns: 1fr;
  }
}

/* --- INTERACTIVE WHITEBOARD SYSTEM --- */

.whiteboard-container {
  background-color: #ffffff;
  border: 6px solid #475569; /* Sleek slate frame */
  border-radius: 16px;
  box-shadow: 
    inset 0 0 20px rgba(0, 0, 0, 0.05),
    0 10px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  padding: 24px;
  min-height: 600px;
  transition: all 0.3s ease;
}

.light-theme .whiteboard-container {
  background-color: #ffffff;
  border-color: #cbd5e1; /* Silver bezel */
  box-shadow: 
    inset 0 0 15px rgba(0, 0, 0, 0.02),
    0 12px 28px -4px rgba(15, 32, 66, 0.08);
}

/* Whiteboard Canvas Grid Patterns */

.whiteboard-canvas-dots {
  background-image: radial-gradient(#cbd5e1 1.2px, transparent 1.2px);
  background-size: 20px 20px;
}

.whiteboard-canvas-ruled {
  background-image: linear-gradient(#e2e8f0 1px, transparent 1px);
  background-size: 100% 28px;
}

.whiteboard-canvas-blank {
  background-image: none;
}

/* Whiteboard Tools HUD Navbar */

.whiteboard-tools-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 10px 20px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-md);
  color: #ffffff;
  flex-wrap: wrap;
}

.light-theme .whiteboard-tools-hud {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #0f172a;
}

.whiteboard-tool-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.whiteboard-tool-label {
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.8;
}

.whiteboard-marker-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

.whiteboard-marker-dot:hover {
  transform: scale(1.2);
}

.whiteboard-marker-dot.active {
  border-color: #0ea5e9;
  box-shadow: 0 0 6px #0ea5e9;
}

/* Whiteboard Magnetic Tile Card */

.whiteboard-tile-card {
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  position: relative;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.whiteboard-tile-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #64748b; /* default header marker strip */
}

/* Magnetic marker strip indicators */

.whiteboard-tile-card.marker-black::before { background: #0f172a; }

.whiteboard-tile-card.marker-blue::before { background: #2563eb; }

.whiteboard-tile-card.marker-red::before { background: #dc2626; }

.whiteboard-tile-card.marker-green::before { background: #16a34a; }

@media (hover: hover) {
  .whiteboard-tile-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  }
}

.whiteboard-tile-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 1.05rem;
  color: #1e293b;
}

.whiteboard-tile-desc {
  font-size: 12px;
  color: #475569;
  line-height: 1.5;
  font-weight: 600;
  margin-top: 8px;
}

/* Marker-drawn styled expression */

.whiteboard-tile-expr {
  font-family: 'Fira Code', monospace;
  font-weight: 800;
  font-size: 1.35rem;
  padding: 16px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px dashed #cbd5e1;
  text-align: center;
  margin: 16px 0;
  transition: all 0.2s ease;
}

.whiteboard-tile-card.marker-black .whiteboard-tile-expr { color: #0f172a; border-color: rgba(15, 23, 42, 0.15); }

.whiteboard-tile-card.marker-blue .whiteboard-tile-expr { color: #1d4ed8; border-color: rgba(29, 78, 216, 0.2); }

.whiteboard-tile-card.marker-red .whiteboard-tile-expr { color: #b91c1c; border-color: rgba(185, 28, 28, 0.2); }

.whiteboard-tile-card.marker-green .whiteboard-tile-expr { color: #047857; border-color: rgba(4, 120, 87, 0.2); }

@media (hover: hover) {
  .whiteboard-tile-card.marker-black .whiteboard-tile-expr:hover { background: rgba(15, 23, 42, 0.02); }
  .whiteboard-tile-card.marker-blue .whiteboard-tile-expr:hover { background: rgba(29, 78, 216, 0.02); }
  .whiteboard-tile-card.marker-red .whiteboard-tile-expr:hover { background: rgba(185, 28, 28, 0.02); }
  .whiteboard-tile-card.marker-green .whiteboard-tile-expr:hover { background: rgba(4, 120, 87, 0.02); }
}

/* Details Drawer */

.whiteboard-details-drawer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: max-height, opacity;
}

.whiteboard-details-drawer.expanded {
  max-height: 250px;
  opacity: 1;
}

.whiteboard-details-content {
  font-size: 11.5px;
  line-height: 1.6;
  color: #334155;
  background: #fdfdfd;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-up-fade {
  animation: slideUpFade 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 3D Real-Time Bulletins Sidebar Card */

.bulletins-sidebar-card-3d {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.9);
  border-left: 1px solid rgba(226, 232, 240, 0.9);
  border-right: 2px solid #cbd5e1;
  border-bottom: 5px solid #94a3b8;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 6px 16px -4px rgba(15, 23, 42, 0.05), 0 2px 4px -2px rgba(15, 23, 42, 0.02);
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
}

.bulletins-sidebar-card-3d:hover {
  transform: translateY(-4px);
  border-bottom-color: #f97316;
  box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.12), 0 4px 12px -4px rgba(15, 23, 42, 0.06);
}

.bulletins-sidebar-card-3d::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, #3b82f6, #f97316);
}

/* 3D Mini-Card Items */

.bulletin-item-card-3d {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-bottom: 3.5px solid #cbd5e1;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transform: translateY(0);
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.01);
  position: relative;
}

.bulletin-item-card-3d:last-child {
  margin-bottom: 0;
}

.bulletin-item-card-3d:hover {
  transform: translateY(-3px);
  border-color: #3b82f6;
  border-bottom-color: #2563eb;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.07);
}

/* Alternate Hover Highlight for JoSAA */

.bulletin-item-card-3d.josaa:hover {
  border-color: #f97316;
  border-bottom-color: #ea580c;
  box-shadow: 0 6px 14px rgba(249, 115, 22, 0.07);
}

.bulletin-item-card-3d:active {
  transform: translateY(1px);
  border-bottom-width: 1.5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

/* Bulletin Badges */

.bulletin-badge {
  display: inline-flex;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2.5px 7px;
  border-radius: 4px;
  line-height: 1;
}

.bulletin-badge.ncert {
  background-color: rgba(59, 130, 246, 0.08);
  color: #1d4ed8;
  border: 1px solid rgba(59, 130, 246, 0.15);
}

.bulletin-badge.josaa {
  background-color: rgba(249, 115, 22, 0.08);
  color: #c2410c;
  border: 1px solid rgba(249, 115, 22, 0.15);
}

.bulletin-item-title-3d {
  font-size: 11.5px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.35;
  transition: color 0.15s ease;
  text-decoration: none;
}

.bulletin-item-card-3d:hover .bulletin-item-title-3d {
  color: #2563eb;
}

.bulletin-item-card-3d.josaa:hover .bulletin-item-title-3d {
  color: #ea580c;
}

.bulletin-item-meta-3d {
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 5px;
}

.bulletin-item-source-3d {
  color: #475569;
  font-weight: 750;
}

/* 3D Sidebar Widgets Customizations */

/* Practice HUD stats */

.practice-hud-stat-item-3d {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-bottom: 3px solid #cbd5e1;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.18s ease-in-out;
  cursor: default;
}

.practice-hud-stat-item-3d:hover {
  transform: translateY(-2px);
  border-bottom-color: #3b82f6;
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.04);
}

.practice-hud-icon-wrapper {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

/* Daily Challenge elements */

.daily-challenge-badge-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.daily-challenge-badge {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 4px;
  line-height: 1;
}

.daily-challenge-badge.hard {
  background-color: rgba(239, 68, 68, 0.08);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.15);
}

.daily-challenge-badge.subject {
  background-color: rgba(99, 102, 241, 0.08);
  color: #4f46e5;
  border: 1px solid rgba(99, 102, 241, 0.15);
}

.daily-challenge-text-box-3d {
  background: #f8fafc;
  border-left: 4px solid #f97316;
  border-top: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  border-bottom: 2px solid #cbd5e1;
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.5;
  color: #0f172a;
  font-weight: 700;
  font-style: italic;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
}

.daily-challenge-stat-grid-3d {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.daily-challenge-stat-card-3d {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-bottom: 3px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
}

.daily-challenge-stat-label-3d {
  display: block;
  font-size: 8.5px;
  font-weight: 750;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.daily-challenge-stat-val-3d {
  font-size: 11px;
  font-weight: 900;
  color: #0f172a;
}

/* Leaderboard custom styles */

.leaderboard-row-3d {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-bottom: 3px solid #cbd5e1;
  border-radius: 10px;
  padding: 8px 12px;
  transition: all 0.2s ease-in-out;
}

.leaderboard-row-3d:hover {
  transform: translateY(-2px);
  border-bottom-color: #fbbf24; /* highlight rank colors */
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.04);
}

.leaderboard-row-3d.rank-1:hover { border-bottom-color: #fbbf24; }

.leaderboard-row-3d.rank-2:hover { border-bottom-color: #94a3b8; }

.leaderboard-row-3d.rank-3:hover { border-bottom-color: #b45309; }

.leaderboard-rank-circle-3d {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 950;
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

.leaderboard-rank-circle-3d.gold { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); }

.leaderboard-rank-circle-3d.silver { background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%); }

.leaderboard-rank-circle-3d.bronze { background: linear-gradient(135deg, #d97706 0%, #b45309 100%); }

.leaderboard-kudos-badge-3d {
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 6px;
  line-height: 1;
}

.leaderboard-kudos-badge-3d.gold {
  background-color: rgba(251, 191, 36, 0.08);
  color: #b45309;
  border: 1px solid rgba(251, 191, 36, 0.15);
}

.leaderboard-kudos-badge-3d.silver {
  background-color: rgba(148, 163, 184, 0.08);
  color: #475569;
  border: 1px solid rgba(148, 163, 184, 0.15);
}

.leaderboard-kudos-badge-3d.bronze {
  background-color: rgba(180, 83, 9, 0.08);
  color: #78350f;
  border: 1px solid rgba(180, 83, 9, 0.15);
}

/* 3D button custom classes for sidebars */

.btn-3d-navy-sidebar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffffff !important;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  border-bottom: 3.5px solid #020617;
  padding: 10px 16px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.1s ease-in-out;
  transform: translateY(0);
}

.btn-3d-navy-sidebar:hover {
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
  transform: translateY(-1.5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.btn-3d-navy-sidebar:active {
  transform: translateY(2px) !important;
  border-bottom-width: 1px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.btn-3d-orange-sidebar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffffff !important;
  background: linear-gradient(180deg, #ff7e33 0%, #e64a00 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  border-bottom: 3.5px solid #9e3100;
  padding: 10px 16px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(230, 74, 0, 0.2);
  transition: all 0.1s ease-in-out;
  transform: translateY(0);
}

.btn-3d-orange-sidebar:hover {
  background: linear-gradient(180deg, #ff9452 0%, #ff5500 100%);
  transform: translateY(-1.5px);
  box-shadow: 0 6px 12px rgba(230, 74, 0, 0.25);
}

.btn-3d-orange-sidebar:active {
  transform: translateY(2px) !important;
  border-bottom-width: 1px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.btn-3d-rose-sidebar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffffff !important;
  background: linear-gradient(180deg, #f43f5e 0%, #be123c 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  border-bottom: 3.5px solid #881337;
  padding: 10px 16px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(190, 18, 60, 0.2);
  transition: all 0.1s ease-in-out;
  transform: translateY(0);
}

.btn-3d-rose-sidebar:hover {
  background: linear-gradient(180deg, #fb7185 0%, #e11d48 100%);
  transform: translateY(-1.5px);
  box-shadow: 0 6px 12px rgba(190, 18, 60, 0.25);
}

.btn-3d-rose-sidebar:active {
  transform: translateY(2px) !important;
  border-bottom-width: 1px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* 3D User profile inside HUD */

.user-profile-hud-3d {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-bottom: 3.5px solid #cbd5e1;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

.user-profile-hud-3d::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3.5px;
  background: linear-gradient(to bottom, #f97316, #ec4899);
}

/* 3D Emerald button for sidebars / board papers key */

.btn-3d-emerald-sidebar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffffff !important;
  background: linear-gradient(180deg, #10b981 0%, #047857 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  border-bottom: 3.5px solid #064e3b;
  padding: 10px 16px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(4, 120, 87, 0.2);
  transition: all 0.1s ease-in-out;
  transform: translateY(0);
}

.btn-3d-emerald-sidebar:hover {
  background: linear-gradient(180deg, #34d399 0%, #059669 100%);
  transform: translateY(-1.5px);
  box-shadow: 0 6px 12px rgba(4, 120, 87, 0.25);
}

.btn-3d-emerald-sidebar:active {
  transform: translateY(2px) !important;
  border-bottom-width: 1px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Premium Board Paper Card Styling */

.board-paper-card-3d {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-left: 5px solid var(--subject-color, #e2e8f0) !important;
  border-bottom: 4px solid #cbd5e1;
  border-radius: 12px;
  padding: 16px;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
}

.board-paper-card-3d:hover {
  transform: translateY(-3px);
  border-bottom-color: #3b82f6; /* Premium Blue hover border */
  border-left-color: var(--subject-color) !important;
  box-shadow: 0 10px 22px -6px rgba(15, 23, 42, 0.08);
}

.board-paper-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 145px;
}

@media (max-width: 640px) {
  .board-paper-card-3d {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .board-paper-actions {
    flex-direction: row;
    min-width: auto;
  }
  .board-paper-actions > a,
  .board-paper-actions > div {
    flex: 1;
  }
}

/* Premium QP (Question Paper) Button - Rich Indigo-to-Blue */

@keyframes qpPulseGlow {
  0%, 100% {
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2), 0 0 0px rgba(37, 99, 235, 0);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45), 0 0 10px rgba(37, 99, 235, 0.3);
    filter: brightness(1.06);
  }
}

.btn-premium-qp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #4f46e5 0%, #2563eb 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  border-bottom: 3.5px solid #1e40af;
  padding: 9px 14px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(37, 99, 235, 0.12);
  transition: all 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: translateY(0);
  animation: qpPulseGlow 2.5s infinite ease-in-out;
}

.btn-premium-qp:hover {
  background: linear-gradient(135deg, #6366f1 0%, #3b82f6 100%);
  transform: translateY(-1.5px);
  box-shadow: 0 6px 12px rgba(37, 99, 235, 0.22);
  animation: none;
}

.btn-premium-qp:active {
  transform: translateY(2px) !important;
  border-bottom-width: 1px !important;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.1) !important;
  animation: none;
}

/* Premium MS (Answer Key) Button - Warm Amber-to-Orange */

@keyframes msPulseGlow {
  0%, 100% {
    box-shadow: 0 4px 6px rgba(217, 119, 6, 0.2), 0 0 0px rgba(217, 119, 6, 0);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.45), 0 0 10px rgba(217, 119, 6, 0.3);
    filter: brightness(1.06);
  }
}

.btn-premium-ms {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  border-bottom: 3.5px solid #b45309;
  padding: 9px 14px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(217, 119, 6, 0.12);
  transition: all 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform: translateY(0);
  animation: msPulseGlow 2.5s infinite ease-in-out;
}

.btn-premium-ms:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  transform: translateY(-1.5px);
  box-shadow: 0 6px 12px rgba(217, 119, 6, 0.22);
  animation: none;
}

.btn-premium-ms:active {
  transform: translateY(2px) !important;
  border-bottom-width: 1px !important;
  box-shadow: 0 1px 2px rgba(217, 119, 6, 0.1) !important;
  animation: none;
}

/* Premium Queue styling */

.premium-in-queue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: var(--font-heading);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: #f1f5f9;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  padding: 9px 14px;
  box-sizing: border-box;
  font-style: italic;
}

/* Premium 3D Header Bar for Board Papers Directory */

.board-papers-header-3d {
  background: linear-gradient(135deg, #1c325c 0%, #0f2042 100%); /* Premium GMAT Navy gradient */
  color: #ffffff;
  padding: 12px 18px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.94rem;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  border-bottom: 3.5px solid var(--accent-orange); /* Thick 3D orange bottom border */
  box-shadow: 0 4px 10px -2px rgba(15, 32, 66, 0.15);
  margin-bottom: 16px;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .board-papers-header-3d {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
  }
  .board-papers-header-3d > div {
    width: 100%;
  }
  .board-papers-header-3d select {
    width: 100%;
  }
}

/* ==========================================================================
   PREMIUM ANIMATED 3D FINAL CONCLUSION CARD
   ========================================================================== */

.final-conclusion-card-3d {
  position: relative;
  background:
    repeating-linear-gradient(
      transparent,
      transparent 32px,
      rgba(37, 99, 235, 0.045) 32px,
      rgba(37, 99, 235, 0.045) 33px
    ),
    linear-gradient(135deg, #fefdf8 0%, #f0f7ff 100%);
  border-left: 5px solid #1e40af;
  border-top: 1px solid #dbeafe;
  border-right: 1px solid #dbeafe;
  border-bottom: 4px solid #bfdbfe;
  border-radius: 10px;
  padding: 22px 22px 22px 28px;
  margin-top: 24px;
  box-shadow:
    0 10px 25px -5px rgba(15, 32, 66, 0.1),
    0 4px 6px -2px rgba(15, 32, 66, 0.06),
    inset 2px 0 0 rgba(37, 99, 235, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  animation: slide-up-fade-conclusion 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.final-conclusion-card-3d::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: translateX(-100%);
  transition: transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}

.final-conclusion-card-3d:hover {
  transform: translateY(-2px);
  border-bottom-width: 6px;
  box-shadow: 0 12px 30px -5px rgba(15, 32, 66, 0.12), 0 10px 14px -6px rgba(15, 32, 66, 0.12);
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
  border-left-color: #10b981;
}

.final-conclusion-card-3d:hover::before {
  transform: translateX(100%);
}

.final-conclusion-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.final-conclusion-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08);
  transition: background-color 0.3s, color 0.3s;
}

.final-conclusion-card-3d:hover .final-conclusion-icon-wrapper {
  background-color: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.final-conclusion-title {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #047857;
}

.final-conclusion-body {
  font-family: var(--font-cursive);
  font-size: 1.15rem;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.65;
  letter-spacing: 0.01em;
}

.assignment-answer-card {
  background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
  border-left: 4px solid #2563eb;
  border-radius: 8px;
  padding: 14px 16px;
}

.assignment-answer-title {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1d4ed8;
  margin-bottom: 8px;
}

.assignment-answer-body {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.75;
  text-align: justify;
}

/* Global answer emphasis — applied via formatMath() across all subjects */

.answer-key-label {
  color: #1d4ed8;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: #93c5fd;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.answer-key-term {
  color: #047857;
  font-weight: 700;
  border-bottom: 2px solid #6ee7b7;
  padding-bottom: 1px;
}

.answer-key-result {
  color: #b45309;
  font-weight: 700;
  background: linear-gradient(transparent 62%, rgba(251, 191, 36, 0.35) 0);
  padding: 0 2px;
}

@keyframes slide-up-fade-conclusion {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-bounce-slow {
  animation: bounce-slow 2s infinite;
}

@keyframes bounce-slow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

/* ---- Footer & Disclaimer ---- */

.footer-container {
  background: var(--bg-navy, #0f2042);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 40px 24px;
  color: #94a3b8;
  margin-top: 80px;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.footer-copyright {
  font-size: 0.85rem;
  font-weight: 600;
  color: #cbd5e1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 16px;
}

.footer-disclaimer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.disclaimer-title {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-orange, #f25c05);
}

.disclaimer-text {
  font-size: 0.72rem;
  line-height: 1.6;
  color: #64748b;
  text-align: justify;
}

/* Light theme support */

.light-theme .footer-container {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  color: #475569;
}

.light-theme .footer-copyright {
  color: #1e293b;
  border-bottom: 1px solid #e2e8f0;
}

.light-theme .disclaimer-text {
  color: #64748b;
}

/* ========================================
   Netflix-style Landing Page
   ======================================== */

/* Intro styles: src/styles/landing-intro.css */

.top-navbar--intro {
  opacity: 0 !important;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.6s ease 0.15s, transform 0.6s ease 0.15s;
}

.top-navbar--landing:not(.top-navbar--intro) {
  animation: landing-nav-in 0.7s ease forwards;
}

@keyframes landing-nav-in {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Homepage hidden during intro (content not mounted); styles kept for reduced-motion */

.landing-page--intro-active .landing-page__content {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.landing-page--enter .landing-page__content {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  visibility: visible;
  pointer-events: auto;
  animation: landing-content-reveal 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes landing-content-reveal {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

.landing-page--enter .landing-reveal {
  animation: landing-reveal-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.12s + var(--reveal-i, 0) * 0.08s);
}

.landing-page--enter .landing-reveal-row {
  animation: landing-reveal-up 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.28s + var(--row-i, 0) * 0.1s);
}

@keyframes landing-reveal-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .landing-page--intro-active .landing-page__content {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
    overflow: visible;
    opacity: 1;
    visibility: visible;
  }

  .landing-page--enter .landing-page__content,
  .landing-page--enter .landing-reveal,
  .landing-page--enter .landing-reveal-row,
  .top-navbar--landing {
    animation: none !important;
    transition: none !important;
  }
}

.app-container--landing {
  background: #0b1018;
}

.light-theme .app-container--landing,
.light-theme .app-container--landing .landing-page,
.light-theme .app-container--landing .main-content--landing {
  background: #0b1018 !important;
  color: #ffffff;
}

/* Intro: pure black — no hero navy backdrop bleeds through */

.app-container--intro-playing,
.app-container--intro-playing .main-content--landing,
.app-container--intro-playing .landing-page {
  background: #000000 !important;
}

.landing-page--intro-active {
  min-height: 100vh;
  background: #000000 !important;
}

.top-navbar--landing {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: 56px;
  padding: 0 var(--lp-gutter, clamp(16px, 2.5vw, 24px)) 0 10px;
  background: rgba(11, 16, 24, 0.92);
  border-bottom: 1px solid var(--lp-border, rgba(148, 163, 184, 0.14));
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(14px);
}

.top-navbar--landing .top-navbar-brand-text {
  font-size: 1rem;
}

.top-navbar--landing .top-navbar-brand-sub {
  color: rgba(255, 255, 255, 0.45);
}

.main-content--landing {
  padding: 0;
  max-width: none;
  margin: 0;
  overflow-x: hidden;
}

.landing-page {
  --lp-gutter: clamp(16px, 2.5vw, 24px);
  --lp-gap: clamp(20px, 2.8vw, 32px);
  --lp-max: 1160px;
  --landing-align-max: min(98vw, 1680px);
  --landing-align-gutter: clamp(8px, 1.5vw, 16px);
  --landing-ticker-width: min(34vw, 380px);
  --landing-hero-gap: 16px;
  --lp-bg: #0b1018;
  --lp-surface: #131a24;
  --lp-border: rgba(148, 163, 184, 0.14);
  --lp-muted: rgba(226, 232, 240, 0.62);
  background: var(--lp-bg);
  color: #ffffff;
  min-height: 100vh;
  overflow-x: hidden;
  padding-top: 56px;
}

.landing-shell {
  max-width: var(--lp-max);
  margin: 0 auto;
  padding: var(--lp-gap) var(--lp-gutter) var(--lp-gap);
  display: flex;
  flex-direction: column;
  gap: var(--lp-gap);
}

/* Shared wide shell — matches Circuit Simulator Workbench width */

.landing-wide-shell {
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  box-sizing: border-box;
}

.landing-hero--intro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(12px, 2vw, 24px) var(--landing-align-gutter);
  box-sizing: border-box;
}

@media (min-width: 900px) {
  .landing-hero--intro {
    padding: clamp(16px, 2vw, 28px) var(--landing-align-gutter);
  }
}

.landing-hero--intro .landing-hero__intro-shell,
.landing-hero--intro .landing-wide-shell.landing-hero__intro-shell {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}

.landing-hero__intro-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  padding: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 40px);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(20, 28, 48, 0.65) 0%, rgba(10, 15, 30, 0.85) 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.landing-hero__intro-box:hover {
  border-color: rgba(56, 189, 248, 0.2);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.3),
    0 0 24px rgba(56, 189, 248, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.landing-hero--intro .landing-hero__gradient {
  background: linear-gradient(180deg, rgba(11, 16, 24, 0.95) 0%, rgba(11, 16, 24, 0.8) 50%, rgba(11, 16, 24, 0.95) 100%);
}

.landing-hero--intro .landing-hero__left {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.landing-hero__showcase {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: clamp(10px, 1.8vw, 14px);
  width: 100%;
}

.landing-hero__showcase-item {
  flex: 1;
  min-width: 0;
  max-width: 148px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(126, 184, 232, 0.22);
  background: linear-gradient(155deg, rgba(15, 32, 66, 0.92) 0%, rgba(28, 50, 92, 0.62) 100%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.landing-hero__showcase-item:hover {
  transform: translateY(-4px);
  border-color: rgba(126, 184, 232, 0.42);
  box-shadow: 0 16px 36px rgba(15, 32, 66, 0.5);
}

.landing-hero__showcase-fig {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 400px;
}

.landing-hero__showcase-fig .landing-hero-3d {
  width: 92%;
  height: 92%;
  animation: landing-hero-3d-float 4.5s ease-in-out infinite;
}

.landing-hero__showcase-fig .landing-hero-3d__model {
  animation-duration: 6s;
}

.landing-hero__showcase-label {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 800;
  color: #f1f5f9;
  text-align: center;
  line-height: 1.2;
}

.landing-hero__showcase-sub {
  font-size: 0.62rem;
  font-weight: 500;
  color: rgba(159, 197, 232, 0.85);
  text-align: center;
  line-height: 1.25;
}

@media (max-width: 899px) {
  .landing-hero--intro .landing-hero__right {
    margin-top: 8px;
  }

  .landing-hero__showcase {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }

  .landing-hero__showcase-item {
    flex: 0 0 min(112px, 30vw);
    max-width: none;
    scroll-snap-align: start;
  }
}

/* Embedded simulator section — same width as periodic table below */

.landing-simulator {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: calc(100dvh - 56px);
  padding: clamp(12px, 2vw, 24px) var(--landing-align-gutter);
}

.landing-periodic {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0 clamp(8px, 1.5vw, 16px) clamp(28px, 4vw, 48px);
}

.landing-periodic .periodic-section--landing {
  width: min(98vw, 1680px);
  max-width: none;
  margin-inline: auto;
}

.landing-periodic .periodic-box {
  max-width: none;
  width: 100%;
  padding: clamp(14px, 2vw, 22px);
}

.landing-periodic .periodic-container {
  max-width: none;
  width: 100%;
  gap: clamp(16px, 2vw, 24px);
}

@media (min-width: 1100px) {
  .landing-periodic .periodic-container {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
    align-items: start;
  }
}

.landing-periodic .periodic-grid-wrap {
  overflow-x: visible;
  padding-bottom: 4px;
}

.landing-periodic .periodic-grid {
  width: 100%;
  min-width: 0;
  gap: clamp(2px, 0.35vw, 4px);
}

.landing-periodic .element-tile {
  padding: clamp(2px, 0.35vw, 4px) clamp(1px, 0.2vw, 3px);
}

.landing-periodic .element-tile__number {
  font-size: clamp(0.45rem, 0.55vw, 0.58rem);
}

.landing-periodic .element-tile__symbol {
  font-size: clamp(0.72rem, 0.95vw, 0.95rem);
}

.landing-periodic .element-tile__name {
  font-size: clamp(0.38rem, 0.45vw, 0.45rem);
}

.landing-periodic .element-inspector {
  padding: clamp(14px, 1.5vw, 20px);
}

@media (max-width: 1099px) {
  .landing-periodic .periodic-section--landing {
    width: 100%;
  }
}

/* Hero */

.landing-hero:not(.landing-hero--intro) {
  position: relative;
  min-height: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: center;
  padding: 16px var(--lp-gutter) 24px;
  margin-top: 0;
  max-width: var(--lp-max);
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .landing-hero:not(.landing-hero--intro) {
    grid-template-columns: 1.02fr 0.98fr;
    gap: 24px;
    padding: 20px var(--lp-gutter) 28px;
    align-items: stretch;
  }
}

.landing-hero__backdrop {
  position: absolute;
  inset: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  overflow: hidden;
  background: #0a0e1a;
}

.landing-hero__mesh {
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(ellipse 55% 45% at 18% 38%, rgba(242, 92, 5, 0.16) 0%, transparent 55%),
    radial-gradient(ellipse 45% 50% at 82% 22%, rgba(15, 32, 66, 0.55) 0%, transparent 52%);
  animation: landing-mesh-drift 18s ease-in-out infinite alternate;
}

.landing-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, transparent 85%);
}

@keyframes landing-mesh-drift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(3%, -2%) scale(1.05); }
}

.landing-hero__gradient {
  position: absolute;
  inset: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background:
    linear-gradient(90deg, rgba(11, 16, 24, 0.97) 0%, rgba(11, 16, 24, 0.55) 50%, transparent 80%),
    linear-gradient(0deg, var(--lp-bg) 0%, transparent 42%);
  pointer-events: none;
}

.landing-hero__left {
  position: relative;
  z-index: 2;
  max-width: 560px;
  text-align: left;
}

.landing-hero__right {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.landing-hero__eyebrow {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-orange);
  margin-bottom: 8px;
}

.visitor-stats-bar {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(242, 92, 5, 0.28);
  background: rgba(15, 32, 66, 0.55);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  backdrop-filter: blur(8px);
}

.visitor-stats-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.visitor-stats-bar__divider {
  opacity: 0.55;
  font-weight: 400;
}

.visitor-stats-bar__item--daily {
  color: rgba(255, 255, 255, 0.72);
}

.visitor-stats-bar__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-orange);
  box-shadow: 0 0 0 0 rgba(242, 92, 5, 0.55);
  animation: online-pulse 1.8s ease-out infinite;
}

@keyframes online-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(242, 92, 5, 0.55);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(242, 92, 5, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(242, 92, 5, 0);
  }
}

.landing-hero__headline {
  font-family: var(--font-heading);
  font-size: clamp(1.85rem, 4.2vw, 2.75rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}

.landing-hero__headline-accent {
  display: block;
  background: linear-gradient(135deg, #ffffff 0%, #fdba74 55%, var(--accent-orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.landing-hero__subtext {
  font-size: clamp(0.88rem, 1.8vw, 1rem);
  line-height: 1.55;
  color: var(--lp-muted);
  margin-bottom: 0;
  max-width: 640px;
}

.landing-hero__intro-box .landing-hero__subtext {
  max-width: 720px;
}

.landing-hero__ctas {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  gap: 12px;
  margin-bottom: 20px;
  width: 100%;
  padding: 4px 16px;
  justify-content: flex-start;
}

.landing-hero__ctas::-webkit-scrollbar {
  display: none;
}

@media (min-width: 768px) {
  .landing-hero__ctas {
    justify-content: center;
    padding: 4px 0;
  }
}

.landing-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-family: var(--font-heading);
  font-size: 0.86rem;
  font-weight: 800;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  user-select: none;
}

.landing-cta--primary {
  background: linear-gradient(180deg, #ff6b1a 0%, var(--accent-orange) 50%, #d14d02 100%);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(242, 92, 5, 0.4);
}

.landing-cta--primary:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 24px rgba(242, 92, 5, 0.55);
}

.landing-cta--secondary {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
}

.landing-cta--secondary:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: scale(1.03);
}

.landing-cta--ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.landing-cta--ghost:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.06);
}

.landing-hero__dashboard {
  width: 100%;
  max-width: var(--lp-max);
  padding: 0 var(--lp-gutter);
  margin: 32px auto 0;
  box-sizing: border-box;
}

.landing-hero__dash-card--unified {
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: linear-gradient(180deg, rgba(20, 28, 48, 0.65) 0%, rgba(10, 15, 30, 0.85) 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 24px 32px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
  text-align: left;
}

.landing-hero__dash-card--unified:hover {
  transform: translateY(-2px);
  border-color: rgba(56, 189, 248, 0.25);
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(56, 189, 248, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@media (min-width: 900px) {
  .landing-hero__dash-card--unified {
    flex-direction: row;
    align-items: center;
    gap: 36px;
  }
}

.landing-hero__dash-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.landing-hero__dash-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08) 50%, transparent);
}

@media (min-width: 900px) {
  .landing-hero__dash-divider {
    width: 1px;
    height: 64px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.08) 50%, transparent);
  }
}

.landing-hero__dash-card-header {
  margin-bottom: 12px;
}

.landing-hero__dash-card-tag {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}

.landing-hero__dash-card-tag--orange {
  color: #f97316;
}

.landing-hero__dash-card-tag--blue {
  color: #38bdf8;
}

.landing-hero__dash-card-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: #f1f5f9;
  margin: 0;
}

.landing-hero__dash-card-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

@media (min-width: 600px) {
  .landing-hero__dash-card-content {
    flex-wrap: nowrap;
  }
}

.landing-quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  color: #94a3b8;
  background: rgba(30, 41, 59, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  user-select: none;
}

.landing-quick-btn:hover {
  color: #ffffff;
  background: rgba(51, 65, 85, 0.6);
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.2);
  transform: translateY(-1px);
}

.landing-quick-btn:active {
  transform: translateY(1px);
}

/* Content rows */

.landing-rows {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0;
}

.content-row {
  margin-bottom: 0;
  padding-left: 0;
}

.landing-shell .content-row__title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  color: #f1f5f9;
  margin-bottom: 8px;
  padding-right: 0;
  letter-spacing: -0.01em;
}

.landing-shell .content-row__track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
  overflow-x: visible;
  scroll-snap-type: none;
  scroll-padding-left: 0;
  padding: 0;
}

.landing-shell .content-row__card {
  width: 100%;
  min-height: 158px;
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.landing-shell .content-row__card:hover {
  transform: translateY(-3px);
}

.landing-shell .content-row__card-body {
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
  padding: 0 14px 12px;
  margin-top: auto;
  z-index: 3;
}

.landing-shell .content-row__card-arrow {
  top: auto;
  bottom: 12px;
  z-index: 3;
}

.landing-shell .content-row__card-title {
  font-size: 0.92rem;
  margin-bottom: 2px;
}

.landing-shell .content-row__card-sub {
  font-size: 0.68rem;
}

.content-row__title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: #e5e5e5;
  margin-bottom: 14px;
  padding-right: 4vw;
  letter-spacing: -0.01em;
}

.content-row__track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 4vw;
  padding: 4px 4vw 12px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.6) transparent;
}

.content-row__track::-webkit-scrollbar {
  height: 8px;
}

.content-row__track::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 4px;
}

.content-row__card {
  position: relative;
  flex: 0 0 auto;
  width: clamp(200px, 22vw, 280px);
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(242, 92, 5, 0.18);
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  scroll-snap-align: start;
  text-align: left;
  color: #ffffff;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.content-row__card--link {
  text-decoration: none;
  display: block;
}

.content-row__card:hover {
  transform: scale(1.05);
  border-color: rgba(242, 92, 5, 0.42);
  box-shadow: 0 16px 40px rgba(15, 32, 66, 0.55);
  z-index: 2;
}

.content-row__card-shine {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, transparent 50%);
  pointer-events: none;
}

.content-row__card-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(7, 12, 24, 0.95) 0%,
    rgba(7, 12, 24, 0.55) 38%,
    rgba(7, 12, 24, 0.08) 62%,
    transparent 78%
  );
  pointer-events: none;
  z-index: 2;
}

/* 3D hero figure fills the blue card area */

.content-row__card-hero-3d {
  position: absolute;
  inset: 0 0 30% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.content-row__card-3d-stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 520px;
  transform-style: preserve-3d;
}

.content-row__card-3d-stage .landing-hero-3d {
  width: clamp(96px, 88%, 118px);
  height: clamp(96px, 88%, 118px);
  animation: landing-hero-3d-float 4.5s ease-in-out infinite;
}

.content-row__card:hover .content-row__card-3d-stage .landing-hero-3d {
  animation-duration: 3s;
}

.landing-hero-3d__model {
  transform-origin: 60px 60px;
  transform-box: fill-box;
  animation: landing-hero-3d-tumble 7s ease-in-out infinite;
}

.content-row__card:hover .landing-hero-3d__model {
  animation-duration: 4.5s;
}

@keyframes landing-hero-3d-float {
  0%, 100% { transform: translateY(2px) scale(1); }
  50% { transform: translateY(-6px) scale(1.04); }
}

@keyframes landing-hero-3d-tumble {
  0%, 100% { transform: rotateY(-16deg) rotateX(10deg); }
  50% { transform: rotateY(16deg) rotateX(14deg); }
}

/* Per-figure 3D animations */

.landing-hero-3d__cube { animation: landing-hero-3d-cube-spin 8s ease-in-out infinite; transform-origin: 60px 58px; }

.landing-hero-3d__math-curve {
  stroke-dasharray: 140;
  animation: landing-hero-3d-math-draw 3.5s ease-in-out infinite alternate;
}

.landing-hero-3d__math-area { animation: landing-hero-3d-pulse 3s ease-in-out infinite; }

.landing-hero-3d {
  color: var(--hero3d-light, #9fc5e8);
}

.landing-hero-3d__math-point { filter: drop-shadow(0 0 5px rgba(126, 184, 232, 0.85)); }

.landing-hero-3d__math-integral { animation: landing-hero-3d-symbol 2.8s ease-in-out infinite; }

.landing-hero-3d__math-formula { animation: landing-hero-3d-symbol 2.8s ease-in-out 0.4s infinite; }

.landing-hero-3d__math-triangle { animation: landing-hero-3d-float-subtle 4s ease-in-out infinite; transform-origin: 86px 68px; }

.landing-hero-3d__ring--1 { animation: landing-hero-3d-orbit 3.5s linear infinite; transform-origin: 60px 58px; }

.landing-hero-3d__ring--2 { animation: landing-hero-3d-orbit-rev 4.5s linear infinite; transform-origin: 60px 58px; }

.landing-hero-3d__ring--3 { animation: landing-hero-3d-orbit 5.5s linear infinite; transform-origin: 60px 58px; }

.landing-hero-3d__nucleus { animation: landing-hero-3d-pulse 2.2s ease-in-out infinite; }

.landing-hero-3d__electron--1 { animation: landing-hero-3d-electron 3.5s ease-in-out infinite; }

.landing-hero-3d__electron--2 { animation: landing-hero-3d-electron 4s ease-in-out 0.4s infinite; }

.landing-hero-3d__electron--3 { animation: landing-hero-3d-electron 3.2s ease-in-out 0.8s infinite; }

.landing-hero-3d__bolt { animation: landing-hero-3d-bolt 1.6s ease-in-out infinite; }

.landing-hero-3d__liquid { animation: landing-hero-3d-wave 2.5s ease-in-out infinite; }

.landing-hero-3d__bubble--1 { animation: landing-hero-3d-bubble 2s ease-in-out infinite; }

.landing-hero-3d__bubble--2 { animation: landing-hero-3d-bubble 2.3s ease-in-out 0.3s infinite; }

.landing-hero-3d__bubble--3 { animation: landing-hero-3d-bubble 2.1s ease-in-out 0.6s infinite; }

.landing-hero-3d__helix--a { animation: landing-hero-3d-helix 3s ease-in-out infinite; }

.landing-hero-3d__helix--b { animation: landing-hero-3d-helix 3s ease-in-out 0.5s infinite reverse; }

.landing-hero-3d__check { stroke-dasharray: 40; animation: landing-hero-3d-draw 2.8s ease-in-out infinite alternate; }

.landing-hero-3d__bulb { animation: landing-hero-3d-glow 1.8s ease-in-out infinite; }

.landing-hero-3d__current { animation: landing-hero-3d-flow 1.1s linear infinite; }

.landing-hero-3d__current--loop { animation: landing-hero-3d-flow-loop 1.4s linear infinite; }

.landing-hero-3d__electron-flow { filter: drop-shadow(0 0 5px rgba(126, 184, 232, 0.85)); }

.landing-hero-3d__bulb-glow { animation: landing-hero-3d-glow 1.5s ease-in-out infinite; }

.landing-hero-3d__battery { animation: landing-hero-3d-pulse 3s ease-in-out infinite; }

.landing-hero-3d__bar--1 { animation: landing-hero-3d-bar 2.2s ease-in-out infinite; transform-origin: bottom center; }

.landing-hero-3d__bar--2 { animation: landing-hero-3d-bar 2.2s ease-in-out 0.2s infinite; transform-origin: bottom center; }

.landing-hero-3d__bar--3 { animation: landing-hero-3d-bar 2.2s ease-in-out 0.4s infinite; transform-origin: bottom center; }

.landing-hero-3d__dice { animation: landing-hero-3d-dice 3s ease-in-out infinite; transform-origin: 92px 32px; }

.landing-hero-3d__card-front { animation: landing-hero-3d-card 3.2s ease-in-out infinite; transform-origin: 67px 50px; }

.landing-hero-3d__symbol--1 { animation: landing-hero-3d-symbol 2.6s ease-in-out infinite; }

.landing-hero-3d__symbol--2 { animation: landing-hero-3d-symbol 2.6s ease-in-out 0.3s infinite; }

.landing-hero-3d__symbol--3 { animation: landing-hero-3d-symbol 2.6s ease-in-out 0.6s infinite; }

.landing-hero-3d__hand--hour { transform-origin: 60px 62px; animation: landing-hero-3d-hour 8s linear infinite; }

.landing-hero-3d__hand--minute { transform-origin: 60px 62px; animation: landing-hero-3d-minute 4s linear infinite; }

.landing-hero-3d__page { animation: landing-hero-3d-page 3s ease-in-out infinite; transform-origin: 81px 62px; }

.landing-hero-3d__tassel { transform-origin: 60px 64px; animation: landing-hero-3d-tassel 2.5s ease-in-out infinite; }

.landing-hero-3d__tassel-tip { animation: landing-hero-3d-pulse 2.5s ease-in-out infinite; }

.landing-hero-3d__glyph { animation: landing-hero-3d-pulse 2s ease-in-out infinite; }

@keyframes landing-hero-3d-math-draw {
  from { stroke-dashoffset: 140; opacity: 0.65; }
  to { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes landing-hero-3d-float-subtle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes landing-hero-3d-cube-spin {
  0%, 100% { transform: rotateY(0deg) rotateX(6deg); }
  50% { transform: rotateY(18deg) rotateX(12deg); }
}

@keyframes landing-hero-3d-orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes landing-hero-3d-orbit-rev {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes landing-hero-3d-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.06); }
}

@keyframes landing-hero-3d-electron {
  0%, 100% { opacity: 0.7; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.15); }
}

@keyframes landing-hero-3d-bolt {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); opacity: 1; }
  50% { filter: drop-shadow(0 0 10px rgba(126, 184, 232, 0.85)); opacity: 0.88; }
}

@keyframes landing-hero-3d-wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes landing-hero-3d-bubble {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(-4px); opacity: 1; }
}

@keyframes landing-hero-3d-helix {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(2px); }
}

@keyframes landing-hero-3d-draw {
  from { stroke-dashoffset: 40; }
  to { stroke-dashoffset: 0; }
}

@keyframes landing-hero-3d-glow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(126, 184, 232, 0.35)); }
  50% { filter: drop-shadow(0 0 12px rgba(159, 197, 232, 0.9)); }
}

@keyframes landing-hero-3d-flow {
  from { stroke-dashoffset: 14; }
  to { stroke-dashoffset: 0; }
}

@keyframes landing-hero-3d-flow-loop {
  from { stroke-dashoffset: 56; }
  to { stroke-dashoffset: 0; }
}

@keyframes landing-hero-3d-bar {
  0%, 100% { transform: scaleY(0.82); }
  50% { transform: scaleY(1); }
}

@keyframes landing-hero-3d-dice {
  0%, 100% { transform: rotate(8deg) translateY(0); }
  50% { transform: rotate(-6deg) translateY(-3px); }
}

@keyframes landing-hero-3d-card {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-3px) rotate(-3deg); }
}

@keyframes landing-hero-3d-symbol {
  0%, 100% { transform: translateY(0); opacity: 0.85; }
  50% { transform: translateY(-4px); opacity: 1; }
}

@keyframes landing-hero-3d-hour {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes landing-hero-3d-minute {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes landing-hero-3d-page {
  0%, 100% { transform: skewY(0deg); }
  50% { transform: skewY(-5deg); }
}

@keyframes landing-hero-3d-tassel {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(10deg); }
}

.feature-card__hero-3d {
  width: 40px !important;
  height: 40px !important;
}

.feature-card__icon-wrap .landing-hero-3d__model {
  animation-duration: 5s;
}

@media (prefers-reduced-motion: reduce) {
  .landing-hero-3d,
  .landing-hero-3d *,
  .content-row__card-3d-stage .landing-hero-3d {
    animation: none !important;
  }
}

/* — Animated landing card figures — */

@keyframes landing-fig-orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes landing-fig-orbit-rev {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes landing-fig-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.65; transform: scale(1.08); }
}

@keyframes landing-fig-bolt {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 0 transparent); }
  40% { opacity: 0.75; filter: drop-shadow(0 0 4px rgba(242, 92, 5, 0.8)); }
  70% { opacity: 1; filter: drop-shadow(0 0 8px rgba(242, 92, 5, 0.5)); }
}

@keyframes landing-fig-bubble-rise {
  0%, 100% { transform: translateY(0); opacity: 0.35; }
  50% { transform: translateY(-2px); opacity: 1; }
}

@keyframes landing-fig-liquid-wave {
  0%, 100% { d: path("M8.5 14c1.2 1.8 2.4 2.6 3.5 2.6s2.3-.8 3.5-2.6"); }
  50% { transform: translateY(-0.5px); }
}

@keyframes landing-fig-dna-shift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(0.6px); }
}

@keyframes landing-fig-check-draw {
  0% { stroke-dashoffset: 12; opacity: 0.4; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes landing-fig-current-flow {
  from { stroke-dashoffset: 10; }
  to { stroke-dashoffset: 0; }
}

@keyframes landing-fig-bar-grow {
  0%, 100% { transform: scaleY(0.82); transform-origin: bottom center; }
  50% { transform: scaleY(1); transform-origin: bottom center; }
}

@keyframes landing-fig-card-fan {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-1px) rotate(-2deg); }
}

@keyframes landing-fig-symbol-float {
  0%, 100% { transform: translateY(0); opacity: 0.75; }
  50% { transform: translateY(-1.5px); opacity: 1; }
}

@keyframes landing-fig-hand-tick {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes landing-fig-page-flip {
  0%, 100% { transform: skewY(0deg); }
  50% { transform: skewY(-4deg); }
}

@keyframes landing-fig-tassel-sway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(8deg); }
}

@keyframes landing-fig-glyph-blink {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

@keyframes landing-fig-watermark-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.03); }
}

@keyframes landing-fig-bulb-glow {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; filter: drop-shadow(0 0 3px rgba(242, 92, 5, 0.6)); }
}

.landing-card-fig__orbit {
  transform-origin: 12px 12px;
  transform-box: fill-box;
}

.landing-card-fig__orbit--1 { animation: landing-fig-orbit 4s linear infinite; }

.landing-card-fig__orbit--2 { animation: landing-fig-orbit-rev 5.5s linear infinite; }

.landing-card-fig__orbit--3 { animation: landing-fig-orbit 6.5s linear infinite; }

.landing-card-fig__atom-core { animation: landing-fig-pulse 2.2s ease-in-out infinite; }

.landing-card-fig__bolt { animation: landing-fig-bolt 1.8s ease-in-out infinite; }

.landing-card-fig__bolt-glow { animation: landing-fig-bolt 1.8s ease-in-out infinite; }

.landing-card-fig__bubble--1 { animation: landing-fig-bubble-rise 2s ease-in-out infinite; }

.landing-card-fig__bubble--2 { animation: landing-fig-bubble-rise 2.4s ease-in-out 0.3s infinite; }

.landing-card-fig__bubble--3 { animation: landing-fig-bubble-rise 2.1s ease-in-out 0.6s infinite; }

.landing-card-fig__liquid { animation: landing-fig-liquid-wave 2.5s ease-in-out infinite; }

.landing-card-fig__dna-strand--a { animation: landing-fig-dna-shift 2.8s ease-in-out infinite; }

.landing-card-fig__dna-strand--b { animation: landing-fig-dna-shift 2.8s ease-in-out 0.4s infinite reverse; }

.landing-card-fig__dna-rung--1 { animation: landing-fig-pulse 2s ease-in-out infinite; }

.landing-card-fig__dna-rung--2 { animation: landing-fig-pulse 2s ease-in-out 0.25s infinite; }

.landing-card-fig__dna-rung--3 { animation: landing-fig-pulse 2s ease-in-out 0.5s infinite; }

.landing-card-fig__check {
  stroke-dasharray: 12;
  animation: landing-fig-check-draw 2.5s ease-in-out infinite alternate;
}

.landing-card-fig__current {
  animation: landing-fig-current-flow 1.2s linear infinite;
}

.landing-card-fig__bulb { animation: landing-fig-bulb-glow 1.6s ease-in-out infinite; }

.landing-card-fig__bar--1 { animation: landing-fig-bar-grow 2.2s ease-in-out infinite; }

.landing-card-fig__bar--2 { animation: landing-fig-bar-grow 2.2s ease-in-out 0.2s infinite; }

.landing-card-fig__bar--3 { animation: landing-fig-bar-grow 2.2s ease-in-out 0.4s infinite; }

.landing-card-fig__die { animation: landing-fig-pulse 2.5s ease-in-out infinite; }

.landing-card-fig__card--front { animation: landing-fig-card-fan 3s ease-in-out infinite; }

.landing-card-fig__card--mid { animation: landing-fig-card-fan 3s ease-in-out 0.15s infinite; }

.landing-card-fig__card--back { animation: landing-fig-card-fan 3s ease-in-out 0.3s infinite; }

.landing-card-fig__symbol--1 { animation: landing-fig-symbol-float 2.4s ease-in-out infinite; }

.landing-card-fig__symbol--2 { animation: landing-fig-symbol-float 2.4s ease-in-out 0.3s infinite; }

.landing-card-fig__symbol--3 { animation: landing-fig-symbol-float 2.4s ease-in-out 0.6s infinite; }

.landing-card-fig__formula-line { animation: landing-fig-current-flow 2s linear infinite; }

.landing-card-fig__hand--hour {
  transform-origin: 12px 13px;
  transform-box: fill-box;
  animation: landing-fig-hand-tick 8s linear infinite;
}

.landing-card-fig__hand--minute {
  transform-origin: 12px 13px;
  transform-box: fill-box;
  animation: landing-fig-hand-tick 4s linear infinite;
}

.landing-card-fig__page--right {
  transform-origin: 15px 13px;
  animation: landing-fig-page-flip 3s ease-in-out infinite;
}

.landing-card-fig__tassel {
  transform-origin: 12px 12px;
  animation: landing-fig-tassel-sway 2.5s ease-in-out infinite;
}

.landing-card-fig__tassel-tip { animation: landing-fig-pulse 2.5s ease-in-out infinite; }

.landing-card-fig__glyph--a { animation: landing-fig-glyph-blink 2s ease-in-out infinite; }

.landing-card-fig__glyph--b { animation: landing-fig-glyph-blink 2s ease-in-out 0.35s infinite; }

.landing-card-fig__glyph--c { animation: landing-fig-glyph-blink 2s ease-in-out 0.7s infinite; }

.landing-card-fig__paper-line { animation: landing-fig-pulse 2.8s ease-in-out infinite; }

.content-row__card:hover .landing-card-fig__orbit--1,
.content-row__card:hover .landing-card-fig__orbit--2,
.content-row__card:hover .landing-card-fig__orbit--3 {
  animation-duration: 2.5s;
}

@media (prefers-reduced-motion: reduce) {
  .landing-card-fig *,
  .content-row__card-watermark.landing-card-fig {
    animation: none !important;
  }
}

.content-row__card-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 16px;
  z-index: 2;
}

.content-row__card-title {
  display: block;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 4px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.content-row__card-title--sm {
  font-size: 0.82rem;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.content-row__card-sub {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.35;
}

.content-row__card-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(242, 92, 5, 0.22);
  border: 1px solid rgba(242, 92, 5, 0.35);
  padding: 2px 7px;
  border-radius: 999px;
  margin-bottom: 6px;
}

.content-row__card-arrow {
  position: absolute;
  top: 12px;
  right: 12px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 1;
}

.content-row__card:hover .content-row__card-arrow {
  opacity: 0.85;
  transform: translateX(0);
}

/* Landing footer polish */

.app-container--landing .footer-container {
  background: #0a0a0a;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.app-container--landing .footer-copyright {
  color: rgba(255, 255, 255, 0.5);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.app-container--landing .disclaimer-text {
  color: rgba(255, 255, 255, 0.35);
}

/* Mobile */

@media (max-width: 768px) {
  .landing-hero:not(.landing-hero--intro) {
    min-height: auto;
    padding: 12px var(--lp-gutter) 20px;
    align-items: flex-start;
    text-align: left;
  }

  .landing-hero--intro {
    padding: 10px 12px 20px;
  }

  .landing-hero__left {
    max-width: 100%;
  }

  .landing-hero__right {
    width: 100%;
    margin-top: 4px;
  }

  .landing-shell .content-row__track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .landing-shell .content-row__card {
    min-height: 96px;
  }

  .features-section--compact .features-grid {
    grid-template-columns: 1fr;
  }

  .periodic-section--landing .periodic-section__header {
    flex-direction: column;
    align-items: stretch;
  }

  .periodic-section__toggle {
    justify-content: center;
  }

  .landing-hero__subtext {
    margin-left: 0;
    margin-right: 0;
  }

  .landing-hero__ctas {
    justify-content: flex-start;
  }

  .landing-hero__quick-links {
    justify-content: flex-start;
  }

  .top-navbar--landing .top-navbar-brand-text span:first-child {
    font-size: 0.82rem;
  }

  .content-row {
    padding-left: 5vw;
  }

  .content-row__track {
    scroll-padding-left: 5vw;
    padding-right: 5vw;
  }

  .content-row__card {
    width: 72vw;
    max-width: 260px;
  }
}

/* Product Terminal Showcase Styling */

.product-terminal {
  width: 100%;
  max-width: 480px;
  background: rgba(19, 26, 36, 0.88);
  border: 1px solid var(--lp-border, rgba(148, 163, 184, 0.14));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 12px;
  box-shadow: 
    0 16px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 1px rgba(255, 255, 255, 0.06);
  color: #ffffff;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  text-align: left;
}

.landing-hero__right .product-terminal__body {
  padding: 12px 14px;
}

.landing-hero__right .product-terminal__tabs {
  gap: 4px;
  padding: 0 10px;
}

.landing-hero__right .product-terminal__tab {
  padding: 6px 8px;
  font-size: 0.62rem;
}

.product-terminal:hover {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 
    0 32px 70px rgba(0, 0, 0, 0.7),
    inset 0 1px 1px rgba(255, 255, 255, 0.12);
}

/* Maximize Button in Header */

.product-terminal__maximize-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.product-terminal__maximize-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

/* Embedded simulator on landing page — match periodic table width */

.product-terminal--embedded-full {
  width: var(--landing-align-max);
  max-width: none;
  min-height: calc((100dvh - 56px) * 0.75);
  border-radius: 12px;
  background: #070a13;
  display: flex;
  flex-direction: column;
  margin-inline: auto;
}

@media (max-width: 1099px) {
  .product-terminal--embedded-full {
    width: 100%;
  }
}

.product-terminal--embedded-full.product-terminal--calc-active,
.product-terminal--embedded-full.product-terminal--maths-active,
.product-terminal--embedded-full.product-terminal--physics-laws-active {
  min-height: calc(100dvh - 56px);
}

.product-terminal--embedded-full:hover {
  border-color: var(--lp-border, rgba(148, 163, 184, 0.14));
  box-shadow: none;
}

.product-terminal--embedded-full .product-terminal__body,
.product-terminal--fullscreen .product-terminal__body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: clamp(12px, 2vw, 24px);
  display: flex;
  flex-direction: column;
}

.product-terminal--embedded-full .tab-pane--physics,
.product-terminal--fullscreen .tab-pane--physics {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.product-terminal--embedded-full .tab-pane--split,
.product-terminal--fullscreen .tab-pane--split {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: stretch;
}

.product-terminal--embedded-full .tab-pane--split .tab-pane__visualization,
.product-terminal--fullscreen .tab-pane--split .tab-pane__visualization {
  height: 100%;
  min-height: 0;
  padding: clamp(8px, 1.5vw, 16px);
}

.product-terminal--embedded-full .tab-pane--split .tab-pane__svg,
.product-terminal--fullscreen .tab-pane--split .tab-pane__svg {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
}

.product-terminal--embedded-full .tab-pane--split .tab-pane__dashboard,
.product-terminal--fullscreen .tab-pane--split .tab-pane__dashboard {
  max-height: none;
  height: 100%;
  overflow-y: auto;
}

/* Fullscreen Mode Styling */

.product-terminal--fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100dvh !important;
  z-index: 9999;
  border-radius: 0 !important;
  border: none !important;
  background: #070a13 !important;
  display: flex;
  flex-direction: column;
}

/* Two-column layout in fullscreen on desktop screens */

@media (min-width: 768px) {
  .product-terminal--embedded-full .tab-pane:not(.tab-pane--physics),
  .product-terminal--fullscreen .tab-pane:not(.tab-pane--physics) {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 32px;
    height: 100%;
    align-items: start;
  }

  .product-terminal--embedded-full .tab-pane--calculator,
  .product-terminal--embedded-full .tab-pane--maths,
  .product-terminal--embedded-full .tab-pane--physics-laws,
  .product-terminal--fullscreen .tab-pane--calculator,
  .product-terminal--fullscreen .tab-pane--maths,
  .product-terminal--fullscreen .tab-pane--physics-laws {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-height: calc(100dvh - 220px);
  }

  .product-terminal--embedded-full .tab-pane__visualization {
    height: calc((100dvh - 150px) * 0.75);
    max-height: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .product-terminal--fullscreen .tab-pane__visualization {
    height: calc(100dvh - 150px);
    max-height: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .product-terminal--embedded-full .tab-pane__visualization svg,
  .product-terminal--fullscreen .tab-pane__visualization svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
  }

  .product-terminal--embedded-full .tab-pane__dashboard {
    max-height: calc((100dvh - 150px) * 0.75);
    overflow-y: auto;
    padding-right: 8px;
  }

  .product-terminal--embedded-full .tab-pane--calculator .tab-pane__dashboard,
  .product-terminal--embedded-full .tab-pane--maths .tab-pane__dashboard,
  .product-terminal--embedded-full .tab-pane--physics-laws .tab-pane__dashboard,
  .product-terminal--embedded-full.product-terminal--calc-active .tab-pane__dashboard,
  .product-terminal--embedded-full.product-terminal--maths-active .tab-pane__dashboard,
  .product-terminal--embedded-full.product-terminal--physics-laws-active .tab-pane__dashboard {
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
  }

  .product-terminal--fullscreen .tab-pane__dashboard {
    max-height: calc(100dvh - 150px);
    overflow-y: auto;
    padding-right: 8px;
  }

  .product-terminal--fullscreen .tab-pane--calculator .tab-pane__dashboard,
  .product-terminal--fullscreen .tab-pane--maths .tab-pane__dashboard,
  .product-terminal--fullscreen .tab-pane--physics-laws .tab-pane__dashboard,
  .product-terminal--fullscreen.product-terminal--calc-active .tab-pane__dashboard,
  .product-terminal--fullscreen.product-terminal--maths-active .tab-pane__dashboard,
  .product-terminal--fullscreen.product-terminal--physics-laws-active .tab-pane__dashboard {
    max-height: none;
    overflow-y: visible;
    padding-right: 0;
  }
  
  .product-terminal--fullscreen .tab-pane__dashboard::-webkit-scrollbar {
    width: 6px;
  }
  
  .product-terminal--fullscreen .tab-pane__dashboard::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
  }

  .product-terminal--fullscreen .tab-pane__dashboard::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
  }
}

@media (max-width: 767px) {
  .product-terminal--embedded-full .tab-pane--split,
  .product-terminal--fullscreen .tab-pane--split,
  .product-terminal--embedded-full .tab-pane--physics-laws.tab-pane--split,
  .product-terminal--fullscreen .tab-pane--physics-laws.tab-pane--split {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(200px, 1fr) auto;
  }

  .product-terminal--embedded-full {
    min-height: min(calc(85dvh * 0.75), 540px);
  }

  .product-terminal--embedded-full.product-terminal--calc-active,
  .product-terminal--embedded-full.product-terminal--maths-active,
  .product-terminal--embedded-full.product-terminal--physics-laws-active {
    min-height: min(92dvh, 720px);
  }

  .product-terminal--embedded-full .tab-pane--calculator .tab-pane__dashboard,
  .product-terminal--embedded-full .tab-pane--maths .tab-pane__dashboard,
  .product-terminal--embedded-full .tab-pane--physics-laws .tab-pane__dashboard {
    max-height: none;
    overflow-y: visible;
  }

  .product-terminal__tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .product-terminal__tabs::-webkit-scrollbar {
    display: none;
  }

  .product-terminal__tab {
    flex: 0 0 auto;
    min-width: max-content;
    padding: 10px 12px;
    font-size: 0.62rem;
  }

  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .tab-pane__classic-monitor-wrapper {
    padding: 8px 8px 36px 8px !important;
    perspective: none;
  }

  .tab-pane__classic-monitor-bezel {
    border-width: 8px;
    border-bottom-width: 18px !important;
    border-radius: 12px;
    transform: none;
  }

  .tab-pane__classic-monitor-bezel:hover {
    transform: none;
  }

  .tab-pane__classic-monitor-wrapper::before {
    width: 44px;
    height: 24px;
    bottom: 18px;
  }

  .tab-pane__classic-monitor-wrapper::after {
    width: 100px;
    height: 18px;
  }

  .physics-law-viz {
    min-height: 140px;
    max-height: 220px;
  }
}

.product-terminal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.product-terminal__dots {
  display: flex;
  gap: 6px;
}

.product-terminal__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  opacity: 0.85;
}

.product-terminal__dot--red { background: #ef4444; }

.product-terminal__dot--yellow { background: #eab308; }

.product-terminal__dot--green { background: #10b981; }

.product-terminal__title {
  font-family: monospace;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.38);
  letter-spacing: 0.05em;
}

.product-terminal__status {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent-orange);
  text-shadow: 0 0 10px rgba(242, 92, 5, 0.35);
}

.product-terminal__tabs {
  display: flex;
  background: rgba(255, 255, 255, 0.01);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.product-terminal__tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 3px;
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  border: none;
  background: none;
  cursor: pointer;
  transition: all 0.15s ease;
  border-bottom: 2px solid transparent;
  min-width: 0;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .product-terminal__tab {
    font-size: 0.58rem;
    gap: 3px;
    padding: 9px 2px;
  }

  .product-terminal__tab svg {
    width: 12px;
    height: 12px;
  }
}

.product-terminal__tab:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.02);
}

.product-terminal__tab--active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.04);
  border-bottom-color: #6366f1;
}

.product-terminal__body {
  padding: 20px;
}

.tab-pane {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tab-pane__visualization {
  background: rgba(2, 6, 23, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0 6px 20px rgba(0, 0, 0, 0.55);
}

.tab-pane__svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: hidden;
}

.circuit-electron-flow {
  animation: mini-widget-dash 0.9s linear infinite;
}

@keyframes mini-widget-dash {
  to {
    stroke-dashoffset: -26;
  }
}

.ray-draw-anim {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: ray-draw 2.5s ease forwards infinite;
}

@keyframes ray-draw {
  0% { stroke-dashoffset: 120; opacity: 0; }
  15% { opacity: 1; }
  75% { stroke-dashoffset: 0; opacity: 1; }
  90% { stroke-dashoffset: 0; opacity: 0.2; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

.tab-pane__dashboard {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

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

.dashboard-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 6px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  text-align: center;
}

.dashboard-card__label {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.dashboard-card__label--plain {
  text-transform: none;
  letter-spacing: 0.01em;
}

.calc-formula-display {
  text-transform: none;
}

.dashboard-card__val {
  font-size: 0.85rem;
  font-weight: 700;
  font-family: monospace;
}

.highlight-emerald {
  color: #10b981;
  text-shadow: 0 0 8px rgba(16, 185, 129, 0.35);
}

.highlight-amber {
  color: #f59e0b;
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.35);
}

.highlight-red {
  color: #ef4444;
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.35);
}

.highlight-blue {
  color: #3b82f6;
  text-shadow: 0 0 8px rgba(59, 130, 246, 0.35);
}

.dashboard-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.slider-container {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

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

.slider-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
}

.slider-bubble {
  font-size: 0.72rem;
  font-family: monospace;
  font-weight: 700;
  color: #a5b4fc;
}

.wave-param-input {
  width: 72px;
  padding: 2px 6px;
  border: 1px solid rgba(99, 102, 241, 0.45);
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.85);
  color: #a5b4fc;
  font-family: ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: right;
}

.wave-param-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}

.wave-param-input::-webkit-outer-spin-button,
.wave-param-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.tab-pane__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
  outline: none;
  transition: opacity 0.15s ease;
}

.tab-pane__slider:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.tab-pane__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #6366f1;
  border: 2px solid #ffffff;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(99, 102, 241, 0.5);
  transition: transform 0.1s ease;
}

.tab-pane__slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.btn-action {
  width: 100%;
  padding: 10px;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 800;
  border: none;
  border-radius: 6px;
  color: #ffffff;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
}

.btn-action:hover {
  transform: translateY(-1px);
}

.btn-action--success {
  background: linear-gradient(180deg, #10b981 0%, #059669 100%);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-action--success:hover {
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.45);
}

.btn-action--danger {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.btn-action--danger:hover {
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.45);
}

.snells-law-formula {
  font-family: monospace;
  font-size: 0.7rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  padding: 6px;
  border-radius: 6px;
}

.overcurrent-banner {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(244, 63, 94, 0.16);
  border: 1px solid rgba(244, 63, 94, 0.4);
  border-radius: 4px;
  padding: 3px 8px;
  font-family: var(--font-heading);
  font-size: 0.58rem;
  font-weight: 800;
  color: #f43f5e;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 0 10px rgba(244, 63, 94, 0.2);
  animation: overcurrent-blink 1.2s infinite;
}

@keyframes overcurrent-blink {
  50% { opacity: 0.6; }
}

.flash-warn {
  animation: flash-warn-pulse 0.6s infinite alternate;
}

@keyframes flash-warn-pulse {
  to { transform: scale(1.18); filter: drop-shadow(0 0 2px #f43f5e); }
}

.font-blink {
  animation: text-red-blink 1s steps(2, start) infinite;
}

@keyframes text-red-blink {
  to { visibility: hidden; }
}

.btn-flow-toggle {
  padding: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-flow-toggle:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.15);
}

.tab-pane__select {
  padding: 6px 10px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tab-pane__select:focus {
  border-color: var(--accent-orange);
}

.btn-wave-play {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 15px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-wave-play:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}

.btn-wave-play--active {
  border-color: #f59e0b !important;
  color: #ffffff !important;
  background: rgba(245, 158, 11, 0.08) !important;
}

.wave-equation-floating-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  padding: 3px 6px;
  font-family: monospace;
  font-size: 0.58rem;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
  z-index: 2;
}

.wave-plot-surface {
  position: relative;
  flex: 1;
  min-height: 180px;
  width: 100%;
  cursor: crosshair;
}

.wave-plot-surface .tab-pane__svg {
  width: 100%;
  height: 100%;
  min-height: 180px;
  display: block;
}

.laser-color-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.03);
  padding: 8px 10px;
  border-radius: 6px;
}

.laser-color-btn {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.laser-color-btn:hover {
  transform: scale(1.22);
}

.laser-color-btn--red { background: #ef4444; }

.laser-color-btn--green { background: #10b981; }

.laser-color-btn--blue { background: #3b82f6; }

.laser-color-btn--purple { background: #a855f7; }

.laser-color-btn--active {
  border-color: #ffffff !important;
  box-shadow: 0 0 8px currentColor;
}

.tir-banner {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 4px;
  padding: 3px 8px;
  font-family: var(--font-heading);
  font-size: 0.58rem;
  font-weight: 800;
  color: #ef4444;
  letter-spacing: 0.05em;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
  animation: overcurrent-blink 1.2s infinite;
}

/* Features Section Styling */

.features-section {
  padding: 56px clamp(20px, 4vw, 48px) 32px;
  position: relative;
  z-index: 3;
  max-width: 1320px;
  margin: 0 auto;
}

.features-section--compact {
  padding: 0;
  max-width: none;
  margin: 0;
}

.features-section--compact .features-section__header {
  text-align: left;
  margin-bottom: 12px;
}

.features-section--compact .features-section__title {
  font-size: clamp(1.1rem, 2.5vw, 1.45rem);
}

.features-section--compact .features-grid {
  gap: 10px;
}

.features-section--compact .feature-card {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--lp-surface, #131a24);
  border-color: var(--lp-border, rgba(148, 163, 184, 0.14));
}

.features-section--compact .feature-card__icon-wrap {
  width: 36px;
  height: 36px;
  margin-bottom: 10px;
}

.features-section--compact .feature-card__title {
  font-size: 0.95rem;
  margin-bottom: 6px;
}

.features-section--compact .feature-card__desc {
  font-size: 0.78rem;
  line-height: 1.45;
}

.features-section--compact .feature-card:hover {
  transform: translateY(-2px);
}

.features-section__header {
  text-align: center;
  margin-bottom: 45px;
}

.features-section__eyebrow {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--accent-orange);
  margin-bottom: 8px;
}

.features-section__title {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0;
}

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

@media (min-width: 768px) {
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.feature-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 10px;
  padding: 24px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  text-align: left;
}

.feature-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.feature-card__icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.feature-card__icon-wrap--blue,
.feature-card__icon-wrap--emerald,
.feature-card__icon-wrap--amber {
  background: rgba(242, 92, 5, 0.12);
  color: var(--accent-orange);
  border: 1px solid rgba(242, 92, 5, 0.22);
}

.feature-card__icon {
  display: block;
}

.feature-card__title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0 0 10px 0;
  color: #ffffff;
}

.feature-card__desc {
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

/* Premium Footer Styling */

.landing-footer {
  background: #080c12;
  border-top: 1px solid var(--lp-border, rgba(148, 163, 184, 0.14));
  padding: 28px var(--lp-gutter, clamp(16px, 2.5vw, 24px)) 20px;
  margin-top: 0;
  position: relative;
  z-index: 3;
}

.landing-footer__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: var(--lp-max, 1160px);
  margin: 0 auto 20px;
}

@media (min-width: 768px) {
  .landing-footer__columns {
    grid-template-columns: 2fr repeat(3, 1fr);
  }
}

.landing-footer__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.landing-footer__col--brand {
  max-width: 320px;
}

.landing-footer__logo {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, #ffffff 0%, #fbbf24 60%, var(--accent-orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

.landing-footer__desc {
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
}

.landing-footer__header {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffffff;
  margin-bottom: 4px;
}

.landing-footer__link {
  background: none;
  border: none;
  padding: 0;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s ease;
}

.landing-footer__link:hover {
  color: var(--accent-orange);
}

.landing-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  padding-top: 24px;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.landing-footer__copy {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.35);
  margin: 0 0 12px;
}

.landing-footer__disclaimer {
  font-size: 0.68rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.28);
  max-width: 720px;
  margin: 0 auto;
}

/* Periodic Table Styling */

.periodic-section {
  padding: 48px clamp(20px, 4vw, 48px) 40px;
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 1320px;
  margin: 0 auto;
}

.periodic-section--landing {
  padding: 0;
  max-width: none;
  margin: 0;
  text-align: left;
}

.periodic-section--landing .periodic-section__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 0;
}

.periodic-section--landing.periodic-section--collapsed .periodic-section__header {
  margin-bottom: 0;
}

.periodic-section--landing:not(.periodic-section--collapsed) .periodic-section__header {
  margin-bottom: 12px;
}

.periodic-section--landing .periodic-section__title {
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  margin-bottom: 0;
}

.periodic-section--landing .periodic-section__sub {
  margin-top: 6px;
  font-size: 0.78rem;
}

.periodic-section__toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--lp-border, rgba(148, 163, 184, 0.14));
  background: var(--lp-surface, #131a24);
  color: #f1f5f9;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.periodic-section__toggle:hover {
  background: #1a2332;
  border-color: rgba(242, 92, 5, 0.35);
}

.periodic-section__toggle-icon--open {
  transform: rotate(180deg);
}

.periodic-section--landing .periodic-box {
  padding: 16px;
}

.periodic-section__header {
  margin-bottom: 35px;
}

.periodic-section__eyebrow {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--accent-orange);
  margin-bottom: 8px;
}

.periodic-section__title {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 10px 0;
}

.periodic-section__sub {
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  max-width: 600px;
  margin: 0 auto;
}

/* Bounding Rectangular Box */

.periodic-box {
  background: rgba(15, 23, 42, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 
    0 30px 60px rgba(0, 0, 0, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.06),
    0 0 40px rgba(var(--box-glow-rgb), 0.05);
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Interactive Controls Bar */

.periodic-box__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.periodic-search-wrap {
  position: relative;
  width: 100%;
  max-width: 300px;
}

.periodic-search {
  width: 100%;
  padding: 8px 36px 8px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  transition: all 0.22s ease;
}

.periodic-search:focus {
  outline: none;
  border-color: var(--accent-orange, #f97316);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.2);
}

.periodic-search::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.periodic-search__clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 1.15rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.periodic-search__clear:hover {
  color: #ffffff;
}

.periodic-block-filters,
.periodic-speed-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.control-label {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
  margin-right: 4px;
}

.periodic-block-btn,
.periodic-speed-btn {
  padding: 5px 11px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: capitalize;
}

.periodic-block-btn:hover,
.periodic-speed-btn:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.15);
}

.periodic-block-btn--active,
.periodic-speed-btn--active {
  border-color: var(--accent-orange, #f97316) !important;
  color: #ffffff !important;
  background: rgba(249, 115, 22, 0.08) !important;
  box-shadow: 0 0 8px rgba(249, 115, 22, 0.1);
}

/* Axis (Period/Group) highlighting on hover */

.element-tile--axis-highlight {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  opacity: 0.85;
}

/* Shell config typography highlighting */

.shell-config-num {
  display: inline-block;
  cursor: pointer;
  transition: all 0.2s ease;
}

.shell-config-dash {
  color: rgba(255, 255, 255, 0.15);
  font-weight: 400;
}

.periodic-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 1200px;
  margin: 0 auto 30px;
}

.periodic-legend__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.015);
  cursor: pointer;
  transition: all 0.2s ease;
}

.periodic-legend__btn:hover,
.periodic-legend__btn--active {
  color: #ffffff;
  border-color: var(--legend-color);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
}

.periodic-legend__color-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.periodic-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .periodic-container {
    grid-template-columns: 1.55fr 0.45fr;
  }
}

.periodic-grid-wrap {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
  padding-bottom: 12px;
}

.periodic-grid-wrap::-webkit-scrollbar {
  height: 6px;
}

.periodic-grid-wrap::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.periodic-grid {
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  gap: 4px;
  min-width: 780px;
}

.element-tile {
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 3px;
  cursor: pointer;
  text-align: left;
  color: #ffffff;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease;
  background: rgba(255, 255, 255, 0.015);
}

.element-tile--dimmed {
  opacity: 0.14;
  filter: grayscale(0.85);
}

.element-tile:hover {
  transform: scale(1.15) translate3d(0, 0, 8px);
  border-color: var(--el-color) !important;
  box-shadow: 0 0 12px var(--el-color);
  z-index: 5;
  background: rgba(255, 255, 255, 0.04) !important;
}

.element-tile--selected {
  border-color: var(--el-color) !important;
  box-shadow: 0 0 10px var(--el-color);
  background: rgba(255, 255, 255, 0.05) !important;
  z-index: 3;
}

.element-tile__number {
  font-size: 0.58rem;
  color: rgba(255, 255, 255, 0.4);
  font-family: monospace;
}

.element-tile__symbol {
  font-size: 0.95rem;
  font-weight: 800;
  text-align: center;
  margin-top: 1px;
  margin-bottom: -2px;
}

.element-tile__name {
  font-size: 0.45rem;
  text-align: center;
  opacity: 0.5;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Category specific faint backgrounds and border outlines */

.element-tile--alkali-metal { background: rgba(239, 68, 68, 0.05); border-color: rgba(239, 68, 68, 0.12); }

.element-tile--alkaline-earth { background: rgba(249, 115, 22, 0.05); border-color: rgba(249, 115, 22, 0.12); }

.element-tile--transition-metal { background: rgba(139, 92, 246, 0.05); border-color: rgba(139, 92, 246, 0.12); }

.element-tile--post-transition-metal { background: rgba(59, 130, 246, 0.05); border-color: rgba(59, 130, 246, 0.12); }

.element-tile--metalloid { background: rgba(6, 182, 212, 0.05); border-color: rgba(6, 182, 212, 0.12); }

.element-tile--reactive-nonmetal { background: rgba(16, 185, 129, 0.05); border-color: rgba(16, 185, 129, 0.12); }

.element-tile--halogen { background: rgba(236, 72, 153, 0.05); border-color: rgba(236, 72, 153, 0.12); }

.element-tile--noble-gas { background: rgba(168, 85, 247, 0.05); border-color: rgba(168, 85, 247, 0.12); }

.element-tile--lanthanide { background: rgba(244, 63, 94, 0.05); border-color: rgba(244, 63, 94, 0.12); }

.element-tile--actinide { background: rgba(225, 29, 72, 0.05); border-color: rgba(225, 29, 72, 0.12); }

.lan-act-connector {
  font-size: 0.55rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.35);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.01);
}

/* Element Inspector Details Panel */

.element-inspector {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 22px;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 12px;
  box-shadow: 
    0 16px 40px rgba(0, 0, 0, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.08);
  text-align: left;
}

.element-inspector__model-wrap {
  background: rgba(2, 6, 23, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bohr-model {
  width: 100%;
  max-width: 180px;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bohr-model__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Rotating shell orbit paths */

.bohr-model__shell-group {
  transform-origin: 100px 100px;
  animation: bohr-orbit-spin linear infinite;
}

@keyframes bohr-orbit-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Pulsing nucleus core */

.bohr-model__nucleus-glow {
  transform-origin: 100px 100px;
  animation: nucleus-pulse 3s ease-in-out infinite;
}

@keyframes nucleus-pulse {
  0% { transform: scale(1); opacity: 0.65; }
  50% { transform: scale(1.15); opacity: 0.85; }
  100% { transform: scale(1); opacity: 0.65; }
}

.element-inspector__readout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.element-inspector__identity {
  display: flex;
  gap: 14px;
  align-items: center;
}

.element-inspector__symbol-wrap {
  position: relative;
  width: 60px;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  flex-shrink: 0;
}

.element-inspector__num {
  position: absolute;
  top: 4px;
  left: 6px;
  font-size: 0.65rem;
  font-family: monospace;
  color: rgba(255, 255, 255, 0.35);
}

.element-inspector__sym {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1;
  margin-top: 6px;
}

.element-inspector__meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.element-inspector__name {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
}

.element-inspector__mass {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  font-family: monospace;
}

.element-inspector__group-tag {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 2px;
}

.element-inspector__properties {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 14px;
}

.property-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.property-item__label {
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.property-item__val {
  font-size: 0.82rem;
  font-weight: 700;
  color: #ffffff;
}

.element-inspector__shells {
  display: flex;
  gap: 8px;
  align-items: center;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.03);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.72rem;
}

.element-inspector__shells-label {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
}

.element-inspector__shells-val {
  font-family: monospace;
  font-weight: 700;
  color: #10b981;
}

.element-inspector__summary {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 12px;
}

.element-inspector__summary-icon {
  color: #3b82f6;
  margin-top: 2px;
  flex-shrink: 0;
}

.element-inspector__summary-text {
  font-size: 0.75rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.58);
  margin: 0;
}

/* --- Calculator & SIL Controller Tab Styling --- */

.calc-header-controls {
  display: flex;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px 6px 0 0;
}

.calc-select-group {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 3px;
}

.calc-select-label {
  font-size: 0.58rem;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.calc-formula-panel {
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 10px;
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.calc-formula-display {
  font-family: monospace;
  font-size: 0.95rem;
  color: #fbbf24;
  text-align: center;
  padding: 6px 0;
  font-weight: bold;
  letter-spacing: 0.02em;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.2);
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  border: 1px solid rgba(251, 191, 36, 0.08);
  text-transform: none;
}

.physics-laws-formula__formula,
.physics-laws-detail,
.tab-pane--physics-laws .dashboard-card__val,
.physics-law-viz text {
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI", system-ui, sans-serif;
  text-transform: none;
}

.calc-relevance-text {
  font-size: 0.65rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.5);
  border-left: 2px solid rgba(16, 185, 129, 0.5);
  padding-left: 8px;
  margin-top: 6px;
  background: rgba(16, 185, 129, 0.02);
  padding-top: 2px;
  padding-bottom: 2px;
}

.calc-wire {
  transition: stroke 0.25s ease, stroke-width 0.25s ease, filter 0.25s ease;
}

/* Physics Laws Lab tab */

.tab-pane--physics-laws {
  flex: 1;
  min-height: 0;
}

/* 3D CRT visualization panel */

.physics-laws-tv-screen {
  perspective: 1200px;
  transform-style: preserve-3d;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 10px !important;
}

.physics-laws-tv-bezel {
  width: 100%;
  height: 100%;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #2b303b 0%, #1a1e24 100%);
  border: 10px solid #21262d;
  border-radius: 20px;
  box-shadow:
    inset 0 4px 6px rgba(255, 255, 255, 0.06),
    inset 0 -4px 6px rgba(0, 0, 0, 0.5),
    0 12px 36px rgba(0, 0, 0, 0.65),
    0 2px 4px rgba(255, 255, 255, 0.05);
  transform: rotateX(2.5deg) rotateY(-2deg) rotateZ(0.3deg);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  overflow: hidden;
  position: relative;
}

.physics-laws-tv-bezel:hover {
  transform: rotateX(1deg) rotateY(-0.5deg) rotateZ(0deg) scale(1.005);
}

.physics-laws-tv-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 14px;
  background: #161b22;
  border-bottom: 2px solid #0d1117;
  font-family: ui-monospace, monospace;
  font-size: 9px;
  color: #8b949e;
  user-select: none;
  flex-shrink: 0;
}

.physics-laws-tv-brand {
  letter-spacing: 0.12em;
  font-weight: 800;
  color: #60a5fa;
  text-shadow: 0 0 4px rgba(96, 165, 250, 0.35);
  text-transform: uppercase;
}

.physics-laws-tv-dials {
  display: flex;
  align-items: center;
  gap: 8px;
}

.physics-laws-tv-dial {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #484f58, #21262d, #484f58);
  border: 1px solid #30363d;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.physics-laws-tv-power-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3fb950;
  box-shadow: 0 0 6px #3fb950, 0 0 12px #3fb950;
  animation: physics-laws-led-pulse 1.8s infinite alternate;
}

@keyframes physics-laws-led-pulse {
  from { opacity: 0.6; box-shadow: 0 0 4px #3fb950; }
  to { opacity: 1; box-shadow: 0 0 10px #3fb950, 0 0 16px #3fb950; }
}

.physics-laws-tv-glass {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: rgba(2, 6, 23, 0.92);
  display: flex;
  align-items: stretch;
}

.physics-laws-tv-crt-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background:
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.18) 50%),
    linear-gradient(90deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.02)),
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 65%);
  background-size: 100% 3px, 6px 100%, 100% 100%;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.8);
  mix-blend-mode: overlay;
  opacity: 0.95;
}

.physics-laws-viz-wrap {
  position: relative;
  min-height: 200px;
}

.physics-laws-viz-wrap .physics-law-viz {
  position: relative;
  z-index: 1;
}

.physics-laws-viz-label {
  position: absolute;
  top: 8px;
  left: 10px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(96, 165, 250, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 12px rgba(0, 0, 0, 0.35);
}

.physics-laws-viz-label__cat {
  font-size: 0.58rem;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.physics-laws-viz-label__name {
  font-size: 0.72rem;
  font-weight: 700;
  color: #60a5fa;
}

.physics-laws-formula__title {
  font-size: 0.78rem;
  font-weight: bold;
  color: #60a5fa;
}

.physics-laws-statement {
  font-size: 0.65rem;
  margin: 4px 0 0;
  opacity: 0.72;
  line-height: 1.4;
}

.physics-laws-detail__label {
  font-weight: 600;
  color: #10b981;
  font-size: 0.58rem;
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}

.physics-laws-selects {
  border-radius: 6px 6px 0 0;
}

/* 3D control panel (right side) */

.physics-laws-dashboard-3d {
  perspective: 900px;
  transform-style: preserve-3d;
  background: linear-gradient(160deg, rgba(30, 41, 59, 0.55) 0%, rgba(15, 23, 42, 0.85) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -8px 16px rgba(0, 0, 0, 0.35),
    0 14px 32px rgba(0, 0, 0, 0.45),
    0 2px 0 rgba(255, 255, 255, 0.04);
  transform: rotateX(1.5deg) rotateY(2deg);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.physics-laws-dashboard-3d:hover {
  transform: rotateX(0.5deg) rotateY(1deg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -8px 16px rgba(0, 0, 0, 0.3),
    0 18px 40px rgba(0, 0, 0, 0.5),
    0 2px 0 rgba(255, 255, 255, 0.05);
}

.tab-pane--physics-laws .physics-laws-dashboard-3d .calc-formula-panel {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.75) 0%, rgba(2, 6, 23, 0.55) 100%);
  border: 1px solid rgba(96, 165, 250, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 6px 14px rgba(0, 0, 0, 0.28);
}

.tab-pane--physics-laws .physics-laws-dashboard-3d .dashboard-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 10px rgba(0, 0, 0, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tab-pane--physics-laws .physics-laws-dashboard-3d .dashboard-card:hover {
  transform: translateY(-2px) translateZ(4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 16px rgba(0, 0, 0, 0.3);
}

.tab-pane--physics-laws .physics-laws-dashboard-3d .calc-header-controls {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.2) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.physics-laws-sliders {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 10px;
}

.physics-law-viz {
  width: 100%;
  height: 100%;
  min-height: 180px;
  overflow: visible;
}

.product-terminal--embedded-full .tab-pane--physics-laws .tab-pane__visualization,
.product-terminal--fullscreen .tab-pane--physics-laws .tab-pane__visualization {
  height: 100%;
  min-height: 0;
  align-items: stretch;
}

.product-terminal--embedded-full .tab-pane--physics-laws.tab-pane--split,
.product-terminal--fullscreen .tab-pane--physics-laws.tab-pane--split {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
}

.product-terminal--embedded-full .tab-pane--physics-laws .tab-pane__dashboard,
.product-terminal--fullscreen .tab-pane--physics-laws .tab-pane__dashboard {
  max-height: none;
  overflow-y: visible;
  height: auto;
}

.calc-led {
  transition: fill 0.2s ease, filter 0.25s ease;
}

/* Custom Animations for Function & SIL Lab */

/* Glowing pulse for active coordinate indicators and vector endpoints */

@keyframes calc-pulse-glow {
  0% {
    r: 3px;
    filter: drop-shadow(0 0 2px var(--pulse-color, #f59e0b));
    opacity: 0.85;
  }
  50% {
    r: 5px;
    filter: drop-shadow(0 0 8px var(--pulse-color, #f59e0b));
    opacity: 1;
  }
  100% {
    r: 3px;
    filter: drop-shadow(0 0 2px var(--pulse-color, #f59e0b));
    opacity: 0.85;
  }
}

.calc-pulse-glow-amber {
  --pulse-color: #f59e0b;
  animation: calc-pulse-glow 1.8s ease-in-out infinite;
}

.calc-pulse-glow-cyan {
  --pulse-color: #06b6d4;
  animation: calc-pulse-glow 1.8s ease-in-out infinite;
}

.calc-pulse-glow-yellow {
  --pulse-color: #fbbf24;
  animation: calc-pulse-glow 1.8s ease-in-out infinite;
}

.calc-pulse-glow-emerald {
  --pulse-color: #10b981;
  animation: calc-pulse-glow 1.8s ease-in-out infinite;
}

/* Dash flow animation for math curve drawing and vector lines */

@keyframes calc-dash-flow {
  to {
    stroke-dashoffset: -20;
  }
}

.calc-vector-line-active {
  stroke-dasharray: 4 3;
  animation: calc-dash-flow 1.2s linear infinite;
}

.calc-distance-line-active {
  stroke-dasharray: 3 3;
  animation: calc-dash-flow 0.8s linear infinite;
}

/* Pulsing gridlines for visual excitement */

@keyframes calc-grid-pulse {
  0% { opacity: 0.03; }
  50% { opacity: 0.08; }
  100% { opacity: 0.03; }
}

.calc-grid-animated {
  animation: calc-grid-pulse 4s ease-in-out infinite;
}

/* Soft breathing animation for background curves */

@keyframes calc-curve-breath {
  0% { stroke-width: 1.8px; opacity: 0.9; }
  50% { stroke-width: 2.4px; opacity: 1; }
  100% { stroke-width: 1.8px; opacity: 0.9; }
}

.calc-curve-animated {
  animation: calc-curve-breath 3s ease-in-out infinite;
}

/* Statistical bar hover and transition glow */

@keyframes calc-bar-pulse {
  0% { fill: rgba(99, 102, 241, 0.2); }
  50% { fill: rgba(99, 102, 241, 0.45); }
  100% { fill: rgba(99, 102, 241, 0.2); }
}

.calc-bar-animated {
  animation: calc-bar-pulse 2.5s ease-in-out infinite;
}

/* Probability grid wave pulse */

@keyframes calc-prob-pulse {
  0% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 0.8; }
}

.calc-prob-circle-active {
  animation: calc-prob-pulse 2s ease-in-out infinite;
  transform-origin: center;
}

/* ========================================
   Formula Library — 3D navigator
   ======================================== */

@keyframes formula-lib-enter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes formula-lib-shine {
  0% {
    transform: translateX(-120%) skewX(-12deg);
  }
  100% {
    transform: translateX(220%) skewX(-12deg);
  }
}

.formula-lib {
  position: relative;
}

.formula-lib__panel--enter {
  animation: formula-lib-enter 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.formula-lib__reveal {
  opacity: 0;
  animation: formula-lib-enter 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(0.06s * var(--reveal-i, 0));
}

.formula-lib__hero {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
  padding: 20px 22px;
  border-radius: 16px;
  border: 1px solid rgba(15, 32, 66, 0.12);
  background: linear-gradient(135deg, rgba(15, 32, 66, 0.06) 0%, rgba(255, 255, 255, 0.95) 55%, rgba(242, 92, 5, 0.05) 100%);
  box-shadow: 0 8px 24px -12px rgba(15, 23, 42, 0.18);
}

.formula-lib__hero-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(145deg, var(--accent-orange) 0%, var(--accent-orange-hover) 100%);
  border-bottom: 4px solid var(--accent-orange-hover);
  box-shadow: 0 6px 16px rgba(242, 92, 5, 0.35);
}

.formula-lib__hero-icon--subject {
  background: linear-gradient(145deg, var(--bg-navy-light) 0%, var(--bg-navy) 100%);
  border-bottom-color: #0a1830;
  box-shadow: 0 6px 16px rgba(15, 32, 66, 0.35);
}

.formula-lib__eyebrow {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-orange);
  margin-bottom: 6px;
}

.formula-lib__title {
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--bg-navy);
  line-height: 1.1;
  margin: 0;
}

.formula-lib__title--sm {
  font-size: clamp(1.15rem, 2.5vw, 1.45rem);
}

.formula-lib__subtitle {
  margin: 8px 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 52ch;
}

.formula-lib__class-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.formula-lib__class-3d {
  --class-gradient: linear-gradient(145deg, #0f2042 0%, #1c325c 52%, #243b66 100%);
  --class-accent: #fdba74;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  padding: 22px 22px 18px;
  border: none;
  border-radius: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  border-right: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom: 6px solid rgba(0, 0, 0, 0.28);
  background: var(--class-gradient);
  color: #fff;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    0 14px 28px -10px rgba(15, 23, 42, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition:
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.18s ease,
    border-bottom-width 0.18s ease,
    filter 0.2s ease;
}

.formula-lib__class-3d:hover {
  transform: translateY(-4px) scale(1.01);
  filter: brightness(1.06);
  box-shadow:
    0 22px 36px -12px rgba(15, 23, 42, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.formula-lib__class-3d:active {
  transform: translateY(2px) scale(0.995);
  border-bottom-width: 3px;
  box-shadow: 0 8px 16px -8px rgba(15, 23, 42, 0.4);
}

.formula-lib__class-3d-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 60%
  );
  transform: translateX(-120%) skewX(-12deg);
  animation: formula-lib-shine 4.5s ease-in-out infinite;
  pointer-events: none;
}

.formula-lib__class-3d-grid {
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

.formula-lib__class-3d-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.formula-lib__class-3d-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.88;
}

.formula-lib__class-3d-name {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.formula-lib__class-3d-meta {
  font-size: 0.8rem;
  font-weight: 700;
  opacity: 0.92;
}

.formula-lib__class-3d-count {
  display: inline-flex;
  width: fit-content;
  margin-top: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.formula-lib__class-3d-action {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--class-accent, #fde68a);
}

.formula-lib__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: #fff;
  color: var(--accent-orange);
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.12s ease;
  box-shadow: 0 3px 0 rgba(15, 23, 42, 0.08);
}

.formula-lib__back:hover {
  background: #fff7ed;
  transform: translateY(-1px);
}

.formula-lib__back:active {
  transform: translateY(1px);
  box-shadow: none;
}

.formula-lib__crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.formula-lib__crumb .formula-lib__back {
  margin-bottom: 0;
}

.formula-lib__crumb-sep {
  color: var(--text-muted);
  opacity: 0.6;
}

.formula-lib__crumb-current {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--bg-navy);
}

.formula-lib__list-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
}

.formula-lib__search {
  position: relative;
  width: 100%;
  max-width: 340px;
}

.formula-lib__search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.formula-lib__search-input {
  width: 100%;
  padding: 11px 14px 11px 36px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bg-navy);
  box-shadow: 0 4px 0 rgba(15, 23, 42, 0.06);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.formula-lib__search-input:focus {
  outline: none;
  border-color: rgba(249, 115, 22, 0.45);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12), 0 4px 0 rgba(15, 23, 42, 0.06);
}

.formula-lib__empty {
  padding: 48px 24px;
  border-radius: 16px;
  border: 1px dashed var(--border-color);
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  text-align: center;
  color: var(--text-secondary);
}

.formula-lib__empty h4 {
  margin: 12px 0 6px;
  font-size: 1rem;
  color: var(--bg-navy);
}

.formula-lib__empty p {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
}

.formula-lib__chapter-stack {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.formula-lib__chapter-block {
  --chapter-gradient: linear-gradient(145deg, #0f2042 0%, #1c325c 52%, #243b66 100%);
  --chapter-accent: #fdba74;
  --chapter-badge-bg: rgba(242, 92, 5, 0.1);
  --chapter-badge-text: #0f2042;
  --chapter-expr-bg: linear-gradient(135deg, #0f2042 0%, #1c325c 100%);
  --chapter-card-border: #f25c05;
}

.formula-lib__chapter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--chapter-gradient);
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  border-bottom: 5px solid rgba(0, 0, 0, 0.22);
  box-shadow: 0 10px 24px -12px rgba(15, 23, 42, 0.45);
}

.formula-lib__chapter-eyebrow {
  margin: 0 0 4px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.88;
}

.formula-lib__chapter-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 2.5vw, 1.35rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.formula-lib__chapter-count {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--chapter-accent);
}

.formula-lib__formula-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}

.formula-lib__formula-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease;
}

.formula-lib__formula-card--3d {
  border: 1px solid color-mix(in srgb, var(--chapter-card-border) 35%, white);
  border-bottom: 6px solid color-mix(in srgb, var(--chapter-card-border) 75%, black);
  background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--chapter-badge-bg) 55%, white) 100%);
  box-shadow:
    0 12px 24px -14px rgba(15, 23, 42, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.formula-lib__formula-card--3d:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow:
    0 18px 32px -12px color-mix(in srgb, var(--chapter-card-border) 35%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.formula-lib__formula-card--3d:active {
  transform: translateY(2px) scale(0.995);
  border-bottom-width: 3px;
}

.formula-lib__formula-card-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    color-mix(in srgb, var(--chapter-accent) 25%, transparent) 50%,
    transparent 60%
  );
  transform: translateX(-120%) skewX(-12deg);
  animation: formula-lib-shine 5s ease-in-out infinite;
  pointer-events: none;
}

.formula-lib__formula-chapter {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--chapter-badge-text);
  background: var(--chapter-badge-bg);
  border: 1px solid color-mix(in srgb, var(--chapter-card-border) 25%, transparent);
}

.formula-lib__formula-name {
  margin: 10px 0 6px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--bg-navy);
  line-height: 1.25;
}

.formula-lib__formula-desc {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-secondary);
}

.formula-lib__formula-expr-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--chapter-expr-bg, #0f172a);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 4px solid rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.formula-lib__formula-expr {
  flex: 1;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.92rem;
  font-weight: 700;
  color: #fdba74;
  word-break: break-word;
}

.formula-lib__copy-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 8px;
  border: none;
  border-bottom: 2px solid var(--accent-orange-hover);
  background: linear-gradient(180deg, #ff7a1a 0%, var(--accent-orange) 100%);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.15s ease;
}

.formula-lib__copy-btn:hover {
  filter: brightness(1.08);
}

.formula-lib__copy-btn:active {
  transform: translateY(2px);
  border-bottom-width: 1px;
}

@media (max-width: 640px) {
  .formula-lib__hero {
    flex-direction: column;
    padding: 16px;
  }

  .formula-lib__class-3d {
    min-height: 200px;
  }

  .formula-lib__formula-expr-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .formula-lib__copy-btn {
    justify-content: center;
  }
}

/* Classic Computer Monitor 3D styling — matches Physics Lab CRT bezel palette */

.tab-pane__classic-monitor-wrapper {
  perspective: 1000px;
  transform-style: preserve-3d;
  padding: 16px 16px 50px 16px !important; /* extra space at bottom for the monitor pedestal stand */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Pedestal Stand Neck (3D trapezoid connecting the screen to the base) */

.tab-pane__classic-monitor-wrapper::before {
  content: "";
  position: absolute;
  bottom: 24px;
  width: 60px;
  height: 35px;
  background: linear-gradient(180deg, #30363d 0%, #21262d 100%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 35px solid #161b22;
  box-shadow: inset 2px 0 3px rgba(255, 255, 255, 0.06), inset -2px 0 3px rgba(0, 0, 0, 0.45);
  z-index: 1;
}

/* Pedestal Stand Base Plate (heavy desk base) */

.tab-pane__classic-monitor-wrapper::after {
  content: "";
  position: absolute;
  bottom: 4px;
  width: 140px;
  height: 25px;
  background: linear-gradient(135deg, #2b303b 0%, #1a1e24 100%);
  border-radius: 6px;
  box-shadow:
    0 1px 2px rgba(255, 255, 255, 0.08) inset,
    0 -1px 2px rgba(0, 0, 0, 0.5) inset,
    0 8px 16px rgba(0, 0, 0, 0.65);
  z-index: 2;
  border-bottom: 4px solid #0d1117;
}

.tab-pane__classic-monitor-bezel {
  background: linear-gradient(135deg, #2b303b 0%, #1a1e24 100%);
  border: 12px solid #21262d;
  border-bottom-width: 24px !important; /* thicker bottom bezel for controls */
  border-radius: 18px;
  box-shadow:
    inset 0 4px 6px rgba(255, 255, 255, 0.06),
    inset 0 -4px 6px rgba(0, 0, 0, 0.5),
    0 12px 36px rgba(0, 0, 0, 0.65),
    0 2px 4px rgba(255, 255, 255, 0.05);
  transform: rotateX(2deg) rotateY(-1.5deg) rotateZ(0.2deg);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  overflow: hidden;
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.tab-pane__classic-monitor-bezel:hover {
  transform: rotateX(0.5deg) rotateY(-0.25deg) rotateZ(0deg) scale(1.005);
}

/* Retro Badge / Vent detail / Power Led */

.tab-pane__classic-monitor-controls {
  position: absolute;
  bottom: 4px;
  left: 12px;
  right: 12px;
  height: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 12;
  user-select: none;
}

.tab-pane__classic-monitor-logo {
  font-family: ui-monospace, "Courier New", Courier, monospace;
  font-size: 8px;
  font-weight: 900;
  color: #60a5fa;
  letter-spacing: 0.08em;
  text-shadow: 0 0 4px rgba(96, 165, 250, 0.35);
}

.tab-pane__classic-monitor-dials {
  display: flex;
  gap: 4px;
  align-items: center;
}

.tab-pane__classic-monitor-dial {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #484f58, #21262d, #484f58);
  border: 1px solid #30363d;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4);
}

.tab-pane__classic-monitor-btn {
  width: 10px;
  height: 10px;
  background: #30363d;
  border: 1px solid #21262d;
  border-radius: 2px;
  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.08);
}

.tab-pane__classic-monitor-led {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #3fb950;
  box-shadow: 0 0 4px #3fb950, 0 0 8px #3fb950;
  animation: pulseClassicLed 1.5s infinite alternate;
}

@keyframes pulseClassicLed {
  from { opacity: 0.6; box-shadow: 0 0 2px #3fb950; }
  to { opacity: 1; box-shadow: 0 0 6px #3fb950, 0 0 10px #3fb950; }
}

/* Glass CRT curvature screen */

.tab-pane__classic-monitor-glass {
  position: relative;
  overflow: hidden;
  background: rgba(2, 6, 23, 0.92);
  border-radius: 8px;
  border: 3px solid #30363d;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
}

/* Retro CRT phosphor lines overlay */

.tab-pane__classic-monitor-crt {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 99;
  background:
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.18) 50%),
    linear-gradient(90deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.02)),
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 65%);
  background-size: 100% 3px, 6px 100%, 100% 100%;
  opacity: 0.95;
  mix-blend-mode: overlay;
}

/* 3D Flashcard flip animation styling */

.perspective-1000 {
  perspective: 1000px;
}

.transform-style-3d {
  transform-style: preserve-3d;
}

.backface-hidden {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

.rotate-y-180 {
  transform: rotateY(180deg);
}

.flashcard-3d-inner {
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Zero Focus Pomodoro Timer custom styles */

.pomodoro-container {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

@media (min-width: 900px) {
  .pomodoro-container {
    grid-template-columns: 1.8fr 1fr;
  }
}

.pomodoro-card {
  background: linear-gradient(135deg, #4f46e5 0%, #312e81 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  /* 3D bevel base shadow */
  box-shadow: 0 10px 0 #1e1b4b, 0 20px 35px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.pomodoro-card:hover {
  transform: translateY(2px);
  box-shadow: 0 8px 0 #1e1b4b, 0 15px 25px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.pomodoro-modes {
  display: flex;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15);
}

.pomodoro-mode-btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  border: none;
  cursor: pointer;
  background: transparent;
  color: #c7d2fe;
  transition: all 0.2s ease;
}

.pomodoro-mode-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}

.pomodoro-mode-btn.active-focus {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: #ffffff;
  box-shadow: 0 3px 0 #9a3412, 0 4px 10px rgba(249, 115, 22, 0.35);
}

.pomodoro-mode-btn.active-break {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  box-shadow: 0 3px 0 #047857, 0 4px 10px rgba(16, 185, 129, 0.35);
}

.pomodoro-ring-wrapper {
  position: relative;
  width: 236px;
  height: 236px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Animate color shifts */
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(244, 63, 94, 0.15) 100%);
  animation: rotateGradient 8s linear infinite;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 25px rgba(99, 102, 241, 0.25);
  transition: all 0.3s ease;
}

/* Breathing scale animation when running */

.pomodoro-ring-wrapper.running {
  animation: rotateGradient 8s linear infinite, circleBreathe 2s ease-in-out infinite;
}

.pomodoro-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
  z-index: 5;
}

.pomodoro-ring-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.pomodoro-ring-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #a5b4fc;
  display: block;
}

.pomodoro-ring-time {
  font-size: 2.75rem;
  font-weight: 900;
  font-family: monospace;
  letter-spacing: -0.02em;
  color: #ffffff;
  display: block;
  margin-top: 4px;
  animation: textGlow 2s ease-in-out infinite alternate;
}

.pomodoro-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pomodoro-btn-reset {
  padding: 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #eff6ff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

.pomodoro-btn-reset:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.pomodoro-btn-reset:active {
  transform: translateY(2px);
  box-shadow: none;
}

.pomodoro-btn-start {
  padding: 12px 28px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: #ffffff;
  border: 1px solid #ea580c;
  box-shadow: 0 4px 0 #9a3412, 0 6px 12px rgba(249, 115, 22, 0.35);
  transition: all 0.2s ease;
}

.pomodoro-btn-start:hover {
  transform: translateY(-1px);
}

.pomodoro-btn-start:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #9a3412;
}

.pomodoro-btn-start.active-running {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #ffffff;
  border-color: #dc2626;
  box-shadow: 0 4px 0 #991b1b, 0 6px 12px rgba(239, 68, 68, 0.35);
}

.pomodoro-btn-start.active-running:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #991b1b;
}

/* Sidebar Layout */

.pomodoro-sidebar-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Sidebar Synth Card (Soft Sky-Blue Console) */

.pomodoro-sidebar-synth-card {
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 0 #7dd3fc, 0 15px 30px rgba(56, 189, 248, 0.2), inset 0 1px 0 #ffffff !important;
  transition: all 0.3s ease;
}

.pomodoro-sidebar-synth-card:hover {
  transform: translateY(2px);
  box-shadow: 0 6px 0 #7dd3fc, 0 12px 24px rgba(56, 189, 248, 0.15), inset 0 1px 0 #ffffff !important;
}

.pomodoro-sidebar-header {
  margin-bottom: 16px;
}

.pomodoro-sidebar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #0369a1 !important;
  margin: 0 0 6px 0;
}

.pomodoro-sidebar-desc {
  font-size: 0.72rem;
  font-weight: 600;
  color: #0e7490;
  line-height: 1.5;
  margin: 0;
}

.pomodoro-synth-btn-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pomodoro-synth-btn {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(56, 189, 248, 0.35);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.4);
  color: #0369a1;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(56, 189, 248, 0.2);
  transition: all 0.2s ease;
}

.pomodoro-synth-btn:hover {
  background: rgba(255, 255, 255, 0.65);
  transform: translateY(-1px);
}

.pomodoro-synth-label {
  font-size: 0.75rem;
  font-weight: 800;
}

.pomodoro-synth-btn.active-lofi {
  background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%);
  border-color: #4f46e5;
  color: #ffffff;
  box-shadow: 0 4px 0 #1e1b4b, 0 6px 12px rgba(79, 70, 229, 0.3);
}

.pomodoro-synth-btn.active-rain {
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  border-color: #0d9488;
  color: #ffffff;
  box-shadow: 0 4px 0 #115e59, 0 6px 12px rgba(13, 148, 136, 0.3);
}

.pomodoro-synth-btn.active-space {
  background: linear-gradient(135deg, #9333ea 0%, #6b21a8 100%);
  border-color: #9333ea;
  color: #ffffff;
  box-shadow: 0 4px 0 #581c87, 0 6px 12px rgba(147, 51, 234, 0.3);
}

/* Sidebar Milestones Card (Soft Golden Warm Console) */

.pomodoro-sidebar-milestones-card {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 0 #fcd34d, 0 15px 30px rgba(245, 158, 11, 0.15), inset 0 1px 0 #ffffff;
  transition: all 0.3s ease;
}

.pomodoro-sidebar-milestones-card:hover {
  transform: translateY(2px);
  box-shadow: 0 6px 0 #fcd34d, 0 12px 24px rgba(245, 158, 11, 0.1), inset 0 1px 0 #ffffff;
}

.pomodoro-sidebar-milestones-card .pomodoro-sidebar-title {
  color: #78350f !important;
}

.pomodoro-milestones-count {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #92400e;
  border-bottom: 1px solid rgba(245, 158, 11, 0.25);
  padding-bottom: 10px;
  margin-bottom: 14px;
}

.pomodoro-milestones-val {
  font-weight: 800;
  color: #78350f;
}

.pomodoro-milestone-box {
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02);
}

.pomodoro-badge-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pomodoro-milestone-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pomodoro-milestone-title {
  font-size: 0.72rem;
  font-weight: 800;
  color: #78350f;
}

.pomodoro-milestone-subtitle {
  font-size: 0.62rem;
  font-weight: 600;
  color: #92400e;
}

/* Audio Waves animation */

.pomodoro-audio-wave {
  display: flex;
  gap: 2px;
  height: 12px;
  align-items: flex-end;
}

.wave-bar {
  width: 2px;
  background: #ffffff;
  border-radius: 2px;
  animation: audioPulse 1.2s ease-in-out infinite alternate;
}

.bar-1 { height: 10px; animation-delay: 0.1s; }

.bar-2 { height: 12px; animation-delay: 0.4s; }

.bar-3 { height: 6px; animation-delay: 0.7s; }

@keyframes audioPulse {
  0% { transform: scaleY(0.3); }
  100% { transform: scaleY(1); }
}

/* Circular Timer Ripple & Dot animations */

.pomodoro-ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 120, 73, 0.4);
  pointer-events: none;
  animation: ripplePulse 3s cubic-bezier(0.215, 0.610, 0.355, 1) infinite;
}

.ripple-2 {
  animation-delay: 1s;
}

.ripple-3 {
  animation-delay: 2s;
}

@keyframes ripplePulse {
  0% {
    transform: scale(1);
    opacity: 1;
    border-color: rgba(255, 120, 73, 0.4);
  }
  50% {
    border-color: rgba(0, 242, 254, 0.4);
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
    border-color: rgba(0, 242, 254, 0);
  }
}

.pomodoro-dot-glow {
  transform-origin: center;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 10px rgba(255, 120, 73, 0.6));
}

@keyframes rotateGradient {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

@keyframes circleBreathe {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes textGlow {
  0% {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.4), 0 0 20px rgba(99, 102, 241, 0.2);
  }
  100% {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.85), 0 0 35px rgba(99, 102, 241, 0.55);
  }
}

/* ==========================================
   REVISION FLASHCARD BUILDER PREMIUM STYLES
   ========================================== */

.flashcard-hub {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  width: 100%;
}

@media (min-width: 900px) {
  .flashcard-hub {
    grid-template-columns: 2fr 1fr;
  }
}

/* Tabs Navigation */

.flashcard-tabs {
  display: flex;
  gap: 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  padding-bottom: 12px;
  width: 100%;
}

.flashcard-tab-btn {
  padding: 10px 20px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.15);
  background: #ffffff;
  color: #64748b;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.flashcard-tab-btn:hover {
  background: #f8fafc;
  border-color: rgba(148, 163, 184, 0.3);
  color: #1e293b;
}

.flashcard-tab-btn.active {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

.flashcard-tabs-scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 10px;
  gap: 8px;
}

/* ── Focus room: 3D animated tool tabs ── */

.stk-focus-tabs {
  align-items: center;
  gap: 10px;
  padding: 14px 16px 16px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 18px;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.95) 0%, rgba(241, 245, 249, 0.88) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 8px 28px rgba(15, 23, 42, 0.07);
  border-bottom: none;
}

.stk-focus-tabs::-webkit-scrollbar {
  height: 6px;
}

.stk-focus-tabs::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.35);
  border-radius: 999px;
}

.stk-3d-tab {
  --stk-depth: #1e293b;
  --stk-glow: rgba(59, 130, 246, 0.35);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, transparent 38%), var(--stk-face);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 4px 0 var(--stk-depth),
    0 7px 16px rgba(15, 23, 42, 0.14);
  transform: translateY(0);
  transition:
    transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1),
    box-shadow 0.22s ease,
    filter 0.22s ease;
  animation: stkTabPopIn 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) backwards;
}

.stk-3d-tab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.stk-3d-tab:hover {
  transform: translateY(-4px) scale(1.02);
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 6px 0 var(--stk-depth),
    0 12px 24px rgba(15, 23, 42, 0.18),
    0 0 0 2px var(--stk-glow);
}

.stk-3d-tab:hover::after {
  opacity: 1;
  animation: stkTabShimmer 0.65s ease;
}

.stk-3d-tab:active {
  transform: translateY(2px) scale(0.98);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.15),
    0 1px 0 var(--stk-depth);
  transition-duration: 0.08s;
}

.stk-3d-tab.is-active {
  transform: translateY(2px);
  filter: brightness(1.1) saturate(1.08);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.2),
    0 1px 0 var(--stk-depth),
    0 0 0 2px var(--stk-glow),
    0 0 18px var(--stk-glow);
}

.stk-3d-tab.is-active .stk-tool-tab-icon {
  animation: stkIconPulse 1.6s ease-in-out infinite;
}

.stk-3d-tab-core,
.stk-cat-arrow.stk-cat-core {
  --stk-face: linear-gradient(180deg, #334155 0%, #1e293b 100%);
  --stk-depth: #0f172a;
  --stk-glow: rgba(51, 65, 85, 0.45);
}

.stk-3d-tab-timer,
.stk-cat-arrow.stk-cat-timer {
  --stk-face: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
  --stk-depth: #7f1d1d;
  --stk-glow: rgba(220, 38, 38, 0.4);
}

.stk-3d-tab-focus,
.stk-cat-arrow.stk-cat-focus {
  --stk-face: linear-gradient(180deg, #6366f1 0%, #4338ca 100%);
  --stk-depth: #3730a3;
  --stk-glow: rgba(99, 102, 241, 0.45);
}

.stk-3d-tab-practice,
.stk-cat-arrow.stk-cat-practice {
  --stk-face: linear-gradient(180deg, #14b8a6 0%, #0d9488 100%);
  --stk-depth: #0f766e;
  --stk-glow: rgba(20, 184, 166, 0.45);
}

.stk-3d-tab-writing,
.stk-cat-arrow.stk-cat-writing {
  --stk-face: linear-gradient(180deg, #a855f7 0%, #7c3aed 100%);
  --stk-depth: #6d28d9;
  --stk-glow: rgba(168, 85, 247, 0.45);
}

.stk-3d-tab-maths-science,
.stk-cat-arrow.stk-cat-maths-science {
  --stk-face: linear-gradient(180deg, #0ea5e9 0%, #0284c7 100%);
  --stk-depth: #0369a1;
  --stk-glow: rgba(14, 165, 233, 0.45);
}

.stk-3d-tab-planning,
.stk-cat-arrow.stk-cat-planning {
  --stk-face: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
  --stk-depth: #b45309;
  --stk-glow: rgba(245, 158, 11, 0.45);
}

.stk-3d-tab-motivation,
.stk-cat-arrow.stk-cat-motivation {
  --stk-face: linear-gradient(180deg, #f43f5e 0%, #e11d48 100%);
  --stk-depth: #be123c;
  --stk-glow: rgba(244, 63, 94, 0.45);
}

.stk-3d-tab-reference,
.stk-cat-arrow.stk-cat-reference {
  --stk-face: linear-gradient(180deg, #64748b 0%, #475569 100%);
  --stk-depth: #334155;
  --stk-glow: rgba(100, 116, 139, 0.45);
}

.stk-tool-tab-icon {
  font-size: 1rem;
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}

.stk-tool-tab-title {
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Category arrow labels — same size & 3D language as tool tabs */

.stk-cat-arrow {
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 0;
  margin: 0 0.3rem 0 0.35rem;
  border-radius: 12px;
  box-shadow:
    0 4px 0 var(--stk-depth),
    0 6px 14px rgba(15, 23, 42, 0.12);
  animation: stkCatBlinkSubtle 3s ease-in-out infinite;
}

.stk-cat-arrow-body {
  display: inline-flex;
  align-items: center;
  padding: 10px 10px 10px 14px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-right: none;
  border-radius: 12px 0 0 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 40%), var(--stk-face);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.stk-cat-arrow-tip {
  align-self: stretch;
  width: 11px;
  flex-shrink: 0;
  margin-left: -1px;
  background: var(--stk-depth);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.stk-focus-tabs .stk-cat-arrow:first-of-type {
  margin-left: 0.5rem;
}

@keyframes stkCatBlinkSubtle {
  0%, 100% {
    opacity: 1;
    filter: brightness(1);
  }
  50% {
    opacity: 0.94;
    filter: brightness(1.04);
  }
}

.stk-tool-standalone {
  animation: stkPanelSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes stkTabPopIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes stkTabShimmer {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}

@keyframes stkIconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

@keyframes stkPanelSlideIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stk-3d-tab,
  .stk-tool-standalone,
  .stk-cat-arrow {
    animation: none;
    transition: none;
  }

  .stk-3d-tab.is-active .stk-tool-tab-icon {
    animation: none;
  }

  .stk-3d-tab:hover {
    transform: none;
  }
}

/* Selector Card & Spacing */

.flashcard-panel-card {
  background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 24px;
  /* 3D bevel and shadows using indigo tones */
  box-shadow: 0 8px 0 #172554, 0 15px 30px rgba(30, 64, 175, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.flashcard-panel-card:hover {
  transform: translateY(2px);
  box-shadow: 0 6px 0 #172554, 0 12px 24px rgba(30, 64, 175, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.flashcard-selector-section {
  margin-bottom: 20px;
}

.flashcard-selector-section:last-child {
  margin-bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 16px;
}

.flashcard-selector-label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #93c5fd;
  margin-bottom: 12px;
}

.flashcard-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.flashcard-selector-btn {
  padding: 8px 16px;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: #eff6ff;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
}

.flashcard-selector-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.flashcard-selector-btn.active-class {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: #ffffff;
  border-color: #f97316;
  box-shadow: 0 4px 0 #9a3412, 0 6px 12px rgba(249, 115, 22, 0.3);
}

.flashcard-selector-btn.active-subject {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border-color: #059669;
  box-shadow: 0 4px 0 #047857, 0 6px 12px rgba(16, 185, 129, 0.3);
}

/* 3D Flashcard Player Container */

.flashcard-play-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.flashcard-player-card {
  perspective: 1200px;
  width: 100%;
  height: 280px;
  position: relative;
  cursor: pointer;
  user-select: none;
}

.flashcard-inner-box {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
}

.flashcard-player-card.flipped .flashcard-inner-box {
  transform: rotateY(180deg);
}

/* Hover lift animations */

.flashcard-player-card:hover .flashcard-inner-box {
  transform: translateY(-10px);
}

.flashcard-player-card.flipped:hover .flashcard-inner-box {
  transform: rotateY(180deg) translateY(-10px);
}

.flashcard-side-front,
.flashcard-side-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  transform-style: preserve-3d; /* enable child translateZ popping */
}

.flashcard-side-front {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 2px solid rgba(249, 115, 22, 0.25);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.flashcard-side-front:hover {
  border-color: #f97316;
  box-shadow: 0 20px 45px rgba(249, 115, 22, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.flashcard-side-back {
  background: #111827; /* Dark flat navy to match image */
  border: 3px solid #10b981; /* Thick solid green border */
  transform: rotateY(180deg);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.flashcard-side-back:hover {
  box-shadow: 0 20px 45px rgba(16, 185, 129, 0.15);
}

.flashcard-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
  padding-bottom: 10px;
  transform: translateZ(30px); /* 3D layer pop-out */
}

.flashcard-side-back .flashcard-card-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.flashcard-badge {
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.flashcard-badge.orange {
  color: #ea580c;
}

.flashcard-badge.green {
  color: #10b981;
}

.flashcard-side-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: #94a3b8;
}

.flashcard-side-back .flashcard-side-label {
  color: #64748b;
}

.flashcard-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 16px;
  transform: translateZ(60px); /* 3D layer pop-out */
  overflow-y: auto;
  max-height: 180px;
  width: 100%;
  box-sizing: border-box;
}

.flashcard-card-body::-webkit-scrollbar {
  width: 6px;
}

.flashcard-card-body::-webkit-scrollbar-track {
  background: transparent;
}

.flashcard-card-body::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.8);
  border-radius: 4px;
}

.flashcard-text-question {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.5;
  white-space: pre-wrap;
}

.flashcard-text-answer {
  font-size: 1.05rem; /* Larger text as per image */
  font-weight: 700;
  color: #f8fafc; /* Brighter white */
  line-height: 1.5;
  white-space: pre-wrap;
}

.flashcard-grid-3d {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
}

@media (max-width: 1024px) {
  .flashcard-grid-3d {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .flashcard-grid-3d {
    grid-template-columns: 1fr;
  }
}

.flashcard-card-footer {
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-top: 8px;
  transform: translateZ(30px); /* 3D layer pop-out */
}

.flashcard-side-back .flashcard-card-footer {
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
}

/* Play Controls */

.flashcard-play-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 12px;
  padding: 12px 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.01);
}

.flashcard-nav-btn {
  padding: 8px 16px;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.15);
  background: #ffffff;
  color: #1e293b;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.flashcard-nav-btn:hover {
  background: #f8fafc;
  border-color: rgba(148, 163, 184, 0.3);
}

.flashcard-progress-text {
  text-align: center;
}

.flashcard-progress-count {
  font-size: 0.75rem;
  font-weight: 700;
  color: #0f172a;
  display: block;
}

.flashcard-progress-pct {
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  color: #94a3b8;
  letter-spacing: 0.05em;
  display: block;
  margin-top: 2px;
}

/* Statistics & Sidebar Layout */

.flashcard-sidebar {
  background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  box-shadow: 0 8px 0 #7dd3fc, 0 15px 30px rgba(56, 189, 248, 0.2), inset 0 1px 0 #ffffff !important;
  color: #0369a1 !important;
}

.flashcard-sidebar:hover {
  transform: translateY(2px) !important;
  box-shadow: 0 6px 0 #7dd3fc, 0 12px 24px rgba(56, 189, 248, 0.15), inset 0 1px 0 #ffffff !important;
}

.flashcard-sidebar-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #0369a1 !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.25) !important;
  padding-bottom: 10px;
  margin: 0;
}

.flashcard-stats-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.flashcard-stats-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #0e7490 !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.15) !important;
  padding-bottom: 8px;
}

.flashcard-stats-item:last-child {
  border-bottom: none !important;
  padding-bottom: 0;
}

.flashcard-stats-val {
  font-weight: 800;
  color: #0369a1 !important;
}

.flashcard-tip-box {
  background: rgba(255, 255, 255, 0.4) !important;
  padding: 12px !important;
  border-radius: 8px !important;
  border-left: 3px solid #0284c7 !important;
  margin-top: 8px;
}

.flashcard-tip-text {
  font-size: 9px;
  font-weight: 600;
  color: #0369a1 !important;
  line-height: 1.5;
}

/* Custom Builder Specifics */

.flashcard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 600px) {
  .flashcard-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.flashcard-custom-item {
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 12px;
  padding: 16px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}

.flashcard-custom-item:hover {
  border-color: #f97316;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}

.flashcard-custom-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.flashcard-custom-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(148, 163, 184, 0.06);
  padding-top: 8px;
  margin-top: 12px;
  font-size: 9px;
  color: #94a3b8;
  font-weight: 700;
}

.flashcard-delete-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.flashcard-delete-btn:hover {
  color: #ef4444;
}

.flashcard-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.flashcard-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.flashcard-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  color: #475569;
  letter-spacing: 0.05em;
}

.flashcard-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  outline: none;
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color 0.2s;
}

.flashcard-input:focus {
  border-color: #0f172a;
}

.flashcard-textarea {
  min-height: 80px;
  resize: vertical;
}

.flashcard-submit-btn {
  width: 100%;
  padding: 12px;
  font-weight: 700;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

/* ==========================================================================
   Mobile & tablet responsive polish (768px / 480px)
   ========================================================================== */

:root {
  --navbar-height: 70px;
  --navbar-height-landing: 56px;
}

@media (max-width: 768px) {
  :root {
    --navbar-height: 56px;
  }

  .app-container {
    overflow-x: hidden;
    max-width: 100vw;
  }

  .top-navbar:not(.top-navbar--landing) {
    height: var(--navbar-height);
    padding: 0 10px 0 6px;
  }

  .top-navbar-brand {
    height: 40px;
    padding: 0 8px;
    gap: 6px;
    min-width: 0;
    flex-shrink: 1;
  }

  .brand-word {
    font-size: 0.78rem;
  }

  .top-navbar-brand-sub {
    display: none !important;
  }

  .top-navbar-right {
    gap: 8px;
    flex-shrink: 0;
  }

  .mobile-nav-dropdown {
    top: var(--navbar-height);
  }

  .app-container--landing .mobile-nav-dropdown {
    top: var(--navbar-height-landing);
  }

  .main-content:not(.main-content--landing) {
    padding: 12px 14px;
  }

  .stats-banner {
    padding: 6px 12px;
    font-size: 0.68rem;
    gap: 8px 12px;
  }

  .stats-banner > span:not(.stats-banner-item) {
    display: none;
  }

  .toggle-banner {
    padding: 8px 12px;
    gap: 10px;
  }

  .toggle-banner-btn {
    flex: 1;
    padding: 10px 16px;
    min-height: 44px;
  }

  .forum-board-row,
  .forum-category-panel-3d .forum-board-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px 14px;
  }

  .forum-discussion-post {
    flex-direction: column;
  }

  .forum-discussion-post-author {
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
  }

  .forum-discussion-post-author-avatar {
    margin-bottom: 0;
  }

  .landing-simulator {
    min-height: auto;
    padding: 10px 12px;
  }

  .landing-hero__headline {
    font-size: clamp(1.65rem, 7vw, 2.4rem);
  }

  .landing-hero__dash-card--unified {
    padding: 18px 16px;
  }

  .landing-cta,
  .landing-quick-btn {
    min-height: 44px;
  }

  .tab-pane__slider {
    height: 6px;
  }

  .tab-pane__slider::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
  }

  .tab-pane__slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
  }

  .btn-action,
  .btn-flow-toggle,
  .tab-pane__select,
  .btn-wave-play {
    min-height: 44px;
  }

  .product-terminal__maximize-btn {
    min-width: 36px;
    min-height: 36px;
  }

  .calc-header-controls {
    flex-wrap: wrap !important;
  }

  .math-svg-zoom-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
}

@media (max-width: 480px) {
  .main-content:not(.main-content--landing) {
    padding: 10px 12px;
  }

  .brand-word {
    font-size: 0.68rem;
  }

  .top-navbar-brand-logo-container {
    width: 26px;
    height: 26px;
  }

  .dashboard-grid {
    grid-template-columns: 1fr !important;
  }

  .landing-shell .content-row__track {
    grid-template-columns: 1fr;
  }

  .landing-shell .content-row__card {
    width: 100%;
    max-width: none;
    min-height: 88px;
  }

  .product-terminal__header {
    padding: 10px 12px;
  }

  .product-terminal__body {
    padding: 12px;
  }

  .product-terminal--embedded-full .product-terminal__body,
  .product-terminal--fullscreen .product-terminal__body {
    padding: 10px;
  }

  .visitor-stats-bar {
    font-size: 0.72rem;
    padding: 5px 10px;
  }

  .floating-sticky-fab {
    bottom: 16px;
    right: 16px;
    padding: 12px 16px;
    min-height: 44px;
  }

  .sticky-note-wrapper {
    width: calc(100vw - 24px);
    max-width: 320px;
    right: 12px;
    bottom: 72px;
  }
}

/* Additional Mobile & Tablet View Responsiveness Fixes */

@media (max-width: 1099px) {
  .landing-periodic .periodic-grid-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 768px) {
  .forum-board-last-post {
    border-left: none !important;
    padding-left: 0 !important;
    margin-top: 4px;
  }
  
  .forum-discussion-post {
    flex-direction: column !important;
  }
}

@media (max-width: 480px) {
  .pomodoro-card {
    padding: 16px 12px !important;
  }
  .pomodoro-ring-wrapper {
    width: 210px !important;
    height: 210px !important;
  }
  
  /* Make NCERT Catalog shelf card size flex wider */
  .bookshelf-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Responsive Top Navigation Link Adjustments */

.top-navbar-links {
  display: none !important;
}

@media (min-width: 1024px) {
  .top-navbar-links {
    display: flex !important;
  }
}

@media (max-width: 640px) {
  .stats-banner > *:nth-child(n+5) {
    display: none !important;
  }
}

/* Connected Grid Layout but in Separate 3D Styles */

@media (min-width: 768px) {
  .landing-hero--intro .landing-hero__intro-shell {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .landing-hero__left-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: calc(
      100% - var(--landing-ticker-width) - var(--landing-hero-gap) -
        max(0px, calc((100% - var(--landing-align-max)) / 2))
    ) !important;
    max-width: calc(100% - var(--landing-ticker-width) - var(--landing-hero-gap)) !important;
    margin-left: max(0px, calc((100% - var(--landing-align-max)) / 2)) !important;
    margin-right: 0 !important;
  }

  .landing-hero__ticker-container {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: var(--landing-ticker-width) !important;
    height: 100% !important;
    min-height: 100% !important;
    z-index: 1 !important;
  }
}

/* Individual 3D Card Base styles */

.landing-hero__intro-box,
.landing-hero__dash-card--unified,
.landing-hero__ticker-container {
  background: linear-gradient(180deg, rgba(20, 28, 48, 0.65) 0%, rgba(10, 15, 30, 0.85) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.25), 
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  box-sizing: border-box;
}

.landing-hero__intro-box:hover,
.landing-hero__dash-card--unified:hover,
.landing-hero__ticker-container:hover {
  border-color: rgba(56, 189, 248, 0.25) !important;
  box-shadow: 
    0 14px 36px rgba(0, 0, 0, 0.3), 
    0 0 24px rgba(56, 189, 248, 0.08), 
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  transform: translateY(-2px);
}

/* Box 1 & 2: left column cards */

.landing-hero__left-column .landing-hero__intro-box {
  border-radius: 16px !important;
  padding: 32px 24px !important;
  width: 100% !important;
  align-items: flex-start !important;
  text-align: left !important;
}

.landing-hero__left-column .landing-hero__dash-card--unified {
  border-radius: 16px !important;
  padding: 24px !important;
  width: 100% !important;
}

/* Box 3: Scrolling Ticker (rounded corners) */

.landing-hero__ticker-container {
  border-radius: 16px !important;
  padding: 20px !important;
  display: flex;
  flex-direction: column;
  height: 220px; /* Reduced height on mobile to optimize space */
}

/* Desktop padding for left column cards */

@media (min-width: 768px) {
  .landing-hero__left-column .landing-hero__intro-box {
    padding: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 40px) clamp(24px, 3vw, 36px) clamp(24px, 4vw, 56px) !important;
    overflow: hidden;
  }

  .landing-hero__left-column .landing-hero__dash-card--unified {
    padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px) clamp(32px, 4vw, 56px) clamp(24px, 4vw, 56px) !important;
    overflow: hidden;
  }

  .landing-hero__ticker-container {
    border-radius: 16px !important;
    padding: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 56px) clamp(32px, 4vw, 56px) clamp(24px, 3vw, 40px) !important;
    height: 100% !important;
  }
}

.landing-hero__ticker-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--accent-orange);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 10px;
}

.landing-hero__ticker-count {
  margin-left: auto;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.45);
  text-transform: none;
}

.landing-hero__ticker-bullet {
  width: 6px;
  height: 6px;
  background: var(--accent-orange);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent-orange);
}

.landing-hero__ticker-scroll-wrapper {
  flex: 1;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
}

.landing-hero__ticker-track {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: verticalTickerScroll 96s linear infinite;
}

.landing-hero__ticker-scroll-wrapper:hover .landing-hero__ticker-track {
  animation-play-state: paused;
}

@keyframes verticalTickerScroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

.landing-hero__ticker-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  transition: all 0.25s ease;
  box-sizing: border-box;
  width: 100%;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}

.landing-hero__ticker-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(56, 189, 248, 0.25);
  transform: translateY(-1.5px);
}

.landing-hero__ticker-card:focus-visible {
  outline: 2px solid rgba(56, 189, 248, 0.55);
  outline-offset: 2px;
}

.ticker-card--maths,
.ticker-card--mathematics {
  border-left: 3px solid var(--accent-orange) !important;
}

.ticker-card--science,
.ticker-card--physics {
  border-left: 3px solid #38bdf8 !important;
}

.ticker-card--chemistry {
  border-left: 3px solid #34d399 !important;
}

.ticker-card--biology {
  border-left: 3px solid #4ade80 !important;
}

.ticker-card--technology {
  border-left: 3px solid #a78bfa !important;
}

.ticker-card--astronomy {
  border-left: 3px solid #818cf8 !important;
}

.ticker-card__number {
  flex: 0 0 auto;
  min-width: 2.4em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--accent-orange);
  opacity: 0.9;
}

.ticker-card__badge-col {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: visible;
}

.glossary-ticker-badge {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.glossary-ticker-badge__icon {
  position: relative;
  z-index: 1;
}

.glossary-ticker-badge__ring {
  position: absolute;
  inset: 1px;
  border-radius: 5px;
  border: 1px solid currentColor;
  opacity: 0.35;
  animation: glossary-badge-ring 2.4s ease-in-out infinite;
}

.glossary-ticker-badge--mathematics .glossary-ticker-badge__icon {
  animation: glossary-badge-bob 2.2s ease-in-out infinite;
}

.glossary-ticker-badge--physics .glossary-ticker-badge__icon {
  animation: glossary-badge-spin 5s linear infinite;
}

.glossary-ticker-badge--chemistry .glossary-ticker-badge__icon {
  animation: glossary-badge-bob 1.8s ease-in-out infinite;
}

.glossary-ticker-badge--biology .glossary-ticker-badge__icon {
  animation: glossary-badge-pulse 2.6s ease-in-out infinite;
}

.glossary-ticker-badge--technology .glossary-ticker-badge__icon {
  animation: glossary-badge-flicker 1.4s steps(2, end) infinite;
}

.glossary-ticker-badge--astronomy .glossary-ticker-badge__icon {
  animation: glossary-badge-twinkle 2s ease-in-out infinite;
}

@keyframes glossary-badge-ring {
  0%, 100% { transform: scale(1); opacity: 0.28; }
  50% { transform: scale(1.14); opacity: 0.55; }
}

@keyframes glossary-badge-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}

@keyframes glossary-badge-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes glossary-badge-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.12); opacity: 0.82; }
}

@keyframes glossary-badge-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@keyframes glossary-badge-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(1.1) rotate(12deg); opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
  .glossary-ticker-badge__icon,
  .glossary-ticker-badge__ring {
    animation: none !important;
  }
}

.ticker-card--maths .ticker-card__badge-col,
.ticker-card--mathematics .ticker-card__badge-col {
  background: rgba(242, 92, 5, 0.15);
  color: var(--accent-orange);
}

.ticker-card--science .ticker-card__badge-col,
.ticker-card--physics .ticker-card__badge-col {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
}

.ticker-card--chemistry .ticker-card__badge-col {
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
}

.ticker-card--biology .ticker-card__badge-col {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
}

.ticker-card--technology .ticker-card__badge-col {
  background: rgba(167, 139, 250, 0.15);
  color: #a78bfa;
}

.ticker-card--astronomy .ticker-card__badge-col {
  background: rgba(129, 140, 248, 0.15);
  color: #818cf8;
}

.ticker-card__info-col {
  display: flex;
  flex-direction: column;
}

.ticker-card__name {
  font-size: 0.76rem;
  font-weight: 700;
  color: #f8fafc;
  margin: 0;
  line-height: 1.25;
  text-align: left;
}

.ticker-card__desc {
  font-size: 0.64rem;
  font-weight: 600;
  color: #94a3b8;
  margin: 2px 0 0;
  line-height: 1;
  text-align: left;
}

/* ==========================================================================
   Science & Tech Glossary — detail page
   ========================================================================== */

.glossary-page {
  --glossary-accent: #38bdf8;
  min-height: calc(100vh - var(--navbar-height, 70px));
  background: #0b1018;
  color: #f8fafc;
  padding: 20px 16px 48px;
}

.glossary-page--mathematics { --glossary-accent: #f25c05; }

.glossary-page--physics { --glossary-accent: #38bdf8; }

.glossary-page--chemistry { --glossary-accent: #34d399; }

.glossary-page--biology { --glossary-accent: #4ade80; }

.glossary-page--technology { --glossary-accent: #a78bfa; }

.glossary-page--astronomy { --glossary-accent: #818cf8; }

.glossary-page__shell {
  width: min(98vw, 960px);
  margin-inline: auto;
}

.glossary-page__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(255, 255, 255, 0.03);
  color: #e2e8f0;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
}

.glossary-page__back:hover {
  border-color: var(--glossary-accent);
  color: #fff;
}

.glossary-page__topic-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(15, 22, 36, 0.65);
}

.glossary-page__topic-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(255, 255, 255, 0.03);
  color: #e2e8f0;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.glossary-page__topic-nav-btn span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.1;
}

.glossary-page__topic-nav-btn span small {
  font-family: var(--font-body, inherit);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
}

.glossary-page__topic-nav-btn--next {
  justify-self: end;
}

.glossary-page__topic-nav-btn--next span {
  align-items: flex-end;
}

.glossary-page__topic-nav-btn:hover:not(:disabled) {
  border-color: var(--glossary-accent);
  color: #fff;
}

.glossary-page__topic-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.glossary-page__topic-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.glossary-page__topic-index {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--glossary-accent);
}

.glossary-page__topic-of {
  font-size: 0.72rem;
  font-weight: 600;
  color: #94a3b8;
}

.glossary-page__topic-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--glossary-accent);
  background: color-mix(in srgb, var(--glossary-accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--glossary-accent) 35%, transparent);
}

.glossary-page__related-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--glossary-accent);
  opacity: 0.85;
}

.glossary-page__hero {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 340px);
  gap: 20px;
  align-items: stretch;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(145deg, rgba(20, 28, 48, 0.8), rgba(10, 15, 30, 0.95));
  margin-bottom: 20px;
}

.glossary-page__badge-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.glossary-page__field {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--glossary-accent);
}

.glossary-page__title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin: 0 0 10px;
  line-height: 1.15;
}

.glossary-page__summary {
  margin: 0;
  color: #94a3b8;
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 52ch;
}

.glossary-page__section {
  padding: 20px 22px;
  margin-bottom: 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(15, 22, 36, 0.75);
}

.glossary-page__section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--glossary-accent);
}

.glossary-page__body {
  margin: 0;
  color: #cbd5e1;
  line-height: 1.65;
  font-size: 0.92rem;
}

.glossary-page__list {
  margin: 0;
  padding-left: 1.1rem;
  color: #cbd5e1;
  display: grid;
  gap: 8px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.glossary-page__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.glossary-page__formula-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.glossary-page__formula-list code {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--font-mono, "Fira Code", monospace);
  font-size: 0.82rem;
  color: #e2e8f0;
}

.glossary-page__tag-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.glossary-page__tag-list li {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.78rem;
  font-weight: 600;
  color: #e2e8f0;
}

.glossary-page__fact {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  margin-bottom: 16px;
  border-radius: 14px;
  border: 1px solid rgba(242, 92, 5, 0.25);
  background: linear-gradient(135deg, rgba(242, 92, 5, 0.12), rgba(15, 22, 36, 0.9));
  color: #fdba74;
}

.glossary-page__fact h3 {
  margin: 0 0 6px;
  font-size: 0.88rem;
}

.glossary-page__fact p {
  margin: 0;
  color: #fde68a;
  font-size: 0.88rem;
  line-height: 1.55;
}

.glossary-page__related {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.glossary-page__related-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: #f8fafc;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
}

.glossary-page__related-btn:hover {
  border-color: var(--glossary-accent);
  transform: translateY(-1px);
}

.glossary-reveal {
  animation: glossary-reveal-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(0.06s + var(--reveal-i, 0) * 0.07s);
}

@keyframes glossary-reveal-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Animated field visualizations */

.glossary-viz {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  min-height: 180px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.35);
}

.glossary-viz__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--glossary-accent) 28%, transparent), transparent 68%);
  animation: glossary-viz-glow 4s ease-in-out infinite;
}

.glossary-viz__svg {
  width: 100%;
  height: 100%;
  display: block;
}

.glossary-viz__caption {
  position: absolute;
  left: 10px;
  bottom: 8px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.glossary-viz__grid line {
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 1;
}

.glossary-viz__wave--math {
  stroke-dasharray: 420;
  animation: glossary-draw 3s ease-in-out infinite alternate;
}

.glossary-viz__nucleus { fill: var(--glossary-accent); }

.glossary-viz__orbit { stroke: rgba(56, 189, 248, 0.35); stroke-width: 1.2; }

.glossary-viz__electron { fill: #7dd3fc; }

.glossary-viz__bond { stroke: #34d399; stroke-width: 2; animation: glossary-bond-pulse 2s ease-in-out infinite; }

.glossary-viz__atom { fill: #34d399; animation: glossary-atom-float 2.4s ease-in-out infinite; }

.glossary-viz__atom--b { animation-delay: 0.3s; }

.glossary-viz__atom--c { animation-delay: 0.6s; }

.glossary-viz__atom--d { animation-delay: 0.9s; }

.glossary-viz__helix { stroke: #4ade80; stroke-width: 2.5; stroke-linecap: round; }

.glossary-viz__helix--a { animation: glossary-helix-a 3s ease-in-out infinite; }

.glossary-viz__helix--b { animation: glossary-helix-b 3s ease-in-out infinite; }

.glossary-viz__rung { stroke: rgba(74, 222, 128, 0.55); stroke-width: 1.5; }

.glossary-viz__chip { fill: rgba(167, 139, 250, 0.15); stroke: #a78bfa; stroke-width: 1.5; }

.glossary-viz__pin { stroke: #a78bfa; stroke-width: 2; animation: glossary-pin-blink 1.2s steps(2) infinite; }

.glossary-viz__pulse-line { stroke: #c4b5fd; stroke-width: 2; stroke-dasharray: 180; animation: glossary-draw 2s linear infinite; }

.glossary-viz__star { fill: #fbbf24; filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.8)); animation: glossary-star-pulse 2.2s ease-in-out infinite; }

.glossary-viz__orbit-path { stroke: rgba(129, 140, 248, 0.35); stroke-width: 1; }

.glossary-viz__planet { fill: #818cf8; }

.glossary-viz__spark { fill: #fff; opacity: 0.7; animation: glossary-spark 2.4s ease-in-out infinite; }

@keyframes glossary-viz-glow {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}

@keyframes glossary-draw {
  from { stroke-dashoffset: 180; }
  to { stroke-dashoffset: 0; }
}

@keyframes glossary-bond-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

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

@keyframes glossary-helix-a {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

@keyframes glossary-helix-b {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-4px); }
}

@keyframes glossary-pin-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@keyframes glossary-star-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes glossary-spark {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.95; }
}

/* Topic-specific vector diagram */

.glossary-viz__axis {
  stroke: rgba(255, 255, 255, 0.25);
  stroke-width: 1.5;
}

.glossary-viz__axis-label,
.glossary-viz__vec-label,
.glossary-viz__angle-label,
.glossary-viz__matrix-val {
  fill: rgba(255, 255, 255, 0.65);
  font-size: 11px;
  font-family: ui-monospace, monospace;
  font-weight: 600;
}

.glossary-viz__vec-label--sum { fill: #f25c05; }

.glossary-viz__vector {
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 120;
  animation: glossary-draw 2.4s ease-in-out infinite alternate;
}

.glossary-viz__vector--a { stroke: #fb923c; animation-delay: 0s; }

.glossary-viz__vector--b { stroke: #fdba74; animation-delay: 0.4s; }

.glossary-viz__vector--sum { stroke: #f25c05; stroke-width: 3; animation-delay: 0.8s; }

.glossary-viz__parallelogram {
  stroke: rgba(251, 146, 60, 0.35);
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
  animation: glossary-parallelogram 3s ease-in-out infinite;
}

.glossary-viz__parallelogram--2 { animation-delay: 0.5s; }

.glossary-viz__angle-arc {
  stroke: rgba(251, 146, 60, 0.7);
  stroke-width: 1.5;
}

@keyframes glossary-parallelogram {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.9; }
}

/* Derivative / calculus */

.glossary-viz__curve { stroke-dasharray: 400; animation: glossary-draw 3s ease-in-out infinite alternate; }

.glossary-viz__point { fill: #f25c05; animation: glossary-point-pulse 1.6s ease-in-out infinite; }

.glossary-viz__tangent {
  stroke: #fdba74;
  stroke-width: 2;
  stroke-dasharray: 140;
  animation: glossary-draw 2s ease-in-out infinite;
}

@keyframes glossary-point-pulse {
  0%, 100% { r: 4; opacity: 0.85; }
  50% { r: 6; opacity: 1; }
}

/* Trigonometry */

.glossary-viz__unit-circle { stroke: rgba(251, 146, 60, 0.45); stroke-width: 1.5; }

.glossary-viz__radius-arm {
  transform-origin: 130px 95px;
  animation: glossary-rotate-arm 4s linear infinite;
}

.glossary-viz__radius { stroke: #fb923c; stroke-width: 2.5; }

.glossary-viz__sin-line { stroke: #38bdf8; stroke-width: 2; }

.glossary-viz__cos-line { stroke: #4ade80; stroke-width: 2; }

@keyframes glossary-rotate-arm {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Matrix */

.glossary-viz__matrix-frame { fill: rgba(251, 146, 60, 0.08); stroke: rgba(251, 146, 60, 0.35); }

.glossary-viz__matrix-cell { fill: rgba(0, 0, 0, 0.25); stroke: rgba(251, 146, 60, 0.25); }

.glossary-viz__matrix-cell--0,
.glossary-viz__matrix-cell--4,
.glossary-viz__matrix-cell--8 {
  animation: glossary-matrix-pulse 2s ease-in-out infinite;
}

@keyframes glossary-matrix-pulse {
  0%, 100% { fill: rgba(251, 146, 60, 0.15); }
  50% { fill: rgba(251, 146, 60, 0.45); }
}

/* Probability */

.glossary-viz__bell-stroke { stroke: #fb923c; stroke-dasharray: 300; animation: glossary-draw 3s ease-in-out infinite alternate; }

.glossary-viz__prob-band { fill: rgba(251, 146, 60, 0.2); animation: glossary-band-pulse 2.2s ease-in-out infinite; }

@keyframes glossary-band-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* SHM */

.glossary-viz__spring-coil { stroke: #94a3b8; stroke-width: 1.5; }

.glossary-viz__shm-mass { animation: glossary-shm-bounce 1.8s ease-in-out infinite; }

.glossary-viz__mass-block { fill: rgba(56, 189, 248, 0.35); stroke: #38bdf8; }

.glossary-viz__shm-wave { stroke: #38bdf8; stroke-dasharray: 280; animation: glossary-draw 2s linear infinite; }

@keyframes glossary-shm-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(14px); }
}

/* Buoyancy */

.glossary-viz__fluid { fill: rgba(56, 189, 248, 0.15); }

.glossary-viz__water-line { stroke: #38bdf8; stroke-width: 2; animation: glossary-water-wave 2.5s ease-in-out infinite; }

.glossary-viz__float-block { fill: rgba(251, 146, 60, 0.4); stroke: #fb923c; animation: glossary-float 3s ease-in-out infinite; }

.glossary-viz__force { stroke-width: 2.5; }

.glossary-viz__force--up { stroke: #38bdf8; animation: glossary-force-up 2s ease-in-out infinite; }

.glossary-viz__force--down { stroke: #f87171; }

@keyframes glossary-water-wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(2px); }
}

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

@keyframes glossary-force-up {
  0%, 100% { stroke-dasharray: 40; stroke-dashoffset: 0; }
  50% { stroke-dashoffset: 8; }
}

/* Waves */

.glossary-viz__wave-line--1 { stroke: #38bdf8; stroke-dasharray: 320; animation: glossary-wave-travel 2.5s linear infinite; }

.glossary-viz__wave-line--2 { stroke: #7dd3fc; animation: glossary-wave-travel 2.5s linear infinite reverse; }

.glossary-viz__wavelength { stroke: #fbbf24; stroke-width: 1.5; animation: glossary-band-pulse 2s ease-in-out infinite; }

@keyframes glossary-wave-travel {
  from { stroke-dashoffset: 320; }
  to { stroke-dashoffset: 0; }
}

/* Circuit */

.glossary-viz__circuit-wire { stroke: #fbbf24; stroke-width: 2; }

.glossary-viz__battery { fill: rgba(251, 191, 36, 0.2); stroke: #fbbf24; }

.glossary-viz__resistor { fill: rgba(248, 113, 113, 0.2); stroke: #f87171; }

.glossary-viz__electron-flow { fill: #fef08a; filter: drop-shadow(0 0 4px #fef08a); }

/* Projectile */

.glossary-viz__trajectory { stroke: #fb923c; stroke-dasharray: 280; animation: glossary-draw 2.5s ease-in-out infinite alternate; }

.glossary-viz__velocity-arrow { stroke: #fdba74; stroke-width: 2; }

.glossary-viz__projectile-ball { fill: #f25c05; }

/* Molecule nodes */

.glossary-viz__atom-node { fill: #34d399; animation: glossary-atom-float 2.4s ease-in-out infinite; }

.glossary-viz__atom-node--b { animation-delay: 0.3s; }

.glossary-viz__atom-node--c { animation-delay: 0.6s; }

.glossary-viz__atom-node--d { animation-delay: 0.9s; }

/* Neural network */

.glossary-viz__nn-edge { stroke: rgba(167, 139, 250, 0.35); stroke-width: 1; animation: glossary-nn-pulse 1.8s ease-in-out infinite; }

.glossary-viz__nn-edge--2 { stroke: rgba(196, 181, 253, 0.45); }

.glossary-viz__nn-node { fill: #a78bfa; animation: glossary-nn-node 1.4s ease-in-out infinite; }

.glossary-viz__nn-node--1 { fill: #c4b5fd; }

@keyframes glossary-nn-pulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.95; }
}

@keyframes glossary-nn-node {
  0%, 100% { transform: scale(1); opacity: 0.75; }
  50% { transform: scale(1.2); opacity: 1; }
}

@media (max-width: 768px) {
  .glossary-page__hero,
  .glossary-page__split {
    grid-template-columns: 1fr;
  }

  .glossary-page__topic-nav {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .glossary-page__topic-nav-btn,
  .glossary-page__topic-nav-btn--next {
    justify-self: stretch;
    justify-content: center;
  }

  .glossary-page__topic-nav-btn--next span {
    align-items: center;
  }

  .glossary-viz {
    min-height: 150px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .glossary-reveal,
  .glossary-viz__glow,
  .glossary-viz__wave--math,
  .glossary-viz__bond,
  .glossary-viz__atom,
  .glossary-viz__helix--a,
  .glossary-viz__helix--b,
  .glossary-viz__pin,
  .glossary-viz__pulse-line,
  .glossary-viz__star,
  .glossary-viz__spark,
  .glossary-viz__vector,
  .glossary-viz__parallelogram,
  .glossary-viz__curve,
  .glossary-viz__tangent,
  .glossary-viz__point,
  .glossary-viz__radius-arm,
  .glossary-viz__matrix-cell--0,
  .glossary-viz__matrix-cell--4,
  .glossary-viz__matrix-cell--8,
  .glossary-viz__bell-stroke,
  .glossary-viz__prob-band,
  .glossary-viz__shm-mass,
  .glossary-viz__shm-wave,
  .glossary-viz__water-line,
  .glossary-viz__float-block,
  .glossary-viz__force--up,
  .glossary-viz__wave-line--1,
  .glossary-viz__wave-line--2,
  .glossary-viz__trajectory,
  .glossary-viz__atom-node,
  .glossary-viz__nn-edge,
  .glossary-viz__nn-node {
    animation: none !important;
  }
}

/* Interactive Topic Detail Modal & Simulator Overrides */

.topic-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
  animation: fadeInModal 0.25s ease-out;
}

@keyframes fadeInModal {
  from { opacity: 0; }
  to { opacity: 1; }
}

.topic-modal-card {
  width: 100%;
  max-width: 1050px;
  background: linear-gradient(180deg, #0e1628 0%, #060a12 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(56, 189, 248, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  animation: scaleInCard 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes scaleInCard {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.topic-modal-header {
  display: flex;
  align-items: center;
  justify-content: flex-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.topic-modal-header-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.topic-modal-header-title h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 800;
  color: #f8fafc;
  margin: 0;
}

.topic-modal-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 4px;
}

.badge--maths {
  background: rgba(249, 115, 22, 0.15);
  color: var(--accent-orange);
  border: 1px solid rgba(249, 115, 22, 0.25);
}

.badge--science {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.25);
}

.topic-modal-close-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: auto;
}

.topic-modal-close-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
  transform: rotate(90deg);
}

.topic-modal-body {
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 800px) {
  .topic-modal-body {
    grid-template-columns: 1.1fr 0.9fr;
    gap: 32px;
  }
}

.topic-modal-details-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

.topic-modal-formula-box {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.formula-box__tag {
  font-size: 0.64rem;
  font-weight: 800;
  color: var(--accent-orange);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.formula-box__val {
  font-size: 1rem;
  font-weight: 700;
  color: #f8fafc;
}

.topic-modal-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.section-title {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 900;
  color: #94a3b8;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}

.section-text {
  font-size: 0.8rem;
  line-height: 1.5;
  color: #cbd5e1;
  margin: 0;
}

/* Simulator controls inputs spacing overrides */

.ticker-sim-inputs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 14px;
}

.ticker-sim-slider-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ticker-sim-slider-row label {
  font-size: 0.74rem;
  font-weight: 700;
  color: #e2e8f0;
}

.ticker-sim-slider-row input[type="range"] {
  width: 100%;
  accent-color: var(--accent-orange);
  height: 4px;
  background: #334155;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

/* Simulator Right Column graphics canvas container */

.topic-modal-simulator-col {
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 20px;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.4);
}

.simulator-canvas-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.66rem;
  font-weight: 900;
  color: #10b981;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding-bottom: 8px;
}

.simulator-canvas-indicator {
  width: 5px;
  height: 5px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 8px #10b981;
  animation: blinkPulse 2s infinite;
}

@keyframes blinkPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.simulator-canvas-wrap {
  width: 100%;
  aspect-ratio: 1/1;
  max-width: 320px;
  margin: 0 auto 16px;
  background: #070c16;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.ticker-sim-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.simulator-canvas-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 14px;
  text-align: left;
}

.ticker-sim-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.74rem;
  color: #94a3b8;
}

/* ==========================================================================
   Glossary topic cards — animated professional grid
   ========================================================================== */

.landing-hero__ticker-browse {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(242, 92, 5, 0.35);
  background: rgba(242, 92, 5, 0.1);
  color: #fdba74;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.landing-hero__ticker-browse:hover {
  background: rgba(242, 92, 5, 0.2);
  border-color: rgba(242, 92, 5, 0.55);
  color: #fff;
}

.landing-hero__ticker-track .glossary-topic-card--compact {
  width: 100%;
  flex-shrink: 0;
}

.glossary-topic-card {
  --card-accent: #38bdf8;
  --card-accent-soft: rgba(56, 189, 248, 0.14);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  padding: 0;
  border: none;
  border-radius: 16px;
  background: linear-gradient(155deg, rgba(18, 26, 44, 0.95), rgba(8, 12, 22, 0.98));
  color: #f8fafc;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 12px 32px rgba(0, 0, 0, 0.35);
  transform: translateY(18px);
  opacity: 0;
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.55s ease,
    box-shadow 0.35s ease;
  transition-delay: calc(var(--card-i, 0) * 45ms);
}

.glossary-topic-card--visible {
  transform: translateY(0);
  opacity: 1;
}

.glossary-topic-card--mathematics { --card-accent: #f25c05; --card-accent-soft: rgba(242, 92, 5, 0.16); }

.glossary-topic-card--physics { --card-accent: #38bdf8; --card-accent-soft: rgba(56, 189, 248, 0.16); }

.glossary-topic-card--chemistry { --card-accent: #34d399; --card-accent-soft: rgba(52, 211, 153, 0.16); }

.glossary-topic-card--biology { --card-accent: #4ade80; --card-accent-soft: rgba(74, 222, 128, 0.16); }

.glossary-topic-card--technology { --card-accent: #a78bfa; --card-accent-soft: rgba(167, 139, 250, 0.16); }

.glossary-topic-card--astronomy { --card-accent: #818cf8; --card-accent-soft: rgba(129, 140, 248, 0.16); }

.glossary-topic-card__border {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--card-accent) 70%, transparent),
    transparent 42%,
    color-mix(in srgb, var(--card-accent) 40%, transparent)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.55;
  animation: glossary-card-border-spin 6s linear infinite;
  pointer-events: none;
}

.glossary-topic-card__shine {
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(
    105deg,
    transparent 42%,
    rgba(255, 255, 255, 0.07) 50%,
    transparent 58%
  );
  transform: translateX(-120%);
  transition: transform 0.7s ease;
  pointer-events: none;
}

.glossary-topic-card:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 20px 48px rgba(0, 0, 0, 0.45),
    0 0 0 1px color-mix(in srgb, var(--card-accent) 35%, transparent);
  transform: translateY(-6px);
}

.glossary-topic-card--visible:hover {
  transform: translateY(-6px);
}

.glossary-topic-card:hover .glossary-topic-card__shine {
  transform: translateX(120%);
}

.glossary-topic-card:focus-visible {
  outline: 2px solid var(--card-accent);
  outline-offset: 3px;
}

.glossary-topic-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 0;
  z-index: 1;
}

.glossary-topic-card__num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--card-accent);
}

.glossary-card-art {
  position: relative;
  margin: 12px 14px 0;
  height: 108px;
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(circle at 30% 30%, var(--card-accent-soft), rgba(0, 0, 0, 0.45));
  border: 1px solid rgba(255, 255, 255, 0.05);
  z-index: 1;
}

.glossary-card-art__grid {
  position: absolute;
  inset: 0;
  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);
  background-size: 18px 18px;
  animation: glossary-card-grid-drift 12s linear infinite;
}

.glossary-card-art__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(0.5px);
  background: var(--card-accent);
  opacity: 0.75;
}

.glossary-card-art__orb--1 {
  width: 42px;
  height: 42px;
  top: 22%;
  left: 18%;
  animation: glossary-card-orb-1 4.2s ease-in-out infinite;
}

.glossary-card-art__orb--2 {
  width: 24px;
  height: 24px;
  top: 48%;
  right: 22%;
  opacity: 0.55;
  animation: glossary-card-orb-2 3.4s ease-in-out infinite;
}

.glossary-card-art__wave {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 28%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--card-accent), transparent);
  animation: glossary-card-wave 2.8s ease-in-out infinite;
}

.glossary-card-art__core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--card-accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--card-accent) 80%, transparent);
  animation: glossary-card-core-pulse 2s ease-in-out infinite;
}

.glossary-card-art--mathematics .glossary-card-art__wave { animation-duration: 2.2s; }

.glossary-card-art--physics .glossary-card-art__orb--1 {
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  animation-name: glossary-card-orbit;
}

.glossary-card-art--chemistry .glossary-card-art__orb--2 { animation-name: glossary-card-bond; }

.glossary-card-art--biology .glossary-card-art__core { border-radius: 40% 60% 50% 50%; animation-name: glossary-card-helix; }

.glossary-card-art--technology .glossary-card-art__grid { animation-duration: 6s; }

.glossary-card-art--astronomy .glossary-card-art__orb--1 { animation-name: glossary-card-orbit; }

.glossary-topic-card__body {
  padding: 14px 16px 10px;
  z-index: 1;
}

.glossary-topic-card__field {
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--card-accent);
  margin-bottom: 6px;
}

.glossary-topic-card__title {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
}

.glossary-topic-card__summary {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #94a3b8;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.glossary-topic-card__cta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 12px 16px 14px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #cbd5e1;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  z-index: 1;
  transition: color 0.25s ease;
}

.glossary-topic-card:hover .glossary-topic-card__cta {
  color: var(--card-accent);
}

.glossary-topic-card__cta-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--card-accent);
  box-shadow: 0 0 10px var(--card-accent);
  animation: glossary-card-core-pulse 1.6s ease-in-out infinite;
}

/* Compact — hero ticker */

.glossary-topic-card--compact {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  border-radius: 10px;
  padding: 10px 12px;
  gap: 8px;
  transform: none;
  opacity: 1;
  transition-delay: 0ms;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.glossary-topic-card--compact .glossary-topic-card__header {
  padding: 0;
  flex: 0 0 auto;
}

.glossary-topic-card--compact .glossary-topic-card__body {
  flex: 1 1 120px;
  padding: 0;
  min-width: 0;
}

.glossary-topic-card--compact .glossary-topic-card__title {
  margin: 0;
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.glossary-topic-card--compact .glossary-topic-card__field {
  margin-bottom: 2px;
  font-size: 0.58rem;
}

.glossary-topic-card--compact .glossary-topic-card__cta {
  display: none;
}

.glossary-topic-card--compact .glossary-topic-card__border {
  animation-duration: 10s;
}

/* Full glossary section */

.science-glossary-section {
  padding: 24px 0 56px;
  background: transparent;
  border-top: none;
  border-bottom: none;
}

.glossary-browse-page {
  min-height: calc(100vh - var(--navbar-height, 70px));
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(242, 92, 5, 0.08), transparent),
    linear-gradient(180deg, #0b1018, #080c14);
}

.glossary-browse-page__topbar {
  width: min(98vw, 1200px);
  margin: 0 auto;
  padding: 20px 16px 0;
}

.glossary-browse-page__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(255, 255, 255, 0.03);
  color: #e2e8f0;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
}

.glossary-browse-page__back:hover {
  border-color: var(--accent-orange);
  color: #fff;
}

.glossary-browse-page .science-glossary-section {
  padding: 20px 0 56px;
  background: transparent;
  border: none;
}

/* Full glossary section (browse page) */

.science-glossary-section--standalone {
  padding: 48px 0 56px;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(242, 92, 5, 0.08), transparent),
    linear-gradient(180deg, rgba(8, 12, 20, 0.4), rgba(8, 12, 20, 0.9));
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.science-glossary-section__shell {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.science-glossary-section__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.science-glossary-section__eyebrow {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-orange);
  margin-bottom: 8px;
}

.science-glossary-section__title {
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 900;
  color: #fff;
}

.science-glossary-section__subtitle {
  margin: 0;
  max-width: 52ch;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #94a3b8;
}

.science-glossary-section__subtitle strong {
  color: #e2e8f0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.science-glossary-section__search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: min(100%, 320px);
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.35);
  color: #94a3b8;
}

.science-glossary-section__search input {
  flex: 1;
  border: none;
  background: transparent;
  color: #f1f5f9;
  font-size: 0.88rem;
  outline: none;
}

.science-glossary-section__search input::placeholder {
  color: #64748b;
}

.science-glossary-section__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.science-glossary-section__filter {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all 0.25s ease;
}

.science-glossary-section__filter.is-active,
.science-glossary-section__filter:hover {
  color: #fff;
  border-color: color-mix(in srgb, var(--card-accent, #38bdf8) 45%, transparent);
  background: color-mix(in srgb, var(--card-accent, #38bdf8) 12%, transparent);
}

.science-glossary-section__filter--mathematics { --card-accent: #f25c05; }

.science-glossary-section__filter--physics { --card-accent: #38bdf8; }

.science-glossary-section__filter--chemistry { --card-accent: #34d399; }

.science-glossary-section__filter--biology { --card-accent: #4ade80; }

.science-glossary-section__filter--technology { --card-accent: #a78bfa; }

.science-glossary-section__filter--astronomy { --card-accent: #818cf8; }

.science-glossary-section__count {
  margin: 0;
  font-size: 0.8rem;
  color: #64748b;
}

.science-glossary-section__count strong {
  color: #e2e8f0;
}

.science-glossary-section__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.science-glossary-section__empty {
  margin: 24px 0 0;
  text-align: center;
  color: #94a3b8;
  font-size: 0.9rem;
}

@keyframes glossary-card-border-spin {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.9; }
}

@keyframes glossary-card-grid-drift {
  from { background-position: 0 0; }
  to { background-position: 18px 18px; }
}

@keyframes glossary-card-orb-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(12px, -8px) scale(1.08); }
}

@keyframes glossary-card-orb-2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-10px, 6px); }
}

@keyframes glossary-card-orbit {
  from { transform: rotate(0deg) translateX(28px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(28px) rotate(-360deg); }
}

@keyframes glossary-card-bond {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50% { transform: scale(1.25); opacity: 0.95; }
}

@keyframes glossary-card-helix {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50% { transform: rotate(8deg) scale(1.12); }
}

@keyframes glossary-card-wave {
  0%, 100% { opacity: 0.35; transform: scaleX(0.85); }
  50% { opacity: 1; transform: scaleX(1); }
}

@keyframes glossary-card-core-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.15); opacity: 1; }
}

@media (max-width: 768px) {
  .science-glossary-section {
    padding: 36px 0 44px;
  }

  .science-glossary-section__grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .glossary-topic-card,
  .glossary-topic-card__border,
  .glossary-card-art__grid,
  .glossary-card-art__orb,
  .glossary-card-art__wave,
  .glossary-card-art__core,
  .glossary-topic-card__cta-dot {
    animation: none !important;
    transition: none !important;
  }

  .glossary-topic-card {
    transform: none;
    opacity: 1;
  }
}

/* Something By Zero design pass: landing/nav polish */

.top-navbar--landing {
  height: 64px;
  padding: 0 clamp(12px, 2.2vw, 28px);
  background:
    linear-gradient(180deg, rgba(8, 13, 24, 0.94), rgba(8, 13, 24, 0.82)),
    rgba(8, 13, 24, 0.9);
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24);
}

.top-navbar--landing .top-navbar-brand,
.top-navbar--landing .top-navbar-link {
  border-radius: 8px;
  box-shadow: none;
}

.top-navbar--landing .top-navbar-brand {
  height: 42px;
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(148, 163, 184, 0.18);
}

.top-navbar--landing .top-navbar-link {
  height: 40px;
  padding-inline: 12px;
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(148, 163, 184, 0.14);
  color: rgba(226, 232, 240, 0.76);
  letter-spacing: 0.04em;
}

.top-navbar--landing .top-navbar-link:hover,
.top-navbar--landing .top-navbar-brand:hover {
  transform: translateY(-1px);
  border-color: rgba(251, 146, 60, 0.36);
  background: rgba(30, 41, 59, 0.82);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.top-navbar--landing .top-navbar-link.active {
  background: linear-gradient(180deg, #fb7b31 0%, #e95716 100%) !important;
  border-color: rgba(255, 237, 213, 0.32) !important;
  box-shadow: 0 12px 24px rgba(234, 88, 12, 0.28) !important;
}

.top-navbar-signin,
.top-navbar-menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.78);
  color: #f8fafc;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.top-navbar-signin {
  padding: 0 14px;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.top-navbar-menu-button {
  width: 38px;
  padding: 0;
}

.top-navbar-signin:hover,
.top-navbar-menu-button:hover {
  transform: translateY(-1px);
  border-color: rgba(251, 146, 60, 0.38);
  background: rgba(30, 41, 59, 0.9);
}

@media (max-width: 639px) {
  .top-navbar-signin {
    display: none;
  }
}

@media (min-width: 1024px) {
  .top-navbar-menu-button {
    display: none;
  }
}

.landing-page {
  padding-top: 64px;
  --landing-ticker-width: min(31vw, 360px);
  --landing-hero-gap: clamp(14px, 1.8vw, 24px);
}

.landing-hero--intro {
  padding-top: clamp(18px, 2.4vw, 30px);
}

.landing-hero__backdrop {
  background:
    radial-gradient(ellipse 58% 46% at 20% 18%, rgba(251, 146, 60, 0.14), transparent 58%),
    radial-gradient(ellipse 42% 46% at 90% 18%, rgba(56, 189, 248, 0.1), transparent 58%),
    #070d18;
}

.landing-hero__mesh {
  opacity: 0.74;
  background:
    radial-gradient(ellipse 46% 36% at 18% 28%, rgba(242, 92, 5, 0.18) 0%, transparent 56%),
    radial-gradient(ellipse 42% 40% at 82% 18%, rgba(56, 189, 248, 0.12) 0%, transparent 54%);
}

.landing-hero__left-column .landing-hero__intro-box,
.landing-hero__left-column .landing-hero__dash-card--unified,
.landing-hero__ticker-container {
  background:
    linear-gradient(180deg, rgba(17, 24, 39, 0.82) 0%, rgba(8, 13, 24, 0.88) 100%) !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.landing-hero__left-column .landing-hero__intro-box {
  min-height: 312px;
  justify-content: center;
}

.landing-hero__headline {
  max-width: 760px;
  font-size: clamp(2.25rem, 4.45vw, 4.55rem);
  line-height: 0.98;
  letter-spacing: 0;
  margin-bottom: 18px;
}

.landing-hero__headline-accent {
  display: inline;
  background: linear-gradient(135deg, #ffffff 0%, #fed7aa 45%, #f97316 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.landing-hero__subtext {
  max-width: 820px;
  color: rgba(226, 232, 240, 0.72);
  font-size: clamp(0.98rem, 1.45vw, 1.16rem);
}

.landing-hero__dash-card--unified {
  min-height: 196px;
}

.landing-hero__dash-card-content {
  gap: 12px;
}

.landing-cta,
.landing-quick-btn {
  min-height: 42px;
  border-radius: 8px;
}

.landing-quick-btn {
  background: rgba(15, 23, 42, 0.66);
  color: rgba(226, 232, 240, 0.78);
}

.landing-hero__ticker-browse {
  min-height: 38px;
  border-radius: 8px;
  color: #fed7aa;
  background: rgba(124, 45, 18, 0.2);
  border-color: rgba(251, 146, 60, 0.28);
}

.mobile-nav-dropdown {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: rgba(8, 13, 24, 0.98);
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
}

.mobile-nav-dropdown button {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: rgba(226, 232, 240, 0.88);
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: left;
}

.mobile-nav-dropdown button:hover,
.mobile-nav-dropdown .bg-orange-600 {
  background: rgba(234, 88, 12, 0.92) !important;
  color: #ffffff !important;
}

@media (max-width: 767px) {
  .top-navbar--landing {
    height: 58px;
  }

  .landing-page {
    padding-top: 58px;
  }

  .mobile-nav-dropdown {
    top: 58px;
  }

  .top-navbar--landing .top-navbar-brand {
    max-width: calc(100vw - 72px);
  }

  .top-navbar--landing .brand-word {
    font-size: 0.82rem;
  }

  .landing-hero--intro {
    padding: 12px;
  }

  .landing-hero__left-column .landing-hero__intro-box {
    min-height: auto;
    padding: 28px 20px !important;
  }

  .landing-hero__headline {
    font-size: clamp(2.05rem, 12vw, 3.1rem);
  }

  .landing-hero__dash-card--unified {
    min-height: auto;
    padding: 20px !important;
  }

  .landing-hero__dash-card-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .landing-cta,
  .landing-quick-btn {
    width: 100%;
    justify-content: center;
    padding-inline: 10px;
  }
}

/* --- Standard navigation & performance --- */

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 10000;
  padding: 10px 16px;
  border-radius: 8px;
  background: #f25c05;
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.skip-link:focus {
  top: 12px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.top-navbar-brand--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.top-navbar-brand--link:focus-visible {
  outline: 2px solid #f25c05;
  outline-offset: 4px;
  border-radius: 8px;
}

.site-breadcrumbs {
  max-width: 1200px;
  margin: 0 auto 12px;
  padding: 0 16px;
}

.site-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.75rem;
}

.site-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #94a3b8;
}

.site-breadcrumbs__link {
  color: #64748b;
  text-decoration: none;
  font-weight: 600;
}

.site-breadcrumbs__link:hover {
  color: #f97316;
  text-decoration: underline;
}

.site-breadcrumbs__current {
  color: #0f172a;
  font-weight: 700;
}

.site-breadcrumbs__sep {
  color: #cbd5e1;
  user-select: none;
}

.mobile-nav-link {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  background: transparent;
}

.mobile-nav-link:hover {
  background: rgba(255, 255, 255, 0.05);
}

.mobile-nav-link.active {
  background: #ea580c;
}

.toggle-banner-btn--link {
  text-decoration: none;
  /* Removed color: inherit; so it uses the defined .toggle-banner-btn color */
}

.page-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 240px;
  color: #94a3b8;
  font-weight: 600;
}

.page-loader__spinner {
  width: 22px;
  height: 22px;
  border: 3px solid rgba(148, 163, 184, 0.25);
  border-top-color: #f97316;
  border-radius: 50%;
  animation: page-loader-spin 0.8s linear infinite;
}

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

/* ═══════════════════════════════════════════════════════════════════════════
   TYPING PRACTICE COMPONENT
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   Typing Practice — Monkeytype-inspired (Focus tab)
   ═══════════════════════════════════════════════════════════════════════════ */

.typing-practice-root {
  --mt-bg: #2c2e31;
  --mt-bg-soft: #323437;
  --mt-main: #d1d0c5;
  --mt-sub: #8a8c90;
  --mt-error: #ff3333;
  --mt-error-bg: rgba(255, 51, 51, 0.18);
  --mt-accent: #e2b714;
  --mt-accent-dim: rgba(226, 183, 20, 0.15);
  --mt-correct: #ffffff;
  --mt-card: #252629;
  --mt-border: rgba(255, 255, 255, 0.06);
  --mt-category-accent: #e2b714;
  --mt-font-size: 1.525rem;
  --mt-line-height: 2.9375rem;
  --mt-line-gap: 0.8125rem;
  --mt-visible-lines: 10;
  --mt-scroll-step: calc(var(--mt-line-height) + var(--mt-line-gap));
  --mt-viewport-height: calc(
    var(--mt-visible-lines) * var(--mt-line-height) +
    (var(--mt-visible-lines) - 1) * var(--mt-line-gap)
  );

  display: flex;
  flex-direction: column;
  gap: 0;
  background: linear-gradient(135deg, #323437 0%, #252629 100%);
  border-radius: 24px;
  border: none;
  box-shadow: 
    15px 15px 35px rgba(0, 0, 0, 0.45),
    -10px -10px 30px rgba(255, 255, 255, 0.03),
    inset 1px 1px 2px rgba(255, 255, 255, 0.08),
    inset -1px -1px 2px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  min-height: 600px;
  animation: fadeInUp 0.35s ease;
  position: relative;
  font-family: "Roboto Mono", "JetBrains Mono", "SF Mono", ui-monospace, monospace;
}

.typing-practice-root--streak {
  animation: mt-streak-flash 0.5s ease;
}

@keyframes mt-streak-flash {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 0 2px var(--mt-accent), 0 0 24px rgba(226, 183, 20, 0.25); }
}

.mt-ambient-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 20% 0%, rgba(226, 183, 20, 0.06), transparent 60%),
    radial-gradient(ellipse 50% 35% at 85% 100%, color-mix(in srgb, var(--mt-category-accent) 12%, transparent), transparent 55%);
  animation: mt-glow-shift 8s ease-in-out infinite alternate;
}

@keyframes mt-glow-shift {
  0% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.02); }
}

.mt-animate-fade {
  animation: mt-fade-in 0.45s ease;
}

.mt-animate-slide {
  animation: mt-slide-down 0.4s ease;
}

.mt-animate-pop {
  animation: mt-pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mt-animate-rise {
  animation: mt-rise-in 0.35s ease both;
}

@keyframes mt-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mt-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mt-pop-in {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes mt-rise-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Pro header & category grid ──────────────────────────────────────────── */

.mt-pro-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px 8px;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}

.mt-pro-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.mt-pro-icon {
  color: var(--mt-accent);
  animation: mt-icon-spin 6s linear infinite;
}

@keyframes mt-icon-spin {
  0%, 90% { transform: rotate(0deg); }
  95% { transform: rotate(15deg); }
  100% { transform: rotate(0deg); }
}

.mt-pro-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--mt-main);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mt-pro-badge {
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--mt-sub);
  background: var(--mt-card);
  border: 1px solid var(--mt-border);
  padding: 3px 8px;
  border-radius: 99px;
}

.mt-tip-ticker {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.62rem;
  color: var(--mt-sub);
  max-width: 340px;
  overflow: hidden;
}

.mt-tip-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mt-category-grid {
  display: flex;
  gap: 6px;
  padding: 0 18px 10px;
  overflow-x: auto;
  scrollbar-width: none;
  position: relative;
  z-index: 1;
}

.mt-category-grid::-webkit-scrollbar { display: none; }

.mt-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 99px;
  border: 1px solid var(--mt-border);
  background: var(--mt-card);
  color: var(--mt-sub);
  font-size: 0.65rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.mt-cat-chip:hover:not(:disabled) {
  color: var(--mt-main);
  border-color: color-mix(in srgb, var(--chip-accent) 40%, transparent);
  transform: translateY(-1px);
}

.mt-cat-chip.active {
  color: var(--chip-accent);
  border-color: color-mix(in srgb, var(--chip-accent) 50%, transparent);
  background: color-mix(in srgb, var(--chip-accent) 12%, var(--mt-card));
  box-shadow: 0 0 12px color-mix(in srgb, var(--chip-accent) 20%, transparent);
}

.mt-cat-chip:disabled { opacity: 0.45; cursor: default; }

.mt-cat-chip-icon { font-size: 0.85rem; line-height: 1; }

.mt-cat-chip-label { text-transform: lowercase; }

.mt-category-hero {
  margin: 0 18px 12px;
  padding: 16px 18px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--mt-category-accent) 10%, var(--mt-card)) 0%,
    var(--mt-card) 55%,
    color-mix(in srgb, var(--mt-category-accent) 6%, #1a1b1e) 100%
  );
  border-radius: 14px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  animation: mt-hero-enter 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes mt-hero-enter {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.mt-category-watermark {
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(4rem, 12vw, 6.5rem);
  font-weight: 900;
  color: color-mix(in srgb, var(--mt-category-accent) 10%, transparent);
  letter-spacing: -0.04em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  animation: mt-watermark-float 6s ease-in-out infinite;
  z-index: 0;
}

@keyframes mt-watermark-float {
  0%, 100% { transform: translateY(-50%) translateX(0); opacity: 0.55; }
  50% { transform: translateY(calc(-50% - 6px)) translateX(4px); opacity: 0.85; }
}

.mt-category-hero-border {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    120deg,
    transparent 0%,
    color-mix(in srgb, var(--mt-category-accent) 70%, transparent) 35%,
    transparent 50%,
    color-mix(in srgb, var(--mt-category-accent) 50%, transparent) 75%,
    transparent 100%
  );
  background-size: 250% 250%;
  animation: mt-border-sweep 4s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

@keyframes mt-border-sweep {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.mt-category-hero-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    color-mix(in srgb, var(--mt-category-accent) 8%, transparent) 50%,
    transparent 60%
  );
  background-size: 200% 100%;
  animation: mt-hero-shimmer 3.5s ease-in-out infinite;
  pointer-events: none;
}

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

.mt-category-hero-inner { position: relative; z-index: 1; }

.mt-category-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.mt-category-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mt-category-accent);
  font-family: inherit;
}

.mt-category-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mt-category-accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--mt-category-accent) 60%, transparent);
  animation: mt-live-pulse 1.8s ease infinite;
}

@keyframes mt-live-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mt-category-accent) 50%, transparent); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.mt-category-stat-chips { display: flex; gap: 6px; flex-wrap: wrap; }

.mt-category-stat-chip {
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--mt-sub);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--mt-border);
  padding: 3px 8px;
  border-radius: 99px;
  font-family: inherit;
  animation: mt-chip-pop 0.4s ease both;
}

.mt-category-stat-chip:nth-child(1) { animation-delay: 0.05s; }

.mt-category-stat-chip:nth-child(2) { animation-delay: 0.1s; }

.mt-category-stat-chip:nth-child(3) { animation-delay: 0.15s; }

@keyframes mt-chip-pop {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

.mt-category-hero-title {
  margin: 0 0 6px;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--mt-category-accent);
  font-family: inherit;
  letter-spacing: -0.01em;
  animation: mt-title-glow 3s ease-in-out infinite;
}

@keyframes mt-title-glow {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50% { text-shadow: 0 0 18px color-mix(in srgb, var(--mt-category-accent) 35%, transparent); }
}

.mt-category-hero-desc {
  margin: 0 0 12px;
  font-size: 0.66rem;
  color: var(--mt-sub);
  line-height: 1.5;
  font-family: inherit;
  max-width: 92%;
}

.mt-category-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.mt-category-keyword {
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--mt-main);
  background: color-mix(in srgb, var(--mt-category-accent) 12%, var(--mt-bg));
  border: 1px solid color-mix(in srgb, var(--mt-category-accent) 25%, var(--mt-border));
  padding: 4px 9px;
  border-radius: 6px;
  font-family: inherit;
  text-transform: lowercase;
  animation: mt-keyword-rise 0.45s ease both;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.mt-category-keyword:hover {
  transform: translateY(-2px);
  border-color: var(--mt-category-accent);
}

@keyframes mt-keyword-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.mt-category-fact-zone {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--mt-border);
  border-radius: 10px;
  margin-bottom: 10px;
}

.mt-category-fact-icon-wrap {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--mt-category-accent) 15%, transparent);
  border-radius: 8px;
  color: var(--mt-category-accent);
}

.mt-fact-icon-pulse { animation: mt-fact-icon-bob 2s ease-in-out infinite; }

@keyframes mt-fact-icon-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.mt-category-fact-body { flex: 1; min-width: 0; }

.mt-category-fact-label {
  display: block;
  font-size: 0.52rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mt-category-accent);
  margin-bottom: 4px;
  font-family: inherit;
}

.mt-fact-viewport { min-height: 2.2em; overflow: hidden; position: relative; }

.mt-fact-slide {
  margin: 0;
  font-size: 0.64rem;
  color: var(--mt-main);
  line-height: 1.45;
  font-family: inherit;
  animation: mt-fact-slide-in 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes mt-fact-slide-in {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}

.mt-fact-dots { display: flex; gap: 5px; margin-top: 8px; }

.mt-fact-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--mt-sub);
  opacity: 0.35;
  cursor: pointer;
  transition: all 0.25s ease;
}

.mt-fact-dot.active {
  opacity: 1;
  background: var(--mt-category-accent);
  transform: scale(1.35);
  box-shadow: 0 0 8px color-mix(in srgb, var(--mt-category-accent) 50%, transparent);
}

.mt-category-tip-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.6rem;
  color: var(--mt-sub);
  font-family: inherit;
  padding-top: 2px;
}

.mt-tip-icon-spin {
  color: var(--mt-category-accent);
  flex-shrink: 0;
  animation: mt-tip-spin 4s linear infinite;
}

@keyframes mt-tip-spin {
  0%, 85% { transform: rotate(0deg); }
  90% { transform: rotate(20deg); }
  100% { transform: rotate(0deg); }
}

/* ── View tabs & progress report ─────────────────────────────────────────── */

.mt-view-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px 0;
  position: relative;
  z-index: 2;
}

.mt-view-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--mt-border);
  background: var(--mt-card);
  color: var(--mt-sub);
  font-size: 0.68rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mt-view-tab.active {
  color: var(--mt-accent);
  border-color: rgba(226, 183, 20, 0.35);
  background: var(--mt-accent-dim);
}

.mt-level-badge {
  margin-left: auto;
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mt-category-accent, var(--mt-accent));
  background: color-mix(in srgb, var(--mt-category-accent, var(--mt-accent)) 12%, var(--mt-card));
  border: 1px solid color-mix(in srgb, var(--mt-category-accent, var(--mt-accent)) 25%, var(--mt-border));
  padding: 5px 10px;
  border-radius: 99px;
}

.mt-user-chip,
.mt-login-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.58rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 99px;
  font-family: inherit;
}

.mt-user-chip {
  color: var(--mt-main);
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.28);
}

.mt-login-chip {
  color: var(--mt-accent);
  background: var(--mt-accent-dim);
  border: 1px solid rgba(226, 183, 20, 0.28);
  cursor: pointer;
  transition: background 0.15s ease;
}

.mt-login-chip:hover {
  background: rgba(226, 183, 20, 0.22);
}

.mt-login-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 18px 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(226, 183, 20, 0.08);
  border: 1px solid rgba(226, 183, 20, 0.22);
}

.mt-login-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.62rem;
  color: var(--mt-sub);
  font-family: inherit;
  line-height: 1.35;
}

.mt-login-banner-text strong {
  color: var(--mt-accent);
  font-size: 0.68rem;
}

.mt-login-banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(226, 183, 20, 0.35);
  background: rgba(226, 183, 20, 0.16);
  color: var(--mt-accent);
  font-size: 0.62rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}

.mt-login-banner-btn:hover {
  background: rgba(226, 183, 20, 0.26);
}

.mt-user-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 18px 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(52, 211, 153, 0.08);
  border: 1px solid rgba(52, 211, 153, 0.2);
  font-size: 0.62rem;
  color: var(--mt-sub);
  font-family: inherit;
}

.mt-user-bar strong {
  color: var(--mt-main);
}

.mt-end-session-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(202, 71, 84, 0.35);
  background: rgba(202, 71, 84, 0.12);
  color: #fca5a5;
  font-size: 0.62rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.mt-end-session-btn:hover { background: rgba(202, 71, 84, 0.22); }

.mt-progress-report {
  padding: 18px 20px 24px;
  animation: mt-hero-enter 0.45s ease;
}

.mt-progress-hero {
  display: flex;
  gap: 20px;
  align-items: stretch;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.mt-progress-level {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  padding: 16px;
  background: var(--mt-card);
  border: 1px solid var(--mt-border);
  border-radius: 14px;
}

.mt-progress-level-val {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--mt-accent);
  font-family: inherit;
}

.mt-progress-level-label {
  font-size: 0.58rem;
  color: var(--mt-sub);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: inherit;
}

.mt-progress-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  flex: 1;
  min-width: 200px;
}

.mt-progress-kpi {
  background: var(--mt-card);
  border: 1px solid var(--mt-border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.mt-progress-kpi span {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--mt-main);
  font-family: inherit;
}

.mt-progress-kpi small {
  font-size: 0.55rem;
  color: var(--mt-sub);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mt-progress-chart,
.mt-progress-section {
  margin-bottom: 18px;
  padding: 14px;
  background: var(--mt-card);
  border: 1px solid var(--mt-border);
  border-radius: 12px;
}

.mt-progress-chart h4,
.mt-progress-section h4 {
  margin: 0 0 12px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mt-sub);
  font-family: inherit;
}

.mt-wpm-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 80px;
}

.mt-wpm-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}

.mt-wpm-bar {
  width: 100%;
  max-width: 28px;
  background: linear-gradient(to top, var(--mt-accent), color-mix(in srgb, var(--mt-accent) 50%, transparent));
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  transition: height 0.4s ease;
}

.mt-wpm-bar-wrap span {
  font-size: 0.55rem;
  color: var(--mt-sub);
  font-family: inherit;
}

.mt-progress-word-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.mt-progress-word-card {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--mt-border);
  border-radius: 8px;
  padding: 10px;
}

.mt-progress-word {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--mt-accent);
  font-family: inherit;
  display: block;
}

.mt-progress-mastery {
  font-size: 0.55rem;
  color: var(--mt-sub);
  font-family: inherit;
}

.mt-progress-word-card p {
  margin: 4px 0 0;
  font-size: 0.6rem;
  color: var(--mt-main);
  line-height: 1.35;
  font-family: inherit;
}

.mt-session-table { display: flex; flex-direction: column; gap: 4px; }

.mt-session-row {
  display: grid;
  grid-template-columns: 1fr 0.7fr 0.6fr 0.6fr 1fr;
  gap: 8px;
  font-size: 0.62rem;
  color: var(--mt-main);
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  font-family: inherit;
}

.mt-glossary-section { margin-bottom: 12px; }

.mt-glossary-section-label {
  margin: 0 0 6px;
  font-size: 0.55rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mt-sub);
  font-family: inherit;
}

.mt-vocab-card-review {
  border-color: rgba(202, 71, 84, 0.25) !important;
  background: rgba(202, 71, 84, 0.06) !important;
}

.mt-vocab-mastery-pill {
  font-size: 0.52rem;
  font-weight: 700;
  color: var(--mt-sub);
  background: rgba(0, 0, 0, 0.25);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: inherit;
}

.mt-config-tip {
  margin-left: auto;
  font-size: 0.58rem;
  color: var(--mt-sub);
  font-style: italic;
  max-width: 220px;
  line-height: 1.3;
  font-family: inherit;
}

.typing-practice-root--live .mt-pro-header,
.typing-practice-root--live .mt-category-grid,
.typing-practice-root--live .mt-category-hero {
  opacity: 0.3;
  pointer-events: none;
}

.typing-practice-root--live .mt-config {
  opacity: 0.35;
  pointer-events: none;
}

.typing-practice-root--live .mt-scroll-viewport,
.typing-practice-root--live .mt-scroll-viewport-idle {
  opacity: 1;
}

.typing-practice-root--done .mt-config {
  display: none;
}

/* ── Config bar ─────────────────────────────────────────────────────────── */

.mt-config {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 14px 18px;
  background: var(--mt-bg-soft);
  border-bottom: 1px solid var(--mt-border);
  transition: opacity 0.25s ease;
}

.mt-config-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.mt-config-categories {
  margin-left: auto;
}

.mt-config-divider {
  width: 1px;
  height: 18px;
  background: var(--mt-sub);
  opacity: 0.35;
  flex-shrink: 0;
}

.mt-config-btn {
  background: linear-gradient(145deg, #323437, #282a2d);
  box-shadow: 
    3px 3px 6px rgba(0,0,0,0.4),
    -2px -2px 5px rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.02);
  color: var(--mt-sub);
  font-size: 0.72rem;
  font-weight: 600;
  font-family: inherit;
  text-transform: lowercase;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.02em;
}

.mt-config-btn-sm {
  font-size: 0.68rem;
  padding: 5px 10px;
}

.mt-config-btn:hover:not(:disabled) {
  color: var(--mt-main);
  background: linear-gradient(145deg, #383a3e, #2c2e31);
}

.mt-config-btn.active {
  color: #ffffff;
  background: linear-gradient(145deg, #2563eb, #1d4ed8);
  box-shadow: 
    inset 2px 2px 5px rgba(0, 0, 0, 0.4),
    inset -1px -1px 3px rgba(255, 255, 255, 0.2);
  border-color: #1e40af;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.mt-config-btn:disabled {
  cursor: default;
  opacity: 0.5;
}

.mt-quote-label {
  font-size: 0.68rem;
  color: var(--mt-sub);
  font-style: italic;
  padding: 0 6px;
}

/* ── Live stats (during test) ─────────────────────────────────────────────── */

.mt-live-stats {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 32px;
  padding: 24px 18px 12px;
  animation: fadeInUp 0.25s ease;
}

/* Primary stat size removed to unify with secondary stats */

.mt-live-stat-hot .mt-live-val {
  color: var(--mt-accent);
  animation: mt-stat-pulse 1.2s ease infinite;
}

@keyframes mt-stat-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.mt-live-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 48px;
  animation: mt-rise-in 0.3s ease both;
}

.mt-live-stat:nth-child(1) { animation-delay: 0.02s; }

.mt-live-stat:nth-child(2) { animation-delay: 0.04s; }

.mt-live-stat:nth-child(3) { animation-delay: 0.06s; }

.mt-live-stat:nth-child(4) { animation-delay: 0.08s; }

.mt-live-stat:nth-child(5) { animation-delay: 0.1s; }

.mt-live-stat:nth-child(6) { animation-delay: 0.12s; }

.mt-live-stat:nth-child(7) { animation-delay: 0.14s; }

.mt-live-val {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--mt-accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.mt-live-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mt-sub);
  text-transform: lowercase;
  letter-spacing: 0.04em;
}

.mt-post-session-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 1rem auto 2rem;
  animation: fadeInUp 0.4s ease;
}

.mt-post-stats {
  display: flex;
  gap: 3rem;
  justify-content: center;
  align-items: center;
  padding: 2.5rem 4rem;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border-radius: 20px;
  box-shadow: 
    0 20px 40px -10px rgba(0,0,0,0.6),
    inset 0 1px 1px rgba(255,255,255,0.1),
    inset 0 -2px 10px rgba(0,0,0,0.5),
    0 0 0 1px rgba(14, 165, 233, 0.3);
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(8deg);
  animation: mt-float-3d 4s ease-in-out infinite alternate;
  margin: 0;
  max-width: fit-content;
}

.mt-post-restart-btn {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  color: white;
  border: none;
  padding: 0.75rem 2.5rem;
  border-radius: 99px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 8px 20px -5px rgba(2, 132, 199, 0.5), inset 0 1px 1px rgba(255,255,255,0.3);
  transition: all 0.2s ease;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: -0.5rem;
  z-index: 10;
  position: relative;
}

.mt-post-restart-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px -5px rgba(2, 132, 199, 0.6), inset 0 1px 1px rgba(255,255,255,0.4);
}

.mt-post-restart-btn:active {
  transform: translateY(1px);
  box-shadow: 0 4px 10px -5px rgba(2, 132, 199, 0.5);
}

@keyframes mt-float-3d {
  0% { 
    transform: perspective(1000px) rotateX(8deg) translateY(0px); 
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.1), inset 0 -2px 10px rgba(0,0,0,0.5), 0 0 0 1px rgba(14, 165, 233, 0.3); 
  }
  100% { 
    transform: perspective(1000px) rotateX(8deg) translateY(-8px); 
    box-shadow: 0 28px 45px -10px rgba(0,0,0,0.7), inset 0 1px 1px rgba(255,255,255,0.1), inset 0 -2px 10px rgba(0,0,0,0.5), 0 0 0 1px rgba(14, 165, 233, 0.5); 
  }
}

.mt-post-stats .mt-live-stat {
  transform: translateZ(30px);
}

.mt-post-stats .mt-live-val {
  font-size: 3.5rem;
  font-weight: 800;
  color: #38bdf8;
  text-shadow: 0 0 15px rgba(56, 189, 248, 0.4), 0 0 30px rgba(56, 189, 248, 0.2);
}

.mt-post-stats .mt-live-label {
  color: #94a3b8;
  font-weight: 700;
  letter-spacing: 2px;
}

/* ── Workspace: typing + vocab panel ─────────────────────────────────────── */

.mt-workspace {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 0;
  min-height: 475px;
}

/* ── Typing arena ───────────────────────────────────────────────────────── */

.mt-arena {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 36px 40px 30px;
  min-height: 400px;
  position: relative;
  cursor: text;
  margin: 16px 24px;
  background: linear-gradient(135deg, #242528 0%, #1c1d1f 100%);
  border-radius: 20px;
  box-shadow: 
    inset 6px 6px 15px rgba(0, 0, 0, 0.7),
    inset -3px -3px 8px rgba(255, 255, 255, 0.04),
    5px 5px 15px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 0, 0, 0.8);
}

/* 6-sentence scroll viewport */

.mt-scroll-viewport {
  width: 100%;
  max-width: 100%;
  height: var(--mt-viewport-height);
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 4%,
    #000 96%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 4%,
    #000 96%,
    transparent 100%
  );
}

.mt-scroll-viewport-idle {
  /* Dim slightly before focus — no blur (blur made all text look fuzzy) */
  opacity: 0.92;
}

.mt-scroll-inner {
  display: flex;
  flex-direction: column;
  gap: var(--mt-line-gap);
  transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: transform;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
}

.mt-sentence {
  font-size: var(--mt-font-size);
  line-height: var(--mt-line-height);
  min-height: var(--mt-line-height);
  letter-spacing: 0.01em;
  text-align: left;
  user-select: none;
  padding: 0 4px;
  border-radius: 6px;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.mt-sentence-active {
  background: rgba(226, 183, 20, 0.05);
}

.mt-word-vocab-learned {
  border-bottom-color: #34d399 !important;
}

.mt-sentence-done {
  opacity: 0.62;
}

.mt-word {
  display: inline;
  border-bottom: 2px solid transparent;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.mt-word-vocab {
  border-bottom-color: rgba(226, 183, 20, 0.35);
}

.mt-word-vocab-active {
  /* Removed yellow background to prioritize the active green text coloring */
}

.mt-word-typing .mt-letter-upcoming,
.mt-word-typing .mt-letter-cursor {
  color: #10b981;
  text-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
  animation: mt-blink-green 1s alternate infinite;
}

@keyframes mt-blink-green {
  0% { opacity: 0.7; }
  100% { opacity: 1; text-shadow: 0 0 12px rgba(16, 185, 129, 0.9); }
}

.mt-letter {
  position: relative;
}

.mt-letter-upcoming {
  color: var(--mt-sub);
}

.mt-letter-correct {
  color: #ffffff;
}

.mt-letter-incorrect {
  color: var(--mt-error);
  background: var(--mt-error-bg);
  border-radius: 2px;
}

.mt-letter-cursor {
  color: var(--mt-main);
  position: relative;
}

.mt-letter-cursor::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--mt-accent);
  animation: mt-caret-blink 1s step-start infinite;
}

@keyframes mt-caret-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.mt-hidden-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  resize: none;
  pointer-events: none;
  border: none;
  padding: 0;
}

.mt-focus-hint {
  margin: 18px 0 0;
  font-size: 0.72rem;
  color: var(--mt-sub);
  font-family: inherit;
  text-align: center;
  animation: mt-pulse 2s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.mt-focus-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mt-accent);
  animation: mt-dot-pulse 1.5s ease infinite;
}

@keyframes mt-dot-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}

@keyframes mt-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.85; }
}

/* ── Results screen ─────────────────────────────────────────────────────── */

.mt-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 520px;
  animation: fadeInUp 0.35s ease;
  padding: 10px 0;
}

.mt-results-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.mt-results-wpm {
  font-size: 4rem;
  font-weight: 700;
  color: var(--mt-accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -2px;
}

.mt-results-wpm-label {
  font-size: 0.85rem;
  color: var(--mt-sub);
  text-transform: lowercase;
  font-weight: 600;
}

.mt-results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
}

.mt-results-item {
  background: var(--mt-card);
  border: 1px solid var(--mt-border);
  border-radius: 10px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.mt-results-val {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--mt-main);
  font-variant-numeric: tabular-nums;
  text-transform: lowercase;
}

.mt-results-key {
  font-size: 0.62rem;
  color: var(--mt-sub);
  text-transform: lowercase;
  font-weight: 600;
}

.mt-results-msg {
  font-size: 0.78rem;
  color: var(--mt-sub);
  text-align: center;
  margin: 0;
  font-family: inherit;
}

.mt-restart-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid var(--mt-border);
  background: var(--mt-card);
  color: var(--mt-main);
  font-size: 0.75rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.mt-restart-btn:hover {
  background: var(--mt-accent-dim);
  border-color: rgba(226, 183, 20, 0.35);
  color: var(--mt-accent);
}

/* ── Footer / progress / scores ─────────────────────────────────────────── */

.mt-footer {
  padding: 0 18px 16px;
}

.mt-progress-track {
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 12px;
}

.mt-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--mt-category-accent), var(--mt-accent));
  border-radius: 99px;
  transition: width 0.15s linear;
}

.mt-progress-shimmer {
  position: relative;
  overflow: hidden;
}

.mt-progress-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  animation: mt-shimmer 1.8s ease infinite;
}

@keyframes mt-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.mt-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.mt-shortcut-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65rem;
  color: var(--mt-sub);
  font-family: inherit;
}

.mt-recent-scores {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  font-family: inherit;
  perspective: 800px;
}

.mt-recent-label {
  font-weight: 800;
  color: #fef08a;
  background: linear-gradient(145deg, #ca8a04, #854d0e);
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(250, 204, 21, 0.5);
  margin-right: 8px;
  text-shadow: 0 0 10px rgba(254, 240, 138, 0.5);
  box-shadow: 
    0 4px 10px rgba(0,0,0,0.5),
    inset 0 1px 1px rgba(255,255,255,0.3),
    inset 0 -2px 4px rgba(0,0,0,0.4),
    0 0 15px rgba(202, 138, 4, 0.4);
  transform-style: preserve-3d;
  animation: best-box-float 3s ease-in-out infinite alternate;
}

@keyframes best-box-float {
  0% { transform: translateY(0) rotateX(10deg); box-shadow: 0 4px 10px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.3), inset 0 -2px 4px rgba(0,0,0,0.4), 0 0 10px rgba(202, 138, 4, 0.3); }
  100% { transform: translateY(-3px) rotateX(10deg); box-shadow: 0 8px 15px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.3), inset 0 -2px 4px rgba(0,0,0,0.4), 0 0 20px rgba(202, 138, 4, 0.6); }
}

.mt-blink-cursor {
  animation: mt-type-blink 1s step-end infinite;
  margin-left: 4px;
  opacity: 1;
}

@keyframes mt-type-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.mt-recent-chip {
  background: linear-gradient(145deg, #4338ca, #312e81);
  color: #e0e7ff;
  border: 1px solid rgba(99, 102, 241, 0.4);
  border-radius: 8px;
  padding: 5px 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  box-shadow: 
    0 4px 10px rgba(0,0,0,0.5),
    inset 0 1px 1px rgba(255,255,255,0.2),
    inset 0 -2px 4px rgba(0,0,0,0.4);
  transform-style: preserve-3d;
  transform: translateY(0) rotateX(10deg);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: default;
}

.mt-recent-chip:hover {
  transform: translateY(-4px) rotateX(0deg) scale(1.05);
  box-shadow: 
    0 8px 15px rgba(0,0,0,0.6),
    0 0 10px rgba(99, 102, 241, 0.5),
    inset 0 1px 1px rgba(255,255,255,0.3),
    inset 0 -2px 4px rgba(0,0,0,0.4);
  border-color: rgba(99, 102, 241, 0.8);
}

.mt-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--mt-card);
  border: 1px solid var(--mt-border);
  font-size: 0.62rem;
  font-family: inherit;
  color: var(--mt-main);
  line-height: 1.4;
}

.mt-kbd-plus {
  color: var(--mt-sub);
  font-size: 0.65rem;
}

/* ── Vocabulary panel ─────────────────────────────────────────────────────── */

.mt-vocab-panel {
  display: flex;
  flex-direction: column;
  background: var(--mt-bg-soft);
  min-height: 400px;
  max-height: calc(var(--mt-viewport-height) + 150px);
}

.mt-vocab-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--mt-border);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--mt-main);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mt-vocab-category-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--mt-category-accent, var(--mt-accent));
  border-bottom: 1px solid var(--mt-border);
  font-family: inherit;
  text-transform: lowercase;
}

.mt-vocab-lesson {
  color: var(--mt-sub);
  font-weight: 600;
}

.mt-vocab-usage {
  margin: 4px 0 0;
  font-size: 0.58rem;
  color: var(--mt-sub);
  font-style: italic;
  font-family: inherit;
  opacity: 0.85;
}

.mt-icon-pulse {
  color: var(--mt-accent);
  animation: mt-icon-pulse 0.8s ease infinite;
}

@keyframes mt-icon-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
}

.mt-vocab-count {
  margin-left: auto;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--mt-sub);
  text-transform: lowercase;
}

.mt-vocab-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mt-vocab-empty {
  font-size: 0.68rem;
  color: var(--mt-sub);
  line-height: 1.5;
  margin: 0;
  font-family: inherit;
}

.mt-vocab-card {
  background: var(--mt-card);
  border: 1px solid var(--mt-border);
  border-radius: 8px;
  padding: 10px 11px;
  transition: border-color 0.15s, background 0.15s;
}

.mt-vocab-card-learned {
  border-color: rgba(226, 183, 20, 0.35);
  background: rgba(226, 183, 20, 0.08);
}

.mt-vocab-word-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.mt-vocab-word {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--mt-accent);
  text-transform: lowercase;
}

.mt-vocab-badge {
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mt-accent);
  background: var(--mt-accent-dim);
  padding: 2px 6px;
  border-radius: 4px;
}

.mt-vocab-meaning {
  font-size: 0.68rem;
  color: var(--mt-main);
  line-height: 1.45;
  margin: 0;
  font-family: inherit;
  opacity: 0.88;
}

.mt-vocab-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--mt-border);
  font-size: 0.62rem;
  color: var(--mt-sub);
  font-family: inherit;
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .typing-practice-root {
    border-radius: 14px;
    min-height: 525px;
    --mt-font-size: 1.3125rem;
    --mt-line-height: 2.625rem;
    --mt-line-gap: 0.625rem;
  }

  .mt-pro-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .mt-tip-ticker { max-width: 100%; }

  .mt-category-hero { margin: 0 12px 10px; padding: 14px; }

  .mt-category-watermark { font-size: 3.5rem; }

  .mt-category-hero-desc { max-width: 100%; }

  .mt-category-stat-chips { width: 100%; }

  .mt-config-tip { display: none; }

  .mt-workspace {
    grid-template-columns: 1fr;
  }

  .mt-arena {
    border-right: none;
    border-bottom: 1px solid var(--mt-border);
    padding: 16px 14px 12px;
  }

  .mt-vocab-panel {
    max-height: 240px;
    min-height: 200px;
  }

  .mt-config {
    padding: 12px 14px;
    gap: 5px 6px;
  }

  .mt-config-categories {
    margin-left: 0;
    width: 100%;
  }

  .mt-config-divider {
    display: none;
  }

  .mt-scroll-viewport {
    height: var(--mt-viewport-height);
  }

  .mt-sentence {
    font-size: var(--mt-font-size);
    line-height: var(--mt-line-height);
    min-height: var(--mt-line-height);
  }

  .mt-live-stats {
    gap: 12px;
    padding-top: 12px;
    flex-wrap: wrap;
  }

  .mt-live-val {
    font-size: 1.05rem;
  }

  .mt-results-wpm {
    font-size: 3rem;
  }

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

@media (prefers-reduced-motion: reduce) {
  .mt-letter-cursor::before,
  .mt-focus-hint,
  .mt-focus-dot,
  .mt-ambient-glow,
  .mt-pro-icon,
  .mt-sentence-active,
  .mt-live-stat-hot .mt-live-val,
  .mt-progress-shimmer::after,
  .mt-icon-pulse,
  .mt-category-watermark,
  .mt-category-hero-border,
  .mt-category-hero-shimmer,
  .mt-category-live-dot,
  .mt-category-hero-title,
  .mt-fact-icon-pulse,
  .mt-tip-icon-spin,
  .mt-category-hero,
  .mt-category-stat-chip,
  .mt-category-keyword,
  .mt-fact-slide {
    animation: none;
  }

  .mt-progress-fill,
  .mt-scroll-inner {
    transition: none;
  }

  .mt-animate-fade,
  .mt-animate-slide,
  .mt-animate-pop,
  .mt-animate-rise {
    animation: none;
  }
}

/* ── User learning progress report ─────────────────────────────────────────── */

.upr-root {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.upr-root-compact {
  padding: 12px;
}

.upr-login-prompt {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-secondary, #94a3b8);
  font-size: 0.75rem;
}

.upr-login-prompt strong {
  display: block;
  color: var(--text-primary, #e2e8f0);
  margin-bottom: 2px;
}

.upr-login-prompt p {
  margin: 0;
  line-height: 1.35;
}

.upr-login-btn {
  margin-left: auto;
  flex-shrink: 0;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(242, 92, 5, 0.35);
  background: rgba(242, 92, 5, 0.15);
  color: #fb923c;
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
}

.upr-header { margin-bottom: 12px; }

.upr-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 900;
  color: var(--text-primary, #e2e8f0);
}

.upr-subtitle {
  margin: 4px 0 0;
  font-size: 0.62rem;
  color: var(--text-muted, #64748b);
}

.upr-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.upr-kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 6px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.upr-kpi-icon { color: #f59e0b; }

.upr-kpi-val {
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--text-primary, #e2e8f0);
}

.upr-kpi-label {
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted, #64748b);
}

.upr-kpi.is-interactive {
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.upr-kpi.is-interactive:hover {
  transform: translateY(-1px);
  border-color: rgba(251, 146, 60, 0.35);
  background: rgba(251, 146, 60, 0.06);
}

.upr-kpi.is-active {
  border-color: rgba(251, 146, 60, 0.55);
  background: rgba(251, 146, 60, 0.12);
  box-shadow: 0 0 0 1px rgba(251, 146, 60, 0.15);
}

.upr-question-filter-list {
  display: grid;
  gap: 8px;
}

.upr-question-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.14);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.upr-question-filter-row:hover {
  transform: translateX(2px);
  border-color: rgba(251, 146, 60, 0.28);
  background: rgba(251, 146, 60, 0.06);
}

.upr-question-filter-row.is-static {
  cursor: default;
}

.upr-question-filter-row.is-static:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.14);
}

.upr-question-filter-meta {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 0.2rem;
}

.upr-question-filter-meta strong {
  font-size: 0.72rem;
  color: var(--text-primary, #e2e8f0);
}

.upr-question-filter-meta em {
  font-style: normal;
  font-size: 0.68rem;
  color: var(--text-secondary, #94a3b8);
  line-height: 1.35;
}

.upr-question-filter-meta small {
  font-size: 0.6rem;
  color: var(--text-muted, #64748b);
}

.upr-question-filter-arrow {
  flex-shrink: 0;
  color: #f59e0b;
}

.upr-section { margin-top: 12px; }

.upr-section-title {
  margin: 0 0 8px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #64748b);
}

.upr-empty {
  margin: 0;
  font-size: 0.68rem;
  color: var(--text-muted, #64748b);
  line-height: 1.4;
}

.upr-chapter-list,
.upr-mock-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.upr-chapter-card,
.upr-mock-row {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.upr-chapter-top,
.upr-mock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.upr-chapter-title {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-primary, #e2e8f0);
}

.upr-chapter-pct {
  font-size: 0.62rem;
  font-weight: 800;
  color: #34d399;
}

.upr-chapter-bar {
  height: 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin: 8px 0;
}

.upr-chapter-fill {
  height: 100%;
  background: linear-gradient(90deg, #34d399, #10b981);
  border-radius: 99px;
}

.upr-chapter-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.58rem;
  color: var(--text-muted, #64748b);
}

.upr-mock-row {
  font-size: 0.62rem;
  color: var(--text-secondary, #94a3b8);
}

.mt-progress-learning-wrap .upr-root {
  background: var(--mt-card);
  border-color: var(--mt-border);
}

.mt-progress-learning-wrap .upr-title,
.mt-progress-learning-wrap .upr-kpi-val,
.mt-progress-learning-wrap .upr-chapter-title {
  color: var(--mt-main);
}

/* Question status badges in solutions */

.is-q-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 99px;
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.is-q-status-visited { background: #e2e8f0; color: #475569; }

.is-q-status-answered { background: #dbeafe; color: #1d4ed8; }

.is-q-status-correct { background: #dcfce7; color: #15803d; }

.is-q-status-incorrect { background: #ffe4e6; color: #be123c; }

.is-q-status-marked { background: #fef3c7; color: #b45309; }

.is-q-status-saved { background: #dbeafe; color: #1d4ed8; }

.is-q-action-group {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.is-q-action-group--compact {
  gap: 0.25rem;
}

.is-q-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.7rem;
  border-radius: 0.45rem;
  border: 1px solid var(--border-color);
  background: #fff;
  color: var(--text-secondary);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: all 0.15s ease;
}

.is-q-action-btn:hover {
  color: var(--bg-navy);
  border-color: #94a3b8;
  background: #f8fafc;
}

.is-q-action-btn--compact {
  padding: 0.28rem 0.45rem;
  font-size: 0;
}

.is-q-action-btn.is-active-mark {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #b45309;
}

.is-q-action-btn.is-active-save {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.forum-card-save-row,
.forum-card-action-controls {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.forum-card-action-controls {
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .upr-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .upr-login-prompt { flex-direction: column; align-items: flex-start; }
  .upr-login-btn { margin-left: 0; }
}

/* ── User notification inbox (navbar) ─────────────────────────────────────── */

.user-notif-wrap {
  position: relative;
  margin-right: 0;
}

.user-notif-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.72);
  color: #e2e8f0;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.user-notif-bell:hover {
  transform: translateY(-1px);
  border-color: rgba(251, 146, 60, 0.35);
  background: rgba(30, 41, 59, 0.9);
}

.user-notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  background: #f97316;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(340px, calc(100vw - 24px));
  max-height: 420px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  z-index: 10050;
}

.user-notif-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.75rem;
  color: #e2e8f0;
}

.user-notif-mark-all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 0.62rem;
  font-weight: 700;
  cursor: pointer;
}

.user-notif-list {
  overflow-y: auto;
  padding: 8px;
}

.user-notif-empty {
  margin: 0;
  padding: 16px 12px;
  font-size: 0.68rem;
  line-height: 1.45;
  color: #94a3b8;
}

.user-notif-item {
  display: flex;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px;
  border: none;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  color: inherit;
}

.user-notif-item.unread {
  background: rgba(249, 115, 22, 0.08);
}

.user-notif-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.user-notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  margin-top: 5px;
  flex-shrink: 0;
}

.user-notif-item-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.user-notif-item-title {
  font-size: 0.72rem;
  font-weight: 800;
  color: #f8fafc;
}

.user-notif-item-text {
  font-size: 0.65rem;
  color: #cbd5e1;
  line-height: 1.35;
}

.user-notif-item-date {
  font-size: 0.58rem;
  color: #64748b;
}

/* ── Account sign-in modal — professional + animated ── */

.account-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(242, 92, 5, 0.12) 0%, transparent 55%),
    rgba(2, 6, 23, 0.88);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  font-family: var(--font-sans);
  animation: account-overlay-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes account-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.account-modal-panel {
  position: relative;
  width: 100%;
  max-width: 26.5rem;
  max-height: 92vh;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  border-radius: 20px;
  background: linear-gradient(165deg, rgba(18, 32, 62, 0.98) 0%, rgba(10, 18, 38, 0.99) 100%);
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 24px 64px rgba(0, 0, 0, 0.55),
    0 0 48px rgba(242, 92, 5, 0.08);
  animation: account-panel-in 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.account-modal-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-orange), #38bdf8, transparent);
  opacity: 0.85;
}

.account-modal-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at 50% -20%, rgba(242, 92, 5, 0.07) 0%, transparent 45%);
}

@keyframes account-panel-in {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(18px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

.account-modal-inner {
  position: relative;
  z-index: 1;
  padding: 28px 26px 24px;
}

.account-modal-close,
.account-modal-back {
  position: absolute;
  top: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.55);
  color: #94a3b8;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.account-modal-close { right: 16px; }

.account-modal-back { left: 16px; }

.account-modal-close:hover,
.account-modal-back:hover {
  color: #fff;
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(242, 92, 5, 0.35);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.account-modal-head {
  text-align: center;
  margin: 4px 0 22px;
  animation: account-head-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

@keyframes account-head-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.account-modal-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.account-modal-brand-logo {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(15, 32, 66, 0.95) 0%, rgba(8, 14, 32, 0.98) 100%);
  border: 1px solid rgba(56, 189, 248, 0.18);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.account-modal-brand-text {
  text-align: center;
}

.account-modal-brand-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.account-modal-brand-word--something {
  color: #38bdf8;
}

.account-modal-brand-word--by {
  color: #94a3b8;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
}

.account-modal-brand-word--zero {
  color: #fb923c;
}

.account-modal-brand-tagline {
  display: block;
  margin-top: 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #64748b;
}

.sbz-logo-spark {
  stroke-dasharray: 40 220;
  animation: sbz-logo-spark-run 3s linear infinite;
}

.sbz-logo-spark--2 {
  animation-delay: -1.5s;
}

@keyframes sbz-logo-spark-run {
  to { stroke-dashoffset: -260; }
}

.account-modal-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 800;
  color: #f8fafc;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.account-modal-subtitle {
  margin: 10px auto 0;
  max-width: 18rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: #94a3b8;
  line-height: 1.55;
}

.account-modal-tabs {
  position: relative;
  display: flex;
  margin-bottom: 22px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(51, 65, 85, 0.55);
  animation: account-head-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

.account-modal-tabs::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 9px;
  background: linear-gradient(180deg, #ff7a2e 0%, var(--accent-orange) 100%);
  box-shadow: 0 4px 14px rgba(242, 92, 5, 0.35);
  transition: transform 0.38s cubic-bezier(0.34, 1.4, 0.64, 1);
  z-index: 0;
}

.account-modal-tabs[data-mode="signup"]::before {
  transform: translateX(100%);
}

.account-modal-tab {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 11px 8px;
  border: none;
  background: transparent;
  color: #64748b;
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.28s ease;
}

.account-modal-tab.is-active {
  color: #fff;
}

.account-modal-tab:not(.is-active):hover {
  color: #cbd5e1;
}

.account-modal-body {
  animation: account-step-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes account-step-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.account-modal-alert {
  margin-bottom: 14px;
  padding: 11px 13px;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  animation: account-alert-in 0.35s ease both;
}

@keyframes account-alert-in {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.account-modal-alert--error {
  color: #fecaca;
  background: rgba(127, 29, 29, 0.32);
  border: 1px solid rgba(248, 113, 113, 0.28);
  animation: account-alert-in 0.35s ease both, account-alert-shake 0.45s ease;
}

@keyframes account-alert-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.account-recaptcha-visible {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 78px;
  padding: 10px 8px;
  border-radius: 11px;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.14);
  overflow: hidden;
}

.account-recaptcha-visible iframe {
  max-width: 100%;
}

.account-recaptcha-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.account-recaptcha-refresh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.55);
  color: #cbd5e1;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
}

.account-recaptcha-refresh:hover {
  border-color: rgba(251, 146, 60, 0.35);
  color: #fdba74;
}

.account-spin {
  animation: accountSpin 0.9s linear infinite;
}

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

.account-modal-alert--info {
  color: #bbf7d0;
  background: rgba(6, 78, 59, 0.26);
  border: 1px solid rgba(52, 211, 153, 0.28);
}

.account-modal-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 0;
  gap: 14px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
}

.account-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.account-modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  color: #f1f5f9;
  cursor: pointer;
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1),
    box-shadow 0.22s ease,
    opacity 0.22s ease;
}

.account-modal-btn:hover:not(:disabled) {
  transform: translateY(-2px);
}

.account-modal-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.account-modal-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}

.account-modal-stagger {
  opacity: 0;
  animation: account-btn-stagger 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.account-modal-stagger:nth-child(1) { animation-delay: 0.06s; }

.account-modal-stagger:nth-child(2) { animation-delay: 0.12s; }

.account-modal-stagger:nth-child(3) { animation-delay: 0.18s; }

.account-modal-stagger:nth-child(4) { animation-delay: 0.24s; }

.account-modal-stagger:nth-child(5) { animation-delay: 0.30s; }

.account-modal-stagger:nth-child(6) { animation-delay: 0.36s; }

@keyframes account-btn-stagger {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.account-modal-btn--primary {
  position: relative;
  overflow: hidden;
  border: none;
  background: linear-gradient(135deg, #ff7a2e 0%, var(--accent-orange) 50%, #c44a03 100%);
  box-shadow: 0 6px 20px rgba(242, 92, 5, 0.32);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 11px;
  font-weight: 800;
}

.account-modal-btn--primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-18deg);
  animation: account-shine 4s ease-in-out infinite;
}

@keyframes account-shine {
  0%, 75%, 100% { left: -120%; }
  40% { left: 140%; }
}

.account-modal-btn--primary:hover:not(:disabled) {
  box-shadow: 0 10px 28px rgba(242, 92, 5, 0.42);
}

.account-modal-btn--google {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.account-modal-btn--google:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.account-modal-btn--secondary {
  background: rgba(30, 41, 59, 0.65);
  border-color: rgba(71, 85, 105, 0.55);
  font-size: 11px;
}

.account-modal-btn--secondary:hover:not(:disabled) {
  background: rgba(51, 65, 85, 0.85);
  border-color: rgba(100, 116, 139, 0.6);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.account-modal-btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.account-modal-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
  color: #475569;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.account-modal-divider::before,
.account-modal-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(100, 116, 139, 0.45), transparent);
}

.account-modal-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.account-modal-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 9.5px;
  font-weight: 800;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.account-modal-input-wrap {
  position: relative;
}

.account-modal-input-wrap svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  pointer-events: none;
  transition: color 0.2s;
}

.account-modal-input-wrap:focus-within svg {
  color: var(--accent-orange);
}

.account-modal-input {
  width: 100%;
  padding: 11px 14px;
  border-radius: 11px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(3, 7, 18, 0.55);
  color: #f8fafc;
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.22s, box-shadow 0.22s, background 0.22s;
}

.account-modal-input::placeholder {
  color: #475569;
}

.account-modal-input:focus {
  border-color: rgba(242, 92, 5, 0.55);
  background: rgba(3, 7, 18, 0.75);
  box-shadow: 0 0 0 3px rgba(242, 92, 5, 0.12);
}

.account-modal-input--icon {
  padding-left: 38px;
}

.account-modal-input--otp {
  text-align: center;
  letter-spacing: 0.45em;
  font-size: 1.25rem;
  font-family: var(--font-mono);
  font-weight: 600;
}

.account-modal-link {
  border: none;
  background: none;
  padding: 0;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  align-self: flex-start;
  transition: color 0.2s;
}

.account-modal-link:hover {
  color: var(--accent-orange);
  text-decoration: underline;
}

.account-modal-verify-box {
  padding: 20px 16px;
  border-radius: 14px;
  text-align: center;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(51, 65, 85, 0.5);
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.55;
}

.account-modal-verify-box strong {
  color: #fff;
  font-weight: 700;
}

.account-modal-footer {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(51, 65, 85, 0.4);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  font-size: 9.5px;
  color: #64748b;
  line-height: 1.45;
  animation: account-head-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}

.account-modal-footer-item {
  display: flex;
  gap: 6px;
  align-items: flex-start;
}

.account-modal-spin {
  animation: account-modal-spin 0.85s linear infinite;
  color: var(--accent-orange);
}

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

@media (prefers-reduced-motion: reduce) {
  .account-modal-overlay,
  .account-modal-panel,
  .account-modal-head,
  .account-modal-tabs,
  .account-modal-body,
  .account-modal-alert,
  .account-modal-stagger,
  .account-modal-footer,
  .sbz-logo-spark,
  .account-modal-btn--primary::after {
    animation: none !important;
    transition: none !important;
  }

  .account-modal-stagger {
    opacity: 1;
  }
}

@media (max-width: 639px) {
  .top-navbar-signin {
    display: inline-flex;
    padding: 0 10px;
    font-size: 0.62rem;
  }

  .account-modal-inner {
    padding: 24px 20px 20px;
  }

  .account-modal-panel {
    border-radius: 18px;
  }
}

/* ─── User account menu (header) ─────────────────────────────────────────── */

.user-account-menu {
  position: relative;
  z-index: 120;
}

.user-account-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 3px 10px 3px 3px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.82);
  color: #f8fafc;
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.user-account-trigger:hover {
  transform: translateY(-1px);
  border-color: rgba(251, 146, 60, 0.42);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.35);
}

.user-account-avatar,
.user-account-dropdown-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.18);
}

.user-account-meta {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  text-align: left;
}

.user-account-name {
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
}

.user-account-sub {
  margin-top: 2px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fb923c;
}

.user-account-chevron {
  color: #94a3b8;
  transition: transform 0.18s ease;
}

.user-account-chevron.is-open {
  transform: rotate(180deg);
}

.user-account-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(280px, calc(100vw - 24px));
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.98);
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.55);
  animation: userProfileRise 0.22s ease;
}

.user-account-dropdown-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  margin-bottom: 6px;
}

.user-account-dropdown-head strong {
  display: block;
  font-size: 0.82rem;
}

.user-account-dropdown-head span {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  color: #94a3b8;
}

.user-account-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #e2e8f0;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, transform 0.15s ease;
}

.user-account-dropdown-item:hover {
  background: rgba(51, 65, 85, 0.55);
  transform: translateX(2px);
}

.user-account-dropdown-item--danger {
  color: #fda4af;
}

.user-account-dropdown-divider {
  height: 1px;
  margin: 6px 0;
  background: rgba(148, 163, 184, 0.12);
}

.top-navbar-signin--prominent {
  min-height: 38px;
  padding: 0 16px;
  font-size: 0.72rem;
  border-color: rgba(251, 146, 60, 0.35);
  background: linear-gradient(180deg, rgba(251, 146, 60, 0.18) 0%, rgba(234, 88, 12, 0.12) 100%);
}

.mobile-nav-user-block {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

.mobile-nav-user-block .user-account-menu {
  width: 100%;
}

.mobile-nav-user-block .user-account-trigger {
  width: 100%;
  justify-content: flex-start;
}

.mobile-nav-signin-btn {
  width: 100%;
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(251, 146, 60, 0.35);
  background: rgba(234, 88, 12, 0.12);
  color: #fdba74;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (min-width: 900px) {
  .user-account-meta {
    display: flex;
  }

  .user-account-name {
    max-width: 130px;
  }
}

.light-theme .user-account-trigger {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.light-theme .user-account-trigger:hover {
  border-color: rgba(234, 88, 12, 0.45);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
}

.light-theme .user-account-sub {
  color: #c2410c;
}

.light-theme .user-account-dropdown {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
}

.light-theme .user-account-dropdown-head {
  border-bottom-color: #eef2f7;
}

.light-theme .user-account-dropdown-head span {
  color: #64748b;
}

.light-theme .user-account-dropdown-item {
  color: #334155;
}

.light-theme .user-account-dropdown-item:hover {
  background: #f1f5f9;
}

.light-theme .user-account-dropdown-item--danger {
  color: #be123c;
}

.light-theme .user-account-dropdown-divider {
  background: #eef2f7;
}

/* ─── User profile page ──────────────────────────────────────────────────── */

@keyframes userProfileRise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes userProfileFade {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes userKpiIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes userGlowPulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.75; }
}

@keyframes ppBarGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes ppCardIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ppBtnShine {
  0% { transform: translateX(-120%) skewX(-18deg); }
  100% { transform: translateX(220%) skewX(-18deg); }
}

@keyframes ppUnlockGlow {
  0%, 100% { box-shadow: var(--pp-shadow-soft), 0 0 0 rgba(234, 88, 12, 0); }
  50% { box-shadow: var(--pp-shadow-soft), 0 0 18px rgba(234, 88, 12, 0.22); }
}

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

@keyframes ppHeatPop {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes ppPulseRing {
  0% { box-shadow: 0 0 0 0 rgba(251, 146, 60, 0.45); }
  70% { box-shadow: 0 0 0 10px rgba(251, 146, 60, 0); }
  100% { box-shadow: 0 0 0 0 rgba(251, 146, 60, 0); }
}

.user-profile-page {
  /* Obsidian Slate — premium dark dashboard theme for the student profile */
  --pp-canvas: #0a101c;
  --pp-canvas-soft: #101827;
  --pp-surface: #172033;
  --pp-surface-raised: #1c2840;
  --pp-surface-inset: #111827;
  --pp-surface-hover: #24324c;
  --pp-border: rgba(148, 163, 184, 0.14);
  --pp-border-strong: rgba(148, 163, 184, 0.28);
  --pp-text: #e8eef7;
  --pp-text-soft: #c5d0e0;
  --pp-text-muted: #8fa3bc;
  --pp-accent: #f59e0b;
  --pp-accent-deep: #d97706;
  --pp-accent-soft: rgba(245, 158, 11, 0.14);
  --pp-info: #38bdf8;
  --pp-success: #34d399;
  --pp-shadow: 0 16px 40px rgba(0, 0, 0, 0.38);
  --pp-shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.24);
  --pp-3d-depth: 4px;
  --pp-3d-depth-hover: 6px;
  --pp-3d-shadow: 0 var(--pp-3d-depth) 0 rgba(0, 0, 0, 0.42), 0 10px 22px rgba(0, 0, 0, 0.28);
  --pp-3d-shadow-hover: 0 var(--pp-3d-depth-hover) 0 rgba(0, 0, 0, 0.48), 0 14px 28px rgba(0, 0, 0, 0.32);
  --pp-3d-inset: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --pp-3d-orange-shadow: 0 var(--pp-3d-depth) 0 #92400e, 0 10px 22px rgba(245, 158, 11, 0.28);
  --pp-3d-orange-shadow-hover: 0 var(--pp-3d-depth-hover) 0 #92400e, 0 16px 30px rgba(245, 158, 11, 0.36);
  --pp-gradient-surface: linear-gradient(180deg, var(--pp-surface-raised) 0%, var(--pp-surface) 100%);
  --pp-gradient-inset: linear-gradient(180deg, var(--pp-surface) 0%, var(--pp-surface-inset) 100%);
  --pp-gradient-neutral-btn: linear-gradient(180deg, var(--pp-surface-hover) 0%, var(--pp-surface) 100%);
  --pp-gradient-accent-chip: linear-gradient(180deg, rgba(245, 158, 11, 0.24) 0%, rgba(245, 158, 11, 0.12) 100%);
  --pp-gradient-accent-btn: linear-gradient(180deg, #fbbf24 0%, var(--pp-accent) 55%, var(--pp-accent-deep) 100%);
  --pp-gradient-amber-soft: linear-gradient(180deg, rgba(245, 158, 11, 0.16) 0%, rgba(245, 158, 11, 0.06) 100%);
  --pp-gradient-info-soft: linear-gradient(135deg, rgba(56, 189, 248, 0.12) 0%, var(--pp-surface) 100%);
  --pp-gradient-success-soft: linear-gradient(180deg, rgba(52, 211, 153, 0.14) 0%, var(--pp-surface) 100%);
  --pp-gradient-level: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, var(--pp-surface) 55%);
  --pp-gradient-ai: linear-gradient(180deg, var(--pp-surface) 0%, rgba(245, 158, 11, 0.05) 100%);
  --pp-gradient-hero-accent: linear-gradient(135deg, #0c1424 0%, #162033 40%, #1a2840 100%);

  position: relative;
  padding: 24px 16px 56px;
  overflow: hidden;
  animation: userProfileRise 0.35s ease;
  background: linear-gradient(165deg, var(--pp-canvas) 0%, var(--pp-canvas-soft) 42%, #0d1526 100%);
  color: var(--pp-text-soft);
}

.user-profile-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 38% at 10% 0%, rgba(245, 158, 11, 0.09), transparent 60%),
    radial-gradient(ellipse 48% 32% at 92% 6%, rgba(56, 189, 248, 0.07), transparent 55%),
    radial-gradient(ellipse 40% 30% at 50% 100%, rgba(99, 102, 241, 0.05), transparent 55%);
}

.user-profile-shell {
  position: relative;
  z-index: 1;
  max-width: 1060px;
  margin: 0 auto;
}

.user-profile-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 9px 15px;
  border: none;
  border-radius: 12px;
  background: var(--pp-gradient-neutral-btn);
  transform: translateX(-2px) translateY(-2px);
  color: var(--pp-text);
  box-shadow: var(--pp-3d-shadow-hover), var(--pp-3d-inset);
}

.user-profile-back:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ── Hero: premium dark banner ── */

.user-profile-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 26px 24px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background:
    radial-gradient(ellipse 90% 130% at 100% -20%, rgba(56, 189, 248, 0.12), transparent 55%),
    linear-gradient(150deg, #0c1526 0%, #14203a 52%, #0c1526 100%);
  box-shadow: 0 20px 48px rgba(2, 6, 23, 0.35);
  overflow: hidden;
  animation: userProfileFade 0.42s ease;
}

.user-profile-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #38bdf8 0%, #6366f1 40%, var(--pp-accent) 75%, var(--pp-accent-deep) 100%);
}

.user-profile-hero-glow {
  position: absolute;
  width: 260px;
  height: 260px;
  right: -60px;
  top: -90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 146, 60, 0.22), transparent 68%);
  animation: userGlowPulse 5s ease-in-out infinite;
  pointer-events: none;
}

.user-profile-hero-main {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.user-profile-hero-avatar {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 26px;
  border: 3px solid rgba(255, 255, 255, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 14px 32px rgba(2, 6, 23, 0.45);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  overflow: hidden;
}

.user-profile-hero-avatar-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(2, 6, 23, 0.62);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.user-profile-hero-avatar:hover .user-profile-hero-avatar-overlay {
  opacity: 1;
}

.user-profile-hero-avatar:hover .user-profile-hero-avatar-badge {
  opacity: 0;
}

.user-profile-hero-avatar:hover {
  transform: scale(1.04) rotate(-1deg);
  box-shadow: 0 18px 38px rgba(234, 88, 12, 0.35);
}

.user-profile-hero-avatar-badge {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #fb923c, #ea580c);
  border: 3px solid #0c1526;
  color: #fff;
  box-shadow: 0 4px 10px rgba(234, 88, 12, 0.4);
  transition: opacity 0.18s ease;
}

.user-profile-hero-actions {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.user-profile-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  padding: 0;
  border: none;
  background: transparent;
  color: #93a5c0;
  font-size: 0.88rem;
  cursor: pointer;
  word-break: break-word;
  text-align: left;
  transition: color 0.18s ease;
}

.user-profile-contact-btn:hover {
  color: #e2e8f0;
}

.user-profile-progress-ring {
  position: relative;
  width: 88px;
  height: 88px;
}

.user-profile-progress-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.user-profile-progress-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 6;
}

.user-profile-progress-fill {
  fill: none;
  stroke: url(#pp-ring-gradient);
  stroke: #fb923c;
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.user-profile-progress-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.user-profile-progress-label strong {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: #f8fafc;
  line-height: 1;
}

.user-profile-progress-label span {
  margin-top: 2px;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
}

.user-profile-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
}

.user-profile-quick-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 13px;
  border: none;
  background: var(--pp-gradient-neutral-btn);
  color: var(--pp-text-soft);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--pp-3d-shadow), var(--pp-3d-inset);
  transition: transform 0.14s ease, box-shadow 0.14s ease, color 0.14s ease;
}

.user-profile-quick-btn:hover {
  transform: translateY(-3px);
  color: var(--pp-text);
  box-shadow: var(--pp-3d-shadow-hover), var(--pp-3d-inset);
}

.user-profile-quick-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.user-profile-quick-btn--primary {
  background: var(--pp-gradient-accent-btn);
  color: #fff;
  box-shadow: var(--pp-3d-orange-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.user-profile-quick-btn--primary:hover {
  color: #fff;
  box-shadow: var(--pp-3d-orange-shadow-hover), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.user-profile-quick-btn--primary:active {
  box-shadow: 0 2px 0 #92400e, inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.user-profile-quick-btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
}

.user-profile-quick-btn--primary:hover::after {
  animation: ppBtnShine 0.75s ease;
}

.user-profile-hero-copy {
  min-width: 0;
}

.user-profile-kicker {
  margin: 0 0 5px;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pp-accent);
}

.user-profile-hero h1 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  color: #f8fafc;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.user-profile-contact {
  margin: 6px 0 0;
  color: #93a5c0;
  font-size: 0.88rem;
  word-break: break-word;
}

.user-profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.user-profile-badges span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #dbe4f0;
  backdrop-filter: blur(4px);
}

.user-profile-badge--verified {
  color: #6ee7b7 !important;
  border-color: rgba(52, 211, 153, 0.35) !important;
  background: rgba(6, 78, 59, 0.4) !important;
}

.user-profile-logout-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 13px;
  border: none;
  background: linear-gradient(180deg, #fb7185 0%, #e11d48 55%, #be123c 100%);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 4px 0 #9f1239, 0 10px 22px rgba(190, 18, 60, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.user-profile-logout-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #9f1239, 0 14px 28px rgba(190, 18, 60, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.user-profile-logout-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #9f1239, inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* ── KPI strip ── */

.user-profile-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.user-profile-kpi {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 16px;
  border-radius: 16px;
  border: none;
  background: var(--pp-gradient-surface);
  box-shadow: var(--pp-3d-shadow), var(--pp-3d-inset);
  animation: userKpiIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
}

.user-profile-kpi.is-pulse {
  animation: userKpiPulse 0.28s ease;
}

@keyframes userKpiPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.97); }
}

.user-profile-kpi:hover {
  transform: translateY(-4px);
  box-shadow: var(--pp-3d-shadow-hover), var(--pp-3d-inset);
}

.user-profile-kpi:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.user-profile-kpi-arrow {
  margin-left: auto;
  color: var(--pp-text-muted);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, color 0.18s ease;
  flex-shrink: 0;
}

.user-profile-kpi:hover .user-profile-kpi-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--pp-accent);
}

.user-profile-kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex-shrink: 0;
  color: #fff;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.18), 0 4px 10px rgba(2, 6, 23, 0.18);
}

.user-profile-kpi--amber .user-profile-kpi-icon { background: linear-gradient(135deg, #f59e0b, #ea580c); }

.user-profile-kpi--rose .user-profile-kpi-icon { background: linear-gradient(135deg, #fb7185, #e11d48); }

.user-profile-kpi--sky .user-profile-kpi-icon { background: linear-gradient(135deg, #38bdf8, #0284c7); }

.user-profile-kpi--violet .user-profile-kpi-icon { background: linear-gradient(135deg, #a78bfa, #7c3aed); }

.user-profile-kpi--emerald .user-profile-kpi-icon { background: linear-gradient(135deg, #34d399, #059669); }

.user-profile-kpi--teal .user-profile-kpi-icon { background: linear-gradient(135deg, #2dd4bf, #0f766e); }

.user-profile-kpi--orange .user-profile-kpi-icon { background: linear-gradient(135deg, #fb923c, #c2410c); }

.user-profile-kpi--blue .user-profile-kpi-icon { background: linear-gradient(135deg, #60a5fa, #2563eb); }

.user-profile-kpi-body {
  min-width: 0;
}

.user-profile-kpi-body strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  line-height: 1.05;
  color: var(--pp-text);
  font-variant-numeric: tabular-nums;
}

.user-profile-kpi-body span {
  display: block;
  margin-top: 4px;
  font-size: 0.62rem;
  color: var(--pp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Segmented tabs ── */

.user-profile-tabs-wrap {
  margin-bottom: 16px;
}

.user-profile-tabs {
  position: relative;
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border-radius: 14px;
  background: var(--pp-surface-inset);
  border: 1px solid var(--pp-border);
}

.user-profile-tab-indicator {
  position: absolute;
  top: 5px;
  left: 0;
  height: calc(100% - 10px);
  border-radius: 10px;
  background: linear-gradient(180deg, #fdba74 0%, #ea580c 55%, #c2410c 100%);
  box-shadow: 0 4px 0 #9a3412, 0 8px 18px rgba(234, 88, 12, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), width 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 0;
}

.user-profile-tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--pp-text-muted);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.18s ease;
}

.user-profile-tab:hover {
  color: var(--pp-text);
}

.user-profile-tab.is-active {
  color: #fff;
}

.user-profile-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 0.58rem;
  font-weight: 800;
}

.user-profile-tab:not(.is-active) .user-profile-tab-badge {
  background: rgba(234, 88, 12, 0.12);
  color: var(--pp-accent);
}

@keyframes userToastIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.user-profile-toast {
  position: sticky;
  top: 12px;
  z-index: 20;
  margin-bottom: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 600;
  animation: userToastIn 0.28s ease;
  box-shadow: var(--pp-shadow-soft);
}

.user-profile-toast--success {
  color: #047857;
  background: #ecfdf5;
  border: 1px solid rgba(52, 211, 153, 0.35);
}

.user-profile-toast--error {
  color: #be123c;
  background: #fff1f2;
  border: 1px solid rgba(244, 63, 94, 0.28);
}

.user-profile-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.85fr);
  gap: 16px;
  align-items: start;
}

.user-profile-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.user-profile-momentum {
  display: flex;
  gap: 14px;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--pp-border);
  background: linear-gradient(135deg, #fff7ed 0%, #ffffff 55%, #fff1f2 100%);
  box-shadow: var(--pp-shadow-soft);
}

.user-profile-momentum-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fb7185, #e11d48);
  color: #fff;
  flex-shrink: 0;
  animation: userGlowPulse 2.8s ease-in-out infinite;
}

.user-profile-momentum-label {
  margin: 0;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pp-text-muted);
}

.user-profile-momentum strong {
  display: block;
  margin-top: 4px;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--pp-text);
}

.user-profile-momentum-sub {
  margin: 6px 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--pp-text-muted);
}

.user-profile-checklist {
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--pp-border);
  background: var(--pp-surface);
  box-shadow: var(--pp-shadow-soft);
}

.user-profile-checklist-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--pp-accent);
}

.user-profile-checklist-head strong {
  display: block;
  font-size: 0.88rem;
  color: var(--pp-text);
}

.user-profile-checklist-head span {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  color: var(--pp-text-muted);
}

.user-profile-checklist-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--pp-surface-inset);
  overflow: hidden;
  margin-bottom: 12px;
}

.user-profile-checklist-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fb923c, #ea580c);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.user-profile-checklist ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.user-profile-checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  color: var(--pp-text-muted);
}

.user-profile-checklist li.is-done {
  color: var(--pp-text-soft);
}

.user-profile-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--pp-border);
  background: var(--pp-surface-inset);
  flex-shrink: 0;
}

.user-profile-checklist li.is-done .user-profile-check-icon {
  background: #ecfdf5;
  border-color: rgba(52, 211, 153, 0.35);
  color: #059669;
}

.user-profile-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.user-profile-mini-stats > div {
  padding: 14px 10px;
  border-radius: 14px;
  border: 1px solid var(--pp-border);
  background: var(--pp-surface);
  text-align: center;
  box-shadow: var(--pp-shadow-soft);
  transition: transform 0.18s ease;
}

.user-profile-mini-stats > div:hover {
  transform: translateY(-2px);
}

.user-profile-mini-stats span {
  display: block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pp-text-muted);
}

.user-profile-mini-stats strong {
  display: block;
  margin-top: 6px;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--pp-text);
}

.user-profile-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 36px 20px;
  border-radius: 16px;
  border: 1px dashed var(--pp-border-strong);
  background: var(--pp-surface-inset);
  color: var(--pp-text-muted);
}

.user-profile-empty-state svg {
  color: var(--pp-accent);
  opacity: 0.85;
  animation: ppFloat 2.8s ease-in-out infinite;
}

.user-profile-empty-state strong {
  font-size: 0.95rem;
  color: var(--pp-text);
}

.user-profile-empty-state p {
  margin: 0;
  max-width: 360px;
  font-size: 0.82rem;
  line-height: 1.5;
}

.user-profile-empty-state .user-profile-save-btn {
  margin-top: 8px;
}

/* ── Panels ── */

.user-profile-panel-stage {
  animation: userProfileFade 0.3s ease;
}

.user-profile-panel {
  padding: 24px;
  border-radius: 18px;
  border: 1px solid var(--pp-border);
  background: var(--pp-surface);
  box-shadow: var(--pp-shadow-soft);
}

.user-profile-panel-head {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--pp-border);
}

.user-profile-panel-head--spaced {
  margin-top: 32px;
}

.user-profile-panel-head h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--pp-text);
}

.user-profile-panel-head p {
  margin: 5px 0 0;
  color: var(--pp-text-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.user-profile-panel h3 {
  margin: 0 0 6px;
  font-size: 0.9rem;
  color: var(--pp-text);
}

.user-profile-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}

.user-profile-info-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border-radius: 13px;
  background: var(--pp-surface-inset);
  border: 1px solid var(--pp-border);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.user-profile-info-row.is-copyable:hover {
  transform: translateY(-2px);
  border-color: var(--pp-border-strong);
  box-shadow: var(--pp-shadow-soft);
}

.user-profile-info-copy {
  flex: 1;
  min-width: 0;
}

.user-profile-info-row div > span {
  display: block;
  font-size: 0.62rem;
  color: var(--pp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
}

.user-profile-info-row strong {
  display: block;
  margin-top: 3px;
  font-size: 0.88rem;
  color: var(--pp-text);
  word-break: break-word;
}

.user-profile-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.2), rgba(234, 88, 12, 0.12));
  border: 1px solid rgba(251, 146, 60, 0.22);
  color: var(--pp-accent);
  flex-shrink: 0;
}

.user-profile-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--pp-border);
  background: var(--pp-surface);
  color: var(--pp-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s ease, color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.user-profile-copy-btn:hover {
  color: var(--pp-accent);
  border-color: rgba(234, 88, 12, 0.35);
}

.user-profile-copy-btn.is-copied {
  color: #059669;
  border-color: rgba(52, 211, 153, 0.35);
  background: #ecfdf5;
}

/* ── Avatar picker ── */

.user-profile-avatar-picker {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--pp-border);
}

.user-profile-avatar-picker > p {
  margin: 0 0 14px;
  color: var(--pp-text-muted);
  font-size: 0.82rem;
}

.user-profile-avatar-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 12px;
  max-width: 560px;
}

.user-profile-avatar-option {
  aspect-ratio: 1;
  width: 100%;
  border-radius: 15px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-weight: 800;
  font-size: 0.74rem;
  cursor: pointer;
  box-shadow: 0 5px 0 rgba(15, 23, 42, 0.28), 0 10px 18px rgba(2, 6, 23, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

.user-profile-avatar-option:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 8px 0 rgba(15, 23, 42, 0.3), 0 16px 26px rgba(2, 6, 23, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.user-profile-avatar-option:active {
  transform: translateY(1px) scale(1);
  box-shadow: 0 2px 0 rgba(15, 23, 42, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.user-profile-avatar-option.is-active {
  border-color: #fff;
  box-shadow: 0 0 0 3px var(--pp-accent), 0 6px 0 #9a3412, 0 12px 22px rgba(234, 88, 12, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  animation: ppPulseRing 2s ease infinite;
}

/* ── Bookmarks ── */

.user-profile-bookmark-list {
  display: grid;
  gap: 10px;
}

.user-profile-bookmark-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border-radius: 13px;
  background: var(--pp-surface-inset);
  border: 1px solid var(--pp-border);
  animation: userKpiIn 0.35s ease both;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.user-profile-bookmark-row:hover {
  transform: translateX(3px);
  border-color: var(--pp-border-strong);
}

.user-profile-bookmark-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.2), rgba(234, 88, 12, 0.12));
  border: 1px solid rgba(251, 146, 60, 0.22);
  color: var(--pp-accent);
  flex-shrink: 0;
}

.user-profile-bookmark-label {
  flex: 1;
  font-size: 0.84rem;
  color: var(--pp-text);
  text-transform: capitalize;
}

.user-profile-bookmark-row strong {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--pp-accent);
  white-space: nowrap;
}

.user-profile-bookmark-section {
  margin-bottom: 1.25rem;
}

.user-profile-bookmark-section h3 {
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pp-text-muted);
}

.user-profile-question-bookmark-list {
  display: grid;
  gap: 10px;
}

.user-profile-question-bookmark-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 15px;
  border-radius: 13px;
  background: var(--pp-surface-inset);
  border: 1px solid var(--pp-border);
  color: inherit;
  text-align: left;
  cursor: pointer;
  animation: userKpiIn 0.35s ease both;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.user-profile-question-bookmark-row:hover {
  transform: translateX(3px);
  border-color: var(--pp-border-strong);
  background: var(--pp-surface-raised);
}

.user-profile-question-bookmark-row.is-marked .user-profile-bookmark-icon {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.22), rgba(245, 158, 11, 0.12));
  border-color: rgba(251, 191, 36, 0.28);
  color: #fbbf24;
}

.user-profile-question-bookmark-meta {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 0.25rem;
}

.user-profile-question-bookmark-meta strong {
  font-size: 0.78rem;
  color: var(--pp-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-profile-question-bookmark-meta em {
  font-style: normal;
  font-size: 0.72rem;
  color: var(--pp-text-muted);
  line-height: 1.35;
}

.upd-bookmark-note {
  margin: 0.65rem 0 0;
  font-size: 0.72rem;
  color: var(--pp-text-muted);
}

/* ── Forms ── */

.user-profile-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.user-profile-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--pp-text-muted);
}

.user-profile-form-grid input,
.user-profile-form-grid select {
  min-height: 44px;
  padding: 0 13px;
  border-radius: 11px;
  border: 1px solid var(--pp-border-strong);
  background: var(--pp-surface-inset);
  color: var(--pp-text);
  font-size: 0.88rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.user-profile-form-grid input:focus,
.user-profile-form-grid select:focus {
  outline: none;
  border-color: var(--pp-accent);
  box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.16);
}

.user-profile-save-btn,
.user-profile-secondary-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  margin-top: 16px;
  padding: 0 22px;
  border-radius: 13px;
  border: none;
  background: linear-gradient(180deg, #fdba74 0%, #ea580c 55%, #c2410c 100%);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--pp-3d-orange-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.user-profile-save-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.38) 50%, transparent 65%);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
}

.user-profile-save-btn:hover::after {
  animation: ppBtnShine 0.75s ease;
}

.user-profile-save-btn:hover,
.user-profile-secondary-btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--pp-3d-orange-shadow-hover), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.user-profile-save-btn:active,
.user-profile-secondary-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #9a3412, inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.user-profile-save-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 3px 0 #9a3412, 0 6px 14px rgba(234, 88, 12, 0.2);
}

.user-profile-secondary-btn {
  background: linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
  color: var(--pp-text-soft);
  box-shadow: var(--pp-3d-shadow), var(--pp-3d-inset);
}

.user-profile-secondary-btn:hover {
  box-shadow: var(--pp-3d-shadow-hover), var(--pp-3d-inset);
}

.user-profile-secondary-btn:active {
  box-shadow: 0 2px 0 rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* ── Alerts ── */

.user-profile-alert {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 600;
  animation: userProfileRise 0.25s ease;
}

.user-profile-alert--success {
  color: #047857;
  background: rgba(52, 211, 153, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.3);
}

.user-profile-alert--error {
  color: #be123c;
  background: rgba(244, 63, 94, 0.08);
  border: 1px solid rgba(244, 63, 94, 0.28);
}

.user-profile-empty,
.user-profile-security-note p {
  color: var(--pp-text-muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

.user-profile-empty-state .user-profile-save-btn {
  margin-top: 8px;
}

/* ── Study shortcuts hub ── */

.user-profile-shortcuts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.user-profile-shortcut-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 15px;
  border: none;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: var(--pp-3d-shadow), var(--pp-3d-inset);
  cursor: pointer;
  text-align: left;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.user-profile-shortcut-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pp-3d-shadow-hover), var(--pp-3d-inset);
}

.user-profile-shortcut-card:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.user-profile-shortcut-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.18), rgba(234, 88, 12, 0.1));
  color: var(--pp-accent);
  flex-shrink: 0;
}

.user-profile-shortcut-copy {
  flex: 1;
  min-width: 0;
}

.user-profile-shortcut-copy strong {
  display: block;
  font-size: 0.82rem;
  color: var(--pp-text);
}

.user-profile-shortcut-copy span {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  color: var(--pp-text-muted);
}

.user-profile-shortcut-arrow {
  color: var(--pp-text-muted);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, color 0.18s ease;
}

.user-profile-shortcut-card:hover .user-profile-shortcut-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--pp-accent);
}

/* ── Timeline ── */

.user-profile-timeline {
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--pp-border);
  background: var(--pp-surface);
  box-shadow: var(--pp-shadow-soft);
}

.user-profile-timeline-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--pp-accent);
}

.user-profile-timeline-head strong {
  font-size: 0.88rem;
  color: var(--pp-text);
}

.user-profile-timeline ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.user-profile-timeline li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.user-profile-timeline-dot {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--pp-accent);
}

.user-profile-timeline-dot--mock { background: #8b5cf6; }

.user-profile-timeline-dot--typing { background: #0284c7; }

.user-profile-timeline-dot--chapter { background: #059669; }

.user-profile-timeline li strong {
  display: block;
  font-size: 0.78rem;
  color: var(--pp-text);
}

.user-profile-timeline li span {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  color: var(--pp-text-muted);
}

.user-profile-timeline li time {
  display: block;
  margin-top: 3px;
  font-size: 0.62rem;
  color: var(--pp-text-muted);
  font-style: normal;
}

/* ── Goals ── */

.user-profile-goals-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}

.user-profile-goal-meter {
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--pp-border);
  background: var(--pp-surface-inset);
}

.user-profile-goal-meter-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.user-profile-goal-meter-top span {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pp-text-muted);
}

.user-profile-goal-meter-top strong {
  font-family: var(--font-heading);
  color: var(--pp-text);
}

.user-profile-goal-meter-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.user-profile-goal-meter-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  transform-origin: left center;
  animation: ppBarGrow 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.user-profile-goal-meter--orange .user-profile-goal-meter-bar span {
  background: linear-gradient(90deg, #fb923c, #ea580c);
}

.user-profile-goal-meter--sky .user-profile-goal-meter-bar span {
  background: linear-gradient(90deg, #38bdf8, #0284c7);
}

.user-profile-goal-meter--violet .user-profile-goal-meter-bar span {
  background: linear-gradient(90deg, #a78bfa, #7c3aed);
}

.user-profile-goal-meter em {
  display: block;
  margin-top: 8px;
  font-size: 0.68rem;
  font-style: normal;
  color: var(--pp-text-muted);
}

.user-profile-subject-picker {
  margin-top: 16px;
}

.user-profile-subject-picker > p {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pp-text-muted);
}

.user-profile-subject-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.user-profile-subject-chip {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(180deg, #ffffff 0%, #eef2f7 100%);
  color: var(--pp-text-soft);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.14s ease, box-shadow 0.14s ease, color 0.14s ease, background 0.14s ease;
}

.user-profile-subject-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.user-profile-subject-chip:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.user-profile-subject-chip.is-active {
  background: linear-gradient(180deg, #fdba74 0%, #ea580c 55%, #c2410c 100%);
  color: #fff;
  box-shadow: 0 4px 0 #9a3412, 0 8px 16px rgba(234, 88, 12, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

/* ── Achievements ── */

.user-profile-achievement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.user-profile-achievement {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  opacity: 0.72;
  box-shadow: 0 3px 0 rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  animation: userKpiIn 0.35s ease both;
  transition: transform 0.16s ease, opacity 0.16s ease, box-shadow 0.16s ease;
}

.user-profile-achievement-grid .user-profile-achievement:nth-child(1) { animation-delay: 0.04s; }

.user-profile-achievement-grid .user-profile-achievement:nth-child(2) { animation-delay: 0.08s; }

.user-profile-achievement-grid .user-profile-achievement:nth-child(3) { animation-delay: 0.12s; }

.user-profile-achievement-grid .user-profile-achievement:nth-child(4) { animation-delay: 0.16s; }

.user-profile-achievement-grid .user-profile-achievement:nth-child(5) { animation-delay: 0.2s; }

.user-profile-achievement-grid .user-profile-achievement:nth-child(6) { animation-delay: 0.24s; }

.user-profile-achievement-grid .user-profile-achievement:nth-child(7) { animation-delay: 0.28s; }

.user-profile-achievement-grid .user-profile-achievement:nth-child(8) { animation-delay: 0.32s; }

.user-profile-achievement-grid .user-profile-achievement:nth-child(9) { animation-delay: 0.36s; }

.user-profile-achievement-grid .user-profile-achievement:nth-child(10) { animation-delay: 0.4s; }

.user-profile-achievement.is-unlocked {
  opacity: 1;
  background: linear-gradient(180deg, #ffffff 0%, #fff7ed 100%);
  box-shadow: var(--pp-3d-shadow), var(--pp-3d-inset);
  animation: userKpiIn 0.35s ease both, ppUnlockGlow 2.8s ease-in-out 0.4s infinite;
}

.user-profile-achievement.is-unlocked:hover {
  transform: translateY(-4px);
  box-shadow: var(--pp-3d-shadow-hover), var(--pp-3d-inset);
}

.user-profile-achievement.is-unlocked:active {
  transform: translateY(0);
}

.user-profile-achievement-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(148, 163, 184, 0.15);
  color: var(--pp-text-muted);
}

.user-profile-achievement.is-unlocked .user-profile-achievement-icon {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.2), rgba(234, 88, 12, 0.12));
  color: var(--pp-accent);
}

.user-profile-achievement strong {
  font-size: 0.84rem;
  color: var(--pp-text);
}

.user-profile-achievement > span {
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--pp-text-muted);
}

.user-profile-achievement-status {
  margin-top: 4px;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #059669;
}

.user-profile-achievement-status--locked {
  color: var(--pp-text-muted);
}

/* ── Settings layout ── */

.user-profile-settings-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.user-profile-settings-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--pp-border);
  background: var(--pp-surface);
  box-shadow: var(--pp-shadow-soft);
}

.user-profile-settings-nav-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 12px;
  border: none;
  border-radius: 11px;
  background: transparent;
  color: var(--pp-text-muted);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: transform 0.14s ease, box-shadow 0.14s ease, color 0.14s ease, background 0.14s ease;
}

.user-profile-settings-nav-btn:hover {
  color: var(--pp-text);
  background: var(--pp-surface-inset);
  transform: translateX(2px);
}

.user-profile-settings-nav-btn.is-active {
  color: #fff;
  background: linear-gradient(180deg, #fdba74 0%, #ea580c 55%, #c2410c 100%);
  box-shadow: 0 4px 0 #9a3412, 0 8px 16px rgba(234, 88, 12, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.user-profile-settings-nav-btn.is-active:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #9a3412, inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.user-profile-bio-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 14px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--pp-text-muted);
}

.user-profile-bio-field textarea {
  min-height: 88px;
  padding: 12px;
  border-radius: 11px;
  border: 1px solid var(--pp-border-strong);
  background: var(--pp-surface-inset);
  color: var(--pp-text);
  font-size: 0.88rem;
  resize: vertical;
}

.user-profile-toggle-list {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.user-profile-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--pp-border);
  background: var(--pp-surface-inset);
}

.user-profile-toggle-row strong {
  display: block;
  font-size: 0.82rem;
  color: var(--pp-text);
}

.user-profile-toggle-row span {
  display: block;
  margin-top: 3px;
  font-size: 0.72rem;
  color: var(--pp-text-muted);
  line-height: 1.4;
}

.user-profile-switch {
  position: relative;
  width: 44px;
  height: 26px;
  border: none;
  border-radius: 999px;
  background: #cbd5e1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.18s ease;
}

.user-profile-switch span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
  transition: transform 0.18s ease;
}

.user-profile-switch.is-on {
  background: linear-gradient(180deg, #fb923c, #ea580c);
}

.user-profile-switch.is-on span {
  transform: translateX(18px);
}

.user-profile-form-grid--spaced {
  margin-top: 4px;
}

.user-profile-data-actions {
  display: grid;
  gap: 10px;
}

.user-profile-data-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%);
  cursor: pointer;
  text-align: left;
  box-shadow: var(--pp-3d-shadow), var(--pp-3d-inset);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.user-profile-data-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--pp-3d-shadow-hover), var(--pp-3d-inset);
}

.user-profile-data-card:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.user-profile-data-card svg {
  color: var(--pp-accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.user-profile-data-card strong {
  display: block;
  font-size: 0.84rem;
  color: var(--pp-text);
}

.user-profile-data-card span {
  display: block;
  margin-top: 3px;
  font-size: 0.72rem;
  color: var(--pp-text-muted);
  line-height: 1.45;
}

.user-profile-data-card--danger svg {
  color: #be123c;
}

.user-profile-data-card--danger strong {
  color: #be123c;
}

/* ── Learning dashboard (Overview tab) ── */

.user-profile-dashboard {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.upd-animate-in {
  animation: ppCardIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.upd-card {
  padding: 20px 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%);
  border: 1px solid var(--pp-border);
  box-shadow: var(--pp-3d-shadow), var(--pp-3d-inset);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.upd-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--pp-3d-shadow-hover), var(--pp-3d-inset);
}

.upd-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.upd-card-head > svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--pp-accent);
}

.upd-card-head > div {
  flex: 1;
  min-width: 0;
}

.upd-card-head h2 {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--pp-text);
  letter-spacing: -0.01em;
}

.upd-card-head p {
  margin: 4px 0 0;
  font-size: 0.74rem;
  color: var(--pp-text-muted);
  line-height: 1.45;
}

.upd-link-btn {
  position: relative;
  flex-shrink: 0;
  padding: 8px 14px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
  color: var(--pp-accent-deep);
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 3px 0 rgba(154, 52, 18, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.upd-link-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 rgba(154, 52, 18, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.upd-link-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(154, 52, 18, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.upd-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: none;
  border-radius: 13px;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.upd-btn--primary {
  background: linear-gradient(180deg, #fdba74 0%, #ea580c 55%, #c2410c 100%);
  color: #fff;
  box-shadow: var(--pp-3d-orange-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  animation: ppPulseRing 2.4s ease infinite;
}

.upd-btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.38) 50%, transparent 65%);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
}

.upd-btn--primary:hover::after {
  animation: ppBtnShine 0.75s ease;
}

.upd-btn--primary:hover {
  transform: translateY(-3px);
  box-shadow: var(--pp-3d-orange-shadow-hover), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.upd-btn--primary:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #9a3412, inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.upd-continue {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #0f172a 100%);
  border-color: rgba(255, 255, 255, 0.08);
  color: #fff;
  box-shadow: 0 8px 0 rgba(2, 6, 23, 0.55), 0 18px 36px rgba(2, 6, 23, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.upd-continue:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 0 rgba(2, 6, 23, 0.55), 0 22px 40px rgba(2, 6, 23, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.upd-continue .upd-card-head svg,
.upd-continue .upd-card-head h2,
.upd-continue .upd-card-head p {
  color: #fff;
}

.upd-continue .upd-card-head p {
  opacity: 0.72;
}

.upd-continue-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.upd-continue-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.upd-continue-body strong {
  display: block;
  margin-top: 4px;
  font-size: 1.15rem;
  color: #fff;
}

.upd-continue-body p {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.82);
}

.upd-continue-meta {
  display: block;
  margin-top: 8px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
}

.upd-goal-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.upd-goal-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  transform-origin: left center;
  animation: ppBarGrow 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  background: linear-gradient(90deg, var(--pp-accent), #fb923c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.upd-goal-caption {
  margin: 8px 0 0;
  font-size: 0.72rem;
  color: var(--pp-text-muted);
}

.upd-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.upd-summary-tile {
  padding: 14px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%);
  border: none;
  box-shadow: 0 3px 0 rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.upd-summary-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 0 rgba(15, 23, 42, 0.1), 0 10px 18px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.upd-summary-tile span:not(.upd-summary-icon) {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pp-text-muted);
}

.upd-summary-tile strong {
  display: block;
  margin-top: 6px;
  font-size: 0.88rem;
  color: var(--pp-text);
}

.upd-summary-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  border-radius: 8px;
  background: rgba(234, 88, 12, 0.1);
  color: var(--pp-accent);
}

.upd-summary-tile--accent {
  background: linear-gradient(135deg, rgba(234, 88, 12, 0.1), rgba(251, 146, 60, 0.06));
  border-color: rgba(234, 88, 12, 0.18);
}

.upd-subject-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.upd-subject-row em {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 0.68rem;
  color: var(--pp-text-muted);
}

.upd-subject-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.upd-subject-top strong {
  font-size: 0.82rem;
  color: var(--pp-text);
}

.upd-subject-top span {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--pp-accent-deep);
}

.upd-progress-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.upd-progress-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  transform-origin: left center;
  animation: ppBarGrow 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  background: linear-gradient(90deg, #38bdf8, #0ea5e9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.upd-progress-bar--readiness span {
  background: linear-gradient(90deg, #22c55e, #16a34a);
}

.upd-ai {
  background: linear-gradient(180deg, #fff 0%, #fffaf5 100%);
}

.upd-rec-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.upd-rec-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: none;
  box-shadow: 0 3px 0 rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.upd-rec-list li:hover {
  transform: translateX(4px) translateY(-2px);
  box-shadow: 0 5px 0 rgba(15, 23, 42, 0.1), 0 10px 18px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.upd-rec-list li > svg {
  flex-shrink: 0;
  color: #16a34a;
}

.upd-rec-list li > div {
  flex: 1;
  min-width: 0;
}

.upd-rec-list strong {
  display: block;
  font-size: 0.8rem;
  color: var(--pp-text);
}

.upd-rec-list span {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  color: var(--pp-text-muted);
}

.upd-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.upd-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.upd-feed li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--pp-border);
}

.upd-feed li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.upd-feed li > svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--pp-accent);
}

.upd-feed strong {
  display: block;
  font-size: 0.78rem;
  color: var(--pp-text);
}

.upd-feed span {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  color: var(--pp-text-muted);
}

.upd-analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.upd-analytics-stat {
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%);
  border: none;
  box-shadow: 0 3px 0 rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.upd-analytics-stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 0 rgba(15, 23, 42, 0.1), 0 10px 18px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.upd-analytics-stat span {
  display: block;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pp-text-muted);
}

.upd-analytics-stat strong {
  display: block;
  margin-top: 6px;
  font-size: 1rem;
  color: var(--pp-text);
}

.upd-heatmap-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.upd-heatmap {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.upd-heatmap-week {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.upd-heatmap-cell {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: rgba(15, 23, 42, 0.06);
  animation: ppHeatPop 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: transform 0.12s ease;
}

.upd-heatmap-cell:hover {
  transform: scale(1.35);
}

.upd-heatmap-cell--0 { background: rgba(15, 23, 42, 0.06); }

.upd-heatmap-cell--1 { background: rgba(251, 146, 60, 0.28); }

.upd-heatmap-cell--2 { background: rgba(251, 146, 60, 0.48); }

.upd-heatmap-cell--3 { background: rgba(234, 88, 12, 0.68); }

.upd-heatmap-cell--4 { background: var(--pp-accent-deep); }

.upd-heatmap-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.64rem;
  color: var(--pp-text-muted);
}

.upd-level {
  background: linear-gradient(135deg, #fff7ed 0%, #fff 55%);
}

.upd-level-main {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
  align-items: start;
}

.upd-level-kicker {
  display: block;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pp-text-muted);
}

.upd-level-num {
  display: block;
  margin-top: 4px;
  font-size: 1.6rem;
  color: var(--pp-text);
}

.upd-xp-bar {
  height: 10px;
  margin-top: 12px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.upd-xp-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  transform-origin: left center;
  animation: ppBarGrow 1s cubic-bezier(0.22, 1, 0.36, 1) both;
  background: linear-gradient(90deg, #f59e0b, var(--pp-accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.upd-level-main > div > p {
  margin: 8px 0 0;
  font-size: 0.72rem;
  color: var(--pp-text-muted);
}

.upd-rank-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.upd-rank-tile {
  padding: 12px 10px;
  border-radius: 12px;
  background: var(--pp-surface-inset);
  border: 1px solid var(--pp-border);
  text-align: center;
}

.upd-rank-tile span {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pp-text-muted);
}

.upd-rank-tile strong {
  display: block;
  margin-top: 6px;
  font-size: 0.92rem;
  color: var(--pp-text);
}

.upd-milestone {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(234, 88, 12, 0.08);
  border: 1px solid rgba(234, 88, 12, 0.16);
}

.upd-milestone svg {
  flex-shrink: 0;
  color: var(--pp-accent);
}

.upd-milestone strong {
  display: block;
  font-size: 0.8rem;
  color: var(--pp-text);
}

.upd-milestone span {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  color: var(--pp-text-muted);
}

.upd-readiness-overall {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.16);
}

.upd-readiness-overall strong {
  font-size: 1.5rem;
  color: #15803d;
}

.upd-readiness-overall span {
  font-size: 0.78rem;
  color: var(--pp-text-muted);
}

.upd-weak-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.upd-weak-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff7ed;
  border: 1px solid rgba(234, 88, 12, 0.12);
}

.upd-weak-list li span {
  flex: 1;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--pp-text);
}

.upd-weak-list li em {
  font-style: normal;
  font-size: 0.68rem;
  color: var(--pp-text-muted);
}

.upd-bookmark-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.upd-bookmark-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--pp-surface-inset);
  border: 1px solid var(--pp-border);
}

.upd-bookmark-list span {
  font-size: 0.78rem;
  color: var(--pp-text-soft);
}

.upd-bookmark-list strong {
  font-size: 0.88rem;
  color: var(--pp-accent-deep);
}

.upd-motivation {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: linear-gradient(135deg, #eff6ff 0%, #fff 100%);
}

.upd-motivation svg {
  flex-shrink: 0;
  color: #2563eb;
}

.upd-motivation span {
  display: block;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #2563eb;
}

.upd-motivation p {
  margin: 6px 0 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--pp-text-soft);
  font-style: italic;
}

.upd-lifetime-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.upd-lifetime-stat {
  padding: 16px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%);
  border: none;
  box-shadow: 0 3px 0 rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  text-align: center;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.upd-lifetime-stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 0 rgba(15, 23, 42, 0.1), 0 10px 18px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.upd-lifetime-stat strong {
  display: block;
  font-size: 1.05rem;
  color: var(--pp-text);
}

.upd-lifetime-stat span {
  display: block;
  margin-top: 4px;
  font-size: 0.64rem;
  color: var(--pp-text-muted);
}

.upd-empty {
  margin: 0;
  font-size: 0.78rem;
  color: var(--pp-text-muted);
}

/* ── Obsidian Slate — unified surface overrides ── */

.user-profile-page .user-profile-panel,
.user-profile-page .upd-card,
.user-profile-page .user-profile-settings-nav,
.user-profile-page .user-profile-kpi,
.user-profile-page .user-profile-shortcut-card,
.user-profile-page .user-profile-data-card,
.user-profile-page .user-profile-bookmark-row {
  background: var(--pp-gradient-surface);
  border-color: var(--pp-border);
  color: var(--pp-text-soft);
}

.user-profile-page .user-profile-save-btn {
  background: var(--pp-gradient-accent-btn);
  box-shadow: var(--pp-3d-orange-shadow), var(--pp-3d-inset);
}

.user-profile-page .user-profile-save-btn:hover {
  box-shadow: var(--pp-3d-orange-shadow-hover), var(--pp-3d-inset);
}

.user-profile-page .user-profile-save-btn:active {
  box-shadow: 0 2px 0 #92400e, var(--pp-3d-inset);
}

.user-profile-page .user-profile-secondary-btn {
  background: var(--pp-gradient-neutral-btn);
  color: var(--pp-text-soft);
  box-shadow: var(--pp-3d-shadow), var(--pp-3d-inset);
}

.user-profile-page .user-profile-tabs {
  background: var(--pp-surface-inset);
  border-color: var(--pp-border);
}

.user-profile-page .user-profile-tab-indicator {
  background: var(--pp-gradient-accent-btn);
  box-shadow: 0 4px 0 #92400e, 0 8px 18px rgba(245, 158, 11, 0.28), var(--pp-3d-inset);
}

.user-profile-page .user-profile-tab:not(.is-active) .user-profile-tab-badge {
  background: var(--pp-accent-soft);
  color: var(--pp-accent);
}

.user-profile-page .upd-link-btn {
  background: var(--pp-gradient-accent-chip);
  color: var(--pp-accent);
  box-shadow: 0 3px 0 rgba(146, 64, 14, 0.35), var(--pp-3d-inset);
}

.user-profile-page .upd-link-btn:hover {
  box-shadow: 0 5px 0 rgba(146, 64, 14, 0.4), var(--pp-3d-inset);
}

.user-profile-page .upd-btn--primary {
  background: var(--pp-gradient-accent-btn);
}

.user-profile-page .upd-btn--primary:active {
  box-shadow: 0 2px 0 #92400e, var(--pp-3d-inset);
}

.user-profile-page .upd-summary-tile,
.user-profile-page .upd-analytics-stat,
.user-profile-page .upd-lifetime-stat,
.user-profile-page .upd-rank-tile,
.user-profile-page .upd-rec-list li,
.user-profile-page .user-profile-goal-meter,
.user-profile-page .user-profile-info-row {
  background: var(--pp-gradient-inset);
  border: 1px solid var(--pp-border);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28), var(--pp-3d-inset);
}

.user-profile-page .upd-summary-tile--accent {
  background: var(--pp-gradient-amber-soft);
  border-color: rgba(245, 158, 11, 0.22);
}

.user-profile-page .upd-ai {
  background: var(--pp-gradient-ai);
}

.user-profile-page .upd-level {
  background: var(--pp-gradient-level);
}

.user-profile-page .upd-motivation {
  background: var(--pp-gradient-info-soft);
}

.user-profile-page .upd-motivation span {
  color: var(--pp-info);
}

.user-profile-page .user-profile-achievement {
  background: var(--pp-gradient-inset);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.22), var(--pp-3d-inset);
}

.user-profile-page .user-profile-achievement.is-unlocked {
  background: var(--pp-gradient-surface);
}

.user-profile-page .user-profile-empty-state {
  background: var(--pp-surface-inset);
  border-color: var(--pp-border-strong);
}

.user-profile-page .user-profile-form-grid input,
.user-profile-page .user-profile-form-grid select,
.user-profile-page .user-profile-bio-field textarea {
  background: var(--pp-surface-inset);
  border-color: var(--pp-border-strong);
  color: var(--pp-text);
}

.user-profile-page .user-profile-form-grid input:focus,
.user-profile-page .user-profile-form-grid select:focus,
.user-profile-page .user-profile-bio-field textarea:focus {
  border-color: var(--pp-accent);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

.user-profile-page .user-profile-settings-nav-btn.is-active {
  background: var(--pp-gradient-accent-btn);
  box-shadow: 0 4px 0 #92400e, 0 8px 16px rgba(245, 158, 11, 0.28), var(--pp-3d-inset);
}

.user-profile-page .user-profile-subject-chip {
  background: var(--pp-gradient-neutral-btn);
  color: var(--pp-text-soft);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.32), var(--pp-3d-inset);
}

.user-profile-page .user-profile-subject-chip.is-active {
  background: var(--pp-gradient-accent-btn);
  color: #fff;
  box-shadow: 0 4px 0 #92400e, 0 8px 16px rgba(245, 158, 11, 0.28), var(--pp-3d-inset);
}

.user-profile-page .upd-readiness-overall {
  background: var(--pp-gradient-success-soft);
  border: 1px solid rgba(52, 211, 153, 0.22);
}

.user-profile-page .upd-readiness-overall strong {
  color: var(--pp-success);
}

.user-profile-page .upd-weak-list li {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.16);
}

.user-profile-page .upd-milestone {
  background: var(--pp-accent-soft);
  border-color: rgba(245, 158, 11, 0.22);
}

.user-profile-page .upd-goal-bar,
.user-profile-page .upd-progress-bar,
.user-profile-page .upd-xp-bar,
.user-profile-page .user-profile-goal-meter-bar {
  background: rgba(0, 0, 0, 0.32);
}

.user-profile-page .upd-bookmark-list li {
  background: var(--pp-surface-inset);
  border: 1px solid var(--pp-border);
}

.user-profile-page .user-profile-alert--success {
  color: var(--pp-success);
  background: rgba(52, 211, 153, 0.1);
  border-color: rgba(52, 211, 153, 0.25);
}

.user-profile-page .user-profile-alert--error {
  color: #fb7185;
  background: rgba(244, 63, 94, 0.1);
  border-color: rgba(244, 63, 94, 0.25);
}

.user-profile-page .user-profile-switch {
  background: var(--pp-surface-inset);
  border: 1px solid var(--pp-border);
}

.user-profile-page .user-profile-switch.is-on {
  background: var(--pp-accent);
  border-color: var(--pp-accent-deep);
}

.user-profile-page .user-profile-toast {
  background: var(--pp-surface-raised);
  border: 1px solid var(--pp-border);
  color: var(--pp-text);
  box-shadow: var(--pp-shadow);
}

.user-profile-page .user-profile-data-card--danger strong {
  color: #fb7185;
}

.user-profile-page .user-profile-achievement-status {
  color: var(--pp-success);
}

.user-profile-page .user-profile-achievement-status--locked {
  color: var(--pp-text-muted);
}

.user-profile-page .user-profile-panel .upr-chapter-bar {
  background: rgba(0, 0, 0, 0.32);
}

.user-profile-page .upd-continue {
  background: linear-gradient(135deg, #0a1220 0%, #152238 55%, #0a1220 100%);
  border-color: rgba(245, 158, 11, 0.18);
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.5), 0 18px 36px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(245, 158, 11, 0.12);
}

.user-profile-page .upd-heatmap-cell--0 { background: rgba(148, 163, 184, 0.08); }

.user-profile-page .upd-heatmap-cell--1 { background: rgba(245, 158, 11, 0.22); }

.user-profile-page .upd-heatmap-cell--2 { background: rgba(245, 158, 11, 0.38); }

.user-profile-page .upd-heatmap-cell--3 { background: rgba(245, 158, 11, 0.58); }

.user-profile-page .upd-heatmap-cell--4 { background: var(--pp-accent); }

/* ── Responsive ── */

@media (max-width: 900px) {
  .user-profile-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .user-profile-avatar-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

  .user-profile-shortcuts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .upd-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .upd-two-col,
  .upd-level-main,
  .upd-lifetime-grid {
    grid-template-columns: 1fr;
  }

  .upd-rank-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .user-profile-hero {
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
  }

  .user-profile-hero-main {
    flex-direction: column;
    align-items: flex-start;
  }

  .user-profile-hero-actions {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
  }

  .user-profile-logout-btn {
    flex: 1;
  }

  .user-profile-quick-actions {
    flex-direction: column;
  }

  .user-profile-quick-btn {
    width: 100%;
    justify-content: center;
  }

  .user-profile-tabs-wrap {
    overflow-x: auto;
  }

  .user-profile-tabs {
    display: flex;
    width: max-content;
    min-width: 100%;
  }

  .user-profile-tab {
    flex: 1;
    justify-content: center;
    padding: 0 10px;
  }

  .user-profile-panel {
    padding: 18px;
  }

  .user-profile-mini-stats {
    grid-template-columns: 1fr;
  }

  .user-profile-settings-layout {
    grid-template-columns: 1fr;
  }

  .user-profile-settings-nav {
    flex-direction: row;
    overflow-x: auto;
  }

  .user-profile-settings-nav-btn {
    white-space: nowrap;
  }

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

  .upd-summary-grid {
    grid-template-columns: 1fr;
  }

  .upd-analytics-grid,
  .upd-rank-grid {
    grid-template-columns: 1fr;
  }

  .upd-continue-body {
    flex-direction: column;
    align-items: stretch;
  }

  .upd-btn--primary {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .user-profile-page,
  .user-profile-hero,
  .user-profile-kpi,
  .user-profile-panel-stage,
  .user-profile-bookmark-row,
  .user-profile-hero-glow,
  .upd-animate-in,
  .upd-card,
  .upd-summary-tile,
  .upd-heatmap-cell,
  .user-profile-empty-state svg,
  .upd-btn--primary,
  .user-profile-achievement.is-unlocked,
  .user-profile-avatar-option.is-active {
    animation: none !important;
  }

  .upd-progress-bar span,
  .upd-goal-bar span,
  .upd-xp-bar span,
  .user-profile-goal-meter-bar span {
    animation: none !important;
    transform: none !important;
  }
}

/* Progress report embedded in the profile panel: match the light card style */

.user-profile-panel .upr-root {
  padding: 0;
  background: transparent;
  border: none;
}

.user-profile-panel .upr-title {
  font-size: 0.92rem;
  color: var(--pp-text);
}

.user-profile-panel .upr-subtitle {
  font-size: 0.72rem;
  color: var(--pp-text-muted);
}

.user-profile-panel .upr-kpi {
  padding: 12px 8px;
  border-radius: 13px;
  background: var(--pp-surface-inset);
  border: 1px solid var(--pp-border);
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.user-profile-panel .upr-kpi:hover {
  transform: translateY(-2px);
  border-color: var(--pp-border-strong);
}

.user-profile-panel .upr-kpi-icon {
  color: var(--pp-accent);
}

.user-profile-panel .upr-kpi-val {
  font-size: 1.05rem;
  color: var(--pp-text);
}

.user-profile-panel .upr-kpi-label {
  font-size: 0.58rem;
  color: var(--pp-text-muted);
}

.user-profile-panel .upr-kpi.is-interactive:hover {
  border-color: rgba(251, 146, 60, 0.35);
  background: rgba(251, 146, 60, 0.08);
}

.user-profile-panel .upr-kpi.is-active {
  border-color: rgba(251, 146, 60, 0.5);
  background: rgba(251, 146, 60, 0.12);
}

.user-profile-panel .upr-question-filter-row {
  background: var(--pp-surface-inset);
  border-color: var(--pp-border);
}

.user-profile-panel .upr-question-filter-row:hover {
  border-color: rgba(251, 146, 60, 0.35);
  background: var(--pp-surface-raised);
}

.user-profile-panel .upr-question-filter-meta strong {
  color: var(--pp-text);
}

.user-profile-panel .upr-question-filter-meta em {
  color: var(--pp-text-muted);
}

.user-profile-panel .upr-question-filter-meta small {
  color: var(--pp-text-muted);
}

.user-profile-panel .upr-section-title {
  color: var(--pp-text-muted);
}

.user-profile-panel .upr-empty {
  font-size: 0.8rem;
  color: var(--pp-text-muted);
}

.user-profile-panel .upr-chapter-card,
.user-profile-panel .upr-mock-row {
  background: var(--pp-surface-inset);
  border: 1px solid var(--pp-border);
}

.user-profile-panel .upr-chapter-title {
  color: var(--pp-text);
}

.user-profile-panel .upr-chapter-bar {
  background: rgba(0, 0, 0, 0.32);
}

.user-profile-panel .upr-chapter-stats,
.user-profile-panel .upr-mock-row {
  color: var(--pp-text-muted);
}

/* ── Student Toolkit ── */

.stk-hub-flat {
  display: grid;
  gap: 1rem;
}

.stk-hub-flat h3 {
  margin: 0;
  font-size: 0.95rem;
  color: var(--bg-navy);
}

.stk-category-section h4 {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.stk-hub {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  min-height: 420px;
}

.stk-sidebar {
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 0.85rem;
}

.stk-sidebar h3 {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  color: var(--bg-navy);
}

.stk-sidebar-sub {
  margin: 0 0 0.75rem;
  font-size: 0.68rem;
  color: var(--text-muted);
}

.stk-cat-nav {
  display: grid;
  gap: 0.35rem;
}

.stk-cat-btn {
  text-align: left;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
}

.stk-cat-btn.active,
.stk-cat-btn:hover {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
  color: var(--bg-navy);
}

.stk-main h2 {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  color: var(--bg-navy);
}

.stk-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.65rem;
}

.stk-tool-card {
  display: grid;
  gap: 0.25rem;
  padding: 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.stk-tool-card:hover {
  transform: translateY(-2px);
  border-color: rgba(245, 158, 11, 0.45);
}

.stk-tool-icon { font-size: 1.25rem; }

.stk-tool-card strong { font-size: 0.78rem; color: var(--bg-navy); }

.stk-tool-card em { font-size: 0.65rem; color: var(--text-muted); font-style: normal; }

.stk-tool-head { margin-bottom: 0.75rem; }

.stk-back {
  border: none;
  background: none;
  color: var(--accent-orange);
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  margin-bottom: 0.35rem;
}

.stk-tool {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1rem;
}

.stk-lead, .stk-hint, .stk-empty {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.stk-picker-row,
.stk-inline-form,
.stk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.65rem;
}

.stk-field {
  display: grid;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  margin-bottom: 0.55rem;
}

.stk-field input,
.stk-field textarea,
.stk-field select,
.stk-tool input,
.stk-tool textarea,
.stk-tool select {
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  font-size: 0.78rem;
}

.stk-btn {
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}

.stk-btn-primary {
  background: var(--accent-orange);
  border-color: var(--accent-orange);
  color: #fff;
}

.stk-btn-sm { padding: 0.25rem 0.5rem; font-size: 0.65rem; }

.stk-timer-display {
  font-size: 2rem;
  font-weight: 900;
  text-align: center;
  color: var(--bg-navy);
  margin: 0.75rem 0;
}

.stk-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.5rem;
}

.stk-stat {
  display: grid;
  gap: 0.15rem;
  padding: 0.65rem;
  border-radius: 10px;
  background: rgba(245, 158, 11, 0.08);
  text-align: center;
}

.stk-stat strong { font-size: 1.1rem; color: var(--bg-navy); }

.stk-stat span { font-size: 0.62rem; color: var(--text-muted); text-transform: uppercase; }

.stk-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; }

.stk-list li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.03);
  font-size: 0.75rem;
}

.stk-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }

.stk-checklist label { font-size: 0.78rem; display: flex; gap: 0.45rem; align-items: flex-start; }

.stk-link-row {
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 0.15rem;
}

.stk-question, .stk-sample, .stk-word, .stk-formula-expr {
  font-size: 0.85rem;
  color: var(--bg-navy);
  line-height: 1.45;
}

.stk-mcq-grid { display: grid; gap: 0.4rem; }

.stk-mcq {
  text-align: left;
  padding: 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: #fff;
  font-size: 0.75rem;
  cursor: pointer;
}

.stk-mcq.picked { border-color: var(--accent-orange); background: rgba(245, 158, 11, 0.1); }

.stk-result { font-size: 0.8rem; font-weight: 800; color: #15803d; }

.stk-issues { font-size: 0.75rem; color: #b45309; }

.stk-match-grid { display: grid; gap: 0.5rem; }

.stk-match-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; }

.stk-match-btn {
  padding: 0.45rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: #fff;
  font-size: 0.72rem;
  cursor: pointer;
}

.stk-match-btn.active { border-color: var(--accent-orange); }

.stk-match-btn.done { opacity: 0.5; background: #dcfce7; }

.stk-scroll { max-height: 360px; overflow: auto; }

.stk-syllabus-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: center;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.72rem;
}

.stk-periodic-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.35rem;
  margin-bottom: 0.65rem;
}

.stk-element {
  padding: 0.45rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  font-weight: 800;
  cursor: pointer;
}

.stk-element.active { background: rgba(245, 158, 11, 0.15); border-color: var(--accent-orange); }

.stk-graph {
  width: 100%;
  max-width: 420px;
  background: rgba(15, 23, 42, 0.03);
  border-radius: 8px;
}

.stk-canvas {
  width: 100%;
  max-width: 420px;
  border: 1px dashed var(--border-color);
  border-radius: 8px;
  background: #fff;
  cursor: crosshair;
}

.stk-badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.5rem;
}

.stk-badge {
  display: grid;
  gap: 0.25rem;
  padding: 0.65rem;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  text-align: center;
  font-size: 0.72rem;
  opacity: 0.55;
}

.stk-badge.unlocked { opacity: 1; background: rgba(245, 158, 11, 0.08); }

.stk-quote {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  color: var(--bg-navy);
  border-left: 3px solid var(--accent-orange);
  padding-left: 0.65rem;
}

.stk-tip { font-size: 0.78rem; color: var(--text-secondary); }

.stk-breathe { text-align: center; }

.stk-breathe-circle {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  margin: 0 auto 0.65rem;
  background: rgba(59, 130, 246, 0.25);
  transition: transform 0.8s ease;
}

.stk-breathe-inhale { transform: scale(1.25); background: rgba(34, 197, 94, 0.3); }

.stk-breathe-hold { transform: scale(1.25); }

.stk-breathe-exhale { transform: scale(0.85); background: rgba(99, 102, 241, 0.25); }

.stk-ncert-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.75rem;
}

.stk-snapshot-preview {
  font-size: 0.78rem;
  margin-bottom: 0.65rem;
  padding: 0.65rem;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.03);
}

.stk-mock-hall-active {
  background: #0f172a;
  color: #e2e8f0;
  text-align: center;
}

.stk-week-pattern {
  margin-top: 0.65rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: 0.68rem;
}

/* Map Practice — animated India & world maps */

.stk-map-practice { padding: 0.85rem; }

.stk-map-mode-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.75rem;
}

.stk-map-layout,
.stk-map-quiz-layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 0.75rem;
  align-items: start;
}

.stk-map-layout-india {
  grid-template-columns: 1fr 220px;
}

.stk-map-layout-india .stk-map-side {
  max-height: 680px;
}

.stk-map-quiz-layout {
  grid-template-columns: 220px 1fr;
}

.stk-map-wrap {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  animation: stkPanelSlideIn 0.4s ease;
}

.stk-map-svg {
  display: block;
  width: 100%;
  height: auto;
}

.stk-map-land-india {
  transform-origin: center;
  animation: stkMapLandPulse 5s ease-in-out infinite;
}

.stk-map-marker {
  cursor: pointer;
  animation: stkTabPopIn 0.45s ease backwards;
}

.stk-map-marker:focus-visible .stk-map-dot {
  stroke: #fff;
  stroke-width: 2;
}

.stk-map-dot {
  fill: #6366f1;
  stroke: #fff;
  stroke-width: 1.5;
  transition: transform 0.2s ease, fill 0.2s ease;
}

.stk-map-dot-ut { fill: #8b5cf6; }

.stk-map-dot-country { fill: #f59e0b; }

.stk-map-dot.is-active { fill: #ef4444; transform: scale(1.2); }

.stk-map-pulse-ring {
  fill: none;
  stroke: #fbbf24;
  stroke-width: 2;
}

.stk-map-pulse-ring.world { stroke: #38bdf8; }

.stk-map-label {
  font-size: 9px;
  font-weight: 800;
  fill: #0f172a;
  pointer-events: none;
}

.stk-map-label.world { fill: #f8fafc; }

.stk-map-title {
  font-size: 11px;
  font-weight: 800;
  fill: #0f172a;
  letter-spacing: 0.04em;
}

.stk-map-title.world { fill: #e2e8f0; }

.stk-map-caption {
  font-size: 8px;
  fill: #64748b;
}

.stk-map-caption.world { fill: #94a3b8; }

.stk-map-continent {
  cursor: pointer;
  transition: filter 0.2s ease;
  animation: stkTabPopIn 0.5s ease backwards;
}

.stk-map-continent:hover,
.stk-map-continent.is-active {
  filter: brightness(1.08) drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
}

.stk-map-side {
  display: grid;
  gap: 0.55rem;
  max-height: 420px;
}

.stk-map-detail {
  padding: 0.65rem;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  font-size: 0.72rem;
}

.stk-map-detail-empty {
  color: var(--text-muted);
  font-style: italic;
}

.stk-map-detail h4 {
  margin: 0.25rem 0 0.35rem;
  font-size: 0.85rem;
  color: var(--bg-navy);
}

.stk-map-detail p { margin: 0.2rem 0; }

.stk-map-detail-text {
  margin-top: 0.35rem !important;
  color: var(--text-secondary);
  line-height: 1.45;
}

.stk-map-badge {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  background: rgba(99, 102, 241, 0.12);
  color: #4338ca;
}

.stk-map-badge-ut { background: rgba(139, 92, 246, 0.12); color: #6d28d9; }

.stk-map-badge-country { background: rgba(245, 158, 11, 0.12); color: #b45309; }

.stk-map-badge-continent { background: rgba(14, 165, 233, 0.12); color: #0369a1; }

.stk-map-list {
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: #fff;
}

.stk-map-search {
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: none;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.72rem;
}

.stk-map-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
}

.stk-map-list-btn {
  display: grid;
  gap: 0.1rem;
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: none;
  border-bottom: 1px solid var(--border-light);
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-size: 0.72rem;
}

.stk-map-list-btn:hover,
.stk-map-list-btn.active {
  background: rgba(245, 158, 11, 0.1);
}

.stk-map-list-btn em {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-style: normal;
}

.stk-map-quiz-panel {
  padding: 0.65rem;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: #fff;
}

@keyframes stkMapLandPulse {
  0%, 100% { opacity: 0.88; }
  50% { opacity: 1; }
}

@media (max-width: 768px) {
  .stk-map-layout,
  .stk-map-quiz-layout {
    grid-template-columns: 1fr;
  }

  .stk-map-side { max-height: none; }

  .stk-india-stage {
    grid-template-columns: 1fr;
  }

  .stk-india-legend,
  .stk-india-glance {
    position: static;
    margin-top: 0.5rem;
  }
}

.stk-map-layout-india-full {
  grid-template-columns: 1fr;
}

.stk-map-layout-india-full .stk-map-side-below {
  max-height: none;
  grid-template-columns: 1fr 1fr;
  display: grid;
  gap: 0.65rem;
}

@media (max-width: 768px) {
  .stk-map-layout-india-full .stk-map-side-below {
    grid-template-columns: 1fr;
  }
}

/* India Political Map */

.stk-india-political {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 0.85rem;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
}

.stk-india-political-xl {
  width: 100%;
}

.stk-india-loading {
  padding: 2rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.stk-india-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.35rem;
}

.stk-india-head h3 {
  margin: 0;
  font-size: 1.2rem;
  color: #1e3a5f;
  font-weight: 900;
}

.stk-india-head p {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.stk-india-play {
  padding: 0.55rem 1.15rem;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, #1e40af 0%, #1e3a8a 100%);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 0 #172554, 0 6px 14px rgba(30, 64, 175, 0.35);
  transition: transform 0.15s ease;
}

.stk-india-play:hover { transform: translateY(-2px); }

.stk-india-play.is-playing {
  background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%);
  box-shadow: 0 4px 0 #7f1d1d, 0 6px 14px rgba(220, 38, 38, 0.35);
  animation: stkIndiaPlayBlink 1s ease-in-out infinite;
}

.stk-india-hint {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
}

.stk-india-hint-blink {
  animation: stkHintBlink 2s ease-in-out infinite;
}

.stk-india-svg-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: #f0f9ff;
}

.stk-india-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  width: 918px;
  max-width: 100%;
  margin: 0 auto;
}

/* 2x base (1224px) reduced BY 25% = 918px — not scaled down to 25% */

.stk-india-stage-2x .stk-india-svg {
  width: 918px;
  max-width: 100%;
  height: auto;
  display: block;
}

.stk-india-svg {
  display: block;
  border-radius: 10px;
}

.stk-india-state {
  cursor: pointer;
  transition: opacity 0.35s ease;
  animation: stkTabPopIn 0.5s ease backwards;
}

.stk-india-state.is-dim { opacity: 0.32; }

.stk-india-state.is-focus { opacity: 1; z-index: 1; }

.stk-india-state.is-correct { opacity: 1 !important; z-index: 2; }

.stk-india-state.is-incorrect { opacity: 1 !important; z-index: 2; }

.stk-india-state.is-blink {
  animation: stkStateBlink 0.85s ease-in-out infinite, stkTabPopIn 0.5s ease backwards;
}

@keyframes stkStateBlink {
  0%, 100% {
    filter: drop-shadow(0 0 10px #f59e0b) brightness(1.2);
    stroke: #ef4444;
    stroke-width: 3.5;
  }
  50% {
    filter: drop-shadow(0 0 22px #ef4444) brightness(1.45);
    stroke: #fbbf24;
    stroke-width: 5;
  }
}

@keyframes stkIndiaPlayBlink {
  0%, 100% { box-shadow: 0 4px 0 #7f1d1d, 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50% { box-shadow: 0 4px 0 #7f1d1d, 0 0 0 8px rgba(239, 68, 68, 0.25); }
}

@keyframes stkHintBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.stk-india-water {
  font-size: 22px;
  font-style: italic;
  fill: #0369a1;
  opacity: 0.8;
  pointer-events: none;
  font-family: Georgia, serif;
}

.stk-india-water-main {
  font-size: 26px;
  font-style: normal;
  letter-spacing: 0.08em;
}

.stk-india-neighbor {
  font-size: 14px;
  fill: #94a3b8;
  font-weight: 700;
  pointer-events: none;
  animation: stkNeighborFade 3s ease-in-out infinite;
}

@keyframes stkNeighborFade {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.95; }
}

.stk-india-label-group {
  animation: stkLabelFadeIn 0.6s ease backwards;
  pointer-events: none;
}

.stk-india-label-group.is-focus {
  animation: stkLabelPop 0.5s ease;
}

@keyframes stkLabelFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes stkLabelPop {
  0% { transform: scale(0.9); opacity: 0.5; }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

.stk-india-cap-dot {
  fill: #dc2626;
  stroke: #fff;
  stroke-width: 2;
}

.stk-india-cap-dot.is-national {
  fill: #1e40af;
  stroke: #fbbf24;
  stroke-width: 2.5;
}

.stk-india-cap-dot.is-focus {
  animation: stkCapDotBlink 0.8s ease-in-out infinite;
}

@keyframes stkCapDotBlink {
  0%, 100% { r: 7; fill: #ef4444; }
  50% { r: 9; fill: #fbbf24; }
}

.stk-india-cap-pulse {
  fill: none;
  stroke: #ef4444;
  stroke-width: 3;
}

.stk-india-cap-pulse-2 {
  stroke: #fbbf24;
  stroke-width: 2;
}

.stk-india-state-name {
  font-size: 11px;
  font-weight: 800;
  fill: #1e293b;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 2px;
}

.stk-india-state-name.is-focus {
  font-size: 16px;
  fill: #0f172a;
  stroke-width: 3px;
  animation: stkTextBlink 0.9s ease-in-out infinite;
}

.stk-india-cap-name {
  font-size: 9px;
  fill: #475569;
  font-weight: 600;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 1.5px;
}

.stk-india-cap-name.is-focus {
  font-size: 13px;
  fill: #b45309;
  font-weight: 800;
  animation: stkTextBlink 0.9s ease-in-out infinite 0.15s;
}

@keyframes stkTextBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

.stk-india-legend,
.stk-india-glance {
  position: absolute;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 12px;
  padding: 0.75rem 0.85rem;
  font-size: 0.72rem;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
  z-index: 2;
}

.stk-india-panel-anim {
  animation: stkPanelFloat 4s ease-in-out infinite;
}

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

.stk-india-legend {
  top: 1rem;
  right: 1rem;
  width: 200px;
}

.stk-india-glance {
  bottom: 1rem;
  right: 1rem;
  width: 210px;
}

.stk-india-legend h4,
.stk-india-glance h4 {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  color: #1e3a5f;
  font-weight: 900;
}

.stk-india-legend ul,
.stk-india-glance ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.stk-india-legend li,
.stk-india-glance li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.25rem;
  color: #475569;
}

.stk-stat-pulse {
  animation: stkStatPulse 2s ease-in-out infinite;
}

@keyframes stkStatPulse {
  0%, 100% { color: #1e40af; }
  50% { color: #ef4444; }
}

.stk-leg-star::before { content: "\2605"; color: #dc2626; }

.stk-leg-dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #dc2626; display: inline-block; }

.stk-leg-dash::before { content: ""; width: 18px; height: 0; border-top: 2px dashed #64748b; display: inline-block; }

.stk-leg-solid::before { content: ""; width: 18px; height: 0; border-top: 2px solid #64748b; display: inline-block; }

.stk-india-compass {
  margin-top: 0.55rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  display: grid;
  place-items: center;
  font-size: 0.65rem;
  font-weight: 900;
  color: #dc2626;
}

.stk-india-info-banner {
  margin-top: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 2px solid #f59e0b;
  background: linear-gradient(135deg, #fffbeb 0%, #fff 50%, #eff6ff 100%);
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.2);
}

.stk-india-info-anim {
  animation: stkInfoSlideIn 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes stkInfoSlideIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.stk-india-info-empty {
  margin-top: 0.75rem;
  padding: 0.75rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  border: 1px dashed var(--border-color);
  border-radius: 10px;
}

.stk-india-info-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.65rem;
}

.stk-india-info-head h4 {
  margin: 0;
  font-size: 1.1rem;
  color: #0f172a;
}

.stk-india-blink-title h4 {
  animation: stkTitleBlink 1s ease-in-out infinite;
}

@keyframes stkTitleBlink {
  0%, 100% { color: #0f172a; }
  50% { color: #dc2626; }
}

.stk-india-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
}

.stk-india-info-wide {
  grid-column: 1 / -1;
}

.stk-india-info-item {
  padding: 0.5rem 0.65rem;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.stk-india-info-item em {
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin-bottom: 0.15rem;
  font-style: normal;
}

.stk-india-info-item strong {
  font-size: 0.82rem;
  color: #0f172a;
}

.stk-india-info-item p {
  margin: 0;
  font-size: 0.78rem;
  color: #475569;
  line-height: 1.45;
}

.stk-info-anim-1 { animation: stkInfoItemIn 0.4s ease 0.05s backwards; }

.stk-info-anim-2 { animation: stkInfoItemIn 0.4s ease 0.15s backwards; }

.stk-info-anim-3 { animation: stkInfoItemIn 0.4s ease 0.25s backwards; }

.stk-info-anim-4 { animation: stkInfoItemIn 0.4s ease 0.35s backwards; }

@keyframes stkInfoItemIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

.stk-india-controls {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.75rem;
  padding: 0.65rem 0.85rem;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid var(--border-color);
}

.stk-india-slider {
  flex: 1;
  accent-color: #16a34a;
  height: 8px;
}

.stk-india-counter {
  font-size: 0.85rem;
  font-weight: 800;
  color: #0f172a;
  min-width: 4rem;
  text-align: center;
}

.stk-india-counter-blink {
  animation: stkCounterBlink 1.2s ease-in-out infinite;
}

@keyframes stkCounterBlink {
  0%, 100% { color: #0f172a; }
  50% { color: #16a34a; }
}

.stk-india-step-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: 0 3px 0 #15803d;
  animation: stkStepBtnPulse 2s ease-in-out infinite;
}

@keyframes stkStepBtnPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.stk-map-layout .stk-india-political {
  border: none;
  padding: 0;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .stk-india-state.is-blink,
  .stk-india-cap-dot.is-focus,
  .stk-india-state-name.is-focus,
  .stk-india-cap-name.is-focus,
  .stk-india-blink-title h4,
  .stk-india-counter-blink,
  .stk-india-hint-blink,
  .stk-india-play.is-playing,
  .stk-india-step-btn,
  .stk-india-panel-anim,
  .stk-india-neighbor,
  .stk-stat-pulse {
    animation: none !important;
  }
}

@media (max-width: 768px) {
  .stk-india-stage,
  .stk-india-stage-2x .stk-india-svg {
    width: 100%;
  }

  .stk-india-info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .stk-hub { grid-template-columns: 1fr; }
}

/* Animated Timeline Styles */

@keyframes stkTimelineFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.stk-timeline-item {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stk-timeline-dot:hover {
  transform: scale(1.25);
  background: #fbbf24 !important;
  border-color: #6366f1 !important;
}

.stk-timeline-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.12);
  border-color: #cbd5e1;
}

.stk-timeline-item.is-active .stk-timeline-card {
  animation: stkTimelinePulse 2s infinite ease-in-out;
}

@keyframes stkTimelinePulse {
  0%, 100% {
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.15);
  }
  50% {
    box-shadow: 0 4px 22px rgba(99, 102, 241, 0.3);
    background: rgba(99, 102, 241, 0.12);
  }
}