:root{ --bg:#090d13; --panel:#0e1522; --panel-2:#0e1728; --panel-3:#0b1220; --text:#eaf0f7; --muted:#9bb0c8; --primary:#5aa2ff; --accent:#2eb2ff; --danger:#ff4d4d; --success:#2bd98f; --border:#1d2b44; }
*{box-sizing:border-box}
body{background:radial-gradient(1000px 480px at 20% -10%, #0e1a2f 0%, transparent 60%), var(--bg);color:var(--text);min-height:100vh}
.navbar{background:linear-gradient(180deg,#0c1320,#0b1019);border-bottom:1px solid #1c2a3f}
.card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid #1d2b42;border-radius:18px}
.btn-primary{background:linear-gradient(180deg,#3e7cff,#2263ef);border:0;border-radius:14px}
.btn-outline-light{border-color:#2b3d5c;color:#dfe9f5}
.btn-outline-light:hover{background:#16233a}
.btn-outline-primary{border-color:#2a58a3;color:#cfe2ff}
main.container{max-width:1180px}
.meeting-shell{min-height: calc(100vh - 110px);}
.room-body{display:grid;grid-template-columns:1fr 380px;gap:12px}
.stage{display:grid;grid-template-rows:520px auto;gap:14px}
.video-large{position:relative;background:#000;border:1px solid var(--border);border-radius:20px;overflow:hidden}
.video-large::before{content:"";position:absolute;right:12px;bottom:12px;width:48px;height:48px;background:url('/static/img/logo.png') no-repeat center/contain;opacity:.22;z-index:3;pointer-events:none}
.video-large video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video-large .name{position:absolute;left:10px;bottom:10px;background:#164db3cc;border:1px solid var(--border);border-radius:10px;padding:6px 10px}
.pinned-badge{position:absolute;top:10px;left:10px;background:#17243a;border-radius:12px;padding:4px 10px;z-index:4}
.btn-unpin{position:absolute;top:10px;right:10px;background:#172235;border:1px solid #304660;border-radius:30px;color:#fff;padding:4px 10px;z-index:4}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;max-height:260px;overflow:auto;padding:4px}

.tile{position:relative;background:#0a0a0a;border:1px solid var(--border);border-radius:16px;min-height:150px;overflow:hidden;transition:box-shadow .1s ease}
.tile video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background:#000;
}
.tile.off video{ opacity:0.001; pointer-events:none; }
.tile:not(.off) video{ opacity:1; }

.tile .avatar{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:2rem;color:#e8eef6;background:linear-gradient(160deg,#172036,#111827)}
.tile .name{position:absolute;left:10px;bottom:8px;background:#0e1522cc;border:1px solid var(--border);border-radius:10px;padding:4px 8px}

.sidebar{background:linear-gradient(180deg,var(--panel),var(--panel-3));border:1px solid #20324f;border-radius:20px;padding:10px;display:flex;flex-direction:column;gap:10px}
.sidebar .nav-tabs{border-color:#2a3c5a}
.sidebar .nav-tabs .nav-link{color:var(--muted);border:0;border-bottom:2px solid transparent;border-radius:0}
.sidebar .nav-tabs .nav-link.active{color:#fff;border-bottom-color:#5aa2ff;background:transparent}
.panel .panel-body{max-height:calc(100vh - 280px);overflow:auto}
.chat-log{background:linear-gradient(180deg,#0b1220,#0b1019);border-radius:14px;border:1px solid #1f2e47;padding:10px;max-height:calc(100vh - 360px);overflow:auto}
.msg{display:flex;gap:10px;margin-bottom:10px}
.msg .bubble{max-width:85%;padding:10px 14px;border-radius:16px 16px 16px 6px;background:#111a2a;border:1px solid #224062}
.msg.me .bubble{background:#13284d;border-color:#2a58a3}
.msg .meta{color:#8fa4bf;font-size:.8rem;margin-top:2px}
.chat-composer{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;margin-top:8px}
.chat-entry{height:46px;border-radius:14px;background:#0f1626;border:1px solid #223456;color:#dfe8f5;padding:10px 12px}
.send-btn{height:46px;border-radius:14px;background:linear-gradient(180deg,#2b75ff,#1a59df);border:0;padding:0 18px;font-weight:700}

.room-toolbar{margin-top:10px}
.toolbar-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
.tool{border-radius:16px;background:linear-gradient(180deg,#121a2b,#0e1522);border:1px solid #223353;color:#fff;padding:10px;transition:transform .08s ease;position:relative}
.tool:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(18,26,43,.35)}
.tool.danger{background:linear-gradient(180deg,#3e0e12,#2b0c10);border-color:#62232b}

.hero{background:linear-gradient(130deg,#0e1a2f,#0b0f18);border:1px solid #1b2a44;border-radius:22px;padding:28px}
.hero .display-6{letter-spacing:.3px}
.feature{background:linear-gradient(180deg,#0e1626,#0b111c);border:1px solid #1b2a44;border-radius:16px;padding:16px}
.room-title{font-size:1.15rem;font-weight:700;letter-spacing:.3px;background:linear-gradient(90deg,#173057,#0f1a2e);border:1px solid #1b2a44;border-radius:12px;padding:8px 12px;display:inline-flex;align-items:center;gap:8px}
.room-title .badge{background:linear-gradient(90deg, #ff3d00, #ff9100);border:1px solid #2a4a7a}

/* Manage panel & toasts */
.manage-panel{position:fixed;top:72px;right:16px;z-index:1100;width:320px;max-height:70vh;overflow:auto;background:linear-gradient(180deg,#0f1626,#0b111c);border:1px solid #223353;border-radius:16px;box-shadow:0 16px 34px rgba(10,16,30,.55);padding:12px;display:none}
.manage-panel.show{display:block}
.manage-panel h6{margin:4px 0 8px 0}
.manage-panel .list-unstyled>li{padding:6px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.manage-panel .ctrl .btn-sm{padding:2px 8px;border-radius:10px}

.toast-wrap{position:fixed;right:16px;bottom:16px;z-index:2000;display:flex;flex-direction:column;gap:8px}
.toast-item{background:rgba(20,20,20,.9);color:#fff;padding:10px 12px;border-radius:10px;box-shadow:0 2px 16px rgba(0,0,0,.35)}
.toast-item .toast-actions{display:flex;gap:6px}
.toast-item .btn{padding:2px 8px;border-radius:8px}

/* Speaking frame */
.tile.speaking{ box-shadow:0 0 0 3px rgba(0,200,83,.85) inset !important; transition:box-shadow .15s ease-in-out; }

/* شارة أعلى الفيديو الكبير وقت الشير */
.share-top-badge{
  position:absolute; top:10px; right:10px; z-index:4;
  background:#112642; border:1px solid #2a4a7a; color:#eaf0f7;
  border-radius:12px; padding:6px 10px;
}

/* شارات الزوايا للتايل */
.corner-badge{
  position:absolute; top:8px; left:8px; z-index:3;
  background:#0f1b2e; border:1px solid #25416a; color:#cfe8ff;
  border-radius:10px; padding:2px 8px; font-size:12px;
}
.corner-badge.camoff{ background:#23131a; border-color:#5a2a3a; color:#ffd3d3; }
.corner-badge.share{ background:#132642; border-color:#2a4a7a; color:#cfe8ff; }

/* نقطة مضيئة على زر الشير */
#btn-share.sharing::after{
  content:''; position:absolute; top:8px; right:10px;
  width:8px; height:8px; border-radius:50%;
  background:#2bd98f; box-shadow:0 0 10px #2bd98f;
}

/* نقطة نابضة بجانب الاسم عند التحدث */
.pulse-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:#2bd98f; box-shadow:0 0 8px rgba(43,217,143,.9);
  animation:pulse 1s infinite ease-in-out;
  vertical-align:middle;
}
@keyframes pulse{
  0%{ transform:scale(0.9); opacity:.8; }
  50%{ transform:scale(1.2); opacity:1; }
  100%{ transform:scale(0.9); opacity:.8; }
}

/* شارة ميوت */
.corner-badge.muted{
  background:#2a1620; border-color:#5a2a3a; color:#ffd3d3;
}


/* Landing */
.landing .hero{padding:32px 0}
.hero .hero-img{height:320px;background:radial-gradient(ellipse at center,#0d1628 0%,#0b1220 60%,#0a0e18 100%)}
.feature{background:linear-gradient(180deg,#0f182b,#0b1220);border:1px solid #1b2a45;border-radius:16px}
.object-fit-cover{object-fit:cover}