:root{
  --tl-navy:#0b1f3a;
  --tl-navy-2:#12345a;
  --tl-navy-3:#1b4773;
  --tl-gold:#c9a34f;
  --tl-gold-soft:#f7efd9;
  --tl-bg:#f5f7fb;
  --tl-card:#fff;
  --tl-border:#e4e9f0;
  --tl-text:#182235;
  --tl-muted:#718096;
  --tl-success:#198754;
  --tl-danger:#dc3545;
  --tl-warning:#b7791f;
  --tl-radius:18px;
  --tl-shadow:0 10px 30px rgba(11,31,58,.08);
  --tl-shadow-lg:0 26px 70px rgba(11,31,58,.16);
}
html{font-size:15px}
body.tl-body{margin:0;background:var(--tl-bg);color:var(--tl-text);font-family:"Segoe UI",Tahoma,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.text-navy{color:var(--tl-navy)!important}
.text-gold{color:var(--tl-gold)!important}
.min-w-0{min-width:0}
.tl-logo-mark{width:42px;height:42px;border-radius:14px;display:inline-grid;place-items:center;background:linear-gradient(145deg,#e7cf94,var(--tl-gold));color:var(--tl-navy);font-weight:900;font-size:22px;box-shadow:0 8px 22px rgba(201,163,79,.22)}
.tl-logo-sm{width:36px;height:36px;border-radius:11px;font-size:18px}
.tl-brand-sub{letter-spacing:.34em;font-size:9px;color:var(--tl-gold);font-weight:800}
.btn-primary{--bs-btn-bg:var(--tl-navy);--bs-btn-border-color:var(--tl-navy);--bs-btn-hover-bg:var(--tl-navy-2);--bs-btn-hover-border-color:var(--tl-navy-2);--bs-btn-active-bg:var(--tl-navy-2)}
.btn-outline-primary{--bs-btn-color:var(--tl-navy);--bs-btn-border-color:var(--tl-navy);--bs-btn-hover-bg:var(--tl-navy);--bs-btn-hover-border-color:var(--tl-navy)}
.form-control,.form-select{border-color:var(--tl-border);border-radius:12px;min-height:44px}
.form-control:focus,.form-select:focus{border-color:var(--tl-gold);box-shadow:0 0 0 .25rem rgba(201,163,79,.16)}
.card{border-color:var(--tl-border);border-radius:var(--tl-radius);box-shadow:0 4px 16px rgba(11,31,58,.04)}
.table{--bs-table-bg:transparent}
.table thead th{font-size:.78rem;color:#718096;background:#f8fafc;border-bottom-color:var(--tl-border);white-space:nowrap}
.table tbody td{vertical-align:middle;border-color:#edf1f5}
.table-hover tbody tr:hover>*{--bs-table-bg-state:#fbfcfe}
.badge{font-weight:700}
.tl-card{background:#fff;border:1px solid var(--tl-border);border-radius:var(--tl-radius);box-shadow:var(--tl-shadow)}
.tl-card-header{padding:1.15rem 1.25rem;border-bottom:1px solid var(--tl-border);display:flex;align-items-center;justify-content:space-between;gap:1rem}
.tl-card-body{padding:1.25rem}
.tl-page-title{font-size:2rem;font-weight:800;color:var(--tl-navy);margin:0}
.tl-page-subtitle{color:var(--tl-muted);margin:.35rem 0 0}
.tl-page-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.tl-kicker{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--tl-gold);font-weight:800}
.tl-empty{padding:3rem 1.5rem;text-align:center;color:var(--tl-muted)}
.tl-empty-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;margin:0 auto 1rem;background:var(--tl-gold-soft);color:var(--tl-navy);font-size:1.5rem}
.tl-status-live{background:#e9f7ef;color:#147a4d}
.tl-status-done{background:#eef2f7;color:#5b6677}
.tl-status-upcoming{background:#eef5ff;color:#275f9b}
.tl-status-off{background:#fff0f2;color:#b83245}
.tl-status-on{background:#e9f7ef;color:#147a4d}

/* Admin */
.tl-admin-shell{min-height:100vh;display:grid;grid-template-columns:270px minmax(0,1fr)}
.tl-sidebar{position:sticky;top:0;height:100vh;padding:1.35rem 1rem;display:flex;flex-direction:column;background:radial-gradient(circle at 25% 6%,rgba(201,163,79,.15),transparent 26%),linear-gradient(180deg,#0b1f3a,#071629);z-index:1040}
.tl-sidebar-brand{padding:.2rem .55rem 1.4rem}
.tl-sidebar-label{padding:0 .65rem .55rem;color:rgba(255,255,255,.4);font-size:.72rem;font-weight:700}
.tl-sidebar-nav .nav-link{color:rgba(255,255,255,.7);display:flex;align-items:center;gap:.7rem;border-radius:12px;padding:.7rem .75rem}
.tl-sidebar-nav .nav-link:hover{color:#fff;background:rgba(255,255,255,.07)}
.tl-sidebar-nav .nav-link.active{color:#fff;background:linear-gradient(90deg,rgba(201,163,79,.18),rgba(255,255,255,.07));box-shadow:inset -3px 0 0 var(--tl-gold)}
.tl-nav-glyph{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.07);color:#e7cf94;font-size:.82rem}
.tl-avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--tl-gold);color:var(--tl-navy);font-weight:900}
.tl-sidebar-muted{font-size:.72rem;color:rgba(255,255,255,.43)}
.tl-main{min-width:0}
.tl-topbar{height:72px;position:sticky;top:0;z-index:1030;display:flex;align-items:center;gap:.8rem;padding:0 1.5rem;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--tl-border)}
.tl-topbar-kicker{font-size:.67rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tl-muted)}
.tl-online-dot{width:8px;height:8px;border-radius:50%;background:#1f9d68;box-shadow:0 0 0 4px rgba(31,157,104,.12)}
.tl-sidebar-toggle{display:none}
.tl-page{padding:1.6rem 1.7rem 3rem;max-width:1500px}
.tl-sidebar-backdrop{display:none}

.tl-stat{height:100%;background:#fff;border:1px solid var(--tl-border);border-radius:18px;padding:1.15rem;box-shadow:0 4px 16px rgba(11,31,58,.04);position:relative;overflow:hidden}
.tl-stat:after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;left:-24px;top:-35px;background:var(--tl-gold-soft)}
.tl-stat .value{position:relative;z-index:1;font-size:2rem;font-weight:850;color:var(--tl-navy);line-height:1}
.tl-stat .label{position:relative;z-index:1;color:var(--tl-muted);font-size:.85rem;margin-top:.5rem}
.tl-stat .icon{position:absolute;left:1rem;bottom:1rem;width:34px;height:34px;border-radius:11px;background:#f8fafc;color:var(--tl-navy);display:grid;place-items:center;font-weight:900}
.tl-quick-link{display:flex;align-items:center;justify-content:space-between;text-decoration:none;background:#fff;border:1px solid var(--tl-border);border-radius:15px;padding:1rem 1.05rem;color:var(--tl-navy);font-weight:700}
.tl-quick-link:hover{transform:translateY(-2px);border-color:rgba(201,163,79,.6);box-shadow:var(--tl-shadow);color:var(--tl-navy)}
.tl-quick-link .arrow{color:var(--tl-gold);font-size:1.2rem}

/* Auth */
.tl-auth-layout{min-height:100vh;display:grid;grid-template-columns:minmax(360px,42%) minmax(0,1fr);background:#fff}
.tl-auth-visual{min-height:100vh;position:relative;overflow:hidden;padding:2.7rem;background:radial-gradient(circle at 15% 10%,rgba(231,207,148,.22),transparent 28%),radial-gradient(circle at 80% 75%,rgba(201,163,79,.10),transparent 22%),linear-gradient(155deg,#0b1f3a,#071629);display:flex;flex-direction:column}
.tl-auth-copy{margin:auto 0;max-width:520px}
.tl-gold-badge{background:rgba(201,163,79,.16);color:#ecd79f;border:1px solid rgba(231,207,148,.22)}
.tl-orbit{position:absolute;border:1px solid rgba(231,207,148,.15);border-radius:50%}
.tl-orbit-1{width:360px;height:360px;left:-130px;bottom:-120px}
.tl-orbit-2{width:250px;height:250px;left:-75px;bottom:-65px}
.tl-orbit-3{width:145px;height:145px;left:-20px;bottom:-10px;background:rgba(201,163,79,.05)}
.tl-auth-content{display:grid;place-items:center;padding:2rem;background:radial-gradient(circle at 100% 0,rgba(201,163,79,.05),transparent 30%),#fff}
.tl-auth-card{width:min(100%,520px);background:#fff;border:1px solid var(--tl-border);border-radius:24px;box-shadow:var(--tl-shadow-lg);padding:2rem}
.tl-auth-title{font-size:2rem;color:var(--tl-navy);font-weight:850}
.tl-auth-subtitle{color:var(--tl-muted)}

/* Portal */
.tl-portal-nav{background:rgba(255,255,255,.95);position:sticky;top:0;z-index:1020;border-bottom:1px solid var(--tl-border)}
.tl-portal-nav .nav-link{color:var(--tl-muted);font-weight:650}
.tl-portal-nav .nav-link.active,.tl-portal-nav .nav-link:hover{background:var(--tl-gold-soft);color:var(--tl-navy)}
.tl-portal-body{min-height:calc(100vh - 60px);background:radial-gradient(circle at 10% 0,rgba(201,163,79,.06),transparent 25%),var(--tl-bg)}
.tl-hero{background:radial-gradient(circle at 12% 15%,rgba(231,207,148,.15),transparent 30%),linear-gradient(135deg,#0b1f3a,#12345a);border-radius:26px;color:#fff;box-shadow:var(--tl-shadow);padding:1.7rem 1.8rem}
.tl-class-card{background:#fff;border:1px solid var(--tl-border);border-radius:18px;padding:1rem 1.15rem;display:grid;grid-template-columns:120px 1fr auto auto;align-items:center;gap:1rem}
.tl-class-card:hover{border-color:rgba(201,163,79,.55);box-shadow:0 8px 24px rgba(11,31,58,.06)}
.tl-time{font-weight:850;color:var(--tl-navy);direction:ltr}
.tl-subject-chip{display:inline-block;padding:.4rem .7rem;border-radius:999px;background:var(--tl-gold-soft);color:var(--tl-navy);font-weight:700;font-size:.82rem}
.tl-recording-card{background:#fff;border:1px solid var(--tl-border);border-radius:18px;overflow:hidden;height:100%;box-shadow:0 4px 16px rgba(11,31,58,.04)}
.tl-recording-thumb{height:135px;background:radial-gradient(circle at 15% 20%,rgba(231,207,148,.16),transparent 30%),linear-gradient(135deg,#0b1f3a,#1b4773);display:grid;place-items:center;color:#fff;font-size:2rem}

/* Public */
.tl-public-hero{min-height:calc(100vh - 77px);display:grid;place-items:center;background:radial-gradient(circle at 15% 5%,rgba(201,163,79,.10),transparent 24%),var(--tl-bg)}
.tl-public-hero .inner{max-width:900px;text-align:center;padding:4rem 1.25rem}
.tl-public-hero h1{font-size:clamp(2.5rem,6vw,5rem);font-weight:900;color:var(--tl-navy);line-height:1.1}
.tl-public-hero p{max-width:700px;margin:1.2rem auto;color:var(--tl-muted);font-size:1.12rem}

/* Utilities */
.tl-progress{height:7px;border-radius:999px;background:#edf1f5;overflow:hidden}
.tl-progress>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--tl-gold),#e0c67f)}
code{direction:ltr}
@media(max-width:1100px){
  .tl-admin-shell{grid-template-columns:1fr}
  .tl-sidebar{position:fixed;inset-block:0;right:0;width:min(270px,84vw);transform:translateX(110%);transition:.2s ease;box-shadow:var(--tl-shadow-lg)}
  .tl-sidebar.open{transform:translateX(0)}
  .tl-sidebar-toggle{display:inline-flex}
  .tl-sidebar-backdrop{position:fixed;inset:0;background:rgba(7,22,41,.48);z-index:1035}
  .tl-sidebar-backdrop.show{display:block}
}
@media(max-width:900px){
  .tl-auth-layout{grid-template-columns:1fr}
  .tl-auth-visual{min-height:auto;padding:1.6rem 1.5rem 2rem}
  .tl-auth-copy{margin:2.5rem 0 .5rem}
  .tl-auth-copy h1{font-size:2rem}
  .tl-auth-copy p,.tl-orbit{display:none}
  .tl-auth-content{padding:1.4rem}
  .tl-class-card{grid-template-columns:1fr}
}
@media(max-width:600px){
  html{font-size:14px}
  .tl-page{padding:1.2rem .8rem 2.5rem}
  .tl-page-title{font-size:1.7rem}
  .tl-topbar{height:64px;padding:0 .8rem}
}