:root{
  --bg:#0b1220; --card:#111a2e; --text:#e7eefc; --muted:#9fb0d0;
  --accent:#6ea8fe; --ok:#2ecc71; --bad:#ff6b6b;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial; background:var(--bg); color:var(--text)}
a{color:var(--accent);text-decoration:none}
.container{max-width:980px;margin:0 auto;padding:16px}
.topbar{background:#070b14;border-bottom:1px solid #1b2744;position:sticky;top:0}
.brand{font-weight:700;color:var(--text)}
.footer{border-top:1px solid #1b2744;margin-top:24px;color:var(--muted)}

h1{margin:8px 0 8px}
.muted{color:var(--muted)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:12px}
.card{background:var(--card);border:1px solid #1b2744;border-radius:12px;padding:12px}
.card.done{border-color:rgba(46,204,113,.6)}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.day{font-weight:700}
.theme{color:var(--muted);min-height:36px}
.actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px}
.quiz-link{font-size:12px;padding:4px 8px;border:1px solid #1b2744;border-radius:999px}
.quiz-stats{margin-top:10px;font-size:12px;color:var(--muted)}

.btn{display:inline-block;padding:8px 12px;border-radius:10px;border:1px solid #1b2744;background:#0c1324;color:var(--text)}
.btn:hover{border-color:#2a3b66}
.btn.primary{background:rgba(110,168,254,.2);border-color:rgba(110,168,254,.5)}
.btn.small{padding:6px 10px;font-size:12px;border-radius:8px}

.row{display:flex;gap:10px;align-items:center;margin:10px 0;flex-wrap:wrap}
.row.between{justify-content:space-between}
.right{display:flex;align-items:center;gap:10px}

.tick{display:flex;align-items:center;gap:8px;color:var(--muted)}
.toggle{display:flex;align-items:center;gap:8px;color:var(--muted)}

.list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:12px}
.word{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;
  text-align:left;padding:12px;border-radius:12px;border:1px solid #1b2744;background:#0c1324;color:var(--text);cursor:pointer}
.word .audio{opacity:.85;font-size:14px}
.word.revealed{border-color:#2a3b66}

.flashcards{max-width:720px;margin:18px auto 0;display:grid;gap:12px}
.flash-top{display:flex;justify-content:space-between;align-items:center}
.flashcard{width:100%;min-height:260px;border-radius:16px;border:1px solid #1b2744;background:linear-gradient(180deg,#0c1324,#0b1220);
  color:var(--text);cursor:pointer;padding:18px;display:grid;gap:12px;align-content:center;position:relative}
.flashcard:hover{border-color:#2a3b66}
.flashcard .face{font-size:34px;line-height:1.2;text-align:center}
.flashcard .hint{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-size:12px}
.flash-controls{display:flex;justify-content:space-between;gap:10px}
.small{font-size:12px}

.quiz .q{background:var(--card);border:1px solid #1b2744;border-radius:12px;padding:12px;margin:10px 0}
.q-head{display:flex;align-items:center;gap:10px;justify-content:space-between}
.q-num{font-weight:800}
.q-prompt{flex:1}
.options{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin-top:10px}
.opt{display:flex;gap:8px;align-items:center;background:#0c1324;border:1px solid #1b2744;padding:8px;border-radius:10px}

.results{display:grid;gap:10px}
.res{background:var(--card);border:1px solid #1b2744;border-radius:12px;padding:12px}
.res.ok{border-color:rgba(46,204,113,.6)}
.res.bad{border-color:rgba(255,107,107,.6)}
.res-head{font-weight:700;margin-bottom:6px}
.res-body{color:var(--muted);display:grid;gap:4px}