/* hidden sempre vence, mesmo contra display:flex dos overlays */
[hidden] { display: none !important; }

:root {
  --bg: #0f0f12;
  --panel: #16161a;
  --panel2: #202028;
  --border: #2a2a32;
  --border2: #3a3a44;
  --input-bg: #16161a;
  --accent: #cc0000;
  --text: #eee;
  --muted: #888;
  --active: #1ed760;
  --note: #ffd54f;
}
[data-theme="light"] {
  --bg: #f5f5f7;
  --panel: #ffffff;
  --panel2: #f0f0f3;
  --border: #e0e0e4;
  --border2: #d0d0d6;
  --input-bg: #f7f7f9;
  --accent: #b00000;
  --text: #1a1a1a;
  --muted: #6a6a72;
  --active: #1db954;
  --note: #b8860b;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden; /* mobile: garante nenhuma rolagem horizontal acidental */
}
/* Top bar estilo YouTube: full width, logo à esquerda, busca central pequena, área de usuário à direita */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(6px);
}
.topbar-left { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.topbar .logo { width: 30px; height: 30px; border-radius: 8px; }
.topbar-title { font-size: 16px; font-weight: 700; white-space: nowrap; }
/* centro: busca + bandeiras + música, agrupados e centralizados */
.topbar-center {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  min-width: 0;
}
.topbar-search {
  flex: 1 1 auto;
  max-width: 520px;
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: 999px;
  padding: 2px 2px 2px 12px;
  height: 38px;
}
.topbar-search .yt-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  opacity: 0.85;
}
.topbar-search input {
  flex: 1 1 auto;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  outline: none;
  min-width: 0;
}
.topbar-search-btn {
  flex: 0 0 auto;
  width: 44px; height: 44px; /* TAREFA 19: alvo de toque mínimo de 44px */
  border-radius: 999px;
  border: none;
  background: var(--panel2);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.topbar-search-btn:hover { color: var(--text); background: var(--border2); }
.topbar-center .icon-btn.active { color: #fff; background: var(--accent); border-color: var(--accent); }
.topbar-center .icon-btn.active:hover { filter: brightness(1.1); }
.topbar-right { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.topbar-right .connect-row { gap: 8px; }
.topbar-right .brand-btn { padding: 7px 12px; font-size: 12px; }
.topbar-right .yt-account { gap: 6px; }
.icon-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: var(--panel2); border-color: var(--border2); }
.sub { color: var(--muted); font-size: 12px; text-align: center; margin: 6px auto 0; max-width: 720px; padding: 0 16px; }

/* Seletor de idiomas minimalista (só bandeira quando fechado) */
.lang-picker { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; }
.lang-flag {
  width: 34px; height: 30px;
  border: 1px solid var(--border2);
  background: var(--panel);
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.lang-flag:hover { border-color: var(--accent); }
.lang-flag .flag { font-size: 18px; line-height: 1; }
.lang-arrow { color: var(--muted); display: inline-flex; }
.lang-arrow .icon { width: 16px; height: 16px; }

/* Dropdown de idiomas (busca + lista flag+nome) */
.lang-dropdown {
  position: fixed;
  z-index: 75;
  width: 240px;
  background: var(--panel);
  border: 1px solid var(--border2);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.lang-dropdown[hidden] { display: none !important; }
#lang-dd-search {
  width: 100%;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
}
.lang-dd-list { max-height: 280px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.lang-dd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border: none; background: transparent;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  border-radius: 8px;
  text-align: left;
}
.lang-dd-item:hover, .lang-dd-item.focused { background: var(--panel2); }
.lang-dd-item.selected { color: var(--accent); font-weight: 600; }
.lang-dd-item .flag { font-size: 18px; flex: 0 0 auto; }
.lang-dd-item .lname { flex: 1 1 auto; }
.lang-dd-empty { color: var(--muted); font-size: 12px; padding: 12px; text-align: center; }

@media (max-width: 900px) {
  .topbar { gap: 10px; padding: 10px 12px; }
  .topbar-title { display: none; }
  .topbar-right .yt-name { display: none; }
  .topbar-search { max-width: none; min-width: 0; width: 100%; flex: 1 1 0; }
  .topbar-search input { min-width: 0; width: 100%; }
}
@media (max-width: 760px) {
  .lang-picker { display: none; } /* no mobile, seletor de idioma/música fica na landing (FAB +) */
  #music-toggle-btn { display: none; }
}
@media (max-width: 640px) {
  .topbar-right .connect-row { gap: 6px; }
  .topbar-right .brand-btn { padding: 6px 8px; }
  .topbar-right .brand-btn .brand-icon { width: 16px; height: 16px; }
}

/* Drawer do menu (hambúrguer direito) */
.menu-drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: min(300px, 86vw);
  background: var(--panel);
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 40px rgba(0,0,0,0.45);
  z-index: 80;
  transform: translateX(105%);
  transition: transform 0.25s ease;
  display: flex; flex-direction: column;
  padding: 14px;
}
.menu-drawer.open { transform: translateX(0); }
.menu-drawer[hidden] { display: none !important; }
.menu-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px; font-weight: 700; margin-bottom: 12px;
}
.menu-list { display: flex; flex-direction: column; gap: 4px; }
.menu-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: none; background: transparent;
  color: var(--text);
  font-size: 14px; cursor: pointer;
  border-radius: 8px;
  text-align: left;
}
.menu-item:hover { background: var(--panel2); }
.menu-ico { color: var(--muted); display: inline-flex; }
.menu-badge {
  margin-left: auto;
  background: var(--accent);
  color: #fff;
  font-size: 11px; font-weight: 700;
  border-radius: 999px;
  padding: 1px 8px;
}
.menu-badge[hidden] { display: none !important; }
.menu-sep { height: 1px; background: var(--border); margin: 8px 4px; }
.menu-scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 79;
}
.menu-scrim[hidden] { display: none !important; }

/* Favoritos */
.fav-filter { font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.lib-star {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  font-size: 16px;
  background: transparent; border: none; cursor: pointer;
  color: var(--muted);
}
.lib-star.on { color: #f5c518; }
.lib-star:hover { color: #f5c518; }

/* Conectar Google / Spotify — lado a lado com ícones reais */
.connect-row {
  margin-top: 14px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;
}
.yt-connect, .yt-account {
  display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px;
}
.yt-account { gap: 10px; }
.yt-avatar { width: 26px; height: 26px; border-radius: 50%; }
.yt-name { color: var(--text); font-weight: 600; }
.yt-account .link-btn { font-size: 11px; }

/* Chip de conta / login no topbar */
.account-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 6px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel);
  color: var(--text); font-size: 13px; font-weight: 600;
  cursor: pointer; max-width: 180px;
}
.account-chip:hover { border-color: var(--accent); }
.account-chip.ghost { background: none; color: var(--muted); }
.account-chip-avatar { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.account-chip-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.brand-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent;
  transition: filter .15s ease, transform .08s ease;
}
.brand-btn:hover { filter: brightness(1.05); }
.brand-btn:active { transform: scale(0.97); }
.brand-icon { width: 18px; height: 18px; flex: 0 0 auto; }
.google-btn { background: #fff; color: #1f1f1f; border-color: #dadce0; }
.google-btn:hover { background: #f8f9fa; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.spotify-btn { background: #191414; color: #fff; border-color: #1DB954; }
.spotify-btn:hover { background: #000; box-shadow: 0 0 0 2px rgba(29,185,84,0.4); }

main {
  max-width: 1920px;
  margin: 0 auto;
  padding: 18px 22px 60px;
}

/* Form principal: barra de URL em destaque + opções compactas embaixo */
.url-form { display: flex; flex-direction: column; gap: 10px; max-width: 760px; margin: 0 auto; }
/* base para inputs/selects/buttons fora da barra de URL */
input, select, button {
  font-family: inherit;
  font-size: 14px;
}
.url-row {
  display: flex;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--border2);
  border-radius: 999px;
  padding: 6px 6px 6px 18px;
  align-items: center;
}
.url-row:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(204,0,0,0.15); }
.url-row #url {
  flex: 1; min-width: 200px;
  border: none; background: transparent; padding: 10px 0;
}
.url-row #go {
  background: var(--accent);
  border: none;
  font-weight: 700;
  cursor: pointer;
  padding: 11px 24px;
  border-radius: 999px;
  white-space: nowrap;
}
.url-row #go:hover { filter: brightness(1.1); }
.url-row #go:disabled { opacity: 0.5; cursor: not-allowed; }
.url-row .stop-btn {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  padding: 11px 18px;
  border-radius: 999px;
}
.url-row .stop-btn:hover { background: var(--accent); color: #fff; }
.url-options {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 13px;
}
.url-options select {
  padding: 7px 10px;
  font-size: 13px;
  background: var(--panel);
  border: 1px solid var(--border2);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
}
.url-options select:hover { border-color: var(--accent); }
.arrow { color: var(--muted); font-size: 14px; }
.music-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.music-toggle input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); }
.music-toggle:has(input:checked) { color: var(--text); border-color: var(--border2); background: var(--panel); }

/* ---------- Toast (única notificação, canto superior direito) ---------- */
.toast {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 380px;
  max-width: calc(100vw - 24px);
  padding: 14px 38px 14px 14px;
  border-radius: 10px;
  background: var(--panel); /* segue o tema: antes era #16161a fixo e no tema claro o texto sumia */
  color: var(--text);
  border: 1px solid var(--border2);
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  font-size: 13px;
  line-height: 1.35;
  animation: toast-in 0.18s ease-out;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.toast[hidden] { display: none !important; }
.toast-ico { display: inline-flex; flex: 0 0 auto; }
.toast.working .toast-ico { color: #ff8a8a; }
.toast.done .toast-ico { color: #6ef0a0; }
.toast.error .toast-ico { color: #ff5b5b; }
.toast.idle .toast-ico { color: var(--muted); }
.toast.error { border-color: #5a2424; background: #241010; }
.toast-text { flex: 1 1 auto; }
.toast-link {
  flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--accent);
  text-decoration: none; padding: 3px 8px; border-radius: 6px;
  border: 1px solid rgba(204, 0, 0, 0.35); background: rgba(204, 0, 0, 0.08);
  white-space: nowrap; transition: background 0.12s, filter 0.12s;
}
.toast-link:hover { background: rgba(204, 0, 0, 0.18); filter: brightness(1.1); }
.toast-bar-wrap {
  flex: 0 0 100%;
  height: 5px;
  margin-top: 8px;
  background: #2a2a32;
  border-radius: 4px;
  overflow: hidden;
}
.toast-bar-wrap[hidden] { display: none; }
.toast-bar {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 0.3s;
}
.toast-bar.indeterminate {
  width: 40% !important;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 200% 100%;
  animation: dl-sweep 1.1s linear infinite;
  transition: none;
}
@keyframes dl-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.toast-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 2px;
  display: inline-flex;
  flex: 0 0 auto;
}
.toast-close:hover { color: var(--text); }

/* ---------- Sync group (no player-bar, ao lado de timestamp/velocidade) ---------- */
.sync-group {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--panel2);
  padding: 3px 6px;
  border-radius: 8px;
  border: 1px solid var(--border2);
}
.sync-group .offset-val {
  min-width: 42px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: #ffd54f;
  font-weight: 600;
  font-size: 12px;
}
.sync-group .sync-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.0404em; margin-right: 2px; white-space: nowrap; }
.link-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  text-decoration: underline;
  padding: 4px 6px;
}
.link-btn:hover { color: var(--text); }

/* ---------- Workspace: vídeo + transcrição (lyrics) + sidebar (biblioteca/yt/baralho) ---------- */
.workspace {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 64px 1fr; /* sidebar esquerda estreita + área principal */
  gap: 14px;
  align-items: start;
}
@media (max-width: 1100px) {
  .workspace { grid-template-columns: 56px 1fr; gap: 10px; }
}
@media (max-width: 860px) {
  .workspace { grid-template-columns: 1fr; }
  .nav-sidebar { flex-direction: row !important; height: auto !important; width: 100% !important; border-radius: 10px; overflow-x: auto; }
  .transcript-col { height: auto !important; }
}
/* mobile: bottom nav assume a navegação; esconde a sidebar horizontal */
@media (max-width: 640px) {
  .nav-sidebar { display: none !important; }
  .workspace { grid-template-columns: 1fr; gap: 0; }
}

.video-col { min-width: 0; }

/* Sidebar de navegação esquerda (estilo YouTube) */
.nav-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  position: sticky; top: 14px;
  width: 64px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  height: calc(100vh - 28px);
}
/* janela baixa: os itens rolam dentro da sidebar em vez de sumir pra fora dela */
.nav-sidebar { overflow-y: auto; scrollbar-width: none; }
.nav-sidebar::-webkit-scrollbar { display: none; }
.nav-sidebar > * { flex-shrink: 0; }
.nav-logo { width: 36px; height: 36px; margin-bottom: 6px; flex: 0 0 auto; }
.nav-logo img { width: 100%; height: 100%; border-radius: 9px; display: block; }
.nav-item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  width: 52px; padding: 8px 4px;
  border: none; background: transparent; cursor: pointer;
  color: var(--muted); border-radius: 10px;
  transition: background .15s ease, color .15s ease;
}
.nav-item:hover { background: var(--panel2); color: var(--text); }
.nav-item.active { color: var(--accent); }
.nav-item.active::before {
  content: ""; position: absolute; left: -6px; top: 10px; bottom: 10px; width: 3px;
  background: var(--accent); border-radius: 0 3px 3px 0;
}
.nav-ico { display: inline-flex; }
.nav-ico .icon { width: 22px; height: 22px; }
.nav-label { font-size: 10px; line-height: 1.1; text-align: center; }
.nav-item.active .nav-label { font-weight: 600; }
.nav-sep { height: 1px; width: 32px; background: var(--border); margin: 6px 0; }
.nav-spacer { flex: 1; }
.nav-icon-only { width: 52px; height: 44px; font-size: 16px; font-weight: 700; }

/* Estado "trancado" (antes da 1ª ação): só landing + Config + Account visíveis no nav.
   Os itens escondidos são setados via .hidden no JS; aqui limpamos os divisores
   entre grupos que ficariam soltos e o spacer pra colar Config/Account no topo. */
body[data-locked="1"] .nav-sep { display: none; }
body[data-locked="1"] .nav-spacer { flex: 0; }
body[data-locked="1"] .nav-sidebar { justify-content: flex-start; }
.nav-item.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* ---------- Bottom nav (só <640px) ---------- */
.bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 80;
  height: 60px; padding: 0 6px 6px;
  background: var(--panel); border-top: 1px solid var(--border);
  align-items: flex-start; justify-content: space-around;
}
.bottom-nav .bn-item, .bottom-nav .bn-fab {
  background: none; border: none; color: var(--muted); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 10px; font-weight: 600; padding: 6px 4px;
  min-height: 44px; /* TAREFA 15: alvo de toque mínimo de 44px */
  justify-content: center; position: relative;
}
.bottom-nav .bn-ico { width: 22px; height: 22px; display: inline-flex; }
.bottom-nav .bn-item.active { color: var(--text); font-weight: 800; }
/* TAREFA 15: ativo marcado por forma E texto (não só cor) — pílula acima do ícone */
.bottom-nav .bn-item.active::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 18px; height: 3px; border-radius: 999px; background: var(--accent);
}
.bottom-nav .bn-item:disabled, .bottom-nav .bn-item.disabled { opacity: 0.35; pointer-events: none; }
.bottom-nav .bn-fab {
  margin-top: -18px; width: 50px; height: 50px; border-radius: 50%;
  background: var(--accent); color: #fff; justify-content: center; gap: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.bottom-nav .bn-fab .icon { width: 26px; height: 26px; }
.bottom-nav .bn-fab:active { transform: scale(0.94); }
@media (max-width: 640px) {
  .bottom-nav { display: flex; }
  /* evita conteúdo ficar escondido atrás da bottom nav */
  .main-area { padding-bottom: 66px; }
}

/* Área principal */
.main-area { min-width: 0; display: flex; flex-direction: column; }
/* video | transcrição | biblioteca — vídeo ganha mais peso pra ficar maior */
.player-view { display: grid; grid-template-columns: 2.2fr 0.8fr 1fr; gap: 16px; align-items: start; transition: padding-right 0.28s ease; }
/* sidebar de nota aberta → reserva espaço à direita e empurra o vídeo pra esquerda */
.player-view.note-open { padding-right: min(380px, 42vw); }
@media (max-width: 1600px) { .player-view { grid-template-columns: 2fr 0.78fr 0.95fr; gap: 14px; } }
@media (max-width: 1440px) { .player-view { grid-template-columns: 1.8fr 0.72fr 0.9fr; gap: 14px; } }
@media (max-width: 1280px) { .player-view { grid-template-columns: 1.6fr 0.7fr 0.85fr; gap: 12px; } }
/* ≤1024: 2 col (vídeo + transcrição); biblioteca fica acessível via nav Biblioteca.
   Importante: NÃO esconder a biblioteca no modo .no-video (ela é o conteúdo principal lá). */
@media (max-width: 1024px) {
  .player-view:not(.no-video) { grid-template-columns: 1fr 0.8fr; }
  .player-view:not(.no-video) .library-col { display: none; }
}
/* <640: 1 col (mobile) */
@media (max-width: 640px) {
  .player-view { grid-template-columns: 1fr; }
  .transcript-col { height: auto !important; }
}
/* telas pequenas: não empurra (a nota sobrepõe) pra não esmagar o vídeo */
@media (max-width: 760px) { .player-view.note-open { padding-right: 0; } }
.player-view[hidden] { display: none; }

/* estado sem vídeo: só a biblioteca, centralizada.
   align-items: stretch é obrigatório: a regra base .player-view usa
   align-items: start (pro modo grid), e sem isso o flex column herda
   "start" e a coluna da biblioteca encolhe pra largura do conteúdo. */
.player-view.no-video { display: flex; flex-direction: column; align-items: stretch; max-width: 1700px; margin: 0 auto; width: 100%; height: calc(100vh - 90px); min-height: 320px; }
.player-view.no-video .video-col,
.player-view.no-video .transcript-col { display: none; }
.player-view.no-video .library-col { max-height: none; min-height: 0; flex: 1 1 auto; width: 100%; }
.player-view.no-video .library { max-height: none; flex: 1 1 auto; min-height: 0; }
@media (max-width: 640px) {
  .player-view.no-video { height: calc(100vh - 150px); }
}
.library-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.view-panel { display: flex; flex-direction: column; min-height: 0; max-width: 1700px; margin: 0 auto; width: 100%; }
.view-panel[hidden] { display: none; }

/* ---------- Landing (primeira utilização) ---------- */
.landing { justify-content: center; }
.landing-inner {
  width: min(720px, 94vw); margin: 0 auto; padding: 40px 0 56px;
  display: flex; flex-direction: column; align-items: center; gap: 26px;
}
.landing-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.landing-logo { width: 56px; height: 56px; }
.landing-title { font-size: clamp(22px, 4vw, 30px); font-weight: 800; margin: 0; letter-spacing: -0.01em; }
.landing-sub { color: var(--muted); font-size: 14px; line-height: 1.6; max-width: 560px; margin: 0; }

.landing-search-form { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.landing-search-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--border2); border-radius: 14px;
  padding: 8px 8px 8px 14px;
}
.landing-search-row:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(80,140,255,0.18); }
.landing-search-ico { color: var(--muted); display: inline-flex; }
.landing-search-ico .icon { width: 20px; height: 20px; }
#landing-search {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  font-size: 15px; color: var(--text); padding: 8px 4px;
}
#landing-search::placeholder { color: var(--muted); }
.landing-go {
  background: var(--accent); color: #fff; border: none; border-radius: 10px;
  padding: 10px 18px; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.landing-go:hover { filter: brightness(1.08); }
.landing-go:active { transform: scale(0.97); }

.landing-controls { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.landing-lang { display: inline-flex; align-items: center; gap: 6px; }
.landing-lang-arrow { color: var(--muted); display: inline-flex; }
.landing-lang-arrow .icon { width: 16px; height: 16px; }
.landing-music {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--panel2); border: 1px solid var(--border2); color: var(--muted);
  border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 600;
}
.landing-music .icon { width: 16px; height: 16px; }
.landing-music.active { color: var(--accent); border-color: var(--accent); background: rgba(80,140,255,0.10); }

.landing-tiles {
  width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.landing-tile {
  display: flex; align-items: flex-start; gap: 12px; text-align: left;
  background: var(--panel); border: 1px solid var(--border2); border-radius: 14px;
  padding: 16px; cursor: pointer; transition: border-color 0.15s, transform 0.1s, background 0.15s;
}
.landing-tile:hover { border-color: var(--accent); background: var(--panel2); }
.landing-tile:active { transform: scale(0.99); }
.tile-ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.tile-ico .icon { width: 22px; height: 22px; }
.tile-ico-yt { background: rgba(255,0,0,0.12); color: #ff3b30; }
.tile-ico-search { background: rgba(80,140,255,0.14); color: var(--accent); }
.tile-ico-sp { background: rgba(29,185,84,0.16); color: #1db954; }
.tile-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tile-title { font-size: 14px; font-weight: 700; }
.tile-sub { font-size: 12px; color: var(--muted); line-height: 1.45; }

@media (max-width: 720px) {
  .landing-tiles { grid-template-columns: 1fr; }
  .landing-inner { padding: 28px 0 40px; gap: 22px; }
  .landing-go { padding: 10px 14px; }
}
@media (max-width: 480px) {
  .landing-search-row { padding: 6px 6px 6px 12px; }
  #landing-search { font-size: 14px; }
  .landing-go { padding: 9px 12px; font-size: 13px; }
}

/* CTA hero "Revisar baralho" no topo da view Treinar */
.treinar-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(230,0,0,0.16), rgba(230,0,0,0.04));
  border: 1px solid rgba(230,0,0,0.35);
  border-radius: 14px;
}
.treinar-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  padding: 14px 22px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(230,0,0,0.28);
  transition: transform 0.12s ease, filter 0.12s ease;
}
.treinar-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.treinar-cta:active { transform: translateY(0); }
.treinar-cta .tc-ico { display: inline-flex; }
.treinar-cta .tc-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  background: rgba(0,0,0,0.28);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
}
.treinar-hero-sub { color: var(--muted); font-size: 13px; }

.view-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 4px 4px 12px;
}
.view-head h2 { margin: 0; font-size: 17px; }
/* header do Treinar: título à esquerda, ferramentas à direita, botão de revisar no canto */
.treinar-head { justify-content: space-between; gap: 16px; width: 100%; }
.treinar-head h2 { display: inline-flex; align-items: center; gap: 8px; }
.trn-tools { gap: 10px; margin-left: auto; }
#treinar-review-btn { margin-left: auto; }
/* Cabeçalho da coluna Biblioteca (estilo YouTube: título + chips) */
.lib-head { padding: 4px 4px 0; flex: 0 0 auto; }
.lib-head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 2px 2px; }
.lib-head-toggles { display: inline-flex; align-items: center; gap: 10px; padding: 2px 2px 4px; flex-wrap: wrap; }
.lib-head-actions { display: inline-flex; align-items: center; gap: 8px; }
.lib-search-wrap {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel2); border: 1px solid var(--border2); border-radius: 10px;
  padding: 8px 12px; width: 100%; margin: 0 0 8px;
}
.lib-search-wrap:focus-within { border-color: var(--accent); }
.lib-search-ico { color: var(--muted); display: inline-flex; }
.lib-search-ico .icon { width: 16px; height: 16px; }
#lib-search { background: transparent; border: none; outline: none; color: var(--text); font-size: 13px; width: 100%; }
#lib-search::placeholder { color: var(--muted); }
.lib-import-btn { flex: 0 0 auto; }
.lib-import-btn .icon { width: 18px; height: 18px; }
.lib-head h2 { margin: 0; font-size: 16px; }
.chip-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--muted); cursor: pointer; user-select: none;
  padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border2);
}
.chip-toggle input { width: 13px; height: 13px; accent-color: var(--accent); cursor: pointer; }
.chip-toggle:has(input:checked) { color: var(--text); border-color: var(--accent); }
/* Título do vídeo embaixo do player (estilo YouTube) */
.video-meta { padding: 12px 2px 6px; display: flex; align-items: flex-start; gap: 10px; }
.vm-title-wrap { flex: 1 1 auto; min-width: 0; }
.video-meta #video-title {
  margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.video-sub { color: var(--muted); font-size: 12px; margin-top: 4px; }
.vm-actions { display: flex; gap: 6px; flex: 0 0 auto; padding-top: 2px; }
.vm-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  background: var(--panel2); border: 1px solid var(--border2); color: var(--text);
  text-decoration: none; transition: border-color 0.12s ease, background 0.12s ease;
}
.vm-icon-btn:hover { border-color: var(--accent); background: var(--panel); }
.vm-icon-btn .icon { width: 18px; height: 18px; }
.view-intro { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0 0 14px; padding: 0 4px; background: none; border: none; border-radius: 0; }
.view-intro b { color: var(--text); }
.section-title { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 18px 0 8px; }
/* Chips de filtro estilo YouTube: pílulas individuais, scroll horizontal */
.filter-buttons {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 8px;
  scrollbar-width: thin;
}
.filter-buttons::-webkit-scrollbar { height: 4px; }
/* linha de filtros: origem (Tudo/YouTube/Spotify) + filtro de idioma */
.lib-filters-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 2px 2px 8px; }
.lib-filters-row .filter-buttons { padding: 2px 0; }
.lib-lang-filter .lang-filter-dd { top: calc(100% + 4px); left: auto; right: 0; }
.filter-btn {
  flex: 0 0 auto;
  border: 1px solid var(--border2);
  background: var(--panel2);
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.filter-btn:hover { background: var(--border2); }
.filter-btn.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.library-grid { display: flex; flex-direction: column; gap: 8px; }
/* estado sem vídeo (biblioteca em tela cheia): grid multi-coluna de cards verticais.
   auto-fit colapsa trilhas vazias → os cards preenchem toda a largura disponível
   (sem buraco negro à direita quando há poucos itens). minmax(220px,1fr) mantém
   os cards confortáveis; max-width no .lib-card evita cards gigantes em telas huge. */
.player-view.no-video .library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  padding: 4px;
  justify-items: center;
}
.player-view.no-video .lib-card { flex-direction: column; gap: 0; padding: 0; background: var(--panel); border: 1px solid var(--border); max-width: 360px; width: 100%; }
.player-view.no-video .lib-card:hover { background: var(--panel2); }
.player-view.no-video .lib-thumb { width: 100%; aspect-ratio: 16/9; border-radius: 8px 8px 0 0; }
.player-view.no-video .lib-meta { padding: 8px 10px 10px; gap: 4px; }
/* estrela de favorito sobre a thumbnail (canto sup. direito) no card vertical */
.player-view.no-video .lib-card { position: relative; }
.player-view.no-video .lib-star {
  position: absolute; top: 6px; right: 6px;
  width: 30px; height: 30px; font-size: 18px;
  background: rgba(0,0,0,0.45); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
}
.player-view.no-video .lib-star.on { color: #f5c518; }

#player-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}
#player { width: 100%; height: 100%; }

/* Empty state do player (sem vídeo carregado) */
.player-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; padding: 24px;
  background: radial-gradient(circle at 50% 40%, rgba(204,0,0,0.10), transparent 70%), #000;
  color: var(--text);
  z-index: 5;
}
.player-empty .pe-ico { width: 56px; height: 56px; color: var(--accent); opacity: 0.85; }
.player-empty .pe-ico svg { width: 56px; height: 56px; }
.player-empty .pe-title { font-size: 18px; font-weight: 700; }
.player-empty .pe-sub { font-size: 13px; color: var(--muted); max-width: 320px; line-height: 1.5; }

/* Tela cheia: o player-wrap ocupa a tela toda e a legenda/letra (#subs) continua visível por cima */
#player-wrap:fullscreen, #player-wrap:-webkit-full-screen {
  width: 100vw; height: 100vh; aspect-ratio: auto;
  border-radius: 0;
  display: flex; align-items: center; justify-content: center;
}
#player-wrap:fullscreen #player,
#player-wrap:-webkit-full-screen #player { width: 100%; height: 100%; }
#player-wrap:fullscreen .subs, #player-wrap:-webkit-full-screen .subs { bottom: 7%; }
#player-wrap:fullscreen .subs .orig, #player-wrap:-webkit-full-screen .subs .orig { font-size: 34px; }
#player-wrap:fullscreen .subs .tr, #player-wrap:-webkit-full-screen .subs .tr { font-size: 28px; }
#player-wrap:fullscreen .subs .trn, #player-wrap:-webkit-full-screen .subs .trn { font-size: 24px; }
#player-wrap:fullscreen .unmute-overlay, #player-wrap:-webkit-full-screen .unmute-overlay { bottom: 16px; right: 16px; }

/* Overlay "ativar som" — aparece quando o vídeo tá mudo (autoplay bloqueado) */
.unmute-overlay {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(0,0,0,0.72);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: transform 0.12s ease, background 0.12s ease;
}
.unmute-overlay:hover { background: rgba(230,0,0,0.85); transform: translateY(-1px); }
.unmute-overlay[hidden] { display: none !important; }

.subs {
  position: absolute;
  left: 0; right: 0; bottom: 8%;
  text-align: center;
  pointer-events: none;
  z-index: 5;
}
.subs .seg {
  display: inline-block;
  background: rgba(0,0,0,0.72);
  border-radius: 8px;
  padding: 8px 14px;
  max-width: 86%;
}
.subs .orig { color: #fff; font-weight: 600; font-size: 20px; line-height: 1.25; }
.subs .trn { color: #c9d4e8; font-style: italic; font-size: 15px; line-height: 1.2; margin-top: 1px; }
.subs .tr { color: #ffd54f; font-size: 18px; line-height: 1.25; margin-top: 2px; }

/* Barra de player (seek ±2s, play/pause, tempo) */
.player-bar {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* Grupo de transporte (voltar/play/avançar) num pill, estilo YouTube */
.transport {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--panel);
  border: 1px solid var(--border2);
  border-radius: 999px;
  padding: 4px;
}
.transport .icon-btn {
  border: none;
  background: transparent;
  padding: 6px 10px;
}
.transport .icon-btn:hover { background: var(--panel2); filter: none; }
.transport .play-btn {
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  padding: 8px 10px;
}
.transport .play-btn:hover { filter: brightness(1.1); background: var(--accent); }
.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid #333;
  background: var(--panel);
  color: var(--text);
}
.icon-btn:hover { filter: brightness(1.15); border-color: #555; }
.icon-btn .btn-text { font-weight: 600; }
.time-display {
  margin-left: auto;
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.icon { display: inline-block; vertical-align: middle; }

/* ---------- Transcrição (karaoke vertical) — altura = vídeo + controles ---------- */
.transcript-col {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;          /* a altura é setada via JS pra bater com a coluna do vídeo */
}
.tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.tab {
  flex: 1;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }
.tab-panel { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.tab-panel[hidden] { display: none; }
.transcript-head {
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;   /* TAREFA 19: ferramentas quebram em 360px em vez de transbordar */
  min-width: 0;
}
.transcript-head .hint {
  color: var(--muted);
  font-weight: 400;
  font-size: 11px;
}
.transcript-head .trn-title { font-size: 13px; }
/* toggle Transcrição / Letra */
.trn-source-toggle {
  display: inline-flex;
  gap: 2px;
  background: var(--panel2);
  padding: 3px;
  border-radius: 9px;
}
.trn-source-toggle[hidden] { display: none !important; }
.trn-source-toggle .src-btn {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 7px;
  cursor: pointer;
}
.trn-source-toggle .src-btn.active {
  background: var(--accent);
  color: #fff;
}
.transcript {
  overflow-y: auto;
  padding: 18px 14px 40px;
  scroll-behavior: smooth;
  flex: 1 1 auto;
  min-height: 0;
}

/* Biblioteca (lista de vídeos em cache, estilo YouTube) */
.library {
  overflow-y: auto;
  padding: 10px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 78vh; /* limita a altura; o resto rola aqui dentro */
}
.lib-card {
  display: flex;
  width: 100%;
  gap: 10px;
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
  align-items: flex-start;
}
.lib-card:hover { background: var(--panel2); }
.lib-card.active { background: rgba(204,0,0,0.15); }

/* Downloads em andamento na biblioteca */
.lib-downloads { display:flex; flex-direction:column; gap:8px; padding:6px 4px 10px; flex:0 0 auto; }
.lib-dl-item { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:8px 10px; }
.lib-dl-info { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.lib-dl-spinner { width:12px; height:12px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation: pmSpin 0.7s linear infinite; flex:0 0 auto; }
.lib-dl-title { font-size:12px; font-weight:600; color:var(--text); flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lib-dl-stage { font-size:11px; color:var(--muted); white-space:nowrap; }
.dl-cancel { background:none; border:none; color:var(--muted); cursor:pointer; font-size:13px; padding:0 4px; min-width:28px; min-height:28px; }
.dl-cancel:hover { color:#dc2626; }
.lib-dl-bar { width:100%; height:5px; background:var(--panel2); border-radius:5px; overflow:hidden; }
.lib-dl-fill { height:100%; background:var(--accent); border-radius:5px; transition:width 0.4s ease; }
/* cabeçalho "Em curso" acima da lista de transcrições em andamento */
.lib-dl-head { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; padding:2px 4px 0; }
/* aviso "nenhuma transcrição em curso" (feedback ao clicar Ver em curso sem jobs) */
.lib-dl-empty { font-size:13px; color:var(--muted); padding:10px 12px; background:var(--panel); border:1px solid var(--border); border-radius:10px; }
/* destaque breve ao clicar em "Ver em curso" — chama atenção pra seção */
.lib-downloads.flash { animation: libDlFlash 1.1s ease; }
@keyframes libDlFlash {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  100% { box-shadow: 0 0 0 10px transparent; }
}

/* cards de idioma na biblioteca (mesmo estilo do dicionário, mas um pouco menores) */
.lib-lang-cards { padding:4px 4px 8px; }
.lib-lang-cards .dlc-card { min-width:80px; padding:10px 8px; }
.lib-lang-cards .dlc-card .flag-img { width:28px; height:22px; }
.lib-thumb {
  width: 120px;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  object-fit: cover;
  background: #000;
  flex: 0 0 auto;
}
.lib-meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.lib-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lib-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: auto;
}
.lib-empty {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 40px 16px;
  line-height: 1.7;
}
.lib-empty-ico { display: block; margin: 0 auto 12px; color: var(--border2); }
.lib-empty-ico .icon { width: 38px; height: 38px; }
.lib-empty-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.lib-empty-sub { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* Empty state do YouTube (tela cheia quando desconectado) */
.yt-empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 60px 20px; min-height: 60vh; gap: 6px;
}
.yt-empty-state[hidden] { display: none !important; }
.yt-empty-ico { color: var(--border2); margin-bottom: 8px; }
.yt-empty-ico .icon { width: 46px; height: 46px; }
.yt-empty-state h3 { margin: 0; font-size: 20px; font-weight: 700; }
.yt-empty-sub { color: var(--muted); font-size: 14px; max-width: 420px; line-height: 1.6; margin: 0 0 18px; }
.yt-empty-state .yt-connect { margin-top: 6px; }
.yt-empty-state .brand-btn { padding: 11px 22px; font-size: 14px; }

/* Busca do YouTube */
.yt-search-bar {
  display: flex;
  gap: 6px;
  padding: 10px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.yt-search-bar input { flex: 1; padding: 8px 10px; font-size: 13px; }
.yt-search-bar .icon-btn { padding: 8px 10px; }

/* Seção dentro da aba YouTube (playlists / curtidas / resultados) */
.yt-section { padding: 10px; }
.yt-section + .yt-section { border-top: 1px solid var(--border); }
.yt-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
}
.yt-section-head .link-btn { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* Player bar: spacer + speed */
.player-bar .spacer { flex: 1; }
.player-bar .speed {
  padding: 5px 8px;
  font-size: 13px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
}
.icon-btn.active { color: var(--accent); border-color: var(--accent); background: rgba(99,102,241,0.12); }

/* A-B repeat */
.ab-group { display: inline-flex; gap: 3px; }
.ab-btn {
  min-width: 26px;
  padding: 4px 7px;
  font-size: 12px;
  font-weight: 700;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
}
.ab-btn:hover { color: var(--text); }
.ab-btn.set { color: var(--accent); border-color: var(--accent); background: rgba(99,102,241,0.12); }
.ab-btn .ab-t { font-weight: 400; font-size: 10px; margin-left: 3px; opacity: 0.8; }

/* Flashcards */
.cards-list { display: grid; gap: 8px; padding: 12px; }
.card-item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.card-item .cw { font-weight: 600; font-size: 14px; }
.card-item .cn { color: var(--muted); font-size: 12px; margin-top: 4px; }
.card-item .csrc { color: #5a6378; font-size: 11px; margin-top: 6px; }

.cards-review {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(8,8,10,0.96);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 56px 20px 28px;
  overflow: auto;
}
/* centra verticalmente quando cabe; quando overflow, fica no topo e rola */
.cards-review > .fc-main { margin: auto 0; }
.cards-review[hidden] { display: none !important; }
/* nota aberta dentro da revisão → flashcard e nota-card lado a lado (a nota empurra o card pra esquerda) */
.cards-review.with-note {
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 22px;
}
.cards-review.with-note .fc-main { flex: 0 1 auto; max-width: 560px; }
.note-col.as-card {
  position: static;
  transform: none;
  width: 380px;
  max-width: 380px;
  height: auto;
  max-height: 82vh;
  z-index: auto;
  box-shadow: none;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  padding: 22px;
  animation: toast-in 0.18s ease-out;
}
.cards-review.with-note .note-col.as-card { flex: 0 0 380px; }
@media (max-width: 980px) {
  /* telas estreitas: volta pra coluna (nota embaixo do card) pra não espremer */
  .cards-review.with-note { flex-direction: column; align-items: center; }
  .note-col.as-card { width: 100%; max-width: 560px; }
}
.flashcard {
  width: 100%;
  max-width: 560px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 22px;
  text-align: center;
  cursor: pointer;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  transition: border-color 0.15s, transform 0.18s ease, box-shadow 0.18s ease;
  touch-action: pan-y; /* TAREFA 16: permite scroll vertical, captura horizontal pro gesto */
  will-change: transform;
}
.flashcard:hover { border-color: var(--accent); }
/* TAREFA 16: feedback visual durante o arrasto do flashcard */
.flashcard.swiping { transition: none; }
.swipe-good { border-color: #34d399 !important; box-shadow: 0 0 0 3px rgba(52,211,153,0.25) !important; }
.swipe-again { border-color: #f87171 !important; box-shadow: 0 0 0 3px rgba(248,113,113,0.25) !important; }
.fc-swipe-hint {
  position: absolute; top: 50%; transform: translateY(-50%);
  padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: var(--panel); border: 1px solid var(--border2);
  opacity: 0; transition: opacity 0.12s; pointer-events: none; white-space: nowrap; z-index: 2;
}
.fc-swipe-hint.left { left: 14px; color: #f87171; }
.fc-swipe-hint.right { right: 14px; color: #34d399; }
.swipe-good .fc-swipe-hint.right,
.swipe-again .fc-swipe-hint.left { opacity: 1; }
.flashcard { position: relative; }
/* wrapper do stack do flashcard (topbar fica fora; flashcard/nav/actions dentro) */
.fc-main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; max-width: 560px; }
.flashcard .fc-word { font-size: 26px; font-weight: 700; }
.flashcard .fc-note { font-size: 15px; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; line-height: 1.5; }
.flashcard .fc-hint { font-size: 11px; color: #5a6378; }
.fc-nav { display: flex; gap: 8px; align-items: center; justify-content: center; width: 100%; max-width: 560px; }
.fc-nav .fc-prog { font-size: 12px; color: var(--muted); }
.fc-nav button { padding: 6px 14px; font-size: 13px; }
/* barra de progresso da meta diária no topo do card */
.fc-progress { position: relative; width: 100%; margin-bottom: 10px; }
.fc-progress-bar { width: 100%; height: 6px; background: var(--panel); border-radius: 6px; overflow: hidden; }
.fc-progress-fill { height: 100%; background: var(--accent); transition: width 0.3s; }
.fc-progress-fill.met { background: #34d399; }
.fc-progress-label { position: absolute; right: 6px; top: -8px; font-size: 10px; font-weight: 700; color: var(--muted); background: var(--panel2); padding: 0 5px; border-radius: 5px; line-height: 1.4; }
/* lápis de editar no canto superior direito dentro do card */
.fc-edit-btn { position: absolute; top: 10px; right: 10px; z-index: 4; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--border); background: var(--panel2); color: var(--muted); cursor: pointer; }
.fc-edit-btn:hover { color: var(--text); border-color: var(--accent); }
/* botão "+" de ver gramática avançada, abaixo do exemplo dentro do card */
.fc-adv-toggle { display: inline-flex; align-self: center; align-items: center; justify-content: center; margin: 6px auto 2px; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: var(--panel2); color: var(--muted); cursor: pointer; transition: transform 0.12s, border-color 0.12s, color 0.12s; }
.fc-adv-toggle:hover { color: var(--text); border-color: var(--accent); transform: scale(1.08); }
.fc-adv-toggle.active { color: var(--accent); border-color: var(--accent); background: rgba(204,0,0,0.12); }
.fc-yes { color: #34d399; border-color: #2a4a3a; background: rgba(52,211,153,0.08); }
.fc-no  { color: #fbbf24; border-color: #4a3a2a; background: rgba(251,191,36,0.08); }
.fc-yes:hover { background: rgba(52,211,153,0.18); }
.fc-no:hover  { background: rgba(251,191,36,0.18); }

/* Baralho: badge de due, snapshot, frase, 4 botões SRS */
.due-badge {
  font-size: 11px;
  color: var(--accent);
  background: rgba(99,102,241,0.12);
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 6px;
}
.card-item { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.card-item:hover { border-color: var(--border2); }
.card-snap {
  width: 96px; height: 54px; border-radius: 4px; object-fit: cover; flex: 0 0 auto;
  background: var(--panel2);
}
.card-body { flex: 1; min-width: 0; }
.card-due { font-size: 10px; color: #5a6378; font-weight: 400; margin-left: 6px; }
.csent { color: #9fb2c9; font-size: 12px; font-style: italic; margin-top: 4px; }
.csent-lyric { color: #e6b3c9; border-left: 2px solid rgba(230,0,90,0.5); padding-left: 8px; margin-top: 3px; }
/* transliteração cirílico→latim dentro do cartão (lista + flashcard) */
.csent-trn, .fc-sent-trn { color: #7fb0c9; font-size: 11px; font-style: italic; margin-top: 2px; opacity: 0.85; }
/* tradução (pt) da frase/letra mostrada ao virar o cartão */
.fc-sent-tr { color: #c9d4e6; font-size: 12px; margin-top: 3px; }
.fc-sent-tr:empty { display: none; }
.fc-sent-tr-lyric { color: #e6b3c9; opacity: 0.95; }
.fc-snap {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  margin: 0 auto 8px;
  background: var(--panel2);
  display: block;
  align-self: center;
}
/* container do "vídeo" com botão play/pause embutido */
.fc-media {
  position: relative;
  align-self: center;
  width: 100%;
  max-width: 340px;
  margin-bottom: 8px;
}
.fc-media .fc-snap { margin-bottom: 0; }
.fc-clip {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  background: var(--panel2);
}
.fc-media-play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.6);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.1s;
}
.fc-media-play:hover { background: rgba(204,0,0,0.85); }
.fc-media-play:active { transform: translate(-50%, -50%) scale(0.94); }
.fc-media-play .icon { width: 26px; height: 26px; }
/* estado replay (áudio acabou) — pulsa pra indicar "toque de novo" */
.fc-media-play.replay { background: rgba(204,0,0,0.85); animation: fc-replay-pulse 1.6s ease-in-out infinite; }
.fc-media-play.replay:hover { background: var(--accent); }
@keyframes fc-replay-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.08); }
}
/* topbar da revisão: botões minimizar (↙) e fechar (X) no canto superior direito */
.fc-topbar {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 9001;
  display: inline-flex;
  gap: 8px;
}
.fc-ico-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  background: rgba(22,22,26,0.8);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fc-ico-btn:hover { color: #fff; background: var(--accent); border-color: var(--accent); }
/* modo reduzido (inline): a revisão flui dentro da view Treinar em vez de overlay */
.cards-review.minimized {
  position: relative;
  background: transparent;
  backdrop-filter: none;
  padding: 0;
  justify-content: flex-start;
}
.cards-review.minimized .fc-topbar {
  position: absolute;
  top: 8px;
  right: 8px;
}
.cards-review.minimized .flashcard,
.cards-review.minimized .fc-nav,
.cards-review.minimized .fc-actions,
.cards-review.minimized .fc-type-wrap {
  max-width: 100%;
}
.fc-sent { color: #9fb2c9; font-size: 13px; font-style: italic; }
.fc-sent-lyric { color: #e6b3c9; border-left: 2px solid rgba(230,0,90,0.5); padding-left: 8px; margin-top: 4px; }

/* gramática avançada (declinação/conjugação completa) */
.fc-advanced {
  width: 100%; max-width: 560px; margin: 12px auto 0;
  background: var(--panel2); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; text-align: left;
  animation: fc-adv-in 0.18s ease-out;
}
@keyframes fc-adv-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.fc-adv-title { font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.fc-adv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fc-adv-table tr { border-bottom: 1px solid var(--border); }
.fc-adv-table tr:last-child { border-bottom: none; }
.fc-adv-label { color: var(--muted); padding: 5px 8px 5px 0; white-space: nowrap; width: 40%; }
.fc-adv-form { color: var(--text); padding: 5px 0; font-weight: 600; }
.fc-adv-note { margin-top: 8px; font-size: 12px; color: var(--muted); line-height: 1.4; }
.fc-adv-loading, .fc-adv-empty { font-size: 12px; color: var(--muted); text-align: center; padding: 6px 0; }
.fc-adv-btn {
  background: transparent; border: 1px solid var(--border2); color: var(--muted);
  border-radius: 7px; padding: 4px 10px; font-size: 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; transition: all 0.15s;
}
.fc-adv-btn:hover { color: var(--text); border-color: var(--accent); }
.fc-adv-btn.active { color: var(--accent); border-color: var(--accent); background: rgba(255,213,79,0.08); }
.fc-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; max-width: 560px; }
.fc-actions button {
  padding: 10px 4px; font-size: 13px; font-weight: 600; border-radius: 8px;
  cursor: pointer; border: 1px solid; min-height: 44px; /* TAREFA 16: toque mínimo */
}
.fc-actions button:disabled { opacity: 0.4; cursor: not-allowed; }
.fc-again { color: #f87171; border-color: #4a2a2a; background: rgba(248,113,113,0.08); }
.fc-hard  { color: #fbbf24; border-color: #4a3a2a; background: rgba(251,191,36,0.08); }
.fc-good   { color: #34d399; border-color: #2a4a3a; background: rgba(52,211,153,0.08); }
.fc-easy   { color: #60a5fa; border-color: #2a3a4a; background: rgba(96,165,250,0.08); }
.fc-again:not(:disabled):hover { background: rgba(248,113,113,0.18); }
.fc-hard:not(:disabled):hover  { background: rgba(251,191,36,0.18); }
.fc-good:not(:disabled):hover   { background: rgba(52,211,153,0.18); }
.fc-easy:not(:disabled):hover   { background: rgba(96,165,250,0.18); }
/* TAREFA 16: gesto de arrasto desligado quando o usuário pede menos movimento */
@media (prefers-reduced-motion: reduce) {
  .flashcard { transition: border-color 0.15s !important; will-change: auto; }
  .flashcard.swiping { transform: none !important; }
  .fc-swipe-hint { transition: none; }
}

/* Estatísticas do baralho */
.cards-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid var(--border);
}
.cards-stats .stat { display: inline-block; }
.stats-grid, .cards-stats > .stat { display: inline-block; }
.cards-stats > .stat { width: auto; }
/* grid de stats em linha */
.cards-stats {
  grid-template-columns: none;
}
/* layout 2 colunas: KPIs à esquerda, gráficos à direita */
.stats-layout {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 1.4fr;
  gap: 14px;
  align-items: start;
}
.stats-left { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.stats-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  min-width: 0;
}
.block-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 2px 0 4px;
}
.stats-left .stats-row { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 820px) {
  .stats-layout { grid-template-columns: 1fr; }
}
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.stats-row .stat { text-align: center; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 10px 6px; }
.stat-v { font-size: 20px; font-weight: 700; }
.stat-l { font-size: 11px; color: var(--text); margin-top: 3px; font-weight: 600; }
.stat-d { font-size: 10px; color: var(--muted); margin-top: 2px; line-height: 1.25; }
.stat-hot .stat-v { color: var(--accent); }

/* Meta diária */
.goal-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.goal-ring-cell { flex: 0 0 auto; }
.goal-meta { flex: 1 1 auto; min-width: 0; }
.goal-meta-label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.goal-bar { flex: 1; height: 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.goal-fill { height: 100%; background: var(--accent); transition: width 0.3s; }
.goal-fill.met { background: #34d399; }
.goal-text { font-size: 12px; color: var(--muted); white-space: nowrap; margin-top: 4px; }
/* banner "vencidos" dentro das estatísticas */
.due-banner {
  display: block; width: 100%; box-sizing: border-box;
  margin: 0 0 12px; padding: 12px 14px;
  appearance: none; -webkit-appearance: none;
  background: linear-gradient(135deg, rgba(230,0,0,0.16), rgba(230,0,0,0.04));
  border: 1px solid rgba(230,0,0,0.35); border-radius: 10px;
  color: var(--text); font-size: 14px; font-weight: 600; text-align: left;
  cursor: pointer;
}
.due-banner:hover { filter: brightness(1.06); }
.due-banner.done { cursor: default; background: var(--panel2); border-color: var(--border); color: var(--muted); font-weight: 500; }
/* header do Treinar: botão revisar compacto pra caber */
.treinar-head .treinar-cta { padding: 10px 18px; font-size: 14px; border-radius: 12px; }
.treinar-head .treinar-cta .tc-count { min-width: 22px; height: 22px; font-size: 12px; }
/* animação suave no botão de revisar quando há cartões vencidos */
@keyframes tcPulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(230,0,0,0.28); transform: translateY(0); }
  50% { box-shadow: 0 8px 28px rgba(230,0,0,0.45); transform: translateY(-1px); }
}
.treinar-cta.has-due { animation: tcPulse 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .treinar-cta.has-due { animation: none; } }

/* Gráfico de revisões por dia */
.chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 70px;
  padding-top: 4px;
  min-width: 0;          /* TAREFA 15: não estoura o pai em 360px */
  overflow-x: auto;      /* se tiver muitas barras, rola só o gráfico, não a página */
  -webkit-overflow-scrolling: touch;
}
.chart-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.chart-bar { width: 100%; max-width: 14px; background: var(--border2); border-radius: 2px 2px 0 0; min-height: 2px; }
.chart-bar.over { background: var(--accent); }
.chart-l { font-size: 8px; color: #5a6378; margin-top: 3px; transform: rotate(0); white-space: nowrap; }

/* Gráfico de aprendizado acumulado (linha) */
.chart-total { font-size: 11px; font-weight: 400; color: #5a6378; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.learned-chart { width: 100%; margin-top: 4px; }
.learned-chart .lc-canvas-wrap { width: 100%; height: 72px; }
.learned-chart .lc-axis { display: flex; justify-content: space-between; font-size: 9px; color: #5a6378; margin-top: 2px; }
/* container do gráfico de barras (Chart.js) */
.chart-wrap { width: 100%; height: 90px; }

/* Medalhas / conquistas */
.medals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 2px;
}
.medal {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 56px;
  text-align: center;
  filter: grayscale(1);
  opacity: 0.45;
}
.medal.earned { filter: none; opacity: 1; }
.medal .medal-l { font-size: 9px; color: var(--muted); margin-top: 2px; line-height: 1.1; }
.medal.earned .medal-l { color: var(--text); }

/* Player de áudio no flashcard */
.fc-audio { width: 100%; margin-top: 8px; height: 32px; }
.fc-play {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px;
  padding: 8px 16px;
  background: var(--panel2);
  border: 1px solid var(--border2);
  color: var(--text);
  font-size: 13px; font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
}
.fc-play:hover { border-color: var(--accent); color: var(--accent); }
.fc-play.playing { background: var(--accent); color: #fff; border-color: var(--accent); }
.fc-play .icon { width: 16px; height: 16px; }
.fc-eye { font-size: 14px; }
.fc-eye.active { color: var(--accent); border-color: var(--accent); background: rgba(99,102,241,0.12); }
.fc-type-wrap { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; width: 100%; max-width: 560px; }
.fc-type-wrap textarea {
  width: 100%; padding: 8px; font-size: 13px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 6px; color: var(--text); resize: vertical;
}

/* Ferramentas editar/excluir na lista de cartões */
.card-tools {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: flex-start;
}
.card-tool {
  width: 22px; height: 22px;
  padding: 0;
  font-size: 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--muted);
  cursor: pointer;
}
.card-tool:hover { color: var(--text); background: var(--panel2); }
.card-tool[data-act="del"]:hover { color: #f87171; }
/* botão de ouvir o exemplo */
.card-play { color: var(--accent); }
.card-play:hover { color: var(--accent); background: rgba(204,0,0,0.12); }
.card-play.playing { color: #fff; background: var(--accent); border-color: var(--accent); }
.card-play .icon { width: 14px; height: 14px; }

/* Tags do baralho */
.cards-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.tag-chip {
  padding: 3px 9px;
  font-size: 11px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--muted);
  cursor: pointer;
}
.tag-chip:hover { color: var(--text); }
.tag-chip.active { color: var(--accent); border-color: var(--accent); background: rgba(99,102,241,0.12); }
.tag-n { opacity: 0.6; margin-left: 2px; }
.flag-img { display: inline-block; vertical-align: -3px; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0,0,0,0.18); }
.card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.mini-tag {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(99,102,241,0.12);
  color: var(--accent);
}

/* Botão de prévia do Spotify */
.sp-preview {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  background: #1db954;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sp-preview:hover { background: #1ed760; }

/* Help de atalhos */
.shortcuts-help {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
}
.shortcuts-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  width: min(420px, 92vw); padding: 18px;
}
.shortcuts-head {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; margin-bottom: 14px;
}
.shortcuts-list { display: flex; flex-direction: column; gap: 10px; }
.shortcuts-list > div { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.shortcuts-list span { margin-left: 8px; color: var(--muted); }
kbd {
  background: var(--panel2); border: 1px solid var(--border2); border-bottom-width: 2px;
  border-radius: 5px; padding: 2px 7px; font-size: 11px; font-family: ui-monospace, monospace;
  color: var(--text);
}

/* Wizard de onboarding */
.onboarding {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
}
.onboarding.dim { background: rgba(0,0,0,0.0.7); animation: fade-in 0.2s ease; }
/* mobile: fullscreen, sem spotlight, card central e largo */
.onboarding.mobile { background: rgba(0,0,0,0.78); }
.onboarding.mobile .wizard-card {
  position: static; width: 100%; max-width: none; height: 100%; max-height: none;
  border-radius: 0; border: none;
  justify-content: center;
}
.onboarding.mobile .wizard-body { padding: 24px 20px; overflow-y: auto; max-width: 640px; margin: 0 auto; width: 100%; }
.onboarding.mobile .wizard-actions { padding: 12px 20px 20px; max-width: 640px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.onboarding.mobile .wizard-top, .onboarding.mobile .wizard-progressbar { max-width: 640px; margin: 0 auto; box-sizing: border-box; padding: 0 20px; }
/* feedback positivo dentro do wizard (não é o toast global) */
.wiz-feedback {
  max-width: 640px; margin: 4px auto 0; padding: 0 20px; box-sizing: border-box;
  text-align: center; font-size: 13px; font-weight: 600; color: #22c55e;
  opacity: 0; transition: opacity .25s ease;
}
.wiz-feedback.show { opacity: 1; }
.wiz-feedback[hidden] { display: none; }
/* skip desabilitado até escolher o idioma nativo */
.link-btn.disabled, .link-btn:disabled { opacity: 0.4; cursor: not-allowed; text-decoration: none; }
.wizard-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  width: min(480px, 94vw); max-height: 90vh; padding: 0;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: pop-in 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  overflow: hidden;
  position: absolute;
}

/* Modal de confirmação reutilizável */
.confirm-modal {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(8,8,10,0.78); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: toast-in 0.15s ease-out;
}
.confirm-modal[hidden] { display: none !important; }
/* confirmation dialog reutilizavel (#confirm-modal) sempre acima dos outros
   modais (p.ex. paste-modal) — sem isso ela abre atras do modal que a chamou. */
#confirm-modal { z-index: 9700; }
.confirm-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  width: min(440px, 94vw); padding: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: pop-in 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.confirm-body { display: flex; gap: 14px; align-items: flex-start; }
/* modal de gerenciar cartão: muitos campos => scroll interno em telas pequenas */
#card-manage-modal .confirm-card { max-height: 88vh; overflow-y: auto; }
#card-manage-modal .confirm-body { width: 100%; }
.confirm-ico { flex: 0 0 auto; color: #fbbf24; width: 28px; height: 28px; }
.confirm-title { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.confirm-msg { font-size: 14px; color: var(--muted); line-height: 1.5; }
.confirm-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
/* spotlight: 4 faixas escuras que deixam um "buraco" no alvo + anel pulsante.
   Tudo anima junto (transition) → o buraco morfa suavemente entre passos. */
.tour-mask { position: fixed; inset: 0; z-index: 70; pointer-events: none; }
.t-strip {
  position: fixed; background: rgba(0,0,0,0.64);
  transition: top .38s cubic-bezier(.4,0,.2,1), left .38s cubic-bezier(.4,0,.2,1),
              width .38s cubic-bezier(.4,0,.2,1), height .38s cubic-bezier(.4,0,.2,1),
              opacity .25s ease;
}
.tour-ring {
  position: fixed; z-index: 71; pointer-events: none;
  border: 2px solid var(--accent); border-radius: 12px;
  box-shadow: 0 0 0 6px rgba(255,255,255,0.06), 0 8px 30px rgba(0,0,0,0.4);
  transition: top .38s cubic-bezier(.4,0,.2,1), left .38s cubic-bezier(.4,0,.2,1),
              width .38s cubic-bezier(.4,0,.2,1), height .38s cubic-bezier(.4,0,.2,1),
              opacity .25s ease;
  animation: tour-pulse 1.8s ease-in-out infinite;
}
@keyframes tour-pulse {
  0%,100% { box-shadow: 0 0 0 6px rgba(255,255,255,0.06), 0 8px 30px rgba(0,0,0,0.4); }
  50%     { box-shadow: 0 0 0 10px rgba(255,255,255,0.10), 0 8px 30px rgba(0,0,0,0.4); }
}
/* seta do tooltip apontando pro alvo */
.tour-arrow {
  position: fixed; z-index: 71; pointer-events: none; width: 14px; height: 14px;
  background: var(--panel); border: 1px solid var(--border);
  transition: top .38s cubic-bezier(.4,0,.2,1), left .38s cubic-bezier(.4,0,.2,1), opacity .25s ease;
}
.wizard-top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px 0;
}
.wizard-counter { font-size: 12px; color: var(--muted); font-weight: 600; }
.wizard-progressbar {
  height: 4px; background: var(--panel2); margin: 10px 0 0;
}
.wizard-progressbar #wizard-fill {
  height: 100%; background: var(--accent); width: 0;
  transition: width 0.3s ease;
}
.wizard-icon {
  font-size: 44px; text-align: center; padding: 18px 0 6px;
}
.wizard-body {
  padding: 4px 22px 18px; overflow-y: auto; font-size: 14px; line-height: 1.6;
  flex: 1;
}
.wizard-body h3 { margin: 0 0 10px; font-size: 18px; }
.wizard-body .tip { background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 10px 0; }
.wizard-body kbd { margin: 0 2px; }
.wiz-in { animation: wiz-slide 0.28s ease; }
@keyframes wiz-slide { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: scale(0.94) translateY(8px); } to { opacity: 1; transform: none; } }
.wizard-actions {
  display: flex; align-items: center; gap: 8px; padding: 12px 18px;
  border-top: 1px solid var(--border);
}
.wizard-actions #wizard-skip { margin-right: auto; }
.wizard-actions #wizard-back { visibility: hidden; }

/* Ferramentas do head da transcrição (buscar/copiar/srt) */
.trn-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;   /* TAREFA 15: quebra em 360px em vez de estourar */
  min-width: 0;
}
.cards-lang {
  padding: 5px 8px;
  font-size: 12px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: 8px;
  cursor: pointer;
  max-width: 150px;
  min-width: 0;
}
.cards-lang:hover { border-color: var(--accent); }
.trn-tools input[type="search"] {
  width: 110px;
  max-width: 110px;
  min-width: 0;
  flex: 1 1 80px;
  padding: 4px 8px;
  font-size: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
}
/* search em destaque, logo acima da lista de cards */
.cards-filters-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  width: 100%; margin: 10px 0 8px; min-width: 0;
}
.cards-filters-row .cards-tags { flex: 0 1 auto; min-width: 0; }
.cards-filters-row .cards-search-row {
  margin-left: auto;        /* empurra a search pra direita (right-0) */
  width: 100%; max-width: 280px; min-width: 160px; flex: 0 1 280px;
}
.cards-search-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 6px 10px 6px 8px;
  box-sizing: border-box;
}
.cards-search-row:focus-within { border-color: var(--accent); }
.cards-search-ico { color: var(--muted); flex: 0 0 auto; display: inline-flex; }
.cards-search-row input[type="search"] {
  flex: 1 1 auto; min-width: 0;
  border: none; background: transparent; outline: none;
  font-size: 14px; padding: 6px 0; color: var(--text);
}
.cards-search-row input[type="search"]::placeholder { color: var(--muted); }
/* botão + dropdown de filtro de idioma (multi-seleção) no canto superior direito */
.lang-filter { position: relative; flex: 0 0 auto; }
.lang-filter-dd {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 220px; max-width: 90vw;
  background: var(--panel); border: 1px solid var(--border2); border-radius: 10px;
  padding: 6px; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  z-index: 200;
  max-height: 60vh; overflow-y: auto;
}
.lang-filter-dd[hidden] { display: none; }
.lf-option {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 8px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
.lf-option:hover { background: var(--panel2); }
.lf-option input { width: auto; margin: 0; }
.lf-option .lf-n { color: var(--muted); font-size: 11px; }
#lang-filter-btn, #lib-lang-btn {
  width: auto; min-width: 44px; height: auto; min-height: 36px;
  gap: 6px; padding: 8px 14px;
  border-radius: 999px; white-space: nowrap;
  justify-content: center;
}
.icon-btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
}
.icon-btn-sm:hover { color: var(--text); background: var(--panel2); }
.icon-btn-sm .icon { width: 16px; height: 16px; }

/* Botão "Colar letra" — com texto, mais visível que os icon-btn-sm */
.trn-paste-btn { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; font-size:12px; font-weight:600; color:var(--accent); background:var(--accent-soft); border:1px solid transparent; border-radius:8px; cursor:pointer; white-space:nowrap; min-width: 0; max-width: 100%; }
.trn-paste-btn:hover { background:var(--accent); color:#fff; }
.trn-paste-btn .icon { width:15px; height:15px; }

/* Grid de vídeos dentro de uma seção */
.yt-grid { display: grid; grid-template-columns: 1fr; gap: 6px; }
.yt-grid .lib-card { padding: 6px; }
.yt-grid .lib-thumb { width: 88px; height: 50px; border-radius: 4px; }
.yt-grid .lib-title { font-size: 13px; -webkit-line-clamp: 2; }

.ver-mais {
  margin: 8px 6px 2px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--muted);
  background: transparent;
  border: 1px dashed var(--border2);
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
}
.ver-mais:hover { color: var(--text); border-color: var(--accent); }

.yt-warn {
  margin: 8px 10px;
  padding: 6px 10px;
  font-size: 12px;
  color: #e0b341;
  background: rgba(224, 179, 65, 0.08);
  border-radius: 6px;
}

/* Skeletons de carregamento */
.lib-card.skeleton { pointer-events: none; }
.sk-thumb { width: 88px; height: 50px; border-radius: 4px; background: var(--panel2); }
.sk-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.sk-line { height: 8px; border-radius: 4px; background: var(--panel2); }
.sk-line.w80 { width: 80%; }
.sk-line.w40 { width: 40%; }
.lib-card.skeleton, .sk-thumb, .sk-line {
  animation: sk-pulse 1.2s ease-in-out infinite;
}
@keyframes sk-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.transcript .line {
  padding: 10px 12px;
  margin: 2px 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.15s;
  border-left: 3px solid transparent;
}
.transcript .line:hover { background: var(--panel2); }
/* Linha ativa: maior e colorida (estilo Spotify) */
.transcript .line.active {
  color: #fff;
  font-weight: 600;
  border-left-color: var(--active);
  background: rgba(30,215,96,0.08);
  transform: scale(1.015);
}
.transcript .line.past { color: var(--muted); }
/* Linha de letra (LRCLIB) — destaque rosa, sem quebra em palavras */
.transcript .line.line-lyric .orig { font-size: 14px; line-height: 1.5; }
.transcript .line.line-lyric.active {
  border-left-color: #e6005a;
  background: rgba(230,0,90,0.10);
  color: #fff;
}
.transcript .line.line-lyric.active .orig { color: #ffd0e6; }

/* Modo Mesclada: badge de origem em cada linha + resumo no topo */
.transcript .line.line-merge::before {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 4px;
  margin-right: 6px;
  vertical-align: middle;
  opacity: 0.8;
}
.transcript .line.line-src-merged::before { content: "✓"; background: rgba(30,215,96,0.18); color: #6fd9a0; }
.transcript .line.line-src-lyrics::before  { content: "♪"; background: rgba(230,0,90,0.16); color: #e6b3c9; }
.transcript .line.line-src-whisper::before { content: "W"; background: rgba(120,140,170,0.18); color: #9fb2c9; }
.merge-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px;
  margin-bottom: 6px;
  font-size: 11px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
}
.ms-tag { padding: 2px 8px; border-radius: 999px; font-weight: 600; }
.ms-merged  { background: rgba(30,215,96,0.16); color: #6fd9a0; }
.ms-lyrics  { background: rgba(230,0,90,0.14); color: #e6b3c9; }
.ms-whisper { background: rgba(120,140,170,0.16); color: #9fb2c9; }
.transcript .line .trn {
  color: #9fb2c9;
  font-style: italic;
  font-size: 12px;
  margin-top: 2px;
}
/* katakana (alfabeto fonético japonês) — a linha fonética principal, clicável por palavra */
.transcript .line .trn-kana, .subs .trn-kana {
  color: #c4b5fd;
  font-style: normal;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
/* romaji (transliteração em latim) — secundário, pra confirmar a leitura */
.transcript .line .trn-romaji, .subs .trn-romaji {
  color: #7dd3fc;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.01em;
}
.transcript .line .tr {
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px;
}
.transcript .line.active .tr { color: #b9f5cf; }
/* tema claro: branco sobre verde claro sumia */
[data-theme="light"] .transcript .line.active { color: var(--text); }
[data-theme="light"] .transcript .line.active .tr { color: #14713a; }

/* Palavras clicáveis */
.word {
  cursor: pointer;
  border-radius: 3px;
  padding: 0 1px;
  transition: background 0.1s;
}
.word:hover { background: rgba(255,213,79,0.18); }
/* hover sincronizado (cirílico ↔ transliteração): destaca o par das duas linhas */
.word.word-hover { background: rgba(255,213,79,0.22); box-shadow: 0 0 0 1px rgba(255,213,79,0.5); }
/* palavra transliterada (latim) — clicável, herda cor/itálico do container (.trn / .csent-trn / .fc-sent-trn) */
.word.word-trn { cursor: pointer; }
.word.word-trn:hover { background: rgba(127,176,201,0.18); }
.word.word-trn.word-hover { background: rgba(127,176,201,0.24); box-shadow: 0 0 0 1px rgba(127,176,201,0.6); }
.word.has-note {
  border-bottom: 2px dotted var(--note);
  color: var(--note);
}
.word.has-note:hover { background: rgba(255,213,79,0.12); }
/* palavra cuja transcrição foi corrigida pelo usuário */
.word.word-corrected {
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
  font-weight: 600;
}

/* ---------- Sidebar de nota (drawer que desliza da direita, right-0) ---------- */
.note-col {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(380px, 94vw);
  background: var(--panel);
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 40px rgba(0,0,0,0.45);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: translateX(105%);   /* escondida pra direita */
  transition: transform 0.25s ease;
  z-index: 60;
  overflow-y: auto;
}
.note-col.open { transform: translateX(0); }
.note-col[hidden] { display: none; } /* fallback */
.note-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  gap: 8px;
}
.note-head-title { display: inline-flex; align-items: center; gap: 6px; }
.note-head-icon { color: var(--note); }
.note-head b { color: var(--note); }
.note-head .modal-x {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 22px;
  cursor: pointer;
  padding: 0 6px;
  line-height: 1;
  display: inline-flex;
}
.note-head .modal-x:hover { color: var(--text); }
.note-status {
  font-size: 12px;
  color: var(--muted);
  min-height: 14px;
}
.note-status.working { color: #ff8a8a; }
.note-status.error { color: #ff5b5b; }

/* Campos estruturados da nota */
.note-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nf { display: flex; flex-direction: column; gap: 4px; }
.nf-l {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}
.nf-row { display: flex; gap: 8px; }
.nf-row .nf { flex: 1 1 0; min-width: 0; }
.note-fields input,
.note-fields textarea,
#card-manage-modal input {
  width: 100%;
  font-size: 13px;
  line-height: 1.4;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #333;
  background: var(--bg);
  color: var(--text);
  box-sizing: border-box;
}
.note-fields input:focus,
.note-fields textarea:focus,
#card-manage-modal input:focus {
  outline: none;
  border-color: var(--accent);
}
.note-fields textarea { resize: vertical; min-height: 64px; }

/* Prévia do cartão */
.note-preview {
  border: 1px dashed #444;
  border-radius: 10px;
  padding: 12px;
  background: rgba(255,255,255,0.02);
}
.np-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.np-ico { color: var(--muted); }
.np-card {
  background: var(--bg);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.np-word { font-size: 16px; font-weight: 700; color: var(--text); }
.np-meaning { font-size: 13px; color: var(--text); }
.np-meaning .np-empty { color: var(--muted); font-style: italic; }
.np-sentence { font-size: 12px; color: var(--muted); font-style: italic; }
.np-meta { font-size: 11px; color: var(--muted); }

.note-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
}
.note-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* linha dividida 50/50 (Re-buscar | Editar palavra) */
.note-actions-row-split .link-btn {
  flex: 1 1 0;
  justify-content: center;
  padding: 9px 10px;
  border: 1px solid var(--border2);
  border-radius: 8px;
  font-size: 13px;
}
.note-actions-row-split .link-btn:hover { border-color: var(--accent); color: var(--accent); }
#note-word[contenteditable="true"] {
  outline: none;
  background: rgba(204,0,0,0.14);
  border-radius: 4px;
  padding: 0 4px;
  cursor: text;
}
.note-edit-hint {
  font-size: 12px;
  color: var(--note);
  background: rgba(255,213,79,0.08);
  border: 1px dashed rgba(255,213,79,0.4);
  border-radius: 8px;
  padding: 6px 10px;
  line-height: 1.4;
}
.note-actions-row .link-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
/* botão primário genérico (save-btn) — usado em vários lugares (note-actions, dicionário, etc.) */
.save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  appearance: none; -webkit-appearance: none;
  background: var(--accent);
  border: none;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 10px;
  transition: filter 0.12s, transform 0.12s;
}
.save-btn:hover { filter: brightness(1.1); }
.save-btn:active { transform: translateY(1px); }

.note-actions .save-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  border: none;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  padding: 9px 18px;
  border-radius: 8px;
}
.note-actions .save-btn:hover { filter: brightness(1.1); }
/* botão único na linha → ocupa a largura toda */
.note-actions-row > .save-btn:only-child { flex: 1 1 auto; justify-content: center; }
.save-btn.danger { background: #b91c1c; }
.save-btn.danger:hover { background: #dc2626; filter: none; }

/* Paste modal radio labels */
.pm-mode { display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer; }
.pm-mode input { accent-color: var(--accent); }
.pm-autodetect { font-size: 12px; color: #34d399; background: rgba(52,211,153,0.08); border: 1px solid rgba(52,211,153,0.25); border-radius: 8px; padding: 6px 10px; }
.pm-genius { margin-top: 4px; }
.pm-genius a { color: var(--accent); font-size: 12px; font-weight: 600; text-decoration: none; }
.pm-genius a:hover { text-decoration: underline; }
.pm-status.working { color: var(--muted); display: flex; align-items: center; gap: 8px; }
.pm-status.ok { color: #34d399; }
.pm-status.error { color: #f87171; }
.pm-spinner {
  width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; display: inline-block; animation: pmSpin 0.7s linear infinite;
}
@keyframes pmSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pm-spinner { animation: none; } }

/* Botão "ouvir palavra" (TTS) na head da nota */
.speak-btn { display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;padding:0;vertical-align:middle;transition:background .15s,color .15s; }
.speak-btn:hover { background:var(--accent-soft);color:var(--accent); }
.speak-btn.speaking { color:var(--accent);background:var(--accent-soft);animation:speakPulse 1s ease-in-out infinite; }
@keyframes speakPulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.12);} }

/* ---------- Dicionário ---------- */
.dict-head { display:flex; flex-direction:column; gap:8px; padding:14px 16px 8px; border-bottom:1px solid var(--border); flex:0 0 auto; }
.dict-head h2 { font-size:18px; margin:0; }
.dict-head input[type=search] { flex:1; min-width:0; padding:9px 12px; font-size:14px; background:var(--panel); border:1px solid var(--border); border-radius:10px; color:var(--text); }
.dict-head input[type=search]:focus { outline:none; border-color: var(--accent); }

/* cards de idioma (seletor animado, toggle filtro) */
.dict-lang-cards { display:flex; gap:10px; padding:12px 16px 4px; overflow-x:auto; scrollbar-width:thin; flex:0 0 auto; }
.dlc-card {
  flex: 0 0 auto;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  min-width: 92px; padding: 12px 10px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  cursor:pointer; color: var(--muted);
  transition: transform 0.18s ease, border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.dlc-card:hover { transform: translateY(-2px); border-color: var(--border2); }
.dlc-card .flag-img { width: 34px; height: 26px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,0.2); }
.dlc-card .dlc-flag { font-size: 26px; line-height: 1; }
.dlc-card .dlc-name { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; }
.dlc-card .dlc-count { font-size: 11px; color: var(--muted); background: var(--panel2); padding: 1px 7px; border-radius: 999px; }
.dlc-card.active {
  border-color: var(--accent); background: rgba(204,0,0,0.10); color: var(--accent);
  box-shadow: 0 4px 14px rgba(204,0,0,0.18);
}
.dlc-card.active .dlc-name { color: var(--accent); }
.dlc-card.active .dlc-count { background: var(--accent); color: #fff; }
.dlc-add { border-style: dashed; opacity: 0.7; }
.dlc-add .dlc-plus { font-size: 26px; font-weight: 300; color: var(--muted); line-height: 1; }
.dlc-add:hover { opacity: 1; border-color: var(--accent); }
.dlc-add .dlc-plus, .dlc-add:hover .dlc-plus { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .dlc-card { transition: none; } .dlc-card:hover { transform: none; } }

.dict-list { display:flex; flex-direction:column; gap:2px; padding:8px 12px; overflow-y:auto; }
.dict-item { display:flex;align-items:baseline;gap:12px;padding:10px 12px;border-radius:8px;cursor:pointer; }
.dict-item:hover { background:var(--panel2); }
.dict-item .dw { font-weight:700;font-size:15px;min-width:90px; }
.dict-item .dm { color:var(--text);font-size:13px;line-height:1.45;overflow-wrap:anywhere; }
.dict-item .dmeta { margin-left:auto;font-size:11px;color:var(--muted);white-space:nowrap; }
.dict-empty { text-align:center;color:var(--muted);padding:40px 16px;font-size:14px; }

/* ---------- Configurações ---------- */
.settings-card { max-width:680px;margin:24px auto;padding:8px 20px; }
.settings-card h2 { font-size:18px;margin:8px 0 18px; }

/* ---------- Admin ---------- */
#view-admin { max-width: 1100px; margin: 0 auto; padding: 18px 20px 60px; }
.admin-warn { display:flex; align-items:center; gap:10px; padding:10px 14px; margin-bottom:14px; background:rgba(204,0,0,0.08); border:1px solid rgba(204,0,0,0.35); border-radius:10px; font-size:13px; color:var(--text); }
.admin-warn .link-btn { font-size:12px; font-weight:600; color:var(--accent); }
.admin-head { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.admin-head h2 { font-size:22px; margin:0; }
.admin-head .icon-btn { margin-left:auto; }
.admin-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:14px; margin-bottom:22px; }
.admin-card { background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:14px 16px; }
.ac-title { font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:10px; }
.ac-big { font-size:26px; font-weight:800; color:var(--text); }
.ac-stats { display:flex; flex-direction:column; gap:6px; }
.ac-row { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; }
.ac-row span { color:var(--muted); }
.ac-row b { color:var(--text); font-weight:600; }
.ac-sub { font-size:12px; color:var(--muted); margin-top:10px; line-height:1.5; }
.ac-sub-label { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:6px; }

.admin-section { background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:14px 16px; margin-bottom:16px; }
.admin-section .as-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.admin-section h3 { font-size:15px; margin:0; }
.as-hint { font-size:12px; color:var(--muted); }
.as-count { font-size:12px; color:var(--muted); background:var(--panel2); padding:2px 9px; border-radius:999px; }
.admin-list { display:flex; flex-direction:column; gap:8px; }
.al-empty { color:var(--muted); font-size:13px; padding:8px 0; }
.al-item { display:flex; align-items:baseline; gap:10px; padding:6px 8px; border-radius:8px; font-size:12px; }
.al-item:hover { background:var(--panel2); }
.al-time { color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.al-name { font-weight:700; color:var(--text); }
.al-props { color:var(--muted); overflow-wrap:anywhere; }

.dl-item { background:var(--panel2); border:1px solid var(--border); border-radius:10px; padding:10px 12px; }
.dl-top { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.dl-dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.dl-title { font-size:13px; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto; min-width:0; }
.dl-stage { font-size:11px; color:var(--muted); white-space:nowrap; }
.dl-ts { font-size:11px; color:var(--muted); margin-left:auto; white-space:nowrap; font-variant-numeric:tabular-nums; }
.dl-bar { width:100%; height:6px; background:var(--panel); border-radius:6px; overflow:hidden; }
.dl-fill { height:100%; border-radius:6px; transition:width 0.4s ease; }
.al-err { display:block; font-size:11px; color:#dc2626; margin-top:6px; }
.dl-retry { margin-top:8px; background:none; border:1px solid var(--border); color:var(--accent); font-size:12px; font-weight:600; padding:5px 10px; border-radius:7px; cursor:pointer; min-height:32px; }
.dl-retry:hover { background:rgba(204,0,0,0.10); border-color:var(--accent); }

/* breakdown de custo por função */
.cbf-item { padding:8px 4px; border-bottom:1px solid var(--border); }
.cbf-item:last-child { border-bottom:none; }
.cbf-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.cbf-name { font-size:13px; font-weight:600; color:var(--text); }
.cbf-cost { font-size:13px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; }
.cbf-pct { color:var(--muted); font-weight:500; font-size:11px; }
.cbf-bar { width:100%; height:5px; background:var(--panel2); border-radius:5px; overflow:hidden; margin:6px 0 4px; }
.cbf-fill { height:100%; background:var(--accent); border-radius:5px; }
.cbf-meta { font-size:11px; color:var(--muted); }
@media (max-width:640px){ .admin-grid { grid-template-columns:1fr; } }
.admin-danger { border-color: rgba(220,38,38,0.35); }
.admin-danger h3 { color: #dc2626; }
.link-btn.danger { color: #dc2626; font-weight: 600; }
.link-btn.danger:hover { background: rgba(220,38,38,0.12); }

/* Modal de confirmar transcrição (seletores de idioma) */
.tc-field { display:flex; flex-direction:column; gap:5px; }
.tc-label { font-size:12px; font-weight:600; color:var(--muted); }
.tc-field select.cards-lang { width:100%; padding:9px 12px; font-size:14px; background:var(--panel); border:1px solid var(--border); border-radius:8px; color:var(--text); }
.tc-field select.cards-lang:focus { outline:none; border-color:var(--accent); }
.set-row { display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 0;border-bottom:1px solid var(--border); }
.set-label .set-title { font-weight:600;font-size:14px; }
.set-label .set-desc { color:var(--muted);font-size:12px;margin-top:3px;line-height:1.5; }
.set-actions { padding:18px 0; }
/* TAREFA 18: link discreto de volta pra landing */
.set-back-link { text-align: center; margin: 14px 0 4px; }
.set-back-link a { font-size: 12px; color: var(--muted); text-decoration: none; }
.set-back-link a:hover { color: var(--accent); }
.wiz-lang-pick { margin:14px 0; }
/* Wizard de objetivo (TAREFA 07) — campos, labels, grid de nível */
.wiz-field { margin: 14px 0; }
.wiz-label { display:block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.wiz-select {
  width: 100%; max-width: 320px; padding: 10px 12px;
  border: 1px solid var(--border2); border-radius: 10px;
  background: var(--panel2); color: var(--text); font-size: 15px;
}
.wiz-level-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px;
}
/* Wizard passo 1/2 — grid de cartões de idioma (progressive disclosure, multi-select) */
.wiz-lang-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 4px;
}
.wiz-lang-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 72px; padding: 12px 10px;
  border: 1px solid var(--border2); border-radius: 12px;
  background: var(--panel2); color: var(--text);
  cursor: pointer; text-align: center;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.wiz-lang-card:hover { border-color: var(--accent); }
.wiz-lang-card.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--panel2));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}
.wiz-lang-card:active { transform: scale(0.97); }
.wiz-lang-flag { font-size: 26px; line-height: 1; }
.wiz-lang-name { font-size: 13px; font-weight: 600; }
/* Grid de hábitos de input (passo 4) — mesmos cartões, mas emoji + label, multi-select */
.wiz-habits-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 4px;
}
.wiz-habit-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 72px; padding: 12px 10px;
  border: 1px solid var(--border2); border-radius: 12px;
  background: var(--panel2); color: var(--text);
  cursor: pointer; text-align: center;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.wiz-habit-card:hover { border-color: var(--accent); }
.wiz-habit-card.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--panel2));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}
.wiz-habit-card:active { transform: scale(0.97); }
.wiz-habit-icon { font-size: 24px; line-height: 1; }
.wiz-habit-name { font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.wiz-lang-other { border-style: dashed; color: var(--muted); }
.wiz-lang-other.active { color: var(--text); }
.wiz-lang-other-select {
  margin-top: 8px; width: 100%; min-height: 44px; padding: 10px 12px;
  background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 10px; font-size: 14px;
}
.wiz-level {
  padding: 12px 14px; min-height: 48px;
  border: 1px solid var(--border2); border-radius: 10px;
  background: var(--panel2); color: var(--text);
  font-size: 14px; font-weight: 500; text-align: left; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.wiz-level:hover { border-color: var(--accent); }
.wiz-level.sel {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel2));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}
.wiz-level:active { transform: scale(0.98); }
/* Wizard passo 2 — grid de ritmo (TAREFA 08) */
.wiz-pace-grid {
  display: flex; flex-direction: column; gap: 10px; margin-top: 4px;
}
.wiz-pace {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 16px; min-height: 48px;
  border: 1px solid var(--border2); border-radius: 12px;
  background: var(--panel2); color: var(--text);
  text-align: left; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.wiz-pace:hover { border-color: var(--accent); }
.wiz-pace.sel {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel2));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}
.wiz-pace:active { transform: scale(0.99); }
.wiz-pace-name { font-size: 15px; font-weight: 700; }
.wiz-pace-cost { font-size: 13px; color: var(--muted); }
.wiz-pace-deliver { font-size: 13px; color: var(--accent); font-weight: 600; }
.wiz-pace-deliver .wiz-weeks { font-size: 15px; }
/* Wizard passo 3 — timeline + promessa (TAREFA 09) */
.wiz-timeline {
  display: flex; gap: 8px; margin: 14px 0; overflow-x: auto;
  padding-bottom: 4px;
}
.wiz-milestone {
  flex: 1; min-width: 110px;
  background: var(--panel2); border: 1px solid var(--border2); border-radius: 12px;
  padding: 12px 12px; display: flex; flex-direction: column; gap: 4px;
}
.wiz-milestone .wm-num { font-size: 18px; font-weight: 800; color: var(--accent); }
.wiz-milestone .wm-when { font-size: 12px; color: var(--muted); font-weight: 600; }
.wiz-milestone .wm-what { font-size: 12px; color: var(--text); line-height: 1.4; }
/* Gráfico de projeção do passo 6 (SVG inline) */
.wiz-promise-chart { margin: 10px 0 4px; }
.wpc-wrap { background: var(--panel2); border: 1px solid var(--border2); border-radius: 12px; padding: 10px 8px 6px; }
.wpc-svg { width: 100%; height: auto; display: block; max-height: 200px; }
.wpc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 6px 6px 0; font-size: 11px; color: var(--muted); }
.wpc-leg-item { display: inline-flex; align-items: center; gap: 5px; }
.wpc-dot { width: 10px; height: 3px; border-radius: 2px; background: var(--accent); display: inline-block; }
.wpc-pct { width: 9px; height: 9px; border-radius: 50%; background: #ff5a5a; display: inline-block; }
.wpc-lang, .wpc-rep { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 11px; color: var(--text); font-weight: 600; }
.wpc-rep { color: var(--muted); font-weight: 500; font-style: italic; }
.wpc-rep .flag-img, .wpc-lang .flag-img { vertical-align: middle; }
.wiz-promise {
  background: color-mix(in srgb, var(--accent) 10%, var(--panel2));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 12px; padding: 14px 16px; margin: 12px 0;
  font-size: 14px; line-height: 1.55;
}
.wiz-assumptions-link {
  background: none; border: none; color: var(--muted);
  font-size: 12px; text-decoration: underline; cursor: pointer; padding: 4px 0;
}
.wiz-assumptions-link:hover { color: var(--accent); }
.wiz-assumptions {
  font-size: 12px; color: var(--muted); line-height: 1.55;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; margin-top: 6px;
  white-space: pre-line; /* respeita \n vindos do backend */
  max-height: 50vh; overflow-y: auto;
}
.wiz-assumptions b { color: var(--text); font-weight: 600; }
@media (max-width: 640px) {
  .wiz-timeline { flex-direction: column; }
  .wiz-milestone { min-width: 0; }
}
/* Dica contextual do primeiro cartão (TAREFA 10) — não-bloqueante, some sozinha */
.first-card-tip {
  position: fixed; z-index: 80;
  background: var(--panel); border: 1px solid var(--accent); border-radius: 10px;
  padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--text);
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  pointer-events: none; animation: pop-in 0.2s ease;
  max-width: 260px;
}
.first-card-tip .fct-arrow {
  position: absolute; font-size: 14px; color: var(--accent);
  text-shadow: 0 0 2px var(--panel);
}
.first-card-tip .fct-text { display: block; }
/* CTA do empty state da biblioteca */
.lib-empty-cta { margin-top: 14px; }
.lib-empty-cta .save-btn { width: auto; }
/* Empty state: colar link + conectar conta (substitui o botão de vídeo de exemplo) */
.lib-empty-import { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; max-width: 460px; margin-left: auto; margin-right: auto; }
.lib-empty-form { display: flex; gap: 8px; }
.lib-empty-url {
  flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 10px 14px; font-size: 14px;
  background: var(--panel2); border: 1px solid var(--border2); border-radius: 10px; color: var(--text);
}
.lib-empty-url:focus { outline: none; border-color: var(--accent); }
.lib-empty-go { white-space: nowrap; }
.lib-empty-connect {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 16px; font-size: 14px; font-weight: 600;
  background: var(--panel2); border: 1px solid var(--border2); border-radius: 10px; color: var(--text);
  cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease;
}
.lib-empty-connect:hover { border-color: var(--accent); background: var(--panel); }
.lib-empty-connect .icon { width: 18px; height: 18px; }
/* mobile: grid de nível em coluna única, selects full-width */
@media (max-width: 640px) {
  .wiz-level-grid { grid-template-columns: 1fr; }
  .wiz-lang-grid { grid-template-columns: 1fr 1fr; } /* 2 colunas de cartões de idioma no mobile */
  .wiz-lang-card { min-height: 64px; }
  .wiz-habits-grid { grid-template-columns: 1fr 1fr; }
  .wiz-habit-card { min-height: 64px; }
  .lf-option { min-height: 44px; }
  #lang-filter-btn { min-width: 44px; min-height: 44px; }
  #lib-lang-btn { min-width: 44px; min-height: 44px; }
  .filter-btn { min-height: 44px; padding: 10px 16px; }
  .lib-star { width: 44px; height: 44px; font-size: 20px; }
  .landing-go { min-height: 44px; }
  .lang-flag { width: 44px; height: 44px; border-radius: 10px; }
  .landing-music { min-height: 44px; padding: 10px 16px; }
  .treinar-head .treinar-cta { min-height: 44px; padding: 10px 16px; }
  .due-banner { min-height: 44px; }
  .fc-edit-btn { width: 44px; height: 44px; }
  .fc-adv-toggle { width: 44px; height: 44px; }
  .wiz-select { max-width: 100%; }
  .wizard-actions .save-btn, .wizard-actions .link-btn { min-height: 44px; }
}
/* acessibilidade: foco visível em todos os elementos interativos do wizard */
.wizard-card :focus-visible,
.onboarding :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
/* Botão "Ver cartão" (quando o cartão já existe) — estilo neutro em vez de vermelho */
.note-actions .save-btn.view-card {
  background: var(--panel2);
  color: var(--text);
  border: 1px solid var(--border2);
}
.note-actions .save-btn.view-card:hover { border-color: var(--accent); color: var(--accent); filter: none; }

/* flash ao destacar um cartão ("Ver cartão") */
.card-item.flash {
  outline: 2px solid var(--accent);
  animation: card-flash 1.6s ease;
}
@keyframes card-flash {
  0%, 100% { background: var(--panel); }
  20%, 60% { background: rgba(204,0,0,0.18); }
}

/* ---------- Trilha entre as áreas (TAREFA 12) ---------- */
/* Banner "revisar agora?" no player (não-bloqueante) */
.ended-review-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: 12px; padding: 10px 14px; margin: 8px 0;
  animation: pop-in 0.2s ease;
}
.ended-review-banner .erb-text { font-size: 14px; font-weight: 600; flex: 1 1 auto; }
.ended-review-banner .erb-x {
  background: none; border: none; color: var(--muted); cursor: pointer;
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
}
.ended-review-banner .erb-x:hover { color: var(--accent); }

/* ---------- Avaliação de estrelas ao fim do vídeo ---------- */
.rating-overlay {
  position: absolute; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(4px);
  animation: fade-in 0.25s ease;
}
.rating-box {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 16px; padding: 24px 28px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  animation: pop-in 0.3s ease; min-width: 280px;
}
.rating-title { font-size: 16px; font-weight: 700; color: var(--text); }
.rating-stars { display: flex; gap: 6px; }
.star-btn {
  font-size: 32px; line-height: 1; cursor: pointer;
  background: none; border: none; color: var(--muted);
  transition: color 0.15s, transform 0.15s; padding: 2px;
}
.star-btn:hover { transform: scale(1.2); }
.star-btn.active { color: #f5a623; }
.star-btn.active:hover { color: #f5a623; }
.rating-feedback-wrap { display: flex; gap: 8px; width: 100%; animation: slide-down 0.2s ease; }
.rating-feedback {
  flex: 1 1 auto; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  font-size: 14px; outline: none;
}
.rating-feedback:focus { border-color: var(--accent); }
.rating-feedback-wrap .save-btn { white-space: nowrap; }
.rating-footer { display: flex; align-items: center; gap: 10px; width: 100%; justify-content: space-between; }
.rating-countdown { font-size: 12px; color: var(--muted); }
.rating-overlay .erb-x {
  background: none; border: none; color: var(--muted); cursor: pointer;
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
}
.rating-overlay .erb-x:hover { color: var(--accent); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* Ações de fim de fila (Treinar) */
.fc-end-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; margin-top: 10px; }
.fc-end-actions .save-btn { width: 100%; justify-content: center; }

/* ---------- Revisão embutida no player (TAREFA 13) ---------- */
/* Botão flutuante: cartões vencidos deste vídeo */
.player-review-fab {
  position: absolute; top: 10px; right: 10px; z-index: 30;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent); color: #fff; border: none; border-radius: 999px;
  padding: 7px 12px; font-size: 12px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  animation: pop-in 0.2s ease;
}
.player-review-fab:hover { filter: brightness(1.1); }
.player-review-fab .prf-count {
  background: rgba(0,0,0,0.25); border-radius: 999px; padding: 1px 7px; font-size: 11px;
}
/* Scrim + painel */
.er-scrim {
  position: fixed; inset: 0; z-index: 95; background: rgba(0,0,0,0.5);
  animation: fade-in 0.2s ease;
}
.embedded-review {
  position: fixed; z-index: 96;
  background: var(--panel); border: 1px solid var(--border2); border-radius: 16px 16px 0 0;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.4);
  display: flex; flex-direction: column;
  transition: transform 0.25s ease;
  /* desktop: painel lateral direito */
  top: 0; right: 0; bottom: 0; width: min(380px, 92vw); border-radius: 0;
  transform: translateX(100%);
}
.embedded-review.open { transform: translateX(0); }
.er-handle { display: none; }
.er-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px; border-bottom: 1px solid var(--border);
}
.er-title { font-size: 14px; font-weight: 700; }
.er-x {
  background: none; border: none; color: var(--muted); cursor: pointer;
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
}
.er-x:hover { color: var(--accent); }
.er-progress { font-size: 12px; color: var(--muted); padding: 8px 16px 0; }
.er-card { padding: 12px 16px; overflow-y: auto; flex: 1; position: relative; }
.er-word { font-size: 22px; font-weight: 800; color: var(--accent); margin-bottom: 8px; }
.er-snap { width: 100%; max-height: 140px; object-fit: cover; border-radius: 10px; margin-bottom: 8px; }
.er-meaning { font-size: 14px; line-height: 1.5; margin-bottom: 8px; }
.er-sent { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.er-lyric { color: var(--accent); }
.er-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 16px 16px;
  border-top: 1px solid var(--border);
}
.er-rate {
  padding: 12px; min-height: 48px; border-radius: 10px; border: 1px solid var(--border2);
  background: var(--panel2); color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer;
}
.er-rate:hover { border-color: var(--accent); color: var(--accent); }
.er-again { color: #ef4444; }
.er-hard { color: #f59e0b; }
.er-good { color: #10b981; }
.er-easy { color: #3b82f6; }
.er-done { padding: 24px 16px; text-align: center; }
.er-done-title { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.er-lock { overflow: hidden; }
/* Mobile: sheet de baixo, no máx 70% da altura, com handle pra swipe */
@media (max-width: 640px) {
  .embedded-review {
    top: auto; left: 0; right: 0; bottom: 0; width: auto;
    height: 70vh; max-height: 70vh; border-radius: 16px 16px 0 0;
    transform: translateY(100%);
  }
  .embedded-review.open { transform: translateY(0); }
  .er-handle {
    display: block; width: 40px; height: 5px; border-radius: 999px;
    background: var(--border2); margin: 8px auto 0; cursor: grab;
  }
}

/* ---------- Anel de meta diária (TAREFA 14) — componente reaproveitável ---------- */
.goal-ring-wrap {
  display: inline-flex; align-items: center; gap: 8px;
}
.goal-ring { display: block; color: var(--text); }
.goal-ring.met { color: var(--accent); }
.goal-ring.stale { color: var(--muted); opacity: 0.7; }
.goal-ring circle { transition: stroke-dasharray 0.4s ease; }
.gr-streak { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; }
.gr-stale { font-size: 11px; color: var(--muted); max-width: 90px; line-height: 1.3; }
/* painel de progresso: anel maior, centralizado */
.pp-goal-ring { display: flex; justify-content: center; margin-bottom: 4px; }
/* treinar hero: anel ao lado do CTA */
.treinar-hero { align-items: center; flex-wrap: wrap; }
.treinar-hero-ring { flex: 0 0 auto; }
.treinar-hero-sub { min-width: 0; flex: 1 1 100%; word-break: break-word; }
/* bottom nav: anel pequeno como badge no item Treinar (TAREFA 14/15) */
.bn-goal-ring { display: none; position: absolute; top: 2px; right: 6px; }
@media (max-width: 640px) {
  .bn-goal-ring { display: inline-flex; align-items: center; justify-content: center; }
  .bn-goal-ring .goal-ring-wrap { gap: 0; }
  .bn-goal-ring .gr-streak, .bn-goal-ring .gr-stale { display: none; }
}

/* ---------- PWA: prompt de instalação + badge de pendências (TAREFA 17) ---------- */
.install-banner {
  position: fixed; z-index: 90; left: 50%; transform: translateX(-50%);
  bottom: 72px; /* acima da bottom nav no mobile */
  display: flex; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--accent); border-radius: 12px;
  padding: 10px 12px; box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  max-width: calc(100vw - 24px);
}
.install-banner .ib-ico { width: 26px; height: 26px; color: var(--accent); display: inline-flex; }
.install-banner .ib-text { display: flex; flex-direction: column; line-height: 1.25; flex: 1 1 auto; min-width: 0; }
.install-banner .ib-text strong { font-size: 14px; }
.install-banner .ib-text span { font-size: 11px; color: var(--muted); }
.install-banner .ib-btn {
  background: var(--accent); color: #fff; border: none; border-radius: 8px;
  padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.install-banner .ib-x { background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; display: inline-flex; }
.install-banner .ib-x .icon { width: 18px; height: 18px; }
.pending-sync-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(251,191,36,0.14); color: #fbbf24; border: 1px solid rgba(251,191,36,0.4);
  border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 600; margin-top: 6px;
}
@media (min-width: 641px) {
  .install-banner { bottom: 20px; }
}
.import-sheet {
  position: fixed; z-index: 97; left: 0; right: 0; bottom: 0;
  background: var(--panel); border: 1px solid var(--border2); border-radius: 16px 16px 0 0;
  box-shadow: 0 -10px 40px rgba(0,0,0,0.4);
  display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform 0.25s ease;
  max-height: 70vh;
}
.import-sheet.open { transform: translateY(0); }
.import-sheet .is-handle {
  width: 40px; height: 5px; border-radius: 999px; background: var(--border2);
  margin: 8px auto 0; cursor: grab;
}
.import-sheet .is-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 8px;
}
.import-sheet .is-title { font-size: 15px; font-weight: 700; }
.import-sheet .is-body { padding: 8px 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.import-sheet .is-option {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; min-height: 44px; cursor: pointer;
}
.import-sheet .is-option:hover { border-color: var(--accent); }
.import-sheet .is-ico { width: 24px; height: 24px; color: var(--accent); flex: 0 0 auto; }
.import-sheet .is-text { display: flex; flex-direction: column; gap: 2px; }
.import-sheet .is-name { font-size: 15px; font-weight: 700; }
.import-sheet .is-sub { font-size: 12px; color: var(--muted); }

/* ---------- Painel de progresso (TAREFA 11) — home de quem já fez onboarding ---------- */
.progress-panel { overflow-y: auto; }
.progress-inner {
  max-width: 720px; margin: 0 auto; padding: 20px 18px 32px;
  display: flex; flex-direction: column; gap: 18px;
}
.pp-stats { display: flex; gap: 12px; flex-wrap: wrap; }
.pp-stats-hint { font-size: 11px; color: var(--muted); margin: 2px 0 8px; text-align: center; }
.pp-lang-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.pp-lang-bar-label { font-size: 12px; color: var(--muted); }
.pp-lang-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pp-lang-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; min-height: 44px;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 999px;
  cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 600;
}
.pp-lang-chip:hover { border-color: var(--border2); color: var(--text); }
.pp-lang-chip.active { color: var(--text); border-color: var(--accent); background: rgba(99,102,241,0.12); }
.pp-lang-chip .flag { font-size: 16px; line-height: 1; }
.pp-lang-count { opacity: 0.7; font-weight: 500; }
.pp-stat {
  flex: 1; background: var(--panel2); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; text-align: center;
}
.pp-stat-num { font-size: 26px; font-weight: 800; color: var(--text); line-height: 1.1; }
.pp-stat-label { font-size: 12px; color: var(--muted); margin-top: 4px; font-weight: 600; }
/* dominadas em destaque */
.pp-stat-hero {
  flex: 1.4;
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}
.pp-stat-hero .pp-stat-num { font-size: 34px; color: var(--accent); }
.pp-stat-hero .pp-stat-label { color: var(--text); }
.pp-coverage {
  background: var(--panel2); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; text-align: center;
}
.pp-coverage-num { font-size: 15px; font-weight: 700; }
.pp-coverage-num #pp-coverage-pct { font-size: 22px; color: var(--accent); }
.pp-coverage-src { font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.pp-chart-wrap {
  background: var(--panel2); border: 1px solid var(--border); border-radius: 14px;
  padding: 12px; min-height: 110px; display: flex; align-items: center; justify-content: center;
}
.pp-chart { width: 100%; height: 110px; display: block; }
.pp-chart-fallback { text-align: center; }
.pp-fallback-num { font-size: 28px; font-weight: 800; color: var(--accent); }
.pp-fallback-delta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.pp-next {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 52px; font-size: 16px; font-weight: 700;
}
.pp-next-ico { width: 20px; height: 20px; }
.pp-explore { margin-top: 4px; }
.pp-explore-title {
  font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 8px; text-align: center;
}
.pp-explore-links {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.pp-explore-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 12px; font-size: 12px; color: var(--text); cursor: pointer;
}
.pp-explore-link:hover { border-color: var(--accent); color: var(--accent); }
.pp-el-ico { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .progress-inner { padding: 16px 14px 28px; gap: 14px; }
  .pp-stats { gap: 8px; }
  .pp-stat { padding: 10px 8px; }
  .pp-stat-num { font-size: 22px; }
  .pp-stat-hero .pp-stat-num { font-size: 28px; }
}
/* TAREFA 15: telas muito estreitas (≤380px) — stats do painel empilham pra zero rolagem horizontal */
@media (max-width: 380px) {
  .pp-stats { flex-direction: column; }
  .pp-stat-hero { flex: 1; }
}

/* TAREFA 19 — alvos de toque ≥44px no mobile (≤640px). Desktop mantém tamanhos compactos. */
@media (max-width: 640px) {
  .icon-btn { min-width: 44px; min-height: 44px; }
  .icon-btn-sm { width: 44px; height: 44px; }
  .link-btn { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 10px; }
  /* bottom nav: itens preenchem a largura disponível (cada um ≥44px de largura) */
  .bottom-nav .bn-item { flex: 1 1 0; min-width: 0; width: auto; }
  .pp-explore-link { min-height: 44px; padding: 10px 14px; }
  /* topbar um pouco mais alto pra acomodar botões de 44px */
  .topbar { padding: 8px 14px; }
  .modal-x { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
  .ab-btn { min-height: 44px; min-width: 44px; padding: 10px 12px; }
  select.cards-lang { min-height: 44px; padding: 10px 28px 10px 10px; }
  .tag-chip { min-height: 44px; padding: 10px 14px; display: inline-flex; align-items: center; }
  select.speed { min-height: 44px; }
  .wiz-assumptions-link { min-height: 44px; display: inline-flex; align-items: center; }
  .card-tool { width: 44px; height: 44px; }
  .trn-paste-btn { min-height: 44px; }
}

/* ===== Player mobile redesign (≤640px): vídeo fixo flutuante, botões agrupados, próximos ===== */
/* Vídeo flutua no topo enquanto a transcrição rola por baixo (só mobile) */
@media (max-width: 640px) {
  :root { --topbar-h: 56px; }
  .player-view:not(.no-video) { display: block; }
  /* Só o player fica fixo flutuando (mini-player estilo YouTube); título e controles rolam */
  .player-view:not(.no-video) #player-wrap {
    position: fixed;
    top: var(--topbar-h, 56px);
    left: 0;
    right: 0;
    width: 100%;
    z-index: 30;
    border-radius: 0;
    aspect-ratio: 16 / 9;
    box-shadow: 0 4px 14px rgba(0,0,0,0.45);
  }
  /* reserva espaço abaixo do player fixo (altura 16:9 = 56.25vw) para título/controles não ficarem escondidos */
  .player-view:not(.no-video) .video-meta { margin-top: 56.25vw; }
  .player-view:not(.no-video) .video-meta { padding: 8px 12px 0; }
  .player-view:not(.no-video) .video-meta h1 { font-size: 15px; }
  .player-view:not(.no-video) .video-sub { font-size: 12px; }

  /* Barra de controles reorganizada: transporte grande e agrupado no topo, secundários em linha que envolve */
  .player-bar {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 6px;
    padding: 8px 10px 4px;
    margin-top: 0;
  }
  /* transporte: linha própria, centralizada, botões grandes */
  .player-bar .transport {
    flex-basis: 100%;
    justify-content: center;
    gap: 8px;
    padding: 6px;
    border-radius: 999px;
  }
  .player-bar .transport .icon-btn {
    min-width: 56px;
    min-height: 56px;
    padding: 0;
    justify-content: center;
  }
  .player-bar .transport .icon-btn .icon { width: 26px; height: 26px; }
  .player-bar .transport .play-btn {
    min-width: 68px;
    min-height: 68px;
    padding: 0;
  }
  .player-bar .transport .play-btn .icon { width: 30px; height: 30px; }
  /* Esconde o texto "2s" no mobile — só ícones */
  .player-bar .transport .icon-btn .btn-text { display: none; }

  /* tempo: linha própria, pequeno e centralizado */
  .player-bar > #time-display {
    flex-basis: 100%;
    margin: 0;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
  }
  .player-bar .spacer { display: none; }
  /* sync: linha própria, centralizado */
  .player-bar > #sync-group { flex-basis: 100%; justify-content: center; }

  /* Transcrição abaixo do vídeo (sem altura fixa, rola com a página) */
  .player-view:not(.no-video) .transcript-col {
    border-radius: 0;
    border: none;
    background: transparent;
  }
  .player-view:not(.no-video) .transcript-head { padding: 10px 12px 6px; }
  .player-view:not(.no-video) .transcript { padding: 6px 12px 80px; }
}

/* Próximos (lista estilo YouTube mobile) — visível onde a coluna biblioteca está escondida (≤1024px) */
.player-upnext { display: none; }
@media (max-width: 1024px) {
  .player-view:not(.no-video) .player-upnext:not([hidden]) { display: block; padding: 4px 0 90px; }
}
.pun-head {
  padding: 14px 12px 8px;
  border-top: 1px solid var(--border);
}
.pun-title { font-size: 15px; font-weight: 700; color: var(--text); }
.pun-list { display: flex; flex-direction: column; gap: 10px; padding: 0 12px; }
.pun-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.pun-item:active { transform: scale(0.98); }
.pun-thumb {
  position: relative;
  width: 120px;
  min-width: 120px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}
.pun-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pun-thumb .pun-dur {
  position: absolute;
  right: 4px;
  bottom: 4px;
  background: rgba(0,0,0,0.8);
  color: #fff;
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 4px;
}
.pun-body { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.pun-title-line {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pun-meta { font-size: 11px; color: var(--muted); }
.pun-empty { padding: 18px 12px; color: var(--muted); font-size: 13px; text-align: center; }

/* ===================== Shorts mode (feed vertical estilo TikTok) ===================== */
.shorts-view { padding: 0; height: 100%; display: flex; flex-direction: column; }
.shorts-topbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border, #222); flex-shrink: 0; }
.shorts-topbar h2 { font-size: 16px; margin: 0; }
.shorts-lang-sel { margin-left: auto; background: var(--card, #1a1a1f); color: var(--text, #eee); border: 1px solid var(--border, #333); border-radius: 8px; padding: 6px 8px; font-size: 13px; }

.shorts-feed { flex: 1; overflow-y: auto; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; }
.shorts-feed::-webkit-scrollbar { width: 0; }
.shorts-card { height: 100%; min-height: 100%; scroll-snap-align: start; position: relative; display: flex; align-items: center; justify-content: center; background: #000; }
.shorts-card-frame { position: relative; width: 100%; max-width: 480px; height: 100%; display: flex; align-items: center; justify-content: center; }
.shorts-card-frame iframe { width: 100%; height: 100%; max-height: 100vh; border: 0; background: #000; }
.shorts-subs { position: absolute; left: 0; right: 0; bottom: 14%; padding: 0 14px; text-align: center; pointer-events: auto; z-index: 3; }
.shorts-line { background: rgba(0,0,0,.62); border-radius: 8px; padding: 6px 10px; display: inline-block; max-width: 92%; }
.shorts-line .sl-orig { color: #fff; font-weight: 600; font-size: 15px; line-height: 1.25; }
.shorts-line .sl-tr { color: #ffd9d9; font-size: 13px; line-height: 1.2; margin-top: 2px; }
.shorts-word { cursor: pointer; border-radius: 4px; padding: 0 1px; }
.shorts-word:hover { background: rgba(204,0,0,.45); }

.shorts-rail { position: absolute; right: 10px; bottom: 16%; display: flex; flex-direction: column; gap: 14px; z-index: 4; }
.shorts-rail button { width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(0,0,0,.5); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.shorts-rail button:hover { background: rgba(204,0,0,.7); }
.shorts-meta { position: absolute; left: 12px; bottom: 8%; right: 70px; z-index: 3; color: #fff; }
.shorts-meta .sm-title { font-size: 13px; font-weight: 600; text-shadow: 0 1px 3px #000; }
.shorts-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; opacity: .8; z-index: 2; }
.shorts-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 10px; color: var(--muted, #888); }
.se-ico { width: 40px; height: 40px; }
.se-ico svg { width: 40px; height: 40px; }
@media (max-width: 760px) { .shorts-card-frame { max-width: 100%; } }

/* Onboarding + progresso do auto-seed de shorts */
.shorts-seed-btn { margin-left: auto; background: var(--accent, #dc2626); color: #fff; border: 0; border-radius: 8px; padding: 7px 12px; font-size: 13px; cursor: pointer; }
.shorts-seed-btn:hover { filter: brightness(1.08); }
.shorts-seed-btn:disabled { opacity: .5; cursor: default; }
.shorts-progress { padding: 8px 14px; display: flex; align-items: center; gap: 10px; background: rgba(220,38,38,.08); border-bottom: 1px solid var(--border, #222); flex-shrink: 0; }
.sp-bar { flex: 1; height: 6px; background: rgba(255,255,255,.1); border-radius: 3px; overflow: hidden; }
.sp-fill { height: 100%; width: 0%; background: var(--accent, #dc2626); transition: width .4s ease; }
.sp-text { font-size: 12px; color: var(--muted, #aaa); white-space: nowrap; }
.shorts-empty button { margin-top: 8px; }
.shorts-empty .shorts-seed-btn { margin-top: 8px; }

/* ---------- Mini player com legenda ----------
   Só CSS move o player: o iframe fica no mesmo lugar do DOM (mover recarregaria o vídeo).
   display: contents tira os pais do layout sem esconder o #player-wrap, que vira fixed. */
.mini-bar[hidden] { display: none; }
body.mini-on #player-view[hidden] { display: contents !important; }
body.mini-on #player-view[hidden] > :not(.video-col) { display: none; }
body.mini-on #player-view .video-col { display: contents; }
body.mini-on #player-view .video-col > :not(#player-wrap) { display: none; }
body.mini-on #player-view #player-wrap {
  position: fixed;
  width: min(320px, calc(100vw - 16px));
  height: auto;
  aspect-ratio: auto;
  display: flex; flex-direction: column;
  border-radius: 12px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.14);
  z-index: 800; /* acima da bottom nav e das views; abaixo dos modais (9000+) */
}
body.mini-on #player-wrap[data-mini-corner^="t"] { top: calc(var(--topbar-h, 56px) + 10px); bottom: auto; }
body.mini-on #player-wrap[data-mini-corner^="b"] { bottom: 14px; top: auto; }
body.mini-on #player-wrap[data-mini-corner$="l"] { left: 92px; right: auto; }
body.mini-on #player-wrap[data-mini-corner$="r"] { right: 14px; left: auto; }
body.mini-on #player-wrap.mini-dragging { user-select: none; opacity: 0.92; }
body.mini-on #player-wrap #player { width: 100%; height: auto; aspect-ratio: 16 / 9; order: 1; display: block; }
body.mini-on #player-wrap .mini-bar { order: 0; }
body.mini-on #player-wrap .subs {
  order: 2; position: static;
  min-height: 62px; max-height: 118px; overflow: hidden;
  padding: 7px 10px 9px;
  background: #0d0f14;
  display: flex; align-items: center; justify-content: center;
}
body.mini-on #player-wrap .subs .seg { background: none; padding: 0; max-width: 100%; }
body.mini-on #player-wrap .subs .orig { font-size: 15px; }
body.mini-on #player-wrap .subs .tr { font-size: 13.5px; }
body.mini-on #player-wrap .subs .trn { font-size: 12px; }
body.mini-on #player-wrap .player-review-fab { display: none; }
body.mini-on #player-wrap .unmute-overlay { top: 40px; bottom: auto; right: 8px; font-size: 0; padding: 7px; gap: 0; }
body.mini-on #player-wrap .unmute-overlay span:last-child { display: none; }
.mini-bar {
  display: flex; align-items: center; gap: 2px;
  padding: 3px 4px 3px 10px;
  background: #171a21; color: #fff;
  cursor: grab; touch-action: none;
}
.mini-dragging .mini-bar { cursor: grabbing; }
.mini-title { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-btn {
  flex: 0 0 auto; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 7px; background: transparent; color: #fff; cursor: pointer;
}
.mini-btn:hover { background: rgba(255,255,255,0.14); }
.mini-btn span { display: inline-flex; }
.mini-btn svg, .mini-btn .icon { width: 16px; height: 16px; }
/* janela pequena: encolhe o mini player pra não tampar a tela */
@media (max-height: 560px), (max-width: 760px) {
  body.mini-on #player-view #player-wrap { width: min(240px, calc(100vw - 16px)); }
  body.mini-on #player-wrap .subs { min-height: 52px; max-height: 84px; padding: 5px 8px 6px; }
  body.mini-on #player-wrap .subs .orig { font-size: 13px; }
  body.mini-on #player-wrap .subs .tr { font-size: 12px; }
  body.mini-on #player-wrap .subs .trn { display: none; }
}
@media (max-height: 380px) {
  body.mini-on #player-wrap #player { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; aspect-ratio: auto; }
  body.mini-on #player-wrap[data-mini-corner^="t"] { top: 8px; }
}
@media (max-width: 860px) { body.mini-on #player-wrap[data-mini-corner$="l"] { left: 8px; } body.mini-on #player-wrap[data-mini-corner$="r"] { right: 8px; } }
@media (max-width: 640px) { body.mini-on #player-wrap[data-mini-corner^="b"] { bottom: 72px; } }
/* janela Document PiP: só a legenda e os controles */
.pip-body { margin: 0; background: #0d0f14; color: #fff; display: flex; flex-direction: column; height: 100vh; }
.pip-body .subs { position: static; flex: 1; display: flex; align-items: center; justify-content: center; padding: 8px 12px; }
.pip-body .subs .seg { background: none; padding: 0; max-width: 100%; }

/* ============ Vídeo bloqueado fora do YouTube */
.embed-blocked {
  position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 20px; text-align: center; color: #fff;
  background: radial-gradient(circle at 50% 35%, rgba(214,0,28,.25), transparent 60%), #0b0b0f;
}
.embed-blocked[hidden] { display: none; }
.embed-blocked .eb-title { font-size: clamp(16px, 2vw, 22px); font-weight: 800; letter-spacing: -.01em; }
.embed-blocked .eb-sub { font-size: 14px; color: #c4c4cc; }
.embed-blocked .eb-open {
  margin-top: 6px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 22px;
  background: #fff; color: #111; font-weight: 800; font-size: 15px; text-decoration: none;
}