:root {
--ui-font: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
--reading-font: Charter, "Bitstream Charter", Cambria, Georgia, "Times New Roman", serif;
--bg: #0a0a0f;
--bg-grad: radial-gradient(1200px 600px at 80% -10%, #1a1530 0%, transparent 60%),
radial-gradient(900px 500px at -10% 10%, #101a2e 0%, transparent 55%);
--panel: #141420;
--panel-2: #1b1b29;
--border: #2a2a3c;
--border-soft: #232333;
/* Borda de controle: deriva do texto/borda do tema ativo, então continua
visível em todos os temas (claro, escuro e preto) sem valores por tema. */
--border-strong: color-mix(in srgb, var(--text) 24%, var(--border));
--text: #ecebf5;
--muted: #9a98b5;
--faint: #6c6a86;
--accent: #7c6bff;
--accent-grad: linear-gradient(135deg, #7c6bff 0%, #b06bff 100%);
--marker: #54a0ff;
--marker-soft: rgba(84,160,255,.16);
--marker-strong: rgba(84,160,255,.74);
--green: #3ddc97;
--red: #ff6b81;
--radius: 16px;
--radius-sm: 10px;
--shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
--sidebar-bg: rgba(16, 16, 26, 0.72);
--focus-bg: radial-gradient(circle at 50% 0%, rgba(255,255,255,.08), transparent 32%), linear-gradient(160deg, #10131c, #08090d 62%, #151417);
--focus-text: #fff;
--focus-muted: rgba(255,255,255,.48);
--focus-trans: rgba(255,255,255,.90);
}
:root[data-theme="sun"] {
--bg: #f4ead8;
--bg-grad: radial-gradient(1100px 620px at 78% -8%, #fff5cc 0%, transparent 62%), radial-gradient(760px 480px at -8% 8%, #eed8b7 0%, transparent 58%);
--panel: #fffaf0;
--panel-2: #f1e5d2;
--border: #d8c5a7;
--border-soft: #e7d8c1;
--text: #201b14;
--muted: #695d4e;
--faint: #927f67;
--accent: #c68a00;
--accent-grad: linear-gradient(135deg, #d39a12 0%, #e8b83f 58%, #c86d28 100%);
--green: #498c58;
--red: #c83d2b;
--shadow: 0 12px 34px rgba(89, 60, 24, .14);
--sidebar-bg: rgba(255, 249, 237, .88);
--focus-bg: linear-gradient(160deg, #fff9e9, #f0dfc2 62%, #f8edda);
--focus-text: #211a12;
--focus-muted: rgba(55, 43, 28, .52);
--focus-trans: rgba(111, 48, 31, .92);
}
:root[data-theme="amoled"] {
--bg: #000;
--bg-grad: radial-gradient(900px 520px at 92% -12%, rgba(255, 112, 32, .13), transparent 58%), radial-gradient(780px 480px at -10% 12%, rgba(45, 133, 255, .12), transparent 56%);
--panel: #070707;
--panel-2: #0e0e0e;
--border: #242424;
--border-soft: #171717;
--text: #f7f7f5;
--muted: #aaa8a4;
--faint: #74716d;
--accent: #ff842f;
--accent-grad: linear-gradient(135deg, #ff7424 0%, #ff9e3d 48%, #469cff 100%);
--green: #4ee69b;
--red: #ff5c70;
--shadow: 0 14px 42px rgba(0, 0, 0, .84);
--sidebar-bg: rgba(0, 0, 0, .92);
--focus-bg: radial-gradient(circle at 75% 0%, rgba(255,126,42,.10), transparent 30%), linear-gradient(160deg, #050505, #000 64%, #07101d);
}
:root[data-theme="sun"] .sent-trans,
:root[data-theme="sun"] .pl-line-trans { color: #9e412f; }
:root[data-theme="amoled"] .sent-trans,
:root[data-theme="amoled"] .pl-line-trans { color: #8fc2ff; }
/* Tema claro (ativado por data-theme="light" no ). */
:root[data-theme="light"] {
--bg: #f5f6fb;
--bg-grad: radial-gradient(1200px 600px at 80% -10%, #ece9ff 0%, transparent 60%),
radial-gradient(900px 500px at -10% 10%, #e6eeff 0%, transparent 55%);
--panel: #ffffff;
--panel-2: #f1f2f8;
--border: #e0e2ec;
--border-soft: #eaebf2;
--text: #1b1c2a;
--muted: #5b5c72;
--faint: #8c8da0;
--green: #14a877;
--red: #e24a60;
--shadow: 0 10px 30px rgba(28, 28, 50, 0.10);
--sidebar-bg: rgba(255, 255, 255, 0.78);
}
:root[data-marker="blue"] { --marker: #54a0ff; --marker-soft: rgba(84,160,255,.16); --marker-strong: rgba(84,160,255,.74); }
:root[data-marker="green"] { --marker: #3ddc97; --marker-soft: rgba(61,220,151,.15); --marker-strong: rgba(61,220,151,.78); }
:root[data-marker="amber"] { --marker: #feca57; --marker-soft: rgba(254,202,87,.16); --marker-strong: rgba(254,202,87,.78); }
:root[data-marker="rose"] { --marker: #ff6b81; --marker-soft: rgba(255,107,129,.16); --marker-strong: rgba(255,107,129,.76); }
:root[data-marker="cyan"] { --marker: #26d0ce; --marker-soft: rgba(38,208,206,.15); --marker-strong: rgba(38,208,206,.76); }
:root[data-marker="orange"] { --marker: #ff8a3d; --marker-soft: rgba(255,138,61,.17); --marker-strong: rgba(255,138,61,.78); }
:root[data-marker="violet"] { --marker: #9d83ff; --marker-soft: rgba(157,131,255,.17); --marker-strong: rgba(157,131,255,.78); }
:root[data-marker="lime"] { --marker: #b9df46; --marker-soft: rgba(185,223,70,.17); --marker-strong: rgba(185,223,70,.78); }
:root[data-marker="white"] { --marker: #f5f2e8; --marker-soft: rgba(245,242,232,.15); --marker-strong: rgba(245,242,232,.72); }
:root[data-font="jakarta"] { --ui-font: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; }
:root[data-font="system"] { --ui-font: "Segoe UI", system-ui, -apple-system, sans-serif; }
:root[data-font="book"] { --ui-font: Charter, Cambria, Georgia, serif; }
:root[data-reading-font="book"] { --reading-font: Charter, "Bitstream Charter", Cambria, Georgia, serif; }
:root[data-reading-font="classic"] { --reading-font: Georgia, "Times New Roman", serif; }
:root[data-reading-font="sans"] { --reading-font: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body {
margin: 0; padding: 0; background: var(--bg); color: var(--text);
font-family: var(--ui-font);
font-size: calc(15px * var(--fs, 1)); line-height: 1.5;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
font-kerning: normal; font-synthesis: none; font-optical-sizing: auto;
}
button, input, select, textarea { font-synthesis: none; text-rendering: optimizeLegibility; }
/* Tamanho de fonte (acessibilidade): escala TODOS os font-size do app.
Cada font-size px vira calc(px * var(--fs)) — pequena/média/grande. */
:root { --fs: 1; }
:root[data-fontsize="small"] { --fs: 0.93; }
:root[data-fontsize="large"] { --fs: 1.13; }
:root[data-fontsize="large"] .main { max-width: 1360px; }
/* ATENÇÃO: 100vh no celular é a altura da tela COM a barra do navegador
escondida — ou seja, MAIOR que a área visível. Usar vh aqui deixava o body
mais alto que o conteúdo real, criando rolagem fantasma e empurrando o que é
fixo (barra inferior, player) para baixo da dobra. 100dvh acompanha a área
realmente visível; a linha vh fica como fallback para navegador antigo. */
body { background-image: var(--bg-grad); background-attachment: fixed; min-height: 100vh; min-height: 100dvh; }
.hidden { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.muted-small { color: var(--faint); font-size: calc(12px * var(--fs, 1)); }
/* foco-visível consistente (acessibilidade por teclado) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
button:focus:not(:focus-visible), select:focus:not(:focus-visible) { outline: none; }
code { background: var(--panel-2); padding: 1px 6px; border-radius: 6px; font-size: calc(12.5px * var(--fs, 1)); color: var(--muted); }
/* ── Login local ── */
.auth-gate { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 18px; background: var(--bg); }
.auth-gate[hidden] { display: none; }
/* Aviso de servidor fora do ar (o casco do app sobrevive em cache). */
.offline-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 9px 14px; background: #7a2f22; color: #ffe9e2; font-size: calc(13px * var(--fs, 1)); line-height: 1.4; box-shadow: 0 2px 12px rgba(0,0,0,.35); }
.offline-bar.hidden { display: none; }
.offline-bar button { border: 1px solid rgba(255,233,226,.5); background: transparent; color: inherit; font: inherit; border-radius: 999px; padding: 3px 12px; cursor: pointer; }
.offline-bar button:hover { background: rgba(255,233,226,.14); }
.offline-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: #ff7a5c; }
body.server-offline .main { opacity: .72; }
.auth-checking { display: flex; align-items: center; gap: 10px; padding: 22px 4px 6px; color: var(--muted); font-size: calc(14px * var(--fs, 1)); }
.auth-checking.hidden { display: none; }
.auth-spinner { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent); animation: auth-spin .7s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .auth-spinner { animation-duration: 2.4s; } }
.auth-panel { width: min(420px, 100%); display: grid; gap: 24px; padding: clamp(22px, 5vw, 34px); border: 1px solid var(--border); border-radius: 8px; background: var(--panel); box-shadow: var(--shadow); }
.auth-brand { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--border-soft); }
.auth-brand-icon { width: 42px; height: 42px; border-radius: 11px; overflow: hidden; box-shadow: 0 5px 16px rgba(193,95,60,.34); }
.auth-brand-icon svg { width: 100%; height: 100%; display: block; }
.auth-brand strong, .auth-brand small { display: block; }
.auth-brand strong { font-size: calc(17px * var(--fs, 1)); }
.auth-brand small { color: var(--faint); font-size: calc(11.5px * var(--fs, 1)); }
.auth-form { display: grid; gap: 14px; }
.auth-form h1 { margin: 0 0 4px; font-size: calc(24px * var(--fs, 1)); letter-spacing: 0; }
.auth-form p { margin: 0; color: var(--muted); font-size: calc(13px * var(--fs, 1)); }
.auth-form input { width: 100%; height: 42px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2); color: var(--text); padding: 0 11px; font: inherit; }
.auth-form input:focus { border-color: var(--accent); }
.auth-remember { display: flex; align-items: center; gap: 9px; min-height: 36px; color: var(--muted); font-size: calc(12.5px * var(--fs, 1)); cursor: pointer; }
.auth-remember input { width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.auth-error { min-height: 20px; color: var(--red); font-size: calc(12px * var(--fs, 1)); }
.auth-submit { width: 100%; justify-content: center; }
.auth-link { border: 0; padding: 3px; background: transparent; color: var(--accent); font: inherit; font-size: calc(13px * var(--fs, 1)); text-align: left; cursor: pointer; }
.auth-link:hover { text-decoration: underline; }
.auth-help { margin: -4px 0 0; color: var(--faint); font-size: calc(10.5px * var(--fs, 1)); line-height: 1.55; overflow-wrap: anywhere; }
body.auth-locked { overflow: hidden; }
body.auth-locked > :not(.auth-gate) { visibility: hidden; }
.sb-user { display: grid; grid-template-columns: 34px minmax(0, 1fr) 30px; gap: 8px; align-items: center; padding: 10px 8px; border-top: 1px solid var(--border-soft); }
.sb-user-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--marker-soft); color: var(--marker); font-weight: 800; }
.sb-user-copy { min-width: 0; }
.sb-user-copy strong, .sb-user-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-user-copy strong { font-size: calc(12px * var(--fs, 1)); }
.sb-user-copy small { color: var(--faint); font-size: calc(10px * var(--fs, 1)); }
.sb-user-logout { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; }
.sb-user-logout:hover { color: var(--red); background: var(--panel-2); }
.sb-user-logout svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* ── Administração local ── */
.admin-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 20px; align-items: start; }
.admin-main, .admin-side { display: grid; gap: 14px; min-width: 0; }
.admin-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.admin-section-head h2 { margin: 0; font-size: calc(16px * var(--fs, 1)); letter-spacing: 0; }
.admin-section-head p { margin: 3px 0 0; color: var(--faint); font-size: calc(11.5px * var(--fs, 1)); }
.admin-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.admin-stat { display: grid; gap: 2px; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); }
.admin-stat small, .admin-stat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--faint); font-size: calc(10px * var(--fs, 1)); }
.admin-stat strong { font-size: calc(17px * var(--fs, 1)); }
.admin-registration-control { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; }
.admin-registration-control strong, .admin-registration-control small { display: block; }
.admin-registration-control small { margin-top: 3px; color: var(--faint); font-size: calc(11px * var(--fs, 1)); }
.admin-registration-control .active { color: var(--green); border-color: color-mix(in srgb, var(--green) 50%, var(--border)); }
.admin-create-user { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 10px; align-items: end; padding: 14px; }
.admin-users, .admin-resources, .admin-audit { display: grid; gap: 7px; }
.admin-user-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 14px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel); }
.admin-user-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.admin-user-main .sb-user-avatar { flex: none; }
.admin-user-copy { min-width: 0; }
.admin-user-copy strong, .admin-user-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-copy small { margin-top: 3px; color: var(--faint); font-size: calc(11px * var(--fs, 1)); }
.admin-user-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.admin-user-actions button { min-height: 34px; }
.admin-user-row.inactive { opacity: .58; }
.admin-subscription { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.admin-subscription select, .admin-subscription input { min-height: 34px; max-width: 124px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2); color: var(--text); padding: 0 7px; font: inherit; font-size: calc(11px * var(--fs, 1)); }
.admin-subscription label { display: inline-flex; align-items: center; gap: 4px; color: var(--faint); font-size: calc(10px * var(--fs, 1)); }
.admin-status { padding: 3px 6px; border-radius: 999px; background: var(--panel-2); color: var(--faint); font-size: calc(10px * var(--fs, 1)); }
.admin-status.active { color: var(--green); }.admin-status.pending { color: #feca57; }.admin-status.suspended { color: var(--red); }
.admin-profile-modal { width: min(640px, 100%); }
.admin-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.admin-panel-block { display: grid; gap: 12px; padding: 15px; }
.admin-runtime { display: grid; gap: 7px; }
.admin-runtime > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 7px; border-bottom: 1px solid var(--border-soft); }
.admin-runtime > div:last-child { border-bottom: 0; padding-bottom: 0; }
.admin-runtime span { color: var(--faint); font-size: calc(10.5px * var(--fs, 1)); }
.admin-runtime strong { text-align: right; font-size: calc(10.5px * var(--fs, 1)); overflow-wrap: anywhere; }
.admin-resource-filter { justify-self: start; max-width: 100%; overflow-x: auto; }
.admin-resource-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border-soft); }
.admin-resource-row:last-child { border-bottom: 0; }
.admin-resource-copy { min-width: 0; }
.admin-resource-copy strong, .admin-resource-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-resource-copy strong { font-size: calc(12px * var(--fs, 1)); }
.admin-resource-copy small { margin-top: 2px; color: var(--faint); font-size: calc(10px * var(--fs, 1)); }
.admin-resource-copy small.admin-resource-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; overflow: visible; white-space: normal; }
.admin-resource-badges > span { min-height: 19px; padding: 1px 6px; font-size: calc(8px * var(--fs, 1)); }
.admin-scope-btn { min-width: 96px; min-height: 32px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2); color: var(--muted); cursor: pointer; }
.admin-scope-btn.shared { color: var(--green); border-color: color-mix(in srgb, var(--green) 42%, var(--border)); }
.admin-resource-actions { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.admin-audit-row { padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.admin-audit-row:last-child { border-bottom: 0; }
.admin-audit-row strong, .admin-audit-row small { display: block; }
.admin-audit-row strong { font-size: calc(11.5px * var(--fs, 1)); }
.admin-audit-row small { color: var(--faint); font-size: calc(10px * var(--fs, 1)); }
/* ── Shell: sidebar (drawer) + área principal ── */
.shell { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; min-height: 100dvh; transition: grid-template-columns .22s ease; }
body.nav-collapsed .shell { grid-template-columns: 0 1fr; }
.sidebar {
position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh; overflow-y: auto;
display: flex; flex-direction: column; gap: 2px;
padding: 14px 12px; background: var(--sidebar-bg); backdrop-filter: blur(8px);
border-right: 1px solid var(--border);
transition: transform .25s ease; z-index: 110;
}
body.nav-collapsed .sidebar { transform: translateX(-100%); }
/* Botão hambúrguer (reabre), botão recolher (na marca) e backdrop */
.menu-toggle { position: fixed; top: 12px; left: 12px; z-index: 130; width: 40px; height: 40px; border-radius: 10px; background: var(--panel); border: 1px solid var(--border); color: var(--text); cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: var(--shadow); }
.menu-toggle:hover { border-color: var(--accent); }
body.nav-collapsed .menu-toggle { display: flex; }
body.nav-collapsed .main { padding-left: 66px; }
.sb-collapse { margin-left: auto; background: transparent; border: 1px solid transparent; color: var(--faint); width: 28px; height: 28px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; flex: none; }
.sb-collapse:hover { background: var(--panel-2); color: var(--text); border-color: var(--border); }
.sb-collapse svg { stroke: currentColor; }
.sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 105; opacity: 0; pointer-events: none; transition: opacity .2s; }
/* Navegação inferior (aparece só no mobile — destinos principais no polegar) */
.bottom-nav { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
padding-bottom: env(safe-area-inset-bottom, 0px);
background: var(--sidebar-bg); backdrop-filter: blur(12px); border-top: 1px solid var(--border); }
.bn-item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
background: none; border: none; color: var(--faint); cursor: pointer; font-family: inherit; padding: 8px 2px 7px; transition: color .14s; }
.bn-item.active { color: var(--accent); }
.bn-ico { width: 24px; height: 24px; display: grid; place-items: center; transition: transform .14s; }
.bn-ico svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bn-item.active .bn-ico { transform: translateY(-1px); }
.bn-lbl { font-size: calc(10px * var(--fs, 1)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sb-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; }
.sb-mark { font-size: calc(22px * var(--fs, 1)); }
.sb-name { font-weight: 700; font-size: calc(15px * var(--fs, 1)); letter-spacing: -.01em; white-space: nowrap; }
.sb-nav { display: flex; flex-direction: column; gap: 2px; }
.sb-item {
display: flex; align-items: center; gap: 11px; width: 100%;
padding: 9px 10px; border-radius: 9px; background: transparent; border: 1px solid transparent;
color: var(--muted); cursor: pointer; font-family: inherit; font-size: calc(14px * var(--fs, 1)); text-align: left;
transition: background .14s, color .14s, border-color .14s;
}
.sb-item:hover { background: var(--panel); color: var(--text); }
.sb-item.active { background: rgba(124,107,255,.16); border-color: var(--accent); color: var(--text); }
.sb-ico { width: 20px; height: 20px; flex: none; display: grid; place-items: center; }
.sb-ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sb-brand-ico { width: 32px; height: 32px; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 12px rgba(193,95,60,.32); }
.sb-brand-ico svg { width: 100%; height: 100%; display: block; }
.sb-record .sb-ico svg { stroke: var(--red); }
.sb-lbl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-count { font-size: calc(11px * var(--fs, 1)); color: var(--faint); font-variant-numeric: tabular-nums; background: var(--panel-2); border-radius: 999px; padding: 1px 8px; }
.sb-action { opacity: 0; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; color: var(--faint); font-size: calc(15px * var(--fs, 1)); transition: opacity .14s; }
.sb-item:hover .sb-action { opacity: 1; }
.sb-action:hover { background: var(--panel-2); color: var(--text); }
.sb-record { margin-top: 4px; }
.sb-record .sb-ico { font-size: calc(11px * var(--fs, 1)); color: var(--red); }
.sb-section { display: flex; align-items: center; justify-content: space-between; margin: 18px 8px 6px; font-size: calc(11px * var(--fs, 1)); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.sb-add { background: transparent; border: 1px solid transparent; color: var(--faint); width: 20px; height: 20px; border-radius: 6px; cursor: pointer; font-size: calc(14px * var(--fs, 1)); line-height: 1; }
.sb-add:hover { background: var(--panel-2); color: var(--text); border-color: var(--border); }
.sb-collections { display: flex; flex-direction: column; gap: 1px; }
.sb-spacer { flex: 1; min-height: 14px; }
.sb-status { display: flex; align-items: center; gap: 8px; padding: 9px 10px; font-size: calc(11.5px * var(--fs, 1)); color: var(--muted); border-top: 1px solid var(--border-soft); margin-top: 6px; }
.sb-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.sb-status.ok .dot { background: var(--green); animation: pulse 2s infinite; }
.sb-status.warn .dot { background: #ffb454; }
.sb-status-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(61,220,151,.5);} 70% { box-shadow: 0 0 0 8px rgba(61,220,151,0);} 100% { box-shadow: 0 0 0 0 rgba(61,220,151,0);} }
/* min-width:0 deixa o conteúdo encolher no grid; overflow-x:clip é a rede de
segurança: qualquer elemento que vaze NÃO cria scroll horizontal na página
(clip não vira container de rolagem, então não quebra sticky/position). */
/* O `max-width` limita a linha de leitura, mas a coluna do grid ocupa a tela
inteira: sem `margin-inline:auto` o conteúdo ficava COLADO À ESQUERDA e
sobrava um vazio proporcional à largura do monitor (520px num 1800px), que é
o desequilíbrio de "o body é maior que o template". Centralizar resolve sem
abrir mão do limite de leitura. */
.main { min-width: 0; padding: 26px 30px 80px; max-width: 1280px; margin-inline: auto; width: 100%; overflow-x: clip; }
/* views (troca com transição) */
.view { display: none; }
.view.active { display: block; animation: viewIn .26s ease; }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px);} to { opacity: 1; transform: none; } }
.view-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.view-head h1 { margin: 0; font-size: calc(23px * var(--fs, 1)); letter-spacing: -0.02em; display: flex; align-items: center; gap: 12px; }
.view-sub { margin: 5px 0 0; color: var(--muted); font-size: calc(13px * var(--fs, 1)); }
.link-btn { background: none; border: none; color: var(--accent); cursor: pointer; font-size: calc(12.5px * var(--fs, 1)); font-family: inherit; padding: 0; }
.link-btn:hover { text-decoration: underline; }
.btn-ghost { background: var(--panel); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 9px 14px; font-size: calc(13.5px * var(--fs, 1)); cursor: pointer; transition: all .15s; }
.btn-ghost:hover { border-color: var(--accent); background: var(--panel-2); }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
/* ── Composer ── */
.composer { padding: 18px; margin-bottom: 26px; }
.composer-head { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.grow { flex: 1; min-width: 160px; }
.field-label { font-size: calc(11px * var(--fs, 1)); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
select, .title-input, .search, .word-search, .text-input { font-family: inherit; }
#voiceSelect, #speakerSelect, #studioLang, #recordLang {
appearance: none; background: var(--panel-2) url("data:image/svg+xml;utf8,") no-repeat right 12px center;
color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 36px 10px 12px; font-size: calc(14px * var(--fs, 1)); cursor: pointer;
}
#voiceSelect { min-width: 220px; }
.title-input { width: 100%; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 10px 12px; font-size: calc(14px * var(--fs, 1)); }
.title-input:focus, #voiceSelect:focus, #speakerSelect:focus, #studioLang:focus { outline: none; border-color: var(--accent); }
.char-count { color: var(--faint); font-size: calc(12px * var(--fs, 1)); font-variant-numeric: tabular-nums; margin-left: auto; align-self: center; }
.voice-panel { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -2px 0 12px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--panel-2); }
.voice-panel-main { min-width: 0; color: var(--muted); font-size: calc(12.5px * var(--fs, 1)); line-height: 1.45; }
.voice-panel-main b { color: var(--text); font-weight: 700; }
.voice-panel-main .warn { color: #ffb454; }
.voice-panel-main .ok { color: var(--green); }
.voice-panel .btn-ghost { flex: none; padding: 7px 12px; font-size: calc(12.5px * var(--fs, 1)); background: var(--panel); }
.text-input { width: 100%; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 14px 16px; font-size: calc(16px * var(--fs, 1)); line-height: 1.6; resize: vertical; min-height: 92px; }
.text-input::placeholder { color: var(--faint); }
.text-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,107,255,.15); }
.composer-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; gap: 12px; }
.hint { color: var(--faint); font-size: calc(12.5px * var(--fs, 1)); }
.btn-primary { display: inline-flex; align-items: center; gap: 9px; background: var(--accent-grad); color: #fff; border: none; border-radius: var(--radius-sm); padding: 11px 20px; font-size: calc(14.5px * var(--fs, 1)); font-weight: 600; cursor: pointer; box-shadow: 0 6px 20px rgba(124,107,255,.35); transition: transform .08s, box-shadow .2s, opacity .2s; }
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.btn-icon { font-size: calc(12px * var(--fs, 1)); }
.btn-primary.loading .btn-icon { width: 13px; height: 13px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* ── Dicionário: filtros + biblioteca ── */
.dict-body { display: block; }
/* Gaveta de filtros/busca: fixa, desliza da direita, OCULTA por padrão em qualquer
tela. Deixa a Biblioteca ocupar a largura toda e rolar fluida. Abre sob demanda. */
.filters-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 140; opacity: 0; pointer-events: none; transition: opacity .2s; }
#view-dictionary.filters-open .filters-backdrop { opacity: 1; pointer-events: auto; }
.filters { position: fixed; top: 0; right: 0; z-index: 150; width: min(350px, 92vw); height: 100vh; height: 100dvh;
display: flex; flex-direction: column; gap: 14px; padding: 16px; background: var(--panel); border-left: 1px solid var(--border);
box-shadow: var(--shadow); overflow-y: auto; transform: translateX(100%); transition: transform .24s cubic-bezier(.4,0,.2,1); }
#view-dictionary.filters-open .filters { transform: translateX(0); }
.filters-head { display: flex; align-items: center; justify-content: space-between; font-size: calc(13px * var(--fs, 1)); font-weight: 700; color: var(--text); letter-spacing: .02em; padding-bottom: 6px; border-bottom: 1px solid var(--border-soft); }
.side-block { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.side-head { display: flex; align-items: center; justify-content: space-between; font-size: calc(12px * var(--fs, 1)); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 10px; }
.mini-btn { background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); border-radius: 7px; padding: 3px 9px; font-size: calc(12px * var(--fs, 1)); cursor: pointer; transition: all .15s; }
.mini-btn:hover { border-color: var(--accent); color: var(--text); }
.mini-btn.danger:hover { border-color: var(--red); color: var(--red); }
.mini-btn:disabled { opacity: .5; cursor: default; }
/* gavetas */
.collections { display: flex; flex-direction: column; gap: 3px; }
.collection { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; cursor: pointer; transition: background .12s; }
.collection:hover { background: var(--panel-2); }
.collection.active { background: rgba(124,107,255,.14); }
.col-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.col-name { flex: 1; font-size: calc(13.5px * var(--fs, 1)); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-count { font-size: calc(11.5px * var(--fs, 1)); color: var(--faint); font-variant-numeric: tabular-nums; }
.col-del { background: none; border: none; color: var(--faint); cursor: pointer; font-size: calc(11px * var(--fs, 1)); opacity: 0; }
.collection:hover .col-del { opacity: 1; }
.col-del:hover { color: var(--red); }
.collection-group-label { padding: 10px 8px 3px; color: var(--faint); font-size: calc(9.5px * var(--fs, 1)); font-weight: 750; letter-spacing: .065em; text-transform: uppercase; }
.collection-group-label.private { color: color-mix(in srgb, var(--accent) 65%, var(--muted)); }
.col-scope, .scope-symbol { flex: none; color: var(--faint); font-size: calc(8px * var(--fs, 1)); font-weight: 800; letter-spacing: .04em; }
.collection.scope-private { background: color-mix(in srgb, var(--accent) 3%, transparent); }
/* chips idiomas */
.lang-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 5px 11px; font-size: calc(12.5px * var(--fs, 1)); cursor: pointer; transition: all .15s; }
.chip:hover { border-color: var(--accent); color: var(--text); }
.chip.active { background: rgba(124,107,255,.16); border-color: var(--accent); color: var(--text); }
/* palavras */
.word-search { width: 100%; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 7px 10px; font-size: calc(13px * var(--fs, 1)); margin-bottom: 10px; }
.word-search:focus { outline: none; border-color: var(--accent); }
.word-index { display: flex; flex-wrap: wrap; gap: 6px; max-height: 280px; overflow-y: auto; }
.word-chip { background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); border-radius: 7px; padding: 4px 8px; font-size: calc(12.5px * var(--fs, 1)); cursor: pointer; display: inline-flex; gap: 5px; align-items: center; transition: all .12s; }
.word-chip:hover { border-color: var(--accent); color: var(--text); }
.word-chip.active { background: var(--accent-grad); color: #fff; border-color: transparent; }
.word-n { font-size: calc(10.5px * var(--fs, 1)); opacity: .7; }
/* ── Library ── */
.count-badge { background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); font-size: calc(12px * var(--fs, 1)); font-weight: 600; border-radius: 999px; padding: 2px 10px; }
.metrics-bar { font-size: calc(12px * var(--fs, 1)); color: var(--muted); margin-top: 7px; }
.metrics-bar b { color: var(--text); font-weight: 600; }
.active-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-pill { background: rgba(124,107,255,.16); border: 1px solid var(--accent); color: var(--text); border-radius: 999px; padding: 4px 10px; font-size: calc(12px * var(--fs, 1)); cursor: pointer; }
.search { margin-left: auto; min-width: 200px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 9px 14px; font-size: calc(14px * var(--fs, 1)); }
.search:focus { outline: none; border-color: var(--accent); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 16px; }
.lib-sentinel { grid-column: 1 / -1; text-align: center; color: var(--faint); font-size: calc(12.5px * var(--fs, 1)); padding: 18px 8px; }
.take { min-width: 0; background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 15px; display: flex; flex-direction: column; gap: 11px; transition: border-color .15s, transform .15s; animation: rise .3s ease; }
/* palavra/URL longa sem espaço não pode alargar o card além da célula do grid */
.take-title, .take-text, .take-trans, .take-note { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.take:hover { border-color: var(--border); transform: translateY(-2px); }
@keyframes rise { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: none; } }
.take-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.take-meta { display: flex; align-items: center; gap: 7px; min-width: 0; flex: 1 1 auto; flex-wrap: wrap; }
.flag { font-size: calc(15px * var(--fs, 1)); }
.src-badge { font-size: calc(13px * var(--fs, 1)); opacity: .9; }
.lang-pair { font-size: calc(12.5px * var(--fs, 1)); letter-spacing: -.5px; white-space: nowrap; }
.kind-badge { font-size: calc(9.5px * var(--fs, 1)); text-transform: uppercase; letter-spacing: .05em; color: var(--faint); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; flex: none; }
.engine-badge { font-size: calc(9px * var(--fs, 1)); text-transform: uppercase; letter-spacing: .04em; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border)); border-radius: 5px; padding: 1px 5px; flex: none; }
.level-badge { flex: none; max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(10.5px * var(--fs, 1)); font-weight: 700; color: var(--text); border: 1px solid color-mix(in srgb, var(--level-color, var(--accent)) 60%, var(--border)); background: color-mix(in srgb, var(--level-color, var(--accent)) 18%, transparent); border-radius: 999px; padding: 2px 8px; }
.language-badge, .semantic-kind, .age-badge { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; max-width: 100%; padding: 2px 7px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: var(--panel-2); font-size: calc(9.5px * var(--fs, 1)); font-weight: 700; line-height: 1.2; white-space: nowrap; }
.language-badge b { color: var(--faint); font-size: .82em; letter-spacing: .05em; text-transform: uppercase; }
.language-badge.origin { color: var(--text); }
.language-badge.translation { color: color-mix(in srgb, var(--accent) 76%, var(--text)); border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); }
.semantic-kind { color: var(--accent); text-transform: uppercase; letter-spacing: .045em; }
.semantic-kind.phrase { color: #d692ff; border-color: color-mix(in srgb, #d692ff 42%, var(--border)); }
.semantic-kind.expression { color: #5fd4c4; border-color: color-mix(in srgb, #5fd4c4 42%, var(--border)); }
.age-badge { color: #d99a36; border-color: color-mix(in srgb, #d99a36 45%, var(--border)); background: color-mix(in srgb, #d99a36 7%, var(--panel-2)); }
.metadata-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.take.private-content { border-left: 3px solid color-mix(in srgb, var(--accent) 58%, var(--border)); }
.take.platform-content { border-left: 3px solid color-mix(in srgb, var(--green) 55%, var(--border)); }
.voice-name { font-weight: 600; font-size: calc(13px * var(--fs, 1)); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 145px; }
.take-actions { display: flex; gap: 3px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; max-width: 138px; }
.icon-btn { background: transparent; border: 1px solid transparent; color: var(--faint); border-radius: 8px; width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer; transition: all .15s; font-size: calc(14px * var(--fs, 1)); line-height: 1; overflow: hidden; flex: none; }
/* Exclusoes sao operacoes administrativas. A API tambem aplica a mesma regra;
isto evita oferecer uma acao que o usuario comum nao pode executar. */
body:not(.role-admin) .danger,
body:not(.role-admin) .col-del,
body:not(.role-admin) .book-del { display: none !important; }
.icon-btn:hover { background: var(--panel-2); color: var(--text); border-color: var(--border); }
.icon-btn.danger:hover { color: var(--red); border-color: rgba(255,107,129,.4); }
.take-title { width: 100%; background: transparent; border: 1px solid transparent; border-radius: 7px; color: var(--text); font-size: calc(14.5px * var(--fs, 1)); font-weight: 600; padding: 5px 7px; margin: -2px 0; transition: all .15s; }
.take-title:hover { border-color: var(--border-soft); }
.take-title:focus { outline: none; background: var(--panel-2); border-color: var(--accent); }
.take-ipa { min-height: 0; }
.take-ipa.has { display: block; max-width: 100%; overflow: hidden; color: #b9b0ff; font-size: calc(11.5px * var(--fs, 1)); letter-spacing: .015em; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
:root[data-theme="light"] .take-ipa.has { color: #6a59d6; }
.ipa-gen { background: transparent; border: 1px dashed var(--border); color: var(--faint); border-radius: 6px; padding: 2px 9px; font-size: calc(11.5px * var(--fs, 1)); cursor: pointer; font-family: inherit; transition: all .14s; }
.ipa-gen:hover { border-color: var(--accent); color: var(--text); }
.ipa-gen:disabled { opacity: .6; cursor: default; }
.take-text { font-size: calc(13.5px * var(--fs, 1)); line-height: 1.55; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.take-text mark { background: rgba(124,107,255,.35); color: var(--text); border-radius: 3px; padding: 0 2px; }
.take-text .kw { transition: color .1s, background .1s; border-radius: 3px; }
.take-text .kw.on { background: var(--accent-grad); color: #fff; padding: 0 1px; }
.take-trans { font-size: calc(12.5px * var(--fs, 1)); color: var(--faint); font-style: italic; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.take-note { font-size: calc(12px * var(--fs, 1)); color: var(--muted); background: var(--panel-2); border-radius: 7px; padding: 4px 8px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.take-collections { display: flex; flex-wrap: wrap; gap: 5px; }
.col-tag { display: inline-flex; align-items: center; gap: 5px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; font-size: calc(11.5px * var(--fs, 1)); color: var(--muted); }
/* player */
.player { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.play-btn { flex: none; width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--accent-grad); color: #fff; cursor: pointer; display: grid; place-items: center; font-size: calc(14px * var(--fs, 1)); box-shadow: 0 4px 14px rgba(124,107,255,.35); transition: transform .1s; }
.play-btn:hover { transform: scale(1.06); }
.track-wrap { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.track { height: 6px; background: var(--panel-2); border-radius: 999px; cursor: pointer; position: relative; overflow: hidden; }
.track-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--accent-grad); border-radius: 999px; }
.track-row { display: flex; justify-content: space-between; font-size: calc(11.5px * var(--fs, 1)); color: var(--faint); font-variant-numeric: tabular-nums; }
.empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-art { font-size: calc(44px * var(--fs, 1)); margin-bottom: 12px; opacity: .8; }
/* ── Popover gavetas ── */
.popover { position: absolute; z-index: 60; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 10px; width: 220px; }
.pop-title { font-size: calc(11px * var(--fs, 1)); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px; }
.pop-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: calc(13.5px * var(--fs, 1)); cursor: pointer; border-radius: 6px; }
.pop-row:hover { background: var(--panel-2); }
/* ── Modais ── */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 150; padding: 20px; }
.modal { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; max-width: 560px; max-height: 86vh; overflow-y: auto; padding: 22px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.modal-head h3 { margin: 0; font-size: calc(17px * var(--fs, 1)); }
.modal-sub { color: var(--muted); font-size: calc(13px * var(--fs, 1)); margin: 6px 0 16px; }
/* catálogo de vozes */
.catalog-group { margin-bottom: 16px; }
.catalog-lang { font-size: calc(12.5px * var(--fs, 1)); color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.catalog-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); margin-bottom: 6px; }
.cat-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cat-name { font-weight: 600; font-size: calc(13.5px * var(--fs, 1)); }
.cat-size { color: var(--faint); font-size: calc(12px * var(--fs, 1)); }
.qual { font-size: calc(10.5px * var(--fs, 1)); text-transform: uppercase; letter-spacing: .04em; border-radius: 5px; padding: 1px 6px; border: 1px solid var(--border); color: var(--muted); }
.qual-high { color: var(--green); border-color: rgba(61,220,151,.4); }
.qual-medium { color: #54a0ff; border-color: rgba(84,160,255,.4); }
/* backup */
.backup-info { background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 12px 14px; font-size: calc(14px * var(--fs, 1)); color: var(--muted); margin-bottom: 14px; }
.backup-actions { display: flex; flex-direction: column; gap: 8px; }
.backup-actions .btn-ghost { text-align: left; }
/* gravador */
.recorder { display: flex; align-items: center; gap: 16px; margin: 18px 0 10px; padding: 16px; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); }
.rec-btn { width: 60px; height: 60px; border-radius: 50%; border: none; background: var(--red); color: #fff; font-size: calc(20px * var(--fs, 1)); cursor: pointer; display: grid; place-items: center; transition: all .15s; box-shadow: 0 4px 16px rgba(255,107,129,.4); }
.rec-btn:hover { transform: scale(1.05); }
.rec-btn.recording { animation: recpulse 1.3s infinite; }
@keyframes recpulse { 0% { box-shadow: 0 0 0 0 rgba(255,107,129,.5);} 70% { box-shadow: 0 0 0 14px rgba(255,107,129,0);} 100% { box-shadow: 0 0 0 0 rgba(255,107,129,0);} }
.rec-time { font-size: calc(22px * var(--fs, 1)); font-weight: 600; font-variant-numeric: tabular-nums; }
.rec-state { font-size: calc(12.5px * var(--fs, 1)); color: var(--muted); }
.rec-meter { display: flex; align-items: center; gap: 3px; height: 20px; margin-top: 10px; }
.rec-meter span { flex: 1; height: 5px; background: var(--border); border-radius: 3px; transition: height .08s ease, background .08s; }
.rec-meter.live span { background: var(--panel-2); }
.rec-meter span.on { height: 18px; background: var(--green); }
.rec-foot { display: flex; gap: 8px; }
/* ── Nota (detalhe / editor) ── */
.note-modal { max-width: 640px; }
.var-badge { font-size: calc(10.5px * var(--fs, 1)); color: var(--accent); background: rgba(124,107,255,.14); border-radius: 999px; padding: 1px 7px; align-self: center; font-weight: 600; }
.note-title-input { width: 100%; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: calc(17px * var(--fs, 1)); font-weight: 600; padding: 10px 12px; }
.note-title-input:focus { outline: none; border-color: var(--accent); }
.note-meta { font-size: calc(12px * var(--fs, 1)); color: var(--faint); margin: 8px 2px 4px; }
.note-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 2px 12px; }
.note-id { font-size: calc(11px * var(--fs, 1)); color: var(--faint); font-family: ui-monospace, monospace; background: var(--panel-2); border-radius: 6px; padding: 2px 7px; }
.note-gavetas { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.note-gav-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 4px 2px 9px; font-size: calc(12px * var(--fs, 1)); color: var(--muted); }
.note-gav-chip button { background: none; border: none; color: var(--faint); cursor: pointer; font-size: calc(11px * var(--fs, 1)); padding: 0 3px; }
.note-gav-chip button:hover { color: var(--red); }
.note-gav-add { background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 3px 8px; font-size: calc(12px * var(--fs, 1)); cursor: pointer; }
.note-gav-add:focus { outline: none; border-color: var(--accent); }
.note-ipa { font-size: calc(14px * var(--fs, 1)); color: #b9b0ff; margin: 0 2px 12px; }
:root[data-theme="light"] .note-ipa { color: #6a59d6; }
.note-gloss { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 2px 14px; }
.note-gloss-lbl { font-size: calc(11px * var(--fs, 1)); text-transform: uppercase; letter-spacing: .05em; color: var(--faint); margin-right: 2px; }
.note-gloss-chip { background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 3px 10px; font-size: calc(12.5px * var(--fs, 1)); cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 5px; transition: all .12s; }
.note-gloss-chip:hover { border-color: var(--accent); color: var(--text); }
.note-gloss-chip .ng-n { font-size: calc(10.5px * var(--fs, 1)); color: var(--accent); font-weight: 700; }
.note-text-foot { display: flex; gap: 8px; margin: 8px 0 4px; }
.note-section-head { font-size: calc(13px * var(--fs, 1)); font-weight: 600; color: var(--muted); margin: 18px 0 10px; border-top: 1px solid var(--border-soft); padding-top: 14px; }
.note-audios { display: flex; flex-direction: column; gap: 6px; }
.audio-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 10px; }
.audio-row .play-btn-sm { flex: none; width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--accent-grad); color: #fff; cursor: pointer; font-size: calc(11px * var(--fs, 1)); }
.audio-info { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.audio-name { font-size: calc(13.5px * var(--fs, 1)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audio-meta { font-size: calc(11.5px * var(--fs, 1)); color: var(--faint); font-variant-numeric: tabular-nums; }
.audio-tag.primary { font-size: calc(10.5px * var(--fs, 1)); color: var(--green); border: 1px solid rgba(61,220,151,.4); border-radius: 999px; padding: 1px 8px; }
.note-add { display: flex; gap: 8px; margin-top: 14px; }
.note-add select { flex: 1; min-width: 0; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; font-size: calc(13.5px * var(--fs, 1)); }
.note-add select:focus { outline: none; border-color: var(--accent); }
/* toasts */
.toasts { position: fixed; bottom: 22px; right: 22px; display: flex; flex-direction: column; gap: 10px; z-index: 200; }
.toast { background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 12px 16px; font-size: calc(14px * var(--fs, 1)); box-shadow: var(--shadow); animation: toastIn .2s ease; max-width: 340px; }
.toast.error { border-left-color: var(--red); }
.toast.success { border-left-color: var(--green); }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px);} to { opacity: 1; transform: none; } }
/* ── Toolbar da biblioteca ── */
.library-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar-controls { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.tb-field { display: inline-flex; align-items: center; gap: 7px; font-size: calc(12.5px * var(--fs, 1)); color: var(--muted); }
.tb-field select { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; font-size: calc(13px * var(--fs, 1)); cursor: pointer; }
.tb-field select:focus { outline: none; border-color: var(--accent); }
.view-toggle { display: inline-flex; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.view-toggle button { background: transparent; border: none; color: var(--faint); padding: 6px 11px; font-size: calc(15px * var(--fs, 1)); cursor: pointer; transition: all .15s; }
.view-toggle button.active { background: var(--accent); color: #fff; }
.library-body { display: flex; gap: 8px; align-items: flex-start; }
.library-body .grid { flex: 1; }
/* trilha A–Z (estilo dicionário) */
.letter-rail { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 1px; padding-left: 4px; }
.letter-rail button { background: none; border: none; color: var(--faint); font-size: calc(11px * var(--fs, 1)); font-weight: 600; cursor: pointer; padding: 1px 4px; border-radius: 4px; line-height: 1.4; }
.letter-rail button:hover { color: var(--accent); }
.letter-rail button:disabled { opacity: .25; cursor: default; }
/* cabeçalho de letra (agrupamento alfabético) */
.letter-head { grid-column: 1 / -1; font-size: calc(13px * var(--fs, 1)); font-weight: 700; color: var(--accent); padding: 6px 2px 2px; border-bottom: 1px solid var(--border-soft); margin-top: 6px; letter-spacing: .03em; }
/* ── Visão em lista (compacta, escaneável) ── */
.grid.list { display: flex; flex-direction: column; gap: 2px; }
.grid.list .letter-head { border-bottom: none; margin-top: 10px; }
.take-row { display: flex; align-items: center; gap: 11px; padding: 7px 10px; border-radius: 9px; transition: background .12s; }
.take-row:hover { background: var(--panel); }
.take-row .play-btn-sm { flex: none; width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--accent-grad); color: #fff; cursor: pointer; font-size: calc(11px * var(--fs, 1)); display: grid; place-items: center; }
.take-row .row-flag { font-size: calc(15px * var(--fs, 1)); flex: none; }
.take-row .row-title { flex: 1; min-width: 0; background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--text); font-size: calc(14px * var(--fs, 1)); font-weight: 600; padding: 4px 6px; }
.take-row .row-title:hover { border-color: var(--border-soft); }
.take-row .row-title:focus { outline: none; background: var(--panel-2); border-color: var(--accent); }
.take-row .row-voice { font-size: calc(12px * var(--fs, 1)); color: var(--faint); white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.take-row .row-dur { font-size: calc(12px * var(--fs, 1)); color: var(--faint); font-variant-numeric: tabular-nums; flex: none; min-width: 38px; text-align: right; }
.take-row .row-actions { display: flex; gap: 1px; opacity: 0; transition: opacity .12s; }
.take-row:hover .row-actions { opacity: 1; }
.take-row.playing { background: rgba(124,107,255,.12); }
.take.playing { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(124,107,255,.25); }
/* gênero */
.gender { font-size: calc(12px * var(--fs, 1)); }
.gender.F { color: #ff8ac4; }
.gender.M { color: #5ab0ff; }
/* filtro de gênero (modal vozes) */
.gender-filter { display: flex; gap: 8px; margin-bottom: 14px; }
.gender-filter button { background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 6px 13px; font-size: calc(13px * var(--fs, 1)); cursor: pointer; transition: all .15s; }
.gender-filter button.active { background: rgba(124,107,255,.16); border-color: var(--accent); color: var(--text); }
.cat-gender { font-size: calc(13px * var(--fs, 1)); margin-left: 2px; }
.cat-gender.F { color: #ff8ac4; }
.cat-gender.M { color: #5ab0ff; }
/* ── Modal importar ── */
.import-opts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 14px 0; }
.opt-check { display: inline-flex; align-items: center; gap: 7px; font-size: calc(13.5px * var(--fs, 1)); color: var(--muted); cursor: pointer; }
.import-foot { display: flex; gap: 10px; justify-content: flex-end; }
.import-result { margin-top: 14px; font-size: calc(13.5px * var(--fs, 1)); color: var(--muted); }
.import-result .ok { color: var(--green); }
.import-details { margin: 8px 0 0; padding-left: 18px; max-height: 110px; overflow: auto; color: var(--faint); line-height: 1.45; }
.import-details li + li { margin-top: 3px; }
.import-page-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 330px); gap: 16px; align-items: start; }
.import-workspace { padding: clamp(16px, 2.5vw, 26px); min-width: 0; }
.import-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.import-section-head h2 { margin: 0 0 5px; font-size: calc(19px * var(--fs, 1)); letter-spacing: 0; }
.import-section-head p { margin: 0; color: var(--muted); font-size: calc(13px * var(--fs, 1)); }
.import-sidebar { display: grid; gap: 12px; min-width: 0; }
.import-info-card { padding: 16px; }
.import-info-card h3 { margin: 0 0 12px; font-size: calc(14px * var(--fs, 1)); letter-spacing: 0; }
.import-opts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.import-opts-grid .tb-field { min-width: 0; }
.import-opts-grid select { width: 100%; }
.import-translate-check { min-height: 42px; align-self: center; }
#importTranslateField.disabled { opacity: .48; }
.import-queue { display: grid; gap: 5px; max-height: 150px; overflow-y: auto; }
.import-queue:empty { display: none; }
.import-queue > span { display: flex; justify-content: space-between; gap: 10px; padding: 7px 9px; border: 1px solid var(--border-soft); border-radius: 6px; color: var(--muted); font-size: calc(12px * var(--fs, 1)); overflow-wrap: anywhere; }
.import-queue small { flex: none; color: var(--faint); }
.import-queue .working { border-color: var(--accent); }
.import-queue .done small { color: var(--green); }
.import-queue .pending small { color: var(--accent); }
.import-queue .error small { color: var(--red); }
.import-engine-info { display: grid; gap: 10px; }
.import-engine-row { display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 9px; align-items: start; color: var(--muted); }
.import-engine-row .ed-dot { margin-top: 5px; }
.import-engine-row.on .ed-dot { background: var(--green); }
.import-engine-row strong, .import-engine-row small { display: block; }
.import-engine-row strong { color: var(--text); font-size: calc(12.5px * var(--fs, 1)); }
.import-engine-row small { margin-top: 2px; line-height: 1.35; color: var(--faint); }
.import-recent { display: grid; gap: 5px; }
.import-recent-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; border: 0; border-bottom: 1px solid var(--border-soft); background: transparent; color: var(--text); padding: 9px 2px; text-align: left; cursor: pointer; }
.import-recent-row:hover { color: var(--accent); }
.import-recent-main { min-width: 0; }
.import-recent-main strong, .import-recent-main small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.import-recent-main strong { font-size: calc(12.5px * var(--fs, 1)); }
.import-recent-main small { margin-top: 3px; color: var(--faint); }
.import-recent-badges { display: flex; gap: 4px; }
.import-recent-badges i { display: none; padding: 2px 5px; border: 1px solid var(--border); border-radius: 5px; color: var(--faint); font-size: 9px; font-style: normal; }
.import-recent-badges i.on { display: inline-block; color: var(--green); border-color: color-mix(in srgb, var(--green) 42%, var(--border)); }
.import-recent-badges i.pending { display: inline-block; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); }
/* ── Início (dashboard) ── */
.home-stats-head { font-size: calc(12px * var(--fs, 1)); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 4px 2px 12px; }
.home-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 14px; margin-bottom: 28px; }
.stat { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.stat-val { font-size: calc(22px * var(--fs, 1)); font-weight: 700; letter-spacing: -.02em; }
.stat-label { font-size: calc(12px * var(--fs, 1)); color: var(--muted); margin-top: 4px; }
.home-grid { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: start; }
.home-block { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 22px; }
.home-side .home-block:last-child { margin-bottom: 0; }
.home-block-head { display: flex; align-items: center; justify-content: space-between; font-size: calc(12px * var(--fs, 1)); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 12px; }
.home-recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 14px; }
.home-gavetas { display: flex; flex-direction: column; gap: 4px; }
.home-gav { display: flex; align-items: center; gap: 9px; width: 100%; background: transparent; border: 1px solid transparent; border-radius: 9px; padding: 8px 10px; cursor: pointer; color: var(--text); font-family: inherit; font-size: calc(13.5px * var(--fs, 1)); text-align: left; transition: background .14s; }
.home-gav:hover { background: var(--panel-2); }
.home-gav-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-gav-n { font-size: calc(11.5px * var(--fs, 1)); color: var(--faint); font-variant-numeric: tabular-nums; }
.home-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.shortcut { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 10px; cursor: pointer; color: var(--text); font-family: inherit; font-size: calc(13px * var(--fs, 1)); transition: all .14s; }
.shortcut:hover { border-color: var(--accent); background: var(--panel); }
.empty .btn-primary { margin-top: 14px; }
/* ── Estúdio: recentes ── */
.studio-recent { margin-top: 30px; }
.studio-recent-head { display: flex; align-items: center; justify-content: space-between; font-size: calc(13px * var(--fs, 1)); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 14px; }
.studio-recent .grid { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
/* ── Glossário aprimorado ── */
.glossary-block .side-head { align-items: center; }
.gloss-sort { display: inline-flex; background: var(--panel-2); border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.gloss-sort button { background: transparent; border: none; color: var(--faint); font-size: calc(11px * var(--fs, 1)); font-weight: 600; padding: 3px 7px; cursor: pointer; transition: all .12s; font-family: inherit; }
.gloss-sort button.active { background: var(--accent); color: #fff; }
.word-index { max-height: 46vh; }
/* Glossário (página dedicada): dicionário de 2 painéis — índice + detalhe */
/* minmax(0,…) impede a coluna de crescer além da tela por causa de texto sem quebra. */
.gloss-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
.gloss-index { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 10px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; max-height: calc(100vh - 130px); max-height: calc(100dvh - 130px); }
.gloss-index-head { display: flex; justify-content: flex-end; }
.gloss-index-head .gloss-sort button { padding: 5px 10px; font-size: calc(12px * var(--fs, 1)); }
.gloss-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; padding-right: 2px; }
.gloss-word { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-width: 0; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--text); padding: 8px 11px; font-size: calc(14px * var(--fs, 1)); font-family: inherit; cursor: pointer; text-align: left; transition: background .12s, border-color .12s; }
.gloss-word:hover { background: var(--panel-2); }
.gloss-word.active { background: rgba(124,107,255,.16); border-color: var(--accent); }
.gloss-word .gw-term { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gloss-word .gw-n { flex: none; font-size: calc(11.5px * var(--fs, 1)); color: var(--faint); font-variant-numeric: tabular-nums; background: var(--panel-2); border-radius: 999px; padding: 1px 8px; }
.gloss-detail { min-height: 300px; }
.gloss-detail-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; color: var(--muted); padding: 60px 20px; }
.gd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 18px; }
.gd-head-main { min-width: 0; }
.gd-term { font-size: calc(26px * var(--fs, 1)); font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.gd-ipa { color: var(--accent); font-size: calc(15px * var(--fs, 1)); margin-top: 4px; font-family: "Times New Roman", serif; overflow-wrap: anywhere; }
.gd-trans { color: var(--muted); font-size: calc(14px * var(--fs, 1)); margin-top: 6px; overflow-wrap: anywhere; }
.gd-say { flex: none; width: 52px; height: 52px; border-radius: 50%; border: none; background: var(--accent-grad); color: #fff; font-size: calc(20px * var(--fs, 1)); cursor: pointer; box-shadow: 0 6px 20px rgba(124,107,255,.35); transition: transform .1s; }
.gd-say:hover { transform: scale(1.06); }
.gd-refs-head { font-size: calc(12px * var(--fs, 1)); text-transform: uppercase; letter-spacing: .05em; color: var(--faint); margin-bottom: 10px; }
.gd-refs { display: flex; flex-direction: column; gap: 8px; }
.gd-ref { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 11px 13px; transition: border-color .15s; }
.gd-ref:hover { border-color: var(--border); }
.gd-ref-play { flex: none; width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--accent-grad); color: #fff; font-size: calc(13px * var(--fs, 1)); cursor: pointer; box-shadow: 0 4px 14px rgba(124,107,255,.35); }
.gd-ref-main { flex: 1; min-width: 0; }
.gd-ref-title { font-size: calc(13px * var(--fs, 1)); font-weight: 600; display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd-ref-title .lang-tag { flex: none; font-size: calc(12px * var(--fs, 1)); }
.gd-ref-text { font-size: calc(12.5px * var(--fs, 1)); color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd-ref-text mark { background: rgba(124,107,255,.28); color: var(--text); border-radius: 3px; padding: 0 2px; }
.gd-ref-open { flex: none; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: calc(15px * var(--fs, 1)); cursor: pointer; transition: all .15s; }
.gd-ref-open:hover { border-color: var(--accent); color: var(--text); }
@media (max-width: 820px) {
.gloss-layout { grid-template-columns: minmax(0, 1fr); }
.gloss-index { position: static; max-height: 42vh; }
.gd-term { font-size: calc(22px * var(--fs, 1)); }
.gd-head { padding: 15px; }
.gd-say { width: 46px; height: 46px; font-size: calc(18px * var(--fs, 1)); }
}
/* ── Vozes (view) ── */
.voices-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.engine-filter { display: flex; gap: 8px; }
.engine-filter button { background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 6px 13px; font-size: calc(13px * var(--fs, 1)); cursor: pointer; transition: all .15s; font-family: inherit; }
.engine-filter button.active { background: rgba(124,107,255,.16); border-color: var(--accent); color: var(--text); }
.catalog { columns: 2; column-gap: 18px; }
.catalog-group { break-inside: avoid; margin-bottom: 16px; }
.engine-tag { font-size: calc(10px * var(--fs, 1)); text-transform: uppercase; letter-spacing: .04em; border-radius: 5px; padding: 1px 6px; border: 1px solid var(--border); color: var(--faint); }
.engine-tag.kokoro { color: #b06bff; border-color: rgba(176,107,255,.4); }
.engine-tag.coqui { color: #3ddc97; border-color: rgba(61,220,151,.4); }
/* ── Config ── */
.sb-user { cursor: pointer; }
.sb-user:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.profile-head-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.profile-eyebrow, .profile-panel-head > div > span { display: block; color: var(--accent); font-size: calc(10px * var(--fs, 1)); font-weight: 800; letter-spacing: .12em; margin-bottom: 5px; }
.profile-loading { padding: 28px; color: var(--muted); }
.profile-page { display: grid; gap: 18px; }
.profile-identity { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(220px, .7fr); align-items: center; gap: 16px; padding: 18px 20px; }
.profile-avatar { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #1a1535)); font-size: calc(24px * var(--fs, 1)); font-weight: 800; }
.profile-identity-copy { min-width: 0; }
.profile-identity-copy h2 { margin: 0 0 3px; font-size: calc(19px * var(--fs, 1)); }
.profile-identity-copy p { margin: 0 0 8px; color: var(--muted); font-size: calc(12px * var(--fs, 1)); overflow-wrap: anywhere; }
.profile-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.profile-badge, .profile-type-badge, .profile-private-chip { display: inline-flex; align-items: center; width: fit-content; border: 1px solid var(--border); border-radius: 999px; padding: 3px 8px; color: var(--muted); background: var(--panel-2); font-size: calc(10px * var(--fs, 1)); font-weight: 700; }
.profile-badge.private, .profile-private-chip { color: var(--green); border-color: color-mix(in srgb, var(--green) 35%, var(--border)); background: color-mix(in srgb, var(--green) 7%, var(--panel)); }
.profile-private-seal { border-left: 2px solid var(--green); padding-left: 13px; display: grid; gap: 3px; }
.profile-private-seal strong { font-size: calc(12px * var(--fs, 1)); color: var(--text); }
.profile-private-seal span { color: var(--faint); font-size: calc(10.5px * var(--fs, 1)); line-height: 1.45; }
.profile-metric-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.profile-metric { min-width: 0; padding: 14px; display: grid; gap: 5px; }
.profile-metric > span { color: var(--muted); font-size: calc(10.5px * var(--fs, 1)); }
.profile-metric strong { font-size: calc(20px * var(--fs, 1)); line-height: 1.1; overflow-wrap: anywhere; }
.profile-metric small { color: var(--faint); font-size: calc(9.5px * var(--fs, 1)); line-height: 1.35; }
.profile-columns { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 18px; align-items: start; }
.profile-panel { padding: 18px; min-width: 0; }
.profile-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 15px; }
.profile-panel-head h2 { margin: 0; font-size: calc(17px * var(--fs, 1)); }
.profile-level-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; }
.profile-level-orb { width: 72px; height: 72px; border-radius: 22px; display: grid; place-content: center; text-align: center; background: color-mix(in srgb, var(--accent) 13%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); }
.profile-level-orb strong { color: var(--accent); font-size: calc(24px * var(--fs, 1)); line-height: 1; }
.profile-level-orb span { color: var(--muted); font-size: calc(10px * var(--fs, 1)); margin-top: 4px; }
.profile-level-summary h3 { margin: 0 0 5px; font-size: calc(14px * var(--fs, 1)); }
.profile-level-summary p { margin: 0; color: var(--muted); font-size: calc(11px * var(--fs, 1)); }
.profile-fluency-bar { height: 7px; overflow: hidden; border-radius: 999px; background: var(--panel-2); margin: 15px 0; }
.profile-fluency-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--green)); }
.profile-age-reference { padding: 12px; border: 1px solid var(--border-soft); border-radius: 11px; display: grid; gap: 4px; background: var(--panel-2); }
.profile-age-reference span { color: var(--muted); font-size: calc(10px * var(--fs, 1)); text-transform: uppercase; letter-spacing: .06em; }
.profile-age-reference strong { font-size: calc(13px * var(--fs, 1)); }
.profile-age-reference small { color: var(--faint); font-size: calc(9.5px * var(--fs, 1)); line-height: 1.45; }
.profile-history { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.profile-history > span { border: 1px solid var(--border-soft); border-radius: 8px; padding: 5px 7px; color: var(--muted); font-size: calc(10px * var(--fs, 1)); }
.profile-history b { color: var(--accent); }
.profile-history small { color: var(--faint); }
.profile-word-list { max-height: 386px; overflow: auto; display: grid; gap: 6px; scrollbar-width: thin; }
.profile-word-row { display: grid; grid-template-columns: 26px minmax(70px, .7fr) minmax(90px, 1fr) auto; gap: 8px; align-items: center; padding: 9px; border: 1px solid var(--border-soft); border-radius: 9px; }
.profile-word-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(12px * var(--fs, 1)); }
.profile-word-row > span:not(.profile-word-state), .profile-word-row small { color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(9.5px * var(--fs, 1)); }
.profile-word-state { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; color: var(--green); background: color-mix(in srgb, var(--green) 10%, transparent); }
.profile-word-row.unknown .profile-word-state { color: var(--orange); background: color-mix(in srgb, var(--orange) 10%, transparent); }
.profile-panel-note { color: var(--faint); font-size: calc(11px * var(--fs, 1)); margin: -7px 0 14px; }
.profile-learning-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.profile-learning-grid article { min-width: 0; padding: 12px; border: 1px solid var(--border-soft); border-radius: 11px; background: var(--panel-2); display: grid; gap: 4px; }
.profile-learning-grid span { color: var(--muted); font-size: calc(9.5px * var(--fs, 1)); }
.profile-learning-grid strong { font-size: calc(19px * var(--fs, 1)); font-variant-numeric: tabular-nums; }
.profile-learning-grid small { color: var(--faint); font-size: calc(9px * var(--fs, 1)); line-height: 1.35; }
.profile-learning-levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.profile-learning-levels article { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: 10px; }
.profile-learning-levels article > span { font-size: 20px; }
.profile-learning-levels article > div { min-width: 0; }
.profile-learning-levels strong, .profile-learning-levels small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-learning-levels strong { font-size: calc(11.5px * var(--fs, 1)); }
.profile-learning-levels small { margin-top: 2px; color: var(--faint); font-size: calc(9px * var(--fs, 1)); }
.profile-learning-levels i { display: block; height: 4px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: var(--panel-2); }
.profile-learning-levels i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--green)); }
.profile-learning-levels em { color: var(--muted); font-size: calc(10px * var(--fs, 1)); font-style: normal; font-variant-numeric: tabular-nums; }
.profile-personal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.profile-personal-card { min-width: 0; min-height: 142px; padding: 13px; display: flex; flex-direction: column; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--panel-2); cursor: pointer; transition: border-color .14s, transform .14s; }
.profile-personal-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.profile-personal-top { display: flex; justify-content: space-between; gap: 6px; }
.profile-personal-card h3 { margin: 12px 0 5px; font-size: calc(13px * var(--fs, 1)); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.profile-personal-card p { margin: 0; color: var(--muted); font-size: calc(10.5px * var(--fs, 1)); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.profile-personal-card footer { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; color: var(--faint); font-size: calc(9.5px * var(--fs, 1)); }
.profile-empty { padding: 22px; border: 1px dashed var(--border); border-radius: 11px; color: var(--faint); text-align: center; font-size: calc(11px * var(--fs, 1)); }
.preference-sync-status { padding: 10px 11px; border: 1px solid var(--border-soft); border-radius: 9px; background: var(--panel-2); color: var(--muted); font-size: calc(11px * var(--fs, 1)); margin: 12px 0; }
.config-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 20px; align-items: start; }
.config-card { padding: 20px; }
.config-card h3 { margin: 0 0 4px; font-size: calc(16px * var(--fs, 1)); display: flex; align-items: center; gap: 9px; }
.config-card h3 svg { width: 18px; height: 18px; stroke: var(--accent); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: none; color: var(--muted); border-radius: 7px; padding: 8px 14px; font-size: calc(13.5px * var(--fs, 1)); cursor: pointer; font-family: inherit; transition: all .14s; }
.seg button svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.seg button:hover { color: var(--text); }
.seg button.active { background: var(--panel); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
:root[data-theme="light"] .seg button.active { background: #fff; }
:root[data-theme="sun"] .seg button.active { background: #fffaf0; }
:root[data-theme="amoled"] .seg button.active { background: #141414; }
/* Seletores de configuração têm 5-9 opções (tema, cor do marcador…): quebram em
linhas em vez de estourar o cartão. Sem media query de propósito — quando cabe
numa linha o wrap é inócuo, e assim NENHUMA largura corta a última opção
(o "Sistema" do tema sumia entre ~560px e ~900px). */
.config-card .seg { flex-wrap: wrap; max-width: 100%; }
.dropzone { border: 2px dashed var(--border); border-radius: var(--radius-sm); padding: 26px 18px; text-align: center; cursor: pointer; transition: all .15s; background: var(--panel-2); margin: 6px 0 14px; }
.dropzone:hover, .dropzone:focus { border-color: var(--accent); outline: none; }
.dropzone.drag { border-color: var(--accent); background: rgba(124,107,255,.1); }
.dz-art { font-size: calc(30px * var(--fs, 1)); margin-bottom: 8px; opacity: .85; }
.dz-text { font-size: calc(14px * var(--fs, 1)); color: var(--text); }
.dz-sub { font-size: calc(12px * var(--fs, 1)); color: var(--faint); margin-top: 4px; }
.adv-folder { margin-top: 14px; border-top: 1px solid var(--border-soft); padding-top: 12px; }
.adv-folder summary { cursor: pointer; font-size: calc(13px * var(--fs, 1)); color: var(--muted); }
.adv-folder summary:hover { color: var(--text); }
.adv-folder .field { margin: 12px 0; }
.adv-folder .opt-check { margin-bottom: 10px; }
.engines { display: flex; flex-direction: column; gap: 8px; }
.engine-line { display: flex; align-items: center; gap: 10px; font-size: calc(13.5px * var(--fs, 1)); padding: 8px 10px; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 9px; }
.engine-line .ed-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); flex: none; }
.engine-line.on .ed-dot { background: var(--green); }
.engine-line .ed-name { font-weight: 600; }
.engine-line .ed-meta { color: var(--faint); font-size: calc(12px * var(--fs, 1)); margin-left: auto; }
.binary-info { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.binary-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 9px; font-size: calc(13px * var(--fs, 1)); }
.binary-row span { color: var(--faint); }
.binary-row strong, .binary-row code { color: var(--text); font-size: calc(12.5px * var(--fs, 1)); text-align: right; overflow-wrap: anywhere; }
.seg.tiny button { padding: 5px 8px; font-size: calc(11.5px * var(--fs, 1)); }
.marker-seg { flex-wrap: wrap; }
#fontFamilyToggle button,
#readingFontToggle button,
#markerColorToggle button,
#trackerStyleToggle button { min-height: 40px; }
.marker-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 5px; box-shadow: 0 0 0 2px rgba(255,255,255,.08); }
.marker-dot.blue { background: #54a0ff; }
.marker-dot.green { background: #3ddc97; }
.marker-dot.amber { background: #feca57; }
.marker-dot.rose { background: #ff6b81; }
.marker-dot.cyan { background: #26d0ce; }
.marker-dot.orange { background: #ff8a3d; }
.marker-dot.violet { background: #9d83ff; }
.marker-dot.lime { background: #b9df46; }
.marker-dot.white { background: #f5f2e8; border: 1px solid #8b8b8b; }
/* Botão que abre a gaveta de filtros — compacto, sempre visível na toolbar. */
.filters-toggle { display: inline-flex; align-items: center; gap: 7px; background: var(--panel); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 8px 13px; font-size: calc(13.5px * var(--fs, 1)); cursor: pointer; font-family: inherit; transition: all .15s; white-space: nowrap; }
.filters-toggle:hover { border-color: var(--accent); }
#view-dictionary.filters-open .filters-toggle { border-color: var(--accent); color: var(--accent); }
@media (max-width: 980px) {
.profile-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.profile-learning-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.profile-personal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.letter-rail { display: none !important; }
.catalog { columns: 1; }
.home-grid { grid-template-columns: 1fr; }
.home-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.home-side .home-block { margin-bottom: 0; }
}
/* No mobile: sidebar vira drawer (aberto pelo "Menu" da barra inferior) e os
destinos principais vivem na barra inferior fixa (mais intuitivo com o polegar). */
@media (max-width: 820px) {
.profile-columns { grid-template-columns: 1fr; }
.profile-identity { grid-template-columns: auto minmax(0, 1fr); }
.profile-private-seal { grid-column: 1 / -1; }
.shell, body.nav-collapsed .shell { grid-template-columns: 1fr; }
.sidebar { position: fixed; top: 0; left: 0; width: 264px; height: 100vh; height: 100dvh; box-shadow: var(--shadow); }
.menu-toggle { display: none !important; } /* substituído pela barra inferior */
body:not(.nav-collapsed) .sidebar-backdrop { opacity: 1; pointer-events: auto; }
.main { padding: 18px 14px calc(72px + env(safe-area-inset-bottom, 0px)); }
body.nav-collapsed .main { padding-left: 14px; }
.bottom-nav { display: flex; }
body.reading .bottom-nav,
body.player-open .bottom-nav { display: none; } /* leitor/player imersivo esconde a barra */
.toasts { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 560px) {
.profile-head-actions { width: 100%; }
.profile-head-actions > button { flex: 1; min-height: 44px; }
.profile-identity { padding: 14px; gap: 12px; }
.profile-avatar { width: 50px; height: 50px; border-radius: 15px; }
.profile-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.profile-learning-grid, .profile-learning-levels { grid-template-columns: 1fr; }
.profile-metric { padding: 12px; }
.profile-panel { padding: 14px; }
.profile-panel-head { flex-direction: column; }
.profile-word-filter { width: 100%; }
.profile-word-filter button { flex: 1; justify-content: center; min-height: 40px; padding-inline: 7px; }
.profile-word-row { grid-template-columns: 26px minmax(0, 1fr) auto; }
.profile-word-row > span:not(.profile-word-state) { grid-column: 2 / -1; grid-row: 2; }
.profile-word-row small { grid-column: 3; grid-row: 1; }
.profile-personal-grid { grid-template-columns: 1fr; }
.profile-personal-card { min-height: 124px; }
#fontFamilyToggle button,
#readingFontToggle button,
#markerColorToggle button,
#trackerStyleToggle button { min-height: 44px; }
.composer-head { flex-direction: column; align-items: stretch; }
#voiceSelect { width: 100%; }
.composer-foot { flex-direction: column; align-items: stretch; }
/* títulos/seções mais compactos e grids com respiro menor no celular */
.view-head { margin-bottom: 15px; gap: 10px; }
.view-head h1 { font-size: calc(20px * var(--fs, 1)); }
.view-sub { font-size: calc(12.5px * var(--fs, 1)); }
.home-stats { gap: 10px; margin-bottom: 20px; }
.home-block { padding: 13px; margin-bottom: 16px; }
/* telefone estreito: Gavetas/Atalhos empilham (2 colunas criavam piso ~390px
que estourava a tela e empurrava os cards de Recentes pra fora à direita) */
.home-side { grid-template-columns: 1fr; gap: 16px; }
.grid { gap: 12px; }
.studio-recent { margin-top: 22px; }
.search { min-width: 0; width: 100%; }
/* cards de áudio compactos no celular (menos altura, sem estourar largura) */
.take { padding: 11px 12px; gap: 8px; }
.take-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.take-meta { width: 100%; gap: 5px; }
.take-actions { width: 100%; max-width: none; flex-wrap: wrap; justify-content: flex-start; padding-top: 7px; border-top: 1px solid var(--border-soft); }
.take-title { font-size: calc(13.5px * var(--fs, 1)); }
.take-text { font-size: calc(12.5px * var(--fs, 1)); -webkit-line-clamp: 2; }
.take-trans, .take-note { font-size: calc(11.5px * var(--fs, 1)); }
.play-btn { width: 34px; height: 34px; font-size: calc(12px * var(--fs, 1)); }
.player { gap: 9px; }
.track-row { font-size: calc(10.5px * var(--fs, 1)); }
.metrics-bar { font-size: calc(11px * var(--fs, 1)); }
.stat { padding: 12px 14px; }
.stat-val { font-size: calc(18px * var(--fs, 1)); }
/* visão lista: some voz p/ caber título + ações */
.take-row .row-voice { display: none; }
.take-row { gap: 8px; padding: 6px 6px; }
/* seletores de tema/fonte no mobile: 5 opções (Escuro/Claro/Sun/AMOLED/Sistema)
não cabem numa linha — QUEBRAM em várias linhas em vez de espremer/cortar */
.config-card .seg { display: flex; flex-wrap: wrap; width: 100%; }
.config-card .seg button { flex: 1 1 auto; min-width: 92px; justify-content: center; padding: 8px 6px; font-size: calc(12.5px * var(--fs, 1)); }
.config-card .seg button svg { flex: none; }
/* toolbar da biblioteca: controles quebram sem empurrar a largura */
.library-toolbar { gap: 8px; }
.toolbar-controls { flex-wrap: wrap; gap: 8px; }
}
/* ══════════════ LIVROS (leitor) ══════════════ */
/* Estante */
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 16px; }
.book-card { position: relative; background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: border-color .15s, transform .15s; animation: rise .3s ease; }
.book-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.book-cover { height: 116px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: calc(20px * var(--fs, 1)); background: var(--accent-grad); color: #fff; }
.book-initials { font-size: calc(34px * var(--fs, 1)); font-weight: 800; letter-spacing: .02em; }
.book-info { padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; }
.book-title { font-weight: 600; font-size: calc(14.5px * var(--fs, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-meta { font-size: calc(12px * var(--fs, 1)); color: var(--muted); }
.book-prog { height: 5px; background: var(--panel-2); border-radius: 999px; overflow: hidden; margin-top: 3px; }
.book-prog-fill { height: 100%; background: var(--accent-grad); }
.book-prog-lbl { font-size: calc(11px * var(--fs, 1)); color: var(--faint); }
.book-del { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.4); color: #fff; opacity: 0; }
.book-card:hover .book-del { opacity: 1; }
/* ações do card: ler / dicionário direto da estante */
.book-actions { display: flex; gap: 8px; padding: 0 12px 12px; }
.book-act { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 9px; padding: 8px 4px; font-size: calc(12px * var(--fs, 1)); cursor: pointer; font-family: inherit; transition: all .14s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-act:hover { border-color: var(--accent); }
.book-act.primary { background: var(--accent-grad); border-color: transparent; color: #fff; font-weight: 600; }
.book-act.primary:hover { transform: translateY(-1px); }
@media (max-width: 390px) { .book-act span[aria-hidden] { display: none; } }
/* vocabulário: badges nos cards */
.vocab-kind { align-self: flex-start; font-size: calc(10px * var(--fs, 1)); text-transform: uppercase; letter-spacing: .05em; color: var(--accent); border: 1px dashed var(--accent); border-radius: 5px; padding: 1px 7px; }
.vocab-src { font-size: calc(11px * var(--fs, 1)); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-actions .icon-btn.done { color: var(--green); border-color: rgba(61,220,151,.5); }
/* ── Player dedicado (áudio próprio + karaokê + tradução) ── */
#view-player .reader-player { position: fixed; }
.pl-body { max-width: 880px; margin: 0 auto; padding: 0 clamp(8px, 2vw, 24px) 130px; }
.pl-view-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap; margin: 2px 4px 12px; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: 11px; background: color-mix(in srgb, var(--panel-2) 76%, transparent); }
.pl-focus-control { display: flex; align-items: center; gap: 8px; }
.pl-view-label, .pl-type-controls label > span { color: var(--faint); font-size: calc(10px * var(--fs, 1)); font-weight: 750; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.pl-type-controls { display: flex; align-items: center; justify-content: flex-end; gap: 8px 14px; flex: 1 1 430px; }
.pl-type-controls label { display: grid; grid-template-columns: auto minmax(88px, 1fr) 48px; align-items: center; gap: 7px; min-width: min(100%, 205px); flex: 1 1 180px; }
.pl-type-controls input[type="range"] { width: 100%; min-width: 76px; accent-color: var(--marker); cursor: pointer; }
.pl-type-controls output { color: var(--text); font-size: calc(10.5px * var(--fs, 1)); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.pl-type-reset { min-height: 30px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel); color: var(--muted); font: inherit; font-size: calc(10.5px * var(--fs, 1)); cursor: pointer; }
.pl-type-reset:hover, .pl-type-reset:focus-visible { color: var(--text); border-color: var(--marker); }
.pl-now { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(8px); color: var(--muted); box-shadow: var(--shadow); }
.pl-now.warn { border-color: rgba(255,180,84,.45); background: color-mix(in srgb, #ffb454 10%, var(--panel)); color: var(--text); }
.pl-now span { font-size: calc(11px * var(--fs, 1)); color: var(--faint); font-variant-numeric: tabular-nums; }
.pl-now strong { color: var(--text); font-size: calc(18px * var(--fs, 1)); }
.pl-now em { color: var(--faint); font-size: calc(12.5px * var(--fs, 1)); font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pl-doc, .pl-trans, .pl-zen-text { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-kerning: normal; font-optical-sizing: auto; font-synthesis: none; }
.pl-doc { font-family: var(--reading-font); font-size: calc(var(--pl-karaoke-font-size, 21px) * var(--fs, 1)); line-height: 2; color: var(--text); padding: 10px 4px 18px; overflow-wrap: anywhere; }
.pl-line { margin: 0 0 14px; padding: 6px 8px; border-left: 3px solid transparent; border-radius: 8px; transition: background .14s, border-color .14s; }
.pl-line.on { background: var(--marker-soft); border-left-color: var(--marker); }
/* Transição do destaque: 80ms fazia a cor PISCAR de palavra em palavra (parecia
que não estava acompanhando). ~200ms com easing faz a cor escorrer — a palavra
que sai desvanece enquanto a próxima acende, e a leitura parece fluir. */
.pkw { cursor: pointer; border-radius: 5px; padding: 1px 2px; transition: background .2s ease-out, color .16s ease-out, box-shadow .2s ease-out; }
.pkw:hover { background: var(--marker-soft); }
.pkw.on { background: var(--marker); color: #061015; box-shadow: 0 3px 12px var(--marker-strong); }
.pl-line-original { min-width: 0; }
/* A tradução usa a fonte local da interface: evita o itálico artificial de
fontes ausentes no sistema e mantém o desenho consistente entre máquinas. */
.pl-line-trans { display: none; margin-top: 6px; color: color-mix(in srgb, var(--text) 91%, transparent); font-family: var(--ui-font); font-size: calc(var(--pl-translation-font-size, 17px) * var(--fs, 1)); line-height: 1.62; font-style: normal; font-weight: 500; }
.pl-line-trans button { margin-right: 7px; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); cursor: pointer; vertical-align: middle; }
.pl-doc.trans-below .pl-line-trans { display: block; }
.pl-doc.trans-side .pl-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, .88fr); gap: 18px; align-items: start; }
.pl-doc.trans-side .pl-line-trans { display: block; margin-top: 0; padding: 2px 0 2px 14px; border-left: 2px solid var(--marker); }
.pl-plain { color: var(--muted); font-size: calc(var(--pl-karaoke-font-size, 21px) * var(--fs, 1)); line-height: 1.8; white-space: pre-wrap; }
/* ── Modo revisão do Player (corrigir karaokê / original / tradução) ── */
#plEditBtn.on { background: var(--marker-soft); border-color: var(--marker); color: var(--text); }
.pl-edit-status { align-self: center; font-size: 12px; color: var(--muted); white-space: nowrap; }
.pl-edit-status.saving { color: var(--marker); }
.pl-edit-hint { border: 1px solid var(--border); background: var(--panel-2); color: var(--muted); border-radius: 12px; padding: 10px 14px; margin: 4px 4px 12px; font-size: calc(13px * var(--fs, 1)); line-height: 1.55; }
.pl-edit-hint em { font-style: normal; font-weight: 600; color: var(--text); background: var(--marker-soft); border-radius: 4px; padding: 0 4px; }
.pl-doc.pl-editing .pkw { cursor: text; box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--marker) 45%, transparent); }
.pl-doc.pl-editing .pkw:hover { background: var(--marker-soft); box-shadow: inset 0 -2px 0 var(--marker); }
#plLinkBtn.on { color: var(--text); background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: var(--accent); }
.pl-link-panel { display: grid; gap: 10px; margin: 4px 4px 14px; padding: 12px 14px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; font-size: calc(13px * var(--fs, 1)); }
.pl-link-selection { min-width: 0; padding: 8px 10px; color: var(--text); background: var(--panel); border-radius: 8px; overflow-wrap: anywhere; }
.pl-link-rule { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)) auto auto; gap: 8px 14px; align-items: end; padding: 10px; border: 1px solid var(--border-soft); border-radius: 10px; background: color-mix(in srgb, var(--panel) 72%, transparent); }
.pl-link-identity { display: grid; gap: 5px; min-width: 0; color: var(--faint); font-size: calc(11px * var(--fs, 1)); font-weight: 650; }
.pl-link-identity input, .pl-link-custom-color input[type="text"] { height: 36px; min-width: 0; padding: 0 10px; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; font: inherit; }
.pl-link-identity input:focus, .pl-link-custom-color input[type="text"]:focus { outline: 2px solid color-mix(in srgb, var(--accent) 38%, transparent); border-color: var(--accent); }
.pl-link-check { min-height: 36px; align-items: center; white-space: nowrap; }
.pl-link-check.disabled { opacity: .48; }
.pl-link-match-info { grid-column: 1 / -1; color: var(--green); font-size: calc(11px * var(--fs, 1)); }
.pl-link-match-info.warn { color: var(--red); }
.pl-link-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pl-link-delete:not(:disabled) { color: var(--red); }
.pl-link-palette { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; background: var(--panel); border-radius: 16px; }
.pl-link-palette button { width: 40px; height: 40px; padding: 0; background: var(--link-color); border: 2px solid transparent; border-radius: 50%; cursor: pointer; }
.pl-link-palette button.active { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.pl-link-custom-color { display: inline-grid; grid-template-columns: auto 34px 82px; align-items: center; gap: 6px; min-height: 44px; padding: 4px 6px 4px 9px; color: var(--faint); background: var(--panel); border-radius: 12px; font-size: calc(11px * var(--fs, 1)); font-weight: 650; }
.pl-link-custom-color input[type="color"] { width: 34px; height: 34px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); cursor: pointer; }
.pl-link-custom-color input[type="text"] { width: 82px; height: 34px; padding-inline: 7px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; text-transform: lowercase; }
[data-color="cyan"], .link-cyan { --link-color: #27d7c7; --link-soft: color-mix(in srgb, #27d7c7 24%, transparent); }
[data-color="pink"], .link-pink { --link-color: #f26aa7; --link-soft: color-mix(in srgb, #f26aa7 24%, transparent); }
[data-color="amber"], .link-amber { --link-color: #f4bd24; --link-soft: color-mix(in srgb, #f4bd24 25%, transparent); }
[data-color="violet"], .link-violet { --link-color: #9d83ff; --link-soft: color-mix(in srgb, #9d83ff 24%, transparent); }
[data-color="green"], .link-green { --link-color: #55d68b; --link-soft: color-mix(in srgb, #55d68b 24%, transparent); }
[data-color="blue"], .link-blue { --link-color: #55a7ff; --link-soft: color-mix(in srgb, #55a7ff 24%, transparent); }
[data-color="coral"], .link-coral { --link-color: #ff7a6b; --link-soft: color-mix(in srgb, #ff7a6b 24%, transparent); }
[data-color="orange"], .link-orange { --link-color: #ff9f43; --link-soft: color-mix(in srgb, #ff9f43 24%, transparent); }
[data-color="ruby"], .link-ruby { --link-color: #ef5d78; --link-soft: color-mix(in srgb, #ef5d78 24%, transparent); }
[data-color="peach"], .link-peach { --link-color: #ffb38a; --link-soft: color-mix(in srgb, #ffb38a 24%, transparent); }
[data-color="gold"], .link-gold { --link-color: #e5c64b; --link-soft: color-mix(in srgb, #e5c64b 24%, transparent); }
[data-color="mint"], .link-mint { --link-color: #59e3b2; --link-soft: color-mix(in srgb, #59e3b2 24%, transparent); }
[data-color="sky"], .link-sky { --link-color: #70d6ff; --link-soft: color-mix(in srgb, #70d6ff 24%, transparent); }
[data-color="lavender"], .link-lavender { --link-color: #c3a6ff; --link-soft: color-mix(in srgb, #c3a6ff 24%, transparent); }
[data-color="lime"], .link-lime { --link-color: #b9df46; --link-soft: color-mix(in srgb, #b9df46 24%, transparent); }
[data-color="slate"], .link-slate { --link-color: #91a0b8; --link-soft: color-mix(in srgb, #91a0b8 24%, transparent); }
[data-color="teal"], .link-teal { --link-color: #20b8a6; --link-soft: color-mix(in srgb, #20b8a6 24%, transparent); }
[data-color="indigo"], .link-indigo { --link-color: #6677e8; --link-soft: color-mix(in srgb, #6677e8 24%, transparent); }
[data-color="plum"], .link-plum { --link-color: #b06cc5; --link-soft: color-mix(in srgb, #b06cc5 24%, transparent); }
[data-color="magenta"], .link-magenta { --link-color: #e84aa8; --link-soft: color-mix(in srgb, #e84aa8 24%, transparent); }
[data-color="red"], .link-red { --link-color: #ef5350; --link-soft: color-mix(in srgb, #ef5350 24%, transparent); }
[data-color="yellow"], .link-yellow { --link-color: #f2dc4a; --link-soft: color-mix(in srgb, #f2dc4a 25%, transparent); }
[data-color="forest"], .link-forest { --link-color: #319765; --link-soft: color-mix(in srgb, #319765 24%, transparent); }
[data-color="aqua"], .link-aqua { --link-color: #42dfdf; --link-soft: color-mix(in srgb, #42dfdf 24%, transparent); }
[data-color="navy"], .link-navy { --link-color: #4568b2; --link-soft: color-mix(in srgb, #4568b2 24%, transparent); }
[data-color="brown"], .link-brown { --link-color: #aa7658; --link-soft: color-mix(in srgb, #aa7658 24%, transparent); }
[data-color="sand"], .link-sand { --link-color: #d8b87a; --link-soft: color-mix(in srgb, #d8b87a 24%, transparent); }
[data-color="silver"], .link-silver { --link-color: #b8c0cc; --link-soft: color-mix(in srgb, #b8c0cc 24%, transparent); }
.link-custom { --link-soft: color-mix(in srgb, var(--link-color) 24%, transparent); }
.palette-sets { display: flex; flex-wrap: wrap; gap: 5px; }
.palette-sets button { min-height: 32px; padding: 5px 10px; color: var(--muted); background: var(--panel); border: 1px solid var(--border-soft); border-radius: 999px; font: inherit; font-size: calc(11px * var(--fs, 1)); cursor: pointer; }
.palette-sets button.active { color: var(--text); background: color-mix(in srgb, var(--accent) 18%, var(--panel)); border-color: var(--accent); }
.bilingual-link { color: color-mix(in srgb, var(--link-color) 86%, var(--text)); background: var(--link-soft); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--link-color) 72%, transparent); }
.bilingual-link.on, .bilingual-link.bilingual-active { color: #071015; background: var(--link-color); box-shadow: 0 3px 14px color-mix(in srgb, var(--link-color) 42%, transparent); }
.pl-doc.pl-linking .pkw, .pl-doc.pl-linking .twd[data-token-index] { cursor: crosshair; }
.pl-doc.pl-linking .link-selected { outline: 2px solid #fff; outline-offset: 2px; color: color-mix(in srgb, var(--selection-link-color, var(--accent)) 86%, var(--text)); background: color-mix(in srgb, var(--selection-link-color, var(--accent)) 46%, transparent); box-shadow: inset 0 -2px 0 var(--selection-link-color, var(--accent)); }
.pl-doc.pl-linking .link-repeat-preview:not(.link-selected) { color: color-mix(in srgb, var(--selection-link-color, var(--accent)) 86%, var(--text)); background: color-mix(in srgb, var(--selection-link-color, var(--accent)) 28%, transparent); box-shadow: inset 0 -2px 0 var(--selection-link-color, var(--accent)); }
.pl-zen .bilingual-link { padding: .02em .12em; border-radius: .18em; }
@media (max-width: 560px) {
.pl-link-panel { margin-inline: 0; padding: 12px; }
.pl-link-rule { grid-template-columns: 1fr; align-items: start; }
.pl-link-palette { width: 100%; justify-content: flex-start; gap: 8px; border-radius: 14px; }
.pl-link-palette button { width: 44px; height: 44px; flex: 0 0 44px; }
.pl-link-actions > button { min-height: 42px; flex: 1 1 132px; }
}
.pkw-edit { font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--marker); border-radius: 5px; padding: 0 3px; min-width: 2ch; box-shadow: 0 2px 10px var(--marker-strong); }
/* Alça de quebra de linha do karaokê (só no modo revisão). */
.pkw-break { display: none; }
.pl-doc.pl-editing .pkw-break { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 21px; margin: 0 1px; padding: 0; vertical-align: middle; border: 0; border-radius: 4px; background: transparent; color: var(--faint); font-size: 11px; line-height: 1; cursor: pointer; opacity: .3; transition: opacity .1s, background .1s; }
.pl-doc.pl-editing .pkw-break:hover, .pl-doc.pl-editing .pkw-break:focus-visible { opacity: 1; background: var(--marker-soft); color: var(--marker); }
.pl-doc.pl-editing .pkw-break.on { opacity: 1; color: var(--marker); background: var(--marker-soft); }
/* No toque a alça precisa de alvo maior e não pode depender de hover. */
@media (max-width: 820px), (pointer: coarse) {
.pl-doc.pl-editing .pkw-break { width: 27px; height: 27px; opacity: .55; font-size: 13px; }
}
.pl-doc.pl-editing .pl-line-trans { display: block; }
.pl-line-trans .pl-line-trans-text { cursor: text; border-radius: 5px; padding: 1px 4px; box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--marker) 30%, transparent); }
.pl-line-trans .pl-line-trans-text:hover { background: var(--marker-soft); }
.pl-line-trans.empty .pl-line-trans-text::before { content: attr(data-placeholder); color: var(--faint); font-style: italic; }
.pl-line-trans-edit, .pl-plain-edit, .pl-trans-edit { width: 100%; font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--marker); border-radius: 8px; padding: 6px 8px; resize: vertical; line-height: 1.5; }
.pl-plain-edit { min-height: 160px; font-family: var(--reading-font); }
.pl-trans-edit { min-height: 90px; font-family: var(--ui-font); font-style: normal; }
/* Editor de transcrição como texto (original | tradução por linha). */
#plEditBtn.on ~ #plTranscriptBtn, #plTranscriptBtn.on { background: var(--marker-soft); border-color: var(--marker); color: var(--text); }
.pl-transcript { border: 1px solid var(--border); border-radius: 14px; padding: 4px; margin: 4px 0 8px; }
.pl-transcript.hidden { display: none; }
.pl-transcript-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 12px; }
.pl-transcript-head strong { display: block; font-size: calc(14px * var(--fs, 1)); }
.pl-transcript-head span { display: block; color: var(--muted); font-size: calc(12.5px * var(--fs, 1)); line-height: 1.45; margin-top: 3px; max-width: 640px; }
.pl-transcript-actions { display: flex; gap: 8px; flex: none; }
.pl-transcript-rows { display: flex; flex-direction: column; gap: 8px; padding: 4px; }
.tx-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr) 30px; gap: 8px; align-items: start; }
.tx-num { text-align: right; color: var(--faint); font-size: calc(12px * var(--fs, 1)); padding-top: 10px; font-variant-numeric: tabular-nums; }
.tx-orig, .tx-trans { width: 100%; font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; line-height: 1.5; resize: none; overflow: hidden; }
.tx-orig { font-family: Georgia, "Times New Roman", serif; }
.tx-trans { font-family: var(--ui-font); font-style: normal; color: color-mix(in srgb, var(--text) 92%, transparent); }
.tx-orig:focus, .tx-trans:focus { outline: none; border-color: var(--marker); box-shadow: 0 0 0 3px var(--marker-soft); }
.tx-merge { width: 28px; height: 28px; margin-top: 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); color: var(--muted); cursor: pointer; font-size: 13px; }
.tx-merge:hover { border-color: var(--marker); color: var(--marker); }
.tx-merge:disabled { opacity: .3; cursor: default; }
.tx-time { grid-column: 2 / 5; color: var(--faint); font-size: calc(11px * var(--fs, 1)); margin: -2px 0 2px 2px; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
.tx-row { grid-template-columns: 22px minmax(0, 1fr) 28px; }
.tx-trans { grid-column: 2 / 3; }
.tx-time { grid-column: 2 / 4; }
}
.pl-trans-block { border-top: 1px dashed var(--border); padding-top: 14px; margin-top: 6px; }
.pl-trans-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: calc(12px * var(--fs, 1)); text-transform: uppercase; letter-spacing: .05em; color: var(--faint); margin-bottom: 8px; }
.pl-trans-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pl-trans-lang-field select { width: clamp(140px, 18vw, 190px); min-width: 0; height: 34px; padding: 0 30px 0 9px; font-size: calc(12px * var(--fs, 1)); }
.pl-trans { font-family: var(--ui-font); font-size: calc(var(--pl-translation-font-size, 17px) * var(--fs, 1)); line-height: 1.7; color: var(--muted); font-style: normal; font-weight: 500; }
.pl-trans.pl-empty { font-size: calc(13px * var(--fs, 1)); opacity: .7; }
.pl-trans-block.mode-off .pl-trans { display: none; }
/* Barra do player estilo música: seek arrastável em cima, controles embaixo. */
.pl-musicbar { flex-direction: column; gap: 9px; padding: 12px 18px 11px; border-radius: 20px; width: min(560px, calc(100vw - 28px)); }
.pl-seekrow { display: flex; align-items: center; gap: 10px; width: 100%; }
.pl-seek { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px; cursor: pointer; outline: none;
background: linear-gradient(to right, var(--marker) var(--pct, 0%), var(--panel-2) var(--pct, 0%)); }
.pl-seek::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 2px solid var(--marker); box-shadow: 0 1px 5px rgba(0,0,0,.45); cursor: pointer; transition: transform .1s; }
.pl-seek::-webkit-slider-thumb:hover { transform: scale(1.15); }
.pl-seek::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 2px solid var(--marker); cursor: pointer; }
.pl-seek:focus-visible { outline: 2px solid var(--marker); outline-offset: 4px; }
.pl-ctlrow { display: flex; align-items: center; justify-content: center; gap: 18px; width: 100%; }
.pl-musicbar.loading { border-color: color-mix(in srgb, var(--accent) 48%, var(--border)); }
.pl-musicbar.loading .pl-seek { opacity: .72; }
.rp-play.loading { position: relative; color: transparent; pointer-events: none; }
.rp-play.loading::after { content: ""; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.42); border-top-color: #fff; border-radius: 50%; animation: spin .75s linear infinite; }
/* Modo zen: palco limpo para karaoke em formato de clipe. */
body.player-zen { overflow: hidden; }
.pl-zen[hidden] { display: none !important; }
/* modo foco: controles e player somem (fade) — só o texto do karaokê fica */
.pl-zen .pl-zen-top, .pl-zen .pl-zen-barslot { transition: opacity .35s ease; }
.pl-zen.zen-focus .pl-zen-top, .pl-zen.zen-focus .pl-zen-barslot { opacity: 0; pointer-events: none; }
.pl-zen.zen-focus { cursor: none; }
.pl-zen { position: fixed; inset: 0; z-index: 120; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; padding: 14px; overflow: hidden; background: color-mix(in srgb, var(--bg) 94%, #000); }
.pl-zen-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pl-zen-title { flex: 1 1 auto; min-width: 80px; font-size: calc(14px * var(--fs, 1)); font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-zen-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; flex-wrap: wrap; }
.pl-zen-frames { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--panel) 86%, transparent); }
.pl-zen-frames button { min-width: 34px; height: 30px; border: 0; border-radius: 7px; padding: 0 9px; background: transparent; color: var(--muted); cursor: pointer; font-family: inherit; font-size: calc(12px * var(--fs, 1)); white-space: nowrap; }
.pl-zen-frames button:hover { color: var(--text); background: var(--panel-2); }
.pl-zen-frames button.active { color: #fff; background: var(--accent); }
.pl-zen-type-tuning { position: relative; flex: none; }
.pl-zen-type-tuning summary { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 8px; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--panel) 86%, transparent); color: var(--muted); font-size: calc(12px * var(--fs, 1)); font-weight: 750; cursor: pointer; list-style: none; user-select: none; }
.pl-zen-type-tuning summary::-webkit-details-marker { display: none; }
.pl-zen-type-tuning[open] summary, .pl-zen-type-tuning summary:hover { color: #fff; background: var(--accent); border-color: var(--accent); }
.pl-zen-type-popover { position: absolute; z-index: 150; top: calc(100% + 7px); right: 0; width: min(330px, calc(100vw - 24px)); display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border-strong); border-radius: 12px; background: color-mix(in srgb, var(--panel) 96%, #000); box-shadow: 0 14px 36px rgba(0,0,0,.42); }
.pl-zen-type-popover label { display: grid; grid-template-columns: 64px minmax(110px, 1fr) 44px; align-items: center; gap: 8px; color: var(--muted); font-size: calc(11px * var(--fs, 1)); }
.pl-zen-type-popover input { width: 100%; accent-color: var(--accent); cursor: pointer; }
.pl-zen-type-popover output { color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.pl-zen-type-popover button { min-height: 30px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel-2); color: var(--muted); font: inherit; font-size: calc(11px * var(--fs, 1)); cursor: pointer; }
.pl-zen-type-popover button:hover, .pl-zen-type-popover button:focus-visible { color: var(--text); border-color: var(--accent); }
.pl-zen-custom { display: inline-flex; align-items: center; gap: 5px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--panel) 86%, transparent); }
.pl-zen-custom label { display: inline-flex; align-items: center; gap: 4px; color: var(--faint); font-size: calc(11px * var(--fs, 1)); }
.pl-zen-custom input { width: 70px; height: 30px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel-2); color: var(--text); padding: 0 7px; font-family: inherit; font-size: calc(12px * var(--fs, 1)); }
.pl-zen-reference-field {
display: inline-flex;
align-items: center;
gap: 6px;
height: 38px;
padding: 3px 4px 3px 9px;
color: var(--faint);
background: color-mix(in srgb, var(--panel) 86%, transparent);
border: 1px solid var(--border);
border-radius: 10px;
font-size: calc(10px * var(--fs, 1));
font-weight: 700;
letter-spacing: .035em;
text-transform: uppercase;
}
.pl-zen-reference-field input {
width: clamp(110px, 14vw, 180px);
height: 30px;
min-width: 0;
padding: 0 9px;
color: var(--text);
background: var(--panel-2);
border: 1px solid var(--border);
border-radius: 7px;
font: inherit;
font-size: calc(11.5px * var(--fs, 1));
font-weight: 500;
letter-spacing: 0;
text-transform: none;
}
.pl-zen-reference-field input:focus {
outline: 2px solid color-mix(in srgb, var(--accent) 38%, transparent);
outline-offset: 1px;
border-color: var(--accent);
}
.pl-zen-reference-size {
display: inline-grid;
grid-template-columns: auto 72px 24px;
align-items: center;
gap: 5px;
height: 38px;
padding: 3px 7px;
color: var(--faint);
background: color-mix(in srgb, var(--panel) 86%, transparent);
border: 1px solid var(--border);
border-radius: 10px;
font-size: calc(10px * var(--fs, 1));
font-weight: 700;
text-transform: uppercase;
}
.pl-zen-reference-size input { width: 72px; accent-color: var(--accent); }
.pl-zen-reference-size output { color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
.pl-zen-stagewrap { min-width: 0; min-height: 0; display: grid; place-items: center; padding-bottom: 4px; overflow: hidden; container: zen-wrap / size; }
.pl-zen-stage { --zen-progress: 0%; --zen-custom-w: 1080; --zen-custom-h: 1920; --zen-font-base: 44px; --zen-font-scale: 1; --zen-translation-scale: .68; --zen-font: calc(var(--zen-font-base) * var(--zen-font-scale)); --zen-context-scale: .58; position: relative; width: min(100%, 1120px); max-height: 100%; border: 1px solid color-mix(in srgb, var(--border) 72%, transparent); border-radius: 8px; overflow: hidden; background: var(--focus-bg); box-shadow: 0 24px 70px rgba(0,0,0,.38); display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.pl-zen-stage::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(to right, var(--accent) var(--zen-progress), rgba(255,255,255,.14) var(--zen-progress)); z-index: 2; }
.pl-zen-reference {
position: absolute;
z-index: 3;
top: clamp(12px, 3cqmin, 26px);
left: clamp(14px, 3.4cqmin, 32px);
max-width: min(72%, 34ch);
overflow: hidden;
color: color-mix(in srgb, var(--focus-text) 72%, transparent);
font-family: var(--ui-font);
font-size: clamp(10px, calc(var(--zen-reference-size, 15) * 1px), 42px);
font-weight: 650;
letter-spacing: .025em;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
pointer-events: none;
}
.pl-zen-reference[hidden] { display: none; }
.pl-zen-stage.frame-full { width: min(100cqw, 1120px); height: min(100cqh, 760px); }
.pl-zen-stage.frame-wide { aspect-ratio: 16 / 9; width: min(100cqw, calc(100cqh * 16 / 9), 1120px); }
.pl-zen-stage.frame-square { aspect-ratio: 1 / 1; width: min(100cqw, 100cqh, 720px); }
.pl-zen-stage.frame-portrait { aspect-ratio: 9 / 16; width: min(100cqw, calc(100cqh * 9 / 16), 430px); }
.pl-zen-stage.frame-post { aspect-ratio: 4 / 5; width: min(100cqw, calc(100cqh * 4 / 5), 560px); }
.pl-zen-stage.frame-custom { aspect-ratio: var(--zen-custom-w) / var(--zen-custom-h); width: min(100cqw, calc(100cqh * var(--zen-custom-w) / var(--zen-custom-h)), 1120px); }
/* Centralização SEGURA + rolagem: com conteúdo maior que a tela, "center" com
overflow escondido cortava o COMEÇO do texto (impossível rolar até ele).
margin:auto nos filhos centraliza quando cabe e encosta no topo quando não
cabe; overflow-y:auto dá a rolagem que faltava. */
.pl-zen-text { min-height: 0; display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 2vh, 16px); padding: clamp(20px, 5vh, 56px) clamp(18px, 5vw, 72px) clamp(16px, 4vh, 40px); font-family: var(--reading-font); text-align: center; color: var(--focus-text); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.pl-zen-stage.has-reference .pl-zen-text { padding-top: clamp(48px, 9cqh, 82px); }
.pl-zen-text > :first-child { margin-top: auto; }
.pl-zen-text > :last-child { margin-bottom: auto; }
/* Tamanho do texto PROPORCIONAL ao template (container query): o mesmo A/A+
cabe no 9:16, no 1:1 e na tela cheia sem estourar nem ficar minúsculo. */
.pl-zen-stage { container: zen-stage / size; }
.pl-zen-stage[data-text-size="xs"] { --zen-font-base: clamp(13px, 4.2cqmin, 40px); }
.pl-zen-stage[data-text-size="sm"] { --zen-font-base: clamp(15px, 5.4cqmin, 52px); }
.pl-zen-stage[data-text-size="md"] { --zen-font-base: clamp(17px, 6.8cqmin, 66px); }
.pl-zen-stage[data-text-size="lg"] { --zen-font-base: clamp(19px, 8.4cqmin, 82px); }
.pl-zen-stage[data-text-size="xl"] { --zen-font-base: clamp(21px, 10.4cqmin, 100px); }
.pl-zen-stage.frame-portrait,
.pl-zen-stage.frame-post { --zen-context-scale: .54; }
.pl-zen-line { width: 100%; min-width: 0; max-width: 100%; font-size: calc(var(--zen-font) * var(--zen-context-scale)); line-height: 1.24; font-weight: 700; color: var(--focus-muted); overflow-wrap: anywhere; transition: opacity .12s, color .12s; }
.pl-zen-line.current { font-size: var(--zen-font); line-height: 1.16; color: var(--focus-text); }
.pl-zen-line.past { opacity: .42; }
.pl-zen-stage[data-flow="single"] .pl-zen-line:not(.current) { display: none; }
.pl-zen-stage[data-flow="single"] .pl-zen-line.current { max-width: 18ch; margin-inline: auto; }
.pl-zen-stage[data-flow="wide"] .pl-zen-line { font-size: calc(var(--zen-font) * .48); }
.zkw { display: inline-block; border-radius: 7px; padding: 0 .06em; cursor: pointer; transition: color .1s, background .1s, text-shadow .1s, opacity .1s; }
.zkw:hover { background: rgba(255,255,255,.12); }
.zkw.past { color: color-mix(in srgb, var(--focus-text) 72%, transparent); }
.zkw.on { color: #061015; background: var(--marker); text-shadow: 0 0 18px rgba(255,255,255,.28); box-shadow: 0 8px 28px var(--marker-strong); }
.pl-zen-line-inner { width: 100%; min-width: 0; max-width: 100%; }
/* A tradução tem escala independente e ajuste fino, com piso legível. */
.pl-zen-line-trans { display: none; min-width: 0; max-width: 100%; margin-top: .58em; padding-top: .14em; color: var(--focus-trans); font-family: var(--ui-font); font-size: max(calc(1em * var(--zen-translation-scale)), 16px); line-height: 1.38; font-weight: 600; font-style: normal; overflow-wrap: anywhere; }
.pl-zen-line.current .pl-zen-line-trans { color: var(--focus-text); }
.pl-zen-trans-say { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: .82em; padding: 0 .3em 0 0; opacity: .75; }
.pl-zen-trans-say:hover { opacity: 1; }
/* palavras da tradução clicáveis (player, bloco e zen) */
.twd { cursor: pointer; border-radius: 4px; transition: background .1s, color .1s; }
.twd:hover { background: rgba(124,107,255,.22); }
.pl-line-trans.on, .pl-zen-line-trans.on { color: var(--text); }
.twd.on { color: inherit; background: var(--marker-soft); box-shadow: inset 0 -2px 0 var(--marker); }
/* ▶ ouvir só esta linha (doc do player) */
.pl-line-play { border: 1px solid var(--border); background: var(--panel-2); color: var(--text); width: 38px; height: 38px; border-radius: 50%; font-size: 13px; line-height: 1; cursor: pointer; margin-right: .45em; vertical-align: middle; opacity: .86; transition: all .12s; }
.pl-line:hover .pl-line-play { opacity: 1; }
.pl-line-play:hover { border-color: var(--accent); color: var(--accent); }
.pl-zen-stage[data-trans-mode="below"] .pl-zen-line-trans { display: block; }
.pl-zen-stage[data-trans-mode="side"] .pl-zen-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: 1em; align-items: center; text-align: left; }
.pl-zen-stage[data-trans-mode="side"] .pl-zen-line-trans { display: block; margin-top: 0; padding-left: .55em; border-left: 1px solid rgba(255,255,255,.16); }
.pl-zen-plain { max-width: 100%; max-height: 100%; overflow: auto; white-space: pre-wrap; font-size: calc(var(--zen-font) * .78); line-height: 1.34; color: var(--focus-text); }
.pl-zen-barslot { padding: 0 clamp(12px, 4vw, 44px) clamp(16px, 3vh, 28px); display: flex; justify-content: center; }
.pl-zen-controls-toggle { position: absolute; z-index: 130; right: 12px; bottom: 7px; width: 34px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 7px; background: rgba(9,10,14,.76); color: rgba(255,255,255,.8); cursor: pointer; }
.pl-zen-stage.controls-hidden { grid-template-rows: minmax(0, 1fr) 0; }
.pl-zen-stage.controls-hidden .pl-zen-barslot { height: 0; padding: 0; overflow: hidden; opacity: 0; pointer-events: none; }
body.player-zen #view-player .pl-zen .reader-player { position: static; transform: none; width: min(620px, 100%); background: rgba(9,10,14,.74); border-color: rgba(255,255,255,.12); backdrop-filter: blur(12px); box-shadow: none; }
/* Lyrics: um par bilíngue por vez, seguindo o timestamp da palavra original. */
.pl-zen-stage[data-layout="lyrics"] .pl-zen-text { justify-content: center; overflow: hidden; }
.pl-zen-lyrics { width: min(100%, 920px); display: grid; align-items: center; gap: clamp(14px, 3cqh, 34px); }
.pl-zen-lyrics-side { min-width: 0; display: grid; gap: .22em; }
.pl-zen-lyrics-side { text-align: center; }
.pl-zen-lyrics-side small { color: var(--focus-muted); font-family: var(--ui-font); font-size: max(12px, calc(var(--zen-font) * .24)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pl-zen-lyrics-side strong { display: block; padding: .08em .12em; overflow-wrap: anywhere; color: var(--focus-text); font-size: var(--zen-font); line-height: 1.08; cursor: pointer; }
.pl-zen-lyrics-side.translation strong { color: var(--focus-trans); font-family: var(--ui-font); font-size: calc(var(--zen-font) * var(--zen-translation-scale)); font-weight: 600; }
.pl-zen-lyrics-arrow { color: var(--marker); font-size: calc(var(--zen-font) * .72); }
.pl-zen-lyrics-progress { grid-column: 1 / -1; color: var(--focus-muted); font-family: var(--ui-font); font-size: max(11px, calc(var(--zen-font) * .18)); font-variant-numeric: tabular-nums; text-align: center; }
.pl-zen-stage[data-lyrics-mode="below"] .pl-zen-lyrics { grid-template-columns: minmax(0, 1fr); }
.pl-zen-stage[data-lyrics-mode="below"] .pl-zen-lyrics-arrow { transform: rotate(90deg); }
.pl-zen-stage[data-lyrics-mode="below"] .pl-zen-lyrics-progress { grid-column: auto; }
.pl-zen-stage[data-lyrics-mode="side"] .pl-zen-lyrics { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(12px, 4cqw, 56px); }
.pl-zen-stage[data-lyrics-mode="side"] .pl-zen-lyrics-side.original { text-align: right; }
.pl-zen-stage[data-lyrics-mode="side"] .pl-zen-lyrics-side.translation { text-align: left; }
.pl-zen-stage[data-lyrics-mode="original"] .pl-zen-lyrics { grid-template-columns: minmax(0, 1fr); }
.pl-zen-stage[data-lyrics-mode="original"] .pl-zen-lyrics-arrow,
.pl-zen-stage[data-lyrics-mode="original"] .pl-zen-lyrics-side.translation { display: none; }
.pl-zen-stage[data-lyrics-mode="original"] .pl-zen-lyrics-progress { grid-column: auto; }
/* Book: coluna contínua, tipografia de leitura e avanço vertical discreto. */
.pl-zen-stage[data-layout="book"] .pl-zen-text { display: block; padding: clamp(24px, 5cqh, 64px) clamp(20px, 7cqw, 96px); text-align: left; scroll-behavior: smooth; }
.pl-zen-stage.has-reference[data-layout="book"] .pl-zen-text { padding-top: clamp(54px, 10cqh, 88px); }
.pl-zen-stage[data-layout="book"] .pl-zen-text > :first-child,
.pl-zen-stage[data-layout="book"] .pl-zen-text > :last-child { margin-block: 0; }
.pl-zen-book { width: min(100%, 72ch); margin: 0 auto; font-size: calc(var(--zen-font) * .46); line-height: 1.78; }
.pl-zen-book-line { padding: .45em .3em 1.15em; border-left: 3px solid transparent; border-bottom: 1px solid rgba(255,255,255,.055); color: var(--focus-text); transition: opacity .18s, border-color .18s, background .18s; }
.pl-zen-book-line.current { border-left-color: var(--marker); background: color-mix(in srgb, var(--marker) 6%, transparent); }
.pl-zen-book-line.past { opacity: .6; }
.pl-zen-book-original { margin: 0; }
.pl-zen-stage[data-layout="book"] .pl-zen-line-trans { display: block; margin: .72em 0 0; padding: .3em 0 0; border-left: 0; color: var(--focus-trans); font-size: max(calc(1em * var(--zen-translation-scale)), 15px); line-height: 1.58; font-weight: 500; }
.pl-zen-stage[data-layout="book"] .zkw.on { box-shadow: 0 4px 16px var(--marker-strong); }
@container zen-stage (max-width: 560px) {
.pl-zen-stage[data-trans-mode="side"] .pl-zen-line { grid-template-columns: 1fr; gap: .18em; text-align: center; }
.pl-zen-stage[data-trans-mode="side"] .pl-zen-line-trans { margin-top: .55em; padding-left: 0; border-left: 0; }
.pl-zen-stage[data-lyrics-mode="side"] .pl-zen-lyrics { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 7px; }
.pl-zen-stage[data-lyrics-mode="side"] .pl-zen-lyrics-side strong { font-size: calc(var(--zen-font) * .74); }
.pl-zen-stage[data-lyrics-mode="side"] .pl-zen-lyrics-arrow { font-size: calc(var(--zen-font) * .46); }
.pl-zen-book { font-size: calc(var(--zen-font) * .58); }
}
/* Em telas rasas (16:9 dentro de celulares), contexto extra rouba o espaço do
texto atual e cria uma segunda rolagem. A linha corrente tem prioridade. */
@container zen-stage (max-height: 300px) {
.pl-zen-text { gap: 4px; padding: 8px 16px 6px; }
.pl-zen-line:not(.current) { display: none; }
.pl-zen-line.current { line-height: 1.08; }
.pl-zen-line-trans { margin-top: .38em; line-height: 1.2; }
.pl-zen-barslot { padding: 0 10px 9px; }
body.player-zen #view-player .pl-zen .reader-player { padding-top: 8px; padding-bottom: 8px; }
}
@media (max-width: 900px) {
.admin-grid { grid-template-columns: 1fr; }
.admin-create-user { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-create-user .btn-primary { grid-column: 1 / -1; }
.admin-create-user { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.import-page-grid { grid-template-columns: 1fr; }
.import-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.pl-zen { padding: 10px; gap: 8px; }
.pl-zen-top { align-items: flex-start; flex-wrap: wrap; }
.pl-zen-title { flex-basis: calc(100% - 50px); }
.pl-zen-tools { order: 3; width: 100%; justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; }
.pl-zen-frames { flex: none; }
.pl-zen-reference-field { flex: none; }
.pl-zen-stage.frame-full { height: min(68vh, 720px); }
/* tamanhos fixos removidos: --zen-font agora escala com o template (cqmin) */
.pl-zen-frames button { min-width: 32px; padding: 0 8px; }
.pl-zen-stage[data-trans-mode="side"] .pl-zen-line { grid-template-columns: 1fr; gap: .18em; text-align: center; }
.pl-zen-stage[data-trans-mode="side"] .pl-zen-line-trans { margin-top: .55em; padding-left: 0; border-left: 0; }
}
@media (max-width: 560px) {
.admin-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-registration-control { align-items: flex-start; flex-direction: column; }
.admin-registration-control .btn-ghost { width: 100%; justify-content: center; }
.admin-create-user { grid-template-columns: 1fr; }
.admin-create-user .btn-primary { grid-column: auto; }
.admin-user-row { padding: 12px; }
.admin-user-actions, .admin-subscription { justify-content: flex-start; }
.admin-subscription { width: 100%; }
.admin-subscription select, .admin-subscription input { flex: 1 1 0; max-width: none; }
.admin-profile-grid { grid-template-columns: 1fr; }
.auth-gate { padding: 10px; }
.auth-panel { padding: 20px 16px; }
.admin-create-user { grid-template-columns: 1fr; }
.admin-user-row { grid-template-columns: 1fr; }
.admin-user-actions { flex-wrap: wrap; }
.import-opts-grid, .import-sidebar { grid-template-columns: 1fr; }
.import-recent-badges { display: none; }
.pl-view-controls { align-items: stretch; margin-inline: 0; }
.pl-focus-control { justify-content: space-between; width: 100%; }
.pl-type-controls { display: grid; grid-template-columns: 1fr; width: 100%; }
.pl-type-controls label { grid-template-columns: 68px minmax(90px, 1fr) 48px; max-width: none; }
.pl-type-reset { width: 100%; }
.pl-ctlrow { gap: 14px; }
.pl-doc.trans-side .pl-line { grid-template-columns: 1fr; gap: 4px; }
.pl-doc.trans-side .pl-line-trans { margin-top: 3px; padding-left: 0; border-left: 0; }
.reader-musicbar, .pl-musicbar { width: min(560px, calc(100vw - 16px)); padding-inline: 12px; }
.reader-ctlrow, .pl-ctlrow { gap: 10px; }
.reader-seekrow, .pl-seekrow { gap: 7px; }
}
.take-actions .icon-btn { width: 28px; height: 28px; font-size: calc(13px * var(--fs, 1)); }
.take-actions .var-badge { height: 24px; display: inline-flex; align-items: center; }
@media (max-width: 640px) {
.take-head { gap: 8px; }
.take-actions { max-width: none; }
.take-actions .icon-btn { width: 30px; height: 30px; }
.voice-name { max-width: 112px; }
.pl-now { align-items: flex-start; flex-direction: column; gap: 3px; }
.pl-now em { white-space: normal; }
}
/* ── Tradutor ── */
.tr-results { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.translator-engines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 12px; }
.translator-engines button { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel-2); color: var(--muted); text-align: left; cursor: pointer; font: inherit; }
.translator-engines button strong { color: var(--text); font-size: calc(12.5px * var(--fs, 1)); }
.translator-engines button span { font-size: calc(10.5px * var(--fs, 1)); }
.translator-engines button.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--panel-2)); }
.translator-engines button:disabled { opacity: .42; cursor: not-allowed; }
.tr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: calc(13px * var(--fs, 1)); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; flex-wrap: wrap; }
.tr-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.tr-texts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.tr-meta { font-size: calc(11.5px * var(--fs, 1)); color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.tr-orig { font-size: calc(14.5px * var(--fs, 1)); font-weight: 600; }
.tr-trans { font-size: calc(13.5px * var(--fs, 1)); color: var(--muted); font-style: italic; }
.tr-acts { display: flex; align-items: center; gap: 6px; flex: none; }
.tr-acts .play-btn-sm { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--accent-grad); color: #fff; cursor: pointer; font-size: calc(11px * var(--fs, 1)); }
.tr-acts .icon-btn.done { color: var(--green); border-color: rgba(61,220,151,.5); }
#trFrom, #trTo { min-width: 150px; }
.tr-say { background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; font-size: calc(12px * var(--fs, 1)); cursor: pointer; margin-right: 4px; }
.tr-say:hover { border-color: var(--accent); }
/* rótulos de campo com idioma + botão ouvir (modal da nota) */
.lang-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.note-lang-label { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.note-lang-select { min-width: 150px; max-width: min(230px, 55vw); height: 34px; padding: 0 30px 0 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); color: var(--text); font: inherit; font-size: calc(12px * var(--fs, 1)); }
.note-lang-select:focus { outline: none; border-color: var(--accent); }
.say-btn { background: var(--panel-2); border: 1px solid var(--border); border-radius: 7px; width: 28px; height: 24px; cursor: pointer; font-size: calc(12px * var(--fs, 1)); line-height: 1; }
.say-btn:hover { border-color: var(--accent); }
/* ── Decks (listas de palavras) ── */
.vocab-tabs { margin-bottom: 18px; }
.deck-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 10px; margin-bottom: 20px; }
.deck-group-head { grid-column: 1 / -1; margin: 6px 0 -2px; color: var(--accent); font-size: calc(9.5px * var(--fs, 1)); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.deck-group-head:first-child { margin-top: 0; }
button.profile-level-summary { width: 100%; padding: 0; color: inherit; background: transparent; border: 0; font: inherit; text-align: left; cursor: pointer; }
button.profile-level-summary:hover h3 { color: var(--accent); }
.profile-fluency-detail { margin-top: 10px; padding: 12px; background: color-mix(in srgb, var(--panel-2) 70%, transparent); border: 1px solid var(--border-strong); border-radius: 11px; }
.deck-card { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 12px; padding: 14px; cursor: pointer; font-family: inherit; color: var(--text); text-align: left; transition: border-color .14s, transform .14s; }
.deck-card.system { border-color: color-mix(in srgb, #26d0ce 42%, var(--border-soft)); background: color-mix(in srgb, #26d0ce 8%, var(--panel)); }
.deck-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.deck-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.deck-name { font-weight: 600; font-size: calc(14.5px * var(--fs, 1)); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-sub { min-height: 16px; display: flex; align-items: center; gap: 6px; color: var(--faint); font-size: calc(11.5px * var(--fs, 1)); }
.deck-lang, .deck-kind, .deck-src { border: 1px solid var(--border-soft); border-radius: 999px; padding: 2px 7px; background: var(--panel-2); color: var(--muted); font-size: calc(11px * var(--fs, 1)); line-height: 1.2; white-space: nowrap; }
.deck-kind { color: #26d0ce; border-color: color-mix(in srgb, #26d0ce 40%, var(--border-soft)); }
.deck-src { flex: none; text-transform: uppercase; letter-spacing: 0; font-weight: 700; }
.deck-src.builtin { color: #26d0ce; border-color: color-mix(in srgb, #26d0ce 42%, var(--border-soft)); }
.deck-src.custom { color: #feca57; border-color: color-mix(in srgb, #feca57 45%, var(--border-soft)); }
.deck-n { font-size: calc(11.5px * var(--fs, 1)); color: var(--faint); flex: none; }
.deck-new { padding: 16px; max-width: 480px; display: flex; flex-direction: column; gap: 10px; }
.deck-new h3 { margin: 0; font-size: calc(15px * var(--fs, 1)); }
.deck-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.deck-title { flex: 1; margin: 0; font-size: calc(19px * var(--fs, 1)); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-add { display: flex; gap: 8px; margin-bottom: 14px; max-width: 420px; }
.deck-add .title-input { flex: 1; }
/* Listas de estudo v2: palavras, frases e expressões compartilham a identidade
canônica, mas cada lista preserva apresentação, tradução e estado pessoal. */
.deck-list { grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); gap: 13px; }
.deck-card { min-height: 148px; align-items: flex-start; padding: 16px; border-radius: 16px; }
.deck-icon { display: grid; place-items: center; width: 43px; height: 43px; flex: none; border: 1px solid color-mix(in srgb, var(--deck-color) 50%, var(--border)); border-radius: 13px; background: color-mix(in srgb, var(--deck-color) 14%, var(--panel-2)); font-size: 20px; }
.deck-main { gap: 7px; }
.deck-name { font-size: calc(15.5px * var(--fs, 1)); white-space: normal; line-height: 1.25; }
.deck-description { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: calc(11.5px * var(--fs, 1)); line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.deck-sub { min-height: 0; flex-wrap: wrap; }
.deck-progress { color: var(--faint); font-size: calc(10.5px * var(--fs, 1)); line-height: 1.35; }
.deck-progress b { color: var(--muted); font-weight: 750; }
.deck-n { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 34px; }
.deck-n b { color: var(--text); font-size: calc(17px * var(--fs, 1)); font-variant-numeric: tabular-nums; }
.deck-n small { color: var(--faint); font-size: calc(9px * var(--fs, 1)); text-transform: uppercase; }
.deck-new { max-width: 760px; padding: 20px; gap: 12px; border-radius: 16px; }
.deck-new-title p { margin: 4px 0 0; color: var(--muted); font-size: calc(12px * var(--fs, 1)); }
.deck-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 9px; }
.deck-fields label { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.deck-fields label > span { color: var(--faint); font-size: calc(10px * var(--fs, 1)); font-weight: 700; letter-spacing: .045em; text-transform: uppercase; }
.deck-fields select { width: 100%; min-width: 0; }
.deck-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: -3px 0 13px 50px; }
.deck-tools { display: flex; gap: 9px; margin-bottom: 12px; }
.deck-tools .search { flex: 1; min-width: 0; }
.deck-tools select { width: min(190px, 42vw); }
.deck-add { max-width: none; flex-direction: column; padding: 13px; background: color-mix(in srgb, var(--panel-2) 70%, transparent); border: 1px solid var(--border-soft); border-radius: 14px; }
.deck-add > .text-input { width: 100%; min-height: 62px; resize: vertical; }
.deck-add-fields { display: grid; grid-template-columns: minmax(140px, .45fr) minmax(190px, 1fr) auto; gap: 8px; }
.deck-add-fields > * { min-width: 0; }
#deckGrid.phrase-list { grid-template-columns: minmax(0, 1fr); }
.deck-term-card.wide { min-height: 0; }
.deck-term-card .bw-word { white-space: normal; overflow-wrap: anywhere; line-height: 1.42; }
.deck-term-translation { margin: 0; padding: 9px 11px; color: var(--text); background: color-mix(in srgb, var(--accent) 7%, var(--panel-2)); border-left: 2px solid var(--accent); border-radius: 5px 9px 9px 5px; font-size: calc(12px * var(--fs, 1)); line-height: 1.45; }
.deck-term-translation span { display: block; margin-bottom: 2px; color: var(--faint); font-size: calc(8.5px * var(--fs, 1)); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.deck-term-note { margin: 0; color: var(--muted); font-size: calc(11px * var(--fs, 1)); line-height: 1.4; }
.deck-study-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.deck-state-btn { min-height: 31px; padding: 5px 10px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 999px; font: inherit; font-size: calc(10.5px * var(--fs, 1)); cursor: pointer; }
.deck-state-btn:hover { border-color: var(--accent); color: var(--text); }
.deck-state-btn.active.learning { color: #f6c65b; border-color: color-mix(in srgb, #f6c65b 55%, var(--border)); background: color-mix(in srgb, #f6c65b 10%, var(--panel)); }
.deck-state-btn.active.known { color: var(--known-color, #55d6a0); border-color: color-mix(in srgb, var(--known-color, #55d6a0) 55%, var(--border)); background: color-mix(in srgb, var(--known-color, #55d6a0) 10%, var(--panel)); }
.deck-empty { grid-column: 1 / -1; min-height: 160px; }
@media (max-width: 640px) {
.deck-card { min-height: 0; padding: 13px; }
.deck-icon { width: 39px; height: 39px; border-radius: 11px; }
.deck-description { -webkit-line-clamp: 3; }
.deck-fields { grid-template-columns: minmax(0, 1fr); }
.deck-meta { margin-left: 0; }
.deck-tools { align-items: stretch; flex-direction: column; }
.deck-tools select { width: 100%; min-height: 42px; }
.deck-add-fields { grid-template-columns: minmax(0, 1fr); }
.deck-add-fields .btn-primary { width: 100%; min-height: 44px; justify-content: center; }
.deck-term-card .bw-actions { gap: 8px; }
.deck-term-card .bw-actions button { min-width: 40px; min-height: 40px; }
.deck-state-btn { min-height: 38px; padding-inline: 13px; }
}
/* ── Central de quiz: memória espaçada + avaliação de fluência ── */
.quiz-quick-links { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; max-width: 820px; margin: -8px 0 18px; }
.quiz-quick-links > span { color: var(--faint); font-size: calc(10.5px * var(--fs, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.quiz-quick-links button { padding: 6px 11px; color: var(--muted); background: var(--panel); border: 1px solid var(--border-strong); border-radius: 999px; font: inherit; font-size: calc(11.5px * var(--fs, 1)); cursor: pointer; }
.quiz-quick-links button:hover { color: var(--text); border-color: var(--accent); }
.quiz-area-tabs button > span:nth-child(2) { min-width: 0; }
.quiz-area-tabs strong, .quiz-area-tabs small { display: block; }
.quiz-area-tabs strong { font-size: calc(12.5px * var(--fs, 1)); }
.quiz-area-tabs small { margin-top: 2px; overflow: hidden; color: var(--faint); font-size: calc(9.5px * var(--fs, 1)); text-overflow: ellipsis; white-space: nowrap; }
.quiz-area-tabs b { display: grid; place-items: center; min-width: 27px; height: 27px; padding: 0 7px; color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); border-radius: 999px; font-size: calc(10px * var(--fs, 1)); font-variant-numeric: tabular-nums; }
.quiz-area-icon { display: grid; place-items: center; width: 37px; height: 37px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: 10px; font-size: calc(18px * var(--fs, 1)); }
.srs-quiz-setup { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(310px, .85fr); gap: 18px; align-items: start; max-width: 1120px; }
.srs-setup-main, .srs-setup-side { min-width: 0; padding: 23px; }
.srs-setup-main { display: flex; flex-direction: column; gap: 19px; overflow: hidden; background: radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 42%), var(--panel); }
.srs-eyebrow, .srs-config-head, .srs-run-head, .srs-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.srs-eyebrow { color: var(--faint); font-size: calc(9.5px * var(--fs, 1)); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.srs-eyebrow b { overflow: hidden; color: var(--accent); font-size: inherit; text-overflow: ellipsis; white-space: nowrap; }
.srs-hero { display: flex; align-items: flex-start; gap: 15px; }
.srs-hero > div { min-width: 0; }
.srs-hero-icon { display: grid; place-items: center; width: 52px; height: 52px; flex: none; color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border)); border-radius: 16px; font-size: 27px; }
.srs-hero h2 { margin: 0 0 6px; font-size: clamp(23px, 3vw, 31px); line-height: 1.12; letter-spacing: -.025em; }
.srs-hero p, .srs-empty p, .srs-rule-note, .srs-result p { margin: 0; color: var(--muted); font-size: calc(12.5px * var(--fs, 1)); line-height: 1.55; }
.srs-queue-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; background: color-mix(in srgb, var(--panel-2) 72%, transparent); border: 1px solid var(--border-soft); border-radius: 14px; }
.srs-queue-stats article { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 13px 11px; border-right: 1px solid var(--border-soft); }
.srs-queue-stats article:last-child { border-right: 0; }
.srs-queue-stats article.due { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.srs-queue-stats strong { overflow: hidden; color: var(--text); font-size: calc(21px * var(--fs, 1)); font-variant-numeric: tabular-nums; text-overflow: ellipsis; }
.srs-queue-stats .due strong { color: var(--accent); }
.srs-queue-stats span { color: var(--faint); font-size: calc(8.5px * var(--fs, 1)); line-height: 1.35; text-transform: uppercase; }
.srs-schedule { display: grid; gap: 7px; max-height: 460px; overflow: auto; padding-right: 2px; scrollbar-width: thin; }
.srs-blocks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.srs-blocks > span, .srs-blocks > button { display: flex; align-items: baseline; justify-content: center; gap: 5px; padding: 7px 4px; color: var(--faint); background: var(--panel-2); border: 1px solid var(--border-strong); border-radius: 9px; font: inherit; font-size: calc(9.5px * var(--fs, 1)); }
.srs-blocks > button { cursor: pointer; }
.srs-blocks > button:hover { color: var(--text); background: color-mix(in srgb, var(--red) 10%, var(--panel-2)); }
.srs-blocks b { color: var(--text); font-size: calc(14px * var(--fs, 1)); font-variant-numeric: tabular-nums; }
.srs-blocks .urgent { border-color: color-mix(in srgb, var(--red) 55%, var(--border)); }
.srs-blocks .urgent b { color: var(--red); }
.srs-day-review { justify-self: start; margin-top: 7px; min-height: 38px; padding: 8px 15px; font-size: calc(12px * var(--fs, 1)); }
.srs-agenda-days { display: grid; gap: 7px; }
.srs-day { overflow: hidden; background: var(--panel-2); border: 1px solid var(--border-strong); border-radius: 11px; }
.srs-day-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; width: 100%; min-height: 54px; padding: 9px 12px; color: inherit; background: transparent; border: 0; font: inherit; text-align: left; cursor: pointer; }
.srs-day-head:disabled { cursor: default; }
.srs-day-head > div { min-width: 0; }
.srs-schedule strong, .srs-schedule small { display: block; }
.srs-schedule strong { font-size: calc(11.5px * var(--fs, 1)); }
.srs-schedule small { margin-top: 2px; overflow: hidden; color: var(--faint); font-size: calc(9px * var(--fs, 1)); text-overflow: ellipsis; white-space: nowrap; }
.srs-schedule b { min-width: 32px; color: var(--muted); font-size: calc(15px * var(--fs, 1)); text-align: right; font-variant-numeric: tabular-nums; }
.srs-overdue-chip { padding: 1px 6px; color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); border-radius: 999px; font-style: normal; font-weight: 700; }
.srs-day-caret { color: var(--faint); font-size: calc(11px * var(--fs, 1)); transition: transform .15s; }
.srs-day-head[aria-expanded="true"] .srs-day-caret { transform: rotate(180deg); }
.srs-day-head:disabled .srs-day-caret { visibility: hidden; }
.srs-day-items { display: grid; gap: 4px; padding: 4px 12px 11px; border-top: 1px dashed var(--border-soft); }
.srs-day-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 5px 0; font-size: calc(11.5px * var(--fs, 1)); }
.srs-day-when { min-width: 42px; color: var(--faint); font-variant-numeric: tabular-nums; font-size: calc(10px * var(--fs, 1)); }
.srs-day-front { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.srs-day-item.overdue .srs-day-when { color: var(--red); font-weight: 700; }
.srs-day-mem { min-width: 38px; padding: 2px 6px; border-radius: 999px; font-size: calc(10px * var(--fs, 1)); text-align: center; font-variant-numeric: tabular-nums; color: var(--muted); background: color-mix(in srgb, var(--faint) 14%, transparent); }
.srs-day-mem[data-band="danger"] { color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); }
.srs-day-mem[data-band="orange"] { color: #ff8a5b; background: color-mix(in srgb, #ff8a5b 14%, transparent); }
.srs-day-mem[data-band="amber"] { color: #feca57; background: color-mix(in srgb, #feca57 14%, transparent); }
.srs-day-mem[data-band="blue"] { color: var(--marker); background: color-mix(in srgb, var(--marker) 14%, transparent); }
.srs-day-mem[data-band="violet"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.srs-day-mem[data-band="green"] { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.srs-day-more { color: var(--faint); font-size: calc(10px * var(--fs, 1)); padding-top: 3px; }
.srs-beyond { margin: 2px 0 0; color: var(--faint); font-size: calc(10px * var(--fs, 1)); }
.srs-schedule-dot { width: 9px; height: 9px; background: var(--faint); border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, var(--faint) 12%, transparent); }
.srs-schedule .now .srs-schedule-dot, .srs-day.now .srs-schedule-dot { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent); }
.srs-schedule .tomorrow .srs-schedule-dot, .srs-day.tomorrow .srs-schedule-dot { background: var(--blue, #54a0ff); }
.srs-empty { display: flex; align-items: flex-start; gap: 12px; padding: 13px; color: var(--green); background: color-mix(in srgb, var(--green) 7%, transparent); border: 1px solid color-mix(in srgb, var(--green) 32%, var(--border)); border-radius: 12px; }
.srs-empty > span { display: grid; place-items: center; width: 31px; height: 31px; flex: none; background: color-mix(in srgb, var(--green) 14%, transparent); border-radius: 50%; font-weight: 800; }
.srs-empty strong { display: block; margin-bottom: 3px; color: var(--text); }
.srs-setup-side { display: flex; flex-direction: column; gap: 15px; }
.srs-config-head > div span, .srs-config-head > div strong { display: block; }
.srs-config-head > div span { margin-bottom: 3px; color: var(--faint); font-size: calc(9px * var(--fs, 1)); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.srs-config-head > div strong { font-size: calc(16px * var(--fs, 1)); }
.srs-method { padding: 4px 8px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border)); border-radius: 999px; font-size: calc(8.5px * var(--fs, 1)); font-weight: 800; }
.srs-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.srs-counts button { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 59px; padding: 7px 4px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--border-strong); border-radius: 10px; font: inherit; font-size: calc(14px * var(--fs, 1)); font-weight: 800; cursor: pointer; }
.srs-counts button small { margin-top: 2px; color: var(--faint); font-size: calc(8px * var(--fs, 1)); font-weight: 500; }
.srs-counts button:hover, .srs-counts button.active { color: var(--text); border-color: var(--accent); }
.srs-counts button.active { background: color-mix(in srgb, var(--accent) 12%, var(--panel-2)); }
.srs-start { width: 100%; min-height: 50px; justify-content: center; }
.srs-rule-note { padding: 11px 12px; background: var(--panel-2); border-left: 3px solid var(--accent); border-radius: 0 9px 9px 0; font-size: calc(10px * var(--fs, 1)); }
.srs-recent { min-width: 0; padding-top: 3px; }
.srs-recent .side-head { margin-bottom: 7px; }
#srsRecentSessions { display: grid; gap: 6px; }
#srsRecentSessions article { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; padding: 9px 10px; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 9px; }
#srsRecentSessions article > span { color: var(--faint); font-size: calc(8.5px * var(--fs, 1)); text-transform: uppercase; }
#srsRecentSessions strong, #srsRecentSessions small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#srsRecentSessions strong { font-size: calc(10px * var(--fs, 1)); }
#srsRecentSessions small { margin-top: 2px; color: var(--faint); font-size: calc(8.5px * var(--fs, 1)); }
.srs-run { width: min(900px, 100%); margin: 0 auto; }
.srs-run-head { margin-bottom: 9px; }
.srs-run-head > div:first-child { display: flex; align-items: center; gap: 8px; min-width: 0; }
.srs-run-head span { overflow: hidden; color: var(--faint); font-size: calc(10px * var(--fs, 1)); text-overflow: ellipsis; white-space: nowrap; }
.srs-run-head strong, .srs-run-score { color: var(--muted); font-size: calc(10.5px * var(--fs, 1)); font-variant-numeric: tabular-nums; }
.srs-run-progress { width: 100%; height: 6px; margin-bottom: 12px; overflow: hidden; background: var(--panel-2); border-radius: 999px; }
.srs-run-progress i { display: block; width: 0; height: 100%; background: var(--accent-grad); border-radius: inherit; transition: width .2s ease; }
.srs-question-card { --memory-color: #8d90a3; display: flex; flex-direction: column; gap: 15px; min-height: 560px; padding: 20px; border-color: color-mix(in srgb, var(--memory-color) 30%, var(--border)); }
.srs-question-card[data-memory-color="danger"] { --memory-color: #ff6b81; }
.srs-question-card[data-memory-color="orange"] { --memory-color: #ff8a5b; }
.srs-question-card[data-memory-color="amber"] { --memory-color: #f6c65b; }
.srs-question-card[data-memory-color="blue"] { --memory-color: #54a0ff; }
.srs-question-card[data-memory-color="violet"] { --memory-color: #a98cff; }
.srs-question-card[data-memory-color="green"] { --memory-color: #3ddc97; }
.srs-card-meta { min-width: 0; padding-bottom: 11px; border-bottom: 1px solid var(--border-soft); }
.srs-card-meta > div { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; min-width: 0; }
.srs-card-meta > span { flex: none; color: var(--memory-color); font-size: calc(9px * var(--fs, 1)); font-weight: 800; }
.srs-card-side { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; min-height: 190px; padding: 25px 18px; overflow: hidden; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--memory-color) 9%, transparent), transparent 58%), var(--panel-2); border: 1px solid var(--border-soft); border-radius: 15px; text-align: center; }
.srs-card-side.back { min-height: 120px; background: color-mix(in srgb, var(--memory-color) 5%, var(--panel-2)); border-color: color-mix(in srgb, var(--memory-color) 26%, var(--border-soft)); }
.srs-card-side small { color: var(--faint); font-size: calc(9px * var(--fs, 1)); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.srs-card-side > div { max-width: 760px; color: var(--text); font-family: var(--reading-font, inherit); font-size: clamp(27px, 5vw, 45px); font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; text-wrap: balance; }
.srs-card-side.back > div { font-size: clamp(20px, 3.5vw, 31px); font-weight: 600; }
.srs-listen { display: grid; place-items: center; width: 46px; height: 46px; padding: 0 0 0 2px; color: #fff; background: var(--accent-grad); border: 0; border-radius: 50%; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 28%, transparent); font: inherit; cursor: pointer; }
.srs-listen[data-play-state="playing"] { padding-left: 0; }
.srs-reveal { align-self: center; min-width: min(280px, 100%); min-height: 48px; justify-content: center; }
.srs-rating-panel { padding-top: 3px; }
.srs-rating-panel > p { margin: 0 0 9px; color: var(--muted); font-size: calc(10.5px * var(--fs, 1)); text-align: center; }
.srs-rating-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.srs-rating-grid button { display: grid; grid-template-rows: auto auto auto; justify-items: center; gap: 3px; min-height: 82px; padding: 10px 6px; color: var(--text); background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 12px; font: inherit; cursor: pointer; }
.srs-rating-grid button:hover { transform: translateY(-1px); border-color: var(--memory-color); }
.srs-rating-grid button:disabled { opacity: .55; cursor: wait; transform: none; }
.srs-rating-grid strong { font-size: calc(11px * var(--fs, 1)); }
.srs-rating-grid small { color: var(--accent); font-size: calc(10px * var(--fs, 1)); font-weight: 800; }
.srs-rating-grid span { color: var(--faint); font-size: calc(8px * var(--fs, 1)); text-align: center; }
.srs-rating-grid .again small { color: #ff6b81; }
.srs-rating-grid .hard small { color: #ff8a5b; }
.srs-rating-grid .good small { color: #54a0ff; }
.srs-rating-grid .easy small { color: #3ddc97; }
.srs-quit { display: block; margin: 13px auto 0; }
.srs-result { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 15px; max-width: 850px; margin: 0 auto; padding: 24px; }
.srs-result-mark { display: grid; place-items: center; width: 58px; height: 58px; grid-row: 1 / 3; color: var(--green); background: color-mix(in srgb, var(--green) 11%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--green) 38%, var(--border)); border-radius: 18px; font-size: 26px; }
.srs-result > div:nth-child(2) > span { color: var(--green); font-size: calc(9px * var(--fs, 1)); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.srs-result h2 { margin: 4px 0 6px; }
.srs-result-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-column: 2; overflow: hidden; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 12px; }
.srs-result-stats article { display: flex; flex-direction: column; gap: 3px; padding: 11px; border-right: 1px solid var(--border-soft); }
.srs-result-stats article:last-child { border-right: 0; }
.srs-result-stats strong { font-size: calc(18px * var(--fs, 1)); font-variant-numeric: tabular-nums; }
.srs-result-stats span { color: var(--faint); font-size: calc(8.5px * var(--fs, 1)); text-transform: uppercase; }
.srs-result-actions { display: flex; grid-column: 2; gap: 9px; flex-wrap: wrap; }
@media (max-width: 860px) {
.srs-quiz-setup { grid-template-columns: minmax(0, 1fr); }
.srs-setup-main, .srs-setup-side { padding: 19px; }
}
@media (max-width: 600px) {
.quiz-area-tabs { grid-template-columns: minmax(0, 1fr); }
.quiz-area-tabs > button { min-height: 54px; }
.srs-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.srs-setup-main, .srs-setup-side, .srs-question-card, .srs-result { padding: 14px; }
.srs-hero { gap: 10px; }
.srs-hero-icon { width: 43px; height: 43px; border-radius: 12px; font-size: 21px; }
.srs-hero h2 { font-size: calc(21px * var(--fs, 1)); }
.srs-queue-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.srs-queue-stats article:nth-child(2) { border-right: 0; }
.srs-queue-stats article:nth-child(-n+2) { border-bottom: 1px solid var(--border-soft); }
.srs-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.srs-run-head { align-items: flex-start; }
.srs-run-head > div:first-child { align-items: flex-start; flex-direction: column; gap: 3px; }
.srs-question-card { min-height: 0; }
.srs-card-meta { align-items: flex-start; flex-direction: column; }
.srs-card-side { min-height: 180px; padding: 20px 11px; }
.srs-card-side > div { font-size: clamp(25px, 10vw, 37px); }
.srs-card-side.back > div { font-size: clamp(19px, 7vw, 27px); }
.srs-rating-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.srs-rating-grid button { min-height: 75px; }
.srs-result { grid-template-columns: minmax(0, 1fr); }
.srs-result-mark { grid-row: auto; width: 48px; height: 48px; border-radius: 14px; }
.srs-result-stats, .srs-result-actions { grid-column: 1; }
.srs-result-actions > button { flex: 1 1 145px; min-height: 44px; }
}
@media (max-width: 360px) {
.quiz-area-tabs { padding: 4px; }
.quiz-area-tabs small { white-space: normal; }
.quiz-quick-links > span { width: 100%; }
.srs-setup-main, .srs-setup-side, .srs-question-card, .srs-result { padding: 11px; }
.srs-schedule article { padding-inline: 9px; }
.srs-rating-grid { gap: 6px; }
.srs-rating-grid button { padding-inline: 4px; }
}
/* ── Quiz geral + quiz contextual do livro ── */
.quiz-setup { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(340px, .97fr); gap: 18px; align-items: start; max-width: 1120px; }
.qz-setup-overview, .qz-setup-config { min-width: 0; padding: 24px; }
.qz-setup-overview { display: flex; flex-direction: column; gap: 20px; min-height: 100%; background: radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 42%), var(--panel); }
.qz-eyebrow, .qz-config-head, .qz-run-head, .qz-result-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qz-eyebrow { color: var(--faint); font-size: calc(10.5px * var(--fs, 1)); font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.qz-scope-badge, .qz-step-badge { display: inline-flex; align-items: center; width: fit-content; min-height: 24px; padding: 3px 9px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border)); border-radius: 999px; font-size: calc(9.5px * var(--fs, 1)); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.qz-setup-title { display: flex; align-items: flex-start; gap: 15px; }
.qz-setup-title h2 { margin: 0 0 7px; max-width: 560px; font-size: clamp(22px, 3vw, 31px); line-height: 1.12; letter-spacing: -.025em; }
.qz-setup-title p { margin: 0; max-width: 600px; color: var(--muted); font-size: calc(13.5px * var(--fs, 1)); line-height: 1.55; }
.qz-setup-icon { display: grid; place-items: center; width: 50px; height: 50px; flex: none; color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); border-radius: 15px; font-size: 25px; }
.qz-setup-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--border-soft); border-radius: 14px; background: color-mix(in srgb, var(--panel-2) 75%, transparent); }
.qz-setup-stats article { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 14px; border-right: 1px solid var(--border-soft); }
.qz-setup-stats article:last-child { border-right: 0; }
.qz-setup-stats strong { overflow: hidden; color: var(--text); font-size: calc(19px * var(--fs, 1)); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.qz-setup-stats span { color: var(--faint); font-size: calc(10px * var(--fs, 1)); line-height: 1.3; }
.qz-last { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; padding: 12px 14px; background: color-mix(in srgb, var(--panel-2) 74%, transparent); border: 1px solid var(--border-soft); border-radius: 12px; }
.qz-last span { grid-row: 1 / 3; align-self: center; color: var(--faint); font-size: calc(9px * var(--fs, 1)); font-weight: 750; letter-spacing: .05em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); }
.qz-last strong { min-width: 0; overflow: hidden; font-size: calc(13px * var(--fs, 1)); text-overflow: ellipsis; white-space: nowrap; }
.qz-last small { color: var(--muted); font-size: calc(10.5px * var(--fs, 1)); }
.qz-history { border: 1px solid var(--border-soft); border-radius: 12px; padding: 11px 13px; background: color-mix(in srgb, var(--panel-2) 70%, transparent); }
.qz-history-title { color: var(--faint); font-size: calc(10.5px * var(--fs, 1)); margin-bottom: 8px; }
.qz-spark { height: 46px; display: flex; align-items: end; gap: 5px; }
.qz-spark span { width: 100%; min-width: 12px; max-width: 32px; border-radius: 5px 5px 2px 2px; background: var(--marker); box-shadow: 0 4px 16px var(--marker-strong); }
.qz-setup-config { display: flex; flex-direction: column; gap: 18px; }
.qz-config-head > div { display: flex; flex-direction: column; gap: 3px; }
.qz-config-head span:first-child { color: var(--faint); font-size: calc(9.5px * var(--fs, 1)); font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.qz-config-head strong { font-size: calc(18px * var(--fs, 1)); }
.qz-select-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 10px; align-items: start; }
.qz-select-grid .ne-voice { width: 100%; flex: 0 0 auto; height: 44px; min-height: 44px; }
.qz-select-grid .ne-voice:disabled { opacity: .6; cursor: not-allowed; }
.qz-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.qz-fieldset legend { margin-bottom: 9px; color: var(--muted); font-size: calc(11px * var(--fs, 1)); font-weight: 700; }
.qz-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.qz-modes button { display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: auto auto; gap: 1px 8px; min-height: 62px; padding: 9px 10px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--border-strong); border-radius: 11px; text-align: left; font: inherit; cursor: pointer; }
.qz-modes button > span { grid-row: 1 / 3; align-self: center; color: var(--faint); font-size: calc(14px * var(--fs, 1)); font-weight: 800; text-align: center; }
.qz-modes button strong { align-self: end; color: var(--text); font-size: calc(11.5px * var(--fs, 1)); }
.qz-modes button small { align-self: start; overflow: hidden; color: var(--faint); font-size: calc(9px * var(--fs, 1)); text-overflow: ellipsis; white-space: nowrap; }
.qz-modes button.active { color: var(--text); background: color-mix(in srgb, var(--accent) 13%, var(--panel-2)); border-color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent); }
.qz-modes button.active > span { color: var(--accent); }
.qz-modes button:disabled { opacity: .42; cursor: not-allowed; }
.qz-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(118px, 1.35fr); gap: 8px; }
.qz-counts > button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--border-strong); border-radius: 11px; font: 700 calc(15px * var(--fs, 1))/1.1 inherit; cursor: pointer; }
.qz-counts > button small { color: var(--faint); font-size: calc(8.5px * var(--fs, 1)); font-weight: 500; }
.qz-counts > button.active { color: var(--text); background: color-mix(in srgb, var(--accent) 13%, var(--panel-2)); border-color: var(--accent); }
.qz-custom-count { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; padding: 7px 9px; background: var(--panel-2); border: 1px solid var(--border-strong); border-radius: 11px; }
.qz-custom-count span { color: var(--faint); font-size: calc(8.5px * var(--fs, 1)); }
.qz-custom-count input { width: 100%; min-width: 0; padding: 0; color: var(--text); background: transparent; border: 0; outline: 0; font: 700 calc(13px * var(--fs, 1))/1.2 inherit; }
.qz-start { width: 100%; min-height: 48px; }
.qz-method-note { margin: -7px 0 0; color: var(--faint); font-size: calc(9.5px * var(--fs, 1)); line-height: 1.45; text-align: center; }
.qz-run-shell { width: min(760px, 100%); margin: 0 auto; }
.qz-run-head { margin-bottom: 11px; }
.qz-run-head > div:first-child { display: flex; align-items: center; gap: 9px; min-width: 0; }
.qz-run-head strong { min-width: 0; overflow: hidden; color: var(--muted); font-size: calc(11px * var(--fs, 1)); text-overflow: ellipsis; white-space: nowrap; }
.qz-live-score { flex: none; color: var(--muted); font-size: calc(12px * var(--fs, 1)); font-weight: 700; font-variant-numeric: tabular-nums; }
.qz-progress { position: relative; height: 7px; overflow: hidden; background: var(--panel-2); border-radius: 999px; }
.qz-progress .reader-progress-fill { height: 100%; }
.qz-meta { display: flex; justify-content: space-between; gap: 12px; margin: 8px 2px 14px; color: var(--faint); font-size: calc(11px * var(--fs, 1)); font-variant-numeric: tabular-nums; }
.qz-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; min-height: 300px; padding: 34px 24px; text-align: center; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 48%), var(--panel); }
.qz-rank { color: var(--faint); font-size: calc(10px * var(--fs, 1)); font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.qz-term { max-width: 100%; font-size: clamp(36px, 7vw, 58px); font-weight: 820; line-height: 1.05; letter-spacing: -.035em; overflow-wrap: anywhere; }
.qz-term.qz-context-term { gap: 12px; width: 100%; font-size: inherit; letter-spacing: normal; }
.qz-context-sentence { display: block; max-width: 650px; margin: 0 auto; font-size: clamp(23px, 4.5vw, 38px); font-weight: 680; line-height: 1.3; text-wrap: balance; }
.qz-context-sentence mark { padding: .05em .2em; color: var(--text); background: color-mix(in srgb, var(--accent) 30%, transparent); border-radius: .25em; }
.qz-context-term > small { display: block; margin-top: 12px; color: var(--faint); font-size: calc(10px * var(--fs, 1)); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.qz-context-translation { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--border-soft); }
.qz-reveal { display: flex; flex-direction: column; gap: 4px; max-width: 100%; color: var(--muted); font-size: calc(15px * var(--fs, 1)); }
.qz-ipa { color: #b9b0ff; font-size: calc(13px * var(--fs, 1)); }
:root[data-theme="light"] .qz-ipa { color: #6a59d6; }
.qz-tools { display: flex; align-items: center; justify-content: center; gap: 8px; }
.qz-tool-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 8px 13px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; font: 600 calc(11px * var(--fs, 1))/1 inherit; cursor: pointer; }
.qz-tool-btn:hover { color: var(--text); border-color: var(--accent); }
.qz-tool-btn svg { width: 16px; height: 16px; }
.qz-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px auto 0; }
.qz-answers button { display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 10px; min-height: 72px; padding: 12px 16px; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 15px; text-align: left; font: inherit; cursor: pointer; transition: transform .1s, border-color .14s, background .14s; }
.qz-answers button > span { grid-row: 1 / 3; align-self: center; font-size: calc(23px * var(--fs, 1)); text-align: center; }
.qz-answers button strong { align-self: end; font-size: calc(14px * var(--fs, 1)); }
.qz-answers button small { align-self: start; color: var(--faint); font-size: calc(9px * var(--fs, 1)); }
.qz-answers button:hover { transform: translateY(-1px); }
.qz-answers button:disabled { opacity: .48; cursor: not-allowed; filter: saturate(.55); transform: none; }
.qz-answers button:disabled:hover { color: var(--text); background: var(--panel); border-color: var(--border); }
.qz-no:hover { color: var(--red); background: color-mix(in srgb, var(--red) 7%, var(--panel)); border-color: var(--red); }
.qz-yes:hover { color: var(--green); background: color-mix(in srgb, var(--green) 7%, var(--panel)); border-color: var(--green); }
.qz-quit { display: block; margin: 14px auto 0; }
#quizDone { max-width: 940px; }
.quiz-result { max-width: 840px; padding: 24px; display: flex; flex-direction: column; gap: 20px; margin-bottom: 18px; }
.qz-result-head { justify-content: flex-start; }
.qz-result-head > div:last-child { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; }
.qz-result-head p { margin: 0; color: var(--faint); font-size: calc(11px * var(--fs, 1)); }
.qz-score-ring { --score: 0deg; position: relative; display: grid; place-items: center; width: 124px; height: 124px; flex: none; overflow: hidden; background: conic-gradient(var(--accent) var(--score), var(--panel-2) 0); border-radius: 50%; }
.qz-score-ring::before { position: absolute; inset: 9px; content: ''; background: var(--panel); border-radius: inherit; }
.qz-score-ring strong, .qz-score-ring small { position: relative; z-index: 1; }
.qz-score-ring strong { align-self: end; font-size: calc(25px * var(--fs, 1)); font-variant-numeric: tabular-nums; }
.qz-score-ring small { align-self: start; color: var(--faint); font-size: calc(8.5px * var(--fs, 1)); }
.qz-level { display: flex; flex-direction: column; gap: 4px; font-size: calc(24px * var(--fs, 1)); font-weight: 800; }
.qz-level small { max-width: 520px; color: var(--muted); font-size: calc(12.5px * var(--fs, 1)); font-weight: 500; line-height: 1.45; }
.qz-level .qz-method-note { color: var(--faint); font-size: calc(10.5px * var(--fs, 1)); letter-spacing: .02em; }
.qz-bars { display: flex; flex-direction: column; gap: 10px; padding: 15px; background: color-mix(in srgb, var(--panel-2) 75%, transparent); border: 1px solid var(--border-soft); border-radius: 13px; }
.qz-band-breakdown { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.qz-band-breakdown article { min-width: 0; padding: 10px 8px; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 11px; text-align: center; }
.qz-band-breakdown strong, .qz-band-breakdown span, .qz-band-breakdown small { display: block; }
.qz-band-breakdown strong { color: var(--text); font-size: calc(12px * var(--fs, 1)); }
.qz-band-breakdown span { margin: 3px 0; color: var(--muted); font-size: calc(11px * var(--fs, 1)); font-variant-numeric: tabular-nums; }
.qz-band-breakdown small { overflow: hidden; color: var(--faint); font-size: calc(8px * var(--fs, 1)); text-overflow: ellipsis; white-space: nowrap; }
.qz-band-breakdown article.insufficient { opacity: .55; }
.qz-bar-row { display: grid; grid-template-columns: 180px minmax(0,1fr) 48px; align-items: center; gap: 10px; color: var(--muted); font-size: calc(11.5px * var(--fs, 1)); }
.qz-bar { height: 9px; overflow: hidden; background: var(--panel); border-radius: 999px; }
.qz-bar b { display: block; width: 0; height: 100%; background: var(--accent-grad); border-radius: inherit; transition: width .5s ease; }
.qz-bar-row strong { text-align: right; font-variant-numeric: tabular-nums; }
.qz-summary { padding-top: 10px; color: var(--muted); border-top: 1px dashed var(--border); font-size: calc(12px * var(--fs, 1)); line-height: 1.5; }
.qz-done-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.qz-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 14px; }
.qz-col { padding: 14px; }
.qz-words { display: flex; flex-wrap: wrap; gap: 6px; max-height: 300px; overflow-y: auto; }
@media (max-width: 820px) {
.quiz-setup { grid-template-columns: minmax(0, 1fr); }
.qz-setup-overview, .qz-setup-config { padding: 19px; }
}
@media (max-width: 560px) {
.translator-engines { grid-template-columns: 1fr; }
.qz-setup-overview, .qz-setup-config, .qz-card, .quiz-result { padding: 15px; }
.qz-setup-title { gap: 10px; }
.qz-setup-icon { width: 42px; height: 42px; border-radius: 12px; }
.qz-setup-title h2 { font-size: calc(20px * var(--fs, 1)); }
.qz-setup-stats { grid-template-columns: minmax(0, 1fr); }
.qz-setup-stats article { flex-direction: row; align-items: baseline; justify-content: space-between; border-right: 0; border-bottom: 1px solid var(--border-soft); }
.qz-setup-stats article:last-child { border-bottom: 0; }
.qz-select-grid, .qz-modes { grid-template-columns: minmax(0, 1fr); }
.qz-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qz-custom-count { grid-column: 1 / -1; }
.qz-run-head { align-items: flex-start; }
.qz-run-head > div:first-child { align-items: flex-start; flex-direction: column; gap: 4px; }
.qz-meta span:last-child { display: none; }
.qz-card { min-height: 260px; }
.qz-term { font-size: clamp(32px, 12vw, 46px); }
.qz-answers { gap: 8px; }
.qz-answers button { grid-template-columns: 32px minmax(0, 1fr); min-height: 68px; padding: 10px 8px; }
.qz-answers button > span { font-size: calc(18px * var(--fs, 1)); }
.qz-answers button strong { font-size: calc(12px * var(--fs, 1)); }
.qz-result-head { align-items: flex-start; }
.qz-score-ring { width: 94px; height: 94px; }
.qz-score-ring strong { font-size: calc(20px * var(--fs, 1)); }
.qz-level { font-size: calc(19px * var(--fs, 1)); }
.qz-band-breakdown { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qz-bar-row { grid-template-columns: minmax(0, 1fr) 46px; gap: 6px; }
.qz-bar-row > span:first-child { grid-column: 1 / -1; }
}
/* ── Notas (caderno de estudo estilo Obsidian) ── */
.notes-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.notes-side { position: sticky; top: 18px; display: flex; flex-direction: column; gap: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; max-height: calc(100vh - 130px); max-height: calc(100dvh - 130px); overflow-y: auto; }
.notes-side .side-head { margin: 8px 2px 2px; }
.notes-list { display: flex; flex-direction: column; gap: 4px; }
.note-item { display: flex; flex-direction: column; gap: 3px; width: 100%; min-width: 0; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 9px; padding: 9px 10px; cursor: pointer; font-family: inherit; color: var(--text); transition: background .12s, border-color .12s; }
.note-item:hover { background: var(--panel-2); }
.note-item.active { background: rgba(124,107,255,.14); border-color: var(--accent); }
.note-item.marked { padding-left: 14px; border-color: color-mix(in srgb, var(--note-marker) 45%, transparent); box-shadow: inset 5px 0 0 var(--note-marker); }
.note-item strong { font-size: calc(13.5px * var(--fs, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-item span { font-size: calc(12px * var(--fs, 1)); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note-item small { font-size: calc(10.5px * var(--fs, 1)); color: var(--faint); }
.note-item .note-item-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 3px; overflow: visible; white-space: normal; }
.note-item .note-item-badges > span { width: auto; color: inherit; font-size: calc(8.5px * var(--fs, 1)); white-space: nowrap; }
.note-item .note-item-badges .language-badge { color: var(--text); }
.note-item .note-item-badges .access-badge.private { color: var(--faint); }
.notes-editor { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.notes-editor.marked { border-color: color-mix(in srgb, var(--note-marker) 52%, var(--border)); box-shadow: inset 5px 0 0 var(--note-marker); }
.ne-top { display: flex; align-items: center; gap: 8px; }
.ne-top .note-title-input { flex: 1; min-width: 0; }
.ne-back { display: none; } /* só aparece no celular (editor cobre a lista) */
.ne-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: calc(11.5px * var(--fs, 1)); color: var(--faint); }
.ne-text { min-height: 160px; font-size: calc(15px * var(--fs, 1)); line-height: 1.7; }
.ne-trans { min-height: 92px; font-size: calc(14.5px * var(--fs, 1)); line-height: 1.6; font-style: italic; }
.ne-field-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 5px; font-size: calc(11.5px * var(--fs, 1)); text-transform: uppercase; letter-spacing: .04em; color: var(--faint); }
.ne-field-head .mini-btn { text-transform: none; letter-spacing: 0; }
.ne-status { min-height: 16px; text-align: right; }
.ne-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ne-voice { flex: 1 1 200px; min-width: 0; background: var(--panel-2); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 8px 10px; font-size: calc(13px * var(--fs, 1)); }
/* Dentro de um .field em coluna, o flex-basis acima viraria ALTURA (select
gigante). O select volta ao tamanho natural do conteúdo. */
.field > .ne-voice { flex: 0 0 auto; height: auto; }
#neRecord.recording { border-color: var(--red); color: var(--red); animation: recpulse 1.3s infinite; }
.ne-ask { border-top: 1px dashed var(--border); padding-top: 10px; }
.ne-ask-row { display: flex; gap: 8px; align-items: stretch; }
.ne-ask-row .text-input { flex: 1; min-height: 0; }
.ne-ask-row .btn-primary { flex: none; align-self: flex-end; }
@media (max-width: 820px) {
.notes-layout { grid-template-columns: minmax(0, 1fr); }
.notes-side { position: static; max-height: none; }
/* celular: editor aberto cobre a lista (volta pela seta ou pelo back) */
.notes-layout.editor-open .notes-side { display: none; }
.ne-back { display: grid; }
}
/* 💾 salvar resposta de IA em Notas (caixinha do leitor) */
.ws-save-note { display: inline-block; margin-top: 8px; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 4px 12px; font-size: calc(12px * var(--fs, 1)); cursor: pointer; font-family: inherit; }
.ws-save-note:hover { border-color: var(--accent); color: var(--text); }
.ws-save-note:disabled { opacity: .6; }
/* Rótulos de seção no menu lateral (Estudo · Criação · Sistema) */
.sb-nav-label { margin: 12px 8px 4px; }
.sb-nav .sb-nav-label:first-child { margin-top: 2px; }
/* Badge de nível nos cards (trilha) */
.level-badge { --level-color: var(--accent); display: inline-flex; align-items: center; gap: 4px; font-size: calc(10.5px * var(--fs, 1)); font-weight: 700; color: var(--level-color); background: color-mix(in srgb, var(--level-color) 14%, transparent); border: 1px solid color-mix(in srgb, var(--level-color) 45%, var(--border)); border-radius: 999px; padding: 1px 8px; white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
/* status na lista de Aprendidas */
.lw-status-chip { background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 4px 10px; font-size: calc(11.5px * var(--fs, 1)); font-family: inherit; cursor: pointer; white-space: nowrap; }
.lw-status-chip.known { border-color: rgba(61,220,151,.55); color: var(--green); }
.lw-status-chip.learning { border-color: rgba(255,180,84,.55); color: #ffb454; }
/* linhas-botão de popover (escolher nível / lista) */
.pop-btn { width: 100%; background: transparent; border: 1px solid transparent; color: var(--text); font-family: inherit; font-size: calc(13px * var(--fs, 1)); text-align: left; }
.pop-btn:disabled { opacity: .5; }
/* Trilha de estudos */
.appearance-sub { margin-top: 16px; }
.levels-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.level-card { --level-color: var(--accent); display: flex; align-items: center; gap: 12px; width: 100%; min-height: 112px; padding: 16px; border: 1px solid var(--border-soft); border-left: 5px solid var(--level-color); border-radius: 12px; background: var(--panel); color: var(--text); text-align: left; cursor: pointer; font-family: inherit; box-shadow: var(--shadow); transition: transform .14s, border-color .14s; }
.level-card:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--level-color) 60%, var(--border)); }
.level-card.compact { min-height: 76px; box-shadow: none; padding: 12px; }
.level-card-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--level-color) 18%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--level-color) 50%, var(--border)); font-size: calc(20px * var(--fs, 1)); }
.level-card-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.level-card-main strong { font-size: calc(15px * var(--fs, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.level-card-main span { color: var(--muted); font-size: calc(12.5px * var(--fs, 1)); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.level-card-main .level-card-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; overflow: visible; }
.level-card-main .level-card-badges > b { display: inline-flex; width: auto; min-height: 20px; padding: 1px 6px; font-size: calc(8.5px * var(--fs, 1)); font-style: normal; }
.level-card-main i { height: 6px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.level-card-main i b { display: block; height: 100%; border-radius: inherit; background: var(--level-color); }
.level-card-pct { color: var(--faint); font-size: calc(12px * var(--fs, 1)); font-weight: 700; font-variant-numeric: tabular-nums; }
.level-head { align-items: center; }
.level-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--border); font-size: calc(21px * var(--fs, 1)); flex: none; }
.level-head-main { min-width: 0; flex: 1; }
.level-head-sub, .level-progress-meta { color: var(--faint); font-size: calc(12.5px * var(--fs, 1)); }
.level-progress { height: 8px; border-radius: 999px; background: var(--panel-2); overflow: hidden; margin: 12px 0 6px; }
.level-progress-fill { height: 100%; width: 0; background: var(--accent-grad); border-radius: inherit; transition: width .2s; }
.level-subs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 10px; margin: 16px 0; }
.level-addword { padding: 14px; margin: 18px 0; }
.lw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 14px; }
.lw-card { background: var(--panel); border: 1px solid var(--border-soft); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.lw-card.learning { border-color: rgba(255,180,84,.55); }
.lw-card.known { border-color: rgba(61,220,151,.55); }
.lw-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.lw-top strong { display: block; font-size: calc(17px * var(--fs, 1)); word-break: break-word; }
.lw-top span, .lw-ipa, .lw-note { color: var(--muted); font-size: calc(12.5px * var(--fs, 1)); line-height: 1.45; }
.lw-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.lw-status { display: flex; gap: 6px; flex-wrap: wrap; }
.lw-status button { background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 4px 9px; font-size: calc(11.5px * var(--fs, 1)); font-family: inherit; cursor: pointer; }
.lw-status button.active { border-color: var(--accent); color: var(--text); background: rgba(124,107,255,.16); }
.lw-card.known .lw-status button[data-status="known"].active { border-color: var(--green); color: var(--green); background: rgba(61,220,151,.12); }
.lw-phrases { display: flex; flex-direction: column; gap: 7px; }
.lw-phrase { display: flex; align-items: center; gap: 8px; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 9px; padding: 8px; }
.lw-phrase > div { min-width: 0; }
.lw-phrase b, .lw-phrase span, .lw-phrase em { display: block; font-size: calc(12.5px * var(--fs, 1)); line-height: 1.35; }
.lw-phrase span, .lw-phrase em { color: var(--faint); font-style: normal; margin-top: 2px; }
.lw-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; }
/* Trilha/listas v2 — conteúdo curricular separado do progresso pessoal. */
.level-study-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 13px 0 10px; }
.level-study-overview article { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 11px 13px; background: var(--panel); border: 1px solid var(--border-soft); border-radius: 12px; }
.level-study-overview strong { font-size: calc(18px * var(--fs, 1)); font-variant-numeric: tabular-nums; }
.level-study-overview span { color: var(--faint); font-size: calc(9.5px * var(--fs, 1)); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.level-study-toolbar { display: flex; gap: 9px; margin: 10px 0 16px; }
.level-study-toolbar .search { flex: 1; min-width: 0; }
.level-study-toolbar select { width: min(220px, 42vw); }
.lw-grid { grid-template-columns: minmax(0, 1fr); }
.lw-card.curriculum-word { padding: 18px; gap: 12px; border-radius: 16px; box-shadow: 0 10px 28px color-mix(in srgb, #000 12%, transparent); }
.lw-card.curriculum-word.expanded { border-color: color-mix(in srgb, var(--accent) 40%, var(--border-soft)); }
.lw-identity { min-width: 0; }
.lw-identity small { display: block; margin-bottom: 3px; color: var(--faint); font-size: calc(9px * var(--fs, 1)); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.lw-identity strong { font-size: clamp(20px, 3vw, 27px); line-height: 1.1; }
.lw-identity span { display: block; margin-top: 5px; max-width: 720px; }
.lw-card .lw-ipa { width: fit-content; max-width: min(100%, 360px); overflow: hidden; padding: 5px 9px; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 8px; font-family: var(--font-mono, monospace); text-overflow: ellipsis; white-space: nowrap; }
.lw-phrase-collection { overflow: hidden; border: 1px solid var(--border-soft); border-radius: 14px; background: color-mix(in srgb, var(--panel-2) 55%, transparent); }
.lw-phrase-collection > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 13px; border-bottom: 1px solid var(--border-soft); background: color-mix(in srgb, var(--panel) 86%, transparent); }
.lw-phrase-collection > header > div { min-width: 0; }
.lw-phrase-collection > header strong, .lw-phrase-collection > header span { display: block; }
.lw-phrase-collection > header strong { font-size: calc(13px * var(--fs, 1)); }
.lw-phrase-collection > header span { margin-top: 2px; color: var(--faint); font-size: calc(10.5px * var(--fs, 1)); }
.lw-phrases { gap: 0; }
.lw-phrase { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 11px; padding: 12px 13px; background: transparent; border: 0; border-radius: 0; }
.lw-phrase + .lw-phrase { border-top: 1px solid var(--border-soft); }
.lw-phrase:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.lw-phrase-index { display: grid; place-items: center; width: 31px; height: 31px; flex: none; color: var(--faint); background: var(--panel); border: 1px solid var(--border-soft); border-radius: 9px; font-size: calc(9px * var(--fs, 1)); font-weight: 800; font-variant-numeric: tabular-nums; }
.lw-phrase-content { flex: 1; min-width: 0; }
.lw-phrase-copy b { color: var(--text); font-size: calc(13.5px * var(--fs, 1)); line-height: 1.45; }
.lw-phrase-copy span { margin-top: 4px; color: var(--muted); font-size: calc(12.5px * var(--fs, 1)); }
.lw-phrase-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.lw-phrase-actions { display: flex; align-items: center; gap: 7px; flex: none; }
.lw-phrase-learning { grid-column: 2 / -1; min-width: 0; }
.lw-phrase-learning .memory-cell.compact { width: 100%; margin-top: 0; }
.lw-card .play-btn-sm {
position: relative;
display: grid;
place-items: center;
width: 42px;
height: 42px;
min-width: 42px;
min-height: 42px;
padding: 0 0 0 2px;
overflow: hidden;
color: #fff;
background: var(--accent-grad);
border: 1px solid color-mix(in srgb, var(--accent) 70%, #fff 8%);
border-radius: 50%;
box-shadow: 0 5px 16px color-mix(in srgb, var(--accent) 24%, transparent);
font: inherit;
font-size: calc(13px * var(--fs, 1));
line-height: 1;
cursor: pointer;
flex: none;
touch-action: manipulation;
transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.lw-card .play-btn-sm:hover { transform: translateY(-1px); box-shadow: 0 7px 20px color-mix(in srgb, var(--accent) 34%, transparent); }
.lw-card .play-btn-sm:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 3px; }
.lw-card .play-btn-sm:disabled { cursor: wait; opacity: .72; }
.lw-card .play-btn-sm[data-play-state="playing"] { padding-left: 0; background: color-mix(in srgb, var(--accent) 82%, #181527); }
.lw-phrase-actions .icon-btn { width: 40px; height: 40px; border-color: var(--border-soft); background: var(--panel); }
.lw-phrase.preview { padding-block: 10px; }
.lw-phrase.preview .lw-phrase-index { width: 27px; height: 27px; }
.lw-more { width: calc(100% - 24px); margin: 10px 12px 12px; justify-content: center; }
/* Célula SRS: todas as cores e percentuais recebidos do domínio no servidor. */
.memory-cell { --memory-color: #8d90a3; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 12px; background: color-mix(in srgb, var(--memory-color) 5%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--memory-color) 32%, var(--border-soft)); border-radius: 13px; }
.memory-cell[data-memory-color="danger"] { --memory-color: #ff6b81; }
.memory-cell[data-memory-color="orange"] { --memory-color: #ff8a5b; }
.memory-cell[data-memory-color="amber"] { --memory-color: #f6c65b; }
.memory-cell[data-memory-color="blue"] { --memory-color: #54a0ff; }
.memory-cell[data-memory-color="violet"] { --memory-color: #a98cff; }
.memory-cell[data-memory-color="green"] { --memory-color: #3ddc97; }
.memory-score { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 58px; min-height: 52px; border-right: 1px solid color-mix(in srgb, var(--memory-color) 34%, var(--border-soft)); }
.memory-score strong { color: var(--memory-color); font-size: calc(19px * var(--fs, 1)); line-height: 1; font-variant-numeric: tabular-nums; }
.memory-score span { margin-top: 4px; color: var(--faint); font-size: calc(8px * var(--fs, 1)); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.memory-body { min-width: 0; }
.memory-title { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.memory-title b { color: var(--text); font-size: calc(11.5px * var(--fs, 1)); white-space: nowrap; }
.memory-title span { overflow: hidden; color: var(--faint); font-size: calc(9.5px * var(--fs, 1)); text-overflow: ellipsis; white-space: nowrap; }
.memory-cycle { display: grid; grid-template-columns: repeat(10, minmax(3px, 1fr)); gap: 3px; margin: 7px 0 6px; }
.memory-cycle i { height: 5px; background: var(--border-soft); border-radius: 999px; }
.memory-cycle i.filled { background: var(--memory-color); }
.memory-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: calc(9.5px * var(--fs, 1)); }
.memory-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.memory-meta small { color: var(--faint); white-space: nowrap; }
.memory-consistency-bar {
display: grid;
grid-template-columns: auto minmax(42px, 1fr) auto;
align-items: center;
gap: 7px;
margin-top: 6px;
color: var(--faint);
font-size: calc(8.5px * var(--fs, 1));
}
.memory-consistency-bar > i {
height: 4px;
overflow: hidden;
background: var(--border-soft);
border-radius: 999px;
}
.memory-consistency-bar > i > b {
display: block;
height: 100%;
background: var(--memory-color);
border-radius: inherit;
}
.memory-consistency-bar > strong {
color: var(--muted);
font-size: inherit;
font-variant-numeric: tabular-nums;
}
.memory-counters {
display: flex;
flex-wrap: wrap;
gap: 4px 9px;
margin-top: 5px;
color: var(--faint);
font-size: calc(8px * var(--fs, 1));
}
.memory-primary { min-height: 36px; padding: 7px 12px; color: var(--memory-color); background: color-mix(in srgb, var(--memory-color) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--memory-color) 48%, var(--border)); border-radius: 10px; font: inherit; font-size: calc(10.5px * var(--fs, 1)); font-weight: 750; cursor: pointer; }
.memory-primary:hover { background: color-mix(in srgb, var(--memory-color) 17%, var(--panel)); }
.memory-cell.compact { margin-top: 9px; padding: 9px 10px; }
.memory-cell.compact .memory-score { width: 50px; min-height: 44px; }
.memory-cell.compact .memory-score strong { font-size: calc(16px * var(--fs, 1)); }
.memory-review { padding: 11px; background: var(--panel); border: 1px solid var(--border-soft); border-top: 0; border-radius: 0 0 12px 12px; }
.memory-review p { margin: 0 0 8px; color: var(--muted); font-size: calc(10.5px * var(--fs, 1)); }
.memory-ratings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.memory-ratings button { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 46px; padding: 6px; color: var(--text); background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 9px; font: inherit; cursor: pointer; }
.memory-ratings button:hover { border-color: var(--accent); }
.memory-ratings span { font-size: calc(9.5px * var(--fs, 1)); font-weight: 700; }
.memory-ratings small { color: var(--faint); font-size: calc(9px * var(--fs, 1)); }
.memory-secondary { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.memory-secondary button { padding: 3px 0; color: var(--faint); background: transparent; border: 0; font: inherit; font-size: calc(9px * var(--fs, 1)); cursor: pointer; }
.memory-secondary button:hover { color: var(--text); }
@media (max-width: 700px) {
.level-study-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.level-study-toolbar { flex-direction: column; }
.level-study-toolbar select { width: 100%; min-height: 42px; }
.lw-card.curriculum-word { padding: 12px; border-radius: 14px; }
.lw-top { gap: 8px; }
.lw-top .play-btn-sm { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
.lw-phrase-collection > header { align-items: flex-start; flex-direction: column; }
.lw-phrase-collection > header button { width: 100%; justify-content: center; }
.lw-phrase { grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding: 11px 9px; }
.lw-phrase-index { width: 28px; height: 28px; }
.lw-phrase-actions { grid-column: 2 / -1; justify-content: flex-end; margin-top: 1px; }
.lw-phrase-actions button, .lw-phrase-actions .play-btn-sm { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
.lw-phrase-learning { grid-column: 1 / -1; margin-top: 2px; }
.memory-cell, .memory-cell.compact { grid-template-columns: auto minmax(0, 1fr); gap: 9px; }
.memory-primary { grid-column: 1 / -1; width: 100%; min-height: 42px; }
.memory-title { align-items: flex-start; flex-direction: column; gap: 2px; }
.memory-title span { max-width: 100%; }
.memory-meta { align-items: flex-start; flex-direction: column; gap: 2px; }
.memory-ratings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 390px) {
.level-study-overview { gap: 6px; }
.level-study-overview article { padding: 9px 10px; }
.lw-card.curriculum-word { padding: 9px; gap: 10px; }
.lw-phrase-collection { border-radius: 12px; }
.lw-phrase-collection > header { padding: 10px; }
.lw-phrase { padding-inline: 7px; }
.lw-phrase-copy b { font-size: calc(13px * var(--fs, 1)); overflow-wrap: anywhere; }
.lw-phrase-copy span { font-size: calc(12px * var(--fs, 1)); overflow-wrap: anywhere; }
.memory-cell, .memory-cell.compact { padding: 9px 8px; gap: 7px; }
.memory-score, .memory-cell.compact .memory-score { width: 45px; }
.memory-cycle { gap: 2px; }
.lw-more { width: calc(100% - 16px); margin-inline: 8px; }
}
/* Leitor */
/* O leitor ocupa a tela menos o cabeçalho. Em vh ele ficava mais ALTO que a área
visível no celular e o player escorregava para baixo da dobra. */
#books-reader { display: flex; flex-direction: column; height: calc(100vh - 130px); height: calc(100dvh - 130px); min-height: 420px; }
.reader-topbar { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; }
.reader-back { font-size: calc(18px * var(--fs, 1)); }
.reader-title { flex: 1; text-align: center; font-weight: 600; font-size: calc(15px * var(--fs, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-top-actions { display: flex; align-items: center; gap: 8px; }
.reader-top-actions .icon-btn.on { border-color: var(--accent); color: var(--accent); background: rgba(124,107,255,.12); }
.reader-aa { font-weight: 800; font-size: calc(13px * var(--fs, 1)); letter-spacing: .01em; }
/* no desktop a lista lateral já navega os capítulos — o select é só do celular */
@media (min-width: 901px) { .reader-chsel { display: none; } }
/* ── Ajustes de leitura (folha Aa): todas as preferências num lugar só ── */
.reader-sheet-backdrop { position: fixed; inset: 0; z-index: 190; background: rgba(8, 8, 18, .46); }
.reader-settings { position: fixed; z-index: 200; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow); }
.rs-grip { flex: none; width: 44px; height: 4px; border-radius: 999px; background: var(--border); margin: 8px auto 0; }
.rs-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 2px 8px; }
.rs-head strong { font-size: calc(14.5px * var(--fs, 1)); }
.rs-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 2px 6px; }
.rs-section + .rs-section { border-top: 1px solid var(--border-soft); margin-top: 10px; padding-top: 10px; }
.rs-section h4 { margin: 2px 0 6px; font-size: calc(10.5px * var(--fs, 1)); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); font-weight: 700; }
.rs-hint { margin: 0 0 8px; color: var(--faint); font-size: calc(11.5px * var(--fs, 1)); line-height: 1.4; }
.rs-inline { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.rs-palette { padding: 2px 0 6px; }
.reader-settings .rm-font { margin: 4px 0 10px; }
.reader-settings .rm-font button { min-width: 64px; min-height: 40px; }
.reader-settings .rm-mode { margin: 0 0 8px; }
.reader-settings .rm-mode button { min-height: 40px; }
.reader-settings .rm-check { min-height: 44px; padding: 4px 2px; }
.reader-settings .rm-check .rm-sel { max-width: 200px; min-height: 36px; }
.reader-settings input[type="color"] { width: 42px; height: 32px; margin-left: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); padding: 2px; cursor: pointer; }
.rs-range { flex: 1 1 120px; min-width: 100px; accent-color: var(--accent); height: 28px; cursor: pointer; }
.rs-range-val { flex: none; min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: calc(12.5px * var(--fs, 1)); }
.reader-settings .rs-section > .mini-btn { margin-top: 4px; }
.reader-settings .rm-check .rs-inline input[type="color"] { margin-left: 0; }
body.reader-settings-open .reader-main { overflow: hidden; }
@media (min-width: 821px) {
.reader-settings { top: 86px; right: 18px; width: 372px; max-height: min(78vh, 720px); border-radius: 16px; padding: 0 16px 14px; }
.rs-grip { display: none; }
.rs-head { padding-top: 14px; }
}
@media (max-width: 820px) {
.reader-settings { left: 0; right: 0; bottom: 0; border-bottom: none; border-radius: 18px 18px 0 0; max-height: 78dvh; padding: 0 14px calc(12px + env(safe-area-inset-bottom, 0px)); animation: rsSheetUp .18s ease; }
.reader-settings .rm-check { flex-wrap: wrap; gap: 6px 10px; }
.reader-settings .rm-check .rm-sel { flex: 1 1 160px; width: 100%; max-width: none; }
.reader-settings .rs-inline { flex: none; }
@keyframes rsSheetUp { from { transform: translateY(26px); opacity: .55; } to { transform: none; opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) { .reader-settings { animation: none; } }
.reader-voice { appearance: none; background: var(--panel-2) url("data:image/svg+xml;utf8,") no-repeat right 10px center; color: var(--text); border: 1px solid var(--border); border-radius: 9px; padding: 8px 30px 8px 12px; font-size: calc(13px * var(--fs, 1)); cursor: pointer; max-width: 230px; }
.reader-voice:focus { outline: none; border-color: var(--accent); }
.reader-progress { height: 3px; background: var(--panel-2); border-radius: 999px; overflow: hidden; }
.reader-progress-fill { height: 100%; width: 0%; background: var(--accent-grad); transition: width .2s; }
.reader-progress-meta { display: flex; justify-content: center; min-height: 18px; padding-top: 5px; color: var(--faint); font-size: calc(11.5px * var(--fs, 1)); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-body { position: relative; display: flex; gap: 18px; flex: 1; min-height: 0; margin-top: 12px; }
.reader-chapters { width: 208px; flex: none; overflow-y: auto; border-right: 1px solid var(--border-soft); padding-right: 10px; }
.reader-words, .reader-files { width: 238px; flex: none; overflow-y: auto; border-right: 1px solid var(--border-soft); padding-right: 10px; }
.rc-head { font-size: calc(11px * var(--fs, 1)); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin: 4px 4px 8px; }
.rc-list { display: flex; flex-direction: column; gap: 2px; }
.rc-item { text-align: left; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 8px 10px; color: var(--muted); cursor: pointer; font-family: inherit; font-size: calc(13px * var(--fs, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .12s, color .12s; }
.rc-item:hover { background: var(--panel-2); color: var(--text); }
.rc-item.active { background: rgba(124,107,255,.16); border-color: var(--accent); color: var(--text); }
.reader-main { position: relative; flex: 1; overflow-y: auto; scroll-behavior: smooth; }
/* paginado: o encaixe de página é feito por JS (snap exato por coluna) */
.reader-main.paged { overflow-x: auto; overflow-y: hidden; }
/* Frase por linha: cada frase vira um bloco curto (fácil de ouvir/acompanhar) */
.reader-doc.sent-lines .sent { display: block; margin: 0 0 .42em; padding: 2px 4px; }
.ico { display: block; flex: none; pointer-events: none; }
.sent { position: relative; border-radius: 6px; }
.sent-actions {
position: absolute;
z-index: 8;
right: 2px;
top: 100%;
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--panel);
box-shadow: var(--shadow);
opacity: 0;
pointer-events: none;
transition: opacity .14s;
}
.sent:hover > .sent-actions,
.sent:focus-within > .sent-actions { opacity: 1; pointer-events: auto; }
.sent-btn {
display: grid;
place-items: center;
width: 28px;
height: 28px;
padding: 0;
border: 1px solid transparent;
border-radius: 6px;
background: transparent;
color: var(--faint);
cursor: pointer;
}
.sent-btn:hover, .sent-btn:focus-visible { color: var(--text); border-color: var(--border); background: var(--panel-2); }
.sent-btn.playing { color: var(--accent); border-color: var(--accent); }
.sent-btn.done { color: var(--green); border-color: rgba(61,220,151,.5); }
.sent-btn.loading { color: transparent; pointer-events: none; }
.sent-btn.loading::after { content: ""; width: 13px; height: 13px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
.reader-doc.sent-lines .sent { min-height: 32px; padding-right: 98px; }
.reader-doc.sent-lines .sent-actions { top: 2px; box-shadow: none; background: transparent; opacity: .3; pointer-events: auto; }
.reader-doc.sent-lines .sent:hover > .sent-actions,
.reader-doc.sent-lines .sent:focus-within > .sent-actions,
.reader-doc.sent-lines .sent.reading > .sent-actions { opacity: 1; }
.sent-trans {
display: block;
margin: .3em 0 .2em;
color: var(--faint);
font-size: .86em;
line-height: 1.55;
font-style: normal;
}
.sent-trans.error { color: var(--red); font-size: .78em; }
.reader-doc.sent-lines .rp-para { margin-bottom: 1.25em; }
.reader-doc.sent-lines .sent.reading { box-shadow: none; background: var(--marker-soft); border-left: 3px solid var(--marker); padding-left: 8px; border-radius: 6px; }
.reader-chtitle { font-family: var(--reading-font); font-size: calc(27px * var(--fs, 1)); font-weight: 700; max-width: 720px; margin: 6px auto 2px; padding: 0 24px; letter-spacing: -.01em; }
.reader-doc { max-width: 720px; margin: 0 auto; padding: 22px 24px 45vh; font-family: var(--reading-font); font-size: calc(19px * var(--fs, 1)); line-height: 1.85; color: var(--text); }
.reader-main.paged .reader-doc { height: calc(100% - 24px); max-width: none; min-width: 100%; margin: 0; padding: 22px 48px 128px; column-width: min(680px, calc(100vw - 120px)); column-gap: 72px; column-fill: auto; }
.reader-doc-end { height: 1px; }
/* Rodapé de passagem: navegar para o capítulo anterior/próximo ao fim do texto. */
.reader-chap-nav { font-family: var(--ui-font); max-width: 720px; margin: 2.4em auto .4em; padding: 0 24px; display: flex; flex-direction: column; gap: 14px; }
.reader-main.paged .reader-chap-nav { max-width: none; margin: 1.4em 0 0; padding: 0; break-inside: avoid; }
.reader-chap-nav .rcn-label { text-align: center; color: var(--muted); font-size: calc(12.5px * var(--fs, 1)); letter-spacing: .03em; display: flex; align-items: center; gap: 12px; }
.reader-chap-nav .rcn-label::before, .reader-chap-nav .rcn-label::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.reader-chap-nav .rcn-row { display: flex; gap: 12px; }
.rcn-btn { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 12px 14px; cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s, transform .08s; }
.rcn-btn:hover { border-color: var(--accent); background: var(--panel-2); }
.rcn-btn:active { transform: translateY(1px); }
.rcn-btn.rcn-next { justify-content: flex-end; text-align: right; }
.rcn-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.28; }
.rcn-txt small { color: var(--muted); font-size: calc(11px * var(--fs, 1)); text-transform: uppercase; letter-spacing: .06em; }
.rcn-txt b { font-weight: 600; font-size: calc(14px * var(--fs, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcn-btn > svg { flex: none; color: var(--muted); }
.rcn-btn:hover > svg { color: var(--accent); }
/* Modo foco: leitura sem distrações — esconde a lateral de capítulos e os menus
secundários (palavras, opções) e centraliza/alarga a coluna de texto, deixando
só o texto e o essencial. (Tela-cheia real por overlay esbarrou no bloco-
contêiner da .view, que anima a troca de telas; o F11 do navegador cobre isso.) */
body.reading-focus .reader-chapters { display: none; }
body.reading-focus #readerWordsBtn,
body.reading-focus #readerBookMenu { display: none; }
body.reading-focus .reader-body { justify-content: center; }
body.reading-focus .reader-main { max-width: min(880px, 100%); margin-inline: auto; }
.reader-focus-btn.on { color: var(--accent); border-color: var(--accent); }
.reader-page-btn { display: none; position: sticky; top: 50%; z-index: 75; width: 34px; height: 54px; margin-top: -27px; border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: 999px; box-shadow: var(--shadow); cursor: pointer; font-size: calc(28px * var(--fs, 1)); line-height: 1; }
.reader-main.paged .reader-page-btn { display: grid; place-items: center; }
.reader-page-prev { left: 8px; float: left; }
.reader-page-next { right: 8px; float: right; }
.reader-page-btn:hover { border-color: var(--accent); color: var(--accent); }
.rp-para { margin: 0 0 1.2em; position: relative; padding-left: 0; }
.rp-para.kind-quote { font-style: italic; color: var(--muted); }
/* goteira do parágrafo: ▶ ler daqui · 🌐 traduzir · ⬇ salvar clipe */
.para-gutter { position: relative; left: auto; top: auto; display: flex; flex-direction: row; align-items: center; width: 100%; gap: 6px; margin: .12em 0 8px; }
.para-gutter .para-play { margin-right: auto; }
.para-play { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--accent); background: transparent; color: var(--accent); font-size: calc(12px * var(--fs, 1)); line-height: 1; cursor: pointer; display: grid; place-items: center; opacity: .78; transition: opacity .15s, background .15s, color .15s; }
.para-play:hover { opacity: 1; background: var(--accent); color: #fff; }
.para-play.playing { opacity: 1; background: var(--accent); color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.para-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--faint); font-size: calc(14px * var(--fs, 1)); line-height: 1; cursor: pointer; display: grid; place-items: center; opacity: .42; transition: all .15s; }
.para-btn:hover { border-color: var(--accent); color: var(--text); opacity: 1; }
.para-btn:disabled { opacity: .4; cursor: default; }
.para-btn.done { border-color: var(--known-color, #55d6a0); color: var(--known-color, #55d6a0); opacity: .95; background: color-mix(in srgb, var(--known-color, #55d6a0) 10%, transparent); }
.para-record.recording { color: #fff; background: var(--red); border-color: var(--red); opacity: 1; animation: micPulse 1.1s ease-in-out infinite; }
.para-record.loading { pointer-events: none; opacity: .45; }
@keyframes micPulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--red) 18%, transparent); } }
.rp-para:hover .para-btn, .reader-main:hover .para-play { opacity: .7; }
@media (max-width: 820px) { .para-btn { opacity: .55; } }
@media (max-width: 820px) {
.rp-para { padding-left: 0; }
.para-play, .para-btn { width: 42px; height: 42px; opacity: .82; }
.reader-doc.sent-lines .sent { padding-right: 4px; }
.reader-doc.sent-lines .sent-actions,
.sent-actions {
position: static;
display: inline-flex;
margin: 3px 0 0 5px;
vertical-align: middle;
box-shadow: none;
background: transparent;
opacity: .68;
pointer-events: auto;
}
.reader-doc.sent-lines .sent-actions { display: flex; width: max-content; margin: 6px 0 0 auto; }
.sent-btn { width: 32px; height: 32px; }
}
/* tradução interlinear (texto cinza abaixo do parágrafo) */
.rp-trans { display: block; margin-top: .35em; color: var(--faint); font-size: .85em; line-height: 1.6; }
/* nota pessoal sem áudio (card e modal): aviso + botão de gerar clipe */
.note-noaudio { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--panel-2); border: 1px dashed var(--border); border-radius: 10px; padding: 9px 12px; margin-top: 2px; }
.composer-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* tradução interlinear do leitor: um pouco maior (legibilidade) */
.rp-trans { font-size: .92em; }
/* label do idioma + botão de ouvir nas traduções (interlinear, caixinha, player) */
.rp-trans-lang { display: inline-block; margin-right: .3em; font-size: .92em; opacity: .9; }
.rp-trans-say { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: .92em; padding: 0 .35em 0 0; opacity: .7; }
.rp-trans-say:hover { opacity: 1; }
/* selects do menu ⚙ do leitor (idioma/voz da tradução) */
.rm-check .rm-sel { margin-left: auto; max-width: 150px; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 7px; padding: 3px 6px; font-family: inherit; font-size: calc(12px * var(--fs, 1)); }
/* estados pessoais no texto: cor na fonte (ambas personalizáveis) */
.rw.learning { color: var(--learning-color, #e8b94f); }
.rw.known { color: var(--known-color, #3ddc97); }
.ws-learning-states { display: flex; flex: 1 1 100%; gap: 4px; padding: 3px; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 10px; }
.ws-learning-states button { flex: 1 1 0; min-height: 36px; padding: 6px; color: var(--muted); background: transparent; border: 0; border-radius: 7px; font: inherit; font-size: calc(11px * var(--fs, 1)); cursor: pointer; }
.ws-learning-states button.on { color: #fff; background: var(--accent); }
/* expressões/idioms: marca automática com linha fina, sem pintar o texto */
.rw.expr {
text-decoration-line: underline;
text-decoration-style: dotted;
text-decoration-color: var(--expr-color, #26d0ce);
text-decoration-thickness: 1.5px;
text-underline-offset: .22em;
}
.rw.expr[data-expr-source="custom"] {
text-decoration-style: solid;
text-decoration-thickness: 2px;
}
.sent { border-radius: 5px; transition: background .15s; padding: 1px 0; }
.sent.reading { background: var(--marker-soft); box-shadow: 0 0 0 3px var(--marker-soft); }
:root[data-theme="light"] .sent.reading { background: var(--marker-soft); box-shadow: 0 0 0 3px var(--marker-soft); }
/* cada palavra é um botãozinho clicável (.rw) */
.rw { cursor: pointer; border-radius: 4px; transition: background .2s ease-out, color .16s ease-out, box-shadow .2s ease-out; padding-block: .16em; margin-block: -.16em; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.rw:hover { background: var(--marker-soft); }
/* marcador pessoal: linha fina embaixo da palavra, sem cobrir a leitura */
.rw.hl {
background: transparent;
box-shadow: inset 0 -0.08em 0 var(--hl);
border-radius: 3px;
padding: 0 1px;
}
.rw.hl:hover { box-shadow: inset 0 -0.12em 0 var(--hl); }
.rw.found { background: rgba(255, 213, 74, .34); box-shadow: 0 0 0 2px rgba(255, 213, 74, .26); }
.rw.on { background: var(--marker); color: #061015; padding: 0 2px; box-shadow: 0 2px 10px var(--marker-strong); }
/* quem pediu menos animação recebe o destaque imediato, sem fade */
@media (prefers-reduced-motion: reduce) { .rw, .pkw { transition: none; } }
/* Acompanhamento compartilhado entre cards, karaokê, modo foco e leitor. */
:root[data-tracker="soft"] .take-text .kw.on,
:root[data-tracker="soft"] .pkw.on,
:root[data-tracker="soft"] .rw.on,
:root[data-tracker="soft"] .zkw.on,
:root[data-tracker="soft"] .twd.on {
color: inherit;
background: var(--marker-soft);
box-shadow: inset 0 -.16em 0 color-mix(in srgb, var(--marker) 72%, transparent);
text-shadow: none;
}
:root[data-tracker="solid"] .take-text .kw.on,
:root[data-tracker="solid"] .pkw.on,
:root[data-tracker="solid"] .rw.on,
:root[data-tracker="solid"] .zkw.on,
:root[data-tracker="solid"] .twd.on {
color: #061015;
background: var(--marker);
box-shadow: 0 3px 14px var(--marker-strong);
text-shadow: none;
}
:root[data-tracker="underline"] .take-text .kw.on,
:root[data-tracker="underline"] .pkw.on,
:root[data-tracker="underline"] .rw.on,
:root[data-tracker="underline"] .zkw.on,
:root[data-tracker="underline"] .twd.on {
color: inherit;
background: transparent;
box-shadow: inset 0 -.20em 0 var(--marker);
text-shadow: none;
}
:root[data-tracker="underline"] .pl-line.on,
:root[data-tracker="underline"] .sent.reading,
:root[data-tracker="underline"] .reader-doc.sent-lines .sent.reading {
background: transparent;
border-left-color: var(--marker);
box-shadow: none;
}
.reader-side-search { width: 100%; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; font-size: calc(13px * var(--fs, 1)); margin-bottom: 8px; }
.reader-side-search:focus { outline: none; border-color: var(--accent); }
.reader-side-info { color: var(--faint); font-size: calc(11.5px * var(--fs, 1)); margin: 4px 4px 8px; }
.reader-side-empty { color: var(--muted); font-size: calc(13px * var(--fs, 1)); padding: 10px 8px; }
.reader-word-list, .reader-files-list { display: flex; flex-direction: column; gap: 3px; }
.reader-word-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 7px; width: 100%; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--muted); padding: 7px 8px; cursor: pointer; font-family: inherit; text-align: left; }
.reader-word-item:hover, .reader-word-item.active { background: var(--panel-2); border-color: var(--border); color: var(--text); }
/* a lista usava a cor de DOMINADA para o item em aprendizagem — cada estado
agora usa a sua própria cor, igual ao texto do livro. */
.reader-word-item.learning .rwi-word { color: var(--learning-color, #e8b94f); font-weight: 600; }
.reader-word-item.known .rwi-word { color: var(--known-color, #3ddc97); font-weight: 600; }
.rwi-word { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rwi-n { color: var(--faint); font-size: calc(11.5px * var(--fs, 1)); font-variant-numeric: tabular-nums; }
.rwi-play { font-size: calc(12px * var(--fs, 1)); opacity: .75; }
.reader-file-item { display: flex; justify-content: space-between; gap: 8px; color: var(--text); text-decoration: none; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 8px; padding: 8px 10px; font-size: calc(13px * var(--fs, 1)); }
.reader-file-item:hover { border-color: var(--accent); }
.reader-file-item small { color: var(--faint); flex: none; }
.reader-file-item.karaoke-ready { border-color: color-mix(in srgb, var(--accent) 48%, var(--border)); }
.reader-file-item.karaoke-ready::after { content: 'foco'; align-self: center; padding: 2px 6px; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px; font-size: calc(9px * var(--fs, 1)); }
/* ── Marcador do parágrafo anotado (barra na margem + realce ao voltar) ── */
.rp-para.has-note::before { content: ''; position: absolute; left: -10px; top: .12em; bottom: .12em; width: 3px; border-radius: 3px; background: var(--note-mark, var(--accent)); opacity: .85; }
@keyframes paraFlash { 0% { background: color-mix(in srgb, var(--note-mark, var(--accent)) 22%, transparent); } 100% { background: transparent; } }
.rp-para.para-flash { animation: paraFlash 1.6s ease; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .rp-para.para-flash { animation: none; } }
@media (max-width: 820px) { .rp-para.has-note::before { left: -6px; } }
/* ── Editor de anotação do parágrafo (#paraNoteSheet, herda .reader-settings) ── */
.pn-excerpt { margin: 8px 0 12px; padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--border-soft); border-left: 3px solid var(--note-mark, var(--accent)); border-radius: 8px; color: var(--muted); font-size: calc(13.5px * var(--fs, 1)); line-height: 1.5; max-height: 128px; overflow-y: auto; overscroll-behavior: contain; }
.pn-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.pn-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font-size: calc(12.5px * var(--fs, 1)); cursor: pointer; transition: border-color .15s, background .15s; }
.pn-btn .pn-ico { font-size: 1.05em; line-height: 1; }
.pn-btn:hover:not(:disabled) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel-2)); }
.pn-btn:disabled { opacity: .42; cursor: default; }
.pn-trans { margin: 0 0 10px; padding: 8px 12px; background: color-mix(in srgb, var(--accent) 8%, var(--panel-2)); border: 1px solid var(--border-soft); border-radius: 8px; color: var(--text); font-size: calc(13.5px * var(--fs, 1)); line-height: 1.5; }
.pn-trans-flag { margin-right: 4px; }
.pn-textarea { width: 100%; min-height: 96px; resize: vertical; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font: inherit; font-size: calc(14px * var(--fs, 1)); line-height: 1.5; }
.pn-textarea:focus { outline: none; border-color: var(--accent); }
.pn-save-state { min-height: 16px; margin-top: 4px; font-size: calc(11px * var(--fs, 1)); color: var(--faint); }
.pn-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.pn-color { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; box-shadow: 0 0 0 1px var(--border) inset; cursor: pointer; padding: 0; }
.pn-color.active { border-color: var(--text); }
.pn-color-none { display: grid; place-items: center; background: var(--panel-2); color: var(--faint); font-size: 14px; }
/* ── Barra "Anotações do livro" (linhas agrupadas por capítulo) ── */
.rf-chapter { margin: 12px 0 4px; font-size: calc(10.5px * var(--fs, 1)); text-transform: uppercase; letter-spacing: .07em; color: var(--faint); font-weight: 700; }
.rf-chapter:first-child { margin-top: 4px; }
.rf-note { display: flex; gap: 8px; align-items: flex-start; background: var(--panel-2); border: 1px solid var(--border-soft); border-left: 3px solid var(--note-mark, var(--border)); border-radius: 8px; padding: 8px 10px; }
.rf-note-main { flex: 1; min-width: 0; }
.rf-note-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 3px; }
.rf-where { font-weight: 700; font-size: calc(12px * var(--fs, 1)); color: var(--text); }
.rf-badge { padding: 1px 7px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border-soft); color: var(--muted); font-size: calc(10px * var(--fs, 1)); white-space: nowrap; }
.rf-note-text { color: var(--muted); font-size: calc(12.5px * var(--fs, 1)); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rf-note-comment { margin-top: 4px; color: var(--text); font-size: calc(12.5px * var(--fs, 1)); line-height: 1.4; overflow-wrap: anywhere; }
.rf-note-acts { display: flex; flex-direction: column; gap: 4px; flex: none; }
.rf-act { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--faint); font-size: 14px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.rf-act:hover { border-color: var(--accent); color: var(--text); }
/* alvo de toque: mesma convenção do resto do app (40-44px no dedo) */
@media (max-width: 820px), (pointer: coarse) {
.rf-act { width: 40px; height: 40px; }
.pn-color { width: 34px; height: 34px; }
}
/* Caixinha de palavra (bottom sheet, acima do player e dos modais) */
.word-sheet { position: fixed; bottom: var(--reader-player-clearance, 112px); left: 50%; transform: translateX(-50%); z-index: 160; width: min(460px, calc(100vw - 24px)); max-height: calc(100dvh - var(--reader-player-clearance, 112px) - 16px); overflow: hidden; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); padding: 14px 16px; animation: viewIn .16s ease; }
/* abas da caixinha (Tradução | Explicação | Definição | Exemplos | Gramática) */
.ws-tabs { display: flex; gap: 2px; justify-content: center; margin-top: 10px; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; }
.ws-tabs button { background: none; border: none; border-bottom: 2px solid transparent; color: var(--faint); font-size: calc(12px * var(--fs, 1)); padding: 5px 8px; cursor: pointer; font-family: inherit; }
.ws-tabs button:hover { color: var(--text); }
.ws-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.ws-body { flex: 1 1 auto; min-height: 34px; max-height: 30vh; overflow-y: auto; overscroll-behavior: contain; font-size: calc(13.5px * var(--fs, 1)); color: var(--muted); padding: 9px 2px 2px; white-space: pre-wrap; }
.ws-ask { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; margin-bottom: 8px; }
.ws-ask textarea { width: 100%; min-height: 48px; resize: vertical; border: 1px solid var(--border); border-radius: 9px; background: var(--panel-2); color: var(--text); padding: 8px 10px; font-family: inherit; font-size: calc(13px * var(--fs, 1)); line-height: 1.35; }
.ws-ask textarea:focus { outline: none; border-color: var(--accent); }
.ws-answer { color: var(--muted); white-space: pre-wrap; line-height: 1.5; }
.ws-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.deck-pick-pop { max-height: 46vh; overflow-y: auto; }
/* Popovers do leitor ACIMA das superfícies flutuantes. Herdando o z-index 60 de
.popover, a caixa "Salvar na lista" nascia atrás da caixa da palavra (160),
do painel de palavras (155) e do player (80) — o conflito relatado. Fixed
para que as coordenadas de viewport do getBoundingClientRect valham direto. */
.deck-pick-pop, .para-voice-menu, .reader-menu-pop { position: fixed; z-index: 210; }
.ws-known { background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 5px 12px; font-size: calc(12.5px * var(--fs, 1)); cursor: pointer; font-family: inherit; transition: all .15s; }
.ws-known:hover { border-color: var(--green); color: var(--text); }
.ws-known.on { background: rgba(61,220,151,.15); border-color: var(--green); color: var(--green); font-weight: 600; }
/* ── Skeletons (carregamento) ── */
.skel-card { background: var(--panel); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 15px; display: flex; flex-direction: column; gap: 10px; min-height: 120px; }
.skel-line { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--panel-2) 25%, var(--border-soft) 50%, var(--panel-2) 75%); background-size: 200% 100%; animation: shimmer 1.2s ease-in-out infinite; }
.skel-line.w30 { width: 30%; } .skel-line.w40 { width: 40%; }
.skel-line.w60 { width: 60%; } .skel-line.w80 { width: 80%; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* ── Palavras do livro (página em cards) ── */
.bw-head-left { display: flex; align-items: center; gap: 12px; }
.bw-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.bw-toolbar .gender-filter { margin-bottom: 0; flex-wrap: wrap; }
/* Cards do Vocabulário: mínimos maiores = menos aperto no desktop; no celular
min(160px,100%) ainda dá 2 colunas em 360px. */
.bw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 12px; align-items: stretch; }
.bw-card { min-width: 0; min-height: 132px; background: var(--panel); border: 1px solid var(--border-soft); border-radius: 12px; padding: 13px 15px; display: flex; flex-direction: column; gap: 9px; transition: border-color .14s, transform .14s; overflow: hidden; }
.bw-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.bw-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bw-word { font-weight: 600; font-size: calc(15.5px * var(--fs, 1)); word-break: break-word; }
.bw-card.known .bw-word { color: var(--known-color, #3ddc97); }
.bw-n { font-size: calc(11.5px * var(--fs, 1)); color: var(--faint); font-variant-numeric: tabular-nums; flex: none; }
.bw-ipa { font-size: calc(11.5px * var(--fs, 1)); color: #b9b0ff; min-height: 0; word-break: break-word; }
:root[data-theme="light"] .bw-ipa { color: #6a59d6; }
.bw-ipa:empty, .bw-trans:empty { display: none; }
.bw-trans { font-size: calc(12px * var(--fs, 1)); color: var(--muted); font-style: italic; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bw-actions { display: flex; align-items: center; gap: 6px; margin-top: auto; flex-wrap: wrap; }
.bw-actions .icon-btn, .bw-actions .play-btn-sm { width: 36px; height: 36px; }
.bw-actions .play-btn-sm { border-radius: 50%; border: none; background: var(--accent-grad); color: #fff; cursor: pointer; font-size: calc(11px * var(--fs, 1)); display: grid; place-items: center; }
.learning-list-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 14px 0; padding: 12px 13px; border: 1px solid var(--border-soft); border-radius: 11px; background: var(--panel-2); }
.learning-list-head > div:first-child { min-width: 0; display: grid; gap: 3px; }
.learning-list-head strong { font-size: calc(12px * var(--fs, 1)); }
.learning-list-head span { color: var(--faint); font-size: calc(10px * var(--fs, 1)); line-height: 1.4; }
.learning-remove { width: 36px; height: 36px; margin-left: auto; border: 1px solid var(--border); border-radius: 50%; color: var(--faint); background: transparent; cursor: pointer; font: inherit; font-size: 19px; }
.learning-remove:hover { color: var(--orange); border-color: var(--orange); }
.bw-known { margin-left: auto; background: var(--panel-2); border: 1px solid var(--border); color: var(--faint); border-radius: 999px; width: 28px; height: 28px; cursor: pointer; font-size: calc(13px * var(--fs, 1)); transition: all .14s; }
.bw-known:hover { border-color: var(--green); color: var(--text); }
.bw-known.on { background: rgba(61,220,151,.16); border-color: var(--green); color: var(--green); }
.ws-close { position: absolute; top: 7px; right: 10px; background: none; border: none; color: var(--faint); cursor: pointer; font-size: calc(13px * var(--fs, 1)); }
.ws-close:hover { color: var(--text); }
.ws-row { display: flex; align-items: center; gap: 12px; }
.ws-btn { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--panel-2); color: var(--accent); font-size: calc(18px * var(--fs, 1)); cursor: pointer; display: grid; place-items: center; transition: all .15s; }
.ws-btn:hover { border-color: var(--accent); transform: scale(1.05); }
.ws-btn:disabled { opacity: .5; cursor: default; }
/* palavra que JÁ tem card: o botão deixa de criar e passa a ouvir o existente */
.ws-btn.has-card { color: var(--known-color, #3ddc97); border-color: color-mix(in srgb, var(--known-color, #3ddc97) 55%, var(--border)); background: color-mix(in srgb, var(--known-color, #3ddc97) 12%, var(--panel-2)); }
.ws-save { color: var(--green); }
.ws-center { flex: 1; text-align: center; min-width: 0; }
.ws-term { font-size: calc(22px * var(--fs, 1)); font-weight: 700; letter-spacing: -.01em; word-break: break-word; }
.ws-ipa { font-size: calc(13px * var(--fs, 1)); color: #b9b0ff; margin-top: 2px; min-height: 16px; }
:root[data-theme="light"] .ws-ipa { color: #6a59d6; }
.ws-expr { margin-top: 5px; background: color-mix(in srgb, #26d0ce 12%, transparent); border: 1px dashed #26d0ce; color: #26d0ce; border-radius: 999px; padding: 3px 12px; font-size: calc(12.5px * var(--fs, 1)); cursor: pointer; font-family: inherit; }
.ws-expr:hover { background: color-mix(in srgb, #26d0ce 22%, transparent); }
.ws-trans { text-align: center; font-size: calc(13.5px * var(--fs, 1)); color: var(--muted); margin-top: 8px; }
.ws-trans:empty { display: none; }
.ws-colors { display: flex; flex: 1 1 100%; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.ws-color { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; padding: 0; }
.ws-color.on { border-color: var(--text); transform: scale(1.12); }
.ws-none { background: var(--panel-2); color: var(--faint); font-size: calc(13px * var(--fs, 1)); line-height: 1; display: grid; place-items: center; }
.ws-reading-note { border-color: color-mix(in srgb, var(--reading-note-color, var(--accent)) 64%, var(--border)); box-shadow: inset 4px 0 0 var(--reading-note-color, var(--accent)); }
.ws-reading-note.has-highlight { color: var(--text); }
.take.marked-note { position: relative; border-color: color-mix(in srgb, var(--note-marker) 58%, var(--border)); box-shadow: inset 5px 0 0 var(--note-marker); }
.reading-note-badge { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 2px 7px; color: color-mix(in srgb, var(--note-marker, var(--accent)) 82%, var(--text)); background: color-mix(in srgb, var(--note-marker, var(--accent)) 14%, transparent); border: 1px solid color-mix(in srgb, var(--note-marker, var(--accent)) 42%, transparent); border-radius: 999px; font-size: calc(9px * var(--fs, 1)); font-weight: 700; white-space: nowrap; }
.reading-note-badge i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--marker, var(--accent)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--marker, var(--accent)) 20%, transparent); }
/* Voltar ao trecho */
.reader-tocurrent { position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%); z-index: 79; background: var(--text); color: var(--bg); border: none; border-radius: 999px; padding: 7px 16px; font-size: calc(12.5px * var(--fs, 1)); font-weight: 600; cursor: pointer; box-shadow: var(--shadow); font-family: inherit; }
.reader-tocurrent:hover { opacity: .9; }
/* Player flutuante */
.reader-player { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 80; display: flex; align-items: center; gap: 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow); padding: 9px 18px; }
.reader-musicbar { flex-direction: column; align-items: stretch; gap: 8px; width: min(560px, calc(100vw - 28px)); border-radius: 20px; padding: 11px 18px 10px; }
.reader-player.user-hidden { display: none; }
.rp-collapse { position: absolute; top: -17px; right: 14px; display: grid; place-items: center; width: 36px; height: 28px; color: var(--muted); background: var(--panel); border: 1px solid var(--border); border-bottom: 0; border-radius: 12px 12px 0 0; cursor: pointer; }
.reader-player-restore { position: fixed; z-index: 82; right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 9px 14px; color: var(--text); background: var(--panel); border: 1px solid var(--accent); border-radius: 999px; box-shadow: var(--shadow); font: inherit; cursor: pointer; }
.reader-player-restore.hidden { display: none; }
.reader-seekrow { display: flex; align-items: center; gap: 10px; width: 100%; }
.reader-ctlrow { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; }
.reader-seek { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px; cursor: pointer; outline: none; background: linear-gradient(to right, var(--marker) var(--pct, 0%), var(--panel-2) var(--pct, 0%)); }
.reader-seek::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 2px solid var(--marker); box-shadow: 0 1px 5px rgba(0,0,0,.45); cursor: pointer; transition: transform .1s; }
.reader-seek::-webkit-slider-thumb:hover { transform: scale(1.15); }
.reader-seek::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 2px solid var(--marker); cursor: pointer; }
.reader-seek:focus-visible { outline: 2px solid var(--marker); outline-offset: 4px; }
.rp-flag { font-size: calc(20px * var(--fs, 1)); line-height: 1; }
.rp-time { font-size: calc(12.5px * var(--fs, 1)); color: var(--faint); font-variant-numeric: tabular-nums; min-width: 44px; text-align: center; }
.rp-ctl { background: transparent; border: none; color: var(--muted); cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; line-height: 1; font-family: inherit; padding: 2px 4px; }
.rp-ctl:hover { color: var(--text); }
.rp-skip-ico { font-size: calc(21px * var(--fs, 1)); }
.rp-skip-n { font-size: calc(9px * var(--fs, 1)); margin-top: -4px; font-weight: 700; }
.rp-play { width: 48px; height: 48px; border-radius: 50%; border: none; background: var(--accent); color: #fff; cursor: pointer; font-size: calc(16px * var(--fs, 1)); display: grid; place-items: center; box-shadow: 0 4px 14px rgba(124,107,255,.4); transition: transform .1s; }
.rp-play:hover { transform: scale(1.05); }
.rp-speed { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 6px 12px; font-size: calc(13px * var(--fs, 1)); cursor: pointer; font-variant-numeric: tabular-nums; min-width: 48px; }
.rp-speed:hover { border-color: var(--accent); }
/* Modal importar livro */
.book-import-modal { max-width: 620px; }
.bi-grid { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.bi-grid .field.grow { flex: 1 1 220px; }
.bi-grid select { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; font-size: calc(14px * var(--fs, 1)); cursor: pointer; }
.bi-grid select:focus { outline: none; border-color: var(--accent); }
#biDrop { margin: 12px 0 0; padding: 18px; }
#biText { margin-top: 12px; min-height: 120px; font-size: calc(14px * var(--fs, 1)); }
.bi-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.bi-status { font-size: calc(12.5px * var(--fs, 1)); color: var(--muted); flex: 1; min-width: 0; }
/* Menu de opções do leitor */
.reader-menu-pop { width: min(320px, calc(100vw - 16px)); max-height: min(78vh, 680px); overflow-y: auto; overscroll-behavior: contain; padding: 14px; }
.rm-font { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 12px; }
.rm-font button { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 5px 14px; cursor: pointer; font-family: inherit; font-size: calc(13px * var(--fs, 1)); }
.rm-font button:hover { border-color: var(--accent); }
.rm-font span { font-size: calc(12.5px * var(--fs, 1)); color: var(--muted); font-variant-numeric: tabular-nums; }
.rm-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 6px 0 12px; }
.rm-mode button { background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); border-radius: 8px; padding: 7px 8px; cursor: pointer; font-family: inherit; font-size: calc(13px * var(--fs, 1)); }
.rm-mode button.active { border-color: var(--accent); color: var(--text); background: rgba(124,107,255,.14); }
.rm-check { display: flex; align-items: center; gap: 8px; font-size: calc(13px * var(--fs, 1)); color: var(--muted); cursor: pointer; padding: 6px 2px 10px; }
.rm-act { display: block; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 9px 10px; color: var(--text); cursor: pointer; font-family: inherit; font-size: calc(13.5px * var(--fs, 1)); }
.rm-act:hover { background: var(--panel-2); }
.rm-act.danger:hover { color: var(--red); }
.shared-readonly-badge { position: absolute; top: 10px; right: 10px; max-width: calc(100% - 20px); padding: 4px 8px; color: var(--muted); background: color-mix(in srgb, var(--panel) 90%, transparent); border: 1px solid var(--border); border-radius: 999px; font-size: calc(10px * var(--fs, 1)); }
.profile-fluency-stats { display: grid; gap: 7px; margin: 12px 0; }
.profile-fluency-row { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 2px 10px; padding: 9px 10px; border: 1px solid var(--border-soft); border-radius: 9px; }
.profile-fluency-row.latest { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.profile-fluency-row strong { grid-row: 1 / 3; align-self: center; color: var(--accent); font-size: calc(18px * var(--fs, 1)); }
.profile-fluency-row span, .profile-fluency-row small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-fluency-row span { color: var(--text); font-size: calc(12px * var(--fs, 1)); }
.profile-fluency-row small { color: var(--faint); font-size: calc(10px * var(--fs, 1)); }
.teacher-stats { display: grid; gap: 8px; }
.teacher-student-row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(260px, 1.15fr) minmax(150px, auto); align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--border-soft); border-radius: 10px; }
.teacher-student-row div { min-width: 0; }
.teacher-student-row strong, .teacher-student-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.teacher-student-row small { margin-top: 3px; color: var(--faint); font-size: calc(10px * var(--fs, 1)); }
.teacher-level { text-align: right; }
.teacher-level > strong { color: var(--accent); font-size: calc(18px * var(--fs, 1)); }
.teacher-learning > span { color: var(--muted); font-size: calc(9.5px * var(--fs, 1)); }
.teacher-learning > i { display: block; height: 5px; margin-top: 6px; overflow: hidden; background: var(--border-soft); border-radius: 999px; }
.teacher-learning > i > b { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.rv-quiz-config { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; margin: 8px 0; }
.rv-quiz-config label { display: grid; gap: 4px; color: var(--faint); font-size: calc(10px * var(--fs, 1)); text-align: left; }
.rv-quiz-config input, .rv-quiz-config select { width: 100%; min-height: 42px; padding: 7px 9px; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; font: inherit; }
.rv-cefr { display: inline-grid; place-items: center; min-width: 48px; min-height: 36px; color: #fff; background: var(--accent); border-radius: 999px; font-size: calc(15px * var(--fs, 1)); }
@media (max-width: 560px) {
.reader-menu-pop { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
.reader-menu-pop .rm-check { min-height: 44px; flex-wrap: wrap; }
.reader-menu-pop .rm-sel { flex: 1 1 150px; max-width: 100%; min-height: 40px; }
.teacher-student-row { grid-template-columns: auto minmax(0, 1fr); }
.teacher-learning { grid-column: 2; }
.teacher-level { grid-column: 2; text-align: left; }
.config-card .seg button { min-width: 0; padding-inline: 5px; white-space: normal; }
}
/* Sumário sob demanda: fechado por padrão também no desktop, porque a lateral
fixa comia ~208px de largura de leitura o tempo todo. O botão do topo abre e
fecha (preferência persistida); no modo foco ele nunca aparece. */
@media (min-width: 901px) {
.reader-chapters { display: none; }
/* Aberto, o sumário FLUTUA sobre a leitura (absolute dentro de .reader-body,
que é position:relative) em vez de ocupar uma coluna: abrir e fechar não
reflui o texto e a largura de leitura nunca é sacrificada. */
body.chapters-open:not(.reading-focus) .reader-chapters {
display: block; position: absolute; z-index: 90; top: 0; left: 0; bottom: 0;
width: 236px; margin: 0; padding: 12px; overflow-y: auto;
background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
box-shadow: var(--shadow);
}
}
/* seletor de capítulos: no desktop a lista lateral já existe — o select só aparece no mobile */
.reader-chsel { display: none; max-width: 150px; }
@media (max-width: 900px) {
.reader-chapters { display: none; }
.reader-words, .reader-files { position: absolute; z-index: 70; top: 98px; left: 12px; bottom: 92px; width: min(300px, calc(100vw - 24px)); background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 12px; }
.reader-chsel:not(.hidden) { display: block; }
#books-reader { height: calc(100vh - 110px); height: calc(100dvh - 110px); }
.reader-doc, .reader-chtitle { padding-left: 14px; padding-right: 14px; }
.reader-main.paged .reader-doc { column-width: calc(100vw - 44px); column-gap: 38px; padding-left: 20px; padding-right: 20px; }
}
/* Topbar do leitor no celular (inclui paisagem de fone, ~640px): quebra em 2
linhas (título em cima; capítulos, voz e painéis embaixo, flexíveis) — antes
estourava a largura da tela em telas médias-estreitas. Casa com o ≤900 que
esconde a lista lateral de capítulos. */
@media (max-width: 900px) {
.reader-topbar {
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
align-items: center;
gap: 7px 8px;
padding-bottom: 8px;
}
.reader-back { grid-column: 1; grid-row: 1; }
.reader-title { grid-column: 2; grid-row: 1; min-width: 0; text-align: left; }
.reader-top-actions {
grid-column: 1 / -1;
grid-row: 2;
display: grid;
grid-template-columns: minmax(0, 1fr) repeat(3, 40px);
gap: 6px;
min-width: 0;
}
.reader-chsel:not(.hidden) { display: block; width: 100%; min-width: 0; max-width: none; }
.reader-top-actions .icon-btn { width: 40px; height: 40px; }
}
/* Toque (sem :hover): ações precisam ficar sempre visíveis; player mais compacto. */
@media (max-width: 820px) {
.take-row .row-actions { opacity: 1; }
.book-del, .collection .col-del { opacity: 1; }
.icon-btn { width: 38px; height: 38px; font-size: calc(15px * var(--fs, 1)); } /* alvo de toque maior no celular */
.collection .col-del { width: 30px; height: 30px; } /* excluir gaveta: mais fácil de acertar */
.reader-player { gap: 9px; padding: 8px 12px; max-width: calc(100vw - 20px); }
.reader-voice { max-width: 44vw; }
.reader-title { font-size: calc(13px * var(--fs, 1)); }
.rp-time { min-width: 38px; font-size: calc(11.5px * var(--fs, 1)); }
}
/* Responsive hardening: keeps controls inside narrow mobile widths. */
html, body { overflow-x: hidden; }
button, input, select, textarea { max-width: 100%; min-width: 0; }
button, select, input, textarea { -webkit-tap-highlight-color: rgba(124,107,255,.16); }
.view-head > div, .modal-head h3, .config-card, .take, .deck-card, .lw-card, .book-card { min-width: 0; }
.view-head h1, .qz-term, .reader-chtitle { letter-spacing: 0; }
.btn-primary, .btn-ghost, .icon-btn, .mini-btn, .link-btn, .ws-known, .rp-speed, .filters-toggle {
touch-action: manipulation;
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
@media (hover: none) {
.btn-primary:hover,
.deck-card:hover,
.bw-card:hover,
.book-card:hover,
.qz-answers button:hover,
.ws-btn:hover,
.rp-play:hover {
transform: none;
}
}
@media (max-width: 820px) {
.main {
width: 100%;
max-width: none;
overflow-x: hidden;
}
.view-head {
align-items: flex-start;
}
.view-head > div {
flex: 1 1 100%;
}
.view-head > .btn-primary,
.view-head > .btn-ghost,
.view-head > .search,
.view-head > .seg,
.view-head > .filters-toggle {
flex: 1 1 auto;
}
.view-head .btn-primary,
.view-head .btn-ghost {
justify-content: center;
white-space: normal;
}
.modal-backdrop {
padding: 12px;
}
.modal {
max-height: calc(100dvh - 24px);
padding: 16px;
border-radius: 14px;
overscroll-behavior: contain;
}
.bottom-nav {
min-height: calc(64px + env(safe-area-inset-bottom, 0px));
}
.bn-item {
padding-inline: 2px;
}
.composer {
padding: 14px;
}
.composer-foot {
flex-wrap: wrap;
}
.composer-actions {
width: 100%;
}
.composer-actions .btn-primary,
.composer-actions .btn-ghost {
flex: 1 1 150px;
justify-content: center;
}
.voice-panel,
.note-noaudio,
.binary-row {
align-items: flex-start;
flex-wrap: wrap;
}
.tr-row {
align-items: flex-start;
}
.tr-acts {
margin-left: auto;
}
.deck-title {
flex: 1 1 100%;
white-space: normal;
}
.deck-head .btn-ghost,
.deck-head .btn-primary {
flex: 1 1 130px;
justify-content: center;
}
.deck-add {
max-width: none;
flex-wrap: wrap;
}
.deck-add .title-input {
flex: 1 1 180px;
}
.deck-add .btn-primary {
flex: 1 1 130px;
}
.qz-counts button {
flex: 1 1 72px;
}
.qz-counts input {
flex: 1 1 96px;
}
.qz-answers {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.qz-answers button {
min-width: 0;
overflow-wrap: anywhere;
}
.notes-side {
max-height: min(52vh, 440px);
}
.ne-ask-row {
flex-direction: column;
}
.ne-ask-row .btn-primary {
align-self: stretch;
justify-content: center;
}
.reader-body {
margin-top: 8px;
}
.reader-doc {
font-size: calc(18px * var(--fs, 1));
line-height: 1.75;
padding-bottom: 50vh;
}
.reader-chtitle {
font-size: calc(23px * var(--fs, 1));
}
.reader-main.paged .reader-doc {
padding-bottom: 112px;
}
.word-sheet {
bottom: var(--reader-player-clearance, calc(112px + env(safe-area-inset-bottom, 0px)));
max-height: calc(100dvh - var(--reader-player-clearance, 112px) - 14px);
}
.ws-row {
gap: 8px;
}
.ws-btn {
width: 40px;
height: 40px;
}
.ws-color { width: 44px; height: 44px; flex-basis: 44px; }
.ws-foot .ws-known {
flex: 1 1 120px;
}
.reader-tocurrent {
bottom: calc(104px + env(safe-area-inset-bottom, 0px));
max-width: calc(100vw - 24px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.reader-player {
bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}
.reader-musicbar,
.pl-musicbar {
max-height: 36dvh;
overflow: hidden;
}
}
@media (max-width: 560px) {
.main {
padding: 14px 10px calc(76px + env(safe-area-inset-bottom, 0px));
}
body.nav-collapsed .main {
padding-left: 10px;
}
.modal-backdrop {
padding: 8px;
}
.modal {
max-height: calc(100dvh - 16px);
border-radius: 12px;
}
.modal-head {
align-items: flex-start;
gap: 10px;
}
.btn-primary,
.btn-ghost,
.filters-toggle {
padding-inline: 12px;
}
.composer-actions .btn-primary,
.composer-actions .btn-ghost,
.voice-panel .btn-ghost {
flex-basis: 100%;
}
.seg {
max-width: 100%;
overflow-x: auto;
scrollbar-width: none;
}
.seg::-webkit-scrollbar {
display: none;
}
.seg button {
flex: 0 0 auto;
white-space: nowrap;
}
.config-card {
padding: 15px;
}
.binary-row {
flex-direction: column;
}
.binary-row strong,
.binary-row code {
text-align: left;
}
.qz-card,
.quiz-setup,
.quiz-result {
padding: 16px;
}
.qz-tools,
.qz-done-actions {
justify-content: center;
}
.qz-bar-row {
grid-template-columns: minmax(0, 1fr) 46px;
gap: 6px;
}
.qz-bar-row > span:first-child {
grid-column: 1 / -1;
}
.book-grid,
.levels-shelf,
.lw-grid,
.qz-cols {
grid-template-columns: minmax(0, 1fr);
}
.reader-top-actions { gap: 5px; grid-template-columns: minmax(0, 1fr) repeat(3, 38px); }
.reader-top-actions .icon-btn {
width: 38px;
height: 38px;
}
.reader-words,
.reader-files {
top: 126px;
left: 10px;
bottom: 88px;
width: calc(100vw - 20px);
}
.reader-doc,
.reader-chtitle {
padding-left: 10px;
padding-right: 10px;
}
.reader-main.paged .reader-doc {
column-width: calc(100vw - 28px);
column-gap: 28px;
padding-left: 14px;
padding-right: 14px;
}
.reader-ctlrow,
.pl-ctlrow {
justify-content: space-between;
gap: 4px;
}
.rp-play {
width: 44px;
height: 44px;
}
.rp-speed {
padding-inline: 9px;
}
.ws-ask {
grid-template-columns: minmax(0, 1fr);
}
.ws-ask .btn-primary,
.ws-ask button {
width: 100%;
justify-content: center;
}
}
@media (max-width: 380px) {
.view-head h1 {
font-size: calc(19px * var(--fs, 1));
}
.bn-lbl {
font-size: calc(9.5px * var(--fs, 1));
}
.qz-answers {
grid-template-columns: minmax(0, 1fr);
}
.rp-flag {
display: none;
}
.rp-time {
min-width: 34px;
}
.reader-musicbar,
.pl-musicbar {
padding-inline: 10px;
}
}
/* Final mobile guards found during 360px browser inspection. */
.home-grid,
.home-side,
.home-block,
.home-recent {
min-width: 0;
}
@media (max-width: 560px) {
.home-block {
overflow: hidden;
}
.vocab-tabs {
display: flex;
width: 100%;
}
.vocab-tabs button {
flex: 1 1 0;
justify-content: center;
white-space: normal;
overflow-wrap: anywhere;
}
.vocab-tabs .count-badge {
flex: none;
}
.bw-toolbar { align-items: stretch; gap: 9px; }
.bw-toolbar > [role="group"] { width: 100%; display: flex; overflow-x: auto; scrollbar-width: none; }
.bw-toolbar > [role="group"] button { flex: 1 0 auto; min-height: 40px; justify-content: center; }
.learning-list-head { align-items: stretch; flex-direction: column; }
.learning-list-head .seg { width: 100%; overflow-x: auto; }
.learning-list-head .seg button { flex: 1 0 auto; justify-content: center; min-height: 40px; }
.bw-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.bw-card { min-height: 0; padding: 12px 13px; }
.bw-actions { flex-wrap: nowrap; }
.bw-actions .icon-btn, .bw-actions .play-btn-sm { width: 42px; height: 42px; }
}
/* Book vocabulary is a study workspace, not a narrow reader sidebar. */
#readerWordsPanel.reader-words {
position: fixed;
z-index: 155;
/* Tela dedicada ao vocabulário do livro: ocupa a altura toda (passa por cima
do player, z 155 > 80) porque aqui não se está lendo, e sim estudando.
Antes sobrava só ~480px de 720 e a configuração do quiz e o resultado
final ficavam cortados — daí a impressão de que nem existiam. */
top: clamp(52px, 7vh, 78px);
right: auto;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
width: min(980px, calc(100vw - 32px));
/* top/bottom aqui valem pela .view (bloco-contêiner do fixed), não pela
viewport — então a altura real é governada por min/max em dvh. */
max-height: calc(100dvh - 108px);
min-height: min(600px, calc(100dvh - 108px));
overflow: hidden;
padding: 18px;
background: color-mix(in srgb, var(--panel) 96%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
border-radius: 18px;
box-shadow: 0 24px 70px rgba(0, 0, 0, .48), 0 0 0 9999px rgba(4, 5, 17, .38);
backdrop-filter: blur(14px);
}
#readerWordsPanel.hidden { display: none; }
.reader-files-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.reader-files-head > div { min-width: 0; }
.reader-files-head .rc-head { margin: 0 0 3px; }
.reader-files-head strong { display: block; color: var(--text); font-size: calc(17px * var(--fs, 1)); }
.reader-files-head .icon-btn { flex: none; width: 44px; height: 44px; }
#readerFilesPanel.reader-files {
position: fixed;
z-index: 155;
top: clamp(88px, 14vh, 126px);
bottom: var(--reader-player-clearance, 112px);
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
width: min(560px, calc(100vw - 32px));
min-height: 220px;
max-height: calc(100dvh - var(--reader-player-clearance, 112px) - 102px);
overflow: hidden;
padding: 18px;
background: color-mix(in srgb, var(--panel) 97%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--border));
border-radius: 18px;
box-shadow: 0 24px 70px rgba(0, 0, 0, .48), 0 0 0 9999px rgba(4, 5, 17, .38);
backdrop-filter: blur(14px);
}
#readerFilesPanel.hidden { display: none; }
#readerFilesPanel .reader-files-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.reader-vocab-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; }
.reader-vocab-head > div { min-width: 0; }
.reader-vocab-head .rc-head { margin: 0 0 3px; }
.reader-vocab-head strong { display: block; overflow: hidden; color: var(--text); font-size: calc(17px * var(--fs, 1)); text-overflow: ellipsis; white-space: nowrap; }
.reader-vocab-close { flex: none; width: 44px; height: 44px; }
#readerWordsPanel .reader-side-search {
flex: none;
min-height: 50px;
margin: 14px 0 10px;
padding: 11px 15px;
font-size: max(16px, calc(14px * var(--fs, 1)));
border-radius: 12px;
}
.reader-vocab-tabs { display: flex; flex: none; gap: 5px; margin-bottom: 10px; padding: 4px; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 12px; }
.reader-vocab-tabs button { flex: 1 1 0; min-width: 0; min-height: 42px; padding: 8px 10px; color: var(--muted); background: transparent; border: 0; border-radius: 9px; font: inherit; cursor: pointer; }
.reader-vocab-tabs button:hover { color: var(--text); }
.reader-vocab-tabs button.active { color: #fff; background: var(--accent); box-shadow: 0 5px 18px rgba(109, 91, 255, .24); }
.reader-vocab-view { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
#readerWordsPanel .reader-side-info { position: sticky; z-index: 2; top: 0; margin: 0; padding: 8px 4px 10px; background: linear-gradient(var(--panel) 75%, transparent); }
/* auto-fill: com a tela mais larga cabem 3 colunas de palavras; a busca por
frase usa linhas inteiras (a frase de contexto precisa de largura). */
#readerWordsPanel .reader-word-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 7px; padding: 0 2px 8px; }
#readerWordsPanel .reader-word-list .reader-phrase-item { grid-column: 1 / -1; }
#readerWordsPanel .reader-word-item { display: flex; align-items: stretch; gap: 6px; min-width: 0; padding: 0; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 12px; cursor: default; overflow: hidden; }
#readerWordsPanel .reader-word-item:hover,
#readerWordsPanel .reader-word-item.active { color: var(--text); background: color-mix(in srgb, var(--panel-2) 86%, var(--accent)); border-color: color-mix(in srgb, var(--accent) 54%, var(--border)); }
.rwi-jump { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; min-width: 0; min-height: 54px; padding: 8px 4px 8px 12px; color: inherit; background: transparent; border: 0; font: inherit; text-align: left; cursor: pointer; }
.rwi-jump .rwi-word { width: 100%; color: var(--text); font-weight: 650; }
.rwi-jump small { width: 100%; overflow: hidden; color: var(--faint); font-size: calc(10.5px * var(--fs, 1)); text-overflow: ellipsis; white-space: nowrap; }
.rwi-play { flex: none; align-self: center; width: 46px; height: 46px; margin-right: 4px; color: var(--accent-2, var(--accent)); background: transparent; border: 1px solid var(--border-soft); border-radius: 50%; cursor: pointer; opacity: 1; }
/* Resultado de busca por FRASE: mostra a frase inteira como contexto (2 linhas)
com o trecho casado destacado, em vez do rótulo curto de uma palavra. */
.reader-phrase-item .rwi-jump .rwi-word { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: 500; line-height: 1.42; }
.reader-phrase-item .rwi-jump .rwi-word mark { background: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--text); border-radius: 4px; padding: 0 2px; font-weight: 700; }
.rv-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; padding: 2px; }
.rv-stats-grid article { display: flex; flex-direction: column; gap: 5px; min-width: 0; min-height: 104px; padding: 15px; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 14px; }
.rv-stats-grid strong { color: var(--text); font-size: calc(22px * var(--fs, 1)); font-variant-numeric: tabular-nums; }
.rv-stats-grid span { color: var(--muted); font-size: calc(11px * var(--fs, 1)); line-height: 1.35; }
.rv-assessment { display: flex; flex-direction: column; gap: 5px; margin: 12px 2px; padding: 15px; background: color-mix(in srgb, var(--accent) 12%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border)); border-radius: 14px; }
.rv-assessment > span, .rv-assessment small { color: var(--muted); line-height: 1.45; }
.rv-assessment > strong { color: var(--text); font-size: calc(16px * var(--fs, 1)); }
.empty-assessment { color: var(--muted); }
.rv-frequency { padding: 2px; }
.rv-frequency h4 { margin: 8px 2px; color: var(--text); }
.rv-frequency > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.rv-frequency button { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; min-height: 44px; padding: 9px 12px; color: var(--text); background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 10px; font: inherit; cursor: pointer; }
.rv-frequency button:hover { border-color: var(--accent); }
.rv-frequency button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-frequency button small { flex: none; color: var(--faint); }
.rv-quiz-intro, .rv-quiz-result, .rv-quiz-run { display: flex; flex-direction: column; gap: 13px; width: 100%; min-height: 100%; padding: 16px 4px 22px; color: var(--text); text-align: left; }
.rv-quiz-eyebrow, .rv-quiz-run-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--faint); font-size: calc(9.5px * var(--fs, 1)); font-weight: 750; letter-spacing: .055em; text-transform: uppercase; }
.rv-quiz-eyebrow span { display: inline-flex; padding: 3px 8px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border)); border-radius: 999px; }
.rv-quiz-eyebrow b, .rv-quiz-run-head b { overflow: hidden; color: var(--muted); font-size: inherit; text-overflow: ellipsis; white-space: nowrap; }
.rv-quiz-title { display: flex; align-items: flex-start; gap: 11px; }
.rv-quiz-title > div { min-width: 0; }
.rv-quiz-icon { display: grid; place-items: center; width: 46px; height: 46px; flex: none; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel-2)); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 13px; font-size: 22px; }
.rv-quiz-intro h3, .rv-quiz-result h3 { margin: 0; color: var(--text); font-size: calc(17px * var(--fs, 1)); line-height: 1.25; }
.rv-quiz-intro p, .rv-quiz-result p, .rv-quiz-run p { margin: 3px 0 0; color: var(--muted); font-size: calc(11.5px * var(--fs, 1)); line-height: 1.5; }
.rv-quiz-stats, .rv-result-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 12px; }
.rv-quiz-stats article, .rv-result-metrics article { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 11px 9px; border-right: 1px solid var(--border-soft); }
.rv-quiz-stats article:last-child, .rv-result-metrics article:last-child { border-right: 0; }
.rv-quiz-stats strong, .rv-result-metrics strong { overflow: hidden; color: var(--text); font-size: calc(16px * var(--fs, 1)); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.rv-quiz-stats span, .rv-result-metrics span { color: var(--faint); font-size: calc(8.5px * var(--fs, 1)); line-height: 1.3; }
.rv-quiz-config { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; margin: 0; padding: 11px; background: color-mix(in srgb, var(--panel-2) 70%, transparent); border: 1px solid var(--border-soft); border-radius: 12px; }
.rv-quiz-config label { display: grid; gap: 5px; color: var(--faint); font-size: calc(9px * var(--fs, 1)); text-align: left; }
.rv-quiz-config input, .rv-quiz-config select { width: 100%; min-height: 42px; padding: 7px 9px; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 8px; font: inherit; }
.rv-last-result { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 9px; padding: 10px 11px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: 11px; }
.rv-last-result > span { grid-row: 1 / 3; align-self: center; color: var(--accent); font-size: calc(8px * var(--fs, 1)); font-weight: 750; text-transform: uppercase; }
.rv-last-result strong { min-width: 0; overflow: hidden; font-size: calc(11px * var(--fs, 1)); text-overflow: ellipsis; white-space: nowrap; }
.rv-last-result small { color: var(--faint); font-size: calc(9px * var(--fs, 1)); }
.rv-quiz-start { width: 100%; min-height: 46px; }
.rv-quiz-intro em { color: var(--faint); font-size: calc(9px * var(--fs, 1)); line-height: 1.45; text-align: center; }
.rv-quiz-progress { position: relative; width: 100%; height: 29px; overflow: hidden; background: var(--panel-2); border-radius: 999px; }
.rv-quiz-progress i { position: absolute; inset: auto auto 0 0; height: 4px; background: var(--accent); transition: width .18s ease; }
.rv-quiz-progress span { position: relative; z-index: 1; display: block; color: var(--muted); font-size: 11px; line-height: 29px; text-align: center; }
.rv-question-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 230px; padding: 20px 12px; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 52%), var(--panel-2); border: 1px solid var(--border-soft); border-radius: 15px; text-align: center; }
.rv-question-card > small { color: var(--faint); font-size: calc(9px * var(--fs, 1)); text-transform: uppercase; letter-spacing: .04em; }
.rv-question-card > strong { max-width: 100%; color: var(--text); font-size: clamp(32px, 8vw, 48px); line-height: 1.05; overflow-wrap: anywhere; }
.rv-quiz-listen { min-height: 42px; padding: 7px 14px; color: var(--accent-2, var(--accent)); background: var(--panel); border: 1px solid var(--border); border-radius: 999px; font: inherit; cursor: pointer; }
.rv-answer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
.rv-answer-grid button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 9px; border-radius: 12px; font: inherit; cursor: pointer; }
.rv-answer-grid button span { font-size: calc(18px * var(--fs, 1)); }
.rv-answer-grid button b { font-size: calc(11px * var(--fs, 1)); }
.rv-unknown { color: var(--text); background: var(--panel-2); border: 1px solid var(--border); }
.rv-known { color: #061510; background: var(--known-color, #55d6a0); border: 1px solid transparent; font-weight: 700 !important; }
.rv-result-main { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 14px; }
.rv-result-main > div:last-child { min-width: 0; }
.rv-score-ring { --score: 0deg; position: relative; display: grid; place-items: center; width: 104px; height: 104px; overflow: hidden; background: conic-gradient(var(--accent) var(--score), var(--panel-2) 0); border-radius: 50%; }
.rv-score-ring::before { position: absolute; inset: 8px; content: ''; background: var(--panel); border-radius: inherit; }
.rv-score-ring strong, .rv-score-ring small { position: relative; z-index: 1; }
.rv-score-ring strong { align-self: end; color: var(--text); font-size: calc(21px * var(--fs, 1)); }
.rv-score-ring small { align-self: start; color: var(--faint); font-size: calc(7.5px * var(--fs, 1)); }
.rv-cefr { display: inline-flex; margin-bottom: 6px; padding: 3px 8px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border)); border-radius: 999px; font-size: calc(9px * var(--fs, 1)); }
.rv-quiz-review { display: flex; flex-direction: column; gap: 7px; padding: 11px; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 12px; }
.rv-quiz-review > span { color: var(--faint); font-size: calc(9px * var(--fs, 1)); font-weight: 750; text-transform: uppercase; }
.rv-quiz-review > div { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.rv-quiz-review button { min-height: 31px; padding: 4px 9px; color: var(--muted); background: var(--panel); border: 1px solid var(--border); border-radius: 999px; font: inherit; font-size: calc(9.5px * var(--fs, 1)); cursor: pointer; }
.rv-quiz-review small { color: var(--faint); }
.rv-quiz-perfect { padding: 11px; color: var(--green); background: color-mix(in srgb, var(--green) 8%, transparent); border: 1px solid color-mix(in srgb, var(--green) 35%, var(--border)); border-radius: 11px; font-size: calc(10px * var(--fs, 1)); text-align: center; }
.rv-result-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rv-result-actions button { min-height: 44px; padding: 8px; }
@media (max-width: 640px) {
#readerFilesPanel.reader-files {
top: 74px;
bottom: var(--reader-player-clearance, 96px);
width: calc(100vw - 16px);
max-height: calc(100dvh - var(--reader-player-clearance, 96px) - 82px);
padding: 12px;
border-radius: 16px;
}
#readerWordsPanel.reader-words {
top: 74px;
bottom: var(--reader-player-clearance, 96px);
width: calc(100vw - 16px);
max-height: calc(100dvh - var(--reader-player-clearance, 96px) - 82px);
min-height: 0;
padding: 12px;
border-radius: 16px;
}
.reader-vocab-head strong { font-size: calc(15px * var(--fs, 1)); }
#readerWordsPanel .reader-side-search { min-height: 48px; margin-top: 10px; }
.reader-vocab-tabs button { min-height: 40px; padding-inline: 5px; font-size: calc(12px * var(--fs, 1)); }
#readerWordsPanel .reader-word-list { grid-template-columns: minmax(0, 1fr); }
.rwi-jump { min-height: 52px; }
.rwi-play { width: 44px; height: 44px; }
.rv-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rv-stats-grid article { min-height: 92px; padding: 12px; }
.rv-frequency > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rv-quiz-intro, .rv-quiz-result, .rv-quiz-run { justify-content: flex-start; padding: 16px 4px 20px; }
}
@media (max-width: 360px) {
#readerWordsPanel.reader-words { top: 68px; width: calc(100vw - 10px); padding: 10px; }
.reader-vocab-head .rc-head { display: none; }
.reader-vocab-tabs { gap: 2px; }
.rv-frequency > div { grid-template-columns: minmax(0, 1fr); }
}
/* Canonical vocabulary, personal state and list cards share one visual language. */
.vocab-book-filter { display: flex; align-items: center; gap: 8px; min-width: min(100%, 300px); color: var(--faint); font-size: calc(11px * var(--fs, 1)); }
.vocab-book-filter select { flex: 1; min-width: 0; min-height: 42px; padding: 8px 34px 8px 11px; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; }
.vocab-smart-card { position: relative; cursor: pointer; outline: none; }
.vocab-smart-card:hover, .vocab-smart-card:focus-visible { border-color: var(--accent); transform: translateY(-1px); }
.vocab-smart-card.learning { border-left: 3px solid #f6c65b; }
.vocab-smart-card.known { border-left: 3px solid var(--known-color, #55d6a0); }
.vocab-card-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; min-width: 0; }
.lang-label, .access-badge, .vocab-state-badge { display: inline-flex; align-items: center; min-height: 21px; max-width: 100%; padding: 2px 7px; overflow: hidden; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: calc(9.5px * var(--fs, 1)); font-weight: 650; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.lang-label { color: var(--text); background: var(--panel-2); }
.access-badge.shared { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, var(--border)); }
.access-badge.private { color: var(--faint); }
.access-badge.inherited { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.vocab-state-badge.learning { color: #e0a934; border-color: color-mix(in srgb, #e0a934 50%, var(--border)); }
.vocab-state-badge.known { color: var(--green); border-color: color-mix(in srgb, var(--green) 50%, var(--border)); }
.vocab-preview { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: calc(12px * var(--fs, 1)); line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.vocab-detail-modal { width: min(720px, calc(100vw - 24px)); max-height: min(88dvh, 760px); overflow: auto; }
.vocab-detail-token { display: block; max-width: 100%; margin-bottom: 3px; overflow: hidden; color: var(--faint); font: 10px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.vocab-detail-status { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 13px 0; padding: 4px; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 12px; }
.vocab-detail-status button { min-height: 44px; padding: 8px; color: var(--muted); background: transparent; border: 0; border-radius: 9px; font: inherit; cursor: pointer; }
.vocab-detail-status button.active { color: #fff; background: var(--accent); }
.vocab-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vocab-detail-grid .field { min-width: 0; }
.vocab-detail-grid input, .vocab-detail-grid textarea { width: 100%; color: var(--text); background: var(--panel-2); border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; font: inherit; resize: vertical; }
.vocab-detail-grid [readonly] { color: var(--muted); cursor: default; }
.vocab-detail-wide { grid-column: 1 / -1; }
.vocab-detail-phrases { margin-top: 13px; padding: 12px; background: color-mix(in srgb, var(--panel-2) 72%, transparent); border: 1px solid var(--border-soft); border-radius: 12px; }
.vocab-phrases-head span { color: var(--faint); font-size: calc(8.5px * var(--fs, 1)); font-weight: 750; letter-spacing: .08em; }
.vocab-phrases-head h4 { margin: 3px 0 10px; }
.vocab-phrases-head h4 b { display: inline-grid; place-items: center; min-width: 22px; min-height: 22px; margin-left: 4px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 999px; font-size: calc(10px * var(--fs, 1)); }
.vocab-phrase-list { display: flex; flex-direction: column; gap: 7px; }
.vocab-phrase-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 10px; background: var(--panel); border: 1px solid var(--border-soft); border-radius: 10px; }
.vocab-phrase-copy { min-width: 0; }
.vocab-phrase-copy p { margin: 0; color: var(--text); font-size: calc(13px * var(--fs, 1)); line-height: 1.45; }
.vocab-phrase-copy mark { padding: .04em .18em; color: inherit; background: color-mix(in srgb, var(--accent) 26%, transparent); border-radius: .22em; }
.vocab-phrase-copy span { display: block; margin-top: 4px; color: var(--muted); font-size: calc(11px * var(--fs, 1)); }
.vocab-phrase-meta { display: flex; align-items: center; justify-content: flex-end; gap: 5px; flex-wrap: wrap; }
.vocab-phrase-meta small { color: var(--faint); font-size: calc(8.5px * var(--fs, 1)); }
.vocab-phrase-meta button { min-height: 34px; padding: 6px 9px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; font: 600 calc(9px * var(--fs, 1))/1 inherit; cursor: pointer; }
.vocab-phrase-meta button.danger { color: var(--red); }
.vocab-phrase-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 11px; padding-top: 11px; border-top: 1px dashed var(--border); }
.vocab-phrase-form textarea, .vocab-phrase-form input, .vocab-phrase-form select { width: 100%; color: var(--text); background: var(--panel); border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; font: inherit; }
.vocab-phrase-form > button { justify-self: start; }
.vocab-detail-books { margin-top: 13px; padding: 12px; background: var(--panel-2); border: 1px solid var(--border-soft); border-radius: 12px; }
.vocab-detail-books h4 { margin: 0 0 7px; }
.vocab-detail-books > div { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; color: var(--muted); border-top: 1px solid var(--border-soft); }
.vocab-detail-books > div span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vocab-detail-books > div strong { flex: none; color: var(--text); }
@media (max-width: 640px) {
.vocab-book-filter { width: 100%; }
.vocab-detail-modal { width: calc(100vw - 16px); max-height: calc(100dvh - 20px); padding: 14px; }
.vocab-detail-grid { grid-template-columns: minmax(0, 1fr); }
.vocab-detail-wide { grid-column: auto; }
.vocab-phrase-item, .vocab-phrase-form { grid-template-columns: minmax(0, 1fr); }
.vocab-phrase-meta { justify-content: flex-start; }
.vocab-detail-status button { padding-inline: 4px; font-size: calc(11px * var(--fs, 1)); }
.vocab-detail-modal .modal-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vocab-detail-modal .modal-actions .btn-primary { grid-column: 1 / -1; }
}
/* Montagem vertical previsivel para aparelhos antigos e estreitos. */
@media (max-width: 560px) {
.vocab-card-badges { gap: 4px; }
.bw-actions { gap: 8px; }
.bw-actions .icon-btn, .bw-actions .play-btn-sm { width: 42px; height: 42px; }
}
@media (max-width: 380px) {
.main, body.nav-collapsed .main { padding-inline: 10px; }
.take { padding-inline: 10px; }
.take-meta .voice-name { flex-basis: 100%; max-width: 100%; }
.lang-label, .access-badge, .vocab-state-badge, .vocab-kind { font-size: calc(9px * var(--fs, 1)); }
.vocab-tabs button { padding-inline: 8px; }
}
/* O leitor ocupa a viewport útil no celular; a navegação inferior já está oculta
durante a leitura, então não reservamos o espaço dela. */
@media (max-width: 820px) {
body.reading .main,
body.reading.nav-collapsed .main {
height: 100dvh;
padding: 8px 10px;
padding-top: calc(8px + env(safe-area-inset-top, 0px));
padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}
/* A cadeia de altura precisa ser CONTÍNUA. A `.view` entre o `.main` e o
leitor não tinha altura definida, então o `height:100%` abaixo resolvia
contra `auto` e o leitor crescia com o conteúdo — estourando o `.main`
(780px de área para 1722px de leitor) e jogando o player fora da tela.
Com a altura fechada aqui, a rolagem volta a acontecer DENTRO do leitor. */
body.reading .main > .view.active {
height: 100%;
min-height: 0;
}
body.reading #books-reader {
height: 100%;
min-height: 0;
}
}
@media (max-width: 360px) {
.reader-topbar { grid-template-columns: 38px minmax(0, 1fr); gap-inline: 6px; }
.reader-top-actions { grid-template-columns: minmax(0, 1fr) repeat(3, 36px); gap: 4px; }
.reader-top-actions .icon-btn { width: 36px; height: 36px; }
.reader-settings { max-height: 84dvh; padding-inline: 10px; }
}
/* ── Memória: recurso pessoal canônico, separado das listas de conteúdo ── */
.memory-kicker, .memory-library-head > div > span, .memory-summary-copy > span,
.memory-section-head > div > span {
display: block;
margin-bottom: 4px;
color: var(--accent);
font-size: calc(9.5px * var(--fs, 1));
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.memory-view-head { align-items: flex-end; }
.memory-view-head > div:first-child { max-width: 830px; }
.memory-head-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.memory-dashboard { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr); gap: 14px; margin-bottom: 24px; }
.memory-summary-card { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 18px; padding: 20px; overflow: hidden; background:
radial-gradient(circle at 82% 15%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 36%),
var(--panel); }
.memory-summary-copy h2, .memory-section-head h2, .memory-library-head h2 { margin: 0; font-size: clamp(18px, 2.4vw, 25px); }
.memory-summary-copy p { max-width: 720px; margin: 7px 0 0; color: var(--muted); font-size: calc(12px * var(--fs, 1)); line-height: 1.5; }
.memory-summary-ring { position: relative; display: grid; place-content: center; width: 104px; height: 104px; align-self: center; justify-self: end; background: conic-gradient(var(--accent) calc(var(--memory-average) * 3.6deg), var(--panel-2) 0); border-radius: 50%; text-align: center; }
.memory-summary-ring::before { position: absolute; inset: 8px; content: ''; background: var(--panel); border-radius: inherit; }
.memory-summary-ring strong, .memory-summary-ring span { position: relative; z-index: 1; }
.memory-summary-ring strong { font-size: calc(21px * var(--fs, 1)); font-variant-numeric: tabular-nums; }
.memory-summary-ring span { color: var(--faint); font-size: calc(8px * var(--fs, 1)); text-transform: uppercase; }
.memory-summary-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--border-soft); border-radius: 13px; background: color-mix(in srgb, var(--panel-2) 72%, transparent); }
.memory-summary-stats article { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 11px 12px; border-right: 1px solid var(--border-soft); }
.memory-summary-stats article:last-child { border-right: 0; }
.memory-summary-stats article.due { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.memory-summary-stats strong { font-size: calc(19px * var(--fs, 1)); font-variant-numeric: tabular-nums; }
.memory-summary-stats .due strong { color: var(--accent); }
.memory-summary-stats span { overflow: hidden; color: var(--faint); font-size: calc(8.5px * var(--fs, 1)); font-weight: 700; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.memory-agenda-card { display: flex; flex-direction: column; padding: 18px; }
.memory-section-head, .memory-library-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.memory-section-head h2 { font-size: calc(17px * var(--fs, 1)); }
.memory-agenda { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; gap: 5px; flex: 1; min-height: 150px; margin-top: 14px; }
.memory-agenda article { display: grid; grid-template-rows: auto 76px auto auto; gap: 4px; min-width: 0; color: var(--faint); text-align: center; }
.memory-agenda article > span { overflow: hidden; font-size: calc(8.5px * var(--fs, 1)); font-weight: 750; text-overflow: ellipsis; text-transform: capitalize; white-space: nowrap; }
.memory-agenda article > div { position: relative; align-self: stretch; overflow: hidden; background: var(--panel-2); border-radius: 999px; }
.memory-agenda article i { position: absolute; right: 0; bottom: 0; left: 0; height: var(--agenda-size); min-height: 5px; background: color-mix(in srgb, var(--accent) 62%, var(--panel-2)); border-radius: inherit; }
.memory-agenda article.today i { background: var(--accent); }
.memory-agenda article strong { color: var(--text); font-size: calc(12px * var(--fs, 1)); font-variant-numeric: tabular-nums; }
.memory-agenda article small { min-height: 12px; font-size: calc(7.5px * var(--fs, 1)); }
.memory-agenda-empty { align-self: center; color: var(--faint); font-size: calc(11px * var(--fs, 1)); text-align: center; }
.memory-library { padding-top: 4px; }
.memory-kind-summary { color: var(--faint); font-size: calc(10.5px * var(--fs, 1)); }
.memory-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 14px 0; }
.memory-filter-tabs { display: flex; flex-wrap: wrap; gap: 5px; }
.memory-filter-tabs button, .memory-toolbar-fields select {
min-height: 38px; padding: 7px 10px; color: var(--muted); background: var(--panel);
border: 1px solid var(--border); border-radius: 9px; font: inherit; font-size: calc(10.5px * var(--fs, 1)); cursor: pointer;
}
.memory-filter-tabs button.active { color: #fff; background: var(--accent); border-color: var(--accent); }
.memory-toolbar-fields { display: grid; grid-template-columns: minmax(160px, auto) minmax(220px, 340px); gap: 8px; }
.memory-toolbar-fields > * { min-width: 0; width: 100%; }
.memory-resource-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(390px, 100%), 1fr)); gap: 13px; }
/* Página Memória: grade de cards de memória (dados do card + célula associada). */
.memory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; align-items: stretch; }
.memory-resource-card { --memory-color: #8d90a3; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; border-top: 3px solid var(--memory-color); }
.memory-resource-card[data-memory-color="danger"] { --memory-color: #ff6b81; }
.memory-resource-card[data-memory-color="orange"] { --memory-color: #ff8a5b; }
.memory-resource-card[data-memory-color="amber"] { --memory-color: #f6c65b; }
.memory-resource-card[data-memory-color="blue"] { --memory-color: #54a0ff; }
.memory-resource-card[data-memory-color="violet"] { --memory-color: #a98cff; }
.memory-resource-card[data-memory-color="green"] { --memory-color: #3ddc97; }
.memory-resource-card > header, .memory-resource-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.memory-resource-badges, .memory-origins { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; min-width: 0; }
.memory-listen { display: grid; place-items: center; width: 42px; height: 42px; flex: none; padding-left: 2px; color: #fff; background: var(--accent-grad); border: 0; border-radius: 50%; font: inherit; cursor: pointer; }
.memory-resource-copy { min-height: 66px; }
.memory-resource-copy h3 { margin: 0; font-size: clamp(20px, 3vw, 27px); line-height: 1.18; overflow-wrap: anywhere; }
.memory-resource-copy p { display: -webkit-box; margin: 7px 0 0; overflow: hidden; color: var(--muted); font-size: calc(12px * var(--fs, 1)); line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.memory-origin, .curriculum-badge, .level-marker, .deck-role, .deck-due {
display: inline-flex; align-items: center; min-height: 21px; max-width: 100%; padding: 2px 7px;
overflow: hidden; color: var(--muted); background: var(--panel-2); border: 1px solid var(--border);
border-radius: 999px; font-size: calc(8.8px * var(--fs, 1)); font-weight: 700; line-height: 1.2;
text-overflow: ellipsis; white-space: nowrap;
}
.memory-origin.curriculum, .curriculum-badge { color: #e5b949; border-color: color-mix(in srgb, #e5b949 48%, var(--border)); }
.memory-origin.level { color: var(--origin-color, var(--accent)); border-color: color-mix(in srgb, var(--origin-color, var(--accent)) 42%, var(--border)); }
.memory-origin.book { color: #54a0ff; border-color: color-mix(in srgb, #54a0ff 42%, var(--border)); }
.memory-origin.deck { color: #55d6a0; border-color: color-mix(in srgb, #55d6a0 42%, var(--border)); }
.memory-origin.more, .memory-origin.canonical { color: var(--faint); }
.memory-resource-card .memory-cell.compact { width: 100%; }
.memory-resource-card > footer { margin-top: auto; padding-top: 2px; }
.memory-resource-card > footer > span { overflow: hidden; color: var(--faint); font-size: calc(9.5px * var(--fs, 1)); text-overflow: ellipsis; white-space: nowrap; }
/* Listas e níveis são projeções organizadoras da mesma memória pessoal. */
.deck-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.deck-title-row .deck-name { flex: 1; }
.deck-due { flex: none; color: #ff8a5b; border-color: color-mix(in srgb, #ff8a5b 46%, var(--border)); }
.deck-role { color: var(--faint); }
.deck-mastery { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 8px; }
.deck-mastery > i { height: 6px; overflow: hidden; background: var(--panel-2); border-radius: 999px; }
.deck-mastery > i > b { display: block; height: 100%; background: var(--accent-grad); border-radius: inherit; }
.deck-mastery small { overflow: hidden; color: var(--faint); font-size: calc(9px * var(--fs, 1)); text-overflow: ellipsis; white-space: nowrap; }
.level-marker { color: var(--level-color, var(--accent)); border-color: color-mix(in srgb, var(--level-color, var(--accent)) 45%, var(--border)); }
.level-card-main .level-card-signal { display: flex; align-items: baseline; gap: 6px; overflow: visible; -webkit-line-clamp: unset; }
.level-card-main .level-card-signal b { flex: none; color: var(--text); font-size: calc(10px * var(--fs, 1)); }
.level-card-main .level-card-signal small { overflow: hidden; color: var(--faint); font-size: calc(9px * var(--fs, 1)); text-overflow: ellipsis; white-space: nowrap; }
.level-card-pct { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; color: var(--level-color); font-size: calc(17px * var(--fs, 1)); }
.level-card-pct small { color: var(--faint); font-size: calc(7.5px * var(--fs, 1)); font-weight: 700; text-transform: uppercase; }
.level-progress-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.level-progress-meta small { color: var(--faint); font-size: calc(9.5px * var(--fs, 1)); }
.level-progress-signal b { color: var(--text); }
.level-study-overview { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.vocab-state-badge.due { color: #ff8a5b; border-color: color-mix(in srgb, #ff8a5b 50%, var(--border)); }
.bn-item { position: relative; }
.bn-count { position: absolute; top: 4px; left: calc(50% + 8px); display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; color: #fff; background: #ff6b81; border: 2px solid var(--sidebar-bg); border-radius: 999px; font-size: 8px; font-weight: 800; }
@media (max-width: 980px) {
.memory-dashboard { grid-template-columns: minmax(0, 1fr); }
.memory-agenda-card { min-height: 220px; }
.memory-toolbar { align-items: stretch; flex-direction: column; }
.memory-toolbar-fields { grid-template-columns: minmax(160px, .55fr) minmax(220px, 1fr); }
.level-study-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.memory-view-head { align-items: stretch; }
.memory-head-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
.memory-head-actions button { min-height: 44px; padding-inline: 8px; }
.memory-summary-card { grid-template-columns: minmax(0, 1fr) 88px; gap: 12px; padding: 14px; }
.memory-summary-ring { width: 82px; height: 82px; }
.memory-summary-ring::before { inset: 7px; }
.memory-summary-ring strong { font-size: calc(17px * var(--fs, 1)); }
.memory-summary-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.memory-summary-stats article { border-bottom: 1px solid var(--border-soft); }
.memory-summary-stats article:nth-child(3n) { border-right: 0; }
.memory-summary-stats article:nth-last-child(-n+3) { border-bottom: 0; }
.memory-agenda-card { min-height: 200px; padding: 14px; }
.memory-agenda { min-height: 128px; }
.memory-agenda article { grid-template-rows: auto 58px auto auto; }
.memory-library-head { align-items: flex-start; flex-direction: column; }
.memory-toolbar-fields { grid-template-columns: minmax(0, 1fr); }
.memory-toolbar-fields select, .memory-toolbar-fields .search { min-height: 44px; }
.memory-filter-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.memory-filter-tabs button { min-width: 0; padding-inline: 5px; }
.memory-resource-card { padding: 13px; }
.memory-resource-card .memory-cell, .memory-resource-card .memory-cell.compact { grid-template-columns: auto minmax(0, 1fr); }
.memory-resource-card .memory-primary { grid-column: 1 / -1; width: 100%; min-height: 40px; }
.deck-mastery { grid-template-columns: 54px minmax(0, 1fr); }
.deck-mastery small { white-space: normal; }
.level-card { align-items: flex-start; padding: 13px; }
.level-card-icon { width: 38px; height: 38px; }
.level-card-main .level-card-signal { align-items: flex-start; flex-direction: column; gap: 2px; }
.level-card-main .level-card-signal small { white-space: normal; }
.level-head {
position: relative;
display: grid;
grid-template-columns: 40px 42px repeat(2, minmax(0, 1fr));
align-items: center;
gap: 8px;
}
.level-head > .reader-back { grid-column: 1; grid-row: 1; width: 40px; height: 40px; }
.level-head > .level-ico { grid-column: 2; grid-row: 1; width: 42px; height: 42px; }
.level-head > .level-head-main { grid-column: 3 / 5; grid-row: 1; }
.level-head-main .deck-title { display: -webkit-box; overflow: hidden; white-space: normal; line-height: 1.2; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.level-head-sub { display: -webkit-box; margin-top: 3px; overflow: hidden; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.level-head > #lvReview { grid-column: 1 / 5; grid-row: 2; min-height: 44px; justify-content: center; }
body.role-admin .level-head > #lvReview { grid-column: 1 / 4; }
.level-head > #lvDelete { grid-column: 4; grid-row: 2; width: 100%; min-width: 42px; min-height: 44px; }
.level-head > #lvEdit { grid-column: 1 / 3; grid-row: 3; min-height: 42px; justify-content: center; }
.level-head > #lvNewSub { grid-column: 3 / 5; grid-row: 3; min-height: 42px; justify-content: center; }
.level-progress-meta { align-items: flex-start; flex-direction: column; gap: 3px; }
.level-study-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
.memory-head-actions { grid-template-columns: minmax(0, 1fr); }
.memory-summary-card { grid-template-columns: minmax(0, 1fr); }
.memory-summary-ring { justify-self: start; }
.memory-agenda article > span { font-size: 7.5px; }
.memory-filter-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.memory-resource-copy h3 { font-size: 20px; }
.bottom-nav .bn-lbl { font-size: calc(8.5px * var(--fs, 1)); }
}
/* ── Cards: biblioteca canônica de palavras e frases ─────────────────────── */
.cards-kicker,
.cards-composer-head > div > span,
.cards-library-head > div > span,
.card-detail-section-head > div > span,
.quiz-kicker {
display: block;
margin-bottom: 5px;
color: var(--accent);
font-size: calc(9.5px * var(--fs, 1));
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
.cards-view-head { align-items: flex-end; }
.cards-view-head > div:first-child { max-width: 810px; }
.cards-view-head #cardsNewToggle { flex: none; }
.cards-composer {
margin-bottom: 18px;
padding: 20px;
overflow: hidden;
background:
radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 42%),
var(--panel);
border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
}
.cards-composer-head,
.cards-library-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
}
.cards-composer-head { margin-bottom: 17px; }
.cards-composer-head h2,
.cards-library-head h2 {
margin: 0;
font-size: clamp(18px, 2.3vw, 24px);
}
.cards-composer-head > p {
max-width: 470px;
margin: 0;
color: var(--muted);
font-size: calc(11px * var(--fs, 1));
line-height: 1.55;
}
.cards-create-form { display: grid; gap: 15px; }
.cards-form-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.cards-form-grid .field { min-width: 0; }
.cards-field-wide { grid-column: span 2; }
.cards-form-grid input,
.cards-form-grid select,
.cards-form-grid textarea,
.cards-toolbar-fields select {
width: 100%;
min-width: 0;
color: var(--text);
background: var(--panel-2);
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 11px;
font: inherit;
}
.cards-form-grid textarea { resize: vertical; line-height: 1.5; }
.cards-form-grid input:focus,
.cards-form-grid select:focus,
.cards-form-grid textarea:focus,
.cards-toolbar-fields select:focus {
outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
outline-offset: 1px;
border-color: var(--accent);
}
.cards-form-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 14px;
padding-top: 13px;
border-top: 1px solid var(--border-soft);
}
.cards-form-actions .opt-check { margin-right: auto; }
.cards-summary {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 9px;
margin-bottom: 24px;
}
.cards-summary article {
display: flex;
align-items: baseline;
gap: 9px;
min-width: 0;
padding: 12px 14px;
background: color-mix(in srgb, var(--panel-2) 72%, transparent);
border: 1px solid var(--border-soft);
border-radius: 12px;
}
.cards-summary strong {
flex: none;
color: var(--text);
font-size: calc(19px * var(--fs, 1));
font-variant-numeric: tabular-nums;
}
.cards-summary span {
overflow: hidden;
color: var(--faint);
font-size: calc(9px * var(--fs, 1));
font-weight: 700;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
}
.cards-library { min-width: 0; }
.cards-library-count {
max-width: 390px;
color: var(--faint);
font-size: calc(10px * var(--fs, 1));
line-height: 1.45;
text-align: right;
}
.cards-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin: 14px 0;
}
.cards-kind-filters {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
}
.cards-kind-filters button,
.quiz-mode-nav button {
color: var(--muted);
background: var(--panel);
border: 1px solid var(--border-strong);
font: inherit;
cursor: pointer;
}
.cards-kind-filters button {
min-height: 36px;
padding: 7px 13px;
border-radius: 999px;
font-size: calc(10.5px * var(--fs, 1));
}
.cards-kind-filters button:hover,
.cards-kind-filters button.active {
color: var(--text);
border-color: var(--accent);
}
.cards-kind-filters button.active {
color: #fff;
background: var(--accent);
}
.cards-toolbar-fields {
display: grid;
grid-template-columns: minmax(240px, 360px) minmax(165px, auto);
gap: 8px;
}
.cards-toolbar-fields > * { width: 100%; min-width: 0; }
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
gap: 13px;
}
.cards-grid > .card,
.cards-grid > .take,
.cards-grid > .study-card,
.cards-grid > .card-tile {
min-width: 0;
height: 100%;
}
.cards-grid > [data-card-id] {
cursor: pointer;
transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.cards-grid > [data-card-id]:hover {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
box-shadow: 0 12px 30px color-mix(in srgb, #000 14%, transparent);
}
.study-card {
--study-card-color: #54a0ff;
position: relative;
display: grid;
align-content: start;
gap: 13px;
min-width: 0;
padding: 16px;
overflow: hidden;
cursor: pointer;
border-color: color-mix(in srgb, var(--study-card-color) 25%, var(--border));
transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.study-card.word { --study-card-color: #a98cff; }
.study-card:hover,
.study-card:focus-visible {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--study-card-color) 64%, var(--border));
box-shadow: 0 14px 34px color-mix(in srgb, #000 16%, transparent);
outline: 0;
}
.study-card > header,
.study-card > footer,
.study-card-assets {
display: flex;
align-items: center;
justify-content: space-between;
gap: 9px;
}
.study-card-badges {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
min-width: 0;
}
.study-card-listen {
display: grid;
place-items: center;
flex: none;
width: 38px;
height: 38px;
padding: 0;
color: var(--study-card-color);
background: color-mix(in srgb, var(--study-card-color) 10%, var(--panel-2));
border: 1px solid color-mix(in srgb, var(--study-card-color) 38%, var(--border));
border-radius: 50%;
cursor: pointer;
}
.study-card-copy { min-width: 0; min-height: 82px; }
.study-card-copy h2 {
margin: 0 0 7px;
color: var(--text);
font-family: var(--reading-font, inherit);
font-size: clamp(22px, 3vw, 31px);
line-height: 1.2;
overflow-wrap: anywhere;
}
.study-card-copy p {
margin: 0;
color: var(--muted);
line-height: 1.5;
}
.study-card-assets {
justify-content: flex-start;
flex-wrap: wrap;
color: var(--faint);
font-size: calc(9px * var(--fs, 1));
}
.study-card-assets span + span::before { content: "·"; margin-right: 9px; }
.study-card .memory-cell.compact { margin-top: 0; }
.study-card > footer {
padding-top: 2px;
color: var(--faint);
font-size: calc(9px * var(--fs, 1));
}
/* ── Detalhe completo de card ─────────────────────────────────────────────── */
#view-card { --card-detail-color: var(--accent); }
.card-detail-topbar {
position: sticky;
top: 0;
z-index: 7;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
margin: -4px -4px 18px;
padding: 10px 4px 13px;
background: color-mix(in srgb, var(--bg) 91%, transparent);
border-bottom: 1px solid var(--border-soft);
backdrop-filter: blur(14px);
}
.card-detail-back { width: 42px; height: 42px; }
.card-detail-heading { min-width: 0; }
.card-detail-heading > .semantic-kind { margin-bottom: 5px; }
.card-detail-heading h1 {
margin: 0 0 7px;
overflow: hidden;
font-family: var(--reading-font, inherit);
font-size: clamp(25px, 4vw, 38px);
line-height: 1.1;
text-overflow: ellipsis;
white-space: nowrap;
}
.card-detail-listen { min-height: 43px; flex: none; }
.card-detail-layout {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(300px, .68fr);
gap: 18px;
align-items: start;
}
.card-detail-main,
.card-detail-aside {
display: grid;
min-width: 0;
gap: 14px;
}
.card-detail-aside {
position: sticky;
top: 94px;
}
.card-detail-content {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px;
padding: 20px;
}
.card-detail-side {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 210px;
min-width: 0;
padding: 24px;
overflow: hidden;
background:
radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--card-detail-color) 10%, transparent), transparent 58%),
var(--panel-2);
border: 1px solid color-mix(in srgb, var(--card-detail-color) 24%, var(--border));
border-radius: 15px;
}
.card-detail-side.translation {
--card-detail-color: #54a0ff;
background: color-mix(in srgb, #54a0ff 5%, var(--panel-2));
}
.card-detail-side > span {
position: absolute;
top: 13px;
left: 15px;
color: var(--faint);
font-size: calc(8.5px * var(--fs, 1));
font-weight: 800;
letter-spacing: .08em;
}
.card-detail-front,
.card-detail-translation {
max-width: 100%;
color: var(--text);
font-family: var(--reading-font, inherit);
font-size: clamp(25px, 4.5vw, 43px);
font-weight: 700;
line-height: 1.24;
overflow-wrap: anywhere;
text-align: center;
text-wrap: balance;
}
.card-detail-front[contenteditable="true"],
.card-detail-translation[contenteditable="true"] {
min-width: 100%;
padding: 8px;
border-radius: 9px;
cursor: text;
}
.card-detail-front[contenteditable="true"]:focus,
.card-detail-translation[contenteditable="true"]:focus {
outline: 2px solid color-mix(in srgb, var(--card-detail-color) 45%, transparent);
background: color-mix(in srgb, var(--card-detail-color) 6%, transparent);
}
.card-detail-translation {
font-size: clamp(21px, 3.4vw, 32px);
font-weight: 600;
}
.card-detail-annotation { grid-column: 1 / -1; }
.card-detail-annotation textarea {
width: 100%;
min-width: 0;
color: var(--text);
background: var(--panel-2);
border: 1px solid var(--border);
border-radius: 11px;
padding: 12px 13px;
font: inherit;
line-height: 1.55;
resize: vertical;
}
.card-detail-annotation textarea:focus {
outline: 2px solid color-mix(in srgb, var(--accent) 42%, transparent);
outline-offset: 1px;
border-color: var(--accent);
}
.card-detail-actions {
grid-column: 1 / -1;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
padding-top: 2px;
}
.card-detail-related,
.card-detail-audio-panel,
.card-detail-memory-panel,
.card-detail-data-panel { padding: 17px; }
.card-detail-audio {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
gap: 8px;
}
.card-detail-audio > button {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 9px;
min-width: 0;
padding: 10px 11px;
color: var(--text);
background: var(--panel-2);
border: 1px solid var(--border-soft);
border-radius: 10px;
font: inherit;
text-align: left;
cursor: pointer;
}
.card-detail-audio > button:hover { border-color: var(--accent); }
.card-detail-audio > button strong {
overflow: hidden;
font-size: calc(10px * var(--fs, 1));
text-overflow: ellipsis;
white-space: nowrap;
}
.card-detail-audio > button small { color: var(--faint); }
.card-detail-section-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 14px;
}
.card-detail-section-head.compact { margin-bottom: 11px; }
.card-detail-section-head h2 { margin: 0; font-size: calc(17px * var(--fs, 1)); }
.card-detail-section-head > p {
max-width: 440px;
margin: 0;
color: var(--faint);
font-size: calc(10.5px * var(--fs, 1));
line-height: 1.5;
text-align: right;
}
.card-detail-related-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
gap: 9px;
}
.card-detail-related-grid > article,
.card-detail-related-grid > button {
min-width: 0;
padding: 12px;
color: var(--text);
background: var(--panel-2);
border: 1px solid var(--border-soft);
border-radius: 11px;
font: inherit;
text-align: left;
}
.card-detail-related-grid > button { cursor: pointer; }
.card-detail-related-grid > button:hover { border-color: var(--accent); }
.card-detail-memory-panel {
overflow: hidden;
background:
radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 48%),
var(--panel);
}
.card-detail-memory-panel .memory-cell { width: 100%; }
.card-detail-dates,
.card-detail-metrics,
.card-detail-history {
display: grid;
gap: 7px;
}
.card-detail-dates > *,
.card-detail-metrics > *,
.card-detail-history > * {
min-width: 0;
padding: 9px 10px;
background: var(--panel-2);
border: 1px solid var(--border-soft);
border-radius: 9px;
}
.card-detail-dates > *,
.card-detail-metrics > * {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 9px;
}
.card-detail-dates span,
.card-detail-metrics span,
.card-detail-history small {
color: var(--faint);
font-size: calc(9px * var(--fs, 1));
}
.card-detail-dates strong,
.card-detail-metrics strong {
overflow: hidden;
color: var(--text);
font-size: calc(11px * var(--fs, 1));
text-align: right;
text-overflow: ellipsis;
}
.card-detail-history {
max-height: 290px;
overflow: auto;
scrollbar-width: thin;
}
/* ── Memória: tabela analítica, sem duplicar os cards ─────────────────────── */
.memory-table-shell {
position: relative;
max-width: 100%;
overflow: auto;
background: var(--panel);
border: 1px solid var(--border-soft);
border-radius: 14px;
box-shadow: var(--shadow);
scrollbar-width: thin;
}
.memory-table {
width: 100%;
min-width: 1160px;
border-collapse: separate;
border-spacing: 0;
color: var(--text);
font-size: calc(10.5px * var(--fs, 1));
}
.memory-table th,
.memory-table td {
min-width: 0;
padding: 11px 12px;
border-bottom: 1px solid var(--border-soft);
text-align: left;
vertical-align: middle;
}
.memory-table th {
position: sticky;
top: 0;
z-index: 2;
color: var(--faint);
background: color-mix(in srgb, var(--panel-2) 94%, var(--panel));
font-size: calc(8.5px * var(--fs, 1));
font-weight: 800;
letter-spacing: .055em;
text-transform: uppercase;
white-space: nowrap;
}
.memory-table th:first-child { width: 24%; min-width: 220px; }
.memory-table th:nth-child(2) { min-width: 90px; }
.memory-table th:nth-child(3) { min-width: 150px; }
.memory-table th:nth-child(4) { min-width: 115px; }
.memory-table th:nth-child(n+5) { min-width: 105px; }
.memory-table tbody tr:last-child td { border-bottom: 0; }
.memory-table tbody tr {
transition: background .13s ease;
}
.memory-table tbody tr[data-memory-color="danger"] { --memory-color: #ff6b81; }
.memory-table tbody tr[data-memory-color="orange"] { --memory-color: #ff8a5b; }
.memory-table tbody tr[data-memory-color="amber"] { --memory-color: #f6c65b; }
.memory-table tbody tr[data-memory-color="blue"] { --memory-color: #54a0ff; }
.memory-table tbody tr[data-memory-color="violet"] { --memory-color: #a98cff; }
.memory-table tbody tr[data-memory-color="green"] { --memory-color: #3ddc97; }
.memory-table tbody tr:hover {
background: color-mix(in srgb, var(--accent) 5%, var(--panel));
}
.memory-table tbody tr:focus-within {
outline: 2px solid color-mix(in srgb, var(--accent) 42%, transparent);
outline-offset: -2px;
}
.memory-table td:first-child {
color: var(--text);
font-weight: 700;
}
.memory-table td:not(:first-child) { color: var(--muted); }
.memory-table-card {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 9px;
color: inherit;
background: transparent;
border: 0;
font: inherit;
text-align: left;
cursor: pointer;
}
.memory-table-card > span:first-child {
display: grid;
place-items: center;
width: 32px;
height: 32px;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 10%, var(--panel-2));
border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
border-radius: 9px;
}
.memory-table-card > span:last-child { min-width: 0; }
.memory-table-card strong,
.memory-table-card small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.memory-table-card small {
margin-top: 2px;
color: var(--faint);
font-size: calc(8.5px * var(--fs, 1));
font-weight: 500;
}
.memory-table-strength {
display: grid;
grid-template-columns: minmax(72px, 1fr) auto;
align-items: center;
gap: 7px;
}
.memory-table-strength progress {
width: 100%;
height: 7px;
overflow: hidden;
appearance: none;
background: var(--panel-2);
border: 0;
border-radius: 999px;
}
.memory-table-strength progress::-webkit-progress-bar {
background: var(--panel-2);
border-radius: 999px;
}
.memory-table-strength progress::-webkit-progress-value {
background: var(--memory-color, var(--accent));
border-radius: 999px;
}
.memory-table-strength progress::-moz-progress-bar {
background: var(--memory-color, var(--accent));
border-radius: 999px;
}
.memory-table-strength strong {
min-width: 34px;
color: var(--memory-color, var(--accent));
font-variant-numeric: tabular-nums;
text-align: right;
}
.memory-consistency {
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 24px;
padding: 3px 7px;
color: var(--green);
background: color-mix(in srgb, var(--green) 8%, var(--panel-2));
border: 1px solid color-mix(in srgb, var(--green) 30%, var(--border));
border-radius: 999px;
font-size: calc(9px * var(--fs, 1));
font-weight: 750;
}
.memory-consistency.low {
color: #ff8a5b;
background: color-mix(in srgb, #ff8a5b 8%, var(--panel-2));
border-color: color-mix(in srgb, #ff8a5b 34%, var(--border));
}
/* ── Quiz: dois sistemas, uma página ──────────────────────────────────────── */
.quiz-mode-nav {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
max-width: 820px;
margin: -5px 0 17px;
padding: 5px;
background: var(--panel-2);
border: 1px solid var(--border-soft);
border-radius: 15px;
}
.quiz-mode-nav button {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 10px;
min-width: 0;
min-height: 62px;
padding: 9px 12px;
border-color: transparent;
border-radius: 11px;
text-align: left;
}
.quiz-mode-nav button:hover {
color: var(--text);
border-color: var(--border-strong);
}
.quiz-mode-nav button.active,
.quiz-mode-nav button[aria-selected="true"] {
color: var(--text);
background: var(--panel);
border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
box-shadow: 0 5px 18px color-mix(in srgb, #000 10%, transparent);
}
.quiz-mode-icon {
display: grid;
place-items: center;
width: 38px;
height: 38px;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 10%, var(--panel-2));
border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
border-radius: 10px;
font-size: calc(18px * var(--fs, 1));
}
.quiz-mode-nav strong,
.quiz-mode-nav small { display: block; }
.quiz-mode-nav strong {
overflow: hidden;
font-size: calc(12px * var(--fs, 1));
text-overflow: ellipsis;
white-space: nowrap;
}
.quiz-mode-nav small {
margin-top: 3px;
overflow: hidden;
color: var(--faint);
font-size: calc(9px * var(--fs, 1));
text-overflow: ellipsis;
white-space: nowrap;
}
.quiz-area { min-width: 0; }
.cards-kind-filters button:focus-visible,
.quiz-mode-nav button:focus-visible,
.memory-table-card:focus-visible,
.card-detail-related-grid > button:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
@media (max-width: 1040px) {
.cards-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-detail-layout { grid-template-columns: minmax(0, 1fr); }
.card-detail-aside {
position: static;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.card-detail-memory-panel { grid-column: 1 / -1; }
}
@media (max-width: 780px) {
.cards-view-head { align-items: stretch; }
.cards-view-head #cardsNewToggle { width: 100%; min-height: 44px; justify-content: center; }
.cards-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards-library-head,
.cards-toolbar { align-items: stretch; flex-direction: column; }
.cards-library-count { max-width: none; text-align: left; }
.cards-toolbar-fields { grid-template-columns: minmax(0, 1fr) minmax(150px, .45fr); }
.memory-table { min-width: 1040px; }
.memory-table th:first-child,
.memory-table td:first-child {
position: sticky;
left: 0;
}
.memory-table th:first-child {
z-index: 4;
background: var(--panel-2);
}
.memory-table td:first-child {
z-index: 1;
background: var(--panel);
}
.memory-table tbody tr:hover td:first-child {
background: color-mix(in srgb, var(--accent) 5%, var(--panel));
}
}
@media (max-width: 620px) {
.cards-composer { padding: 14px; }
.cards-composer-head { flex-direction: column; gap: 7px; }
.cards-form-grid { grid-template-columns: minmax(0, 1fr); }
.cards-field-wide { grid-column: auto; }
.cards-form-actions { align-items: stretch; flex-direction: column; }
.cards-form-actions .opt-check { width: 100%; margin: 0; }
.cards-form-actions .btn-primary { width: 100%; min-height: 45px; justify-content: center; }
.cards-toolbar-fields { grid-template-columns: minmax(0, 1fr); }
.cards-toolbar-fields > * { min-height: 44px; }
.cards-kind-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-kind-filters button { min-width: 0; padding-inline: 6px; }
.card-detail-topbar {
grid-template-columns: auto minmax(0, 1fr);
gap: 10px;
}
.card-detail-listen { grid-column: 1 / -1; width: 100%; justify-content: center; }
.card-detail-heading h1 { font-size: clamp(23px, 8vw, 31px); }
.card-detail-content { grid-template-columns: minmax(0, 1fr); padding: 13px; }
.card-detail-side { min-height: 170px; padding: 22px 14px 16px; }
.card-detail-annotation,
.card-detail-actions { grid-column: auto; }
.card-detail-actions > button { flex: 1 1 150px; min-height: 42px; justify-content: center; }
.card-detail-section-head { flex-direction: column; gap: 5px; }
.card-detail-section-head > p { max-width: none; text-align: left; }
.card-detail-aside { grid-template-columns: minmax(0, 1fr); }
.card-detail-memory-panel { grid-column: auto; }
.quiz-mode-nav { grid-template-columns: minmax(0, 1fr); }
.quiz-mode-nav button { min-height: 58px; }
}
@media (max-width: 380px) {
.cards-summary { grid-template-columns: minmax(0, 1fr); }
.cards-summary article { justify-content: space-between; }
.card-detail-front { font-size: 26px; }
.card-detail-translation { font-size: 22px; }
}