:root {
  --bg: #0b0b0d;
  --card: #121216;
  --text: #f5f5f7;
  --muted: #a9a9b3;
  --border: rgba(255,255,255,.10);

  --brand: #c44b04;

  --shadow: 0 20px 60px rgba(0,0,0,.35);
  --radius: 18px;
}

:root.light {
  --bg: #f7f7fb;
  --card: #ffffff;
  --text: #121216;
  --muted: #565669;
  --border: rgba(0,0,0,.10);

  --shadow: 0 18px 40px rgba(0,0,0,.08);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.hidden { display: none !important; }

#app {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 18px 60px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand { display: flex; align-items: center; gap: 12px; }
.logo {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  letter-spacing: -0.5px;
}
.brand-text h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}
.brand-text p {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.header-actions { display: flex; align-items: center; gap: 10px; }

.btn-primary, .btn-secondary, .btn-link, .btn-icon {
  border: 0;
  cursor: pointer;
  font-weight: 700;
  border-radius: 14px;
}

.btn-primary {
  background: var(--brand);
  color: #fff;
  padding: 12px 14px;
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 10px 12px;
}

.btn-link {
  background: transparent;
  color: var(--muted);
  padding: 8px 0;
  border-radius: 12px;
  text-decoration: underline;
}

.btn-icon {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  line-height: 1;
}

.main { margin-top: 22px; }

.screen { display: none; }
.screen.active { display: block; }

.hero {
  margin-top: 30px;
  text-align: center;
}
.hero h2 {
  margin: 0 0 22px;
  font-size: 24px;
  letter-spacing: -0.4px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 860px) {
  .grid-2 { grid-template-columns: 1fr; }
}

.card-btn {
  position: relative;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  padding: 18px 16px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease;
}
.card-btn:hover { transform: translateY(-1px); opacity: .96; }

.card-title {
  font-size: 16px;
  font-weight: 800;
}
.card-desc {
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.35;
}
.pill {
  position: absolute;
  right: 12px;
  top: 12px;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
}

.screen-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 18px;
}
.screen-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
}

.panel {
  margin-top: 16px;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  max-width: 520px;
}

.label {
  display: block;
  margin-top: 10px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

.input {
  width: 100%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 14px;
  padding: 12px 12px;
  outline: none;
}
.input:focus {
  border-color: rgba(196,75,4,.55);
}

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

.two-cols {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 14px;
}
@media (max-width: 980px) {
  .two-cols { grid-template-columns: 1fr; }
}

.aside {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
}
.aside-title {
  font-weight: 900;
  margin-bottom: 10px;
}

.list { display: flex; flex-direction: column; gap: 8px; }

.session-item {
  text-align: left;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 14px;
  padding: 10px 10px;
  cursor: pointer;
}
.session-item.active {
  border-color: rgba(196,75,4,.55);
  background: rgba(196,75,4,.08);
}

.aside-actions { margin-top: 12px; }

.content {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  min-height: 240px;
}

.sessao h4 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 900;
}
.sessao p { line-height: 1.5; color: var(--text); }
.sessao .box {
  margin-top: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
}
.sessao ul { margin: 8px 0 0 18px; color: var(--muted); }

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.overlay-card {
  width: min(520px, 92vw);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.overlay-title {
  font-weight: 900;
  margin-bottom: 8px;
}
.overlay-text {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

.overlay-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}

.spinner {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: rgba(196,75,4,.95);
  animation: spin .8s linear infinite;
  margin-bottom: 10px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==============================
   Tema — Sessão Toolbar (A)
============================== */
.sessao-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  margin-bottom: 12px;
}

.light .sessao-toolbar{
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.08);
}

.sessao-progress{
  font-size: 13px;
  opacity: .9;
}

.sessao-actions{
  display:flex;
  gap:8px;
  flex-wrap: wrap;
}

.session-item{
  text-align:left;
}

.session-item.active{
  outline: 2px solid rgba(196,75,4,.55);
  background: rgba(196,75,4,.12);
}
/* ==============================
   Sessões Premium: chips/cards/checkpoint
============================== */
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  opacity:.9;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}
.light .chip{
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.10);
}

.flashcards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
@media (max-width: 900px){
  .flashcards{ grid-template-columns: 1fr; }
}

.flashcard{
  width:100%;
  text-align:left;
  border:none;
  background: transparent;
  padding:0;
  cursor:pointer;
}

.flashcard-inner{
  position:relative;
  border-radius:14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  overflow:hidden;
  min-height: 120px;
  transition: transform .15s ease;
}
.light .flashcard-inner{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
}

.flashcard:hover .flashcard-inner{
  transform: translateY(-1px);
}

.flashcard-face{
  padding:12px 12px 10px 12px;
}

.flashcard-label{
  font-size:11px;
  opacity:.75;
  margin-bottom:6px;
}

.flashcard-text{
  font-size:14px;
  line-height:1.35;
}

.flashcard-hint{
  margin-top:10px;
  font-size:11px;
  opacity:.6;
}

.flashcard-back{
  display:none;
}

.flashcard.flipped .flashcard-front{ display:none; }
.flashcard.flipped .flashcard-back{ display:block; }

.checkpoint{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:10px;
}

.cq{
  border-radius:14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  padding:12px;
}
.light .cq{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
}

.cq-q{
  font-size:14px;
  line-height:1.35;
  margin-bottom:10px;
}

.cq-tag{
  display:inline-flex;
  font-size:11px;
  opacity:.8;
  padding:2px 8px;
  border-radius:999px;
  background: rgba(196,75,4,.16);
  border: 1px solid rgba(196,75,4,.35);
  margin-right:8px;
}

.cq-opts{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:8px;
}
@media (max-width: 900px){
  .cq-opts{ grid-template-columns: 1fr; }
}

.cq-opt{
  width:100%;
  text-align:left;
  padding:10px 10px;
  border-radius:12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  cursor:pointer;
}
.light .cq-opt{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
}

.cq-opt.selected{ outline: 2px solid rgba(196,75,4,.45); }
.cq-opt.right{ outline: 2px solid rgba(0,200,120,.55); }
.cq-opt.wrong{ outline: 2px solid rgba(255,80,80,.55); }

.cq-feedback{
  margin-top:10px;
  font-size:13px;
  opacity:.9;
}

.cq-show{
  margin-top:10px;
  padding:8px 10px;
  border-radius:12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  cursor:pointer;
}
.light .cq-show{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
}

.cq-exp{
  margin-top:8px;
  font-size:13px;
  opacity:.9;
  line-height:1.35;
}

/* ==============================
   Flashcards — Liora Premium (cor e contraste)
============================== */
.flashcard-inner{
  border-radius:16px;
  border: 1px solid rgba(196,75,4,.35);
  background: linear-gradient(135deg,
    rgba(196,75,4,.16),
    rgba(255,255,255,.04)
  );
  box-shadow: 0 6px 22px rgba(0,0,0,.22);
}

.light .flashcard-inner{
  background: linear-gradient(135deg,
    rgba(196,75,4,.12),
    rgba(0,0,0,.02)
  );
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
}

.flashcard-label{
  font-weight:600;
  letter-spacing:.02em;
}

.flashcard-front .flashcard-label{
  color: rgba(196,75,4,.95);
}

.flashcard-back .flashcard-label{
  color: rgba(196,75,4,.95);
}

.flashcard-text{
  font-size:14px;
}

.flashcard-hint{
  color: rgba(255,255,255,.65);
}

.light .flashcard-hint{
  color: rgba(0,0,0,.55);
}

.flashcard:hover .flashcard-inner{
  transform: translateY(-2px);
  border-color: rgba(196,75,4,.55);
}
.cq-input{
  width:100%;
  min-height:90px;
  padding:10px 12px;
  border-radius:12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: inherit;
  outline: none;
  resize: vertical;
  margin-top: 8px;
}
.light .cq-input{
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.02);
}

.cq-row{
  display:flex;
  gap:8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.cq-check{
  padding:8px 10px;
  border-radius:12px;
  border: 1px solid rgba(196,75,4,.35);
  background: rgba(196,75,4,.12);
  cursor:pointer;
}

/* ==============================
   Checkpoint (MCQ + Curta) — legibilidade dark
============================== */

.cq{
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}

.light .cq{
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.02);
}

.cq-q{
  font-weight: 600;
  margin-bottom: 10px;
}

.cq-tag{
  display:inline-block;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  margin-right: 8px;
  border: 1px solid rgba(196,75,4,.35);
  background: rgba(196,75,4,.12);
  color: rgba(196,75,4,.95);
}

/* opções MCQ */
.cq-opts{
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.cq-opt{
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  cursor: pointer;
}

.light .cq-opt{
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.02);
  color: rgba(0,0,0,.88);
}

.cq-opt:hover{
  border-color: rgba(196,75,4,.45);
  background: rgba(196,75,4,.10);
}

.cq-opt.selected{
  border-color: rgba(196,75,4,.65);
  background: rgba(196,75,4,.14);
}

.cq-opt.right{
  border-color: rgba(66, 211, 146, .70);
  background: rgba(66, 211, 146, .12);
}

.cq-opt.wrong{
  border-color: rgba(239, 68, 68, .70);
  background: rgba(239, 68, 68, .10);
}

/* feedback / explicação */
.cq-feedback{
  margin-top: 10px;
  font-weight: 600;
  color: rgba(255,255,255,.90);
}

.light .cq-feedback{
  color: rgba(0,0,0,.82);
}

.cq-exp{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  line-height: 1.45;
}

.light .cq-exp{
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.02);
  color: rgba(0,0,0,.88);
}

/* curta (textarea) */
.cq-input{
  width:100%;
  min-height: 96px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  outline: none;
  resize: vertical;
  margin-top: 8px;
}

.light .cq-input{
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.02);
  color: rgba(0,0,0,.88);
}

.cq-row{
  display:flex;
  gap:8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.cq-check{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(196,75,4,.35);
  background: rgba(196,75,4,.12);
  color: rgba(255,255,255,.92);
  cursor: pointer;
}

.light .cq-check{
  color: rgba(0,0,0,.85);
}

/* ==============================
   Mini CSS — botões do checkpoint (dark-friendly)
============================== */

.cq-show{
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  font-weight: 600;
  cursor: pointer;
}

.cq-show:hover{
  border-color: rgba(196,75,4,.55);
  background: rgba(196,75,4,.12);
}

.light .cq-show{
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.02);
  color: rgba(0,0,0,.85);
}

.cq-check{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(196,75,4,.45);
  background: rgba(196,75,4,.16);
  color: rgba(255,255,255,.92);
  font-weight: 700;
  cursor: pointer;
}

.cq-check:hover{
  border-color: rgba(196,75,4,.70);
  background: rgba(196,75,4,.22);
}

.light .cq-check{
  color: rgba(0,0,0,.85);
}

/* feedback com contraste */
.cq-feedback{
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  margin-top: 10px;
}
/* ==============================
   Aprofundar (Zoom do conceito)
============================== */

.conceitos-list{
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.conceito-item{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

.light .conceito-item{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
}

.conceito-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.conceito-text{
  flex: 1;
  line-height: 1.35;
}

.btn-aprofundar{
  white-space: nowrap;
  font-weight: 700;
}

.aprof-panel{
  margin-top: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(196,75,4,.35);
  background: rgba(196,75,4,.10);
}

.aprof-title{
  font-weight: 800;
  margin-bottom: 8px;
}

.aprof-box{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
}

.light .aprof-box{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.65);
}
/* ===== PDF Ultra Fiel: Fontes + Checkpoint legível no Dark ===== */

.fontes-box .fontes-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.fontes-list {
  display: grid;
  gap: 10px;
}

.fonte-item {
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
}

html.light .fonte-item {
  border-color: rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.03);
}

.fonte-tag {
  display: inline-flex;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(196, 75, 4, 0.18);
  border: 1px solid rgba(196, 75, 4, 0.35);
  margin-bottom: 8px;
}

.fonte-text {
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.95;
}

/* Checkpoint mais confortável no escuro */
.checkpoint-box .cq {
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  border-radius: 14px;
  padding: 12px;
  margin-top: 12px;
}

html.light .checkpoint-box .cq {
  border-color: rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.03);
}

.cq-q {
  font-weight: 600;
  margin-bottom: 10px;
}

.cq-tag {
  display: inline-flex;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(196, 75, 4, 0.18);
  border: 1px solid rgba(196, 75, 4, 0.35);
  margin-right: 8px;
}

.cq-opts {
  display: grid;
  gap: 8px;
}

.cq-opt {
  text-align: left;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.15);
  color: inherit;
}

html.light .cq-opt {
  background: rgba(255,255,255,0.85);
  border-color: rgba(0,0,0,0.12);
}

.cq-opt.selected {
  border-color: rgba(196, 75, 4, 0.55);
  box-shadow: 0 0 0 3px rgba(196, 75, 4, 0.16);
}

.cq-opt.right {
  border-color: rgba(60, 200, 120, 0.55);
  box-shadow: 0 0 0 3px rgba(60, 200, 120, 0.16);
}

.cq-opt.wrong {
  border-color: rgba(255, 90, 90, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 90, 90, 0.16);
}

.cq-feedback {
  margin-top: 10px;
  font-size: 13px;
  opacity: 0.95;
}

.cq-show, .cq-check {
  margin-top: 10px;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: inherit;
}

html.light .cq-show, html.light .cq-check {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.12);
}

.cq-exp {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.18);
}

html.light .cq-exp {
  background: rgba(255,255,255,0.85);
  border-color: rgba(0,0,0,0.12);
}

.cq-input {
  width: 100%;
  min-height: 84px;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.18);
  color: inherit;
}

html.light .cq-input {
  background: rgba(255,255,255,0.90);
  border-color: rgba(0,0,0,0.12);
}

.cq-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
/* ===== PDF viewer embutido ===== */
.pdf-viewer-wrap {
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 14px;
}

html.light .pdf-viewer-wrap {
  border-color: rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.03);
}

.pdf-viewer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

html.light .pdf-viewer-head {
  border-bottom-color: rgba(0,0,0,0.10);
}

.pdf-viewer-title {
  font-weight: 700;
  font-size: 13px;
  opacity: 0.95;
}

.pdf-iframe {
  width: 100%;
  height: 340px;
  border: 0;
  background: transparent;
}
/* =========================================================
   ✅ SELECT / DROPDOWN — legível no dark/light
========================================================= */

/* ajuda o browser a renderizar controles nativos no tema certo */
html.dark { color-scheme: dark; }
html.light { color-scheme: light; }

/* o select (campo fechado) */
select.input,
.input[type="file"],
.input {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.95);
  border: 1px solid rgba(255,255,255,0.12);
}

html.light select.input,
html.light .input[type="file"],
html.light .input {
  background: rgba(0,0,0,0.04);
  color: rgba(0,0,0,0.92);
  border: 1px solid rgba(0,0,0,0.10);
}

/* foco (acessível) */
select.input:focus,
.input:focus {
  outline: none;
  border-color: rgba(196, 75, 4, 0.65); /* seu laranja */
  box-shadow: 0 0 0 3px rgba(196, 75, 4, 0.22);
}

/* as opções no dropdown (nem todo browser respeita, mas ajuda MUITO) */
select option {
  background: #0f1115;
  color: #e9eef7;
}

html.light select option {
  background: #ffffff;
  color: #111827;
}
/* =========================================================
   ✅ Progress bar (Tema/PDF)
========================================================= */
.progress-wrap {
  margin-top: 10px;
}

.progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.progress-bar {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
}

html.light .progress-bar {
  border-color: rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.06);
}

.progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: rgba(196, 75, 4, 0.95); /* laranja */
  transition: width 250ms ease;
}
/* Checkpoint mais legível no dark */
.checkpoint-box .cq {
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  border-radius: 14px;
  padding: 12px;
  margin-top: 10px;
}

html.light .checkpoint-box .cq {
  border-color: rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.03);
}

.cq-q {
  font-weight: 600;
  margin-bottom: 10px;
  color: rgba(255,255,255,0.92);
}

html.light .cq-q {
  color: rgba(0,0,0,0.92);
}

.cq-opt {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.92);
  margin-bottom: 8px;
}

html.light .cq-opt {
  border-color: rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
  color: rgba(0,0,0,0.92);
}

.cq-opt.right {
  border-color: rgba(34,197,94,0.55);
  background: rgba(34,197,94,0.12);
}

.cq-opt.wrong {
  border-color: rgba(239,68,68,0.55);
  background: rgba(239,68,68,0.12);
}

.cq-feedback {
  margin-top: 6px;
  font-weight: 600;
  opacity: 0.95;
}

.cq-input {
  width: 100%;
  min-height: 92px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.92);
  resize: vertical;
}

html.light .cq-input {
  border-color: rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.02);
  color: rgba(0,0,0,0.92);
}
/* =========================================================
   ✅ FIX SELECT/DROPDOWN (modo escuro)
   - resolve opções invisíveis no select
   ========================================================= */
select.input {
  color: var(--text, #eaeaea);
  background: var(--panel, #141414);
  border: 1px solid rgba(255,255,255,.12);
}

select.input option {
  background: #111 !important;
  color: #f2f2f2 !important;
}

/* no tema claro */
html.light select.input {
  color: #111;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
}

html.light select.input option {
  background: #fff !important;
  color: #111 !important;
}


/* =========================================================
   ✅ PROGRESS BAR (PDF / Tema)
   ========================================================= */
.progress {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.progress-bar {
  flex: 1;
  height: 10px;
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}

.progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff7a18, #c44b04);
  transition: width .25s ease;
}

.progress-pct {
  min-width: 42px;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
}

html.light .progress-bar {
  background: rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.08);
}

html.light .progress-pct {
  color: rgba(0,0,0,.75);
}


/* =========================================================
   ✅ CHECKPOINT/QUESTÕES (modo escuro mais legível)
   ========================================================= */
.checkpoint-box .cq {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 12px;
  margin-top: 10px;
}

.checkpoint-box .cq-q {
  color: rgba(255,255,255,.92);
  font-weight: 600;
  margin-bottom: 10px;
}

.checkpoint-box .cq-opt {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  border-radius: 12px;
  padding: 10px 12px;
  text-align: left;
  width: 100%;
  margin-bottom: 8px;
  cursor: pointer;
}

.checkpoint-box .cq-opt:hover {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.09);
}

.checkpoint-box .cq-opt.selected {
  outline: 2px solid rgba(196,75,4,.55);
}

.checkpoint-box .cq-opt.right {
  border-color: rgba(0,200,120,.55);
  background: rgba(0,200,120,.12);
}

.checkpoint-box .cq-opt.wrong {
  border-color: rgba(255,80,80,.55);
  background: rgba(255,80,80,.10);
}

.checkpoint-box .cq-feedback {
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255,255,255,.78);
}

.checkpoint-box .cq-input {
  width: 100%;
  min-height: 88px;
  resize: vertical;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.92);
}

html.light .checkpoint-box .cq {
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.10);
}

html.light .checkpoint-box .cq-q,
html.light .checkpoint-box .cq-opt,
html.light .checkpoint-box .cq-feedback,
html.light .checkpoint-box .cq-input {
  color: rgba(0,0,0,.85);
}

html.light .checkpoint-box .cq-opt {
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.10);
}

html.light .checkpoint-box .cq-input {
  background: #fff;
  border-color: rgba(0,0,0,.12);
}
.panel-actions{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:12px;
}

.panel-actions .btn-primary{
  flex:1;
}

.panel-actions .btn-secondary{
  white-space:nowrap;
}
/* =========================================================
   ✅ ACTIONS ROW (Tema/PDF) — botão principal + secundário
========================================================= */
.actions-row{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:10px;
}

.actions-row .btn-primary{
  flex:1;
  min-width:180px;
}

.actions-row .btn-secondary{
  white-space:nowrap;
  padding-left:14px;
  padding-right:14px;
}

/* Mobile: empilha (fica lindo e funcional) */
@media (max-width: 520px){
  .actions-row{
    flex-direction:column;
    align-items:stretch;
  }
  .actions-row .btn-primary,
  .actions-row .btn-secondary{
    width:100%;
  }
}
/* ✅ Botões lado a lado, iguais e centralizados (Tema + PDF) */
.btn-row{
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin-top: 12px;
}

/* ambos com o mesmo tamanho */
.btn-row .btn-primary,
.btn-row .btn-secondary{
  flex: 1;
  max-width: 220px;   /* controla o "tamanho bonito" e centralizado */
  width: 100%;
}

/* em telas menores, deixa fluido */
@media (max-width: 520px){
  .btn-row{
    flex-direction: column;
  }
  .btn-row .btn-primary,
  .btn-row .btn-secondary{
    max-width: 100%;
  }
}
/* =========================================================
   LIORA — SIMULADOS (UI alinhada ao padrão do app)
   - escopado em #screen-simulados e #sim-config
   - não quebra .pill do menu (card-btn)
   - botões com radius padrão (tipo "Entrar")
========================================================= */

/* ---------- Tokens locais (não altera o app inteiro) ---------- */
#screen-simulados{
  --sim-radius: 14px;         /* igual vibe do botão Entrar */
  --sim-radius-lg: 18px;      /* cards/alternativas */
  --sim-border: var(--border, rgba(255,255,255,.10));
  --sim-surface: rgba(255,255,255,.03);
  --sim-surface-2: rgba(255,255,255,.05);
  --sim-accent: var(--brand, #c44b04);
}

/* ---------- Card base (só dentro de simulados) ---------- */
#screen-simulados .sim-card{
  border: 1px solid var(--sim-border);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}

#screen-simulados .sim-card-title{
  font-weight: 800;
  font-size: 16px;
  margin: 0 0 10px;
}

/* ---------- CTA / Meta ---------- */
#screen-simulados .sim-cta{
  display:flex;
  gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}

#screen-simulados .sim-meta{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
@media (max-width: 520px){
  #screen-simulados .sim-meta{ grid-template-columns: 1fr; }
}

/* ---------- Pills do Simulados (não usa .pill global) ---------- */
#screen-simulados .sim-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  padding:4px 8px;
  border-radius: 999px;
  border: 1px solid var(--sim-border);
  color: var(--muted);
  background: transparent;
  margin-right: 8px;
}
#screen-simulados .sim-pill.ok{ border-color: rgba(0,200,120,.35); }
#screen-simulados .sim-pill.bad{ border-color: rgba(255,70,70,.35); }

/* ---------- Topbar / progresso / timer ---------- */
#screen-simulados .sim-topbar{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}

#screen-simulados .sim-progress{ flex:1; }

#screen-simulados .sim-bar{
  height:10px;
  border-radius: 999px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.06);
}
:root.light #screen-simulados .sim-bar{
  border-color: rgba(0,0,0,.08);
  background: rgba(0,0,0,.06);
}

#screen-simulados .sim-bar-fill{
  height:100%;
  width:0%;
  border-radius: 999px;
  background: rgba(196,75,4,.95);
  transition: width .25s ease;
}

#screen-simulados .sim-timer-pill{
  font-weight: 900;
  border: 1px solid var(--sim-border);
  background: var(--sim-surface);
  padding: 8px 10px;
  border-radius: var(--sim-radius);
  white-space: nowrap;
  min-width: 86px;
  text-align: center;
}
:root.light #screen-simulados .sim-timer-pill{
  background: rgba(0,0,0,.03);
}

/* ---------- Questão / head ---------- */
#screen-simulados .sim-q-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom:10px;
}

#screen-simulados .sim-enunciado{
  font-size:14px;
  line-height:1.45;
  margin-bottom:14px;
}

/* ---------- Alternativas (flashcard elegante) ---------- */
#screen-simulados .sim-alts{
  display:grid;
  gap:10px;
}

#screen-simulados .sim-alt{
  display:block;
  cursor:pointer;
}
#screen-simulados .sim-alt input{ display:none; }

#screen-simulados .sim-alt-body{
  display:grid;
  grid-template-columns: 34px 1fr;
  gap:12px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: var(--sim-radius-lg);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
:root.light #screen-simulados .sim-alt-body{
  border-color: rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
}

#screen-simulados .sim-alt:hover .sim-alt-body{
  transform: translateY(-1px);
  border-color: rgba(196,75,4,.35);
  background: rgba(196,75,4,.06);
}

/* selecionada (via input checked) */
#screen-simulados .sim-alt input:checked + .sim-alt-body{
  border-color: rgba(196,75,4,.65);
  box-shadow: 0 0 0 3px rgba(196,75,4,.14);
  background: rgba(196,75,4,.08);
}

#screen-simulados .sim-alt-letter{
  width:34px;
  height:34px;
  border-radius: var(--sim-radius);
  display:grid;
  place-items:center;
  font-weight: 900;
  background: rgba(196,75,4,.12);
  border: 1px solid rgba(196,75,4,.35);
}

/* ---------- Ações ---------- */
#screen-simulados .sim-actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  margin-top:14px;
  flex-wrap: wrap;
}
@media (max-width: 520px){
  #screen-simulados .sim-actions > button{ flex:1; }
}

/* ---------- Disabled ---------- */
#screen-simulados button:disabled{
  opacity: .45;
  cursor: not-allowed;
}

/* ---------- Revisão ---------- */
#screen-simulados .sim-review-item{
  padding: 12px;
  border-radius: var(--sim-radius-lg);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  margin-top: 10px;
}
#screen-simulados .sim-review-item.ok{ border-color: rgba(0,200,120,.25); }
#screen-simulados .sim-review-item.bad{ border-color: rgba(255,70,70,.25); }

#screen-simulados .sim-review-exp{
  margin-top:10px;
  padding: 10px 12px;
  border-radius: var(--sim-radius-lg);
  border: 1px solid rgba(196,75,4,.30);
  background: rgba(196,75,4,.08);
  font-size: 12.5px;
  line-height: 1.4;
  opacity: .96;
}

/* ---------- Badge de status (sim-mode) ---------- */
#sim-mode{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: var(--sim-radius);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.88);
}
:root.light #sim-mode{
  border-color: rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
  color: rgba(0,0,0,.80);
}
#sim-mode[data-mode="running"]{
  border-color: rgba(196,75,4,.35);
  background: rgba(196,75,4,.10);
}
#sim-mode[data-mode="result"]{
  border-color: rgba(0,200,120,.35);
  background: rgba(0,200,120,.10);
}

/* =========================================================
   MODAL CONFIG — padrão Liora (escopo no #sim-config)
========================================================= */

#sim-config.modal{ z-index: 9999; }

#sim-config .modal-backdrop{
  background: rgba(0,0,0,.55);
}
:root.light #sim-config .modal-backdrop{
  background: rgba(0,0,0,.35);
}

#sim-config .modal-card{
  max-width: 720px;
  margin: 8vh auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
}

#sim-config .modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
:root.light #sim-config .modal-head{
  border-bottom: 1px solid rgba(0,0,0,.06);
}

#sim-config .modal-title{
  font-weight: 900;
  font-size: 14px;
  letter-spacing: -0.2px;
}

#sim-config .modal-body{
  margin: 12px 0 14px;
  display:grid;
  gap:12px;
}

#sim-config .grid-2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
@media (max-width: 700px){
  #sim-config .grid-2{ grid-template-columns: 1fr; }
}

#sim-config .input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  outline:none;
}
:root.light #sim-config .input{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.02);
}

#sim-config .input:focus{
  border-color: rgba(196, 75, 4, 0.65);
  box-shadow: 0 0 0 3px rgba(196, 75, 4, 0.22);
}

#sim-config .modal-foot{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding-top:10px;
  border-top: 1px solid rgba(255,255,255,.06);
}
:root.light #sim-config .modal-foot{
  border-top: 1px solid rgba(0,0,0,.06);
}

/* força botões do modal com radius padrão */
#sim-config .btn-primary,
#sim-config .btn-secondary,
#sim-config .btn-outline,
#sim-config .btn-ghost{
  border-radius: 14px;
  padding: 10px 12px;
}
/* ✅ PATCH FINAL — garante botões do Simulados com cara do app */
#screen-simulados .btn-primary,
#screen-simulados .btn-outline,
#screen-simulados .btn-secondary,
#screen-simulados .btn-ghost{
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 800;
}

#screen-simulados .sim-cta button{
  min-height: 40px;
}
/* =========================================================
   LIORA — PATCH MINIMO (Simulados)
   - btn-outline compatível (alias do secondary)
   - modal básico garantido
========================================================= */

/* 1) Compat: alguns módulos usam btn-outline */
.btn-outline{
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* 2) Modal base (caso algum modal venha sem CSS completo) */
.modal{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.modal.open{ display: block; }

.modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

.modal-card{
  position: relative;
  width: min(720px, 92vw);
  margin: 8vh auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
}
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.dash-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 720px){ .dash-grid, .dash-grid-2 { grid-template-columns: 1fr; } }

.dash-card { border: 1px solid rgba(0,0,0,.08); border-radius: 14px; padding: 12px; background: rgba(255,255,255,.6); }
.dash-title { font-weight: 700; font-size: 13px; }
.dash-value { font-weight: 900; font-size: 22px; margin-top: 6px; }
.dash-sub { margin-top: 6px; font-size: 12px; }

.dash-locked { position: relative; opacity: .85; filter: saturate(.7); }
.dash-lock { position: absolute; top: 10px; right: 10px; font-size: 12px; padding: 4px 8px; border-radius: 999px; background: rgba(0,0,0,.06); }

.dash-list { margin-top: 10px; display: grid; gap: 10px; }
.dash-row { display:flex; align-items:center; justify-content:space-between; gap: 10px; }
.dash-row-title { font-weight: 800; font-size: 13px; }
.dash-row-sub { font-size: 12px; }
.dash-row-metric { font-weight: 900; }

.dash-card.good { border-color: rgba(0,150,60,.20); }
.dash-card.ok { border-color: rgba(0,120,200,.20); }
.dash-card.warn { border-color: rgba(200,120,0,.25); }
/* ================================
   DASHBOARD — CONTRASTE (DARK/LIGHT)
   Cola no final do CSS
================================= */

/* Base: cards mais legíveis */
#screen-dashboard .dash-card{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
}

/* Dark theme: fundo "vidro escuro" + texto claro */
html.dark #screen-dashboard .dash-card{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}

html.dark #screen-dashboard .dash-title{
  color: rgba(255,255,255,.82);
}

html.dark #screen-dashboard .dash-value{
  color: rgba(255,255,255,.96);
}

html.dark #screen-dashboard .dash-sub,
html.dark #screen-dashboard .muted{
  color: rgba(255,255,255,.70);
}

/* Locked: não “apaga” tudo, só deixa um blur/opacity suave */
html.dark #screen-dashboard .dash-card.dash-locked{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}

html.dark #screen-dashboard .dash-card.dash-locked .dash-title,
html.dark #screen-dashboard .dash-card.dash-locked .dash-sub{
  opacity: .65;
}

/* 🔥 Tons (good/ok/warn) sem destruir contraste: usa borda + leve brilho */
html.dark #screen-dashboard .dash-card.good{
  border-color: rgba(34,197,94,.35);
  box-shadow: 0 0 0 1px rgba(34,197,94,.10) inset;
}

html.dark #screen-dashboard .dash-card.ok{
  border-color: rgba(59,130,246,.30);
  box-shadow: 0 0 0 1px rgba(59,130,246,.08) inset;
}

html.dark #screen-dashboard .dash-card.warn{
  border-color: rgba(245,158,11,.35);
  box-shadow: 0 0 0 1px rgba(245,158,11,.10) inset;
}

/* Light theme: mantém clean */
html.light #screen-dashboard .dash-card{
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.08);
  color: rgba(0,0,0,.90);
}
html.light #screen-dashboard .dash-sub,
html.light #screen-dashboard .muted{
  color: rgba(0,0,0,.60);
}
/* ================================
   DASHBOARD — LAYOUT (desktop melhor)
================================= */

/* Dá mais largura e centraliza o conteúdo */
#screen-dashboard .panel{
  max-width: 820px;
  margin: 0 auto 14px auto;
}

/* Head mais alinhado e com respiro */
#screen-dashboard .screen-head{
  max-width: 820px;
  margin: 0 auto;
}

/* Grids: auto-fit para preencher melhor */
#screen-dashboard .dash-grid{
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

/* Insights e Tables: dois blocos por linha quando couber */
#screen-dashboard .dash-grid-2{
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* Cards: padding um pouco maior e altura mais “arrumada” */
#screen-dashboard .dash-card{
  padding: 12px 12px;
  min-height: 86px;
}

#screen-dashboard .dash-value{
  font-size: 20px;
  line-height: 1.15;
}

/* Em telas grandes, 3 colunas “bonitas” nos KPIs */
@media (min-width: 980px){
  #screen-dashboard #dash-kpis{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* ================================
   DASHBOARD — POLIMENTO FINAL
================================= */

/* KPIs: deixa o grid mais “compacto” visualmente */
@media (min-width: 980px){
  #screen-dashboard #dash-kpis{
    gap: 12px;
    align-items: stretch;
  }

  /* "Tipos" não precisa ser um card alto: reduz altura mínima */
  #screen-dashboard #dash-kpis .dash-card{
    min-height: 84px;
  }
}

/* Ajuste fino de tipografia: mais hierarquia */
#screen-dashboard .dash-title{
  font-size: 12px;
  letter-spacing: .2px;
}

#screen-dashboard .dash-value{
  font-size: 22px;
  font-weight: 700;
}

#screen-dashboard .dash-sub{
  font-size: 12px;
  margin-top: 6px;
}

/* "Tipos": deixa a leitura mais clara (OBJ e DISC) */
#screen-dashboard #dash-kpis .dash-card:nth-last-child(1) .dash-sub{
  opacity: .9;
}
/* Premium cards: travado mas legível */
html.dark #screen-dashboard .dash-card.dash-locked{
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.10);
}

html.dark #screen-dashboard .dash-card.dash-locked .dash-title{
  opacity: .78;
}

html.dark #screen-dashboard .dash-card.dash-locked .dash-sub{
  opacity: .72;
}

/* Selo Premium mais visível e alinhado */
html.dark #screen-dashboard .dash-card.dash-locked .dash-lock{
  opacity: .85;
  font-size: 12px;
}
/* Tone OK (ex: "Foco atual"): glow suave */
html.dark #screen-dashboard .dash-card.ok{
  border-color: rgba(59,130,246,.22);
  box-shadow:
    0 0 0 1px rgba(59,130,246,.08) inset,
    0 8px 24px rgba(0,0,0,.25);
}
/* KPIs — spacers invisíveis para fechar grid 3 colunas */
#screen-dashboard .dash-spacer{
  display: none;
}

/* Só aparece em desktop (>=980px), mas invisível mesmo assim */
@media (min-width: 980px){
  #screen-dashboard #dash-kpis .dash-spacer{
    display: block;
    visibility: hidden;
    height: 0;
    padding: 0;
    margin: 0;
    border: 0;
  }

  /* Deixa o último KPI ("Tipos") mais baixo (mini-card) */
  #screen-dashboard #dash-kpis .dash-card:last-of-type{
    min-height: 68px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
/* ================================
   DASHBOARD — POLIMENTO VISUAL (Opção A)
   Cola no final do CSS
================================= */

/* Card Tipos: mais compacto e “badge-like” */
@media (min-width: 980px){
  #screen-dashboard #dash-kpis .dash-card:last-of-type{
    min-height: 64px;
    padding: 10px 12px;
  }
  #screen-dashboard #dash-kpis .dash-card:last-of-type .dash-value{
    font-size: 18px;
  }
  #screen-dashboard #dash-kpis .dash-card:last-of-type .dash-sub{
    margin-top: 4px;
    font-size: 11px;
    opacity: .8;
  }
}

/* Selo Premium: padroniza no canto superior direito */
#screen-dashboard .dash-card{
  position: relative;
}

#screen-dashboard .dash-card.dash-locked .dash-lock{
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 12px;
  opacity: .85;
}

/* Foco atual: evita quebra feia e mantém hierarquia */
#screen-dashboard .dash-card.ok .dash-value{
  font-size: 20px;
  line-height: 1.15;
  word-break: keep-all;
}
/* Card Tipos: mini-card garantido (sem depender de posição no DOM) */
@media (min-width: 980px){
  #screen-dashboard #dash-kpis .dash-card.dash-kpi-types{
    min-height: 64px;
    padding: 10px 12px;
  }
  #screen-dashboard #dash-kpis .dash-card.dash-kpi-types .dash-value{
    font-size: 18px;
  }
  #screen-dashboard #dash-kpis .dash-card.dash-kpi-types .dash-sub{
    margin-top: 4px;
    font-size: 11px;
    opacity: .8;
  }
}
#screen-dashboard #dash-kpis .dash-card{
  overflow: hidden;
}

#screen-dashboard #dash-kpis .dash-sub{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
/* ================================
   MODAL PREMIUM (Upgrade)
================================= */
.liora-modal.hidden{ display:none; }

.liora-modal{
  position: fixed;
  inset: 0;
  z-index: 99999;
}

.liora-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}

.liora-modal-card{
  position: relative;
  width: min(560px, calc(100vw - 32px));
  margin: 10vh auto 0 auto;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(20,20,24,.92);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  padding: 14px;
}

html.light .liora-modal-card{
  background: rgba(255,255,255,.95);
  border-color: rgba(0,0,0,.12);
}

.liora-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.liora-modal-title{
  font-weight: 800;
  font-size: 16px;
}

.liora-modal-sub{
  margin-top: 2px;
  font-size: 12px;
}

.liora-modal-body{
  margin-top: 10px;
}

.liora-modal-list{
  margin: 0;
  padding-left: 18px;
}

.liora-modal-list li{
  margin: 8px 0;
}

.liora-modal-note{
  margin-top: 10px;
  font-size: 12px;
  opacity: .85;
}

.liora-modal-actions{
  margin-top: 14px;
  display:flex;
  justify-content: flex-end;
  gap: 10px;
}

/* impede scroll do fundo quando modal abre */
body.liora-modal-open{
  overflow: hidden;
}
/* NAV ativo */
[data-nav].is-active {
  outline: 2px solid rgba(196, 75, 4, 0.55);
  border-radius: 12px;
}
/* ---------------------------------------------
   PILL (badge) — base neutra (não flutua sozinha)
--------------------------------------------- */
.pill{
  position: static;
  display: inline-flex;
  align-items: center;

  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;
  padding: 6px 10px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.88);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  pointer-events: none;
}

/* tema claro */
.light .pill{
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.04);
  color: rgba(0,0,0,.72);
}

/* ---------------------------------------------
   PILL ABSOLUTA: somente em card da HOME
   (onde existe position:relative)
--------------------------------------------- */
.card-btn{ position: relative; }

.card-btn > .pill{
  position: absolute;
  top: 12px;
  right: 12px;
}

/* =========================================================
   HOME CARDS — DE LUXE (override mínimo)
   Cole no FINAL do CSS
========================================================= */

.card-btn{
  transition:
    transform .14s ease,
    box-shadow .14s ease,
    border-color .14s ease,
    background .14s ease,
    opacity .14s ease;
}

/* hover: um pouco mais “vivo” */
.card-btn:hover{
  transform: translateY(-2px);
  opacity: 1;
  border-color: rgba(255,255,255,.18);
  background: color-mix(in srgb, var(--card) 92%, white 8%);
  box-shadow: 0 14px 40px rgba(0,0,0,.26);
}

:root.light .card-btn:hover{
  border-color: rgba(0,0,0,.16);
  background: color-mix(in srgb, var(--card) 92%, black 8%);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
}

/* foco teclado: acessível e bonito */
.card-btn:focus-visible{
  outline: none;
  border-color: rgba(196,75,4,.55);
  box-shadow:
    0 0 0 3px rgba(196,75,4,.18),
    var(--shadow);
}

/* active (rota atual) */
.card-btn.is-active,
.card-btn[aria-current="page"]{
  border-color: rgba(196,75,4,.55);
  background: color-mix(in srgb, var(--card) 90%, var(--brand) 10%);
  box-shadow:
    0 0 0 3px rgba(196,75,4,.12),
    0 18px 54px rgba(0,0,0,.34);
  transform: translateY(-1px);
}

/* active reforça pill */
.card-btn.is-active .pill,
.card-btn[aria-current="page"] .pill{
  border-color: rgba(196,75,4,.45);
  background: rgba(196,75,4,.14);
  color: rgba(196,75,4,.95);
}
/* ============================================
   💳 PRICING — alinhamento dos botões (fix)
   Evita o "Ver benefícios" escapar do card
============================================ */
#screen-pricing .actions-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: stretch;
}

#screen-pricing .actions-row .btn-primary,
#screen-pricing .actions-row .btn-secondary{
  width: 100%;
  min-width: 0;
}

/* Em telas menores, empilha */
@media (max-width: 560px){
  #screen-pricing .actions-row{
    grid-template-columns: 1fr;
  }
}
/* ============================================
   💳 PRICING — layout mais "produto" (sem emojis)
============================================ */
#screen-pricing .screen-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

#screen-pricing .screen-title{
  margin: 0;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

#screen-pricing .screen-subtitle{
  margin-top: 6px;
  opacity: .86;
}

/* cards lado a lado com altura consistente */
#screen-pricing .dash-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

@media (max-width: 720px){
  #screen-pricing .dash-grid{
    grid-template-columns: 1fr;
  }
}

/* card visual mais limpo */
#screen-pricing .dash-card{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 16px;
}

/* destaca Premium com elegância */
#screen-pricing .dash-card.good{
  border-width: 2px !important;
  box-shadow: 0 16px 50px rgba(0,0,0,.25);
}

/* lista com respiro melhor */
#screen-pricing .dash-list .dash-row{
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
#screen-pricing .dash-list .dash-row:first-child{
  border-top: 0;
}

/* ✅ botões alinhados e sem "fuga" */
#screen-pricing .actions-row{
  margin-top: auto; /* empurra botões pro fim do card */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: stretch;
}

#screen-pricing .actions-row .btn-primary,
#screen-pricing .actions-row .btn-secondary{
  width: 100%;
  min-width: 0;
}

@media (max-width: 560px){
  #screen-pricing .actions-row{
    grid-template-columns: 1fr;
  }
}

/* opcional: deixa o botão secundário mais "quieto" */
#screen-pricing .actions-row .btn-secondary{
  opacity: .92;
}
#screen-pricing .actions-row .btn-secondary:hover{
  opacity: 1;
}
/* =========================================================
   PRICING — Cards lado a lado (3 colunas)
   Cole no FINAL do style.css
========================================================= */

#screen-pricing .pricing-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 14px;
  align-items: stretch;
}

/* Se a largura apertar, cai para 1 coluna */
@media (max-width: 920px){
  #screen-pricing .pricing-grid{
    grid-template-columns: 1fr;
  }
}

#screen-pricing .pricing-card{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 18px 60px rgba(0,0,0,.20);
}

#screen-pricing .pricing-top{
  display: grid;
  gap: 6px;
}

#screen-pricing .pricing-title{
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

#screen-pricing .pricing-price{
  font-size: 28px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.02em;
}

#screen-pricing .pricing-sub{
  font-size: 13px;
  opacity: .82;
}

#screen-pricing .pricing-list{
  display: grid;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}

#screen-pricing .pricing-item{
  font-size: 13px;
  opacity: .92;
}

#screen-pricing .pricing-actions{
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

#screen-pricing .pricing-actions .btn-primary,
#screen-pricing .pricing-actions .btn-secondary{
  width: 100%;
}

/* Card recomendado */
#screen-pricing .pricing-featured{
  border-width: 2px;
  background: rgba(255,255,255,.045);
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
}

#screen-pricing .pricing-badge{
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
}

/* Opcional: dá um “respiro” no painel do pricing */
#screen-pricing .panel{
  overflow: visible;
}
/* =========================================================
   PRICING — evita "Vitalício órfão"
   Cole no FINAL do style.css
========================================================= */

/* dá mais largura útil ao conteúdo do pricing */
#screen-pricing .panel{
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* grid: 3 colunas quando couber, senão quebra de forma previsível */
#screen-pricing .pricing-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

/* em larguras médias, 2 colunas (fica bonito e sem órfão) */
@media (max-width: 1080px){
  #screen-pricing .pricing-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* mobile: 1 coluna */
@media (max-width: 740px){
  #screen-pricing .pricing-grid{
    grid-template-columns: 1fr;
  }
}
/* =========================================
   FIX: Pill "Premium" não pode ser absoluto
   ========================================= */

/* garante alinhamento bonitinho no header */
.header-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
/* =========================================================
   ✅ FIX MODAL (SIMULADOS) NO MOBILE
   - Mantém header e footer visíveis
   - Corpo rola com scroll
   ========================================================= */

@media (max-width: 520px) {
  /* garante que o modal ocupa a tela e centraliza */
  .modal {
    padding: 14px;
  }

  /* limita a altura do card */
  .modal-card {
    width: 100%;
    max-width: 100%;
    max-height: 88vh;      /* <<< chave do fix */
    display: flex;
    flex-direction: column;
    overflow: hidden;       /* evita "vazar" */
  }

  /* header e footer fixos dentro do card */
  .modal-head,
  .modal-foot {
    flex: 0 0 auto;
    position: sticky;
    z-index: 2;
    background: inherit;
  }
  .modal-head { top: 0; }
  .modal-foot { bottom: 0; }

  /* corpo vira área rolável */
  .modal-body {
    flex: 1 1 auto;
    overflow: auto;         /* <<< scroll aqui */
    -webkit-overflow-scrolling: touch;
    padding-bottom: 14px;   /* respiro antes do footer */
  }

  /* campos um pouco mais compactos no mobile */
  .modal-body .input,
  .modal-body select,
  .modal-body input {
    font-size: 16px;        /* evita zoom do iOS */
  }
}
/* =========================================================
   ✅ FIX DEFINITIVO: Modal SIM Config (mobile)
   - Garante scroll no body (min-height:0 + overflow)
   - Usa 100dvh (corrige teclado/mobile)
   - Footer sempre visível
   ========================================================= */

#sim-config {
  position: fixed;
  inset: 0;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 520px) {
  /* usa viewport dinâmica (teclado no mobile) */
  #sim-config {
    height: 100dvh;
    padding: 12px;
  }

  /* card vira coluna com área rolável */
  #sim-config .modal-card {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 24px);
    display: flex;
    flex-direction: column;

    overflow: hidden; /* importante: scroll fica no body */
    min-height: 0;    /* <<< chave para scroll funcionar em flex */
  }

  /* header e footer não encolhem */
  #sim-config .modal-head,
  #sim-config .modal-foot {
    flex: 0 0 auto;
  }

  /* corpo rola */
  #sim-config .modal-body {
    flex: 1 1 auto;
    min-height: 0;                 /* <<< chave para scroll funcionar */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }

  /* fixa o footer no fim (dentro do card) */
  #sim-config .modal-foot {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background: inherit;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  /* evita zoom do iOS ao focar em inputs */
  #sim-config .modal-body .input,
  #sim-config .modal-body input,
  #sim-config .modal-body select,
  #sim-config .modal-body textarea {
    font-size: 16px;
  }
}