/* Small overrides on top of the generated Tailwind utilities. */

:root {
  --eco-dur-press: 120ms;
  --eco-dur-fill: 240ms;
  --eco-dur-sheet: 400ms;
  --eco-dur-sheet-out: 200ms;
  --eco-dur-toast: 240ms;
  --eco-dur-toast-out: 120ms;
  --eco-dur-loading: 1000ms;
  --eco-ease-in: cubic-bezier(.2, .8, .2, 1);
  --eco-ease-out: cubic-bezier(.4, 0, 1, 1);
}

.ff-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.125em;
}

/* O shell não deve virar uma área de rolagem horizontal só porque uma tela longa contém uma
   coluna flexível ou uma sombra decorativa. Componentes que realmente precisam de largura extra
   (tabelas) continuam com seu próprio wrapper de rolagem. */
html, body { max-width: 100%; overflow-x: hidden; }
body.more-open { overflow-y: hidden; }

/* ---------------------------------------------------------------------------
   A barra inferior do telefone. `env(safe-area-inset-bottom)` é o que impede a
   barra de ficar debaixo da faixa do iPhone — e o app é instalável (D72), então
   ele roda em tela cheia, onde essa faixa existe de verdade.
   --------------------------------------------------------------------------- */
.tabbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 30;
  display: none;
  border-top: 1px solid var(--eco-line);
  background: color-mix(in srgb, var(--eco-surface-raised) 96%, transparent);
  backdrop-filter: blur(8px);
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-link {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--eco-ink-muted);
}
.tab-link.active { color: var(--eco-cobalt); box-shadow: inset 0 2px 0 var(--eco-cobalt); }

/* O espaço que a barra ocupa, devolvido ao conteúdo: sem isto o rodapé e o último
   botão de cada tela ficam embaixo dela. */
@media (max-width: 767px) {
  .tabbar { display: flex; }
  body { padding-bottom: calc(52px + env(safe-area-inset-bottom)); }
}

.more-sheet { position: fixed; inset: 0; z-index: 40; opacity: 1; transition: opacity var(--eco-dur-fill) var(--eco-ease-out); }
.more-sheet[hidden] { display: block; visibility: hidden; pointer-events: none; opacity: 0; }
.more-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--eco-ink) 40%, transparent); opacity: 1; transition: opacity var(--eco-dur-fill) var(--eco-ease-out); }
.more-sheet[hidden] .more-backdrop { opacity: 0; }
.more-panel {
  position: absolute;
  inset: auto 0 0 0;
  border-radius: 1rem 1rem 0 0;
  background: var(--eco-surface-raised);
  padding: 1.25rem 1rem calc(1.25rem + 52px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 30px -12px color-mix(in srgb, var(--eco-ink) 35%, transparent);
  overscroll-behavior: contain;
  transform: translateY(0);
  transition: transform var(--eco-dur-sheet) var(--eco-ease-in);
}
.more-sheet[hidden] .more-panel { transform: translateY(100%); transition-duration: var(--eco-dur-sheet-out); transition-timing-function: var(--eco-ease-out); }
.more-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; }
.more-panel-head h2 { margin: 0; color: var(--ff-ink); }
.more-close { display: grid; width: 2.75rem; height: 2.75rem; flex: none; place-items: center; border: 1px solid var(--ff-line); border-radius: 999px; background: var(--ff-panel); color: var(--ff-muted); cursor: pointer; font-size: 1.35rem; line-height: 1; }
.more-close:hover, .more-close:focus-visible { border-color: var(--eco-cobalt); background: var(--ff-accent-soft); color: var(--ff-accent); outline: none; }
.more-account { margin-bottom: 0.85rem; }
.more-search { display: block; margin-bottom: 0.85rem; }
.more-search input { width: 100%; border: 1px solid var(--eco-line); border-radius: 0.75rem; background: var(--eco-surface-raised); padding: 0.7rem 0.8rem; color: var(--eco-ink); font-size: 0.85rem; }
.more-search input::placeholder { color: var(--eco-ink-muted); }
.more-search input:focus { border-color: var(--eco-cobalt); outline: 2px solid var(--eco-cobalt-soft); outline-offset: 1px; }
.more-account-link { display: flex; min-height: 2.75rem; align-items: center; border-radius: 0.75rem; background: var(--eco-cobalt-soft); padding: 0.6rem 0.75rem; color: var(--eco-cobalt); font-weight: 700; }

.toast-stack { bottom: 1rem; }
@media (max-width: 767px) {
  .toast-stack { bottom: calc(1rem + 52px + env(safe-area-inset-bottom)); }
}

.ff-skeleton {
  display: grid;
  gap: 0.75rem;
  overflow: hidden;
}
.ff-skeleton-line {
  display: block;
  height: 0.8rem;
  border-radius: 999px;
  background: var(--eco-line);
  animation: ff-shimmer var(--eco-dur-loading) ease-in-out infinite;
}
.ff-skeleton-title { width: 35%; height: 1.2rem; }
.ff-skeleton-wide { width: 92%; }
.ff-skeleton-medium { width: 68%; }
.ff-skeleton-short { width: 48%; }
@keyframes ff-shimmer {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.ui-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: color-mix(in srgb, var(--eco-ink) 55%, transparent);
}
.ui-dialog {
  width: min(100%, 32rem);
  max-height: min(90vh, 42rem);
  overflow: auto;
  border: 1px solid var(--eco-line);
  border-radius: 1rem;
  background: var(--eco-surface-raised);
  box-shadow: 0 20px 50px -20px color-mix(in srgb, var(--eco-ink) 45%, transparent);
}
.ui-dialog-panel { padding: 1.25rem; }
.source-capture-dialog { width: min(100%, 48rem); max-height: min(92vh, 52rem); }
.source-capture-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.source-capture-head h2 { margin-top: 0.2rem; color: var(--ff-ink); font-size: 1.1rem; font-weight: 850; letter-spacing: -0.03em; }
.source-capture-head p:not(.eyebrow) { margin-top: 0.25rem; color: var(--ff-muted); font-size: 0.72rem; }
.source-capture-status { flex: none; border-radius: 999px; background: var(--ff-accent-soft); padding: 0.25rem 0.5rem; color: var(--eco-cobalt); font-size: 0.62rem; font-weight: 800; }
.source-capture-phase { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 1rem; border: 1px solid var(--ff-line); border-radius: 0.75rem; background: color-mix(in srgb, var(--eco-surface-sunken) 80%, transparent); padding: 0.65rem 0.75rem; color: var(--ff-muted); font-size: 0.72rem; line-height: 1.4; }
.source-capture-dot { width: 0.55rem; height: 0.55rem; flex: none; margin-top: 0.18rem; border-radius: 999px; background: var(--eco-ink-muted); }
.source-capture-dot.is-active { background: var(--eco-danger); box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--eco-danger) 14%, transparent); }
.source-capture-dot.is-complete { background: var(--eco-success); }
.source-capture-dot.is-error { background: var(--eco-danger); }
.source-capture-time { margin: 0.85rem 0 0.35rem; color: var(--ff-ink); font-size: 1.65rem; font-variant-numeric: tabular-nums; font-weight: 850; letter-spacing: -0.05em; text-align: center; }
.source-capture-transcript, .source-capture-review { margin-top: 0.8rem; border: 1px solid var(--ff-line); border-radius: 0.8rem; padding: 0.75rem; }
.source-capture-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.source-capture-section-head h3 { color: var(--ff-ink); font-size: 0.78rem; font-weight: 800; }
.source-capture-section-head p, .source-capture-section-head span, .source-capture-transcript-note, .source-capture-review-note { color: var(--ff-muted); font-size: 0.65rem; line-height: 1.4; }
.source-capture-transcript textarea { display: block; width: 100%; min-height: 9rem; max-height: 18rem; resize: vertical; margin-top: 0.55rem; border: 1px solid var(--ff-line); border-radius: 0.65rem; background: var(--ff-panel); padding: 0.7rem; color: var(--ff-ink); font-size: 0.75rem; line-height: 1.5; }
.source-capture-transcript textarea::placeholder { color: var(--ff-muted); opacity: 0.8; }
.source-capture-findings { display: grid; gap: 0.45rem; max-height: 15rem; overflow-y: auto; margin-top: 0.65rem; padding: 0; list-style: none; }
.source-capture-finding { border-radius: 0.65rem; background: var(--eco-surface-sunken); padding: 0.6rem; }
.source-capture-finding label { display: flex; align-items: flex-start; gap: 0.5rem; }
.source-capture-finding input { flex: none; margin-top: 0.18rem; accent-color: var(--eco-cobalt); }
.source-capture-finding b { color: var(--ff-ink); font-size: 0.72rem; }
.source-capture-empty { color: var(--ff-muted); font-size: 0.72rem; }
.source-capture-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1rem; border-top: 1px solid var(--ff-line); padding-top: 0.85rem; }
.source-capture-cost { color: var(--ff-muted); font-size: 0.65rem; line-height: 1.4; }
.source-capture-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.45rem; }
.source-capture-dialog [hidden] { display: none; }
.bring-capture-dialog { display: flex; flex-direction: column; max-height: min(92dvh, 52rem); overflow: hidden; }
.bring-capture-dialog .ui-dialog-panel { display: flex; min-height: 0; max-height: min(92dvh, 52rem); box-sizing: border-box; flex-direction: column; padding: 0; overflow: hidden; }
.bring-capture-body { display: grid; min-height: 0; gap: var(--eco-space-3); padding: var(--eco-space-6); overflow-y: auto; }
.bring-capture-dialog .source-capture-head h2 { font-family: var(--eco-font-display); font-size: 1.75rem; font-weight: 700; }
.bring-capture-meta { display: flex; max-width: 13rem; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--eco-space-2); text-align: right; }
.bring-capture-meta small { color: var(--eco-danger); font-size: 0.7rem; line-height: 1.25; }
.bring-capture-meta .source-capture-time { margin: 0; font-family: var(--eco-font-mono); font-size: 1.2rem; font-weight: 600; }
.bring-capture-config { display: grid; gap: var(--eco-space-3); }
.bring-capture-config .source-capture-name { margin: 0; }
.bring-capture-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--eco-space-3); }
.bring-capture-config select { width: 100%; min-height: var(--eco-size-touch); border: 1px solid var(--eco-line-strong); border-radius: var(--eco-radius-md); background: var(--eco-surface-raised); padding: 0 var(--eco-space-3); color: var(--eco-ink); font: inherit; font-weight: 400; }
.bring-capture-cost { margin: 0; color: var(--eco-ink-muted); font-size: 0.9rem; line-height: 1.45; }
.bring-capture-silence { display: flex; align-items: flex-start; gap: var(--eco-space-3); border-radius: var(--eco-radius-md); background: var(--eco-surface-sunken); padding: var(--eco-space-3); color: var(--eco-ink); font-size: 0.94rem; }
.bring-capture-silence input { width: 1.25rem; height: 1.25rem; flex: none; accent-color: var(--eco-cobalt); }
.bring-capture-silence span { display: grid; gap: var(--eco-space-1); }
.bring-capture-silence small { color: var(--eco-ink-muted); font-size: 0.83rem; line-height: 1.45; }
.bring-capture-dialog .source-capture-transcript { margin: 0; }
.bring-capture-dialog .source-capture-transcript textarea { min-height: 7rem; max-height: 14rem; font-size: 0.94rem; }
.bring-capture-dialog .source-capture-actions { flex: none; margin: 0; background: var(--eco-surface-raised); padding: var(--eco-space-3) var(--eco-space-6); }
.bring-capture-dialog .source-capture-buttons { width: 100%; justify-content: space-between; }
.bring-capture-dialog .source-capture-buttons .btn { min-height: var(--eco-size-action); border-radius: var(--eco-radius-pill); }
@media (max-width: 767px) {
  .bring-capture-body { padding: var(--eco-space-4); }
  .bring-capture-fields { grid-template-columns: 1fr; }
  .bring-capture-dialog .source-capture-head { display: flex; }
  .bring-capture-dialog .source-capture-actions { padding: var(--eco-space-3) var(--eco-space-4); }
}
.btn-secondary { background: var(--eco-surface-sunken); color: var(--eco-ink); }
.btn-secondary:hover:not(:disabled) { background: var(--eco-line); }

/* Tutoriais por rota: o recorte mantém o elemento em foco legível sem tornar o guia um modal
   que bloqueia a página inteira. O painel é a única parte clicável desta camada. */
.tutorial-layer { position: fixed; inset: 0; z-index: 70; overflow: hidden; pointer-events: auto; }
.tutorial-spotlight {
  position: fixed;
  border: 0;
  border-radius: 0.85rem;
  box-shadow: 0 0 0 9999px color-mix(in srgb, var(--eco-ink) 76%, transparent), 0 0 0 0.3rem color-mix(in srgb, var(--eco-cobalt) 20%, transparent);
  pointer-events: none;
  transition: left var(--eco-dur-fill) var(--eco-ease-in), top var(--eco-dur-fill) var(--eco-ease-in), width var(--eco-dur-fill) var(--eco-ease-in), height var(--eco-dur-fill) var(--eco-ease-in);
}
.tutorial-target-active { outline: 3px solid var(--eco-cobalt); outline-offset: 4px; }
.tutorial-panel {
  position: fixed;
  width: min(23rem, calc(100vw - 2rem));
  max-height: min(80vh, 32rem);
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--eco-cobalt) 70%, transparent);
  border-radius: 1rem;
  background: var(--eco-surface-raised);
  color: var(--eco-ink);
  padding: 1rem;
  box-shadow: 0 24px 60px -24px color-mix(in srgb, var(--eco-ink) 72%, transparent);
  pointer-events: auto;
  transition: opacity var(--eco-dur-fill) var(--eco-ease-in);
}
.tutorial-panel-head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.tutorial-kicker, .tutorial-step-count { color: var(--eco-cobalt); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; }
.tutorial-close { display: grid; width: 44px; height: 44px; flex: none; place-items: center; border-radius: 0.55rem; color: var(--eco-ink-muted); font-size: 1.35rem; }
.tutorial-close:hover { background: var(--eco-surface-sunken); color: var(--eco-ink); }
.tutorial-progress { height: 0.3rem; margin-top: 0.9rem; overflow: hidden; border-radius: 999px; background: var(--eco-surface-sunken); }
.tutorial-progress span { display: block; height: 100%; border-radius: inherit; background: var(--eco-cobalt); transition: width var(--eco-dur-fill) var(--eco-ease-in); }
.tutorial-step-count { margin-top: 0.8rem; color: var(--eco-ink-muted); font-size: 0.62rem; letter-spacing: 0.05em; }
.tutorial-panel h2 { margin-top: 0.4rem; color: var(--eco-ink); font-size: 1.1rem; font-weight: 800; }
.tutorial-panel > p:not(.tutorial-step-count) { margin-top: 0.55rem; color: var(--eco-ink-muted); font-size: 0.95rem; line-height: 1.55; }
.tutorial-panel-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1.1rem; }
.tutorial-skip { min-height: 44px; color: var(--eco-ink-muted); font-size: 0.75rem; }
.tutorial-skip:hover { color: var(--eco-ink); }
.tutorial-nav-actions { display: flex; align-items: center; gap: 0.5rem; }
.tutorial-panel .btn-ghost { background: transparent; color: var(--eco-ink); }
.tutorial-panel .btn-ghost:hover:not(:disabled) { background: var(--eco-surface-sunken); }
@media (max-width: 767px) {
  .tutorial-panel { width: calc(100vw - 1.5rem); max-height: min(70vh, 28rem); }
  .tutorial-panel-actions { align-items: end; }
}
@media (prefers-reduced-motion: reduce) {
  .tutorial-spotlight, .tutorial-progress span { transition: none; }
}

.card {
  border-radius: 1rem;
  border: 1px solid var(--eco-line);
  background: var(--eco-surface-raised);
  padding: 1.25rem;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--eco-ink) 4%, transparent);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.625rem;
  padding: 0.5rem 1rem;
  font-weight: 600;
  font-size: 0.875rem;
  transition: background-color 120ms, opacity 120ms;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--eco-cobalt); color: var(--eco-on-cobalt); }
.btn-primary:hover:not(:disabled) { background: var(--eco-cobalt); }
.btn-ghost { background: var(--eco-surface-sunken); color: var(--eco-ink); }
.btn-ghost:hover:not(:disabled) { background: var(--eco-line); }

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.prose-pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Alvos de toque. Medidos: campo 30 px, aba 32 px, botão 37 px — contra os 44 px
   confortáveis. O desenho não engorda: só cresce a área que recebe o dedo, e só
   onde há dedo. `pointer: coarse` deixa o desktop exatamente como está.
   A lista de cards é o pior caso do app — "Gerenciar" de 37 px repetido 351
   vezes, com 5 px entre linhas. */
@media (pointer: coarse) {
  .btn, .nav-link, .theme-toggle { min-height: 44px; }
  input:not([type='checkbox']):not([type='radio']), select, textarea { min-height: 44px; }
  /* Para o botão que é só texto — "🔊 ouvir", "↻" —, onde crescer a altura mexeria no
     alinhamento da linha inteira: a margem negativa devolve ao desenho os 28 px que a área
     de toque ganhou. O dedo acerta 44 px; a tela não muda um pixel. */
  .tap {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: -14px;
  }
}

.record-btn {
  width: auto;
  min-width: var(--eco-size-action);
  min-height: var(--eco-size-action);
  border-radius: 999px;
  font-weight: 700;
  color: var(--eco-on-amber);
  background: var(--eco-amber);
  padding: var(--eco-space-3) var(--eco-space-4);
  box-shadow: 0 10px 25px -10px color-mix(in srgb, var(--eco-amber) 70%, transparent);
  transition: transform var(--eco-dur-press) var(--eco-ease-in), background-color var(--eco-dur-fill) var(--eco-ease-in);
}
.record-btn:active { transform: scale(0.97); }
.record-btn.recording { background: var(--eco-danger); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* D110: edição do acervo, idioma da captura, desbloqueio legível e carteira separada. */
.library-audio-language { display: grid; max-width: 19rem; gap: 0.3rem; color: var(--ff-muted); font-size: 0.68rem; font-weight: 750; }
.library-audio-language select { width: 100%; }
.library-source-edit { margin-top: 0.75rem; border-top: 1px solid var(--ff-line); padding-top: 0.65rem; }
.library-source-edit > summary { cursor: pointer; color: var(--eco-cobalt); font-size: 0.68rem; font-weight: 750; }
.library-source-edit form { display: grid; gap: 0.65rem; margin-top: 0.65rem; }
.library-source-edit label { display: grid; gap: 0.3rem; color: var(--ff-muted); font-size: 0.68rem; font-weight: 750; }
.library-edit-note { color: var(--ff-muted); font-size: 0.66rem; line-height: 1.45; }
.library-edit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; }
.library-edit-actions span { color: var(--ff-muted); font-size: 0.66rem; }
.track-module-lock { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: start; gap: 0.65rem; margin-bottom: 0.75rem; border: 1px solid var(--eco-cobalt-soft); border-radius: 0.75rem; background: color-mix(in srgb, var(--eco-cobalt-soft) 72%, transparent); padding: 0.7rem; }
.track-module-lock-icon { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 0.6rem; background: var(--ff-accent-soft); color: var(--eco-cobalt); }
.track-module-lock-copy { min-width: 0; }
.track-module-lock-copy b { color: var(--ff-ink); font-size: 0.73rem; }
.track-module-lock-copy p { margin-top: 0.2rem; color: var(--ff-muted); font-size: 0.65rem; line-height: 1.45; }
.track-module-lock-copy .track-module-lock-blockers { color: var(--eco-danger); }
.track-force-button { min-height: 2.3rem; white-space: nowrap; }
.account-shortcuts { margin-bottom: 1rem; }
.account-section-head h2, .credits-section-head h2, .credits-summary h2, .credits-buy h2, .credits-history h2 { margin-top: 0.2rem; color: var(--ff-ink); font-size: 1rem; font-weight: 800; }
.account-link-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem; margin-top: 0.9rem; }
.credits-purchase-notice { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.55rem; border-color: var(--eco-cobalt); background: color-mix(in srgb, var(--eco-cobalt-soft) 72%, transparent); }
.credits-purchase-notice strong { color: var(--ff-ink); font-size: 0.78rem; }
.credits-purchase-notice span { color: var(--ff-muted); font-size: 0.7rem; }
.credits-purchase-notice-success { border-color: var(--eco-success-soft); background: var(--eco-success-soft); }
.credits-purchase-notice-reconciling { border-color: var(--eco-amber); background: var(--eco-amber-soft); }
.credits-purchase-notice-error { border-color: var(--eco-danger-soft); background: var(--eco-danger-soft); }
.credits-purchase-notice a { margin-left: auto; color: var(--eco-cobalt); font-size: 0.68rem; font-weight: 800; text-decoration: underline; }
.credits-action-status { min-height: 1.25rem; margin-top: 0.7rem; color: var(--ff-muted); font-size: 0.7rem; line-height: 1.45; }
.credits-package[data-paid-state="processing"], .credits-single-form button[data-paid-state="processing"] { opacity: 0.7; }
.credits-summary { border-color: var(--eco-cobalt-soft); background: linear-gradient(135deg, var(--eco-surface-raised), var(--eco-cobalt-soft)); }
.credits-summary > p:not(.eyebrow), .credits-buy > header p:last-child, .credits-buy-muted p:last-child { max-width: 64ch; margin-top: 0.3rem; color: var(--ff-muted); font-size: 0.74rem; line-height: 1.5; }
.credits-single-form { display: flex; flex-wrap: wrap; align-items: end; gap: 0.65rem; margin-top: 0.8rem; border-top: 1px solid var(--ff-line); padding-top: 0.8rem; }
.credits-single-form label { display: grid; min-width: 11rem; flex: 1; gap: 0.3rem; color: var(--ff-muted); font-size: 0.68rem; font-weight: 750; }
.credits-single-form label:nth-child(2) { min-width: 8rem; flex: 0 1 8rem; }
.credits-single-form strong { min-width: 12rem; padding-bottom: 0.65rem; color: var(--ff-muted); font-size: 0.7rem; }
.credits-history-list, .credits-ledger { display: grid; gap: 0; margin-top: 0.8rem; padding: 0; list-style: none; }
.credits-history-list li, .credits-ledger li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--ff-line); padding: 0.65rem 0; font-size: 0.7rem; }
.credits-history-list small, .credits-ledger small { display: block; margin-top: 0.15rem; color: var(--ff-muted); font-size: 0.62rem; }
.credits-history-list b, .credits-ledger strong { flex: none; color: var(--ff-muted); font-size: 0.66rem; }
.credits-ledger-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }
.credits-filter-btn { min-height: 2rem; border: 1px solid var(--ff-line); border-radius: 999px; background: transparent; padding: 0.35rem 0.65rem; color: var(--ff-muted); cursor: pointer; font-size: 0.65rem; font-weight: 750; }
.credits-filter-btn:hover, .credits-filter-btn[aria-pressed="true"] { border-color: var(--eco-cobalt); background: var(--ff-accent-soft); color: var(--eco-cobalt); }
.credits-ledger-copy { min-width: 0; }
.credits-ledger-main { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; }
.credits-ledger-kind { display: inline-block !important; margin-top: 0 !important; border-radius: 999px; padding: 0.16rem 0.4rem; font-size: 0.56rem !important; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; }
.credits-ledger-kind-charge { background: var(--eco-danger-soft); color: var(--eco-danger) !important; }
.credits-ledger-kind-grant { background: var(--eco-success-soft); color: var(--eco-success) !important; }
.credits-ledger-kind-adjust { background: var(--eco-amber-soft); color: var(--eco-amber-ink) !important; }
.credits-ledger-kind-hold { background: var(--eco-line); color: var(--eco-ink-muted) !important; }
.credits-ledger-detail { display: block; margin-top: 0.15rem; color: var(--ff-muted); font-size: 0.64rem; }
.credits-ledger-context { display: block; margin-top: 0.18rem; color: var(--ff-ink); font-size: 0.66rem; font-weight: 700; }
.credits-ledger strong.is-positive { color: var(--eco-success); }
.credits-ledger strong.is-negative { color: var(--eco-danger); }
.credits-ledger strong.is-neutral { color: var(--ff-muted); }
.credits-ledger-empty { margin-top: 0.9rem; color: var(--ff-muted); font-size: 0.72rem; }

@media (max-width: 767px) {
  .library-audio-language { max-width: none; }
  .library-edit-actions, .library-edit-actions .btn { width: 100%; }
  .track-module-lock { grid-template-columns: 2rem minmax(0, 1fr); }
  .track-force-button { grid-column: 2; width: 100%; }
  .account-link-grid, .credits-price-grid, .credits-package-grid { grid-template-columns: 1fr; }
  .credits-ledger-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .credits-filter-btn { width: 100%; }
  .credits-single-form { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .credits-single-form label, .credits-single-form label:nth-child(2), .credits-single-form strong, .credits-single-form .btn { width: 100%; min-width: 0; }
  .credits-single-form strong { padding-bottom: 0; }
}

kbd {
  border: 1px solid var(--eco-line);
  border-bottom-width: 2px;
  border-radius: 0.25rem;
  padding: 0 0.3rem;
  font-size: 0.7rem;
  color: var(--eco-ink-muted);
}

/* ---------------------------------------------------------------------------
   Tema escuro. As cores vêm dos tokens eco (static/css/eco-tokens.css), que já trocam em
   `html.dark`; por isso não há mais regras escuras por classe. `theme.js` põe a classe a
   partir da escolha salva ou de prefers-color-scheme.
   --------------------------------------------------------------------------- */

:root { color-scheme: light; }
html.dark { color-scheme: dark; }

.theme-toggle {
  border-radius: 0.5rem;
  padding: 0.375rem 0.5rem;
  font-size: 1rem;
  line-height: 1;
  color: var(--eco-ink-muted);
}
.theme-toggle:hover { background: var(--eco-surface-sunken); }

/* ---------------------------------------------------------------------------
   Shell novo (Fase 19 UI). A aplicação deixou de ser uma fila de telas e passou a ser um
   espaço de prática: a barra lateral organiza por intenção, enquanto o conteúdo recebe largura
   própria para foco, contexto e ação. O breakpoint do telefone continua sendo o mesmo do PWA.
   --------------------------------------------------------------------------- */

:root {
  /* Os nomes --ff-* ficam; os valores vêm dos tokens eco (static/css/eco-tokens.css),
     que já trocam sozinhos no escuro. */
  --ff-ink: var(--eco-ink);
  --ff-muted: var(--eco-ink-muted);
  --ff-line: var(--eco-line);
  --ff-panel: var(--eco-surface-raised);
  --ff-accent: var(--eco-cobalt);
  --ff-accent-soft: var(--eco-cobalt-soft);
  --ff-warm: var(--eco-amber);
}

body {
  min-height: 100vh;
  background: var(--eco-surface);
  color: var(--ff-ink);
  font-family: var(--eco-font-sans);
}

#app-shell { min-height: 100vh; }

/* D114: enquanto o Auth decide, o shell protegido nem participa da primeira pintura. A tela de
   login tem uma raiz própria para não herdar navegação, contexto de rota, rodapé ou a barra do
   polegar. Esconder por CSS apenas depois de montar o shell seria um vazamento de interface e
   também deixaria as buscas do bootstrap rodando cedo demais. */
body.auth-pending { min-height: 100svh; overflow: hidden; }
body.auth-mode { min-height: 100svh; padding-bottom: 0; background: var(--eco-surface); }
body.auth-mode .auth-root { min-height: 100svh; }
.auth-screen { width: min(100%, 72rem); min-height: 100svh; margin: 0 auto; padding: clamp(1.25rem, 4vw, 2.5rem) clamp(1.25rem, 5vw, 4rem) 2rem; }
.auth-brand { display: inline-flex; align-items: center; gap: 0.65rem; color: var(--eco-cobalt); font-size: 1rem; letter-spacing: -0.025em; }
.auth-brand b { font-weight: 800; }
.auth-screen .auth-layout { min-height: calc(100svh - 8rem); }
.auth-screen .auth-card { border: 1px solid var(--ff-line); background: var(--ff-panel); box-shadow: 0 24px 60px -42px color-mix(in srgb, var(--eco-ink) 45%, transparent); }
#app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 25;
  display: flex;
  width: 15.5rem;
  flex-direction: column;
  border-right: 1px solid var(--ff-line);
  background: color-mix(in srgb, var(--eco-surface-raised) 88%, transparent);
  padding: 1rem 0.75rem 0.75rem;
  backdrop-filter: blur(18px);
  transition: width var(--eco-dur-fill) var(--eco-ease-in), padding var(--eco-dur-fill) var(--eco-ease-in);
}
.sidebar-brand, .mobile-brand { display: inline-flex; align-items: center; gap: 0.65rem; color: var(--eco-cobalt); font-size: 1rem; letter-spacing: -0.025em; }
.sidebar-brand b, .mobile-brand b { font-weight: 800; }
.brand-mark { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 0.7rem; background: linear-gradient(135deg, var(--eco-cobalt), var(--eco-cobalt)); color: var(--eco-on-cobalt); font-size: 1rem; font-weight: 800; box-shadow: 0 8px 18px -9px color-mix(in srgb, var(--eco-cobalt) 90%, transparent); }
.sidebar-next-step { display: flex; flex-direction: column; gap: 0.15rem; margin: 0.75rem 0.15rem 0.35rem; border-radius: 1rem; background: var(--eco-cobalt); padding: 0.6rem 0.75rem; color: var(--eco-on-cobalt); }
.sidebar-next-step:hover { background: color-mix(in srgb, var(--eco-cobalt) 88%, var(--eco-ink)); }
.sidebar-next-step-label { color: var(--eco-cobalt-soft); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.sidebar-next-step strong { font-size: 0.82rem; line-height: 1.3; }
/* Rola só quando não cabe (tela baixa, conta operadora): com `visible`, a lista passava por baixo
   do rodapé de Créditos e Conta. Quando cabe, auto não mostra barra nenhuma. */
.sidebar-nav { min-height: 0; flex: 1; overflow-y: auto; padding: 0 0.25rem; }
.nav-group + .nav-group { margin-top: 0.65rem; }
.nav-section-label { margin: 0 0 0.15rem; padding: 0 0.55rem; color: var(--eco-ink-muted); font-size: 0.62rem; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; }
.nav-group-items { display: grid; gap: 0.2rem; }
.sidebar-nav-link, .sidebar-settings { position: relative; display: flex; min-height: 2.2rem; align-items: center; gap: 0.6rem; border-radius: 0.75rem; padding: 0.32rem 0.55rem; color: var(--eco-ink-muted); font-size: 0.8rem; font-weight: 650; transition: background-color 120ms, color 120ms, transform 120ms; }
.sidebar-nav-link:hover, .sidebar-settings:hover { background: var(--eco-surface-sunken); color: var(--eco-cobalt); }
.sidebar-nav-link.active, .sidebar-settings.active { background: transparent; color: var(--eco-ink); font-weight: 800; }
.sidebar-nav-link.active::before { content: none; }
.sidebar-nav-icon, .sidebar-nav-link > .ff-icon { width: 1.15rem; color: currentColor; }
.sidebar-nav-link.active > .ff-icon { display: grid; width: 2rem; height: 2rem; box-sizing: border-box; padding: 0.45rem; border-radius: var(--eco-radius-md); background: var(--eco-cobalt); color: var(--eco-on-cobalt); }
.sidebar-nav-link.active > .eco-mark { padding: 0.28rem; }
.nav-link-copy { display: grid; min-width: 0; gap: 0.1rem; }
.nav-link-copy small { overflow: hidden; color: var(--eco-ink-muted); font-size: 0.67rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-nav-link .nav-link-copy small { display: none; }
.sidebar-nav-link.active .nav-link-copy small { color: var(--eco-cobalt); }
.sidebar-footer { margin-top: 0.5rem; border-top: 1px solid var(--ff-line); padding: 0.5rem 0.25rem 0; }

.workspace { min-width: 0; margin-left: 15.5rem; transition: margin-left 240ms ease; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; min-height: 4.5rem; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid color-mix(in srgb, var(--eco-line) 80%, transparent); background: color-mix(in srgb, var(--eco-surface-raised) 72%, transparent); padding: 0.75rem clamp(1.25rem, 4vw, 3.5rem); backdrop-filter: blur(18px); }
.mobile-brand { display: none; }
.topbar-actions { display: flex; align-items: center; gap: 0.4rem; }
.focus-topbar { display: none; }
.topbar-account { display: inline-flex; align-items: center; gap: 0.45rem; border-radius: 999px; padding: 0.3rem 0.65rem 0.3rem 0.3rem; color: var(--eco-ink-muted); font-size: 0.78rem; font-weight: 650; }
.topbar-account:hover { background: var(--eco-surface-sunken); }
.account-avatar { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: 999px; background: var(--ff-accent-soft); color: var(--eco-cobalt); font-size: 0.65rem; letter-spacing: -0.1em; }
.workspace-main { width: min(100%, 84rem); margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3.5rem) 3rem; }
.workspace-footer { width: min(100%, 84rem); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3.5rem) 2rem; color: var(--eco-ink-muted); font-size: 0.68rem; text-align: left; }
.workspace-footer a:hover { color: var(--ff-accent); }
.nav-dot { display: inline-block; width: 0.4rem; height: 0.4rem; margin-left: auto; border-radius: 999px; background: var(--eco-amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--eco-amber) 14%, transparent); }

/* A utility md:hidden vem antes deste arquivo; sem a regra explícita a topbar volta a ganhar
   display:flex pela cascata. A faixa é só do celular. */
@media (min-width: 768px) {
  .topbar { display: none; }

  /* O trilho existe somente no foco: não introduz recolhimento manual. */
  body.focus-mode #app-sidebar { width: 5rem; align-items: center; padding-inline: 0.75rem; }
  body.focus-mode .workspace { margin-left: 5rem; }
  body.focus-mode .sidebar-brand > span:last-child,
  body.focus-mode .sidebar-next-step,
  body.focus-mode .nav-section-label,
  body.focus-mode .sidebar-nav-link .nav-link-copy,
  body.focus-mode .sidebar-settings > span:last-child { display: none; }
  body.focus-mode .sidebar-brand { margin-bottom: 0.35rem; }
  body.focus-mode .sidebar-nav { width: 100%; padding-inline: 0; }
  body.focus-mode .nav-group { display: grid; justify-items: center; width: 100%; }
  body.focus-mode .nav-group-items { justify-items: center; width: 100%; }
  body.focus-mode .sidebar-nav-link,
  body.focus-mode .sidebar-settings { width: var(--eco-size-touch); min-height: var(--eco-size-touch); justify-content: center; padding: 0; }
  body.focus-mode .sidebar-nav-link > .ff-icon,
  body.focus-mode .sidebar-settings > .sidebar-nav-icon { width: 1.3rem; height: 1.3rem; }
  body.focus-mode .sidebar-nav-link.active > .ff-icon { width: 2rem; height: 2rem; }
  body.focus-mode .sidebar-footer { display: grid; justify-items: center; width: 100%; padding-inline: 0; }
  body.focus-mode .workspace-main { width: 100%; max-width: none; min-height: 100svh; padding: clamp(1.5rem, 4vw, 3rem); }
  body.focus-mode .voice-route-back,
  body.focus-mode .live-focus-back { display: none; }
}

.page-heading, .today-header { margin-bottom: 1.5rem; }
.page-heading h1, .today-header h1 { color: var(--ff-ink); font-size: clamp(1.65rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1.08; }
.page-heading p, .today-header p { max-width: 56ch; margin-top: 0.55rem; color: var(--ff-muted); font-size: 0.93rem; line-height: 1.55; }
.eyebrow { margin-bottom: 0.5rem; color: var(--eco-cobalt); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.workspace-main .card { border-color: color-mix(in srgb, var(--eco-line) 90%, transparent); border-radius: 1.15rem; box-shadow: 0 12px 30px -24px color-mix(in srgb, var(--eco-ink) 32%, transparent); }
.focus-hero { min-height: 0; overflow: hidden; border: 0 !important; background: var(--eco-surface-raised) !important; box-shadow: none !important; }
.focus-hero h2 { color: var(--ff-ink); font-size: clamp(1.45rem, 3vw, 2rem); letter-spacing: -0.04em; }

@media (max-width: 767px) {
  #app-sidebar { display: none; }
  .workspace { margin-left: 0; }
  .topbar { min-height: 4rem; padding: 0.65rem 1rem; }
  .focus-topbar { position: sticky; top: 0; z-index: 25; align-items: center; justify-content: space-between; min-height: var(--eco-size-touch); border-bottom: 1px solid var(--eco-line); background: var(--eco-surface-raised); padding: 0.5rem 1rem; }
  .focus-exit { display: inline-flex; align-items: center; gap: var(--eco-space-1); min-height: var(--eco-size-touch); color: var(--eco-ink); font-weight: 700; text-decoration: none; }
  .focus-exit span { font-size: 1.45rem; font-weight: 400; line-height: 1; }
  .focus-progress { margin: 0; color: var(--eco-ink-muted); font-family: var(--eco-font-mono); font-size: 0.75rem; }
  body.focus-mode { padding-bottom: 0; }
  body.focus-mode .topbar,
  body.focus-mode .tabbar { display: none !important; }
  body.focus-mode .focus-topbar { display: flex; }
  body.focus-mode .workspace-main { padding-bottom: 2rem; }
  body.focus-mode .voice-route-back,
  body.focus-mode .live-focus-back { display: none; }
  .mobile-brand { display: inline-flex; }
  .workspace-main { max-width: 100%; padding: 1.35rem 1rem calc(2rem + 52px + env(safe-area-inset-bottom)); }
  .workspace-footer { padding-inline: 1rem; text-align: center; }
  .page-heading, .today-header { margin-bottom: 1.1rem; }
  .page-heading h1, .today-header h1 { font-size: 1.7rem; }
  .more-panel { max-height: min(82vh, 42rem); overflow-y: auto; padding: 1.25rem 1rem calc(1.25rem + 52px + env(safe-area-inset-bottom)); }
  .more-groups { display: grid; gap: 0.8rem; }
  .more-groups .nav-group + .nav-group { margin-top: 0; }
}

/* Variações da navegação gerada pelo mesmo mapa. */
.tab-link { flex-direction: column; gap: 0.18rem; border-top: 2px solid transparent; }
.tab-link .ff-icon { width: 1.2rem; height: 1.2rem; }
.tab-link .nav-link-copy { display: block; }
.tab-link .nav-link-copy > span { font-size: 0.68rem; font-weight: 650; }
.tab-link.active { border-top-color: var(--eco-cobalt); box-shadow: none; }
.tab-link-ecoar { margin-top: -1.75rem; color: var(--eco-ink); }
.tab-link-ecoar .eco-mark { width: 3.75rem; height: 3.75rem; border-radius: 999px; background: var(--eco-cobalt); padding: 0.65rem; color: var(--eco-on-cobalt); box-shadow: 0 0.4rem 1rem -0.5rem color-mix(in srgb, var(--eco-cobalt) 80%, transparent); }
.tab-link-ecoar.active { border-top-color: transparent; }
.more-groups .nav-group { border: 1px solid var(--ff-line); border-radius: 1rem; background: var(--ff-panel); padding: 0.8rem; }
.more-groups .nav-section-label { padding-inline: 0.25rem; }
.more-link { display: flex; align-items: center; gap: 0.7rem; border-radius: 0.75rem; padding: 0.75rem 0.5rem; color: var(--eco-ink); font-size: 0.84rem; font-weight: 650; }
.more-link:hover, .more-link.active { background: var(--ff-accent-soft); color: var(--eco-cobalt); }
.more-link .nav-link-copy small { display: block; }
.more-legal { margin-top: 1rem; color: var(--eco-ink-muted); font-size: 0.7rem; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .more-sheet, .more-panel, .tab-link-ecoar .eco-mark { transition: none; }
  #app-sidebar, .workspace { transition: opacity 120ms ease; }
}

.today-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(17rem, 0.75fr); align-items: start; gap: 1rem; }
.today-secondary { min-width: 0; }
.today-secondary .card { margin-bottom: 1rem; }
.today-secondary .card:last-child { margin-bottom: 0; }

@media (max-width: 1279px) and (min-width: 768px) {
  #app-sidebar { width: 5rem; align-items: center; padding-inline: 0.75rem; }
  .workspace { margin-left: 5rem; }
  .sidebar-brand span:not(.brand-mark), .sidebar-kicker, .sidebar-next-step, .sidebar-settings > span:last-child,
  .nav-section-label, .sidebar-nav-link .nav-link-copy { display: none; }
  .sidebar-nav { width: 100%; padding-inline: 0; }
  .nav-group + .nav-group { margin-top: 0.35rem; }
  .sidebar-nav-link, .sidebar-settings { justify-content: center; padding-inline: 0.35rem; }
  .sidebar-footer { width: 100%; padding-inline: 0; }
  .sidebar-nav-icon, .sidebar-nav-link > .ff-icon { width: 1.35rem; }
  .workspace-main { padding-inline: 2rem; }
}

@media (max-width: 767px) {
  .today-grid { display: block; }
  .today-secondary { margin-top: 1rem; }
}

/* ---------------------------------------------------------------------------
   Agenda redesenhada. A data deixou de ser um bloco repetido: a coluna principal é uma linha
   do tempo legível, e as ações de planejamento ficam num painel próprio. O próximo compromisso
   recebe prioridade visual; editar uma rotina não compete com a leitura do dia.
   --------------------------------------------------------------------------- */

.agenda-overview { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(15rem, 0.7fr); gap: 1rem; margin-bottom: 2rem; }
.agenda-main { min-width: 0; }
.agenda-sidebar { min-width: 0; display: grid; gap: 1rem; }
.agenda-action { display: inline-flex; min-height: 2rem; align-items: center; gap: 0.25rem; border-radius: 0.5rem; padding: 0.3rem 0.5rem; color: var(--ff-muted); font-size: 0.7rem; font-weight: 700; }
.agenda-action:hover { background: var(--eco-surface-sunken); color: var(--eco-cobalt); }
.agenda-action .ff-icon { width: 0.85rem; }
.agenda-action-primary { color: var(--eco-cobalt); }
.agenda-prep { margin-top: 0.75rem; border-radius: 0.8rem; background: var(--eco-cobalt-soft); padding: 0.75rem; }
.agenda-prep-empty { color: var(--ff-muted); font-size: 0.75rem; }
.agenda-prep-label { color: var(--eco-cobalt); font-size: 0.68rem; font-weight: 800; text-transform: uppercase; }
.agenda-prep ul { margin-top: 0.35rem; display: grid; gap: 0.25rem; }
.agenda-prep li + li { border-top: 1px solid var(--eco-cobalt-soft); padding-top: 0.3rem; }
.agenda-prep .agenda-action { margin-top: 0.35rem; }

.agenda-add { overflow: hidden; }
.agenda-add > summary { display: flex; cursor: pointer; list-style: none; align-items: center; gap: 0.75rem; padding: 1rem; }
.agenda-add > summary::-webkit-details-marker { display: none; }
.agenda-add > summary b { display: block; color: var(--ff-ink); font-size: 0.88rem; }
.agenda-add > summary small { display: block; margin-top: 0.15rem; color: var(--ff-muted); font-size: 0.7rem; }
.agenda-add-body { border-top: 1px solid var(--ff-line); padding: 1rem; }
.agenda-form-grid { display: grid; gap: 1.2rem; }
.agenda-form { display: grid; gap: 0.65rem; border-top: 1px solid var(--ff-line); padding-top: 1rem; }
.agenda-form-heading { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.25rem; }
.agenda-form-number { display: grid; width: 1.55rem; height: 1.55rem; flex: none; place-items: center; border-radius: 999px; background: var(--ff-accent-soft); color: var(--eco-cobalt); font-size: 0.7rem; font-weight: 800; }
.agenda-form-heading h3 { color: var(--ff-ink); font-size: 0.84rem; font-weight: 800; }
.agenda-form-heading p { margin-top: 0.1rem; color: var(--ff-muted); font-size: 0.68rem; }
.agenda-form > label, .agenda-form-pair > label { display: grid; gap: 0.3rem; color: var(--ff-muted); font-size: 0.68rem; font-weight: 750; }
.agenda-form input, .agenda-form select, .agenda-form textarea, .agenda-series-controls input, .agenda-series-controls select { width: 100%; border: 1px solid var(--ff-line); border-radius: 0.65rem; background: var(--ff-panel); padding: 0.6rem 0.7rem; color: var(--ff-ink); font-size: 0.78rem; }
.agenda-form textarea { resize: vertical; }
.agenda-form input:focus, .agenda-form select:focus, .agenda-form textarea:focus { border-color: var(--eco-cobalt); outline: 2px solid var(--eco-cobalt-soft); outline-offset: 1px; }
.agenda-checkbox { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 0.45rem !important; font-weight: 600 !important; }
.agenda-checkbox input { width: 1rem; height: 1rem; padding: 0; accent-color: var(--eco-cobalt); }
.agenda-form-pair { display: grid; grid-template-columns: 1fr 0.8fr; gap: 0.5rem; }
.agenda-form-note { color: var(--eco-ink-muted); font-size: 0.65rem; line-height: 1.4; }
.agenda-series-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; width: 100%; padding-left: 2.65rem; }
.agenda-series-controls input, .agenda-series-controls select { width: auto; min-height: 2rem; padding: 0.3rem 0.45rem; font-size: 0.68rem; }

@media (max-width: 767px) {
  .agenda-overview, .agenda-layout { display: block; }
  .agenda-sidebar { margin-top: 1.25rem; }
  .agenda-series-controls { padding-left: 2.65rem; }
}

/* ---------------------------------------------------------------------------
   Biblioteca como workspace. As três coleções continuam carregando juntas para que a troca
   de aba seja instantânea, mas apenas a coleção escolhida ocupa a tela. O conteúdo mais
   recorrente (cards) vem primeiro; criação de material e histórico são fluxos separados.
   --------------------------------------------------------------------------- */

.library-hero { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; border: 1px solid var(--eco-cobalt-soft); border-radius: 1.25rem; background: linear-gradient(135deg, var(--eco-surface-raised), var(--eco-cobalt-soft)); padding: 1.25rem; box-shadow: 0 20px 42px -32px color-mix(in srgb, var(--eco-cobalt) 55%, transparent); }
.library-hero h2 { color: var(--ff-ink); font-size: 1.2rem; font-weight: 800; letter-spacing: -0.035em; }
.library-hero p:not(.eyebrow) { max-width: 58ch; margin-top: 0.3rem; color: var(--ff-muted); font-size: 0.78rem; line-height: 1.5; }
.library-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 1rem; border: 1px solid var(--ff-line); border-radius: 1.1rem; background: color-mix(in srgb, var(--eco-surface-sunken) 76%, transparent); padding: 0.35rem; }
.library-tab { display: flex; min-width: 0; align-items: center; gap: 0.65rem; border: 1px solid transparent; border-radius: 0.85rem; padding: 0.7rem 0.8rem; color: var(--ff-muted); text-align: left; transition: background-color 120ms, border-color 120ms, color 120ms, box-shadow 120ms; }
.library-tab:hover { color: var(--eco-cobalt); }
.library-tab.is-active { border-color: var(--ff-line); background: var(--ff-panel); color: var(--eco-cobalt); box-shadow: 0 7px 18px -15px color-mix(in srgb, var(--eco-ink) 60%, transparent); }
.library-tab b, .library-tab small { display: block; }
.library-tab b { color: inherit; font-size: 0.78rem; font-weight: 800; }
.library-tab small { margin-top: 0.15rem; color: var(--ff-muted); font-size: 0.65rem; }
.library-panel[hidden] { display: none; }
.library-panel-card, .library-source-workspace, .library-shadowing-card { padding: 1.25rem; }
.library-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.library-panel-head h2 { color: var(--ff-ink); font-size: 1.1rem; font-weight: 800; letter-spacing: -0.03em; }
.library-panel-head p:not(.eyebrow) { max-width: 58ch; margin-top: 0.3rem; color: var(--ff-muted); font-size: 0.75rem; line-height: 1.45; }
.library-count { flex: none; color: var(--ff-muted); font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.library-count-actions .btn, .library-editor-actions .btn, .library-source-controls .btn, .library-session-row .btn { padding: 0.4rem 0.65rem; font-size: 0.72rem; }
.library-toolbar label, .library-source-controls label, .library-typed-form label, .library-form-row label { display: grid; gap: 0.3rem; color: var(--ff-muted); font-size: 0.68rem; font-weight: 750; }
.library-bulk-bar { margin-top: 0.8rem; }
.library-bulk-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; border: 1px solid var(--eco-danger-soft); border-radius: 0.8rem; background: var(--eco-danger-soft); padding: 0.55rem; color: var(--eco-danger); font-size: 0.75rem; }
.library-bulk-inner b { font-size: 0.9rem; }
.library-bulk-inner .btn-primary { margin-left: auto; }
.library-card-grid, .library-shadowing-grid, .library-source-grid { list-style: none; margin: 1rem 0 0; padding: 0; }
.library-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.library-card-check { width: 1rem; height: 1rem; flex: none; margin-top: 0.15rem; accent-color: var(--eco-cobalt); }
.library-card-editor { margin-top: 0.8rem; border-top: 1px solid var(--ff-line); padding-top: 0.8rem; }
.library-editor-warning { border: 1px solid var(--eco-amber-soft); border-radius: 0.65rem; background: var(--eco-amber-soft); padding: 0.6rem; color: var(--eco-amber-ink); font-size: 0.68rem; line-height: 1.45; }
.library-editor-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.7rem; }
.library-danger { color: var(--eco-danger) !important; }
.library-pagination { display: flex; min-height: 2rem; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1rem; color: var(--ff-muted); font-size: 0.68rem; }
.library-empty { grid-column: 1 / -1; border: 1px dashed var(--ff-line); border-radius: 0.8rem; padding: 2rem 1rem; color: var(--ff-muted); font-size: 0.78rem; text-align: center; }
.library-shadowing-note { margin-top: 0.85rem; border-left: 3px solid var(--eco-cobalt); background: var(--ff-accent-soft); padding: 0.65rem 0.8rem; color: var(--eco-cobalt); font-size: 0.72rem; line-height: 1.45; }
.library-shadowing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
.library-session-row { display: grid; grid-template-columns: 3.1rem minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; min-width: 0; border: 1px solid var(--ff-line); border-radius: 0.85rem; padding: 0.75rem; }
.library-session-score { display: grid; justify-items: center; border-right: 1px solid var(--ff-line); padding-right: 0.65rem; }
.library-session-score strong { font-size: 1rem; font-weight: 850; letter-spacing: -0.04em; }
.library-session-score span { margin-top: 0.1rem; color: var(--ff-muted); font-size: 0.62rem; }
.library-session-copy { min-width: 0; }
.library-session-target { overflow: hidden; color: var(--ff-ink); font-size: 0.78rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.library-session-meta { margin-top: 0.2rem; color: var(--ff-muted); font-size: 0.65rem; }
.library-source-workspace { overflow: hidden; }
.library-credit-note { margin-top: 0.9rem; border: 1px solid var(--eco-cobalt-soft); border-radius: 0.7rem; background: var(--ff-accent-soft); padding: 0.65rem 0.8rem; color: var(--eco-cobalt); font-size: 0.72rem; }
.library-compose { margin-top: 0.85rem; border: 1px solid var(--ff-line); border-radius: 0.9rem; background: color-mix(in srgb, var(--eco-surface-sunken) 80%, transparent); }
.library-compose > summary { display: flex; cursor: pointer; list-style: none; align-items: center; gap: 0.7rem; padding: 0.85rem; }
.library-compose > summary::-webkit-details-marker, .library-source-text > summary::-webkit-details-marker, .library-findings > summary::-webkit-details-marker { display: none; }
.library-compose-icon { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 0.65rem; background: var(--eco-cobalt-soft); color: var(--eco-cobalt); }
.library-compose > summary b, .library-compose > summary small { display: block; }
.library-compose > summary b { color: var(--ff-ink); font-size: 0.78rem; }
.library-compose > summary small { margin-top: 0.15rem; color: var(--ff-muted); font-size: 0.65rem; }
.library-compose-chevron { display: grid; margin-left: auto; color: var(--ff-muted); transition: transform 120ms; }
.library-compose-chevron .ff-icon { width: 1rem; }
.library-compose[open] .library-compose-chevron { transform: rotate(180deg); }
.library-compose-body { border-top: 1px solid var(--ff-line); padding: 1rem; }
.library-compose-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 1rem; }
.library-shadowing-form { display: grid; gap: 0.75rem; }
.library-shadowing-form label { display: grid; gap: 0.3rem; color: var(--ff-muted); font-size: 0.68rem; font-weight: 750; }
.library-shadowing-form textarea, .library-shadowing-form input { width: 100%; }
.library-typed-form, .library-audio-form { display: grid; gap: 0.65rem; }
.library-typed-form { border-right: 1px solid var(--ff-line); padding-right: 1rem; }
.library-compose-heading { display: flex; align-items: flex-start; gap: 0.55rem; margin-bottom: 0.15rem; }
.library-compose-heading > span { display: grid; width: 1.45rem; height: 1.45rem; flex: none; place-items: center; border-radius: 999px; background: var(--ff-accent-soft); color: var(--eco-cobalt); font-size: 0.68rem; font-weight: 800; }
.library-compose-heading h3 { color: var(--ff-ink); font-size: 0.8rem; font-weight: 800; }
.library-compose-heading p { margin-top: 0.15rem; color: var(--ff-muted); font-size: 0.66rem; line-height: 1.4; }
.library-typed-form textarea, .library-typed-form input, .library-typed-form select { width: 100%; }
.library-form-row { display: grid; grid-template-columns: minmax(0, 0.7fr) auto; align-items: end; gap: 0.55rem; }
.library-form-row .btn { min-height: 2.45rem; }
.library-audio-form { align-content: start; }
.library-audio-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.library-file-button { cursor: pointer; }
.library-progress { min-height: 1.2rem; color: var(--ff-muted); font-size: 0.68rem; }
.library-source-list-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; border-top: 1px solid var(--ff-line); padding-top: 1rem; }
.library-source-list-head h3 { color: var(--ff-ink); font-size: 0.95rem; font-weight: 800; }
.library-source-list-head > span { color: var(--ff-muted); font-size: 0.68rem; }
.library-source-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.library-source-card { min-width: 0; border: 1px solid var(--ff-line); border-radius: 0.9rem; background: var(--ff-panel); padding: 0.85rem; }
.library-source-head { display: flex; min-width: 0; align-items: flex-start; gap: 0.6rem; }
.library-source-icon { display: grid; width: 2rem; height: 2rem; flex: none; place-items: center; border-radius: 0.65rem; background: var(--ff-accent-soft); color: var(--eco-cobalt); }
.library-source-head h3 { overflow: hidden; color: var(--ff-ink); font-size: 0.8rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.library-source-head p { margin-top: 0.18rem; color: var(--ff-muted); font-size: 0.64rem; }
.library-source-head .btn { margin-left: auto; flex: none; }
.library-source-text, .library-findings { margin-top: 0.75rem; border-top: 1px solid var(--ff-line); padding-top: 0.65rem; }
.library-source-text summary, .library-findings summary { display: flex; cursor: pointer; align-items: center; justify-content: space-between; gap: 0.5rem; color: var(--eco-cobalt); font-size: 0.68rem; font-weight: 750; }
.library-source-text p { margin-top: 0.45rem; max-height: 11rem; overflow: auto; white-space: pre-wrap; color: var(--ff-muted); font-size: 0.72rem; line-height: 1.5; }
.library-source-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 0.45rem; margin-top: 0.75rem; }
.library-source-controls label { min-width: 11rem; flex: 1; }
.library-source-controls select { width: 100%; }
.library-source-controls .btn { min-height: 2.45rem; }
.library-source-analysis { min-width: 14rem; flex: 1; margin: 0; color: var(--ff-muted); font-size: 0.68rem; line-height: 1.45; }
.library-findings summary b { border-radius: 999px; background: var(--ff-accent-soft); padding: 0.2rem 0.45rem; color: var(--eco-cobalt); font-size: 0.61rem; }
.library-findings > ul { display: grid; gap: 0.45rem; margin-top: 0.65rem; }
.library-finding { border-radius: 0.65rem; background: var(--eco-surface-sunken); padding: 0.55rem; }
.library-finding.is-done { opacity: 0.66; }
.library-finding label { display: flex; align-items: flex-start; gap: 0.45rem; }
.library-finding input { margin-top: 0.15rem; accent-color: var(--eco-cobalt); }
.library-finding-check { display: grid; width: 1rem; height: 1rem; flex: none; place-items: center; margin-top: 0.1rem; color: var(--eco-success); }
.library-finding-check .ff-icon { width: 0.8rem; }
.library-finding b { font-size: 0.72rem; }
.library-finding-kind { display: inline-block; margin-left: 0.3rem; border-radius: 999px; background: var(--ff-accent-soft); padding: 0.16rem 0.38rem; color: var(--eco-cobalt); font-size: 0.58rem; font-weight: 750; }
.library-finding-quote, .library-finding-duplicate { display: block; margin-top: 0.2rem; color: var(--ff-muted); font-size: 0.65rem; line-height: 1.4; }
.library-finding-duplicate { color: var(--eco-amber-ink); }

@media (max-width: 1023px) {
  .library-card-grid, .library-shadowing-grid, .library-source-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .source-capture-dialog { max-height: 94vh; }
  .source-capture-dialog .ui-dialog-panel { padding: 1rem; }
  .source-capture-head { display: block; }
  .source-capture-status { display: inline-flex; margin-top: 0.55rem; }
  .source-capture-transcript textarea { min-height: 8rem; max-height: 13rem; }
  .source-capture-actions, .source-capture-buttons { align-items: stretch; flex-direction: column; }
  .source-capture-buttons .btn { width: 100%; }

  .library-hero { align-items: flex-start; flex-wrap: wrap; padding: 1rem; }
  .library-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .library-tab { min-width: 0; align-items: flex-start; padding-inline: 0.55rem; }
  .library-tab > span:last-child { min-width: 0; }
  .library-tab small { white-space: normal; overflow-wrap: anywhere; }
  .library-panel-card, .library-source-workspace, .library-shadowing-card { padding: 1rem; }
  .library-panel-head { flex-direction: column; }
  .library-compose-grid { display: block; }
  .library-typed-form { border-right: 0; border-bottom: 1px solid var(--ff-line); padding: 0 0 1rem; }
  .library-audio-form { margin-top: 1rem; }
  .library-form-row { grid-template-columns: 1fr; }
  .library-form-row .btn { width: 100%; }
  .library-source-list-head { align-items: flex-start; flex-direction: column; gap: 0.3rem; }
  .library-source-controls { align-items: stretch; flex-direction: column; }
  .library-source-controls label, .library-source-controls .btn { width: 100%; }
  .library-session-row { grid-template-columns: 3rem minmax(0, 1fr); }
  .library-session-row .btn { grid-column: 2; justify-self: start; }
}

/* ---------------------------------------------------------------------------
   Trilhas como painel de caminho. Cada modo tem um ritmo diferente, então a navegação explica
   essa diferença e o conteúdo ativo ganha uma forma própria: roadmap para o Supreme/Plus,
   mapa mensal para o Workbook e coleção de slots para o Kit.
   --------------------------------------------------------------------------- */

.track-switcher { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 1rem; border: 1px solid var(--ff-line); border-radius: 1.1rem; background: color-mix(in srgb, var(--eco-surface-sunken) 76%, transparent); padding: 0.35rem; }
.track-panel { display: grid; gap: 1rem; }
.track-overview, .track-kit-overview { display: flex; min-height: 9.5rem; align-items: center; gap: 1rem; border: 1px solid var(--eco-cobalt-soft); border-radius: 1.15rem; background: linear-gradient(135deg, var(--eco-surface-raised), var(--eco-cobalt-soft)); padding: 1.25rem; box-shadow: 0 20px 42px -32px color-mix(in srgb, var(--eco-cobalt) 50%, transparent); }
.track-overview-mentorship { border-color: var(--eco-success-soft); background: linear-gradient(135deg, var(--eco-surface-raised), var(--eco-success-soft)); }
.track-overview-icon { display: grid; width: 3rem; height: 3rem; flex: none; place-items: center; border-radius: 1rem; background: var(--eco-cobalt-soft); color: var(--eco-cobalt); font-size: 1.35rem; }
.track-overview-mentorship .track-overview-icon { background: var(--eco-success-soft); color: var(--eco-success); }
.track-overview h2, .track-kit-overview h2 { color: var(--ff-ink); font-size: 1.2rem; font-weight: 800; letter-spacing: -0.035em; }
.track-overview p:not(.eyebrow), .track-kit-overview p:not(.eyebrow) { max-width: 58ch; margin-top: 0.3rem; color: var(--ff-muted); font-size: 0.78rem; line-height: 1.5; }
.track-overview-count, .track-kit-capacity { display: grid; min-width: 6.5rem; flex: none; justify-items: end; }
.track-overview-count strong, .track-kit-capacity strong { color: var(--ff-ink); font-size: 1.65rem; font-weight: 850; letter-spacing: -0.06em; }
.track-overview-count span, .track-kit-capacity span { color: var(--ff-muted); font-size: 0.66rem; text-align: right; }
.track-roadmap, .track-workbook, .track-kit-collection { border: 1px solid var(--ff-line); border-radius: 1.1rem; background: var(--ff-panel); padding: 1.15rem; }
.track-roadmap-head, .track-kit-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.track-roadmap-head h3, .track-kit-head h3 { color: var(--ff-ink); font-size: 1rem; font-weight: 800; letter-spacing: -0.025em; }
.track-roadmap-head > span { color: var(--ff-muted); font-size: 0.68rem; }
.track-module-list { display: grid; gap: 0.55rem; margin-top: 1rem; }
.track-module { border: 1px solid var(--ff-line); border-radius: 0.9rem; background: var(--ff-panel); }
.track-module[open] { border-color: var(--eco-cobalt); box-shadow: 0 12px 26px -25px color-mix(in srgb, var(--eco-ink) 80%, transparent); }
.track-module-summary { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) auto; cursor: pointer; list-style: none; align-items: center; gap: 0.65rem; padding: 0.8rem; }
.track-module-summary::-webkit-details-marker { display: none; }
.track-module-index { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 0.65rem; background: var(--eco-surface-sunken); color: var(--ff-muted); font-size: 0.72rem; font-weight: 800; }
.track-module-current .track-module-index { background: var(--ff-accent-soft); color: var(--eco-cobalt); }
.track-module-heading { min-width: 0; }
.track-module-heading b, .track-module-heading small { display: block; }
.track-module-heading b { overflow: hidden; color: var(--ff-ink); font-size: 0.8rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.track-module-heading small { margin-top: 0.15rem; color: var(--ff-muted); font-size: 0.64rem; }
.track-module-status { display: flex; align-items: center; gap: 0.5rem; }
.track-module-status strong { color: var(--ff-muted); font-size: 0.7rem; font-weight: 750; }
.track-module-status .badge { font-size: 0.62rem; }
.track-module-body { border-top: 1px solid var(--ff-line); padding: 0.75rem 0.8rem 0.8rem; }
.track-checklist { display: grid; gap: 0.2rem; }
.track-checklist-item { display: flex; min-width: 0; align-items: center; gap: 0.55rem; border-radius: 0.6rem; padding: 0.45rem 0.4rem; }
.track-checklist-item:hover { background: var(--eco-surface-sunken); }
.track-checklist-item.is-locked { color: var(--ff-muted); opacity: 0.65; }
.track-checklist-item label { display: flex; min-width: 0; flex: 1; align-items: center; gap: 0.55rem; color: var(--ff-ink); font-size: 0.76rem; }
.track-checklist-item input { width: 1rem; height: 1rem; flex: none; accent-color: var(--eco-cobalt); }
.track-checklist-kind { color: var(--ff-muted); font-size: 0.62rem; white-space: nowrap; }
.track-checklist-audio { display: grid; color: var(--eco-cobalt); }
.track-checklist-audio .ff-icon, .track-notes-button .ff-icon { width: 0.9rem; }
.track-notes-button { display: grid; width: 1.7rem; height: 1.7rem; flex: none; place-items: center; border-radius: 0.45rem; color: var(--eco-ink-muted); }
.track-notes-button:hover, .track-notes-button.has-notes { background: var(--ff-accent-soft); color: var(--eco-cobalt); }
.track-module-footnote, .track-footnote { color: var(--ff-muted); font-size: 0.68rem; line-height: 1.45; }
.track-module-footnote { margin-top: 0.55rem; border-top: 1px solid var(--ff-line); padding-top: 0.55rem; }
.track-footnote { padding: 0 0.25rem; }
.track-empty { border: 1px dashed var(--ff-line); border-radius: 0.8rem; padding: 1.5rem 1rem; color: var(--ff-muted); font-size: 0.75rem; text-align: center; }
.track-workbook { padding-bottom: 1.25rem; }
.track-month-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; margin-top: 1rem; }
.track-month-card { min-width: 0; border: 1px solid var(--ff-line); border-radius: 0.9rem; padding: 0.8rem; }
.track-month-head { display: flex; align-items: start; justify-content: space-between; gap: 0.5rem; border-bottom: 1px solid var(--ff-line); padding-bottom: 0.65rem; }
.track-month-head .eyebrow { margin-bottom: 0.25rem; color: var(--eco-success); }
.track-month-head h3 { color: var(--ff-ink); font-size: 0.88rem; font-weight: 800; }
.track-month-head > span { color: var(--ff-muted); font-size: 0.68rem; font-weight: 750; }
.track-lesson-list { display: grid; gap: 0.15rem; margin-top: 0.55rem; }
.track-lesson-row { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: 0.45rem; min-width: 0; border-radius: 0.6rem; padding: 0.5rem 0.35rem; }
.track-lesson-row.is-next { background: var(--eco-success-soft); box-shadow: inset 3px 0 var(--eco-success); }
.track-lesson-number { color: var(--ff-muted); font-size: 0.65rem; font-weight: 750; }
.track-lesson-copy { min-width: 0; }
.track-lesson-copy b, .track-lesson-copy small { display: block; }
.track-lesson-copy b { overflow: hidden; color: var(--ff-ink); font-size: 0.7rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.track-lesson-copy small { margin-top: 0.12rem; color: var(--ff-muted); font-size: 0.6rem; }
.track-lesson-state { display: grid; justify-items: end; gap: 0.15rem; }
.track-lesson-state .badge { padding: 0.1rem 0.35rem; font-size: 0.56rem; }
.track-lesson-state small { color: var(--ff-muted); font-size: 0.58rem; }
.track-lesson-action { min-height: 1.8rem; padding: 0.25rem 0.4rem; font-size: 0.6rem; }
.track-kit-overview { border-color: var(--eco-cobalt-soft); }
.track-kit-capacity { align-items: end; }
.track-kit-capacity a { margin-top: 0.45rem; color: var(--eco-cobalt); font-size: 0.68rem; font-weight: 750; text-decoration: underline; }
.track-kit-collection { display: grid; gap: 1rem; }
.track-kit-head { align-items: flex-start; }
.track-kit-guide { color: var(--ff-muted); font-size: 0.68rem; }
.track-kit-guide summary { cursor: pointer; }
.track-kit-guide p { max-width: 34ch; margin-top: 0.45rem; line-height: 1.45; }
.track-kit-guide ul { margin-top: 0.3rem; list-style: disc; padding-left: 1rem; }
.track-kit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.track-kit-phrase { min-width: 0; border: 1px solid var(--ff-line); border-radius: 0.9rem; padding: 0.9rem; }
.track-kit-phrase-head { display: flex; align-items: center; gap: 0.45rem; }
.track-kit-phrase-head .eyebrow { margin: 0; }
.track-kit-position { display: grid; width: 1.6rem; height: 1.6rem; place-items: center; border-radius: 0.55rem; background: var(--ff-accent-soft); color: var(--eco-cobalt); font-size: 0.7rem; font-weight: 800; }
.track-kit-text { margin-top: 0.8rem; color: var(--ff-ink); font-size: 1.05rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.35; }
.track-kit-said { margin-top: 0.35rem; color: var(--ff-muted); font-size: 0.72rem; line-height: 1.4; }
.track-kit-note { margin-top: 0.45rem; color: var(--ff-muted); font-size: 0.72rem; line-height: 1.45; }
.track-kit-uses { margin-top: 0.65rem; color: var(--ff-muted); font-size: 0.64rem; }
.track-kit-uses.is-used { color: var(--eco-success); font-weight: 750; }
.track-kit-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.8rem; border-top: 1px solid var(--ff-line); padding-top: 0.65rem; }
.track-kit-actions .btn, .track-kit-candidate .btn { padding: 0.38rem 0.6rem; font-size: 0.68rem; }
.track-candidates { border: 1px solid var(--ff-line); border-radius: 1rem; background: var(--ff-panel); }
.track-candidates > summary { display: flex; cursor: pointer; list-style: none; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1rem; }
.track-candidates > summary::-webkit-details-marker { display: none; }
.track-candidates > summary b, .track-candidates > summary small { display: block; }
.track-candidates > summary b { color: var(--ff-ink); font-size: 0.8rem; }
.track-candidates > summary small { margin-top: 0.15rem; color: var(--ff-muted); font-size: 0.65rem; }
.track-details-chevron { display: grid; color: var(--ff-muted); transition: transform 120ms; }
.track-details-chevron .ff-icon { width: 1rem; }
.track-candidates[open] .track-details-chevron { transform: rotate(180deg); }
.track-candidates-body { border-top: 1px solid var(--ff-line); padding: 0.8rem 1rem; }
.track-kit-candidate-list { display: grid; gap: 0.15rem; }
.track-kit-candidate { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; border-bottom: 1px solid var(--ff-line); padding: 0.6rem 0; }
.track-kit-candidate:last-child { border-bottom: 0; }
.track-kit-candidate-copy { min-width: 0; }
.track-kit-candidate-copy b, .track-kit-candidate-copy small { display: block; }
.track-kit-candidate-copy b { overflow: hidden; color: var(--ff-ink); font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
.track-kit-candidate-copy small { margin-top: 0.15rem; color: var(--ff-muted); font-size: 0.65rem; }

@media (max-width: 1023px) {
  .track-switcher { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .track-month-grid { grid-template-columns: 1fr; }
  .track-kit-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .track-switcher { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .track-overview, .track-kit-overview { align-items: flex-start; flex-wrap: wrap; padding: 1rem; }
  .track-overview-count, .track-kit-capacity { flex: 0 0 100%; width: auto; justify-items: start; margin-left: 0; }
  .track-overview-count strong, .track-kit-capacity strong { font-size: 1.35rem; }
  .track-overview-count span, .track-kit-capacity span { text-align: left; }
  .track-kit-capacity a { margin-top: 0.3rem; }
  .track-roadmap, .track-workbook, .track-kit-collection { padding: 1rem; }
  .track-module-summary { grid-template-columns: 2rem minmax(0, 1fr); }
  .track-module-status { grid-column: 2; justify-content: space-between; margin-top: 0.1rem; }
  .track-checklist-item { align-items: flex-start; flex-wrap: wrap; }
  .track-checklist-kind { margin-left: 1.55rem; }
  .track-notes-button { margin-left: auto; }
  .track-kit-head { flex-direction: column; gap: 0.5rem; }
}

@media (max-width: 359px) {
  .library-tabs, .track-switcher { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Jornadas que ainda eram uma pilha de cards. O shell permanece o mesmo, mas cada rota agora
   tem uma área de trabalho: uma ação principal, contexto lateral e um estado claramente nomeado.
   Isso reduz a sensação de formulário comprido sem esconder nenhuma ação existente.
   --------------------------------------------------------------------------- */

.route-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.35rem; }
.route-heading-row .page-heading { margin-bottom: 0; }
.route-status-pill { flex: none; margin-top: 0.35rem; border: 1px solid var(--eco-cobalt-soft); border-radius: 999px; background: var(--eco-cobalt-soft); padding: 0.35rem 0.65rem; color: var(--eco-cobalt); font-size: 0.67rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.route-status-pill.is-warning { border-color: var(--eco-amber-soft); background: var(--eco-amber-soft); color: var(--eco-amber-ink); }

.practice-layout, .trip-workspace, .diagnostic-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.38fr); align-items: start; gap: 1rem; }
.practice-stage, .trip-board, .diagnostic-capture { min-width: 0; }
.practice-card-face { display: grid; min-height: 16rem; align-content: center; justify-items: center; padding: clamp(2rem, 7vw, 4.5rem) 1.5rem; text-align: center; }
.practice-card-face.is-answered { align-content: start; justify-items: stretch; text-align: left; }
.practice-prompt { max-width: 28ch; color: var(--ff-ink); font-size: clamp(1.45rem, 3.5vw, 2.25rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.2; }
.practice-card-face.is-answered .practice-prompt { max-width: none; font-size: 1.15rem; }
.review-coach-label { margin: 0; color: var(--ff-muted); font-size: 0.66rem; font-weight: 850; letter-spacing: 0.13em; text-transform: uppercase; }
.practice-stage-footer { border-top: 1px solid var(--ff-line); padding: 1rem 1.25rem 1.25rem; }

.simulator-steps { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; padding: 1rem 1.15rem; }
.simulator-workspace { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.simulator-result, .simulator-history { margin-top: 1rem; }
.trip-board { padding: 1.25rem; }
.trip-board-heading h2, .trip-empty h2, .diagnostic-samples h2, .owntracks-create h2, .settings-overview h2, .auth-card h2 { margin-top: 0.2rem; color: var(--ff-ink); font-size: 1.15rem; font-weight: 800; letter-spacing: -0.035em; }
.trip-side { display: grid; gap: 1rem; }

.diagnostic-capture { padding: 1.5rem; }
.diagnostic-recorder { display: grid; min-height: 15rem; place-items: center; align-content: center; gap: 0.8rem; border-top: 1px solid var(--ff-line); margin-top: 1.5rem; padding-top: 1.5rem; text-align: center; }
.diagnostic-samples { padding: 1.25rem; }
.diagnostic-slot + .diagnostic-slot { margin-top: 1rem; border-top: 1px solid var(--ff-line); padding-top: 1rem; }
.diagnostic-slot h3 { color: var(--ff-ink); font-size: 0.9rem; font-weight: 850; }
.diagnostic-play { padding-inline: 0.55rem; font-size: 0.68rem; }

.owntracks-create { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.7fr); align-items: end; gap: 1.25rem; margin-bottom: 1rem; border-color: var(--eco-cobalt-soft); background: linear-gradient(135deg, var(--eco-surface-raised), var(--eco-cobalt-soft)); }
.owntracks-create-copy p:not(.eyebrow) { max-width: 50ch; margin-top: 0.35rem; color: var(--ff-muted); font-size: 0.78rem; line-height: 1.5; }
.owntracks-create form { display: flex; align-items: end; gap: 0.55rem; }
.owntracks-create label { display: grid; min-width: 0; flex: 1; gap: 0.3rem; color: var(--ff-muted); font-size: 0.68rem; font-weight: 750; }
.owntrack-card { margin-bottom: 1rem; }
.owntracks-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.owntrack-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--ff-line); padding-bottom: 0.85rem; }
.owntrack-header .eyebrow { margin: 0; }
.owntrack-header h2 { margin-top: 0.2rem; color: var(--ff-ink); font-size: 1rem; font-weight: 800; }
.owntrack-caption { margin-top: 0.2rem; color: var(--ff-muted); font-size: 0.68rem; }
.owntrack-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem; }

.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.account-credits-slot:empty { display: none; }
.account-terms { min-height: 1.5rem; }
.account-telegram { margin-bottom: 1rem; }
.account-telegram-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.account-telegram-head h2 { margin-top: 0.2rem; color: var(--ff-ink); font-size: 1rem; font-weight: 800; }
.account-telegram-status { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid; border-radius: 999px; padding: 0.25rem 0.55rem; font-size: 0.65rem; font-weight: 800; white-space: nowrap; }
.account-telegram-status::before { width: 0.4rem; height: 0.4rem; border-radius: 999px; background: currentColor; content: ''; }
.account-telegram-status.is-connected { border-color: var(--eco-success-soft); background: var(--eco-success-soft); color: var(--eco-success); }
.account-telegram-status.is-muted { border-color: var(--ff-line); color: var(--ff-muted); }
.account-telegram-copy { max-width: 66ch; margin-top: 0.65rem; color: var(--ff-muted); font-size: 0.78rem; line-height: 1.5; }
.account-telegram-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.65rem; margin-top: 0.9rem; }
.account-telegram-expiry { color: var(--ff-muted); font-size: 0.68rem; }
.account-telegram-link-box { margin-top: 0.9rem; border: 1px solid var(--eco-cobalt-soft); border-radius: 0.8rem; padding: 0.85rem; background: var(--ff-accent-soft); }
.account-telegram-link-box p { color: var(--ff-muted); font-size: 0.72rem; line-height: 1.45; }
.account-telegram-link-box .btn { margin-top: 0.7rem; }
.account-telegram-open-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.account-telegram-open-actions .btn { margin-top: 0; }
.account-telegram-wait { margin-top: 0.65rem; }
.account-telegram-meta { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-top: 0.85rem; }
.account-telegram-meta dt { color: var(--ff-muted); font-size: 0.65rem; }
.account-telegram-meta dd { margin-top: 0.15rem; color: var(--ff-ink); font-size: 0.75rem; font-weight: 700; }
.account-telegram-note { margin: 0.85rem 0; color: var(--ff-muted); font-size: 0.68rem; line-height: 1.45; }
.telegram-feedback-section .review-coach-label, .telegram-feedback-structure .review-coach-label, .telegram-turn-assistant .review-coach-label, .telegram-feedback-table .review-coach-label { display: block; margin-bottom: 0.2rem; }
.telegram-turn-assistant > strong { display: block; color: var(--eco-cobalt); font-size: 0.68rem; }
.telegram-feedback-billing { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.55rem; margin-top: 0.55rem; color: var(--ff-muted); font-size: 0.68rem; }
.telegram-feedback-billing span { color: var(--ff-ink); font-weight: 750; }
.telegram-feedback-billing strong { color: var(--eco-cobalt); font-weight: 750; }
.telegram-feedback-billing small { border-radius: 999px; padding: 0.18rem 0.42rem; background: var(--ff-accent-soft); color: var(--eco-cobalt); font-size: 0.62rem; font-weight: 750; }
.telegram-feedback-billing-muted { color: var(--ff-muted); }
.telegram-score-line { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 0.16rem; white-space: nowrap; }
.telegram-feedback-highlight h3, .telegram-feedback-section h3 { color: var(--ff-ink); font-size: 0.82rem; font-weight: 850; }
.telegram-feedback-highlight p, .telegram-feedback-section > p { margin-top: 0.45rem; color: var(--ff-muted); font-size: 0.75rem; line-height: 1.55; white-space: pre-line; }
.telegram-feedback-section { min-width: 0; }
.telegram-feedback-section:first-child { grid-column: 1 / -1; }
.telegram-feedback-section h3 span { display: inline-grid; min-width: 1.35rem; height: 1.35rem; margin-left: 0.25rem; place-items: center; border-radius: 999px; background: var(--ff-accent-soft); color: var(--eco-cobalt); font-size: 0.65rem; }
.telegram-feedback-stat { color: var(--ff-ink) !important; font-size: 1.4rem !important; font-weight: 850; }
.telegram-feedback-list { display: grid; gap: 0.4rem; margin-top: 0.55rem; padding-left: 1rem; color: var(--ff-muted); font-size: 0.75rem; line-height: 1.5; }
.telegram-feedback-empty { margin-top: 0.5rem; color: var(--ff-muted); font-size: 0.73rem; line-height: 1.5; }
.telegram-feedback-table-wrap { margin-top: 0.6rem; overflow-x: auto; border: 1px solid var(--ff-line); border-radius: 0.7rem; }
.telegram-feedback-table { width: 100%; border-collapse: collapse; color: var(--ff-muted); font-size: 0.7rem; }
.telegram-feedback-table th, .telegram-feedback-table td { padding: 0.65rem 0.7rem; border-bottom: 1px solid var(--ff-line); text-align: left; vertical-align: top; }
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--ff-line); border-radius: 0.7rem; }
.admin-table { min-width: 42rem; border-collapse: collapse; color: var(--ff-muted); }
.admin-table th, .admin-table td { vertical-align: top; }
.telegram-feedback-table th { background: var(--ff-panel); color: var(--ff-ink); font-size: 0.64rem; font-weight: 800; white-space: nowrap; }
.telegram-feedback-table tr:last-child td { border-bottom: 0; }
.telegram-feedback-table td strong { color: var(--ff-ink); }
.telegram-feedback-skill { display: inline-flex; border-radius: 999px; padding: 0.2rem 0.45rem; background: var(--ff-accent-soft); color: var(--eco-cobalt); font-size: 0.62rem; font-weight: 750; white-space: nowrap; }
.telegram-feedback-structures { display: grid; gap: 0.45rem; margin-top: 0.55rem; }
.telegram-feedback-structure { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.45rem 0.6rem; border-bottom: 1px solid var(--ff-line); padding-bottom: 0.45rem; color: var(--ff-muted); font-size: 0.73rem; }
.telegram-feedback-structure:last-child { border-bottom: 0; }
.telegram-feedback-structure-ref { color: var(--eco-cobalt); font-weight: 800; }
.telegram-feedback-structure small { grid-column: 2; color: var(--ff-muted); font-size: 0.64rem; }
.telegram-transcript { display: grid; gap: 0.8rem; padding: 0 0 1.2rem; }
.telegram-turn { border: 1px solid var(--ff-line); border-radius: 0.75rem; padding: 0.8rem; background: var(--ff-panel); }
.telegram-turn-head { display: flex; align-items: center; gap: 0.45rem; color: var(--ff-ink); font-size: 0.7rem; }
.telegram-turn-head time { margin-left: auto; color: var(--ff-muted); font-size: 0.64rem; }
.telegram-turn-number { display: inline-grid; width: 1.3rem; height: 1.3rem; place-items: center; border-radius: 999px; background: var(--ff-accent-soft); color: var(--eco-cobalt); font-size: 0.62rem; font-weight: 850; }
.telegram-turn-user, .telegram-turn-assistant p { margin-top: 0.55rem; color: var(--ff-ink); font-size: 0.78rem; line-height: 1.5; white-space: pre-line; }
.telegram-turn-assistant { margin-top: 0.7rem; border-left: 2px solid var(--eco-cobalt); padding-left: 0.7rem; }
.telegram-turn-assistant strong { color: var(--eco-cobalt); font-size: 0.68rem; }
.telegram-feedback-error { padding: 2rem; text-align: center; }
.telegram-feedback-error p { margin: 0.5rem auto 1rem; max-width: 45ch; color: var(--ff-muted); font-size: 0.78rem; line-height: 1.5; }

.settings-overview { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; border-color: var(--eco-cobalt-soft); background: linear-gradient(135deg, var(--eco-surface-raised), var(--eco-cobalt-soft)); }
.settings-overview .eyebrow { margin: 0; }
.settings-overview p:last-child { max-width: 58ch; margin-top: 0.3rem; color: var(--ff-muted); font-size: 0.76rem; line-height: 1.45; }
.settings-primary, .settings-secondary { min-width: 0; }

.auth-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.8fr); align-items: center; gap: clamp(2rem, 8vw, 6rem); min-height: min(34rem, calc(100vh - 12rem)); }
.auth-story { max-width: 34rem; }
.auth-promise { display: flex; align-items: flex-start; gap: 0.7rem; margin-top: 1.25rem; }
.auth-promise-mark { display: grid; width: 1.65rem; height: 1.65rem; flex: none; place-items: center; border-radius: 0.5rem; background: var(--ff-accent-soft); color: var(--eco-cobalt); font-size: 0.7rem; font-weight: 850; }
.auth-promise b, .auth-promise small { display: block; }
.auth-promise b { color: var(--ff-ink); font-size: 0.8rem; }
.auth-promise small { margin-top: 0.15rem; color: var(--ff-muted); font-size: 0.7rem; line-height: 1.45; }
.auth-card { width: 100%; max-width: 26rem; justify-self: end; padding: 1.5rem; }
.auth-card .eyebrow { margin: 0; }
.auth-captcha { display: flex; min-height: 4.75rem; width: 100%; align-items: center; justify-content: center; overflow: hidden; }
.auth-captcha iframe { max-width: 100%; }

.settings-field-actions { min-width: 0; max-width: 100%; flex-wrap: wrap; }
.settings-field-control { min-width: 0; }

@media (max-width: 1023px) {
  .practice-layout, .voice-lab, .trip-workspace, .diagnostic-workspace { grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.45fr); }
  .owntracks-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .route-heading-row { display: block; }
  .route-status-pill, .route-inline-link { display: inline-flex; margin-top: 0.7rem; }
  .practice-layout, .voice-lab, .trip-workspace, .diagnostic-workspace, .simulator-workspace, .account-grid, .settings-layout, .auth-layout { display: block; }
  .practice-side, .trip-side, .settings-secondary { margin-top: 1rem; }
  .practice-card-face { min-height: 14rem; padding-inline: 1rem; }
  .practice-stage-footer { padding-inline: 1rem; }
  .simulator-steps { display: grid; grid-template-columns: 1fr; gap: 0.55rem; }
  .trip-board, .diagnostic-capture, .diagnostic-samples { padding: 1rem; }
  .diagnostic-recorder { min-height: 12rem; margin-top: 1rem; padding-top: 1rem; padding-bottom: 0.5rem; }
  .owntracks-create { display: block; }
  .owntracks-create form { display: block; margin-top: 1rem; }
  .owntracks-create form .btn { width: 100%; margin-top: 0.6rem; }
  .owntrack-header { display: block; }
  .owntrack-actions { justify-content: flex-start; margin-top: 0.8rem; }
  .account-telegram-head { display: block; }
  .account-telegram-status { margin-top: 0.7rem; }
  .account-telegram-actions { align-items: stretch; flex-direction: column; }
  .account-telegram-actions .btn { width: 100%; }
  .account-telegram-open-actions { flex-direction: column; }
  .account-telegram-open-actions .btn { width: 100%; }
  .telegram-feedback-section:first-child { grid-column: auto; }
  .telegram-feedback-table-wrap { overflow: visible; border: 0; }
  .telegram-feedback-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .telegram-feedback-table, .telegram-feedback-table tbody, .telegram-feedback-table tr, .telegram-feedback-table td { display: block; width: 100%; }
  .telegram-feedback-table tr { margin-top: 0.65rem; border: 1px solid var(--ff-line); border-radius: 0.7rem; padding: 0.35rem 0.7rem; background: var(--ff-panel); }
  .telegram-feedback-table td { display: grid; grid-template-columns: minmax(6.5rem, 0.42fr) minmax(0, 1fr); gap: 0.6rem; border-bottom: 1px solid var(--ff-line); padding: 0.55rem 0; }
  .telegram-feedback-table td::before { color: var(--ff-muted); content: attr(data-label); font-size: 0.64rem; font-weight: 800; }
  .telegram-feedback-table td:last-child { border-bottom: 0; }
  .admin-table-wrap { overflow: visible; border: 0; }
  .admin-table { min-width: 0; }
  .admin-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; width: 100%; }
  .admin-table tr { margin-top: 0.65rem; border: 1px solid var(--ff-line); border-radius: 0.7rem; padding: 0.35rem 0.7rem; background: var(--ff-panel); }
  .admin-table td { display: grid; grid-template-columns: minmax(5.5rem, 0.42fr) minmax(0, 1fr); gap: 0.6rem; border-bottom: 1px solid var(--ff-line); padding: 0.55rem 0; overflow-wrap: anywhere; }
  .admin-table td::before { color: var(--ff-muted); content: attr(data-label); font-size: 0.64rem; font-weight: 800; }
  .admin-table td:last-child { border-bottom: 0; }
  .settings-overview { display: block; }
  .settings-overview .btn { width: 100%; margin-top: 1rem; }
  .settings-row { display: block; }
  .settings-field-actions { margin-top: 0.55rem; justify-content: flex-start; }
  .settings-field-control { width: 100%; max-width: 100%; }
  .settings-field-reset { min-height: 44px; }
  form[data-conceder], form[data-lote], form[data-revogar], form[data-avulso], form[data-codigo],
  form[data-apagar], form[data-nova-aula], form[data-nova-sessao] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  form[data-conceder] label, form[data-lote] label, form[data-revogar] input, form[data-avulso] label,
  form[data-codigo] label, form[data-apagar] input, form[data-nova-aula] input, form[data-nova-sessao] input {
    min-width: 0;
    width: 100%;
  }
  form[data-conceder] .btn, form[data-lote] .btn, form[data-revogar] .btn, form[data-avulso] .btn,
  form[data-codigo] .btn, form[data-apagar] .btn, form[data-nova-aula] .btn, form[data-nova-sessao] .btn {
    width: 100%;
  }
  .auth-layout { min-height: 0; }
  .auth-screen { padding: 1rem 1rem 2rem; }
  .auth-screen .auth-layout { min-height: 0; }
  .auth-card { max-width: none; margin-top: 1.5rem; }
}

/* D112: Falar virou um cockpit único. A frase, a rodada e a gravação precisam permanecer no
   mesmo campo visual: o usuário não deve alternar entre um cartão de conteúdo e outro para
   descobrir qual é a próxima ação. O estado local continua sendo a fonte da verdade; este bloco
   só muda a hierarquia da tela. */
.voice-lab { display: block; min-width: 0; }
.voice-route-back { display: inline-flex; align-items: center; min-height: 2rem; color: var(--ff-muted); font-size: 0.75rem; text-decoration: none; }
.voice-route-back::before { content: '←'; margin-right: 0.35rem; }
.voice-route-back:hover, .voice-route-back:focus-visible { color: var(--eco-cobalt); }
.voice-cockpit-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; border-bottom: 1px solid var(--ff-line); padding: 1.05rem clamp(1rem, 3vw, 1.6rem); }
.voice-audio-status { display: block; min-height: 1.15rem; margin-top: 0.2rem; color: var(--ff-muted); font-size: 0.68rem; line-height: 1.35; }
.voice-audio-status.is-error { color: var(--eco-danger); }
.voice-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; max-width: 43rem; margin: 2.25rem auto 1.5rem; }
.voice-record-zone { border: 1px solid color-mix(in srgb, var(--eco-cobalt) 72%, transparent); border-radius: 1rem; background: color-mix(in srgb, var(--eco-surface-sunken) 38%, transparent); padding: clamp(1.05rem, 3vw, 1.5rem); text-align: center; }
.voice-evaluation-note { max-width: 34ch; margin: 0.1rem 0 0; color: var(--ff-muted); font-size: 0.68rem; line-height: 1.4; }
.voice-discard, .voice-no-mic { border: 0; background: transparent; color: var(--ff-muted); cursor: pointer; font-size: 0.66rem; text-decoration: underline; text-underline-offset: 0.18rem; }
.voice-discard:hover, .voice-no-mic:hover { color: var(--ff-accent); }
.voice-unsupported { border-color: color-mix(in srgb, var(--eco-amber) 55%, transparent); background: color-mix(in srgb, var(--eco-amber-soft) 45%, transparent); color: var(--eco-amber-ink); font-size: 0.78rem; line-height: 1.5; }
.voice-sending { padding-block: 2rem; }
.voice-error { border-color: color-mix(in srgb, var(--eco-danger) 45%, transparent); background: color-mix(in srgb, var(--eco-danger-soft) 58%, transparent); color: var(--eco-danger); }
.voice-error-title { margin: 0; color: var(--eco-danger); font-size: 0.86rem; font-weight: 800; }
.voice-error > p:not(.voice-error-title) { max-width: 48ch; margin: 0.45rem auto 0; color: var(--ff-muted); font-size: 0.74rem; line-height: 1.5; }
.voice-error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1rem; }
.voice-result { background: color-mix(in srgb, var(--eco-success-soft) 55%, transparent); border-color: color-mix(in srgb, var(--eco-success) 38%, transparent); }
.voice-result-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.voice-result-summary p { margin: 0.25rem 0 0; color: var(--ff-muted); font-size: 0.72rem; }
.voice-result-kicker { margin: 0 0 0.45rem; color: var(--eco-success); font-size: 0.68rem; font-weight: 850; letter-spacing: 0.13em; text-transform: uppercase; }
.voice-result-score { margin: 0; font-size: 2.4rem; font-weight: 900; letter-spacing: -0.08em; }
.voice-result-phrase { margin: 1.25rem 0 0; color: var(--ff-ink); font-size: 1rem; font-weight: 750; line-height: 1.35; }
.voice-result-reps { margin: 1.35rem 0 0; color: var(--ff-ink); font-size: 0.78rem; font-weight: 800; }
.voice-result-repetition { margin-top: 0.85rem; border-left: 0.2rem solid var(--eco-danger); padding-left: 0.8rem; text-align: left; }
.voice-result-repetition h3 { margin: 0; color: var(--ff-ink); font-size: 0.78rem; }
.voice-result-repetition p { margin: 0.25rem 0 0; color: var(--ff-muted); font-size: 0.72rem; line-height: 1.5; }
.voice-result-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.45rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.voice-result-list li { display: flex; min-width: 0; align-items: flex-start; gap: 0.3rem; border-radius: 0.55rem; padding: 0.5rem 0.45rem; font-size: 0.68rem; text-align: left; }
.voice-result-list li.is-match { background: color-mix(in srgb, var(--eco-success) 12%, transparent); color: var(--eco-success); }
.voice-result-list li.is-miss { background: color-mix(in srgb, var(--eco-danger) 10%, transparent); color: var(--eco-danger); }
.voice-result-list .ff-icon { margin-top: 0.1rem; }
.voice-result-list span:last-child { min-width: 0; overflow-wrap: anywhere; }
.voice-rep-number { color: var(--ff-muted); }
.voice-result-list small { display: block; margin-top: 0.25rem; color: var(--eco-danger); line-height: 1.4; }
.voice-result-note { margin: 0.85rem 0 0; color: var(--ff-muted); font-size: 0.64rem; line-height: 1.5; text-align: left; }
.voice-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; margin-top: 1.3rem; }
.voice-result-actions .btn { min-width: 10rem; }

@media (max-width: 767px) {
  .voice-cockpit-header { align-items: flex-start; }
  .voice-audio-status { min-height: 1.35rem; }
  .voice-flow { grid-template-columns: 1fr; gap: 0.45rem; margin-top: 1.7rem; }
  .voice-record-zone { padding-inline: 0.85rem; }
  .voice-result-summary { align-items: stretch; flex-direction: column; }
  .voice-result-summary .btn { width: 100%; }
  .voice-result-list { gap: 0.25rem; }
  .voice-result-list li { display: block; padding-inline: 0.3rem; text-align: center; }
  .voice-result-list li .ff-icon { display: block; margin: 0 auto 0.2rem; }
  .voice-error-actions { align-items: stretch; flex-direction: column; }
  .voice-error-actions .btn { width: 100%; }
}

/* D133: a cadeia precisa ser o centro visual. A última letra fica separada do corpo da palavra
   para responder imediatamente à pergunta que o treino faz, sem obrigar o aluno a reler a frase. */
.vf-section-kicker { color: var(--ff-muted); font-size: 0.64rem; font-weight: 850; letter-spacing: 0.14em; text-transform: uppercase; }
.vf-workspace-main { min-width: 0; }
.vf-letter-panel { display: grid; justify-items: center; gap: 0.35rem; padding: 1.7rem 1rem 1.35rem; text-align: center; }
.vf-letter-panel span, .vf-letter-panel small { color: var(--ff-muted); font-size: 0.68rem; }
.vf-letter-panel strong { color: var(--ff-ink); font-size: clamp(2.4rem, 8vw, 4rem); font-weight: 900; letter-spacing: -0.08em; line-height: 1; }
.vf-letter-panel small { font-size: 0.66rem; }
.vf-chain-panel { border: 1px solid var(--ff-line); border-radius: 0.85rem; padding: 1rem; }
.vf-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-top: 0.75rem; }
.vf-word { display: inline-flex; align-items: center; gap: 0.18rem; border: 1px solid var(--ff-line); border-radius: 0.55rem; background: var(--ff-panel); padding: 0.48rem 0.55rem; color: var(--ff-ink); font-size: 0.75rem; }
.vf-word.is-current { border-color: var(--eco-cobalt); background: var(--ff-accent-soft); }
.vf-last-letter { border-radius: 0.25rem; background: var(--ff-accent); padding: 0.08rem 0.22rem; color: var(--eco-on-cobalt); font-size: 0.72rem; }
.vf-arrow { color: var(--ff-muted); font-size: 0.75rem; }
.vf-empty-chain { margin: 0.75rem 0 0; color: var(--ff-muted); font-size: 0.74rem; }
.vf-word-form { margin-top: 1rem; }
.vf-word-form label { display: block; color: var(--ff-ink); font-size: 0.76rem; font-weight: 700; }
.vf-input-row { display: flex; gap: 0.55rem; margin-top: 0.45rem; }
.vf-input-row input { min-width: 0; flex: 1; border: 1px solid var(--ff-line); border-radius: 0.65rem; background: var(--ff-panel); padding: 0.7rem 0.8rem; color: var(--ff-ink); outline: none; }
.vf-input-row input:focus { border-color: var(--eco-cobalt); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--eco-cobalt) 16%, transparent); }
.vf-voice-box { display: grid; justify-items: center; gap: 0.65rem; margin-top: 1rem; border: 1px dashed color-mix(in srgb, var(--eco-cobalt) 70%, transparent); border-radius: 0.85rem; padding: 1.25rem; text-align: center; }
.vf-voice-box p { max-width: 38ch; margin: 0; color: var(--ff-muted); font-size: 0.72rem; line-height: 1.45; }
.vf-errors { margin-top: 1rem; border-left: 2px solid color-mix(in srgb, var(--eco-danger) 65%, transparent); padding-left: 0.8rem; }
.vf-errors ul { display: grid; gap: 0.35rem; margin: 0.6rem 0 0; }
.vf-errors li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; color: var(--ff-muted); font-size: 0.7rem; }
.vf-error-word { color: var(--eco-danger); text-decoration: line-through; }
.vf-errors li b { font-weight: 650; }
.vf-letter-inline { color: var(--ff-ink); font-weight: 900; }
.vf-result { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.vf-result-score { display: grid; align-items: baseline; grid-template-columns: auto auto; column-gap: 0.55rem; }
.vf-result-score .eyebrow { grid-column: 1 / -1; }
.vf-result-score strong { color: var(--ff-ink); font-size: 2.5rem; font-weight: 900; letter-spacing: -0.08em; }
.vf-result-score span:last-child { color: var(--ff-muted); font-size: 0.72rem; }
.vf-transcript { grid-column: 1 / -1; width: 100%; border-top: 1px solid var(--ff-line); padding-top: 0.85rem; }
.vf-transcript-text { margin: 0.35rem 0 0; color: var(--ff-muted); font-size: 0.74rem; line-height: 1.55; overflow-wrap: anywhere; }
@media (max-width: 680px) {
  .vf-input-row { align-items: stretch; flex-direction: column; }
  .vf-input-row .btn { width: 100%; }
  .vf-result { align-items: flex-start; flex-direction: column; }
}

/* D143: os padrões são leitura orientada à ação. O botão remove o lembrete, enquanto a cópia deixa
   explícito que o material de origem continua existindo. */
.memory-screen { display: grid; gap: 1.35rem; }
.memory-groups { display: grid; gap: 1.35rem; }
.memory-summary { margin-top: 0.8rem; color: var(--ff-ink); font-size: 0.8rem; line-height: 1.55; }
.memory-summary .review-coach-label { display: block; margin-top: 0.55rem; }
.memory-summary [lang="en"] { display: block; }
.memory-error { margin-top: 1.35rem; padding: 2rem; text-align: center; }
.memory-error p { margin: 0.5rem auto 1rem; max-width: 45ch; color: var(--ff-muted); font-size: 0.78rem; line-height: 1.5; }

@media (max-width: 767px) {
  .memory-groups { order: 1; }
}

/* D145: resumos antes do detalhe. As telas de operação, carteira e memória continuam densas em
   dados, mas não obrigam a pessoa a atravessar todas as linhas para chegar ao próximo bloco. */
.credits-collapse, .memory-group, .admin-collapse, .credits-day, .vf-history-details { overflow: hidden; }
.credits-collapse > summary, .admin-collapse > summary, .credits-day > summary, .vf-history-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; }
.credits-collapse > summary::-webkit-details-marker, .admin-collapse > summary::-webkit-details-marker, .credits-day > summary::-webkit-details-marker, .vf-history-details > summary::-webkit-details-marker, .memory-group > summary::-webkit-details-marker { display: none; }
.credits-collapse > summary, .admin-collapse > summary { padding: 0.15rem; }
.credits-collapse > summary > span:first-child, .admin-collapse > summary > span:first-child { display: grid; min-width: 0; gap: 0.15rem; }
.credits-collapse > summary .eyebrow, .admin-collapse > summary .eyebrow { margin: 0; }
.credits-collapse > summary b, .admin-collapse > summary b { color: var(--ff-ink); font-size: 0.95rem; }
.credits-collapse-hint, .admin-collapse-count { flex: none; color: var(--ff-muted); font-size: 0.66rem; font-weight: 750; }
.credits-collapse[open] > summary, .admin-collapse[open] > summary { border-bottom: 1px solid var(--ff-line); padding-bottom: 0.8rem; }
.credits-collapse-body, .admin-collapse-body { padding-top: 0.9rem; }
.credits-collapse > summary::after, .admin-collapse > summary::after, .credits-day > summary::after, .vf-history-details > summary::after { color: var(--ff-accent); content: '＋'; font-size: 1rem; }
.credits-collapse[open] > summary::after, .admin-collapse[open] > summary::after, .credits-day[open] > summary::after, .vf-history-details[open] > summary::after { content: '−'; }
.credits-ledger-days { display: grid; gap: 0.6rem; margin-top: 0.9rem; }
.credits-day { border: 1px solid var(--ff-line); border-radius: 0.8rem; background: var(--ff-panel); }
.credits-day > summary { padding: 0.75rem 0.85rem; }
.credits-day > summary > span:first-child { display: grid; min-width: 0; gap: 0.15rem; }
.credits-day > summary b { color: var(--ff-ink); font-size: 0.74rem; text-transform: capitalize; }
.credits-day > summary small { color: var(--ff-muted); font-size: 0.62rem; }
.credits-day-totals { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem; }
.credits-day-totals em, .credits-day-totals strong { border-radius: 999px; padding: 0.2rem 0.45rem; font-size: 0.6rem; font-style: normal; }
.credits-day-totals em { background: var(--eco-danger-soft); color: var(--eco-danger); }
.credits-day-totals strong { background: var(--eco-success-soft); color: var(--eco-success); }
.credits-day-telegram { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; border-radius: 999px; padding: 0.2rem 0.45rem; background: var(--ff-accent-soft); color: var(--eco-cobalt); font-size: 0.6rem; }
.credits-day-telegram b { font-weight: 800; }
.credits-day .credits-ledger { margin: 0; border-top: 1px solid var(--ff-line); padding: 0 0.85rem; }
.admin-tabs { overflow-x: auto; flex-wrap: nowrap !important; padding-bottom: 0.2rem; }
.admin-tabs .btn { flex: none; }
.admin-dialog { width: min(42rem, calc(100vw - 2rem)); max-width: none; max-height: min(90vh, 52rem); overflow: auto; border: 1px solid var(--eco-line); border-radius: var(--eco-radius-lg); background: var(--eco-surface); color: var(--eco-ink); padding: 0; box-shadow: var(--eco-shadow-raised); }
.admin-dialog::backdrop { background: color-mix(in srgb, var(--eco-ink) 42%, transparent); }
.admin-dialog > form, .admin-dialog > section { display: grid; gap: 0.85rem; padding: 1.25rem; }
.admin-dialog h2 { margin: 0; color: var(--eco-ink); font-size: 1.1rem; font-weight: 800; }
.admin-dialog p { margin: 0; color: var(--eco-ink-muted); font-size: 0.82rem; line-height: 1.5; }
.admin-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; margin-top: 0.5rem; }
.admin-dialog pre { max-height: 18rem; overflow: auto; border: 1px solid var(--eco-line); border-radius: var(--eco-radius-md); background: var(--eco-surface-sunken); padding: 0.75rem; color: var(--eco-ink); font-family: var(--eco-font-mono); font-size: 0.78rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-created-codes-fallback { display: grid; gap: 0.75rem; }
.admin-created-codes-fallback h2 { margin: 0; color: var(--eco-ink); font-size: 1.1rem; font-weight: 800; }
.admin-created-codes-fallback p { margin: 0; color: var(--eco-ink-muted); font-size: 0.82rem; line-height: 1.5; }
.admin-created-codes-fallback pre { max-height: 18rem; overflow: auto; border: 1px solid var(--eco-line); border-radius: var(--eco-radius-md); background: var(--eco-surface-sunken); padding: 0.75rem; color: var(--eco-ink); font-family: var(--eco-font-mono); font-size: 0.78rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.admin-form-grid .admin-field, .admin-dialog .admin-field { display: grid; min-width: 0; gap: 0.35rem; color: var(--eco-ink-muted); font-size: 0.75rem; font-weight: 700; }
.admin-form-grid input, .admin-dialog input, .admin-dialog select { width: 100%; min-height: 2.65rem; color: var(--eco-ink); }
.admin-write-desktop { display: inline-flex; }
.admin-mobile-write-note { display: none; color: var(--eco-ink-muted); font-size: 0.75rem; }
.admin-empty { display: grid; justify-items: center; gap: 0.55rem; border: 1px dashed var(--eco-line-strong); border-radius: var(--eco-radius-md); padding: 2rem 1rem; text-align: center; }
.admin-empty > b { color: var(--eco-ink); }
.admin-empty p, .admin-empty-copy { margin: 0; color: var(--eco-ink-muted); font-size: 0.8rem; }
.admin-failure { display: grid; justify-items: start; gap: 0.4rem; border: 1px solid var(--eco-danger-soft); border-radius: var(--eco-radius-md); background: var(--eco-danger-soft); padding: 1rem; color: var(--eco-danger); }
.admin-failure p { margin: 0; color: var(--eco-ink); font-size: 0.8rem; }
.admin-request-id { color: var(--eco-ink-muted); font-family: var(--eco-font-mono); font-size: 0.72rem; }
.admin-ops-alert, .admin-sample-note { margin: 0.75rem 0; border: 1px solid var(--eco-amber-soft); border-radius: var(--eco-radius-md); background: var(--eco-amber-soft); padding: 0.8rem 1rem; color: var(--eco-amber-ink); font-size: 0.82rem; line-height: 1.5; }
.admin-sample-note { border-color: var(--eco-line); background: var(--eco-surface-sunken); color: var(--eco-ink); }
.admin-filter-row { display: flex; flex-wrap: wrap; align-items: end; gap: 0.65rem; margin-top: 1rem; }
.admin-filter-row .admin-field { display: grid; min-width: min(100%, 14rem); flex: 1 1 14rem; gap: 0.35rem; color: var(--eco-ink-muted); font-size: 0.72rem; font-weight: 700; }
.admin-filter-row input, .admin-filter-row select { width: 100%; min-height: 2.65rem; }
.admin-row-link { color: var(--eco-cobalt); font-weight: 750; text-align: left; text-decoration: underline; text-underline-offset: 0.15em; }
.admin-row-link:hover { color: var(--eco-ink); }
.admin-inline-detail { border: 1px solid var(--eco-line); border-radius: var(--eco-radius-md); background: var(--eco-surface-raised); padding: 1rem; }
.admin-inline-detail h3 { margin: 0; color: var(--eco-ink); font-size: 1rem; font-weight: 800; }
.admin-inline-detail h4 { color: var(--eco-ink); font-size: 0.85rem; font-weight: 750; }
.admin-inline-detail dl { display: grid; grid-template-columns: minmax(7rem, 0.35fr) minmax(0, 1fr); gap: 0.45rem 0.75rem; margin-top: 0.8rem; font-size: 0.78rem; }
.admin-inline-detail dt { color: var(--eco-ink-muted); font-weight: 700; }
.admin-inline-detail dd { min-width: 0; margin: 0; color: var(--eco-ink); overflow-wrap: anywhere; }
.admin-simple-list { margin: 0; padding: 0; list-style: none; }
.admin-simple-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem 1rem; border-top: 1px solid var(--eco-line); padding: 0.65rem 0; color: var(--eco-ink); font-size: 0.8rem; }
.admin-simple-list li small { color: var(--eco-ink-muted); font-size: 0.72rem; }
.admin-chip-list { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.6rem; }
.admin-refusal-streak { background: var(--eco-danger-soft); }
.admin-receipt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; margin-top: 0.8rem; }
.admin-receipt-grid section { border: 1px solid var(--eco-line); border-radius: var(--eco-radius-md); padding: 0.8rem; }
.admin-receipt-grid h4 { color: var(--eco-ink); font-size: 0.82rem; font-weight: 800; }
.admin-receipt-grid ul { display: grid; gap: 0.4rem; margin: 0.5rem 0 0; padding-left: 1.1rem; color: var(--eco-ink-muted); font-size: 0.75rem; }
.admin-retention-note { margin-top: 0.8rem !important; border-left: 3px solid var(--eco-amber); padding-left: 0.7rem; }
.admin-saved-file { margin-top: 0.75rem; color: var(--eco-success); font-family: var(--eco-font-mono); font-size: 0.75rem; }
.admin-session-ended, .admin-no-access { max-width: 38rem; }
.admin-session-ended h2, .admin-no-access h2 { color: var(--eco-ink); font-size: 1.1rem; font-weight: 800; }
.admin-session-ended p { color: var(--eco-ink-muted); font-size: 0.85rem; }
.admin-kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; margin-bottom: 0.8rem; }
.admin-kpi { display: grid; gap: 0.15rem; border: 1px solid var(--ff-line); border-radius: 0.8rem; background: var(--ff-panel); padding: 0.75rem; }
.admin-kpi strong { color: var(--ff-ink); font-size: 1.25rem; }
.admin-kpi span { color: var(--ff-muted); font-size: 0.63rem; }
.admin-collapse { margin-bottom: 0.8rem; }
.admin-filter { display: grid; gap: 0.35rem; max-width: 24rem; margin-bottom: 0.75rem; color: var(--ff-muted); font-size: 0.66rem; font-weight: 750; }
.memory-group { border: 1px solid var(--ff-line); border-radius: 1rem; background: var(--ff-panel); }
.today-primary, .today-secondary, .today-header, .focus-hero { min-width: 0; }
.today-primary, .today-secondary { overflow-wrap: anywhere; }
.focus-hero { isolation: isolate; }
.focus-hero > * { position: relative; z-index: 1; }

@media (max-width: 680px) {
  .admin-kpi-grid, .vf-history-metrics { grid-template-columns: 1fr; }
  .credits-day > summary { align-items: flex-start; }
  .credits-day-totals { max-width: 10rem; }
  .admin-form-grid, .admin-receipt-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .admin-write-desktop { display: none !important; }
  .admin-mobile-write-note { display: block; }
  .admin-filter-row { align-items: stretch; flex-direction: column; }
  .admin-filter-row > .btn { width: 100%; }
  .admin-dialog { width: calc(100vw - 1rem); max-height: 92vh; }
  .admin-dialog > form, .admin-dialog > section { padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .admin-dialog, .admin-dialog *, .admin-inline-detail, .admin-failure { animation: none !important; transition: none !important; }
}

.live-focus-route { display: grid; gap: 1rem; max-width: 66rem; margin: 0 auto; }
.live-intro h2, .live-session-heading h2, .live-result-heading h2 { margin-top: .2rem; color: var(--ff-ink); font-size: 1.15rem; font-weight: 850; }
.live-session-heading, .live-result-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.live-status { margin-top: .8rem; border-radius: .65rem; background: var(--ff-accent-soft); padding: .55rem .7rem; color: var(--ff-accent); font-size: .7rem; font-weight: 750; }
.live-status.is-warning { background: var(--eco-amber-soft); color: var(--eco-amber-ink); }
.live-status.is-busy { background: var(--eco-cobalt-soft); color: var(--eco-cobalt); }
.live-messages { display: grid; gap: .65rem; max-height: 28rem; margin-top: .9rem; overflow-y: auto; border: 1px solid var(--ff-line); border-radius: .8rem; background: color-mix(in srgb, var(--ff-panel) 88%, var(--ff-bg)); padding: .8rem; }
.live-message { max-width: 78%; border-radius: .75rem; padding: .55rem .7rem; font-size: .76rem; line-height: 1.45; }
.live-message span { display: block; margin-bottom: .2rem; color: var(--ff-muted); font-size: .6rem; font-weight: 800; text-transform: uppercase; }
.live-message .review-coach-label { margin-bottom: .15rem; }
.live-message strong { display: block; margin-bottom: .2rem; color: var(--ff-muted); font-size: .6rem; font-weight: 800; text-transform: uppercase; }
.live-message p { margin: 0; white-space: pre-wrap; }
.live-message.is-user { justify-self: end; background: var(--ff-accent); color: var(--eco-on-cobalt); }
.live-message.is-user span { color: var(--eco-cobalt); }
.live-message.is-assistant { justify-self: start; background: var(--ff-panel); color: var(--ff-ink); box-shadow: 0 1px 3px color-mix(in srgb, var(--eco-ink) 8%, transparent); }
.live-session-actions span, .live-result-muted { color: var(--ff-muted); font-size: .66rem; }
.live-result { margin-top: 1.2rem; border-top: 1px solid var(--ff-line); padding-top: 1rem; }
.live-feedback-score { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-top: .9rem; }
.live-feedback-score strong { display: block; margin-top: .15rem; color: var(--ff-accent); font-size: 2.5rem; line-height: 1; }
.live-feedback-score strong small { color: var(--ff-muted); font-size: .85rem; font-weight: 600; }
.live-feedback-score > span { color: var(--ff-muted); font-size: .68rem; }
.live-general-feedback { margin-top: .9rem; color: var(--ff-ink); font-size: .8rem; line-height: 1.5; }
.live-errors, .live-strengths { margin-top: 1rem; }
.live-errors h3, .live-strengths h3 { color: var(--ff-ink); font-size: .78rem; font-weight: 850; }
.live-error-list { display: grid; gap: .55rem; margin-top: .55rem; }
.live-error-list article { border-left: 3px solid var(--eco-danger); border-radius: .5rem; background: var(--eco-danger-soft); padding: .55rem .7rem; font-size: .72rem; }
.live-error-list article b { display: block; color: var(--eco-danger); }
.live-error-list article > span { display: block; margin-top: .15rem; color: var(--eco-success); font-weight: 750; }
.live-error-list article .review-coach-label { margin: 0; color: var(--ff-muted); }
.live-error-list article strong { display: block; color: var(--eco-success); }
.live-error-list article p { margin-top: .2rem; color: var(--eco-ink-muted); }
.live-strengths ul { margin: .45rem 0 0; padding-left: 1.1rem; color: var(--ff-muted); font-size: .72rem; line-height: 1.55; }
.live-vocabulary { margin-top: 1rem; }
.live-vocabulary h3 { color: var(--ff-ink); font-size: .78rem; font-weight: 850; }
.live-coach-list { display: grid; gap: .55rem; margin: .45rem 0 0; padding: 0; list-style: none; color: var(--ff-ink); font-size: .72rem; }
.live-coach-list li { display: grid; gap: .15rem; }
.live-empty-result { color: var(--ff-muted); font-size: .76rem; }

@media (max-width: 680px) {
  .live-intro, .live-session-heading, .live-result-heading, .live-session-actions { align-items: stretch; flex-direction: column; }
  .live-message { max-width: 92%; }
}

/* Ecoar (DeskEcoar, TelaEcoar): frase solta sobre o fundo à esquerda e o gravador num painel
   escuro de altura inteira à direita. O painel é escuro nos dois temas porque é o "estúdio":
   on-amber é o único token escuro no claro e no escuro, e a borda line o separa da página
   escura. Sem hex solto nem regra html.dark: as cores saem dos tokens por color-mix. */
.echo-stage { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--eco-space-8); min-height: calc(100svh - 6rem); align-items: stretch; }
.echo-phrase { display: flex; min-width: 0; flex-direction: column; gap: var(--eco-space-4); padding-top: var(--eco-space-6); }
.echo-eyebrow { margin: 0; color: var(--eco-cobalt); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.echo-phrase .review-coach-label { margin: 0; }
.echo-phrase-text { margin: 0; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: clamp(2.25rem, 4.2vw, 3.5rem); line-height: 1.02; font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.echo-translation { margin: 0; color: var(--eco-ink-muted); font-size: 18px; line-height: 1.5; }
.echo-model-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--eco-space-3); }
.echo-pill { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 48px; padding: 0 22px; border: 1px solid var(--eco-line-strong); border-radius: var(--eco-radius-pill); background: var(--eco-surface-raised); color: var(--eco-ink); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.echo-pill:hover { border-color: var(--eco-cobalt); color: var(--eco-cobalt); }
.echo-pill:disabled { opacity: 0.6; cursor: progress; }
.echo-model-meta { color: var(--eco-ink-muted); font-size: 13px; }
.echo-link { align-self: center; border: 0; background: transparent; color: inherit; opacity: 0.75; font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.echo-link:hover { opacity: 1; }

.echo-panel { --panel-bg: var(--eco-on-amber); --panel-ink: color-mix(in srgb, var(--eco-on-amber) 7%, white); --panel-muted: color-mix(in srgb, var(--eco-on-amber) 38%, white); display: flex; min-width: 0; flex-direction: column; justify-content: center; border: 1px solid var(--eco-line); border-radius: var(--eco-radius-xl); background: var(--panel-bg); color: var(--panel-ink); padding: 36px 32px; }
.echo-panel .voice-record-zone { display: flex; flex-direction: column; align-items: center; gap: var(--eco-space-6); border: 0; background: transparent; padding: 0; text-align: center; color: inherit; }
.echo-status { padding: 6px 14px; border-radius: var(--eco-radius-pill); background: color-mix(in srgb, var(--eco-amber) 22%, var(--panel-bg)); color: var(--eco-amber); font-size: 13px; font-weight: 700; }
.echo-beats { height: 160px; gap: var(--eco-space-4); }
.echo-beats .eco-beat { width: 60px; border-radius: 16px; }
.echo-panel .eco-beat-done { background: color-mix(in srgb, var(--eco-cobalt) 55%, var(--eco-surface-raised)); }
.echo-panel .eco-beat-todo { background: color-mix(in srgb, var(--eco-cobalt) 35%, var(--panel-bg)); }
.echo-panel .eco-beat-current { border: 4px solid var(--eco-amber); background: color-mix(in srgb, var(--eco-amber) 22%, var(--panel-bg)); }
.echo-rep { margin: 0; color: var(--panel-muted); font-family: var(--eco-font-mono); font-size: 15px; }
.echo-timer { margin: 0; font-family: var(--eco-font-mono); font-size: 56px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.record-btn.echo-record { display: inline-flex; width: 100%; max-width: 360px; height: auto; min-height: 64px; align-items: center; justify-content: center; gap: 10px; border-radius: var(--eco-radius-pill); font-size: 18px; }
.echo-record-glyph { width: 14px; height: 14px; border-radius: 999px; background: currentColor; }
.record-btn.echo-record.recording { background: var(--eco-amber); animation: none; }
.record-btn.echo-record.recording .echo-record-glyph { border-radius: 3px; }
.echo-panel .voice-evaluation-note, .echo-panel .voice-discard { margin: 0; color: var(--panel-muted); font-size: 14px; }
.echo-panel .voice-discard:hover { color: var(--panel-ink); }
.echo-panel .voice-result, .echo-panel .voice-error, .echo-panel .voice-sending { align-items: stretch; text-align: left; }
.echo-panel .voice-result-list li, .echo-panel .voice-result-note, .echo-panel .voice-result-reps, .echo-panel .voice-result-kicker { color: inherit; }

@media (max-width: 767px) {
  .echo-stage { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: var(--eco-space-6); }
  .echo-phrase { padding-top: 0; }
  .echo-panel { padding: 28px 20px; border-radius: var(--eco-radius-lg); }
  .echo-beats { height: 112px; gap: var(--eco-space-3); }
  .echo-beats .eco-beat { width: 44px; border-radius: 12px; }
  .echo-timer { font-size: 44px; }
}

/* Ao sair do foco a lateral volta de 80 para 248 px em 240 ms. Sem largura mínima no conteúdo, o
   texto quebrava linha a linha durante a transição e a lateral parecia desmontada; com ela, o
   conteúdo já nasce na largura final e a lateral só se revela. */
@media (min-width: 1280px) {
  #app-sidebar { overflow-x: hidden; }
  body:not(.focus-mode) #app-sidebar > * { min-width: 14rem; }
}

/* NavDesktop: créditos num poço com o saldo em mono, e a conta com iniciais, nome e "Minha conta". */
.sidebar-footer { display: grid; gap: var(--eco-space-1); }
.sidebar-footer .sidebar-settings[data-view="credits"] { background: var(--eco-surface-sunken); color: var(--eco-ink); }
.sidebar-footer-copy { flex: 1; }
.sidebar-credit-balance { font-family: var(--eco-font-mono); font-weight: 600; color: var(--eco-ink); }
.sidebar-account-copy { display: flex; min-width: 0; flex-direction: column; line-height: 1.2; color: var(--eco-ink); }
.sidebar-account-copy small { color: var(--eco-ink-muted); font-size: 0.7rem; font-weight: 400; }
body.focus-mode .sidebar-credit-balance, body.focus-mode .sidebar-footer-copy, body.focus-mode .sidebar-account-copy { display: none; }
@media (max-width: 1279px) and (min-width: 768px) {
  .sidebar-credit-balance, .sidebar-footer-copy, .sidebar-account-copy { display: none; }
}

/* Hoje (DeskHoje): quatro blocos. Foco em card liso com o título em display, Recado do coach num
   poço cinza, e à direita Depois e Trilhas em linhas simples. Separação por cor de superfície, sem
   degradê, sem círculo e sem sombra: o design system guarda sombra para o card em foco. */
.today-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--eco-space-4); }
.today-date { margin: 0 0 var(--eco-space-1); color: var(--eco-ink-muted); font-size: 15px; }
.today-header h1 { font-family: var(--eco-font-display); font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 700; letter-spacing: -0.02em; }
.today-countdown { flex: none; margin: 0 !important; border-radius: var(--eco-radius-pill); background: var(--eco-ink); color: var(--eco-surface) !important; padding: 10px 18px; font-size: 14px !important; }
.today-countdown b { font-family: var(--eco-font-mono); font-weight: 600; }
.today-countdown .text-eco-success, .today-countdown .text-eco-ink-muted { color: inherit !important; opacity: 0.8; }
.today-grid { grid-template-columns: minmax(0, 1.55fr) minmax(16rem, 0.8fr); gap: var(--eco-space-6); }
.today-primary { display: grid; gap: var(--eco-space-4); }
.today-eyebrow { margin: 0; color: var(--eco-cobalt); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.today-eyebrow.is-muted { color: var(--eco-ink-muted); }
.today-focus { display: flex; flex-direction: column; gap: var(--eco-space-4); border-radius: var(--eco-radius-lg); background: var(--eco-surface-raised); padding: var(--eco-space-8); }
.today-focus-head { display: flex; align-items: center; justify-content: space-between; gap: var(--eco-space-3); }
.today-chip { border-radius: var(--eco-radius-pill); background: var(--eco-surface-sunken); color: var(--eco-ink); padding: 4px 12px; font-size: 13px; font-weight: 700; }
.today-chip.is-done { background: var(--eco-success-soft); color: var(--eco-success); }
.today-focus-title { margin: 0; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: clamp(1.75rem, 3vw, 2.6rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; }
.today-focus-why { margin: 0; max-width: 60ch; color: var(--eco-ink-muted); font-size: 16px; line-height: 1.5; }
.today-focus-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--eco-space-3) var(--eco-space-4); }
.today-cta { display: inline-flex; min-height: var(--eco-size-action); align-items: center; border-radius: var(--eco-radius-pill); background: var(--eco-cobalt); color: var(--eco-on-cobalt); padding: 0 26px; font-size: 16px; font-weight: 700; text-decoration: none; }
.today-cta:hover { background: color-mix(in srgb, var(--eco-cobalt) 88%, var(--eco-ink)); color: var(--eco-on-cobalt); }
.today-cta.is-quiet { background: transparent; color: var(--eco-ink); box-shadow: inset 0 0 0 1px var(--eco-line-strong); }
.today-meta { color: var(--eco-ink-muted); font-family: var(--eco-font-mono); font-size: 14px; }
.today-coach { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--eco-space-4); border-radius: var(--eco-radius-lg); background: var(--eco-surface-sunken); padding: var(--eco-space-6); }
.today-coach-copy { display: grid; min-width: 0; gap: var(--eco-space-2); }
.today-coach-copy .review-coach-label { margin: 0; }
.today-coach-text { color: var(--eco-ink); font-size: 16px; line-height: 1.6; }
.today-coach-status { min-height: 1rem; margin: 0; color: var(--eco-ink-muted); font-size: 13px; }
.today-coach-actions { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: var(--eco-space-2); }
.today-pill { display: inline-flex; min-height: var(--eco-size-touch); align-items: center; gap: 0.4rem; border: 1px solid var(--eco-line-strong); border-radius: var(--eco-radius-pill); background: var(--eco-surface-raised); color: var(--eco-ink); padding: 0 18px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.today-pill:disabled { opacity: 0.5; cursor: default; }
.today-link { border: 0; background: transparent; color: var(--eco-ink-muted); font: inherit; font-size: 13px; cursor: pointer; }
.today-link:hover { color: var(--eco-cobalt); }
.today-side { display: grid; gap: var(--eco-space-2); margin-bottom: var(--eco-space-6); }
.today-side .today-eyebrow { margin-bottom: var(--eco-space-1); }
.today-row, .today-track { display: flex; align-items: center; justify-content: space-between; gap: var(--eco-space-3); border-radius: var(--eco-radius-md); background: var(--eco-surface-raised); padding: 14px 16px; color: var(--eco-ink); text-decoration: none; }
.today-track { flex-direction: column; align-items: stretch; }
.today-row:hover, .today-track:hover { background: var(--eco-cobalt-soft); color: var(--eco-ink); }
.today-row b, .today-track b { display: block; font-size: 15px; }
.today-row small, .today-track small { display: block; color: var(--eco-ink-muted); font-size: 13px; }
.today-listening-count { flex: none; color: var(--eco-cobalt); font-family: var(--eco-font-mono); font-size: 0.78rem; white-space: nowrap; }
.today-count { border-radius: var(--eco-radius-pill); background: var(--eco-cobalt-soft); color: var(--eco-cobalt); padding: 2px 10px; font-family: var(--eco-font-mono); font-size: 13px; }
.today-bar { display: block; height: 6px; overflow: hidden; border-radius: var(--eco-radius-pill); background: var(--eco-cobalt-soft); }
.today-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--eco-cobalt); transition: width var(--eco-dur-fill) var(--eco-ease-in); }
.memory-insights { display: grid; gap: var(--eco-space-4); margin-top: var(--eco-space-6); }

@media (max-width: 767px) {
  .today-header { flex-direction: column; align-items: flex-start; }
  .today-grid { grid-template-columns: minmax(0, 1fr); }
  .today-grid { display: flex; flex-direction: column; align-items: stretch; gap: var(--eco-space-4); }
  .today-primary, .today-secondary { display: contents; }
  #focus-slot { order: 1; }
  .today-grid #today-practice, .today-grid #today-practice:not(:last-child) { order: 2; margin-bottom: 0; }
  .today-primary > :nth-child(2) { order: 3; }
  .today-secondary > :not(#today-practice) { order: 4; }
  .today-focus { padding: var(--eco-space-6); }
  .today-coach { flex-direction: column; }
  .today-coach-actions { flex-direction: row; align-items: center; }
}

/* Revisar (DeskRevisar): barra de progresso no topo, o card em foco é o único com sombra
   (shadow-raised, regra do design system), o termo em display, o exemplo num poço cinza e as
   quatro notas como botões largos com o intervalo em mono. À direita, Nesta sessão, Atalhos
   (os que já funcionam no teclado) e Ecoar este card, no âmbar da voz de quem pratica. */
.rv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--eco-space-8); }
.rv-main { display: flex; min-width: 0; flex-direction: column; gap: 20px; }
.rv-progress { display: flex; align-items: center; gap: var(--eco-space-4); }
.rv-track { display: block; height: 8px; flex: 1; overflow: hidden; border-radius: var(--eco-radius-pill); background: var(--eco-cobalt-soft); }
.rv-track > span { display: block; height: 100%; background: var(--eco-cobalt); transition: width var(--eco-dur-fill) var(--eco-ease-in); }
.rv-count { color: var(--eco-ink-muted); font-family: var(--eco-font-mono); font-size: 15px; }
.rv-card { display: flex; min-height: 22rem; flex-direction: column; gap: 20px; border-radius: 32px; background: var(--eco-surface-raised); box-shadow: var(--eco-shadow-raised); padding: 40px; }
.rv-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--eco-space-3); }
.rv-chip { border-radius: var(--eco-radius-pill); background: var(--eco-cobalt-soft); color: var(--eco-cobalt); padding: 6px 14px; font-size: 13px; font-weight: 700; }
.rv-source { color: var(--eco-ink-muted); font-size: 14px; }
.rv-front .review-coach-label { margin: 0 0 var(--eco-space-2); }
.rv-front .practice-prompt { margin: 0; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: clamp(2rem, 4.2vw, 3.75rem); line-height: 1.02; font-weight: 700; letter-spacing: -0.02em; text-align: left; }
.rv-pill { display: inline-flex; min-height: var(--eco-size-touch); align-self: flex-start; align-items: center; gap: 8px; border: 1px solid var(--eco-line-strong); border-radius: var(--eco-radius-pill); background: var(--eco-surface-raised); color: var(--eco-ink); padding: 0 20px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.rv-pill:disabled { opacity: 0.6; }
.rv-rule { width: 100%; margin: 0; border: 0; border-top: 1px solid var(--eco-line); }
.rv-hint { margin: auto 0 0; color: var(--eco-ink-muted); font-size: 15px; }
.rv-answer { display: grid; gap: var(--eco-space-3); }
.rv-answer-label { margin: 0; color: var(--eco-ink-muted); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.rv-answer-text { margin: 0; color: var(--eco-ink); font-size: 20px; line-height: 1.5; }
.rv-quote { display: grid; gap: var(--eco-space-1); margin: 0; border-radius: var(--eco-radius-md); background: var(--eco-surface-sunken); padding: 16px 20px; font-size: 18px; font-style: italic; line-height: 1.5; }
.rv-quote .review-coach-label { font-style: normal; }
.rv-grades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--eco-space-3); }
.rv-grade { display: flex; min-height: 72px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--eco-line-strong); border-radius: 18px; background: var(--eco-surface-raised); color: var(--eco-ink); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.rv-grade small { color: inherit; opacity: 0.8; font-family: var(--eco-font-mono); font-size: 13px; font-weight: 400; }
.rv-grade.is-1 { border-color: var(--eco-danger); background: var(--eco-danger-soft); color: var(--eco-danger); }
.rv-grade.is-3 { border-color: transparent; background: var(--eco-cobalt); color: var(--eco-on-cobalt); }
.rv-grade.is-4 { border-color: var(--eco-success); background: var(--eco-success-soft); color: var(--eco-success); }
.rv-grade:disabled { opacity: 0.6; cursor: progress; }
.rv-flip { min-height: 72px; border: 0; border-radius: 18px; background: var(--eco-cobalt); color: var(--eco-on-cobalt); font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }
.rv-side { display: flex; flex-direction: column; gap: var(--eco-space-4); }
.rv-side-title { margin: 0; color: var(--eco-ink-muted); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.rv-stats, .rv-keys, .rv-echo { display: grid; gap: var(--eco-space-3); border-radius: 20px; padding: 20px; }
.rv-stats { background: var(--eco-surface-raised); }
.rv-stats p { display: flex; justify-content: space-between; margin: 0; font-size: 15px; }
.rv-stats b { font-family: var(--eco-font-mono); font-weight: 600; }
.rv-keys { background: var(--eco-surface-sunken); }
.rv-keys p:not(.rv-side-title) { margin: 0; font-size: 15px; line-height: 1.7; }
.rv-keys kbd { border: 1px solid var(--eco-line); border-radius: 6px; background: var(--eco-surface-raised); padding: 2px 8px; font-family: var(--eco-font-mono); font-size: 13px; }
.rv-echo { background: var(--eco-amber-soft); color: var(--eco-ink); }
.rv-echo .rv-side-title { color: var(--eco-amber-ink); }
.rv-echo p { margin: 0; font-size: 15px; }
.rv-echo-hint { color: var(--eco-ink-muted); font-size: 13px !important; }
.rv-echo-btn { display: inline-flex; min-height: var(--eco-size-touch); align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: var(--eco-radius-pill); background: var(--eco-amber); color: var(--eco-on-amber); font: inherit; font-weight: 700; cursor: pointer; }

@media (max-width: 1023px) {
  .rv-layout { grid-template-columns: minmax(0, 1fr); }
  .rv-keys { display: none; }
}
@media (max-width: 767px) {
  .rv-card { min-height: 0; border-radius: var(--eco-radius-lg); padding: var(--eco-space-6); }
  .rv-grades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Conversar com o Jake (DeskConversar): mestre-detalhe. À esquerda Jake, a ação principal, as
   outras formas de conversar e a lista; à direita o feedback da conversa escolhida. Superfícies
   planas, sem degradê; o avatar é o símbolo invertido do Jake (âmbar, barras em ink, a do meio
   cobalto), como no design system. */
.hub-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); align-items: start; gap: var(--eco-space-8); }
.hub-left, .hub-start { display: grid; gap: var(--eco-space-3); }
.hub-left { gap: var(--eco-space-4); }
.hub-title { display: flex; align-items: center; gap: var(--eco-space-3); }
.hub-title h1 { margin: 0; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 2rem; line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; }
.hub-avatar { display: flex; flex: none; width: 56px; height: 56px; align-items: flex-end; justify-content: center; gap: 3px; border-radius: 999px; background: var(--eco-amber); padding-bottom: 15px; box-sizing: border-box; }
.hub-avatar span { display: block; width: 5px; border-radius: 3px; background: var(--eco-on-amber); }
.hub-avatar span:nth-child(1) { height: 12px; } .hub-avatar span:nth-child(2) { height: 19px; }
.hub-avatar span:nth-child(3) { height: 25px; background: var(--eco-cobalt); }
.hub-avatar span:nth-child(4) { height: 17px; } .hub-avatar span:nth-child(5) { height: 10px; }
.hub-primary { display: grid; gap: 2px; border-radius: 20px; background: var(--eco-cobalt); color: var(--eco-on-cobalt); padding: 18px 20px; text-decoration: none; }
.hub-primary strong { font-size: 17px; }
.hub-primary span { font-family: var(--eco-font-mono); font-size: 13px; opacity: 0.85; }
.hub-primary:hover { background: color-mix(in srgb, var(--eco-cobalt) 88%, var(--eco-ink)); color: var(--eco-on-cobalt); }
.hub-secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--eco-space-2); }
.hub-secondary a { display: flex; min-height: 48px; align-items: center; justify-content: center; border-radius: 16px; background: var(--eco-surface-raised); color: var(--eco-ink); font-weight: 700; text-decoration: none; }
.hub-secondary a:hover { background: var(--eco-cobalt-soft); color: var(--eco-cobalt); }
.hub-telegram, .hub-muted { margin: 0; color: var(--eco-ink-muted); font-size: 14px; }
.hub-eyebrow { margin: 0; color: var(--eco-cobalt); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.hub-eyebrow.is-muted { color: var(--eco-ink-muted); }
.hub-list { display: grid; gap: var(--eco-space-2); }
.hub-row { display: grid; gap: 2px; border: 0; border-radius: 16px; background: var(--eco-surface-raised); padding: 14px 16px; color: var(--eco-ink); font: inherit; text-align: left; cursor: pointer; }
.hub-row:hover { background: var(--eco-surface-sunken); }
.hub-row.is-active { box-shadow: inset 0 0 0 2px var(--eco-cobalt); }
.hub-row-title { font-weight: 700; }
.hub-row-meta { color: var(--eco-ink-muted); font-size: 13px; }
.hub-detail { display: grid; gap: var(--eco-space-4); border-radius: 24px; background: var(--eco-surface-raised); padding: 28px 32px; }
.hub-detail-head h2 { margin: 0.2rem 0; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 1.75rem; font-weight: 700; }
.hub-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--eco-space-3); }
.hub-stats > div { display: grid; gap: 2px; border-radius: 16px; background: var(--eco-surface-sunken); padding: 14px 16px; }
.hub-stats strong { color: var(--eco-ink); font-family: var(--eco-font-mono); font-size: 28px; font-weight: 600; line-height: 1; }
.hub-stats strong small { color: var(--eco-ink-muted); font-size: 14px; }
.hub-stats span { color: var(--eco-ink-muted); font-size: 13px; }
.hub-general { margin: 0; color: var(--eco-ink); line-height: 1.55; }
.hub-fixes { display: grid; gap: var(--eco-space-3); margin: 0; padding: 0; list-style: none; }
.hub-fixes li { display: grid; gap: 4px; border-bottom: 1px solid var(--eco-line); padding-bottom: var(--eco-space-3); }
.hub-said { margin: 0; color: var(--eco-danger); text-decoration: line-through; }
.hub-correct { display: grid; margin: 0; }
.hub-correct strong { color: var(--eco-success); }
.hub-why { margin: 0; color: var(--eco-ink-muted); font-size: 14px; }
.hub-tag { justify-self: start; border-radius: var(--eco-radius-pill); background: var(--eco-surface-sunken); color: var(--eco-ink-muted); padding: 2px 10px; font-size: 12px; font-weight: 700; }
.hub-well { display: grid; gap: var(--eco-space-2); border-radius: 16px; background: var(--eco-surface-sunken); padding: 16px 18px; }
.hub-well p, .hub-well ul { margin: 0; }
.hub-more summary { cursor: pointer; color: var(--eco-cobalt); font-weight: 700; }
.hub-more[open] { display: grid; gap: var(--eco-space-3); }
.hub-actions { display: flex; flex-wrap: wrap; gap: var(--eco-space-3); }
.hub-cta { display: inline-flex; min-height: 48px; align-items: center; border-radius: var(--eco-radius-pill); background: var(--eco-cobalt); color: var(--eco-on-cobalt); padding: 0 22px; font-weight: 700; text-decoration: none; }
.hub-cta.is-quiet { background: transparent; color: var(--eco-ink); box-shadow: inset 0 0 0 1px var(--eco-line-strong); }

@media (max-width: 1023px) {
  .hub-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .hub-detail { padding: var(--eco-space-6); }
  .hub-stats strong { font-size: 22px; }
}

/* Conversa ao vivo (DeskAoVivo, TelaAoVivo): tela inteira, no tema escolhido (CR5, 28/09). O
   palco já foi escuro fixo em on-amber e ignorava o tema claro; agora usa só tokens de superfície
   e tinta, que o tema escuro redefine — não volte a cor fixa. A voz de quem
   pratica é âmbar; o Jake usa o avatar invertido do design system. Sem lateral nem trilho: é o
   único foco que ocupa a tela toda (README do design system, Navegação). */
.live-stage { --stage-bg: var(--eco-surface); --stage-panel: var(--eco-surface-raised); --stage-ink: var(--eco-ink); --stage-muted: var(--eco-ink-muted); display: flex; min-height: calc(100svh - 3rem); flex-direction: column; gap: var(--eco-space-6); border-radius: var(--eco-radius-xl); background: var(--stage-bg); color: var(--stage-ink); padding: 32px 40px; }
.live-top { display: flex; align-items: center; justify-content: space-between; gap: var(--eco-space-4); }
.live-exit { display: inline-flex; min-height: var(--eco-size-touch); align-items: center; gap: 8px; border-radius: var(--eco-radius-pill); background: var(--stage-panel); color: var(--stage-ink); padding: 0 18px 0 12px; font-weight: 700; text-decoration: none; }
.live-exit:hover { color: var(--stage-ink); box-shadow: inset 0 0 0 1px var(--stage-muted); }
.live-context { margin: 0; color: var(--stage-muted); font-size: 15px; }
.live-clock { font-family: var(--eco-font-mono); font-size: 20px; font-weight: 600; }
.live-clock > span { color: var(--stage-muted); }
.live-grid { display: grid; flex: 1; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; }
.live-jake, .live-said { border-radius: 32px; background: var(--stage-panel); }
.live-jake { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; padding: 32px; }
.live-jake-id { display: grid; justify-items: center; gap: 10px; }
.live-avatar { width: 96px; height: 96px; gap: 5px; padding-bottom: 26px; }
.live-avatar span { width: 8px; border-radius: 4px; }
.live-avatar span:nth-child(1) { height: 20px; } .live-avatar span:nth-child(2) { height: 32px; }
.live-avatar span:nth-child(3) { height: 44px; } .live-avatar span:nth-child(4) { height: 28px; } .live-avatar span:nth-child(5) { height: 16px; }
.live-jake-name { margin: 0; font-size: 24px; font-weight: 700; }
.live-stage .live-status { margin: 0; border: 0; background: transparent; color: var(--stage-muted); font-size: 16px; }
.live-voice { display: flex; height: 120px; align-items: center; gap: 14px; }
.live-voice span { display: block; width: 24px; height: 50%; border-radius: 12px; background: color-mix(in srgb, var(--eco-amber) 30%, var(--stage-panel)); transition: height var(--eco-dur-press) linear, background-color var(--eco-dur-fill) var(--eco-ease-in); }
.live-voice.is-on span { background: var(--eco-amber); }
.live-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.live-btn { display: inline-flex; min-height: 56px; align-items: center; gap: 8px; border: 1px solid var(--stage-muted); border-radius: var(--eco-radius-pill); background: var(--stage-bg); color: var(--stage-ink); padding: 0 28px; font: inherit; font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer; }
.live-btn.is-primary { border-color: transparent; background: var(--eco-cobalt); color: var(--eco-on-cobalt); }
.live-btn:disabled { opacity: 0.6; cursor: progress; }
.live-said { display: flex; min-width: 0; flex-direction: column; gap: 14px; padding: 28px; }
.live-said-title { margin: 0; color: var(--stage-muted); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.live-stage .live-messages { display: flex; max-height: 26rem; flex: 1; flex-direction: column; gap: 12px; overflow-y: auto; border: 0; background: transparent; padding: 0; }
.live-said-empty { margin: 0; color: var(--stage-muted); font-size: 15px; }
.live-stage .live-message { max-width: 85%; border: 0; border-radius: 18px 18px 18px 4px; background: var(--stage-bg); padding: 12px 16px; color: var(--stage-ink); }
.live-stage .live-message.is-user { align-self: flex-end; border-radius: 18px 18px 4px 18px; background: var(--eco-cobalt-soft); }
.live-stage .live-message strong { display: flex; align-items: baseline; gap: 8px; color: var(--eco-amber-ink); font-size: 13px; }
.live-stage .live-message.is-user strong { color: var(--eco-cobalt); }
.live-stage .live-message .review-coach-label { color: var(--stage-muted); }
.live-stage .live-message p { margin: 2px 0 0; font-size: 16px; line-height: 1.45; }
.live-type { display: grid; gap: 6px; }
.live-type label { font-size: 14px; font-weight: 700; }
.live-type-row { display: flex; gap: 8px; }
.live-type-row input { min-height: 48px; flex: 1; box-sizing: border-box; border: 1px solid var(--stage-muted); border-radius: 12px; background: var(--stage-bg); color: var(--stage-ink); padding: 0 16px; font: inherit; font-size: 16px; }
.live-type-row input::placeholder { color: var(--stage-muted); }
.live-send { border: 0; border-radius: 12px; background: var(--stage-bg); color: var(--stage-ink); padding: 0 16px; font: inherit; font-weight: 700; cursor: pointer; }
.live-send:disabled, .live-type-row input:disabled { opacity: 0.5; }
.live-note { margin: 0; color: var(--stage-muted); font-size: 14px; text-align: center; }
.live-meter { margin: 0; border-radius: var(--eco-radius-pill); background: var(--stage-bg); color: var(--stage-ink); padding: 6px 14px; font-size: 14px; font-weight: 700; }
.live-meter[hidden] { display: none; }
.live-used { margin: 0 0 var(--eco-space-3); color: var(--stage-ink); font-weight: 700; }
.live-stage .live-result { border-top: 1px solid var(--stage-muted); padding-top: var(--eco-space-4); color: var(--stage-ink); }
.live-stage .live-result h2 { color: var(--stage-ink); }
body.focus-full #app-sidebar { display: none; }
body.focus-full .workspace { margin-left: 0; }

@media (max-width: 767px) {
  .live-stage { min-height: calc(100svh - 6rem); border-radius: var(--eco-radius-lg); padding: 20px 16px; }
  .live-context { display: none; }
  .live-grid { grid-template-columns: minmax(0, 1fr); }
  .live-jake { gap: 28px; padding: 24px 16px; }
  .live-voice { height: 96px; gap: 10px; }
  .live-voice span { width: 18px; }
  .live-controls { display: grid; width: 100%; grid-template-columns: 1fr 2fr; }
  .live-btn { justify-content: center; padding: 0 16px; }
}
/* O palco ao vivo ocupa a largura toda, como no quadro; o limite de 66rem era do layout antigo. */
.live-focus-route.live-stage { display: flex; max-width: none; margin: 0; }

/* Conversa por turnos (DeskTurnos): foco claro com o trilho de 80 px. Jake em bolha branca à
   esquerda com Ouvir embaixo; você em bolha âmbar-soft à direita, porque é a sua voz transcrita.
   O botão redondo de gravar segue a regra da marca (âmbar), mesmo onde o quadro o pintou cobalto. */
.live-focus-route.turn-route { display: grid; max-width: none; margin: 0; gap: var(--eco-space-6); }
.turn-top { display: flex; align-items: center; justify-content: space-between; gap: var(--eco-space-3); }
.turn-exit { display: inline-flex; min-height: var(--eco-size-touch); align-items: center; gap: 6px; border-radius: var(--eco-radius-pill); background: var(--eco-surface-raised); color: var(--eco-ink); padding: 0 18px 0 12px; font-size: 15px; font-weight: 700; text-decoration: none; }
.turn-meta { color: var(--eco-ink-muted); font-family: var(--eco-font-mono); font-size: 14px; }
.turn-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: var(--eco-space-8); }
.turn-main { display: flex; max-width: 760px; min-width: 0; flex-direction: column; gap: var(--eco-space-4); }
.turn-title { margin: 0; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 32px; font-weight: 700; letter-spacing: -0.02em; }
.turn-lead { margin: 0; color: var(--eco-ink-muted); font-size: 15px; }
.turn-chat { display: flex; flex-direction: column; gap: var(--eco-space-4); }
.turn-chat .live-message { display: grid; max-width: 560px; gap: 6px; border: 0; background: transparent; padding: 0; }
.turn-chat .live-message.is-user { align-self: flex-end; }
.turn-who { color: var(--eco-ink-muted); font-size: 12px; font-weight: 700; }
.turn-who .review-coach-label { margin-left: 6px; }
.turn-chat .live-message p { margin: 0; border-radius: 18px 18px 18px 4px; background: var(--eco-surface-raised); padding: 14px 18px; color: var(--eco-ink); font-size: 17px; line-height: 1.45; }
.turn-chat .live-message.is-user p { border-radius: 18px 18px 4px 18px; background: var(--eco-amber-soft); }
.turn-listen { display: inline-flex; min-height: 36px; align-self: flex-start; align-items: center; gap: 6px; border: 0; border-radius: var(--eco-radius-pill); background: var(--eco-cobalt-soft); color: var(--eco-cobalt); padding: 0 14px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.turn-compose { display: grid; gap: 6px; }
.turn-compose label { font-size: 14px; font-weight: 700; }
.turn-compose-row { display: flex; align-items: center; gap: 10px; }
.turn-compose-row input { min-height: 56px; flex: 1; box-sizing: border-box; border: 1px solid var(--eco-line-strong); border-radius: 16px; background: var(--eco-surface-raised); color: var(--eco-ink); padding: 0 18px; font: inherit; font-size: 16px; }
.turn-send { min-height: 56px; border: 0; border-radius: 16px; background: var(--eco-surface-sunken); color: var(--eco-ink); padding: 0 18px; font: inherit; font-weight: 700; cursor: pointer; }
.turn-record.btn { display: inline-flex; width: 64px; height: 64px; min-height: 64px; flex: none; align-items: center; justify-content: center; border-radius: 999px; padding: 0; }
.turn-record.is-recording { box-shadow: 0 0 0 4px var(--eco-amber-soft); }
.turn-start { display: inline-flex; min-height: var(--eco-size-action); justify-self: start; align-items: center; gap: 8px; border: 0; border-radius: var(--eco-radius-pill); background: var(--eco-cobalt); color: var(--eco-on-cobalt); padding: 0 26px; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.turn-status { margin: 0; color: var(--eco-ink-muted); font-size: 14px; }
.turn-side { display: grid; gap: var(--eco-space-3); border-radius: 20px; background: var(--eco-surface-raised); padding: 22px; }
.turn-side h2 { margin: 0; color: var(--eco-ink); font-size: 18px; font-weight: 700; }
.turn-side-note { margin: 0; color: var(--eco-ink-muted); font-size: 14px; }
.turn-clock { color: var(--eco-ink); font-family: var(--eco-font-mono); }
.turn-end { display: flex; min-height: 52px; align-items: center; justify-content: center; border: 1px solid var(--eco-line-strong); border-radius: 16px; background: var(--eco-surface-raised); color: var(--eco-ink); font: inherit; font-size: 17px; font-weight: 700; text-decoration: none; cursor: pointer; }
.turn-end:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 1023px) {
  .turn-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .turn-meta { display: none; }
  .turn-send { display: none; }
}

/* Trilhas (DeskTrilhas): título em display com o seletor segmentado à direita; no Curso, uma faixa
   escura com uma barra por sessão (a da semana em âmbar), a sessão da semana com o checklist e a
   próxima com Liberar antes. Superfícies planas; a faixa usa on-amber, escuro nos dois temas. */
.tr-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--eco-space-4); margin-bottom: var(--eco-space-6); }
.tr-head h1 { margin: 0; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 40px; font-weight: 700; letter-spacing: -0.02em; }
.tr-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-radius: var(--eco-radius-pill); background: var(--eco-surface-sunken); padding: 4px; }
.tr-tab { min-height: 40px; border: 0; border-radius: var(--eco-radius-pill); background: transparent; color: var(--eco-ink-muted); padding: 0 18px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.tr-tab.is-active { background: var(--eco-surface-raised); color: var(--eco-ink); }
.tr-ribbon { --r-bg: var(--eco-on-amber); display: grid; gap: var(--eco-space-3); margin-bottom: var(--eco-space-6); border-radius: 24px; background: var(--r-bg); color: color-mix(in srgb, var(--eco-on-amber) 7%, white); padding: 22px 26px; }
.tr-ribbon-head, .tr-ribbon-foot { display: flex; justify-content: space-between; gap: var(--eco-space-3); }
.tr-ribbon-head { font-weight: 700; }
.tr-ribbon-head span:last-child, .tr-ribbon-foot { color: color-mix(in srgb, var(--eco-on-amber) 38%, white); font-family: var(--eco-font-mono); font-size: 13px; font-weight: 400; }
.tr-segs { display: flex; gap: 6px; }
.tr-seg { height: 14px; flex: 1; border-radius: 7px; background: color-mix(in srgb, white 14%, var(--r-bg)); }
.tr-seg.is-done { background: color-mix(in srgb, var(--eco-cobalt) 55%, white); }
.tr-seg.is-current { background: color-mix(in srgb, var(--eco-amber) 30%, var(--r-bg)); box-shadow: inset 0 0 0 2px var(--eco-amber); }
.tr-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; gap: var(--eco-space-4); margin-bottom: var(--eco-space-6); }
.tr-side { display: grid; gap: var(--eco-space-4); }
.tr-card { display: grid; gap: var(--eco-space-3); border-radius: 20px; background: var(--eco-surface-raised); padding: 22px; }
.tr-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--eco-space-2); }
.tr-card h2, .tr-well h2 { margin: 0; color: var(--eco-ink); font-size: 20px; font-weight: 700; }
.tr-chip { border-radius: var(--eco-radius-pill); background: var(--eco-amber-soft); color: var(--eco-amber-ink); padding: 4px 12px; font-size: 13px; font-weight: 700; }
.tr-muted, .tr-well p { margin: 0; color: var(--eco-ink-muted); font-size: 14px; }
.tr-items { display: grid; gap: var(--eco-space-2); margin: 0; padding: 0; list-style: none; }
.tr-item { display: flex; align-items: center; justify-content: space-between; gap: var(--eco-space-3); border-radius: 14px; background: var(--eco-surface); padding: 12px 14px; }
.tr-item label { display: flex; min-width: 0; align-items: center; gap: 10px; color: var(--eco-ink); font-size: 15px; }
.tr-item input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--eco-cobalt); }
/* Com vídeo (106) a linha tem duas ações; elas não encolhem, quem quebra é o título. */
.tr-item-actions { display: flex; flex-shrink: 0; gap: 8px; }
.track-checklist-video { color: var(--eco-cobalt); font-size: 13px; font-weight: 700; text-decoration: none; }
.tr-item.is-done label span { color: var(--eco-ink-muted); }
.tr-item-state { color: var(--eco-success); font-size: 13px; font-weight: 700; }
.tr-item-action { border: 0; border-radius: var(--eco-radius-pill); background: var(--eco-cobalt-soft); color: var(--eco-cobalt); padding: 6px 14px; font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; }
.tr-quiet { min-height: var(--eco-size-touch); border: 1px solid var(--eco-line-strong); border-radius: var(--eco-radius-pill); background: var(--eco-surface-raised); color: var(--eco-ink); font: inherit; font-weight: 700; cursor: pointer; }
.tr-well { display: grid; gap: var(--eco-space-2); border-radius: 20px; background: var(--eco-surface-sunken); padding: 20px 22px; }
.tr-link { justify-self: start; border: 0; background: transparent; color: var(--eco-cobalt); padding: 0; font: inherit; font-weight: 700; cursor: pointer; }
.tr-all summary { cursor: pointer; color: var(--eco-cobalt); font-weight: 700; }
.tr-all[open] summary { margin-bottom: var(--eco-space-3); }

@media (max-width: 1023px) {
  .tr-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .tr-head h1 { font-size: 32px; }
  .tr-tabs { width: 100%; }
  .tr-tab { flex: 1; padding: 0 10px; }
  .tr-ribbon-foot span:nth-child(2) { display: none; }
}

/* Créditos (DeskCreditos): duas colunas. Saldo num card escuro (on-amber, escuro nos dois temas)
   com o número em mono; pacotes como lista de escolha; custos em linhas com o número em mono. */
.cr-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--eco-space-8); }
.cr-col { display: grid; min-width: 0; gap: var(--eco-space-4); }
.cr-title { margin: 0; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 40px; font-weight: 700; letter-spacing: -0.02em; }
.cr-balance { display: grid; gap: var(--eco-space-3); border-radius: 24px; background: var(--eco-on-amber); color: color-mix(in srgb, var(--eco-on-amber) 7%, white); padding: 24px 26px; }
.cr-balance-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--eco-space-3); }
.cr-balance-row span, .cr-balance p { color: color-mix(in srgb, var(--eco-on-amber) 38%, white); font-size: 15px; }
.cr-balance-row strong { font-family: var(--eco-font-mono); font-size: 56px; font-weight: 600; line-height: 1; }
.cr-balance-row.is-small strong { font-size: 28px; }
.cr-balance p { margin: 0; }
.cr-balance.is-off p { color: inherit; }
.cr-card { display: grid; gap: var(--eco-space-3); margin: 0; border: 0; border-radius: 20px; background: var(--eco-surface-raised); padding: 22px 24px; }
.cr-card h2, .cr-packages legend { margin: 0; color: var(--eco-ink); font-size: 20px; font-weight: 700; }
.cr-packages legend { float: left; width: 100%; margin-bottom: var(--eco-space-2); }
.cr-package { display: flex; align-items: center; gap: var(--eco-space-3); border-radius: 14px; background: var(--eco-surface); padding: 14px 16px; color: var(--eco-ink); cursor: pointer; }
.cr-package:has(input:checked) { background: var(--eco-cobalt-soft); }
.cr-package input { width: 18px; height: 18px; accent-color: var(--eco-cobalt); }
.cr-package span { flex: 1; font-weight: 700; }
.cr-package strong { font-family: var(--eco-font-mono); font-weight: 600; }
.cr-pay { min-height: var(--eco-size-action); border: 0; border-radius: var(--eco-radius-pill); background: var(--eco-cobalt); color: var(--eco-on-cobalt); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.cr-muted { margin: 0; color: var(--eco-ink-muted); font-size: 14px; }
.cr-prices { display: grid; }
.cr-price { display: flex; justify-content: space-between; gap: var(--eco-space-3); border-bottom: 1px solid var(--eco-line); padding: 10px 0; color: var(--eco-ink); font-size: 15px; }
.cr-price strong { font-family: var(--eco-font-mono); font-weight: 600; }
.cr-more summary { cursor: pointer; color: var(--eco-cobalt); font-weight: 700; }

@media (max-width: 1023px) {
  .cr-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Plano mensal (D201, fatia 4; quadros AssMontar, AssMes e AssDesk): uma coluna estreita no
   celular, cartões claros, números em mono. Cobalto é ação; o âmbar fica para a voz. */
.pl-page { display: grid; gap: var(--eco-space-4); max-width: 720px; }
.pl-title { margin: 0; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 36px; font-weight: 700; letter-spacing: -0.02em; outline: none; }
.pl-lead { margin: 0; color: var(--eco-ink-muted); font-size: 16px; }
.pl-card { display: grid; gap: var(--eco-space-3); border-radius: 20px; background: var(--eco-surface-raised); padding: 20px 22px; color: var(--eco-ink); }
.pl-card h2 { margin: 0; font-size: 18px; font-weight: 700; }
.pl-card p { margin: 0; }
.pl-muted { margin: 0; color: var(--eco-ink-muted); font-size: 14px; }
.pl-eyebrow { margin: 0; color: var(--eco-ink-muted); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.pl-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--eco-space-3); }
.pl-preset.is-featured { box-shadow: inset 0 0 0 2px var(--eco-cobalt); }
.pl-preset-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--eco-space-2); }
.pl-preset-head strong { font-family: var(--eco-font-mono); font-weight: 600; }
.pl-preset-head small { color: var(--eco-ink-muted); font-size: 13px; }
.pl-back { justify-self: start; min-height: var(--eco-size-touch); border: 0; border-radius: var(--eco-radius-pill); background: var(--eco-surface-raised); color: var(--eco-ink); padding: 0 16px 0 12px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.pl-rows { gap: 0; padding-top: 6px; padding-bottom: 6px; }
.pl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 150px 90px; align-items: center; gap: var(--eco-space-3); border-top: 1px solid var(--eco-line); padding: 12px 0; }
.pl-row:first-child { border-top: 0; }
.pl-row-name { display: grid; gap: 2px; min-width: 0; }
.pl-row-uses { color: var(--eco-ink-muted); font-size: 14px; }
.pl-row-cents { font-family: var(--eco-font-mono); text-align: right; }
.pl-stepper { display: inline-flex; align-items: center; gap: 10px; }
.pl-step { width: var(--eco-size-touch); height: var(--eco-size-touch); border: 1px solid var(--eco-line-strong); border-radius: 999px; background: var(--eco-surface-raised); color: var(--eco-ink); font: inherit; font-size: 22px; font-weight: 700; cursor: pointer; }
.pl-step:disabled { cursor: not-allowed; opacity: 0.4; }
.pl-step:focus-visible, .pl-back:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--eco-surface), 0 0 0 4px var(--eco-focus); }
.pl-count { min-width: 36px; font-family: var(--eco-font-mono); font-size: 20px; font-weight: 600; text-align: center; }
.pl-total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--eco-space-3); color: var(--eco-ink-muted); }
.pl-total strong { color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 32px; }
.pl-line { display: flex; align-items: center; justify-content: space-between; gap: var(--eco-space-3); font-size: 15px; }
.pl-line b { font-family: var(--eco-font-mono); font-weight: 600; text-align: right; }
.pl-line.is-total { border-top: 1px solid var(--eco-line); padding-top: 10px; }
.pl-usage { display: grid; gap: 6px; }
.pl-plan-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--eco-space-2); }
.pl-plan-head b { font-family: var(--eco-font-mono); font-weight: 600; }
.pl-bar { height: 10px; border-radius: 999px; background: var(--eco-surface-sunken); overflow: hidden; }
.pl-bar span { display: block; height: 100%; border-radius: 999px; background: var(--eco-cobalt); }
.pl-actions { display: flex; flex-wrap: wrap; gap: var(--eco-space-2); }
.pl-alert { box-shadow: inset 0 0 0 2px var(--eco-danger); }
.pl-ranout { background: var(--eco-cobalt-soft); }
.pl-scheduled { box-shadow: inset 0 0 0 2px var(--eco-cobalt-soft); }
.pl-scheduled .eco-btn { justify-self: start; }
.pl-notice { box-shadow: inset 0 0 0 2px var(--eco-cobalt); }
.pl-field { display: grid; gap: 6px; font-weight: 700; }
.pl-field select { min-height: var(--eco-size-touch); border: 1px solid var(--eco-line-strong); border-radius: 12px; background: var(--eco-surface-raised); color: var(--eco-ink); padding: 0 12px; font: inherit; }
.pl-result { border-radius: 12px; background: var(--eco-cobalt-soft); padding: 10px 12px; font-size: 15px; }
.cr-plan .eco-btn { justify-self: start; text-decoration: none; }

@media (max-width: 767px) {
  .pl-presets { grid-template-columns: minmax(0, 1fr); }
  .pl-row { grid-template-columns: minmax(0, 1fr) auto; }
  .pl-row-uses { grid-column: 1; }
  .pl-row-cents { grid-column: 2; }
  .pl-title { font-size: 28px; }
}

/* Fluência verbal (DeskFluencia): à esquerda o título, o seletor Texto · grátis / Voz · 1 crédito e
   a rodada; à direita quatro números em mono, a última rodada e o histórico. Gravar é âmbar. */
.vf-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; gap: var(--eco-space-8); }
.vf-main-col, .vf-side-col { display: grid; min-width: 0; gap: var(--eco-space-4); }
.vf-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--eco-space-4); }
.vf-head h1 { margin: 0; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 40px; font-weight: 700; letter-spacing: -0.02em; }
.vf-head p { margin: 4px 0 0; color: var(--eco-ink-muted); }
.vf-toggle { display: flex; gap: 4px; border-radius: var(--eco-radius-pill); background: var(--eco-surface-sunken); padding: 4px; }
.vf-toggle button { min-height: 40px; border: 0; border-radius: var(--eco-radius-pill); background: transparent; color: var(--eco-ink-muted); padding: 0 16px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.vf-toggle button[aria-pressed="true"] { background: var(--eco-surface-raised); color: var(--eco-ink); }
.vf-panel { display: grid; gap: var(--eco-space-3); border-radius: 24px; background: var(--eco-surface-raised); padding: 24px; }
.vf-kicker { margin: 0; color: var(--eco-ink-muted); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.vf-muted { margin: 0; color: var(--eco-ink-muted); font-size: 14px; }
.vf-go { display: inline-flex; min-height: var(--eco-size-action); justify-self: start; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: var(--eco-radius-pill); background: var(--eco-cobalt); color: var(--eco-on-cobalt); padding: 0 26px; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.vf-go.is-voice { background: var(--eco-amber); color: var(--eco-on-amber); }
.vf-go:disabled { opacity: 0.6; cursor: progress; }
.vf-rec-line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--eco-space-3); color: var(--eco-amber-ink); font-weight: 700; }
.vf-rec-line strong { color: var(--eco-ink); font-family: var(--eco-font-mono); font-size: 32px; font-weight: 600; }
.vf-bar { display: block; height: 8px; overflow: hidden; border-radius: var(--eco-radius-pill); background: var(--eco-amber-soft); }
.vf-bar > span { display: block; height: 100%; background: var(--eco-amber); transition: width var(--eco-dur-fill) var(--eco-ease-in); }
.vf-voice-box { display: grid; gap: var(--eco-space-3); }
.vf-wave { display: flex; height: 64px; align-items: center; justify-content: center; gap: 10px; }
.vf-wave span { display: block; width: 16px; border-radius: 8px; background: var(--eco-amber-soft); }
.vf-wave span:nth-child(1) { height: 28px; } .vf-wave span:nth-child(2) { height: 46px; } .vf-wave span:nth-child(3) { height: 60px; }
.vf-wave span:nth-child(4) { height: 40px; } .vf-wave span:nth-child(5) { height: 22px; }
.vf-wave.is-on span { background: var(--eco-amber); }
.vf-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--eco-space-3); }
.vf-stats > div { display: grid; gap: 4px; border-radius: 18px; background: var(--eco-surface-raised); padding: 16px 18px; }
.vf-stats strong { color: var(--eco-ink); font-family: var(--eco-font-mono); font-size: 30px; font-weight: 600; line-height: 1; }
.vf-stats span { color: var(--eco-ink-muted); font-size: 13px; }
.vf-last { margin: 0; color: var(--eco-ink); }
.vf-row { display: flex; justify-content: space-between; gap: var(--eco-space-3); border-bottom: 1px solid var(--eco-line); padding: 8px 0; color: var(--eco-ink); font-size: 14px; }
.vf-row strong { font-family: var(--eco-font-mono); }
.vf-workspace-main .vf-letter-panel { border-radius: 16px; background: var(--eco-surface-sunken); }
.vf-result { display: grid; gap: var(--eco-space-3); }

@media (max-width: 1023px) {
  .vf-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Configurações (DeskConfiguracoes): "← Minha conta" e título em display, a regra do ↺ à direita;
   grupos em cartões planos de duas colunas, uma linha por campo com o padrão embaixo do nome e
   o ↺ redondo; a zona de perigo é uma faixa danger-soft no fim. */
.st-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--eco-space-4); margin-bottom: var(--eco-space-6); }
.st-head h1 { margin: 0; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 40px; font-weight: 700; line-height: 1.05; }
.st-head p { margin: 0; color: var(--eco-ink-muted); font-size: 15px; }
.st-back { color: var(--eco-cobalt); font-size: 15px; font-weight: 700; text-decoration: none; }
.st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 20px; margin-bottom: 20px; }
.st-card { display: flex; min-width: 0; flex-direction: column; gap: 6px; border-radius: 22px; background: var(--eco-surface-raised); padding: 22px 24px; }
.st-card h2 { margin: 0 0 6px; color: var(--eco-ink); font-size: 18px; font-weight: 700; }
.st-row { display: flex; min-height: 52px; align-items: center; gap: 12px; border-bottom: 1px solid var(--eco-line); padding: 6px 0; }
.st-card > .st-row:last-child, .st-advanced > .st-row:last-child { border-bottom: 0; }
.st-label { display: flex; min-width: 0; flex: 1; flex-direction: column; color: var(--eco-ink); }
.st-label > span { color: var(--eco-ink-muted); font-size: 13px; }
.st-mine { border-radius: var(--eco-radius-pill); background: var(--eco-cobalt-soft); color: var(--eco-cobalt); padding: 1px 8px; font-size: 12px; }
.st-actions { display: flex; flex-shrink: 0; align-items: center; gap: 8px; }
.st-control { min-height: 44px; box-sizing: border-box; border: 1px solid var(--eco-line-strong); border-radius: 12px; background: var(--eco-surface-raised); color: var(--eco-ink); padding: 0 12px; font: inherit; font-size: 15px; }
.st-control.is-number { width: 88px; font-family: var(--eco-font-mono); font-size: 16px; }
.st-control.is-text { width: 14rem; }
.st-check { width: 24px; height: 24px; accent-color: var(--eco-cobalt); }
.st-reset { width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--eco-line); border-radius: 999px; background: var(--eco-surface-raised); color: var(--eco-ink-muted); font-size: 18px; cursor: pointer; }
.st-reset:disabled { opacity: 0.35; cursor: default; }
.st-note { margin: 0; color: var(--eco-ink-muted); font-size: 13px; line-height: 1.5; }
.st-warn { margin: 0; border-radius: 12px; background: var(--eco-surface-sunken); color: var(--eco-ink); padding: 10px 12px; font-size: 14px; }
.st-url { margin: 0; overflow-wrap: anywhere; border-radius: 12px; background: var(--eco-surface-sunken); color: var(--eco-ink-muted); padding: 8px 10px; font-family: var(--eco-font-mono); font-size: 12px; }
.st-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.st-quiet, .st-primary { min-height: 44px; flex-shrink: 0; border-radius: var(--eco-radius-pill); padding: 0 18px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.st-quiet { border: 1px solid var(--eco-line-strong); background: var(--eco-surface-raised); color: var(--eco-ink); }
.st-primary { border: 0; background: var(--eco-cobalt); color: var(--eco-on-cobalt); }
.st-advanced summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; cursor: pointer; list-style: none; }
.st-advanced summary span { color: var(--eco-ink-muted); font-size: 13px; }
.st-danger { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; border-radius: 22px; background: var(--eco-danger-soft); color: var(--eco-ink); padding: 20px 24px; }
.st-danger-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 6px; }
.st-danger h2 { margin: 0; color: var(--eco-danger); font-size: 18px; font-weight: 700; }
.st-danger p { margin: 0; font-size: 14px; line-height: 1.5; }
.st-danger.is-done h2 { color: var(--eco-success); }
.st-danger-btn { min-height: 48px; flex-shrink: 0; border: 1px solid var(--eco-danger); border-radius: var(--eco-radius-pill); background: var(--eco-surface-raised); color: var(--eco-danger); padding: 0 20px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.st-danger-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.st-danger-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.st-danger-head { color: var(--eco-danger); font-weight: 700; }
.st-danger-head.is-kept { color: var(--eco-success); }
.st-groups { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.st-group { display: flex; flex-direction: column; font-size: 14px; }
.st-group > span { color: var(--eco-ink-muted); font-size: 13px; }
.st-bad { color: var(--eco-danger); } .st-good { color: var(--eco-success); } .st-muted { color: var(--eco-ink-muted); }
.st-sub, .st-advanced { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--eco-line); padding-top: 12px; margin-top: 6px; }
.st-sub h3, .st-advanced h3 { margin: 0; color: var(--eco-ink); font-size: 15px; font-weight: 700; }
.st-foot { margin: 16px 0 0; color: var(--eco-ink-muted); font-size: 13px; }

@media (max-width: 1023px) {
  .st-grid, .st-danger-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .st-head h1 { font-size: 32px; }
  .st-row { flex-wrap: wrap; }
  .st-control.is-text { width: 100%; }
}

/* Agenda (DeskAgenda): duas colunas 1.2fr / 1fr. À esquerda título e Novo compromisso, a faixa
   cobalto do próximo e a linha do tempo numa folha só (hora em mono | o quê | ação); à direita o
   evento-alvo num card escuro (on-amber, escuro nos dois temas), as rotinas e o link .ics. */
.ag-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; gap: 28px; }
.ag-col { display: flex; min-width: 0; flex-direction: column; gap: 18px; }
.ag-head { display: flex; align-items: center; justify-content: space-between; gap: var(--eco-space-3); }
.ag-head h1 { margin: 0; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 40px; font-weight: 700; line-height: 1.05; }
.ag-new { min-height: 48px; border: 0; border-radius: var(--eco-radius-pill); background: var(--eco-cobalt); color: var(--eco-on-cobalt); padding: 0 20px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.ag-next { display: flex; align-items: center; justify-content: space-between; gap: var(--eco-space-4); border-radius: 22px; background: var(--eco-cobalt); color: var(--eco-on-cobalt); padding: 22px 24px; }
.ag-next > div { display: flex; flex-direction: column; gap: 4px; }
.ag-next-kicker { color: color-mix(in srgb, var(--eco-on-cobalt) 80%, var(--eco-cobalt)); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ag-next-title { font-size: 22px; font-weight: 700; }
.ag-next-when { max-width: 50%; font-family: var(--eco-font-mono); font-size: 16px; text-align: right; }
.ag-next.is-empty { flex-direction: column; align-items: flex-start; gap: 4px; }
.ag-card { display: flex; flex-direction: column; gap: 10px; border-radius: 22px; background: var(--eco-surface-raised); padding: 8px 24px 16px; }
.ag-card > h2 { margin: 14px 0 0; color: var(--eco-ink); font-size: 18px; font-weight: 700; }
.ag-kicker { margin: 14px 0 6px; color: var(--eco-ink-muted); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ag-group.is-past { opacity: 0.7; }
.ag-rows { margin: 0; padding: 0; list-style: none; }
.ag-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; align-items: center; gap: 16px; border-top: 1px solid var(--eco-line); padding: 12px 0; }
.ag-row.is-muted .ag-what { opacity: 0.6; }
.ag-row > .agenda-move-box, .ag-row > .agenda-prep { grid-column: 1 / -1; }
.ag-time { color: var(--eco-ink-muted); font-family: var(--eco-font-mono); }
.ag-what { display: flex; min-width: 0; flex-direction: column; color: var(--eco-ink); }
.ag-what > span { color: var(--eco-ink-muted); font-size: 14px; }
.ag-what .ag-notes { font-size: 13px; }
.ag-mark { border-radius: var(--eco-radius-pill); background: var(--eco-surface-sunken); color: var(--eco-ink-muted); padding: 1px 8px; font-size: 12px; font-weight: 700; }
.ag-mark.is-done { background: var(--eco-success-soft); color: var(--eco-success); }
.ag-actions { display: flex; align-items: center; gap: 6px; }
.ag-btn { display: inline-flex; min-height: 40px; align-items: center; border: 1px solid var(--eco-line-strong); border-radius: var(--eco-radius-pill); background: var(--eco-surface-raised); color: var(--eco-ink); padding: 0 14px; font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; }
.ag-btn.is-primary { border-color: var(--eco-cobalt); background: var(--eco-cobalt); color: var(--eco-on-cobalt); }
.ag-btn.is-danger { border-color: var(--eco-danger); color: var(--eco-danger); }
.ag-link { border: 0; background: transparent; color: var(--eco-ink-muted); font: inherit; font-size: 14px; cursor: pointer; }
.ag-more { position: relative; }
.ag-more-toggle { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 999px; color: var(--eco-ink-muted); font-weight: 700; cursor: pointer; list-style: none; }
.ag-more-toggle::-webkit-details-marker { display: none; }
.ag-more-menu { position: absolute; right: 0; z-index: 5; display: grid; min-width: 9rem; border: 1px solid var(--eco-line); border-radius: 14px; background: var(--eco-surface-raised); padding: 6px; box-shadow: var(--eco-shadow-raised); }
.ag-more-menu button { border: 0; border-radius: 10px; background: transparent; color: var(--eco-ink); padding: 8px 10px; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.ag-more-menu button:hover { background: var(--eco-surface-sunken); }
.ag-more-menu .is-danger { color: var(--eco-danger); }
.ag-move { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-radius: 14px; background: var(--eco-surface-sunken); padding: 10px 12px; color: var(--eco-ink); font-size: 14px; }
.ag-move input { min-height: 40px; border: 1px solid var(--eco-line-strong); border-radius: 12px; background: var(--eco-surface-raised); color: var(--eco-ink); padding: 0 10px; font: inherit; }
.ag-target { --t-bg: var(--eco-on-amber); display: flex; flex-direction: column; gap: 14px; border-radius: 26px; background: var(--t-bg); color: color-mix(in srgb, var(--t-bg) 7%, white); padding: 26px; }
.ag-target-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--eco-space-3); }
.ag-target-head > span:first-child { color: var(--eco-amber); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ag-target-head .ag-mono { color: color-mix(in srgb, var(--t-bg) 38%, white); font-size: 14px; }
.ag-target h2 { margin: 0; font-family: var(--eco-font-display); font-size: 30px; font-weight: 700; }
.ag-target p { margin: 0; color: color-mix(in srgb, var(--t-bg) 22%, white); font-size: 15px; line-height: 1.55; }
.ag-target-btn { align-self: flex-start; min-height: 48px; border: 0; border-radius: var(--eco-radius-pill); background: color-mix(in srgb, var(--eco-cobalt) 55%, white); color: var(--t-bg); padding: 0 22px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.ag-target .agenda-prep { color: var(--eco-ink); }
.ag-mono { font-family: var(--eco-font-mono); }
.ag-series { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ag-series-line { display: flex; justify-content: space-between; gap: var(--eco-space-3); color: var(--eco-ink); font-size: 15px; }
.ag-series-line .ag-mono { color: var(--eco-ink-muted); }
.ag-series-edit summary { color: var(--eco-cobalt); font-size: 13px; font-weight: 700; cursor: pointer; }
.ag-series-edit .agenda-series-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ag-note { margin: 0; color: var(--eco-ink-muted); font-size: 13px; line-height: 1.5; }
.ag-feed { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-radius: 22px; background: var(--eco-surface-sunken); color: var(--eco-ink); padding: 22px 24px; font-size: 15px; }
.ag-feed .ag-btn { flex-shrink: 0; min-height: 44px; }
#ag-add { padding: 16px 24px; }

@media (max-width: 1023px) {
  .ag-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .ag-head h1 { font-size: 32px; }
  .ag-row { grid-template-columns: 64px minmax(0, 1fr); }
  .ag-actions { grid-column: 2; }
  .ag-next { flex-direction: column; align-items: flex-start; }
  .ag-feed { flex-direction: column; align-items: flex-start; }
}

/* Biblioteca (DeskBiblioteca): título com o seletor à direita; na aba Cards, busca com filtros em
   pílula, a tabela de quatro colunas e, ao lado (340px), o card escolhido para editar. */
.lb-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--eco-space-4); margin-bottom: 20px; }
.lb-head h1 { margin: 0; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 40px; font-weight: 700; line-height: 1.05; }
.library-tabs.lb-tabs { display: flex; gap: 4px; margin: 0; border: 0; border-radius: 16px; background: var(--eco-surface-sunken); padding: 4px; }
.lb-tabs .library-tab { display: inline-flex; white-space: pre; min-height: 44px; align-items: center; border: 0; border-radius: 12px; background: transparent; box-shadow: none; color: var(--eco-ink-muted); padding: 0 20px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.lb-tabs .library-tab.is-active { background: var(--eco-surface-raised); color: var(--eco-ink); }
.lb-title { display: flex; flex-direction: column; gap: 6px; }
.lb-lede { margin: 0; color: var(--eco-ink-muted); font-size: 15px; }
.lb-add { position: relative; }
.lb-add-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; display: flex; flex-direction: column; gap: 4px; width: min(300px, calc(100vw - 32px)); border-radius: 20px; background: var(--eco-surface-raised); padding: 8px; box-shadow: var(--eco-shadow-raised); }
.lb-add-menu[hidden] { display: none; }
.lb-add-menu button { display: flex; flex-direction: column; gap: 2px; border: 0; border-radius: 14px; background: transparent; color: var(--eco-ink); padding: 12px 14px; font: inherit; text-align: left; cursor: pointer; }
.lb-add-menu button:hover, .lb-add-menu button:focus-visible { background: var(--eco-surface-sunken); }
.lb-add-menu button { flex-direction: row; align-items: flex-start; gap: 12px; }
.lb-add-menu button > span { display: flex; flex-direction: column; gap: 2px; }
.lb-add-menu small { color: var(--eco-ink-muted); font-size: 13px; }
.lb-tab-count { margin-left: 6px; color: var(--eco-ink-muted); font-family: var(--eco-font-mono); font-size: 12px; font-weight: 400; }
.lb-tab-count:empty { display: none; }
.lb-dialog-eyebrow { margin: 0; color: var(--eco-cobalt); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.lb-dialog-title { margin: 0; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 26px; line-height: 28px; font-weight: 700; }
.lb-editor-top { display: flex; align-items: center; justify-content: space-between; }
.lb-close { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: transparent; color: var(--eco-ink); cursor: pointer; }
.lb-close:hover { background: var(--eco-surface-sunken); }
/* No celular a frase nova sobe como sheet, igual ao Sheet do design system. */
@media (max-width: 767px) {
  .lb-dialog { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 28px 28px 0 0; }
  .lb-dialog-actions { flex-direction: column-reverse; }
  .lb-dialog-actions > * { width: 100%; }
}
.library-tabs.lb-tabs { width: fit-content; max-width: 100%; margin-bottom: 20px; overflow-x: auto; }
.lb-layout.is-solo { grid-template-columns: minmax(0, 1fr); }
.lb-dialog { width: min(480px, calc(100vw - 32px)); border: 0; border-radius: 28px; background: var(--eco-surface-raised); color: var(--eco-ink); padding: 28px; box-shadow: var(--eco-shadow-raised); }
.lb-dialog::backdrop { background: color-mix(in srgb, var(--eco-ink) 40%, transparent); }
.lb-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.lb-aside[hidden] { display: none; }
.lb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 28px; }
.lb-main { display: flex; min-width: 0; flex-direction: column; gap: 14px; }
.lb-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.lb-search { display: flex; min-width: 14rem; flex: 1; flex-direction: column; gap: 6px; color: var(--eco-ink); font-size: 14px; font-weight: 700; }
.lb-search input, .lb-form input, .lb-form textarea, .lb-editor input, .lb-editor textarea, .lb-subbar select { box-sizing: border-box; border: 1px solid var(--eco-line-strong); border-radius: 12px; background: var(--eco-surface-raised); color: var(--eco-ink); padding: 10px 14px; font: inherit; font-size: 15px; font-weight: 400; }
.lb-search input { min-height: 48px; font-size: 16px; }
.lb-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.lb-pill { min-height: 48px; border: 1px solid var(--eco-line-strong); border-radius: var(--eco-radius-pill); background: var(--eco-surface-raised); color: var(--eco-ink); padding: 0 16px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.lb-pill[aria-pressed="true"] { border-color: var(--eco-ink); background: var(--eco-ink); color: var(--eco-surface); }
.lb-subbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--eco-ink-muted); font-size: 14px; }
.lb-subbar select { min-height: 40px; padding: 0 10px; font-size: 14px; }
.lb-subbar .library-count { margin-left: auto; }
.lb-link { border: 0; background: transparent; color: var(--eco-cobalt); padding: 0; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.lb-table { overflow: hidden; border-radius: 20px; background: var(--eco-surface-raised); }
.lb-thead, .lb-row-btn { display: grid; grid-template-columns: 2.2fr 1fr 1.3fr 1fr; align-items: center; gap: 12px; }
.lb-thead { border-bottom: 1px solid var(--eco-line-strong); color: var(--eco-ink-muted); padding: 12px 20px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.lb-rows { display: block; margin: 0; padding: 0; list-style: none; }
.lb-row { display: flex; align-items: center; border-bottom: 1px solid var(--eco-line); }
.lb-row:last-child { border-bottom: 0; }
.lb-row .library-card-check { width: 20px; height: 20px; margin-left: 16px; accent-color: var(--eco-cobalt); }
.lb-row-btn { width: 100%; min-height: 56px; border: 0; background: transparent; color: var(--eco-ink); padding: 8px 20px; font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.lb-row-btn strong { min-width: 0; overflow-wrap: anywhere; }
.lb-row.is-open, .lb-row-btn:hover { background: var(--eco-cobalt-soft); }
.lb-muted { color: var(--eco-ink-muted); font-size: 14px; }
.lb-due { font-family: var(--eco-font-mono); font-size: 14px; }
.lb-due.is-today { color: var(--eco-amber-ink); }
.lb-chip { display: inline-block; border-radius: var(--eco-radius-pill); background: var(--eco-surface-sunken); color: var(--eco-ink); padding: 4px 10px; font-size: 12px; font-weight: 700; }
.lb-chip.is-vocab { background: var(--eco-cobalt-soft); color: var(--eco-cobalt); }
.lb-chip.is-echo { background: var(--eco-amber-soft); color: var(--eco-amber-ink); }
.lb-chip.is-fix { background: var(--eco-danger-soft); color: var(--eco-danger); }
.lb-aside { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; border-radius: 28px; background: var(--eco-surface-raised); padding: 28px; box-shadow: var(--eco-shadow-raised); }
.lb-aside-kicker { margin: 0; color: var(--eco-ink); font-size: 18px; font-weight: 700; }
.lb-form, .lb-editor { display: flex; flex-direction: column; gap: 14px; }
.lb-form label, .lb-editor label { display: flex; flex-direction: column; gap: 6px; color: var(--eco-ink); font-size: 14px; font-weight: 700; }
.lb-editor .lb-chip { align-self: flex-start; }
.lb-quote { margin: 0; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 28px; font-weight: 700; line-height: 1.1; overflow-wrap: anywhere; }
.lb-stat { display: flex; justify-content: space-between; gap: 12px; border-radius: 16px; background: var(--eco-surface); padding: 14px 16px; color: var(--eco-ink); font-size: 14px; }
.lb-stat span:last-child { font-family: var(--eco-font-mono); text-align: right; }
.lb-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-quiet { min-height: 40px; border: 1px solid var(--eco-line-strong); border-radius: var(--eco-radius-pill); background: var(--eco-surface-raised); color: var(--eco-ink); padding: 0 14px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.lb-more { width: 100%; }
.lb-more summary { color: var(--eco-cobalt); font-size: 14px; font-weight: 700; cursor: pointer; }
.lb-more[open] { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-more[open] summary { width: 100%; }
.lb-cta { display: flex; min-height: 52px; align-items: center; justify-content: center; border: 0; border-radius: var(--eco-radius-pill); background: var(--eco-cobalt); color: var(--eco-on-cobalt); font: inherit; font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer; }
.lb-sheet { display: flex; flex-direction: column; gap: 12px; border-radius: 20px; background: var(--eco-surface-raised); padding: 22px 24px; }

@media (max-width: 1023px) {
  .lb-layout { grid-template-columns: minmax(0, 1fr); }
  .lb-aside { position: static; }
}
@media (max-width: 767px) {
  .lb-head h1 { font-size: 32px; }
  .lb-thead { display: none; }
  .lb-row-btn { grid-template-columns: minmax(0, 1fr) auto; }
  .lb-row-btn > span:nth-child(3) { display: none; }
}

/* Pronto para falar (TelaViagem): segue o tema (28/09; antes era palco escuro fixo e destoava no
   tema claro). Frases grandes em cartões um tom abaixo, Ouvir em cobalto — âmbar é só a voz. */
.kit-stage { display: flex; flex-direction: column; gap: 18px; max-width: 46rem; margin: 0 auto; border: 1px solid var(--eco-line); border-radius: 28px; background: var(--eco-surface-raised); color: var(--eco-ink); padding: 24px; }
.kit-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.kit-back { display: inline-flex; min-height: 44px; align-items: center; gap: 6px; border-radius: 999px; background: var(--eco-surface-sunken); color: inherit; padding: 0 16px 0 10px; font-weight: 700; text-decoration: none; }
.kit-back .ff-icon { width: 20px; }
.kit-offline { border-radius: 999px; background: var(--eco-success-soft); color: var(--eco-success); padding: 6px 12px; font-size: 13px; font-weight: 700; }
.kit-offline.is-offline { background: var(--eco-surface-sunken); color: var(--eco-ink-muted); }
.kit-head h1 { margin: 0; font-family: var(--eco-font-display); font-size: 30px; font-weight: 700; line-height: 1.05; }
.kit-head p, .kit-foot { margin: 6px 0 0; color: var(--eco-ink-muted); font-size: 15px; line-height: 1.5; }
.kit-foot { margin: 0; font-size: 14px; text-align: center; }
.kit-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.kit-phrase { display: flex; flex-direction: column; gap: 10px; border-radius: 20px; background: var(--eco-surface-sunken); padding: 18px; }
.kit-quote { margin: 0; font-family: var(--eco-font-display); font-size: 22px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.kit-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kit-pos { color: var(--eco-ink-muted); font-family: var(--eco-font-mono); font-size: 14px; }
.kit-listen, .kit-cta { display: inline-flex; min-height: 44px; align-items: center; gap: 6px; border: 0; border-radius: 999px; background: var(--eco-cobalt); color: var(--eco-on-cobalt); padding: 0 16px; font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; }
.kit-listen .ff-icon { width: 18px; }
.kit-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; border-radius: 20px; background: var(--eco-surface-sunken); padding: 22px; }
.kit-empty h2 { margin: 0; font-size: 20px; }

/* Sua voz (DeskDiagnostico): Antes num cartão branco e Depois esperando, tracejado em âmbar-soft
   com as cinco barras (a do meio em âmbar é a voz que ainda vai chegar). */
.dv-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 24px; }
.dv-head h1 { margin: 0; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 40px; font-weight: 700; line-height: 1.05; }
.dv-head p { margin: 0; color: var(--eco-ink-muted); font-size: 16px; line-height: 1.5; }
.dv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.dv-card, .dv-wait { display: flex; min-height: 22rem; flex-direction: column; gap: 20px; border-radius: 28px; padding: 32px; }
.dv-card { background: var(--eco-surface-raised); color: var(--eco-ink); }
.dv-card > p { margin: 0; }
.dv-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dv-card-head h2, .dv-wait h2 { margin: 0; font-family: var(--eco-font-display); font-size: 32px; font-weight: 700; }
.dv-mono { color: var(--eco-ink-muted); font-family: var(--eco-font-mono); font-size: 15px; }
.dv-actions { display: flex; gap: 12px; }
.dv-play { min-height: 48px; border: 0; border-radius: 999px; background: var(--eco-cobalt); color: var(--eco-on-cobalt); padding: 0 22px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.dv-recorder { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: auto; }
.dv-muted { margin: 0; color: var(--eco-ink-muted); font-size: 14px; }
.dv-warn { margin: 0; border-radius: 14px; background: var(--eco-surface-sunken); padding: 12px 14px; font-size: 14px; }
.dv-theme { display: flex; flex-direction: column; gap: 4px; border-radius: 16px; background: var(--eco-surface); padding: 14px 18px; }
.dv-theme p { margin: 0; }
.dv-theme p[lang="en"] { font-size: 16px; line-height: 1.5; }
.dv-wait { justify-content: center; align-items: flex-start; border: 2px dashed var(--eco-line-strong); background: var(--eco-surface-sunken); color: var(--eco-ink); }
.dv-wait > p { margin: 0; max-width: 36ch; font-size: 16px; line-height: 1.55; }
.dv-wait .dv-when { color: var(--eco-ink-muted); }
.dv-bars { display: flex; height: 120px; align-items: flex-end; gap: 12px; }
.dv-bars span { width: 36px; border-radius: 18px; background: var(--eco-surface-raised); }
.dv-bars span:nth-child(1) { height: 55%; } .dv-bars span:nth-child(2) { height: 80%; } .dv-bars span:nth-child(3) { height: 100%; }
.dv-bars span:nth-child(4) { height: 70%; } .dv-bars span:nth-child(5) { height: 45%; }
.dv-bars .is-mid { background: var(--eco-line-strong); }
.dv-recorder .record-btn:not(.recording) { background: var(--eco-cobalt); color: var(--eco-on-cobalt); box-shadow: none; }
.dv-recorder .record-btn.recording { background: var(--eco-amber); color: var(--eco-on-amber); }
.dv-storage-warn, .dv-history, .dv-extra-action, .dv-compare-actions { margin: 18px 0; }
.dv-storage-warn { border-radius: 20px; background: var(--eco-surface-sunken); padding: 22px; }
.dv-storage-warn h2 { margin: 0 0 8px; font-size: 22px; }
.dv-storage-warn p, .dv-intro, .dv-extra-note { color: var(--eco-ink-muted); }
.dv-storage-warn a { color: var(--eco-cobalt); font-weight: 700; }
.dv-intro { margin: 0 0 18px; }
.dv-quiet, .dv-history-link, .dv-extra-action > button { width: fit-content; border: 0; background: transparent; color: var(--eco-cobalt); padding: 10px 0; font: inherit; font-weight: 700; cursor: pointer; }
.dv-history-link { display: block; margin: 12px 0; }
.dv-extra-label { font-size: 13px; color: var(--eco-ink-muted); }
.dv-extra-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; border-radius: 16px; background: var(--eco-surface-raised); padding: 14px 18px; }
.dv-extra-preview span:first-child { font-weight: 700; }
.dv-extra-preview span:nth-child(2) { color: var(--eco-ink-muted); }
.dv-extra-preview button { margin-left: auto; border: 0; background: transparent; color: var(--eco-cobalt); font: inherit; font-weight: 700; cursor: pointer; }
.dv-compare-actions button, .dv-upload-failed button:first-of-type { min-height: 48px; border: 0; border-radius: 999px; background: var(--eco-cobalt); color: var(--eco-on-cobalt); padding: 0 22px; font: inherit; font-weight: 700; cursor: pointer; }
.dv-history-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dv-history-list .dv-card { min-height: 0; }
.dv-upload-failed { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; border-radius: 16px; background: var(--eco-danger-soft); padding: 16px; }
.dv-upload-failed p { margin: 0; }
.dv-upload-failed button:not(:first-of-type) { border: 0; background: transparent; color: var(--eco-cobalt); padding: 8px 0; font: inherit; font-weight: 700; cursor: pointer; }
.dv-sending { display: flex; flex-direction: column; gap: 8px; }
.dv-sending p { margin: 0; color: var(--eco-ink-muted); }
.dv-pulse-bars { display: flex; align-items: flex-end; gap: 4px; height: 38px; }
.dv-pulse-bars span { width: 8px; height: 40%; border-radius: 8px; background: var(--eco-cobalt); transform-origin: bottom; animation: eco-bars-pulse var(--eco-dur-loading) ease-in-out infinite; }
.dv-pulse-bars span:nth-child(2), .dv-pulse-bars span:nth-child(4) { height: 75%; animation-delay: 120ms; }
.dv-pulse-bars span:nth-child(3) { height: 100%; animation-delay: 240ms; }
@media (max-width: 767px) { .dv-history-list { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 1023px) {
  .dv-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .dv-head h1 { font-size: 32px; }
  .kit-stage { padding: 20px 16px; }
}

/* O que o Jake lembra (DeskMemorias): título com a regra de remoção ao lado, três colunas planas
   com a contagem no título; itens em sunken, os do ecoar em amber-soft, remover num × redondo. */
.mem-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 24px; }
.mem-head h1 { margin: 0; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 40px; font-weight: 700; line-height: 1.05; }
.mem-head > div > p { max-width: 64ch; margin: 6px 0 0; color: var(--eco-ink-muted); font-size: 16px; line-height: 1.5; }
.mem-boundary { max-width: 300px; margin: 0; border-radius: 16px; background: var(--eco-surface-sunken); color: var(--eco-ink); padding: 14px 18px; font-size: 14px; line-height: 1.5; }
.mem-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 20px; margin-bottom: 24px; }
.mem-col { display: flex; min-width: 0; flex-direction: column; gap: 12px; border-radius: 24px; background: var(--eco-surface-raised); padding: 24px; }
.mem-col-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mem-col-head h2 { margin: 0; color: var(--eco-ink); font-size: 20px; font-weight: 700; }
.mem-count { color: var(--eco-ink-muted); font-family: var(--eco-font-mono); }
.mem-item { display: flex; align-items: flex-start; gap: 12px; border-radius: 16px; background: var(--eco-surface); padding: 14px 16px; color: var(--eco-ink); }
.mem-item.is-echo { background: var(--eco-amber-soft); }
.mem-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
.mem-copy .memory-summary { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.mem-copy small { color: var(--eco-ink-muted); font-size: 14px; }
.mem-remove { display: grid; width: 40px; height: 40px; flex-shrink: 0; place-items: center; border: 1px solid var(--eco-line); border-radius: 999px; background: var(--eco-surface-raised); color: var(--eco-ink-muted); font-size: 20px; line-height: 1; cursor: pointer; }
.mem-none { margin: 0; color: var(--eco-ink-muted); font-size: 14px; }
.mem-cta { display: flex; min-height: 48px; align-items: center; justify-content: center; margin-top: auto; border-radius: 999px; background: var(--eco-cobalt); color: var(--eco-on-cobalt); font-weight: 700; text-decoration: none; }

@media (max-width: 1023px) {
  .mem-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .mem-head h1 { font-size: 32px; }
}

/* Outro chat (DeskSimular): título com o atalho do Telegram ao lado; três passos em colunas
   1fr 1fr 1.4fr com o número redondo (o primeiro em cobalto); resultado e histórico embaixo. */
.sm-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 24px; }
.sm-head > div { display: flex; flex-direction: column; gap: 6px; }
.sm-head h1 { margin: 0; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 40px; font-weight: 700; line-height: 1.05; }
.sm-head p { margin: 0; color: var(--eco-ink-muted); font-size: 16px; }
.sm-back { color: var(--eco-cobalt); font-size: 15px; font-weight: 700; text-decoration: none; }
.sm-telegram { max-width: 22rem; border-radius: 16px; background: var(--eco-cobalt-soft); color: var(--eco-cobalt); padding: 14px 18px; font-size: 15px; font-weight: 700; line-height: 1.4; text-decoration: none; }
.sm-steps { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 20px; margin-bottom: 24px; }
.sm-step { display: flex; min-width: 0; flex-direction: column; gap: 14px; border-radius: 24px; background: var(--eco-surface-raised); color: var(--eco-ink); padding: 28px; }
.sm-step h2, .sm-label { margin: 0; font-size: 22px; font-weight: 700; }
.sm-step > p { margin: 0; color: var(--eco-ink-muted); font-size: 15px; line-height: 1.55; }
.sm-num { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 999px; background: var(--eco-cobalt-soft); color: var(--eco-cobalt); font-weight: 700; }
.sm-num.is-first { background: var(--eco-cobalt); color: var(--eco-on-cobalt); }
.sm-preview { max-height: 9.5rem; overflow: hidden; margin: 0; border-radius: 14px; background: var(--eco-surface-sunken); padding: 14px; color: var(--eco-ink); font-family: var(--eco-font-mono); font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.sm-full, .sm-feedback { box-sizing: border-box; width: 100%; border: 1px solid var(--eco-line-strong); border-radius: 14px; background: var(--eco-surface-raised); color: var(--eco-ink); padding: 14px; font-family: var(--eco-font-mono); font-size: 13px; }
.sm-full { height: 10rem; }
.sm-feedback { min-height: 12rem; flex-grow: 1; resize: vertical; }
.sm-note { margin: 0; color: var(--eco-ink-muted); font-size: 14px; }
.sm-note:empty { display: none; }
.sm-links { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.sm-step #copy { margin-top: auto; }
.sm-quiet, .sm-primary { display: flex; min-height: 48px; align-items: center; justify-content: center; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; }
.sm-quiet { border: 1px solid var(--eco-line-strong); background: var(--eco-surface-raised); color: var(--eco-ink); }
.sm-primary { border: 0; background: var(--eco-cobalt); color: var(--eco-on-cobalt); }
.sm-primary.is-big { min-height: 52px; font-size: 16px; }
.sm-sheet { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; border-radius: 24px; background: var(--eco-surface-raised); color: var(--eco-ink); padding: 24px 28px; }
.sm-sheet.hidden { display: none; }
.sm-sheet-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sm-sheet-head h2 { margin: 0; font-size: 20px; font-weight: 700; }
.sm-sheet-head span { color: var(--eco-ink-muted); font-size: 14px; }

@media (max-width: 1023px) {
  .sm-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .sm-head h1 { font-size: 32px; }
}

/* Captura de aula (DeskCaptura): sobretítulo Biblioteca em cobalto e o título em display. */
.cap-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.cap-kicker { margin: 0; color: var(--eco-cobalt); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.cap-head h1 { margin: 0; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 40px; font-weight: 700; line-height: 1.08; }
.cap-head > p:last-child { margin: 0; color: var(--eco-ink-muted); font-size: 16px; }

/* Conta (DeskConta): avatar de 80px, nome em display e Sair da conta em vermelho; três cartões
   (créditos escuro nos dois temas, Telegram, trilha); os atalhos numa linha; a saída no fim. */
.ac-head { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-bottom: 24px; }
.ac-avatar { display: grid; width: 80px; height: 80px; flex-shrink: 0; place-items: center; border-radius: 999px; background: var(--eco-cobalt-soft); color: var(--eco-cobalt); font-size: 28px; font-weight: 700; }
.ac-who { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
.ac-who p { margin: 0; color: var(--eco-ink-muted); font-size: 16px; overflow-wrap: anywhere; }
.ac-who .ac-name { color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 40px; font-weight: 700; line-height: 1.05; }
.ac-signout { min-height: 48px; border: 1px solid var(--eco-danger); border-radius: 999px; background: var(--eco-surface-raised); color: var(--eco-danger); padding: 0 20px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.ac-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 20px; margin-bottom: 20px; }
.ac-card { display: flex; min-width: 0; flex-direction: column; gap: 10px; border-radius: 24px; background: var(--eco-surface-raised); color: var(--eco-ink); padding: 24px; }
.ac-card h2 { margin: 0; font-size: 20px; font-weight: 700; }
.ac-card .eyebrow { display: none; }
.ac-credits { --c-bg: var(--eco-on-amber); display: flex; flex-direction: column; gap: 8px; border-radius: 24px; background: var(--c-bg); color: color-mix(in srgb, var(--c-bg) 7%, white); padding: 24px; text-decoration: none; }
.ac-kicker { color: color-mix(in srgb, var(--c-bg) 38%, white); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ac-credits-number { font-family: var(--eco-font-mono); font-size: 48px; font-weight: 600; line-height: 1; }
.ac-credits-note { color: color-mix(in srgb, var(--c-bg) 30%, white); font-size: 14px; }
.ac-credits-go { margin-top: auto; color: color-mix(in srgb, var(--eco-cobalt) 50%, white); font-size: 15px; font-weight: 700; }
.ac-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 24px; }
.ac-link { display: flex; min-height: 72px; align-items: center; justify-content: space-between; border-radius: 20px; background: var(--eco-surface-raised); color: var(--eco-ink); padding: 0 24px; font-size: 17px; font-weight: 700; text-decoration: none; }
.ac-link span { color: var(--eco-cobalt); }
.ac-danger { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; border-radius: 22px; background: var(--eco-danger-soft); color: var(--eco-ink); padding: 20px 24px; }
.ac-danger h2 { margin: 0; }

@media (max-width: 1023px) {
  .ac-grid, .ac-links { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .ac-who .ac-name, .cap-head h1 { font-size: 32px; }
  .ac-avatar { width: 56px; height: 56px; font-size: 20px; }
}

/* Mais (TelaMais): título grande, a conta num cartão com avatar e saldo, a busca com rótulo
   visível e os destinos em blocos de três, ícone num quadrado e o nome embaixo. */
.more-title { margin: 0; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 28px; font-weight: 700; }
.more-account-link { display: flex; min-height: 68px; align-items: center; gap: 12px; border-radius: 18px; background: var(--eco-surface-raised); padding: 12px 14px; color: var(--eco-ink); text-decoration: none; }
.more-avatar { display: grid; width: 44px; height: 44px; flex-shrink: 0; place-items: center; border-radius: 999px; background: var(--eco-cobalt-soft); color: var(--eco-cobalt); font-weight: 700; }
.more-who { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.more-who small { color: var(--eco-ink-muted); font-size: 13px; }
.more-credits { border-radius: 999px; background: var(--eco-surface-sunken); padding: 4px 10px; font-family: var(--eco-font-mono); font-size: 14px; font-weight: 600; }
.more-search-label { display: block; margin-bottom: 6px; color: var(--eco-ink); font-size: 14px; font-weight: 700; }
.more-search input { min-height: 48px; border-color: var(--eco-line-strong); border-radius: 14px; font-size: 16px; }
.more-search-empty { display: grid; gap: 8px; margin-top: 12px; border: 1px solid var(--eco-line); border-radius: 16px; background: var(--eco-surface-raised); padding: 16px; }
.more-search-empty h2, .more-search-empty p { margin: 0; }
.more-search-empty h2 { color: var(--eco-ink); font-size: 16px; font-weight: 800; }
.more-search-empty p { color: var(--eco-ink-muted); font-size: 14px; line-height: 1.45; }
.more-search-library { display: inline-flex; min-height: 44px; align-items: center; justify-self: start; border-radius: 999px; background: var(--eco-cobalt); color: var(--eco-on-cobalt); padding: 0 16px; font-weight: 700; text-decoration: none; }
.more-groups { display: flex; flex-direction: column; gap: 16px; }
.more-groups .nav-group { border: 0; background: transparent; padding: 0; }
.more-groups .nav-group-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.more-groups .more-link { display: flex; min-height: 88px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: 16px; background: var(--eco-surface-raised); padding: 12px 8px; font-size: 14px; font-weight: 700; text-align: center; }
.more-groups .more-link > svg { width: 36px; height: 36px; box-sizing: border-box; border-radius: 12px; background: var(--eco-cobalt-soft); color: var(--eco-cobalt); padding: 8px; }
.more-groups .more-link .nav-link-copy small { display: none; }
.more-sheet .more-panel { background: var(--eco-surface); }

/* Modo escuta (DeskEscuta): tela inteira, como o modo foco — Sair e a rodada em cima, a faixa de
   rodadas pelo resultado, as cinco barras com a do meio só tracejada em âmbar e as duas palavras
   em blocos grandes. As teclas R, 1, 2 e Enter vieram depois, como função própria. */
body.esc-open { overflow: hidden; }
.esc-stage { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; overflow-y: auto; background: var(--eco-surface); color: var(--eco-ink); padding: 32px 48px; }
.esc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.esc-exit { display: inline-flex; min-height: 44px; align-items: center; gap: 6px; border: 0; border-radius: 999px; background: var(--eco-surface-raised); color: var(--eco-ink); padding: 0 16px 0 12px; font: inherit; font-weight: 700; cursor: pointer; }
.esc-exit .ff-icon { width: 20px; }
.esc-body { display: flex; width: 100%; max-width: 640px; flex-direction: column; gap: 22px; margin: 24px auto 0; }
.esc-rounds { display: flex; gap: 8px; }
.esc-rounds span { height: 8px; flex: 1; border-radius: 999px; background: var(--eco-line-strong); }
.esc-rounds .is-hit { background: var(--eco-success); }
.esc-rounds .is-miss { background: var(--eco-danger); }
.esc-rounds .is-now { background: var(--eco-cobalt); }
.esc-title { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; }
.esc-title h1 { margin: 0; font-family: var(--eco-font-display); font-size: 40px; font-weight: 700; line-height: 1.05; }
.esc-title p { margin: 0; color: var(--eco-ink-muted); font-size: 16px; line-height: 1.5; }
.esc-title .esc-kicker { color: var(--eco-cobalt); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.esc-bars { display: flex; height: 180px; align-items: flex-end; justify-content: center; gap: 16px; }
.esc-bars span { width: 40px; box-sizing: border-box; border-radius: 20px; background: var(--eco-cobalt); }
.esc-bars span:nth-child(1) { height: 74px; } .esc-bars span:nth-child(2) { height: 124px; } .esc-bars span:nth-child(3) { height: 176px; }
.esc-bars span:nth-child(4) { height: 108px; } .esc-bars span:nth-child(5) { height: 58px; }
.esc-bars .is-empty { border: 3px dashed var(--eco-line-strong); background: transparent; }
.esc-muted { margin: 0; color: var(--eco-ink-muted); font-size: 14px; }
.esc-foot { font-size: 13px; text-align: center; }
.esc-ask { margin: 0; color: var(--eco-ink-muted); font-size: 16px; text-align: center; }
.esc-words { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.esc-word { min-height: 120px; border: 0; border-radius: 28px; background: var(--eco-surface-raised); box-shadow: inset 0 0 0 2px var(--eco-line); color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 36px; font-weight: 700; cursor: pointer; }
.esc-word:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--eco-cobalt); }
.esc-word:disabled { cursor: default; }
.esc-word.is-played { background: var(--eco-success-soft); box-shadow: inset 0 0 0 2px var(--eco-success); }
.esc-word.is-wrong { background: var(--eco-danger-soft); box-shadow: inset 0 0 0 2px var(--eco-danger); }
.esc-verdict { margin: 0; text-align: center; font-size: 16px; line-height: 1.5; }
.esc-quiet, .esc-primary { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 0 24px; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.esc-quiet { border: 1px solid var(--eco-line-strong); background: var(--eco-surface-raised); color: var(--eco-ink); }
.esc-primary { border: 0; background: var(--eco-cobalt); color: var(--eco-on-cobalt); }
.esc-replay, .esc-next { align-self: center; }
.esc-replay .ff-icon { width: 20px; }
.esc-score { margin: 0; font-family: var(--eco-font-mono); font-size: 56px; font-weight: 600; text-align: center; }
.esc-row { display: flex; justify-content: center; gap: 12px; }
.esc-result-kicker { margin: 0; color: var(--eco-cobalt); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; }
.esc-result-intro { max-width: 48ch; margin-inline: auto; line-height: 1.5; text-align: center; }
.esc-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.esc-result-actions > :is(a, button) { text-decoration: none; }
.esc-missed-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.esc-missed-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 14px; border: 1px solid var(--eco-line); border-radius: var(--eco-radius-lg); background: var(--eco-surface-raised); padding: 14px 16px; }
.esc-missed-pair { color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 21px; font-weight: 700; }
.esc-missed-heard { grid-column: 1; color: var(--eco-ink-muted); font-size: 14px; }
.esc-missed-heard b { color: var(--eco-ink); }
.esc-missed-list .esc-primary { grid-column: 2; grid-row: 1 / span 2; }
.listen-page { width: min(100%, 640px); margin-inline: auto; }
.listen-page .page-heading { margin-bottom: 22px; }
.listen-intro { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: clamp(22px, 5vw, 40px); text-align: center; }
.listen-pair-count { margin: 0; color: var(--eco-ink); font-family: var(--eco-font-mono); font-size: 19px; font-weight: 700; }
.listen-intro-copy { max-width: 46ch; margin: 0; color: var(--eco-ink-muted); font-size: 15px; line-height: 1.55; }
.listen-pair-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.listen-pair-chip, .listen-pair-more { display: inline-flex; min-height: 40px; align-items: center; border: 1px solid var(--eco-line); border-radius: var(--eco-radius-pill); background: var(--eco-surface-raised); padding: 0 14px; color: var(--eco-ink); font-size: 14px; }
.listen-pair-chip { font-family: var(--eco-font-mono); }
.listen-pair-more { background: var(--eco-cobalt-soft); color: var(--eco-cobalt); font-weight: 750; }
.listen-start { min-width: min(100%, 220px); }
.listen-duration, .listen-fsrs-note { margin: 0; color: var(--eco-ink-muted); font-size: 13px; line-height: 1.45; }
.listen-fsrs-note { border-top: 1px solid var(--eco-line); padding-top: 12px; text-align: center; }
.listen-empty .card { margin-top: 20px; }
.listen-empty-card { max-width: 45rem; padding: 24px; }
.listen-empty-card p { color: var(--eco-ink-muted); line-height: 1.5; }
.listen-empty-card p span { color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 1.15em; font-weight: 700; }
.listen-empty-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.listen-back { display: inline-block; margin-top: 12px; color: var(--eco-cobalt); font-weight: 700; }

@media (max-width: 767px) {
  .esc-stage { padding: 20px 16px; }
  .esc-title h1 { font-size: 32px; }
  .esc-bars { height: 120px; gap: 10px; }
  .esc-bars span { width: 28px; }
  .esc-bars span:nth-child(1) { height: 50px; } .esc-bars span:nth-child(2) { height: 84px; } .esc-bars span:nth-child(3) { height: 118px; }
  .esc-bars span:nth-child(4) { height: 72px; } .esc-bars span:nth-child(5) { height: 40px; }
  .esc-word { min-height: 96px; font-size: 28px; }
  .esc-score { font-size: 32px; }
  .esc-result-actions { align-items: stretch; flex-direction: column; }
  .esc-result-actions > :is(a, button) { width: 100%; }
  .esc-missed-list li { grid-template-columns: minmax(0, 1fr); }
  .esc-missed-heard, .esc-missed-list .esc-primary { grid-column: 1; grid-row: auto; }
  .listen-intro { padding: 22px 16px; }
  .listen-intro { gap: 10px; }
  .listen-pair-chip, .listen-pair-more { min-height: 36px; padding-inline: 10px; font-size: 12px; }
  .listen-start { width: 100%; }
  .listen-empty-card { padding: 18px; }
  .listen-empty-actions { flex-direction: column; }
  .listen-empty-actions .btn { width: 100%; }
}

/* A marca eco (etapa 6): cinco barras, a do meio em âmbar é a voz de quem pratica; o nome em
   minúsculas, na fonte display. Substitui o quadrado com "F". */
.brand-mark { width: 2rem; height: 2rem; background: none; box-shadow: none; }
.brand-mark svg { display: block; width: 100%; height: 100%; fill: var(--eco-cobalt); }
.brand-mark svg .is-voice { fill: var(--eco-amber); }
.brand-word { color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }

/* Fluência, "Última rodada" (DeskFluencia): chips da cadeia com a última letra em negrito; o que
   não entrou em danger-soft; a transcrição da rodada de voz recolhida embaixo. */
.vf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vf-chip { border-radius: 999px; background: var(--eco-surface-sunken); color: var(--eco-ink); padding: 5px 12px; font-size: 14px; }
.vf-chip b { color: var(--eco-cobalt); }
.vf-chip.is-miss { background: var(--eco-danger-soft); color: var(--eco-danger); text-decoration: line-through; }
.vf-said summary { color: var(--eco-cobalt); font-size: 14px; font-weight: 700; cursor: pointer; }
.vf-said p { margin: 8px 0 0; color: var(--eco-ink-muted); font-size: 14px; line-height: 1.5; }

/* Lacunas 8 · resultado da rodada e histórico que abre sem perder o contexto. */
.vf-finished { overflow: hidden; }
.vf-result-heading, .vf-round-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.vf-result-heading .vf-section-kicker { margin: 0 0 6px; }
.vf-round-heading h1, .vf-round-heading h2 { margin: 5px 0 0; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: clamp(22px, 3vw, 30px); line-height: 1.12; }
.vf-round-badge { display: inline-flex; min-height: 28px; align-items: center; border-radius: var(--eco-radius-pill); background: var(--eco-cobalt-soft); color: var(--eco-cobalt); padding: 0 11px; font-family: var(--eco-font-mono); font-size: 12px; font-weight: 600; }
.vf-result-score { display: flex; align-items: baseline; gap: 9px; }
.vf-result-score strong, .vf-round-score strong { color: var(--eco-ink); font-family: var(--eco-font-mono); font-size: clamp(44px, 8vw, 68px); font-weight: 600; line-height: 1; }
.vf-result-score span, .vf-round-score span { color: var(--eco-ink-muted); font-size: 14px; }
.vf-result-copy { margin: 0; color: var(--eco-ink); font-size: 16px; line-height: 1.5; }
.vf-result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 4px; }
.vf-action-link { display: inline-flex; min-height: var(--eco-size-touch); align-items: center; justify-content: center; border: 0; border-radius: var(--eco-radius-pill); background: transparent; color: var(--eco-cobalt); padding: 0 12px; font: inherit; font-size: 14px; font-weight: 700; text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vf-action-link:focus-visible, .vf-row:focus-visible { outline: 2px solid var(--eco-focus); outline-offset: 3px; }
.vf-round-detail { min-width: 0; }
.vf-round-score { display: flex; align-items: baseline; gap: 10px; }
.vf-row { min-height: var(--eco-size-touch); align-items: center; border-bottom: 1px solid var(--eco-line); border-radius: 12px; color: var(--eco-ink); padding: 8px 10px; text-decoration: none; transition: background-color 120ms ease; }
.vf-row:hover { background: var(--eco-cobalt-soft); }
.vf-row-copy { display: grid; min-width: 0; flex: 1; gap: 2px; }
.vf-row-copy > span:first-child { overflow-wrap: anywhere; }
.vf-row-count { color: var(--eco-ink-muted); font-family: var(--eco-font-mono); font-size: 12px; }
.vf-row > strong { color: var(--eco-ink); font-family: var(--eco-font-mono); font-size: 18px; }
.vf-row-arrow { color: var(--eco-cobalt); font-size: 23px; line-height: 1; }
.vf-history-list { gap: 8px; }
.vf-history-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vf-history-heading > span { color: var(--eco-ink-muted); font-family: var(--eco-font-mono); font-size: 12px; }
.vf-see-all { justify-self: start; margin-top: 4px; }
.vf-history-empty { display: grid; justify-items: start; gap: 10px; border: 1px dashed var(--eco-line-strong); border-radius: 18px; background: var(--eco-surface); padding: 18px; }
.vf-history-empty h2, .vf-history-error h2, .vf-round-error h2 { margin: 0; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 21px; line-height: 1.2; }
.vf-history-empty > p:not(.vf-empty-illustration), .vf-history-error > p, .vf-round-error > p { margin: 0; color: var(--eco-ink-muted); line-height: 1.5; }
.vf-empty-illustration { display: flex; align-items: center; justify-content: center; margin: 0; }
.vf-empty-wave { height: 36px; gap: 4px; }
.vf-empty-wave .eco-wave-bar { width: 10px; }
.vf-history-error, .vf-round-error { border-inline-start: 3px solid var(--eco-danger); }
.vf-round-page, .vf-history-page { display: grid; width: min(100%, 760px); gap: 16px; margin-inline: auto; }
.vf-round-page .vf-panel { gap: 16px; }
.vf-history-page > header { display: grid; gap: 6px; }
.vf-history-page > header h1 { margin: 0; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: clamp(28px, 5vw, 40px); line-height: 1.08; }
.vf-history-page > header p { margin: 0; }
.vf-history-back { justify-self: start; text-decoration: none; }
.vf-all-rounds-list { display: grid; gap: 4px; }
.vf-finished .vf-result-heading { animation: vf-result-in var(--eco-dur-fill) var(--eco-ease-in) both; }
.vf-chip.is-miss { text-decoration: underline wavy; text-underline-offset: 3px; }
@keyframes vf-result-in { from { opacity: .5; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .vf-finished .vf-result-heading { animation: none; }
  .vf-row { transition: none; }
}
@media (max-width: 680px) {
  .vf-row { padding: 8px; }
  .vf-result-actions { align-items: stretch; flex-direction: column; }
  .vf-result-actions > * { width: 100%; }
  .vf-round-badge { justify-self: start; }
  .vf-history-empty { padding: 16px; }
}

/* Páginas legais com a marca eco (etapa 6b): cinco barras e o nome; o resumo do que mudou. */
.legal-brand { display: inline-flex; flex-shrink: 0; align-items: center; gap: 8px; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 24px; font-weight: 800; letter-spacing: -0.03em; text-decoration: none; }
.legal-brand svg { width: 26px; height: 26px; fill: var(--eco-cobalt); }
.legal-brand svg .is-voice { fill: var(--eco-amber); }
.legal-changed { border-radius: 20px; background: var(--eco-surface-raised); padding: 20px 22px; }
.legal-changed p { margin: 6px 0 0; }

/* Teclas da escuta (DeskEscuta): a letra num quadradinho mono, discreta; some no celular. */
.esc-kbd { border-radius: 6px; background: var(--eco-surface-sunken); color: var(--eco-ink-muted); padding: 2px 6px; font-family: var(--eco-font-mono); font-size: 12px; }
.esc-kbd-hint { color: var(--eco-ink-muted); font-family: var(--eco-font-mono); font-size: 13px; }
@media (hover: none) {
  .esc-kbd, .esc-kbd-hint { display: none; }
}

/* Pronto para falar: a frase que já saiu sozinha ganha o verde de feito; a que ainda não, fica apagada. */
.kit-row .kit-pos { font-family: inherit; font-size: 14px; }
.kit-pos.is-alone { color: color-mix(in srgb, var(--eco-success) 55%, white); font-weight: 600; }

/* Mais devagar (V6): um interruptor ao lado de Ouvir o modelo; ligado, fica cobalto. */
.echo-slow { min-height: 44px; border: 1px solid color-mix(in srgb, white 30%, var(--panel-bg, var(--eco-on-amber))); border-radius: var(--eco-radius-pill); background: transparent; color: inherit; padding: 0 16px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.echo-slow[aria-pressed="true"] { border-color: var(--eco-cobalt); background: var(--eco-cobalt); color: var(--eco-on-cobalt); }

/* Entrar (DeskEntrar): painel cobalto com a marca, as cinco barras grandes e a frase; ao lado o
   formulário com o link por e-mail como ação principal. No celular o painel vira uma faixa curta. */
.en-screen { display: grid; min-height: 100svh; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); background: var(--eco-surface); color: var(--eco-ink); }
.en-brand { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; background: var(--eco-cobalt); color: var(--eco-on-cobalt); padding: 64px; }
.en-logo { display: flex; align-items: center; gap: 12px; font-family: var(--eco-font-display); font-size: 36px; font-weight: 800; letter-spacing: -0.03em; }
.en-logo svg { width: 40px; height: 40px; fill: var(--eco-on-cobalt); }
.en-logo svg .is-voice, .en-bars .is-voice { fill: var(--eco-amber); background: var(--eco-amber); }
.en-bars { display: flex; height: 300px; align-items: flex-end; gap: 22px; }
.en-bars span { width: 80px; border-radius: 40px; background: var(--eco-on-cobalt); }
.en-bars span:nth-child(1) { height: 55%; } .en-bars span:nth-child(2) { height: 80%; } .en-bars span:nth-child(3) { height: 100%; }
.en-bars span:nth-child(4) { height: 70%; } .en-bars span:nth-child(5) { height: 45%; }
.en-claim { display: flex; flex-direction: column; gap: 12px; }
.en-claim p { margin: 0; max-width: 34ch; font-size: 20px; line-height: 1.45; }
.en-claim .en-headline { font-family: var(--eco-font-display); font-size: 64px; font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; }
.en-form-col { display: flex; flex-direction: column; justify-content: center; gap: 16px; max-width: 30rem; padding: 64px 96px; }
.en-form-col h1 { margin: 0; font-family: var(--eco-font-display); font-size: 40px; font-weight: 700; line-height: 1.05; }
.en-muted { margin: 0; color: var(--eco-ink-muted); font-size: 16px; line-height: 1.5; }
.en-form, .en-password { display: flex; flex-direction: column; gap: 8px; }
.en-form { gap: 12px; }
.en-label { font-size: 15px; font-weight: 700; }
.en-input { min-height: 52px; box-sizing: border-box; border: 1px solid var(--eco-line-strong); border-radius: 12px; background: var(--eco-surface-raised); color: var(--eco-ink); padding: 0 16px; font: inherit; font-size: 16px; }
.en-primary, .en-quiet { min-height: 52px; border-radius: 999px; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }
.en-primary { border: 0; background: var(--eco-cobalt); color: var(--eco-on-cobalt); }
.en-quiet { border: 1px solid var(--eco-line-strong); background: var(--eco-surface-raised); color: var(--eco-ink); font-size: 16px; }
.en-primary:disabled, .en-quiet:disabled { opacity: 0.6; cursor: progress; }
.en-divider { display: flex; align-items: center; gap: 12px; color: var(--eco-ink-muted); font-size: 14px; }
.en-divider span { height: 1px; flex: 1; background: var(--eco-line); }
.en-link { min-height: 44px; border: 0; background: transparent; color: var(--eco-cobalt); font: inherit; font-weight: 700; cursor: pointer; }
.en-msg { margin: 0; color: var(--eco-ink-muted); font-size: 14px; }
.en-msg:empty { display: none; }
.en-msg.is-ok { color: var(--eco-success); } .en-msg.is-bad { color: var(--eco-danger); }
.en-terms { margin: 0; color: var(--eco-ink-muted); font-size: 13px; line-height: 1.5; text-align: center; }
.en-door { margin: 0; color: var(--eco-ink-muted); font-size: 14px; text-align: center; }
.en-door .en-link { min-height: 32px; }

@media (max-width: 1023px) {
  .en-screen { grid-template-columns: minmax(0, 1fr); }
  .en-brand { padding: 24px 20px; }
  .en-bars { display: none; }
  .en-claim .en-headline { font-size: 36px; }
  .en-claim p { font-size: 16px; }
  .en-form-col { max-width: none; padding: 28px 20px 40px; }
}
.en-screen [hidden] { display: none; }

/* Hoje à noite (DeskHojeNoite): uma linha com o que fica para amanhã cedo, no lugar da coluna Depois. */
.today-tomorrow { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; border-radius: 18px; background: var(--eco-surface-raised); color: var(--eco-ink); padding: 18px 22px; font-size: 16px; }
.today-tomorrow span:last-child { color: var(--eco-ink-muted); font-family: var(--eco-font-mono); font-size: 15px; }

/* Pronto para falar (DeskViagem): as vagas que sobram no kit e como elas se enchem. */
.kit-free { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; border: 1px dashed var(--eco-line-strong); border-radius: 20px; padding: 16px 18px; color: var(--eco-ink-muted); font-size: 14px; }
.kit-free strong { color: var(--eco-ink); }
.kit-stage.is-managing { max-width: 1080px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .86fr); align-items: start; gap: 18px; }
.kit-stage.is-managing > .kit-top, .kit-stage.is-managing > .kit-head { grid-column: 1 / -1; }
.kit-board { display: grid; gap: 14px; min-width: 0; }
.kit-next, .track-kit-next { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.kit-next button, .kit-next a, .track-kit-next a { display: inline-flex; min-height: 44px; align-items: center; border: 1px solid var(--eco-line-strong); border-radius: 999px; background: var(--eco-surface-raised); color: var(--eco-ink); padding: 0 16px; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.kit-next button:disabled, .kit-next a[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.kit-secondary { color: var(--eco-cobalt); font-weight: 700; }
.kit-network-note, .kit-copy-time { margin: 0; color: var(--eco-ink-muted); font-size: 14px; }
.kit-copy-time { font-family: var(--eco-font-mono); }
.kit-picker-backdrop { display: none; }
.kit-picker { display: flex; flex-direction: column; gap: 14px; min-width: 0; border: 1px solid var(--eco-line); border-radius: 22px; background: var(--eco-surface-raised); color: var(--eco-ink); padding: 22px; box-shadow: var(--eco-shadow-raised); }
.kit-picker header { display: flex; justify-content: space-between; gap: 12px; }
.kit-picker h2 { margin: 2px 0; font: 700 25px/1.1 var(--eco-font-display); }
.kit-picker p { margin: 0; color: var(--eco-ink-muted); font-size: 14px; }
.kit-picker-kicker { color: var(--eco-cobalt) !important; font-size: 12px !important; font-weight: 700; text-transform: uppercase; }
.kit-picker-close { width: 40px; height: 40px; flex: none; border: 1px solid var(--eco-line-strong); border-radius: 50%; background: transparent; color: inherit; font: 24px/1 var(--eco-font-sans); cursor: pointer; }
.kit-choice-list, .kit-choice-remove { display: grid; gap: 0; max-height: 400px; overflow: auto; margin: 0; padding: 0; list-style: none; }
.kit-choice-row, .kit-choice-remove li { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--eco-line); padding: 12px 0; }
.kit-choice-row span { display: grid; gap: 4px; min-width: 0; }
.kit-choice-row b { overflow-wrap: anywhere; }
.kit-choice-row small { color: var(--eco-ink-muted); }
.kit-choice-row button, .kit-choice-remove button, .kit-picker footer button { min-height: 44px; flex: none; border: 1px solid var(--eco-line-strong); border-radius: 999px; background: var(--eco-surface-raised); color: var(--eco-ink); padding: 0 14px; font: inherit; font-weight: 700; cursor: pointer; }
.kit-choice-row button:not(:disabled), .kit-picker footer button:last-child { border-color: var(--eco-cobalt); background: var(--eco-cobalt); color: var(--eco-on-cobalt); }
.kit-choice-row button:disabled { opacity: .55; cursor: not-allowed; }
.kit-choice-row.is-added strong { color: var(--eco-success); }
.kit-choice-remove button { width: 44px; padding: 0; font-size: 22px; }
.kit-picker footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.kit-undo button { border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
#track-panel:has(> .kit-picker) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr); align-items: start; gap: 16px; }
#track-panel:has(> .kit-picker) > .track-kit-overview { grid-column: 1 / -1; }
#track-panel:has(> .kit-picker) > .track-kit-collection { grid-column: 1; }
#track-panel:has(> .kit-picker) > .track-kit-next { grid-column: 1; }
#track-panel:has(> .kit-picker) > .kit-picker { grid-column: 2; grid-row: 2 / span 2; }
@media (max-width: 767px) {
  .kit-stage.is-managing { display: flex; max-width: 46rem; }
  .kit-picker-backdrop { position: fixed; z-index: 40; inset: 0; display: block; background: color-mix(in srgb, var(--eco-ink) 54%, transparent); opacity: 1; transition: opacity var(--eco-dur-fill) var(--eco-ease-out); }
  .kit-picker-backdrop.is-closing { opacity: 0; }
  .kit-picker { position: fixed; z-index: 41; right: 0; bottom: 0; left: 0; max-height: 88svh; overflow: auto; border-radius: 28px 28px 0 0; padding: 24px 20px max(24px, env(safe-area-inset-bottom)); transform: translateY(0); animation: eco-sheet-enter var(--eco-dur-sheet) var(--eco-ease-in) both; }
  .kit-picker.is-closing { transform: translateY(100%); transition: transform var(--eco-dur-sheet-out) var(--eco-ease-out); animation: none; }
  .kit-picker footer { flex-direction: column; }
  .kit-picker footer button { width: 100%; }
  #track-panel:has(> .kit-picker) { display: block; }
}

/* Minha trilha (DeskMinhaTrilha): lista das trilhas (300px) e a escolhida ao lado, com a barra de
   progresso e uma caixa sunken por sessão; aula feita riscada; adicionar sessão tracejado. */
.mt-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.mt-head > div { display: flex; flex-direction: column; gap: 6px; }
.mt-head h1 { margin: 0; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 40px; font-weight: 700; line-height: 1.05; }
.mt-head p { margin: 0; color: var(--eco-ink-muted); font-size: 16px; }
.mt-head .mt-kicker { color: var(--eco-cobalt); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.mt-new { min-height: 48px; border: 0; border-radius: 999px; background: var(--eco-cobalt); color: var(--eco-on-cobalt); padding: 0 20px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.mt-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: start; gap: 24px; }
.mt-list { display: flex; flex-direction: column; gap: 8px; }
.mt-track { display: flex; flex-direction: column; gap: 4px; border: 0; border-radius: 16px; background: transparent; color: var(--eco-ink); padding: 14px 16px; font: inherit; text-align: left; cursor: pointer; }
.mt-track.is-current { background: var(--eco-surface-raised); box-shadow: inset 0 0 0 2px var(--eco-cobalt); }
.mt-track strong { font-size: 16px; }
.mt-track span { color: var(--eco-ink-muted); font-family: var(--eco-font-mono); font-size: 13px; }
.mt-detail { display: flex; flex-direction: column; gap: 14px; border-radius: 24px; background: var(--eco-surface-raised); color: var(--eco-ink); padding: 24px; }
.mt-detail-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.mt-detail-head h2 { margin: 0; font-size: 22px; font-weight: 700; }
.mt-actions { display: flex; gap: 8px; }
.mt-quiet, .mt-danger { min-height: 44px; border-radius: 999px; padding: 0 14px; font: inherit; font-weight: 700; cursor: pointer; }
.mt-quiet { border: 1px solid var(--eco-line-strong); background: var(--eco-surface-raised); color: var(--eco-ink); }
.mt-danger { border: 0; background: transparent; color: var(--eco-danger); }
.mt-bar { height: 8px; overflow: hidden; border-radius: 999px; background: var(--eco-surface-sunken); }
.mt-bar span { display: block; height: 100%; background: var(--eco-cobalt); transition: width var(--eco-dur-fill) var(--eco-ease-in); }
.mt-sessions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mt-session { display: flex; flex-direction: column; border-radius: 18px; background: var(--eco-surface); padding: 16px; }
.mt-session-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mt-session-head p { margin: 0; color: var(--eco-ink-muted); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.mt-item { display: flex; min-height: 44px; align-items: center; gap: 8px; }
.mt-item label { display: flex; min-width: 0; flex: 1; align-items: center; gap: 12px; font-size: 16px; cursor: pointer; }
.mt-item input { width: 22px; height: 22px; flex-shrink: 0; accent-color: var(--eco-success); }
.mt-item.is-done label span { color: var(--eco-ink-muted); text-decoration: line-through; }
.mt-kind { color: var(--eco-ink-muted); font-size: 12px; }
.mt-remove { border: 0; background: transparent; color: var(--eco-ink-muted); padding: 4px 8px; font: inherit; font-size: 13px; cursor: pointer; }
.mt-remove:hover { color: var(--eco-danger); }
.mt-add summary, .mt-add-session summary { color: var(--eco-cobalt); font-weight: 700; cursor: pointer; list-style: none; }
.mt-add { margin-top: 6px; }
.mt-add-session summary { display: flex; min-height: 48px; align-items: center; justify-content: center; border: 1.5px dashed var(--eco-line-strong); border-radius: 14px; }
.mt-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mt-input { min-height: 44px; min-width: 0; flex: 1; box-sizing: border-box; border: 1px solid var(--eco-line-strong); border-radius: 12px; background: var(--eco-surface-raised); color: var(--eco-ink); padding: 0 12px; font: inherit; }
.mt-muted { margin: 0; color: var(--eco-ink-muted); font-size: 14px; }

@media (max-width: 1023px) {
  .mt-layout, .mt-sessions { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .mt-head h1 { font-size: 32px; }
}

/* A aula (DeskAula): folha larga, o que a aula ensinou e as anotações lado a lado. */
.au-sheet { max-width: 72rem; }
.au-kicker { margin: 0; color: var(--eco-cobalt); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.au-title { margin: 4px 0 0; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 28px; font-weight: 700; line-height: 1.1; }
.au-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; gap: 24px; margin-top: 16px; }
.au-col { display: flex; min-width: 0; flex-direction: column; gap: 12px; }
.au-notes { border-radius: 20px; background: var(--eco-surface-sunken); padding: 18px; }
.au-notes-label { color: var(--eco-ink); font-size: 18px; font-weight: 700; }
.au-muted { margin: 0; color: var(--eco-ink-muted); font-size: 14px; }
.au-note { width: 100%; min-height: 16rem; box-sizing: border-box; resize: vertical; border: 1px solid var(--eco-line-strong); border-radius: 14px; background: var(--eco-surface-raised); color: var(--eco-ink); padding: 12px 14px; font: inherit; font-size: 15px; line-height: 1.6; }
.au-note:focus { border-color: var(--eco-cobalt); outline: none; }
.au-col #transcript > :first-child, .au-col #teachings > :first-child { margin-top: 0; }

@media (max-width: 1023px) {
  .au-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Teclas do Ecoar (DeskSemMicrofone): uma linha discreta sob o modelo; some em telas de toque. */
.echo-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 0; color: var(--eco-ink-muted); font-size: 13px; }
.echo-keys span { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 12px; margin-right: 4px; }
.echo-keys kbd { border-radius: 6px; background: var(--eco-surface-sunken); color: var(--eco-ink); padding: 2px 6px; font-family: var(--eco-font-mono); font-size: 12px; }
@media (hover: none) {
  .echo-keys { display: none; }
}

/* Primeiro acesso (DeskPrimeiroAcesso): o painel cobalto da marca e, ao lado, as três coisas
   opcionais em cartões, com "Começar pelo Hoje". Reusa as barras grandes do Entrar. */
.wa-screen { display: grid; min-height: 100svh; grid-template-columns: 560px minmax(0, 1fr); background: var(--eco-surface); color: var(--eco-ink); }
.wa-brand { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; background: var(--eco-cobalt); color: var(--eco-on-cobalt); padding: 56px; }
.wa-logo { margin: 0; font-family: var(--eco-font-display); font-size: 40px; font-weight: 800; letter-spacing: -0.04em; }
.wa-claim { display: flex; flex-direction: column; gap: 12px; }
.wa-claim p { margin: 0; font-size: 17px; line-height: 1.5; }
.wa-claim .wa-headline { font-family: var(--eco-font-display); font-size: 44px; font-weight: 700; line-height: 1.02; }
.wa-main { display: flex; max-width: 44rem; flex-direction: column; justify-content: center; gap: 20px; padding: 56px 72px; }
.wa-kicker { margin: 0; color: var(--eco-cobalt); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.wa-main h1 { margin: 0; font-family: var(--eco-font-display); font-size: 36px; font-weight: 700; line-height: 1.05; }
.wa-step { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; border-radius: 20px; background: var(--eco-surface-raised); padding: 18px 20px; }
.wa-icon { display: grid; width: 48px; height: 48px; flex-shrink: 0; place-items: center; border-radius: 16px; background: var(--eco-cobalt-soft); color: var(--eco-cobalt); }
.wa-icon.is-ok { background: var(--eco-success-soft); color: var(--eco-success); }
.wa-icon .ff-icon { width: 22px; height: 22px; }
.wa-copy { display: flex; min-width: 12rem; flex: 1; flex-direction: column; gap: 4px; }
.wa-copy strong { font-size: 18px; }
.wa-copy span { color: var(--eco-ink-muted); font-size: 15px; line-height: 1.45; }
.wa-quiet { display: inline-flex; min-height: 44px; align-items: center; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--eco-line-strong); color: var(--eco-ink); padding: 0 18px; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.wa-done { color: var(--eco-success); font-size: 14px; font-weight: 700; }
.wa-note { width: 100%; color: var(--eco-ink-muted); font-size: 13px; }
.wa-actions { display: flex; gap: 12px; }
.wa-primary { display: inline-flex; min-height: 52px; align-items: center; border-radius: 999px; background: var(--eco-cobalt); color: var(--eco-on-cobalt); padding: 0 20px; font-weight: 700; text-decoration: none; }

@media (max-width: 1023px) {
  .wa-screen { grid-template-columns: minmax(0, 1fr); }
  .wa-brand { padding: 24px 20px; }
  .wa-brand .en-bars { display: none; }
  .wa-claim .wa-headline { font-size: 32px; }
  .wa-main { max-width: none; padding: 28px 20px 40px; }
}

/* Estados do Entrar (TelaLinkEnviado, TelaLinkExpirado): o formulário dá lugar à explicação. */
.en-state { display: flex; flex-direction: column; gap: 12px; }
.en-state p { margin: 0; font-size: 16px; line-height: 1.5; }
.en-state .en-muted { font-size: 14px; }

/* Sem saldo no Ecoar (TelaSemSaldo): no lugar do gravador, o saldo, o que falta e as saídas de graça. */
.voice-record-zone.echo-broke { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 12px; text-align: left; }
.echo-broke p { margin: 0; line-height: 1.5; }
.echo-broke .echo-broke-balance { display: flex; width: 100%; align-items: baseline; justify-content: space-between; }
.echo-broke-balance span { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
.echo-broke-balance strong { font-family: var(--eco-font-mono); font-size: 40px; font-weight: 600; }
.echo-broke-title { font-size: 20px; font-weight: 700; }
.echo-broke-buy { display: flex; min-height: 52px; align-items: center; justify-content: center; border-radius: 999px; background: var(--eco-amber); color: var(--eco-on-amber); font-weight: 700; text-decoration: none; }
.echo-broke-kicker { margin-top: 8px !important; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
.echo-broke .echo-broke-alt { display: flex; width: 100%; box-sizing: border-box; min-height: 48px; align-items: center; border-radius: 16px; background: color-mix(in srgb, white 8%, var(--panel-bg, var(--eco-on-amber))); color: inherit; padding: 0 16px; font-weight: 700; text-decoration: none; }
.echo-broke-note { opacity: 0.8; font-size: 14px; }

/* Escuta, depois da resposta (TelaEscutaResposta): o que muda no som, com o par em mono. */
.esc-why { display: flex; flex-direction: column; gap: 6px; margin: 0; border-radius: 20px; background: var(--eco-surface-raised); padding: 16px 18px; color: var(--eco-ink); font-size: 16px; line-height: 1.5; white-space: pre-line; }
.esc-why-pair { color: var(--eco-cobalt); font-family: var(--eco-font-mono); font-size: 14px; font-weight: 600; }

/* Sua voz: a onda medida no áudio gravado (DeskDiagnostico); os vãos baixos são as pausas. */
.dv-wave { display: flex; height: 120px; align-items: center; gap: 4px; }
.dv-wave:empty { display: none; }
.dv-wave span { min-width: 3px; flex: 1; border-radius: 4px; background: var(--eco-cobalt); }
.dv-muted:empty { display: none; }

/* Boas-vindas (TelaBoasVindas): o método em três passos numerados e a escolha de como estudar. */
.wa-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wa-count { color: var(--eco-ink-muted); font-family: var(--eco-font-mono); font-size: 14px; }
.wa-method { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.wa-method li { display: flex; align-items: center; gap: 12px; font-size: 17px; }
.wa-method li span { display: grid; width: 32px; height: 32px; flex-shrink: 0; place-items: center; border-radius: 999px; background: var(--eco-cobalt-soft); color: var(--eco-cobalt); font-family: var(--eco-font-mono); font-weight: 600; }
.wa-method li:nth-child(2) span { background: var(--eco-amber-soft); color: var(--eco-amber-ink); }
.wa-choice { display: flex; flex-direction: column; gap: 10px; margin: 0; border: 0; padding: 0; }
.wa-choice legend { margin-bottom: 8px; font-size: 18px; font-weight: 700; }
.wa-choice label { display: flex; align-items: flex-start; gap: 12px; border-radius: 18px; background: var(--eco-surface-raised); padding: 16px 18px; cursor: pointer; }
.wa-choice label:has(input:checked) { box-shadow: inset 0 0 0 2px var(--eco-cobalt); }
.wa-choice input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--eco-cobalt); }
.wa-choice span { display: flex; flex-direction: column; gap: 2px; }
.wa-choice small { color: var(--eco-ink-muted); font-size: 14px; }
.wa-primary { border: 0; font: inherit; cursor: pointer; }
.wa-skip { display: inline-flex; min-height: 52px; align-items: center; border: 0; background: transparent; color: var(--eco-cobalt); padding: 0 12px; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.wa-actions { flex-wrap: wrap; align-items: center; }

/* Agenda: carga por semana até o evento (DeskAgenda), no card escuro; a semana do evento em âmbar. */
.ag-load { display: flex; height: 72px; align-items: flex-end; gap: 6px; }
.ag-load span { min-width: 6px; flex: 1; border-radius: 6px; background: color-mix(in srgb, var(--eco-cobalt) 55%, white); }
.ag-load .is-event { background: var(--eco-amber); }
.ag-target .ag-load-note { margin: 0; font-size: 13px; }
.ag-target-link { color: var(--eco-on-cobalt); font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ag-prep-busy { display: inline-flex; align-items: center; gap: 10px; }
.ag-pulse { display: inline-flex; height: 18px; align-items: end; gap: 2px; }
.ag-pulse i { display: block; width: 3px; height: 100%; border-radius: 3px; background: currentColor; transform-origin: bottom; animation: ag-prep-pulse var(--eco-dur-loading) ease-in-out infinite; }
.ag-pulse i:nth-child(2) { animation-delay: 120ms; }
.ag-pulse i:nth-child(3) { animation-delay: 240ms; }
.ag-pulse i:nth-child(4) { animation-delay: 360ms; }
.ag-pulse i:nth-child(5) { animation-delay: 480ms; }
@keyframes ag-prep-pulse { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .ag-pulse i { animation: none; } }
.agenda-prep { display: grid; gap: var(--eco-space-3); color: var(--eco-ink); }
.agenda-prep-label { margin: 0; color: var(--eco-cobalt); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: none; }
.ag-prep-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ag-prep-step { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 12px; border-top: 1px solid var(--eco-line); padding: 12px 0; }
.ag-prep-step > div { display: grid; gap: 3px; min-width: 0; }
.ag-prep-step a:not(.ag-btn) { color: var(--eco-cobalt); font-weight: 700; }
.ag-prep-step small { color: var(--eco-ink-muted); font-size: 12px; }
.ag-prep-step.is-done > div { opacity: .65; }
.ag-prep-step.is-done a { text-decoration: line-through; }
.ag-prep-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-undo { display: flex; align-items: center; gap: 14px; border: 1px solid var(--eco-success-soft); border-radius: var(--eco-radius-lg); background: var(--eco-success-soft); color: var(--eco-success); padding: 12px 16px; box-shadow: var(--eco-shadow-raised); }
.ag-undo button { border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.today-prep-focus .today-chip { max-width: 65%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-prep-done { min-height: var(--eco-size-action); border: 1px solid var(--eco-line-strong); border-radius: var(--eco-radius-pill); background: var(--eco-surface-raised); color: var(--eco-ink); padding: 0 20px; font: inherit; font-weight: 700; cursor: pointer; }
.today-prep-plan, .today-prep-also a, .today-prep-finished a { color: var(--eco-cobalt); font-weight: 700; }
.today-prep-also summary { color: var(--eco-cobalt); font-weight: 700; cursor: pointer; }
.today-prep-also ul { margin: 10px 0 0; padding-left: 20px; }
.today-prep-finished { display: grid; gap: 6px; margin-bottom: 12px; border-radius: var(--eco-radius-lg); background: var(--eco-success-soft); color: var(--eco-success); padding: 14px 18px; }
.today-agenda-reminder { margin-bottom: 12px; border-radius: var(--eco-radius-lg); background: var(--eco-surface-raised); color: var(--eco-ink); padding: 12px 18px; }
.today-agenda-reminder a { color: var(--eco-cobalt); font-weight: 700; }
@media (max-width: 640px) {
  .ag-prep-step { grid-template-columns: 1fr; }
  .ag-prep-actions { width: 100%; }
  .ag-prep-actions .ag-btn { flex: 1; justify-content: center; }
  .today-prep-focus .today-focus-head { align-items: flex-start; flex-direction: column; }
  .today-prep-focus .today-chip { max-width: 100%; }
}

/* Configurações (canvas "eco · lateral e configurações"): título e índice fixos à esquerda, seções
   numa coluna só. Duas colunas de cartões obrigavam o olho a zigue-zague e escondiam onde cada
   coisa estava; uma coluna com índice diz de cara que existem seis assuntos e onde está cada um. */
.st-layout { display: grid; grid-template-columns: 15rem minmax(0, 48rem); align-items: start; gap: 40px; }
.st-side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 6px; }
.st-side h1 { margin: 14px 0 0; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 36px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.st-side > p { margin: 0 0 14px; color: var(--eco-ink-muted); font-size: 14px; line-height: 1.5; }
.st-index { display: grid; gap: 2px; }
.st-index button { display: flex; min-height: 40px; align-items: center; justify-content: space-between; gap: 8px; border: 0; border-radius: 12px; background: transparent; color: var(--eco-ink); padding: 0 12px; font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.st-index button:hover { background: var(--eco-surface-sunken); }
.st-index button small { display: none; }
.st-index button .ff-icon { display: none; width: 18px; height: 18px; color: var(--eco-ink-muted); }
.st-index button.is-danger { color: var(--eco-danger); }
.st-grid { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.st-card { gap: 0; border: 1px solid var(--eco-line); border-radius: var(--eco-radius-lg); padding: 24px 28px 8px; scroll-margin-top: 24px; }
.st-card h2 { margin: 0; font-family: var(--eco-font-display); font-size: 24px; letter-spacing: -0.02em; }
.st-lead { margin: 4px 0 4px; color: var(--eco-ink-muted); font-size: 14px; line-height: 1.5; }
.st-card .st-row { min-height: 0; gap: 24px; padding: 16px 0; }
.st-card > .st-row:last-of-type { border-bottom: 0; }
.st-label { gap: 4px; }
.st-label strong { font-size: 16px; }
.st-label > span { font-size: 14px; line-height: 1.45; }
.st-quote { font-style: italic; }
.st-changed { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--eco-cobalt); font-size: 13px; }
.st-changed::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--eco-cobalt); }
.st-changed button { border: 0; background: none; padding: 0; color: var(--eco-cobalt); font: inherit; text-decoration: underline; cursor: pointer; }
.st-changed + .st-changed { display: none; }
.st-seg { display: flex; flex-wrap: wrap; gap: 2px; border-radius: 12px; background: var(--eco-surface-sunken); padding: 3px; }
.st-seg button { min-height: 38px; border: 0; border-radius: 9px; background: transparent; color: var(--eco-ink-muted); padding: 0 14px; font: inherit; font-size: 14px; cursor: pointer; }
.st-seg button[aria-pressed="true"] { background: var(--eco-surface-raised); color: var(--eco-ink); font-weight: 700; box-shadow: var(--eco-shadow-raised); }
.st-stepper { display: flex; align-items: center; border: 1px solid var(--eco-line-strong); border-radius: 12px; background: var(--eco-surface-raised); }
.st-stepper button { width: 44px; height: 42px; border: 0; background: transparent; color: var(--eco-ink); font: inherit; font-size: 20px; cursor: pointer; }
.st-stepper button:disabled { opacity: 0.35; cursor: default; }
.st-stepper input { width: 3rem; border: 0; background: transparent; color: var(--eco-ink); font-family: var(--eco-font-mono); font-size: 16px; font-weight: 600; text-align: center; appearance: textfield; -moz-appearance: textfield; }
.st-stepper input::-webkit-inner-spin-button, .st-stepper input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.st-switch { position: relative; width: 48px; height: 28px; flex-shrink: 0; border: 0; border-radius: 999px; background: var(--eco-line-strong); cursor: pointer; transition: background-color 120ms; }
.st-switch span { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 999px; background: var(--eco-surface-raised); transition: transform 120ms; }
.st-switch[aria-checked="true"] { background: var(--eco-cobalt); }
.st-switch[aria-checked="true"] span { transform: translateX(20px); }
.st-quiet-hours { color: var(--eco-ink-muted); }
.st-quiet-hours .st-control { width: 6.5rem; }
.st-control.is-text { width: 17rem; }
.st-advanced { gap: 0; margin-top: 0; padding: 14px 0 16px; }
.st-advanced summary { list-style: none; }
.st-advanced summary::-webkit-details-marker { display: none; }
.st-advanced summary strong::after { content: " ›"; color: var(--eco-ink-muted); }
.st-advanced[open] summary strong::after { content: " ⌄"; }
.st-advanced > .st-note { margin-top: 10px; }
.st-sub { padding: 16px 0; margin-top: 0; }
#st-dados { scroll-margin-top: 24px; }
.st-danger { border: 1px solid color-mix(in srgb, var(--eco-danger) 35%, transparent); background: var(--eco-surface-raised); }
.st-danger h2 { font-family: var(--eco-font-display); font-size: 24px; }
@media (max-width: 1023px) {
  .st-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .st-side { position: static; }
  .st-index { overflow: hidden; border: 1px solid var(--eco-line); border-radius: var(--eco-radius-lg); background: var(--eco-surface-raised); gap: 0; }
  .st-index button { min-height: 64px; border-radius: 0; padding: 10px 16px; }
  .st-index button + button { border-top: 1px solid var(--eco-line); }
  .st-index button > span { display: flex; flex-direction: column; gap: 2px; font-weight: 700; }
  .st-index button small { display: block; color: var(--eco-ink-muted); font-size: 14px; font-weight: 400; }
  .st-index button .ff-icon { display: block; }
}
@media (max-width: 639px) {
  .st-card { padding: 20px 18px 4px; }
  .st-card .st-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .st-actions { flex-wrap: wrap; }
  .st-control.is-text { width: 100%; }
}

/* Lateral em qualquer altura e zoom (canvas "eco · lateral e configurações", quadro Lateral).
   Marca, Próximo passo e rodapé ficam; só a lista rola, e sem barra: no Windows a barra comia 17 px
   do trilho de 80 e abria rolagem horizontal. Quem avisa que há mais é o degradê (nav.js, sombras). */
#app-sidebar { overflow: hidden; }
#app-sidebar > .sidebar-brand, #app-sidebar > .sidebar-next-step, .sidebar-footer { flex-shrink: 0; }
.sidebar-nav { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.sidebar-nav::-webkit-scrollbar { display: none; }
.sidebar-nav.has-more-below { mask-image: linear-gradient(#000 calc(100% - 36px), transparent); }
.sidebar-nav.has-more-above { mask-image: linear-gradient(transparent, #000 28px); }
.sidebar-nav.has-more-above.has-more-below { mask-image: linear-gradient(transparent, #000 28px, #000 calc(100% - 36px), transparent); }
.sidebar-account-row { display: flex; min-width: 0; align-items: center; gap: 4px; }
.sidebar-account-row > .sidebar-settings { min-width: 0; flex: 1; }
.sidebar-gear { width: var(--eco-size-touch); height: var(--eco-size-touch); flex-shrink: 0; align-items: center; justify-content: center; border: 1px solid var(--eco-line); border-radius: var(--eco-radius-md); color: var(--eco-ink-muted); }
.sidebar-gear:hover, .sidebar-gear.active { background: var(--eco-surface-sunken); color: var(--eco-cobalt); }
.sidebar-gear .ff-icon { width: 1.2rem; height: 1.2rem; }

/* Tela baixa (notebook de 768 px com barra de favoritos, ou zoom): aperta antes de rolar. */
@media (min-width: 768px) and (max-height: 760px) {
  #app-sidebar { gap: 0; padding-top: 0.75rem; padding-bottom: 0.5rem; }
  .sidebar-next-step { margin-top: 0.5rem; padding-block: 0.45rem; }
  .sidebar-nav-link, .sidebar-settings { min-height: 2rem; padding-block: 0.2rem; }
  .nav-group + .nav-group { margin-top: 0.4rem; }
  .nav-group-items { gap: 0.05rem; }
  .sidebar-footer { padding-top: 0.35rem; }
}

/* Trilho (768 a 1279, que é também onde cai um notebook com zoom): ícones de 44 × 40 no centro,
   nada estica para os lados, e a engrenagem vai para baixo da conta. */
@media (max-width: 1279px) and (min-width: 768px) {
  .sidebar-nav .nav-group-items { justify-items: center; }
  .sidebar-nav-link { width: var(--eco-size-touch); min-height: 2.5rem; padding: 0; }
  .nav-group + .nav-group { margin-top: 0; padding-top: 0.35rem; border-top: 1px solid var(--eco-line); }
  .sidebar-footer { justify-items: center; }
  .sidebar-footer .sidebar-settings { width: var(--eco-size-touch); padding: 0; }
  .sidebar-account-row { flex-direction: column; }
  .sidebar-account-row > .sidebar-settings { flex: none; }
}
body.focus-mode .sidebar-account-row { flex-direction: column; }

/* Primeiro acesso: o código de trilha abre embaixo da própria opção (canvas "eco · lateral e
   configurações", Primeiro acesso). */
.wa-code { display: flex; gap: 8px; margin: -2px 0 2px; padding-left: 50px; }
.wa-code[hidden] { display: none; }
.wa-code input { min-width: 0; flex: 1; min-height: 52px; box-sizing: border-box; border: 1px solid var(--eco-line-strong); border-radius: 14px; background: var(--eco-surface-raised); color: var(--eco-ink); padding: 0 14px; font-family: var(--eco-font-mono); font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase; }
.wa-code .wa-primary { border: 0; font: inherit; font-weight: 700; cursor: pointer; }
@media (max-width: 639px) { .wa-code { flex-direction: column; padding-left: 0; } }
/* Celular: a lista é a tela; a seção aberta ganha "← Configurações" como botão de voltar. */
button.st-back { align-self: flex-start; min-height: var(--eco-size-touch); border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--eco-cobalt); cursor: pointer; }
@media (max-width: 1023px) { .st-layout:not(.is-section) .st-grid:empty { display: none; } }

/* Ações curtas não podem virar "cust/o" ou "Ouvi/r". O texto fica inteiro e a barra é que
   desce o item seguinte; isso vale para as telas atuais e para ações novas com os mesmos padrões. */
:is(
  .btn,
  .today-pill,
  .today-link,
  .cost-group-trigger,
  .today-cta,
  .rv-flip,
  .rv-grade,
  .rv-pill,
  .rv-echo-btn,
  .live-btn,
  .lb-cta,
  .lb-pill,
  .lb-link,
  .lb-quiet,
  .st-quiet,
  .st-primary,
  .st-danger-btn,
  .wa-primary,
  .wa-quiet,
  .en-primary,
  .en-quiet,
  .en-link,
  .ag-new,
  .ag-btn,
  .ag-link,
  .ag-target-btn,
  .agenda-action,
  .credits-filter-btn,
  .record-btn,
  .track-force-button,
  .track-notes-button,
  .echo-pill,
  .echo-link,
  .echo-slow,
  .hub-cta,
  .tr-item-action,
  .tr-quiet,
  .tr-link,
  .cr-pay,
  .vf-go,
  .mt-quiet,
  .mt-danger,
  .mem-cta,
  .kit-listen,
  .kit-cta,
  .sm-primary,
  .sm-quiet,
  .esc-quiet,
  .esc-primary,
  .turn-listen,
  .turn-start,
  .turn-exit,
  .track-lesson-action
) {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Itens que levam a uma tela ou representam um card precisam ceder o texto; o controle curto
   acima cede a barra, mas estes nomes devem continuar legíveis dentro do próprio item. */
:is(.tab-link, .sidebar-nav-link, .more-account-link, .ac-link, .lb-row-btn) {
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* O menu Mais tem três colunas estreitas no celular: o nome quebra dentro do card e limita-se a
   duas linhas, em vez de invadir o card vizinho; aria-label continua no link inteiro. */
.more-groups .more-link {
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: auto;
  text-align: center;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.more-groups .more-link .nav-link-copy {
  min-width: 0;
  max-width: 100%;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: auto;
  text-align: center;
}

/* Barras de ação cedem espaço entre itens, em vez de encolher o rótulo dentro do controle. */
:is(
  [class*="-actions"],
  [class*="-buttons"],
  [class*="-controls"],
  .live-type-row,
  .turn-compose-row,
  .vf-input-row
) {
  flex-wrap: wrap;
  gap: var(--eco-space-2);
}

.today-coach-actions { flex-wrap: wrap; }
.today-coach-actions > * { flex: 0 0 auto; }
.today-link { min-height: var(--eco-size-touch); }

@media (max-width: 767px) {
  /* No iPhone, Ouvir fica primeiro; Outra versão e seu custo descem juntas quando necessário. */
  .today-coach-actions { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; }
}

/* A explicação fica perto da frase para resolver a dúvida sem transformar shadowing em outro nome
   de tela; ela desaparece depois das três primeiras rodadas completas, controlada pelo navegador. */
.echo-method-note {
  display: inline-block;
  margin: var(--eco-space-2) 0 0;
  border-radius: var(--eco-radius-pill);
  background: var(--eco-surface-sunken);
  padding: var(--eco-space-1) var(--eco-space-2);
  color: var(--eco-ink-muted);
  font-size: 13px;
  line-height: 1.4;
}

/* O iPhone SE não comporta o rótulo do diagnóstico no antigo círculo de 96 px; o controle
   cresce pelo próprio texto e, no celular, usa a coluna inteira sem esmagar outras ações. */
@media (max-width: 767px) {
  .record-btn { width: 100%; }
}

/* Captura de aula: data e tema têm papéis diferentes; a data ocupa pouco e o tema conserva até
   duas linhas para que a largura estreita não esconda o assunto da aula. */
.library-source-date {
  display: block;
  color: var(--eco-ink-muted);
  font-family: var(--eco-font-mono);
  font-size: 13px;
  line-height: 1.3;
}
.library-source-head h3 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--eco-ink);
  overflow-wrap: break-word;
  text-overflow: clip;
  white-space: normal;
}

/* Títulos de módulo, aula e sugestão são conteúdo, não rótulos de ação: duas linhas legíveis
   dão contexto antes do corte e deixam o botão/estado ao lado respirar. */
.track-module-heading b,
.track-lesson-copy b,
.track-kit-candidate-copy b {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: break-word;
  text-overflow: clip;
  white-space: normal;
}

/* As três coleções da Biblioteca excedem o iPhone SE: a faixa rola horizontalmente, sem barra,
   e o degradê só aparece nas bordas que ainda escondem abas, como a função sombras da lateral. */
.library-tabs.lb-tabs {
  position: relative;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.library-tabs.lb-tabs::-webkit-scrollbar { display: none; }
.lb-tabs .library-tab {
  flex: 0 0 auto;
  white-space: nowrap;
}
.lb-tabs::before,
.lb-tabs::after {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: var(--eco-space-4);
  content: '';
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
}
.lb-tabs::before {
  left: 0;
  background: linear-gradient(to right, var(--eco-surface-sunken), transparent);
}
.lb-tabs::after {
  right: 0;
  background: linear-gradient(to left, var(--eco-surface-sunken), transparent);
}
.lb-tabs.has-more-left::before,
.lb-tabs.has-more-right::after { opacity: 1; }

/* O Mais desenha cards estreitos: rótulos acima do limite recebem uma redução mínima de fonte,
   mas continuam em até duas linhas e quebram no espaço, nunca no meio de "verbal". */
.more-groups .more-link.is-long-label .nav-link-copy > span {
  font-size: calc(1em - (var(--eco-space-1) / 4));
  line-height: 1.2;
}
.more-groups .more-link,
.more-groups .more-link .nav-link-copy,
.vf-head h1 {
  hyphens: none;
  word-break: normal;
}

/* Uma única ajuda por grupo conserva espaço para as ações no celular; o popover sai da coluna
   estreita e fecha devolvendo o foco ao ? para não deixar a dúvida nem o teclado sem referência. */
.credit-help.cost-group {
  position: relative;
  z-index: 2;
  display: inline-block;
  min-width: 0;
  vertical-align: middle;
}
.cost-group > summary {
  display: grid;
  min-width: var(--eco-size-touch);
  min-height: var(--eco-size-touch);
  place-items: center;
  cursor: pointer;
  list-style: none;
}
.cost-group > summary::-webkit-details-marker { display: none; }
.cost-group-trigger {
  border: 0;
  border-radius: var(--eco-radius-pill);
  background: transparent;
  color: var(--eco-ink-muted);
  font: inherit;
  padding: 0;
}
.cost-group-trigger > span {
  display: grid;
  width: var(--eco-space-8);
  height: var(--eco-space-8);
  place-items: center;
  border: 1px solid var(--eco-line);
  border-radius: var(--eco-radius-pill);
  background: var(--eco-surface-sunken);
  color: var(--eco-ink-muted);
  font-weight: 700;
}
.cost-group-trigger:hover > span,
.cost-group-trigger:focus-visible > span,
.cost-group[open] .cost-group-trigger > span {
  border-color: var(--eco-cobalt);
  background: var(--eco-cobalt-soft);
  color: var(--eco-cobalt);
  outline: none;
}
.credit-help:not([open]) .credit-help-popover { display: none; }
.credit-help-popover {
  position: absolute;
  top: calc(100% + var(--eco-space-2));
  right: 0;
  z-index: 20;
  inline-size: calc(var(--eco-size-action) * 7);
  max-inline-size: calc(100vw - (var(--eco-space-6) * 2));
  border: 1px solid var(--eco-line-strong);
  border-radius: var(--eco-radius-md);
  background: var(--eco-surface-raised);
  box-shadow: var(--eco-shadow-raised);
  padding: var(--eco-space-3);
  color: var(--eco-ink-muted);
}
.credit-help-popover > strong {
  display: block;
  margin-bottom: var(--eco-space-1);
  color: var(--eco-ink);
}
.credit-help-lines { display: grid; gap: var(--eco-space-1); }
.credit-help-popover p { margin: 0; }
.credit-help-popover b { color: var(--eco-ink); }
.credit-help-available {
  margin-top: var(--eco-space-2) !important;
  border-top: 1px solid var(--eco-line);
  padding-top: var(--eco-space-2);
}
.today-coach-actions > .cost-group { margin-left: auto; }

@media (max-width: 767px) {
  /* O popover não pode aumentar uma coluna estreita nem ficar atrás da tabbar fixa do telefone. */
  .credit-help-popover {
    position: fixed;
    top: auto;
    right: var(--eco-space-3);
    bottom: calc(var(--eco-size-action) + env(safe-area-inset-bottom) + var(--eco-space-3));
    left: auto;
    max-inline-size: calc(100vw - (var(--eco-space-6) * 2));
  }
}

/* Resultado do Ecoar (R1–R5, 28/09, DeskResultado/TelaResultado). O escuro fixo é do gravador;
   avaliado, o painel vira superfície do tema. Sem âmbar: âmbar é a voz durante a gravação. */
.echo-panel.is-result { --panel-bg: var(--eco-surface-raised); --panel-ink: var(--eco-ink); --panel-muted: var(--eco-ink-muted); justify-content: flex-start; }
.echo-result { display: flex; flex-direction: column; gap: var(--eco-space-4); text-align: left; }
.echo-result-kicker { margin: 0; color: var(--eco-success); font-family: var(--eco-font-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.echo-result-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.echo-result-score strong { font-family: var(--eco-font-display); font-size: clamp(44px, 6vw, 64px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--eco-ink); }
.echo-result-score span { color: var(--eco-ink-muted); font-size: 16px; }
.echo-result-bars { display: flex; gap: 6px; }
.echo-result-bars span { flex: 1; height: 8px; border-radius: 4px; }
.echo-result-bars .is-match { background: var(--eco-success); }
.echo-result-bars .is-miss { background: var(--eco-danger); }
.echo-result-hint { border-radius: var(--eco-radius-md); background: var(--eco-danger-soft); color: var(--eco-ink); padding: 12px 14px; font-size: 15px; line-height: 1.5; }
.echo-result-title { margin: var(--eco-space-2) 0 0; font-size: 15px; font-weight: 700; color: var(--eco-ink); }
.echo-result-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.echo-result-list li { display: flex; align-items: center; gap: 12px; min-height: var(--eco-size-touch); border: 1px solid var(--eco-line); border-radius: var(--eco-radius-md); padding: 8px 10px 8px 12px; }
.echo-result-list li.is-miss { border-color: var(--eco-danger); }
.echo-result-n { width: 28px; flex: none; color: var(--eco-ink-muted); font-family: var(--eco-font-mono); font-size: 14px; }
.echo-result-chip { display: inline-flex; flex: none; align-items: center; gap: 4px; border-radius: var(--eco-radius-pill); padding: 3px 10px; font-size: 13px; font-weight: 700; }
.is-match .echo-result-chip { background: var(--eco-success-soft); color: var(--eco-success); }
.is-miss .echo-result-chip { background: var(--eco-danger-soft); color: var(--eco-danger); }
.echo-result-chip .ff-icon { width: 14px; height: 14px; }
.echo-result-said { flex: 1; min-width: 0; overflow: hidden; color: var(--eco-ink-muted); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.echo-result-play { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 36px; border: 1px solid var(--eco-line-strong); border-radius: var(--eco-radius-pill); background: transparent; color: var(--eco-ink); padding: 0 14px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.echo-result-play.is-compare { border-color: var(--eco-cobalt); background: var(--eco-cobalt); color: var(--eco-on-cobalt); }
.echo-result-note { margin: 0; color: var(--eco-ink-muted); font-size: 14px; line-height: 1.5; }
.echo-result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: var(--eco-space-2); }
.echo-result-actions .btn { min-width: 11rem; }
.echo-result-back { color: var(--eco-link); font-size: 15px; font-weight: 700; }
@media (max-width: 640px) {
  .echo-result-said { display: none; }
  .echo-result-list li { gap: 8px; }
  .echo-result-play { margin-left: auto; }
  .echo-result-actions .btn { flex: 1 1 100%; }
}

/* Captura de aba (C1–C7, 28/09): o nome e o silêncio ficam no modal, antes de começar. */
.source-capture-name { display: flex; flex-direction: column; gap: 6px; margin-top: var(--eco-space-4); font-size: 14px; font-weight: 700; color: var(--eco-ink); }
.source-capture-name input { min-height: var(--eco-size-touch); border: 1px solid var(--eco-line-strong); border-radius: var(--eco-radius-md); background: var(--eco-surface-raised); color: var(--eco-ink); padding: 0 14px; font: inherit; font-weight: 400; }
.source-capture-name small { color: var(--eco-ink-muted); font-size: 13px; font-weight: 400; }
.source-capture-keep { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: var(--eco-space-3); border-radius: var(--eco-radius-md); background: var(--eco-danger-soft); color: var(--eco-ink); padding: 12px 14px; font-size: 14px; line-height: 1.45; }

/* Boas-vindas: o texto de cada passo é um bloco só; sem isso, o <i>shadowing</i> virava coluna. */
.wa-method li p { margin: 0; }
/* O aceite aparece antes da ação apenas na porta de começar; no login, os links são informativos. */
.en-terms-check { display: flex; align-items: flex-start; gap: 10px; color: var(--eco-ink); font-size: 14px; line-height: 1.5; text-align: left; }
.en-terms-check input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--eco-cobalt); }
.en-terms-check a { color: var(--eco-link); text-decoration: underline; }

/* O [hidden] precisa ganhar do display: flex, senão a faixa do silêncio aparecia antes de começar. */
.source-capture-keep[hidden], .source-capture-lesson[hidden] { display: none; }
.source-capture-lesson select { min-height: var(--eco-size-touch); border: 1px solid var(--eco-line-strong); border-radius: var(--eco-radius-md); background: var(--eco-surface-raised); color: var(--eco-ink); padding: 0 12px; font: inherit; font-weight: 400; }
.library-lesson-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; color: var(--eco-ink); }
.library-lesson-field small { color: var(--eco-ink-muted); font-weight: 400; }

/* Lateral LA1–LA5 + RL1–RL5 (canvas "Lateral em qualquer altura e zoom", revisão de 28/09).
   A partir de 768 px a lateral é SEMPRE o trilho de 80 px (desktop, tablet ou zoom); a larga só
   existe aberta pelo mouse, por cima da página. As medidas são as mesmas nos dois estados — marca 48,
   Próximo passo 56, rótulo 24, item 40, espaço 4, ícone centrado a 40 px da borda — e é isso que
   impede os ícones de pular ao abrir. Não troque padding/margem de um estado sem o outro.
   "html:root body #app-sidebar" (1,1,2) é de propósito: vence body.focus-mode #app-sidebar (1,1,1) e as
   regras antigas do tablet, que continuam acima só como histórico. */
@media (min-width: 768px) {
  html:root body #app-sidebar { width: 5rem; align-items: stretch; padding: 16px 0 0; overflow: hidden; }
  /* As regras antigas do foco centralizam (align-items/justify-items: center) e encolhem os grupos até
     o tamanho do texto; aqui tudo estica, para cada linha começar na mesma borda. */
  html:root body #app-sidebar > * { align-self: stretch; }
  html:root body #app-sidebar :is(.sidebar-nav, .nav-group, .nav-group-items, .nav-section-label, .sidebar-footer, .sidebar-account-row) { justify-self: stretch; align-self: stretch; justify-items: stretch; width: auto; }
  html body .workspace { margin-left: 5rem; }
  html:root body #app-sidebar .sidebar-brand { display: flex; height: 48px; margin: 0 0 4px; padding: 0 0 0 18px; gap: 10px; white-space: nowrap; }
  html:root body #app-sidebar .sidebar-brand .brand-mark { flex: none; margin-inline: 6px; }
  html:root body #app-sidebar .sidebar-brand .brand-word { display: none; }
  html:root body #app-sidebar .sidebar-next-step { display: flex; height: 56px; box-sizing: border-box; margin: 0 10px 4px; padding: 0 0 0 8px; gap: 10px; flex-direction: row; align-items: center; border-radius: 14px; background: transparent; color: var(--eco-on-cobalt); }
  html:root body #app-sidebar .sidebar-next-step[hidden] { display: none; }
  html:root body #app-sidebar .sidebar-next-step-icon { display: flex; width: 44px; height: 44px; flex: none; align-items: center; justify-content: center; border-radius: 12px; background: var(--eco-cobalt); }
  html:root body #app-sidebar .sidebar-next-step-icon .ff-icon { width: 18px; height: 18px; }
  html:root body #app-sidebar .sidebar-next-step-copy { display: none; min-width: 0; flex-direction: column; line-height: 1.2; }
  html:root body #app-sidebar .sidebar-next-step-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html:root body #app-sidebar .sidebar-nav { width: auto; padding: 0; }
  html:root body #app-sidebar .nav-group { display: block; width: auto; margin: 0; padding: 0; border: 0; }
  html:root body #app-sidebar .nav-group + .nav-group { margin: 0; padding: 0; border: 0; }
  html:root body #app-sidebar .nav-group-items { display: grid; justify-items: stretch; gap: 4px; width: auto; margin-bottom: 4px; }
  /* LA4: no trilho o rótulo vira um fio curto no mesmo lugar e da mesma altura. */
  html:root body #app-sidebar .nav-section-label { display: flex; height: 24px; align-items: center; margin: 0; padding: 0 0 0 28px; font-size: 0; }
  html:root body #app-sidebar .nav-section-label::before { content: ""; width: 24px; border-top: 1px solid var(--eco-line); }
  html:root body #app-sidebar .sidebar-nav-link { width: 44px; height: 40px; min-height: 0; box-sizing: border-box; margin: 0 0 0 18px; padding: 0; gap: 10px; justify-content: flex-start; }
  html:root body #app-sidebar .sidebar-nav-link > .ff-icon,
  html:root body #app-sidebar .sidebar-nav-link.active > .ff-icon { width: 20px; height: 20px; flex: none; margin-inline: 12px; }
  html:root body #app-sidebar .sidebar-nav-link .nav-link-copy { display: none; min-width: 0; }
  html:root body #app-sidebar .sidebar-nav-link .nav-link-copy small { display: none; }
  /* RL1: créditos, conta e ajustes no mesmo alvo de 44 px, no mesmo eixo, sem borda nem fundo parado. */
  html:root body #app-sidebar .sidebar-footer { display: flex; width: auto; flex-direction: column; gap: 8px; margin: 0; padding: 8px 0 12px; border-top: 1px solid var(--eco-line); }
  html:root body #app-sidebar .sidebar-account-row { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  html:root body #app-sidebar .sidebar-footer .sidebar-settings,
  html:root body #app-sidebar .sidebar-footer .sidebar-gear { display: flex; width: 44px; height: 44px; min-height: 0; box-sizing: border-box; margin: 0 0 0 18px; padding: 0; gap: 10px; align-items: center; justify-content: flex-start; border: 0; border-radius: 12px; background: transparent; }
  html:root body #app-sidebar .sidebar-footer .sidebar-nav-icon { display: flex; width: 44px; height: 44px; flex: none; align-items: center; justify-content: center; }
  html:root body #app-sidebar .sidebar-footer .sidebar-gear .ff-icon { width: 20px; height: 20px; flex: none; margin-inline: 12px; }
  html:root body #app-sidebar .account-avatar { width: 30px; height: 30px; font-size: 12px; letter-spacing: 0; }
  /* RL2–RL4: o número no lugar da moeda; 99+ como selo; zero em fundo de aviso. */
  html:root body #app-sidebar a[data-view="credits"] > .sidebar-nav-icon { display: none; }
  html:root body #app-sidebar .sidebar-credit-balance { position: relative; display: flex; width: 44px; height: 44px; flex: none; order: -1; align-items: center; justify-content: center; border-radius: 12px; color: var(--eco-ink); font-family: var(--eco-font-mono); font-size: 15px; font-weight: 600; }
  html:root body #app-sidebar .sidebar-credit-balance[hidden] { display: none; }
  html:root body #app-sidebar .sidebar-credit-balance.is-over::after { content: "+"; position: absolute; top: 3px; right: 2px; display: grid; min-width: 16px; height: 16px; place-items: center; border-radius: 999px; background: var(--eco-cobalt); color: var(--eco-on-cobalt); font-family: var(--eco-font-sans); font-size: 11px; font-weight: 700; }
  html:root body #app-sidebar .sidebar-credit-balance.is-empty { background: var(--eco-danger-soft); color: var(--eco-danger); }
  html:root body #app-sidebar a[data-view="credits"]:has(.sidebar-credit-balance[hidden]) > .sidebar-nav-icon { display: flex; }
  /* RL5: ativo igual aos outros itens. */
  html:root body #app-sidebar .sidebar-footer .sidebar-settings.active,
  html:root body #app-sidebar .sidebar-footer .sidebar-gear.active,
  html:root body #app-sidebar .sidebar-footer .sidebar-settings:hover,
  html:root body #app-sidebar .sidebar-footer .sidebar-gear:hover { background: var(--eco-cobalt-soft); color: var(--eco-cobalt); }
  html:root body #app-sidebar :is(.sidebar-footer-copy, .sidebar-account-copy, .sidebar-gear-copy) { display: none; }
}
/* LA5: tela baixa aperta antes de rolar; só a lista rola. */
@media (min-width: 768px) and (max-height: 759px) {
  html:root body #app-sidebar .sidebar-nav-link { height: 34px; }
  html:root body #app-sidebar .nav-section-label { height: 16px; }
}
/* Aberta pelo mouse: só acrescenta texto à direita, nas mesmas linhas. */
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  html:root body #app-sidebar.is-peek { width: 15.5rem; background: var(--eco-surface-raised); box-shadow: var(--eco-shadow-raised); }
  html:root body #app-sidebar.is-peek .sidebar-brand .brand-word { display: inline; }
  html:root body #app-sidebar.is-peek .sidebar-next-step { background: var(--eco-cobalt); }
  html:root body #app-sidebar.is-peek .sidebar-next-step-copy { display: flex; }
  html:root body #app-sidebar.is-peek .nav-section-label { padding-left: 26px; font-size: 0.62rem; }
  html:root body #app-sidebar.is-peek .nav-section-label::before { content: none; }
  html:root body #app-sidebar.is-peek .sidebar-nav-link { width: auto; margin: 0 10px; padding: 0 0 0 8px; }
  html:root body #app-sidebar.is-peek .sidebar-nav-link .nav-link-copy { display: grid; }
  html:root body #app-sidebar.is-peek .sidebar-footer .sidebar-settings,
  html:root body #app-sidebar.is-peek .sidebar-footer .sidebar-gear { width: auto; margin: 0 10px; padding: 0 0 0 8px; }
  html:root body #app-sidebar.is-peek :is(.sidebar-footer-copy, .sidebar-account-copy, .sidebar-gear-copy) { display: flex; flex: 1; min-width: 0; }
  html:root body #app-sidebar.is-peek .sidebar-account-copy { flex-direction: column; }
  /* Durante os 240 ms da abertura a caixa ainda é estreita: sem nowrap o texto quebra e pula. */
  html:root body #app-sidebar.is-peek :is(.nav-link-copy, .nav-link-copy *, .nav-section-label, .sidebar-brand, .sidebar-footer-copy, .sidebar-gear-copy, .sidebar-account-copy, .sidebar-account-copy *) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { #app-sidebar { transition: none; } }

/* D168: Biblioteca e Trazer material têm tarefas diferentes; a captura começa no modal,
   e a revisão ocupa a rota em foco, sem misturar ações das duas etapas. */
.bring-screen, .bring-focus { display: grid; gap: var(--eco-space-6); max-width: 74rem; margin: 0 auto; padding: var(--eco-space-6) var(--eco-space-4) calc(var(--eco-space-8) * 2); }
.bring-head, .bring-focus-shell { display: grid; gap: var(--eco-space-3); }
.bring-head h1, .bring-focus h1 { margin: 0; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.02; }
.bring-head p:last-child, .bring-done-lede { max-width: 42rem; margin: 0; color: var(--eco-ink-muted); font-size: 1.05rem; line-height: 1.55; }
.bring-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--eco-space-4); }
.bring-option { display: grid; min-height: 9rem; align-content: start; gap: var(--eco-space-3); border: 1px solid var(--eco-line); border-radius: var(--eco-radius-lg); background: var(--eco-surface-raised); color: var(--eco-ink); padding: var(--eco-space-6); text-align: left; cursor: pointer; }
.bring-option:hover, .bring-option:focus-visible { border-color: var(--eco-cobalt); box-shadow: var(--eco-shadow-raised); }
.bring-option-icon { display: grid; width: var(--eco-size-touch); height: var(--eco-size-touch); place-items: center; border-radius: var(--eco-radius-md); background: var(--eco-cobalt-soft); color: var(--eco-cobalt); }
.bring-option-icon .ff-icon { width: 1.25rem; height: 1.25rem; }
.bring-option b { font-size: 1.15rem; }
.bring-option small, .bring-support, .bring-note { color: var(--eco-ink-muted); line-height: 1.45; }
.bring-history { display: grid; gap: var(--eco-space-3); }
.bring-history-head, .bring-review-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--eco-space-3); }
.bring-history h2, .bring-review h2 { margin: 0; color: var(--eco-ink); font-size: 1.05rem; }
.bring-history-head > span { color: var(--eco-ink-muted); font-family: var(--eco-font-mono); font-size: 0.8rem; }
.bring-history ul, .bring-review-list ul { display: grid; gap: var(--eco-space-2); margin: 0; padding: 0; list-style: none; }
.bring-history-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--eco-space-4); min-width: 0; border-top: 1px solid var(--eco-line); padding: var(--eco-space-3) 0; }
.bring-history-item > div { display: grid; min-width: 0; gap: 0.2rem; }
.bring-history-item b { overflow: hidden; color: var(--eco-ink); text-overflow: ellipsis; white-space: nowrap; }
.bring-history-title { overflow: hidden; color: var(--eco-ink); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.bring-history-title:hover { color: var(--eco-link); text-decoration: underline; }
.bring-history-item small, .bring-history-item span { color: var(--eco-ink-muted); font-size: 0.82rem; }
.bring-history-open { justify-self: start; border: 0; background: transparent; color: var(--eco-link); padding: 0; font-size: 0.88rem; font-weight: 700; cursor: pointer; }
.bring-history-open:hover { text-decoration: underline; }
.bring-status { color: var(--eco-success); font-family: var(--eco-font-mono); font-size: 0.78rem; }
.bring-empty { color: var(--eco-ink-muted); }
.bring-focus-head { display: flex; align-items: center; justify-content: space-between; gap: var(--eco-space-3); color: var(--eco-ink-muted); font-family: var(--eco-font-mono); font-size: 0.78rem; }
.bring-back { border: 0; background: transparent; color: var(--eco-link); padding: 0; font: inherit; cursor: pointer; }
.bring-form { display: grid; max-width: 46rem; gap: var(--eco-space-4); }
.bring-field { display: grid; gap: 0.4rem; color: var(--eco-ink); font-size: 0.9rem; font-weight: 700; }
.bring-field small { color: var(--eco-ink-muted); font-weight: 400; }
.bring-field input, .bring-field textarea, .bring-field select { width: 100%; min-height: var(--eco-size-touch); box-sizing: border-box; border: 1px solid var(--eco-line-strong); border-radius: var(--eco-radius-md); background: var(--eco-surface-raised); color: var(--eco-ink); padding: 0.7rem 0.85rem; font: inherit; font-weight: 400; }
.bring-field textarea { min-height: 11rem; resize: vertical; }
.bring-dropzone { display: grid; min-height: 8rem; place-items: center; gap: var(--eco-space-2); border: 1px dashed var(--eco-line-strong); border-radius: var(--eco-radius-md); background: var(--eco-surface-sunken); padding: var(--eco-space-4); text-align: center; }
.bring-dropzone input { min-height: auto; border: 0; padding: 0; }
.bring-check { display: flex; align-items: flex-start; gap: var(--eco-space-2); color: var(--eco-ink); font-size: 0.9rem; }
.bring-check input { width: 1.2rem; height: 1.2rem; flex: none; accent-color: var(--eco-cobalt); }
.bring-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--eco-space-3); margin-top: var(--eco-space-3); }
.bring-error { min-height: 1.2em; margin: 0; color: var(--eco-danger); }
.bring-how { max-width: 46rem; border-top: 1px solid var(--eco-line); padding-top: var(--eco-space-3); color: var(--eco-ink-muted); }
.bring-how summary { color: var(--eco-ink); font-weight: 700; cursor: pointer; }
.bring-review { display: grid; grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 1.2fr); gap: var(--eco-space-6); }
.bring-material-card, .bring-review-list { min-width: 0; border: 1px solid var(--eco-line); border-radius: var(--eco-radius-lg); background: var(--eco-surface-raised); padding: var(--eco-space-4); }
.bring-material-card { display: grid; align-content: start; gap: var(--eco-space-2); }
.bring-material-card h2 { margin: 0; overflow-wrap: anywhere; color: var(--eco-ink); font-size: 1.1rem; }
.bring-material-card span, .bring-material-card small { color: var(--eco-ink-muted); }
.bring-material-card p { margin: 0; color: var(--eco-ink); line-height: 1.5; }
.bring-review-list { display: grid; align-content: start; gap: var(--eco-space-3); }
.bring-review-list li { border-top: 1px solid var(--eco-line); padding: var(--eco-space-3) 0; }
.bring-review-list label { display: flex; align-items: flex-start; gap: var(--eco-space-2); color: var(--eco-ink); }
.bring-review-list label > span { display: grid; min-width: 0; gap: 0.25rem; }
.bring-review-list small { color: var(--eco-ink-muted); line-height: 1.4; }
.bring-saved { margin: 0; border-left: 3px solid var(--eco-success); border-radius: var(--eco-radius-md); background: var(--eco-surface-sunken); padding: var(--eco-space-3) var(--eco-space-4); color: var(--eco-ink); line-height: 1.5; }
.bring-full-text { min-width: 0; border-top: 1px solid var(--eco-line); padding-top: var(--eco-space-2); }
.bring-full-text summary { color: var(--eco-link); font-weight: 700; cursor: pointer; }
.bring-full-text pre { max-height: 24rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.5; }
.bring-kind { width: max-content; border-radius: var(--eco-radius-pill); background: var(--eco-cobalt-soft); color: var(--eco-cobalt); padding: 0.15rem 0.55rem; font-size: 0.75rem; font-weight: 700; }
.bring-review-list label input { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.25rem; accent-color: var(--eco-cobalt); }
.bring-suggestions-empty { display: grid; justify-items: start; gap: var(--eco-space-4); padding: var(--eco-space-4) 0; }
.bring-suggestions-empty p { margin: 0; color: var(--eco-ink-muted); line-height: 1.5; }
.bring-suggestions-empty small { color: var(--eco-ink-muted); }
.lb-tabs.library-tabs { grid-template-columns: repeat(4, minmax(11rem, 1fr)); overflow-x: auto; scrollbar-width: none; }
.lb-tabs.library-tabs::-webkit-scrollbar { display: none; }
.lb-tabs.library-tabs .library-tab { min-width: 11rem; }

@media (max-width: 767px) {
  .bring-screen, .bring-focus { padding: var(--eco-space-4) var(--eco-space-3) calc(var(--eco-space-8) * 2); }
  .bring-options, .bring-review { grid-template-columns: 1fr; }
  .bring-option { min-height: auto; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .bring-option small { grid-column: 2; }
  .bring-history-item { grid-template-columns: minmax(0, 1fr) auto; }
  .bring-history-open { grid-column: 1 / -1; }
  .bring-actions > :is(button, a) { flex: 1 1 100%; justify-content: center; }
}



/* D1 (28/09, canvas "Biblioteca literal"): as abas são estantes — cartões com nome, contagem e
   uma linha do que guardam. html:root body vence as regras antigas de .lb-tabs acima. */
html:root body .library-tabs.lb-tabs { display: grid; grid-template-columns: repeat(4, minmax(11rem, 1fr)); gap: var(--eco-space-3); width: auto; margin-bottom: var(--eco-space-6); border: 0; border-radius: 0; background: transparent; padding: 2px; overflow-x: auto; }
html:root body .lb-tabs .library-tab { display: grid; min-width: 11rem; min-height: 5.5rem; align-content: center; gap: var(--eco-space-1); border: 2px solid transparent; border-radius: var(--eco-radius-lg); background: var(--eco-surface-raised); padding: var(--eco-space-3) var(--eco-space-4); color: var(--eco-ink); text-align: left; white-space: normal; }
html:root body .lb-tabs .library-tab:hover { border-color: var(--eco-line-strong); }
html:root body .lb-tabs .library-tab.is-active { border-color: var(--eco-cobalt); box-shadow: var(--eco-shadow-raised); }
.lb-shelf-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--eco-space-2); }
.lb-shelf-top b { font-size: 1rem; font-weight: 700; }
html:root body .lb-shelf-top .lb-tab-count { margin: 0; color: var(--eco-cobalt); font-family: var(--eco-font-display); font-size: 1.5rem; font-weight: 700; }
html:root body [data-library-tab="recordings"] .lb-tab-count { color: var(--eco-amber-ink, var(--eco-cobalt)); }
.lb-shelf-hint { color: var(--eco-ink-muted); font-size: 0.8rem; line-height: 1.3; }
/* D3: o fluxo em foco fica numa coluna central, como no canvas; os números do fim são dois. */
.bring-focus { max-width: 54rem; }
.bring-done-bars { grid-template-columns: repeat(2, minmax(0, 12rem)); justify-content: center; }
@media (max-width: 767px) {
  html:root body .library-tabs.lb-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow-x: auto; scrollbar-width: none; }
  html:root body .lb-tabs .library-tab { min-width: 0; min-height: 4.75rem; padding: var(--eco-space-3); }
  /* Em 2 colunas de ~160 px o número ao lado empurrava o nome para três linhas: vai para cima. */
  .lb-shelf-top { flex-direction: column-reverse; align-items: flex-start; gap: 0; }
  html:root body .lb-shelf-top .lb-tab-count { font-size: 1.35rem; }
  .bring-done-bars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* D172: material tem endereço próprio; a lateral permanece porque a leitura não é modo foco. */
/* Material aberto: segue as pranchetas DeskMaterial* e TelaMaterial* do canvas de rebranding. Sem
   cartão em volta do texto e sem borda nas listas — a superfície branca sobre o fundo já separa. */
.material-page { position: relative; box-sizing: border-box; max-width: 1360px; margin: 0 auto; padding: var(--eco-space-8) var(--eco-space-12) var(--eco-space-16); display: flex; flex-direction: column; gap: 18px; color: var(--eco-ink); font-family: var(--eco-font-sans); }
.material-back { align-self: flex-start; min-height: var(--eco-size-touch); padding: 0 var(--eco-space-4) 0 10px; border-radius: var(--eco-radius-pill); background: var(--eco-surface-raised); color: var(--eco-ink); display: inline-flex; align-items: center; gap: var(--eco-space-1); font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.material-back:hover { background: var(--eco-cobalt-soft); color: var(--eco-ink); }
.material-back .ff-icon, .material-more .ff-icon, .material-menu .ff-icon, .material-icon-btn .ff-icon { width: 20px; height: 20px; flex: none; }
.material-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--eco-space-6); }
.material-hero-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.material-eyebrow { margin: 0; color: var(--eco-cobalt); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; font-weight: 700; }
.material-hero h1 { margin: 0; font: 700 40px/1.05 var(--eco-font-display); overflow-wrap: anywhere; }
.material-meta { margin: 0; font-size: 15px; color: var(--eco-ink-muted); }
.material-hero-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.material-hero-actions .eco-btn, .material-panel-head .eco-btn, .material-side .eco-btn, .material-panel-foot .eco-btn, .material-dialog-actions .eco-btn, .material-card-form .eco-btn, .material-suggestion-actions .eco-btn, .material-note-form .eco-btn, .material-empty .eco-btn, .material-title-form .eco-btn { font-size: 15px; padding: 0 18px; white-space: nowrap; }
.material-more { width: var(--eco-size-touch); height: var(--eco-size-touch); display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--eco-radius-pill); background: var(--eco-surface-raised); color: var(--eco-ink); box-shadow: inset 0 0 0 1px var(--eco-line-strong); cursor: pointer; }
.material-more:hover { background: var(--eco-cobalt-soft); }
.material-menu-wrap { position: relative; }
.material-library-mobile { display: none; }
.material-menu-backdrop, .material-menu-sheet { display: contents; }
.material-menu { position: absolute; z-index: 6; right: 0; top: calc(100% + var(--eco-space-2)); width: 320px; box-sizing: border-box; padding: var(--eco-space-2); display: flex; flex-direction: column; gap: 2px; background: var(--eco-surface-raised); border-radius: 18px; box-shadow: 0 2px 4px color-mix(in srgb, var(--eco-ink) 8%, transparent), 0 16px 40px color-mix(in srgb, var(--eco-ink) 16%, transparent); }
.material-menu button { min-height: 48px; padding: var(--eco-space-2) var(--eco-space-3); display: flex; align-items: center; gap: var(--eco-space-3); border: 0; border-radius: var(--eco-radius-md); background: transparent; color: var(--eco-ink); font: inherit; text-align: left; cursor: pointer; }
.material-menu button:hover { background: var(--eco-surface); }
.material-menu button > span { display: flex; flex-direction: column; gap: 2px; }
.material-menu b { font-size: 15px; }
.material-menu small { font-size: 13px; color: var(--eco-ink-muted); }
.material-menu hr { height: 1px; margin: 6px var(--eco-space-2); border: 0; background: var(--eco-surface-sunken); }
.material-menu .material-danger, .material-danger { color: var(--eco-danger); }
.material-tabs { display: flex; gap: var(--eco-space-6); overflow-x: auto; border-bottom: 1px solid var(--eco-line); scrollbar-width: none; }
.material-tabs::-webkit-scrollbar { display: none; }
.material-tabs button { flex: 0 0 auto; min-height: var(--eco-size-touch); padding: 0 var(--eco-space-1); display: flex; align-items: center; gap: 6px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--eco-ink-muted); font: inherit; font-size: 15px; white-space: nowrap; cursor: pointer; }
.material-tabs button.is-active { border-bottom-color: var(--eco-cobalt); color: var(--eco-ink); font-weight: 700; }
.material-tabs button:hover:not(.is-active) { color: var(--eco-ink); }
.material-tab-short { display: none; }
.material-tab-count { font: 400 13px var(--eco-font-mono); color: var(--eco-ink-muted); }
.material-waiting { display: none; }
.material-layout { display: flex; gap: 28px; align-items: flex-start; }
.material-main { flex: 1 1 auto; min-width: 0; }
.material-panel { display: flex; flex-direction: column; gap: 10px; }
.material-text-panel { gap: var(--eco-space-3); }
.material-panel-head, .material-panel-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--eco-space-4); }
.material-panel-head p, .material-panel-lead { margin: 0; font-size: 14px; line-height: 1.5; color: var(--eco-ink-muted); }
.material-panel-foot p { margin: 0; max-width: 520px; font-size: 13px; line-height: 1.5; color: var(--eco-ink-muted); }
.material-text-label { font-size: 15px; font-weight: 700; }
.material-mono { margin: 0; font: 400 13px var(--eco-font-mono); color: var(--eco-ink-muted); white-space: nowrap; }
.material-textarea { width: 100%; min-height: 420px; box-sizing: border-box; padding: 18px 20px; border: 1px solid var(--eco-line-strong); border-radius: var(--eco-radius-lg); background: var(--eco-surface-raised); color: var(--eco-ink); font: 400 16px/1.65 var(--eco-font-sans); resize: vertical; }
.material-required { margin-left: 2px; color: var(--eco-danger); font-weight: 700; }
.material-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 700; }
.material-field textarea, .material-field input, .material-title-form input { width: 100%; min-height: var(--eco-size-touch); box-sizing: border-box; padding: 0 14px; border: 1px solid var(--eco-line-strong); border-radius: var(--eco-radius-md); background: var(--eco-surface-raised); color: var(--eco-ink); font: 400 16px/1.5 var(--eco-font-sans); }
.material-field textarea { min-height: 96px; padding: var(--eco-space-3) 14px; resize: vertical; }
.material-side { width: 320px; flex-shrink: 0; box-sizing: border-box; padding: var(--eco-space-6); border-radius: 24px; background: var(--eco-surface-raised); display: flex; flex-direction: column; gap: 14px; }
.material-side h2 { margin: 0; font-size: 18px; font-weight: 700; }
.material-side p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--eco-ink-muted); }
.material-side small { font-size: 13px; line-height: 1.5; color: var(--eco-ink-muted); }
.material-side .eco-btn { width: 100%; }
.material-side dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; font-size: 15px; }
.material-side dt { margin: 0; }
.material-side dd { margin: 0; font-family: var(--eco-font-mono); font-weight: 600; }
.material-side .is-waiting { color: var(--eco-cobalt); font-weight: 700; }
.material-side-foot { display: flex; flex-direction: column; gap: var(--eco-space-2); padding-top: 14px; border-top: 1px solid var(--eco-surface-sunken); }
.material-bars { display: flex; align-items: flex-end; gap: var(--eco-space-1); height: 32px; }
.material-bars span { width: 8px; box-sizing: border-box; border-radius: var(--eco-radius-pill); background: var(--eco-cobalt); }
/* Lendo: as barras em cobalto pulsam em sequência, 1 s por ciclo (o "carregando" do design system).
   Sem âmbar aqui: âmbar é a voz de quem pratica, e ninguém está falando. */
.material-bars:not(.is-empty) span { transform-origin: bottom; animation: eco-bars-pulse var(--eco-dur-loading) ease-in-out infinite; }
.material-bars:not(.is-empty) span:nth-child(2) { animation-delay: 120ms; }
.material-bars:not(.is-empty) span:nth-child(3) { animation-delay: 240ms; }
.material-bars:not(.is-empty) span:nth-child(4) { animation-delay: 360ms; }
.material-bars:not(.is-empty) span:nth-child(5) { animation-delay: 480ms; }
@keyframes eco-bars-pulse { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .material-bars span { animation: none !important; } }
.material-bars.is-lg { height: 48px; }
.material-bars.is-lg span { width: 12px; }
.material-bars.is-empty span { background: none; border: 2px dashed var(--eco-line-strong); }
.material-analysis-feedback { display: grid; gap: var(--eco-space-2); border-radius: 14px; background: var(--eco-danger-soft); padding: 14px var(--eco-space-4); }
.material-analysis-feedback h2 { font-size: 16px; }
.material-analysis-feedback p { color: var(--eco-ink); }
.material-items { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--eco-space-2); }
.material-item { padding: 14px 18px; border-radius: 16px; background: var(--eco-surface-raised); }
.material-item h3 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.material-phrase::before { content: '“'; }
.material-phrase::after { content: '”'; }
.material-item-sub { font-size: 14px; color: var(--eco-ink-muted); }
.material-phrase-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--eco-space-4); align-items: center; }
.material-phrase-row .material-row-actions { grid-row: span 2; }
.material-card-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--eco-space-4); align-items: center; }
.material-card-row h3 { font-size: 16px; }
.material-card-back { color: var(--eco-ink); opacity: .82; overflow-wrap: anywhere; }
.material-card-status { margin-right: var(--eco-space-2); font: 400 13px var(--eco-font-mono); color: var(--eco-ink-muted); white-space: nowrap; }
.material-row-actions { display: flex; align-items: center; gap: 6px; }
.material-icon-btn { width: var(--eco-size-touch); height: var(--eco-size-touch); display: flex; align-items: center; justify-content: center; border: 0; border-radius: var(--eco-radius-md); background: var(--eco-surface); color: var(--eco-ink); cursor: pointer; }
.material-icon-btn:hover { background: var(--eco-cobalt-soft); color: var(--eco-cobalt); }
.material-item.is-editing { padding: var(--eco-space-4) 18px; box-shadow: inset 0 0 0 2px var(--eco-cobalt); }
.material-card-form { display: flex; flex-direction: column; gap: 10px; }
.material-card-form > div { display: flex; justify-content: flex-end; gap: var(--eco-space-2); }
.material-note-form { display: flex; flex-direction: column; gap: var(--eco-space-3); }
.material-note-form .eco-btn { align-self: flex-end; }
.material-note-row { display: flex; flex-direction: column; gap: var(--eco-space-1); padding: var(--eco-space-4) 18px; }
.material-note-row p { margin: 0; font-size: 16px; line-height: 1.5; white-space: pre-wrap; }
.material-note-row .material-item-sub { font-size: 13px; }
.material-item-type { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--eco-cobalt); }
.material-suggestion { display: flex; align-items: flex-start; gap: 14px; cursor: pointer; }
.material-suggestion input { flex: none; width: 20px; height: 20px; margin: 4px 0 0; accent-color: var(--eco-cobalt); }
.material-suggestion > span { flex-grow: 1; display: flex; flex-direction: column; gap: var(--eco-space-1); min-width: 0; }
.material-suggestion small { font-size: 13px; line-height: 1.45; color: var(--eco-ink-muted); }
.material-suggestion em { font-style: normal; font-size: 13px; color: var(--eco-amber-ink); }
.material-suggestion-actions { display: flex; justify-content: flex-end; gap: 10px; }
.material-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: var(--eco-space-8) var(--eco-space-6); border: 1.5px dashed var(--eco-line-strong); border-radius: var(--eco-radius-lg); color: var(--eco-ink-muted); }
.material-empty h3 { margin: 0; color: var(--eco-ink); font-size: 17px; }
.material-empty p { margin: 0; line-height: 1.5; }
.material-title-form { display: flex; align-items: center; gap: var(--eco-space-2); }
.material-title-form input { width: auto; min-width: 520px; min-height: 48px; border: 2px solid var(--eco-cobalt); font: 700 28px var(--eco-font-display); }
.material-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: var(--eco-space-4); background: color-mix(in srgb, var(--eco-ink) 45%, transparent); }
.material-dialog { width: min(100%, 520px); max-height: 90vh; overflow: auto; box-sizing: border-box; padding: 28px; display: flex; flex-direction: column; gap: 14px; background: var(--eco-surface-raised); color: var(--eco-ink); border-radius: 24px; box-shadow: 0 24px 64px color-mix(in srgb, var(--eco-ink) 25%, transparent); }
.material-dialog h2 { margin: 0; font: 700 26px/1.1 var(--eco-font-display); }
.material-dialog p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--eco-ink); opacity: .9; }
.material-dialog .material-dialog-muted { font-size: 14px; color: var(--eco-ink-muted); opacity: 1; }
.material-dialog .material-mono { font-size: 14px; color: var(--eco-ink); }
.material-dialog-quote { font-weight: 700; }
.material-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.material-btn-soft { border-color: var(--eco-surface-sunken); background: var(--eco-surface-sunken); min-height: 48px; }
.material-btn-danger { border-color: var(--eco-danger); background: var(--eco-danger); color: var(--eco-on-danger); min-height: 48px; }
.material-btn-danger:hover:not(:disabled) { background: var(--eco-danger); filter: brightness(1.08); }
.material-choice-list { display: flex; flex-direction: column; gap: var(--eco-space-2); max-height: 50vh; overflow: auto; }
.material-dialog .material-choice-group { margin: var(--eco-space-1) 0 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--eco-ink-muted); opacity: 1; }
.material-choice { display: flex; align-items: flex-start; gap: var(--eco-space-3); padding: 14px var(--eco-space-4); border: 2px solid var(--eco-line); border-radius: 14px; cursor: pointer; }
.material-choice:has(input:checked) { border-color: var(--eco-cobalt); }
.material-choice input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--eco-cobalt); }
.material-choice span { display: flex; flex-direction: column; gap: var(--eco-space-1); }
.material-choice strong { font-size: 16px; }
.material-choice small { font-size: 14px; line-height: 1.45; color: var(--eco-ink-muted); }
.material-sheet-grab { display: none; }
.material-page button:focus-visible, .material-page a:focus-visible, .material-page textarea:focus-visible, .material-page input:focus-visible, .material-dialog button:focus-visible, .material-dialog input:focus-visible, .material-dialog textarea:focus-visible { outline: 2px solid var(--eco-focus); outline-offset: 2px; }
.bring-required { color: var(--eco-danger); }
.bring-dropzone.is-rejected { border-color: var(--eco-danger); background: var(--eco-danger-soft); }
.bring-file-error, .bring-file-credit { width: 100%; box-sizing: border-box; padding: var(--eco-space-3); border-radius: var(--eco-radius-md); text-align: left; color: var(--eco-ink); }
.bring-file-error { color: var(--eco-danger); }
.bring-file-error p, .bring-file-credit p { margin: var(--eco-space-2) 0; }
.bring-file-error button { border: 0; background: none; color: var(--eco-link); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.bring-file-credit.is-insufficient { background: var(--eco-danger-soft); }
.bring-file-credit .btn { margin-top: var(--eco-space-2); }
.bring-capture-option { display: flex; align-items: start; gap: var(--eco-space-3); color: var(--eco-ink); }
.bring-capture-option input { width: 20px; height: 20px; accent-color: var(--eco-cobalt); }
.bring-capture-option span { display: grid; gap: var(--eco-space-1); }
.bring-capture-option small { color: var(--eco-ink-muted); font-weight: 400; }
.bring-how { color: var(--eco-ink); background: var(--eco-surface-raised); border: 1px solid var(--eco-line); border-radius: var(--eco-radius-lg); padding: var(--eco-space-4); }
.bring-how h2 { margin: 0 0 var(--eco-space-2); font: 700 18px var(--eco-font-display); }
.bring-how ol { margin: 0; padding-left: var(--eco-space-6); line-height: 1.7; }
.bring-progress-card, .bring-failed-card { display: grid; gap: var(--eco-space-3); max-width: 44rem; padding: var(--eco-space-6); background: var(--eco-surface-raised); color: var(--eco-ink); border: 1px solid var(--eco-line); border-radius: var(--eco-radius-lg); }
.bring-progress-card strong { color: var(--eco-cobalt); }
.bring-progress-card small { font-family: var(--eco-font-mono); color: var(--eco-ink-muted); }
.bring-progress-card p, .bring-failed-card p { margin: 0; color: var(--eco-ink-muted); }
.bring-failed-card { border-color: var(--eco-danger); }
.bring-failed-card h2 { margin: 0; color: var(--eco-danger); font: 700 20px var(--eco-font-display); }
.bring-failed-card .btn { justify-self: start; }
.bring-chunk-list { max-width: 44rem; margin: 0; padding: 0; list-style: none; }
.bring-chunk-list li { display: flex; justify-content: space-between; padding: var(--eco-space-3); border-bottom: 1px solid var(--eco-line); }
.bring-chunk-list strong { color: var(--eco-ink-muted); }
.bring-chunk-list strong.is-ready { color: var(--eco-success); }
.bring-chunk-list strong.is-failed { color: var(--eco-danger); }
.bring-groups { display: grid; gap: var(--eco-space-4); margin: var(--eco-space-4) 0; }
.bring-group { border: 1px solid var(--eco-line); border-radius: var(--eco-radius-lg); background: var(--eco-surface-raised); padding: var(--eco-space-4); }
.bring-group h2 { display: flex; justify-content: space-between; gap: var(--eco-space-3); margin: 0 0 var(--eco-space-3); color: var(--eco-ink); font: 700 20px var(--eco-font-display); }
.bring-group h2 span { color: var(--eco-ink-muted); font: 500 13px var(--eco-font-mono); }
.bring-group ul { display: grid; gap: var(--eco-space-2); margin: 0; padding: 0; list-style: none; }
.bring-group li { border: 1px solid var(--eco-line); border-radius: var(--eco-radius-md); }
.bring-group label { display: flex; align-items: start; gap: var(--eco-space-3); padding: var(--eco-space-3); cursor: pointer; }
.bring-group input { width: 20px; height: 20px; flex: none; accent-color: var(--eco-cobalt); }
.bring-group label > span { display: grid; gap: var(--eco-space-1); }
.bring-group strong { color: var(--eco-ink); }
.bring-group small { color: var(--eco-ink-muted); }
.bring-saved { border-left: 3px solid var(--eco-success); padding: var(--eco-space-2) var(--eco-space-3); background: var(--eco-success-soft); color: var(--eco-ink); }
.bring-suggestions-empty { display: grid; justify-items: start; gap: var(--eco-space-3); border: 1px solid var(--eco-line); border-radius: var(--eco-radius-lg); background: var(--eco-surface-raised); padding: var(--eco-space-6); }
.bring-suggestions-empty p { margin: 0; }
.bring-suggestions-empty small, .bring-done-lede { color: var(--eco-ink-muted); }
.bring-done-bars { display: grid; grid-template-columns: repeat(3, minmax(0, 12rem)); gap: var(--eco-space-3); justify-content: start; margin: var(--eco-space-6) 0; }
.bring-done-bars > div { display: grid; gap: var(--eco-space-1); border: 1px solid var(--eco-line); border-radius: var(--eco-radius-lg); background: var(--eco-surface-raised); padding: var(--eco-space-4); }
.bring-done-bars strong { color: var(--eco-cobalt); font: 700 28px var(--eco-font-display); }
.bring-done-bars span { color: var(--eco-ink-muted); font-size: 13px; }
.bring-capture-dialog { width: min(100%, 680px); color: var(--eco-ink); }
.bring-capture-dialog .ui-dialog-panel { background: var(--eco-surface-raised); border-radius: var(--eco-radius-xl); }
.bring-capture-dialog .source-capture-head { display: flex; align-items: start; }
.bring-capture-dialog .source-capture-head h2 { color: var(--eco-ink); font: 700 30px/1.1 var(--eco-font-display); }
.bring-capture-dialog .source-capture-head p:not(.eyebrow) { color: var(--eco-ink-muted); font-size: 14px; }
.bring-capture-dialog .source-capture-status { background: var(--eco-cobalt-soft); color: var(--eco-cobalt); font-family: var(--eco-font-mono); }
.bring-capture-recording { display: inline-flex; align-items: baseline; gap: var(--eco-space-2); border-radius: var(--eco-radius-pill); background: var(--eco-danger-soft); color: var(--eco-danger); padding: var(--eco-space-2) var(--eco-space-3); font: 700 14px var(--eco-font-mono); }
.bring-capture-recording .source-capture-time { color: inherit; }
.bring-capture-steps { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--eco-space-2); margin: 0; padding: 0; list-style: none; }
.bring-capture-steps li { display: flex; align-items: center; gap: var(--eco-space-2); color: var(--eco-ink-muted); font-size: 13px; }
.bring-capture-steps b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--eco-radius-pill); background: var(--eco-surface-sunken); }
.bring-capture-steps .is-done b { background: var(--eco-success-soft); color: var(--eco-success); }
.bring-capture-steps .is-current { color: var(--eco-cobalt); font-weight: 700; }
.bring-capture-steps .is-current b { background: var(--eco-cobalt); color: var(--eco-surface-raised); }
.bring-capture-sound { display: grid; gap: var(--eco-space-3); border: 1px solid var(--eco-line); border-radius: var(--eco-radius-lg); padding: var(--eco-space-4); }
.bring-capture-sound-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--eco-space-2); }
.bring-capture-sound-head h3 { margin: 0; color: var(--eco-ink); font: 700 17px var(--eco-font-display); }
.bring-capture-sound-head span { color: var(--eco-ink-muted); font: 500 12px var(--eco-font-mono); }
.bring-capture-dialog .source-capture-phase { margin: 0; border: 0; background: var(--eco-surface-sunken); color: var(--eco-ink); padding: var(--eco-space-3); font-size: 14px; }
.bring-capture-dialog .bring-capture-silence { padding: 0; background: transparent; }
.bring-capture-tariff { display: flex; align-items: center; justify-content: space-between; gap: var(--eco-space-4); border-radius: var(--eco-radius-lg); background: var(--eco-ink); color: var(--eco-surface-raised); padding: var(--eco-space-4); }
.bring-capture-tariff > div { display: grid; gap: var(--eco-space-1); min-width: 10rem; }
.bring-capture-tariff span, .bring-capture-tariff small { font-size: 12px; }
.bring-capture-tariff strong { font: 700 30px var(--eco-font-display); }
.bring-capture-tariff p { max-width: 24rem; margin: 0; font-size: 13px; line-height: 1.45; }
.bring-capture-dialog .source-capture-transcript { border-color: var(--eco-line); background: var(--eco-surface-sunken); }
.bring-capture-dialog .source-capture-section-head h3 { color: var(--eco-ink); font: 700 17px var(--eco-font-display); }
.bring-capture-dialog .source-capture-transcript textarea { background: var(--eco-surface-raised); border-color: var(--eco-line); color: var(--eco-ink); }
.bring-capture-dialog .source-capture-buttons [data-cancel] { background: transparent; color: var(--eco-ink); }
.bring-capture-dialog button:focus-visible, .bring-capture-dialog input:focus-visible, .bring-capture-dialog select:focus-visible { outline: 2px solid var(--eco-focus); outline-offset: 2px; }
.bring-capture-dialog [hidden] { display: none; }
@media (max-width: 600px) {
  .bring-done-bars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bring-capture-steps li { font-size: 11px; }
  .bring-capture-tariff { align-items: start; flex-direction: column; }
  .bring-capture-dialog .source-capture-head h2 { font-size: 24px; }
}
@media (max-width: 800px) {
  .material-page { padding: 20px var(--eco-space-4) var(--eco-space-16); gap: 14px; }
  .material-hero { display: block; }
  .material-hero-text { gap: var(--eco-space-1); }
  .material-eyebrow { font-size: 12px; }
  .material-hero h1 { font-size: 28px; }
  .material-meta { font-size: 14px; }
  /* O ⋯ sobe para a linha do voltar, como em TelaMaterialAberto; a Biblioteca vai para o fim. */
  .material-hero-actions { position: absolute; top: 20px; right: var(--eco-space-4); }
  .material-hero-actions > .eco-btn { display: none; }
  .material-more { box-shadow: none; }
  .material-library-mobile { display: flex; width: 100%; }
  .material-tabs { gap: 6px; margin-right: calc(-1 * var(--eco-space-4)); border-bottom: 0; }
  .material-tabs button { min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--eco-radius-pill); background: var(--eco-surface-raised); color: var(--eco-ink); font-size: 14px; font-weight: 700; }
  .material-tabs button.is-active { background: var(--eco-ink); color: var(--eco-surface-raised); }
  .material-tabs button.is-active .material-tab-count { color: inherit; }
  .material-tab-long { display: none; }
  .material-tab-short { display: inline; }
  .material-tab-count { font: inherit; color: inherit; }
  .material-tab-count::before { content: '· '; }
  .material-waiting { display: flex; justify-content: space-between; align-items: center; gap: var(--eco-space-3); padding: var(--eco-space-3) 14px; border: 0; border-radius: 14px; background: var(--eco-cobalt-soft); color: var(--eco-ink); font: inherit; font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; }
  .material-waiting b { color: var(--eco-cobalt); }
  .material-layout { flex-direction: column; gap: var(--eco-space-4); }
  .material-main, .material-side { width: 100%; }
  .material-side { padding: 20px; border-radius: var(--eco-radius-lg); }
  .material-panel-head, .material-panel-foot { flex-direction: column; align-items: stretch; }
  .material-panel-head { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .material-panel-foot .eco-btn { align-self: flex-start; }
  .material-textarea { min-height: 320px; padding: 14px var(--eco-space-4); }
  .material-item { padding: var(--eco-space-3) 14px; border-radius: 14px; }
  .material-item h3 { font-size: 15px; }
  .material-card-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--eco-space-1) var(--eco-space-3); }
  .material-card-row .material-row-actions { grid-row: 1 / span 2; grid-column: 2; }
  .material-card-status { display: none; }
  .material-suggestion-actions { flex-direction: column-reverse; }
  .material-suggestion-actions .eco-btn { width: 100%; }
  .material-title-form { flex-wrap: wrap; }
  .material-title-form input { min-width: 0; width: 100%; font-size: 22px; }
  .material-overlay { align-items: end; padding: 0; }
  .material-dialog { width: 100%; max-height: 88vh; padding: var(--eco-space-3) var(--eco-space-4) calc(28px + env(safe-area-inset-bottom)); border-radius: var(--eco-radius-xl) var(--eco-radius-xl) 0 0; }
  .material-dialog h2 { font-size: 24px; }
  .material-dialog-actions { flex-direction: column-reverse; }
  .material-dialog-actions .eco-btn { width: 100%; }
  .material-menu-backdrop { position: fixed; inset: 0; z-index: 55; display: flex; align-items: flex-end; background: color-mix(in srgb, var(--eco-ink) 45%, transparent); }
  .material-menu-sheet { display: block; width: 100%; max-height: 88vh; overflow: auto; box-sizing: border-box; border-radius: var(--eco-radius-xl) var(--eco-radius-xl) 0 0; background: var(--eco-surface-raised); padding: var(--eco-space-3) var(--eco-space-4) calc(28px + env(safe-area-inset-bottom)); }
  .material-menu-sheet .material-menu { position: static; width: auto; border-radius: 0; background: transparent; box-shadow: none; padding: 0; gap: 6px; }
  .material-menu-sheet .material-menu button { min-height: 52px; gap: 14px; }
  .material-menu-sheet .material-menu b { font-size: 16px; }
  .material-menu-sheet .material-menu small { display: none; }
  .material-menu-sheet .material-menu hr { margin: var(--eco-space-1) 0; }
  .material-sheet-grab { display: block; width: 40px; height: 5px; margin: 0 auto var(--eco-space-2); border-radius: var(--eco-radius-pill); background: var(--eco-line); }
}
.lb-material-filter { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--eco-space-3); margin: 0 0 var(--eco-space-4); border: 1px solid var(--eco-line); border-radius: var(--eco-radius-md); background: var(--eco-cobalt-soft); padding: var(--eco-space-3) var(--eco-space-4); color: var(--eco-ink); }
.lb-material-filter > span { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: var(--eco-space-2); }
.lb-material-filter a { color: var(--eco-cobalt); font-weight: 700; text-decoration: none; }
.lb-material-filter a:hover { text-decoration: underline; }
.lb-material-filter .lb-material-clear { display: inline-grid; width: 24px; height: 24px; place-items: center; border-radius: var(--eco-radius-pill); background: var(--eco-surface-raised); font-size: 18px; }
html:root body .library-tabs.lb-tabs.has-notes { grid-template-columns: repeat(5, minmax(10rem, 1fr)); }
.lb-material-empty { display: grid; justify-items: start; gap: var(--eco-space-3); border: 1px dashed var(--eco-line-strong); border-radius: var(--eco-radius-lg); background: var(--eco-surface-raised); padding: var(--eco-space-8) var(--eco-space-6); }
.lb-material-empty h2 { margin: 0; color: var(--eco-ink); font: 700 20px var(--eco-font-display); }
.lb-material-empty p { max-width: 40rem; margin: 0; color: var(--eco-ink-muted); line-height: 1.5; }
.lb-notes { display: grid; gap: var(--eco-space-3); max-width: 56rem; margin: 0; padding: 0; list-style: none; }
.lb-note { border: 1px solid var(--eco-line); border-radius: var(--eco-radius-lg); background: var(--eco-surface-raised); padding: var(--eco-space-4); }
.lb-note p { margin: 0 0 var(--eco-space-4); white-space: pre-wrap; color: var(--eco-ink); }
.lb-note > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--eco-space-2); color: var(--eco-ink-muted); font-size: 13px; }
.lb-note a { color: var(--eco-cobalt); font-weight: 700; }
.lb-material-filter a:focus-visible, .lb-material-empty button:focus-visible, .lb-note a:focus-visible { outline: 2px solid var(--eco-focus); outline-offset: 2px; }
/* Biblioteca fiel às pranchetas DeskBiblioteca*: o filtro do material é uma etiqueta, não uma faixa;
   o vazio é o símbolo tracejado centralizado; "Ecoar" é cobalto como os outros tipos de marca. */
.lb-material-filter { justify-content: flex-start; gap: 10px; margin: 0 0 20px; padding: 0; border: 0; border-radius: 0; background: none; font-size: 14px; }
.lb-material-chip { min-height: 36px; padding: 0 6px 0 14px; display: inline-flex; align-items: center; gap: 6px; border-radius: var(--eco-radius-pill); background: var(--eco-cobalt-soft); font-weight: 700; }
.lb-material-filter .lb-material-clear { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: none; color: var(--eco-cobalt); }
.lb-material-filter .lb-material-clear .ff-icon { width: 16px; height: 16px; }
.lb-material-filter .lb-material-all { font-weight: 400; text-decoration: underline; }
.lb-material-empty { justify-items: center; gap: var(--eco-space-3); border: 0; border-radius: 24px; padding: var(--eco-space-12); text-align: center; }
.lb-material-empty p { max-width: 480px; font-size: 14px; }
.lb-material-empty .eco-btn { font-size: 15px; padding: 0 18px; }
.lb-chip.is-echo { background: var(--eco-cobalt-soft); color: var(--eco-cobalt); }
.lb-due { font-size: 13px; }
.lb-due.is-today { color: var(--eco-ink); font-weight: 700; }
.lb-row-btn strong { font-size: 16px; font-weight: 600; }
.lb-tabs .library-tab.is-active { box-shadow: var(--eco-shadow-raised); }
.lb-hint { margin: var(--eco-space-4) 0 0; font-size: 14px; color: var(--eco-ink-muted); }
.lb-hint a { color: var(--eco-link); }

/* Detalhe de aula própria e estados novos da Biblioteca (Lacunas 6). */
.own-lesson-page { display: grid; max-width: 58rem; gap: var(--eco-space-6); margin: 0 auto; color: var(--eco-ink); }
.own-lesson-back { display: inline-flex; width: fit-content; min-height: 44px; align-items: center; gap: var(--eco-space-2); border-radius: var(--eco-radius-pill); color: var(--eco-link); font-weight: 700; text-decoration: none; }
.own-lesson-back .ff-icon { width: 1rem; height: 1rem; }
.own-lesson-saved { display: flex; align-items: center; justify-content: space-between; gap: var(--eco-space-3); border: 1px solid var(--eco-success); border-radius: var(--eco-radius-md); background: var(--eco-success-soft); padding: var(--eco-space-3) var(--eco-space-4); color: var(--eco-ink); font-size: 14px; }
.own-lesson-saved a { color: var(--eco-link); font-weight: 750; }
.own-lesson-head { display: grid; justify-items: start; gap: var(--eco-space-2); border-radius: var(--eco-radius-lg); background: var(--eco-surface-raised); padding: var(--eco-space-6); box-shadow: var(--eco-shadow-raised); }
.own-lesson-kicker, .own-lesson-eyebrow { margin: 0; color: var(--eco-ink-muted); font-size: 13px; font-weight: 700; }
.own-lesson-head h1 { margin: 0; color: var(--eco-ink); font: 700 clamp(1.8rem, 4vw, 2.5rem)/1.08 var(--eco-font-display); overflow-wrap: anywhere; }
.own-lesson-kind { border-radius: var(--eco-radius-pill); background: var(--eco-cobalt-soft); padding: 5px 11px; color: var(--eco-cobalt); font-size: 12px; font-weight: 750; }
.own-lesson-state { display: flex; align-items: center; justify-content: space-between; gap: var(--eco-space-3); border-bottom: 1px solid var(--eco-line); padding: var(--eco-space-2) 0 var(--eco-space-4); }
.own-lesson-state label { display: flex; min-height: 44px; align-items: center; gap: var(--eco-space-3); color: var(--eco-ink); font-weight: 700; cursor: pointer; }
.own-lesson-state input { width: 20px; height: 20px; accent-color: var(--eco-cobalt); }
.own-lesson-state small { color: var(--eco-ink-muted); font-size: 13px; }
.own-lesson-actions { display: flex; flex-wrap: wrap; gap: var(--eco-space-3); }
.own-lesson-section { display: grid; gap: var(--eco-space-4); border-radius: var(--eco-radius-lg); background: var(--eco-surface-raised); padding: var(--eco-space-6); box-shadow: var(--eco-shadow-raised); }
.own-lesson-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--eco-space-3); }
.own-lesson-section-head h2 { margin: var(--eco-space-1) 0 0; color: var(--eco-ink); font: 700 1.35rem/1.15 var(--eco-font-display); }
.own-lesson-section-head .eco-btn { flex: none; }
.own-lesson-materials { display: grid; gap: var(--eco-space-3); margin: 0; padding: 0; list-style: none; }
.own-lesson-materials li { display: flex; align-items: center; justify-content: space-between; gap: var(--eco-space-4); border: 1px solid var(--eco-line); border-radius: var(--eco-radius-md); background: var(--eco-surface); padding: var(--eco-space-4); }
.own-lesson-materials li > div { display: grid; min-width: 0; gap: var(--eco-space-1); }
.own-lesson-materials strong { color: var(--eco-ink); overflow-wrap: anywhere; }
.own-lesson-materials small { color: var(--eco-ink-muted); font-size: 13px; }
.own-lesson-materials .eco-btn { flex: none; }
.own-lesson-empty { display: grid; justify-items: start; gap: var(--eco-space-3); border: 1px dashed var(--eco-line-strong); border-radius: var(--eco-radius-md); background: var(--eco-surface); padding: var(--eco-space-6); }
.own-lesson-empty p, .own-lesson-note-copy { margin: 0; color: var(--eco-ink-muted); line-height: 1.55; white-space: pre-wrap; }
.own-lesson-notes { gap: var(--eco-space-3); }
.own-lesson-notes .own-lesson-section-head { align-items: flex-start; }
.lb-row { flex-wrap: wrap; }
.lb-row-btn { min-width: 0; flex: 1 1 20rem; }
.lb-created-label { display: block; width: fit-content; border-radius: var(--eco-radius-pill); background: var(--eco-success-soft); padding: 4px 9px; color: var(--eco-ink); font-size: 12px; font-weight: 750; }
.lb-row-btn .lb-created-label { grid-column: 1 / -1; margin-bottom: -4px; }
.lb-row.is-created-now { background: var(--eco-success-soft); }
.lb-row .lb-created-echo { display: inline-flex; min-height: 40px; flex: none; align-items: center; justify-content: center; margin: 8px 16px 8px 0; border: 1px solid var(--eco-line-strong); border-radius: var(--eco-radius-pill); background: var(--eco-surface-raised); padding: 0 14px; color: var(--eco-link); font-size: 14px; font-weight: 750; text-decoration: none; }
.lb-created-echo:focus-visible, .own-lesson-page a:focus-visible, .own-lesson-page button:focus-visible { outline: 2px solid var(--eco-focus); outline-offset: 2px; }
.lb-notes-empty, .lb-recordings-empty { display: grid; justify-items: center; gap: var(--eco-space-3); border: 1px dashed var(--eco-line-strong); border-radius: var(--eco-radius-lg); background: var(--eco-surface-raised); padding: var(--eco-space-8) var(--eco-space-4); text-align: center; }
.lb-notes-empty h2, .lb-recordings-empty strong { margin: 0; color: var(--eco-ink); font: 700 1.2rem/1.2 var(--eco-font-display); }
.lb-notes-empty p, .lb-recordings-empty p { max-width: 34rem; margin: 0; color: var(--eco-ink-muted); font-size: 14px; line-height: 1.5; }
.lb-notes-empty .eco-btn, .lb-recordings-empty .eco-btn { margin-top: var(--eco-space-1); }
.library-session-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--eco-space-2); }
.library-session-actions .btn { min-height: 40px; white-space: nowrap; }
@media (max-width: 767px) {
  .own-lesson-page { gap: var(--eco-space-4); }
  .own-lesson-head, .own-lesson-section { padding: var(--eco-space-4); }
  .own-lesson-state { align-items: flex-start; flex-direction: column; }
  .own-lesson-state small { padding-left: 32px; }
  .own-lesson-actions, .own-lesson-actions .eco-btn { width: 100%; }
  .own-lesson-section-head { align-items: flex-start; flex-direction: column; }
  .own-lesson-section-head .eco-btn { width: 100%; }
  .own-lesson-materials li { align-items: stretch; flex-direction: column; }
  .own-lesson-materials .eco-btn { width: 100%; }
  .own-lesson-empty { justify-items: stretch; text-align: center; }
  .own-lesson-empty .eco-btn { width: 100%; }
  .lb-row-btn { flex-basis: 100%; }
  .lb-row .lb-created-echo { width: calc(100% - 32px); margin: 0 16px 10px; }
  .library-session-row { grid-template-columns: 3rem minmax(0, 1fr); }
  .library-session-actions { grid-column: 1 / -1; justify-content: stretch; }
  .library-session-actions .btn { flex: 1 1 auto; }
}
@media (max-width: 767px) {
  html:root body .library-tabs.lb-tabs.has-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb-material-filter { align-items: start; flex-direction: column; }
  .lb-material-empty { padding: var(--eco-space-6) var(--eco-space-4); }
}

/* O painel lateral da pessoa (D174). Direita no computador, tela inteira no celular. Rótulos,
   valores e botões não quebram linha: no canvas, a quebra desmontou a fileira de campos. */
.admin-pencil { display: inline-flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: var(--eco-radius-pill); color: var(--eco-cobalt); vertical-align: middle; }
.admin-pencil:hover, .admin-pencil:focus-visible { background: var(--eco-cobalt-soft); }
.admin-drawer-backdrop { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, var(--eco-ink) 32%, transparent); }
.admin-drawer { position: absolute; top: 0; right: 0; bottom: 0; display: flex; width: min(34rem, 100%); flex-direction: column; background: var(--eco-surface); box-shadow: var(--eco-shadow-raised); }
.admin-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; background: var(--eco-surface-raised); padding: 1.5rem 1.5rem 0.6rem; }
.admin-drawer-id { display: grid; min-width: 0; gap: 0.35rem; }
.admin-drawer-id .eyebrow { margin: 0; }
.admin-drawer-id b { font-family: var(--eco-font-display); font-size: 1.45rem; color: var(--eco-ink); overflow-wrap: anywhere; }
.admin-drawer-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.admin-badge-ok { background: var(--eco-success-soft); color: var(--eco-success); }
.admin-badge-gone { background: var(--eco-danger-soft); color: var(--eco-danger); }
.admin-drawer-close { display: inline-flex; width: 2.75rem; height: 2.75rem; flex: none; align-items: center; justify-content: center; border-radius: var(--eco-radius-pill); color: var(--eco-ink); }
.admin-drawer-close:hover { background: var(--eco-surface-sunken); }
.admin-drawer-tabs { display: flex; gap: 1.25rem; overflow-x: auto; border-bottom: 1px solid var(--eco-line); background: var(--eco-surface-raised); padding: 0 1.5rem; }
.admin-drawer-tabs button { flex: none; padding: 0.65rem 0.1rem; color: var(--eco-ink-muted); font-size: 0.875rem; font-weight: 700; white-space: nowrap; }
.admin-drawer-tabs button[aria-selected="true"] { color: var(--eco-ink); box-shadow: inset 0 -2px 0 var(--eco-cobalt); }
.admin-drawer-body { display: grid; flex: 1; align-content: start; gap: 1rem; overflow-y: auto; padding: 1.25rem 1.5rem 2rem; }
.admin-person-card { display: grid; gap: 0.75rem; border-radius: var(--eco-radius-lg); background: var(--eco-surface-raised); padding: 1.1rem 1.25rem; }
.admin-person-card > b { color: var(--eco-ink); }
.admin-person-card > p { margin: 0; color: var(--eco-ink-muted); font-size: 0.8125rem; line-height: 1.5; }
.admin-person-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem 1.25rem; }
.admin-person-stats span { display: block; color: var(--eco-ink-muted); font-size: 0.75rem; }
.admin-person-stats b { color: var(--eco-ink); font-family: var(--eco-font-mono); font-size: 1.05rem; white-space: nowrap; }
.admin-person-form { display: grid; gap: 0.75rem; }
.admin-person-fields { display: flex; gap: 0.6rem; }
.admin-field { display: flex; min-width: 0; flex: 1 1 0; flex-direction: column; gap: 0.35rem; }
.admin-field-narrow { flex: 0 0 8.5rem; }
.admin-field > span { color: var(--eco-ink-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.admin-field input { width: 100%; min-height: 2.75rem; }
.admin-req { color: var(--eco-danger); }
.admin-person-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.admin-person-form .btn { white-space: nowrap; justify-self: start; }
.admin-person-list { margin: 0; padding: 0; list-style: none; }
.admin-person-row { display: flex; justify-content: space-between; gap: 0.75rem; border-top: 1px solid var(--eco-line); padding: 0.6rem 0; font-size: 0.875rem; }
.admin-person-row > span { display: grid; min-width: 0; gap: 0.1rem; overflow-wrap: anywhere; }
.admin-person-row small { color: var(--eco-ink-muted); font-family: var(--eco-font-mono); font-size: 0.75rem; }
.admin-row-alert > span > span { color: var(--eco-danger, #b42318); font-weight: 600; }
.admin-person-row > b { flex: none; font-family: var(--eco-font-mono); white-space: nowrap; }
.admin-person-empty { margin: 0; padding: 1.5rem 0; color: var(--eco-ink-muted); font-size: 0.875rem; text-align: center; }
.admin-person-error { display: flex; align-items: flex-start; gap: 0.75rem; border-radius: var(--eco-radius-lg); background: var(--eco-danger-soft); padding: 0.9rem 1rem; }
.admin-person-error > span { display: grid; flex: 1; gap: 0.2rem; }
.admin-person-error small { font-size: 0.875rem; }
@media (max-width: 767px) {
  .admin-drawer { width: 100%; box-shadow: none; }
  .admin-drawer-head { padding: 1.1rem 1rem 0.5rem; }
  .admin-drawer-tabs { gap: 1rem; padding: 0 1rem; }
  .admin-drawer-body { padding: 1rem; }
  .admin-person-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-person-fields { flex-direction: column; }
  .admin-field, .admin-field-narrow { flex: none; }
  .admin-person-form .btn { justify-self: stretch; }
  .admin-table td[data-label="Ações"] { text-align: left; }
}

/* O que a aula ensinou — prancheta DeskAula: cartão branco, cada ponto numa linha funda com o tipo
   em caixa alta, e uma ação grande no pé ("Criar N cards"). A citação continua: é a prova de que o
   ponto saiu da aula (D65), então não some para ficar igual ao desenho. */
.teach-panel { margin-top: var(--eco-space-4); padding: var(--eco-space-6); border-radius: 24px; background: var(--eco-surface-raised); display: flex; flex-direction: column; gap: 14px; color: var(--eco-ink); }
.teach-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--eco-space-3); }
.teach-head h2 { margin: 0; font-size: 20px; font-weight: 700; }
.teach-count { font: 400 14px var(--eco-font-mono); color: var(--eco-ink-muted); white-space: nowrap; }
.teach-lede { margin: 0; font-size: 14px; line-height: 1.5; color: var(--eco-ink-muted); }
.teach-meta { font: 400 12px var(--eco-font-mono); }
.teach-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.teach-item { padding: 14px var(--eco-space-4); border-radius: 16px; background: var(--eco-surface); display: flex; gap: var(--eco-space-3); align-items: flex-start; cursor: pointer; }
div.teach-item { cursor: default; }
.teach-item.is-accepted { background: var(--eco-success-soft); }
.teach-item.is-rejected { opacity: .7; }
.teach-item .pick { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--eco-cobalt); }
.teach-mark { flex: none; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--eco-ink-muted); }
.teach-item.is-accepted .teach-mark { color: var(--eco-success); }
.teach-mark .ff-icon { width: 18px; height: 18px; }
.teach-body { min-width: 0; display: flex; flex-direction: column; gap: var(--eco-space-1); }
.teach-kind { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--eco-ink-muted); }
.teach-dest { letter-spacing: 0; text-transform: none; font-weight: 700; color: var(--eco-ink-muted); }
.teach-dest.is-card { color: var(--eco-cobalt); }
.teach-dest.is-done { color: var(--eco-success); }
.teach-body strong { font-size: 17px; line-height: 1.35; overflow-wrap: anywhere; }
.teach-target { font-size: 15px; color: var(--eco-cobalt); }
.teach-terms { font-size: 15px; color: var(--eco-ink-muted); }
.teach-dup { font-size: 13px; color: var(--eco-amber-ink); }
.teach-quote { font-size: 15px; line-height: 1.45; color: var(--eco-ink); opacity: .82; }
.teach-foot { display: flex; flex-direction: column; gap: 10px; margin-top: var(--eco-space-1); }
.teach-foot small { font-size: 13px; line-height: 1.5; color: var(--eco-ink-muted); }
.teach-foot .eco-btn { width: 100%; }
.teach-again { display: flex; justify-content: flex-end; }
.teach-panel > .teach-run, .teach-again .eco-btn { font-size: 15px; padding: 0 18px; }
.teach-panel > .teach-run { align-self: flex-start; }
.teach-official { font-size: 13px; color: var(--eco-ink-muted); }
.teach-item:has(.pick:focus-visible) { outline: 2px solid var(--eco-focus); outline-offset: 2px; }

/* Minha trilha — prancheta DeskMinhaTrilha: a trilha escolhida é um bloco cobalto-claro, não um
   contorno; Nova trilha e Renomear levam ícone. */
.mt-new, .mt-quiet { display: inline-flex; align-items: center; gap: var(--eco-space-2); }
.mt-new .ff-icon, .mt-quiet .ff-icon { width: 18px; height: 18px; flex: none; }
.mt-track.is-current { background: var(--eco-cobalt-soft); box-shadow: none; }
.mt-track.is-current strong { color: var(--eco-cobalt); }
.mt-track:hover:not(.is-current) { background: var(--eco-surface-raised); }
/* `.owntracks-create` é a classe antiga do mesmo elemento: o `align-items: end` dela empurrava o
   título e o "Adicionar sessão" para a direita. O detalhe estica, como na prancheta. */
.mt-detail.owntracks-create { align-items: stretch; margin-bottom: 0; }
.mt-detail-head h2 { margin-top: 0; }

/* Configurações — prancheta canvas-progresso/Configuracoes: a seção na tela fica marcada no índice
   e "Seus dados" é neutro no índice (o perigo é dito dentro da seção, não na navegação). */
.st-index button[aria-current="true"] { background: var(--eco-cobalt-soft); color: var(--eco-cobalt); font-weight: 700; }
.st-index button.is-danger { color: var(--eco-ink); }
[data-voice-preview] { display: inline-flex; align-items: center; gap: 6px; }
[data-voice-preview] .ff-icon { width: 16px; height: 16px; flex: none; }
.st-guide-replay { display: grid; gap: 8px; margin-top: 12px; }
.st-guide-replay h3, .st-guide-replay p { margin: 0; }
.st-guide-replay .st-buttons { display: flex; flex-wrap: wrap; gap: 8px; }

/* Feedback do Jake — prancheta DeskConversar: cada correção é um cartão fundo, em duas colunas; o
   que a pessoa disse vem riscado e discreto, a forma natural em negrito sobre âmbar-claro (é a voz
   dela, corrigida). Ponto forte em verde e vocabulário em cobalto, lado a lado. */
.hub-fixes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hub-fixes li { align-content: start; gap: 6px; border: 0; border-radius: 16px; background: var(--eco-surface); padding: 14px 16px; }
.hub-said { color: var(--eco-ink-muted); font-size: 14px; }
.hub-correct strong { justify-self: start; border-radius: 6px; background: var(--eco-amber-soft); color: var(--eco-ink); padding: 0 4px; font-size: 16px; }
.hub-tag { background: var(--eco-surface-raised); }
.hub-wells { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--eco-space-3); }
.hub-well.is-strength { background: var(--eco-success-soft); }
.hub-well.is-strength .hub-eyebrow { color: var(--eco-success); }
.hub-well.is-vocab { background: var(--eco-cobalt-soft); }
.hub-well.is-vocab .hub-eyebrow { color: var(--eco-cobalt); }
@media (max-width: 800px) { .hub-fixes { grid-template-columns: 1fr; } }

/* Trilhas — prancheta DeskTrilhas: a faixa do ritmo é a onda da marca, barras altas e arredondadas
   alinhadas por baixo; o título dela é um sobretítulo em caixa alta. */
.tr-segs { height: 72px; align-items: flex-end; gap: 8px; }
.tr-seg { height: var(--h, 100%); border-radius: 10px; }
.tr-ribbon-head > span:first-child { color: color-mix(in srgb, var(--eco-cobalt) 45%, white); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* Etapas da leitura (canvas "Lendo o texto animado"): o título troca com um fade curto e a lista diz
   onde a leitura está — feita, agora, depois. Movimento reduzido: sem fade. */
.material-phase { display: flex; flex-direction: column; gap: 6px; }
.material-phase.is-new { animation: eco-phase-in var(--eco-dur-fill) var(--eco-ease-in); }
@keyframes eco-phase-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .material-phase.is-new { animation: none; } }
.material-progress { display: flex; flex-direction: column; gap: 8px; }
.material-progress-track { height: 8px; border-radius: var(--eco-radius-pill); background: var(--eco-cobalt-soft); overflow: hidden; }
/* A largura anima entre uma leitura e outra (a cada 4 s): sobe suave, nunca desce. */
.material-progress-track > span { display: block; height: 100%; border-radius: var(--eco-radius-pill); background: var(--eco-cobalt); transition: width 900ms var(--eco-ease-in, ease-out); }
.material-progress > strong { font-family: var(--eco-font-mono); font-size: 16px; color: var(--eco-ink); }
@media (prefers-reduced-motion: reduce) { .material-progress-track > span { transition: none; } }
.material-steps { margin: 0; padding: 14px 0 0; border-top: 1px solid var(--eco-surface-sunken); list-style: none; display: flex; flex-direction: column; gap: var(--eco-space-2); font-size: 14px; color: var(--eco-ink-muted); }
.material-steps li { display: flex; align-items: center; gap: 10px; }
.material-steps li > span:first-child { width: 8px; height: 8px; margin: 0 3px; flex: none; border-radius: var(--eco-radius-pill); background: var(--eco-cobalt-soft); }
.material-steps li.is-now { color: var(--eco-ink); font-weight: 700; }
.material-steps li.is-now > span:first-child { background: var(--eco-cobalt); }
.material-steps .ff-icon { width: 14px; height: 14px; flex: none; color: var(--eco-cobalt); }

/* Lote 5 · Material → prática: a ação fica junto ao item e a revisão só aparece quando há fila. */
.material-phrase-row { grid-template-columns: minmax(0, 1fr) auto; }
.material-phrase-row .material-row-actions { grid-row: auto; }
.material-phrase-main { display: grid; gap: 3px; min-width: 0; }
.material-practice-link { display: inline-flex; min-height: 40px; align-items: center; border-radius: var(--eco-radius-pill); background: var(--eco-cobalt-soft); color: var(--eco-cobalt); padding: 0 14px; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.material-practice-link:hover, .material-library-link:hover { background: var(--eco-cobalt); color: var(--eco-on-cobalt); }
.material-practice-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--eco-space-2); }
.material-due-status { margin: 0; color: var(--eco-ink-muted); font-size: 14px; line-height: 1.5; }
.material-practice-summary .eco-btn { min-height: 42px; }
.material-practice-done { display: grid; justify-items: start; gap: var(--eco-space-3); max-width: 48rem; margin: clamp(2rem, 8vh, 6rem) auto; padding: clamp(1.5rem, 5vw, 3rem); border: 1px solid var(--eco-line); border-radius: var(--eco-radius-xl); background: var(--eco-surface-raised); }
.material-practice-done h1, .material-practice-done p { margin: 0; }
.material-practice-done h1 { color: var(--eco-ink); font-family: var(--eco-font-display); font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.15; }
.material-practice-done > p:not(.material-practice-badge) { color: var(--eco-ink-muted); line-height: 1.6; }
.material-practice-done > div { display: flex; flex-wrap: wrap; gap: var(--eco-space-2); }
.material-practice-badge { margin: 0; border-radius: var(--eco-radius-pill); background: var(--eco-cobalt-soft); color: var(--eco-cobalt); padding: 5px 12px; font-size: 13px; font-weight: 750; }
.echo-result-actions .echo-result-back { display: inline-flex; min-height: 40px; align-items: center; padding-inline: 8px; }

/* Lote 5 · resultado de conversa: cada card abre sua próxima ação sem supor que já venceu. */
.conversation-new-cards { display: grid; gap: var(--eco-space-3); border: 1px solid var(--eco-line); border-radius: var(--eco-radius-lg); background: var(--eco-surface); padding: clamp(14px, 3vw, 22px); }
.conversation-new-cards > header { display: flex; align-items: start; justify-content: space-between; gap: var(--eco-space-3); }
.conversation-new-cards h3 { margin: 2px 0 0; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 1.2rem; }
.conversation-new-cards > ul { display: grid; gap: var(--eco-space-2); margin: 0; padding: 0; list-style: none; }
.conversation-new-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--eco-space-3); border-radius: var(--eco-radius-md); background: var(--eco-surface-raised); padding: 14px; }
.conversation-new-card-copy { display: grid; gap: 4px; min-width: 0; }
.conversation-new-card-copy > small { color: var(--eco-cobalt); font-size: 12px; font-weight: 750; }
.conversation-new-card-copy > strong { color: var(--eco-ink); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.conversation-new-card-copy > small:last-child { color: var(--eco-ink-muted); font-weight: 500; }
.conversation-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; }
.conversation-card-action { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; border: 1px solid var(--eco-line); border-radius: var(--eco-radius-pill); background: var(--eco-surface-raised); color: var(--eco-ink); padding: 0 12px; font: inherit; font-size: 13px; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; }
.conversation-card-action.is-primary { border-color: var(--eco-cobalt); background: var(--eco-cobalt); color: var(--eco-on-cobalt); }
.conversation-card-action:disabled { border-color: var(--eco-line); background: var(--eco-surface-sunken); color: var(--eco-ink-muted); cursor: not-allowed; }
.conversation-kit-status { color: var(--eco-success); font-size: 13px; font-weight: 750; }
.conversation-new-cards-note { margin: 0; color: var(--eco-ink-muted); font-size: 13px; line-height: 1.5; }
.conversation-new-cards.is-empty { border-style: dashed; }
.conversation-new-cards.is-empty > p { margin: 0; color: var(--eco-ink-muted); line-height: 1.5; }
/* D207 · a rodada da conversa e as frases que faltaram (canvas eco · Conversas, telas novas). */
.conversation-round { display: grid; gap: var(--eco-space-3); border-radius: var(--eco-radius-lg); background: var(--eco-cobalt); color: var(--eco-on-cobalt); padding: clamp(16px, 3vw, 22px); }
.conversation-round h3 { margin: 0; font-family: var(--eco-font-display); font-size: 1.3rem; line-height: 1.2; }
.conversation-round p { margin: 0; font-size: 15px; line-height: 1.45; }
.conversation-round-cta { display: flex; min-height: var(--eco-size-action, 52px); align-items: center; justify-content: center; border-radius: var(--eco-radius-pill); background: var(--eco-surface-raised); color: var(--eco-cobalt); font-weight: 750; text-decoration: none; }
.conversation-round-cta:focus-visible { outline: 3px solid var(--eco-focus); outline-offset: 2px; }
.conversation-missing { display: grid; gap: var(--eco-space-3); border: 1px solid var(--eco-line); border-radius: var(--eco-radius-lg); background: var(--eco-surface); padding: clamp(14px, 3vw, 22px); }
.conversation-missing h3 { margin: 0; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 1.2rem; }
.conversation-missing-lede { margin: 0; color: var(--eco-ink-muted); font-size: 14px; line-height: 1.45; }
.conversation-missing > ul { display: grid; gap: var(--eco-space-2); margin: 0; padding: 0; list-style: none; }
.conversation-missing li { display: grid; gap: 6px; border: 1px solid var(--eco-line); border-radius: var(--eco-radius-md); background: var(--eco-surface-raised); padding: 14px; }
.conversation-missing li > small { color: var(--eco-ink-muted); font-size: 13px; }
.conversation-missing li > strong { color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 1.1rem; line-height: 1.3; overflow-wrap: anywhere; }
.conversation-missing li > p { margin: 0; color: var(--eco-ink-muted); font-size: 14px; line-height: 1.45; }
.conversation-missing .conversation-card-actions { justify-content: flex-start; }
.round-done-list { display: grid; width: 100%; margin: 0; padding: 0; list-style: none; border-radius: var(--eco-radius-lg); background: var(--eco-surface); }
.round-done-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--eco-space-3); padding: 12px 16px; border-bottom: 1px solid var(--eco-line); color: var(--eco-ink); }
.round-done-list li:last-child { border-bottom: 0; }
.round-done-list strong { flex: none; font-family: var(--eco-font-mono); font-size: 14px; }
/* D208 · evolução nas conversas: variação da nota, erro que sumiu e "Suas conversas". */
.live-feedback-side { display: grid; justify-items: end; gap: 6px; }
.conversation-delta { display: inline-flex; width: fit-content; border-radius: var(--eco-radius-pill); padding: 4px 10px; font-size: 13px; font-weight: 750; }
.conversation-delta.is-up { background: var(--eco-success-soft); color: var(--eco-success); }
.conversation-delta.is-down { background: var(--eco-surface-sunken); color: var(--eco-ink-muted); }
.conversation-fixed { display: grid; gap: 6px; border-radius: var(--eco-radius-lg); background: var(--eco-success-soft); color: var(--eco-ink); padding: clamp(14px, 3vw, 20px); }
.conversation-fixed p { margin: 0; line-height: 1.5; }
.conversation-fixed-kicker { color: var(--eco-success); font-size: 13px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
/* O resultado ao vivo empilha blocos sem grade; o respiro vem de cada bloco novo. */
.live-result .conversation-fixed, .live-result .conversation-round, .live-result .conversation-missing, .live-result .conversation-next { margin-block: var(--eco-space-3); }
.conversation-upgrades { display: grid; gap: var(--eco-space-3); border: 1px solid var(--eco-line); border-radius: var(--eco-radius-lg); background: var(--eco-surface); padding: clamp(14px, 3vw, 22px); }
.conversation-upgrades h3 { margin: 0; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 1.2rem; }
.conversation-upgrades > ul { display: grid; gap: var(--eco-space-2); margin: 0; padding: 0; list-style: none; }
.conversation-upgrades li { display: grid; justify-items: start; gap: 6px; border: 1px solid var(--eco-line); border-radius: var(--eco-radius-md); background: var(--eco-surface-raised); padding: 14px; }
.conversation-upgrades li.is-saved { background: var(--eco-surface-sunken); }
.conversation-upgrades li > span[lang] { color: var(--eco-ink-muted); font-size: 15px; }
.conversation-upgrades li > strong { color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 1.1rem; line-height: 1.3; overflow-wrap: anywhere; }
.conversation-upgrades li > p { margin: 0; color: var(--eco-ink-muted); font-size: 14px; line-height: 1.45; }
.conversation-upgrade-save { min-height: var(--eco-size-touch, 44px); border: 1px solid var(--eco-cobalt); border-radius: var(--eco-radius-pill); background: transparent; color: var(--eco-cobalt); padding: 0 14px; font: inherit; font-size: 14px; font-weight: 750; cursor: pointer; }
.conversation-upgrade-save:disabled { opacity: .6; cursor: progress; }
.conversation-upgrade-saved { border-radius: var(--eco-radius-pill); background: var(--eco-success-soft); color: var(--eco-success); padding: 6px 12px; font-size: 14px; font-weight: 750; }
.live-result .conversation-upgrades { margin-block: var(--eco-space-3); }
/* D211 · ensaio geral: a linha na Agenda e a comparação no resultado. */
.ag-rehearsal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 6px; }
.ag-rehearsal.is-done > span { border-radius: var(--eco-radius-md); background: var(--eco-cobalt-soft); color: var(--eco-ink); padding: 6px 10px; font-size: 14px; }
.ag-rehearsal .ag-link { min-height: var(--eco-size-touch, 44px); display: inline-flex; align-items: center; color: var(--eco-cobalt); font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.conversation-rehearsal-compare { margin: var(--eco-space-2) 0 0; color: var(--eco-ink-muted); font-size: 14px; }
.conversation-next { display: grid; gap: 6px; border-radius: var(--eco-radius-lg); background: var(--eco-cobalt-soft); color: var(--eco-ink); padding: clamp(14px, 3vw, 20px); }
.conversation-next p { margin: 0; line-height: 1.5; }
.conversation-next small { color: var(--eco-ink-muted); font-size: 14px; }
.conversation-next-kicker { color: var(--eco-cobalt); font-size: 13px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.conversation-progress { display: grid; gap: var(--eco-space-3); margin-top: var(--eco-space-8); }
.progress-head h2 { margin: 0; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 1.6rem; }
.progress-head p, .progress-soon { margin: 4px 0 0; color: var(--eco-ink-muted); line-height: 1.45; }
.progress-soon { border: 1px dashed var(--eco-line-strong); border-radius: var(--eco-radius-lg); background: var(--eco-surface); padding: 16px 18px; }
.progress-card { display: grid; gap: 10px; border: 1px solid var(--eco-line); border-radius: var(--eco-radius-lg); background: var(--eco-surface); padding: clamp(14px, 3vw, 20px); }
.progress-card h3 { margin: 0; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 1.15rem; }
.progress-card > span { color: var(--eco-ink-muted); font-size: 13px; }
.progress-card > strong { color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 1.5rem; }
.progress-card > small { color: var(--eco-ink-muted); font-size: 12px; }
.progress-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.progress-card-head .is-up { color: var(--eco-success); font-weight: 750; }
.progress-card-head .is-down { color: var(--eco-ink-muted); font-weight: 750; }
.progress-bars { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 8px; align-items: end; height: 120px; border-bottom: 1px solid var(--eco-line); padding-bottom: 4px; }
.progress-bar { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.progress-bar small { color: var(--eco-ink-muted); font-size: 11px; }
.progress-bar i { display: block; width: 100%; border-radius: 6px 6px 2px 2px; background: var(--eco-cobalt-soft); }
.progress-bar.is-last i { background: var(--eco-cobalt); }
.progress-note { margin: 0; color: var(--eco-ink-muted); font-size: 13px; line-height: 1.45; }
.progress-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--eco-space-3); }
.progress-list { display: grid; margin: 0; padding: 0; list-style: none; }
.progress-list li { display: grid; gap: 4px; border-top: 1px solid var(--eco-line); padding: 10px 0; }
.progress-list li:first-child { border-top: 0; padding-top: 0; }
.progress-list li span { color: var(--eco-ink-muted); font-size: 14px; }
.progress-list.is-returning li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.progress-list.is-returning li > div { display: grid; gap: 4px; }
.progress-list.is-returning .conversation-card-action { flex: none; width: auto; }
.simulator-imported-note { margin: 0; border-radius: var(--eco-radius-md); background: var(--eco-cobalt-soft); color: var(--eco-cobalt); padding: 10px 12px; font-size: 14px; }
@media (max-width: 800px) {
  .material-phrase-row { grid-template-columns: minmax(0, 1fr); }
  .material-phrase-row .material-row-actions { grid-column: 1; justify-content: space-between; flex-wrap: wrap; }
  .material-practice-summary { align-items: stretch; }
  .material-practice-summary > .eco-btn { width: 100%; justify-content: center; }
  .material-due-status { flex-basis: 100%; }
  .material-practice-done { margin: 1rem auto; }
  .material-practice-done > div { width: 100%; }
  .material-practice-done > div .eco-btn { flex: 1 1 100%; justify-content: center; }
  .conversation-new-card { grid-template-columns: minmax(0, 1fr); }
  .conversation-card-actions { justify-content: flex-start; }
  .conversation-card-actions > *, .conversation-card-actions [data-kit-slot] { flex: 1 1 100%; }
  .conversation-card-action { width: 100%; }
}

/* Configurações · estados que pedem um próximo passo claro (Lote 7). */
.st-push-state { display: grid; gap: 10px; }
.st-push-state h3 { margin: 0; color: var(--eco-ink); font-size: 17px; font-weight: 700; }
.st-push-message { margin: 0; color: var(--eco-ink); font-size: 15px; font-weight: 700; line-height: 1.45; }
.st-push-error, .st-feed-error { margin: 0; border-radius: var(--eco-radius-md); background: var(--eco-danger-soft); color: var(--eco-ink); padding: 12px 14px; font-size: 14px; line-height: 1.5; }
.st-feed-error { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.st-feed-error p { margin: 0; }
.st-reset-progress, .st-reset-failed { align-items: flex-start; flex-direction: column; gap: 10px; }
.st-reset-progress { border-color: var(--eco-line); background: var(--eco-surface-raised); }
.st-reset-progress h2 { color: var(--eco-ink); }
.st-reset-pulse { display: flex; align-items: end; gap: 4px; height: 30px; }
.st-reset-pulse span { width: 7px; height: 14px; transform-origin: bottom; border-radius: 999px; background: var(--eco-cobalt); animation: st-reset-pulse 1000ms ease-in-out infinite; }
.st-reset-pulse span:nth-child(2) { height: 22px; animation-delay: 120ms; }
.st-reset-pulse span:nth-child(3) { height: 30px; background: var(--eco-cobalt); animation-delay: 240ms; }
.st-reset-pulse span:nth-child(4) { height: 20px; animation-delay: 360ms; }
.st-reset-pulse span:nth-child(5) { height: 12px; animation-delay: 480ms; }
@keyframes st-reset-pulse { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .st-reset-pulse span { animation: none; } }
.account-telegram-error { margin: 0.75rem 0 0; border-radius: var(--eco-radius-md); background: var(--eco-danger-soft); color: var(--eco-ink); padding: 0.75rem 0.9rem; font-size: 0.8rem; line-height: 1.5; }
.account-telegram { scroll-margin-top: 24px; }
.ac-deleted-screen { display: grid; max-width: 48rem; min-height: 70svh; align-content: center; gap: 20px; margin-inline: auto; }
.ac-deleted-screen > h1 { margin: 0; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: clamp(28px, 4vw, 40px); font-weight: 700; line-height: 1.08; }
.ac-deleted-screen .rounded-xl { margin: 0; }
.ac-deleted-screen > .btn { justify-self: start; min-width: 9rem; }
body.account-deleted { padding-bottom: 0; }
body.account-deleted #app-sidebar,
body.account-deleted #topbar,
body.account-deleted #focus-topbar,
body.account-deleted #tabbar,
body.account-deleted #more-sheet,
body.account-deleted .workspace-footer { display: none !important; }
body.account-deleted .workspace { margin-left: 0 !important; }
body.account-deleted .workspace-main { width: min(100%, 60rem); min-height: 100svh; padding-bottom: 2rem; }

/* Lacunas 9: movimentos discretos e compartilhados. Listas permanecem sem animação de entrada. */
@keyframes eco-screen-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes eco-sheet-enter { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes eco-panel-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes eco-toast-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.route-view { animation: eco-screen-fade var(--eco-dur-fill) var(--eco-ease-in) both; }
.ui-dialog-backdrop { animation: eco-screen-fade var(--eco-dur-fill) var(--eco-ease-in) both; }
.ui-dialog-backdrop.is-closing { opacity: 0; transition: opacity var(--eco-dur-sheet-out) var(--eco-ease-out); }
.ui-dialog { animation: eco-panel-fade var(--eco-dur-fill) var(--eco-ease-in) both; }
.ui-dialog-backdrop.is-closing .ui-dialog { opacity: 0; transition: opacity var(--eco-dur-sheet-out) var(--eco-ease-out); }
.toast { animation: eco-toast-enter var(--eco-dur-toast) var(--eco-ease-in) both; }
.toast.is-leaving { opacity: 0; transform: translateY(4px); transition: opacity var(--eco-dur-toast-out) var(--eco-ease-out), transform var(--eco-dur-toast-out) var(--eco-ease-out); animation: none; }
.kit-picker { transition: opacity var(--eco-dur-toast-out) var(--eco-ease-out); }
.kit-picker.is-closing { opacity: 0; }
.tutorial-spotlight, .tutorial-progress span { transition-duration: var(--eco-dur-fill); }
.tutorial-close:focus-visible, .more-link:focus-visible, .sidebar-nav-link:focus-visible, .tab-link:focus-visible { outline: 3px solid var(--eco-cobalt); outline-offset: 3px; }
:is(button, a[href], summary, [role="button"]):active:not(:disabled) { transform: scale(.97); transition-duration: var(--eco-dur-press); }
.kit-count-number, .lb-tab-count, .track-kit-capacity strong, .eco-counter-value { display: inline-block; animation: eco-panel-fade var(--eco-dur-fill) var(--eco-ease-in) both; }
.eco-progress-fill { transition: width var(--eco-dur-fill) var(--eco-ease-in); }
.eco-skeleton-line { animation-duration: var(--eco-dur-loading); }
.ag-prep-step.is-done a { position: relative; text-decoration: none; }
.ag-prep-step.is-done a::after { position: absolute; top: 50%; right: 0; left: 0; height: 1px; background: currentColor; content: ""; transform-origin: left; animation: eco-done-line var(--eco-dur-fill) var(--eco-ease-in) both; }
@keyframes eco-done-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 767px) {
  .kit-picker { animation: eco-sheet-enter var(--eco-dur-sheet) var(--eco-ease-in) both; }
  .kit-picker.is-closing { animation: none; }
  .ui-dialog-backdrop { align-items: end; padding: 0; }
  .ui-dialog-backdrop .ui-dialog { width: 100%; max-height: 90svh; border-radius: 24px 24px 0 0; animation: eco-sheet-enter var(--eco-dur-sheet) var(--eco-ease-in) both; }
  .ui-dialog-backdrop.is-closing .ui-dialog { transform: translateY(100%); transition: transform var(--eco-dur-sheet-out) var(--eco-ease-out); animation: none; }
}

@media (min-width: 768px) {
  .kit-picker { animation: eco-panel-fade var(--eco-dur-fill) var(--eco-ease-in) both; }
}

/* Fuso do perfil: a confirmação impede que a detecção do aparelho altere o relógio sozinha. */
.timezone-dialog { width: min(32rem, calc(100vw - 24px)); max-width: none; max-height: min(90svh, 52rem); overflow: auto; border: 1px solid var(--eco-line); border-radius: var(--eco-radius-xl); background: var(--eco-surface-raised); color: var(--eco-ink); padding: 0; box-shadow: var(--eco-shadow-raised); }
.timezone-dialog::backdrop { background: color-mix(in srgb, var(--eco-ink) 58%, transparent); }
.tz-dialog-card { display: grid; gap: 12px; padding: 24px; }
.tz-dialog-card h2, .tz-dialog-card p { margin: 0; }
.tz-dialog-card h2 { font-family: var(--eco-font-display); font-size: clamp(24px, 4vw, 32px); line-height: 1.12; }
.tz-dialog-card > p:not(.tz-eyebrow) { color: var(--eco-ink-muted); line-height: 1.5; }
.tz-eyebrow { color: var(--eco-cobalt); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tz-dialog-actions { display: grid; gap: 8px; margin-top: 4px; }
.tz-dialog-actions button, .tz-card-actions button { min-height: var(--eco-size-touch); border-radius: var(--eco-radius-pill); padding: 0 18px; font: inherit; font-weight: 700; cursor: pointer; }
.tz-dialog-primary { border: 1px solid var(--eco-cobalt); background: var(--eco-cobalt); color: var(--eco-on-cobalt); }
.tz-dialog-secondary, .tz-dialog-quiet, .tz-card-secondary { border: 1px solid var(--eco-line-strong); background: var(--eco-surface-raised); color: var(--eco-ink); }
.tz-dialog-quiet { border-color: transparent; background: transparent; color: var(--eco-cobalt); }
.tz-dialog-footnote { font-size: 14px; }
.tz-dialog-error { min-height: 1.35em; color: var(--eco-danger); font-size: 14px; }
.tz-dialog-picker { display: grid; gap: 12px; }
.tz-picker-search, .tz-picker-choice { display: grid; gap: 6px; color: var(--eco-ink); font-size: 14px; font-weight: 700; }
.tz-picker-search input, .tz-picker-choice select, .tz-edit-panel input, .tz-edit-panel select { width: 100%; min-width: 0; border: 1px solid var(--eco-line-strong); border-radius: var(--eco-radius-md); background: var(--eco-surface-raised); color: var(--eco-ink); padding: 10px 12px; font: inherit; }
.tz-picker-search input:focus, .tz-picker-choice select:focus, .tz-edit-panel input:focus, .tz-edit-panel select:focus { border-color: var(--eco-cobalt); outline: 2px solid var(--eco-cobalt-soft); outline-offset: 1px; }
.tz-picker-choice select { max-height: 14rem; }
.tz-profile-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.tz-profile-current { display: grid; gap: 4px; }
.tz-profile-current strong { color: var(--eco-ink); font-size: 18px; }
.tz-profile-current span, .tz-profile-now p { color: var(--eco-ink-muted); font-size: 14px; line-height: 1.5; }
.tz-profile-now { display: grid; gap: 6px; margin-top: 14px; border-top: 1px solid var(--eco-line); padding-top: 14px; }
.tz-profile-now p { margin: 0; }
.tz-profile-now strong { color: var(--eco-ink); }
.tz-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tz-card-actions .tz-dialog-primary { min-width: 8rem; }
.tz-edit-panel { display: grid; gap: 10px; margin-top: 14px; }
.tz-edit-panel[hidden] { display: none; }
.tz-edit-panel label { display: grid; gap: 6px; font-size: 14px; font-weight: 700; }
.tz-card-error { margin: 8px 0 0; color: var(--eco-danger); font-size: 14px; }
@media (max-width: 639px) {
  .tz-dialog-card { padding: 20px 18px; }
  .tz-profile-row { flex-direction: column; }
  .tz-card-actions, .tz-card-actions button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .timezone-dialog { animation: none; } }

/* Gamificação v2: barras de semana, estados gentis e calendário somente de leitura. */
.practice-week-card, .practice-rhythm-card, .practice-settings {
  border: 1px solid var(--eco-line);
  border-radius: var(--eco-radius-xl);
  background: var(--eco-surface-raised);
  color: var(--eco-ink);
  box-shadow: var(--eco-shadow-raised);
}
.practice-week-card { display: grid; gap: 18px; padding: clamp(18px, 3vw, 26px); }
.practice-week-head, .practice-week-main, .practice-week-foot, .practice-week-days,
.practice-week-progress, .practice-rhythm-title, .practice-rhythm-legend {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.practice-week-head > div { min-width: 0; }
.practice-week-head h2, .practice-rhythm-title h1 { margin: 2px 0 0; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: clamp(22px, 3vw, 28px); line-height: 1.1; }
.practice-rhythm-link, .practice-week-foot a, .practice-back { display: inline-flex; min-height: var(--eco-size-touch); align-items: center; gap: 6px; color: var(--eco-cobalt); font-weight: 700; text-decoration: none; }
.practice-week-main { justify-content: flex-start; gap: clamp(24px, 6vw, 56px); }
.practice-week-metric, .practice-week-streak { display: grid; gap: 2px; }
.practice-week-metric strong, .practice-week-streak strong { color: var(--eco-ink); font-family: var(--eco-font-display); font-size: clamp(28px, 4vw, 36px); line-height: 1; font-variant-numeric: tabular-nums; }
.practice-week-metric span, .practice-week-streak span { color: var(--eco-ink-muted); font-size: 13px; line-height: 1.4; }
.practice-week-progress { justify-content: flex-start; gap: 14px; }
.practice-week-bars { display: grid; grid-template-columns: repeat(var(--practice-bar-count, 5), minmax(24px, 1fr)); gap: 7px; width: min(100%, 26rem); }
.practice-week-bar { display: block; height: 13px; overflow: hidden; border: 1px dashed var(--eco-line-strong); border-radius: var(--eco-radius-pill); background: var(--eco-surface); }
.practice-week-bar.is-filled { border-style: solid; border-color: var(--eco-cobalt); background: var(--eco-cobalt); }
.practice-week-bar.is-filled i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--eco-cobalt); transform: scaleX(1); transform-origin: left center; transition: transform 400ms var(--eco-ease-in); }
.practice-bars-animating .practice-week-bar.is-filled i { transform: scaleX(0); }
.practice-bars-animating.practice-bars-revealed .practice-week-bar.is-filled i { transform: scaleX(1); }
.practice-week-count { min-width: 4.5rem; color: var(--eco-ink); font-size: 14px; font-variant-numeric: tabular-nums; }
.practice-week-days { justify-content: flex-start; gap: clamp(5px, 2vw, 12px); }
.practice-day-dot { display: grid; width: clamp(34px, 6vw, 42px); min-height: 38px; place-items: center; border: 1px dashed var(--eco-line-strong); border-radius: var(--eco-radius-pill); color: var(--eco-ink-muted); font-size: 12px; font-weight: 700; }
.practice-day-dot.is-done { border-style: solid; border-color: var(--eco-cobalt); background: var(--eco-cobalt-soft); color: var(--eco-cobalt); }
.practice-day-dot.is-done.is-voice { border-color: var(--eco-amber); background: var(--eco-amber-soft); color: var(--eco-amber-ink); }
.practice-day-dot.is-today { outline: 2px solid var(--eco-ink); outline-offset: 2px; }
.practice-week-status { margin: 0; border-left: 3px solid var(--eco-cobalt); border-radius: 0 var(--eco-radius-sm) var(--eco-radius-sm) 0; background: var(--eco-cobalt-soft); padding: 10px 12px; color: var(--eco-ink); font-size: 14px; line-height: 1.5; }
.practice-week-status[data-state="goal-met"], .practice-week-status[data-state="free-week"] { border-color: var(--eco-line-strong); background: var(--eco-surface); }
.practice-week-status[data-state="pause-used"] { border-color: var(--eco-cobalt); background: var(--eco-cobalt-soft); }
.practice-week-status[data-state="returning"] { border-color: var(--eco-success); background: var(--eco-success-soft); }
.practice-next-step { display: inline-flex; min-height: var(--eco-size-touch); width: fit-content; align-items: center; justify-content: center; border: 1px solid var(--eco-cobalt); border-radius: var(--eco-radius-pill); background: var(--eco-surface-raised); padding: 0 16px; color: var(--eco-cobalt); font-weight: 700; text-decoration: none; }
.practice-return-note { margin: -10px 0 0; color: var(--eco-ink-muted); font-size: 13px; line-height: 1.45; }
.practice-week-foot { flex-wrap: wrap; justify-content: flex-start; color: var(--eco-ink-muted); font-size: 13px; }
.practice-week-foot > span { display: inline-flex; min-height: 30px; align-items: center; border-radius: var(--eco-radius-pill); background: var(--eco-surface); padding: 0 10px; }
.practice-reward-gained { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 14px; border: 1px solid var(--eco-success); border-radius: var(--eco-radius-lg); background: var(--eco-success-soft); padding: 14px 16px; }
.practice-reward-gained strong { color: var(--eco-ink); }
.practice-reward-gained span { color: var(--eco-ink-muted); font-size: 13px; }
.practice-reward-actions { display: flex; align-items: center; gap: 16px; }
.practice-reward-actions a { color: var(--eco-cobalt); font-weight: 700; text-decoration: none; }
.practice-reward-actions button { min-height: 40px; border: 1px solid var(--eco-line-strong); border-radius: var(--eco-radius-pill); background: var(--eco-surface-raised); padding: 0 14px; color: var(--eco-ink); font: inherit; font-weight: 700; cursor: pointer; }
.practice-reward-cap { display: grid; gap: 7px; color: var(--eco-ink-muted); font-size: 13px; }
.practice-reward-cap > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.practice-reward-cap strong { color: var(--eco-ink); font-variant-numeric: tabular-nums; }
.practice-reward-cap-track { display: block; height: 10px; overflow: hidden; border: 1px dashed var(--eco-line-strong); border-radius: var(--eco-radius-pill); background: var(--eco-surface); }
.practice-reward-cap-track i { display: block; width: var(--practice-reward-fill, 0%); height: 100%; border-radius: inherit; background: var(--eco-cobalt); }
.practice-rhythm-page { display: grid; max-width: 54rem; margin-inline: auto; gap: 16px; }
.practice-rhythm-card { display: grid; gap: 22px; padding: clamp(20px, 4vw, 34px); }
.practice-rhythm-title { align-items: flex-start; flex-direction: column; gap: 5px; }
.practice-rhythm-title p { margin: 0; color: var(--eco-ink-muted); line-height: 1.5; }
.practice-rhythm-title .practice-back { margin-bottom: 8px; }
.practice-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(4px, 1.2vw, 10px); }
.practice-cal-weekday, .practice-cal-day, .practice-cal-empty { display: grid; min-height: clamp(36px, 7vw, 58px); place-items: center; }
.practice-cal-weekday { min-height: 28px; color: var(--eco-ink-muted); font-size: 12px; font-weight: 700; }
.practice-cal-day { position: relative; border: 1px dashed var(--eco-line-strong); border-radius: var(--eco-radius-md); color: var(--eco-ink-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.practice-cal-day > i { position: absolute; right: 5px; bottom: 3px; font-size: 10px; font-style: normal; font-weight: 800; }
.practice-cal-day.is-practiced { border-style: solid; border-color: var(--eco-cobalt); background: var(--eco-cobalt-soft); color: var(--eco-cobalt); font-weight: 750; }
.practice-cal-day.is-voice { border-color: var(--eco-amber); background: var(--eco-amber-soft); color: var(--eco-amber-ink); }
.practice-rhythm-stats { display: flex; gap: clamp(24px, 6vw, 56px); }
.practice-rhythm-stats > div { display: grid; gap: 2px; }
.practice-rhythm-stats strong { color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.practice-rhythm-stats span { color: var(--eco-ink-muted); font-size: 13px; }
.practice-rhythm-legend { justify-content: flex-start; flex-wrap: wrap; color: var(--eco-ink-muted); font-size: 13px; }
.practice-rhythm-legend span { width: 18px; height: 12px; border: 1px dashed var(--eco-line-strong); border-radius: 3px; }
.practice-rhythm-legend .is-practiced { border-style: solid; border-color: var(--eco-cobalt); background: var(--eco-cobalt-soft); }
.practice-rhythm-rewards { display: grid; gap: 12px; border: 1px solid var(--eco-line); border-radius: var(--eco-radius-xl); background: var(--eco-surface-raised); padding: clamp(18px, 4vw, 26px); box-shadow: var(--eco-shadow-raised); }
.practice-rhythm-rewards h2 { margin: 0; color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 20px; }
.practice-next-rewards { display: grid; gap: 8px; }
.practice-next-rewards p, .practice-active-rewards, .practice-reward-cap-full { margin: 0; color: var(--eco-ink); font-size: 14px; line-height: 1.5; }
.practice-active-rewards, .practice-reward-cap-full { color: var(--eco-ink-muted); }
.practice-settings { display: grid; gap: 14px; padding: 18px; }
.practice-settings h3, .practice-settings p { margin: 0; }
.practice-settings h3 { color: var(--eco-ink); font-family: var(--eco-font-display); font-size: 20px; }
.practice-settings > p { color: var(--eco-ink-muted); font-size: 14px; line-height: 1.5; }
.practice-goal-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.practice-goal-options button, .practice-free-week button { min-height: var(--eco-size-touch); border: 1px solid var(--eco-line-strong); border-radius: var(--eco-radius-pill); background: var(--eco-surface-raised); color: var(--eco-ink); padding: 0 14px; font: inherit; font-weight: 700; cursor: pointer; }
.practice-goal-options button[aria-pressed="true"] { border-color: var(--eco-cobalt); background: var(--eco-cobalt-soft); color: var(--eco-cobalt); }
.practice-goal-options button:disabled, .practice-free-week button:disabled { cursor: not-allowed; opacity: .6; }
.practice-effective { color: var(--eco-ink-muted); font-size: 13px; }
.practice-free-week { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--eco-line); padding-top: 14px; }
.practice-free-week > div { display: grid; gap: 4px; }
.practice-free-week strong { color: var(--eco-ink); }
.practice-free-week p { max-width: 38rem; color: var(--eco-ink-muted); font-size: 13px; line-height: 1.45; }
.practice-free-week button { flex: none; border-color: var(--eco-cobalt); background: var(--eco-cobalt); color: var(--eco-on-cobalt); }
.practice-bars-animating .practice-week-bar.is-filled i, .practice-bars-animating.practice-bars-revealed .practice-week-bar.is-filled i { will-change: transform; }
/* Cartão de Hoje (compacto): vive na coluna lateral, sem sombra (só o card em foco tem) e sem botão. */
.practice-week-card.is-compact { display: grid; gap: 10px; padding: 18px 20px; border-radius: var(--eco-radius-lg); box-shadow: none; color: var(--eco-ink); text-decoration: none; }
.practice-week-card.is-compact:hover { background: var(--eco-cobalt-soft); }
.practice-week-card.is-compact:focus-visible { outline: 2px solid var(--eco-cobalt); outline-offset: 2px; }
.practice-compact-head, .practice-compact-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.practice-compact-head .practice-week-count { min-width: 0; font-family: var(--eco-font-mono); font-size: 14px; }
.practice-week-card.is-compact .practice-week-bars { display: flex; align-items: flex-end; gap: 8px; width: 100%; height: 44px; }
.practice-week-card.is-compact .practice-week-bar { flex: 1 1 0; height: calc(44px * var(--bar-h, 1)); border-radius: 10px; }
.practice-week-card.is-compact .practice-week-status { border: 0; background: transparent; padding: 0; font-size: 14px; line-height: 1.4; }
.practice-compact-line > svg, .practice-compact-line > .ff-icon { flex: none; width: 18px; height: 18px; color: var(--eco-cobalt); }
.practice-compact-extra { color: var(--eco-ink-muted); font-size: 13px; }
#today-practice:not(:last-child) { margin-bottom: var(--eco-space-6); }
@media (max-width: 639px) {
  .practice-week-head { align-items: flex-start; }
  .practice-rhythm-link { white-space: nowrap; font-size: 13px; }
  .practice-week-progress { align-items: flex-start; flex-direction: column; gap: 8px; }
  .practice-week-bars { width: 100%; grid-template-columns: repeat(var(--practice-bar-count, 5), minmax(0, 1fr)); }
  .practice-week-count { min-width: 0; }
  .practice-week-days { justify-content: space-between; gap: 4px; }
  .practice-week-day { min-width: 0; }
  .practice-reward-gained { grid-template-columns: 1fr; }
  .practice-reward-actions { flex-wrap: wrap; }
  .practice-rhythm-stats { justify-content: space-between; }
  .practice-free-week { align-items: stretch; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .practice-week-bar.is-filled i { transition: none; transform: scaleX(1); }
}