/* ═══════════════════════════════════════════════════
   CSIRT.GOV — Sensibilização / Awareness Module
   Cards, lesson player, quiz, registration gate
═══════════════════════════════════════════════════ */

    /* ══════════════════════════════════════════════
       AWARENESS / SENSIBILIZAÇÃO
    ══════════════════════════════════════════════ */
    .aware-hero {
      background: linear-gradient(135deg,#0f2c59,#1a4a8a,#2563eb);
      color:#fff; padding:56px 24px 48px; position:relative; overflow:hidden;
    }
    .aware-hero::after {
      content:''; position:absolute; right:-60px; top:-60px;
      width:320px; height:320px; border-radius:50%;
      background:rgba(255,255,255,0.04); pointer-events:none;
    }
    .aware-hero-inner { max-width:1200px; margin:0 auto; position:relative; }
    .aware-hero h1 { font-size:clamp(1.8rem,4vw,2.6rem); font-weight:800; margin-bottom:12px; }
    .aware-hero p { color:rgba(255,255,255,.8); max-width:600px; line-height:1.7; }

    .aware-content { max-width:1200px; margin:0 auto; padding:40px 24px 64px; }

    /* Progress header */
    .aware-progress-bar {
      background:var(--bg-white); border:1px solid var(--border); border-radius:var(--radius-lg);
      padding:20px 28px; margin-bottom:32px; display:flex; align-items:center; gap:20px; flex-wrap:wrap;
    }
    .aware-progress-bar .xp-badge {
      background:linear-gradient(135deg,#f59e0b,#d97706); color:#fff; font-weight:800;
      padding:6px 14px; border-radius:100px; font-size:0.82rem; white-space:nowrap;
    }
    .aware-progress-track { flex:1; background:var(--bg-main); border-radius:100px; height:10px; min-width:120px; }
    .aware-progress-fill { height:100%; border-radius:100px; background:linear-gradient(90deg,#2563eb,#7c3aed); transition:width .5s; }
    .aware-progress-bar .pts { font-size:0.85rem; font-weight:700; color:var(--text-muted); white-space:nowrap; }

    /* ── Cyber Video Cards ─────────────────────────── */
    .cv-section-head{
      margin:28px 0 20px;
    }
    .cv-section-tag{
      display:inline-flex;align-items:center;gap:7px;
      font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
      color:#007A33;margin-bottom:8px;
    }
    .cv-section-tag::before{content:'';width:24px;height:3px;border-radius:2px;background:#007A33}
    .cv-section-title{
      font-size:1.15rem;font-weight:800;color:var(--text-primary);letter-spacing:-.02em;margin:0 0 4px;
    }
    .cv-section-sub{font-size:.78rem;color:var(--text-muted);margin:0;line-height:1.5}
    .cyber-videos-wrap {
      display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px;
      margin:0 0 10px;
    }
    .cv-card {
      background:var(--bg-white); border-radius:14px; overflow:hidden;
      border:1.5px solid var(--border); box-shadow:0 2px 8px rgba(0,0,0,.06);
      cursor:pointer; transition:transform .25s,box-shadow .25s,border-color .25s;
      position:relative;
    }
    .cv-card:hover {
      transform:translateY(-6px);
      box-shadow:0 12px 32px rgba(0,0,0,.12);
      border-color:rgba(0,122,51,.35);
    }
    .cv-scene {
      height:170px; position:relative; overflow:hidden;
      background:linear-gradient(150deg,#0b1929 0%,#070f1c 100%);
    }
    .cv-scene::after {
      content:''; position:absolute; inset:0; z-index:30; pointer-events:none;
      background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.05) 3px,rgba(0,0,0,.05) 4px);
    }
    .cv-grid {
      position:absolute; inset:0;
      background-image:linear-gradient(rgba(56,139,253,.06) 1px,transparent 1px),
                        linear-gradient(90deg,rgba(56,139,253,.06) 1px,transparent 1px);
      background-size:26px 26px;
    }
    .cv-play{
      position:absolute;inset:0;z-index:31;display:flex;align-items:center;justify-content:center;
      background:rgba(0,0,0,0);transition:background .25s;
    }
    .cv-card:hover .cv-play{background:rgba(0,0,0,.35)}
    .cv-play-btn{
      width:44px;height:44px;border-radius:50%;
      background:rgba(255,255,255,.92);box-shadow:0 4px 14px rgba(0,0,0,.25);
      display:flex;align-items:center;justify-content:center;
      opacity:0;transform:scale(.7);transition:opacity .25s,transform .25s;
    }
    .cv-card:hover .cv-play-btn{opacity:1;transform:scale(1)}
    .cv-play-btn svg{width:16px;height:16px;fill:#007A33;margin-left:2px}
    .cv-dur{
      position:absolute;top:10px;right:10px;z-index:32;
      font-size:.58rem;font-weight:700;letter-spacing:.04em;color:#fff;
      background:rgba(0,0,0,.55);backdrop-filter:blur(4px);
      padding:3px 8px;border-radius:5px;
    }
    .cv-num{
      position:absolute;top:10px;left:10px;z-index:32;
      width:24px;height:24px;border-radius:6px;
      background:rgba(0,122,51,.85);color:#fff;
      font-size:.6rem;font-weight:800;
      display:flex;align-items:center;justify-content:center;
    }
    .cv-bar { height:3px; background:var(--border); }
    .cv-fill { height:100%; background:linear-gradient(90deg,#007A33,#FCD116); animation:cvFill 8s linear infinite; }
    @keyframes cvFill{from{width:0}to{width:100%}}
    .cv-info { padding:14px 16px 16px; }
    .cv-title-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
    .cv-ico { font-size:1.05rem; }
    .cv-name { font-size:.82rem; font-weight:700; color:var(--text-primary); letter-spacing:-.01em; }
    .cv-tip { font-size:.72rem; color:var(--text-muted); line-height:1.55; margin:0 0 10px; }
    .cv-cta{
      display:inline-flex;align-items:center;gap:5px;
      font-size:.65rem;font-weight:700;color:#007A33;
      padding:5px 12px;border-radius:6px;
      background:rgba(0,122,51,.08);border:1px solid rgba(0,122,51,.15);
      transition:background .2s;
    }
    .cv-card:hover .cv-cta{background:rgba(0,122,51,.15)}
    @media(max-width:600px){
      .cyber-videos-wrap{grid-template-columns:repeat(2,1fr);gap:10px}
      .cv-scene{height:130px}
      .cv-tip{display:none}
    }

    /* ── Scene 1: Phishing ── */
    .ph-email {
      position:absolute; font-size:2.6rem; top:55px;
      animation:phEmail 8s ease-in-out infinite;
    }
    @keyframes phEmail{0%{left:110%;opacity:0}12%{left:50%;transform:translateX(-50%);opacity:1}
      55%{left:50%;transform:translateX(-50%);opacity:1}65%{left:50%;transform:translateX(-50%) scale(.7);opacity:0}100%{left:110%;opacity:0}}
    .ph-hook {
      position:absolute; font-size:1.8rem; left:50%; transform:translateX(30%);
      animation:phHook 8s ease-in-out infinite;
    }
    @keyframes phHook{0%,15%{top:-30px;opacity:0}25%{top:20px;opacity:1}48%{top:65px;opacity:1}
      58%{top:30px;opacity:1}68%{top:-30px;opacity:0}100%{top:-30px;opacity:0}}
    .ph-cred {
      position:absolute; left:50%; transform:translateX(-50%);
      font-family:monospace; font-size:.75rem; color:#f87171;
      background:rgba(239,68,68,.15); border:1px solid rgba(239,68,68,.35);
      padding:2px 9px; border-radius:5px; white-space:nowrap;
      animation:phCred 8s ease-in-out infinite;
    }
    @keyframes phCred{0%,30%{top:120px;opacity:0}42%{top:90px;opacity:1}54%{top:90px;opacity:1}63%{top:20px;opacity:0}100%{top:120px;opacity:0}}
    .ph-warn {
      position:absolute; bottom:14px; left:0; right:0; text-align:center;
      font-size:.65rem; font-weight:800; letter-spacing:.1em; color:#ef4444;
      animation:phWarn 8s ease-in-out infinite;
    }
    @keyframes phWarn{0%,62%{opacity:0}70%{opacity:1}76%{opacity:.2}82%{opacity:1}92%{opacity:1}100%{opacity:0}}
    .ph-dots {
      position:absolute; top:14px; right:12px;
      font-size:.55rem; color:rgba(56,139,253,.5); font-family:monospace; line-height:1.8;
      animation:phDots 8s linear infinite;
    }
    @keyframes phDots{0%,100%{opacity:.3}50%{opacity:.8}}

    /* ── Scene 2: Passwords ── */
    .pw-field {
      position:absolute; top:40px; left:50%; transform:translateX(-50%);
      width:170px; background:rgba(255,255,255,.06); border:1.5px solid rgba(99,179,237,.3);
      border-radius:8px; padding:8px 12px; display:flex; align-items:center; gap:6px;
    }
    .pw-label { font-size:.6rem; color:#93c5fd; font-weight:700; white-space:nowrap; }
    .pw-dots { display:flex; gap:4px; }
    .pw-dot {
      width:7px; height:7px; border-radius:50%; background:#3b82f6;
      animation:pwDot 8s ease-in-out infinite;
    }
    .pw-dot:nth-child(1){animation-delay:1s}
    .pw-dot:nth-child(2){animation-delay:1.3s}
    .pw-dot:nth-child(3){animation-delay:1.6s}
    .pw-dot:nth-child(4){animation-delay:1.9s}
    .pw-dot:nth-child(5){animation-delay:2.2s}
    .pw-dot:nth-child(6){animation-delay:2.5s}
    @keyframes pwDot{0%,12%{opacity:0;transform:scale(0)}20%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
    .pw-meter-wrap {
      position:absolute; top:105px; left:50%; transform:translateX(-50%);
      width:170px;
    }
    .pw-meter-label { font-size:.55rem; color:rgba(255,255,255,.4); margin-bottom:4px; }
    .pw-meter-track { height:6px; background:rgba(255,255,255,.1); border-radius:4px; overflow:hidden; }
    .pw-meter-fill {
      height:100%; border-radius:4px;
      background:linear-gradient(90deg,#ef4444 0%,#f59e0b 40%,#10b981 100%);
      animation:pwMeter 8s ease-in-out infinite;
    }
    @keyframes pwMeter{0%,25%{width:0%}55%{width:100%}100%{width:100%}}
    .pw-lock {
      position:absolute; font-size:2.4rem; bottom:28px; left:50%; transform:translateX(-50%);
      animation:pwLock 8s ease-in-out infinite;
    }
    @keyframes pwLock{0%,50%{opacity:0;transform:translateX(-50%) scale(.4)}60%{opacity:1;transform:translateX(-50%) scale(1.2)}
      70%{transform:translateX(-50%) scale(1)}100%{opacity:1;transform:translateX(-50%) scale(1)}}
    .pw-glow {
      position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
      width:50px; height:50px; border-radius:50%;
      background:radial-gradient(circle,rgba(16,185,129,.35),transparent 70%);
      animation:pwGlow 8s ease-in-out infinite;
    }
    @keyframes pwGlow{0%,58%{opacity:0}70%{opacity:1}100%{opacity:.7}}

    /* ── Scene 3: Ransomware ── */
    .rw-files { position:absolute; top:28px; left:50%; transform:translateX(-50%); display:flex; gap:18px; }
    .rw-file {
      font-size:2rem; position:relative;
      animation:rwFile 8s ease-in-out infinite;
    }
    .rw-file:nth-child(2){animation-delay:.15s}
    .rw-file:nth-child(3){animation-delay:.3s}
    @keyframes rwFile{0%{opacity:0;transform:translateY(10px)}10%{opacity:1;transform:translateY(0)}100%{opacity:1}}
    .rw-overlay {
      position:absolute; inset:0; border-radius:50%;
      background:radial-gradient(circle at 50% 50%,rgba(220,38,38,.55) 0%,rgba(220,38,38,.0) 70%);
      animation:rwOverlay 8s ease-in-out infinite;
    }
    @keyframes rwOverlay{0%,25%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(3.5)}100%{opacity:.7;transform:scale(4)}}
    .rw-lock {
      position:absolute; font-size:1rem; top:-2px; right:-6px;
      animation:rwLock 8s ease-in-out infinite;
    }
    .rw-file:nth-child(1) .rw-lock{animation-delay:2.5s}
    .rw-file:nth-child(2) .rw-lock{animation-delay:2.8s}
    .rw-file:nth-child(3) .rw-lock{animation-delay:3.1s}
    @keyframes rwLock{0%,30%{opacity:0;transform:scale(0)}42%{opacity:1;transform:scale(1.3)}50%{transform:scale(1)}100%{opacity:1;transform:scale(1)}}
    .rw-ransom {
      position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
      font-family:monospace; font-size:.72rem; color:#fbbf24; white-space:nowrap;
      background:rgba(0,0,0,.65); border:1px dashed rgba(251,191,36,.5);
      padding:4px 12px; border-radius:5px;
      animation:rwRansom 8s ease-in-out infinite;
    }
    @keyframes rwRansom{0%,55%{opacity:0;transform:translateX(-50%) translateY(10px)}
      65%{opacity:1;transform:translateX(-50%) translateY(0)}78%{opacity:1}86%{opacity:.3}92%{opacity:1}100%{opacity:1}}

    /* ── Scene 4: Internet Segura ── */
    .is-globe {
      position:absolute; font-size:3.2rem; top:28px; left:50%; transform:translateX(-50%);
      animation:isGlobe 8s ease-in-out infinite;
    }
    @keyframes isGlobe{0%,100%{filter:drop-shadow(0 0 0px transparent)}
      40%,60%{filter:drop-shadow(0 0 12px rgba(56,189,248,.6))}}
    .is-shield {
      position:absolute; font-size:2.2rem; top:-30px; left:50%; transform:translateX(-50%);
      animation:isShield 8s ease-in-out infinite;
    }
    @keyframes isShield{0%,30%{top:-30px;opacity:0}42%{top:100px;opacity:1}100%{top:100px;opacity:1}}
    .is-vpn {
      position:absolute; top:100px; left:50%; transform:translateX(-50%);
      font-size:.6rem; font-weight:800; letter-spacing:.1em; color:#10b981;
      background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.3);
      padding:3px 10px; border-radius:20px;
      animation:isVpn 8s ease-in-out infinite;
    }
    @keyframes isVpn{0%,40%{opacity:0;transform:translateX(-50%) scale(.7)}52%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:1}}
    .is-warn {
      position:absolute; font-size:1.5rem; top:30px; right:38px;
      animation:isWarn 8s ease-in-out infinite;
    }
    @keyframes isWarn{0%{opacity:0;transform:scale(0)}15%{opacity:1;transform:scale(1)}30%{opacity:1}42%{opacity:0;transform:scale(0)}100%{opacity:0}}
    .is-signal {
      position:absolute; top:145px; left:50%; transform:translateX(-50%);
      font-size:.6rem; color:#93c5fd; font-weight:700; letter-spacing:.08em;
      animation:isSignal 8s ease-in-out infinite;
    }
    @keyframes isSignal{0%,55%{opacity:0}65%{opacity:1}100%{opacity:1}}

    /* ── Scene 5: Incident Response ── */
    .ir-monitor {
      position:absolute; font-size:3rem; top:22px; left:50%; transform:translateX(-50%);
      animation:irMon 8s ease-in-out infinite;
    }
    @keyframes irMon{0%{opacity:0;transform:translateX(-50%) scale(.5)}10%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:1;transform:translateX(-50%) scale(1)}}
    .ir-alert {
      position:absolute; top:30px; left:50%; transform:translateX(-50%);
      width:14px; height:14px; border-radius:50%; background:#ef4444;
      animation:irAlert 8s ease-in-out infinite;
    }
    @keyframes irAlert{0%,12%{opacity:0;box-shadow:none}15%{opacity:1;box-shadow:0 0 0 0 rgba(239,68,68,.6)}
      20%{box-shadow:0 0 0 8px rgba(239,68,68,0)}25%{box-shadow:0 0 0 0 rgba(239,68,68,.6)}
      30%{box-shadow:0 0 0 8px rgba(239,68,68,0)}50%{opacity:1}60%{opacity:0}100%{opacity:0}}
    .ir-disconnect {
      position:absolute; top:85px; left:50%; transform:translateX(-50%);
      font-size:1.8rem;
      animation:irDisc 8s ease-in-out infinite;
    }
    @keyframes irDisc{0%,40%{opacity:0;transform:translateX(-50%) scale(.3)}50%{opacity:1;transform:translateX(-50%) scale(1.2)}58%{transform:translateX(-50%) scale(1)}80%{opacity:1}88%{opacity:0}100%{opacity:0}}
    .ir-contact {
      position:absolute; bottom:36px; left:50%; transform:translateX(-50%);
      font-size:.65rem; font-weight:800; color:#38bdf8; white-space:nowrap;
      animation:irContact 8s ease-in-out infinite;
    }
    @keyframes irContact{0%,65%{opacity:0;transform:translateX(-50%) translateY(6px)}
      75%{opacity:1;transform:translateX(-50%) translateY(0)}92%{opacity:1}100%{opacity:0}}
    .ir-ok {
      position:absolute; font-size:2.2rem; top:70px; left:50%; transform:translateX(-50%);
      animation:irOk 8s ease-in-out infinite;
    }
    @keyframes irOk{0%,80%{opacity:0;transform:translateX(-50%) scale(0)}88%{opacity:1;transform:translateX(-50%) scale(1.3)}94%{transform:translateX(-50%) scale(1)}100%{opacity:1;transform:translateX(-50%) scale(1)}}

    .aware-modules-heading {
      font-size:1.15rem; font-weight:800; color:var(--text-primary);
      margin:28px 0 16px; display:flex; align-items:center; gap:10px;
    }
    .aware-modules-heading::after { content:''; flex:1; height:2px; background:linear-gradient(90deg,var(--gov-green),transparent); }

    /* ── Lesson completion state on cards ─────────────────────── */
    .cv-card--done .cv-scene::after{
      content:'✓ Concluída';position:absolute;bottom:0;left:0;right:0;
      background:linear-gradient(0deg,rgba(0,122,51,.88) 0%,transparent 100%);
      color:#fff;font-size:.58rem;font-weight:800;letter-spacing:.12em;
      text-align:center;padding:20px 0 8px;text-transform:uppercase;z-index:30;
    }
    .cv-card--done .cv-num{background:rgba(0,122,51,.95);}
    .cv-card--done .cv-num::after{content:' ✓';}
    .cv-card--done .cv-cta{border-color:rgba(0,122,51,.3);background:rgba(0,122,51,.1);color:#007A33;}

    /* ── Lesson progress mini-tracker ────────────────────────── */
    .lesson-prog{
      display:flex;align-items:center;gap:12px;
      background:#f0fdf4;border:1.5px solid #bbf7d0;border-radius:12px;
      padding:12px 18px;margin-bottom:18px;
    }
    .lpt-pips{display:flex;gap:8px;}
    .lpt-pip{
      width:16px;height:16px;border-radius:50%;background:#e4e7ec;
      border:2px solid #e4e7ec;transition:background .35s,border-color .35s,transform .2s;
      cursor:pointer;display:flex;align-items:center;justify-content:center;
      font-size:8px;color:transparent;
    }
    .lpt-pip:hover{transform:scale(1.2);}
    .lpt-pip.done{background:#007A33;border-color:#007A33;color:#fff;}
    .lpt-label{flex:1;font-size:.8rem;font-weight:600;color:#15181d;}
    .lpt-count{font-size:.78rem;font-family:'Courier New',monospace;font-weight:700;
      color:#007A33;background:rgba(0,122,51,.1);padding:4px 12px;border-radius:6px;}

    /* ── Keyboard hint ───────────────────────────────────────── */
    .lp-kb-hint{
      font-size:.56rem;color:rgba(255,255,255,.25);text-align:center;
      padding:4px 20px 10px;letter-spacing:.05em;
    }
    .lp-kb-hint kbd{
      background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
      border-radius:3px;padding:1px 5px;font-family:'Courier New',monospace;font-size:.54rem;
    }

    /* ── Lesson Player (reference-style) ─────────────────────────── */
    .lesson-overlay{
      position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.88);
      backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;
      opacity:0;pointer-events:none;transition:opacity .4s;
    }
    .lesson-overlay.active{opacity:1;pointer-events:auto}
    .lesson-player{
      width:94vw;max-width:820px;background:#15181d;border-radius:18px;
      box-shadow:0 30px 80px rgba(0,0,0,.7);overflow:hidden;
    }
    .lp-head{
      display:flex;align-items:center;gap:10px;padding:12px 20px;
      background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.06);
    }
    .lp-head-ico{font-size:1.4rem}
    .lp-head-title{flex:1;font-size:.88rem;font-weight:700;color:#e2e8f0;letter-spacing:-.01em}
    .lp-head-time{font-size:.75rem;font-weight:600;color:#93c5fd;font-family:'Courier New',monospace}
    .lp-head-close{
      background:none;border:none;color:rgba(255,255,255,.4);font-size:1.15rem;cursor:pointer;
      padding:4px 8px;border-radius:6px;transition:.2s;
    }
    .lp-head-close:hover{color:#fff;background:rgba(255,255,255,.1)}
    /* Flag bar */
    .lp-flag{display:flex;height:4px;width:100%}
    .lp-flag span{flex:1}
    .lp-flag span:nth-child(1){background:#007A33}
    .lp-flag span:nth-child(2){background:#FCD116}
    .lp-flag span:nth-child(3){background:#15181d}
    .lp-flag span:nth-child(4){background:#D21034}
    /* Scene — light background like reference */
    .lp-scene{
      height:310px;position:relative;overflow:hidden;
      background:#ffffff;
    }
    .lp-scene-top{
      position:absolute;top:0;left:0;right:0;z-index:2;
      display:flex;align-items:center;justify-content:space-between;
      padding:14px 20px 0;
    }
    .lp-scene-kicker{
      display:flex;align-items:center;gap:8px;
    }
    .lp-scene-kicker-bar{width:28px;height:4px;border-radius:2px}
    .lp-scene-kicker-text{
      font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    }
    .lp-scene-step{
      font-size:.6rem;font-weight:700;letter-spacing:.06em;color:#15181d;
      background:#f7f8fa;border:1px solid #e4e7ec;padding:3px 10px;border-radius:5px;
    }
    .lp-scene-vis{
      position:absolute;inset:0;display:flex;flex-direction:column;
      align-items:center;justify-content:center;padding:38px 24px 12px;
      transition:opacity .45s,transform .45s;
    }
    .lp-scene-vis.out{opacity:0;transform:scale(.95)}
    /* Card component */
    .lp-card{
      background:#fff;border:1px solid #e4e7ec;border-radius:14px;
      box-shadow:0 2px 4px rgba(16,24,40,.04),0 12px 32px rgba(16,24,40,.08);
      padding:16px 20px;width:100%;max-width:420px;
      animation:lpSlide .5s cubic-bezier(.22,1,.36,1) both;
    }
    .lp-card-label{
      font-size:.55rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
      color:#7a828e;margin-bottom:8px;
    }
    .lp-card-field{
      display:flex;align-items:center;min-height:36px;padding:0 14px;
      background:#f7f8fa;border:1.5px solid #e4e7ec;border-radius:8px;
    }
    .lp-card-val{font-family:'Courier New',monospace;font-size:.9rem;font-weight:600;color:#15181d;flex:1}
    .lp-card-status{font-family:'Courier New',monospace;font-size:.6rem;font-weight:700;letter-spacing:.05em}
    .lp-card-status.red{color:#D21034}
    .lp-card-status.green{color:#007A33}
    .lp-card-status.warn{color:#8a6a00}
    .lp-card-meter{display:flex;gap:4px;margin-top:10px}
    .lp-card-meter-seg{flex:1;height:6px;border-radius:3px;background:#e4e7ec;overflow:hidden}
    .lp-card-meter-seg.on{background:var(--mc,#007A33)}
    .lp-card-hint{font-size:.65rem;color:#7a828e;margin-top:8px;display:flex;align-items:center;gap:6px}
    /* Cascade items */
    .lp-cascade{display:flex;flex-direction:column;gap:8px;width:100%;max-width:420px}
    .lp-cascade-item{
      display:flex;align-items:center;gap:10px;padding:10px 14px;
      background:#fff;border:1.5px solid #e4e7ec;border-radius:10px;
      animation:lpSlide .4s cubic-bezier(.22,1,.36,1) both;
    }
    .lp-cascade-item.breach{border-color:#D21034;background:#fbe9ec}
    .lp-cascade-ico{font-size:1.1rem}
    .lp-cascade-name{flex:1;font-size:.78rem;font-weight:600;color:#15181d}
    .lp-cascade-dots{display:flex;gap:3px}
    .lp-cascade-dots span{width:5px;height:5px;border-radius:50%;background:#7a828e}
    .lp-cascade-tag{
      font-size:.55rem;font-weight:700;letter-spacing:.04em;padding:3px 8px;border-radius:5px;
    }
    .lp-cascade-tag.red{color:#fff;background:#D21034}
    .lp-cascade-tag.grey{color:#7a828e;background:#f7f8fa}
    .lp-cascade-tag.green{color:#fff;background:#007A33}
    /* Email card */
    .lp-email{
      width:100%;max-width:420px;background:#fff;border:1.5px solid #e4e7ec;
      border-radius:14px;padding:14px 18px;position:relative;overflow:hidden;
      box-shadow:0 2px 4px rgba(16,24,40,.04),0 12px 32px rgba(16,24,40,.08);
      animation:lpSlide .5s cubic-bezier(.22,1,.36,1) both;
    }
    .lp-email.danger{border-color:#D21034}
    .lp-email-head{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid #e4e7ec}
    .lp-email-av{
      width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
      font-size:.85rem;
    }
    .lp-email-av.warn{background:#fbe9ec}
    .lp-email-av.ok{background:#e6f2ea}
    .lp-email-from{font-size:.72rem;font-weight:600;color:#15181d}
    .lp-email-addr{font-size:.6rem;font-weight:600}
    .lp-email-addr.red{color:#D21034}
    .lp-email-addr.green{color:#007A33}
    .lp-email-body{font-size:.72rem;font-weight:700;color:#15181d;margin:10px 0 4px}
    .lp-email-link{font-size:.6rem;color:#2563c9;text-decoration:underline;font-family:monospace}
    .lp-email-stamp{
      position:absolute;top:50%;left:50%;
      transform:translate(-50%,-50%) rotate(-12deg);
      font-size:1.5rem;font-weight:800;letter-spacing:.04em;
      color:#D21034;border:3px solid #D21034;border-radius:8px;
      padding:4px 16px;background:rgba(255,255,255,.88);
      animation:lpPop .4s .2s cubic-bezier(.34,1.56,.64,1) both;
    }
    /* Phone mockup */
    .lp-phone{
      width:110px;border-radius:18px;background:#15181d;padding:6px;
      box-shadow:0 12px 30px rgba(16,24,40,.2);
      animation:lpSlide .5s .15s cubic-bezier(.22,1,.36,1) both;
    }
    .lp-phone-screen{
      width:100%;border-radius:13px;background:#fff;padding:14px 10px;
      display:flex;flex-direction:column;align-items:center;gap:8px;min-height:140px;
      justify-content:center;
    }
    .lp-phone-label{font-size:.5rem;font-weight:700;letter-spacing:.08em;color:#7a828e;text-transform:uppercase}
    .lp-phone-code{font-family:monospace;font-size:1rem;font-weight:700;color:#007A33;letter-spacing:.06em}
    /* 2FA layout */
    .lp-twofa{display:flex;align-items:center;gap:20px}
    .lp-twofa-factor{display:flex;flex-direction:column;align-items:center;gap:6px}
    .lp-twofa-label{font-size:.5rem;font-weight:700;color:#7a828e;letter-spacing:.06em;text-transform:uppercase}
    .lp-twofa-name{font-size:.7rem;font-weight:700;color:#15181d}
    .lp-twofa-plus{font-size:1.5rem;font-weight:300;color:#7a828e}
    /* Vault */
    .lp-vault{
      width:100%;max-width:420px;background:#fff;border:1px solid #e4e7ec;
      border-radius:14px;padding:14px 18px;
      box-shadow:0 2px 4px rgba(16,24,40,.04),0 12px 32px rgba(16,24,40,.08);
      animation:lpSlide .5s cubic-bezier(.22,1,.36,1) both;
    }
    .lp-vault-head{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid #e4e7ec}
    .lp-vault-ico{width:32px;height:32px;border-radius:8px;background:#e6f2ea;display:flex;align-items:center;justify-content:center;font-size:.9rem}
    .lp-vault-title{font-size:.78rem;font-weight:700;color:#15181d}
    .lp-vault-sub{font-size:.58rem;color:#7a828e}
    .lp-vault-row{display:flex;align-items:center;gap:10px;padding:7px 0}
    .lp-vault-dot{width:6px;height:6px;border-radius:2px;background:#007A33}
    .lp-vault-site{font-size:.7rem;font-weight:600;color:#15181d;width:110px}
    .lp-vault-pw{font-family:monospace;font-size:.62rem;color:#4a525e;letter-spacing:.03em}
    /* Action icon */
    .lp-action{
      display:flex;flex-direction:column;align-items:center;gap:10px;
      animation:lpPop .5s cubic-bezier(.34,1.56,.64,1) both;
    }
    .lp-action-ico{font-size:3rem}
    .lp-action-label{
      font-size:.7rem;font-weight:700;padding:5px 14px;border-radius:20px;
      letter-spacing:.03em;
    }
    .lp-action-label.red{color:#a30d28;background:#fbe9ec;border:1px solid #f0c4cc}
    .lp-action-label.green{color:#0a5a2e;background:#e6f2ea;border:1px solid #bfe0cb}
    .lp-action-label.blue{color:#1e40af;background:#dbeafe;border:1px solid #93c5fd}
    /* Steps list */
    .lp-checklist{display:flex;flex-direction:column;gap:6px;width:100%;max-width:380px}
    .lp-check-item{
      display:flex;align-items:center;gap:10px;padding:8px 12px;
      background:#fff;border:1px solid #e4e7ec;border-radius:8px;
      font-size:.7rem;font-weight:600;color:#15181d;
      animation:lpSlide .4s cubic-bezier(.22,1,.36,1) both;
    }
    .lp-check-num{
      width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
      font-size:.55rem;font-weight:800;color:#fff;flex-shrink:0;
    }
    @keyframes lpPop{0%{transform:scale(0) rotate(-8deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
    @keyframes lpFade{from{opacity:0}to{opacity:1}}
    @keyframes lpSlide{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
    .lp-bar{height:4px;background:rgba(255,255,255,.05)}
    .lp-bar-fill{height:100%;background:linear-gradient(90deg,#007A33,#FCD116);transition:width .3s linear;width:0}
    .lp-narr{padding:16px 22px;min-height:100px;background:#15181d}
    .lp-narr-counter{font-size:.58rem;font-weight:700;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.12em;margin-bottom:5px}
    .lp-narr-title{font-size:.95rem;font-weight:700;color:#e2e8f0;margin-bottom:4px;letter-spacing:-.01em}
    .lp-narr-desc{font-size:.78rem;color:rgba(255,255,255,.45);line-height:1.5}
    .lp-dots{display:flex;justify-content:center;gap:6px;padding:0 20px 8px;background:#15181d}
    .lp-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.1);cursor:pointer;transition:.2s}
    .lp-dot.active{background:#FCD116;box-shadow:0 0 5px rgba(252,209,22,.4)}
    .lp-dot.done{background:#007A33}
    .lp-ctrl{
      display:flex;align-items:center;justify-content:center;gap:10px;
      padding:10px 20px;background:rgba(255,255,255,.02);border-top:1px solid rgba(255,255,255,.04);
    }
    .lp-btn{
      background:none;border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.55);
      border-radius:8px;padding:7px 16px;font-size:.72rem;font-weight:700;
      cursor:pointer;transition:.2s;font-family:inherit;
    }
    .lp-btn:hover{background:rgba(255,255,255,.06);color:#fff}
    .lp-btn.primary{background:#007A33;border-color:#007A33;color:#fff}
    .lp-btn.primary:hover{opacity:.85}
    .lp-btn:disabled{opacity:.3;cursor:default;pointer-events:none}
    .lp-done{text-align:center;padding:36px 20px}
    .lp-done-ico{font-size:3rem;margin-bottom:10px;animation:lpPop .6s both}
    .lp-done-title{font-size:1rem;font-weight:800;color:#007A33;margin-bottom:6px}
    .lp-done-desc{font-size:.78rem;color:rgba(255,255,255,.45);margin-bottom:18px;line-height:1.45}
    .lp-done-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:18px}
    .lp-done-tag{
      font-size:.65rem;font-weight:600;color:#0a5a2e;background:#e6f2ea;
      border:1px solid #bfe0cb;padding:4px 12px;border-radius:20px;
      display:inline-flex;align-items:center;gap:5px;
    }
    @media(max-width:600px){
      .lesson-player{width:97vw;border-radius:12px}
      .lp-scene{height:260px}
      .lp-narr{padding:12px 16px;min-height:85px}
      .lp-card,.lp-email,.lp-vault{max-width:340px;padding:12px 14px}
    }

    /* Module grid */
    .modules-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; margin-bottom:40px; }
    .module-card {
      background:var(--bg-white); border:2px solid var(--border); border-radius:var(--radius-lg);
      padding:24px; cursor:pointer; transition:all .2s; position:relative; overflow:hidden;
    }
    .module-card::before {
      content:''; position:absolute; top:0; left:0; right:0; height:4px;
    }
    .module-card.mod-phishing::before { background:linear-gradient(90deg,#dc2626,#ea580c); }
    .module-card.mod-password::before { background:linear-gradient(90deg,#7c3aed,#2563eb); }
    .module-card.mod-social::before  { background:linear-gradient(90deg,#d97706,#f59e0b); }
    .module-card.mod-ransomware::before { background:linear-gradient(90deg,#111827,#374151); }
    .module-card.mod-boas::before    { background:linear-gradient(90deg,#059669,#10b981); }
    .module-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); border-color:#c8d8e8; }
    .module-card.locked { opacity:.55; cursor:not-allowed; }
    .module-card.completed { border-color:#10b981; background:#f0fdf4; }
    .module-icon { font-size:2.4rem; margin-bottom:14px; display:block; }
    .module-card h3 { font-size:1rem; font-weight:700; margin-bottom:8px; }
    .module-card p { font-size:0.83rem; color:var(--text-secondary); line-height:1.6; margin-bottom:14px; }
    .module-meta { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
    .mod-tag { font-size:0.72rem; font-weight:700; padding:3px 9px; border-radius:100px; background:var(--bg-main); color:var(--text-muted); }
    .mod-score-badge { margin-left:auto; font-size:0.78rem; font-weight:800; color:#10b981; }

    /* Quiz container */
    .quiz-container {
      background:var(--bg-white); border:1px solid var(--border); border-radius:var(--radius-lg);
      overflow:hidden; display:none;
    }
    .quiz-container.active { display:block; animation:slideIn .35s ease; }
    @keyframes slideIn { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

    .quiz-header {
      background:linear-gradient(90deg,#0f2c59,#1a4a8a); color:#fff;
      padding:20px 28px; display:flex; align-items:center; gap:16px;
    }
    .quiz-header .q-module-icon { font-size:1.8rem; }
    .quiz-header h3 { font-size:1.05rem; font-weight:700; flex:1; }
    .quiz-progress-pills { display:flex; gap:4px; }
    .q-pill {
      width:28px; height:6px; border-radius:100px; background:rgba(255,255,255,.25); transition:.3s;
    }
    .q-pill.done { background:#10b981; }
    .q-pill.current { background:var(--gov-yellow); }

    .quiz-stage { padding:32px; }
    /* Intro slide */
    .intro-slide { text-align:center; padding:16px 0 8px; }
    .intro-slide .big-icon { font-size:4rem; margin-bottom:16px; display:block; animation:bounce 1.2s infinite alternate; }
    @keyframes bounce { from{transform:translateY(0)} to{transform:translateY(-10px)} }
    .intro-slide h2 { font-size:1.4rem; font-weight:800; margin-bottom:12px; }
    .intro-slide p { font-size:0.92rem; color:var(--text-secondary); line-height:1.7; max-width:520px; margin:0 auto 24px; }
    .intro-slide .key-points {
      display:flex; flex-direction:column; gap:10px; text-align:left;
      background:var(--bg-main); border-radius:var(--radius); padding:20px; margin-bottom:24px;
    }
    .intro-slide .key-points li {
      list-style:none; font-size:0.88rem; color:var(--text-secondary); padding-left:24px;
      position:relative; line-height:1.6;
    }
    .intro-slide .key-points li::before { content:'✅'; position:absolute; left:0; }

    /* Question slide */
    .question-slide {}
    .q-counter { font-size:0.78rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.8px; margin-bottom:8px; }
    .q-anim-box {
      background:linear-gradient(135deg,var(--bg-main),#eef2ff); border-radius:var(--radius);
      padding:20px 24px; margin-bottom:20px; min-height:80px;
      display:flex; align-items:center; gap:14px;
    }
    .q-anim-icon { font-size:2.2rem; flex-shrink:0; animation:pulse 2s infinite; }
    .q-text { font-size:1rem; font-weight:700; color:var(--text-primary); line-height:1.45; }

    .q-options { display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
    .q-opt {
      padding:13px 18px; border:2px solid var(--border); border-radius:10px;
      cursor:pointer; font-size:0.9rem; font-family:'Inter',sans-serif;
      text-align:left; background:var(--bg-white); color:var(--text-primary); font-weight:500;
      transition:all .18s; display:flex; align-items:center; gap:10px;
    }
    .q-opt:hover:not(:disabled) { border-color:var(--accent); background:#eef6ff; }
    .q-opt.correct { border-color:#10b981; background:#f0fdf4; color:#065f46; font-weight:700; }
    .q-opt.wrong   { border-color:#dc2626; background:#fef2f2; color:#991b1b; }
    .q-opt.disabled { cursor:not-allowed; opacity:.6; }
    .q-opt .opt-letter {
      width:26px; height:26px; border-radius:8px; background:var(--bg-main);
      display:flex; align-items:center; justify-content:center;
      font-size:0.78rem; font-weight:800; flex-shrink:0;
    }

    .q-feedback {
      padding:14px 18px; border-radius:var(--radius); font-size:0.88rem; line-height:1.6;
      display:none; margin-bottom:16px; font-weight:500;
    }
    .q-feedback.correct { background:#f0fdf4; border:1px solid #10b981; color:#065f46; display:block; }
    .q-feedback.wrong   { background:#fef2f2; border:1px solid #dc2626; color:#991b1b; display:block; }

    .btn-next-q {
      background:var(--accent); color:#fff; border:none; border-radius:10px;
      padding:13px 28px; font-weight:700; font-size:0.92rem; cursor:pointer;
      font-family:'Inter',sans-serif; transition:background .2s; display:none;
    }
    .btn-next-q:hover { background:var(--accent-light); }
    .btn-next-q.visible { display:inline-flex; align-items:center; gap:8px; }
    .btn-start-quiz {
      background:var(--accent); color:#fff; border:none; border-radius:10px;
      padding:14px 32px; font-weight:700; font-size:1rem; cursor:pointer;
      font-family:'Inter',sans-serif; transition:background .2s;
    }
    .btn-start-quiz:hover { background:var(--accent-light); }

    /* Results slide */
    .results-slide { text-align:center; padding:8px 0; }
    .score-ring {
      width:130px; height:130px; border-radius:50%; margin:0 auto 20px;
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      font-size:2rem; font-weight:800; border:8px solid var(--border);
      position:relative; transition:border-color .5s;
    }
    .score-ring.excellent { border-color:#10b981; color:#065f46; background:#f0fdf4; }
    .score-ring.good      { border-color:#2563eb; color:#1e40af; background:#eff6ff; }
    .score-ring.average   { border-color:#d97706; color:#92400e; background:#fffbeb; }
    .score-ring.poor      { border-color:#dc2626; color:#991b1b; background:#fef2f2; }
    .score-ring .score-pct { font-size:0.72rem; font-weight:600; margin-top:2px; }
    .results-slide h3 { font-size:1.3rem; font-weight:800; margin-bottom:8px; }
    .results-slide p { font-size:0.9rem; color:var(--text-secondary); margin-bottom:20px; }
    .results-breakdown { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:24px; }
    .rb-item { text-align:center; }
    .rb-num { font-size:1.5rem; font-weight:800; }
    .rb-lbl { font-size:0.75rem; color:var(--text-muted); }
    .btn-retry {
      background:var(--bg-main); border:1.5px solid var(--border); color:var(--text-primary);
      border-radius:10px; padding:11px 22px; font-weight:600; font-size:0.88rem;
      cursor:pointer; font-family:'Inter',sans-serif; margin-right:10px; transition:background .2s;
    }
    .btn-retry:hover { background:var(--border); }
    .btn-next-module {
      background:var(--gov-green); color:#fff; border:none; border-radius:10px;
      padding:11px 22px; font-weight:700; font-size:0.88rem; cursor:pointer;
      font-family:'Inter',sans-serif; transition:background .2s;
    }
    .btn-next-module:hover { background:var(--gov-green-dark); }

    /* Certificate */
    .cert-card {
      background:linear-gradient(135deg,#1a4a8a,#0f2c59); color:#fff;
      border-radius:var(--radius-lg); padding:32px; text-align:center; margin-top:32px;
    }
    .cert-card .cert-icon { font-size:3rem; margin-bottom:12px; }
    .cert-card h3 { font-size:1.2rem; font-weight:800; margin-bottom:8px; }
    .cert-card p { font-size:0.87rem; color:rgba(255,255,255,.8); margin-bottom:20px; }

    /* ── Participant badge (compact) ── */
    .participant-badge {
      display:flex; align-items:center; gap:12px;
      background:#f0fdf4; border:1.5px solid #10b981; border-radius:10px;
      padding:10px 16px; margin-bottom:28px; font-size:.85rem;
    }
    .badge-xp { margin-left:8px; background:#fef3c7; border-radius:8px; padding:4px 10px; font-size:.78rem; font-weight:700; color:#92400e; display:flex; align-items:center; gap:5px; }
    .badge-xp-mini { font-size:1rem; }

    /* ── Topic selection grid ── */
    .topic-select-grid {
      display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px;
      margin-top:24px;
    }
    .topic-card {
      background:#fff; border:1.5px solid var(--border); border-radius:16px; padding:24px;
      cursor:pointer; transition:transform .25s, box-shadow .25s, border-color .25s;
      position:relative; overflow:hidden;
    }
    .topic-card:hover { transform:translateY(-5px); box-shadow:0 12px 32px rgba(0,0,0,.1); border-color:var(--gov-green); }
    .topic-card.done { border-color:#10b981; background:#f0fdf4; }
    .topic-card.done::after { content:'✓ Concluído'; position:absolute; top:14px; right:14px; background:#10b981; color:#fff; font-size:.65rem; font-weight:800; letter-spacing:.06em; padding:3px 9px; border-radius:100px; text-transform:uppercase; }
    .topic-card-icon { font-size:2.4rem; margin-bottom:14px; }
    .topic-card-title { font-size:1rem; font-weight:800; color:var(--text-primary); margin-bottom:6px; }
    .topic-card-desc { font-size:.8rem; color:var(--text-muted); line-height:1.6; margin-bottom:16px; }
    .topic-card-meta { display:flex; gap:10px; flex-wrap:wrap; }
    .topic-meta-tag { font-size:.7rem; font-weight:700; padding:3px 9px; border-radius:100px; background:var(--bg-main); color:var(--text-muted); }
    .topic-cta { display:flex; align-items:center; justify-content:space-between; margin-top:16px; border-top:1px solid var(--border-light); padding-top:14px; }
    .topic-cta span { font-size:.82rem; font-weight:700; color:var(--gov-green); }
    .topic-cta .pts-badge { font-size:.72rem; color:var(--text-muted); }

    /* ── Topic view header ── */
    .topic-back-btn { background:none; border:1.5px solid var(--border); border-radius:8px; padding:7px 14px; font-size:.83rem; font-weight:600; cursor:pointer; font-family:inherit; color:var(--text-muted); transition:border-color .2s, color .2s; margin-bottom:16px; }
    .topic-back-btn:hover { border-color:var(--gov-green); color:var(--gov-green); }
    .topic-view-header { margin-bottom:20px; }
    .topic-view-meta { display:flex; align-items:center; gap:14px; background:#fff; border:1.5px solid var(--border); border-radius:12px; padding:16px 20px; }
    .topic-view-icon { font-size:2rem; }
    .topic-view-title { font-size:1.05rem; font-weight:800; color:var(--text-primary); }
    .topic-view-sub { font-size:.78rem; color:var(--text-muted); margin-top:2px; }
    .topic-view-status { margin-left:auto; }

    /* ── Course steps bar ── */
    .course-steps-bar { display:flex; align-items:center; gap:0; margin-bottom:28px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:16px 24px; }
    .csb-step { display:flex; align-items:center; gap:8px; flex:1; }
    .csb-num { width:28px; height:28px; border-radius:50%; background:var(--bg-main); border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:800; color:var(--text-muted); transition:all .3s; flex-shrink:0; }
    .csb-lbl { font-size:.82rem; font-weight:600; color:var(--text-muted); transition:color .3s; }
    .csb-step.active .csb-num { background:var(--gov-green); border-color:var(--gov-green); color:#fff; }
    .csb-step.active .csb-lbl { color:var(--gov-green); font-weight:700; }
    .csb-step.done .csb-num { background:#10b981; border-color:#10b981; color:#fff; }
    .csb-step.done .csb-num::after { content:'✓'; }
    .csb-line { flex:1; height:2px; background:var(--border); margin:0 8px; }

    /* ── External courses public grid ── */
    .ext-courses-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; margin-top:16px; }
    .ext-course-card { background:#fff; border:1.5px solid var(--border); border-radius:14px; padding:20px; display:flex; flex-direction:column; gap:10px; transition:border-color .2s, box-shadow .2s; }
    .ext-course-card:hover { border-color:#2563eb; box-shadow:0 8px 24px rgba(37,99,235,.1); }
    .ext-course-icon { font-size:2rem; }
    .ext-course-title { font-size:.95rem; font-weight:800; color:var(--text-primary); }
    .ext-course-org { font-size:.78rem; color:var(--text-muted); }
    .ext-course-desc { font-size:.8rem; color:var(--text-secondary); line-height:1.6; }
    .ext-course-meta { display:flex; gap:8px; flex-wrap:wrap; }
    .ext-course-link { display:inline-flex; align-items:center; gap:6px; background:#2563eb; color:#fff; border:none; border-radius:8px; padding:8px 16px; font-size:.82rem; font-weight:700; cursor:pointer; font-family:inherit; text-decoration:none; transition:background .2s; margin-top:auto; }
    .ext-course-link:hover { background:#1d4ed8; }

    /* ── Per-topic cert card ── */
    .cert-topic-name { font-size:1.1rem; font-weight:800; margin-bottom:10px; opacity:.9; }

    /* ── Registration gate ── */
    .aware-reg-gate {
      background:linear-gradient(135deg,#0f2c59 0%,#1a4a8a 100%);
      border-radius:var(--radius-lg); padding:40px 32px; text-align:center;
      color:#fff; margin-bottom:32px;
    }
    .aware-reg-gate h2 { font-size:1.5rem; font-weight:800; margin-bottom:10px; }
    .aware-reg-gate > p { font-size:.9rem; color:rgba(255,255,255,.8); max-width:480px; margin:0 auto 28px; line-height:1.7; }
    .aware-reg-form {
      display:grid; grid-template-columns:1fr 1fr; gap:14px;
      max-width:560px; margin:0 auto 20px; text-align:left;
    }
    @media(max-width:560px) { .aware-reg-form { grid-template-columns:1fr; } }
    .aware-reg-form .reg-field { display:flex; flex-direction:column; gap:5px; }
    .aware-reg-form .reg-field.full { grid-column:1/-1; }
    .aware-reg-form label { font-size:.78rem; font-weight:700; color:rgba(255,255,255,.85); letter-spacing:.02em; }
    .aware-reg-form input {
      background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.25);
      border-radius:8px; padding:10px 12px; color:#fff; font-size:.88rem;
      font-family:inherit; outline:none; transition:border-color .2s;
    }
    .aware-reg-form input::placeholder { color:rgba(255,255,255,.45); }
    .aware-reg-form input:focus { border-color:rgba(255,255,255,.7); }
    .aware-reg-form input.reg-invalid { border-color:#f87171; }
    .reg-err-msg { font-size:.75rem; color:#fca5a5; margin-top:2px; display:none; }
    .reg-err-msg.visible { display:block; }
    .reg-global-err { font-size:.83rem; color:#fca5a5; font-weight:600; margin-bottom:14px; min-height:18px; }
    .btn-reg-start {
      background:var(--gov-yellow,#f59e0b); color:#0f2c59; border:none; border-radius:10px;
      padding:13px 32px; font-weight:800; font-size:.95rem; cursor:pointer; font-family:inherit;
      transition:opacity .2s; display:inline-flex; align-items:center; gap:8px;
    }
    .btn-reg-start:hover { opacity:.88; }
    .reg-privacy { font-size:.73rem; color:rgba(255,255,255,.55); margin-top:14px; }


    /* ── Auth tabs ── */
    .aware-auth-tabs { display:flex; gap:6px; margin:18px auto 22px; background:rgba(255,255,255,.1); border-radius:10px; padding:4px; width:fit-content; }
    .aware-auth-tab { background:transparent; border:none; color:rgba(255,255,255,.75); padding:8px 22px; border-radius:7px; font-size:.87rem; font-weight:600; cursor:pointer; font-family:inherit; transition:all .2s; }
    .aware-auth-tab.active { background:#fff; color:#0f2c59; box-shadow:0 2px 8px rgba(0,0,0,.15); }
    .aware-auth-pane { display:none; }
    .aware-auth-pane.active { display:block; }

    /* ── OTP input ── */
    #otp-input { width:100%; box-sizing:border-box; }