/* Visual baseado no app Beat: paleta vermelha (Tailwind red/gray), cards com
   borda suave, botões "elevados" e modo escuro em cinza. */

:root {
  --winbar: #dc2626; /* barra de título das janelas (Layout → Barra de título das janelas) */
  --bg-from: #fef2f2;          /* red-50 */
  --bg-to: #fee2e2;            /* red-100 */
  --card: #ffffff;
  --card-border: #fecaca;      /* red-200 */
  --text: #0a0a0a;
  --ink: #000000;              /* preto puro: rótulos que o usuário pediu em preto */
  --muted: #6b7280;            /* gray-500 */
  --title: #991b1b;            /* red-800 */
  --heading: #b91c1c;          /* red-700 */
  --accent: #dc2626;           /* red-600 */
  --accent-soft: #fef2f2;      /* red-50 */
  --outline-border: #f87171;   /* red-400 */
  --outline-from: #fef2f2;
  --outline-to: #fee2e2;
  --outline-hover-from: color-mix(in srgb, var(--outline-border) 14%, var(--outline-from)); /* passar o mouse: segue o tema */
  --outline-hover-to: color-mix(in srgb, var(--outline-border) 26%, var(--outline-from));
  --solid-from: #dc2626;       /* red-600: texto branco com contraste AA (4,8:1) */
  --solid-to: #b91c1c;         /* red-700 */
  --solid-border: #b91c1c;
  --strong-from: #dc2626; --strong-to: #ca2222; --strong-border: #b01c1c; --strong-shadow: #8a1a1a; /* botões grandes fortes (Revisar tudo, Jogar) */
  --solid-shadow: color-mix(in srgb, var(--solid-border) 60%, #000); /* sombra 3D dos botões fortes (o tema ajusta quando o botão é escuro) */
  --input-bg: #ffffff;
  --input-border: #e5e5e5;
  --chip-bg: #ffffff;
  --well: #fef2f2;             /* red-50 */
  --good: #16a34a;             /* green-600 */
  --good-soft: #dcfce7;
  --bad: #dc2626;
  --bad-soft: #fee2e2;
  --warn: #d97706;
  --warn-soft: #fef3c7;
  --info: #2563eb;             /* blue-600 */
  --info-soft: #dbeafe;
  --shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  --radius: 12px;
  --tabbar-h: 64px;
  color-scheme: light;
}

html.dark {
  --bg-from: #111827;          /* gray-900 */
  --bg-to: #1f2937;            /* gray-800 */
  --card: #0a0a0a;
  --card-border: #374151;      /* gray-700 */
  --text: #fafafa;
  --ink: #fafafa;
  --muted: #9ca3af;            /* gray-400 */
  --title: #fca5a5;            /* red-300 */
  --heading: #fca5a5;
  --accent: #f87171;
  --accent-soft: #1f2937;
  --outline-border: #f87171;
  --outline-from: #374151;     /* gray-700 */
  --outline-to: #1f2937;
  --outline-hover-from: #4b5563;
  --outline-hover-to: #374151;
  --input-bg: #111827;
  --input-border: #374151;
  --chip-bg: #1f2937;
  --well: #1f2937;
  --good-soft: #14532d;
  --bad-soft: #7f1d1d;
  --warn-soft: #78350f;
  --info-soft: #1e3a8a;
  --shadow: 0 10px 15px -3px rgb(0 0 0 / .4), 0 4px 6px -4px rgb(0 0 0 / .4);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; min-height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--text);
  background: linear-gradient(135deg, var(--bg-from), var(--bg-to)) fixed;
  background-color: var(--bg-from);
  min-height: 100dvh;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  overscroll-behavior-y: none;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
h2 { font-size: calc(18px * var(--fs-titles, 1)); margin: 0 0 12px; color: var(--heading); font-weight: 600; letter-spacing: -.01em; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: calc(13px * var(--fs-support, 1)); }
.center { text-align: center; }
.center-block { display: block; margin: 12px auto 0; }
.mt { margin-top: 8px; }
.warn { color: var(--warn); margin: 6px 0 0; }

/* ---------- topo ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  background: color-mix(in srgb, var(--bg-from) 85%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.topbar h1 { margin: 0; font-size: 28px; font-weight: 700; color: var(--title); flex: 1; letter-spacing: -.02em; }
.topbar { gap: 8px; }
.topbar h1 { font-size: 26px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Chave de idioma EN ⟷ PT (como no Beat: azul = EN, verde = PT) */

/* Painel de configurações (engrenagem) */
.settings-panel {
  position: absolute; top: calc(100% - 4px); right: 16px; z-index: 30;
  width: 320px; max-width: calc(100vw - 32px); overflow: hidden;
  border-radius: 8px; border: 2px solid #d1d5db; background: #e5e7eb;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
  animation: fade .15s ease-out;
}
html.dark .settings-panel { border-color: #4b5563; background: #374151; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.settings-row + .settings-row { border-top: 2px solid #d1d5db; }
html.dark .settings-row + .settings-row { border-color: #4b5563; }
.settings-row label { font-size: calc(14px * var(--fs-settings, 1)); font-weight: 600; color: #1f2937; cursor: pointer; }
html.dark .settings-row label { color: #e5e7eb; }
#settings-toggle[aria-expanded="true"] svg { transform: rotate(60deg); }
#settings-toggle svg { transition: transform .25s; }

main { max-width: 640px; margin: 0 auto; padding: 4px 16px 24px; }
.view { display: none; }
.view.active { display: block; animation: fade .18s ease-out; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- cards / painéis ---------- */
.panel {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  margin-bottom: 16px;
}

/* ---------- botões ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 44px; padding: 10px 16px; margin-top: 10px;
  border-radius: 8px; border: 2px solid var(--outline-border);
  font-size: calc(15px * var(--fs-buttons, 1)); font-weight: 700;
  background: linear-gradient(to bottom, var(--outline-from), var(--outline-to));
  box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.btn:active { transform: translateY(2px); box-shadow: var(--shadow-sm); }
@media (hover: hover) { .btn:hover { background: linear-gradient(to bottom, var(--outline-hover-from), var(--outline-hover-to)); } }
.btn.primary {
  color: #fff; border-color: var(--solid-border);
  background: linear-gradient(to bottom, var(--solid-from), var(--solid-to));
}
@media (hover: hover) { .btn.primary:hover { background: linear-gradient(to bottom, var(--solid-to), color-mix(in srgb, var(--solid-to) 85%, #000)); } }
.btn.secondary { color: var(--heading); }
.btn.danger { color: #fff; border-color: #b91c1c; background: linear-gradient(to bottom, #ef4444, #b91c1c); }
.btn.big { min-height: 54px; font-size: calc(17px * var(--fs-buttons, 1)); }
.btn.small { width: auto; min-height: 38px; margin: 0; padding: 6px 12px; font-size: calc(14px * var(--fs-buttons, 1)); box-shadow: var(--shadow-sm); }

.icon-btn {
  position: relative; display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0; padding: 0; /* sem margem interna do navegador: ícone sempre no centro */
  border: 0; background: transparent; color: var(--heading);
}
.icon-btn.outline, .search-row .icon-btn {
  border: 2px solid var(--outline-border);
  background: linear-gradient(to bottom, var(--outline-from), var(--outline-to));
  box-shadow: var(--shadow-sm);
}
.icon-btn:active { transform: translateY(1px); }
.link-btn { border: 0; background: none; color: var(--accent); font-size: 15px; padding: 8px 4px; font-weight: 500; }
.link-btn.strong { font-weight: 700; }

.badge {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; font-style: normal;
  display: grid; place-items: center; line-height: 1;
}

/* ---------- formulários ---------- */
.field { margin-bottom: 14px; }
.field > label, .filter-group > label { display: block; font-size: calc(13px * var(--fs-support, 1)); font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.field.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.field.row > label { margin: 0; color: var(--text); font-size: calc(15px * var(--fs-support, 1)); font-weight: 500; }
.field.row input[type=number] { width: 80px; text-align: center; }
.field.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field.two label { display: block; font-size: calc(13px * var(--fs-support, 1)); font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.input-row { display: flex; gap: 8px; align-items: center; }
.input-row input { flex: 1; min-width: 0; }

input:not([type=checkbox]):not([type=file]), select, textarea {
  width: 100%; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--input-border); background: var(--input-bg);
  font-size: 16px; /* 16px evita zoom automático no iOS */
  outline: none; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--outline-border); box-shadow: 0 0 0 3px color-mix(in srgb, var(--outline-border) 25%, transparent); }
textarea { resize: vertical; }

.switch { appearance: none; width: 44px; height: 24px; border-radius: 12px; background: #d1d5db; position: relative; cursor: pointer; transition: background .2s; flex-shrink: 0; margin: 0; }
html.dark .switch { background: #4b5563; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform .2s; }
.switch:checked, html.dark .switch:checked { background: var(--info); }
.switch:checked::after { transform: translateX(20px); }

.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button {
  flex: 1; min-height: 40px; padding: 6px 10px; border-radius: 8px; font-size: calc(14px * var(--fs-buttons, 1)); font-weight: 600;
  border: 2px solid var(--input-border); background: var(--input-bg); white-space: nowrap;
}
.seg button.on { border-color: var(--outline-border); background: linear-gradient(to bottom, var(--outline-from), var(--outline-to)); color: var(--heading); }

/* ---------- chips ---------- */
.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips.wrap { flex-wrap: wrap; overflow: visible; }
.chip {
  border: 1.5px solid var(--input-border); background: var(--chip-bg);
  border-radius: 999px; padding: 6px 12px; font-size: calc(13px * var(--fs-buttons, 1)); font-weight: 600; white-space: nowrap;
}
.chip.on { border-color: var(--outline-border); background: var(--accent); color: #fff; }
.chip .n { opacity: .6; font-weight: 500; margin-left: 4px; font-family: ui-monospace, Menlo, Consolas, monospace; }

/* ---------- lista de palavras ---------- */
.search-row { display: flex; gap: 8px; margin: 4px 0 10px; }
.filters { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 14px; margin-bottom: 10px; box-shadow: var(--shadow-sm); }
.filter-group { margin-bottom: 12px; }
.word-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.word-item {
  background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow-sm); cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: start;
  transition: transform .1s;
}
.word-item:active { transform: scale(.99); }
.word-item .w { font-size: calc(17px * var(--fs-words, 1)); font-weight: 700; }
.word-item .pos { font-size: calc(12px * var(--fs-words, 1)); color: var(--muted); font-style: italic; margin-left: 6px; font-weight: 400; }
.word-item .m { grid-column: 1 / -1; color: var(--muted); font-size: calc(14px * var(--fs-words, 1)); }
.status { font-size: calc(11px * var(--fs-words, 1)); font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.status.new { background: var(--info-soft); color: var(--info); }
.status.learning { background: var(--warn-soft); color: var(--warn); }
.status.mastered { background: var(--good-soft); color: var(--good); }
html.dark .status { color: #fff; }

.fab {
  position: fixed; right: 20px; bottom: calc(var(--tabbar-h) + 20px + env(safe-area-inset-bottom));
  width: 60px; height: 60px; border-radius: 50%;
  border: 2px solid var(--solid-border); color: #fff; font-size: 34px; line-height: 1; font-weight: 300;
  background: linear-gradient(to bottom, var(--solid-from), var(--solid-to));
  box-shadow: 0 10px 25px -5px color-mix(in srgb, var(--solid-border) 50%, transparent);
  display: grid; place-items: center; padding-bottom: 4px; z-index: 5;
  transition: transform .15s;
}
.fab:active { transform: scale(.93); }

.empty { text-align: center; padding: 40px 16px; }
.empty-emoji { font-size: calc(56px * var(--fs-support, 1)); margin: 0 0 8px; }

/* ---------- estatísticas ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 8px; }
.stat { text-align: center; padding: 10px 4px; background: var(--well); border-radius: 8px; }
.stat b { display: block; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: calc(24px * var(--fs-stats, 1)); color: var(--heading); }
.stat span { font-size: calc(12px * var(--fs-stats, 1)); color: var(--muted); line-height: 1.2; display: block; }

/* ---------- flashcard ---------- */
.progress { height: 6px; background: var(--card); border: 1px solid var(--card-border); border-radius: 3px; overflow: hidden; }
.progress > div { height: 100%; background: linear-gradient(to right, var(--solid-from), var(--solid-to)); width: 0; transition: width .3s; }
.flip-wrap { perspective: 1200px; margin: 12px 0 8px; }
.flashcard { position: relative; min-height: 306px; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.3,.7,.3,1); cursor: pointer; }
.flashcard.flipped { transform: rotateY(180deg); }
.face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--card); border: 1px solid var(--card-border); border-radius: 16px; box-shadow: var(--shadow);
  padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow-y: auto;
}
.face.back { transform: rotateY(180deg); justify-content: flex-start; }
.face .big-word { font-size: calc(32px * var(--fs-study, 1)); font-weight: 700; margin: 0; word-break: break-word; }
.face .phon { color: var(--muted); margin: 6px 0 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: calc(14px * var(--fs-study, 1)); }
.face .posl { color: var(--heading); font-style: italic; font-size: calc(14px * var(--fs-study, 1)); margin-top: 8px; }
.face .meaning { font-size: calc(22px * var(--fs-study, 1)); font-weight: 700; color: var(--heading); margin: 4px 0 14px; }
.face .def { font-size: calc(15px * var(--fs-study, 1)); margin: 0 0 10px; }
.face .ex { font-size: calc(15px * var(--fs-study, 1)); font-style: italic; color: var(--muted); margin: 0 0 10px; border-left: 3px solid var(--card-border); padding-left: 10px; text-align: left; align-self: stretch; }
.face .ex mark { background: none; color: var(--heading); font-weight: 700; }
.face .note { font-size: calc(13px * var(--fs-study, 1)); background: var(--well); border-radius: 8px; padding: 8px 10px; align-self: stretch; text-align: left; }
.face .speak { margin-top: 14px; }
.face hr { border: 0; border-top: 1px solid var(--card-border); width: 100%; margin: 12px 0; }

.rate-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.rate-buttons.two { grid-template-columns: 1fr 1fr; }
.rate { border-radius: 10px; padding: 10px 4px; border: 2px solid; display: flex; flex-direction: column; align-items: center; gap: 2px; box-shadow: var(--shadow-sm); background: var(--card); }
.rate:active { transform: translateY(2px); }
.rate b { font-size: calc(14px * var(--fs-buttons, 1)); }
.rate.again { border-color: #f87171; color: #dc2626; }
.rate.good { border-color: #4ade80; color: #16a34a; }

/* ---------- jogo ---------- */
.play-game { display: flex; flex-direction: column; min-height: calc(100dvh - var(--tabbar-h) - 90px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
.play-hud { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 10px; align-items: center; font-weight: 700; font-size: calc(15px * var(--fs-play, 1)); min-height: 36px; }
#hud-score { text-align: center; }
#hud-right { text-align: right; }
.hud-score { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: calc(26px * var(--fs-play, 1)); color: var(--heading); }
.hud-score.bump { animation: bump .3s; }
@keyframes bump { 50% { transform: scale(1.35); } }
.play-card { background: var(--card); border: 1px solid var(--card-border); border-radius: 16px; box-shadow: var(--shadow); padding: 22px 16px; text-align: center; margin-top: 8px; }
.play-word { font-size: calc(28px * var(--fs-play, 1)); font-weight: 700; word-break: break-word; }
.play-hint { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 3px; color: var(--muted); margin-top: 8px; min-height: 1.2em; font-size: calc(16px * var(--fs-play, 1)); }
.play-answer {
  margin-top: 12px; min-height: 52px; padding: 12px 14px; border-radius: 10px;
  background: var(--input-bg); border: 2px solid var(--input-border);
  font-size: calc(22px * var(--fs-play, 1)); font-weight: 600; text-align: center; word-break: break-word;
  transition: border-color .15s, background .15s;
}
.play-answer.ok { border-color: var(--good); background: var(--good-soft); }
.play-answer.almost { border-color: var(--warn); background: var(--warn-soft); }
.play-answer.bad { border-color: var(--bad); background: var(--bad-soft); animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.caret { display: inline-block; width: 2px; height: 1.05em; background: var(--accent); vertical-align: -3px; margin-left: 1px; animation: blink 1s steps(1) infinite; }
.play-answer.ok .caret, .play-answer.bad .caret, .play-answer.almost .caret { display: none; }
@keyframes blink { 50% { opacity: 0; } }
.play-feedback { min-height: 44px; padding: 8px 4px; text-align: center; font-size: calc(14px * var(--fs-play, 1)); }
.play-feedback b { color: var(--heading); }
.play-feedback .fb-ex { color: var(--muted); font-style: italic; display: block; margin-top: 2px; }

.keyboard { margin-top: auto; display: grid; gap: 6px; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.kb-row { display: flex; gap: 4px; justify-content: center; }
.key {
  flex: 1; max-width: 44px; height: 46px; border-radius: 6px; padding: 0;
  border: 1px solid var(--input-border); background: var(--card);
  font-size: calc(18px * var(--fs-play, 1)); font-weight: 500; box-shadow: 0 2px 0 var(--input-border);
  display: grid; place-items: center;
}
.key:active, .key.pressed { transform: translateY(2px); box-shadow: none; background: var(--well); }
.key.accent { height: 38px; font-size: calc(16px * var(--fs-play, 1)); background: var(--well); color: var(--heading); }
.key.wide { max-width: none; flex: 1.6; font-size: calc(14px * var(--fs-play, 1)); font-weight: 700; }
.key.space { max-width: none; flex: 4; font-size: calc(13px * var(--fs-play, 1)); color: var(--muted); }
.key.enter { max-width: none; flex: 2; color: #fff; border-color: var(--solid-border); background: linear-gradient(to bottom, var(--solid-from), var(--solid-to)); box-shadow: 0 2px 0 var(--solid-shadow); font-size: calc(15px * var(--fs-play, 1)); font-weight: 700; }
.key.hint { color: var(--warn); }

.mistakes { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.mistakes li { background: var(--well); border-radius: 8px; padding: 10px 12px; font-size: calc(14px * var(--fs-play, 1)); }
.mistakes li b { display: block; }
.mistakes li s { color: var(--bad); }

/* ---------- barra de abas ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr);
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--tabbar-bg, var(--card)); border-top: 1px solid var(--card-border);
}
.tabbar button { position: relative; border: 1px solid transparent; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: calc(11px * var(--fs-tabbar, 1)); font-weight: 800; margin: 6px 5px; border-radius: 12px; }
.tabbar button svg { width: 24px; height: 24px; }
.tabbar button.on { color: var(--accent); }
/* Modo claro: abas não selecionadas em preto (no escuro continuam cinza) */
html:not(.dark) .tabbar button:not(.on) { color: var(--ink); }
/* Aba selecionada: destaque discreto, como um botão leve */
.tabbar button.on { background: linear-gradient(to bottom, var(--outline-from), var(--outline-to)); border-color: var(--card-border); box-shadow: var(--shadow-sm); }
.tabbar .badge { top: 0; right: calc(50% - 22px); }

/* ---------- folha (dialog) ---------- */
dialog.sheet {
  width: 100%; max-width: 640px; height: 100dvh; max-height: 100dvh; margin: 0 auto; padding: 0; border: 0;
  background: var(--bg-from); color: var(--text);
}
@media (min-width: 700px) { dialog.sheet { height: 90dvh; margin-top: 5dvh; border-radius: 16px; box-shadow: var(--shadow); } }
dialog.sheet[open] { animation: up .22s ease-out; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
dialog::backdrop { background: rgb(0 0 0 / .45); }
.sheet form { display: flex; flex-direction: column; height: 100%; }
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px; border-bottom: 1px solid var(--card-border); background: var(--card);
}
.sheet-head h2 { margin: 0; font-size: calc(17px * var(--fs-titles, 1)); }
.sheet-body { flex: 1; overflow-y: auto; padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); }

.suggestions { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 10px; margin-bottom: 14px; }
.suggestions p { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.sugg {
  display: block; width: 100%; text-align: left; border: 1px solid var(--input-border); background: var(--input-bg);
  border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; font-size: 14px;
}
.sugg.on { border-color: var(--outline-border); background: var(--accent-soft); }
.sugg i { color: var(--heading); font-size: 12px; margin-right: 6px; }
.sugg small { display: block; color: var(--muted); font-style: italic; margin-top: 3px; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom)); z-index: 100;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: #1f2937; color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow); transition: all .25s; max-width: calc(100vw - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.face .ex .ex-tr { display: block; font-style: normal; font-size: calc(13px * var(--fs-study, 1)); margin-top: 4px; }
.sheet-head .head-spacer { display: block; width: 70px; }
.sheet-head .link-btn { width: 70px; text-align: left; }
.form-btn { max-width: 320px; margin: 12px auto 0; }
.rate { min-height: 48px; justify-content: center; }
.rate b { font-size: calc(15px * var(--fs-buttons, 1)); }
.rate.again.on { background: #dc2626; border-color: #dc2626; color: #fff; }
.rate.good.on { background: #16a34a; border-color: #16a34a; color: #fff; }

/* ---------- imagens ---------- */
.img-preview { position: relative; display: flex; align-items: flex-end; gap: 10px; margin-bottom: 8px; }
.img-preview img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--card-border); background: var(--well); }
.img-remove {
  position: absolute; top: -6px; left: 106px; width: 24px; height: 24px; border-radius: 50%;
  border: 0; background: var(--bad); color: #fff; font-size: 12px; line-height: 24px; padding: 0; box-shadow: var(--shadow-sm);
}
.img-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.img-grid button { padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: var(--well); aspect-ratio: 4 / 3; }
.img-grid button.on { border-color: var(--outline-border); }
.img-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
#f-image-status { margin: 6px 0 0; }
.face .card-img { width: 100%; max-height: 130px; object-fit: cover; border-radius: 10px; margin-bottom: 12px; flex-shrink: 0; }
.word-item.has-img { grid-template-columns: 48px 1fr auto; }
.word-item .thumb { grid-row: 1 / span 2; width: 48px; height: 48px; object-fit: cover; border-radius: 8px; align-self: center; }
.word-item.has-img .m { grid-column: 2 / -1; }
.img-grid .no-img { display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--muted); border: 2px dashed var(--input-border); background: var(--card); }
.img-grid .no-img.on { border-color: var(--outline-border); color: var(--heading); }

/* ---------- banner da BBC ---------- */
.bbc-banner {
  background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 8px 0 10px; margin: 12px 0 12px; overflow: hidden;
}
.bbc-head { display: flex; align-items: center; gap: 8px; padding: 0 12px 2px; }
/* Selo da fonte: BBC (caixa vermelha) ou NPR (três quadrados: n vermelho, p preto, r azul) */
.news-badge { flex-shrink: 0; white-space: nowrap; line-height: 1.2; }
.news-badge.bbc { height: 19px; box-sizing: border-box; display: inline-flex; align-items: center; background: #bb1919; color: #fff; font-weight: 800; font-size: 11px; letter-spacing: .08em; padding: 3px 6px; border-radius: 3px; }
.news-badge.npr { display: inline-flex; gap: 1px; }
.news-badge.npr b { width: 19px; height: 19px; display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 800; line-height: 1; padding-bottom: 2px; box-sizing: border-box; }
.news-badge.npr b:nth-child(1) { background: #d62021; }
.news-badge.npr b:nth-child(2) { background: #000; }
.news-badge.npr b:nth-child(3) { background: #237bbd; }
html.dark .news-badge.npr b:nth-child(2) { outline: 1px solid #4b5563; }
/* Escolha da fonte em Ajustes */
.news-source { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 4px; }
.settings-row .news-source button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; min-height: 58px; }
.news-source small { font-size: 11px; font-weight: 600; color: var(--muted); }
.bbc-title { flex: 1; font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Uma palavra por vez */
.bbc-stage { overflow: hidden; padding: 0 12px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.bbc-card {
  display: block; width: 100%; min-height: 62px; padding: 0 0 4px; border: 0; background: none;
  text-align: left; cursor: pointer; transition: transform .15s;
}
.bbc-w { display: block; font-size: 20px; font-weight: 800; color: var(--heading); letter-spacing: -.01em; }
.bbc-s {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 13px; line-height: 1.35; color: var(--muted); margin-top: 2px;
}
.bbc-s mark { background: none; color: var(--heading); font-weight: 700; }
.bbc-card.in-next { animation: bbc-in-next .45s cubic-bezier(.2,.8,.2,1); }
.bbc-card.in-prev { animation: bbc-in-prev .45s cubic-bezier(.2,.8,.2,1); }
@keyframes bbc-in-next { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
@keyframes bbc-in-prev { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } }

/* Barra de tempo (só no automático) */
/* Linha de baixo: barra de tempo + botão "Ler notícia" */
.bbc-foot { display: flex; align-items: center; gap: 10px; margin: 8px 12px 0; }
.bbc-progress { flex: 1; height: 5px; border-radius: 2px; background: var(--well); overflow: hidden; }
.bbc-open {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  font-size: 12px; font-weight: 700; color: var(--heading); text-decoration: none;
  padding: 4px 10px; border-radius: 999px; border: 1.5px solid var(--outline-border);
  background: linear-gradient(to bottom, var(--outline-from), var(--outline-to));
}
.bbc-open svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bbc-open:active { transform: translateY(1px); }
.bbc-open:focus { outline: none; }
.bbc-open, .bbc-open * { -webkit-user-drag: none; }
.bbc-banner:not(.auto) .bbc-progress { display: none; }
#bbc-bar { height: 100%; width: 0; background: linear-gradient(to right, var(--solid-from), var(--solid-to)); }
#bbc-bar.run { animation: bbc-bar linear forwards; }
@keyframes bbc-bar { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .bbc-card.in-next, .bbc-card.in-prev { animation: none; } }
.settings-row input:disabled { opacity: .4; }
/* Sem contorno de foco nem arraste de texto/imagem ao tocar ou arrastar o banner */
.bbc-card, .bbc-card:focus, .bbc-card:focus-visible, .bbc-stage:focus { outline: none; }
.bbc-card * { -webkit-user-drag: none; pointer-events: none; }
mark { background: none; color: inherit; }
.settings-row.column { flex-direction: column; align-items: stretch; gap: 8px; }
.settings-row .seg button { min-height: 34px; font-size: calc(13px * var(--fs-settings, 1)); padding: 4px 6px; }
.seg button:disabled { opacity: .4; }
.cefr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 0 4px; }
.cefr-group { display: flex; flex-direction: column; gap: 4px; }
.cefr-group > span { font-size: calc(11px * var(--fs-settings, 1)); font-weight: 700; color: #6b7280; text-align: center; }
html.dark .cefr-group > span { color: #9ca3af; }
.cefr .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 4px 0; }
.cefr .seg button { padding: 4px 0; font-weight: 700; }
.credits { margin-top: 4px; line-height: 1.4; }
.credits a { color: inherit; }
/* Itens do mesmo grupo (banner) sem linha divisória entre eles */
.settings-row.grouped, html.dark .settings-row.grouped { border-top: none; padding-top: 0; }

/* Marcações opcionais: "Difícil" (vermelho) e "Dominada" (verde), liga/desliga */
.mark-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 0; }
.mark-toggle {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 8px 12px; border-radius: 10px; border: 2px solid; background: var(--card);
  font-size: calc(14px * var(--fs-buttons, 1)); box-shadow: var(--shadow-sm);
}
.mark-toggle.hard { border-color: #f87171; color: #dc2626; }
.mark-toggle.mastered { border-color: #4ade80; color: #16a34a; }
.mark-toggle .box { width: 18px; height: 18px; border-radius: 5px; border: 2px solid currentColor; display: grid; place-items: center; }
.mark-toggle.on { color: #fff; }
.mark-toggle.hard.on { background: #dc2626; border-color: #dc2626; }
.mark-toggle.mastered.on { background: #16a34a; border-color: #16a34a; }
.mark-toggle.on .box::after { content: "✓"; font-size: calc(12px * var(--fs-buttons, 1)); font-weight: 800; line-height: 1; }
.mark-toggle:active { transform: translateY(1px); }
html.dark .mark-toggle.hard:not(.on) { color: #f87171; }
html.dark .mark-toggle.mastered:not(.on) { color: #4ade80; }
/* Encerrar: vermelho, afastado dos botões de resposta para evitar toque sem querer */

/* ---------- abas das configurações ---------- */
.settings-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-bottom: 2px solid #d1d5db; }
html.dark .settings-tabs { border-color: #4b5563; }
.settings-tabs button { border: 0; background: none; padding: 10px 2px; font-size: calc(13px * var(--fs-settings, 1)); font-weight: 700; color: #6b7280; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.settings-tabs button.on { color: var(--heading); border-bottom-color: var(--accent); }
.settings-panel { max-height: calc(100dvh - 100px - var(--tabbar-h) - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* Trava a rolagem da página com o painel aberto. Só no html: overflow no body cria uma
   segunda área de rolagem e o topo fixo (sticky) some quando a página está rolada */
html.no-scroll { overflow: hidden; overscroll-behavior: none; }
/* Reserva sempre o espaço da barra de rolagem (computador): ao travar a rolagem a barra some,
   mas nada na tela muda de largura nem se desloca para o lado */
html { scrollbar-gutter: stable; }
body.no-scroll { touch-action: none; }
body.no-scroll .settings-panel { touch-action: pan-y; }
.backup-tab { padding: 12px 16px 16px; }
.backup-tab .btn { margin-top: 8px; box-shadow: var(--shadow-sm); }
.settings-hint { margin: 0 0 6px; font-size: calc(12px * var(--fs-settings, 1)); color: #6b7280; }
.settings-hint.strong { color: #1f2937; font-weight: 600; }
html.dark .settings-hint { color: #9ca3af; }
html.dark .settings-hint.strong { color: #e5e7eb; }

/* ---------- gráficos ---------- */
:root { --viz-1: #2a78d6; --viz-2: #eb6834; --viz-grid: #e1e0d9; --viz-axis: #c3c2b7; }
html.dark { --viz-1: #3987e5; --viz-2: #d95926; --viz-grid: #2c2c2a; --viz-axis: #383835; }
.viz-1 { background: var(--viz-1); }
.viz-2 { background: var(--viz-2); }
.chart-sub { margin: -8px 0 10px; font-size: calc(12px * var(--fs-charts, 1)); color: var(--muted); }
.chart-empty { margin: 4px 0; font-size: calc(14px * var(--fs-charts, 1)); color: var(--muted); }
.chart-filters { display: grid; gap: 8px; margin: 4px 0 12px; }
.chart-filters .seg button { min-height: 36px; }
.stat-grid.four { grid-template-columns: repeat(4, 1fr); margin-bottom: 16px; }
.stat-grid.four .stat b { font-size: calc(20px * var(--fs-stats, 1)); }

.legend { display: flex; gap: 14px; font-size: calc(12px * var(--fs-charts, 1)); color: var(--muted); margin-bottom: 8px; }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend .sw { width: 10px; height: 10px; border-radius: 2px; }

/* Colunas: área de 140px, linhas de grade finas, colunas de até 24px com topo arredondado */
.cols { position: relative; height: 140px; display: grid; grid-template-columns: repeat(var(--n), 1fr); align-items: end; padding-left: 26px; }
.cols .grid { position: absolute; inset: 0 0 0 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.cols .grid div { border-top: 1px solid var(--viz-grid); height: 0; position: relative; }
.cols .grid div:last-child { border-top-color: var(--viz-axis); }
.cols .grid span { position: absolute; left: 0; top: -7px; font-size: calc(10px * var(--fs-charts, 1)); color: var(--muted); font-variant-numeric: tabular-nums; }
.col { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; border: 0; background: none; padding: 0; cursor: pointer; }
.col .bar { position: relative; width: min(24px, 70%); display: flex; }
.col .stack { flex: 1; display: flex; flex-direction: column-reverse; gap: 2px; border-radius: 4px 4px 0 0; overflow: hidden; }
.col .seg { display: block; min-height: 2px; }
.col em { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 3px; font-style: normal; font-size: calc(11px * var(--fs-charts, 1)); font-weight: 700; color: var(--text); line-height: 1; }
.col:hover .stack, .col:focus-visible .stack { filter: brightness(1.12); }
.col:focus-visible { outline: 2px solid var(--viz-1); outline-offset: 2px; }
.xlabels { display: grid; grid-template-columns: repeat(var(--n), 1fr); padding-left: 26px; margin-top: 4px; }
.xlabels span { font-size: calc(10px * var(--fs-charts, 1)); color: var(--muted); text-align: center; white-space: nowrap; }

/* Barras horizontais: rótulo | trilho | valor */
.hbars { display: grid; gap: 10px; }
.hbar { display: grid; grid-template-columns: minmax(80px, 34%) 1fr auto; align-items: center; gap: 10px; outline: none; }
.hb-label { font-size: calc(13px * var(--fs-charts, 1)); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-track { height: 14px; background: var(--well); border-radius: 0 4px 4px 0; }
.hb-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; min-width: 2px; }
.hb-value { font-size: calc(13px * var(--fs-charts, 1)); font-weight: 700; text-align: right; min-width: 44px; font-variant-numeric: tabular-nums; }
.hb-value small { display: block; font-size: calc(10px * var(--fs-charts, 1)); font-weight: 500; color: var(--muted); }
.hbar:hover .hb-fill, .hbar:focus-visible .hb-fill { filter: brightness(1.12); }

.data-table { margin-top: 12px; font-size: 13px; }
.data-table summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.data-table table { width: 100%; border-collapse: collapse; margin-top: 8px; font-variant-numeric: tabular-nums; }
.data-table th, .data-table td { padding: 4px 6px; text-align: right; border-bottom: 1px solid var(--viz-grid); }
.data-table th:first-child, .data-table td:first-child { text-align: left; }

.chart-tip {
  position: fixed; z-index: 200; pointer-events: none; opacity: 0; transition: opacity .12s;
  background: var(--card); color: var(--text); border: 1px solid var(--card-border); border-radius: 8px;
  padding: 8px 10px; font-size: calc(12px * var(--fs-charts, 1)); line-height: 1.5; box-shadow: var(--shadow); max-width: 220px;
}
.chart-tip.show { opacity: 1; }
.chart-tip b { font-size: calc(14px * var(--fs-charts, 1)); }
.chart-tip .k { display: inline-block; width: 10px; height: 2px; vertical-align: middle; margin-right: 6px; }
.rate:disabled { opacity: .35; box-shadow: none; cursor: not-allowed; transform: none; }
/* Revisar | Aprender novas lado a lado */
.study-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.study-actions .btn { font-size: calc(14px * var(--fs-buttons, 1)); padding: 8px 4px; line-height: 1.2; }
.btn:disabled { opacity: .55; cursor: default; box-shadow: none; }
/* Filtros da aba Palavras: barra de rolagem fina quando a linha não cabe */
#filters .chips { scrollbar-width: thin; scrollbar-color: var(--card-border) transparent; padding-bottom: 6px; cursor: grab; }
#filters .chips::-webkit-scrollbar { display: block; height: 4px; }
#filters .chips::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 2px; }
#filters .chip { flex-shrink: 0; }
/* Versão e créditos no fim da aba Backup */
.backup-tab .about { margin: 14px 0 0; font-size: calc(11px * var(--fs-settings, 1)); line-height: 1.4; color: #6b7280; text-align: center; }
html.dark .backup-tab .about { color: #9ca3af; }
.backup-tab .about + .about { margin-top: 4px; }
.play-word.rev { font-size: calc(22px * var(--fs-play, 1)); line-height: 1.3; }

/* ---------- nome e nível no topo ---------- */
.topbar { flex-wrap: wrap; }
.user-bar {
  order: -1; flex-basis: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: -4px 0 -2px; padding: 0; border: 0; background: none; font-size: 14px; font-weight: 700; color: var(--text); cursor: default;
}
#settings-panel #set-name { width: 100%; max-width: 150px; min-width: 0; padding: 6px 10px; font-size: calc(16px * var(--fs-settings, 1)); font-weight: 700; text-align: center; }
.tour-again { margin: 0; width: 100%; min-height: 40px; font-size: 14px; }

/* ---------- boas-vindas ---------- */
.welcome {
  position: fixed; inset: 0; z-index: 900; overflow-y: auto; display: grid; place-items: center;
  padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(135deg, var(--bg-from), var(--bg-to));
}
.welcome-card {
  position: relative; width: 100%; max-width: 420px; background: var(--card); border: 1px solid var(--card-border);
  border-radius: 16px; box-shadow: var(--shadow); padding: 28px 20px 22px; text-align: center;
}
.welcome-logo { width: 72px; height: 72px; border-radius: 18px; box-shadow: var(--shadow-sm); }
.welcome h1 { margin: 12px 0 4px; font-size: 24px; color: var(--title); }
.welcome-sub { margin: 0 0 20px; color: var(--muted); }
.welcome label { display: block; text-align: left; font-size: 14px; font-weight: 700; margin: 14px 0 6px; }
.welcome #welcome-name { font-size: 17px; text-align: center; }
.welcome .cefr .seg button { min-height: 42px; font-size: 15px; }
.welcome-hint { margin: 10px 0 18px; font-size: 12px; color: var(--muted); }
.welcome-lang { position: absolute; top: 12px; right: 12px; display: flex; gap: 4px; }
.welcome-lang button { border: 1.5px solid var(--input-border); background: var(--card); border-radius: 6px; padding: 3px 8px; font-size: 12px; font-weight: 700; color: var(--muted); }
.welcome-lang button.on { border-color: var(--outline-border); color: var(--heading); }

/* ---------- tour ---------- */
.tour { position: fixed; inset: 0; z-index: 950; }
.tour-spot {
  position: fixed; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgb(0 0 0 / .65), 0 0 0 3px var(--outline-border);
  transition: all .25s ease;
}
.tour-spot.off { left: 50% !important; top: 50% !important; width: 0 !important; height: 0 !important; box-shadow: 0 0 0 9999px rgb(0 0 0 / .65); }
.tour-pop {
  position: fixed; width: min(320px, calc(100vw - 24px)); background: var(--card); color: var(--text);
  border: 1px solid var(--card-border); border-radius: 14px; box-shadow: var(--shadow); padding: 16px;
  transition: top .25s ease, left .25s ease;
}
.tour-count { margin: 0 0 4px; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.tour-pop h3 { margin: 0 0 6px; font-size: 18px; color: var(--heading); }
.tour-pop p { margin: 0; font-size: 14px; line-height: 1.45; }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
.tour-nav { display: flex; gap: 8px; margin-left: auto; }
.tour-nav .btn { width: auto; min-height: 38px; margin: 0; padding: 6px 14px; font-size: 14px; box-shadow: var(--shadow-sm); }

/* ---------- cores dos níveis CEFR (botões e selo do topo) ---------- */
[data-v="A1"], [data-level="A1"] { --lv: #B8E0C2; --lv-ink: #14532d; }
[data-v="A2"], [data-level="A2"] { --lv: #7CCB8A; --lv-ink: #14532d; }
[data-v="B1"], [data-level="B1"] { --lv: #F4D35E; --lv-ink: #713f12; }
[data-v="B2"], [data-level="B2"] { --lv: #F29E4C; --lv-ink: #431407; }
[data-v="C1"], [data-level="C1"] { --lv: #E85D5D; --lv-ink: #ffffff; }
[data-v="C2"], [data-level="C2"] { --lv: #7048A8; --lv-ink: #ffffff; }
.cefr .seg button, .cefr .seg button.on {
  background: var(--lv); color: var(--lv-ink); border-color: var(--lv);
  transition: transform .12s, box-shadow .12s;
}
.cefr .seg button.on { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--text); transform: scale(1.03); }

/* ---------- topo em uma linha: título | nome + nível | engrenagem ---------- */
/* nome centralizado no espaço entre a marca (esquerda) e os botões (direita) */
.topbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; flex-wrap: nowrap; }
.topbar .user-bar { justify-self: center; min-width: 0; max-width: 100%; }
.topbar h1 { justify-self: start; }
/* Marca no topo: ícone do app (mesmo tamanho do botão de configurações) + nome */
.topbar h1.brand { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.brand-icon { width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; box-shadow: var(--shadow-sm); }
/* "Flip" em cima, "Wise" embaixo */
.brand-name { display: flex; flex-direction: column; line-height: 1.1; }
.topbar .user-bar { order: 0; flex-basis: auto; margin: 0; font-size: 19px; }
.topbar .user-bar #user-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-actions { justify-self: end; grid-column: 3; display: flex; align-items: center; gap: 8px; }

/* Linha do nome nas configurações: nome + lápis | idioma + tema */

.chart-filters .field { margin: 0; }
/* Nível ao lado da engrenagem: quadrado do mesmo tamanho, na cor do nível */
.level-box {
  width: 40px; height: 40px; border-radius: 8px; border: 2px solid var(--lv, var(--outline-border));
  background: var(--lv, var(--card)); color: var(--lv-ink, var(--heading));
  font-size: 14px; font-weight: 800; display: grid; place-items: center; padding: 0; box-shadow: var(--shadow-sm);
}

/* Sem seleção de texto onde se toca para usar o app (evita o "tocar para pesquisar" do Google no celular) */
.topbar, .tabbar, button, .chip, .seg, .flashcard, .play-card, .play-answer, .stat, .rate-buttons, .mark-toggles,
.bbc-banner, .keyboard, .word-item, .tour, .welcome h1, .settings-tabs, .settings-row label {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
input, textarea, select { -webkit-user-select: text; user-select: text; }
.bbc-banner { cursor: pointer; touch-action: pan-y; }

/* Aviso de busca no cadastro: à direita, na linha do rótulo do campo palavra (sem quadro, negrito, caixa alta) */
.label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.label-row label { margin: 0 !important; display: block; font-size: calc(13px * var(--fs-support, 1)); font-weight: 600; color: var(--muted); }
.f-loading { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.f-loading.hidden { display: none; }
.f-loading b { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--heading); }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--card-border); border-top-color: var(--accent); animation: spin .8s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Sem contorno de foco nos botões do topo do cadastro (o navegador foca o primeiro botão ao abrir) */
.sheet-head .link-btn:focus { outline: none; }

/* Nome do usuário no topo em fonte manuscrita (Pacifico, SIL Open Font License; guardada no projeto para funcionar offline) */
@font-face { font-family: 'Pacifico'; src: url('fonts/pacifico-latin.woff2') format('woff2'); font-display: swap; }
.topbar #user-name { font-family: 'Pacifico', cursive; font-weight: 400; font-size: 23px; line-height: 1.6; padding: 0 4px 3px; color: var(--title); }

/* Celulares bem estreitos (ex.: iPhone SE, 320px): marca e nome menores para caber tudo no topo */
@media (max-width: 359px) {
  .topbar { padding-left: 12px; padding-right: 12px; gap: 6px; }
  .topbar #user-name { font-size: 18px; }
}

/* Estes textos usam --ink em vez de cinza: preto puro (#000) no modo claro, quase branco no escuro */
.bbc-title,
.bbc-s,
#words-summary,
.stat span,
#study-setup .field > label,
#play-setup .field > label,
.chart-filters .field > label,
#chart-forecast .grid span,
#chart-forecast .xlabels span,
#view-more .chart-sub,
.data-table summary { color: var(--ink); }

/* Menu de configurações, modo claro: todos os textos cinza em preto puro */
html:not(.dark) .settings-row label,
html:not(.dark) .settings-panel .cefr-group > span,
html:not(.dark) .news-source small,
html:not(.dark) .settings-tabs button:not(.on),
html:not(.dark) .settings-hint,
html:not(.dark) .settings-hint.strong,
html:not(.dark) .backup-tab .about,
html:not(.dark) .backup-tab .about a { color: var(--ink); }

/* ---------- Palavras em cards: quadrados, duas colunas ---------- */
#toggle-view .ic-list { display: none; }
#toggle-view.is-cards .ic-list { display: block; }
#toggle-view.is-cards .ic-cards { display: none; }
.word-list.cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.word-card {
  aspect-ratio: 1 / 1; min-width: 0; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; padding: 6px;
  background: var(--card); border: 2px solid var(--card-border); border-radius: 12px; box-shadow: var(--shadow);
  transition: transform .1s; user-select: none; -webkit-user-select: none;
}
.word-card:active { transform: scale(.98); }
.wc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 4px; min-height: 16px; }
.wc-pos { flex: 0 0 auto; max-width: calc(100% - 22px); font-size: calc(9.5px * var(--fs-cards, 1)); font-style: italic; color: var(--ink); line-height: 1.3; padding-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* status cede espaço para a classe: "Aprendendo" vira "Aprend…" quando precisa */
.wc-top .status { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: calc(8.5px * var(--fs-words, 1)); padding: 2px 5px; }
.wc-body { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; padding: 0 1px 2px; }
.wc-word {
  font-size: calc(13px * var(--fs-cards, 1)); font-weight: 700; line-height: 1.2; color: var(--text); max-width: 100%;
  /* palavra grande: quebra com traço (regras de hifenização do inglês, por isso lang="en") */
  -webkit-hyphens: manual; hyphens: manual; overflow-wrap: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wc-meaning {
  font-size: calc(11px * var(--fs-cards, 1)); line-height: 1.25; color: var(--ink); max-width: 100%; overflow-wrap: anywhere; -webkit-hyphens: manual; hyphens: manual;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Celular bem estreito (320px): classe um pouco menor para caber inteira ao lado do status */
@media (max-width: 359px) { .wc-pos { font-size: calc(9px * var(--fs-cards, 1)); } .wc-top .status { padding: 2px 4px; } }

/* ---------- Aquecer: cards que viram ---------- */
.warmup-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
#warmup-hint { font-size: calc(13px * var(--fs-cards, 1)); font-weight: 600; color: var(--ink); }
.word-card.flip-card { padding: 0; background: none; border: 0; box-shadow: none; overflow: visible; perspective: 700px; }
.wc-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.3,.7,.3,1); }
.flip-card.flipped .wc-inner { transform: rotateY(180deg); }
.wc-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8px;
  background: var(--card); border: 2px solid var(--card-border); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden;
}
/* verso levemente rosado para diferenciar da frente */
/* frente com a mesma borda do verso (vermelha) */
.wc-front { border-color: var(--outline-border); }
.wc-back { transform: rotateY(180deg); background: linear-gradient(to bottom, var(--outline-from), var(--outline-to)); border-color: var(--outline-border); }
.wc-face .wc-meaning { font-size: calc(12px * var(--fs-cards, 1)); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .wc-inner { transition: none; } }

/* Celular bem estreito: botões do Estudar um pouco menores para "Revisar (n)" caber em uma linha */
@media (max-width: 359px) { .study-actions .btn { font-size: calc(12.5px * var(--fs-buttons, 1)); padding: 8px 3px; } }

/* ---------- Aquecer: modo áudio ---------- */
.warmup-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
#warmup-audio { width: 40px; height: 40px; }
#warmup-audio svg { width: 20px; height: 20px; }
#warmup-audio.on { color: #fff; border-color: var(--solid-border); background: linear-gradient(to bottom, var(--solid-from), var(--solid-to)); }
.wc-tools { display: none; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; flex-shrink: 0; }
#warmup.audio-mode .wc-tools { display: flex; }
.wc-tools .icon-btn { width: 26px; height: 26px; border-radius: 6px; border-width: 1px; border-color: color-mix(in srgb, var(--outline-border) 55%, transparent); } /* borda fina e suave */
.wc-tools .icon-btn svg { width: 14px; height: 14px; }
.wc-tools .icon-btn:active { transform: translateY(1px); }

/* Aquecer: a palavra fica sempre no centro do card; o alto-falante aparece logo abaixo dela sem empurrá-la
   (3 linhas: espaço igual em cima e embaixo da palavra; o alto-falante ocupa o começo do espaço de baixo) */
.wc-face { display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center; align-items: center; }
.wc-face > .wc-word, .wc-face > .wc-meaning { grid-row: 2; }
.wc-face > .wc-tools { grid-row: 3; align-self: start; margin-top: 4px; }

/* Banner mais baixo: "Ler notícia" na linha da palavra (à direita); embaixo só a barra de tempo */
.bbc-stage { position: relative; }
/* sem caixa: só o texto e o ícone */
.bbc-head .bbc-open { margin-left: auto; padding: 0; border: 0; background: none; border-radius: 0; font-size: 13px; }
.bbc-head .bbc-open svg { width: 14px; height: 14px; }
.bbc-card { min-height: 0; }
.bbc-banner:not(.auto) .bbc-foot { display: none; }
.bbc-w.long { font-size: 17px; }

/* ---------- Configurações: aba Layout (cores) e aba Admin ---------- */
.color-list { display: grid; gap: 8px; }
.color-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.color-row label { font-size: calc(14px * var(--fs-settings, 1)); font-weight: 600; cursor: pointer; }
.color-swatch {
  flex-shrink: 0; width: 44px; height: 30px; padding: 0; cursor: pointer;
  border: 2px solid #d1d5db; border-radius: 8px; box-shadow: inset 0 0 0 2px #fff;
}
.color-swatch.open { border-color: var(--accent); }
/* Tabela de cores: 8 por linha */
.color-palette { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; padding: 8px; margin: -2px 0 4px; background: #fff; border: 1px solid #d1d5db; border-radius: 10px; }
.color-palette button { aspect-ratio: 1; padding: 0; border: 1px solid rgba(0,0,0,.18); border-radius: 6px; cursor: pointer; }
.color-palette button.on { outline: 2px solid var(--text); outline-offset: 2px; }
.color-palette button:active { transform: scale(.92); }
html.dark .color-palette { background: #1f2937; border-color: #4b5563; }
#colors-reset { margin-top: 12px; }
.admin-tab { padding: 14px 16px 16px; }
html:not(.dark) .color-row label { color: var(--ink); }
html.dark .color-row label { color: #e5e7eb; }

/* Temas prontos ao lado de "Cores": quadrado dividido na diagonal com as duas cores do tema */
.colors-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.theme-list { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.theme-swatch { width: 28px; height: 28px; padding: 0; border-radius: 7px; border: 1.5px solid #9ca3af; cursor: pointer; }
.theme-swatch.on { outline: 2px solid var(--text); outline-offset: 2px; }
.theme-swatch:active { transform: scale(.92); }

/* ---------- Conta: tela de login, quem está conectado, trocar senha ---------- */
#login .welcome-card { text-align: center; }
#login input { font-size: 16px; text-align: center; }
#login .btn { margin-top: 16px; }
.form-msg { margin: 8px 0 0; font-size: calc(13px * var(--fs-support, 1)); font-weight: 600; color: var(--bad); }
.form-msg.ok { color: var(--good); }
.pass-form { display: grid; gap: 4px; margin-top: 4px; }
.pass-form label { font-size: calc(13px * var(--fs-settings, 1)); font-weight: 600; margin-top: 4px; }
.pass-form .btn { margin-top: 8px; }
html:not(.dark) .pass-form label { color: var(--ink); }

/* ---------- Admin: cadastro, lista de usuários; Gráficos: escolher aluno ---------- */

.pass-row { display: flex; gap: 6px; }
.pass-row input { flex: 1; min-width: 0; }
.pass-row .btn { margin: 0; }
.user-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.user-item { padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; }
.u-login { color: var(--ink); font-size: calc(12px * var(--fs-settings, 1)); }
.user-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
/* lista simples: sem card, só uma linha fina entre os nomes */
.user-list .user-item { padding: 0; min-width: 0; border: 0; border-bottom: 1px solid #e5e7eb; border-radius: 0; background: none; }
html.dark .user-list .user-item { background: none; border-color: #374151; }
.user-list .user-item:last-child { border-bottom: 0; }
.u-edit input { width: 100%; box-sizing: border-box; }
.u-row { display: flex; align-items: center; gap: 0; min-height: 28px; }
.u-name { flex: 1; min-width: 0; font-size: calc(14px * var(--fs-settings, 1)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-icon { width: 30px; height: 28px; }
.u-icon svg { width: 18px; height: 18px; }
.u-edit { padding: 0 0 8px; }
.u-edit-btns { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.u-edit-btns .btn { margin: 0; }
.user-item > .form-msg { margin: 0 0 6px; }
html.dark .user-item { background: #1f2937; border-color: #4b5563; }
.chart-user { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 8px; margin-bottom: 12px; }
.chart-user.hidden { display: none; }
.chart-user .field { margin: 0; min-width: 0; }
.chart-user select { width: 100%; padding: 6px 8px; font-size: 14px; min-height: 0; height: 36px; }
.user-empty { font-size: 13px; color: var(--ink); padding: 4px 2px; }

/* "(admin)" ao lado do nome no topo; linha de Ajustes sem o nome: idioma e tema à direita */
.topbar .user-bar .user-admin { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--title); margin-left: 2px; }
.topbar .user-bar .user-admin { margin-left: -4px; }
@media (max-width: 359px) { .topbar .user-bar .user-admin { font-size: 9px; } .topbar .user-bar:has(.user-admin:not(.hidden)) #user-name { font-size: 16px; } }
.admin-section { margin-top: 4px; }
#admin-area > .field { margin-bottom: 4px; }

/* Login: "Salvar login e senha" e "Voltar sem entrar"; Admin: interruptor "Exigir login" */
.remember-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0; font-size: calc(14px * var(--fs-settings, 1)); font-weight: 600; cursor: pointer; }
.admin-login .btn { margin-top: 10px; }
.admin-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 10px; margin-bottom: 8px; border-bottom: 2px solid #d1d5db; }
.admin-switch label { font-size: calc(14px * var(--fs-settings, 1)); font-weight: 700; cursor: pointer; }
html:not(.dark) .admin-switch label { color: var(--ink); }
html.dark .admin-switch { border-color: #4b5563; }

/* Lista de usuários: lupa e filtros; campos "Turma" */
.uf-bar { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 4px; }
.uf-bar .icon-btn.on { color: var(--accent); }
.uf-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; margin-bottom: 6px; }
.uf-box input { min-width: 0; width: 100%; box-sizing: border-box; }
.uf-box .btn { margin: 0; }
.u-edit select, #nu-class { width: 100%; }
.cf-box { grid-template-columns: minmax(0, 1fr) auto; }
.u-confirm { padding: 0 0 8px; }
.u-confirm-text { margin: 2px 0 0; font-size: calc(13px * var(--fs-settings, 1)); font-weight: 600; }
.uf-bar { gap: 2px; }
.admin-add { margin-bottom: 10px; }
html:not(.dark) .chart-user label { color: #000; }
.add-btns { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.u-edit .pass-row { display: flex; gap: 6px; }
.u-edit .pass-row .btn { margin: 0; }
/* "+" dos cadastros: círculo vermelho padrão (como o + flutuante), em tamanho menor */
.uf-bar .add-btn { width: 34px; height: 34px; border-radius: 50%; color: #fff; border: 2px solid var(--solid-border);
  background: linear-gradient(to bottom, var(--solid-from), var(--solid-to)); box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--solid-border) 50%, transparent); margin-right: 4px; }
.uf-bar .add-btn svg { width: 20px; height: 20px; stroke-width: 2.6; }
.uf-bar .add-btn.on { color: #fff; filter: brightness(.92); }
.uf-bar .add-btn:disabled { opacity: .4; filter: none; cursor: default; box-shadow: none; }
.uf-bar .icon-btn:disabled { opacity: .35; cursor: default; }

/* Estudar: "Próximo" acima do "Encerrar"; resposta escolhida fica marcada */

.rate:disabled { opacity: .45; }
.rate.on:disabled { opacity: 1; }
/* Verso da carta no modo claro: exemplo, tradução do exemplo e palavra em inglês em preto */
html:not(.dark) .face.back .ex, html:not(.dark) .face.back .ex .ex-tr, html:not(.dark) .face.back .phon { color: #000; }
.mark-toggle:disabled { opacity: .6; cursor: default; }

/* Botão fechar (X) nas sessões: mesmo tamanho dos ícones padrão (alto-falante, engrenagem: 40×40) */

/* X das sessões: vermelho do nível C1 (sólido, como a caixa do nível) */

/* Jogar: mesmo padrão do Estudar (palavra, classe em itálico e alto-falante como botão embaixo) */
.play-card .play-pos { color: var(--heading); font-style: italic; font-size: calc(14px * var(--fs-play, 1)); margin-top: 8px; }
.play-card .play-pos:empty { display: none; }
.play-card .play-speak { margin-top: 12px; }
.play-card .play-speak.hidden { display: none; }
/* Contadores (1/20 no Estudar, 1/10 no Jogar): negrito, 15px, preto no modo claro */
#study-counter, .play-hud #hud-left, .play-hud #hud-right { font-size: calc(15px * var(--fs-study, 1)); font-weight: 700; color: var(--text); }
html:not(.dark) #study-counter, html:not(.dark) .play-hud #hud-left, html:not(.dark) .play-hud #hud-right { color: #000; }
/* Jogar: pontos sempre no centro da linha (o X à direita não empurra mais o placar) */
.play-hud { position: relative; grid-template-columns: 1fr auto auto; }
.play-hud .hud-score { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.play-hud .hud-score.bump { animation: bump-c .3s; }
@keyframes bump-c { 50% { transform: translate(-50%, -50%) scale(1.35); } }

/* ===== Atividades em "janela" (Aquecer, Estudar, Jogar): barra de título e ✕ vermelho no canto ===== */
.win { background: var(--card); border: 1px solid #e5b4b4; border-radius: 12px; overflow: hidden; margin-top: 4px;
  box-shadow: 0 12px 30px -8px rgb(153 27 27 / .35), 0 2px 6px rgb(0 0 0 / .08); }
html.dark .win { border-color: #4b5563; }
.win-bar { display: flex; align-items: center; gap: 8px; height: 40px; padding-left: 12px;
  background: linear-gradient(to bottom, #fde8e8, #fbd5d5); border-bottom: 1px solid #f1b5b5; }
html.dark .win-bar { background: linear-gradient(to bottom, #374151, #2b3442); border-color: #4b5563; }
.win-bar img { width: 20px; height: 20px; border-radius: 4px; flex-shrink: 0; }
.win-title { flex: 1; min-width: 0; font-size: calc(14px * var(--fs-titles, 1)); font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:not(.dark) .win-title { color: #000; }
html:not(.dark) .win-bar #study-counter { font-size: calc(14px * var(--fs-study, 1)); font-weight: 700; color: #7f1d1d; margin: 0 6px 0 0; flex-shrink: 0; }
html.dark .win-bar #study-counter { color: #fca5a5; }
.win-x { width: 46px; height: 40px; flex-shrink: 0; border: 0; border-radius: 0; padding: 0; margin: 0;
  background: #E81123; color: #fff; font-size: 18px; font-weight: 800; display: grid; place-items: center; cursor: pointer; }
.win-x:hover { background: #C50F1F; }
.win-x:active { background: #A30D1A; }
.win-body { padding: 12px 12px 16px; }
#warmup .warmup-bar { justify-content: space-between; }
/* Jogar: a janela ocupa a altura toda e o teclado continua embaixo */
.play-game > .win { flex: 1; display: flex; flex-direction: column; }
.play-game .win-body { flex: 1; display: flex; flex-direction: column; }
#study-stats .stat { border: 1px solid var(--outline-border); } /* borda vermelha fina (mesmo vermelho dos botões contornados) */
/* Janela das atividades (modo claro): toda na cor da barra de título, exceto o card; bordas de 1,5px */
html:not(.dark) .win { background: color-mix(in srgb, var(--winbar) 17%, #fff); border: 1.5px solid var(--title); } /* vermelho-escuro dos títulos (#991B1B) */
html:not(.dark) .win-bar { border-bottom: 1.5px solid var(--title); }
/* Jogar: card e campo de digitação com borda vermelho-escura (cor dos títulos) */
html:not(.dark) .play-card { border: 1.5px solid var(--title); }
html:not(.dark) .play-answer { border-width: 1.5px; }
html:not(.dark) .play-answer:not(.ok):not(.bad):not(.almost) { border-color: var(--title); } /* acerto/erro continuam verde/vermelho */
/* Barra de título em vermelho, texto branco; o ✕ no mesmo vermelho, separado por uma borda na cor da borda da janela */
html:not(.dark) .win-bar { background: var(--winbar); border-bottom-color: var(--title); }
html:not(.dark) .win-title, html:not(.dark) .win-bar #study-counter { color: #fff; }
.win-x { background: var(--winbar); color: #fff; font-size: 17px; border-left: 1.5px solid var(--title); }
html.dark .win-x { border-left-color: #4b5563; }
.win-x:hover { background: color-mix(in srgb, var(--winbar) 85%, #000); }
.win-x:active { background: color-mix(in srgb, var(--winbar) 70%, #000); }
/* Modo claro: textos secundários (antes cinza) em preto — "Toque no card…", dicas, legendas etc. */
html:not(.dark) { --muted: #000; }
html:not(.dark) .cefr-group > span { color: #000; } /* Iniciante / Intermediário / Avançado (boas-vindas) */
#word-list.cards .word-card, #word-list .word-item { border: 1px solid var(--outline-border); } /* Palavras (cards e lista): borda fina na cor dos botões de filtro/visualização */
/* Menu Configurações (modo claro): divisões finas na cor dos botões de filtro/visualização */
html:not(.dark) .settings-row + .settings-row:not(.grouped) { border-top: 1px solid var(--outline-border); }
html:not(.dark) .settings-tabs { border-bottom: 1px solid var(--outline-border); }
/* Menu Configurações no padrão das janelas: barra de título (fixa no topo ao rolar), fundo e borda */
.settings-panel .settings-bar { position: sticky; top: 0; z-index: 2; }
html:not(.dark) .settings-panel { background: color-mix(in srgb, var(--winbar) 6%, #fff); border: 1.5px solid var(--title); } /* fundo bem claro, no tom do tema */
.bbc-banner { border: 1px solid var(--outline-border); } /* banner: mesma borda fina dos cards de Palavras (segue o tema) */
/* Topo (ícone, nome, nível, engrenagem): mesmo fundo da página. No topo da página fica transparente;
   rolando, usa o mesmo degradê fixo do fundo (para cobrir o conteúdo sem mudar de cor). */
.topbar { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
html.scrolled .topbar { background: linear-gradient(135deg, var(--bg-from), var(--bg-to)) fixed; background-color: var(--bg-from); }

/* ===== Layout → Cores / Bordas / Banner ===== */
.layout-sub { padding: 12px 16px 4px; }
.layout-sub button { flex: 1; }
.border-row select { width: auto; min-width: 118px; padding: 6px 8px; font-size: 14px; }

/* ===== Espessura das bordas (Layout → Bordas). "html:root" vence as regras anteriores ===== */
html:root #word-list .word-item, html:root #word-list.cards .word-card { border-width: var(--bw-words, 1px); }
html:root .wc-face { border-width: var(--bw-warmup, 2px); }
html:root .flashcard .face { border-width: var(--bw-study, 1px); }
html:root .play-card, html:root .play-answer { border-width: var(--bw-play, 1.5px); }
html:root .win, html:root .settings-panel { border-width: var(--bw-windows, 1.5px); }
html:root .win-bar { border-bottom-width: var(--bw-windows, 1.5px); }
html:root .win-x { border-left-width: var(--bw-windows, 1.5px); }
html:root .panel { border-width: var(--bw-panels, 1px); }
html:root .bbc-banner { border-width: var(--bw-banner, 1px); }
html:root .btn, html:root .icon-btn.outline, html:root .search-row .icon-btn, html:root .rate, html:root .mark-toggle, html:root .seg button { border-width: var(--bw-buttons, 2px); }
html:root input:not([type=checkbox]):not([type=file]), html:root select, html:root textarea { border-width: var(--bw-fields, 1px); }

/* Atalhos de bordas: ícones do tamanho dos temas de cores */
.border-swatch { display: grid; place-items: center; background: var(--card); color: var(--title); }
.border-swatch svg { width: 22px; height: 22px; }
.border-swatch .sq-fill { fill: currentColor; opacity: .35; stroke: none; }
.border-swatch .sq-thin { fill: none; stroke-width: 1.5; }
.border-swatch .sq-thick { fill: none; stroke-width: 3.5; }
html:root #view-more .panel { border-width: var(--bw-charts, 1px); }
/* Bordas das telas principais (Estudar, Jogar, Gráficos) na mesma cor dos botões, seguindo o tema */
html:not(.dark) .panel, html:not(.dark) .seg button,
html:not(.dark) input:not([type=checkbox]):not([type=file]), html:not(.dark) select, html:not(.dark) textarea { border-color: var(--outline-border); }
/* Gráficos: quadrinhos de números (Palavras, Dominadas, Aprendendo…) com borda como os do Estudar; espessura do item "Gráficos" */
#view-more .stat { border: 1px solid var(--outline-border); }
/* Indicadores (quadrinhos de números do Estudar e do Gráficos): item próprio em Layout → Bordas */
html:root #study-stats .stat, html:root #view-more .stat { border-width: var(--bw-stats, 1px); }
/* Espaço sempre da borda grossa: a diferença vira espaço interno (trocar a borda não mexe no tamanho da tela) */
html:root #word-list .word-item { padding: calc(14px + var(--bwd-words, 0px)) calc(16px + var(--bwd-words, 0px)); }
html:root #word-list.cards .word-card { padding: calc(6px + var(--bwd-words, 0px)); }
html:root .wc-face { padding: calc(8px + var(--bwd-warmup, 0px)); }
html:root .flashcard .face { padding: calc(24px + var(--bwd-study, 0px)); }
html:root .play-card { padding: calc(22px + var(--bwd-play, 0px)) calc(16px + var(--bwd-play, 0px)); }
html:root .play-answer { padding: calc(12px + var(--bwd-play, 0px)) calc(14px + var(--bwd-play, 0px)); }
html:root .win-body { padding: calc(12px + var(--bwd-windows, 0px)) calc(12px + var(--bwd-windows, 0px)) calc(16px + var(--bwd-windows, 0px)); }
html:root .panel { padding: calc(20px + var(--bwd-panels, 0px)); }
html:root #view-more .panel { padding: calc(20px + var(--bwd-charts, 0px)); }
html:root #study-stats .stat, html:root #view-more .stat { padding: calc(10px + var(--bwd-stats, 0px)) calc(4px + var(--bwd-stats, 0px)); }
html:root .bbc-banner { padding: calc(8px + var(--bwd-banner, 0px)) var(--bwd-banner, 0px) calc(10px + var(--bwd-banner, 0px)); }
html:root input:not([type=checkbox]):not([type=file]), html:root select, html:root textarea { padding-top: calc(10px + var(--bwd-fields, 0px)); padding-bottom: calc(10px + var(--bwd-fields, 0px)); }
html:root .border-row select, html:root .chart-user select { padding-top: calc(6px + var(--bwd-fields, 0px)); padding-bottom: calc(6px + var(--bwd-fields, 0px)); }
/* Layout → Fonte: − 100% + à direita de cada item */
.font-row > span:first-child { font-size: calc(14px * var(--fs-settings, 1)); font-weight: 600; }
.font-ctl { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.font-ctl .icon-btn { width: 32px; height: 32px; font-size: 20px; font-weight: 800; line-height: 1; color: var(--heading); }
.font-ctl .icon-btn:disabled { opacity: .35; }
.font-ctl b { min-width: 42px; text-align: center; font-size: 13px; }
/* ===== Atividades em tela cheia (html.fullscreen): a janela ocupa a tela toda ===== */
html.fullscreen, html.fullscreen body { overflow: hidden; }
html.fullscreen .topbar, html.fullscreen .tabbar, html.fullscreen .fab { display: none !important; }
html.fullscreen .win {
  position: fixed; inset: 0; z-index: 60; margin: 0; border-radius: 0; border-width: 0 !important;
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
}
html.fullscreen .win-bar { flex-shrink: 0; height: 48px; }
html.fullscreen .win-x { height: 48px; width: 54px; }
html.fullscreen .win-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; width: 100%; max-width: 640px; margin: 0 auto; }
html.fullscreen .win-bar .win-title { font-size: calc(16px * var(--fs-titles, 1)); }
/* ✕ com cara de botão: caixinha arredondada com borda clara, afastada das bordas da barra */
.win-x, html:root .win-x {
  width: 34px; height: 30px; margin: 0 6px 0 0; border-radius: 7px;
  border: 2.5px solid rgb(255 255 255 / .6); border-left-width: 2.5px;
  background: color-mix(in srgb, var(--winbar) 88%, #000); box-shadow: 0 1px 2px rgb(0 0 0 / .25);
  font-size: 15px;
}
.win-x:hover { background: color-mix(in srgb, var(--winbar) 75%, #000); }
.win-x:active { background: color-mix(in srgb, var(--winbar) 65%, #000); transform: translateY(1px); }
html.fullscreen .win-x { width: 40px; height: 34px; margin-right: 8px; font-size: 17px; }
/* Jogar: placar com "Pontuação" em cima; "Palavra 1/10" numa caixinha que se preenche; card e campo mais abaixo */
.play-hud { min-height: 54px; }
.play-hud .hud-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.play-hud .hud-center small { font-size: calc(10.5px * var(--fs-play, 1)); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--heading); margin-bottom: 2px; }
.play-hud .hud-center .hud-score { position: static; transform: none; }
.play-hud .hud-center .hud-score.bump { animation: bump .3s; }
.play-hud #hud-left.hud-count {
  justify-self: start; display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 12px; border-radius: 999px;
  border: 1.5px solid var(--title); box-shadow: var(--shadow-sm);
  background: linear-gradient(90deg, color-mix(in srgb, var(--winbar) 28%, var(--card)) var(--p, 0%), var(--card) var(--p, 0%));
}
.play-hud #hud-left.hud-count small { font-size: calc(11px * var(--fs-play, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--heading); }
.play-hud #hud-left.hud-count b { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: calc(16px * var(--fs-play, 1)); }
.play-hud #hud-left:empty { display: none; }
.play-card { margin-top: 22px; }
/* Placar do Jogar: "PONTUAÇÃO" maior e dígitos em plaquinhas, como um placar */
.play-hud { min-height: 70px; }
.play-hud .hud-center small { font-size: calc(13px * var(--fs-play, 1)); margin-bottom: 4px; }
.play-hud .hud-center .hud-score { display: flex; gap: 3px; font-size: calc(30px * var(--fs-play, 1)); }
.hud-score .dg {
  position: relative; display: grid; place-items: center; min-width: 1.05em; height: 1.4em; padding: 0 2px;
  border-radius: 6px; background: linear-gradient(to bottom, #2b2b2b 50%, #1a1a1a 50%); color: #fff; font-weight: 800;
  box-shadow: 0 2px 4px rgb(0 0 0 / .35), inset 0 1px 0 rgb(255 255 255 / .12);
}
.hud-score .dg::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgb(0 0 0 / .55); }
/* Jogar: "Palavra 1/10" centralizada, uma linha vazia e depois a pontuação; o card fica no meio do espaço livre */
.play-hud { display: flex; flex-direction: column; align-items: center; gap: 0; min-height: 0; }
.play-hud .hud-center { position: static; transform: none; margin-top: 22px; }
.play-hud #hud-left.hud-count { justify-self: auto; }
.play-hud #hud-right { position: absolute; right: 0; top: 4px; }
.play-hud #hud-right:empty { display: none; }
.play-game .play-card { margin-top: auto; }
/* 🔥 sequência (pontos extras): maior e logo ao lado da caixinha "Palavra" */
.play-hud #hud-right { right: auto; left: calc(50% + 76px); top: 2px; font-size: calc(22px * var(--fs-play, 1)); line-height: 1.2; }
/* Jogar: sem a linha vazia entre "Palavra" e "Pontuação"; em telas pequenas nada encolhe por cima de nada — a janela rola */
.play-hud .hud-center { margin-top: 8px; }
.play-game .win-body > * { flex-shrink: 0; }
html.fullscreen .play-game .win-body { overflow-y: auto; }
.play-game .play-hud { padding-bottom: 14px; } /* espaço mínimo entre a pontuação e o card */
/* Jogar: "PONTUAÇÃO" em cima; na linha dos dígitos, a caixinha 1/10 à esquerda e o 🔥 à direita */
.play-game .play-hud { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 12px; }
.play-hud .hud-center { display: contents; }
.play-hud .hud-center small { grid-row: 1; grid-column: 2; justify-self: center; font-size: calc(15px * var(--fs-play, 1)); margin: 0 0 4px; }
.play-hud .hud-center .hud-score { grid-row: 2; grid-column: 2; }
.play-hud #hud-left { grid-row: 2; grid-column: 1; justify-self: start; }
.play-hud #hud-right { position: static; grid-row: 2; grid-column: 3; justify-self: start; }
.play-hud #hud-left.hud-count { padding: 6px 14px; }
.play-hud #hud-left.hud-count b { font-size: calc(20px * var(--fs-play, 1)); }
.play-game .play-hud #hud-left.hud-count { justify-self: start; }
.play-hud .hud-center .hud-score { justify-self: center; justify-content: center; } /* dígitos no centro exato */
/* Caixinha de progresso (Jogar "1/10" e Estudar "1/20"): retangular como os cards, preenchendo conforme avança */
.count-box, .play-hud #hud-left.hud-count {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 14px; border-radius: 10px;
  border: 1.5px solid var(--title); box-shadow: var(--shadow-sm);
  background: linear-gradient(90deg, color-mix(in srgb, var(--winbar) 28%, var(--card)) var(--p, 0%), var(--card) var(--p, 0%));
}
.count-box b { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: calc(20px * var(--fs-study, 1)); font-weight: 700; color: var(--text); }
html:not(.dark) .count-box b { color: #000; }
.count-box small { font-size: calc(12px * var(--fs-study, 1)); font-weight: 700; color: var(--heading); }
.study-count-row { display: flex; justify-content: center; margin: 2px 0 12px; }
.danger-confirm { margin-top: 12px; }
.dc-text { margin: 0 0 4px; font-size: calc(13px * var(--fs-settings, 1)); font-weight: 600; }

/* ===== Pausar / Continuar ===== */
.win-pause { margin-right: 4px !important; }
.win-pause svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.win-pause .ic-play, .win-pause.on .ic-pause { display: none; }
.win-pause.on .ic-play { display: block; }
.win.paused .win-body { position: relative; }
.win.paused .win-body > * { filter: blur(6px); pointer-events: none; user-select: none; }
.win.paused .win-body::after {
  content: var(--paused-text, "Pausado"); position: absolute; inset: 0; display: grid; place-items: center;
  font-size: calc(22px * var(--fs-titles, 1)); font-weight: 800; color: var(--title); letter-spacing: .04em; cursor: pointer;
  white-space: pre-line; text-align: center; line-height: 1.6;
}
.resume-btn { margin: 0 0 14px; }

/* ===== Estudar: botões de ação com relevo e ícone (diferentes dos indicadores) ===== */
.study-actions .btn {
  flex-direction: column; gap: 4px; min-height: 74px; border-radius: 10px; background: var(--card); border-color: var(--outline-border);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--outline-border) 70%, #000), 0 6px 14px -6px rgb(0 0 0 / .3);
}
.study-actions .btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 color-mix(in srgb, var(--outline-border) 70%, #000); }
.study-actions .btn:disabled { box-shadow: none; }
.study-actions .btn::before { content: ""; width: 24px; height: 24px; flex-shrink: 0; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
#study-warmup { --ic: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203c1%203%204%204.5%204%208.5A4%204%200%200%201%208%2011.5c0-1.5.6-2.6%201.4-3.4C9.6%2010%2011%2010.5%2011%2010.5%2011%208%2010%205.5%2012%203z'/%3E%3Cpath%20d='M12%2021a6%206%200%200%200%206-6'/%3E%3Cpath%20d='M6%2015a6%206%200%200%200%206%206'/%3E%3C/svg%3E"); }
#study-start { --ic: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2012a9%209%200%201%200%203-6.7'/%3E%3Cpath%20d='M3%204v5h5'/%3E%3C/svg%3E"); }
#study-new { --ic: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203l1.8%205.2L19%2010l-5.2%201.8L12%2017l-1.8-5.2L5%2010l5.2-1.8z'/%3E%3Cpath%20d='M19%2016l.7%202%202%20.7-2%20.7-.7%202-.7-2-2-.7%202-.7z'/%3E%3C/svg%3E"); }
/* Estudar: direção + botão de filtros na mesma linha; filtros escondidos até tocar */
.dir-row { display: flex; gap: 8px; align-items: stretch; }
.dir-row .seg { flex: 1; }
.dir-row .icon-btn { position: relative; width: 44px; height: auto; min-height: 40px; }
#study-filters-toggle.on { background: linear-gradient(to bottom, var(--outline-from), var(--outline-to)); }
.study-filters { margin-top: 4px; }
/* relevo 3D: degrau embaixo E à direita; ao tocar, o botão "afunda" na diagonal */
.study-actions .btn { box-shadow: 3px 3px 0 color-mix(in srgb, var(--outline-border) 70%, #000), 4px 7px 14px -6px rgb(0 0 0 / .3); }
.study-actions .btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 0 0 0 color-mix(in srgb, var(--outline-border) 70%, #000); }
.study-actions .btn:disabled { box-shadow: none; }

/* ===== Estudar (base: modelo enviado) — indicadores e botões em vermelho claro ===== */
#study-stats { gap: 10px; }
html:root #study-stats .stat { background: var(--well); border-radius: 14px; padding: 12px 4px; }
#study-stats .stat b { font-family: inherit; font-weight: 800; font-size: calc(26px * var(--fs-stats, 1)); color: var(--text); }
#study-stats .stat:first-child b { color: var(--title); }
html:not(.dark) #study-stats .stat b { color: #000; }
html:not(.dark) #study-stats .stat:first-child b { color: var(--title); }

/* Direção: caixa clara com "DIREÇÃO:" e a pílula EN → PT; tocar inverte */
.dir-row { display: flex; gap: 10px; align-items: stretch; }
.dir-toggle { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 8px 10px 8px 14px;
  border-radius: 12px; border: var(--bw-buttons, 2px) solid var(--outline-border); background: var(--well); cursor: pointer; }
.dir-label { font-size: calc(13px * var(--fs-buttons, 1)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--title); }
.dir-label::after { content: ":"; }
.dir-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; background: var(--card); border: 1px solid var(--outline-border);
  font-weight: 800; font-size: calc(15px * var(--fs-buttons, 1)); color: var(--text); }
.dir-pill i { font-style: normal; color: var(--title); }
.dir-toggle:active { transform: translateY(1px); }
.dir-row .icon-btn { width: 52px; height: auto; min-height: 52px; border-radius: 12px; background: var(--well); }

/* 4 botões quadrados: ícone num círculo + texto; relevo 3D (embaixo e à direita) */
.study-actions.grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.act-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 124px; padding: 12px 8px;
  border-radius: 14px; border: var(--bw-buttons, 2px) solid var(--outline-border); background: var(--well); color: var(--text);
  font-weight: 800; font-size: calc(16px * var(--fs-buttons, 1)); line-height: 1.2; cursor: pointer;
  box-shadow: 3px 4px 0 color-mix(in srgb, var(--outline-border) 70%, #000);
}
html:not(.dark) .act-btn { color: #000; }
.act-btn:active:not(:disabled) { transform: translate(3px, 4px); box-shadow: none; }
.act-ic { position: relative; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--title) 14%, transparent); }
.act-ic::after { content: ""; position: absolute; inset: 10px; background: var(--title); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.act-btn.primary { background: linear-gradient(to bottom, var(--strong-from), var(--strong-to)); border-color: var(--strong-border); color: #fff;
  box-shadow: 3px 4px 0 var(--strong-shadow); }
html:not(.dark) .act-btn.primary { color: #fff; }
.act-btn.primary .act-ic { background: rgb(255 255 255 / .22); }
.act-btn.primary .act-ic::after { background: #fff; }
.act-btn:disabled { background: color-mix(in srgb, var(--well) 50%, #e5e7eb); border-color: #d1d5db; color: #6b7280; box-shadow: none; cursor: default;
  font-weight: 600; font-size: calc(13px * var(--fs-buttons, 1)); }
html:not(.dark) .act-btn:disabled { color: #6b7280; }
.act-btn:disabled .act-ic { background: rgb(0 0 0 / .06); }
.act-btn:disabled .act-ic::after { background: #9ca3af; }
#study-warmup { --ic: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203c1%203%204%204.5%204%208.5A4%204%200%200%201%208%2011.5c0-1.5.6-2.6%201.4-3.4C9.6%2010%2011%2010.5%2011%2010.5%2011%208%2010%205.5%2012%203z'/%3E%3Cpath%20d='M12%2021a6%206%200%200%200%206-6'/%3E%3Cpath%20d='M6%2015a6%206%200%200%200%206%206'/%3E%3C/svg%3E"); }
#study-new { --ic: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203l1.8%205.2L19%2010l-5.2%201.8L12%2017l-1.8-5.2L5%2010l5.2-1.8z'/%3E%3Cpath%20d='M19%2016l.7%202%202%20.7-2%20.7-.7%202-.7-2-2-.7%202-.7z'/%3E%3C/svg%3E"); }
#study-start { --ic: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2012a9%209%200%201%200%203-6.7'/%3E%3Cpath%20d='M3%204v5h5'/%3E%3C/svg%3E"); }
#study-start:disabled { --ic: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012l5%205L20%207'/%3E%3C/svg%3E"); }
#study-cram { --ic: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%207h16M4%2012h16M4%2017h10'/%3E%3Cpath%20d='M17%2015l2%202%203-3'/%3E%3C/svg%3E"); }
/* Estudar sem o painel branco: os itens ficam soltos na página, em vermelho claro (um tom acima do fundo) */
#study-setup.panel { background: transparent; border: 0 !important; box-shadow: none; padding: 4px 0 0; }
html:not(.dark) #study-setup { --soft-red: color-mix(in srgb, var(--winbar) 13%, #fff); }
html.dark #study-setup { --soft-red: var(--card); }
html:root #study-stats .stat, #study-setup .dir-toggle, #study-setup .dir-row .icon-btn, #study-setup .act-btn:not(.primary):not(:disabled) { background: var(--soft-red); }
/* Estudar: indicadores, Direção, filtros e botões (menos Revisar tudo) em branco */
html:not(.dark) #study-setup { --soft-red: #fff; }
html:not(.dark) #study-setup .act-btn:disabled { background: #fff; opacity: .7; }
/* Estudar: indicadores e botões quadrados (largura = altura) */
html:root #study-stats .stat, #study-setup .act-btn { aspect-ratio: 1 / 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* Bordas visíveis também no Revisar tudo (borda mais escura que o fundo) e no Revisar desabilitado (cor dos botões) — assim Layout → Bordas faz efeito neles */
#study-setup .act-btn.primary { border-color: var(--strong-border); }
#study-setup .act-btn:disabled { border-color: var(--outline-border); }
#study-setup { max-width: 440px; margin-left: auto; margin-right: auto; } /* no computador os quadrados não ficam gigantes */

/* ===== Jogar no mesmo padrão do Estudar ===== */
#play-setup.panel { background: transparent; border: 0 !important; box-shadow: none; padding: 4px 0 0; max-width: 440px; margin-left: auto; margin-right: auto; }
html:not(.dark) #play-setup { --soft-red: #fff; }
html.dark #play-setup { --soft-red: var(--card); }
#play-setup .dir-toggle, #play-setup .dir-row .icon-btn, #play-setup .act-btn:not(.primary):not(:disabled) { background: var(--soft-red); }
#play-setup .act-btn { aspect-ratio: 1 / 1; min-height: 0; gap: 6px; }
#play-setup .act-btn.primary { border-color: var(--strong-border); }
#play-setup .act-btn:disabled { border-color: var(--outline-border); }
html:not(.dark) #play-setup .act-btn:disabled { background: #fff; opacity: .7; }
.act-sub { font-size: calc(12px * var(--fs-buttons, 1)); font-weight: 600; color: var(--muted); }
.act-best { font-size: calc(12px * var(--fs-buttons, 1)); font-weight: 700; color: var(--title); }
.act-best:empty { display: none; }
/* modo escolhido: destaque (fundo vermelho claro e borda na cor dos títulos) */
#play-setup .mode-btn.on { background: color-mix(in srgb, var(--winbar) 14%, #fff); border-color: var(--title); }
html.dark #play-setup .mode-btn.on { background: color-mix(in srgb, var(--winbar) 30%, var(--card)); }
#play-filters-toggle.on { background: linear-gradient(to bottom, var(--outline-from), var(--outline-to)); }
#play-mode-desc { text-align: center; margin: 12px 0 0; }
#play-mode [data-v="classic"] { --ic: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='4'%20y='3'%20width='16'%20height='18'%20rx='2'/%3E%3Cpath%20d='M8%208h8M8%2012h8M8%2016h5'/%3E%3C/svg%3E"); }
#play-mode [data-v="survival"] { --ic: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2020s-7-4.4-7-10a4%204%200%200%201%207-2.6A4%204%200%200%201%2019%2010c0%205.6-7%2010-7%2010z'/%3E%3C/svg%3E"); }
#play-mode [data-v="timed"] { --ic: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='13'%20r='8'/%3E%3Cpath%20d='M12%209v4l3%202M9%202h6'/%3E%3C/svg%3E"); }
#play-start { --ic: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7%204.5v15l12-7.5z'/%3E%3C/svg%3E"); }
#play-setup .act-btn.mode-btn.on:not(:disabled) { background: color-mix(in srgb, var(--winbar) 16%, #fff); border-color: var(--title);
  box-shadow: inset 0 0 0 2px var(--title), 3px 4px 0 color-mix(in srgb, var(--outline-border) 70%, #000); }
html.dark #play-setup .act-btn.mode-btn.on:not(:disabled) { background: color-mix(in srgb, var(--winbar) 30%, var(--card)); }
/* Jogar: modos em cima (3 quadrados do tamanho dos indicadores do Estudar), depois Direção, e Jogar grande no centro */
.mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 6px; }
#play-setup .mode-grid .act-btn { gap: 3px; padding: 6px 4px; font-size: calc(13px * var(--fs-buttons, 1)); border-radius: 14px; }
#play-setup .mode-grid .act-ic { width: 32px; height: 32px; }
#play-setup .mode-grid .act-ic::after { inset: 7px; }
#play-setup .mode-grid .act-sub, #play-setup .mode-grid .act-best { font-size: calc(10.5px * var(--fs-buttons, 1)); }
#play-mode-desc { margin: 6px 0 14px; }
.play-start-row { display: flex; justify-content: center; margin-top: 18px; }
.play-start-row #play-start { width: calc(50% - 7px); }
/* Direção é um botão: mesmo relevo 3D dos outros (embaixo e à direita), afunda ao tocar */
.dir-toggle { box-shadow: 3px 4px 0 color-mix(in srgb, var(--outline-border) 70%, #000); }
.dir-toggle:active { transform: translate(3px, 4px); box-shadow: none; }
/* Botão de filtros (Estudar e Jogar): mesmo relevo 3D */
.dir-row .icon-btn { box-shadow: 3px 4px 0 color-mix(in srgb, var(--outline-border) 70%, #000); }
.dir-row .icon-btn:active { transform: translate(3px, 4px); box-shadow: none; }

/* ===== Botão "?" ao lado do logo e caixa de ajuda ===== */
.help-btn { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; padding: 0; margin-left: 2px; display: grid; place-items: center;
  border: 2px solid var(--outline-border); background: var(--card); color: var(--title); font-size: 15px; font-weight: 900; line-height: 1; cursor: pointer;
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--outline-border) 70%, #000); }
.help-btn:active { transform: translate(2px, 2px); box-shadow: none; }
.help-overlay { position: fixed; inset: 0; z-index: 920; display: grid; place-items: center; padding: 16px; background: rgb(0 0 0 / .35); animation: fade .15s ease-out; }
.help-card { width: 100%; max-width: 380px; max-height: min(560px, calc(100dvh - 32px)); display: flex; flex-direction: column; margin: 0; }
.help-card .win-body { overflow-y: auto; }
.help-body p { margin: 0 0 8px; font-weight: 700; font-size: calc(15px * var(--fs-support, 1)); }
.help-body ul { margin: 0; padding-left: 18px; display: grid; gap: 7px; }
.help-body li { font-size: calc(14px * var(--fs-support, 1)); line-height: 1.4; }
html:not(.dark) .help-body { color: #000; }
/* "?" no mesmo padrão da engrenagem (40×40, contornado) */
.topbar .help-btn { width: 40px; height: 40px; border-radius: 8px; margin-left: 4px; font-size: 20px; font-weight: 900; color: var(--heading); }

/* ===== Relevo 3D em todos os botões (degrau embaixo e à direita; ao tocar, afunda) ===== */
.btn, .icon-btn.outline, .seg button, .rate, .mark-toggle, .key, .chip {
  --sh3d: color-mix(in srgb, var(--outline-border) 70%, #000);
  box-shadow: 3px 3px 0 var(--sh3d);
}
.btn.primary, .key.enter { --sh3d: var(--solid-shadow); }
.btn.danger { --sh3d: #7f1d1d; }
.rate.again, .mark-toggle.hard { --sh3d: #b91c1c; }
.rate.good, .mark-toggle.mastered { --sh3d: #15803d; }
.chip, .key, .seg button { box-shadow: 2px 2px 0 var(--sh3d); }
.btn:active:not(:disabled), .icon-btn.outline:active, .seg button:active, .rate:active:not(:disabled), .mark-toggle:active:not(:disabled), .chip:active { transform: translate(3px, 3px); box-shadow: none; }
.key:active { transform: translate(2px, 2px); box-shadow: none; }
.btn:disabled, .rate:disabled, .mark-toggle:disabled { box-shadow: none; }
.topbar h1.brand { overflow: visible; padding-bottom: 3px; } /* não corta a sombra 3D do botão "?" */
/* Jogar: modo escolhido com a mesma cor clara das opções selecionadas (ex.: Priorizar) */
#play-setup .act-btn.mode-btn.on:not(:disabled) { background: linear-gradient(to bottom, var(--outline-from), var(--outline-to)); }
#play-mode { margin-bottom: 14px; }
/* ===== Cartas quadradas (largura = altura) ===== */
/* Estudar (Novas, Revisar, Revisar tudo): a carta ocupa a largura, mas nunca passa de ~48% da altura da tela */
#study-session .flashcard { width: min(100%, 48dvh); aspect-ratio: 1 / 1; min-height: 0; margin: 0 auto; }
/* Jogar (todos os modos): menor, para caber o campo e o teclado embaixo */
.play-game .play-card { width: min(100%, 34dvh); aspect-ratio: 1 / 1; margin-left: auto; margin-right: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px; overflow: hidden; }
.play-game .play-answer { width: min(100%, 34dvh); margin-left: auto; margin-right: auto; } /* campo de digitação com a mesma largura da carta */
/* Ícones dos botões quadrados sem o círculo sombreado atrás */
.act-ic, .act-btn.primary .act-ic, .act-btn:disabled .act-ic { background: transparent !important; }
.act-ic::after { inset: 6px; }

/* ===== Tema: campo de seleção + sol/lua ===== */
.theme-pick { display: flex; gap: 8px; align-items: stretch; margin: 2px 0 8px; }
.theme-pick select { flex: 1; min-width: 0; }
.mode-seg { flex: 0 0 auto; gap: 6px; flex-wrap: nowrap; }
.mode-seg button { flex: 0 0 44px; min-height: 40px; padding: 0; display: grid; place-items: center; }
.mode-seg svg { width: 20px; height: 20px; }
/* fonte do tema (Google Fonts), quando o tema tiver */
body { font-family: var(--app-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif); }
/* texto sobre a cor de destaque (temas escuros do tweakcn podem ter destaque claro) */
:root { --on-accent: #fff; }
.btn.primary, .act-btn.primary, html:not(.dark) .act-btn.primary, .key.enter, .chip.on, .fab,
.win-bar .win-title, html:not(.dark) .win-title, .win-bar #study-counter, html:not(.dark) .win-bar #study-counter, .win-x, .seg button.on .n { color: var(--on-accent); }
.act-btn.primary .act-ic::after { background: var(--on-accent); }
/* no escuro, a barra das janelas também segue o tema */
html.dark .win-bar { background: var(--winbar); }
/* modo escuro: botões quadrados desabilitados e texto dos botões no tom do tema */
html.dark .act-btn { color: var(--text); }
html.dark #study-setup .act-btn:disabled, html.dark #play-setup .act-btn:disabled { background: var(--card); color: var(--muted); border-color: var(--card-border); opacity: .55; }

/* texto da barra de título com cor própria (Layout → Cores); sem escolha, igual ao texto dos botões principais */
.win-bar .win-title, html:not(.dark) .win-title, .win-bar #study-counter, html:not(.dark) .win-bar #study-counter, .win-x { color: var(--winbar-ink, var(--on-accent)); }

/* ===== Estudar: destaque no próximo passo, aviso "em dia" e desfazer ===== */
.study-status { margin: 0; aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  text-align: center; padding: 8px; color: var(--muted); font-size: calc(13px * var(--fs-support, 1)); line-height: 1.3; }
.study-status b { color: var(--text); font-size: calc(15px * var(--fs-buttons, 1)); }
.study-status.hidden, #study-start.hidden { display: none; }

/* ===== Hierarquia: relevo 3D só no que se toca ===== */
/* cards de palavra: planos (borda fina + sombra mínima) */
.word-card { box-shadow: 0 1px 2px rgb(0 0 0 / .06); }
/* Direção: a barra é plana; só a pílula com EN → PT tem o relevo de botão */
.dir-toggle, .dir-toggle:active { box-shadow: none; transform: none; }
.dir-pill { --sh3d: color-mix(in srgb, var(--outline-border) 70%, #000); box-shadow: 2px 2px 0 var(--sh3d); }
.dir-toggle:active .dir-pill { transform: translate(2px, 2px); box-shadow: none; }
/* "Não sei": ação secundária, sem o vermelho forte do OK */
.key[data-a="skip"] { color: var(--title); border-color: var(--outline-border); background: var(--well); box-shadow: 0 2px 0 var(--outline-border); }
.key[data-a="skip"]:active { transform: translateY(2px); box-shadow: none; }

/* ===== Cores do tema (nada de azul fixo) ===== */
.switch:checked, html.dark .switch:checked { background: var(--solid-to, var(--info)); }
/* "Nova" é o padrão de quem começa: fica neutra; Aprendendo e Dominada continuam coloridas */
.status.new { background: var(--well); color: var(--muted); }
html.dark .status.new { background: var(--well); color: var(--text); } /* escuro: texto cheio, para manter o contraste */

/* ===== Números: uma fonte só, com algarismos de largura igual ===== */
.stat b, .count-box b, .play-hud #hud-left.hud-count b, .chip .n {
  font-family: inherit; font-variant-numeric: tabular-nums;
}
.stat b { font-weight: 800; }
.face .phon { font-family: inherit; font-variant-numeric: tabular-nums; }
.face .phon.back-word { font-size: calc(15px * var(--fs-study, 1)); font-weight: 600; color: var(--muted); }

/* ===== Áreas de toque de 44 px e respiro no fim das listas ===== */
.topbar .help-btn, #settings-toggle { width: 44px; height: 44px; }
#play-back, #study-back { min-height: 44px; padding: 12px 8px; }
/* o "+" flutuante não cobre o último card */
#view-words { padding-bottom: 88px; }

/* foco visível para quem usa o teclado */
.word-card:focus-visible, .word-item:focus-visible, .act-btn:focus-visible, .dir-toggle:focus-visible, .btn:focus-visible, .icon-btn:focus-visible, .key:focus-visible {
  outline: 3px solid var(--title); outline-offset: 2px;
}

/* botão em destaque no escuro: o texto usa a cor "sobre o destaque" do tema (a regra do escuro comum ganhava) */
html.dark .act-btn.primary:not(:disabled), html.dark .act-btn.primary:not(:disabled) .act-label { color: var(--on-accent); }

/* ===== Foco do teclado visível em tudo que se toca (o toque comum não mostra o anel) ===== */
:focus-visible { outline: 3px solid var(--title); outline-offset: 2px; }
.bbc-card:focus-visible, .bbc-open:focus-visible, .sheet-head .link-btn:focus-visible, .fab:focus-visible, .tabbar button:focus-visible,
.seg button:focus-visible, .chip:focus-visible, .key:focus-visible { outline: 3px solid var(--title); outline-offset: 2px; }
.fab:focus-visible { outline-color: var(--solid-border); outline-offset: 4px; }
/* a janela recebe o foco só para o leitor de tela e o Tab; sem anel nela */
#settings-panel:focus, #help:focus, #welcome:focus, #login:focus { outline: none; }

/* ===== Movimento reduzido: o que se mexe vira troca simples, mas a informação continua (cor, fade, texto) ===== */
@keyframes flash-soft { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  /* virar o card: troca direta, sem girar em 3D */
  .flashcard, .wc-inner { transition: none; }
  /* placar: pisca de leve em vez de crescer */
  .hud-score.bump, .play-hud .hud-score.bump, .play-hud .hud-center .hud-score.bump { animation: flash-soft .3s; }
  /* resposta errada: a cor vermelha do campo já avisa; não treme */
  .play-answer.bad { animation: none; }
  /* janelas de baixo e banner entram só com fade, sem deslizar */
  dialog.sheet[open] { animation: fade .15s ease-out; }
  .bbc-card.in-next, .bbc-card.in-prev { animation: fade .25s ease-out; }
  /* engrenagem e botões não giram/afundam em deslocamento grande; o estado (aberto, ligado) continua visível */
  #settings-toggle svg { transition: none; }
  .switch::after { transition: none; }
  /* a barra de tempo do banner avança aos saltos curtos em vez de deslizar continuamente */
  #bbc-bar.run { animation-timing-function: steps(20, end); }
}

/* ===== Áreas de toque de 44 px (sem mudar o tamanho visível) ===== */
.chart-filters .seg button { min-height: 44px; }
/* "Ler notícia": o link continua pequeno, mas a área de toque cresce para cima e para os lados */
.bbc-head .bbc-open { position: relative; z-index: 1; padding: 18px 8px 14px; margin: -18px -8px -14px auto; }
/* Configurações: abas, níveis (A1–C2) e ✕ com área de toque de pelo menos 44 px */
.settings-tabs button { min-height: 44px; }
.settings-panel .cefr .seg button { min-height: 44px; } /* só a altura cresce: a linha A1–C2 não cabe com 6 botões de 44 de largura */
.tour-again { min-height: 44px; }
.win-x, html:root .win-x { width: 44px; height: 38px; }
html.fullscreen .win-x { width: 46px; height: 42px; }

/* Cards de palavra: o selo de status nunca é cortado; se faltar espaço, é a classe (nome curto) que cede */
.wc-pos { flex: 1 1 auto; min-width: 0; max-width: none; }
.wc-top .status { flex: 0 0 auto; overflow: visible; }

/* Botão principal desativado (ex.: sem palavras): texto cinza legível, não branco sobre branco */
html .act-btn.primary:disabled, html .act-btn.primary:disabled .act-label { color: var(--muted); }
html .act-btn.primary:disabled .act-ic::after { background: var(--muted); }

/* ===== Gráficos: o grupo "Suas respostas" (filtros + números + gráficos) se separa de Progresso e Revisões ===== */
.group-title { margin: 30px 2px 10px; font-size: calc(18px * var(--fs-titles, 1)); font-weight: 800; color: var(--heading); }
/* os dois filtros lado a lado (um só bloco, em vez de duas linhas soltas) */
.chart-filters { grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; margin: 0 0 12px; }
.chart-filters .seg { flex-wrap: nowrap; }
.chart-filters .seg button { flex: 1; padding-left: 4px; padding-right: 4px; }
@media (max-width: 359px) { .chart-filters { grid-template-columns: 1fr; } }

/* ===== Aba Backup: zona de risco separada, botões de perigo em contorno (o vermelho cheio fica para a confirmação) ===== */
.btn.danger { background: linear-gradient(to bottom, #dc2626, #b91c1c); } /* texto branco com contraste AA */
.danger-zone { margin-top: 28px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--outline-border) 45%, transparent); }
.zone-title { margin: 0 0 12px; font-size: calc(13px * var(--fs-settings, 1)); font-weight: 800; letter-spacing: .02em; color: var(--title); }
.zone-item + .zone-item { margin-top: 18px; }
.zone-hint { margin: 8px 2px 0; font-size: calc(12px * var(--fs-settings, 1)); line-height: 1.4; color: var(--muted); }

/* ===== Tipografia: entrelinha de leitura, microtextos mais legíveis, quebras equilibradas ===== */
/* verso do card: frase de exemplo, definição e nota são texto corrido; precisam de entrelinha de leitura */
.face .def, .face .ex, .face .ex .ex-tr, .face .note { line-height: 1.4; }
.face .meaning { line-height: 1.25; }
/* títulos e palavras curtas quebram em linhas de tamanho parecido; textos longos evitam a última palavra sozinha */
.face .meaning, .wc-word, .big-word, .group-title, .panel h2 { text-wrap: balance; }
.face .def, .face .ex, .face .note, .settings-hint, .zone-hint, .chart-sub, .help-body p, .help-body li { text-wrap: pretty; }
/* o título do grupo "Suas respostas" fica um degrau acima dos títulos dos cards (18 px) */
.group-title { font-size: calc(20px * var(--fs-titles, 1)); }
/* microtextos: um pouco maiores nos cards (o espaço é pequeno; a fonte dos cards pode ser aumentada em Layout > Fonte) e 11 px nos gráficos */
.wc-pos { font-size: calc(10px * var(--fs-cards, 1)); }
.wc-top .status { font-size: calc(9px * var(--fs-words, 1)); }
.cols .grid span, .xlabels span, .hb-value small { font-size: calc(11px * var(--fs-charts, 1)); }

/* ===== Botões de nível (A1–C2): sombra e contorno do selecionado sempre neutros, iguais em todos os temas ===== */
.cefr .seg button { --sh3d: #374151; }                       /* claro: cinza escuro */
html.dark .cefr .seg button { --sh3d: #d4d4d8; }             /* escuro: cinza bem claro */
.cefr .seg button.on { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--sh3d); }
/* sem contorno nos botões de nível: a cor do nível preenche o botão (a borda fica transparente para o tamanho não mudar) */
html .cefr .seg button, html .cefr .seg button.on { border-color: transparent; }

/* ===== Selos de status das palavras: cores fixas, iguais em todos os temas (claros e escuros) ===== */
html .status.new { background: #dbeafe; color: #1e40af; }          /* Nova: azul */
html .status.learning { background: #fef3c7; color: #92400e; }     /* Aprendendo: âmbar */
html .status.mastered { background: #dcfce7; color: #166534; }     /* Dominada: verde */
html.dark .status.new { background: #1e3a8a; color: #dbeafe; }
html.dark .status.learning { background: #78350f; color: #fde68a; }
html.dark .status.mastered { background: #14532d; color: #bbf7d0; }

/* ===== Gráficos: Estudar/Jogo + botão de filtros na mesma linha (padrão do Estudar e do Jogar) ===== */
.chart-filters.dir-row { display: flex; gap: 10px; align-items: stretch; margin: 0 0 10px; }
.chart-filters.dir-row .seg { flex: 1; flex-wrap: nowrap; }
.chart-filters.dir-row .seg button { flex: 1; min-height: 52px; }
#charts-filters { margin: 0 0 12px; }
#charts-filters-toggle.on { background: linear-gradient(to bottom, var(--outline-from), var(--outline-to)); }

/* ===== Revisar tudo e Jogar: mesmo visual do botão selecionado (Clássico/Sobrevivência/Relógio): fundo claro do tema e contorno na cor dos títulos ===== */
html #study-setup .act-btn.primary:not(:disabled), html #play-setup .act-btn.primary:not(:disabled) {
  background: linear-gradient(to bottom, var(--outline-from), var(--outline-to));
  border-color: var(--title); color: var(--text);
  box-shadow: inset 0 0 0 2px var(--title), 3px 4px 0 color-mix(in srgb, var(--outline-border) 70%, #000);
}
html #study-setup .act-btn.primary:not(:disabled) .act-label, html #play-setup .act-btn.primary:not(:disabled) .act-label { color: var(--text); }
html #study-setup .act-btn.primary:not(:disabled) .act-ic::after, html #play-setup .act-btn.primary:not(:disabled) .act-ic::after { background: var(--title); }
html:not(.dark) #study-setup .act-btn.primary:not(:disabled), html:not(.dark) #play-setup .act-btn.primary:not(:disabled) { color: #000; }
html:not(.dark) #study-setup .act-btn.primary:not(:disabled) .act-label, html:not(.dark) #play-setup .act-btn.primary:not(:disabled) .act-label { color: #000; }
html.dark #study-setup .act-btn.primary:not(:disabled), html.dark #play-setup .act-btn.primary:not(:disabled) { background: color-mix(in srgb, var(--winbar) 30%, var(--card)); }

/* Configurações: sem barra de rolagem visível (a rolagem continua por mouse, toque e teclado). Assim a largura é a mesma em todas as abas
   e a barra de título vai até a borda, sem faixa branca ao lado do ✕ */
.settings-panel { scrollbar-width: none; -ms-overflow-style: none; }
.settings-panel::-webkit-scrollbar { display: none; }

/* ===== Aba Conta: nome, login e as ações da conta ===== */
.acct-name { margin: 0; font-size: calc(20px * var(--fs-settings, 1)); font-weight: 800; color: var(--heading); overflow-wrap: anywhere; }
.acct-login { margin: 2px 0 14px; font-size: calc(13px * var(--fs-settings, 1)); color: var(--muted); }
.acct-name:empty, .acct-login:empty { display: none; }
.acct-actions { display: grid; gap: 10px; }
.acct-actions .btn { margin: 0; }
.acct-panel { margin-top: 14px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--outline-border) 45%, transparent); }
/* Administração (só admins) fica separada, abaixo da conta */
.admin-title { margin: 26px 0 10px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--outline-border) 45%, transparent); }

/* ===== Boas-vindas: nome da conta embaixo do título e seletor de temas ===== */
.welcome-user { margin: -6px 0 6px; font-size: 20px; font-weight: 800; color: var(--heading); overflow-wrap: anywhere; }
.welcome-user:empty { display: none; }
.welcome #welcome-theme { width: 100%; margin-bottom: 4px; }
/* nome da conta na boas-vindas: mesma fonte, tamanho, peso e cor do título "Bem-vindo ao Flip Wise!" */
.welcome .welcome-user { margin: 0 0 4px; font-size: 24px; font-weight: 700; color: var(--title); line-height: normal; }



/* Admin: nome e login logo acima da Administração, sem o vão dos botões que não existem para ele */
.account-box.is-admin .acct-actions { display: none; }
.account-box.is-admin .acct-login { margin-bottom: 0; }
.account-box.is-admin + #admin-area .admin-title { margin-top: 14px; padding-top: 12px; }