/* assets/css/style.css */
:root{
  --bg:#0f172a;
  --panel:#111827;
  --card:#0b1220;
  --brand:#fbbf24; /* amarelo */
  --brand-strong:#f59e0b;
  --text:#ffffff;
  --muted:#d1d5db;
  --ok:#22c55e;
  --danger:#ef4444;
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  background:var(--bg);color:var(--text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif
}
a{color:var(--brand)}
.container{max-width:980px;margin:0 auto;padding:20px}
.header{
  display:flex;align-items:center;gap:14px;margin-bottom:18px;
}
.badge{
  background:linear-gradient(90deg,var(--brand),var(--brand-strong));
  color:#111827;font-weight:700;
  padding:6px 10px;border-radius:999px;font-size:12px;letter-spacing:.2px;
}
.h1{font-size:28px;font-weight:800;line-height:1.2;margin:6px 0 2px}
.lead{color:var(--muted);font-size:15px}

.card{
  background:#0b1220;
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;padding:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.cta{
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(90deg,var(--brand-strong),var(--brand));
  color:#111827;border:none;border-radius:12px;
  padding:12px 18px;font-weight:700;text-decoration:none;cursor:pointer;
  transition:transform .08s ease,filter .2s ease;
}
.cta:hover{transform:translateY(-1px);filter:brightness(1.05)}

.video-wrap{position:relative;border-radius:16px;overflow:hidden}
.video-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-start;
  padding:16px;pointer-events:none;
}
.overlay-chip{
  align-self:flex-start;background:rgba(255,255,255,.9);color:#111827;font-weight:700;
  padding:6px 10px;border-radius:12px;margin-bottom:8px;font-size:12px;
}
.overlay-title{
  background:rgba(17,24,39,.85);
  max-width:720px;border-left:4px solid var(--brand);padding:12px;border-radius:8px;color:#e5e7eb;
  font-weight:700;font-size:16px;line-height:1.35
}

.controls{display:flex;gap:10px;margin-top:12px}
.ctrl{
  background:#0e1726;border:1px solid rgba(255,255,255,.18);color:#ffffff;border-radius:10px;
  padding:10px 12px;cursor:pointer;font-weight:600
}
.ctrl:focus{outline:2px solid var(--brand)}
.ctrl:hover{filter:brightness(1.1)}

.list{display:grid;gap:12px;margin-top:12px}
.item{
  background:#0c1322;border:1px solid rgba(255,255,255,.18);
  border-radius:14px;padding:14px
}
.meta{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin-bottom:6px}
.msg{font-size:15px;line-height:1.5}

.form{display:grid;gap:12px}
.input, .textarea, .select{
  width:100%;background:#0c1322;border:1px solid rgba(255,255,255,.18);border-radius:12px;
  color:#ffffff;padding:12px;font-size:15px
}
.textarea{min-height:140px;resize:vertical}
.help{color:var(--muted);font-size:13px}
.alert{padding:10px 12px;border-radius:10px;margin-bottom:10px}
.alert-ok{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);color:#bbf7d0}
.alert-err{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35);color:#fecaca}

.footer{color:var(--muted);font-size:12px;margin-top:18px}

.quiz-wrap{display:grid;gap:16px}
.q-card{
  background:#0c1322;border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:14px
}
.q-title{font-weight:700;margin-bottom:8px}
.options{display:grid;gap:8px}
.opt{
  background:#0e1726;border:1px solid rgba(255,255,255,.18);
  border-radius:12px;padding:10px;cursor:pointer;color:#ffffff
}
.opt[aria-checked="true"]{
  border-color:#fbbf24;background:#121b2c;
  box-shadow:0 0 0 2px rgba(251,191,36,.25)
}

/* Após finalizar */
.opt.correct {
  border-color:#22c55e;
  box-shadow:0 0 0 2px rgba(34,197,94,.35);
  background:#0f1f17;color:#ffffff
}
.opt.wrong {
  border-color:#ef4444;
  box-shadow:0 0 0 2px rgba(239,68,68,.35);
  background:#1f1414;color:#ffffff
}

/* Selo "Correto"/"Incorreto" */
.badge-q {
  display:inline-block;margin-top:6px;
  font-size:12px;font-weight:700;
  padding:4px 8px;border-radius:999px;
  background:#111827;border:1px solid rgba(255,255,255,.18);color:#fff;
}
.badge-q.ok { background:#0f2017; border-color:#22c55e; }
.badge-q.err{ background:#201313; border-color:#ef4444; }