:root{
  --bg:#ffffff; --ink:#ffd700; --dark:#0a1946; --muted:#1a1a1a;
  --shadow:0 10px 24px rgba(0,0,0,.25); --radius:22px;
}
*{box-sizing:border-box} html,body{height:100%}
body{ margin:0; font-family:"Amiri", serif; background:var(--bg); color:var(--muted); }
a{color:inherit; text-decoration:none}
.toolbar{ position:sticky; top:0; z-index:50; background:var(--dark);
  display:flex; gap:12px; align-items:center; justify-content:space-between; padding:10px 16px; }
.brand{display:flex; align-items:center; gap:10px}
.dot{width:10px; height:10px; border-radius:50%; background:var(--ink)}
.title{font-weight:700; letter-spacing:.3px; color:var(--ink)}
.credit-inline{ margin-right: 16px; color: var(--ink); font-size: 1rem; font-weight:700; }
.container{ max-width:1200px; margin:24px auto; padding:0 16px; }
.grid{ display:grid; gap:18px; grid-template-columns:1fr; }
.card{
  position:relative; overflow:hidden; border-radius: var(--radius);
  border:2px solid transparent;
  background: linear-gradient(var(--dark), var(--dark)) padding-box,
             linear-gradient(135deg, rgba(212,175,55,.95), rgba(212,175,55,.55), rgba(212,175,55,.95)) border-box;
  color: var(--ink); box-shadow: var(--shadow); padding:16px; display:flex; flex-direction:column; gap:12px;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.card:hover{ transform: translateY(-4px) scale(1.005); box-shadow: 0 18px 36px rgba(0,0,0,.32); filter: saturate(1.03); }
.card::after{ content:''; position:absolute; inset:-30%; background:
  linear-gradient(115deg, transparent 30%, rgba(255,255,255,.08) 45%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.08) 55%, transparent 70%);
  transform: translateX(-60%) rotate(8deg); transition: transform .7s ease; pointer-events:none; mix-blend-mode: screen; }
.card:hover::after{ transform: translateX(0%) rotate(8deg); }
.card h2{ margin:0 }
.lesson-item{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,215,0,.25); padding:10px 12px; border-radius:12px; margin-bottom:8px; }
.lesson-name{ font-weight:700 }
.lesson-actions{ display:flex; gap:8px }
/* NEW: Glowing gold button */
.btn-gold{
  background-color: var(--dark);
  color: var(--ink);
  border: 1px solid rgba(255, 215, 0, 0.6);
  border-radius: 14px;
  padding: 10px 18px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.35);
  transition: all 0.3s ease;
}
.btn-gold:hover{
  color: #fff8dc;
  background: linear-gradient(135deg, #0a1946 30%, #1e2a70 100%);
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.8), 0 0 45px rgba(255, 215, 0, 0.4);
  transform: translateY(-2px) scale(1.03);
}
.lesson-btn{
  border:1px solid rgba(255,215,0,.35); background:transparent; color:var(--ink);
  padding:8px 12px; border-radius:12px; cursor:pointer; transition: all .25s ease;
}
.lesson-btn:hover{ background:rgba(255,255,255,.08); box-shadow: 0 0 10px rgba(255,215,0,.3); }
.lessons{ max-height:0; overflow:hidden; opacity:0; border-top:1px dashed rgba(255,215,0,.35); margin-top:8px;
  will-change:max-height, opacity; transition:max-height .35s ease, opacity .25s ease, padding-top .35s ease; padding-top:0; }
.card.open .lessons{ max-height:600px; opacity:1; padding-top:10px; }