/* =====================================================================
   GLASS LAYER — visual "liquid glass" por cima do styles.css.
   Carregado depois do styles.css; so redefine tokens e superficies.
   Pra voltar ao visual antigo basta remover o <link> no index.html.
   ===================================================================== */

:root {
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --accent: #6d5dfc;
  --accent-hover: #5a49f0;
  --accent-2: #3b82f6;
  --accent-soft: rgba(109, 93, 252, 0.10);
  --accent-soft-2: rgba(109, 93, 252, 0.18);

  --bg: #eef0f6;
  --bg-elev: rgba(255, 255, 255, 0.62);
  --bg-sidebar: rgba(255, 255, 255, 0.45);
  --bg-soft: rgba(255, 255, 255, 0.55);
  --bg-hover: rgba(255, 255, 255, 0.85);
  --border: rgba(255, 255, 255, 0.75);
  --border-strong: rgba(20, 20, 40, 0.10);
  --text: #15151c;
  --text-soft: #43434f;
  --text-muted: #7a7a88;

  --glass-blur: 26px;
  --glass-sat: 170%;
  --glass-rim: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(255, 255, 255, 0.25);
  --glass-edge: 0 0 0 1px rgba(255, 255, 255, 0.55);
  --shadow-sm: 0 1px 2px rgba(20, 20, 60, 0.05), 0 6px 18px -8px rgba(20, 20, 60, 0.12);
  --shadow: 0 2px 6px rgba(20, 20, 60, 0.05), 0 18px 40px -18px rgba(20, 20, 60, 0.22);
  --shadow-lg: 0 8px 20px rgba(20, 20, 60, 0.08), 0 36px 80px -30px rgba(20, 20, 60, 0.35);

  --orb-1: rgba(139, 92, 246, 0.45);
  --orb-2: rgba(59, 130, 246, 0.40);
  --orb-3: rgba(236, 72, 153, 0.28);
  --orb-4: rgba(16, 185, 129, 0.22);
}

[data-theme="dark"] {
  --accent: #a394ff;
  --accent-hover: #8f7dff;
  --accent-2: #60a5fa;
  --accent-soft: rgba(163, 148, 255, 0.14);
  --accent-soft-2: rgba(163, 148, 255, 0.24);

  --bg: #0b0b12;
  --bg-elev: rgba(255, 255, 255, 0.055);
  --bg-sidebar: rgba(255, 255, 255, 0.035);
  --bg-soft: rgba(255, 255, 255, 0.06);
  --bg-hover: rgba(255, 255, 255, 0.10);
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --text: #f1f1f6;
  --text-soft: #c9c9d6;
  --text-muted: #80808f;

  --glass-rim: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(255, 255, 255, 0.03);
  --glass-edge: 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -10px rgba(0, 0, 0, 0.6);
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.45), 0 20px 50px -20px rgba(0, 0, 0, 0.8);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5), 0 40px 90px -30px rgba(0, 0, 0, 0.9);

  --orb-1: rgba(139, 92, 246, 0.32);
  --orb-2: rgba(59, 130, 246, 0.26);
  --orb-3: rgba(236, 72, 153, 0.16);
  --orb-4: rgba(16, 185, 129, 0.12);
}

/* ---------- tipografia estilo SF ---------- */
html, body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', sans-serif;
  letter-spacing: -0.005em;
  font-feature-settings: 'cv11', 'ss01';
}
.view-title, .study-word, .home-card h2, .login-brand, h1, h2, h3 {
  letter-spacing: -0.025em;
}

/* ---------- fundo: orbs de cor desfocadas, fixas ---------- */
body { position: relative; }
body::before, body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
body::before {
  background:
    radial-gradient(38% 45% at 12% 8%, var(--orb-1), transparent 70%),
    radial-gradient(34% 40% at 88% 18%, var(--orb-2), transparent 70%),
    radial-gradient(40% 40% at 78% 92%, var(--orb-3), transparent 70%),
    radial-gradient(30% 30% at 18% 88%, var(--orb-4), transparent 70%),
    var(--bg);
  filter: saturate(1.15);
  animation: orbs-drift 28s ease-in-out infinite alternate;
}
/* granulado fino pra dar "material" ao vidro */
body::after {
  z-index: -1;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
[data-theme="dark"] body::after { opacity: 0.22; }
@keyframes orbs-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-2%, 1.5%, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }
html, body { background: transparent; }
html { background: var(--bg); }

/* ---------- receita base de vidro ---------- */
.sidebar, .content-area, .deck-card, .study-card, .progress-card, .subex-row,
.card-row, .history-row, .home-card, .home-stat, .grammar-card, .batch-card,
.question-card, .exam-sidebar, .article-block, .feedback-block, .explanation-block,
.audio-player, .result-card, .review-fix, .review-col, .selection-bar,
.floating-bar, .info-panel, .user-menu-popup, .users-add-row, .user-row,
.modal-content, .login-box, .toast, .empty-state, .import-progress,
.opt-panel, .done-card, .exam-card, .home-history-row {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--glass-rim), var(--shadow-sm);
}
.deck-card, .grammar-card, .home-card, .study-card, .modal-content, .login-box,
.content-area, .progress-card, .question-card, .result-card {
  border-radius: var(--radius-lg);
}
.study-card, .modal-content, .login-box { border-radius: var(--radius-xl); }
.subex-row, .card-row, .history-row, .home-stat, .user-row, .home-history-row {
  border-radius: var(--radius);
}

.deck-card:hover, .grammar-card:hover, .subex-row:hover, .home-card:hover {
  border-color: var(--border);
  background: var(--bg-hover);
  box-shadow: var(--glass-rim), var(--shadow);
  transform: translateY(-1px);
}
.deck-card, .grammar-card, .subex-row, .home-card {
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s, background 0.25s, border-color 0.25s;
}

/* brilho especular no topo dos cards grandes.
   overflow:hidden SO nos que nao rolam: .modal-content precisa rolar (lista de
   cards do deck), entao o ::before dele e ancorado sem estourar a borda. */
.study-card, .modal-content, .login-box, .content-area, .home-card {
  position: relative;
}
.study-card, .login-box, .home-card { overflow: hidden; }
.modal-content { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.content-area { overflow-x: hidden; }
.study-card::before, .modal-content::before, .login-box::before, .home-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 46%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: soft-light;
}
[data-theme="dark"] .study-card::before, [data-theme="dark"] .modal-content::before,
[data-theme="dark"] .login-box::before, [data-theme="dark"] .home-card::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 100%);
  mix-blend-mode: normal;
}
.study-card > *:not(.study-card-actions), .modal-content > *, .login-box > *, .home-card > * { position: relative; z-index: 1; }
.study-card-actions { z-index: 2; }

/* ---------- sidebar ---------- */
.sidebar {
  border-right: 1px solid var(--border);
  border-top: 0; border-bottom: 0; border-left: 0;
  border-radius: 0;
  box-shadow: none;
}
.sidebar-brand { font-size: 17px; }
.brand-mark {
  width: 26px; height: 26px; border-radius: 9px;
  background: url('/favicon.svg') center / cover no-repeat;
  box-shadow: 0 6px 14px -6px rgba(109, 93, 252, 0.7);
}
.nav-item {
  border-radius: 12px;
  padding: 10px 12px;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.nav-item:hover { background: var(--bg-hover); }
.nav-item.active {
  background: var(--bg-hover);
  color: var(--text);
  box-shadow: var(--glass-rim), 0 8px 20px -12px rgba(20, 20, 60, 0.35);
  border: 1px solid var(--border);
  margin: -1px;
}
[data-theme="dark"] .nav-item.active { box-shadow: var(--glass-rim), 0 10px 24px -14px rgba(0,0,0,0.9); }
.nav-item.active .nav-icon { color: var(--accent); }

/* ---------- botoes: pilulas de vidro ---------- */
.btn {
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 600;
  transition: background 0.2s, border-color 0.2s, transform 0.12s cubic-bezier(.2,.8,.2,1), box-shadow 0.2s, color 0.2s;
}
.btn:active { transform: scale(0.96); }
.btn-primary {
  color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff) 0%, var(--accent) 55%, var(--accent-hover) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 8px 20px -8px color-mix(in srgb, var(--accent) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 70%, #000 10%);
}
.btn-primary:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, #fff) 0%, var(--accent-hover) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 12px 26px -10px color-mix(in srgb, var(--accent) 80%, transparent);
}
.btn-ghost, .btn-soft, .icon-btn, .info-toggle, .ap-btn, .md-tab, .q-option, .rate-btn, .mobile-menu-toggle {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: var(--glass-rim);
}
.btn-ghost:hover, .btn-soft:hover, .icon-btn:hover { background: var(--bg-hover); border-color: var(--border); }
.btn-soft { color: var(--accent); }
.icon-btn { border-radius: 999px; }
.btn.small, .btn.xsmall { font-weight: 600; }

/* ---------- inputs ---------- */
.textinput, .textarea, .select {
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 2px rgba(20, 20, 60, 0.04);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.textinput:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft-2), inset 0 1px 2px rgba(20, 20, 60, 0.04);
}

/* ---------- pills / tags ---------- */
.pill, .diff-pill, .opt-tag, .opt-chip {
  border-radius: 999px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ---------- barras de progresso ---------- */
.progress-bar, .pgr-bar, #opt-progress-fill, .progress-bar-fill, .pgr-fill { border-radius: 999px; }
.progress-bar-fill, .pgr-fill {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 12px -2px var(--accent);
}

/* ---------- modais ---------- */
.modal-backdrop {
  background: rgba(30, 30, 60, 0.28) !important;
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
}
[data-theme="dark"] .modal-backdrop { background: rgba(0, 0, 0, 0.55) !important; }
.modal-content {
  box-shadow: var(--glass-rim), var(--shadow-lg);
  animation: glass-pop 0.28s cubic-bezier(.2,.9,.25,1.2);
}
@keyframes glass-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* ---------- toast ---------- */
.toast {
  border-radius: 999px;
  padding: 10px 18px;
  box-shadow: var(--glass-rim), var(--shadow-lg);
}

/* ---------- tela de login ---------- */
.login-screen { background: transparent !important; }
.login-box { padding: 36px 32px; box-shadow: var(--glass-rim), var(--shadow-lg); }

/* ---------- flashcard de estudo ---------- */
.study-card {
  min-height: 400px;
  box-shadow: var(--glass-rim), var(--shadow-lg);
}
.study-face-front .vocab-sentence {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 20px;
  font-size: 17px;
  box-shadow: var(--glass-rim);
}
.study-face-front .vocab-sentence b {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.study-face-back .study-translation {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
}
.study-face-back .study-divider {
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
}

/* ---------- grade de decks ---------- */
.deck-card.ai::after { border-radius: 999px; }
.deck-card.selected { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }

/* ---------- topbar mobile ---------- */
.mobile-topbar {
  background: var(--bg-sidebar);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-bottom: 1px solid var(--border);
}

/* ---------- scrollbar discreta ---------- */
* { scrollbar-width: thin; scrollbar-color: rgba(120, 120, 140, 0.35) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(120, 120, 140, 0.35); border-radius: 999px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- selecao ---------- */
::selection { background: var(--accent-soft-2); }

/* ---------- rodape do resultado: voltar/refazer a esquerda, proximo em destaque ---------- */
.batch-footer-left { display: flex; gap: 8px; flex-wrap: wrap; }
#btn-gr-results-next { max-width: 340px; }
#btn-gr-results-next span, #btn-gr-results-next {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 640px) {
  .batch-footer { flex-direction: column-reverse; align-items: stretch; }
  .batch-footer-left { justify-content: space-between; }
  .batch-footer-left .btn { flex: 1; }
  #btn-gr-results-next { max-width: none; width: 100%; }
}

/* trava o scroll da pagina enquanto um modal esta aberto, pra roda do mouse
   agir dentro do modal e nao na lista atras dele */
body.modal-open { overflow: hidden; }

/* ---------- vídeos de referência ---------- */
.video-card {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--glass-rim), var(--shadow-sm);
}
.video-card.playing { box-shadow: var(--glass-rim), 0 0 0 1px var(--accent), var(--shadow); }
.video-frame { box-shadow: var(--glass-edge), var(--shadow); }