/* ==========================================
   DSA ANIMATION SITE — GLOBAL DESIGN SYSTEM
   ========================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

/* ---- CSS Variables ---- */
:root {
  --bg-primary: #0b0f19;
  --bg-secondary: #131929;
  --bg-card: #1b2238;
  --bg-card-hover: #222d45;
  --border: #2a3550;
  --border-bright: #3a4f72;

  --text-primary: #eef2ff;
  --text-secondary: #94a3c4;
  --text-muted: #6577a0;

  /* Category accent colours — more vivid */
  --accent-search: #4facfe;
  --accent-sort: #ff6b6b;
  --accent-ds: #00f260;
  --accent-tree: #c77dff;
  --accent-hash: #ffd166;
  --accent-graph: #06d6a0;
  --accent-string: #f72585;

  --accent-blue: #4facfe;
  --accent-green: #00f260;
  --accent-purple: #c77dff;
  --accent-orange: #ffd166;
  --accent-red: #ff6b6b;
  --accent-cyan: #06d6a0;
  --accent-pink: #f72585;

  --canvas-bg: #080c14;
  --node-fill: #1b2238;
  --node-stroke: #4facfe;
  --node-active: #ff6b6b;
  --node-found: #00f260;
  --node-compare: #ffd166;

  /* Standardized State Colours (for Color Guides & Canvas) */
  --bg-blue: #58a6ff;
  --bg-green: #3fb950;
  --bg-orange: #ffa657;
  --bg-red: #f78166;
  --bg-purple: #d2a8ff;
  --bg-blue-dark: #1d3557;

  --font-main: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .5);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .6);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, .7);
  --shadow-glow-blue: 0 0 24px rgba(79, 172, 254, .30);
  --shadow-glow-green: 0 0 24px rgba(0, 242, 96, .25);
  --shadow-glow-purple: 0 0 24px rgba(199, 125, 255, .28);

  --transition: .2s ease;
}

/* ---- Reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
}

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

button {
  cursor: pointer;
  font-family: var(--font-main);
}

canvas,
svg {
  display: block;
}

/* ==========================================
   HEADER / NAV
   ========================================== */
.site-header {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
}

.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
}

.site-logo .logo-icon {
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.site-logo span {
  color: var(--accent-blue);
}

.header-search {
  flex: 1;
  max-width: 400px;
  position: relative;
}

.header-search input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 16px 8px 38px;
  color: var(--text-primary);
  font-size: .9rem;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.header-search input:focus {
  border-color: var(--accent-blue);
  box-shadow: var(--shadow-glow-blue);
}

.header-search .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: .9rem;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-nav a {
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  color: var(--text-secondary);
  transition: background var(--transition), color var(--transition);
}

.header-nav a:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}

/* ==========================================
   HERO SECTION
   ========================================== */
.hero {
  background: linear-gradient(160deg, #0d1117 0%, #161b22 50%, #0d1117 100%);
  padding: 80px 24px 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(88, 166, 255, .08) 0%, transparent 70%);
  pointer-events: none;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(88, 166, 255, .1);
  border: 1px solid rgba(88, 166, 255, .25);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: .8rem;
  color: var(--accent-blue);
  margin-bottom: 24px;
  letter-spacing: .5px;
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 16px;
  background: linear-gradient(135deg, var(--text-primary) 50%, var(--accent-blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero p {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto 36px;
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

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

.stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent-blue);
  line-height: 1;
}

.stat-label {
  font-size: .8rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ==========================================
   MAIN CONTENT
   ========================================== */
.main-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}

/* ---- Section Headers ---- */
.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.section-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.section-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.section-subtitle {
  font-size: .8rem;
  color: var(--text-muted);
}

.section-divider {
  margin-bottom: 48px;
}

/* ---- Algorithm Cards Grid ---- */
.algo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.algo-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.algo-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--card-accent, var(--accent-blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}

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

.algo-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-bright);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.card-icon {
  font-size: 1.6rem;
  line-height: 1;
}

.card-title {
  font-size: .95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.card-desc {
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.5;
  flex: 1;
}

.card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.card-complexity {
  font-size: .72rem;
  font-family: var(--font-mono);
  color: var(--card-accent, var(--accent-blue));
  background: rgba(88, 166, 255, .08);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(88, 166, 255, .15);
}

.card-arrow {
  color: var(--text-muted);
  font-size: .8rem;
  transition: transform var(--transition), color var(--transition);
}

.algo-card:hover .card-arrow {
  transform: translateX(3px);
  color: var(--card-accent, var(--accent-blue));
}

/* ---- Category colour overrides ---- */
.cat-search {
  --card-accent: var(--accent-search);
}

.cat-sort {
  --card-accent: var(--accent-sort);
}

.cat-ds {
  --card-accent: var(--accent-ds);
}

.cat-tree {
  --card-accent: var(--accent-tree);
}

.cat-hash {
  --card-accent: var(--accent-hash);
}

.cat-graph {
  --card-accent: var(--accent-graph);
}

.cat-string {
  --card-accent: var(--accent-string);
}

.cat-search .card-complexity {
  background: rgba(88, 166, 255, .08);
  border-color: rgba(88, 166, 255, .2);
  color: var(--accent-search);
}

.cat-sort .card-complexity {
  background: rgba(247, 129, 102, .08);
  border-color: rgba(247, 129, 102, .2);
  color: var(--accent-sort);
}

.cat-ds .card-complexity {
  background: rgba(63, 185, 80, .08);
  border-color: rgba(63, 185, 80, .2);
  color: var(--accent-ds);
}

.cat-tree .card-complexity {
  background: rgba(210, 168, 255, .08);
  border-color: rgba(210, 168, 255, .2);
  color: var(--accent-tree);
}

.cat-hash .card-complexity {
  background: rgba(255, 166, 87, .08);
  border-color: rgba(255, 166, 87, .2);
  color: var(--accent-hash);
}

.cat-graph .card-complexity {
  background: rgba(57, 211, 83, .08);
  border-color: rgba(57, 211, 83, .2);
  color: var(--accent-graph);
}

.cat-string .card-complexity {
  background: rgba(255, 123, 114, .08);
  border-color: rgba(255, 123, 114, .2);
  color: var(--accent-string);
}

/* Section icon BG colours */
.icon-search {
  background: rgba(88, 166, 255, .15);
  color: var(--accent-search);
}

.icon-sort {
  background: rgba(247, 129, 102, .15);
  color: var(--accent-sort);
}

.icon-ds {
  background: rgba(63, 185, 80, .15);
  color: var(--accent-ds);
}

.icon-tree {
  background: rgba(210, 168, 255, .15);
  color: var(--accent-tree);
}

.icon-hash {
  background: rgba(255, 166, 87, .15);
  color: var(--accent-hash);
}

.icon-graph {
  background: rgba(57, 211, 83, .15);
  color: var(--accent-graph);
}

.icon-string {
  background: rgba(255, 123, 114, .15);
  color: var(--accent-string);
}

/* ==========================================
   LEARNING PATH SECTION
   ========================================== */
.lp-section {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 48px 24px;
}

.lp-inner {
  max-width: 820px;
  margin: 0 auto;
}

.lp-header {
  text-align: center;
  margin-bottom: 36px;
}

.lp-eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent-blue);
  background: rgba(88, 166, 255, .1);
  border: 1px solid rgba(88, 166, 255, .2);
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: 12px;
}

.lp-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.4px;
  margin: 0 0 8px;
}

.lp-sub {
  font-size: .88rem;
  color: var(--text-muted);
}

.lp-stages {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lp-stage {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  transition: border-color .2s;
}

.lp-stage:hover {
  border-color: rgba(88, 166, 255, .25);
}

.lp-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent-blue), #6e40c9);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(88, 166, 255, .2);
}

.lp-body {
  flex: 1;
}

.lp-stage-name {
  font-size: .9rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.lp-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.lp-chip {
  font-size: .78rem;
  font-weight: 600;
  background: rgba(88, 166, 255, .08);
  color: #58a6ff;
  border: 1px solid rgba(88, 166, 255, .2);
  border-radius: 6px;
  padding: 3px 10px;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}

.lp-chip:hover {
  background: rgba(88, 166, 255, .18);
  border-color: rgba(88, 166, 255, .5);
}

.lp-arrow {
  color: var(--text-muted);
  font-size: .8rem;
}

.lp-note {
  font-size: .76rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ==========================================
   FOOTER
   ========================================== */
.site-footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  padding: 32px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: .85rem;
}

.site-footer a {
  color: var(--accent-blue);
}

.site-footer a:hover {
  text-decoration: underline;
}

/* ==========================================
   CANVAS OVERLAYS
   Colour Guide → top-left  |  Complexity → top-right
   ========================================== */

.canvas-wrapper {
  position: relative;
}

/* Shared base */
.canvas-overlay {
  position: absolute;
  top: 10px;
  z-index: 10;
  background: rgba(13, 17, 23, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow: hidden;
  animation: fadeInOverlay .3s ease;
}

/* Colour Guide — top-left */
.overlay-left {
  left: 10px;
  right: auto;
  max-width: 55%;
}

/* Complexity — top-right */
.overlay-right {
  right: 10px;
  left: auto;
  min-width: 150px;
}

@keyframes fadeInOverlay {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

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

/* Sections inside overlays */
.canvas-overlay .panel-section {
  padding: 7px 11px;
  border: none;
  font-size: .78rem;
}

.canvas-overlay .panel-section h3 {
  font-size: .60rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(139, 148, 158, .65);
  margin-bottom: 5px;
}

/* Colour legend: vertical column */
.canvas-overlay .color-legend {
  flex-direction: column;
  gap: 5px;
}

.canvas-overlay .cl-row {
  font-size: .75rem;
}

/* Complexity table */
.canvas-overlay .complexity-table {
  font-size: .76rem;
}

.canvas-overlay .complexity-table td {
  padding: 2px 8px;
}

.canvas-overlay .complexity-table tr td:first-child {
  color: rgba(139, 148, 158, .8);
}

/* Mobile */
@media (max-width: 680px) {
  .overlay-left {
    max-width: 90%;
  }

  .overlay-right {
    min-width: 110px;
  }
}

/* ==========================================
   ANIMATION PAGE LAYOUT
   ========================================== */
.anim-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.anim-topbar {
  background: linear-gradient(90deg, #0d1a35 0%, #131929 60%, #0d1a35 100%);
  border-bottom: 1px solid rgba(79, 172, 254, 0.20);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 20px rgba(79, 172, 254, 0.08);
}

.back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: .875rem;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: background var(--transition), color var(--transition);
}

.back-btn:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

.anim-title-bar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.anim-title-bar h1 {
  font-size: 1.1rem;
  font-weight: 600;
}

.complexity-badge {
  font-size: .75rem;
  font-family: var(--font-mono);
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid;
}

/* Voice Toggle */
.voice-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  background: rgba(79, 172, 254, 0.08);
  border: 1px solid rgba(79, 172, 254, 0.22);
  color: #94a3c4;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.voice-toggle:hover {
  background: rgba(79, 172, 254, 0.15);
  border-color: rgba(79, 172, 254, 0.35);
  color: #eef2ff;
}

.voice-toggle.active {
  background: rgba(0, 242, 96, 0.1);
  border-color: rgba(0, 242, 96, 0.4);
  color: #00f260;
  box-shadow: 0 0 15px rgba(0, 242, 96, 0.12);
}

.voice-toggle.active:hover {
  background: rgba(0, 242, 96, 0.18);
  border-color: rgba(0, 242, 96, 0.6);
}

.voice-toggle span {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ---- Animation Body Layout ---- */
.anim-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 0;
  overflow: hidden;
  min-height: 0;
}

.canvas-area {
  display: flex;
  flex-direction: column;
  background: var(--canvas-bg);
  border-right: 1px solid var(--border);
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.canvas-wrapper {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.canvas-wrapper canvas,
.canvas-wrapper svg {
  border-radius: var(--radius-md);
}

/* ---- Controls ---- */
.controls-bar {
  background: #0e1525;
  border-top: 1px solid rgba(79, 172, 254, 0.15);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-size: .82rem;
  font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition), transform .1s ease;
}

.btn:active {
  transform: scale(.97);
}

.btn-primary {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  color: #050a18;
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 0 14px rgba(79, 172, 254, 0.35);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #79c6ff, #4facfe);
  box-shadow: 0 0 22px rgba(79, 172, 254, 0.55);
}

.btn-secondary {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border);
}

.btn-secondary:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-blue);
  color: var(--accent-blue);
}

.btn-danger {
  background: rgba(255, 107, 107, .12);
  color: #ff6b6b;
  border-color: rgba(255, 107, 107, .35);
  font-weight: 600;
}

.btn-danger:hover {
  background: rgba(255, 107, 107, .25);
  box-shadow: 0 0 12px rgba(255, 107, 107, .3);
}

.btn-success {
  background: linear-gradient(135deg, #00c853, #00f260);
  color: #020d08;
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 0 14px rgba(0, 242, 96, 0.30);
}

.btn-success:hover {
  background: linear-gradient(135deg, #00f260, #69ff97);
  box-shadow: 0 0 22px rgba(0, 242, 96, 0.50);
}

.btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none !important;
}

/* Speed Slider */
.speed-control {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.speed-control label {
  font-size: .8rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.speed-control input[type="range"] {
  width: 100px;
  accent-color: var(--accent-blue);
}

/* ---- Sidebar Panel ---- */
.side-panel {
  display: flex;
  flex-direction: column;
  background: #0d1424;
  border-left: 1px solid rgba(79, 172, 254, 0.15);
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  font-size: .88rem;
  width: 320px;
  flex-shrink: 0;
}

/* Color Guide System */
.color-guide {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255, 255, 255, 0.03);
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.guide-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
}

/* Language Toggle */
.lang-toggle {
  display: flex;
  flex-wrap: nowrap;
  background: rgba(255, 255, 255, 0.05);
  padding: 3px;
  border-radius: 6px;
  gap: 2px;
  margin-top: 10px;
}

.lang-btn {
  flex: 1;
  padding: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 4px;
  transition: all 0.2s;
}

.lang-btn.active {
  background: var(--bg-card-hover);
  color: var(--accent-blue);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Quiz Modal */
.quiz-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.quiz-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 30px;
  border-radius: 16px;
  max-width: 450px;
  width: 90%;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.quiz-content h3 {
  margin-bottom: 15px;
  color: var(--accent-blue);
}

.quiz-content p {
  margin-bottom: 25px;
  font-size: 1.1rem;
  line-height: 1.5;
}

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

.quiz-opt {
  padding: 12px;
  font-size: 0.95rem;
  transition: all 0.2s;
}


.panel-section {
  padding: 12px 15px;
  border-bottom: 1px solid rgba(42, 53, 80, 0.7);
  min-width: 0;
  overflow-x: hidden;
  word-break: break-word;
  overflow-wrap: break-word;
  position: relative;
}

/* Rainbow left-border per panel section: cycle through 4 colors */
.panel-section:nth-child(1) {
  border-left: 3px solid #4facfe;
}

.panel-section:nth-child(2) {
  border-left: 3px solid #00f260;
}

.panel-section:nth-child(3) {
  border-left: 3px solid #c77dff;
}

.panel-section:nth-child(4) {
  border-left: 3px solid #ffd166;
}

.panel-section:nth-child(5) {
  border-left: 3px solid #06d6a0;
}

.panel-section:nth-child(6) {
  border-left: 3px solid #f72585;
}

.panel-section:nth-child(n+7) {
  border-left: 3px solid #4facfe;
}

.panel-section h3 {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  margin-bottom: 10px;
  /* Gradient text for panel headings */
  background: linear-gradient(90deg, #4facfe 0%, #c77dff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Input area */
.input-group {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.input-field {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  color: var(--text-primary);
  font-size: .82rem;
  font-family: var(--font-mono);
  outline: none;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color var(--transition);
}

.input-field:focus {
  border-color: var(--accent-blue);
}

.input-hint {
  font-size: .75rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Step Log */
.step-log {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 220px;
  overflow-y: auto;
}

.log-entry {
  padding: 7px 10px;
  background: rgba(27, 34, 56, 0.8);
  border-radius: var(--radius-sm);
  font-size: .82rem;
  border-left: 3px solid var(--border);
  line-height: 1.45;
  word-break: break-word;
  overflow-wrap: break-word;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.log-entry.active {
  border-left-color: var(--accent-blue);
  color: var(--accent-blue);
}

.log-entry.found {
  border-left-color: var(--accent-green);
  color: var(--accent-green);
}

.log-entry.miss {
  border-left-color: var(--accent-red);
  color: var(--accent-red);
}

.log-entry.info {
  border-left-color: var(--accent-orange);
}

/* ---- Pseudocode ---- */
.pseudocode {
  font-family: var(--font-mono);
  font-size: .8rem;
  line-height: 1.9;
  color: #94a3c4;
  background: rgba(4, 8, 20, 0.6);
  border: 1px solid rgba(79, 172, 254, 0.12);
  border-radius: var(--radius-sm);
  padding: 6px 0;
  overflow-x: auto;
}

.pc-line {
  padding: 0 10px;
  border-left: 2px solid transparent;
  white-space: pre;
  transition: background .15s, color .15s, border-color .15s;
  display: block;
}

.pc-line.active {
  background: rgba(79, 172, 254, 0.14);
  color: #4facfe;
  font-weight: 600;
  border-left-color: #4facfe;
}

.pc-line.done {
  color: #00f260;
  background: rgba(0, 242, 96, .06);
}

.pc-line.miss {
  color: #ff6b6b;
  background: rgba(247, 129, 102, .07);
}

/* ---- Color Legend ---- */
.color-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  color: var(--text-secondary);
}

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

/* ---- Key Insight Banner ---- */
.key-insight {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: linear-gradient(135deg, rgba(79, 172, 254, .08) 0%, rgba(199, 125, 255, .06) 100%);
  border: 1px solid rgba(79, 172, 254, .22);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: .78rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.ki-icon {
  flex-shrink: 0;
  font-size: .9rem;
}

.ki-text b {
  background: linear-gradient(90deg, #4facfe, #c77dff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Complexity Info */
.complexity-table {
  width: 100%;
  font-size: .8rem;
  border-collapse: collapse;
}

.complexity-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
}

.complexity-table td:first-child {
  color: var(--text-muted);
}

.complexity-table td:last-child {
  font-family: var(--font-mono);
  color: var(--accent-purple);
  text-align: right;
}

/* ==========================================
   CANVAS ELEMENT COLOURS (used via JS)
   ========================================== */
/*  Colours exposed as CSS variables for JS canvas reads */
.theme-vars {
  --c-default: #21262d;
  --c-stroke: #58a6ff;
  --c-active: #ffa657;
  --c-found: #3fb950;
  --c-miss: #f78166;
  --c-compare: #d2a8ff;
  --c-sorted: #39d353;
  --c-text: #e6edf3;
  --c-bg: #0d1117;
}

/* ==========================================
   RESPONSIVE
   ========================================== */
/* (old 820px breakpoint removed — conflicts with 680px mobile layout) */

@media (max-width: 540px) {
  .controls-bar {
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 6px;
  }

  .btn {
    padding: 7px 10px;
    font-size: .78rem;
  }

  .anim-topbar {
    padding: 10px 12px;
  }

  .back-btn {
    padding: 5px 10px;
    font-size: .8rem;
  }

  .anim-title-bar h1 {
    font-size: .95rem;
  }
}

/* ==========================================
   SCROLLBAR
   ========================================== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--border-bright);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ==========================================
   UTILITY CLASSES
   ========================================== */
.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.gap-2 {
  gap: 8px;
}

.text-muted {
  color: var(--text-muted);
}

.font-mono {
  font-family: var(--font-mono);
}

.hidden {
  display: none !important;
}

/* ==========================================
   RESPONSIVE — ANIMATION PAGES
   ========================================== */

/* ==========================================
   RESPONSIVE — ANIMATION PAGES (mobile-first fix)
   ========================================== */

/* --- Tablet / Mobile (≤ 768px) --- */
@media (max-width: 768px) {

  /* Allow page to scroll naturally */
  .anim-page {
    height: auto;
    min-height: 100vh;
    overflow: auto;
  }

  /* Stack: canvas on top → controls → sidebar */
  .anim-body {
    display: flex;
    flex-direction: column;
    overflow: visible;
    min-height: 0;
  }

  /* Canvas: Ensure it doesn't clip content by forcing a minimum internal width */
  .canvas-area {
    border-right: none;
    border-bottom: 1px solid rgba(79, 172, 254, .15);
    height: 55vw;
    min-height: 240px;
    max-height: 420px;
    flex-shrink: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    background: #080c14;
  }

  .canvas-wrapper {
    min-width: 640px;
    /* Essential: prevents negative startX in JS drawing */
    height: 100%;
    display: flex;
    justify-content: center;
    background: #080c14;
  }

  canvas {
    display: block;
    max-width: none;
  }

  /* Hide canvas overlays on mobile — info is in sidebar */
  .canvas-overlay {
    display: none !important;
  }

  /* Controls: allow horizontal scroll, no wrap to keep height small */
  .controls-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 10px 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    box-sizing: border-box;
  }

  .controls-bar::-webkit-scrollbar {
    display: none;
  }

  .controls-group {
    flex-wrap: nowrap;
    gap: 8px;
    flex-shrink: 0;
  }

  .speed-control {
    flex-shrink: 0;
    min-width: 130px;
    margin-left: 0;
    display: flex;
    align-items: center;
  }

  .speed-control input[type="range"] {
    width: 70px;
    flex-shrink: 0;
  }

  /* Buttons: compact */
  .btn {
    padding: 7px 12px;
    font-size: .8rem;
    white-space: nowrap;
  }

  /* Sidebar: full-width below canvas, normal vertical scroll */
  .side-panel {
    width: 100%;
    border-left: none;
    border-top: 2px solid rgba(79, 172, 254, .2);
    overflow: visible;
    /* Natural page scroll */
    max-height: none;
    flex-direction: column;
  }

  /* Panel sections: full width */
  .side-panel .panel-section {
    min-width: unset;
    border-right: none;
    border-bottom: 1px solid rgba(42, 53, 80, .6);
    padding: 10px 14px;
  }

  /* Step log: limit height so other sections stay reachable */
  .step-log {
    max-height: 160px;
  }

  /* Pseudocode: horizontal scroll */
  .pseudocode {
    overflow-x: auto;
  }

  .pc-line {
    white-space: pre;
  }

  /* Topbar: Sticky on mobile for back button access */
  .anim-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
    background: rgba(13, 26, 53, 0.9);
    padding: 8px 14px;
    gap: 10px;
  }

  .anim-title-bar h1 {
    font-size: .95rem;
  }

  .back-btn {
    font-size: .8rem;
    padding: 5px 10px;
  }
}

/* --- Small phones (≤ 420px) --- */
@media (max-width: 420px) {
  .canvas-area {
    height: 62vw;
    min-height: 200px;
  }

  .btn {
    padding: 6px 10px;
    font-size: .76rem;
  }

  .controls-bar {
    padding: 8px 12px;
    gap: 8px;
  }

  .anim-topbar {
    padding: 8px 12px;
  }

  .logo-glyph {
    width: 28px;
    height: 28px;
    font-size: .8rem;
  }

  .anim-title-bar h1 {
    font-size: .85rem;
  }

  .complexity-badge {
    display: none;
  }

  .side-panel {
    max-height: none;
  }
}

/* slim topbar */