:root{
  --primary:#0b1c3a;
  --panel:#0f274f;
  --panel2:#132f5f;
  --accent:#18b07e;
  --danger:#e63946;
  --text:#ffffff;
  --muted:rgba(255,255,255,.65);
  --bg1:#0b1c3a;
  --bg2:#020814;
  --shadow:0 12px 32px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family:"Segoe UI",Arial,sans-serif;
  background:radial-gradient(1200px 600px at top,#102a55 0%,var(--bg2) 60%);
  color:var(--text);
}

/* LAYOUT */
.layout{
  display:grid;
  grid-template-columns:300px 1fr 280px;
  gap:18px;
  padding:24px;
}
@media(max-width:1100px){
  .layout{grid-template-columns:1fr}
}

/* SIDEBAR */
.sidebar{
  background:var(--panel);
  border-radius:14px;
  padding:16px;
  box-shadow:var(--shadow);
}
.sidebar-title{font-weight:700;margin-bottom:6px}
.sidebar-sub{font-size:12px;color:var(--muted)}

.unit-list{list-style:none;padding:0;margin:0}
.unit-item{margin-bottom:10px}
.unit-link{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  border-radius:12px;
  background:var(--panel2);
  color:#fff;
  text-decoration:none;
}
.unit-item.locked{opacity:.45}
.unit-item.locked .unit-link{cursor:not-allowed}
.unit-item.locked .u-status::after{content:"🔒"}
.unit-item.completed .u-status::after{content:"✔";color:#1ed760}
.unit-item.active .unit-link{outline:2px solid var(--accent)}

.u-left{display:flex;gap:10px}
.u-meta{font-size:11px;color:var(--muted)}

/* MAIN */
.main{display:flex;flex-direction:column;gap:16px}
.card{
  background:var(--panel);
  padding:18px;
  border-radius:16px;
  box-shadow:var(--shadow);
}
.card.subtle{background:rgba(255,255,255,.05)}

/* HERO */
.hero-center{
  max-width:620px;
  margin:40px auto 10px;
  text-align:center;
}
.hero-center h1{font-size:32px;margin-bottom:10px}
.hero-sub{color:var(--muted);margin-bottom:18px}
.hero-steps{display:flex;justify-content:center;gap:18px;margin-bottom:22px}

/* BUTTONS */
.btn{
  padding:12px 18px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  font-weight:700;
}
.btn.primary{background:var(--accent);color:#042018}
.btn.ghost{background:rgba(255,255,255,.12);color:#fff}
.btn.small{padding:8px 12px;font-size:12px}

/* RIGHT */
.right .card{position:sticky;top:24px}
.progress-circle{
  width:100px;height:100px;border-radius:50%;
  border:8px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:700;
}
.progress-meta{font-size:12px;color:var(--muted)}

/* VIDEO */
video{width:100%;border-radius:14px;background:#000}

/* TEST */
.q{background:rgba(255,255,255,.05);padding:14px;border-radius:14px;margin-bottom:14px}
.opt{display:flex;gap:8px;margin:6px 0}

/* RESULT */
.result{padding:14px;border-radius:14px}
.result.pass{border-left:5px solid var(--accent)}
.result.fail{border-left:5px solid var(--danger)}
.hidden{display:none}

/* FOOTER */
.footer{
  text-align:center;
  padding:16px;
  font-size:12px;
  color:rgba(255,255,255,.6);
}