/* ==========================================================================
   Teachers Live — PHASE 10 Full Responsive Experience
   Visual/UI only. No route, handler, DB or business-rule changes.
   ========================================================================== */

:root{
  --tl10-navy-950:#03111f;
  --tl10-navy-900:#061a2f;
  --tl10-navy-800:#0a2842;
  --tl10-navy-700:#0d3958;
  --tl10-green-700:#076d59;
  --tl10-green-600:#0a866b;
  --tl10-green-500:#0da47f;
  --tl10-gold-600:#b88922;
  --tl10-gold-500:#d0a43b;
  --tl10-gold-300:#ead080;
  --tl10-ink:#0b1b2f;
  --tl10-muted:#6f7e8f;
  --tl10-surface:#ffffff;
  --tl10-surface-2:#f5f8f6;
  --tl10-line:rgba(4,31,52,.09);
  --tl10-shadow-sm:0 8px 24px rgba(4,23,39,.07);
  --tl10-shadow:0 18px 50px rgba(4,23,39,.10);
  --tl10-shadow-lg:0 34px 90px rgba(2,15,27,.18);
  --tl10-radius:26px;
  --tl10-radius-md:20px;
  --tl10-radius-sm:14px;
  --tl10-ease:cubic-bezier(.2,.8,.2,1);
  --tl10-page-max:1480px;
}

/* Base */
html{scroll-behavior:smooth}
body.tl-body{
  color:var(--tl10-ink);
  background:
    radial-gradient(circle at 10% 2%,rgba(208,164,59,.10),transparent 28rem),
    radial-gradient(circle at 96% 18%,rgba(10,134,107,.08),transparent 30rem),
    #f3f6f4!important;
}
body.tl10-student,body.tl10-teacher{background:#eef3f0!important}
body.tl10-admin{background:#f2f5f4!important}
body.tl10-public{background:#f7faf8!important}
::selection{background:rgba(13,164,127,.22);color:var(--tl10-navy-950)}
a{transition:color .2s ease,opacity .2s ease,transform .2s var(--tl10-ease)}
.container-xl{max-width:var(--tl10-page-max)}
.min-w-0{min-width:0}

/* Global typography hierarchy */
.tl-page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.6rem!important;
}
.tl-kicker{
  font-size:.73rem!important;
  font-weight:900!important;
  letter-spacing:.14em!important;
  color:var(--tl10-green-600)!important;
  text-transform:uppercase;
}
.tl-page-title{
  margin:.25rem 0 .25rem!important;
  font-size:clamp(1.8rem,3vw,3rem)!important;
  line-height:1.08!important;
  font-weight:900!important;
  letter-spacing:-.045em!important;
  color:var(--tl10-navy-950)!important;
}
.tl-page-subtitle{color:var(--tl10-muted)!important;font-size:.92rem!important}

/* Shared cards */
.tl-card,.card,.tl-stat,.tl-class-card,.tl-live-control-card,.tlr-card,.tlr-material,.tl8e-history-row{
  border:1px solid var(--tl10-line)!important;
  border-radius:var(--tl10-radius)!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:var(--tl10-shadow-sm)!important;
}
.tl-card{
  overflow:hidden;
  backdrop-filter:blur(16px) saturate(130%);
  transition:transform .3s var(--tl10-ease),box-shadow .3s var(--tl10-ease),border-color .3s ease;
}
.tl-card:hover{border-color:rgba(10,134,107,.14)!important;box-shadow:var(--tl10-shadow)!important}
.tl-card-header{
  min-height:70px;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:1rem;
  padding:1rem 1.25rem!important;
  border-bottom:1px solid var(--tl10-line)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(249,251,250,.82))!important;
}
.tl-card-body{padding:1.25rem!important}

/* Buttons */
.btn{
  border-radius:14px!important;
  min-height:42px;
  font-weight:850!important;
  transition:transform .18s var(--tl10-ease),box-shadow .22s ease,background .22s ease,border-color .22s ease!important;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.98)}
.btn-primary,.btn-success{
  border-color:transparent!important;
  background:linear-gradient(135deg,var(--tl10-green-700),var(--tl10-green-500))!important;
  box-shadow:0 10px 24px rgba(7,109,89,.20)!important;
}
.btn-primary:hover,.btn-success:hover{box-shadow:0 14px 30px rgba(7,109,89,.28)!important}
.btn-outline-primary{
  color:var(--tl10-green-700)!important;
  border-color:rgba(7,109,89,.28)!important;
  background:rgba(255,255,255,.80)!important;
}
.btn-outline-primary:hover{background:var(--tl10-green-700)!important;color:#fff!important;border-color:transparent!important}
.btn-light{background:rgba(255,255,255,.88)!important;border-color:var(--tl10-line)!important}

/* Inputs/forms */
.form-control,.form-select{
  min-height:48px;
  border-radius:14px!important;
  border:1px solid rgba(4,31,52,.12)!important;
  background:#fff!important;
  transition:border .2s ease,box-shadow .2s ease,transform .2s var(--tl10-ease)!important;
}
.form-control:focus,.form-select:focus{
  border-color:rgba(10,134,107,.48)!important;
  box-shadow:0 0 0 4px rgba(10,134,107,.09)!important;
  transform:translateY(-1px);
}
.form-label{font-size:.82rem;font-weight:800;color:#405064}

/* Portal navigation */
.tl-portal-nav{
  position:sticky!important;
  top:0;
  z-index:1030;
  background:rgba(248,251,249,.82)!important;
  backdrop-filter:blur(22px) saturate(150%);
  border-bottom:1px solid rgba(5,35,55,.07)!important;
  box-shadow:0 12px 35px rgba(4,23,39,.055)!important;
  transition:background .25s,box-shadow .25s;
}
body.tl10-scrolled .tl-portal-nav{
  background:rgba(249,252,250,.95)!important;
  box-shadow:0 18px 45px rgba(4,23,39,.09)!important;
}
.tl8d-portal-bar{min-height:76px!important;max-width:var(--tl10-page-max)!important;margin:auto}
.tl8d-desktop-links{
  background:rgba(6,26,47,.045)!important;
  border:1px solid rgba(6,26,47,.04);
  border-radius:18px!important;
  padding:.34rem!important;
  gap:.18rem!important;
}
.tl8d-desktop-links .nav-link{
  position:relative;
  border-radius:13px!important;
  padding:.62rem .95rem!important;
  color:#47586b!important;
  font-weight:800!important;
}
.tl8d-desktop-links .nav-link:hover{background:#fff!important;color:var(--tl10-navy-950)!important}
.tl8d-desktop-links .nav-link.active{
  color:#fff!important;
  background:linear-gradient(135deg,var(--tl10-navy-900),var(--tl10-navy-700))!important;
  box-shadow:0 8px 22px rgba(6,26,47,.18)!important;
}
.tl8d-desktop-links .nav-link.active::after{
  content:"";
  position:absolute;right:25%;left:25%;bottom:4px;height:2px;border-radius:99px;
  background:var(--tl10-gold-500);
}

/* Hero: streaming/cinematic */
.tl-hero{
  position:relative!important;
  min-height:270px!important;
  display:flex!important;
  align-items:flex-end!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:32px!important;
  padding:clamp(1.5rem,3vw,2.6rem)!important;
  color:#fff!important;
  background:
    radial-gradient(circle at 15% 18%,rgba(208,164,59,.38),transparent 16rem),
    radial-gradient(circle at 86% 24%,rgba(13,164,127,.30),transparent 20rem),
    linear-gradient(120deg,var(--tl10-navy-950),#0a3451 55%,#075b4c 100%)!important;
  box-shadow:var(--tl10-shadow-lg)!important;
}
.tl-hero::before{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(1,8,16,.1),transparent 55%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.028) 0 1px,transparent 1px 18px);
}
.tl-hero::after{
  content:"TEACHERS LIVE";
  position:absolute;
  left:1.2rem;bottom:-1.8rem;
  font-size:clamp(4rem,10vw,9rem);
  line-height:1;
  white-space:nowrap;
  font-weight:900;
  letter-spacing:-.075em;
  color:rgba(255,255,255,.04);
  pointer-events:none;
}
.tl-hero>*{position:relative;z-index:2}
.tl-hero h1,.tl-hero h2{font-size:clamp(2rem,4vw,3.7rem)!important;letter-spacing:-.05em;font-weight:900!important}
.tl-hero .text-white-50{color:rgba(255,255,255,.65)!important}

/* Student dashboard = content rails / episodes */
body.tl10-student .tl-portal-body>.container-fluid,
body.tl10-teacher .tl-portal-body>.container-fluid{
  max-width:var(--tl10-page-max);
  margin-inline:auto;
}
.tl-fix3-class-grid{display:grid!important;gap:.8rem!important}
.tl-final-class-row{
  position:relative!important;
  display:grid!important;
  grid-template-columns:125px minmax(0,1fr) auto auto!important;
  align-items:center!important;
  gap:.9rem!important;
  padding:1rem!important;
  border:1px solid var(--tl10-line)!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#fff,#f8faf9)!important;
  box-shadow:0 7px 22px rgba(4,23,39,.045)!important;
  overflow:hidden;
  transition:transform .24s var(--tl10-ease),box-shadow .24s var(--tl10-ease),border-color .24s!important;
}
.tl-final-class-row::before{
  content:"";
  position:absolute;right:0;top:17%;bottom:17%;width:4px;border-radius:99px;
  background:linear-gradient(var(--tl10-green-500),var(--tl10-gold-500));
  opacity:.7;
}
.tl-final-class-row:hover{
  transform:translateY(-3px);
  border-color:rgba(10,134,107,.17)!important;
  box-shadow:0 16px 34px rgba(4,23,39,.09)!important;
}
.tl-final-class-time{font-size:.86rem;font-weight:900;color:var(--tl10-navy-900)}
.tl-final-class-main{display:grid;gap:.15rem}
.tl-final-class-main strong{font-size:1rem;color:var(--tl10-ink)}
.tl-final-class-main small{color:var(--tl10-muted)}
.tl-status-live,.badge.tl-status-live{
  color:#057057!important;
  background:#e8f8f2!important;
  border:1px solid rgba(13,164,127,.16)!important;
}
.tl-status-live::before{
  content:"";display:inline-block;width:7px;height:7px;margin-left:.4rem;border-radius:50%;
  background:#13c996;box-shadow:0 0 0 0 rgba(19,201,150,.45);animation:tl10Pulse 1.8s infinite;
}
.tl-status-done{background:#edf1f3!important;color:#667382!important}
.tl-status-upcoming{background:#fff6dc!important;color:#936b0f!important}

/* Subject cards: show complete artwork, streaming shelf behavior */
.tl8e-dashboard-subjects,
.tl-final-subject-grid{
  gap:1rem!important;
}
.tl8e-dashboard-subject{
  position:relative!important;
  display:grid!important;
  grid-template-rows:150px auto!important;
  min-height:220px!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid var(--tl10-line)!important;
  border-radius:24px!important;
  background:#fff!important;
  box-shadow:var(--tl10-shadow-sm)!important;
  transition:transform .3s var(--tl10-ease),box-shadow .3s!important;
}
.tl8e-dashboard-subject:hover{transform:translateY(-7px) scale(1.012);box-shadow:var(--tl10-shadow)!important}
.tl8e-dashboard-subject img{
  width:100%!important;height:150px!important;display:block;
  object-fit:contain!important;object-position:center!important;
  padding:.6rem!important;
  background:linear-gradient(145deg,#fcfdfc,#eef4ef)!important;
}
.tl8e-dashboard-subject strong{padding:.9rem 1rem!important;color:var(--tl10-navy-900)!important}
.tl-subject-card{
  overflow:hidden!important;
  border-radius:24px!important;
  transition:transform .3s var(--tl10-ease),box-shadow .3s!important;
}
.tl-subject-card:hover{transform:translateY(-6px);box-shadow:var(--tl10-shadow)!important}
.tl8e-subject-main-link{
  width:100%!important;
  aspect-ratio:16/10!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  overflow:hidden!important;
  background:linear-gradient(145deg,#fbfcfb,#edf4ef)!important;
}
.tl8e-subject-image{
  width:100%!important;height:100%!important;
  object-fit:contain!important;object-position:center!important;
  padding:.7rem!important;background:transparent!important;
  transform:none!important;
}
.tl-subject-card:hover .tl8e-subject-image{transform:scale(1.015)!important}

/* Recording/movie cards */
.tlr-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))!important;
  gap:1rem!important;
}
.tlr-card{
  overflow:hidden;
  transition:transform .3s var(--tl10-ease),box-shadow .3s var(--tl10-ease)!important;
}
.tlr-card:hover{transform:translateY(-7px);box-shadow:var(--tl10-shadow)!important}
.tlr-preview{
  min-height:160px!important;
  position:relative!important;
  display:grid!important;place-items:center!important;
  background:
    radial-gradient(circle at 75% 20%,rgba(208,164,59,.32),transparent 9rem),
    radial-gradient(circle at 15% 80%,rgba(13,164,127,.25),transparent 10rem),
    linear-gradient(135deg,var(--tl10-navy-950),#0b3c50)!important;
}
.tlr-preview::after{
  content:"TEACHERS LIVE";
  position:absolute;left:.8rem;bottom:.45rem;
  font-size:1.6rem;font-weight:900;letter-spacing:-.06em;color:rgba(255,255,255,.055);
}
.tlr-play{
  width:60px!important;height:60px!important;border-radius:50%!important;
  display:grid!important;place-items:center!important;
  color:var(--tl10-green-700)!important;background:#fff!important;
  box-shadow:0 14px 38px rgba(0,0,0,.24)!important;
  transition:transform .24s var(--tl10-ease),box-shadow .24s!important;
}
.tlr-card:hover .tlr-play{transform:scale(1.1);box-shadow:0 18px 46px rgba(0,0,0,.3)!important}
.tlr-body{padding:1rem!important}
.tlr-title{color:var(--tl10-navy-900)!important}
.tlr-meta{color:var(--tl10-muted)!important}

/* Materials */
.tlr-material-grid{gap:.8rem!important}
.tlr-material{
  display:grid!important;grid-template-columns:auto 1fr auto!important;
  gap:.9rem!important;align-items:center!important;
  padding:1rem!important;
  transition:transform .24s var(--tl10-ease),box-shadow .24s!important;
}
.tlr-material:hover{transform:translateY(-3px);box-shadow:var(--tl10-shadow)!important}
.tl-material-icon{
  width:52px!important;height:52px!important;border-radius:16px!important;
  display:grid!important;place-items:center!important;
  color:#fff!important;font-size:.75rem!important;font-weight:900!important;
  background:linear-gradient(135deg,var(--tl10-navy-800),var(--tl10-green-600))!important;
}

/* Teacher dashboard / control studio */
body.tl10-teacher .tl-class-card{
  display:grid!important;
  grid-template-columns:110px minmax(0,1fr) auto!important;
  gap:1rem!important;align-items:center!important;
  padding:1rem!important;
  transition:transform .25s var(--tl10-ease),box-shadow .25s!important;
}
body.tl10-teacher .tl-class-card:hover{transform:translateY(-3px);box-shadow:var(--tl10-shadow)!important}
.tl-teacher-classroom,.tl-student-classroom{
  overflow:hidden!important;
  border-radius:28px!important;
  border:1px solid rgba(255,255,255,.07)!important;
  box-shadow:0 30px 80px rgba(2,13,24,.25)!important;
  background:#020b13!important;
}
.tl-teacher-classroom-bar,.tl-student-classroom-bar{
  background:
    radial-gradient(circle at 80% 0,rgba(208,164,59,.16),transparent 15rem),
    linear-gradient(90deg,var(--tl10-navy-950),#0b3d48)!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
}
.tl-classroom-panel{
  background:linear-gradient(180deg,#f9fbfa,#eef3f0)!important;
  border-right:1px solid rgba(4,31,52,.08)!important;
}
.tl-participant-list{scrollbar-width:thin;scrollbar-color:rgba(7,109,89,.25) transparent}

/* History and profile */
.tl-stat{
  position:relative;
  overflow:hidden;
  min-height:122px;
  padding:1rem!important;
  transition:transform .25s var(--tl10-ease),box-shadow .25s!important;
}
.tl-stat:hover{transform:translateY(-3px);box-shadow:var(--tl10-shadow)!important}
.tl-stat::after{
  content:"";position:absolute;inset:auto -18px -28px auto;width:90px;height:90px;border-radius:50%;
  background:radial-gradient(circle,rgba(13,164,127,.13),transparent 70%);
}
.tl-stat .value{font-size:clamp(1.6rem,3vw,2.4rem)!important;font-weight:900!important;color:var(--tl10-navy-900)!important}
.tl-stat .label{color:var(--tl10-muted)!important}
.tl8e-history-row{padding:1rem!important}
.tl-fix3-profile-summary{
  border-radius:20px!important;
  background:linear-gradient(135deg,#f5faf7,#fff)!important;
  border:1px solid rgba(7,109,89,.10)!important;
}

/* Admin = control center */
.tl-admin-shell{background:#f1f5f3!important}
.tl-sidebar{
  background:
    radial-gradient(circle at 20% 0,rgba(208,164,59,.14),transparent 15rem),
    radial-gradient(circle at 85% 70%,rgba(13,164,127,.12),transparent 18rem),
    linear-gradient(180deg,#041325 0%,#082b3e 58%,#06463c 100%)!important;
  border:0!important;
  box-shadow:18px 0 55px rgba(4,23,39,.13)!important;
}
.tl-sidebar-brand{border-bottom-color:rgba(255,255,255,.08)!important}
.tl-sidebar-label{color:rgba(255,255,255,.42)!important;letter-spacing:.1em!important}
.tl-sidebar .nav-link,.tl8f-nav-group summary{
  border-radius:13px!important;
  transition:transform .2s var(--tl10-ease),background .2s ease!important;
}
.tl-sidebar .nav-link:hover,.tl8f-nav-group summary:hover{
  transform:translateX(-2px);
  background:rgba(255,255,255,.075)!important;
}
.tl-sidebar .nav-link.active{
  background:linear-gradient(135deg,rgba(13,164,127,.31),rgba(208,164,59,.18))!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 10px 28px rgba(0,0,0,.13)!important;
}
.tl-topbar{
  background:rgba(255,255,255,.84)!important;
  backdrop-filter:blur(20px) saturate(145%)!important;
  border-bottom:1px solid var(--tl10-line)!important;
}
body.tl10-admin .tl-main{max-width:none!important}
body.tl10-admin .tl-page-title{font-size:clamp(1.75rem,2.7vw,2.6rem)!important}
.tl-quick-link{
  min-height:86px!important;
  border-radius:18px!important;
  border:1px solid var(--tl10-line)!important;
  background:linear-gradient(135deg,#fff,#f7faf8)!important;
  box-shadow:0 6px 18px rgba(4,23,39,.045)!important;
  transition:transform .24s var(--tl10-ease),box-shadow .24s!important;
}
.tl-quick-link:hover{transform:translateY(-3px);box-shadow:var(--tl10-shadow)!important}

/* Tables */
.table-responsive{border-radius:0 0 var(--tl10-radius) var(--tl10-radius)}
.table{
  --bs-table-bg:transparent!important;
  margin:0!important;
  border-collapse:separate!important;
  border-spacing:0 .4rem!important;
}
.table thead th{
  border:0!important;
  padding:.8rem .9rem!important;
  color:#738092!important;
  font-size:.74rem!important;
  font-weight:850!important;
  white-space:nowrap;
}
.table tbody tr{
  background:#fff!important;
  box-shadow:0 4px 15px rgba(4,23,39,.035)!important;
  transition:transform .16s ease,box-shadow .16s ease!important;
}
.table tbody tr:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(4,23,39,.07)!important}
.table tbody td{
  padding:.85rem .9rem!important;
  vertical-align:middle!important;
  border-top:1px solid rgba(4,31,52,.055)!important;
  border-bottom:1px solid rgba(4,31,52,.055)!important;
}
.table tbody td:first-child{border-radius:0 14px 14px 0;border-right:1px solid rgba(4,31,52,.055)!important}
.table tbody td:last-child{border-radius:14px 0 0 14px;border-left:1px solid rgba(4,31,52,.055)!important}

/* Live control mission-control cards */
.tl-live-control-card{
  overflow:hidden!important;
  transition:transform .25s var(--tl10-ease),box-shadow .25s!important;
}
.tl-live-control-card:hover{transform:translateY(-4px);box-shadow:var(--tl10-shadow)!important}
.tl-live-control-head{
  background:
    radial-gradient(circle at 90% 0,rgba(208,164,59,.16),transparent 12rem),
    linear-gradient(135deg,#f9fbfa,#fff)!important;
}
.tl-live-metric{border-radius:16px!important;background:#f7faf8!important;border:1px solid var(--tl10-line)!important}

/* Public/auth */
.tl-auth-layout{background:var(--tl10-navy-950)!important}
.tl-auth-visual{
  background:
    radial-gradient(circle at 18% 15%,rgba(208,164,59,.30),transparent 19rem),
    radial-gradient(circle at 78% 70%,rgba(13,164,127,.28),transparent 22rem),
    linear-gradient(140deg,#03111f,#092e44 58%,#075f4e)!important;
}
.tl-auth-content{background:linear-gradient(145deg,#fbfdfb,#eef4f0)!important}
.tl7e-public-nav-shell{
  background:rgba(255,255,255,.86)!important;
  backdrop-filter:blur(20px) saturate(150%);
}
.tl7e-public-footer{background:linear-gradient(135deg,#03111f,#093642)!important}

/* Motion */
[data-tl10-reveal]{opacity:0;transform:translateY(16px);transition:opacity .55s var(--tl10-ease),transform .55s var(--tl10-ease)}
[data-tl10-reveal].tl10-visible{opacity:1;transform:none}
@keyframes tl10Pulse{
  0%{box-shadow:0 0 0 0 rgba(19,201,150,.45)}
  70%{box-shadow:0 0 0 10px rgba(19,201,150,0)}
  100%{box-shadow:0 0 0 0 rgba(19,201,150,0)}
}

/* PHONES */
@media(max-width:575.98px){
  body.tl10-student,body.tl10-teacher{padding-bottom:76px}
  .tl-portal-nav{position:sticky!important}
  .tl8d-portal-bar{min-height:64px!important;padding-inline:.8rem!important}
  .tl8d-mobile-menu{display:none!important}
  .tl-portal-body>.container-xl,
  .tl-portal-body>.container-fluid{padding-inline:.85rem!important;padding-top:1rem!important}
  .tl-page-head{align-items:flex-start!important;margin-bottom:1rem!important}
  .tl-page-title{font-size:1.75rem!important}
  .tl-page-subtitle{font-size:.8rem!important}
  .tl-hero{
    min-height:210px!important;
    margin-inline:0!important;
    border-radius:24px!important;
    padding:1.25rem!important;
  }
  .tl-hero h1,.tl-hero h2{font-size:2rem!important}
  .tl-hero::after{font-size:4.2rem;bottom:-.7rem}
  .tl-card{border-radius:20px!important}
  .tl-card-header{min-height:58px;padding:.85rem 1rem!important}
  .tl-card-body{padding:1rem!important}

  .tl-final-class-row{
    grid-template-columns:1fr auto!important;
    gap:.5rem .75rem!important;
    padding:.85rem!important;
  }
  .tl-final-class-time{grid-column:1;font-size:.76rem}
  .tl-final-class-main{grid-column:1}
  .tl-final-class-status{grid-column:2;grid-row:1/3;align-self:start}
  .tl-final-class-actions{grid-column:1/3}
  .tl-final-class-actions .btn{width:100%!important;justify-content:center!important}
  .tl8e-dashboard-subjects{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.7rem!important}
  .tl8e-dashboard-subject{min-height:175px!important;grid-template-rows:112px auto!important;border-radius:18px!important}
  .tl8e-dashboard-subject img{height:112px!important;padding:.35rem!important}
  .tl8e-dashboard-subject strong{font-size:.82rem!important;padding:.65rem .7rem!important}
  .tl-final-subject-grid{--bs-gutter-x:.7rem!important;--bs-gutter-y:.7rem!important}
  .tl-subject-card{border-radius:18px!important}
  .tlr-grid{grid-template-columns:1fr!important}
  .tlr-preview{min-height:145px!important}
  .tlr-material{grid-template-columns:auto 1fr!important}
  .tlr-material>.btn,.tlr-material>a{grid-column:1/3;width:100%}
  .tl-stat{min-height:98px!important}
  .tl-stat .value{font-size:1.55rem!important}
  body.tl10-teacher .tl-class-card{grid-template-columns:1fr auto!important}
  body.tl10-teacher .tl-class-card .tl-time{grid-column:1}
  .tl-teacher-classroom,.tl-student-classroom{border-radius:18px!important;margin-inline:-.2rem}
  .tl-classroom-grid{display:block!important}
  .tl-classroom-panel{max-height:280px!important;border-right:0!important;border-top:1px solid var(--tl10-line)!important}
  .tl-jaas-frame{min-height:58vh!important}
  .table-responsive{border-radius:0!important}
  body.tl10-admin .table{min-width:760px}
}

/* TABLETS */
@media(min-width:576px) and (max-width:991.98px){
  body.tl10-student,body.tl10-teacher{padding-bottom:78px}
  .tl8d-mobile-menu{display:none!important}
  .tl-portal-body>.container-xl,
  .tl-portal-body>.container-fluid{padding-inline:1.2rem!important}
  .tl-hero{min-height:230px!important;border-radius:26px!important}
  .tl-final-class-row{grid-template-columns:110px minmax(0,1fr) auto!important}
  .tl-final-class-actions{grid-column:1/-1;display:flex;justify-content:flex-end}
  .tl8e-dashboard-subjects{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .tlr-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .tl-classroom-grid{grid-template-columns:minmax(0,1fr) 280px!important}
  .tl-sidebar{width:250px!important}
}

/* MOBILE/TABLET BOTTOM NAV */
.tl10-bottom-nav{
  display:none;
}
@media(max-width:991.98px){
  .tl10-bottom-nav{
    position:fixed;
    right:50%;
    bottom:max(10px,env(safe-area-inset-bottom));
    transform:translateX(50%);
    z-index:1060;
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:1fr;
    width:min(calc(100% - 22px),620px);
    min-height:62px;
    padding:.38rem;
    border:1px solid rgba(255,255,255,.52);
    border-radius:22px;
    background:rgba(248,251,249,.90);
    box-shadow:0 18px 45px rgba(3,17,31,.18);
    backdrop-filter:blur(22px) saturate(160%);
  }
  .tl10-bottom-nav a{
    display:grid;
    place-items:center;
    gap:.1rem;
    min-width:0;
    padding:.32rem .2rem;
    border-radius:16px;
    color:#667486;
    text-decoration:none;
    font-size:.67rem;
    font-weight:800;
  }
  .tl10-bottom-nav a .tl10-nav-icon{font-size:1.08rem;line-height:1}
  .tl10-bottom-nav a.active{
    color:#fff;
    background:linear-gradient(135deg,var(--tl10-navy-900),var(--tl10-green-700));
    box-shadow:0 8px 20px rgba(5,44,61,.18);
  }
}

/* Accessibility / reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  [data-tl10-reveal]{opacity:1!important;transform:none!important}
}