/* ==========================================================
   Learnovate Investissement - feuille de style principale (V1 conservee)
   Les ameliorations V2 sont dans v2.css (charge apres).
   ========================================================== */
:root {
  --cream: #F5F0E8;
  --cream-dark: #EDE7D9;
  --cream-deeper: #E2DACB;
  --ink: #111111;
  --ink-2: #2e2e2e;
  --ink-3: #444;
  --muted: #88887A;
  --green: #4CAF76;
  --green-l: #E8F5EE;
  --green-d: #2E7D52;
  --green-dd: #1a5c3a;
  --gold: #C9A84C;
  --gold-l: #FDF6E3;
  --red: #D94F3D;
  --red-l: #FDF0EE;
  --border: rgba(17,17,17,0.08);
  --border-2: rgba(17,17,17,0.16);
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.07);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.12);
  --shadow-xl: 0 24px 64px rgba(0,0,0,0.18);
  --r: 14px;
  --r-sm: 9px;
  --r-lg: 20px;
  --serif: 'DM Serif Display', serif;
  --sans: 'DM Sans', sans-serif;
  --mono: 'DM Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ══════════════════════════════════════════════════════════
   UTILITY & ANIMATIONS
   ══════════════════════════════════════════════════════════ */
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 118, 0.4); }
  50% { box-shadow: 0 0 24px 8px rgba(76, 175, 118, 0.15); }
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -10%); }
  20% { transform: translate(-15%, 5%); }
  30% { transform: translate(7%, -25%); }
  40% { transform: translate(-5%, 25%); }
  50% { transform: translate(-15%, 10%); }
  60% { transform: translate(15%, 0%); }
  70% { transform: translate(0%, 15%); }
  80% { transform: translate(3%, 35%); }
  90% { transform: translate(-10%, 10%); }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.anim-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.anim-item.visible {
  opacity: 1;
  transform: translateY(0);
}
.anim-item:nth-child(2) { transition-delay: 0.1s; }
.anim-item:nth-child(3) { transition-delay: 0.2s; }
.anim-item:nth-child(4) { transition-delay: 0.3s; }
.anim-item:nth-child(5) { transition-delay: 0.4s; }
.anim-item:nth-child(6) { transition-delay: 0.5s; }

/* ══════════════════════════════════════════════════════════
   GRAIN OVERLAY
   ══════════════════════════════════════════════════════════ */
body::before {
  content: '';
  position: fixed;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  animation: grain 8s steps(10) infinite;
}

/* ══════════════════════════════════════════════════════════
   NAVIGATION
   ══════════════════════════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 16px 0;
  transition: all 0.4s ease;
  background: transparent;
}
.nav.scrolled {
  background: rgba(17, 17, 17, 0.95);
  backdrop-filter: blur(20px);
  padding: 10px 0;
  box-shadow: 0 2px 24px rgba(0,0,0,0.28);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  margin-right: 40px;
  flex-shrink: 0;
}
.nav-logo-img {
  width: 44px; height: 44px;
  border-radius: 11px;
  object-fit: contain;
  background: var(--cream);
  padding: 5px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
.nav-logo-text {
  font-family: 'Kaushan Script', cursive;
  font-size: 24px;
  font-weight: 400;
  color: #fff;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.nav-logo-sub {
  display: block;
  font-family: var(--sans);
  font-size: 8.5px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 3px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin-left: auto;
}
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: color 0.2s;
  cursor: pointer;
}
.nav-links a:hover { color: #fff; }
.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: var(--green);
  color: #fff;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s;
  text-decoration: none;
}
.nav-btn:hover {
  background: var(--green-d);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(76,175,118,0.3);
}
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.3s;
}

/* ══════════════════════════════════════════════════════════
   HERO SECTION
   ══════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--ink);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 40%, rgba(76, 175, 118, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(201, 168, 76, 0.05) 0%, transparent 50%),
    linear-gradient(180deg, rgba(17,17,17,1) 0%, rgba(30,30,30,1) 100%);
}
.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 200px;
  background: linear-gradient(to top, var(--cream), transparent);
  z-index: 2;
}
.hero-content {
  position: relative;
  z-index: 3;
  max-width: 1200px;
  margin: 0 auto;
  padding: 140px 32px 120px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.hero-left { animation: fadeInUp 1s ease 0.2s both; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(76,175,118,0.1);
  border: 1px solid rgba(76,175,118,0.2);
  border-radius: 30px;
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.hero-badge-dot {
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  animation: pulse-glow 2s infinite;
}
.hero h1 {
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 64px);
  color: #fff;
  line-height: 1.08;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}
.hero h1 em {
  font-style: italic;
  color: var(--green);
}
.hero-desc {
  font-size: 17px;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
  margin-bottom: 40px;
  max-width: 480px;
}
.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  background: var(--green);
  color: #fff;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
}
.btn-primary:hover {
  background: var(--green-d);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(76,175,118,0.3);
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  background: transparent;
  color: rgba(255,255,255,0.8);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
}
.btn-secondary:hover {
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.05);
  color: #fff;
}

/* Hero right - simulator preview */
.hero-right {
  animation: fadeInUp 1s ease 0.5s both;
  position: relative;
}
.hero-preview {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  transform: perspective(1000px) rotateY(-4deg) rotateX(2deg);
  transition: transform 0.5s ease;
  position: relative;
}
.hero-preview:hover {
  transform: perspective(1000px) rotateY(-1deg) rotateX(0.5deg);
}
.hero-preview-header {
  background: var(--ink);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.preview-dots {
  display: flex;
  gap: 6px;
}
.preview-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.preview-dot:nth-child(1) { background: #ff5f57; }
.preview-dot:nth-child(2) { background: #ffbd2e; }
.preview-dot:nth-child(3) { background: #27c93f; }
.preview-url {
  flex: 1;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(255,255,255,0.3);
}
.hero-preview-body {
  padding: 28px;
  background: var(--cream);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.preview-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px 22px;
  box-shadow: var(--shadow-sm);
}
.preview-card-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.preview-card-value {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--ink);
}
.preview-card-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}
.preview-card-feat {
  background: var(--ink);
  border-color: var(--ink);
}
.preview-card-feat .preview-card-label { color: rgba(255,255,255,0.35); }
.preview-card-feat .preview-card-value { color: #fff; font-size: 34px; }
.preview-card-feat .preview-card-sub { color: rgba(255,255,255,0.35); }
.preview-chart-area {
  height: 120px;
  background: linear-gradient(to top, rgba(76,175,118,0.1), transparent);
  border-radius: var(--r-sm);
  position: relative;
  overflow: hidden;
}
.preview-chart-line {
  position: absolute;
  bottom: 10px; left: 10px; right: 10px;
  height: 2px;
}
.preview-chart-line svg {
  width: 100%;
  height: 100px;
  position: absolute;
  bottom: 0;
}
.hero-glow {
  position: absolute;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(76,175,118,0.15), transparent 70%);
  border-radius: 50%;
  top: -80px; right: -80px;
  animation: float 6s ease-in-out infinite;
  pointer-events: none;
}
.hero-lock-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(17,17,17,0.6);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  z-index: 5;
}
.hero-lock-icon {
  width: 56px; height: 56px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-lock-text {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
}
.hero-lock-btn {
  padding: 10px 28px;
  background: var(--green);
  color: #fff;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s;
}
.hero-lock-btn:hover {
  background: var(--green-d);
  transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════════════
   STATS BAR
   ══════════════════════════════════════════════════════════ */
.stats-bar {
  position: relative;
  z-index: 5;
  margin-top: -60px;
  padding: 0 32px;
}
.stats-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.stat-item {
  background: #fff;
  padding: 32px 28px;
  text-align: center;
}
.stat-number {
  font-family: var(--serif);
  font-size: 32px;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 6px;
}
.stat-number span { color: var(--green); }
.stat-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════
   FEATURES
   ══════════════════════════════════════════════════════════ */
.features {
  padding: 120px 0 100px;
}
.section-header {
  text-align: center;
  margin-bottom: 72px;
}
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  background: var(--green-l);
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  color: var(--green-d);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.section-title {
  font-family: var(--serif);
  font-size: clamp(28px, 3.5vw, 44px);
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: 16px;
}
.section-desc {
  font-size: 16px;
  color: var(--muted);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.65;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.feature-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 36px 32px;
  transition: all 0.35s ease;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(76,175,118,0.2);
}
.feature-card:hover::before {
  transform: scaleX(1);
}
.feature-icon {
  width: 52px; height: 52px;
  background: var(--ink);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.feature-title {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--ink);
  margin-bottom: 12px;
}
.feature-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
}

/* ══════════════════════════════════════════════════════════
   SIMULATOR CTA
   ══════════════════════════════════════════════════════════ */
.sim-cta {
  padding: 80px 0 100px;
}
.sim-cta-inner {
  background: var(--ink);
  border-radius: var(--r-lg);
  padding: 72px 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.sim-cta-inner::before {
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(76,175,118,0.1), transparent 60%);
  border-radius: 50%;
  pointer-events: none;
}
.sim-cta-left { position: relative; z-index: 2; }
.sim-cta-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  background: rgba(76,175,118,0.12);
  border: 1px solid rgba(76,175,118,0.2);
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.sim-cta-title {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 40px);
  color: #fff;
  line-height: 1.15;
  margin-bottom: 20px;
}
.sim-cta-desc {
  font-size: 16px;
  color: rgba(255,255,255,0.5);
  line-height: 1.7;
  margin-bottom: 36px;
}
.sim-cta-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 40px;
}
.sim-cta-feat {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  font-weight: 500;
}
.sim-cta-check {
  width: 22px; height: 22px;
  background: rgba(76,175,118,0.15);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sim-cta-right {
  position: relative;
  z-index: 2;
}
.sim-mock {
  background: var(--cream);
  border-radius: var(--r);
  padding: 24px;
  box-shadow: var(--shadow-lg);
}
.sim-mock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.sim-mock-row:last-child { border-bottom: none; }
.sim-mock-lbl {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}
.sim-mock-val {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  background: #fff;
  padding: 6px 14px;
  border-radius: 7px;
  border: 1px solid var(--border-2);
}
.sim-mock-bar {
  height: 6px;
  background: var(--cream-dark);
  border-radius: 3px;
  margin-top: 18px;
  overflow: hidden;
}
.sim-mock-bar-fill {
  height: 100%;
  background: var(--green);
  border-radius: 3px;
  width: 72%;
  transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.sim-mock-result {
  background: var(--ink);
  border-radius: var(--r-sm);
  padding: 18px 20px;
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sim-mock-result-lbl {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sim-mock-result-val {
  font-family: var(--mono);
  font-size: 22px;
  color: #fff;
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════
   PRICING
   ══════════════════════════════════════════════════════════ */
.pricing {
  padding: 100px 0 120px;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1140px;
  margin: 0 auto;
  align-items: stretch;
}
.price-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 44px 40px;
  box-shadow: var(--shadow-sm);
  transition: all 0.35s;
  position: relative;
}
.price-card.featured {
  background: linear-gradient(165deg, #2a2214 0%, #1c1810 100%);
  border-color: rgba(201,168,76,0.5);
  box-shadow: var(--shadow-xl);
  transform: scale(1.03);
}
.price-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.price-card.featured:hover {
  transform: scale(1.03) translateY(-4px);
}
.price-popular {
  position: absolute;
  top: -12px; right: 24px;
  padding: 5px 16px;
  background: var(--gold);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 20px;
}
.price-name {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink);
  margin-bottom: 8px;
}
.price-card.featured .price-name { color: #fff; }
.price-desc {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 24px;
  line-height: 1.6;
}
.price-card.featured .price-desc { color: rgba(255,255,255,0.4); }
.price-amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 28px;
}
.price-currency {
  font-family: var(--serif);
  font-size: 48px;
  line-height: 1;
  color: var(--ink);
}
.price-card.featured .price-currency { color: #fff; }
.price-period {
  font-size: 14px;
  color: var(--muted);
}
.price-card.featured .price-period { color: rgba(255,255,255,0.35); }
.price-free {
  font-family: var(--serif);
  font-size: 48px;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 28px;
}
.price-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 36px;
}
.price-features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-2);
  font-weight: 500;
  line-height: 1.45;
}
.price-features li .price-check { margin-top: 1px; }
.price-card.featured .price-features li { color: rgba(255,255,255,0.75); }
.price-check {
  width: 20px; height: 20px;
  background: var(--green-l);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.price-card.featured .price-check { background: rgba(201,168,76,0.2); }
.price-btn {
  display: block;
  width: 100%;
  padding: 14px;
  text-align: center;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
  border: none;
}
.price-btn-outline {
  background: transparent;
  border: 1.5px solid var(--border-2);
  color: var(--ink);
}
.price-btn-outline:hover {
  border-color: var(--green);
  color: var(--green-d);
  background: var(--green-l);
}
.price-btn-filled {
  background: var(--green);
  color: #fff;
}
.price-btn-filled:hover {
  background: var(--green-d);
  box-shadow: 0 4px 16px rgba(76,175,118,0.3);
}
.price-btn-gold {
  background: linear-gradient(135deg, var(--gold) 0%, #b8932e 100%);
  color: #16130a;
  font-weight: 700;
}
.price-btn-gold:hover {
  box-shadow: 0 4px 16px rgba(201,168,76,0.4);
  filter: brightness(1.05);
}

/* ── Carte Prestige (sombre, accents dorés) ── */
.price-card.prestige {
  background: linear-gradient(165deg, #1c1c1c 0%, #0e0e0e 100%);
  border-color: rgba(201,168,76,0.3);
  box-shadow: var(--shadow-xl);
}
.price-card.prestige:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
  border-color: rgba(201,168,76,0.6);
}
.price-card.prestige .price-name {
  color: #fff;
  font-family: 'Kaushan Script', cursive;
  font-size: 34px;
  line-height: 1.15;
  color: var(--gold);
}
.price-card.prestige .price-desc { color: rgba(255,255,255,0.42); }
.price-card.prestige .price-currency { color: #fff; }
.price-card.prestige .price-features li { color: rgba(255,255,255,0.75); }
.price-card.prestige .price-check { background: rgba(201,168,76,0.18); }
.price-popular.prestige-badge {
  background: linear-gradient(135deg, var(--gold) 0%, #b8932e 100%);
  color: #16130a;
}

/* ══════════════════════════════════════════════════════════
   TESTIMONIALS
   ══════════════════════════════════════════════════════════ */
.testimonials {
  padding: 80px 0 100px;
  background: var(--cream-dark);
}
.test-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.test-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s;
}
.test-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.test-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 18px;
}
.test-star {
  width: 16px; height: 16px;
  color: var(--gold);
}
.test-text {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.7;
  margin-bottom: 20px;
  font-style: italic;
}
.test-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.test-avatar {
  width: 40px; height: 40px;
  background: var(--green-l);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--green-d);
  font-weight: 600;
}
.test-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.test-role {
  font-size: 11px;
  color: var(--muted);
}

/* ══════════════════════════════════════════════════════════
   FAQ
   ══════════════════════════════════════════════════════════ */
.faq {
  padding: 100px 0;
}
.faq-list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  transition: all 0.3s;
}
.faq-item:hover { border-color: rgba(76,175,118,0.2); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.faq-arrow {
  transition: transform 0.3s;
  flex-shrink: 0;
  color: var(--muted);
}
.faq-item.open .faq-arrow { transform: rotate(180deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
}
.faq-item.open .faq-answer {
  max-height: 300px;
}
.faq-answer-inner {
  padding: 0 24px 20px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
}

/* ══════════════════════════════════════════════════════════
   CTA FINAL
   ══════════════════════════════════════════════════════════ */
.final-cta {
  padding: 80px 0 120px;
}
.final-cta-inner {
  background: var(--ink);
  border-radius: var(--r-lg);
  padding: 80px 64px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final-cta-inner::before {
  content: '';
  position: absolute;
  top: -60%; left: 50%; transform: translateX(-50%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(76,175,118,0.12), transparent 60%);
  border-radius: 50%;
  pointer-events: none;
}
.final-cta-title {
  font-family: var(--serif);
  font-size: clamp(28px, 3.5vw, 44px);
  color: #fff;
  line-height: 1.15;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}
.final-cta-desc {
  font-size: 16px;
  color: rgba(255,255,255,0.5);
  max-width: 480px;
  margin: 0 auto 40px;
  line-height: 1.65;
  position: relative;
  z-index: 2;
}
.final-cta-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  position: relative;
  z-index: 2;
}

/* ══════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════ */
.footer {
  background: var(--ink);
  padding: 64px 0 32px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.footer-brand-text {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  line-height: 1.7;
  margin-top: 16px;
  max-width: 280px;
}
.footer-col-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: 20px;
}
.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-links a {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-links a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-copy {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
}
.footer-langs {
  display: flex;
  gap: 12px;
}
.footer-lang {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  padding: 4px 12px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  transition: all 0.2s;
}
.footer-lang:hover, .footer-lang.active {
  color: #fff;
  border-color: rgba(255,255,255,0.3);
}

/* ══════════════════════════════════════════════════════════
   AUTH MODAL
   ══════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(17,17,17,0.7);
  backdrop-filter: blur(12px);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.active { display: flex; }
.modal {
  background: #fff;
  border-radius: var(--r-lg);
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow-xl);
  animation: scaleIn 0.35s ease;
  overflow: hidden;
}
.modal-header {
  padding: 36px 40px 0;
  text-align: center;
}
.modal-logo {
  width: 56px; height: 56px;
  border-radius: 14px;
  object-fit: contain;
  background: var(--cream);
  padding: 8px;
  margin: 0 auto 20px;
  display: block;
  box-shadow: var(--shadow-sm);
}
.modal-title {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--ink);
  margin-bottom: 8px;
}
.modal-subtitle {
  font-size: 14px;
  color: var(--muted);
}
.modal-body {
  padding: 32px 40px 40px;
}
.modal-tabs {
  display: flex;
  gap: 4px;
  background: var(--cream);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 28px;
}
.modal-tab {
  flex: 1;
  padding: 10px;
  text-align: center;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  border: none;
  background: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.modal-tab.active {
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.form-group {
  margin-bottom: 18px;
}
.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 7px;
}
.form-input {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid var(--border-2);
  border-radius: 10px;
  outline: none;
  transition: all 0.2s;
}
.form-input:focus {
  border-color: var(--green);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(76,175,118,0.1);
}
.form-input::placeholder { color: var(--muted); }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form-submit {
  width: 100%;
  padding: 14px;
  background: var(--green);
  color: #fff;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s;
  margin-top: 8px;
}
.form-submit:hover {
  background: var(--green-d);
  box-shadow: 0 4px 16px rgba(76,175,118,0.3);
}
.form-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
}
.form-divider::before, .form-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-2);
}
.form-divider span {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.form-footer {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  margin-top: 20px;
}
.form-footer a {
  color: var(--green-d);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.form-footer a:hover { text-decoration: underline; }
.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  background: var(--cream);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: all 0.2s;
  z-index: 5;
}
.modal-close:hover { background: var(--cream-dark); color: var(--ink); }
.form-error {
  font-size: 12px;
  color: var(--red);
  margin-top: 4px;
  display: none;
}
.form-success-msg {
  display: none;
  text-align: center;
  padding: 40px 20px;
}
.form-success-icon {
  width: 64px; height: 64px;
  background: var(--green-l);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.form-success-title {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink);
  margin-bottom: 10px;
}
.form-success-text {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}
/* User bar (when logged in) */
.user-bar {
  display: none;
  align-items: center;
  gap: 12px;
}
.user-avatar {
  width: 32px; height: 32px;
  background: var(--green);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 14px;
  color: #fff;
}
.user-name {
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  font-weight: 500;
}
.user-logout {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  font-family: var(--sans);
}
.user-logout:hover { color: rgba(255,255,255,0.7); }

/* ══════════════════════════════════════════════════════════
   CHATBOT — LEARNY
   ══════════════════════════════════════════════════════════ */
.chatbot-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--green);
  border: 3px solid #fff;
  cursor: pointer;
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(76,175,118,0.4), 0 4px 12px rgba(0,0,0,0.15);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}
.chatbot-toggle:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 40px rgba(76,175,118,0.5), 0 6px 16px rgba(0,0,0,0.2);
}
.chatbot-toggle img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.chatbot-toggle::after {
  content: '';
  position: absolute;
  top: 6px; right: 6px;
  width: 12px; height: 12px;
  background: #fff;
  border: 2px solid var(--green);
  border-radius: 50%;
  animation: pulse-glow 2s infinite;
}
.chatbot-toggle.hidden-toggle { display: none; }

.chatbot-pulse-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--green);
  animation: ring-pulse 2.5s ease-out infinite;
  pointer-events: none;
}
@keyframes ring-pulse {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.4); opacity: 0; }
}

.chatbot-tooltip {
  position: fixed;
  bottom: 32px;
  right: 100px;
  background: var(--ink);
  color: #fff;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  z-index: 99997;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.chatbot-tooltip::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: var(--ink);
}
.chatbot-tooltip.visible {
  opacity: 1;
  transform: translateX(0);
}

.chatbot-panel {
  position: fixed;
  bottom: 100px;
  right: 24px;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 140px);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.08);
  z-index: 99999;
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: chatSlideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chatbot-panel.open { display: flex; }
@keyframes chatSlideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.chatbot-header {
  background: linear-gradient(135deg, var(--ink) 0%, #1a1a1a 100%);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  flex-shrink: 0;
}
.chatbot-header::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--green), transparent);
}
.chatbot-avatar {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--cream);
  padding: 4px;
  flex-shrink: 0;
  position: relative;
}
.chatbot-avatar img {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 8px;
}
.chatbot-avatar::after {
  content: '';
  position: absolute;
  bottom: -2px; right: -2px;
  width: 12px; height: 12px;
  background: var(--green);
  border: 2px solid var(--ink);
  border-radius: 50%;
}
.chatbot-info { flex: 1; }
.chatbot-name {
  font-family: var(--serif);
  font-size: 16px;
  color: #fff;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 6px;
}
.chatbot-status {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}
.chatbot-status::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  display: inline-block;
}
.chatbot-close {
  width: 30px; height: 30px;
  background: rgba(255,255,255,0.06);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  transition: all 0.2s;
}
.chatbot-close:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

.chatbot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 18px;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}
.chatbot-messages::-webkit-scrollbar { width: 6px; }
.chatbot-messages::-webkit-scrollbar-track { background: transparent; }
.chatbot-messages::-webkit-scrollbar-thumb { background: rgba(17,17,17,0.12); border-radius: 3px; }

.chat-msg {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  max-width: 88%;
  animation: msgIn 0.3s ease;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.chat-msg.bot { align-self: flex-start; }
.chat-msg.user { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg-avatar {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--cream);
  padding: 2px;
  flex-shrink: 0;
}
.chat-msg-avatar img {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 6px;
}
.chat-msg.user .chat-msg-avatar {
  background: var(--green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 13px;
  padding: 0;
}
.chat-msg-bubble {
  background: #fff;
  padding: 11px 14px;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.chat-msg.user .chat-msg-bubble {
  background: var(--green);
  color: #fff;
  border-radius: 14px;
  border-bottom-right-radius: 4px;
}
.chat-msg-bubble strong { color: var(--ink); font-weight: 600; }
.chat-msg.user .chat-msg-bubble strong { color: #fff; }
.chat-msg-bubble a {
  color: var(--green-d);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.chat-typing {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  align-self: flex-start;
}
.chat-typing-bubble {
  background: #fff;
  padding: 12px 16px;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  display: flex;
  gap: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.chat-typing-dot {
  width: 7px; height: 7px;
  background: var(--muted);
  border-radius: 50%;
  animation: typingDot 1.4s infinite;
}
.chat-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.chat-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-5px); opacity: 1; }
}

.chat-suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  padding-left: 36px;
}
.chat-sug-btn {
  text-align: left;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
}
.chat-sug-btn:hover {
  border-color: var(--green);
  background: var(--green-l);
  color: var(--green-d);
  transform: translateX(2px);
}

.chatbot-footer {
  border-top: 1px solid var(--border);
  padding: 14px 16px;
  background: #fff;
  flex-shrink: 0;
}
.chat-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--cream);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 6px 6px 6px 14px;
  transition: all 0.2s;
}
.chat-input-row:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(76,175,118,0.1);
}
.chat-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink);
  padding: 8px 0;
}
.chat-input::placeholder { color: var(--muted); }
.chat-send {
  width: 34px; height: 34px;
  background: var(--green);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: all 0.2s;
  flex-shrink: 0;
}
.chat-send:hover { background: var(--green-d); transform: scale(1.05); }
.chat-send:disabled { background: var(--muted); cursor: not-allowed; transform: none; }
.chat-disclaimer {
  font-size: 9.5px;
  color: var(--muted);
  text-align: center;
  margin-top: 8px;
  font-style: italic;
}

@media (max-width: 480px) {
  .chatbot-panel {
    bottom: 0; right: 0; left: 0;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
  .chatbot-toggle { bottom: 18px; right: 18px; width: 56px; height: 56px; }
  .chatbot-tooltip { display: none; }
}

/* Toast */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--ink);
  color: #fff;
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  z-index: 100000;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  gap: 10px;
}
.toast.show {
  transform: translateX(-50%) translateY(0);
}
.toast-icon {
  width: 20px; height: 20px;
  background: var(--green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   SIM TABS
   ══════════════════════════════════════════════════════════ */
.sim-tab {
  flex: 1;
  padding: 10px 8px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 9px;
  background: rgba(255,255,255,0.04);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  text-align: center;
  transition: all 0.25s;
}
.sim-tab:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); }
.sim-tab.active {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  box-shadow: 0 4px 16px rgba(76,175,118,0.3);
}

/* ══════════════════════════════════════════════════════════
   GUIDES / PREMIUM SECTION
   ══════════════════════════════════════════════════════════ */
.guides {
  padding: 100px 0 80px;
  background: var(--cream-dark);
}
.guides-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}
.guide-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
  transition: all 0.35s;
  position: relative;
  overflow: hidden;
}
.guide-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.guide-emoji {
  width: 52px; height: 52px;
  background: var(--cream);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 18px;
}
.guide-tag {
  display: inline-block;
  padding: 3px 10px;
  background: var(--gold-l);
  border-radius: 12px;
  font-size: 9px;
  font-weight: 700;
  color: #7A5C1E;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.guide-title {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.25;
}
.guide-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}
.guides-premium-banner {
  background: var(--ink);
  border-radius: var(--r-lg);
  padding: 48px 56px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.guides-premium-banner::before {
  content: '';
  position: absolute;
  top: -60%; right: -10%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(201,168,76,0.12), transparent 60%);
  border-radius: 50%;
  pointer-events: none;
}
.gpb-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: rgba(201,168,76,0.15);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.gpb-title {
  font-family: var(--serif);
  font-size: clamp(22px, 2.5vw, 32px);
  color: #fff;
  line-height: 1.2;
  margin-bottom: 14px;
}
.gpb-desc {
  font-size: 15px;
  color: rgba(255,255,255,0.45);
  line-height: 1.7;
  max-width: 520px;
  margin-bottom: 8px;
}
.gpb-audience {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  margin-top: 12px;
}
.gpb-btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 2;
}
.gpb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
  border: none;
  white-space: nowrap;
}
.gpb-btn-gold {
  background: var(--gold);
  color: #fff;
}
.gpb-btn-gold:hover {
  background: #b8963e;
  box-shadow: 0 4px 16px rgba(201,168,76,0.3);
  transform: translateY(-1px);
}
.gpb-btn-outline {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
}
.gpb-btn-outline:hover {
  border-color: rgba(255,255,255,0.3);
  color: #fff;
  background: rgba(255,255,255,0.05);
}

/* ══════════════════════════════════════════════════════════
   DISCLAIMER
   ══════════════════════════════════════════════════════════ */
.disclaimer {
  background: #0a0a0a;
  padding: 36px 0;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.disclaimer-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 32px;
}
.disclaimer-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  margin-bottom: 12px;
}
.disclaimer-text {
  font-size: 11px;
  color: rgba(255,255,255,0.2);
  line-height: 1.8;
}

@media (max-width: 1024px) {
  .guides-grid { grid-template-columns: repeat(2, 1fr); }
  .guides-premium-banner { grid-template-columns: 1fr; padding: 36px 32px; }
  .gpb-btns { flex-direction: row; }
}
@media (max-width: 768px) {
  .guides-grid { grid-template-columns: 1fr; }
  .gpb-btns { flex-direction: column; }
  .sim-tab { font-size: 11px; padding: 8px 4px; }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero-content { grid-template-columns: 1fr; gap: 48px; }
  .hero-right { max-width: 500px; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .sim-cta-inner { grid-template-columns: 1fr; padding: 48px 36px; }
  .test-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 480px; }
  .price-card.featured { transform: none; }
  .price-card.featured:hover { transform: translateY(-4px); }
}
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .hero-content { padding: 120px 20px 80px; }
  .hero h1 { font-size: 32px; }
  .hero-right { display: none; }
  .stats-inner { grid-template-columns: repeat(2, 1fr); }
  .features-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .price-card.featured { transform: none; }
  .price-card.featured:hover { transform: translateY(-4px); }
  .test-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 16px; }
  .final-cta-inner { padding: 48px 28px; }
  .final-cta-btns { flex-direction: column; align-items: center; }
  .modal-body { padding: 24px 24px 32px; }
  .modal-header { padding: 28px 24px 0; }
}

/* ══════════════════════════════════════════════════════════
   EMBEDDED SIMULATOR PAGE
   ══════════════════════════════════════════════════════════ */
#simulatorPage {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--cream);
  z-index: 9999;
  overflow-y: auto;
  overflow-x: hidden;
  animation: simFadeIn 0.4s ease;
}
#simulatorPage.active { display: block; }
@keyframes simFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Back button overlay (positioned absolute over the simulator's own header) */
.sim-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.sim-back-btn:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
  transform: translateX(-2px);
}

/* Scoped simulator styles */


#simulatorPage, #simulatorPage *::before, #simulatorPage *::after{box-sizing:border-box;margin:0;padding:0}
#simulatorPage{font-size:16px}
#simulatorPage{font-family:var(--sans);background:var(--cream);color:var(--ink);min-height:100vh;line-height:1.6}


#simulatorPage .hdr{background:var(--ink);padding:18px 48px;display:flex;align-items:center;gap:18px;position:sticky;top:0;z-index:100;box-shadow:0 2px 24px rgba(0,0,0,.28)}
#simulatorPage .hdr-logo{width:44px;height:44px;border-radius:9px;object-fit:contain;background:var(--cream);padding:5px;flex-shrink:0}
#simulatorPage .hdr-brand{display:flex;flex-direction:column;gap:1px}
#simulatorPage .hdr-title{font-family:var(--serif);font-size:18px;color:#fff;line-height:1.15}
#simulatorPage .hdr-sub{font-size:10px;color:var(--green);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
#simulatorPage .hdr-r{margin-left:auto;display:flex;align-items:center;gap:10px}
#simulatorPage .hdr-badge{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.4);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);padding:5px 14px;border-radius:20px}


#simulatorPage .main{max-width:1600px;margin:0 auto;padding:28px 32px 64px;display:grid;grid-template-columns:440px 1fr;gap:26px;align-items:start}


#simulatorPage .panel{background:#fff;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-md)}
#simulatorPage .panel-hdr{padding:17px 24px 14px;border-bottom:1px solid var(--border);background:var(--cream-dark);display:flex;align-items:center;gap:11px}
#simulatorPage .panel-reset{margin-left:auto;display:inline-flex;align-items:center;gap:5px;padding:6px 11px;background:transparent;border:1px solid var(--border-2);border-radius:7px;font-family:var(--sans);font-size:11px;font-weight:500;color:var(--muted);cursor:pointer;transition:all .2s}
#simulatorPage .panel-reset:hover{background:var(--red-l);border-color:var(--red);color:var(--red)}
#simulatorPage .panel-icon{width:30px;height:30px;background:var(--ink);border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
#simulatorPage .panel-title{font-family:var(--serif);font-size:15px;color:var(--ink);font-weight:400}
#simulatorPage .panel-body{padding:22px 24px}


#simulatorPage .sec-lbl{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:22px 0 11px;display:flex;align-items:center;gap:8px}
#simulatorPage .sec-lbl::after{content:'';flex:1;height:1px;background:var(--border)}
#simulatorPage .sec-lbl:first-child{margin-top:0}


#simulatorPage .field{margin-bottom:18px}
#simulatorPage .field-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:8px}
#simulatorPage .field-lbl{font-size:13px;font-weight:500;color:var(--ink-2);flex:1}
#simulatorPage .field-inp{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--ink);background:var(--cream);padding:4px 10px;border-radius:6px;border:1px solid var(--border-2);width:110px;text-align:right;outline:none;transition:border-color .15s}
#simulatorPage .field-inp:focus{border-color:var(--green-d);background:#fff}
#simulatorPage .field-inp.pct{width:76px}

#simulatorPage input[type=range]{-webkit-appearance:none;width:100%;height:4px;background:var(--cream-dark);border-radius:2px;outline:none;cursor:pointer;margin-top:2px}
#simulatorPage input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:19px;height:19px;background:var(--ink);border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1.5px var(--ink),var(--shadow-sm);transition:transform .15s}
#simulatorPage input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.18)}
#simulatorPage input[type=range]::-moz-range-thumb{width:19px;height:19px;background:var(--ink);border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1.5px var(--ink)}


#simulatorPage .horizon-wrap{background:var(--cream);border:1px solid var(--border-2);border-radius:var(--r-sm);padding:14px 16px;margin-bottom:6px}
#simulatorPage .horizon-tabs{display:flex;gap:6px;margin-bottom:12px}
#simulatorPage .htab{flex:1;padding:7px 4px;border:1px solid var(--border-2);border-radius:7px;background:#fff;font-family:var(--sans);font-size:12px;font-weight:500;color:var(--muted);cursor:pointer;text-align:center;transition:all .18s}
#simulatorPage .htab.active{background:var(--ink);border-color:var(--ink);color:#fff}
#simulatorPage .htab:hover:not(.active){background:var(--cream-dark)}
#simulatorPage .freq-tabs{display:flex;gap:5px;margin-bottom:11px;background:var(--cream);padding:4px;border-radius:9px;border:1px solid var(--border)}
#simulatorPage .freq-tab{flex:1;padding:8px 6px;border:none;border-radius:6px;background:transparent;font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted);cursor:pointer;text-align:center;transition:all .2s;letter-spacing:0.01em}
#simulatorPage .freq-tab:hover:not(.active){background:rgba(255,255,255,0.6);color:var(--ink-2)}
#simulatorPage .freq-tab.active{background:var(--green);color:#fff;box-shadow:0 2px 6px rgba(76,175,118,0.25)}
#simulatorPage .presets-wrap{margin-bottom:22px;padding:14px 14px 12px;background:linear-gradient(135deg,var(--green-l) 0%,#fff 100%);border:1px solid rgba(76,175,118,.18);border-radius:var(--r);position:relative;overflow:hidden}
#simulatorPage .presets-hdr{display:flex;align-items:center;gap:7px;margin-bottom:11px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green-d)}
#simulatorPage .presets-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
#simulatorPage .preset-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;background:#fff;border:1px solid var(--border);border-radius:9px;cursor:pointer;text-align:left;transition:all .2s;font-family:var(--sans)}
#simulatorPage .preset-btn:hover{border-color:var(--green);box-shadow:0 4px 12px rgba(76,175,118,.18);transform:translateY(-1px)}
#simulatorPage .preset-emoji{font-size:18px;line-height:1;margin-bottom:3px}
#simulatorPage .preset-title{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.2}
#simulatorPage .preset-sub{font-size:10.5px;color:var(--muted);line-height:1.3}
#simulatorPage .horizon-fields{display:grid;gap:10px}
#simulatorPage .hfield{display:flex;align-items:center;gap:10px}
#simulatorPage .hfield label{font-size:12px;color:var(--muted);min-width:60px;font-weight:500}
#simulatorPage .hfield input{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--ink);background:#fff;border:1px solid var(--border-2);border-radius:6px;padding:6px 10px;outline:none;flex:1;transition:border-color .15s}
#simulatorPage .hfield input:focus{border-color:var(--green-d)}
#simulatorPage .horizon-result{margin-top:10px;padding:8px 10px;background:var(--ink);border-radius:7px;display:flex;align-items:center;gap:8px}
#simulatorPage .horizon-result-lbl{font-size:10px;color:rgba(255,255,255,.4);font-weight:600;letter-spacing:.07em;text-transform:uppercase;flex:1}
#simulatorPage .horizon-result-val{font-family:var(--mono);font-size:13px;color:#fff;font-weight:500}


#simulatorPage .evt-list{display:flex;flex-direction:column;gap:10px}
#simulatorPage .evt-item{background:var(--cream);border:1px solid var(--border);border-radius:var(--r-sm);padding:13px 15px;animation:slideIn .2s ease}
@keyframes slideIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
#simulatorPage .evt-row1{display:grid;grid-template-columns:1fr 90px 66px 30px;gap:7px;align-items:center;margin-bottom:9px}
#simulatorPage .evt-row2{display:flex;align-items:center;gap:9px}
#simulatorPage .inp{font-family:var(--sans);font-size:12.5px;font-weight:500;color:var(--ink);background:#fff;border:1px solid var(--border-2);border-radius:7px;padding:6px 10px;outline:none;transition:border-color .15s;width:100%}
#simulatorPage .inp:focus{border-color:var(--green-d)}
#simulatorPage .inp-month{font-family:var(--sans);font-size:12px;color:var(--muted);background:#fff;border:1px solid var(--border-2);border-radius:7px;padding:6px 8px;outline:none;width:90px;cursor:pointer}
#simulatorPage .inp-month:focus{border-color:var(--green-d)}
#simulatorPage .inp-year{font-family:var(--mono);font-size:12.5px;text-align:center;color:var(--ink);background:#fff;border:1px solid var(--border-2);border-radius:7px;padding:6px 6px;outline:none;width:66px}
#simulatorPage .inp-year:focus{border-color:var(--green-d)}
#simulatorPage .inp-amt{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--green-d);background:var(--green-l);border:1px solid rgba(46,125,82,.22);border-radius:7px;padding:6px 10px;width:130px;outline:none;transition:border-color .15s}
#simulatorPage .inp-amt:focus{border-color:var(--green-d)}
#simulatorPage .evt-del{width:30px;height:30px;border-radius:7px;border:1px solid var(--border);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all .15s;flex-shrink:0}
#simulatorPage .evt-del:hover{background:var(--red-l);border-color:var(--red);color:var(--red)}
#simulatorPage .evt-lbl{font-size:11px;color:var(--muted);white-space:nowrap}

#simulatorPage .add-btn{width:100%;padding:11px;border:1.5px dashed var(--border-2);border-radius:var(--r-sm);background:transparent;color:var(--muted);font-family:var(--sans);font-size:13px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:all .2s;margin-top:9px}
#simulatorPage .add-btn:hover{border-color:var(--green);color:var(--green-d);background:var(--green-l)}
#simulatorPage .evt-hint{margin-top:14px;padding:12px 14px;background:var(--cream);border:1px solid var(--border);border-radius:var(--r-sm);display:flex;gap:10px;font-size:11.5px;line-height:1.55;color:var(--muted);align-items:flex-start;color:var(--ink-3)}
#simulatorPage .evt-hint strong{color:var(--ink-2);font-weight:600;display:block;margin-bottom:2px}
#simulatorPage .evt-hint svg{color:var(--green-d)}


#simulatorPage .req{background:var(--ink);border-radius:var(--r-sm);padding:14px 16px;display:flex;align-items:center;gap:13px;margin-top:18px}
#simulatorPage .req-icon{width:36px;height:36px;background:var(--green);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
#simulatorPage .req-lbl{font-size:9.5px;color:rgba(255,255,255,.4);font-weight:700;letter-spacing:.09em;text-transform:uppercase}
#simulatorPage .req-val{font-family:var(--mono);font-size:20px;color:#fff;font-weight:500;transition:all .3s}


#simulatorPage .prog-wrap{margin-top:14px}
#simulatorPage .prog-top{display:flex;justify-content:space-between;margin-bottom:6px}
#simulatorPage .prog-lbl{font-size:10.5px;color:var(--muted);font-weight:500}
#simulatorPage .prog-track{height:5px;background:var(--cream-dark);border-radius:3px;overflow:hidden}
#simulatorPage .prog-fill{height:100%;background:var(--green);border-radius:3px;transition:width .55s cubic-bezier(.4,0,.2,1)}


#simulatorPage .metrics{display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px;margin-bottom:24px}
#simulatorPage .mcard{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
#simulatorPage .mcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
#simulatorPage .mcard.feat{background:var(--ink);border-color:var(--ink);grid-column:span 3;display:flex;align-items:center;gap:24px;padding:22px 26px}
#simulatorPage .mlbl{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
#simulatorPage .mcard.feat .mlbl{color:rgba(255,255,255,.35)}
#simulatorPage .mval{font-family:var(--serif);font-size:28px;color:var(--ink);line-height:1}
#simulatorPage .mcard.feat .mval{color:#fff;font-size:38px;flex:1}
#simulatorPage .msub{font-size:10.5px;color:var(--muted);margin-top:4px}
#simulatorPage .mcard.feat .msub{color:rgba(255,255,255,.35)}
#simulatorPage .mbadge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;padding:3px 10px;border-radius:20px;margin-top:6px}
#simulatorPage .bg-green{background:var(--green-l);color:var(--green-d)}
#simulatorPage .bg-gold{background:var(--gold-l);color:#7A5C1E}
#simulatorPage .bg-red{background:var(--red-l);color:var(--red)}
#simulatorPage .goal-side{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
#simulatorPage .goal-pct-lbl{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.45);text-align:right}


#simulatorPage .chart-wrap{background:#fff;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-md);margin-bottom:22px}
#simulatorPage .chart-hdr{padding:17px 24px 13px;border-bottom:1px solid var(--border);background:var(--cream-dark);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
#simulatorPage .chart-title{font-family:var(--serif);font-size:15px;color:var(--ink)}
#simulatorPage .legend{display:flex;gap:16px;align-items:center}
#simulatorPage .leg{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);font-weight:500}
#simulatorPage .leg-dot{width:10px;height:10px;border-radius:2px;flex-shrink:0}
#simulatorPage .chart-body{padding:20px 22px 14px;position:relative;height:330px}


#simulatorPage .ms-wrap{background:#fff;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)}
#simulatorPage .ms-hdr{padding:14px 24px;border-bottom:1px solid var(--border);background:var(--cream-dark);font-family:var(--serif);font-size:14px}
#simulatorPage .ms-list{padding:12px 24px;display:flex;flex-direction:column}
#simulatorPage .ms-item{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--border);animation:fadeIn .3s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
#simulatorPage .ms-item:last-child{border-bottom:none}
#simulatorPage .ms-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
#simulatorPage .ms-date{font-family:var(--mono);font-size:11px;color:var(--muted);min-width:80px}
#simulatorPage .ms-name{font-size:13px;font-weight:500;color:var(--ink-2);flex:1}
#simulatorPage .ms-amt{font-family:var(--mono);font-size:13px;font-weight:500}
#simulatorPage .c-green{color:var(--green-d)}
#simulatorPage .c-gold{color:var(--gold)}


#simulatorPage .pulse{animation:pulse .32s ease}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.035)}100%{transform:scale(1)}}


#simulatorPage .foot{text-align:center;padding:22px;font-size:11px;color:var(--muted);border-top:1px solid var(--border);margin-top:32px}


#simulatorPage .view-mode-bar{max-width:1320px;margin:18px auto -8px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
#simulatorPage .view-mode-tabs{display:inline-flex;background:#fff;border:1px solid var(--border);border-radius:11px;padding:4px;box-shadow:var(--shadow-sm)}
#simulatorPage .vmtab{padding:9px 18px;border:none;background:transparent;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;border-radius:8px;transition:all .2s;display:inline-flex;align-items:center;gap:7px}
#simulatorPage .vmtab.active{background:var(--ink);color:#fff}
#simulatorPage .vmtab:hover:not(.active){background:var(--cream)}
#simulatorPage .view-mode-hint{font-size:11.5px;color:var(--muted);font-style:italic}


#simulatorPage .compare-wrap{display:none;max-width:1320px;margin:0 auto;padding:24px 22px 40px}
#simulatorPage .compare-wrap.active{display:block}
#simulatorPage .main.hidden{display:none}
#simulatorPage .compare-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:24px}
#simulatorPage .cmp-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:0;overflow:hidden;box-shadow:var(--shadow-sm);transition:all .3s;display:flex;flex-direction:column}
#simulatorPage .cmp-card:hover{box-shadow:var(--shadow-md)}
#simulatorPage .cmp-card.winner{border-color:var(--green);box-shadow:0 0 0 1px var(--green),var(--shadow-md)}
#simulatorPage .cmp-card-hdr{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;background:linear-gradient(135deg,var(--cream) 0%,#fff 100%)}
#simulatorPage .cmp-card.winner .cmp-card-hdr{background:linear-gradient(135deg,var(--green-l) 0%,#fff 100%)}
#simulatorPage .cmp-num{width:28px;height:28px;background:var(--ink);color:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:14px;flex-shrink:0}
#simulatorPage .cmp-card.winner .cmp-num{background:var(--green)}
#simulatorPage .cmp-name-input{flex:1;border:none;background:transparent;font-family:var(--serif);font-size:16px;color:var(--ink);outline:none;padding:0;font-weight:400}
#simulatorPage .cmp-name-input:focus{outline:none}
#simulatorPage .cmp-badge{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:5px;background:var(--green);color:#fff;display:none}
#simulatorPage .cmp-card.winner .cmp-badge{display:inline-block}
#simulatorPage .cmp-body{padding:18px 20px;flex:1;display:flex;flex-direction:column;gap:11px}
#simulatorPage .cmp-field{display:flex;flex-direction:column;gap:4px}
#simulatorPage .cmp-field label{font-size:10.5px;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.05em}
#simulatorPage .cmp-field input{padding:8px 10px;border:1px solid var(--border-2);border-radius:7px;background:var(--cream);font-family:var(--sans);font-size:13px;color:var(--ink);outline:none;transition:all .15s;font-feature-settings:"tnum"}
#simulatorPage .cmp-field input:focus{border-color:var(--green);background:#fff;box-shadow:0 0 0 2px rgba(76,175,118,.1)}
#simulatorPage .cmp-field-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#simulatorPage .cmp-results{margin-top:auto;background:var(--ink);padding:16px 20px;color:#fff}
#simulatorPage .cmp-card.winner .cmp-results{background:linear-gradient(135deg,var(--green-d) 0%,var(--ink) 100%)}
#simulatorPage .cmp-result-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:11.5px}
#simulatorPage .cmp-result-row span:first-child{color:rgba(255,255,255,.45)}
#simulatorPage .cmp-result-row span:last-child{color:#fff;font-family:var(--mono);font-weight:500}
#simulatorPage .cmp-result-final{display:flex;flex-direction:column;align-items:flex-start;padding-top:10px;margin-top:8px;border-top:1px solid rgba(255,255,255,.08)}
#simulatorPage .cmp-result-final-lbl{font-size:9.5px;color:rgba(255,255,255,.4);font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px}
#simulatorPage .cmp-result-final-val{font-family:var(--serif);font-size:23px;color:#fff;line-height:1.1}
#simulatorPage .cmp-result-final-sub{font-size:10.5px;color:rgba(76,175,118,.9);margin-top:2px;font-family:var(--mono)}
#simulatorPage .cmp-summary{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:24px 28px;box-shadow:var(--shadow-sm)}
#simulatorPage .cmp-summary-hdr{display:flex;align-items:center;gap:10px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--border)}
#simulatorPage .cmp-summary-hdr svg{color:var(--green)}
#simulatorPage .cmp-summary-title{font-family:var(--serif);font-size:18px;color:var(--ink)}
#simulatorPage .cmp-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
#simulatorPage .cmp-summary-cell{padding:14px 16px;background:var(--cream);border-radius:var(--r-sm);border:1px solid var(--border)}
#simulatorPage .cmp-summary-cell.best{background:var(--green-l);border-color:rgba(76,175,118,.25)}
#simulatorPage .cmp-summary-lbl{font-size:10px;color:var(--muted);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
#simulatorPage .cmp-summary-val{font-family:var(--mono);font-size:15px;color:var(--ink);font-weight:500}
#simulatorPage .cmp-summary-name{font-family:var(--serif);font-size:13px;color:var(--ink);margin-top:3px;font-weight:400}
#simulatorPage .cmp-chart-wrap{margin-top:20px;padding:20px;background:var(--cream);border-radius:var(--r-sm)}
#simulatorPage .cmp-chart-title{font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:14px;text-align:center;letter-spacing:.04em;text-transform:uppercase}
#simulatorPage .cmp-chart{height:220px;width:100%}
#simulatorPage .cmp-legend{display:flex;justify-content:center;gap:18px;margin-top:14px;flex-wrap:wrap}
#simulatorPage .cmp-leg-item{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-2);font-weight:500}
#simulatorPage .cmp-leg-dot{width:11px;height:11px;border-radius:3px}

@media(max-width:1100px){#simulatorPage .main{grid-template-columns:1fr}#simulatorPage .metrics{grid-template-columns:1fr 1fr}#simulatorPage .mcard.feat{grid-column:span 2}#simulatorPage .compare-grid{grid-template-columns:1fr}#simulatorPage .cmp-summary-grid{grid-template-columns:1fr}}
@media(max-width:700px){#simulatorPage .main{padding:16px 12px 48px}#simulatorPage .metrics{grid-template-columns:1fr}#simulatorPage .mcard.feat{grid-column:span 1}#simulatorPage .hdr{padding:14px 18px}#simulatorPage .compare-wrap{padding:14px 12px 36px}}




/* ══════════════════════════════════════════════════════════
   DASHBOARD — Learnovate Member Portal · Beige & Black Theme
   ══════════════════════════════════════════════════════════ */

#dashboardPage {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--cream);
  z-index: 9998;
  overflow: hidden;
  animation: dashFadeIn 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  font-family: var(--sans);
  color: var(--ink);
}
#dashboardPage.active { display: flex; }
@keyframes dashFadeIn {
  from { opacity: 0; transform: scale(0.985); }
  to { opacity: 1; transform: scale(1); }
}

/* Subtle paper grain overlay inside dashboard */
#dashboardPage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(76,175,118,0.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(201,168,76,0.03) 0%, transparent 45%);
  pointer-events: none;
  z-index: 1;
}

/* ── SIDEBAR ── */
#dashboardPage .dash-sidebar {
  width: 270px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--ink) 0%, #161616 100%);
  display: flex;
  flex-direction: column;
  padding: 22px 0 16px;
  border-right: 1px solid rgba(255,255,255,0.04);
  position: relative;
  overflow: hidden;
  z-index: 2;
}
#dashboardPage .dash-sidebar::before {
  content: '';
  position: absolute;
  top: -120px; right: -80px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(76,175,118,0.10), transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
#dashboardPage .dash-sidebar::after {
  content: '';
  position: absolute;
  bottom: 200px; left: -100px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(201,168,76,0.05), transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
#dashboardPage .dash-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 22px 24px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  position: relative;
  z-index: 2;
}
#dashboardPage .dash-brand-logo {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--cream);
  padding: 5px;
  object-fit: contain;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
#dashboardPage .dash-brand-text {
  font-family: var(--serif);
  color: #fff;
  font-size: 17px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
#dashboardPage .dash-brand-sub {
  font-size: 9px;
  color: var(--green);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: block;
  margin-top: 3px;
}
#dashboardPage .dash-nav {
  flex: 1;
  padding: 14px 14px;
  overflow-y: auto;
  position: relative;
  z-index: 2;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
#dashboardPage .dash-nav::-webkit-scrollbar { width: 4px; }
#dashboardPage .dash-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
#dashboardPage .dash-nav-section {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  padding: 16px 14px 8px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
#dashboardPage .dash-nav-section::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(255,255,255,0.08), transparent);
}
#dashboardPage .dash-nav-section:first-child { margin-top: 0; padding-top: 4px; }
#dashboardPage .dash-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.62);
  transition: all 0.22s ease;
  position: relative;
  letter-spacing: -0.005em;
}
#dashboardPage .dash-nav-link svg {
  flex-shrink: 0;
  opacity: 0.75;
  transition: opacity 0.22s, transform 0.22s;
}
#dashboardPage .dash-nav-link:hover {
  background: rgba(255,255,255,0.04);
  color: #fff;
}
#dashboardPage .dash-nav-link:hover svg {
  opacity: 1;
  transform: translateX(1px);
}
#dashboardPage .dash-nav-link.active {
  background: linear-gradient(135deg, rgba(76,175,118,0.16), rgba(76,175,118,0.06));
  color: #fff;
  box-shadow: inset 3px 0 0 var(--green);
}
#dashboardPage .dash-nav-link.active svg {
  color: var(--green);
  opacity: 1;
}
#dashboardPage .dash-nav-badge {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  background: var(--gold);
  color: #1a1308;
  padding: 2px 7px;
  border-radius: 10px;
  letter-spacing: 0.05em;
}
#dashboardPage .dash-sidebar-footer {
  padding: 14px 18px 4px;
  border-top: 1px solid rgba(255,255,255,0.06);
  position: relative;
  z-index: 2;
}
#dashboardPage .dash-user-mini {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 11px;
  position: relative;
  overflow: hidden;
}
#dashboardPage .dash-user-mini::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(76,175,118,0.08), transparent);
  pointer-events: none;
}
#dashboardPage .dash-user-avatar {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--green), var(--green-d));
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 15px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(76,175,118,0.3);
  position: relative;
  z-index: 1;
}
#dashboardPage .dash-user-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.005em;
  position: relative;
  z-index: 1;
}
#dashboardPage .dash-user-status {
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 5px;
  position: relative;
  z-index: 1;
}
#dashboardPage .dash-user-status::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--green);
}
#dashboardPage .dash-back-site {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.55);
  border-radius: 9px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  width: 100%;
  transition: all 0.2s;
  letter-spacing: 0.01em;
}
#dashboardPage .dash-back-site:hover {
  background: rgba(255,255,255,0.05);
  color: #fff;
  border-color: rgba(255,255,255,0.18);
}

/* ── MAIN CONTENT ── */
#dashboardPage .dash-main {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  background: var(--cream);
  position: relative;
  z-index: 2;
}
#dashboardPage .dash-topbar {
  background: rgba(245, 240, 232, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  padding: 16px 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
  gap: 20px;
}
#dashboardPage .dash-greeting {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
#dashboardPage .dash-greeting-eyebrow {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-d);
  margin-bottom: 3px;
}
#dashboardPage .dash-greeting-title {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
#dashboardPage .dash-greeting-sub {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 3px;
  font-style: italic;
}
#dashboardPage .dash-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
#dashboardPage .dash-search {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 9px 14px;
  width: 280px;
  transition: all 0.22s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
#dashboardPage .dash-search:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(76,175,118,0.08), 0 1px 2px rgba(0,0,0,0.02);
}
#dashboardPage .dash-search input {
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  flex: 1;
  min-width: 0;
}
#dashboardPage .dash-search svg { color: var(--muted); flex-shrink: 0; }
#dashboardPage .dash-icon-btn {
  width: 38px; height: 38px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.22s;
  position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
#dashboardPage .dash-icon-btn:hover {
  background: var(--cream-dark);
  color: var(--ink);
  border-color: var(--border-2);
  transform: translateY(-1px);
}
#dashboardPage .dash-icon-btn .dot {
  position: absolute;
  top: 7px; right: 7px;
  width: 8px; height: 8px;
  background: var(--green);
  border: 2px solid #fff;
  border-radius: 50%;
}

#dashboardPage .dash-content {
  padding: 28px 36px 60px;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ── TAB PANELS ── */
#dashboardPage .dash-tab-panel { display: none; animation: tabFade 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
#dashboardPage .dash-tab-panel.active { display: block; }
@keyframes tabFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── HERO BANNER (sophisticated) ── */
#dashboardPage .dash-hero {
  background:
    radial-gradient(ellipse 80% 100% at 100% 0%, rgba(76,175,118,0.18) 0%, transparent 50%),
    radial-gradient(ellipse 60% 80% at 0% 100%, rgba(201,168,76,0.08) 0%, transparent 50%),
    linear-gradient(135deg, var(--ink) 0%, #1f1f1f 100%);
  border-radius: 20px;
  padding: 36px 40px;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin-bottom: 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  border: 1px solid rgba(255,255,255,0.04);
}
#dashboardPage .dash-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  right: 0; bottom: 0;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,0.02) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.15) 100%);
  pointer-events: none;
}
#dashboardPage .dash-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  background: rgba(76,175,118,0.14);
  border: 1px solid rgba(76,175,118,0.28);
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
  position: relative;
  z-index: 2;
}
#dashboardPage .dash-hero-tag-dot {
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--green);
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}
#dashboardPage .dash-hero-title {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.18;
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
  letter-spacing: -0.015em;
}
#dashboardPage .dash-hero-title em { font-style: italic; color: var(--green); }
#dashboardPage .dash-hero-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  line-height: 1.65;
  max-width: 540px;
  position: relative;
  z-index: 2;
}
#dashboardPage .dash-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 26px;
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 11px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.28s;
  position: relative;
  z-index: 2;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(76,175,118,0.35);
  letter-spacing: -0.005em;
}
#dashboardPage .dash-hero-cta:hover {
  background: var(--green-d);
  box-shadow: 0 8px 24px rgba(76,175,118,0.45);
  transform: translateY(-1px);
}
#dashboardPage .dash-hero-cta.outline {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85);
  box-shadow: none;
}
#dashboardPage .dash-hero-cta.outline:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.32);
  color: #fff;
}

/* ── STAT CARDS (sophisticated) ── */
#dashboardPage .dash-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
#dashboardPage .dash-stat {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
#dashboardPage .dash-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--green), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}
#dashboardPage .dash-stat:hover {
  border-color: var(--border-2);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(17,17,17,0.07);
}
#dashboardPage .dash-stat:hover::before { transform: scaleX(1); }
#dashboardPage .dash-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
#dashboardPage .dash-stat-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
#dashboardPage .dash-stat-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255,255,255,0.4), transparent);
  pointer-events: none;
}
#dashboardPage .dash-stat-icon.green { background: var(--green-l); color: var(--green-d); }
#dashboardPage .dash-stat-icon.ink { background: rgba(17,17,17,0.06); color: var(--ink); }
#dashboardPage .dash-stat-icon.gold { background: rgba(201,168,76,0.18); color: #8B6F2D; }
#dashboardPage .dash-stat-icon.cream { background: var(--cream-deeper); color: var(--ink-2); }
#dashboardPage .dash-stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 7px;
  font-family: var(--mono);
  letter-spacing: -0.01em;
}
#dashboardPage .dash-stat-trend.up { background: var(--green-l); color: var(--green-d); }
#dashboardPage .dash-stat-trend.down { background: var(--red-l); color: var(--red); }
#dashboardPage .dash-stat-trend.neutral { background: var(--cream-dark); color: var(--ink-3); }
#dashboardPage .dash-stat-label {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 5px;
  letter-spacing: 0.01em;
}
#dashboardPage .dash-stat-value {
  font-family: var(--serif);
  font-size: 25px;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-feature-settings: "tnum";
}
#dashboardPage .dash-stat-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
  font-feature-settings: "tnum";
}

/* ── SECTION TITLES ── */
#dashboardPage .dash-section { margin-bottom: 32px; }
#dashboardPage .dash-section-hdr {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 16px;
  flex-wrap: wrap;
}
#dashboardPage .dash-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  color: var(--green-d);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
#dashboardPage .dash-section-eyebrow::before {
  content: '';
  width: 16px;
  height: 1px;
  background: var(--green);
}
#dashboardPage .dash-section-title {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
#dashboardPage .dash-section-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 3px;
  font-style: italic;
}

/* ── TOOL CARDS ── */
#dashboardPage .dash-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
#dashboardPage .dash-tool {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px 26px 24px;
  cursor: pointer;
  transition: all 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#dashboardPage .dash-tool::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 60% at 100% 0%, rgba(76,175,118,0.06) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
#dashboardPage .dash-tool::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--green), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
#dashboardPage .dash-tool:hover {
  border-color: var(--border-2);
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(17,17,17,0.09);
}
#dashboardPage .dash-tool:hover::before { opacity: 1; }
#dashboardPage .dash-tool:hover::after { transform: scaleX(1); }
#dashboardPage .dash-tool-icon {
  width: 52px; height: 52px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  background: linear-gradient(135deg, var(--ink) 0%, #1f1f1f 100%);
  color: var(--green);
  position: relative;
  box-shadow: 0 4px 12px rgba(17,17,17,0.18);
}
#dashboardPage .dash-tool-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), transparent);
  pointer-events: none;
}
#dashboardPage .dash-tool-icon.gold {
  background: linear-gradient(135deg, #B8842D 0%, #C9A84C 100%);
  color: #fff;
}
#dashboardPage .dash-tool-icon.green {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-d) 100%);
  color: #fff;
}
#dashboardPage .dash-tool-title {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 7px;
  letter-spacing: -0.01em;
}
#dashboardPage .dash-tool-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 20px;
  flex: 1;
}
#dashboardPage .dash-tool-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--green-d);
  align-self: flex-start;
  padding: 8px 16px;
  background: var(--green-l);
  border-radius: 8px;
  transition: all 0.25s;
  letter-spacing: -0.005em;
}
#dashboardPage .dash-tool:hover .dash-tool-cta {
  background: var(--green);
  color: #fff;
  gap: 10px;
  box-shadow: 0 3px 10px rgba(76,175,118,0.3);
}
#dashboardPage .dash-tool-badge {
  position: absolute;
  top: 18px; right: 18px;
  font-size: 9px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--green-l);
  color: var(--green-d);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#dashboardPage .dash-tool-badge.gold {
  background: rgba(201,168,76,0.18);
  color: #8B6F2D;
}

/* ── CHART CARD ── */
#dashboardPage .dash-chart-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px 30px 24px;
  position: relative;
}
#dashboardPage .dash-chart-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
}
#dashboardPage .dash-chart-hdr h3 {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
#dashboardPage .dash-chart-tabs {
  display: flex;
  gap: 3px;
  background: var(--cream);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--border);
}
#dashboardPage .dash-chart-tab {
  padding: 6px 14px;
  border: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s;
  letter-spacing: 0.01em;
}
#dashboardPage .dash-chart-tab.active {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.12);
}
#dashboardPage .dash-chart-tab:hover:not(.active) { color: var(--ink-2); }
#dashboardPage .dash-chart-area {
  height: 240px;
  width: 100%;
  position: relative;
}
#dashboardPage .dash-chart-legend {
  display: flex;
  gap: 22px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
#dashboardPage .dash-chart-leg-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--ink-3);
  font-weight: 500;
}
#dashboardPage .dash-chart-leg-dot {
  width: 11px; height: 11px;
  border-radius: 3px;
}

/* ── TWO COLUMN GRID ── */
#dashboardPage .dash-two-col {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 20px;
  margin-bottom: 32px;
}

/* ── SUGGESTIONS ── */
#dashboardPage .dash-suggest-card {
  background:
    linear-gradient(135deg, #fff 0%, var(--green-l) 100%);
  border: 1px solid rgba(76,175,118,0.22);
  border-radius: 18px;
  padding: 24px 26px;
  position: relative;
  overflow: hidden;
}
#dashboardPage .dash-suggest-card::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(76,175,118,0.12), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
#dashboardPage .dash-suggest-hdr {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}
#dashboardPage .dash-suggest-icon {
  width: 40px; height: 40px;
  background: var(--ink);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  flex-shrink: 0;
}
#dashboardPage .dash-suggest-title {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.005em;
}
#dashboardPage .dash-suggest-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  font-style: italic;
}
#dashboardPage .dash-suggest-list { list-style: none; padding: 0; margin: 0; position: relative; z-index: 1; }
#dashboardPage .dash-suggest-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(76,175,118,0.14);
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.6;
}
#dashboardPage .dash-suggest-item:last-child { border-bottom: none; }
#dashboardPage .dash-suggest-bullet {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-d);
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--serif);
}

/* ── EDUCATION MODULES ── */
#dashboardPage .dash-edu-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
#dashboardPage .dash-edu {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 18px;
  cursor: pointer;
  transition: all 0.28s;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
#dashboardPage .dash-edu::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s;
}
#dashboardPage .dash-edu:hover {
  transform: translateY(-3px);
  border-color: var(--border-2);
  box-shadow: 0 10px 24px rgba(17,17,17,0.06);
}
#dashboardPage .dash-edu:hover::before { transform: scaleX(1); }
#dashboardPage .dash-edu-emoji {
  font-size: 26px;
  margin-bottom: 6px;
  line-height: 1;
}
#dashboardPage .dash-edu-title {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -0.005em;
}
#dashboardPage .dash-edu-meta {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: auto;
  padding-top: 6px;
  font-style: italic;
}

/* ── BUDGET PANEL ── */
#dashboardPage .budget-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.4fr;
  gap: 20px;
}
#dashboardPage .budget-form-card,
#dashboardPage .budget-summary-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px 28px;
  position: relative;
}
#dashboardPage .budget-form-hdr {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 9px;
  letter-spacing: -0.01em;
}
#dashboardPage .budget-form-hdr svg { color: var(--green-d); }
#dashboardPage .budget-row {
  display: grid;
  grid-template-columns: 1fr 120px auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
#dashboardPage .budget-row input {
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 9px 13px;
  font-family: var(--sans);
  font-size: 13px;
  outline: none;
  background: var(--cream);
  transition: all 0.16s;
  color: var(--ink);
  font-feature-settings: "tnum";
}
#dashboardPage .budget-row input:focus {
  border-color: var(--green);
  background: #fff;
  box-shadow: 0 0 0 2px rgba(76,175,118,0.1);
}
#dashboardPage .budget-row input.amt { text-align: right; }
#dashboardPage .budget-row .del-btn {
  width: 32px; height: 32px;
  border: 1px solid var(--border);
  background: var(--cream);
  border-radius: 8px;
  cursor: pointer;
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.18s;
}
#dashboardPage .budget-row .del-btn:hover {
  background: var(--red-l);
  border-color: var(--red);
  color: var(--red);
}
#dashboardPage .budget-add-btn {
  margin-top: 10px;
  width: 100%;
  padding: 10px;
  border: 1.5px dashed var(--border-2);
  background: transparent;
  border-radius: 9px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
#dashboardPage .budget-add-btn:hover {
  border-color: var(--green);
  color: var(--green-d);
  background: var(--green-l);
}
#dashboardPage .budget-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 22px 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
#dashboardPage .budget-section-title:first-of-type { margin-top: 0; }
#dashboardPage .budget-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
#dashboardPage .budget-section-title .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}
#dashboardPage .budget-section-title.income .dot { background: var(--green); }
#dashboardPage .budget-section-title.fixed .dot { background: var(--ink); }
#dashboardPage .budget-section-title.variable .dot { background: var(--gold); }

#dashboardPage .budget-totals {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 22px;
}
#dashboardPage .budget-total {
  background: var(--cream);
  border-radius: 13px;
  padding: 18px 16px;
  text-align: center;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
#dashboardPage .budget-total::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}
#dashboardPage .budget-total.income { background: linear-gradient(135deg, var(--green-l) 0%, #fff 100%); border-color: rgba(76,175,118,0.25); }
#dashboardPage .budget-total.income::before { background: var(--green); }
#dashboardPage .budget-total.expense { background: linear-gradient(135deg, var(--red-l) 0%, #fff 100%); border-color: rgba(217,79,61,0.18); }
#dashboardPage .budget-total.expense::before { background: var(--red); }
#dashboardPage .budget-total.savings { background: linear-gradient(135deg, var(--gold-l) 0%, #fff 100%); border-color: rgba(201,168,76,0.3); }
#dashboardPage .budget-total.savings::before { background: var(--gold); }
#dashboardPage .budget-total-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  font-weight: 700;
  margin-bottom: 5px;
}
#dashboardPage .budget-total-val {
  font-family: var(--serif);
  font-size: 23px;
  color: var(--ink);
  line-height: 1.05;
  font-feature-settings: "tnum";
  letter-spacing: -0.01em;
}
#dashboardPage .budget-total-sub {
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
  font-style: italic;
}

/* Donut chart wrapper */
#dashboardPage .budget-donut-wrap {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  align-items: center;
  padding: 20px;
  background: var(--cream);
  border-radius: 14px;
  border: 1px solid var(--border);
  margin-bottom: 18px;
}
#dashboardPage .budget-donut-canvas {
  width: 200px;
  height: 200px;
  position: relative;
}
#dashboardPage .budget-donut-canvas canvas {
  width: 200px;
  height: 200px;
}
#dashboardPage .budget-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
}
#dashboardPage .budget-donut-center-lbl {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 3px;
}
#dashboardPage .budget-donut-center-val {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-feature-settings: "tnum";
}
#dashboardPage .budget-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
#dashboardPage .budget-leg-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}
#dashboardPage .budget-leg-color {
  width: 14px; height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
}
#dashboardPage .budget-leg-label {
  flex: 1;
  color: var(--ink-2);
  font-weight: 500;
}
#dashboardPage .budget-leg-amount {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
}
#dashboardPage .budget-leg-pct {
  font-size: 10.5px;
  color: var(--muted);
  margin-left: 4px;
}

#dashboardPage .budget-bar-wrap { margin-bottom: 18px; }
#dashboardPage .budget-bar-top {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--ink-3); font-weight: 500;
  margin-bottom: 7px;
}
#dashboardPage .budget-bar-top strong { color: var(--ink); font-weight: 700; }
#dashboardPage .budget-bar {
  height: 11px;
  background: var(--cream-dark);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
#dashboardPage .budget-bar-fill {
  height: 100%;
  background: linear-gradient(to right, var(--green), var(--green-d));
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 6px;
}
#dashboardPage .budget-bar-fill.over { background: linear-gradient(to right, var(--red), #b03e2f); }
#dashboardPage .budget-bar-target {
  position: absolute;
  top: -2px; bottom: -2px;
  left: 20%;
  width: 1.5px;
  background: var(--ink);
  opacity: 0.3;
}
#dashboardPage .budget-bar-target::after {
  content: '20%';
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--muted);
  font-weight: 700;
}
#dashboardPage .budget-tip {
  background: linear-gradient(135deg, var(--cream-dark) 0%, transparent 100%);
  border-left: 3px solid var(--green);
  padding: 13px 16px;
  border-radius: 0 10px 10px 0;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.6;
}
#dashboardPage .budget-learny-credit {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 0 4px;
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}
#dashboardPage .budget-learny-credit strong {
  color: var(--green-d);
  font-weight: 600;
  font-style: normal;
}
#dashboardPage .budget-learny-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--green-l);
  flex-shrink: 0;
  object-fit: cover;
}
#dashboardPage .budget-ai-btn {
  margin-top: 18px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--ink) 0%, #1f1f1f 100%);
  border: 1px solid var(--ink);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  overflow: hidden;
  text-align: left;
  color: #fff;
}
#dashboardPage .budget-ai-btn::before {
  content: '';
  position: absolute;
  top: -100px; right: -50px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(76,175,118,0.18), transparent 65%);
  border-radius: 50%;
  pointer-events: none;
  transition: opacity 0.3s;
}
#dashboardPage .budget-ai-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.22);
}
#dashboardPage .budget-ai-btn:hover::before { opacity: 1.5; }
#dashboardPage .budget-ai-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
#dashboardPage .budget-ai-btn-icon {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--green), var(--green-d));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 3px 10px rgba(76,175,118,0.4);
}
#dashboardPage .budget-ai-btn.thinking .budget-ai-btn-icon {
  animation: aiPulse 1.4s ease-in-out infinite;
}
@keyframes aiPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 3px 10px rgba(76,175,118,0.4); }
  50% { transform: scale(1.08); box-shadow: 0 3px 14px rgba(76,175,118,0.6); }
}
#dashboardPage .budget-ai-btn-label {
  font-family: var(--serif);
  font-size: 14.5px;
  color: #fff;
  letter-spacing: -0.005em;
  position: relative;
  z-index: 1;
  display: block;
  line-height: 1.2;
}
#dashboardPage .budget-ai-btn-sub {
  font-size: 11.5px;
  color: rgba(255,255,255,0.55);
  font-style: italic;
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 2px;
}
#dashboardPage .budget-ai-btn > span:not(.budget-ai-btn-icon) {
  flex: 1;
  position: relative;
  z-index: 1;
}
#dashboardPage .budget-ai-result {
  margin-top: 16px;
  display: none;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(76,175,118,0.22);
  animation: aiResultIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
#dashboardPage .budget-ai-result.visible { display: block; }
@keyframes aiResultIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
#dashboardPage .budget-ai-hdr {
  background: linear-gradient(135deg, var(--green-l) 0%, #fff 100%);
  padding: 16px 20px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid rgba(76,175,118,0.18);
}
#dashboardPage .budget-ai-hdr-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--green);
  object-fit: cover;
  flex-shrink: 0;
}
#dashboardPage .budget-ai-hdr-text { flex: 1; }
#dashboardPage .budget-ai-hdr-name {
  font-family: var(--serif);
  font-size: 14.5px;
  color: var(--ink);
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 6px;
}
#dashboardPage .budget-ai-hdr-name::after {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
}
#dashboardPage .budget-ai-hdr-tag {
  font-size: 10px;
  color: var(--green-d);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
}
#dashboardPage .budget-ai-body {
  background: #fff;
  padding: 18px 22px 20px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-2);
}
#dashboardPage .budget-ai-section {
  margin-bottom: 16px;
}
#dashboardPage .budget-ai-section:last-child { margin-bottom: 0; }
#dashboardPage .budget-ai-section-title {
  font-family: var(--serif);
  font-size: 13.5px;
  color: var(--ink);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  letter-spacing: -0.005em;
}
#dashboardPage .budget-ai-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
#dashboardPage .budget-ai-list li {
  padding: 8px 0 8px 20px;
  position: relative;
  border-bottom: 1px dashed var(--border);
}
#dashboardPage .budget-ai-list li:last-child { border-bottom: none; }
#dashboardPage .budget-ai-list li::before {
  content: '';
  position: absolute;
  left: 4px; top: 14px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
}
#dashboardPage .budget-ai-list li strong { color: var(--ink); font-weight: 600; }
#dashboardPage .budget-ai-cta {
  margin-top: 14px;
  padding: 13px 16px;
  background: linear-gradient(135deg, rgba(201,168,76,0.14) 0%, rgba(201,168,76,0.06) 100%);
  border: 1px solid rgba(201,168,76,0.32);
  border-radius: 11px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
#dashboardPage .budget-ai-cta strong { color: #8B6F2D; }
#dashboardPage .budget-ai-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 7px 14px;
  background: var(--gold);
  color: #1f1f1f;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s;
}
#dashboardPage .budget-ai-cta-link:hover {
  background: #b8932e;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(201,168,76,0.4);
}
#dashboardPage .budget-ai-thinking {
  background: #fff;
  padding: 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
#dashboardPage .budget-ai-thinking-dots {
  display: inline-flex;
  gap: 4px;
}
#dashboardPage .budget-ai-thinking-dots span {
  width: 7px; height: 7px;
  background: var(--green);
  border-radius: 50%;
  animation: thinkingDot 1.4s infinite ease-in-out;
}
#dashboardPage .budget-ai-thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
#dashboardPage .budget-ai-thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes thinkingDot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}
#dashboardPage .budget-ai-thinking-text {
  font-size: 12.5px;
  color: var(--muted);
  font-style: italic;
}

/* ── GOALS PANEL (richly redesigned) ── */
#dashboardPage .goals-toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  align-items: center;
}
#dashboardPage .goals-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
#dashboardPage .goals-stat {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 14px 18px;
}
#dashboardPage .goals-stat-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
#dashboardPage .goals-stat-val {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-feature-settings: "tnum";
}

#dashboardPage .goal-add-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s;
  letter-spacing: -0.005em;
}
#dashboardPage .goal-add-cta:hover {
  background: #000;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}

#dashboardPage .goals-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
#dashboardPage .goal-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px 26px;
  position: relative;
  transition: all 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
#dashboardPage .goal-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(to right, var(--green), var(--gold));
  opacity: 0;
  transition: opacity 0.3s;
}
#dashboardPage .goal-card:hover {
  border-color: var(--border-2);
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(17,17,17,0.07);
}
#dashboardPage .goal-card:hover::before { opacity: 1; }
#dashboardPage .goal-card.completed::before {
  opacity: 1;
  background: var(--green);
}
#dashboardPage .goal-card.completed { background: linear-gradient(135deg, #fff 0%, var(--green-l) 100%); }
#dashboardPage .goal-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}
#dashboardPage .goal-emoji-wrap {
  width: 48px; height: 48px;
  background: var(--cream);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
#dashboardPage .goal-card.completed .goal-emoji-wrap {
  background: var(--green);
  border-color: var(--green);
}
#dashboardPage .goal-completed-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--green);
  color: #fff;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#dashboardPage .goal-title {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
#dashboardPage .goal-deadline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--muted);
  margin-bottom: 16px;
}
#dashboardPage .goal-amounts {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  font-feature-settings: "tnum";
}
#dashboardPage .goal-amount-current {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
#dashboardPage .goal-amount-target {
  font-size: 12px;
  color: var(--muted);
}
#dashboardPage .goal-amount-target strong { color: var(--ink-2); font-weight: 600; }
#dashboardPage .goal-bar {
  height: 10px;
  background: var(--cream-dark);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 8px;
  position: relative;
}
#dashboardPage .goal-bar-fill {
  height: 100%;
  background: linear-gradient(to right, var(--green), var(--green-d));
  border-radius: 5px;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
#dashboardPage .goal-card.completed .goal-bar-fill { background: var(--green); }
#dashboardPage .goal-bar-row {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--muted);
  margin-bottom: 16px;
}
#dashboardPage .goal-bar-row strong { color: var(--green-d); font-family: var(--mono); font-weight: 700; }
#dashboardPage .goal-monthly {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.45;
}
#dashboardPage .goal-monthly svg { color: var(--green-d); flex-shrink: 0; }
#dashboardPage .goal-monthly strong { color: var(--ink); font-weight: 600; }
#dashboardPage .goal-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
#dashboardPage .goal-action-btn {
  padding: 9px 16px;
  border: 1px solid var(--border-2);
  background: #fff;
  border-radius: 9px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.22s;
  display: inline-flex; align-items: center; gap: 5px;
  letter-spacing: -0.005em;
  position: relative;
  z-index: 5;
}
#dashboardPage .goal-action-btn.primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  box-shadow: 0 3px 8px rgba(17,17,17,0.15);
}
#dashboardPage .goal-action-btn.primary:hover {
  background: #000;
  box-shadow: 0 5px 14px rgba(17,17,17,0.25);
  transform: translateY(-1px);
}
#dashboardPage .goal-action-btn:hover {
  background: var(--cream-dark);
  border-color: var(--ink-3);
  color: var(--ink);
  transform: translateY(-1px);
}
#dashboardPage .goal-action-btn.danger {
  background: rgba(217,79,61,0.06);
  border-color: rgba(217,79,61,0.25);
  color: var(--red);
}
#dashboardPage .goal-action-btn.danger:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 5px 14px rgba(217,79,61,0.3);
  transform: translateY(-1px);
}

#dashboardPage .goal-card.add {
  border: 1.5px dashed var(--border-2);
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-height: 280px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  gap: 12px;
  text-align: center;
  padding: 30px;
}
#dashboardPage .goal-card.add:hover {
  border-color: var(--green);
  color: var(--green-d);
  background: var(--green-l);
}
#dashboardPage .goal-card.add svg { stroke: currentColor; }

/* ── CUSTOM CONFIRM DIALOG ── */
.lc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17,17,17,0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 99900;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.lc-overlay.active {
  display: flex;
  animation: fadeIn 0.22s ease;
}
.lc-modal {
  background: #fff;
  border-radius: 18px;
  width: 100%;
  max-width: 420px;
  padding: 32px 30px 26px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.32);
  animation: scaleIn 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  text-align: center;
  font-family: var(--sans);
}
.lc-icon {
  font-size: 38px;
  margin-bottom: 12px;
}
.lc-title {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.lc-message {
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.6;
  margin-bottom: 22px;
}
.lc-actions {
  display: flex;
  gap: 10px;
}
.lc-btn {
  flex: 1;
  padding: 12px 18px;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  letter-spacing: -0.005em;
  border: 1px solid transparent;
}
.lc-cancel {
  background: var(--cream);
  color: var(--ink-2);
  border-color: var(--border-2);
}
.lc-cancel:hover {
  background: var(--cream-dark);
  border-color: var(--ink-3);
  color: var(--ink);
}
.lc-confirm {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  box-shadow: 0 4px 12px rgba(17,17,17,0.18);
}
.lc-confirm:hover {
  background: #000;
  box-shadow: 0 6px 18px rgba(17,17,17,0.28);
  transform: translateY(-1px);
}
.lc-confirm.danger {
  background: var(--red);
  border-color: var(--red);
  box-shadow: 0 4px 12px rgba(217,79,61,0.3);
}
.lc-confirm.danger:hover {
  background: #b8412e;
  box-shadow: 0 6px 18px rgba(217,79,61,0.42);
}

/* ── GOAL MODAL ── */
.goal-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17,17,17,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.goal-modal-overlay.active { display: flex; animation: fadeIn 0.25s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.goal-modal {
  background: #fff;
  border-radius: 18px;
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 30px 60px rgba(0,0,0,0.25);
  animation: scaleIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.goal-modal-hdr {
  padding: 24px 28px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.goal-modal-title {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.goal-modal-close {
  width: 32px; height: 32px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.goal-modal-close:hover { background: var(--cream-dark); color: var(--ink); }
.goal-modal-body {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.goal-emoji-picker {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}
.goal-emoji-pick {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--cream);
  border: 1.5px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
  font-size: 22px;
  transition: all 0.18s;
}
.goal-emoji-pick:hover { background: var(--cream-dark); }
.goal-emoji-pick.selected {
  background: var(--green-l);
  border-color: var(--green);
  transform: scale(1.05);
}

.goal-input-group { display: flex; flex-direction: column; gap: 5px; }
.goal-input-group label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.goal-input-group input,
.goal-input-group select,
.goal-input-group textarea {
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--cream);
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink);
  outline: none;
  transition: all 0.18s;
}
.goal-input-group input:focus,
.goal-input-group select:focus,
.goal-input-group textarea:focus {
  border-color: var(--green);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(76,175,118,0.08);
}
.goal-input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.goal-modal-footer {
  padding: 18px 28px 24px;
  border-top: 1px solid var(--border);
  display: flex; gap: 10px; justify-content: flex-end;
  background: linear-gradient(135deg, var(--cream) 0%, transparent 100%);
}
.goal-modal-btn {
  padding: 11px 22px;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  letter-spacing: -0.005em;
  border: 1px solid var(--border-2);
  background: #fff;
  color: var(--ink-2);
}
.goal-modal-btn:hover {
  background: var(--cream-dark);
  border-color: var(--ink-3);
  color: var(--ink);
}
.goal-modal-btn.primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  box-shadow: 0 4px 12px rgba(17,17,17,0.15);
}
.goal-modal-btn.primary:hover {
  background: #000;
  box-shadow: 0 6px 18px rgba(17,17,17,0.25);
  transform: translateY(-1px);
}
.goal-template-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}
.goal-template-btn {
  padding: 10px 12px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 9px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.18s;
}
.goal-template-btn:hover {
  border-color: var(--green);
  background: var(--green-l);
  color: var(--green-d);
}
.goal-template-emoji { font-size: 16px; }

/* ── PROFILE PANEL ── */
#dashboardPage .profile-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.4fr;
  gap: 20px;
}
#dashboardPage .profile-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px 30px;
  position: relative;
  overflow: hidden;
}
#dashboardPage .profile-card.identity {
  background: linear-gradient(165deg, #fff 0%, var(--cream) 100%);
}
#dashboardPage .profile-card.identity::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(76,175,118,0.08), transparent 70%);
  border-radius: 50%;
}
#dashboardPage .profile-avatar-big {
  width: 90px; height: 90px;
  background: linear-gradient(135deg, var(--green), var(--green-d));
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 36px;
  color: #fff;
  margin: 0 auto 16px;
  box-shadow: 0 8px 20px rgba(76,175,118,0.25);
  position: relative;
  z-index: 1;
}
#dashboardPage .profile-name {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink);
  text-align: center;
  margin-bottom: 5px;
  letter-spacing: -0.01em;
}
#dashboardPage .profile-email {
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
  margin-bottom: 18px;
  font-feature-settings: "tnum";
}
#dashboardPage .profile-since {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--green-l);
  border-radius: 20px;
  font-size: 11px;
  color: var(--green-d);
  font-weight: 600;
  margin: 0 auto 22px;
}
#dashboardPage .profile-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}
#dashboardPage .profile-stat {
  text-align: center;
  padding: 13px 10px;
  background: var(--cream);
  border-radius: 11px;
  border: 1px solid var(--border);
}
#dashboardPage .profile-stat-val {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
#dashboardPage .profile-stat-lbl {
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#dashboardPage .profile-form { display: flex; flex-direction: column; gap: 15px; }
#dashboardPage .profile-form-grp { display: flex; flex-direction: column; gap: 6px; }
#dashboardPage .profile-form-grp label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#dashboardPage .profile-form-grp input,
#dashboardPage .profile-form-grp select {
  padding: 11px 15px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--cream);
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink);
  outline: none;
  transition: all 0.18s;
}
#dashboardPage .profile-form-grp input:focus,
#dashboardPage .profile-form-grp select:focus {
  border-color: var(--green);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(76,175,118,0.1);
}
#dashboardPage .profile-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#dashboardPage .profile-save-btn {
  padding: 12px;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s;
  margin-top: 8px;
  letter-spacing: -0.005em;
}
#dashboardPage .profile-save-btn:hover {
  background: #000;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  transform: translateY(-1px);
}

/* ── PLACEHOLDER (investments) ── */
#dashboardPage .placeholder-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 64px 40px;
  text-align: center;
}
#dashboardPage .placeholder-emoji { font-size: 52px; margin-bottom: 16px; }
#dashboardPage .placeholder-title {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
#dashboardPage .placeholder-text {
  font-size: 14px;
  color: var(--muted);
  max-width: 500px;
  margin: 0 auto 24px;
  line-height: 1.65;
}

/* ── RISK ANALYZER (richly redesigned) ── */
#dashboardPage .risk-intro {
  background: linear-gradient(135deg, var(--ink) 0%, #1f1f1f 100%);
  color: #fff;
  border-radius: 18px;
  padding: 26px 30px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}
#dashboardPage .risk-intro::before {
  content: '';
  position: absolute;
  top: -100px; right: -50px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(201,168,76,0.12), transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
#dashboardPage .risk-intro-tag {
  display: inline-flex;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(201,168,76,0.16);
  border: 1px solid rgba(201,168,76,0.28);
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
#dashboardPage .risk-intro-title {
  font-family: var(--serif);
  font-size: 22px;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}
#dashboardPage .risk-intro-text {
  font-size: 13.5px;
  color: rgba(255,255,255,0.6);
  line-height: 1.65;
  max-width: 600px;
  position: relative;
  z-index: 1;
}
#dashboardPage .risk-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  position: relative;
  z-index: 1;
}
#dashboardPage .risk-progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
}
#dashboardPage .risk-progress-fill {
  height: 100%;
  background: var(--green);
  border-radius: 3px;
  transition: width 0.4s ease;
}
#dashboardPage .risk-progress-text {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  font-feature-settings: "tnum";
}

#dashboardPage .risk-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px 30px;
}
#dashboardPage .risk-questions { display: flex; flex-direction: column; gap: 18px; margin-bottom: 22px; }
#dashboardPage .risk-q-block {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px;
  background: var(--cream);
  transition: all 0.25s;
}
#dashboardPage .risk-q-block.answered {
  background: #fff;
  border-color: rgba(76,175,118,0.2);
  box-shadow: 0 2px 8px rgba(76,175,118,0.05);
}
#dashboardPage .risk-q-num {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--green-d);
  margin-bottom: 6px;
}
#dashboardPage .risk-q-text {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 14px;
  line-height: 1.4;
}
#dashboardPage .risk-q-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
#dashboardPage .risk-q-options.col-2 { grid-template-columns: repeat(2, 1fr); }
#dashboardPage .risk-q-options.col-3 { grid-template-columns: repeat(3, 1fr); }
#dashboardPage .risk-q-opt {
  padding: 11px 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
  line-height: 1.3;
}
#dashboardPage .risk-q-opt:hover {
  border-color: var(--ink-3);
  background: var(--cream);
}
#dashboardPage .risk-q-opt.selected {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  box-shadow: 0 3px 8px rgba(76,175,118,0.25);
}

#dashboardPage .risk-result {
  background: linear-gradient(135deg, var(--ink) 0%, #1f1f1f 100%);
  border-radius: 18px;
  padding: 0;
  color: #fff;
  display: none;
  margin-top: 22px;
  overflow: hidden;
}
#dashboardPage .risk-result.visible { display: block; animation: tabFade 0.4s ease; }
#dashboardPage .risk-result-hdr {
  padding: 28px 32px 24px;
  position: relative;
  overflow: hidden;
}
#dashboardPage .risk-result-hdr::before {
  content: '';
  position: absolute;
  top: -100px; right: -50px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(76,175,118,0.16), transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
#dashboardPage .risk-result-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 8px;
  font-weight: 700;
  position: relative;
  z-index: 1;
}
#dashboardPage .risk-result-name {
  font-family: var(--serif);
  font-size: 32px;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}
#dashboardPage .risk-result-tagline {
  font-size: 13.5px;
  color: rgba(255,255,255,0.7);
  font-style: italic;
  position: relative;
  z-index: 1;
}
#dashboardPage .risk-meter {
  margin: 18px 0 0;
  height: 10px;
  background: rgba(255,255,255,0.08);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
#dashboardPage .risk-meter-fill {
  height: 100%;
  background: linear-gradient(to right, #4CAF76, #C9A84C, #D94F3D);
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 5px;
}
#dashboardPage .risk-meter-marks {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  margin-top: 6px;
  font-weight: 600;
  letter-spacing: 0.05em;
  position: relative;
  z-index: 1;
}
#dashboardPage .risk-result-body {
  padding: 26px 32px 30px;
  background: rgba(255,255,255,0.02);
}
#dashboardPage .risk-result-section { margin-bottom: 22px; }
#dashboardPage .risk-result-section:last-child { margin-bottom: 0; }
#dashboardPage .risk-result-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
#dashboardPage .risk-result-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.06);
}
#dashboardPage .risk-result-text {
  font-size: 13.5px;
  color: rgba(255,255,255,0.8);
  line-height: 1.7;
}
#dashboardPage .risk-portfolio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 6px;
}
#dashboardPage .risk-portfolio-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 11px;
  padding: 14px;
  text-align: center;
}
#dashboardPage .risk-portfolio-pct {
  font-family: var(--serif);
  font-size: 22px;
  color: #fff;
  letter-spacing: -0.01em;
}
#dashboardPage .risk-portfolio-lbl {
  font-size: 10.5px;
  color: rgba(255,255,255,0.5);
  margin-top: 3px;
}
#dashboardPage .risk-rec-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
#dashboardPage .risk-rec-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.78);
  line-height: 1.65;
  transition: all 0.22s;
}
#dashboardPage .risk-rec-item:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(76,175,118,0.2);
}
#dashboardPage .risk-rec-item::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  margin-top: 9px;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(76,175,118,0.12);
}
#dashboardPage .risk-rec-item-content {
  flex: 1;
  min-width: 0;
}
#dashboardPage .risk-rec-item-title {
  display: block;
  color: #fff;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: -0.005em;
  margin-bottom: 4px;
  font-family: var(--serif);
}
#dashboardPage .risk-rec-item-desc {
  color: rgba(255,255,255,0.7);
  font-size: 12.5px;
  line-height: 1.65;
}
#dashboardPage .risk-rec-item-desc strong {
  color: rgba(255,255,255,0.95);
  font-weight: 600;
}
#dashboardPage .risk-rec-item-desc em {
  color: var(--green);
  font-style: normal;
  font-weight: 500;
}
#dashboardPage .risk-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}
#dashboardPage .risk-stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 11px;
  padding: 12px 14px;
}
#dashboardPage .risk-stat-lbl {
  font-size: 9.5px;
  color: rgba(255,255,255,0.45);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
#dashboardPage .risk-stat-val {
  font-family: var(--mono);
  font-size: 14px;
  color: #fff;
  font-weight: 500;
}

#dashboardPage .risk-warning {
  margin-top: 18px;
  padding: 12px 16px;
  background: rgba(217,79,61,0.08);
  border: 1px solid rgba(217,79,61,0.2);
  border-radius: 10px;
  font-size: 11.5px;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
}
#dashboardPage .risk-warning strong { color: #fff; }

#dashboardPage .risk-premium-cta {
  background: linear-gradient(135deg, rgba(201,168,76,0.12) 0%, rgba(201,168,76,0.04) 100%);
  border: 1px solid rgba(201,168,76,0.32);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#dashboardPage .risk-premium-text {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  line-height: 1.7;
}
#dashboardPage .risk-premium-text strong { color: var(--gold); }
#dashboardPage .risk-premium-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  padding: 9px 18px;
  background: var(--gold);
  color: #1f1f1f;
  border-radius: 9px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.22s;
  letter-spacing: -0.005em;
}
#dashboardPage .risk-premium-link:hover {
  background: #d4b46a;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(201,168,76,0.4);
}

#dashboardPage .risk-compute-btn {
  width: 100%;
  padding: 14px;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 11px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s;
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
#dashboardPage .risk-compute-btn:hover { background: #000; box-shadow: 0 6px 16px rgba(0,0,0,0.2); }
#dashboardPage .risk-compute-btn:disabled {
  background: var(--cream-dark);
  color: var(--muted);
  cursor: not-allowed;
  box-shadow: none;
}

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  #dashboardPage .dash-stats-grid { grid-template-columns: repeat(2, 1fr); }
  #dashboardPage .dash-tools-grid { grid-template-columns: repeat(2, 1fr); }
  #dashboardPage .dash-edu-grid { grid-template-columns: repeat(3, 1fr); }
  #dashboardPage .dash-two-col { grid-template-columns: 1fr; }
  #dashboardPage .budget-grid, #dashboardPage .profile-grid { grid-template-columns: 1fr; }
  #dashboardPage .dash-search { width: 200px; }
  #dashboardPage .goals-stats { grid-template-columns: repeat(2, 1fr); }
  #dashboardPage .budget-donut-wrap { grid-template-columns: 1fr; justify-items: center; }
}
@media (max-width: 768px) {
  #dashboardPage .dash-sidebar {
    position: absolute; left: -270px;
    height: 100%;
    transition: left 0.3s;
    z-index: 20;
  }
  #dashboardPage .dash-sidebar.open { left: 0; }
  #dashboardPage .dash-stats-grid { grid-template-columns: 1fr; }
  #dashboardPage .dash-tools-grid { grid-template-columns: 1fr; }
  #dashboardPage .dash-edu-grid { grid-template-columns: repeat(2, 1fr); }
  #dashboardPage .goals-grid { grid-template-columns: 1fr; }
  #dashboardPage .goals-stats { grid-template-columns: 1fr 1fr; }
  #dashboardPage .dash-content { padding: 18px 16px 40px; }
  #dashboardPage .dash-topbar { padding: 14px 18px; gap: 10px; }
  #dashboardPage .dash-search { display: none; }
  #dashboardPage .dash-hero { grid-template-columns: 1fr; padding: 26px; }
  #dashboardPage .dash-hero-title { font-size: 22px; }
  #dashboardPage .budget-totals { grid-template-columns: 1fr; }
  #dashboardPage .risk-q-options { grid-template-columns: 1fr 1fr; }
  #dashboardPage .risk-q-options.col-2 { grid-template-columns: 1fr; }
  #dashboardPage .risk-portfolio, #dashboardPage .risk-stats-row { grid-template-columns: 1fr; }
  #dashboardPage .dash-mobile-toggle { display: flex !important; }
  .goal-input-row, #dashboardPage .profile-form-row { grid-template-columns: 1fr; }
}
#dashboardPage .dash-mobile-toggle {
  display: none;
  width: 38px; height: 38px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 9px;
  align-items: center;
  justify-content: center;
  color: var(--ink-2);
  cursor: pointer;
  margin-right: 6px;
}


/* ══════════════════════════════════════════════════════════
   INVESTMENTS PANEL
   ══════════════════════════════════════════════════════════ */
#dashboardPage .inv-empty {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 56px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
#dashboardPage .inv-empty::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(76,175,118,0.08), transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
#dashboardPage .inv-empty::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(201,168,76,0.06), transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
#dashboardPage .inv-empty-icon {
  width: 72px; height: 72px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--green-d);
  position: relative;
  z-index: 1;
}
#dashboardPage .inv-empty-title {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}
#dashboardPage .inv-empty-text {
  font-size: 14px;
  color: var(--muted);
  max-width: 460px;
  margin: 0 auto 26px;
  line-height: 1.65;
  position: relative;
  z-index: 1;
}
#dashboardPage .inv-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 11px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s;
  position: relative;
  z-index: 1;
  letter-spacing: -0.005em;
}
#dashboardPage .inv-empty-cta:hover {
  background: #000;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.22);
}

/* Header bar with stats and add button */
#dashboardPage .inv-portfolio-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
#dashboardPage .inv-pf-stat {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 22px;
  position: relative;
  overflow: hidden;
}
#dashboardPage .inv-pf-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--green);
}
#dashboardPage .inv-pf-stat.gain::before { background: var(--green); }
#dashboardPage .inv-pf-stat.loss::before { background: var(--red); }
#dashboardPage .inv-pf-stat.neutral::before { background: var(--gold); }
#dashboardPage .inv-pf-stat-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
#dashboardPage .inv-pf-stat-val {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-feature-settings: "tnum";
}
#dashboardPage .inv-pf-stat-val.gain { color: var(--green-d); }
#dashboardPage .inv-pf-stat-val.loss { color: var(--red); }
#dashboardPage .inv-pf-stat-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 5px;
  font-feature-settings: "tnum";
}
#dashboardPage .inv-pf-stat-sub.up { color: var(--green-d); font-weight: 600; }
#dashboardPage .inv-pf-stat-sub.down { color: var(--red); font-weight: 600; }

/* Two-column: chart + insights */
#dashboardPage .inv-overview-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 18px;
  margin-bottom: 22px;
}
#dashboardPage .inv-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px 28px;
}
#dashboardPage .inv-card-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
#dashboardPage .inv-card-title {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 9px;
}
#dashboardPage .inv-card-title svg { color: var(--green-d); }
#dashboardPage .inv-card-tabs {
  display: flex;
  gap: 3px;
  background: var(--cream);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--border);
}
#dashboardPage .inv-card-tab {
  padding: 6px 13px;
  border: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.2s;
}
#dashboardPage .inv-card-tab.active { background: var(--ink); color: #fff; }
#dashboardPage .inv-card-tab:hover:not(.active) { color: var(--ink-2); }

/* Allocation donut */
#dashboardPage .inv-alloc-wrap {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 22px;
  align-items: center;
}
#dashboardPage .inv-alloc-canvas-wrap {
  width: 220px;
  height: 220px;
  position: relative;
  margin: 0 auto;
}
#dashboardPage .inv-alloc-canvas-wrap canvas {
  width: 220px;
  height: 220px;
}
#dashboardPage .inv-alloc-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
}
#dashboardPage .inv-alloc-center-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 4px;
}
#dashboardPage .inv-alloc-center-val {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-feature-settings: "tnum";
  line-height: 1;
}
#dashboardPage .inv-alloc-center-sub {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 4px;
  font-style: italic;
}
#dashboardPage .inv-alloc-legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 6px;
}
#dashboardPage .inv-alloc-legend::-webkit-scrollbar { width: 4px; }
#dashboardPage .inv-alloc-legend::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 2px; }
#dashboardPage .inv-leg-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background 0.18s;
}
#dashboardPage .inv-leg-row:hover { background: var(--cream); }
#dashboardPage .inv-leg-color {
  width: 14px; height: 14px;
  border-radius: 4px;
  flex-shrink: 0;
}
#dashboardPage .inv-leg-name {
  flex: 1;
  color: var(--ink-2);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#dashboardPage .inv-leg-pct {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  font-weight: 600;
  font-feature-settings: "tnum";
}

/* Insights panel */
#dashboardPage .inv-insights {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#dashboardPage .inv-insight-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
#dashboardPage .inv-insight-row:last-child { border-bottom: none; }
#dashboardPage .inv-insight-row:first-of-type { padding-top: 0; }
#dashboardPage .inv-insight-lbl {
  font-size: 12.5px;
  color: var(--ink-3);
  font-weight: 500;
}
#dashboardPage .inv-insight-val {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  font-feature-settings: "tnum";
}
#dashboardPage .inv-insight-val.gain { color: var(--green-d); }
#dashboardPage .inv-insight-val.loss { color: var(--red); }

/* Holdings list */
#dashboardPage .inv-holdings-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
  margin-bottom: 22px;
}
#dashboardPage .inv-holdings-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px 18px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 14px;
}
#dashboardPage .inv-search-wrap {
  position: relative;
  flex: 1;
  max-width: 320px;
}
#dashboardPage .inv-search-wrap input {
  width: 100%;
  padding: 9px 14px 9px 38px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--cream);
  font-family: var(--sans);
  font-size: 13px;
  outline: none;
  color: var(--ink);
  transition: all 0.2s;
}
#dashboardPage .inv-search-wrap input:focus {
  border-color: var(--green);
  background: #fff;
  box-shadow: 0 0 0 2px rgba(76,175,118,0.1);
}
#dashboardPage .inv-search-wrap svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
}
#dashboardPage .inv-add-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s;
  letter-spacing: -0.005em;
}
#dashboardPage .inv-add-cta:hover {
  background: #000;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(0,0,0,0.2);
}

/* Holdings table */
#dashboardPage .inv-table-wrap {
  overflow-x: auto;
}
#dashboardPage .inv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
#dashboardPage .inv-table thead th {
  text-align: left;
  padding: 14px 18px;
  background: var(--cream);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
#dashboardPage .inv-table thead th.right { text-align: right; }
#dashboardPage .inv-table thead th.sortable { cursor: pointer; user-select: none; }
#dashboardPage .inv-table thead th.sortable:hover { color: var(--ink); }
#dashboardPage .inv-table thead th .sort-arrow {
  font-size: 8px;
  margin-left: 4px;
  opacity: 0.5;
}
#dashboardPage .inv-table thead th.sorted .sort-arrow { opacity: 1; color: var(--green-d); }
#dashboardPage .inv-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.18s;
}
#dashboardPage .inv-table tbody tr:hover { background: var(--cream); }
#dashboardPage .inv-table tbody tr:last-child { border-bottom: none; }
#dashboardPage .inv-table tbody td {
  padding: 16px 18px;
  vertical-align: middle;
  font-feature-settings: "tnum";
}
#dashboardPage .inv-table tbody td.right { text-align: right; }
#dashboardPage .inv-symbol {
  display: flex;
  align-items: center;
  gap: 12px;
}
#dashboardPage .inv-symbol-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  letter-spacing: -0.02em;
  position: relative;
}
#dashboardPage .inv-symbol-icon[data-cur="USD"]::after {
  content: '🇺🇸';
  position: absolute;
  bottom: -3px; right: -3px;
  font-size: 10px;
  background: #fff;
  border-radius: 50%;
  padding: 1px;
  border: 1.5px solid #fff;
  line-height: 1;
}
#dashboardPage .inv-symbol-icon[data-cur="CAD"]::after {
  content: '🇨🇦';
  position: absolute;
  bottom: -3px; right: -3px;
  font-size: 10px;
  background: #fff;
  border-radius: 50%;
  padding: 1px;
  border: 1.5px solid #fff;
  line-height: 1;
}
#dashboardPage .inv-symbol-icon.crypto {
  background: linear-gradient(135deg, var(--gold), #B8842D);
}
#dashboardPage .inv-symbol-icon.etf {
  background: linear-gradient(135deg, var(--green), var(--green-d));
}
#dashboardPage .inv-symbol-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
#dashboardPage .inv-symbol-ticker {
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}
#dashboardPage .inv-symbol-name {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
#dashboardPage .inv-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
#dashboardPage .inv-tag.action { background: rgba(17,17,17,0.06); color: var(--ink-2); }
#dashboardPage .inv-tag.etf { background: var(--green-l); color: var(--green-d); }
#dashboardPage .inv-tag.crypto { background: rgba(201,168,76,0.18); color: #8B6F2D; }
#dashboardPage .inv-perf-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
#dashboardPage .inv-perf-amount {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
}
#dashboardPage .inv-perf-amount.gain { color: var(--green-d); }
#dashboardPage .inv-perf-amount.loss { color: var(--red); }
#dashboardPage .inv-perf-pct {
  font-size: 11px;
  font-family: var(--mono);
}
#dashboardPage .inv-perf-pct.gain { color: var(--green-d); }
#dashboardPage .inv-perf-pct.loss { color: var(--red); }
#dashboardPage .inv-actions-cell {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}
#dashboardPage .inv-icon-btn {
  width: 30px; height: 30px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s;
}
#dashboardPage .inv-icon-btn:hover {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--border);
}
#dashboardPage .inv-icon-btn.danger:hover {
  background: var(--red-l);
  color: var(--red);
  border-color: var(--red);
}

/* FX rate banner */
#dashboardPage .inv-fx-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 18px;
  flex-wrap: wrap;
}
#dashboardPage .inv-fx-banner svg { color: var(--gold); flex-shrink: 0; }
#dashboardPage .inv-fx-banner strong { color: var(--ink); font-family: var(--mono); font-weight: 600; }
#dashboardPage .inv-fx-banner input {
  width: 70px;
  padding: 4px 8px;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  background: #fff;
  font-family: var(--mono);
  font-size: 12px;
  text-align: center;
  outline: none;
  color: var(--ink);
}
#dashboardPage .inv-fx-banner input:focus { border-color: var(--green); }
#dashboardPage .inv-fx-banner-action {
  margin-left: auto;
  padding: 5px 12px;
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.18s;
}
#dashboardPage .inv-fx-banner-action:hover { background: #fff; border-color: var(--ink-3); color: var(--ink); }

/* ── Price refresh button & live badges ── */
#dashboardPage .inv-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: #fff;
  color: var(--ink-2);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s;
  letter-spacing: -0.005em;
}
#dashboardPage .inv-refresh-btn:hover {
  background: var(--green-l);
  border-color: var(--green);
  color: var(--green-d);
  transform: translateY(-1px);
}
#dashboardPage .inv-refresh-btn.refreshing svg { animation: spin 0.8s linear infinite; }
#dashboardPage .inv-refresh-btn:disabled {
  background: var(--cream-dark);
  color: var(--muted);
  cursor: not-allowed;
  transform: none;
  border-color: var(--border);
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

#dashboardPage .inv-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  background: var(--green-l);
  color: var(--green-d);
  border-radius: 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-left: 6px;
  font-family: var(--sans);
}
#dashboardPage .inv-live-badge::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse-live 2s infinite;
}
@keyframes pulse-live {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
#dashboardPage .inv-live-badge.stale {
  background: rgba(201,168,76,0.15);
  color: #8B6F2D;
}
#dashboardPage .inv-live-badge.stale::before { background: var(--gold); animation: none; }

#dashboardPage .inv-price-meta {
  font-size: 10.5px;
  color: var(--muted);
  font-style: italic;
  margin-left: 14px;
}
#dashboardPage .inv-fetching-row td {
  background: linear-gradient(90deg, transparent 0%, rgba(76,175,118,0.08) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Price input loading state */
.asset-input-grp.fetching input {
  background: linear-gradient(90deg, var(--cream) 0%, rgba(76,175,118,0.08) 50%, var(--cream) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
.asset-input-grp .price-fetched-hint {
  font-size: 10.5px;
  color: var(--green-d);
  font-style: italic;
  margin-top: 3px;
  display: none;
}
.asset-input-grp .price-fetched-hint.visible { display: block; }
.asset-input-grp .price-fetched-hint.failed { color: var(--muted); }

/* Currency tabs */
#dashboardPage .inv-currency-toggle {
  display: inline-flex;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
#dashboardPage .inv-currency-toggle button {
  padding: 5px 12px;
  border: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.18s;
}
#dashboardPage .inv-currency-toggle button.active {
  background: var(--ink);
  color: #fff;
}

/* ── Asset Modal ── */
.asset-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17,17,17,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.asset-modal-overlay.active { display: flex; animation: fadeIn 0.25s ease; }
.asset-modal {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 620px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 32px 64px rgba(0,0,0,0.28);
  animation: scaleIn 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.asset-modal-hdr {
  padding: 24px 30px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, var(--cream) 0%, #fff 100%);
}
.asset-modal-title {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.asset-modal-close {
  width: 32px; height: 32px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.asset-modal-close:hover { background: var(--cream-dark); color: var(--ink); }
.asset-modal-body {
  padding: 24px 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.asset-input-grp { display: flex; flex-direction: column; gap: 6px; position: relative; }
.asset-input-grp label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.asset-input-grp label .opt {
  color: var(--muted);
  font-weight: 500;
  margin-left: 6px;
  text-transform: none;
  letter-spacing: 0;
}
.asset-input-grp input,
.asset-input-grp select,
.asset-input-grp textarea {
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--cream);
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink);
  outline: none;
  transition: all 0.18s;
  font-feature-settings: "tnum";
}
.asset-input-grp input:focus,
.asset-input-grp select:focus,
.asset-input-grp textarea:focus {
  border-color: var(--green);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(76,175,118,0.08);
}
.asset-input-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.asset-input-row.three { grid-template-columns: 1fr 1fr 1fr; }
.asset-modal-footer {
  padding: 18px 30px 24px;
  border-top: 1px solid var(--border);
  display: flex; gap: 10px; justify-content: flex-end;
  background: var(--cream);
}
.asset-modal-btn {
  padding: 10px 20px;
  border: 1px solid var(--border-2);
  background: #fff;
  border-radius: 9px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.2s;
}
.asset-modal-btn:hover { background: var(--cream-dark); color: var(--ink); }
.asset-modal-btn.primary {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.asset-modal-btn.primary:hover {
  background: #000;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}

/* Type selector */
.asset-type-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.asset-type-btn {
  padding: 11px 8px;
  border: 1.5px solid var(--border);
  background: #fff;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.asset-type-btn:hover { background: var(--cream); }
.asset-type-btn.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* Currency switch */
.asset-cur-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.asset-cur-btn {
  padding: 11px 12px;
  border: 1.5px solid var(--border);
  background: #fff;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.asset-cur-btn:hover { background: var(--cream); }
.asset-cur-btn.active {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

/* Computed P/L preview in modal */
.asset-preview {
  background: linear-gradient(135deg, var(--cream) 0%, #fff 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 4px;
}
.asset-preview-cell { text-align: center; }
.asset-preview-lbl {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.asset-preview-val {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink);
  font-weight: 600;
}
.asset-preview-val.gain { color: var(--green-d); }
.asset-preview-val.loss { color: var(--red); }

/* Ticker autocomplete */
.ticker-suggest {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-top: 4px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 10;
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  display: none;
}
.ticker-suggest.visible { display: block; }
.ticker-suggest-item {
  padding: 10px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.ticker-suggest-item:last-child { border-bottom: none; }
.ticker-suggest-item:hover,
.ticker-suggest-item.highlighted { background: var(--cream); }
.ticker-suggest-icon {
  width: 32px; height: 32px;
  background: var(--cream-dark);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  flex-shrink: 0;
}
.ticker-suggest-text { flex: 1; min-width: 0; }
.ticker-suggest-ticker {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.ticker-suggest-name {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ticker-suggest-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.ticker-suggest-cur {
  font-family: var(--mono);
  font-size: 10px;
  background: var(--cream-dark);
  padding: 2px 7px;
  border-radius: 5px;
  color: var(--ink-3);
  font-weight: 600;
}
.ticker-suggest-sector {
  font-size: 9.5px;
  color: var(--muted);
}

@media (max-width: 1100px) {
  #dashboardPage .inv-portfolio-stats { grid-template-columns: repeat(2, 1fr); }
  #dashboardPage .inv-overview-grid { grid-template-columns: 1fr; }
  #dashboardPage .inv-alloc-wrap { grid-template-columns: 1fr; justify-items: center; }
  #dashboardPage .inv-alloc-legend { max-height: none; }
}
@media (max-width: 768px) {
  #dashboardPage .inv-portfolio-stats { grid-template-columns: 1fr 1fr; }
  #dashboardPage .inv-table thead th { padding: 12px 12px; font-size: 9px; }
  #dashboardPage .inv-table tbody td { padding: 12px 10px; font-size: 11.5px; }
  #dashboardPage .inv-symbol-name { max-width: 100px; }
  .asset-input-row, .asset-input-row.three { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════
   GOALS — Sophisticated section
   ══════════════════════════════════════════════════════════ */

/* Learny Ideas Hero */
#dashboardPage .goals-ideas-hero {
  background:
    radial-gradient(ellipse 80% 100% at 100% 0%, rgba(76,175,118,0.20) 0%, transparent 50%),
    radial-gradient(ellipse 60% 80% at 0% 100%, rgba(201,168,76,0.10) 0%, transparent 50%),
    linear-gradient(135deg, var(--ink) 0%, #1f1f1f 100%);
  border-radius: 20px;
  padding: 28px 32px;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin-bottom: 22px;
  border: 1px solid rgba(255,255,255,0.04);
}
#dashboardPage .goals-ideas-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.15) 100%);
  pointer-events: none;
}
#dashboardPage .goals-ideas-hdr {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}
#dashboardPage .goals-ideas-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  object-fit: cover;
  border: 2px solid rgba(76,175,118,0.4);
  box-shadow: 0 4px 14px rgba(76,175,118,0.35);
}
#dashboardPage .goals-ideas-text { flex: 1; }
#dashboardPage .goals-ideas-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: rgba(76,175,118,0.16);
  border: 1px solid rgba(76,175,118,0.3);
  border-radius: 16px;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
#dashboardPage .goals-ideas-tag-dot {
  width: 5px; height: 5px;
  background: var(--green);
  border-radius: 50%;
  animation: pulse-dot 2s infinite;
}
#dashboardPage .goals-ideas-title {
  font-family: var(--serif);
  font-size: 19px;
  margin-bottom: 4px;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
#dashboardPage .goals-ideas-sub {
  font-size: 12.5px;
  color: rgba(255,255,255,0.6);
  font-style: italic;
  line-height: 1.5;
}
#dashboardPage .goals-ideas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  position: relative;
  z-index: 1;
}
#dashboardPage .goals-idea-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 16px 18px;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
#dashboardPage .goals-idea-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 100% 60% at 100% 0%, rgba(76,175,118,0.10) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
#dashboardPage .goals-idea-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(76,175,118,0.4);
  transform: translateY(-2px);
}
#dashboardPage .goals-idea-card:hover::before { opacity: 1; }
#dashboardPage .goals-idea-top {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
}
#dashboardPage .goals-idea-emoji {
  width: 38px; height: 38px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}
#dashboardPage .goals-idea-name {
  font-family: var(--serif);
  font-size: 14px;
  color: #fff;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
#dashboardPage .goals-idea-meta {
  font-size: 10.5px;
  color: rgba(255,255,255,0.5);
  margin-top: 1px;
}
#dashboardPage .goals-idea-desc {
  font-size: 11.5px;
  color: rgba(255,255,255,0.65);
  line-height: 1.5;
  position: relative;
  z-index: 1;
  flex: 1;
}
#dashboardPage .goals-idea-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  position: relative;
  z-index: 1;
  font-feature-settings: "tnum";
}
#dashboardPage .goals-idea-amount {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
}
#dashboardPage .goals-idea-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
  transition: gap 0.25s;
}
#dashboardPage .goals-idea-card:hover .goals-idea-cta { gap: 7px; }

#dashboardPage .goals-ideas-refresh {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
  border-radius: 9px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  transition: all 0.22s;
  position: relative;
  z-index: 1;
}
#dashboardPage .goals-ideas-refresh:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}
#dashboardPage .goals-ideas-refresh.spinning svg { animation: spin 0.8s linear infinite; }

/* Goal cards — improved with mini chart */
#dashboardPage .goal-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px 26px;
  position: relative;
  transition: all 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
  cursor: pointer;
}
#dashboardPage .goal-card-chart {
  position: relative;
  height: 60px;
  width: 100%;
  margin-bottom: 14px;
  border-radius: 8px;
  overflow: hidden;
}
#dashboardPage .goal-card-chart canvas {
  width: 100%;
  height: 100%;
  display: block;
}
#dashboardPage .goal-priority {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#dashboardPage .goal-priority.haute {
  background: rgba(217,79,61,0.12);
  color: var(--red);
}
#dashboardPage .goal-priority.moyenne {
  background: rgba(201,168,76,0.18);
  color: #8B6F2D;
}
#dashboardPage .goal-priority.basse {
  background: rgba(17,17,17,0.08);
  color: var(--ink-3);
}

/* Goal Detail Modal */
.goal-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17,17,17,0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 99700;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.goal-detail-overlay.active {
  display: flex;
  animation: fadeIn 0.28s ease;
}
.goal-detail {
  background: #fff;
  border-radius: 22px;
  width: 100%;
  max-width: 760px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 36px 80px rgba(0,0,0,0.32);
  animation: scaleIn 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  font-family: var(--sans);
}
.goal-detail-hero {
  background:
    radial-gradient(ellipse 80% 100% at 100% 0%, rgba(76,175,118,0.18) 0%, transparent 50%),
    linear-gradient(135deg, var(--ink) 0%, #1f1f1f 100%);
  padding: 26px 30px 22px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.goal-detail-hero-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.goal-detail-emoji-big {
  width: 60px; height: 60px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  flex-shrink: 0;
}
.goal-detail-titles { flex: 1; min-width: 0; padding-top: 4px; }
.goal-detail-title {
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 5px;
  color: #fff;
}
.goal-detail-meta {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.goal-detail-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.goal-detail-close {
  width: 34px; height: 34px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 9px;
  cursor: pointer;
  color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}
.goal-detail-close:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}
.goal-detail-progress-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}
.goal-detail-current {
  font-family: var(--serif);
  font-size: 26px;
  letter-spacing: -0.01em;
  font-feature-settings: "tnum";
  color: #fff;
}
.goal-detail-target {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}
.goal-detail-target strong {
  color: rgba(255,255,255,0.85);
  font-weight: 600;
}
.goal-detail-bar {
  height: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.goal-detail-bar-fill {
  height: 100%;
  background: linear-gradient(to right, var(--green), #6cc090);
  border-radius: 4px;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.goal-detail-pct-row {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  font-feature-settings: "tnum";
  position: relative;
  z-index: 1;
}
.goal-detail-pct-row strong {
  color: var(--green);
  font-weight: 700;
}

.goal-detail-body {
  padding: 26px 30px;
}
.goal-detail-section { margin-bottom: 28px; }
.goal-detail-section:last-child { margin-bottom: 0; }
.goal-detail-section-title {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  letter-spacing: -0.005em;
}
.goal-detail-section-title svg { color: var(--green-d); }

/* Big chart */
.goal-big-chart {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px 14px;
  height: 280px;
  position: relative;
}
.goal-big-chart canvas {
  width: 100%;
  height: 220px;
  display: block;
}
.goal-big-chart-legend {
  display: flex;
  gap: 18px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.goal-big-chart-leg {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 500;
}
.goal-big-chart-leg-color {
  width: 11px; height: 11px;
  border-radius: 3px;
}
.goal-big-chart-leg-color.dashed {
  background-image: linear-gradient(to right, var(--gold) 50%, transparent 50%);
  background-size: 4px 100%;
  background-color: transparent;
}

/* Stats grid in detail */
.goal-detail-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.goal-detail-stat {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
}
.goal-detail-stat-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.goal-detail-stat-val {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-feature-settings: "tnum";
  line-height: 1.1;
}
.goal-detail-stat-val.green { color: var(--green-d); }

/* What-if simulator */
.goal-whatif {
  background: linear-gradient(135deg, var(--green-l) 0%, #fff 100%);
  border: 1px solid rgba(76,175,118,0.22);
  border-radius: 14px;
  padding: 18px 22px;
}
.goal-whatif-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.goal-whatif-label {
  font-size: 13px;
  color: var(--ink-2);
  flex: 1;
  min-width: 170px;
}
.goal-whatif-label strong { color: var(--ink); font-weight: 600; }
.goal-whatif-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--border-2);
  border-radius: 9px;
  padding: 5px 10px;
}
.goal-whatif-input-wrap input {
  width: 70px;
  border: none;
  outline: none;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  color: var(--ink);
  background: transparent;
  font-feature-settings: "tnum";
}
.goal-whatif-input-wrap span {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}
.goal-whatif-result {
  background: var(--ink);
  color: #fff;
  padding: 6px 13px;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
}
.goal-whatif-result.improvement { background: var(--green); }

/* Deposit timeline */
.goal-timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 6px;
}
.goal-timeline::-webkit-scrollbar { width: 4px; }
.goal-timeline::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 2px; }
.goal-timeline-empty {
  text-align: center;
  color: var(--muted);
  font-style: italic;
  padding: 22px;
  font-size: 12.5px;
}
.goal-timeline-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 11px;
  position: relative;
}
.goal-timeline-dot {
  width: 32px; height: 32px;
  background: var(--green-l);
  color: var(--green-d);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.goal-timeline-info { flex: 1; min-width: 0; }
.goal-timeline-amount {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--green-d);
  font-feature-settings: "tnum";
}
.goal-timeline-amount.deposit::before { content: '+'; }
.goal-timeline-amount.withdraw {
  color: var(--red);
}
.goal-timeline-amount.withdraw::before { content: '−'; }
.goal-timeline-date {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.goal-timeline-note {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 2px;
  font-style: italic;
}
.goal-timeline-balance {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  font-feature-settings: "tnum";
  white-space: nowrap;
}

/* Quick deposit form */
.goal-deposit-form {
  display: grid;
  grid-template-columns: 1fr 1.5fr auto;
  gap: 10px;
  margin-bottom: 14px;
}
.goal-deposit-form input {
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--cream);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  outline: none;
  transition: all 0.18s;
  font-feature-settings: "tnum";
}
.goal-deposit-form input:focus {
  border-color: var(--green);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(76,175,118,0.08);
}
.goal-deposit-form button {
  padding: 10px 18px;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 9px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.goal-deposit-form button:hover {
  background: #000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.goal-deposit-form button.minus {
  background: #fff;
  color: var(--ink-2);
  border: 1px solid var(--border-2);
}
.goal-deposit-form button.minus:hover {
  background: var(--cream-dark);
  border-color: var(--ink-3);
  color: var(--ink);
}

.goal-detail-footer {
  padding: 16px 30px 22px;
  border-top: 1px solid var(--border);
  background: var(--cream);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.goal-detail-footer-btn {
  padding: 9px 18px;
  border: 1px solid var(--border-2);
  background: #fff;
  border-radius: 9px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.22s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.goal-detail-footer-btn:hover { background: var(--cream-dark); color: var(--ink); }
.goal-detail-footer-btn.danger:hover {
  background: var(--red-l);
  color: var(--red);
  border-color: var(--red);
}

/* Mini chart preview in create modal */
.goal-modal-preview {
  margin-top: 6px;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--cream) 0%, #fff 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.goal-modal-preview-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-d);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.goal-modal-preview-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 10px;
}
.goal-modal-preview-cell { text-align: center; }
.goal-modal-preview-lbl {
  font-size: 9.5px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.goal-modal-preview-val {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  font-feature-settings: "tnum";
}
.goal-modal-preview-val.green { color: var(--green-d); }
.goal-modal-preview-canvas-wrap {
  height: 70px;
  position: relative;
}
.goal-modal-preview-canvas-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 1100px) {
  #dashboardPage .goals-ideas-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  #dashboardPage .goals-ideas-grid { grid-template-columns: 1fr; }
  #dashboardPage .goals-ideas-hero { padding: 22px; }
  .goal-detail { max-width: 100%; }
  .goal-detail-hero, .goal-detail-body, .goal-detail-footer { padding-left: 20px; padding-right: 20px; }
  .goal-detail-stats { grid-template-columns: 1fr; }
  .goal-deposit-form { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════
   QUICK GUIDES (Guides éclairs) — Beautiful card-based section
   ══════════════════════════════════════════════════════════ */

#dashboardPage .quick-guides-section {
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid var(--border);
}

#dashboardPage .quick-guides-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

#dashboardPage .quick-guides-title-block {
  display: flex;
  align-items: center;
  gap: 14px;
}

#dashboardPage .quick-guides-icon-wrap {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--green-l) 0%, rgba(76,175,118,0.05) 100%);
  border: 1px solid rgba(76,175,118,0.2);
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

#dashboardPage .quick-guides-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-d);
  margin-bottom: 5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#dashboardPage .quick-guides-eyebrow::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(76,175,118,0.18);
}

#dashboardPage .quick-guides-title {
  font-family: var(--serif);
  font-size: 26px;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-bottom: 4px;
}

#dashboardPage .quick-guides-sub {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.55;
  max-width: 520px;
}

#dashboardPage .quick-guides-stats {
  display: flex;
  gap: 16px;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 8px;
  flex-wrap: wrap;
}

#dashboardPage .quick-guides-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

#dashboardPage .quick-guides-stat strong {
  color: var(--ink-2);
  font-weight: 700;
  font-family: var(--mono);
  font-size: 12px;
}

/* Category sections */
#dashboardPage .qg-category {
  margin-bottom: 32px;
}
#dashboardPage .qg-category:last-child { margin-bottom: 0; }

#dashboardPage .qg-category-hdr {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

#dashboardPage .qg-category-bar {
  width: 4px;
  height: 22px;
  border-radius: 2px;
  flex-shrink: 0;
}

#dashboardPage .qg-category-name {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.005em;
  flex: 1;
}

#dashboardPage .qg-category-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  background: var(--cream);
  padding: 3px 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Guide grid */
#dashboardPage .qg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 1100px) {
  #dashboardPage .qg-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  #dashboardPage .qg-grid { grid-template-columns: 1fr; }
}

/* Individual guide card — like the screenshot reference */
#dashboardPage .qg-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px 16px 0;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 16px;
  overflow: hidden;
}

#dashboardPage .qg-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--qg-color, var(--green));
  border-radius: 0 2px 2px 0;
  transition: width 0.28s;
}

#dashboardPage .qg-card:hover::before {
  width: 6px;
}

#dashboardPage .qg-card:hover {
  background: var(--cream);
  border-color: var(--qg-color, var(--green));
  transform: translateX(2px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.06);
}

#dashboardPage .qg-card-icon {
  margin-left: 18px;
  width: 40px; height: 40px;
  background: var(--cream);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  align-self: center;
  transition: all 0.28s;
}

#dashboardPage .qg-card:hover .qg-card-icon {
  background: #fff;
  transform: scale(1.05);
}

#dashboardPage .qg-card-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#dashboardPage .qg-card-title {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.25;
  margin-bottom: 4px;
}

#dashboardPage .qg-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 500;
  flex-wrap: wrap;
}

#dashboardPage .qg-card-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

#dashboardPage .qg-card-meta-item svg {
  width: 10px;
  height: 10px;
}

#dashboardPage .qg-card-arrow {
  color: var(--muted);
  align-self: center;
  margin-right: 2px;
  flex-shrink: 0;
  transition: all 0.28s;
}

#dashboardPage .qg-card:hover .qg-card-arrow {
  color: var(--qg-color, var(--green));
  transform: translateX(3px);
}

/* ─────────────────────────────────────────────────────────
   QUICK GUIDE READING MODAL
   ───────────────────────────────────────────────────────── */
.qg-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17,17,17,0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 100100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.qg-modal-overlay.active {
  display: flex;
  animation: fadeIn 0.28s ease;
}
.qg-modal {
  background: #fff;
  border-radius: 22px;
  width: 100%;
  max-width: 760px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 36px 80px rgba(0,0,0,0.32);
  animation: scaleIn 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  font-family: var(--sans);
}

.qg-modal-hero {
  background: linear-gradient(135deg, var(--qg-color, var(--green)) 0%, rgba(76,175,118,0.6) 100%);
  padding: 30px 36px 26px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.qg-modal-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 60%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, transparent 50%);
  pointer-events: none;
}
.qg-modal-hero-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.qg-modal-hero-icon {
  width: 56px; height: 56px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
  backdrop-filter: blur(10px);
}
.qg-modal-titles {
  flex: 1;
  min-width: 0;
  padding-top: 6px;
}
.qg-modal-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  margin-bottom: 5px;
}
.qg-modal-title {
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 4px;
}
.qg-modal-subtitle {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  font-style: italic;
  line-height: 1.5;
}
.qg-modal-close {
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}
.qg-modal-close:hover {
  background: rgba(255,255,255,0.22);
  transform: rotate(90deg);
}
.qg-modal-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.qg-modal-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.18);
  padding: 5px 11px;
  border-radius: 14px;
  font-weight: 500;
}

.qg-modal-summary {
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  padding: 16px 36px 18px;
  font-size: 14px;
  color: var(--ink-2);
  font-style: italic;
  line-height: 1.6;
  position: relative;
}
.qg-modal-summary::before {
  content: '';
  position: absolute;
  left: 36px; top: 16px;
  width: 3px; height: calc(100% - 34px);
  background: var(--qg-color, var(--green));
  border-radius: 2px;
}
.qg-modal-summary {
  padding-left: 50px;
}

.qg-modal-body {
  padding: 28px 36px 30px;
}

.qg-modal-section {
  margin-bottom: 24px;
}
.qg-modal-section:last-child { margin-bottom: 0; }

.qg-modal-section-h {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 10px;
}
.qg-modal-section-h::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--qg-color, var(--green));
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(76,175,118,0.14);
}
.qg-modal-section-p {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.75;
  padding-left: 16px;
}
.qg-modal-section-p strong {
  color: var(--ink);
  font-weight: 600;
}
.qg-modal-section-p em {
  color: var(--qg-color, var(--green));
  font-style: italic;
  font-weight: 500;
}

.qg-modal-cta {
  margin-top: 28px;
  padding: 18px 22px;
  background: linear-gradient(135deg, rgba(201,168,76,0.12) 0%, rgba(201,168,76,0.04) 100%);
  border: 1px solid rgba(201,168,76,0.32);
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.qg-modal-cta-icon {
  width: 36px; height: 36px;
  background: var(--gold);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(201,168,76,0.32);
}
.qg-modal-cta-text {
  flex: 1;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.55;
}
.qg-modal-cta-text strong { color: #8B6F2D; font-weight: 600; }
.qg-modal-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: var(--ink);
  color: #fff;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.22s;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.qg-modal-cta-link:hover {
  background: #000;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(17,17,17,0.28);
}

.qg-modal-footer {
  padding: 18px 36px 24px;
  border-top: 1px solid var(--border);
  background: var(--cream);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.qg-modal-footer-text {
  font-size: 11.5px;
  color: var(--muted);
  font-style: italic;
}
.qg-modal-footer-actions { display: flex; gap: 10px; }
.qg-modal-footer-btn {
  padding: 9px 18px;
  background: #fff;
  color: var(--ink-2);
  border: 1px solid var(--border-2);
  border-radius: 9px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.qg-modal-footer-btn:hover {
  background: var(--cream-dark);
  border-color: var(--ink-3);
  color: var(--ink);
}
.qg-modal-footer-btn.primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.qg-modal-footer-btn.primary:hover {
  background: #000;
}

@media (max-width: 700px) {
  .qg-modal-hero, .qg-modal-summary, .qg-modal-body, .qg-modal-footer {
    padding-left: 22px;
    padding-right: 22px;
  }
  .qg-modal-summary { padding-left: 36px; }
  .qg-modal-summary::before { left: 22px; }
  .qg-modal-title { font-size: 20px; }
}


/* ══════════════════════════════════════════════════════════
   PARCOURS DUOLEARNY — Gamified finance learning path
   ══════════════════════════════════════════════════════════ */

/* Stats dashboard */
#dashboardPage .dl-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
#dashboardPage .dl-stat {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.25s;
}
#dashboardPage .dl-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}
#dashboardPage .dl-stat-icon {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
}
#dashboardPage .dl-stat-icon.xp { background: rgba(201,168,76,0.15); }
#dashboardPage .dl-stat-icon.level { background: rgba(76,175,118,0.14); }
#dashboardPage .dl-stat-icon.streak { background: rgba(217,79,61,0.10); }
#dashboardPage .dl-stat-icon.progress { background: rgba(59,130,246,0.10); }
#dashboardPage .dl-stat-icon.lessons { background: rgba(17,17,17,0.06); }
#dashboardPage .dl-stat-text { min-width: 0; }
#dashboardPage .dl-stat-val {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-feature-settings: "tnum";
  line-height: 1.1;
}
#dashboardPage .dl-stat-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
}

/* Global progress bar */
#dashboardPage .dl-global-progress {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 32px;
}
#dashboardPage .dl-global-progress-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 9px;
}
#dashboardPage .dl-global-progress-title {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink);
}
#dashboardPage .dl-global-progress-pct {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--green-d);
  font-feature-settings: "tnum";
}
#dashboardPage .dl-global-bar {
  height: 10px;
  background: var(--cream-dark);
  border-radius: 5px;
  overflow: hidden;
}
#dashboardPage .dl-global-bar-fill {
  height: 100%;
  background: linear-gradient(to right, var(--green), #6cc090);
  border-radius: 5px;
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
}
#dashboardPage .dl-global-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 2.5s infinite;
}

/* Learning path */
#dashboardPage .dl-path {
  max-width: 620px;
  margin: 0 auto;
  position: relative;
}

/* Unit header */
#dashboardPage .dl-unit-hdr {
  background: linear-gradient(135deg, var(--ink) 0%, #1f1f1f 100%);
  border-radius: 16px;
  padding: 18px 24px;
  color: #fff;
  margin: 36px 0 26px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
#dashboardPage .dl-unit-hdr::before {
  content: '';
  position: absolute;
  top: -60%; right: -10%;
  width: 50%; height: 220%;
  background: radial-gradient(circle, rgba(76,175,118,0.18) 0%, transparent 60%);
  pointer-events: none;
}
#dashboardPage .dl-unit-hdr.locked {
  background: linear-gradient(135deg, #8a8a80 0%, #9b9b91 100%);
}
#dashboardPage .dl-unit-hdr.locked::before { display: none; }
#dashboardPage .dl-unit-hdr.completed {
  background: linear-gradient(135deg, var(--green-d) 0%, var(--green) 100%);
}
#dashboardPage .dl-unit-num {
  width: 42px; height: 42px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 17px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
#dashboardPage .dl-unit-info { flex: 1; min-width: 0; position: relative; z-index: 1; }
#dashboardPage .dl-unit-eyebrow {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 3px;
}
#dashboardPage .dl-unit-title {
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
#dashboardPage .dl-unit-badge {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 11px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  font-feature-settings: "tnum";
}

/* Steps (lessons) container with connector line */
#dashboardPage .dl-steps {
  position: relative;
  padding: 4px 0 8px;
}
#dashboardPage .dl-steps::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 3px;
  background: var(--border-2);
  transform: translateX(-50%);
  border-radius: 2px;
  z-index: 0;
}

/* Individual step bubble row */
#dashboardPage .dl-step {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 22px 0;
  position: relative;
  z-index: 1;
}
#dashboardPage .dl-step:nth-child(odd) { flex-direction: row; padding-right: 52%; justify-content: flex-end; }
#dashboardPage .dl-step:nth-child(even) { flex-direction: row-reverse; padding-left: 52%; justify-content: flex-end; }

#dashboardPage .dl-bubble {
  width: 68px; height: 68px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  cursor: pointer;
  transition: all 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  flex-shrink: 0;
  border: 4px solid;
}
/* Completed step */
#dashboardPage .dl-bubble.done {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-d) 100%);
  border-color: rgba(76,175,118,0.3);
  box-shadow: 0 6px 18px rgba(76,175,118,0.35);
  color: #fff;
}
#dashboardPage .dl-bubble.done:hover { transform: scale(1.08); }
/* Current (available) step */
#dashboardPage .dl-bubble.current {
  background: linear-gradient(135deg, var(--gold) 0%, #b8932e 100%);
  border-color: rgba(201,168,76,0.35);
  box-shadow: 0 6px 20px rgba(201,168,76,0.45);
  color: #fff;
  animation: dlPulse 2s ease-in-out infinite;
}
#dashboardPage .dl-bubble.current:hover { transform: scale(1.1); animation-play-state: paused; }
@keyframes dlPulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(201,168,76,0.45); }
  50% { box-shadow: 0 6px 28px rgba(201,168,76,0.7), 0 0 0 8px rgba(201,168,76,0.08); }
}
/* Locked step */
#dashboardPage .dl-bubble.locked {
  background: var(--cream-dark);
  border-color: var(--border);
  color: var(--muted);
  cursor: not-allowed;
  font-size: 20px;
}
#dashboardPage .dl-bubble.locked:hover { transform: none; }

/* Quiz bubble is bigger & square-ish */
#dashboardPage .dl-bubble.quiz {
  width: 76px; height: 76px;
  border-radius: 24px;
}

#dashboardPage .dl-step-label {
  max-width: 200px;
}
#dashboardPage .dl-step:nth-child(odd) .dl-step-label { text-align: right; }
#dashboardPage .dl-step:nth-child(even) .dl-step-label { text-align: left; }
#dashboardPage .dl-step-title {
  font-family: var(--serif);
  font-size: 13.5px;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin-bottom: 3px;
}
#dashboardPage .dl-step.locked-row .dl-step-title { color: var(--muted); }
#dashboardPage .dl-step-meta {
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
#dashboardPage .dl-step-meta .dl-xp-tag {
  font-family: var(--mono);
  color: #8B6F2D;
  background: rgba(201,168,76,0.14);
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 9.5px;
  font-weight: 700;
}
#dashboardPage .dl-step-meta .dl-done-tag {
  color: var(--green-d);
  font-weight: 700;
}

/* ── LESSON MODAL ── */
.dl-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17,17,17,0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 99850;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.dl-modal-overlay.active { display: flex; animation: fadeIn 0.25s ease; }
.dl-modal {
  background: #fff;
  border-radius: 22px;
  width: 100%;
  max-width: 600px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 36px 80px rgba(0,0,0,0.32);
  animation: scaleIn 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  font-family: var(--sans);
}
.dl-modal-hero {
  background: linear-gradient(135deg, var(--ink) 0%, #1f1f1f 100%);
  padding: 22px 28px 20px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.dl-modal-hero::before {
  content: '';
  position: absolute;
  top: -60%; right: -10%;
  width: 50%; height: 220%;
  background: radial-gradient(circle, rgba(201,168,76,0.16) 0%, transparent 60%);
  pointer-events: none;
}
.dl-modal-hero-icon {
  width: 48px; height: 48px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.dl-modal-hero-text { flex: 1; min-width: 0; position: relative; z-index: 1; }
.dl-modal-hero-eyebrow {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 4px;
}
.dl-modal-hero-title {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: -0.005em;
  line-height: 1.25;
  color: #fff;
}
.dl-modal-close {
  width: 34px; height: 34px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 9px;
  cursor: pointer;
  color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.dl-modal-close:hover { background: rgba(255,255,255,0.15); color: #fff; }

.dl-modal-body { padding: 24px 28px 28px; }

.dl-lesson-text {
  background: var(--cream);
  border-left: 3px solid var(--green);
  border-radius: 0 12px 12px 0;
  padding: 16px 18px;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.7;
  margin-bottom: 22px;
}
.dl-lesson-text strong { color: var(--ink); font-weight: 600; }

.dl-question-count {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dl-question {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.4;
  margin-bottom: 18px;
}
.dl-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.dl-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1.5px solid var(--border-2);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.45;
  text-align: left;
  width: 100%;
  font-family: var(--sans);
}
.dl-choice:hover {
  border-color: var(--ink-3);
  background: var(--cream);
  transform: translateX(2px);
}
.dl-choice.selected {
  border-color: var(--ink);
  background: var(--cream);
  box-shadow: 0 0 0 3px rgba(17,17,17,0.06);
}
.dl-choice.correct {
  border-color: var(--green);
  background: var(--green-l);
  color: var(--green-d);
  font-weight: 600;
}
.dl-choice.wrong {
  border-color: var(--red);
  background: var(--red-l);
  color: var(--red);
}
.dl-choice.disabled { pointer-events: none; opacity: 0.75; }
.dl-choice-letter {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--cream-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-3);
  flex-shrink: 0;
}
.dl-choice.correct .dl-choice-letter { background: var(--green); color: #fff; }
.dl-choice.wrong .dl-choice-letter { background: var(--red); color: #fff; }

.dl-feedback {
  display: none;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 18px;
  font-size: 13px;
  line-height: 1.6;
  animation: aiResultIn 0.35s ease;
}
.dl-feedback.visible { display: block; }
.dl-feedback.good {
  background: var(--green-l);
  border: 1px solid rgba(76,175,118,0.3);
  color: var(--green-d);
}
.dl-feedback.bad {
  background: var(--red-l);
  border: 1px solid rgba(217,79,61,0.25);
  color: var(--red);
}
.dl-feedback strong { font-weight: 700; }
.dl-feedback .dl-explain {
  color: var(--ink-2);
  margin-top: 6px;
  display: block;
}

.dl-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.dl-btn {
  padding: 12px 26px;
  border-radius: 11px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dl-btn.primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  box-shadow: 0 4px 12px rgba(17,17,17,0.18);
}
.dl-btn.primary:hover { background: #000; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(17,17,17,0.28); }
.dl-btn.primary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.dl-btn.green {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
  box-shadow: 0 4px 12px rgba(76,175,118,0.3);
}
.dl-btn.green:hover { background: var(--green-d); transform: translateY(-1px); }
.dl-btn.ghost {
  background: #fff;
  color: var(--ink-2);
  border-color: var(--border-2);
}
.dl-btn.ghost:hover { background: var(--cream-dark); color: var(--ink); }

/* XP gain toast inside modal */
.dl-xp-gain {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: #8B6F2D;
  background: rgba(201,168,76,0.14);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 11px;
  padding: 11px;
  margin-bottom: 16px;
  animation: dlXpPop 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.dl-xp-gain.visible { display: flex; }
@keyframes dlXpPop {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

/* Completion celebration */
.dl-complete {
  text-align: center;
  padding: 10px 0 6px;
}
.dl-complete-emoji { font-size: 52px; margin-bottom: 12px; animation: dlXpPop 0.6s ease; }
.dl-complete-title {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.dl-complete-sub {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.6;
  margin-bottom: 18px;
}

@media (max-width: 1100px) {
  #dashboardPage .dl-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  #dashboardPage .dl-stats { grid-template-columns: repeat(2, 1fr); }
  #dashboardPage .dl-step:nth-child(odd),
  #dashboardPage .dl-step:nth-child(even) {
    flex-direction: row;
    padding: 0;
    justify-content: flex-start;
  }
  #dashboardPage .dl-steps::before { left: 34px; }
  #dashboardPage .dl-step:nth-child(odd) .dl-step-label,
  #dashboardPage .dl-step:nth-child(even) .dl-step-label { text-align: left; }
  .dl-modal-hero, .dl-modal-body { padding-left: 20px; padding-right: 20px; }
}


/* ══════════ DUOLEARNY v2 — mascotte, badges, mentor, fond ══════════ */
#dashboardPage #tab-duolearny { position: relative; }
#dashboardPage .dl-bg-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
#dashboardPage #tab-duolearny > *:not(.dl-bg-canvas) { position: relative; z-index: 1; }

/* Héros avec mascotte */
#dashboardPage .dl-hero {
  background: linear-gradient(135deg, var(--ink) 0%, #232323 100%);
  border-radius: 18px; padding: 22px 26px; margin-bottom: 24px;
  display: flex; align-items: center; gap: 20px; color: #fff;
  position: relative; overflow: hidden; flex-wrap: wrap;
}
#dashboardPage .dl-hero::before {
  content: ''; position: absolute; top: -60%; right: -8%;
  width: 45%; height: 220%;
  background: radial-gradient(circle, rgba(76,175,118,0.22) 0%, transparent 60%);
  pointer-events: none;
}
#dashboardPage .dl-hero-mascot {
  width: 72px; height: 72px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.25);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  animation: dlFloat 3.5s ease-in-out infinite;
  flex-shrink: 0; position: relative; z-index: 1; object-fit: cover; background:#fff;
}
@keyframes dlFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
#dashboardPage .dl-hero-text { flex: 1; min-width: 220px; position: relative; z-index: 1; }
#dashboardPage .dl-hero-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 4px;
}
#dashboardPage .dl-hero-msg {
  font-family: var(--serif); font-size: 16px; line-height: 1.45; color: #fff;
}
#dashboardPage .dl-hero-bars { display: flex; flex-direction: column; gap: 10px; min-width: 230px; position: relative; z-index: 1; }
#dashboardPage .dl-mini-bar-label {
  font-size: 10.5px; color: rgba(255,255,255,0.7); font-weight: 600; margin-bottom: 4px;
  display: flex; justify-content: space-between;
}
#dashboardPage .dl-mini-bar {
  height: 8px; background: rgba(255,255,255,0.12); border-radius: 4px; overflow: hidden;
}
#dashboardPage .dl-mini-bar-fill {
  height: 100%; border-radius: 4px; transition: width 0.6s cubic-bezier(0.22,1,0.36,1);
}
#dashboardPage .dl-mini-bar-fill.gold { background: linear-gradient(to right, var(--gold), #e0c068); }
#dashboardPage .dl-mini-bar-fill.green { background: linear-gradient(to right, var(--green), #6cc090); }

/* Badges */
#dashboardPage .dl-badges-section { margin-bottom: 28px; }
#dashboardPage .dl-badges-title {
  font-family: var(--serif); font-size: 15px; color: var(--ink);
  margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
#dashboardPage .dl-badges-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
}
#dashboardPage .dl-badge {
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 8px; text-align: center; transition: all 0.25s;
  opacity: 0.45; filter: grayscale(0.8);
}
#dashboardPage .dl-badge.unlocked {
  opacity: 1; filter: none;
  border-color: rgba(201,168,76,0.4);
  background: linear-gradient(135deg, rgba(201,168,76,0.08) 0%, #fff 70%);
  box-shadow: 0 4px 12px rgba(201,168,76,0.12);
}
#dashboardPage .dl-badge.unlocked:hover { transform: translateY(-3px) scale(1.03); }
#dashboardPage .dl-badge-icon { font-size: 24px; margin-bottom: 5px; }
#dashboardPage .dl-badge-name {
  font-size: 9.5px; font-weight: 700; color: var(--ink-2);
  letter-spacing: 0.02em; line-height: 1.2;
}
@media (max-width: 900px) { #dashboardPage .dl-badges-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) { #dashboardPage .dl-badges-grid { grid-template-columns: repeat(3, 1fr); } }

/* Bulle de réaction Learny */
.dl-learny-bubble {
  position: fixed; bottom: 26px; left: 26px; z-index: 99950;
  background: #fff; border: 1px solid var(--border-2); border-radius: 16px;
  padding: 12px 16px; display: flex; align-items: center; gap: 11px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.18);
  max-width: 320px; opacity: 0; transform: translateY(16px) scale(0.95);
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.dl-learny-bubble.visible { opacity: 1; transform: translateY(0) scale(1); }
.dl-learny-bubble.celebrate {
  border-color: var(--gold);
  box-shadow: 0 14px 40px rgba(201,168,76,0.35);
}
.dl-learny-bubble-avatar {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--green-l); flex-shrink: 0;
  animation: dlFloat 3s ease-in-out infinite;
}
.dl-learny-bubble-text {
  font-family: var(--sans); font-size: 12.5px; color: var(--ink-2);
  line-height: 1.45; font-weight: 500;
}
.dl-learny-bubble-text strong { color: var(--ink); }

/* Barre de progression du modal */
.dl-modal-progress {
  height: 6px; background: var(--cream-dark); overflow: hidden;
}
.dl-modal-progress-fill {
  height: 100%; width: 0;
  background: linear-gradient(to right, var(--green), #6cc090);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Mentor intégré */
.dl-mentor { margin-bottom: 18px; }
.dl-mentor-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; background: var(--cream); border: 1px solid var(--border-2);
  border-radius: 22px; font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  color: var(--ink-2); cursor: pointer; transition: all 0.22s;
}
.dl-mentor-toggle:hover { border-color: var(--green); background: var(--green-l); color: var(--green-d); }
.dl-mentor-avatar {
  width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.dl-mentor-panel { display: none; margin-top: 12px; }
.dl-mentor-panel.open { display: block; animation: aiResultIn 0.3s ease; }
.dl-mentor-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.dl-mentor-chip {
  padding: 7px 13px; background: #fff; border: 1px solid var(--border-2);
  border-radius: 16px; font-family: var(--sans); font-size: 11.5px; font-weight: 600;
  color: var(--ink-2); cursor: pointer; transition: all 0.2s;
}
.dl-mentor-chip:hover { border-color: var(--ink); color: var(--ink); background: var(--cream); }
.dl-mentor-msg {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--cream); border-left: 3px solid var(--green);
  border-radius: 0 12px 12px 0; padding: 13px 15px;
  font-size: 12.5px; color: var(--ink-2); line-height: 1.65;
}
.dl-mentor-msg .dl-mentor-avatar { width: 28px; height: 28px; margin-top: 2px; }
.dl-mentor-guide { margin-top: 8px; }
.dl-guide-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; margin: 3px 4px 3px 0;
  background: var(--ink); color: #fff; border: none; border-radius: 8px;
  font-family: var(--sans); font-size: 11px; font-weight: 700; cursor: pointer;
  transition: all 0.2s;
}
.dl-guide-btn:hover { background: #000; transform: translateY(-1px); }

/* XP inline + badge pop + diagnostic */
.dl-xp-inline {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: #8B6F2D; background: rgba(201,168,76,0.18);
  padding: 2px 8px; border-radius: 6px; margin-left: 6px;
}
.dl-badge-pop {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px;
}
.dl-badge-pop span {
  background: linear-gradient(135deg, rgba(201,168,76,0.15), rgba(201,168,76,0.05));
  border: 1px solid rgba(201,168,76,0.4); border-radius: 18px;
  padding: 7px 14px; font-size: 12px; font-weight: 700; color: #8B6F2D;
  animation: dlXpPop 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.dl-diag {
  text-align: left; background: var(--cream); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px 18px; margin: 8px 0 4px;
}
.dl-diag-title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--serif); font-size: 14px; color: var(--ink); margin-bottom: 10px;
}
.dl-diag-row { font-size: 12.5px; line-height: 1.6; color: var(--ink-2); margin-bottom: 6px; }
.dl-diag-row.good strong { color: var(--green-d); }
.dl-diag-row.weak strong { color: var(--red); }


/* ══════════ AUTH MODAL IMMERSIF ══════════ */
.modal.auth-modal {
  max-width: 880px; width: 95%; padding: 0; overflow: hidden;
}
.auth-split { display: flex; min-height: 560px; }

/* Panneau de marque */
.auth-brand {
  width: 42%; flex-shrink: 0; position: relative; overflow: hidden;
  background: linear-gradient(160deg, #131311 0%, #1d1d1a 55%, #18211b 100%);
  display: flex; align-items: flex-end; padding: 36px 32px;
}
.auth-brand-orb {
  position: absolute; border-radius: 50%; filter: blur(48px); pointer-events: none;
}
.auth-brand-orb.orb1 {
  width: 220px; height: 220px; top: -60px; right: -60px;
  background: rgba(76,175,118,0.28); animation: authOrb 9s ease-in-out infinite;
}
.auth-brand-orb.orb2 {
  width: 180px; height: 180px; bottom: 16%; left: -70px;
  background: rgba(201,168,76,0.20); animation: authOrb 11s ease-in-out infinite reverse;
}
@keyframes authOrb {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-18px, 22px) scale(1.12); }
}
.auth-brand-chart {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 38%;
  opacity: 0.9; pointer-events: none;
}
.auth-chart-line {
  stroke-dasharray: 600; stroke-dashoffset: 600;
  animation: authChartDraw 2.4s cubic-bezier(0.22,1,0.36,1) 0.3s forwards;
}
@keyframes authChartDraw { to { stroke-dashoffset: 0; } }
.auth-brand-content { position: relative; z-index: 1; width: 100%; }
.auth-brand-logo {
  width: 56px; height: 56px; border-radius: 14px; object-fit: cover;
  border: 1px solid rgba(255,255,255,0.15); margin-bottom: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.auth-brand-title {
  font-family: var(--serif); font-size: 25px; line-height: 1.25;
  color: #fff; letter-spacing: -0.01em; margin-bottom: 22px;
}
.auth-brand-title em { font-style: italic; color: var(--gold); }
.auth-brand-features { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.auth-feat {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12px; color: rgba(255,255,255,0.72); line-height: 1.45;
  animation: authFeatIn 0.5s ease backwards;
}
.auth-feat:nth-child(1) { animation-delay: 0.25s; }
.auth-feat:nth-child(2) { animation-delay: 0.4s; }
.auth-feat:nth-child(3) { animation-delay: 0.55s; }
@keyframes authFeatIn {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}
.auth-feat strong { color: #fff; font-weight: 600; }
.auth-feat-ico {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.auth-brand-motto {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.22em; color: rgba(255,255,255,0.38);
}

/* Panneau formulaire */
.auth-form-side { flex: 1; padding: 8px 8px 4px; display: flex; flex-direction: column; justify-content: center; }
.auth-modal .modal-header { padding-bottom: 4px; }
.auth-modal .modal-close { z-index: 5; }

/* Toggle mot de passe */
.pass-wrap { position: relative; }
.pass-wrap .form-input { padding-right: 42px; }
.pass-toggle {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--muted);
  padding: 5px; border-radius: 7px; display: flex; transition: all 0.2s;
}
.pass-toggle:hover { color: var(--ink); background: var(--cream-dark); }
.pass-toggle.revealed { color: var(--green-d); }

/* Indicateur de force */
.pass-strength { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.pass-strength-bars { display: flex; gap: 4px; flex: 1; }
.pass-strength-bars span {
  height: 4px; flex: 1; border-radius: 2px; background: var(--cream-dark);
  transition: background 0.3s;
}
.pass-strength-bars span.weak { background: var(--red); }
.pass-strength-bars span.mid { background: var(--gold); }
.pass-strength-bars span.strong { background: var(--green); }
.pass-strength-label {
  font-size: 10.5px; font-weight: 700; color: var(--muted); white-space: nowrap;
}

@media (max-width: 760px) {
  .auth-brand { display: none; }
  .modal.auth-modal { max-width: 460px; }
  .auth-split { min-height: 0; }
}


/* ══════════ FORMATION PREMIUM — style "Unique Cards" ══════════ */
@keyframes fpUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fpFade { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: scale(1); } }
@keyframes fpDraw { to { stroke-dashoffset: 0; } }
@keyframes fpLineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

#dashboardPage .fp-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #121210 0%, #1e1e1b 60%, #1a2118 100%);
  border-radius: 22px; padding: 52px 40px 58px; margin-bottom: 26px;
  text-align: center; animation: fpFade 0.7s cubic-bezier(0.22,1,0.36,1) backwards;
}
#dashboardPage .fp-orb { position: absolute; border-radius: 50%; filter: blur(54px); pointer-events: none; }
#dashboardPage .fp-orb.o1 { width: 260px; height: 260px; top: -90px; right: -50px; background: rgba(201,168,76,0.22); animation: authOrb 10s ease-in-out infinite; }
#dashboardPage .fp-orb.o2 { width: 230px; height: 230px; bottom: -100px; left: -60px; background: rgba(76,175,118,0.20); animation: authOrb 12s ease-in-out infinite reverse; }
#dashboardPage .fp-hero-chart { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 34%; opacity: 0.85; pointer-events: none; }
#dashboardPage .fp-chart-line { stroke-dasharray: 900; stroke-dashoffset: 900; animation: fpDraw 2.6s cubic-bezier(0.22,1,0.36,1) 0.4s forwards; }
#dashboardPage .fp-hero-inner { position: relative; z-index: 1; }
#dashboardPage .fp-presents {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 18px; animation: fpUp 0.6s 0.15s backwards;
}
#dashboardPage .fp-line {
  width: 44px; height: 1px; background: linear-gradient(to right, transparent, rgba(201,168,76,0.6), transparent);
  transform-origin: center; animation: fpLineGrow 0.8s 0.3s backwards;
}
#dashboardPage .fp-title {
  font-family: var(--serif); font-size: clamp(30px, 4.5vw, 46px);
  color: #fff; letter-spacing: -0.015em; line-height: 1.1;
  margin-bottom: 16px; animation: fpUp 0.65s 0.25s backwards;
}
#dashboardPage .fp-title em {
  font-style: italic; color: var(--gold); position: relative;
}
#dashboardPage .fp-title em::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  transform-origin: center; animation: fpLineGrow 0.9s 0.9s backwards;
}
#dashboardPage .fp-sub {
  font-size: 14px; color: rgba(255,255,255,0.62); line-height: 1.65;
  max-width: 540px; margin: 0 auto 28px; animation: fpUp 0.65s 0.35s backwards;
}
#dashboardPage .fp-hero-stats {
  display: flex; align-items: center; justify-content: center; gap: 26px;
  flex-wrap: wrap; animation: fpUp 0.65s 0.45s backwards;
}
#dashboardPage .fp-hstat { text-align: center; }
#dashboardPage .fp-hstat strong {
  display: block; font-family: var(--serif); font-size: 24px; color: var(--gold);
  letter-spacing: -0.01em; line-height: 1.1; margin-bottom: 3px;
}
#dashboardPage .fp-hstat span {
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: rgba(255,255,255,0.45);
}
#dashboardPage .fp-hstat-div { width: 1px; height: 34px; background: rgba(255,255,255,0.12); }

/* Cartes modules */
#dashboardPage .fp-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px;
}
#dashboardPage .fp-card {
  position: relative; overflow: hidden; cursor: pointer;
  background: linear-gradient(155deg, #161614 0%, #222220 100%);
  border: 1px solid rgba(255,255,255,0.07); border-radius: 16px;
  padding: 22px 18px 16px; min-height: 168px;
  display: flex; flex-direction: column;
  transition: all 0.32s cubic-bezier(0.22,1,0.36,1);
  animation: fpUp 0.6s var(--d, 0s) cubic-bezier(0.22,1,0.36,1) backwards;
}
#dashboardPage .fp-card:hover {
  transform: translateY(-6px);
  border-color: rgba(201,168,76,0.45);
  box-shadow: 0 18px 44px rgba(0,0,0,0.35), 0 0 0 1px rgba(201,168,76,0.15);
}
#dashboardPage .fp-card-num {
  position: absolute; top: 2px; right: 12px;
  font-family: var(--serif); font-size: 68px; line-height: 1;
  color: rgba(255,255,255,0.045); pointer-events: none;
  transition: color 0.32s;
}
#dashboardPage .fp-card:hover .fp-card-num { color: rgba(201,168,76,0.12); }
#dashboardPage .fp-card-emoji {
  width: 42px; height: 42px; border-radius: 12px; font-size: 20px;
  background: rgba(201,168,76,0.10); border: 1px solid rgba(201,168,76,0.22);
  display: flex; align-items: center; justify-content: center; margin-bottom: 13px;
}
#dashboardPage .fp-card-title {
  font-family: var(--serif); font-size: 15px; color: #fff;
  letter-spacing: -0.005em; line-height: 1.3; margin-bottom: 6px;
}
#dashboardPage .fp-card-meta {
  font-size: 10.5px; color: rgba(255,255,255,0.42); font-weight: 600; line-height: 1.45;
}
#dashboardPage .fp-card-foot {
  margin-top: auto; padding-top: 14px;
  display: flex; align-items: center; justify-content: space-between;
}
#dashboardPage .fp-tag {
  font-family: var(--mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
  border: 1px solid rgba(201,168,76,0.35); border-radius: 10px; padding: 3px 9px;
}
#dashboardPage .fp-arrow {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: rgba(255,255,255,0.55);
  transition: all 0.3s cubic-bezier(0.22,1,0.36,1);
}
#dashboardPage .fp-card:hover .fp-arrow {
  background: var(--gold); border-color: var(--gold); color: #16130a;
  transform: translateX(3px);
}

/* Bande valeur */
#dashboardPage .fp-value {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 26px;
}
#dashboardPage .fp-val-item {
  display: flex; gap: 11px; align-items: flex-start;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 15px 16px; animation: fpUp 0.55s var(--d, 0s) backwards;
  transition: all 0.25s;
}
#dashboardPage .fp-val-item:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.07); }
#dashboardPage .fp-val-ico {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; font-size: 15px;
  background: var(--gold-l); display: flex; align-items: center; justify-content: center;
}
#dashboardPage .fp-val-item strong {
  display: block; font-size: 12.5px; color: var(--ink); font-weight: 700; margin-bottom: 2px;
}
#dashboardPage .fp-val-item div span {
  font-size: 11px; color: var(--ink-3); line-height: 1.5; display: block;
}

/* CTA finale */
#dashboardPage .fp-cta {
  position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(150deg, #151513 0%, #21211e 100%);
  border-radius: 20px; padding: 40px 28px; animation: fpUp 0.6s 0.5s backwards;
}
#dashboardPage .fp-cta-glow {
  position: absolute; top: -70%; left: 50%; transform: translateX(-50%);
  width: 60%; height: 140%; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,0.16) 0%, transparent 65%);
  pointer-events: none;
}
#dashboardPage .fp-cta-title {
  position: relative; font-family: var(--serif); font-size: 25px; color: #fff;
  letter-spacing: -0.01em; margin-bottom: 9px;
}
#dashboardPage .fp-cta-sub {
  position: relative; font-size: 13px; color: rgba(255,255,255,0.6);
  margin-bottom: 24px; line-height: 1.6;
}
#dashboardPage .fp-cta-btns {
  position: relative; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
#dashboardPage .fp-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 30px; border-radius: 12px; text-decoration: none;
  font-size: 14px; font-weight: 700; letter-spacing: -0.005em;
  transition: all 0.28s cubic-bezier(0.22,1,0.36,1);
}
#dashboardPage .fp-btn.gold {
  background: linear-gradient(135deg, var(--gold) 0%, #b8932e 100%);
  color: #16130a; box-shadow: 0 8px 24px rgba(201,168,76,0.35);
}
#dashboardPage .fp-btn.gold:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(201,168,76,0.5); }
#dashboardPage .fp-btn.outline {
  background: transparent; color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.22);
}
#dashboardPage .fp-btn.outline:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.05); transform: translateY(-2px); }
#dashboardPage .fp-cta-note {
  position: relative; margin-top: 16px;
  font-size: 10.5px; color: rgba(255,255,255,0.35); font-weight: 600; letter-spacing: 0.03em;
}

@media (max-width: 1100px) {
  #dashboardPage .fp-grid { grid-template-columns: repeat(2, 1fr); }
  #dashboardPage .fp-value { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  #dashboardPage .fp-hero { padding: 38px 22px 48px; }
  #dashboardPage .fp-grid { grid-template-columns: 1fr; }
  #dashboardPage .fp-value { grid-template-columns: 1fr; }
  #dashboardPage .fp-presents { letter-spacing: 0.18em; }
  #dashboardPage .fp-line { width: 22px; }
}


/* ══════════ HÉROS CINÉMATIQUES — Guides éclairs / DuoLearny / Ressources ══════════ */
#dashboardPage .fp-hero.qg2, #dashboardPage .fp-hero.rs2 { padding: 46px 36px 54px; }
#dashboardPage .fp-presents.green { color: var(--green); }
#dashboardPage .fp-presents.green .fp-line { background: linear-gradient(to right, transparent, rgba(76,175,118,0.6), transparent); }
#dashboardPage .fp-title em.green { color: #7ed4a3; }
#dashboardPage .fp-title em.green::after { background: linear-gradient(to right, transparent, var(--green), transparent); }

/* Chips catégories (guides éclairs) */
#dashboardPage .qg2-cats {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 20px; animation: fpUp 0.65s 0.45s backwards;
}
#dashboardPage .qg2-cat {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 16px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.75);
  transition: all 0.25s;
}
#dashboardPage .qg2-cat::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 8px var(--c);
}
#dashboardPage .qg2-cat:hover { border-color: var(--c); transform: translateY(-2px); }

/* Stats dynamiques dans le héros sombre */
#dashboardPage .fp-hero .quick-guides-stats {
  display: flex; gap: 22px; justify-content: center; flex-wrap: wrap;
  animation: fpUp 0.65s 0.55s backwards;
}
#dashboardPage .fp-hero .quick-guides-stat {
  font-size: 12px; color: rgba(255,255,255,0.55); font-weight: 600;
  background: none; border: none; padding: 0;
}
#dashboardPage .fp-hero .quick-guides-stat strong { color: var(--gold); font-family: var(--serif); font-size: 15px; }

/* Héros DuoLearny */
#dashboardPage .fp-hero.dl2 {
  background: linear-gradient(150deg, #101411 0%, #1a201b 55%, #1d1d1a 100%);
  padding: 44px 36px 56px; margin-bottom: 24px;
}
#dashboardPage .dl2-mascot {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
  border: 3px solid rgba(126,212,163,0.35); background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 0 8px rgba(76,175,118,0.07);
  margin-bottom: 14px; animation: dlFloat 3.5s ease-in-out infinite, fpUp 0.6s 0.2s backwards;
}
#dashboardPage .fp-hero.dl2 .fp-sub { margin-bottom: 24px; min-height: 22px; }
#dashboardPage .dl2-bars {
  display: flex; gap: 22px; justify-content: center; flex-wrap: wrap;
  max-width: 640px; margin: 0 auto; animation: fpUp 0.65s 0.5s backwards;
}
#dashboardPage .dl2-bar-box { flex: 1; min-width: 230px; text-align: left; }

/* Cascade des stats et badges DuoLearny */
#dashboardPage #tab-duolearny .dl-stat { animation: fpUp 0.5s backwards; }
#dashboardPage #tab-duolearny .dl-stat:nth-child(1) { animation-delay: 0.30s; }
#dashboardPage #tab-duolearny .dl-stat:nth-child(2) { animation-delay: 0.37s; }
#dashboardPage #tab-duolearny .dl-stat:nth-child(3) { animation-delay: 0.44s; }
#dashboardPage #tab-duolearny .dl-stat:nth-child(4) { animation-delay: 0.51s; }
#dashboardPage #tab-duolearny .dl-stat:nth-child(5) { animation-delay: 0.58s; }

/* Cartes Ressources */
#dashboardPage .rs2-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
#dashboardPage .fp-card.rs { min-height: 210px; padding: 26px 22px 18px; }
#dashboardPage .rs2-icon {
  width: 46px; height: 46px; border-radius: 13px; margin-bottom: 15px;
  background: rgba(76,175,118,0.12); border: 1px solid rgba(76,175,118,0.3);
  color: #7ed4a3; display: flex; align-items: center; justify-content: center;
}
#dashboardPage .rs2-icon.gold {
  background: rgba(201,168,76,0.12); border-color: rgba(201,168,76,0.32); color: var(--gold);
}
#dashboardPage .rs2-desc {
  font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.6; margin-bottom: 10px;
}
#dashboardPage .fp-tag.green { color: #7ed4a3; border-color: rgba(76,175,118,0.4); }

@media (max-width: 900px) {
  #dashboardPage .rs2-grid { grid-template-columns: 1fr; }
  #dashboardPage .fp-hero.qg2, #dashboardPage .fp-hero.rs2, #dashboardPage .fp-hero.dl2 { padding: 36px 20px 46px; }
}


/* ══════════ "UNIQUE CARDS" SOMBRE — Guides éclairs & DuoLearny ══════════ */

/* ── Cartes guides éclairs ── */
#dashboardPage .qg-card {
  background: linear-gradient(155deg, #161614 0%, #222220 100%);
  border-color: rgba(255,255,255,0.07);
  animation: fpUp 0.5s backwards;
}
#dashboardPage .qg-grid .qg-card:nth-child(1) { animation-delay: 0.04s; }
#dashboardPage .qg-grid .qg-card:nth-child(2) { animation-delay: 0.09s; }
#dashboardPage .qg-grid .qg-card:nth-child(3) { animation-delay: 0.14s; }
#dashboardPage .qg-grid .qg-card:nth-child(4) { animation-delay: 0.19s; }
#dashboardPage .qg-grid .qg-card:nth-child(5) { animation-delay: 0.24s; }
#dashboardPage .qg-grid .qg-card:nth-child(6) { animation-delay: 0.29s; }
#dashboardPage .qg-grid .qg-card:nth-child(7) { animation-delay: 0.34s; }
#dashboardPage .qg-grid .qg-card:nth-child(8) { animation-delay: 0.39s; }
#dashboardPage .qg-grid .qg-card:nth-child(9) { animation-delay: 0.44s; }
#dashboardPage .qg-grid .qg-card:nth-child(10) { animation-delay: 0.49s; }
#dashboardPage .qg-card::before {
  box-shadow: 2px 0 14px var(--qg-color, var(--green));
}
#dashboardPage .qg-card:hover {
  background: linear-gradient(155deg, #1b1b19 0%, #272725 100%);
  border-color: var(--qg-color, var(--green));
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.32);
}
#dashboardPage .qg-card-icon {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
}
#dashboardPage .qg-card:hover .qg-card-icon {
  background: rgba(255,255,255,0.11);
  transform: scale(1.07);
}
#dashboardPage .qg-card-title { color: #fff; }
#dashboardPage .qg-card-meta { color: rgba(255,255,255,0.45); }
#dashboardPage .qg-card-arrow {
  width: 27px; height: 27px; border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.45);
}
#dashboardPage .qg-card:hover .qg-card-arrow {
  background: var(--qg-color, var(--green));
  border-color: var(--qg-color, var(--green));
  color: #16130a;
  transform: translateX(3px);
}

/* ── En-têtes de catégories premium ── */
#dashboardPage .qg-category-bar {
  width: 5px; border-radius: 3px;
}
#dashboardPage .qg-category-count {
  background: linear-gradient(155deg, #161614 0%, #222220 100%);
  border: 1px solid rgba(201,168,76,0.3);
  color: var(--gold);
}

/* ── DuoLearny : chemin élargi ── */
#dashboardPage .dl-path { max-width: 900px; }

/* ── DuoLearny : stats sombres ── */
#dashboardPage .dl-stat {
  background: linear-gradient(155deg, #161614 0%, #222220 100%);
  border-color: rgba(255,255,255,0.07);
}
#dashboardPage .dl-stat:hover {
  border-color: rgba(201,168,76,0.4);
  box-shadow: 0 12px 28px rgba(0,0,0,0.3);
}
#dashboardPage .dl-stat-val { color: #fff; }
#dashboardPage .dl-stat-lbl { color: rgba(255,255,255,0.42); }
#dashboardPage .dl-stat-icon.xp { background: rgba(201,168,76,0.18); }
#dashboardPage .dl-stat-icon.level { background: rgba(76,175,118,0.18); }
#dashboardPage .dl-stat-icon.streak { background: rgba(217,79,61,0.16); }
#dashboardPage .dl-stat-icon.progress { background: rgba(62,146,204,0.16); }
#dashboardPage .dl-stat-icon.lessons { background: rgba(255,255,255,0.08); }

/* ── DuoLearny : badges sombres ── */
#dashboardPage .dl-badge {
  background: linear-gradient(155deg, #161614 0%, #222220 100%);
  border-color: rgba(255,255,255,0.07);
  opacity: 0.5; filter: grayscale(0.85);
}
#dashboardPage .dl-badge-name { color: rgba(255,255,255,0.55); }
#dashboardPage .dl-badge.unlocked {
  opacity: 1; filter: none;
  border-color: rgba(201,168,76,0.5);
  background: linear-gradient(155deg, rgba(201,168,76,0.18) 0%, #1d1c17 60%);
  box-shadow: 0 8px 20px rgba(201,168,76,0.14);
}
#dashboardPage .dl-badge.unlocked .dl-badge-name { color: #fff; }
#dashboardPage .dl-badge.unlocked:hover { box-shadow: 0 12px 28px rgba(201,168,76,0.25); }

/* ── DuoLearny : barre de progression globale sombre ── */
#dashboardPage .dl-global-progress {
  background: linear-gradient(155deg, #161614 0%, #222220 100%);
  border-color: rgba(255,255,255,0.07);
}
#dashboardPage .dl-global-progress-title { color: #fff; }
#dashboardPage .dl-global-progress-pct { color: #7ed4a3; }
#dashboardPage .dl-global-bar { background: rgba(255,255,255,0.1); }

/* ── DuoLearny : bulles verrouillées premium ── */
#dashboardPage .dl-bubble.locked {
  background: linear-gradient(155deg, #1c1c1a 0%, #262624 100%);
  border-color: rgba(17,17,17,0.18);
  color: rgba(255,255,255,0.5);
}
#dashboardPage .dl-unit-hdr.locked {
  background: linear-gradient(135deg, #2a2a27 0%, #353532 100%);
}


/* ══════════ GUIDES ÉCLAIRS — grandes cartes verticales (style Formation) ══════════ */
#dashboardPage .qg-grid { gap: 14px; }
#dashboardPage .qg-card {
  flex-direction: column;
  align-items: stretch;
  padding: 22px 18px 14px 22px;
  min-height: 150px;
  border-radius: 16px;
}
#dashboardPage .qg-card-icon {
  margin-left: 0;
  align-self: flex-start;
  width: 44px; height: 44px;
  border-radius: 12px;
  font-size: 21px;
  margin-bottom: 13px;
}
#dashboardPage .qg-card-text {
  flex: 1;
  justify-content: flex-start;
}
#dashboardPage .qg-card-title {
  font-size: 15px;
  line-height: 1.3;
  margin-bottom: 7px;
}
#dashboardPage .qg-card-meta { gap: 12px; }
#dashboardPage .qg-card-arrow {
  align-self: flex-end;
  margin-top: 12px;
  margin-right: 0;
}
#dashboardPage .qg-card:hover { transform: translateY(-5px); }

@media (max-width: 700px) {
  #dashboardPage .qg-card { min-height: 0; padding: 18px 16px 12px 20px; }
}


/* ══════════ DUOLEARNY — parcours agrandi & prestigieux ══════════ */
#dashboardPage .dl-path { max-width: 1060px; }

/* Bulles plus imposantes */
#dashboardPage .dl-bubble {
  width: 84px; height: 84px;
  font-size: 32px;
  border-width: 5px;
}
#dashboardPage .dl-bubble.locked { font-size: 25px; }
#dashboardPage .dl-bubble.quiz {
  width: 96px; height: 96px;
  border-radius: 30px;
}

/* Textes des étapes nettement plus grands */
#dashboardPage .dl-step { gap: 24px; margin: 32px 0; }
#dashboardPage .dl-step-label { max-width: 320px; }
#dashboardPage .dl-step-title {
  font-size: 17.5px;
  line-height: 1.3;
  margin-bottom: 6px;
}
#dashboardPage .dl-step-meta { font-size: 12.5px; gap: 8px; }
#dashboardPage .dl-step-meta .dl-xp-tag {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 7px;
}
#dashboardPage .dl-step-meta .dl-done-tag { font-size: 12.5px; }

/* En-têtes d'unités plus majestueux */
#dashboardPage .dl-unit-hdr {
  padding: 24px 30px;
  border-radius: 18px;
  margin: 44px 0 32px;
  gap: 18px;
}
#dashboardPage .dl-unit-num {
  width: 52px; height: 52px;
  font-size: 21px;
  border-radius: 15px;
}
#dashboardPage .dl-unit-eyebrow { font-size: 10.5px; margin-bottom: 4px; }
#dashboardPage .dl-unit-title { font-size: 21px; }
#dashboardPage .dl-unit-badge { font-size: 12px; padding: 5px 14px; }

/* Ligne centrale un peu plus présente */
#dashboardPage .dl-steps::before { width: 4px; }

@media (max-width: 700px) {
  #dashboardPage .dl-bubble { width: 70px; height: 70px; font-size: 27px; }
  #dashboardPage .dl-bubble.quiz { width: 80px; height: 80px; }
  #dashboardPage .dl-step-title { font-size: 15.5px; }
  #dashboardPage .dl-unit-title { font-size: 17.5px; }
  #dashboardPage .dl-unit-hdr { padding: 18px 20px; }
}


/* ══════════ SECTION APPRENTISSAGE GRATUIT (landing) ══════════ */
.learning { padding: 110px 0 150px; background: var(--cream); }
.learning-grid { margin-bottom: 20px; }
.learning-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  max-width: 1020px; margin: 0 auto;
}
.learning-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: 24px; padding: 38px 34px;
  display: flex; flex-direction: column; align-items: flex-start;
  position: relative; overflow: hidden;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.learning-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 56px rgba(0,0,0,0.09);
  border-color: var(--border-2);
}
.learning-icon {
  width: 54px; height: 54px; border-radius: 15px; font-size: 26px;
  background: var(--gold-l); border: 1px solid rgba(201,168,76,0.25);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.learning-title {
  font-family: var(--serif); font-size: 24px; color: var(--ink);
  letter-spacing: -0.01em; margin-bottom: 12px;
}
.learning-desc {
  font-size: 14px; color: var(--ink-3); line-height: 1.7; margin-bottom: 22px;
}
.learning-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.learning-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 14px;
  background: var(--cream); border: 1px solid var(--border);
  font-size: 11px; font-weight: 700; color: var(--ink-2);
}
.learning-chip::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 6px var(--c);
}
.learning-stats {
  display: flex; align-items: center; gap: 18px;
  margin-bottom: 26px; flex-wrap: wrap;
}
.learning-stat strong {
  display: block; font-family: var(--serif); font-size: 22px;
  color: var(--ink); line-height: 1.1; margin-bottom: 2px;
}
.learning-stat span {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.learning-stat-div { width: 1px; height: 30px; background: var(--border-2); }
.learning-card .btn-primary { margin-top: auto; }

/* Carte sombre DuoLearny */
.learning-card.dark {
  background: linear-gradient(150deg, #131311 0%, #1d1d1a 55%, #18211b 100%);
  border-color: rgba(255,255,255,0.08);
}
.learning-card.dark:hover { box-shadow: 0 26px 60px rgba(0,0,0,0.28); border-color: rgba(201,168,76,0.35); }
.learning-orb {
  position: absolute; top: -70px; right: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  background: rgba(76,175,118,0.2); filter: blur(50px);
  animation: authOrb 10s ease-in-out infinite; pointer-events: none;
}
.learning-mascot {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  border: 3px solid rgba(126,212,163,0.35); background: #fff;
  box-shadow: 0 8px 26px rgba(0,0,0,0.35), 0 0 0 7px rgba(76,175,118,0.07);
  margin-bottom: 18px; animation: dlFloat 3.5s ease-in-out infinite;
  position: relative; z-index: 1;
}
.learning-card.dark .learning-title { color: #fff; }
.learning-card.dark .learning-desc { color: rgba(255,255,255,0.62); }
.learning-card.dark .learning-stat strong { color: var(--gold); }
.learning-card.dark .learning-stat span { color: rgba(255,255,255,0.45); }
.learning-card.dark .learning-stat-div { background: rgba(255,255,255,0.12); }
.learning-ai-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 16px; margin-bottom: 14px;
  background: rgba(76,175,118,0.1); border: 1px solid rgba(76,175,118,0.3);
  font-size: 11px; font-weight: 700; color: #7ed4a3;
  position: relative; z-index: 1;
}
.learning-ai-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: aiPulseDot 2s ease-in-out infinite;
}
@keyframes aiPulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.8); }
}
.learning-card.dark .btn-primary.gold-cta,
.learning-card .btn-primary.gold-cta {
  background: linear-gradient(135deg, var(--gold) 0%, #b8932e 100%);
  color: #16130a; border: none;
  box-shadow: 0 8px 22px rgba(201,168,76,0.35);
}
.learning-card .btn-primary.gold-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(201,168,76,0.5);
}
.learning-card.dark .btn-primary.gold-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(201,168,76,0.5);
}
@media (max-width: 860px) {
  .learning { padding: 76px 0; }
  .learning-grid { grid-template-columns: 1fr; }
}


/* ══════════ HÉROS CINÉMATIQUES COMPACTS — onglets outils ══════════ */
#dashboardPage .fp-hero.tool {
  padding: 32px 34px 40px;
  margin-bottom: 22px;
  text-align: left;
}
#dashboardPage .fp-hero.tool .fp-hero-chart { height: 30%; opacity: 0.7; }
#dashboardPage .fp-tool-row {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; flex-wrap: wrap;
}
#dashboardPage .fp-tool-left { flex: 1; min-width: 260px; }
#dashboardPage .fp-presents.left { justify-content: flex-start; margin-bottom: 12px; }
#dashboardPage .fp-hero.tool .fp-title {
  font-size: clamp(24px, 3vw, 33px);
  margin-bottom: 10px;
}
#dashboardPage .fp-sub.left {
  margin: 0; max-width: 560px;
  font-size: 13px;
}
#dashboardPage .fp-tool-actions {
  display: flex; gap: 10px; align-items: center; flex-shrink: 0;
  animation: fpUp 0.6s 0.35s backwards;
}
/* Boutons d'action dorés sur fond sombre */
#dashboardPage .fp-hero.tool .goal-add-cta {
  background: linear-gradient(135deg, var(--gold) 0%, #b8932e 100%);
  color: #16130a; border: none;
  box-shadow: 0 6px 18px rgba(201,168,76,0.35);
}
#dashboardPage .fp-hero.tool .goal-add-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(201,168,76,0.5);
  background: linear-gradient(135deg, #d4b35a 0%, #c29f3a 100%);
}
/* Toggle de devise sur fond sombre */
#dashboardPage .fp-hero.tool .inv-currency-toggle {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
}
#dashboardPage .fp-hero.tool .inv-currency-toggle button { color: rgba(255,255,255,0.6); }
#dashboardPage .fp-hero.tool .inv-currency-toggle button.active {
  background: #fff; color: var(--ink);
}
@media (max-width: 700px) {
  #dashboardPage .fp-hero.tool { padding: 26px 20px 34px; }
  #dashboardPage .fp-tool-actions { width: 100%; justify-content: flex-start; }
}


/* ══════════ HÉROS LANDING — fond vert cinématique (style DuoLearny) ══════════ */
.hero {
  background: linear-gradient(150deg, #0e120f 0%, #17211b 48%, #141512 100%);
}
.hero-orb {
  position: absolute; border-radius: 50%;
  filter: blur(70px); pointer-events: none; z-index: 0;
}
.hero-orb.o1 {
  width: 440px; height: 440px; top: -150px; right: -110px;
  background: rgba(76,175,118,0.17);
  animation: authOrb 11s ease-in-out infinite;
}
.hero-orb.o2 {
  width: 340px; height: 340px; bottom: 5%; left: -140px;
  background: rgba(201,168,76,0.11);
  animation: authOrb 13s ease-in-out infinite reverse;
}
.hero-fin-chart {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: 78%;
  opacity: 0.5; pointer-events: none; z-index: 0;
}
.hero-fin-line {
  stroke-dasharray: 1500; stroke-dashoffset: 1500;
  animation: fpDraw 3s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}
.hero-content { position: relative; z-index: 2; }
@media (max-width: 700px) {
  .hero-orb.o1 { width: 280px; height: 280px; }
  .hero-orb.o2 { width: 220px; height: 220px; }
}


/* CTA Premium doré dans le modal des guides */
.qg-modal-cta-link.gold {
  background: linear-gradient(135deg, var(--gold) 0%, #b8932e 100%);
  color: #16130a !important;
  border: none;
  padding: 11px 20px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(201,168,76,0.35);
  white-space: nowrap;
}
.qg-modal-cta-link.gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(201,168,76,0.5);
}


/* ══════════ ÉTATS FINANCIERS ══════════ */
#dashboardPage .fp-hero.nw { padding-bottom: 34px; }
#dashboardPage .nw-add-liab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 20px; border-radius: 11px; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  background: rgba(217,79,61,0.14); color: #ff9d8f;
  border: 1px solid rgba(217,79,61,0.4);
  transition: all 0.25s cubic-bezier(0.22,1,0.36,1);
}
#dashboardPage .nw-add-liab:hover {
  background: rgba(217,79,61,0.24); transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(217,79,61,0.2);
}
#dashboardPage .nw-hero-stats {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  margin-top: 26px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.09);
  animation: fpUp 0.65s 0.4s backwards;
}
#dashboardPage .nw-hero-stat-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 6px;
}
#dashboardPage .nw-hero-stat-val {
  font-family: var(--serif); font-size: 26px; letter-spacing: -0.01em;
  font-feature-settings: "tnum"; line-height: 1.1;
}
#dashboardPage .nw-hero-stat.net .nw-hero-stat-val { font-size: 36px; }
#dashboardPage .nw-hero-stat-val.gold { color: var(--gold); }
#dashboardPage .nw-hero-stat-val.gold.negative { color: #ff9d8f; }
#dashboardPage .nw-hero-stat-val.green { color: #7ed4a3; }
#dashboardPage .nw-hero-stat-val.red { color: #ff9d8f; }
#dashboardPage .nw-hero-div { width: 1px; height: 44px; background: rgba(255,255,255,0.1); }
#dashboardPage .nw-hero-stat.ratio { min-width: 200px; flex: 1; max-width: 280px; }
#dashboardPage .nw-ratio-bar {
  height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px;
  overflow: hidden; margin-bottom: 6px;
}
#dashboardPage .nw-ratio-fill {
  height: 100%; border-radius: 4px;
  transition: width 0.7s cubic-bezier(0.22,1,0.36,1), background 0.4s;
}
#dashboardPage .nw-ratio-fill.good { background: linear-gradient(to right, var(--green), #6cc090); }
#dashboardPage .nw-ratio-fill.ok { background: linear-gradient(to right, var(--gold), #e0c068); }
#dashboardPage .nw-ratio-fill.warn { background: linear-gradient(to right, #D98C2B, #e8a854); }
#dashboardPage .nw-ratio-fill.danger { background: linear-gradient(to right, #D94F3D, #e87663); }
#dashboardPage .nw-ratio-label { font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,0.65); }

/* Colonnes */
#dashboardPage .nw-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px;
}
#dashboardPage .nw-col {
  background: linear-gradient(155deg, #161614 0%, #222220 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px; padding: 22px 20px 16px;
  animation: fpUp 0.55s backwards;
}
#dashboardPage .nw-grid .nw-col:nth-child(1) { animation-delay: 0.15s; }
#dashboardPage .nw-grid .nw-col:nth-child(2) { animation-delay: 0.25s; }
#dashboardPage .nw-col-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
#dashboardPage .nw-col-title {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--serif); font-size: 18px; color: #fff;
}
#dashboardPage .nw-col-dot {
  width: 9px; height: 9px; border-radius: 50%;
}
#dashboardPage .nw-col-dot.green { background: var(--green); box-shadow: 0 0 10px var(--green); }
#dashboardPage .nw-col-dot.red { background: #D94F3D; box-shadow: 0 0 10px #D94F3D; }
#dashboardPage .nw-col-total {
  font-family: var(--mono); font-size: 15px; font-weight: 700;
  font-feature-settings: "tnum";
}
#dashboardPage .nw-col-total.green { color: #7ed4a3; }
#dashboardPage .nw-col-total.red { color: #ff9d8f; }
#dashboardPage .nw-list { display: flex; flex-direction: column; gap: 9px; min-height: 60px; }
#dashboardPage .nw-empty {
  text-align: center; padding: 26px 14px;
  font-size: 12.5px; color: rgba(255,255,255,0.4); line-height: 1.7;
}
#dashboardPage .nw-item {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 13px; padding: 12px 14px;
  transition: all 0.22s;
}
#dashboardPage .nw-item:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.14);
  transform: translateX(2px);
}
#dashboardPage .nw-item-icon {
  width: 38px; height: 38px; border-radius: 11px; font-size: 18px;
  background: color-mix(in srgb, var(--c) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 38%, transparent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
@supports not (background: color-mix(in srgb, red 16%, transparent)) {
  #dashboardPage .nw-item-icon { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); }
}
#dashboardPage .nw-item-info { flex: 1; min-width: 0; }
#dashboardPage .nw-item-label {
  font-size: 13.5px; font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#dashboardPage .nw-item-type {
  font-size: 10.5px; color: rgba(255,255,255,0.4); font-weight: 600; margin-top: 2px;
}
#dashboardPage .nw-item-val {
  font-family: var(--mono); font-size: 13.5px; font-weight: 700;
  color: #fff; font-feature-settings: "tnum"; white-space: nowrap;
}
#dashboardPage .nw-item-actions { display: flex; gap: 5px; opacity: 0; transition: opacity 0.2s; }
#dashboardPage .nw-item:hover .nw-item-actions { opacity: 1; }
@media (hover: none) { #dashboardPage .nw-item-actions { opacity: 1; } }
#dashboardPage .nw-item-btn {
  width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.55);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
#dashboardPage .nw-item-btn:hover { background: rgba(255,255,255,0.14); color: #fff; }
#dashboardPage .nw-item-btn.del:hover { background: rgba(217,79,61,0.25); color: #ff9d8f; border-color: rgba(217,79,61,0.4); }
#dashboardPage .nw-col-add {
  width: 100%; margin-top: 14px; padding: 11px;
  background: transparent; border: 1.5px dashed rgba(255,255,255,0.18);
  border-radius: 12px; cursor: pointer;
  font-family: var(--sans); font-size: 12.5px; font-weight: 700;
  color: rgba(255,255,255,0.5); transition: all 0.22s;
}
#dashboardPage .nw-col-add:hover {
  border-color: var(--gold); color: var(--gold);
  background: rgba(201,168,76,0.06);
}

/* Répartition */
#dashboardPage .nw-comp {
  background: linear-gradient(155deg, #161614 0%, #222220 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px; padding: 20px 22px;
  animation: fpUp 0.55s 0.35s backwards;
}
#dashboardPage .nw-comp-title {
  font-family: var(--serif); font-size: 15px; color: #fff; margin-bottom: 14px;
}
#dashboardPage .nw-comp-bar {
  display: flex; height: 14px; border-radius: 7px; overflow: hidden;
  background: rgba(255,255,255,0.07); margin-bottom: 12px;
}
#dashboardPage .nw-comp-seg { height: 100%; transition: width 0.6s cubic-bezier(0.22,1,0.36,1); }
#dashboardPage .nw-comp-legend { display: flex; gap: 16px; flex-wrap: wrap; }
#dashboardPage .nw-comp-leg {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,0.6);
}
#dashboardPage .nw-comp-leg strong { color: #fff; }
#dashboardPage .nw-comp-dot { width: 8px; height: 8px; border-radius: 50%; }

/* Modal */
.nw-modal { max-width: 640px; }
.nw-modal-cats { margin-bottom: 18px; max-height: 300px; overflow-y: auto; padding-right: 6px; }
.nw-modal-group { margin-bottom: 14px; }
.nw-modal-group-lbl {
  display: flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px;
}
.nw-modal-group-lbl::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 7px var(--c);
}
.nw-modal-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.nw-type-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 18px; cursor: pointer;
  background: #fff; border: 1.5px solid var(--border-2);
  font-family: var(--sans); font-size: 12px; font-weight: 600; color: var(--ink-2);
  transition: all 0.2s;
}
.nw-type-chip span { font-size: 14px; }
.nw-type-chip:hover { border-color: var(--ink-3); background: var(--cream); transform: translateY(-1px); }
.nw-type-chip.selected {
  border-color: var(--ink); background: var(--ink); color: #fff;
  box-shadow: 0 4px 12px rgba(17,17,17,0.2);
}
.nw-modal-fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px;
}
.nw-field label {
  display: block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 7px;
}
.nw-field input {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--border-2); border-radius: 11px;
  font-family: var(--sans); font-size: 14px; color: var(--ink);
  background: #fff; transition: all 0.2s;
}
.nw-field input:focus {
  outline: none; border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(17,17,17,0.06);
}
@media (max-width: 800px) {
  #dashboardPage .nw-grid { grid-template-columns: 1fr; }
  .nw-modal-fields { grid-template-columns: 1fr; }
  #dashboardPage .nw-hero-stat.net .nw-hero-stat-val { font-size: 30px; }
  #dashboardPage .nw-hero-div { display: none; }
}


/* ── Analyse IA Learny — états financiers ── */
#dashboardPage .nw-learny-section { margin-top: 22px; }
#dashboardPage .nw-ai-head {
  display: flex; align-items: center; gap: 13px; margin-bottom: 16px;
}
#dashboardPage .nw-ai-avatar {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--green-l); background: #fff; flex-shrink: 0;
}
#dashboardPage .nw-ai-title {
  font-family: var(--serif); font-size: 17px; color: var(--ink); letter-spacing: -0.01em;
}
#dashboardPage .nw-ai-sub {
  font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 3px;
  font-feature-settings: "tnum";
}
#dashboardPage .nw-ai-cards { display: flex; flex-direction: column; gap: 11px; }
#dashboardPage .nw-ai-card {
  display: flex; gap: 13px; align-items: flex-start;
  background: #fff; border: 1px solid var(--border);
  border-radius: 14px; padding: 15px 17px;
  border-left-width: 3px;
  animation: aiResultIn 0.4s ease backwards;
}
#dashboardPage .nw-ai-cards .nw-ai-card:nth-child(1) { animation-delay: 0.05s; }
#dashboardPage .nw-ai-cards .nw-ai-card:nth-child(2) { animation-delay: 0.12s; }
#dashboardPage .nw-ai-cards .nw-ai-card:nth-child(3) { animation-delay: 0.19s; }
#dashboardPage .nw-ai-cards .nw-ai-card:nth-child(4) { animation-delay: 0.26s; }
#dashboardPage .nw-ai-cards .nw-ai-card:nth-child(5) { animation-delay: 0.33s; }
#dashboardPage .nw-ai-cards .nw-ai-card:nth-child(6) { animation-delay: 0.40s; }
#dashboardPage .nw-ai-cards .nw-ai-card:nth-child(7) { animation-delay: 0.47s; }
#dashboardPage .nw-ai-card.good { border-left-color: var(--green); }
#dashboardPage .nw-ai-card.warn { border-left-color: var(--gold); }
#dashboardPage .nw-ai-card.bad { border-left-color: #D94F3D; }
#dashboardPage .nw-ai-card-icon {
  font-size: 21px; flex-shrink: 0; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--cream);
}
#dashboardPage .nw-ai-card-text {
  font-size: 12.5px; color: var(--ink-2); line-height: 1.65;
}
#dashboardPage .nw-ai-card-text strong { display: block; color: var(--ink); font-size: 13.5px; margin-bottom: 4px; font-weight: 700; }
#dashboardPage .nw-ai-card-text .dl-guide-btn { margin-top: 9px; }
#dashboardPage .nw-ai-closing {
  margin-top: 14px; padding: 13px 16px;
  background: var(--cream); border-radius: 12px;
  font-size: 11.5px; color: var(--ink-3); line-height: 1.6; font-style: italic;
}




/* ── Vue d'ensemble : héros pleine largeur style Formation ── */
#dashboardPage .fp-hero.ov-hero {
  padding: 46px 40px 50px;
  margin-bottom: 28px;
}
#dashboardPage .ov-hero .fp-title { margin-bottom: 14px; }
#dashboardPage .ov-hero-btns {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  margin-top: 26px; animation: fpUp 0.65s 0.5s backwards;
}
@media (max-width: 600px) {
  #dashboardPage .fp-hero.ov-hero { padding: 36px 22px 40px; }
}


/* ══════════ COMMENT ÇA MARCHE ══════════ */
.howit { padding: 110px 0; background: var(--cream-dark); }
.howit-steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
  max-width: 1080px; margin: 0 auto; position: relative;
}
.howit-line {
  position: absolute; top: 38px; left: 12%; right: 12%; height: 2px;
  background: linear-gradient(to right, transparent, var(--border-2) 12%, var(--border-2) 88%, transparent);
  z-index: 0;
}
.howit-step {
  position: relative; z-index: 1; text-align: center;
  background: #fff; border: 1px solid var(--border);
  border-radius: 20px; padding: 30px 22px 26px;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.howit-step:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(0,0,0,0.08);
  border-color: var(--green);
}
.howit-num {
  width: 30px; height: 30px; margin: 0 auto 16px;
  background: var(--ink); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 14px; font-weight: 600;
  position: relative; z-index: 2;
}
.howit-step:hover .howit-num { background: var(--green); }
.howit-icon {
  width: 60px; height: 60px; margin: 0 auto 16px;
  background: var(--cream); border: 1px solid var(--border);
  border-radius: 17px; font-size: 28px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.35s;
}
.howit-step:hover .howit-icon { transform: scale(1.08) rotate(-4deg); background: var(--green-l); }
.howit-step-title {
  font-family: var(--serif); font-size: 17px; color: var(--ink);
  letter-spacing: -0.01em; margin-bottom: 9px;
}
.howit-step-desc { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }

/* ══════════ STATISTIQUES ANIMÉES ══════════ */
.stats-band {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #0e120f 0%, #17211b 50%, #141512 100%);
  padding: 64px 0;
}
.stats-band-orb { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; }
.stats-band-orb.o1 { width: 320px; height: 320px; top: -120px; right: 5%; background: rgba(76,175,118,0.16); animation: authOrb 11s ease-in-out infinite; }
.stats-band-orb.o2 { width: 260px; height: 260px; bottom: -120px; left: 8%; background: rgba(201,168,76,0.1); animation: authOrb 13s ease-in-out infinite reverse; }
.stats-band-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  max-width: 940px; margin: 0 auto;
}
.stats-band-item { text-align: center; }
.stats-band-num {
  font-family: var(--serif); font-size: clamp(38px, 5vw, 54px);
  color: var(--gold); letter-spacing: -0.02em; line-height: 1;
  display: flex; align-items: baseline; justify-content: center; gap: 2px;
  font-feature-settings: "tnum";
}
.stats-band-pct, .stats-band-num .count + .stats-band-pct { color: var(--gold); }
.stats-band-lbl {
  margin-top: 10px; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.55);
}
@media (max-width: 860px) {
  .howit { padding: 76px 0; }
  .howit-steps { grid-template-columns: repeat(2, 1fr); }
  .howit-line { display: none; }
  .stats-band-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; }
}
@media (max-width: 460px) {
  .howit-steps { grid-template-columns: 1fr; }
}


/* ══════════ CENTRE DE COMMANDE — Vue d'ensemble ══════════ */
#dashboardPage .dash-cmd { margin-bottom: 28px; }
#dashboardPage .dash-cmd-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px;
}
/* Carte prochaine action */
#dashboardPage .dash-cmd-next {
  position: relative; overflow: hidden; cursor: pointer;
  background: linear-gradient(150deg, #131311 0%, #1e1e1b 55%, #18211b 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px; padding: 24px 26px;
  display: flex; flex-direction: column;
  transition: all 0.32s cubic-bezier(0.22,1,0.36,1);
}
#dashboardPage .dash-cmd-next:hover {
  transform: translateY(-4px);
  border-color: rgba(76,175,118,0.4);
  box-shadow: 0 20px 44px rgba(0,0,0,0.28);
}
#dashboardPage .dash-cmd-next-glow {
  position: absolute; top: -60%; right: -10%;
  width: 50%; height: 200%; border-radius: 50%;
  background: radial-gradient(circle, rgba(76,175,118,0.18) 0%, transparent 65%);
  pointer-events: none; transition: opacity 0.32s;
}
#dashboardPage .dash-cmd-next:hover .dash-cmd-next-glow { opacity: 1.4; }
#dashboardPage .dash-cmd-next-tag {
  position: relative; z-index: 1;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 16px;
}
#dashboardPage .dash-cmd-next-row {
  position: relative; z-index: 1;
  display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px;
}
#dashboardPage .dash-cmd-next-icon {
  width: 52px; height: 52px; flex-shrink: 0;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 15px; font-size: 26px;
  display: flex; align-items: center; justify-content: center;
}
#dashboardPage .dash-cmd-next-title {
  font-family: var(--serif); font-size: 19px; color: #fff;
  letter-spacing: -0.01em; line-height: 1.25; margin-bottom: 6px;
}
#dashboardPage .dash-cmd-next-desc {
  font-size: 12.5px; color: rgba(255,255,255,0.6); line-height: 1.6;
}
#dashboardPage .dash-cmd-next-cta {
  position: relative; z-index: 1; margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-d) 100%);
  color: #fff; padding: 11px 22px; border-radius: 11px;
  font-size: 13px; font-weight: 700;
  box-shadow: 0 6px 18px rgba(76,175,118,0.3);
  transition: all 0.25s;
}
#dashboardPage .dash-cmd-next:hover .dash-cmd-next-cta {
  transform: translateX(3px);
  box-shadow: 0 8px 24px rgba(76,175,118,0.45);
}
/* Mini-cartes */
#dashboardPage .dash-cmd-mini {
  background: #fff; border: 1px solid var(--border);
  border-radius: 18px; padding: 18px 20px; cursor: pointer;
  display: flex; flex-direction: column;
  transition: all 0.28s cubic-bezier(0.22,1,0.36,1);
}
#dashboardPage .dash-cmd-mini:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.08);
  border-color: var(--border-2);
}
#dashboardPage .dash-cmd-mini-top {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
#dashboardPage .dash-cmd-mini-emoji {
  width: 36px; height: 36px; border-radius: 11px; font-size: 18px;
  background: var(--cream); display: flex; align-items: center; justify-content: center;
}
#dashboardPage .dash-cmd-mini-lvl {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--green-d); background: var(--green-l);
  padding: 4px 10px; border-radius: 10px;
}
#dashboardPage .dash-cmd-mini-lvl.pos { color: var(--green-d); background: var(--green-l); }
#dashboardPage .dash-cmd-mini-lvl.neg { color: var(--red); background: var(--red-l); }
#dashboardPage .dash-cmd-mini-title {
  font-family: var(--serif); font-size: 14.5px; color: var(--ink); margin-bottom: 12px;
}
#dashboardPage .dash-cmd-mini-bar {
  height: 7px; background: var(--cream-dark); border-radius: 4px; overflow: hidden; margin-bottom: 9px;
}
#dashboardPage .dash-cmd-mini-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(to right, var(--green), #6cc090);
  transition: width 0.7s cubic-bezier(0.22,1,0.36,1);
}
#dashboardPage .dash-cmd-mini-net {
  font-family: var(--serif); font-size: 21px; color: var(--ink);
  letter-spacing: -0.01em; margin-bottom: 5px; font-feature-settings: "tnum";
}
#dashboardPage .dash-cmd-mini-net.neg { color: var(--red); }
#dashboardPage .dash-cmd-mini-sub {
  font-size: 11px; color: var(--muted); font-weight: 600; margin-top: auto;
}
@media (max-width: 920px) {
  #dashboardPage .dash-cmd-grid { grid-template-columns: 1fr 1fr; }
  #dashboardPage .dash-cmd-next { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  #dashboardPage .dash-cmd-grid { grid-template-columns: 1fr; }
}

/* (V2 : deux accolades orphelines retirées ici — elles invalidaient la règle .mf-stage ci-dessous) */

/* ══════════ LEARNY VIVANT — tête animée qui suit la souris ══════════ */
.mf-stage {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 55% 75% at 80% 45%, rgba(76,175,118,0.13) 0%, transparent 58%),
    linear-gradient(160deg, #f3eee3 0%, #efe9dc 100%);
  border-radius: 28px; margin-bottom: 100px;
  padding: 56px 52px;
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  grid-template-areas: "text figure";
  align-items: center; gap: 40px;
}
.mf-left { grid-area: text; }
.mf-character { grid-area: figure; }
#dashboardPage .mf-pills, .mf-stage .mf-pills { grid-area: pills; }
.mf-orb { position: absolute; border-radius: 50%; filter: blur(64px); pointer-events: none; z-index: 0; }
.mf-orb1 { width: 320px; height: 320px; top: -120px; right: 4%; background: rgba(76,175,118,0.16); animation: authOrb 12s ease-in-out infinite; }
.mf-orb2 { width: 260px; height: 260px; bottom: -110px; left: -30px; background: rgba(201,168,76,0.1); animation: authOrb 14s ease-in-out infinite reverse; }
.mf-grid-bg {
  position: absolute; inset: 0; z-index: 0; opacity: 0.4;
  background-image: linear-gradient(rgba(17,17,17,0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(17,17,17,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 70% 45%, #000 25%, transparent 72%);
  mask-image: radial-gradient(ellipse 75% 75% at 70% 45%, #000 25%, transparent 72%);
}

/* Texte à gauche (noir, lisible) */
.mf-left { position: relative; z-index: 2; text-align: left; }
.mf-intro {
  font-size: 14px; color: var(--ink-3); margin-bottom: 12px;
  animation: fpUp 0.6s 0.2s backwards;
}
.mf-intro strong { color: var(--ink); font-weight: 700; }
.mf-type {
  font-family: var(--serif); font-size: clamp(23px, 3vw, 34px);
  color: var(--ink); line-height: 1.28; letter-spacing: -0.015em;
  min-height: 92px; margin-bottom: 26px;
}
.mf-cursor {
  display: inline-block; width: 2px; height: 1.05em; background: var(--green);
  margin-left: 3px; vertical-align: middle; animation: lhBlink 1s step-end infinite;
}
@keyframes lhBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.mf-pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-top: 22px; grid-area: pills;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.mf-pills.visible { opacity: 1; transform: translateY(0); }
.mf-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; color: var(--ink);
  border: 1px solid var(--border-2); border-radius: 30px;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  padding: 11px 19px; cursor: pointer;
  transition: all 0.25s cubic-bezier(0.22,1,0.36,1);
}
.mf-pill:hover { background: var(--ink); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,0.18); }
.mf-pill.solid {
  background: linear-gradient(135deg, var(--gold) 0%, #b8932e 100%);
  color: #16130a; border: none; box-shadow: 0 6px 18px rgba(201,168,76,0.3);
}
.mf-pill.solid:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(201,168,76,0.5); background: linear-gradient(135deg, #d4b35a 0%, #c29f3a 100%); }

/* Personnage à droite : tête + corps superposés */
.mf-character { position: relative; z-index: 1; display: flex; justify-content: flex-end; perspective: 1100px; }
.mf-character { position: relative; z-index: 1; display: flex; justify-content: center; perspective: 1100px; }
.mf-full-img {
  width: 100%; max-width: 300px; height: auto; display: block;
  transform-origin: 50% 80%;
  transition: transform 0.1s ease-out;
  will-change: transform;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,0.16));
  -webkit-user-select: none; user-select: none;
}
@media (max-width: 820px) {
  .mf-stage {
    grid-template-columns: 1fr; text-align: center; padding: 40px 22px 36px;
    grid-template-areas: "figure" "text";
  }
  .mf-character { max-width: 220px; margin: 0 auto; }
  .mf-type { min-height: 100px; }
}


/* ══════════════════════════════════════════════════════════
   SIMULATEUR — Investir ou rembourser sa dette ?
   ══════════════════════════════════════════════════════════ */
.tools-section { margin-top: 8px; }

.ct-sim {
  background: linear-gradient(160deg, #f3eee3 0%, #efe9dc 100%);
  border: 1px solid var(--border);
  border-radius: 26px; overflow: hidden;
  margin-top: 24px;
}

/* Hero du simulateur */
.ct-sim-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #0e120f 0%, #17211b 52%, #141512 100%);
  padding: 40px 38px 36px; text-align: center;
}
.ct-sim-badge {
  display: inline-block; margin-bottom: 16px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold);
  background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.3);
  padding: 6px 14px; border-radius: 20px;
}
.ct-sim-title {
  font-family: var(--serif); font-size: clamp(26px, 3.4vw, 38px);
  color: #fff; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 14px;
}
.ct-sim-title em { font-style: italic; color: var(--green); }
.ct-sim-sub {
  font-size: 13.5px; color: rgba(255,255,255,0.6); line-height: 1.65;
  max-width: 600px; margin: 0 auto;
}

/* Corps : contrôles + résultats */
.ct-sim-body {
  display: grid; grid-template-columns: 340px 1fr; gap: 0;
}
.ct-controls {
  background: #fff; border-right: 1px solid var(--border);
  padding: 28px 26px; display: flex; flex-direction: column; gap: 24px;
}
.ct-ctrl-group-title {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--serif); font-size: 15px; color: var(--ink);
  margin-bottom: 16px;
}
.ct-dot { width: 9px; height: 9px; border-radius: 50%; }
.ct-dot.red { background: #D94F3D; box-shadow: 0 0 8px rgba(217,79,61,0.5); }
.ct-dot.green { background: var(--green); box-shadow: 0 0 8px rgba(76,175,118,0.5); }
.ct-dot.gold { background: var(--gold); box-shadow: 0 0 8px rgba(201,168,76,0.5); }
.ct-field { margin-bottom: 16px; }
.ct-field:last-child { margin-bottom: 0; }
.ct-field label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 9px;
}
.ct-field label span {
  font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--green-d);
}
.ct-field input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  border-radius: 3px; background: var(--cream-dark); outline: none; cursor: pointer;
}
.ct-field input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px;
  border-radius: 50%; background: var(--ink); cursor: pointer;
  border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.2); transition: all 0.15s;
}
.ct-field input[type=range]::-webkit-slider-thumb:hover { background: var(--green); transform: scale(1.12); }
.ct-field input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--ink);
  cursor: pointer; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Résultats */
.ct-results { padding: 28px 30px; display: flex; flex-direction: column; gap: 22px; }

.ct-winner {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #161614 0%, #222220 100%);
  border: 1px solid rgba(201,168,76,0.3); border-radius: 18px;
  padding: 24px 26px; text-align: center;
}
.ct-winner-tag {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px;
}
.ct-winner-name { font-family: var(--serif); font-size: 24px; margin-bottom: 8px; }
.ct-winner-net {
  font-family: var(--serif); font-size: 32px; color: #fff; letter-spacing: -0.01em;
  font-feature-settings: "tnum";
}
.ct-winner-net span { font-family: var(--sans); font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.5); display: block; margin-top: 4px; }
.ct-winner-ecart { font-size: 12.5px; color: rgba(255,255,255,0.6); margin-top: 12px; }
.ct-winner-ecart strong { color: var(--green); }

/* KPI grid */
.ct-kpi-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.ct-kpi {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 14px; text-align: center;
}
.ct-kpi-ic { font-size: 20px; margin-bottom: 8px; }
.ct-kpi-val {
  font-family: var(--serif); font-size: 18px; letter-spacing: -0.01em;
  font-feature-settings: "tnum"; margin-bottom: 4px;
}
.ct-kpi-lbl { font-size: 10.5px; color: var(--muted); font-weight: 600; line-height: 1.35; }

/* Graphique */
.ct-chart-wrap {
  background: linear-gradient(150deg, #161614 0%, #222220 100%);
  border: 1px solid rgba(255,255,255,0.07); border-radius: 18px; padding: 22px 22px 18px;
}
.ct-chart-title {
  font-family: var(--serif); font-size: 15px; color: #fff; margin-bottom: 14px;
}
.ct-chart-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.ct-leg {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,0.7);
}
.ct-leg-dot { width: 10px; height: 10px; border-radius: 3px; }
.ct-canvas-wrap { width: 100%; }

/* Résumé */
.ct-summary {
  background: var(--green-l); border: 1px solid rgba(76,175,118,0.25);
  border-radius: 16px; padding: 20px 22px;
}
.ct-summary-title {
  font-family: var(--serif); font-size: 16px; color: var(--ink); margin-bottom: 12px;
}
.ct-summary p { font-size: 13px; color: var(--ink-2); line-height: 1.65; margin: 0 0 10px; }
.ct-summary p:last-child { margin-bottom: 0; }

/* Section éducative */
.ct-edu { padding: 30px 38px 38px; border-top: 1px solid var(--border); }
.ct-edu-title { font-family: var(--serif); font-size: 18px; color: var(--ink); margin-bottom: 18px; }
.ct-edu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 20px; }
.ct-edu-card {
  background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px;
  font-size: 12.5px; color: var(--ink-3); line-height: 1.6;
}
.ct-edu-card strong { display: block; color: var(--ink); font-size: 13.5px; margin-bottom: 7px; }
.ct-disclaimer {
  font-size: 11.5px; color: var(--muted); font-style: italic; line-height: 1.6;
  text-align: center; padding: 14px 20px; background: var(--cream); border-radius: 12px;
}

@media (max-width: 860px) {
  .ct-sim-body { grid-template-columns: 1fr; }
  .ct-controls { border-right: none; border-bottom: 1px solid var(--border); }
  .ct-kpi-grid { grid-template-columns: 1fr; }
  .ct-edu-grid { grid-template-columns: 1fr; }
  .ct-edu { padding: 26px 22px 30px; }
}


/* ══════════ GRILLE D'OUTILS COMPLÉMENTAIRES ══════════ */
.tools-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px; margin-top: 4px;
}
.tool-card {
  position: relative; overflow: hidden; cursor: pointer;
  background: linear-gradient(155deg, #161614 0%, #222220 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px; padding: 28px 26px;
  display: flex; flex-direction: column;
  transition: all 0.35s cubic-bezier(0.22,1,0.36,1);
  animation: fpUp 0.55s backwards;
}
.tools-grid .tool-card:nth-child(1) { animation-delay: 0.05s; }
.tools-grid .tool-card:nth-child(2) { animation-delay: 0.12s; }
.tools-grid .tool-card:nth-child(3) { animation-delay: 0.19s; }
.tool-card:not(.soon):hover {
  transform: translateY(-6px);
  border-color: rgba(201,168,76,0.4);
  box-shadow: 0 22px 48px rgba(0,0,0,0.3);
}
.tool-card.soon { opacity: 0.62; cursor: default; }
.tool-card-badge {
  align-self: flex-start;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold);
  background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.3);
  padding: 4px 11px; border-radius: 12px; margin-bottom: 16px;
}
.tool-card.soon .tool-card-badge { color: var(--grey, #7B8794); background: rgba(123,135,148,0.15); border-color: rgba(123,135,148,0.3); }
.tool-card-icon {
  width: 52px; height: 52px; border-radius: 15px; font-size: 26px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.tool-card-title {
  font-family: var(--serif); font-size: 18px; color: #fff;
  letter-spacing: -0.01em; line-height: 1.3; margin-bottom: 8px;
}
.tool-card-name {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--gold); margin-bottom: 12px; letter-spacing: 0.02em;
}
.tool-card.soon .tool-card-name { color: rgba(255,255,255,0.4); }
.tool-card-desc {
  font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.6; margin-bottom: 20px;
  flex: 1;
}
.tool-card-cta {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--gold) 0%, #b8932e 100%);
  color: #16130a; padding: 11px 20px; border-radius: 11px;
  font-size: 13px; font-weight: 700;
  box-shadow: 0 6px 18px rgba(201,168,76,0.3);
  transition: all 0.28s cubic-bezier(0.22,1,0.36,1);
}
.tool-card:not(.soon):hover .tool-card-cta { transform: translateX(3px); box-shadow: 0 10px 26px rgba(201,168,76,0.5); }
.tool-card-cta.disabled {
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.45);
  border: 1px solid rgba(255,255,255,0.12); box-shadow: none; cursor: default;
}

/* Bouton retour */
.tool-back {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--border-2); cursor: pointer;
  color: var(--ink); padding: 10px 18px; border-radius: 11px;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  margin-bottom: 20px; transition: all 0.22s;
}
.tool-back:hover { background: var(--ink); color: #fff; transform: translateX(-3px); }


/* Section analyse Learny du simulateur */
#dashboardPage .ct-learny-section { margin-top: 4px; }


/* ══════════════════════════════════════════════════════════
   SECTION FONDATEUR
   ══════════════════════════════════════════════════════════ */
.founder { padding: 100px 0; background: var(--cream); }
.founder-grid {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px;
  align-items: center; max-width: 1080px; margin: 0 auto;
}
/* Colonne photo */
.founder-photo-col { display: flex; flex-direction: column; align-items: center; }
.founder-photo-wrap { position: relative; width: 100%; max-width: 360px; }
.founder-photo-orb {
  position: absolute; inset: -18px; border-radius: 32px;
  background: radial-gradient(ellipse at 30% 20%, rgba(76,175,118,0.22), transparent 60%),
              radial-gradient(ellipse at 80% 90%, rgba(201,168,76,0.16), transparent 55%);
  filter: blur(22px); z-index: 0;
}
.founder-photo {
  position: relative; z-index: 1; aspect-ratio: 4 / 5;
  border-radius: 26px; overflow: hidden;
  background: linear-gradient(155deg, #1a201c 0%, #11140f 100%);
  border: 1px solid var(--border);
  box-shadow: 0 30px 60px rgba(0,0,0,0.18);
  display: flex; align-items: center; justify-content: center;
}
.founder-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.founder-photo-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  color: rgba(255,255,255,0.3);
}
.founder-photo-placeholder span {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
}
.founder-badge-float {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(20,20,18,0.85); backdrop-filter: blur(8px);
  border: 1px solid rgba(201,168,76,0.4); color: var(--gold);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 8px 16px; border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
/* Colonne contenu */
.founder-title { margin-bottom: 20px; }
.founder-lead {
  font-size: 16px; color: var(--ink); line-height: 1.65; margin-bottom: 16px; font-weight: 500;
}
.founder-text {
  font-size: 14px; color: var(--ink-3); line-height: 1.7; margin-bottom: 14px;
}
.founder-text strong { color: var(--ink-2); font-weight: 600; }
.founder-creds {
  display: grid; grid-template-columns: 1fr; gap: 12px; margin: 26px 0;
}
.founder-cred {
  display: flex; gap: 12px; align-items: flex-start;
  background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 15px 16px;
  transition: all 0.28s;
}
.founder-cred:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.06); border-color: var(--green); }
.founder-cred-ic {
  font-size: 22px; flex-shrink: 0; width: 38px; height: 38px;
  background: var(--cream); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.founder-cred-txt { font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.founder-cred-txt strong { display: block; color: var(--ink); font-size: 13px; margin-bottom: 3px; font-weight: 700; }
.founder-quote {
  position: relative;
  background: linear-gradient(150deg, #161614 0%, #222220 100%);
  border-radius: 18px; padding: 24px 28px;
  font-family: var(--serif); font-size: 16px; font-style: italic;
  color: #fff; line-height: 1.6;
  border-left: 3px solid var(--gold);
}
@media (max-width: 880px) {
  .founder { padding: 72px 0; }
  .founder-grid { grid-template-columns: 1fr; gap: 36px; }
  .founder-photo-col { order: 1; }
  .founder-content { order: 2; }
  .founder-photo-wrap { max-width: 300px; }
  .founder-creds { grid-template-columns: 1fr; }
}


/* Signature manuscrite du fondateur */
.founder-signature {
  font-family: 'Kaushan Script', cursive;
  font-size: 36px; color: var(--ink);
  margin-top: 20px; line-height: 1;
  text-align: center;
  transform: rotate(-3deg);
}


/* ══════════════════════════════════════════════════════════
   LEARNY MASCOTTE INTERACTIVE (pupilles + parallax 3D)
   ══════════════════════════════════════════════════════════ */
.mf-character { --look-x: 0; --look-y: 0; --eye-x: 0; --eye-y: 0; --focus: 0; --speed: 0; }
.robot-stage {
  position: relative; width: 100%; max-width: 360px; margin: 0 auto;
  aspect-ratio: 892 / 1051;
  display: grid; place-items: center;
  perspective: 1100px; transform-style: preserve-3d; cursor: default;
}
.robot-aura {
  position: absolute; width: 82%; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle, rgba(76,175,118, calc(0.07 + var(--focus) * 0.10)), transparent 63%),
    radial-gradient(circle, rgba(255,255,255,0.45), transparent 55%);
  filter: blur(6px);
  transform: translate3d(calc(var(--look-x) * -10px), calc(var(--look-y) * -7px), -55px) scale(calc(1 + var(--focus) * 0.04));
  opacity: 0.9; pointer-events: none;
}
.focus-ring {
  position: absolute; width: 76%; aspect-ratio: 1; border-radius: 45%;
  border: 1px solid rgba(76,175,118, 0.18);
  transform: translate3d(calc(var(--look-x) * -8px), calc(var(--look-y) * -5px), -28px) scale(calc(0.94 + var(--focus) * 0.05));
  opacity: calc(0.18 + var(--focus) * 0.24); filter: blur(0.2px); pointer-events: none;
}
.robot-rig {
  position: relative; width: 100%; max-width: 360px; aspect-ratio: 892 / 1051;
  transform-style: preserve-3d;
  transform:
    perspective(1200px)
    rotateX(calc(var(--look-y) * -4.6deg))
    rotateY(calc(var(--look-x) * 6.2deg))
    rotateZ(calc(var(--look-x) * -0.9deg))
    translate3d(calc(var(--look-x) * 7px), calc(var(--look-y) * 5px), 0)
    scale(calc(1 + var(--focus) * 0.012));
  transition: filter 320ms ease;
  filter: saturate(calc(1 + var(--focus) * 0.08)) brightness(calc(1 + var(--focus) * 0.028));
  will-change: transform, filter;
  animation: mascotFloat 6.8s ease-in-out infinite;
}
@keyframes mascotFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.robot-image {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  user-select: none; -webkit-user-drag: none; pointer-events: none;
  transform: translate3d(calc(var(--look-x) * -2.5px), calc(var(--look-y) * -2px), 16px);
  will-change: transform;
  filter: drop-shadow(0 28px 42px rgba(84, 60, 31, 0.10));
}
.robot-face-polish {
  position: absolute; inset: 10.8% 30.4% 28.0% 13.0%; border-radius: 12%; pointer-events: none;
  transform: translate3d(calc(var(--look-x) * 3px), calc(var(--look-y) * 2px), 32px);
  background:
    radial-gradient(circle at calc(54% + var(--look-x) * 3%) calc(31% + var(--look-y) * 3%), rgba(255,255,255,0.18), transparent 24%),
    linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.10) 44%, transparent 60%);
  opacity: calc(0.26 + var(--focus) * 0.14); mix-blend-mode: screen; will-change: transform, opacity;
}
.eyes-layer {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: translate3d(calc(var(--look-x) * 3.8px), calc(var(--look-y) * 2.4px), 52px);
  pointer-events: none; will-change: transform;
}
.robot-eye {
  position: absolute; transform: translate(-50%, -50%);
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.06)) drop-shadow(0 0 10px rgba(255,255,255,0.22));
  will-change: transform;
}
/* Positions des yeux (calibrées sur l'image Learny) */
.robot-eye-left  { left: 19.35%; top: 36.55%; width: 8.14%; height: 9.78%; }
.robot-eye-right { left: 41.20%; top: 36.32%; width: 8.69%; height: 10.20%; }
.robot-eye-inner {
  position: relative; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle at 36% 27%, #ffffff 0 28%, #f7f7f7 57%, #e9e8e2 100%);
  overflow: hidden;
  transition: transform 150ms cubic-bezier(.2,.8,.2,1), box-shadow 240ms ease;
  box-shadow: inset 0 -4px 8px rgba(0,0,0,0.05), inset 0 4px 8px rgba(255,255,255,0.72);
}
.pupil {
  position: absolute; left: 50%; top: 50%; width: 58%; height: 62%; border-radius: 50%;
  background:
    radial-gradient(circle at 37% 31%, rgba(255,255,255,0.13) 0 7%, transparent 8%),
    radial-gradient(circle at 56% 62%, #111 0%, #000 72%);
  transform:
    translate(-50%, -50%)
    translate3d(calc(var(--eye-x) * 1%), calc(var(--eye-y) * 0.86%), 0)
    scale(calc(1 + var(--speed) * 0.055));
  transition: width 180ms ease, height 180ms ease; will-change: transform;
}
.eye-shine {
  position: absolute; inset: 12% 16% auto auto; width: 18%; height: 18%; border-radius: 999px;
  background: rgba(255,255,255,0.65); filter: blur(0.2px);
  transform: translate3d(calc(var(--look-x) * -5px), calc(var(--look-y) * -4px), 0);
  opacity: calc(0.32 + var(--focus) * 0.22);
}
.robot-shadow {
  position: absolute; left: 50%; bottom: 4%; width: 45%; height: 7.6%; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(67, 45, 25, 0.22) 0%, rgba(67,45,25,0.12) 40%, transparent 72%);
  filter: blur(12px);
  transform: translateX(-50%) translate3d(calc(var(--look-x) * -4px), calc(var(--look-y) * 1px), -80px) scale(calc(1 + var(--focus) * 0.10 - var(--look-y) * 0.035));
  transform-origin: center; opacity: calc(0.62 + var(--focus) * 0.16);
  animation: shadowBreath 6.8s ease-in-out infinite; pointer-events: none; will-change: transform, opacity;
}
@keyframes shadowBreath { 0%, 100% { scale: 1; opacity: 0.62; } 50% { scale: 0.94; opacity: 0.50; } }
.premium-shine {
  position: absolute; inset: 4% 10% 12% 11%; pointer-events: none; overflow: hidden;
  border-radius: 28%; transform: translate3d(0, 0, 72px);
  opacity: calc(0.16 + var(--focus) * 0.20); mix-blend-mode: screen;
}
.premium-shine::after {
  content: ""; position: absolute; top: -20%; left: -55%; width: 32%; height: 140%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.50), transparent);
  filter: blur(10px); animation: sweep 8.2s cubic-bezier(.16, 1, .3, 1) infinite; animation-delay: 1.2s;
}
@keyframes sweep { 0%, 43% { translate: 0 0; opacity: 0; } 49% { opacity: 1; } 66% { translate: 440% 0; opacity: 0; } 100% { translate: 440% 0; opacity: 0; } }
/* États */
.robot-stage.is-blinking .robot-eye-inner { transform: scaleY(0.08); }
.robot-stage.is-surprised .robot-eye-inner { transform: scale(1.035); }
.robot-stage.is-surprised .pupil { width: 54%; height: 59%; }
@media (prefers-reduced-motion: reduce) {
  .robot-rig, .robot-image, .eyes-layer, .robot-shadow, .robot-aura, .focus-ring { transform: none !important; animation: none !important; }
}


/* ===== Couche de modernisation + motion (V1 : mz-style) ===== */
  .mz-num { font-style: normal; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

  /* ── Intro de marque ── */
  #mz-intro {
    position: fixed; inset: 0; z-index: 100000; display: flex;
    align-items: center; justify-content: center; flex-direction: column;
    background: linear-gradient(150deg, #0e120f 0%, #17211b 48%, #141512 100%);
    transition: opacity 0.9s cubic-bezier(0.65,0,0.35,1), visibility 0.9s;
  }
  #mz-intro::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 70% 55% at 50% 42%, rgba(76,175,118,0.16) 0%, transparent 62%);
  }
  #mz-intro.hide { opacity: 0; visibility: hidden; }
  .mz-intro-mark {
    position: relative; font-family: var(--serif); font-size: clamp(34px, 6vw, 62px);
    color: #fff; letter-spacing: -0.02em; opacity: 0;
    transform: translateY(18px) scale(0.98); filter: blur(8px);
    animation: mzIntroIn 1s cubic-bezier(0.22,1,0.36,1) 0.15s forwards;
  }
  .mz-intro-invest {
    position: relative; margin-top: 12px; font-family: var(--mono);
    font-size: 14px; letter-spacing: 0.46em; text-transform: uppercase;
    color: #4CAF76; opacity: 0; padding-left: 0.46em;
    animation: mzIntroIn 0.9s ease 0.4s forwards;
  }
  .mz-intro-sub {
    position: relative; margin-top: 22px; font-family: var(--sans);
    font-size: 14.5px; letter-spacing: 0.02em; font-style: italic;
    color: rgba(255,255,255,0.60); opacity: 0; text-align: center;
    max-width: 520px; padding: 0 24px; line-height: 1.5;
    animation: mzIntroIn 0.9s ease 0.55s forwards;
  }
  .mz-intro-line {
    position: relative; margin-top: 26px; width: 0; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, #4CAF76, transparent);
    animation: mzIntroLine 1.1s cubic-bezier(0.22,1,0.36,1) 0.5s forwards;
  }
  @keyframes mzIntroIn { to { opacity: 1; transform: none; filter: none; } }
  @keyframes mzIntroLine { to { width: 220px; } }

  /* ── Reveal enrichi (s'appuie sur l'observer existant) ── */
  .anim-item {
    transform: translateY(44px) scale(0.985);
    filter: blur(7px);
    transition: opacity 0.85s cubic-bezier(0.22,1,0.36,1),
                transform 0.85s cubic-bezier(0.22,1,0.36,1),
                filter 0.7s ease;
    will-change: opacity, transform, filter;
  }
  .anim-item.visible { transform: translateY(0) scale(1); filter: blur(0); }
  .anim-item:nth-child(7)  { transition-delay: 0.60s; }
  .anim-item:nth-child(8)  { transition-delay: 0.70s; }
  .anim-item:nth-child(9)  { transition-delay: 0.80s; }
  .anim-item:nth-child(10) { transition-delay: 0.90s; }
  .anim-item:nth-child(11) { transition-delay: 1.00s; }
  .anim-item:nth-child(12) { transition-delay: 1.10s; }

  /* ── Boutons : reflet + base magnétique ── */
  .btn-primary { position: relative; overflow: hidden; will-change: transform; }
  .btn-primary > * { position: relative; z-index: 1; }
  .btn-primary::after {
    content: ''; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.38), transparent);
    transform: skewX(-18deg); z-index: 0; pointer-events: none;
  }
  .btn-primary:hover::after { animation: mzSheen 0.85s ease; }
  @keyframes mzSheen { from { left: -130%; } to { left: 160%; } }

  /* ── Cartes : éclat de survol modernisé ── */
  .feature-card, .guide-card, .price-card, .test-card, .learning-card {
    will-change: transform; transition: transform 0.5s cubic-bezier(0.22,1,0.36,1),
      box-shadow 0.5s cubic-bezier(0.22,1,0.36,1), border-color 0.4s ease;
  }

  /* ── Spot lumineux suivant le curseur dans le héros ── */
  #mz-hero-spot {
    position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
    background: radial-gradient(420px circle at var(--mx,50%) var(--my,40%), rgba(76,175,118,0.14), transparent 60%);
    transition: opacity 0.6s ease; mix-blend-mode: screen;
  }
  .hero:hover #mz-hero-spot { opacity: 1; }

  @media (prefers-reduced-motion: reduce) {
    #mz-intro { display: none; }
    .anim-item { filter: none; transform: none; transition: opacity 0.4s ease; }
  }

/* ===== Guides eclairs / DuoLearny v3 (V1 : qg3-style) ===== */
  /* ── DuoLearny : héros v2 avec Learny interactif ── */
  .dl3-inner {
    display: grid; grid-template-columns: 1.28fr 0.72fr; gap: 30px;
    align-items: center; text-align: left;
  }
  .dl3-left { position: relative; z-index: 2; }
  .dl3-inner .fp-presents.left { justify-content: flex-start; }
  .dl3-inner .fp-sub.left { margin: 0 0 22px; max-width: 560px; }
  .dl3-inner .dl2-bars { justify-content: flex-start; margin: 0; max-width: 640px; }
  .dl3-visual {
    position: relative; display: flex; align-items: center; justify-content: center;
    animation: fpUp 0.75s 0.35s backwards;
  }
  .dl3-halo {
    position: absolute; width: 340px; height: 340px; border-radius: 50%;
    background: radial-gradient(circle, rgba(251,248,242,0.13) 0%, rgba(76,175,118,0.20) 42%, transparent 70%);
    filter: blur(8px); animation: qg3Pulse 4.2s ease-in-out infinite;
  }
  .dl3-visual .robot-image {
    filter: drop-shadow(0 22px 36px rgba(0,0,0,0.5)) drop-shadow(0 0 26px rgba(251,248,242,0.10));
  }
  .dl3-visual .robot-stage { max-width: 245px; cursor: pointer; }
  @media (max-width: 900px) {
    .dl3-inner { grid-template-columns: 1fr; text-align: center; gap: 8px; }
    .dl3-inner .fp-presents.left { justify-content: center; }
    .dl3-inner .fp-sub.left { margin: 0 auto 20px; }
    .dl3-inner .dl2-bars { justify-content: center; margin: 0 auto; }
    .dl3-visual { order: -1; margin-bottom: 10px; }
    .dl3-visual .robot-stage { max-width: 165px; }
    .dl3-halo { width: 210px; height: 210px; }
  }

  /* ── Carte Guides éclairs (page d'accueil) ── */
  .qg-land { border-color: rgba(201,168,76,0.35); }
  .qg-land::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, transparent, #C9A84C 30%, #C9A84C 70%, transparent);
  }
  .qg-land-glow {
    position: absolute; top: -80px; right: -70px;
    width: 240px; height: 240px; border-radius: 50%;
    background: radial-gradient(circle, rgba(201,168,76,0.14), transparent 65%);
    pointer-events: none;
  }
  .qg-land-head {
    display: flex; align-items: center; gap: 20px; margin-bottom: 18px;
  }
  .qg-land-logo {
    width: 92px; height: 92px; border-radius: 24px; flex-shrink: 0;
    box-shadow: 0 12px 30px rgba(201,168,76,0.32), 0 0 0 1px rgba(201,168,76,0.2);
    animation: qgLandFloat 5.5s ease-in-out infinite;
    transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s ease;
  }
  .qg-land:hover .qg-land-logo {
    transform: scale(1.07) rotate(1.5deg);
    box-shadow: 0 16px 38px rgba(201,168,76,0.45), 0 0 0 1px rgba(201,168,76,0.3);
  }
  @keyframes qgLandFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }
  .qg-land-eyebrow {
    font-family: var(--mono); font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 6px;
  }
  .qg-land-head .learning-title { margin-bottom: 0; }
  .qg-land:hover { border-color: rgba(201,168,76,0.6); }
  @media (max-width: 700px) {
    .qg-land-head { gap: 14px; }
    .qg-land-logo { width: 72px; height: 72px; border-radius: 18px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .qg-land-logo { animation: none; }
  }

  /* ── Guides Éclairs : héros v2 avec logo ── */
  .qg3 .qg3-inner {
    display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 34px;
    align-items: center; text-align: left;
  }
  .qg3 .qg2-cats, .qg3 .quick-guides-stats { justify-content: flex-start; }
  .qg3 .fp-sub.left { margin: 0 0 20px; }
  .qg3-left { position: relative; z-index: 2; }
  .qg3-visual {
    position: relative; display: flex; align-items: center; justify-content: center;
    animation: fpUp 0.75s 0.35s backwards;
  }
  .qg3-halo {
    position: absolute; width: 330px; height: 330px; border-radius: 50%;
    background: radial-gradient(circle, rgba(201,168,76,0.30) 0%, rgba(76,175,118,0.12) 45%, transparent 70%);
    filter: blur(6px); animation: qg3Pulse 4.2s ease-in-out infinite;
  }
  .qg3-logo {
    position: relative; width: min(248px, 100%); border-radius: 30px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08), 0 0 46px rgba(201,168,76,0.28);
    animation: qg3Float 5.5s ease-in-out infinite;
    transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s ease;
  }
  .qg3-logo:hover {
    transform: scale(1.05) rotate(0.8deg);
    box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.12), 0 0 64px rgba(201,168,76,0.45);
  }
  @keyframes qg3Float {
    0%, 100% { transform: translateY(0) rotate(-1.3deg); }
    50% { transform: translateY(-12px) rotate(1.3deg); }
  }
  @keyframes qg3Pulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
  }
  .qg3-cta {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
    padding: 13px 24px; border-radius: 14px; text-decoration: none;
    font-weight: 800; font-size: 13.5px; color: #141414; letter-spacing: 0.01em;
    background: linear-gradient(135deg, #E8C766 0%, #C9A84C 100%);
    box-shadow: 0 10px 26px rgba(201,168,76,0.35);
    transition: transform 0.25s, box-shadow 0.25s;
    animation: fpUp 0.65s 0.6s backwards;
  }
  .qg3-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(201,168,76,0.5); }
  @media (max-width: 900px) {
    .qg3 .qg3-inner { grid-template-columns: 1fr; text-align: center; gap: 10px; }
    .qg3 .qg2-cats, .qg3 .quick-guides-stats { justify-content: center; }
    .qg3 .fp-presents.left { justify-content: center; }
    .qg3 .fp-sub.left { margin: 0 auto 20px; }
    .qg3-visual { order: -1; margin-bottom: 12px; }
    .qg3-logo { width: 158px; border-radius: 22px; }
    .qg3-halo { width: 215px; height: 215px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .qg3-logo, .qg3-halo { animation: none; }
  }

.clickable-card { cursor: pointer; }


.price-btn-prestige {
  background: linear-gradient(135deg, var(--gold) 0%, #b8932e 100%);
  color: #16130a;
  font-weight: 700;
}
.price-btn-prestige:hover {
  box-shadow: 0 4px 16px rgba(201,168,76,0.4);
  filter: brightness(1.05);
}


/* ══════════════════════════════════════════════════════════
   APERÇU DU PARCOURS DUOLEARNY (fenêtre modale)
   ══════════════════════════════════════════════════════════ */
.dlp-overlay {
  position: fixed; inset: 0;
  background: rgba(17,17,17,0.80);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  z-index: 100200; display: none; align-items: center; justify-content: center; padding: 20px;
}
.dlp-overlay.active { display: flex; animation: fadeIn 0.28s ease; }
.dlp-modal {
  background: #faf3e8; border-radius: 24px; width: 100%; max-width: 820px;
  max-height: 92vh; overflow-y: auto; position: relative;
  box-shadow: 0 36px 80px rgba(0,0,0,0.36);
  animation: scaleIn 0.34s cubic-bezier(0.22,1,0.36,1);
  font-family: var(--sans);
}
.dlp-close {
  position: absolute; top: 16px; right: 16px; z-index: 5;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,0.22); border: 1px solid rgba(255,255,255,0.35);
  color: #fff; display: flex; align-items: center; justify-content: center;
  transition: all 0.22s;
}
.dlp-close:hover { background: rgba(255,255,255,0.4); transform: rotate(90deg); }
/* Héros */
.dlp-hero {
  background: linear-gradient(135deg, #1e1e1b 0%, #0d0d0c 100%);
  padding: 30px 32px 26px; color: #fff; position: relative; overflow: hidden;
  border-bottom: 1px solid rgba(201,168,76,0.28);
}
.dlp-hero::before {
  content: ''; position: absolute; top: -60px; right: -40px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,0.22), transparent 66%);
}
.dlp-hero-row { display: flex; align-items: center; gap: 18px; position: relative; z-index: 1; }
.dlp-hero-mascot {
  width: 76px; height: 76px; flex-shrink: 0; object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.25));
}
.dlp-eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.75);
}
.dlp-title { font-family: var(--serif); font-size: 27px; line-height: 1.15; margin: 4px 0 5px; }
.dlp-title em { font-style: italic; color: var(--gold); }
.dlp-sub { font-size: 13.5px; color: rgba(255,255,255,0.82); line-height: 1.5; }
/* Barre de stats */
.dlp-stats {
  display: flex; gap: 10px; padding: 14px 32px;
  background: #fdf9f0; border-bottom: 1px solid #ece1d2; flex-wrap: wrap;
}
.dlp-stat {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 2px solid #ece1d2; border-radius: 999px;
  padding: 7px 15px; font-size: 14px; font-weight: 800; color: #161616;
}
.dlp-stat .dlp-ic { font-size: 16px; }
.dlp-stat.flamme { color: #bf7c1f; }
.dlp-stat.xp { color: #a5831c; }
.dlp-stat.coeurs { color: #b23a2e; }
/* Corps */
.dlp-body { padding: 26px 32px 30px; }
.dlp-section-t {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(42,35,25,0.5); margin-bottom: 12px;
}
/* Bannière d'unité */
.dlp-banner {
  background: linear-gradient(135deg, #2f7a4d, #235c3a); color: #fff;
  border-radius: 16px; padding: 15px 19px; display: flex;
  align-items: center; justify-content: space-between; gap: 12px;
  box-shadow: 0 4px 0 rgba(0,0,0,0.16);
}
.dlp-banner .dlp-bu-sur { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.85; }
.dlp-banner h4 { font-size: 18px; font-weight: 900; line-height: 1.2; margin: 2px 0; }
.dlp-banner .dlp-bu-desc { font-size: 12.5px; font-weight: 600; opacity: 0.9; }
.dlp-bu-prog {
  font-size: 12px; font-weight: 900; background: rgba(255,255,255,0.22);
  border: 2px solid rgba(255,255,255,0.35); padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}
/* Chemin de nœuds */
.dlp-path { display: flex; flex-direction: column; align-items: center; padding: 16px 0 6px; }
.dlp-row { display: flex; justify-content: center; width: 100%; padding: 7px 0; }
.dlp-node {
  --cn: #2f7a4d; --cn-d: #235c3a;
  position: relative; width: 62px; height: 57px; border-radius: 50% / 46%;
  background: var(--cn); box-shadow: 0 7px 0 var(--cn-d);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.dlp-node svg { width: 27px; height: 27px; }
.dlp-node.done { --cn: #c9a227; --cn-d: #a5831c; }
.dlp-node.lock { --cn: #d9cfbf; --cn-d: #c3b7a3; color: #a89b83; }
.dlp-node.boss { width: 74px; height: 68px; }
.dlp-node.boss svg { width: 34px; height: 34px; }
.dlp-node.chest { background: transparent; box-shadow: none; width: 70px; height: 64px; }
.dlp-node.chest svg { width: 58px; height: 52px; filter: drop-shadow(0 5px 0 rgba(120,90,30,0.25)); }
.dlp-node.active { cursor: pointer; }
.dlp-node.active::before {
  content: ''; position: absolute; inset: -9px; border-radius: inherit;
  border: 4px solid var(--cn); opacity: 0.5;
  animation: dlpPulse 1.8s ease-out infinite; pointer-events: none;
}
@keyframes dlpPulse { 0% { transform: scale(0.95); opacity: 0.55; } 70% { transform: scale(1.22); opacity: 0; } 100% { opacity: 0; } }
.dlp-tag {
  position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
  background: #fff; border: 2px solid #ece1d2; border-radius: 999px;
  padding: 4px 12px; font-size: 11.5px; font-weight: 900; color: #2f7a4d; white-space: nowrap;
  box-shadow: 0 3px 0 #ece1d2;
}
/* Grille des unités */
.dlp-units { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dlp-unit {
  display: flex; align-items: center; gap: 11px; background: #fff;
  border: 1px solid #ece1d2; border-radius: 13px; padding: 11px 13px;
}
.dlp-unit-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.dlp-unit-txt { font-size: 13px; font-weight: 700; color: #161616; line-height: 1.35; }
.dlp-unit-txt span { display: block; font-size: 11.5px; font-weight: 600; color: rgba(42,35,25,0.55); margin-top: 1px; }
/* Points forts */
.dlp-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.dlp-feat {
  background: #fff; border: 1px solid #ece1d2; border-radius: 14px;
  padding: 14px 10px; text-align: center;
}
.dlp-feat-n { font-family: var(--serif); font-size: 22px; color: #161616; line-height: 1; }
.dlp-feat-l { font-size: 11px; font-weight: 700; color: #161616; margin-top: 4px; }
/* Bandeau Learny */
.dlp-learny {
  display: flex; align-items: center; gap: 13px; background: #161614;
  border-radius: 16px; padding: 15px 18px; border-left: 3px solid var(--gold);
}
.dlp-learny img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.dlp-learny-t { font-size: 13px; color: rgba(255,255,255,0.75); line-height: 1.55; }
.dlp-learny-t strong { color: #fff; }
/* Pied */
.dlp-foot { padding: 0 32px 30px; }
.dlp-cta {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px;
  background: linear-gradient(135deg, var(--gold) 0%, #b8932e 100%);
  color: #16130a; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 15.5px; font-weight: 700;
  padding: 16px 26px; border-radius: 14px;
  box-shadow: 0 8px 22px rgba(201,168,76,0.35);
  transition: all 0.28s cubic-bezier(0.22,1,0.36,1);
}
.dlp-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(201,168,76,0.5); }
.dlp-note { text-align: center; font-size: 11.5px; color: rgba(42,35,25,0.5); margin-top: 11px; font-style: italic; }
@media (max-width: 700px) {
  .dlp-hero, .dlp-stats, .dlp-body, .dlp-foot { padding-left: 20px; padding-right: 20px; }
  .dlp-units { grid-template-columns: 1fr; }
  .dlp-feats { grid-template-columns: repeat(2, 1fr); }
  .dlp-title { font-size: 22px; }
  .dlp-hero-mascot { width: 58px; height: 58px; }
}


/* ══════════════════════════════════════════════════════════
   PARCOURS DUOLEARNY VERROUILLÉ (tableau de bord)
   ══════════════════════════════════════════════════════════ */
#dashboardPage .dlk-wrap { cursor: pointer; margin-top: 20px; }
/* Bandeau de verrouillage */
#dashboardPage .dlk-lockbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(135deg, #1e1e1b 0%, #0d0d0c 100%);
  border: 1px solid rgba(201,168,76,0.32); border-radius: 18px;
  padding: 18px 22px; margin-bottom: 26px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.18);
}
#dashboardPage .dlk-lockbar-left { display: flex; align-items: center; gap: 14px; }
#dashboardPage .dlk-lock-ic {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  background: rgba(201,168,76,0.16); border: 1px solid rgba(201,168,76,0.4);
  color: var(--gold); display: flex; align-items: center; justify-content: center;
}
#dashboardPage .dlk-lockbar-t { font-family: var(--serif); font-size: 18px; color: #fff; }
#dashboardPage .dlk-lockbar-s { font-size: 12.5px; color: rgba(255,255,255,0.5); margin-top: 2px; }
/* Boutons dorés */
#dashboardPage .dlk-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: linear-gradient(135deg, var(--gold) 0%, #b8932e 100%);
  color: #16130a; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 14px; font-weight: 700;
  padding: 13px 22px; border-radius: 12px;
  box-shadow: 0 8px 22px rgba(201,168,76,0.32);
  transition: all 0.28s cubic-bezier(0.22,1,0.36,1); white-space: nowrap;
}
#dashboardPage .dlk-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(201,168,76,0.5); }
#dashboardPage .dlk-cta.big { width: 100%; font-size: 15.5px; padding: 17px 26px; border-radius: 14px; margin-top: 24px; }
/* Titres de section */
#dashboardPage .dlk-section-t {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-3); margin: 24px 0 12px;
}
/* Aperçu (voilé) */
#dashboardPage .dlk-preview {
  position: relative; background: #faf3e8; border: 1px solid #ece1d2;
  border-radius: 18px; padding: 20px; overflow: hidden;
}
#dashboardPage .dlk-veil {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(250,243,232,0.10) 0%, rgba(250,243,232,0.72) 100%);
  backdrop-filter: blur(1.2px); -webkit-backdrop-filter: blur(1.2px);
}
#dashboardPage .dlk-veil span {
  background: #161614; color: var(--gold); border: 1px solid rgba(201,168,76,0.45);
  font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
  padding: 10px 20px; border-radius: 999px; box-shadow: 0 10px 26px rgba(0,0,0,0.22);
}
/* Bannière d'unité (grisée) */
#dashboardPage .dlk-banner {
  background: linear-gradient(135deg, #7c8b80, #5d6a61); color: #fff;
  border-radius: 15px; padding: 14px 18px; display: flex;
  align-items: center; justify-content: space-between; gap: 12px;
  box-shadow: 0 4px 0 rgba(0,0,0,0.14);
}
#dashboardPage .dlk-bu-sur { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.85; }
#dashboardPage .dlk-banner h4 { font-size: 17px; font-weight: 900; line-height: 1.2; margin: 2px 0; color: #fff; }
#dashboardPage .dlk-bu-desc { font-size: 12.5px; font-weight: 600; opacity: 0.9; }
#dashboardPage .dlk-bu-prog {
  font-size: 12px; font-weight: 900; background: rgba(255,255,255,0.2);
  border: 2px solid rgba(255,255,255,0.32); padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}
/* Chemin verrouillé */
#dashboardPage .dlk-path { display: flex; flex-direction: column; align-items: center; padding: 14px 0 4px; }
#dashboardPage .dlk-row { display: flex; justify-content: center; width: 100%; padding: 6px 0; }
#dashboardPage .dlk-node {
  --cn: #d9cfbf; --cn-d: #c3b7a3;
  width: 58px; height: 53px; border-radius: 50% / 46%;
  background: var(--cn); box-shadow: 0 6px 0 var(--cn-d);
  display: flex; align-items: center; justify-content: center; color: #a89b83;
}
#dashboardPage .dlk-node svg { width: 25px; height: 25px; }
#dashboardPage .dlk-node.boss { width: 70px; height: 64px; }
#dashboardPage .dlk-node.boss svg { width: 31px; height: 31px; }
#dashboardPage .dlk-node.chest { background: transparent; box-shadow: none; width: 66px; height: 60px; }
#dashboardPage .dlk-node.chest svg { width: 54px; height: 48px; filter: grayscale(1) opacity(0.6); }
/* Unités */
#dashboardPage .dlk-units { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
#dashboardPage .dlk-unit {
  display: flex; align-items: center; gap: 12px; background: #fff;
  border: 1px solid var(--border); border-radius: 14px; padding: 13px 15px; opacity: 0.85;
}
#dashboardPage .dlk-unit-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; filter: grayscale(0.35); }
#dashboardPage .dlk-unit-txt { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.35; flex: 1; }
#dashboardPage .dlk-unit-txt span { display: block; font-size: 12px; font-weight: 600; color: var(--ink-3); margin-top: 1px; }
#dashboardPage .dlk-unit-lock { color: var(--ink-3); flex-shrink: 0; opacity: 0.65; }
/* Ce qui t'attend */
#dashboardPage .dlk-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
#dashboardPage .dlk-feat {
  background: #fff; border: 1px solid var(--border); border-radius: 15px;
  padding: 16px 10px; text-align: center;
}
#dashboardPage .dlk-feat-n { font-family: var(--serif); font-size: 24px; color: var(--ink); line-height: 1; }
#dashboardPage .dlk-feat-l { font-size: 11.5px; font-weight: 700; color: var(--ink); margin-top: 5px; }
/* Bandeau Learny */
#dashboardPage .dlk-learny {
  display: flex; align-items: center; gap: 14px; background: #161614;
  border-radius: 16px; padding: 16px 20px; border-left: 3px solid var(--gold); margin-top: 24px;
}
#dashboardPage .dlk-learny img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
#dashboardPage .dlk-learny-t { font-size: 13px; color: rgba(255,255,255,0.75); line-height: 1.55; }
#dashboardPage .dlk-learny-t strong { color: #fff; }
@media (max-width: 700px) {
  #dashboardPage .dlk-units { grid-template-columns: 1fr; }
  #dashboardPage .dlk-feats { grid-template-columns: repeat(2, 1fr); }
  #dashboardPage .dlk-lockbar { flex-direction: column; align-items: flex-start; }
  #dashboardPage .dlk-cta { width: 100%; }
}