.tl-subject-card{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.2rem;
  border:1px solid var(--tl-border);
  border-radius:20px;
  background:#fff;
  box-shadow:0 8px 24px rgba(15,95,74,.05);
  transition:.18s ease;
}
.tl-subject-card:hover{
  transform:translateY(-2px);
  border-color:rgba(197,140,10,.5);
  box-shadow:var(--tl-shadow);
}
.tl-subject-card-icon,
.tl-material-icon{
  width:48px;
  height:48px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:var(--tl-gold-soft);
  color:var(--tl-green);
  font-weight:900;
  flex:0 0 auto;
}
.tl-subject-card-arrow{
  color:var(--tl-gold);
  font-size:1.25rem;
}
.tl-material-card{
  height:100%;
  display:flex;
  align-items:center;
  gap:.9rem;
  padding:1rem;
  border:1px solid var(--tl-border);
  border-radius:16px;
  background:#fff;
}
.tl-class-materials-btn{
  white-space:nowrap;
}
.tl-materials-offcanvas{
  --bs-offcanvas-width:min(520px,92vw);
}
.tl-materials-offcanvas .offcanvas-header{
  border-bottom:1px solid var(--tl-border);
}
.tl-materials-offcanvas .offcanvas-body{
  background:var(--tl-bg);
}