/* =============================================================
   LIORA — PREMIUM HYBRID UI (C3)
   Versão Consolidada v79-PREMIUM-C10
   Tema escuro (padrão) + Claro (html.light)
   UI moderna, limpa, responsiva
============================================================= */

/* --------------------------------------------------------------
   🌑 TEMA ESCURO — PADRÃO
-------------------------------------------------------------- */
:root {
  --brand: #c44b04;
  --fg: #ffffff;
  --bg: #0b0b0b;
  --bg2: #141414;
  --card: #181818;
  --hover: #1f1f1f;
  --border: #2a2a2a;
  --muted: #bcbcbc;
  --radius: 14px;
  --shadow: 0 4px 16px rgba(0,0,0,0.4);
  --transition: 0.25s ease;
}

/* --------------------------------------------------------------
   🌞 TEMA CLARO — html.light (ajustado para paleta Liora)
-------------------------------------------------------------- */
html.light {
  --fg: #1b120c;
  --bg: #f7f3ec;
  --bg2: #fffaf5;
  --card: #ffffff;
  --hover: #f1e4d8;
  --border: #e1d5c6;
  --muted: #7b6a5d;
  --shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* --------------------------------------------------------------
   RESET GLOBAL
-------------------------------------------------------------- */
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  transition: background .3s ease, color .3s ease;
}

.hidden { display: none !important; }

/* --------------------------------------------------------------
   BOTÕES
-------------------------------------------------------------- */
.btn,
.btn-primary {
  background: var(--brand);
  color: #fff;
  padding: 0.75rem 1.2rem;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn:hover,
.btn-primary:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.btn-primary:disabled {
  opacity: .6;
  cursor: default;
  transform: none;
}

/* Estado desabilitado dos botões do Wizard */
#liora-btn-voltar[disabled],
#liora-btn-proxima[disabled] {
  background: var(--border);
  color: var(--muted);
  cursor: default !important;
  opacity: 0.55;
  transform: none;
  box-shadow: none;
}

#liora-btn-voltar[disabled]:hover,
#liora-btn-proxima[disabled]:hover {
  transform: none;
  filter: none;
}

/* Botão secundário */
.btn-secondary {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
}

.btn-secondary:hover {
  background: var(--hover);
  border-color: var(--brand);
}

/* --------------------------------------------------------------
   INPUTS
-------------------------------------------------------------- */
input, select {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius);
  width: 100%;
  transition: var(--transition);
}

input:focus, select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(196,75,4,.35);
}

/* --------------------------------------------------------------
   UPLOAD (PDF)
-------------------------------------------------------------- */
.upload-zone {
  border: 2px dashed var(--brand);
  background: rgba(196, 75, 4, 0.05);
  padding: 1.2rem;
  border-radius: var(--radius);
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  position: relative;
}

.upload-zone:hover {
  background: rgba(196,75,4,0.12);
}

.upload-zone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

#upload-text {
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#upload-text.has-file {
  color: var(--brand);
  font-weight: 600;
}

/* Spinner */
#upload-spinner {
  display: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top: 3px solid var(--brand);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------
   PROGRESS BAR
-------------------------------------------------------------- */
.liora-progress {
  height: 8px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.liora-progress__bar {
  height: 100%;
  width: 0%;
  background: var(--brand);
  transition: width .3s ease;
}

/* --------------------------------------------------------------
   NOVO LAYOUT DOS CHIPS (SESSÕES) — AJUSTADO
-------------------------------------------------------------- */
#plano,
.liora-plano-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-bottom: 20px;
}

/* chip base */
.liora-card-topico {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: all .25s ease;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* hover */
.liora-card-topico:hover {
  background: var(--hover);
  border-color: var(--brand);
}

/* ativo */
.liora-card-topico.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 600;
  transform: translateY(-1px);
}

/* remover marcadores antigos */
.liora-card-topico::after {
  content: none !important;
}

/* responsividade */
@media (max-width: 780px) {
  #plano,
  .liora-plano-wrapper {
    justify-content: flex-start;
  }
  .liora-card-topico {
    font-size: 0.88rem;
    padding: 7px 14px;
  }
}

@media (max-width: 520px) {
  #plano,
  .liora-plano-wrapper {
    justify-content: center;
  }
  .liora-card-topico {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* --------------------------------------------------------------
   WIZARD PREMIUM
-------------------------------------------------------------- */
.liora-wizard-card {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 40px 48px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 40px auto 60px;
  max-width: 980px;
  transition: opacity .25s ease, transform .25s ease;
  opacity: 0;
  transform: translateY(10px);
}
.liora-wizard-card.visible {
  opacity: 1;
  transform: translateY(0);
}

#liora-sessao-titulo {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 14px;
}

#liora-sessao-objetivo {
  background: var(--bg2);
  padding: 14px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  color: var(--muted);
  margin-bottom: 28px;
}

/* Títulos de seção */
.liora-wizard-section > h5 {
  color: var(--fg);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.05rem;
  margin-top: 32px;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
  border-left: 4px solid var(--brand);
  padding-left: 8px;
}

/* Conteúdo */
#liora-sessao-conteudo strong,
#liora-sessao-conteudo b {
  color: var(--brand);
  font-weight: 700;
  margin-top: 16px;
  margin-bottom: 6px;
}

#liora-sessao-conteudo p,
#liora-sessao-conteudo li {
  color: var(--fg);
  font-size: 1.05rem;
  margin-bottom: 10px;
  line-height: 1.7;
}

#liora-sessao-conteudo ul {
  margin-left: 22px;
  margin-bottom: 16px;
}

/* --------------------------------------------------------------
   QUIZ PREMIUM
-------------------------------------------------------------- */

.liora-quiz-question {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 14px;
  color: var(--fg);
}

.liora-quiz-option {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.liora-quiz-option:hover {
  border-color: var(--brand);
  background: rgba(255,255,255,0.04);
}

.liora-quiz-option input { display: none; }

.liora-quiz-dot {
  position: absolute;
  right: 12px;
  top: 16px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.6;
}

.liora-quiz-option.selected {
  border-color: var(--brand);
  background: rgba(255,140,0,0.08);
}

.liora-quiz-option.correct {
  border-color: #2ecc71 !important;
  background: rgba(46,204,113,0.15) !important;
}
.liora-quiz-option.correct .liora-quiz-dot {
  background: #2ecc71;
  transform: scale(1.2);
  opacity: 1;
}

.liora-quiz-option.incorrect {
  border-color: #e74c3c !important;
  background: rgba(231,76,60,0.15) !important;
}
.liora-quiz-option.incorrect .liora-quiz-dot {
  background: #e74c3c;
  transform: scale(1.2);
  opacity: 1;
}

#liora-sessao-quiz-feedback {
  opacity: 0;
  transition: opacity .25s ease;
  margin-top: 12px;
  font-size: 0.95rem;
}
#liora-sessao-quiz-feedback.fade { opacity: 1 !important; }

/* --------------------------------------------------------------
   FLASHCARDS
-------------------------------------------------------------- */
.liora-flashcards-box {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.liora-flashcard {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 16px 18px;
  border-radius: var(--radius);
  cursor: pointer;
  position: relative;
  transition: all .25s ease;
}

.liora-flashcard:hover {
  background: var(--hover);
  border-color: var(--brand);
}

.liora-flashcard::after {
  content: "▼";
  position: absolute;
  right: 14px;
  top: 18px;
  opacity: .5;
  transition: .25s;
}

.liora-flashcard.open::after {
  transform: rotate(180deg);
  opacity: .9;
}

.liora-flashcard-q {
  font-weight: 600;
  color: var(--fg);
}

.liora-flashcard-a {
  display: none;
  margin-top: 12px;
  color: var(--muted);
}

.liora-flashcard.open {
  background: rgba(196,75,4,0.20);
  border-color: var(--brand);
}

.liora-flashcard.open .liora-flashcard-a {
  display: block;
}

/* --------------------------------------------------------------
   MAPA MENTAL
-------------------------------------------------------------- */
.liora-mindmap-block {
  background: #111;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  white-space: pre-wrap;
  line-height: 1.45;
  color: #eee;
}

/* --------------------------------------------------------------
   MODAL UNIVERSAL (Meus Planos)
-------------------------------------------------------------- */
.liora-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7); /* tiramos o azul/navy */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 60;
}

.liora-modal-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

.liora-modal-panel {
  width: 100%;
  max-width: 640px;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--card);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 20px 40px rgba(0,0,0,0.45);
  transform: translateY(30px);
  transition: transform .25s ease;
}

.liora-modal-backdrop.visible .liora-modal-panel {
  transform: translateY(0);
}

.liora-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  opacity: 0.7;
}

/* Lista */
.liora-plan-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Item de plano — removido azul, usando paleta Liora */
.liora-plan-item {
  text-align: left;
  border-radius: .8rem;
  border: 1px solid var(--border);
  background: var(--card);
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease, border-color .15s ease;
  color: var(--fg);
}

.liora-plan-item:hover {
  background: rgba(196,75,4,0.12);
  border-color: var(--brand);
  transform: translateY(-1px);
}

.liora-plan-item-top {
  display: flex;
  justify-content: space-between;
}

/* --------------------------------------------------------------
   PREMIUM MODAL v6
-------------------------------------------------------------- */
#liora-premium-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity .25s ease;
}

#liora-premium-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

.liora-premium-modal {
  width: 92%;
  max-width: 820px;
  background: var(--bg2);
  border-radius: 1rem;
  padding: 2rem;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(30px);
  transition: transform .25s ease;
}

#liora-premium-backdrop.visible .liora-premium-modal {
  transform: translateY(0);
}

/* Títulos */
.liora-premium-title {
  font-size: 1.6rem;
  font-weight: 700;
}

.liora-premium-subtitle {
  font-size: .95rem;
  opacity: .85;
}

/* Grid */
.liora-premium-content {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2rem;
}
@media (max-width: 720px) {
  .liora-premium-content {
    grid-template-columns: 1fr;
  }
}

/* Cards */
.liora-premium-plan-card {
  background: var(--card);
  border: 1px solid var(--border);
  padding: 1.4rem;
  border-radius: .9rem;
  transition: border-color .25s ease, transform .15s ease, box-shadow .2s ease;
}

.liora-premium-plan-card:hover {
  border-color: var(--brand);
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
  transform: translateY(-2px);
}

/* Tag */
.tag {
  padding: .2rem .55rem;
  border-radius: .4rem;
  font-size: .75rem;
  font-weight: 600;
}

.tag.orange { background: rgba(196,75,4,0.22); color: #ffb14a; }
.tag.green  { background: rgba(0,200,120,0.22); color: #3bd182; }

.btn-premium {
  background: var(--brand);
  color: white;
  padding: .75rem;
  border-radius: .6rem;
}

/* --------------------------------------------------------------
   BUILD INFO
-------------------------------------------------------------- */
#liora-build-info {
  position: fixed;
  bottom: 12px;
  right: 14px;
  font-size: .7rem;
  opacity: .45;
  user-select: none;
}

/* ============================================================
   LIORA — AUTH & PREMIUM MODALS (BLACK GLASS)
   ============================================================ */

.liora-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 9999;
}

.liora-modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.liora-modal {
  position: relative;
  max-width: 420px;
  width: 100%;
  background: radial-gradient(circle at top left, rgba(196, 75, 4, 0.18), transparent 55%),
              radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.04), transparent 60%),
              rgba(12, 12, 12, 0.92);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
  padding: 1.75rem 1.6rem 1.5rem;
  color: var(--fg, #fff);
}

.liora-modal-premium {
  max-width: 620px;
}

.liora-modal-header h2 {
  font-size: 1.4rem;
  margin: 0 0 0.25rem;
}

.liora-modal-header p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted, #bcbcbc);
}

.liora-modal-body {
  margin-top: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.liora-modal-footer {
  margin-top: 1.2rem;
  font-size: 0.8rem;
  color: var(--muted, #bcbcbc);
}

.liora-modal-close {
  position: absolute;
  top: 0.8rem;
  right: 0.9rem;
  border: none;
  background: transparent;
  color: var(--muted, #bcbcbc);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}

.liora-modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* Inputs */

.liora-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.liora-input-group label {
  font-size: 0.85rem;
  color: var(--muted, #bcbcbc);
}

.liora-input-group input {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(10, 10, 10, 0.85);
  padding: 0.65rem 0.9rem;
  color: var(--fg, #fff);
  font-size: 0.95rem;
  outline: none;
  transition: border 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.liora-input-group input::placeholder {
  color: rgba(200, 200, 200, 0.45);
}

.liora-input-group input:focus {
  border-color: var(--brand, #c44b04);
  box-shadow: 0 0 0 1px rgba(196, 75, 4, 0.55);
  background: rgba(8, 8, 8, 0.95);
}

/* Botões */

.liora-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 999px;
  padding: 0.7rem 1.1rem;
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, #c44b04, #ff8a33);
  color: #fff;
  box-shadow: 0 12px 30px rgba(196, 75, 4, 0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.liora-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(196, 75, 4, 0.6);
  filter: brightness(1.03);
}

.liora-btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 8px 22px rgba(196, 75, 4, 0.4);
}

.liora-btn-full {
  width: 100%;
}

/* Loader dentro do botão */

#liora-auth-submit.is-loading .liora-btn-text {
  opacity: 0;
  pointer-events: none;
}

#liora-auth-submit.is-loading .liora-btn-loader {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  animation: liora-spin 0.7s linear infinite;
}

.liora-btn-loader {
  display: inline-block;
  width: 0;
  height: 0;
}

/* Botão link */

.liora-link-btn {
  margin-top: 0.3rem;
  width: 100%;
  text-align: center;
  border: none;
  background: none;
  color: var(--muted, #bcbcbc);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.4rem 0.5rem;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}

.liora-link-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

/* Erros */

.liora-auth-error {
  min-height: 1.1rem;
  font-size: 0.8rem;
  color: #ff7b7b;
}

/* Pill */

.liora-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(196, 75, 4, 0.18);
  color: #ffd6b5;
  margin-bottom: 0.4rem;
}

/* Premium grid */

.liora-premium-grid {
  margin-top: 1.1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}

.liora-premium-card {
  background: rgba(8, 8, 8, 0.9);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0.9rem 0.9rem 0.8rem;
  font-size: 0.9rem;
}

.liora-premium-card h3 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
}

.liora-premium-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.liora-premium-card li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}

.liora-premium-card li::before {
  content: "•";
  font-size: 1.1rem;
  color: var(--brand, #c44b04);
}

.liora-premium-card-highlight {
  border-color: rgba(196, 75, 4, 0.7);
  box-shadow: 0 12px 35px rgba(196, 75, 4, 0.55);
}

/* CTA Premium */

.liora-premium-cta {
  margin-top: 1.2rem;
}

/* Botão do topo */

.liora-auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(10, 10, 10, 0.85);
  color: var(--fg, #fff);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s ease, border 0.2s ease, transform 0.1s ease;
}

.liora-auth-btn:hover {
  background: rgba(20, 20, 20, 0.95);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

/* Avatar mini (quando logado) */

.liora-auth-btn-avatar {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #c44b04, #ffb263);
}

/* Responsivo */

@media (min-width: 640px) {
  .liora-premium-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@keyframes liora-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Correção — Botão Continuar Estudo */
#btn-continuar-estudo,
button.btn-continuar-estudo {
  width: auto !important;
  padding: 0.55rem 1rem !important;
  font-size: 0.9rem !important;
  border-radius: 12px !important;
}

@media (max-width: 480px) {
  #btn-continuar-estudo,
  button.btn-continuar-estudo {
    padding: 0.45rem 0.85rem !important;
    font-size: 0.8rem !important;
  }
}

/* ============================================================
   CORREÇÃO — Botão "Continuar estudo"
   ============================================================ */
#btn-continuar-estudo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

  background: #c44b04;               /* laranja consistente da Liora */
  color: #fff;
  font-size: 0.9rem;                 /* proporcional ao restante */
  font-weight: 600;

  padding: 0.55rem 1.1rem;           /* tamanho ideal */
  border-radius: 12px;               /* combina com seus chips */
  border: none;
  cursor: pointer;

  box-shadow: 0 0 12px rgba(196, 75, 4, 0.45); /* glow leve */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  width: auto !important;
}

#btn-continuar-estudo:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(196, 75, 4, 0.55);
}

#btn-continuar-estudo:active {
  transform: translateY(0);
}

/* Versão mobile — menor */
@media (max-width: 480px) {
  #btn-continuar-estudo {
    font-size: 0.8rem;
    padding: 0.45rem 0.85rem;
    border-radius: 10px;
  }
}

/* ============================================================
   CORREÇÃO — Títulos das sessões
   ============================================================ */

.sessao-titulo,
.sessao h2,
#painel-sessao h2 {
  font-size: 1.4rem !important;     /* antes estava ~2rem */
  font-weight: 700;
  margin-bottom: 0.6rem;
}

@media (max-width: 480px) {
  .sessao-titulo,
  .sessao h2,
  #painel-sessao h2 {
    font-size: 1.2rem !important;
  }
}

/* ============================================================
   SEÇÃO "SEU ESTUDO" — ESTÉTICA PREMIUM
   ============================================================ */

/* Ajuste suave do espaçamento vertical */
.space-y-3 > * + * {
  margin-top: 0.85rem !important;
}

/* Badge de status (acompanhando HTML novo) */
.liora-status-badge,
.space-y-3 span.inline-flex {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 0.2s ease;
}

/* Pulsação do ponto colorido */
@keyframes liora-pulse {
  0% { opacity: 0.25; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.35); }
  100% { opacity: 0.25; transform: scale(1); }
}

.space-y-3 span.inline-flex .animate-pulse {
  animation: liora-pulse 1.3s infinite ease-in-out;
}


/* ============================================================
   BOTÃO — Continuar Estudo (Primário)
   ============================================================ */
.btn-continuar-estudo {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;

  background: var(--brand);
  color: #fff;

  font-size: 0.9rem;
  font-weight: 600;

  padding: 0.55rem 1rem;
  border-radius: 12px;
  border: none;

  cursor: pointer;
  text-align: center;

  box-shadow: 0 0 12px rgba(196, 75, 4, 0.35);
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;

  white-space: nowrap;
}

.btn-continuar-estudo:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 0 20px rgba(196, 75, 4, 0.55);
}

.btn-continuar-estudo:active {
  transform: translateY(0);
  box-shadow: 0 0 10px rgba(196, 75, 4, 0.4);
}

/* Mobile */
@media (max-width: 480px) {
  .btn-continuar-estudo {
    font-size: 0.82rem;
    padding: 0.45rem 0.85rem;
    border-radius: 10px;
  }
}


/* ============================================================
   BOTÃO — Meus Planos (Secundário)
   ============================================================ */
.btn-meus-planos {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;

  background: rgba(255, 255, 255, 0.05);
  color: var(--fg);

  font-size: 0.9rem;
  font-weight: 600;

  padding: 0.5rem 0.9rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);

  cursor: pointer;
  text-align: center;
  white-space: nowrap;

  transition: background 0.15s ease, border 0.15s ease, transform 0.15s ease;
}

.btn-meus-planos:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.28);
  transform: translateY(-1px);
}

.btn-meus-planos:active {
  transform: translateY(0);
}

/* Mobile */
@media (max-width: 480px) {
 .btn-meus-planos {
    font-size: 0.82rem;
    padding: 0.45rem 0.75rem;
    border-radius: 10px;
  }
}


/* ============================================================
   LAYOUT DOS BOTÕES — LADO A LADO NO DESKTOP / EMPILHADOS NO MOBILE
   ============================================================ */

@media (min-width: 640px) {
  .space-y-3 .flex {
    flex-direction: row;
  }
}

@media (max-width: 639px) {
  .space-y-3 .flex {
    flex-direction: column;
  }
}

/* ============================================
   BLOCOS DA ÁREA "SEU ESTUDO"
   ============================================ */

.liora-estudo-bloco {
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  text-align: center;
}

.liora-estudo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.liora-estudo-header h3 {
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

/* Badge */
.liora-estudo-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  font-size: 0.7rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--muted);
}

.liora-estudo-status .ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  animation: estudo-pulse 1.4s infinite ease-in-out;
}

@keyframes estudo-pulse {
  0%   { opacity: 0.3; transform: scale(1); }
  50%  { opacity: 1;   transform: scale(1.35); }
  100% { opacity: 0.3; transform: scale(1); }
}

/* ============================================
   BOTÕES — Centralização perfeita
   ============================================ */

.liora-estudo-acoes {
  display: flex;
  flex-direction: column;  /* MOBILE primeiro: UM EMBAIXO DO OUTRO */
  gap: 0.6rem;
  align-items: center;
}

/* DESKTOP → lado a lado */
@media (min-width: 768px) {
  .liora-estudo-acoes {
    flex-direction: row;
    justify-content: center;
  }
}

/* Corrige botões grandes demais no mobile */
.btn-continuar-estudo,
.btn-meus-planos {
  width: auto;
  min-width: 180px;
}

/* ============================================
   TEXTO DO RESUMO
   ============================================ */

.liora-estudo-resumo {
  margin-top: 0.6rem;
  font-size: 0.75rem;
  color: var(--muted);
  padding: 0 0.4rem;
  text-align: center;
}

/* ============================================
   ÍCONES SVG DOS BOTÕES "SEU ESTUDO"
   ============================================ */

.btn-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
}

.btn-icone svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Icone no botão primário levemente destacado */
.btn-continuar-estudo .btn-icone {
  margin-right: 0.15rem;
}

/* Ícone no botão secundário um tiquinho mais discreto */
.btn-meus-planos .btn-icone {
  margin-right: 0.15rem;
}

.btn-meus-planos .btn-icone {
  border-radius: 999px;
  background: rgba(0,0,0,0.18);
}

/* ============================================================
   AJUSTE FINAL — BOTÃO "ENTRAR" (Modo Claro + Escuro)
   ============================================================ */

html.light .liora-auth-btn {
  background: rgba(255,255,255,0.85);
  color: #55321c;
  border-color: rgba(0,0,0,0.12);
}

html.light .liora-auth-btn:hover {
  background: rgba(255,255,255,1);
  border-color: rgba(0,0,0,0.22);
  transform: translateY(-1px);
}

html.light #btn-entrar,
html.light button#btn-entrar {
  background: #c44b04 !important;
  color: white !important;
}


/* ============================================================
   AJUSTE FINAL — CHIPS DAS SESSÕES (Sessão atual estava maior)
   ============================================================ */

.liora-card-topico {
  font-size: 0.92rem !important;
  padding: 8px 18px !important;
  line-height: 1 !important;
}

.liora-card-topico.active {
  transform: translateY(-1px);
  font-weight: 600 !important;
}

/* Modo claro – suaviza o contraste dos chips */
html.light .liora-card-topico {
  background: #ffffff;
  border-color: #e3d6c7;
  color: #4e3a2a;
}
html.light .liora-card-topico:hover {
  background: #f3e6d9;
  border-color: #c44b04;
}
html.light .liora-card-topico.active {
  background: #c44b04;
  color: #fff;
  border-color: #c44b04;
}

/* ============================================================
   "SEU ESTUDO" — AJUSTES FINAIS DE PROPORÇÃO
   ============================================================ */
.liora-estudo-acoes {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  align-items: center;
  justify-content: center;
}

@media (min-width: 720px) {
  .liora-estudo-acoes {
    flex-direction: row;
  }
}

.btn-continuar-estudo,
.btn-meus-planos {
  min-width: 165px;
  padding: 0.55rem 1.15rem;
  font-size: 0.88rem;
}

@media (max-width: 480px) {
  .btn-continuar-estudo,
  .btn-meus-planos {
    min-width: 130px;
    padding: 0.45rem 0.9rem;
    font-size: 0.8rem;
  }
}


/* ============================================================
   AJUSTE FINAL — TÍTULO DA PRIMEIRA SESSÃO
   (antes parecia maior do que os demais)
   ============================================================ */

#liora-sessao-titulo,
.sessao h2,
#painel-sessao h2 {
  font-size: 1.45rem !important;
  font-weight: 700;
  margin-bottom: 0.7rem;
}

@media (max-width: 480px) {
  #liora-sessao-titulo,
  .sessao h2,
  #painel-sessao h2 {
    font-size: 1.25rem !important;
  }
}


/* ============================================================
   AJUSTE VISUAL DARK MODE PREMIUM v2
   ============================================================ */
:root {
  --bg: #0b0b0b;
  --bg2: #151515;
  --card: #181818;
  --fg: #ffffff;
  --muted: #b9b9b9;
  --border: #272727;
}

/* Toque sutil de textura radial */
body:not(.light) {
  background: radial-gradient(
      circle at top center,
      rgba(196,75,4,0.07),
      transparent 55%
    ),
    var(--bg);
}


/* ============================================================
   AJUSTE VISUAL LIGHT MODE PREMIUM V2
   ============================================================ */
html.light {
  --bg: #f6f1e9;
  --bg2: #ffffff;
  --card: #ffffff;
  --fg: #2e1c12;
  --muted: #7b6a5d;
  --border: #dccbbb;
}

html.light body {
  background: radial-gradient(
      circle at top center,
      rgba(196,75,4,0.08),
      transparent 45%
    ),
    var(--bg);
}

/* ============================================================
   IA AUXILIAR (C3) — Botões de seleção (Dark + Light)
   ============================================================ */

.sim-ia-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;

  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;

  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--fg);

  transition: all .2s ease;
}

/* Ícone dentro do botão */
.sim-ia-btn .icon {
  opacity: 0.55;
  transition: opacity .2s ease;
}

/* HOVER */
.sim-ia-btn:not(.active):hover {
  background: var(--hover);
  border-color: var(--brand);
}

/* ESTADO ATIVO */
.sim-ia-btn.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 4px 16px rgba(196,75,4,0.35);
}

.sim-ia-btn.active .icon {
  opacity: 1;
}

/* ============================================================
   LIGHT MODE — IA AUXILIAR (melhor contraste)
   ============================================================ */

html.light .sim-ia-btn {
  background: #ffffff;
  border-color: #e0d4c4;
  color: #4b3a2a;
}

html.light .sim-ia-btn .icon {
  opacity: 0.45;
}

html.light .sim-ia-btn:hover {
  background: #f4e8db;
  border-color: var(--brand);
}

html.light .sim-ia-btn.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 4px 16px rgba(196,75,4,0.35);
}

html.light .sim-ia-btn.active .icon {
  opacity: 1;
}

/* ============================================================
   UNIFORMIZAÇÃO EXTRA — TÍTULOS DAS SESSÕES
   (garante consistência mesmo com variações da IA)
   ============================================================ */

#liora-sessao-titulo,
#painel-sessao h2,
.sessao h2 {
  font-size: 1.45rem !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}

@media (max-width: 480px) {
  #liora-sessao-titulo,
  #painel-sessao h2,
  .sessao h2 {
    font-size: 1.25rem !important;
  }
}
/* ============================================================
   PATCH — Chips das Sessões (Correção Final)
   ============================================================ */

/* Todos os chips gerados pelo JS no plano */
#plano button,
#plano .liora-card-topico {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  color: var(--fg) !important;

  font-size: 0.92rem !important;
  line-height: 1 !important;

  padding: 8px 18px !important;
  border-radius: 999px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  cursor: pointer !important;
  transition: all 0.25s ease !important;

  max-width: 100% !important;
  white-space: nowrap !important;
}

/* Estado ativo garantido */
#plano button.active,
#plano .liora-card-topico.active {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  transform: translateY(-1px);
  font-weight: 600 !important;
}

/* Hover consistente */
#plano button:hover,
#plano .liora-card-topico:hover {
  background: var(--hover) !important;
  border-color: var(--brand) !important;
}

/* Light Mode refinado */
html.light #plano button,
html.light #plano .liora-card-topico {
  background: #ffffff !important;
  border-color: #e3d6c7 !important;
  color: #4e3a2a !important;
}

html.light #plano button.active,
html.light #plano .liora-card-topico.active {
  background: #c44b04 !important;
  color: #ffffff !important;
  border-color: #c44b04 !important;
}
/* ============================================================
   PATCH — Botões de IA no Simulado (100% aplicável)
   ============================================================ */

.sim-ia-btn,
button.sim-ia,
.sim-modal .sim-ia-btn,
.sim-modal button[data-ia] {
  background: var(--bg2) !important;
  color: var(--fg) !important;
  border: 1px solid var(--border) !important;

  padding: 8px 14px !important;
  border-radius: 10px !important;

  font-size: 0.85rem !important;
  font-weight: 500 !important;

  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;

  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

/* IA ativa */
.sim-ia-btn.active,
button.sim-ia.active,
.sim-modal button[data-ia].active {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

/* IA desligada (legível no modo claro e escuro) */
.sim-ia-btn.off,
button.sim-ia.off,
.sim-modal button[data-ia].off {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
  opacity: 0.6 !important;
}

/* Hover */
.sim-ia-btn:hover:not(.active),
button.sim-ia:hover:not(.active),
.sim-modal button[data-ia]:hover:not(.active) {
  border-color: var(--brand) !important;
  background: rgba(196,75,4,0.12) !important;
}

/* Light Mode */
html.light .sim-ia-btn,
html.light button.sim-ia,
html.light .sim-modal button[data-ia] {
  background: #ffffff !important;
  border-color: #ddcdbf !important;
  color: #4e3a2a !important;
}

html.light .sim-ia-btn.off,
html.light button.sim-ia.off,
html.light .sim-modal button[data-ia].off {
  background: #f2e6d9 !important;
  border-color: #d6c7b7 !important;
  color: #a38975 !important;
  opacity: 0.7 !important;
}
/* ============================================================
   IA AUXILIARES — BOTÕES (sim-ia-option) — FIX REAL v99
   ============================================================ */

.sim-ia-row {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.sim-ia-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
}

.sim-ia-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sim-ia-option {
  background: var(--bg2);
  color: var(--fg);
  border: 1px solid var(--border);

  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 12px;
  border-radius: 10px;

  font-size: 0.83rem;
  font-weight: 500;

  cursor: pointer;
  transition: all 0.25s ease;
}

/* Hover */
.sim-ia-option:hover {
  border-color: var(--brand);
  background: rgba(196, 75, 4, 0.15);
}

/* Ativa */
.sim-ia-option.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  font-weight: 600;
}

/* Inativa (quando iaState remove uma IA) */
.sim-ia-option:not(.active) {
  opacity: 0.75;
}

/* Emoji */
.sim-ia-option .emoji {
  font-size: 1rem;
  line-height: 1;
}
html.light .sim-ia-option {
  background: #ffffff;
  color: #4a3a2d;
  border-color: #decfbe;
}

html.light .sim-ia-option:hover {
  background: #f9efe7;
  border-color: #c44b04;
}

html.light .sim-ia-option.active {
  background: #c44b04;
  color: #fff;
  border-color: #c44b04;
}
/* ============================================================
   Correção — Título da Sessão no Wizard
   ============================================================ */

.liora-wizard-title {
  font-size: 1.1rem !important;
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 1.3;
  color: var(--fg);
}
/* ============================================================
   FIX — Chips das sessões iguais no desktop
   ============================================================ */

.liora-card-topico {
  font-size: 0.90rem !important;
  padding: 8px 18px !important;
  line-height: 1 !important;
}

/* O ativo estava crescendo: anulamos aqui */
.liora-card-topico.active {
  font-size: 0.90rem !important;
  padding: 8px 18px !important;
  transform: translateY(-1px); /* mantém o efeito */
  font-weight: 600 !important;
}

/* Garantia extra: limpa qualquer estilo herdado apenas no primeiro chip */
#plano .liora-card-topico:first-child {
  font-size: 0.90rem !important;
  padding: 8px 18px !important;
}

/* Light mode */
html.light .liora-wizard-title {
  color: #3d2b1f;
}
.liora-estudo-header {
  display: flex;
  justify-content: center; /* centraliza horizontalmente */
  align-items: center;
}

.liora-estudo-header h3 {
  margin: 0 auto; /* reforça o centro */
  text-align: center;
}
.liora-auth-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 0.7rem 1rem;
  border-radius: 12px;
  font-size: 0.78rem;
  margin-top: 1.2rem;
  color: var(--muted);
}

.liora-auth-banner .emoji {
  font-size: 1rem;
  opacity: 0.9;
}