:root{
  --ink:#111; --muted:#666; --border:#e8e8e8; --bg:#fff; --card:#fff; --shadow:0 10px 30px rgba(0,0,0,.06);
  --radius:18px;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;color:var(--ink);background:#fbfbfb}
.header{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);border-bottom:1px solid var(--border)}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand img{height:34px}
.main{padding:26px 0 44px}
.grid{display:grid;grid-template-columns:2fr 1fr;gap:18px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
h1{margin:0 0 6px} p{margin:0 0 10px;color:var(--muted)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tile{border:1px dashed var(--border);border-radius:14px;padding:14px;background:#fff}
.tile h3{margin:0 0 6px;font-size:16px}
.footer{padding:26px 0 60px;text-align:center;color:#333;border-top:1px solid var(--border)}
@media (max-width:900px){.grid{grid-template-columns:1fr}.tiles{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.tiles{grid-template-columns:1fr}}

.btn{
  display:inline-block; padding:10px 14px; border-radius:999px; background:#111; color:#fff; text-decoration:none; font-weight:800;
}
.btn.ghost{ background:#fff; color:#111; border:1px solid var(--border) }
.list{margin:0; padding-left:18px}
.table{width:100%; border-collapse:collapse; font-size:14px; background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden}
.table th, .table td{padding:10px 12px; border-bottom:1px solid var(--border); text-align:left}
.table th{background:#fafafa; font-weight:700}
.kpi{display:flex; gap:12px; flex-wrap:wrap; margin:10px 0}
.kpi .chip{border:1px solid var(--border); border-radius:999px; padding:8px 12px; background:#fff}
.topbar{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.topbar .left{display:flex; align-items:center; gap:10px}
.topbar .logo{height:34px}

/* --- Course / Program Page --- */
.course-hero{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.course-title{margin:0;font-size:24px}
.course-meta{display:flex;gap:10px;flex-wrap:wrap}
.meta-chip{border:1px solid var(--border);border-radius:999px;padding:6px 10px;background:#fff}
.progress{height:10px;background:#eee;border-radius:999px;overflow:hidden}
.progress > span{display:block;height:100%;background:#111}
.curriculum{display:grid;gap:10px;margin-top:14px}
.module{border:1px solid var(--border);border-radius:14px;background:#fff;overflow:hidden}
.module summary{cursor:pointer;padding:12px 14px;font-weight:800;list-style:none}
.module summary::-webkit-details-marker{display:none}
.lessons{border-top:1px solid var(--border)}
.lesson{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;border-top:1px dashed var(--border)}
.lesson:first-child{border-top:none}
.lesson .left{display:flex;align-items:center;gap:10px}
.lesson input[type=checkbox]{width:18px;height:18px}
.lesson .name{font-weight:600}
.lesson .actions{display:flex;gap:8px}
.player{aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff}
.resources{display:grid;gap:8px}
.resources a{display:inline-block}
@media (max-width:900px){.course-hero{flex-direction:column;align-items:flex-start}}

/* --- Step-based Program Layout --- */
.step-layout{display:grid; grid-template-columns:280px 1fr; gap:16px}
@media (max-width:900px){ .step-layout{grid-template-columns:1fr} }
.sidebar{border:1px solid var(--border); border-radius:14px; background:#fff; overflow:auto; max-height:70vh}
.sidebar h3{margin:12px 12px 6px; font-size:14px; color:var(--muted)}
.step-list{list-style:none; margin:0; padding:0}
.step-item{display:flex; align-items:center; gap:10px; padding:10px 12px; border-top:1px solid var(--border); cursor:pointer}
.step-item:first-child{border-top:none}
.step-item.active{background:#f8f8f8}
.step-item .title{flex:1; font-weight:600}
.step-item .check{width:18px; height:18px; border:1px solid var(--border); border-radius:4px; display:inline-block; background:#fff}
.step-item.done .check{background:#111}
.player-wrap{display:grid; gap:12px}
.player{aspect-ratio:16/9; background:#000; border-radius:14px; overflow:hidden}
.controls{display:flex; justify-content:space-between; align-items:center; gap:10px}
.progress-line{height:8px; background:#eee; border-radius:999px; overflow:hidden}
.progress-line > span{display:block; height:100%; background:#111}
.btn.inline{padding:8px 12px; font-size:14px}