/* ── 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); overflow-x: clip; 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; position: relative; touch-action: pan-y; }
/* Gestos da aula não disparam o "puxar para atualizar" do celular */
html:has(.lp-stage), body:has(.lp-stage) { overscroll-behavior-y: none; }
.lp-card { --lp-pad-y: 26px; --lp-pad-x: 30px;
           position: relative; 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: var(--lp-pad-y) var(--lp-pad-x); display: flex; flex-direction: column; gap: 12px;
           animation: lp-in .22s ease-out; }
/* Mais conteúdo abaixo: degradê com seta preso no fim do card (some quando chega ao fim) */
.lp-card.lp-has-more::after { content: '⌄'; position: sticky; bottom: calc(-1 * var(--lp-pad-y)); z-index: 1; flex: none; height: 46px;
    margin: -46px calc(-1 * var(--lp-pad-x)) calc(-1 * var(--lp-pad-y)); pointer-events: none; display: flex; align-items: flex-end;
    justify-content: center; padding-bottom: 2px; font-size: 1.3rem; line-height: 1; color: var(--pm-muted, #a4a7c4);
    background: linear-gradient(rgba(40, 42, 54, 0), var(--pm-bar, #282a36) 70%); border-radius: 0 0 21px 21px; }
.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-heading.long { font-size: 1.2rem; line-height: 1.4; }   /* frase analisada comprida */
.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; transition: transform .15s; }
/* Ícones e chips que parecem botões avançam como o "Próximo" */
.lp-tap { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lp-tap:focus-visible { outline: 3px solid var(--pm-yellow, #f1fa8c); outline-offset: 4px; }
.lp-chapter.lp-tap:hover .lp-chapter-icon, .lp-chapter.lp-tap:active .lp-chapter-icon { transform: scale(1.08); }
.lp-chapter.lp-tap:active { transform: translateY(2px); }
.lp-tap-hint { margin-top: 6px; font-size: .9rem; font-weight: 700; color: var(--pm-pink, #ff79c6); }
.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: 640px; margin: 0 auto 6px; }
.lp-hero video, .lp-hero img { display: block; width: 100% !important; height: auto !important; max-height: min(34vh, 360px);
                                aspect-ratio: 16 / 9; object-fit: contain; margin: 0 auto !important;   /* vertical (reels) aparece inteiro, com faixas */
                                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; }
/* Editar da capa fica numa linha própria, acima do vídeo (antes ficava por cima dele no celular) */
.lp-edit-cover { align-self: flex-end; margin: -10px 0 4px; }
.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 .le-spacer { flex: 1; }
/* Editor: cabeçalho com a troca de visão; área que rola; visão simples sem os símbolos do markdown */
.le-top { display: flex; align-items: center; gap: 10px; }
.le-top h3 { flex: 1; min-width: 0; }
.le-mode { flex: none; border: 2px solid rgba(255, 255, 255, .15); background: #383a4f; color: var(--pm-text, #f8f8f2); border-radius: 10px;
           padding: 6px 10px; font-size: .8rem; font-weight: 600; cursor: pointer; }
.le-mode[aria-pressed="true"] { border-color: var(--pm-purple, #bd93f9); color: var(--pm-purple, #bd93f9); }
.le-tools { display: flex; align-items: center; gap: 6px; }
.le-tools[hidden] { display: none; }
.le-tools button { width: 36px; height: 32px; border: 2px solid rgba(255, 255, 255, .15); background: #383a4f; color: var(--pm-text, #f8f8f2);
                   border-radius: 8px; cursor: pointer; font-size: .95rem; }
.le-tip { margin-left: 6px; color: var(--pm-muted, #a4a7c4); font-size: .78rem; }
.le-area { flex: 1; min-height: 0; display: flex; }
.le-area > * { flex: 1; }
.le-simple { overflow-y: auto; background: #1e1f2b; border: 2px solid rgba(255, 255, 255, .12); border-radius: 12px; padding: 12px 14px;
             display: flex; flex-direction: column; gap: 4px; }
.le-row { display: flex; align-items: baseline; gap: 8px; }
.le-row.le-blank { height: 8px; }
.le-row.le-list::before { content: attr(data-bullet); flex: none; min-width: 1.2em; color: var(--pm-purple, #bd93f9); font-weight: 700; }
.le-field { flex: 1; min-width: 0; padding: 4px 6px; border-radius: 6px; line-height: 1.6; outline: none; overflow-wrap: anywhere;
            border: 1px solid transparent; }
.le-field:hover { border-color: rgba(255, 255, 255, .08); }
.le-field:focus { background: rgba(189, 147, 249, .08); border-color: var(--pm-purple, #bd93f9); }
.le-field:empty::before { content: 'Escreva aqui…'; color: var(--pm-muted, #a4a7c4); }
.le-field b { color: #ff79c6; }
.le-heading .le-field { font-size: 1.15rem; font-weight: 700; color: var(--pm-yellow, #f1fa8c); }
.le-media-chip { font-size: .8rem; color: var(--pm-muted, #a4a7c4); border: 1px dashed rgba(255, 255, 255, .2); border-radius: 8px; padding: 4px 8px; }
@media (max-width: 600px) {
  .le-overlay { padding: 0; align-items: stretch; }
  .le-box { height: 100dvh; max-height: none; border-radius: 0; border: 0; padding: 12px; }
  .le-top h3 { font-size: 1rem; }
  .le-tip { display: none; }
}

/* 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; }

/* Barra de ações da aula: cinco botões iguais, alinhados com o card */
.lesson-page .view-actions { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; max-width: 900px; margin: 0 auto 14px;
                             padding: 0; background: none; border: 0; backdrop-filter: none; }
.lesson-page .view-actions .btn-action { width: 100%; height: 42px; padding: 0 10px; justify-content: center; gap: 8px; white-space: nowrap;
                                         box-sizing: border-box; border-radius: 14px; font-size: .88rem; }
.lesson-page .view-actions .lbl-short { display: none; }
.lp-index .view-actions { display: none; }   /* cópia das ações no ☰: só no celular */
.lesson-page .audio-warning { max-width: 900px; margin-left: auto; margin-right: auto; box-sizing: border-box; }

@media (max-width: 768px) {
  /* Página da aula: o card ocupa a tela entre a barra do topo e as abas de baixo.
     Antes sobrava um vão de 140px no topo e as ações em 2x2 espremiam o card. */
  .block-container.lesson-page { padding: calc(var(--pm-top-h, 62px) + 12px) 10px 0 !important; }
  .lesson-page .view-actions { gap: 6px; margin-bottom: 8px; }
  /* Em cards, as ações vão para o ☰ (topo do sumário): o card ganha ~60px */
  .lesson-page:has(#lesson-player:not([hidden])) > .view-actions { display: none; }
  .lesson-page .lp-index .view-actions { display: grid; width: 100%; margin: 0 0 4px; padding-bottom: 10px; border-bottom: 2px dashed rgba(255, 255, 255, .12); }
  .lp-index .view-actions .btn-action { border-width: 2px; }
  .lesson-page .view-actions .btn-action { flex-direction: column; gap: 2px; height: 50px; padding: 4px 2px; font-size: .7rem; border-radius: 14px; }
  .lesson-page .view-actions .ic { font-size: 1.15rem; line-height: 1; }
  .lesson-page .view-actions .lbl-long { display: none; }
  .lesson-page .view-actions .lbl-short { display: inline; }
  /* topo + ações (~58px) + abas de baixo (~96px) */
  /* topo + respiro (12px) + abas de baixo */
  .lesson-page .lp { --lp-h: calc(100dvh - var(--pm-top-h, 62px) - 12px - var(--pm-tab-h, 96px)); min-height: 360px; gap: 10px; }
  .lp { --lp-h: calc(100dvh - var(--pm-top-h, 62px) - 120px); min-height: 340px; }
  .lp-overlay { height: 100dvh; padding: 10px; }
  .lp-card { --lp-pad-y: 16px; --lp-pad-x: 16px; 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%; }
  /* Celular: deslizar no lugar dos botões; as bolinhas mostram que há mais cards */
  .lp-nav { justify-content: center; }
  .lp-nav > .lp-btn { display: none; }
  /* Bolinhas e "Ver como página" na mesma linha */
  .lp-nav .lp-mid { flex-direction: row; gap: 14px; }
}
/* 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; }
/* Celular: Conferir / Ver resposta sempre ao alcance, mesmo com a questão maior que a tela */
@media (max-width: 768px) {
  .lp-quiz-actions { position: sticky; bottom: calc(-1 * var(--lp-pad-y)); z-index: 2; background: var(--pm-bar, #282a36);
                     margin-bottom: calc(-1 * var(--lp-pad-y)); padding: 8px 0 var(--lp-pad-y); }
  .lp-quiz-actions .lp-btn { flex: 1; padding: 10px 12px; }
}
.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; } }
/* Troca de cartas: a de cima voa girando e revela a de baixo; voltando, a anterior volta para o topo do monte */
.lp-card.lp-leaving { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lp-card.lp-leaving.to-next { z-index: 2; animation: lp-fly-next .38s cubic-bezier(.4, 0, .9, .6) forwards; }
.lp-card.lp-leaving.to-prev { z-index: 0; animation: lp-sink .38s ease-in forwards; }
.lp-card.from-next { animation: lp-deal .38s cubic-bezier(.2, .9, .3, 1.15); }
.lp-card.from-prev { position: relative; z-index: 1; animation: lp-take-back .4s cubic-bezier(.2, .9, .3, 1.1); }
@keyframes lp-fly-next { to { transform: translate(-125%, -4%) rotate(-16deg); opacity: .2; } }
@keyframes lp-sink { to { transform: scale(.9) translateY(14px); opacity: 0; } }
@keyframes lp-deal { from { transform: scale(.9) translateY(16px) rotate(1.5deg); filter: brightness(.7); } to { transform: none; filter: none; } }
@keyframes lp-take-back { from { transform: translate(-125%, -4%) rotate(-16deg); } to { transform: none; } }

/* Anki: flashcard com a cena; o verso aparece girando como uma carta */
.lp-anki-flip { align-self: center; }
.lp-anki-flip[hidden], .lp-anki-back[hidden] { display: none; }
.lp-flip-in { animation: lp-flip .45s cubic-bezier(.2, .9, .3, 1.1); transform-origin: center; }
@keyframes lp-flip { from { transform: perspective(700px) rotateY(90deg); opacity: .3; } to { transform: none; opacity: 1; } }

/* Aula entregue em partes: seção em preparo, aviso na capa e avisos rápidos */
.lp-arriving { margin: 2px 0 0; padding: 8px 14px; border-radius: 14px; background: rgba(241, 250, 140, .1); color: var(--pm-yellow, #f1fa8c);
               border: 2px dashed rgba(241, 250, 140, .4); font-size: .92rem; }
.lp-pending { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 18px 0 6px; }
.lp-spin { display: inline-block; font-size: 2.6rem; animation: lp-hourglass 1.6s ease-in-out infinite; }
@keyframes lp-hourglass { 0%, 40% { transform: rotate(0); } 60%, 100% { transform: rotate(180deg); } }
.lp-pending-go { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lp-pending-go .lp-btn { width: min(100%, 320px); }
.lp-toast { position: fixed; left: 0; right: 0; bottom: 90px; width: max-content; max-width: calc(100% - 32px); margin: 0 auto; z-index: 10005;
            background: var(--pm-yellow, #f1fa8c); color: var(--pm-ink, #12121c); border: 3px solid var(--pm-ink, #12121c);
            border-radius: 999px; padding: 8px 18px; font-weight: 700; box-shadow: 0 4px 0 var(--pm-ink, #12121c); animation: lp-deal .3s ease-out; }
.lp-toast[hidden] { display: none; }

/* Bolinhas do carrossel (no celular substituem os botões de avançar/voltar) */
.lp-mid { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lp-dots { display: flex; align-items: center; gap: 6px; height: 10px; }
.lp-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .6); box-shadow: 0 0 0 1.5px var(--pm-ink, #12121c);
             transition: transform .2s, background .2s; }
.lp-dots i.on { background: var(--pm-pink, #ff79c6); transform: scale(1.35); }
.lp-dots i.small { transform: scale(.6); }
/* Dica de deslizar: só na primeira vez, no celular */
.lp-swipe-hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); pointer-events: none; white-space: nowrap;
                 background: rgba(18, 18, 28, .85); color: #fff; border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: .9rem;
                 animation: lp-hint-fade 3.2s ease forwards; }
.lp-swipe-hint span { display: inline-block; animation: lp-hint-swipe 1s ease-in-out 3; }
@keyframes lp-hint-swipe { 0%, 100% { transform: translateX(10px); } 50% { transform: translateX(-14px); } }
@keyframes lp-hint-fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
.lp-index-hint { display: none; width: 100%; margin: 0 0 2px; font-size: .78rem; color: var(--pm-muted, #a4a7c4); text-align: center; }
@media (hover: none) { .lp-index-hint { display: block; } }

@media (prefers-reduced-motion: reduce) {
  .lp-card, .lp-card.from-next, .lp-card.from-prev, .lp-swipe-hint span { animation: none; }
  .lp-card.lp-leaving { display: none; }
  .lp-spin, .lp-toast, .lp-flip-in { animation: none; }
  .lp-bar i { transition: none; }
}

/* ⭐ Avaliação da aula (⚑ no card e janela de avaliação) */
.lp-report { border: 2px solid rgba(255, 255, 255, .18); background: #383a4f; color: var(--pm-text, #f8f8f2); border-radius: 10px;
    padding: 2px 9px; font-size: .9rem; cursor: pointer; margin-left: 8px; }
.lp-head .lp-report:first-child, .lp-head .lp-chip + .lp-report { margin-left: auto; }
.lp-report:hover { border-color: #ffb86c; color: #ffb86c; }
.fb-box { width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px;
    background: var(--pm-bar, #282a36); border: 2px solid rgba(255, 255, 255, .12); border-radius: 18px; padding: 20px; color: var(--pm-text, #f8f8f2); }
.fb-box h3 { margin: 0; font-size: 1.2rem; }
.fb-card { margin: 0; font-size: .85rem; color: #ffb86c; }
.fb-stars { display: flex; gap: 6px; justify-content: center; }
.fb-stars button { background: none; border: none; font-size: 2rem; cursor: pointer; filter: grayscale(1) opacity(.45); transition: transform .1s; }
.fb-stars button.on { filter: none; }
.fb-stars button:hover { transform: scale(1.15); }
.fb-hint { margin: 0; font-size: .85rem; color: #a8aac0; text-align: center; }
.fb-issues { display: grid; gap: 6px; }
.fb-issues[hidden] { display: none; }
.fb-issues label { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: #1e1f2b;
    border: 1px solid rgba(255, 255, 255, .08); cursor: pointer; font-size: .92rem; }
.fb-issues input { width: 18px; height: 18px; accent-color: #ffb86c; flex: none; }
.fb-box textarea { width: 100%; min-height: 70px; resize: vertical; background: #1e1f2b; color: var(--pm-text, #f8f8f2);
    border: 2px solid rgba(255, 255, 255, .12); border-radius: 10px; padding: 10px; font: inherit; box-sizing: border-box; }
.fb-error { margin: 0; color: #ff5555; font-size: .85rem; min-height: 1em; }
.fb-actions { display: flex; gap: 8px; justify-content: flex-end; }
.fb-done { text-align: center; font-size: 1.05rem; padding: 10px 0; }

/* Contexto da cena + transcrição: o aluno escuta o áudio lendo o original */
.lp-tr-title { margin: 6px 0 -4px; font-weight: 800; color: var(--pm-muted, #a4a7c4); font-size: .95rem; }
.lp-tr-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.lp-tr-tabs .lp-btn { flex: 1 1 160px; }
.lp-tr-tabs .lp-btn[aria-pressed="true"] { background: var(--pm-cyan, #8be9fd); color: var(--pm-ink, #12121c); }
.lp-tr { font-size: 1.08rem; line-height: 1.7; border-top: 2px dashed rgba(255, 255, 255, .12); padding-top: 12px; }
.lp-tr[hidden] { display: none; }
.lp-tr:not([hidden]) { min-height: 80vh; }   /* espaço para os botões subirem até o áudio, nos dois textos igual */
.lp-tr p { margin: 0 0 10px; }
/* Karaokê: a fala que o áudio está tocando acende; o fundo enche (--p) enquanto ela é dita */
.lp-tr p, .lp-tr li { border-radius: 10px; transition: opacity .3s, background-color .3s, box-shadow .3s, transform .3s; }
.lp-tr p { padding: 2px 8px; margin: 0 -8px 8px; }
.lp-tr.lp-singing p:not(.lp-sing), .lp-tr.lp-singing li:not(.lp-sing) { opacity: .5; }
.lp-tr .lp-sing { --p: 0; color: #fff; transform: translateX(4px); box-shadow: -4px 0 0 var(--pm-cyan, #8be9fd);
    background-image: linear-gradient(90deg, rgba(139, 233, 253, .26) calc(var(--p) * 100%), rgba(139, 233, 253, .08) calc(var(--p) * 100%)); }
@media (prefers-reduced-motion: reduce) { .lp-tr p, .lp-tr li { transition: none; } .lp-tr .lp-sing { transform: none; } }
.lp-reading > .lp-media:has(audio) { position: sticky; top: -24px; z-index: 3; max-width: none; padding: 8px 0; background: var(--pm-bar, #282a36); }
@media (max-width: 640px) { .lp-reading > .lp-media:has(audio) { top: -18px; } }

/* 🤔 Tirar dúvida no card e card "Dúvidas respondidas" (só o aluno vê as dele) */
.lp-ask-btn b { margin-left: 2px; font-size: .8rem; color: #8be9fd; }
.lp-ask-btn:hover { border-color: #8be9fd; color: #8be9fd; }
.lp-act:disabled { opacity: .4; filter: grayscale(1); cursor: not-allowed; border-color: rgba(255, 255, 255, .18); color: var(--pm-text, #f8f8f2); }   /* aula ainda chegando */
.lp-ask textarea { width: 100%; resize: none; background: #1e1f2b; color: var(--pm-text, #f8f8f2); border: 2px solid rgba(255, 255, 255, .12);
    border-radius: 12px; padding: 10px 12px; font: inherit; }
.lp-ask textarea:focus { outline: none; border-color: #8be9fd; }
.lp-qa-list { display: flex; flex-direction: column; gap: 8px; max-height: 42vh; overflow-y: auto; }
.lp-qa-q { align-self: flex-end; background: rgba(189, 147, 249, .22); border-radius: 14px 14px 2px 14px; padding: 7px 11px; max-width: 85%;
    overflow-wrap: anywhere; }
.lp-qa-a { align-self: flex-start; background: rgba(255, 255, 255, .07); border-radius: 14px 14px 14px 2px; padding: 9px 11px; line-height: 1.55;
    max-width: 92%; overflow-wrap: anywhere; }
.lp-qa-wait { color: #a8aac0; animation: lp-pulse 1.2s ease-in-out infinite; }
@keyframes lp-pulse { 50% { opacity: .45; } }
.lp-qa-tips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.lp-qa-tip { flex: none; border: 1px solid rgba(139, 233, 253, .35); background: rgba(139, 233, 253, .08); color: #8be9fd; border-radius: 999px;
    padding: 5px 11px; font-size: .85rem; cursor: pointer; }
.lp-qa-tip:hover { background: rgba(139, 233, 253, .18); }
.lp-qa-private { text-align: left; }
.lp-qa-group { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 2px dashed rgba(255, 255, 255, .12); }
.lp-qa-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lp-qa-top .lp-heading { margin: 0; font-size: 1.1rem; }
.lp-qa-turn { position: relative; display: flex; flex-direction: column; gap: 6px; padding-right: 34px; }
.lp-qa-del { position: absolute; top: 0; right: 0; background: none; border: none; cursor: pointer; opacity: .55; font-size: 1rem; }
.lp-qa-del:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .lp-qa-wait { animation: none; } }

/* Original ↔ tradução: virada de página (estilo Apple Books). As camadas ficam empilhadas na mesma
   célula da grade: a altura é a do texto maior e nada pula ao virar. As cores vêm do próprio card. */
.lp-card { overflow-x: hidden; }
.lp-flip { display: grid; position: relative; touch-action: pan-y; }
.lp-flip-layer { grid-area: 1 / 1; min-width: 0; }
.lp-flip-sheet { background: var(--pm-bar, #282a36); z-index: 2; }
.lp-flip-under { z-index: 0; }
.lp-flip-shade { z-index: 1; pointer-events: none; }
.lp-flip-sheet + .lp-flip-shade { z-index: 3; }
.lp-flip-flap { z-index: 4; pointer-events: none; background-color: var(--pm-bar, #282a36); will-change: transform, clip-path; }
.lp-flip-layer[hidden] { display: none; }
.lp-flip-moving { user-select: none; -webkit-user-select: none; cursor: grabbing; }
.lp-tr-hint { font-weight: 500; opacity: .8; }
@media (hover: hover) { .lp-flip { cursor: grab; } }

/* Cena aberta pela revisão no modo página: contorno pulsando por alguns segundos */
.scene-target { outline: 4px solid var(--pm-cyan, #8be9fd); outline-offset: 4px; animation: scene-pulse 1s ease-in-out 3; }
@keyframes scene-pulse { 50% { outline-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .scene-target { animation: none; } }

/* Reparo dirigido (issue #123): oferta no formulário e aviso de progresso que não bloqueia o estudo */
.fb-offer { margin: 0; line-height: 1.5; }
.pm-repair-toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 1200;
    width: min(92vw, 460px); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px;
    background: #282a36; color: var(--pm-text, #f8f8f2); border: 2px solid #bd93f9; border-radius: 14px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); font-size: 0.95rem; }
.pm-repair-toast .rt-msg { flex: 1 1 200px; }
.pm-repair-toast .lp-btn { padding: 6px 12px; font-size: 0.85rem; }
.pm-repair-toast .lp-spin { font-size: 1.1rem; }
.lp-chip.fresh { background: #f1fa8c; color: var(--pm-ink, #12121c); }
/* Cabeçalho do card com chip, selo e vários botões: quebra linha em vez de sair da tela */
.lp-head { flex-wrap: wrap; row-gap: 8px; }
.lp-head .lp-chip { flex-shrink: 0; white-space: nowrap; }
.lp-head .lp-edit + .lp-edit { margin-left: 0; }

/* 🎬 Cena da palavra: palavra/frase do vídeo sublinhada; o toque abre a cena com controle de velocidade */
.lp-scene-link { cursor: pointer; text-decoration: underline dotted rgba(139, 233, 253, .75); text-decoration-thickness: 2px;
                 text-underline-offset: 4px; border-radius: 4px; transition: background .15s; }
.lp-scene-link::after { content: ' 🎧'; font-size: .7em; opacity: .7; font-weight: 400; }
.lp-scene-link:hover, .lp-scene-link:focus-visible { background: rgba(139, 233, 253, .14); outline: none; }
.lp-scene-overlay { position: fixed; inset: 0; z-index: 10050; background: rgba(10, 10, 18, .72); display: flex;
                    align-items: center; justify-content: center; padding: 16px; }
.lp-scene-box { width: 100%; max-width: 520px; max-height: calc(100dvh - 32px); overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
                background: var(--pm-bar, #282a36); color: var(--pm-text, #f8f8f2); border: 3px solid var(--pm-ink, #12121c);
                border-radius: 20px; box-shadow: 0 6px 0 var(--pm-ink, #12121c); padding: 14px; }
.lp-scene-top { display: flex; align-items: center; gap: 10px; }
.lp-scene-top .lp-icon { margin-left: auto; }
.lp-scene-count { color: var(--pm-muted, #a4a7c4); font-size: .85rem; }
.lp-scene-box video { width: 100%; max-height: 42vh; border-radius: 14px; background: #000; }
.lp-scene-box video[hidden] { display: none; }
.lp-scene-text { margin: 0; font-size: 1.15rem; line-height: 1.6; text-align: center; }
.lp-scene-text mark { background: rgba(241, 250, 140, .25); color: var(--pm-yellow, #f1fa8c); border-radius: 4px; padding: 0 2px; }
.lp-scene-tr { margin: 0; color: var(--pm-muted, #a4a7c4); text-align: center; font-size: .95rem; }
.lp-scene-tr:empty, .lp-scene-error[hidden] { display: none; }
.lp-scene-error { margin: 0; color: #ffb86c; text-align: center; }
.lp-scene-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.lp-scene-speeds { display: inline-flex; border: 2px solid rgba(255, 255, 255, .15); border-radius: 12px; overflow: hidden; }
.lp-scene-speeds button { border: 0; background: transparent; color: var(--pm-text, #f8f8f2); padding: 8px 12px; font-weight: 600; cursor: pointer; }
.lp-scene-speeds button[aria-pressed="true"] { background: var(--pm-cyan, #8be9fd); color: var(--pm-ink, #12121c); }
.lp-scene-ctl > button { border: 2px solid rgba(255, 255, 255, .15); background: #383a4f; color: var(--pm-text, #f8f8f2);
                         border-radius: 12px; padding: 8px 12px; font-weight: 600; cursor: pointer; }
.lp-scene-ctl > button[hidden] { display: none; }
@media (max-width: 600px) {
  .lp-scene-overlay { align-items: flex-end; padding: 0; }
  .lp-scene-box { max-width: none; border-radius: 20px 20px 0 0; border-bottom: 0; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
}

/* ✨ Correção do card pela IA (no editor) */
.le-ai { display: flex; flex-direction: column; gap: 8px; }
.le-ai-open { align-self: flex-start; padding: 8px 14px; border-radius: 999px; cursor: pointer; font: inherit; font-size: .9rem;
    border: 2px solid rgba(189, 147, 249, .6); background: rgba(189, 147, 249, .14); color: var(--pm-text, #f8f8f2); }
.le-ai-open[hidden], .le-ai-form[hidden], .le-ai-result[hidden] { display: none; }
.le-ai-form, .le-ai-result { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px;
    background: rgba(189, 147, 249, .1); border: 1px solid rgba(189, 147, 249, .35); }
.le-ai-form label { font-weight: 700; font-size: .9rem; }
.le-ai-form textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 64px; padding: 10px; border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, .15); background: #1e1f29; color: var(--pm-text, #f8f8f2); font: inherit; font-size: 16px; }
.le-ai-buttons { display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap; }
.le-ai-summary { margin: 0; font-size: .9rem; line-height: 1.4; }
.le-ai-check { margin: 0; color: var(--pm-muted, #a4a7c4); font-size: .85rem; }
.le-ai-extra { display: flex; gap: 8px; align-items: flex-start; font-size: .88rem; cursor: pointer; }
.le-ai-extra input { margin-top: 3px; flex: none; }
.le-row.le-changed { box-shadow: inset 4px 0 0 #50fa7b; background: rgba(80, 250, 123, .08); border-radius: 6px; }

/* Anki: o nome da seção abre a lista dos cards */
.lp-chip-jump { font: inherit; font-weight: 700; cursor: pointer; }
.lp-chip-jump:hover, .lp-chip-jump:focus-visible { filter: brightness(1.12); outline: none; }
.lp-chip-jump[aria-expanded="true"] .lp-jump-caret { display: inline-block; transform: rotate(180deg); }
.lp-jump-caret { font-size: .75em; transition: transform .15s; }
.lp-jump { display: flex; flex-direction: column; gap: 4px; max-height: min(50vh, 360px); overflow-y: auto; overscroll-behavior: contain;
    margin: 10px 0 4px; padding: 6px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; background: rgba(0, 0, 0, .25); }
.lp-jump-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 10px;
    background: transparent; color: var(--pm-text, #f8f8f2); font: inherit; text-align: left; cursor: pointer; }
.lp-jump-item:hover, .lp-jump-item:focus-visible { background: rgba(255, 255, 255, .08); outline: none; }
.lp-jump-item[aria-current="true"] { background: rgba(189, 147, 249, .22); box-shadow: inset 3px 0 0 var(--pm-purple, #bd93f9); }
.lp-jump-n { flex: none; min-width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px;
    background: #44475a; font-size: .8rem; font-weight: 700; }
.lp-jump-front { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Refazer a aula inteira (static/js/lesson_redo.js) */
.lesson-redo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; padding: 12px 14px;
    background: rgba(255, 184, 108, .1); border: 1px solid rgba(255, 184, 108, .45); border-radius: 14px; color: var(--pm-text, #f8f8f2); }
.lesson-redo[hidden] { display: none; }
.lesson-redo { flex-wrap: nowrap; gap: 8px; padding: 8px 8px 8px 12px; }
.lesson-redo .rd-msg { flex: 1 1 auto; font-size: .86rem; line-height: 1.35; }
.lesson-redo .lp-btn { flex: none; padding: 6px 12px; font-size: .85rem; }
.lesson-redo .rd-close { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent;
    color: #a8aac0; font-size: .95rem; cursor: pointer; }
.lesson-redo .rd-close:hover { color: #f8f8f2; background: rgba(255, 255, 255, .08); }
.rd-box .rd-coverage { margin: 0; padding: 10px 12px; border-radius: 10px; background: #1e1f2b; font-size: .92rem; }
.rd-box .rd-coverage.bad { background: rgba(255, 184, 108, .12); color: #ffb86c; }
.rd-box .rd-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: .9rem; color: #d6d8e6; }
.rd-box .rd-cost { margin: 0; font-size: .92rem; }
.fb-redo-link { align-self: center; background: none; border: 0; padding: 6px 4px; color: #a8aac0; font: inherit;
    font-size: .85rem; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.fb-redo-link:hover { color: #f8f8f2; }

/* Dono da aula: "Refazer" entra na barra de ações (e no ☰ do celular, que copia a barra) */
.lesson-page .view-actions:has(.btn-redo) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.lesson-page .view-actions:has(.btn-save):has(.btn-redo) { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.btn-action.btn-redo { background: rgba(255, 184, 108, .14); color: #ffb86c; border: 1px solid #ffb86c; }