.tl-class-layout-v2{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  min-height:650px;
  background:#0b1020;
}
.tl-class-side{
  background:#fff;
  border-right:1px solid var(--tl-border);
  min-width:0;
  display:flex;
  flex-direction:column;
}
.tl-class-tabs{
  display:flex;
  gap:.35rem;
  padding:.75rem;
  border-bottom:1px solid var(--tl-border);
  background:#fbfcfa;
}
.tl-class-tab{
  flex:1;
  border:1px solid var(--tl-border);
  background:#fff;
  border-radius:10px;
  padding:.55rem .65rem;
  font-weight:800;
  color:var(--tl-muted);
}
.tl-class-tab.active{
  background:var(--tl-green);
  color:#fff;
  border-color:var(--tl-green);
}
.tl-class-pane{
  display:none;
  min-height:0;
  flex:1;
}
.tl-class-pane.active{
  display:flex;
  flex-direction:column;
}
.tl-class-material-list{
  padding:.75rem;
  overflow:auto;
  max-height:260px;
  border-bottom:1px solid var(--tl-border);
}
.tl-inline-pdf{
  width:100%;
  min-height:420px;
  flex:1;
  border:0;
  background:#f3f5f3;
}
.tl-inline-pdf-empty{
  flex:1;
  display:grid;
  place-items:center;
  text-align:center;
  color:var(--tl-muted);
  padding:2rem;
  min-height:360px;
}
.tl-material-open-btn.active{
  background:var(--tl-green)!important;
  color:#fff!important;
  border-color:var(--tl-green)!important;
}
.tl-today-class{
  display:grid;
  grid-template-columns:130px minmax(0,1fr) auto;
  align-items:center;
  gap:1rem;
  padding:1rem 1.15rem;
  border:1px solid var(--tl-border);
  border-radius:18px;
  background:#fff;
  transition:.18s ease;
}
.tl-today-class:hover{
  border-color:rgba(197,140,10,.48);
  box-shadow:0 8px 24px rgba(15,95,74,.06);
}
.tl-today-class-time{
  font-weight:900;
  color:var(--tl-green);
  direction:ltr;
  text-align:right;
}
.tl-today-class-main h3{
  font-size:1.08rem;
  margin:0 0 .2rem;
  color:var(--tl-green);
  font-weight:900;
}
.tl-today-class-main p{
  margin:0;
  color:var(--tl-muted);
  font-size:.84rem;
}
.tl-today-class-actions{
  display:flex;
  align-items:center;
  gap:.55rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}
@media(max-width:1100px){
  .tl-class-layout-v2{grid-template-columns:1fr}
  .tl-class-side{border-right:0;border-top:1px solid var(--tl-border);max-height:650px}
}
@media(max-width:720px){
  .tl-today-class{grid-template-columns:1fr}
  .tl-today-class-time{text-align:right}
  .tl-today-class-actions{justify-content:flex-start}
}