/* Teachers Live — Cinema Learning UI
   Visual-only redesign layer. No route or business-rule changes. */
:root{
  --tl-cinema-navy:#07182c;
  --tl-cinema-navy-2:#0b2340;
  --tl-cinema-emerald:#08745d;
  --tl-cinema-emerald-2:#0a9877;
  --tl-cinema-gold:#c79a2b;
  --tl-cinema-gold-soft:#e4c66e;
  --tl-cinema-ink:#0b1830;
  --tl-cinema-muted:#657386;
  --tl-cinema-bg:#f3f6f2;
  --tl-cinema-card:rgba(255,255,255,.88);
  --tl-cinema-stroke:rgba(8,50,43,.09);
  --tl-cinema-shadow:0 18px 55px rgba(7,24,44,.10);
  --tl-cinema-shadow-lg:0 30px 90px rgba(7,24,44,.17);
  --tl-cinema-radius:24px;
  --tl-cinema-radius-sm:16px;
  --tl-cinema-ease:cubic-bezier(.22,.75,.2,1);
}

html{scroll-behavior:smooth}
body.tl-body{
  background:
    radial-gradient(circle at 8% 5%,rgba(199,154,43,.09),transparent 26rem),
    radial-gradient(circle at 92% 18%,rgba(8,116,93,.08),transparent 30rem),
    var(--tl-cinema-bg);
  color:var(--tl-cinema-ink);
  overflow-x:hidden;
}
body.tl-body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image:linear-gradient(rgba(7,24,44,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(7,24,44,.018) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.35),transparent 55%);
}

/* Shared surfaces */
.tl-card,.card,.tl-subject-card,.tlr-card,.tl-final-class-row{
  border-color:var(--tl-cinema-stroke)!important;
}
.tl-card{
  border-radius:var(--tl-cinema-radius)!important;
  background:var(--tl-cinema-card)!important;
  box-shadow:var(--tl-cinema-shadow)!important;
  backdrop-filter:blur(18px);
  overflow:hidden;
  transition:transform .35s var(--tl-cinema-ease),box-shadow .35s var(--tl-cinema-ease),border-color .35s ease;
}
.tl-card:hover{box-shadow:0 24px 68px rgba(7,24,44,.13)!important}
.tl-card-header{
  min-height:72px;
  padding:1.05rem 1.25rem!important;
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(248,250,248,.66))!important;
  border-bottom:1px solid var(--tl-cinema-stroke)!important;
}
.tl-card-body{padding:1.25rem!important}
.tl-page-title,.text-navy{color:var(--tl-cinema-navy)!important}
.tl-page-title{font-weight:900!important;letter-spacing:-.035em}
.tl-page-subtitle{color:var(--tl-cinema-muted)!important}
.tl-kicker{
  color:var(--tl-cinema-emerald)!important;
  font-weight:800!important;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.btn{
  border-radius:13px!important;
  font-weight:800!important;
  transition:transform .18s var(--tl-cinema-ease),box-shadow .2s ease,background-color .2s ease,border-color .2s ease!important;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-primary{
  background:linear-gradient(135deg,var(--tl-cinema-emerald),var(--tl-cinema-emerald-2))!important;
  border-color:transparent!important;
  box-shadow:0 8px 22px rgba(8,116,93,.20);
}
.btn-primary:hover{box-shadow:0 12px 28px rgba(8,116,93,.28)}
.btn-outline-primary{
  color:var(--tl-cinema-emerald)!important;
  border-color:rgba(8,116,93,.34)!important;
  background:rgba(255,255,255,.78)!important;
}
.btn-outline-primary:hover{color:white!important;background:var(--tl-cinema-emerald)!important}
.form-control,.form-select{
  border-radius:14px!important;
  border-color:rgba(7,24,44,.12)!important;
  min-height:46px;
  background-color:rgba(255,255,255,.88)!important;
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
.form-control:focus,.form-select:focus{
  border-color:rgba(8,116,93,.55)!important;
  box-shadow:0 0 0 .25rem rgba(8,116,93,.10)!important;
}

/* Portal navigation */
.tl-portal-nav{
  background:rgba(248,251,249,.82)!important;
  backdrop-filter:blur(20px) saturate(145%);
  border-bottom:1px solid rgba(7,24,44,.07)!important;
  box-shadow:0 10px 35px rgba(7,24,44,.06)!important;
}
.tl8d-portal-bar{min-height:74px!important}
.tl8d-desktop-links{
  padding:.32rem;
  border-radius:18px;
  background:rgba(7,24,44,.035);
}
.tl8d-desktop-links .nav-link{
  position:relative; overflow:hidden;
  border-radius:13px!important;
  color:#405167!important;
  font-weight:800;
}
.tl8d-desktop-links .nav-link.active{
  color:white!important;
  background:linear-gradient(135deg,var(--tl-cinema-navy),#123b58)!important;
  box-shadow:0 8px 22px rgba(7,24,44,.15);
}
.tl8d-desktop-links .nav-link::after{
  content:"";position:absolute;inset:auto 18% 4px;height:2px;border-radius:99px;
  background:var(--tl-cinema-gold);transform:scaleX(0);transition:transform .25s var(--tl-cinema-ease)
}
.tl8d-desktop-links .nav-link:hover::after{transform:scaleX(1)}
.tl-portal-body{min-height:calc(100vh - 74px)}

/* Cinematic hero */
.tl-hero{
  position:relative;
  min-height:210px;
  display:flex;
  align-items:flex-end;
  padding:2rem!important;
  border-radius:30px!important;
  overflow:hidden;
  color:white;
  background:
    radial-gradient(circle at 16% 22%,rgba(199,154,43,.32),transparent 16rem),
    radial-gradient(circle at 88% 30%,rgba(10,152,119,.30),transparent 18rem),
    linear-gradient(135deg,#06172c 0%,#0c2f46 48%,#075f50 100%)!important;
  box-shadow:var(--tl-cinema-shadow-lg);
}
.tl-hero::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(1,8,18,.15),transparent 55%),repeating-linear-gradient(115deg,rgba(255,255,255,.025) 0 1px,transparent 1px 15px);
}
.tl-hero::after{
  content:"TEACHERS LIVE";
  position:absolute;inset:auto auto -20px 28px;
  font-size:clamp(3rem,8vw,8rem);font-weight:900;letter-spacing:-.06em;
  color:rgba(255,255,255,.035);white-space:nowrap;pointer-events:none;
}
.tl-hero>*{position:relative;z-index:2}
.tl-hero h1{font-size:clamp(1.75rem,4vw,3.25rem)!important;letter-spacing:-.04em}

/* Dashboard schedule as premium episode rows */
.tl-fix3-class-grid{display:grid!important;gap:.8rem!important}
.tl-final-class-row{
  position:relative;
  display:grid!important;
  grid-template-columns:130px minmax(0,1fr) auto auto;
  gap:1rem;align-items:center;
  padding:1rem 1.1rem!important;
  border:1px solid rgba(7,24,44,.07)!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(247,250,248,.82))!important;
  box-shadow:0 8px 24px rgba(7,24,44,.05);
  transition:transform .25s var(--tl-cinema-ease),box-shadow .25s,border-color .25s!important;
}
.tl-final-class-row::before{
  content:"";position:absolute;right:0;top:18%;bottom:18%;width:4px;border-radius:99px;
  background:linear-gradient(var(--tl-cinema-emerald),var(--tl-cinema-gold));opacity:.58;
}
.tl-final-class-row:hover{
  transform:translateY(-3px)!important;
  box-shadow:0 16px 34px rgba(7,24,44,.10)!important;
  border-color:rgba(8,116,93,.18)!important;
}
.tl-final-class-time{font-weight:900!important;color:var(--tl-cinema-navy)!important;letter-spacing:.02em}
.tl-final-class-main strong{font-size:1.05rem}
.tl-final-class-main small{color:var(--tl-cinema-muted)}
.tl-status-live{
  background:rgba(8,116,93,.12)!important;color:var(--tl-cinema-emerald)!important;
  border:1px solid rgba(8,116,93,.20);
}
.tl-status-live::before{content:"";display:inline-block;width:7px;height:7px;margin-left:6px;border-radius:50%;background:#18c98f;box-shadow:0 0 0 0 rgba(24,201,143,.5);animation:tlCinemaPulse 1.8s infinite}
.tl-status-done{background:#eef1f3!important;color:#687585!important}
.tl-status-upcoming{background:#fff8e3!important;color:#9b7417!important}
.tl-cinema-watch{white-space:nowrap}

/* Subject rails/cards */
.tl8e-dashboard-subjects{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1rem!important;
}
.tl8e-dashboard-subject{
  position:relative;min-height:180px;border-radius:22px!important;overflow:hidden;
  padding:0!important;background:#fff!important;border:1px solid var(--tl-cinema-stroke)!important;
  box-shadow:0 10px 30px rgba(7,24,44,.07);
  transition:transform .3s var(--tl-cinema-ease),box-shadow .3s!important;
}
.tl8e-dashboard-subject:hover{transform:translateY(-7px) scale(1.015);box-shadow:0 22px 50px rgba(7,24,44,.14)}
.tl8e-dashboard-subject img{
  width:100%!important;height:132px!important;
  object-fit:contain!important;object-position:center!important;
  background:linear-gradient(145deg,#fbfcfa,#eef3ee)!important;
  padding:.5rem!important;
  transition:transform .4s var(--tl-cinema-ease);
}
.tl8e-dashboard-subject:hover img{transform:scale(1.025)}
.tl8e-dashboard-subject strong{display:block;padding:.85rem 1rem!important;text-align:right!important;color:var(--tl-cinema-navy)!important}
.tl-final-subject-grid .tl-subject-card{
  border-radius:24px!important;overflow:hidden;background:rgba(255,255,255,.94)!important;
  box-shadow:0 12px 34px rgba(7,24,44,.08)!important;
  transition:transform .3s var(--tl-cinema-ease),box-shadow .3s!important;
}
.tl-final-subject-grid .tl-subject-card:hover{transform:translateY(-6px);box-shadow:0 22px 52px rgba(7,24,44,.14)!important}
.tl8e-subject-main-link{
  display:flex!important;align-items:center;justify-content:center;
  width:100%;aspect-ratio:16/10;
  background:linear-gradient(145deg,#fbfcfa,#edf3ed)!important;
  overflow:hidden!important;
}
.tl8e-subject-image{
  width:100%!important;height:100%!important;
  object-fit:contain!important;object-position:center!important;
  padding:.65rem!important;background:transparent!important;
  transform:none!important;
}
.tl-subject-card:hover .tl8e-subject-image{transform:scale(1.015)!important}

/* Recording/movie cards */
.tlr-grid{gap:1rem!important}
.tlr-card{
  border-radius:22px!important;
  background:rgba(255,255,255,.95)!important;
  box-shadow:0 10px 32px rgba(7,24,44,.07)!important;
  overflow:hidden;
  transition:transform .3s var(--tl-cinema-ease),box-shadow .3s!important;
}
.tlr-card:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(7,24,44,.14)!important}
.tlr-preview{
  min-height:140px!important;
  background:
    radial-gradient(circle at 65% 25%,rgba(199,154,43,.30),transparent 8rem),
    linear-gradient(135deg,#06172c,#0c4c52)!important;
}
.tlr-play{
  width:54px!important;height:54px!important;border-radius:50%!important;
  display:grid!important;place-items:center;
  background:rgba(255,255,255,.94)!important;color:var(--tl-cinema-emerald)!important;
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  transition:transform .25s var(--tl-cinema-ease),box-shadow .25s;
}
.tlr-card:hover .tlr-play{transform:scale(1.09);box-shadow:0 14px 36px rgba(0,0,0,.28)}
.tlr-status{background:rgba(8,116,93,.10)!important;color:var(--tl-cinema-emerald)!important}
.tlr-watch{min-width:44px}

/* Tables/Admin productivity polish */
.tl-admin-shell{background:#f4f7f5!important}
.tl-sidebar{
  background:
    radial-gradient(circle at 40% 0,rgba(199,154,43,.12),transparent 14rem),
    linear-gradient(180deg,#06172b 0%,#08283a 58%,#063c36 100%)!important;
  box-shadow:14px 0 40px rgba(7,24,44,.10);
}
.tl-sidebar .nav-link,.tl8f-nav-group summary{border-radius:13px!important;transition:background .2s,transform .2s}
.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(10,152,119,.34),rgba(199,154,43,.20))!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.tl-topbar{
  background:rgba(255,255,255,.82)!important;backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(7,24,44,.07)!important;
}
.table{
  --bs-table-bg:transparent!important;
  border-collapse:separate!important;border-spacing:0 .45rem!important;
}
.table thead th{border:0!important;color:#718094!important;font-size:.78rem;text-transform:none}
.table tbody tr{background:rgba(255,255,255,.88);box-shadow:0 5px 18px rgba(7,24,44,.035)}
.table tbody td{border-top:1px solid rgba(7,24,44,.06)!important;border-bottom:1px solid rgba(7,24,44,.06)!important;vertical-align:middle}
.table tbody td:first-child{border-radius:0 13px 13px 0;border-right:1px solid rgba(7,24,44,.06)!important}
.table tbody td:last-child{border-radius:13px 0 0 13px;border-left:1px solid rgba(7,24,44,.06)!important}

/* Classroom */
.tl-student-classroom,.tl-teacher-classroom{
  border-radius:26px!important;overflow:hidden!important;
  box-shadow:0 26px 70px rgba(3,12,25,.22)!important;
  border:1px solid rgba(255,255,255,.06);
}
.tl-jaas-frame{background:#030b14!important}
.tl-student-classroom-bar{
  background:linear-gradient(90deg,#06172c,#0a3d46)!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
}
.tl-live-pulse{box-shadow:0 0 0 rgba(23,210,145,.45);animation:tlCinemaPulse 1.8s infinite}

/* Auth/Public */
.tl-auth-visual{
  background:
    radial-gradient(circle at 22% 18%,rgba(199,154,43,.30),transparent 18rem),
    radial-gradient(circle at 78% 68%,rgba(10,152,119,.28),transparent 22rem),
    linear-gradient(140deg,#041326,#0a3144 55%,#07604f)!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(18px)}
.tl7e-public-footer{background:linear-gradient(135deg,#041326,#0a3542)!important}

/* Motion/reveal */
[data-tl-cinema-reveal]{opacity:0;transform:translateY(16px);transition:opacity .55s var(--tl-cinema-ease),transform .55s var(--tl-cinema-ease)}
[data-tl-cinema-reveal].is-visible{opacity:1;transform:none}
@keyframes tlCinemaPulse{0%{box-shadow:0 0 0 0 rgba(24,201,143,.45)}70%{box-shadow:0 0 0 9px rgba(24,201,143,0)}100%{box-shadow:0 0 0 0 rgba(24,201,143,0)}}

@media(max-width:991.98px){
  .tl-hero{min-height:180px;padding:1.4rem!important;border-radius:24px!important}
  .tl-final-class-row{grid-template-columns:1fr auto!important;gap:.65rem!important}
  .tl-final-class-time{grid-column:1}
  .tl-final-class-main{grid-column:1}
  .tl-final-class-status{grid-column:2;grid-row:1/3}
  .tl-final-class-actions{grid-column:1/3}
  .tl-final-class-actions .btn{width:100%}
}
@media(max-width:575.98px){
  .tl-card{border-radius:20px!important}
  .tl-card-body{padding:1rem!important}
  .tl-hero{margin-inline:-.25rem;border-radius:20px!important}
  .tl8e-dashboard-subjects{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.7rem!important}
  .tl8e-dashboard-subject{min-height:145px}
  .tl8e-dashboard-subject img{height:102px!important}
  .tl-final-subject-grid .tl-subject-card{border-radius:18px!important}
  .tl8e-subject-image{padding:.35rem!important}
  .tlr-grid{grid-template-columns:1fr!important}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
  [data-tl-cinema-reveal]{opacity:1!important;transform:none!important}
}


/* PHASE 9 FIX1 — real cinematic public/login experience */
.tl-public:has(.tl-cinema-entry){
  min-height:100vh;
  background:#061526;
}
.tl-public:has(.tl-cinema-entry) > .navbar{
  position:absolute!important;
  top:0;left:0;right:0;
  z-index:30;
  background:linear-gradient(180deg,rgba(4,15,27,.80),rgba(4,15,27,.18),transparent)!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.tl-public:has(.tl-cinema-entry) > .navbar .navbar-brand strong,
.tl-public:has(.tl-cinema-entry) > .navbar .nav-link{color:#fff!important}
.tl-public:has(.tl-cinema-entry) > .navbar .tl-brand-sub{color:var(--tl-cinema-gold-soft)!important}
.tl-public:has(.tl-cinema-entry) > .navbar .btn-light{
  color:#fff!important;background:rgba(255,255,255,.09)!important;border-color:rgba(255,255,255,.18)!important;
}
.tl-public:has(.tl-cinema-entry) > .tl7e-public-footer{display:none!important}

.tl-cinema-entry{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  isolation:isolate;
  color:#fff;
  background:
    linear-gradient(90deg,rgba(3,12,23,.12),rgba(3,12,23,.50)),
    radial-gradient(circle at 82% 18%,rgba(199,154,43,.18),transparent 19rem),
    radial-gradient(circle at 13% 72%,rgba(8,143,112,.26),transparent 24rem),
    linear-gradient(135deg,#03101f 0%,#071b2e 43%,#08372f 100%);
}
.tl-cinema-entry::before{
  content:"";
  position:absolute;inset:0;
  z-index:-2;
  opacity:.42;
  background:
    linear-gradient(115deg,transparent 0 58%,rgba(255,255,255,.025) 58% 58.4%,transparent 58.4%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.025) 0 1px,transparent 1px 22px);
  mask-image:linear-gradient(90deg,#000,transparent 78%);
}
.tl-cinema-entry::after{
  content:"";
  position:absolute;inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(3,12,23,.04),rgba(3,12,23,.08) 60%,rgba(3,12,23,.38));
}
.tl-cinema-entry-glow{
  position:absolute;border-radius:50%;filter:blur(8px);pointer-events:none;z-index:-1;
}
.tl-cinema-entry-glow-a{
  width:420px;height:420px;right:-140px;top:15%;
  background:radial-gradient(circle,rgba(206,165,59,.13),transparent 68%);
  animation:tlCinemaFloat 8s ease-in-out infinite;
}
.tl-cinema-entry-glow-b{
  width:520px;height:520px;left:-180px;bottom:-180px;
  background:radial-gradient(circle,rgba(8,152,119,.18),transparent 68%);
  animation:tlCinemaFloat 10s ease-in-out infinite reverse;
}
.tl-cinema-entry-grid{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(390px,.72fr);
  gap:clamp(2rem,5vw,6rem);
  align-items:center;
  padding-top:120px!important;
  padding-bottom:64px!important;
}
.tl-cinema-entry-story{
  position:relative;
  min-height:630px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(1rem,3vw,3rem);
}
.tl-cinema-entry-brand{display:none}
.tl-cinema-entry-copy{max-width:690px}
.tl-cinema-entry-kicker{
  display:inline-flex;align-items:center;gap:.65rem;
  padding:.55rem .85rem;border:1px solid rgba(255,255,255,.14);
  border-radius:999px;background:rgba(255,255,255,.06);
  color:#e8f7f1;font-size:.88rem;font-weight:800;
  backdrop-filter:blur(10px);
}
.tl-cinema-live-dot{
  width:8px;height:8px;border-radius:50%;background:#22d6a1;
  box-shadow:0 0 0 0 rgba(34,214,161,.45);
  animation:tlCinemaPulse 1.8s infinite;
}
.tl-cinema-entry-copy h1{
  margin:1.25rem 0 1rem;
  font-size:clamp(4rem,7vw,7.8rem);
  line-height:.90;
  letter-spacing:-.065em;
  font-weight:900;
}
.tl-cinema-entry-copy h1 em{
  color:var(--tl-cinema-gold-soft);
  font-style:normal;
  text-shadow:0 16px 50px rgba(199,154,43,.18);
}
.tl-cinema-entry-copy p{
  max-width:610px;margin:0;
  color:rgba(255,255,255,.67);
  font-size:clamp(1rem,1.45vw,1.18rem);
  line-height:2;
}
.tl-cinema-entry-features{
  display:flex;flex-wrap:wrap;gap:.7rem;
  margin-top:2rem;
}
.tl-cinema-entry-features>div{
  display:flex;align-items:center;gap:.75rem;
  min-width:180px;
  padding:.8rem .95rem;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:rgba(255,255,255,.045);
  backdrop-filter:blur(12px);
  transition:transform .25s var(--tl-cinema-ease),background .25s,border-color .25s;
}
.tl-cinema-entry-features>div:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.075);
  border-color:rgba(228,198,110,.22);
}
.tl-cinema-feature-icon{
  display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;
  border-radius:12px;background:linear-gradient(145deg,rgba(10,152,119,.28),rgba(199,154,43,.16));
  color:#fff;font-weight:900;
}
.tl-cinema-entry-features strong{display:block;font-size:.86rem;color:#fff}
.tl-cinema-entry-features small{display:block;margin-top:.12rem;color:rgba(255,255,255,.46);font-size:.72rem}
.tl-cinema-entry-signature{
  position:absolute;right:0;bottom:0;
  font-size:clamp(3rem,8vw,8rem);font-weight:900;letter-spacing:-.07em;
  color:rgba(255,255,255,.025);
  white-space:nowrap;pointer-events:none;
}

.tl-cinema-login-panel{display:flex;justify-content:center}
.tl-cinema-login-card{
  width:min(100%,520px);
  position:relative;
  padding:clamp(1.35rem,3vw,2rem);
  border:1px solid rgba(255,255,255,.12);
  border-radius:30px;
  background:linear-gradient(155deg,rgba(255,255,255,.97),rgba(247,250,248,.92));
  color:var(--tl-cinema-ink);
  box-shadow:0 35px 100px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(24px) saturate(145%);
  animation:tlCinemaCardIn .7s var(--tl-cinema-ease) both;
}
.tl-cinema-login-card::before{
  content:"";
  position:absolute;inset:0 auto auto 12%;
  width:76%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(199,154,43,.8),transparent);
}
.tl-cinema-login-head{margin-bottom:1.25rem}
.tl-cinema-login-eyebrow{
  color:var(--tl-cinema-emerald);font-size:.78rem;font-weight:900;letter-spacing:.08em;
}
.tl-cinema-login-head h2{
  margin:.3rem 0 .35rem;
  font-size:clamp(1.8rem,3vw,2.45rem);
  font-weight:900;letter-spacing:-.045em;color:var(--tl-cinema-navy);
}
.tl-cinema-login-head p{margin:0;color:#7a8695;font-size:.9rem}
.tl-cinema-role-switch{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;
  padding:.4rem;margin-bottom:1.35rem;border-radius:17px;
  background:#eef2ef;border:1px solid rgba(7,24,44,.06);
}
.tl-cinema-role-switch a{
  display:flex;align-items:center;justify-content:center;gap:.38rem;
  min-height:47px;padding:.65rem;border-radius:13px;
  color:#536174;text-decoration:none;font-weight:800;font-size:.9rem;
  transition:all .22s var(--tl-cinema-ease);
}
.tl-cinema-role-switch a:hover{background:rgba(255,255,255,.7);color:var(--tl-cinema-navy)}
.tl-cinema-role-switch a.active{
  color:#fff;
  background:linear-gradient(135deg,var(--tl-cinema-navy),#0b4b45);
  box-shadow:0 8px 20px rgba(7,24,44,.18);
  transform:translateY(-1px);
}
.tl-cinema-role-icon{font-size:.8rem;opacity:.82}
.tl-cinema-login-form{display:grid;gap:1rem}
.tl-cinema-field .form-label{font-size:.82rem;font-weight:800;color:#3c4a5c;margin-bottom:.45rem}
.tl-cinema-input-wrap{position:relative}
.tl-cinema-input-wrap .form-control{
  min-height:58px!important;
  padding-right:3rem!important;
  border-radius:16px!important;
  background:#fff!important;
  border:1px solid #dfe6e2!important;
  box-shadow:0 6px 18px rgba(7,24,44,.035);
}
.tl-cinema-input-wrap .form-control:focus{
  border-color:rgba(8,116,93,.52)!important;
  box-shadow:0 0 0 4px rgba(8,116,93,.08),0 10px 28px rgba(7,24,44,.06)!important;
  transform:translateY(-1px);
}
.tl-cinema-input-icon{
  position:absolute;right:1rem;top:50%;transform:translateY(-50%);
  z-index:2;color:var(--tl-cinema-emerald);font-size:.92rem;font-weight:900;
}
.tl-cinema-field-hint{display:block;margin-top:.4rem;color:#99a2ad;font-size:.72rem}
.tl-cinema-login-submit{
  min-height:57px;
  display:flex!important;align-items:center;justify-content:space-between!important;
  padding-inline:1.2rem!important;
  border-radius:16px!important;
  box-shadow:0 12px 28px rgba(8,116,93,.22)!important;
}
.tl-cinema-login-submit span:last-child{
  display:grid;place-items:center;width:30px;height:30px;border-radius:10px;
  background:rgba(255,255,255,.14);transition:transform .2s;
}
.tl-cinema-login-submit:hover span:last-child{transform:translateX(-4px)}
.tl-cinema-remember{display:flex;align-items:center;gap:.55rem;color:#667386;font-size:.82rem}
.tl-cinema-login-foot{
  display:flex;align-items:center;justify-content:center;gap:.7rem;
  margin-top:1.25rem;padding-top:1rem;border-top:1px solid #e8ece9;
  color:#9aa4ae;font-size:.68rem;font-weight:700;
}
.tl-cinema-login-foot i{width:4px;height:4px;border-radius:50%;background:var(--tl-cinema-gold)}
.tl-cinema-otp-form{
  margin-top:1rem;padding-top:1rem;border-top:1px solid #e6ebe8;
}
.tl-cinema-otp-input{text-align:center!important;letter-spacing:.5em!important;font-size:1.25rem!important;font-weight:900!important}
.tl-cinema-profile-picker{display:grid;gap:.55rem}
.tl-cinema-picker-title{font-weight:900;color:var(--tl-cinema-navy);margin-bottom:.2rem}
.tl-cinema-profile-item{
  display:grid;grid-template-columns:auto 1fr auto;gap:.75rem;align-items:center;
  width:100%;padding:.75rem;border:1px solid #e1e7e3;border-radius:16px;
  background:#fff;color:var(--tl-cinema-ink);text-align:right;
  transition:transform .2s var(--tl-cinema-ease),box-shadow .2s,border-color .2s;
}
.tl-cinema-profile-item:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(7,24,44,.08);border-color:rgba(8,116,93,.28)}
.tl-cinema-profile-avatar{
  display:grid;place-items:center;width:42px;height:42px;border-radius:13px;
  background:linear-gradient(135deg,var(--tl-cinema-navy),var(--tl-cinema-emerald));color:#fff;font-weight:900;
}
.tl-cinema-profile-meta strong,.tl-cinema-profile-meta small{display:block}
.tl-cinema-profile-meta small{color:#8a95a1;font-size:.72rem;margin-top:.15rem}
.tl-cinema-profile-arrow{color:var(--tl-cinema-emerald);font-weight:900}

@keyframes tlCinemaCardIn{
  from{opacity:0;transform:translateY(28px) scale(.985)}
  to{opacity:1;transform:none}
}
@keyframes tlCinemaFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-20px,0)}
}

@media (max-width:991.98px){
  .tl-public:has(.tl-cinema-entry) > .navbar{position:relative!important;background:#061526!important}
  .tl-cinema-entry-grid{
    grid-template-columns:1fr;gap:1.5rem;padding-top:2rem!important;padding-bottom:2rem!important;
  }
  .tl-cinema-entry-story{min-height:auto;padding:1rem 0}
  .tl-cinema-entry-copy h1{font-size:clamp(3.2rem,11vw,5.5rem)}
  .tl-cinema-entry-features{display:none}
  .tl-cinema-entry-signature{display:none}
  .tl-cinema-login-panel{justify-content:stretch}
  .tl-cinema-login-card{width:100%}
}
@media (max-width:575.98px){
  .tl-cinema-entry{min-height:100dvh}
  .tl-cinema-entry-grid{padding-inline:1rem!important}
  .tl-cinema-entry-story{padding:.35rem 0}
  .tl-cinema-entry-copy p{font-size:.88rem;line-height:1.8}
  .tl-cinema-login-card{padding:1.1rem;border-radius:24px}
  .tl-cinema-role-switch a{min-height:44px;font-size:.82rem}
  .tl-cinema-role-icon{display:none}
}
@media (prefers-reduced-motion:reduce){
  .tl-cinema-login-card,.tl-cinema-entry-glow-a,.tl-cinema-entry-glow-b{animation:none!important}
}