:root{
  --wine:#54152b;
  --wine-deep:#3f0d20;
  --wine-soft:#6f243d;
  --rose:#d7a6b4;
  --rose-muted:#c790a1;
  --rose-pale:#f0d9df;
  --paper:#f8eaee;
  --ink:#4c1528;
  --line:rgba(215,166,180,.32);
  --shadow:0 18px 55px rgba(42,4,20,.24);
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-width:320px;
  color:var(--rose-pale);
  background:
    radial-gradient(circle at 82% 8%,rgba(205,133,154,.12),transparent 24rem),
    linear-gradient(135deg,var(--wine-deep),var(--wine) 48%,#611932);
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  font-size:16px;
  line-height:1.55;
}
button,input{font:inherit}
button{color:inherit}
.topbar{
  position:sticky;top:0;z-index:30;
  min-height:86px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:12px 32px;
  background:rgba(63,13,32,.88);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px);
}
.brand{text-decoration:none;color:inherit;text-align:center;display:flex;flex-direction:column;line-height:1}
.brand-script,.sidebar h2{
  font-family:"Segoe Script","Brush Script MT","Snell Roundhand",cursive;
  font-weight:600;color:var(--rose);letter-spacing:.01em
}
.brand-script{font-size:2rem}
.brand-small{margin-top:4px;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--rose-muted)}
.menu-button{display:none;background:none;border:0;font-size:1.5rem;cursor:pointer}
.top-progress{justify-self:end;display:flex;align-items:center;gap:12px;color:var(--rose);font-size:.86rem}
.progress-track{width:112px;height:7px;border-radius:99px;background:rgba(240,217,223,.14);overflow:hidden}
.progress-track span{display:block;width:0;height:100%;border-radius:inherit;background:var(--rose);transition:width .35s ease}
.page-shell{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:calc(100vh - 86px)}
.sidebar{
  position:sticky;top:86px;height:calc(100vh - 86px);overflow:auto;
  padding:34px 22px 28px;border-right:1px solid var(--line);
  background:rgba(63,13,32,.34)
}
.sidebar-heading{padding:0 10px 16px}
.eyebrow{margin:0 0 6px;font-size:.72rem;font-weight:800;letter-spacing:.19em;color:var(--rose-muted)}
.sidebar h2{font-size:2rem;margin:0;line-height:1.2}
#categoryNav{display:grid;gap:5px}
.category-button{
  width:100%;display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:8px;
  padding:12px 10px;border:1px solid transparent;border-radius:14px;background:transparent;
  text-align:left;cursor:pointer;color:var(--rose-muted);transition:.2s ease
}
.category-button:hover{background:rgba(240,217,223,.06);color:var(--rose-pale)}
.category-button.active{background:var(--rose-pale);color:var(--ink);box-shadow:0 10px 22px rgba(30,3,13,.16)}
.category-index{font-size:.74rem;font-weight:800;opacity:.72}
.category-name{font-size:.9rem;font-weight:700}
.category-progress{font-size:.7rem;opacity:.7}
.reset-button{margin:24px 10px 0;border:0;background:transparent;color:var(--rose-muted);text-decoration:underline;text-underline-offset:4px;cursor:pointer;font-size:.78rem}
.sidebar-scrim{display:none}
.main{width:min(1120px,100%);padding:52px clamp(24px,5vw,72px) 80px;margin:0 auto}
.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:26px}
.intro h1{
  margin:0;color:var(--rose-pale);font-size:clamp(2.25rem,5vw,4.4rem);
  line-height:1.02;letter-spacing:-.04em;font-weight:750
}
.intro p:not(.eyebrow){max-width:690px;margin:18px 0 0;color:var(--rose);font-size:1.02rem}
.category-count{min-width:116px;padding:18px;border:1px solid var(--line);border-radius:18px;text-align:center;background:rgba(240,217,223,.05)}
.category-count strong{display:block;font-size:1.7rem;color:var(--rose-pale)}
.category-count span{font-size:.72rem;color:var(--rose-muted)}
.view-tabs{display:flex;gap:4px;padding:4px;width:max-content;border:1px solid var(--line);border-radius:14px;background:rgba(36,4,16,.18);margin:0 0 26px}
.tab{min-width:112px;border:0;border-radius:10px;padding:9px 18px;background:transparent;color:var(--rose-muted);font-weight:750;cursor:pointer}
.tab.active{background:var(--rose-pale);color:var(--ink)}
.view{display:none}.view.active{display:block}
.phrase-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;color:var(--rose-muted);font-size:.82rem}
.search{width:min(360px,100%);display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:rgba(240,217,223,.06)}
.search input{width:100%;border:0;outline:0;background:transparent;color:var(--rose-pale)}
.search input::placeholder{color:rgba(215,166,180,.7)}
.phrase-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.phrase-card{
  position:relative;display:flex;flex-direction:column;min-height:320px;padding:24px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(145deg,rgba(126,46,72,.36),rgba(63,13,32,.45));
  box-shadow:0 8px 26px rgba(34,2,14,.1);transition:transform .2s ease,border-color .2s ease
}
.phrase-card:hover{transform:translateY(-2px);border-color:rgba(215,166,180,.6)}
.phrase-card.known{background:linear-gradient(145deg,var(--rose-pale),#e7c2cc);color:var(--ink);border-color:transparent}
.phrase-card.known .phrase-translation,.phrase-card.known .example-ru,.phrase-card.known .plain-label{color:#7b3e53}
.phrase-card.known .phrase-ipa{color:#8f5266}
.phrase-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.phrase-title{margin:0;color:inherit;font-size:1.28rem;line-height:1.25;letter-spacing:.01em;text-transform:none}
.phrase-ipa{display:inline;margin-left:8px;color:var(--rose-muted);font-size:.86rem;font-weight:500;white-space:nowrap}
.audio-button{
  flex:0 0 40px;height:40px;border-radius:50%;border:1px solid currentColor;background:transparent;
  display:grid;place-items:center;cursor:pointer;transition:.18s ease
}
.audio-button:hover{transform:scale(1.06);background:rgba(240,217,223,.1)}
.phrase-translation{margin:12px 0 18px;color:var(--rose);font-weight:650}
.examples{display:grid;gap:11px;margin-bottom:18px}
.example{margin:0;font-size:.93rem;line-height:1.48}
.example-ru{display:block;color:var(--rose-muted);font-size:.82rem;margin-top:2px}
.plain{
  margin-top:auto;padding:12px 14px;border:1px solid currentColor;border-radius:13px;
  background:rgba(240,217,223,.055);font-size:.86rem
}
.plain-label{display:block;margin-bottom:3px;color:var(--rose-muted);font-size:.65rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.known-button{
  margin-top:14px;width:100%;padding:10px;border:0;border-radius:12px;background:var(--rose-pale);
  color:var(--ink);font-weight:800;cursor:pointer
}
.known .known-button{background:var(--wine);color:var(--rose-pale)}
.practice-cta{
  display:flex;align-items:center;justify-content:center;gap:10px;margin:28px 0 0 auto;padding:13px 20px;
  border:0;border-radius:14px;background:var(--rose-pale);color:var(--ink);font-weight:800;cursor:pointer
}
.practice-cta span{font-size:1.2rem}
.empty-state{padding:56px 20px;text-align:center;border:1px dashed var(--line);border-radius:var(--radius);color:var(--rose)}
.practice-header{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:20px}
.practice-header h2{margin:0;font-size:1.7rem}
.practice-score{padding:7px 12px;border:1px solid var(--line);border-radius:999px;color:var(--rose);font-size:.8rem}
.exercise-tabs{display:flex;gap:8px;overflow:auto;padding:0 0 12px;margin-bottom:12px}
.exercise-tab{white-space:nowrap;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--rose-muted);cursor:pointer}
.exercise-tab.active{background:var(--rose-pale);color:var(--ink);border-color:transparent;font-weight:800}
.exercise-intro{margin:0 0 16px;color:var(--rose)}
.word-bank{display:flex;flex-wrap:wrap;gap:8px;padding:16px;border:1px solid var(--line);border-radius:16px;background:rgba(240,217,223,.05);margin-bottom:16px}
.bank-word{padding:7px 11px;border:1px solid var(--rose-muted);border-radius:999px;background:transparent;color:var(--rose-pale);cursor:pointer}
.bank-word.used{opacity:.35}
.question-list{display:grid;gap:12px}
.question{
  padding:18px;border:1px solid var(--line);border-radius:18px;background:rgba(69,13,34,.45)
}
.question-number{color:var(--rose-muted);font-size:.72rem;font-weight:800;letter-spacing:.1em}
.question p{margin:7px 0 12px}
.gap-select,.translate-input{
  width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;
  background:rgba(240,217,223,.07);color:var(--rose-pale);outline:0
}
.gap-select option{color:#2e0917}
.choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.choice{padding:10px;border:1px solid var(--line);border-radius:11px;background:transparent;color:var(--rose-pale);cursor:pointer}
.choice:hover{background:rgba(240,217,223,.07)}
.choice.selected{border-color:var(--rose-pale);background:rgba(240,217,223,.12)}
.question.correct{border-color:#70c995;background:rgba(61,150,99,.12)}
.question.incorrect{border-color:#de7b93;background:rgba(184,55,88,.09)}
.question.correct .gap-select{border-color:#70c995;background:#dff3e7;color:#164b2e;font-weight:750}
.question.incorrect .gap-select{border-color:#de7b93;background:#f7d4dc;color:#6d1831;font-weight:750}
.answer-note{display:none;margin-top:9px;color:var(--rose);font-size:.82rem}
.question.checked .answer-note{display:block}
.right-note,.wrong-note{display:none}
.question.correct .right-note{display:inline;color:#9be0b7;font-weight:800}
.question.incorrect .wrong-note{display:inline}
.check-row{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.check-button,.reset-exercise{padding:11px 17px;border-radius:12px;font-weight:800;cursor:pointer}
.check-button{border:0;background:var(--rose-pale);color:var(--ink)}
.reset-exercise{border:1px solid var(--line);background:transparent;color:var(--rose)}
.toast{
  position:fixed;right:24px;bottom:24px;z-index:50;padding:11px 15px;border-radius:12px;
  background:var(--rose-pale);color:var(--ink);box-shadow:var(--shadow);font-weight:700;
  opacity:0;transform:translateY(12px);pointer-events:none;transition:.22s ease
}
.toast.show{opacity:1;transform:none}
@media(max-width:900px){
  .topbar{grid-template-columns:auto 1fr auto;padding:10px 18px}.menu-button{display:block}.brand{text-align:left;margin-left:14px}.brand-script{font-size:1.55rem}.brand-small{display:none}
  .page-shell{display:block}.sidebar{position:fixed;left:0;top:0;z-index:45;width:min(320px,86vw);height:100vh;transform:translateX(-104%);transition:.25s ease;background:var(--wine-deep);padding-top:28px}
  .sidebar.open{transform:none}.sidebar-scrim{position:fixed;inset:0;z-index:40;border:0;background:rgba(20,0,8,.62)}.sidebar-scrim.open{display:block}
  .main{padding:38px 22px 64px}.phrase-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .top-progress .progress-track{display:none}.top-progress{font-size:.75rem}.intro{align-items:flex-start;flex-direction:column}.category-count{display:flex;align-items:center;gap:7px;padding:9px 13px}.category-count strong{font-size:1rem}.phrase-card{min-height:0;padding:20px}.choices{grid-template-columns:1fr}.practice-header{align-items:flex-start;flex-direction:column}.phrase-toolbar{align-items:stretch;flex-direction:column}.search{width:100%}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}