:root{
  --bg:#faf7f5;
  --card:#fff;
  --text:#111;
  --muted:#6b6b6b;
  --accent:#0b74ff;
}
body.theme-dark{
  --bg:#0b0f12;
  --card:#0f1720;
  --text:#e6eef6;
  --muted:#98a0ab;
  --accent:#3aa0ff;
}
*{box-sizing:border-box}
body{font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; background:var(--bg); color:var(--text); min-height:100vh; display:flex; flex-direction:column;}
.app{display:flex; flex-direction:column; min-height:100vh;}
.topbar{display:flex; align-items:center; gap:16px; padding:12px 20px; background:var(--card); border-bottom:1px solid rgba(0,0,0,0.05); position:sticky; top:0; z-index:10;}
.brand{font-weight:700;}
.nav{display:flex; gap:8px; margin-left:12px;}
.tab-btn{background:transparent; border:0; padding:8px 12px; cursor:pointer; border-radius:8px;}
.tab-btn.active{background:rgba(11,116,255,0.08); color:var(--accent); font-weight:600;}
.actions{margin-left:auto; display:flex; align-items:center; gap:8px;}
.actions input{padding:8px 10px; border-radius:8px; border:1px solid rgba(0,0,0,0.08); min-width:180px}
.main{flex:1; padding:24px; max-width:1100px; margin:0 auto; width:100%;}
.view{display:none;}
.view.active{display:block;}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; margin-top:12px;}
.card{background:var(--card); padding:14px; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,0.04); border:1px solid rgba(0,0,0,0.03);}
.card h3{margin:0 0 8px 0;}
.course-meta{font-size:13px; color:var(--muted);}
.footer{background:var(--card); padding:12px 20px; border-top:1px solid rgba(0,0,0,0.05); display:flex; justify-content:space-between;}
.link{background:none;border:0;color:var(--accent);cursor:pointer;padding:0;margin:0 0 12px 0;}
#units{margin-top:12px;}
.unit{background:linear-gradient(180deg, rgba(0,0,0,0.01), transparent); padding:12px; border-radius:10px; margin-bottom:8px; display:flex; align-items:center; justify-content:space-between;}
.small{font-size:13px; color:var(--muted); margin-top:8px;}
button.primary{background:var(--accent); color:white; border:0; padding:8px 12px; border-radius:8px; cursor:pointer;}
button.danger{background:#ff6666; color:white; border:0; padding:8px 12px; border-radius:8px; cursor:pointer;}
.progress{height:10px; background:#eee; border-radius:6px; overflow:hidden; margin-top:8px;}
.progress > i{display:block; height:100%; background:linear-gradient(90deg,var(--accent), #36c); width:0%;}
@media (max-width:640px){
  .nav{display:none;}
  .actions input{min-width:100px}
}