/* =============================================================================
   ORGANIZADOR DE ESTUDOS (/minha-area/estudos) — reaproveita .up-shell/
   .up-sidebar (userpanel.css) e .cp-*/.course-tabs/.dash-table (company-
   panel.css / app.css); só o que é específico de matéria/cor fica aqui.
   ============================================================================= */

.sp-color-dot{
  display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; vertical-align:middle;
  flex-shrink:0;
}
.sp-color-input{
  width:52px; height:40px; padding:2px; border:1px solid var(--line); border-radius:8px; cursor:pointer;
  background:var(--white);
}

/* ---------- Agenda: duração em horas+min e "repetir em vários dias" ---------- */
.sp-duracao-inputs{display:flex; align-items:center; gap:4px;}
.sp-duracao-inputs input{width:58px; text-align:center;}
.sp-duracao-unit{font-size:12px; color:var(--gray-500); margin-right:6px;}
.sp-agenda-repetir-row{margin-top:-2px;}
.sp-agenda-repetir-toggle{
  display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600;
  color:var(--gray-700); cursor:pointer;
}
.sp-agenda-repetir-toggle input{width:auto; cursor:pointer;}
.sp-weekday-row{align-items:center;}
.sp-weekday-picker__label{font-size:12px; font-weight:600; color:var(--gray-600);}
.sp-weekday-picker{display:flex; flex-wrap:wrap; gap:10px;}
.sp-weekday-picker__day{
  display:flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600;
  color:var(--gray-700); cursor:pointer;
}
.sp-weekday-picker__day input{width:auto; cursor:pointer;}
/* .cp-form__row (company-panel.css) é display:flex incondicional — sem
   isto, o atributo [hidden] que studies-agenda-cal.js alterna entre o modo
   "um dia" e "repetir em vários dias" é vencido pelo flex do autor (que
   sempre ganha do display:none padrão do navegador pra [hidden], mesmo com
   especificidade empatada), e as duas linhas apareciam juntas. */
#spAgendaDataUnica[hidden],
#spAgendaDataIntervalo[hidden],
#spAgendaDiasSemana[hidden]{display:none;}

.sp-chart-bar-label{font-size:11px; fill:var(--gray-700); font-family:var(--sans);}
.sp-chart-bar-value{font-size:10.5px; fill:var(--gray-500); font-family:var(--mono);}
.cp-chart-grid{stroke:var(--gray-100); stroke-width:1;}
/* ---------- Primitivas dos gráficos ----------
   Estas três viviam SÓ em company-panel.css. O Organizador não notava porque
   carrega as duas folhas, mas o perfil de amigo — que usa o mesmo partial de
   desempenho e não carrega o CSS da Empresa — desenhava os rótulos do radar
   sem estilo nenhum: enormes, pretos e por cima do gráfico. Os valores são
   idênticos aos de lá, então nada muda onde as duas folhas convivem. */
.cp-chart{margin:6px 0 22px;}
.cp-chart-empty{
  font-size:13px; color:var(--gray-500); background:var(--gray-50); border:1px dashed var(--gray-300);
  border-radius:10px; padding:18px; text-align:center;
}
.cp-chart-axis-label{font-size:9px; fill:var(--gray-400); font-family:var(--mono);}
/* Halo branco atrás do texto: os rótulos de escala (25%/50%) caem dentro da
   área verde preenchida e sem isto ficam ilegíveis por cima dela. */
.cp-chart-axis-label--escala{
  stroke:var(--white); stroke-width:3px; stroke-linejoin:round; paint-order:stroke fill;
}
/* Eixo do radar em que a pessoa ainda não respondeu nada: sem placar e mais
   apagado, para não ser lido como um resultado ruim. */
.cp-chart-axis-label--vazio{opacity:0.45;}
/* Placar (acertos/total) sob o nome do eixo respondido. */
.cp-chart-axis-score{fill:var(--gray-500);}

/* ---------- Heatmap de atividade (estilo GitHub) ---------- */
.sp-heatmap{display:flex; flex-direction:column; align-items:flex-start; gap:8px;}
.sp-heatmap svg{max-width:100%; height:auto;}
.sp-heatmap-month{font-size:9.5px; fill:var(--gray-500); font-family:var(--sans);}
.sp-heatmap-legend{display:flex; align-items:center; gap:4px; font-size:11px; color:var(--gray-500);}
.sp-heatmap-dot{width:10px; height:10px; border-radius:2.5px; display:inline-block;}

/* ---------- Revisão de Flashcards em tela cheia ---------- */
.sp-review-modal{max-width:480px; text-align:center;}
.sp-review-progress{display:flex; flex-direction:column; gap:6px; margin-bottom:20px;}
.sp-review-counter{font-size:12px; font-weight:600; color:var(--gray-500); font-family:var(--mono);}
.sp-review-progress__bar{width:100%;}

.sp-flip-card{perspective:1200px; width:100%; height:260px; cursor:pointer; margin-bottom:18px;}
.sp-flip-card[hidden]{display:none;}
.sp-flip-card__inner{
  position:relative; width:100%; height:100%; transition:transform .5s; transform-style:preserve-3d;
}
.sp-flip-card.is-flipped .sp-flip-card__inner{transform:rotateY(180deg);}
.sp-flip-card__face{
  position:absolute; inset:0; backface-visibility:hidden; border-radius:14px; border:1px solid var(--line);
  background:var(--gray-50); display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px; gap:14px;
}
.sp-flip-card__face--back{transform:rotateY(180deg); background:var(--blue-50);}
.sp-review-subject{display:flex; align-items:center; font-size:12.5px; font-weight:700; color:var(--gray-600); text-transform:uppercase; letter-spacing:0.03em;}
.sp-flip-card__text{font-size:17px; font-weight:600; color:var(--navy-900); line-height:1.5; max-height:140px; overflow-y:auto;}
.sp-flip-card__hint{font-size:11.5px; color:var(--gray-500);}

.sp-review-actions{display:flex; justify-content:center; gap:12px;}
.sp-review-actions[hidden]{display:none;}

.sp-review-done{display:flex; flex-direction:column; align-items:center; gap:10px; padding:20px 0;}
.sp-review-done[hidden]{display:none;}
.sp-review-done .icon{width:40px; height:40px; color:var(--blue-500);}
.sp-review-done h3{font-size:18px; color:var(--navy-900); margin:0;}
.sp-review-done p{font-size:13.5px; color:var(--gray-600); margin:0;}

.sp-due-banner{
  display:flex; align-items:center; gap:8px; background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.3);
  color:var(--blue-600); border-radius:10px; padding:10px 16px; font-size:13px; font-weight:600; margin-bottom:18px;
}

.sp-legend{display:flex; flex-wrap:wrap; gap:12px 18px; margin-top:8px;}
.sp-legend__item{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--gray-600);}
.sp-legend__swatch{width:10px; height:10px; border-radius:3px; flex-shrink:0;}

/* ---------- Matérias: tópicos expansíveis ---------- */
.sp-subject-details{
  background:var(--white); border:1px solid var(--line); border-radius:10px; margin-bottom:10px; overflow:hidden;
}
.sp-subject-details summary{
  display:flex; align-items:center; gap:8px; padding:13px 16px; cursor:pointer; font-size:13.5px; font-weight:600;
  color:var(--navy-900); list-style:none;
}
.sp-subject-details summary::-webkit-details-marker{display:none;}
.sp-subject-details__name{flex:1;}
.sp-subject-details__hours{font-size:11.5px; font-weight:500; color:var(--gray-500);}
.sp-subject-details__body{padding:0 16px 16px; border-top:1px solid var(--line);}
.sp-progress-pill{
  font-family:var(--mono); font-size:10.5px; font-weight:700; background:var(--blue-50); color:var(--blue-600);
  padding:2px 9px; border-radius:99px; flex-shrink:0;
}

.sp-topic-list{list-style:none; display:flex; flex-direction:column; gap:6px; margin:14px 0 10px;}
.sp-topic{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; background:var(--gray-50);}
.sp-topic__status-form{margin:0;}
.sp-topic__status-btn{
  width:24px; height:24px; border-radius:50%; border:1px solid var(--line); background:var(--white); cursor:pointer;
  font-size:12px; line-height:1; display:flex; align-items:center; justify-content:center; padding:0; flex-shrink:0;
}
.sp-topic--andamento .sp-topic__status-btn{color:var(--blue-600); border-color:var(--blue-300);}
.sp-topic--dominado .sp-topic__status-btn{color:var(--sp-text); background:var(--blue-500); border-color:var(--blue-500);}
.sp-topic__title{flex:1; font-size:13px; color:var(--navy-900);}
.sp-topic--dominado .sp-topic__title{color:var(--gray-500); text-decoration:line-through;}
.sp-topic__label{font-size:11px; color:var(--gray-500); flex-shrink:0;}
.sp-topic-empty{font-size:12.5px; color:var(--gray-500); padding:6px 0;}
.sp-topic-add-form{display:flex; gap:8px; margin-top:6px;}
.sp-topic-add-form input{
  flex:1; font:inherit; font-size:12.5px; padding:7px 10px; border:1px solid var(--line); border-radius:7px;
}

/* ---------- Sub-abas (Revisão Ativa / Biblioteca) ---------- */
.sp-subtabs{margin-bottom:18px;}
.sp-subpanel[hidden]{display:none;}

/* ---------- Flashcards ---------- */
.sp-flashcard-queue{display:flex; flex-direction:column; gap:10px; margin-bottom:10px;}
.sp-flashcard{
  background:var(--white); border:1px solid var(--line); border-radius:10px; padding:14px 16px;
}
.sp-flashcard summary{cursor:pointer; font-size:13.5px; font-weight:600; color:var(--navy-900); list-style:none;}
.sp-flashcard summary::-webkit-details-marker{display:none;}
.sp-flashcard__verso{font-size:13px; color:var(--gray-700); margin:10px 0; line-height:1.6;}
.sp-flashcard__actions{display:flex; gap:8px;}
.sp-flashcard__actions .btn{font-size:12px; padding:7px 14px;}

/* ---------- Notas (resumos/erros/dúvidas) ---------- */
.sp-note-list{display:flex; flex-direction:column; gap:12px;}
.sp-note{
  background:var(--white); border:1px solid var(--line); border-left:4px solid var(--blue-500); border-radius:10px;
  padding:14px 16px;
}
.sp-note--erro{border-left-color:#DC2626;}
.sp-note--duvida{border-left-color:#D4AF37;}
.sp-note__head{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.sp-note__badge{
  font-family:var(--mono); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em;
  background:var(--blue-50); color:var(--blue-600); padding:2px 9px; border-radius:99px;
}
.sp-note--erro .sp-note__badge{background:#FEF2F2; color:#DC2626;}
.sp-note--duvida .sp-note__badge{background:#FFFBEB; color:#92620A;}
.sp-note__subject{font-size:11.5px; color:var(--gray-500); display:flex; align-items:center;}
.sp-note__head form{margin-left:auto;}
.sp-note__title{font-size:14px; color:var(--navy-900); margin-bottom:4px;}
.sp-note__content{font-size:13px; color:var(--gray-700); line-height:1.6; white-space:pre-wrap;}
.sp-note__tags{font-size:11px; color:var(--gray-500); margin-top:8px; font-style:italic;}

/* ---------- Biblioteca: fontes + glossário ---------- */
.sp-source-list{list-style:none; display:flex; flex-direction:column; gap:8px;}
.sp-source{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px; background:var(--white);
  border:1px solid var(--line); border-radius:10px; padding:12px 16px;
}
.sp-source__tipo{
  display:inline-block; font-family:var(--mono); font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.03em; color:var(--blue-600); background:var(--blue-50); border:1px solid var(--blue-100);
  padding:2px 8px; border-radius:99px; margin-bottom:6px;
}
/* A citação é o PRODUTO desta aba (referência pronta pra colar no TCC) —
   por isso em texto corrido, não mais título+ref como dois rótulos soltos. */
.sp-source__citacao{font-size:13.5px; line-height:1.55; color:var(--navy-900); margin:0 0 4px;}
.sp-source__link{font-size:12px; color:var(--blue-600); text-decoration:none;}
.sp-source__link:hover{text-decoration:underline;}
.sp-source__actions{display:flex; align-items:center; gap:2px; flex-shrink:0;}
.sp-source__copy{color:var(--gray-500);}
.sp-source__copy:hover{color:var(--blue-600);}

.sp-glossary-list{display:flex; flex-direction:column; gap:12px;}
.sp-glossary-item dt{
  display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:700; color:var(--navy-900); margin-bottom:4px;
}
.sp-glossary-item dt form{margin-left:auto;}
.sp-glossary-item dd{font-size:13px; color:var(--gray-700); line-height:1.6; margin-left:0;}

/* ---------- Biblioteca: filmes ----------
   Grade de pôsteres. O cartaz É o cartão: nada de moldura, sombra ou fundo
   em volta — a arte já delimita o objeto, e qualquer caixa extra só
   competiria com ela. Título e nota ficam soltos embaixo, como numa
   estante. A ficha completa (autor, link, conclusão, status, tipo) fica no
   modal, para a estante não virar formulário. */
.sp-movie-bar{display:flex; justify-content:space-between; align-items:center; gap:14px;
  flex-wrap:wrap; margin-bottom:4px;}
/* Botao de contorno em vez de bloco cheio: e a unica acao da aba e nao
   precisa disputar atencao com os cartazes. (.btn--ghost do site e
   branco-sobre-escuro e some numa superficie clara.) */
.sp-movie-add{
  appearance:none; background:none; border:1px solid var(--line); border-radius:8px;
  padding:7px 14px; font-family:inherit; font-size:12.5px; font-weight:600;
  color:var(--navy-900); cursor:pointer;
  transition:border-color .16s ease, background-color .16s ease;
}
.sp-movie-add:hover{border-color:var(--gray-400); background:var(--gray-100);}
.sp-movie-add:focus-visible{outline:2px solid var(--blue-500); outline-offset:2px;}

/* ---------- Select próprio ----------
   A lista aberta de um <select> nativo é desenhada pelo sistema operacional
   — a barra azul, a fonte e o espaçamento dos itens vêm do Windows/macOS e
   nenhum CSS alcança. Para a lista acompanhar o resto do painel, ela
   precisa ser desenhada; o <select> real continua no DOM, escondido, e é
   ele que vai no POST (ver sp-select.js). */
.spsel{position:relative; display:block; min-width:0;}
/* Escondido sem `display:none`: assim continua sendo um campo de formulário
   normal para o navegador, com valor e validação. */
.spsel__nativo{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); border:0;
}

.spsel__btn{
  appearance:none; width:100%; display:flex; align-items:center; gap:8px;
  border:1px solid transparent; border-radius:7px; background:none; cursor:pointer;
  padding:6px 8px; font-family:inherit; font-size:13px; color:var(--navy-900); text-align:left;
  transition:border-color .16s ease, background-color .16s ease;
}
.spsel__value{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.spsel__caret{
  width:15px; height:15px; flex:0 0 auto; color:var(--gray-400);
  transition:transform .18s ease, color .16s ease;
}
.spsel__btn:hover{background:var(--gray-100);}
.spsel__btn:hover .spsel__caret{color:var(--gray-500);}
.spsel__btn:focus-visible{outline:2px solid var(--blue-500); outline-offset:1px;}
.spsel.is-open .spsel__btn{background:var(--white); border-color:var(--gray-300);}
.spsel.is-open .spsel__caret{transform:rotate(180deg); color:var(--navy-900);}

.spsel__list{
  position:absolute; z-index:20; left:0; right:0; top:calc(100% + 6px);
  max-height:236px; overflow-y:auto; padding:5px; overscroll-behavior:contain;
  background:var(--white); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 10px 28px rgba(15,23,42,.14), 0 2px 6px rgba(15,23,42,.06);
}
/* Sem espaço embaixo — dentro do modal, que rola —, a lista sobe. */
.spsel.is-up .spsel__list{top:auto; bottom:calc(100% + 6px);}
.spsel__list[hidden]{display:none;}

.spsel__grouplabel{
  font-family:var(--mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gray-400); padding:9px 9px 5px;
}
.spsel__group + .spsel__group .spsel__grouplabel{
  border-top:1px solid var(--line); margin-top:4px; padding-top:11px;
}

.spsel__opt{
  padding:8px 9px; border-radius:6px; font-size:13px; color:var(--navy-900);
  cursor:pointer; user-select:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* O item sob o cursor (mouse ou teclado) recebe só um fundo cinza — nada da
   barra azul cheia do controle nativo, que é o que destoava. */
.spsel__opt.is-cursor{background:var(--gray-100);}
/* O escolhido se marca pelo peso e por um traço fino à esquerda, e não por
   fundo colorido: numa lista de dezoito itens, dezoito faixas de cor seriam
   ruído. */
.spsel__opt.is-on{font-weight:600; box-shadow:inset 2px 0 0 var(--navy-900);}
.spsel__opt.is-on.is-cursor{background:var(--gray-100);}

/* ---------- Filtros da estante ---------- */
.sp-movie-filters{display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0;}
.sp-movie-filters .spsel{width:168px; flex:0 0 auto;}
.sp-movie-filters .spsel__btn{border-color:var(--line); background:var(--white); font-size:12.5px;}
.sp-movie-filters .spsel__btn:hover{border-color:var(--gray-400);}
.sp-movie-filters__count{font-family:var(--mono); font-size:11.5px; color:var(--gray-400);}
.sp-movie-filters__clear{
  appearance:none; background:none; border:0; padding:2px 4px; cursor:pointer;
  font-family:inherit; font-size:12px; color:var(--gray-500); text-decoration:underline;
  text-underline-offset:2px; transition:color .16s ease;
}
.sp-movie-filters__clear:hover{color:var(--navy-900);}
.sp-movie-filters__clear[hidden]{display:none;}
/* O card escondido pelo filtro sai do fluxo do grid, senão deixaria buraco. */
.sp-movie[hidden]{display:none;}

@media (max-width:640px){
  .sp-movie-filters{width:100%;}
  .sp-movie-filters .spsel{flex:1 1 0; width:auto; min-width:0;}
  /* Alvo confortável para o dedo na lista aberta. */
  .spsel__opt{padding:11px 10px;}
}

/* A paleta de cor por tipo mora em app.css: o perfil de amigo (que estende
   base.html e não carrega este arquivo) usa as mesmas cores. */

/* O ponto é o que leva a cor aos cartões que TÊM capa — ali a arte ocupa
   todo o espaço e não sobra onde tingir. */
.sp-movie__dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--tipo); margin-right:7px; vertical-align:middle;
  position:relative; top:-1px;
}

/* ---------- Modo limitado (sem assinatura) ----------
   O convite aos planos ocupa o lugar da lista de cadernos. Cartão discreto,
   sem gradiente nem selo: a tela toda já é escura, e um bloco chamativo aqui
   pareceria anúncio dentro do produto. */
.qb-planos{
  margin-top:18px; padding:22px 24px; border-radius:14px;
  background:rgba(var(--sp-overlay-rgb),.04); border:1px solid rgba(var(--sp-overlay-rgb),.10);
}
.qb-planos__titulo{font-size:15px; color:var(--sp-text); margin:0 0 8px;}
.qb-planos__texto{font-size:13.5px; line-height:1.65; color:rgba(var(--sp-overlay-rgb),.62); margin:0 0 18px; max-width:62ch;}
/* Atalho para os planos no fim da barra lateral, no modo limitado. */
.sp-nav__planos{
  display:flex; align-items:center; gap:10px; margin-top:14px; padding:10px 12px;
  border-radius:9px; font-size:13.5px; font-weight:600; text-decoration:none;
  color:#D4AF37; border:1px solid rgba(212,175,55,.32); background:rgba(212,175,55,.07);
}
.sp-nav__planos:hover{background:rgba(212,175,55,.14);}
.sp-nav__planos .icon{width:16px; height:16px;}

/* ---------- Prateleiras da estante (Audiovisual · Leitura · Áudio) ----------
   O título é uma etiqueta discreta, não um cabeçalho: quem manda na tela são
   as capas. A linha à direita separa as fileiras sem precisar de moldura. */
.sp-shelf{margin-top:34px;}
.sp-shelf:first-of-type{margin-top:22px;}
.sp-shelf__titulo{
  display:flex; align-items:center; gap:10px; margin:0;
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gray-500);
}
.sp-shelf__titulo::after{content:""; flex:1; height:1px; background:var(--line);}
.sp-shelf__contagem{font-family:var(--mono); font-size:11px; letter-spacing:0; color:var(--gray-400);}
/* Guarda explícita: o filtro esconde a prateleira pelo atributo `hidden`, e
   basta alguém dar um `display:` a .sp-shelf um dia para o atributo parar de
   funcionar calado. */
.sp-shelf[hidden]{display:none;}
.sp-movie-grid{
  list-style:none; display:grid; gap:26px 20px; margin-top:20px;
  grid-template-columns:repeat(auto-fill, minmax(176px, 1fr));
}
.sp-movie{display:flex; flex-direction:column; gap:9px; min-width:0;}
/* O cartão inteiro é um botão — abrir a ficha é a única ação dele, e um
   alvo só evita o gesto ambíguo de "onde exatamente eu clico". */
.sp-movie__open{
  appearance:none; background:none; border:0; padding:0; margin:0; cursor:pointer;
  display:flex; flex-direction:column; gap:9px; text-align:left; font:inherit; width:100%;
}
.sp-movie__open:focus-visible{outline:2px solid var(--blue-500); outline-offset:4px; border-radius:12px;}

.sp-movie__poster{
  position:relative; aspect-ratio:2/3; border-radius:10px; overflow:hidden;
  background:var(--gray-100); display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.07);
  transition:transform .18s ease, box-shadow .18s ease;
}
.sp-movie__poster img{width:100%; height:100%; object-fit:cover; display:block;}
/* Sem capa, a capa vira o título — a tipografia faz o trabalho da arte que
   nao existe. Uma inicial solta dizia menos e ainda obrigava a ler o titulo
   logo abaixo.

   Caixa alta, peso leve e entreletra aberta, centralizado nos dois eixos
   dentro de uma moldura fina: e a linguagem de uma cartela de titulo
   impressa, formal sem ser pesada. Nao ha serifada disponivel aqui — o site
   trocou Playfair por Poppins em tudo (ver site.css) e a fonte serifada so e
   carregada nas paginas de curso; forcar outra familia por causa de um
   placeholder quebraria essa decisao e ainda custaria uma requisicao. */
.sp-movie__blank{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; padding:24px 16px; box-sizing:border-box; text-align:center;
  font-family:var(--sans); font-size:15px; font-weight:400; line-height:1.62;
  letter-spacing:.09em; text-transform:uppercase; color:var(--tipo, var(--gray-500));
  /* Fundo declarado duas vezes: quem nao entender color-mix fica com o cinza
     de antes, em vez de fundo transparente. */
  background:var(--gray-100);
  background:color-mix(in srgb, var(--tipo, var(--gray-500)) 7%, var(--white));
}
/* O corte por linhas exige `-webkit-box`, que nao centraliza vertical; daí a
   divisao: o pai centra, o filho corta. Titulo muito longo para no fim da 5a
   linha em vez de vazar por baixo da moldura. */
.sp-movie__blank-txt{
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical;
  overflow:hidden; overflow-wrap:anywhere;
}
/* `display:` sem condicao vence o atributo `hidden`, que so vale por causa da
   regra `[hidden]{display:none}` do user-agent. Sem estes dois overrides, a
   ficha mostrava a cartela em branco E o <img> ao mesmo tempo quando se
   escolhia uma capa. */
.sp-movie__blank[hidden]{display:none;}
.sp-movie-modal__poster img[hidden]{display:none;}
.sp-movie__blank::before{
  content:""; position:absolute; inset:10px; border-radius:5px; pointer-events:none;
  border:1px solid var(--gray-300);
  border-color:color-mix(in srgb, var(--tipo, var(--gray-500)) 32%, var(--white));
}
/* Único sinal de que o cartaz é clicável: ele sobe um fio. Sem sombra
   colorida, sem zoom na imagem. */
.sp-movie__open:hover .sp-movie__poster{
  transform:translateY(-3px); box-shadow:inset 0 0 0 1px rgba(15,23,42,.12), 0 6px 16px rgba(15,23,42,.10);
}

.sp-movie__title{
  font-size:13px; font-weight:600; color:var(--navy-900); line-height:1.4;
  overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sp-movie__meta{
  font-size:11.5px; color:var(--gray-500); line-height:1.4; margin-top:-5px;
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---------- Nota em estrelas ----------
   O preenchimento no hover é prévia, e não seleção: a cor cheia só fica
   depois do clique. Prévia em cinza médio, nota salva em navy — a mesma
   escala monocromática do resto do painel, sem o dourado que puxaria a
   atenção para o canto menos importante do cartão. */
.sp-rate{display:flex; align-items:center; gap:8px;}
.sp-rate__stars{display:flex; gap:2px;}
.sp-star{
  appearance:none; background:none; border:0; padding:1px; cursor:pointer; line-height:0;
  color:var(--gray-300);
  transition:color .16s ease, transform .16s ease;
}
.sp-star svg{width:17px; height:17px; fill:currentColor; display:block;}
.sp-star.is-on{color:var(--navy-900);}
.sp-rate.is-previewing .sp-star.is-on{color:var(--gray-500); transform:scale(1.08);}
.sp-star:focus-visible{outline:2px solid var(--blue-500); outline-offset:2px; border-radius:3px;}
.sp-rate__out{
  font-family:var(--mono); font-size:11.5px; color:var(--gray-400); min-width:36px;
}
.sp-rate.is-previewing .sp-rate__out{color:var(--gray-700);}
/* Confirmação discreta de gravação — um pulso curto no número, sem toast. */
.sp-rate.is-saved .sp-rate__out{color:var(--blue-600);}

/* No cartão as estrelas encolhem para caber na coluna do pôster; se ainda
   assim faltar espaço, o número quebra para a linha de baixo em vez de
   espremer a fileira. */
.sp-rate--card{gap:6px; flex-wrap:wrap;}
.sp-rate--card .sp-star{padding:0;}
.sp-rate--card .sp-star svg{width:13px; height:13px;}
.sp-rate--card .sp-rate__stars{gap:1px;}
.sp-rate--card .sp-rate__out{min-width:30px;}

/* ---------- Ficha do filme (modal) ----------
   Duas colunas: o cartaz à esquerda, a ficha à direita. As propriedades
   ficam numa <dl> de duas colunas — rótulo apagado, valor em campo sem
   moldura — para a ficha ler como ficha, e não como formulário empilhado. */
.sp-movie-modal__grid{display:flex; gap:26px; align-items:flex-start;}
.sp-movie-modal__side{flex:0 0 168px; display:flex; flex-direction:column; gap:10px;}
/* O cartaz da ficha é o próprio seletor de arquivo (um <label>), então
   precisa de position para a etiqueta e de resposta ao ponteiro. */
.sp-movie-modal__poster{
  position:relative; aspect-ratio:2/3; border-radius:10px; overflow:hidden;
  background:var(--gray-100); display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.07); cursor:pointer;
  transition:box-shadow .16s ease;
}
.sp-movie-modal__poster:hover{box-shadow:inset 0 0 0 1px rgba(15,23,42,.18), 0 4px 14px rgba(15,23,42,.10);}
/* O anel de foco fica no cartaz, e não no campo — o campo está oculto, mas
   continua focável, e é ele quem recebe o foco do teclado. */
.sp-movie-modal__poster:focus-within{outline:2px solid var(--blue-500); outline-offset:3px;}
/* Arrastar um arquivo por cima: o mesmo destaque do foco, sem inventar cor. */
.sp-movie-modal__poster.is-dragging{outline:2px dashed var(--blue-500); outline-offset:3px;}

/* Oculta sem tirar do fluxo de acessibilidade: `display:none` faria o campo
   perder o foco pelo teclado e, em versões antigas do Safari, deixaria de
   abrir ao toque no rótulo. */
.sp-file-oculto{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* Etiqueta sempre visível, e não só no hover: em tela de toque não existe
   hover, e um alvo que só se anuncia com o ponteiro não existiria no celular. */
.sp-movie-modal__pick{
  position:absolute; left:10px; right:10px; bottom:10px; z-index:1;
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:7px 10px; border-radius:7px; background:rgba(var(--sp-overlay-rgb),.93);
  font-size:11.5px; font-weight:600; color:var(--navy-900);
  box-shadow:0 1px 3px rgba(15,23,42,.16);
}
.sp-movie-modal__pick .icon{width:13px; height:13px; flex:0 0 auto;}
.sp-movie-modal__poster img{width:100%; height:100%; object-fit:cover; display:block;}
.sp-movie-modal__main{flex:1; min-width:0;}
.sp-movie-modal__main .modal__title{margin:0 0 10px;}

.sp-movie-modal__titulo{
  width:100%; border:0; border-bottom:1px solid var(--line); background:none; padding:0 0 8px;
  font-family:inherit; font-size:19px; font-weight:700; color:var(--navy-900);
  transition:border-color .16s ease;
}
.sp-movie-modal__titulo::placeholder{color:var(--gray-300); font-weight:400;}
.sp-movie-modal__titulo:focus{outline:none; border-bottom-color:var(--navy-900);}

.sp-props{margin:16px 0 0;}
.sp-prop{display:flex; align-items:center; gap:14px; min-height:34px;}
.sp-prop dt{
  flex:0 0 116px; display:flex; align-items:center; gap:8px;
  font-size:12.5px; color:var(--gray-500);
}
.sp-prop dt .icon{width:14px; height:14px; color:var(--gray-400); flex-shrink:0;}
.sp-prop dd{flex:1; min-width:0; margin:0;}
/* Campo sem moldura no repouso: a ficha fica limpa e só ganha contorno
   quando o cursor chega, sinalizando que aquilo é editável. */
.sp-prop dd input, .sp-prop dd select{
  width:100%; border:1px solid transparent; border-radius:6px; background:none;
  padding:5px 8px; font-family:inherit; font-size:13px; color:var(--navy-900);
  transition:border-color .16s ease, background-color .16s ease;
}
.sp-prop dd input::placeholder{color:var(--gray-300);}
.sp-prop dd input:hover, .sp-prop dd select:hover{background:var(--gray-100);}
.sp-prop dd input:focus, .sp-prop dd select:focus{
  outline:none; border-color:var(--gray-300); background:var(--white);
}
.sp-prop dd select{cursor:pointer;}

.sp-movie-modal__desc{
  display:block; margin-top:16px; font-size:12.5px; color:var(--gray-500);
}
.sp-movie-modal__desc textarea{
  display:block; width:100%; margin-top:6px; border:1px solid var(--line); border-radius:8px;
  padding:9px 10px; font-family:inherit; font-size:13px; color:var(--navy-900); resize:vertical;
  transition:border-color .16s ease;
}
.sp-movie-modal__desc textarea:focus{outline:none; border-color:var(--gray-400);}

.sp-movie-modal__actions{
  margin-top:22px; padding-top:16px; border-top:1px solid var(--line);
  justify-content:space-between; align-items:center;
}
.sp-movie-modal__del{
  appearance:none; background:none; border:0; padding:0; cursor:pointer;
  font-family:inherit; font-size:12.5px; color:var(--gray-500);
  transition:color .16s ease;
}
.sp-movie-modal__del:hover{color:#DC2626;}
.sp-movie-modal__del[hidden]{display:none;}
/* Sem o Excluir (modo "adicionar"), o space-between deixaria o botao
   principal encostado a esquerda. */
.sp-movie-modal__actions .btn{margin-left:auto;}

@media (max-width:640px){
  .sp-movie-modal__grid{flex-direction:column; gap:18px;}
  .sp-movie-modal__side{flex:none; align-self:center; width:160px;}
  .sp-movie-modal__pick{left:8px; right:8px; bottom:8px; padding:8px 8px; font-size:11px;}
  .sp-prop{align-items:flex-start; flex-direction:column; gap:2px; min-height:0; margin-bottom:8px;}
  .sp-prop dt{flex:none;}
  .sp-prop dd{width:100%;}
  .sp-prop dd input, .sp-prop dd select{border-color:var(--line);}
}

@media (max-width:520px){
  .sp-movie-grid{grid-template-columns:repeat(2, 1fr); gap:20px 14px;}
  .sp-shelf{margin-top:28px;}
  .sp-movie__blank{font-size:13px; letter-spacing:.07em; padding:18px 12px;}
  .sp-movie__blank-txt{-webkit-line-clamp:4;}
  .sp-rate--card .sp-star svg{width:12px; height:12px;}
}

/* Quem pediu menos movimento no sistema continua vendo o preenchimento —
   só sem a escala, sem o atraso em cascata e sem o cartaz subindo. */
@media (prefers-reduced-motion:reduce){
  .sp-star{transition:color .01ms; transition-delay:0ms !important;}
  .sp-rate.is-previewing .sp-star.is-on{transform:none;}
  .sp-movie__poster{transition:none;}
  .sp-movie-modal__poster{transition:none;}
  .sp-movie__open:hover .sp-movie__poster{transform:none;}
}

/* ---------- Cronômetro Pomodoro (aba própria, primeira do menu) — a página
   inteira fica escura quando essa aba está ativa, sem nenhuma sobra clara — a
   classe .is-pomodoro é alternada em .sp-content pelo tab-switcher
   (studies-panel.js) e já vem marcada por padrão no HTML porque Pomodoro é
   a aba inicial. O rastro de fumaça verde que segue o mouse (ver
   studies-pomodoro.js) é feito com elementos reais (.sp-smoke) soltados a
   cada poucos milissegundos de mousemove, não um gradiente só — cada um
   nasce opaco/pequeno e transiciona pra transparente/grande (dissolvendo),
   com blur + mix-blend-mode:screen (só clareia o fundo escuro, nunca "suja"
   texto branco por cima) e pointer-events:none (nunca bloqueia clique). ---------- */
.sp-content.is-pomodoro{
  position:relative; overflow:hidden; max-width:none; margin:0;
  background:var(--sp-page-bg, linear-gradient(160deg, #04050a 0%, var(--navy-950) 55%, var(--navy-900) 130%));
}
.sp-content.is-pomodoro .onb-tour-replay{background:rgba(var(--sp-overlay-rgb),0.06); border-color:rgba(var(--sp-overlay-rgb),0.14); color:rgba(var(--sp-overlay-rgb),0.75);}
.sp-content.is-pomodoro .onb-tour-replay:hover{border-color:var(--blue-500); color:var(--blue-500);}

/* z-index:1 (não negativo) — um valor negativo pintaria atrás até de
   elementos irmãos sem position, escondendo a fumaça atrás de qualquer
   texto/campo do próprio card; com z-index positivo baixo + o conteúdo
   (topbar/painel) em z-index:2, a ordem fica explícita e sem ambiguidade. */
.sp-smoke{
  position:absolute; z-index:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(16,185,129,0.55) 0%, rgba(16,185,129,0.22) 45%, transparent 75%);
  filter:blur(9px); mix-blend-mode:screen;
  opacity:0.8; transform:translate(-50%,-50%) scale(0.6);
  transition:opacity 1100ms ease-out, transform 1100ms ease-out;
}
.sp-smoke.is-fading{opacity:0; transform:translate(-50%,-50%) scale(2.6);}

.cp-panel[data-cp-panel="pomodoro"]{
  position:relative; z-index:2; padding:32px 26px 40px; min-height:calc(100vh - 170px);
}
.sp-pomo{
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.sp-pomo__top{display:flex; align-items:center; justify-content:space-between; width:100%; max-width:520px;}
.sp-pomo__brand{display:flex; align-items:center; gap:8px; font-family:var(--serif); font-size:16px; font-weight:700; color:var(--sp-text);}
.sp-pomo__brand .icon{width:17px; height:17px; color:var(--blue-500);}
.sp-pomo__top-actions{display:flex; align-items:center; gap:10px;}
.sp-pomo__streak{
  display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:rgba(var(--sp-overlay-rgb),0.7);
  background:rgba(var(--sp-overlay-rgb),0.06); border:1px solid rgba(var(--sp-overlay-rgb),0.1); border-radius:99px; padding:5px 12px;
}
.sp-pomo__streak .icon{width:13px; height:13px; color:var(--blue-500);}
.sp-pomo__gear-btn{
  display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%;
  background:rgba(var(--sp-overlay-rgb),0.06); border:1px solid rgba(var(--sp-overlay-rgb),0.1); color:rgba(var(--sp-overlay-rgb),0.7); cursor:pointer;
}
.sp-pomo__gear-btn:hover{background:rgba(var(--sp-overlay-rgb),0.12); color:var(--sp-text);}
.sp-pomo__gear-btn .icon{width:14px; height:14px;}

.sp-pomo__settings{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center; width:100%; max-width:520px;
  background:rgba(var(--sp-overlay-rgb),0.04); border:1px solid rgba(var(--sp-overlay-rgb),0.08); border-radius:12px; padding:14px 16px;
}
.sp-pomo__settings[hidden]{display:none;}
.sp-pomo__settings label{display:flex; flex-direction:column; gap:5px; font-size:11.5px; font-weight:600; color:rgba(var(--sp-overlay-rgb),0.6);}
.sp-pomo__settings input{
  font:inherit; font-size:13.5px; padding:7px 10px; border-radius:7px; width:100px;
  background:rgba(var(--sp-overlay-rgb),0.06); border:1px solid rgba(var(--sp-overlay-rgb),0.16); color:var(--sp-text); color-scheme:var(--sp-scheme);
}

.sp-pomo__sound{
  display:flex; flex-direction:column; gap:12px; width:100%; max-width:520px;
  background:rgba(var(--sp-overlay-rgb),0.04); border:1px solid rgba(var(--sp-overlay-rgb),0.08); border-radius:12px; padding:14px 16px;
}
.sp-pomo__sound[hidden]{display:none;}
.sp-pomo__sound-head{display:flex; align-items:center; justify-content:space-between;}
.sp-pomo__sound-title{display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:rgba(var(--sp-overlay-rgb),0.75); text-transform:uppercase; letter-spacing:0.04em;}
.sp-pomo__sound-title .icon{width:13px; height:13px; color:var(--blue-500);}

.sp-pomo__switch{position:relative; display:inline-block; width:38px; height:22px; flex-shrink:0;}
.sp-pomo__switch input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1;}
.sp-pomo__switch-track{position:absolute; inset:0; background:rgba(var(--sp-overlay-rgb),0.16); border-radius:99px; transition:background 0.15s;}
.sp-pomo__switch-track::before{content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--sp-text); transition:transform 0.15s;}
.sp-pomo__switch input:checked ~ .sp-pomo__switch-track{background:var(--blue-500);}
.sp-pomo__switch input:checked ~ .sp-pomo__switch-track::before{transform:translateX(16px);}

.sp-pomo__now-playing{display:flex; align-items:center; gap:10px; background:rgba(var(--sp-overlay-rgb),0.03); border-radius:9px; padding:8px 10px;}
.sp-pomo__now-playing-btn{
  display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; flex-shrink:0;
  background:rgba(var(--sp-overlay-rgb),0.08); border:none; color:rgba(var(--sp-overlay-rgb),0.7); cursor:pointer; transition:background 0.15s, color 0.15s;
}
.sp-pomo__now-playing-btn:hover{background:rgba(var(--sp-overlay-rgb),0.16); color:var(--sp-text);}
.sp-pomo__now-playing-btn .icon{width:12px; height:12px;}
.sp-pomo__now-playing-title{flex:1; font-size:13px; font-weight:600; color:var(--sp-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.sp-pomo__volume{display:flex; align-items:center; gap:10px; padding:0 2px;}
.sp-pomo__volume .icon{width:14px; height:14px; color:rgba(var(--sp-overlay-rgb),0.5); flex-shrink:0;}
.sp-pomo__volume input[type="range"]{
  flex:1; -webkit-appearance:none; appearance:none; height:4px; border-radius:99px;
  background:rgba(var(--sp-overlay-rgb),0.16); outline:none; cursor:pointer;
}
.sp-pomo__volume input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--blue-500); cursor:pointer;
}
.sp-pomo__volume input[type="range"]::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%; background:var(--blue-500); border:none; cursor:pointer;
}

.sp-pomo__track-tabs{display:flex; gap:4px; background:rgba(var(--sp-overlay-rgb),0.05); border:1px solid rgba(var(--sp-overlay-rgb),0.08); border-radius:99px; padding:3px;}
.sp-pomo__track-tab{
  flex:1; font:inherit; font-size:11.5px; font-weight:700; padding:6px 0; border-radius:99px;
  background:transparent; border:none; color:rgba(var(--sp-overlay-rgb),0.5); cursor:pointer; transition:background 0.15s, color 0.15s;
}
.sp-pomo__track-tab:hover{color:var(--sp-text);}
.sp-pomo__track-tab.active{background:rgba(16,185,129,0.18); color:var(--blue-500);}

.sp-pomo__track-list{list-style:none; margin:0; padding:0; max-height:220px; overflow-y:auto; display:flex; flex-direction:column; gap:2px;}
.sp-pomo__track{
  display:flex; align-items:center; gap:10px; padding:8px 8px; border-radius:8px; cursor:pointer; transition:background 0.15s;
}
.sp-pomo__track:hover{background:rgba(var(--sp-overlay-rgb),0.05);}
.sp-pomo__track.is-playing{background:rgba(16,185,129,0.1);}
.sp-pomo__track-num{width:16px; font-size:11px; color:rgba(var(--sp-overlay-rgb),0.35); text-align:right; flex-shrink:0;}
.sp-pomo__track-title{flex:1; font-size:13px; font-weight:600; color:rgba(var(--sp-overlay-rgb),0.8);}
.sp-pomo__track.is-playing .sp-pomo__track-title{color:var(--blue-500);}
.sp-pomo__track-playing-icon{display:none; width:13px; height:13px; color:var(--blue-500); flex-shrink:0;}
.sp-pomo__track.is-playing .sp-pomo__track-playing-icon{display:block;}

.sp-pomo__fields{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; width:100%; max-width:520px;}
.sp-pomo__fields label{flex:1; min-width:180px; display:flex; flex-direction:column; gap:5px; font-size:11.5px; font-weight:600; color:rgba(var(--sp-overlay-rgb),0.6);}
.sp-pomo__fields input{
  font:inherit; font-size:13px; padding:8px 11px; border-radius:8px;
  background:rgba(var(--sp-overlay-rgb),0.06); border:1px solid rgba(var(--sp-overlay-rgb),0.16); color:var(--sp-text); color-scheme:var(--sp-scheme);
}
.sp-pomo__fields input::placeholder{color:rgba(var(--sp-overlay-rgb),0.35);}
.sp-pomo__fields input:disabled, .sp-pomo__settings input:disabled{opacity:0.5;}

.sp-pomo__modes{display:flex; gap:4px; background:rgba(var(--sp-overlay-rgb),0.05); border:1px solid rgba(var(--sp-overlay-rgb),0.08); border-radius:99px; padding:4px;}
.sp-pomo__mode{
  display:flex; align-items:center; gap:6px; border:none; background:transparent; color:rgba(var(--sp-overlay-rgb),0.6);
  font-size:12.5px; font-weight:600; padding:8px 16px; border-radius:99px; cursor:pointer; transition:all .15s ease;
}
.sp-pomo__mode:hover:not(:disabled){color:var(--sp-text);}
.sp-pomo__mode.active{background:rgba(16,185,129,0.18); color:var(--blue-500);}
.sp-pomo__mode:disabled{cursor:default;}
.sp-pomo__mode-count{
  font-family:var(--mono); font-size:10.5px; background:rgba(var(--sp-overlay-rgb),0.12); border-radius:99px; padding:1px 7px;
}
.sp-pomo__mode.active .sp-pomo__mode-count{background:rgba(16,185,129,0.3);}

/* wrap 46px maior que o alvo visual do anel (230px) — o viewBox do SVG
   também cresceu na mesma proporção (240 -> 290, +25 de folga por lado),
   dando espaço pro glow (drop-shadow) do progresso esmaecer por completo
   antes de bater na borda do viewBox, em vez de ser cortado num retângulo
   visível ali. overflow:visible é reforço, não a causa raiz do corte. */
.sp-pomo__ring-wrap{position:relative; width:276px; height:276px; margin:4px auto;}
.sp-pomo__ring{width:100%; height:100%; overflow:visible; transform:rotate(-90deg);}
.sp-pomo__ring-track{fill:none; stroke:rgba(var(--sp-overlay-rgb),0.07); stroke-width:11;}
.sp-pomo__ring-progress{
  fill:none; stroke:var(--blue-500); stroke-width:11; stroke-linecap:round;
  filter:drop-shadow(0 0 9px rgba(16,185,129,0.55)); transition:stroke-dashoffset .3s linear;
}
.sp-pomo__ring-center{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;}
.sp-pomo__display{
  font-family:var(--mono); font-size:50px; font-weight:700; color:var(--sp-text); letter-spacing:0.02em; line-height:1;
}
.sp-pomo__status-pill{
  display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; color:var(--blue-500);
  background:rgba(16,185,129,0.14); border-radius:99px; padding:5px 13px;
}
.sp-pomo__status-dot{width:7px; height:7px; border-radius:50%; background:var(--blue-500);}

.sp-pomo__controls{display:flex; align-items:center; gap:16px;}
.sp-pomo__ctrl-btn{
  display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%;
  background:rgba(var(--sp-overlay-rgb),0.07); border:1px solid rgba(var(--sp-overlay-rgb),0.1); color:rgba(var(--sp-overlay-rgb),0.8); cursor:pointer;
}
.sp-pomo__ctrl-btn:hover{background:rgba(var(--sp-overlay-rgb),0.14); color:var(--sp-text);}
.sp-pomo__ctrl-btn .icon{width:17px; height:17px;}
.sp-pomo__main-btn{
  display:flex; align-items:center; gap:9px; border:none; border-radius:99px; padding:14px 30px;
  background:linear-gradient(135deg, var(--blue-500) 0%, var(--blue-600) 100%); color:var(--sp-text);
  font-size:14.5px; font-weight:700; cursor:pointer; box-shadow:0 10px 26px -10px rgba(16,185,129,0.65);
  transition:transform .15s ease;
}
.sp-pomo__main-btn:hover{transform:translateY(-1px);}
.sp-pomo__main-btn .icon{width:16px; height:16px;}

.sp-pomo__done{
  align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; background:rgba(16,185,129,0.1);
  border:1px solid rgba(16,185,129,0.3); color:var(--sp-text); border-radius:12px; padding:12px 18px; font-size:13px;
  font-weight:600; width:100%; max-width:520px;
}
.sp-pomo__done:not([hidden]){display:flex;}
.sp-pomo__done .icon{color:var(--blue-500);}

.sp-pomo__quote{font-size:12px; font-style:italic; color:rgba(var(--sp-overlay-rgb),0.4); text-align:center; margin:0; max-width:420px;}

/* Em telas baixas (celular com a barra do navegador visível, ex. 375×667)
   a soma de topo + campos + modos + anel de 276px + controles + frase
   passava da altura da viewport, obrigando a rolar pra ver o botão
   "Começar". clamp() com vmin (o menor entre largura e altura) encolhe o
   anel e a fonte do relógio proporcionalmente à tela mais curta, sem
   depender de um breakpoint de altura fixo — continua ~276px/50px em
   qualquer tela alta o bastante (desktop, tablet, celular em paisagem). */
@media (max-width:640px){
  .cp-panel[data-cp-panel="pomodoro"]{padding:18px 16px 28px; min-height:auto;}
  .sp-pomo{gap:12px;}
  .sp-pomo__ring-wrap{width:clamp(170px, 52vmin, 240px); height:clamp(170px, 52vmin, 240px); margin:0 auto;}
  .sp-pomo__display{font-size:clamp(30px, 11vmin, 42px);}
  .sp-pomo__status-pill{padding:4px 11px;}
  .sp-pomo__ring-center{gap:7px;}
  .sp-pomo__controls{gap:12px;}
  .sp-pomo__main-btn{padding:12px 24px;}
}

/* ---------- Campo de tempo estilo relógio (HH:MM) — usado nos registros de
   horas/minutos estudados (modal do Ciclo e aba Registro de Horas) no lugar
   de um <input type="number"> cru, pra deixar claro que o valor é um horário
   e não uma quantidade solta. Os dois campos numéricos alimentam um
   <input type="hidden"> com o valor real esperado pelo backend (ver
   bindTimeField em studies-panel.js). ---------- */
.sp-time-field{
  display:inline-flex; align-items:center; gap:8px; background:var(--white); border:1px solid var(--line);
  border-radius:10px; padding:8px 14px; width:fit-content;
}
.sp-time-field:focus-within{border-color:var(--blue-500); box-shadow:0 0 0 3px rgba(59,130,246,0.15);}
.sp-time-field__group{display:flex; flex-direction:column; align-items:center; gap:2px;}
.sp-time-field__part{
  width:38px; border:none; background:transparent; font-family:var(--mono); font-size:22px; font-weight:700;
  color:var(--navy-900); text-align:center; padding:0; -moz-appearance:textfield;
}
.sp-time-field__part::-webkit-outer-spin-button, .sp-time-field__part::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.sp-time-field__part:focus{outline:none; color:var(--blue-600);}
.sp-time-field__unit{font-size:9.5px; font-weight:700; color:var(--gray-500); text-transform:uppercase; letter-spacing:0.05em;}
.sp-time-field__colon{font-family:var(--mono); font-size:22px; font-weight:700; color:var(--gray-400); margin-top:-14px;}

/* ---------- Página independente (/minha-area/estudos) com menu lateral —
   mesma estrutura/mecanismo de tabs do Painel da Empresa (cd-shell/cd-sidebar/
   cd-nav em company-dashboard.css), só que com tema claro em vez de escuro.
   Reaproveita as mesmas classes funcionais (course-tab, cp-panel, cp-tabs
   via #cpNav) — nada na estrutura depende de cor. ---------- */
/* --sp-overlay-rgb alimenta todo rgba(var(--sp-overlay-rgb),0.0X) do arquivo
   (overlays/bordas translúcidos) e --sp-text todo var(--sp-text) (texto
   principal) — os dois viram tema claro de uma vez só no bloco
   html[data-tema="claro"] .sp-body no fim deste arquivo.

   Declarados em :root, não em .sp-body: .sp-content.is-questoes também é
   usado FORA da casca do Organizador, na página pública de questões
   (main/questoes_catalogo.html, body sem a classe sp-body) — só ali pra
   pegar emprestada a mesma pintura escura, nunca pro tema claro (aquela
   página nem inclui theme-early.js/theme-toggle.js). Com o token preso a
   .sp-body, a página pública ficava sem valor nenhum pra ele (filtro
   transparente). Em :root (nome namespaced, não usado fora deste arquivo)
   os dois contextos pegam o mesmo escuro-padrão, e só .sp-body entra no
   tema claro de verdade. Mesmo espírito de company-dashboard.css (ver lá
   o porquê de token local, não global) — mas global aqui porque o
   segundo contexto de uso não tem .sp-body pra ancorar a cópia local. */
:root{
  --sp-overlay-rgb:255,255,255;
  --sp-text:#fff;
  --sp-scheme:dark;
  --sp-gray-200:var(--gray-200);
  --sp-gray-300:var(--gray-300);
  --sp-gray-400:var(--gray-400);
  --sp-gray-500:var(--gray-500);
  --sp-bg-panel:var(--navy-900);
  --sp-bg-page:var(--navy-950);
  /* As 11 abas do Organizador (+ a página pública de questões) pintam
     .sp-content com este MESMO gradiente (4 ocorrências idênticas no
     arquivo, unificadas aqui) — e a barra lateral usa a variante dela
     logo abaixo. */
  --sp-page-bg:linear-gradient(160deg, #04050a 0%, var(--navy-950) 55%, var(--navy-900) 130%);
  --sp-sidebar-bg:linear-gradient(180deg, #04050a 0%, var(--navy-950) 100%);
}
.sp-body{
  margin:0; min-height:100vh; background:var(--gray-50); color:var(--navy-900); font-family:var(--sans);
}
.sp-shell{display:flex; align-items:stretch; min-height:100vh;}

/* ---------- Menu lateral no mesmo tom escuro do Cronômetro Pomodoro —
   fica assim independente da aba selecionada, não só na aba Pomodoro. ---------- */
.sp-sidebar{
  flex-shrink:0; width:236px; background:var(--sp-sidebar-bg);
  border-right:1px solid rgba(var(--sp-overlay-rgb),0.08);
  display:flex; flex-direction:column; padding:22px 16px; gap:18px; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sp-sidebar__brand{display:flex; align-items:center; gap:11px; padding:0 4px;}
/* Botão de rever o tour, logo abaixo da busca. Ocupa a linha inteira: no
   cabeçalho, ao lado do lápis, ele espremia o título do painel. */
.sp-sidebar__tour{
  display:flex; align-items:center; gap:8px; width:100%; margin-top:-8px;
  padding:8px 10px; border-radius:8px; cursor:pointer;
  background:rgba(var(--sp-overlay-rgb),0.05); border:1px solid rgba(var(--sp-overlay-rgb),0.12);
  font-family:inherit; font-size:12.5px; color:var(--gray-300); text-align:left;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease;
}
.sp-sidebar__tour:hover{background:rgba(var(--sp-overlay-rgb),0.09); border-color:var(--blue-500); color:var(--sp-text);}
.sp-sidebar__tour:focus-visible{outline:2px solid var(--blue-500); outline-offset:2px;}
.sp-sidebar__tour .icon{width:13px; height:13px; flex:0 0 auto;}
.sp-sidebar__logo{
  width:38px; height:38px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:rgba(16,185,129,0.16); color:var(--blue-500);
}
.sp-sidebar__logo .icon{width:18px; height:18px;}
.sp-sidebar__title{
  flex:1; min-width:0; font-family:var(--serif); font-size:14.5px; font-weight:700; color:var(--sp-text); line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.sp-sidebar__edit-btn{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(var(--sp-overlay-rgb),0.08); border:none; color:rgba(var(--sp-overlay-rgb),0.65); cursor:pointer; padding:0;
  transition:background .15s ease, color .15s ease;
}
.sp-sidebar__edit-btn:hover{background:rgba(var(--sp-overlay-rgb),0.16); color:var(--sp-text);}
.sp-sidebar__edit-btn .icon{width:12px; height:12px;}

.sp-sidebar__search{
  display:flex; align-items:center; gap:8px; background:rgba(var(--sp-overlay-rgb),0.06); border:1px solid rgba(var(--sp-overlay-rgb),0.1);
  border-radius:8px; padding:8px 10px;
}
.sp-sidebar__search .icon{width:13px; height:13px; color:rgba(var(--sp-overlay-rgb),0.4); flex-shrink:0;}
.sp-sidebar__search input{border:none; background:none; outline:none; color:var(--sp-text); font-size:12.5px; font-family:var(--sans); width:100%; color-scheme:var(--sp-scheme);}
.sp-sidebar__search input::placeholder{color:rgba(var(--sp-overlay-rgb),0.35);}

.sp-nav{display:flex; flex-direction:column; gap:2px; flex:1; margin-bottom:0;}
.sp-nav .course-tab{
  display:flex; align-items:center; gap:11px; padding:10px 12px; margin:0; border-radius:8px; border:none;
  background:none; text-decoration:none; color:rgba(var(--sp-overlay-rgb),0.65); font-size:13px; font-weight:500;
  transition:background .15s ease, color .15s ease; text-align:left; width:100%; cursor:pointer;
}
.sp-nav .course-tab:hover{background:rgba(var(--sp-overlay-rgb),0.08); color:var(--sp-text);}
.sp-nav .course-tab .icon{width:16px; height:16px; flex-shrink:0;}
.sp-nav .course-tab.active{background:var(--blue-500); color:#04241a; font-weight:700;}
.sp-nav .course-tab[hidden]{display:none;}

.sp-back-link{
  margin-top:auto; display:inline-flex; align-items:center; gap:7px; color:rgba(var(--sp-overlay-rgb),0.6); text-decoration:none; font-size:13px;
  padding:8px 14px; border-radius:8px; border:1px solid rgba(var(--sp-overlay-rgb),0.12); transition:background .15s ease, color .15s ease;
}
.sp-back-link:hover{background:rgba(var(--sp-overlay-rgb),0.08); color:var(--sp-text);}
.sp-back-link .icon{width:13px; height:13px;}

.sp-content{
  flex:1; min-width:0; max-width:1600px; margin:0 auto; padding:28px 32px 60px;
}

@media (max-width: 860px){
  /* A barra NÃO empilha mais acima do conteúdo: a trilha tem 52px e cabe na
     lateral mesmo num aparelho de 375px. O que não cabe é a trilha e o
     painel dividindo a largura, e é só isso que muda aqui — o painel vira
     um flyout (ver o bloco da trilha, mais abaixo).

     Antes desta versão a lista inteira ficava atrás de um botão "Menu":
     treze itens de seis categorias empilhados, que é o formato que a
     divisão em categorias existia para substituir. */
  /* O recolher do desktop (seta dupla) não faz sentido com o flyout. */
  .psb-toggle-row{display:none;}
  .sp-nav .course-tab{white-space:normal; width:100%; justify-content:flex-start;}
  .sp-content{max-width:none; padding:20px 16px 40px;}
}

/* ---------- Metas semanais (Resumo) ---------- */
.sp-goals{display:flex; flex-direction:column; gap:14px; margin-bottom:18px;}
.sp-goal{display:flex; flex-direction:column; gap:6px;}
.sp-goal__label{font-size:12.5px; font-weight:600; color:var(--gray-700);}
.sp-goal__bar{width:100%;}
.sp-goal__bar--purple .up-progress__bar{background:#8B5CF6;}
.sp-goal__value{font-size:12px; color:var(--gray-500); font-family:var(--mono);}

/* ---------- Tipo de sessão (badges no Registro de Horas) ---------- */
.sp-tipo-badge{
  display:inline-block; font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:0.03em;
  padding:3px 8px; border-radius:99px; text-transform:uppercase; white-space:nowrap;
}
.sp-tipo-badge--teoria{background:var(--blue-100); color:var(--blue-600);}
.sp-tipo-badge--revisao{background:#FEF3C7; color:#92400E;}
.sp-tipo-badge--questoes{background:#DBEAFE; color:#1E40AF;}
.sp-tipo-badge--leitura_lei{background:#F3E8FF; color:#6B21A8;}
.sp-tipo-badge--jurisprudencia{background:#FCE7F3; color:#9D174D;}

/* ---------- Ciclo de Estudos ---------- */
/* Banner de ciclo concluído — mais chamativo que o .sp-due-banner genérico
   (usado também pros flashcards) e vem ANTES dos botões de ação (não
   depois), pra guiar o olhar direto pro "Recomeçar Ciclo" logo abaixo. */
.sp-cycle-complete-banner{
  display:flex; align-items:flex-start; gap:12px; background:linear-gradient(135deg, rgba(16,185,129,0.12) 0%, rgba(16,185,129,0.05) 100%);
  border:1px solid rgba(16,185,129,0.35); border-radius:12px; padding:16px 18px; margin-bottom:16px;
}
.sp-cycle-complete-banner .icon{width:22px; height:22px; color:var(--blue-600); flex-shrink:0; margin-top:1px;}
.sp-cycle-complete-banner div{font-size:13.5px; line-height:1.55; color:var(--gray-700);}
.sp-cycle-complete-banner strong{display:block; font-size:15.5px; color:var(--navy-900); margin-bottom:2px;}
.sp-cycle-actions{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px;}
.sp-cycle-restart-btn--highlight{
  background:var(--blue-600); color:var(--sp-text); border-color:var(--blue-600);
  display:inline-flex; align-items:center; gap:6px;
  box-shadow:0 0 0 3px rgba(16,185,129,0.18);
}
.sp-cycle-restart-btn--highlight:hover{background:var(--blue-500); border-color:var(--blue-500);}
.sp-cycle-layout{display:grid; grid-template-columns:1fr 280px; gap:24px; align-items:start;}
@media (max-width: 860px){.sp-cycle-layout{grid-template-columns:1fr;}}
.sp-cycle-sequence{display:flex; flex-direction:column; gap:8px;}
.sp-cycle-slot{
  display:flex; align-items:center; gap:10px; width:100%; background:var(--gray-50); border:1px solid var(--line);
  border-radius:10px; padding:10px 12px; font:inherit; text-align:left; cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.sp-cycle-slot:hover{border-color:var(--blue-500); background:var(--white);}
.sp-cycle-slot.is-active{border-color:var(--blue-500); box-shadow:0 0 0 2px rgba(16,185,129,0.15);}
.sp-cycle-slot.is-done{opacity:0.6;}
.sp-cycle-slot__accent{width:6px; height:32px; border-radius:3px; flex-shrink:0;}
.sp-cycle-slot__main{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px;}
.sp-cycle-slot__row{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.sp-cycle-slot__name{font-size:13.5px; font-weight:600; color:var(--navy-900); text-decoration:none;}
.sp-cycle-slot.is-done .sp-cycle-slot__name{text-decoration:line-through; color:var(--gray-500);}
.sp-cycle-slot__time{
  display:flex; align-items:center; gap:5px; font-family:var(--mono); font-size:11.5px; color:var(--gray-500); flex-shrink:0;
}
.sp-cycle-slot__time .icon{width:12px; height:12px;}
.sp-cycle-slot.is-done .sp-cycle-slot__time{color:var(--blue-600);}
.sp-cycle-slot__progress{display:block; width:100%; height:5px; border-radius:3px; background:var(--gray-200); overflow:hidden;}
.sp-cycle-slot__progress-fill{display:block; height:100%; border-radius:3px; transition:width .2s ease;}
.sp-cycle-donut-box{display:flex; flex-direction:column; align-items:center; gap:10px; position:sticky; top:20px;}
.sp-cycle-donut-box svg{max-width:100%;}

/* ---------- Assistente de criação do Ciclo (modal) ---------- */
.sp-cycle-wizard-grid{
  display:flex; flex-direction:column; gap:10px; max-height:360px; overflow-y:auto; padding:2px;
}
.sp-cycle-wizard-card{
  border:1px solid var(--line); border-left-width:4px; border-radius:10px; padding:12px 16px;
  display:flex; align-items:center; gap:14px; background:var(--gray-50);
}
.sp-cycle-wizard-card strong{flex:0 0 130px; font-size:13px; color:var(--navy-900); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sp-cycle-wizard-card input[type="range"]{flex:1; accent-color:var(--blue-500);}
.sp-cycle-wizard-pct{
  flex:0 0 46px; text-align:right; font-family:var(--mono); font-size:13px; font-weight:700; color:var(--blue-600);
}
.sp-cycle-wizard-total{font-family:var(--mono); font-weight:700; color:var(--navy-900);}

/* ---------- Planos do Ciclo de Estudos (pills) ---------- */
.sp-plan-pills{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:18px;}
.sp-plan-pill{
  display:inline-flex; align-items:center; font-size:12.5px; font-weight:600; padding:7px 14px; border-radius:99px;
  border:1px solid var(--line); background:var(--white); color:var(--gray-600); text-decoration:none; cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.sp-plan-pill:hover{border-color:var(--blue-500); color:var(--blue-600);}
.sp-plan-pill.is-active{background:var(--blue-500); border-color:var(--blue-500); color:var(--sp-text);}
.sp-plan-pill--add{border-style:dashed; color:var(--blue-600);}
.sp-plan-pill__icon-btn{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--line); background:var(--white); color:var(--gray-500);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.sp-plan-pill__icon-btn:hover{border-color:var(--blue-500); color:var(--blue-600);}

/* ---------- Edição manual do Ciclo (modal) ---------- */
#spCycleEditRows{display:flex; flex-direction:column; gap:8px; max-height:340px; overflow-y:auto; padding:2px;}
.sp-cycle-edit-row{display:flex; gap:8px; align-items:center;}
.sp-cycle-edit-row select{flex:1; font:inherit; font-size:13px; padding:8px 10px; border:1px solid var(--line); border-radius:8px;}
.sp-cycle-edit-row input[type="number"]{width:80px; font:inherit; font-size:13px; padding:8px 10px; border:1px solid var(--line); border-radius:8px;}
.sp-cycle-edit-row .btn{font-size:11.5px; padding:7px 10px; white-space:nowrap;}

/* ---------- Ranking (top 20 alunos TAX PRO, por ciclos e por sessões) ---------- */
.sp-ranking-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:18px;}
.sp-ranking-grid > *{min-width:0;}
.sp-ranking{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:18px;}
.sp-ranking__title{display:flex; align-items:center; gap:8px; font-size:14.5px; font-weight:700; color:var(--navy-900); margin:0 0 14px;}
.sp-ranking__title .icon{width:15px; height:15px; color:var(--blue-600);}
.sp-ranking__list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px;}
.sp-ranking__row{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; font-size:13px; color:var(--gray-700);
  border-left:3px solid transparent;
}
.sp-ranking__row:nth-child(even){background:var(--gray-50);}
/* Linha do próprio usuário — sempre a mais destacada da lista, inclusive
   quando ela também é top 3 (a regra vem depois no CSS, então vence). */
.sp-ranking__row.sp-ranking__row--voce{
  background:var(--blue-50); border-left-color:var(--blue-600); font-weight:700; color:var(--navy-900);
  padding-left:9px;
}
.sp-ranking__pos{
  width:28px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:12px; color:var(--gray-500);
}
.sp-ranking__trophy{width:18px; height:18px;}
.sp-ranking__row--top1 .sp-ranking__trophy{color:#D4AF37;}
.sp-ranking__row--top2 .sp-ranking__trophy{color:#A8AEB8;}
.sp-ranking__row--top3 .sp-ranking__trophy{color:#C77C3F;}
.sp-ranking__nome{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sp-ranking__nome em{font-style:normal; color:var(--blue-600);}
.sp-ranking__valor{font-family:var(--mono); font-weight:700; color:var(--navy-900);}
.sp-ranking__voce-fora{
  margin:12px 0 0; padding-top:12px; border-top:1px dashed var(--line);
  font-size:12.5px; font-weight:600; color:var(--blue-600); text-align:center;
}
@media(max-width:760px){
  .sp-ranking-grid{grid-template-columns:1fr;}
}

/* ---------- Tema escuro da aba Questões ----------
   Mesmo mecanismo do Pomodoro: a classe .is-questoes é alternada em
   .sp-content pelo tab-switcher (studies-panel.js). Como todo o Banco de
   Questões é feito de cards claros (.qb-*, .dsp__*, .form-input), cada um
   precisa ser invertido explicitamente — sem isso sobrariam retângulos
   brancos no meio do fundo escuro. */
.sp-content.is-questoes{
  position:relative; max-width:none; margin:0;
  background:var(--sp-page-bg, linear-gradient(160deg, #04050a 0%, var(--navy-950) 55%, var(--navy-900) 130%));
}
.sp-content.is-questoes .onb-tour-replay{background:rgba(var(--sp-overlay-rgb),0.06); border-color:rgba(var(--sp-overlay-rgb),0.14); color:rgba(var(--sp-overlay-rgb),0.75);}
.sp-content.is-questoes .cp-panel__title{color:var(--sp-text);}
.sp-content.is-questoes .cp-panel__note,
.sp-content.is-questoes .cp-card__hint{color:rgba(var(--sp-overlay-rgb),0.6);}
.sp-content.is-questoes .cp-panel__note a,
.sp-content.is-questoes .cp-card__hint a{color:var(--blue-500);}

/* Superfícies: tudo que era branco vira translúcido sobre o fundo escuro. */
.sp-content.is-questoes .qb-row,
.sp-content.is-questoes .qb-practice,
.sp-content.is-questoes .qb-caderno,
.sp-content.is-questoes .qb-resumo,
.sp-content.is-questoes .qb-caderno-form,
.sp-content.is-questoes .dsp__card,
.sp-content.is-questoes .dsp__chart{
  background:rgba(var(--sp-overlay-rgb),0.05); border-color:rgba(var(--sp-overlay-rgb),0.12); box-shadow:none;
}
.sp-content.is-questoes .qb-row:hover{background:rgba(var(--sp-overlay-rgb),0.1); border-color:rgba(16,185,129,0.4);}
.sp-content.is-questoes .qb-option{background:rgba(var(--sp-overlay-rgb),0.05); border-color:rgba(var(--sp-overlay-rgb),0.12); color:rgba(var(--sp-overlay-rgb),0.9);}
.sp-content.is-questoes .qb-option:hover{background:rgba(var(--sp-overlay-rgb),0.1); border-color:var(--blue-500);}
.sp-content.is-questoes .qb-option--selected{background:rgba(16,185,129,0.16); border-color:var(--blue-500);}
.sp-content.is-questoes .qb-option--correct{background:rgba(16,185,129,0.2); border-color:#34D399; color:#D1FAE5;}
.sp-content.is-questoes .qb-option--wrong{background:rgba(239,68,68,0.18); border-color:#F87171; color:#FEE2E2;}
.sp-content.is-questoes .qb-option__letra{background:rgba(var(--sp-overlay-rgb),0.1); border-color:rgba(var(--sp-overlay-rgb),0.18); color:var(--sp-text);}

/* Texto */
.sp-content.is-questoes .qb-row__enunciado,
.sp-content.is-questoes .qb-practice__enunciado,
.sp-content.is-questoes .qb-caderno__nome,
.sp-content.is-questoes .qb-resumo__title,
.sp-content.is-questoes .qb-comments__title,
.sp-content.is-questoes .qb-comment__author,
.sp-content.is-questoes .dsp__chart-title,
.sp-content.is-questoes .qb-resumo__list strong{color:var(--sp-text);}
.sp-content.is-questoes .dsp__card-value{color:var(--sp-text);}
.sp-content.is-questoes .dsp__card-label,
.sp-content.is-questoes .qb-caderno__meta,
.sp-content.is-questoes .qb-caderno__filtros,
.sp-content.is-questoes .qb-practice__counter,
.sp-content.is-questoes .qb-comment__date,
.sp-content.is-questoes .qb-resumo__zerar-label,
.sp-content.is-questoes .qb-resumo__list li{color:rgba(var(--sp-overlay-rgb),0.62);}
/* A aba Questões roda no tema escuro: o ícone de ação nasce claro (fundo
   branco, borda cinza) e precisa virar. */
.sp-content.is-questoes .qb-acao{
  background:rgba(var(--sp-overlay-rgb),0.06); border-color:rgba(var(--sp-overlay-rgb),0.16); color:rgba(var(--sp-overlay-rgb),0.72);
}
.sp-content.is-questoes .qb-acao:hover{
  background:rgba(var(--sp-overlay-rgb),0.14); border-color:rgba(var(--sp-overlay-rgb),0.34); color:var(--sp-text);
}
.sp-content.is-questoes .qb-result__fundamentacao,
.sp-content.is-questoes .qb-comment__text{color:rgba(var(--sp-overlay-rgb),0.82);}
.sp-content.is-questoes .qb-resumo__list li{border-bottom-color:rgba(var(--sp-overlay-rgb),0.1);}
.sp-content.is-questoes .qb-resumo__zerar,
.sp-content.is-questoes .qb-result{border-top-color:rgba(var(--sp-overlay-rgb),0.12);}
.sp-content.is-questoes .dsp__card-value--certo,
.sp-content.is-questoes .qb-resumo__certo{color:#34D399;}
.sp-content.is-questoes .dsp__card-value--errado,
.sp-content.is-questoes .qb-resumo__errado{color:#F87171;}

/* Controles */
.sp-content.is-questoes .form-input{
  background:rgba(var(--sp-overlay-rgb),0.07); border-color:rgba(var(--sp-overlay-rgb),0.15); color:var(--sp-text);
}
.sp-content.is-questoes .form-input::placeholder{color:rgba(var(--sp-overlay-rgb),0.4);}
.sp-content.is-questoes .form-input option{background:var(--navy-900); color:var(--sp-text);}
.sp-content.is-questoes .qb-filter-check{color:rgba(var(--sp-overlay-rgb),0.7);}
.sp-content.is-questoes .qb-like-btn{border-color:rgba(var(--sp-overlay-rgb),0.18); color:rgba(var(--sp-overlay-rgb),0.75);}
.sp-content.is-questoes .qb-like-btn.is-active{background:rgba(16,185,129,0.18); border-color:var(--blue-500); color:#6EE7B7;}
.sp-content.is-questoes .qb-caderno__del{border-color:rgba(var(--sp-overlay-rgb),0.18); color:rgba(var(--sp-overlay-rgb),0.6);}
.sp-content.is-questoes .qb-practice__back{color:var(--blue-500);}
.sp-content.is-questoes .qb-caderno-form__count{color:#6EE7B7;}
.sp-content.is-questoes .qb-caderno-form__count.is-empty{color:#F87171;}

/* Badges e gráficos */
.sp-content.is-questoes .qb-tema-badge{background:rgba(var(--sp-overlay-rgb),0.1); color:rgba(var(--sp-overlay-rgb),0.75);}
.sp-content.is-questoes .qb-row__status{border-color:rgba(var(--sp-overlay-rgb),0.2); color:rgba(var(--sp-overlay-rgb),0.5);}
/* Acerto e erro em fundo sólido: no escuro, contorno + pastel não se lê.
   Mesma especificidade da regra acima e declaradas depois, senão o
   branco a 50% continua vencendo e o símbolo some. */
.sp-content.is-questoes .qb-row__status--certo{background:#10B981; border-color:#10B981; color:#04241B;}
.sp-content.is-questoes .qb-row__status--errado{background:#EF4444; border-color:#EF4444; color:#2B0707;}
.sp-content.is-questoes .up-progress{background:rgba(var(--sp-overlay-rgb),0.12);}
/* O texto ganha branco translúcido pro fundo escuro destas abas, mas o
   cartão (.cp-chart-empty) continua com o fundo --gray-50 da versão clara
   por baixo — texto quase branco sobre fundo quase branco, ilegível.
   Esvazia o fundo (o card .dsp__chart ao redor já é escuro) e troca a
   borda tracejada pra combinar. */
.sp-content.is-questoes .cp-chart-empty,
.sp-content.is-ciclo .cp-chart-empty,
.sp-content.is-resumo .cp-chart-empty{
  color:rgba(var(--sp-overlay-rgb),0.5); background:transparent; border-color:rgba(var(--sp-overlay-rgb),0.18);
}
.sp-content.is-questoes .sp-legend__item,
.sp-content.is-resumo .sp-legend__item{color:rgba(var(--sp-overlay-rgb),0.75);}
.sp-content.is-questoes .cp-chart svg text.cp-chart-donut-value,
.sp-content.is-ciclo .cp-chart svg text.cp-chart-donut-value,
.sp-content.is-resumo .cp-chart svg text.cp-chart-donut-value{fill:var(--sp-text);}
.sp-content.is-questoes .cp-chart svg text.cp-chart-donut-label,
.sp-content.is-ciclo .cp-chart svg text.cp-chart-donut-label,
.sp-content.is-resumo .cp-chart svg text.cp-chart-donut-label{fill:rgba(var(--sp-overlay-rgb),0.55);}
.sp-content.is-questoes .cp-chart svg text,
.sp-content.is-ciclo .cp-chart svg text,
.sp-content.is-resumo .cp-chart svg text{fill:rgba(var(--sp-overlay-rgb),0.75);}
.sp-content.is-questoes .cp-chart polygon[stroke="var(--gray-200)"],
.sp-content.is-questoes .cp-chart line,
.sp-content.is-ciclo .cp-chart line,
.sp-content.is-resumo .cp-chart line{stroke:rgba(var(--sp-overlay-rgb),0.18);}

/* Sub-abas: o .course-tab claro não tem contraste sobre o fundo escuro. */
.sp-content.is-questoes .sp-subtabs .course-tab{color:rgba(var(--sp-overlay-rgb),0.6);}
.sp-content.is-questoes .sp-subtabs .course-tab:hover{color:var(--sp-text);}
.sp-content.is-questoes .sp-subtabs .course-tab.active{color:var(--sp-text); border-bottom-color:var(--blue-500);}
.sp-content.is-questoes .dsp__periodo .course-tab{color:rgba(var(--sp-overlay-rgb),0.6);}
.sp-content.is-questoes .dsp__periodo .course-tab.active{color:var(--sp-text);}

/* ---------- Tema escuro das abas Biblioteca e Revisão Ativa ----------
   Mesmo mecanismo do Pomodoro/Questões: as classes .is-biblioteca/.is-revisao
   são alternadas em .sp-content pelo tab-switcher (studies-panel.js). Essas
   duas abas ficavam de fora da reforma escura do Organizador de Estudos —
   usam componentes genéricos (.cp-form, .entity-placeholder, .form-input)
   que nunca tinham sido invertidos, então sobrava um retângulo branco no
   meio do resto do painel, já escuro. */
.sp-content.is-biblioteca,
.sp-content.is-revisao{
  position:relative; max-width:none; margin:0;
  background:var(--sp-page-bg, linear-gradient(160deg, #04050a 0%, var(--navy-950) 55%, var(--navy-900) 130%));
}
.sp-content.is-biblioteca .onb-tour-replay,
.sp-content.is-revisao .onb-tour-replay{background:rgba(var(--sp-overlay-rgb),0.06); border-color:rgba(var(--sp-overlay-rgb),0.14); color:rgba(var(--sp-overlay-rgb),0.75);}
.sp-content.is-biblioteca .cp-panel__title,
.sp-content.is-revisao .cp-panel__title{color:var(--sp-text);}
.sp-content.is-biblioteca .cp-panel__note,
.sp-content.is-revisao .cp-panel__note,
.sp-content.is-biblioteca .cp-card__hint,
.sp-content.is-revisao .cp-card__hint{color:rgba(var(--sp-overlay-rgb),0.6);}
.sp-content.is-biblioteca .cp-panel__note a,
.sp-content.is-revisao .cp-panel__note a{color:var(--blue-500);}
.sp-content.is-biblioteca .sp-subtabs .course-tab,
.sp-content.is-revisao .sp-subtabs .course-tab{color:rgba(var(--sp-overlay-rgb),0.6);}
.sp-content.is-biblioteca .sp-subtabs .course-tab:hover,
.sp-content.is-revisao .sp-subtabs .course-tab:hover{color:var(--sp-text);}
.sp-content.is-biblioteca .sp-subtabs .course-tab.active,
.sp-content.is-revisao .sp-subtabs .course-tab.active{color:var(--sp-text); border-bottom-color:var(--blue-500);}
.sp-content.is-biblioteca .entity-placeholder,
.sp-content.is-revisao .entity-placeholder{
  background:rgba(var(--sp-overlay-rgb),0.03); border-color:rgba(var(--sp-overlay-rgb),0.18); color:var(--gray-400);
}

/* Formulários genéricos (.cp-form) — usados em "Novo flashcard" e "Novo
   resumo/erro", nenhum dos dois exclusivo do Banco de Questões, então nunca
   tinham sido escurecidos. */
.sp-content.is-biblioteca .cp-form,
.sp-content.is-revisao .cp-form{
  background:rgba(var(--sp-overlay-rgb),0.04); border-color:rgba(var(--sp-overlay-rgb),0.1);
}
.sp-content.is-biblioteca .cp-form__row label,
.sp-content.is-revisao .cp-form__row label{color:rgba(var(--sp-overlay-rgb),0.6);}
.sp-content.is-biblioteca .cp-form__row input,
.sp-content.is-revisao .cp-form__row input,
.sp-content.is-biblioteca .cp-form__row textarea,
.sp-content.is-revisao .cp-form__row textarea{
  background:rgba(var(--sp-overlay-rgb),0.05); border-color:rgba(var(--sp-overlay-rgb),0.14); color:var(--sp-text);
}
.sp-content.is-biblioteca .cp-form__row select,
.sp-content.is-revisao .cp-form__row select{
  background-color:rgba(var(--sp-overlay-rgb),0.05); border-color:rgba(var(--sp-overlay-rgb),0.14); color:var(--sp-text);
}
.sp-content.is-biblioteca .cp-form__row select option,
.sp-content.is-revisao .cp-form__row select option{background:var(--navy-900); color:var(--sp-text);}
.sp-content.is-biblioteca .form-input,
.sp-content.is-revisao .form-input{
  background:rgba(var(--sp-overlay-rgb),0.05); border-color:rgba(var(--sp-overlay-rgb),0.14); color:var(--sp-text);
}
.sp-content.is-biblioteca .form-input::placeholder,
.sp-content.is-revisao .form-input::placeholder{color:rgba(var(--sp-overlay-rgb),0.4);}
.sp-content.is-biblioteca .form-input option,
.sp-content.is-revisao .form-input option{background:var(--navy-900); color:var(--sp-text);}
.sp-content.is-biblioteca .form-label,
.sp-content.is-revisao .form-label{color:rgba(var(--sp-overlay-rgb),0.7);}

/* Revisão Ativa: flashcards, notas (resumos/erros/dúvidas) e a tabela
   "Todos os flashcards". */
.sp-content.is-revisao .sp-flashcard{background:rgba(var(--sp-overlay-rgb),0.04); border-color:rgba(var(--sp-overlay-rgb),0.1);}
.sp-content.is-revisao .sp-flashcard summary{color:var(--sp-text);}
.sp-content.is-revisao .sp-flashcard__verso{color:rgba(var(--sp-overlay-rgb),0.7);}
.sp-content.is-revisao .sp-note{background:rgba(var(--sp-overlay-rgb),0.04); border-color:rgba(var(--sp-overlay-rgb),0.1);}
.sp-content.is-revisao .sp-note__title{color:var(--sp-text);}
.sp-content.is-revisao .sp-note__content{color:rgba(var(--sp-overlay-rgb),0.72);}
.sp-content.is-revisao .sp-note__subject,
.sp-content.is-revisao .sp-note__tags{color:rgba(var(--sp-overlay-rgb),0.5);}
.sp-content.is-revisao .dash-table-wrap{background:rgba(var(--sp-overlay-rgb),0.04); border-color:rgba(var(--sp-overlay-rgb),0.1);}
.sp-content.is-revisao .dash-table th{background:rgba(var(--sp-overlay-rgb),0.05); color:rgba(var(--sp-overlay-rgb),0.6); border-bottom-color:rgba(var(--sp-overlay-rgb),0.1);}
.sp-content.is-revisao .dash-table td{color:rgba(var(--sp-overlay-rgb),0.85); border-bottom-color:rgba(var(--sp-overlay-rgb),0.08);}

/* Biblioteca: fontes primárias, glossário pessoal e a barra/estante de
   filmes — o cartaz dos títulos já é só a imagem (sem card em volta), então
   só a barra de filtros/botão e as listas de fonte/glossário precisam de
   tema escuro. */
.sp-content.is-biblioteca .sp-source,
.sp-content.is-biblioteca .sp-glossary-item{background:rgba(var(--sp-overlay-rgb),0.04); border-color:rgba(var(--sp-overlay-rgb),0.1);}
.sp-content.is-biblioteca .sp-source__citacao,
.sp-content.is-biblioteca .sp-glossary-item dt{color:var(--sp-text);}
.sp-content.is-biblioteca .sp-glossary-item dd{color:rgba(var(--sp-overlay-rgb),0.6);}
.sp-content.is-biblioteca .sp-source__copy{color:rgba(var(--sp-overlay-rgb),0.5);}
.sp-content.is-biblioteca .sp-source__copy:hover{color:var(--sp-text);}
.sp-content.is-biblioteca .sp-movie-add{color:var(--sp-text); border-color:rgba(var(--sp-overlay-rgb),0.18);}
.sp-content.is-biblioteca .sp-movie-add:hover{background:rgba(var(--sp-overlay-rgb),0.08); border-color:rgba(var(--sp-overlay-rgb),0.3);}
.sp-content.is-biblioteca .sp-movie-filters .spsel__btn{background:rgba(var(--sp-overlay-rgb),0.05); color:var(--sp-text); border-color:rgba(var(--sp-overlay-rgb),0.14);}
.sp-content.is-biblioteca .sp-movie-filters .spsel__btn:hover{background:rgba(var(--sp-overlay-rgb),0.08);}
.sp-content.is-biblioteca .sp-movie-filters .spsel__caret{color:rgba(var(--sp-overlay-rgb),0.5);}
.sp-content.is-biblioteca .sp-movie-filters__count{color:rgba(var(--sp-overlay-rgb),0.45);}
.sp-content.is-biblioteca .sp-movie-filters__clear{color:rgba(var(--sp-overlay-rgb),0.6);}
.sp-content.is-biblioteca .sp-movie-filters__clear:hover{color:var(--sp-text);}
.sp-content.is-biblioteca .sp-shelf__titulo{color:rgba(var(--sp-overlay-rgb),0.85);}
.sp-content.is-biblioteca .sp-shelf__titulo::after{background:rgba(var(--sp-overlay-rgb),0.14);}
.sp-content.is-biblioteca .sp-shelf__contagem{color:rgba(var(--sp-overlay-rgb),0.4);}

/* ---------- Tema escuro das 6 abas restantes do Organizador ----------
   Matérias, Ciclo de Estudos, Agenda, Registro de Horas, Tarefas de Estudo,
   Resumo/Desempenho e Ranking usavam só componentes genéricos (.cp-form,
   .cp-card, .dash-table, .entity-placeholder) nunca invertidos — mesmo
   problema do bloco de Biblioteca/Revisão Ativa acima, mesma solução: uma
   classe .is-X por aba (studies-panel.js) escurece .sp-content e repinta só
   os componentes que cada aba de fato usa. Modais (.modal-overlay) ficam de
   fora de propósito — são claros em todo o site, não só aqui. */
.sp-content.is-materias,
.sp-content.is-ciclo,
.sp-content.is-agenda,
.sp-content.is-registro,
.sp-content.is-tarefas,
.sp-content.is-resumo,
.sp-content.is-ranking{
  position:relative; max-width:none; margin:0;
  background:var(--sp-page-bg, linear-gradient(160deg, #04050a 0%, var(--navy-950) 55%, var(--navy-900) 130%));
}
.sp-content.is-materias .onb-tour-replay,
.sp-content.is-ciclo .onb-tour-replay,
.sp-content.is-agenda .onb-tour-replay,
.sp-content.is-registro .onb-tour-replay,
.sp-content.is-tarefas .onb-tour-replay,
.sp-content.is-resumo .onb-tour-replay,
.sp-content.is-ranking .onb-tour-replay{background:rgba(var(--sp-overlay-rgb),0.06); border-color:rgba(var(--sp-overlay-rgb),0.14); color:rgba(var(--sp-overlay-rgb),0.75);}
.sp-content.is-materias .cp-panel__title,
.sp-content.is-ciclo .cp-panel__title,
.sp-content.is-agenda .cp-panel__title,
.sp-content.is-registro .cp-panel__title,
.sp-content.is-tarefas .cp-panel__title,
.sp-content.is-resumo .cp-panel__title,
.sp-content.is-ranking .cp-panel__title{color:var(--sp-text);}
.sp-content.is-materias .cp-panel__note,
.sp-content.is-ciclo .cp-panel__note,
.sp-content.is-agenda .cp-panel__note,
.sp-content.is-registro .cp-panel__note,
.sp-content.is-tarefas .cp-panel__note,
.sp-content.is-resumo .cp-panel__note,
.sp-content.is-ranking .cp-panel__note,
.sp-content.is-materias .cp-card__hint,
.sp-content.is-ciclo .cp-card__hint,
.sp-content.is-agenda .cp-card__hint,
.sp-content.is-registro .cp-card__hint,
.sp-content.is-tarefas .cp-card__hint,
.sp-content.is-resumo .cp-card__hint,
.sp-content.is-ranking .cp-card__hint{color:rgba(var(--sp-overlay-rgb),0.6);}
.sp-content.is-materias .entity-placeholder,
.sp-content.is-ciclo .entity-placeholder,
.sp-content.is-agenda .entity-placeholder,
.sp-content.is-registro .entity-placeholder,
.sp-content.is-tarefas .entity-placeholder,
.sp-content.is-resumo .entity-placeholder,
.sp-content.is-ranking .entity-placeholder{
  background:rgba(var(--sp-overlay-rgb),0.03); border-color:rgba(var(--sp-overlay-rgb),0.18); color:var(--gray-400);
}

/* Formulários e tabelas genéricos, iguais aos de Biblioteca/Revisão Ativa. */
.sp-content.is-materias .cp-form,
.sp-content.is-ciclo .cp-form,
.sp-content.is-agenda .cp-form,
.sp-content.is-registro .cp-form,
.sp-content.is-tarefas .cp-form,
.sp-content.is-resumo .cp-form{
  background:rgba(var(--sp-overlay-rgb),0.04); border-color:rgba(var(--sp-overlay-rgb),0.1);
}
.sp-content.is-materias .cp-form__row label,
.sp-content.is-ciclo .cp-form__row label,
.sp-content.is-agenda .cp-form__row label,
.sp-content.is-registro .cp-form__row label,
.sp-content.is-tarefas .cp-form__row label,
.sp-content.is-resumo .cp-form__row label{color:rgba(var(--sp-overlay-rgb),0.6);}
.sp-content.is-materias .cp-form__row input,
.sp-content.is-ciclo .cp-form__row input,
.sp-content.is-agenda .cp-form__row input,
.sp-content.is-registro .cp-form__row input,
.sp-content.is-tarefas .cp-form__row input,
.sp-content.is-resumo .cp-form__row input,
.sp-content.is-materias .cp-form__row textarea,
.sp-content.is-agenda .cp-form__row textarea,
.sp-content.is-registro .cp-form__row textarea{
  background:rgba(var(--sp-overlay-rgb),0.05); border-color:rgba(var(--sp-overlay-rgb),0.14); color:var(--sp-text);
}
.sp-content.is-registro .cp-form__row select{
  background-color:rgba(var(--sp-overlay-rgb),0.05); border-color:rgba(var(--sp-overlay-rgb),0.14); color:var(--sp-text);
}
.sp-content.is-registro .cp-form__row select option{background:var(--navy-900); color:var(--sp-text);}

/* Agenda: duração em horas+min e "repetir em vários dias" — cores claras
   (var(--gray-500/600/700)) definidas em studies-panel.css ficavam
   ilegíveis no fundo escuro da aba; repete aqui o mesmo .sp-content.is-agenda
   usado no resto deste bloco. */
.sp-content.is-agenda .sp-duracao-unit{color:rgba(var(--sp-overlay-rgb),0.5);}
.sp-content.is-agenda .sp-agenda-repetir-toggle,
.sp-content.is-agenda .sp-weekday-picker__day{color:rgba(var(--sp-overlay-rgb),0.75);}
.sp-content.is-agenda .sp-weekday-picker__label{color:rgba(var(--sp-overlay-rgb),0.6);}

.sp-content.is-materias .dash-table-wrap,
.sp-content.is-registro .dash-table-wrap,
.sp-content.is-resumo .dash-table-wrap{background:rgba(var(--sp-overlay-rgb),0.04); border-color:rgba(var(--sp-overlay-rgb),0.1);}
.sp-content.is-materias .dash-table th,
.sp-content.is-registro .dash-table th,
.sp-content.is-resumo .dash-table th{background:rgba(var(--sp-overlay-rgb),0.05); color:rgba(var(--sp-overlay-rgb),0.6); border-bottom-color:rgba(var(--sp-overlay-rgb),0.1);}
.sp-content.is-materias .dash-table td,
.sp-content.is-registro .dash-table td,
.sp-content.is-resumo .dash-table td{color:rgba(var(--sp-overlay-rgb),0.85); border-bottom-color:rgba(var(--sp-overlay-rgb),0.08);}
.sp-content.is-ciclo .up-progress,
.sp-content.is-resumo .up-progress{background:rgba(var(--sp-overlay-rgb),0.12);}

/* Matérias: formulário "Nova matéria" e os tópicos expansíveis de cada uma. */
.sp-content.is-materias .sp-subject-details{background:rgba(var(--sp-overlay-rgb),0.04); border-color:rgba(var(--sp-overlay-rgb),0.1);}
.sp-content.is-materias .sp-subject-details summary{color:var(--sp-text);}
.sp-content.is-materias .sp-subject-details__hours{color:rgba(var(--sp-overlay-rgb),0.5);}
.sp-content.is-materias .sp-subject-details__body{border-top-color:rgba(var(--sp-overlay-rgb),0.1);}
.sp-content.is-materias .sp-progress-pill{background:rgba(var(--sp-overlay-rgb),0.1); color:var(--sp-text);}
.sp-content.is-materias .sp-topic{background:rgba(var(--sp-overlay-rgb),0.05);}
.sp-content.is-materias .sp-topic__status-btn{background:rgba(var(--sp-overlay-rgb),0.06); border-color:rgba(var(--sp-overlay-rgb),0.18);}
.sp-content.is-materias .sp-topic__title{color:var(--sp-text);}
.sp-content.is-materias .sp-topic--dominado .sp-topic__title{color:rgba(var(--sp-overlay-rgb),0.4);}
.sp-content.is-materias .sp-topic__label{color:rgba(var(--sp-overlay-rgb),0.5);}
.sp-content.is-materias .sp-topic-empty{color:rgba(var(--sp-overlay-rgb),0.5);}
.sp-content.is-materias .sp-topic-add-form input{
  background:rgba(var(--sp-overlay-rgb),0.05); border-color:rgba(var(--sp-overlay-rgb),0.14); color:var(--sp-text);
}

/* Ciclo de Estudos: pílulas de plano, cartões de progresso e a sequência. */
.sp-content.is-ciclo .sp-plan-pill{background:rgba(var(--sp-overlay-rgb),0.05); border-color:rgba(var(--sp-overlay-rgb),0.14); color:rgba(var(--sp-overlay-rgb),0.75);}
.sp-content.is-ciclo .sp-plan-pill:hover{color:var(--sp-text);}
.sp-content.is-ciclo .sp-plan-pill.is-active{color:var(--sp-text);}
.sp-content.is-ciclo .sp-plan-pill__icon-btn{background:rgba(var(--sp-overlay-rgb),0.05); border-color:rgba(var(--sp-overlay-rgb),0.14); color:rgba(var(--sp-overlay-rgb),0.6);}
.sp-content.is-ciclo .cp-card,
.sp-content.is-resumo .cp-card{background:rgba(var(--sp-overlay-rgb),0.045); border-color:rgba(var(--sp-overlay-rgb),0.1);}
.sp-content.is-ciclo .cp-card__label,
.sp-content.is-resumo .cp-card__label{color:var(--gray-400);}
.sp-content.is-ciclo .cp-card__value,
.sp-content.is-resumo .cp-card__value{color:var(--sp-text);}
.sp-content.is-ciclo .sp-cycle-complete-banner div{color:rgba(var(--sp-overlay-rgb),0.75);}
.sp-content.is-ciclo .sp-cycle-complete-banner strong{color:var(--sp-text);}
.sp-content.is-ciclo .sp-cycle-slot{background:rgba(var(--sp-overlay-rgb),0.04); border-color:rgba(var(--sp-overlay-rgb),0.1);}
.sp-content.is-ciclo .sp-cycle-slot:hover{background:rgba(var(--sp-overlay-rgb),0.06);}
.sp-content.is-ciclo .sp-cycle-slot__name{color:var(--sp-text);}
.sp-content.is-ciclo .sp-cycle-slot.is-done .sp-cycle-slot__name{color:rgba(var(--sp-overlay-rgb),0.4);}
.sp-content.is-ciclo .sp-cycle-slot__time{color:rgba(var(--sp-overlay-rgb),0.5);}
.sp-content.is-ciclo .sp-cycle-slot__progress{background:rgba(var(--sp-overlay-rgb),0.12);}

/* Agenda e Resumo compartilham a lista de lembretes/sessões planejadas. */
.sp-content.is-agenda .cp-reminder-list,
.sp-content.is-resumo .cp-reminder-list{color:inherit;}
.sp-content.is-agenda .cp-reminder,
.sp-content.is-resumo .cp-reminder{background:rgba(var(--sp-overlay-rgb),0.04); border-color:rgba(var(--sp-overlay-rgb),0.1);}
.sp-content.is-agenda .cp-reminder__title,
.sp-content.is-resumo .cp-reminder__title{color:var(--sp-text);}
.sp-content.is-agenda .cp-reminder__date,
.sp-content.is-resumo .cp-reminder__date{color:rgba(var(--sp-overlay-rgb),0.5);}

/* Registro de Horas: o campo de tempo (hh:min) do formulário principal. */
.sp-content.is-registro .sp-time-field{background:rgba(var(--sp-overlay-rgb),0.05); border-color:rgba(var(--sp-overlay-rgb),0.14);}
.sp-content.is-registro .sp-time-field__part{background:transparent; color:var(--sp-text);}
.sp-content.is-registro .sp-time-field__unit,
.sp-content.is-registro .sp-time-field__colon{color:rgba(var(--sp-overlay-rgb),0.5);}

/* Tarefas de Estudo: quadro kanban — mesmos valores do painel da Empresa
   (company-dashboard.css), que já é escuro. */
.sp-content.is-tarefas .kb-column{background:rgba(var(--sp-overlay-rgb),0.035); border-color:rgba(var(--sp-overlay-rgb),0.1);}
.sp-content.is-tarefas .kb-column--fixa .kb-column__header{background:rgba(59,130,246,0.12);}
.sp-content.is-tarefas .kb-column__header{border-bottom-color:rgba(var(--sp-overlay-rgb),0.1);}
.sp-content.is-tarefas .kb-column__title{color:var(--sp-text);}
.sp-content.is-tarefas .kb-column__count{color:var(--gray-300); background:rgba(var(--sp-overlay-rgb),0.08); border-color:rgba(var(--sp-overlay-rgb),0.12);}
.sp-content.is-tarefas .kb-column__delete-btn{color:var(--gray-400);}
.sp-content.is-tarefas .kb-column__delete-btn:hover{background:rgba(248,113,113,0.15); color:#F87171;}
.sp-content.is-tarefas .kb-card{background:rgba(var(--sp-overlay-rgb),0.05); border-color:rgba(var(--sp-overlay-rgb),0.1);}
.sp-content.is-tarefas .kb-card:hover{background:rgba(var(--sp-overlay-rgb),0.08);}
.sp-content.is-tarefas .kb-card__title{color:var(--sp-text);}
.sp-content.is-tarefas .kb-card__desc{color:var(--gray-400);}
.sp-content.is-tarefas .kb-column__add-btn{color:rgba(var(--sp-overlay-rgb),0.6); border-color:rgba(var(--sp-overlay-rgb),0.14);}
.sp-content.is-tarefas .kb-column__add-btn:hover{background:rgba(var(--sp-overlay-rgb),0.06); color:#60A5FA; border-color:#3B82F6;}

/* Resumo/Desempenho: cartões de meta semanal e os três gráficos. */
.sp-content.is-resumo .sp-goal__label{color:rgba(var(--sp-overlay-rgb),0.7);}
.sp-content.is-resumo .sp-goal__value{color:rgba(var(--sp-overlay-rgb),0.5);}
.sp-content.is-resumo .sp-heatmap-legend{color:rgba(var(--sp-overlay-rgb),0.5);}

/* Ranking: os três quadros top-20. */
.sp-content.is-ranking .sp-ranking{background:rgba(var(--sp-overlay-rgb),0.04); border-color:rgba(var(--sp-overlay-rgb),0.1);}
.sp-content.is-ranking .sp-ranking__title{color:var(--sp-text);}
.sp-content.is-ranking .sp-ranking__row{color:rgba(var(--sp-overlay-rgb),0.75);}
.sp-content.is-ranking .sp-ranking__row:nth-child(even){background:rgba(var(--sp-overlay-rgb),0.03);}
.sp-content.is-ranking .sp-ranking__row.sp-ranking__row--voce{background:rgba(59,130,246,0.14); color:var(--sp-text);}
.sp-content.is-ranking .sp-ranking__pos{color:rgba(var(--sp-overlay-rgb),0.5);}
.sp-content.is-ranking .sp-ranking__valor{color:var(--sp-text);}
.sp-content.is-ranking .sp-ranking__acerto{color:rgba(var(--sp-overlay-rgb),0.5);}
.sp-content.is-ranking .sp-ranking__row--voce .sp-ranking__acerto{color:var(--blue-500);}
.sp-content.is-ranking .sp-ranking__voce-fora{border-top-color:rgba(var(--sp-overlay-rgb),0.14); color:rgba(var(--sp-overlay-rgb),0.6);}

/* ---------- Banco de Questões ---------- */
/* `display:flex` numa regra incondicional sobrescreve o display:none nativo
   do atributo [hidden] — sem este override, esconder a lista/filtros pra
   abrir o painel de resolver questão não teria efeito nenhum. */
.qb-filters[hidden], .qb-list[hidden], #qbResponderBtn[hidden]{display:none;}

.qb-filters{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:18px;}
.qb-filters select{width:auto; min-width:180px;}
.qb-filter-check{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--gray-700); font-weight:600;}
.qb-empty{margin-top:8px;}

.qb-list{display:flex; flex-direction:column; gap:8px;}
.qb-row{
  display:flex; align-items:flex-start; gap:12px; width:100%; text-align:left; background:var(--white);
  border:1px solid var(--line); border-radius:10px; padding:12px 14px; cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.qb-row:hover{background:var(--gray-50); border-color:var(--blue-200, var(--line));}
.qb-row__status{
  flex-shrink:0; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; line-height:1; color:var(--gray-400); border:1px solid var(--line); margin-top:1px;
}
.qb-row__status--certo{color:var(--sp-text); border-color:#16A34A; background:#16A34A;}
.qb-row__status--errado{color:var(--sp-text); border-color:#DC2626; background:#DC2626;}
.qb-row__body{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px;}
.qb-row__enunciado{
  font-size:13.5px; color:var(--navy-900); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}
.qb-row__meta{display:flex; flex-wrap:wrap; gap:8px;}

.qb-tema-badge{
  display:inline-block; font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:0.02em;
  padding:3px 8px; border-radius:99px; background:var(--gray-100); color:var(--gray-700);
}
.qb-dificuldade{
  display:inline-block; font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:0.03em;
  padding:3px 8px; border-radius:99px; text-transform:uppercase; white-space:nowrap;
}
.qb-dificuldade--facil{background:#e4f3e5; color:#3f8a45;}
.qb-dificuldade--medio{background:var(--blue-100); color:var(--blue-600);}
.qb-dificuldade--dificil{background:#FEF3C7; color:#92400E;}
.qb-dificuldade--muito_dificil{background:#fde8e8; color:#b91c1c;}

/* ---------- Resolver questão ---------- */
.qb-practice{background:var(--white); border:1px solid var(--line); border-radius:14px; padding:22px 24px; box-shadow:var(--shadow-sm);}
.qb-practice__back{
  background:none; border:none; padding:0; margin-bottom:16px; font-size:12.5px; font-weight:600;
  color:var(--blue-600); cursor:pointer;
}
.qb-practice__back:hover{text-decoration:underline;}
.qb-practice__head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px;}
.qb-practice__counter{font-size:12px; font-family:var(--mono); color:var(--gray-500);}

/* Ações da questão: ícones à direita do cabeçalho. Ficam SEMPRE visíveis, ao
   contrário dos blocos que substituem — que só existiam depois de responder e
   se empilhavam abaixo da explicação. `margin-left:auto` empurra o par para a
   direita sem depender da ordem dos outros filhos do cabeçalho. */
.qb-acoes{display:flex; align-items:center; gap:6px; margin-left:auto;}
.qb-acao{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:9px; border:1px solid var(--line);
  background:var(--white); color:var(--gray-600); cursor:pointer;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.qb-acao:hover{color:var(--blue-600); border-color:var(--blue-500); background:var(--blue-50);}
.qb-acao .icon{width:17px; height:17px;}
/* O número de comentários fica na quina do ícone, como no aplicativo de
   e-mail: some quando é zero, para o ícone não anunciar conversa que não há. */
.qb-acao__badge{
  position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 4px;
  border-radius:99px; background:#0EA5E9; color:var(--sp-text); font-size:10px; font-weight:700;
  font-family:var(--mono); display:flex; align-items:center; justify-content:center;
}
.qb-acao__badge[hidden]{display:none;}

/* Pizza de acertos x erros (popup do ícone de estatística). Desenhada à mão
   em SVG: a CSP do site não permite biblioteca de gráfico. */
.qb-pizza{display:flex; align-items:center; gap:24px; flex-wrap:wrap; justify-content:center;}
.qb-pizza[hidden]{display:none;}
.qb-pizza__legenda{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
/* O modal desta página é CLARO (.modal do site) — não o escuro do Painel da
   Empresa, cuja folha (company-dashboard.css) o Organizador nem carrega.
   Texto claro aqui sumiria no branco. */
.qb-pizza__legenda li{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--gray-600);}
.qb-pizza__legenda b{color:var(--navy-900); font-family:var(--mono); font-size:15px;}
.qb-pizza__legenda small{color:var(--gray-500);}
.qb-pizza__cor{width:11px; height:11px; border-radius:3px; flex-shrink:0;}
.qb-pizza__total{
  color:var(--gray-500); font-size:12px; padding-top:8px; margin-top:2px;
  border-top:1px solid var(--line);
}
.qb-modal .qb-comments__list{max-height:52vh; overflow-y:auto; margin-bottom:16px;}
.qb-modal--stats .modal__subtitle{margin-bottom:20px;}

/* O popup está DENTRO de .sp-content.is-questoes e por isso herda o tema
   escuro da aba — texto branco sobre o fundo branco do modal, ou seja,
   invisível. O seletor repete o prefixo da aba só para ganhar a
   especificidade de volta; sem isso, a regra do tema escuro vence. */
.sp-content.is-questoes .qb-modal .qb-comment__author{color:var(--navy-900);}
.sp-content.is-questoes .qb-modal .qb-comment__text{color:var(--gray-700);}
.sp-content.is-questoes .qb-modal .qb-comment__date{color:var(--gray-500);}
.sp-content.is-questoes .qb-modal .cp-card__hint{color:var(--gray-500);}
.sp-content.is-questoes .qb-modal .form-input{
  background:var(--white); border-color:var(--line); color:var(--navy-900);
}
.sp-content.is-questoes .qb-modal .form-input::placeholder{color:var(--gray-400);}
.qb-practice__enunciado{font-size:15px; line-height:1.6; color:var(--navy-900); margin-bottom:18px;}

.qb-options{display:flex; flex-direction:column; gap:8px; margin-bottom:18px;}
.qb-option{
  display:flex; align-items:flex-start; gap:10px; width:100%; text-align:left; background:var(--gray-50);
  border:1px solid var(--line); border-radius:10px; padding:12px 14px; cursor:pointer; font-size:13.5px;
  color:var(--navy-900); line-height:1.5; transition:background .15s ease, border-color .15s ease;
}
.qb-option:hover{background:var(--white); border-color:var(--blue-300, var(--blue-500));}
.qb-option--selected{background:var(--blue-50); border-color:var(--blue-500);}
.qb-option--correct{background:#e4f3e5; border-color:#3f8a45; color:#265c2a;}
.qb-option--wrong{background:#fde8e8; border-color:#b91c1c; color:#7a1616;}
.qb-option__letra{
  flex-shrink:0; width:22px; height:22px; border-radius:50%; background:var(--white); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--gray-700);
}

.qb-result{margin-top:6px; padding-top:18px; border-top:1px solid var(--line);}
.qb-result__fundamentacao{font-size:13px; line-height:1.6; color:var(--gray-700); margin-bottom:14px;}
.qb-like-btn{
  background:none; border:1px solid var(--line); border-radius:99px; padding:6px 14px; font-size:12.5px;
  font-weight:600; color:var(--gray-700); cursor:pointer; margin-bottom:18px;
}
.qb-like-btn.is-active{background:var(--blue-50); border-color:var(--blue-500); color:var(--blue-600);}

/* Barra de navegacao da questao. Botoes so de icone: o rotulo aparece no
   hover, como tooltip, para nao ocupar espaco permanente logo abaixo da
   resolucao — que e onde o aluno esta lendo. */
.qb-nav{display:flex; gap:8px; margin-top:18px;}
.qb-nav__btn{
  position:relative; width:44px; height:38px; display:flex; align-items:center; justify-content:center;
  border-radius:8px; cursor:pointer;
  background:rgba(var(--sp-overlay-rgb),0.05); border:1px solid rgba(var(--sp-overlay-rgb),0.16);
  color:rgba(var(--sp-overlay-rgb),0.8); transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.qb-nav__btn:hover:not(:disabled){background:rgba(var(--sp-overlay-rgb),0.12); color:var(--sp-text); border-color:rgba(var(--sp-overlay-rgb),0.36);}
.qb-nav__btn:disabled{opacity:.35; cursor:not-allowed;}
.qb-nav__btn .icon{width:19px; height:19px;}
.qb-nav__icon--esq{transform:rotate(180deg);}

/* O tooltip vem de data-tip e so existe no hover/foco — inclusive no botao
   desabilitado, que e justamente quando o aluno quer saber por que ele nao
   funciona. */
.qb-nav__btn::after{
  content:attr(data-tip); position:absolute; bottom:calc(100% + 8px); left:50%;
  transform:translateX(-50%); white-space:nowrap; pointer-events:none;
  background:var(--navy-950); color:var(--sp-text); font-size:11.5px; font-weight:600;
  padding:6px 10px; border-radius:6px; box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transition:opacity .12s ease;
}
.qb-nav__btn:hover::after,
.qb-nav__btn:focus-visible::after{opacity:1; visibility:visible;}

/* ---------- Comentários (mesmo espírito de .debate-comment) ---------- */
.qb-comments__title{font-size:14px; color:var(--navy-900); margin-bottom:12px;}
.qb-comments__list{display:flex; flex-direction:column; gap:14px; margin-bottom:14px;}
.qb-comment{display:flex; gap:10px;}
.qb-comment__avatar{
  flex-shrink:0; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--blue-500) 0%, var(--blue-600) 100%); background-size:cover; background-position:center;
  color:var(--sp-text); font-size:11px; font-weight:700;
}
.qb-comment__body{flex:1; min-width:0;}
.qb-comment__header{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
.qb-comment__author{font-size:12.5px; font-weight:700; color:var(--navy-900);}
.qb-comment__date{font-size:10.5px; color:var(--gray-500);}
.qb-comment__text{font-size:13px; line-height:1.6; color:var(--gray-800); white-space:pre-wrap; margin-top:2px;}
.qb-comment-form textarea{margin-bottom:8px; resize:vertical;}

/* Ranking de questões da semana: ocupa a largura toda (fica acima da grade
   de dois quadros) e ganha uma coluna a mais pro percentual de acerto —
   premiar só volume incentivaria responder no chute. */
.sp-ranking--wide{margin-bottom:16px;}
.sp-ranking__acerto{
  flex-shrink:0; font-size:11.5px; font-family:var(--mono); color:var(--gray-500); white-space:nowrap;
}
.sp-ranking__row--voce .sp-ranking__acerto{color:var(--blue-600);}
@media(max-width:520px){
  .sp-ranking__acerto{display:none;}
}

/* ---------- Painel de desempenho (compartilhado entre a sub-aba Desempenho
   do Organizador e o card da Home da Minha Área) ---------- */
.dsp__periodo{display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap;}
.dsp__periodo .course-tab{width:auto; padding:6px 14px;}
.dsp__cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:12px; margin-bottom:18px;}
.dsp__card{
  background:var(--white); border:1px solid var(--line); border-radius:12px; padding:14px 16px;
  display:flex; flex-direction:column; gap:4px; box-shadow:var(--shadow-sm);
}
.dsp__card-label{font-size:11.5px; color:var(--gray-500); font-weight:600;}
.dsp__card-value{font-family:var(--mono); font-size:24px; font-weight:700; color:var(--navy-900);}
.dsp__card-value--certo{color:#15803d;}
.dsp__card-value--errado{color:#dc2626;}
.dsp__charts{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:18px;}
.dsp__chart{
  background:var(--white); border:1px solid var(--line); border-radius:12px; padding:16px 18px;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
}
/* O container precisa esticar (e não encolher pro conteúdo): um SVG que só
   tem viewBox não possui largura intrínseca, então num flex column com
   align-items:center ele colapsaria pra 0 e o gráfico sumiria. */
.dsp__chart .cp-chart{
  width:100%; display:flex; flex-direction:column; align-items:center;
}
.dsp__chart .cp-chart svg{max-width:100%; height:auto;}
.dsp__chart-title{font-size:13px; color:var(--navy-900); margin-bottom:10px;}
/* Cabeçalho do gráfico de assuntos: título à esquerda, filtro de matéria
   à direita. Quebra em duas linhas quando não couber lado a lado. */
.dsp__chart-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; flex-wrap:wrap; margin-bottom:10px;
}
.dsp__chart-head .dsp__chart-title{margin-bottom:0;}
.dsp__filtro{width:auto; max-width:100%; min-width:150px; font-size:12px; padding:5px 8px;}
/* O seletor nasce [hidden] quando há menos de duas matérias; sem este
   override, qualquer regra de display futura o traria de volta. */
.dsp__filtro[hidden]{display:none;}
/* Texto central do donut. Ficava com fill inline (var(--navy-900)), que
   vencia o override do tema escuro e sumia sobre o fundo do painel. */
.cp-chart-donut-value{font-family:var(--mono); font-size:24px; font-weight:700; fill:var(--navy-900);}
.cp-chart-donut-label{font-family:var(--mono); font-size:9px; fill:var(--gray-500);}

/* Variante do perfil: só o radar, sem cartões nem rosca — e sem a moldura
   de card, porque o bloco que o envolve (.up-panorama) já é o card. */
.dsp--so-radar .dsp__charts{grid-template-columns:1fr;}
.dsp--so-radar .dsp__chart{border:none; box-shadow:none; padding:0; background:none;}

/* ---------- Resumo do caderno ---------- */
.qb-resumo{
  background:var(--white); border:1px solid var(--line); border-radius:14px; padding:18px 20px;
  box-shadow:var(--shadow-sm); margin-top:16px;
}
.qb-resumo__head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap;}
.qb-resumo__title{font-size:15px; color:var(--navy-900);}
.qb-resumo__body{display:grid; grid-template-columns:1fr auto; gap:24px; align-items:start;}
.qb-resumo__list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
.qb-resumo__list li{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  font-size:13px; color:var(--gray-700); padding-bottom:8px; border-bottom:1px dashed var(--line);
}
.qb-resumo__list strong{font-family:var(--mono); color:var(--navy-900);}
.qb-resumo__certo{color:#15803d;}
.qb-resumo__errado{color:#dc2626;}
.qb-resumo__chart{display:flex; flex-direction:column; align-items:center; min-width:220px;}
.qb-resumo__zerar{display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line);}
.qb-resumo__zerar-label{font-size:12.5px; font-weight:700; color:var(--gray-700);}
.qb-caderno__actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:2px;}

@media(max-width:720px){
  .qb-resumo__body{grid-template-columns:1fr;}
  .qb-resumo__chart{min-width:0;}
}

/* ---------- Agrupamento da sidebar em categorias (mesmo padrão visual do
   .cd-nav__group-label do Painel do Advogado) ---------- */
.sp-nav__group-label{
  font-family:var(--mono); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--gray-500); padding:14px 12px 4px;
}
.sp-nav__group-label:first-child{padding-top:0;}

/* ---------- Cadernos (estilo TEC: filtro salvo com nome e progresso) ---------- */
.sp-subtabs{margin-bottom:16px;}
.qb-caderno-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px; margin-bottom:16px;}
.qb-caderno{
  display:flex; flex-direction:column; gap:8px; background:var(--white); border:1px solid var(--line);
  border-radius:12px; padding:14px 16px; box-shadow:var(--shadow-sm);
}
.qb-caderno__head{display:flex; align-items:flex-start; justify-content:space-between; gap:8px;}
.qb-caderno__nome{font-size:14px; font-weight:700; color:var(--navy-900); line-height:1.3;}
.qb-caderno__del{
  flex-shrink:0; width:22px; height:22px; border-radius:50%; border:1px solid var(--line); background:none;
  color:var(--gray-500); font-size:15px; line-height:1; cursor:pointer; padding:0;
}
.qb-caderno__del:hover{background:#fde8e8; border-color:#b91c1c; color:#b91c1c;}
.qb-caderno__filtros{font-size:11.5px; color:var(--gray-500); font-family:var(--mono);}
.qb-caderno__bar{width:100%;}
.qb-caderno__meta{font-size:12px; color:var(--gray-600);}
.qb-caderno__open{align-self:flex-start; margin-top:2px;}
.qb-caderno-new-btn{margin-bottom:16px;}

.qb-caderno-form{
  background:var(--gray-50); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-bottom:16px;
}
.qb-caderno-form__title{font-size:14px; color:var(--navy-900); margin-bottom:12px;}
.qb-caderno-form__count{font-size:13px; font-weight:600; color:var(--blue-600); margin:0 0 12px;}
.qb-caderno-form__count.is-empty{color:#b91c1c;}
.qb-caderno-form__actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
.qb-caderno-form__actions .form-input{flex:1; min-width:200px;}
.qb-caderno-form__err{margin:10px 0 0; font-size:12.5px; color:#b91c1c;}

@media(max-width:640px){
  .qb-filters{flex-direction:column; align-items:stretch;}
  .qb-filters select{width:100%;}
  .qb-caderno-grid{grid-template-columns:1fr;}
  .qb-caderno-form__actions{flex-direction:column; align-items:stretch;}
}

/* ---------- Filtro em árvore com multisseleção (Banco de Questões) -------- */
.qb-filters--tree { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }

.qb-tree { position: relative; flex: 1 1 320px; min-width: 260px; }
/* Sem isto, os chips de dificuldade e o contador — que vêm depois no
   fluxo — passam por cima do painel aberto. */
.qb-filters--tree { position: relative; z-index: 5; }
.qb-tree:has(.qb-tree__panel:not([hidden])) { z-index: 60; }
.qb-tree__summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 10px 12px; cursor: pointer; text-align: left;
  font: inherit; font-size: 13px; color: var(--navy-900);
  background: var(--sp-text); border: 1px solid var(--gray-200); border-radius: 8px;
}
.qb-tree.has-selection .qb-tree__summary { border-color: #10B981; font-weight: 600; }
.qb-tree__summary-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-tree__chev {
  flex: 0 0 auto; width: 0; height: 0; border-left: 4px solid transparent;
  border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .55;
}

.qb-tree__panel {
  position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 420px; overflow: auto; padding: 8px;
  background: var(--sp-text); border: 1px solid var(--gray-200); border-radius: 8px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
}
/* Quebra em duas linhas quando os dois botões não cabem ao lado da busca:
   sem isto o campo de busca some espremido em telas estreitas. */
.qb-tree__tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.qb-tree__search { flex: 1 1 180px; min-width: 0; font-size: 12.5px; padding: 7px 9px; }
.qb-tree__clear {
  flex: 0 0 auto; font: inherit; font-size: 12px; cursor: pointer;
  padding: 0 10px; border-radius: 6px; color: var(--gray-600);
  background: var(--gray-100); border: 1px solid var(--gray-200);
}
.qb-tree__rows { display: flex; flex-direction: column; }

.qb-tree__row {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 5px 6px; border-radius: 6px; font-size: 13px; line-height: 1.35;
}
.qb-tree__row:hover { background: var(--gray-50); }
.qb-tree__cb { flex: 0 0 auto; margin: 0; cursor: pointer; accent-color: #10B981; }
.qb-tree__label { flex: 1; min-width: 0; }
/* Nota de recorte da prova (anuladas, blocos fora). Segunda linha, menor e
   apagada: explica o número sem competir com o nome da prova. */
.qb-tree__nota { display: block; font-size: 11px; line-height: 1.4; color: var(--gray-500); margin-top: 1px; }
.qb-tree__total {
  flex: 0 0 auto; font-family: var(--mono); font-size: 10.5px;
  color: var(--gray-500); padding: 1px 6px; border-radius: 999px; background: var(--gray-100);
}

/* A indentação é o que comunica a hierarquia: sub-assunto recuado sob o
   assunto, assunto sob a sub-matéria, sub-matéria sob a matéria. A barra
   vertical à esquerda reforça o vínculo com o nível de cima. */
.qb-tree__row[data-nivel="0"] { font-weight: 700; font-size: 13.5px; margin-top: 6px; }
.qb-tree__row[data-nivel="0"]:first-child { margin-top: 0; }
.qb-tree__row[data-nivel="1"] { margin-left: 16px; font-weight: 600; color: var(--gray-700); }
.qb-tree__row[data-nivel="2"] { margin-left: 32px; }
.qb-tree__row[data-nivel="3"] {
  margin-left: 52px; font-size: 12.5px; color: var(--gray-600);
  border-left: 2px solid var(--gray-200); padding-left: 10px;
}
.qb-tree__row[data-nivel="3"] .qb-tree__total { font-size: 10px; }
.qb-tree__empty { margin: 8px 4px 4px; font-size: 12.5px; color: var(--gray-500); }

.qb-difs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.qb-difs__label {
  font-size: 11px; font-family: var(--mono); letter-spacing: .04em;
  text-transform: uppercase; color: var(--gray-500); margin-right: 2px;
}
.qb-dif-chip {
  font: inherit; font-size: 12.5px; cursor: pointer; padding: 7px 12px;
  border-radius: 999px; color: var(--gray-700);
  background: var(--sp-text); border: 1px solid var(--gray-200);
}
.qb-dif-chip:hover { border-color: #10B981; }
.qb-dif-chip.is-on { background: #10B981; border-color: #10B981; color: var(--sp-text); font-weight: 600; }

/* Tema escuro da aba Questões (ver .sp-content.is-questoes) */
.sp-content.is-questoes .qb-tree__summary,
.sp-content.is-questoes .qb-dif-chip {
  background: rgba(var(--sp-overlay-rgb),  .05); border-color: rgba(var(--sp-overlay-rgb),  .14); color: var(--sp-gray-200);
}
/* O painel flutuante precisa de fundo OPACO. Ele estava agrupado com o botão
   e os chips acima, herdando rgba(var(--sp-overlay-rgb),.05): funciona em elemento
   assentado sobre o card, mas num painel que paira sobre o conteúdo deixava
   tudo atrás transparecer, e a lista ficava ilegível. */
.sp-content.is-questoes .qb-tree__panel {
  background: var(--sp-bg-page);
  border-color: rgba(var(--sp-overlay-rgb),  .16);
  color: var(--sp-gray-200);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
}
.sp-content.is-questoes .qb-tree__row:hover { background: rgba(var(--sp-overlay-rgb),  .06); }
.sp-content.is-questoes .qb-tree__row[data-nivel="1"],
.sp-content.is-questoes .qb-tree__row[data-nivel="3"] { color: var(--sp-gray-300); }
/* A árvore vive sobre fundo escuro nesta aba; o cinza claro sumiria. */
.sp-content.is-questoes .qb-tree__nota { color: rgba(var(--sp-overlay-rgb),  .45); }
.sp-content.is-questoes .qb-tree__row[data-nivel="3"] { border-left-color: rgba(var(--sp-overlay-rgb),  .16); }
.sp-content.is-questoes .qb-tree__total,
.sp-content.is-questoes .qb-tree__clear {
  background: rgba(var(--sp-overlay-rgb),  .08); color: var(--sp-gray-400); border-color: rgba(var(--sp-overlay-rgb),  .12);
}
.sp-content.is-questoes .qb-dif-chip.is-on { background: #10B981; border-color: #10B981; color: #04231A; }

/* O atributo hidden nativo perde para as regras display: acima. */
.qb-tree [hidden], .qb-tree__panel[hidden] { display: none !important; }

/* ---------- Explicação estruturada da questão --------------------------- */
.qb-expl { display: flex; flex-direction: column; gap: 9px; }
.qb-expl__p { margin: 0; font-size: 13.5px; line-height: 1.62; color: var(--gray-700); }
.qb-expl__certa {
  padding: 9px 11px; border-radius: 8px; border-left: 3px solid #10B981;
  background: rgba(16, 185, 129, .08); color: var(--navy-900);
}
.qb-expl__bloco { padding-left: 2px; }
.qb-expl__pegadinha {
  padding: 9px 11px; border-radius: 8px; border-left: 3px solid #F59E0B;
  background: rgba(245, 158, 11, .09);
}
.qb-expl__norma {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .01em;
  color: var(--gray-500); padding-top: 2px; border-top: 1px solid var(--gray-200);
}

.sp-content.is-questoes .qb-expl__p { color: var(--sp-gray-300); }
.sp-content.is-questoes .qb-expl__certa { color: var(--sp-gray-200); background: rgba(16, 185, 129, .14); }
.sp-content.is-questoes .qb-expl__pegadinha { background: rgba(245, 158, 11, .14); }
.sp-content.is-questoes .qb-expl__norma { color: var(--sp-gray-400); border-top-color: rgba(var(--sp-overlay-rgb),  .12); }

/* ---------- Proveniência da questão (banca, órgão, ano) ----------------- */
.qb-prova-badge {
  display: inline-block; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .02em; padding: 3px 8px; border-radius: 999px;
  background: rgba(59, 130, 246, .12); color: #1D4ED8;
  border: 1px solid rgba(59, 130, 246, .28);
}
.qb-prova-badge--lista { font-size: 10px; padding: 2px 7px; }
.qb-tree--concursos .qb-tree__row[data-nivel="0"] { font-size: 13px; }
.qb-tree__row--autoral { margin-top: 8px; border-top: 1px solid var(--gray-200); padding-top: 8px; }

.sp-content.is-questoes .qb-prova-badge {
  background: rgba(96, 165, 250, .16); color: #93C5FD;
  border-color: rgba(96, 165, 250, .32);
}
.sp-content.is-questoes .qb-tree__row--autoral { border-top-color: rgba(var(--sp-overlay-rgb),  .14); }

/* ---------- Cabeçalho de proveniência da questão (estilo TEC) ----------- */
.qb-fonte {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 12px;
  padding: 9px 12px; border-radius: 8px;
  background: var(--gray-50); border: 1px solid var(--gray-200);
  font-size: 12px; line-height: 1.5; color: var(--gray-600);
}
.qb-fonte__item b { font-weight: 700; color: var(--gray-700); }
.qb-fonte__item--prova { flex-basis: 100%; }
.qb-atribuicao {
  margin: 18px 0 0; padding-top: 12px; border-top: 1px solid var(--gray-200);
  font-size: 11.5px; line-height: 1.6; color: var(--gray-500);
}

.sp-content.is-questoes .qb-fonte {
  background: rgba(var(--sp-overlay-rgb),  .05); border-color: rgba(var(--sp-overlay-rgb),  .14); color: var(--sp-gray-400);
}
.sp-content.is-questoes .qb-fonte__item b { color: var(--sp-gray-300); }
.sp-content.is-questoes .qb-atribuicao { color: #7E8CA0; border-top-color: rgba(var(--sp-overlay-rgb),  .12); }
.qb-fonte[hidden] { display: none !important; }

/* ---------- Aba de curadoria do painel administrativo ------------------ */
.qb-adm__codigo {
  font-family: var(--mono); font-size: 11px; padding: 2px 7px; border-radius: 5px;
  background: var(--gray-100); color: var(--gray-600);
}
.qb-adm__autoral {
  font-family: var(--mono); font-size: 10.5px; padding: 3px 8px; border-radius: 999px;
  background: rgba(16, 185, 129, .1); color: #047857; border: 1px solid rgba(16, 185, 129, .26);
}
.qb-adm__meta { font-size: 11.5px; color: var(--gray-500); margin-left: auto; }
.qb-adm__enunciado {
  margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; color: var(--navy-900);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.qb-adm__rodape {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; font-size: 11.5px; color: var(--gray-500);
}
.qb-adm__fonte { font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.dash-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.dash-filters .form-input { flex: 1 1 180px; max-width: 320px; }

/* ---------- Fundo do Organizador quando a aba Questões está ativa -------
   A aba Questões pinta .sp-content com um gradiente escuro, mas .sp-body
   segue claro. Enquanto o conteúdo cabe na tela ninguém nota; quando o
   painel de filtros abre, ele é absoluto e ESTENDE a área rolável para além
   da caixa de .sp-content — e ao rolar aparecia uma faixa branca embaixo.
   Pintar o corpo inteiro no mesmo tom resolve na raiz, e não só o sintoma.
   :has() é live: ao trocar de aba, o fundo volta sozinho. */
.sp-body:has(.sp-content.is-questoes),
.sp-body:has(.sp-content.is-pomodoro),
.sp-body:has(.sp-content.is-biblioteca),
.sp-body:has(.sp-content.is-revisao),
.sp-body:has(.sp-content.is-materias),
.sp-body:has(.sp-content.is-ciclo),
.sp-body:has(.sp-content.is-agenda),
.sp-body:has(.sp-content.is-registro),
.sp-body:has(.sp-content.is-tarefas),
.sp-body:has(.sp-content.is-resumo),
.sp-body:has(.sp-content.is-ranking) {
  background: var(--sp-bg-page);
}

/* ---------- Cronômetro de sessão do Banco de Questões (qb-pomodoro) ------ */
/* Vive dentro de .sp-content.is-questoes, que é escuro — por isso as cores
   são declaradas aqui já no tom do painel, e não herdadas do tema claro. */
/* Cronometro flutuante da sessao de questoes. Mesmo formato do player de
   cursos (.cp-pomo): pilula fixa no canto que expande num painel. A paleta
   e escura porque a aba Questoes inteira e escura — o que se copiou dali
   foi a FORMA, nao a cor. */
.qbp{position:fixed; right:24px; bottom:24px; z-index:180;}
.qbp__toggle{
  display:flex; align-items:center; gap:8px; padding:12px 16px; border-radius:99px;
  border:1px solid rgba(var(--sp-overlay-rgb),0.14); cursor:pointer;
  background:var(--navy-900); color:var(--sp-text); box-shadow:var(--shadow-lg);
  transition:transform .15s ease, background .15s ease;
}
.qbp__toggle:hover{transform:translateY(-2px);}
.qbp__toggle .icon{width:18px; height:18px;}
.qbp.is-rodando .qbp__toggle{background:var(--blue-600); border-color:var(--blue-500);}
.qbp__toggle-time{
  font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:0.02em;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.qbp__toggle-time[hidden]{display:none;}

.qbp__panel[hidden]{display:none;}
.qbp__panel{
  position:absolute; right:0; bottom:calc(100% + 12px); width:270px; padding:18px;
  border-radius:var(--radius); background:var(--navy-900);
  border:1px solid rgba(var(--sp-overlay-rgb),0.14); box-shadow:var(--shadow-lg);
}
.qbp__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.qbp__head-title{font-family:var(--serif); font-size:16px; font-weight:700; color:var(--sp-text);}
.qbp__close{
  background:none; border:none; cursor:pointer; padding:4px; display:flex;
  color:rgba(var(--sp-overlay-rgb),0.55);
}
.qbp__close:hover{color:var(--sp-text);}

.qbp__time{
  font-family:var(--mono); font-size:40px; font-weight:700; color:var(--sp-text);
  line-height:1; text-align:center; margin-bottom:16px; letter-spacing:0.02em;
  font-variant-numeric:tabular-nums;
}
.qbp__controls{display:flex; align-items:center; gap:8px; margin-bottom:14px;}
.qbp__play{flex:1;}
.qbp__ctrl{
  width:38px; height:38px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  border-radius:8px; background:transparent; border:1px solid rgba(var(--sp-overlay-rgb),0.18);
  color:rgba(var(--sp-overlay-rgb),0.7); cursor:pointer;
}
.qbp__ctrl:hover{color:var(--sp-text); border-color:rgba(var(--sp-overlay-rgb),0.4);}

.qbp__campos{display:flex; gap:10px;}
.qbp__meta{display:flex; flex-direction:column; gap:4px; flex:1; min-width:0;}
.qbp__meta-label{font-size:11.5px; color:rgba(var(--sp-overlay-rgb),0.6); font-weight:600;}
.qbp__meta-input{width:100%; padding:6px 8px; font-size:13px;}
.qbp__meta-input:disabled{opacity:.5; cursor:not-allowed;}

.qbp__progresso[hidden], .qbp__fim[hidden]{display:none;}
.qbp__progresso{margin-top:14px;}
.qbp__barra{
  height:6px; border-radius:99px; background:rgba(var(--sp-overlay-rgb),0.12); overflow:hidden;
}
.qbp__barra-fill{
  display:block; height:100%; width:0; border-radius:99px;
  background:var(--blue-500); transition:width .25s ease;
}
.qbp__contagem{margin:8px 0 0; font-size:12px; color:rgba(var(--sp-overlay-rgb),0.75); line-height:1.5;}
.qbp__contagem strong{color:var(--sp-text);}
.qbp__certos{color:#6EE7B7; font-weight:700;}
.qbp__errados{color:#F87171; font-weight:700;}

.qbp__fim{
  margin-top:14px; padding-top:14px; border-top:1px solid rgba(var(--sp-overlay-rgb),0.12);
}
.qbp__fim-texto{margin:0 0 12px; font-size:12.5px; color:var(--sp-text); line-height:1.55;}
.qbp__fim-acoes{
  display:flex; flex-direction:column; align-items:stretch; gap:8px; margin-top:12px;
}
.qbp__dispensar{
  background:none; border:none; padding:0; cursor:pointer;
  font-size:12.5px; color:rgba(var(--sp-overlay-rgb),0.6); text-decoration:underline;
}
.qbp__dispensar:hover{color:var(--sp-text);}

@media (max-width:640px){
  .qbp{right:16px; bottom:16px;}
  .qbp__panel{width:calc(100vw - 32px); right:-8px;}
  .qbp__time{font-size:34px;}
}

/* ==========================================================================
   Barra lateral em duas partes: TRILHA de ícones + PAINEL da categoria.

   Substitui a lista única de onze itens. O ganho não é estético: com a Sala
   de Aula a lista passou a exigir percorrer tudo para achar qualquer coisa;
   agora a pessoa escolhe o assunto e lê cinco itens.
   ========================================================================== */

/* A barra deixa de ter padding próprio — cada metade cuida do seu. */
.sp-sidebar{
  width:auto; padding:0; gap:0; flex-direction:row; align-items:stretch;
}

.sp-rail{
  flex:0 0 56px; width:56px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:14px 0; background:rgba(0,0,0,0.35);
  border-right:1px solid rgba(var(--sp-overlay-rgb),0.07);
}
.sp-rail__botao{
  appearance:none; cursor:pointer; border:0; background:none; padding:0;
  width:40px; height:40px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:rgba(var(--sp-overlay-rgb),0.5);
  transition:background .15s ease, color .15s ease;
}
.sp-rail__botao .icon{width:18px; height:18px;}
.sp-rail__botao:hover{background:rgba(var(--sp-overlay-rgb),0.09); color:var(--sp-text);}
.sp-rail__botao:focus-visible{outline:2px solid var(--blue-500); outline-offset:2px;}
/* A categoria aberta é marcada por fundo E por um fio à esquerda: cor
   sozinha não distingue para quem não enxerga verde. */
.sp-rail__botao.is-ativo{
  background:rgba(16,185,129,0.16); color:var(--blue-500);
  box-shadow:inset 3px 0 0 var(--blue-500);
}
.sp-rail__voltar{margin-top:auto;}

.sp-painel-menu{
  flex:0 0 212px; width:212px;
  display:flex; flex-direction:column; gap:16px;
  padding:18px 14px; min-width:0; overflow-y:auto;
}

.sp-painel-menu__cabecalho{margin-bottom:-6px;}
.sp-painel-menu__cabecalho[hidden]{display:none;}
.sp-painel-menu__titulo{
  font-family:var(--serif); font-size:15px; font-weight:700;
  color:var(--sp-text); margin:0 0 3px;
}
.sp-painel-menu__desc{
  font-size:11.5px; line-height:1.45; color:rgba(var(--sp-overlay-rgb),0.5); margin:0;
}

.sp-grupo{display:flex; flex-direction:column; gap:2px;}
.sp-grupo[hidden]{display:none;}
/* No desktop o rótulo repetiria o título do cabeçalho, logo acima. */
.sp-grupo__rotulo{display:none;}

/* Recolher esconde o PAINEL e deixa a trilha — que é justamente a versão
   compacta do menu, e não uma tira de ícones sem significado. */
.is-sidebar-collapsed .sp-painel-menu{display:none;}
.sp-shell.is-sidebar-collapsed .sp-sidebar{width:auto; padding:0;}

@media(max-width:860px){
  /* A trilha fica; o PAINEL é que sai do fluxo. Lado a lado eles somariam
     264px dos 375px de um aparelho comum, e não sobraria conteúdo — então
     aqui o painel abre por cima, sai ao escolher um item e volta a deixar
     a tela inteira para o que a pessoa foi ver.

     A trilha acompanha a rolagem (`sticky` na barra) porque ela é a
     navegação: numa página longa, um menu que fica lá em cima obriga a
     rolar de volta só para trocar de seção. */
  .sp-rail{flex:0 0 52px; width:52px; padding:10px 0;}
  /* `position:sticky` abre um contexto de empilhamento SEMPRE, com ou sem
     z-index. Sem esta linha o flyout ficava preso dentro do contexto da
     barra, que vale 0, e sumia atrás de `.cp-panel` (z-index 2) — desenhado
     no lugar certo, do tamanho certo, e invisível. */
  .sp-sidebar{z-index:40;}
  .sp-painel-menu{
    position:fixed; top:0; left:52px; bottom:0; z-index:40;
    width:min(268px, calc(100vw - 52px));
    display:none; padding:18px 14px;
    /* Era um gradiente escuro fixo, igual ao antigo .sp-sidebar antes do
       tema claro — o texto aqui dentro (--sp-text etc.) já virava escuro no
       tema claro, então ficava texto escuro sobre fundo escuro, ilegível.
       --sp-sidebar-bg é o mesmo token já usado pela barra no desktop
       (claro:branco / escuro:gradiente), reaproveitado aqui em vez de
       inventar uma 2ª cópia que o tema claro não alcançava. */
    background:var(--sp-sidebar-bg);
    border-right:1px solid rgba(var(--sp-overlay-rgb),0.10);
    box-shadow:0 18px 44px rgba(0,0,0,0.5);
  }
  .sp-sidebar.is-menu-open .sp-painel-menu{display:flex;}
  /* O cabeçalho do flyout já nomeia a categoria aberta. */
  .sp-grupo__rotulo{display:none;}
}

/* O "Como funciona?" saiu da barra lateral: lá ele dividia espaço com os
   itens de navegação, dentro do painel que existe para listar categorias.
   Aqui ele acompanha o conteúdo, encostado à direita e acima da seção
   aberta — a mesma posição que ele já tinha no Painel da Empresa. */
.sp-ajuda{display:flex; justify-content:flex-end; margin-bottom:14px;}

/* Esqueleto do enunciado e das alternativas enquanto a questão carrega.
   Elas deixaram de vir no HTML da página (era mais de 1 MB para mostrar uma
   questão por vez) e chegam pelo `/dados`. O esqueleto existe para a caixa
   nascer do tamanho certo: sem ele o texto empurra o resto da tela quando
   aparece, e a pessoa perde o lugar onde estava olhando. */
.qb-esqueleto{
  color:transparent !important; user-select:none; pointer-events:none;
  border-radius:8px; min-height:2.4em;
  background:linear-gradient(90deg,
    rgba(var(--sp-overlay-rgb),.06) 0%, rgba(var(--sp-overlay-rgb),.12) 50%, rgba(var(--sp-overlay-rgb),.06) 100%);
  background-size:200% 100%;
  animation:qbEsqueleto 1.1s ease-in-out infinite;
}
.qb-option.qb-esqueleto{min-height:3.2em; margin-bottom:8px; border-color:transparent;}
@keyframes qbEsqueleto{
  from{background-position:200% 0;}
  to{background-position:-200% 0;}
}
/* Quem pediu menos movimento não recebe a faixa correndo — só a caixa. */
@media (prefers-reduced-motion:reduce){
  .qb-esqueleto{animation:none;}
}

/* =============================================================================
   TEMA CLARO (Organizador de Estudos) — mesmo mecanismo de company-dashboard.css
   (opt-in via botão na barra lateral, js/theme-toggle.js, escuro continua
   padrão; chave de localStorage compartilhada com Empresa/Advogado, então
   trocar em um painel reflete nos outros). O atributo vive em <html>
   (lido por js/theme-early.js antes do <body> existir, evita flash), mas o
   SELETOR abaixo mira .sp-body — mesmo motivo do company-dashboard.css: um
   elemento com declaração própria de --sp-* nunca herda a de um ancestral.

   As 11 abas do Organizador usam --sp-page-bg para o fundo (eram 4
   ocorrências idênticas do mesmo gradiente, unificadas nesta sessão) e
   --sp-overlay-rgb/--sp-text para quase todo overlay/texto branco
   translúcido sobre esse fundo. --sp-gray-200/300/400/500 só entram onde
   o texto está DIRETO no fundo escuro da página — a maior parte do
   arquivo (flashcards, fichas, modal de filme, questões, comentários,
   cadernos, linhas do ranking) são cartões BRANCOS dentro da casca escura
   e usam os tokens globais (--navy-900, --gray-500) sem precisar mudar
   aqui: um cartão branco lê igual em qualquer tema da página ao redor. */
html[data-tema="claro"] .sp-body{
  --sp-overlay-rgb:15,23,42;
  --sp-text:var(--navy-900);
  --sp-scheme:light;
  --sp-gray-200:var(--navy-800);
  --sp-gray-300:var(--navy-700);
  --sp-gray-400:var(--gray-600);
  --sp-gray-500:var(--navy-700);
  --sp-bg-panel:var(--white);
  --sp-bg-page:var(--gray-50);
  --sp-page-bg:var(--gray-50);
  --sp-sidebar-bg:var(--white);
}
/* O calendário mensal (Agenda de Estudos) cuida do próprio tema claro em
   calendario-mensal.css (html[data-tema="claro"] .calendario) — --cal-* é
   declarada direto em .calendario, um override aqui em .sp-body nunca a
   alcançaria. */

/* ---------- Fumaça do Pomodoro no tema claro -------------------------------
   .sp-smoke é feita pra CLAREAR um fundo escuro (mix-blend-mode:screen):
   sobre um fundo claro, screen quase não muda nada — a fumaça praticamente
   some. multiply faz o oposto (escurece), e funciona bem sobre --gray-50:
   mesma cor-base, opacidade um pouco menor porque multiply "pega" mais
   forte que screen na mesma transparência. */
html[data-tema="claro"] .sp-smoke{
  background:radial-gradient(circle, rgba(16,185,129,0.4) 0%, rgba(16,185,129,0.16) 45%, transparent 75%);
  mix-blend-mode:multiply;
  opacity:0.65;
}