:root{
  --bg:#0b1220; --card:#101a33; --text:#eef2ff; --muted:#aab3d6;
  --accent:#4ade80; --bad:#fb7185; --line:#223058; --warn:#f59e0b;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial;
  background:linear-gradient(180deg,#0b1220,#070b14);
  color:var(--text);
}

.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:rgba(11,18,32,.85); backdrop-filter:blur(10px);
  gap:14px;
}

.brand{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.brand h1{margin:0; font-size:18px}

.lang-switch{display:flex; align-items:center; gap:8px; color:var(--muted); font-weight:600}
.lang-switch select{
  padding:8px 10px; border-radius:12px; border:1px solid var(--line);
  background:rgba(11,18,32,.55); color:var(--text); outline:none; cursor:pointer;
}

.stats{display:flex; gap:12px; color:var(--muted); font-weight:800}

.container{
  display:grid; grid-template-columns: 340px 1fr; gap:16px;
  padding:16px; max-width:1200px; margin:0 auto;
}
.sidebar{
  border:1px solid var(--line); border-radius:14px; padding:12px;
  background:rgba(16,26,51,.6);
}
.side-head{display:flex; flex-direction:column; gap:6px; margin-bottom:8px}

.lesson-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.lesson-list button{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  text-align:inherit;
}
.lesson-list button:hover{border-color:#3b82f6}
.lesson-list button.active{border-color:var(--accent); box-shadow:0 0 0 3px rgba(74,222,128,.12)}
.lesson-list button:disabled{
  cursor:not-allowed;
  opacity:.6;
  border-style:dashed;
}
.leftcol{display:flex; flex-direction:column; gap:2px; align-items:flex-start}
.smalltag{
  font-size:12px;
  color:var(--muted);
}
.badges{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.badge{
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--muted);
  white-space:nowrap;
}
.badge.lock{border-color:rgba(245,158,11,.45); color:#fbbf24}
.badge.open{border-color:rgba(74,222,128,.45); color:#86efac}
.badge.level{border-color:#3b82f6; color:#93c5fd}

.content{min-height:70vh}
.card{
  border:1px solid var(--line); border-radius:14px; padding:16px;
  background:rgba(16,26,51,.6);
}
.hidden{display:none}
.muted{color:var(--muted)}
.small-muted{color:var(--muted); font-size:13px}

.lesson-head{display:flex; flex-direction:column; gap:6px; margin-bottom:10px}

.question{
  margin-top:12px; padding:14px; border:1px dashed #33406b; border-radius:14px;
}
.choices{display:grid; grid-template-columns:1fr; gap:10px; margin-top:10px}
.choice{
  padding:10px 12px; border:1px solid var(--line); border-radius:12px;
  cursor:pointer; background:rgba(11,18,32,.55);
}
.choice.selected{border-color:#3b82f6}

.actions{display:flex; gap:10px; margin-top:12px}
.btn{
  padding:10px 14px; border-radius:12px; border:1px solid var(--line);
  background:transparent; color:var(--text); cursor:pointer;
}
.btn.primary{border-color:var(--accent)}
.btn.warn{border-color:var(--warn)}
.btn.danger{border-color:var(--bad)}

.feedback{
  margin-top:12px; padding:12px; border-radius:12px; font-weight:900;
}
.feedback.good{background:rgba(74,222,128,.12); border:1px solid rgba(74,222,128,.35)}
.feedback.bad{background:rgba(251,113,133,.12); border:1px solid rgba(251,113,133,.35)}

.text-input{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(11,18,32,.55);
  color:var(--text);
  outline:none;
}
.text-input:focus{
  border-color:#3b82f6;
  box-shadow:0 0 0 3px rgba(59,130,246,.15);
}

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

/* Pronounce */
.phrase-box{
  margin-top:10px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(11,18,32,.35);
  font-size:20px;
  font-weight:900;
}
.rec-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}
.transcript{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px dashed #33406b;
}

@media (max-width:900px){
  .container{grid-template-columns:1fr}
}
/* Modal */
.modal{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  z-index:9999;
}
.modal-card{
  width:min(520px, 100%);
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(16,26,51,.92);
  padding:16px;
}
.modal-actions{
  display:flex; gap:10px; margin-top:12px; flex-wrap:wrap;
}