/* ==========================================================================
   spa-modules.css — overrides aplicados ao conteúdo dos módulos do SPA
   --------------------------------------------------------------------------
   Princípio: ZERO mudança em HTML/JS dos módulos (dashboard, gps,
   notas, cards, kanban, etc). Reestiliza classes existentes pra usar os
   tokens do redesign. Carregado DEPOIS de spa-shell.css.

   Estratégia 80/20: padrões comuns (.card, .kpi, headers, buttons, inputs)
   são reestilizados aqui de forma genérica. Refinos específicos de cada
   módulo ficam pra Fase 5 (polimento).
   ========================================================================== */

/* ─── Container do conteúdo (#page-content) ─────────────────────────────── */
#page-content {
  padding: 24px !important;
  background: var(--bg-0) !important;
}

/* ─── Cards genéricos: .card-base, .card, .nyvvo-card, .dashboard-card,
       .gps-card etc ─────────────────────────────────────── */
.card-base, .nyvvo-card,
.dashboard-card, .dashboard-kpi-card,
.gps-card, .gps-aula-card, .gps-mission-card,
.kanban-card,
.acompanhamento-card,
.progresso-card, .progresso-kpi-card,
.insights-card,
.notebook-card, .notas-card,
.cards-deck-card,
/* .galeria-card excluído: tem cor/borda própria por nível de dificuldade.
   Exclusões do kanban: [class*="kanban-card-"] pega os ELEMENTOS INTERNOS do
   card (kanban-card-labels/-title/-preview/-badges), .kanban-cards-container
   é o wrapper da lista e .add-card-button é o botão de criar — sem as
   exclusões, cada um vira uma "mini caixa" com fundo/borda própria, deixando
   o card cheio de retângulos aninhados sem sentido visual. */
[class*="-card"]:not(.error-card):not(.alert-card):not([class*="empty"]):not(.galeria-card):not([class*="kanban-card-"]):not(.kanban-cards-container):not(.add-card-button):not([class*="-card-label"]):not([class*="-card-value"]):not([class*="-card-title"]):not([class*="-card-name"]):not([class*="-card-desc"]):not([class*="-card-sub"]):not([class*="-card-text"]):not([class*="-card-eyebrow"]):not(.cards-review-card) {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-lg) !important;
  color: var(--text-1);
}
/* NOTA: as exclusões acima de -card-label/-value/-title/-name/-desc/-sub/-text/
   -eyebrow tiram a borda/fundo dos SUB-ELEMENTOS DE TEXTO dos cards (que contêm
   "-card" no nome) — senão cada rótulo/valor/título ganhava uma "linha de arame"
   em volta. NÃO colide com modificadores BEM tipo .x-card--hero (que não contêm
   esses sufixos). Sub-elementos que são "tiles" (icon/thumb/head) seguem tratados
   caso a caso onde precisam. */

/* Card hero (saudação dashboard) — neutraliza gradient cyan original
   e aplica gradient sutil emerald do redesign */
body .dashboard-card--hero,
body #module-dashboard .dashboard-card--hero {
  background:
    linear-gradient(180deg, var(--bg-1), oklch(0.18 0.008 250)),
    radial-gradient(60% 80% at 100% 0%, oklch(0.74 0.16 152 / 0.08), transparent 60%) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: var(--shadow-md) !important;
}
body .dashboard-card-header--hero {
  border-bottom-color: var(--border-subtle) !important;
}

/* Cards com border colorido específico — neutraliza */
body .dashboard-card,
body .dashboard-card--onboarding,
body .dashboard-card--hero,
body [class*="dashboard-card"]:not(.dashboard-card-title):not(.dashboard-card-header):not(.dashboard-card-body) {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-lg) !important;
}
body .dashboard-card--hero {
  background:
    radial-gradient(60% 80% at 100% 0%, oklch(0.74 0.16 152 / 0.08), transparent 60%),
    linear-gradient(180deg, var(--bg-1), oklch(0.18 0.008 250)) !important;
}

/* Dashboard tabs/abas coloridas (Abrir Provas, Provas, Planejamento, etc) */
body [class*="dashboard-quick-action"],
body .dashboard-quick-action {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-2) !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  transition: all 120ms ease !important;
}
body [class*="dashboard-quick-action"]:hover,
body .dashboard-quick-action:hover {
  background: var(--bg-3) !important;
  color: var(--text-1) !important;
  border-color: var(--border-soft) !important;
}
body .dashboard-quick-action[class*="active"] {
  background: var(--accent-soft) !important;
  border-color: oklch(0.74 0.16 152 / 0.3) !important;
  color: var(--accent-strong) !important;
}

/* Numérica destacada de KPI dashboard */
body .dashboard-kpi-value,
body [class*="dashboard-kpi"][class*="value"] {
  color: var(--text-1) !important;
  font-family: var(--font-display) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.02em !important;
}
body .dashboard-kpi-label {
  color: var(--text-3) !important;
}

/* Dashboard KPI cards — neutraliza gradient slate hardcoded */
body .dashboard-kpi-card {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: none !important;
  border-radius: var(--r-lg) !important;
}
body .dashboard-kpi-card:hover {
  border-color: var(--border-soft) !important;
  background: var(--bg-2) !important;
}

/* KPI icons — mantém cor semântica mas migra hex → OKLCH */
body .dashboard-kpi-icon--green {
  background: var(--accent-soft) !important;
  border: 1px solid oklch(0.74 0.16 152 / 0.3) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}
body .dashboard-kpi-icon--teal {
  background: oklch(0.72 0.12 240 / 0.14) !important;
  border: 1px solid oklch(0.72 0.12 240 / 0.3) !important;
  color: oklch(0.72 0.12 240) !important;
  box-shadow: none !important;
}
body .dashboard-kpi-icon--blue {
  background: oklch(0.72 0.12 240 / 0.14) !important;
  border: 1px solid oklch(0.72 0.12 240 / 0.3) !important;
  color: oklch(0.72 0.12 240) !important;
  box-shadow: none !important;
}

/* SRS stats — Revisões Prioritárias (overdue/today/soon/upcoming) */
body .db-srs-stat--overdue {
  background: oklch(0.68 0.18 27 / 0.12) !important;
  border-color: oklch(0.68 0.18 27 / 0.3) !important;
  color: oklch(0.86 0.16 27) !important;
}
body .db-srs-stat--overdue .db-srs-stat-number {
  color: oklch(0.78 0.16 27) !important;
}
body .db-srs-stat--today {
  background: oklch(0.78 0.15 75 / 0.12) !important;
  border-color: oklch(0.78 0.15 75 / 0.3) !important;
  color: oklch(0.86 0.14 75) !important;
}
body .db-srs-stat--today .db-srs-stat-number {
  color: oklch(0.78 0.15 75) !important;
}
body .db-srs-stat--soon {
  background: oklch(0.78 0.15 75 / 0.10) !important;
  border-color: oklch(0.78 0.15 75 / 0.25) !important;
  color: oklch(0.86 0.14 75) !important;
}
body .db-srs-stat--soon .db-srs-stat-number {
  color: oklch(0.78 0.15 75) !important;
}
body .db-srs-stat--upcoming {
  background: oklch(0.72 0.12 240 / 0.10) !important;
  border-color: oklch(0.72 0.12 240 / 0.25) !important;
  color: oklch(0.85 0.10 240) !important;
}

/* Exam days */
body .db-exam-days--soon  { color: oklch(0.78 0.15 75) !important; }
body .db-exam-days--today { color: oklch(0.86 0.14 75) !important; }

/* Objective badges */
body .db-obj-badge--soon {
  background: oklch(0.78 0.15 75 / 0.18) !important;
  color: oklch(0.78 0.15 75) !important;
}
body .db-obj-badge--today {
  background: oklch(0.86 0.14 75 / 0.18) !important;
  color: oklch(0.86 0.14 75) !important;
}

/* db-missao-card (card hero "META SEMANAL"): substitui gradient slate-blue */
body .db-missao-card {
  background: linear-gradient(180deg, var(--bg-1), oklch(0.18 0.008 250)) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: var(--shadow-md) !important;
  border-radius: var(--r-lg) !important;
}
body .db-missao-card::before {
  background: linear-gradient(90deg, transparent, oklch(0.74 0.16 152 / 0.4), transparent) !important;
}

/* SRS alerts e demais "alerts" semânticos do dashboard */
body .db-srs-alert {
  background: oklch(0.68 0.18 27 / 0.12) !important;
  border-color: oklch(0.68 0.18 27 / 0.3) !important;
  color: oklch(0.86 0.16 27) !important;
  border-radius: var(--r-md) !important;
}
body .db-srs-alert--ok {
  background: var(--accent-soft) !important;
  border-color: oklch(0.74 0.16 152 / 0.3) !important;
  color: var(--accent-strong) !important;
}

/* Empty buttons (db-empty-btn): blue → bg-2 ghost */
body .db-empty-btn {
  background: var(--bg-2) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-2) !important;
}
body .db-empty-btn:hover {
  background: var(--bg-3) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-1) !important;
}
body .db-empty-text { color: var(--text-3) !important; }

/* dashboard-card-title-hero (era 1rem letter-spacing -0.02) */
body .dashboard-card-title--hero {
  font-size: 16px !important;
  letter-spacing: -0.015em !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  color: var(--text-1) !important;
}

/* Eyebrow do dashboard */
body .db-panel-eyebrow {
  font: 500 11px/1 var(--font-sans) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-3) !important;
}

/* dashboard-onboarding card (warning amber): mantém amber semântico */
body .dashboard-card--onboarding {
  background: linear-gradient(180deg, oklch(0.78 0.15 75 / 0.04), var(--bg-1)) !important;
  border-color: oklch(0.78 0.15 75 / 0.18) !important;
}

/* Card headers */
.dashboard-card-header, .gps-card-header,
.card-header {
  border-bottom: 1px solid var(--border-subtle) !important;
}
.dashboard-card-title, .card-title, .nyvvo-card-title {
  font: 600 14px/1.25 var(--font-display) !important;
  letter-spacing: -0.005em !important;
  color: var(--text-1) !important;
}

/* Hero card — typography display */
.dashboard-card-title--hero, .hero-title,
.dashboard-greeting-title {
  font: 600 28px/1.1 var(--font-display) !important;
  letter-spacing: -0.025em !important;
  color: var(--text-1) !important;
}

/* ─── KPI / Stat cards ──────────────────────────────────────────────────── */
/* Os :not(.pg-kpi-*) excluem o Progresso: os KPIs de lá têm skin própria
   (réplica do mockup aprovado, no bloco #module-progresso mais abaixo) e
   esse genérico com !important atropelava tamanho/peso/padding de lá. */
.dashboard-kpi-card, .progresso-kpi-card, .stat-card,
[class*="kpi-card"]:not(.pg-kpi-card), [class*="stat-card"] {
  padding: 18px !important;
}
.kpi-label, .stat-label, [class*="-kpi-label"], [class*="-stat-label"] {
  font: 500 11px/1 var(--font-sans) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-3) !important;
}
.kpi-value, .stat-value, [class*="-kpi-value"]:not(.pg-kpi-value), [class*="-stat-value"] {
  font: 600 28px/1.1 var(--font-display) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.02em !important;
  color: var(--text-1) !important;
}

/* ─── Buttons ───────────────────────────────────────────────────────────── */
.btn-primary, .nyvvo-btn-primary, .button-primary, button.primary,
[class*="btn-primary"]:not(.nv-btn-primary) {
  background: var(--accent) !important;
  color: var(--accent-fg) !important;
  border: 1px solid oklch(0.74 0.16 152 / 0.4) !important;
  border-radius: var(--r-md) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 0 0 oklch(1 0 0 / 0.2) inset, 0 8px 20px oklch(0.74 0.16 152 / 0.18) !important;
  transition: all 120ms ease !important;
}
.btn-primary:hover, .nyvvo-btn-primary:hover, .button-primary:hover {
  background: var(--accent-strong) !important;
}

.btn-secondary, .nyvvo-btn-secondary, .button-secondary,
[class*="btn-secondary"]:not(.nv-btn-secondary) {
  background: var(--bg-2) !important;
  color: var(--text-1) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--r-md) !important;
  transition: all 120ms ease !important;
}
.btn-secondary:hover, .nyvvo-btn-secondary:hover {
  background: var(--bg-3) !important;
  border-color: var(--border-strong) !important;
}

.btn-ghost, .nyvvo-btn-ghost, .button-ghost {
  background: transparent !important;
  color: var(--text-2) !important;
  border: 1px solid transparent !important;
}
.btn-ghost:hover {
  background: var(--bg-2) !important;
  color: var(--text-1) !important;
}

/* ─── Inputs ────────────────────────────────────────────────────────────── */
.input-base, .nyvvo-input, input[type="text"]:not(.nv-input):not(.code-input),
input[type="email"]:not(.nv-input), input[type="search"]:not(.nv-input),
textarea:not(.nv-textarea):not(.nv-input) {
  background: var(--bg-3) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--r-md) !important;
  color: var(--text-1) !important;
  font: 400 14px/1.5 var(--font-sans) !important;
  transition: all 120ms ease !important;
}
.input-base:focus, .nyvvo-input:focus,
input[type="text"]:not(.nv-input):focus, input[type="email"]:not(.nv-input):focus,
input[type="search"]:not(.nv-input):focus, textarea:not(.nv-textarea):focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
  background: var(--bg-2) !important;
}

/* ─── Headings dentro de módulos ────────────────────────────────────────── */
[id^="module-"] h1, .module h1, #page-content > h1 {
  font: 600 26px/1.15 var(--font-display) !important;
  letter-spacing: -0.02em !important;
  color: var(--text-1) !important;
  margin: 0 0 6px !important;
}
[id^="module-"] h2, .module h2, #page-content > h2 {
  font: 600 18px/1.2 var(--font-display) !important;
  letter-spacing: -0.015em !important;
  color: var(--text-1) !important;
}
[id^="module-"] h3, .module h3 {
  font: 600 14px/1.25 var(--font-display) !important;
  letter-spacing: -0.005em !important;
  color: var(--text-1) !important;
}

/* ─── Tables ──────────────────────────────────────────────────────────────
   `table:not(.nv-table)` antes era catch-all GLOBAL — afetava libs externas
   (FullCalendar, modais isolados) que não controlamos. Escopado a `.nv-app`
   pra que o styling default só atinja tabelas dentro de módulos do app. */
.data-table, .nv-app table:not(.nv-table) {
  border-collapse: collapse;
  width: 100%;
}
.data-table thead th, .nv-app table:not(.nv-table) thead th {
  background: oklch(0.17 0.008 250) !important;
  font: 500 11px/1 var(--font-sans) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-3) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  text-align: left;
  padding: 12px 16px;
}
.data-table tbody td, .nv-app table:not(.nv-table) tbody td {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  vertical-align: middle;
}
.data-table tbody tr:hover, .nv-app table:not(.nv-table) tbody tr:hover {
  background: var(--bg-2) !important;
}

/* ─── Badges / chips genéricos ──────────────────────────────────────────── */
/* Exclusões kanban: .kanban-card-badges é o CONTAINER (flex row, não é pílula)
   e .kanban-card-badge tem cores próprias (prioridade/data) — a pílula
   genérica com !important apagaria essas cores. */
.badge, .tag, .pill,
[class*="-badge"]:not(.plan-badge):not(.opt-selected-chip):not(.cad-acerto-badge):not(.cad-fase-badge):not(.cad-peso-badge):not(.cad-nivel-badge):not(.cad-done-badge):not(.kanban-card-badges):not(.kanban-card-badge):not([class*="sect-badge"]):not(.cards-leech-badge) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--bg-2) !important;
  border: 1px solid var(--border-soft) !important;
  color: var(--text-2) !important;
  font: 500 11px/1 var(--font-sans) !important;
  letter-spacing: 0.01em !important;
}

/* Variantes semânticas comuns */
.badge-success, .tag-success, .pill-success,
.badge-active, [class*="-success"][class*="-badge"] {
  background: var(--accent-soft) !important;
  border-color: oklch(0.74 0.16 152 / 0.3) !important;
  color: var(--accent-strong) !important;
}
.badge-warning, .tag-warning, .pill-warning {
  background: oklch(0.78 0.15 75 / 0.14) !important;
  border-color: oklch(0.78 0.15 75 / 0.3) !important;
  color: oklch(0.86 0.14 75) !important;
}
.badge-danger, .tag-danger, .pill-danger,
.badge-error, [class*="-error"][class*="-badge"] {
  background: oklch(0.68 0.18 27 / 0.14) !important;
  border-color: oklch(0.68 0.18 27 / 0.3) !important;
  color: oklch(0.78 0.16 27) !important;
}

/* ─── Progress bars genéricas ───────────────────────────────────────────── */
.progress-bar, [class*="progress"][class*="bar"]:not(.nv-progress):not([class*="review-progress"]) {
  background: var(--bg-3) !important;
  border-radius: 999px !important;
  overflow: hidden;
}
.progress-fill, [class*="progress"][class*="fill"]:not(.nv-progress-bar) {
  background: var(--accent) !important;
}

/* ─── Modal generic ─────────────────────────────────────────────────────── */
.modal-overlay, .modal-backdrop, [class*="modal-bg"] {
  background: oklch(0.08 0 0 / 0.6) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal-content, .modal-dialog, .modal-card {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ─── Empty states genéricos ────────────────────────────────────────────── */
.empty-state, [class*="empty-state"] {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-3) !important;
}
.empty-state h3 {
  font: 600 16px/1.3 var(--font-display) !important;
  color: var(--text-1) !important;
  margin: 0 0 6px !important;
}

/* ─── Específicos: dashboard ────────────────────────────────────────────── */
.dashboard-greeting-eyebrow,
.dashboard-eyebrow,
[class*="-eyebrow"]:not(.nv-eyebrow) {
  font: 500 11px/1 var(--font-sans) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-3) !important;
}

/* Sparklines: cor accent automática */
[class*="sparkline"] svg path[stroke="#"]:not([stroke="none"]),
[class*="-spark"] svg path:not([fill]) {
  stroke: var(--accent) !important;
}

/* ─── Específicos: GPS ──────────────────────────────────────────────────── */
.gps-tab.active, .tab-active, [class*="-tab"][class*="active"] {
  color: var(--text-1) !important;
  border-bottom-color: var(--accent) !important;
}

/* ─── Específicos: notas/notebook ───────────────────────────────────────── */
.notas-callout,
.notebook-callout,
.gpsn-callout {
  border-left: 2px solid var(--border-soft) !important;
  background: var(--bg-2) !important;
  border-radius: 8px !important;
  padding: 18px !important;
}

/* ─── Renewal banner (já no shell) ──────────────────────────────────────── */
#subscription-renewal-banner {
  background: oklch(0.78 0.15 75 / 0.08) !important;
  border-bottom-color: oklch(0.78 0.15 75 / 0.2) !important;
}
#subscription-renewal-kicker {
  color: oklch(0.86 0.14 75) !important;
}
#subscription-renewal-cta {
  background: oklch(0.78 0.15 75) !important;
  color: oklch(0.16 0.04 75) !important;
}

/* ============================================================================
   DASHBOARD REFIT — overrides agressivos sobre dashboard.css legado (2011 lin)
   Neutraliza gradientes cyan, ::before mágico, grid de 2 colunas, etc.
   Selector base: #module-dashboard.nv-app pra ganhar especificidade.
   ============================================================================ */

#module-dashboard.nv-app .nv-card::before,
#module-dashboard.nv-app .dashboard-card::before {
  display: none !important;
  content: none !important;
}

#module-dashboard.nv-app .dashboard-card,
#module-dashboard.nv-app .dashboard-card--hero,
#module-dashboard.nv-app .dashboard-card--onboarding {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  backdrop-filter: none !important;
  overflow: hidden !important;
}

#module-dashboard.nv-app .dashboard-card--hero {
  background:
    radial-gradient(60% 80% at 100% 0%, oklch(0.74 0.16 152 / 0.06), transparent 60%),
    var(--bg-1) !important;
  position: relative !important;
}

#module-dashboard.nv-app .dashboard-priority-zone {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 320px !important;
  gap: 20px !important;
  margin-bottom: 20px !important;
  align-items: stretch !important;
}

#module-dashboard.nv-app .dashboard-kpis-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 20px !important;
}
#module-dashboard.nv-app .dashboard-kpis-grid .dashboard-kpi-card:last-child:nth-child(odd) {
  grid-column: auto !important;
}

#module-dashboard.nv-app .dashboard-kpi-card {
  display: block !important;
  align-items: unset !important;
  gap: 0 !important;
  min-height: auto !important;
  padding: 18px !important;
  background: var(--bg-1) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: border-color 160ms ease, transform 160ms ease !important;
}
#module-dashboard.nv-app .dashboard-kpi-card:hover {
  border-color: oklch(0.74 0.16 152 / 0.35) !important;
  transform: translateY(-1px) !important;
  background: var(--bg-1) !important;
}
#module-dashboard.nv-app .dashboard-kpi-value {
  font-family: var(--font-mono) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--text-1) !important;
  line-height: 1.1 !important;
}

#module-dashboard.nv-app .dashboard-charts-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) !important;
  gap: 14px !important;
  margin-bottom: 20px !important;
}
#module-dashboard.nv-app .dashboard-lower-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) !important;
  gap: 14px !important;
  margin-bottom: 20px !important;
}
#module-dashboard.nv-app .dashboard-extras-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 14px !important;
}

#module-dashboard.nv-app .dashboard-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 12px !important;
  font: 500 12px/1 var(--font-sans) !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-soft) !important;
  background: var(--bg-2) !important;
  color: var(--text-2) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  min-height: auto !important;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease !important;
}
#module-dashboard.nv-app .dashboard-action-btn:hover {
  border-color: oklch(0.74 0.16 152 / 0.35) !important;
  background: var(--bg-3) !important;
  color: var(--text-1) !important;
}
#module-dashboard.nv-app .dashboard-action-btn[data-state="active"] {
  background: var(--accent-soft) !important;
  border-color: oklch(0.74 0.16 152 / 0.35) !important;
  color: var(--accent-strong) !important;
}

#module-dashboard.nv-app .grind-settings-btn {
  border-radius: 999px !important;
  padding: 6px 10px !important;
  font-size: 11px !important;
}

#module-dashboard.nv-app .dashboard-card-title {
  display: block !important;
  font-family: var(--font-display) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  color: var(--text-1) !important;
}
#module-dashboard.nv-app .dashboard-card-title--hero {
  font-family: var(--font-display) !important;
  font-size: 36px !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.05 !important;
  margin: 6px 0 10px !important;
}

#module-dashboard.nv-app .nv-card h3.dashboard-card-title,
#module-dashboard.nv-app .nv-card .nv-h2 {
  margin: 0 !important;
  font: 600 16px/1.3 var(--font-display) !important;
  letter-spacing: -0.015em !important;
  color: var(--text-1) !important;
}

#module-dashboard.nv-app .nv-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

#module-dashboard.nv-app #dashboard-current-mission-card {
  max-height: 360px !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
}
#module-dashboard.nv-app #dashboard-current-mission-card::-webkit-scrollbar {
  width: 4px !important;
}
#module-dashboard.nv-app #dashboard-current-mission-card::-webkit-scrollbar-thumb {
  background: var(--border-soft) !important;
  border-radius: 2px !important;
}

@media (max-width: 1100px) {
  #module-dashboard.nv-app .dashboard-priority-zone,
  #module-dashboard.nv-app .dashboard-charts-row,
  #module-dashboard.nv-app .dashboard-lower-row,
  #module-dashboard.nv-app .dashboard-extras-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #module-dashboard.nv-app .dashboard-kpis-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 600px) {
  #module-dashboard.nv-app .dashboard-kpis-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #module-dashboard.nv-app .dashboard-card-title--hero {
    font-size: 28px !important;
  }
}

/* ============================================================================
   DASHBOARD REFIT — Fase 5: integra HTML legado (classes db-*) injetado por
   dashboard.js dentro dos cards do redesign (SRS, Insights, Objetivos,
   Onboarding). Sem refatorar JS — só adapta o styling pra ficar limpo.
   ============================================================================ */

/* Empty states unificados ---------------------------------------------------- */
#module-dashboard.nv-app .db-empty-panel,
#module-dashboard.nv-app .db-empty-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 8px !important;
  padding: 16px 12px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--text-2) !important;
}
#module-dashboard.nv-app .db-empty-panel-icon {
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: var(--accent-soft, oklch(0.74 0.16 152 / 0.12)) !important;
  color: var(--accent) !important;
}
#module-dashboard.nv-app .db-empty-panel-title {
  font: 600 13px/1.3 var(--font-sans) !important;
  color: var(--text-1) !important;
}
#module-dashboard.nv-app .db-empty-panel-text,
#module-dashboard.nv-app .db-empty-text {
  font: 400 12px/1.45 var(--font-sans) !important;
  color: var(--text-3) !important;
  max-width: 320px !important;
}
#module-dashboard.nv-app .db-empty-btn,
#module-dashboard.nv-app .db-panel-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 12px !important;
  font: 500 12px/1 var(--font-sans) !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-soft) !important;
  background: var(--bg-2) !important;
  color: var(--text-1) !important;
  cursor: pointer !important;
  transition: border-color 120ms ease, background 120ms ease !important;
}
#module-dashboard.nv-app .db-empty-btn:hover,
#module-dashboard.nv-app .db-panel-link:hover {
  border-color: oklch(0.74 0.16 152 / 0.35) !important;
  background: var(--bg-3) !important;
}

/* Eyebrows / títulos / subtítulos dos cards legados -------------------------- */
#module-dashboard.nv-app .db-panel-eyebrow {
  display: inline-block !important;
  font: 600 10px/1 var(--font-sans) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase !important;
  color: var(--text-3) !important;
  margin-bottom: 6px !important;
}
#module-dashboard.nv-app .db-panel-title {
  font: 600 16px/1.3 var(--font-display) !important;
  letter-spacing: -0.015em !important;
  color: var(--text-1) !important;
  margin: 0 0 4px !important;
}
#module-dashboard.nv-app .db-panel-subtitle {
  font: 400 12px/1.5 var(--font-sans) !important;
  color: var(--text-3) !important;
}
#module-dashboard.nv-app .db-panel-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--border-soft) !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

/* Pills / badges legados ----------------------------------------------------- */
#module-dashboard.nv-app .db-pill,
#module-dashboard.nv-app .db-badge-row > * {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 9px !important;
  height: auto !important;
  font: 500 10.5px/1 var(--font-sans) !important;
  border-radius: 999px !important;
  border: 1px solid var(--border-soft) !important;
  background: var(--bg-2) !important;
  color: var(--text-2) !important;
}
#module-dashboard.nv-app .db-pill--cyan {
  background: var(--accent-soft, oklch(0.74 0.16 152 / 0.12)) !important;
  border-color: oklch(0.74 0.16 152 / 0.3) !important;
  color: var(--accent-strong, var(--accent)) !important;
}
#module-dashboard.nv-app .db-badge-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 8px !important;
}

/* SRS — grid de 4 stats ------------------------------------------------------ */
#module-dashboard.nv-app .db-srs-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}
#module-dashboard.nv-app .db-srs-stat {
  padding: 12px 14px !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--r-md) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
#module-dashboard.nv-app .db-srs-stat-number {
  font: 600 22px/1 var(--font-mono) !important;
  letter-spacing: -0.02em;
  color: var(--text-1) !important;
}
#module-dashboard.nv-app .db-srs-stat-label {
  font: 500 11px/1 var(--font-sans) !important;
  color: var(--text-3) !important;
}
#module-dashboard.nv-app .db-srs-stat--overdue .db-srs-stat-number {
  color: oklch(0.66 0.18 25) !important;
}
#module-dashboard.nv-app .db-srs-stat--soon .db-srs-stat-number {
  color: oklch(0.78 0.15 75) !important;
}
#module-dashboard.nv-app .db-srs-alert {
  margin: 8px 0 12px !important;
  padding: 10px 12px !important;
  border-radius: var(--r-md) !important;
  border: 1px solid oklch(0.66 0.18 25 / 0.3) !important;
  background: oklch(0.66 0.18 25 / 0.08) !important;
  color: var(--text-2) !important;
  font-size: 12px !important;
}
#module-dashboard.nv-app .db-srs-alert--ok {
  border-color: oklch(0.74 0.16 152 / 0.3) !important;
  background: var(--accent-soft, oklch(0.74 0.16 152 / 0.08)) !important;
}
#module-dashboard.nv-app .db-srs-cta {
  display: flex !important;
  gap: 8px !important;
  justify-content: flex-end !important;
}

/* Objetivos — lista de itens ------------------------------------------------- */
#module-dashboard.nv-app .db-obj-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
#module-dashboard.nv-app .db-obj-item {
  padding: 12px 14px !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--r-md) !important;
}
#module-dashboard.nv-app .db-obj-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 8px !important;
  gap: 8px !important;
}
#module-dashboard.nv-app .db-obj-name {
  font: 600 13px/1.3 var(--font-sans) !important;
  color: var(--text-1) !important;
}
#module-dashboard.nv-app .db-obj-meta {
  font: 400 11px/1.4 var(--font-mono) !important;
  color: var(--text-3) !important;
}
#module-dashboard.nv-app .db-obj-bar-track {
  height: 4px !important;
  background: var(--bg-3) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  margin-top: 6px !important;
}
#module-dashboard.nv-app .db-obj-bar-fill {
  height: 100% !important;
  background: var(--accent) !important;
  border-radius: 2px !important;
  transition: width 320ms ease !important;
}
#module-dashboard.nv-app .db-obj-badge {
  font: 500 10px/1 var(--font-sans) !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  background: var(--accent-soft, oklch(0.74 0.16 152 / 0.12)) !important;
  color: var(--accent-strong, var(--accent)) !important;
  border: 1px solid oklch(0.74 0.16 152 / 0.3) !important;
}

/* Metric cards reutilizados em vários lugares -------------------------------- */
#module-dashboard.nv-app .db-metric-card {
  padding: 10px 12px !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--r-md) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
#module-dashboard.nv-app .db-metric-label {
  font: 500 10px/1 var(--font-sans) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em;
  color: var(--text-3) !important;
}
#module-dashboard.nv-app .db-metric-value {
  font: 600 13px/1.3 var(--font-sans) !important;
  color: var(--text-1) !important;
}
#module-dashboard.nv-app .db-metric-value--accent {
  color: var(--accent-strong, var(--accent)) !important;
}
#module-dashboard.nv-app .db-metric-value--wrap {
  white-space: normal !important;
  word-wrap: break-word !important;
}

/* ============================================================================
   GPS REFIT — overrides aplicados sobre gps.css legado (6599 linhas).
   Selector base: #module-gps.nv-app pra ganhar especificidade.
   Estratégia: NÃO reescrever a estrutura HTML do módulo. Adapta cards,
   botões e cores para o token system do redesign sem mudar IDs/JS.
   ============================================================================ */

/* Page header → padding consistente, sem o título grande do legado */
#module-gps.nv-app {
  padding: 0;
}
#module-gps.nv-app .module-orientation-card,
#module-gps.nv-app .module-orientation-card--collapsible {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--r-lg) !important;
  margin-bottom: 16px !important;
}

/* Central de controle (gps-ctrl-bar) — rail que RECUA (bg-0), pra os 3 blocos
   virarem cards elevados (bg-2). Estrutura clara, sem "caixa dentro de caixa". */
#module-gps.nv-app .gps-ctrl-bar {
  background: var(--bg-0) !important;
  border: 1px solid oklch(1 0 0 / 0.05) !important;
  border-radius: var(--r-lg) !important;
  padding: 14px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 12px !important;
  box-shadow: var(--shadow-sm) !important;
  flex-wrap: wrap !important;
}
#module-gps.nv-app .gps-ctrl-bar::before { display: none !important; }
/* Cada bloco é um card elevado. */
#module-gps.nv-app .gps-ctrl-contexto-block,
#module-gps.nv-app .gps-ctrl-discipline-block,
#module-gps.nv-app .gps-ctrl-actions-block {
  background: var(--bg-2) !important;
  border: 1px solid oklch(1 0 0 / 0.06) !important;
  border-radius: var(--r-md) !important;
  padding: 13px 15px !important;
  box-shadow: 0 1px 0 0 oklch(1 0 0 / 0.03) inset, 0 2px 8px oklch(0 0 0 / 0.2) !important;
}
#module-gps.nv-app .gps-ctrl-discipline-block,
#module-gps.nv-app .gps-ctrl-actions-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  flex: 1 !important;
  min-width: 220px !important;
}
#module-gps.nv-app .gps-ctrl-block-header {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font: 600 10px/1 var(--font-sans) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase !important;
  color: var(--text-3) !important;
  margin-bottom: 2px !important;
}
#module-gps.nv-app .gps-ctrl-header-icon {
  width: 12px !important;
  height: 12px !important;
  color: var(--accent) !important;
}
#module-gps.nv-app .gps-ctrl-block-title {
  font: 600 10px/1 var(--font-sans) !important;
  letter-spacing: inherit;
}
#module-gps.nv-app .gps-ctrl-vsep {
  width: 1px !important;
  background: var(--border-subtle) !important;
  align-self: stretch !important;
  flex-shrink: 0 !important;
}

/* Select e botões da central — alinhar com nv-input/nv-btn */
#module-gps.nv-app .gps-ctrl-select {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-soft) !important;
  color: var(--text-1) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font: 500 13px/1 var(--font-sans) !important;
  min-height: 36px !important;
  width: 100% !important;
  cursor: pointer;
  transition: border-color 120ms ease;
}
#module-gps.nv-app .gps-ctrl-select:hover {
  border-color: oklch(0.74 0.16 152 / 0.35) !important;
}
#module-gps.nv-app .gps-ctrl-select:focus {
  outline: 0 !important;
  border-color: oklch(0.74 0.16 152 / 0.6) !important;
}
#module-gps.nv-app .gps-ctrl-action-btn,
#module-gps.nv-app .gps-ctrl-disc-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 12px !important;
  font: 500 12px/1 var(--font-sans) !important;
  border-radius: 8px !important;
  background: var(--bg-2) !important;
  color: var(--text-2) !important;
  border: 1px solid var(--border-soft) !important;
  text-transform: none !important;
  letter-spacing: 0;
  min-height: auto !important;
  height: auto !important;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
#module-gps.nv-app .gps-ctrl-action-btn:not(:disabled):hover,
#module-gps.nv-app .gps-ctrl-disc-btn:hover {
  border-color: oklch(0.74 0.16 152 / 0.35) !important;
  background: var(--bg-3) !important;
  color: var(--text-1) !important;
}
#module-gps.nv-app .gps-ctrl-action-btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}
#module-gps.nv-app .gps-ctrl-actions-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

/* KPI top row — 3 cards estilo nv-card kpi (espelha dashboard) */
#module-gps.nv-app #gps-performance-top-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 16px !important;
}
#module-gps.nv-app #gps-performance-top-row > .gps-performance-card,
#module-gps.nv-app #gps-performance-top-row > .widget-card {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--r-lg) !important;
  padding: 18px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: border-color 160ms ease, transform 160ms ease;
}
#module-gps.nv-app #gps-performance-top-row > .widget-card:hover {
  border-color: oklch(0.74 0.16 152 / 0.35) !important;
  transform: translateY(-1px);
}

/* Bloco atual + Stats / outras section widgets */
#module-gps.nv-app .widget-card {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 22px !important;
}
#module-gps.nv-app .widget-title {
  font: 600 16px/1.3 var(--font-display) !important;
  letter-spacing: -0.015em;
  color: var(--text-1) !important;
  margin: 0 0 14px !important;
}

/* Botões grandes (gerar, cancelar, próxima) seguem padrão nv-btn */
#module-gps.nv-app .btn-primary,
#module-gps.nv-app .btn-secondary,
#module-gps.nv-app .btn-danger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  font: 500 12px/1 var(--font-sans) !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease, border-color 120ms ease;
  text-transform: none !important;
  letter-spacing: 0;
}
#module-gps.nv-app .btn-primary {
  background: var(--accent) !important;
  color: var(--accent-fg, oklch(0.16 0.008 250)) !important;
  border-color: oklch(0.74 0.16 152 / 0.4) !important;
}
#module-gps.nv-app .btn-primary:hover {
  background: var(--accent-strong, var(--accent)) !important;
  transform: translateY(-1px);
}
#module-gps.nv-app .btn-secondary {
  background: var(--bg-2) !important;
  color: var(--text-2) !important;
  border-color: var(--border-soft) !important;
}
#module-gps.nv-app .btn-secondary:hover {
  background: var(--bg-3) !important;
  border-color: oklch(0.74 0.16 152 / 0.35) !important;
  color: var(--text-1) !important;
}
#module-gps.nv-app .btn-danger {
  background: oklch(0.66 0.18 25 / 0.12) !important;
  color: oklch(0.78 0.18 25) !important;
  border-color: oklch(0.66 0.18 25 / 0.3) !important;
}
#module-gps.nv-app .btn-danger:hover {
  background: oklch(0.66 0.18 25 / 0.2) !important;
}

/* GPS — widget-header (cabeçalho de cada section) */
#module-gps.nv-app .widget-header {
  background: transparent !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: 14px 22px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
#module-gps.nv-app .widget-header .widget-title {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-grow: 1 !important;
  min-width: 0 !important;
}
#module-gps.nv-app .widget-body {
  padding: 18px 22px !important;
  background: transparent !important;
}
#module-gps.nv-app .widget-body.\!p-0 {
  padding: 0 !important;
}

/* Mission badge (Foco Agora) */
#module-gps.nv-app .mission-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 9px !important;
  font: 600 10px/1 var(--font-sans) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  background: var(--accent-soft, oklch(0.74 0.16 152 / 0.15)) !important;
  color: var(--accent-strong, var(--accent)) !important;
  border: 1px solid oklch(0.74 0.16 152 / 0.3) !important;
}

/* Stats / KPI cards internos da section gps-stats */
#module-gps.nv-app #gps-stats .kpi-card {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--r-md) !important;
  padding: 12px !important;
  transition: border-color 120ms ease;
}
#module-gps.nv-app #gps-stats .kpi-card:hover {
  border-color: oklch(0.74 0.16 152 / 0.3) !important;
}
#module-gps.nv-app #gps-stats .kpi-title {
  color: var(--text-3) !important;
  letter-spacing: 0.06em;
}
#module-gps.nv-app #gps-stats .kpi-value {
  font: 600 22px/1 var(--font-mono) !important;
  letter-spacing: -0.02em;
  color: var(--text-1) !important;
}
#module-gps.nv-app #gps-stats #gps-kpi-performance { color: oklch(0.80 0.14 160) !important; }
#module-gps.nv-app #gps-stats #gps-kpi-time { color: var(--accent) !important; }
#module-gps.nv-app #gps-stats #gps-kpi-attention { color: oklch(0.78 0.15 75) !important; }
#module-gps.nv-app #gps-stats #gps-kpi-progress { color: var(--text-1) !important; }
#module-gps.nv-app #gps-stats .kpi-detail {
  font: 400 11px/1.3 var(--font-sans) !important;
  color: var(--text-3) !important;
}

/* Donut do progresso da disciplina — só cor de fundo do wrap */
#module-gps.nv-app #gps-discipline-progress-chart-wrap {
  filter: drop-shadow(0 4px 8px oklch(0 0 0 / 0.2));
}
#module-gps.nv-app #gps-kpi-attention-percent {
  font: 800 32px/1 var(--font-mono) !important;
  letter-spacing: -0.03em;
  color: var(--text-1) !important;
}

/* Bloco atual lista (mission tasks) - alinhar separadores e bg */
#module-gps.nv-app #gps-bloco-atual-lista {
  background: transparent !important;
  border-color: var(--border-subtle) !important;
}
/* MISSÃO — cada tarefa vira um CARD com contorno completo (resolve o "topo sem
   borda" da 1ª) e COR por disciplina: faixa lateral + tint sutil + nome colorido
   (via --disc-cor setado no JS). Completed/timer-active mantêm o verde do gps.css
   (!important); aqui só damos a moldura e a cor da matéria. */
#module-gps.nv-app #gps-bloco-atual-lista .gps-bloco-item {
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--disc-cor, var(--accent));
  border-radius: 12px;
  margin-bottom: 8px;
  background: color-mix(in oklch, var(--disc-cor, var(--accent)) 5%, var(--bg-1));
}
#module-gps.nv-app #gps-bloco-atual-lista > div:last-child .gps-bloco-item { margin-bottom: 0; }
#module-gps.nv-app #gps-bloco-atual-lista .gps-bloco-item:hover {
  background: color-mix(in oklch, var(--disc-cor, var(--accent)) 11%, var(--bg-1));
}
#module-gps.nv-app #gps-bloco-atual-lista .gps-bloco-item-disciplina {
  color: var(--disc-cor, var(--text-2)); font-weight: 700;
}
/* card ativo/concluído: moldura na cor do estado (garante contorno no topo) */
#module-gps.nv-app #gps-bloco-atual-lista .gps-bloco-item.completed,
#module-gps.nv-app #gps-bloco-atual-lista .gps-bloco-item.timer-active {
  border-color: color-mix(in oklch, var(--accent) 45%, transparent);
}

/* --- MISSÃO VIVA: entrada em cascata, hover com brilho, ativo respirando --- */
#module-gps.nv-app #gps-bloco-atual-lista .gps-bloco-item {
  transition: transform 0.16s ease, box-shadow 0.22s ease, background 0.18s ease, border-color 0.18s ease;
}
#module-gps.nv-app #gps-bloco-atual-lista .gps-bloco-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -10px color-mix(in oklch, var(--disc-cor, var(--accent)) 60%, transparent);
}
@keyframes gps-mission-in {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}
/* cascata só quando o CONJUNTO de tarefas muda (classe gps-mission-nasce no JS) */
#module-gps.nv-app #gps-bloco-atual-lista.gps-mission-nasce .gps-bloco-item {
  animation: gps-mission-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
/* card do timer ATIVO: respira um glow na cor de acento (como o Ciclo) */
@keyframes gps-mission-breathe {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 32%, transparent); }
  50%      { box-shadow: 0 0 20px 2px color-mix(in oklch, var(--accent) 32%, transparent); }
}
#module-gps.nv-app #gps-bloco-atual-lista .gps-bloco-item.timer-active {
  animation: gps-mission-breathe 2.6s ease-in-out infinite;
}
@keyframes gps-mission-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.3); opacity: 0.65; }
}
#module-gps.nv-app #gps-bloco-atual-lista .gps-bloco-item.timer-active .gps-bloco-status-indicator {
  animation: gps-mission-dot 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  #module-gps.nv-app #gps-bloco-atual-lista.gps-mission-nasce .gps-bloco-item,
  #module-gps.nv-app #gps-bloco-atual-lista .gps-bloco-item.timer-active,
  #module-gps.nv-app #gps-bloco-atual-lista .gps-bloco-item.timer-active .gps-bloco-status-indicator { animation: none; }
  #module-gps.nv-app #gps-bloco-atual-lista .gps-bloco-item:hover { transform: none; }
}
#module-gps.nv-app #gps-bloco-atual-lista p.text-center {
  color: var(--text-3) !important;
}
#module-gps.nv-app #gps-bloco-atual-widget .widget-body.bg-gray-900\/30,
#module-gps.nv-app #gps-stats .widget-body.bg-gray-800\/20 {
  background: transparent !important;
}

/* Tracking section header + tabs */
#module-gps.nv-app #gps-tracking .widget-header {
  flex-direction: row !important;
  align-items: center !important;
}
#module-gps.nv-app .gps-section-tabs {
  display: inline-flex !important;
  gap: 2px !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 8px !important;
  padding: 2px !important;
}
#module-gps.nv-app .gps-section-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  font: 500 12px/1 var(--font-sans) !important;
  border-radius: 6px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--text-3) !important;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
#module-gps.nv-app .gps-section-tab:hover {
  color: var(--text-1) !important;
  background: var(--bg-3) !important;
}
#module-gps.nv-app .gps-section-tab.is-active {
  background: var(--bg-1) !important;
  color: var(--accent-strong, var(--accent)) !important;
  border: 1px solid var(--border-soft) !important;
}
#module-gps.nv-app .gps-count-badge {
  font: 600 10px/1 var(--font-sans) !important;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  background: var(--accent-soft, oklch(0.74 0.16 152 / 0.15)) !important;
  color: var(--accent-strong, var(--accent)) !important;
}

/* View toggle (Modo foco button) */
#module-gps.nv-app .gps-view-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 10px !important;
  font: 500 11px/1 var(--font-sans) !important;
  border-radius: 8px !important;
  background: var(--bg-2) !important;
  color: var(--text-2) !important;
  border: 1px solid var(--border-soft) !important;
  cursor: pointer;
  transition: all 120ms ease;
}
#module-gps.nv-app .gps-view-toggle:hover {
  background: var(--bg-3) !important;
  color: var(--text-1) !important;
}
#module-gps.nv-app .gps-view-toggle[aria-pressed="true"] {
  background: var(--accent-soft, oklch(0.74 0.16 152 / 0.15)) !important;
  color: var(--accent-strong, var(--accent)) !important;
  border-color: oklch(0.74 0.16 152 / 0.35) !important;
}

/* GPS — tracking table (header + rows) */
#module-gps.nv-app #gps-tracking-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
#module-gps.nv-app #gps-tracking-table thead {
  background: var(--bg-2) !important;
}
#module-gps.nv-app #gps-tracking-table thead th {
  background: var(--bg-2) !important;
  font: 600 10px/1.4 var(--font-sans) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase !important;
  color: var(--text-3) !important;
  border-bottom: 1px solid var(--border-soft) !important;
}
#module-gps.nv-app #gps-tracking-table tbody {
  background: transparent !important;
}
#module-gps.nv-app #gps-tracking-table tbody tr {
  background: transparent !important;
  transition: background 100ms ease;
}
#module-gps.nv-app #gps-tracking-table tbody tr:hover {
  background: oklch(0.74 0.16 152 / 0.04) !important;
}
#module-gps.nv-app #gps-tracking-table tbody tr td {
  border-color: var(--border-subtle) !important;
  color: var(--text-2) !important;
}

/* GPS — search + filters da tracking section */
#module-gps.nv-app .gps-tracking-search {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 10px !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 8px !important;
  transition: border-color 120ms ease;
}
#module-gps.nv-app .gps-tracking-search:focus-within {
  border-color: oklch(0.74 0.16 152 / 0.45) !important;
}
#module-gps.nv-app .gps-tracking-search-icon {
  color: var(--text-3) !important;
}
#module-gps.nv-app .gps-tracking-search-input {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  font: 400 12px/1 var(--font-sans) !important;
  color: var(--text-1) !important;
  min-width: 140px !important;
}
#module-gps.nv-app .gps-tracking-search-input::placeholder { color: var(--text-3) !important; }
#module-gps.nv-app .gps-tracking-search-clear {
  background: transparent !important;
  border: 0 !important;
  color: var(--text-3) !important;
  padding: 2px !important;
  border-radius: 4px;
  cursor: pointer;
}
#module-gps.nv-app .gps-tracking-search-clear:hover { color: var(--text-1) !important; }

/* GPS — Revisões filters (botões pill) */
#module-gps.nv-app .gps-revisoes-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 14px 22px !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}
#module-gps.nv-app .gps-rev-filter-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  font: 500 12px/1 var(--font-sans) !important;
  border-radius: 999px !important;
  background: var(--bg-2) !important;
  color: var(--text-2) !important;
  border: 1px solid var(--border-soft) !important;
  cursor: pointer;
  transition: all 120ms ease;
}
#module-gps.nv-app .gps-rev-filter-btn:hover {
  background: var(--bg-3) !important;
  color: var(--text-1) !important;
}
#module-gps.nv-app .gps-rev-filter-btn.is-active {
  background: var(--accent-soft, oklch(0.74 0.16 152 / 0.15)) !important;
  color: var(--accent-strong, var(--accent)) !important;
  border-color: oklch(0.74 0.16 152 / 0.35) !important;
}
#module-gps.nv-app .gps-rev-filter-btn .gps-count-badge {
  margin-left: 2px !important;
}

/* GPS — Drawer (configurações) */
#module-gps.nv-app .gps-drawer-title {
  font: 600 16px/1.3 var(--font-display) !important;
  letter-spacing: -0.015em;
  color: var(--text-1) !important;
}
#module-gps.nv-app .gps-drawer-close-btn {
  background: transparent !important;
  border: 0 !important;
  color: var(--text-3) !important;
  padding: 6px !important;
  border-radius: 6px;
  cursor: pointer;
  transition: all 120ms ease;
}
#module-gps.nv-app .gps-drawer-close-btn:hover {
  background: var(--bg-2) !important;
  color: var(--text-1) !important;
}
#module-gps.nv-app .gps-drawer-body { color: var(--text-2) !important; }
#module-gps.nv-app .gps-drawer-body hr {
  border-color: var(--border-subtle) !important;
  margin: 14px 0 !important;
}
#module-gps.nv-app .input-form {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-soft) !important;
  color: var(--text-1) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font: 500 13px/1 var(--font-sans) !important;
  transition: border-color 120ms ease;
}
#module-gps.nv-app .input-form:focus {
  outline: 0 !important;
  border-color: oklch(0.74 0.16 152 / 0.55) !important;
}

/* ==========================================================================
   GPS — Drawer da Missão · redesign "Método nyvvo" (estilo Ciclo/Diário)
   ========================================================================== */
/* Design: superfícies elevadas (fundo + sombra suave) e bordas fio-de-cabelo
   (branco ~6%), NUNCA linha cinza dura. Separação vem da luz, não do traço. */
#module-gps.nv-app .gps-drawer {
  width: 400px;
  background: var(--bg-1);
  border-left: 1px solid oklch(1 0 0 / 0.06);
  box-shadow: -20px 0 60px oklch(0 0 0 / 0.5);
}
#module-gps.nv-app .gps-drawer-header {
  background: transparent;
  border-bottom: 1px solid oklch(1 0 0 / 0.06);
  padding: 16px 20px;
}
/* Padding lateral do body = do header (20px), pra cards e botão Salvar
   alinharem exatamente com o título "Configurações da Missão". */
#module-gps.nv-app .gps-drawer-body { padding: 18px 20px 26px; }

#module-gps.nv-app .gps-cfg-modern {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Card de seção — superfície levemente elevada, fio-de-cabelo quase invisível.
   !important só pra vencer a regra global [class*="-card"] que forçava a borda. */
#module-gps.nv-app .gps-cfg-card {
  padding: 16px 16px 15px;
  border-radius: var(--r-lg);
  background: var(--bg-2);
  border: 1px solid oklch(1 0 0 / 0.055) !important;
  box-shadow: 0 1px 0 0 oklch(1 0 0 / 0.04) inset, 0 2px 10px oklch(0 0 0 / 0.22);
}

/* Rótulo estilo eyebrow */
#module-gps.nv-app .gps-cfg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 11px;
}
#module-gps.nv-app .gps-cfg-eyebrow svg { width: 13px; height: 13px; opacity: 0.85; }

#module-gps.nv-app .gps-cfg-help {
  font: 400 12px/1.45 var(--font-sans);
  color: var(--text-4);
  margin-top: 7px;
}
#module-gps.nv-app .gps-cfg-help--lead { margin: -6px 4px 0; }
#module-gps.nv-app .gps-cfg-err {
  font: 500 12px/1.4 var(--font-sans);
  color: oklch(0.72 0.17 27);
  margin-top: 6px;
}

/* Divisor fino dentro do card de parâmetros */
#module-gps.nv-app .gps-cfg-divider {
  height: 1px;
  background: oklch(1 0 0 / 0.06);
  margin: 15px 0;
}

/* Hero do MODO — painel limpo e neutro (sem borda de acento nem glow). */
#module-gps.nv-app .gps-mode-card {
  padding: 17px;
  border-radius: var(--r-lg);
  background: var(--bg-2);
  border: 1px solid oklch(1 0 0 / 0.06) !important;
  box-shadow: 0 2px 10px oklch(0 0 0 / 0.22);
}
/* IMPORTANTE: a regra global [class*="-card"] força bg+borda+radius em CADA
   sub-elemento cujo class contém "-card" (head/name/desc/eyebrow). Isso é o
   que criava as "linhas de arame" em volta do ícone e dos textos. Neutraliza
   (2 IDs vencem a regra global). */
#module-gps.nv-app .gps-mode-card-head,
#module-gps.nv-app .gps-mode-card-name,
#module-gps.nv-app .gps-mode-card-desc,
#module-gps.nv-app .gps-mode-card-eyebrow {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
#module-gps.nv-app .gps-mode-card-eyebrow {
  display: block;
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
}
#module-gps.nv-app .gps-mode-card-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 15px;
}
/* Ícone nítido sobre o fundo — sem tile, sem borda (linha de arame). */
#module-gps.nv-app .gps-mode-card-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: transparent !important;
  border: 0 !important;
}
#module-gps.nv-app .gps-mode-card-icon svg,
#module-gps.nv-app .gps-mode-card-icon [data-lucide] {
  width: 30px !important;
  height: 30px !important;
}
#module-gps.nv-app .gps-mode-card-name {
  font: 600 18px/1.2 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--text-1);
}
#module-gps.nv-app .gps-mode-card-desc {
  font: 400 13px/1.45 var(--font-sans);
  color: var(--text-2);
  margin-top: 3px;
}
/* "Escolher modo": preenchimento sutil em vez de contorno (sem linha de arame). */
#module-gps.nv-app .gps-mode-card-btn {
  width: 100%;
  justify-content: center;
  background: oklch(1 0 0 / 0.06) !important;
  border-color: transparent !important;
  color: var(--text-1) !important;
}
#module-gps.nv-app .gps-mode-card-btn:hover {
  background: oklch(1 0 0 / 0.1) !important;
  border-color: transparent !important;
}

/* Data da prova: input + chip de prazo lado a lado. O input tem EXATAMENTE a
   largura de uma coluna do grid abaixo (Máximo de tarefas) — calc(50% - 8px),
   metade do card menos metade do gap de 16px — formando uma coluna limpa. */
#module-gps.nv-app .gps-cfg-date-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
#module-gps.nv-app .gps-cfg-date-row .input-form {
  width: auto !important;
  flex: 0 0 calc(50% - 8px);
}
#module-gps.nv-app #gps-config-days-remaining { flex-shrink: 0; }
/* .nv-chip (inline-flex) vence o .hidden do Tailwind — força esconder vazio. */
#module-gps.nv-app #gps-config-days-remaining.hidden { display: none !important; }

/* Tamanho + Meta lado a lado */
#module-gps.nv-app .gps-cfg-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
/* Ambos os labels reservam 2 linhas de altura — assim o input de "Máximo de
   tarefas" (1 linha) e o de "Meta de performance (%)" (2 linhas) começam na
   MESMA altura e ficam alinhados. */
#module-gps.nv-app .gps-cfg-two > div > .gps-cfg-eyebrow {
  display: block;
  min-height: 2.6em;
  line-height: 1.3;
  margin-bottom: 8px;
}
#module-gps.nv-app .gps-cfg-two input[type="number"].input-form {
  width: 100% !important;
  max-width: none !important;
}

/* Lista de disciplinas — inset (mais escura que o card), fio-de-cabelo. */
#module-gps.nv-app #gps-active-cycle-disciplines-list {
  max-height: 200px;
  overflow-y: auto;
  margin-top: 10px;
  background: var(--bg-0) !important;
  border: 1px solid oklch(1 0 0 / 0.05) !important;
  border-radius: var(--r-md);
  padding: 6px;
}

/* Salvar */
#module-gps.nv-app .gps-cfg-save {
  width: 100%;
  justify-content: center;
  margin-top: 2px;
}
#module-gps.nv-app .gps-cfg-feedback {
  font: 500 12px/1.4 var(--font-sans);
  color: var(--accent-strong);
  text-align: center;
  margin-top: 2px;
}

/* ==========================================================================
   Seletor de Modo ("Como a Missão deve trabalhar?") — painel premium
   .modal-content-premium não tinha CSS → o painel ficava sem superfície.
   Aqui: superfície elevada + sombra forte + fio-de-cabelo (sem linha dura).
   ========================================================================== */
#module-gps.nv-app #gps-phase-modal-content.modal-content-premium {
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-1) !important;
  border: 1px solid oklch(1 0 0 / 0.08) !important;
  border-radius: var(--r-xl);
  box-shadow: 0 1px 0 0 oklch(1 0 0 / 0.06) inset, 0 32px 72px oklch(0 0 0 / 0.6) !important;
}
#gps-phase-modal-content .modal-header {
  padding: 20px 22px 16px;
  border-bottom: 1px solid oklch(1 0 0 / 0.05);
}
#gps-phase-modal-content .modal-body { padding: 18px 22px; overflow-y: auto; }
#gps-phase-modal-content .modal-footer {
  padding: 16px 22px;
  border-top: 1px solid oklch(1 0 0 / 0.05);
  align-items: center;
  justify-content: space-between;
}
#gps-phase-modal-content .modal-close-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--bg-2);
  border: 1px solid oklch(1 0 0 / 0.06);
  color: var(--text-2);
  cursor: pointer;
  transition: all 120ms ease;
}
#gps-phase-modal-content .modal-close-btn:hover {
  background: var(--bg-3);
  color: var(--text-1);
}

/* ==========================================================================
   Seletor de Modo — cards repaginados (cor semântica por modo + estado premium)
   Cada modo tem um --mode-accent; o card usa isso no ícone, barra de acento,
   hover e estado selecionado. 2 IDs + !important pra vencer [class*="-card"].
   ========================================================================== */
#module-gps.nv-app #gps-phase-modal-content #gps-phase-cards-container { gap: 13px; }

#module-gps.nv-app #gps-phase-modal-content .phase-card {
  --mode-accent: var(--accent);
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 15px 15px 17px;
  background: var(--bg-2) !important;
  border: 1px solid oklch(1 0 0 / 0.07) !important;
  border-radius: var(--r-lg);
  box-shadow: 0 2px 8px oklch(0 0 0 / 0.2);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
  cursor: pointer;
  overflow: hidden;
}
/* Barra de acento à esquerda, na cor do modo (aparece no hover/selecionado). */
#module-gps.nv-app #gps-phase-modal-content .phase-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--mode-accent);
  opacity: 0;
  transition: opacity 160ms ease;
}
#module-gps.nv-app #gps-phase-modal-content .phase-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklch, var(--mode-accent) 55%, transparent) !important;
  box-shadow: 0 10px 24px oklch(0 0 0 / 0.3);
}
#module-gps.nv-app #gps-phase-modal-content .phase-card:hover::before { opacity: 0.55; }
#module-gps.nv-app #gps-phase-modal-content .phase-card.selected {
  border-color: var(--mode-accent) !important;
  background: color-mix(in oklch, var(--mode-accent) 10%, var(--bg-2)) !important;
  box-shadow: 0 0 0 1px var(--mode-accent), 0 8px 24px color-mix(in oklch, var(--mode-accent) 20%, transparent);
}
#module-gps.nv-app #gps-phase-modal-content .phase-card.selected::before { opacity: 1; }

/* Cor semântica de cada modo. */
#module-gps.nv-app #gps-phase-modal-content .phase-card[data-phase="auto"]       { --mode-accent: oklch(0.74 0.16 152); }
#module-gps.nv-app #gps-phase-modal-content .phase-card[data-phase="cobertura"]   { --mode-accent: oklch(0.77 0.15 156); }
#module-gps.nv-app #gps-phase-modal-content .phase-card[data-phase="equilibrio"]  { --mode-accent: oklch(0.76 0.13 178); }
#module-gps.nv-app #gps-phase-modal-content .phase-card[data-phase="reta_final"]  { --mode-accent: oklch(0.74 0.16 58); }
#module-gps.nv-app #gps-phase-modal-content .phase-card[data-phase="manutencao"]  { --mode-accent: oklch(0.75 0.09 200); }
#module-gps.nv-app #gps-phase-modal-content .phase-card[data-phase="livre"]       { --mode-accent: oklch(0.72 0.12 245); }

/* Tile do ícone: neutro e limpo (sem fundo tingido nem borda); só o ÍCONE
   carrega a cor do modo. */
#module-gps.nv-app #gps-phase-modal-content .phase-card-icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: oklch(1 0 0 / 0.05) !important;
  border: 0 !important;
  color: var(--mode-accent) !important;
}
#module-gps.nv-app #gps-phase-modal-content .phase-card-icon svg { width: 21px; height: 21px; }

/* Texto. (Neutraliza a borda/fundo que a regra global [class*="-card"] força
   em .phase-card-info — senão vira um retângulo em volta do texto.) */
#module-gps.nv-app #gps-phase-modal-content .phase-card-info {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent !important;
  border: 0 !important;
}
#module-gps.nv-app #gps-phase-modal-content .phase-card-info h3 {
  font: 600 15px/1.25 var(--font-display);
  color: var(--text-1);
  letter-spacing: -0.01em;
}
#module-gps.nv-app #gps-phase-modal-content .phase-card-info p { color: var(--text-3); line-height: 1.45; }

/* Check à direita: círculo vazio que vira preenchido (cor do modo) ao selecionar. */
#module-gps.nv-app #gps-phase-modal-content .phase-card-status {
  flex: 0 0 auto;
  align-self: center;
  width: 22px; height: 22px;
  border-radius: 999px !important;
  background: transparent !important;
  border: 1.5px solid oklch(1 0 0 / 0.16) !important;
  display: grid;
  place-items: center;
  transition: background 150ms ease, border-color 150ms ease;
}
#module-gps.nv-app #gps-phase-modal-content .phase-card.selected .phase-card-status {
  background: var(--mode-accent) !important;
  border-color: var(--mode-accent) !important;
}
#module-gps.nv-app #gps-phase-modal-content .phase-card-status svg {
  width: 13px; height: 13px;
  color: oklch(0.16 0.03 152);
  stroke-width: 3.2;
}

/* Focus chip: o que o modo prioriza (peso / pontos fracos / manter…) — na cor
   do modo. Reforça visualmente que os modos priorizam DIFERENTE de verdade. */
#module-gps.nv-app #gps-phase-modal-content .phase-card-focus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  padding: 3px 9px 3px 8px;
  border-radius: 999px;
  font: 600 10.5px/1.2 var(--font-sans);
  letter-spacing: 0.01em;
  color: var(--mode-accent);
  background: color-mix(in oklch, var(--mode-accent) 13%, transparent);
  border: 1px solid color-mix(in oklch, var(--mode-accent) 28%, transparent);
}
#module-gps.nv-app #gps-phase-modal-content .phase-card-focus::before {
  content: "";
  flex: 0 0 auto;
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--mode-accent);
}

/* GPS — Modal Registrar Revisão (gps-revision-modal-*) */
#module-gps.nv-app .gps-revision-modal,
#module-gps.nv-app .gps-revision-modal *,
.gps-revision-modal {
  font-family: var(--font-sans) !important;
}
#gps-revision-modal-backdrop {
  background: oklch(0 0 0 / 0.6) !important;
  backdrop-filter: blur(4px);
}
.gps-revision-modal {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: 0 20px 60px -10px oklch(0 0 0 / 0.5) !important;
  width: 100%;
  max-width: 420px;
}
.gps-revision-modal-header {
  padding: 18px 22px !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.gps-revision-modal-header h4 {
  font: 600 15px/1.3 var(--font-display) !important;
  color: var(--text-1) !important;
  margin: 0 !important;
}
.gps-revision-modal-body { padding: 18px 22px !important; }
.gps-revision-modal-footer {
  padding: 14px 22px !important;
  border-top: 1px solid var(--border-subtle) !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}
.gps-rev-modal-btn-cancel {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 14px !important;
  font: 500 12px/1 var(--font-sans) !important;
  border-radius: 8px !important;
  background: var(--bg-2) !important;
  color: var(--text-2) !important;
  border: 1px solid var(--border-soft) !important;
  cursor: pointer;
  transition: all 120ms ease;
}
.gps-rev-modal-btn-cancel:hover {
  background: var(--bg-3) !important;
  color: var(--text-1) !important;
}
.gps-rev-modal-btn-save {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 14px !important;
  font: 500 12px/1 var(--font-sans) !important;
  border-radius: 8px !important;
  background: var(--accent) !important;
  color: var(--accent-fg, oklch(0.16 0.008 250)) !important;
  border: 1px solid oklch(0.74 0.16 152 / 0.4) !important;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}
.gps-rev-modal-btn-save:hover {
  background: var(--accent-strong, var(--accent)) !important;
  transform: translateY(-1px);
}

/* Validation messages — usado em vários places do GPS */
#module-gps.nv-app .validation-message {
  color: oklch(0.78 0.18 25) !important;
  font: 400 11px/1.3 var(--font-sans) !important;
}

/* GPS — modais genéricos (Nova Disciplina, Add Aula, Link, Edit Task,
   Log Study, Add Subtask, Template Manager, Delete Discipline, Import).
   Aplicado a qualquer descendente de #module-gps com id que termina
   em -modal-backdrop. */
#module-gps.nv-app [id$="-modal-backdrop"] {
  background: oklch(0 0 0 / 0.6) !important;
  backdrop-filter: blur(4px);
}
#module-gps.nv-app [id$="-modal-backdrop"] .widget-card,
#module-gps.nv-app [id$="-modal-backdrop"] > .widget-card,
#module-gps.nv-app [id$="-modal-backdrop"] > div {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: 0 20px 60px -10px oklch(0 0 0 / 0.5) !important;
  margin: 0 !important;
}

/* Headers/footers dentro de modais — alinha padding e cor */
#module-gps.nv-app [id$="-modal-backdrop"] .widget-header,
#module-gps.nv-app [id$="-modal-backdrop"] header.widget-header {
  background: transparent !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: 16px 22px !important;
}
#module-gps.nv-app [id$="-modal-backdrop"] .widget-body {
  padding: 20px 22px !important;
  background: transparent !important;
}
#module-gps.nv-app [id$="-modal-backdrop"] .widget-footer,
#module-gps.nv-app [id$="-modal-backdrop"] footer.widget-footer {
  background: var(--bg-2) !important;
  border-top: 1px solid var(--border-subtle) !important;
  padding: 14px 22px !important;
}

/* Close buttons (lucide x) dentro de modais */
#module-gps.nv-app [id$="-modal-backdrop"] [id$="-modal-close-btn"],
#module-gps.nv-app [id$="-modal-backdrop"] [id$="-modal-close"] {
  background: transparent !important;
  border: 0 !important;
  color: var(--text-3) !important;
  padding: 6px !important;
  border-radius: 6px;
  cursor: pointer;
  transition: all 120ms ease;
}
#module-gps.nv-app [id$="-modal-backdrop"] [id$="-modal-close-btn"]:hover,
#module-gps.nv-app [id$="-modal-backdrop"] [id$="-modal-close"]:hover {
  background: var(--bg-2) !important;
  color: var(--text-1) !important;
}

/* Inputs dentro de modais */
#module-gps.nv-app [id$="-modal-backdrop"] input.input-form,
#module-gps.nv-app [id$="-modal-backdrop"] textarea.input-form,
#module-gps.nv-app [id$="-modal-backdrop"] select {
  width: 100% !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--border-soft) !important;
  color: var(--text-1) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  font: 500 13px/1.3 var(--font-sans) !important;
  transition: border-color 120ms ease;
}
#module-gps.nv-app [id$="-modal-backdrop"] input.input-form:focus,
#module-gps.nv-app [id$="-modal-backdrop"] textarea.input-form:focus,
#module-gps.nv-app [id$="-modal-backdrop"] select:focus {
  outline: 0 !important;
  border-color: oklch(0.74 0.16 152 / 0.55) !important;
}

/* Labels dentro de modais */
#module-gps.nv-app [id$="-modal-backdrop"] label {
  color: var(--text-2) !important;
  font: 500 12px/1.3 var(--font-sans) !important;
}

/* Lista do Link modal — items como cards compactos */
#module-gps.nv-app #gps-link-modal-list {
  list-style: none !important;
  padding: 0 !important;
}
#module-gps.nv-app #gps-link-modal-list > li {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Template manager — sections internas */
#module-gps.nv-app .tpl-modal-title {
  font: 600 16px/1.3 var(--font-display) !important;
  color: var(--text-1) !important;
  letter-spacing: -0.015em;
}
#module-gps.nv-app .tpl-section {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--r-md) !important;
  padding: 14px !important;
}

/* Importar (gps-import-modal) — title e zona de drop */
#module-gps.nv-app .gps-import-modal-title {
  font: 600 16px/1.3 var(--font-display) !important;
  color: var(--text-1) !important;
  letter-spacing: -0.015em;
}

/* Toolbar icon button (config drawer trigger ⚙) */
#module-gps.nv-app .gps-toolbar-icon-btn {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-soft) !important;
  color: var(--text-2) !important;
  border-radius: 6px !important;
  cursor: pointer;
  transition: all 120ms ease;
}
#module-gps.nv-app .gps-toolbar-icon-btn:hover {
  background: var(--bg-3) !important;
  color: var(--accent) !important;
  border-color: oklch(0.74 0.16 152 / 0.35) !important;
}

/* ============================================================================
   CARDS REFIT — overrides para o módulo Revisão (Flashcards).
   Quase todo o HTML é renderizado dinamicamente por cards_main.js.
   Selector base: #cards-module-root.nv-app — aplica em todo conteúdo
   injetado, sem precisar tocar em template ou JS.
   ============================================================================ */

/* Container raiz */
#cards-module-root.nv-app {
  padding: 0 !important;
}
#cards-module-root.nv-app .cards-module {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* Header do módulo (Flashcards título + botões) */
#cards-module-root.nv-app .cards-module-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  padding: 0 !important;
  margin-bottom: 18px !important;
  background: transparent !important;
  border: 0 !important;
}
#cards-module-root.nv-app .cards-module-title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
#cards-module-root.nv-app .cards-module-icon {
  font-size: 24px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: oklch(from var(--accent) l c h / 0.12);
  border: 1px solid oklch(from var(--accent) l c h / 0.3);
  border-radius: 10px;
}
#cards-module-root.nv-app .cards-module-title h2 {
  font: 600 26px/1.15 var(--font-display) !important;
  letter-spacing: -0.025em;
  color: var(--text-1) !important;
  margin: 0 !important;
}
#cards-module-root.nv-app .cards-module-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

/* Botões do módulo cards (cards-btn / cards-btn--primary / --lg) */
#cards-module-root.nv-app .cards-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  font: 500 12px/1 var(--font-sans) !important;
  border-radius: 8px !important;
  background: var(--bg-2) !important;
  color: var(--text-2) !important;
  border: 1px solid var(--border-soft) !important;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
  text-transform: none !important;
  letter-spacing: 0;
  min-height: auto !important;
  height: auto !important;
}
#cards-module-root.nv-app .cards-btn:hover {
  background: var(--bg-3) !important;
  color: var(--text-1) !important;
  border-color: oklch(0.74 0.16 152 / 0.35) !important;
}
#cards-module-root.nv-app .cards-btn--primary {
  background: var(--accent) !important;
  color: var(--accent-fg, oklch(0.16 0.008 250)) !important;
  border-color: oklch(0.74 0.16 152 / 0.4) !important;
}
#cards-module-root.nv-app .cards-btn--primary:hover {
  background: var(--accent-strong, var(--accent)) !important;
  transform: translateY(-1px);
}
#cards-module-root.nv-app .cards-btn--lg {
  padding: 10px 16px !important;
  font-size: 13px !important;
}

/* Module sections (heatmap, daily chart, retention, forecast, decks) */
#cards-module-root.nv-app .cards-module-section {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--r-lg) !important;
  padding: 20px !important;
  box-shadow: var(--shadow-sm) !important;
}
#cards-module-root.nv-app .cards-module-section-title {
  font: 600 14px/1.3 var(--font-display) !important;
  letter-spacing: -0.01em;
  color: var(--text-1) !important;
  margin: 0 0 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
#cards-module-root.nv-app .cards-module-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 16px !important;
}
@media (max-width: 900px) {
  #cards-module-root.nv-app .cards-module-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Loading / empty states */
#cards-module-root.nv-app .cards-loading,
#cards-module-root.nv-app .cards-empty {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--r-lg) !important;
  padding: 40px 20px !important;
  text-align: center !important;
  color: var(--text-2) !important;
}
#cards-module-root.nv-app .cards-empty-icon {
  font-size: 36px;
  margin-bottom: 8px;
}
#cards-module-root.nv-app .cards-empty h3 {
  font: 600 16px/1.3 var(--font-display) !important;
  color: var(--text-1) !important;
  margin: 0 0 6px !important;
}
#cards-module-root.nv-app .cards-empty p {
  font: 400 13px/1.5 var(--font-sans) !important;
  color: var(--text-3) !important;
  margin: 0 !important;
}

/* Search row dentro do módulo */
#cards-module-root.nv-app .cards-module-search-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 12px !important;
}
#cards-module-root.nv-app .cards-module-search-row .cards-module-section-title {
  margin: 0 !important;
}
#cards-module-root.nv-app .cards-filter-search,
#cards-module-root.nv-app .cards-module-search {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-soft) !important;
  color: var(--text-1) !important;
  border-radius: 8px !important;
  padding: 7px 12px !important;
  font: 500 12px/1 var(--font-sans) !important;
  min-width: 240px !important;
  transition: border-color 120ms ease;
}
#cards-module-root.nv-app .cards-filter-search:focus,
#cards-module-root.nv-app .cards-module-search:focus {
  outline: 0 !important;
  border-color: oklch(0.74 0.16 152 / 0.55) !important;
}

/* CARDS — stats grid (Total, Due hoje, Novas, Aprendendo, Revisão, Suspensas) */
#cards-module-root.nv-app .cards-module-stats {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
  background: transparent !important;
  border: 0 !important;
}
@media (max-width: 1100px) {
  #cards-module-root.nv-app .cards-module-stats {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  }
}
#cards-module-root.nv-app .cards-stat-card {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  box-shadow: 0 1px 3px oklch(0% 0 0 / 0.04) !important;
  min-height: 96px;
  justify-content: space-between !important;
}
#cards-module-root.nv-app .cards-stat-card:hover {
  border-color: oklch(0.74 0.16 152 / 0.3) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px oklch(0% 0 0 / 0.06) !important;
}
#cards-module-root.nv-app .cards-stat-card-value {
  font: 700 32px/1 var(--font-display) !important;
  letter-spacing: -0.03em;
  color: var(--text-1) !important;
  font-feature-settings: "tnum";
}
#cards-module-root.nv-app .cards-stat-card-label {
  font: 600 10px/1.2 var(--font-mono) !important;
  color: var(--text-3) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Variantes especiais — Due hoje em accent, sem borda extra-grande */
#cards-module-root.nv-app .cards-stat-card--total .cards-stat-card-value {
  color: var(--text-1) !important;
}
#cards-module-root.nv-app .cards-stat-card--due .cards-stat-card-value {
  color: var(--text-1) !important;
}
#cards-module-root.nv-app .cards-stat-card--due.is-active {
  border-color: oklch(from var(--accent) l c h / 0.4) !important;
  background: oklch(from var(--accent) l c h / 0.05) !important;
}
#cards-module-root.nv-app .cards-stat-card--due.is-active .cards-stat-card-value {
  color: var(--accent-strong, var(--accent)) !important;
}
#cards-module-root.nv-app .cards-stat-card--due.is-active .cards-stat-card-label {
  color: var(--accent-strong, var(--accent)) !important;
}
#cards-module-root.nv-app .cards-stat-card--muted {
  opacity: 0.55;
}
#cards-module-root.nv-app .cards-stat-card--muted .cards-stat-card-value {
  color: var(--text-3) !important;
}

/* Heatmap (12 meses) — GitHub-style: 53 colunas × 7 linhas, com labels
   de mês no topo e dias da semana à esquerda. Cells ocupam largura total.
   Tokens --cards-heat-* permitem override por tema. */
#cards-module-root.nv-app .cards-heatmap-wrap {
  --cards-heat-0: #2a2f37;
  --cards-heat-1: #1e3a5f;
  --cards-heat-2: #1d4ed8;
  --cards-heat-3: #3b82f6;
  --cards-heat-4: #60a5fa;
  --cards-heat-cell-gap: 3px;

  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 12px 4px !important;
  overflow-x: auto;
}
#cards-module-root.nv-app .cards-heatmap {
  display: flex !important;
  gap: 6px !important;
  width: 100%;
  min-width: 0;
}
#cards-module-root.nv-app .cards-heatmap-side {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex-shrink: 0;
}
#cards-module-root.nv-app .cards-heatmap-months-spacer {
  height: 14px;
}
#cards-module-root.nv-app .cards-heatmap-daycol {
  display: grid !important;
  grid-template-rows: repeat(7, 1fr) !important;
  gap: var(--cards-heat-cell-gap) !important;
  font: 500 10px/1 var(--font-sans) !important;
  color: var(--text-3) !important;
  width: 24px;
  flex: 1;
  align-items: center;
}
#cards-module-root.nv-app .cards-heatmap-daycol span {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 4px;
  height: 100%;
}
#cards-module-root.nv-app .cards-heatmap-main {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex: 1;
  min-width: 0;
}
#cards-module-root.nv-app .cards-heatmap-months {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 1fr !important;
  gap: var(--cards-heat-cell-gap) !important;
  height: 14px;
  font: 600 10px/1 var(--font-sans) !important;
  color: var(--text-3) !important;
}
#cards-module-root.nv-app .cards-heatmap-months span {
  white-space: nowrap;
  overflow: visible;
}
#cards-module-root.nv-app .cards-heatmap-grid {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 1fr !important;
  gap: var(--cards-heat-cell-gap) !important;
  flex: 1;
  min-width: 0;
}
#cards-module-root.nv-app .cards-heatmap-week {
  display: grid !important;
  grid-template-rows: repeat(7, 1fr) !important;
  gap: var(--cards-heat-cell-gap) !important;
  min-width: 0;
}
#cards-module-root.nv-app .cards-heatmap-cell {
  width: 100% !important;
  aspect-ratio: 1 !important;
  min-width: 8px !important;
  height: auto !important;
  border-radius: 2px !important;
  display: block !important;
  background: var(--cards-heat-0);
  transition: transform 100ms ease;
}
#cards-module-root.nv-app .cards-heatmap-cell--empty {
  background: transparent !important;
}
#cards-module-root.nv-app .cards-heatmap-cell:hover {
  transform: scale(1.5);
  z-index: 2;
  position: relative;
  outline: 1px solid var(--accent);
}
#cards-module-root.nv-app .cards-heatmap-legend {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font: 500 11px/1 var(--font-sans) !important;
  color: var(--text-3) !important;
  justify-content: flex-end !important;
  width: 100%;
}
#cards-module-root.nv-app .cards-heatmap-legend .cards-heatmap-cell {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  aspect-ratio: 1;
}

/* Daily chart bars (revisões últimos 30 dias / próximos 30 dias) */
#cards-module-root.nv-app .cards-bar-chart,
#cards-module-root.nv-app .cards-forecast {
  display: flex !important;
  align-items: flex-end !important;
  gap: 4px !important;
  height: 140px !important;
  padding: 12px 0 24px !important;
  position: relative !important;
  border-bottom: 1px solid var(--border-subtle);
}
#cards-module-root.nv-app .cards-bar,
#cards-module-root.nv-app .cards-forecast > * {
  flex: 1 !important;
  min-width: 0 !important;
  border-radius: 3px 3px 0 0 !important;
  transition: opacity 120ms ease, transform 120ms ease;
}
#cards-module-root.nv-app .cards-bar:hover,
#cards-module-root.nv-app .cards-forecast > *:hover {
  opacity: 0.85;
}
#cards-module-root.nv-app .cards-forecast-summary,
#cards-module-root.nv-app .cards-bar-chart-legend {
  font: 400 12px/1.5 var(--font-sans) !important;
  color: var(--text-3) !important;
  margin-top: 12px !important;
  text-align: center;
}
#cards-module-root.nv-app .cards-bar-chart-legend {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  justify-content: center !important;
}
#cards-module-root.nv-app .cards-bar-chart-axis {
  display: flex !important;
  justify-content: space-between !important;
  font: 500 10px/1 var(--font-mono) !important;
  color: var(--text-3) !important;
  margin-top: 6px;
  padding: 0 4px;
}

/* Retention donut + detalhes — alinhamento e legibilidade do "100%" */
#cards-module-root.nv-app .cards-retention {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
  padding: 12px 0 !important;
}
#cards-module-root.nv-app .cards-retention-donut,
#cards-module-root.nv-app .cards-retention svg {
  flex-shrink: 0 !important;
  width: 140px !important;
  height: 140px !important;
}
#cards-module-root.nv-app .cards-retention-donut-label,
#cards-module-root.nv-app .cards-retention svg text.cards-retention-pct {
  fill: var(--text-1) !important;
  font: 700 18px/1 var(--font-display) !important;
  letter-spacing: -0.02em !important;
}
#cards-module-root.nv-app .cards-retention-donut-sub,
#cards-module-root.nv-app .cards-retention svg text.cards-retention-sub {
  fill: var(--text-3) !important;
  font: 500 11px/1 var(--font-mono) !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#cards-module-root.nv-app .cards-retention-detail {
  flex: 1 !important;
  min-width: 200px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
#cards-module-root.nv-app .cards-retention-line {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font: 500 13px/1.4 var(--font-sans) !important;
  color: var(--text-2) !important;
}
#cards-module-root.nv-app .cards-retention-line strong {
  color: var(--text-1) !important;
  font: 600 14px/1 var(--font-mono) !important;
  font-feature-settings: "tnum";
}
#cards-module-root.nv-app .cards-retention-total {
  margin-top: 6px !important;
  font: 400 12px/1.4 var(--font-sans) !important;
  color: var(--text-3) !important;
  border-top: 1px solid var(--border-subtle) !important;
  padding-top: 8px !important;
  text-align: right;
}

/* Section titles dentro do módulo cards — mais hierarquia */
#cards-module-root.nv-app .cards-module-section-title {
  font: 600 15px/1.3 var(--font-display) !important;
  letter-spacing: -0.015em !important;
  color: var(--text-1) !important;
  margin: 0 0 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Section card spacing entre os blocos */
#cards-module-root.nv-app .cards-module > .cards-module-section,
#cards-module-root.nv-app .cards-module > .cards-module-grid,
#cards-module-root.nv-app .cards-module > .cards-module-stats {
  margin-bottom: 16px !important;
}

/* CARDS — discipline collapse + topic cards */
#cards-module-root.nv-app .cards-discipline-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* Toolbar acima da lista: contador de disciplinas + expand/collapse all */
#cards-module-root.nv-app .cards-discipline-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 0 4px 4px !important;
  font: 500 12px/1 var(--font-sans) !important;
  color: var(--text-3) !important;
}
#cards-module-root.nv-app .cards-discipline-toolbar-summary b {
  color: oklch(0.82 0.16 75) !important;
  font-weight: 700;
}
#cards-module-root.nv-app .cards-discipline-toolbar-actions {
  display: inline-flex !important;
  gap: 6px !important;
}
#cards-module-root.nv-app .cards-discipline-toolbar-btn {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-soft) !important;
  color: var(--text-2) !important;
  padding: 5px 10px !important;
  border-radius: 6px !important;
  font: 500 11px/1 var(--font-sans) !important;
  cursor: pointer;
  transition: all 120ms ease;
}
#cards-module-root.nv-app .cards-discipline-toolbar-btn:hover {
  background: var(--bg-3) !important;
  color: var(--text-1) !important;
  border-color: oklch(0.74 0.16 152 / 0.35) !important;
}

/* CTA "Revisar (X)" no header da disciplina — só aparece se due > 0 */
#cards-module-root.nv-app .cards-discipline-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-left: 8px !important;
  padding: 6px 12px !important;
  font: 600 11px/1 var(--font-sans) !important;
  background: var(--accent) !important;
  color: var(--accent-fg, oklch(0.16 0.008 250)) !important;
  border: 1px solid oklch(0.74 0.16 152 / 0.4) !important;
  border-radius: 6px !important;
  cursor: pointer;
  transition: filter 120ms ease, transform 120ms ease;
  flex-shrink: 0;
}
#cards-module-root.nv-app .cards-discipline-cta:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* Borda sutil de urgência na disciplina com due > 0 */
#cards-module-root.nv-app .cards-discipline.has-due {
  border-color: oklch(0.78 0.15 75 / 0.3) !important;
}
#cards-module-root.nv-app .cards-discipline {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--r-md) !important;
  overflow: hidden !important;
  transition: border-color 120ms ease;
}
#cards-module-root.nv-app .cards-discipline:hover {
  border-color: oklch(0.74 0.16 152 / 0.25) !important;
}
#cards-module-root.nv-app .cards-discipline-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 16px !important;
  background: transparent !important;
  border: 0 !important;
  width: 100% !important;
  cursor: pointer;
  text-align: left !important;
  font-family: inherit !important;
  transition: background 120ms ease;
}
#cards-module-root.nv-app .cards-discipline-head:hover {
  background: var(--bg-3) !important;
}
#cards-module-root.nv-app .cards-discipline-chevron {
  font-size: 10px;
  color: var(--text-3);
  transition: transform 160ms ease;
}
#cards-module-root.nv-app .cards-discipline:not(.is-collapsed) .cards-discipline-chevron {
  transform: rotate(90deg);
}
#cards-module-root.nv-app .cards-discipline-name {
  font: 600 13px/1.3 var(--font-sans) !important;
  color: var(--text-1) !important;
  flex: 1 !important;
}
#cards-module-root.nv-app .cards-discipline-stats {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font: 500 11px/1 var(--font-sans) !important;
  color: var(--text-3) !important;
}
#cards-module-root.nv-app .cards-discipline-due {
  background: oklch(0.78 0.15 75 / 0.15) !important;
  color: oklch(0.82 0.16 75) !important;
  border: 1px solid oklch(0.78 0.15 75 / 0.3) !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
}
#cards-module-root.nv-app .cards-discipline-body {
  padding: 4px 12px 14px !important;
  border-top: 1px solid var(--border-subtle) !important;
  /* Override do legacy cards.css que força #ffffff. Aqui herda o bg-2
     do .cards-discipline pra manter coesão com o tema dark. */
  background: transparent !important;
}
#cards-module-root.nv-app .cards-discipline.is-collapsed .cards-discipline-body {
  display: none !important;
}
#cards-module-root.nv-app .cards-topic-grid {
  display: grid !important;
  /* auto-fit colapsa colunas vazias — quando há só 1 tópico ele estica
     pra ocupar a largura disponível ao invés de ficar isolado à esquerda
     com várias tracks fantasmas (problema do auto-fill anterior). */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 10px !important;
  padding-top: 10px !important;
}

/* Topic card individual */
#cards-module-root.nv-app .cards-topic-card {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--r-md) !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  cursor: pointer;
  transition: all 160ms ease;
  outline: none !important;
}
#cards-module-root.nv-app .cards-topic-card:hover,
#cards-module-root.nv-app .cards-topic-card:focus-visible {
  border-color: oklch(0.74 0.16 152 / 0.4) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -8px oklch(0 0 0 / 0.3);
}
#cards-module-root.nv-app .cards-topic-card.has-due {
  border-color: oklch(0.78 0.15 75 / 0.35) !important;
  background: linear-gradient(180deg, oklch(0.78 0.15 75 / 0.04), var(--bg-1)) !important;
}
#cards-module-root.nv-app .cards-topic-card.is-orphan {
  opacity: 0.7;
}
#cards-module-root.nv-app .cards-topic-card-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
#cards-module-root.nv-app .cards-topic-card-title {
  font: 600 13px/1.3 var(--font-sans) !important;
  color: var(--text-1) !important;
  flex: 1 !important;
}
#cards-module-root.nv-app .cards-orphan {
  color: var(--text-3) !important;
  font-style: italic;
  font-size: 11px;
}
#cards-module-root.nv-app .cards-topic-card-due {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 22px !important;
  padding: 2px 6px !important;
  font: 600 11px/1 var(--font-mono) !important;
  background: oklch(0.78 0.15 75) !important;
  color: oklch(0.16 0.008 250) !important;
  border-radius: 999px !important;
  flex-shrink: 0;
}
#cards-module-root.nv-app .cards-topic-card-counts {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  font: 500 10px/1.2 var(--font-mono) !important;
  color: var(--text-3) !important;
}
#cards-module-root.nv-app .cards-topic-card-counts span {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-soft) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
}
#cards-module-root.nv-app .cards-topic-card-suspended {
  opacity: 0.7;
}
#cards-module-root.nv-app .cards-topic-card-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 6px 10px !important;
  font: 500 11px/1 var(--font-sans) !important;
  background: var(--accent) !important;
  color: var(--accent-fg, oklch(0.16 0.008 250)) !important;
  border: 1px solid oklch(0.74 0.16 152 / 0.4) !important;
  border-radius: 6px !important;
  cursor: pointer;
  transition: background 120ms ease;
}
#cards-module-root.nv-app .cards-topic-card-cta:hover {
  background: var(--accent-strong, var(--accent)) !important;
}

/* Settings panel (collapse) */
#cards-module-root.nv-app .cards-settings-panel {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--r-lg) !important;
  padding: 18px !important;
}
#cards-module-root.nv-app .cards-settings-preset {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 12px !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--r-md) !important;
  cursor: pointer;
  transition: all 120ms ease;
  text-align: left !important;
}
#cards-module-root.nv-app .cards-settings-preset:hover {
  border-color: oklch(0.74 0.16 152 / 0.35) !important;
  background: var(--bg-3) !important;
}
#cards-module-root.nv-app .cards-settings-preset-icon {
  font-size: 20px;
}
#cards-module-root.nv-app .cards-settings-preset-label {
  font: 600 13px/1.3 var(--font-sans) !important;
  color: var(--text-1) !important;
}
#cards-module-root.nv-app .cards-settings-preset-desc {
  font: 400 11px/1.4 var(--font-sans) !important;
  color: var(--text-3) !important;
}

/* Discipline override (configurações por disciplina) */
#cards-module-root.nv-app .cards-discipline-override {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--r-md) !important;
  padding: 14px !important;
  margin-bottom: 8px !important;
}
#cards-module-root.nv-app .cards-discipline-override.has-override {
  border-color: oklch(0.74 0.16 152 / 0.35) !important;
}

/* ============================================================================
   CARDS Reviewer + Hub — overlays globais (appended ao body fora do
   #cards-module-root). Estilizados com seletores globais.
   ============================================================================ */

/* Overlay backdrop */
.cards-review-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: oklch(0 0 0 / 0.7);
  backdrop-filter: blur(6px);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px;
  opacity: 0;
  transition: opacity 180ms ease;
  font-family: var(--font-sans);
}
.cards-review-overlay.is-open { opacity: 1; }

.cards-review-shell {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: 0 30px 80px -20px oklch(0 0 0 / 0.6);
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  max-height: calc(100vh - 48px);
}

.cards-review-progress-bar {
  height: 3px;
  background: var(--bg-3);
  width: 100%;
  flex-shrink: 0;
}
.cards-review-progress-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width 240ms ease;
}

.cards-review-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 14px 22px !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}
.cards-review-progress { min-width: 0; }
.cards-review-topic {
  font: 600 13px/1.3 var(--font-sans) !important;
  color: var(--text-2) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cards-review-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.cards-review-state-badge {
  font: 600 10px/1 var(--font-sans) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  background: var(--accent-soft, oklch(0.74 0.16 152 / 0.15)) !important;
  color: var(--accent-strong, var(--accent)) !important;
  border: 1px solid oklch(0.74 0.16 152 / 0.3) !important;
}
.cards-review-counter {
  font: 500 11px/1 var(--font-mono) !important;
  color: var(--text-3) !important;
}
.cards-review-edit,
.cards-review-close {
  background: transparent !important;
  border: 0 !important;
  padding: 4px !important;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-3) !important;
  font-size: 18px;
  line-height: 1;
  transition: all 120ms ease;
}
.cards-review-edit:hover,
.cards-review-close:hover {
  background: var(--bg-2) !important;
  color: var(--text-1) !important;
}

/* Card central (pergunta/resposta) */
.cards-review-card {
  flex: 1;
  padding: 36px 30px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  overflow-y: auto;
  background: transparent !important;
  color: var(--text-1) !important;
}
.cards-review-question,
.cards-review-answer {
  font: 400 18px/1.5 var(--font-display) !important;
  letter-spacing: -0.005em;
  color: var(--text-1) !important;
}
.cards-review-answer {
  border-top: 1px dashed var(--border-subtle);
  padding-top: 18px;
}

/* Footer com botões de grade */
.cards-review-foot {
  padding: 14px 22px !important;
  border-top: 1px solid var(--border-subtle) !important;
  background: var(--bg-2) !important;
}
.cards-review-show-row {
  display: flex !important;
  justify-content: center !important;
}
.cards-review-grade-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
/* O `!important` acima ganha até de `element.hidden = true` via JS (a
   regra `[hidden] { display:none }` do UA stylesheet fica sem efeito) —
   sem isso "Mostrar resposta" e a fileira de notas nunca somem depois de
   revelar a resposta, dando a impressão de revisão travada. */
.cards-review-show-row[hidden] { display: none !important; }
.cards-review-grade-row[hidden] { display: none !important; }

/* 4 botões de grade com cores tonais */
.cards-grade-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 10px 8px !important;
  border-radius: 8px !important;
  background: var(--bg-1) !important;
  border: 1px solid var(--border-soft) !important;
  cursor: pointer;
  transition: all 120ms ease;
  font-family: inherit !important;
}
.cards-grade-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}
.cards-grade-label {
  font: 600 13px/1 var(--font-sans) !important;
  letter-spacing: -0.005em;
}
.cards-grade-int {
  font: 500 11px/1 var(--font-mono) !important;
  color: var(--text-3) !important;
}
.cards-grade-again {
  border-color: oklch(0.66 0.18 25 / 0.4) !important;
  color: oklch(0.78 0.18 25) !important;
}
.cards-grade-again:hover {
  background: oklch(0.66 0.18 25 / 0.08) !important;
}
.cards-grade-hard {
  border-color: oklch(0.78 0.15 75 / 0.4) !important;
  color: oklch(0.82 0.16 75) !important;
}
.cards-grade-hard:hover {
  background: oklch(0.78 0.15 75 / 0.08) !important;
}
.cards-grade-good {
  border-color: oklch(0.74 0.16 152 / 0.4) !important;
  color: var(--accent-strong, var(--accent)) !important;
}
.cards-grade-good:hover {
  background: var(--accent-soft, oklch(0.74 0.16 152 / 0.08)) !important;
}
.cards-grade-easy {
  border-color: oklch(0.72 0.12 240 / 0.4) !important;
  color: oklch(0.78 0.12 240) !important;
}
.cards-grade-easy:hover {
  background: oklch(0.72 0.12 240 / 0.08) !important;
}

/* Keyboard hint pill */
.cards-kbd {
  font: 500 10px/1 var(--font-mono) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  background: var(--bg-3) !important;
  border: 1px solid var(--border-soft) !important;
  color: var(--text-3) !important;
}

/* HUB Global (Mix all topics) */
.cards-hub-overlay {
  position: fixed;
  inset: 0;
  z-index: 8500;
  background: oklch(0 0 0 / 0.7);
  backdrop-filter: blur(6px);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px;
  font-family: var(--font-sans);
}
.cards-hub-shell {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: 0 20px 60px -10px oklch(0 0 0 / 0.5);
  max-width: 480px;
  width: 100%;
  padding: 22px;
}
.cards-hub-cta button {
  width: 100%;
  margin-bottom: 4px;
}
.cards-hub-hint {
  color: var(--text-3) !important;
  font: 400 12px/1.5 var(--font-sans) !important;
}
.cards-hub-or {
  font: 500 11px/1 var(--font-sans) !important;
  color: var(--text-3) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  margin: 14px 0 8px;
}
.cards-hub-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 280px;
  overflow-y: auto;
}
.cards-hub-topic {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 8px !important;
  cursor: pointer;
  font-family: inherit !important;
  text-align: left !important;
  transition: all 120ms ease;
}
.cards-hub-topic:hover {
  border-color: oklch(0.74 0.16 152 / 0.4) !important;
  background: var(--bg-3) !important;
}
.cards-hub-topic-title {
  font: 500 13px/1.3 var(--font-sans) !important;
  color: var(--text-1) !important;
  flex: 1;
}
.cards-hub-topic-badge {
  font: 600 11px/1 var(--font-mono) !important;
  padding: 3px 8px !important;
  background: oklch(0.78 0.15 75 / 0.18) !important;
  color: oklch(0.82 0.16 75) !important;
  border: 1px solid oklch(0.78 0.15 75 / 0.3) !important;
  border-radius: 999px !important;
}

/* ============================================================================
   CARDS Topic Modal — overlay maior, com 4 abas (Estudar/Gerenciar/Criar/
   Importar). Também aplicado para picker e model-editor (variantes).
   ============================================================================ */

.cards-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: oklch(0 0 0 / 0.7);
  backdrop-filter: blur(6px);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px;
  font-family: var(--font-sans);
}
.cards-modal {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: 0 20px 60px -10px oklch(0 0 0 / 0.5);
  width: 100%;
  max-width: 800px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cards-modal-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 16px 22px !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}
.cards-modal-breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font: 500 12px/1.3 var(--font-sans) !important;
  color: var(--text-3) !important;
  flex: 1 !important;
  min-width: 0 !important;
}
.cards-modal-icon { font-size: 14px; }
.cards-modal-disc { color: var(--text-3) !important; }
.cards-modal-sep { color: var(--text-4) !important; }
.cards-modal-topic {
  color: var(--text-1) !important;
  font-weight: 600 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cards-modal-close {
  background: transparent !important;
  border: 0 !important;
  color: var(--text-3) !important;
  font-size: 22px;
  padding: 2px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 120ms ease;
}
.cards-modal-close:hover {
  background: var(--bg-2) !important;
  color: var(--text-1) !important;
}

/* Stats inline no head do modal */
.cards-modal-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding: 12px 22px !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  background: var(--bg-2) !important;
  font: 500 11px/1 var(--font-mono) !important;
  color: var(--text-3) !important;
}

/* Tabs (Estudar / Gerenciar / Criar / Importar) */
.cards-modal-tabs {
  display: flex !important;
  gap: 0 !important;
  padding: 0 22px !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  background: var(--bg-1) !important;
}
.cards-modal-tab {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  padding: 12px 14px !important;
  font: 500 13px/1 var(--font-sans) !important;
  color: var(--text-3) !important;
  cursor: pointer;
  transition: all 120ms ease;
}
.cards-modal-tab:hover {
  color: var(--text-1) !important;
}
.cards-modal-tab.is-active,
.cards-modal-tab[aria-selected="true"] {
  color: var(--accent-strong, var(--accent)) !important;
  border-bottom-color: var(--accent) !important;
}

/* Body com scroll */
.cards-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px !important;
  background: var(--bg-1) !important;
  color: var(--text-2) !important;
}

/* Form rows / labels / hints */
.cards-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.cards-form-label {
  font: 500 12px/1 var(--font-sans) !important;
  color: var(--text-2) !important;
}
.cards-form-hint {
  font: 400 11px/1.4 var(--font-sans) !important;
  color: var(--text-3) !important;
  margin: 0 !important;
}
.cards-modal input[type="text"],
.cards-modal input[type="search"],
.cards-modal textarea,
.cards-modal select {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-soft) !important;
  color: var(--text-1) !important;
  border-radius: 8px !important;
  padding: 9px 12px !important;
  font: 500 13px/1.4 var(--font-sans) !important;
  transition: border-color 120ms ease;
  width: 100%;
}
.cards-modal input[type="text"]:focus,
.cards-modal input[type="search"]:focus,
.cards-modal textarea:focus,
.cards-modal select:focus {
  outline: 0 !important;
  border-color: oklch(0.74 0.16 152 / 0.55) !important;
}

/* Import section */
.cards-import {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cards-import-section {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--r-md) !important;
  padding: 14px 16px !important;
}
.cards-import-title {
  font: 600 13px/1.3 var(--font-display) !important;
  color: var(--text-1) !important;
  margin: 0 0 4px !important;
}
.cards-import-hint {
  font: 400 12px/1.5 var(--font-sans) !important;
  color: var(--text-3) !important;
  margin: 0 0 8px !important;
}
.cards-import-prompt-details summary {
  font: 500 11px/1 var(--font-sans) !important;
  color: var(--text-3) !important;
  cursor: pointer;
  user-select: none;
  margin-top: 4px;
}
.cards-import-prompt-pre,
.cards-import-help-pre {
  background: var(--bg-3) !important;
  color: var(--text-2) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 6px !important;
  padding: 10px !important;
  font: 400 11px/1.5 var(--font-mono) !important;
  white-space: pre-wrap;
  margin: 6px 0 0 !important;
  max-height: 180px;
  overflow-y: auto;
}
.cards-import-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  border: 1.5px dashed var(--border-soft) !important;
  border-radius: var(--r-md) !important;
  background: var(--bg-3) !important;
  cursor: pointer;
  transition: all 120ms ease;
}
.cards-import-drop:hover {
  border-color: oklch(0.74 0.16 152 / 0.5) !important;
  background: var(--accent-soft, oklch(0.74 0.16 152 / 0.04)) !important;
}
.cards-import-drop-icon { font-size: 24px; }
.cards-import-drop-text {
  font: 400 12px/1.4 var(--font-sans) !important;
  color: var(--text-3) !important;
  text-align: center;
}
.cards-import-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.cards-import-preview {
  margin-top: 12px;
  padding: 12px;
  background: var(--bg-1) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--r-md);
}
.cards-import-error {
  color: oklch(0.78 0.18 25) !important;
  font: 500 12px/1.4 var(--font-sans);
}
.cards-import-help {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* Picker (escolher tópico para importar) */
.cards-picker {
  max-width: 520px;
}

/* Model editor (template Anki custom) */
.cards-model-editor-overlay .cards-modal {
  max-width: 720px;
}

/* ============================================================================
   NOTAS REFIT — overrides para o módulo Notas (Notebook).
   Template é minimalista (14 linhas); todo o HTML da vault e do editor
   é injetado por notas_main.js. Selector base: #notas-root.nv-app.
   ============================================================================ */

#notas-root.nv-app { padding: 0 !important; position: relative; }
#notas-root.nv-app .notas-layout {
  display: grid !important;
  grid-template-columns: 280px 1fr !important;
  gap: 14px !important;
  min-height: calc(100vh - 80px) !important;
  transition: grid-template-columns 0.18s ease, gap 0.18s ease;
}
/* Estado colapsado — vault somente OCULTO via display:none, mas o grid
   é REDEFINIDO pra ter só 1 coluna (1fr). O content ocupa tudo via
   grid-column: 1 / -1 pra ignorar a coluna do vault desaparecido. */
#notas-root.nv-app .notas-layout.is-vault-collapsed {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}
#notas-root.nv-app .notas-layout.is-vault-collapsed > .notas-vault {
  display: none !important;
}
#notas-root.nv-app .notas-layout.is-vault-collapsed > .notas-content {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}
@media (max-width: 900px) {
  #notas-root.nv-app .notas-layout {
    grid-template-columns: 1fr !important;
  }
}

/* Vault (sidebar interna esquerda) — dark suavizado.
   Decisão: mantém a estética IDE (nav dark + editor light), mas com tons
   elevados pra resolver a queixa de legibilidade do preto puro original. */
/* (Os tokens slate que ficavam aqui foram removidos — davam ao vault uma
   paleta própria, mais clara que o resto, e era o "cinza" que destoava do
   protótipo. Agora o vault herda os tokens do módulo, definidos no bloco
   PARIDADE COM O PROTÓTIPO no fim deste arquivo.) */
#notas-root.nv-app .notas-vault {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: var(--r-lg) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  color: var(--text-1);
}
#notas-root.nv-app .notas-vault-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}
#notas-root.nv-app .notas-vault-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 6px 10px !important;
  font: 500 12px/1 var(--font-sans) !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--border-soft) !important;
  color: var(--text-2) !important;
  border-radius: 7px !important;
  cursor: pointer;
  transition: all 120ms ease;
}
#notas-root.nv-app .notas-vault-btn:hover {
  background: var(--bg-3) !important;
  color: var(--text-1) !important;
  border-color: oklch(0.74 0.16 152 / 0.35) !important;
}
#notas-root.nv-app .notas-vault-btn--primary {
  background: var(--accent) !important;
  color: var(--accent-fg, oklch(0.16 0.008 250)) !important;
  border-color: oklch(0.74 0.16 152 / 0.4) !important;
}
#notas-root.nv-app .notas-vault-btn--primary:hover {
  background: var(--accent-strong, var(--accent)) !important;
}
#notas-root.nv-app .notas-vault-btn--icon {
  padding: 6px 8px !important;
}
#notas-root.nv-app .notas-vault-btn-glyph {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
#notas-root.nv-app .notas-vault-btn-label {
  font-weight: 500;
}

/* Search da vault */
#notas-root.nv-app .notas-vault-search {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  background: var(--bg-1) !important;
}
#notas-root.nv-app .notas-vault-search-icon {
  color: var(--text-3) !important;
  flex-shrink: 0;
}
#notas-root.nv-app .notas-vault-search-input {
  flex: 1 !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  font: 400 12px/1.3 var(--font-sans) !important;
  color: var(--text-1) !important;
  min-width: 0 !important;
}
#notas-root.nv-app .notas-vault-search-input::placeholder {
  color: var(--text-3) !important;
}
#notas-root.nv-app .notas-vault-search-clear {
  background: transparent !important;
  border: 0 !important;
  color: var(--text-3) !important;
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px !important;
  border-radius: 4px;
}
#notas-root.nv-app .notas-vault-search-clear:hover {
  color: var(--text-1) !important;
}

/* Lista de notas (rolável) */
#notas-root.nv-app .notas-vault-tree {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 6px 8px !important;
}

/* Content area (editor).
   ANTES: este bloco forçava TEMA CLARO fixo (redefinia os tokens de fundo
   e de texto pra branco/preto), o que fazia o editor virar um bloco de luz
   cravado no app escuro — e brigava com o "EDITOR INVERSE" mais abaixo.
   AGORA: o editor herda o tema escuro do app, e quem decide a cor da FOLHA
   é a preferência do usuário (popover "Aa" → bloco APARÊNCIA DA FOLHA no
   fim deste arquivo). Só o papel muda de cor; o palco fica escuro. */
#notas-root.nv-app .notas-content {
  background: var(--bg-0) !important;
  /* Sem contorno: no protótipo o editor é contínuo com o palco. O antigo
     `border` desenhava um retângulo em volta (e o flat.css ainda o pintava
     de #e5e5e5, quase branco). A separação fica por conta da linha do vault. */
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  color: var(--text-1);
}
/* O vault também perde o "card" e vira uma coluna, separada por 1 linha */
#notas-root.nv-app .notas-vault {
  border: 0 !important;
  border-right: 1px solid var(--border-subtle) !important;
  border-radius: 0 !important;
}

/* NOTAS — Folder + Note items in tree */
#notas-root.nv-app .notas-folder {
  display: flex;
  flex-direction: column;
  margin-bottom: 1px;
}
#notas-root.nv-app .notas-folder-header {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 8px !important;
  border-radius: 6px !important;
  cursor: pointer;
  user-select: none;
  font: 500 12px/1.3 var(--font-sans) !important;
  color: var(--text-2) !important;
  transition: background 100ms ease, color 100ms ease;
}
#notas-root.nv-app .notas-folder-header:hover {
  background: var(--bg-2) !important;
  color: var(--text-1) !important;
}
#notas-root.nv-app .notas-folder-header.is-active,
#notas-root.nv-app .notas-folder-header[data-active="true"] {
  background: var(--accent-soft, oklch(0.74 0.16 152 / 0.12)) !important;
  color: var(--accent-strong, var(--accent)) !important;
}
#notas-root.nv-app .notas-folder-chevron {
  color: var(--text-3) !important;
  font-size: 9px;
  width: 10px;
  text-align: center;
  flex-shrink: 0;
}
#notas-root.nv-app .notas-folder-icon {
  font-size: 13px;
  color: var(--text-3) !important;
  flex-shrink: 0;
}
#notas-root.nv-app .notas-folder-name {
  flex: 1 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#notas-root.nv-app .notas-folder-count {
  font: 500 10px/1 var(--font-mono) !important;
  color: var(--text-3) !important;
  background: var(--bg-2) !important;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  flex-shrink: 0;
}
#notas-root.nv-app .notas-folder-menu {
  background: transparent !important;
  border: 0 !important;
  color: var(--text-3) !important;
  cursor: pointer;
  padding: 2px 4px !important;
  border-radius: 4px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 100ms ease, color 100ms ease;
}
#notas-root.nv-app .notas-folder-header:hover .notas-folder-menu {
  opacity: 1;
}
#notas-root.nv-app .notas-folder-menu:hover {
  color: var(--text-1) !important;
  background: var(--bg-3) !important;
}
#notas-root.nv-app .notas-folder-children-tree {
  margin-left: 8px;
  padding-left: 6px;
  border-left: 1px solid var(--border-subtle);
}

/* Note item (folha da tree) */
#notas-root.nv-app .notas-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 8px !important;
  border-radius: 6px !important;
  cursor: pointer;
  font: 400 12px/1.3 var(--font-sans) !important;
  color: var(--text-2) !important;
  transition: background 100ms ease, color 100ms ease;
}
#notas-root.nv-app .notas-item:hover {
  background: var(--bg-2) !important;
  color: var(--text-1) !important;
}
#notas-root.nv-app .notas-item.is-active,
#notas-root.nv-app .notas-item[data-active="true"] {
  background: var(--accent-soft, oklch(0.74 0.16 152 / 0.14)) !important;
  color: var(--accent-strong, var(--accent)) !important;
}
#notas-root.nv-app .notas-item-icon {
  color: var(--text-3) !important;
  flex-shrink: 0;
  font-size: 12px;
}
#notas-root.nv-app .notas-item.is-active .notas-item-icon {
  color: var(--accent) !important;
}
#notas-root.nv-app .notas-item-title {
  flex: 1 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Badge de backlinks count — quantas outras notas linkam pra esta.
   Aparece à direita do título, antes do botão de menu. Visualmente
   discreto até hover. Tooltip explica o número. */
#notas-root.nv-app .notas-item-backlinks {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--bg-3) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-3) !important;
  font: 600 10px/1 var(--font-mono) !important;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  cursor: default;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
#notas-root.nv-app .notas-item:hover .notas-item-backlinks {
  background: oklch(from var(--accent) l c h / 0.15) !important;
  border-color: oklch(from var(--accent) l c h / 0.3) !important;
  color: var(--accent) !important;
}
#notas-root.nv-app .notas-item.is-active .notas-item-backlinks,
#notas-root.nv-app .notas-item[data-active="true"] .notas-item-backlinks {
  background: oklch(from var(--accent) l c h / 0.2) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

#notas-root.nv-app .notas-item-menu {
  background: transparent !important;
  border: 0 !important;
  color: var(--text-3) !important;
  padding: 2px 4px !important;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 100ms ease, color 100ms ease;
  flex-shrink: 0;
}
#notas-root.nv-app .notas-item:hover .notas-item-menu {
  opacity: 1;
}
#notas-root.nv-app .notas-item-menu:hover {
  color: var(--text-1) !important;
  background: var(--bg-3) !important;
}

/* Folders especiais (Fixadas/Lixeira) */
#notas-root.nv-app .notas-folder--pinned .notas-folder-icon {
  color: oklch(0.78 0.15 75) !important;
}
#notas-root.nv-app .notas-folder--trash .notas-folder-icon {
  color: var(--text-3) !important;
}

/* Filtro ativo (badge no topo da tree) */
#notas-root.nv-app .notas-filter-active {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  margin: 8px 8px !important;
  font: 500 11px/1 var(--font-sans) !important;
  background: var(--accent-soft, oklch(0.74 0.16 152 / 0.12)) !important;
  color: var(--accent-strong, var(--accent)) !important;
  border: 1px solid oklch(0.74 0.16 152 / 0.3) !important;
  border-radius: 999px !important;
}

/* NOTAS — Editor shell */
#notas-root.nv-app .notas-editor-shell {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  background: transparent !important;
}

/* Editor head (breadcrumb + actions) */
#notas-root.nv-app .notas-editor-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 12px 18px !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  flex-wrap: wrap !important;
  background: var(--bg-1) !important;
}
#notas-root.nv-app .notas-editor-nav {
  display: flex !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
}
#notas-root.nv-app .notas-editor-icon-btn {
  background: transparent !important;
  border: 0 !important;
  color: var(--text-3) !important;
  padding: 6px !important;
  border-radius: 6px !important;
  cursor: pointer;
  transition: all 120ms ease;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#notas-root.nv-app .notas-editor-icon-btn:hover:not(:disabled) {
  background: var(--bg-2) !important;
  color: var(--text-1) !important;
}
#notas-root.nv-app .notas-editor-icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
#notas-root.nv-app .notas-editor-icon-btn.is-active {
  background: var(--accent-soft, oklch(0.74 0.16 152 / 0.15)) !important;
  color: var(--accent) !important;
}

/* Breadcrumb (folder › title) */
#notas-root.nv-app .notas-editor-breadcrumb {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 1 !important;
  min-width: 0 !important;
  font: 500 12px/1.3 var(--font-sans) !important;
  color: var(--text-3) !important;
}
/* O caminho da pasta (1º span do breadcrumb) não tinha min-width/max-width
   aqui — flex items sem min-width:0 não encolhem abaixo do próprio
   conteúdo por padrão, então pra um caminho longo ("Pasta/Subpasta") ele
   ficava com a largura inteira e sobrava quase nada pro título ao lado
   (que tem min-width:0 e encolhia até virar uma lasquinha de ~90px,
   ilegível). Agora os dois disputam espaço, mas o título tem prioridade. */
#notas-root.nv-app .notas-editor-breadcrumb > span:first-child {
  flex: 2 1 0;
  min-width: 0;
  max-width: 120px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#notas-root.nv-app .notas-editor-sep {
  color: var(--text-4) !important;
  flex-shrink: 0;
}
#notas-root.nv-app .notas-editor-title {
  font: 600 14px/1.3 var(--font-display) !important;
  letter-spacing: -0.005em;
  color: var(--text-1) !important;
  /* flat.css tem uma regra genérica "h1[class*='title'] { -webkit-text-fill-
     color: var(--c-text-on-dark) !important }" pensada pra apagar gradient-
     text de OUTROS h1 do app — mas ela também bate em QUALQUER h1 cuja
     classe contenha "title", incluindo essa aqui. module-notas não está
     mapeado pro tema "reading" em main.js (só module-cadernos está), então
     a exceção que devolveria a cor escura nunca era ativada, e o navegador
     pinta o texto com -webkit-text-fill-color (que tem prioridade sobre
     `color` pra webkit/blink) quase branco — invisível no fundo branco do
     editor. Repetir aqui, com especificidade maior (#notas-root.nv-app),
     restaura a cor certa independente do data-page-theme do body. */
  -webkit-text-fill-color: var(--text-1) !important;
  margin: 0 !important;
  flex: 1 1 0;
  min-width: 90px; /* piso pra nunca virar uma lasquinha ilegível */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: text;
  padding: 2px 4px !important;
  border-radius: 4px;
}
#notas-root.nv-app .notas-editor-title:hover {
  background: var(--bg-2) !important;
}
#notas-root.nv-app .notas-editor-pin-flag {
  color: oklch(0.78 0.15 75) !important;
  flex-shrink: 0;
}

/* Actions row */
#notas-root.nv-app .notas-editor-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0;
}
#notas-root.nv-app .notas-editor-status {
  font: 500 11px/1 var(--font-sans) !important;
  color: var(--text-3) !important;
  padding: 4px 8px !important;
  background: var(--bg-2) !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
#notas-root.nv-app .notas-editor-status[data-status="dirty"] {
  color: oklch(0.78 0.15 75) !important;
  background: oklch(0.78 0.15 75 / 0.1) !important;
}

/* Engine pill */
#notas-root.nv-app .notas-editor-engine {
  display: inline-flex !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 7px !important;
  padding: 2px !important;
  gap: 2px;
}
#notas-root.nv-app .notas-editor-modes {
  display: none !important;
}
#notas-root.nv-app .notas-editor-engine-btn,
#notas-root.nv-app .notas-editor-mode {
  background: transparent !important;
  border: 0 !important;
  padding: 5px 10px !important;
  font: 500 11px/1 var(--font-sans) !important;
  color: var(--text-3) !important;
  border-radius: 5px !important;
  cursor: pointer;
  transition: all 120ms ease;
}
#notas-root.nv-app .notas-editor-engine-btn:hover,
#notas-root.nv-app .notas-editor-mode:hover {
  color: var(--text-1) !important;
}
#notas-root.nv-app .notas-editor-engine-btn.is-active,
#notas-root.nv-app .notas-editor-mode.is-active {
  background: var(--bg-1) !important;
  color: var(--accent-strong, var(--accent)) !important;
  border: 1px solid var(--border-soft) !important;
}

/* Editor body (content area) */
#notas-root.nv-app .notas-editor-body,
#notas-root.nv-app .notas-editor-content {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 24px 36px !important;
  background: var(--bg-1) !important;
  color: var(--text-1) !important;
}
#notas-root.nv-app .notas-editor-content[contenteditable="true"]:focus {
  outline: 0 !important;
}

/* Toolbar (formatting) */
#notas-root.nv-app .notas-editor-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
  padding: 8px 18px !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  background: var(--bg-1) !important;
  position: sticky;
  top: 0;
  z-index: 10;
}
#notas-root.nv-app .notas-tb-btn {
  background: transparent !important;
  border: 0 !important;
  color: var(--text-2) !important;
  padding: 6px 8px !important;
  border-radius: 5px !important;
  cursor: pointer;
  transition: all 120ms ease;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 28px;
}
#notas-root.nv-app .notas-tb-btn:hover {
  background: var(--bg-3) !important;
  color: var(--text-1) !important;
}
#notas-root.nv-app .notas-tb-btn.is-active {
  background: var(--accent-soft, oklch(0.74 0.16 152 / 0.15)) !important;
  color: var(--accent) !important;
}
#notas-root.nv-app .notas-tb-sep {
  width: 1px !important;
  height: 18px !important;
  background: var(--border-subtle) !important;
  margin: 0 4px !important;
}

/* Statusbar (footer) */
#notas-root.nv-app .notas-editor-statusbar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 18px !important;
  border-top: 1px solid var(--border-subtle) !important;
  background: var(--bg-2) !important;
  font: 400 11px/1.3 var(--font-sans) !important;
  color: var(--text-3) !important;
  flex-wrap: wrap !important;
}
#notas-root.nv-app .notas-editor-stat-sep {
  color: var(--text-4) !important;
}
#notas-root.nv-app .notas-editor-stat-spacer { flex: 1; }
#notas-root.nv-app .notas-editor-goal {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer;
  font: inherit !important;
  color: inherit !important;
}
#notas-root.nv-app .notas-editor-goal-bar {
  display: inline-block;
  width: 60px;
  height: 4px;
  background: var(--bg-3);
  border-radius: 2px;
  overflow: hidden;
}
#notas-root.nv-app .notas-editor-goal-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 240ms ease;
}

/* ============================== NOTAS — EDITOR INVERSE ============================== */
/* O .gpsn-editor / .gpsn-preview / .gpsn-toolbar foram pensados para o overlay do
   notebook, que tem tema CLARO. No módulo Notas standalone (dentro de
   #notas-root.nv-app) a página é DARK, então invertemos as cores aqui. */

/* Redefine o token --gpsn-text para que rules tipo
   ".gpsn-editor p, .gpsn-editor li { color: var(--gpsn-text); }"
   peguem o tema dark automaticamente, sem precisar !important em cada selector. */
#notas-root.nv-app {
  --gpsn-text: var(--text-1);
  --gpsn-text-muted: var(--text-2);
  --gpsn-bg: transparent;
}

/* Editor pai — bg transparent ok (cor herda do tema). NÃO aplicamos bg
   transparent em spans internos pra preservar highlights inline. */
#notas-root.nv-app .notas-editor-wysiwyg,
#notas-root.nv-app .gpsn-editor,
#notas-root.nv-app .gpsn-preview {
  color: var(--text-1) !important;
  background: transparent !important;
}
#notas-root.nv-app .notas-editor-wysiwyg,
#notas-root.nv-app .gpsn-editor {
  caret-color: var(--text-1) !important;
}
#notas-root.nv-app .notas-editor-wysiwyg:focus,
#notas-root.nv-app .gpsn-editor:focus,
#notas-root.nv-app .notas-editor-wysiwyg:focus-visible,
#notas-root.nv-app .gpsn-editor:focus-visible {
  outline: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
#notas-root.nv-app .notas-editor-wysiwyg::selection,
#notas-root.nv-app .notas-editor-wysiwyg *::selection,
#notas-root.nv-app .gpsn-editor::selection,
#notas-root.nv-app .gpsn-editor *::selection,
#notas-root.nv-app .gpsn-preview::selection,
#notas-root.nv-app .gpsn-preview *::selection {
  background: #dbeafe !important;
  color: var(--text-1) !important;
}
/* (Removida a neutralização que zerava o fundo dos destaques verdes.
   Ela existia porque o verde claro brigava com o texto branco — mas a
   cura era pior: APAGAVA o marca-texto que o usuário tinha aplicado.
   Agora o destaque aparece e é a TINTA que fica escura em cima dele
   — ver "LEGIBILIDADE DO MARCA-TEXTO" no fim deste arquivo.) */
#notas-root.nv-app .gpsn-editor p:not([style*="color"]),
#notas-root.nv-app .gpsn-editor li:not([style*="color"]),
#notas-root.nv-app .gpsn-editor span:not(.gpsn-callout-title span):not([style*="background"]):not([style*="color"]),
#notas-root.nv-app .gpsn-editor div:not([class*="gpsn-callout"]):not([style*="background"]):not([style*="color"]),
#notas-root.nv-app .gpsn-preview p,
#notas-root.nv-app .gpsn-preview li,
#notas-root.nv-app .gpsn-preview td,
#notas-root.nv-app .gpsn-preview th {
  color: var(--text-1) !important;
}
#notas-root.nv-app .gpsn-editor::placeholder {
  color: var(--text-3) !important;
}
/* ============================== NOTAS — UX de leitura ============================== */
/* Mesmo refit tipográfico do GPS notebook, adaptado pro Notas standalone
   (mantém tema dark do app, mas ganha hierarquia + line-height generoso). */

/* Editor + preview body — tipografia confortável de leitura */
#notas-root.nv-app .notas-editor-content,
#notas-root.nv-app .notas-editor-wysiwyg,
#notas-root.nv-app .notas-editor-textarea,
#notas-root.nv-app .notas-editor-preview,
#notas-root.nv-app .gpsn-preview {
  padding: 32px 64px 80px !important;
  font: 400 16px/1.7 var(--font-display) !important;
  letter-spacing: -0.005em;
}
#notas-root.nv-app .notas-editor-textarea {
  font-family: var(--font-mono) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* Hierarquia tipográfica clara — H1 grande, H2 médio com border-bottom,
   H3/H4 menores, espaçamento vertical proporcional */
#notas-root.nv-app .notas-editor-wysiwyg h1,
#notas-root.nv-app .gpsn-preview h1,
#notas-root.nv-app .notas-editor-preview h1 {
  font: 700 32px/1.25 var(--font-display) !important;
  letter-spacing: -0.025em !important;
  margin: 1.4em 0 0.6em !important;
  color: var(--text-1) !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
#notas-root.nv-app .notas-editor-wysiwyg h1:first-child,
#notas-root.nv-app .gpsn-preview h1:first-child,
#notas-root.nv-app .notas-editor-preview h1:first-child {
  margin-top: 0 !important;
}
#notas-root.nv-app .notas-editor-wysiwyg h2,
#notas-root.nv-app .gpsn-preview h2,
#notas-root.nv-app .notas-editor-preview h2 {
  font: 700 24px/1.3 var(--font-display) !important;
  letter-spacing: -0.02em !important;
  margin: 1.6em 0 0.5em !important;
  padding-bottom: 0.3em !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-1) !important;
}
#notas-root.nv-app .notas-editor-wysiwyg h3,
#notas-root.nv-app .gpsn-preview h3,
#notas-root.nv-app .notas-editor-preview h3 {
  font: 600 19px/1.35 var(--font-display) !important;
  letter-spacing: -0.015em !important;
  margin: 1.5em 0 0.4em !important;
  color: var(--text-1) !important;
  border-bottom: none !important;
}
#notas-root.nv-app .notas-editor-wysiwyg h4,
#notas-root.nv-app .gpsn-preview h4,
#notas-root.nv-app .notas-editor-preview h4 {
  font: 600 16px/1.4 var(--font-display) !important;
  margin: 1.3em 0 0.3em !important;
  color: var(--text-2) !important;
  border-bottom: none !important;
}
#notas-root.nv-app .notas-editor-wysiwyg h5,
#notas-root.nv-app .gpsn-preview h5,
#notas-root.nv-app .notas-editor-preview h5 {
  font: 600 14px/1.4 var(--font-mono) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 1.2em 0 0.3em !important;
  color: var(--text-3) !important;
}
#notas-root.nv-app .notas-editor-wysiwyg h6,
#notas-root.nv-app .gpsn-preview h6 {
  font: 600 13px/1.4 var(--font-display) !important;
  margin: 1em 0 0.3em !important;
  color: var(--text-3) !important;
}

/* Parágrafos e listas — espaçamento confortável */
#notas-root.nv-app .notas-editor-wysiwyg p,
#notas-root.nv-app .gpsn-preview p,
#notas-root.nv-app .notas-editor-preview p {
  margin: 0 0 1em !important;
  line-height: 1.7 !important;
}
#notas-root.nv-app .notas-editor-wysiwyg ul,
#notas-root.nv-app .notas-editor-wysiwyg ol,
#notas-root.nv-app .gpsn-preview ul,
#notas-root.nv-app .gpsn-preview ol,
#notas-root.nv-app .notas-editor-preview ul,
#notas-root.nv-app .notas-editor-preview ol {
  margin: 0 0 1em !important;
  padding-left: 1.5em !important;
}
#notas-root.nv-app .notas-editor-wysiwyg li,
#notas-root.nv-app .gpsn-preview li,
#notas-root.nv-app .notas-editor-preview li {
  margin: 0.3em 0 !important;
  line-height: 1.65 !important;
}
#notas-root.nv-app .notas-editor-wysiwyg li > ul,
#notas-root.nv-app .notas-editor-wysiwyg li > ol,
#notas-root.nv-app .gpsn-preview li > ul,
#notas-root.nv-app .gpsn-preview li > ol {
  margin: 0.3em 0 0.5em !important;
}

/* Bullet points neutros para preservar a formatação copiada */
#notas-root.nv-app .notas-editor-wysiwyg ul > li::marker,
#notas-root.nv-app .gpsn-preview ul > li::marker,
#notas-root.nv-app .notas-editor-preview ul > li::marker {
  color: var(--text-3);
}

/* Task lists: esconde o bullet quando o LI tem checkbox e alinha o input. */
#notas-root.nv-app .notas-editor-wysiwyg li.notas-task-item,
#notas-root.nv-app .gpsn-preview li.notas-task-item,
#notas-root.nv-app .notas-editor-preview li.notas-task-item {
  list-style: none;
  margin-left: -1.2em;
}
#notas-root.nv-app .notas-editor-wysiwyg li.notas-task-item > input[type="checkbox"],
#notas-root.nv-app .gpsn-preview li.notas-task-item > input[type="checkbox"],
#notas-root.nv-app .notas-editor-preview li.notas-task-item > input[type="checkbox"] {
  margin-right: 6px;
  cursor: pointer;
  vertical-align: middle;
  transform: translateY(-1px);
  /* Sobrescreve o fundo escuro genérico de input[type=checkbox] (base.css) —
     aqui queremos o visual padrão (caixa clara com contorno visível quando
     desmarcado, em vez do preenchimento escuro herdado ou totalmente invisível). */
  background-color: #fff;
  border: 1.5px solid #1f2937;
}
#notas-root.nv-app .notas-editor-wysiwyg li.notas-task-item > input[type="checkbox"]:checked,
#notas-root.nv-app .gpsn-preview li.notas-task-item > input[type="checkbox"]:checked,
#notas-root.nv-app .notas-editor-preview li.notas-task-item > input[type="checkbox"]:checked {
  background-color: var(--accent-color);
}
#notas-root.nv-app .notas-editor-wysiwyg li.notas-task-item > input[type="checkbox"]:checked + *,
#notas-root.nv-app .gpsn-preview li.notas-task-item > input[type="checkbox"]:checked ~ *,
#notas-root.nv-app .notas-editor-preview li.notas-task-item > input[type="checkbox"]:checked ~ * {
  color: var(--text-3);
  text-decoration: line-through;
}
#notas-root.nv-app .gpsn-preview strong,
#notas-root.nv-app .notas-editor-wysiwyg strong {
  color: var(--text-1) !important;
}
#notas-root.nv-app .gpsn-preview em,
#notas-root.nv-app .notas-editor-wysiwyg em {
  color: var(--text-2) !important;
}
#notas-root.nv-app .gpsn-preview a,
#notas-root.nv-app .notas-editor-wysiwyg a {
  color: var(--accent) !important;
  border-bottom-color: oklch(from var(--accent) l c h / 0.3) !important;
  cursor: pointer;
}
/* Blockquote — destaque neutro para não tingir conteúdo copiado */
#notas-root.nv-app .gpsn-preview blockquote,
#notas-root.nv-app .notas-editor-wysiwyg blockquote,
#notas-root.nv-app .notas-editor-preview blockquote {
  margin: 1.2em 0 !important;
  padding: 0.5em 1.2em !important;
  border-left: 3px solid var(--border-soft) !important;
  background: var(--bg-2) !important;
  color: var(--text-2) !important;
  border-radius: 0 6px 6px 0;
  font-style: normal !important;
}
#notas-root.nv-app .gpsn-preview blockquote p,
#notas-root.nv-app .notas-editor-wysiwyg blockquote p,
#notas-root.nv-app .notas-editor-preview blockquote p {
  margin: 0 !important;
}

/* Code inline — destaque sutil em coral */
#notas-root.nv-app .gpsn-preview code,
#notas-root.nv-app .notas-editor-wysiwyg code,
#notas-root.nv-app .notas-editor-preview code {
  font: 500 0.9em/1.4 var(--font-mono) !important;
  padding: 1px 6px !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  color: oklch(0.78 0.16 30) !important;
}

/* Code block (pre) — leitura técnica */
#notas-root.nv-app .gpsn-preview pre,
#notas-root.nv-app .notas-editor-wysiwyg pre,
#notas-root.nv-app .notas-editor-preview pre {
  margin: 1.2em 0 !important;
  padding: 16px 18px !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  font: 400 13px/1.55 var(--font-mono) !important;
  overflow-x: auto;
}
#notas-root.nv-app .gpsn-preview pre code,
#notas-root.nv-app .notas-editor-wysiwyg pre code,
#notas-root.nv-app .notas-editor-preview pre code {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-size: inherit !important;
  color: var(--text-1) !important;
}
#notas-root.nv-app .gpsn-preview pre code,
#notas-root.nv-app .notas-editor-wysiwyg pre code {
  color: var(--text-1) !important;
  background: transparent !important;
}
/* HR — divisor mais elegante (gradient) */
#notas-root.nv-app .gpsn-preview hr,
#notas-root.nv-app .notas-editor-wysiwyg hr,
#notas-root.nv-app .notas-editor-preview hr {
  margin: 2em 0 !important;
  border: none !important;
  height: 1px !important;
  background: linear-gradient(to right, transparent, var(--border), transparent) !important;
}

/* Imagens — sombra sutil + radius */
#notas-root.nv-app .gpsn-preview img,
#notas-root.nv-app .notas-editor-wysiwyg img,
#notas-root.nv-app .notas-editor-preview img {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 12px oklch(0% 0 0 / 0.18);
  margin: 1em 0;
}

/* Tabela — refit proporcional ao tamanho */
#notas-root.nv-app .gpsn-preview table,
#notas-root.nv-app .notas-editor-wysiwyg table,
#notas-root.nv-app .notas-editor-preview table {
  border-collapse: collapse !important;
  margin: 1.2em 0 !important;
  width: 100%;
  font-size: 14px;
}
#notas-root.nv-app .gpsn-preview th,
#notas-root.nv-app .gpsn-preview td,
#notas-root.nv-app .notas-editor-wysiwyg th,
#notas-root.nv-app .notas-editor-wysiwyg td,
#notas-root.nv-app .notas-editor-preview th,
#notas-root.nv-app .notas-editor-preview td {
  padding: 8px 12px !important;
  border: 1px solid var(--border) !important;
  text-align: left;
}
#notas-root.nv-app .gpsn-preview table,
#notas-root.nv-app .notas-editor-wysiwyg table,
#notas-root.nv-app .gpsn-preview th,
#notas-root.nv-app .gpsn-preview td,
#notas-root.nv-app .notas-editor-wysiwyg th,
#notas-root.nv-app .notas-editor-wysiwyg td {
  border-color: var(--border) !important;
}
#notas-root.nv-app .gpsn-preview thead th,
#notas-root.nv-app .notas-editor-wysiwyg thead th {
  background: var(--bg-2) !important;
  color: var(--text-1) !important;
}
#notas-root.nv-app .gpsn-preview tbody tr:nth-child(even),
#notas-root.nv-app .notas-editor-wysiwyg tbody tr:nth-child(even) {
  background: var(--bg-2) !important;
}
#notas-root.nv-app .gpsn-preview tbody tr:hover td,
#notas-root.nv-app .gpsn-preview tbody tr:hover th,
#notas-root.nv-app .notas-editor-wysiwyg tbody tr:hover td,
#notas-root.nv-app .notas-editor-wysiwyg tbody tr:hover th {
  background: var(--bg-3) !important;
  color: var(--text-1) !important;
}
#notas-root.nv-app .gpsn-preview mark,
#notas-root.nv-app .notas-editor-wysiwyg mark {
  background: oklch(0.78 0.16 78 / 0.3) !important;
  color: var(--text-1) !important;
}

/* Toolbar / footer / right panel inside notas standalone */
#notas-root.nv-app .gpsn-toolbar,
#notas-root.nv-app .gpsn-body,
#notas-root.nv-app .gpsn-editor-pane,
#notas-root.nv-app .gpsn-preview-pane,
#notas-root.nv-app .gpsn-toc-pane,
#notas-root.nv-app .gpsn-footer {
  background: var(--bg-1) !important;
  border-color: var(--border) !important;
  color: var(--text-2) !important;
}

/* Right panel (Outline / Backlinks / Tags) — sobrescreve light theme do flat.css */
#notas-root.nv-app .notas-right-panel {
  background: var(--bg-2) !important;
  border-left: 1px solid var(--border) !important;
}
#notas-root.nv-app .notas-right-tabs {
  background: var(--bg-1) !important;
  border-bottom: 1px solid var(--border) !important;
}
#notas-root.nv-app .notas-right-tab {
  color: var(--text-3) !important;
  background: transparent !important;
}
#notas-root.nv-app .notas-right-tab:hover {
  color: var(--text-1) !important;
}
#notas-root.nv-app .notas-right-tab.is-active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
  background: var(--bg-2) !important;
}
#notas-root.nv-app .notas-right-body {
  color: var(--text-2);
}
#notas-root.nv-app .gpsn-toolbar .gpsn-tool {
  color: var(--text-2) !important;
  background: transparent !important;
}
#notas-root.nv-app .gpsn-toolbar .gpsn-tool:hover {
  background: var(--bg-2) !important;
  color: var(--text-1) !important;
}

/* ============================== NOTAS — WELCOME ============================== */
/* Painel direito quando nenhuma nota está selecionada */

#notas-root.nv-app .notas-welcome {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#notas-root.nv-app .notas-welcome-card {
  width: 100%;
  max-width: 480px;
  background: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  padding: 32px 28px !important;
  box-shadow: 0 4px 16px oklch(0% 0 0 / 0.25) !important;
  text-align: center;
}
#notas-root.nv-app .notas-welcome-icon,
#notas-root.nv-app .notas-welcome-card .notas-welcome-icon {
  width: 56px !important;
  height: 56px !important;
  margin: 0 auto 16px !important;
  background: oklch(from var(--accent) l c h / 0.12) !important;
  border: 1px solid oklch(from var(--accent) l c h / 0.3) !important;
  border-radius: 14px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent) !important;
}
#notas-root.nv-app .notas-welcome-card h2 {
  font: 600 20px/1.25 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--text-1) !important;
  margin: 0 0 8px !important;
}
#notas-root.nv-app .notas-welcome-card p {
  font-size: 13px;
  color: var(--text-3) !important;
  line-height: 1.5 !important;
  margin: 0 0 18px !important;
}
#notas-root.nv-app .notas-welcome-card p strong {
  color: var(--text-1) !important;
}
#notas-root.nv-app .notas-welcome-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 18px;
}
#notas-root.nv-app .notas-welcome-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-1);
  font: 500 13px/1 var(--font-sans);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
#notas-root.nv-app .notas-welcome-btn:hover:not(:disabled) {
  background: var(--bg-2);
  border-color: oklch(from var(--accent) l c h / 0.4);
}
#notas-root.nv-app .notas-welcome-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
#notas-root.nv-app .notas-welcome-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg, #fff);
}
#notas-root.nv-app .notas-welcome-btn--primary:hover {
  background: var(--accent-strong, var(--accent));
  border-color: var(--accent-strong, var(--accent));
}
#notas-root.nv-app .notas-welcome-btn kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: oklch(0% 0 0 / 0.2);
  border: 1px solid oklch(100% 0 0 / 0.15);
  border-radius: 4px;
  font: 500 10px/1 var(--font-mono);
  color: inherit;
}
#notas-root.nv-app .notas-welcome-btn:not(.notas-welcome-btn--primary) kbd {
  background: var(--bg-3);
  border-color: var(--border);
  color: var(--text-3);
}
#notas-root.nv-app .notas-welcome-recent {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-bottom: 14px;
}
#notas-root.nv-app .notas-welcome-recent-label {
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}
#notas-root.nv-app .notas-welcome-recent-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
#notas-root.nv-app .notas-welcome-recent-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-2);
  font: 500 12px/1 var(--font-sans);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
#notas-root.nv-app .notas-welcome-recent-item:hover {
  background: var(--bg-3);
  color: var(--text-1);
  border-color: oklch(from var(--accent) l c h / 0.4);
}
#notas-root.nv-app .notas-welcome-tips,
#notas-root.nv-app .notas-welcome-card .notas-welcome-tips {
  border-top: 1px solid var(--border) !important;
  padding-top: 14px !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-3) !important;
  margin-top: 14px !important;
}
#notas-root.nv-app .notas-welcome-tips > div,
#notas-root.nv-app .notas-welcome-card .notas-welcome-tips > div {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  justify-content: flex-start !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  color: var(--text-2) !important;
  grid-template-columns: unset !important;
}
#notas-root.nv-app .notas-welcome-tips > div span:not([class]),
#notas-root.nv-app .notas-welcome-card .notas-welcome-tips > div span:not([class]) {
  color: var(--text-1) !important;
  font-weight: 500;
  flex: 1;
}
#notas-root.nv-app .notas-welcome-tips kbd,
#notas-root.nv-app .notas-welcome-card .notas-welcome-tips kbd {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 24px !important;
  height: 20px !important;
  padding: 0 6px !important;
  background: var(--bg-3) !important;
  border: 1px solid var(--border) !important;
  border-bottom-width: 1px !important;
  border-radius: 5px !important;
  font: 500 11px/1 var(--font-mono) !important;
  color: var(--text-2) !important;
}

/* ============================== NOTAS-D ============================== */
/* Overlays (modal, emoji picker, link picker, ctx menu, find bar, color) */
/* Render-side: estes elementos ficam em document.body, fora de #notas-root.
   Por isso os seletores são globais (sem prefixo), mas escopados por classe
   para não vazar pra fora dos overlays do módulo. */

/* --- Modal genérico (confirm + form + textarea) --- */
.notas-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: oklch(0% 0 0 / 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 140ms ease;
}
.notas-modal-overlay.is-open {
  opacity: 1;
}
.notas-modal {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 60px oklch(0% 0 0 / 0.4);
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(8px) scale(0.985);
  transition: transform 160ms ease;
}
.notas-modal-overlay.is-open .notas-modal {
  transform: translateY(0) scale(1);
}
.notas-modal-head {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.notas-modal-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.01em;
}
.notas-modal-body {
  padding: 16px 20px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
}
.notas-modal-msg {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--text-2);
}
.notas-modal-input {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text-1);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 140ms ease, background 140ms ease;
}
.notas-modal-input:focus {
  border-color: var(--accent);
  background: var(--bg-1);
}
.notas-modal-input::placeholder {
  color: var(--text-3);
}
.notas-modal-error {
  margin-top: 8px;
  font-size: 12px;
  color: var(--danger, #e57373);
  min-height: 16px;
}
.notas-modal-foot {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border);
}
.notas-modal-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-1);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.notas-modal-btn:hover {
  background: var(--bg-2);
}
.notas-modal-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg, #fff);
}
.notas-modal-btn--primary:hover {
  background: var(--accent-2, var(--accent));
}
.notas-modal-btn--danger {
  background: var(--danger, #d9534f);
  border-color: var(--danger, #d9534f);
  color: #fff;
}
.notas-modal-btn--danger:hover {
  background: oklch(from var(--danger, #d9534f) calc(l - 0.05) c h);
}

/* --- Emoji picker --- */
.notas-emoji-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 1150;
  background: oklch(0% 0 0 / 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.notas-emoji-picker {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 60px oklch(0% 0 0 / 0.4);
  width: 100%;
  max-width: 440px;
  max-height: min(560px, 90vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.notas-emoji-head {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}
.notas-emoji-search {
  flex: 1;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text-1);
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.notas-emoji-search:focus {
  border-color: var(--accent);
  background: var(--bg-1);
}
.notas-emoji-clear {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  font-size: 12px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.notas-emoji-clear:hover {
  background: var(--bg-2);
  color: var(--text-1);
}
.notas-emoji-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.notas-emoji-tabs::-webkit-scrollbar { display: none; }
.notas-emoji-tab {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-2);
  font-size: 16px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.notas-emoji-tab:hover {
  background: var(--bg-2);
  color: var(--text-1);
}
.notas-emoji-tab.is-active {
  background: var(--accent-soft, oklch(from var(--accent) l c h / 0.15));
  color: var(--accent);
  border-color: var(--accent);
}
.notas-emoji-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}
.notas-emoji-group {
  margin-bottom: 12px;
}
.notas-emoji-group-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  margin-bottom: 6px;
}
.notas-emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 4px;
}
.notas-emoji-cell {
  aspect-ratio: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 20px;
  cursor: pointer;
  transition: background 100ms ease, transform 100ms ease;
}
.notas-emoji-cell:hover {
  background: var(--bg-2);
  transform: scale(1.1);
}
.notas-emoji-cell.is-current {
  border-color: var(--accent);
  background: var(--accent-soft, oklch(from var(--accent) l c h / 0.15));
}
.notas-emoji-empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--text-3);
  font-size: 12px;
}
.notas-emoji-foot {
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  text-align: right;
  font-size: 11px;
  color: var(--text-3);
}

/* --- Link picker (Adicionar link interno) --- */
.gpsn-lp-overlay {
  position: fixed;
  inset: 0;
  z-index: 1140;
  background: oklch(0% 0 0 / 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 24px 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}
.gpsn-lp-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.gpsn-lp-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 60px oklch(0% 0 0 / 0.4);
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(-8px);
  transition: transform 160ms ease;
}
.gpsn-lp-overlay.is-open .gpsn-lp-card {
  transform: translateY(0);
}
.gpsn-lp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-1);
}
.gpsn-lp-close {
  background: transparent;
  border: none;
  color: var(--text-3);
  font-size: 20px;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 140ms ease, color 140ms ease;
}
.gpsn-lp-close:hover {
  background: var(--bg-2);
  color: var(--text-1);
}
.gpsn-lp-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-3);
}
.gpsn-lp-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-1);
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
.gpsn-lp-input::placeholder {
  color: var(--text-3);
}
.gpsn-lp-kbd,
.gpsn-lp-foot kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--text-3);
}
.gpsn-lp-results {
  flex: 1;
  max-height: 360px;
  overflow-y: auto;
  padding: 6px;
}
.gpsn-lp-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-1);
  transition: background 100ms ease;
}
.gpsn-lp-result:hover,
.gpsn-lp-result.is-selected {
  background: var(--bg-2);
}
.gpsn-lp-result-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gpsn-lp-result-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gpsn-lp-result-meta {
  font-size: 11px;
  color: var(--text-3);
}
.gpsn-lp-foot {
  display: flex;
  gap: 16px;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-3);
}
.gpsn-lp-foot span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* --- Context menu (clique direito) --- */
.notas-ctx-menu {
  position: fixed;
  z-index: 1200;
  min-width: 220px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px oklch(0% 0 0 / 0.35);
  padding: 4px;
  font-size: 13px;
  color: var(--text-1);
  animation: notasCtxIn 100ms ease;
}
@keyframes notasCtxIn {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}
.notas-ctx-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 80ms ease, color 80ms ease;
}
.notas-ctx-item:hover {
  background: var(--bg-2);
}
.notas-ctx-item.is-danger {
  color: var(--danger, #e57373);
}
.notas-ctx-item.is-danger:hover {
  background: oklch(from var(--danger, #e57373) l c h / 0.12);
}
.notas-ctx-icon {
  width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.notas-ctx-label {
  flex: 1;
}
.notas-ctx-shortcut {
  font-size: 11px;
  color: var(--text-3);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.notas-ctx-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* --- Find bar (Ctrl+F dentro do editor) --- */
#notas-root.nv-app .notas-find-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#notas-root.nv-app .notas-find-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
#notas-root.nv-app .notas-find-icon {
  color: var(--text-3);
  font-size: 12px;
  width: 20px;
  display: inline-flex;
  justify-content: center;
}
#notas-root.nv-app .notas-find-input {
  flex: 1;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  color: var(--text-1);
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
#notas-root.nv-app .notas-find-input:focus {
  border-color: var(--accent);
  background: var(--bg-1);
}
#notas-root.nv-app .notas-find-count {
  font-size: 11px;
  color: var(--text-3);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  padding: 0 6px;
  white-space: nowrap;
}
#notas-root.nv-app .notas-find-nav,
#notas-root.nv-app .notas-find-toggle-replace,
#notas-root.nv-app .notas-find-close,
#notas-root.nv-app .notas-find-btn {
  height: 26px;
  min-width: 26px;
  padding: 0 8px;
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 6px;
  color: var(--text-2);
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
#notas-root.nv-app .notas-find-nav:hover,
#notas-root.nv-app .notas-find-toggle-replace:hover,
#notas-root.nv-app .notas-find-close:hover,
#notas-root.nv-app .notas-find-btn:hover {
  background: var(--bg-2);
  color: var(--text-1);
}
#notas-root.nv-app .notas-find-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg, #fff);
}
#notas-root.nv-app .notas-find-btn--primary:hover {
  background: var(--accent-2, var(--accent));
  color: var(--accent-fg, #fff);
}

/* --- Color picker / floating toolbar do editor --- */
#notas-root.nv-app .notas-floating-toolbar {
  position: absolute;
  z-index: 50;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px oklch(0% 0 0 / 0.3);
  padding: 4px;
  display: flex;
  align-items: center;
  gap: 2px;
}
#notas-root.nv-app .notas-color-picker {
  position: absolute;
  z-index: 60;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px oklch(0% 0 0 / 0.3);
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(7, 22px);
  gap: 4px;
}
#notas-root.nv-app .notas-color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: 1px solid oklch(0% 0 0 / 0.15);
  cursor: pointer;
  padding: 0;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
#notas-root.nv-app .notas-color-swatch:hover {
  transform: scale(1.15);
  box-shadow: 0 0 0 2px var(--accent);
}

/* ============================== PROGRESSO REFIT ============================== */
/* Base + KPI cards + panels + meta modal */

#module-progresso.nv-app {
  font-family: var(--font-sans);
  color: var(--text-1);
  /* Como o .page do mockup: largura máxima fixa e centralizado — os
     gráficos/heatmap ficam do MESMO tamanho em qualquer janela em vez
     de esticar/encolher com a viewport. */
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

/* Cabeçalho + filtro em pill — valores exatos do mockup aprovado. */
#module-progresso.nv-app .pg-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
#module-progresso.nv-app .page-header {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-1);
  margin: 0 0 6px;
  /* base.css dá `.page-header { padding: 1.5rem }`, o que empurrava só o
     título 24px pra direita — desalinhado do subtítulo e dos cards, que
     têm padding 0. Zera o esquerdo pra alinhar tudo na mesma borda. */
  padding-left: 0;
  text-wrap: balance;
}
#module-progresso.nv-app .pg-page-subtitle {
  font: 400 14px/1.5 var(--font-sans);
  color: var(--text-3);
  margin: 0;
}
#module-progresso.nv-app .pg-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-2);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 7px 8px 7px 14px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
}
#module-progresso.nv-app .pg-filter-pill span[data-lucide],
#module-progresso.nv-app .pg-filter-pill svg {
  width: 14px;
  height: 14px;
  color: var(--text-3);
  flex-shrink: 0;
}
#module-progresso.nv-app .pg-filter-pill select {
  background: transparent;
  border: none;
  color: var(--text-1);
  font: inherit;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 999px;
  max-width: 260px;
  cursor: pointer;
}
#module-progresso.nv-app .pg-filter-pill select:focus {
  outline: 2px solid var(--accent);
}
#module-progresso.nv-app .pg-filter-pill select option {
  background: var(--bg-2);
  color: var(--text-1);
}

/* Seções — h2 18px/650 do mockup; summary continua clicável (colapsa),
   mas sem o marcador triangular, que o mockup não tem.
   O flat.css tem um fallback `details:not(.module-orientation-card)`
   que dava borda + fundo + raio a TODA .pg-section (ela é um <details>).
   Isso criava uma moldura em volta do conteúdo — que, somada à borda dos
   cards internos, deixava linhas concêntricas quase encostando. A seção é
   só um agrupamento: aqui ela volta a ser transparente, sem card. */
#module-progresso.nv-app .pg-section {
  margin: 40px 0 0;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
#module-progresso.nv-app .pg-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-1);
}
#module-progresso.nv-app .pg-section-head::-webkit-details-marker { display: none; }
#module-progresso.nv-app .pg-section-head::marker { content: none; }
/* O CSS legado punha um "▸" via ::before e uma faixa de fundo no summary
   — o mockup não tem nenhum dos dois. */
#module-progresso.nv-app .pg-section-head::before { content: none !important; }
#module-progresso.nv-app .pg-section-head {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
#module-progresso.nv-app .pg-section-head-aside {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: 0;
  color: var(--text-4, var(--text-3));
}
#module-progresso.nv-app .pg-section-subtitle {
  font: 400 13px/1.5 var(--font-sans);
  color: var(--text-3);
  margin: 4px 0 18px;
}

/* Orientation card (guia rápido) */
#module-progresso.nv-app .module-orientation-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0;
  margin-bottom: 18px;
  overflow: hidden;
}
#module-progresso.nv-app .module-orientation-summary {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
}
#module-progresso.nv-app .module-orientation-summary::-webkit-details-marker { display: none; }
#module-progresso.nv-app .module-orientation-kicker {
  font: 600 11px/1 var(--font-mono, ui-monospace);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#module-progresso.nv-app .module-orientation-summary-title {
  font: 600 15px/1.3 var(--font-display);
  color: var(--text-1);
  margin-top: 4px;
}
#module-progresso.nv-app .module-orientation-summary-action {
  color: var(--text-3);
  font-size: 12px;
}
#module-progresso.nv-app .module-orientation-body {
  padding: 0 18px 18px;
  border-top: 1px solid var(--border);
}
#module-progresso.nv-app .module-orientation-title {
  font: 600 14px/1.4 var(--font-sans);
  color: var(--text-1);
  margin: 14px 0 6px;
}
#module-progresso.nv-app .module-orientation-copy {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0 0 12px;
}
#module-progresso.nv-app .module-orientation-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
#module-progresso.nv-app .module-orientation-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  color: var(--text-2);
}
#module-progresso.nv-app .module-bridge-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 14px;
}
#module-progresso.nv-app .module-bridge-kicker {
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  gap: 5px;
  align-items: center;
}
#module-progresso.nv-app .module-bridge-title {
  font: 600 14px/1.4 var(--font-display);
  color: var(--text-1);
  margin: 8px 0 4px;
}
#module-progresso.nv-app .module-bridge-copy {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-3);
  margin: 0 0 10px;
}
#module-progresso.nv-app .module-bridge-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
#module-progresso.nv-app .module-bridge-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-2);
  font-size: 12px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
#module-progresso.nv-app .module-bridge-action:hover {
  background: var(--bg-3);
  color: var(--text-1);
}

/* Card padrão — réplica do .card do mockup: bg-1, borda sutil, r-lg 14,
   padding 20/22 no próprio card (header/body sem padding próprio). */
#module-progresso.nv-app .widget-card,
#module-progresso.nv-app .pg-panel {
  background: var(--bg-1);
  border: 1px solid oklch(0.28 0.010 250 / 0.5);
  border-radius: var(--r-lg, 14px);
  box-shadow: none;
  padding: 20px 22px;
  overflow: hidden;
}
/* ============================================================
   KPIs do Progresso — stat cards minimalistas. Hierarquia:
   overline (categoria) → número grande → contexto → delta.
   Strip de cor no topo (::before) substitui o ícone-caixa antigo,
   identificando a categoria sem depender de SVG carregar.
   ============================================================ */
#module-progresso.nv-app .pg-kpi-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 14px;
}
@media (max-width: 900px) {
  #module-progresso.nv-app .pg-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #module-progresso.nv-app .pg-kpi-hero {
    grid-column: span 2;
    grid-row: auto;
  }
}
@media (max-width: 520px) {
  #module-progresso.nv-app .pg-kpi-grid { grid-template-columns: 1fr; }
  #module-progresso.nv-app .pg-kpi-hero { grid-column: span 1; }
}

/* Card-herói do "Acervo" (tempo total acumulado) — métrica-âncora da
   fileira, maior e com a curva de crescimento das últimas 8 semanas em
   vez de disputar peso visual igual com os outros 4 KPIs. */
/* Os !important aqui existem por causa do "de-gradient" genérico do
   flat.css ([class*="-hero"] { background/border/radius !important;
   ::before/::after { content: none !important } }) — sem eles o degradê
   verde e o glow do card somem, e cada linha interna (as classes filhas
   também contêm "-hero") vira um mini-card com borda própria. */
#module-progresso.nv-app .pg-kpi-hero {
  grid-row: span 2;
  position: relative;
  background: linear-gradient(160deg, var(--bg-1), oklch(0.18 0.01 152 / 0.4)) !important;
  border: 1px solid oklch(0.28 0.010 250 / 0.5) !important;
  border-radius: var(--r-xl, 20px) !important;
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#module-progresso.nv-app .pg-kpi-hero::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: -40% -20% auto auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, oklch(0.74 0.16 152 / 0.16), transparent 70%) !important;
  border: none !important;
  pointer-events: none;
}
/* Reseta o card-chrome que o genérico do flat.css aplica em cada
   elemento interno (todas essas classes contêm "-hero"). */
#module-progresso.nv-app [class*="pg-kpi-hero-"] {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#module-progresso.nv-app .pg-kpi-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 11px/1.2 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 14px;
}
#module-progresso.nv-app .pg-kpi-hero-dot {
  width: 6px; height: 6px;
  border-radius: 50% !important;
  background: var(--accent) !important;
  box-shadow: 0 0 8px oklch(0.74 0.16 152 / 0.7) !important;
  flex-shrink: 0;
}
#module-progresso.nv-app .pg-kpi-hero-value {
  /* Longhands de propósito: peso 650 dentro do shorthand `font:` é
     rejeitado pelo Chromium e derruba a declaração inteira. */
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 52px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  margin: 0 0 4px;
}
#module-progresso.nv-app .pg-kpi-hero-value small {
  font-size: 20px;
  font-weight: 500;
  color: var(--text-3);
  margin-left: 4px;
  letter-spacing: -0.01em;
}
#module-progresso.nv-app .pg-kpi-hero-sub {
  font: 400 13px/1.4 var(--font-sans);
  color: var(--text-3);
  margin: 0 0 20px;
}
#module-progresso.nv-app .pg-kpi-hero-sub strong {
  color: var(--accent);
  font-weight: 600;
}
#module-progresso.nv-app .pg-kpi-hero-spark {
  margin-top: auto;
}
#module-progresso.nv-app .pg-kpi-hero-spark svg {
  width: 100%;
  height: 56px;
  display: block;
  overflow: visible;
}
#module-progresso.nv-app .pg-kpi-hero-spark-labels {
  display: flex;
  justify-content: space-between;
  font: 400 10.5px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--text-4, var(--text-3));
  margin-top: 6px;
}

/* Cards secundários — réplica exata do .kpi-sm do mockup aprovado:
   superfície CHAPADA (bg-1 + borda sutil), rótulo em texto puro, número
   branco 24px. Sem strip colorido no topo, sem blob de glow no canto,
   sem chip/pill no rótulo — tudo isso era o visual antigo. */
#module-progresso.nv-app .pg-kpi-card {
  position: relative;
  background: var(--bg-1);
  border: 1px solid oklch(0.28 0.010 250 / 0.5);
  border-radius: var(--r-lg, 14px);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  overflow: hidden;
  --pg-value-color: var(--text-1);
}
/* Mata o strip (::before, camada redesign antiga) e o blob de glow
   colorido (::after, vindo do progresso.css legado). */
#module-progresso.nv-app .pg-kpi-card::before,
#module-progresso.nv-app .pg-kpi-card::after {
  content: none;
}

#module-progresso.nv-app .pg-kpi-overline {
  /* Neutraliza o chip/pill do CSS legado (borda + fundo + padding). */
  border: none;
  background: transparent;
  padding: 0;
  border-radius: 0;
  font: 600 10.5px/1.2 var(--font-sans);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-4, var(--text-3));
  margin: 0;
  display: block;
}
#module-progresso.nv-app .pg-kpi-value {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--pg-value-color);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
/* No mockup os números são sempre brancos — a cor semântica vive só no
   delta/trend (verde/vermelho) e nos pills da matriz/diagnóstico. */
#module-progresso.nv-app .pg-kpi-value.is-good,
#module-progresso.nv-app .pg-kpi-value.is-warn,
#module-progresso.nv-app .pg-kpi-value.is-bad { --pg-value-color: var(--text-1); }
#module-progresso.nv-app .pg-kpi-value.is-muted { --pg-value-color: var(--text-3); }

#module-progresso.nv-app .pg-kpi-context {
  font: 400 11px/1.4 var(--font-sans);
  color: var(--text-4, var(--text-3));
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#module-progresso.nv-app .pg-kpi-delta {
  margin: 0;
  font: 600 11px/1.2 var(--font-sans);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#module-progresso.nv-app .pg-kpi-delta .pg-kpi-delta-value {
  color: var(--text-3);
  letter-spacing: 0.02em;
}
#module-progresso.nv-app .pg-kpi-delta .pg-kpi-delta-suffix {
  color: var(--text-4, var(--text-3));
  font-weight: 500;
  letter-spacing: 0;
}
#module-progresso.nv-app .pg-kpi-delta.is-up   .pg-kpi-delta-value { color: oklch(0.78 0.16 152); }
#module-progresso.nv-app .pg-kpi-delta.is-down .pg-kpi-delta-value { color: oklch(0.68 0.18 25); }
#module-progresso.nv-app .pg-kpi-delta.is-flat .pg-kpi-delta-value { color: var(--text-3); }

/* Trend inline no número (mockup: "51m ↑ 12%") + unidade menor apagada
   (mockup: "78" grande com "%" em 14px text-4, "dias" em 13px). */
#module-progresso.nv-app .pg-kpi-trend {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-left: 6px;
}
#module-progresso.nv-app .pg-kpi-trend.is-up   { color: var(--accent); }
#module-progresso.nv-app .pg-kpi-trend.is-down { color: oklch(0.68 0.18 27); }
#module-progresso.nv-app .pg-kpi-trend.is-flat { color: var(--text-4, var(--text-3)); }
#module-progresso.nv-app .pg-kpi-unit {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-4, var(--text-3));
}
#module-progresso.nv-app .pg-kpi-unit--word {
  font-size: 13px;
}

/* Estado vazio — réplica do .blank do mockup: moldura tracejada neutra,
   ícone em círculo verde-suave, título 14px/650, texto 12.5px. Sem os
   tons azulados do padrão antigo. */
#module-progresso.nv-app .pg-empty-visual {
  border: 1px dashed var(--border-soft);
  border-radius: var(--r-lg, 14px);
  padding: 30px 24px;
  text-align: center;
  background: oklch(0.18 0.008 250 / 0.4);
  width: 100%;
}
#module-progresso.nv-app .pg-empty-visual-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
  background: oklch(0.74 0.16 152 / 0.14);
  color: oklch(0.80 0.17 152);
}
#module-progresso.nv-app .pg-empty-visual-icon span[data-lucide],
#module-progresso.nv-app .pg-empty-visual-icon svg {
  width: 18px;
  height: 18px;
}
#module-progresso.nv-app .pg-empty-visual-title {
  font-family: var(--font-sans);
  font-weight: 650;
  font-size: 14px;
  color: var(--text-1);
  margin: 0 0 6px;
}
#module-progresso.nv-app .pg-empty-visual-text {
  font-size: 12.5px;
  color: var(--text-3);
  margin: 0 auto;
  max-width: 300px;
  line-height: 1.55;
}

/* Objetivos (agora no fim da página): mata o painel navy/slate do CSS
   legado — superfície neutra nos tokens, sem azul. */
#module-progresso.nv-app .pg-metas-empty {
  background: oklch(0.18 0.008 250 / 0.4);
  border: 1px dashed var(--border-soft);
  border-radius: var(--r-lg, 14px);
  box-shadow: none;
  min-height: 0;
  padding: 30px 24px;
}
#module-progresso.nv-app .pg-metas-empty::before {
  content: none;
}
#module-progresso.nv-app .pg-metas-empty-orb {
  width: 38px;
  height: 38px;
  background: oklch(0.74 0.16 152 / 0.14);
  box-shadow: none;
}
#module-progresso.nv-app .pg-metas-empty-icon {
  width: auto;
  height: auto;
  background: transparent;
  color: oklch(0.80 0.17 152);
}
#module-progresso.nv-app .pg-metas-empty-icon span[data-lucide] {
  width: 18px;
  height: 18px;
}
#module-progresso.nv-app .pg-metas-empty-kicker {
  color: var(--accent);
  letter-spacing: 0.08em;
}

/* Cabeçalho de card = .card-head do mockup: 13.5px/600 text-2, ícone
   15px apagado, sem linha divisória embaixo (o card já tem padding). */
#module-progresso.nv-app .widget-header {
  padding: 0;
  border-bottom: none !important;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* mata a faixa de fundo do CSS legado */
  background: transparent !important;
  box-shadow: none !important;
}
#module-progresso.nv-app .widget-title {
  font: 600 13.5px/1.3 var(--font-sans);
  letter-spacing: 0;
  color: var(--text-2);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#module-progresso.nv-app .widget-title span[data-lucide],
#module-progresso.nv-app .widget-title svg {
  width: 15px;
  height: 15px;
  color: var(--text-4, var(--text-3));
  flex-shrink: 0;
}
#module-progresso.nv-app .widget-body {
  padding: 0;
}
/* O CSS legado pintava um sub-painel azul-ardósia (com borda própria)
   atrás de cada gráfico/heatmap. No mockup o conteúdo senta direto na
   superfície do card — sem molduras internas nem tons azulados. */
#module-progresso.nv-app .pg-chart-stage,
#module-progresso.nv-app .pg-streak-shell,
#module-progresso.nv-app #pg-tendencia-container,
#module-progresso.nv-app #pg-semanal-container,
#module-progresso.nv-app #pg-perf-vs-time-container,
#module-progresso.nv-app #pg-desempenho-disciplina-chart-container,
#module-progresso.nv-app .pg-avanco-shell {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* Altura do gráfico de tendência no espírito do mockup (svg de 168px +
   rótulos), em vez do palco alto herdado. */
#module-progresso.nv-app .pg-chart-stage--hero {
  min-height: 190px;
  height: 210px;
}

/* Panels grid (hero charts) — 1.3fr/1fr como no mockup (tendência um
   pouco mais larga que a constância).
   `[class*="hero-"]` do flat.css pegava esse grid (a classe contém
   "hero-") e o transformava num card — outra moldura em volta dos dois
   painéis, colada na borda deles. O grid é só layout: nada de card. */
#module-progresso.nv-app .pg-hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 16px;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
@media (max-width: 1100px) {
  #module-progresso.nv-app .pg-hero-grid {
    grid-template-columns: 1fr;
  }
}
#module-progresso.nv-app .pg-chart-stage {
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Meta modal */
#module-progresso.nv-app .pg-meta-modal {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 60px oklch(0% 0 0 / 0.4);
  color: var(--text-1);
  max-width: 880px;
  width: 100%;
  overflow: hidden;
}
#module-progresso.nv-app .pg-meta-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#module-progresso.nv-app .pg-meta-modal-title {
  font: 600 16px/1.3 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--text-1);
}
#module-progresso.nv-app .pg-meta-modal-close {
  background: transparent;
  border: none;
  color: var(--text-3);
  font-size: 22px;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  transition: background 140ms ease;
}
#module-progresso.nv-app .pg-meta-modal-close:hover {
  background: var(--bg-2);
  color: var(--text-1);
}
#module-progresso.nv-app .pg-meta-modal-body {
  padding: 18px 20px;
}
#module-progresso.nv-app .pg-meta-modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
#module-progresso.nv-app .pg-meta-btn-cancel,
#module-progresso.nv-app .pg-meta-btn-save {
  padding: 8px 16px;
  border-radius: 8px;
  font: 500 13px/1 var(--font-sans);
  cursor: pointer;
  border: 1px solid var(--border);
  transition: background 140ms ease;
}
#module-progresso.nv-app .pg-meta-btn-cancel {
  background: transparent;
  color: var(--text-1);
}
#module-progresso.nv-app .pg-meta-btn-cancel:hover {
  background: var(--bg-2);
}
#module-progresso.nv-app .pg-meta-btn-save {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg, #fff);
}
#module-progresso.nv-app .pg-meta-btn-save:hover {
  background: var(--accent-strong, var(--accent));
}

/* Meta form fields */
#module-progresso.nv-app .pg-meta-form-kicker {
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 4px;
}
#module-progresso.nv-app .pg-meta-form-subtitle {
  font-size: 13px;
  color: var(--text-2);
  margin: 0 0 16px;
  line-height: 1.5;
}
#module-progresso.nv-app .pg-meta-form-group {
  margin-bottom: 14px;
}
#module-progresso.nv-app .pg-meta-disc-search-input {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-1);
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
#module-progresso.nv-app .pg-meta-disc-search-input:focus {
  border-color: var(--accent);
  background: var(--bg-1);
}
#module-progresso.nv-app .pg-meta-side-panel {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
}
#module-progresso.nv-app .pg-meta-side-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: oklch(from var(--accent) l c h / 0.15);
  color: var(--accent);
  border-radius: 999px;
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* ============================== PROGRESSO-B ============================== */
/* Operations stack + detail grid + tabela combinada + diagnóstico */

#module-progresso.nv-app .pg-ops-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 1100px) {
  #module-progresso.nv-app .pg-ops-stack {
    grid-template-columns: 1fr;
  }
}
/* Cada card preenche a altura igualada — conteúdo cresce, sem espaço morto */
#module-progresso.nv-app .pg-ops-stack > .widget-card {
  display: flex;
  flex-direction: column;
}
#module-progresso.nv-app .pg-ops-stack > .widget-card > .widget-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
#module-progresso.nv-app .pg-ops-stack .pg-chart-stage,
#module-progresso.nv-app .pg-ops-stack .pg-avanco-shell,
#module-progresso.nv-app .pg-ops-stack .pg-streak-shell {
  flex: 1;
  min-height: 0;
}
#module-progresso.nv-app .pg-status-pulse {
  text-align: center;
  padding: 20px 16px;
}
#module-progresso.nv-app .pg-chart-stage--compact {
  min-height: 180px;
}
#module-progresso.nv-app .pg-streak-shell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 160px;
}
/* Heatmap de constância — réplica do mockup: linha de dias da semana em
   cima, células quadradas com 3 intensidades de verde + anel no dia de
   hoje, legenda "sem estudo / parcial / meta batida" embaixo. */
/* dow, linhas e legenda partilham a MESMA coluna centralizada e com
   largura máxima — antes cada célula esticava até ~55px e o calendário
   preenchia todo o card, o que deixava os quadrados grandes e blocados.
   Limitando a ~340px, as células ficam num tamanho mais refinado (~43px)
   e o bloco vira um mini-calendário centrado no painel. */
#module-progresso.nv-app .pg-heat-dow,
#module-progresso.nv-app .pg-heat-row {
  display: flex;
  gap: 6px;
  width: 100%;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}
#module-progresso.nv-app .pg-heat-dow {
  margin-bottom: 7px;
}
#module-progresso.nv-app .pg-heat-dow span {
  flex: 1;
  text-align: center;
  font-size: 10.5px;
  color: var(--text-4, var(--text-3));
}
#module-progresso.nv-app .pg-heat-row + .pg-heat-row {
  margin-top: 6px;
}
#module-progresso.nv-app .pg-heat-cell {
  flex: 1;
  aspect-ratio: 1;
  border-radius: 6px;
  background: var(--bg-2);
  border: 1px solid oklch(0.28 0.010 250 / 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-4, var(--text-3));
  font-variant-numeric: tabular-nums;
  position: relative;
}
/* Nível 1 (pouco estudo) precisa se destacar do "sem estudo": antes o
   verde a 18% mal se distinguia do cinza do card. */
#module-progresso.nv-app .pg-heat-cell--lvl1 {
  background: oklch(0.74 0.16 152 / 0.26);
  border-color: oklch(0.74 0.16 152 / 0.4);
  color: var(--text-2);
}
#module-progresso.nv-app .pg-heat-cell--lvl2 {
  background: oklch(0.74 0.16 152 / 0.38);
  border-color: oklch(0.74 0.16 152 / 0.5);
  color: var(--text-1);
}
#module-progresso.nv-app .pg-heat-cell--lvl3 {
  background: var(--accent);
  border-color: var(--accent-strong, var(--accent));
  color: var(--accent-fg, oklch(0.16 0.04 152));
  font-weight: 700;
}
#module-progresso.nv-app .pg-heat-cell--today {
  box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 3px var(--accent);
  z-index: 1;
}
#module-progresso.nv-app .pg-heat-legend {
  display: flex;
  gap: 16px;
  margin-top: 18px;
  width: 100%;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
  font-size: 11px;
  color: var(--text-3);
  flex-wrap: wrap;
}
#module-progresso.nv-app .pg-heat-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
#module-progresso.nv-app .pg-heat-legend-item .sw {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Detail grid (Tabela + Teia + Eficiência; o Diagnóstico virou seção
   própria, réplica do mockup, fora deste grid) */
#module-progresso.nv-app .pg-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}
#module-progresso.nv-app .pg-panel--table { order: 1; grid-column: 1 / -1; }
#module-progresso.nv-app .pg-panel--list { order: 2; grid-column: span 1; }
#module-progresso.nv-app .pg-panel--efficiency { order: 3; grid-column: span 2; }
@media (max-width: 1100px) {
  #module-progresso.nv-app .pg-detail-grid {
    grid-template-columns: 1fr;
  }
  #module-progresso.nv-app .pg-panel--list,
  #module-progresso.nv-app .pg-panel--efficiency {
    grid-column: 1 / -1;
  }
}
/* Antes: max-height 360px + overflow auto criava scroll interno
   espremido com nested scrollbar. A página inteira já é scrollável,
   então o painel pode crescer naturalmente. */
#module-progresso.nv-app .pg-scroll-panel {
  /* mantém as gaps verticais, mas sem altura limitada */
  max-height: none;
  overflow: visible;
}

/* Tabela — réplica da table.matrix do mockup: 13px, cabeçalho uppercase
   10.5px apagado alinhado à esquerda, linhas com border-top sutil,
   primeira coluna fixa ao rolar de lado, barra 60×5 + fração, selo de
   status colorido. Scroll horizontal só do contêiner da tabela. */
#module-progresso.nv-app .pg-table-shell {
  padding: 0;
}
#module-progresso.nv-app .pg-table-scroll {
  overflow-x: auto;
  max-height: min(72vh, 56rem);
  overflow-y: auto;
  margin: 0 -22px;
  padding: 0 22px;
}
#module-progresso.nv-app #pg-tabela-combinada {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--text-2);
  min-width: 640px;
}
#module-progresso.nv-app #pg-tabela-combinada thead th {
  text-align: left;
  font: 600 10.5px/1.3 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-4, var(--text-3));
  padding: 0 10px 10px;
  white-space: nowrap;
  background: var(--bg-1);
  position: sticky;
  top: 0;
  z-index: 2;
}
#module-progresso.nv-app #pg-tabela-combinada thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  padding-left: 0;
}
#module-progresso.nv-app #pg-tabela-combinada tbody td {
  padding: 12px 10px;
  border-top: 1px solid oklch(0.28 0.010 250 / 0.5);
  color: var(--text-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: left;
}
#module-progresso.nv-app #pg-tabela-combinada tbody td:first-child {
  color: var(--text-1);
  font-weight: 500;
  position: sticky;
  left: 0;
  background: var(--bg-1);
  padding-left: 0;
  z-index: 1;
  /* mata a listra colorida por severidade do CSS legado — no mockup a
     cor de status vive só no selo da última coluna */
  box-shadow: none !important;
}
#module-progresso.nv-app .pg-bar-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
#module-progresso.nv-app .pg-bar-track {
  width: 60px;
  height: 5px;
  border-radius: 3px;
  background: var(--bg-3);
  overflow: hidden;
  flex-shrink: 0;
}
#module-progresso.nv-app .pg-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
}
#module-progresso.nv-app .pg-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
#module-progresso.nv-app .pg-status-pill--good {
  background: oklch(0.74 0.16 152 / 0.14);
  color: oklch(0.80 0.17 152);
}
#module-progresso.nv-app .pg-status-pill--warn {
  background: oklch(0.78 0.15 75 / 0.14);
  color: oklch(0.78 0.15 75);
}
#module-progresso.nv-app .pg-status-pill--risk {
  background: oklch(0.68 0.18 27 / 0.14);
  color: oklch(0.68 0.18 27);
}
#module-progresso.nv-app .pg-status-pill--muted {
  background: var(--bg-3);
  color: var(--text-3);
}

/* Eficiência (scatter) */
#module-progresso.nv-app .pg-efficiency-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-3);
  padding: 8px 0;
}
#module-progresso.nv-app .pg-efficiency-list {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 8px;
}
#module-progresso.nv-app .widget-footer.pg-widget-note {
  padding: 10px 18px 14px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#module-progresso.nv-app .pg-widget-note strong {
  color: var(--text-1);
}

/* ============================================================
   Diagnóstico de desempenho — réplica do mockup: 3 cartões lado a
   lado, cada um com fundo em degradê sutil da própria severidade,
   título colorido 12.5px/650 e itens "Nome … 84%" com separador
   tracejado. Sem chips, sem contadores, sem linha de "Ação".
   ============================================================ */
#module-progresso.nv-app .pg-diag-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 14px;
  margin-top: 18px;
}
@media (max-width: 900px) {
  #module-progresso.nv-app .pg-diag-grid {
    grid-template-columns: 1fr;
  }
}
/* !important: os genéricos do flat.css ([class*="card"], [class*="title"])
   têm !important e atropelavam o tint/cores por substring do nome. */
#module-progresso.nv-app .pg-diag-card {
  border-radius: var(--r-md, 10px) !important;
  padding: 14px 16px !important;
  border: 1px solid oklch(0.28 0.010 250 / 0.5) !important;
  background: var(--bg-1) !important;
  min-width: 0;
  box-shadow: none !important;
}
#module-progresso.nv-app .pg-diag-card::before,
#module-progresso.nv-app .pg-diag-card::after {
  content: none !important;
}
#module-progresso.nv-app .pg-diag-card--good {
  border-color: oklch(0.74 0.16 152 / 0.3) !important;
  background: linear-gradient(160deg, oklch(0.74 0.16 152 / 0.07), var(--bg-1) 60%) !important;
}
#module-progresso.nv-app .pg-diag-card--warn {
  border-color: oklch(0.78 0.15 75 / 0.3) !important;
  background: linear-gradient(160deg, oklch(0.78 0.15 75 / 0.07), var(--bg-1) 60%) !important;
}
#module-progresso.nv-app .pg-diag-card--risk {
  border-color: oklch(0.68 0.18 27 / 0.3) !important;
  background: linear-gradient(160deg, oklch(0.68 0.18 27 / 0.07), var(--bg-1) 60%) !important;
}
#module-progresso.nv-app .pg-diag-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-weight: 650;
  font-size: 12.5px;
  line-height: 1.3;
  margin: 0 0 10px;
}
#module-progresso.nv-app .pg-diag-title span[data-lucide],
#module-progresso.nv-app .pg-diag-title svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
#module-progresso.nv-app .pg-diag-title--good { color: oklch(0.80 0.17 152) !important; }
#module-progresso.nv-app .pg-diag-title--warn { color: oklch(0.78 0.15 75) !important; }
#module-progresso.nv-app .pg-diag-title--risk { color: oklch(0.68 0.18 27) !important; }
#module-progresso.nv-app .pg-diag-item {
  font-size: 12.5px;
  color: var(--text-2);
  padding: 5px 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
#module-progresso.nv-app .pg-diag-item + .pg-diag-item {
  border-top: 1px dashed oklch(0.28 0.010 250 / 0.5);
}
#module-progresso.nv-app .pg-diag-item b {
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
  font-weight: 600;
  flex-shrink: 0;
}
#module-progresso.nv-app .pg-diag-empty {
  font: 400 12px/1.4 var(--font-sans);
  color: var(--text-4, var(--text-3));
  font-style: italic;
  margin: 0;
}

/* Disciplina progresso list */
#module-progresso.nv-app #pg-disciplina-progresso-container .disciplina-row {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
#module-progresso.nv-app #pg-disciplina-progresso-container .disciplina-row:last-child {
  border-bottom: none;
}

/* Mentor recommendations */
#module-progresso.nv-app #mentor-recommendations > * {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}

/* ============================== PLANEJAMENTO REFIT ============================== */
/* Hero command + HUD + board + card modal */

#module-kanban.nv-app {
  font-family: var(--font-sans);
  color: var(--text-1);
}

#module-kanban.nv-app .page-header {
  font: 600 28px/1.15 var(--font-display);
  letter-spacing: -0.025em;
  color: var(--text-1);
  margin: 0 0 16px;
}

/* Orientation card (compartilhada) */
#module-kanban.nv-app .module-orientation-card {
  background: var(--bg-1);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  margin-bottom: 18px;
  overflow: hidden;
}
#module-kanban.nv-app .module-orientation-summary {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
}
#module-kanban.nv-app .module-orientation-summary::-webkit-details-marker { display: none; }
#module-kanban.nv-app .module-orientation-kicker {
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#module-kanban.nv-app .module-orientation-summary-title {
  font: 600 15px/1.3 var(--font-display);
  color: var(--text-1);
  margin-top: 4px;
}
#module-kanban.nv-app .module-orientation-body {
  padding: 0 18px 18px;
  border-top: 1px solid var(--border-subtle);
}
#module-kanban.nv-app .module-orientation-title {
  font: 600 14px/1.4 var(--font-sans);
  color: var(--text-1);
  margin: 14px 0 6px;
}
#module-kanban.nv-app .module-orientation-copy {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0 0 12px;
}
#module-kanban.nv-app .module-orientation-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-size: 11px;
  color: var(--text-2);
  margin-right: 6px;
}

/* Board — tela cheia estilo Trello: sem hero, o quadro ocupa a altura
   restante da viewport (header + h1 + toolbar ≈ 210px) e as colunas
   rolam internamente. */
#module-kanban.nv-app .kanban-board-shell {
  background: var(--bg-1);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 16px;
  overflow: auto;
  height: calc(100vh - 212px);
  min-height: 360px;
}
#module-kanban.nv-app .kanban-board {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  height: 100%;
  min-height: 0;
}
#module-kanban.nv-app .kanban-column {
  flex: 0 0 280px;
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  max-height: 100%;
}
#module-kanban.nv-app .kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 10px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 10px;
}
#module-kanban.nv-app .kanban-column-title {
  font: 600 13px/1.2 var(--font-display);
  letter-spacing: -0.005em;
  color: var(--text-1);
}
#module-kanban.nv-app .kanban-column-count {
  font: 500 11px/1 var(--font-mono);
  color: var(--text-3);
  background: var(--bg-3);
  border-radius: 999px;
  padding: 3px 8px;
}
#module-kanban.nv-app .kanban-card {
  background: var(--bg-1);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: grab;
  transition: border-color 140ms ease, transform 80ms ease, box-shadow 140ms ease;
  font-size: 12px;
  color: var(--text-1);
}
#module-kanban.nv-app .kanban-card:hover {
  border-color: oklch(from var(--accent) l c h / 0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px oklch(0% 0 0 / 0.2);
}
#module-kanban.nv-app .kanban-card:active {
  cursor: grabbing;
}

/* Card modal (input + priority + due date) */
#module-kanban.nv-app .input-form {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text-1);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 140ms ease, background 140ms ease;
}
#module-kanban.nv-app .input-form:focus {
  border-color: var(--accent);
  background: var(--bg-1);
}
#module-kanban.nv-app .input-form-sm {
  padding: 6px 10px;
  font-size: 12px;
}
#module-kanban.nv-app .btn-primary,
#module-kanban.nv-app .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font: 500 13px/1 var(--font-sans);
  cursor: pointer;
  border: 1px solid var(--border-subtle);
  transition: background 140ms ease;
}
#module-kanban.nv-app .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg, #fff);
}
#module-kanban.nv-app .btn-primary:hover {
  background: var(--accent-strong, var(--accent));
}
#module-kanban.nv-app .btn-secondary {
  background: transparent;
  color: var(--text-1);
}
#module-kanban.nv-app .btn-secondary:hover {
  background: var(--bg-2);
}
#module-kanban.nv-app .btn-sm {
  padding: 6px 10px;
  font-size: 12px;
}
#module-kanban.nv-app .kanban-priority-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  color: var(--text-2);
  font-size: 11px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
#module-kanban.nv-app .kanban-priority-btn:hover {
  background: var(--bg-3);
  color: var(--text-1);
}
#module-kanban.nv-app .kanban-priority-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: oklch(from var(--accent) l c h / 0.12);
}

/* ============================== PLANEJAMENTO-B ============================== */
/* Column internals + cards (label pills, preview, badges) + label manager + drag */

#module-kanban.nv-app .kanban-column-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
#module-kanban.nv-app .kanban-column-meta {
  font: 500 11px/1 var(--font-mono);
  color: var(--text-3);
  background: var(--bg-3);
  border-radius: 999px;
  padding: 3px 8px;
  flex-shrink: 0;
}
#module-kanban.nv-app .kanban-delete-column-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 140ms ease, background 140ms ease, color 140ms ease, border-color 140ms ease;
}
#module-kanban.nv-app .kanban-column:hover .kanban-delete-column-btn {
  opacity: 1;
}
#module-kanban.nv-app .kanban-delete-column-btn:hover {
  background: oklch(0.68 0.18 27 / 0.12);
  color: oklch(0.68 0.18 27);
  border-color: oklch(0.68 0.18 27 / 0.3);
}
/* Ações do header em FLUXO (não absolutas) — senão sobrepõem o meta-pill "N cards"
   no hover. Ficam ao lado da contagem, com fade-in nos botões. */
#module-kanban.nv-app .kanban-column-actions {
  position: static;
  top: auto;
  right: auto;
  opacity: 1;
  flex-shrink: 0;
  margin-left: 8px;
  gap: 2px;
}
#module-kanban.nv-app .kanban-column-wip-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 140ms ease, background 140ms ease, color 140ms ease, border-color 140ms ease;
}
#module-kanban.nv-app .kanban-column:hover .kanban-column-wip-btn { opacity: 1; }
#module-kanban.nv-app .kanban-column-wip-btn:hover {
  background: oklch(0.72 0.16 145 / 0.14);
  color: var(--accent, oklch(0.72 0.16 145));
  border-color: oklch(0.72 0.16 145 / 0.35);
}

#module-kanban.nv-app .kanban-cards-container {
  flex: 1;
  overflow-y: auto;
  padding-right: 2px;
  min-height: 24px;
}
#module-kanban.nv-app .kanban-cards-container.kanban-drop-target {
  background: oklch(from var(--accent) l c h / 0.06);
  border-radius: 8px;
  outline: 1px dashed oklch(from var(--accent) l c h / 0.3);
}

#module-kanban.nv-app .add-card-button {
  margin-top: 8px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: 1px dashed var(--border-subtle);
  border-radius: 8px;
  color: var(--text-3);
  font: 500 12px/1 var(--font-sans);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
#module-kanban.nv-app .add-card-button:hover {
  background: oklch(from var(--accent) l c h / 0.08);
  border-color: var(--accent);
  color: var(--accent);
  border-style: solid;
}

/* Card content */
#module-kanban.nv-app .kanban-card-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
  min-height: 6px;
}
#module-kanban.nv-app .kanban-label-pill {
  display: inline-block;
  height: 6px;
  min-width: 36px;
  border-radius: 3px;
  flex-shrink: 0;
}
#module-kanban.nv-app .kanban-card-title {
  font: 500 13px/1.4 var(--font-sans);
  color: var(--text-1);
  display: block;
  word-break: break-word;
}
#module-kanban.nv-app .kanban-card-preview {
  font-size: 11px;
  color: var(--text-3);
  margin: 6px 0 0;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  line-height: 1.4;
}
#module-kanban.nv-app .kanban-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
#module-kanban.nv-app .kanban-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  font-size: 10px;
  line-height: 1.4;
  color: var(--text-3);
}
/* Lucide troca o <span data-lucide> por <svg class="lucide...">; sem esta
   regra o SVG volta ao default de 24px e o badge (ex.: prioridade só-ícone)
   fica enorme. */
#module-kanban.nv-app .kanban-card-badge svg,
#module-kanban.nv-app .kanban-card-badge span[data-lucide] {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
/* Variantes de cor. O kanban.js gera classes de UM traço (due-soon,
   priority-high...). Precisam do prefixo #module-kanban pra vencer a
   especificidade da regra base acima (senão o badge fica cinza genérico). */
#module-kanban.nv-app .kanban-card-badge.due-overdue,
#module-kanban.nv-app .kanban-card-badge.priority-high {
  background: oklch(0.68 0.18 27 / 0.14);
  border-color: oklch(0.68 0.18 27 / 0.42);
  color: oklch(0.72 0.18 27);
}
#module-kanban.nv-app .kanban-card-badge.due-soon,
#module-kanban.nv-app .kanban-card-badge.priority-medium {
  background: oklch(0.78 0.16 78 / 0.14);
  border-color: oklch(0.78 0.16 78 / 0.42);
  color: oklch(0.82 0.16 78);
}
#module-kanban.nv-app .kanban-card-badge.due-scheduled,
#module-kanban.nv-app .kanban-card-badge.priority-low {
  background: oklch(0.74 0.16 152 / 0.14);
  border-color: oklch(0.74 0.16 152 / 0.42);
  color: oklch(0.78 0.16 152);
}

/* Label manager popover */
#module-kanban.nv-app #kanban-label-manager-popover {
  position: absolute;
  z-index: 60;
  background: var(--bg-1);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  box-shadow: 0 12px 32px oklch(0% 0 0 / 0.35);
  padding: 12px;
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12px;
  color: var(--text-1);
}
#module-kanban.nv-app .kanban-label-manager-list {
  max-height: 180px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#module-kanban.nv-app .kanban-label-manager-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 100ms ease;
}
#module-kanban.nv-app .kanban-label-manager-item:hover {
  background: var(--bg-2);
}
#module-kanban.nv-app .kanban-label-pill-preview {
  display: inline-block;
  width: 24px;
  height: 8px;
  border-radius: 4px;
  flex-shrink: 0;
}
#module-kanban.nv-app .kanban-label-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
#module-kanban.nv-app #kanban-label-manager-error,
#module-kanban.nv-app .validation-message {
  font-size: 11px;
  color: oklch(0.68 0.18 27);
  margin-top: 4px;
}

/* Drag/drop states — nomes casam com os configurados no kanban.js
   (sortable-ghost-card / sortable-ghost-column / sortable-drag-*). */
#module-kanban.nv-app .kanban-card.sortable-ghost-card {
  opacity: 0.4;
  border: 1px dashed var(--accent);
  background: var(--accent-soft);
}
#module-kanban.nv-app .kanban-card.sortable-chosen,
#module-kanban.nv-app .kanban-card.sortable-drag-card {
  cursor: grabbing;
  box-shadow: 0 12px 32px oklch(0% 0 0 / 0.4);
  border-color: var(--accent);
}
#module-kanban.nv-app .kanban-column.sortable-ghost-column {
  opacity: 0.5;
  background: var(--bg-3);
}
#module-kanban.nv-app .kanban-column.sortable-drag-column {
  box-shadow: 0 18px 44px oklch(0% 0 0 / 0.5);
}
#module-kanban.nv-app .kanban-column--fresh {
  animation: kanbanColumnFresh 1000ms ease;
}
@keyframes kanbanColumnFresh {
  0%   { box-shadow: 0 0 0 3px oklch(from var(--accent) l c h / 0.5); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Add column placeholder (final do board) */
#module-kanban.nv-app .kanban-add-column-placeholder,
#module-kanban.nv-app .add-column-button {
  flex: 0 0 240px;
  align-self: flex-start;
  padding: 12px;
  background: transparent;
  border: 1px dashed var(--border-subtle);
  border-radius: 12px;
  color: var(--text-3);
  font: 500 13px/1 var(--font-sans);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
#module-kanban.nv-app .kanban-add-column-placeholder:hover,
#module-kanban.nv-app .add-column-button:hover {
  background: oklch(from var(--accent) l c h / 0.08);
  border-color: var(--accent);
  color: var(--accent);
  border-style: solid;
}
#module-kanban.nv-app .add-column-button-wrapper {
  flex: 0 0 280px;
  width: 280px;
  align-self: flex-start;
  display: flex;
  align-items: stretch;
  justify-content: center;
}
#module-kanban.nv-app .add-column-button-wrapper.is-editing {
  flex-direction: column;
  justify-content: flex-start;
  border-style: solid;
  border-color: var(--accent);
}
#module-kanban.nv-app .add-column-button.is-hidden {
  display: none !important;
}
#module-kanban.nv-app .kanban-quick-add-column-form {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}
#module-kanban.nv-app .kanban-quick-add-column-input {
  width: 100%;
  min-width: 0;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--bg-1);
  color: var(--text-1);
  padding: 0 12px;
  outline: none;
}
#module-kanban.nv-app .kanban-quick-add-column-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px oklch(from var(--accent) l c h / 0.12);
}
#module-kanban.nv-app .kanban-quick-add-column-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
#module-kanban.nv-app .kanban-quick-add-column-save,
#module-kanban.nv-app .kanban-quick-add-column-cancel {
  height: 36px;
  border-radius: 9px;
}
#module-kanban.nv-app .kanban-quick-add-column-save {
  flex: 1 1 auto;
  min-width: 0;
}
#module-kanban.nv-app .kanban-quick-add-column-cancel {
  flex: 0 0 38px;
  width: 38px;
  padding: 0;
}
#module-kanban.nv-app .kanban-board-empty .add-column-button-wrapper {
  flex: 0 0 auto;
  width: min(340px, 100%);
}

/* ============================================================
   REDESIGN nv-* — partes que faltavam do Planejamento (Kanban):
   header stats, toolbar/busca/filtros, paleta de fundo, arquivados,
   e o chrome do modal do card. Só CSS; markup/IDs/JS intactos.
   ============================================================ */

/* --- Header + stat pills --- */
#module-kanban.nv-app .kanban-header-stats { display: inline-flex; gap: 8px; margin-left: 6px; }
#module-kanban.nv-app .kanban-header-stat {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px;
  border-radius: 999px; background: var(--bg-2); border: 1px solid var(--border-subtle);
  font-size: 12px; color: var(--text-2);
}
#module-kanban.nv-app .kanban-header-stat [data-lucide] { width: 14px; height: 14px; color: var(--text-3); }
#module-kanban.nv-app .kanban-header-stat strong { font-family: var(--font-mono); color: var(--text-1); }
#module-kanban.nv-app .kanban-header-stat--warn { color: var(--warn, oklch(0.80 0.14 70)); }
#module-kanban.nv-app .kanban-header-stat--warn [data-lucide],
#module-kanban.nv-app .kanban-header-stat--warn strong { color: var(--warn, oklch(0.80 0.14 70)); }

/* --- Toolbar + busca --- */
#module-kanban.nv-app .kanban-toolbar {
  background: transparent; border: 0; box-shadow: none; padding: 0;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px;
}
#module-kanban.nv-app .kanban-toolbar-search {
  flex: 1 1 240px; display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 13px;
  background: var(--bg-2); border: 1px solid var(--border-subtle); border-radius: 11px;
}
#module-kanban.nv-app .kanban-toolbar-search [data-lucide] { width: 16px; height: 16px; color: var(--text-4); }
#module-kanban.nv-app #kanban-search-input {
  flex: 1; background: transparent; border: 0; outline: none; color: var(--text-1);
  font: 400 13px var(--font-sans);
}
#module-kanban.nv-app #kanban-search-input::placeholder { color: var(--text-4); }
#module-kanban.nv-app #kanban-search-clear { background: transparent; border: 0; color: var(--text-4); cursor: pointer; }
#module-kanban.nv-app #kanban-search-clear:hover { color: var(--text-1); }
#module-kanban.nv-app .kanban-toolbar-filters { display: flex; gap: 7px; flex-wrap: wrap; }
#module-kanban.nv-app .kanban-toolbar-meta { display: flex; align-items: center; gap: 7px; margin-left: auto; }

/* --- Filter chips --- */
#module-kanban.nv-app .kanban-filter-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px;
  border-radius: 10px; background: var(--bg-2); border: 1px solid var(--border-subtle);
  color: var(--text-2); font: 500 12.5px var(--font-sans); cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
#module-kanban.nv-app .kanban-filter-chip:hover { background: var(--bg-3); color: var(--text-1); }
#module-kanban.nv-app .kanban-filter-count {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-4);
  background: var(--bg-3); padding: 1px 6px; border-radius: 6px;
}
#module-kanban.nv-app .kanban-filter-chip[data-active="true"] {
  background: var(--accent-soft); border-color: color-mix(in oklab, var(--accent) 40%, transparent);
  color: var(--accent-strong, var(--accent));
}
#module-kanban.nv-app .kanban-filter-chip[data-active="true"] .kanban-filter-count {
  background: color-mix(in oklab, var(--accent) 22%, transparent); color: var(--accent-strong, var(--accent));
}
/* variantes de cor (bolinha/borda quando ativas) */
#module-kanban.nv-app .kanban-filter-chip--danger[data-active="true"] { background: oklch(0.68 0.18 27 / .16); border-color: oklch(0.68 0.18 27 / .5); color: oklch(0.72 0.16 27); }
#module-kanban.nv-app .kanban-filter-chip--warn[data-active="true"]   { background: oklch(0.80 0.14 70 / .16); border-color: oklch(0.80 0.14 70 / .5); color: oklch(0.82 0.13 70); }
#module-kanban.nv-app .kanban-filter-chip--high[data-active="true"]   { background: oklch(0.66 0.19 300 / .18); border-color: oklch(0.66 0.19 300 / .5); color: oklch(0.72 0.17 300); }

/* --- Kbd hint --- */
#module-kanban.nv-app .kanban-toolbar-hint { display: flex; gap: 8px; align-items: center; color: var(--text-4); font-size: 11px; }
#module-kanban.nv-app .kanban-toolbar-hint kbd {
  font-family: var(--font-mono); font-size: 10.5px; background: var(--bg-3);
  border: 1px solid var(--border-subtle); border-radius: 5px; padding: 1px 5px; color: var(--text-3);
}

/* --- Paleta de fundo + Arquivados (botões de meta) --- */
#module-kanban.nv-app .kanban-bg-btn,
#module-kanban.nv-app .kanban-archived-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px;
  border-radius: 10px; background: var(--bg-2); border: 1px solid var(--border-subtle);
  color: var(--text-2); font: 500 12.5px var(--font-sans); cursor: pointer; transition: .14s;
}
#module-kanban.nv-app .kanban-bg-btn { width: 36px; padding: 0; justify-content: center; }
#module-kanban.nv-app .kanban-bg-btn:hover,
#module-kanban.nv-app .kanban-archived-btn:hover { background: var(--bg-3); color: var(--text-1); border-color: var(--border-soft); }
#module-kanban.nv-app .kanban-bg-btn [data-lucide],
#module-kanban.nv-app .kanban-archived-btn [data-lucide] { width: 15px; height: 15px; }
#module-kanban.nv-app #kanban-archived-count { font-family: var(--font-mono); color: var(--text-4); }
#module-kanban.nv-app .kanban-bg-popover {
  background: var(--bg-1); border: 1px solid var(--border-soft); border-radius: 14px;
  box-shadow: 0 16px 40px oklch(0 0 0 / .5); padding: 12px;
}
#module-kanban.nv-app .kanban-bg-option { border-radius: 9px; border: 2px solid transparent; }
#module-kanban.nv-app .kanban-bg-option.is-active { border-color: var(--accent); }

/* --- Overlay de arquivados --- */
#module-kanban.nv-app .kanban-archived-overlay { background: oklch(0 0 0 / .55); backdrop-filter: blur(3px); }
#module-kanban.nv-app .kanban-archived-panel,
#module-kanban.nv-app .kanban-archived-content {
  background: var(--bg-1); border: 1px solid var(--border-soft); border-radius: 18px;
  box-shadow: 0 24px 60px oklch(0 0 0 / .5);
}

/* --- Modal do card: portalada no <body> (fora do .nv-app), então escopo
       pelo id do backdrop. Corrige o editor de descrição branco do CSS legado
       e alinha toolbar/checklist/comentários ao tema escuro. --- */
#kanban-card-modal-backdrop .kanban-desc-editor { border-color: var(--border-subtle); }
#kanban-card-modal-backdrop .kanban-desc-toolbar {
  background: var(--bg-3); border-bottom: 1px solid var(--border-subtle);
}
#kanban-card-modal-backdrop .kanban-desc-toolbar-sep { background: var(--border-soft); }
#kanban-card-modal-backdrop .kanban-desc-cmd-btn { color: var(--text-3); }
#kanban-card-modal-backdrop .kanban-desc-cmd-btn:hover { background: var(--bg-2); color: var(--text-1); }
#kanban-card-modal-backdrop .kanban-desc-editable {
  background: var(--bg-2); color: var(--text-1);
}
#kanban-card-modal-backdrop .kanban-desc-editable:empty::before { color: var(--text-4); }
#kanban-card-modal-backdrop .kanban-desc-editable a { color: var(--accent); }
#kanban-card-modal-backdrop .kanban-desc-editable:focus {
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--accent) 40%, transparent);
}
#kanban-card-modal-backdrop .kanban-checklist-item { color: var(--text-2); }
#kanban-card-modal-backdrop .kanban-checklist-item:hover { background: var(--bg-2); }
#kanban-card-modal-backdrop .kanban-checklist-date-badge {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-3);
  background: var(--bg-3); border-radius: 6px; padding: 1px 6px;
}
#kanban-card-modal-backdrop .kanban-cover-option { border-radius: 8px; border: 2px solid transparent; }
#kanban-card-modal-backdrop .kanban-cover-option.is-active { border-color: var(--accent); }

/* ============================================================
   NOTAS — APARÊNCIA DA FOLHA (preferência global do usuário)
   ------------------------------------------------------------
   O usuário escolhe fundo (Escuro/Sépia/Branco), tipografia,
   tamanho e largura no popover "Aa". O JS reflete a escolha em
   #notas-root[data-surface][data-doc-font] + as custom props
   --notas-doc-size / --notas-doc-width.

   Nos modos claros o documento vira uma FOLHA de verdade
   (padding + radius + sombra) flutuando sobre o app escuro —
   em vez do bloco branco chapado que o CSS legado produzia.

   Escopado em #notas-root pra NÃO afetar o overlay do GPS,
   que divide notebook.css/.gpsn-* com este módulo.
   ============================================================ */
/* ---- PARIDADE COM O PROTÓTIPO ----
   Valores medidos no protótipo aprovado e replicados aqui. O módulo
   estava mais claro (bg 0.16 vs 0.15), o vault tinha um override slate
   próprio (#262a31) e o painel direito vinha em bg-2 — o conjunto lia
   como "cinza" em vez do preto do protótipo. Forçado no escopo do
   módulo pra não mexer no resto do app. */
#notas-root.nv-app,
#notas-root.nv-app .notas-vault,
#notas-root.nv-app .notas-content {
  --bg-0: oklch(0.15 0.008 250);
  --bg-1: oklch(0.185 0.008 250);
  --bg-2: oklch(0.215 0.008 250);
  --bg-3: oklch(0.255 0.009 250);
  --text-1: oklch(0.97 0.006 250);
  --text-2: oklch(0.80 0.008 250);
  --text-3: oklch(0.64 0.008 250);
  --text-4: oklch(0.50 0.008 250);
  --border: oklch(1 0 0 / 0.11);
  --border-subtle: oklch(1 0 0 / 0.06);
  --border-soft: oklch(1 0 0 / 0.11);
  --border-strong: oklch(1 0 0 / 0.18);
}
/* O vault é o MESMO preto do palco (no protótipo não há degrau de cor) */
#notas-root.nv-app .notas-vault {
  background: var(--bg-0) !important;
  border-color: var(--border-subtle) !important;
}
/* Painel direito idem — era bg-2 e destoava como um bloco claro */
#notas-root.nv-app .notas-right-panel {
  background: var(--bg-0) !important;
  border-left: 1px solid var(--border-subtle) !important;
}
/* A "barra cinza": a borda da toolbar era cinza 50%; no protótipo é
   branco 6%, quase invisível — a barra some no fundo. */
#notas-root.nv-app .notas-editor-toolbar {
  border: 1px solid var(--border-subtle) !important;
}
/* Chips: no protótipo o engine ativo é CINZA com texto branco, e quem
   ganha o verde é a aba do painel (Outline/Backlinks/Tags). Estava trocado. */
#notas-root.nv-app .notas-editor-engine-btn.is-active {
  background: var(--bg-3) !important;
  color: var(--text-1) !important;
}
#notas-root.nv-app .notas-editor-engine {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-subtle) !important;
}
#notas-root.nv-app .notas-right-tab {
  background: var(--bg-1) !important;
  border: 1px solid transparent !important;
  color: var(--text-3) !important;
}
#notas-root.nv-app .notas-right-tab.is-active {
  background: var(--accent-soft) !important;
  border-color: color-mix(in oklab, var(--accent) 42%, transparent) !important;
  color: var(--accent) !important;
}

#notas-root.nv-app {
  --notas-font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --notas-doc-size: 17px;
  --notas-doc-width: 720px;
  --notas-doc-font: var(--notas-font-serif);

  /* tinta + superfície (default = escuro, herda o tema do app) */
  --notas-ink-1: var(--text-1);
  --notas-ink-2: var(--text-2);
  --notas-ink-3: var(--text-3);
  --notas-ink-rule: var(--border-subtle);
  --notas-ink-link: var(--accent);
  --notas-sheet-bg: transparent;
  --notas-sheet-pad: 32px 56px 80px;
  --notas-sheet-radius: 0px;
  --notas-sheet-shadow: none;
  --notas-sheet-border: transparent;
  --notas-code-bg: var(--bg-2);
}
#notas-root.nv-app[data-doc-font="sans"] { --notas-doc-font: var(--font-display); }

#notas-root.nv-app[data-surface="sepia"] {
  --notas-ink-1: oklch(0.27 0.02 60);
  --notas-ink-2: oklch(0.40 0.02 60);
  --notas-ink-3: oklch(0.52 0.02 60);
  --notas-ink-rule: oklch(0.86 0.02 85);
  --notas-ink-link: oklch(0.48 0.14 152);
  --notas-sheet-bg: oklch(0.958 0.017 85);
  --notas-sheet-pad: 52px 56px 72px;
  --notas-sheet-radius: 14px;
  --notas-sheet-shadow: 0 18px 50px oklch(0 0 0 / 0.45);
  --notas-sheet-border: oklch(0.88 0.02 85);
  --notas-code-bg: oklch(0.93 0.015 85);
}
#notas-root.nv-app[data-surface="white"] {
  --notas-ink-1: oklch(0.22 0.005 250);
  --notas-ink-2: oklch(0.36 0.006 250);
  --notas-ink-3: oklch(0.50 0.006 250);
  --notas-ink-rule: oklch(0.90 0.004 250);
  --notas-ink-link: oklch(0.50 0.14 152);
  --notas-sheet-bg: oklch(1 0 0);
  --notas-sheet-pad: 52px 56px 72px;
  --notas-sheet-radius: 14px;
  --notas-sheet-shadow: 0 18px 50px oklch(0 0 0 / 0.5);
  --notas-sheet-border: oklch(0.90 0.004 250);
  --notas-code-bg: oklch(0.96 0.002 250);
}

/* --- A RAIZ DO "BLOCO DE LUZ": os containers do editor vinham brancos do
       CSS legado (--gpsn-bg-*), independentemente do tema. Agora o palco é
       sempre escuro e só a FOLHA muda de cor conforme a preferência. --- */
#notas-root.nv-app .notas-content,
#notas-root.nv-app .notas-editor-shell,
#notas-root.nv-app .notas-editor-frame,
#notas-root.nv-app .notas-editor-body,
#notas-root.nv-app .notas-editor-head,
#notas-root.nv-app .notas-editor-statusbar,
#notas-root.nv-app .notas-tabs-bar {
  background: var(--bg-0) !important;
}
#notas-root.nv-app .notas-editor-toolbar,
#notas-root.nv-app .notas-find-bar {
  background: var(--bg-1) !important;
  border-color: var(--border-subtle) !important;
}
/* A find bar nasce com [hidden], mas o display:flex das regras de layout
   vencia o atributo — resultado: buscar/substituir ficava SEMPRE aberto,
   roubando duas linhas do topo do editor. Só aparece no Ctrl+F. */
#notas-root.nv-app .notas-find-bar[hidden],
#notas-root.nv-app .notas-find-row[hidden] { display: none !important; }

/* --- Título da nota: era 14px (parecia migalha de pão). Vira o título
       grande e serifado do documento, com a pasta discreta acima. --- */
#notas-root.nv-app .notas-editor-breadcrumb {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 1px !important;
  min-width: 0;
}
#notas-root.nv-app .notas-editor-sep { display: none !important; }
#notas-root.nv-app .notas-editor-breadcrumb > span:first-child {
  font-size: 11.5px !important;
  color: var(--text-4) !important;
  letter-spacing: .02em;
}
#notas-root.nv-app .notas-editor-title {
  font: 700 26px/1.25 var(--notas-font-serif) !important;
  letter-spacing: -0.015em !important;
  color: var(--text-1) !important;
  -webkit-text-fill-color: var(--text-1) !important; /* mantém o fix do flat.css */
  margin: 0 !important;
  /* A regra antiga usa `flex: 1 1 0` — pensada pro breadcrumb em LINHA.
     Com o breadcrumb em coluna isso vira flex-basis 0 na ALTURA e o
     título colapsava pra 4px (invisível), apesar dos 26px de fonte. */
  flex: 0 0 auto !important;
  width: 100%;
  padding: 0 !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#notas-root.nv-app .notas-editor-head { align-items: flex-start !important; }
#notas-root.nv-app .notas-editor-actions { align-items: center; }
/* Abas: o legado pintava a aba ativa de branco (fazia sentido no editor
   claro); agora a ativa é a que "acende" contra o palco escuro. */
#notas-root.nv-app .notas-tab {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--text-3) !important;
}
#notas-root.nv-app .notas-tab:hover { background: var(--bg-1) !important; color: var(--text-2) !important; }
#notas-root.nv-app .notas-tab.is-active {
  background: var(--bg-2) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-1) !important;
}
#notas-root.nv-app .notas-tab-title { color: inherit !important; }
#notas-root.nv-app .notas-tab-dot { background: var(--text-4) !important; }
#notas-root.nv-app .notas-tab.is-active .notas-tab-dot { background: var(--accent) !important; }
#notas-root.nv-app .notas-find-input {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-1) !important;
}
#notas-root.nv-app .notas-find-input::placeholder { color: var(--text-4) !important; }
#notas-root.nv-app .notas-find-count { color: var(--text-3) !important; font-family: var(--font-mono); }
#notas-root.nv-app :is(.notas-find-nav, .notas-find-toggle-replace, .notas-find-close, .notas-find-btn) {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-2) !important;
}
#notas-root.nv-app :is(.notas-find-nav, .notas-find-toggle-replace, .notas-find-close, .notas-find-btn):hover {
  background: var(--bg-3) !important; color: var(--text-1) !important;
}
#notas-root.nv-app .notas-find-btn--primary {
  background: var(--accent) !important; border-color: transparent !important;
  color: oklch(0.17 0.03 152) !important; font-weight: 600;
}

/* --- A folha: largura, respiro e (nos modos claros) papel de verdade --- */
#notas-root.nv-app[data-surface] :is(
  .notas-editor-wysiwyg, .notas-editor-preview, .gpsn-preview
) {
  max-width: var(--notas-doc-width) !important;
  margin: 0 auto !important;
  background: var(--notas-sheet-bg) !important;
  padding: var(--notas-sheet-pad) !important;
  border-radius: var(--notas-sheet-radius) !important;
  box-shadow: var(--notas-sheet-shadow) !important;
  border: 1px solid var(--notas-sheet-border) !important;
  font-family: var(--notas-doc-font) !important;
  font-size: var(--notas-doc-size) !important;
  line-height: 1.72 !important;
  color: var(--notas-ink-1) !important;
  transition: background .18s ease, padding .18s ease, max-width .18s ease;
}
/* respiro em volta da folha nos modos claros (senão cola nas bordas) */
#notas-root.nv-app[data-surface="sepia"] .notas-editor-body,
#notas-root.nv-app[data-surface="white"] .notas-editor-body { padding: 18px 16px 28px; }
#notas-root.nv-app[data-surface] .notas-editor-wysiwyg { caret-color: var(--notas-ink-1) !important; }

/* --- Hierarquia: tudo escala com --notas-doc-size e usa a tinta certa --- */
#notas-root.nv-app[data-surface] :is(.notas-editor-wysiwyg, .notas-editor-preview, .gpsn-preview) :is(h1,h2,h3,h4,h5,h6) {
  font-family: var(--notas-doc-font) !important;
  color: var(--notas-ink-1) !important;
}
#notas-root.nv-app[data-surface] :is(.notas-editor-wysiwyg, .notas-editor-preview, .gpsn-preview) h1 { font-size: calc(var(--notas-doc-size) * 1.85) !important; }
#notas-root.nv-app[data-surface] :is(.notas-editor-wysiwyg, .notas-editor-preview, .gpsn-preview) h2 { font-size: calc(var(--notas-doc-size) * 1.42) !important; }
#notas-root.nv-app[data-surface] :is(.notas-editor-wysiwyg, .notas-editor-preview, .gpsn-preview) h3 { font-size: calc(var(--notas-doc-size) * 1.14) !important; }
#notas-root.nv-app[data-surface] :is(.notas-editor-wysiwyg, .notas-editor-preview, .gpsn-preview) :is(p,li,td,th,blockquote) {
  color: var(--notas-ink-2) !important;
}
#notas-root.nv-app[data-surface] :is(.notas-editor-wysiwyg, .notas-editor-preview, .gpsn-preview) :is(strong,b) { color: var(--notas-ink-1) !important; }
#notas-root.nv-app[data-surface] :is(.notas-editor-wysiwyg, .notas-editor-preview, .gpsn-preview) a { color: var(--notas-ink-link) !important; }
#notas-root.nv-app[data-surface] :is(.notas-editor-wysiwyg, .notas-editor-preview, .gpsn-preview) hr { border-color: var(--notas-ink-rule) !important; }

/* --- Blocos ricos: código, tabela, citação (paravam brancos nos 3 modos) --- */
#notas-root.nv-app[data-surface] :is(.notas-editor-wysiwyg, .notas-editor-preview, .gpsn-preview) :is(pre, code) {
  background: var(--notas-code-bg) !important;
  color: var(--notas-ink-1) !important;
  border-color: var(--notas-ink-rule) !important;
  font-family: var(--font-mono) !important;
}
#notas-root.nv-app[data-surface] :is(.notas-editor-wysiwyg, .notas-editor-preview, .gpsn-preview) :is(th, td) {
  border-color: var(--notas-ink-rule) !important;
}
#notas-root.nv-app[data-surface] :is(.notas-editor-wysiwyg, .notas-editor-preview, .gpsn-preview) th {
  background: var(--notas-code-bg) !important;
  color: var(--notas-ink-1) !important;
}
#notas-root.nv-app[data-surface] :is(.notas-editor-wysiwyg, .notas-editor-preview, .gpsn-preview) blockquote {
  border-left: 3px solid var(--accent) !important;
  background: color-mix(in oklab, var(--accent) 8%, transparent) !important;
  color: var(--notas-ink-2) !important;
}
/* nos modos claros a seleção precisa contrastar com papel, não com o dark */
#notas-root.nv-app[data-surface="sepia"] .notas-editor-wysiwyg ::selection,
#notas-root.nv-app[data-surface="white"] .notas-editor-wysiwyg ::selection {
  background: color-mix(in oklab, var(--accent) 28%, transparent) !important;
  color: var(--notas-ink-1) !important;
}

/* ============ Popover "Aa" — Aparência da folha ============ */
#notas-root.nv-app .notas-appearance-wrap { position: relative; display: inline-flex; }
/* O botão precisa ANUNCIAR o que faz: "Aa" sozinho no meio de 8 ícones
   passava batido. A faixinha embaixo mostra a cor da folha ATUAL (mesmo
   padrão do seletor de cor do texto), então lê-se como controle visual. */
#notas-root.nv-app .notas-aa-btn {
  width: auto !important; min-width: 34px; padding: 0 8px !important;
  flex-direction: column; gap: 2px;
}
#notas-root.nv-app .notas-aa-glyph { font: 700 13px/1 var(--notas-font-serif); }
#notas-root.nv-app .notas-aa-swatch {
  display: block; width: 16px; height: 3px; border-radius: 2px;
  border: 1px solid oklch(1 0 0 / 0.18);
  background: var(--bg-0);
}
#notas-root.nv-app[data-surface="sepia"] .notas-aa-swatch { background: oklch(0.958 0.017 85); border-color: oklch(0.88 0.02 85); }
#notas-root.nv-app[data-surface="white"] .notas-aa-swatch { background: oklch(1 0 0); border-color: oklch(0.85 0.004 250); }
#notas-root.nv-app .notas-aa-btn:hover { border-color: var(--accent) !important; }
#notas-root.nv-app .notas-aa-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 290px;
  background: var(--bg-1); border: 1px solid var(--border-soft); border-radius: var(--r-lg);
  box-shadow: 0 22px 60px oklch(0 0 0 / 0.55); padding: 14px; text-align: left;
}
#notas-root.nv-app .notas-aa-pop[hidden] { display: none; }
#notas-root.nv-app .notas-aa-title { margin: 0 0 3px; font: 700 13px var(--font-sans); color: var(--text-1); }
#notas-root.nv-app .notas-aa-sub { margin: 0 0 12px; font-size: 11.5px; color: var(--text-4); }
#notas-root.nv-app .notas-aa-lbl {
  color: var(--text-3); font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; margin: 14px 0 8px;
}
#notas-root.nv-app .notas-aa-surfs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#notas-root.nv-app .notas-aa-surf {
  display: block !important; width: 100%;
  border: 1.5px solid var(--border-subtle); border-radius: var(--r-md); padding: 7px; cursor: pointer;
  background: var(--bg-2); text-align: center; transition: .14s;
}
#notas-root.nv-app .notas-aa-surf:hover { border-color: var(--border-strong); }
#notas-root.nv-app .notas-aa-surf.is-active { border-color: var(--accent); background: var(--accent-soft); }
#notas-root.nv-app .notas-aa-surf-prev {
  width: 100%; height: 40px; border-radius: 7px; margin-bottom: 6px;
  display: flex !important; flex-direction: column !important;
  justify-content: center; gap: 4px; padding: 0 8px; border: 1px solid oklch(1 0 0 / .05);
}
#notas-root.nv-app .notas-aa-surf-prev i { display: block; height: 3px; border-radius: 2px; }
#notas-root.nv-app .notas-aa-surf-prev i:first-child { width: 70%; }
#notas-root.nv-app .notas-aa-surf-prev i:last-child { width: 82%; }
#notas-root.nv-app .notas-aa-surf-prev[data-s="dark"] { background: var(--bg-0, oklch(0.15 0.008 250)); }
#notas-root.nv-app .notas-aa-surf-prev[data-s="dark"] i { background: oklch(1 0 0 / .30); }
#notas-root.nv-app .notas-aa-surf-prev[data-s="dark"] i:first-child { background: oklch(1 0 0 / .55); }
#notas-root.nv-app .notas-aa-surf-prev[data-s="sepia"] { background: oklch(0.958 0.017 85); }
#notas-root.nv-app .notas-aa-surf-prev[data-s="sepia"] i { background: oklch(0.55 0.02 60 / .45); }
#notas-root.nv-app .notas-aa-surf-prev[data-s="sepia"] i:first-child { background: oklch(0.35 0.02 60 / .8); }
#notas-root.nv-app .notas-aa-surf-prev[data-s="white"] { background: oklch(1 0 0); }
#notas-root.nv-app .notas-aa-surf-prev[data-s="white"] i { background: oklch(0.45 0.005 250 / .45); }
#notas-root.nv-app .notas-aa-surf-prev[data-s="white"] i:first-child { background: oklch(0.25 0.005 250 / .8); }
#notas-root.nv-app .notas-aa-surf-name { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-3); }
#notas-root.nv-app .notas-aa-surf.is-active .notas-aa-surf-name { color: var(--accent); }
#notas-root.nv-app .notas-aa-row { display: flex; gap: 7px; }
#notas-root.nv-app .notas-aa-row--4 { gap: 5px; }
#notas-root.nv-app .notas-aa-row--4 .notas-aa-opt { font-size: 11px; padding: 0 2px; }
#notas-root.nv-app .notas-aa-opt {
  flex: 1; height: 32px; border-radius: 8px; border: 1px solid var(--border-subtle);
  background: var(--bg-2); color: var(--text-3); font: 600 12px var(--font-sans);
  cursor: pointer; display: grid; place-items: center; transition: .14s;
}
#notas-root.nv-app .notas-aa-opt:hover { color: var(--text-1); border-color: var(--border-soft); }
#notas-root.nv-app .notas-aa-opt.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
#notas-root.nv-app .notas-aa-opt--serif { font-family: var(--notas-font-serif); font-size: 14px; }
#notas-root.nv-app .notas-aa-opt--a1 { font-size: 11px; }
#notas-root.nv-app .notas-aa-opt--a2 { font-size: 13px; }
#notas-root.nv-app .notas-aa-opt--a3 { font-size: 15px; }
#notas-root.nv-app .notas-aa-saved {
  margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--border-subtle);
  color: var(--text-4); font-size: 11px;
}

/* ============================================================
   NOTAS — LEGIBILIDADE DO MARCA-TEXTO
   As 8 cores de destaque são pastéis CLAROS (#fef9c3, #dcfce7…),
   pensadas pra texto preto em papel branco. No tema escuro o texto
   é branco — e sumia dentro do próprio destaque. Aqui: sempre que
   houver uma dessas cores de fundo, a tinta vira escura.
   (Cobre hex e rgb: o execCommand grava de um jeito, o markup salvo
   pode vir do outro.)
   ============================================================ */
#notas-root.nv-app :is(.notas-editor-wysiwyg, .notas-editor-preview, .gpsn-preview, .gpsn-editor) :is(
  [style*="#fef9c3" i], [style*="254, 249, 195"],
  [style*="#dcfce7" i], [style*="220, 252, 231"],
  [style*="#dbeafe" i], [style*="219, 234, 254"],
  [style*="#fce7f3" i], [style*="252, 231, 243"],
  [style*="#fed7aa" i], [style*="254, 215, 170"],
  [style*="#fee2e2" i], [style*="254, 226, 226"],
  [style*="#e9d5ff" i], [style*="233, 213, 255"],
  [style*="#cffafe" i], [style*="207, 250, 254"],
  mark, .notas-hl
) {
  color: oklch(0.22 0.012 250) !important;
  -webkit-text-fill-color: oklch(0.22 0.012 250) !important;
  border-radius: 3px;
  padding: 0 2px;
}
/* ...e o que estiver DENTRO do destaque (negrito, itálico, link) também */
#notas-root.nv-app :is(.notas-editor-wysiwyg, .notas-editor-preview, .gpsn-preview, .gpsn-editor) :is(
  [style*="#fef9c3" i], [style*="254, 249, 195"],
  [style*="#dcfce7" i], [style*="220, 252, 231"],
  [style*="#dbeafe" i], [style*="219, 234, 254"],
  [style*="#fce7f3" i], [style*="252, 231, 243"],
  [style*="#fed7aa" i], [style*="254, 215, 170"],
  [style*="#fee2e2" i], [style*="254, 226, 226"],
  [style*="#e9d5ff" i], [style*="233, 213, 255"],
  [style*="#cffafe" i], [style*="207, 250, 254"],
  mark
) * {
  color: oklch(0.22 0.012 250) !important;
  -webkit-text-fill-color: oklch(0.22 0.012 250) !important;
}

/* ---- Anel da meta de escrita (era uma barrinha) ---- */
#notas-root.nv-app .notas-editor-goal {
  display: inline-flex !important; align-items: center; gap: 9px;
  background: transparent !important; border: 0 !important; cursor: pointer;
}
#notas-root.nv-app .notas-editor-goal-ring {
  --p: 0;
  width: 26px; height: 26px; border-radius: 50%; position: relative;
  display: grid; place-items: center; flex: 0 0 auto;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--bg-3) 0);
  transition: background .3s ease;
}
#notas-root.nv-app .notas-editor-goal-ring::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--bg-0);
}
#notas-root.nv-app .notas-editor-goal-ring b {
  position: relative; font: 700 8.5px var(--font-mono); color: var(--accent);
}
#notas-root.nv-app .notas-editor-goal-text { color: var(--text-3); font-size: 11.5px; }
#notas-root.nv-app .notas-editor-goal-text b { color: var(--text-2); font-family: var(--font-mono); font-weight: 600; }
#notas-root.nv-app .notas-editor-goal.is-met .notas-editor-goal-ring b { color: var(--accent); }

/* ---- Backlink com o trecho que cita esta nota ---- */
#notas-root.nv-app .notas-backlinks-item {
  display: block !important; padding: 10px 12px !important; border-radius: var(--r-md);
  background: var(--bg-1); border: 1px solid var(--border-subtle); margin-bottom: 8px;
  cursor: pointer; transition: .14s;
}
#notas-root.nv-app .notas-backlinks-item:hover {
  background: var(--bg-2); border-color: color-mix(in oklab, var(--accent) 42%, transparent);
}
#notas-root.nv-app .notas-backlinks-title { display: block; color: var(--text-1); font-weight: 600; font-size: 13px; }
#notas-root.nv-app .notas-backlinks-meta { display: block; color: var(--text-4); font-size: 10.5px; font-family: var(--font-mono); margin-top: 1px; }
#notas-root.nv-app .notas-backlinks-quote {
  display: block; margin-top: 6px; color: var(--text-3); font-size: 11.5px; line-height: 1.45;
}
#notas-root.nv-app .notas-backlinks-quote mark {
  background: var(--accent-soft); color: var(--accent); padding: 0 3px; border-radius: 3px;
}

/* Backlinks do painel direito (lista própria, classes -panel-*) */
#notas-root.nv-app .notas-backlinks-panel { list-style: none; margin: 0; padding: 0; }
#notas-root.nv-app .notas-backlinks-panel-item {
  padding: 10px 12px; border-radius: var(--r-md); background: var(--bg-1);
  border: 1px solid var(--border-subtle); margin-bottom: 8px; cursor: pointer; transition: .14s;
}
#notas-root.nv-app .notas-backlinks-panel-item:hover {
  background: var(--bg-2); border-color: color-mix(in oklab, var(--accent) 42%, transparent);
}
#notas-root.nv-app .notas-backlinks-panel-title { color: var(--text-1); font-weight: 600; font-size: 13px; }
#notas-root.nv-app .notas-backlinks-panel-folder {
  color: var(--text-4); font-size: 10.5px; font-family: var(--font-mono); margin-top: 1px;
}
#notas-root.nv-app .notas-backlinks-panel-quote {
  margin-top: 6px; color: var(--text-3); font-size: 11.5px; line-height: 1.45;
}
#notas-root.nv-app .notas-backlinks-panel-quote mark {
  background: var(--accent-soft); color: var(--accent); padding: 0 3px; border-radius: 3px;
}

/* ---- Card "Abrir nota do dia" (rodapé do painel direito) ---- */
#notas-root.nv-app .notas-daily-card {
  display: flex; align-items: center; gap: 11px; width: calc(100% - 24px);
  margin: 0 12px 12px; padding: 11px 13px; cursor: pointer; text-align: left;
  border-radius: var(--r-md);
  border: 1px dashed color-mix(in oklab, var(--accent) 42%, transparent);
  background: var(--accent-soft); color: var(--text-2);
  font-family: var(--font-sans); transition: .15s;
}
#notas-root.nv-app .notas-daily-card:hover { background: color-mix(in oklab, var(--accent) 20%, transparent); }
#notas-root.nv-app .notas-daily-ic { font-size: 17px; flex: 0 0 auto; }
#notas-root.nv-app .notas-daily-txt { font-size: 11.5px; line-height: 1.4; }
#notas-root.nv-app .notas-daily-txt b { display: block; color: var(--text-1); font-size: 12.5px; font-weight: 600; }
#notas-root.nv-app .notas-right-panel { display: flex; flex-direction: column; }
#notas-root.nv-app .notas-right-body { flex: 1; min-height: 0; overflow-y: auto; }

/* ============================================================
   NOTAS — item do vault com prévia, tags e "quando"
   Sem isso a lista é uma árvore de arquivos; com isso vira uma
   lista de NOTAS — dá pra reconhecer o conteúdo sem abrir.
   ============================================================ */
#notas-root.nv-app .notas-item.has-snippet {
  display: block !important;
  padding-top: 7px !important;
  padding-bottom: 8px !important;
  height: auto !important;
}
#notas-root.nv-app .notas-item-head {
  display: flex; align-items: center; gap: 7px; min-width: 0;
}
#notas-root.nv-app .notas-item.has-snippet .notas-item-title {
  font-weight: 600; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#notas-root.nv-app .notas-item-snippet {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-top: 3px; padding-left: 23px;
  color: var(--text-4); font-size: 11.5px; line-height: 1.45;
}
#notas-root.nv-app .notas-item-meta {
  display: flex; align-items: center; gap: 6px; margin-top: 5px; padding-left: 23px;
}
#notas-root.nv-app .notas-item-tag {
  font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 999px;
  color: var(--accent); background: var(--accent-soft); white-space: nowrap;
}
#notas-root.nv-app .notas-item-when {
  margin-left: auto; color: var(--text-4); font-size: 10.5px; font-family: var(--font-mono);
}
#notas-root.nv-app .notas-item.is-active .notas-item-snippet { color: var(--text-3); }

/* Rodapé do vault: sequência de escrita + total (o gancho de hábito) */
#notas-root.nv-app .notas-vault-foot {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-top: 1px solid var(--border-subtle);
}
#notas-root.nv-app .notas-streak {
  display: flex; align-items: center; gap: 7px;
  font: 600 11.5px var(--font-sans); color: var(--text-2);
}
#notas-root.nv-app .notas-streak-fire { filter: drop-shadow(0 0 6px oklch(0.80 0.14 75 / .5)); }
#notas-root.nv-app .notas-streak--off { color: var(--text-4); font-weight: 500; }
#notas-root.nv-app .notas-vault-total {
  margin-left: auto; color: var(--text-4); font-size: 11px; font-family: var(--font-mono);
}

/* ============================================================
   NOTAS — Virar flashcard (botão na barra de seleção + modal)
   ============================================================ */
/* A barra de seleção estava larga e poluída (alinhamentos, indentação,
   H1/H2/H3, setas…) — coisas que já existem na toolbar fixa. Ficou só o
   que se usa COM texto selecionado, num formato compacto. */
.notas-floating-toolbar {
  padding: 5px !important; gap: 1px !important;
  background: var(--bg-float, oklch(0.235 0.009 250)) !important;
  border: 1px solid var(--border-soft, oklch(1 0 0 / 0.11)) !important;
  border-radius: 11px !important;
  box-shadow: 0 14px 34px oklch(0 0 0 / 0.5) !important;
}
.notas-floating-toolbar .notas-ft-btn {
  width: 30px !important; height: 30px !important;
  border-radius: 7px !important; border: 0 !important;
  background: transparent !important; color: var(--text-2) !important;
  font-size: 13px !important; display: inline-flex !important;
  align-items: center; justify-content: center;
}
.notas-floating-toolbar .notas-ft-btn:hover {
  background: var(--bg-3, oklch(0.255 0.009 250)) !important;
  color: var(--text-1) !important;
}
.notas-floating-toolbar .notas-ft-btn--text { width: auto !important; padding: 0 8px !important; font-size: 11.5px !important; font-weight: 600; }
.notas-floating-toolbar .notas-ft-sep {
  width: 1px !important; height: 18px !important; margin: 0 4px !important;
  background: var(--border-soft, oklch(1 0 0 / 0.11)) !important;
}
.notas-ft-hl-chip {
  display: inline-grid; place-items: center; width: 19px; height: 19px;
  border-radius: 4px; background: #fef9c3; color: #1a1a1a;
  font: 700 11px var(--font-sans);
}
/* Seletor com o elemento (button) pra ganhar da regra genérica do
   .notas-ft-btn, e cores literais: a barra é portalada no <body>, então
   nem sempre herda os tokens do módulo. */
.notas-floating-toolbar button.notas-ft-btn--fcard {
  width: auto !important; height: 30px !important; padding: 0 12px !important; gap: 6px;
  display: inline-flex !important; align-items: center; justify-content: center;
  background: oklch(0.74 0.16 152) !important;
  color: oklch(0.17 0.03 152) !important;
  -webkit-text-fill-color: oklch(0.17 0.03 152) !important;
  font: 600 12px var(--font-sans) !important; border-radius: 7px !important;
  white-space: nowrap;
}
.notas-floating-toolbar button.notas-ft-btn--fcard:hover { background: oklch(0.80 0.15 152) !important; }
.notas-ft-fcard-ic { font-size: 13px; }

.notas-fc { max-width: 520px; }
.notas-fc-src {
  color: var(--text-3); font-size: 12px; line-height: 1.5; font-style: italic;
  background: var(--bg-2); border-left: 2px solid var(--accent);
  border-radius: 0 8px 8px 0; padding: 9px 12px; margin-bottom: 14px;
}
.notas-fc-ta {
  width: 100%; resize: vertical; background: var(--bg-2); color: var(--text-1);
  border: 1px solid var(--border-subtle); border-radius: 9px; padding: 10px 12px;
  font: 400 13.5px/1.5 var(--font-sans); outline: none;
}
.notas-fc-ta:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.notas-fc-ta--back { border-left: 2px solid var(--accent); }
.notas-fc-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.notas-fc-chip {
  font: 500 11.5px var(--font-sans); color: var(--text-3); background: var(--bg-2);
  border: 1px solid var(--border-subtle); border-radius: 999px; padding: 4px 11px;
}
.notas-fc-chip b { color: var(--text-1); font-weight: 600; }
.notas-fc-link {
  margin-top: 12px; padding: 9px 12px; border-radius: 9px; font-size: 11.5px; color: var(--text-3);
  background: var(--accent-soft); border: 1px dashed var(--accent-line, oklch(0.74 0.16 152 / .42));
}

/* ============================================================
   NOTAS — Grafo de conexões (overlay full-screen, canvas 2D)
   ============================================================ */
.notas-graph-overlay {
  position: fixed; inset: 0; z-index: 100010; display: flex; flex-direction: column;
  background: radial-gradient(900px 520px at 50% 40%, oklch(0.74 0.16 152 / 0.05), transparent 70%),
              oklch(0.145 0.008 250);
}
.notas-graph-head {
  display: flex; align-items: center; gap: 11px; padding: 13px 18px; flex: 0 0 auto; flex-wrap: wrap;
  border-bottom: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, var(--bg-1), oklch(0.145 0.008 250));
}
.notas-graph-title { font: 700 15.5px var(--font-sans); color: var(--text-1); letter-spacing: -0.01em; }
.notas-graph-sub { color: var(--text-4); font-size: 12px; }
.notas-graph-sp { flex: 1; }
.notas-graph-chip {
  font: 600 12px var(--font-sans); color: var(--text-3); background: var(--bg-2);
  border: 1px solid var(--border-subtle); border-radius: 999px; padding: 6px 13px; cursor: pointer; transition: .14s;
}
.notas-graph-chip:hover { color: var(--text-1); border-color: var(--border-soft); }
.notas-graph-chip.is-active { color: var(--accent); border-color: var(--accent-line, oklch(0.74 0.16 152 / .42)); background: var(--accent-soft); }
.notas-graph-n { font-family: var(--font-mono); font-size: 11px; opacity: .7; }
.notas-graph-close {
  width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border-subtle);
  background: var(--bg-2); color: var(--text-3); font-size: 17px; line-height: 1; cursor: pointer;
}
.notas-graph-close:hover { color: var(--text-1); border-color: var(--border-soft); }
.notas-graph-stage { flex: 1; position: relative; min-height: 0; }
.notas-graph-canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.notas-graph-canvas.is-grabbing { cursor: grabbing; }
.notas-graph-canvas.is-onnode { cursor: pointer; }
.notas-graph-panel {
  position: absolute; top: 16px; right: 16px; width: 250px; padding: 14px;
  background: oklch(0.185 0.008 250 / .94); border: 1px solid var(--border-soft);
  border-radius: 14px; backdrop-filter: blur(8px); box-shadow: 0 18px 46px oklch(0 0 0 / .5);
}
.notas-graph-panel[hidden] { display: none; }
.notas-graph-pt { display: block; font: 700 14px var(--font-sans); color: var(--text-1); line-height: 1.3; }
.notas-graph-pf { color: var(--text-4); font: 400 11px var(--font-mono); margin-bottom: 9px; }
.notas-graph-prow {
  display: flex; align-items: center; justify-content: space-between; padding: 6px 0;
  border-top: 1px solid var(--border-subtle); color: var(--text-3); font-size: 12px;
}
.notas-graph-prow b { color: var(--text-1); font-family: var(--font-mono); }
.notas-graph-plist { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border-subtle); }
.notas-graph-lk {
  display: flex; align-items: center; gap: 7px; padding: 5px 7px; border-radius: 7px;
  color: var(--text-2); font-size: 12px; cursor: pointer;
}
.notas-graph-lk:hover { background: var(--bg-2); color: var(--text-1); }
.notas-graph-lk i { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.notas-graph-open {
  margin-top: 11px; width: 100%; height: 32px; border-radius: 9px; border: 0;
  background: var(--accent); color: oklch(0.18 0.03 152); font: 600 12.5px var(--font-sans); cursor: pointer;
}
.notas-graph-legend {
  position: absolute; left: 16px; bottom: 16px; padding: 11px 13px;
  background: oklch(0.185 0.008 250 / .92); border: 1px solid var(--border-subtle);
  border-radius: 11px; font-size: 11.5px; color: var(--text-3); backdrop-filter: blur(6px);
}
.notas-graph-legend div { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.notas-graph-legend i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.notas-graph-hint {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  color: var(--text-4); font-size: 11.5px; background: oklch(0.185 0.008 250 / .92);
  border: 1px solid var(--border-subtle); border-radius: 999px; padding: 6px 14px;
  backdrop-filter: blur(6px); white-space: nowrap;
}
.notas-graph-hint b { color: var(--text-2); }
@media (max-width: 760px) { .notas-graph-panel, .notas-graph-hint { display: none; } }

/* ============================================================
   NOTAS — Templates de nota (gradinha no modal "Nova nota")
   O modal é portalado no <body>, então escopo pela classe.
   ============================================================ */
.notas-modal-field--tpl { margin-top: 4px; }
.notas-tpl-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 2px;
}
.notas-tpl {
  display: block; text-align: left; cursor: pointer; padding: 10px;
  background: var(--bg-2); border: 1.5px solid var(--border-subtle);
  border-radius: var(--r-md); transition: .14s; font-family: var(--font-sans);
}
.notas-tpl:hover { border-color: var(--border-strong); background: var(--bg-3); }
.notas-tpl.is-active { border-color: var(--accent); background: var(--accent-soft); }
.notas-tpl-ic {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  font-size: 14px; margin-bottom: 7px;
}
.notas-tpl-name { display: block; font: 700 12.5px var(--font-sans); color: var(--text-1); }
.notas-tpl-desc { display: block; font-size: 10.5px; color: var(--text-4); line-height: 1.35; margin-top: 2px; }
.notas-tpl.is-active .notas-tpl-name { color: var(--accent); }
@media (max-width: 560px) { .notas-tpl-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   NOTAS — telas secundárias (popups portalados no <body>)
   ------------------------------------------------------------
   Estes componentes ficam FORA de #notas-root (position:fixed),
   então são escopados pela própria classe. Dois problemas:
   1) o autocomplete de [[wikilink]] era BRANCO puro (flat.css);
   2) vários usavam var(--border), token que NÃO existe — caía em
      currentColor, pintando bordas com a cor do texto.
   ============================================================ */

/* Autocomplete do [[ — aparece a cada link; era o pior ofensor */
.notas-ac-dropdown {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-soft, oklch(1 0 0 / 0.11)) !important;
  box-shadow: 0 16px 40px oklch(0 0 0 / 0.5) !important;
  color: var(--text-1);
}
.notas-ac-item {
  border-radius: 7px;
  color: var(--text-2);
  padding: 7px 9px;
}
.notas-ac-item:hover,
.notas-ac-item.is-selected,
.notas-ac-item.is-active {
  background: var(--accent-soft) !important;
  color: var(--text-1) !important;
}
.notas-ac-item-title,
.notas-ac-title { color: var(--text-1) !important; font-weight: 600; }
.notas-ac-item-folder,
.notas-ac-folder { color: var(--text-4) !important; font-family: var(--font-mono); font-size: 11px; }
.notas-ac-empty { color: var(--text-4) !important; }
.notas-ac-create { color: var(--accent) !important; font-weight: 600; }

/* Menu de exportar — era slate solto (#1f2937), fora do design system */
.notas-export-menu {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-soft, oklch(1 0 0 / 0.11)) !important;
  color: var(--text-2) !important;
  box-shadow: 0 16px 40px oklch(0 0 0 / 0.5) !important;
}
.notas-export-menu-item { color: var(--text-2) !important; border-radius: 7px; }
.notas-export-menu-item:hover { background: var(--bg-2) !important; color: var(--text-1) !important; }

/* Bordas que caíam em currentColor por causa do var(--border) inexistente */
.notas-emoji-picker,
.notas-ctx-menu,
.gpsn-lp-card { border-color: var(--border-soft, oklch(1 0 0 / 0.11)) !important; }
.notas-ctx-menu-item:hover { background: var(--bg-2) !important; color: var(--text-1) !important; }

/* ============================== TAILWIND NEUTRALIZER ============================== */
/* Mapeia utilitários Tailwind com cores hardcoded para os tokens do redesign,
   apenas dentro de containers .nv-app. Sem editar templates. */

.nv-app .text-cyan-300,
.nv-app .text-cyan-400,
.nv-app .text-blue-400,
.nv-app .text-emerald-400,
.nv-app .text-green-400 {
  color: var(--accent) !important;
}
.nv-app .text-yellow-400 {
  color: oklch(0.78 0.16 78) !important;
}
.nv-app .text-red-400 {
  color: oklch(0.68 0.18 27) !important;
}
.nv-app .text-gray-200,
.nv-app .text-gray-300 {
  color: var(--text-1) !important;
}
.nv-app .text-gray-400 {
  color: var(--text-2) !important;
}
.nv-app .text-gray-500 {
  color: var(--text-3) !important;
}
.nv-app .hover\:text-white:hover {
  color: var(--text-1) !important;
}
.nv-app .bg-gray-700,
.nv-app .bg-gray-800 {
  background-color: var(--bg-2) !important;
}
.nv-app .hover\:bg-gray-700:hover {
  background-color: var(--bg-2) !important;
}
.nv-app .bg-blue-500 {
  background-color: oklch(from var(--accent) l c h / 0.2) !important;
}
.nv-app .bg-green-500 {
  background-color: oklch(0.74 0.16 152 / 0.2) !important;
}
.nv-app .border-gray-500,
.nv-app .border-gray-600,
.nv-app .border-gray-700 {
  border-color: var(--border) !important;
}
.nv-app .divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--border) !important;
}

/* bg-opacity helpers comuns em modais legados */
.nv-app .bg-opacity-70 {
  --tw-bg-opacity: 0.5;
}
.nv-app .bg-black {
  background-color: oklch(0% 0 0) !important;
}

/* Module empty state (compartilhado) */
.nv-app .module-empty-state {
  text-align: center;
  padding: 32px 20px;
}
.nv-app .module-empty-icon {
  font-size: 32px;
  margin-bottom: 12px;
  color: var(--text-3);
}
.nv-app .module-empty-kicker {
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
  display: block;
}
.nv-app .module-empty-title {
  font: 600 16px/1.3 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--text-1);
  margin: 0 0 6px;
}
.nv-app .module-empty-copy {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
  margin: 0 auto 14px;
  max-width: 480px;
}
.nv-app .module-empty-signals {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}
.nv-app .module-empty-signal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  color: var(--text-2);
}

/* ============================== ACOMPANHAMENTO REFIT ============================== */
/* Hero + signals + tabs + content */

#module-acompanhamento.nv-app {
  font-family: var(--font-sans);
  color: var(--text-1);
}

/* ============================================================
   KPI cards do Desempenho — mesmo padrão dos KPIs de Progresso.
   Strip de cor categórica no topo, hierarquia limpa, sem ícone-caixa
   (que ficava vazio quando Lucide não carregava).
   ============================================================ */
#module-acompanhamento.nv-app .acomp-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1024px) {
  #module-acompanhamento.nv-app .acomp-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 540px) {
  #module-acompanhamento.nv-app .acomp-kpi-grid {
    grid-template-columns: 1fr;
  }
}

#module-acompanhamento.nv-app .acomp-kpi-card {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 16px 14px;
  display: flex;
  flex-direction: column;
  min-height: 110px;
  overflow: hidden;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
  --acomp-strip: var(--accent);
  --acomp-value-color: var(--text-1);
}
#module-acompanhamento.nv-app .acomp-kpi-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--acomp-strip);
}
@media (hover: hover) and (pointer: fine) {
  #module-acompanhamento.nv-app .acomp-kpi-card:hover {
    border-color: oklch(from var(--acomp-strip) l c h / 0.45);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px oklch(0% 0 0 / 0.08);
  }
}

/* Cores categóricas — diferentes mas relacionadas, pra escaneabilidade */
#module-acompanhamento.nv-app .acomp-kpi-card--sessoes      { --acomp-strip: oklch(0.72 0.12 240); }
#module-acompanhamento.nv-app .acomp-kpi-card--tempo        { --acomp-strip: oklch(0.74 0.16 152); }
#module-acompanhamento.nv-app .acomp-kpi-card--disciplinas  { --acomp-strip: oklch(0.76 0.13 200); }
#module-acompanhamento.nv-app .acomp-kpi-card--media        { --acomp-strip: oklch(0.78 0.15 75); }
#module-acompanhamento.nv-app .acomp-kpi-card--completed    { --acomp-strip: oklch(0.74 0.16 152); }
#module-acompanhamento.nv-app .acomp-kpi-card--in-progress  { --acomp-strip: oklch(0.78 0.15 75); }
#module-acompanhamento.nv-app .acomp-kpi-card--rate         { --acomp-strip: oklch(0.76 0.13 200); }
#module-acompanhamento.nv-app .acomp-kpi-card--avg-time     { --acomp-strip: oklch(0.62 0.04 250); }

#module-acompanhamento.nv-app .acomp-kpi-overline {
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 8px;
  display: block;
}
#module-acompanhamento.nv-app .acomp-kpi-value {
  font: 700 28px/1.05 var(--font-display);
  letter-spacing: -0.025em;
  color: var(--acomp-value-color);
  margin: 0 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-feature-settings: "tnum";
  flex-grow: 1;
}
/* Cor contextual do número (good/warn/bad). Aplicada no JS conforme threshold. */
#module-acompanhamento.nv-app .acomp-kpi-value.is-good   { --acomp-value-color: oklch(0.78 0.16 152); }
#module-acompanhamento.nv-app .acomp-kpi-value.is-warn   { --acomp-value-color: oklch(0.82 0.16 75); }
#module-acompanhamento.nv-app .acomp-kpi-value.is-bad    { --acomp-value-color: oklch(0.68 0.18 25); }
#module-acompanhamento.nv-app .acomp-kpi-value.is-muted  { --acomp-value-color: var(--text-3); }

#module-acompanhamento.nv-app .acomp-kpi-context {
  font: 500 11px/1.4 var(--font-sans);
  color: var(--text-3);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#module-acompanhamento.nv-app .analysis-hero {
  background:
    radial-gradient(60% 80% at 100% 0%, oklch(from var(--accent) l c h / 0.06), transparent 60%),
    var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 18px;
}
#module-acompanhamento.nv-app .analysis-kicker {
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
#module-acompanhamento.nv-app .analysis-page-title {
  font: 600 28px/1.15 var(--font-display);
  letter-spacing: -0.025em;
  color: var(--text-1);
  margin: 0 0 8px;
}
#module-acompanhamento.nv-app .analysis-hero-subtitle {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.55;
  margin: 0 0 14px;
  max-width: 720px;
}
#module-acompanhamento.nv-app .analysis-hero-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#module-acompanhamento.nv-app .analysis-signal-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-2);
}
#module-acompanhamento.nv-app .analysis-signal-chip--cyan {
  border-color: oklch(from var(--accent) l c h / 0.4);
  color: var(--accent);
}
#module-acompanhamento.nv-app .analysis-signal-chip--amber {
  border-color: oklch(0.78 0.16 78 / 0.4);
  color: oklch(0.78 0.16 78);
}

/* Tabs */
#module-acompanhamento.nv-app .analysis-tabs-shell {
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}
#module-acompanhamento.nv-app .analysis-tabs-shell::-webkit-scrollbar { display: none; }
#module-acompanhamento.nv-app .analysis-tabs {
  display: inline-flex;
  gap: 2px;
  white-space: nowrap;
}
#module-acompanhamento.nv-app .acompanhamento-tab {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  background: transparent;
  border: none;
  color: var(--text-3);
  font: 500 13px/1 var(--font-sans);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 140ms ease, border-color 140ms ease;
}
#module-acompanhamento.nv-app .acompanhamento-tab:hover {
  color: var(--text-1);
}
#module-acompanhamento.nv-app .acompanhamento-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
#module-acompanhamento.nv-app .acompanhamento-tab-content {
  display: none;
}
#module-acompanhamento.nv-app .acompanhamento-tab-content.active,
#module-acompanhamento.nv-app .acompanhamento-tab-content:not(.hidden) {
  display: block;
}

/* Inputs/Selects */
#module-acompanhamento.nv-app .input-form,
#module-acompanhamento.nv-app select,
#module-acompanhamento.nv-app input[type="text"],
#module-acompanhamento.nv-app input[type="date"] {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text-1);
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
#module-acompanhamento.nv-app .input-form:focus,
#module-acompanhamento.nv-app select:focus,
#module-acompanhamento.nv-app input:focus {
  border-color: var(--accent);
  background: var(--bg-1);
}

/* ============================================================
   Desempenho — "de-blue": alinha ao verde/neutro do sistema
   (Progresso/GPS). O flat.css e o CSS legado forçam azuis
   (--c-info #0066ff, blue/cyan/sky, blue-300 dos botões SRS) com
   !important — aqui o padrão verde volta a ganhar. Mesmo padrão de
   override genérico das utilities Tailwind já usado no GPS.
   Cores quentes (amber/orange/rose) e o verde ficam intactos.
   ============================================================ */
/* utilities Tailwind frias (blue/cyan/sky/indigo) → verde do sistema */
#module-acompanhamento.nv-app [class*="bg-blue-"],
#module-acompanhamento.nv-app [class*="bg-cyan-"],
#module-acompanhamento.nv-app [class*="bg-sky-"],
#module-acompanhamento.nv-app [class*="bg-indigo-"] {
  background-color: oklch(from var(--accent) l c h / 0.14) !important;
  /* a mesma classe `bg-*` às vezes carrega a borda fria no CSS legado */
  border-color: oklch(from var(--accent) l c h / 0.35) !important;
}
#module-acompanhamento.nv-app [class*="border-blue-"],
#module-acompanhamento.nv-app [class*="border-cyan-"],
#module-acompanhamento.nv-app [class*="border-sky-"],
#module-acompanhamento.nv-app [class*="border-indigo-"] {
  border-color: oklch(from var(--accent) l c h / 0.35) !important;
}
#module-acompanhamento.nv-app [class*="text-blue-"],
#module-acompanhamento.nv-app [class*="text-cyan-"],
#module-acompanhamento.nv-app [class*="text-sky-"],
#module-acompanhamento.nv-app [class*="text-indigo-"] {
  color: var(--accent) !important;
}
/* chip do hero + realces/botões antes em cyan/azul (não são utilities) */
#module-acompanhamento.nv-app .analysis-signal-chip--cyan {
  color: var(--accent) !important;
  border-color: oklch(from var(--accent) l c h / 0.35) !important;
  background: oklch(from var(--accent) l c h / 0.10) !important;
}
#module-acompanhamento.nv-app .analysis-topic-parent,
#module-acompanhamento.nv-app .analysis-action-pill--primary,
#module-acompanhamento.nv-app .analysis-mission-date-sub,
#module-acompanhamento.nv-app .srs-quick-action-btn {
  color: var(--accent) !important;
}
#module-acompanhamento.nv-app .kpi-card:has([class*="bg-blue-"]),
#module-acompanhamento.nv-app .kpi-card:has([class*="bg-cyan-"]),
#module-acompanhamento.nv-app .kpi-card:has([class*="bg-sky-"]) {
  border-left-color: var(--accent) !important;
}
/* aba ativa (legado usava azul-400) */
#module-acompanhamento.nv-app .acompanhamento-tab.active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}
/* thumb do slider de duração (SRS): gradiente azul → verde */
#module-acompanhamento.nv-app .srs-duration-slider::-webkit-slider-thumb {
  background: linear-gradient(135deg, oklch(0.80 0.17 152), var(--accent)) !important;
}
#module-acompanhamento.nv-app .srs-duration-slider::-moz-range-thumb {
  background: linear-gradient(135deg, oklch(0.80 0.17 152), var(--accent)) !important;
}

/* ============================== GPS — MODAIS / OVERLAYS ============================== */
/* Refit completo das overlays do GPS de Estudo:
   - Topic modal (cards: Estudar/Gerenciar/Criar/Importar)
   - Hub global de revisão
   - Registrar Estudo, Adicionar Tópico, Editar Tarefa, Subtarefa
   - Template Manager, Delete Disc, Import, Phase, Link, Revision
   - Config drawer, Notebook overlay (gpsn-*)
   Todos esses overlays renderizam em document.body — selectors globais
   escopados pela classe da overlay. */

/* ----- Cards modal — extensões que faltavam no bloco antigo (2449+) ----- */
/* O bloco principal cobre overlay/modal/head/tabs/body/inputs.
   Aqui adicionamos: stat chips coloridos, model tabs (Basic/Reverse/Cloze),
   form-actions, form-fields, media btn, label-row, optional, e os botões
   genéricos .cards-btn / .cards-btn--primary que são usados em vários lugares. */

.cards-stat {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  font: 500 11px/1.2 var(--font-mono) !important;
  letter-spacing: 0.04em;
  color: var(--text-3) !important;
  text-transform: lowercase;
}
.cards-stat b {
  color: var(--text-1) !important;
  font-weight: 600;
  margin-right: 2px;
}
.cards-stat--due.is-active {
  background: oklch(from var(--accent) l c h / 0.15) !important;
  border-color: oklch(from var(--accent) l c h / 0.4) !important;
  color: var(--accent) !important;
}
.cards-stat--due.is-active b {
  color: var(--accent) !important;
}
.cards-stat--muted {
  opacity: 0.6;
}

.cards-loading,
.cards-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-3);
  font-size: 13px;
}

/* Card creator form */
.cards-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cards-form-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cards-form-optional {
  color: var(--text-3);
  font-weight: 400;
  font-size: 11px;
}
.cards-form-input,
.cards-form-textarea {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text-1);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 140ms ease, background 140ms ease;
  resize: vertical;
}
.cards-form-input:focus,
.cards-form-textarea:focus {
  border-color: var(--accent);
  background: var(--bg-1);
}
.cards-form-textarea {
  min-height: 72px;
}
.cards-media-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--text-3);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.cards-media-btn:hover {
  background: var(--bg-2);
  color: var(--text-1);
}
.cards-media-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cards-media-preview img {
  max-width: 100%;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.cards-form-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cards-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

/* Model type tabs (Basic / Basic reverse / Cloze) */
.cards-model-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cards-model-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-2);
  font: 500 12px/1 var(--font-sans);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.cards-model-tab:hover {
  background: var(--bg-3);
  color: var(--text-1);
}
.cards-model-tab.is-active {
  background: oklch(from var(--accent) l c h / 0.15);
  border-color: var(--accent);
  color: var(--accent);
}

/* Cards generic buttons */
.cards-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-1);
  font: 500 12px/1 var(--font-sans);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.cards-btn:hover:not(:disabled) {
  background: var(--bg-2);
  border-color: oklch(from var(--accent) l c h / 0.4);
}
.cards-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.cards-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg, #fff);
}
.cards-btn--primary:hover:not(:disabled) {
  background: var(--accent-strong, var(--accent));
  border-color: var(--accent-strong, var(--accent));
}

/* Manage tab — list of notes/cards */
.cards-list,
.cards-notes-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cards-note-row,
.cards-list-item {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 10px;
}
.cards-note-row strong,
.cards-list-item strong {
  color: var(--text-1);
}

/* ----- GPS modais legacy (Tailwind utilitário em template) ----- */
/* Os modais usam classes tipo .modal-overlay + bg-gray-800 + border-gray-700.
   Neutralizer já cobre cores; aqui forçamos o backdrop e o card. */
#module-gps.nv-app ~ .modal-overlay,
.modal-overlay#gps-revision-modal-backdrop,
.modal-overlay#gps-add-subtask-modal-backdrop,
.modal-overlay#gps-template-manager-modal-backdrop,
.modal-overlay#gps-delete-discipline-modal-backdrop,
.modal-overlay#gps-import-modal-backdrop,
.modal-overlay#gps-phase-modal-backdrop,
.modal-overlay#gps-link-modal-backdrop,
.modal-overlay#gps-edit-task-modal-backdrop,
.modal-overlay#gps-log-study-modal-backdrop,
.modal-overlay#gps-new-discipline-modal-backdrop {
  background: oklch(0% 0 0 / 0.55) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* GPS modal content — sobrescreve bg-gray-800 / border-gray-700 hardcoded */
#gps-revision-modal-backdrop .widget-card,
#gps-add-subtask-modal-backdrop .widget-card,
#gps-template-manager-modal-backdrop .widget-card,
#gps-delete-discipline-modal-backdrop .widget-card,
#gps-import-modal-backdrop .widget-card,
#gps-phase-modal-backdrop .widget-card,
#gps-link-modal-backdrop .widget-card,
#gps-edit-task-modal-backdrop .widget-card,
#gps-log-study-modal-backdrop .widget-card,
#gps-new-discipline-modal-backdrop .widget-card,
#gps-add-aula-section .widget-card {
  background: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  color: var(--text-1) !important;
  box-shadow: 0 20px 60px oklch(0% 0 0 / 0.45);
  font-family: var(--font-sans);
}

/* Headers/footers/borders dentro */
#gps-revision-modal-backdrop .widget-header,
#gps-add-subtask-modal-backdrop .widget-header,
#gps-template-manager-modal-backdrop .widget-header,
#gps-delete-discipline-modal-backdrop .widget-header,
#gps-import-modal-backdrop .widget-header,
#gps-phase-modal-backdrop .widget-header,
#gps-link-modal-backdrop .widget-header,
#gps-edit-task-modal-backdrop .widget-header,
#gps-log-study-modal-backdrop .widget-header,
#gps-new-discipline-modal-backdrop .widget-header,
#gps-add-aula-section .widget-header {
  border-bottom: 1px solid var(--border) !important;
  background: transparent !important;
}
#gps-revision-modal-backdrop .widget-footer,
#gps-add-subtask-modal-backdrop .widget-footer,
#gps-template-manager-modal-backdrop .widget-footer,
#gps-delete-discipline-modal-backdrop .widget-footer,
#gps-import-modal-backdrop .widget-footer,
#gps-phase-modal-backdrop .widget-footer,
#gps-link-modal-backdrop .widget-footer,
#gps-edit-task-modal-backdrop .widget-footer,
#gps-log-study-modal-backdrop .widget-footer,
#gps-new-discipline-modal-backdrop .widget-footer,
#gps-add-aula-section .widget-footer {
  border-top: 1px solid var(--border) !important;
  background: var(--bg-2) !important;
}

/* Inputs/selects dentro de modais GPS — tokeniza */
#gps-revision-modal-backdrop .input-form,
#gps-add-subtask-modal-backdrop .input-form,
#gps-template-manager-modal-backdrop .input-form,
#gps-delete-discipline-modal-backdrop .input-form,
#gps-import-modal-backdrop .input-form,
#gps-phase-modal-backdrop .input-form,
#gps-link-modal-backdrop .input-form,
#gps-edit-task-modal-backdrop .input-form,
#gps-log-study-modal-backdrop .input-form,
#gps-new-discipline-modal-backdrop .input-form,
#gps-add-aula-section .input-form {
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--text-1) !important;
}
#gps-revision-modal-backdrop .input-form:focus,
#gps-add-subtask-modal-backdrop .input-form:focus,
#gps-template-manager-modal-backdrop .input-form:focus,
#gps-delete-discipline-modal-backdrop .input-form:focus,
#gps-import-modal-backdrop .input-form:focus,
#gps-phase-modal-backdrop .input-form:focus,
#gps-link-modal-backdrop .input-form:focus,
#gps-edit-task-modal-backdrop .input-form:focus,
#gps-log-study-modal-backdrop .input-form:focus,
#gps-new-discipline-modal-backdrop .input-form:focus,
#gps-add-aula-section .input-form:focus {
  border-color: var(--accent) !important;
  background: var(--bg-1) !important;
}

/* Botões btn-primary / btn-secondary dentro de modais GPS */
#gps-revision-modal-backdrop .btn-primary,
#gps-add-subtask-modal-backdrop .btn-primary,
#gps-template-manager-modal-backdrop .btn-primary,
#gps-import-modal-backdrop .btn-primary,
#gps-phase-modal-backdrop .btn-primary,
#gps-link-modal-backdrop .btn-primary,
#gps-edit-task-modal-backdrop .btn-primary,
#gps-log-study-modal-backdrop .btn-primary,
#gps-new-discipline-modal-backdrop .btn-primary,
#gps-add-aula-section .btn-primary,
.cards-modal .btn-primary {
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  color: var(--accent-fg, #fff) !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font: 500 13px/1 var(--font-sans) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer;
  transition: background 140ms ease;
}
#gps-revision-modal-backdrop .btn-primary:hover,
#gps-add-subtask-modal-backdrop .btn-primary:hover,
#gps-template-manager-modal-backdrop .btn-primary:hover,
#gps-import-modal-backdrop .btn-primary:hover,
#gps-phase-modal-backdrop .btn-primary:hover,
#gps-link-modal-backdrop .btn-primary:hover,
#gps-edit-task-modal-backdrop .btn-primary:hover,
#gps-log-study-modal-backdrop .btn-primary:hover,
#gps-new-discipline-modal-backdrop .btn-primary:hover,
#gps-add-aula-section .btn-primary:hover,
.cards-modal .btn-primary:hover {
  background: var(--accent-strong, var(--accent)) !important;
}

#gps-revision-modal-backdrop .btn-secondary,
#gps-add-subtask-modal-backdrop .btn-secondary,
#gps-template-manager-modal-backdrop .btn-secondary,
#gps-import-modal-backdrop .btn-secondary,
#gps-phase-modal-backdrop .btn-secondary,
#gps-link-modal-backdrop .btn-secondary,
#gps-edit-task-modal-backdrop .btn-secondary,
#gps-log-study-modal-backdrop .btn-secondary,
#gps-new-discipline-modal-backdrop .btn-secondary,
#gps-add-aula-section .btn-secondary {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text-1) !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font: 500 13px/1 var(--font-sans) !important;
}
#gps-revision-modal-backdrop .btn-secondary:hover,
#gps-add-subtask-modal-backdrop .btn-secondary:hover,
#gps-template-manager-modal-backdrop .btn-secondary:hover,
#gps-import-modal-backdrop .btn-secondary:hover,
#gps-phase-modal-backdrop .btn-secondary:hover,
#gps-link-modal-backdrop .btn-secondary:hover,
#gps-edit-task-modal-backdrop .btn-secondary:hover,
#gps-log-study-modal-backdrop .btn-secondary:hover,
#gps-new-discipline-modal-backdrop .btn-secondary:hover,
#gps-add-aula-section .btn-secondary:hover {
  background: var(--bg-2) !important;
  border-color: oklch(from var(--accent) l c h / 0.4) !important;
}

/* Tints azuis legacy dentro do modal Adicionar Tópico (banner info) */
#gps-add-aula-section [class*="bg-blue-"],
#gps-add-aula-section [class*="border-blue-"] {
  background: oklch(from var(--accent) l c h / 0.1) !important;
  border-color: oklch(from var(--accent) l c h / 0.3) !important;
}
#gps-add-aula-section [class*="text-blue-"] {
  color: var(--accent) !important;
}

/* HR dentro de modais */
#gps-revision-modal-backdrop hr,
#gps-add-subtask-modal-backdrop hr,
#gps-template-manager-modal-backdrop hr,
#gps-delete-discipline-modal-backdrop hr,
#gps-import-modal-backdrop hr,
#gps-phase-modal-backdrop hr,
#gps-link-modal-backdrop hr,
#gps-edit-task-modal-backdrop hr,
#gps-log-study-modal-backdrop hr,
#gps-new-discipline-modal-backdrop hr,
#gps-add-aula-section hr {
  border-color: var(--border) !important;
  background: var(--border) !important;
}

/* Config drawer */
#gps-config-drawer {
  background: var(--bg-1) !important;
  border-left: 1px solid var(--border) !important;
  color: var(--text-1) !important;
  box-shadow: -16px 0 40px oklch(0% 0 0 / 0.35);
}
#gps-config-drawer-backdrop {
  background: oklch(0% 0 0 / 0.55) !important;
  backdrop-filter: blur(4px);
}

/* ----- Notebook overlay (gpsn-*) — TEMA CLARO para estudo ----- */
/* Decisão de produto: o caderno é ferramenta de leitura prolongada.
   Mesma estratégia dos cards: redefinimos tokens dentro do escopo
   .gps-notebook-overlay para light, mantendo accent verde.
   Backdrop continua escuro pra criar contraste. */
.gps-notebook-overlay {
  background: oklch(0% 0 0 / 0.55) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  --bg-0: #fafafa;
  --bg-1: #ffffff;
  --bg-2: #f7f7f5;
  --bg-3: #efefec;
  --text-1: #1a1a1a;
  --text-2: #4a4a4a;
  --text-3: #6e6e6e;
  --text-4: #9a9a9a;
  --border: #e5e5e5;
  --border-soft: #dcdcdc;
  --border-subtle: #f0f0f0;
  --gpsn-text: #1a1a1a;
  --gpsn-text-muted: #4a4a4a;
}
.gps-notebook-overlay .gpsn-shell {
  background: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 60px oklch(0% 0 0 / 0.45) !important;
  color: var(--text-1) !important;
}
.gps-notebook-overlay .gpsn-header {
  background: var(--bg-2) !important;
  border-bottom: 1px solid var(--border) !important;
}
.gps-notebook-overlay .gpsn-header .gpsn-topic-title {
  color: var(--text-1) !important;
}
.gps-notebook-overlay .gpsn-header .gpsn-discipline {
  color: var(--text-3) !important;
}
.gps-notebook-overlay .gpsn-header .gpsn-sep {
  color: var(--text-3) !important;
}
.gps-notebook-overlay .gpsn-header .gpsn-icon-btn {
  color: var(--text-2) !important;
}
.gps-notebook-overlay .gpsn-header .gpsn-icon-btn:hover {
  color: var(--text-1) !important;
  background: var(--bg-3) !important;
}
.gps-notebook-overlay .gpsn-header .gpsn-save-status {
  color: var(--text-3) !important;
  background: var(--bg-3) !important;
  border-color: var(--border) !important;
}
.gps-notebook-overlay .gpsn-header .gpsn-save-status.is-saved {
  color: var(--accent) !important;
  background: oklch(from var(--accent) l c h / 0.12) !important;
  border-color: oklch(from var(--accent) l c h / 0.3) !important;
}
.gps-notebook-overlay .gpsn-link-note-btn,
.gps-notebook-overlay .gpsn-header-actions .gpsn-link-note-btn {
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  color: var(--accent-fg, #fff) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font: 500 12px/1 var(--font-sans) !important;
}
.gps-notebook-overlay .gpsn-link-note-btn:hover {
  background: var(--accent-strong, var(--accent)) !important;
}

/* TOC items (sumário) — em dark theme dentro do GPS notebook */
.gps-notebook-overlay .gpsn-toc-pane .gpsn-toc-item,
.gps-notebook-overlay .gpsn-toc-item {
  color: var(--text-2) !important;
  text-decoration: none;
  display: block;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 120ms ease, color 120ms ease;
}
.gps-notebook-overlay .gpsn-toc-pane .gpsn-toc-item:hover,
.gps-notebook-overlay .gpsn-toc-item:hover {
  background: var(--bg-3) !important;
  color: var(--text-1) !important;
}
.gps-notebook-overlay .gpsn-toc-pane .gpsn-toc-item.is-active,
.gps-notebook-overlay .gpsn-toc-item.is-active {
  background: oklch(from var(--accent) l c h / 0.12) !important;
  color: var(--accent) !important;
}
.gps-notebook-overlay .gpsn-toc-pane .gpsn-toc-title,
.gps-notebook-overlay .gpsn-toc-title {
  color: var(--text-3) !important;
  font: 600 11px/1 var(--font-mono) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gps-notebook-overlay .gpsn-toolbar {
  background: var(--bg-1) !important;
  border-bottom: 1px solid var(--border) !important;
}
.gps-notebook-overlay .gpsn-toolbar .gpsn-tool {
  color: var(--text-2) !important;
  background: transparent !important;
}
.gps-notebook-overlay .gpsn-toolbar .gpsn-tool:hover {
  background: var(--bg-2) !important;
  color: var(--text-1) !important;
}
.gps-notebook-overlay .gpsn-body,
.gps-notebook-overlay .gpsn-editor-pane,
.gps-notebook-overlay .gpsn-preview-pane,
.gps-notebook-overlay .gpsn-toc-pane {
  background: var(--bg-1) !important;
  border-color: var(--border) !important;
  color: var(--text-1) !important;
}
.gps-notebook-overlay .gpsn-toc-pane {
  background: var(--bg-2) !important;
  border-left: 1px solid var(--border) !important;
}
.gps-notebook-overlay .gpsn-footer {
  background: var(--bg-2) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--text-3) !important;
}

/* Editor + preview body content (gpsn-*) — texto legível em dark.
   IMPORTANTE: NÃO forçamos `background: transparent` em spans/divs internos
   porque isso mataria highlights aplicados via execCommand("hiliteColor"),
   que escrevem inline style="background-color:#fff2a8". O background só
   é resetado no editor/preview pai (que tem a cor de tema), o conteúdo
   herda automaticamente. Spans com style inline de cor mantêm o highlight. */
.gps-notebook-overlay .gpsn-editor,
.gps-notebook-overlay .gpsn-preview {
  color: var(--text-1) !important;
  background: transparent !important;
}
.gps-notebook-overlay .gpsn-editor {
  caret-color: var(--text-1) !important;
}
.gps-notebook-overlay .gpsn-editor:focus,
.gps-notebook-overlay .gpsn-editor:focus-visible {
  outline: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.gps-notebook-overlay .gpsn-editor::selection,
.gps-notebook-overlay .gpsn-editor *::selection,
.gps-notebook-overlay .gpsn-preview::selection,
.gps-notebook-overlay .gpsn-preview *::selection {
  background: #dbeafe !important;
  color: var(--text-1) !important;
}
.gps-notebook-overlay :is(.gpsn-editor, .gpsn-preview) :is(
  [style*="#dcfce7" i],
  [style*="#bbf7d0" i],
  [style*="#d1fae5" i],
  [style*="#e6f7ee" i],
  [style*="#2dd882" i],
  [style*="220, 252, 231" i],
  [style*="187, 247, 208" i],
  [style*="209, 250, 229" i],
  [style*="230, 247, 238" i],
  [style*="45, 216, 130" i],
  [style*="46, 219, 127" i],
  [style*="34, 197, 94" i]
) {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
.gps-notebook-overlay .gpsn-editor p:not([style*="color"]),
.gps-notebook-overlay .gpsn-editor li:not([style*="color"]),
.gps-notebook-overlay .gpsn-editor span:not(.gpsn-callout-title span):not([style*="background"]):not([style*="color"]),
.gps-notebook-overlay .gpsn-editor div:not([class*="gpsn-callout"]):not([style*="background"]):not([style*="color"]),
.gps-notebook-overlay .gpsn-preview p,
.gps-notebook-overlay .gpsn-preview li,
.gps-notebook-overlay .gpsn-preview td,
.gps-notebook-overlay .gpsn-preview th {
  color: var(--text-1) !important;
}
.gps-notebook-overlay .gpsn-preview h1,
.gps-notebook-overlay .gpsn-preview h2,
.gps-notebook-overlay .gpsn-preview h3,
.gps-notebook-overlay .gpsn-preview h4,
.gps-notebook-overlay .gpsn-editor h1,
.gps-notebook-overlay .gpsn-editor h2,
.gps-notebook-overlay .gpsn-editor h3,
.gps-notebook-overlay .gpsn-editor h4 {
  color: var(--text-1) !important;
  border-bottom-color: var(--border) !important;
}
.gps-notebook-overlay .gpsn-preview a,
.gps-notebook-overlay .gpsn-editor a {
  color: var(--accent) !important;
  border-bottom-color: oklch(from var(--accent) l c h / 0.3) !important;
}
.gps-notebook-overlay .gpsn-preview code,
.gps-notebook-overlay .gpsn-editor code {
  color: oklch(0.78 0.16 30) !important;
  background: var(--bg-2) !important;
  border-color: var(--border) !important;
}
.gps-notebook-overlay .gpsn-preview pre,
.gps-notebook-overlay .gpsn-editor pre {
  background: var(--bg-2) !important;
  border-color: var(--border) !important;
}
.gps-notebook-overlay .gpsn-preview blockquote,
.gps-notebook-overlay .gpsn-editor blockquote {
  color: var(--text-2) !important;
  border-left-color: var(--border) !important;
}
.gps-notebook-overlay .gpsn-preview thead th {
  background: var(--bg-2) !important;
  color: var(--text-1) !important;
}
.gps-notebook-overlay .gpsn-preview tbody tr:nth-child(even) {
  background: var(--bg-2) !important;
}
.gps-notebook-overlay .gpsn-preview mark,
.gps-notebook-overlay .gpsn-editor mark {
  background: oklch(0.78 0.16 78 / 0.3) !important;
  color: var(--text-1) !important;
}

/* Confirm card do notebook */
.gpsn-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: oklch(0% 0 0 / 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.gpsn-confirm-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 60px oklch(0% 0 0 / 0.4);
  max-width: 420px;
  width: 100%;
  padding: 20px;
  color: var(--text-1);
}

/* ============================== CARDS — TEMA CLARO ============================== */
/* Decisão de produto: o painel de cards (topic modal + review overlay) usa
   TEMA CLARO porque estudar com fundo escuro cansa a vista em sessões longas.
   O resto do app continua dark; só os overlays de cards invertem.
   Estratégia: redefinimos os tokens CSS dentro do escopo desses dois overlays
   para valores light; assim, todos os rules que usam var(--bg-1)/var(--text-1)/etc
   pegam o tema claro automaticamente, sem precisar !important em cada selector.
   Accent (verde) é mantido para CTAs. */

.cards-modal-overlay,
.cards-review-overlay,
.cards-hub-overlay {
  --bg-0: #fafafa;
  --bg-1: #ffffff;
  --bg-2: #f7f7f5;
  --bg-3: #efefec;
  --text-1: #1a1a1a;
  --text-2: #4a4a4a;
  --text-3: #6e6e6e;
  --text-4: #9a9a9a;
  --border: #e5e5e5;
  --border-soft: #dcdcdc;
  --border-subtle: #f0f0f0;
}

/* Backdrop ainda escuro pra criar contraste/foco */
.cards-modal-overlay,
.cards-review-overlay,
.cards-hub-overlay {
  background: oklch(0% 0 0 / 0.55) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Overrides específicos de elementos que tinham !important e cores hardcoded
   no tema dark — agora apontam pra tons claros consistentes. */
.cards-modal {
  background: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-1) !important;
  box-shadow: 0 24px 64px oklch(0% 0 0 / 0.35) !important;
}
.cards-modal-head {
  border-bottom: 1px solid var(--border) !important;
}
.cards-modal-stats {
  background: var(--bg-2) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-3) !important;
}
.cards-modal-tabs {
  background: var(--bg-1) !important;
  border-bottom: 1px solid var(--border) !important;
}
.cards-modal-body {
  background: var(--bg-1) !important;
  color: var(--text-2) !important;
}
.cards-modal input[type="text"],
.cards-modal input[type="search"],
.cards-modal textarea,
.cards-modal select {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-soft) !important;
  color: var(--text-1) !important;
}
.cards-modal input:focus,
.cards-modal textarea:focus,
.cards-modal select:focus {
  background: var(--bg-1) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px oklch(from var(--accent) l c h / 0.15) !important;
}

/* Stat chips em pill cinza-claro */
.cards-modal .cards-stat {
  background: var(--bg-1) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-3) !important;
}
.cards-modal .cards-stat b {
  color: var(--text-1) !important;
}
.cards-modal .cards-stat--due.is-active {
  background: oklch(from var(--accent) l c h / 0.12) !important;
  border-color: oklch(from var(--accent) l c h / 0.4) !important;
  color: oklch(from var(--accent) calc(l - 0.18) c h) !important;
}

/* Tabs */
.cards-modal .cards-modal-tab {
  color: var(--text-3) !important;
}
.cards-modal .cards-modal-tab:hover {
  color: var(--text-1) !important;
}
.cards-modal .cards-modal-tab.is-active {
  color: oklch(from var(--accent) calc(l - 0.18) c h) !important;
  border-bottom-color: var(--accent) !important;
}

/* Filter / chip */
.cards-modal .cards-filter-search {
  background: var(--bg-1) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-1) !important;
}
.cards-modal .cards-chip {
  background: var(--bg-1) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-2) !important;
}
.cards-modal .cards-chip:hover {
  background: var(--bg-2) !important;
  color: var(--text-1) !important;
}
.cards-modal .cards-chip.is-active {
  background: oklch(from var(--accent) l c h / 0.15) !important;
  border-color: var(--accent) !important;
  color: oklch(from var(--accent) calc(l - 0.18) c h) !important;
}

/* Note items */
.cards-modal .cards-note-item {
  background: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.04);
}
.cards-modal .cards-note-item:hover {
  border-color: oklch(from var(--accent) l c h / 0.4) !important;
  box-shadow: 0 2px 8px oklch(0% 0 0 / 0.06);
}
.cards-modal .cards-note-item.is-selected {
  background: oklch(from var(--accent) l c h / 0.06) !important;
  border-color: var(--accent) !important;
}
.cards-modal .cards-note-model {
  background: var(--bg-2) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-3) !important;
}
.cards-modal .cards-note-preview {
  color: var(--text-1) !important;
}
.cards-modal .cards-tag {
  background: oklch(from var(--accent) l c h / 0.1) !important;
  border-color: oklch(from var(--accent) l c h / 0.3) !important;
  color: oklch(from var(--accent) calc(l - 0.18) c h) !important;
}

/* Action buttons */
.cards-modal .cards-btn,
.cards-modal .cards-btn--sm {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-soft) !important;
  color: var(--text-1) !important;
}
.cards-modal .cards-btn:hover:not(:disabled) {
  background: var(--bg-2) !important;
  border-color: oklch(from var(--accent) l c h / 0.5) !important;
}
.cards-modal .cards-btn--primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-fg, #fff) !important;
}
.cards-modal .cards-btn--primary:hover:not(:disabled) {
  background: var(--accent-strong, var(--accent)) !important;
}
.cards-modal .cards-btn--danger:hover:not(:disabled) {
  background: oklch(0.96 0.04 27) !important;
  color: oklch(0.5 0.18 27) !important;
  border-color: oklch(0.68 0.18 27 / 0.5) !important;
}

/* Modelo tabs (Basic / Reverse / Cloze) */
.cards-modal .cards-model-tab {
  background: var(--bg-1) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-2) !important;
}
.cards-modal .cards-model-tab:hover {
  background: var(--bg-2) !important;
  color: var(--text-1) !important;
}
.cards-modal .cards-model-tab.is-active {
  background: oklch(from var(--accent) l c h / 0.12) !important;
  border-color: var(--accent) !important;
  color: oklch(from var(--accent) calc(l - 0.18) c h) !important;
}

/* Form inputs */
.cards-modal .cards-form-input,
.cards-modal .cards-form-textarea {
  background: var(--bg-1) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-1) !important;
}
.cards-modal .cards-form-input:focus,
.cards-modal .cards-form-textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px oklch(from var(--accent) l c h / 0.15) !important;
}
.cards-modal .cards-form-label {
  color: var(--text-2) !important;
}
.cards-modal .cards-form-hint,
.cards-modal .cards-form-optional {
  color: var(--text-3) !important;
}
.cards-modal .cards-media-btn {
  background: var(--bg-1) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-3) !important;
}
.cards-modal .cards-media-btn:hover {
  background: var(--bg-2) !important;
  color: var(--text-1) !important;
}

/* Atalhos de rodapé (Espaço, 1, 2, 3, 4) */
.cards-modal .cards-shortcuts-hint,
.cards-modal .cards-shortcuts-hint > * {
  color: var(--text-3) !important;
}
.cards-modal .cards-kbd,
.cards-modal .cards-shortcuts-hint .cards-kbd {
  background: var(--bg-2) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-2) !important;
}

/* Modal close button */
.cards-modal .cards-modal-close {
  color: var(--text-3) !important;
}
.cards-modal .cards-modal-close:hover {
  background: var(--bg-2) !important;
  color: var(--text-1) !important;
}

/* Cloze marker — em amarelo destaque (legível no claro) */
.cards-modal .cards-cloze-mark {
  background: oklch(0.92 0.16 88) !important;
  color: oklch(0.3 0.16 88) !important;
}

/* Edit inline panel */
.cards-modal .cards-edit-card {
  background: var(--bg-2) !important;
  border-color: var(--accent) !important;
}
.cards-modal .cards-edit-field {
  background: var(--bg-1) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-1) !important;
}

/* ============================== CARDS REVIEW (Estudar carta) ============================== */
/* O cards-review-overlay também em tema claro */

.cards-review-shell {
  background: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-1) !important;
  box-shadow: 0 30px 80px oklch(0% 0 0 / 0.4) !important;
}
.cards-review-progress-bar {
  background: var(--bg-3) !important;
}
.cards-review-progress-fill {
  background: var(--accent) !important;
}
.cards-review-head {
  border-bottom: 1px solid var(--border) !important;
}
.cards-review-topic {
  color: var(--text-2) !important;
}
.cards-review-state-badge {
  background: oklch(from var(--accent) l c h / 0.12) !important;
  border-color: oklch(from var(--accent) l c h / 0.3) !important;
  color: oklch(from var(--accent) calc(l - 0.18) c h) !important;
}
.cards-review-counter {
  color: var(--text-3) !important;
}
.cards-review-edit,
.cards-review-close {
  color: var(--text-3) !important;
}
.cards-review-card {
  color: var(--text-1) !important;
  font-size: 18px;
}
.cards-review-question,
.cards-review-answer {
  color: var(--text-1) !important;
}
.cards-review-answer {
  border-top: 1px dashed var(--border) !important;
}
.cards-review-foot {
  background: var(--bg-2) !important;
  border-top: 1px solid var(--border) !important;
}

/* Grade buttons no claro — fundo branco com border tonal */
.cards-grade-btn {
  background: var(--bg-1) !important;
  border-width: 1px !important;
  border-style: solid !important;
}
.cards-grade-int {
  color: var(--text-3) !important;
}
.cards-grade-again {
  border-color: oklch(0.7 0.18 27 / 0.5) !important;
  color: oklch(0.55 0.18 27) !important;
}
.cards-grade-again:hover {
  background: oklch(0.96 0.04 27) !important;
}
.cards-grade-hard {
  border-color: oklch(0.78 0.16 78 / 0.5) !important;
  color: oklch(0.5 0.16 78) !important;
}
.cards-grade-hard:hover {
  background: oklch(0.96 0.04 78) !important;
}
.cards-grade-good {
  border-color: oklch(from var(--accent) l c h / 0.5) !important;
  color: oklch(from var(--accent) calc(l - 0.18) c h) !important;
}
.cards-grade-good:hover {
  background: oklch(from var(--accent) l c h / 0.08) !important;
}
.cards-grade-easy {
  border-color: oklch(0.7 0.14 240 / 0.5) !important;
  color: oklch(0.5 0.14 240) !important;
}
.cards-grade-easy:hover {
  background: oklch(0.96 0.04 240) !important;
}

.cards-kbd {
  background: var(--bg-2) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-3) !important;
}

/* "Mostrar resposta" CTA no claro */
.cards-review-show-row button {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-fg, #fff) !important;
}
.cards-review-show-row button:hover {
  background: var(--accent-strong, var(--accent)) !important;
}

/* Done screen */
.cards-review-done {
  color: var(--text-1) !important;
}
.cards-done-summary {
  color: var(--text-2) !important;
}
.cards-done-breakdown {
  color: var(--text-3) !important;
}

/* Hub overlay (revisar tudo) */
.cards-hub-shell {
  background: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-1) !important;
}

/* ============================== CARDS — UX de estudo (refinamentos) ============================== */

/* Conforto de leitura na review: largura confortável (~65ch),
   line-height generoso, hierarquia Q vs A. */
.cards-review-card {
  padding: 48px 32px !important;
  align-items: center !important;
  gap: 24px !important;
}
.cards-review-card > * {
  width: 100%;
  max-width: 62ch;
}
.cards-review-question {
  font: 500 22px/1.55 var(--font-display) !important;
  letter-spacing: -0.005em !important;
  text-align: center;
}
.cards-review-answer {
  font: 400 17px/1.65 var(--font-display) !important;
  color: var(--text-2) !important;
  text-align: left;
  border-top: 1px solid var(--border-soft) !important;
  padding-top: 24px !important;
  margin-top: 4px;
}
.cards-review-answer-divider {
  display: block;
  width: 32px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  margin: 8px auto;
}

/* Animação fade quando troca de carta */
.cards-review-card {
  animation: cardsReviewFadeIn 220ms ease;
}
@keyframes cardsReviewFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Focus ring acessível nos grade buttons */
.cards-grade-btn:focus-visible,
.cards-review-show-row button:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}

/* Hover dos grade buttons mais decisivo (eleva levemente) */
.cards-grade-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px oklch(0% 0 0 / 0.08);
}
.cards-grade-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px oklch(0% 0 0 / 0.08);
}

/* Note item — hierarquia Front >> Back */
.cards-modal .cards-note-preview strong {
  display: inline-block;
  font: 600 14px/1.4 var(--font-display) !important;
  color: var(--text-1) !important;
  margin-bottom: 2px;
}
.cards-modal .cards-note-sep {
  color: var(--text-4) !important;
  margin: 0 8px !important;
  font-weight: 400;
}
.cards-modal .cards-note-preview {
  font-size: 13px !important;
  line-height: 1.55 !important;
}

/* Note item — sombra mais decisiva ao hover (efeito card flutuante) */
.cards-modal .cards-note-item:hover {
  box-shadow: 0 4px 14px oklch(0% 0 0 / 0.08) !important;
  transform: translateY(-1px);
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

/* Gerenciar — "Você tem N cartas" no Estudar tab — proeminência visual */
.cards-modal .cards-study-cta {
  padding: 36px 16px 8px !important;
}
.cards-modal .cards-study-cta h3 {
  font: 600 22px/1.3 var(--font-display) !important;
  letter-spacing: -0.02em;
  margin: 0 0 6px !important;
}
.cards-modal .cards-study-cta p {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--text-3) !important;
  margin: 0 0 20px !important;
}
.cards-modal .cards-study-cta .cards-btn--primary,
.cards-modal .cards-study-cta button.cards-btn--primary {
  padding: 10px 22px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* Stats chip "due hoje" com pulse sutil quando ativo (chama atenção) */
.cards-modal .cards-stat--due.is-active {
  position: relative;
}
.cards-modal .cards-stat--due.is-active::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  border: 2px solid oklch(from var(--accent) l c h / 0.4);
  animation: cardsStatPulse 1800ms ease-in-out infinite;
  pointer-events: none;
}
@keyframes cardsStatPulse {
  0%, 100% { opacity: 0; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.05); }
}

/* Tab transitions — suaviza troca entre Estudar/Gerenciar/Criar/Importar */
.cards-modal-body {
  animation: cardsTabFadeIn 180ms ease;
}
@keyframes cardsTabFadeIn {
  from { opacity: 0.7; }
  to   { opacity: 1; }
}

/* Scrollbar customizada para o body do modal (claro, discreta) */
.cards-modal-body::-webkit-scrollbar {
  width: 8px;
}
.cards-modal-body::-webkit-scrollbar-track {
  background: transparent;
}
.cards-modal-body::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
.cards-modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--text-4);
}

/* ============================== CARDS — Topic Modal interno ============================== */
/* O .cards-modal é renderizado em document.body, fora do #cards-module-root.
   Portanto os overrides de busca/chips/lista precisam ser globalmente
   escopados a .cards-modal. */

/* ----- Estudar tab (CTA + breakdown + shortcuts) ----- */
.cards-modal .cards-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-2);
}
.cards-modal .cards-empty-icon {
  font-size: 36px;
  margin-bottom: 12px;
  display: block;
}
.cards-modal .cards-empty h3 {
  font: 600 16px/1.3 var(--font-display);
  letter-spacing: -0.015em;
  color: var(--text-1);
  margin: 0 0 6px;
}
.cards-modal .cards-empty p {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.5;
  margin: 0;
}
.cards-modal .cards-study-cta {
  text-align: center;
  padding: 28px 16px 12px;
}
.cards-modal .cards-study-cta h3,
.cards-modal .cards-study-cta p {
  font: 600 18px/1.3 var(--font-display) !important;
  letter-spacing: -0.015em;
  color: var(--text-1) !important;
  margin: 0 0 8px;
}
.cards-modal .cards-study-cta button,
.cards-modal .cards-study-cta .cards-btn {
  margin-top: 10px;
}
.cards-modal .cards-study-breakdown {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--text-2);
}
.cards-modal .cards-study-breakdown > * {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cards-modal .cards-shortcuts-hint {
  text-align: center;
  font-size: 11px;
  color: var(--text-3);
  margin-top: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.cards-modal .cards-shortcuts-hint .cards-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 5px;
  background: var(--bg-3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px;
  font: 500 10px/1 var(--font-mono) !important;
  color: var(--text-2) !important;
}

/* ----- Gerenciar tab (filters + bulk + list) ----- */
.cards-modal .cards-filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.cards-modal .cards-filter-search {
  width: 100%;
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text-1) !important;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 140ms ease, background 140ms ease;
}
.cards-modal .cards-filter-search:focus {
  border-color: var(--accent) !important;
  background: var(--bg-1) !important;
}
.cards-modal .cards-filter-search::placeholder {
  color: var(--text-3);
}
.cards-modal .cards-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.cards-modal .cards-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px;
  color: var(--text-2) !important;
  font: 500 11px/1.2 var(--font-sans) !important;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
  white-space: nowrap;
}
.cards-modal .cards-chip:hover {
  background: var(--bg-3) !important;
  color: var(--text-1) !important;
  border-color: oklch(from var(--accent) l c h / 0.4) !important;
}
.cards-modal .cards-chip.is-active {
  background: oklch(from var(--accent) l c h / 0.15) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.cards-modal .cards-chip--leech.is-active {
  background: oklch(0.78 0.16 78 / 0.18) !important;
  border-color: oklch(0.78 0.16 78) !important;
  color: oklch(0.82 0.16 78) !important;
}
.cards-modal .cards-chip--tag {
  font-size: 10px !important;
}

/* Bulk action bar */
.cards-modal .cards-bulk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: oklch(from var(--accent) l c h / 0.08);
  border: 1px solid oklch(from var(--accent) l c h / 0.3);
  border-radius: 8px;
  margin-bottom: 12px;
}
.cards-modal .cards-bulk-count {
  font: 600 12px/1 var(--font-sans);
  color: var(--accent);
}

/* Note list (cards) */
.cards-modal .cards-note-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cards-modal .cards-note-item {
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 140ms ease;
}
.cards-modal .cards-note-item:hover {
  border-color: oklch(from var(--accent) l c h / 0.4) !important;
}
.cards-modal .cards-note-item.is-suspended {
  opacity: 0.65;
}
.cards-modal .cards-note-item.is-leech {
  border-color: oklch(0.78 0.16 78 / 0.4) !important;
}
.cards-modal .cards-note-item.is-selected {
  background: oklch(from var(--accent) l c h / 0.1) !important;
  border-color: var(--accent) !important;
}

.cards-modal .cards-note-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.cards-modal .cards-note-check {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
}
.cards-modal .cards-note-model {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--bg-3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px;
  font: 500 10px/1.4 var(--font-mono) !important;
  color: var(--text-3) !important;
  letter-spacing: 0.04em;
}
.cards-modal .cards-note-cardcount {
  font: 500 10px/1.2 var(--font-mono);
  color: var(--text-3);
}
.cards-modal .cards-note-state {
  display: inline-flex;
  gap: 4px;
  font-size: 10px;
  color: var(--text-3);
}
.cards-modal .cards-note-leech-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  background: oklch(0.78 0.16 78 / 0.15);
  border: 1px solid oklch(0.78 0.16 78 / 0.4);
  border-radius: 999px;
  color: oklch(0.82 0.16 78);
  font: 500 10px/1.2 var(--font-mono);
}

.cards-modal .cards-note-preview {
  font-size: 13px;
  color: var(--text-1) !important;
  line-height: 1.5;
}
.cards-modal .cards-note-preview strong {
  color: var(--text-1);
  font-weight: 600;
}
.cards-modal .cards-note-sep {
  margin: 0 6px;
  color: var(--text-3);
}

.cards-modal .cards-note-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.cards-modal .cards-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: oklch(from var(--accent) l c h / 0.1) !important;
  border: 1px solid oklch(from var(--accent) l c h / 0.3) !important;
  border-radius: 999px;
  font: 500 10px/1.2 var(--font-mono) !important;
  color: var(--accent) !important;
}

/* Action buttons inside note item */
.cards-modal .cards-note-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.cards-modal .cards-btn,
.cards-modal .cards-btn--sm {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  padding: 6px 10px !important;
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px;
  color: var(--text-1) !important;
  font: 500 11px/1 var(--font-sans) !important;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.cards-modal .cards-btn--sm {
  padding: 5px 9px !important;
  font-size: 11px !important;
}
.cards-modal .cards-btn:hover:not(:disabled) {
  background: var(--bg-3) !important;
  border-color: oklch(from var(--accent) l c h / 0.5) !important;
}
.cards-modal .cards-btn--primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--accent-fg, #fff) !important;
}
.cards-modal .cards-btn--primary:hover:not(:disabled) {
  background: var(--accent-strong, var(--accent)) !important;
}
.cards-modal .cards-btn--danger:hover:not(:disabled) {
  background: oklch(0.68 0.18 27 / 0.12) !important;
  color: oklch(0.78 0.18 27) !important;
  border-color: oklch(0.68 0.18 27 / 0.5) !important;
}

/* Editar inline panel (when clicking edit on a note) */
.cards-modal .cards-edit-card {
  background: var(--bg-2) !important;
  border: 1px solid var(--accent) !important;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
}
.cards-modal .cards-edit-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.cards-modal .cards-edit-model {
  font: 600 11px/1 var(--font-mono);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cards-modal .cards-edit-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.cards-modal .cards-edit-label {
  font: 500 11px/1.2 var(--font-sans);
  color: var(--text-2);
}
.cards-modal .cards-edit-field {
  width: 100%;
  background: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--text-1) !important;
  font-size: 12px;
  font-family: inherit;
  outline: none;
}
.cards-modal .cards-edit-field:focus {
  border-color: var(--accent) !important;
}
.cards-modal .cards-edit-foot {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  padding-top: 6px;
}

/* ----- Cloze marker dentro do preview ----- */
.cards-modal .cards-cloze-mark {
  background: oklch(from var(--accent) l c h / 0.18);
  color: var(--accent);
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 500;
}

/* ============================== GPS NOTEBOOK — UX de leitura ============================== */
/* Refinamentos para o caderno do GPS de Estudo (gpsn-* overlay).
   Já está em tema CLARO; aqui adicionamos:
   - Tipografia confortável (max-width, line-height generoso, escala harmônica)
   - TOC hierárquico por data-level (H1 destaque, H2/H3/H4 indentados)
   - Editor toolbar mais limpa
   - Spellcheck underline mais sutil */

/* Editor + preview body — largura total como padrão (decisão de produto:
   o usuário pediu pra remover o toggle e fixar full-width nos dois módulos
   pra aproveitar a área disponível em telas grandes). */
.gps-notebook-overlay .gpsn-editor,
.gps-notebook-overlay .gpsn-preview {
  max-width: none;
  padding: 32px 64px 80px !important;
  font: 400 16px/1.7 var(--font-display) !important;
  letter-spacing: -0.005em;
}

/* Mesmo padrão no Notas standalone (#notas-root) — largura total. */
#notas-root.nv-app .notas-editor-content,
#notas-root.nv-app .notas-editor-wysiwyg,
#notas-root.nv-app .notas-editor-textarea,
#notas-root.nv-app .notas-editor-preview {
  max-width: none;
}

/* Hierarquia tipográfica clara — H1 grande, H2 médio com border-bottom,
   H3/H4 menores, espaçamento vertical proporcional */
.gps-notebook-overlay .gpsn-editor h1,
.gps-notebook-overlay .gpsn-preview h1 {
  font: 700 32px/1.25 var(--font-display) !important;
  letter-spacing: -0.025em !important;
  margin: 1.4em 0 0.6em !important;
  color: var(--text-1) !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
.gps-notebook-overlay .gpsn-editor h1:first-child,
.gps-notebook-overlay .gpsn-preview h1:first-child {
  margin-top: 0 !important;
}
.gps-notebook-overlay .gpsn-editor h2,
.gps-notebook-overlay .gpsn-preview h2 {
  font: 700 24px/1.3 var(--font-display) !important;
  letter-spacing: -0.02em !important;
  margin: 1.6em 0 0.5em !important;
  padding-bottom: 0.3em !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-1) !important;
}
.gps-notebook-overlay .gpsn-editor h3,
.gps-notebook-overlay .gpsn-preview h3 {
  font: 600 19px/1.35 var(--font-display) !important;
  letter-spacing: -0.015em !important;
  margin: 1.5em 0 0.4em !important;
  color: var(--text-1) !important;
  border-bottom: none !important;
}
.gps-notebook-overlay .gpsn-editor h4,
.gps-notebook-overlay .gpsn-preview h4 {
  font: 600 16px/1.4 var(--font-display) !important;
  margin: 1.3em 0 0.3em !important;
  color: var(--text-2) !important;
  border-bottom: none !important;
}
.gps-notebook-overlay .gpsn-editor h5,
.gps-notebook-overlay .gpsn-preview h5 {
  font: 600 14px/1.4 var(--font-mono) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 1.2em 0 0.3em !important;
  color: var(--text-3) !important;
}

/* Parágrafos e listas — espaçamento confortável */
.gps-notebook-overlay .gpsn-editor p,
.gps-notebook-overlay .gpsn-preview p {
  margin: 0 0 1em !important;
  line-height: 1.7 !important;
}
.gps-notebook-overlay .gpsn-editor ul,
.gps-notebook-overlay .gpsn-editor ol,
.gps-notebook-overlay .gpsn-preview ul,
.gps-notebook-overlay .gpsn-preview ol {
  margin: 0 0 1em !important;
  padding-left: 1.5em !important;
}
.gps-notebook-overlay .gpsn-editor li,
.gps-notebook-overlay .gpsn-preview li {
  margin: 0.3em 0 !important;
  line-height: 1.65 !important;
}
.gps-notebook-overlay .gpsn-editor li > ul,
.gps-notebook-overlay .gpsn-editor li > ol,
.gps-notebook-overlay .gpsn-preview li > ul,
.gps-notebook-overlay .gpsn-preview li > ol {
  margin: 0.3em 0 0.5em !important;
}

/* Bullet points neutros para preservar a formatação copiada */
.gps-notebook-overlay .gpsn-editor ul > li::marker,
.gps-notebook-overlay .gpsn-preview ul > li::marker {
  color: var(--text-3);
}

/* Blockquote — destaque neutro para não tingir conteúdo copiado */
.gps-notebook-overlay .gpsn-editor blockquote,
.gps-notebook-overlay .gpsn-preview blockquote {
  margin: 1.2em 0 !important;
  padding: 0.5em 1.2em !important;
  border-left: 3px solid var(--border-soft) !important;
  background: var(--bg-2) !important;
  color: var(--text-2) !important;
  border-radius: 0 6px 6px 0;
  font-style: normal !important;
}
.gps-notebook-overlay .gpsn-editor blockquote p,
.gps-notebook-overlay .gpsn-preview blockquote p {
  margin: 0 !important;
}

/* Code inline — destaque sutil */
.gps-notebook-overlay .gpsn-editor code,
.gps-notebook-overlay .gpsn-preview code {
  font: 500 0.9em/1.4 var(--font-mono) !important;
  padding: 1px 6px !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 4px !important;
  color: oklch(0.45 0.18 10) !important;
}

/* Code block (pre) — leitura técnica */
.gps-notebook-overlay .gpsn-editor pre,
.gps-notebook-overlay .gpsn-preview pre {
  margin: 1.2em 0 !important;
  padding: 16px 18px !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  font: 400 13px/1.55 var(--font-mono) !important;
  overflow-x: auto;
}
.gps-notebook-overlay .gpsn-editor pre code,
.gps-notebook-overlay .gpsn-preview pre code {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: var(--text-1) !important;
}

/* Tabelas — leitura tabular elegante */
.gps-notebook-overlay .gpsn-editor table,
.gps-notebook-overlay .gpsn-preview table {
  border-collapse: collapse !important;
  margin: 1.2em 0 !important;
  width: 100%;
  font-size: 14px;
}
.gps-notebook-overlay .gpsn-editor th,
.gps-notebook-overlay .gpsn-editor td,
.gps-notebook-overlay .gpsn-preview th,
.gps-notebook-overlay .gpsn-preview td {
  padding: 8px 12px !important;
  border: 1px solid var(--border) !important;
  text-align: left;
}
.gps-notebook-overlay .gpsn-editor thead th,
.gps-notebook-overlay .gpsn-preview thead th {
  background: var(--bg-2) !important;
  font-weight: 600;
  color: var(--text-1) !important;
}

/* Imagens — sombra sutil + radius */
.gps-notebook-overlay .gpsn-editor img,
.gps-notebook-overlay .gpsn-preview img {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 12px oklch(0% 0 0 / 0.08);
  margin: 1em 0;
}

/* HR — divisor mais elegante */
.gps-notebook-overlay .gpsn-editor hr,
.gps-notebook-overlay .gpsn-preview hr {
  margin: 2em 0 !important;
  border: none !important;
  height: 1px !important;
  background: linear-gradient(to right, transparent, var(--border), transparent) !important;
}

/* Strong / em */
.gps-notebook-overlay .gpsn-editor strong,
.gps-notebook-overlay .gpsn-preview strong {
  font-weight: 700 !important;
  color: var(--text-1) !important;
}
.gps-notebook-overlay .gpsn-editor em,
.gps-notebook-overlay .gpsn-preview em {
  font-style: italic !important;
  color: var(--text-2) !important;
}

/* Spellcheck — text-decoration mais sutil (não pode desabilitar via CSS) */
.gps-notebook-overlay .gpsn-editor[contenteditable] {
  text-decoration-skip-ink: none;
}

/* ============================== TOC SUMÁRIO HIERÁRQUICO ============================== */
.gps-notebook-overlay .gpsn-toc-pane {
  padding: 16px 12px !important;
  overflow-y: auto;
}
.gps-notebook-overlay .gpsn-toc-header,
.gps-notebook-overlay .gpsn-toc-title {
  display: flex !important;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 12px !important;
  border-bottom: 1px solid var(--border) !important;
  margin-bottom: 8px !important;
  font: 600 11px/1 var(--font-mono) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-3) !important;
}

.gps-notebook-overlay .gpsn-toc-pane .gpsn-toc-item,
.gps-notebook-overlay .gpsn-toc-item {
  display: block;
  padding: 5px 10px !important;
  border-radius: 6px !important;
  font: 400 13px/1.4 var(--font-sans) !important;
  color: var(--text-2) !important;
  text-decoration: none !important;
  transition: background 120ms ease, color 120ms ease;
  border-left: 2px solid transparent;
  margin-bottom: 1px;
}

/* H1 = título principal: peso destaque, sem indent */
.gps-notebook-overlay .gpsn-toc-item[data-level="1"] {
  padding-left: 10px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--text-1) !important;
  margin-top: 8px;
}
.gps-notebook-overlay .gpsn-toc-item[data-level="1"]:first-child {
  margin-top: 0;
}

/* H2 = seção: indent 0, peso médio */
.gps-notebook-overlay .gpsn-toc-item[data-level="2"] {
  padding-left: 10px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--text-1) !important;
  margin-top: 6px;
}

/* H3 = subseção: indent 16px, peso normal */
.gps-notebook-overlay .gpsn-toc-item[data-level="3"] {
  padding-left: 26px !important;
  font-size: 12.5px !important;
  color: var(--text-2) !important;
}

/* H4 = subsubseção: indent 32px, menor */
.gps-notebook-overlay .gpsn-toc-item[data-level="4"] {
  padding-left: 42px !important;
  font-size: 12px !important;
  color: var(--text-3) !important;
}

/* H5/H6 = mais profundo, menor */
.gps-notebook-overlay .gpsn-toc-item[data-level="5"],
.gps-notebook-overlay .gpsn-toc-item[data-level="6"] {
  padding-left: 56px !important;
  font-size: 11.5px !important;
  color: var(--text-3) !important;
}

.gps-notebook-overlay .gpsn-toc-pane .gpsn-toc-item:hover,
.gps-notebook-overlay .gpsn-toc-item:hover {
  background: var(--bg-2) !important;
  color: var(--text-1) !important;
  border-left-color: oklch(from var(--accent) l c h / 0.4) !important;
}
.gps-notebook-overlay .gpsn-toc-pane .gpsn-toc-item.is-active,
.gps-notebook-overlay .gpsn-toc-item.is-active {
  background: oklch(from var(--accent) l c h / 0.1) !important;
  color: oklch(from var(--accent) calc(l - 0.18) c h) !important;
  border-left-color: var(--accent) !important;
  font-weight: 600 !important;
}

/* TOC scrollbar customizada */
.gps-notebook-overlay .gpsn-toc-pane::-webkit-scrollbar {
  width: 6px;
}
.gps-notebook-overlay .gpsn-toc-pane::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
.gps-notebook-overlay .gpsn-toc-pane::-webkit-scrollbar-thumb:hover {
  background: var(--text-4);
}

/* Editor pane — scrollbar igual */
.gps-notebook-overlay .gpsn-editor-pane::-webkit-scrollbar,
.gps-notebook-overlay .gpsn-preview-pane::-webkit-scrollbar {
  width: 8px;
}
.gps-notebook-overlay .gpsn-editor-pane::-webkit-scrollbar-thumb,
.gps-notebook-overlay .gpsn-preview-pane::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
.gps-notebook-overlay .gpsn-editor-pane::-webkit-scrollbar-thumb:hover,
.gps-notebook-overlay .gpsn-preview-pane::-webkit-scrollbar-thumb:hover {
  background: var(--text-4);
}

/* ============================== TOOLBAR + FOOTER ============================== */
/* Toolbar — buttons mais destacados, separadores sutis */
.gps-notebook-overlay .gpsn-toolbar {
  padding: 8px 16px !important;
  gap: 2px;
  border-bottom: 1px solid var(--border) !important;
  background: var(--bg-2) !important;
}
.gps-notebook-overlay .gpsn-toolbar .gpsn-tool {
  padding: 6px 8px !important;
  border-radius: 6px !important;
  color: var(--text-2) !important;
  transition: background 120ms ease, color 120ms ease;
}
.gps-notebook-overlay .gpsn-toolbar .gpsn-tool:hover {
  background: var(--bg-3) !important;
  color: var(--text-1) !important;
}
.gps-notebook-overlay .gpsn-toolbar .gpsn-tool.is-active {
  background: oklch(from var(--accent) l c h / 0.12) !important;
  color: oklch(from var(--accent) calc(l - 0.18) c h) !important;
}

/* Toolbar separator (entre grupos de ferramentas) */
.gps-notebook-overlay .gpsn-toolbar-sep,
.gps-notebook-overlay .gpsn-toolbar [class*="separator"] {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 4px;
}

/* Footer — sticky, padding compacto */
.gps-notebook-overlay .gpsn-footer {
  padding: 10px 18px !important;
  font-size: 11px !important;
  color: var(--text-3) !important;
  background: var(--bg-2) !important;
  border-top: 1px solid var(--border) !important;
}

/* Visual / MD toggle pills no header */
.gps-notebook-overlay .gpsn-mode-toggle,
.gps-notebook-overlay [class*="mode-toggle"] {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 8px !important;
}

/* Scroll suave ao clicar em TOC item */
.gps-notebook-overlay .gpsn-editor-pane,
.gps-notebook-overlay .gpsn-preview-pane {
  scroll-behavior: smooth;
}

/* ============================== MERMAID — safety net ============================== */
/* Mermaid 10.x tem um bug onde elementos temporários de render ficam
   órfãos no body quando o source é inválido (a SVG com bomb 💣 e
   "Syntax error in text" fica fixed no canto da tela). 4 camadas de
   defesa pra garantir que NUNCA apareça: */

/* 1. Remove direto-filhos do body com IDs conhecidos do Mermaid */
body > [id^="dmermaid-"],
body > [id^="mermaid-"]:not([id^="mermaid-svg"]),
body > [id^="notas-mmd-"],
body > [id^="gpsn-mmd-"],
body > [id^="gpsn-edmmd-"],
body > [id^="cards-mmd-"],
body > [id^="cards-mer-"],
body > div[id^="d"][id$="0"]:has(> svg[aria-roledescription="error"]),
body > div[id^="d"][id$="1"]:has(> svg[aria-roledescription="error"]),
body > div[id^="d"][id$="2"]:has(> svg[aria-roledescription="error"]),
body > div[id^="d"][id$="3"]:has(> svg[aria-roledescription="error"]),
body > div[id^="d"][id$="4"]:has(> svg[aria-roledescription="error"]),
body > div[id^="d"][id$="5"]:has(> svg[aria-roledescription="error"]),
body > div[id^="d"][id$="6"]:has(> svg[aria-roledescription="error"]),
body > div[id^="d"][id$="7"]:has(> svg[aria-roledescription="error"]),
body > div[id^="d"][id$="8"]:has(> svg[aria-roledescription="error"]),
body > div[id^="d"][id$="9"]:has(> svg[aria-roledescription="error"]) {
  display: none !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 2. Qualquer SVG de erro do Mermaid em qualquer lugar — esconde geral.
   Mermaid marca os erros com aria-roledescription="error" */
svg[aria-roledescription="error"] {
  display: none !important;
}

/* 3. Direto-filhos do body que são DIVs sem classe e contêm SVG de erro
   (catch-all pra IDs randômicos do mermaid 10.x) */
body > div:not([class]):has(> svg[aria-roledescription="error"]) {
  display: none !important;
}

/* ============================== WIKILINK HOVER PREVIEW ============================== */
/* Popover Notion-style que aparece ao passar mouse sobre [[Outra Nota]].
   Mostra título + primeiras linhas do conteúdo. Renderizado no body
   pelo window.notePipeline.installWikilinkHoverPreview. */

.nyvvo-wikilink-preview {
  position: fixed;
  z-index: 1300;
  max-width: 360px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px oklch(0% 0 0 / 0.35);
  font-family: var(--font-sans);
  color: var(--text-1);
  overflow: hidden;
  animation: wikilinkPreviewIn 140ms ease;
  pointer-events: auto;
}
@keyframes wikilinkPreviewIn {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nyvvo-wikilink-preview-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  font: 600 13px/1.3 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--text-1);
}
.nyvvo-wikilink-preview-icon {
  font-size: 14px;
  flex-shrink: 0;
}
.nyvvo-wikilink-preview-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.nyvvo-wikilink-preview-body {
  padding: 12px 14px;
  font: 400 12.5px/1.55 var(--font-sans);
  color: var(--text-2);
  white-space: pre-wrap;
  max-height: 180px;
  overflow-y: auto;
}
.nyvvo-wikilink-preview-empty {
  font-style: italic;
  color: var(--text-3);
}

/* Dentro do escopo claro do caderno/Notas — preview também claro */
.gps-notebook-overlay .nyvvo-wikilink-preview,
#notas-root.nv-app .notas-content .nyvvo-wikilink-preview {
  background: #ffffff;
  border-color: #e5e5e5;
  color: #1a1a1a;
}
.gps-notebook-overlay .nyvvo-wikilink-preview-head,
#notas-root.nv-app .notas-content .nyvvo-wikilink-preview-head {
  background: #f7f7f5;
  border-bottom-color: #e5e5e5;
  color: #1a1a1a;
}
.gps-notebook-overlay .nyvvo-wikilink-preview-body,
#notas-root.nv-app .notas-content .nyvvo-wikilink-preview-body {
  color: #4a4a4a;
}

/* ============================== STICKY HEADING BREADCRUMB ============================== */
/* Mostra qual H1 › H2 › H3 você está dentro durante scroll de nota longa.
   Renderizado pelo notePipeline.installStickyHeadingBreadcrumb dentro
   do scrollContainer (gpsn-editor-pane / gpsn-preview-pane / etc). */

.nyvvo-sticky-heading {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  font: 500 12px/1.2 var(--font-sans);
  color: var(--text-3);
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* Fade-in suave quando aparece ao começar scroll */
  animation: stickyHeadingIn 180ms ease;
}
.nyvvo-sticky-heading::-webkit-scrollbar { display: none; }
@keyframes stickyHeadingIn {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nyvvo-sticky-heading-crumb {
  background: transparent;
  border: none;
  color: var(--text-2);
  font: inherit;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  transition: background 100ms ease, color 100ms ease;
}
.nyvvo-sticky-heading-crumb:hover {
  background: var(--bg-2);
  color: var(--text-1);
}
.nyvvo-sticky-heading-crumb:last-child {
  color: var(--text-1);
  font-weight: 600;
}
.nyvvo-sticky-heading-sep {
  color: var(--text-4);
  font-size: 11px;
  flex-shrink: 0;
}

/* Tema claro herdado dentro do caderno + Notas */
.gps-notebook-overlay .nyvvo-sticky-heading,
#notas-root.nv-app .notas-content .nyvvo-sticky-heading {
  background: oklch(1 0 0 / 0.92);
  border-bottom-color: #e5e5e5;
  color: #6e6e6e;
}
.gps-notebook-overlay .nyvvo-sticky-heading-crumb,
#notas-root.nv-app .notas-content .nyvvo-sticky-heading-crumb {
  color: #4a4a4a;
}
.gps-notebook-overlay .nyvvo-sticky-heading-crumb:hover,
#notas-root.nv-app .notas-content .nyvvo-sticky-heading-crumb:hover {
  background: #f0f0f0;
  color: #1a1a1a;
}
.gps-notebook-overlay .nyvvo-sticky-heading-crumb:last-child,
#notas-root.nv-app .notas-content .nyvvo-sticky-heading-crumb:last-child {
  color: #1a1a1a;
}
.gps-notebook-overlay .nyvvo-sticky-heading-sep,
#notas-root.nv-app .notas-content .nyvvo-sticky-heading-sep {
  color: #9a9a9a;
}

/* ==========================================================================
   MAPAS MENTAIS (module-mapas) — Fase 1
   Explorador de pastas/mapas (esquerda) + editor Mind Elixir (direita).
   ========================================================================== */
#module-mapas.nv-app .mp-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
/* base.css dá `.page-header { padding: 1.5rem }` — zera o esquerdo pra o
   título alinhar com o conteúdo (mesma correção do Progresso). */
#module-mapas.nv-app .page-header {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-1);
  margin: 0 0 6px;
  padding-left: 0;
}
#module-mapas.nv-app .mp-page-subtitle {
  font: 400 14px/1.5 var(--font-sans);
  color: var(--text-3);
  margin: 0;
}
#module-mapas.nv-app .mp-head-actions { display: flex; gap: 10px; }

#module-mapas.nv-app .mp-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 10px;
  font: 600 13px/1 var(--font-sans);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
#module-mapas.nv-app .mp-btn span[data-lucide],
#module-mapas.nv-app .mp-btn svg { width: 15px; height: 15px; }
#module-mapas.nv-app .mp-btn--primary {
  background: var(--accent);
  color: var(--accent-fg, #06231a);
}
#module-mapas.nv-app .mp-btn--primary:hover { background: var(--accent-strong, var(--accent)); }
#module-mapas.nv-app .mp-btn--ghost {
  background: var(--bg-2);
  color: var(--text-2);
  border-color: oklch(0.28 0.010 250 / 0.5);
}
#module-mapas.nv-app .mp-btn--ghost:hover { background: var(--bg-3); color: var(--text-1); }

/* Shell 2 colunas ocupando a altura da viewport disponível */
#module-mapas.nv-app .mp-shell {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 16px;
  height: calc(100vh - 210px);
  min-height: 460px;
}
@media (max-width: 900px) {
  #module-mapas.nv-app .mp-shell { grid-template-columns: 1fr; height: auto; }
  #module-mapas.nv-app .mp-editor-wrap { min-height: 460px; }
}

/* Sidebar / explorador */
#module-mapas.nv-app .mp-sidebar {
  background: var(--bg-1);
  border: 1px solid oklch(0.28 0.010 250 / 0.5);
  border-radius: var(--r-lg, 14px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
#module-mapas.nv-app .mp-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid oklch(0.28 0.010 250 / 0.4);
  flex-shrink: 0;
}
#module-mapas.nv-app .mp-sidebar-title {
  font: 600 11px/1 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-4, var(--text-3));
}
#module-mapas.nv-app .mp-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 7px;
  background: transparent;
  border: none;
  color: var(--text-3);
  cursor: pointer;
}
#module-mapas.nv-app .mp-icon-btn:hover { background: var(--bg-2); color: var(--text-1); }
#module-mapas.nv-app .mp-icon-btn span[data-lucide],
#module-mapas.nv-app .mp-icon-btn svg { width: 15px; height: 15px; }

#module-mapas.nv-app .mp-tree { flex: 1; overflow-y: auto; padding: 8px 8px 16px; min-height: 0; }
#module-mapas.nv-app .mp-tree-state { padding: 16px; color: var(--text-3); font-size: 13px; }
#module-mapas.nv-app .mp-tree-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 28px 16px;
  color: var(--text-3);
}
#module-mapas.nv-app .mp-tree-empty span[data-lucide],
#module-mapas.nv-app .mp-tree-empty svg { width: 26px; height: 26px; color: var(--text-4, var(--text-3)); }
#module-mapas.nv-app .mp-link-btn {
  background: none; border: none; color: var(--accent);
  font: 600 13px/1 var(--font-sans); cursor: pointer;
}
#module-mapas.nv-app .mp-link-btn:hover { text-decoration: underline; }

/* Nós da árvore (pasta / mapa) */
#module-mapas.nv-app .mp-node-row {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 5px 8px;
  padding-left: calc(8px + var(--depth, 0) * 14px);
  border-radius: 8px;
  color: var(--text-2);
  user-select: none;
}
#module-mapas.nv-app .mp-node-row:hover { background: var(--bg-2); }
#module-mapas.nv-app .mp-node--map.is-active > .mp-node-row {
  background: oklch(from var(--accent) l c h / 0.14);
  color: var(--text-1);
}
#module-mapas.nv-app .mp-caret {
  width: 14px; height: 14px;
  flex-shrink: 0;
  color: var(--text-4, var(--text-3));
  transition: transform 140ms ease;
}
#module-mapas.nv-app .mp-caret.is-open { transform: rotate(90deg); }
#module-mapas.nv-app .mp-caret.is-empty { visibility: hidden; }
#module-mapas.nv-app .mp-node-icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-3); }
#module-mapas.nv-app .mp-node--map .mp-node-icon { color: var(--accent); }
#module-mapas.nv-app .mp-node-label {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#module-mapas.nv-app .mp-node-actions { display: none; gap: 2px; flex-shrink: 0; }
#module-mapas.nv-app .mp-node-row:hover .mp-node-actions { display: flex; }
#module-mapas.nv-app .mp-row-btn {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--text-3);
  cursor: pointer;
}
#module-mapas.nv-app .mp-row-btn:hover { background: var(--bg-3); color: var(--text-1); }
#module-mapas.nv-app .mp-row-btn--danger:hover { color: oklch(0.68 0.18 25); }
#module-mapas.nv-app .mp-row-btn span[data-lucide],
#module-mapas.nv-app .mp-row-btn svg { width: 13px; height: 13px; }

/* Editor */
#module-mapas.nv-app .mp-editor-wrap {
  position: relative;
  background: var(--bg-1);
  border: 1px solid oklch(0.28 0.010 250 / 0.5);
  border-radius: var(--r-lg, 14px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
#module-mapas.nv-app .mp-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid oklch(0.28 0.010 250 / 0.4);
  flex-shrink: 0;
}
#module-mapas.nv-app .mp-map-title {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 6px 8px;
  color: var(--text-1);
  font: 600 15px/1.2 var(--font-display);
  outline: none;
}
#module-mapas.nv-app .mp-map-title:hover { border-color: oklch(0.28 0.010 250 / 0.5); }
#module-mapas.nv-app .mp-map-title:focus { border-color: var(--accent); background: var(--bg-2); }
#module-mapas.nv-app .mp-save-status {
  font: 500 11.5px/1 var(--font-sans);
  color: var(--text-4, var(--text-3));
  flex-shrink: 0;
}
#module-mapas.nv-app .mp-save-status[data-state="saved"] { color: var(--accent); }

#module-mapas.nv-app .mp-editor { flex: 1; min-height: 0; width: 100%; }
/* Mind Elixir preenche o container */
#module-mapas.nv-app .mp-editor > .map-container,
#module-mapas.nv-app .mp-editor > .mind-elixir { width: 100%; height: 100%; }

/* Estado vazio (sobreposto ao editor) */
#module-mapas.nv-app .mp-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 24px;
  background: var(--bg-1);
}
#module-mapas.nv-app .mp-empty-icon {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: oklch(0.74 0.16 152 / 0.14);
  color: oklch(0.80 0.17 152);
  margin-bottom: 4px;
}
#module-mapas.nv-app .mp-empty-icon span[data-lucide],
#module-mapas.nv-app .mp-empty-icon svg { width: 22px; height: 22px; }
#module-mapas.nv-app .mp-empty-title { font: 650 16px/1.2 var(--font-display); color: var(--text-1); margin: 0; }
#module-mapas.nv-app .mp-empty-text { font-size: 13px; color: var(--text-3); max-width: 340px; margin: 0 0 6px; line-height: 1.5; }

/* ---- Fase 2: toolbar de ferramentas, tela cheia, atalhos, node-menu ---- */
#module-mapas.nv-app .mp-editor-toolbar { gap: 8px; }
#module-mapas.nv-app .mp-map-title { flex: 1 1 120px; min-width: 80px; }
#module-mapas.nv-app .mp-tools {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
#module-mapas.nv-app .mp-tool {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
#module-mapas.nv-app .mp-tool:hover { background: var(--bg-2); color: var(--text-1); }
#module-mapas.nv-app .mp-tool--danger:hover { color: oklch(0.68 0.18 25); }
#module-mapas.nv-app .mp-tool span[data-lucide],
#module-mapas.nv-app .mp-tool svg { width: 16px; height: 16px; }
#module-mapas.nv-app .mp-tool-sep {
  width: 1px; height: 18px;
  background: oklch(0.28 0.010 250 / 0.6);
  margin: 0 4px;
  flex-shrink: 0;
}

/* Tela cheia — a Fullscreen API promove o .mp-editor-wrap; garante fundo e
   cantos retos. `.mp-fs-fallback` cobre navegadores que bloqueiam a API. */
#module-mapas.nv-app .mp-editor-wrap:fullscreen,
#module-mapas.nv-app .mp-editor-wrap.mp-fs-fallback {
  border-radius: 0;
  border: none;
  background: var(--bg-1);
}
#module-mapas.nv-app .mp-editor-wrap.mp-fs-fallback {
  position: fixed;
  inset: 0;
  z-index: 4000;
}

/* Overlay de atalhos */
#module-mapas.nv-app .mp-shortcuts {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: oklch(0% 0 0 / 0.55);
  backdrop-filter: blur(2px);
}
#module-mapas.nv-app .mp-shortcuts[hidden] { display: none; }
#module-mapas.nv-app .mp-shortcuts-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-1);
  border: 1px solid oklch(0.28 0.010 250 / 0.6);
  border-radius: 14px;
  box-shadow: 0 20px 60px oklch(0% 0 0 / 0.5);
  overflow: hidden;
}
#module-mapas.nv-app .mp-shortcuts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid oklch(0.28 0.010 250 / 0.5);
}
#module-mapas.nv-app .mp-shortcuts-title {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 14px/1 var(--font-display); color: var(--text-1);
}
#module-mapas.nv-app .mp-shortcuts-title span[data-lucide],
#module-mapas.nv-app .mp-shortcuts-title svg { width: 16px; height: 16px; color: var(--accent); }
#module-mapas.nv-app .mp-shortcuts-close {
  background: transparent; border: none; color: var(--text-3);
  font-size: 22px; line-height: 1; width: 30px; height: 30px;
  border-radius: 7px; cursor: pointer;
}
#module-mapas.nv-app .mp-shortcuts-close:hover { background: var(--bg-2); color: var(--text-1); }
#module-mapas.nv-app .mp-shortcuts-list {
  list-style: none; margin: 0; padding: 12px 16px;
  display: grid; gap: 9px;
}
#module-mapas.nv-app .mp-shortcuts-list li {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; color: var(--text-2);
}
#module-mapas.nv-app .mp-keys {
  display: inline-flex; gap: 3px; flex-shrink: 0;
  min-width: 92px;
}
#module-mapas.nv-app .mp-shortcuts kbd {
  display: inline-block;
  min-width: 20px; text-align: center;
  padding: 2px 6px;
  font: 600 11px/1.3 var(--font-mono, monospace);
  color: var(--text-1);
  background: var(--bg-3, var(--bg-2));
  border: 1px solid oklch(0.28 0.010 250 / 0.7);
  border-radius: 5px;
}
#module-mapas.nv-app .mp-shortcuts-foot {
  margin: 0; padding: 12px 16px 16px;
  font-size: 12px; color: var(--text-3); line-height: 1.5;
  border-top: 1px solid oklch(0.28 0.010 250 / 0.4);
}
#module-mapas.nv-app .mp-shortcuts-foot kbd {
  padding: 1px 5px; font: 600 10.5px/1.2 var(--font-mono, monospace);
  background: var(--bg-3, var(--bg-2)); border: 1px solid oklch(0.28 0.010 250 / 0.7);
  border-radius: 4px; color: var(--text-2);
}

/* Painel de estilo do node-menu vem claro por padrão — deixa no tema dark */
#module-mapas.nv-app .node-menu {
  background: var(--bg-2) !important;
  color: var(--text-1) !important;
  border: 1px solid oklch(0.28 0.010 250 / 0.6);
  box-shadow: 0 12px 34px oklch(0% 0 0 / 0.45) !important;
}
#module-mapas.nv-app .node-menu .nm-fontsize-container,
#module-mapas.nv-app .node-menu .row { color: var(--text-2); }
#module-mapas.nv-app .node-menu input {
  background: var(--bg-1);
  color: var(--text-1);
  border: 1px solid oklch(0.28 0.010 250 / 0.6);
  border-radius: 6px;
}
#module-mapas.nv-app .node-menu .size svg { fill: var(--text-3); }
#module-mapas.nv-app .node-menu .size.size-selected svg,
#module-mapas.nv-app .node-menu .bold.size-selected svg { fill: var(--accent); }
#module-mapas.nv-app .node-menu .palette {
  border: 1px solid oklch(0.28 0.010 250 / 0.5);
}
#module-mapas.nv-app .node-menu .nmenu-selected,
#module-mapas.nv-app .node-menu .palette.nmenu-selected {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px oklch(from var(--accent) l c h / 0.4);
}

/* ---- Criação rápida: "+" flutuante ao passar o mouse num nó ---- */
#module-mapas.nv-app .mp-qa-btn {
  position: absolute;
  z-index: 60;
  display: none;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-fg, #06231a);
  border: 2px solid var(--bg-1);
  box-shadow: 0 2px 10px oklch(0% 0 0 / 0.45);
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease;
}
#module-mapas.nv-app .mp-qa-btn.is-on {
  display: grid;
  animation: mpQaIn 120ms ease;
}
#module-mapas.nv-app .mp-qa-btn:hover {
  transform: scale(1.18);
  background: var(--accent-strong, var(--accent));
}
#module-mapas.nv-app .mp-qa-btn span[data-lucide],
#module-mapas.nv-app .mp-qa-btn svg { width: 15px; height: 15px; }
@keyframes mpQaIn {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---- Modais de MODELO e ESTILO ---- */
#module-mapas.nv-app .mp-modal {
  position: fixed;
  inset: 0;
  z-index: 5200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: oklch(0% 0 0 / 0.55);
  backdrop-filter: blur(2px);
}
#module-mapas.nv-app .mp-modal[hidden] { display: none; }
#module-mapas.nv-app .mp-modal-card {
  width: 100%;
  max-width: 420px;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-1);
  border: 1px solid oklch(0.28 0.010 250 / 0.6);
  border-radius: 14px;
  box-shadow: 0 24px 64px oklch(0% 0 0 / 0.5);
  overflow: hidden;
}
#module-mapas.nv-app .mp-modal-card--wide { max-width: 640px; }
#module-mapas.nv-app .mp-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid oklch(0.28 0.010 250 / 0.5);
  flex-shrink: 0;
}
#module-mapas.nv-app .mp-modal-title {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 14px/1 var(--font-display); color: var(--text-1);
}
#module-mapas.nv-app .mp-modal-title span[data-lucide],
#module-mapas.nv-app .mp-modal-title svg { width: 16px; height: 16px; color: var(--accent); }
#module-mapas.nv-app .mp-modal-close {
  background: transparent; border: none; color: var(--text-3);
  font-size: 22px; line-height: 1; width: 30px; height: 30px;
  border-radius: 7px; cursor: pointer; flex-shrink: 0;
}
#module-mapas.nv-app .mp-modal-close:hover { background: var(--bg-2); color: var(--text-1); }

/* grade de modelos */
#module-mapas.nv-app .mp-tpl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 16px;
  overflow-y: auto;
}
@media (max-width: 560px) { #module-mapas.nv-app .mp-tpl-grid { grid-template-columns: repeat(2, 1fr); } }
#module-mapas.nv-app .mp-tpl-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px;
  border-radius: 12px;
  background: var(--bg-2);
  border: 1px solid oklch(0.28 0.010 250 / 0.5);
  cursor: pointer;
  text-align: left;
  transition: border-color 140ms ease, background 140ms ease, transform 80ms ease;
}
#module-mapas.nv-app .mp-tpl-card:hover {
  border-color: var(--accent);
  background: var(--bg-3, var(--bg-2));
}
#module-mapas.nv-app .mp-tpl-card:active { transform: scale(0.98); }
#module-mapas.nv-app .mp-tpl-icon {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: oklch(0.74 0.16 152 / 0.14);
  color: var(--accent);
}
#module-mapas.nv-app .mp-tpl-icon span[data-lucide],
#module-mapas.nv-app .mp-tpl-icon svg { width: 17px; height: 17px; }
#module-mapas.nv-app .mp-tpl-name { font: 600 13.5px/1.2 var(--font-sans); color: var(--text-1); }
#module-mapas.nv-app .mp-tpl-desc { font-size: 11.5px; color: var(--text-3); line-height: 1.35; }

/* grade de estilos/temas */
#module-mapas.nv-app .mp-theme-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 16px;
  overflow-y: auto;
}
#module-mapas.nv-app .mp-theme-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: var(--bg-2);
  border: 1px solid oklch(0.28 0.010 250 / 0.5);
  cursor: pointer;
  text-align: left;
  transition: border-color 140ms ease, transform 80ms ease;
}
#module-mapas.nv-app .mp-theme-card:hover { border-color: var(--accent); }
#module-mapas.nv-app .mp-theme-card:active { transform: scale(0.98); }
/* grid (não flex) pras amostras de cor não colapsarem dentro do <button> */
#module-mapas.nv-app .mp-theme-sws {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  width: 100%;
}
#module-mapas.nv-app .mp-theme-sws .mp-sw {
  height: 20px;
  border-radius: 5px;
}
#module-mapas.nv-app .mp-theme-name { font: 600 13px/1 var(--font-sans); color: var(--text-1); }

/* ---- Menu de contexto (botão direito no nó) ---- */
#module-mapas.nv-app .mp-ctxmenu {
  position: absolute;
  z-index: 80;
  min-width: 224px;
  max-width: 260px;
  padding: 6px;
  background: var(--bg-1);
  border: 1px solid oklch(0.28 0.010 250 / 0.7);
  border-radius: 12px;
  box-shadow: 0 16px 44px oklch(0% 0 0 / 0.55);
}
#module-mapas.nv-app .mp-ctxmenu[hidden] { display: none; }
#module-mapas.nv-app .mp-ctx-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border-radius: 7px;
  background: transparent;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  text-align: left;
  font: 500 13px/1 var(--font-sans);
}
#module-mapas.nv-app .mp-ctx-item:hover { background: var(--bg-2); color: var(--text-1); }
#module-mapas.nv-app .mp-ctx-item--danger:hover { color: oklch(0.68 0.18 25); background: oklch(0.68 0.18 25 / 0.12); }
#module-mapas.nv-app .mp-ctx-ico { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-3); }
#module-mapas.nv-app .mp-ctx-item:hover .mp-ctx-ico { color: currentColor; }
#module-mapas.nv-app .mp-ctx-txt { flex: 1; min-width: 0; }
#module-mapas.nv-app .mp-ctx-kbd {
  font: 600 10px/1 var(--font-mono, monospace);
  color: var(--text-4, var(--text-3));
  background: var(--bg-2);
  border: 1px solid oklch(0.28 0.010 250 / 0.7);
  border-radius: 4px;
  padding: 2px 5px;
  flex-shrink: 0;
}
#module-mapas.nv-app .mp-ctx-sep {
  height: 1px;
  background: oklch(0.28 0.010 250 / 0.55);
  margin: 5px 4px;
}
#module-mapas.nv-app .mp-ctx-label {
  font: 600 9.5px/1 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-4, var(--text-3));
  padding: 7px 9px 4px;
}
#module-mapas.nv-app .mp-ctx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 8px 6px;
}
#module-mapas.nv-app .mp-ctx-chip {
  font: 500 11.5px/1 var(--font-sans);
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid oklch(0.28 0.010 250 / 0.6);
  color: var(--text-2);
  cursor: pointer;
}
#module-mapas.nv-app .mp-ctx-chip:hover { border-color: var(--accent); color: var(--text-1); }
#module-mapas.nv-app .mp-ctx-chip--muted { color: var(--text-3); }
#module-mapas.nv-app .mp-ctx-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 9px 8px;
}
#module-mapas.nv-app .mp-ctx-sw {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid oklch(1 0 0 / 0.15);
  cursor: pointer;
  padding: 0;
}
#module-mapas.nv-app .mp-ctx-sw:hover { transform: scale(1.12); border-color: var(--text-1); }
#module-mapas.nv-app .mp-ctx-sw--none {
  background:
    linear-gradient(45deg, transparent 45%, oklch(0.68 0.18 25) 45%, oklch(0.68 0.18 25) 55%, transparent 55%),
    var(--bg-2);
  border-color: oklch(0.28 0.010 250 / 0.7);
}
#module-mapas.nv-app .mp-ctx-emojis {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 0 8px 8px;
}
#module-mapas.nv-app .mp-ctx-emoji {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: transparent;
  border: none;
  font-size: 15px;
  cursor: pointer;
}
#module-mapas.nv-app .mp-ctx-emoji:hover { background: var(--bg-2); }
#module-mapas.nv-app .mp-ctx-emoji--more { font-size: 18px; color: var(--text-2); font-weight: 700; }

/* tamanho de fonte (A pequeno/médio/grande) */
#module-mapas.nv-app .mp-ctx-fonts { display: flex; gap: 4px; padding: 0 8px 8px; align-items: center; }
#module-mapas.nv-app .mp-ctx-font {
  min-width: 30px; height: 28px;
  display: grid; place-items: center;
  border-radius: 7px;
  background: var(--bg-2);
  border: 1px solid oklch(0.28 0.010 250 / 0.6);
  color: var(--text-2);
  cursor: pointer;
  font-family: var(--font-display);
  line-height: 1;
}
#module-mapas.nv-app .mp-ctx-font:nth-child(1) { font-size: 11px; }
#module-mapas.nv-app .mp-ctx-font:nth-child(2) { font-size: 14px; }
#module-mapas.nv-app .mp-ctx-font:nth-child(3) { font-size: 17px; }
#module-mapas.nv-app .mp-ctx-font:nth-child(4) { font-size: 20px; }
#module-mapas.nv-app .mp-ctx-font:hover { border-color: var(--accent); color: var(--text-1); }
#module-mapas.nv-app .mp-ctx-font.is-active { border-color: var(--accent); color: var(--accent); }

/* buscador de emojis */
#module-mapas.nv-app .mp-emoji-body { display: flex; flex-direction: column; padding: 14px 16px 16px; gap: 10px; }
#module-mapas.nv-app .mp-emoji-search {
  width: 100%;
  padding: 9px 12px;
  background: var(--bg-2);
  border: 1px solid oklch(0.28 0.010 250 / 0.6);
  border-radius: 9px;
  color: var(--text-1);
  font-size: 13.5px;
  outline: none;
}
#module-mapas.nv-app .mp-emoji-search:focus { border-color: var(--accent); background: var(--bg-1); }
#module-mapas.nv-app .mp-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
}
#module-mapas.nv-app .mp-emoji-cell {
  aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 8px;
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
}
#module-mapas.nv-app .mp-emoji-cell:hover { background: var(--bg-2); transform: scale(1.12); }
#module-mapas.nv-app .mp-emoji-empty { grid-column: 1 / -1; color: var(--text-3); font-size: 13px; text-align: center; padding: 12px; }
#module-mapas.nv-app .mp-emoji-foot { margin: 0; font-size: 11.5px; color: var(--text-3); }

/* editor de anotação */
#module-mapas.nv-app .mp-memo-body { padding: 14px 16px; }
#module-mapas.nv-app .mp-memo-text {
  width: 100%;
  min-height: 160px;
  resize: vertical;
  padding: 11px 13px;
  background: var(--bg-2);
  border: 1px solid oklch(0.28 0.010 250 / 0.6);
  border-radius: 10px;
  color: var(--text-1);
  font: 400 13.5px/1.55 var(--font-sans);
  outline: none;
}
#module-mapas.nv-app .mp-memo-text:focus { border-color: var(--accent); background: var(--bg-1); }
#module-mapas.nv-app .mp-memo-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 0 16px 16px;
}

/* alça de redimensionar largura (borda direita do nó selecionado) */
#module-mapas.nv-app .mp-resize {
  position: absolute;
  z-index: 70;
  width: 8px;
  height: 28px;
  border-radius: 5px;
  background: var(--accent);
  border: 2px solid var(--bg-1);
  box-shadow: 0 1px 5px oklch(0% 0 0 / 0.45);
  cursor: ew-resize;
  opacity: 0.9;
  transition: height 100ms ease, opacity 100ms ease;
}
#module-mapas.nv-app .mp-resize[hidden] { display: none; }
#module-mapas.nv-app .mp-resize:hover { opacity: 1; height: 36px; }

/* Toggle nativo de recolher/expandir ramo (me-epd, a "bolinha" −/+ na ponta do
   ramo). O CSS da lib deixa o "−" (recolher, classe .minus) com opacity:0 até o
   hover — então recolher os níveis dos ramos passava despercebido. Forçamos ele
   sempre visível (o #id do seletor já vence a regra .minus da lib, sem
   !important) e damos um alvo de clique um pouco maior/realçado. */
#module-mapas.nv-app .map-container me-epd {
  cursor: pointer;
  opacity: 0.9;
  filter: drop-shadow(0 1px 2px oklch(0% 0 0 / 0.55));
  transition: opacity 120ms ease, transform 120ms ease;
}
#module-mapas.nv-app .map-container me-epd:hover {
  opacity: 1;
  transform: scale(1.2);
}

/* ==========================================================================
   TAREFAS (module-tarefas) — gestão de tarefas e projetos (general-purpose)
   Sidebar interna (vistas + projetos) à esquerda, vista ativa à direita.
   Convenção: prefixo tf-, nomes pt-br que ESCAPAM dos seletores [class*=]
   do flat.css congelado (docs/convencao-css-modulos.md) — nunca usar
   title/-card/active/low/high/completed/progress em nomes de classe.
   ========================================================================== */
#module-tarefas.nv-app .tf-cabecalho {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
#module-tarefas.nv-app .tf-titulo-pagina {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-1);
  margin: 0 0 6px;
}
#module-tarefas.nv-app .tf-subtitulo {
  font: 400 14px/1.5 var(--font-sans);
  color: var(--text-3);
  margin: 0;
}

/* Botões */
#module-tarefas.nv-app .tf-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 10px;
  font: 600 13px/1 var(--font-sans);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
#module-tarefas.nv-app .tf-btn span[data-lucide],
#module-tarefas.nv-app .tf-btn svg { width: 15px; height: 15px; }
#module-tarefas.nv-app .tf-btn-primario { background: var(--accent); color: var(--accent-fg, #06231a); }
#module-tarefas.nv-app .tf-btn-primario:hover { background: var(--accent-strong, var(--accent)); }
#module-tarefas.nv-app .tf-btn-perigo {
  background: oklch(0.35 0.12 25 / 0.15);
  color: oklch(0.72 0.16 25);
  border-color: oklch(0.5 0.14 25 / 0.35);
}
#module-tarefas.nv-app .tf-btn-perigo:hover { background: oklch(0.35 0.12 25 / 0.28); }
#module-tarefas.nv-app .tf-btn-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--text-3);
  cursor: pointer;
}
#module-tarefas.nv-app .tf-btn-icone:hover { background: var(--bg-3); color: var(--text-1); }
#module-tarefas.nv-app .tf-btn-icone span[data-lucide],
#module-tarefas.nv-app .tf-btn-icone svg { width: 15px; height: 15px; }

/* Corpo 2 colunas */
#module-tarefas.nv-app .tf-corpo {
  display: grid;
  grid-template-columns: 264px 1fr;
  gap: 16px;
  align-items: start;
  min-height: 460px;
}
@media (max-width: 900px) {
  #module-tarefas.nv-app .tf-corpo { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------- sidebar interna */
#module-tarefas.nv-app .tf-lateral {
  background: var(--bg-1);
  border: 1px solid oklch(0.28 0.010 250 / 0.5);
  border-radius: var(--r-lg, 14px);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 12px;
}
#module-tarefas.nv-app .tf-busca-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
#module-tarefas.nv-app .tf-busca-icone {
  position: absolute;
  left: 10px;
  width: 14px; height: 14px;
  color: var(--text-3);
  pointer-events: none;
}
#module-tarefas.nv-app .tf-busca {
  width: 100%;
  padding: 8px 10px 8px 32px;
  border-radius: 10px;
  border: 1px solid oklch(0.28 0.010 250 / 0.5);
  background: var(--bg-2);
  color: var(--text-1);
  font: 400 13px/1.2 var(--font-sans);
}
#module-tarefas.nv-app .tf-busca:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

#module-tarefas.nv-app .tf-vistas { display: flex; flex-direction: column; gap: 2px; }
#module-tarefas.nv-app .tf-vista-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--text-2);
  font: 500 13px/1.2 var(--font-sans);
  cursor: pointer;
  text-align: left;
}
#module-tarefas.nv-app .tf-vista-link:hover { background: var(--bg-2); color: var(--text-1); }
#module-tarefas.nv-app .tf-vista-link.tf-ativa { background: var(--bg-3); color: var(--text-1); }
#module-tarefas.nv-app .tf-vista-link span[data-lucide],
#module-tarefas.nv-app .tf-vista-link svg { width: 15px; height: 15px; flex: none; }
#module-tarefas.nv-app .tf-vista-rotulo { flex: 1; }

#module-tarefas.nv-app .tf-qtd {
  font: 600 11px/1 var(--font-sans);
  color: var(--text-3);
  background: var(--bg-3);
  border-radius: 99px;
  padding: 3px 7px;
  min-width: 20px;
  text-align: center;
}
#module-tarefas.nv-app .tf-qtd-alerta { background: oklch(0.35 0.12 25 / 0.25); color: oklch(0.75 0.16 25); }

#module-tarefas.nv-app .tf-lateral-h {
  font: 700 11px/1.2 var(--font-sans);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 6px;
  padding: 0 10px;
}
#module-tarefas.nv-app .tf-lateral-vazio { font: 400 12px/1.4 var(--font-sans); color: var(--text-3); padding: 0 10px; margin: 0; }
#module-tarefas.nv-app .tf-projetos-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
#module-tarefas.nv-app .tf-projeto-linha { border-radius: 9px; }
#module-tarefas.nv-app .tf-projeto-linha.tf-ativa { background: var(--bg-3); }
#module-tarefas.nv-app .tf-projeto-link {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-2);
  font: 500 13px/1.2 var(--font-sans);
  cursor: pointer;
  text-align: left;
}
#module-tarefas.nv-app .tf-projeto-link:hover { background: var(--bg-2); color: var(--text-1); }
#module-tarefas.nv-app .tf-projeto-nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#module-tarefas.nv-app .tf-fav { width: 12px; height: 12px; color: oklch(0.8 0.14 85); flex: none; }
#module-tarefas.nv-app .tf-fav-cheia { fill: oklch(0.8 0.14 85); color: oklch(0.8 0.14 85); }

/* Anel de progresso do projeto */
#module-tarefas.nv-app .tf-anel { width: 18px; height: 18px; flex: none; transform: rotate(-90deg); }
#module-tarefas.nv-app .tf-anel circle { fill: none; stroke-width: 3; }
#module-tarefas.nv-app .tf-anel-fundo { stroke: var(--bg-3); }
#module-tarefas.nv-app .tf-anel-frente { stroke: currentColor; stroke-linecap: round; }

#module-tarefas.nv-app .tf-arquivados-alternar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-3);
  font: 500 12px/1.2 var(--font-sans);
  cursor: pointer;
}
#module-tarefas.nv-app .tf-arquivados-alternar:hover { background: var(--bg-2); color: var(--text-2); }
#module-tarefas.nv-app .tf-arquivados-alternar span[data-lucide],
#module-tarefas.nv-app .tf-arquivados-alternar svg { width: 13px; height: 13px; }
#module-tarefas.nv-app .tf-projetos-arquivados { opacity: 0.7; }

/* Cores de projeto/etiqueta (currentColor drive o anel/bola/etiqueta) */
#module-tarefas.nv-app .tf-cor-grafite  { color: oklch(0.62 0.01 250); }
#module-tarefas.nv-app .tf-cor-vermelho { color: oklch(0.66 0.19 25); }
#module-tarefas.nv-app .tf-cor-laranja  { color: oklch(0.72 0.15 55); }
#module-tarefas.nv-app .tf-cor-amarelo  { color: oklch(0.8 0.14 85); }
#module-tarefas.nv-app .tf-cor-verde    { color: oklch(0.7 0.14 150); }
#module-tarefas.nv-app .tf-cor-ciano    { color: oklch(0.74 0.11 200); }
#module-tarefas.nv-app .tf-cor-azul     { color: oklch(0.66 0.14 250); }
#module-tarefas.nv-app .tf-cor-roxo     { color: oklch(0.64 0.16 300); }
#module-tarefas.nv-app .tf-cor-rosa     { color: oklch(0.7 0.17 350); }

/* ------------------------------------------------------------ painel principal */
#module-tarefas.nv-app .tf-principal {
  background: var(--bg-1);
  border: 1px solid oklch(0.28 0.010 250 / 0.5);
  border-radius: var(--r-lg, 14px);
  padding: 18px 20px 24px;
  min-height: 460px;
}
#module-tarefas.nv-app .tf-vista-cabecalho { margin-bottom: 12px; }
#module-tarefas.nv-app .tf-vista-titulo {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 22px;
  color: var(--text-1);
  margin: 0;
}
#module-tarefas.nv-app .tf-vista-subtitulo { font: 400 13px/1.4 var(--font-sans); color: var(--text-3); margin: 4px 0 0; }
#module-tarefas.nv-app .tf-projeto-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#module-tarefas.nv-app .tf-projeto-bola { width: 12px; height: 12px; border-radius: 50%; background: currentColor; flex: none; }
#module-tarefas.nv-app .tf-projeto-andamento { font: 500 12px/1 var(--font-sans); color: var(--text-3); }
#module-tarefas.nv-app .tf-projeto-acoes { margin-left: auto; display: flex; gap: 4px; }

/* ------------------------------------------------------------------ quick-add */
#module-tarefas.nv-app .tf-quickadd {
  border: 1px solid oklch(0.28 0.010 250 / 0.6);
  border-radius: 12px;
  background: var(--bg-2);
  padding: 10px 12px;
  margin-bottom: 18px;
}
#module-tarefas.nv-app .tf-quickadd:focus-within { border-color: var(--accent); }
#module-tarefas.nv-app .tf-quickadd-linha1 { display: flex; align-items: center; gap: 10px; }
#module-tarefas.nv-app .tf-quickadd-icone { width: 16px; height: 16px; color: var(--text-3); flex: none; }
#module-tarefas.nv-app .tf-qa-texto {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-1);
  font: 400 14px/1.4 var(--font-sans);
  outline: none;
}
#module-tarefas.nv-app .tf-quickadd-linha2 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
#module-tarefas.nv-app .tf-qa-grupo { position: relative; }
#module-tarefas.nv-app .tf-qa-chip,
#module-tarefas.nv-app .tf-qa-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid oklch(0.28 0.010 250 / 0.6);
  background: var(--bg-1);
  color: var(--text-3);
  font: 500 12px/1.2 var(--font-sans);
  cursor: pointer;
}
#module-tarefas.nv-app .tf-qa-chip:hover,
#module-tarefas.nv-app .tf-qa-select:hover { color: var(--text-1); border-color: oklch(0.4 0.01 250 / 0.7); }
#module-tarefas.nv-app .tf-qa-chip span[data-lucide],
#module-tarefas.nv-app .tf-qa-chip svg { width: 13px; height: 13px; }
#module-tarefas.nv-app .tf-qa-definido { color: var(--accent); border-color: var(--accent); }
#module-tarefas.nv-app .tf-qa-prio-1 { color: oklch(0.66 0.19 25); }
#module-tarefas.nv-app .tf-qa-prio-2 { color: oklch(0.72 0.15 55); }
#module-tarefas.nv-app .tf-qa-prio-3 { color: oklch(0.66 0.14 250); }
#module-tarefas.nv-app .tf-qa-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 40;
  min-width: 210px;
  background: var(--bg-2);
  border: 1px solid oklch(0.32 0.010 250 / 0.7);
  border-radius: 10px;
  box-shadow: 0 12px 32px oklch(0 0 0 / 0.35);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#module-tarefas.nv-app .tf-qa-menu > button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-2);
  font: 500 12px/1.2 var(--font-sans);
  cursor: pointer;
  text-align: left;
}
#module-tarefas.nv-app .tf-qa-menu > button:hover { background: var(--bg-3); color: var(--text-1); }
#module-tarefas.nv-app .tf-qa-menu-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 10px;
  font: 500 12px/1.2 var(--font-sans);
  color: var(--text-3);
}
#module-tarefas.nv-app .tf-qa-menu-linha input[type="date"],
#module-tarefas.nv-app .tf-qa-menu-linha input[type="time"] {
  background: var(--bg-1);
  border: 1px solid oklch(0.28 0.010 250 / 0.6);
  border-radius: 7px;
  color: var(--text-1);
  font: 400 12px/1.2 var(--font-sans);
  padding: 4px 6px;
}
#module-tarefas.nv-app .tf-qa-etiqueta-opcao { display: flex; align-items: center; gap: 8px; cursor: pointer; }

/* --------------------------------------------------------------------- listas */
#module-tarefas.nv-app .tf-grupo { margin-bottom: 20px; }
#module-tarefas.nv-app .tf-grupo-h {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 13px/1.2 var(--font-sans);
  color: var(--text-2);
  margin: 0 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid oklch(0.28 0.010 250 / 0.4);
}
#module-tarefas.nv-app .tf-grupo-vencido { color: oklch(0.72 0.16 25); }
#module-tarefas.nv-app .tf-grupo-data { font-weight: 400; color: var(--text-3); font-size: 12px; }
#module-tarefas.nv-app .tf-grupo-mais { margin-left: auto; }
#module-tarefas.nv-app .tf-grupo-mais,
#module-tarefas.nv-app .tf-secao-alternar {
  display: inline-flex;
  border: none;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  border-radius: 6px;
  padding: 3px;
}
#module-tarefas.nv-app .tf-grupo-mais:hover,
#module-tarefas.nv-app .tf-secao-alternar:hover { background: var(--bg-3); color: var(--text-1); }
#module-tarefas.nv-app .tf-grupo-mais span[data-lucide], #module-tarefas.nv-app .tf-grupo-mais svg,
#module-tarefas.nv-app .tf-secao-alternar span[data-lucide], #module-tarefas.nv-app .tf-secao-alternar svg { width: 14px; height: 14px; }
#module-tarefas.nv-app .tf-dia-vazio { color: var(--text-3); font: 400 12px/1 var(--font-sans); margin: 4px 0 0; }

#module-tarefas.nv-app .tf-lista,
#module-tarefas.nv-app .tf-sublista,
#module-tarefas.nv-app .tf-det-sub-lista { list-style: none; margin: 0; padding: 0; }
#module-tarefas.nv-app .tf-sublista { margin-left: 34px; border-left: 1px solid oklch(0.28 0.010 250 / 0.4); padding-left: 8px; }

#module-tarefas.nv-app .tf-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 8px;
  border-radius: 10px;
  border-bottom: 1px solid oklch(0.28 0.010 250 / 0.25);
  transition: background 120ms ease, opacity 250ms ease, transform 250ms ease;
}
#module-tarefas.nv-app .tf-item:hover { background: var(--bg-2); }
#module-tarefas.nv-app .tf-item.sortable-ghost { opacity: 0.4; }
#module-tarefas.nv-app .tf-item.tf-concluindo { opacity: 0; transform: translateX(8px); }
#module-tarefas.nv-app .tf-item.tf-concluindo .tf-item-texto { text-decoration: line-through; }

/* Checkbox circular colorido por prioridade */
#module-tarefas.nv-app .tf-check {
  width: 18px; height: 18px;
  /* neutraliza button global (padding/min-width) que ovalava o círculo */
  padding: 0;
  min-width: 0;
  box-sizing: border-box;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: transparent;
  cursor: pointer;
  flex: none;
  position: relative;
  transition: background 140ms ease;
}
#module-tarefas.nv-app .tf-check:hover::after,
#module-tarefas.nv-app .tf-feita .tf-check::after,
.tf-concluindo .tf-check::after,
#module-tarefas.nv-app .tf-check-feita::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: currentColor;
}
#module-tarefas.nv-app .tf-prio-1 { color: oklch(0.66 0.19 25); }
#module-tarefas.nv-app .tf-prio-2 { color: oklch(0.72 0.15 55); }
#module-tarefas.nv-app .tf-prio-3 { color: oklch(0.66 0.14 250); }
#module-tarefas.nv-app .tf-prio-4 { color: var(--text-3); }

#module-tarefas.nv-app .tf-item-corpo { flex: 1; min-width: 0; cursor: pointer; }
#module-tarefas.nv-app .tf-item-texto { font: 450 14px/1.45 var(--font-sans); color: var(--text-1); word-break: break-word; }
#module-tarefas.nv-app .tf-feita .tf-item-texto { text-decoration: line-through; color: var(--text-3); }
#module-tarefas.nv-app .tf-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 3px;
}
#module-tarefas.nv-app .tf-prazo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 500 11.5px/1 var(--font-sans);
  color: var(--text-3);
}
#module-tarefas.nv-app .tf-prazo span[data-lucide], #module-tarefas.nv-app .tf-prazo svg { width: 12px; height: 12px; }
#module-tarefas.nv-app .tf-prazo-vencido { color: oklch(0.7 0.17 25); }
#module-tarefas.nv-app .tf-prazo-hoje { color: var(--accent); }
#module-tarefas.nv-app .tf-etiqueta {
  font: 600 10.5px/1 var(--font-sans);
  padding: 3px 7px;
  border-radius: 99px;
  background: color-mix(in oklch, currentColor 18%, transparent);
}
#module-tarefas.nv-app .tf-sub-qtd,
#module-tarefas.nv-app .tf-caminho {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 500 11.5px/1 var(--font-sans);
  color: var(--text-3);
}
#module-tarefas.nv-app .tf-sub-qtd span[data-lucide], #module-tarefas.nv-app .tf-sub-qtd svg { width: 12px; height: 12px; }
#module-tarefas.nv-app .tf-tem-descricao { width: 12px; height: 12px; color: var(--text-3); }
#module-tarefas.nv-app .tf-sub-alternar {
  border: none; background: transparent; color: var(--text-3);
  cursor: pointer; border-radius: 6px; padding: 3px; margin-top: 2px;
}
#module-tarefas.nv-app .tf-sub-alternar span[data-lucide], #module-tarefas.nv-app .tf-sub-alternar svg { width: 14px; height: 14px; }

#module-tarefas.nv-app .tf-reagendar-linha { list-style: none; padding: 0 8px 8px 36px; }
#module-tarefas.nv-app .tf-reagendar {
  border: none; background: transparent;
  color: var(--accent);
  font: 500 11.5px/1 var(--font-sans);
  cursor: pointer;
  padding: 2px 0;
}
#module-tarefas.nv-app .tf-reagendar:hover { text-decoration: underline; }

/* Seções */
#module-tarefas.nv-app .tf-secao-h { border-bottom: none; }
#module-tarefas.nv-app .tf-secao-nome { font-weight: 700; }
#module-tarefas.nv-app .tf-secao-acoes { margin-left: auto; display: none; gap: 2px; }
#module-tarefas.nv-app .tf-secao-h:hover .tf-secao-acoes { display: inline-flex; }
#module-tarefas.nv-app .tf-recolhida .tf-secao-alternar span,
#module-tarefas.nv-app .tf-recolhida .tf-secao-alternar svg { transform: rotate(-90deg); }
#module-tarefas.nv-app .tf-add-secao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  border: 1px dashed oklch(0.35 0.01 250 / 0.6);
  border-radius: 9px;
  background: transparent;
  color: var(--text-3);
  font: 500 12.5px/1 var(--font-sans);
  padding: 8px 14px;
  cursor: pointer;
}
#module-tarefas.nv-app .tf-add-secao:hover { color: var(--text-1); border-color: var(--accent); }
#module-tarefas.nv-app .tf-add-secao span[data-lucide], #module-tarefas.nv-app .tf-add-secao svg { width: 14px; height: 14px; }

/* Vazio / carregar mais */
#module-tarefas.nv-app .tf-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 16px;
  color: var(--text-3);
  font: 400 14px/1.5 var(--font-sans);
  text-align: center;
}
#module-tarefas.nv-app .tf-vazio span[data-lucide], #module-tarefas.nv-app .tf-vazio svg { width: 32px; height: 32px; opacity: 0.6; }
#module-tarefas.nv-app .tf-vazio p { margin: 0; }
#module-tarefas.nv-app .tf-vazio-dica { font-size: 12px; opacity: 0.8; }
#module-tarefas.nv-app .tf-carregar-mais {
  display: block;
  margin: 8px auto 0;
  border: 1px solid oklch(0.28 0.010 250 / 0.6);
  border-radius: 9px;
  background: var(--bg-2);
  color: var(--text-2);
  font: 500 12.5px/1 var(--font-sans);
  padding: 8px 18px;
  cursor: pointer;
}
#module-tarefas.nv-app .tf-carregar-mais:hover { background: var(--bg-3); color: var(--text-1); }

/* Menu de projeto (flutuante) */
#module-tarefas.nv-app .tf-proj-menu { min-width: 220px; }
#module-tarefas.nv-app .tf-proj-menu-cores {
  display: flex;
  gap: 6px;
  padding: 6px 10px;
  flex-wrap: wrap;
}
#module-tarefas.nv-app .tf-cor-opcao {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: currentColor;
  cursor: pointer;
}
#module-tarefas.nv-app .tf-cor-opcao.tf-cor-atual { border-color: var(--text-1); }
#module-tarefas.nv-app .tf-menu-perigo { color: oklch(0.72 0.16 25) !important; }

/* ------------------------------------------------------------- modal detalhe */
/* display:flex nas classes abaixo venceria o [hidden] do user-agent —
   garante que hidden SEMPRE esconde (modal e menus flutuantes). */
#module-tarefas.nv-app .tf-detalhe-overlay[hidden],
#module-tarefas.nv-app .tf-qa-menu[hidden] { display: none; }

/* PAINEL LATERAL estilo Asana: desliza da direita, a lista continua
   visível e CLICÁVEL à esquerda (wrapper com pointer-events:none) —
   clicar em outra tarefa troca o conteúdo do painel sem fechar. */
#module-tarefas.nv-app .tf-detalhe-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: auto;
  width: min(620px, 94vw);
  z-index: 90;
  background: transparent;
  padding: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
  transition: width 0.25s ease;
}
/* MODO DOCUMENTO: painel largo pra escrever documentação à vontade */
#module-tarefas.nv-app .tf-detalhe-overlay.tf-doc-modo { width: min(1080px, 96vw); }
#module-tarefas.nv-app .tf-detalhe {
  pointer-events: auto;
  width: 100%;
  height: 100%;
  background: var(--bg-1);
  border-left: 1px solid oklch(0.32 0.010 250 / 0.8);
  border-radius: 0;
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  box-shadow: -16px 0 48px oklch(0 0 0 / 0.45);
  animation: tf-drawer-entra 0.22s ease;
}
@keyframes tf-drawer-entra {
  from { transform: translateX(24px); opacity: 0.4; }
  to { transform: translateX(0); opacity: 1; }
}
/* Título grande estilo Asana */
#module-tarefas.nv-app .tf-det-texto {
  font-size: 18px !important;
  font-weight: 650 !important;
}
/* Descrição = documento: área generosa que cresce com o texto */
#module-tarefas.nv-app .tf-det-desc-rica { min-height: 180px; max-height: none; }
#module-tarefas.nv-app .tf-doc-modo .tf-det-desc-rica { min-height: 45vh; }
/* Reset escopado: CSS global estiliza <header> genérico (background/padding)
   e criava uma "caixa fantasma" no topo do modal — neutraliza aqui
   (docs/convencao-css-modulos.md, regra 5). */
#module-tarefas.nv-app .tf-detalhe-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  min-height: 0;
  box-shadow: none;
}
#module-tarefas.nv-app .tf-detalhe-mae {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: var(--text-3);
  font: 500 12px/1 var(--font-sans);
  cursor: pointer;
}
#module-tarefas.nv-app .tf-detalhe-mae:hover { color: var(--text-1); }
#module-tarefas.nv-app .tf-detalhe-principal { display: flex; align-items: center; gap: 12px; }
#module-tarefas.nv-app .tf-det-texto {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-1);
  font: 600 17px/1.35 var(--font-sans);
  outline: none;
}
#module-tarefas.nv-app .tf-det-texto.tf-feita { text-decoration: line-through; color: var(--text-3); }
/* "Concluída em": bloco moderno — selo + data relativa + chips Hoje/Ontem/data */
#module-tarefas.nv-app .tf-det-concluida {
  display: flex; align-items: center; gap: 11px;
  margin: 4px 0 2px 34px; /* alinha com o texto, depois do checkbox */
  padding: 9px 12px;
  background: color-mix(in oklch, var(--accent) 9%, var(--bg-2));
  border: 1px solid color-mix(in oklch, var(--accent) 24%, transparent);
  border-radius: 12px;
}
#module-tarefas.nv-app .tf-det-conc-selo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  background: var(--accent); color: var(--bg-1);
}
#module-tarefas.nv-app .tf-det-conc-selo [data-lucide] { width: 15px; height: 15px; stroke-width: 3; }
#module-tarefas.nv-app .tf-det-conc-corpo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#module-tarefas.nv-app .tf-det-conc-label { font: 600 12.5px/1.2 var(--font-sans); color: var(--text-1); }
#module-tarefas.nv-app .tf-det-conc-acoes { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
#module-tarefas.nv-app .tf-det-conc-chip {
  border: 1px solid oklch(0.30 0.010 250 / 0.5);
  background: var(--bg-1); color: var(--text-2);
  font: 600 11.5px/1 var(--font-sans);
  padding: 5px 10px; border-radius: 999px; cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
#module-tarefas.nv-app .tf-det-conc-chip:hover { background: var(--bg-3); color: var(--text-1); }
#module-tarefas.nv-app .tf-det-conc-chip.tf-conc-ativa { background: var(--accent); border-color: var(--accent); color: var(--bg-1); }
#module-tarefas.nv-app .tf-det-conc-data {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid oklch(0.30 0.010 250 / 0.5); border-radius: 999px;
  padding: 3px 10px 3px 9px; background: var(--bg-1); color: var(--text-3); cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
#module-tarefas.nv-app .tf-det-conc-data:hover { color: var(--text-1); border-color: oklch(0.40 0.010 250 / 0.7); }
#module-tarefas.nv-app .tf-det-conc-data [data-lucide] { width: 13px; height: 13px; }
#module-tarefas.nv-app .tf-det-conc-data input[type="date"] {
  border: none; background: transparent; color: var(--text-2);
  font: 600 11.5px/1 var(--font-sans); padding: 0; width: 116px; cursor: pointer;
}

/* Popover "quando você concluiu?" — escolha da data ao concluir uma tarefa */
.tf-conclui-backdrop { position: fixed; inset: 0; z-index: 200; background: transparent; }
.tf-conclui-pop {
  position: fixed; z-index: 201; width: 244px;
  display: flex; flex-direction: column; gap: 11px;
  padding: 14px; border-radius: 14px;
  background: var(--bg-2);
  border: 1px solid oklch(0.34 0.010 250 / 0.7);
  box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 0, 0, 0.25);
  opacity: 0; transform: translateY(-4px) scale(0.98);
  transition: opacity 130ms ease, transform 130ms ease;
}
.tf-conclui-pop.tf-conclui-visivel { opacity: 1; transform: none; }
.tf-conclui-titulo {
  font: 700 11px/1.2 var(--font-sans); color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.tf-conclui-chips { display: flex; gap: 8px; }
.tf-conclui-chip {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border: 1px solid oklch(0.34 0.010 250 / 0.7);
  background: var(--bg-1); color: var(--text-1);
  font: 600 13px/1 var(--font-sans);
  padding: 9px 8px; border-radius: 10px; cursor: pointer;
  transition: background 120ms ease, filter 120ms ease;
}
.tf-conclui-chip [data-lucide] { width: 14px; height: 14px; }
.tf-conclui-chip:hover { background: var(--bg-3); }
.tf-conclui-chip.tf-conclui-primaria { background: var(--accent); border-color: var(--accent); color: var(--bg-1); }
.tf-conclui-chip.tf-conclui-primaria:hover { filter: brightness(1.08); }
.tf-conclui-chip.tf-conclui-primaria:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tf-conclui-outra {
  display: flex; align-items: center; gap: 7px;
  font: 500 12px/1.2 var(--font-sans); color: var(--text-3);
  border-top: 1px solid oklch(0.30 0.010 250 / 0.45); padding-top: 11px;
}
.tf-conclui-outra [data-lucide] { width: 14px; height: 14px; }
.tf-conclui-data {
  margin-left: auto;
  border: 1px solid oklch(0.34 0.010 250 / 0.7); border-radius: 8px;
  background: var(--bg-1); color: var(--text-1);
  font: 600 12px/1 var(--font-sans); padding: 6px 8px; cursor: pointer;
}

/* ===== Ciclo → destino do tempo estudado (Só Ciclo / GPS / Editais) ===== */
.cxd-backdrop {
  position: fixed; inset: 0; z-index: 220;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.cxd-card {
  width: 100%; max-width: 420px;
  background: var(--bg-1); color: var(--text-1);
  border: 1px solid oklch(0.34 0.012 250 / 0.6);
  border-radius: 16px; padding: 18px;
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.7);
  opacity: 0; transform: translateY(6px) scale(0.98);
  transition: opacity 140ms ease, transform 140ms ease;
  font-family: var(--font-sans, system-ui, sans-serif);
}
.cxd-card.cxd-visivel { opacity: 1; transform: none; }
.cxd-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.cxd-titulo { font: 700 15px/1.2 var(--font-sans); color: var(--text-1); flex: 1; }
.cxd-x, .cxd-voltar {
  border: none; background: transparent; color: var(--text-3); cursor: pointer;
  width: 30px; height: 30px; border-radius: 8px; font-size: 20px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.cxd-x:hover, .cxd-voltar:hover { background: var(--bg-3); color: var(--text-1); }
.cxd-voltar [data-lucide] { width: 16px; height: 16px; }
.cxd-sub { font: 400 12.5px/1.45 var(--font-sans); color: var(--text-3); margin: 0 0 14px; }
.cxd-ops { display: flex; flex-direction: column; gap: 8px; }
.cxd-op {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  border: 1px solid oklch(0.28 0.010 250 / 0.5);
  background: var(--bg-2); color: var(--text-1);
  border-radius: 12px; padding: 12px 14px; cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.cxd-op:hover { background: var(--bg-3); border-color: var(--accent); transform: translateY(-1px); }
.cxd-op > [data-lucide] { width: 20px; height: 20px; color: var(--accent); flex: none; }
.cxd-op-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cxd-op-txt b { font: 600 13.5px/1.2 var(--font-sans); }
.cxd-op-txt small { font: 400 11.5px/1.3 var(--font-sans); color: var(--text-3); }
.cxd-descartar {
  display: block; width: 100%; margin-top: 12px;
  border: none; background: transparent; color: var(--text-3);
  font: 500 12px/1 var(--font-sans); padding: 8px; cursor: pointer; border-radius: 8px;
}
.cxd-descartar:hover { background: var(--bg-2); color: var(--danger, oklch(0.68 0.18 27)); }
.cxd-campos { display: flex; flex-direction: column; gap: 12px; margin: 8px 0 12px; }
.cxd-campo {
  display: flex; flex-direction: column; gap: 5px;
  font: 600 11px/1.2 var(--font-sans); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-3);
}
.cxd-sel {
  font: 500 13.5px/1.2 var(--font-sans); text-transform: none; letter-spacing: 0;
  border: 1px solid oklch(0.34 0.012 250 / 0.6); border-radius: 9px;
  background: var(--bg-2); color: var(--text-1); padding: 9px 10px; cursor: pointer;
}
.cxd-sel:disabled { opacity: 0.5; cursor: not-allowed; }
.cxd-dica { font: 400 11.5px/1.4 var(--font-sans); color: var(--text-3); margin: 0 0 12px; }
.cxd-aviso {
  font: 400 12.5px/1.5 var(--font-sans); color: var(--text-2); margin: 4px 0 2px;
  padding: 12px 14px; border-radius: 10px;
  background: color-mix(in oklch, var(--accent) 8%, var(--bg-2));
  border: 1px solid color-mix(in oklch, var(--accent) 20%, transparent);
}
.cxd-aviso b { color: var(--text-1); }
.cxd-acoes { display: flex; justify-content: flex-end; }
.cxd-btn-primario {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--accent); background: var(--accent); color: var(--bg-1);
  font: 600 13px/1 var(--font-sans); padding: 10px 16px; border-radius: 10px; cursor: pointer;
  transition: filter 120ms ease, opacity 120ms ease;
}
.cxd-btn-primario:hover:not(:disabled) { filter: brightness(1.08); }
.cxd-btn-primario:disabled { opacity: 0.45; cursor: not-allowed; }
.cxd-btn-primario [data-lucide] { width: 15px; height: 15px; }

/* Botão "Editar histórico" no título da análise */
#module-ciclo.nv-app .cx-secao-com-acao { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
#module-ciclo.nv-app .cx-hist-btn {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid oklch(0.32 0.012 250 / 0.6); background: var(--bg-2); color: var(--text-2);
  font: 600 11px/1 var(--font-sans); text-transform: none; letter-spacing: 0;
  padding: 6px 11px; border-radius: 999px; cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
#module-ciclo.nv-app .cx-hist-btn:hover { background: var(--bg-3); color: var(--text-1); border-color: var(--accent); }
#module-ciclo.nv-app .cx-hist-btn [data-lucide] { width: 13px; height: 13px; }

/* Modal "Histórico de estudo" (reusa .cxd-backdrop/.cxd-card, vive no body) */
.cxh-card { max-width: 540px; }
/* barra: filtros de período + navegação */
.cxh-barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 8px 0 10px; }
.cxh-tabs { display: inline-flex; gap: 4px; }
.cxh-tab {
  border: 1px solid oklch(0.32 0.012 250 / 0.6); background: var(--bg-2); color: var(--text-3);
  font: 600 11px/1 var(--font-sans); padding: 6px 12px; border-radius: 999px; cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.cxh-tab:hover { color: var(--text-1); }
.cxh-tab-on { background: var(--accent); border-color: var(--accent); color: var(--bg-1); }
.cxh-nav { display: inline-flex; align-items: center; gap: 6px; }
.cxh-nav-btn {
  width: 26px; height: 26px; border-radius: 7px; border: 1px solid oklch(0.32 0.012 250 / 0.6);
  background: var(--bg-2); color: var(--text-2); font-size: 16px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.cxh-nav-btn:hover { background: var(--bg-3); color: var(--text-1); }
.cxh-periodo { font: 600 12.5px/1 var(--font-sans); color: var(--text-1); min-width: 96px; text-align: center; }
.cxh-resumo { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 400 12.5px/1.2 var(--font-sans); color: var(--text-2); margin-bottom: 10px; }
.cxh-resumo b { color: var(--text-1); }
/* form de adicionar */
.cxh-add {
  display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap;
  padding: 12px; margin-bottom: 10px; border-radius: 10px;
  background: var(--bg-2); border: 1px solid oklch(0.30 0.010 250 / 0.5);
}
.cxh-add-campo { display: flex; flex-direction: column; gap: 4px; font: 600 9.5px/1 var(--font-sans); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); }
.cxh-add-campo input, .cxh-add-campo select {
  border: 1px solid oklch(0.32 0.012 250 / 0.6); border-radius: 8px; background: var(--bg-1); color: var(--text-1);
  font: 500 12.5px/1 var(--font-sans); text-transform: none; letter-spacing: 0; padding: 7px 8px;
}
.cxh-add-min { width: 66px; }
.cxh-add-ok { align-self: stretch; }
/* lista agrupada por dia */
.cxh-lista { display: flex; flex-direction: column; gap: 6px; max-height: 48vh; overflow-y: auto; }
.cxh-dia-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 4px 4px; border-bottom: 1px solid oklch(0.30 0.010 250 / 0.4); margin-bottom: 2px; }
.cxh-dia-nome { font: 700 10.5px/1.2 var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); }
.cxh-dia-total { font: 700 11.5px/1 var(--font-sans); color: var(--accent); font-variant-numeric: tabular-nums; }
.cxh-linha {
  display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 10px;
  padding: 7px 6px; border-radius: 8px;
}
.cxh-linha:hover { background: var(--bg-2); }
.cxh-disc { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1.2 var(--font-sans); color: var(--text-1); min-width: 0; }
.cxh-disc .cx-bolinha { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.cxh-min { font: 700 13px/1 var(--font-sans); color: var(--text-1); font-variant-numeric: tabular-nums; }
.cxh-btn-txt {
  border: 1px solid oklch(0.32 0.012 250 / 0.6); background: var(--bg-2); color: var(--text-2);
  font: 600 11px/1 var(--font-sans); padding: 6px 11px; border-radius: 8px; cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.cxh-btn-txt:hover { background: var(--bg-3); color: var(--text-1); border-color: var(--accent); }
.cxh-btn-txt.cxh-btn-del:hover { color: var(--danger, oklch(0.68 0.18 27)); border-color: var(--danger, oklch(0.68 0.18 27)); }
.cxh-vazio { font: 400 13px/1.5 var(--font-sans); color: var(--text-3); padding: 14px 4px; }
.cxh-rodape { display: flex; justify-content: center; margin-top: 8px; padding-top: 12px; border-top: 1px solid oklch(0.28 0.010 250 / 0.4); }
.cxh-zerar {
  border: 1px solid color-mix(in oklch, var(--danger, oklch(0.68 0.18 27)) 40%, transparent);
  background: transparent; color: var(--danger, oklch(0.68 0.18 27));
  font: 600 11.5px/1 var(--font-sans); padding: 8px 14px; border-radius: 8px; cursor: pointer;
  transition: background 120ms ease;
}
.cxh-zerar:hover { background: color-mix(in oklch, var(--danger, oklch(0.68 0.18 27)) 12%, transparent); }
#module-tarefas.nv-app .tf-det-descricao {
  width: 100%;
  border: 1px solid oklch(0.28 0.010 250 / 0.5);
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--text-1);
  font: 400 13px/1.5 var(--font-sans);
  padding: 10px 12px;
  resize: vertical;
}
#module-tarefas.nv-app .tf-det-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
#module-tarefas.nv-app .tf-det-campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font: 600 11px/1.2 var(--font-sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
}
#module-tarefas.nv-app .tf-det-campo input,
#module-tarefas.nv-app .tf-det-campo select {
  border: 1px solid oklch(0.28 0.010 250 / 0.5);
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--text-1);
  font: 400 13px/1.2 var(--font-sans);
  padding: 7px 9px;
}
/* Botão de data (substitui o <input type=date> nativo, abre o .tf-dp) */
#module-tarefas.nv-app .tf-det-datebtn {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: 1px solid oklch(0.28 0.010 250 / 0.5); border-radius: 8px;
  background: var(--bg-2); color: var(--text-1);
  font: 400 13px/1.2 var(--font-sans); text-transform: none; letter-spacing: normal;
  padding: 7px 9px; cursor: pointer; transition: border-color .14s, background .14s;
}
#module-tarefas.nv-app .tf-det-datebtn:hover { background: var(--bg-3); border-color: var(--border-soft); }
#module-tarefas.nv-app .tf-det-datebtn [data-lucide] { width: 15px; height: 15px; color: var(--accent); flex: 0 0 auto; }
#module-tarefas.nv-app .tf-det-datebtn .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   Date-picker popover (.tf-dp) — anexado ao <body>, NÃO escopado.
   Usa os tokens do :root (tokens.css). Ver tarefas_datepicker.js.
   ============================================================ */
.tf-dp {
  position: absolute; z-index: 3000; width: 288px;
  background: var(--bg-1); border: 1px solid var(--border-soft); border-radius: 14px;
  box-shadow: 0 16px 40px oklch(0 0 0 / 0.5), 0 1px 0 0 oklch(1 0 0 / 0.04) inset;
  padding: 12px; font-family: var(--font-sans); color: var(--text-1);
  -webkit-font-smoothing: antialiased; box-sizing: border-box;
}
.tf-dp *, .tf-dp *::before, .tf-dp *::after { box-sizing: border-box; }
.tf-dp button { font-family: var(--font-sans); }
.tf-dp-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.tf-dp-q {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  height: 34px; padding: 0 11px; border-radius: 9px;
  background: var(--bg-2); border: 1px solid var(--border-subtle); color: var(--text-2);
  font: 500 12.5px var(--font-sans); cursor: pointer; transition: .14s;
}
.tf-dp-q:hover { background: var(--bg-3); color: var(--text-1); }
.tf-dp-q .k { color: var(--text-4); font-size: 11px; font-variant-numeric: tabular-nums; }
.tf-dp-q.sem { grid-column: span 2; justify-content: center; color: var(--text-3); }
.tf-dp-q.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.tf-dp-calhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tf-dp-mes { font: 600 13px var(--font-sans); color: var(--text-1); text-transform: capitalize; }
.tf-dp-nav { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); cursor: pointer; }
.tf-dp-nav:hover { background: var(--bg-2); color: var(--text-1); }
.tf-dp-nav svg { width: 16px; height: 16px; }
.tf-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.tf-dp-dowc { text-align: center; font: 600 10.5px var(--font-sans); color: var(--text-4); height: 22px; line-height: 22px; }
.tf-dp-day {
  aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px;
  font: 500 12.5px var(--font-sans); color: var(--text-2); cursor: pointer;
  border: 1px solid transparent; transition: .1s; font-variant-numeric: tabular-nums;
}
.tf-dp-day:hover { background: var(--bg-2); color: var(--text-1); }
.tf-dp-day.out { color: var(--text-4); opacity: .45; }
.tf-dp-day.today { border-color: var(--accent); color: var(--accent-strong); font-weight: 700; }
.tf-dp-day.sel { background: var(--accent); color: var(--accent-fg, oklch(0.16 0.04 152)); font-weight: 700; border-color: var(--accent); }
.tf-dp-day.sel:hover { background: var(--accent-strong); }
.tf-dp-time { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.tf-dp-time label { font: 600 11px var(--font-sans); color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.tf-dp-time input { height: 32px; background: var(--bg-3); border: 1px solid var(--border-soft); border-radius: 8px; color: var(--text-1); font: 600 13px var(--font-sans); padding: 0 8px; }
.tf-dp-time input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tf-dp-presets { display: flex; gap: 5px; margin-left: auto; }
.tf-dp-pz { height: 26px; padding: 0 8px; border-radius: 7px; background: var(--bg-2); border: 1px solid var(--border-subtle); color: var(--text-3); font: 500 11px var(--font-sans); cursor: pointer; }
.tf-dp-pz:hover { background: var(--bg-3); color: var(--text-1); }
#module-tarefas.nv-app .tf-det-rotulo {
  font: 600 11px/1.2 var(--font-sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
  display: block;
  margin-bottom: 6px;
}
#module-tarefas.nv-app .tf-det-etiquetas-lista { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
#module-tarefas.nv-app .tf-det-et-item { display: inline-flex; align-items: center; gap: 2px; }
#module-tarefas.nv-app .tf-det-et-menu {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  border: none; border-radius: 6px; background: transparent;
  color: var(--text-3); cursor: pointer;
  opacity: 0; transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}
#module-tarefas.nv-app .tf-det-et-item:hover .tf-det-et-menu,
#module-tarefas.nv-app .tf-det-et-menu:focus-visible { opacity: 1; }
#module-tarefas.nv-app .tf-det-et-menu:hover { background: var(--bg-3); color: var(--text-1); }
#module-tarefas.nv-app .tf-det-et-menu [data-lucide] { width: 15px; height: 15px; }
#module-tarefas.nv-app .tf-det-sub-lista .tf-item { border-bottom: none; padding: 5px 4px; align-items: center; }
#module-tarefas.nv-app .tf-det-sub-form input {
  width: 100%;
  border: 1px dashed oklch(0.35 0.01 250 / 0.6);
  border-radius: 9px;
  background: transparent;
  color: var(--text-1);
  font: 400 13px/1.2 var(--font-sans);
  padding: 8px 12px;
  margin-top: 4px;
}
#module-tarefas.nv-app .tf-detalhe-rodape {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid oklch(0.28 0.010 250 / 0.4);
  /* Grudado no fim do painel (que rola): Excluir/Salvar sempre alcançáveis,
     mesmo com descrição longa em telas de laptop. As margens negativas
     cancelam o padding do .tf-detalhe pra cobrir o texto que passa por baixo. */
  position: sticky;
  bottom: 0;
  margin: 0 -20px -20px;
  padding: 14px 20px 20px;
  background: var(--bg-1);
}

@media (max-width: 640px) {
  #module-tarefas.nv-app .tf-principal { padding: 14px 12px 20px; }
  #module-tarefas.nv-app .tf-quickadd-linha2 { gap: 6px; }
  #module-tarefas.nv-app .tf-titulo-pagina { font-size: 26px; }
}

/* ---------------------------- TAREFAS leva 2: NL, board, atividade, extras */
/* Chips de interpretação do quick-add NL */
#module-tarefas.nv-app .tf-qa-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
#module-tarefas.nv-app .tf-qa-interp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 99px;
  font: 600 11.5px/1 var(--font-sans);
  background: var(--bg-3);
  color: var(--text-2);
  border: 1px solid transparent;
}
#module-tarefas.nv-app .tf-qa-interp-nl { border-color: var(--accent); color: var(--accent); background: color-mix(in oklch, var(--accent) 12%, transparent); }
#module-tarefas.nv-app .tf-qa-interp span[data-lucide], #module-tarefas.nv-app .tf-qa-interp svg { width: 12px; height: 12px; }
#module-tarefas.nv-app .tf-qa-interp-x {
  border: none; background: transparent; color: inherit; cursor: pointer;
  font-size: 13px; line-height: 1; padding: 0 0 0 2px; opacity: 0.7;
}
#module-tarefas.nv-app .tf-qa-interp-x:hover { opacity: 1; }
#module-tarefas.nv-app .tf-qa-dica { font: 400 11px/1.6 var(--font-sans); color: var(--text-3); margin-left: auto; }
#module-tarefas.nv-app .tf-qa-dica code {
  background: var(--bg-3); border-radius: 4px; padding: 1px 4px; font-size: 10.5px;
}

/* Badges de recorrência/lembrete na linha */
#module-tarefas.nv-app .tf-badge-icone { display: inline-flex; color: var(--text-3); }
#module-tarefas.nv-app .tf-badge-icone span[data-lucide], #module-tarefas.nv-app .tf-badge-icone svg { width: 12px; height: 12px; }

/* Postergar rápido (aparece no hover da linha) */
#module-tarefas.nv-app .tf-postergar-btn {
  border: none; background: transparent; color: var(--text-3);
  cursor: pointer; border-radius: 6px; padding: 3px; margin-top: 2px;
  opacity: 0; transition: opacity 120ms ease;
}
#module-tarefas.nv-app .tf-item:hover .tf-postergar-btn { opacity: 1; }
#module-tarefas.nv-app .tf-postergar-btn:hover { background: var(--bg-3); color: var(--text-1); }
#module-tarefas.nv-app .tf-postergar-btn span[data-lucide], #module-tarefas.nv-app .tf-postergar-btn svg { width: 14px; height: 14px; }

/* Toggle lista/board */
#module-tarefas.nv-app .tf-modo-toggle {
  display: inline-flex;
  border: 1px solid oklch(0.28 0.010 250 / 0.6);
  border-radius: 9px;
  padding: 2px;
  gap: 2px;
  margin-right: 4px;
}
#module-tarefas.nv-app .tf-modo-toggle .tf-btn-icone.tf-ativa { background: var(--bg-3); color: var(--text-1); }

/* Board: colunas horizontais */
#module-tarefas.nv-app .tf-board {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 12px;
}
#module-tarefas.nv-app .tf-coluna {
  flex: 0 0 270px;
  background: var(--bg-2);
  border: 1px solid oklch(0.28 0.010 250 / 0.5);
  border-radius: 12px;
  padding: 10px;
  max-height: calc(100vh - 320px);
  display: flex;
  flex-direction: column;
}
#module-tarefas.nv-app .tf-coluna-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 700 12.5px/1.2 var(--font-sans);
  color: var(--text-2);
  padding: 2px 4px 8px;
}
#module-tarefas.nv-app .tf-coluna-lista {
  overflow-y: auto;
  min-height: 40px;
  flex: 1;
}
#module-tarefas.nv-app .tf-coluna .tf-item {
  background: var(--bg-1);
  border: 1px solid oklch(0.28 0.010 250 / 0.4);
  border-radius: 10px;
  margin-bottom: 6px;
}
#module-tarefas.nv-app .tf-coluna-add input {
  width: 100%;
  border: 1px dashed oklch(0.35 0.01 250 / 0.6);
  border-radius: 8px;
  background: transparent;
  color: var(--text-1);
  font: 400 12.5px/1.2 var(--font-sans);
  padding: 7px 10px;
  margin-top: 6px;
}
#module-tarefas.nv-app .tf-coluna-nova {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px dashed oklch(0.35 0.01 250 / 0.6);
  border-radius: 10px;
  background: transparent;
  color: var(--text-3);
  font: 500 12.5px/1 var(--font-sans);
  padding: 10px 14px;
  cursor: pointer;
  align-self: flex-start;
}
#module-tarefas.nv-app .tf-coluna-nova:hover { color: var(--text-1); border-color: var(--accent); }

/* Atividade (karma) */
#module-tarefas.nv-app .tf-ativ-blocos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
#module-tarefas.nv-app .tf-ativ-bloco {
  background: var(--bg-2);
  border: 1px solid oklch(0.28 0.010 250 / 0.5);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#module-tarefas.nv-app .tf-ativ-meta-ok { border-color: var(--accent); }
#module-tarefas.nv-app .tf-ativ-numero {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  color: var(--text-1);
}
#module-tarefas.nv-app .tf-ativ-de { font-size: 14px; color: var(--text-3); font-weight: 500; }
#module-tarefas.nv-app .tf-ativ-rotulo { font: 500 11.5px/1.3 var(--font-sans); color: var(--text-3); }
#module-tarefas.nv-app .tf-ativ-grafico {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 140px;
  padding: 10px 4px 4px;
  border: 1px solid oklch(0.28 0.010 250 / 0.4);
  border-radius: 12px;
  margin-bottom: 14px;
}
#module-tarefas.nv-app .tf-ativ-coluna {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}
#module-tarefas.nv-app .tf-ativ-barra {
  width: 100%;
  max-width: 26px;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: var(--bg-3);
}
#module-tarefas.nv-app .tf-ativ-barra-meta { background: var(--accent); }
#module-tarefas.nv-app .tf-ativ-dia { font: 500 10px/1 var(--font-sans); color: var(--text-3); }
#module-tarefas.nv-app .tf-ativ-meta-config {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 12.5px/1 var(--font-sans);
  color: var(--text-3);
  margin-right: 14px;
}
#module-tarefas.nv-app .tf-ativ-meta-config input {
  width: 64px;
  border: 1px solid oklch(0.28 0.010 250 / 0.5);
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--text-1);
  padding: 6px 8px;
  font: 400 13px/1 var(--font-sans);
}

/* Toast com desfazer */
#module-tarefas.nv-app .tf-toast-undo {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-2);
  border: 1px solid oklch(0.32 0.010 250 / 0.8);
  border-radius: 12px;
  padding: 10px 14px;
  font: 500 13px/1.3 var(--font-sans);
  color: var(--text-1);
  box-shadow: 0 12px 32px oklch(0 0 0 / 0.4);
}
#module-tarefas.nv-app .tf-toast-undo button {
  border: none; background: transparent; cursor: pointer;
  font: 700 13px/1 var(--font-sans);
}
#module-tarefas.nv-app .tf-toast-undo #tf-toast-desfazer { color: var(--accent); }
#module-tarefas.nv-app .tf-toast-undo #tf-toast-fechar { color: var(--text-3); font-size: 16px; }

/* Modal: variação menor (novo projeto, filtro) + botão fantasma */
/* Diálogos compactos (Novo projeto / Filtro) reusam .tf-detalhe, que
   virou DRAWER de altura total no redesign Asana — sem estes overrides
   o modal esticava a tela inteira e o .tf-det-texto (flex:1, feito pra
   linha do título) virava um campo gigante (report do João, com print) */
#module-tarefas.nv-app .tf-modal-menor {
  width: min(480px, 100%);
  height: auto;
  max-height: 92vh;
  margin: 24px 24px auto auto; /* cartão no topo direito, não parede */
  border: 1px solid oklch(0.32 0.010 250 / 0.8);
  border-radius: 14px;
}
#module-tarefas.nv-app .tf-modal-menor .tf-det-texto {
  flex: none;
  border: 1px solid oklch(0.28 0.010 250 / 0.6);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--bg-2);
}
#module-tarefas.nv-app .tf-btn-fantasma {
  background: var(--bg-2);
  color: var(--text-2);
  border-color: oklch(0.28 0.010 250 / 0.5);
}
#module-tarefas.nv-app .tf-btn-fantasma:hover { background: var(--bg-3); color: var(--text-1); }
#module-tarefas.nv-app .tf-detalhe-rodape-esq { display: flex; gap: 8px; }

/* Editor de recorrência no modal */
#module-tarefas.nv-app .tf-det-rec-extra {
  font: 400 12.5px/1.6 var(--font-sans);
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#module-tarefas.nv-app .tf-det-rec-extra input[type="number"] {
  width: 58px;
  border: 1px solid oklch(0.28 0.010 250 / 0.5);
  border-radius: 7px;
  background: var(--bg-2);
  color: var(--text-1);
  padding: 4px 6px;
}
#module-tarefas.nv-app .tf-det-rec-dias { display: inline-flex; gap: 6px; flex-wrap: wrap; }
/* [hidden] precisa vencer o display dos campos extras (ex.: .tf-det-rec-dias
   traz display:inline-flex e vazava o seletor de dias mesmo em "Sem recorrência"). */
#module-tarefas.nv-app .tf-det-rec-extra [data-extra][hidden] { display: none; }
#module-tarefas.nv-app .tf-det-rec-dia {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 500 12px/1 var(--font-sans);
  color: var(--text-2);
  background: var(--bg-2);
  border: 1px solid oklch(0.28 0.010 250 / 0.5);
  border-radius: 8px;
  padding: 5px 8px;
  cursor: pointer;
}

/* Links e comentários no modal */
#module-tarefas.nv-app .tf-det-links-lista,
#module-tarefas.nv-app .tf-det-com-lista { list-style: none; margin: 0 0 8px; padding: 0; }
#module-tarefas.nv-app .tf-det-link-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
}
#module-tarefas.nv-app .tf-det-link-linha a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font: 500 13px/1.3 var(--font-sans);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#module-tarefas.nv-app .tf-det-link-linha a:hover { text-decoration: underline; }
#module-tarefas.nv-app .tf-det-link-linha a span[data-lucide], #module-tarefas.nv-app .tf-det-link-linha a svg { width: 13px; height: 13px; flex: none; }
#module-tarefas.nv-app .tf-det-link-form {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
#module-tarefas.nv-app .tf-det-link-form input {
  flex: 1;
  min-width: 140px;
  border: 1px solid oklch(0.28 0.010 250 / 0.5);
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--text-1);
  font: 400 12.5px/1.2 var(--font-sans);
  padding: 7px 9px;
}
#module-tarefas.nv-app .tf-det-com-linha {
  background: var(--bg-2);
  border: 1px solid oklch(0.28 0.010 250 / 0.4);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
#module-tarefas.nv-app .tf-det-com-linha p { margin: 0 0 4px; font: 400 13px/1.5 var(--font-sans); color: var(--text-1); white-space: pre-wrap; }
#module-tarefas.nv-app .tf-det-com-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 400 11px/1 var(--font-sans);
  color: var(--text-3);
}
#module-tarefas.nv-app .tf-det-com-form input {
  width: 100%;
  border: 1px dashed oklch(0.35 0.01 250 / 0.6);
  border-radius: 9px;
  background: transparent;
  color: var(--text-1);
  font: 400 13px/1.2 var(--font-sans);
  padding: 8px 12px;
}

/* Cabeçalho da lateral com botão (Filtros +) */
#module-tarefas.nv-app .tf-lateral-h { display: flex; align-items: center; justify-content: space-between; }
#module-tarefas.nv-app .tf-lateral-h-btn { width: 20px; height: 20px; }
#module-tarefas.nv-app .tf-filtro-icone { width: 14px; height: 14px; color: var(--text-3); flex: none; }

/* ---------------------- TAREFAS 3.0 fase 1: pós-conclusão + edição rápida */
/* Cabeçalho da vista com ações (menu Mostrar) */
#module-tarefas.nv-app .tf-cab-linha {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
#module-tarefas.nv-app .tf-mostrar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 9px;
  border: 1px solid oklch(0.28 0.010 250 / 0.6);
  background: transparent;
  color: var(--text-3);
  font: 500 12px/1 var(--font-sans);
  cursor: pointer;
}
#module-tarefas.nv-app .tf-mostrar:hover { color: var(--text-1); background: var(--bg-2); }
#module-tarefas.nv-app .tf-mostrar-on { color: var(--accent); border-color: var(--accent); }
#module-tarefas.nv-app .tf-mostrar span[data-lucide], #module-tarefas.nv-app .tf-mostrar svg { width: 13px; height: 13px; }

/* Badge de prazo agora é botão (popover de reagendar) */
#module-tarefas.nv-app button.tf-prazo {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 2px 4px;
  margin: -2px -4px;
  border-radius: 6px;
}
#module-tarefas.nv-app button.tf-prazo:hover { background: var(--bg-3); }

/* Feitas riscadas in-place / grupos de concluídas */
#module-tarefas.nv-app .tf-feita-em { font: 400 11px/1 var(--font-sans); color: var(--text-3); font-style: italic; }
#module-tarefas.nv-app .tf-grupo-feitas .tf-grupo-h { color: var(--text-3); }
#module-tarefas.nv-app .tf-lista-feitas .tf-item,
#module-tarefas.nv-app .tf-grupo-feitas .tf-item { opacity: 0.75; }

/* Lápis: só no hover da linha (mesma mecânica do relógio) */
#module-tarefas.nv-app .tf-hover-acao { opacity: 0; }
#module-tarefas.nv-app .tf-item:hover .tf-hover-acao { opacity: 1; }

/* Edição inline do texto */
#module-tarefas.nv-app .tf-edicao-inline {
  width: 100%;
  border: 1px solid var(--accent);
  border-radius: 7px;
  background: var(--bg-1);
  color: var(--text-1);
  font: 450 14px/1.45 var(--font-sans);
  padding: 2px 8px;
  outline: none;
}

/* Linha de bolinhas P1-P4 nos menus */
#module-tarefas.nv-app .tf-prio-menu-linha {
  display: flex;
  gap: 10px;
  padding: 8px 12px;
  justify-content: center;
}
#module-tarefas.nv-app .tf-prio-menu-linha .tf-check { margin-top: 0; }

/* Composer inline (+ Adicionar tarefa) */
#module-tarefas.nv-app .tf-add-inline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  background: transparent;
  color: var(--text-3);
  font: 500 13px/1 var(--font-sans);
  padding: 9px 8px;
  cursor: pointer;
  border-radius: 9px;
}
#module-tarefas.nv-app .tf-add-inline:hover { color: var(--accent); }
#module-tarefas.nv-app .tf-add-inline span[data-lucide], #module-tarefas.nv-app .tf-add-inline svg { width: 15px; height: 15px; }
#module-tarefas.nv-app .tf-composer {
  border: 1px solid oklch(0.28 0.010 250 / 0.6);
  border-radius: 12px;
  background: var(--bg-2);
  padding: 10px 12px;
  margin: 6px 0 10px;
}
#module-tarefas.nv-app .tf-composer:focus-within { border-color: var(--accent); }
#module-tarefas.nv-app .tf-composer-input {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text-1);
  font: 450 14px/1.4 var(--font-sans);
  outline: none;
  padding: 2px 0 8px;
}
#module-tarefas.nv-app .tf-composer-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ------------------------------- TAREFAS 3.0 fase 2: visual clean */
/* Linhas mais leves e com respiro (referência: prints do concorrente) */
#module-tarefas.nv-app .tf-item { padding: 11px 8px; border-radius: 8px; }
#module-tarefas.nv-app .tf-item-desc {
  display: block;
  font: 400 12px/1.4 var(--font-sans);
  color: var(--text-3);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60ch;
}
#module-tarefas.nv-app .tf-lista > li.tf-item:last-child { border-bottom: none; }

/* Breadcrumb + descrição do projeto */
#module-tarefas.nv-app .tf-migalha {
  font: 500 11.5px/1 var(--font-sans);
  color: var(--text-3);
  margin: 0 0 6px;
}
#module-tarefas.nv-app .tf-proj-desc {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--text-2);
  font: 400 13px/1.5 var(--font-sans);
  padding: 4px 0 0;
  cursor: text;
  border-radius: 6px;
}
#module-tarefas.nv-app .tf-proj-desc-vazia { color: var(--text-3); font-style: italic; }
#module-tarefas.nv-app .tf-proj-desc:hover { color: var(--text-1); }
#module-tarefas.nv-app .tf-proj-desc-edicao {
  width: 100%;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--text-1);
  font: 400 13px/1.5 var(--font-sans);
  padding: 6px 9px;
  margin-top: 4px;
  resize: vertical;
  outline: none;
}

/* Topo da lateral: + Adicionar tarefa e meta do dia */
#module-tarefas.nv-app .tf-lateral-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
#module-tarefas.nv-app .tf-add-topo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  color: var(--accent);
  font: 700 13px/1 var(--font-sans);
  cursor: pointer;
  padding: 6px 4px;
  border-radius: 9px;
}
#module-tarefas.nv-app .tf-add-topo:hover { background: var(--bg-2); }
#module-tarefas.nv-app .tf-add-topo-bola {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-fg, #06231a);
}
#module-tarefas.nv-app .tf-add-topo-bola span[data-lucide], #module-tarefas.nv-app .tf-add-topo-bola svg { width: 13px; height: 13px; }
#module-tarefas.nv-app .tf-meta-chip {
  border: 1px solid oklch(0.28 0.010 250 / 0.6);
  background: transparent;
  color: var(--text-3);
  font: 600 11.5px/1 var(--font-sans);
  padding: 5px 9px;
  border-radius: 99px;
  cursor: pointer;
  white-space: nowrap;
}
#module-tarefas.nv-app .tf-meta-chip:hover { color: var(--text-1); background: var(--bg-2); }
#module-tarefas.nv-app .tf-meta-ok { color: var(--accent); border-color: var(--accent); }

/* Cabeçalhos da lateral colapsáveis + contadores discretos */
#module-tarefas.nv-app .tf-lateral-h-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  padding: 0;
}
#module-tarefas.nv-app .tf-lateral-h-toggle span[data-lucide],
#module-tarefas.nv-app .tf-lateral-h-toggle svg { width: 12px; height: 12px; transition: transform 140ms ease; }
#module-tarefas.nv-app .tf-lateral-h-toggle .tf-chev-fechado,
#module-tarefas.nv-app .tf-lateral-h-toggle svg.tf-chev-fechado { transform: rotate(-90deg); }
/* Contador discreto (número solto); alerta continua pill */
#module-tarefas.nv-app .tf-qtd { background: transparent; padding: 3px 2px; min-width: 16px; }
#module-tarefas.nv-app .tf-qtd-alerta { background: oklch(0.35 0.12 25 / 0.25); padding: 3px 7px; }

/* Ilustrações dos empty states */
#module-tarefas.nv-app .tf-ilustra { width: 110px; height: auto; color: var(--text-3); }
#module-tarefas.nv-app .tf-vazio-frase { font-weight: 600; color: var(--text-2); }

/* Impressão: só o painel principal da vista */
@media print {
  body * { visibility: hidden !important; }
  #module-tarefas .tf-principal, #module-tarefas .tf-principal * { visibility: visible !important; }
  #module-tarefas .tf-principal {
    position: absolute !important;
    inset: 0 !important;
    border: none !important;
    background: #fff !important;
    color: #000 !important;
  }
  #module-tarefas .tf-quickadd-slot,
  #module-tarefas .tf-cab-acoes,
  #module-tarefas .tf-add-inline,
  #module-tarefas .tf-postergar-btn,
  #module-tarefas .tf-sub-alternar { display: none !important; }
}

/* Defensivo: em contextos específicos (ex.: ações do cabeçalho do projeto)
   algo externo colapsa o width dos svgs pra 0 — resiste até a inline
   !important, origem não rastreável pela cascata (possível interferência
   de layout/extensão). min-width SEMPRE vence width na resolução final
   de layout, então garante o ícone visível. */
#module-tarefas.nv-app .tf-btn-icone svg,
#module-tarefas.nv-app .tf-btn-icone span[data-lucide] { min-width: 15px; }

/* ------------------------------ TAREFAS 3.0 fase 3: dependências/Gantt */
#module-tarefas.nv-app .tf-trancada {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font: 600 11px/1 var(--font-sans);
  color: oklch(0.75 0.13 55);
  background: oklch(0.5 0.13 55 / 0.15);
  border-radius: 99px;
  padding: 3px 7px;
}
#module-tarefas.nv-app .tf-trancada span[data-lucide], #module-tarefas.nv-app .tf-trancada svg { width: 11px; height: 11px; min-width: 11px; }
#module-tarefas.nv-app .tf-det-rotulo-dica { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: 0.8; }
#module-tarefas.nv-app .tf-det-deps-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid oklch(0.28 0.010 250 / 0.4);
  border-radius: 10px;
  padding: 10px 12px;
}
#module-tarefas.nv-app .tf-det-dep-nome { font: 400 13px/1.3 var(--font-sans); color: var(--text-2); }

/* ------------------------------------- TAREFAS 3.0 fase 3b: vista GANTT */
#module-tarefas.nv-app .tf-gantt { display: flex; flex-direction: column; gap: 10px; }
#module-tarefas.nv-app .tf-gantt-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
#module-tarefas.nv-app .tf-gantt-zoom {
  display: inline-flex;
  border: 1px solid oklch(0.28 0.010 250 / 0.6);
  border-radius: 9px;
  padding: 2px;
  gap: 2px;
}
#module-tarefas.nv-app .tf-gantt-zoom button {
  border: none;
  background: transparent;
  color: var(--text-3);
  font: 600 12px/1 var(--font-sans);
  padding: 6px 12px;
  border-radius: 7px;
  cursor: pointer;
}
#module-tarefas.nv-app .tf-gantt-zoom button.tf-ativa { background: var(--bg-3); color: var(--text-1); }
#module-tarefas.nv-app .tf-gantt-ir-hoje {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid oklch(0.28 0.010 250 / 0.6);
  background: transparent;
  color: var(--text-3);
  font: 500 12px/1 var(--font-sans);
  padding: 6px 12px;
  border-radius: 9px;
  cursor: pointer;
}
#module-tarefas.nv-app .tf-gantt-ir-hoje:hover { color: var(--text-1); background: var(--bg-2); }
#module-tarefas.nv-app .tf-gantt-ir-hoje svg { width: 13px; height: 13px; min-width: 13px; }
#module-tarefas.nv-app .tf-gantt-ligando {
  font: 600 12px/1.4 var(--font-sans);
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  border: 1px dashed var(--accent);
  border-radius: 9px;
  padding: 6px 10px;
}
#module-tarefas.nv-app .tf-gantt-semdata { font: 400 12px/1 var(--font-sans); color: var(--text-3); }

#module-tarefas.nv-app .tf-gantt-scroll {
  overflow: auto;
  border: 1px solid oklch(0.28 0.010 250 / 0.5);
  border-radius: 12px;
  max-height: calc(100vh - 330px);
  background: var(--bg-2);
}
#module-tarefas.nv-app .tf-gantt-cab {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-2);
  border-bottom: 1px solid oklch(0.28 0.010 250 / 0.5);
}
#module-tarefas.nv-app .tf-gantt-cab-nomes {
  flex: 0 0 220px;
  position: sticky;
  left: 0;
  z-index: 6;
  background: var(--bg-2);
  font: 700 11px/1 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  display: flex;
  align-items: flex-end;
  padding: 0 12px 8px;
  border-right: 1px solid oklch(0.28 0.010 250 / 0.5);
}
#module-tarefas.nv-app .tf-gantt-cab-tempo { position: relative; height: 44px; }
#module-tarefas.nv-app .tf-gantt-meses span {
  position: absolute;
  top: 4px;
  font: 700 11px/1 var(--font-sans);
  color: var(--text-2);
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}
#module-tarefas.nv-app .tf-gantt-dias span {
  position: absolute;
  bottom: 4px;
  font: 500 10px/1 var(--font-sans);
  color: var(--text-3);
  text-align: center;
}
#module-tarefas.nv-app .tf-gantt-dias .tf-gantt-fds { color: oklch(0.5 0.02 250); }

#module-tarefas.nv-app .tf-gantt-linhas { display: flex; position: relative; }
#module-tarefas.nv-app .tf-gantt-nomes {
  flex: 0 0 220px;
  position: sticky;
  left: 0;
  z-index: 4;
  background: var(--bg-2);
  border-right: 1px solid oklch(0.28 0.010 250 / 0.5);
}
#module-tarefas.nv-app .tf-gantt-nome {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  font: 450 12.5px/1.3 var(--font-sans);
  color: var(--text-2);
  border-bottom: 1px solid oklch(0.28 0.010 250 / 0.25);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
#module-tarefas.nv-app .tf-gantt-nome:hover { color: var(--text-1); background: var(--bg-3); }
#module-tarefas.nv-app .tf-gantt-nome-secao {
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  cursor: default;
}
#module-tarefas.nv-app .tf-gantt-nome-secao:hover { background: transparent; color: var(--text-3); }
#module-tarefas.nv-app .tf-gantt-nome-bola {
  width: 8px; height: 8px;
  min-width: 8px;
  border-radius: 50%;
  background: currentColor;
}
#module-tarefas.nv-app .tf-gantt-nome.tf-gantt-feita { text-decoration: line-through; opacity: 0.6; }

#module-tarefas.nv-app .tf-gantt-area { position: relative; }
#module-tarefas.nv-app .tf-gantt-col-fds {
  position: absolute;
  top: 0; bottom: 0;
  background: oklch(0.2 0.008 250 / 0.5);
}
#module-tarefas.nv-app .tf-gantt-hoje {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  opacity: 0.7;
  z-index: 2;
}
#module-tarefas.nv-app .tf-gantt-barra {
  position: absolute;
  height: 24px;
  border-radius: 7px;
  background: color-mix(in oklch, currentColor 30%, var(--bg-3));
  border: 1.5px solid currentColor;
  display: flex;
  align-items: center;
  cursor: grab;
  z-index: 3;
  touch-action: none;
  user-select: none;
}
#module-tarefas.nv-app .tf-gantt-barra:active { cursor: grabbing; }
#module-tarefas.nv-app .tf-gantt-barra-texto {
  font: 600 11px/1 var(--font-sans);
  color: var(--text-1);
  padding: 0 8px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  flex: 1;
}
#module-tarefas.nv-app .tf-gantt-feita.tf-gantt-barra { opacity: 0.5; }
#module-tarefas.nv-app .tf-gantt-feita .tf-gantt-barra-texto { text-decoration: line-through; }
#module-tarefas.nv-app .tf-gantt-bloq { border-style: dashed; }
#module-tarefas.nv-app .tf-gantt-alca {
  width: 8px;
  align-self: stretch;
  cursor: ew-resize;
  flex: none;
}
#module-tarefas.nv-app .tf-gantt-conector {
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: var(--bg-1);
  color: inherit;
  font-size: 0;
  cursor: crosshair;
  opacity: 0;
  transition: opacity 120ms ease;
}
#module-tarefas.nv-app .tf-gantt-barra:hover .tf-gantt-conector { opacity: 1; }
#module-tarefas.nv-app .tf-gantt-setas {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  color: var(--text-3);
}
#module-tarefas.nv-app .tf-gantt-seta {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  pointer-events: stroke;
  cursor: pointer;
}
#module-tarefas.nv-app .tf-gantt-seta:hover { stroke: oklch(0.72 0.16 25); color: oklch(0.72 0.16 25); stroke-width: 2.5; }

/* ------------------------- TAREFAS: menu de contexto nível concorrente */
#module-tarefas.nv-app #tf-ctx-menu { min-width: 240px; padding: 6px; }
#module-tarefas.nv-app .tf-ctx-sep {
  height: 1px;
  background: oklch(0.3 0.01 250 / 0.6);
  margin: 5px 4px;
}
#module-tarefas.nv-app .tf-ctx-rotulo {
  font: 700 10.5px/1 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 6px 10px 2px;
}
#module-tarefas.nv-app .tf-ctx-linha-icones {
  display: flex;
  gap: 8px;
  padding: 4px 10px 6px;
  justify-content: flex-start;
}
#module-tarefas.nv-app .tf-ctx-data {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid oklch(0.28 0.010 250 / 0.6);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}
#module-tarefas.nv-app .tf-ctx-data:hover { background: var(--bg-3); color: var(--text-1); }
#module-tarefas.nv-app .tf-ctx-data.tf-ativa { border-color: var(--accent); color: var(--accent); }
#module-tarefas.nv-app .tf-ctx-data svg,
#module-tarefas.nv-app .tf-ctx-data span[data-lucide] { width: 15px; height: 15px; min-width: 15px; }
#module-tarefas.nv-app .tf-ctx-prio-atual { outline: 2px solid currentColor; outline-offset: 2px; }
#module-tarefas.nv-app #tf-ctx-menu kbd {
  margin-left: auto;
  font: 500 10px/1 var(--font-sans);
  color: var(--text-3);
  background: var(--bg-3);
  border-radius: 4px;
  padding: 2px 5px;
}
#module-tarefas.nv-app .tf-ctx-add { padding: 4px; }
#module-tarefas.nv-app .tf-ctx-add .tf-composer-input {
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 8px 10px;
}

/* Menus flutuantes: contidos na viewport, com scroll interno se preciso */
#module-tarefas.nv-app .tf-menu-flutuante {
  min-width: 200px;
  max-width: min(320px, calc(100vw - 16px));
  /* cabe na viewport inteira (o clamp do menuFlutuante puxa pra cima);
     o teto de 480px escondia o Excluir atrás de scroll interno */
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  overflow-x: hidden;
  /* acima do painel de detalhe (overlay z-index:90): sem isso o menu ⋯ da
     etiqueta aberto de dentro do detalhe cai ATRÁS do painel e não clica. */
  z-index: 95;
}
#module-tarefas.nv-app .tf-menu-flutuante > button { white-space: nowrap; width: 100%; }

/* TAREFAS: o painel precisa poder ENCOLHER (min-width:0) — sem isso o
   min-content do quick-add/board/gantt trava o 1fr do grid e o módulo
   transborda cortado em janelas médias (bug relatado em ~1260px). */
#module-tarefas.nv-app .tf-corpo { grid-template-columns: 264px minmax(0, 1fr); }
#module-tarefas.nv-app .tf-principal,
#module-tarefas.nv-app .tf-lateral { min-width: 0; }
#module-tarefas.nv-app .tf-cab-linha > div:first-child { min-width: 0; }
#module-tarefas.nv-app .tf-quickadd-linha1 { min-width: 0; }
#module-tarefas.nv-app .tf-qa-texto { min-width: 60px; }
@media (max-width: 1180px) {
  #module-tarefas.nv-app .tf-corpo { grid-template-columns: 228px minmax(0, 1fr); gap: 12px; }
  #module-tarefas.nv-app .tf-principal { padding: 14px 14px 20px; }
}

/* ============================== TAREFAS: leva Lixeira/Etiquetas/⋯ ===== */
/* Bolinha de cor da etiqueta (lateral e cabeçalho da vista @etiqueta) */
#module-tarefas.nv-app .tf-et-bolinha {
  width: 10px; height: 10px; border-radius: 50%;
  background: currentColor; flex: none;
}

/* ⋯ da linha de etiqueta na lateral: aparece no hover (sempre em touch) */
#module-tarefas.nv-app .tf-projeto-menu-btn { opacity: 0; flex: none; }
#module-tarefas.nv-app .tf-projeto-linha:hover .tf-projeto-menu-btn,
#module-tarefas.nv-app .tf-projeto-linha:focus-within .tf-projeto-menu-btn { opacity: 1; }
#module-tarefas.nv-app .tf-projeto-linha { display: flex; align-items: center; }
#module-tarefas.nv-app .tf-projeto-linha .tf-projeto-link { flex: 1; min-width: 0; }

/* ⋯ da linha de tarefa: junto das outras ações de hover */
#module-tarefas.nv-app .tf-mais-btn { opacity: 0; }
#module-tarefas.nv-app .tf-item:hover .tf-mais-btn,
#module-tarefas.nv-app .tf-item:focus-within .tf-mais-btn { opacity: 1; }

/* Touch: sem hover, ações ficam sempre visíveis */
@media (hover: none) {
  #module-tarefas.nv-app .tf-mais-btn,
  #module-tarefas.nv-app .tf-projeto-menu-btn { opacity: 1; }
}

/* Vista Lixeira */
#module-tarefas.nv-app .tf-lix-linha { align-items: center; gap: 10px; }
#module-tarefas.nv-app .tf-lix-linha .tf-item-corpo { cursor: default; }
#module-tarefas.nv-app .tf-lix-linha .tf-btn { flex: none; }

/* ============================== TAREFAS: vista CALENDÁRIO ============= */
#module-tarefas.nv-app .tf-cal-topo {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px; flex-wrap: wrap;
}
#module-tarefas.nv-app .tf-cal-nav { display: flex; align-items: center; gap: 4px; }
#module-tarefas.nv-app .tf-cal-hoje-btn { padding: 4px 12px; }
#module-tarefas.nv-app .tf-cal-rotulo {
  font: 600 15px/1.2 var(--font-sans); color: var(--text-1);
  text-transform: capitalize; flex: 1;
}

/* ---- MÊS: grade 6×7 ---- */
#module-tarefas.nv-app .tf-cal-grade-h {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px; padding: 0 0 6px;
}
#module-tarefas.nv-app .tf-cal-grade-h span {
  font: 600 11px/1 var(--font-sans); color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.04em; padding-left: 8px;
}
#module-tarefas.nv-app .tf-cal-grade {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(96px, auto); gap: 6px;
}
#module-tarefas.nv-app .tf-cal-celula {
  background: var(--bg-2); border: 1px solid oklch(0.28 0.010 250 / 0.4);
  border-radius: 10px; padding: 6px; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
#module-tarefas.nv-app .tf-cal-fora { opacity: 0.45; }
#module-tarefas.nv-app .tf-cal-hoje { border-color: var(--accent); }
#module-tarefas.nv-app .tf-cal-celula-topo {
  display: flex; align-items: center; justify-content: space-between;
}
#module-tarefas.nv-app .tf-cal-num { font: 600 12px/1 var(--font-sans); color: var(--text-2); }
#module-tarefas.nv-app .tf-cal-hoje .tf-cal-num {
  background: var(--accent); color: oklch(0.15 0.02 250);
  border-radius: 50%; width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
}
#module-tarefas.nv-app .tf-cal-add {
  border: none; background: transparent; color: var(--text-3);
  font: 600 14px/1 var(--font-sans); cursor: pointer;
  width: 20px; height: 20px; border-radius: 6px; opacity: 0;
}
#module-tarefas.nv-app .tf-cal-celula:hover .tf-cal-add,
#module-tarefas.nv-app .tf-cal-sem-celula:hover .tf-cal-add { opacity: 1; }
#module-tarefas.nv-app .tf-cal-add:hover { background: var(--bg-3); color: var(--text-1); }
#module-tarefas.nv-app .tf-cal-pilulas {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}

/* ---- pílula (compartilhada mês/semana) ---- */
#module-tarefas.nv-app .tf-cal-pilula {
  display: flex; align-items: center; gap: 5px;
  border: none; border-left: 3px solid currentColor; border-radius: 5px;
  background: var(--bg-3); padding: 3px 6px; cursor: pointer;
  min-width: 0; max-width: 100%; text-align: left;
  touch-action: none; /* pointer-drag no mobile */
}
#module-tarefas.nv-app .tf-cal-pilula:hover { filter: brightness(1.15); }
#module-tarefas.nv-app .tf-cal-prio-1 { color: oklch(0.62 0.19 25); }
#module-tarefas.nv-app .tf-cal-prio-2 { color: oklch(0.70 0.15 60); }
#module-tarefas.nv-app .tf-cal-prio-3 { color: oklch(0.65 0.12 250); }
#module-tarefas.nv-app .tf-cal-prio-4 { color: oklch(0.62 0.01 250); }
#module-tarefas.nv-app .tf-cal-hora {
  font: 600 10px/1 var(--font-mono, monospace); color: var(--text-3); flex: none;
}
#module-tarefas.nv-app .tf-cal-texto {
  font: 400 12px/1.3 var(--font-sans); color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
#module-tarefas.nv-app .tf-cal-pilula.tf-feita .tf-cal-texto {
  text-decoration: line-through; color: var(--text-3);
}
#module-tarefas.nv-app .tf-cal-fantasma {
  background: transparent; border: 1px dashed oklch(0.45 0.02 250 / 0.7);
  border-left: 3px dashed currentColor; opacity: 0.75;
}
#module-tarefas.nv-app .tf-cal-mais {
  border: none; background: transparent; color: var(--text-3);
  font: 600 11px/1 var(--font-sans); cursor: pointer; text-align: left; padding: 2px 6px;
}
#module-tarefas.nv-app .tf-cal-mais:hover { color: var(--text-1); }

/* ---- drag ---- */
#module-tarefas.nv-app .tf-cal-arrastando { opacity: 0.35; }
.tf-cal-ghost {
  position: fixed; z-index: 9999; pointer-events: none;
  max-width: 220px; box-shadow: 0 8px 24px oklch(0 0 0 / 0.4);
}
#module-tarefas.nv-app .tf-cal-solta-alvo {
  outline: 2px solid var(--accent); outline-offset: -2px;
  background: oklch(0.30 0.04 160 / 0.25);
}

/* ---- SEMANA ---- */
#module-tarefas.nv-app .tf-cal-sem-grade {
  display: grid; grid-template-columns: 52px repeat(7, minmax(0, 1fr));
  gap: 4px;
}
#module-tarefas.nv-app .tf-cal-sem-h {
  display: flex; align-items: baseline; gap: 6px; padding: 4px 8px;
  border-radius: 8px;
}
#module-tarefas.nv-app .tf-cal-sem-h.tf-cal-hoje { background: oklch(0.30 0.04 160 / 0.3); }
#module-tarefas.nv-app .tf-cal-sem-dow {
  font: 600 11px/1 var(--font-sans); color: var(--text-3); text-transform: uppercase;
}
#module-tarefas.nv-app .tf-cal-sem-num { font: 700 15px/1 var(--font-sans); color: var(--text-1); }
#module-tarefas.nv-app .tf-cal-sem-hora {
  font: 600 10px/1 var(--font-mono, monospace); color: var(--text-3);
  padding: 6px 4px 0 0; text-align: right;
}
#module-tarefas.nv-app .tf-cal-sem-celula {
  background: var(--bg-2); border: 1px solid oklch(0.28 0.010 250 / 0.3);
  border-radius: 8px; padding: 3px; min-height: 34px; min-width: 0;
  display: flex; flex-direction: column; gap: 3px; position: relative;
}
#module-tarefas.nv-app .tf-cal-sem-diainteiro { min-height: 40px; }
#module-tarefas.nv-app .tf-cal-add-sem { position: absolute; top: 2px; right: 2px; }
#module-tarefas.nv-app .tf-cal-sem-corpo {
  max-height: 60vh; overflow-y: auto; margin-top: 4px;
}
#module-tarefas.nv-app .tf-cal-sem-rotulo { padding-top: 12px; }
#module-tarefas.nv-app .tf-cal-fora-janela {
  font: 400 12px/1.5 var(--font-sans); color: var(--text-3); margin-top: 8px;
}

/* popover "+N mais" */
#module-tarefas.nv-app #tf-cal-dia-menu .tf-cal-dia-titulo {
  font: 600 12px/1 var(--font-sans); color: var(--text-3);
  padding: 6px 10px 4px; margin: 0;
}
#module-tarefas.nv-app #tf-cal-dia-menu button.tf-feita { text-decoration: line-through; color: var(--text-3); }

/* mês em telas estreitas: células mais baixas */
@media (max-width: 900px) {
  #module-tarefas.nv-app .tf-cal-grade { grid-auto-rows: minmax(72px, auto); }
}

/* Menus flutuantes: itens SEMPRE alinhados à esquerda — uma regra global
   de button do flat.css seta justify-content:center e vencia porque a
   gente nunca declarava a propriedade. */
#module-tarefas.nv-app .tf-qa-menu > button {
  justify-content: flex-start !important;
  width: 100%;
}
/* checkboxes do popover de etiquetas */
#module-tarefas.nv-app #tf-ctx-etiquetas button .tf-et-bolinha { margin: 0 2px; }

/* Menu de contexto: compacto o bastante pra caber inteiro na tela */
#module-tarefas.nv-app #tf-ctx-menu > button { padding: 5px 10px; }
#module-tarefas.nv-app #tf-ctx-menu .tf-ctx-sep { margin: 3px 4px; }
#module-tarefas.nv-app #tf-ctx-menu .tf-ctx-rotulo { padding: 4px 10px 1px; }
#module-tarefas.nv-app #tf-ctx-menu .tf-ctx-linha-icones { padding: 3px 10px 4px; }

/* Form de comentário: input + botão Comentar na mesma linha */
#module-tarefas.nv-app .tf-det-com-form {
  display: flex; gap: 8px; align-items: center;
}
#module-tarefas.nv-app .tf-det-com-form input { flex: 1; min-width: 0; }
#module-tarefas.nv-app .tf-det-com-form button { flex: none; }

/* Sublistas aninhadas: indentação por nível, com guia sutil */
#module-tarefas.nv-app .tf-sublista .tf-sublista {
  border-left: 1px solid oklch(0.30 0.010 250 / 0.5);
  margin-left: 10px;
}

/* ---------- descrição RICA no modal (stack do Notebook portado) ---------- */
#module-tarefas.nv-app .tf-det-desc-rica {
  min-height: 76px; max-height: 40vh; overflow-y: auto;
  /* No flex-column do painel, o min-height explícito deixava o flex-shrink
     COLAPSAR a descrição até 76px (escondendo o texto). flex-shrink:0 faz
     ela crescer com o conteúdo até o teto e só então rolar internamente. */
  flex-shrink: 0;
  border: 1px solid oklch(0.28 0.010 250 / 0.6); border-radius: 10px;
  background: var(--bg-2); color: var(--text-1);
  padding: 10px 12px; font: 400 13px/1.6 var(--font-sans);
  cursor: text; outline: none;
}
#module-tarefas.nv-app .tf-det-desc-rica:focus { border-color: var(--accent); }
#module-tarefas.nv-app .tf-det-desc-rica:empty::before {
  content: attr(data-placeholder); color: var(--text-3); pointer-events: none;
}
/* Elementos renderizados dentro da descrição/comentários */
#module-tarefas.nv-app .tf-det-desc-rica p,
#module-tarefas.nv-app .tf-det-com-md p { margin: 0 0 6px; }
#module-tarefas.nv-app .tf-det-desc-rica h1,
#module-tarefas.nv-app .tf-det-desc-rica h2,
#module-tarefas.nv-app .tf-det-desc-rica h3,
#module-tarefas.nv-app .tf-det-desc-rica h4 {
  font: 700 15px/1.4 var(--font-sans); color: var(--text-1); margin: 8px 0 4px;
}
#module-tarefas.nv-app .tf-det-desc-rica h1 { font-size: 17px; }
#module-tarefas.nv-app .tf-det-desc-rica ul,
#module-tarefas.nv-app .tf-det-desc-rica ol,
#module-tarefas.nv-app .tf-det-com-md ul,
#module-tarefas.nv-app .tf-det-com-md ol { margin: 4px 0 6px; padding-left: 20px; }
#module-tarefas.nv-app .tf-det-desc-rica li,
#module-tarefas.nv-app .tf-det-com-md li { margin: 2px 0; }
#module-tarefas.nv-app .tf-det-desc-rica blockquote,
#module-tarefas.nv-app .tf-det-com-md blockquote {
  border-left: 3px solid var(--accent); margin: 6px 0; padding: 2px 10px;
  color: var(--text-2);
}
#module-tarefas.nv-app .tf-det-desc-rica pre,
#module-tarefas.nv-app .tf-det-com-md pre {
  background: var(--bg-3); border-radius: 8px; padding: 8px 10px;
  font: 400 12px/1.5 var(--font-mono, monospace); overflow-x: auto; margin: 6px 0;
}
#module-tarefas.nv-app .tf-det-desc-rica code,
#module-tarefas.nv-app .tf-det-com-md code {
  background: var(--bg-3); border-radius: 4px; padding: 1px 5px;
  font: 400 12px/1.4 var(--font-mono, monospace);
}
#module-tarefas.nv-app .tf-det-desc-rica a,
#module-tarefas.nv-app .tf-det-com-md a { color: var(--accent); text-decoration: underline; }
#module-tarefas.nv-app .tf-det-desc-rica hr { border: none; border-top: 1px solid oklch(0.3 0.01 250 / 0.6); margin: 8px 0; }
#module-tarefas.nv-app .tf-det-com-md { font: 400 12.5px/1.6 var(--font-sans); color: var(--text-1); }
#module-tarefas.nv-app .tf-det-com-md > :last-child { margin-bottom: 0; }

/* Barra de formatação da descrição (afinal, recurso invisível = inexistente) */
#module-tarefas.nv-app .tf-fmt-bar {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  padding: 4px 6px; margin-bottom: -1px;
  border: 1px solid oklch(0.28 0.010 250 / 0.6);
  border-radius: 10px 10px 0 0; background: var(--bg-3);
}
#module-tarefas.nv-app .tf-fmt-bar button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 26px; border: none; border-radius: 6px;
  background: transparent; color: var(--text-2); cursor: pointer;
  font: 600 12.5px/1 var(--font-sans);
}
#module-tarefas.nv-app .tf-fmt-bar button:hover { background: var(--bg-2); color: var(--text-1); }
#module-tarefas.nv-app .tf-fmt-bar button svg,
#module-tarefas.nv-app .tf-fmt-bar button span[data-lucide] { width: 14px; height: 14px; min-width: 14px; }
#module-tarefas.nv-app .tf-fmt-sep {
  width: 1px; height: 16px; background: oklch(0.3 0.01 250 / 0.6); margin: 0 4px;
}
#module-tarefas.nv-app .tf-fmt-dica {
  margin-left: auto; font: 400 10.5px/1.2 var(--font-sans); color: var(--text-3);
}
#module-tarefas.nv-app .tf-fmt-bar + .tf-det-desc-rica { border-radius: 0 0 10px 10px; }
@media (max-width: 720px) { #module-tarefas.nv-app .tf-fmt-dica { display: none; } }

/* MODO PAPEL v2: superfície CLARA mas em tom do sistema (cinza-azulado
   suave, não branco estourado) — clara o bastante pras cores do menu de
   formatação (paleta feita pra papel) e integrada ao tema escuro. */
#module-tarefas.nv-app .tf-det-desc-rica {
  background: oklch(0.84 0.012 250);
  color: #10151d;
  border-color: oklch(0.75 0.01 250 / 0.6);
  box-shadow: inset 0 1px 3px oklch(0 0 0 / 0.08);
}
#module-tarefas.nv-app .tf-det-desc-rica:focus {
  border-color: var(--accent);
  background: oklch(0.86 0.01 250);
}
#module-tarefas.nv-app .tf-det-desc-rica:empty::before { color: #57606f; }
#module-tarefas.nv-app .tf-det-desc-rica h1,
#module-tarefas.nv-app .tf-det-desc-rica h2,
#module-tarefas.nv-app .tf-det-desc-rica h3,
#module-tarefas.nv-app .tf-det-desc-rica h4 { color: #101826; }
#module-tarefas.nv-app .tf-det-desc-rica blockquote { color: #46536a; }
#module-tarefas.nv-app .tf-det-desc-rica pre,
#module-tarefas.nv-app .tf-det-desc-rica code { background: oklch(0.78 0.012 250); color: #101826; }
#module-tarefas.nv-app .tf-det-desc-rica a { color: #1d4ed8; }
#module-tarefas.nv-app .tf-det-desc-rica hr { border-top-color: oklch(0.7 0.012 250); }
#module-tarefas.nv-app .tf-det-desc-rica ::selection { background: #9dc2f0; }

/* LISTAS dentro do editor/comentários: um reset global zera list-style —
   sem isto os botões de marcadores/numeração "não faziam nada" visível */
#module-tarefas.nv-app .tf-det-desc-rica ul,
#module-tarefas.nv-app .tf-det-com-md ul { list-style: disc outside !important; padding-left: 22px !important; }
#module-tarefas.nv-app .tf-det-desc-rica ul ul,
#module-tarefas.nv-app .tf-det-com-md ul ul { list-style: circle outside !important; }
#module-tarefas.nv-app .tf-det-desc-rica ol,
#module-tarefas.nv-app .tf-det-com-md ol { list-style: decimal outside !important; padding-left: 22px !important; }
#module-tarefas.nv-app .tf-det-desc-rica ol ol,
#module-tarefas.nv-app .tf-det-com-md ol ol { list-style: lower-alpha outside !important; }
#module-tarefas.nv-app .tf-det-desc-rica li,
#module-tarefas.nv-app .tf-det-com-md li { display: list-item !important; }
#module-tarefas.nv-app .tf-det-desc-rica li::marker,
#module-tarefas.nv-app .tf-det-com-md li::marker { color: #46536a; }

/* Comentários exibidos: mesmo papel */
#module-tarefas.nv-app .tf-det-com-md {
  background: oklch(0.84 0.012 250); color: #10151d;
  border-radius: 8px; padding: 8px 10px;
}
#module-tarefas.nv-app .tf-det-com-md a { color: #1d4ed8; }
#module-tarefas.nv-app .tf-det-com-md pre,
#module-tarefas.nv-app .tf-det-com-md code { background: oklch(0.78 0.012 250); color: #101826; }
#module-tarefas.nv-app .tf-det-com-md blockquote { color: #46536a; }

/* Botão da barra ATIVO (formato vigente na seleção/cursor) */
#module-tarefas.nv-app .tf-fmt-bar button.tf-fmt-on {
  background: oklch(0.32 0.05 160 / 0.6);
  color: var(--accent);
}

/* Papel: blocos de TEXTO forçam a cor escura (uma regra global de p com
   prioridade alta clareava o texto dentro do fundo branco). NÃO aplicar
   em span/mark/font — a cor escolhida pelo usuário viaja em style inline
   e regra !important em span a mataria. */
#module-tarefas.nv-app .tf-det-desc-rica,
#module-tarefas.nv-app .tf-det-desc-rica p,
#module-tarefas.nv-app .tf-det-desc-rica div,
#module-tarefas.nv-app .tf-det-desc-rica li,
#module-tarefas.nv-app .tf-det-desc-rica h1,
#module-tarefas.nv-app .tf-det-desc-rica h2,
#module-tarefas.nv-app .tf-det-desc-rica h3,
#module-tarefas.nv-app .tf-det-desc-rica h4,
#module-tarefas.nv-app .tf-det-com-md,
#module-tarefas.nv-app .tf-det-com-md p,
#module-tarefas.nv-app .tf-det-com-md div,
#module-tarefas.nv-app .tf-det-com-md li { color: #10151d !important; }
#module-tarefas.nv-app .tf-det-desc-rica blockquote,
#module-tarefas.nv-app .tf-det-com-md blockquote { color: #39445a !important; }

/* ---------------- Alertas agendados (modal + popover de lembretes) ---- */
#module-tarefas.nv-app .tf-det-alertas { display: flex; flex-direction: column; gap: 8px; }
#module-tarefas.nv-app .tf-det-rotulo-dica {
  font: 400 11px/1.2 var(--font-sans); color: var(--text-3); text-transform: none; letter-spacing: 0;
}
#module-tarefas.nv-app .tf-det-alertas-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#module-tarefas.nv-app .tf-det-alertas-chips:empty { display: none; }
#module-tarefas.nv-app .tf-det-alerta-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: oklch(0.32 0.05 160 / 0.35); color: var(--text-1);
  border: 1px solid oklch(0.45 0.08 160 / 0.5);
  border-radius: 999px; padding: 4px 6px 4px 10px;
  font: 500 12px/1 var(--font-sans);
}
#module-tarefas.nv-app .tf-det-alerta-chip svg,
#module-tarefas.nv-app .tf-det-alerta-chip span[data-lucide] { width: 12px; height: 12px; min-width: 12px; }
#module-tarefas.nv-app .tf-det-alerta-chip.tf-alerta-passado { opacity: 0.55; text-decoration: line-through; }
#module-tarefas.nv-app .tf-det-alerta-chip button {
  border: none; background: transparent; color: var(--text-3);
  font: 700 13px/1 var(--font-sans); cursor: pointer; padding: 0 4px;
}
#module-tarefas.nv-app .tf-det-alerta-chip button:hover { color: #f87171; }
#module-tarefas.nv-app .tf-det-alerta-form { display: flex; gap: 8px; align-items: center; }
#module-tarefas.nv-app .tf-det-alerta-form input[type="datetime-local"] {
  background: var(--bg-2); color: var(--text-1);
  border: 1px solid oklch(0.28 0.010 250 / 0.6); border-radius: 8px;
  padding: 7px 10px; font: 400 12.5px/1 var(--font-sans);
  color-scheme: dark;
}
#module-tarefas.nv-app .tf-lem-alerta-form { display: flex; gap: 6px; padding: 4px 8px 6px; }
#module-tarefas.nv-app .tf-lem-alerta-form input {
  flex: 1; min-width: 0; background: var(--bg-3); color: var(--text-1);
  border: 1px solid oklch(0.28 0.010 250 / 0.6); border-radius: 7px;
  padding: 5px 8px; font: 400 11.5px/1 var(--font-sans);
  color-scheme: dark;
}
#module-tarefas.nv-app .tf-lem-alerta-existente .tf-lem-x { margin-left: auto; color: var(--text-3); }
#module-tarefas.nv-app .tf-lem-alerta-existente:hover .tf-lem-x { color: #f87171; }
#module-tarefas.nv-app button[data-lem][disabled] { opacity: 0.4; cursor: not-allowed; }

/* Paleta do marca-texto: linha inline dentro da barra de formatação */
#module-tarefas.nv-app .tf-fmt-paleta {
  flex-basis: 100%; display: flex; gap: 5px; padding: 4px 2px 2px;
  border-top: 1px solid oklch(0.3 0.01 250 / 0.5); margin-top: 4px;
}
#module-tarefas.nv-app .tf-fmt-paleta button {
  width: 22px; height: 22px; border-radius: 6px; cursor: pointer;
  border: 1px solid oklch(0.4 0.01 250 / 0.5);
  font: 700 12px/1 var(--font-sans); color: #333;
  display: inline-flex; align-items: center; justify-content: center;
}
#module-tarefas.nv-app .tf-fmt-paleta button:hover {
  outline: 2px solid var(--accent); outline-offset: 1px;
}

/* "+ Adicionar subtarefa" no fim da sublista: discreto, some até o hover */
#module-tarefas.nv-app .tf-sub-add { list-style: none !important; }
#module-tarefas.nv-app .tf-sub-add button {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; background: transparent; cursor: pointer;
  color: var(--text-3); font: 500 12px/1 var(--font-sans);
  padding: 4px 8px; border-radius: 6px; opacity: 0;
}
#module-tarefas.nv-app .tf-sublista:hover .tf-sub-add button,
#module-tarefas.nv-app .tf-sub-add button:focus-visible { opacity: 1; }
#module-tarefas.nv-app .tf-sub-add button:hover { color: var(--accent); background: var(--bg-2); }
#module-tarefas.nv-app .tf-sub-add button svg,
#module-tarefas.nv-app .tf-sub-add button span[data-lucide] { width: 13px; height: 13px; min-width: 13px; }
@media (hover: none) { #module-tarefas.nv-app .tf-sub-add button { opacity: 1; } }

/* Composer de subtarefa inline: nasce indentado no lugar da árvore */
#module-tarefas.nv-app .tf-sub-composer { list-style: none !important; padding: 4px 0 4px 4px; }
#module-tarefas.nv-app .tf-ctx-inserir { align-items: center; gap: 6px; }
#module-tarefas.nv-app .tf-ctx-inserir-rotulo { font: 500 11px/1 var(--font-sans); color: var(--text-3); }

/* Feed de ATIVIDADE do painel (histórico da tarefa) */
#module-tarefas.nv-app .tf-det-atividade { display: flex; flex-direction: column; gap: 6px; }
#module-tarefas.nv-app .tf-det-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
#module-tarefas.nv-app .tf-det-hist-linha {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px; border-radius: 6px;
  font: 400 12px/1.4 var(--font-sans); color: var(--text-2);
}
#module-tarefas.nv-app .tf-det-hist-linha:hover { background: var(--bg-2); }
#module-tarefas.nv-app .tf-det-hist-icone {
  display: inline-flex; width: 18px; height: 18px;
  align-items: center; justify-content: center; color: var(--text-3); flex: none;
}
#module-tarefas.nv-app .tf-det-hist-icone svg,
#module-tarefas.nv-app .tf-det-hist-icone span[data-lucide] { width: 13px; height: 13px; min-width: 13px; }
#module-tarefas.nv-app .tf-det-hist-texto { flex: 1; min-width: 0; }
#module-tarefas.nv-app .tf-det-hist-texto b { color: var(--text-1); font-weight: 600; }
#module-tarefas.nv-app .tf-det-hist-quando { color: var(--text-3); font-size: 11px; flex: none; }
#module-tarefas.nv-app .tf-det-hist-mais {
  align-self: flex-start; border: none; background: transparent; cursor: pointer;
  color: var(--accent); font: 500 12px/1 var(--font-sans); padding: 4px 6px;
}

/* ================================ MÓDULO CICLO DE ESTUDOS ============= */
/* Conteúdo CENTRALIZADO na página (header e corpo na mesma coluna) */
#module-ciclo.nv-app .page-header,
#module-ciclo.nv-app #cx-raiz {
  max-width: 880px; /* mesma largura do card do setup — tudo numa coluna só */
  margin-left: auto;
  margin-right: auto;
}

/* ---- setup ---- */
#module-ciclo.nv-app .cx-setup {
  background: var(--bg-1); border: 1px solid oklch(0.28 0.010 250 / 0.6);
  border-radius: 14px; padding: 20px 22px;
  display: flex; flex-direction: column; gap: 14px;
  /* card mais estreito: sem o vão gigante entre o nome e os números */
  max-width: 880px; margin: 0 auto; width: 100%;
}
#module-ciclo.nv-app .cx-setup-cab { font: 700 18px/1.2 var(--font-sans); color: var(--text-1); }
#module-ciclo.nv-app .cx-setup-sub { font: 400 13px/1.6 var(--font-sans); color: var(--text-2); margin: 0; }
/* GRID de disciplinas: cabeçalho e linhas usam o MESMO template de
   colunas — alinhamento garantido por construção (a <table> deixava os
   inputs menores que a célula e fora do eixo do cabeçalho). */
#module-ciclo.nv-app .cx-disc-lista { display: flex; flex-direction: column; gap: 8px; }
#module-ciclo.nv-app #cx-disc-corpo { display: flex; flex-direction: column; gap: 8px; }
#module-ciclo.nv-app .cx-disc-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px 82px 132px 76px 64px 32px;
  gap: 10px;
  align-items: center;
}
#module-ciclo.nv-app .cx-disc-cabecalho span {
  font: 600 10.5px/1.3 var(--font-sans); color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.04em;
  padding-left: 12px; /* mesmo recuo do texto dentro do input */
}
#module-ciclo.nv-app .cx-disc-cabecalho .cx-cab-num { text-align: center; padding-left: 0; }
#module-ciclo.nv-app .cx-disc-cols input,
#module-ciclo.nv-app .cx-disc-cols select,
#module-ciclo.nv-app .cx-setup-grade input {
  width: 100%; height: 38px; background: var(--bg-2); color: var(--text-1);
  border: 1px solid oklch(0.28 0.010 250 / 0.6); border-radius: 8px;
  padding: 0 10px; font: 400 13px/36px var(--font-sans);
  color-scheme: dark; box-sizing: border-box; min-width: 0;
}
#module-ciclo.nv-app .cx-disc-questoes,
#module-ciclo.nv-app .cx-disc-peso,
#module-ciclo.nv-app .cx-disc-fixo { text-align: center; }
/* select centraliza o conteúdo nativamente (line-height alto CORTA <select>) */
#module-ciclo.nv-app .cx-disc-cols select { line-height: normal; padding-right: 22px; }
#module-ciclo.nv-app .cx-disc-remover {
  border: none; background: transparent; color: var(--text-3);
  font: 700 16px/1 var(--font-sans); cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
#module-ciclo.nv-app .cx-disc-remover:hover { color: #f87171; background: var(--bg-2); }
#module-ciclo.nv-app .cx-setup-grade {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
@media (max-width: 760px) {
  #module-ciclo.nv-app .cx-setup-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#module-ciclo.nv-app .cx-setup-grade label {
  display: flex; flex-direction: column; gap: 6px;
  font: 600 12px/1.2 var(--font-sans); color: var(--text-2);
  height: 100%;
}
/* rótulos têm 1 OU 2 linhas ("(opcional)") — input ancorado no PÉ da
   célula deixa os quatro campos na MESMA linha (report do João) */
#module-ciclo.nv-app .cx-setup-grade label input { margin-top: auto; }
#module-ciclo.nv-app .cx-opcional { font-weight: 400; color: var(--text-3); }
#module-ciclo.nv-app .cx-setup-acoes { display: flex; justify-content: flex-end; gap: 10px; }

/* botões */
#module-ciclo.nv-app .cx-btn-primario {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: oklch(0.15 0.02 250);
  border: none; border-radius: 10px; padding: 10px 18px;
  font: 700 13.5px/1 var(--font-sans); cursor: pointer;
}
#module-ciclo.nv-app .cx-btn-primario:hover { filter: brightness(1.1); }
#module-ciclo.nv-app .cx-btn-fantasma {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-2); color: var(--text-2);
  border: 1px solid oklch(0.28 0.010 250 / 0.6); border-radius: 10px;
  padding: 9px 14px; font: 600 12.5px/1 var(--font-sans); cursor: pointer;
}
#module-ciclo.nv-app .cx-btn-fantasma:hover { background: var(--bg-3); color: var(--text-1); }
#module-ciclo.nv-app button svg, #module-ciclo.nv-app button span[data-lucide] {
  width: 15px; height: 15px; min-width: 15px;
}

#module-ciclo.nv-app .cx-setup-ferramentas { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- giro ---- */
#module-ciclo.nv-app .cx-giro { display: flex; flex-direction: column; gap: 18px; }
#module-ciclo.nv-app .cx-giro-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
#module-ciclo.nv-app .cx-giro-nome { font: 700 20px/1.2 var(--font-sans); color: var(--text-1); }
#module-ciclo.nv-app .cx-giro-metricas { font: 400 13px/1.5 var(--font-sans); color: var(--text-2); margin: 4px 0 0; }
#module-ciclo.nv-app .cx-giro-metricas b { color: var(--text-1); }
#module-ciclo.nv-app .cx-previsao {
  font: 400 12.5px/1.5 var(--font-sans); color: var(--text-2);
  margin: 6px 0 0; padding: 6px 10px; border-radius: 8px;
  background: oklch(0.74 0.16 152 / 0.07); border: 1px solid oklch(0.74 0.16 152 / 0.18);
  display: inline-block;
}
#module-ciclo.nv-app .cx-previsao b { color: var(--text-1); }
#module-ciclo.nv-app .cx-giro-corpo {
  display: grid; grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
  gap: 24px; align-items: start;
}
@media (max-width: 860px) { #module-ciclo.nv-app .cx-giro-corpo { grid-template-columns: minmax(0, 1fr); } }
#module-ciclo.nv-app .cx-anel-wrap {
  /* centralizado VERTICALMENTE em relação ao card do bloco ao lado
     (ficava grudado no topo enquanto o card crescia) */
  align-self: center;
  display: flex;
  justify-content: center;
}
#module-ciclo.nv-app .cx-anel { width: 100%; max-width: 420px; height: auto; }
/* TRILHO: a fatia planejada, bem apagada (fundo pra "areia" do tempo real) */
#module-ciclo.nv-app .cx-fatia { opacity: 0.16; transition: opacity 0.2s ease; cursor: pointer; }
/* AREIA: o tempo REAL estudado, cor cheia por cima do trilho */
#module-ciclo.nv-app .cx-fatia-areia { pointer-events: none; transition: stroke-dasharray 0.4s ease; }
#module-ciclo.nv-app .cx-anel-disciplina { font: 700 13px var(--font-sans); fill: var(--text-1); }
#module-ciclo.nv-app .cx-anel-tempo { font: 600 10px var(--font-sans); fill: var(--text-2); }
#module-ciclo.nv-app .cx-anel-giro { font: 400 8.5px var(--font-sans); fill: var(--text-3); }

/* ---- anel vivo ---- */
/* roleta: o grupo das fatias gira até a fatia atual ficar no topo */
#module-ciclo.nv-app .cx-anel-g {
  transform-box: view-box; transform-origin: 50% 50%;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
/* hover: a fatia apontada cresce, as outras se recolhem */
#module-ciclo.nv-app .cx-anel-g:hover .cx-fatia { opacity: 0.22; }
#module-ciclo.nv-app .cx-anel-g .cx-fatia:hover { opacity: 0.5; }
/* arco-gêmeo que enche a fatia atual junto com o cronômetro */
#module-ciclo.nv-app .cx-fatia-progresso {
  pointer-events: none;
  filter: brightness(1.55) saturate(1.1);
  transition: stroke-dasharray 1s linear;
}
/* sessão rodando: a fatia atual respira (glow na própria cor) */
#module-ciclo.nv-app .cx-anel-rodando .cx-fatia-atual {
  animation: cx-pulso 2.4s ease-in-out infinite;
}
@keyframes cx-pulso {
  0%, 100% { filter: none; }
  50% { filter: drop-shadow(0 0 7px currentColor) brightness(1.15); }
}
/* entrada: cada fatia se desenha em cascata; centro e progresso surgem depois */
#module-ciclo.nv-app .cx-anel-nasce .cx-fatia {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: cx-desenha 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;
  animation-delay: calc(var(--fi, 0) * 70ms);
}
@keyframes cx-desenha { to { stroke-dashoffset: 0; } }
#module-ciclo.nv-app .cx-anel-nasce text { animation: cx-surge 0.5s ease 0.45s both; }
#module-ciclo.nv-app .cx-anel-nasce .cx-fatia-areia { animation: cx-surge 0.55s ease 0.6s both; }
@keyframes cx-surge { from { opacity: 0; } }
/* dot "gravando" ao lado do cronômetro */
#module-ciclo.nv-app .cx-rec {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #f87171; margin-right: 6px;
  animation: cx-rec-pisca 1.6s ease-in-out infinite;
}
#module-ciclo.nv-app .cx-giro[data-sessao="pausado"] .cx-rec { background: #fbbf24; animation: none; }
@keyframes cx-rec-pisca {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgb(248 113 113 / 0.45); }
  50% { opacity: 0.5; box-shadow: 0 0 0 5px rgb(248 113 113 / 0); }
}
#module-ciclo.nv-app #cx-cronometro { font-variant-numeric: tabular-nums; }
#module-ciclo.nv-app .cx-giro[data-sessao="rodando"] #cx-cronometro { color: var(--accent); font-size: 15px; }
#module-ciclo.nv-app .cx-giro[data-sessao="pausado"] #cx-cronometro { color: #fbbf24; }
/* barra do bloco com fluxo enquanto roda */
#module-ciclo.nv-app .cx-giro[data-sessao="rodando"] .cx-bloco-barra-fill {
  background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 65%, white), var(--accent));
  background-size: 200% 100%;
  animation: cx-fluxo 2.2s linear infinite;
}
@keyframes cx-fluxo { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  #module-ciclo.nv-app .cx-anel-g { transition: none; }
  #module-ciclo.nv-app .cx-anel-nasce .cx-fatia,
  #module-ciclo.nv-app .cx-anel-nasce text,
  #module-ciclo.nv-app .cx-anel-nasce .cx-fatia-progresso,
  #module-ciclo.nv-app .cx-anel-rodando .cx-fatia-atual,
  #module-ciclo.nv-app .cx-rec,
  #module-ciclo.nv-app .cx-giro[data-sessao="rodando"] .cx-bloco-barra-fill { animation: none; }
  #module-ciclo.nv-app .cx-anel-nasce .cx-fatia { stroke-dashoffset: 0; }
}

#module-ciclo.nv-app .cx-bloco {
  background: var(--bg-1); border: 1px solid oklch(0.28 0.010 250 / 0.6);
  border-radius: 14px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
#module-ciclo.nv-app .cx-bloco-rotulo {
  font: 700 10.5px/1 var(--font-sans); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-3);
}
#module-ciclo.nv-app .cx-bloco-nome {
  display: flex; align-items: center; gap: 10px;
  font: 700 18px/1.2 var(--font-sans); color: var(--text-1);
}
#module-ciclo.nv-app .cx-bolinha { width: 12px; height: 12px; border-radius: 50%; flex: none; display: inline-block; }
#module-ciclo.nv-app .cx-bloco-tempo { font: 400 13px/1.2 var(--font-sans); color: var(--text-2); }
#module-ciclo.nv-app #cx-cronometro { font-weight: 700; color: var(--text-1); }
#module-ciclo.nv-app .cx-bloco-barra {
  height: 8px; border-radius: 999px; background: var(--bg-3); overflow: hidden;
}
#module-ciclo.nv-app .cx-bloco-barra-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.3s ease; }
#module-ciclo.nv-app .cx-bloco-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

#module-ciclo.nv-app .cx-fila { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
#module-ciclo.nv-app .cx-fila-rotulo {
  font: 700 10.5px/1 var(--font-sans); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 2px;
}
#module-ciclo.nv-app .cx-fila-linha {
  display: flex; align-items: center; gap: 8px;
  font: 400 13px/1.5 var(--font-sans); color: var(--text-2);
}
#module-ciclo.nv-app .cx-fila-min { margin-left: auto; color: var(--text-3); font-size: 12px; }

#module-ciclo.nv-app .cx-resumo { display: flex; flex-wrap: wrap; gap: 8px; }
#module-ciclo.nv-app .cx-resumo-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-2); border: 1px solid oklch(0.28 0.010 250 / 0.5);
  border-radius: 999px; padding: 5px 12px;
  font: 400 12px/1 var(--font-sans); color: var(--text-2);
}
#module-ciclo.nv-app .cx-resumo-chip b { color: var(--text-1); }
#module-ciclo.nv-app .cx-historico { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#module-ciclo.nv-app .cx-historico-rotulo { font: 600 11px/1 var(--font-sans); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; }
#module-ciclo.nv-app .cx-historico-chip {
  background: oklch(0.32 0.05 160 / 0.3); color: var(--text-2);
  border-radius: 999px; padding: 4px 10px; font: 400 11.5px/1 var(--font-sans);
}

/* ---- Ciclo: leva de completude (manual, análise, estatísticas) ---- */
#module-ciclo.nv-app .cx-cab-acoes { display: flex; gap: 8px; }
#module-ciclo.nv-app .cx-manual {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font: 400 12px/1.2 var(--font-sans); color: var(--text-3); margin-top: 2px;
}
#module-ciclo.nv-app .cx-manual-btn {
  border: 1px solid oklch(0.28 0.010 250 / 0.6); background: var(--bg-2);
  color: var(--text-2); border-radius: 999px; padding: 4px 10px;
  font: 600 11.5px/1 var(--font-sans); cursor: pointer;
}
#module-ciclo.nv-app .cx-manual-btn:hover { color: var(--accent); border-color: var(--accent); }
#module-ciclo.nv-app .cx-fila-tudo {
  border: none; background: transparent; color: var(--accent);
  font: 500 12px/1 var(--font-sans); cursor: pointer; text-align: left; padding: 4px 0;
}
#module-ciclo.nv-app .cx-fila-resto { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
#module-ciclo.nv-app .cx-fila-atual { color: var(--text-1); font-weight: 600; }
#module-ciclo.nv-app .cx-fila-feita { opacity: 0.5; text-decoration: line-through; }
#module-ciclo.nv-app .cx-menu {
  position: fixed; z-index: 60; min-width: 210px;
  background: var(--bg-2); border: 1px solid oklch(0.32 0.010 250 / 0.7);
  border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 12px 32px oklch(0 0 0 / 0.35);
}
#module-ciclo.nv-app .cx-menu button {
  display: flex; align-items: center; gap: 8px; justify-content: flex-start !important;
  border: none; border-radius: 7px; background: transparent;
  color: var(--text-2); font: 500 12.5px/1.2 var(--font-sans);
  padding: 8px 10px; cursor: pointer; text-align: left;
}
#module-ciclo.nv-app .cx-menu button:hover { background: var(--bg-3); color: var(--text-1); }
#module-ciclo.nv-app .cx-menu-perigo { color: #f87171 !important; }

/* seções análise/estatísticas */
#module-ciclo.nv-app .cx-secao-rotulo {
  font: 700 13px/1.2 var(--font-sans); color: var(--text-1); margin-bottom: 8px;
}
#module-ciclo.nv-app .cx-analise, #module-ciclo.nv-app .cx-stats {
  background: var(--bg-1); border: 1px solid oklch(0.28 0.010 250 / 0.6);
  border-radius: 14px; padding: 16px 18px;
}
#module-ciclo.nv-app .cx-analise-frase {
  font: 400 13.5px/1.6 var(--font-sans); color: var(--text-2); margin: 0 0 12px;
}
#module-ciclo.nv-app .cx-analise-frase b { color: var(--text-1); }
#module-ciclo.nv-app .cx-analise-tabela { width: 100%; border-collapse: collapse; }
#module-ciclo.nv-app .cx-analise-tabela th {
  font: 600 10.5px/1.2 var(--font-sans); color: var(--text-3); text-transform: uppercase;
  letter-spacing: 0.04em; text-align: left; padding: 6px 8px;
  border-bottom: 1px solid oklch(0.3 0.01 250 / 0.5);
}
#module-ciclo.nv-app .cx-analise-tabela td {
  font: 400 12.5px/1.4 var(--font-sans); color: var(--text-2);
  padding: 7px 8px; border-bottom: 1px solid oklch(0.3 0.01 250 / 0.25);
}
#module-ciclo.nv-app .cx-analise-tabela td b { color: var(--text-1); }
#module-ciclo.nv-app .cx-analise-tabela tfoot td { border-bottom: none; color: var(--text-3); font-weight: 600; }
#module-ciclo.nv-app .cx-mini-barra {
  display: inline-block; width: 60px; height: 6px; border-radius: 999px;
  background: var(--bg-3); overflow: hidden; vertical-align: middle; margin-right: 6px;
}
#module-ciclo.nv-app .cx-mini-barra > span { display: block; height: 100%; background: #60a5fa; border-radius: 999px; }
#module-ciclo.nv-app .cx-mini-barra-tempo > span { background: var(--accent); }
#module-ciclo.nv-app .cx-tag-fixo {
  font: 700 9px/1 var(--font-sans); text-transform: uppercase; letter-spacing: 0.04em;
  background: oklch(0.35 0.08 250 / 0.5); color: #93c5fd;
  border-radius: 4px; padding: 2px 5px; vertical-align: middle;
}
#module-ciclo.nv-app .cx-analise-nota { font: 400 11.5px/1.5 var(--font-sans); color: var(--text-3); margin: 10px 0 0; }
#module-ciclo.nv-app .cx-stats-linha { font: 400 13px/1.6 var(--font-sans); color: var(--text-2); margin: 0 0 10px; }
#module-ciclo.nv-app .cx-stats-linha b { color: var(--text-1); }
#module-ciclo.nv-app .cx-stats-barras { display: flex; flex-direction: column; gap: 6px; }
#module-ciclo.nv-app .cx-stats-item { display: flex; align-items: center; gap: 10px; }
#module-ciclo.nv-app .cx-stats-nome {
  display: flex; align-items: center; gap: 6px; width: 220px; min-width: 0;
  font: 400 12.5px/1.2 var(--font-sans); color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#module-ciclo.nv-app .cx-stats-trilha {
  flex: 1; height: 8px; border-radius: 999px; background: var(--bg-3); overflow: hidden;
}
#module-ciclo.nv-app .cx-stats-trilha > span { display: block; height: 100%; border-radius: 999px; }
#module-ciclo.nv-app .cx-stats-min { font: 600 12px/1 var(--font-sans); color: var(--text-1); width: 60px; text-align: right; }
@media (max-width: 720px) {
  #module-ciclo.nv-app .cx-analise-tabela { display: block; overflow-x: auto; }
  #module-ciclo.nv-app .cx-stats-nome { width: 120px; }
}

/* ---------------- Revisões espaçadas (24h · 7d · 30d) ---------------- */
#module-ciclo.nv-app .cx-revisoes {
  background: var(--bg-1); border: 1px solid oklch(0.45 0.08 85 / 0.35);
  border-radius: 14px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
#module-ciclo.nv-app .cx-rev-linha {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 10px; background: var(--bg-2);
}
#module-ciclo.nv-app .cx-rev-texto {
  flex: 1; min-width: 0; font: 400 12.5px/1.4 var(--font-sans); color: var(--text-2);
}
#module-ciclo.nv-app .cx-rev-texto b { color: var(--text-1); }
#module-ciclo.nv-app .cx-rev-etapa {
  background: oklch(0.4 0.09 85 / 0.35); color: #fcd34d;
  border-radius: 999px; padding: 2px 8px; margin-left: 6px;
  font: 600 10.5px/1 var(--font-sans);
}
#module-ciclo.nv-app .cx-rev-atrasada {
  color: #f87171; font: 600 11px/1 var(--font-sans); margin-left: 6px;
}
#module-ciclo.nv-app .cx-rev-dica { font: 400 11px/1 var(--font-sans); color: var(--text-3); flex: none; }
#module-ciclo.nv-app .cx-rev-btn { padding: 6px 10px; font-size: 12px; flex: none; }
#module-ciclo.nv-app .cx-btn-icone-rev {
  border: none; background: transparent; color: var(--text-3); cursor: pointer;
  width: 28px; height: 28px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
#module-ciclo.nv-app .cx-btn-icone-rev:hover { background: var(--bg-3); color: var(--text-1); }
#module-ciclo.nv-app .cx-btn-icone-rev svg { width: 14px; height: 14px; min-width: 14px; }

/* pré-bloco: revisão da disciplina do bloco atual, grudada no card */
#module-ciclo.nv-app .cx-rev-prebloco {
  background: oklch(0.32 0.06 85 / 0.25);
  border: 1px dashed oklch(0.5 0.1 85 / 0.5);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 4px;
  display: flex; flex-direction: column; gap: 6px;
}
#module-ciclo.nv-app .cx-rev-prebloco-rotulo {
  display: flex; align-items: center; gap: 6px;
  font: 700 11px/1 var(--font-sans); letter-spacing: 0.05em;
  text-transform: uppercase; color: #fcd34d;
}
#module-ciclo.nv-app .cx-rev-prebloco-rotulo svg { width: 13px; height: 13px; min-width: 13px; }
#module-ciclo.nv-app .cx-rev-contextual { background: transparent; padding: 4px 0; }
#module-ciclo.nv-app .cx-rev-badge { color: #fcd34d; font-weight: 600; }

/* Banner de giro fechado: persistente até começar o próximo (o toast de
   6s passava batido no momento mais importante do método) */
#module-ciclo.nv-app .cx-giro-banner {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, oklch(0.32 0.07 160 / 0.45), oklch(0.28 0.05 200 / 0.35));
  border: 1px solid oklch(0.5 0.1 160 / 0.5);
  border-radius: 14px; padding: 14px 18px;
}
#module-ciclo.nv-app .cx-giro-banner-emoji { font-size: 26px; flex: none; }
#module-ciclo.nv-app .cx-giro-banner-texto {
  flex: 1; min-width: 0; font: 400 13.5px/1.6 var(--font-sans); color: var(--text-2);
}
#module-ciclo.nv-app .cx-giro-banner-texto b { color: var(--text-1); }
#module-ciclo.nv-app .cx-giro-banner .cx-btn-primario { flex: none; }
#module-ciclo.nv-app .cx-giro-banner-x {
  border: none; background: transparent; color: var(--text-3);
  font: 700 18px/1 var(--font-sans); cursor: pointer; padding: 4px 8px;
  border-radius: 7px; flex: none;
}
#module-ciclo.nv-app .cx-giro-banner-x:hover { color: var(--text-1); background: oklch(1 0 0 / 0.06); }
@media (max-width: 720px) {
  #module-ciclo.nv-app .cx-giro-banner { flex-wrap: wrap; }
}

/* ---------------- Relatórios do ciclo (dia/semana/mês/ano) ---------------- */
#module-ciclo.nv-app .cx-relatorios {
  background: var(--bg-1); border: 1px solid oklch(0.28 0.010 250 / 0.6);
  border-radius: 14px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 14px;
}
#module-ciclo.nv-app .cx-rel-grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px;
}
#module-ciclo.nv-app .cx-rel-cartao {
  background: var(--bg-2); border-radius: 10px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
#module-ciclo.nv-app .cx-rel-num { font: 700 20px/1 var(--font-sans); color: var(--text-1); }
#module-ciclo.nv-app .cx-rel-rot { font: 400 11.5px/1.4 var(--font-sans); color: var(--text-3); }
#module-ciclo.nv-app .cx-rel-rot b { color: var(--accent); }
#module-ciclo.nv-app .cx-rel-meta-barra {
  height: 5px; border-radius: 999px; background: var(--bg-3); overflow: hidden; margin-top: 2px;
}
#module-ciclo.nv-app .cx-rel-meta-barra > div { height: 100%; background: var(--accent); border-radius: 999px; }
#module-ciclo.nv-app .cx-rel-bloco-rotulo {
  font: 600 11px/1 var(--font-sans); color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px;
}
#module-ciclo.nv-app .cx-rel-barras {
  display: flex; gap: 6px; align-items: flex-end; height: 74px;
}
#module-ciclo.nv-app .cx-rel-dia {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  height: 100%; min-width: 0;
}
#module-ciclo.nv-app .cx-rel-barra {
  flex: 1; width: 100%; max-width: 26px; display: flex; align-items: flex-end;
  background: var(--bg-3); border-radius: 5px; overflow: hidden;
}
#module-ciclo.nv-app .cx-rel-barra > div {
  width: 100%; background: var(--accent); border-radius: 5px 5px 0 0; min-height: 2px;
}
#module-ciclo.nv-app .cx-rel-hoje .cx-rel-barra { outline: 1px solid var(--accent); }
#module-ciclo.nv-app .cx-rel-hoje .cx-rel-dia-rot { color: var(--accent); font-weight: 700; }
#module-ciclo.nv-app .cx-rel-dia-rot { font: 500 9.5px/1 var(--font-sans); color: var(--text-3); }
#module-ciclo.nv-app .cx-rel-barras-meses .cx-rel-barra > div { background: #60a5fa; }

/* menu ⋯: rótulo e separador */
#module-ciclo.nv-app .cx-menu-rotulo {
  font: 700 9.5px/1 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-3); padding: 8px 10px 2px;
}
#module-ciclo.nv-app .cx-menu-sep { height: 1px; background: oklch(0.3 0.01 250 / 0.6); margin: 4px 2px; }

/* Controles do bloco: UMA linha alinhada (o ⏮ caía sozinho embaixo) */
#module-ciclo.nv-app .cx-bloco-acoes {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; margin-top: 4px;
}
#module-ciclo.nv-app .cx-bloco-acoes .cx-btn-primario,
#module-ciclo.nv-app .cx-bloco-acoes .cx-btn-fantasma {
  padding: 9px 12px; font-size: 12.5px; white-space: nowrap;
}
#module-ciclo.nv-app .cx-btn-so-icone { padding: 9px 10px; }
#module-ciclo.nv-app .cx-btn-parar { color: #fca5a5; border-color: oklch(0.45 0.1 25 / 0.4); }
#module-ciclo.nv-app .cx-btn-parar:hover { background: oklch(0.3 0.08 25 / 0.3); color: #f87171; }

/* ======================================================================
   PÍLULA DE SESSÃO DE ESTUDO (study-session.js) — visor universal.
   Aparece quando há cronômetro vivo e o aluno está FORA do módulo dono.
   Mini discreta no canto; hover/clique expande o cartão com controles.
   ====================================================================== */
.sp-root {
  /* ABAIXO de painéis/modais (drawer do Tarefas é z:90, modais 4000+):
     a pílula cobria o Salvar do painel e o hover expandia no caminho
     do mouse até os comentários — report do João */
  position: fixed; right: 18px; bottom: 18px; z-index: 85;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.sp-root.sp-oculta { opacity: 0; transform: translateY(16px); pointer-events: none; }

.sp-mini {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  background: oklch(0.17 0.012 250 / 0.82);
  border: 1px solid oklch(0.35 0.015 250 / 0.65);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px oklch(0 0 0 / 0.35);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.sp-mini:hover { transform: translateY(-1px); border-color: oklch(0.5 0.03 250 / 0.7); }
.sp-mini-tempo {
  font: 700 13px/1 var(--font-sans); color: var(--text-1);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}

.sp-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: #4ade80;
  animation: sp-respira 2s ease-in-out infinite;
}
.sp-root[data-estado="paused"] .sp-dot { background: #fbbf24; animation: none; }
@keyframes sp-respira {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 oklch(0.8 0.2 150 / 0.45); }
  50% { opacity: 0.6; box-shadow: 0 0 0 6px oklch(0.8 0.2 150 / 0); }
}

.sp-cartao {
  width: 252px; padding: 14px 16px; border-radius: 16px;
  background: oklch(0.17 0.012 250 / 0.92);
  border: 1px solid oklch(0.35 0.015 250 / 0.65);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 40px oklch(0 0 0 / 0.45);
  opacity: 0; transform: translateY(10px) scale(0.94);
  transform-origin: bottom right; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.4, 0.5, 1);
  cursor: pointer;
}
/* expande SÓ no clique — hover expandia sem querer quando o mouse
   passava pelo canto a caminho de outra coisa */
.sp-root.sp-aberta .sp-cartao {
  opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
}
.sp-cartao-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sp-cartao-modulo {
  font: 700 10.5px/1 var(--font-sans); letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-3);
}
.sp-cartao-estado {
  margin-left: auto; font: 600 10.5px/1 var(--font-sans); color: #4ade80;
}
.sp-root[data-estado="paused"] .sp-cartao-estado { color: #fbbf24; }
.sp-cartao-rotulo { font: 700 14px/1.25 var(--font-sans); color: var(--text-1); }
.sp-cartao-sub {
  font: 400 11.5px/1.35 var(--font-sans); color: var(--text-3);
  margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sp-cartao-sub:empty { display: none; }
.sp-cartao-tempo {
  font: 800 26px/1 var(--font-sans); color: var(--text-1);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  margin: 10px 0 12px;
}
.sp-cartao-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.sp-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: 9px; cursor: pointer;
  background: oklch(0.24 0.012 250 / 0.9); color: var(--text-2);
  border: 1px solid oklch(0.34 0.012 250 / 0.6);
  font: 600 11.5px/1 var(--font-sans);
  transition: background 0.15s ease, color 0.15s ease;
}
.sp-btn:hover { background: oklch(0.3 0.014 250 / 0.9); color: var(--text-1); }
.sp-btn-parar { color: #fca5a5; border-color: oklch(0.45 0.1 25 / 0.4); }
.sp-btn-parar:hover { background: oklch(0.3 0.08 25 / 0.3); color: #f87171; }
.sp-btn-ir { margin-left: auto; }

/* ---- diálogo de conflito de sessão ---- */
.sp-dlg-overlay {
  /* acima dos modais dos módulos (vão até ~5200) — o conflito pode ser
     disparado de dentro de qualquer um deles */
  position: fixed; inset: 0; z-index: 6000;
  display: flex; align-items: center; justify-content: center;
  background: oklch(0 0 0 / 0.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.2s ease;
}
.sp-dlg-overlay.visivel { opacity: 1; }
.sp-dlg {
  width: min(420px, calc(100vw - 32px));
  padding: 20px 22px; border-radius: 18px;
  background: oklch(0.18 0.012 250);
  border: 1px solid oklch(0.35 0.015 250 / 0.7);
  box-shadow: 0 20px 60px oklch(0 0 0 / 0.5);
  transform: translateY(8px) scale(0.97);
  transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.sp-dlg-overlay.visivel .sp-dlg { transform: translateY(0) scale(1); }
.sp-dlg-cab { display: flex; align-items: flex-start; gap: 10px; }
.sp-dlg-cab .sp-dot { margin-top: 5px; }
.sp-dlg-titulo { font: 700 15.5px/1.3 var(--font-sans); color: var(--text-1); }
.sp-dlg-sub { font: 400 12.5px/1.4 var(--font-sans); color: var(--text-2); margin-top: 2px; }
.sp-dlg-tempo {
  margin-left: auto; font: 800 18px/1 var(--font-sans); color: #4ade80;
  font-variant-numeric: tabular-nums;
}
.sp-dlg-texto { font: 400 12.5px/1.5 var(--font-sans); color: var(--text-3); margin: 12px 0 16px; }
.sp-dlg-acoes { display: flex; flex-direction: column; gap: 8px; }
.sp-dlg-btn {
  padding: 11px 14px; border-radius: 10px; cursor: pointer;
  font: 600 13px/1 var(--font-sans); text-align: center;
  border: 1px solid transparent;
  transition: filter 0.15s ease, background 0.15s ease;
}
.sp-dlg-registrar { background: var(--accent); color: oklch(0.15 0.02 250); border: none; }
.sp-dlg-registrar:hover { filter: brightness(1.1); }
.sp-dlg-descartar {
  background: oklch(0.3 0.08 25 / 0.2); color: #fca5a5;
  border-color: oklch(0.45 0.1 25 / 0.4);
}
.sp-dlg-descartar:hover { background: oklch(0.3 0.08 25 / 0.35); }
.sp-dlg-cancelar { background: transparent; color: var(--text-3); border-color: oklch(0.34 0.012 250 / 0.6); }
.sp-dlg-cancelar:hover { color: var(--text-1); }

@media (prefers-reduced-motion: reduce) {
  .sp-dot { animation: none; }
  .sp-root, .sp-cartao, .sp-dlg, .sp-dlg-overlay { transition: none; }
}
@media print { .sp-root { display: none; } }

/* ---- som ambiente na pílula (study-sound.js) ---- */
.sp-som {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid oklch(0.32 0.012 250 / 0.5);
  cursor: default;
}
.sp-som-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.sp-som-rotulo {
  font: 700 10px/1 var(--font-sans); letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-3);
}
.sp-som-vol {
  flex: 1; height: 4px; appearance: none; -webkit-appearance: none;
  background: oklch(0.3 0.012 250); border-radius: 999px; cursor: pointer;
}
.sp-som-vol::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--text-2); border: none; cursor: pointer;
}
.sp-som-vol::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--text-2); border: none; cursor: pointer;
}
.sp-som-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.sp-chip {
  padding: 5px 9px; border-radius: 999px; cursor: pointer;
  background: oklch(0.24 0.012 250 / 0.9); color: var(--text-3);
  border: 1px solid oklch(0.34 0.012 250 / 0.6);
  font: 600 10.5px/1 var(--font-sans);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.sp-chip:hover { color: var(--text-1); }
.sp-chip-ativo {
  background: oklch(0.74 0.16 152 / 0.15); color: var(--accent);
  border-color: oklch(0.74 0.16 152 / 0.4);
}

/* equalizador no mini: só aparece com som tocando */
.sp-eq { display: none; align-items: flex-end; gap: 2px; height: 10px; }
.sp-root[data-som="1"] .sp-eq { display: inline-flex; }
.sp-eq i {
  width: 2.5px; border-radius: 1px; background: var(--accent);
  animation: sp-eq 1s ease-in-out infinite;
}
.sp-eq i:nth-child(1) { height: 55%; animation-delay: 0s; }
.sp-eq i:nth-child(2) { height: 95%; animation-delay: 0.25s; }
.sp-eq i:nth-child(3) { height: 70%; animation-delay: 0.5s; }
@keyframes sp-eq {
  0%, 100% { transform: scaleY(0.5); }
  50% { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) { .sp-eq i { animation: none; } }

/* ---- comentários da tarefa em estilo CHAT (Telegram-like) ---- */
#module-tarefas.nv-app .tf-chat {
  display: flex; flex-direction: column; gap: 3px;
  max-height: 340px; overflow-y: auto;
  padding: 12px 10px; margin: 6px 0 10px;
  background: oklch(0.15 0.014 250 / 0.55);
  border: 1px solid oklch(0.28 0.01 250 / 0.5);
  border-radius: 14px;
}
#module-tarefas.nv-app .tf-chat-dia {
  display: flex; justify-content: center; margin: 8px 0 6px;
}
#module-tarefas.nv-app .tf-chat-dia span {
  font: 600 10.5px/1 var(--font-sans); color: var(--text-3);
  background: oklch(0.24 0.012 250 / 0.8);
  padding: 4px 10px; border-radius: 999px;
}
#module-tarefas.nv-app .tf-chat-msg {
  display: flex; justify-content: flex-end; align-items: flex-end; gap: 6px;
}
#module-tarefas.nv-app .tf-chat-acoes {
  display: inline-flex; gap: 2px; opacity: 0; padding-bottom: 4px;
  transition: opacity 0.15s ease;
}
#module-tarefas.nv-app .tf-chat-msg:hover .tf-chat-acoes { opacity: 1; }
#module-tarefas.nv-app .tf-chat-balao {
  max-width: 86%; min-width: 90px;
  background: oklch(0.74 0.16 152 / 0.16);
  border: 1px solid oklch(0.74 0.16 152 / 0.14);
  border-radius: 16px 16px 4px 16px; /* rabinho no canto inferior direito */
  padding: 7px 12px 5px;
  animation: tf-chat-entra 0.18s ease;
}
@keyframes tf-chat-entra {
  from { opacity: 0; transform: translateY(4px) scale(0.98); }
}
/* markdown do chat em TEMA ESCURO próprio (o .tf-det-com-md antigo é o
   "modo papel" claro com !important — aqui a bolha é o papel) */
#module-tarefas.nv-app .tf-chat-md,
#module-tarefas.nv-app .tf-chat-md p,
#module-tarefas.nv-app .tf-chat-md div,
#module-tarefas.nv-app .tf-chat-md li { font: 400 13px/1.5 var(--font-sans); color: var(--text-1); }
#module-tarefas.nv-app .tf-chat-md p { margin: 0; }
#module-tarefas.nv-app .tf-chat-md p + p { margin-top: 4px; }
#module-tarefas.nv-app .tf-chat-md ul,
#module-tarefas.nv-app .tf-chat-md ol { margin: 4px 0; padding-left: 18px; }
#module-tarefas.nv-app .tf-chat-md a { color: var(--accent); text-decoration: underline; }
#module-tarefas.nv-app .tf-chat-md blockquote {
  margin: 4px 0; padding-left: 8px; color: var(--text-2);
  border-left: 2px solid oklch(0.74 0.16 152 / 0.4);
}
#module-tarefas.nv-app .tf-chat-md pre,
#module-tarefas.nv-app .tf-chat-md code {
  background: oklch(0.22 0.012 250); color: var(--text-1);
  border-radius: 6px; padding: 1px 5px; font-size: 12px;
}
#module-tarefas.nv-app .tf-chat-hora {
  display: block; text-align: right; margin-top: 2px;
  font: 400 10px/1 var(--font-sans); color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
/* edição inline dentro do balão */
#module-tarefas.nv-app .tf-chat-editando { width: 86%; }
#module-tarefas.nv-app .tf-chat-edit {
  width: 100%; resize: vertical; min-height: 38px;
  background: oklch(0.17 0.012 250); color: var(--text-1);
  border: 1px solid oklch(0.34 0.012 250 / 0.7); border-radius: 10px;
  padding: 8px 10px; font: 400 13px/1.5 var(--font-sans);
}
#module-tarefas.nv-app .tf-chat-edit-acoes {
  display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px;
}
/* barra de envio: campo pílula + botão redondo */
#module-tarefas.nv-app .tf-chat-form { display: flex; gap: 8px; align-items: center; }
#module-tarefas.nv-app .tf-chat-form input {
  flex: 1; min-width: 0;
  background: oklch(0.17 0.012 250); color: var(--text-1);
  border: 1px solid oklch(0.34 0.012 250 / 0.7); border-radius: 999px;
  padding: 10px 16px; font: 400 13px/1 var(--font-sans);
}
#module-tarefas.nv-app .tf-chat-form input:focus {
  outline: none; border-color: oklch(0.74 0.16 152 / 0.5);
}
#module-tarefas.nv-app .tf-chat-enviar {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: oklch(0.15 0.02 250);
  border: none; cursor: pointer;
  transition: transform 0.12s ease, filter 0.15s ease;
}
#module-tarefas.nv-app .tf-chat-enviar:hover { filter: brightness(1.1); transform: scale(1.05); }
#module-tarefas.nv-app .tf-chat-enviar svg,
#module-tarefas.nv-app .tf-chat-enviar span[data-lucide] { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) {
  #module-tarefas.nv-app .tf-chat-balao { animation: none; }
}

/* ============================================================================
   TAREFAS — redesign leva 3: refino visual coeso (linhas, chips de urgência,
   quick-add, cabeçalhos de seção, item ativo na sidebar). Bloco tardio na
   cascata pra vencer as regras anteriores sem !important.
   ========================================================================== */

/* Linha de tarefa: hover com anel sutil, divisória mais leve, cursor claro */
#module-tarefas.nv-app .tf-item {
  border-bottom-color: oklch(0.30 0.010 250 / 0.16);
  transition: background 130ms ease, box-shadow 130ms ease, transform 130ms ease, opacity 250ms ease;
}
#module-tarefas.nv-app .tf-item:hover {
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px oklch(0.48 0.012 250 / 0.28);
}

/* Prazo de hoje/vencido viram badges suaves — urgência salta aos olhos */
#module-tarefas.nv-app .tf-prazo-vencido,
#module-tarefas.nv-app .tf-prazo-hoje {
  padding: 2px 7px;
  border-radius: 999px;
}
#module-tarefas.nv-app .tf-prazo-vencido { background: oklch(0.70 0.17 25 / 0.14); }
#module-tarefas.nv-app .tf-prazo-hoje { background: color-mix(in oklch, var(--accent) 16%, transparent); }

/* Etiqueta um respiro a mais de legibilidade */
#module-tarefas.nv-app .tf-etiqueta { letter-spacing: 0.02em; padding: 3px 8px; }

/* Quick-add: mais convidativo — cantos maiores e foco com brilho do accent */
#module-tarefas.nv-app .tf-quickadd {
  border-radius: 14px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
#module-tarefas.nv-app .tf-quickadd:focus-within {
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 15%, transparent);
}

/* Cabeçalho de grupo: rótulo de seção limpo (uppercase discreto) */
#module-tarefas.nv-app .tf-grupo-h {
  font: 700 11px/1.2 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
#module-tarefas.nv-app .tf-grupo-vencido { color: oklch(0.72 0.16 25); }

/* Item ativo na sidebar (vistas/projetos/etiquetas): barra de accent à esquerda */
#module-tarefas.nv-app .tf-ativa {
  box-shadow: inset 3px 0 0 var(--accent);
}

/* ---- pílula ANCORADA na sidebar (slot #study-pill-slot) ---- */
.sp-root:not(.sp-docked) .sp-mini-rotulo { display: none; } /* flutuante segue compacta */
.sp-root.sp-docked {
  position: static; right: auto; bottom: auto;
  width: 100%; align-items: stretch; gap: 8px;
}
.sp-root.sp-docked.sp-oculta { display: none; } /* sem sessão não ocupa espaço */
.sp-root.sp-docked .sp-mini {
  width: 100%; justify-content: flex-start;
  padding: 9px 12px; border-radius: 12px;
  background: linear-gradient(135deg, oklch(0.74 0.16 152 / 0.10), oklch(0.6 0.14 200 / 0.06));
  border: 1px solid oklch(0.74 0.16 152 / 0.32);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none;
}
.sp-root.sp-docked .sp-mini-rotulo {
  font: 600 11.5px/1 var(--font-sans); color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; flex: 1; text-align: left;
}
.sp-root.sp-docked .sp-mini-tempo { margin-left: auto; flex: none; }
.sp-root.sp-docked .sp-cartao {
  width: 100%; order: -1; /* cartão abre ACIMA do mini, dentro da sidebar */
  position: static;
}
.sp-root.sp-docked:not(.sp-aberta) .sp-cartao { display: none; } /* sem fantasma ocupando espaço */
/* sidebar colapsada: só o dot pulsante, centralizado */
#sidebar.collapsed .sp-root.sp-docked .sp-mini { justify-content: center; padding: 9px 6px; }
#sidebar.collapsed .sp-root.sp-docked .sp-mini-rotulo,
#sidebar.collapsed .sp-root.sp-docked .sp-mini-tempo,
#sidebar.collapsed .sp-root.sp-docked .sp-eq { display: none; }
#sidebar.collapsed .sp-root.sp-docked .sp-cartao { display: none; }

/* NOTA de guerra: as classes eram "sp-card-*" e caíam na regra global
   [class*="-card"]{border…!important} do redesign — cada texto ganhava
   moldura própria (report do João). Renomeadas pra sp-cartao-* (fora do
   radar da regra) em vez de brigar com !important. */

/* ancorada + aberta: cartão e mini viram UMA peça (moldura única) */
.sp-root.sp-docked .sp-cartao {
  background: oklch(0.17 0.012 250);
  border: 1px solid oklch(0.74 0.16 152 / 0.32);
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 12px 14px 10px;
}
.sp-root.sp-docked.sp-aberta { gap: 0; }
.sp-root.sp-docked.sp-aberta .sp-cartao { border-radius: 12px 12px 0 0; border-bottom: none; }
.sp-root.sp-docked.sp-aberta .sp-mini { border-radius: 0 0 12px 12px; }
/* tipografia mais assentada no cartão ancorado */
.sp-root.sp-docked .sp-cartao-modulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sp-root.sp-docked .sp-cartao-tempo { font-size: 23px; margin: 8px 0 10px; }
.sp-root.sp-docked .sp-som { border-top-color: oklch(0.74 0.16 152 / 0.18); }
.sp-cartao-estado { white-space: nowrap; }

/* ---- painel de ANÁLISE DE DESEMPENHO do ciclo (cx-an-*) ---- */
#module-ciclo.nv-app .cx-analise-painel { display: flex; flex-direction: column; gap: 14px; }
#module-ciclo.nv-app .cx-an-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
@media (max-width: 720px) { #module-ciclo.nv-app .cx-an-kpis { grid-template-columns: 1fr 1fr; } }
#module-ciclo.nv-app .cx-an-kpi {
  background: var(--bg-1); border: 1px solid oklch(0.28 0.010 250 / 0.6);
  border-radius: 12px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
#module-ciclo.nv-app .cx-an-kpi-num {
  font: 800 20px/1.1 var(--font-sans); color: var(--text-1);
  font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
#module-ciclo.nv-app .cx-an-kpi-rot { font: 400 11.5px/1.4 var(--font-sans); color: var(--text-3); }
#module-ciclo.nv-app .cx-an-delta { font: 700 11px/1 var(--font-sans); padding: 3px 7px; border-radius: 999px; }
#module-ciclo.nv-app .cx-an-sobe { color: #4ade80; background: oklch(0.74 0.16 152 / 0.14); }
#module-ciclo.nv-app .cx-an-desce { color: #fca5a5; background: oklch(0.5 0.12 25 / 0.18); }
#module-ciclo.nv-app .cx-an-igual { color: var(--text-3); background: var(--bg-3); }

#module-ciclo.nv-app .cx-an-evolucao {
  display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: center;
  background: var(--bg-1); border: 1px solid oklch(0.28 0.010 250 / 0.6);
  border-radius: 12px; padding: 14px 16px;
}
@media (max-width: 720px) { #module-ciclo.nv-app .cx-an-evolucao { grid-template-columns: 1fr; } }
#module-ciclo.nv-app .cx-an-frase { margin: 0 0 8px; font: 400 13.5px/1.5 var(--font-sans); color: var(--text-2); }
#module-ciclo.nv-app .cx-an-frase b { color: var(--text-1); }
#module-ciclo.nv-app .cx-an-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#module-ciclo.nv-app .cx-an-chip {
  font: 600 11px/1 var(--font-sans); color: var(--text-2);
  background: var(--bg-2); border: 1px solid oklch(0.28 0.010 250 / 0.5);
  padding: 5px 9px; border-radius: 999px;
}
#module-ciclo.nv-app .cx-an-spark { width: 100%; height: 54px; }
#module-ciclo.nv-app .cx-an-spark-area { fill: oklch(0.74 0.16 152 / 0.12); }
#module-ciclo.nv-app .cx-an-spark-linha { stroke: var(--accent); stroke-width: 2; }
#module-ciclo.nv-app .cx-an-spark-ponto { fill: var(--accent); }

#module-ciclo.nv-app .cx-an-linha2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
@media (max-width: 720px) { #module-ciclo.nv-app .cx-an-linha2 { grid-template-columns: 1fr; } }
#module-ciclo.nv-app .cx-an-meses { position: relative; display: flex; gap: 4px; align-items: flex-end; }
#module-ciclo.nv-app .cx-an-meses .cx-rel-dia { flex: 1; }
#module-ciclo.nv-app .cx-an-media-linha {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1px dashed oklch(0.6 0.02 250 / 0.55); pointer-events: none;
}

#module-ciclo.nv-app .cx-an-heat {
  display: grid; grid-template-rows: repeat(7, 11px); grid-auto-flow: column;
  grid-auto-columns: 11px; gap: 3px;
}
#module-ciclo.nv-app .cx-an-cel { width: 11px; height: 11px; border-radius: 3px; background: var(--bg-3); }
#module-ciclo.nv-app .cx-an-cel-futuro { background: transparent; }
#module-ciclo.nv-app .cx-an-n1 { background: oklch(0.74 0.16 152 / 0.25); }
#module-ciclo.nv-app .cx-an-n2 { background: oklch(0.74 0.16 152 / 0.45); }
#module-ciclo.nv-app .cx-an-n3 { background: oklch(0.74 0.16 152 / 0.7); }
#module-ciclo.nv-app .cx-an-n4 { background: var(--accent); }

#module-ciclo.nv-app .cx-an-insight {
  margin: 0 0 10px; font: 400 12.5px/1.5 var(--font-sans); color: var(--text-2);
  background: oklch(0.5 0.12 60 / 0.10); border: 1px solid oklch(0.6 0.12 60 / 0.25);
  border-radius: 10px; padding: 8px 12px;
}
#module-ciclo.nv-app .cx-an-insight-ok { background: oklch(0.74 0.16 152 / 0.08); border-color: oklch(0.74 0.16 152 / 0.22); }
#module-ciclo.nv-app .cx-an-esforco { display: flex; flex-direction: column; gap: 7px; }
#module-ciclo.nv-app .cx-an-esf-linha { display: flex; align-items: center; gap: 10px; }
#module-ciclo.nv-app .cx-an-esf-nome {
  display: flex; align-items: center; gap: 8px; width: 180px; flex: none;
  font: 600 12.5px/1.3 var(--font-sans); color: var(--text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#module-ciclo.nv-app .cx-an-esf-trilha {
  position: relative; flex: 1; height: 14px; border-radius: 999px;
  background: var(--bg-3); overflow: hidden;
}
#module-ciclo.nv-app .cx-an-esf-alvo {
  position: absolute; inset: 0 auto 0 0; border-radius: 999px;
  background: oklch(0.55 0.015 250 / 0.55);
}
#module-ciclo.nv-app .cx-an-esf-real {
  position: absolute; inset: 3px auto 3px 0; border-radius: 999px;
}
#module-ciclo.nv-app .cx-an-esf-tag {
  flex: none; width: 62px; text-align: right;
  font: 700 11px/1 var(--font-sans); font-variant-numeric: tabular-nums;
}
#module-ciclo.nv-app .cx-an-esf-em-dia { color: #4ade80; }
#module-ciclo.nv-app .cx-an-esf-abaixo { color: #fca5a5; }
#module-ciclo.nv-app .cx-an-esf-acima { color: #fbbf24; }
#module-ciclo.nv-app .cx-an-esf-sem-dados { color: var(--text-3); }
#module-ciclo.nv-app .cx-an-giros .cx-rel-dia { max-width: 44px; }

/* Análise: gráficos MAIORES e valores visíveis (com pouco dado as barras
   sumiam — report do João; zero agora é trilha vazia, valor vai rotulado) */
#module-ciclo.nv-app .cx-analise-painel .cx-rel-barras,
#module-ciclo.nv-app .cx-an-meses { height: 128px; }
#module-ciclo.nv-app .cx-analise-painel .cx-rel-barra { max-width: 34px; border-radius: 6px; }
#module-ciclo.nv-app .cx-analise-painel .cx-rel-barra > div { min-height: 4px; }
#module-ciclo.nv-app .cx-an-val {
  font: 700 9.5px/1 var(--font-sans); color: var(--text-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
#module-ciclo.nv-app .cx-an-spark { height: 76px; }
#module-ciclo.nv-app .cx-an-heat { grid-template-rows: repeat(7, 13px); grid-auto-columns: 13px; gap: 3px; }
#module-ciclo.nv-app .cx-an-cel { width: 13px; height: 13px; }

/* ===== Análise repaginada: abas de evolução, heatmap c/ meses, estado vazio ===== */
#module-ciclo.nv-app .cx-rel-bloco-rotulo:has(.cx-evo-abas) { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#module-ciclo.nv-app .cx-evo-abas { display: inline-flex; gap: 4px; margin-left: auto; }
#module-ciclo.nv-app .cx-evo-aba {
  border: 1px solid oklch(0.32 0.012 250 / 0.6); background: var(--bg-2); color: var(--text-3);
  font: 600 10.5px/1 var(--font-sans); padding: 5px 11px; border-radius: 999px; cursor: pointer;
  text-transform: none; letter-spacing: 0; transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
#module-ciclo.nv-app .cx-evo-aba:hover { color: var(--text-1); }
#module-ciclo.nv-app .cx-evo-aba.cx-evo-ativa { background: var(--accent); border-color: var(--accent); color: var(--bg-1); }
#module-ciclo.nv-app .cx-an-evo-rodape { margin-top: 10px; }
#module-ciclo.nv-app .cx-rel-dia-rot small { font-size: 8px; opacity: 0.6; font-weight: 600; }

/* heatmap: marcadores de mês alinhados às colunas (semanas) */
#module-ciclo.nv-app .cx-heat { display: inline-flex; flex-direction: column; gap: 5px; max-width: 100%; overflow-x: auto; padding-bottom: 2px; }
#module-ciclo.nv-app .cx-heat-meses {
  display: grid; grid-auto-flow: column; grid-auto-columns: 13px; gap: 3px;
  font: 600 8.5px/1 var(--font-sans); color: var(--text-3);
}
#module-ciclo.nv-app .cx-heat-meses span { white-space: nowrap; overflow: visible; }

/* estado vazio da análise (uma mensagem, sem gráficos vazios) */
#module-ciclo.nv-app .cx-an-vazio {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px; border-radius: 12px;
  background: var(--bg-2); border: 1px dashed oklch(0.34 0.012 250 / 0.6);
}
#module-ciclo.nv-app .cx-an-vazio-emoji { font-size: 30px; flex: none; line-height: 1; }
#module-ciclo.nv-app .cx-an-vazio p { margin: 0; font: 400 13px/1.5 var(--font-sans); color: var(--text-2); }

/* ---- radar esforço×prova + zona de risco ---- */
#module-ciclo.nv-app .cx-radar-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 4px 0 14px; }
#module-ciclo.nv-app .cx-radar { width: min(520px, 100%); height: auto; }
#module-ciclo.nv-app .cx-radar-teia { fill: none; stroke: oklch(0.32 0.012 250 / 0.6); stroke-width: 1; }
#module-ciclo.nv-app .cx-radar-eixo { stroke: oklch(0.32 0.012 250 / 0.45); stroke-width: 1; }
#module-ciclo.nv-app .cx-radar-prova {
  /* VERMELHA (pedido do João): é a linha de exigência da prova — o verde
     tem que alcançá-la */
  fill: oklch(0.5 0.12 25 / 0.10); stroke: #f87171;
  stroke-width: 1.5; stroke-dasharray: 4 3;
}
#module-ciclo.nv-app .cx-radar-real {
  fill: oklch(0.74 0.16 152 / 0.22); stroke: var(--accent); stroke-width: 2;
}
#module-ciclo.nv-app .cx-radar-ponto { fill: var(--accent); }
#module-ciclo.nv-app .cx-radar-rotulo { font: 600 9.5px var(--font-sans); fill: var(--text-2); }
#module-ciclo.nv-app .cx-radar-risco-alto { fill: #f87171; font-weight: 800; }
#module-ciclo.nv-app .cx-radar-risco-atencao { fill: #fbbf24; }
#module-ciclo.nv-app .cx-radar-legenda {
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
  font: 400 11px/1 var(--font-sans); color: var(--text-3);
}
#module-ciclo.nv-app .cx-radar-legenda span { display: inline-flex; align-items: center; gap: 5px; }
#module-ciclo.nv-app .cx-radar-leg-prova { width: 14px; height: 3px; background: #f87171; display: inline-block; }
#module-ciclo.nv-app .cx-radar-leg-real { width: 14px; height: 3px; background: var(--accent); display: inline-block; }
#module-ciclo.nv-app .cx-an-risco { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
#module-ciclo.nv-app .cx-an-risco-linha {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 12px; border-radius: 10px;
  font: 400 12.5px/1.5 var(--font-sans); color: var(--text-2);
}
#module-ciclo.nv-app .cx-an-risco-linha b { color: var(--text-1); }
#module-ciclo.nv-app .cx-an-risco-linha i { color: var(--text-3); }
#module-ciclo.nv-app .cx-an-risco-alto { background: oklch(0.45 0.12 25 / 0.14); border: 1px solid oklch(0.5 0.12 25 / 0.3); }
#module-ciclo.nv-app .cx-an-risco-atencao { background: oklch(0.5 0.1 80 / 0.1); border: 1px solid oklch(0.6 0.1 80 / 0.25); }
#module-ciclo.nv-app .cx-an-risco-tag { flex: none; font: 700 11px/1.6 var(--font-sans); white-space: nowrap; }

#module-ciclo.nv-app .cx-an-como-ler {
  max-width: 560px; margin: 2px auto 0; text-align: center;
  font: 400 11.5px/1.55 var(--font-sans); color: var(--text-3);
}
#module-ciclo.nv-app .cx-an-como-ler b { color: var(--text-2); }
#module-ciclo.nv-app .cx-radar-valores { font: 500 8.5px var(--font-sans); fill: var(--text-3); }
#module-ciclo.nv-app .cx-radar-val-real { fill: var(--accent); font-weight: 800; }
#module-ciclo.nv-app .cx-radar-val-prova { fill: #f87171; font-weight: 700; }
#module-ciclo.nv-app .cx-radar-escala { font: 500 7.5px var(--font-sans); fill: var(--text-3); opacity: 0.8; }

/* ---- "?" de ajuda com balão (pedido do João: explicação discreta) ---- */
#module-ciclo.nv-app .cx-ajuda { position: relative; display: inline-flex; }
#module-ciclo.nv-app .cx-ajuda-btn {
  cursor: pointer; padding: 0;
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 11px/1 var(--font-sans); color: var(--text-3);
  background: var(--bg-3); border: 1px solid oklch(0.34 0.012 250 / 0.6);
  transition: color 0.15s ease, border-color 0.15s ease;
}
#module-ciclo.nv-app .cx-ajuda-btn:hover,
#module-ciclo.nv-app .cx-ajuda-btn[aria-expanded="true"] { color: var(--accent); border-color: oklch(0.74 0.16 152 / 0.5); }
#module-ciclo.nv-app .cx-ajuda-balao {
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%);
  width: min(360px, 82vw); z-index: 60;
  background: oklch(0.18 0.012 250);
  border: 1px solid oklch(0.35 0.015 250 / 0.7);
  border-radius: 12px; padding: 12px 14px;
  font: 400 12px/1.55 var(--font-sans); color: var(--text-2);
  text-align: left; box-shadow: 0 12px 36px oklch(0 0 0 / 0.45);
  animation: cx-balao-entra 0.15s ease;
}
#module-ciclo.nv-app .cx-ajuda-balao b { color: var(--text-1); }
#module-ciclo.nv-app .cx-ajuda-balao::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  margin-left: -6px; border: 6px solid transparent;
  border-top-color: oklch(0.35 0.015 250 / 0.9);
}
@keyframes cx-balao-entra { from { opacity: 0; transform: translateX(-50%) translateY(4px); } }
@media (prefers-reduced-motion: reduce) { #module-ciclo.nv-app .cx-ajuda-balao { animation: none; } }

/* =====================================================================
   Módulo Diário de Bordo — avaliação diária multi-categoria (nota 1–5).
   ===================================================================== */
#module-diario.nv-app { --di-donut-bg: oklch(0.30 0.010 250 / 0.55); }

#module-diario.nv-app .di-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 22px; align-items: start;
}
#module-diario.nv-app .di-col {
  background: var(--bg-1); border: 1px solid var(--border-soft, var(--border));
  border-radius: var(--r-xl, 16px); padding: 18px 18px 20px;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 900px) { #module-diario.nv-app .di-grid { grid-template-columns: 1fr; } }

/* ---- botões base ---- */
#module-diario.nv-app .di-btn {
  border: 1px solid var(--border); background: var(--bg-2); color: var(--text-2);
  border-radius: 10px; padding: 8px 14px; font: 600 13px var(--font-sans);
  cursor: pointer; transition: background 120ms, color 120ms, border-color 120ms, transform 80ms;
}
#module-diario.nv-app .di-btn:hover { background: var(--bg-3); color: var(--text-1); }
#module-diario.nv-app .di-btn:active { transform: translateY(1px); }
#module-diario.nv-app .di-btn-primario {
  background: var(--accent); border-color: var(--accent); color: var(--accent-fg, #0b0f14);
}
#module-diario.nv-app .di-btn-primario:hover { filter: brightness(1.08); background: var(--accent); color: var(--accent-fg, #0b0f14); }
#module-diario.nv-app .di-btn-ghost { background: transparent; }
#module-diario.nv-app .di-btn-mini { padding: 6px 11px; font-size: 12px; }
#module-diario.nv-app .di-btn-danger-ghost {
  background: transparent; border-color: transparent; color: var(--danger, #ef4444);
}
#module-diario.nv-app .di-btn-danger-ghost:hover { background: color-mix(in oklab, var(--danger, #ef4444) 14%, transparent); }

/* ---- navegação de dia ---- */
#module-diario.nv-app .di-daynav {
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  margin-bottom: 6px;
}
#module-diario.nv-app .di-daynav-mid { text-align: center; line-height: 1.2; }
#module-diario.nv-app .di-daynav-mid strong { display: block; font: 700 17px var(--font-sans); color: var(--text-1); }
#module-diario.nv-app .di-daynav-mid span { font-size: 12px; color: var(--text-3); }
#module-diario.nv-app .di-nav-btn {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--bg-2); color: var(--text-2); font-size: 20px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
#module-diario.nv-app .di-nav-btn:hover:not(:disabled) { background: var(--bg-3); color: var(--text-1); }
#module-diario.nv-app .di-nav-btn:disabled { opacity: 0.35; cursor: default; }
#module-diario.nv-app .di-hoje-link {
  display: block; margin: 0 auto 10px; background: none; border: none; cursor: pointer;
  color: var(--accent); font: 600 12px var(--font-sans);
}
#module-diario.nv-app .di-aviso { text-align: center; color: var(--text-3); padding: 26px 10px; }
#module-diario.nv-app .di-foco-tag {
  display: flex; align-items: center; gap: 6px; margin: 0 0 10px;
  font: 500 12px var(--font-sans); color: var(--text-3);
}
#module-diario.nv-app .di-foco-tag .di-cat-dot { width: 8px; height: 8px; flex: none; }
#module-diario.nv-app .di-foco-tag strong { color: var(--text-1); font-weight: 700; }
#module-diario.nv-app .di-foco-todas {
  background: none; border: none; cursor: pointer; color: var(--accent);
  font: 600 12px var(--font-sans); padding: 0;
}
#module-diario.nv-app .di-foco-todas:hover { text-decoration: underline; }

/* ---- linhas de categoria (avaliar) ---- */
#module-diario.nv-app .di-cat-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
#module-diario.nv-app .di-cat-row {
  border: 1px solid var(--border-soft, var(--border)); border-radius: 12px;
  padding: 12px 14px; background: var(--bg-0, var(--bg-2));
  animation: di-row-in 260ms ease both;
}
#module-diario.nv-app .di-cat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
#module-diario.nv-app .di-cat-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
#module-diario.nv-app .di-cat-nome { font: 600 14px var(--font-sans); color: var(--text-1); flex: 1; }
#module-diario.nv-app .di-cat-cfg {
  background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 18px;
  line-height: 1; padding: 2px 6px; border-radius: 6px;
}
#module-diario.nv-app .di-cat-cfg:hover { background: var(--bg-3); color: var(--text-1); }

/* ---- faces (1–5) ---- */
#module-diario.nv-app .di-faces { display: flex; gap: 6px; }
#module-diario.nv-app .di-face {
  flex: 1; aspect-ratio: 1 / 1; max-width: 52px; border-radius: 10px;
  border: 1.5px solid transparent; background: var(--bg-2); cursor: pointer;
  font-size: clamp(18px, 4.4vw, 24px); line-height: 1;
  filter: grayscale(0.4) opacity(0.62);
  transition: filter 130ms, transform 130ms, border-color 130ms, background 130ms;
}
#module-diario.nv-app .di-face:hover { filter: none; transform: translateY(-2px) scale(1.06); }
#module-diario.nv-app .di-face.is-on {
  filter: none; border-color: var(--f-cor);
  background: color-mix(in oklab, var(--f-cor) 18%, var(--bg-2));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--f-cor) 22%, transparent);
}

/* ---- comentário inline ---- */
#module-diario.nv-app .di-com-toggle { margin-top: 8px; }
#module-diario.nv-app .di-com-link {
  background: none; border: none; cursor: pointer; padding: 0; text-align: left;
  color: var(--text-3); font: 500 12px var(--font-sans);
}
#module-diario.nv-app .di-com-link:hover { color: var(--text-1); }
#module-diario.nv-app .di-com-link.has { color: var(--text-2); }
#module-diario.nv-app .di-com-edit { margin-top: 8px; }
#module-diario.nv-app .di-com-input {
  width: 100%; min-height: 64px; resize: vertical; border-radius: 9px;
  border: 1px solid var(--border); background: var(--bg-2); color: var(--text-1);
  padding: 9px 11px; font: 400 13px var(--font-sans);
}
#module-diario.nv-app .di-com-input:focus { outline: none; border-color: var(--accent); }
#module-diario.nv-app .di-com-acoes { display: flex; gap: 8px; margin-top: 8px; }
#module-diario.nv-app .di-add-cat { margin-top: 14px; width: 100%; }

/* ---- hábito: botões Fiz / Não fiz + tag + stats ---- */
#module-diario.nv-app .di-cat-tag {
  font: 700 9px var(--font-sans); text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-3); background: var(--bg-3); padding: 2px 6px; border-radius: 5px; margin-right: 4px;
}
#module-diario.nv-app .di-habito { display: flex; gap: 8px; }
#module-diario.nv-app .di-hb {
  flex: 1; padding: 12px; border-radius: 10px; border: 1.5px solid var(--border);
  background: var(--bg-2); color: var(--text-2); cursor: pointer;
  font: 700 14px var(--font-sans); transition: background 120ms, border-color 120ms, color 120ms, transform 80ms;
}
#module-diario.nv-app .di-hb:hover { transform: translateY(-1px); color: var(--text-1); }
#module-diario.nv-app .di-hb-sim.is-on { border-color: #22c55e; color: #22c55e; background: color-mix(in oklab, #22c55e 16%, var(--bg-2)); box-shadow: 0 0 0 3px color-mix(in oklab, #22c55e 20%, transparent); }
#module-diario.nv-app .di-hb-nao.is-on { border-color: var(--danger, #ef4444); color: var(--danger, #ef4444); background: color-mix(in oklab, #ef4444 14%, var(--bg-2)); box-shadow: 0 0 0 3px color-mix(in oklab, #ef4444 18%, transparent); }
#module-diario.nv-app .di-hb-stats { flex: 1; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
#module-diario.nv-app .di-hb-stat { display: flex; flex-direction: column; }
#module-diario.nv-app .di-hb-num { font: 800 22px var(--font-sans); color: var(--text-1); line-height: 1.1; }
#module-diario.nv-app .di-hb-num small { font-size: 14px; font-weight: 600; color: var(--text-3); }
#module-diario.nv-app .di-hb-lbl { font: 500 11px var(--font-sans); color: var(--text-3); }

/* ---- seletor de tipo no modal ---- */
.di-tiposel { display: flex; gap: 8px; }
.di-tipo-op {
  flex: 1; display: flex; align-items: center; gap: 9px; text-align: left;
  padding: 10px 11px; border-radius: 10px; border: 1.5px solid var(--border);
  background: var(--bg-2); color: var(--text-2); cursor: pointer;
}
.di-tipo-op:hover { border-color: var(--border-strong, var(--border)); }
.di-tipo-op.is-on { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, var(--bg-2)); }
.di-tipo-ic { font-size: 18px; line-height: 1; }
.di-tipo-txt { display: flex; flex-direction: column; min-width: 0; }
.di-tipo-txt strong { font: 700 13px var(--font-sans); color: var(--text-1); }
.di-tipo-txt small { font: 500 10.5px var(--font-sans); color: var(--text-3); }

/* ---- chips de categoria (evolução) ---- */
#module-diario.nv-app .di-catchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
#module-diario.nv-app .di-catchip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-2); color: var(--text-2);
  font: 600 12px var(--font-sans); cursor: pointer;
}
#module-diario.nv-app .di-catchip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-cor); }
#module-diario.nv-app .di-catchip.is-on {
  border-color: var(--c-cor); color: var(--text-1);
  background: color-mix(in oklab, var(--c-cor) 16%, var(--bg-2));
}

/* ---- calendário ---- */
#module-diario.nv-app .di-cal-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
#module-diario.nv-app .di-cal-head strong { font: 700 15px var(--font-sans); color: var(--text-1); text-transform: capitalize; }
#module-diario.nv-app .di-cal-head strong span { color: var(--text-3); font-weight: 500; }
#module-diario.nv-app .di-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
#module-diario.nv-app .di-cal-wd {
  text-align: center; font: 600 10px var(--font-sans); color: var(--text-4, var(--text-3));
  padding-bottom: 2px; text-transform: uppercase; letter-spacing: 0.03em;
}
#module-diario.nv-app .di-cal-cell {
  position: relative; aspect-ratio: 1 / 1; border-radius: 9px;
  border: 1px solid var(--border-soft, var(--border)); background: var(--bg-2);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform 100ms, box-shadow 120ms;
}
#module-diario.nv-app .di-cal-cell.is-empty { border: none; background: none; cursor: default; }
#module-diario.nv-app .di-cal-cell:not(.is-empty):not(:disabled):hover { transform: scale(1.06); z-index: 1; }
#module-diario.nv-app .di-cal-cell.is-fut { opacity: 0.4; cursor: default; }
#module-diario.nv-app .di-cal-cell.is-hoje { box-shadow: inset 0 0 0 1.5px var(--text-3); }
#module-diario.nv-app .di-cal-cell.is-sel { box-shadow: 0 0 0 2px var(--accent); }
#module-diario.nv-app .di-cal-num { position: absolute; top: 3px; left: 5px; font: 600 9px var(--font-sans); color: var(--text-3); }
#module-diario.nv-app .di-cal-face { font-size: clamp(13px, 2.6vw, 18px); line-height: 1; }

/* ---- legenda ---- */
#module-diario.nv-app .di-legenda { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 14px 0 4px; }
#module-diario.nv-app .di-leg-item { display: inline-flex; align-items: center; gap: 5px; font: 500 11px var(--font-sans); color: var(--text-3); }
#module-diario.nv-app .di-leg-item i { width: 9px; height: 9px; border-radius: 3px; }

/* ---- stats (donut + distribuição) ---- */
#module-diario.nv-app .di-stats {
  display: flex; align-items: center; gap: 18px; margin-top: 16px;
  padding-top: 16px; border-top: 1px solid var(--border-soft, var(--border));
}
#module-diario.nv-app .di-donut { position: relative; width: 120px; height: 120px; flex: none; }
#module-diario.nv-app .di-donut-mid {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1;
}
#module-diario.nv-app .di-donut-media { font: 800 24px var(--font-sans); color: var(--text-1); }
#module-diario.nv-app .di-donut-face { font-size: 16px; margin: 1px 0; }
#module-diario.nv-app .di-donut-sub { font: 500 10px var(--font-sans); color: var(--text-3); }
#module-diario.nv-app .di-dist { flex: 1; display: flex; flex-direction: column; gap: 6px; }
#module-diario.nv-app .di-dist-row { display: flex; align-items: center; gap: 8px; }
#module-diario.nv-app .di-dist-face { font-size: 15px; width: 20px; text-align: center; }
#module-diario.nv-app .di-dist-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--bg-3); overflow: hidden; }
#module-diario.nv-app .di-dist-bar i { display: block; height: 100%; border-radius: 4px; transition: width 400ms ease; }
#module-diario.nv-app .di-dist-n { font: 600 12px var(--font-mono, var(--font-sans)); color: var(--text-2); width: 20px; text-align: right; }
#module-diario.nv-app .di-stats-vazio {
  margin-top: 16px; padding: 16px; border-radius: 10px; background: var(--bg-2);
  color: var(--text-3); font: 400 12.5px/1.5 var(--font-sans); text-align: center;
}

/* ---- linha do tempo de anotações ---- */
#module-diario.nv-app .di-timeline { margin-top: 18px; }
#module-diario.nv-app .di-timeline h3 { font: 700 13px var(--font-sans); color: var(--text-2); margin: 0 0 10px; }

/* painel de anotações na coluna esquerda (modo foco) — rola sozinho */
#module-diario.nv-app .di-notas { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft, var(--border)); }
#module-diario.nv-app .di-notas h3 {
  font: 700 13px var(--font-sans); color: var(--text-2); margin: 0 0 8px;
  display: flex; align-items: center; gap: 6px;
}
#module-diario.nv-app .di-notas h3 span {
  font: 700 11px var(--font-sans); color: var(--text-3); background: var(--bg-3);
  padding: 1px 7px; border-radius: 999px;
}
#module-diario.nv-app .di-notas-scroll { max-height: 340px; overflow-y: auto; padding-right: 4px; }
#module-diario.nv-app .di-notas-vazio { font: 400 12.5px/1.5 var(--font-sans); color: var(--text-3); margin: 4px 0 0; }
#module-diario.nv-app .di-tl-item {
  display: flex; gap: 10px; padding: 8px 6px; width: 100%; text-align: left; align-items: flex-start;
  border: none; border-top: 1px solid var(--border-soft, var(--border)); border-radius: 8px;
  background: transparent; cursor: pointer; transition: background 110ms;
}
#module-diario.nv-app .di-tl-item:hover { background: var(--bg-2); }
#module-diario.nv-app .di-tl-vertodas {
  display: block; width: 100%; margin-top: 8px; padding: 9px; border-radius: 8px;
  border: 1px dashed var(--border-strong, var(--border)); background: transparent;
  color: var(--accent); font: 600 12px var(--font-sans); cursor: pointer;
}
#module-diario.nv-app .di-tl-vertodas:hover { border-style: solid; background: var(--bg-2); }
#module-diario.nv-app .di-cal-note {
  position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--text-2); opacity: 0.75;
}
#module-diario.nv-app .di-tl-face {
  font-size: 18px; width: 30px; height: 30px; flex: none; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--f-cor) 16%, transparent);
}
#module-diario.nv-app .di-tl-body { flex: 1; min-width: 0; }
#module-diario.nv-app .di-tl-data { font: 600 11px var(--font-sans); color: var(--text-3); }
#module-diario.nv-app .di-tl-body p { margin: 2px 0 0; font: 400 13px/1.45 var(--font-sans); color: var(--text-1); white-space: pre-wrap; word-break: break-word; }

/* ---- toggle Calendário ⇄ Diário ---- */
#module-diario.nv-app .di-viewtoggle {
  display: inline-flex; padding: 3px; gap: 3px; margin-bottom: 14px;
  background: var(--bg-2); border: 1px solid var(--border-soft, var(--border)); border-radius: 10px;
}
#module-diario.nv-app .di-vt {
  border: none; background: transparent; color: var(--text-3); cursor: pointer;
  padding: 6px 14px; border-radius: 8px; font: 600 12.5px var(--font-sans);
  transition: background 120ms, color 120ms;
}
#module-diario.nv-app .di-vt:hover { color: var(--text-1); }
#module-diario.nv-app .di-vt.is-on { background: var(--bg-0, var(--bg-1)); color: var(--text-1); box-shadow: var(--shadow-sm); }

/* ---- feed do Diário (histórico dia a dia) ---- */
#module-diario.nv-app .di-feed-head { font: 600 12px var(--font-sans); color: var(--text-3); margin-bottom: 10px; }
#module-diario.nv-app .di-feed { display: flex; flex-direction: column; }
#module-diario.nv-app .di-feed-mes {
  position: sticky; top: 0; z-index: 1;
  font: 700 11px var(--font-sans); color: var(--text-2); text-transform: uppercase; letter-spacing: 0.04em;
  padding: 10px 0 6px; margin-top: 6px; background: var(--bg-1);
  border-bottom: 1px solid var(--border-soft, var(--border));
}
#module-diario.nv-app .di-feed-mes:first-child { margin-top: 0; }
#module-diario.nv-app .di-feed-mes span { color: var(--text-4, var(--text-3)); font-weight: 500; }
#module-diario.nv-app .di-feed-item {
  display: flex; gap: 11px; align-items: flex-start; width: 100%; text-align: left;
  padding: 10px 8px; border: none; border-radius: 10px; background: transparent; cursor: pointer;
  border-bottom: 1px solid var(--border-soft, var(--border));
  transition: background 110ms;
}
#module-diario.nv-app .di-feed-item:hover { background: var(--bg-2); }
#module-diario.nv-app .di-feed-face {
  font-size: 20px; width: 36px; height: 36px; flex: none; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in oklab, var(--f-cor) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--f-cor) 40%, transparent);
}
#module-diario.nv-app .di-feed-body { flex: 1; min-width: 0; }
#module-diario.nv-app .di-feed-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#module-diario.nv-app .di-feed-data { font: 600 12.5px var(--font-sans); color: var(--text-1); }
#module-diario.nv-app .di-feed-nota { font: 700 11px var(--font-sans); flex: none; }
#module-diario.nv-app .di-feed-com { margin: 3px 0 0; font: 400 13px/1.45 var(--font-sans); color: var(--text-2); white-space: pre-wrap; word-break: break-word; }
#module-diario.nv-app .di-feed-com.is-vazio { color: var(--text-4, var(--text-3)); font-style: italic; font-size: 12px; }

/* ===================== Visão Geral (todas as categorias) ===================== */
#module-diario.nv-app { --f-pos: #22c55e; --f-neg: #ef4444; }

/* chip "Geral" */
#module-diario.nv-app .di-catchip-geral { --c-cor: var(--text-3); }
#module-diario.nv-app .di-catchip-geral.is-on {
  border-color: var(--accent); color: var(--text-1);
  background: color-mix(in oklab, var(--accent) 16%, var(--bg-2));
}
#module-diario.nv-app .di-catchip-grid { font-size: 12px; line-height: 1; opacity: 0.85; }

/* heatmap multi-categoria */
#module-diario.nv-app .di-hm-scroll { overflow-x: auto; padding-bottom: 4px; }
#module-diario.nv-app .di-hm { min-width: max-content; display: flex; flex-direction: column; gap: 3px; }
#module-diario.nv-app .di-hm-row {
  display: grid; grid-template-columns: 84px repeat(var(--dias), minmax(15px, 1fr)); gap: 3px; align-items: center;
}
#module-diario.nv-app .di-hm-rot {
  font: 600 11px var(--font-sans); color: var(--text-2); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; padding-right: 4px;
}
#module-diario.nv-app .di-hm-rot .di-cat-dot { width: 8px; height: 8px; flex: none; }
#module-diario.nv-app .di-hm-diahdr {
  font: 500 9px var(--font-sans); color: var(--text-4, var(--text-3)); text-align: center;
}
#module-diario.nv-app .di-hm-diahdr.is-hoje { color: var(--accent); font-weight: 700; }
#module-diario.nv-app .di-hm-cell {
  aspect-ratio: 1 / 1; min-width: 15px; border-radius: 3px; border: none; cursor: pointer;
  background: var(--bg-3); transition: transform 90ms; padding: 0;
}
#module-diario.nv-app .di-hm-cell.has:hover { transform: scale(1.25); z-index: 1; }
#module-diario.nv-app .di-hm-cell:not(.has) { background: var(--bg-2); cursor: default; }
#module-diario.nv-app .di-hm-cell.is-fut { opacity: 0.35; cursor: default; }
#module-diario.nv-app .di-leg-vazio i { background: var(--bg-3); }

/* média por categoria */
#module-diario.nv-app .di-resumo { margin-top: 18px; }
#module-diario.nv-app .di-resumo h3,
#module-diario.nv-app .di-insights h3 { font: 700 13px var(--font-sans); color: var(--text-2); margin: 0 0 10px; }
#module-diario.nv-app .di-rc-row {
  display: grid; grid-template-columns: 12px minmax(60px, 1.2fr) 2fr auto auto; gap: 10px; align-items: center;
  width: 100%; text-align: left; background: transparent; border: none; cursor: pointer;
  padding: 7px 6px; border-radius: 8px;
}
#module-diario.nv-app .di-rc-row:hover { background: var(--bg-2); }
#module-diario.nv-app .di-rc-nome { font: 600 12.5px var(--font-sans); color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#module-diario.nv-app .di-rc-bar { height: 7px; border-radius: 4px; background: var(--bg-3); overflow: hidden; }
#module-diario.nv-app .di-rc-bar i { display: block; height: 100%; border-radius: 4px; }
#module-diario.nv-app .di-rc-media { font: 700 12.5px var(--font-mono, var(--font-sans)); color: var(--text-1); white-space: nowrap; }
#module-diario.nv-app .di-rc-dias { font: 500 11px var(--font-sans); color: var(--text-3); white-space: nowrap; }

/* cruzamentos / insights */
#module-diario.nv-app .di-insights { margin-top: 20px; }
#module-diario.nv-app .di-corr-card {
  border: 1px solid var(--border-soft, var(--border)); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px;
  background: var(--bg-0, var(--bg-2));
}
#module-diario.nv-app .di-corr-card.is-low { opacity: 0.75; }
#module-diario.nv-app .di-corr-titulo {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font: 600 13px var(--font-sans); color: var(--text-1);
}
#module-diario.nv-app .di-corr-titulo .di-cat-dot { width: 9px; height: 9px; }
#module-diario.nv-app .di-corr-x { color: var(--text-3); margin: 0 2px; }
#module-diario.nv-app .di-corr-n { margin-left: auto; font: 500 10.5px var(--font-sans); color: var(--text-3); }
#module-diario.nv-app .di-corr-bar {
  position: relative; height: 8px; border-radius: 4px; margin: 12px 0 4px;
  background: linear-gradient(90deg, color-mix(in oklab, var(--f-neg) 55%, transparent), var(--bg-3) 50%, color-mix(in oklab, var(--f-pos) 55%, transparent));
}
#module-diario.nv-app .di-corr-bar-zero {
  position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--text-4, var(--text-3)); opacity: 0.5;
}
#module-diario.nv-app .di-corr-bar-dot {
  position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%;
  transform: translate(-50%, -50%); border: 2px solid var(--bg-1); box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
#module-diario.nv-app .di-corr-bar-lbl { display: flex; justify-content: space-between; font: 500 9.5px var(--font-sans); color: var(--text-4, var(--text-3)); }
#module-diario.nv-app .di-corr-frase { margin: 8px 0 0; font: 400 12.5px/1.5 var(--font-sans); color: var(--text-2); }
#module-diario.nv-app .di-corr-frase strong { color: var(--text-1); }

/* ---- gráficos de evolução (SVG) ---- */
#module-diario.nv-app .di-graf-bloco {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-soft, var(--border));
}
#module-diario.nv-app .di-graf-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
#module-diario.nv-app .di-graf-head h3 { font: 700 13px var(--font-sans); color: var(--text-2); margin: 0; }
#module-diario.nv-app .di-graf-sub { font: 500 11px var(--font-sans); color: var(--text-3); margin-left: auto; }
#module-diario.nv-app .di-graf-svg { width: 100%; height: auto; display: block; overflow: visible; }
#module-diario.nv-app .di-g-grid { stroke: var(--border-soft, var(--border)); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.5; }
#module-diario.nv-app .di-g-line {
  filter: drop-shadow(0 3px 6px color-mix(in oklab, currentColor 0%, transparent));
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: di-draw 950ms ease-out forwards;
}
#module-diario.nv-app .di-graf-eixo {
  display: flex; justify-content: space-between; margin-top: 2px;
  font: 500 9.5px var(--font-sans); color: var(--text-4, var(--text-3));
}
/* selo de tendência */
#module-diario.nv-app .di-tend {
  font: 700 11px var(--font-sans); padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
#module-diario.nv-app .di-tend-up { color: #22c55e; background: color-mix(in oklab, #22c55e 16%, transparent); }
#module-diario.nv-app .di-tend-down { color: #ef4444; background: color-mix(in oklab, #ef4444 16%, transparent); }
#module-diario.nv-app .di-tend-flat { color: var(--text-3); background: var(--bg-2); }

@keyframes di-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  #module-diario.nv-app .di-g-line { animation: none; stroke-dashoffset: 0; }
}

/* ---- estado vazio ---- */
#module-diario.nv-app .di-vazio { text-align: center; max-width: 460px; margin: 40px auto; }
#module-diario.nv-app .di-vazio-emoji { font-size: 46px; }
#module-diario.nv-app .di-vazio h2 { font: 800 22px var(--font-display, var(--font-sans)); color: var(--text-1); margin: 10px 0 6px; }
#module-diario.nv-app .di-vazio p { color: var(--text-3); font: 400 14px/1.6 var(--font-sans); margin: 0 0 18px; }
#module-diario.nv-app .di-vazio-sugest { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 20px; }
#module-diario.nv-app .di-chip-sug {
  border: 1px dashed var(--border-strong, var(--border)); background: transparent;
  color: var(--text-2); border-radius: 999px; padding: 6px 13px; cursor: pointer;
  font: 600 13px var(--font-sans);
}
#module-diario.nv-app .di-chip-sug:hover { border-style: solid; border-color: var(--accent); color: var(--text-1); }

/* ---- modal de edição de categoria (montado no body) ---- */
.di-modal-backdrop {
  position: fixed; inset: 0; z-index: 9400; background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  animation: di-fade 140ms ease;
}
.di-modal {
  width: 100%; max-width: 400px; background: var(--bg-1); color: var(--text-1);
  border: 1px solid var(--border); border-radius: 16px; padding: 18px;
  box-shadow: 0 24px 60px -18px rgba(0,0,0,0.7); font-family: var(--font-sans, system-ui, sans-serif);
  animation: di-pop 160ms ease;
}
.di-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.di-modal-head h3 { font: 700 15px var(--font-sans); margin: 0; }
.di-modal-x { background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 16px; padding: 4px 8px; border-radius: 8px; }
.di-modal-x:hover { background: var(--bg-3); color: var(--text-1); }
.di-modal-label { display: block; font: 600 11px var(--font-sans); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.03em; margin: 10px 0 6px; }
.di-modal-input {
  width: 100%; border-radius: 9px; border: 1px solid var(--border); background: var(--bg-2);
  color: var(--text-1); padding: 9px 11px; font: 400 14px var(--font-sans);
}
.di-modal-input:focus { outline: none; border-color: var(--accent); }
.di-cores { display: flex; flex-wrap: wrap; gap: 8px; }
.di-cor-sw { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.di-cor-sw.is-on { border-color: var(--text-1); box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 4px currentColor; }
.di-modal-acoes { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.di-modal-acoes-dir { display: flex; gap: 8px; }
.di-modal .di-btn {
  border: 1px solid var(--border); background: var(--bg-2); color: var(--text-2);
  border-radius: 10px; padding: 8px 14px; font: 600 13px var(--font-sans); cursor: pointer;
}
.di-modal .di-btn-ghost { background: transparent; }
.di-modal .di-btn-primario { background: var(--accent); border-color: var(--accent); color: var(--accent-fg, #0b0f14); }
.di-modal .di-btn-danger-ghost { background: transparent; border-color: transparent; color: var(--danger, #ef4444); }
.di-modal .di-btn-danger-ghost:hover { background: color-mix(in oklab, var(--danger, #ef4444) 14%, transparent); }

/* ---- mini-toast ---- */
.di-flash {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(12px);
  z-index: 9600; background: var(--bg-1); color: var(--text-1);
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 16px;
  font: 600 13px var(--font-sans); box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity 180ms, transform 180ms;
}
.di-flash.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@keyframes di-row-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes di-fade { from { opacity: 0; } }
@keyframes di-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) {
  #module-diario.nv-app .di-cat-row,
  .di-modal-backdrop, .di-modal { animation: none; }
  #module-diario.nv-app .di-face:hover,
  #module-diario.nv-app .di-cal-cell:hover { transform: none; }
}

/* ============================================================
   PLANEJAMENTO — TELA DE QUADROS (v56: vários quadros)
   Escopo em #module-kanban.nv-app; a modal de quadro é portalada
   no <body>, então tem escopo próprio (.kb-modal-back) no fim.
   ============================================================ */
#module-kanban.nv-app .kb-quadros[hidden],
#module-kanban.nv-app #kanban-quadro-tela[hidden] { display: none !important; }

/* O glow decorativo do "Command Deck" (kanban.css) e os stats do cabeçalho
   descrevem o QUADRO ABERTO. Na tela de quadros eles viravam um painel
   colorido sem sentido e um "0 / 0" que não é de ninguém. */
#module-kanban.nv-app:not(.kb-em-quadro)::before { content: none !important; }
#module-kanban.nv-app:not(.kb-em-quadro) .kanban-header-stats { display: none !important; }

/* botão "‹ Quadros" no cabeçalho */
#module-kanban.nv-app .kb-voltar {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg-1); border: 1px solid var(--border-subtle); color: var(--text-3);
  border-radius: 999px; padding: 5px 12px 5px 8px; cursor: pointer;
  font: 600 12.5px var(--font-sans); transition: .15s;
}
#module-kanban.nv-app .kb-voltar:hover { background: var(--bg-2); color: var(--text-1); border-color: var(--border-soft); }
#module-kanban.nv-app .kb-voltar[hidden] { display: none !important; }
#module-kanban.nv-app .kb-voltar svg { width: 14px; height: 14px; }
/* dentro de um quadro o ícone do título vira o emoji escolhido */
#module-kanban.nv-app.kb-em-quadro #kanban-titulo-icone { font-size: 20px; line-height: 1; }

/* ---- topo ---- */
#module-kanban.nv-app .kb-topo {
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 4px 0 20px;
}
#module-kanban.nv-app .kb-topo h2 { margin: 0 0 4px; font-size: 25px; letter-spacing: -0.025em; color: var(--text-1); }
#module-kanban.nv-app .kb-topo p { margin: 0; color: var(--text-3); font-size: 13px; }
#module-kanban.nv-app .kb-topo-acoes { margin-left: auto; display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
#module-kanban.nv-app .kb-busca {
  display: flex; align-items: center; gap: 8px; width: 214px;
  background: var(--bg-1); border: 1px solid var(--border-subtle);
  border-radius: var(--r-md, 10px); padding: 8px 12px; color: var(--text-4); font-size: 13px;
}
/* !important: existe um "input[type=search]:not(.nv-input)" global com
   !important neste mesmo arquivo, que pintava uma caixa dentro da caixa. */
#module-kanban.nv-app .kb-busca input {
  flex: 1; min-width: 0; outline: none; color: var(--text-1); font: inherit;
  background: none !important; border: 0 !important; padding: 0 !important;
  border-radius: 0 !important; box-shadow: none !important;
}
#module-kanban.nv-app .kb-busca input::placeholder { color: var(--text-4); }
#module-kanban.nv-app .kb-btn {
  border: 1px solid var(--border-subtle); background: var(--bg-1); color: var(--text-2);
  border-radius: var(--r-md, 10px); padding: 9px 14px; font: 600 13px var(--font-sans);
  cursor: pointer; transition: .15s; display: inline-flex; align-items: center; gap: 7px;
}
#module-kanban.nv-app .kb-btn:hover { background: var(--bg-2); color: var(--text-1); border-color: var(--border-soft); }
#module-kanban.nv-app .kb-btn-pri { background: var(--accent); border-color: transparent; color: var(--accent-fg); }
#module-kanban.nv-app .kb-btn-pri:hover { background: var(--accent-strong); color: var(--accent-fg); }

/* ---- seções e grupos ---- */
#module-kanban.nv-app .kb-secao { margin-bottom: 28px; }
#module-kanban.nv-app .kb-secao-tt h3 {
  margin: 0 0 13px; font: 700 11px var(--font-mono, monospace); letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-4);
}
#module-kanban.nv-app .kb-grupo { margin-bottom: 28px; }
#module-kanban.nv-app .kb-grupo[hidden] { display: none; }
#module-kanban.nv-app .kb-grupo-tt { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
#module-kanban.nv-app .kb-grupo-tt .ico {
  width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto; display: grid; place-items: center;
  font-size: 13px; background: var(--bg-2); border: 1px solid var(--border-subtle);
}
#module-kanban.nv-app .kb-grupo-tt b { font-size: 14.5px; letter-spacing: -0.01em; color: var(--text-1); }
#module-kanban.nv-app .kb-grupo-tt .conta { font: 600 11px var(--font-mono, monospace); color: var(--text-4); }
#module-kanban.nv-app .kb-grupo-tt .acoes { margin-left: auto; display: flex; gap: 6px; opacity: 0; transition: .15s; }
#module-kanban.nv-app .kb-grupo:hover .acoes,
#module-kanban.nv-app .kb-grupo:focus-within .acoes { opacity: 1; }
#module-kanban.nv-app .kb-grupo-tt .acoes button {
  background: transparent; border: 1px solid transparent; color: var(--text-4);
  border-radius: var(--r-sm, 6px); padding: 3px 8px; font: 500 11.5px var(--font-sans); cursor: pointer;
}
#module-kanban.nv-app .kb-grupo-tt .acoes button:hover {
  color: var(--text-1); border-color: var(--border-subtle); background: var(--bg-1);
}

/* ---- grade de quadros ---- */
#module-kanban.nv-app .kb-grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 13px;
}
#module-kanban.nv-app .kb-quadro {
  position: relative; background: var(--bg-1); border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg, 14px); overflow: hidden;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
#module-kanban.nv-app .kb-quadro[hidden] { display: none; }
#module-kanban.nv-app .kb-quadro:hover {
  transform: translateY(-2px); border-color: var(--border-strong);
  box-shadow: 0 12px 28px oklch(0 0 0 / .35);
}
#module-kanban.nv-app .kb-quadro-abrir {
  display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0;
  color: inherit; font-family: inherit; cursor: pointer;
}
#module-kanban.nv-app .kb-quadro-abrir:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#module-kanban.nv-app .kb-capa {
  height: 76px; position: relative; display: flex; align-items: flex-end; padding: 10px 12px;
  background:
    repeating-linear-gradient(135deg, oklch(1 0 0 / .05) 0 1px, transparent 1px 9px),
    linear-gradient(145deg,
      color-mix(in oklab, var(--h) 78%, oklch(0.2 0.01 250)),
      color-mix(in oklab, var(--h) 32%, oklch(0.17 0.01 250)));
}
#module-kanban.nv-app .kb-capa .ini { font-size: 19px; line-height: 1; filter: drop-shadow(0 1px 4px oklch(0 0 0 / .4)); }
#module-kanban.nv-app .kb-capa .prog {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: oklch(0 0 0 / .3);
}
#module-kanban.nv-app .kb-capa .prog i { display: block; height: 100%; width: var(--p, 0%); background: oklch(1 0 0 / .78); transition: width .3s ease; }

#module-kanban.nv-app .kb-fixar,
#module-kanban.nv-app .kb-menu {
  position: absolute; top: 8px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; line-height: 1;
  background: oklch(0 0 0 / .42); color: oklch(1 0 0 / .75);
  border: 1px solid oklch(1 0 0 / .16); cursor: pointer;
  opacity: 0; transform: scale(.85); transition: .15s;
}
#module-kanban.nv-app .kb-fixar { right: 8px; }
#module-kanban.nv-app .kb-menu { right: 40px; font-size: 14px; }
#module-kanban.nv-app .kb-quadro:hover .kb-fixar,
#module-kanban.nv-app .kb-quadro:hover .kb-menu,
#module-kanban.nv-app .kb-quadro:focus-within .kb-fixar,
#module-kanban.nv-app .kb-quadro:focus-within .kb-menu { opacity: 1; transform: none; }
#module-kanban.nv-app .kb-fixar:hover,
#module-kanban.nv-app .kb-menu:hover { background: oklch(0 0 0 / .62); color: #fff; }
#module-kanban.nv-app .kb-quadro.is-fixo .kb-fixar {
  opacity: 1; transform: none; color: var(--warn); border-color: oklch(1 0 0 / .28);
}

#module-kanban.nv-app .kb-corpo { display: block; padding: 11px 13px 13px; }
#module-kanban.nv-app .kb-corpo b { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 3px; color: var(--text-1); }
#module-kanban.nv-app .kb-corpo .sub { display: block; font-size: 11.5px; color: var(--text-4); }
#module-kanban.nv-app .kb-corpo .sinais { display: flex; align-items: center; gap: 7px; margin-top: 10px; flex-wrap: wrap; }
#module-kanban.nv-app .sinal {
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 11px var(--font-mono, monospace); border-radius: 999px; padding: 3px 8px;
  background: var(--bg-2); color: var(--text-3); border: 1px solid var(--border-subtle);
}
#module-kanban.nv-app .sinal.atrasado {
  color: var(--danger); border-color: color-mix(in oklab, var(--danger) 38%, transparent);
  background: color-mix(in oklab, var(--danger) 12%, transparent);
}
#module-kanban.nv-app .sinal.hoje {
  color: var(--warn); border-color: color-mix(in oklab, var(--warn) 38%, transparent);
  background: color-mix(in oklab, var(--warn) 12%, transparent);
}
#module-kanban.nv-app .sinal.ok {
  color: var(--accent); border-color: color-mix(in oklab, var(--accent) 34%, transparent);
  background: var(--accent-soft);
}

#module-kanban.nv-app .kb-novo {
  border: 1px dashed var(--border-soft); background: transparent; border-radius: var(--r-lg, 14px);
  min-height: 158px; display: grid; place-content: center; justify-items: center; gap: 6px;
  color: var(--text-3); cursor: pointer; font-family: inherit; transition: .15s;
}
#module-kanban.nv-app .kb-novo[hidden] { display: none; }
#module-kanban.nv-app .kb-novo:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
#module-kanban.nv-app .kb-novo .mais { font-size: 19px; line-height: 1; }
#module-kanban.nv-app .kb-novo span:last-child { font-size: 12.5px; font-weight: 600; }

/* ---- fila "continuar de onde parou" ---- */
#module-kanban.nv-app .kb-fila { display: flex; gap: 10px; flex-wrap: wrap; }
#module-kanban.nv-app .kb-recente {
  display: flex; align-items: center; gap: 10px; padding: 8px 13px 8px 9px;
  background: var(--bg-1); border: 1px solid var(--border-subtle); border-radius: 999px;
  cursor: pointer; font-family: inherit; color: var(--text-2); transition: .15s;
}
#module-kanban.nv-app .kb-recente:hover { background: var(--bg-2); color: var(--text-1); border-color: var(--border-soft); }
#module-kanban.nv-app .kb-recente .mini {
  width: 22px; height: 22px; border-radius: 7px; flex: 0 0 auto; display: grid; place-items: center; font-size: 11px;
  background: linear-gradient(145deg,
    color-mix(in oklab, var(--h) 80%, oklch(0.2 0.01 250)),
    color-mix(in oklab, var(--h) 34%, oklch(0.17 0.01 250)));
}
#module-kanban.nv-app .kb-recente b { font-size: 12.5px; font-weight: 600; }
#module-kanban.nv-app .kb-recente small { font: 500 11px var(--font-mono, monospace); color: var(--text-4); }

/* ---- vazio e rodapé ---- */
#module-kanban.nv-app .kb-vazio {
  text-align: center; padding: 54px 20px; border: 1px dashed var(--border-soft);
  border-radius: var(--r-xl, 20px); background: var(--bg-1);
}
#module-kanban.nv-app .kb-vazio .ico { font-size: 34px; display: block; margin-bottom: 12px; }
#module-kanban.nv-app .kb-vazio b { display: block; font-size: 16px; margin-bottom: 6px; color: var(--text-1); }
#module-kanban.nv-app .kb-vazio p { margin: 0 auto 18px; max-width: 46ch; font-size: 13px; color: var(--text-3); line-height: 1.6; }
#module-kanban.nv-app .kb-rodape {
  margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--border-subtle);
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--text-4);
}
#module-kanban.nv-app .kb-link {
  background: none; border: 0; border-bottom: 1px dashed var(--border-soft); padding: 0 0 1px;
  color: var(--text-3); font: inherit; font-size: 12px; cursor: pointer;
}
#module-kanban.nv-app .kb-link:hover { color: var(--accent); border-color: var(--accent); }

/* ---- modal de quadro (portalada no <body>: escopo próprio) ---- */
.kb-modal-back {
  position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center;
  padding: 20px; background: oklch(0 0 0 / .55); backdrop-filter: blur(3px);
  font-family: var(--font-sans);
}
.kb-modal {
  width: min(560px, 100%); max-height: 88vh; overflow-y: auto;
  background: var(--bg-1); color: var(--text-1);
  border: 1px solid var(--border-soft); border-radius: var(--r-xl, 20px);
  padding: 22px 24px; box-shadow: 0 24px 60px oklch(0 0 0 / .5);
}
.kb-modal h3 { margin: 0 0 16px; font-size: 17px; letter-spacing: -0.02em; color: var(--text-1); }
.kb-modal-sub { margin: -8px 0 16px; font-size: 12.5px; color: var(--text-4); line-height: 1.55; }
.kb-campo { display: block; margin-bottom: 16px; }
.kb-campo > span:first-child {
  display: block; margin-bottom: 7px; font: 600 11px var(--font-mono, monospace);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-4);
}
/* idem: a modal é portalada no <body> e apanha das regras globais de input */
.kb-campo input[type="text"], .kb-campo select {
  width: 100%; color: var(--text-1) !important;
  background: var(--bg-2) !important; border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-md, 10px) !important; padding: 10px 12px !important;
  font: 400 13.5px var(--font-sans); outline: none;
}
.kb-campo input[type="text"]:focus, .kb-campo select:focus { border-color: var(--accent) !important; }
.kb-emojis { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.kb-emoji {
  flex: 0 0 auto; display: grid !important; place-items: center;
  width: 32px !important; height: 32px !important; padding: 0 !important;
  border-radius: 9px; font-size: 15px; line-height: 1;
  background: var(--bg-2); border: 1px solid var(--border-subtle); cursor: pointer; transition: .13s;
}
.kb-emoji:hover { background: var(--bg-3); }
.kb-emoji.is-on { border-color: var(--accent); background: var(--accent-soft); }
.kb-cores { display: flex; flex-wrap: wrap; gap: 6px; }
.kb-cor {
  flex: 0 0 auto; display: block !important;
  width: 26px !important; height: 26px !important; padding: 0 !important;
  border-radius: 50%; cursor: pointer;
  background: var(--h); border: 2px solid transparent; transition: .13s;
}
.kb-cor:hover { transform: scale(1.08); }
.kb-cor.is-on { border-color: var(--text-1); box-shadow: 0 0 0 2px var(--bg-1) inset; }
.kb-modelos { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 9px; }
.kb-modelos-grupo {
  font: 700 10px var(--font-mono, monospace); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-4); margin: 14px 0 8px;
}
.kb-modelos-grupo:first-child { margin-top: 0; }
.kb-modelo {
  display: block !important; text-align: left !important;
  background: var(--bg-2); border: 1px solid var(--border-subtle);
  border-radius: var(--r-md, 10px); padding: 11px 12px; cursor: pointer; font-family: inherit;
  color: var(--text-2); transition: .15s;
}
.kb-modelo:hover { border-color: var(--border-strong); background: var(--bg-3); }
.kb-modelo.is-on { border-color: var(--accent); background: var(--accent-soft); }
.kb-modelo b { display: block; font-size: 12.5px; color: var(--text-1); margin-bottom: 3px; font-weight: 600; }
.kb-modelo > span { font-size: 11px; color: var(--text-4); line-height: 1.45; display: block; }
.kb-modelo .cols { display: flex; gap: 3px; margin-top: 9px; }
.kb-modelo .cols i { height: 4px; border-radius: 99px; background: var(--border-strong); flex: 1; }
/* raia com limite de WIP: mais grossa, pra ver que o modelo já traz regra */
.kb-modelo .cols i.tem-wip { height: 6px; margin: -1px 0; background: var(--text-3); }
.kb-modelo.is-on .cols i { background: color-mix(in oklab, var(--accent) 55%, transparent); }
.kb-modelo.is-on .cols i.tem-wip { background: var(--accent); }
.kb-modelo .nota {
  display: inline-block; margin-top: 8px; padding: 2px 7px; border-radius: 999px;
  font: 600 10px var(--font-mono, monospace); color: var(--text-3);
  background: var(--bg-3); border: 1px solid var(--border-subtle);
}
.kb-modelo.is-on .nota {
  color: var(--accent); background: var(--accent-soft);
  border-color: color-mix(in oklab, var(--accent) 34%, transparent);
}
/* com 12 modelos a modal passou a rolar — a ação principal não pode ficar
   abaixo da dobra, então o rodapé gruda embaixo. */
.kb-modal-acoes {
  position: sticky; bottom: -22px; z-index: 1;
  display: flex; gap: 9px; justify-content: flex-end; flex-wrap: wrap;
  margin: 20px -24px -22px; padding: 14px 24px 18px;
  background: linear-gradient(to bottom, transparent, var(--bg-1) 22%);
  border-bottom-left-radius: var(--r-xl, 20px); border-bottom-right-radius: var(--r-xl, 20px);
}
.kb-modal-acoes--espalhado { justify-content: flex-start; }
.kb-espaco-flex { flex: 1; }
.kb-modal .kb-btn {
  border: 1px solid var(--border-subtle); background: var(--bg-2); color: var(--text-2);
  border-radius: var(--r-md, 10px); padding: 9px 14px; font: 600 13px var(--font-sans); cursor: pointer; transition: .15s;
}
.kb-modal .kb-btn:hover { background: var(--bg-3); color: var(--text-1); }
.kb-modal .kb-btn-pri { background: var(--accent); border-color: transparent; color: var(--accent-fg); }
.kb-modal .kb-btn-pri:hover { background: var(--accent-strong); color: var(--accent-fg); }
.kb-modal .kb-btn-perigo { color: var(--danger); border-color: color-mix(in oklab, var(--danger) 35%, transparent); }
.kb-modal .kb-btn-perigo:hover { background: color-mix(in oklab, var(--danger) 15%, transparent); color: var(--danger); }
.kb-arq-lista { display: flex; flex-direction: column; gap: 8px; }
.kb-arq {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px;
  background: var(--bg-2); border: 1px solid var(--border-subtle); border-radius: var(--r-md, 10px);
}
.kb-arq .ic {
  width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 13px;
  background: color-mix(in oklab, var(--h) 26%, var(--bg-3));
}
.kb-arq b { flex: 1; font-size: 13px; font-weight: 600; }
@media (max-width: 620px) {
  #module-kanban.nv-app .kb-topo-acoes { width: 100%; }
  #module-kanban.nv-app .kb-busca { flex: 1; width: auto; }
}

/* ============================================================
   PLANEJAMENTO — VISÕES (tabela / calendário / matriz)
   Os mesmos cartões noutro formato. Escopo em #module-kanban.
   ============================================================ */
#module-kanban.nv-app .kv-tela[hidden],
#module-kanban.nv-app .kanban-toolbar[hidden],
#module-kanban.nv-app #kanban-board-shell[hidden] { display: none !important; }

/* ---- abas de visão ---- */
#module-kanban.nv-app .kv-barra {
  display: inline-flex; gap: 3px; margin: 0 0 14px;
  background: var(--bg-1); border: 1px solid var(--border-subtle);
  border-radius: 999px; padding: 3px;
}
#module-kanban.nv-app .kv-aba {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: none; color: var(--text-3); border-radius: 999px;
  padding: 6px 13px; cursor: pointer; font: 600 12.5px var(--font-sans); transition: .14s;
}
#module-kanban.nv-app .kv-aba:hover { color: var(--text-1); background: var(--bg-2); }
#module-kanban.nv-app .kv-aba.is-on { background: var(--accent); color: var(--accent-fg); }
#module-kanban.nv-app .kv-aba .ic { font-size: 12px; }

/* ---- topo comum das visões ---- */
#module-kanban.nv-app .kv-topo {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 13px;
}
#module-kanban.nv-app .kv-topo-info {
  margin-left: auto; font: 600 11px var(--font-mono, monospace); color: var(--text-4);
}
#module-kanban.nv-app .kv-nav { display: flex; align-items: center; gap: 8px; }
#module-kanban.nv-app .kv-nav b { font-size: 14px; min-width: 148px; }
#module-kanban.nv-app .kv-btn {
  border: 1px solid var(--border-subtle); background: var(--bg-1); color: var(--text-2);
  border-radius: var(--r-md, 10px); padding: 6px 11px; font: 600 12.5px var(--font-sans); cursor: pointer;
}
#module-kanban.nv-app .kv-btn:hover { background: var(--bg-2); color: var(--text-1); }
#module-kanban.nv-app .kv-segmentado {
  display: inline-flex; gap: 2px; background: var(--bg-1);
  border: 1px solid var(--border-subtle); border-radius: 999px; padding: 3px;
}
#module-kanban.nv-app .kv-segmentado button {
  border: 0; background: none; color: var(--text-3); border-radius: 999px;
  padding: 5px 12px; cursor: pointer; font: 600 12px var(--font-sans); transition: .14s;
}
#module-kanban.nv-app .kv-segmentado button:hover { color: var(--text-1); background: var(--bg-2); }
#module-kanban.nv-app .kv-segmentado button.is-on { background: var(--bg-3); color: var(--text-1); }
#module-kanban.nv-app .kv-aviso {
  margin: 0 0 13px; padding: 10px 13px; border-radius: var(--r-md, 10px);
  background: color-mix(in oklab, var(--info) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--info) 30%, transparent);
  color: var(--text-2); font-size: 12px; line-height: 1.55;
}
#module-kanban.nv-app .kv-aviso b { color: var(--text-1); }

/* ---- pílulas e marcadores ---- */
#module-kanban.nv-app .kv-pill {
  display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 8px;
  font: 600 10.5px var(--font-mono, monospace); white-space: nowrap;
  background: var(--bg-2); color: var(--text-3); border: 1px solid var(--border-subtle);
}
#module-kanban.nv-app .kv-pill.atraso {
  color: var(--danger); background: color-mix(in oklab, var(--danger) 12%, transparent);
  border-color: color-mix(in oklab, var(--danger) 38%, transparent);
}
#module-kanban.nv-app .kv-pill.hoje {
  color: var(--warn); background: color-mix(in oklab, var(--warn) 12%, transparent);
  border-color: color-mix(in oklab, var(--warn) 38%, transparent);
}
#module-kanban.nv-app .kv-pill.longe { color: var(--text-4); }
#module-kanban.nv-app .kv-etq { display: inline-block; width: 22px; height: 5px; border-radius: 99px; background: var(--c); }
#module-kanban.nv-app .kv-lista {
  font: 500 10.5px var(--font-mono, monospace); color: var(--text-4);
  background: var(--bg-3); border-radius: var(--r-sm, 6px); padding: 1px 7px;
}
#module-kanban.nv-app .kv-chk {
  width: 15px; height: 15px; border-radius: 5px; display: inline-block;
  border: 1.5px solid var(--border-strong);
}
#module-kanban.nv-app .kv-chk.on { background: var(--accent); border-color: var(--accent); }
#module-kanban.nv-app .kv-prio-txt { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; }
#module-kanban.nv-app .kv-prio-txt i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }

/* ---- cartão compacto (matriz / sem prazo) ---- */
#module-kanban.nv-app .kv-card {
  position: relative; display: block !important; width: 100%; text-align: left !important;
  background: var(--bg-2); border: 1px solid var(--border-subtle);
  border-radius: var(--r-md, 10px); padding: 9px 10px 9px 12px; margin-bottom: 7px;
  cursor: pointer; font-family: inherit; color: inherit; transition: .14s;
}
#module-kanban.nv-app .kv-card:hover { border-color: var(--border-strong); background: var(--bg-3); }
#module-kanban.nv-app .kv-card .tt {
  display: block; font-size: 12.5px; line-height: 1.35; color: var(--text-1); margin-bottom: 6px;
}
#module-kanban.nv-app .kv-card .meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
#module-kanban.nv-app .kv-prio {
  position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 99px; background: var(--c);
}

/* ---- tabela ---- */
#module-kanban.nv-app .kv-tabela-wrap {
  overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--r-lg, 14px);
}
#module-kanban.nv-app table.kv-tabela {
  width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 700px; background: transparent;
}
#module-kanban.nv-app table.kv-tabela th {
  text-align: left; padding: 10px 13px; font: 700 10.5px var(--font-mono, monospace) !important;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-4) !important;
  background: var(--bg-1) !important; border-bottom: 1px solid var(--border-soft) !important; white-space: nowrap;
}
#module-kanban.nv-app table.kv-tabela td {
  padding: 10px 13px; border-bottom: 1px solid var(--border-subtle);
  color: var(--text-2); vertical-align: middle; background: transparent;
}
#module-kanban.nv-app table.kv-tabela tbody tr:last-child td { border-bottom: 0; }
#module-kanban.nv-app table.kv-tabela tbody tr[data-card] { cursor: pointer; }
#module-kanban.nv-app table.kv-tabela tbody tr[data-card]:hover td { background: var(--bg-1); }
#module-kanban.nv-app table.kv-tabela .nome { color: var(--text-1); font-weight: 500; }
#module-kanban.nv-app table.kv-tabela .etqs { display: table-cell; }
#module-kanban.nv-app table.kv-tabela .etqs .kv-etq { margin-right: 3px; }
#module-kanban.nv-app table.kv-tabela tr.grupo td {
  background: var(--bg-1); font: 700 10.5px var(--font-mono, monospace);
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); padding: 7px 13px;
}

/* ---- calendário ---- */
#module-kanban.nv-app .kv-cal-sem {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px;
}
#module-kanban.nv-app .kv-cal-sem span {
  font: 700 10px var(--font-mono, monospace); letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-4); text-align: center;
}
#module-kanban.nv-app .kv-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
#module-kanban.nv-app .kv-dia {
  min-height: 96px; background: var(--bg-1); border: 1px solid var(--border-subtle);
  border-radius: var(--r-md, 10px); padding: 7px;
}
#module-kanban.nv-app .kv-dia.fora { opacity: .38; }
#module-kanban.nv-app .kv-dia.hoje { border-color: var(--accent); background: var(--accent-soft); }
#module-kanban.nv-app .kv-dia .n {
  display: block; margin-bottom: 5px; font: 600 11px var(--font-mono, monospace); color: var(--text-4);
}
#module-kanban.nv-app .kv-dia.hoje .n { color: var(--accent); }
#module-kanban.nv-app .kv-ev {
  display: block !important; width: 100%; text-align: left !important;
  font-size: 10.5px; line-height: 1.3; padding: 3px 6px; margin-bottom: 4px;
  border-radius: 6px; cursor: pointer; font-family: inherit;
  background: var(--bg-3); color: var(--text-2);
  border: 0; border-left: 3px solid var(--c, var(--border-strong));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#module-kanban.nv-app .kv-ev:hover { background: var(--bg-2); color: var(--text-1); }
#module-kanban.nv-app .kv-ev.atraso {
  background: color-mix(in oklab, var(--danger) 14%, transparent); color: oklch(0.86 0.08 27);
}
#module-kanban.nv-app .kv-sem-prazo {
  margin-top: 16px; border: 1px solid var(--border-subtle); border-radius: var(--r-lg, 14px);
  background: var(--bg-1); padding: 12px 15px;
}
#module-kanban.nv-app .kv-sem-prazo summary {
  cursor: pointer; font: 600 12px var(--font-sans); color: var(--text-3); list-style: none;
}
#module-kanban.nv-app .kv-sem-prazo summary::before { content: "▸ "; color: var(--text-4); }
#module-kanban.nv-app .kv-sem-prazo[open] summary::before { content: "▾ "; }
#module-kanban.nv-app .kv-sem-prazo summary:hover { color: var(--text-1); }
#module-kanban.nv-app .kv-sem-prazo-lista {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 12px;
}

/* ---- matriz ---- */
#module-kanban.nv-app .kv-matriz { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
#module-kanban.nv-app .kv-quad {
  background: var(--bg-1); border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg, 14px); padding: 14px; min-height: 172px;
}
#module-kanban.nv-app .kv-quad.q-faca { border-color: color-mix(in oklab, var(--danger) 34%, transparent); }
#module-kanban.nv-app .kv-quad.q-agende { border-color: color-mix(in oklab, var(--accent) 34%, transparent); }
#module-kanban.nv-app .kv-quad-tt {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 11px;
  background: none; border: 0; padding: 0;
}
#module-kanban.nv-app .kv-quad-tt b { font-size: 13px; color: var(--text-1); }
#module-kanban.nv-app .kv-quad-tt span { font: 600 10.5px var(--font-mono, monospace); color: var(--text-4); }
#module-kanban.nv-app .kv-quad-tt .rot {
  margin-left: auto; font: 700 9.5px var(--font-mono, monospace);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-4);
}
#module-kanban.nv-app .kv-quad.q-faca .rot { color: var(--danger); }
#module-kanban.nv-app .kv-quad.q-agende .rot { color: var(--accent); }
#module-kanban.nv-app .kv-quad-vazio { margin: 0; font-size: 11.5px; color: var(--text-4); }

/* ---- vazio que explica ---- */
#module-kanban.nv-app .kv-vazio {
  text-align: center; padding: 48px 20px; border: 1px dashed var(--border-soft);
  border-radius: var(--r-xl, 20px); background: var(--bg-1);
}
#module-kanban.nv-app .kv-vazio .ic { display: block; font-size: 28px; margin-bottom: 12px; color: var(--text-4); }
#module-kanban.nv-app .kv-vazio b { display: block; font-size: 15px; margin-bottom: 6px; color: var(--text-1); }
#module-kanban.nv-app .kv-vazio p { margin: 0 auto; max-width: 48ch; font-size: 12.5px; color: var(--text-3); line-height: 1.6; }

@media (max-width: 760px) {
  #module-kanban.nv-app .kv-matriz { grid-template-columns: 1fr; }
  #module-kanban.nv-app .kv-dia { min-height: 68px; }
}

/* ============================================================
   PLANEJAMENTO — MINHA SEMANA (atravessa todos os quadros)
   ============================================================ */
#module-kanban.nv-app .km-abas[hidden],
#module-kanban.nv-app .km-semana[hidden] { display: none !important; }

/* abas do módulo: Quadros | Minha semana */
#module-kanban.nv-app .km-abas {
  display: inline-flex; gap: 3px; margin: 2px 0 18px;
  background: var(--bg-1); border: 1px solid var(--border-subtle);
  border-radius: 999px; padding: 3px;
}
#module-kanban.nv-app .km-aba {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; background: none; color: var(--text-3); border-radius: 999px;
  padding: 7px 15px; cursor: pointer; font: 600 13px var(--font-sans); transition: .14s;
}
#module-kanban.nv-app .km-aba:hover { color: var(--text-1); background: var(--bg-2); }
#module-kanban.nv-app .km-aba.is-on { background: var(--accent); color: var(--accent-fg); }
#module-kanban.nv-app .km-badge {
  font: 700 10px var(--font-mono, monospace); background: var(--danger); color: #fff;
  border-radius: 999px; padding: 1px 6px; line-height: 1.5;
}
#module-kanban.nv-app .km-badge[hidden] { display: none !important; }
#module-kanban.nv-app .km-aba.is-on .km-badge { background: oklch(0.16 0.04 152 / .3); color: var(--accent-fg); }

/* topo: janela de 7/14 dias + resumo */
#module-kanban.nv-app .ks-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
#module-kanban.nv-app .ks-janela {
  display: inline-flex; gap: 2px; background: var(--bg-1);
  border: 1px solid var(--border-subtle); border-radius: 999px; padding: 3px;
}
#module-kanban.nv-app .ks-janela button {
  border: 0; background: none; color: var(--text-3); border-radius: 999px;
  padding: 5px 13px; cursor: pointer; font: 600 12px var(--font-sans); transition: .14s;
}
#module-kanban.nv-app .ks-janela button:hover { color: var(--text-1); background: var(--bg-2); }
#module-kanban.nv-app .ks-janela button.is-on { background: var(--bg-3); color: var(--text-1); }

#module-kanban.nv-app .ks-resumo { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
#module-kanban.nv-app .ks-stat {
  flex: 1; min-width: 130px; background: var(--bg-1);
  border: 1px solid var(--border-subtle); border-radius: var(--r-lg, 14px); padding: 13px 15px;
}
#module-kanban.nv-app .ks-stat.alerta {
  border-color: color-mix(in oklab, var(--danger) 35%, transparent);
  background: color-mix(in oklab, var(--danger) 8%, var(--bg-1));
}
#module-kanban.nv-app .ks-stat b {
  display: block; font: 700 22px var(--font-mono, monospace);
  letter-spacing: -0.02em; margin-bottom: 2px; color: var(--text-1);
}
#module-kanban.nv-app .ks-stat.alerta b { color: var(--danger); }
#module-kanban.nv-app .ks-stat span { font-size: 11.5px; color: var(--text-4); }

/* grupos por dia */
#module-kanban.nv-app .ks-dia { margin-bottom: 22px; }
#module-kanban.nv-app .ks-dia-tt { display: flex; align-items: baseline; gap: 9px; margin-bottom: 10px; }
#module-kanban.nv-app .ks-dia-tt b { font-size: 14px; letter-spacing: -0.01em; color: var(--text-1); }
#module-kanban.nv-app .ks-dia-tt .data {
  font: 600 10.5px var(--font-mono, monospace); color: var(--text-4);
  text-transform: uppercase; letter-spacing: .08em;
}
#module-kanban.nv-app .ks-dia-tt .n { margin-left: auto; font: 600 10.5px var(--font-mono, monospace); color: var(--text-4); }
#module-kanban.nv-app .ks-dia.atrasado .ks-dia-tt b { color: var(--danger); }
#module-kanban.nv-app .ks-dia.hoje .ks-dia-tt b { color: var(--accent); }

/* a linha */
#module-kanban.nv-app .ks-linha {
  display: flex; align-items: center; gap: 11px;
  background: var(--bg-1); border: 1px solid var(--border-subtle);
  border-radius: var(--r-md, 10px); padding: 9px 13px; margin-bottom: 6px; transition: .14s;
}
#module-kanban.nv-app .ks-linha:hover { background: var(--bg-2); border-color: var(--border-strong); }
#module-kanban.nv-app .ks-dia.atrasado .ks-linha { border-left: 3px solid var(--danger); }
#module-kanban.nv-app .ks-dia.hoje .ks-linha { border-left: 3px solid var(--accent); }
#module-kanban.nv-app .ks-chk {
  flex: 0 0 auto; width: 17px; height: 17px; padding: 0; border-radius: 5px; cursor: pointer;
  background: transparent; border: 1.5px solid var(--border-strong); transition: .14s;
}
#module-kanban.nv-app .ks-chk:hover { border-color: var(--accent); background: var(--accent-soft); }
#module-kanban.nv-app .ks-prio { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
#module-kanban.nv-app .ks-tt {
  /* display:block obrigatório: o <button> global do app é flex com
     justify-content:center, e aí o text-align não tem efeito nenhum. */
  display: block !important; flex: 1; min-width: 0;
  text-align: left !important; background: none; border: 0; padding: 0;
  font: 400 13px var(--font-sans); color: var(--text-1); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#module-kanban.nv-app .ks-tt:hover { color: var(--accent); }
#module-kanban.nv-app .ks-etq { flex: 0 0 auto; width: 20px; height: 5px; border-radius: 99px; background: var(--c); }
/* a origem — de que quadro veio. Sem isso, lista misturada vira ruído. */
#module-kanban.nv-app .ks-origem {
  flex: 0 0 auto; display: inline-flex !important; align-items: center; gap: 6px; cursor: pointer;
  font: 600 11px var(--font-sans); color: var(--text-3);
  background: var(--bg-2); border: 1px solid var(--border-subtle);
  border-radius: 999px; padding: 3px 11px 3px 5px; transition: .14s;
}
#module-kanban.nv-app .ks-origem:hover { color: var(--text-1); border-color: var(--border-strong); }
#module-kanban.nv-app .ks-origem .pt {
  width: 17px; height: 17px; border-radius: 5px; display: grid; place-items: center; font-size: 9px;
  background: linear-gradient(145deg,
    color-mix(in oklab, var(--h) 80%, oklch(0.2 0.01 250)),
    color-mix(in oklab, var(--h) 34%, oklch(0.17 0.01 250)));
}

#module-kanban.nv-app .ks-depois {
  margin-top: 6px; border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg, 14px); background: var(--bg-1); padding: 13px 16px;
}
#module-kanban.nv-app .ks-depois summary {
  cursor: pointer; font: 600 12.5px var(--font-sans); color: var(--text-3); list-style: none;
}
#module-kanban.nv-app .ks-depois summary::before { content: "▸ "; color: var(--text-4); }
#module-kanban.nv-app .ks-depois[open] summary::before { content: "▾ "; }
#module-kanban.nv-app .ks-depois summary:hover { color: var(--text-1); }
#module-kanban.nv-app .ks-depois .ks-lista { margin-top: 12px; }

#module-kanban.nv-app .ks-vazio {
  text-align: center; padding: 46px 20px; border: 1px dashed var(--border-soft);
  border-radius: var(--r-xl, 20px); background: var(--bg-1);
}
#module-kanban.nv-app .ks-vazio .ic { display: block; font-size: 28px; margin-bottom: 12px; }
#module-kanban.nv-app .ks-vazio b { display: block; font-size: 15px; margin-bottom: 6px; color: var(--text-1); }
#module-kanban.nv-app .ks-vazio p { margin: 0 auto; max-width: 48ch; font-size: 12.5px; color: var(--text-3); line-height: 1.6; }

@media (max-width: 640px) { #module-kanban.nv-app .ks-origem .nm { display: none; } }

/* ---- visão Linha do tempo ---- */
#module-kanban.nv-app .kv-tl {
  border: 1px solid var(--border-subtle); border-radius: var(--r-lg, 14px);
  overflow: hidden; background: var(--bg-1);
}
#module-kanban.nv-app .kv-tl-regua {
  display: grid; grid-template-columns: 210px 1fr;
  background: var(--bg-2); border-bottom: 1px solid var(--border-soft);
}
#module-kanban.nv-app .kv-tl-regua .lbl {
  padding: 9px 13px; font: 700 10px var(--font-mono, monospace);
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-4);
}
#module-kanban.nv-app .kv-tl-regua .pista { position: relative; }
#module-kanban.nv-app .kv-tl-regua .pista span {
  position: absolute; top: 9px; transform: translateX(-50%);
  font: 700 10px var(--font-mono, monospace); letter-spacing: .06em;
  color: var(--text-4); white-space: nowrap;
}
#module-kanban.nv-app .kv-tl-linha {
  display: grid; grid-template-columns: 210px 1fr;
  border-bottom: 1px solid var(--border-subtle); transition: .14s;
}
#module-kanban.nv-app .kv-tl-linha:last-child { border-bottom: 0; }
#module-kanban.nv-app .kv-tl-linha:hover { background: var(--bg-2); }
#module-kanban.nv-app .kv-tl-linha.fora { opacity: .45; }
#module-kanban.nv-app .kv-tl-nome {
  display: block !important; text-align: left !important;
  padding: 11px 13px; background: none; border: 0; cursor: pointer;
  font: 400 12.5px var(--font-sans); color: var(--text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#module-kanban.nv-app .kv-tl-nome:hover { color: var(--accent); }
#module-kanban.nv-app .kv-tl-pista { position: relative; min-height: 40px; }
#module-kanban.nv-app .kv-tl-pista .grade {
  position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border-subtle);
}
#module-kanban.nv-app .kv-tl-pista .hoje {
  position: absolute; top: 0; bottom: 0; width: 2px; z-index: 1;
  background: color-mix(in oklab, var(--accent) 65%, transparent);
}
/* barra = cartão com início e prazo.
   Prefixo kv-tl-* de propósito: ".kv-barra" já era a classe da BARRA DE ABAS
   (#kanban-visoes-barra), e o estilo do gantt vazava nela. */
#module-kanban.nv-app .kv-tl-barra {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  left: var(--x); width: var(--w); height: 20px; border-radius: 999px;
  background: color-mix(in oklab, var(--c, var(--accent)) 42%, var(--bg-2));
  border: 1px solid color-mix(in oklab, var(--c, var(--accent)) 75%, transparent);
}
#module-kanban.nv-app .kv-tl-barra.atraso {
  background: color-mix(in oklab, var(--danger) 30%, var(--bg-2));
  border-color: color-mix(in oklab, var(--danger) 70%, transparent);
}
/* marco = só prazo, sem início */
#module-kanban.nv-app .kv-tl-marco {
  position: absolute; top: 50%; left: var(--x); z-index: 2;
  width: 13px; height: 13px; margin-left: -6.5px;
  transform: translateY(-50%) rotate(45deg); border-radius: 3px;
  background: color-mix(in oklab, var(--c, var(--accent)) 55%, var(--bg-2));
  border: 1.5px solid color-mix(in oklab, var(--c, var(--accent)) 85%, transparent);
}
#module-kanban.nv-app .kv-tl-marco.atraso {
  background: color-mix(in oklab, var(--danger) 40%, var(--bg-2));
  border-color: var(--danger);
}
#module-kanban.nv-app .kv-tl-nota {
  margin: 12px 0 0; font-size: 11.5px; color: var(--text-4); line-height: 1.55;
}
#module-kanban.nv-app .kv-tl-nota b { color: var(--text-3); }
@media (max-width: 760px) {
  #module-kanban.nv-app .kv-tl-regua,
  #module-kanban.nv-app .kv-tl-linha { grid-template-columns: 130px 1fr; }
}