/**
 * cards-redesign.css — Pele DARK/emerald do módulo Cartas ("Anki do nyvvo").
 *
 * O cards.css original é tema claro (fundo branco, texto #1a1a1a !important).
 * Esta camada, carregada DEPOIS, re-skinna o módulo pro dark/emerald do resto
 * do nyvvo (igual ao mockup aprovado). Paleta escopada no módulo pra não
 * depender de tokens externos e não vazar pro resto do app.
 *
 * Tudo scoped em .cards-module-root. Onde o original usa !important (cor/bg
 * claros), aqui reforço com !important pra vencer.
 */

.cards-module-root {
  --cd-bg-0: oklch(0.15 0.008 250);
  --cd-bg-1: oklch(0.185 0.008 250);
  --cd-bg-2: oklch(0.22 0.009 250);
  --cd-bg-3: oklch(0.26 0.010 250);
  --cd-border: oklch(0.30 0.010 250 / 0.55);
  --cd-border-soft: oklch(0.37 0.012 250 / 0.65);
  --cd-t1: oklch(0.97 0.005 250);
  --cd-t2: oklch(0.79 0.012 250);
  --cd-t3: oklch(0.63 0.012 250);
  --cd-t4: oklch(0.50 0.010 250);
  --cd-accent: oklch(0.76 0.16 152);
  --cd-accent-strong: oklch(0.82 0.17 152);
  --cd-accent-soft: oklch(0.76 0.16 152 / 0.14);
  --cd-accent-line: oklch(0.76 0.16 152 / 0.40);
  --cd-accent-fg: oklch(0.16 0.04 152);
  --cd-danger: oklch(0.68 0.18 27);
  --cd-danger-soft: oklch(0.68 0.18 27 / 0.15);
  --cd-info: oklch(0.72 0.11 240);
  --cd-info-soft: oklch(0.72 0.11 240 / 0.15);
  --cd-warn: oklch(0.80 0.14 75);
  --cd-r-sm: 8px; --cd-r-md: 12px; --cd-r-lg: 16px; --cd-r-xl: 22px;

  color: var(--cd-t1) !important;
  background: var(--cd-bg-0);
}

/* Tipografia — vence os overrides claros do topo do cards.css */
.cards-module-root h1, .cards-module-root h2, .cards-module-root h3,
.cards-module-root h4, .cards-module-root h5, .cards-module-root h6 {
  color: var(--cd-t1) !important;
}
.cards-module-root p { color: var(--cd-t3) !important; }
.cards-module-root strong { color: var(--cd-t1) !important; }
.cards-module-root .cards-module { background: transparent; }

/* ---------- Cabeçalho do módulo ---------- */
.cards-module-root .cards-module-head {
  border-bottom: 1px solid var(--cd-border);
}
.cards-module-root .cards-module-title h2 { color: var(--cd-t1) !important; letter-spacing: -0.02em; }

/* ---------- Botões ---------- */
.cards-module-root .cards-btn {
  background: var(--cd-bg-2) !important;
  color: var(--cd-t2) !important;
  border: 1px solid var(--cd-border) !important;
  border-radius: 10px !important;
  transition: .15s;
}
.cards-module-root .cards-btn:hover {
  background: var(--cd-bg-3) !important;
  color: var(--cd-t1) !important;
  border-color: var(--cd-border-soft) !important;
}
.cards-module-root .cards-btn--primary {
  background: linear-gradient(180deg, var(--cd-accent-strong), var(--cd-accent)) !important;
  color: var(--cd-accent-fg) !important;
  border: 0 !important;
  box-shadow: 0 1px 0 0 oklch(1 0 0 / 0.25) inset, 0 0 0 1px var(--cd-accent-line), 0 8px 20px oklch(0.76 0.16 152 / 0.20) !important;
}
.cards-module-root .cards-btn--primary:hover { filter: brightness(1.05); }
.cards-module-root .cards-btn--ghost {
  background: transparent !important;
  border: 1px solid var(--cd-border) !important;
  color: var(--cd-t2) !important;
}

/* ---------- Stats ---------- */
.cards-module-root .cards-stat-card {
  background: var(--cd-bg-1) !important;
  border: 1px solid var(--cd-border) !important;
  border-radius: var(--cd-r-md) !important;
  box-shadow: none !important;
}
.cards-module-root .cards-stat-card-value { color: var(--cd-t1) !important; }
.cards-module-root .cards-stat-card-label { color: var(--cd-t3) !important; }
.cards-module-root .cards-stat-card--due.is-active {
  border-color: var(--cd-accent-line) !important;
  background: var(--cd-accent-soft) !important;
}
.cards-module-root .cards-stat-card--due.is-active .cards-stat-card-value { color: var(--cd-accent) !important; }
.cards-module-root .cards-stat-card--muted { opacity: .7; }

/* ---------- Faixa de limite diário ---------- */
.cards-module-root .cards-daily-limit {
  background: var(--cd-bg-1) !important;
  border: 1px solid var(--cd-border) !important;
  border-radius: var(--cd-r-lg) !important;
  color: var(--cd-t2) !important;
}
.cards-module-root .cards-daily-limit.is-capped { border-color: var(--cd-warn) !important; }
.cards-module-root .cards-daily-limit-title,
.cards-module-root .cards-daily-limit-title strong { color: var(--cd-t1) !important; }
.cards-module-root .cards-daily-limit-cap { color: var(--cd-t3) !important; }
.cards-module-root .cards-daily-limit-pip {
  background: var(--cd-bg-2) !important;
  border: 1px solid var(--cd-border) !important;
  color: var(--cd-t2) !important;
}
.cards-module-root .cards-daily-limit-link { color: var(--cd-accent) !important; }

/* ---------- Seções / painéis ---------- */
.cards-module-root .cards-module-section {
  background: var(--cd-bg-1) !important;
  border: 1px solid var(--cd-border) !important;
  border-radius: var(--cd-r-lg) !important;
  box-shadow: none !important;
}
.cards-module-root .cards-module-section-title { color: var(--cd-t1) !important; }
.cards-module-root .cards-empty-mini { color: var(--cd-t3) !important; }

/* ---------- Heatmap ---------- */
.cards-module-root {
  --cards-heat-0: oklch(0.24 0.008 250) !important;
  --cards-heat-1: oklch(0.42 0.09 152) !important;
  --cards-heat-2: oklch(0.56 0.13 152) !important;
  --cards-heat-3: oklch(0.68 0.15 152) !important;
  --cards-heat-4: oklch(0.80 0.17 152) !important;
}
.cards-module-root .cards-heatmap-legend { color: var(--cd-t4) !important; }

/* ---------- Retention / forecast ---------- */
.cards-module-root .cards-retention-line { color: var(--cd-t2) !important; border-color: var(--cd-border) !important; }
.cards-module-root .cards-retention-line strong { color: var(--cd-t1) !important; }
.cards-module-root .cards-retention-total { color: var(--cd-t3) !important; }

/* ---------- Busca ---------- */
.cards-module-root .cards-module-search,
.cards-module-root .cards-filter-search {
  background: var(--cd-bg-2) !important;
  border: 1px solid var(--cd-border-soft) !important;
  color: var(--cd-t1) !important;
  border-radius: 10px !important;
}
.cards-module-root .cards-module-search::placeholder { color: var(--cd-t4) !important; }

/* ---------- Toolbar de disciplinas ---------- */
.cards-module-root .cards-discipline-toolbar { color: var(--cd-t3) !important; }
.cards-module-root .cards-discipline-toolbar-summary { color: var(--cd-t3) !important; }
.cards-module-root .cards-discipline-toolbar-summary b { color: var(--cd-accent) !important; }
.cards-module-root .cards-discipline-toolbar-btn {
  background: var(--cd-bg-2) !important;
  border: 1px solid var(--cd-border) !important;
  color: var(--cd-t2) !important;
  border-radius: 8px !important;
}

/* ---------- Disciplinas (Do GPS) ---------- */
.cards-module-root .cards-discipline {
  background: var(--cd-bg-1) !important;
  border: 1px solid var(--cd-border) !important;
  border-radius: var(--cd-r-md) !important;
}
.cards-module-root .cards-discipline-head { background: transparent !important; }
.cards-module-root .cards-discipline-head:hover { background: var(--cd-bg-2) !important; }
.cards-module-root .cards-discipline-name { color: var(--cd-t1) !important; }
.cards-module-root .cards-discipline-chevron { color: var(--cd-t4) !important; }
.cards-module-root .cards-discipline-body,
.cards-module-root .cards-topic-grid { background: transparent !important; }
.cards-module-root .cards-discipline-stats { color: var(--cd-t3) !important; }
.cards-module-root .cards-discipline-due {
  background: var(--cd-accent-soft) !important; color: var(--cd-accent) !important;
}
.cards-module-root .cards-discipline-cta {
  background: var(--cd-accent-soft) !important; color: var(--cd-accent) !important;
  border: 1px solid var(--cd-accent-line) !important;
}

/* ---------- Cards de tópico ---------- */
.cards-module-root .cards-topic-card {
  background: var(--cd-bg-2) !important;
  border: 1px solid var(--cd-border) !important;
  border-radius: var(--cd-r-md) !important;
  box-shadow: none !important;
}
.cards-module-root .cards-topic-card.has-due { border-color: var(--cd-accent-line) !important; }
.cards-module-root .cards-topic-card-title { color: var(--cd-t1) !important; }
.cards-module-root .cards-topic-card-counts,
.cards-module-root .cards-topic-card-counts span { color: var(--cd-t3) !important; }
.cards-module-root .cards-topic-card-counts b { color: var(--cd-t1) !important; }
.cards-module-root .cards-topic-card-due {
  background: var(--cd-accent-soft) !important;
  color: var(--cd-accent) !important;
}
.cards-module-root .cards-topic-card-cta {
  background: var(--cd-accent-soft) !important;
  color: var(--cd-accent) !important;
  border: 1px solid var(--cd-accent-line) !important;
}

/* =========================================================================
   Badges das seções + Minhas disciplinas (árvore de baralhos) — o novo
   ========================================================================= */
.cards-module-root .cards-sect-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 4px 10px; border-radius: 20px;
}
.cards-module-root .cards-sect-badge.gps { background: var(--cd-info-soft); color: var(--cd-info); }
.cards-module-root .cards-sect-badge.edital { background: oklch(0.80 0.14 75 / 0.15); color: var(--cd-warn); }
.cards-module-root .cards-sect-badge.mine { background: var(--cd-accent-soft); color: var(--cd-accent); }

.cards-module-root .cards-mydecks-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.cards-module-root .cards-mydecks-title {
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  margin: 0; color: var(--cd-t1) !important;
}
.cards-module-root .cards-mydecks-head [data-deck-new] { margin-left: auto; }
.cards-module-root .cards-deck-newbtn {
  font: 600 12.5px/1 inherit; padding: 8px 12px; cursor: pointer;
}
.cards-module-root .cards-deck-hint {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--cd-t4); padding: 4px 4px 10px;
}

.cards-module-root .cards-deck-tree { display: flex; flex-direction: column; }
.cards-module-root .cards-deck-children {
  margin-left: 20px;
  border-left: 1px solid var(--cd-border);
  padding-left: 6px;
}
.cards-module-root .cards-deck-node.is-collapsed > .cards-deck-children { display: none; }
.cards-module-root .cards-deck-node.is-dragging > .cards-deck-row { opacity: .35; }

.cards-module-root .cards-deck-row {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: 10px; cursor: grab;
  transition: background .13s;
}
.cards-module-root .cards-deck-row:hover { background: var(--cd-bg-2); }
.cards-module-root .cards-deck-row:active { cursor: grabbing; }
.cards-module-root .cards-deck-row.drop-into {
  background: var(--cd-accent-soft) !important;
  box-shadow: inset 0 0 0 1.5px var(--cd-accent-line);
}

.cards-module-root .cards-deck-tw {
  width: 16px; height: 16px; flex: none; color: var(--cd-t4);
  display: grid; place-items: center; transition: transform .18s; cursor: pointer;
}
.cards-module-root .cards-deck-tw svg { width: 16px; height: 16px; }
.cards-module-root .cards-deck-node:not(.is-collapsed) > .cards-deck-row > .cards-deck-tw { transform: rotate(90deg); }
.cards-module-root .cards-deck-tw.is-leaf { opacity: 0; cursor: default; }

/* Menu de contexto (botão direito) da árvore.
   Montado no <body> (portal), então NÃO é escopado em .cards-module-root e usa
   cores explícitas (os tokens --cd-* só existem dentro do módulo). O !important
   nas propriedades de layout vence a regra global de <button> do flat.css que
   centralizava os itens. */
.cards-ctxmenu {
  position: fixed !important; z-index: 100002 !important; margin: 0 !important;
  min-width: 200px; padding: 6px;
  background: oklch(0.2 0.009 250) !important;
  border: 1px solid oklch(0.36 0.012 250 / 0.7) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px oklch(0 0 0 / 0.55) !important;
  display: flex !important; flex-direction: column !important; gap: 2px !important;
  font-family: inherit;
  animation: cardsCtxIn .12s ease;
}
@keyframes cardsCtxIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.cards-ctxmenu > .cards-ctxmenu-item {
  display: flex !important; align-items: center !important; justify-content: flex-start !important;
  gap: 10px !important; width: 100% !important; text-align: left !important; box-sizing: border-box !important;
  border: 0 !important; background: transparent !important; cursor: pointer !important;
  color: oklch(0.96 0.005 250) !important;
  font: 600 13px/1.2 inherit !important; padding: 9px 11px !important; border-radius: 8px !important;
  margin: 0 !important; box-shadow: none !important; transition: background .1s ease !important;
}
.cards-ctxmenu > .cards-ctxmenu-item:hover { background: oklch(0.28 0.010 250) !important; }
.cards-ctxmenu > .cards-ctxmenu-item.is-danger { color: oklch(0.7 0.18 27) !important; }
.cards-ctxmenu > .cards-ctxmenu-item.is-danger:hover { background: oklch(0.68 0.18 27 / 0.16) !important; }
.cards-ctxmenu .cards-ctxmenu-ic { flex: none !important; width: 16px; text-align: center; font-size: 13px; }

.cards-module-root .cards-deck-ic {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
}
.cards-module-root .cards-deck-ic svg { width: 15px; height: 15px; }
.cards-module-root .cards-deck-ic.disc { background: var(--cd-accent-soft); color: var(--cd-accent); }
.cards-module-root .cards-deck-ic.topic { background: var(--cd-bg-3); color: var(--cd-t3); }

.cards-module-root .cards-deck-name {
  font-size: 14px; font-weight: 600; color: var(--cd-t1) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw;
}
.cards-module-root .cards-deck-row.is-sub .cards-deck-name { font-weight: 500; color: var(--cd-t2) !important; font-size: 13.5px; }

.cards-module-root .cards-deck-meta {
  margin-left: auto; display: flex; align-items: center; justify-content: flex-end; gap: 6px;
}

/* Pills (bolinhas / contadores) — largura mínima + números tabulares pra as
   contagens ficarem numa coluna nivelada entre as linhas. */
.cards-module-root .cards-pill {
  font: 600 11.5px/1 ui-monospace, monospace; font-variant-numeric: tabular-nums;
  padding: 4px 8px; border-radius: 20px;
  min-width: 34px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
}
.cards-module-root .cards-pill.due  { background: var(--cd-accent-soft); color: var(--cd-accent); }
.cards-module-root .cards-pill.new  { background: var(--cd-info-soft); color: var(--cd-info); }
.cards-module-root .cards-pill.zero { background: var(--cd-bg-2); color: var(--cd-t4); }
.cards-module-root .cards-pill.hard {
  background: var(--cd-danger-soft); color: var(--cd-danger);
  display: inline-flex; align-items: center; gap: 5px;
}
.cards-module-root .cards-pill.hard::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cd-danger); box-shadow: 0 0 7px var(--cd-danger);
}
/* Pílulas clicáveis (botão): atalho de estudo por categoria */
.cards-module-root button.cards-pill {
  border: 0; cursor: pointer; font-family: inherit;
  transition: filter .12s ease, transform .1s ease, box-shadow .12s ease;
}
.cards-module-root button.cards-pill:hover { filter: brightness(1.18); transform: translateY(-1px); }
.cards-module-root button.cards-pill:active { transform: translateY(0); }
.cards-module-root button.cards-pill.due:hover  { box-shadow: 0 0 0 2px var(--cd-accent-line); }
.cards-module-root button.cards-pill.new:hover  { box-shadow: 0 0 0 2px var(--cd-info-line, var(--cd-info)); }
.cards-module-root button.cards-pill.hard:hover { box-shadow: 0 0 0 2px var(--cd-danger); }
.cards-module-root button.cards-pill:focus-visible { outline: 2px solid var(--cd-accent); outline-offset: 1px; }

/* Ações por nó (aparecem no hover). Largura FIXA e alinhadas à direita: a
   faixa reserva o mesmo espaço em toda linha (2 ou 5 botões), então as
   pílulas de número param sempre na mesma coluna — niveladas entre as seções. */
.cards-module-root .cards-deck-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 2px;
  flex: none; width: 140px;
  margin-left: 8px; opacity: 0; pointer-events: none; transition: opacity .13s;
}
.cards-module-root .cards-deck-row:hover .cards-deck-actions { opacity: 1; pointer-events: auto; }
.cards-module-root .cards-deck-act {
  width: 26px; height: 26px; border-radius: 7px; cursor: pointer; padding: 0;
  background: transparent; border: 1px solid transparent; color: var(--cd-t3);
  display: grid; place-items: center;
}
.cards-module-root .cards-deck-act svg { width: 14px; height: 14px; display: block; }
.cards-module-root .cards-deck-act:hover { background: var(--cd-bg-3); color: var(--cd-t1); }
.cards-module-root .cards-deck-act.is-danger:hover { color: var(--cd-danger); background: var(--cd-danger-soft); }

/* Linha-guia do drop + input inline */
.cards-module-root .cards-deck-dropline {
  height: 2px; background: var(--cd-accent); border-radius: 2px;
  margin: 2px 10px; box-shadow: 0 0 9px var(--cd-accent); pointer-events: none;
}
.cards-module-root .cards-deck-inline-wrap { padding: 4px 10px; }
.cards-module-root .cards-deck-inline-input {
  width: 100%; max-width: 320px;
  background: var(--cd-bg-2) !important; color: var(--cd-t1) !important;
  border: 1px solid var(--cd-accent-line) !important; border-radius: 8px !important;
  padding: 7px 10px !important; font: 600 13.5px/1 inherit !important;
  box-shadow: 0 0 0 3px var(--cd-accent-soft);
}
.cards-module-root .cards-deck-inline-input:focus { outline: none; }

.cards-module-root .cards-deck-addrow {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; margin-top: 4px; border-radius: 9px;
  color: var(--cd-t4); font-size: 13px; cursor: pointer;
}
.cards-module-root .cards-deck-addrow:hover { color: var(--cd-accent); background: var(--cd-accent-soft); }

/* Vazio */
.cards-module-root .cards-deck-empty {
  text-align: center; padding: 28px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.cards-module-root .cards-deck-empty-icon { font-size: 34px; opacity: .9; }
.cards-module-root .cards-deck-empty p { color: var(--cd-t3) !important; margin: 0; max-width: 420px; }
.cards-module-root .cards-deck-empty strong { color: var(--cd-t1) !important; }

/* Settings panel — dark básico */
.cards-module-root .cards-settings-panel {
  background: var(--cd-bg-1) !important;
  border: 1px solid var(--cd-border) !important;
  border-radius: var(--cd-r-lg) !important;
}

/* =========================================================================
   REVISÃO — tela de foco (monta no <body>, fora do .cards-module-root).
   Escopo próprio em .cards-review-overlay + paleta redeclarada.
   ========================================================================= */
.cards-review-overlay {
  --cd-bg-0: oklch(0.13 0.008 250);
  --cd-bg-1: oklch(0.185 0.008 250);
  --cd-bg-2: oklch(0.22 0.009 250);
  --cd-bg-3: oklch(0.26 0.010 250);
  --cd-border: oklch(0.30 0.010 250 / 0.55);
  --cd-border-soft: oklch(0.37 0.012 250 / 0.65);
  --cd-t1: oklch(0.97 0.005 250);
  --cd-t2: oklch(0.79 0.012 250);
  --cd-t3: oklch(0.63 0.012 250);
  --cd-t4: oklch(0.50 0.010 250);
  --cd-accent: oklch(0.76 0.16 152);
  --cd-accent-strong: oklch(0.82 0.17 152);
  --cd-accent-soft: oklch(0.76 0.16 152 / 0.14);
  --cd-accent-line: oklch(0.76 0.16 152 / 0.40);
  --cd-accent-fg: oklch(0.16 0.04 152);
  --cd-danger: oklch(0.68 0.18 27);
  --cd-danger-soft: oklch(0.68 0.18 27 / 0.15);
  --cd-warn: oklch(0.80 0.14 75);
  --cd-warn-soft: oklch(0.80 0.14 75 / 0.15);
  --cd-info: oklch(0.72 0.11 240);
  --cd-info-soft: oklch(0.72 0.11 240 / 0.15);

  /* Tokens do redesign redefinidos AQUI: a revisão monta no <body> (fora do
     .nv-app), então --bg-*/--text-*/--c-data-* ficavam indefinidos e regras
     genéricas (barra de progresso etc.) resolviam pra CLARO. Redefinir dark
     aqui faz o overlay se comportar como se estivesse no tema dark. */
  --bg-0: oklch(0.15 0.008 250); --bg-1: oklch(0.19 0.008 250);
  --bg-2: oklch(0.22 0.009 250); --bg-3: oklch(0.26 0.010 250);
  --text-1: oklch(0.97 0.005 250); --text-2: oklch(0.79 0.012 250); --text-3: oklch(0.63 0.012 250);
  --border-subtle: oklch(0.28 0.010 250 / 0.5); --border-soft: oklch(0.32 0.012 250 / 0.6);
  --c-data-bg: oklch(0.22 0.009 250); --c-data-border: oklch(0.30 0.010 250 / 0.55);

  position: fixed !important; inset: 0 !important; z-index: 100000 !important;
  background: oklch(0.115 0.006 250) !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  display: flex !important; align-items: center !important; justify-content: center !important; padding: 20px;
  opacity: 0; transition: opacity .18s ease;
}
.cards-review-overlay.is-open { opacity: 1; }
.cards-review-overlay * { box-sizing: border-box; }
/* spa-modules.css força .cards-review-overlay { background: oklch(0 0 0/0.55) !important }
   e carrega DEPOIS deste arquivo (mesma especificidade → ele venceria). Subo a
   especificidade com `body` pra o fundo ficar OPACO e o módulo não vazar por trás. */
body .cards-review-overlay { background: oklch(0.115 0.006 250) !important; }

.cards-review-overlay .cards-review-shell {
  width: 100% !important; max-width: 820px !important;
  height: min(840px, calc(100vh - 40px)) !important; max-height: calc(100vh - 40px) !important;
  margin: auto !important;
  display: flex; flex-direction: column; gap: 16px;
  padding: 22px 24px 26px; position: relative;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}

/* Progress bar no topo */
.cards-review-overlay .cards-review-progress-bar {
  position: static !important; height: 6px; width: 100%; margin: 0 0 2px; inset: auto !important;
  background: var(--cd-bg-3) !important; border-radius: 20px; overflow: hidden;
}
.cards-review-overlay .cards-review-progress-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--cd-accent), var(--cd-accent-strong)) !important;
  transition: width .35s ease;
}

/* Cabeçalho */
.cards-review-overlay .cards-review-head {
  display: flex; align-items: center; gap: 12px; margin-top: 10px;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
.cards-review-overlay .cards-review-foot,
.cards-review-overlay .cards-review-progress { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.cards-review-overlay .cards-review-card strong,
.cards-review-overlay .cards-review-card b { color: var(--cd-t1) !important; }
/* Negrito DENTRO de uma cor herda a cor do usuário — senão o branco !important
   acima mataria [cor]**texto**[/cor] (span de cor por fora, <strong> por dentro). */
.cards-review-overlay .cards-review-card [class*="cards-c-"] strong,
.cards-review-overlay .cards-review-card [class*="cards-c-"] b { color: inherit !important; }
.cards-review-overlay .cards-review-answer .hl,
.cards-review-overlay .cards-review-card .cloze { color: var(--cd-accent) !important; }
.cards-review-overlay .cards-review-topic {
  font-size: 14px; font-weight: 600; color: var(--cd-t2) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw;
}
.cards-review-overlay .cards-review-meta { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.cards-review-overlay .cards-review-state-badge {
  font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 20px;
  background: var(--cd-bg-2) !important; color: var(--cd-t3) !important;
}
.cards-review-overlay .cards-review-state-badge[data-state="new"] { background: var(--cd-info-soft) !important; color: var(--cd-info) !important; }
.cards-review-overlay .cards-review-state-badge[data-state="learning"] { background: var(--cd-warn-soft) !important; color: var(--cd-warn) !important; }
.cards-review-overlay .cards-review-state-badge[data-state="review"] { background: var(--cd-accent-soft) !important; color: var(--cd-accent) !important; }
.cards-review-overlay .cards-review-counter {
  font: 700 14px/1 ui-monospace, monospace; color: var(--cd-t1) !important; font-variant-numeric: tabular-nums;
  background: transparent !important; border: 0 !important; padding: 0 4px !important;
}
.cards-review-overlay .cards-review-icon-btn,
.cards-review-overlay .cards-review-close {
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  background: var(--cd-bg-1) !important; border: 1px solid var(--cd-border) !important;
  color: var(--cd-t3) !important; display: grid; place-items: center; font-size: 15px; line-height: 1;
  transition: .14s;
}
.cards-review-overlay .cards-review-icon-btn:hover,
.cards-review-overlay .cards-review-close:hover { background: var(--cd-bg-2) !important; color: var(--cd-t1) !important; }
.cards-review-overlay .cards-review-icon-btn--danger:hover { color: var(--cd-danger) !important; border-color: var(--cd-danger) !important; }
.cards-review-overlay .cards-review-icon-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Cartão */
.cards-review-overlay .cards-review-card {
  flex: 1; min-height: 300px;
  background: linear-gradient(160deg, var(--cd-bg-1), var(--cd-bg-2)) !important;
  border: 1px solid var(--cd-border-soft) !important;
  border-radius: 24px !important;
  box-shadow: 0 1px 0 0 oklch(1 0 0 / 0.05) inset, 0 24px 60px oklch(0 0 0 / 0.5) !important;
  padding: 38px 34px !important;
  display: flex; flex-direction: column; justify-content: center; text-align: center;
  position: relative; overflow-y: auto;
}
.cards-review-overlay .cards-review-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--cd-accent-line), transparent);
}
.cards-review-overlay .cards-review-question {
  font-size: 22px; font-weight: 600; color: var(--cd-t1) !important; line-height: 1.45;
}
.cards-review-overlay .cards-review-answer {
  font-size: 17px; color: var(--cd-t2) !important; line-height: 1.6; margin-top: 6px;
}
.cards-review-overlay .cards-review-answer-divider {
  height: 1px; background: var(--cd-border) !important; margin: 20px auto; max-width: 90%;
}
.cards-review-overlay .cards-review-card-loading,
.cards-review-overlay .cards-review-card-error { color: var(--cd-t3) !important; font-size: 15px; }

/* ── Faixa de contexto (metadados v2): selo de nível + disciplina + ⓘ ─────── */
.cards-review-overlay .cards-review-context {
  /* Ancorada só à esquerda + largura de conteúdo. Se usasse right:16 num card
     com overflow, a barra criaria scroll horizontal e se re-ancoraria PRA FORA
     da borda visível, cortando o ⓘ. Content-width evita isso por completo. */
  position: absolute; top: 12px; left: 16px; right: auto; z-index: 3;
  max-width: calc(100% - 32px); text-align: left;
}
.cards-review-overlay .cards-ctx-row {
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.cards-review-overlay .cards-ctx-seal {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; line-height: 1; color: #fff !important;
  box-shadow: 0 1px 3px oklch(0 0 0 / 0.35);
}
.cards-review-overlay .cards-ctx-seal--azul     { background: #3b82f6 !important; }
.cards-review-overlay .cards-ctx-seal--laranja  { background: #f59e0b !important; }
.cards-review-overlay .cards-ctx-seal--roxo     { background: #8b5cf6 !important; }
.cards-review-overlay .cards-ctx-seal--vermelho { background: #ef4444 !important; }
.cards-review-overlay .cards-ctx-seal--verde    { background: #22c55e !important; }
.cards-review-overlay .cards-ctx-disc {
  min-width: 0; flex: 0 1 auto;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cd-t3) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cards-review-overlay .cards-ctx-info {
  flex: none; width: 18px; height: 18px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; font-style: italic; font-family: Georgia, "Times New Roman", serif;
  background: transparent !important; color: var(--cd-t3) !important;
  border: 1px solid var(--cd-border-soft) !important; transition: .14s;
}
.cards-review-overlay .cards-ctx-info:hover {
  background: var(--cd-bg-3) !important; color: var(--cd-t1) !important; border-color: var(--cd-border) !important;
}
.cards-review-overlay .cards-ctx-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 5;
  width: min(320px, 78vw); text-align: left;
  background: var(--cd-bg-2) !important; border: 1px solid var(--cd-border) !important;
  border-radius: 12px !important; padding: 10px 12px !important;
  box-shadow: 0 12px 34px oklch(0 0 0 / 0.5) !important;
  display: grid; gap: 5px;
}
/* O display:grid acima venceria o [hidden] do UA — reforça o oculto por padrão. */
.cards-review-overlay .cards-ctx-pop[hidden] { display: none !important; }
.cards-review-overlay .cards-ctx-pop-row {
  display: grid; grid-template-columns: 88px 1fr; gap: 8px; align-items: baseline;
}
.cards-review-overlay .cards-ctx-pop-k {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--cd-t3) !important;
}
.cards-review-overlay .cards-ctx-pop-v { font-size: 13px; color: var(--cd-t1) !important; line-height: 1.4; }

/* ── "Aprofundar" (teoria): colapsável, aparece junto com a resposta ──────── */
.cards-review-overlay .cards-review-teoria {
  margin: 18px auto 2px; max-width: 92%; text-align: left;
  border-top: 1px solid var(--cd-border) !important; padding-top: 12px;
}
.cards-review-overlay .cards-review-teoria-sum {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--cd-t3) !important; user-select: none;
}
.cards-review-overlay .cards-review-teoria-sum::-webkit-details-marker { display: none; }
.cards-review-overlay .cards-review-teoria-sum::before {
  content: "▸"; font-size: 10px; transition: transform .14s;
}
.cards-review-overlay .cards-review-teoria[open] .cards-review-teoria-sum::before { transform: rotate(90deg); }
.cards-review-overlay .cards-review-teoria-body {
  margin-top: 10px; font-size: 14px; color: var(--cd-t2) !important; line-height: 1.6;
  padding-left: 12px; border-left: 2px solid var(--cd-border-soft) !important;
}

/* Rodapé — Mostrar resposta + graus */
.cards-review-overlay .cards-review-show-row { display: flex; }
.cards-review-overlay .cards-review-show-row .cards-btn {
  width: 100%; height: 54px; font-size: 15px; font-weight: 700;
  background: var(--cd-bg-3) !important; color: var(--cd-t1) !important;
  border: 1px solid var(--cd-border-soft) !important; border-radius: 15px !important;
  display: flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer;
}
.cards-review-overlay .cards-review-show-row .cards-btn:hover { background: var(--cd-border) !important; }

.cards-review-overlay .cards-review-grade-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px;
}
.cards-review-overlay .cards-grade-btn {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 13px 8px 12px; border-radius: 14px; cursor: pointer;
  background: var(--cd-bg-2) !important; border: 1px solid var(--cd-border-soft) !important;
  transition: transform .13s, background .13s, border-color .13s;
}
.cards-review-overlay .cards-grade-btn:hover { transform: translateY(-2px); }
.cards-review-overlay .cards-grade-int {
  order: -1; font: 600 12px/1 ui-monospace, monospace; color: var(--cd-t4) !important; font-variant-numeric: tabular-nums;
}
.cards-review-overlay .cards-grade-label { font-size: 13.5px; font-weight: 700; }
.cards-review-overlay .cards-grade-again .cards-grade-label { color: var(--cd-danger) !important; }
.cards-review-overlay .cards-grade-hard  .cards-grade-label { color: var(--cd-warn) !important; }
.cards-review-overlay .cards-grade-good  .cards-grade-label { color: var(--cd-accent) !important; }
.cards-review-overlay .cards-grade-easy  .cards-grade-label { color: var(--cd-info) !important; }
.cards-review-overlay .cards-grade-again:hover { border-color: var(--cd-danger) !important; background: var(--cd-danger-soft) !important; }
.cards-review-overlay .cards-grade-hard:hover  { border-color: var(--cd-warn) !important; background: var(--cd-warn-soft) !important; }
.cards-review-overlay .cards-grade-good:hover  { border-color: var(--cd-accent) !important; background: var(--cd-accent-soft) !important; }
.cards-review-overlay .cards-grade-easy:hover  { border-color: var(--cd-info) !important; background: var(--cd-info-soft) !important; }

.cards-review-overlay .cards-kbd {
  font: 600 10px/1 ui-monospace, monospace; color: var(--cd-t4) !important;
  background: var(--cd-bg-1) !important; border: 1px solid var(--cd-border) !important;
  border-radius: 5px; padding: 3px 6px;
}

/* Fim de sessão */
.cards-review-overlay .cards-review-done {
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
}
.cards-review-overlay .cards-done-icon { font-size: 44px; }
.cards-review-overlay .cards-review-done h3 { color: var(--cd-t1) !important; font-size: 22px; margin: 0; }
.cards-review-overlay .cards-done-summary { color: var(--cd-t2) !important; }
.cards-review-overlay .cards-done-summary strong { color: var(--cd-accent) !important; }
.cards-review-overlay .cards-done-breakdown { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; color: var(--cd-t3) !important; font-size: 13px; }
.cards-review-overlay .cards-review-done .cards-btn {
  margin-top: 8px; background: linear-gradient(180deg, var(--cd-accent-strong), var(--cd-accent)) !important;
  color: var(--cd-accent-fg) !important; border: 0 !important; border-radius: 12px !important;
  padding: 12px 22px; font-weight: 700; cursor: pointer;
}

/* Painel de edição inline */
.cards-review-overlay .cards-review-edit-panel {
  background: var(--cd-bg-1) !important; border: 1px solid var(--cd-border) !important;
  border-radius: var(--cd-r-lg); padding: 16px; color: var(--cd-t1) !important;
}

/* Botão "Difíceis" no cabeçalho do módulo */
.cards-module-root .cards-btn--leech {
  background: var(--cd-danger-soft) !important; color: var(--cd-danger) !important;
  border: 1px solid oklch(0.68 0.18 27 / 0.35) !important;
}
.cards-module-root .cards-btn--leech:hover { background: oklch(0.68 0.18 27 / 0.22) !important; }
.cards-module-root .cards-deck-act--cards:hover { background: var(--cd-accent-soft) !important; color: var(--cd-accent) !important; }

/* =========================================================================
   CRIAR CARTAS — modal do baralho (monta no <body>, escopo próprio)
   ========================================================================= */
.cards-create-overlay {
  --cd-bg-1: oklch(0.185 0.008 250);
  --cd-bg-2: oklch(0.22 0.009 250);
  --cd-bg-3: oklch(0.26 0.010 250);
  --cd-border: oklch(0.30 0.010 250 / 0.55);
  --cd-border-soft: oklch(0.37 0.012 250 / 0.65);
  --cd-t1: oklch(0.97 0.005 250);
  --cd-t2: oklch(0.79 0.012 250);
  --cd-t3: oklch(0.63 0.012 250);
  --cd-t4: oklch(0.50 0.010 250);
  --cd-accent: oklch(0.76 0.16 152);
  --cd-accent-strong: oklch(0.82 0.17 152);
  --cd-accent-soft: oklch(0.76 0.16 152 / 0.14);
  --cd-accent-line: oklch(0.76 0.16 152 / 0.40);
  --cd-accent-fg: oklch(0.16 0.04 152);

  position: fixed; inset: 0; z-index: 4100;
  background: oklch(0.10 0.006 250 / 0.82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; transition: opacity .18s ease;
}
.cards-create-overlay.is-open { opacity: 1; }
.cards-create-overlay * { box-sizing: border-box; }

.cards-create-modal {
  width: 100%; max-width: 520px;
  background: var(--cd-bg-1); border: 1px solid var(--cd-border-soft);
  border-radius: 20px; padding: 22px;
  box-shadow: 0 1px 0 0 oklch(1 0 0 / 0.05) inset, 0 24px 60px oklch(0 0 0 / 0.55);
  display: flex; flex-direction: column; gap: 15px;
}
.cards-create-head { display: flex; align-items: flex-start; gap: 12px; }
.cards-create-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--cd-accent); font-weight: 700; }
.cards-create-deckname { font-size: 18px; font-weight: 700; color: var(--cd-t1); letter-spacing: -0.01em; margin-top: 3px; }
.cards-create-x {
  margin-left: auto; width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  background: var(--cd-bg-2); border: 1px solid var(--cd-border); color: var(--cd-t3);
  font-size: 18px; line-height: 1; display: grid; place-items: center;
}
.cards-create-x:hover { background: var(--cd-bg-3); color: var(--cd-t1); }

.cards-create-types { display: flex; gap: 8px; align-items: center; }
.cards-create-type {
  padding: 10px 15px; border-radius: 10px; cursor: pointer;
  background: var(--cd-bg-2); border: 1px solid var(--cd-border);
  color: var(--cd-t3); font: 600 13px/1 inherit;
}
.cards-create-type:hover { color: var(--cd-t1); border-color: var(--cd-border-soft); }
.cards-create-type.on { background: var(--cd-accent-soft); border-color: var(--cd-accent-line); color: var(--cd-accent); }
.cards-create-batch { margin-left: auto; display: flex; align-items: center; gap: 7px; color: var(--cd-t3); font-size: 13px; cursor: pointer; user-select: none; }
.cards-create-batch input { accent-color: var(--cd-accent); width: 15px; height: 15px; }

.cards-create-body { display: flex; flex-direction: column; }
.cards-create-lab {
  display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--cd-t4); font-weight: 700; margin: 0 0 7px;
}
.cards-create-ta + .cards-create-lab { margin-top: 13px; }
.cards-create-fieldhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.cards-create-fieldhead .cards-create-lab { margin: 0; }
.cards-create-clozebtn {
  background: var(--cd-bg-2); border: 1px solid var(--cd-border); color: var(--cd-t2);
  border-radius: 8px; padding: 5px 10px; font: 600 12px/1 inherit; cursor: pointer;
}
.cards-create-clozebtn:hover { background: var(--cd-accent-soft); color: var(--cd-accent); border-color: var(--cd-accent-line); }
.cards-create-ta {
  width: 100%; background: var(--cd-bg-2); border: 1px solid var(--cd-border-soft);
  border-radius: 11px; color: var(--cd-t1); font: 500 14px/1.55 inherit;
  padding: 11px 13px; resize: vertical;
}
.cards-create-ta::placeholder { color: var(--cd-t4); }
.cards-create-ta:focus { outline: none; border-color: var(--cd-accent-line); box-shadow: 0 0 0 3px var(--cd-accent-soft); }
.cards-create-ta--batch { font-family: ui-monospace, monospace; font-size: 13px; }

.cards-create-importrow { margin-top: -2px; }
.cards-create-import {
  width: 100%; background: transparent; border: 1px dashed var(--cd-border-soft);
  color: var(--cd-t3); border-radius: 9px; padding: 9px 12px;
  font: 600 12.5px/1 inherit; cursor: pointer; transition: .14s;
}
.cards-create-import:hover { border-color: var(--cd-accent-line); color: var(--cd-accent); background: var(--cd-accent-soft); }

/* --- Abas do modal (Criar / IA-Importar) --- */
.cards-create-modal { max-height: calc(100vh - 40px); }
.cards-create-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--cd-border); padding-bottom: 2px; }
.cards-create-tab {
  padding: 9px 13px 11px; border: 0; background: transparent; cursor: pointer;
  color: var(--cd-t3); font: 600 13px/1 inherit; border-bottom: 2px solid transparent; margin-bottom: -3px;
}
.cards-create-tab:hover { color: var(--cd-t1); }
.cards-create-tab.on { color: var(--cd-accent); border-bottom-color: var(--cd-accent); }
.cards-create-tabbody { display: flex; flex-direction: column; gap: 15px; overflow-y: auto; min-height: 0; }

/* --- Painel IA / Importar --- */
.cards-imp { display: flex; flex-direction: column; gap: 18px; }
.cards-imp-sec { display: flex; flex-direction: column; gap: 9px; }
.cards-imp-title { font-size: 13.5px; font-weight: 700; color: var(--cd-t1); }
.cards-imp-hint { font-size: 12px; color: var(--cd-t3); line-height: 1.5; margin: 0; }
.cards-imp-details { font-size: 12px; }
.cards-imp-details > summary { cursor: pointer; color: var(--cd-t3); padding: 4px 0; user-select: none; }
.cards-imp-details > summary:hover { color: var(--cd-t1); }
.cards-imp-details[open] > summary { color: var(--cd-t2); margin-bottom: 7px; }
.cards-imp-pre {
  max-height: 240px; overflow: auto; margin: 0;
  background: var(--cd-bg-2); border: 1px solid var(--cd-border); border-radius: 10px;
  padding: 11px 13px; color: var(--cd-t2);
  font: 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap; word-break: break-word;
}
.cards-imp-drop {
  display: flex; align-items: center; gap: 10px; padding: 13px 15px; cursor: pointer;
  border: 1.5px dashed var(--cd-border-soft); border-radius: 12px; color: var(--cd-t3);
  transition: .14s; background: var(--cd-bg-2);
}
.cards-imp-drop:hover, .cards-imp-drop.is-drag { border-color: var(--cd-accent-line); color: var(--cd-accent); background: var(--cd-accent-soft); }
.cards-imp-drop-ic { font-size: 18px; }
.cards-imp-drop-tx { font-size: 12.5px; font-weight: 600; }
.cards-imp-ta { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.cards-imp-actions { display: flex; gap: 9px; justify-content: flex-end; }
.cards-imp-preview {
  display: flex; flex-direction: column; gap: 9px; padding: 13px;
  background: var(--cd-bg-2); border: 1px solid var(--cd-border); border-radius: 12px;
}
.cards-imp-summary { font-size: 13px; color: var(--cd-t1); }
.cards-imp-fmt {
  display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 6px;
  background: var(--cd-accent-soft); color: var(--cd-accent); font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
}
.cards-imp-warn { font-size: 11.5px; color: oklch(0.80 0.13 75); line-height: 1.45; }
.cards-imp-error { font-size: 12.5px; color: oklch(0.72 0.17 27); font-weight: 600; padding: 10px 12px; background: oklch(0.72 0.17 27 / 0.12); border-radius: 10px; }
.cards-imp-samp-title { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--cd-t4); font-weight: 700; margin-top: 2px; }
.cards-imp-samp { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--cd-t2); line-height: 1.45; }
.cards-imp-samp-n { color: var(--cd-t4); font-weight: 700; min-width: 14px; }
.cards-imp-samp-m {
  flex: 0 0 auto; padding: 1px 6px; border-radius: 5px; background: var(--cd-bg-3); color: var(--cd-t3);
  font-size: 10px; font-weight: 700; text-transform: uppercase; margin-top: 1px;
}
.cards-imp-samp-c { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.cards-imp-samp-c mark { background: var(--cd-accent-soft); color: var(--cd-accent-strong); border-radius: 4px; padding: 0 3px; }
.cards-imp-confirm { width: 100%; margin-top: 4px; }
.cards-imp-dest {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 12px; color: var(--cd-t2); padding: 9px 11px;
  background: var(--cd-bg-3); border: 1px solid var(--cd-border); border-radius: 9px;
}
.cards-imp-dest code { font-family: ui-monospace, monospace; font-size: 11px; background: var(--cd-bg-1); padding: 1px 5px; border-radius: 5px; color: var(--cd-t2); }
.cards-imp-new, .cards-imp-exists { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 6px; }
.cards-imp-new { background: var(--cd-accent-soft); color: var(--cd-accent); }
.cards-imp-exists { background: var(--cd-bg-1); color: var(--cd-t4); }

/* =========================================================================
   CASCA DE 3 ABAS (a maquete) — Baralhos / Revisar / Criar
   ========================================================================= */
.cards-module-root .cards-app { max-width: 1080px; margin: 0 auto; zoom: 1.1; padding-bottom: 28px; }

/* Topbar + abas */
.cards-module-root .cards-topbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.cards-module-root .cards-brand { display: flex; align-items: center; gap: 11px; }
.cards-module-root .cards-brand-mark {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 20px;
  background: linear-gradient(150deg, var(--cd-accent-strong), var(--cd-accent)); box-shadow: 0 0 34px oklch(0.76 0.16 152 / 0.22); flex: none;
}
.cards-module-root .cards-brand-name { font-weight: 700; letter-spacing: -0.02em; font-size: 17px; color: var(--cd-t1) !important; }
.cards-module-root .cards-brand-name span { color: var(--cd-t3); font-weight: 600; }
.cards-module-root .cards-brand-sub { font-size: 12px; color: var(--cd-t3); }
.cards-module-root .cards-tabs {
  margin-left: auto; display: flex; gap: 4px; padding: 4px;
  background: var(--cd-bg-1); border: 1px solid var(--cd-border); border-radius: 13px;
}
.cards-module-root .cards-tab {
  appearance: none; border: 0; background: transparent; color: var(--cd-t3);
  font: 600 13.5px/1 inherit; padding: 9px 15px; border-radius: 9px; cursor: pointer; transition: .16s;
}
.cards-module-root .cards-tab:hover { color: var(--cd-t1); }
.cards-module-root .cards-tab.is-on { background: var(--cd-bg-3); color: var(--cd-t1); box-shadow: 0 1px 2px oklch(0 0 0 / .35); }

.cards-module-root .cards-panel { display: none; }
.cards-module-root .cards-panel.is-on { display: block; animation: cards-fade .22s ease both; }
@keyframes cards-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Hero */
.cards-module-root .cards-hero {
  display: flex; gap: 20px; flex-wrap: wrap; align-items: stretch;
  background: linear-gradient(140deg, var(--cd-bg-1), oklch(0.185 0.012 200));
  border: 1px solid var(--cd-border); border-radius: var(--cd-r-xl); padding: 22px 24px;
  margin-bottom: 18px; position: relative; overflow: hidden;
}
.cards-module-root .cards-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 200px at 100% 0%, var(--cd-accent-soft), transparent 70%);
}
.cards-module-root .cards-hero-left { flex: 1 1 300px; min-width: 260px; position: relative; z-index: 1; }
.cards-module-root .cards-hero-eyebrow { font-size: 11.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--cd-accent); font-weight: 700; }
.cards-module-root .cards-hero-h { font-size: 25px; font-weight: 700; letter-spacing: -0.02em; margin: 7px 0 3px; color: var(--cd-t1) !important; }
.cards-module-root .cards-hero-p { color: var(--cd-t2) !important; font-size: 14px; }
.cards-module-root .cards-hero-counts { display: flex; gap: 22px; margin: 18px 0 20px; }
.cards-module-root .cards-hc { display: flex; flex-direction: column; gap: 2px; }
.cards-module-root .cards-hc b { font: 700 27px/1 ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.cards-module-root .cards-hc.due b { color: var(--cd-accent); }
.cards-module-root .cards-hc.new b { color: var(--cd-info); }
.cards-module-root .cards-hc.learn b { color: var(--cd-warn); }
.cards-module-root .cards-hc span { font-size: 12px; color: var(--cd-t2); }
.cards-module-root .cards-hero-cta {
  appearance: none; border: 0; cursor: pointer; font: 700 15px/1 inherit;
  background: linear-gradient(180deg, var(--cd-accent-strong), var(--cd-accent)); color: var(--cd-accent-fg);
  padding: 14px 22px; border-radius: 13px; display: inline-flex; align-items: center; gap: 9px;
  box-shadow: 0 1px 0 0 oklch(1 0 0 / 0.25) inset, 0 0 0 1px var(--cd-accent-line), 0 8px 18px oklch(0.76 0.16 152 / 0.12); transition: box-shadow .18s ease, transform .16s ease, filter .16s ease;
}
.cards-module-root .cards-hero-cta:hover { transform: translateY(-1px); filter: brightness(1.04); }
.cards-module-root .cards-hero-cta.is-ghost {
  background: var(--cd-bg-2); color: var(--cd-t1); box-shadow: none; border: 1px solid var(--cd-border-soft);
}
.cards-module-root .cards-hero-right {
  flex: 1 1 280px; min-width: 250px; position: relative; z-index: 1;
  border-left: 1px solid var(--cd-border); padding-left: 22px;
}
.cards-module-root .cards-hero-sp-title { font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--cd-t4); font-weight: 700; margin-bottom: 12px; }
.cards-module-root .cards-fc { display: flex; align-items: flex-end; gap: 6px; height: 68px; margin-bottom: 6px; }
.cards-module-root .cards-fc-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; min-width: 0; }
.cards-module-root .cards-fc-n { font-size: 10px; font-weight: 700; line-height: 1; color: var(--cd-accent); font-variant-numeric: tabular-nums; }
.cards-module-root .cards-fc-n.dim { color: var(--cd-t4); font-weight: 600; }
.cards-module-root .cards-fc-bar { width: 100%; border-radius: 5px 5px 3px 3px; min-height: 6px; background: linear-gradient(180deg, var(--cd-accent), oklch(0.76 0.16 152 / 0.35)); }
.cards-module-root .cards-fc-bar.is-today { background: linear-gradient(180deg, var(--cd-accent-strong), var(--cd-accent)); }
/* Dia zerado fica bem baixinho (3px) pra "1 carta" não parecer igual a "0". */
.cards-module-root .cards-fc-bar.dim { min-height: 3px; background: linear-gradient(180deg, var(--cd-bg-3), var(--cd-bg-2)); }
.cards-module-root .cards-fc-labels { display: flex; gap: 6px; }
.cards-module-root .cards-fc-labels span { flex: 1; text-align: center; font-size: 10.5px; color: var(--cd-t4); }
.cards-module-root .cards-sp-stats { display: flex; gap: 10px; margin-top: 16px; }
.cards-module-root .cards-sp {
  flex: 1; background: var(--cd-bg-2); border: 1px solid var(--cd-border); border-radius: var(--cd-r-md);
  padding: 11px 12px; text-align: left; appearance: none; cursor: default;
}
.cards-module-root button.cards-sp { cursor: pointer; transition: .14s; }
.cards-module-root button.cards-sp:hover { border-color: var(--cd-border-soft); }
.cards-module-root .cards-sp b { font: 700 18px/1 ui-monospace, monospace; font-variant-numeric: tabular-nums; display: block; }
.cards-module-root .cards-sp span { font-size: 11px; color: var(--cd-t3); display: block; margin-top: 4px; }
.cards-module-root .cards-sp.ret b { color: var(--cd-accent); }
.cards-module-root .cards-sp.leech b { color: var(--cd-danger); }
.cards-module-root .cards-sp.streak b { color: oklch(0.75 0.17 45); }

/* Árvore Do GPS: ícone azul + sem cursor de arrastar */
.cards-module-root .cards-deck-ic.disc.gps { background: var(--cd-info-soft); color: var(--cd-info); }
.cards-module-root .cards-deck-ic.edital { background: var(--cd-info-soft); color: var(--cd-info); }
.cards-module-root .cards-deck-editaltag {
  font: 700 10px/1 inherit; letter-spacing: .03em; white-space: nowrap;
  background: var(--cd-info-soft); color: var(--cd-info) !important;
  padding: 3px 8px; border-radius: 20px; margin-left: 8px; flex: none;
}
.cards-module-root .cards-gps-tree .cards-deck-row { cursor: pointer; }

/* Rodapé do app (export/config) */
.cards-module-root .cards-app-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }

@media (max-width: 720px) {
  .cards-module-root .cards-tabs { margin-left: 0; width: 100%; }
  .cards-module-root .cards-hero-right { border-left: 0; padding-left: 0; border-top: 1px solid var(--cd-border); padding-top: 16px; }
}

/* =========================================================================
   FIX "linhas fantasma": flat.css tem [class*="-hero"]/[class*="hero-"] que
   força border+bg+radius !important em QUALQUER classe com "hero" — e minhas
   cards-hero-* colidem (título, texto, contadores, botão, colunas). Isso
   desenhava retângulos em tudo e escurecia o botão. Neutraliza no shell e
   re-aplica só as bordas/fundos que EU quero.
   ========================================================================= */
.cards-module-root .cards-app [class*="-hero"],
.cards-module-root .cards-app [class*="hero-"] {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.cards-module-root .cards-app .cards-hero {
  background: linear-gradient(140deg, var(--cd-bg-1), oklch(0.185 0.012 200)) !important;
  border: 1px solid var(--cd-border) !important;
  border-radius: var(--cd-r-xl) !important;
}
.cards-module-root .cards-app .cards-hero-right { border-left: 1px solid var(--cd-border) !important; }
.cards-module-root .cards-app .cards-hero-cta {
  background: linear-gradient(180deg, var(--cd-accent-strong), var(--cd-accent)) !important;
  border-radius: 13px !important;
  /* Glow em repouso reduzido ~50% (0.24 → 0.12) pra virar um detalhe sutil. */
  box-shadow: 0 1px 0 0 oklch(1 0 0 / 0.25) inset, 0 0 0 1px var(--cd-accent-line), 0 8px 18px oklch(0.76 0.16 152 / 0.12) !important;
}
/* Hover reacende o glow (um pouco mais forte) — acabamento premium sem pesar no repouso. */
.cards-module-root .cards-app .cards-hero-cta:hover {
  box-shadow: 0 1px 0 0 oklch(1 0 0 / 0.25) inset, 0 0 0 1px var(--cd-accent-line), 0 10px 26px oklch(0.76 0.16 152 / 0.22) !important;
}
.cards-module-root .cards-app .cards-hero-cta.is-ghost {
  background: var(--cd-bg-2) !important; border: 1px solid var(--cd-border-soft) !important; box-shadow: none !important;
}
@media (max-width: 720px) {
  .cards-module-root .cards-app .cards-hero-right { border-left: 0 !important; border-top: 1px solid var(--cd-border) !important; }
}

.cards-create-hint { font-size: 12px; color: var(--cd-t4); line-height: 1.5; }
.cards-create-foot { display: flex; align-items: center; gap: 12px; }
.cards-create-count { font-size: 12.5px; font-weight: 600; color: var(--cd-accent); }
.cards-create-actions { margin-left: auto; display: flex; gap: 9px; }
.cards-create-overlay .cards-btn {
  background: var(--cd-bg-2); color: var(--cd-t2); border: 1px solid var(--cd-border);
  border-radius: 10px; padding: 10px 15px; font: 600 13.5px/1 inherit; cursor: pointer;
}
.cards-create-overlay .cards-btn:hover { background: var(--cd-bg-3); color: var(--cd-t1); }
.cards-create-overlay .cards-btn--primary {
  background: linear-gradient(180deg, var(--cd-accent-strong), var(--cd-accent));
  color: var(--cd-accent-fg); border: 0;
  box-shadow: 0 1px 0 0 oklch(1 0 0 / 0.25) inset, 0 0 0 1px var(--cd-accent-line);
}
.cards-create-overlay .cards-btn--primary:hover { filter: brightness(1.05); }

/* =========================================================================
   Superpoderes — fixes dos gráficos no dark + painel de cartas-problema
   ========================================================================= */
/* Rosca de retenção: texto central era #1a1a1a (sumia no escuro) */
.cards-module-root .cards-retention-pct { fill: var(--cd-t1) !important; }
.cards-module-root .cards-retention-sub { fill: var(--cd-t3) !important; }
.cards-module-root .cards-daily-legend-item,
.cards-module-root .cards-daily-legend { color: var(--cd-t3) !important; }
.cards-module-root .cards-daily-day-label,
.cards-module-root .cards-daily-axis-label { color: var(--cd-t4) !important; }

/* Previsão: barras emerald sobre escuro */
.cards-module-root .cards-forecast-bar {
  background: linear-gradient(180deg, var(--cd-accent), oklch(0.76 0.16 152 / 0.35)) !important;
}
.cards-module-root .cards-forecast-bar.is-today {
  background: linear-gradient(180deg, var(--cd-accent-strong), var(--cd-accent)) !important;
}
.cards-module-root .cards-forecast-num { color: var(--cd-t2) !important; }
.cards-module-root .cards-forecast-day { color: var(--cd-t4) !important; }

/* Painel de cartas-problema (leeches) */
.cards-module-root .cards-leech-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.cards-module-root .cards-leech-head .cards-module-section-title { margin: 0; }
.cards-module-root .cards-leech-badge {
  background: var(--cd-danger-soft); color: var(--cd-danger);
  padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 700;
}
.cards-module-root .cards-leech-sub { color: var(--cd-t3); font-size: 13px; }
.cards-module-root .cards-leech-head .cards-btn--leech { margin-left: auto; }
.cards-module-root .cards-leech-list { display: flex; flex-direction: column; gap: 6px; }
.cards-module-root .cards-leech-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  background: var(--cd-bg-2); border: 1px solid var(--cd-border); transition: .13s;
}
.cards-module-root .cards-leech-row:hover { background: var(--cd-bg-3); border-color: oklch(0.68 0.18 27 / 0.5); }
.cards-module-root .cards-leech-count {
  font: 700 12.5px/1 ui-monospace, monospace; color: var(--cd-danger);
  background: var(--cd-danger-soft); padding: 6px 8px; border-radius: 7px; flex: none;
}
.cards-module-root .cards-leech-text {
  color: var(--cd-t1) !important; font-size: 13.5px; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cards-module-root .cards-leech-loc {
  color: var(--cd-t4); font-size: 12px; flex: none; max-width: 32%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cards-module-root .cards-leech-more { color: var(--cd-t4); font-size: 12px; padding: 6px 4px 0; }

/* =========================================================================
   ABA DESEMPENHO — relatórios/painéis (dark, na cara do módulo)
   ========================================================================= */
.cards-module-root{ --dsp-amber:oklch(0.83 0.13 80); --dsp-amber-soft:oklch(0.83 0.13 80/.15); }
.cards-module-root .dsp{ display:flex; flex-direction:column; gap:16px; }
.cards-module-root .dsp .num{ font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace); font-variant-numeric:tabular-nums; }
/* Indicador de escopo: qual edital o Desempenho está mostrando */
.cards-module-root .dsp-scope{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:-2px 0 -4px; }
.cards-module-root .dsp-scope-chip{ display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px; border-radius:999px;
  background:var(--cd-accent-soft); color:var(--cd-accent-strong); border:1px solid color-mix(in oklab,var(--cd-accent) 30%,transparent);
  font-size:12px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; }
.cards-module-root .dsp-scope-chip.global{ background:var(--cd-bg-3); color:var(--cd-t2); border-color:var(--cd-border); }
.cards-module-root .dsp-scope-note{ font-size:12px; color:var(--cd-t3); }
.cards-module-root .dsp-scope-note b{ color:var(--cd-t2); font-weight:600; }
/* "Hoje": fila do dia (reframe — não mais "X de N" desmotivador) */
.cards-module-root .dsp-fila{ font-size:11.5px; color:var(--cd-t3); margin-top:9px; }
.cards-module-root .dsp-fila b{ color:var(--cd-t1); }
/* Cobertura: chip extra "+N tópicos" + affordance de criação */
.cards-module-root .dsp-zchip.more{ color:var(--cd-t3); background:var(--cd-bg-3); border-color:var(--cd-border); }
/* Rodapé educativo colapsável (curva de esquecimento) */
.cards-module-root .dsp-edu{ background:var(--cd-bg-2); border:1px dashed var(--cd-border); border-radius:18px; overflow:hidden; }
.cards-module-root .dsp-edu summary{ list-style:none; cursor:pointer; padding:16px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cards-module-root .dsp-edu summary::-webkit-details-marker{ display:none; }
.cards-module-root .dsp-edu summary:hover{ background:var(--cd-bg-3); }
.cards-module-root .dsp-edu-t{ font-size:14px; font-weight:600; color:var(--cd-t1); }
.cards-module-root .dsp-edu-tag{ font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--cd-t4); background:var(--cd-bg-3); padding:2px 7px; border-radius:6px; margin-left:4px; }
.cards-module-root .dsp-edu-s{ font-size:11.5px; color:var(--cd-t3); margin-top:2px; }
.cards-module-root .dsp-edu-chev{ color:var(--cd-t3); transition:transform .2s; font-size:12px; }
.cards-module-root .dsp-edu[open] .dsp-edu-chev{ transform:rotate(180deg); }
.cards-module-root .dsp-edu-body{ padding:0 20px 18px; }
.cards-module-root .dsp-grid{ display:grid; gap:16px; }
.cards-module-root .dsp-hero{ grid-template-columns:1.35fr 1fr; }
.cards-module-root .dsp-two{ grid-template-columns:1fr 1fr; }
.cards-module-root .dsp-three{ grid-template-columns:1.05fr 1fr 1fr; }
@media(max-width:820px){ .cards-module-root .dsp-hero,.cards-module-root .dsp-two,.cards-module-root .dsp-three{ grid-template-columns:1fr; } }

.cards-module-root .dsp-panel{ background:linear-gradient(180deg,var(--cd-bg-2),oklch(0.172 0.009 250));
  border:1px solid var(--cd-border); border-radius:18px; padding:18px 20px; position:relative; overflow:hidden; }
.cards-module-root .dsp-eyebrow{ font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--cd-t4); font-weight:700; margin:0 0 3px; }
.cards-module-root .dsp-ptitle{ font-size:15px; font-weight:700; letter-spacing:-.01em; margin:0 0 2px; color:var(--cd-t1); }
.cards-module-root .dsp-psub{ font-size:12px; color:var(--cd-t3); margin:0; line-height:1.45; }

/* rings */
.cards-module-root .dsp-ring{ position:relative; flex:0 0 auto; }
.cards-module-root .dsp-cap{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
.cards-module-root .dsp-cap .big{ font-size:30px; font-weight:700; letter-spacing:-.02em; line-height:1; }
.cards-module-root .dsp-cap .lb{ font-size:10px; text-transform:uppercase; letter-spacing:.09em; color:var(--cd-t4); font-weight:700; }
/* Distribuição da base (donut Novas/Aprendendo/A revisar) */
.cards-module-root .dsp-donut{ position:relative; flex:0 0 auto; }
.cards-module-root .dsp-donut .dsp-cap .big{ color:var(--cd-t1); font-size:26px; }
.cards-module-root .dsp-dist{ display:flex; align-items:center; gap:22px; margin-top:14px; }
.cards-module-root .dsp-dist-legend{ flex:1; min-width:0; display:flex; flex-direction:column; gap:13px; }
.cards-module-root .dsp-dist-row{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--cd-t2); }
.cards-module-root .dsp-dist-row i{ width:12px; height:12px; border-radius:4px; flex:0 0 auto; }
.cards-module-root .dsp-dist-row .k{ flex:1; }
.cards-module-root .dsp-dist-row b{ font-size:18px; color:var(--cd-t1); font-variant-numeric:tabular-nums; }

/* contagem regressiva pra prova (badge no header da Distribuição) */
.cards-module-root .dsp-countdown{ display:inline-flex; align-items:center; gap:7px; background:var(--cd-danger-soft); color:var(--cd-danger);
  border:1px solid oklch(0.68 0.18 27/.35); border-radius:20px; padding:4px 11px; font-size:12px; font-weight:700; }

/* hoje */
.cards-module-root .dsp-today{ display:flex; gap:20px; align-items:center; height:100%; }
.cards-module-root .dsp-today-side{ flex:1; min-width:0; display:flex; flex-direction:column; gap:11px; }
.cards-module-root .dsp-chip{ display:flex; align-items:center; gap:10px; background:var(--cd-bg-2); border:1px solid var(--cd-border); border-radius:12px; padding:9px 12px; }
.cards-module-root .dsp-chip .ic{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-size:15px; flex:0 0 auto; }
.cards-module-root .dsp-chip .v{ font-size:17px; font-weight:700; line-height:1; color:var(--cd-t1); }
.cards-module-root .dsp-chip .k{ font-size:11px; color:var(--cd-t3); margin-top:2px; }
.cards-module-root .dsp-week-lb{ font-size:11px; color:var(--cd-t3); margin-bottom:5px; }
.cards-module-root .dsp-week-lb b{ color:var(--cd-t2); }
.cards-module-root .dsp-week{ display:flex; gap:5px; }
.cards-module-root .dsp-dot{ flex:1; height:7px; border-radius:4px; background:var(--cd-bg-3); }
.cards-module-root .dsp-dot.on{ background:var(--cd-accent); box-shadow:0 0 8px var(--cd-accent-soft); }

/* charts */
.cards-module-root .dsp-chart{ width:100%; display:block; margin-top:8px; overflow:visible; }
.cards-module-root .dsp-headrow{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.cards-module-root .dsp-kpi{ font-size:12.5px; font-weight:700; color:var(--cd-accent); background:var(--cd-accent-soft);
  border:1px solid var(--cd-accent-line,oklch(0.76 0.16 152/.4)); padding:3px 9px; border-radius:8px; white-space:nowrap; }
.cards-module-root .dsp-kpi.down{ color:var(--cd-danger); background:var(--cd-danger-soft); border-color:oklch(0.68 0.18 27/.35); }
.cards-module-root .dsp-lgd{ display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; }
.cards-module-root .dsp-lgd span{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--cd-t3); }
.cards-module-root .dsp-sw{ width:10px; height:10px; border-radius:3px; flex:0 0 auto; }

/* disciplinas */
.cards-module-root .dsp-disc{ display:flex; flex-direction:column; gap:13px; margin-top:14px; }
.cards-module-root .dsp-dtop{ display:flex; justify-content:space-between; font-size:13px; margin-bottom:6px; gap:8px; }
.cards-module-root .dsp-dtop b{ font-weight:600; color:var(--cd-t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cards-module-root .dsp-dtop .num{ color:var(--cd-t3); flex:0 0 auto; }
.cards-module-root .dsp-bar{ height:9px; border-radius:6px; background:var(--cd-bg-3); overflow:hidden; display:flex; }
.cards-module-root .dsp-bar i{ height:100%; display:block; transition:width .9s cubic-bezier(.4,0,.2,1); }
.cards-module-root .dsp-bar .seg-m{ background:var(--cd-accent-strong); }
.cards-module-root .dsp-bar .seg-j{ background:oklch(0.72 0.13 150/.6); }
.cards-module-root .dsp-bar .seg-a{ background:var(--dsp-amber); }
.cards-module-root .dsp-bar .seg-n{ background:var(--cd-info); }

/* top5 */
.cards-module-root .dsp-lk{ display:flex; flex-direction:column; gap:11px; margin-top:14px; }
.cards-module-root .dsp-lkrow{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  border:0; background:transparent; cursor:pointer; color:inherit; font:inherit;
  padding:5px 6px; margin:0 -6px; border-radius:8px; transition:background .12s ease;
}
.cards-module-root .dsp-lkrow:hover{ background:var(--cd-bg-2); }
.cards-module-root .dsp-lkplay{ flex:0 0 auto; width:14px; text-align:center; font-size:10px; color:var(--cd-accent); opacity:0; transition:opacity .12s ease; }
.cards-module-root .dsp-lkrow:hover .dsp-lkplay{ opacity:1; }
.cards-module-root .dsp-lkrow .rank{ font-size:12px; color:var(--cd-t4); width:16px; font-weight:700; flex:0 0 auto; }
.cards-module-root .dsp-lkrow .nm{ flex:1; min-width:0; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--cd-t2); }
.cards-module-root .dsp-lkbar{ width:80px; height:7px; border-radius:5px; background:var(--cd-bg-3); overflow:hidden; flex:0 0 auto; }
.cards-module-root .dsp-lkbar i{ display:block; height:100%; background:linear-gradient(90deg,oklch(0.68 0.18 27/.7),var(--cd-danger)); }
.cards-module-root .dsp-lkrow .pct{ font-size:12px; font-weight:700; color:var(--cd-danger); width:34px; text-align:right; flex:0 0 auto; }

/* cobertura */
.cards-module-root .dsp-cov{ display:flex; gap:16px; align-items:center; margin-top:12px; }
.cards-module-root .dsp-cov-txt{ flex:1; min-width:0; }
.cards-module-root .dsp-cov-txt p{ margin:0 0 9px; font-size:12.5px; color:var(--cd-t3); line-height:1.5; }
.cards-module-root .dsp-zchips{ display:flex; flex-wrap:wrap; gap:6px; }
.cards-module-root .dsp-zchip{ font-size:11px; background:var(--cd-danger-soft); color:var(--cd-danger);
  border:1px solid oklch(0.68 0.18 27/.3); padding:3px 8px; border-radius:7px; }
.cards-module-root button.dsp-zchip--act{ display:inline-flex; align-items:center; gap:5px; cursor:pointer; font-family:inherit;
  transition:filter .12s ease, box-shadow .12s ease, transform .12s ease; }
.cards-module-root button.dsp-zchip--act:hover{ filter:brightness(1.12); box-shadow:0 0 0 2px oklch(0.68 0.18 27/.35); transform:translateY(-1px); }
.cards-module-root .dsp-zchip-plus{ font-weight:800; opacity:.75; }
.cards-module-root .dsp-empty-mini{ font-size:12.5px; color:var(--cd-t3); background:var(--cd-bg-2); border:1px dashed var(--cd-border);
  border-radius:12px; padding:16px; text-align:center; margin-top:12px; line-height:1.5; }

/* --- Aviso de duplicados no import --- */
.cards-imp-dup {
  display: flex; flex-direction: column; gap: 7px; font-size: 12px; line-height: 1.45;
  color: var(--cd-t2); padding: 9px 11px; border-radius: 9px;
  background: oklch(0.83 0.13 80 / 0.12); border: 1px solid oklch(0.83 0.13 80 / 0.32);
}
.cards-imp-dup strong { color: var(--cd-t1); }
.cards-imp-force { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--cd-t3); cursor: pointer; user-select: none; }
.cards-imp-force input { accent-color: var(--cd-accent); width: 14px; height: 14px; }

/* ------------------------------------------------------------------ */
/* Exportar pro Anki (.apkg) — modal de seleção (cards_export.js)     */
/* ------------------------------------------------------------------ */
.cards-exp-modal { max-width: 560px; }
.cards-exp-body { display: flex; flex-direction: column; gap: 10px; max-height: 46vh; overflow-y: auto; padding-right: 4px; }
.cards-exp-group { display: flex; flex-direction: column; gap: 4px; }
.cards-exp-group-title { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--cd-t4); font-weight: 700; margin: 6px 0 2px; }
.cards-exp-node { display: flex; flex-direction: column; }
.cards-exp-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 10px;
  background: var(--cd-bg-2); border: 1px solid var(--cd-border); user-select: none; margin-bottom: 4px;
}
.cards-exp-row:hover { border-color: var(--cd-border-soft); }
.cards-exp-row.is-sub { background: transparent; }
.cards-exp-tw {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  padding: 0; background: none; border: none; color: var(--cd-t4); cursor: pointer;
  border-radius: 6px;
}
.cards-exp-tw svg { width: 13px; height: 13px; display: block; transition: transform .15s ease; }
.cards-exp-tw:hover { color: var(--cd-t1); background: var(--cd-bg-3); }
.cards-exp-tw.is-open svg { transform: rotate(90deg); }
.cards-exp-tw.is-leaf { cursor: default; }
.cards-exp-pick { display: flex; align-items: center; gap: 9px; min-width: 0; cursor: pointer; }
.cards-exp-pick input { accent-color: var(--cd-accent); width: 15px; height: 15px; flex: none; }
.cards-exp-row:has(input:checked) { background: var(--cd-accent-soft); border-color: var(--cd-accent-line); }
.cards-exp-row:has(input:indeterminate) { border-color: var(--cd-accent-line); }
.cards-exp-name { color: var(--cd-t2); font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cards-exp-row:has(input:checked) .cards-exp-name { color: var(--cd-t1); }
.cards-exp-count { margin-left: auto; color: var(--cd-t4); font-size: 12px; font-variant-numeric: tabular-nums; flex: none; }
.cards-exp-children { margin-left: 22px; padding-left: 8px; border-left: 1px solid var(--cd-border); }
.cards-exp-all .cards-exp-row, .cards-exp-all { background: transparent; border-style: dashed; }
.cards-exp-opts {
  display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px;
  background: var(--cd-bg-2); border: 1px solid var(--cd-border);
}
.cards-exp-opts label { display: flex; align-items: center; gap: 9px; color: var(--cd-t3); font-size: 13px; cursor: pointer; user-select: none; }
.cards-exp-opts input { accent-color: var(--cd-accent); width: 15px; height: 15px; }
.cards-exp-hint { color: var(--cd-t4); font-size: 12px; text-align: center; }
.cards-exp-empty { color: var(--cd-t3); text-align: center; padding: 28px 10px; font-size: 14px; }

/* Menu de contexto (botão direito) na árvore de baralhos/GPS/Edital.
   Portal no <body>; !important vence a regra global de <button> do flat.css. */
.cards-ctxmenu {
  position: fixed !important; z-index: 100002 !important; margin: 0 !important;
  min-width: 200px; padding: 6px;
  background: oklch(0.2 0.009 250) !important;
  border: 1px solid oklch(0.36 0.012 250 / 0.7) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px oklch(0 0 0 / 0.55) !important;
  display: flex !important; flex-direction: column !important; gap: 2px !important;
  font-family: inherit;
  animation: cardsCtxIn .12s ease;
}
@keyframes cardsCtxIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.cards-ctxmenu > .cards-ctxmenu-item {
  display: flex !important; align-items: center !important; justify-content: flex-start !important;
  gap: 10px !important; width: 100% !important; text-align: left !important; box-sizing: border-box !important;
  border: 0 !important; background: transparent !important; cursor: pointer !important;
  color: oklch(0.96 0.005 250) !important;
  font: 600 13px/1.2 inherit !important; padding: 9px 11px !important; border-radius: 8px !important;
  margin: 0 !important; box-shadow: none !important; transition: background .1s ease !important;
}
.cards-ctxmenu > .cards-ctxmenu-item:hover { background: oklch(0.28 0.010 250) !important; }
.cards-ctxmenu > .cards-ctxmenu-item.is-danger { color: oklch(0.7 0.18 27) !important; }
.cards-ctxmenu > .cards-ctxmenu-item.is-danger:hover { background: oklch(0.68 0.18 27 / 0.16) !important; }
.cards-ctxmenu .cards-ctxmenu-ic { flex: none !important; width: 16px; text-align: center; font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════════════
   Editor visual (Quill) do Editar Carta — tema CLARO (Word/Notion).
   A modal .cards-edit-card já é branca; os inputs e barras acompanham.
   ═══════════════════════════════════════════════════════════════════════ */
/* Espaçamento uniforme + área útil maior */
.cards-edit-card .cards-edit-body { gap: 15px !important; padding: 18px 22px !important; }
.cards-edit-card .cards-rt-group { display: flex; flex-direction: column; gap: 6px; }

/* Barra de ferramentas: cinza discreto, conectada ao input (sem gap) */
.cards-edit-card .cards-rt-toolbar.ql-toolbar {
  border: 1px solid #dfe3e8 !important;
  border-bottom: 0 !important;
  border-radius: 10px 10px 0 0 !important;
  background: #f1f3f5 !important;
  padding: 7px 9px !important;
}
/* Campo de escrita: branco, texto escuro de alto contraste, mais alto */
.cards-edit-card .cards-rt-editor.ql-container {
  border: 1px solid #dfe3e8 !important;
  border-radius: 0 0 10px 10px !important;
  background: #ffffff !important;
  font-family: inherit; font-size: 14.5px;
}
.cards-edit-card .cards-rt-editor .ql-editor {
  min-height: 124px; color: #1a1d24 !important; line-height: 1.6; padding: 13px 15px;
}
/* O overlay (tema dark) tem regra em `p` que clareava o texto digitado; força
   a cor escura em todos os blocos do editor pra alto contraste no fundo branco. */
.cards-edit-card .cards-rt-editor .ql-editor p,
.cards-edit-card .cards-rt-editor .ql-editor li,
.cards-edit-card .cards-rt-editor .ql-editor h1,
.cards-edit-card .cards-rt-editor .ql-editor h2,
.cards-edit-card .cards-rt-editor .ql-editor h3,
.cards-edit-card .cards-rt-editor .ql-editor blockquote { color: #1a1d24 !important; }
.cards-edit-card .cards-rt-editor .ql-editor.ql-blank::before { color: #9aa1ac !important; font-style: normal; }
.cards-edit-card .cards-rt-editor .ql-editor pre {
  background: #f1f3f5 !important; color: #1a1d24 !important;
  border: 1px solid #e2e6ea; border-radius: 8px; padding: 8px 10px; white-space: pre-wrap;
}
.cards-edit-card .cards-rt-editor.ql-container:focus-within {
  border-color: #1ea566 !important; box-shadow: 0 0 0 3px rgba(30,165,102,0.16);
}

/* Ícones nativos do Quill legíveis no claro */
.cards-edit-card .ql-toolbar .ql-stroke { stroke: #4b5563 !important; }
.cards-edit-card .ql-toolbar .ql-fill { fill: #4b5563 !important; }
.cards-edit-card .ql-toolbar button { width: 27px; height: 27px; border-radius: 6px; }
.cards-edit-card .ql-toolbar button:hover { background: #e2e6ea !important; }
.cards-edit-card .ql-toolbar button:hover .ql-stroke { stroke: #111827 !important; }
.cards-edit-card .ql-toolbar button:hover .ql-fill { fill: #111827 !important; }
.cards-edit-card .ql-toolbar button.ql-active { background: #e7f6ee !important; }
.cards-edit-card .ql-toolbar button.ql-active .ql-stroke { stroke: #1ea566 !important; }
.cards-edit-card .ql-toolbar button.ql-active .ql-fill { fill: #1ea566 !important; }

/* Botões customizados: cores (swatch), marca-texto e Omitir (cloze) */
.cards-edit-card .cards-rt-color {
  width: 19px; height: 19px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.18) !important; cursor: pointer; margin: 0 1px;
}
.cards-edit-card .cards-rt-color:hover { transform: scale(1.12); }
.cards-edit-card .cards-rt-mark {
  width: 27px; height: 27px; border-radius: 6px; cursor: pointer;
  background: #fde68a !important; color: #7a5c00 !important; font-weight: 800; border: 1px solid #f5cf5b !important;
}
.cards-edit-card .cards-rt-cloze {
  height: 27px; padding: 0 11px; border-radius: 6px; cursor: pointer;
  background: #eef0f2 !important; color: #1a1d24 !important;
  border: 1px solid #d5dae0 !important; font-size: 12px; font-weight: 700;
}
.cards-edit-card .cards-rt-cloze:hover { background: #e2e6ea !important; }
.cards-edit-card .cards-rt-formats { display: inline-flex; align-items: center; gap: 2px; }

/* Chip de cloze DENTRO do editor (só visual do editor; o card renderiza à parte) */
.cards-edit-card .ql-editor .ql-cloze {
  background: #fde68a; color: #7a5c00; border-radius: 4px; padding: 0 3px;
  box-shadow: inset 0 0 0 1px #f59e0b; font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════
   Marca-texto (realce) MULTI-COR — render do card/prévia + swatches na toolbar.
   Fundo sólido pastel + texto escuro pra legibilidade em qualquer tema.
   ═══════════════════════════════════════════════════════════════════════ */
.cards-mark { color: #1f2430 !important; background: #fde68a; border-radius: 3px; padding: 0 3px; }
.cards-mark-yellow { background: #fde68a !important; }
.cards-mark-green  { background: #bbf7d0 !important; }
.cards-mark-pink   { background: #fbcfe8 !important; }
.cards-mark-blue   { background: #bfdbfe !important; }
.cards-mark-orange { background: #fed7aa !important; }
/* negrito/link DENTRO do realce herda o texto escuro (o strong branco !important sumiria) */
.cards-review-overlay .cards-review-card .cards-mark,
.cards-review-overlay .cards-review-card .cards-mark strong,
.cards-review-overlay .cards-review-card .cards-mark b { color: #1f2430 !important; }

/* Swatches de realce na toolbar do editor — retângulos (distintos das cores de fonte, que são círculos) */
.cards-edit-card .cards-rt-hl {
  width: 22px; height: 18px; padding: 0; border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.20) !important; cursor: pointer; margin: 0 1px;
}
.cards-edit-card .cards-rt-hl:hover { transform: scale(1.1); }
.cards-edit-card .cards-rt-hls { margin-left: 4px; }

/* ═══════════════════════════════════════════════════════════════════════
   Editor visual (Quill) no CRIAR/EDITAR carta do topic-modal — tema CLARO,
   igual ao "Editar Carta" da review (o modal já é branco). Espelha o bloco
   .cards-edit-card, escopado aqui em .cards-modal.
   ═══════════════════════════════════════════════════════════════════════ */
.cards-modal .cards-rt-toolbar.ql-toolbar {
  border: 1px solid #dfe3e8 !important; border-bottom: 0 !important;
  border-radius: 10px 10px 0 0 !important; background: #f1f3f5 !important; padding: 6px 8px !important;
}
.cards-modal .cards-rt-editor.ql-container {
  border: 1px solid #dfe3e8 !important; border-radius: 0 0 10px 10px !important;
  background: #ffffff !important; font-family: inherit; font-size: 14px;
}
.cards-modal .cards-rt-editor .ql-editor { min-height: 88px; color: #1a1d24 !important; line-height: 1.6; padding: 11px 13px; }
.cards-modal .cards-rt-editor .ql-editor p,
.cards-modal .cards-rt-editor .ql-editor li,
.cards-modal .cards-rt-editor .ql-editor h1,
.cards-modal .cards-rt-editor .ql-editor h2,
.cards-modal .cards-rt-editor .ql-editor h3,
.cards-modal .cards-rt-editor .ql-editor blockquote { color: #1a1d24 !important; }
.cards-modal .cards-rt-editor .ql-editor.ql-blank::before { color: #9aa1ac !important; font-style: normal; }
.cards-modal .cards-rt-editor .ql-editor pre {
  background: #f1f3f5 !important; color: #1a1d24 !important; border: 1px solid #e2e6ea;
  border-radius: 8px; padding: 8px 10px; white-space: pre-wrap;
}
.cards-modal .cards-rt-editor.ql-container:focus-within { border-color: #1ea566 !important; box-shadow: 0 0 0 3px rgba(30,165,102,0.16); }
.cards-modal .ql-toolbar .ql-stroke { stroke: #4b5563 !important; }
.cards-modal .ql-toolbar .ql-fill { fill: #4b5563 !important; }
.cards-modal .ql-toolbar button { width: 26px; height: 26px; border-radius: 6px; }
.cards-modal .ql-toolbar button:hover { background: #e2e6ea !important; }
.cards-modal .ql-toolbar button:hover .ql-stroke { stroke: #111827 !important; }
.cards-modal .ql-toolbar button.ql-active { background: #e7f6ee !important; }
.cards-modal .ql-toolbar button.ql-active .ql-stroke { stroke: #1ea566 !important; }
.cards-modal .cards-rt-color {
  width: 18px; height: 18px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.18) !important; cursor: pointer; margin: 0 1px;
}
.cards-modal .cards-rt-color:hover { transform: scale(1.12); }
.cards-modal .cards-rt-cloze {
  height: 26px; padding: 0 10px; border-radius: 6px; cursor: pointer;
  background: #eef0f2 !important; color: #1a1d24 !important; border: 1px solid #d5dae0 !important; font-size: 12px; font-weight: 700;
}
.cards-modal .cards-rt-cloze:hover { background: #e2e6ea !important; }
.cards-modal .cards-rt-formats { display: inline-flex; align-items: center; gap: 2px; }
.cards-modal .ql-editor .ql-cloze {
  background: #fde68a; color: #7a5c00; border-radius: 4px; padding: 0 3px;
  box-shadow: inset 0 0 0 1px #f59e0b; font-weight: 600;
}