/* ── Aula em cards: stories no celular, slides no computador (traço de adesivo do site) ── */
.lp { --lp-h: calc(100vh - var(--pm-top-h, 72px) - 40px); display: flex; flex-direction: column; gap: 12px;
      height: var(--lp-h); min-height: 460px; max-width: 900px; margin: 0 auto; color: var(--pm-text, #f8f8f2); outline: none; }
.lp-overlay { position: fixed; inset: 0; z-index: 10002; max-width: none; height: 100vh; padding: 14px;
              background: #1e1f2b; }
.lp-overlay > * { width: 100%; max-width: 900px; margin-left: auto; margin-right: auto; }
body.lp-lock { overflow: hidden; }

.lp-top { display: flex; align-items: center; gap: 10px; }
.lp-bar { flex: 1; height: 10px; border-radius: 6px; background: #44475a; border: 2px solid var(--pm-ink, #12121c); overflow: hidden; }
.lp-bar i { display: block; height: 100%; background: var(--pm-yellow, #f1fa8c); transition: width .25s; }
.lp-pos { font-weight: 600; font-size: .85rem; color: var(--pm-muted, #a4a7c4); min-width: 54px; text-align: right; }
.lp-icon { width: 38px; height: 38px; border-radius: 12px; border: 2.5px solid var(--pm-ink, #12121c); background: var(--pm-bar, #282a36);
           color: var(--pm-text, #f8f8f2); cursor: pointer; font-size: 1rem; box-shadow: 0 3px 0 var(--pm-ink, #12121c); }
.lp-icon[hidden] { display: none; }

.lp-index { display: flex; flex-wrap: wrap; gap: 8px; background: var(--pm-bar, #282a36); border: 3px solid var(--pm-ink, #12121c);
            border-radius: 16px; padding: 10px; box-shadow: 0 4px 0 var(--pm-ink, #12121c); max-height: 40vh; overflow-y: auto; }
.lp-index[hidden] { display: none; }
.lp-index button { border: 2px solid rgba(255, 255, 255, .15); background: #383a4f; color: var(--pm-text, #f8f8f2); border-radius: 12px;
                   padding: 6px 12px; cursor: pointer; font-weight: 500; }
.lp-index button:hover { border-color: var(--pm-purple, #bd93f9); }

.lp-stage { flex: 1; min-height: 0; display: flex; }
.lp-card { flex: 1; overflow-y: auto; background: var(--pm-bar, #282a36); border: 3px solid var(--pm-ink, #12121c); border-radius: 24px;
           box-shadow: 0 6px 0 var(--pm-ink, #12121c); padding: 26px 30px; display: flex; flex-direction: column; gap: 12px;
           animation: lp-in .22s ease-out; }
.lp-cover, .lp-final { justify-content: center; align-items: center; text-align: center; }
.lp-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-tag { background: var(--pm-purple, #bd93f9); color: var(--pm-ink, #12121c); border: 2px solid var(--pm-ink, #12121c); border-radius: 10px;
          padding: 2px 10px; font-weight: 700; font-size: .8rem; }
.lp-tag.soft { background: #44475a; color: var(--pm-text, #f8f8f2); border-color: rgba(255, 255, 255, .15); font-weight: 500; }
.lp-title { font-size: 1.9rem; font-weight: 700; line-height: 1.2; margin: 4px 0; color: var(--pm-text, #f8f8f2); border: 0; }
.lp-sub { color: var(--pm-muted, #a4a7c4); margin: 0; }
.lp-heading { font-size: 1.35rem; font-weight: 600; margin: 0; color: var(--pm-text, #f8f8f2); border: 0 !important; padding: 0 !important; }
.lp-body, .lp-more { font-size: 1.08rem; line-height: 1.65; }
.lp-body > :first-child, .lp-more > :first-child { margin-top: 0; }
.lp-media { width: 100%; max-width: 640px; margin: 0 auto; }
.lp-media video { width: 100%; border-radius: 14px; }
/* Vídeos e imagens da aula sempre centralizados no card (o estilo inline da aula não decide o alinhamento) */
.lp-body video, .lp-more video { display: block; width: 100% !important; max-width: 640px !important; margin: 12px auto !important; border-radius: 14px; }
.lp-body img, .lp-more img { display: block; max-width: min(100%, 560px) !important; width: auto !important; max-height: 52vh;
                             margin: 12px auto !important; border-radius: 14px; }
.lp-body p:has(> img:only-child), .lp-body div:has(> video:only-child) { text-align: center; }
.lp-confetti { font-size: 3.2rem; }

.lp-more-btn { align-self: flex-start; border: 2.5px dashed var(--pm-cyan, #8be9fd); background: rgba(139, 233, 253, .08); color: var(--pm-cyan, #8be9fd);
               border-radius: 14px; padding: 8px 14px; font-weight: 600; cursor: pointer; }
.lp-more-btn small { color: var(--pm-muted, #a4a7c4); font-weight: 500; }
.lp-more { border-top: 2px dashed rgba(255, 255, 255, .12); padding-top: 12px; }
.lp-more[hidden] { display: none; }

.lp-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lp-btn { border: 3px solid var(--pm-ink, #12121c); border-radius: 16px; padding: 10px 20px; font-weight: 700; font-size: 1rem; cursor: pointer;
          background: var(--pm-pink, #ff79c6); color: var(--pm-ink, #12121c); box-shadow: 0 4px 0 var(--pm-ink, #12121c);
          text-decoration: none; transition: transform .12s; }
.lp-btn:hover:not(:disabled) { transform: translateY(-2px); }
.lp-btn:disabled { opacity: .35; cursor: default; }
.lp-btn[hidden] { visibility: hidden; display: inline-block; }
.lp-btn.ghost { background: #44475a; color: var(--pm-text, #f8f8f2); }
.lp-btn.big { min-width: 260px; font-size: 1.1rem; }
.lp-link { background: none; border: 0; color: var(--pm-muted, #a4a7c4); text-decoration: underline; cursor: pointer; font-size: .85rem; }

/* Anatomia única do card: cabeçalho (capítulo + posição), título, subtítulo, mídia, fichas, "Quero mais" */
.lp-inner { width: 100%; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.lp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lp-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--pm-purple, #bd93f9); color: var(--pm-ink, #12121c);
           border: 2px solid var(--pm-ink, #12121c); border-radius: 12px; padding: 3px 12px; font-weight: 700; font-size: .85rem; }
.lp-chip.soft { background: #44475a; color: var(--pm-text, #f8f8f2); border-color: rgba(255, 255, 255, .15); }
.lp-chip .pm-ic, .lp-chip img { width: 20px !important; height: 20px !important; margin: 0 !important; display: inline !important; border: 0 !important; }
.lp-count { color: var(--pm-muted, #a4a7c4); font-weight: 600; font-size: .85rem; }
.lp-heading { font-size: 1.6rem; line-height: 1.3; }
.lp-subtitle { margin: -6px 0 0; color: var(--pm-cyan, #8be9fd); font-size: 1.1rem; font-weight: 500; }
.lp-fields { display: grid; gap: 10px; }
.lp-field { background: rgba(255, 255, 255, .04); border: 1.5px solid rgba(255, 255, 255, .08); border-radius: 14px; padding: 10px 14px; }
.lp-label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--pm-yellow, #f1fa8c); margin-bottom: 2px; }
.lp-value { color: var(--pm-text, #f8f8f2); }
.lp-value > :last-child { margin-bottom: 0; }
.lp-body .lp-field, .lp-more .lp-field { margin: 0 0 10px; }

/* Abertura de capítulo */
.lp-chapter { justify-content: center; align-items: center; text-align: center; gap: 10px; }
.lp-chapter-icon { font-size: 4rem; line-height: 1; }
.lp-chapter-icon img, .lp-hero-icon img { width: 96px !important; height: 96px !important; border: 0 !important; margin: 0 auto !important; }

/* Capa com quadro do vídeo */
.lp-cover { justify-content: flex-start; padding-top: 22px; }
.lp-hero { width: 100%; max-width: 480px; margin: 0 auto 6px; }
.lp-hero video, .lp-hero img { display: block; height: min(26vh, 270px) !important; width: auto !important; max-width: 100% !important;
                                aspect-ratio: 16 / 9; object-fit: cover; margin: 0 auto !important;
                                border: 3px solid var(--pm-ink, #12121c) !important; border-radius: 18px; box-shadow: 0 5px 0 var(--pm-ink, #12121c);
                                background: #000; }
.lp-hero-icon { font-size: 5rem; text-align: center; padding: 30px 0; }

/* Edição da aula */
.lp-edit { margin-left: auto; border: 2px solid rgba(255, 255, 255, .18); background: #383a4f; color: var(--pm-text, #f8f8f2);
           border-radius: 10px; padding: 3px 10px; font-weight: 600; font-size: .8rem; cursor: pointer; }
.lp-edit:hover { border-color: var(--pm-yellow, #f1fa8c); }
.lp-head .lp-count + .lp-edit { margin-left: 10px; }
.lp-cover { position: relative; }
.lp-edit-cover { position: absolute; top: 14px; right: 14px; }
.le-overlay { position: fixed; inset: 0; z-index: 10003; background: rgba(18, 18, 28, .78); display: flex; align-items: center; justify-content: center; padding: 16px; }
.le-box { width: 100%; max-width: 900px; height: min(88vh, 820px); display: flex; flex-direction: column; gap: 10px; background: var(--pm-bar, #282a36);
          border: 3px solid var(--pm-ink, #12121c); border-radius: 22px; box-shadow: 0 6px 0 var(--pm-ink, #12121c); padding: 18px; color: var(--pm-text, #f8f8f2); }
.le-box h3 { margin: 0; font-size: 1.2rem; }
.le-hint { margin: 0; color: var(--pm-muted, #a4a7c4); font-size: .85rem; }
.le-box textarea { flex: 1; width: 100%; resize: none; background: #1e1f2b; color: var(--pm-text, #f8f8f2); border: 2px solid rgba(255, 255, 255, .12);
                   border-radius: 14px; padding: 14px; font: 15px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.le-box textarea:focus { outline: none; border-color: var(--pm-purple, #bd93f9); }
.le-error { color: #ff6e6e; font-weight: 600; min-height: 1.2em; margin: 0; }
.le-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.le-actions .lp-link { margin-right: auto; }

/* Volta da página para os cards */
.lp-back { display: inline-flex; margin-bottom: 14px; }

/* Capa compacta no chat */
.lp-chat-cover { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 14px; }

@media (max-width: 768px) {
  /* Ações da aula (voltar, PDF, Anki, compartilhar) em 2x2 compacto para sobrar tela para os cards */
  .view-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px !important; padding: 8px !important; margin-bottom: 10px !important; }
  .view-actions .btn-action { width: auto !important; padding: 6px 8px !important; font-size: .82rem !important; min-height: 0 !important; }
  .lp { --lp-h: calc(100vh - var(--pm-top-h, 62px) - 120px); min-height: 340px; }
  .lp-overlay { height: 100dvh; padding: 10px; }
  .lp-card { padding: 20px 18px; border-radius: 20px; }
  .lp-title { font-size: 1.5rem; }
  .lp-heading { font-size: 1.3rem; }
  .lp-hero video, .lp-hero img { height: auto !important; width: 100% !important; max-height: 28vh; }
  .lp-body, .lp-more { font-size: 1.02rem; }
  .lp-btn.big { min-width: 0; width: 100%; }
}
/* Laboratório de testes: uma questão por card */
.lp-quiz { display: flex; flex-direction: column; gap: 14px; }
.lp-quiz-kind { margin: 0; font-size: .85rem; color: #bd93f9; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.lp-quiz-prompt { line-height: 1.8; }
.lp-blank { font: inherit; color: #f1fa8c; background: rgba(0,0,0,.25); border: 0; border-bottom: 3px dashed #bd93f9;
            border-radius: 6px 6px 0 0; padding: 0 6px; margin: 0 4px; text-align: center; min-width: 5ch; max-width: 100%; }
.lp-blank:focus, .lp-answer:focus { outline: 2px solid #8be9fd; }
.lp-answer { font: inherit; font-size: 1.05rem; color: var(--pm-text, #f8f8f2); background: rgba(0,0,0,.25); resize: vertical;
             border: 2px solid rgba(255,255,255,.18); border-radius: 12px; padding: 10px 12px; }
.lp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-chip-opt { border: 2px solid var(--pm-ink, #12121c); background: #44475a; color: var(--pm-text, #f8f8f2); border-radius: 12px;
               padding: 8px 14px; font-size: 1rem; cursor: pointer; box-shadow: 0 3px 0 var(--pm-ink, #12121c); }
.lp-chip-opt:hover:not(:disabled) { background: #6272a4; }
.lp-chip-opt:disabled { opacity: .35; cursor: default; }
.lp-chip-opt.ghost { background: transparent; box-shadow: none; border-color: rgba(255,255,255,.2); }
.lp-quiz-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.lp-quiz-feedback { border-radius: 14px; padding: 12px 14px; background: rgba(255,255,255,.06); }
.lp-quiz-feedback p { margin: 6px 0 0; color: #bfbfd4; }
.lp-quiz-answer { color: #f1fa8c; font-weight: 600; }
.lp-quiz.ok .lp-quiz-feedback { background: rgba(80,250,123,.15); }
.lp-quiz.ok .lp-blank { border-bottom-color: #50fa7b; color: #50fa7b; }
.lp-quiz.bad .lp-quiz-feedback { background: rgba(255,85,85,.14); }
.lp-quiz.bad .lp-blank { border-bottom-color: #ff5555; }

@keyframes lp-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lp-card { animation: none; } .lp-bar i { transition: none; } }