/* ==========================================================================
   jF12 — Vocabulário AIDA · stylesheet v2 "Studio Dark"
   Identidade visual herdada do iF12 (casca Studio Dark).
   Sistema dark-default + light negativo coerente.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS — DARK (padrão)
   -------------------------------------------------------------------------- */
:root {
  /* tipografia */
  --font-display: Anton, "Helvetica Neue", Impact, sans-serif;
  --font-bebas:   "Bebas Neue", "Helvetica Neue", Impact, sans-serif;
  --font-bungee:  Bungee, "Helvetica Neue", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-sans:    Inter, system-ui, -apple-system, "Segoe UI", sans-serif;

  --font-scale: 1;

  /* paleta — neutros (DARK) */
  --canvas:        #0B1026;
  --surface:       #121936;
  --card:          #1A2244;
  --card-elev:     #222B52;
  --border-subtle: #222B52;
  --border-medium: #313C68;
  --border-strong: #46527F;

  /* texto (DARK) */
  --text-primary:   #EEF2FA;
  --text-secondary: #AEB6CC;
  --text-muted:     #6B7280;
  --text-on-accent: #FFFFFF;

  /* acentos */
  /* jF12: os nomes --orange* ficaram do iF12; os valores são o azul do jF12 */
  --orange:        #29A7F5;
  --orange-pink:   #6CC2FF;
  --orange-deep:   #1F6FE0;
  --magenta:       #FF4D9C;
  --emerald:       #2BB673;
  --amber:         #E5A030;

  /* badges idiomas (DARK) */
  --es-bg:     #2A1812;
  --es-text:   #F5C4A5;
  --es-border: #4A2818;

  --en-bg:     #1A2440;
  --en-text:   #A8C0E8;
  --en-border: #2E3D5E;

  /* status (DARK) */
  --status-empty:   #3A4252;
  --status-learning:#E5A030;
  --status-review:  #FF8C42;
  --status-known:   #2BB673;
  --status-unknown: #C9281C;

  /* contextos especiais (DARK) */
  --similar-bg:     #14281C;
  --similar-text:   #6FE0A0;
  --similar-border: #235A38;

  --practice-bg:    #2A2410;
  --practice-text:  #E5C770;
  --practice-border:#4A3D17;

  --section-bg:     #121936;
  --section-text:   #A9C4F0;
  --section-border: var(--orange);

  --danger-bg:      #2A1115;
  --danger-text:    #F5A0A0;
  --danger-border:  #5A2020;

  --info-bg:        #1A2440;
  --info-text:      #A8C0E8;
  --info-border:    #2E3D5E;

  /* gradientes */
  --grad-cta:        linear-gradient(135deg, #1F6FE0, #1A23A0);
  --grad-cta-hover:  linear-gradient(135deg, #2380E8, #1F6FE0);
  --grad-strip:      linear-gradient(90deg, #1F6FE0, #1A23A0);
  --grad-stage:      radial-gradient(80% 60% at 50% 0%, #16307A, #0B1026 65%);

  /* glows */
  --glow-orange:  0 0 32px -4px rgba(41, 167, 245, 0.55);
  --glow-emerald: 0 0 20px -4px rgba(43, 182, 115, 0.45);
  --glow-magenta: 0 0 24px -4px rgba(255, 77, 156, 0.35);

  /* radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* sombras */
  --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.4);
  --shadow-elev: 0 12px 40px rgba(0,0,0,0.5);

  font-size: calc(16px * var(--font-scale));
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. TOKENS — LIGHT (negativo coerente)
   Mantém coral/orange igual, inverte canvas/text e adapta superfícies.
   -------------------------------------------------------------------------- */
html[data-theme="light"] {
  --canvas:        #F3F6FC;
  --surface:       #FFFFFF;
  --card:          #F8FAFE;
  --card-elev:     #EAF0FA;
  --border-subtle: #DCE3F0;
  --border-medium: #BAC6DD;
  --border-strong: #8E9BB8;

  --text-primary:   #0E1430;
  --text-secondary: #454D66;
  --text-muted:     #6B7280;
  --text-on-accent: #FFFFFF;

  /* acentos: orange igual */
  --orange:        #1F63D8;      /* mais fechado que o do escuro: contraste de texto no fundo claro */
  --orange-pink:   #2380E8;
  --orange-deep:   #14208A;
  --magenta:       #C9237A;
  --emerald:       #1E8A4D;
  --amber:         #B07810;

  --es-bg:     #FAECE7;
  --es-text:   #712B13;
  --es-border: #E8C4B5;

  --en-bg:     #E0E7F5;
  --en-text:   #1E3A8A;
  --en-border: #B8C8E6;

  --status-empty:   #D4D2C8;
  --status-learning:#B07810;
  --status-review:  #FF8C42;
  --status-known:   #1E8A4D;
  --status-unknown: #9C3010;

  --similar-bg:     #E8F2DC;
  --similar-text:   #2c6e2c;
  --similar-border: #C5DDA8;

  --practice-bg:    #FFF4D9;
  --practice-text:  #815C03;
  --practice-border:#E5C770;

  --section-bg:     #F1F5FC;
  --section-text:   #2A3A6A;
  --section-border: var(--orange);

  --danger-bg:      #FCEBEB;
  --danger-text:    #A32D2D;
  --danger-border:  #E8B8B8;

  --info-bg:        #E0E7F5;
  --info-text:      #1E3A8A;
  --info-border:    #B8C8E6;

  --grad-cta:        linear-gradient(135deg, #1F6FE0, #1A23A0);
  --grad-cta-hover:  linear-gradient(135deg, #2380E8, #1F6FE0);
  --grad-strip:      linear-gradient(90deg, #1F6FE0, #1A23A0);
  --grad-stage:      radial-gradient(80% 60% at 50% 0%, rgba(41,167,245,.10) 0%, #FFFFFF 35%, #F3F6FC 100%);

  --glow-orange:  0 0 24px -6px rgba(41, 167, 245, 0.35);
  --glow-emerald: 0 0 16px -6px rgba(30, 138, 77, 0.3);
  --glow-magenta: 0 0 20px -6px rgba(201, 35, 122, 0.25);

  --shadow-card: 0 1px 0 rgba(255,255,255,0.6) inset, 0 4px 16px rgba(24,29,38,0.08);
  --shadow-elev: 0 12px 40px rgba(24,29,38,0.15);

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   3. RESET + BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--canvas);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* aplica o gradient radial sutil de palco no topo */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--grad-stage);
  z-index: -2;
  pointer-events: none;
}

/* rim glows fixos — sutis */
body::after {
  content: "";
  position: fixed;
  top: -120px; right: -120px;
  width: 520px; height: 520px;
  background: var(--magenta);
  border-radius: 50%;
  filter: blur(200px);
  opacity: 0.06;
  z-index: -1;
  pointer-events: none;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }
a { color: var(--orange); text-decoration: none; }
a:hover { color: var(--orange-pink); }
img, svg { display: block; max-width: 100%; }

/* selection */
::selection { background: var(--orange); color: var(--text-on-accent); }

/* scrollbar */
.nice-scroll::-webkit-scrollbar,
body::-webkit-scrollbar,
.content::-webkit-scrollbar { width: 10px; height: 10px; }
.nice-scroll::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.content::-webkit-scrollbar-track { background: transparent; }
.nice-scroll::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.content::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: var(--r-pill); }
.nice-scroll::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.content::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* --------------------------------------------------------------------------
   4. UTILITÁRIOS DE TIPOGRAFIA
   -------------------------------------------------------------------------- */
.font-display { font-family: var(--font-display); }
.font-bebas   { font-family: var(--font-bebas); }
.font-bungee  { font-family: var(--font-bungee); }
.font-mono    { font-family: var(--font-mono); }
.font-sans    { font-family: var(--font-sans); }

/* eyebrow — comentário estilo IDE */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  text-transform: lowercase;
  margin: 0 0 0.5rem;
}
.eyebrow::before { content: "// "; opacity: 0.65; }

/* code-line — frase highlighted como código (AIDA structure) */
.code-line {
  font-family: var(--font-mono);
  font-size: 0.94rem;
  color: var(--orange);
  letter-spacing: 0.02em;
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   5. CONTAINER + DECORAÇÃO
   -------------------------------------------------------------------------- */
.container {
  max-width: 920px;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 4rem;
  position: relative;
  z-index: 1;
}

/* layer dos triângulos de wireframe (controlado via JS) */
#bg-triangles {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   6. HEADER
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--canvas);
  margin: -1.25rem -1.25rem 1.5rem;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s, backdrop-filter 0.2s;
}
body.scrolled .header {
  background: color-mix(in oklab, var(--canvas) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom-color: var(--border-subtle);
}

/* faixa laranja sob o header — sempre presente */
.header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--grad-strip);
  opacity: 0.7;
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}
.brand-logo {
  height: 1.85rem;
  width: auto;
  color: var(--text-primary);   /* o SVG usa currentColor pras letras */
  flex-shrink: 0;
}
.brand-tag {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  padding-left: 0.85rem;
  border-left: 1px solid var(--border-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-actions { display: flex; gap: 0.35rem; align-items: center; }

/* --------------------------------------------------------------------------
   7. TABS
   -------------------------------------------------------------------------- */
.tabs {
  display: flex;
  gap: 0.15rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  align-items: stretch;
  position: sticky;
  /* top é ajustado por JS conforme altura real do header */
  z-index: 40;
  background: var(--canvas);
  padding-top: 0.25rem;
}
.tab {
  padding: 0.75rem 0.95rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.tab:hover { color: var(--text-primary); }
.tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--orange);
}
.tab.right { margin-left: auto; }
.tab-badge {
  background: var(--orange-deep);
  color: var(--text-on-accent);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: var(--r-pill);
  min-width: 1.15rem;
  text-align: center;
}

/* --------------------------------------------------------------------------
   8. BOTÕES
   -------------------------------------------------------------------------- */
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: var(--grad-cta);
  color: var(--text-on-accent);
  font-family: var(--font-bebas);
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  padding: 0.85rem 1.65rem;
  border-radius: var(--r-md);
  box-shadow: var(--glow-orange), inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.18), 0 3px 8px rgba(0,0,0,.35);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
  text-transform: uppercase;
}
.btn-cta:hover {
  background: var(--grad-cta-hover);
  transform: translateY(-1px);
  box-shadow: 0 0 48px -4px rgba(41, 167, 245, 0.7), inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.4);
}
.btn-cta:active { transform: translateY(0); }
.btn-cta i { font-size: 1.1rem; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
  font-family: var(--font-bebas);
  font-size: 1rem;
  letter-spacing: 0.06em;
  padding: 0.65rem 1.25rem;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all 0.15s;
  text-transform: uppercase;
}
.btn-outline:hover {
  background: var(--surface);
  border-color: var(--text-secondary);
  color: var(--text-primary);
}

/* botão de ícone (header) */
.icon-btn {
  width: 2.1rem; height: 2.1rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-secondary);
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}
.icon-btn:hover {
  background: var(--surface);
  color: var(--text-primary);
  border-color: var(--border-medium);
}
.icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.icon-btn:disabled:hover { background: transparent; color: var(--text-secondary); border-color: var(--border-subtle); }
.icon-btn.active {
  background: color-mix(in oklab, var(--orange) 18%, transparent);
  color: var(--orange-pink);
  border-color: var(--orange);
}
.font-btn { width: auto; padding: 0 0.55rem; gap: 0.1rem; }
.font-btn .font-letter { font-weight: 700; font-size: 0.94rem; line-height: 1; }
.font-btn .font-sign { font-size: 0.78rem; }

/* --------------------------------------------------------------------------
   9. FORMS
   -------------------------------------------------------------------------- */
input, select, textarea {
  background: var(--surface);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  padding: 0.55rem 0.7rem;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.94rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--orange) 25%, transparent);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }

/* --------------------------------------------------------------------------
   10. CONTROLS / FILTER PILLS
   -------------------------------------------------------------------------- */
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  align-items: center;
}
.controls-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: 0.25rem;
  font-weight: 500;
}
.search-input { flex: 1; min-width: 11rem; }

.filter-pill {
  padding: 0.4rem 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  text-transform: lowercase;
}
.filter-pill:hover { border-color: var(--border-medium); color: var(--text-primary); }
.filter-pill.active {
  background: color-mix(in oklab, var(--orange) 18%, transparent);
  color: var(--orange-pink);
  border-color: var(--orange);
}

/* --------------------------------------------------------------------------
   11. STATS / PROGRESS BARS
   -------------------------------------------------------------------------- */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.stat-card {
  background: var(--card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 0.85rem 0.9rem;
  transition: border-color 0.15s, transform 0.15s;
}
.stat-card.stat-due { cursor: pointer; }
.stat-card.stat-due:hover {
  border-color: var(--orange);
  transform: translateY(-1px);
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-secondary);
  text-transform: lowercase;
  letter-spacing: 0.06em;
  margin: 0;
}
.stat-value {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  margin: 0.2rem 0 0;
  line-height: 1;
  color: var(--text-primary);
}

.cat-bars {
  margin-bottom: 1.5rem;
  padding: 1rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
}
.cat-bar { margin-bottom: 0.65rem; }
.cat-bar:last-child { margin-bottom: 0; }
.cat-bar.progress-summary { margin-bottom: 0; cursor: pointer; user-select: none; }
.cat-bar.progress-summary:hover .progress-chevron { color: var(--text-primary); }
.progress-chevron {
  color: var(--text-muted);
  font-size: 1rem;
  vertical-align: middle;
  transition: color 0.15s, transform 0.2s;
  margin-left: 4px;
}
.cat-bar-details {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-subtle);
}
.cat-bar-details .cat-bar:last-child { margin-bottom: 0; }
.progress-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-bottom: 0.85rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.legend-item strong { color: var(--text-primary); }
.legend-dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block;
}
.legend-note {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}
.cat-bar-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  margin-bottom: 0.3rem;
}
.cat-bar-name { color: var(--text-primary); font-weight: 500; }
.cat-bar-count {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}
.cat-bar-track {
  position: relative;
  height: 0.4rem;
  background: var(--canvas);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  overflow: hidden;
  display: flex;
}
.cat-bar-fill { height: 100%; transition: width 0.3s; }
.cat-bar-fill.consolidated { background: var(--status-known); }
.cat-bar-fill.learning { background: var(--status-learning); }

/* --------------------------------------------------------------------------
   12. SECTION DIVIDER
   -------------------------------------------------------------------------- */
.section-divider {
  margin: 1.5rem 0 0.9rem;
  padding: 0.7rem 0.95rem;
  background: var(--section-bg);
  color: var(--section-text);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--section-border);
  border-radius: var(--r-sm);
  font-family: var(--font-bebas);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.section-divider i { font-size: 1.05rem; opacity: 0.8; color: var(--orange); }

/* --------------------------------------------------------------------------
   13. WORD CARD
   -------------------------------------------------------------------------- */
.words-group { display: flex; flex-direction: column; gap: 0.6rem; }

.word-card {
  padding: 1rem 1.05rem;
  background: var(--card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.word-card:hover {
  border-color: var(--border-medium);
}
.word-card.expanded { cursor: default; }
.word-card.similar { border-left: 3px solid var(--similar-border); }
.word-card.practice { border-left: 3px solid var(--practice-border); }
.word-card.due {
  box-shadow: 0 0 0 1px var(--status-review), 0 0 18px -6px var(--status-review);
}

.word-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}
.word-main { flex: 1; min-width: 0; }
.word-en-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* a palavra EN é display Anton — peso de cartaz, calibrada pro tamanho de card */
.word-en {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  line-height: 1;
  text-transform: uppercase;
}
.word-pron {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--es-text);
  background: var(--es-bg);
  border: 1px solid var(--es-border);
  padding: 0.18rem 0.55rem;
  border-radius: var(--r-sm);
  letter-spacing: 0.04em;
}
.word-es {
  font-family: var(--font-sans);
  font-size: 0.98rem;
  color: var(--text-secondary);
  margin-top: 0.35rem;
}
.word-actions {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  flex-shrink: 0;
}

/* status dot blindado */
.status-indicator {
  width: 14px !important; height: 14px !important;
  min-width: 14px; min-height: 14px;
  max-width: 14px; max-height: 14px;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  flex-shrink: 0; flex-grow: 0;
  margin-right: 6px; padding: 0;
  box-sizing: border-box; overflow: visible;
}
.status-dot {
  width: 12px !important; height: 12px !important;
  min-width: 12px; min-height: 12px;
  max-width: 12px; max-height: 12px;
  border-radius: 50%;
  display: inline-block !important;
  background: var(--status-empty);
  flex-shrink: 0; flex-grow: 0;
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.18);
  box-sizing: border-box;
  padding: 0; margin: 0;
}
.status-dot.empty    { background: var(--status-empty); }
.status-dot.learning { background: var(--status-learning); }
.status-dot.review   { background: var(--status-review); }
.status-dot.known    { background: var(--status-known); }
.status-dot.unknown  { background: var(--status-unknown); }

/* --------------------------------------------------------------------------
   14. BADGES
   -------------------------------------------------------------------------- */
.badge {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid transparent;
}
.badge.similar   { background: var(--similar-bg); color: var(--similar-text); border-color: var(--similar-border); }
.badge.practice  { background: var(--practice-bg); color: var(--practice-text); border-color: var(--practice-border); }
.badge.explained { background: var(--en-bg); color: var(--en-text); border-color: var(--en-border); }
.badge.pending   { background: var(--card-elev); color: var(--text-muted); border: 1px dashed var(--border-medium); }
.badge.ai-draft  { background: #2A1F40; color: #C8B3F0; border-color: #4A3A6E; }

html[data-theme="light"] .badge.ai-draft { background: #ECE6FA; color: #5D38A0; border-color: #C7B8EC; }

/* --------------------------------------------------------------------------
   15. AIDA BLOCK (revelado ao expandir o card)
   -------------------------------------------------------------------------- */
.aida-block {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border-subtle);
  display: none;
}
.word-card.expanded .aida-block { display: block; }

.aida-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}
.aida-img-box {
  padding: 0.75rem 0.85rem;
  border-radius: var(--r-sm);
  font-size: 0.95rem;
  line-height: 1.5;
  border: 1px solid;
}
.aida-img-es {
  background: var(--es-bg);
  color: var(--es-text);
  border-color: var(--es-border);
}
.aida-img-en {
  background: var(--en-bg);
  color: var(--en-text);
  border-color: var(--en-border);
}
.aida-img-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.aida-narrative {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-primary);
  padding: 0.8rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--orange);
  border-radius: var(--r-sm);
}
.aida-narrative-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-bottom: 0.3rem;
}

.aida-note {
  font-size: 0.92rem;
  padding: 0.85rem 0.95rem;
  border-radius: var(--r-sm);
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  line-height: 1.55;
}
.aida-note > .ti {
  flex-shrink: 0;
  margin-top: 0.15rem;
  font-size: 1.05rem;
}

.reveal-btn {
  margin-top: 0.6rem;
  padding: 0.45rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  background: var(--surface);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.reveal-btn:hover {
  background: var(--orange);
  color: var(--text-on-accent);
  border-color: var(--orange);
}
.reveal-btn.hide-btn {
  margin-top: 0.9rem;
  background: transparent;
  color: var(--text-muted);
  border-style: dashed;
}
.reveal-btn.hide-btn:hover {
  background: var(--surface);
  color: var(--text-primary);
  border-color: var(--border-medium);
}

.similar-note {
  background: var(--similar-bg);
  color: var(--similar-text);
  border-left: 3px solid var(--similar-border);
}
.practice-note {
  background: var(--practice-bg);
  color: var(--practice-text);
  border-left: 3px solid var(--practice-border);
  flex-direction: column;
  align-items: flex-start;
}
.practice-note-inner {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
}
.practice-note .ti-info-circle {
  color: var(--practice-text);
  font-size: 1.15rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.pending-note {
  background: var(--surface);
  color: var(--text-muted);
  border-left: 3px solid var(--border-medium);
  font-style: italic;
}

/* banner ai-draft */
.ai-draft-banner {
  padding: 0.75rem 0.95rem;
  background: #2A1F40;
  color: #C8B3F0;
  border: 1px solid #4A3A6E;
  border-left: 3px solid #8B5DC8;
  border-radius: var(--r-sm);
  font-size: 0.88rem;
  margin-bottom: 0.7rem;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  line-height: 1.5;
}
.ai-draft-banner > .ti {
  flex-shrink: 0;
  margin-top: 0.15rem;
  font-size: 1.05rem;
}
html[data-theme="light"] .ai-draft-banner {
  background: #ECE6FA;
  color: #5D38A0;
  border-color: #C7B8EC;
}

/* mark buttons dentro do card AIDA */
.word-marks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 0.85rem;
}
.mark-btn {
  padding: 0.7rem 0.5rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-subtle);
  background: var(--surface);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}
.mark-btn:hover { background: var(--card-elev); }
.mark-btn.danger { color: var(--status-unknown); }
.mark-btn.warn   { color: var(--status-review); }
.mark-btn.good   { color: var(--status-known); }
.mark-btn.selected { border-width: 1.5px; }
.mark-btn.selected.danger {
  border-color: var(--status-unknown);
  background: color-mix(in oklab, var(--status-unknown) 12%, transparent);
}
.mark-btn.selected.warn {
  border-color: var(--status-review);
  background: color-mix(in oklab, var(--status-review) 12%, transparent);
}
.mark-btn.selected.good {
  border-color: var(--status-known);
  background: color-mix(in oklab, var(--status-known) 12%, transparent);
}

/* --------------------------------------------------------------------------
   16. ESTADOS VAZIOS / LOADING / ERROR
   -------------------------------------------------------------------------- */
.empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.9rem;
}
.empty::before { content: "// "; opacity: 0.6; }

.loading-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-secondary);
}
.loading-state .ti {
  font-size: 2rem;
  opacity: 0.5;
}

.error-state {
  text-align: center;
  padding: 1.5rem;
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  border-radius: var(--r-md);
  margin: 1rem 0;
  border-left: 3px solid var(--status-unknown);
}
.error-state h3 {
  margin: 0 0 0.5rem;
  color: var(--danger-text);
  font-family: var(--font-bebas);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.error-state p {
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.55;
}
.error-state code {
  font-family: var(--font-mono);
  background: var(--surface);
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-size: 0.78rem;
  color: var(--orange-pink);
}

/* --------------------------------------------------------------------------
   17. FLASHCARDS
   -------------------------------------------------------------------------- */
/* ghost number atrás do flashcard — fica ao lado do card, opacidade baixa */
.flash-stage {
  perspective: 75rem;
  margin-bottom: 1.25rem;
  position: relative;
  /* permite que o ghost number vaze para a direita visualmente */
}
.flash-stage::before {
  content: attr(data-ghost);
  position: absolute;
  font-family: var(--font-bungee), Impact, "Arial Black", sans-serif;
  font-weight: 900;
  font-size: clamp(180px, 32vw, 360px);
  line-height: 0.85;
  color: var(--text-primary);
  opacity: 0.07;
  /* posiciona o ghost à direita, transbordando do card */
  right: -16%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.04em;
  white-space: nowrap;
}
html[data-theme="light"] .flash-stage::before {
  opacity: 0.05;
}
@media (max-width: 720px) {
  /* em telas estreitas, o ghost some — não cabe ao lado */
  .flash-stage::before { display: none; }
}

.flash-card-3d {
  position: relative;
  width: 100%;
  min-height: 18rem;
  transition: transform 0.55s cubic-bezier(0.4, 0.0, 0.2, 1);
  transform-style: preserve-3d;
  cursor: pointer;
  z-index: 1;
}
.flash-card-3d.flipped { transform: rotateY(180deg); }

/* swipe animations */
.flash-card-3d.swipe-right {
  animation: cardSwipeRight 0.35s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  pointer-events: none;
}
.flash-card-3d.swipe-left {
  animation: cardSwipeLeft 0.35s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  pointer-events: none;
}
.flash-card-3d.zoom-back {
  animation: cardZoomBack 0.35s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
  pointer-events: none;
}
.flash-card-3d.entering {
  animation: cardEnter 0.28s cubic-bezier(0.4, 0.0, 0.2, 1) backwards;
}
@keyframes cardSwipeRight {
  0%   { transform: translateX(0) rotate(0); opacity: 1; }
  100% { transform: translateX(120%) rotate(8deg); opacity: 0; }
}
@keyframes cardSwipeLeft {
  0%   { transform: translateX(0) rotate(0); opacity: 1; }
  100% { transform: translateX(-120%) rotate(-8deg); opacity: 0; }
}
@keyframes cardZoomBack {
  0%   { transform: scale(1) translateY(0); opacity: 1; }
  100% { transform: scale(0.55) translateY(-3rem); opacity: 0; }
}
@keyframes cardEnter {
  0%   { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.flash-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  box-shadow: var(--shadow-card);
}
.flash-face-back { transform: rotateY(180deg); }

.flash-corner-hint {
  position: absolute;
  top: 0.85rem;
  right: 0.95rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  pointer-events: none;
}

.flash-stage-label {
  position: absolute;
  top: 0.85rem;
  left: 0.95rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: lowercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}
.flash-stage-label::before { content: "// "; opacity: 0.6; }

.flash-front-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.15rem;
  padding-top: 0.75rem;
}
.flash-badges {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: center;
}
.flash-en-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* a palavra-display do flashcard — monumental */
.flash-en {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 9vw, 4.5rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.9;
  color: var(--text-primary);
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 3px 12px rgba(0,0,0,0.4);
}
html[data-theme="light"] .flash-en {
  text-shadow: none;
}

.flash-pron-big {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  /* romaji = som japonês: cores do japonês (--en-*) */
  color: var(--en-text);
  background: var(--en-bg);
  padding: 0.3rem 0.95rem;
  border-radius: var(--r-sm);
  letter-spacing: 0.06em;
  border: 1px solid var(--es-border);
}

.flash-back-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  overflow-y: auto;
  padding-top: 1.75rem;
}
.flash-es-big {
  font-family: var(--font-bebas);
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  letter-spacing: 0.04em;
  color: var(--text-primary);
  text-align: center;
  padding: 0.25rem 0;
  text-transform: uppercase;
}

.flash-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
  margin-bottom: 0.85rem;
}
.flash-btn {
  padding: 0.9rem 0.5rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-subtle);
  background: var(--surface);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
  transition: all 0.15s;
}
.flash-btn:hover {
  background: var(--card-elev);
  transform: translateY(-1px);
}
.flash-btn.danger { color: var(--status-unknown); }
.flash-btn.warn   { color: var(--status-review); }
.flash-btn.good   { color: var(--status-known); }

.flash-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}
.nav-btn {
  padding: 0.5rem 0.85rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-subtle);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  transition: all 0.15s;
}
.nav-btn:hover {
  background: var(--surface);
  border-color: var(--border-medium);
}

.aida-hidden-msg {
  padding: 0.95rem;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--status-review);
  border-radius: var(--r-sm);
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.aida-hidden-msg .ti-eye-off {
  color: var(--status-review);
  margin-right: 0.25rem;
}

/* --------------------------------------------------------------------------
   18. HOY
   -------------------------------------------------------------------------- */
.hoy-meta {
  padding: 0.85rem 0.95rem;
  background: var(--card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  margin-bottom: 1.25rem;
  font-size: 0.94rem;
}
.hoy-empty {
  padding: 2.75rem 1rem;
  text-align: center;
  color: var(--text-secondary);
}
.hoy-empty .ti {
  font-size: 2.5rem;
  color: var(--status-known);
  display: block;
  margin-bottom: 0.55rem;
}

/* --------------------------------------------------------------------------
   19. TIPS — "Cómo crear AIDA"
   -------------------------------------------------------------------------- */
.tip-section { margin-bottom: 3rem; }
.tip-section h2 {
  font-family: var(--font-bebas);
  font-size: 2.5rem;
  margin: 0 0 0.5rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--text-primary);
}
.tip-section h3 {
  font-family: var(--font-bebas);
  font-size: 1.35rem;
  margin: 0 0 0.85rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.tip-section p {
  margin: 0 0 0.85rem;
  font-size: 0.96rem;
  line-height: 1.7;
  color: var(--text-primary);
}
.tip-subtitle {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-bottom: 0.85rem;
}
.tip-hint {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  margin: 1.5rem 0 2.25rem;
}
.principle {
  background: var(--card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  overflow: hidden;
  border-top: 3px solid var(--orange);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, border-color 0.15s;
}
.principle:hover {
  transform: translateY(-2px);
  border-color: var(--border-medium);
}
.principle-image-placeholder {
  aspect-ratio: 1 / 1;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
}
.principle-image-placeholder img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  pointer-events: none;
  user-select: none;
}
.principle-image-placeholder.empty {
  padding: 1rem;
  text-align: center;
  font-style: italic;
}
.principle-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.principle-letter {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--orange);
  line-height: 1;
}
.principle-body strong {
  font-family: var(--font-bebas);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
  font-weight: 400;
}
.principle-body p {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

.example {
  padding: 0.7rem 0.85rem;
  border-radius: var(--r-sm);
  margin: 0.45rem 0;
  font-size: 0.88rem;
  line-height: 1.55;
}
.example-good {
  background: var(--similar-bg);
  color: var(--similar-text);
  border-left: 3px solid var(--similar-border);
}
.example-bad {
  background: var(--danger-bg);
  color: var(--danger-text);
  border-left: 3px solid var(--danger-border);
}
.example-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.25rem;
  opacity: 0.85;
}

.structure-examples {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-top: 1.15rem;
  align-items: start; /* card não estica para a linha — cresce com o conteúdo */
}
.structure-card {
  background: var(--card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  overflow: hidden;
  border-top: 3px solid var(--similar-border);
}
.structure-card.bad { border-top-color: var(--danger-border); }
.structure-image-placeholder {
  aspect-ratio: 1 / 1;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 1rem;
  text-align: center;
  font-style: italic;
  border-bottom: 1px solid var(--border-subtle);
}
.structure-image-placeholder img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  pointer-events: none;
  user-select: none;
}
.structure-card-body {
  padding: 0.85rem;
  font-size: 0.88rem;
  line-height: 1.55;
}
.structure-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.45rem;
}
.structure-label.good { color: var(--similar-text); }
.structure-label.bad  { color: var(--danger-text); }

.error-card {
  background: var(--card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 0.85rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.error-card-image {
  aspect-ratio: 4 / 5;
  width: 100%;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
  font-style: italic;
  padding: 1rem;
  text-align: center;
  overflow: hidden;
}
.error-card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  pointer-events: none;
  user-select: none;
  display: block;
}
.error-card-body { padding: 1rem 1.15rem; }

/* Em desktop / telas largas, imagem lado a lado com o texto */
@media (min-width: 640px) {
  .error-card {
    grid-template-columns: 200px 1fr;
  }
  .error-card-image {
    width: 200px;
    border-bottom: none;
    border-right: 1px solid var(--border-subtle);
    align-self: stretch;
  }
  .error-card-body {
    padding: 1.15rem 1.4rem;
  }
}

.error-title {
  font-family: var(--font-bebas);
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.55rem;
  color: var(--text-primary);
}
.error-why {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 0.5rem;
  letter-spacing: 0.02em;
}

.tip-item {
  background: var(--card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 0.85rem 0.95rem;
  margin-bottom: 0.55rem;
}
.tip-item strong {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-bebas);
  font-size: 1.02rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
  font-weight: 400;
}
.tip-item p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.55rem;
}
.chip {
  padding: 0.3rem 0.7rem;
  background: var(--surface);
  color: var(--text-primary);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  border: 1px solid var(--border-subtle);
}

.tool-card {
  background: var(--card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: 1rem;
  margin-bottom: 0.85rem;
}

/* --------------------------------------------------------------------------
   20. SETTINGS / MODAIS
   -------------------------------------------------------------------------- */
.settings-section {
  background: var(--card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.settings-section h3 {
  font-family: var(--font-bebas);
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 0.85rem;
  font-weight: 400;
  color: var(--text-primary);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in oklab, var(--canvas) 80%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 1rem;
}
.modal-content {
  background: var(--surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--r-lg);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.5rem;
  box-shadow: var(--shadow-elev);
}
.modal-content h2 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1;
}

/* --------------------------------------------------------------------------
   21. ANIMAÇÕES UTILITÁRIAS
   -------------------------------------------------------------------------- */
@keyframes blurReveal {
  0%   { opacity: 0; filter: blur(14px); transform: translateY(8px); }
  100% { opacity: 1; filter: blur(0);    transform: translateY(0); }
}
.blur-text > * {
  opacity: 0;
  display: inline-block;
  animation: blurReveal 0.6s ease-out forwards;
}
.blur-text > *:nth-child(1) { animation-delay: 0.05s; }
.blur-text > *:nth-child(2) { animation-delay: 0.15s; }
.blur-text > *:nth-child(3) { animation-delay: 0.25s; }
.blur-text > *:nth-child(4) { animation-delay: 0.35s; }

@keyframes fadeUp {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.45s ease-out both; }

/* triângulos giram suavemente no scroll (controlado via JS) */
.bg-triangle {
  position: absolute;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

/* --------------------------------------------------------------------------
   22. PRINT — bloco único; regido por body.printing (ver doPrint em app.js)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   23. RESPONSIVO
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .container { padding: 1rem 0.85rem 3rem; }
  .header { margin: -1rem -0.85rem 1rem; padding: 0.85rem 1rem; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .principles { grid-template-columns: 1fr; }
  .structure-examples { grid-template-columns: 1fr; }
  .aida-images { grid-template-columns: 1fr; }
  .word-en { font-size: 1.45rem; }
  .flash-en { font-size: clamp(2.2rem, 12vw, 3.2rem); }
  .brand-tag { display: none; }
  .tab { padding: 0.65rem 0.7rem; font-size: 0.78rem; }
}

/* prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .bg-triangle { transition: none; }
}

/* ============================================================
 * DAILY PLAN — onboarding, header de Hoy, chips, completed state
 * ============================================================ */

/* --- Onboarding (primeira visita ao Hoy) --- */
.plan-onboarding {
  padding: 1rem 0 2rem;
  max-width: 640px;
  margin: 0 auto;
}
.plan-onboarding-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 7vw, 3.6rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 0.5rem 0 1.25rem;
  font-weight: 400;
}
.plan-onboarding-sub {
  color: var(--text-secondary);
  font-size: 0.98rem;
  line-height: 1.65;
  margin: 0 0 1.75rem;
  max-width: 540px;
}
.plan-onboarding-foot {
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.plan-onboarding-foot::before { content: "// "; opacity: 0.55; }

.goal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 540px) {
  .goal-grid { grid-template-columns: 1fr; }
}
.goal-pill {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 1.4rem 1rem;
  background: var(--card, var(--bg-muted));
  border: 1.5px solid var(--border-subtle);
  border-radius: 14px;
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, background 0.15s, box-shadow 0.15s;
  font-family: var(--font-sans, inherit);
}
.goal-pill:hover {
  border-color: var(--orange);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px -10px color-mix(in oklab, var(--orange) 40%, transparent);
}
.goal-pill.recommended {
  border-color: var(--orange);
  background: color-mix(in oklab, var(--orange) 10%, var(--card, var(--bg-muted)));
  box-shadow: 0 6px 18px -8px color-mix(in oklab, var(--orange) 35%, transparent);
}
.goal-pill-num {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--orange);
  font-weight: 400;
  letter-spacing: -0.02em;
}
.goal-pill-lbl {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--text-secondary);
  margin-top: 0.15rem;
}
.goal-pill-tag {
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: var(--orange);
  text-transform: lowercase;
}
.goal-pill-tag::before { content: "★ "; }

.goal-custom-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  padding: 1rem 0 0;
  border-top: 1px dashed var(--border-subtle);
}
.goal-custom-row label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}
.goal-custom-row label::before { content: "// "; opacity: 0.55; }
.goal-custom-row input {
  width: 110px;
  padding: 0.65rem 0.85rem;
  background: var(--surface, var(--bg-surface));
  border: 1.5px solid var(--border-subtle);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  transition: border-color 0.15s;
}
.goal-custom-row input:focus {
  outline: none;
  border-color: var(--orange);
}

/* --- Header de Hoy (com plano configurado) --- */
.plan-header {
  margin: 0 0 1.25rem;
}
.plan-header .eyebrow {
  margin: 0 0 0.65rem;
}
.plan-header-compact {
  margin: 0 0 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
}
.plan-meta-line {
  display: inline-flex;
  align-items: center;
}
.plan-header-compact .plan-chips {
  margin: 0;
}
.plan-meta-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}
.plan-goal-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}
.plan-goal-label strong {
  color: var(--text-primary);
  font-weight: 600;
}

.plan-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.plan-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  border: 1px solid;
  background: transparent;
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.plan-chip:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}
.plan-chip:active {
  transform: translateY(0);
}
.plan-chip.active {
  box-shadow: 0 0 0 2px color-mix(in oklab, currentColor 30%, transparent);
  filter: brightness(1.2);
}
.plan-chip-num {
  font-weight: 600;
  font-size: 0.85rem;
}
.plan-chip.new {
  color: var(--orange);
  background: color-mix(in oklab, var(--orange) 10%, transparent);
  border-color: color-mix(in oklab, var(--orange) 35%, transparent);
}
.plan-chip.review {
  color: var(--status-review, var(--orange-pink, var(--orange)));
  background: color-mix(in oklab, var(--status-review, var(--orange)) 10%, transparent);
  border-color: color-mix(in oklab, var(--status-review, var(--orange)) 35%, transparent);
}
.plan-chip.lapse {
  color: var(--status-unknown);
  background: color-mix(in oklab, var(--status-unknown) 10%, transparent);
  border-color: color-mix(in oklab, var(--status-unknown) 35%, transparent);
}
.plan-chip.late {
  color: var(--status-unknown);
  background: color-mix(in oklab, var(--status-unknown) 12%, transparent);
  border-color: color-mix(in oklab, var(--status-unknown) 45%, transparent);
}
.plan-chip-clear {
  color: var(--text-secondary);
  border-color: var(--border-subtle);
  background: transparent;
}
.plan-chip-clear:hover {
  color: var(--text-primary);
}
.plan-chip-clear i {
  font-size: 0.9rem;
}

/* --- Empty state "completado" --- */
.plan-done {
  text-align: center;
  padding: 2.5rem 1rem;
}
.plan-done .ti {
  font-size: 3rem;
  color: var(--orange);
  display: block;
  margin: 0 auto 0.85rem;
}
.plan-done-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 0.65rem;
}
.plan-done-sub {
  max-width: 36rem;
  margin: 0 auto;
  color: var(--text-secondary);
  font-size: 0.96rem;
  line-height: 1.65;
}
.plan-done-sub strong {
  color: var(--text-primary);
  font-weight: 600;
}
.plan-done-hint {
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* --- Bloco do plano em Settings --- */
.daily-goal-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.daily-goal-row label::before { content: "// "; opacity: 0.55; }
.daily-goal-inputs {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.daily-goal-inputs input {
  width: 110px;
  padding: 0.6rem 0.85rem;
  background: var(--surface, var(--bg-surface));
  border: 1.5px solid var(--border-subtle);
  border-radius: 8px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  transition: border-color 0.15s;
}
.daily-goal-inputs input:focus {
  outline: none;
  border-color: var(--orange);
}

/* ==========================================================================
   APP DIALOG — popup customizado (substitui alert/confirm nativos)
   ========================================================================== */
#app-dialog-host:empty { display: none; }
.app-dialog-bg {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 14, 0.72);
  backdrop-filter: blur(4px);
  z-index: 9000;
  animation: appDialogFade 0.15s ease-out;
}
.app-dialog-modal {
  position: fixed;
  z-index: 9001;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 32rem);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px color-mix(in oklab, var(--orange) 20%, transparent);
  animation: appDialogPop 0.2s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.app-dialog-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.15rem 1.4rem 0.85rem;
  border-bottom: 1px solid var(--border-subtle);
}
.app-dialog-head i {
  font-size: 1.5rem;
  color: var(--orange);
  flex: 0 0 auto;
}
.app-dialog-warn .app-dialog-head i { color: var(--status-review, var(--orange)); }
.app-dialog-danger .app-dialog-head i { color: var(--status-unknown); }
.app-dialog-head h3 {
  margin: 0;
  font-family: var(--font-bebas);
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.app-dialog-body {
  padding: 1.1rem 1.4rem;
  color: var(--text-secondary);
  line-height: 1.55;
  font-size: 0.95rem;
}
.app-dialog-body p { margin: 0 0 0.85rem; }
.app-dialog-body p:last-child { margin-bottom: 0; }
.app-dialog-body strong { color: var(--text-primary); font-weight: 600; }
.app-dialog-body em { color: var(--text-primary); font-style: italic; }
.app-dialog-foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 0.9rem 1.4rem 1.15rem;
  border-top: 1px solid var(--border-subtle);
}
.app-dialog-btn {
  font-family: var(--font-bebas);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.6rem 1.15rem;
  border-radius: var(--r-md);
  border: 1.5px solid var(--border-subtle);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.app-dialog-btn:hover {
  color: var(--text-primary);
  border-color: var(--text-secondary);
}
.app-dialog-btn.primary {
  background: var(--orange);
  border-color: var(--orange);
  color: #1A2834;
  font-weight: 600;
}
.app-dialog-btn.primary:hover {
  filter: brightness(1.08);
}
@keyframes appDialogFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes appDialogPop {
  from { opacity: 0; transform: translate(-50%, -45%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ==========================================================================
   RETURN BANNER — boas-vindas pós-ausência
   ========================================================================== */
.return-banner {
  background: var(--card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 1.65rem 1.5rem;
  text-align: center;
  margin: 1rem auto;
  max-width: 42rem;
}
.return-banner > i {
  display: block;
  font-size: 2.4rem;
  margin: 0 auto 0.85rem;
  color: var(--orange);
}
.return-banner-recomienzo > i { color: var(--status-review, var(--orange)); }
.return-banner h3 {
  font-family: var(--font-bebas);
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 0.85rem;
  color: var(--text-primary);
}
.return-banner h3 strong {
  color: var(--orange);
  font-weight: 600;
}
.return-banner p {
  color: var(--text-secondary);
  line-height: 1.6;
  font-size: 0.95rem;
  margin: 0 0 0.85rem;
}
.return-banner-sub {
  font-size: 0.85rem !important;
  color: var(--text-muted) !important;
  font-style: italic;
}
.return-banner-actions {
  margin-top: 1.2rem;
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

/* Rescue note discreta no header de hoy */
.plan-rescue-note {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
  padding: 0.45rem 0.8rem;
  background: color-mix(in oklab, var(--orange) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--orange) 35%, transparent);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  color: var(--orange);
}
.plan-rescue-note i { font-size: 0.95rem; }

/* ==========================================================================
   PLAN-DONE: hint da cadência + botão repaso libre
   ========================================================================== */
.plan-done-cadence {
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  opacity: 0.75;
}
.plan-done-cadence::before { content: "// "; opacity: 0.6; }
.plan-done-review-btn {
  margin-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.plan-done-review-btn + .plan-done-hint {
  margin-top: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* ==========================================================================
   EMPTY EXPLAIN — texto pedagógico nos filtros vazios
   ========================================================================== */
.empty-explain {
  text-align: center;
  padding: 2rem 1.25rem;
  max-width: 32rem;
  margin: 0 auto;
  color: var(--text-secondary);
}
.empty-explain > i {
  display: block;
  font-size: 2.2rem;
  margin: 0 auto 0.85rem;
  color: var(--text-muted);
  opacity: 0.6;
}
.empty-explain p {
  line-height: 1.6;
  font-size: 0.92rem;
  margin: 0 0 0.65rem;
}
.empty-explain p strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* Link "cambiar en Ajustes" inline */
.plan-goal-label a {
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in oklab, var(--orange) 50%, transparent);
}
.plan-goal-label a:hover {
  filter: brightness(1.1);
  border-bottom-style: solid;
}

/* ============================================================
 * v2 TOKEN ALIASES — shorthands para o CSS do shell v2 (Fase 2.0)
 * Mapeiam os tokens longos do v1 nos aliases curtos do mockup.
 * var() cascades corretamente nos temas claro/escuro.
 * ============================================================ */
:root {
  --bsub: var(--border-subtle);
  --bmed: var(--border-medium);
  --tp:   var(--text-primary);
  --ts:   var(--text-secondary);
  --tm:   var(--text-muted);
  --or:   var(--orange);
  --orp:  var(--orange-pink);
  --red:  var(--orange-deep);
  --em:   var(--emerald);
  --mag:  var(--magenta);
}

/* ============================================================
 * v2 SHELL (Fase 2.0)
 * Classes novas sem colisão: .hdr .strip .topbar .content .nav
 *   .iconbtn .overlay .drawer .ob .sechead .wcard .gbtn .seg etc.
 * Colisão resolvida: .chip → .app .chip (maior especificidade)
 * .modal renomeado → .v2-modal-box
 * ============================================================ */
.app {
  position: relative;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 480px;
  margin: 0 auto;
  background: transparent;
  overflow: hidden;
}

@media (min-width: 520px) and (max-width: 899px) {
  .app { border-left: 1px solid var(--bsub); border-right: 1px solid var(--bsub); }
}
.hdr {
  background: var(--canvas);
  padding: calc(env(safe-area-inset-top) + 14px) 18px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
}
.brand { font-family: 'Bebas Neue'; font-size: 1.5625rem; letter-spacing: .06em; }
.brand-logo { display: inline-flex; align-items: center; height: 36px; width: auto; color: var(--tp); }
.hdr-r { display: flex; gap: 15px; color: var(--ts); font-size: 1.125rem; }
.strip { height: 2px; background: var(--grad-cta); flex: 0 0 auto; }
.topbar { flex: 0 0 auto; height: 4px; background: var(--bsub); overflow: hidden; border-radius: 2px; }
.topbar > i { display: block; height: 100%; width: 0; background: var(--grad-cta); border-radius: 0 2px 2px 0; transition: width .45s ease; }
.topbar.em > i { background: linear-gradient(90deg, #2BB673, #1EBF69); }
.content {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 16px 18px 24px;
}
#app-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0 4px;
  margin-top: auto;
  border-top: 1px solid var(--bsub);
  font-family: 'IBM Plex Mono';
  font-size: 0.625rem;
  color: var(--tm);
  letter-spacing: 0.06em;
}
.nav {
  flex: 0 0 auto;
  display: flex;
  border-top: 1px solid var(--bsub);
  background: var(--canvas);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav button {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 12px 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--tm);
  font-family: 'Inter';
  font-size: 0.6875rem;
}
.nav button.on { color: var(--or); }
.nav i { font-size: 1.4375rem; }
.mono { font-family: 'IBM Plex Mono'; font-size: 0.6875rem; letter-spacing: .04em; color: var(--tm); }
.sechead {
  background: var(--surface);
  border: 1px solid var(--bsub);
  border-radius: 14px;
  padding: 15px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.sechead.done { border-color: var(--em); }
.sec-t { font-family: 'Bebas Neue'; font-size: 1.3125rem; letter-spacing: .03em; }
.sub { font-size: 0.75rem; color: var(--ts); margin-top: 3px; line-height: 1.4; max-width: 195px; }
.sechead > div { min-width: 0; }
.sechead > span { flex-shrink: 0; }
.pill {
  font-family: 'IBM Plex Mono';
  font-size: 0.75rem;
  color: var(--ts);
  background: var(--card);
  border: 1px solid var(--bsub);
  border-radius: 8px;
  padding: 2px 8px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pulse { animation: pulse-v2 .7s ease-out 2; }
@keyframes pulse-v2 {
  0%   { box-shadow: 0 0 0 0    rgba(43,182,115,.5); }
  100% { box-shadow: 0 0 0 16px rgba(43,182,115,0);  }
}
.fadein { animation: fadein-v2 .5s ease; }
@keyframes fadein-v2 { from { opacity: 0; } to { opacity: 1; } }
.iconbtn {
  background: transparent;
  border: 0;
  color: var(--ts);
  cursor: pointer;
  font-size: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  min-width: 24px;
}
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  z-index: 30;
}
.overlay.on { opacity: 1; pointer-events: auto; }
.drawer {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 76%;
  max-width: 300px;
  background: var(--surface);
  border-right: 1px solid var(--bsub);
  transform: translateX(-104%);
  transition: transform .24s ease;
  z-index: 31;
  padding: calc(env(safe-area-inset-top) + 22px) 16px 22px;
}
.drawer.on { transform: none; }
.drawer a {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--tp);
  text-decoration: none;
  padding: 14px 12px;
  border-radius: 11px;
  font-size: 0.9375rem;
  cursor: pointer;
}
.drawer a:active { background: var(--card); }
.ob {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px 4px;
}
.ob-big {
  width: calc((100% - 16px) / 3 * 2 + 8px);
  align-self: center;
  background: var(--surface);
  border: 2px solid var(--or);
  border-radius: 16px;
  padding: 18px;
  cursor: pointer;
  text-align: center;
  display: block;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ob-big:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(41,167,245,.28); border-color: var(--orp); }
.ob-big:active { background: var(--card); transform: translateY(0); }
/* v2 .chip — escopo evita colisão com v1 .chip em styles.css */
.app .chip {
  font-family: 'IBM Plex Mono';
  font-size: 0.8125rem;
  color: var(--ts);
  background: var(--card);
  border: 1px solid var(--bsub);
  border-radius: 10px;
  padding: 8px 13px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.app .chip.on  { background: var(--or); border-color: var(--or); color: #fff; }
.app .chip:hover { border-color: var(--or); color: var(--tp); }
.modal-ovl {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}
.modal-ovl.on { opacity: 1; pointer-events: auto; }
.v2-modal-box {
  background: var(--surface);
  border: 1px solid var(--bsub);
  border-radius: 16px;
  padding: 20px;
  max-width: 340px;
  width: 100%;
  transform: scale(.95);
  transition: transform .2s;
}
.modal-ovl.on .v2-modal-box { transform: none; }
.wcard { background: var(--surface); border: 1px solid var(--bsub); border-radius: 14px; margin: 0 0 12px; overflow: hidden; }
.wcard.exp { border-color: var(--bmed); }
.wrow { padding: 13px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; }
.wrow:active { background: var(--card); }
.wbody { padding: 0 16px 16px; animation: rise-v2 .3s ease; }
@keyframes rise-v2 { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.spk {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--bsub);
  background: var(--card);
  color: var(--ts);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9375rem;
  flex: 0 0 auto;
}
.code { font-family: 'IBM Plex Mono'; font-size: 0.8125rem; color: var(--or); }
.gbtn { border: 0; border-radius: 12px; padding: 14px; font-family: 'Inter'; font-weight: 500; font-size: 0.9375rem; cursor: pointer; width: 100%; }
.g-no    { background: rgba(201,40,28,.14); color: #ff8a7d; border: 1px solid rgba(201,40,28,.45); }
.g-ok    { background: var(--grad-cta); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.18), 0 3px 8px rgba(0,0,0,.35); }
.g-rev   { background: var(--grad-cta); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.18), 0 3px 8px rgba(0,0,0,.35); }
.g-ghost { background: transparent; color: var(--ts); border: 1px solid var(--bmed); }
.fld { width: 100%; background: var(--canvas); border: 1px solid var(--bsub); border-radius: 10px; color: var(--tp); padding: 11px; font-family: 'Inter'; font-size: 1rem; }
.fld:disabled { color: var(--orp); border-color: rgba(41,167,245,.5); background: rgba(41,167,245,.06); }
.imglbl { font-family: 'IBM Plex Mono'; font-size: 0.625rem; letter-spacing: .05em; text-transform: uppercase; color: var(--tm); margin-bottom: 4px; }
.tag { font-family: 'IBM Plex Mono'; font-size: 0.625rem; border-radius: 7px; padding: 2px 7px; }
.ctaB { background: var(--grad-cta); color: #fff; border: 0; border-radius: 14px; padding: 14px 24px; font-family: 'Bebas Neue'; font-size: 1.25rem; letter-spacing: .05em; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.18), 0 3px 8px rgba(0,0,0,.35); }
.seg { display: flex; background: var(--card); border: 1px solid var(--bmed); border-radius: 12px; padding: 3px; margin-bottom: 6px; }
.seg button { flex: 1; border: 0; background: transparent; color: var(--tp); font-family: 'Inter'; font-size: 0.8125rem; padding: 9px; border-radius: 9px; cursor: pointer; font-weight: 500; }
.seg button.on { background: var(--grad-cta); color: #fff; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.15), 0 2px 6px rgba(0,0,0,.3); }
.circle { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'IBM Plex Mono'; font-size: 0.75rem; cursor: pointer; background: var(--card); border: 1px solid var(--bmed); color: var(--ts); transition: filter .15s, color .1s; }
.circle.done { background: linear-gradient(135deg, #2BB673, #1E8A4D); border-color: transparent; color: #fff; font-weight: 500; }

/* .circle.sel vem DEPOIS de .done/.next — mesma especificidade → sel ganha; disco laranja + anel escuro */
.circle.sel  { background: var(--grad-cta); border-color: transparent; color: #fff; box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px #8B1A0A; }
.catgrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.catcell { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; background: var(--surface); border: 1px solid var(--bsub); border-radius: 12px; padding: 14px 12px; min-width: 0; }
.catcell svg { flex: 0 0 auto; }
.prox-detail.empty { display: none; }
.prox-ph { background: var(--surface); border: 1px dashed var(--bmed); border-radius: 12px; padding: 24px 16px; text-align: center; margin-top: 16px; }
/* light theme — ajustes v2 */
html[data-theme="light"] .g-no  { color: #9C3010; }
/* .circle.done agora usa cor #fff hardcoded — sem override de tema necessário */

/* sidebar (desktop only) */
#side { display: none; }
.side-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin: 2px 6px 20px; }
.side-tagline { font-family: 'IBM Plex Mono'; font-size: 0.5625rem; color: var(--tm); letter-spacing: 0.03em; margin-left: 2px; }
.side-nav { display: flex; flex-direction: column; gap: 4px; }
.side-b { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: transparent; color: var(--ts); font-family: 'Inter'; font-size: 0.9375rem; padding: 11px 12px; border-radius: 11px; cursor: pointer; text-align: left; transition: background .15s ease, color .15s ease; }
.side-b i { font-size: 1.3125rem; }
.side-b.sub { color: var(--tm); }
.side-b.on  { color: var(--or); background: linear-gradient(90deg, rgba(41,167,245,.16) 0%, rgba(41,167,245,.05) 100%); box-shadow: inset 3px 0 0 var(--or); }
.side-sep { height: 1px; background: var(--bsub); margin: 16px 8px 14px; }
.side-spacer { flex: 1; }
.side-foot { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--bsub); margin-top: 12px; padding-top: 14px; }
/* app footer — oculto no mobile; visível no desktop via grid-area: foot */
/* desktop grid */
@media (min-width: 900px) {
  .app {
    max-width: none;
    width: 100%;
    height: 100vh;
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "side strip" "side bar" "side main" "side foot";
    overflow: hidden;
    background: transparent;
  }
  body { background: radial-gradient(120% 80% at 62% -8%, rgba(41,167,245,.10), transparent 55%), var(--canvas); }
  .hdr, .nav, .overlay, .drawer { display: none; }
  .strip   { grid-area: strip; }
  .topbar  { grid-area: bar; }
  .content { grid-area: main; height: 100%; padding: 30px max(40px, calc((100% - 700px) / 2)) 0; }
  .content.content--ob   { padding-inline: max(32px, calc((100% - 540px) / 2)); }
  .content.content--prog { padding-inline: max(24px, calc((100% - 1100px) / 2)); }
  #side { display: flex; grid-area: side; flex-direction: column; background: var(--surface); border-right: 1px solid var(--bsub); padding: 24px 16px; overflow: auto; }
  .gen-wrap  { display: grid; grid-template-columns: 320px minmax(0,1fr); gap: 20px; align-items: start; }
  .catgrid   { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .prox-cols { display: grid; grid-template-columns: minmax(0,1fr) 344px; gap: 24px; align-items: start; }
  .prox-detail { position: sticky; top: 0; overflow: hidden; min-width: 0; }
  .prox-detail.empty { display: block; }
  .prox-ph { margin-top: 0; }
  .ob-big  { width: 300px; }
  #app-footer {
    padding: 16px 24px 16px;
  }
}

/* hover polish */
@media (hover: hover) {
  .wrow:hover       { background: var(--card); }
  .sechead:hover    { border-color: var(--bmed); }
  .circle:hover     { filter: brightness(1.12); color: #fff; }
  .gbtn:hover       { filter: brightness(1.07); }
  .spk:hover        { color: var(--or); }
  .seg button:not(.on):hover { background: rgba(255,255,255,.07); }
  .nav button:hover { color: var(--ts); }
  .iconbtn:hover    { color: var(--tp); }
  .drawer a:hover   { background: var(--card); }
}
@media (hover: hover) and (min-width: 900px) {
  .side-b:hover    { color: var(--tp); background: rgba(127,127,127,.10); }
  .side-b.on:hover { color: var(--or); background: rgba(41,167,245,.16); }
}

/* ── Consulta (aba 2.6 — grooming del corpus) ──────────────────────────────── */
.app .cons-row {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px; margin-bottom: 6px;
  background: var(--surface); border: 1px solid var(--bsub); border-radius: 9px;
  cursor: pointer; transition: border-color .15s ease;
}
.app .cons-row:hover { border-color: var(--or); }
.app .cons-row.done { border-color: rgba(43,182,115,.3); }
.app .cons-exp { padding: 2px 2px 16px; }
.app .chip.cons-cat { cursor: pointer; }
.app .chip.cons-cat.on { background: var(--or); color: #fff; border-color: var(--or); }

/* host de impressão: sempre oculto na tela */
#print-host { display: none; }

@media print {
  /* ── reset geral ──────────────────────────────────────────────────────────
   * Raiz do preto recorrente: variáveis dark estão em :root (espec. 0,1,0).
   * O seletor html puro na regra de print tem espec. 0,0,1 — perde pra :root.
   * Solução: nunca depender do cascade de variáveis — usar hex hardcoded com
   * !important diretamente nos elementos de impressão.
   * ────────────────────────────────────────────────────────────────────────── */
  @page { size: A4; margin: 1.5cm 1.4cm; }
  /* color-scheme: dark em :root faz o browser pintar a margem da página com
   * cores escuras do UA mesmo quando body tem background: #fff !important.
   * Forçar light aqui elimina esse canal de cor que sobrevivia a todos os
   * overrides anteriores. */
  html { color-scheme: light !important; }
  html, body { background: #fff !important; color: #1a1a1a !important; font-size: 10pt; }
  body::before, body::after, #bg-triangles { display: none !important; }
  * { box-shadow: none !important; }

  /* ── quando doPrint: esconde TUDO, mostra só #print-host ──── */
  body.printing > * { display: none !important; }
  body.printing > #print-host {
    display: block !important;
    width: 100%;
    box-sizing: border-box;
  }

  /* ── blindagem total — independente de tema/token ─────────────────────────
   * Aplica antes dos estilos específicos; regras mais específicas abaixo
   * sobrescrevem com !important onde precisam de cor diferente (coral, etc.).
   * ────────────────────────────────────────────────────────────────────────── */
  #print-host,
  #print-host * {
    background: #fff !important;
    color: #1a1a1a !important;
    border-color: #ccc !important;
  }

  /* ── estilos do #print-host ───────────────────────────────── */
  #print-host * { box-sizing: border-box; }
  #print-host .print-header {
    display: flex !important; align-items: center; gap: 10pt;
    margin-bottom: 14pt; padding-bottom: 8pt;
    border-bottom: 1.5pt solid #1F63D8 !important;
  }
  #print-host .print-header svg { height: 28pt; }
  #print-host .print-header h1 {
    font-family: 'Anton', 'Helvetica Neue', sans-serif;
    font-size: 18pt; font-weight: 400; margin: 0;
    color: #1F63D8 !important; letter-spacing: 0.02em; text-transform: uppercase;
  }
  #print-host .print-meta {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9pt; color: #666 !important; margin-top: 2pt;
  }
  #print-host .print-section-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 12pt; font-weight: 400; color: #6B5028 !important;
    margin: 14pt 0 6pt; padding-bottom: 3pt;
    border-bottom: 0.5pt solid #D9C99E !important;
    page-break-after: avoid; letter-spacing: 0.04em; text-transform: uppercase;
  }
  #print-host.mode-table .vocab-table {
    width: 100%; max-width: 100%; border-collapse: collapse;
    font-size: 9pt; table-layout: fixed;
  }
  #print-host.mode-table .vocab-table th,
  #print-host.mode-table .vocab-table td {
    border: 0.5pt solid #ccc !important; padding: 4pt 5pt;
    text-align: left; vertical-align: top;
    word-wrap: break-word; overflow-wrap: break-word;
    background: #fff !important; color: #1a1a1a !important;
  }
  #print-host.mode-table .vocab-table th {
    background: #f5f0ed !important; font-weight: 700; font-size: 8.5pt;
    text-transform: uppercase; color: #1F63D8 !important; letter-spacing: 0.04em;
  }
  #print-host.mode-table .vocab-table .pron-cell {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 700; color: #1F63D8 !important; letter-spacing: 0.04em;
  }
  #print-host.mode-table .vocab-table tr { page-break-inside: avoid; }
  #print-host.mode-table .imgs-line { font-size: 7.5pt; color: #555 !important; margin-bottom: 3pt; }
  #print-host.mode-table .imgs-line .es-tag { color: #712B13 !important; font-weight: 600; }
  #print-host.mode-table .imgs-line .en-tag { color: #1E3A8A !important; font-weight: 600; }
  #print-host.mode-table .similar-cell { color: #2c6e2c !important; font-style: italic; }
}

/* --------------------------------------------------------------------------
   23. COMPONENTES COMPARTILHADOS (app.html + sim.html + _preview.html)
   Fonte única: qualquer edição aqui aplica nos três arquivos.
   -------------------------------------------------------------------------- */
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.setting-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.admin-btn {
  padding: 0.6rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-subtle);
  background: var(--surface);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-transform: lowercase;
}
.admin-btn:hover { background: var(--card-elev); border-color: var(--border-medium); }
.admin-btn.primary {
  background: var(--grad-cta);
  color: var(--text-on-accent);
  border-color: transparent;
  box-shadow: var(--glow-orange);
}
.admin-btn.primary:hover { background: var(--grad-cta-hover); }
.admin-btn.danger { color: var(--status-unknown); border-color: var(--danger-border); }
.admin-btn.danger:hover { background: var(--danger-bg); }

.toast {
  padding: 0.7rem 0.95rem;
  background: color-mix(in oklab, var(--emerald) 18%, transparent);
  color: var(--emerald);
  border: 1px solid color-mix(in oklab, var(--emerald) 35%, transparent);
  border-radius: var(--r-sm);
  margin-bottom: 1rem;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Modal do print (injetado em #modal-host por openPrintModal) */
.modal-bg {
  position: fixed; inset: 0;
  background: color-mix(in oklab, var(--canvas) 80%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; z-index: 100;
}
.modal {
  background: var(--surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  max-width: 30rem;
  width: 100%;
  box-shadow: var(--shadow-elev);
}
.modal h3 {
  margin: 0 0 1rem;
  font-family: var(--font-bebas);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
  font-weight: 400;
}
.modal-option {
  display: block; width: 100%; text-align: left;
  padding: 0.85rem; margin-bottom: 0.5rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  background: transparent; cursor: pointer;
  color: var(--text-primary); transition: all 0.15s;
}
.modal-option:hover { background: var(--card); border-color: var(--orange); }
.modal-option-title {
  font-weight: 600; font-size: 0.95rem; margin-bottom: 0.3rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.modal-option-desc { font-size: 0.82rem; color: var(--text-secondary); }
.modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1.1rem; }
.range-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0.85rem 0; }
.range-inputs label {
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em;
  color: var(--text-secondary); display: block; margin-bottom: 0.25rem;
}

.section-hide { display: none; }

.srs-table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.85rem; }
.srs-table th, .srs-table td { padding: 0.55rem 0.7rem; text-align: left; border-bottom: 1px solid var(--border-subtle); }
.srs-table th {
  background: var(--card); font-family: var(--font-mono); font-weight: 500;
  font-size: 0.74rem; text-transform: lowercase; letter-spacing: 0.06em; color: var(--text-secondary);
}
.srs-table tbody tr:last-child td { border-bottom: none; }
.srs-note {
  padding: 0.85rem 0.95rem; background: var(--card);
  border: 1px solid var(--border-subtle); border-left: 3px solid var(--orange);
  border-radius: var(--r-sm); font-size: 0.88rem; color: var(--text-secondary);
  margin-top: 1rem; display: flex; align-items: flex-start; gap: 0.55rem; line-height: 1.55;
}
.srs-note .ti { color: var(--orange); flex-shrink: 0; margin-top: 0.15rem; }

.tool-link {
  font-weight: 600; text-decoration: none; color: var(--orange-pink);
  display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 0.25rem;
}
.tool-link:hover { text-decoration: underline; }
.tool-card p { margin: 0.3rem 0 0; font-size: 0.85rem; color: var(--text-secondary); }

/* ============================================================
 * V3 — casca coral + Hoy com card focado
 * Bloco aditivo: sobrepõe a casca V2 sem apagar regras acima.
 * ============================================================ */

/* Plex Mono só no eyebrow (decisão Guilherme 16/09/2026) */
:root, html[data-theme="light"] { --font-mono: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
.mono, #app-footer, .pill, .code, .imglbl, .tag, .circle, .app .chip { font-family: 'Inter', system-ui, sans-serif; }
.imglbl { font-weight: 600; letter-spacing: .06em; }
.mono.v3-eyebrow { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

/* layout: coluna única, menu no topo, sem nav inferior nem sidebar */
.app { max-width: none; width: 100%; }
.content { padding: 18px max(18px, calc((100% - 700px) / 2)) 24px; }
@media (min-width: 900px) {
  .app { display: flex; flex-direction: column; grid-template-areas: none; }
  .hdr { display: flex; }
  .content { height: auto; padding: 26px max(40px, calc((100% - 700px) / 2)) 0; }
  .content.content--prog { padding-inline: max(24px, calc((100% - 1100px) / 2)); }
  .content.content--ob   { padding-inline: max(32px, calc((100% - 540px) / 2)); }
}

/* menu superior: degradê azul do jF12, brilho azul-céu no meio e granulado leve */
.hdr {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E"),
    radial-gradient(55% 140% at 58% 50%, rgba(41,167,245,.75), rgba(41,167,245,0) 70%),
    linear-gradient(120deg, #1F4FD0, #0A1179);
  color: #FFFFFF;
  padding: calc(env(safe-area-inset-top) + 10px) max(14px, calc((100% - 1100px) / 2)) 10px;
  gap: 12px;
  box-shadow: 0 6px 22px rgba(0,0,0,.28);
  position: relative;
  z-index: 5;
}
.hdr .brand-logo { height: 30px; color: #FFFFFF; --logo-accent: #8FDBFF; flex-shrink: 0; }
.v3-nav { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.v3-nav button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  color: rgba(255,243,233,.8); font-family: 'Inter', system-ui, sans-serif;
  font-size: .8125rem; font-weight: 600; padding: 8px 11px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px; transition: background .15s, color .15s;
}
.v3-nav button i { font-size: 1.125rem; }
.v3-nav button:hover { color: #fff; }
.v3-nav button.on { color: #fff; background: rgba(255,255,255,.17); }
.hdr-r { gap: 2px; padding-left: 8px; border-left: 1px solid rgba(255,255,255,.22); }
.hdr .iconbtn { color: rgba(255,243,233,.8); width: 34px; height: 34px; border-radius: 8px; }
.hdr .iconbtn:hover { color: #fff; background: rgba(255,255,255,.14); }
@media (max-width: 620px) {
  .v3-nav button span { display: none; }
  .v3-nav button { padding: 8px 9px; }
  /* Hoy é o principal: no celular só ele mantém o texto */
  .v3-nav #nav-hoy span { display: inline; }
  .v3-nav #nav-hoy { padding: 8px 11px 8px 9px; gap: 4px; }
  .hdr .brand-logo { height: 24px; }
}
/* celular estreito: aperta os respiros pra "Hoy" caber com a engrenagem */
@media (max-width: 400px) {
  .hdr { gap: 6px; padding-left: 12px; padding-right: 12px; }
  .v3-nav button { padding: 8px 7px; }
  .v3-nav #nav-hoy { padding: 8px 9px 8px 7px; }
  .hdr-r { padding-left: 4px; }
  .hdr .iconbtn { width: 30px; }
}

/* contador do dia (plan-chips da V1) */
.v3-chips { margin: 0 0 12px; }
.v3-chips .plan-chip { cursor: default; font-family: 'Inter', system-ui, sans-serif; text-transform: none; }
.v3-sechead { cursor: default; }
.v3-sechead .sub { max-width: none; }

/* card focado: casca 3D da V1 com o miolo da V2 */
.v3-card { margin-bottom: 18px; }
.v3-card .flash-card-3d { min-height: 0; cursor: default; }
.v3-card .flash-face { padding: 1.4rem 1.2rem 1.2rem; gap: .5rem; overflow: hidden; }
.v3-card .flash-en-row { justify-content: center; align-items: center; gap: .6rem; }
.v3-card .flash-en { font-size: clamp(2.3rem, 8vw, 3.4rem); text-transform: lowercase; }
.v3-card .spk { background: transparent; border: 1px solid var(--bmed); color: var(--ts); border-radius: 999px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.05rem; }
.v3-pron { display: flex; justify-content: center; margin: 2px 0 10px; }
.v3-card .flash-pron-big { font-size: .9375rem; }
.v3-card .wbody { padding: 0; animation: none; }
.v3-card .flash-card-3d:not(.flipped) .flash-face-back { pointer-events: none; }
.v3-card .flash-card-3d.flipped .flash-face:not(.flash-face-back) { pointer-events: none; }

/* V3 F3 — "Ya la domino" no card da nueva */
.v3-card .v3-dominar { margin-top: 10px; font-size: .8125rem; padding: 10px; }

/* V3 G1 — card de uma face cresce com o conteúdo (sem altura fixa do flip):
   o AIDA digitado e os avisos do lint não cabiam e a página pulava. */
.v3-card .flash-card-3d.solo { height: auto !important; }
.v3-card .flash-card-3d.solo .flash-face { position: relative; inset: auto; height: auto; overflow: visible; }

/* V3 G1 — caixinha "no volver a mostrar" do aviso de dominar */
.v3-ack { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 0.875rem; color: var(--ts); cursor: pointer; }
.v3-ack input { width: 16px; height: 16px; accent-color: var(--or); cursor: pointer; }

/* medição da altura do card (ver fitCard): faces empilhadas por um instante */
.flash-card-3d.measuring .flash-face { position: static; height: auto; }

/* V3 G10 — pronúncia ao lado do significado (economiza uma linha do card) */
.v3-pronsig { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; margin: 0 0 12px; }
.v3-pronsig .flash-pron-big { display: inline-block; margin-top: 3px; }
.v3-sig { font-family: 'Inter', system-ui, sans-serif; font-size: .9375rem; line-height: 1.45; color: var(--tp); padding-top: 4px; }

/* Embaixo da escena: "Guardar mi AIDA" à esquerda, dica do método à direita */
.v3-aidarow { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; margin: 0 0 12px; }
.v3-guardar {
  flex: none; background: none; border: 1px solid var(--bmed); border-radius: 999px; padding: 7px 14px;
  font-family: 'Inter', system-ui, sans-serif; font-size: .8125rem; font-weight: 500; color: var(--tp); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.v3-lint { flex: 1 1 170px; min-width: 0; font-size: .75rem; color: var(--orp); line-height: 1.35; padding-top: 2px; }
.v3-lint > div:first-child { margin-top: 0 !important; }
.v3-lint-tip { color: var(--ts); }
/* estado do AIDA embaixo dos botões: falta / editando… / guardado */
.v3-aidastatus { margin-top: 8px; text-align: center; min-height: 1.2em; }
.v3-aidastatus:empty { display: none; }
.v3-aidastatus.editando { color: var(--tm); }
.v3-aidastatus.ok { color: var(--em); }
.v3-guardar:hover { border-color: var(--or); color: var(--tp); }
.v3-okline { display: flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--em); margin: 0 0 10px; }

/* práctica com a casca da V1 */
.v3-prac-row { flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
/* categorias numa linha só, rolável: em três linhas empurravam o card pra fora da tela */
.v3-prac-row.v3-prac-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.v3-prac-row.v3-prac-cats::-webkit-scrollbar { display: none; }
/* chips de categoria mais juntos: o último ("Phrasal verbs") saía cortado */
.v3-prac-row.v3-prac-cats { gap: 3px; }
.v3-prac-row.v3-prac-cats .chip { padding-left: 8px; padding-right: 8px; }
/* Ajustes virou ícone no canto: aceso quando a página está aberta */
.hdr .iconbtn.on { color: #fff; background: rgba(255,255,255,.17); }
/* dois botões grandes; saltar fica na linha de baixo e o contador no canto do card */
/* Práctica com os componentes do Hoy: gbtn, chip, palavra em Anton minúscula */
.v3-prac-ctl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 10px; }
.v3-prac-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.v3-prac-nav .chip { display: inline-flex; align-items: center; gap: 6px; }
.v3-prac-row .chip { flex: 0 0 auto; white-space: nowrap; }
.v3-prac-stage .flash-en { font-size: clamp(2.3rem, 8vw, 3.4rem); text-transform: lowercase; }
.v3-prac-stage .flash-en-row { justify-content: center; align-items: center; gap: .6rem; margin-bottom: 12px; }
.v3-prac-stage .flash-front-content .flash-en-row { margin-bottom: 0; }
.v3-prac-stage .flash-back-content { text-align: left; width: 100%; }
.v3-prac-stage .flash-corner-hint, .v3-prac-count { text-transform: none; font-family: 'Inter', system-ui, sans-serif; }
/* título da Práctica com o (i) */
.v3-prac-title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.v3-prac-title span { font-family: 'Bebas Neue', sans-serif; font-size: 2.5rem; letter-spacing: .02em; line-height: .9; }
.v3-info { background: none; border: 0; padding: 4px; cursor: pointer; color: var(--tm); font-size: 1.25rem; line-height: 1; display: inline-flex; }
.v3-info:hover { color: var(--or); }
/* card de altura fixa: frente centrada, verso rola por dentro se precisar */
#prac-card { min-height: 0; }
.v3-prac-stage .flash-face { padding: 1.9rem 1rem 1.9rem; overflow-y: auto; }
.v3-prac-stage .flash-face-back { justify-content: flex-start; }
.v3-prac-stage .flash-back-content { margin: auto 0; flex: 0 0 auto; overflow: visible; padding-top: .5rem; }
#prac-card.measuring .flash-face { overflow: visible; }
/* verso mais enxuto: palavra menor, blocos mais juntos */
.v3-prac-stage .flash-face-back .flash-en { font-size: clamp(2rem, 7.5vw, 2.8rem); }
.v3-prac-stage .flash-face-back .flash-en-row { margin-bottom: 8px; }
.v3-prac-stage .flash-en-row { flex-wrap: wrap; row-gap: 6px; }
.v3-prac-stage .flash-en { min-width: 0; max-width: 100%; text-align: center; line-height: 1.05; overflow-wrap: anywhere; }
/* frente: um tamanho só, que cabe o significado mais comprido do corpus */
.v3-prac-stage .flash-face-front .flash-en { font-size: clamp(1.9rem, 7vw, 2.4rem); }
.v3-prac-stage .flash-en-row .flash-pron-big { font-size: .875rem; padding: 3px 12px; }
.v3-pp-imgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.v3-pp-box { background: var(--canvas); border: 1px solid var(--bsub); border-radius: 10px; padding: 9px 11px;
  font-family: 'Inter', system-ui, sans-serif; font-size: .875rem; line-height: 1.45; color: var(--tp); text-align: left; }
.v3-pp-box .imglbl { margin-bottom: 2px; }
/* pistas na frente da Práctica: imagens acima, botão embaixo (mesmo visual do "Ver respuesta" do Hoy) */
.v3-prac-pista { width: 100%; display: flex; flex-direction: column; align-items: center; }
.v3-prac-pista .v3-pp-imgs { margin-bottom: 0; width: 100%; }
/* pílula compacta, do tamanho do texto */
.v3-prac-pista #prac-pista { width: auto; margin-top: 10px; padding: 5px 12px; min-height: 0; border-radius: 999px;
  font-size: .78rem; line-height: 1.3; box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: var(--ts); border: 1px solid var(--bmed); }
.v3-prac-pista #prac-pista:hover { color: var(--tp); border-color: var(--em); }
.v3-prac-note { background: var(--canvas); border: 1px solid var(--bsub); border-radius: 10px; padding: 11px 13px; font-size: .875rem; color: var(--ts); }
/* "Toca para girar" centrado no topo, contador centrado embaixo: nos cantos, com a fonte maior (Aa), os dois se atropelavam */
.v3-prac-count { position: absolute; bottom: .75rem; left: 1rem; right: 1rem; text-align: center; font-family: var(--font-mono); font-size: .7rem; color: var(--text-muted); letter-spacing: .04em; }
.v3-prac-stage .flash-corner-hint { left: 1rem; right: 1rem; justify-content: center; }
#prac-card { transition: transform .55s cubic-bezier(.4,0,.2,1), height .3s ease; }
/* o card da V1 tem min-height de 18rem; na práctica a frente é uma palavra só e
   isso empurrava os botões pra fora da tela no celular */
#prac-card { min-height: 11rem; }
.v3-prac-row { margin-bottom: 6px; }
/* as 3 mini abas da Consulta numa linha ("Próximos días" quebrava em duas) */
.seg #cv-prox, .seg #cv-todo { white-space: nowrap; font-size: .8125rem; }
.v3-prac-stage { margin-top: 4px; margin-bottom: 12px; }
#prac-card { cursor: pointer; }

/* V3 G6 — o card tem que caber na tela do celular: título, significado, AIDA e
   botões sem rolar. A explicação do AIDA virou um "¿por qué?" fechado embaixo. */
.v3-porque { margin-top: 12px; }
.v3-porque-t {
  background: none; border: 0; padding: 4px 0;
  font-family: 'Inter', system-ui, sans-serif; font-size: .8125rem;
  color: var(--tm); cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.v3-porque-t:hover { color: var(--ts); }
.v3-porque-b { font-size: .8125rem; color: var(--ts); line-height: 1.5; padding: 2px 0 4px; }

/* cabeçalho da seção mais enxuto e card mais justo — cada linha aqui é altura
   que o aluno não precisa rolar pra chegar nos botões. */
.v3-sechead { padding: 11px 14px; margin-bottom: 10px; }
.v3-sechead .sec-t { font-size: 1.1875rem; }
.v3-sechead .sub { font-size: .72rem; line-height: 1.35; }
.v3-card { margin-bottom: 14px; }
.v3-card .flash-face { padding: 1.1rem 1.1rem 1rem; }
.v3-card .flash-en { font-size: clamp(2rem, 7.5vw, 3rem); }
.v3-pron { margin: 0 0 6px; }
.v3-card .wbody .imglbl { margin-bottom: 2px; }

/* "Ya la domino" vira um link discreto: é ação rara e ocupava a altura de um
   botão inteiro em cima da dobra. */
.v3-card .v3-dominar {
  width: 100%; margin-top: 10px; padding: 11px; font-size: .875rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  color: var(--ts); border: 1px solid var(--bmed);
}
.v3-card .v3-dominar:hover { color: var(--tp); border-color: var(--em); }

/* Telas de celular (até 860px de altura, a maioria dos aparelhos no navegador): o card inteiro — palavra, significado, AIDA
   e botões — tem que caber sem rolar. O que sai é enfeite, não informação. */
@media (max-height: 860px) {
  .v3-hoy-title { display: none; }
  .v3-sechead { padding: 9px 13px; margin-bottom: 8px; }
  .v3-sechead .sub { display: none; }
  .v3-card .flash-face { padding: .9rem 1rem .95rem; gap: .35rem; }
  .v3-card .flash-en { font-size: clamp(1.9rem, 6.5vw, 2.5rem); }
  .v3-card .flash-pron-big { font-size: .85rem; }
  .v3-card .wbody .fld { padding: 9px 10px; }
  .v3-chips { margin-bottom: 8px; }
}

/* V3 G5 — a lista da Consulta tem 1191 linhas e ~107.000 px de altura: abrir
   uma palabra forçava o navegador a recalcular a página inteira (~150 ms de
   layout, o "agarra" no mouse). Com content-visibility o que está fora da
   tela não é calculado nem pintado, e o contain isola cada linha. */
.cons-row { contain: layout style paint; }
/* 23/09: o content-visibility saiu da linha e foi pro bloco de 40 linhas
   (.cons-chunk). Por linha, o navegador checava as 1191 a cada quadro da
   rolagem; por bloco são ~30. 40 linhas × ~74 px ≈ 2960 px. */
.cons-chunk { content-visibility: auto; contain-intrinsic-size: auto 2960px; }
.cons-exp { contain: layout style; }

/* V3 G4 — diálogo com a mesma cara do modal do app (o do AIDA) e acento
   vermelho: os três avisos que o usam apagam ou tiram algo do aluno. */
.app-dialog-modal {
  background-color: var(--surface);
  /* véu vermelho no topo: avisa que o que vem embaixo tira algo do aluno */
  background-image: linear-gradient(to bottom, rgba(201,40,28,.16), rgba(201,40,28,0) 130px);
  background-repeat: no-repeat;
  border: 1px solid var(--bsub);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.app-dialog-head { border-bottom: 0; padding: 20px 20px 4px; }
.app-dialog-head i { color: var(--status-unknown); }
.app-dialog-warn .app-dialog-head i, .app-dialog-danger .app-dialog-head i { color: var(--status-unknown); }
.app-dialog-head h3 { font-family: 'Bebas Neue', sans-serif; font-size: 1.5625rem; letter-spacing: .02em; text-transform: none; }
.app-dialog-body { padding: 8px 20px 4px; font-size: 0.875rem; line-height: 1.5; color: var(--ts); }
.app-dialog-foot { border-top: 0; padding: 16px 20px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.app-dialog-btn { border: 0; border-radius: 12px; padding: 14px; font-family: 'Inter', system-ui, sans-serif; font-weight: 500; font-size: 0.9375rem; letter-spacing: 0; text-transform: none; cursor: pointer; width: 100%; background: transparent; color: var(--ts); border: 1px solid var(--bmed); }
.app-dialog-btn:hover { filter: brightness(1.07); color: var(--tp); }
/* mesmo botão do app (.g-ok): degradê da marca, não um bloco chapado */
.app-dialog-btn.primary { background: var(--grad-cta); border: 0; color: #fff; font-weight: 500; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.18), 0 3px 8px rgba(0,0,0,.35); }
.app-dialog-btn.primary:hover { filter: brightness(1.1); }
.app-dialog-body .v3-ack { margin-top: 16px; }

/* V3 G3 — blocos que abrem no fim da sessão */
.v3-bloques { text-align: left; margin: 0 0 18px; }
.v3-bloque { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface); border: 1px solid var(--bsub); border-radius: 12px; padding: 14px 16px; margin-top: 8px; font-family: 'Bebas Neue', sans-serif; font-size: 1.15rem; letter-spacing: .02em; color: var(--tp); cursor: pointer; }
.v3-bloque:hover { border-color: var(--or); }
.v3-bloque.on { border-color: var(--or); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.v3-bloque-n { font-family: 'IBM Plex Mono', monospace; font-size: .8rem; color: var(--tm); display: inline-flex; align-items: center; gap: 6px; }
.v3-bloque-box { background: var(--surface); border: 1px solid var(--or); border-top: 0; border-radius: 0 0 12px 12px; padding: 4px 16px 14px; }

/* V3 G2 — régua dos toques no card de repaso */
.v3-ruta { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; font-family: 'IBM Plex Mono', monospace; font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; }
.v3-ruta span { padding: 2px 6px; border-radius: 999px; border: 1px solid var(--bsub); color: var(--tm); }
.v3-ruta span.hecho { color: var(--em); border-color: rgba(43,182,115,.35); }
.v3-ruta span.ahora { color: #fff; background: var(--or); border-color: var(--or); }

/* V3 G2 — chips do dia que também escolhem por onde começar */
.plan-chip.v3-chip-go { cursor: pointer; }
.plan-chip.v3-chip-go:hover { border-color: var(--or); }

/* V3 F5 — Planificador no Progreso */
.v3-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 8px; }
.v3-cal-dow { font-family: 'Inter', system-ui, sans-serif; font-size: .6875rem; font-weight: 600; color: var(--tm); text-align: center; padding: 2px 0 4px; text-transform: uppercase; letter-spacing: .04em; }
.v3-cal-cell { background: var(--surface); border: 1px solid var(--bsub); border-radius: 8px; padding: 4px 5px 5px; min-height: 62px; min-width: 0; }
.v3-cal-cell.fuera { background: transparent; border-color: transparent; }
.v3-cal-cell.hoy { border-color: var(--or); box-shadow: inset 0 0 0 1px var(--or); }
.v3-cal-cell.lapiz { opacity: .55; }
.v3-cal-fecha { font-size: .625rem; color: var(--tm); line-height: 1.1; white-space: nowrap; overflow: hidden; }
@media (max-width: 520px) { .v3-cal { gap: 3px; } .v3-cal-cell { padding: 3px; } .v3-cal-fecha { font-size: .5625rem; letter-spacing: -.01em; } }
.v3-cal-big { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 1.25rem; line-height: 1; color: var(--or); min-height: 1.25rem; }
.v3-cal-reps { display: flex; flex-wrap: wrap; gap: 1px 3px; font-size: .6875rem; line-height: 1.2; font-weight: 600; }
.r.hecho { color: var(--em); }
.r.hoy { color: var(--or); }
.r.atrasado { color: #e5484d; }
.r.futuro { color: var(--tm); }
.v3-cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: .75rem; color: var(--ts); margin-bottom: 10px; }
.v3-cal-legend .v3-cal-big { font-size: 1rem; display: inline; min-height: 0; }
.v3-cal-legend .r { font-weight: 700; }
@media (min-width: 900px) {
  .v3-cal-cell { min-height: 78px; padding: 6px 7px; }
  .v3-cal-big { font-size: 1.5rem; }
  .v3-cal-reps { font-size: .8125rem; }
}

/* ── Revisão português → japonês ─────────────────────────────── */
/* O significado costuma ser mais longo que a palavra inglesa ("estar de acuerdo"). */
.v3-card .v3-es-head { font-size: clamp(2rem, 8vw, 3.4rem); text-align: center; overflow-wrap: anywhere; }
/* "Editar mi AIDA" discreto embaixo da decisão */
.v3-link { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  margin-top: 10px; padding: 8px; background: none; border: 0; color: var(--ts);
  font-family: 'Inter'; font-size: .8125rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.v3-link:hover { color: var(--tp); }
/* depois do "No me acuerdo": convite pra consertar o AIDA */
.v3-fallo { font-size: .8125rem; line-height: 1.45; color: var(--ts); margin: 0 0 10px; }

/* ── Consulta: idioma da lista + tradução revelável ───────────── */
.cons-cathead { display: flex; align-items: center; gap: 10px; margin: 20px 0 8px; padding-bottom: 5px;
  border-bottom: 1px solid var(--bsub); font-family: 'Bebas Neue'; font-size: 1.25rem; letter-spacing: .02em; }
.cons-cathead > span:first-child { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* sanfona (vista "Todas"): o título recolhe/abre a categoria */
.cons-cathead.sanfona { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cons-sec-chev { display: inline-block; font-size: .95rem; margin-right: 5px; vertical-align: 1px; }
/* fechada: a mesma seta, deitada (o subset de ícones não tem chevron-right) */
.cons-cathead[aria-expanded="false"] .cons-sec-chev { transform: rotate(-90deg); }
/* Faixa da categoria (fixa, largura toda): mora atrás do menu (.hdr tem
   z-index 5) e desce quando o título da categoria some por baixo dele. */
.cons-faixa { position: fixed; left: 0; right: 0; top: 0; z-index: 4; pointer-events: none;
  transform: translateY(-110%); transition: transform .26s cubic-bezier(.2,.7,.3,1);
  background: var(--surface); background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  border-bottom: 2px solid var(--faixa-cor, var(--or)); box-shadow: 0 6px 16px -10px rgba(0,0,0,.35); }
.cons-faixa.on { transform: none; pointer-events: auto; }
.cons-faixa-in { display: flex; align-items: center; gap: 10px; padding-top: 9px; padding-bottom: 8px;
  font-family: 'Bebas Neue'; font-size: 1.25rem; letter-spacing: .02em; }
.cons-faixa-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
/* "ir arriba": flutua no canto, aparece junto com a faixa */
.cons-topo { position: fixed; right: max(16px, calc((100% - 700px) / 2 - 56px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 4; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--bmed);
  background: var(--surface); color: var(--tp); box-shadow: 0 4px 14px -4px rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem; cursor: pointer;
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.cons-topo.on { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .cons-topo { transition: none; } }
.cons-faixa-t.troca { animation: faixaTroca .24s ease; }
@keyframes faixaTroca { from { opacity: 0; transform: translateY(60%); } }
.hdr { z-index: 5; }
@media (prefers-reduced-motion: reduce) { .cons-faixa { transition: none; } .cons-faixa-t.troca { animation: none; } }
.cons-ctl { display: inline-flex; align-items: center; gap: 6px; }
.cons-lang { display: inline-flex; border: 1px solid var(--bmed); border-radius: 8px; padding: 2px; }
.cons-lang button, .cons-revall { font-family: 'Inter'; font-size: .8125rem; font-weight: 500; letter-spacing: .02em;
  line-height: 1; cursor: pointer; }   /* mesmo corpo dos chips (Todas, Sustantivos…) */
.cons-lang button { border: 0; background: transparent; color: var(--ts); padding: 6px 10px; border-radius: 6px; }
.cons-lang button.on { background: var(--grad-cta); color: #fff; }
.cons-revall { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; background: transparent;
  border: 1px solid var(--bmed); border-radius: 8px; color: var(--ts); text-transform: lowercase; }
.cons-revall .ti { font-size: 1rem; }
.cons-revall:hover, .cons-lang button:not(.on):hover { color: var(--tp); }

/* A linha mantém a altura de sempre. Oculta: a palabra de cima desce pro
   meio; revelada: sobe e a tradução aparece embaixo, no lugar de sempre. */
.cons-words { min-width: 0; flex: 1; height: 44px; display: flex; flex-direction: column; justify-content: center; }
.cons-a, .cons-b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cons-a { line-height: 1.5rem; transition: transform .22s ease; }
.cons-b { font-size: .8125rem; line-height: 1.15rem; color: var(--ts); margin-top: 1px;
  transition: opacity .2s ease, transform .22s ease; }
.cons-big { font-family: var(--font-display); font-size: 1.125rem; letter-spacing: .01em; text-transform: lowercase; }
.cons-b .cons-big { font-family: 'Inter'; font-size: .8125rem; letter-spacing: 0; color: var(--ts); }
.cons-row:not(.rev) .cons-a { transform: translateY(.6rem); }
.cons-row:not(.rev) .cons-b { opacity: 0; transform: translateY(-4px); }
.cons-eye { flex: 0 0 auto; background: none; border: 0; color: var(--tm); cursor: pointer;
  padding: 6px; font-size: 1rem; line-height: 1; border-radius: 8px; }
.cons-eye:hover { color: var(--tp); }
.cons-row.rev .cons-eye { color: var(--or); }

/* troca EN ⇄ ES: revelada, a de baixo sobe e a de cima desce; oculta, a palabra só troca */
@keyframes consSobe  { from { opacity: .15; transform: translateY(1.2rem); } }
@keyframes consDesce { from { opacity: .15; transform: translateY(-1.2rem); } }
@keyframes consTroca { from { opacity: 0; } }
.cons-swap .cons-row.rev .cons-a { animation: consSobe .32s ease; }
.cons-swap .cons-row.rev .cons-b { animation: consDesce .32s ease; }
.cons-swap .cons-row:not(.rev) .cons-a { animation: consTroca .28s ease; }
@media (prefers-reduced-motion: reduce) {
  .cons-a, .cons-b { transition: none; }
  .cons-swap .cons-row .cons-a, .cons-swap .cons-row .cons-b { animation: none; }
}

/* chip "Me cuestan" */
.v3-chip-cuesta .ti { color: #ff8a7d; }