[hidden]{display:none!important}
body{margin:0}

:root{
  --bg:#F4F8F6; --surface:#FFFFFF; --ink:#0B3A34; --muted:#4E6B65; --line:#D5E3DD;
  --accent:#C96F24; --accent-soft:#F8E8DA; --accent-ink:#8A4712; --green:#0F5F55; --green-soft:#E4EFE9;
  --ok:#1E7A4C; --ok-soft:#E1F3E8; --bad:#B8431F; --bad-soft:#FBE7E0;
  --display:"Lora", Georgia, serif;
  --body:"Poppins", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#08201D; --surface:#0F2E2A; --ink:#E8F2EE; --muted:#9DB9B1; --line:#1F4640;
    --accent:#E8914B; --accent-soft:#3A2715; --accent-ink:#EFA466; --green:#6CC7B6; --green-soft:#143D37;
    --ok:#6FD39C; --ok-soft:#133A27; --bad:#F08A6A; --bad-soft:#3F1F16;
  }
}
:root[data-theme="dark"]{
  --bg:#08201D; --surface:#0F2E2A; --ink:#E8F2EE; --muted:#9DB9B1; --line:#1F4640;
  --accent:#E8914B; --accent-soft:#3A2715; --accent-ink:#EFA466; --green:#6CC7B6; --green-soft:#143D37;
  --ok:#6FD39C; --ok-soft:#133A27; --bad:#F08A6A; --bad-soft:#3F1F16;
}
*{box-sizing:border-box}
body{background:var(--bg); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.7; padding-inline:20px}
h1,h2,h3{font-family:var(--display); line-height:1.2; text-wrap:balance; margin:0}
p{margin:0}
:focus-visible{outline:3px solid var(--green); outline-offset:3px; border-radius:6px}
button{font-family:inherit}

.top{max-width:1180px; margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-block:18px; border-bottom:1px solid var(--line)}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:700; font-size:1.2rem}
.demo{font-size:.78rem; font-weight:600; padding:4px 12px; border-radius:999px; background:var(--accent-soft); color:var(--accent-ink)}

.course-head{max-width:1180px; margin-inline:auto; padding-block:32px 24px; display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap}
.eyebrow{font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--green)}
.course-head h1{font-size:clamp(2rem,4vw,2.9rem); margin-top:6px}
.course-head .sub{color:var(--muted); margin-top:6px}
.prog{min-width:240px; flex:0 1 320px}
.prog-label{display:flex; justify-content:space-between; font-size:.85rem; font-weight:600; margin-bottom:6px}
.bar{height:10px; border-radius:99px; background:var(--green-soft); overflow:hidden}
.bar span{display:block; height:100%; width:0; background:var(--green); border-radius:99px; transition:width .4s}

.layout{max-width:1180px; margin-inline:auto; display:grid; grid-template-columns:290px 1fr; gap:40px; align-items:start; padding-bottom:64px}
.side{position:sticky; top:calc(env(safe-area-inset-top,0px) + 16px); background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:10px}
.side ol{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.side button{width:100%; display:flex; gap:12px; align-items:flex-start; text-align:left; background:none; border:0; border-radius:10px; padding:10px 12px; color:var(--ink); cursor:pointer; font-size:.92rem; line-height:1.4}
.side button:hover{background:var(--green-soft)}
.side button[aria-current="true"]{background:var(--green-soft); font-weight:600}
.side .dot{flex:none; width:24px; height:24px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center; font-size:.72rem; font-weight:700; color:var(--muted); margin-top:1px}
.side .done .dot{background:var(--green); border-color:var(--green); color:var(--surface)}
.side .time{display:block; font-size:.78rem; color:var(--muted); font-weight:400}
.side .exam .dot{border-color:var(--accent); color:var(--accent-ink)}

article{max-width:68ch}
article[hidden]{display:none}
.mod-label{font-size:.8rem; font-weight:600; color:var(--muted)}
article h2{font-size:clamp(1.6rem,3vw,2.2rem); margin-block:6px 20px}
article h3{font-size:1.25rem; margin-block:32px 10px}
article p{margin-bottom:14px}
article ul, article ol.txt{margin:0 0 16px; padding-left:22px}
article li{margin-bottom:6px}
.lead{font-size:1.1rem; color:var(--muted)}
.quote{font-family:var(--display); font-style:italic; font-size:1.2rem; border-left:3px solid var(--accent); padding:4px 0 4px 18px; margin:22px 0}
.box{border-radius:12px; padding:18px 20px; margin:26px 0}
.box h4{margin:0 0 8px; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase}
.box p:last-child,.box ul:last-child{margin-bottom:0}
.box.practice{background:var(--accent-soft)}
.box.practice h4{color:var(--accent-ink)}
.box.think{background:var(--green-soft)}
.box.think h4{color:var(--green)}
.tbl-wrap{overflow-x:auto; margin:10px 0 20px}
table{border-collapse:collapse; width:100%; font-size:.92rem; min-width:480px}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-weight:600; color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em}
.nav{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:36px; padding-top:22px; border-top:1px solid var(--line)}
.btn{display:inline-flex; align-items:center; gap:8px; font:600 .98rem var(--body); padding:12px 22px; border-radius:999px; border:2px solid var(--ink); background:var(--ink); color:var(--bg); cursor:pointer}
.btn.ghost{background:transparent; color:var(--ink)}
.btn.orange{background:var(--accent); border-color:var(--accent); color:#fff}
.btn:disabled{opacity:.45; cursor:not-allowed}

/* exam */
.q{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px; margin-bottom:14px}
.q legend{font-weight:600; padding:0; margin-bottom:12px; line-height:1.5}
.q fieldset{border:0; margin:0; padding:0}
.q label{display:flex; gap:10px; align-items:flex-start; padding:9px 12px; border-radius:10px; cursor:pointer; line-height:1.5}
.q label:hover{background:var(--green-soft)}
.q input{margin-top:5px; accent-color:var(--green)}
.q label.right{background:var(--ok-soft)}
.q label.wrong{background:var(--bad-soft)}
.q .why{display:none; margin-top:10px; font-size:.9rem; color:var(--muted)}
.q.checked .why{display:block}
.result{border-radius:14px; padding:24px; margin-top:20px}
.result.pass{background:var(--ok-soft)}
.result.fail{background:var(--bad-soft)}
.result .score{font-family:var(--display); font-size:2.6rem; font-weight:700}
.result p{margin-bottom:12px}
.warn{font-size:.9rem; color:var(--muted); margin-bottom:18px}
.warn a, .result a{color:var(--green); font-weight:600}

@media (max-width:900px){
  .layout{grid-template-columns:1fr; gap:24px}
  .side{position:static}
}
@media (prefers-reduced-motion:reduce){ .bar span{transition:none} }
.user{display:flex; align-items:center; gap:12px; font-size:.9rem; font-weight:600}
.user a{color:var(--green)}
.loading{max-width:1180px; margin:40px auto; color:var(--muted)}
.logo{color:var(--ink); text-decoration:none}

/* certificado */
.cert-box{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px; margin-top:20px}
.cert-box h3{margin:0 0 8px; font-size:1.2rem}
.cert-box p{margin-bottom:12px}
.cert-box .row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.cert-box .code{font-family:ui-monospace, Menlo, Consolas, monospace; font-weight:700; letter-spacing:.05em}
.status{display:inline-block; font-size:.78rem; font-weight:700; padding:3px 10px; border-radius:999px}
.status.wait{background:var(--accent-soft); color:var(--accent-ink)}
.status.ok{background:var(--ok-soft); color:var(--ok)}
.pix{background:var(--green-soft); border-radius:12px; padding:14px 16px; margin:12px 0}
.pix .k{font-family:ui-monospace, Menlo, Consolas, monospace; font-weight:700; word-break:break-all}
.btn.small{padding:8px 16px; font-size:.9rem}
.muted{color:var(--muted)}
.msg{border-radius:12px; padding:12px 14px; font-size:.92rem}
.msg.erro{background:var(--bad-soft); color:var(--bad)}
.msg.ok{background:var(--ok-soft); color:var(--ok)}
.cert-box a{color:var(--green); font-weight:600}