:root {
    --primary:#5624d0;
    --secondary:#ec5252;
    --bg:#f8f9fb;
    --text:#222;
    --muted:#666;
    --radius:10px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);line-height:1.5}
  header{background:#fff;padding:12px 20px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 4px rgba(0,0,0,0.05)}
  header .logo{font-weight:700;color:var(--primary);font-size:1.2rem}
  header input{padding:6px 10px;border:1px solid #ddd;border-radius:var(--radius);width:200px}
  header .auth button{margin-left:8px;padding:6px 12px;border:none;border-radius:var(--radius);cursor:pointer}
  .btn-primary{background:var(--primary);color:#fff}
  .btn-secondary{background:var(--secondary);color:#fff}
  main{padding:20px;max-width:1200px;margin:auto}
  h1,h2,h3{margin-bottom:12px}
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
  .card{background:#fff;border-radius:var(--radius);box-shadow:0 2px 6px rgba(0,0,0,0.08);overflow:hidden;cursor:pointer;transition:.2s}
  .card:hover{transform:translateY(-3px)}
  .card img{width:100%;height:150px;object-fit:cover}
  .card .info{padding:12px}
  .small{font-size:.9rem;color:var(--muted)}
  .rating{color:#f5a623;font-weight:600}
  .view{display:none}
  .active{display:block}
  .course-detail img{width:100%;border-radius:var(--radius);margin-bottom:12px}
  .lessons li{margin-bottom:6px;list-style:none;padding:6px;background:#f2f2f2;border-radius:var(--radius);display:flex;justify-content:space-between;align-items:center}
  .progress{height:10px;background:#eee;border-radius:999px;overflow:hidden;margin-top:8px}
  .bar{height:100%;background:var(--secondary)}
  footer{text-align:center;color:var(--muted);padding:20px;font-size:.9rem}