/* =====================================================================
   school kfoo — Premium purple-neon design system (RTL, Arabic)
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&family=Tajawal:wght@400;500;700&display=swap');

:root{
  /* palette */
  --purple:#8B5CF6;
  --violet:#6D28D9;
  --electric:#A855F7;
  --bg:#050505;
  --bg-2:#0B0B14;
  --surface:#11111d;
  --text:#FFFFFF;
  --muted:#B8B8D0;
  --line:rgba(255,255,255,.08);

  --grad:linear-gradient(135deg,#A855F7 0%,#8B5CF6 45%,#6D28D9 100%);
  --grad-soft:linear-gradient(135deg,rgba(168,85,247,.18),rgba(109,40,217,.10));
  --glow:0 0 0 1px rgba(139,92,246,.25),0 18px 60px -12px rgba(139,92,246,.55);
  --shadow:0 20px 60px -20px rgba(0,0,0,.7);
  --radius:18px;
  --radius-sm:12px;
  --maxw:1200px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Cairo','Tajawal',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
  overflow-x:hidden;
  position:relative;
  min-height:100vh;
}
/* ambient neon blobs */
body::before,body::after{
  content:"";position:fixed;z-index:0;border-radius:50%;
  filter:blur(120px);opacity:.45;pointer-events:none;
}
body::before{width:520px;height:520px;background:#6D28D9;top:-160px;inset-inline-start:-120px;}
body::after{width:480px;height:480px;background:#A855F7;bottom:-180px;inset-inline-end:-140px;opacity:.30;}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{line-height:1.25;font-weight:800}
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:20px;position:relative;z-index:1}
section{position:relative;z-index:1}

/* utilities ---------------------------------------------------------- */
.text-grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.muted{color:var(--muted)}
.center{text-align:center}
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:40px}
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-1{gap:8px}.gap-2{gap:16px}.gap-3{gap:24px}.wrap{flex-wrap:wrap}
.hide-mobile{}

/* glass -------------------------------------------------------------- */
.glass{
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:var(--radius);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:var(--shadow);
}

/* buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-weight:700;font-size:.98rem;
  padding:12px 22px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;transition:.25s ease;white-space:nowrap;
}
.btn-lg{padding:15px 30px;font-size:1.05rem}
.btn-block{display:flex;width:100%}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 30px -8px rgba(139,92,246,.7)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -8px rgba(168,85,247,.8)}
.btn-ghost{background:rgba(255,255,255,.04);color:#fff;border-color:var(--line)}
.btn-ghost:hover{border-color:var(--purple);background:rgba(139,92,246,.12)}
/* Hero «مشاهدة الدورات» button only — blue gradient background (scoped; other ghost buttons unchanged) */
.hero-cta .btn-ghost{
  background:linear-gradient(135deg,#1e40af 0%,#2563eb 45%,#22d3ee 100%);
  color:#fff;border-color:rgba(56,189,248,.55);
  box-shadow:0 10px 30px -8px rgba(37,99,235,.6);
}
.hero-cta .btn-ghost:hover{
  background:linear-gradient(135deg,#1d4ed8 0%,#3b82f6 45%,#38bdf8 100%);
  border-color:#38bdf8;transform:translateY(-2px);
  box-shadow:0 16px 40px -8px rgba(56,189,248,.78);
}
.btn-danger{background:rgba(248,113,113,.12);color:#fca5a5;border-color:rgba(248,113,113,.4)}
.btn-danger:hover{background:rgba(248,113,113,.22)}
.btn-sm{padding:8px 14px;font-size:.85rem}

/* badges ------------------------------------------------------------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;
  padding:5px 12px;border-radius:999px;background:rgba(139,92,246,.15);color:#c4b5fd;border:1px solid rgba(139,92,246,.3)}
.badge-green{background:rgba(52,211,153,.14);color:#6ee7b7;border-color:rgba(52,211,153,.3)}
.badge-amber{background:rgba(251,191,36,.14);color:#fcd34d;border-color:rgba(251,191,36,.3)}
.badge-red{background:rgba(248,113,113,.14);color:#fca5a5;border-color:rgba(248,113,113,.3)}
.badge-gray{background:rgba(255,255,255,.06);color:var(--muted);border-color:var(--line)}

/* ============================ NAVBAR ============================== */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:rgba(5,5,5,.7);border-bottom:1px solid var(--line)}
.nav .container{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.25rem}
.brand .logo{width:40px;height:40px;border-radius:11px;background:var(--grad);display:grid;place-items:center;
  font-size:1.1rem;box-shadow:0 8px 24px -6px rgba(139,92,246,.8)}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{color:var(--muted);font-weight:600;font-size:.95rem;transition:.2s}
.nav-links a:hover{color:#fff}
.nav-actions{display:flex;gap:10px;align-items:center}
.nav-toggle{display:none;background:none;border:0;color:#fff;font-size:1.5rem;cursor:pointer}
/* desktop header (RTL): logo → right edge · links centered in the middle · buttons → left edge.
   Pure flexbox — the links fill the middle & center themselves, so NOTHING is ever pushed
   off-screen regardless of viewport width (no hardcoded pixel offsets). */
@media(min-width:769px){
  .nav-links{flex:1;justify-content:center}
}

/* ============================ HERO ================================ */
.hero{padding:90px 0 80px;text-align:center}
.hero .eyebrow{display:inline-flex;margin-bottom:22px}
.hero h1{font-size:clamp(2.2rem,6vw,4rem);font-weight:900;letter-spacing:-1px}
.hero p{max-width:680px;margin:22px auto 0;color:var(--muted);font-size:1.15rem}
.hero-cta{display:flex;gap:14px;justify-content:center;margin-top:36px;flex-wrap:wrap}
.hero-visual{margin-top:60px;position:relative}
/* frameless scaling wrapper: the embed renders at a 1280x720 design canvas and is
   scaled by JS to fill this box → looks identical (not cramped) on phone/laptop/desktop */
.hero-orb{width:min(960px,100%);margin-inline:auto;aspect-ratio:16/9;position:relative;overflow:hidden}
.hero-embed{position:absolute;top:0;left:0;width:1280px;height:720px;border:0;background:transparent;transform-origin:top left}
/* site logo (KFOO wordmark) — dark-navy art inverted to white for the dark UI */
.brand-img{height:42px;width:auto;display:block;filter:brightness(0) invert(1)}
.sidebar .brand-img{height:38px}
.auth-card .brand-img{height:52px;margin-inline:auto}
@media(max-width:600px){.brand-img{height:34px}}
.float{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

/* mock chart inside hero */
.chart-mock{width:80%;height:60%;display:flex;align-items:flex-end;gap:10px}
.chart-mock span{flex:1;background:var(--grad);border-radius:8px 8px 0 0;opacity:.85;animation:grow 2.4s ease infinite alternate}
@keyframes grow{from{transform:scaleY(.45)}to{transform:scaleY(1)}}

/* ============================ STATS =============================== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{padding:26px 20px;text-align:center}
.stat .num{font-size:2.1rem;font-weight:900}
.stat .lbl{color:var(--muted);font-size:.95rem;margin-top:4px}

/* section header */
.sec{padding:80px 0}
.sec-head{text-align:center;max-width:640px;margin:0 auto 48px}
.sec-head h2{font-size:clamp(1.8rem,4vw,2.6rem)}
.sec-head p{color:var(--muted);margin-top:12px}

/* ============================ FEATURES ============================ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.feature{padding:28px}
.feature .ic{width:54px;height:54px;border-radius:14px;background:var(--grad-soft);
  border:1px solid rgba(139,92,246,.3);display:grid;place-items:center;font-size:1.5rem;margin-bottom:16px}
.feature h3{font-size:1.2rem}
.feature p{color:var(--muted);margin-top:8px;font-size:.95rem}
.card-hover{transition:.3s}
.card-hover:hover{transform:translateY(-6px);border-color:rgba(139,92,246,.5);box-shadow:var(--glow)}

/* ============================ COURSES ============================= */
.course-card{overflow:hidden;display:flex;flex-direction:column}
.course-thumb{aspect-ratio:16/9;background:var(--grad-soft);position:relative;display:grid;place-items:center;
  border-bottom:1px solid var(--line);font-size:2.4rem}
.course-thumb .lvl{position:absolute;top:12px;inset-inline-start:12px}
.course-thumb .reg-chip{position:absolute;top:12px;inset-inline-end:12px;background:rgba(248,113,113,.20);color:#fecaca;border:1px solid rgba(248,113,113,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
/* registration countdown line (sits under the instructor row) */
.reg-cd{font-size:.82rem;color:#a5b4fc;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.reg-cd b{font-weight:800;font-variant-numeric:tabular-nums;color:#c7d2fe;letter-spacing:.3px}
.reg-cd.closed,.reg-cd.closed b{color:#fca5a5}
.btn.disabled{opacity:.6;cursor:not-allowed;filter:grayscale(.4)}
.course-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.course-body h3{font-size:1.12rem}
.course-meta{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:.85rem}
.course-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.price{font-weight:900;font-size:1.2rem}
.stars{color:#fcd34d;font-size:.9rem;letter-spacing:1px}

/* ============================ INSTRUCTORS ========================= */
.tutor{padding:26px;text-align:center}
.tutor .pfp{width:88px;height:88px;border-radius:50%;margin:0 auto 14px;background:var(--grad);
  display:grid;place-items:center;font-size:1.8rem;font-weight:900;box-shadow:var(--glow)}
.tutor h3{font-size:1.15rem}
.tutor .spec{color:var(--electric);font-size:.9rem;margin-top:2px}

/* ============================ TESTIMONIALS ======================= */
.testi{padding:30px;display:flex;flex-direction:column;gap:16px}
.testi .quote{color:#e5e5f0}
.testi .who{display:flex;align-items:center;gap:12px}
.testi .who .pfp{width:46px;height:46px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-weight:800}

/* ============================ FAQ ================================= */
.faq-item{border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:12px;overflow:hidden;background:rgba(255,255,255,.02)}
.faq-q{width:100%;text-align:start;background:none;border:0;color:#fff;font-family:inherit;
  font-weight:700;font-size:1.02rem;padding:18px 20px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq-q .chev{transition:.3s;color:var(--electric)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;color:var(--muted)}
.faq-a div{padding:0 20px 18px}
.faq-item.open .faq-a{max-height:300px}
.faq-item.open .chev{transform:rotate(180deg)}

/* ============================ FOOTER ============================== */
.footer{border-top:1px solid var(--line);margin-top:40px;padding:56px 0 28px;background:rgba(11,11,20,.6)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
.footer h4{margin-bottom:14px;font-size:1rem}
.footer a{color:var(--muted);display:block;padding:5px 0;font-size:.92rem}
.footer a:hover{color:#fff}
.socials{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;align-items:center}
.socials a{width:34px;height:34px;border-radius:50%;background:transparent!important;border:none!important;box-shadow:none!important;padding:0;
  display:grid;place-items:center;overflow:visible;transition:transform .2s ease,filter .2s ease}
.socials a img{width:100%;height:100%;object-fit:contain;display:block}
.socials a:hover{transform:translateY(-2px) scale(1.08);filter:brightness(1.12);background:transparent!important}
@media(max-width:600px){.socials{gap:8px}.socials a{width:30px;height:30px}}
.copyright{text-align:center;color:var(--muted);margin-top:36px;padding-top:20px;border-top:1px solid var(--line);font-size:.88rem}

/* ============================ AUTH =============================== */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:40px 20px}
.auth-card{width:100%;max-width:460px;padding:40px}
.auth-card .brand{justify-content:center;margin-bottom:8px}
.auth-card h1{text-align:center;font-size:1.7rem}
.auth-card .sub{text-align:center;color:var(--muted);margin:8px 0 26px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.88rem;font-weight:600;margin-bottom:7px;color:#d8d8ea}
.input{width:100%;padding:13px 16px;border-radius:12px;background:rgba(255,255,255,.04);
  border:1px solid var(--line);color:#fff;font-family:inherit;font-size:1rem;transition:.2s}
.input::placeholder{color:#6b6b85}
.input:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(139,92,246,.18);background:rgba(139,92,246,.06)}
.input.code{letter-spacing:3px;text-align:center;font-weight:700;text-transform:uppercase}
/* invalid required field on submit → clear red highlight */
.input.field-invalid,.input.field-invalid:focus{border-color:#ef4444!important;box-shadow:0 0 0 3px rgba(239,68,68,.22)!important;background:rgba(239,68,68,.06)!important}
/* international phone field (country dropdown + dial code) */
.intl-phone{position:relative;display:flex;gap:8px}
.intl-phone .iph-input{flex:1;min-width:0}
.iph-btn{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:0 12px;color:#fff;cursor:pointer;font-family:inherit;font-weight:700;white-space:nowrap}
.iph-btn:hover{background:rgba(255,255,255,.08)}
.iph-flag{font-size:1.25rem;line-height:1}
.iph-dial{font-size:.95rem;direction:ltr}
.iph-caret{opacity:.5;font-size:.7rem}
.iph-dd{position:absolute;top:calc(100% + 6px);inset-inline-start:0;width:min(340px,92vw);background:#15131f;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.55);z-index:60;padding:8px;max-height:330px;display:flex;flex-direction:column}
.iph-search{margin-bottom:6px}
.iph-list{overflow-y:auto;overscroll-behavior:contain}
.iph-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;cursor:pointer;color:#fff;font-size:.9rem}
.iph-item:hover,.iph-item.on{background:rgba(139,92,246,.18)}
.iph-item .iph-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iph-item .iph-code{opacity:.6;direction:ltr;font-size:.85rem}
.iph-empty{padding:14px;text-align:center;color:var(--muted)}
.row-between{display:flex;justify-content:space-between;align-items:center;font-size:.88rem;margin-bottom:18px}
.checkbox{display:flex;align-items:center;gap:8px;color:var(--muted);cursor:pointer}
.divider{display:flex;align-items:center;gap:14px;color:var(--muted);margin:22px 0;font-size:.85rem}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.oauth{display:flex;gap:12px}
.oauth .btn{flex:1}
.auth-foot{text-align:center;margin-top:22px;color:var(--muted);font-size:.92rem}
.auth-foot a{color:var(--electric);font-weight:700}
.tabs{display:flex;gap:6px;background:rgba(255,255,255,.04);padding:6px;border-radius:14px;margin-bottom:24px}
.tabs button{flex:1;padding:11px;border:0;border-radius:10px;background:none;color:var(--muted);
  font-family:inherit;font-weight:700;cursor:pointer;transition:.2s;font-size:.92rem}
.tabs button.active{background:var(--grad);color:#fff;box-shadow:0 8px 22px -8px rgba(139,92,246,.7)}

/* alerts */
.alert{padding:13px 16px;border-radius:12px;margin-bottom:16px;font-size:.92rem;font-weight:600}
.alert-error{background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.4);color:#fca5a5}
.alert-success{background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.4);color:#6ee7b7}
.alert-info{background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.4);color:#c4b5fd}

/* ============================ DASHBOARD LAYOUT ==================== */
.app{display:flex;min-height:100vh}
.sidebar{width:268px;flex-shrink:0;background:rgba(11,11,20,.85);border-inline-end:1px solid var(--line);
  backdrop-filter:blur(16px);position:fixed;top:0;bottom:0;inset-inline-start:0;z-index:60;
  display:flex;flex-direction:column;padding:22px 16px;transition:transform .3s}
.sidebar .brand{padding:6px 8px 22px}
.side-nav{display:flex;flex-direction:column;gap:4px;overflow-y:auto;flex:1}
/* THE HAND CURSOR ON HREF-LESS LINKS.
   A browser shows the pointing hand only for an <a> that HAS an href. Across this panel and the
   student dashboard there are ~42 anchors that route through a JS click handler instead — the whole
   sidebar, the section links, several actions — so they rendered with the plain arrow and gave no
   hint they were clickable at all. Matching on the attributes that make them interactive (rather
   than on a:not([href]) blindly) keeps genuinely inert anchors, like text placeholders, unaffected. */
a[data-view],a[onclick]{cursor:pointer}

.side-nav a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;cursor:pointer;
  color:var(--muted);font-weight:600;font-size:.95rem;transition:.2s}
.side-nav a .ic{width:22px;text-align:center;font-size:1.05rem}
.side-nav a:hover{background:rgba(255,255,255,.05);color:#fff}
.side-nav a.active{background:var(--grad-soft);color:#fff;border:1px solid rgba(139,92,246,.35)}
.side-nav .group{color:#6b6b85;font-size:.72rem;font-weight:700;padding:16px 14px 6px;letter-spacing:1px}
.side-foot{border-top:1px solid var(--line);padding-top:14px;margin-top:10px}

.main{flex:1;margin-inline-start:268px;display:flex;flex-direction:column;min-width:0;overflow-x:hidden;transition:margin-inline-start .3s}
/* collapsible sidebar on DESKTOP too (☰ near the logo) → content takes full width */
body.side-collapsed .sidebar{transform:translateX(100%)}
body.side-collapsed .main{margin-inline-start:0}
.topbar{height:70px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 26px;border-bottom:1px solid var(--line);background:rgba(5,5,5,.6);
  backdrop-filter:blur(14px);position:sticky;top:0;z-index:40}
.topbar .menu-btn{display:block;background:none;border:0;color:#fff;font-size:1.5rem;cursor:pointer;line-height:1;padding:4px 8px;border-radius:8px}
.topbar .menu-btn:hover{background:rgba(255,255,255,.08)}
.topbar h1{font-size:1.2rem}
.topbar .right{display:flex;align-items:center;gap:14px}
.icon-btn{position:relative;width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.05);
  border:1px solid var(--line);display:grid;place-items:center;color:#fff;cursor:pointer;font-size:1.15rem}
.icon-btn.has-unread{animation:bellWiggle 2.8s ease-in-out infinite;transform-origin:50% 18%}
@keyframes bellWiggle{0%,90%,100%{transform:rotate(0)}92%{transform:rotate(-13deg)}94%{transform:rotate(11deg)}96%{transform:rotate(-7deg)}98%{transform:rotate(4deg)}}
.icon-btn .dot{position:absolute;top:5px;inset-inline-end:6px;min-width:9px;height:9px;border-radius:50%;
  background:#f87171;border:2px solid var(--bg-2);box-sizing:border-box;display:grid;place-items:center;
  color:#fff;font-size:.6rem;font-weight:800;line-height:1}
.icon-btn .dot.count{min-width:18px;height:18px;top:1px;inset-inline-end:1px;padding:0 4px;border-radius:9px}
/* professional glowing radial pulse around the unread dot */
.icon-btn .dot.live{animation:dotGlow 1.5s ease-in-out infinite}
.icon-btn .dot.live::before{content:'';position:absolute;inset:-3px;border-radius:inherit;background:#f87171;opacity:.55;z-index:-1;animation:dotRing 1.5s ease-out infinite}
@keyframes dotGlow{0%,100%{box-shadow:0 0 0 0 rgba(248,113,113,.55)}50%{box-shadow:0 0 12px 3px rgba(248,113,113,.95)}}
@keyframes dotRing{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.5);opacity:0}}
/* "unread messages" floating label */
.bell-tip{position:absolute;top:48px;inset-inline-end:0;white-space:nowrap;background:#f87171;color:#fff;
  font-size:.66rem;font-weight:700;padding:3px 9px;border-radius:9px;box-shadow:0 8px 18px rgba(0,0,0,.35);
  opacity:0;transform:translateY(-5px) scale(.9);pointer-events:none;transition:.25s;z-index:30}
.bell-tip::before{content:'';position:absolute;top:-4px;inset-inline-end:13px;border:5px solid transparent;border-bottom-color:#f87171;border-top:0}
.icon-btn.has-unread .bell-tip{opacity:1;transform:translateY(0) scale(1);animation:tipBounce 2s ease-in-out infinite}
@keyframes tipBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
/* universal back button */
.back-btn{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.05);
  border:1px solid var(--line);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;transition:.2s;flex:0 0 auto}
.back-btn:hover{background:rgba(255,255,255,.12)}
.back-btn .chev{display:inline-block;transform:scaleX(-1)}
.notif-item{cursor:default;border-radius:12px;transition:background .15s;padding:12px 8px}
.notif-item.clickable{cursor:pointer}
.notif-item.clickable:hover{background:rgba(255,255,255,.05)}
.notif-item.clickable strong::after{content:'‹';display:inline-block;transform:scaleX(-1);opacity:.45;margin-inline-start:6px;font-weight:400}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-weight:800}
.content{padding:28px;flex:1}
.page-title{margin-bottom:22px}
.page-title h1{font-size:1.6rem}
.page-title p{color:var(--muted);margin-top:4px}

/* stat tiles (dashboard) */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:24px}
.tile{padding:22px}
.tile .top{display:flex;justify-content:space-between;align-items:flex-start}
.tile .ic{width:48px;height:48px;border-radius:13px;background:var(--grad-soft);border:1px solid rgba(139,92,246,.3);display:grid;place-items:center;font-size:1.3rem}
.tile .num{font-size:1.9rem;font-weight:900;margin-top:14px}
.tile .lbl{color:var(--muted);font-size:.9rem}
.tile .trend{font-size:.8rem;font-weight:700}
.trend.up{color:#6ee7b7}.trend.down{color:#fca5a5}

/* cards & panels */
.panel{padding:24px;margin-bottom:22px}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:12px;flex-wrap:wrap}
.panel-head h2{font-size:1.2rem}

/* progress bar */
.progress{height:9px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.progress > i{display:block;height:100%;background:var(--grad);border-radius:999px;transition:width .5s}
.progress-label{display:flex;justify-content:space-between;font-size:.82rem;color:var(--muted);margin-bottom:6px}

/* tables */
.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line)}
table.data{width:100%;border-collapse:collapse;min-width:640px}
table.data th,table.data td{padding:14px 16px;text-align:start;border-bottom:1px solid var(--line);font-size:.92rem}
table.data th{color:var(--muted);font-weight:700;font-size:.82rem;background:rgba(255,255,255,.02)}
table.data tr:last-child td{border-bottom:0}
table.data tr:hover td{background:rgba(139,92,246,.05)}
.actions{display:flex;gap:6px;flex-wrap:wrap}
.mono{font-family:monospace;direction:ltr;letter-spacing:1px}

/* ===================== COURSE / PLAYER PAGE ====================== */
.player-layout{display:grid;grid-template-columns:1fr 360px;gap:22px;align-items:start}
.player-layout>*{min-width:0}   /* let grid columns shrink → no horizontal overflow on mobile */
.video-shell{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#000;box-shadow:var(--glow);max-width:100%}
/* ---------- video copyright protection (watermark + anti-capture cover) ---------- */
.kfoo-wm{position:absolute;z-index:8;pointer-events:none;user-select:none;white-space:nowrap;text-align:center;
  line-height:1.3;opacity:0;transition:opacity .5s ease;transform:translate(-50%,-50%);font-weight:800;
  color:rgba(255,255,255,.92);text-shadow:0 1px 5px rgba(0,0,0,.75),0 0 2px rgba(0,0,0,.6)}
.kfoo-wm .b{display:block;font-size:clamp(13px,2.5vw,22px);letter-spacing:.5px}
.kfoo-wm .d{display:block;font-size:clamp(11px,1.9vw,16px);opacity:.85;letter-spacing:3px;direction:ltr}
.kfoo-wm .u{display:block;font-size:clamp(9px,1.4vw,12px);opacity:.55;font-weight:600;direction:ltr;margin-top:2px}
.kfoo-wm-fixed{position:absolute;z-index:7;pointer-events:none;user-select:none;bottom:8px;inset-inline-end:10px;
  text-align:end;line-height:1.25;opacity:.13;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);direction:ltr}
.kfoo-wm-fixed b{display:block;font-size:11px;letter-spacing:.5px}
.kfoo-wm-fixed small{display:block;font-size:9px;opacity:.85}
.kfoo-cover{position:absolute;inset:0;z-index:30;display:none;place-items:center;text-align:center;
  background:rgba(8,8,12,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;padding:18px}
.kfoo-cover.on{display:grid}
.kfoo-cover .ic{font-size:3rem;margin-bottom:10px;animation:warnPulse 1s ease-in-out infinite}
.kfoo-cover strong{font-size:1.25rem;display:block;margin-bottom:6px}
.kfoo-cover span{color:rgba(255,255,255,.72);font-size:.9rem;display:block}
@keyframes warnPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.13);opacity:.82}}
/* ---------- admin permission checklist ---------- */
.perm-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.perm-item{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;cursor:pointer;font-size:.86rem;background:rgba(255,255,255,.02);transition:.15s;user-select:none}
.perm-item:hover{background:rgba(255,255,255,.06)}
.perm-item input{width:17px;height:17px;accent-color:#8B5CF6;flex:none;cursor:pointer}
.perm-item.perm-full{grid-column:1/-1;border-color:rgba(74,222,128,.45);background:rgba(74,222,128,.07);font-weight:700}
.perm-item.perm-wide{grid-column:1/-1;border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.06)}
.perm-tags{display:flex;flex-wrap:wrap;gap:5px}
@media(max-width:560px){.perm-grid{grid-template-columns:1fr}}
/* adapt to the video's real aspect (portrait phone recordings included) + always centered.
   block (NOT flex) + explicit width:100% so the video can NEVER exceed the viewport → no
   horizontal overflow / right-shift on mobile. */
.video-shell video{display:block;width:100%;max-width:100%;min-width:0;height:auto;max-height:82vh;margin:0 auto;background:#000;object-fit:contain}
.video-locked{aspect-ratio:16/9;display:grid;place-items:center;text-align:center;color:var(--muted);
  background:radial-gradient(circle at 50% 40%,rgba(139,92,246,.15),transparent 60%),#0a0a14;gap:10px}
.video-locked .lockic{font-size:3rem}
.lesson-list{padding:16px;max-height:560px;overflow-y:auto}
.lesson{display:flex;gap:12px;align-items:center;padding:13px;border-radius:12px;margin-bottom:8px;
  border:1px solid var(--line);background:rgba(255,255,255,.02);cursor:pointer;transition:.2s}
.lesson:hover{border-color:rgba(139,92,246,.4)}
.lesson.active{background:var(--grad-soft);border-color:rgba(139,92,246,.5)}
.lesson.locked{opacity:.55;cursor:not-allowed}
.lesson .ix{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;
  background:rgba(139,92,246,.15);font-weight:800;font-size:.85rem}
.lesson.done .ix{background:var(--grad);color:#fff}
.lesson .meta{flex:1;min-width:0}
.lesson .meta .t{font-weight:700;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lesson .meta .d{color:var(--muted);font-size:.78rem}
.lesson .state{font-size:1.1rem}

/* upload widget */
.dropzone{border:2px dashed rgba(139,92,246,.4);border-radius:var(--radius);padding:40px;text-align:center;
  cursor:pointer;transition:.2s;background:rgba(139,92,246,.04)}
.dropzone:hover,.dropzone.drag{background:rgba(139,92,246,.1);border-color:var(--purple)}
.dropzone .big{font-size:2.4rem}
.upload-item{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--line);border-radius:12px;margin-top:12px}
.upload-item .row{display:flex;justify-content:space-between;font-size:.88rem}

/* empty state */
.empty{text-align:center;padding:60px 20px;color:var(--muted)}
.empty .big{font-size:3rem;margin-bottom:12px}

/* code chips list (admin codes) */
.codebox{display:inline-flex;align-items:center;gap:8px;font-family:monospace;direction:ltr;
  background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.3);padding:6px 12px;border-radius:10px}

/* forms in grid */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
textarea.input{min-height:110px;resize:vertical;line-height:1.7}
select.input{appearance:none}

/* ============================ RESPONSIVE ========================= */
@media(max-width:1024px){
  .stats,.grid-4,.tiles{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .player-layout{grid-template-columns:1fr}
  /* the ambient neon blobs are 520px fixed with NEGATIVE insets → horizontal-overflow source. Drop them on all small/medium screens. */
  body::before,body::after{display:none}
}
@media(max-width:768px){
  .nav-links{display:none}
  .nav-toggle{display:block}
  .nav.open .nav-links{display:flex;position:absolute;top:72px;inset-inline:0;flex-direction:column;
    background:rgba(11,11,20,.97);padding:18px 22px;border-bottom:1px solid var(--line);gap:14px}
  .grid-3,.grid-2,.form-grid{grid-template-columns:1fr}
  /* closed → display:none so the off-screen panel can't create horizontal scroll on iOS Safari */
  .sidebar{display:none;transform:translateX(100%);width:80%;max-width:300px}
  body.side-open .sidebar{display:flex;transform:translateX(0)}
  .main{margin-inline-start:0;max-width:100%;overflow-x:hidden}
  .topbar .menu-btn{display:block}
  .sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:55}
  body.side-open .sidebar-backdrop{display:block}
}
@media(max-width:768px){
  .content{padding:16px}
  .page-title h1{font-size:1.35rem}
  .panel{padding:16px}
  .topbar{padding:0 16px;height:62px}
  .topbar h1{font-size:1.05rem}
  /* drag/sort rows + library items stack neatly */
  .sort-item{flex-wrap:wrap}
  .sort-item .info{flex:1 1 55%;min-width:0}
  .sort-item .thumb{width:80px;height:46px}
  .vid-modal-box{max-width:100%}
}
@media(max-width:560px){
  .stats,.grid-4,.tiles{grid-template-columns:1fr}
  .hero{padding:60px 0 50px}
  .content{padding:14px}
}
/* Data tables become stacked cards on phones (labels via data-label) */
@media(max-width:640px){
  .table-wrap{border:0;overflow:visible}
  table.data{min-width:0;display:block}
  table.data thead{display:none}
  table.data tbody{display:block}
  table.data tr{display:block;border:1px solid var(--line);border-radius:14px;margin-bottom:12px;
    padding:6px 14px;background:rgba(255,255,255,.025)}
  table.data tr:hover td{background:none}
  table.data td{display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:.9rem;text-align:start}
  table.data td:last-child{border-bottom:0}
  table.data td::before{content:attr(data-label);color:var(--muted);font-size:.76rem;font-weight:700;flex:0 0 auto}
  table.data td .actions{justify-content:flex-end;flex-wrap:wrap;gap:6px}
  .btn-sm{padding:7px 12px}
}

/* ============================ SPA additions ====================== */
.hidden{display:none!important}
.view{animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* loading spinner */
.spinner{width:38px;height:38px;border-radius:50%;border:3px solid rgba(139,92,246,.2);
  border-top-color:var(--electric);animation:spin .8s linear infinite;margin:40px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{display:grid;place-items:center;padding:50px;color:var(--muted)}

/* toast */
#toast{position:fixed;bottom:24px;inset-inline-start:50%;transform:translateX(50%);z-index:9999;display:flex;flex-direction:column;gap:10px;align-items:center}
.toast{padding:13px 22px;border-radius:12px;font-weight:700;color:#fff;box-shadow:var(--shadow);
  backdrop-filter:blur(10px);animation:fade .25s ease;max-width:90vw}
.toast.ok{background:rgba(52,211,153,.92)}
.toast.err{background:rgba(248,113,113,.92)}
.toast.info{background:rgba(139,92,246,.92)}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;display:none;place-items:center;padding:20px;backdrop-filter:blur(4px)}
.modal-bg.open{display:grid}
.modal{width:100%;max-width:560px;max-height:90vh;overflow-y:auto;padding:28px}
.modal h2{margin-bottom:16px}

/* clickable code chip */
.codebox{cursor:pointer}
.codebox:hover{background:rgba(139,92,246,.2)}

/* tab pills for SPA sections */
.subnav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.subnav button{padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);
  color:var(--muted);font-family:inherit;font-weight:700;cursor:pointer;font-size:.9rem;transition:.2s}
.subnav button.active{background:var(--grad);color:#fff;border-color:transparent}

/* ============== persistent upload dock ============== */
.up-dock{position:fixed;bottom:18px;inset-inline-start:18px;z-index:9000;width:330px;max-width:90vw;
  background:rgba(17,17,29,.96);border:1px solid rgba(139,92,246,.4);border-radius:16px;
  box-shadow:var(--glow);backdrop-filter:blur(14px);overflow:hidden}
.up-dock.hidden{display:none}
.up-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;
  background:var(--grad-soft);border-bottom:1px solid var(--line);font-size:.9rem}
.up-btn{background:rgba(255,255,255,.06);border:1px solid var(--line);color:#fff;border-radius:8px;
  width:30px;height:28px;cursor:pointer;font-size:.85rem;margin-inline-start:4px}
.up-list{max-height:260px;overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:10px}
.up-dock.collapsed .up-list{display:none}
.up-item .up-row{display:flex;justify-content:space-between;gap:8px;font-size:.8rem;margin-bottom:5px}
.up-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.up-st{color:var(--electric);font-weight:700;flex-shrink:0}

/* ============== course cover images ============== */
.course-thumb{background-size:cover;background-position:center}
.course-thumb.has-cover{font-size:0}
.cover-preview{width:200px;aspect-ratio:16/9;border-radius:12px;border:1px solid var(--line);
  background:var(--grad-soft);display:grid;place-items:center;overflow:hidden;color:var(--muted);font-size:.85rem}
.cover-preview img{width:100%;height:100%;object-fit:cover}

/* ============== dark dropdown (native <select> menu) ============== */
.input option, select option, select optgroup{
  background-color:#11111d;
  color:#fff;
}
select.input{color:#fff}

/* ============== mobile overflow safety + small-screen polish ============== */
html{overflow-x:hidden}
html,body{max-width:100%}
.feature,.course-card,.tutor,.stat,.faq-item{max-width:100%}
h1,h2,h3,h4,p,a,span{overflow-wrap:break-word}
/* compact header on mobile: hide the login button + shrink the action buttons & logo */
@media(max-width:768px){
  .hide-mobile{display:none!important}
  .nav .btn{padding:7px 13px;font-size:.8rem}
  .brand{font-size:1.05rem;white-space:nowrap}
  .brand .logo{width:32px;height:32px;font-size:1rem;border-radius:9px}
  .nav-toggle{font-size:1.4rem}
}
@media(max-width:600px){
  .nav .btn{padding:6px 11px;font-size:.74rem;margin-inline-end:12px}
  .brand .logo{width:30px;height:30px}
  /* ambient neon blobs are 520px position:fixed → a horizontal-overflow source on phones. Drop them. */
  body::before,body::after{display:none}
  /* slim mobile gutter (+ notch-safe): cards nearly fill the width, no wasted side air */
  .container{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}
  .sec{padding:38px 0}
  .hero{padding:38px 0 30px}
  .nav .container{height:64px}
  .brand{font-size:1.02rem;min-width:0}
  .nav-actions{gap:8px}
  .stat{padding:20px 14px}
  .stat .num{font-size:1.8rem}
  .footer-grid{grid-template-columns:1fr 1fr}
  /* big CTA glass uses inline padding:50px — tame it on phones */
  section > .glass[style*="padding:50px"]{padding:30px 18px!important}
}
@media(max-width:420px){
  .footer-grid{grid-template-columns:1fr}
}

/* ===================== Live broadcast ===================== */
.live-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 0 rgba(239,68,68,.7);animation:livePulse 1.6s infinite;vertical-align:middle}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.6)}70%{box-shadow:0 0 0 10px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
.live-console{display:flex;flex-direction:column;gap:12px;max-width:1100px;margin:0 auto;width:100%}
.live-topbar{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;border-radius:14px;flex-wrap:wrap;gap:8px}
.live-main{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:12px;align-items:start}
.live-stage{position:relative;border-radius:16px;overflow:hidden;background:#000;aspect-ratio:16/9;max-height:50vh;display:flex;align-items:center;justify-content:center}
.live-stage video{width:100%;height:100%;object-fit:contain;background:#000}
.live-stage-empty{position:absolute;color:var(--muted);font-size:.9rem;text-align:center;padding:18px}
.live-side{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;max-height:50vh}
.live-side-head{padding:11px 14px;font-weight:700;border-bottom:1px solid var(--line);font-size:.92rem;flex-shrink:0}
.live-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;padding:11px;overflow:auto;flex-shrink:0;max-height:42%}
.live-peer{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:8px 5px;text-align:center;position:relative}
.live-peer.host{border-color:rgba(245,158,11,.5);background:rgba(245,158,11,.08)}
.live-peer.hand{border-color:rgba(245,158,11,.8);background:rgba(245,158,11,.14);box-shadow:0 0 0 1px rgba(245,158,11,.4)}
.live-ava{width:40px;height:40px;border-radius:50%;margin:0 auto 5px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.05rem;color:#fff;background:var(--grad);position:relative}
.live-ava .mic-on{position:absolute;bottom:-4px;right:-4px;font-size:.68rem;background:#0b0b14;border-radius:50%;padding:1px}
.live-peer-name{font-size:.74rem;color:var(--text);line-height:1.45;word-break:break-word}
.hand-badge{font-size:.66rem;color:#f59e0b;font-weight:700;margin-top:2px}
.live-peer-act{display:flex;gap:4px;justify-content:center;margin-top:6px;flex-wrap:wrap}
.live-peer-act .mini{background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:8px;cursor:pointer;font-size:.82rem;padding:3px 7px;color:var(--text);line-height:1}
.live-peer-act .mini:hover{background:rgba(255,255,255,.18)}
.live-peer-act .mini.ok{background:rgba(22,163,74,.22);border-color:rgba(22,163,74,.5)}
.live-peer-act .mini.danger{background:rgba(220,38,38,.18);border-color:rgba(220,38,38,.45)}
.live-chat{display:flex;flex-direction:column;flex:1;border-top:1px solid var(--line);min-height:120px}
.live-chat-msgs{flex:1;overflow:auto;padding:10px 12px;display:flex;flex-direction:column;gap:6px;font-size:.84rem}
.live-msg{background:rgba(255,255,255,.04);padding:6px 9px;border-radius:9px;line-height:1.6;word-break:break-word}
.live-msg.host{background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.3)}
.live-msg b{color:var(--electric)}
.live-msg.host b{color:#f59e0b}
.live-chat-in{display:flex;gap:6px;padding:9px;border-top:1px solid var(--line);flex-shrink:0}
.live-chat-in .input{flex:1;min-width:0}
.live-controls{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;padding:13px;border-radius:14px}
.live-ctrl{background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--text);min-width:120px;font-size:.86rem;padding:10px 14px;border-radius:11px;font-weight:600}
.live-ctrl:hover{background:rgba(255,255,255,.12)}
.live-ctrl.on{background:#16a34a;border-color:transparent;box-shadow:0 8px 22px -8px rgba(22,163,74,.6)}
/* viewer page */
.live-join-card{max-width:520px;margin:7vh auto;text-align:center}
.live-join-btn{background:#16a34a;color:#fff;border:none;font-size:1.05rem;padding:14px 34px;border-radius:14px;cursor:pointer;font-weight:800;box-shadow:0 10px 30px -8px rgba(22,163,74,.6)}
.live-join-btn:hover{background:#15803d}
.live-leave-btn{background:#dc2626!important;color:#fff!important;border:none!important}
.live-leave-btn:hover{background:#b91c1c!important}
.live-mic-btn{background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--text)}
.live-mic-btn.on{background:#16a34a!important;border-color:transparent!important}
.live-hand-btn.on{background:#f59e0b!important;border-color:transparent!important;color:#fff!important}
.live-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:#1a1a2e;border:1px solid var(--line);color:#fff;padding:11px 20px;border-radius:12px;font-size:.9rem;opacity:0;pointer-events:none;transition:.25s;z-index:9999;box-shadow:var(--shadow);max-width:90vw;text-align:center}
.live-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:860px){
  .live-main{grid-template-columns:1fr}
  .live-stage{aspect-ratio:16/9;max-height:38vh}
  .live-side{max-height:none}
  .live-grid{max-height:180px}
  .live-chat-msgs{max-height:240px}
  .live-ctrl{flex:1 1 44%;min-width:0}
}
.live-banner{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:14px;margin-bottom:16px;text-decoration:none;color:#fff;background:linear-gradient(110deg,rgba(239,68,68,.22),rgba(168,85,247,.18));border:1px solid rgba(239,68,68,.45);box-shadow:0 10px 34px -12px rgba(239,68,68,.5);transition:transform .15s}
.live-banner:hover{transform:translateY(-2px)}
.live-banner .lb-txt{display:flex;flex-direction:column;flex:1}
.live-banner .lb-txt b{font-size:1rem}
.live-banner .lb-txt span{font-size:.82rem;color:var(--muted)}
.live-banner .lb-go{background:#ef4444;padding:8px 16px;border-radius:10px;font-weight:800;font-size:.9rem}

/* live — collapsible sections + list rows + colored text buttons */
.live-side{max-height:56vh}
.live-collapse{width:100%;text-align:right;background:rgba(255,255,255,.03);border:none;border-bottom:1px solid var(--line);color:var(--text);font-weight:700;font-size:.9rem;padding:11px 14px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
.live-collapse:hover{background:rgba(255,255,255,.07)}
.live-collapse.danger{color:#f87171}
.live-collapse .chev{font-size:.78rem;color:var(--muted)}
.live-sec{overflow:auto;max-height:30vh;flex-shrink:0;transition:max-height .2s ease}
.live-sec.collapsed{max-height:0;overflow:hidden}
.live-plist{display:flex;flex-direction:column;gap:6px;padding:9px}
.live-prow{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:11px;padding:7px 9px;flex-wrap:wrap}
.live-prow.host{border-color:rgba(245,158,11,.5);background:rgba(245,158,11,.08)}
.live-prow.hand{border-color:rgba(245,158,11,.85);background:rgba(245,158,11,.15)}
.live-ava.sm{width:34px;height:34px;font-size:.9rem;margin:0;flex-shrink:0}
.live-prow-name{flex:1;min-width:80px;font-size:.84rem;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.live-prow-act{display:flex;gap:6px;flex-wrap:wrap}
.lbtn{border:1px solid var(--line);border-radius:8px;cursor:pointer;font-size:.76rem;font-weight:700;padding:5px 10px;color:#fff;background:rgba(255,255,255,.08);white-space:nowrap}
.lbtn:hover{filter:brightness(1.15)}
.lbtn.green{background:#16a34a;border-color:transparent}
.lbtn.red{background:#dc2626;border-color:transparent}
.live-ctrl.red{background:#dc2626;border-color:transparent;color:#fff}
.live-ctrl.green{background:#16a34a;border-color:transparent;color:#fff}
.live-side .live-chat{flex:1;min-height:130px;border-top:1px solid var(--line)}
.live-side .live-chat .live-side-head{border-bottom:1px solid var(--line);border-top:none}
@media(max-width:860px){
  .live-side{max-height:none}
  .live-sec{max-height:38vh}
  .live-prow-act{width:100%}
  .live-prow-act .lbtn{flex:1;text-align:center}
}

/* ===================== Telegram-style chat (live broadcast) ===================== */
.tg-chat{display:flex;flex-direction:column;flex:1;min-height:170px;background:#0e1621;overflow:hidden}
.tg-chat-head{padding:9px 14px;background:#17212b;border-bottom:1px solid rgba(0,0,0,.35);flex-shrink:0;display:flex;align-items:center;gap:10px}
.tg-chat-head .tg-h-ic{width:34px;height:34px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.tg-chat-head .t{font-weight:700;font-size:.9rem;color:#fff;line-height:1.3}
.tg-chat-head .s{font-size:.73rem;color:#6c7883;line-height:1.3}
.tg-chat-head .s b{color:#5eb5f7;font-weight:700}
.tg-msgs{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:3px}
.tg-msgs::-webkit-scrollbar{width:7px}.tg-msgs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:4px}
.tg-msg{display:flex;max-width:86%}
.tg-msg.in{align-self:flex-start}
.tg-msg.out{align-self:flex-end}
.tg-bubble{padding:5px 10px 4px;border-radius:13px;position:relative;font-size:.86rem;line-height:1.5;box-shadow:0 1px 1.5px rgba(0,0,0,.25);max-width:100%}
.tg-bubble.in{background:#182533;border-top-right-radius:5px;color:#fff}
.tg-bubble.out{background:#2b5278;border-top-left-radius:5px;color:#fff}
.tg-name{font-size:.76rem;font-weight:800;margin-bottom:1px}
.tg-text{white-space:pre-wrap;word-break:break-word}
.tg-time{font-size:.62rem;color:rgba(255,255,255,.45);text-align:left;margin-top:1px;direction:ltr}
.tg-bubble.out .tg-time{color:#8fb6dd}
.tg-input{display:flex;align-items:center;gap:7px;padding:8px 10px;background:#17212b;flex-shrink:0}
.tg-ic{background:none;border:none;color:#6c7883;font-size:1.25rem;cursor:pointer;flex-shrink:0;line-height:1}
.tg-ic:hover{color:#8da7c4}
.tg-field{flex:1;min-width:0;background:#242f3d;border:1px solid transparent;border-radius:18px;padding:9px 14px;color:#fff;font-family:inherit;font-size:.86rem;outline:none}
.tg-field:focus{border-color:#3a4a5c}
.tg-field::placeholder{color:#6c7883}
.tg-field:disabled{opacity:.6}
.tg-send{width:38px;height:38px;border-radius:50%;border:none;background:#5eb5f7;color:#fff;cursor:pointer;font-size:1.05rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.15s}
.tg-send:hover{background:#4aa3e8;transform:scale(1.05)}

/* ===================== Telegram-style group-call console ===================== */
.tgcall-head{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:11px;background:#17212b;border-radius:14px;position:relative;border:1px solid rgba(255,255,255,.05)}
.tgcall-head .t{font-weight:800;font-size:1rem;color:#fff;display:flex;align-items:center;gap:8px}
.tgcall-head .s{font-size:.78rem;color:#6c7883;margin-top:1px}
.tgcall-head .end{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%)}
/* participant card (Telegram call row) */
.tgp-list{display:flex;flex-direction:column;gap:2px;padding:8px}
.tgp{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:12px;position:relative}
.tgp:hover{background:rgba(255,255,255,.04)}
.tgp.host{background:rgba(245,158,11,.07)}
.tgp.hand{background:rgba(245,158,11,.13)}
.tgp-ava{width:44px;height:44px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;color:#fff;flex-shrink:0}
.tgp-info{flex:1;min-width:0}
.tgp-name{font-weight:700;font-size:.9rem;color:#fff;display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:wrap}
.tgp-name>.nm{white-space:normal;overflow-wrap:anywhere;word-break:break-word;line-height:1.55;min-width:0}
.tgp-name .badge{flex-shrink:0;padding:1px 7px;font-size:.62rem;line-height:1.5}
.tgp-status{font-size:.75rem;color:#6c7883;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tgp-status.speaking{color:#4dca87}
.tgp-status.hand{color:#f0b132}
.tgp-mic{font-size:1.05rem;flex-shrink:0;color:#4dca87}
.tgp-mic.muted{color:#e0533d;opacity:.85}
/* roster mic reflects each peer's REAL state: green mic open, red slashed mic closed */
.tgp-mic svg{width:22px;height:22px;display:block}
.tgp-mic.on{color:#22c55e}
.tgp-mic.off{color:#e0533d;opacity:.9}
.tgp.speaking-now .tgp-mic.on{color:#22c55e;animation:micDot 1.1s ease-in-out infinite}
@keyframes micDot{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.18);opacity:1}}
.tgp-menu{background:none;border:none;color:#6c7883;font-size:1.25rem;cursor:pointer;padding:0 6px;border-radius:8px;flex-shrink:0;line-height:1}
.tgp-menu:hover{background:rgba(255,255,255,.1);color:#fff}
.tgp-pop{position:fixed;z-index:200;background:#1c2733;border:1px solid rgba(255,255,255,.12);border-radius:11px;box-shadow:0 10px 30px rgba(0,0,0,.55);overflow:hidden;display:none;min-width:160px}
.tgp-pop.open{display:block}
.tgp-pop button{display:block;width:100%;text-align:right;background:none;border:none;color:#fff;padding:11px 15px;font-size:.84rem;cursor:pointer;font-family:inherit;border-bottom:1px solid rgba(255,255,255,.05)}
.tgp-pop button:last-child{border-bottom:none}
.tgp-pop button:hover{background:rgba(255,255,255,.08)}
.tgp-pop button.danger{color:#f87171}
/* circular control bar (Telegram call) */
.tgctrl-bar{display:flex;gap:14px;justify-content:center;align-items:flex-start;padding:16px 14px;background:#17212b;border-radius:16px;flex-wrap:wrap;border:1px solid rgba(255,255,255,.05)}
.tgctrl{display:flex;flex-direction:column;align-items:center;gap:7px;background:none;border:none;cursor:pointer;min-width:58px}
.tgctrl-ic{width:52px;height:52px;border-radius:50%;background:#2b3a4a;display:flex;align-items:center;justify-content:center;font-size:1.35rem;transition:.15s;color:#fff}
.tgctrl:hover .tgctrl-ic{filter:brightness(1.18)}
.tgctrl-lbl{font-size:.73rem;color:#aebfcf;white-space:nowrap}
.tgctrl.primary .tgctrl-ic{background:#3a4754}
.tgctrl.primary.on .tgctrl-ic{background:#3390ec;box-shadow:0 0 0 4px rgba(51,144,236,.25)}
.tgctrl.green .tgctrl-ic{background:#3aa76d}
.tgctrl.amber .tgctrl-ic{background:#d99a2b}
.tgctrl.amber.on .tgctrl-ic{background:#f0b132;box-shadow:0 0 0 4px rgba(240,177,50,.25)}
.tgctrl.red .tgctrl-ic{background:#cc4b3e}
.tgctrl.danger .tgctrl-ic{background:#e0533d}
@media(max-width:860px){
  .tgctrl-bar{gap:8px}
  .tgctrl{min-width:52px}
  .tgctrl-ic{width:46px;height:46px;font-size:1.2rem}
  .tgctrl-lbl{font-size:.66rem}
}

/* viewer: Telegram top bar (mic left · title · leave right) + fullscreen share */
.tgv-top{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#17212b;border-radius:14px;border:1px solid rgba(255,255,255,.05)}
.tgv-title{flex:1;text-align:center;min-width:0}
.tgv-title .t{font-weight:800;font-size:.95rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tgv-title .s{font-size:.74rem;color:#6c7883}
.tgv-mic,.tgv-leave{width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;font-size:1.15rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;transition:.15s}
.tgv-mic{background:#2b3a4a}
.tgv-mic.on{background:#3390ec;box-shadow:0 0 0 3px rgba(51,144,236,.28)}
.tgv-mic.muted{background:#3a4754;opacity:.55;cursor:not-allowed}
.tgv-leave{background:#e0533d}
.tgv-leave:hover{background:#cc4b3e}
.live-stage.clickable{cursor:pointer}
.live-stage .fs-hint{position:absolute;top:8px;inset-inline-end:8px;background:rgba(0,0,0,.55);color:#fff;border-radius:8px;padding:4px 9px;font-size:.72rem;display:none;align-items:center;gap:4px;pointer-events:none}
.live-stage.has-video .fs-hint{display:flex}
/* fullscreen share overlay */
.tg-fs{position:fixed;inset:0;background:#000;z-index:9998;display:none;align-items:center;justify-content:center}
.tg-fs.open{display:flex}
.tg-fs video{width:100%;height:100%;object-fit:contain}
.tg-fs-x{position:fixed;top:14px;inset-inline-start:14px;z-index:9999;width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.35);color:#fff;font-size:1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.tg-fs-x:hover{background:rgba(0,0,0,.85)}

/* ===================== "Midnight Pulse" chat (from kfoo chat app) ===================== */
.midchat{--mc-surface:#131313;--mc-low:#1c1b1b;--mc-high:#2a2a2a;--mc-highest:#353534;--mc-bright:#3a3939;--mc-primary:#d0bcff;--mc-primary2:#a078ff;--mc-onp:#3c0091;--mc-on:#e5e2e1;--mc-onv:#cbc3d7;
  display:flex;flex-direction:column;flex:1;min-height:200px;background:var(--mc-surface);overflow:hidden}
.midchat-head{display:flex;align-items:center;gap:.7rem;padding:.65rem .85rem;background:var(--mc-low)}
.midchat-ava{width:40px;height:40px;border-radius:9999px;background:linear-gradient(135deg,var(--mc-primary),var(--mc-primary2));color:var(--mc-onp);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.05rem;flex-shrink:0}
.midchat-head .nm{font-weight:700;font-size:.95rem;color:var(--mc-on);line-height:1.3}
.midchat-head .sub{font-size:.76rem;color:var(--mc-onv);line-height:1.3}
.midchat-head .sub b{color:var(--mc-primary);font-weight:700}
.midchat-msgs{flex:1;overflow-y:auto;padding:.9rem;display:flex;flex-direction:column;gap:.45rem}
.midchat-msgs::-webkit-scrollbar{width:7px}.midchat-msgs::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:4px}
.mc-row{display:flex;gap:.5rem;animation:mcIn .28s ease;max-width:82%}
.mc-row.sent{align-self:flex-end}
@keyframes mcIn{from{opacity:0;transform:translateY(9px)}}
.mc-bubble{padding:.55rem .85rem;border-radius:1rem;font-size:.9rem;line-height:1.55;word-break:break-word;max-width:100%}
.mc-row:not(.sent) .mc-bubble{background:var(--mc-high);color:var(--mc-on);border-bottom-right-radius:.28rem}
.mc-row.sent .mc-bubble{background:linear-gradient(135deg,var(--mc-primary),var(--mc-primary2));color:var(--mc-onp);border-bottom-left-radius:.28rem}
.mc-sender{font-size:.75rem;font-weight:800;margin-bottom:.12rem}
.mc-text{white-space:pre-wrap}
.mc-time{font-size:.66rem;opacity:.55;margin-top:.18rem;text-align:left;direction:ltr}
/* ===== "X joined the broadcast" glowing pill (top of the chat block, colour = name/label) ===== */
.join-pop{position:absolute;left:50%;z-index:24;display:inline-flex;align-items:center;gap:9px;max-width:92%;padding:5px 13px 5px 6px;border-radius:999px;font-family:'Tajawal','Cairo',system-ui,sans-serif;font-weight:800;color:#fff;white-space:nowrap;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transform:translateX(-50%);opacity:0;animation:joinPop 3s cubic-bezier(.16,1,.3,1) forwards}
.join-pop .jp-ava{width:27px;height:27px;border-radius:50%;background-size:cover;background-position:center;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:.82rem;text-transform:uppercase}
.join-pop .jp-body{min-width:0;overflow:hidden;text-overflow:ellipsis}
.join-pop .jp-nm{font-weight:900;font-size:.85rem}
.join-pop .jp-tx{opacity:.92;font-weight:700;font-size:.74rem;color:#eef2ff}
.join-pop .jp-badge{flex-shrink:0;margin-inline-start:1px;padding:2px 9px;border-radius:999px;font-size:.67rem;font-weight:900;color:#14120a;box-shadow:0 2px 8px rgba(0,0,0,.28)}
@keyframes joinPop{
  0%{opacity:0;transform:translateX(-50%) translateY(-40px) scale(.88)}
  8%{opacity:1}
  16%{transform:translateX(-50%) translateY(4px) scale(1.035)}   /* fast in + slight overshoot */
  23%{transform:translateX(-50%) translateY(0) scale(1)}         /* decelerate → settle near the top */
  85%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}   /* hold ≈2s */
  100%{opacity:0;transform:translateX(-50%) translateY(-12px) scale(.98)}  /* fade out gradually */
}
@media(prefers-reduced-motion:reduce){ .join-pop{animation-duration:3s;animation-timing-function:ease} }
.mc-row.sent .mc-time{text-align:right;opacity:.7}
.midchat-input{display:flex;align-items:flex-end;gap:.45rem;padding:.6rem .8rem;background:var(--mc-low)}
.midchat-input textarea{flex:1;min-width:0;background:var(--mc-highest);border:1px solid transparent;border-radius:1rem;padding:.65rem 1rem;resize:none;max-height:110px;color:var(--mc-on);font-family:inherit;font-size:.9rem;line-height:1.5;outline:none;transition:.2s}
.midchat-input textarea:focus{background:var(--mc-bright);border-color:rgba(208,188,255,.25)}
.midchat-input textarea::placeholder{color:var(--mc-onv);opacity:.65}
.midchat-input textarea:disabled{opacity:.5}
.mc-icon{width:40px;height:40px;border-radius:9999px;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--mc-onv);flex-shrink:0;transition:.2s}
.mc-icon:hover{background:#ffffff14;color:var(--mc-on)}
.mc-icon svg{width:20px;height:20px}
.mc-send{width:44px;height:44px;border-radius:9999px;background:linear-gradient(135deg,var(--mc-primary),var(--mc-primary2));color:var(--mc-onp);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.2s}
.mc-send:hover{filter:brightness(1.08);transform:scale(1.05)}
.mc-send svg{width:20px;height:20px;transform:scaleX(-1)}

/* ===================== UNIFIED live app — one cohesive surface (Midnight Pulse) ===================== */
.live-console{
  --s:#131313;--s-low:#1c1b1b;--s-high:#2a2a2a;--s-highest:#353534;--s-bright:#3a3939;
  --pri:#d0bcff;--pri2:#a078ff;--onpri:#3c0091;--on:#e5e2e1;--onv:#cbc3d7;
  max-width:1180px;margin:0 auto;width:100%;background:var(--s);border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;gap:0;box-shadow:0 30px 90px -40px rgba(0,0,0,.85)}
/* --- header (admin + viewer) : flat surface-low, seamless --- */
.live-console .tgcall-head,.live-console .tgv-top{background:var(--s-low);border:none;border-radius:0;padding:15px 20px}
.live-console .tgcall-head{flex-direction:column;align-items:center;gap:1px}
.live-console .tgcall-head .t{color:var(--on);font-size:1.05rem}
.live-console .tgcall-head .s{color:var(--onv)}
.live-console .tgv-mic{background:var(--s-high)}
.live-console .tgv-mic.on{background:linear-gradient(135deg,var(--pri),var(--pri2));color:var(--onpri);box-shadow:0 0 0 3px rgba(208,188,255,.28)}
.live-console .tgv-leave{background:#e0533d}
/* --- body : stage + side, seamless, equal height --- */
.live-console .live-main{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:0;align-items:stretch;height:60vh;min-height:430px}
.live-console .live-stage,.live-console .live-stage.glass{background:#0a0a0a;border:none;border-radius:0;box-shadow:none;aspect-ratio:auto;max-height:none;height:100%;border-inline-start:1px solid rgba(255,255,255,.05)}
.live-console .live-side,.live-console .live-side.glass{background:var(--s-low);border:none;border-radius:0;box-shadow:none;max-height:none;height:100%}
.live-console .live-stage-empty{color:var(--onv)}
/* --- sidebar sections --- */
.live-console .live-collapse{background:transparent;color:var(--on);border-bottom:1px solid rgba(255,255,255,.05)}
.live-console .live-collapse:hover{background:var(--s-high)}
.live-console .tgp:hover{background:var(--s-high)}
.live-console .tgp.host{background:rgba(208,188,255,.09)}
.live-console .tgp.hand{background:rgba(240,177,50,.14)}
.live-console .tgp-ava{background:linear-gradient(135deg,var(--pri),var(--pri2));color:var(--onpri)}
.live-console .tgp-name{color:var(--on)}
.live-console .tgp-status{color:var(--onv)}
.live-console .tgp-status.speaking{color:var(--pri)}
.live-console .tgp-mic{color:#4dca87}
.live-console .tgp-menu{color:var(--onv)}
.live-console .tgp-pop{background:var(--s-high);border-color:rgba(255,255,255,.08)}
/* chat fills the rest of the side */
.live-console .midchat{flex:1;min-height:0;background:var(--s)}
.live-console .midchat-head,.live-console .midchat-input{background:var(--s-low)}
/* --- control bar : flat, seamless, their palette --- */
.live-console .tgctrl-bar{background:var(--s-low);border:none;border-radius:0;border-top:1px solid rgba(255,255,255,.05);padding:16px;gap:18px}
.live-console .tgctrl-ic{background:var(--s-high)}
.live-console .tgctrl-lbl{color:var(--onv)}
.live-console .tgctrl.primary .tgctrl-ic{background:var(--s-high)}
.live-console .tgctrl.primary.on .tgctrl-ic{background:linear-gradient(135deg,var(--pri),var(--pri2));color:var(--onpri);box-shadow:0 0 0 4px rgba(208,188,255,.22)}
.live-console .tgctrl.amber.on .tgctrl-ic{background:#f0b132;box-shadow:0 0 0 4px rgba(240,177,50,.25)}
.live-console .tgctrl.green .tgctrl-ic{background:#3aa76d}
.live-console .tgctrl.red .tgctrl-ic{background:#cc4b3e}
.live-console .tgctrl.danger .tgctrl-ic{background:#e0533d}
@media(max-width:860px){
  .live-console{border-radius:0}
  .live-console .live-main{grid-template-columns:1fr;height:auto}
  .live-console .live-stage,.live-console .live-stage.glass{height:38vh;border-inline-start:none;border-bottom:1px solid rgba(255,255,255,.05)}
  .live-console .live-side,.live-console .live-side.glass{height:auto}
  .live-console .midchat{min-height:240px}
}

/* ===================== AUTHENTIC Telegram-Night unified live app (FINAL — overrides above) ===================== */
.live-console{
  --tg-bar:#17212b; --tg-chat:#0e1621; --tg-elev:#202b38; --tg-line:rgba(0,0,0,.45);
  --tg-in:#182533; --tg-out:#2b5278; --tg-on:#f5f5f5; --tg-sub:#708499;
  --tg-accent:#5288c1; --tg-online:#6ab3f3; --tg-indate:#6d7f8f; --tg-outdate:#a6c8ea;
  max-width:1200px;margin:0 auto;width:100%;background:var(--tg-bar);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;gap:0;box-shadow:0 30px 90px -40px rgba(0,0,0,.9)}
/* header (admin + viewer) */
.live-console .tgcall-head,.live-console .tgv-top{background:var(--tg-bar);border:none;border-radius:0;border-bottom:1px solid var(--tg-line);padding:13px 18px}
.live-console .tgcall-head{flex-direction:column;align-items:center;gap:1px}
.live-console .tgcall-head .t{color:var(--tg-on);font-size:1.02rem}
.live-console .tgcall-head .s,.live-console .tgv-title .s{color:var(--tg-online)}
.live-console .tgv-title .t{color:var(--tg-on)}
.live-console .tgv-mic{background:var(--tg-elev)}
.live-console .tgv-mic.on{background:var(--tg-accent);box-shadow:0 0 0 3px rgba(82,136,193,.3)}
.live-console .tgv-leave{background:#e0533d}
/* body: stage + chat side, seamless, equal height */
.live-console .live-main{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:0;align-items:stretch;height:62vh;min-height:450px}
.live-console .live-stage,.live-console .live-stage.glass{background:#000;border:none;border-radius:0;box-shadow:none;aspect-ratio:auto;max-height:none;height:100%;border-inline-start:1px solid var(--tg-line)}
.live-console .live-side,.live-console .live-side.glass{background:var(--tg-bar);border:none;border-radius:0;box-shadow:none;max-height:none;height:100%}
.live-console .live-stage-empty{color:var(--tg-sub)}
/* sidebar sections */
.live-console .live-collapse{background:transparent;color:var(--tg-on);border-bottom:1px solid var(--tg-line);font-weight:600}
.live-console .live-collapse:hover{background:var(--tg-elev)}
.live-console .tgp:hover{background:var(--tg-elev)}
.live-console .tgp.host{background:rgba(82,136,193,.12)}
.live-console .tgp.hand{background:rgba(240,177,50,.13)}
.live-console .tgp-ava{color:#fff}
.live-console .tgp-name{color:var(--tg-on)}
.live-console .tgp-status{color:var(--tg-sub)}
.live-console .tgp-status.speaking{color:var(--tg-online)}
.live-console .tgp-mic{color:#5cc88f}
.live-console .tgp-mic.muted{color:#e0533d}
.live-console .tgp-menu{color:var(--tg-sub)}
.live-console .tgp-pop{background:var(--tg-elev);border-color:rgba(255,255,255,.08)}
/* chat = authentic Telegram night */
.live-console .midchat{flex:1;min-height:0;background:var(--tg-chat)}
.live-console .midchat-head{background:var(--tg-bar);border-bottom:1px solid var(--tg-line)}
.live-console .midchat-ava{background:var(--tg-accent);color:#fff}
.live-console .midchat-head .nm{color:var(--tg-on)}
.live-console .midchat-head .sub{color:var(--tg-sub)}
.live-console .midchat-head .sub b{color:var(--tg-online)}
.live-console .mc-row:not(.sent) .mc-bubble{background:var(--tg-in);color:var(--tg-on);border-bottom-right-radius:6px}
.live-console .mc-row.sent .mc-bubble{background:var(--tg-out);color:#fff;border-bottom-left-radius:6px}
.live-console .mc-time{color:var(--tg-indate)}
.live-console .mc-row.sent .mc-time{color:var(--tg-outdate);opacity:1}
.live-console .midchat-input{background:var(--tg-bar);border-top:1px solid var(--tg-line)}
.live-console .midchat-input textarea{background:transparent;border:none;color:var(--tg-on);padding:.55rem .4rem}
.live-console .midchat-input textarea:focus{background:transparent;border:none}
.live-console .midchat-input textarea::placeholder{color:var(--tg-sub);opacity:1}
.live-console .mc-icon{color:var(--tg-sub)}
.live-console .mc-icon:hover{color:var(--tg-on);background:transparent}
.live-console .mc-send{background:var(--tg-accent);color:#fff;width:42px;height:42px}
.live-console .mc-send:hover{background:#4a7cb0;transform:none;filter:none}
/* control bar */
.live-console .tgctrl-bar{background:var(--tg-bar);border:none;border-radius:0;border-top:1px solid var(--tg-line);padding:15px}
.live-console .tgctrl-ic{background:var(--tg-elev)}
.live-console .tgctrl-lbl{color:var(--tg-sub)}
.live-console .tgctrl.primary .tgctrl-ic{background:var(--tg-elev)}
.live-console .tgctrl.primary.on .tgctrl-ic{background:var(--tg-accent);box-shadow:0 0 0 4px rgba(82,136,193,.25)}
.live-console .tgctrl.amber.on .tgctrl-ic{background:#e0a32e;box-shadow:0 0 0 4px rgba(224,163,46,.25)}
.live-console .tgctrl.green .tgctrl-ic{background:#4aa76d}
.live-console .tgctrl.red .tgctrl-ic{background:#cc4b3e}
.live-console .tgctrl.danger .tgctrl-ic{background:#e0533d}
@media(max-width:860px){
  .live-console{border-radius:0}
  .live-console .live-main{grid-template-columns:1fr;height:auto}
  .live-console .live-stage,.live-console .live-stage.glass{height:38vh;border-inline-start:none;border-bottom:1px solid var(--tg-line)}
  .live-console .live-side,.live-console .live-side.glass{height:auto}
  .live-console .midchat{min-height:260px}
}

/* ===================== Telegram MODEL: chat = page, call = popup ===================== */
.live-console{height:82vh;min-height:520px;background:#0e1621}
.lp-head{display:flex;align-items:center;gap:.7rem;padding:.55rem .9rem;background:#17212b;border-bottom:1px solid rgba(0,0,0,.4);flex-shrink:0}
.lp-ava{width:42px;height:42px;border-radius:50%;background:#5288c1;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;font-size:1.15rem}
.lp-htxt{flex:1;min-width:0}
.lp-htxt .nm{font-weight:700;color:#f5f5f5;font-size:.98rem}
.lp-htxt .sub{font-size:.76rem;color:#6ab3f3}
.lp-actions{display:flex;gap:.15rem}
.lp-ic{width:40px;height:40px;border-radius:50%;background:none;border:none;color:#6c7883;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.lp-ic:hover{background:#202b38;color:#fff}
.lp-ic svg{width:21px;height:21px}
.call-banner{display:flex;align-items:center;gap:.65rem;padding:.6rem .9rem;background:#1c2733;border-bottom:1px solid rgba(0,0,0,.3);cursor:pointer;transition:.15s;flex-shrink:0}
.call-banner:hover{background:#212d3a}
.cb-dot{width:9px;height:9px;border-radius:50%;background:#e0533d;box-shadow:0 0 0 0 rgba(224,83,61,.6);animation:livePulse 1.6s infinite;flex-shrink:0}
.cb-txt{flex:1;font-size:.86rem;color:#e9eef3}
.cb-txt b{color:#6ab3f3}
.cb-go{background:#5288c1;color:#fff;padding:.42rem .95rem;border-radius:9px;font-weight:700;font-size:.82rem;white-space:nowrap}
.live-console .midchat{flex:1;min-height:0;background:#0e1621}
.live-console .midchat-msgs{padding:1rem 1.1rem}
/* call popup (the "box") */
.call-modal{position:fixed;inset:0;background:rgba(0,0,0,.66);z-index:9990;display:none;align-items:center;justify-content:center;padding:16px}
.call-modal.open{display:flex}
.cm-box{width:min(940px,100%);max-height:94vh;background:#17212b;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 90px -20px rgba(0,0,0,.85)}
.cm-head{display:flex;align-items:center;justify-content:center;padding:13px 16px;border-bottom:1px solid rgba(0,0,0,.4);position:relative;flex-shrink:0}
.cm-title{font-weight:700;color:#f5f5f5;font-size:1rem}
.cm-x{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;background:none;border:none;color:#6c7883;cursor:pointer;font-size:1.15rem;display:flex;align-items:center;justify-content:center}
.cm-x:hover{background:#202b38;color:#fff}
.cm-body{overflow-y:auto;flex:1}
.cm-stage{background:#000;position:relative;display:flex;align-items:center;justify-content:center;min-height:200px;max-height:54vh;aspect-ratio:16/9}
.cm-stage.clickable{cursor:pointer}
.cm-stage video{width:100%;height:100%;object-fit:contain}
.cm-stage .live-stage-empty{position:absolute;color:#708499;text-align:center;padding:16px;font-size:.92rem}
.cm-box .live-collapse{background:#17212b;color:#f5f5f5;border:none;border-bottom:1px solid rgba(0,0,0,.3);width:100%;display:flex;justify-content:space-between;align-items:center;padding:11px 15px;font-weight:600;cursor:pointer}
.cm-box .live-collapse:hover{background:#202b38}
.cm-box .live-collapse.danger{color:#f08176}
.cm-box .live-sec{overflow:auto;max-height:34vh;transition:max-height .2s}
.cm-box .live-sec.collapsed{max-height:0;overflow:hidden}
.cm-box .tgp-list{display:flex;flex-direction:column;gap:2px;padding:8px}
.cm-box .tgp{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:12px;position:relative}
.cm-box .tgp:hover{background:#202b38}
.cm-box .tgp.host{background:rgba(82,136,193,.12)}
.cm-box .tgp.hand{background:rgba(240,177,50,.13)}
.cm-box .tgp-ava{color:#fff}
.cm-box .tgp-name{color:#f5f5f5}
.cm-box .tgp-status{color:#708499}
.cm-box .tgp-status.speaking{color:#6ab3f3}
.cm-box .tgp-mic{color:#5cc88f}.cm-box .tgp-mic.muted{color:#e0533d}
/* keep on/off mic colours winning inside the admin console + dropdown too */
.live-console .tgp-mic.on,.cm-box .tgp-mic.on{color:#22c55e}
.live-console .tgp-mic.off,.cm-box .tgp-mic.off{color:#e0533d;opacity:.9}
.cm-box .tgp-menu{color:#708499}
/* control bar inside popup */
.cm-box .tgctrl-bar{background:#17212b;border:none;border-top:1px solid rgba(0,0,0,.4);border-radius:0;padding:15px;flex-shrink:0}
.cm-box .tgctrl-ic{background:#202b38}
.cm-box .tgctrl-lbl{color:#aebfcf}
.cm-box .tgctrl.primary .tgctrl-ic{background:#202b38}
.cm-box .tgctrl.primary.on .tgctrl-ic{background:#5288c1;box-shadow:0 0 0 4px rgba(82,136,193,.28)}
.cm-box .tgctrl.amber.on .tgctrl-ic{background:#e0a32e;box-shadow:0 0 0 4px rgba(224,163,46,.28)}
.cm-box .tgctrl.green .tgctrl-ic{background:#4aa76d}
.cm-box .tgctrl.red .tgctrl-ic{background:#cc4b3e}
.cm-box .tgctrl.danger .tgctrl-ic{background:#e0533d}
/* MOBILE view-switch: green chat button (in call bar) + back-to-screen FAB (over chat) */
.only-mobile{display:none}
.tgctrl.chat-fab{position:relative}
.tgctrl.chat-fab .tgctrl-ic,.cm-box .tgctrl.chat-fab .tgctrl-ic{background:#22a559!important}
.chat-badge{position:absolute;top:-3px;inset-inline-end:6px;min-width:19px;height:19px;padding:0 5px;background:#ef4444;color:#fff;border-radius:10px;font-size:.7rem;font-weight:800;display:none;align-items:center;justify-content:center;box-shadow:0 0 0 2px #17212b;line-height:1}
.live-screen-fab{position:fixed;bottom:104px;left:12px;right:auto;z-index:60;background:#22a559;color:#fff;border:none;height:42px;padding:0 15px 0 13px;border-radius:22px;align-items:center;gap:7px;font-weight:700;font-size:.86rem;box-shadow:0 10px 26px -8px rgba(0,0,0,.7);cursor:pointer}
.live-screen-fab .lsf-ic{display:flex}.live-screen-fab svg{width:20px;height:20px}
.live-screen-fab:active{transform:scale(.95)}
@media(max-width:760px){ .only-mobile{display:flex} }

/* ===== MOBILE TikTok-style live layout: screen top · chat flow · input+controls bottom ===== */
.tk-live{position:relative;display:flex;flex-direction:column;height:100%;gap:0;background:#070d13;overflow:hidden;max-width:100%}
.tk-top{display:flex;align-items:center;gap:10px;padding:max(8px,env(safe-area-inset-top)) 12px 8px;background:#17212b;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0;z-index:6}
.tk-x{width:38px;height:38px;border-radius:50%;background:#2a1414;border:1px solid rgba(255,90,90,.32);color:#ff6a6a;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0}
.tk-x .tgctrl-ic{background:none!important;width:auto;height:auto;box-shadow:none!important;animation:none!important}
.tk-x svg{width:19px;height:19px}
.tk-ttl{flex:1;min-width:0}
.tk-ttl .nm{font-weight:700;color:#f5f5f5;font-size:.94rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.tk-ttl .sub{font-size:.72rem;color:#7f95a8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-parts-btn{display:flex;align-items:center;gap:5px;background:#202b38;border:none;color:#cfe0f0;border-radius:16px;padding:6px 11px;font-size:.82rem;font-weight:700;cursor:pointer;flex-shrink:0}
.tk-parts-btn .live-on{width:8px;height:8px}
.tk-parts{flex-shrink:0;max-height:0;overflow:hidden;transition:max-height .22s;background:#131d27;border-bottom:1px solid rgba(255,255,255,.05)}
.tk-parts.open{max-height:40vh;overflow:auto}
.tk-parts .tgp-list{display:flex;flex-direction:column;gap:2px;padding:8px}
.tk-live .tk-stage{position:relative;background:#000;width:100%;aspect-ratio:16/9;max-height:52vh;flex-shrink:0;overflow:hidden;border:1px solid rgba(255,255,255,.9);box-sizing:border-box}
.tk-live .tk-stage .screen-grid{position:absolute;inset:0;padding:0;gap:0}
.tk-live .tk-stage .screen-tile{border-radius:0;background:#000}
.tk-live .tk-stage .screen-tile video{width:100%;height:100%;object-fit:cover}
.tk-live .tk-stage .live-stage-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#708499;text-align:center;padding:16px;font-size:.9rem}
/* chat lives in its OWN block below the screen (separated a little, rounded top) — comments ride
   on this panel and never overlap the full-size screen above, TikTok-style */
.tk-live .tk-mid{flex:1;min-height:0;display:flex;flex-direction:column;background:#0e1621;margin-top:8px;border-radius:18px 18px 0 0;box-shadow:0 -8px 20px -8px rgba(0,0,0,.6);overflow:hidden;position:relative;z-index:2}
.tk-live .tk-mid .midchat-msgs{flex:1;min-height:0;padding:.7rem .85rem;gap:12px}
.tk-live .tk-mid .midchat-msgs::before{content:"";margin-top:auto}   /* pin newest comments to the bottom (TikTok) yet keep history scrollable */
/* TikTok-style comments: one flowing list, avatar+name at the start, text below, no bubbles */
.tk-live .tk-mid{font-family:'Tajawal',system-ui,-apple-system,'Segoe UI',sans-serif}
.tk-msg{display:flex;gap:7px;align-items:flex-start;max-width:100%;align-self:stretch;animation:mcIn .28s ease}
.tk-msg-ava{width:27px;height:27px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#3a4a5c,#2a3644);background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;color:#dfe8f0;font-weight:700;font-size:.72rem}
.tk-msg-c{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.tk-msg-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:1px 7px;min-width:0}
.tk-msg-name{font-size:.82rem;font-weight:700;line-height:1.55;white-space:normal;overflow-wrap:anywhere;word-break:break-word;opacity:.95}
.tk-msg-arrow{color:#8a97a5;font-size:.66rem;opacity:.8;flex-shrink:0;line-height:1}
.tk-msg-name.host{font-weight:800}   /* admin (red) / instructor (green) names are extra bold */
.tk-role{font-size:.58rem;font-weight:800;padding:1px 6px;border-radius:6px;white-space:nowrap;flex-shrink:0;line-height:1.5}
.tk-role-instr{background:rgba(34,197,94,.18);color:#4ade80;border:1px solid rgba(34,197,94,.55)}
.tk-role-admin{background:rgba(255,82,82,.18);color:#ff6b6b;border:1px solid rgba(255,82,82,.55)}
.tk-role-owner{background:rgba(255,201,60,.16);color:#ffcf5a;border:1px solid rgba(255,201,60,.55)}
/* roster: rank colours + badges */
.tgp-name.owner .nm{color:#ffcf5a}
.tgp-name.instr .nm{color:#4ade80}
.tgp-name.host .nm{color:#f0b74e}
.badge.tk-b-owner{background:rgba(255,201,60,.16);color:#ffcf5a;border:1px solid rgba(255,201,60,.5)}
.badge.tk-b-instr{background:rgba(34,197,94,.16);color:#4ade80;border:1px solid rgba(34,197,94,.5)}
.badge.tk-b-share{background:rgba(58,167,109,.16);color:#7fe0a6;border:1px solid rgba(58,167,109,.5)}
.tk-side .tgp.owner{background:rgba(255,201,60,.06)}
/* right-side vertical participants panel (mobile) — slides in from the right, arrow closes it */
.tk-side{position:fixed;inset:0;z-index:80;display:flex;justify-content:flex-end;background:rgba(0,0,0,0);visibility:hidden;transition:background .28s ease,visibility .28s}
.tk-side.open{visibility:visible;background:rgba(0,0,0,.45)}
.tk-side-panel{width:min(300px,82%);height:100%;background:#0f1720;border-inline-start:1px solid rgba(255,255,255,.08);box-shadow:-14px 0 34px -12px rgba(0,0,0,.7);display:flex;flex-direction:column;overflow:hidden;transform:translateX(100%);transition:transform .28s cubic-bezier(.22,.8,.24,1)}
.tk-side.open .tk-side-panel{transform:translateX(0)}
.tk-side-head{display:flex;align-items:center;gap:10px;padding:max(10px,env(safe-area-inset-top)) 12px 10px;border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;background:#131d27}
.tk-side-x{width:34px;height:34px;border-radius:50%;background:#1c2733;border:none;color:#cfe0f0;font-size:1.5rem;line-height:1;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;padding-bottom:3px}
.tk-side-ttl{font-weight:700;color:#e8eef4;font-size:.9rem}
.tk-side-ttl .live-on{width:8px;height:8px}
.tk-side .tgp-list{flex:1;min-height:0;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:2px}
/* "someone joined" notice at the top of the chat — slides in from the right, fades after 2s */
.tk-live .tk-mid .tk-join{position:absolute;bottom:70px;left:8px;right:auto;max-width:86%;z-index:22;display:inline-flex;align-items:center;gap:7px;
  background:linear-gradient(95deg,#7c5cff,#4b8bff);color:#fff;font-size:.78rem;font-weight:700;
  padding:7px 15px;border-radius:22px;box-shadow:0 10px 26px -6px rgba(76,139,255,.55),inset 0 0 0 1px rgba(255,255,255,.16);
  pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transform:translateX(-115%);opacity:0;transition:transform .5s cubic-bezier(.22,.9,.28,1),opacity .45s ease}
.tk-live .tk-mid .tk-join.show{transform:translateX(0);opacity:1}
.tk-live .tk-mid .tk-join.host{background:linear-gradient(95deg,#ff8a3c,#ff5a5a);box-shadow:0 10px 26px -6px rgba(255,90,90,.5),inset 0 0 0 1px rgba(255,255,255,.18)}
.tk-join-tx{overflow:hidden;text-overflow:ellipsis}
.tk-join-tx b{color:#fff;font-weight:800}
.tk-msg-text{font-size:.88rem;font-weight:500;color:#eef1f4;line-height:1.4;word-break:break-word}
.tk-msg-reply{display:block;font-size:.7rem;color:#7fb0ff;font-weight:700}
.tk-msg-media .mc-media,.tk-msg-media img,.tk-msg-media video{max-width:min(200px,55vw);max-height:220px;border-radius:9px;margin-top:3px;display:block}
/* clickable video thumbnail (opens the lightbox) */
.mc-vid{position:relative;display:inline-block;cursor:pointer;line-height:0;overflow:hidden}
.mc-vid video{width:100%;height:auto;display:block;pointer-events:none}
.mc-vid-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.1rem;padding-inline-start:3px;border:1.5px solid rgba(255,255,255,.85)}
/* full-screen media viewer over the broadcast — X to close and return instantly */
.media-lb{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.93);display:flex;align-items:center;justify-content:center;padding:18px;animation:mlbIn .18s ease}
@keyframes mlbIn{from{opacity:0}to{opacity:1}}
.media-lb-c{max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center}
.media-lb-c img,.media-lb-c video{max-width:100%;max-height:88vh;border-radius:8px;display:block}
.media-lb-x{position:fixed;top:calc(12px + env(safe-area-inset-top));inset-inline-end:16px;width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:1.35rem;cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center}
.media-lb-x:hover{background:rgba(0,0,0,.8)}
/* when YOU are mentioned/replied-to: clearly shaded so you spot it even for a one-letter reply */
.tk-msg.mc-mention{background:rgba(91,157,255,.24);border-inline-start:3px solid #5b9dff;border-radius:9px;padding:7px 9px;margin:2px -6px;box-shadow:0 0 0 1px rgba(91,157,255,.30) inset}
.tk-live .tk-acts{display:flex;justify-content:flex-start;align-items:flex-start;gap:14px;padding:8px 14px max(8px,env(safe-area-inset-bottom));flex-shrink:0;background:#131d27;border-top:1px solid rgba(255,255,255,.05)}
.tk-live .tk-acts .tgctrl{min-width:0;gap:3px}
.tk-live .tk-acts .tgctrl-ic{width:42px;height:42px}
.tk-live .tk-acts .tgctrl-ic svg{width:19px;height:19px}
.tk-live .tk-acts .tgctrl-lbl{font-size:.58rem}
.tk-live .tk-acts .tk-exit{margin-inline-start:auto}   /* exit pushed to the far left */
/* ===== iOS-style call bar: speaker · screen · MIC(center,big) · message · leave ; green=on, blue=off ===== */
.tk-live .tk-acts.callbar{justify-content:space-around;align-items:flex-end;gap:2px;padding:12px 6px max(10px,env(safe-area-inset-bottom));background:#000;border-top:1px solid rgba(255,255,255,.06)}
.callbar .tgctrl{flex:1 1 0;min-width:0;gap:7px}
.callbar .tgctrl-ic{width:54px!important;height:54px!important;border-radius:50%;background:#2b3038!important;color:#fff;box-shadow:none!important;animation:none!important;transition:background .15s,box-shadow .2s}
.callbar .tgctrl-ic svg{width:25px;height:25px}
.callbar .tgctrl-ic::before,.callbar .tgctrl-ic::after{display:none!important}
.callbar .tgctrl-lbl{font-size:.66rem;color:#d3d8de;white-space:nowrap}
.callbar .tgctrl:active .tgctrl-ic{filter:brightness(1.15)}
.callbar .cb-spk.on .tgctrl-ic{background:#22b466!important}
.callbar .cb-spk:not(.on) .tgctrl-ic{background:#2f74e0!important}
.callbar .cb-vid.on .tgctrl-ic{background:#22b466!important}
.callbar .cb-leave .tgctrl-ic{background:#4a1616!important;color:#ff6a6a}
.callbar .cb-leave .tgctrl-lbl{color:#e79a9a}
.callbar .tgctrl.cb-mic .tgctrl-ic{width:70px!important;height:70px!important;background:#2f74e0!important}
.callbar .tgctrl.cb-mic .tgctrl-ic svg{width:32px;height:32px}
.callbar .tgctrl.cb-mic .tgctrl-lbl{font-weight:700}
.callbar .tgctrl.cb-mic.on .tgctrl-ic{background:radial-gradient(circle at 50% 45%,#3ad884,#1ea45c)!important;box-shadow:0 0 0 7px rgba(46,193,107,.20),0 0 24px rgba(46,193,107,.55)!important;animation:micPulse 1.35s ease-out infinite!important}
.tk-live .tk-mid .midchat-input{background:#131d27;border-top:1px solid rgba(255,255,255,.05);padding:.5rem .8rem}
/* black message-input field (the text block where you type)
   font-size MUST be >=16px: iOS auto-zooms (and shifts the page, leaving side gutters) on focus of any
   smaller field — 16px is the strict fix. color-scheme:dark → the device shows its dark keyboard. */
.tk-live .tk-mid .midchat-input textarea{background:#000;border:1px solid rgba(255,255,255,.12);border-radius:20px;color:#f0f2f4;padding:.5rem 1rem;font-size:16px;color-scheme:dark}
.tk-live .tk-mid .midchat-input textarea:focus{background:#000;border-color:rgba(255,255,255,.22)}
.tk-live .tk-mid .midchat-input textarea::placeholder{color:#9aa6b2;opacity:1}
/* "who's speaking" notice moved ABOVE the input (out of the video) — centered; left-aligned if many */
/* RESERVED block (fixed height, always present) so showing/hiding the notice never shifts the chat */
.tk-live .tk-mid .tk-speaker{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;padding:2px 12px;flex-shrink:0;min-height:30px;box-sizing:border-box}
.tk-live .tk-mid .tk-speaker.multi{justify-content:flex-start}
.tk-live .tk-mid .tk-speaker .spk-pill{background:rgba(34,180,102,.16);border:1px solid rgba(34,180,102,.45);color:#83efb1;font-size:.72rem;font-weight:700;padding:2px 10px;border-radius:20px;white-space:nowrap;animation:mcIn .22s ease}
@media(max-width:760px){
  .live-console{height:88vh;border-radius:0}
  .cm-stage{max-height:40vh}
  .cm-box .tgctrl-bar{gap:8px}
}

/* chat media (images / video / files) */
.mc-media{max-width:240px;max-height:300px;border-radius:12px;margin:2px 0 4px;cursor:pointer;display:block;background:#000}
.mc-bubble video.mc-media{cursor:default}
.mc-file{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.1);padding:9px 13px;border-radius:11px;color:inherit;text-decoration:none;font-size:.85rem;margin:2px 0 4px;max-width:230px}
.mc-file:hover{background:rgba(255,255,255,.18)}
.mc-uploading{font-size:.8rem;color:#6ab3f3;padding:4px 0}
/* logo + back in chat header */
.lp-logo{height:23px;width:auto;filter:brightness(0) invert(1);flex-shrink:0;opacity:.95}
/* MOBILE: full-screen call popup like Telegram (images 2 & 3) */
@media(max-width:760px){
  .live-console{height:100dvh;border-radius:0;min-height:0}
  .call-modal{padding:0}
  .cm-box{width:100%;height:100dvh;max-height:100dvh;border-radius:0}
  .cm-body{flex:1}
  .cm-stage{max-height:44vh;aspect-ratio:auto;height:auto;min-height:38vh}
  .cm-box .tgctrl-bar{padding:16px 10px 30px;gap:4px;justify-content:space-around}
  .cm-box .tgctrl{min-width:0;flex:1}
  .cm-box .tgctrl-ic{width:56px;height:56px;font-size:1.5rem}
  .cm-box .tgctrl-lbl{font-size:.68rem}
  .mc-media{max-width:72vw}
}

/* ===== FIXES: chat image size (Telegram-like) + remove broken fullscreen hint + mobile stage fill ===== */
.mc-bubble .mc-media{max-width:min(280px,62vw);max-height:340px;width:auto;height:auto;object-fit:contain}
.cm-stage .fs-hint,.fs-hint{display:none}
@media(max-width:760px){
  .cm-stage{aspect-ratio:16/9;max-height:46vh;height:auto;min-height:0}
  .mc-bubble .mc-media{max-width:66vw}
}

/* ===== Admin HOST view: full-size, screen + controls inline (no popup) ===== */
.live-console.live-host{max-width:none;height:86vh;min-height:480px;border-radius:14px}
.host-stage{background:#000;height:40vh;min-height:200px;position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-bottom:1px solid rgba(0,0,0,.45)}
.host-stage video{width:100%;height:100%;object-fit:contain;background:#000}
.host-stage .live-stage-empty{position:absolute;color:#708499;font-size:.92rem;text-align:center;padding:16px}
.live-host .tgctrl-bar.host-ctrl{flex-shrink:0;border-top:none;border-bottom:1px solid rgba(0,0,0,.45);padding:13px}
.live-host>.live-collapse,.live-host>.live-sec,.live-host>#liveBannedWrap{flex-shrink:0}
.live-host .midchat{flex:1;min-height:0}
@media(max-width:760px){
  .live-console.live-host{height:auto;min-height:100dvh}
  .host-stage{height:34vh;min-height:0}
}

/* ===== Host view flush to edges + video fills width (no side margins) ===== */
.content.content-flush{padding:0!important;overflow:hidden}
.live-console.live-host{max-width:none;border-radius:0;height:calc(100vh - 56px);min-height:480px}
.host-stage{width:100%;aspect-ratio:16/9;height:auto;min-height:0;max-height:62vh;flex-shrink:0}
.host-stage video{object-fit:contain}
.live-host .midchat{flex:1;min-height:120px}
@media(max-width:760px){
  .live-console.live-host{height:auto;min-height:100dvh}
  .host-stage{aspect-ratio:16/9;max-height:44vh}
}

/* ===== Host 3-column (like the viewer): الحاضرون RIGHT · البثّ CENTER · الدردشة LEFT ===== */
.hh-body.hh3{display:grid;grid-template-columns:290px minmax(0,1fr) 330px;gap:0;flex:1;min-height:0}
.hh-roster,.hh-chat{display:flex;flex-direction:column;min-width:0;min-height:0;background:#17212b}
.hh-roster{border-inline-end:1px solid rgba(0,0,0,.5)}   /* right column → separator on its inline-end (left in RTL) */
.hh-chat{border-inline-start:1px solid rgba(0,0,0,.5)}    /* left column  → separator on its inline-start (right in RTL) */
.hh-colh{flex-shrink:0;padding:12px 14px;font-weight:800;font-size:.86rem;color:#c7d0da;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:8px}
/* max-height:none is the point here. The base .live-sec rule caps every collapsible section at
   30vh, which is right for the stacked mobile layout but wrong for this one: the attendee list owns
   a full-height column of its own, and the cap was cutting it to roughly ten rows with the rest
   hidden behind a scrollbar the host never noticed. flex:1 alone does not beat an explicit
   max-height, so it has to be cleared. */
.hh-roster #liveGridWrap,.hh-roster .live-sec{flex:1;min-height:0;max-height:none;overflow-y:auto}
.hh-roster #liveBannedWrap{flex-shrink:0}
.hh-chat .midchat{flex:1;min-height:0;display:flex;flex-direction:column}
.hh-chat .midchat-msgs{flex:1;min-height:0;overflow-y:auto}
.hh-chat .midchat-input{flex-shrink:0}
.hh-stage{display:flex;flex-direction:column;min-width:0;min-height:0;background:#000}
.hh-stage .host-stage{flex:1;width:100%;aspect-ratio:auto;height:auto;max-height:none;min-height:0;border-bottom:1px solid rgba(0,0,0,.5)}
.hh-stage .host-stage video{width:100%;height:100%;object-fit:contain}
.hh-stage .tgctrl-bar.host-ctrl{flex-shrink:0;background:#17212b;border:none}
@media(max-width:1024px){ .hh-body.hh3{grid-template-columns:230px minmax(0,1fr) 270px} }
/* mobile-only affordances stay hidden on desktop */
.hh-roster-toggle,.hh-roster-x,.hh-backdrop{display:none}
/* ===== MOBILE admin console → TikTok-style, matching the user's live view ===== */
@media(max-width:860px){
  /* full-screen takeover so the console owns the viewport (its lp-head is the header) — matches the user's live page */
  .live-console.live-host{position:fixed;left:0;right:0;top:0;height:100dvh;z-index:60;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:#0e1621}
  /* slim single-row header */
  .live-console.live-host .lp-head{flex-shrink:0;flex-wrap:nowrap;gap:8px;padding:5px 10px;align-items:center}
  .live-console.live-host .lp-logo{height:19px}
  .live-console.live-host .lp-htxt{flex:1;min-width:0}
  .live-console.live-host .lp-htxt .nm{font-size:.85rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .live-console.live-host .lp-htxt .sub{font-size:.66rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .live-console.live-host .lp-rec{margin-inline-start:0;flex-wrap:nowrap;gap:5px}
  .live-console.live-host .rec-btn{padding:5px 9px;font-size:.72rem}
  .live-console.live-host .hh-roster-toggle{padding:5px 9px;font-size:.74rem}
  .live-console.live-host .lv-share{flex-shrink:0;margin:5px 8px 0!important;padding:5px 9px!important}
  .rec-dur{display:none}                                /* server-side rec ignores the duration → declutter */
  .hh-body.hh3{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;gap:0}
  .live-host .hh-stage{display:contents}                 /* video + control bar become direct flex items (host only) */
  .live-host .hh-stage .host-stage{order:0;flex:none;width:100%;aspect-ratio:16/9;max-height:48vh;border:none;background:#000}
  .hh-chat{order:1;flex:1;min-height:0;border:none;background:#0e1621;border-radius:16px 16px 0 0;margin-top:6px;box-shadow:0 -8px 20px -8px rgba(0,0,0,.6)}
  .hh-chat .hh-colh{display:none}
  .hh-chat .midchat-msgs::before{content:"";margin-top:auto}       /* newest pinned to bottom (TikTok) */
  .hh-stage .tgctrl-bar.host-ctrl{order:2;flex-shrink:0;flex-wrap:wrap;justify-content:space-around;gap:8px 4px;padding:8px 6px max(8px,env(safe-area-inset-bottom))}
  .live-console.live-host .tgctrl{min-width:0;gap:3px}
  .live-console.live-host .tgctrl-ic{width:42px;height:42px}
  .live-console.live-host .tgctrl-ic svg{width:19px;height:19px}
  .live-console.live-host .tgctrl-lbl{font-size:.6rem}
  /* الحاضرون → right slide-in panel (physical right + translateX → RTL-safe) */
  .hh-roster{position:fixed;top:0;bottom:0;right:0;left:auto;width:min(300px,84%);z-index:82;background:#0f1720;box-shadow:-14px 0 34px -12px rgba(0,0,0,.7);transform:translateX(100%);transition:transform .28s cubic-bezier(.22,.8,.24,1);border:none}
  body.roster-open .hh-roster{transform:translateX(0)}
  .hh-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,0);visibility:hidden;transition:background .28s,visibility .28s;z-index:81}
  body.roster-open .hh-backdrop{background:rgba(0,0,0,.45);visibility:visible}
  .hh-roster-toggle{display:inline-flex;align-items:center;gap:6px;background:#202b38;border:none;color:#cfe0f0;border-radius:16px;padding:6px 12px;font-size:.82rem;font-weight:700;cursor:pointer;flex-shrink:0}
  .hh-roster .hh-colh .hh-roster-x{display:inline-flex;align-items:center;justify-content:center;margin-inline-start:auto;width:30px;height:30px;border-radius:50%;background:#202b38;border:none;color:#cfe0f0;font-size:1.3rem;line-height:1;cursor:pointer}
}

/* ===== FIX: lock stage + input; only chat messages scroll (grid/flex min-height:0) ===== */
.hh-stage,.hh-side{min-height:0;overflow:hidden}
.hh-side .midchat{flex:1;min-height:0;overflow:hidden}
.hh-side .midchat-msgs{flex:1;min-height:0;overflow-y:auto}
.hh-side .midchat-input{flex-shrink:0}
.hh-side>.live-sec{max-height:26vh}

/* ===== Attendees dropdown: green live dot + clean toggle ===== */
.live-on{display:inline-block;width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.7);animation:liveOnPulse 1.6s infinite;margin-inline-end:6px;vertical-align:middle;flex-shrink:0}
@keyframes liveOnPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 9px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.part-toggle .pt-label{display:inline-flex;align-items:center;gap:3px;font-weight:700}
.part-toggle .chev{font-size:.82rem;color:#6ab3f3}

/* ===== Attendees dropdown moved into popup header (top-left) ===== */
.cm-head{justify-content:space-between;gap:8px}
.cm-head .cm-x{position:static;transform:none;flex-shrink:0}
.cm-head .cm-title{flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cm-part-wrap{position:relative;flex-shrink:0}
.cm-head .part-toggle{width:auto;background:transparent;border:none;padding:6px 8px;border-radius:9px;font-size:.78rem;color:#e9eef3;font-weight:700;display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.cm-head .part-toggle:hover{background:#202b38}
.cm-head .part-toggle .chev{color:#6ab3f3;font-size:.8rem}
.cm-head .part-dropdown{position:absolute;top:calc(100% + 6px);inset-inline-end:0;width:min(260px,80vw);background:#1c2733;border:1px solid rgba(255,255,255,.12);border-radius:12px;box-shadow:0 16px 38px rgba(0,0,0,.6);z-index:60;max-height:46vh;overflow:auto}
.cm-head .part-dropdown.collapsed{max-height:0;overflow:hidden;border-color:transparent;box-shadow:none}
.cm-head .part-dropdown .tgp-list{padding:6px}
/* compact + non-overlapping participant rows inside the viewer dropdown */
.cm-head .part-dropdown .tgp{gap:9px;padding:7px 8px}
.cm-head .part-dropdown .tgp-ava{width:36px;height:36px;font-size:.95rem}
.cm-head .part-dropdown .tgp-name{font-size:.84rem}
.cm-head .part-dropdown .tgp-status{font-size:.7rem}
.cm-head .part-dropdown .tgp-mic{font-size:.98rem}
@media (max-width:480px){
  .cm-head .part-dropdown{width:min(250px,86vw)}
  .cm-head .part-dropdown .tgp{gap:8px;padding:6px 7px}
  .cm-head .part-dropdown .tgp-ava{width:32px;height:32px;font-size:.85rem}
  .cm-head .part-dropdown .tgp-name{font-size:.8rem}
  .cm-head .part-dropdown .tgp-name .badge{padding:0 6px;font-size:.58rem}
  .cm-head .part-dropdown .tgp-status{font-size:.66rem}
}

/* ===== Active speaker glow (green pulse) + talk button (blue off / green AI-wave on) ===== */
.tgp.speaking-now{background:rgba(34,197,94,.12)!important}
.tgp.speaking-now .tgp-ava{animation:spkPulse 1.25s infinite}
.tgp.speaking-now .tgp-mic{color:#22c55e!important}
.tgp.speaking-now .tgp-status{color:#22c55e!important}
@keyframes spkPulse{0%{box-shadow:0 0 0 2px #22c55e,0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 2px #22c55e,0 0 0 10px rgba(34,197,94,0)}100%{box-shadow:0 0 0 2px #22c55e,0 0 0 0 rgba(34,197,94,0)}}
/* talk / mic control: OFF = blue + closed look · ON = green + expanding AI-wave rings */
.cm-box .tgctrl.primary .tgctrl-ic,.live-host .tgctrl.primary .tgctrl-ic{background:#2f6fb0}
.cm-box .tgctrl.primary.on .tgctrl-ic,.live-host .tgctrl.primary.on .tgctrl-ic{background:#22c55e;position:relative;overflow:visible;box-shadow:0 0 16px rgba(34,197,94,.55)}
.cm-box .tgctrl.primary.on .tgctrl-ic::before,.cm-box .tgctrl.primary.on .tgctrl-ic::after,.live-host .tgctrl.primary.on .tgctrl-ic::before,.live-host .tgctrl.primary.on .tgctrl-ic::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid rgba(34,197,94,.5);animation:micWave 1.5s ease-out infinite;pointer-events:none}
.cm-box .tgctrl.primary.on .tgctrl-ic::after,.live-host .tgctrl.primary.on .tgctrl-ic::after{animation-delay:.75s}
@keyframes micWave{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.95);opacity:0}}

/* ===== Active-speaker name overlay (bottom-center of the screen, like famous apps) ===== */
.speaker-ov{position:absolute;bottom:14px;left:50%;transform:translate(-50%,8px);display:flex;gap:6px;flex-wrap:wrap;justify-content:center;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:6;max-width:92%}
.speaker-ov.show{opacity:1;transform:translate(-50%,0)}
.spk-pill{background:rgba(0,0,0,.62);color:#fff;font-weight:700;font-size:.85rem;padding:6px 14px;border-radius:999px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:inline-flex;align-items:center;gap:7px;white-space:nowrap;border:1px solid rgba(34,197,94,.55);box-shadow:0 4px 14px rgba(0,0,0,.45)}
.spk-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e;flex-shrink:0;animation:spkDot 1.1s infinite}
@keyframes spkDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.75)}}
.tg-fs .speaker-ov{bottom:24px}

/* ===== Speaker name BELOW the video (empty area) + more transparent ===== */
.speaker-ov{position:static;inset:auto;transform:none;max-height:0;overflow:hidden;padding:0 8px;opacity:0;transition:max-height .25s ease,opacity .2s,padding .2s}
.speaker-ov.show{max-height:64px;opacity:1;padding:10px 8px}
.spk-pill{background:rgba(0,0,0,.42);border-color:rgba(34,197,94,.4);font-weight:600;box-shadow:0 2px 10px rgba(0,0,0,.35)}
/* fullscreen: keep it floating at the bottom over the video */
.tg-fs .speaker-ov{position:absolute;inset:auto;bottom:26px;left:50%;transform:translateX(-50%);max-height:none;overflow:visible;padding:0;opacity:0}
.tg-fs .speaker-ov.show{opacity:1;max-height:none;padding:0}

/* ===== Speaker name: absolute (no layout shift) at bottom-RIGHT of the empty area ===== */
.cm-body{position:relative}
.speaker-ov{position:absolute;inset:auto;bottom:12px;inset-inline-start:18px;max-height:none;overflow:visible;padding:0;margin:0;opacity:0;transform:none;transition:opacity .22s;z-index:6;display:flex;gap:6px;justify-content:flex-start}
.speaker-ov.show{opacity:1;max-height:none;padding:0}
.tg-fs .speaker-ov{bottom:28px;inset-inline-start:auto;left:50%;transform:translateX(-50%)}

/* speaker pill: smaller + more transparent */
.spk-pill{background:rgba(0,0,0,.3)!important;border-color:rgba(34,197,94,.3)!important;color:rgba(255,255,255,.82);font-size:.7rem;font-weight:600;padding:4px 10px;gap:5px;box-shadow:none}
.spk-pill::before{width:7px;height:7px}

/* ===== Live recording controls + player ===== */
.lp-rec{display:flex;align-items:center;gap:8px;margin-inline-start:auto;flex-shrink:0}
.rec-dur{background:#202b38;color:#e9eef3;border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:6px 8px;font-family:inherit;font-size:.8rem;cursor:pointer}
.rec-dur:disabled{opacity:.5}
.rec-btn{display:inline-flex;align-items:center;gap:7px;background:#2b3a4a;color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:7px 14px;cursor:pointer;font-family:inherit;font-weight:700;font-size:.84rem;white-space:nowrap}
.rec-btn:hover{background:#34465a}
.rec-btn .rec-ic{width:11px;height:11px;border-radius:50%;background:#e0533d;flex-shrink:0}
.rec-btn.rec-on{background:#cc4b3e;border-color:transparent}
.rec-btn.rec-on .rec-ic{background:#fff;animation:recBlink 1.1s infinite}
.rec-btn .rec-time{font-variant-numeric:tabular-nums;font-size:.8rem;opacity:.92}
@keyframes recBlink{0%,100%{opacity:1}50%{opacity:.2}}
.rec-modal{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:9995;display:flex;align-items:center;justify-content:center;padding:18px}
.rec-modal-box{position:relative;width:min(960px,100%)}
.rec-modal-box video{width:100%;max-height:82vh;border-radius:12px;background:#000;display:block}
.rec-modal-x{position:absolute;top:-15px;inset-inline-start:-6px;width:38px;height:38px;border-radius:50%;background:#1c2733;border:1px solid rgba(255,255,255,.25);color:#fff;font-size:1.1rem;cursor:pointer;z-index:2}
@media(max-width:760px){.lp-rec{flex-wrap:wrap;gap:5px}.rec-dur{font-size:.7rem;padding:4px 5px}.rec-btn{padding:6px 9px;font-size:.76rem}}

/* recording share row */
.rec-share{margin-top:10px;border-top:1px solid var(--line);padding-top:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rec-share .rec-course{padding:6px 8px}

/* stealth / incognito monitor (المتخفي) */
.lp-back{background:transparent;border:1px solid var(--line);color:var(--fg,#e8eaed);padding:6px 12px;border-radius:9px;cursor:pointer;font-size:.85rem;white-space:nowrap}
.lp-back:hover{background:rgba(255,255,255,.06)}
.st-badge{margin-inline-start:auto;background:rgba(124,92,255,.15);color:#c9b8ff;border:1px solid rgba(124,92,255,.4);padding:5px 12px;border-radius:20px;font-size:.8rem;font-weight:700;white-space:nowrap}
.st-badge.live{background:rgba(255,64,64,.16);color:#ffb3b3;border-color:rgba(255,64,64,.5)}
.st-chatnote{padding:9px 12px;font-size:.78rem;color:var(--muted);text-align:center;border-top:1px solid var(--line)}

/* floating "broadcast still running" bar (host navigated away while live) */
#liveMini{position:fixed;bottom:18px;inset-inline-start:18px;z-index:9999;display:none;align-items:center;gap:10px;background:#1c1c22;border:1px solid var(--line);box-shadow:0 10px 34px rgba(0,0,0,.55);padding:8px 12px;border-radius:14px}
#liveMini.show{display:flex}
#liveMini .lm-dot{width:10px;height:10px;border-radius:50%;background:#ff3b3b;animation:lmPulse 1.6s infinite}
@keyframes lmPulse{0%{box-shadow:0 0 0 0 rgba(255,59,59,.55)}70%{box-shadow:0 0 0 9px rgba(255,59,59,0)}100%{box-shadow:0 0 0 0 rgba(255,59,59,0)}}
#liveMini .lm-txt{font-size:.85rem;font-weight:700;color:#eee}
#liveMini button{border:none;cursor:pointer;border-radius:9px;padding:7px 11px;font-size:.85rem;font-weight:700;color:#fff}
#liveMini .lm-mic{background:#2a2a33}
#liveMini .lm-mic.on{background:#7c5cff}
#liveMini .lm-back{background:#2b5278}
#liveMini .lm-end{background:#e23b3b}

/* live broadcast branding watermark — roams to a new spot every ~30s (top/center/right/left), never stuck at the bottom */
.live-wm-roam{position:absolute;z-index:7;display:flex;align-items:center;gap:9px;opacity:0;transition:opacity .6s ease;pointer-events:none;user-select:none}
.live-wm-roam.show{opacity:1}
.live-wm-roam{gap:4px}
.live-wm-roam img{height:46px;width:auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,1)) drop-shadow(0 0 5px rgba(0,0,0,.9))}
.live-wm-roam span{font-size:13px;font-weight:800;color:#fff;letter-spacing:.4px;text-shadow:0 1px 3px rgba(0,0,0,1),0 0 8px rgba(0,0,0,.9)}
.live-wm-roam.pos-tc{top:16px;left:50%;transform:translateX(-50%)}
.live-wm-roam.pos-cc{top:50%;left:50%;transform:translate(-50%,-50%)}
.live-wm-roam.pos-tr{top:16px;right:18px}
.live-wm-roam.pos-tl{top:16px;left:18px}
.live-wm-roam.pos-mr{top:50%;right:18px;transform:translateY(-50%)}
.live-wm-roam.pos-ml{top:50%;left:18px;transform:translateY(-50%)}
.live-wm-roam.pos-bc{bottom:46px;left:50%;transform:translateX(-50%)}

/* multi-presenter split-screen grid (host + co-presenters) */
.screen-grid{position:absolute;inset:0;display:grid;gap:4px;background:#000;padding:2px}
.screen-grid.n0{display:none}
.screen-grid.n1{grid-template-columns:1fr}
.screen-grid.n2{grid-template-columns:1fr 1fr}
.screen-grid.n3,.screen-grid.n4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.screen-grid.n3 .screen-tile:nth-child(3){grid-column:1 / -1}
.screen-tile{position:relative;overflow:hidden;background:#000;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;min-height:0}
.screen-tile video{width:100%;height:100%;object-fit:contain;background:#000}
/* SINGLE share → fill the stage edge-to-edge (no black margins whatever the monitor aspect).
   Click a tile → fullscreen shows the FULL screen (contain). Multi-share keeps contain to see all. */
.screen-grid.n1{padding:0;gap:0}
.screen-grid.n1 .screen-tile{border-radius:0}
.screen-grid.n1 .screen-tile video{object-fit:cover}
.screen-tile:hover{outline:2px solid rgba(124,92,255,.6);outline-offset:-2px}
.screen-lbl{display:none}   /* hide the sharer-name label overlaid on the screen */
.screen-zoom{position:absolute;top:6px;inset-inline-end:8px;background:rgba(0,0,0,.5);color:#fff;font-size:.85rem;padding:1px 8px;border-radius:8px;opacity:.8;pointer-events:none}
.screen-tile:hover .screen-zoom{opacity:1;background:rgba(0,0,0,.78)}
.tg-fs .fs-name{display:none}   /* hide the sharer-name label in fullscreen too */
@media (max-width:560px){ .screen-grid.n2{grid-template-columns:1fr;grid-template-rows:1fr 1fr} }

/* ===== call-style circular control buttons (match reference: black bar · gray/cyan/blue/red) ===== */
.tgctrl-bar{background:#0b0b0d!important;border:none!important;border-radius:0!important;gap:16px!important;padding:16px 12px!important}
.tgctrl{min-width:60px}
.tgctrl-ic{width:62px!important;height:62px!important;background:#26262c!important;color:#fff!important;font-size:0!important;box-shadow:none!important;border:none!important;transition:transform .12s,background .15s,box-shadow .15s}
.tgctrl-ic svg{width:27px;height:27px;display:block;stroke:currentColor}
.tgctrl:hover .tgctrl-ic{filter:brightness(1.12)}
.tgctrl:active .tgctrl-ic{transform:scale(.93)}
.tgctrl-lbl{color:#e8eaed!important;font-size:.8rem!important;font-weight:600}
/* mic (primary) → cyan; brighter + glow when live */
/* mic CLOSED → red ; mic OPEN → green + pulsing */
.tgctrl.primary .tgctrl-ic{background:#e0533d!important}
.tgctrl.primary.on .tgctrl-ic{background:#22c55e!important;animation:micPulse 1.25s ease-out infinite!important;box-shadow:0 0 0 0 rgba(34,197,94,.6)!important}
.tgctrl.primary.on .tgctrl-ic::before,.tgctrl.primary.on .tgctrl-ic::after{display:none!important}
@keyframes micPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}70%{box-shadow:0 0 0 13px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
/* positive (speaker / unmute-all / share-on) → blue */
.tgctrl.green .tgctrl-ic{background:#2f6fb3!important}
/* raise-hand → neutral, amber when raised */
.tgctrl.amber .tgctrl-ic{background:#26262c!important}
.tgctrl.amber.on .tgctrl-ic{background:#e0a32e!important;box-shadow:0 0 0 4px rgba(224,163,46,.28)!important}
/* mute-all → muted red */
.tgctrl.red .tgctrl-ic{background:#3a2020!important;color:#ff8a8a!important}
/* leave / end → dark red with red icon (reference "leave") */
.tgctrl.danger .tgctrl-ic{background:#3a1414!important;color:#ff5a5a!important;border:1px solid rgba(255,90,90,.35)!important}
/* phones: ALL control buttons share one row (flex:1 + nowrap) — auto-fits any count incl. the chat button */
@media (max-width:760px){
  .tgctrl-bar{gap:6px!important;padding:12px 8px!important;flex-wrap:nowrap!important}
  .tgctrl{min-width:0!important;flex:1 1 0!important;gap:5px}
  .tgctrl-ic{width:50px!important;height:50px!important}
  .tgctrl-ic svg{width:22px;height:22px}
  .tgctrl-lbl{font-size:.64rem!important;max-width:100%;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:420px){
  .tgctrl-ic{width:44px!important;height:44px!important}
  .tgctrl-ic svg{width:19px;height:19px}
  .tgctrl-lbl{font-size:.58rem!important}
  .chat-badge{inset-inline-end:2px}
}

/* developer credit line (rights) */
.dev-credit{text-align:center;color:#7a7f87;font-size:.72rem;padding:12px 8px 14px;opacity:.85;letter-spacing:.3px;direction:ltr}
.side-foot .dev-credit{padding:8px 6px 2px;font-size:.66rem;opacity:.7}

/* small sender avatar beside incoming chat bubbles */
.mc-ava{width:30px;height:30px;border-radius:50%;flex-shrink:0;align-self:flex-end;background:var(--grad,#7c5cff);background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:.72rem;overflow:hidden}

/* live-chat reply / mention */
/* Telegram-style reply quote: name line + snippet line, each truncated (never overlaps the message) */
.mc-quote{display:block;border-inline-start:3px solid #4aa3ff;background:rgba(74,163,255,.12);padding:4px 10px;border-radius:8px;margin-bottom:6px;font-size:.76rem;line-height:1.45;color:inherit;cursor:pointer;max-width:100%;overflow:hidden}
.mc-quote .mc-qn{display:block;color:#4aa3ff;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-quote .mc-qt{display:block;opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-at{color:#4aa3ff;font-weight:800}
/* someone replied to ME → alert style + bell */
.mc-row.mc-mention .mc-bubble{box-shadow:0 0 0 2px rgba(74,163,255,.55)}
.mc-row.mc-mention .mc-quote{background:rgba(74,163,255,.2)}
.mc-row.mc-mention .mc-qn::after{content:" 🔔"}
.mc-replybar{display:flex;align-items:center;gap:8px;background:rgba(74,163,255,.12);border-inline-start:3px solid #4aa3ff;padding:7px 11px;border-radius:10px;margin:0 8px 6px;font-size:.82rem}
.mc-replyx{margin-inline-start:auto;background:none;border:none;color:#8a9199;cursor:pointer;font-size:1rem;padding:0 5px;line-height:1}
.mc-flash>.mc-bubble{animation:mcFlash 1.4s ease}
@keyframes mcFlash{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 3px rgba(74,163,255,.6)}}

/* ===== Desktop / iPad 3-column live viewer (USERS' live.html only — never admin) =====
   speakers (left) · broadcast screen (center) · chat (right). Mobile keeps the TikTok layout. */
.dlive{display:flex;flex-direction:column;height:100%;background:#0b0f14;color:#e8edf3;overflow:hidden}
.dl-head{display:flex;align-items:center;gap:12px;padding:8px 16px;background:#11161d;border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0}
.dl-head .lp-logo{height:30px;width:auto}
.dl-head .lp-htxt{flex:1;min-width:0}
.dl-head .lp-htxt .nm{font-weight:800;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.dl-head .lp-htxt .sub{font-size:.78rem;color:#8b98a5}
.dl-head .lp-ic{background:none;border:none;color:#cdd6df;cursor:pointer;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dl-head .lp-ic:hover{background:rgba(255,255,255,.08)}
.dl-head .lp-ic svg{width:22px;height:22px}
.dl-badge{display:flex;align-items:center;gap:7px;font-weight:800;font-size:.82rem;color:#ff5c6c;background:rgba(255,60,80,.12);border:1px solid rgba(255,60,80,.3);padding:5px 12px;border-radius:999px;flex-shrink:0}
.dl-grid{flex:1;min-height:0;display:grid;grid-template-columns:270px minmax(0,1fr) 330px}
.dl-left,.dl-right{display:flex;flex-direction:column;min-height:0;min-width:0;background:#0e141b}
.dl-left{border-inline-end:1px solid rgba(255,255,255,.07)}
.dl-right{border-inline-start:1px solid rgba(255,255,255,.07)}
.dl-colhead{flex-shrink:0;padding:12px 14px;font-weight:800;font-size:.86rem;color:#c7d0da;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:8px}
.dl-left .tgp-list{flex:1;min-height:0;overflow-y:auto;padding:8px}
.dl-center{display:flex;flex-direction:column;min-width:0;min-height:0;background:#000}
.dl-stage{position:relative;flex:1;min-height:0;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden}
/* show the shared screen COMPLETE (letterboxed) — never crop it in the center column */
.dl-stage .screen-tile video,
.dl-stage .screen-grid.n1 .screen-tile video{object-fit:contain}
.dl-ctrl{flex-shrink:0;background:#11161d;border-top:1px solid rgba(255,255,255,.07);justify-content:center;gap:14px;padding:10px;display:flex;flex-wrap:wrap}
.dl-right .midchat{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--mc-surface)}
.dl-right .midchat-msgs{flex:1;min-height:0}
.dl-right .midchat-input{flex-shrink:0}
@media (max-width:1024px){ .dl-grid{grid-template-columns:224px minmax(0,1fr) 292px} }
@media (max-width:860px){ .dl-grid{grid-template-columns:186px minmax(0,1fr) 246px} .dl-colhead{padding:10px} .dl-left .tgp-list{padding:6px} }

/* ===== Redaction editor (host console only) — frosted-glass masks over the shared screen ===== */
.redact-modal{position:fixed;inset:0;z-index:400;background:rgba(6,10,16,.72);display:none;align-items:center;justify-content:center;padding:18px}
.redact-modal.open{display:flex}
.redact-box{background:#0f1720;border:1px solid rgba(255,255,255,.1);border-radius:16px;width:min(780px,96vw);max-height:92vh;overflow:auto;padding:16px;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.redact-head{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:1.05rem;color:#eaf0f7}
.redact-close{background:none;border:none;color:#9fb0c0;font-size:1.2rem;cursor:pointer;width:34px;height:34px;border-radius:9px}
.redact-close:hover{background:rgba(255,255,255,.08);color:#fff}
.redact-sub{font-size:.82rem;color:#8fa0b0;margin:6px 0 12px;line-height:1.7}
.redact-tools{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.redact-tools button{background:rgba(124,92,255,.14);border:1px solid rgba(124,92,255,.42);color:#cbb8ff;font-family:inherit;font-weight:700;font-size:.86rem;padding:8px 15px;border-radius:10px;cursor:pointer}
.redact-tools button:hover{background:rgba(124,92,255,.28)}
.redact-stage{position:relative;width:100%;background:#000;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.1);touch-action:none}
.redact-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.redact-layer{position:absolute;inset:0}
.redact-h{position:absolute;border:2px dashed rgba(155,123,255,.98);background:rgba(124,92,255,.12);border-radius:8px;cursor:move;box-shadow:0 0 0 1px rgba(0,0,0,.45)}
.redact-h.circ{border-radius:50%}
.redact-grip{position:absolute;right:-9px;bottom:-9px;width:20px;height:20px;background:#7c5cff;border:2px solid #fff;border-radius:50%;cursor:nwse-resize;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.redact-list-title{font-size:.85rem;font-weight:800;color:#cdd6df;margin:14px 0 8px}
.redact-list{display:flex;flex-direction:column;gap:6px}
.redact-row{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:9px 12px;font-size:.88rem;color:#e6edf4}
.redact-x{background:rgba(224,83,61,.16);border:1px solid rgba(224,83,61,.4);color:#ff6b5a;width:30px;height:30px;border-radius:8px;cursor:pointer;font-size:.9rem}
.redact-x:hover{background:rgba(224,83,61,.32)}
.redact-empty{font-size:.84rem;color:#7c8b99;text-align:center;padding:12px}
/* draggable blur handles ON the host stage (move/resize the mask directly on the live screen) */
.live-redact-ov{position:absolute;inset:0;pointer-events:none;z-index:7}
.live-rd-h{position:absolute;pointer-events:auto;border:2px dashed rgba(155,123,255,.95);background:rgba(124,92,255,.10);border-radius:8px;cursor:move;box-shadow:0 0 0 1px rgba(0,0,0,.45);touch-action:none}
.live-rd-h.circ{border-radius:50%}
.live-rd-grip{position:absolute;right:-9px;bottom:-9px;width:20px;height:20px;background:#7c5cff;border:2px solid #fff;border-radius:50%;cursor:nwse-resize;box-shadow:0 2px 6px rgba(0,0,0,.5)}
/* a co-host sees "جاري التسجيل" (another admin is already recording) → can't double-record */
.rec-btn.rec-remote{background:rgba(240,177,50,.16)!important;border-color:rgba(240,177,50,.5)!important;color:#f0b132!important;cursor:pointer;opacity:.98}
.rec-btn.rec-remote .rec-ic{background:#f0b132!important;box-shadow:0 0 0 4px rgba(240,177,50,.18);animation:micDot 1.3s ease-in-out infinite!important}