/* ===== JUSTICIA DIGITAL - Design System ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --navy-900: #0f2442;
  --navy-800: #1a365d;
  --navy-700: #1e3a5f;
  --navy-600: #2d4a7a;
  --blue-600: #2563eb;
  --blue-500: #3b82f6;
  --blue-400: #60a5fa;
  --blue-100: #dbeafe;
  --gold-500: #eab308;
  --gold-400: #facc15;
  --gold-300: #fde047;
  --purple-700: #6b21a8;
  --purple-600: #7c3aed;
  --purple-500: #a855f7;
  --purple-100: #f3e8ff;
  --green-600: #059669;
  --green-500: #22c55e;
  --green-100: #dcfce7;
  --red-500: #ef4444;
  --red-100: #fee2e2;
  --teal-600: #0891b2;
  --amber-500: #f59e0b;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  color: #1f2937; background: #f8fafc;
  line-height: 1.6; -webkit-font-smoothing: antialiased;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInLeft { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} }
@keyframes fadeInRight { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} }
@keyframes scaleIn { from{opacity:0;transform:scale(0.9)} to{opacity:1;transform:scale(1)} }
@keyframes slideUp { from{opacity:0;transform:translateY(60px)} to{opacity:1;transform:translateY(0)} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes pulse-ring { 0%{transform:scale(0.8);opacity:1} 100%{transform:scale(2);opacity:0} }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
@keyframes draw-line { from{stroke-dashoffset:1000} to{stroke-dashoffset:0} }
@keyframes rotate-slow { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes gradient-shift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes counter-pulse { 0%{transform:scale(1)} 50%{transform:scale(1.05)} 100%{transform:scale(1)} }

.fade-in { animation: fadeIn 0.5s ease-out both; }
[data-animate] { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
[data-animate].visible { opacity: 1; transform: translateY(0); }
[data-animate="fade-left"] { transform: translateX(-30px); }
[data-animate="fade-left"].visible { transform: translateX(0); }
[data-animate="fade-right"] { transform: translateX(30px); }
[data-animate="fade-right"].visible { transform: translateX(0); }
[data-animate="scale"] { transform: scale(0.9); }
[data-animate="scale"].visible { transform: scale(1); }

/* ===== GLOBAL PROGRESS BAR ===== */
#progress-bar-global {
  position:fixed;top:0;left:0;height:3px;z-index:100;
  background:linear-gradient(90deg,var(--blue-500),var(--gold-400),var(--purple-500));
  background-size:200% 100%;animation:gradient-shift 3s ease infinite;
  transition:width 0.6s cubic-bezier(0.4,0,0.2,1);
  box-shadow:0 0 8px rgba(59,130,246,0.5);
}

/* ===== HEADER ===== */
.main-header {
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  border-bottom:1px solid rgba(0,0,0,0.06);
  transition:box-shadow 0.3s ease;
}
.main-header.scrolled { box-shadow:0 4px 20px rgba(0,0,0,0.08); }
.header-inner {
  max-width:80rem;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:0.75rem 1.5rem;
}
.header-logo { display:flex;align-items:center;gap:0.75rem; }
.header-logo img { height:42px;width:auto; }
.header-title { font-size:0.85rem;font-weight:700;color:var(--navy-800);line-height:1.2; }
.header-subtitle { font-size:0.65rem;font-weight:400;color:#6b7280; }

/* ===== NAV TABS ===== */
.module-nav {
  position:sticky;top:56px;z-index:40;
  background:rgba(255,255,255,0.95);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.module-nav-inner {
  max-width:80rem;margin:0 auto;display:flex;gap:0;overflow-x:auto;
  scrollbar-width:none;
}
.module-nav-inner::-webkit-scrollbar { display:none; }
.nav-tab {
  flex-shrink:0;padding:0.85rem 1.5rem;
  font-size:0.8rem;font-weight:600;color:#6b7280;
  cursor:pointer;border-bottom:2px solid transparent;
  transition:all 0.2s ease;white-space:nowrap;
}
.nav-tab:hover { color:var(--blue-600);background:rgba(59,130,246,0.04); }
.nav-tab.active { color:var(--blue-600);border-bottom-color:var(--blue-600);background:rgba(59,130,246,0.04); }

/* ===== HERO ===== */
.hero-section {
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--navy-900) 0%,var(--navy-700) 50%,var(--blue-600) 100%);
  color:white;padding:5rem 1.5rem 4rem;
}
.hero-section::before {
  content:'';position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none;
}
.hero-inner { max-width:80rem;margin:0 auto;position:relative;z-index:1;text-align:center; }
.hero-badge {
  display:inline-flex;align-items:center;gap:0.5rem;
  background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);
  backdrop-filter:blur(8px);padding:0.4rem 1rem;border-radius:9999px;
  font-size:0.75rem;font-weight:500;color:rgba(255,255,255,0.9);
  margin-bottom:1.5rem;animation:fadeIn 0.6s ease both;
}
.hero-badge .badge-dot { width:6px;height:6px;border-radius:50%;background:var(--green-500);box-shadow:0 0 6px var(--green-500); }
.hero-title {
  font-size:clamp(2rem,5vw,3.5rem);font-weight:800;line-height:1.1;
  letter-spacing:-0.03em;margin-bottom:1rem;
  animation:fadeInUp 0.8s ease both 0.1s;
}
.hero-title .highlight {
  background:linear-gradient(90deg,var(--gold-400),var(--gold-300));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero-description {
  font-size:clamp(0.95rem,2vw,1.15rem);font-weight:400;color:rgba(255,255,255,0.8);
  max-width:48rem;margin:0 auto 2rem;line-height:1.7;
  animation:fadeInUp 0.8s ease both 0.2s;
}
.hero-stats {
  display:flex;justify-content:center;gap:2rem;flex-wrap:wrap;
  animation:fadeInUp 0.8s ease both 0.3s;
}
.hero-stat {
  text-align:center;background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);backdrop-filter:blur(8px);
  padding:1rem 1.5rem;border-radius:1rem;min-width:120px;
}
.hero-stat-number {
  font-size:1.8rem;font-weight:800;
  background:linear-gradient(135deg,var(--gold-400),white);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1;
}
.hero-stat-label { font-size:0.7rem;font-weight:500;color:rgba(255,255,255,0.6);margin-top:0.25rem;text-transform:uppercase;letter-spacing:0.05em; }
.hero-cta {
  display:inline-flex;align-items:center;gap:0.5rem;
  background:linear-gradient(135deg,var(--gold-500),var(--gold-400));
  color:var(--navy-900);font-weight:700;font-size:0.9rem;
  padding:0.85rem 2rem;border-radius:0.75rem;border:none;cursor:pointer;
  transition:all 0.3s ease;animation:fadeInUp 0.8s ease both 0.4s;
  box-shadow:0 4px 15px rgba(234,179,8,0.3);
}
.hero-cta:hover { transform:translateY(-2px);box-shadow:0 8px 25px rgba(234,179,8,0.4); }

/* ===== SECTIONS ===== */
.module-section { display:none;animation:fadeIn 0.4s ease; }
.module-section.active { display:block; }
.section-header { padding:3rem 1.5rem 2rem;max-width:80rem;margin:0 auto; }
.section-header h2 { font-size:2rem;font-weight:800;color:var(--navy-900);letter-spacing:-0.02em;line-height:1.2; }
.section-header p { font-size:1rem;color:#6b7280;margin-top:0.5rem;max-width:48rem; }
.content-area { max-width:80rem;margin:0 auto;padding:0 1.5rem 3rem; }

/* ===== CARDS ===== */
.card {
  background:white;border-radius:1rem;border:1px solid rgba(0,0,0,0.06);
  transition:all 0.3s ease;overflow:hidden;
}
.card:hover { transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,0.08); }
.card-body { padding:1.5rem; }
.card-accent { border-left:4px solid var(--blue-500); }
.card-accent-gold { border-left:4px solid var(--gold-500); }
.card-accent-purple { border-left:4px solid var(--purple-500); }
.card-accent-green { border-left:4px solid var(--green-600); }
.card-gradient {
  background:linear-gradient(135deg,var(--navy-900),var(--navy-700));
  color:white;border:none;
}
.card-gradient:hover { box-shadow:0 20px 40px rgba(15,36,66,0.25); }

/* ===== STAT CARDS ===== */
.stat-card {
  background:white;border-radius:1rem;padding:1.5rem;
  border:1px solid rgba(0,0,0,0.06);text-align:center;
  transition:all 0.3s ease;position:relative;overflow:hidden;
}
.stat-card::before {
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--blue-500),var(--purple-500));
}
.stat-card:hover { transform:translateY(-4px);box-shadow:0 15px 30px rgba(0,0,0,0.1); }
.stat-number {
  font-size:2.5rem;font-weight:800;line-height:1;
  background:linear-gradient(135deg,var(--navy-900),var(--blue-600));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.stat-number.gold { background:linear-gradient(135deg,var(--amber-500),var(--gold-500));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
.stat-number.red { background:linear-gradient(135deg,#dc2626,var(--red-500));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
.stat-number.green { background:linear-gradient(135deg,var(--green-600),var(--green-500));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
.stat-label { font-size:0.75rem;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:0.05em;margin-top:0.5rem; }
.stat-detail { font-size:0.8rem;color:#9ca3af;margin-top:0.25rem; }

/* ===== BAR CHARTS ===== */
.bar-chart-container { background:white;border-radius:1rem;padding:1.5rem;border:1px solid rgba(0,0,0,0.06); }
.bar-chart-title { font-size:0.95rem;font-weight:700;color:var(--navy-800);margin-bottom:0.25rem; }
.bar-chart-subtitle { font-size:0.75rem;color:#9ca3af;margin-bottom:1.5rem; }
.bar-chart { display:flex;flex-direction:column;gap:0.75rem; }
.bar-row { display:flex;align-items:center;gap:0.75rem; }
.bar-label { flex:0 0 140px;font-size:0.78rem;font-weight:500;color:#374151;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.bar-track { flex:1;height:28px;background:#f1f5f9;border-radius:6px;overflow:hidden;position:relative; }
.bar-fill {
  height:100%;border-radius:6px;
  background:linear-gradient(90deg,var(--blue-500),var(--blue-400));
  transition:width 1.2s cubic-bezier(0.4,0,0.2,1);width:0;
  display:flex;align-items:center;justify-content:flex-end;
  padding-right:0.5rem;font-size:0.7rem;font-weight:700;color:white;min-width:fit-content;
}
.bar-fill.gold { background:linear-gradient(90deg,var(--amber-500),var(--gold-400)); }
.bar-fill.purple { background:linear-gradient(90deg,var(--purple-600),var(--purple-500)); }
.bar-fill.green { background:linear-gradient(90deg,var(--green-600),var(--green-500)); }
.bar-fill.red { background:linear-gradient(90deg,#dc2626,var(--red-500)); }
.bar-fill.teal { background:linear-gradient(90deg,var(--teal-600),#06b6d4); }
.bar-fill.navy { background:linear-gradient(90deg,var(--navy-900),var(--navy-600)); }
.bar-value { flex:0 0 50px;font-size:0.78rem;font-weight:700;color:var(--navy-800);text-align:left; }

/* Vertical bars */
.vbar-chart {
  display:flex;align-items:flex-end;justify-content:center;gap:0.5rem;
  height:220px;padding:0 1rem;border-bottom:2px solid #e5e7eb;margin-bottom:0.5rem;
}
.vbar-col { display:flex;flex-direction:column;align-items:center;flex:1;max-width:80px;position:relative; }
.vbar {
  width:100%;min-width:30px;border-radius:6px 6px 0 0;
  background:linear-gradient(to top,var(--blue-600),var(--blue-400));
  transition:height 1.5s cubic-bezier(0.4,0,0.2,1);height:0;position:relative;
}
.vbar.gold { background:linear-gradient(to top,var(--amber-500),var(--gold-300)); }
.vbar.red { background:linear-gradient(to top,#dc2626,#f87171); }
.vbar.green { background:linear-gradient(to top,var(--green-600),#4ade80); }
.vbar.purple { background:linear-gradient(to top,var(--purple-700),var(--purple-500)); }
.vbar-val { position:absolute;top:-22px;left:50%;transform:translateX(-50%);font-size:0.7rem;font-weight:700;color:var(--navy-800);white-space:nowrap; }
.vbar-label { font-size:0.65rem;font-weight:500;color:#6b7280;text-align:center;margin-top:0.5rem;line-height:1.2; }

/* ===== DONUT CHART ===== */
.donut-container { display:flex;align-items:center;gap:2rem;flex-wrap:wrap;justify-content:center; }
.donut-wrap { position:relative;width:160px;height:160px; }
.donut-svg { width:160px;height:160px;transform:rotate(-90deg); }
.donut-ring { fill:none;stroke:#e5e7eb;stroke-width:8; }
.donut-segment { fill:none;stroke-width:8;stroke-linecap:round;transition:stroke-dasharray 1.5s cubic-bezier(0.4,0,0.2,1);stroke-dasharray:0 100; }
.donut-center { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center; }
.donut-center-number { font-size:1.8rem;font-weight:800;color:var(--navy-900); }
.donut-center-label { font-size:0.65rem;color:#6b7280;font-weight:500; }
.donut-legend { display:flex;flex-direction:column;gap:0.5rem; }
.donut-legend-item { display:flex;align-items:center;gap:0.5rem;font-size:0.8rem;color:#374151; }
.donut-legend-dot { width:10px;height:10px;border-radius:3px;flex-shrink:0; }

/* ===== COMPARISON TABLE ===== */
.comparison-table { width:100%;border-collapse:separate;border-spacing:0;border-radius:1rem;overflow:hidden;border:1px solid rgba(0,0,0,0.06);font-size:0.82rem; }
.comparison-table thead th { background:linear-gradient(135deg,var(--navy-900),var(--navy-700));color:white;padding:0.85rem 1rem;font-weight:600;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.05em;text-align:left; }
.comparison-table tbody td { padding:0.75rem 1rem;border-bottom:1px solid #f1f5f9;color:#374151; }
.comparison-table tbody tr:last-child td { border-bottom:none; }
.comparison-table tbody tr:hover { background:rgba(59,130,246,0.03); }

/* ===== TIMELINE ===== */
.timeline { position:relative;padding-left:2rem; }
.timeline::before { content:'';position:absolute;left:8px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--blue-500),var(--purple-500),var(--gold-500)); }
.timeline-item { position:relative;padding-bottom:2rem;padding-left:1.5rem; }
.timeline-item:last-child { padding-bottom:0; }
.timeline-dot { position:absolute;left:-2rem;top:0.25rem;width:18px;height:18px;border-radius:50%;background:white;border:3px solid var(--blue-500);z-index:1; }
.timeline-dot.active { background:var(--blue-500);box-shadow:0 0 0 4px rgba(59,130,246,0.2); }
.timeline-dot.gold { border-color:var(--gold-500); }
.timeline-dot.gold.active { background:var(--gold-500);box-shadow:0 0 0 4px rgba(234,179,8,0.2); }
.timeline-year { font-size:0.7rem;font-weight:700;color:var(--blue-600);text-transform:uppercase;letter-spacing:0.05em; }
.timeline-title { font-size:1rem;font-weight:700;color:var(--navy-800);margin-top:0.15rem; }
.timeline-desc { font-size:0.85rem;color:#6b7280;margin-top:0.25rem;line-height:1.6; }

/* ===== CALLOUT BOXES ===== */
.callout { border-radius:1rem;padding:1.25rem 1.5rem;display:flex;gap:1rem;align-items:flex-start;margin:1.5rem 0; }
.callout-icon { flex-shrink:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:0.5rem;font-size:1.2rem; }
.callout-info { background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1px solid rgba(59,130,246,0.15); }
.callout-info .callout-icon { background:rgba(59,130,246,0.1); }
.callout-warning { background:linear-gradient(135deg,#fffbeb,#fef3c7);border:1px solid rgba(234,179,8,0.15); }
.callout-warning .callout-icon { background:rgba(234,179,8,0.1); }
.callout-danger { background:linear-gradient(135deg,#fef2f2,#fee2e2);border:1px solid rgba(239,68,68,0.15); }
.callout-danger .callout-icon { background:rgba(239,68,68,0.1); }
.callout-success { background:linear-gradient(135deg,#f0fdf4,#dcfce7);border:1px solid rgba(34,197,94,0.15); }
.callout-success .callout-icon { background:rgba(34,197,94,0.1); }
.callout-title { font-size:0.85rem;font-weight:700;color:#1f2937; }
.callout-text { font-size:0.82rem;color:#4b5563;margin-top:0.25rem;line-height:1.6; }

/* ===== ACTIVITIES ===== */
.activity-container { background:white;border-radius:1rem;border:1px solid rgba(0,0,0,0.06);overflow:hidden;margin:2rem 0; }
.activity-header { padding:1.25rem 1.5rem;background:linear-gradient(135deg,var(--purple-100),#ede9fe);border-bottom:1px solid rgba(124,58,237,0.1);display:flex;align-items:center;justify-content:space-between; }
.activity-header.blue-header { background:linear-gradient(135deg,var(--blue-100),#bfdbfe);border-bottom-color:rgba(59,130,246,0.1); }
.activity-header.gold-header { background:linear-gradient(135deg,#fef9c3,#fef3c7);border-bottom-color:rgba(234,179,8,0.1); }
.activity-title { font-size:0.9rem;font-weight:700;color:var(--navy-800); }
.activity-type { font-size:0.65rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--purple-600);background:rgba(124,58,237,0.1);padding:0.2rem 0.6rem;border-radius:9999px; }
.activity-body { padding:1.5rem; }
.activity-footer { padding:1rem 1.5rem;background:#f9fafb;border-top:1px solid rgba(0,0,0,0.04);display:flex;align-items:center;justify-content:space-between; }
.activity-score { font-size:0.85rem;font-weight:700;color:var(--navy-800); }
.activity-reset { font-size:0.78rem;font-weight:600;color:var(--purple-600);background:none;border:1px solid rgba(124,58,237,0.2);padding:0.4rem 1rem;border-radius:0.5rem;cursor:pointer;transition:all 0.2s ease; }
.activity-reset:hover { background:rgba(124,58,237,0.05);border-color:var(--purple-500); }

/* V/F Cards */
.vf-card { background:#f9fafb;border:2px solid #e5e7eb;border-radius:0.75rem;padding:1rem 1.25rem;margin-bottom:0.75rem;transition:all 0.3s ease; }
.vf-statement { font-size:0.85rem;font-weight:500;color:#374151;margin-bottom:0.75rem;line-height:1.5; }
.vf-buttons { display:flex;gap:0.5rem; }
.vf-btn { flex:1;padding:0.5rem;border-radius:0.5rem;font-size:0.8rem;font-weight:600;cursor:pointer;border:2px solid #e5e7eb;background:white;transition:all 0.2s ease; }
.vf-btn:hover { border-color:var(--purple-500);background:var(--purple-100); }
.vf-btn.correct { border-color:var(--green-500);background:var(--green-100);color:#166534; }
.vf-btn.incorrect { border-color:var(--red-500);background:var(--red-100);color:#991b1b; }
.vf-btn:disabled { cursor:default;opacity:0.7; }
.vf-explanation { margin-top:0.5rem;padding:0.75rem;border-radius:0.5rem;font-size:0.78rem;line-height:1.5;display:none; }
.vf-explanation.show { display:block;animation:fadeIn 0.3s ease; }
.vf-explanation.correct-bg { background:#dcfce7;color:#166534; }
.vf-explanation.incorrect-bg { background:#fee2e2;color:#991b1b; }

/* Drag & Drop */
.drag-items-pool { display:flex;flex-wrap:wrap;gap:0.5rem;padding:1rem;background:#f9fafb;border:2px dashed #e5e7eb;border-radius:0.75rem;min-height:3rem;margin-bottom:1rem; }
.drag-item { padding:0.5rem 1rem;background:white;border:2px solid #e9d5ff;border-radius:0.75rem;cursor:grab;font-size:0.8rem;font-weight:500;color:var(--purple-700);user-select:none;transition:all 0.2s ease;display:inline-flex;align-items:center;gap:0.4rem; }
.drag-item:hover { background:var(--purple-100);border-color:var(--purple-500);transform:translateY(-2px);box-shadow:0 4px 12px rgba(147,51,234,0.15); }
.drag-item:active { cursor:grabbing; }
.drag-item.placed { cursor:pointer; }
.drag-item.correct-item { border-color:var(--green-500);background:var(--green-100);color:#166534; }
.drag-item.incorrect-item { border-color:var(--red-500);background:var(--red-100);color:#991b1b;animation:shake 0.4s ease; }
.drop-zone { min-height:3rem;border:2px dashed #d8b4fe;border-radius:0.75rem;padding:0.75rem;display:flex;flex-wrap:wrap;gap:0.5rem;align-items:flex-start;transition:all 0.2s ease;background:rgba(250,245,255,0.4); }
.drop-zone.drag-over { background:var(--purple-100);border-color:var(--purple-500);box-shadow:0 0 0 3px rgba(168,85,247,0.15); }
.drop-zone-label { font-size:0.75rem;font-weight:600;color:var(--purple-600);margin-bottom:0.5rem; }

/* Matching */
.match-grid { display:grid;grid-template-columns:1fr 1fr;gap:1rem; }
.match-column { display:flex;flex-direction:column;gap:0.5rem; }
.match-item { padding:0.65rem 1rem;border:2px solid #e5e7eb;border-radius:0.75rem;cursor:pointer;font-size:0.8rem;font-weight:500;transition:all 0.2s ease;text-align:center; }
.match-item:hover { border-color:var(--purple-500);background:rgba(250,245,255,0.5); }
.match-item.selected { border-color:var(--purple-500);background:var(--purple-100);box-shadow:0 0 0 3px rgba(168,85,247,0.2); }
.match-item.matched { border-color:var(--green-500);background:var(--green-100);color:#166534;cursor:default;opacity:0.8; }
.match-item.wrong { border-color:var(--red-500);background:var(--red-100);animation:shake 0.4s ease; }

/* Quiz */
.quiz-progress { height:4px;background:#e5e7eb;border-radius:2px;margin-bottom:1.5rem;overflow:hidden; }
.quiz-progress-fill { height:100%;background:linear-gradient(90deg,var(--purple-600),var(--purple-500));border-radius:2px;transition:width 0.5s ease; }
.quiz-question { font-size:0.95rem;font-weight:600;color:var(--navy-800);margin-bottom:1rem;line-height:1.5; }
.quiz-counter { font-size:0.75rem;font-weight:500;color:#9ca3af;margin-bottom:0.5rem; }
.quiz-options { display:flex;flex-direction:column;gap:0.5rem; }
.quiz-option { padding:0.75rem 1rem;border:2px solid #e5e7eb;border-radius:0.75rem;cursor:pointer;font-size:0.85rem;transition:all 0.2s ease;display:flex;align-items:center;gap:0.75rem; }
.quiz-option:hover { border-color:var(--purple-500);background:var(--purple-100); }
.quiz-option.correct { border-color:var(--green-500);background:var(--green-100);color:#166534; }
.quiz-option.incorrect { border-color:var(--red-500);background:var(--red-100);color:#991b1b; }
.quiz-option .option-letter { width:26px;height:26px;border-radius:50%;background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-size:0.7rem;font-weight:700;color:#6b7280;flex-shrink:0; }
.quiz-option.correct .option-letter { background:var(--green-500);color:white; }
.quiz-option.incorrect .option-letter { background:var(--red-500);color:white; }
.quiz-feedback { margin-top:0.75rem;padding:0.75rem 1rem;border-radius:0.5rem;font-size:0.8rem;font-weight:500;display:none;line-height:1.5; }
.quiz-feedback.show { display:block;animation:fadeIn 0.3s ease; }
.quiz-feedback.correct-fb { background:#dcfce7;color:#166534; }
.quiz-feedback.incorrect-fb { background:#fee2e2;color:#991b1b; }

/* ===== COUNTRY CARDS ===== */
.country-card { background:white;border-radius:1rem;border:1px solid rgba(0,0,0,0.06);overflow:hidden;transition:all 0.3s ease; }
.country-card:hover { transform:translateY(-3px);box-shadow:0 12px 24px rgba(0,0,0,0.08); }
.country-card-header { padding:1rem 1.25rem;cursor:pointer;display:flex;align-items:center;gap:0.75rem;transition:background 0.2s ease; }
.country-card-header:hover { background:#f9fafb; }
.country-flag { font-size:1.5rem; }
.country-name { font-size:0.9rem;font-weight:700;color:var(--navy-800);flex:1; }
.country-system { font-size:0.7rem;font-weight:600;color:var(--blue-600); }
.country-chevron { transition:transform 0.3s ease;color:#9ca3af; }
.country-card.expanded .country-chevron { transform:rotate(180deg); }
.country-card-body { max-height:0;overflow:hidden;transition:max-height 0.4s ease,padding 0.3s ease;padding:0 1.25rem; }
.country-card.expanded .country-card-body { max-height:600px;padding:0 1.25rem 1.25rem; }

/* ===== TRAFFIC LIGHT ===== */
.traffic-light { display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem; }
.traffic-level { border-radius:1rem;padding:1.25rem;text-align:center;transition:all 0.3s ease;cursor:default; }
.traffic-level:hover { transform:translateY(-3px); }
.traffic-red { background:linear-gradient(135deg,#fef2f2,#fee2e2);border:2px solid rgba(239,68,68,0.2); }
.traffic-orange { background:linear-gradient(135deg,#fff7ed,#fed7aa);border:2px solid rgba(249,115,22,0.2); }
.traffic-yellow { background:linear-gradient(135deg,#fefce8,#fef9c3);border:2px solid rgba(234,179,8,0.2); }
.traffic-green { background:linear-gradient(135deg,#f0fdf4,#dcfce7);border:2px solid rgba(34,197,94,0.2); }
.traffic-icon { font-size:2rem;margin-bottom:0.5rem; }
.traffic-title { font-size:0.85rem;font-weight:700; }
.traffic-desc { font-size:0.75rem;color:#6b7280;margin-top:0.25rem;line-height:1.4; }

/* ===== SLIDER CHART ===== */
.range-slider { -webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:4px;background:linear-gradient(to right,#e9d5ff,var(--purple-500));outline:none;margin:1rem 0; }
.range-slider::-webkit-slider-thumb { -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--purple-600);cursor:pointer;box-shadow:0 2px 8px rgba(124,58,237,0.3); }
.range-slider::-moz-range-thumb { width:22px;height:22px;border-radius:50%;background:var(--purple-600);cursor:pointer;border:none; }

/* ===== SOURCES ===== */
.source-ref { display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--blue-100);color:var(--blue-600);font-size:0.55rem;font-weight:700;cursor:help;vertical-align:super;margin:0 1px; }
.source-ref:hover { background:var(--blue-600);color:white; }
.sources-footer { background:#f9fafb;border-radius:1rem;padding:1.5rem;margin-top:2rem;border:1px solid rgba(0,0,0,0.04); }
.sources-footer h4 { font-size:0.8rem;font-weight:700;color:var(--navy-800);margin-bottom:0.75rem;text-transform:uppercase;letter-spacing:0.05em; }
.sources-footer ol { font-size:0.75rem;color:#6b7280;line-height:1.8;padding-left:1.25rem; }

/* ===== MODAL ===== */
.modal-overlay { position:fixed;inset:0;z-index:60;background:rgba(15,36,66,0.6);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;transition:opacity 0.3s ease; }
.modal-overlay.open { opacity:1; }
.modal-overlay.hidden { display:none; }
.modal-card { background:white;border-radius:1.5rem;max-width:28rem;width:100%;box-shadow:0 25px 60px rgba(0,0,0,0.3);transform:translateY(20px);transition:transform 0.3s ease;overflow:hidden; }
.modal-overlay.open .modal-card { transform:translateY(0); }
.modal-header { background:linear-gradient(135deg,var(--navy-900),var(--blue-600));color:white;padding:2rem 1.5rem;text-align:center; }
.modal-header h3 { font-size:1.2rem;font-weight:700; }
.modal-header p { font-size:0.8rem;color:rgba(255,255,255,0.7);margin-top:0.25rem; }
.modal-body { padding:1.5rem; }
.form-group { margin-bottom:1rem; }
.form-label { display:block;font-size:0.75rem;font-weight:600;color:#374151;margin-bottom:0.35rem; }
.form-input { width:100%;padding:0.65rem 0.85rem;border:2px solid #e5e7eb;border-radius:0.5rem;font-size:0.85rem;font-family:inherit;transition:border-color 0.2s ease;outline:none; }
.form-input:focus { border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(59,130,246,0.1); }
.form-submit { width:100%;padding:0.75rem;background:linear-gradient(135deg,var(--blue-600),var(--blue-500));color:white;font-weight:700;font-size:0.9rem;border:none;border-radius:0.5rem;cursor:pointer;transition:all 0.2s ease;margin-top:0.5rem; }
.form-submit:hover { transform:translateY(-1px);box-shadow:0 4px 12px rgba(37,99,235,0.3); }

/* ===== SVG ===== */
.svg-animated path,.svg-animated line,.svg-animated circle { stroke-dasharray:1000;stroke-dashoffset:1000; }
.svg-animated.visible path,.svg-animated.visible line,.svg-animated.visible circle { animation:draw-line 2s ease forwards; }
.svg-icon-float { animation:float 3s ease-in-out infinite; }

/* ===== FOOTER ===== */
.main-footer { background:linear-gradient(135deg,var(--navy-900),var(--navy-700));color:white;padding:3rem 1.5rem 1.5rem; }
.footer-inner { max-width:80rem;margin:0 auto; }
.footer-credits { text-align:center;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,0.1);font-size:0.75rem;color:rgba(255,255,255,0.5); }
.footer-credits a { color:var(--gold-400);text-decoration:none; }

/* ===== TOAST ===== */
.toast { position:fixed;bottom:2rem;right:2rem;z-index:70;background:white;border-radius:0.75rem;padding:1rem 1.25rem;box-shadow:0 10px 30px rgba(0,0,0,0.15);border-left:4px solid var(--green-500);transform:translateX(120%);transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);font-size:0.85rem;font-weight:500;max-width:320px; }
.toast.visible { transform:translateX(0); }
.toast.error { border-left-color:var(--red-500); }

/* ===== RESPONSIVE ===== */
@media (max-width:768px) {
  .hero-section { padding:3rem 1rem 2.5rem; }
  .hero-stats { gap:0.75rem; }
  .hero-stat { padding:0.75rem 1rem;min-width:100px; }
  .hero-stat-number { font-size:1.4rem; }
  .bar-label { flex:0 0 100px;font-size:0.7rem; }
  .match-grid { grid-template-columns:1fr; }
  .nav-tab { padding:0.75rem 1rem;font-size:0.75rem; }
  .content-area { padding:0 1rem 2rem; }
  .section-header { padding:2rem 1rem 1.5rem; }
  .section-header h2 { font-size:1.5rem; }
  .stat-number { font-size:2rem; }
  .donut-container { flex-direction:column;align-items:center; }
}
@media (max-width:480px) {
  .hero-title { font-size:1.6rem; }
  .nav-tab { padding:0.65rem 0.75rem;font-size:0.7rem; }
  .traffic-light { grid-template-columns:1fr 1fr; }
}
@media print {
  .main-header,.module-nav,.modal-overlay,.toast,#progress-bar-global,.activity-container { display:none; }
  .module-section { display:block !important;page-break-inside:avoid; }
  body { background:white;color:black; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:0.01ms !important;transition-duration:0.01ms !important; }
}