:root{
  --bg:#0f1226;            /* deep night-blue (Greek flag vibe) */
  --bg2:#151a35;
  --card:#1b2145;
  --card2:#222a5a;
  --line:#2c356b;
  --txt:#eef1ff;
  --muted:#9aa3d4;
  --blue:#1e6fff;          /* greek blue */
  --blue-d:#0b54d6;
  --green:#36c46b;
  --green-d:#27a456;
  --amber:#ffb020;
  --red:#ff5670;
  --white:#ffffff;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:18px;
  font-synthesis:none;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
  background:radial-gradient(1200px 600px at 50% -10%, #20275a 0%, var(--bg) 55%) fixed;
  color:var(--txt);
  min-height:100vh;
  line-height:1.5;
}
.gr{font-family:"GFS Didot","Times New Roman",Georgia,serif;}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:18px;
  padding:12px 18px;
  background:rgba(15,18,38,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--txt);font-weight:800}
.brand-mark{
  display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
  background:linear-gradient(135deg,var(--blue),#4f9bff);
  font-size:22px;font-weight:900;color:#fff;box-shadow:var(--shadow);
}
.brand-text{font-size:18px;letter-spacing:.3px}
.topnav{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.topnav a{
  text-decoration:none;color:var(--muted);font-weight:600;font-size:14px;
  padding:8px 12px;border-radius:10px;border:1px solid transparent;white-space:nowrap;
}
.topnav a:hover{color:var(--txt);background:var(--card)}
.topnav a.active{color:#fff;background:var(--blue);border-color:var(--blue-d)}

/* ---------- layout ---------- */
.app{max-width:980px;margin:0 auto;padding:22px 16px 60px}
.footer{max-width:980px;margin:0 auto;padding:18px 16px 40px;color:var(--muted);font-size:13px;text-align:center}

h1{font-size:30px;margin:6px 0 4px}
h2{font-size:22px;margin:26px 0 10px}
.sub{color:var(--muted);margin:0 0 18px}

/* ---------- hero / progress ---------- */
.hero{
  background:linear-gradient(135deg,#1b2145 0%,#232c5e 100%);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow);margin-bottom:22px;
}
.hero h1{margin-top:0}
.progress-wrap{margin-top:14px}
.progress-bar{height:12px;border-radius:999px;background:var(--bg2);overflow:hidden;border:1px solid var(--line)}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--green),#6ee7a0);width:0;transition:width .5s}
.progress-label{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;margin-top:6px}

/* ---------- cards grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.lesson-card{
  display:block;text-decoration:none;color:var(--txt);
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow);transition:transform .15s,border-color .15s;
}
.lesson-card:hover{transform:translateY(-3px);border-color:var(--blue)}
.lesson-card .num{font-size:13px;color:var(--blue);font-weight:800;letter-spacing:.5px}
.lesson-card h3{margin:6px 0 4px;font-size:18px}
.lesson-card .meta{color:var(--muted);font-size:13px}
.lesson-card .mini{margin-top:12px;height:8px;border-radius:999px;background:var(--bg2);overflow:hidden}
.lesson-card .mini i{display:block;height:100%;background:var(--green)}
.badge{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--card2);color:var(--muted);margin-left:6px}
.badge.done{background:rgba(54,196,107,.16);color:#7ef0a6}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 20px}
.tab{
  cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--muted);
  padding:9px 14px;border-radius:12px;font-weight:700;font-size:14px;
}
.tab:hover{color:var(--txt)}
.tab.active{background:var(--blue);color:#fff;border-color:var(--blue-d)}

/* ---------- buttons ---------- */
.btn{
  cursor:pointer;border:none;border-radius:14px;font-weight:800;font-size:15px;
  padding:13px 18px;color:#fff;background:var(--blue);box-shadow:var(--shadow);
  transition:transform .1s,filter .15s;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn.green{background:var(--green)}
.btn.ghost{background:var(--card);color:var(--txt);border:1px solid var(--line);box-shadow:none}
.btn.sm{padding:8px 12px;font-size:13px;border-radius:10px}
.btn.block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.spacer{flex:1}

/* ---------- theory ---------- */
.theory{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.theory h3{margin:18px 0 8px;font-size:19px;color:#cdd6ff}
.theory h3:first-child{margin-top:0}
.theory h4{margin:14px 0 6px;color:var(--amber);font-size:15px}
.theory p,.theory li{color:#dfe4ff}
.theory .gr{color:#9fc2ff;font-weight:600}
.theory .tip{background:rgba(30,111,255,.12);border-left:3px solid var(--blue);padding:10px 12px;border-radius:8px;color:#cfe0ff}
table.conj,table.genders{width:100%;border-collapse:collapse;margin:8px 0}
table.conj td,table.genders td,table.genders th{border:1px solid var(--line);padding:8px 10px;text-align:left}
table.genders th{background:var(--card2);color:#cdd6ff}
table.conj td:first-child{font-family:"GFS Didot",Georgia,serif;color:#9fc2ff;width:46%}

/* ---------- flashcard ---------- */
.flash-stage{display:flex;flex-direction:column;align-items:center;gap:16px}
.flashcard{
  width:100%;max-width:520px;height:280px;perspective:1200px;cursor:pointer;
}
.flash-inner{position:relative;width:100%;height:100%;transition:transform .5s;transform-style:preserve-3d}
.flashcard.flipped .flash-inner{transform:rotateY(180deg)}
.flash-face{
  position:absolute;inset:0;backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:24px;text-align:center;
}
.flash-face.back{transform:rotateY(180deg);background:linear-gradient(135deg,#1c2350,#243066)}
.flash-gr{font-family:"GFS Didot",Georgia,serif;font-size:46px;color:#bcd2ff;line-height:1.1}
.flash-ru{font-size:26px;font-weight:700}
.flash-tr{color:var(--muted);font-size:16px}
.flash-ex{color:#cfe0ff;font-size:15px;margin-top:6px}
.flash-hint{color:var(--muted);font-size:13px}
.audio-btn{
  cursor:pointer;border:none;background:var(--card2);color:#fff;border-radius:999px;
  width:54px;height:54px;font-size:24px;display:grid;place-items:center;box-shadow:var(--shadow);
}
.audio-btn:hover{filter:brightness(1.15)}
.counter{color:var(--muted);font-weight:700}

/* ---------- quiz / write ---------- */
.quiz-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);max-width:640px;margin:0 auto}
.q-prompt{font-size:22px;font-weight:700;margin:6px 0 4px;text-align:center}
.q-prompt .gr{font-family:"GFS Didot",Georgia,serif;color:#bcd2ff;font-size:30px}
.q-sub{color:var(--muted);text-align:center;margin-bottom:18px}
.options{display:grid;gap:10px}
.option{
  text-align:left;cursor:pointer;border:1px solid var(--line);background:var(--bg2);color:var(--txt);
  padding:14px 16px;border-radius:14px;font-size:16px;font-weight:600;transition:.12s;
}
.option:hover{border-color:var(--blue)}
.option.correct{background:rgba(54,196,107,.18);border-color:var(--green);color:#aef3c6}
.option.wrong{background:rgba(255,86,112,.16);border-color:var(--red);color:#ffb9c4}
.option.dim{opacity:.55}
.write-input{
  width:100%;padding:15px 16px;border-radius:14px;border:1px solid var(--line);
  background:var(--bg2);color:#fff;font-size:22px;font-family:"GFS Didot",Georgia,serif;text-align:center;
}
.write-input:focus{outline:none;border-color:var(--blue)}
.gk-wrap{margin-top:12px;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:10px}
.gk-title{color:var(--muted);font-size:12px;text-align:center;margin-bottom:8px}
.gk-row{display:flex;gap:6px;justify-content:center;margin-bottom:6px;flex-wrap:wrap}
.gk-key{cursor:pointer;border:1px solid var(--line);background:var(--card);color:#cfe0ff;border-radius:9px;
  font-family:"GFS Didot",Georgia,serif;font-size:20px;min-width:38px;height:42px;padding:0 8px;transition:.12s}
.gk-key:hover{border-color:var(--blue);background:var(--card2)}
.gk-key:active{transform:translateY(1px)}
.gk-wide{font-family:inherit;font-size:13px;min-width:96px}
.feedback{margin-top:14px;padding:12px 14px;border-radius:12px;font-weight:700;text-align:center}
.feedback.ok{background:rgba(54,196,107,.16);color:#9af0bd}
.feedback.almost{background:rgba(255,176,32,.16);color:#ffd98a}
.feedback.no{background:rgba(255,86,112,.16);color:#ffb3c0}
.feedback .gr{font-family:"GFS Didot",Georgia,serif;font-size:20px;color:#cfe0ff}
.qcount{color:var(--muted);font-weight:700;text-align:center;margin-bottom:10px}
.scorebar{height:8px;border-radius:999px;background:var(--bg2);overflow:hidden;margin-bottom:18px}
.scorebar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),#67a6ff);transition:width .3s}

/* ---------- result ---------- */
.result{text-align:center;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow);max-width:560px;margin:0 auto}
.result .big{font-size:54px;font-weight:900;margin:6px 0}
.result .emoji{font-size:58px}
.result.good .big{color:#7ef0a6}
.result.mid .big{color:var(--amber)}
.result.low .big{color:var(--red)}

/* ---------- listening / writing lists ---------- */
.list-vocab{display:grid;gap:8px}
.vrow{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.vrow .gr{font-family:"GFS Didot",Georgia,serif;font-size:20px;color:#bcd2ff;min-width:42%}
.vrow .ru{flex:1}
.vrow .tr{color:var(--muted);font-size:13px}
.vrow .audio-btn{width:40px;height:40px;font-size:18px}

.note{background:rgba(255,176,32,.1);border:1px solid rgba(255,176,32,.3);color:#ffd98a;padding:10px 14px;border-radius:12px;font-size:13px;margin:14px 0}
@media (max-width:560px){
  .flash-gr{font-size:38px}.flash-ru{font-size:22px}
  h1{font-size:24px}
  .vrow .gr{min-width:38%;font-size:18px}
}