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

    :root {
      --purple-50:  #f0eeff;
      --purple-100: #dbd8fd;
      --purple-200: #beb8fb;
      --purple-400: #8b7ff7;
      --purple-500: #6c5ef5;
      --purple-600: #4c3fbe;
      --purple-700: #3a2f99;
      --purple-900: #1a1542;
      --teal-50:    #e1f5ee;
      --teal-400:   #1D9E75;
      --teal-600:   #0F6E56;
      --coral-50:   #faece7;
      --coral-400:  #D85A30;
      --coral-600:  #993C1D;
      --amber-50:   #faeeda;
      --amber-400:  #BA7517;
      --amber-600:  #854F0B;
      --green-50:   #eaf3de;
      --green-400:  #639922;
      --green-600:  #3B6D11;
      --gray-50:    #f8f7ff;
      --gray-100:   #ededf5;
      --gray-200:   #d8d8e8;
      --gray-400:   #8e8eaa;
      --gray-600:   #5a5a78;
      --text-primary:   #1a1542;
      --text-secondary: #5a5a78;
      --text-muted:     #9898b8;
      --bg-page:  #f0eeff;
      --bg-card:  #ffffff;
      --radius-sm: 10px;
      --radius-md: 16px;
      --radius-lg: 24px;
      --shadow-sm: 0 2px 12px rgba(76,63,190,.07);
      --shadow-md: 0 6px 28px rgba(76,63,190,.12);
      --shadow-lg: 0 16px 48px rgba(76,63,190,.18);
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--bg-page);
      color: var(--text-primary);
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* ── VIEWS ── */
    .view { display: none; }
    .view.active { display: block; }

    /* ══════════════════════════════
       HOME – página inicial
    ══════════════════════════════ */
    .hero {
      background: var(--purple-600);
      position: relative;
      overflow: hidden;
      padding: 3rem 2rem 5rem;
      text-align: center;
    }
    .hero::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 70% 60% at 20% 30%, rgba(139,127,247,.35) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 80% 70%, rgba(76,63,190,.5) 0%, transparent 70%);
    }
    .hero-dots {
      position: absolute; inset: 0;
      background-image: radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1px);
      background-size: 28px 28px;
    }
    .hero-wave { position: absolute; bottom: -2px; left: 0; right: 0; }
    .hero-content { position: relative; z-index: 1; }

    .greeting-badge {
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(255,255,255,.15);
      border: 1px solid rgba(255,255,255,.25);
      backdrop-filter: blur(8px);
      color: #fff;
      font-family: 'Sora', sans-serif;
      font-size: 12px; font-weight: 500;
      padding: 6px 16px; border-radius: 100px;
      margin-bottom: 20px; letter-spacing: .3px;
    }
    .greeting-badge .dot {
      width: 7px; height: 7px;
      background: #a8ffcc; border-radius: 50%;
      animation: pulse-dot 2s ease-in-out infinite;
    }
    @keyframes pulse-dot {
      0%,100%{opacity:1;transform:scale(1)}
      50%{opacity:.5;transform:scale(.7)}
    }

    .hero h1 {
      font-family: 'Sora', sans-serif;
      font-size: clamp(20px,5vw,34px);
      font-weight: 700; color: #fff; line-height: 1.25;
      margin-bottom: 10px;
    }
    .hero p { font-size: 15px; color: rgba(255,255,255,.75); margin-bottom: 28px; font-weight: 300; }

    .progress-wrap { max-width: 320px; margin: 0 auto; }
    .progress-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
    .progress-header span { font-size: 12px; color: rgba(255,255,255,.75); font-family: 'Sora', sans-serif; }
    .progress-header strong { color: #fff; font-weight: 600; }
    .progress-track { background: rgba(255,255,255,.2); border-radius: 100px; height: 8px; overflow: hidden; }
    .progress-fill { height: 100%; background: linear-gradient(90deg,#a8ffcc,#6cffc0); border-radius: 100px; width: 0%; transition: width 1.2s cubic-bezier(.22,1,.36,1); }

    /* Stats */
    .stats-row {
      display: grid; grid-template-columns: repeat(3,1fr);
      gap: 12px; padding: 0 1.5rem;
      margin-top: -48px; position: relative; z-index: 10;
    }
    .stat-card {
      background: var(--bg-card); border-radius: var(--radius-md);
      padding: 14px 10px; text-align: center;
      box-shadow: var(--shadow-md);
      opacity: 0; transform: translateY(20px);
      transition: opacity .5s, transform .5s, box-shadow .3s;
    }
    .stat-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
    .stat-icon { font-size: 20px; margin-bottom: 4px; }
    .stat-num { font-family:'Sora',sans-serif; font-size: 20px; font-weight: 700; color: var(--purple-600); line-height: 1; margin-bottom: 3px; }
    .stat-label { font-size: 10px; color: var(--text-muted); }

    /* Section title */
    .section-header { display: flex; align-items: center; gap: 8px; padding: 2rem 1.5rem 1rem; }
    .section-header h2 { font-family:'Sora',sans-serif; font-size: 15px; font-weight: 600; color: var(--text-primary); }
    .section-header .pill { background: var(--purple-100); color: var(--purple-600); font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 100px; font-family:'Sora',sans-serif; }

    /* Module cards */
    .modules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0 1.5rem; }
    .module-card {
      background: var(--bg-card); border-radius: var(--radius-md);
      padding: 1.1rem; box-shadow: var(--shadow-sm);
      border: 1.5px solid transparent; cursor: pointer;
      transition: all .3s cubic-bezier(.34,1.56,.64,1);
      opacity: 0; transform: translateY(24px);
      position: relative; overflow: hidden;
    }
    .module-card::before {
      content:''; position: absolute; top:0;left:0;right:0;
      height:3px; border-radius:3px 3px 0 0; opacity:0; transition:opacity .3s;
    }
    .module-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 30px rgba(74, 59, 154, 0.14);
    }
    .module-card:hover::before {
      opacity: 0;
    }
    .module-card.is-active { border-color: var(--purple-400); box-shadow: 0 0 0 3px rgba(139,127,247,.15), var(--shadow-md); }
    .module-card.is-active::before { opacity:1; background: linear-gradient(90deg,var(--purple-400),var(--purple-200)); }

    .card-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:12px; }
    .module-icon { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
    .icon-purple{background:var(--purple-50)} .icon-teal{background:var(--teal-50)} .icon-coral{background:var(--coral-50)} .icon-amber{background:var(--amber-50)}

    .status-badge { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:600; padding:3px 8px; border-radius:100px; font-family:'Sora',sans-serif; white-space:nowrap; }
    .badge-done{background:var(--green-50);color:var(--green-600)}
    .badge-active{background:var(--purple-50);color:var(--purple-600)}
    .badge-locked{background:var(--gray-100);color:var(--gray-600)}

    .module-num { font-size:10px; color:var(--text-muted); font-family:'Sora',sans-serif; font-weight:500; margin-bottom:2px; }
    .module-name { font-family:'Sora',sans-serif; font-size:13px; font-weight:600; color:var(--text-primary); margin-bottom:4px; line-height:1.3; }
    .module-desc { font-size:11px; color:var(--text-secondary); line-height:1.45; margin-bottom:12px; font-weight:300; }

    .module-progress-track { background:var(--gray-100); border-radius:100px; height:4px; margin-bottom:6px; overflow:hidden; }
    .module-progress-fill { height:100%; border-radius:100px; transition:width 1.4s cubic-bezier(.22,1,.36,1); width:0%; }
    .fill-done{background:linear-gradient(90deg,var(--green-400),#7ecf2a)}
    .fill-active{background:linear-gradient(90deg,var(--purple-500),var(--purple-400))}
    .fill-locked{background:var(--gray-200)}

    .module-meta { display:flex; justify-content:space-between; align-items:center; }
    .meta-text { font-size:10px; color:var(--text-muted); }

    .btn-start { font-size:11px; font-family:'Sora',sans-serif; font-weight:600; padding:5px 12px; border-radius:8px; border:none; cursor:pointer; transition:all .2s; }
    .btn-purple { background:var(--purple-600); color:#fff; }
    .btn-purple:hover { background:var(--purple-700); transform:scale(1.04); }
    .btn-ghost { background:var(--gray-100); color:var(--text-muted); cursor:not-allowed; }

    /* Quiz banner */
    .quiz-banner {
      margin: 1.5rem 1.5rem 0;
      background: var(--purple-900); border-radius: var(--radius-md);
      padding: 1.2rem 1.3rem; display: flex; align-items: center; gap: 14px;
      position: relative; overflow: hidden;
      opacity:0; transform:translateY(20px); transition: opacity .5s, transform .5s;
    }
    .quiz-banner::before { content:''; position:absolute; right:-30px;top:-30px; width:100px;height:100px; border-radius:50%; background:rgba(139,127,247,.2); }
    .quiz-banner::after  { content:''; position:absolute; right:20px;bottom:-40px; width:80px;height:80px; border-radius:50%; background:rgba(139,127,247,.12); }
    .quiz-emoji { font-size:28px; flex-shrink:0; position:relative;z-index:1; }
    .quiz-text  { flex:1; position:relative;z-index:1; }
    .quiz-text h3 { font-family:'Sora',sans-serif; font-size:13px; font-weight:600; color:#fff; margin-bottom:3px; }
    .quiz-text p  { font-size:11px; color:rgba(255,255,255,.65); font-weight:300; }
    .btn-quiz { background:var(--purple-400); color:#fff; border:none; border-radius:10px; padding:8px 14px; font-family:'Sora',sans-serif; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; position:relative;z-index:1; transition:all .2s; flex-shrink:0; }
    .btn-quiz:hover { background:var(--purple-500); transform:scale(1.05); }

    /* Certificate */
    .cert-banner {
      margin: 1rem 1.5rem;
      background: var(--bg-card); border-radius: var(--radius-md);
      padding: 1rem 1.25rem; border: 1.5px dashed rgba(139,127,247,.35);
      display: flex; align-items: center; gap: 14px;
      opacity:0; transform:translateY(20px); transition: opacity .5s, transform .5s;
    }
    .cert-icon { width:44px;height:44px; border-radius:12px; background:var(--purple-50); display:flex;align-items:center;justify-content:center; font-size:22px; flex-shrink:0; }
    .cert-text h4 { font-family:'Sora',sans-serif; font-size:13px; font-weight:600; color:var(--text-primary); margin-bottom:3px; }
    .cert-text p  { font-size:11px; color:var(--text-secondary); font-weight:300; }
    .cert-progress { margin-left:auto; text-align:right; flex-shrink:0; }
    .cert-pct { font-family:'Sora',sans-serif; font-size:18px; font-weight:700; color:var(--purple-600); }
    .cert-pct-label { font-size:10px; color:var(--text-muted); }

    /* ══════════════════════════════
       MÓDULO – layout sidebar + content
    ══════════════════════════════ */
    .module-view-wrap {
      display: flex; gap: 15px;
      min-height: 100vh; padding: 4mm;
    }

    /* SIDEBAR */
    .sidebar {
      background: var(--bg-card); border-radius: 20px; padding: 24px;
      width: 400px; flex: 0 0 400px;
      box-shadow: var(--shadow-sm);
      position: sticky; top: 4mm;
      height: calc(100vh - 8mm); overflow-y: auto;
      display: flex; flex-direction: column; gap: 0;
    }
    .sidebar-back {
      background: var(--purple-50); border: none; padding: 8px 16px; border-radius: 20px;
      cursor: pointer; font-family:'Sora',sans-serif; font-size: 12px; font-weight: 600;
      color: var(--purple-600); width: fit-content; margin-bottom: 16px; transition: all .2s;
    }
    .sidebar-back:hover { background: var(--purple-100); }
    .sidebar h2 { font-family:'Sora',sans-serif; font-size:14px; font-weight:600; color:var(--text-primary); margin-bottom:16px; }
    .sidebar h3 { font-family:'Sora',sans-serif; font-size:12px; font-weight:500; color:var(--text-muted); margin-bottom:10px; }

    .lesson-list { display:flex; flex-direction:column; gap:6px; flex:1; }
    .lesson {
      background: var(--gray-50); border-radius: 12px;
      padding: 12px 14px; display: flex; align-items: center; gap: 10px;
      font-size: 12px; cursor: pointer;
      transition: background .2s, transform .2s;
      border: 1.5px solid transparent;
    }
    .lesson:hover { background: var(--purple-50); transform: translateX(2px); }
    .lesson.active { background: #fff; border-color: var(--purple-400); }
    .lesson .icon { width:30px; height:30px; border-radius:8px; background:var(--gray-100); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px; }
    .lesson span { color: var(--text-secondary); line-height:1.35; }
    .lesson.active span { color: var(--text-primary); font-weight:500; }

    .progress-section { margin-top: auto; background:var(--purple-50); padding:14px; border-radius:14px; }
    .progress-section p { font-size:12px; color:var(--text-secondary); margin-bottom:8px; }
    .progress-bar { background:var(--purple-100); height:8px; border-radius:5px; overflow:hidden; }
    .progress-fill-mod { background:var(--purple-600); height:100%; border-radius:5px; transition:width .8s; }

    /* MAIN CONTENT */
    .main-content {
      flex:1; background:var(--bg-card); border-radius:20px;
      padding: 24px; box-shadow: var(--shadow-sm); overflow-y:auto;
    }
    .content-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
    .content-header h1 { font-family:'Sora',sans-serif; font-size:18px; font-weight:600; color:var(--text-primary); }
    .close-btn { background:var(--gray-100); border:none; width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:14px; display:flex;align-items:center;justify-content:center; transition:background .2s; }
    .close-btn:hover { background:var(--gray-200); }

    .video-header h2 { font-family:'Sora',sans-serif; font-size:15px; font-weight:600; color:var(--text-primary); margin-bottom:16px; }

    .video-placeholder {
      width:min(55%, 720px); max-width:720px;
      aspect-ratio:16/9; background:#f8f7ff;
      border-radius:14px; overflow:hidden; margin:0 auto 16px;
    }
    .video-placeholder iframe { width:100%; height:100%; border:none; }

    .image-placeholder {
      width:min(50%, 620px); border-radius:14px; overflow:hidden; margin:0 auto 16px;
      display:flex; align-items:center; justify-content:center; background:#f8f7ff;
    }
    .image-placeholder img { width:100%; height:auto; border-radius:14px; display:block; }

    /* Nota btn */
    .video-actions { display:flex; gap:10px; margin-bottom:20px; }
    .pixel-btn {
      background: var(--purple-100); border: 2px solid var(--purple-600);
      color: var(--purple-700); font-family:'Courier New',monospace; font-weight:700;
      font-size:13px; padding:8px 16px; border-radius:12px; cursor:pointer;
      box-shadow: 3px 3px 0 var(--purple-600); transition:all .1s;
    }
    .pixel-btn:active { box-shadow:0 0 0; transform:translate(2px,2px); }

    /* Info cards */
    .info-grid { display:flex; flex-direction:column; gap:16px; }
    .info-card {
      background:var(--gray-50); border-radius:14px;
      padding:18px; font-size:14px; line-height:1.6;
    }
    .info-card h3 { font-family:'Sora',sans-serif; font-size:14px; font-weight:600; color:var(--text-primary); margin-bottom:8px; margin-top:16px; }
    .info-card h3:first-child { margin-top:0; }
    .info-card h4 { font-family:'Sora',sans-serif; font-size:13px; font-weight:600; color:var(--purple-600); margin:10px 0 6px; }
    .info-card h5 { font-family:'Sora',sans-serif; font-size:12px; font-weight:600; color:var(--text-secondary); margin:8px 0 4px; }
    .info-card p  { color:var(--text-secondary); text-indent:14px; margin-bottom:6px; }
    .info-card ul, .info-card ol { color:var(--text-secondary); padding-left:22px; margin-bottom:8px; }
    .info-card li { margin-bottom:4px; }
    .info-card img { max-width:100%; border-radius:8px; margin:10px 0; display:block; }
    .white-card { background:#fff; border:1px solid var(--gray-200); }
    .purple-card { background:var(--purple-50); }

    /* Footer nav */
    .footer-navigation { display:flex; justify-content:space-between; align-items:center; margin-top:28px; padding-top:20px; border-top:1px solid var(--gray-100); }
    .nav-buttons { display:flex; gap:10px; }
    .nav-btn { padding:10px 18px; border-radius:20px; border:1px solid var(--gray-200); background:#fff; cursor:pointer; font-family:'Sora',sans-serif; font-size:12px; transition:all .2s; }
    .nav-btn.primary { background:var(--purple-600); color:#fff; border-color:var(--purple-600); }
    .nav-btn:hover { box-shadow:var(--shadow-sm); }

    /* ══════════════════════════════
       QUIZ
    ══════════════════════════════ */
    .quiz-container { padding: 8px 0; }
    .atividade-list { list-style:none; padding:0; }
    .atividade-list li { padding:14px; border-radius:12px; margin-bottom:12px; background:var(--gray-50); border:1px solid var(--gray-200); transition:background .2s; }
    .atividade-list li.correta { background:#e4f8e7; border-color:#6dbf74; }
    .atividade-list li.errada  { background:#fde1e4; border-color:#d95765; }
    .atividade-list label { display:block; font-weight:500; margin-bottom:8px; font-size:14px; color:var(--text-primary); }
    .atividade-input { width:100%; max-width:360px; padding:8px 12px; border-radius:10px; border:1.5px solid var(--gray-200); font-size:14px; background:#fff; transition:border .2s; }
    .atividade-input:focus { outline:none; border-color:var(--purple-400); }
    select.atividade-input { cursor:pointer; }
    .resultado-atividade { margin-top:20px; padding:18px; border-radius:14px; background:var(--purple-50); border:1px solid var(--purple-200); }
    .resultado-atividade p { font-size:15px; color:var(--text-primary); margin-bottom:6px; }

    /* ══════════════════════════════
       MODAL NOTA
    ══════════════════════════════ */
    .nota-modal {
      position:fixed; inset:0;
      background:rgba(26,21,66,.55);
      backdrop-filter:blur(6px);
      z-index:200; display:none;
      justify-content:center; align-items:center; padding:1.5rem;
    }
    .nota-modal.open { display:flex; }
    .nota-content {
      background:#fff; border-radius:20px; padding:24px;
      width:100%; max-width:380px;
      box-shadow:var(--shadow-lg);
      animation: popIn .3s cubic-bezier(.34,1.56,.64,1);
    }
    @keyframes popIn { from{transform:scale(.9) translateY(20px)} to{transform:scale(1) translateY(0)} }
    .nota-content h4 { font-family:'Sora',sans-serif; font-size:16px; font-weight:600; margin-bottom:12px; color:var(--text-primary); }
    .nota-content textarea { width:100%; padding:12px; border:1.5px solid var(--gray-200); border-radius:10px; resize:vertical; font-family:'DM Sans',sans-serif; font-size:14px; }
    .nota-content textarea:focus { outline:none; border-color:var(--purple-400); }
    .nota-actions { margin-top:12px; display:flex; gap:8px; }
    .nota-actions button { flex:1; }

    /* ══════════════════════════════
       CONCLUSÃO
    ══════════════════════════════ */
    .conclusao-wrap { text-align:center; padding:3rem 2rem; }
    .conclusao-wrap h1 { font-family:'Sora',sans-serif; font-size:28px; font-weight:700; color:var(--purple-600); margin-bottom:8px; }
    .conclusao-wrap h2 { font-family:'Sora',sans-serif; font-size:16px; font-weight:400; color:var(--text-secondary); margin-bottom:28px; }
    .conclusao-wrap img { max-width:320px; width:100%; border-radius:20px; margin:0 auto 28px; display:block; }
    .conclusao-card { background:var(--bg-card); border-radius:var(--radius-md); padding:24px; max-width:480px; margin:0 auto; box-shadow:var(--shadow-md); }
    .conclusao-card p { font-size:15px; color:var(--text-secondary); margin-bottom:10px; }
    .conclusao-btns { display:flex; gap:10px; justify-content:center; margin-top:20px; flex-wrap:wrap; }

    /* ══════════════════════════════
       TOAST
    ══════════════════════════════ */
    .toast {
      position:fixed; bottom:24px; left:50%;
      transform:translateX(-50%) translateY(80px);
      background:var(--purple-900); color:#fff;
      padding:12px 20px; border-radius:100px;
      font-family:'Sora',sans-serif; font-size:13px; font-weight:500;
      white-space:nowrap; z-index:300; box-shadow:var(--shadow-lg);
      transition:transform .4s cubic-bezier(.34,1.56,.64,1);
      pointer-events:none;
    }
    .toast.show { transform:translateX(-50%) translateY(0); }

    /* ── helpers ── */
    .visible { opacity:1 !important; transform:translateY(0) !important; }
    @keyframes fadeInUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }

    /* Theme toggle button */
    .theme-toggle {
      position: absolute; top: 14px; right: 14px;
      width:40px; height:40px; border-radius:10px; border: none;
      display:inline-flex; align-items:center; justify-content:center; gap:6px;
      background: rgba(255,255,255,.95); color: var(--text-primary); cursor:pointer;
      box-shadow: 0 6px 18px rgba(26,21,66,.08); font-size:16px; transition: all .18s;
      z-index: 999; pointer-events: auto;
    }
    .theme-toggle:hover { transform: translateY(-2px); }
    .theme-toggle:active { transform: translateY(0); }

    body.dark .theme-toggle { background: rgba(255,255,255,.04); color: var(--text-primary); border: 1px solid rgba(255,255,255,.06); box-shadow: none; }

    .theme-toggle:focus { outline: 2px solid rgba(122,99,246,.28); outline-offset: 2px; }

    /* ─────────────────────────────────────
       Dark theme overrides (aplique `class="dark"` no <body>)
       Paleta pensada para ser suave e harmoniosa
    ───────────────────────────────────── */
    body.dark {
      --purple-50:  #24183b;
      --purple-100: #2e2250;
      --purple-200: #45356f;
      --purple-400: #7a63f6;
      --purple-500: #6c5ef5;
      --purple-600: #4b3aa8;
      --purple-700: #33284a;
      --purple-900: #07050f;

      --teal-50:    #062f2a;
      --teal-400:   #1F7F64;
      --teal-600:   #0d5c46;
      --coral-50:   #2f1e18;
      --coral-400:  #b75a3e;
      --coral-600:  #8a3925;
      --amber-50:   #2f2415;
      --amber-400:  #9a6a2a;
      --amber-600:  #6b4310;
      --green-50:   #17261a;
      --green-400:  #5a8d34;
      --green-600:  #3b6d11;

      --gray-50:    #0f1620;
      --gray-100:   #111421;
      --gray-200:   #1b2433;
      --gray-400:   #37455b;

      --text-primary:   #e6eef8;
      --text-secondary: #bfcbe0;
      --text-muted:     #98a0bf;

      --bg-page:  #07090d;
      --bg-card:  #0c1117;

      --shadow-sm:  0 8px 24px rgba(2,6,23,.6);
      --shadow-md:  0 14px 40px rgba(2,6,23,.65);
      --shadow-lg:  0 28px 80px rgba(2,6,23,.7);
    }

    /* small visual refinements for dark mode */
    body.dark .greeting-badge { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); color: var(--text-primary); }
    body.dark .hero { background: linear-gradient(180deg,var(--purple-600), rgba(10,8,20,0.7)); }
    body.dark .hero::before { background: radial-gradient(ellipse 70% 60% at 20% 30%, rgba(122,99,246,.14) 0%, transparent 70%), radial-gradient(ellipse 50% 40% at 80% 70%, rgba(75,58,168,.18) 0%, transparent 70%); }
    body.dark .hero-wave path { fill: #0b0c10; }
    body.dark .stat-card, body.dark .module-card, body.dark .quiz-banner, body.dark .cert-banner, body.dark .sidebar, body.dark .main-content { background: var(--bg-card); }
    body.dark .lesson { background: var(--gray-100); border-color: transparent; }
    body.dark .lesson.active { background: #0f1a28; border-color: rgba(122,99,246,.22); }
    body.dark .module-icon { color: var(--text-primary); }
    body.dark .pixel-btn { background: var(--purple-100); color: var(--text-primary); border-color: rgba(122,99,246,.18); box-shadow: 3px 3px 0 rgba(122,99,246,.12); }
    body.dark .quiz-text h3, body.dark .quiz-text p, body.dark .quiz-banner .btn-quiz { color: var(--text-primary); }
    body.dark img { filter: contrast(.98) saturate(.9) brightness(.95); }

    /* Ajustes para caixas de conteúdo em modo escuro */
    body.dark .info-card { background: var(--bg-card); border: 1px solid rgba(255,255,255,.03); color: var(--text-secondary); }
    body.dark .white-card { background: var(--bg-card); border: 1px solid rgba(255,255,255,.03); }
    body.dark .purple-card { background: rgba(122,99,246,.04); }
    body.dark .video-placeholder, body.dark .image-placeholder { background: var(--gray-100); }
    body.dark .atividade-list li { background: var(--bg-card); border-color: rgba(255,255,255,.03); color: var(--text-primary); }
    body.dark .atividade-list li.correta { background: rgba(90,191,116,.08); border-color: rgba(90,191,116,.18); }
    body.dark .atividade-list li.errada  { background: rgba(217,87,101,.06); border-color: rgba(217,87,101,.14); }