/* ============================================================
   KODLAMA MODÜL — Educational Coding Platform
   Master Stylesheet — Design System + All Components
   ============================================================ */

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

/* ---- 2. DESIGN TOKENS (CSS Custom Properties) ---- */
:root {
  /* Brand Colors */
  --primary:        #6366F1;
  --primary-dark:   #4F46E5;
  --primary-light:  #818CF8;
  --primary-bg:     #EEF2FF;
  --secondary:      #8B5CF6;
  --accent:         #06B6D4;
  --accent-dark:    #0891B2;
  --accent-bg:      #ECFEFF;

  /* Status Colors */
  --success:        #10B981;
  --success-bg:     #ECFDF5;
  --success-dark:   #059669;
  --warning:        #F59E0B;
  --warning-bg:     #FFFBEB;
  --warning-dark:   #D97706;
  --error:          #EF4444;
  --error-bg:       #FEF2F2;
  --error-dark:     #DC2626;

  /* Level Theme Colors */
  --level1:         #6366F1;
  --level1-light:   #EEF2FF;
  --level1-grad:    linear-gradient(135deg, #6366F1, #818CF8);
  --level2:         #10B981;
  --level2-light:   #ECFDF5;
  --level2-grad:    linear-gradient(135deg, #10B981, #34D399);
  --level3:         #F59E0B;
  --level3-light:   #FFFBEB;
  --level3-grad:    linear-gradient(135deg, #F59E0B, #FBBF24);
  --level4:         #EF4444;
  --level4-light:   #FEF2F2;
  --level4-grad:    linear-gradient(135deg, #EF4444, #F87171);
  --level5:         #8B5CF6;
  --level5-light:   #F5F3FF;
  --level5-grad:    linear-gradient(135deg, #8B5CF6, #A78BFA);
  --level6:         #0EA5E9;
  --level6-light:   #F0F9FF;
  --level6-grad:    linear-gradient(135deg, #0EA5E9, #38BDF8);
  --level7:         #2563EB;
  --level7-light:   #EFF6FF;
  --level7-grad:    linear-gradient(135deg, #2563EB, #60A5FA);
  --level8:         #7C3AED;
  --level8-light:   #F5F3FF;
  --level8-grad:    linear-gradient(135deg, #7C3AED, #A78BFA);
  --level9:         #DB2777;
  --level9-light:   #FDF2F8;
  --level9-grad:    linear-gradient(135deg, #DB2777, #F472B6);
  --level10:        #111827;
  --level10-light:  #F9FAFB;
  --level10-grad:   linear-gradient(135deg, #111827, #374151);

  /* Neutrals */
  --white:          #FFFFFF;
  --gray-50:        #F8FAFC;
  --gray-100:       #F1F5F9;
  --gray-200:       #E2E8F0;
  --gray-300:       #CBD5E1;
  --gray-400:       #94A3B8;
  --gray-500:       #64748B;
  --gray-600:       #475569;
  --gray-700:       #334155;
  --gray-800:       #1E293B;
  --gray-900:       #0F172A;

  /* Typography */
  --font-sans:      'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:      'Fira Code', 'JetBrains Mono', 'Courier New', monospace;
  --text-xs:        0.75rem;
  --text-sm:        0.875rem;
  --text-base:      1rem;
  --text-lg:        1.125rem;
  --text-xl:        1.25rem;
  --text-2xl:       1.5rem;
  --text-3xl:       1.875rem;
  --text-4xl:       2.25rem;
  --text-5xl:       3rem;

  /* Spacing */
  --sp-1:  0.25rem;  --sp-2:  0.5rem;   --sp-3:  0.75rem;
  --sp-4:  1rem;     --sp-5:  1.25rem;  --sp-6:  1.5rem;
  --sp-8:  2rem;     --sp-10: 2.5rem;   --sp-12: 3rem;
  --sp-16: 4rem;     --sp-20: 5rem;     --sp-24: 6rem;

  /* Border Radius */
  --r-sm:   0.375rem;  --r:    0.5rem;
  --r-lg:   0.75rem;   --r-xl: 1rem;
  --r-2xl:  1.5rem;    --r-3xl: 2rem;
  --r-full: 9999px;

  /* Shadows */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow:     0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-md:  0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-lg:  0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);
  --shadow-xl:  0 25px 50px rgba(0,0,0,0.15);
  --glow-primary: 0 0 20px rgba(99,102,241,0.35);
  --glow-success: 0 0 20px rgba(16,185,129,0.35);

  /* Transitions */
  --t-fast:   150ms ease;
  --t:        250ms ease;
  --t-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --nav-h:    4rem;
  --sidebar-w: 280px;
  --max-w:    1280px;
  --content-w: 860px;
}

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

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--gray-900);
  background: var(--gray-50);
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--primary); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--primary-dark); }

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

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--gray-900);
}

p { color: var(--gray-600); }

code, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* ---- 4. UTILITIES ---- */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--sp-6); }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }
.gap-8 { gap: var(--sp-8); }
.grid { display: grid; }
.text-center { text-align: center; }
.text-sm { font-size: var(--text-sm); }
.text-lg { font-size: var(--text-lg); }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ---- 5. NAVIGATION ---- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gray-200);
  box-shadow: var(--shadow-xs);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-weight: 800;
  font-size: var(--text-xl);
  color: var(--gray-900);
  text-decoration: none;
}

.nav-logo .logo-icon {
  width: 36px; height: 36px;
  background: var(--level1-grad);
  border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  box-shadow: var(--glow-primary);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  list-style: none;
}

.nav-links a {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
  font-weight: 500;
  font-size: var(--text-sm);
  color: var(--gray-600);
  transition: all var(--t-fast);
}

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

.nav-right {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.xp-badge {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--warning-bg);
  border: 1px solid #FDE68A;
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--warning-dark);
}

.streak-badge {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--error);
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--gray-100);
  border-radius: var(--r-full);
  padding: 2px;
}

.lang-btn {
  padding: 4px 10px;
  border: none;
  border-radius: var(--r-full);
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  background: transparent;
  color: var(--gray-500);
  transition: all var(--t-fast);
  letter-spacing: 0.04em;
}

.lang-btn:hover { color: var(--gray-800); }

.lang-btn.active {
  background: white;
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

/* ---- 6. BUTTONS ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--t-fast);
  white-space: nowrap;
  text-decoration: none;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--primary);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover:not(:disabled) {
  background: var(--primary-dark);
  color: var(--white);
  box-shadow: var(--glow-primary);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--white);
  color: var(--primary);
  border-color: var(--primary);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--primary-bg);
}

.btn-success {
  background: var(--success);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn-success:hover:not(:disabled) {
  background: var(--success-dark);
  color: var(--white);
  box-shadow: var(--glow-success);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--gray-600);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--gray-100);
  color: var(--gray-900);
}

.btn-lg {
  padding: var(--sp-4) var(--sp-8);
  font-size: var(--text-base);
  border-radius: var(--r-full);
}

.btn-sm {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--text-xs);
}

.btn-icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: var(--r-full);
}

/* ---- 7. CARDS ---- */
.card {
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  overflow: hidden;
  transition: all var(--t);
}

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

.card-header {
  padding: var(--sp-6);
  border-bottom: 1px solid var(--gray-100);
}

.card-body { padding: var(--sp-6); }

.card-footer {
  padding: var(--sp-4) var(--sp-6);
  background: var(--gray-50);
  border-top: 1px solid var(--gray-100);
}

/* ---- 8. PROGRESS COMPONENTS ---- */
.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--gray-200);
  border-radius: var(--r-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--level1-grad);
  border-radius: var(--r-full);
  transition: width var(--t-slow);
  position: relative;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 20px; height: 100%;
  background: rgba(255,255,255,0.4);
  border-radius: var(--r-full);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; }
}

.progress-lg { height: 12px; }
.progress-xl { height: 16px; }

/* XP Bar */
.xp-bar-container {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.xp-level-circle {
  width: 44px; height: 44px;
  min-width: 44px;
  border-radius: var(--r-full);
  background: var(--level1-grad);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: var(--text-sm);
  color: white;
  box-shadow: var(--glow-primary);
}

.xp-bar { flex: 1; }
.xp-label {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--gray-500);
  margin-bottom: var(--sp-1);
  font-weight: 600;
}

/* ---- 9. BADGES ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 600;
}

.badge-primary   { background: var(--primary-bg);  color: var(--primary); }
.badge-success   { background: var(--success-bg);  color: var(--success-dark); }
.badge-warning   { background: var(--warning-bg);  color: var(--warning-dark); }
.badge-error     { background: var(--error-bg);    color: var(--error-dark); }
.badge-gray      { background: var(--gray-100);    color: var(--gray-600); }

/* ---- 10. HERO SECTION ---- */
.hero {
  position: relative;
  background: linear-gradient(135deg, #0F172A 0%, #1E1B4B 50%, #0F172A 100%);
  padding: var(--sp-20) 0;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(99,102,241,0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(139,92,246,0.15) 0%, transparent 50%),
    radial-gradient(circle at 60% 80%, rgba(6,182,212,0.1) 0%, transparent 40%);
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(99,102,241,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.05) 1px, transparent 1px);
  background-size: 50px 50px;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}

.hero-text h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  color: white;
  line-height: 1.1;
  margin-bottom: var(--sp-6);
}

.hero-text h1 .highlight {
  background: linear-gradient(90deg, #818CF8, #06B6D4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-text p {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.7);
  margin-bottom: var(--sp-8);
  line-height: 1.7;
}

.hero-cta {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.hero-visual {
  position: relative;
}

.code-window {
  background: #1E293B;
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl), var(--glow-primary);
  border: 1px solid rgba(99,102,241,0.3);
}

.code-titlebar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: #0F172A;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.code-dot {
  width: 12px; height: 12px;
  border-radius: var(--r-full);
}

.code-dot.red    { background: #EF4444; }
.code-dot.yellow { background: #F59E0B; }
.code-dot.green  { background: #10B981; }

.code-filename {
  margin-left: var(--sp-2);
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.4);
  font-family: var(--font-mono);
}

.code-body {
  padding: var(--sp-6);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.8;
  color: #94A3B8;
}

.code-body .kw   { color: #818CF8; }
.code-body .fn   { color: #34D399; }
.code-body .str  { color: #FCA5A5; }
.code-body .num  { color: #FCD34D; }
.code-body .cmt  { color: #475569; font-style: italic; }
.code-body .var  { color: #67E8F9; }
.code-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--primary-light);
  animation: blink 1s infinite;
  vertical-align: text-bottom;
}

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ---- 11. STATS CARDS ---- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
}

.stat-card {
  background: white;
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
}

.stat-icon {
  width: 52px; height: 52px;
  border-radius: var(--r-xl);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.stat-info h3 {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--gray-900);
}

.stat-info p {
  font-size: var(--text-sm);
  color: var(--gray-500);
  font-weight: 500;
}

/* ---- 12. LEVEL CARDS ---- */
.levels-section { padding: var(--sp-16) 0; }

.section-header {
  text-align: center;
  margin-bottom: var(--sp-12);
}

.section-header .label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--primary-bg);
  color: var(--primary);
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--sp-4);
}

.section-header h2 {
  font-size: var(--text-4xl);
  font-weight: 800;
  margin-bottom: var(--sp-4);
}

.section-header p {
  font-size: var(--text-lg);
  color: var(--gray-500);
  max-width: 600px;
  margin: 0 auto;
}

.levels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-6);
}

.level-card {
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: all var(--t);
  cursor: pointer;
  position: relative;
  border: 2px solid transparent;
}

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

.level-card.locked { opacity: 0.6; cursor: not-allowed; }
.level-card.locked:hover { transform: none; box-shadow: var(--shadow); }

.level-card-header {
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  position: relative;
}

.level-card.level-1 .level-card-header { background: var(--level1-grad); }
.level-card.level-2 .level-card-header { background: var(--level2-grad); }
.level-card.level-3 .level-card-header { background: var(--level3-grad); }
.level-card.level-4 .level-card-header { background: var(--level4-grad); }
.level-card.level-5 .level-card-header { background: var(--level5-grad); }
.level-card.level-6 .level-card-header { background: var(--level6-grad); }
.level-card.level-7 .level-card-header { background: var(--level7-grad); }
.level-card.level-8 .level-card-header { background: var(--level8-grad); }
.level-card.level-9 .level-card-header { background: var(--level9-grad); }
.level-card.level-10 .level-card-header { background: var(--level10-grad); }

.level-number {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.7);
  margin-bottom: var(--sp-2);
}

.level-card-header h3 {
  font-size: var(--text-2xl);
  color: white;
  margin-bottom: var(--sp-1);
}

.level-card-header p {
  color: rgba(255,255,255,0.8);
  font-size: var(--text-sm);
}

.level-icon {
  position: absolute;
  top: var(--sp-6);
  right: var(--sp-6);
  font-size: 3rem;
  opacity: 0.3;
}

.level-card-body {
  background: white;
  padding: var(--sp-6);
}

.level-stats {
  display: flex;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
  font-size: var(--text-sm);
  color: var(--gray-500);
}

.level-stats span {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.lock-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
}

.lock-overlay .lock-icon {
  font-size: 2rem;
  background: rgba(0,0,0,0.5);
  padding: var(--sp-3);
  border-radius: var(--r-full);
}

/* ---- 13. MODULE MAP ---- */
.module-map {
  padding: var(--sp-8) 0;
}

.map-level-section {
  margin-bottom: var(--sp-16);
  position: relative;
}

.map-level-header {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--section-surface, white) 72%, white);
  border: 2px solid color-mix(in srgb, var(--section-accent, var(--gray-200)) 14%, var(--gray-200));
  box-shadow: 0 14px 36px color-mix(in srgb, var(--section-accent, var(--gray-300)) 10%, transparent);
}

.map-level-icon {
  width: 56px; height: 56px;
  border-radius: var(--r-xl);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem;
  flex-shrink: 0;
}

.level-section-1 .map-level-icon { background: var(--level1-grad); }
.level-section-2 .map-level-icon { background: var(--level2-grad); }
.level-section-3 .map-level-icon { background: var(--level3-grad); }
.level-section-4 .map-level-icon { background: var(--level4-grad); }

.map-level-info h2 { font-size: var(--text-2xl); }
.map-level-info p { font-size: var(--text-sm); color: var(--gray-600); }

.map-level-badge-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}

.map-level-badge-secondary {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--section-surface, var(--gray-100)) 74%, white);
  color: color-mix(in srgb, var(--section-accent, var(--gray-700)) 85%, var(--gray-800));
  border: 1px solid color-mix(in srgb, var(--section-accent, var(--gray-300)) 18%, transparent);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.module-nodes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-6);
  position: relative;
}

/* Connection lines between module nodes */
.module-nodes::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 30px;
  right: 30px;
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    var(--gray-300) 0px,
    var(--gray-300) 8px,
    transparent 8px,
    transparent 16px
  );
  z-index: 0;
}

.module-node {
  position: relative;
  z-index: 1;
  background: white;
  border-radius: var(--r-2xl);
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--module-accent, var(--gray-300)) 12%, var(--gray-200));
  transition: all var(--t);
  cursor: pointer;
}

.module-node:hover:not(.locked) {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.module-node.locked {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.5);
}

.module-node.completed {
  border-color: var(--success);
}

.module-node.active {
  border-color: var(--primary);
  box-shadow: var(--glow-primary);
}

.module-node-header {
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--module-accent, var(--primary)) 88%, white 12%), color-mix(in srgb, var(--module-accent, var(--primary-light)) 72%, white 28%));
  color: white;
  position: relative;
}

.module-node-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0));
  pointer-events: none;
}

.module-icon-wrap {
  width: 48px; height: 48px;
  border-radius: var(--r-xl);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  background: rgba(255,255,255,0.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
  backdrop-filter: blur(6px);
}

.module-meta { flex: 1; }
.module-meta h3 {
  font-size: var(--text-base);
  font-weight: 700;
  margin-bottom: var(--sp-1);
  color: white;
}

.module-meta p {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.84);
  line-height: 1.4;
}

.module-status-icon {
  width: 24px; height: 24px;
  border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.module-status-icon.completed { background: var(--success); color: white; }
.module-status-icon.locked    { background: var(--gray-300); color: var(--gray-500); }
.module-status-icon.active    { background: var(--primary); color: white; }

.module-node-footer {
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
  border-top: 1px solid color-mix(in srgb, var(--module-accent, var(--gray-300)) 10%, transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: color-mix(in srgb, var(--module-surface, white) 68%, white);
}

.module-lessons-count {
  font-size: var(--text-xs);
  color: var(--gray-500);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.module-xp {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--warning-dark);
  background: var(--warning-bg);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
}

.module-progress-bar {
  height: 4px;
  background: var(--gray-200);
}

.module-progress-fill {
  height: 100%;
  transition: width var(--t-slow);
  background: var(--module-gradient, var(--level1-grad));
}

/* Stars */
.module-stars {
  display: flex;
  gap: 2px;
  font-size: 0.75rem;
}

.star { color: var(--gray-300); }
.star.earned { color: var(--warning); }

/* ---- 14. LESSON PAGE ---- */
.lesson-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: calc(100vh - var(--nav-h));
}

.lesson-sidebar {
  background: white;
  border-right: 1px solid var(--gray-200);
  padding: var(--sp-6);
  overflow-y: auto;
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
}

.lesson-sidebar-header {
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--gray-100);
}

.lesson-sidebar-header .back-link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--gray-500);
  margin-bottom: var(--sp-3);
}

.lesson-sidebar-header h3 { font-size: var(--text-base); margin-bottom: var(--sp-2); }

.sidebar-lessons { list-style: none; }

.sidebar-lesson-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: all var(--t-fast);
  margin-bottom: var(--sp-1);
}

.sidebar-lesson-item:hover { background: var(--gray-50); }
.sidebar-lesson-item.active { background: var(--primary-bg); color: var(--primary); }
.sidebar-lesson-item.completed { color: var(--success-dark); }

.sidebar-lesson-dot {
  width: 24px; height: 24px;
  min-width: 24px;
  border-radius: var(--r-full);
  border: 2px solid var(--gray-300);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
}

.sidebar-lesson-item.completed .sidebar-lesson-dot {
  background: var(--success);
  border-color: var(--success);
  color: white;
}

.sidebar-lesson-item.active .sidebar-lesson-dot {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.sidebar-lesson-title {
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.3;
}

.sidebar-lesson-duration {
  margin-left: auto;
  font-size: var(--text-xs);
  color: var(--gray-400);
}

/* Lesson Main Content */
.lesson-main {
  overflow-y: auto;
  padding: var(--sp-8) var(--sp-10);
  max-width: 780px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--lesson-surface, transparent) 88%, white) 0%, transparent 52%),
    linear-gradient(180deg, color-mix(in srgb, var(--lesson-surface, transparent) 42%, white) 0%, transparent 28%);
  border-radius: var(--r-3xl);
}

.lesson-header {
  margin-bottom: var(--sp-10);
  padding: var(--sp-7);
  border-radius: var(--r-3xl);
  background: color-mix(in srgb, var(--lesson-surface, var(--primary-bg)) 68%, white);
  border: 1px solid color-mix(in srgb, var(--lesson-accent, var(--primary)) 12%, transparent);
  box-shadow: 0 18px 38px color-mix(in srgb, var(--lesson-accent, var(--primary)) 10%, transparent);
}

.lesson-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--gray-500);
  margin-bottom: var(--sp-4);
}

.lesson-header h1 { font-size: var(--text-4xl); margin-bottom: var(--sp-3); }
.lesson-header .lesson-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.lesson-header .badge-primary {
  background: color-mix(in srgb, var(--lesson-accent, var(--primary)) 18%, white);
  color: var(--lesson-accent, var(--primary-dark));
  border-color: color-mix(in srgb, var(--lesson-accent, var(--primary)) 22%, transparent);
}

.lesson-flow-note {
  margin-top: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-2xl);
  background: color-mix(in srgb, var(--lesson-surface, var(--primary-bg)) 82%, white);
  border: 1px solid color-mix(in srgb, var(--lesson-accent, var(--primary)) 16%, transparent);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  color: var(--gray-700);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.lesson-flow-note strong {
  color: var(--lesson-accent, var(--primary-dark));
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Lesson Sections */
.lesson-section {
  margin-bottom: var(--sp-12);
  scroll-margin-top: calc(var(--nav-h) + var(--sp-4));
  position: relative;
  padding: var(--sp-2) 0 0;
}

.lesson-section.section-current {
  background: linear-gradient(180deg, rgba(99,102,241,0.06), rgba(99,102,241,0));
  border-radius: var(--r-2xl);
  padding: var(--sp-5);
}

.lesson-section.section-completed {
  background: linear-gradient(180deg, rgba(16,185,129,0.08), rgba(16,185,129,0));
  border-radius: var(--r-2xl);
  padding: var(--sp-5);
}

.section-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.section-step-label {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
}

.section-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  background: var(--gray-100);
  color: var(--gray-700);
  font-size: var(--text-xs);
  font-weight: 700;
}

.lesson-section.section-current .section-status-badge {
  background: var(--primary-bg);
  color: var(--primary);
}

.lesson-section.section-completed .section-status-badge {
  background: var(--success-bg);
  color: var(--success-dark);
}

.lesson-section.section-locked .section-status-badge {
  background: var(--gray-200);
  color: var(--gray-500);
}

.section-lock-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.76);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  border-radius: var(--r-2xl);
  border: 1px dashed var(--gray-300);
  z-index: 5;
  text-align: center;
  padding: var(--sp-6);
}

.section-lock-overlay .lock-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--r-full);
  background: white;
  border: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: var(--shadow-sm);
}

.section-lock-overlay p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--gray-600);
}

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-4);
}

.tag-concept    { background: var(--primary-bg);  color: var(--primary); }
.tag-visual     { background: var(--accent-bg);   color: var(--accent-dark); }
.tag-video      { background: #FEE2E2;            color: #BE123C; }
.tag-logic      { background: var(--warning-bg);  color: var(--warning-dark); }
.tag-interactive { background: var(--success-bg); color: var(--success-dark); }
.tag-task       { background: var(--level4-light); color: var(--secondary); }
.tag-quiz       { background: var(--primary-bg);  color: var(--primary-dark); }
.tag-project    { background: #FDF4FF;            color: #7E22CE; }

.lesson-section h2 {
  font-size: var(--text-2xl);
  margin-bottom: var(--sp-4);
}

.lesson-section h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--sp-3);
}

.content-block {
  background: white;
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  border: 1px solid var(--gray-200);
  margin-bottom: var(--sp-4);
  line-height: 1.7;
}

.content-block p { margin-bottom: var(--sp-4); }
.content-block p:last-child { margin-bottom: 0; }

.info-box {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-xl);
  border-left: 4px solid;
  background: white;
  margin-bottom: var(--sp-4);
}

.info-box.info    { border-color: var(--primary); background: var(--primary-bg); }
.info-box.success { border-color: var(--success); background: var(--success-bg); }
.info-box.warning { border-color: var(--warning); background: var(--warning-bg); }
.info-box.tip     { border-color: var(--accent);  background: var(--accent-bg); }

.info-box .icon { font-size: 1.25rem; flex-shrink: 0; margin-top: 2px; }
.info-box-content h4 { font-size: var(--text-base); margin-bottom: var(--sp-1); }
.info-box-content p  { margin: 0; font-size: var(--text-sm); color: inherit; }

/* Property Cards */
.properties-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.property-card {
  background: white;
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  border: 2px solid var(--gray-200);
  text-align: center;
  transition: all var(--t);
}

.property-card:hover {
  border-color: var(--primary-light);
  box-shadow: var(--shadow);
}

.property-icon {
  font-size: 2rem;
  margin-bottom: var(--sp-3);
}

.property-card h4 {
  font-size: var(--text-base);
  color: var(--gray-900);
  margin-bottom: var(--sp-2);
}

.property-card p {
  font-size: var(--text-sm);
  color: var(--gray-500);
}

/* Flowchart visual */
.flowchart-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: var(--sp-8);
  background: var(--gray-50);
  border-radius: var(--r-2xl);
  border: 1px solid var(--gray-200);
}

.fc-node {
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  min-width: 180px;
  position: relative;
}

.fc-start, .fc-end {
  background: var(--primary);
  color: white;
  border-radius: var(--r-full);
}

.fc-process {
  background: white;
  color: var(--gray-800);
  border: 2px solid var(--primary-light);
}

.fc-decision {
  background: var(--warning);
  color: white;
  transform: rotate(0deg);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  padding: var(--sp-5) var(--sp-10);
  min-width: 200px;
}

.fc-arrow {
  color: var(--gray-400);
  font-size: 1.25rem;
  line-height: 1;
  padding: var(--sp-1) 0;
}

.fc-branch {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  position: relative;
}

.fc-branch-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--gray-500);
}

/* Video section */
.video-placeholder {
  background: #0F172A;
  border-radius: var(--r-2xl);
  overflow: hidden;
  position: relative;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid rgba(99,102,241,0.3);
}

.video-placeholder:hover .play-btn { transform: scale(1.1); }

.video-thumbnail {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0F172A, #1E1B4B);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
}

.play-btn {
  width: 72px; height: 72px;
  border-radius: var(--r-full);
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  color: white;
  box-shadow: var(--glow-primary);
  transition: transform var(--t);
}

.video-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: white;
}

.video-duration {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
}

/* ---- 15. INTERACTIVE COMPONENTS ---- */

/* Drag & Drop Sorter */
.sorter-container {
  background: var(--gray-50);
  border-radius: var(--r-2xl);
  padding: var(--sp-6);
  border: 1px solid var(--gray-200);
}

.sorter-instructions {
  font-size: var(--text-sm);
  color: var(--gray-600);
  margin-bottom: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--primary-bg);
  border-radius: var(--r-lg);
}

.sorter-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}

.sortable-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: white;
  border-radius: var(--r-xl);
  border: 2px solid var(--gray-200);
  cursor: grab;
  user-select: none;
  transition: all var(--t-fast);
}

.sortable-item:active { cursor: grabbing; transform: scale(0.98); }
.sortable-item.dragging {
  opacity: 0.5;
  border-color: var(--primary);
  background: var(--primary-bg);
}
.sortable-item.drag-over {
  border-color: var(--success);
  background: var(--success-bg);
  transform: translateY(2px);
}
.sortable-item.correct  { border-color: var(--success); background: var(--success-bg); }
.sortable-item.incorrect { border-color: var(--error); background: var(--error-bg); }

.drag-handle {
  color: var(--gray-300);
  font-size: 1.25rem;
  cursor: grab;
}

.item-number {
  width: 28px; height: 28px;
  min-width: 28px;
  border-radius: var(--r-full);
  background: var(--gray-100);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--gray-600);
}

.item-text {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--gray-800);
  flex: 1;
}

.item-feedback {
  font-size: 1.2rem;
  margin-left: auto;
}

/* ---- 16. QUIZ & TASK COMPONENTS ---- */
.task-card {
  background: white;
  border-radius: var(--r-2xl);
  border: 2px solid var(--gray-200);
  overflow: hidden;
  margin-bottom: var(--sp-6);
  transition: border-color var(--t);
}

.task-card.correct  { border-color: var(--success); }
.task-card.incorrect { border-color: var(--error); }

.task-header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6) var(--sp-4);
  border-bottom: 1px solid var(--gray-100);
}

.task-type-badge {
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.task-body { padding: var(--sp-6); }

.task-question {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--sp-5);
  line-height: 1.5;
}

/* Multiple Choice */
.choices-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }

.choice-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-xl);
  border: 2px solid var(--gray-200);
  cursor: pointer;
  transition: all var(--t-fast);
}

.choice-item:hover { border-color: var(--primary-light); background: var(--primary-bg); }
.choice-item.selected { border-color: var(--primary); background: var(--primary-bg); }
.choice-item.correct  { border-color: var(--success); background: var(--success-bg); }
.choice-item.incorrect { border-color: var(--error);  background: var(--error-bg); }

.choice-letter {
  width: 32px; height: 32px;
  min-width: 32px;
  border-radius: var(--r-full);
  background: var(--gray-100);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--gray-600);
}

.choice-item.selected .choice-letter  { background: var(--primary); color: white; }
.choice-item.correct  .choice-letter  { background: var(--success); color: white; }
.choice-item.incorrect .choice-letter { background: var(--error);   color: white; }

.choice-text {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--gray-800);
}

/* Feedback */
.task-feedback {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--gray-100);
  font-size: var(--text-sm);
}

.task-feedback.correct  { background: var(--success-bg); }
.task-feedback.incorrect { background: var(--error-bg);  }

.task-feedback .icon { font-size: 1.25rem; }

/* Code Block */
.code-block {
  background: #1E293B;
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: #94A3B8;
  line-height: 1.8;
  margin: var(--sp-4) 0;
  overflow-x: auto;
  position: relative;
}

.code-block .line-number {
  display: inline-block;
  width: 28px;
  color: #475569;
  user-select: none;
}

.code-block .kw   { color: #818CF8; }
.code-block .fn   { color: #34D399; }
.code-block .str  { color: #FCA5A5; }
.code-block .num  { color: #FCD34D; }
.code-block .cmt  { color: #475569; font-style: italic; }
.code-block .err  { text-decoration: underline wavy red; }

/* Text Input Task */
.text-input-task {
  width: 100%;
  padding: var(--sp-4);
  border-radius: var(--r-xl);
  border: 2px solid var(--gray-200);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  resize: vertical;
  min-height: 100px;
  transition: border-color var(--t-fast);
}

.text-input-task:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}

/* ---- 17. QUIZ COMPONENT ---- */
.quiz-container {
  background: linear-gradient(135deg, var(--primary-bg), var(--accent-bg));
  border-radius: var(--r-2xl);
  padding: var(--sp-8);
  border: 1px solid rgba(99,102,241,0.15);
}

.quiz-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-6);
}

.quiz-progress-indicator {
  display: flex;
  gap: var(--sp-2);
}

.quiz-dot {
  width: 10px; height: 10px;
  border-radius: var(--r-full);
  background: var(--gray-300);
  transition: all var(--t-fast);
}

.quiz-dot.active    { background: var(--primary); transform: scale(1.3); }
.quiz-dot.completed { background: var(--success); }
.quiz-dot.incorrect { background: var(--error); }

.quiz-score {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--gray-600);
}

.quiz-question-card {
  background: white;
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-sm);
}

.quiz-q-number {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
  margin-bottom: var(--sp-2);
}

.quiz-q-text {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: var(--sp-5);
  line-height: 1.4;
}

.quiz-explanation {
  background: var(--success-bg);
  border: 1px solid rgba(16,185,129,0.3);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  font-size: var(--text-sm);
  color: var(--success-dark);
  margin-top: var(--sp-4);
  display: none;
}

.quiz-explanation.show { display: block; }

.quiz-result-card {
  background: white;
  border-radius: var(--r-2xl);
  padding: var(--sp-10);
  text-align: center;
  box-shadow: var(--shadow);
}

.quiz-result-score {
  font-size: 4rem;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
  margin-bottom: var(--sp-2);
}

.quiz-result-label {
  font-size: var(--text-lg);
  color: var(--gray-600);
  margin-bottom: var(--sp-6);
}

.quiz-stars {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  font-size: 2rem;
  margin-bottom: var(--sp-8);
}

/* ---- 18. MINI PROJECT ---- */
.project-container {
  background: white;
  border-radius: var(--r-2xl);
  overflow: hidden;
  border: 2px solid var(--gray-200);
}

.project-header-gradient {
  padding: var(--sp-8);
  background: linear-gradient(135deg, #7C3AED, #EC4899);
  color: white;
}

.project-header-gradient h3 { color: white; font-size: var(--text-xl); margin-bottom: var(--sp-2); }
.project-header-gradient p  { color: rgba(255,255,255,0.8); font-size: var(--text-sm); }

.project-requirements {
  padding: var(--sp-6);
  border-bottom: 1px solid var(--gray-100);
}

.requirement-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  font-size: var(--text-sm);
  color: var(--gray-700);
}

.req-check {
  width: 20px; height: 20px;
  min-width: 20px;
  border-radius: var(--r-sm);
  border: 2px solid var(--gray-300);
  margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
  cursor: pointer;
  transition: all var(--t-fast);
}

.req-check.checked { background: var(--success); border-color: var(--success); color: white; }

.project-workspace { padding: var(--sp-6); }

.project-textarea {
  width: 100%;
  min-height: 200px;
  padding: var(--sp-4);
  border-radius: var(--r-xl);
  border: 2px solid var(--gray-200);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  resize: vertical;
  transition: border-color var(--t-fast);
  color: var(--gray-800);
  line-height: 1.7;
}

.project-textarea:focus {
  outline: none;
  border-color: var(--secondary);
  box-shadow: 0 0 0 3px rgba(139,92,246,0.1);
}

/* ---- 19. BLOCK CODING PAGE ---- */
.block-coding-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  height: calc(100vh - var(--nav-h));
  overflow: hidden;
}

.blockly-workspace-panel {
  background: #F8FAFC;
  position: relative;
  border-right: 1px solid var(--gray-200);
}

#blocklyDiv {
  width: 100%;
  height: 100%;
}

.block-coding-panel {
  display: flex;
  flex-direction: column;
  background: white;
  overflow: hidden;
}

.panel-tabs {
  display: flex;
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
}

.panel-tab {
  flex: 1;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-500);
  cursor: pointer;
  border: none;
  background: none;
  transition: all var(--t-fast);
  border-bottom: 3px solid transparent;
}

.panel-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background: var(--primary-bg);
}

.panel-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-6);
}

.panel-content.hidden { display: none; }

.challenge-card {
  background: var(--gray-50);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  border: 2px solid var(--gray-200);
  margin-bottom: var(--sp-4);
  cursor: pointer;
  transition: all var(--t-fast);
}

.challenge-card:hover { border-color: var(--primary-light); }
.challenge-card.active { border-color: var(--primary); background: var(--primary-bg); }
.challenge-card.completed { border-color: var(--success); }

.challenge-num {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  margin-bottom: var(--sp-1);
}

.challenge-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: var(--sp-2);
}

.challenge-desc {
  font-size: var(--text-sm);
  color: var(--gray-600);
  line-height: 1.5;
}

.block-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: white;
  border-bottom: 1px solid var(--gray-200);
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ---- 20. SIMULATION PAGE ---- */
.sim-layout {
  display: grid;
  grid-template-columns: 300px 1fr 280px;
  height: calc(100vh - var(--nav-h));
  overflow: hidden;
}

.sim-control-panel {
  background: white;
  border-right: 1px solid var(--gray-200);
  padding: var(--sp-5);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.sim-canvas-area {
  background: var(--gray-50);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  gap: var(--sp-4);
}

#simCanvas {
  background: white;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  border: 2px solid var(--gray-200);
}

.sim-log-panel {
  background: #0F172A;
  padding: var(--sp-4);
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: #94A3B8;
}

.sim-log-entry {
  padding: var(--sp-1) 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  line-height: 1.5;
}

.sim-log-entry.success { color: #34D399; }
.sim-log-entry.warning { color: #FCD34D; }
.sim-log-entry.error   { color: #FCA5A5; }
.sim-log-entry.info    { color: #93C5FD; }

.sim-panel-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-500);
  margin-bottom: var(--sp-3);
}

.command-btn {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-xl);
  border: 2px solid var(--gray-200);
  background: white;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--gray-700);
  cursor: pointer;
  transition: all var(--t-fast);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-align: left;
}

.command-btn:hover {
  border-color: var(--primary);
  background: var(--primary-bg);
  color: var(--primary);
}

.command-btn .cmd-icon { font-size: 1.1rem; }

.sensor-display {
  background: var(--gray-900);
  border-radius: var(--r-xl);
  padding: var(--sp-4);
  color: var(--success);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.sensor-row {
  display: flex;
  justify-content: space-between;
  padding: var(--sp-1) 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.sensor-label { color: rgba(255,255,255,0.5); }
.sensor-value { color: var(--success); font-weight: 700; }

/* ---- 21. COMPLETION MODAL ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  opacity: 0;
  visibility: hidden;
  transition: all var(--t);
}

.modal-overlay.show {
  opacity: 1;
  visibility: visible;
}

.modal-box {
  background: white;
  border-radius: var(--r-3xl);
  padding: var(--sp-10);
  max-width: 480px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-xl);
  transform: scale(0.9) translateY(20px);
  transition: all var(--t-slow);
}

.modal-overlay.show .modal-box {
  transform: scale(1) translateY(0);
}

.modal-trophy { font-size: 5rem; margin-bottom: var(--sp-4); }

.modal-box h2 {
  font-size: var(--text-3xl);
  margin-bottom: var(--sp-2);
}

.modal-box p {
  font-size: var(--text-base);
  color: var(--gray-500);
  margin-bottom: var(--sp-8);
}

.xp-gained {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  background: var(--warning-bg);
  border: 2px solid #FDE68A;
  border-radius: var(--r-full);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--warning-dark);
  margin-bottom: var(--sp-8);
}

/* Confetti animation */
.confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1001;
  overflow: hidden;
}

@keyframes confetti-fall {
  0%   { transform: translateY(-100px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

.confetti-piece {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  animation: confetti-fall linear forwards;
}

/* ---- 22. FEATURES SECTION ---- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-6);
}

.feature-card {
  background: white;
  border-radius: var(--r-2xl);
  padding: var(--sp-8);
  border: 1px solid var(--gray-200);
  transition: all var(--t);
}

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

.feature-icon {
  width: 56px; height: 56px;
  border-radius: var(--r-xl);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem;
  margin-bottom: var(--sp-5);
}

.feature-card h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--sp-3);
}

.feature-card p {
  font-size: var(--text-base);
  color: var(--gray-500);
  line-height: 1.6;
}

/* ---- 23. FOOTER ---- */
.footer {
  background: var(--gray-900);
  color: var(--gray-400);
  padding: var(--sp-12) 0 var(--sp-8);
  margin-top: var(--sp-20);
}

.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--sp-6);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-12);
  margin-bottom: var(--sp-10);
}

.footer-brand .logo-text {
  font-size: var(--text-xl);
  font-weight: 800;
  color: white;
  margin-bottom: var(--sp-3);
}

.footer-brand p { font-size: var(--text-sm); line-height: 1.6; }

.footer-links h4 {
  font-size: var(--text-sm);
  font-weight: 700;
  color: white;
  margin-bottom: var(--sp-4);
}

.footer-links ul { list-style: none; }
.footer-links li { margin-bottom: var(--sp-2); }
.footer-links a {
  font-size: var(--text-sm);
  color: var(--gray-500);
  transition: color var(--t-fast);
}
.footer-links a:hover { color: white; }

.footer-bottom {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-6) 0;
  border-top: 1px solid rgba(255,255,255,0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
}

/* ---- 24. ANIMATIONS & EFFECTS ---- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

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

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

.animate-fade-up   { animation: fadeInUp 0.5s ease forwards; }
.animate-fade-in   { animation: fadeIn 0.4s ease forwards; }
.animate-pulse     { animation: pulse 2s infinite; }
.animate-bounce    { animation: bounce 1s infinite; }

.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }

/* ---- 25. SCROLL INDICATOR ---- */
.lesson-progress-bar-fixed {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  height: 3px;
  background: var(--primary);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform var(--t-fast);
  z-index: 99;
}

/* ---- 26. RESPONSIVE ---- */
@media (max-width: 1100px) {
  .hero-content { grid-template-columns: 1fr; text-align: center; }
  .hero-visual  { display: none; }
  .hero-cta     { justify-content: center; }
  .lesson-layout { grid-template-columns: 1fr; }
  .lesson-sidebar { display: none; }
  .block-coding-layout { grid-template-columns: 1fr; }
  .block-coding-panel { height: 50vh; }
  .sim-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  
  /* ---- 20. EXAMPLES & COMPARISON ---- */
  .examples-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sp-4);
    margin-top: var(--sp-4);
  }

  .comparison-box {
    background: white;
    border-radius: var(--r-xl);
    border: 1px solid var(--gray-200);
    padding: var(--sp-6);
    margin-bottom: var(--sp-6);
  }

  /* ---- 21. MODERN FLOWCHART ---- */
  .flowchart-visual {
    background: white;
    border-radius: var(--r-2xl);
    padding: var(--sp-10);
    border: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    margin: var(--sp-6) 0;
    box-shadow: var(--shadow-sm);
  }

  .fc-node {
    padding: var(--sp-3) var(--sp-6);
    border-radius: var(--r-lg);
    font-weight: 600;
    font-size: var(--text-sm);
    border: 2px solid var(--gray-300);
    background: var(--gray-50);
    color: var(--gray-700);
    min-width: 160px;
    text-align: center;
    transition: all var(--t);
    position: relative;
    z-index: 2;
  }

  .fc-start { background: var(--primary); color: white; border-color: transparent; border-radius: var(--r-full); }
  .fc-end   { background: var(--gray-800); color: white; border-color: transparent; border-radius: var(--r-full); }
  .fc-process { background: white; border-color: var(--primary-light); }
  .fc-decision { 
    background: var(--warning-bg); 
    border-color: var(--warning); 
    transform: rotate(0deg);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    padding: var(--sp-6) var(--sp-8);
    min-width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .fc-arrow-modern {
    width: 2px;
    height: var(--sp-8);
    background: var(--gray-300);
    position: relative;
  }

  .fc-arrow-modern::after {
    content: '▼';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: var(--gray-300);
  }

  /* Scroll Animation */
  .animate-fade-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

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

@media (max-width: 768px) {
  .nav-links { display: none; }
  .module-nodes::before { display: none; }
  .hero { padding: var(--sp-12) 0; }
  .lesson-main { padding: var(--sp-6); }
  .properties-grid { grid-template-columns: 1fr 1fr; }
  .footer-inner  { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: var(--sp-3); text-align: center; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .properties-grid  { grid-template-columns: 1fr; }
  .hero-cta { flex-direction: column; }
  .stats-grid { grid-template-columns: 1fr; }
  .levels-grid { grid-template-columns: 1fr; }
}

/* ---- 27. SCROLLBAR ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--gray-100); }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* ---- 28. SELECTION ---- */
::selection { background: var(--primary-bg); color: var(--primary-dark); }

/* ---- 29. FOCUS VISIBLE ---- */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ---- 30. LESSON EXTENSIONS (flowchart builder, logic order, nav) ---- */
.sidebar-section-link.active {
  background: var(--primary-bg);
  color: var(--primary);
  font-weight: 700;
}

.quiz-dot.active {
  background: var(--primary);
  transform: scale(1.15);
}

.fc-build { margin-top: var(--sp-4); }
.fc-palette {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3);
}
.fc-palette-btn {
  border: 2px solid var(--gray-200); border-radius: var(--r-lg);
  padding: var(--sp-2) var(--sp-3); background: white; cursor: pointer;
  transition: all var(--t-fast);
}
.fc-palette-btn:hover { border-color: var(--primary); }
.fc-palette-btn.active {
  border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-bg);
}
.fc-pal-shape {
  font-size: var(--text-xs); font-weight: 700; color: var(--gray-800);
}
.fc-shape-start { color: var(--success-dark); }
.fc-shape-end { color: var(--error-dark); }
.fc-shape-decision { color: var(--warning-dark); }
.fc-palette-hint { font-size: var(--text-sm); color: var(--gray-500); margin-bottom: var(--sp-3); }
.fc-slots-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.fc-slot-wrap { text-align: center; }
.fc-slot-label { font-size: var(--text-xs); font-weight: 700; color: var(--gray-400); text-transform: uppercase; display: block; margin-bottom: 4px; }
.fc-slot {
  min-height: 56px; border: 2px dashed var(--gray-300); border-radius: var(--r-xl);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--gray-50); transition: border-color var(--t-fast), background var(--t-fast);
}
.fc-slot:hover { border-color: var(--primary-light); background: var(--primary-bg); }
.fc-slot-placeholder { font-size: var(--text-xs); color: var(--gray-400); }
.fc-slot-filled { font-weight: 800; font-size: var(--text-sm); color: var(--primary-dark); }

.logic-order-wrap { margin-top: var(--sp-2); }
.logic-order-list { list-style: none; padding: 0; margin: 0 0 var(--sp-4); }
.logic-order-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2);
  background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--r-xl);
}
.logic-order-text { font-size: var(--text-sm); font-weight: 600; color: var(--gray-800); }
.choice-multi.selected { border-color: var(--primary) !important; background: var(--primary-bg) !important; }

/* ================================================================
   NEW LESSON COMPONENTS — Search, Sort, Game, Pseudocode, etc.
   ================================================================ */

/* ---- Pseudocode Viewer ---- */
.pseudocode-wrap { border: 1px solid var(--gray-200); border-radius: var(--r-2xl); overflow: hidden; }
.pc-toolbar { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-2) var(--sp-4); background: var(--gray-900); }
.pc-block { background: var(--gray-900); padding: var(--sp-4); font-family: 'Monaco','Menlo','Courier New',monospace; font-size: 0.82rem; }
.pc-line { display: flex; align-items: center; gap: var(--sp-3); padding: 4px var(--sp-2); border-radius: 4px; cursor: pointer; transition: background var(--t-fast); color: #E2E8F0; }
.pc-line:hover { background: rgba(255,255,255,0.05); }
.pc-line.pc-highlight { background: rgba(99,102,241,0.18); border-left: 3px solid var(--primary); }
.pc-line.pc-active { background: rgba(16,185,129,0.2); outline: 1px solid var(--success); }
.pc-num { color: #4B5563; font-size: 0.7rem; min-width: 22px; text-align: right; user-select: none; }
.pc-code { color: #F1F5F9; white-space: pre; }
.pc-badge { font-size: 0.65rem; font-weight: 700; background: var(--primary); color: white; padding: 2px 6px; border-radius: var(--r-full); margin-left: auto; }
.pc-tooltip-box { background: white; border: 1px solid var(--gray-200); border-radius: var(--r-xl); padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-2); font-size: var(--text-sm); color: var(--gray-700); box-shadow: var(--shadow-md); }

/* ---- Search / Sort Animation Cells ---- */
.sa-wrap { padding: var(--sp-4); background: var(--gray-50); border-radius: var(--r-2xl); border: 1px solid var(--gray-200); }
.sa-desc { font-size: var(--text-sm); color: var(--gray-600); margin-bottom: var(--sp-3); }
.sa-target-badge { display: inline-block; background: var(--primary-bg); color: var(--primary-dark); font-weight: 700; padding: 4px 14px; border-radius: var(--r-full); font-size: var(--text-sm); margin-bottom: var(--sp-4); }
.sa-array { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: var(--sp-3); }
.sa-cell { min-width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: white; border: 2px solid var(--gray-300); border-radius: var(--r-lg); font-weight: 700; font-size: 0.85rem; transition: all 0.3s; color: var(--gray-800); }
.sa-cell-sm { min-width: 28px; height: 28px; font-size: 0.75rem; }
.sa-cell.sa-active  { border-color: var(--warning); background: #FFFBEB; transform: scale(1.15); }
.sa-cell.sa-checked { background: var(--gray-100); color: var(--gray-400); border-color: var(--gray-200); }
.sa-cell.sa-found   { border-color: var(--success); background: #ECFDF5; color: var(--success-dark); transform: scale(1.2); }
.sa-cell.sa-elim    { background: var(--gray-200); color: var(--gray-400); border-color: var(--gray-200); opacity: 0.5; }
.sa-info { font-size: var(--text-sm); color: var(--gray-600); min-height: 24px; margin-bottom: var(--sp-2); }
.sa-counter { font-size: var(--text-sm); color: var(--gray-500); margin-bottom: var(--sp-3); }

/* ---- Sort Bars ---- */
.sort-wrap { padding: var(--sp-4); background: var(--gray-50); border-radius: var(--r-2xl); border: 1px solid var(--gray-200); }
.sort-bars { display: flex; align-items: flex-end; gap: 4px; height: 160px; margin-bottom: var(--sp-3); }
.sort-bar { flex: 1; min-width: 28px; background: var(--primary-light); border-radius: var(--r-lg) var(--r-lg) 0 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; transition: height 0.25s, background 0.15s; }
.sort-bar span { font-size: 0.65rem; font-weight: 700; color: white; }
.sort-bar.sort-comparing { background: var(--warning); }
.sort-bar.sort-swapping  { background: var(--error-light); }
.sort-bar.sort-done      { background: var(--success); }

/* ---- Compare Search ---- */
.cs-wrap { padding: var(--sp-4); background: var(--gray-50); border-radius: var(--r-2xl); border: 1px solid var(--gray-200); }
.cs-side { margin-bottom: var(--sp-4); }
.cs-side h4 { font-size: var(--text-sm); margin-bottom: var(--sp-2); }
.cs-arr { flex-wrap: wrap; gap: 3px; }

/* ---- Efficiency Chart ---- */
.ec-wrap { padding: var(--sp-5); background: var(--gray-50); border-radius: var(--r-2xl); border: 1px solid var(--gray-200); }
.ec-desc { font-size: var(--text-sm); color: var(--gray-600); margin-bottom: var(--sp-4); }
.ec-bars { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-4); }
.ec-row { display: grid; grid-template-columns: 160px 1fr 60px; gap: var(--sp-3); align-items: center; }
.ec-label { font-size: var(--text-sm); font-weight: 600; }
.ec-bar-wrap { background: var(--gray-200); border-radius: var(--r-full); height: 22px; overflow: hidden; }
.ec-bar { height: 100%; border-radius: var(--r-full); transition: width 0.4s; }
.ec-bar-lin { background: var(--error-light); }
.ec-bar-bin { background: var(--success); }
.ec-val { font-size: var(--text-sm); font-weight: 700; color: var(--gray-700); }
.ec-msg { font-size: var(--text-sm); font-weight: 600; color: var(--primary-dark); margin-top: var(--sp-3); }

/* ---- Number Guess Game ---- */
.ng-game { padding: var(--sp-4); background: var(--gray-50); border-radius: var(--r-2xl); border: 1px solid var(--gray-200); }
.ng-info { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.ng-range { font-size: 1.1rem; font-weight: 800; color: var(--primary); font-family: monospace; }
.ng-tries { font-size: var(--text-sm); color: var(--gray-500); }
.ng-bar-wrap { margin-bottom: var(--sp-4); overflow-x: auto; }
.ng-bar { display: flex; flex-wrap: wrap; gap: 2px; }
.ng-cell { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: white; border: 1px solid var(--gray-200); border-radius: 4px; font-size: 0.55rem; font-weight: 700; color: var(--gray-500); transition: all 0.2s; }
.ng-cell.ng-cell-elim  { background: var(--gray-200); color: var(--gray-300); border-color: transparent; }
.ng-cell.ng-cell-guess { background: var(--warning); color: white; border-color: transparent; transform: scale(1.2); }
.ng-hint { font-size: 1rem; font-weight: 700; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-xl); display: inline-block; }
.ng-hint-up   { background: #FEF3C7; color: var(--warning-dark); }
.ng-hint-down { background: #EFF6FF; color: #1D4ED8; }

/* ---- Is-Algorithm Game ---- */
.ia-game { }
.ia-score-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-4); font-size: var(--text-sm); font-weight: 600; color: var(--gray-600); }
.ia-cards { display: flex; flex-direction: column; gap: var(--sp-4); }
.ia-card { background: white; border: 1px solid var(--gray-200); border-radius: var(--r-2xl); padding: var(--sp-5); transition: border-color var(--t-fast); }
.ia-card.ia-card-correct { border-color: var(--success); }
.ia-card.ia-card-wrong   { border-color: var(--error-light); }
.ia-scenario { font-size: var(--text-sm); color: var(--gray-800); margin-bottom: var(--sp-4); line-height: 1.6; }
.ia-btns { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.ia-feedback { margin-top: var(--sp-3); font-size: var(--text-sm); padding: var(--sp-3); border-radius: var(--r-xl); }
.ia-correct { background: #ECFDF5; color: var(--success-dark); }
.ia-wrong   { background: #FEF2F2; color: var(--error-dark); }

/* ---- Bug Hunter Game ---- */
.bh-game { padding: var(--sp-4); background: var(--gray-50); border-radius: var(--r-2xl); border: 1px solid var(--gray-200); }
.bh-header { display: flex; justify-content: space-between; font-size: var(--text-sm); font-weight: 700; color: var(--gray-600); margin-bottom: var(--sp-4); }
.bh-line { display: flex; gap: var(--sp-3); padding: 4px var(--sp-2); border-radius: 4px; cursor: default; }
.bh-line.bh-line-suspect { background: rgba(239,68,68,0.08); border-left: 3px solid var(--error-light); }
.bh-code { font-family: monospace; font-size: 0.82rem; color: #E2E8F0; white-space: pre; }
.bh-choices { display: flex; flex-direction: column; gap: var(--sp-2); }
.bh-choice { text-align: left; font-size: var(--text-sm); }
.bh-fb { font-size: var(--text-sm); }

/* ---- Loop Stopper ---- */
.ls-game { padding: var(--sp-4); background: var(--gray-50); border-radius: var(--r-2xl); border: 1px solid var(--gray-200); }
.ls-header { display: flex; justify-content: space-between; font-size: var(--text-sm); font-weight: 700; margin-bottom: var(--sp-4); }
.ls-counter-anim { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--gray-900); border-radius: var(--r-xl); margin-bottom: var(--sp-3); width: fit-content; }
.ls-counter { font-family: monospace; font-size: 1.1rem; color: #F1F5F9; font-weight: 700; }
.ls-spinner { font-size: 1.4rem; animation: spin 1s linear infinite; }
.ls-stopped .ls-spinner { animation: none; opacity: 0.3; }
.ls-runaway .ls-spinner { animation: spin 0.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ls-choices { display: flex; flex-direction: column; gap: var(--sp-2); }
.ls-choice { text-align: left; font-size: var(--text-sm); }

/* ---- Efficiency Game ---- */
.eff-game { padding: var(--sp-4); background: var(--gray-50); border-radius: var(--r-2xl); border: 1px solid var(--gray-200); }
.eff-header { display: flex; justify-content: space-between; font-size: var(--text-sm); font-weight: 700; margin-bottom: var(--sp-4); }
.eff-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-3); }
.eff-option { padding: var(--sp-4); background: white; border: 2px solid var(--gray-200); border-radius: var(--r-2xl); cursor: pointer; text-align: center; transition: all var(--t-fast); }
.eff-option:hover { border-color: var(--primary-light); background: var(--primary-bg); transform: translateY(-2px); }
.eff-option.eff-opt-correct { border-color: var(--success); background: #ECFDF5; }
.eff-option.eff-opt-wrong   { border-color: var(--error-light); background: #FEF2F2; }
.eff-opt-label { font-weight: 700; font-size: var(--text-sm); color: var(--gray-800); margin-bottom: var(--sp-2); }
.eff-opt-steps { font-size: var(--text-xs); color: var(--gray-500); margin-bottom: var(--sp-2); }
.eff-opt-badge { font-size: var(--text-xs); font-weight: 700; padding: 2px 8px; border-radius: var(--r-full); background: var(--gray-100); color: var(--gray-600); display: inline-block; }

/* ---- Decompose Game ---- */
.dc-game { }
.dc-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.dc-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: white; border: 1px solid var(--gray-200); border-radius: var(--r-xl); cursor: grab; font-size: var(--text-sm); transition: all var(--t-fast); }
.dc-item:hover { background: var(--primary-bg); border-color: var(--primary-light); }
.dc-item:active { cursor: grabbing; }

/* ---- Three Structures Animation ---- */
.ts-wrap { }
.ts-tabs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.ts-tab { padding: var(--sp-2) var(--sp-4); border: 2px solid var(--gray-200); border-radius: var(--r-full); background: white; font-size: var(--text-sm); font-weight: 600; cursor: pointer; color: var(--gray-600); transition: all var(--t-fast); }
.ts-tab:hover { border-color: var(--primary-light); color: var(--primary); }
.ts-tab.active { background: var(--primary); border-color: var(--primary); color: white; }
.ts-panel { padding: var(--sp-4); background: var(--gray-50); border-radius: var(--r-2xl); }
.ts-robot-demo { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); }
.ts-step { padding: var(--sp-2) var(--sp-5); background: white; border: 2px solid var(--primary-light); border-radius: var(--r-xl); font-size: var(--text-sm); font-weight: 600; color: var(--primary-dark); min-width: 160px; text-align: center; }
.ts-step.ts-decision { background: #FFFBEB; border-color: var(--warning); color: var(--warning-dark); }
.ts-step.ts-end { border-color: var(--success); color: var(--success-dark); }
.ts-arrow { font-size: 1.2rem; color: var(--gray-400); }

/* ---- Flowchart Symbol Cards ---- */
.fcsym-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-4); }
.fcsym-card { height: 160px; cursor: pointer; perspective: 600px; }
.fcsym-front, .fcsym-back { position: absolute; inset: 0; backface-visibility: hidden; transition: transform 0.5s; border-radius: var(--r-2xl); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--sp-3); }
.fcsym-card { position: relative; transform-style: preserve-3d; }
.fcsym-front { background: white; border: 2px solid var(--gray-200); text-align: center; }
.fcsym-back { background: var(--primary); color: white; transform: rotateY(180deg); text-align: center; font-size: var(--text-sm); }
.fcsym-card.flipped .fcsym-front { transform: rotateY(180deg); }
.fcsym-card.flipped .fcsym-back  { transform: rotateY(0); }
.fcsym-shape { font-size: 2rem; margin-bottom: var(--sp-2); }
.fcsym-shape.fc-start    { color: var(--success-dark); }
.fcsym-shape.fc-process  { color: var(--primary-dark); }
.fcsym-shape.fc-decision { color: var(--warning-dark); }
.fcsym-shape.fc-io       { color: var(--accent-dark); }
.fcsym-name { font-size: 0.72rem; font-weight: 700; color: var(--gray-700); text-align: center; }
.fcsym-hint { font-size: 0.65rem; color: var(--gray-400); margin-top: 4px; }

/* ---- Grade Flowchart ---- */
.fcg-wrap { }
.fc-node.fcg-active { animation: fcPulse 0.5s ease; box-shadow: 0 0 0 3px var(--primary); }
@keyframes fcPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
.fc-decision { background: var(--warning-bg) !important; border-color: var(--warning) !important; color: var(--warning-dark) !important; }
.fc-io { background: var(--accent-bg) !important; border-color: var(--accent) !important; color: var(--accent-dark) !important; }
.fc-node-sm { font-size: 0.78rem; padding: var(--sp-2) var(--sp-3); min-width: 80px; }


/* ============================================================
   MODULES PAGE — Enhanced UI Components
   ============================================================ */

/* ---- Two-column top grid ---- */
.map-top-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.grade-selector-shell {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-3xl);
  padding: var(--sp-5);
  margin-top: var(--sp-6);
  backdrop-filter: blur(8px);
}
.grade-selector-copy {
  text-align: center;
  margin-bottom: var(--sp-3);
}
.grade-selector-copy .label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  font-size: var(--text-xs);
  font-weight: 700;
  margin-bottom: var(--sp-2);
}
.grade-selector-copy h3 {
  color: white;
  margin-bottom: var(--sp-1);
}
.grade-selector-copy p {
  color: rgba(255,255,255,0.7);
  font-size: var(--text-sm);
}
/* ---- Progress Panel ---- */
.progress-panel {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--r-2xl);
  padding: var(--sp-5);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--theme-base, #6366F1) 10%, transparent);
}
.progress-panel-compact {
  padding: var(--sp-4);
  max-width: 540px;
}
.progress-panel-compact .pp-header {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
}
.progress-panel-compact .pp-stats-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
}
.pp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.pp-header h3 {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
}
.pp-xp-level {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.pp-xp-badge {
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: .72rem;
  font-weight: 800;
  color: white;
  letter-spacing: .04em;
}
.pp-xp-title {
  font-size: .78rem;
  font-weight: 600;
  color: var(--gray-600);
}
.pp-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.pp-stat {
  background: color-mix(in srgb, var(--theme-surface, var(--gray-50)) 72%, white);
  border: 1px solid color-mix(in srgb, var(--theme-base, #6366F1) 10%, transparent);
  border-radius: var(--r-lg);
  padding: var(--sp-2) var(--sp-3);
  text-align: center;
}
.pp-stat-val {
  font-size: var(--text-base);
  font-weight: 800;
  color: var(--gray-900);
  line-height: 1.2;
}
.pp-stat-val span { font-size: .72rem; font-weight: 600; color: var(--gray-400); }
.pp-stat-lbl {
  font-size: .65rem;
  color: var(--gray-500);
  font-weight: 500;
  margin-top: 2px;
  line-height: 1.2;
}
.pp-xp-bar-wrap { margin-bottom: var(--sp-4); }
.progress-panel-compact .pp-xp-bar-wrap {
  margin-bottom: var(--sp-3);
}
.pp-levels-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: color-mix(in srgb, var(--theme-base, var(--primary)) 55%, var(--gray-500));
  margin-bottom: var(--sp-2);
}
.pp-level-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
  border-radius: var(--r-lg);
  padding: 6px 8px;
}
.pp-level-row-active {
  background: var(--pp-row-bg, var(--theme-surface, var(--primary-bg)));
}
.pp-level-name {
  font-size: .78rem;
  font-weight: 600;
  color: var(--gray-700);
  width: 100px;
  flex-shrink: 0;
}
.pp-bar { flex: 1; height: 6px; }
.pp-level-pct {
  font-size: .72rem;
  font-weight: 700;
  color: var(--gray-500);
  width: 32px;
  text-align: right;
}
.pp-level-row-active .pp-level-name,
.pp-level-row-active .pp-level-pct {
  color: var(--pp-row, var(--theme-base, var(--primary)));
}
.pp-compact-note {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--theme-surface, var(--gray-50)) 78%, white);
  border: 1px solid color-mix(in srgb, var(--theme-base, var(--primary)) 10%, transparent);
}
.pp-compact-note strong {
  font-size: .8rem;
  color: color-mix(in srgb, var(--theme-base, var(--primary)) 82%, var(--gray-900));
}
.pp-compact-note span {
  font-size: .75rem;
  color: var(--gray-600);
  line-height: 1.45;
}
.level-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--gray-500);
  margin-top: 8px;
  gap: var(--sp-3);
}

/* ---- Featured Module Card ---- */
.featured-module {
  background: var(--level1-grad);
  border-radius: var(--r-2xl);
  padding: var(--sp-6);
  color: white;
  position: relative;
  overflow: hidden;
}
.featured-module::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 50%, rgba(255,255,255,.08) 0%, transparent 60%);
  pointer-events: none;
}
.featured-label {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.75);
  margin-bottom: var(--sp-3);
}
.featured-body {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  position: relative;
}
.featured-icon {
  font-size: 3rem;
  flex-shrink: 0;
  line-height: 1;
}
.featured-info { flex: 1; }
.featured-info h2 {
  color: white;
  font-size: var(--text-xl);
  margin-bottom: var(--sp-2);
  line-height: 1.2;
}
.featured-info p {
  color: rgba(255,255,255,.8);
  font-size: var(--text-sm);
  margin-bottom: var(--sp-3);
}
.featured-module-compact {
  padding: var(--sp-5);
}
.featured-module-compact .featured-body {
  align-items: center;
}
.featured-module-compact .featured-info h2 {
  font-size: 1.9rem;
  margin-bottom: 6px;
}
.featured-module-compact .featured-info p {
  margin-bottom: 10px;
}
.featured-module-compact .featured-progress-ring {
  width: 68px;
  height: 68px;
}
.featured-module-compact .featured-progress-ring svg {
  width: 68px;
  height: 68px;
}
.featured-module-compact .featured-right {
  gap: var(--sp-2);
}
.featured-module-compact .featured-btn {
  padding: 10px 18px;
}
.featured-chips {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.featured-chips .mod-chip {
  background: rgba(255,255,255,.2);
  color: white;
  border: 1px solid rgba(255,255,255,.3);
}
.featured-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
}
.featured-progress-ring {
  position: relative;
  width: 80px;
  height: 80px;
}
.featured-progress-ring span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 800;
  color: white;
}
.featured-btn {
  background: white;
  color: var(--primary-dark);
  font-weight: 700;
  font-size: var(--text-sm);
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-full);
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,.4);
}
.featured-btn:hover { background: var(--gray-100); }

/* ---- Level section header (enhanced) ---- */
.map-level-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--section-accent, var(--primary)) 14%, white);
  border: 1px solid color-mix(in srgb, var(--section-accent, var(--primary)) 20%, transparent);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: color-mix(in srgb, var(--section-accent, var(--primary-dark)) 82%, var(--gray-900));
  margin-bottom: 0;
}
.map-level-stats {
  display: flex;
  gap: var(--sp-2);
  font-size: .75rem;
  color: var(--gray-500);
  margin-top: var(--sp-2);
  font-weight: 500;
}
.map-level-progress-wrap {
  margin-left: auto;
  flex-shrink: 0;
}
.map-level-progress-circle {
  position: relative;
  width: 60px;
  height: 60px;
}
.map-level-progress-circle svg {
  width: 60px;
  height: 60px;
  transform: rotate(-90deg);
}
.map-level-progress-circle .circle-bg {
  fill: none;
  stroke: var(--gray-200);
  stroke-width: 3;
  stroke-linecap: round;
}
.map-level-progress-circle .circle-fill {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dashoffset: 0;
  transition: stroke-dasharray .5s ease;
}
.map-level-progress-circle span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 800;
  color: var(--gray-700);
}
/* same for featured ring bg */
.featured-progress-ring svg { width: 80px; height: 80px; transform: rotate(-90deg); }
.featured-progress-ring .circle-bg { fill: none; stroke: rgba(255,255,255,.25); stroke-width: 3; stroke-linecap: round; }
.featured-progress-ring .circle-fill { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dashoffset: 0; transition: stroke-dasharray .5s ease; }

/* ---- Module card chips ---- */
.module-chips {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-2);
}
.mod-chip {
  font-size: .68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.16);
  color: white;
  border: 1px solid rgba(255,255,255,0.22);
  white-space: nowrap;
}
.mod-chip-diff { background: rgba(255,255,255,0.22); color: white; border-color: rgba(255,255,255,0.32); }

/* ---- Module node: in-progress state ---- */
.module-node.in-progress .module-progress-fill { background: var(--module-accent, var(--warning)); }
.module-node.in-progress { border-left: 3px solid var(--module-accent, var(--warning)); }

/* ---- Module expand button ---- */
.mod-header-clickable { cursor: pointer; }
.module-expand-btn {
  font-size: .85rem;
  color: rgba(255,255,255,0.8);
  transition: transform var(--t-fast);
  flex-shrink: 0;
  padding: var(--sp-1);
  margin-left: var(--sp-2);
  user-select: none;
}
.module-expand-btn:hover { color: white; }

/* ---- Module accordion ---- */
.module-accordion {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.module-accordion.open {
  max-height: 900px;
}
.mod-lesson-list {
  list-style: none;
  border-top: 1px solid var(--gray-100);
  padding: var(--sp-3) 0 var(--sp-2);
  margin: 0;
}
.mod-lesson-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-lg);
  cursor: pointer;
  font-size: var(--text-xs);
  color: var(--gray-700);
  transition: background var(--t-fast);
  margin-bottom: 2px;
}
.mod-lesson-item:hover { background: var(--gray-50); }
.mod-lesson-item:hover { background: color-mix(in srgb, var(--module-surface, var(--gray-50)) 74%, white); }
.mod-lesson-item.mod-lesson-done { color: var(--success-dark); }
.mod-lesson-icon { font-size: .9rem; flex-shrink: 0; }
.mod-lesson-title { flex: 1; font-weight: 500; }
.mod-lesson-dur {
  font-size: .68rem;
  color: var(--gray-400);
  font-weight: 500;
  flex-shrink: 0;
}
.mod-lesson-badge {
  font-size: .65rem;
  font-weight: 700;
  color: var(--success-dark);
  background: var(--success-bg);
  padding: 1px 6px;
  border-radius: var(--r-full);
  border: 1px solid var(--success);
  flex-shrink: 0;
}

/* ---- Module footer buttons ---- */
.btn-mod-preview {
  font-size: .72rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--r-full);
  background: white;
  color: var(--module-accent, var(--primary));
  border: 1.5px solid color-mix(in srgb, var(--module-accent, var(--primary)) 24%, transparent);
  cursor: pointer;
  transition: all var(--t-fast);
  white-space: nowrap;
}
.btn-mod-preview:hover { background: color-mix(in srgb, var(--module-surface, var(--primary-bg)) 70%, white); }
.btn-mod-start {
  font-size: .72rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: var(--r-full);
  background: var(--module-gradient, var(--level1-grad));
  color: white;
  text-decoration: none;
  transition: opacity var(--t-fast);
  white-space: nowrap;
}
.btn-mod-start:hover { opacity: .85; }

/* ---- Module detail modal ---- */
.mod-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  opacity: 0;
  transition: opacity .2s;
}
.mod-modal-overlay.show { opacity: 1; }
.mod-modal {
  background: white;
  border-radius: var(--r-2xl);
  max-width: 560px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 25px 50px rgba(0,0,0,.25);
  transform: translateY(20px);
  transition: transform .2s;
}
.mod-modal-overlay.show .mod-modal { transform: translateY(0); }
.mod-modal-header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-6);
  border-bottom: 1px solid color-mix(in srgb, var(--module-accent, var(--gray-300)) 12%, transparent);
  position: relative;
  background: color-mix(in srgb, var(--module-surface, var(--gray-50)) 68%, white);
}
.mod-modal-icon { font-size: 2.5rem; flex-shrink: 0; }
.mod-modal-header h2 { font-size: var(--text-xl); margin: 0 0 4px; }
.mod-modal-close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  background: var(--gray-100);
  border: none;
  border-radius: var(--r-full);
  padding: 4px 12px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--gray-600);
  cursor: pointer;
}
.mod-modal-close:hover { background: var(--gray-200); }
.mod-modal-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid color-mix(in srgb, var(--module-accent, var(--gray-300)) 10%, transparent);
}
.mod-stat-box { text-align: center; }
.mod-stat-val { font-size: var(--text-lg); font-weight: 800; color: var(--gray-900); }
.mod-stat-lbl { font-size: .68rem; color: var(--gray-500); font-weight: 500; margin-top: 2px; }
.mod-modal-prog-wrap { padding: var(--sp-4) var(--sp-6); }
.mod-modal-lessons {
  list-style: none;
  margin: 0;
  padding: var(--sp-2) var(--sp-4);
}
.mod-modal-lesson {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: background var(--t-fast);
  border-bottom: 1px solid var(--gray-50);
}
.mod-modal-lesson:hover { background: var(--gray-50); }
.mod-modal-lesson.done { opacity: .75; }
.mod-modal-les-icon { font-size: 1rem; flex-shrink: 0; }
.mod-modal-les-title { flex: 1; font-size: var(--text-sm); font-weight: 600; color: var(--gray-800); }
.mod-modal-les-meta { font-size: .68rem; color: var(--gray-400); white-space: nowrap; }
.mod-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--gray-100);
}

/* ---- Badge Showcase ---- */
.badge-showcase {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: var(--r-2xl);
  padding: var(--sp-8);
}
.badge-showcase-header {
  text-align: center;
  margin-bottom: var(--sp-6);
}
.badge-showcase-header h2 { font-size: var(--text-2xl); margin-bottom: var(--sp-2); }
.badge-showcase-header p { color: var(--gray-500); }
.badge-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-4);
}
.badge-card {
  background: var(--gray-50);
  border: 2px solid var(--gray-200);
  border-radius: var(--r-xl);
  padding: var(--sp-4);
  text-align: center;
  transition: all var(--t-base);
}
.badge-card-earned {
  background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
  border-color: var(--warning);
  box-shadow: 0 4px 12px rgba(245,158,11,.15);
}
.badge-card-locked {
  opacity: .55;
  filter: grayscale(.6);
}
.badge-card-icon { font-size: 2.5rem; margin-bottom: var(--sp-2); }
.badge-card-name { font-size: .85rem; font-weight: 700; color: var(--gray-900); margin-bottom: var(--sp-1); }
.badge-card-desc { font-size: .72rem; color: var(--gray-500); margin-bottom: var(--sp-2); line-height: 1.4; }
.badge-card-status {
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: var(--r-full);
  display: inline-block;
}
.badge-card-earned .badge-card-status {
  background: var(--warning);
  color: white;
}
.badge-card-locked .badge-card-status {
  background: var(--gray-200);
  color: var(--gray-500);
}

/* ============================================================
   AŞAMA 1 — YENİ BİLEŞEN STİLLERİ
   game-engine, grade seçici, bit-flip, sort bars, kazanım kutusu
   ============================================================ */

/* ---- KADEME SEÇİCİ ---- */
.grade-selector {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
  margin: var(--sp-6) 0;
}
.grade-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6);
  border: 2px solid var(--gray-200);
  border-radius: var(--r-2xl);
  background: var(--white);
  cursor: pointer;
  transition: all var(--t-base);
  min-width: 140px;
  text-align: center;
}
.grade-tab:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.grade-tab.active {
  border-color: var(--primary);
  background: var(--primary-bg);
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
.grade-tab-icon { font-size: 2rem; }
.grade-tab-name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--gray-800);
}
.grade-tab-desc {
  font-size: var(--text-xs);
  color: var(--gray-500);
}
.grade-tab.active .grade-tab-name { color: var(--primary); }
.grade-selector-shell .grade-tab {
  background: rgba(255,255,255,0.94);
}

/* Kademe renk varyantları */
.grade-tab[data-grade="ortaokul"].active  { border-color: var(--success); background: var(--success-bg); }
.grade-tab[data-grade="lise"].active      { border-color: var(--primary); background: var(--primary-bg); }
.grade-tab[data-grade="universite"].active{ border-color: var(--secondary); background: #F5F3FF; }
.grade-tab[data-grade="ortaokul"]:hover   { border-color: var(--success); }
.grade-tab[data-grade="lise"]:hover       { border-color: var(--primary); }
.grade-tab[data-grade="universite"]:hover { border-color: var(--secondary); }

/* Kademe rozeti */
.grade-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 700;
}
.grade-badge-ortaokul  { background: var(--success-bg);  color: var(--success-dark); }
.grade-badge-lise      { background: var(--primary-bg);  color: var(--primary-dark); }
.grade-badge-universite{ background: #F5F3FF;             color: #5B21B6;             }
.grade-badge-all       { background: var(--gray-100);    color: var(--gray-600);     }

/* ---- OYUN GENEL ALTYAPISI ---- */
.game-container {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-2xl);
  padding: var(--sp-6);
  position: relative;
  overflow: hidden;
}
.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--gray-100);
}
.game-title {
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.game-scoreboard {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--text-sm);
  font-weight: 700;
}
.gsb-score   { color: var(--success); }
.gsb-mistakes{ color: var(--error); }
.gsb-time    { color: var(--warning-dark); }

/* Geri bildirim bandı */
.game-feedback {
  position: absolute;
  top: var(--sp-4);
  left: 50%;
  transform: translateX(-50%) translateY(-120%);
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
  transition: transform var(--t-fast), opacity var(--t-fast);
  opacity: 0;
  z-index: 10;
  pointer-events: none;
}
.game-feedback.feedback-active {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.feedback-correct { background: var(--success);      color: var(--white); }
.feedback-wrong   { background: var(--error);         color: var(--white); }
.feedback-hint    { background: var(--warning);       color: var(--white); }
.feedback-info    { background: var(--primary);       color: var(--white); }

/* Oyun sonuç overlay */
.game-result-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  border-radius: var(--r-2xl);
  animation: fadeIn var(--t-slow) ease;
}
.game-result-box {
  background: var(--white);
  border-radius: var(--r-2xl);
  padding: var(--sp-8) var(--sp-10);
  text-align: center;
  box-shadow: var(--shadow-xl);
  max-width: 340px;
  width: 90%;
}
.game-result-icon  { font-size: 3.5rem; margin-bottom: var(--sp-3); }
.game-result-title { font-size: var(--text-xl); font-weight: 800; color: var(--gray-900); margin-bottom: var(--sp-4); }
.game-result-stats {
  display: flex;
  justify-content: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.grs-item { display: flex; flex-direction: column; gap: 2px; }
.grs-val  { font-size: var(--text-2xl); font-weight: 900; color: var(--primary); }
.grs-lbl  { font-size: var(--text-xs); color: var(--gray-500); font-weight: 600; }
.game-result-actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }

/* ---- İKİLİ (BIT-FLIP) OYUN BİLEŞENİ ---- */
.bit-display {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
  flex-wrap: wrap;
  margin: var(--sp-5) 0;
}
.bit-group {
  display: flex;
  gap: 4px;
}
.bit-group + .bit-group {
  margin-left: var(--sp-2);
  padding-left: var(--sp-2);
  border-left: 2px dashed var(--gray-200);
}
.bit-btn {
  width: 52px;
  height: 64px;
  border: 2px solid var(--gray-200);
  border-radius: var(--r-lg);
  background: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--t-base);
  font-family: var(--font-mono);
  position: relative;
  overflow: hidden;
}
.bit-btn:hover {
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.bit-btn.bit-on {
  background: var(--primary);
  border-color: var(--primary-dark);
  color: var(--white);
  box-shadow: 0 4px 12px rgba(99,102,241,.35);
}
.bit-btn.bit-off {
  background: var(--gray-50);
  color: var(--gray-400);
}
.bit-val {
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1;
}
.bit-weight {
  font-size: 0.6rem;
  font-weight: 600;
  color: inherit;
  opacity: 0.7;
  margin-top: 2px;
}
.bit-btn.bit-on .bit-weight { color: rgba(255,255,255,.8); }
.bit-btn:active { transform: scale(0.94); }

/* Flash animasyonu tıklamada */
.bit-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: white;
  opacity: 0;
  border-radius: inherit;
  transition: opacity 0.1s;
}
.bit-btn:active::after { opacity: 0.3; }

/* Decimal sonuç göstergesi */
.binary-result {
  text-align: center;
  margin: var(--sp-4) 0;
  padding: var(--sp-4);
  background: var(--gray-50);
  border-radius: var(--r-xl);
  border: 1px solid var(--gray-200);
}
.binary-result-label {
  font-size: var(--text-sm);
  color: var(--gray-500);
  font-weight: 600;
  margin-bottom: var(--sp-1);
}
.binary-result-value {
  font-size: var(--text-4xl);
  font-weight: 900;
  color: var(--primary);
  font-family: var(--font-mono);
  transition: color var(--t-base);
}
.binary-result-hex {
  font-size: var(--text-sm);
  color: var(--gray-400);
  font-family: var(--font-mono);
  margin-top: 2px;
}

/* ---- SIRA LAMA GÖRSEL BİLEŞENİ (SORT BARS) ---- */
.sort-visualizer {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 200px;
  padding: var(--sp-3) var(--sp-4) 0;
  background: var(--gray-50);
  border-radius: var(--r-xl);
  border: 1px solid var(--gray-200);
  overflow: hidden;
  position: relative;
}
.sort-bar {
  flex: 1;
  min-width: 8px;
  max-width: 48px;
  border-radius: 4px 4px 0 0;
  background: var(--primary-light);
  transition: height var(--t-base), background-color var(--t-fast), transform var(--t-fast);
  position: relative;
  cursor: default;
}
.sort-bar-val {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--gray-500);
  white-space: nowrap;
}

/* Sıralama durumları */
.sort-bar.comparing {
  background: var(--warning) !important;
  transform: scaleX(1.15);
  z-index: 2;
}
.sort-bar.swapping {
  background: var(--error) !important;
  transform: scaleX(1.2) scaleY(1.05);
  z-index: 3;
}
.sort-bar.sorted {
  background: var(--success) !important;
}
.sort-bar.pivot {
  background: var(--secondary) !important;
  box-shadow: 0 0 0 2px var(--secondary);
}
.sort-bar.minimum {
  background: #F59E0B !important;
}

/* Sıralama kontrolleri */
.sort-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin: var(--sp-4) 0;
}
.sort-algo-select {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-lg);
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--font-sans);
  background: var(--white);
  cursor: pointer;
  color: var(--gray-800);
}
.sort-speed-range {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: var(--gray-200);
  outline: none;
  width: 100px;
}
.sort-speed-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
}
.sort-stat-box {
  display: flex;
  gap: var(--sp-4);
  font-size: var(--text-sm);
  color: var(--gray-600);
}
.sort-stat { display: flex; align-items: center; gap: 4px; }
.sort-stat strong { color: var(--gray-900); font-family: var(--font-mono); }

/* ---- KAZANIM KUTUSU ---- */
.kazanim-box {
  background: linear-gradient(135deg, #F0FDF4, #ECFDF5);
  border: 1px solid var(--success);
  border-radius: var(--r-xl);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-4) 0;
}
.kazanim-box-title {
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--success-dark);
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.kazanim-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.kazanim-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--gray-700);
  line-height: 1.5;
}
.kazanim-item-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--gray-300);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 10px;
  margin-top: 1px;
  transition: all var(--t-base);
}
.kazanim-item.done .kazanim-item-check {
  background: var(--success);
  border-color: var(--success);
  color: white;
}

/* ---- YENİ SEVİYE CSS DEĞİŞKENLERİ (11-21) ---- */
:root {
  --level11:        #0D9488;
  --level11-light:  #F0FDFA;
  --level11-grad:   linear-gradient(135deg, #0D9488, #2DD4BF);
  --level12:        #7C3AED;
  --level12-light:  #F5F3FF;
  --level12-grad:   linear-gradient(135deg, #7C3AED, #A78BFA);
  --level13:        #059669;
  --level13-light:  #ECFDF5;
  --level13-grad:   linear-gradient(135deg, #059669, #34D399);
  --level14:        #D97706;
  --level14-light:  #FFFBEB;
  --level14-grad:   linear-gradient(135deg, #D97706, #FBBF24);
  --level15:        #DC2626;
  --level15-light:  #FEF2F2;
  --level15-grad:   linear-gradient(135deg, #DC2626, #F87171);
  --level16:        #0891B2;
  --level16-light:  #ECFEFF;
  --level16-grad:   linear-gradient(135deg, #0891B2, #38BDF8);
  --level17:        #7C3AED;
  --level17-light:  #F5F3FF;
  --level17-grad:   linear-gradient(135deg, #6D28D9, #A78BFA);
  --level18:        #BE185D;
  --level18-light:  #FDF2F8;
  --level18-grad:   linear-gradient(135deg, #BE185D, #F472B6);
  --level19:        #0EA5E9;
  --level19-light:  #F0F9FF;
  --level19-grad:   linear-gradient(135deg, #0EA5E9, #7DD3FC);
  --level20:        #EA580C;
  --level20-light:  #FFF7ED;
  --level20-grad:   linear-gradient(135deg, #EA580C, #FB923C);
  --level21:        #1D4ED8;
  --level21-light:  #EFF6FF;
  --level21-grad:   linear-gradient(135deg, #1D4ED8, #60A5FA);
}

/* ---- DÖNGÜ İZLEME TABLOSU ---- */
.loop-trace-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  margin: var(--sp-4) 0;
}
.loop-trace-table th {
  background: var(--gray-100);
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  font-weight: 700;
  color: var(--gray-700);
  border: 1px solid var(--gray-200);
}
.loop-trace-table td {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--gray-200);
  color: var(--gray-800);
  transition: background var(--t-fast);
}
.loop-trace-table tr.active-row td { background: #FEF3C7; }
.loop-trace-table tr.done-row td   { background: var(--success-bg); color: var(--success-dark); }

/* ---- ARAMA GÖRSEL BİLEŞENİ ---- */
.search-array {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
  margin: var(--sp-4) 0;
}
.search-cell {
  width: 48px;
  height: 48px;
  border: 2px solid var(--gray-200);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--text-base);
  font-family: var(--font-mono);
  background: var(--white);
  color: var(--gray-700);
  transition: all var(--t-base);
  position: relative;
}
.search-cell.scanning  { background: #FEF3C7; border-color: var(--warning); }
.search-cell.found     { background: var(--success-bg); border-color: var(--success); color: var(--success-dark); transform: scale(1.15); }
.search-cell.eliminated{ background: var(--error-bg); border-color: var(--error); opacity: 0.45; }
.search-cell.mid       { background: var(--primary-bg); border-color: var(--primary); color: var(--primary); }

/* ---- KARAR AĞACI BİLEŞENİ ---- */
.decision-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-xl);
  font-size: var(--text-sm);
  font-weight: 700;
  border: 2px solid;
  cursor: pointer;
  transition: all var(--t-base);
  min-width: 120px;
  text-align: center;
}
.decision-node-condition {
  background: #FEF9C3;
  border-color: var(--warning);
  color: var(--warning-dark);
  transform: rotate(-1deg);
}
.decision-node-action {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success-dark);
}
.decision-node-start {
  background: var(--primary-bg);
  border-color: var(--primary);
  color: var(--primary-dark);
  border-radius: 50px;
}
.decision-node.active {
  box-shadow: 0 0 0 4px rgba(99,102,241,.25);
  transform: scale(1.05);
}

/* ---- KONU HIZLI ERİŞİM KARTLARI ---- */
.topic-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-6) 0;
}
.topic-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-4);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-2xl);
  background: var(--white);
  cursor: pointer;
  transition: all var(--t-base);
  text-align: center;
  text-decoration: none;
}
.topic-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.topic-card-icon   { font-size: 2.2rem; }
.topic-card-name   { font-size: var(--text-sm); font-weight: 700; color: var(--gray-800); line-height: 1.3; }
.topic-card-grade  { font-size: var(--text-xs); color: var(--gray-400); }

/* ---- ÖĞRETMEN MODU TEMA ---- */
.teacher-mode {
  --primary: #1D4ED8;
  --primary-dark: #1E40AF;
  --primary-light: #60A5FA;
  --primary-bg: #EFF6FF;
}
.teacher-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  background: linear-gradient(135deg, #1D4ED8, #3B82F6);
  color: white;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---- TİMELINE (Zaman Çizelgesi) ---- */
.timeline-container {
  position: relative;
  padding: var(--sp-4) 0 var(--sp-4) var(--sp-8);
  margin: var(--sp-6) 0;
}
.timeline-container::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--primary-light), var(--primary), var(--primary-light));
  opacity: 0.4;
}
.timeline-item {
  position: relative;
  margin-bottom: var(--sp-8);
  padding-left: var(--sp-6);
}
.timeline-item:last-child { margin-bottom: 0; }
.timeline-dot {
  position: absolute;
  left: calc(-1 * var(--sp-8) - 8px);
  top: 4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: var(--white);
  border: 2px solid var(--primary-light);
  box-shadow: var(--shadow-sm);
  z-index: 1;
}
.timeline-year {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 10px;
  border-radius: var(--r-full);
  background: var(--primary-bg);
  color: var(--primary-dark);
  margin-bottom: var(--sp-2);
}
.timeline-content {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--r-xl);
  padding: var(--sp-4) var(--sp-5);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-base);
}
.timeline-content:hover { box-shadow: var(--shadow-md); }
.timeline-title {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--gray-800);
  margin-bottom: var(--sp-1);
}
.timeline-desc {
  font-size: var(--text-sm);
  color: var(--gray-600);
  line-height: 1.6;
}
.timeline-detail {
  margin-top: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--gray-500);
  font-style: italic;
  border-top: 1px solid var(--gray-100);
  padding-top: var(--sp-2);
}

/* ---- ALGORİTMA KARŞILAŞTIRMA ---- */
.algo-compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-6) 0;
}
.algo-compare-col {
  border: 1px solid var(--gray-200);
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.algo-compare-col:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.algo-compare-col.algo-compare-best {
  border-color: var(--success);
  border-width: 2px;
  box-shadow: 0 0 0 3px rgba(16,185,129,.12), var(--shadow-md);
}
.algo-compare-col.algo-compare-best .algo-compare-header {
  background: linear-gradient(135deg, #059669, #10B981);
}
.algo-compare-header {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: white;
  padding: var(--sp-3) var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.algo-compare-name {
  font-weight: 800;
  font-size: var(--text-base);
}
.algo-compare-badge {
  font-size: var(--text-xs);
  background: rgba(255,255,255,.25);
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-weight: 700;
}
.algo-compare-best-tag {
  display: block;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--success-dark);
  background: var(--success-bg);
  padding: 4px;
  letter-spacing: 0.05em;
}
.algo-compare-steps {
  padding: var(--sp-4) var(--sp-5);
}
.algo-step {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--gray-100);
  font-size: var(--text-sm);
  color: var(--gray-700);
  line-height: 1.5;
}
.algo-step:last-child { border-bottom: none; }
.algo-step-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary-bg);
  color: var(--primary-dark);
  font-size: var(--text-xs);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.algo-compare-footer {
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--gray-100);
  background: var(--gray-50);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--gray-500);
}
.algo-complexity {
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--primary-dark);
  background: var(--primary-bg);
  padding: 2px 8px;
  border-radius: var(--r-md);
}

/* ---- GENEL YARDIMCI ANİMASYON ---- */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,.4); }
  50%       { box-shadow: 0 0 0 8px rgba(99,102,241,0); }
}
.animate-fadeIn  { animation: fadeIn var(--t-slow) ease; }
.animate-slideUp { animation: slideUp var(--t-slow) ease; }
.animate-pulse-glow { animation: pulse-glow 2s infinite; }

/* Responsive */
@media (max-width: 640px) {
  .grade-selector    { gap: var(--sp-2); }
  .grade-tab         { min-width: 100px; padding: var(--sp-3) var(--sp-4); }
  .bit-btn           { width: 40px; height: 52px; }
  .sort-visualizer   { height: 150px; }
  .search-cell       { width: 38px; height: 38px; font-size: var(--text-sm); }
  .topic-cards-grid  { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .timeline-container { padding-left: var(--sp-6); }
  .timeline-dot      { width: 26px; height: 26px; font-size: 0.8rem; }
  .algo-compare-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   KARAR AĞACI + ÖLÇÜM OYUNLARI
   ============================================================ */

.embedded-game-shell {
  border: 1px solid var(--gray-200);
  background: white;
  border-radius: var(--r-2xl);
  padding: var(--sp-4);
}

.embedded-game-toolbar {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

.embedded-game-note {
  font-size: var(--text-sm);
  color: var(--gray-600);
  font-weight: 600;
}

.dt-tab-btn {
  border: 1px solid var(--gray-200);
  background: var(--gray-50);
  color: var(--gray-700);
  border-radius: var(--r-full);
  padding: 10px 14px;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--t-fast);
}

.dt-tab-btn.active,
.dt-tab-btn:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.dt-game {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--sp-4);
}

.dt-input-panel,
.dt-tree-panel,
.dt-quiz-area,
.dt-result-area,
.mc-game {
  border: 1px solid var(--gray-200);
  border-radius: var(--r-2xl);
  background: var(--gray-50);
}

.dt-input-panel,
.dt-tree-panel,
.dt-quiz-area,
.dt-result-area {
  padding: var(--sp-4);
}

.dt-input-title,
.dt-tree-title,
.dt-quiz-prompt {
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--gray-800);
  margin-bottom: var(--sp-3);
}

.dt-input-field {
  margin-bottom: var(--sp-4);
}

.dt-input-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: var(--sp-2);
  color: var(--gray-700);
}

.dt-range {
  width: 100%;
  accent-color: var(--primary);
}

.dt-range-val {
  display: inline-block;
  margin-top: 8px;
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--primary);
}

.dt-bool-row {
  display: flex;
  gap: var(--sp-2);
}

.dt-bool-btn {
  flex: 1;
  border: 1px solid var(--gray-200);
  background: white;
  color: var(--gray-700);
  border-radius: var(--r-xl);
  padding: 10px 12px;
  font-weight: 700;
  cursor: pointer;
}

.dt-bool-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.dt-tree-wrap {
  overflow-x: auto;
  padding-bottom: var(--sp-2);
}

.dt-subtree {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}

.dt-branches {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sp-5);
  width: 100%;
}

.dt-branch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

.dt-branch-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--gray-400);
}

.dt-branch-label.active-label {
  color: var(--primary);
}

.dt-branch-line {
  width: 2px;
  min-height: 18px;
  background: var(--gray-300);
  border-radius: 999px;
}

.dt-branch-line.active-line {
  background: var(--primary);
}

.dt-node {
  min-width: 150px;
  max-width: 220px;
  text-align: center;
  border-radius: var(--r-2xl);
  border: 2px solid var(--gray-200);
  background: white;
  padding: var(--sp-3);
  box-shadow: var(--shadow-sm);
}

.dt-cond-node {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dt-cond-diamond {
  font-size: 1.4rem;
  color: var(--warning-dark);
}

.dt-cond-text {
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--gray-800);
}

.dt-result-node {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-color: color-mix(in srgb, var(--result-color) 40%, white);
}

.dt-result-icon {
  font-size: 1.8rem;
}

.dt-result-text {
  font-size: var(--text-sm);
  font-weight: 700;
}

.dt-node.active-path {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

.dt-node.active-result {
  border-color: var(--success);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.14);
}

.dt-result-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  border: 2px solid;
  border-radius: var(--r-2xl);
  padding: var(--sp-4);
}

.dt-quiz-area {
  margin-top: var(--sp-4);
}

.dt-quiz-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
}

.dt-quiz-opt {
  border: 1px solid var(--gray-200);
  background: white;
  border-radius: var(--r-xl);
  padding: 12px 14px;
  text-align: left;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--gray-700);
  cursor: pointer;
}

.dt-quiz-opt.selected-opt {
  border-color: var(--primary);
  background: var(--primary-bg);
}

.dt-quiz-opt.correct-opt {
  border-color: var(--success);
  background: var(--success-bg);
  color: var(--success-dark);
}

.dt-quiz-opt.wrong-opt {
  border-color: var(--error);
  background: var(--error-bg);
  color: var(--error-dark);
}

.mc-game {
  padding: var(--sp-5);
}

.mc-header,
.mc-sentence {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.mc-header {
  margin-bottom: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--gray-700);
  font-weight: 700;
}

.mc-prompt {
  color: var(--gray-600);
  margin-bottom: var(--sp-4);
}

.mc-objects {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--sp-4);
  align-items: center;
}

.mc-obj {
  background: white;
  border-radius: var(--r-2xl);
  border: 1px solid var(--gray-200);
  padding: var(--sp-4);
  text-align: center;
}

.mc-obj-icon {
  font-size: 2rem;
  margin-bottom: var(--sp-2);
}

.mc-obj-name,
.mc-measure,
.mc-term {
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--gray-800);
}

.mc-ruler-wrap {
  height: 14px;
  background: var(--gray-100);
  border-radius: 999px;
  overflow: hidden;
  margin: var(--sp-3) 0;
}

.mc-ruler-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 999px;
}

.mc-versus {
  font-size: 2rem;
  font-weight: 900;
  color: var(--warning-dark);
}

.mc-ops {
  display: flex;
  gap: var(--sp-2);
}

.mc-op-btn {
  border: 1px solid var(--gray-200);
  background: white;
  min-width: 52px;
  border-radius: var(--r-xl);
  padding: 12px;
  font-size: 1.1rem;
  font-weight: 900;
  cursor: pointer;
}

.mc-op-btn.correct-op {
  border-color: var(--success);
  background: var(--success-bg);
  color: var(--success-dark);
}

.mc-op-btn.wrong-op {
  border-color: var(--error);
  background: var(--error-bg);
  color: var(--error-dark);
}

.mc-feedback {
  margin-top: var(--sp-4);
  border-radius: var(--r-xl);
  padding: 12px 14px;
  font-size: var(--text-sm);
  font-weight: 700;
}

.mc-feedback.correct {
  background: var(--success-bg);
  color: var(--success-dark);
}

.mc-feedback.wrong {
  background: var(--error-bg);
  color: var(--error-dark);
}

@media (max-width: 900px) {
  .dt-game {
    grid-template-columns: 1fr;
  }

  .mc-objects {
    grid-template-columns: 1fr;
  }

  .mc-versus {
    transform: rotate(90deg);
    margin: -8px auto;
  }
}

.loopanim-controls,
.tourgen-controls {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  align-items: end;
  margin-bottom: var(--sp-3);
}

.loopanim-controls label,
.tourgen-controls label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--gray-700);
}

.loopanim-controls input,
.tourgen-controls input {
  border: 1px solid var(--gray-200);
  border-radius: var(--r-xl);
  padding: 10px 12px;
  min-width: 84px;
}

.loopanim-status {
  border-radius: var(--r-xl);
  background: var(--gray-50);
  color: var(--gray-700);
  padding: 12px 14px;
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: var(--sp-3);
}

.loopanim-status.success {
  background: var(--success-bg);
  color: var(--success-dark);
}

.loopanim-status.warning {
  background: var(--error-bg);
  color: var(--error-dark);
}

.loopanim-track {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.loopanim-cell {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-xl);
  background: var(--primary-bg);
  color: var(--primary-dark);
  font-weight: 800;
  animation: fadeIn .35s ease both;
}

.nested-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-2);
}

.nested-cell {
  min-height: 56px;
  border: 1px solid var(--gray-200);
  border-radius: var(--r-xl);
  background: white;
  color: var(--gray-700);
  font-weight: 800;
  cursor: default;
  transition: all var(--t-fast);
}

.nested-cell.active {
  background: var(--secondary);
  color: white;
  border-color: var(--secondary);
  transform: scale(1.02);
}

.tourgen-list {
  display: grid;
  gap: var(--sp-2);
}

.tourgen-row {
  border: 1px solid var(--gray-200);
  background: white;
  border-radius: var(--r-xl);
  padding: 12px 14px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--gray-700);
}

/* ============================================================
   EK GOMULU OYUNLAR
   ============================================================ */

.embedded-game-shell .btn-sm {
  padding: 8px 12px;
  font-size: var(--text-sm);
}

.binary-game,
.vg-game,
.do-game,
.ascii-game-wrap,
.tlc-game {
  border: 1px solid var(--gray-200);
  border-radius: var(--r-2xl);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
  padding: var(--sp-4);
}

.bf-header,
.vg-header,
.do-top-bar,
.tlc-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.bf-mode-badge,
.vg-score-badge,
.do-score-badge,
.do-criterion-badge,
.tlc-round,
.tlc-timer-wrap,
.tlc-score-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--r-full);
  background: var(--gray-100);
  color: var(--gray-800);
  font-size: var(--text-sm);
  font-weight: 700;
}

.bf-target-box,
.bf-result-panel,
.bf-explanation,
.vg-command-box,
.ag-decoded-box,
.do-instructions {
  border: 1px solid var(--gray-200);
  background: white;
  border-radius: var(--r-xl);
  padding: var(--sp-4);
}

.bf-target-box {
  display: grid;
  gap: 6px;
  margin-bottom: var(--sp-4);
}

.bf-target-label,
.bf-result-label,
.vg-cmd-label,
.ag-decoded-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--gray-600);
}

.bf-target-num,
.bf-result-binary,
.bf-result-decimal,
.bf-result-hex {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--gray-900);
}

.bf-target-hint,
.bf-progress-row,
.ag-desc,
.do-instructions,
.tlc-prompt {
  font-size: var(--text-sm);
  color: var(--gray-600);
}

.bf-progress-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: var(--sp-4);
}

.bf-board {
  display: grid;
  gap: 10px;
  margin-bottom: var(--sp-4);
}

.bf-weights-row,
.bf-bits-row {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}

.bf-weight {
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--gray-500);
}

.bf-bit {
  min-height: 56px;
  border-radius: var(--r-xl);
  border: 1px solid var(--gray-200);
  font-size: var(--text-xl);
  font-weight: 900;
  cursor: pointer;
  transition: all var(--t-fast);
}

.bf-bit.on {
  background: linear-gradient(135deg, #6366F1, #4F46E5);
  color: white;
  border-color: #4F46E5;
  box-shadow: 0 12px 24px rgba(79, 70, 229, 0.2);
}

.bf-bit.off {
  background: white;
  color: var(--gray-600);
}

.bf-bit.flash {
  transform: translateY(-2px) scale(1.03);
}

.bf-result-panel {
  display: grid;
  gap: 10px;
  margin-bottom: var(--sp-4);
}

.bf-result-row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  align-items: center;
}

.bf-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.bf-feedback,
.vg-feedback,
.tlc-feedback,
.do-feedback {
  margin-top: var(--sp-4);
  padding: 12px 14px;
  border-radius: var(--r-xl);
  font-weight: 700;
}

.bf-feedback.correct,
.vg-feedback.correct,
.tlc-feedback.correct,
.do-feedback.correct {
  background: var(--success-bg);
  color: var(--success-dark);
  border: 1px solid var(--success);
}

.bf-feedback.wrong,
.vg-feedback.wrong,
.tlc-feedback.wrong,
.do-feedback.partial {
  background: var(--warning-bg);
  color: var(--warning-dark);
  border: 1px solid var(--warning);
}

.bf-finish-overlay,
.vg-finish,
.tlc-finish {
  margin-top: var(--sp-4);
}

.bf-finish-card,
.vg-finish-card,
.tlc-finish-card {
  border: 1px solid var(--gray-200);
  background: white;
  border-radius: var(--r-2xl);
  padding: var(--sp-6);
  text-align: center;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

.vg-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.vg-box {
  border: 1px solid var(--gray-200);
  border-radius: var(--r-xl);
  background: white;
  padding: var(--sp-3);
  transition: all var(--t-fast);
}

.vg-box.targeted {
  border-color: #6366F1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

.vg-box.correct-box {
  border-color: var(--success);
  background: var(--success-bg);
}

.vg-box.wrong-box {
  border-color: var(--warning);
  background: var(--warning-bg);
}

.vg-box-label,
.vg-box-type {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--gray-500);
}

.vg-box-value {
  margin: 8px 0;
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--gray-900);
}

.vg-box-value.updated {
  color: #4F46E5;
}

.vg-command-box {
  margin-bottom: var(--sp-3);
}

.vg-cmd-code {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gray-900);
}

.kw-cond { color: #7C3AED; font-weight: 800; }
.kw-io { color: #0EA5E9; font-weight: 800; }
.kw-op { color: #EA580C; font-weight: 800; }

.vg-answer-row {
  display: grid;
  gap: 10px;
}

.vg-answer-label {
  font-size: var(--text-sm);
  color: var(--gray-700);
  font-weight: 600;
}

.vg-answer-input,
.ag-input {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--gray-200);
  border-radius: var(--r-xl);
  padding: 12px 14px;
  font-size: var(--text-base);
  background: white;
}

.do-top-bar,
.do-action-row {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  align-items: center;
}

.do-card-pool,
.do-shelf-slots {
  min-height: 76px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px;
  border: 1px dashed var(--gray-300);
  border-radius: var(--r-xl);
  background: rgba(255,255,255,0.82);
}

.do-card-pool.drag-over,
.do-shelf.drag-over .do-shelf-slots {
  border-color: #6366F1;
  background: rgba(99,102,241,0.06);
}

.do-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: var(--r-full);
  background: white;
  border: 1px solid var(--gray-200);
  font-weight: 700;
  color: var(--gray-800);
  cursor: grab;
  user-select: none;
}

.do-card.dragging { opacity: 0.55; }
.do-card.correct-card { background: var(--success-bg); border-color: var(--success); color: var(--success-dark); }
.do-card.wrong-card { background: var(--warning-bg); border-color: var(--warning); color: var(--warning-dark); }
.do-card.not-placed { border-color: var(--gray-300); background: var(--gray-50); }

.do-shelves {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
  margin: var(--sp-4) 0;
}

.do-shelf {
  border: 1px solid var(--gray-200);
  border-radius: var(--r-2xl);
  padding: var(--sp-3);
}

.do-shelf-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  font-weight: 800;
  color: var(--gray-800);
}

.do-shelf-count {
  margin-left: auto;
  background: rgba(255,255,255,0.9);
  border-radius: var(--r-full);
  padding: 4px 10px;
  font-size: var(--text-xs);
}

.do-success-banner {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  margin-top: var(--sp-4);
  border: 1px solid var(--success);
  background: var(--success-bg);
  color: var(--success-dark);
  border-radius: var(--r-2xl);
  padding: var(--sp-4);
  font-weight: 700;
}

.ag-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--sp-4);
}

.ag-tab {
  border: 1px solid var(--gray-200);
  background: var(--gray-50);
  color: var(--gray-700);
  border-radius: var(--r-full);
  padding: 10px 14px;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}

.ag-tab.active {
  background: #4F46E5;
  color: white;
  border-color: #4F46E5;
}

.ag-input-row {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin: var(--sp-3) 0;
}

.ag-mono,
.bf-result-binary,
.vg-cmd-code {
  font-family: var(--font-mono);
}

.ag-char-grid,
.ag-name-result,
.tlc-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.ag-char-card,
.ag-name-card {
  border: 1px solid var(--gray-200);
  background: white;
  border-radius: var(--r-xl);
  padding: var(--sp-3);
  text-align: center;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.ag-char,
.ag-nc-char {
  font-size: var(--text-2xl);
  font-weight: 900;
  color: var(--gray-900);
}

.ag-decimal,
.ag-nc-code {
  color: var(--gray-500);
  font-weight: 700;
  margin: 6px 0;
}

.ag-binary,
.ag-nc-binary,
.tlc-bits-display {
  letter-spacing: 0.08em;
  font-size: 0.92rem;
  font-weight: 800;
}

.ag-copy-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
}

.ag-bit,
.tlc-bit {
  display: inline-flex;
  width: 32px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--gray-200);
  margin: 0 3px;
  background: white;
  font-weight: 900;
}

.ag-bit.one,
.tlc-bit.one {
  background: #E0E7FF;
  color: #4338CA;
  border-color: #A5B4FC;
}

.ag-bit.zero,
.tlc-bit.zero {
  background: #F8FAFC;
  color: var(--gray-500);
}

.tlc-question-area {
  display: grid;
  gap: var(--sp-4);
}

.tlc-bits-display {
  padding: var(--sp-4);
  border: 1px solid var(--gray-200);
  background: white;
  border-radius: var(--r-2xl);
  text-align: center;
}

.tlc-option {
  min-height: 48px;
  border-radius: var(--r-xl);
  border: 1px solid var(--gray-200);
  background: white;
  font-weight: 800;
  color: var(--gray-800);
  cursor: pointer;
  transition: all var(--t-fast);
}

.tlc-option:hover,
.bf-bit:hover,
.do-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}

.tlc-option.correct-opt {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success-dark);
}

.tlc-option.wrong-opt {
  background: var(--warning-bg);
  border-color: var(--warning);
  color: var(--warning-dark);
}

.do-card.shake {
  animation: do-shake 0.45s ease;
}

@keyframes do-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-3px); }
}

@media (max-width: 720px) {
  .bf-weights-row,
  .bf-bits-row {
    gap: 6px;
  }

  .bf-bit {
    min-height: 48px;
    font-size: var(--text-lg);
  }

  .bf-result-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .ag-char-grid,
  .ag-name-result,
  .tlc-options-grid,
  .do-shelves,
  .vg-boxes {
    grid-template-columns: 1fr;
  }
}