*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f9f9f8;
  --surface:#ffffff;
  --surface2:#f3f3f0;
  --surface3:#eeecea;
  --border:#e5e4df;
  --text:#1a1916;
  --muted:#6b6963;
  --xs:#9c9890;
  --accent:#d97706;
  --accent-lt:#fef3c7;
  --green:#16a34a;
  --green-lt:#dcfce7;
  --red:#dc2626;
  --red-lt:#fee2e2;
  --blue:#2563eb;
  --blue-lt:#dbeafe;
  --r:14px;
  --rs:8px;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.06);
  --font:'Inter',-apple-system,sans-serif;
}
html{font-family:var(--font);background:var(--bg);color:var(--text);font-size:15px;line-height:1.6;overflow-y:scroll}
body{min-height:100vh;width:100%}

/* TOP BAR */
.topbar{
  position:sticky;top:0;z-index:100;
  background:rgba(249,249,248,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  padding:0 16px;
}
.topbar-inner{
  max-width:680px;margin:0 auto;padding:0 16px;
  display:flex;align-items:center;justify-content:space-between;
  height:56px;gap:12px;
}
.logo{
  display:flex;align-items:center;gap:8px;
  font-size:15px;font-weight:700;color:var(--text);
  white-space:nowrap;
}
.logo svg{flex-shrink:0}
.nav{display:flex;gap:4px}
.nav-btn{
  border:none;background:transparent;cursor:pointer;
  padding:6px 12px;border-radius:20px;
  font-family:var(--font);font-size:13px;font-weight:500;
  color:var(--muted);transition:all .15s;
}
.nav-btn:hover{background:var(--surface3);color:var(--text)}
.nav-btn.active{background:var(--text);color:#fff}

.lang-btn{
  border:1px solid var(--border);background:var(--surface2);cursor:pointer;
  padding:4px 10px;border-radius:20px;
  font-family:var(--font);font-size:12px;font-weight:600;
  color:var(--muted);transition:all .15s;margin-left:4px;
  flex-shrink:0;
}
.lang-btn:hover{border-color:var(--accent);color:var(--accent)}
.lang-btn.lang-active{background:var(--accent);border-color:var(--accent);color:#fff}

/* LAYOUT */
.wrap{max-width:680px;margin:0 auto;padding:20px 16px 60px}

/* VIEWS */
.view{display:none}
.view.active{display:block}

/* CARDS */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:20px;
  margin-bottom:16px;
}

/* QUIZ */
.quiz-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:12px;
}
.quiz-counter{
  font-size:13px;font-weight:600;
  background:var(--surface2);
  padding:4px 10px;border-radius:20px;
  color:var(--muted);
}
.quiz-timer{
  font-size:13px;font-weight:700;
  background:var(--surface2);
  padding:4px 10px;border-radius:20px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  letter-spacing:.5px;
  transition:background .3s,color .3s;
}
.quiz-timer.timer-amber{background:#fef3c7;color:#92400e}
.quiz-timer.timer-warn{background:var(--red-lt);color:var(--red);animation:pulse 1s ease infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
.progress-track{
  height:4px;background:var(--surface3);border-radius:2px;
  margin-bottom:20px;overflow:hidden;
}
.progress-fill{
  height:100%;background:var(--accent);border-radius:2px;
  transition:width .3s ease;
}
.question-text{
  font-size:17px;font-weight:600;line-height:1.5;
  margin-bottom:16px;
}
.question-img{
  width:100%;max-height:320px;object-fit:contain;
  border-radius:var(--rs);margin-bottom:16px;
  background:var(--surface2);
  border:1px solid var(--border);
}
.options{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.opt-btn{
  display:flex;align-items:flex-start;gap:10px;
  text-align:left;width:100%;padding:12px 14px;
  background:var(--surface2);border:2px solid transparent;
  border-radius:var(--rs);cursor:pointer;
  font-family:var(--font);font-size:14px;color:var(--text);
  transition:all .15s;line-height:1.5;
}
.opt-btn:hover:not(:disabled){background:var(--accent-lt);border-color:var(--accent)}
.opt-btn.selected{border-color:var(--accent);background:var(--accent-lt)}
.opt-btn.correct{background:var(--green-lt) !important;border-color:var(--green) !important;cursor:default}
.opt-btn.wrong{background:var(--red-lt) !important;border-color:var(--red) !important;cursor:default}
.opt-btn:disabled{cursor:default}
.opt-letter{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;border-radius:50%;
  background:var(--surface3);font-size:11px;font-weight:700;
  flex-shrink:0;margin-top:1px;
}
.opt-btn.correct .opt-letter{background:var(--green);color:#fff}
.opt-btn.wrong .opt-letter{background:var(--red);color:#fff}
.explanation{
  background:var(--surface2);border-radius:var(--rs);
  padding:12px 14px;margin-bottom:16px;
  font-size:13px;color:var(--muted);
  animation:slideDown .2s ease;
}
.explanation strong{color:var(--text)}
.expl-top{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.expl-correct-ans{font-size:13px;color:var(--text);line-height:1.4}
.expl-body{
  font-size:13px;color:var(--text);line-height:1.6;
  padding-top:8px;border-top:1px solid var(--border);
  margin-top:2px;
}
@keyframes slideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.quiz-actions{display:flex;justify-content:flex-end;gap:8px}
.btn{
  padding:9px 18px;border-radius:20px;border:none;cursor:pointer;
  font-family:var(--font);font-size:14px;font-weight:600;
  transition:all .15s;
}
.btn-primary{background:var(--text);color:#fff}
.btn-primary:hover{opacity:.85}
.btn-primary:disabled{opacity:.4;cursor:not-allowed}
.btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover{background:var(--surface3)}

/* SESSION END */
.session-end{text-align:center;padding:40px 20px}
.session-score{font-size:52px;font-weight:700;line-height:1}
.session-label{font-size:15px;color:var(--muted);margin-top:4px;margin-bottom:24px}
.score-pass{color:var(--green)}
.score-fail{color:var(--red)}

/* VOCABULARY */
.search-bar{
  position:relative;margin-bottom:12px;
}
.search-input{
  width:100%;padding:10px 14px 10px 38px;
  border:1px solid var(--border);border-radius:var(--rs);
  background:var(--surface);font-family:var(--font);font-size:14px;
  color:var(--text);outline:none;transition:border-color .15s;
}
.search-input:focus{border-color:var(--accent)}
.search-icon{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--xs);pointer-events:none;
}
.filter-row{
  display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;
}
.filter-pill{
  padding:4px 12px;border-radius:20px;border:1px solid var(--border);
  background:var(--surface);font-size:12px;font-weight:500;
  cursor:pointer;color:var(--muted);transition:all .15s;
}
.filter-pill:hover{border-color:var(--accent);color:var(--accent)}
.filter-pill.active{background:var(--accent);border-color:var(--accent);color:#fff}
.vocab-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:14px 16px;margin-bottom:8px;
  cursor:pointer;transition:all .15s;
}
.vocab-card:hover{border-color:var(--accent);box-shadow:0 2px 8px rgba(217,119,6,.1)}
.vocab-es{font-size:16px;font-weight:600;color:var(--text)}
.vocab-ru{font-size:14px;color:var(--muted);margin-top:2px}
.vocab-meta{display:flex;gap:6px;margin-top:8px}
.badge{
  font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;
  padding:2px 7px;border-radius:4px;
}
.badge-cat{background:var(--accent-lt);color:var(--accent)}
.badge-blue{background:var(--blue-lt);color:var(--blue)}
.vocab-example{
  margin-top:10px;padding-top:10px;border-top:1px solid var(--border);
  font-size:13px;color:var(--muted);
  display:none;
}
.vocab-example.open{display:block;animation:slideDown .15s ease}
.vocab-example em{color:var(--text);font-style:normal;font-weight:500}
.vocab-count{
  font-size:13px;color:var(--xs);margin-bottom:12px;
}

/* ALPHABET */
.alphabet-section{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:16px;margin-bottom:16px;box-shadow:var(--shadow);
}
.alphabet-title{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}
.alphabet-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
}
.alpha-row{
  display:flex;flex-direction:column;gap:2px;padding:7px 10px;
  background:var(--surface2);border-radius:var(--rs);
}
.alpha-top{display:flex;align-items:baseline;gap:6px}
.alpha-letter{font-size:15px;font-weight:700;color:var(--text)}
.alpha-name{font-size:11px;font-weight:600;color:var(--accent)}
.alpha-read{font-size:11px;color:var(--muted);line-height:1.4}
@media(max-width:480px){
  .alpha-row{padding:5px 6px}
  .alpha-letter{font-size:13px}
  .alpha-name{font-size:10px}
  .alpha-read{font-size:10px}
}
.alphabet-note{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.5}

/* QUESTION SEARCH */
.qsearch-card{
  background:var(--surface);border-radius:var(--r);padding:12px 14px;
  margin-top:10px;border:1px solid var(--border);
}
.qsearch-header{
  display:flex;align-items:center;gap:6px;
  font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--muted);
  margin-bottom:10px;
}
.qsearch-input{
  width:100%;box-sizing:border-box;
  padding:8px 12px;border-radius:8px;
  border:1.5px solid var(--border);background:var(--bg);
  font-size:14px;color:var(--text);outline:none;
}
.qsearch-input:focus{border-color:var(--accent);}
.qsearch-results{margin-top:8px;display:flex;flex-direction:column;gap:6px;}
.qsearch-item{
  background:var(--surface2);border-radius:var(--rs);padding:10px 12px;
}
.qsearch-q{font-size:13px;color:var(--text);line-height:1.4;margin-bottom:5px;}
.qsearch-a{
  font-size:12px;color:var(--accent);font-weight:600;
  padding:4px 8px;background:rgba(231,111,47,.1);border-radius:6px;
  display:inline-block;line-height:1.4;
}
.qsearch-empty{font-size:13px;color:var(--muted);padding:6px 0;}

/* STATS */
.stats-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;
}
.stat-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:16px 12px;text-align:center;
  box-shadow:var(--shadow);
}
.stat-num{font-size:28px;font-weight:700;color:var(--accent)}
.stat-lbl{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.3}
.section-title{font-size:14px;font-weight:700;margin-bottom:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.topic-bar{margin-bottom:10px}
.topic-row{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.topic-name{font-size:13px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topic-pct{font-size:12px;font-weight:600;min-width:36px;text-align:right;color:var(--muted)}
.track{flex:1;height:6px;background:var(--surface3);border-radius:3px;overflow:hidden;max-width:120px}
.fill{height:100%;border-radius:3px;transition:width .4s ease}
.fill-green{background:var(--green)}
.fill-amber{background:var(--accent)}
.fill-red{background:var(--red)}
.empty-state{
  text-align:center;padding:40px 20px;color:var(--muted);
}
.empty-icon{font-size:36px;margin-bottom:8px}
.btn-danger{background:var(--red-lt);color:var(--red);border:1px solid var(--red)}
.btn-danger:hover{background:var(--red);color:#fff}

/* TOOLTIP */
#tt{
  position:fixed;background:#1a1916;color:#fff;
  font-size:11px;padding:3px 8px;border-radius:5px;
  pointer-events:none;opacity:0;transition:opacity .1s;
  white-space:nowrap;z-index:9999;max-width:200px;
  white-space:normal;text-align:center;
}
#tt.show{opacity:1}

/* RESULT BADGE */
.result-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:12px;font-weight:600;padding:4px 10px;border-radius:20px;
}
.badge-correct{background:var(--green-lt);color:var(--green)}
.badge-wrong{background:var(--red-lt);color:var(--red)}

/* GLOSSARY CARD */
.glos-card{
  background:var(--blue-lt);border:1px solid #bfdbfe;
  border-radius:var(--rs);padding:10px 14px;margin-top:0;
}
.glos-header{
  display:flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;color:var(--blue);margin-bottom:8px;
}
.glos-section-title{
  font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;color:var(--blue);opacity:.7;
  margin-bottom:5px;
}
.glos-list{display:flex;flex-direction:column;gap:4px}
.glos-item{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:13px}
.glos-es{font-weight:600;color:var(--text)}
.glos-struct{color:var(--blue);font-style:italic}
.glos-arrow{color:var(--xs);flex-shrink:0}
.glos-ru{color:var(--muted)}
/* Word highlights in question text */
mark.word-mark{
  background:rgba(37,99,235,.12);color:inherit;
  border-radius:3px;padding:0 2px;
  border-bottom:1px dashed #93c5fd;
  cursor:help;
}
mark.vocab-mark{
  background:rgba(217,119,6,.12);
  border-bottom:1px dashed var(--accent);
}

/* HISTORY CHART */
.chart-wrap{overflow-x:auto;margin-top:4px}

/* INFO VIEW */
.info-hero{text-align:center;padding:28px 0 20px}
.info-hero-icon{font-size:40px;margin-bottom:10px}
.info-title{font-size:20px;font-weight:700;margin-bottom:6px}
.info-subtitle{font-size:14px;color:var(--muted);margin-bottom:10px}
.info-source-link{
  display:inline-block;font-size:12px;color:var(--accent);
  text-decoration:none;border-bottom:1px solid var(--accent-lt);
  padding-bottom:1px;
}
.info-source-link:hover{border-bottom-color:var(--accent)}
.info-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);box-shadow:var(--shadow);
  padding:18px 18px 14px;margin-bottom:14px;
}
.info-card-header{
  display:flex;align-items:center;gap:8px;
  margin-bottom:14px;padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.info-icon{font-size:20px}
.info-card-header h2{font-size:15px;font-weight:700}
.info-row{
  display:flex;gap:10px;padding:7px 0;
  border-bottom:1px solid var(--surface2);font-size:13px;
  align-items:flex-start;
}
.info-row:last-of-type{border-bottom:none}
.info-label{min-width:120px;color:var(--muted);flex-shrink:0;padding-top:1px}
.info-val{color:var(--text);line-height:1.5}
.info-note{
  background:var(--accent-lt);border-radius:var(--rs);
  padding:10px 12px;font-size:13px;color:var(--text);
  margin-top:12px;line-height:1.5;
}
/* Docs */
.info-doc-list{display:flex;flex-direction:column;gap:10px}
.info-doc{
  background:var(--surface2);border-radius:var(--rs);
  padding:10px 12px;
}
.info-doc-name{font-size:14px;font-weight:600;color:var(--text)}
.info-doc-ru{font-size:13px;color:var(--accent);font-weight:500;margin-top:1px}
.info-doc-note{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.4}
/* Steps */
.info-steps{display:flex;flex-direction:column;gap:12px}
.info-step{display:flex;gap:12px;align-items:flex-start}
.step-num{
  min-width:28px;height:28px;border-radius:50%;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;flex-shrink:0;margin-top:1px;
}
.step-title{font-size:14px;font-weight:600;color:var(--text)}
.step-es{font-size:11px;color:var(--xs);font-style:italic;margin:1px 0 4px}
.step-desc{font-size:13px;color:var(--muted);line-height:1.5}
/* Categories */
.info-cats{display:flex;flex-direction:column;gap:10px;margin-bottom:4px}
.info-cat{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--surface2);border-radius:var(--rs);padding:10px 12px;
}
.info-cat-highlight{background:var(--accent-lt);border:1px solid #fde68a}
.info-cat-letter{
  min-width:38px;height:38px;border-radius:var(--rs);
  background:var(--text);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;flex-shrink:0;
}
.info-cat-highlight .info-cat-letter{background:var(--accent)}
.info-cat-name{font-size:14px;font-weight:600}
.info-cat-es{font-size:11px;color:var(--xs);font-style:italic;margin:2px 0 4px}
.info-cat-note{font-size:12px;color:var(--muted);line-height:1.4}
/* Costs */
.info-costs{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.info-cost-row{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--surface2);border-radius:var(--rs);padding:10px 12px;gap:10px;
}
.info-cost-name{font-size:13px;font-weight:600}
.info-cost-es{font-size:11px;color:var(--xs);margin-top:2px}
.info-cost-price{
  font-size:15px;font-weight:700;color:var(--accent);
  white-space:nowrap;
}
.info-cost-total{
  text-align:right;font-size:14px;font-weight:700;
  padding-top:8px;border-top:1px solid var(--border);
  color:var(--text);
}
/* Tips */
.info-tips{display:flex;flex-direction:column;gap:10px}
.info-tip{
  display:flex;gap:10px;align-items:flex-start;
  font-size:13px;color:var(--muted);line-height:1.5;
}
.tip-icon{font-size:18px;flex-shrink:0;margin-top:-1px}

@media(max-width:480px){
  .stats-grid{grid-template-columns:repeat(3,1fr)}
  .stat-num{font-size:22px}
  .nav-btn{padding:6px 8px;font-size:12px}
}