/* ---- Botões ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-ui); font-size:.9rem; font-weight:600;
  padding:9px 16px; border-radius:var(--radius-sm); border:1px solid transparent;
  cursor:pointer; transition:opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent); color:var(--accent-ink); }
.btn-primary:hover{ opacity:.9; }
.btn-secondary{ background:var(--paper-raised); color:var(--ink); border-color:var(--hairline-strong); }
.btn-secondary:hover{ border-color:var(--ink-soft); }
.btn-ghost{ background:transparent; color:var(--ink-soft); }
.btn-ghost:hover{ color:var(--ink); background:var(--paper-raised); }
.btn-danger{ background:var(--danger-soft); color:var(--danger); }
.btn-danger:hover{ opacity:.85; }
.btn-sm{ padding:6px 11px; font-size:.82rem; }
.btn-icon{ padding:8px; border-radius:var(--radius-sm); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }

/* ---- Badge / tag ---- */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:var(--fs-micro); color:var(--ink-soft);
  background:var(--paper-sunken); border:1px solid var(--hairline);
  padding:3px 8px; border-radius:var(--radius-pill);
}
.badge-accent{ background:var(--accent-soft); color:var(--accent); border-color:transparent; }
.badge-plum{ background:var(--plum-soft); color:var(--plum); border-color:transparent; }

/* ---- Tabs de filtro ---- */
.tabs{ display:flex; gap:var(--sp-1); border-bottom:1px solid var(--hairline); margin-bottom:var(--sp-5); }
.tab{
  background:none; border:none; cursor:pointer;
  padding:9px 4px; margin-right:var(--sp-5);
  font-size:.92rem; color:var(--ink-faint);
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.tab:hover{ color:var(--ink); }
.tab.active{ color:var(--ink); border-color:var(--accent); font-weight:600; }
.tab small{ margin-left:6px; font-size:var(--fs-micro); font-weight:400; color:var(--ink-faint); font-variant-numeric:tabular-nums; }

/* ---- Barra de progresso ---- */
.progress-track{ height:3px; background:var(--hairline); border-radius:99px; overflow:hidden; }
.progress-fill{ height:100%; background:var(--accent); border-radius:99px; transition:width var(--dur-base) var(--ease); }

/* ---- Capas (miniaturas) ---- */
.cover{
  position:relative; aspect-ratio:16/9; overflow:hidden; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper-sunken); color:var(--ink-faint); border-radius:var(--radius-sm);
}
.cover-fallback{ display:flex; }
.cover-fallback svg{ width:28px; height:28px; }
.cover-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--paper-sunken); }
.cover-play{
  position:absolute; left:8px; bottom:8px; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:rgba(20,18,14,.72); color:#fff;
}
.cover-play svg{ width:11px; height:11px; margin-left:1px; }
.cover-chip{
  position:absolute; right:8px; bottom:8px; padding:1px 6px; border-radius:3px;
  font-size:var(--fs-micro); font-variant-numeric:tabular-nums; background:rgba(20,18,14,.78); color:#fff;
}
.cover-text{ align-items:flex-start; justify-content:flex-start; padding:44px var(--sp-4) var(--sp-3); }   /* o topo fica livre para estrela e menu */
.cover-text .cover-fallback{ position:absolute; right:8px; bottom:6px; }
.cover-text .cover-fallback svg{ width:16px; height:16px; opacity:.7; }
.cover-excerpt{
  margin:0; font-family:var(--font-reading); font-style:italic; font-size:.82rem; line-height:1.45; color:var(--ink-soft);
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.cover-label{ font-size:var(--fs-micro); font-weight:600; letter-spacing:.08em; }

/* ---- Cartão de fonte (biblioteca) ---- */
.source-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:var(--sp-5) var(--sp-4); }
.source-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--paper-raised); border:1px solid var(--hairline); border-radius:var(--radius-md);
  transition:border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.source-card:hover{ border-color:var(--ink-soft); transform:translateY(-1px); }
.source-link{ display:flex; flex-direction:column; flex:1; min-width:0; color:inherit; text-decoration:none; }
.source-link:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius-md); }
.source-link .cover{ border-radius:var(--radius-md) var(--radius-md) 0 0; }
.source-body{ display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4) var(--sp-4); flex:1; min-width:0; }
.source-card h3{
  margin:0; font-size:1rem; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.fav-btn{ background:none; border:none; cursor:pointer; color:var(--hairline-strong); padding:2px; }
.fav-btn.is-fav{ color:var(--plum); }
.source-meta{ font-size:var(--fs-small); color:var(--ink-faint); display:flex; gap:4px 10px; align-items:center; flex-wrap:wrap; }
.source-type{ display:inline-flex; align-items:center; gap:5px; }
.source-progress{ margin-top:auto; display:flex; align-items:center; gap:var(--sp-2); padding-top:var(--sp-1); }
.source-progress .progress-track{ flex:1; }
.source-status{ font-size:var(--fs-micro); color:var(--ink-faint); white-space:nowrap; font-variant-numeric:tabular-nums; }
.source-status.is-done{ color:var(--accent); font-weight:600; }

.source-actions{ position:absolute; top:8px; right:8px; display:flex; gap:6px; z-index:2; }
.source-fav, .source-more{
  width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; padding:0;
  border:1px solid var(--hairline); border-radius:50%; cursor:pointer;
  background:var(--paper-raised); color:var(--ink-soft); opacity:0;
  transition:opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.source-fav.is-fav{ opacity:1; color:var(--plum); }
.source-card:hover .source-fav, .source-card:hover .source-more,
.source-card:focus-within .source-fav, .source-card:focus-within .source-more,
.source-card.menu-open .source-more{ opacity:1; }
.source-fav:hover, .source-more:hover{ color:var(--ink); border-color:var(--hairline-strong); }
.source-menu-wrap{ position:relative; }
.card-menu{
  position:absolute; right:0; top:36px; min-width:150px; padding:4px; z-index:6;
  background:var(--paper-raised); border:1px solid var(--hairline-strong); border-radius:var(--radius-md); box-shadow:var(--shadow-modal);
}
.card-menu[hidden]{ display:none; }
.card-menu button{
  display:flex; align-items:center; gap:8px; width:100%; padding:8px 10px; text-align:left;
  background:none; border:none; border-radius:var(--radius-sm); cursor:pointer;
  font:inherit; font-size:var(--fs-small); color:var(--danger);
}
.card-menu button:hover, .card-menu button:focus-visible{ background:var(--danger-soft); outline:none; }

/* modo lista */
.source-grid.is-list{ grid-template-columns:1fr; gap:var(--sp-2); }
.is-list .source-card:hover{ transform:none; }
.is-list .source-link{ flex-direction:row; align-items:center; gap:var(--sp-4); padding:var(--sp-2); }
.is-list .source-link .cover{ width:144px; border-radius:var(--radius-sm); }
.is-list .cover-excerpt{ -webkit-line-clamp:3; font-size:.76rem; }
.is-list .source-body{ padding:var(--sp-1) 84px var(--sp-1) 0; gap:6px; }
.is-list .source-progress{ margin-top:0; max-width:340px; }
.is-list .source-actions{ top:50%; transform:translateY(-50%); }

/* barra: abas + busca + ordenar + grade/lista */
.lib-toolbar{
  display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5);
  border-bottom:1px solid var(--hairline); margin-bottom:var(--sp-5);
}
.lib-toolbar .tabs{ border-bottom:none; margin-bottom:0; flex:1 1 auto; min-width:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
.lib-toolbar .tabs::-webkit-scrollbar{ display:none; }
.lib-toolbar .tab{ margin-bottom:0; white-space:nowrap; flex:none; }
.lib-tools{ display:flex; align-items:center; gap:var(--sp-2); padding-bottom:var(--sp-2); }
.lib-search-wrap{ position:relative; display:flex; align-items:center; margin:0; }
.lib-search-wrap svg{ position:absolute; left:10px; color:var(--ink-faint); pointer-events:none; }
.lib-search-wrap input{ padding-left:32px; width:200px; }
.lib-tools select{ width:auto; font-size:.95rem; }
.lib-search-wrap input{ font-size:.95rem; }
.lib-view{ display:inline-flex; border:1px solid var(--hairline-strong); border-radius:var(--radius-sm); overflow:hidden; }
.lib-view button{ display:flex; align-items:center; justify-content:center; padding:7px 10px; border:none; cursor:pointer; background:var(--paper-raised); color:var(--ink-faint); }
.lib-view button + button{ border-left:1px solid var(--hairline-strong); }
.lib-view button[aria-pressed="true"]{ background:var(--accent); color:var(--accent-ink); }

/* ---- Continue de onde parou ---- */
.continue-wrap{ margin-bottom:var(--sp-5); }
.continue-wrap:empty{ display:none; }
.continue-strip{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--sp-3); }
.continue-card{
  display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-2);
  background:var(--paper-raised); border:1px solid var(--hairline); border-radius:var(--radius-md);
  color:inherit; text-decoration:none; transition:border-color var(--dur-fast) var(--ease);
}
.continue-card:hover{ border-color:var(--ink-soft); }
.continue-thumb{ width:116px; flex:none; }
.continue-thumb .cover-excerpt{ display:none; }
.continue-thumb .cover-text .cover-fallback{ position:static; }
.continue-thumb .cover-text .cover-fallback svg{ width:24px; height:24px; opacity:1; }
.continue-thumb .cover-text{ align-items:center; justify-content:center; padding:0; }
.continue-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; padding-right:var(--sp-2); }
.continue-card h3{ margin:0; font-size:.98rem; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---- Cartão vazio ---- */
.empty-state{
  border:1px dashed var(--hairline-strong); border-radius:var(--radius-md);
  padding:var(--sp-8) var(--sp-5); text-align:center; color:var(--ink-soft);
}
.empty-state h3{ color:var(--ink); }
.empty-state p{ max-width:36ch; margin:0 auto var(--sp-4); color:var(--ink-faint); }

/* ---- Modal ---- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(20,18,12,.42);
  display:flex; align-items:center; justify-content:center; padding:var(--sp-5);
  z-index:200; animation:fade-in var(--dur-fast) var(--ease);
}
@keyframes fade-in{ from{opacity:0} to{opacity:1} }
.modal{
  background:var(--paper-raised); border-radius:var(--radius-md);
  box-shadow:var(--shadow-modal); width:min(520px,100%);
  max-height:88vh; overflow:auto; padding:var(--sp-6);
  animation:modal-in var(--dur-base) var(--ease);
}
@keyframes modal-in{ from{opacity:0; transform:translateY(10px) scale(.98);} to{opacity:1; transform:none;} }
.modal h2{ margin-bottom:var(--sp-1); }
.modal .modal-sub{ color:var(--ink-faint); font-size:var(--fs-small); margin-bottom:var(--sp-5); }
.modal-field{ margin-bottom:var(--sp-4); }
.modal-actions{ display:flex; justify-content:flex-end; gap:var(--sp-2); margin-top:var(--sp-6); }
.modal-close{ position:absolute; }

.modal-tabs{ display:flex; gap:4px; background:var(--paper-sunken); padding:4px; border-radius:var(--radius-sm); margin-bottom:var(--sp-5); }
.modal-tab{ flex:1; text-align:center; padding:7px; border-radius:3px; background:none; border:none; cursor:pointer; font-size:.86rem; color:var(--ink-soft); }
.modal-tab.active{ background:var(--paper-raised); color:var(--ink); font-weight:600; box-shadow:0 0 0 1px var(--hairline); }

.dropzone{
  border:1.5px dashed var(--hairline-strong); border-radius:var(--radius-md);
  padding:var(--sp-7) var(--sp-4); text-align:center; color:var(--ink-faint);
  cursor:pointer; transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.dropzone:hover, .dropzone.is-drag{ border-color:var(--accent); background:var(--accent-soft); color:var(--ink); }
.dropzone input[type=file]{ display:none; }

/* ---- Toast ---- */
.toast-host{ position:fixed; bottom:var(--sp-5); left:50%; transform:translateX(-50%); z-index:400; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast{
  background:var(--ink); color:var(--paper); font-size:.86rem;
  padding:10px 16px; border-radius:var(--radius-pill);
  box-shadow:var(--shadow-modal); animation:toast-in var(--dur-base) var(--ease);
}
.toast.toast-danger{ background:var(--danger); }
@keyframes toast-in{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

/* ---- Toolbar de seleção (criar flashcard) ---- */
.selection-toolbar{
  position:fixed; z-index:150; transform:translate(-50%,-100%);
  background:var(--ink); color:var(--paper); border-radius:var(--radius-pill);
  padding:6px 8px 6px 14px; display:flex; align-items:center; gap:8px;
  box-shadow:var(--shadow-modal); font-size:.84rem;
  animation:toast-in var(--dur-fast) var(--ease);
}
.selection-toolbar button{
  background:var(--paper); color:var(--ink); border:none; border-radius:var(--radius-pill);
  padding:6px 12px; font-size:.82rem; font-weight:600; cursor:pointer;
}

/* ---- Leitor: cabeçalho e corpo ---- */
.reader-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-4); margin-bottom:var(--sp-5); }
.reader-head h1{ font-size:1.5rem; }
.reader-body{
  font-family:var(--font-reading); font-size:var(--fs-reading); line-height:1.75;
  color:var(--ink); white-space:pre-wrap;
}
.reader-body p{ margin:0 0 1.2em; }
.reader-toolbar{ display:flex; align-items:center; gap:var(--sp-3); }
.reader-progress-wrap{ position:sticky; top:0; background:var(--paper); padding:var(--sp-2) 0; z-index:5; }

/* ---- Vídeo ---- */
.video-layout{ display:grid; grid-template-columns:1.5fr 1fr; gap:var(--sp-6); align-items:start; }
.video-frame-wrap{ position:relative; aspect-ratio:16/9; background:#000; border-radius:var(--radius-md); overflow:hidden; }
.video-frame-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.transcript-panel{ background:var(--paper-raised); border:1px solid var(--hairline); border-radius:var(--radius-md); padding:var(--sp-4); max-height:72vh; overflow:auto; }
.transcript-panel textarea{ min-height:300px; font-family:var(--font-reading); font-size:1.02rem; line-height:1.7; border:none; padding:0; }
.transcript-panel textarea:focus{ box-shadow:none; }
@media (max-width: 980px){ .video-layout{ grid-template-columns:1fr; } }

/* ---- Flashcards ---- */
.flash-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--sp-3); align-items:start; }
.flash-card{
  background:var(--paper-raised); border:1px solid var(--hairline); border-radius:var(--radius-md);
  padding:var(--sp-3) var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-2);
  transition:border-color var(--dur-fast) var(--ease);
}
.flash-card:hover, .flash-card.is-open{ border-color:var(--hairline-strong); }
.fc-head{ display:flex; align-items:flex-start; gap:var(--sp-2); }
.fc-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; cursor:pointer; border-radius:var(--radius-sm); }
.fc-main:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.flash-front{ font-family:var(--font-display); font-size:1.12rem; font-weight:600; line-height:1.3; }
.flash-back{ color:var(--ink-soft); font-size:.95rem; }
.fc-tags{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:4px; font-size:var(--fs-micro); color:var(--ink-faint); }
.level-tag{ padding:1px 7px; border-radius:99px; font-weight:600; background:var(--paper-sunken); color:var(--ink-soft); }
.level-tag.level-easy{ background:var(--accent-soft); color:var(--accent); }
.level-tag.level-hard{ background:var(--danger-soft); color:var(--danger); }
.fc-speak, .flash-actions .fav-btn{ color:var(--ink-soft); }
.fc-speak{ flex:none; opacity:.55; transition:opacity var(--dur-fast) var(--ease); }
.flash-card:hover .fc-speak, .fc-speak:focus-visible{ opacity:1; }
.flash-actions .fav-btn:hover, .fc-speak:hover{ color:var(--accent); }
.flash-more{ display:flex; flex-direction:column; gap:var(--sp-2); padding-top:var(--sp-2); border-top:1px solid var(--hairline); }
.flash-more[hidden]{ display:none; }
.flash-more .flash-details{ margin-top:0; }
.flash-context{ font-family:var(--font-reading); font-style:italic; color:var(--ink-faint); font-size:.92rem; border-left:2px solid var(--hairline-strong); padding-left:10px; }
.flash-foot{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); flex-wrap:wrap; padding-top:var(--sp-1); }
.flash-source-link{ display:flex; align-items:center; gap:6px; min-width:0; font-size:var(--fs-small); color:var(--accent); background:none; border:none; cursor:pointer; padding:0; }
.flash-source-link span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:170px; }
.flash-actions{ display:flex; align-items:center; gap:4px; margin-left:auto; }

/* ---- Modo revisão (flip) ---- */
.review-stage{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-5); padding:var(--sp-6) 0; }
.flip-card{ width:min(480px,92vw); height:280px; perspective:1200px; cursor:pointer; }
.flip-inner{ position:relative; width:100%; height:100%; transition:transform .5s var(--ease); transform-style:preserve-3d; }
.flip-card.flipped .flip-inner{ transform:rotateY(180deg); }
.flip-face{
  position:absolute; inset:0; backface-visibility:hidden;
  background:var(--paper-raised); border:1px solid var(--hairline); border-radius:var(--radius-md);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-3);
  padding:var(--sp-5); text-align:center;
}
.flip-face.back{ transform:rotateY(180deg); }
.flip-face .word{ font-family:var(--font-display); font-size:1.9rem; font-weight:600; }

/* ---- Shadowing: frases e barra do player ---- */
.shadow-active .sent{ border-radius:2px; cursor:pointer; transition:background var(--dur-fast) var(--ease); }
.shadow-active .sent:hover{ background:var(--paper-sunken); }
.sent.is-current{ background:var(--accent-soft); box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.sent.is-turn{ background:var(--plum-soft); }

.shadow-bar{
  position:sticky; bottom:var(--sp-4); z-index:20; margin-top:var(--sp-5);
  background:var(--paper-raised); border:1px solid var(--hairline-strong);
  border-radius:var(--radius-md); box-shadow:var(--shadow-modal);
  padding:var(--sp-3) var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-2);
  font-family:var(--font-ui);
}
.shadow-row{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.shadow-transport{ display:flex; align-items:center; gap:4px; }
.shadow-play{ min-width:104px; }
.shadow-count{ font-size:var(--fs-small); color:var(--ink-faint); font-variant-numeric:tabular-nums; margin-right:auto; }
.shadow-opts{ font-size:var(--fs-small); color:var(--ink-soft); gap:var(--sp-4); }
.shadow-opts label{ display:flex; align-items:center; gap:6px; }
.shadow-opts select{ width:auto; font-size:var(--fs-small); padding:4px 6px; }
.shadow-opts label[hidden]{ display:none; }
.shadow-voice{ min-width:0; }
.shadow-voice select{ max-width:220px; }
.shadow-check input{ width:auto; }
.shadow-hint{ font-size:var(--fs-micro); color:var(--ink-faint); line-height:1.4; }
.shadow-hint[hidden]{ display:none; }
.seg{ display:inline-flex; border:1px solid var(--hairline-strong); border-radius:var(--radius-sm); overflow:hidden; }
.seg button{
  background:transparent; border:none; padding:6px 11px; font-size:.8rem; font-weight:600;
  color:var(--ink-soft); cursor:pointer; font-family:var(--font-ui);
}
.seg button + button{ border-left:1px solid var(--hairline-strong); }
.seg button.active{ background:var(--accent); color:var(--accent-ink); }

/* ---- Estatísticas (biblioteca): uma linha ---- */
.stats-wrap{ margin-bottom:var(--sp-4); }
.stats-line{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-5);
  padding:var(--sp-1) 0; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
}
.stat-item{ display:inline-flex; align-items:baseline; gap:6px; font-size:var(--fs-small); color:var(--ink-soft); cursor:default; }
.stat-icon{ color:var(--ink-faint); display:inline-flex; align-self:center; }
.stat-value{ font-family:var(--font-display); font-weight:600; font-size:1.08rem; color:var(--ink); font-variant-numeric:tabular-nums; }
.stats-line .btn{ margin-left:auto; }

/* ---- Botão "Foco" na sidebar ---- */
button.nav-link{ width:100%; background:none; border:none; cursor:pointer; font:inherit; text-align:left; }
.nav-focus .nav-focus-time{ margin-left:auto; font-size:var(--fs-small); font-variant-numeric:tabular-nums; color:var(--ink-faint); }
.nav-focus.is-live .nav-focus-time{ color:var(--accent); font-weight:600; }

/* ---- Painel Foco (Pomodoro + sons ambientes) ---- */
.focus-panel{
  position:fixed; left:248px; bottom:var(--sp-4); z-index:60; width:300px;
  background:var(--paper-raised); border:1px solid var(--hairline-strong); border-radius:var(--radius-md);
  box-shadow:var(--shadow-modal); padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-4);
  animation:modal-in var(--dur-base) var(--ease);
}
.focus-panel[hidden]{ display:none; }
.fp-head{ display:flex; align-items:center; justify-content:space-between; }
.fp-head h3{ margin:0; }
.fp-pomo{ display:flex; flex-direction:column; gap:var(--sp-3); align-items:stretch; }
.fp-modes{ display:flex; }
.fp-modes button{ flex:1; }
.fp-time{ font-family:var(--font-display); font-size:3rem; font-weight:600; text-align:center; line-height:1; font-variant-numeric:tabular-nums; }
.focus-panel.is-break .fp-time{ color:var(--plum); }
.focus-panel.is-break .progress-fill{ background:var(--plum); }
.fp-actions{ display:flex; gap:var(--sp-2); }
.fp-actions .btn-primary{ flex:1; }
.fp-today{ font-size:var(--fs-micro); color:var(--ink-faint); text-align:center; }
.fp-amb{ display:flex; flex-direction:column; gap:var(--sp-2); padding-top:var(--sp-3); border-top:1px solid var(--hairline); }
.fp-title{ font-size:var(--fs-small); color:var(--ink-soft); font-weight:600; }
.fp-amb-list{ display:flex; flex-direction:column; gap:6px; }
.fp-amb-btn{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
  background:var(--paper); border:1px solid var(--hairline); border-radius:var(--radius-sm);
  padding:8px 10px; color:var(--ink-soft); font-size:var(--fs-small);
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.fp-amb-btn:hover{ background:var(--paper-sunken); color:var(--ink); }
.fp-amb-btn span{ flex:1; }
.fp-amb-btn i{ display:flex; font-style:normal; }
.fp-amb-btn.is-playing{ background:var(--accent-soft); border-color:var(--accent); color:var(--ink); font-weight:600; }
.fp-vol{ display:flex; align-items:center; gap:10px; margin:var(--sp-1) 0 0; color:var(--ink-faint); }

/* ---- Controles: slider e switch ---- */
input[type=range]{ padding:0; border:none; background:transparent; accent-color:var(--accent); height:20px; cursor:pointer; }
input[type=range]:focus{ box-shadow:none; }
.switch{ position:relative; display:inline-block; width:40px; height:23px; margin:0; flex:none; }
.switch input{ position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; opacity:0; cursor:pointer; z-index:1; }
.switch span{ position:absolute; inset:0; background:var(--hairline-strong); border-radius:99px; transition:background var(--dur-fast) var(--ease); }
.switch span::after{
  content:''; position:absolute; left:3px; top:3px; width:17px; height:17px; border-radius:50%;
  background:var(--paper-raised); transition:transform var(--dur-fast) var(--ease);
}
.switch input:checked + span{ background:var(--accent); }
.switch input:checked + span::after{ transform:translateX(17px); }
.switch input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---- Configurações ---- */
.settings-group{ background:var(--paper-raised); border:1px solid var(--hairline); border-radius:var(--radius-md); padding:var(--sp-5); margin-bottom:var(--sp-5); }
.settings-group h2{ font-size:var(--fs-h3); margin-bottom:var(--sp-2); }
.setting-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5); padding:var(--sp-3) 0; border-top:1px solid var(--hairline); }
.setting-row:first-of-type{ border-top:none; }
.setting-name{ font-weight:600; }
.setting-desc{ font-size:var(--fs-small); color:var(--ink-faint); }
.setting-control{ display:flex; align-items:center; gap:var(--sp-3); flex:none; }
.setting-control input[type=range]{ width:160px; }
.setting-value{ width:42px; text-align:right; font-size:var(--fs-small); color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.setting-numbers label{ display:flex; flex-direction:column; gap:4px; margin:0; font-size:var(--fs-micro); }
.setting-numbers input{ width:68px; padding:6px 8px; }

@media (max-width: 880px){
  .focus-panel{ left:var(--sp-3); right:var(--sp-3); bottom:var(--sp-3); width:auto; }
  .setting-row{ flex-direction:column; align-items:flex-start; gap:var(--sp-2); }
}

/* ---- Flashcards: campos gramaticais e botões de avaliação ---- */
.fc-details{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--sp-3); }
.fc-details[hidden]{ display:none; }
.fc-details .modal-field:nth-child(odd):last-child{ grid-column:1 / -1; }
.flash-details{ margin:var(--sp-2) 0 0; display:flex; flex-wrap:wrap; gap:4px var(--sp-4); font-size:var(--fs-small); }
.flash-details div{ display:flex; gap:6px; }
.flash-details dt{ color:var(--ink-faint); }
.flash-details dt::after{ content:':'; }
.flash-details dd{ margin:0; font-weight:600; }
.flip-face.back .flash-details{ justify-content:center; margin-top:var(--sp-3); }
.rate-row{ display:flex; gap:var(--sp-3); }
.rate-btn{ flex-direction:column; gap:2px; min-width:96px; }
.rate-btn small{ font-weight:400; opacity:.75; font-size:var(--fs-micro); }
@media (max-width: 520px){ .fc-details{ grid-template-columns:1fr; } }

/* ---- Painéis recolhíveis ---- */
.collapsible-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-3); }
.collapsible.is-collapsed .collapsible-head{ margin-bottom:0; }
.collapse-toggle{
  display:flex; align-items:center; gap:8px; background:none; border:none; cursor:pointer;
  padding:4px 6px 4px 0; margin-left:-2px; color:var(--ink); font:inherit; border-radius:var(--radius-sm);
}
.collapse-toggle h2, .collapse-toggle h3{ margin:0; font-size:var(--fs-h3); }
.collapse-toggle:hover{ color:var(--accent); }
.collapse-chevron{ display:flex; color:var(--ink-faint); transition:transform var(--dur-fast) var(--ease); }
.collapsible.is-collapsed .collapse-chevron{ transform:rotate(-90deg); }
.collapsible-body[hidden]{ display:none; }
.collapsible-actions{ display:flex; gap:var(--sp-2); }

.shadow-min{ margin-left:auto; }
.shadow-min svg{ transition:transform var(--dur-fast) var(--ease); }
.shadow-bar.is-min .shadow-min svg{ transform:rotate(180deg); }
.shadow-bar.is-min .shadow-opts, .shadow-bar.is-min .shadow-hint, .shadow-bar.is-min .seg{ display:none; }
.shadow-count{ margin-right:0; }
.reader-tools{ display:flex; align-items:center; gap:var(--sp-2); }

/* ---- Flashcards: barra de filtros ---- */
.fc-bar{ display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap; margin-bottom:var(--sp-3); }
.fc-bar input#fc-search{ flex:1 1 220px; max-width:360px; }
.fc-bar select{ width:auto; }
.fc-toggle{ gap:6px; }
.fc-toggle.is-on, .fc-toggle.is-open{ color:var(--accent); }
.fc-toggle.is-on{ background:var(--accent-soft); }
.fc-count{
  display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px;
  border-radius:99px; background:var(--accent); color:var(--accent-ink); font-size:var(--fs-micro); font-weight:600;
}
.fc-count[hidden]{ display:none; }
.fc-chev{ display:flex; transition:transform var(--dur-fast) var(--ease); }
.fc-toggle.is-open .fc-chev{ transform:rotate(180deg); }
.fc-more{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--sp-3) var(--sp-5);
  padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-3);
  border:1px solid var(--hairline); border-radius:var(--radius-md); background:var(--paper-raised);
}
.fc-more[hidden]{ display:none; }
.fc-field{ display:flex; flex-direction:column; gap:4px; margin:0; font-size:var(--fs-micro); color:var(--ink-faint); }
.fc-field select{ width:auto; max-width:240px; }
.fc-clear{ margin-left:auto; }
.fc-clear[hidden]{ display:none; }
#fc-list{ margin-top:var(--sp-4); }
.chip-row{ display:flex; gap:6px; flex-wrap:wrap; }
.chip, .chip-check{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; font:inherit; font-size:var(--fs-small);
  padding:5px 12px; border-radius:99px; border:1px solid var(--hairline-strong);
  background:var(--paper-raised); color:var(--ink-soft);
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.chip:hover, .chip-check:hover{ background:var(--paper-sunken); }
.chip small, .chip-check small{ opacity:.7; font-variant-numeric:tabular-nums; }
.chip.active{ background:var(--accent-soft); border-color:var(--accent); color:var(--ink); font-weight:600; }
.chip.level-hard.active{ background:var(--danger-soft); border-color:var(--danger); color:var(--danger); }
.chip-check input{ width:auto; margin:0; padding:0; }
.level-badge{
  font:inherit; font-size:var(--fs-micro); font-weight:600; cursor:pointer; padding:2px 9px; border-radius:99px;
  border:1px solid transparent; background:var(--paper-sunken); color:var(--ink-soft);
}
.level-badge.level-easy{ background:var(--accent-soft); color:var(--accent); }
.level-badge.level-hard{ background:var(--danger-soft); color:var(--danger); }
.level-badge:hover{ border-color:currentColor; }
.review-nav{ display:flex; gap:var(--sp-3); }

/* ---- Diário ---- */
.journal-layout{ display:grid; grid-template-columns:300px 1fr; gap:var(--sp-6); align-items:start; }
.journal-list-pane{ display:flex; flex-direction:column; gap:var(--sp-3); position:sticky; top:var(--sp-4); max-height:calc(100vh - 2*var(--sp-4)); }
#jr-list{ overflow-y:auto; display:flex; flex-direction:column; gap:var(--sp-4); padding-right:4px; }
.journal-day{ display:flex; flex-direction:column; gap:4px; }
.journal-day-label{ font-size:var(--fs-micro); font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); padding:0 2px; }
.journal-item{
  display:flex; flex-direction:column; gap:2px; text-align:left; cursor:pointer; width:100%;
  background:var(--paper-raised); border:1px solid var(--hairline); border-radius:var(--radius-sm);
  padding:9px 11px; font:inherit; color:var(--ink);
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.journal-item:hover{ background:var(--paper-sunken); }
.journal-item.active{ border-color:var(--accent); background:var(--accent-soft); }
.journal-item-title{ font-weight:600; font-size:var(--fs-small); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.journal-item-prev{ font-size:var(--fs-micro); color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.journal-item-src{ font-size:var(--fs-micro); color:var(--accent); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.journal-empty{ color:var(--ink-faint); font-size:var(--fs-small); padding:var(--sp-3) 2px; line-height:1.5; }
.journal-editor{
  background:var(--paper-raised); border:1px solid var(--hairline); border-radius:var(--radius-md);
  padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-3); min-height:420px;
}
.journal-meta{ display:flex; gap:var(--sp-4); flex-wrap:wrap; align-items:flex-end; }
.journal-meta label{ display:flex; flex-direction:column; gap:4px; font-size:var(--fs-micro); color:var(--ink-faint); margin:0; }
.journal-meta input[type=date]{ width:auto; }
.journal-src{ flex:1; min-width:160px; }
.journal-title{ font-family:var(--font-display); font-size:1.4rem; font-weight:600; border:none; border-bottom:1px solid var(--hairline); border-radius:0; padding:6px 2px; background:transparent; }
.journal-title:focus{ box-shadow:none; border-bottom-color:var(--accent); }
.journal-body{ font-family:var(--font-reading); font-size:var(--fs-reading); line-height:1.75; flex:1; min-height:260px; resize:vertical; border:none; background:transparent; padding:6px 2px; }
.journal-body:focus{ box-shadow:none; }
.journal-foot{ display:flex; align-items:center; gap:var(--sp-4); border-top:1px solid var(--hairline); padding-top:var(--sp-3); }
.journal-foot .btn{ margin-left:auto; }
.journal-placeholder{ margin:auto; text-align:center; color:var(--ink-faint); display:flex; flex-direction:column; align-items:center; gap:var(--sp-2); }
@media (max-width: 880px){
  .journal-layout{ grid-template-columns:1fr; }
  .journal-list-pane{ position:static; max-height:260px; }
}

/* ============================================================ v6.0 — dados, avisos, lixeira */

/* Avisos persistentes (banners) */
.banner-host{ display:flex; flex-direction:column; gap:var(--sp-2); margin-bottom:var(--sp-4); }
.banner-host:empty{ display:none; }
.banner{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-4); border-radius:var(--radius-md);
  border:1px solid var(--hairline-strong); background:var(--paper-raised);
  font-size:var(--fs-small); color:var(--ink);
}
.banner-text{ flex:1 1 320px; line-height:1.45; }
.banner-actions{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.banner-info{ background:var(--accent-soft); border-color:transparent; }
.banner-warn{ background:var(--plum-soft); border-color:transparent; }
.banner-danger{ background:var(--danger-soft); border-color:var(--danger); }
.banner-x{ background:none; border:none; cursor:pointer; color:var(--ink-soft); font-size:20px; line-height:1; padding:2px 6px; border-radius:var(--radius-sm); }
.banner-x:hover{ color:var(--ink); background:var(--paper-sunken); }

/* Modal com várias saídas empilhadas */
.modal-actions-stack{ flex-direction:column; align-items:stretch; }
.modal-actions-stack .btn{ justify-content:center; }

/* Configurações → Dados e backup */
.setting-row.ds-block{ align-items:flex-start; }
.setting-row select{ width:auto; min-width:140px; }
.ds-counts{ margin-top:var(--sp-2); color:var(--ink); }
.ds-meter{ height:8px; border-radius:var(--radius-pill); background:var(--paper-sunken); overflow:hidden; margin-top:var(--sp-3); }
.ds-meter > div{ height:100%; background:var(--accent); border-radius:var(--radius-pill); }
.ds-meter-label{ font-size:var(--fs-micro); margin-top:var(--sp-1); color:var(--ink-soft); }
.ds-ok{ margin-top:var(--sp-3); color:var(--accent); }
.ds-warn{ margin-top:var(--sp-3); color:var(--ink); background:var(--plum-soft); padding:var(--sp-2) var(--sp-3); border-radius:var(--radius-sm); display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.ds-list{ margin-top:var(--sp-3); display:flex; flex-direction:column; }
.ds-item{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-2) 0; border-top:1px solid var(--hairline); flex-wrap:wrap; }
.ds-item:first-child{ border-top:none; }
.ds-item-main{ min-width:0; flex:1 1 220px; }
.ds-item-title{ font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ds-item-sub{ font-size:var(--fs-micro); color:var(--ink-soft); }
.ds-item-actions{ display:flex; gap:var(--sp-1); }
.ds-empty{ font-size:var(--fs-small); color:var(--ink-faint); }

/* Cartão cuja fonte foi removida */
.flash-source-link.is-gone{ color:var(--ink-faint); cursor:default; }

/* ============================================================ v6.1 — revisão */

/* Artigo colorido (o texto do artigo sempre aparece; a cor só reforça). Cores com contraste nos dois temas. */
:root{ --g-der:#2b62a8; --g-die:#b8365a; --g-das:#2a7d52; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --g-der:#86b6ee; --g-die:#f291a8; --g-das:#84d3a6; } }
:root[data-theme="dark"]{ --g-der:#86b6ee; --g-die:#f291a8; --g-das:#84d3a6; }
.art{ font-weight:600; }
:root[data-gender-colors="on"] .art-der{ color:var(--g-der); }
:root[data-gender-colors="on"] .art-die{ color:var(--g-die); }
:root[data-gender-colors="on"] .art-das{ color:var(--g-das); }

/* Cabeçalho com dois botões */
.view-head-actions{ display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center; }
.view-head-actions[hidden]{ display:none; }

/* Linha "hoje" */
.today-panel{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:2px var(--sp-3);
  margin-bottom:var(--sp-4); padding:var(--sp-1) 0 var(--sp-1) var(--sp-3);
  border-left:3px solid var(--hairline-strong);
}
.today-panel.has-queue{ border-left-color:var(--accent); }
.today-title{ font-weight:600; color:var(--ink); }
.today-detail{ font-size:var(--fs-small); color:var(--ink-soft); }
.today-deferred{ color:var(--ink); }

/* Selos */
.badge-leech{ background:var(--danger-soft); color:var(--danger); }
.flash-card.is-archived .fc-main{ opacity:.65; }
.flash-context-extra{ font-size:var(--fs-small); opacity:.85; }
.speak-mini, .speak-btn{ background:none; border:none; cursor:pointer; color:var(--ink-soft); padding:2px 4px; border-radius:var(--radius-sm); vertical-align:middle; display:inline-flex; align-items:center; }
.speak-mini:hover, .speak-btn:hover{ color:var(--accent); background:var(--paper-sunken); }
.speak-btn svg{ width:20px; height:20px; }
.fav-btn.on{ color:var(--accent); }

/* Sessão de revisão */
.review-progress{ width:100%; max-width:560px; height:4px; border-radius:var(--radius-pill); background:var(--paper-sunken); overflow:hidden; }
.review-progress > div{ height:100%; background:var(--accent); transition:width var(--dur-base) var(--ease); }
.review-meta{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; justify-content:center; }
.flip-card[role="button"]{ cursor:pointer; }
.flip-card:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:var(--radius-md); }
.rate-btn.grade-again{ color:var(--danger); }
#rv-grades{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); }
#rv-grades[hidden]{ display:none; }
.review-nav{ flex-wrap:wrap; justify-content:center; }
kbd{
  font-family:var(--font-ui); font-size:var(--fs-micro); padding:1px 6px; margin-left:6px;
  border:1px solid var(--hairline-strong); border-bottom-width:2px; border-radius:var(--radius-sm);
  background:var(--paper-raised); color:var(--ink-soft);
}
.btn-primary kbd{ background:transparent; color:inherit; border-color:currentColor; opacity:.8; }

/* Resumo */
.review-summary{ max-width:640px; margin:0 auto; padding:var(--sp-6) 0; display:flex; flex-direction:column; gap:var(--sp-4); }
.summary-tiles{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-3); }
.summary-tile{ padding:var(--sp-4); border-radius:var(--radius-md); background:var(--paper-sunken); display:flex; flex-direction:column; gap:2px; }
.summary-tile b{ font-family:var(--font-display); font-size:1.5rem; }
.summary-tile span{ font-size:var(--fs-small); color:var(--ink-soft); }
.summary-split{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.grade-pill{ padding:4px 12px; border-radius:var(--radius-pill); background:var(--paper-sunken); font-size:var(--fs-small); }
.grade-pill.grade-again{ background:var(--danger-soft); color:var(--danger); }
.grade-pill.grade-good, .grade-pill.grade-easy{ background:var(--accent-soft); color:var(--accent); }
.summary-list{ display:flex; flex-direction:column; }
.summary-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-2) 0; border-top:1px solid var(--hairline); }
.summary-row:first-child{ border-top:none; }
.summary-front{ font-family:var(--font-display); font-weight:600; }
.summary-back{ color:var(--ink-soft); margin-left:var(--sp-2); }
.summary-actions{ display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-2); }