:root{
  --bg:#f8fafc; --card:#ffffff; --ink:#0f172a; --muted:#334155;
  --accent:#4f46e5; --accent-ink:#3730a3; --line:#e2e8f0;
}
*{box-sizing:border-box; margin:0; padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%;
}
header{
  background:linear-gradient(135deg,#312e81,#4f46e5);
  color:#fff; padding:36px 16px 32px; text-align:center;
}
header h1{font-size:1.5rem; line-height:1.25; margin-bottom:6px}
header p{font-size:1rem; color:#e0e7ff}
main{max-width:860px; margin:0 auto; padding:24px 16px 56px}
.back{
  display:inline-flex; align-items:center; min-height:44px; padding:8px 4px;
  color:var(--accent-ink); font-weight:600; text-decoration:none; margin-bottom:8px;
}
.back:hover{text-decoration:underline}
.grid{display:grid; grid-template-columns:1fr; gap:14px}
@media (min-width:640px){ .grid{grid-template-columns:1fr 1fr} }
.module-card, .lesson-card{
  display:flex; gap:14px; align-items:center;
  background:var(--card); border-radius:14px; padding:16px;
  box-shadow:0 1px 3px rgba(15,23,42,.08),0 4px 14px rgba(15,23,42,.06);
  text-decoration:none; color:var(--ink);
  border:2px solid transparent; transition:border-color .15s, transform .15s;
}
.module-card:hover, .lesson-card:hover{border-color:var(--accent); transform:translateY(-1px)}
.module-card:focus-visible, .lesson-card:focus-visible, .back:focus-visible{outline:3px solid #f59e0b; outline-offset:2px}
.icon{font-size:2rem; line-height:1; flex:0 0 auto}
.module-card h2, .lesson-card h2{font-size:1.05rem; line-height:1.35; margin-bottom:4px}
.badge{
  display:inline-block; background:#eef2ff; color:var(--accent-ink);
  border-radius:99px; padding:2px 10px; font-size:.85rem; font-weight:600;
}
.badge.empty{background:#f1f5f9; color:#64748b}
.empty-state{
  background:var(--card); border-radius:14px; padding:32px 16px;
  text-align:center; color:var(--muted); margin-top:14px;
  box-shadow:0 1px 3px rgba(15,23,42,.08);
}
.module-title{font-size:1.3rem; margin:8px 0 4px}
footer{text-align:center; color:var(--muted); font-size:.9rem; padding:24px 16px 40px}