:root{
  --bg:#0e1420; --card:#1b2436; --card-border:#2a3550; --text:#eef1f8; --text-dim:#a7b0c5;
  --accent-green:#4fd1a5; --accent-blue:#4f9eff;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f3f5fa; --card:#ffffff; --card-border:#dbe1ee; --text:#1c2333; --text-dim:#5b6478; }
}
*{ box-sizing:border-box; }
body{
  margin:0; min-height:100vh; min-height:100dvh;
  font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--text);
  display:flex; flex-direction:column; align-items:center;
  padding:40px 20px calc(40px + env(safe-area-inset-bottom));
}
header{ text-align:center; margin-bottom:36px; }
header .logo{ font-size:2.4rem; }
header h1{ margin:8px 0 4px; font-size:1.6rem; }
header p{ margin:0; color:var(--text-dim); font-size:.95rem; }
main{ width:100%; max-width:760px; display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.course-card{
  background:var(--card); border:1px solid var(--card-border); border-radius:16px;
  padding:22px; text-decoration:none; color:var(--text); display:flex; flex-direction:column; gap:10px;
  transition:transform .15s ease, border-color .15s ease;
}
.course-card:hover{ transform:translateY(-2px); border-color:var(--accent-blue); }
.course-card .icon{ font-size:2rem; }
.course-card h2{ margin:0; font-size:1.15rem; }
.course-card p{ margin:0; font-size:.85rem; color:var(--text-dim); line-height:1.5; }
.course-card .cta{ margin-top:6px; font-size:.85rem; font-weight:700; color:var(--accent-green); }
footer{ margin-top:48px; font-size:.75rem; color:var(--text-dim); text-align:center; }