/* يُسر لايف — Daily · سماوي هادئ · Tajawal */ 
:root { 
 --yl-sky-50: #f0f9ff; 
 --yl-sky-100: #e0f2fe; 
 --yl-sky-200: #bae6fd; 
 --yl-sky-400: #38bdf8; 
 --yl-sky-500: #0ea5e9; 
 --yl-sky-600: #0284c7; 
 --yl-sky-700: #0369a1; 
 --yl-sky-800: #075985; 
 --yl-ink: #0c4a6e; 
 --yl-muted: #64748b; 
 --yl-line: #dbeafe; 
 --yl-danger: #dc2626; 
 --yl-radius: 18px; 
 --yl-shadow: 0 14px 36px rgba(2, 132, 199, 0.1); 
} 
 
*, 
*::before, 
*::after { box-sizing: border-box; } 
 
body.yusr-live { 
 margin: 0; 
 min-height: 100vh; 
 font-family: "Tajawal", Tahoma, sans-serif; 
 color: var(--yl-ink); 
 background: 
 radial-gradient(900px 420px at 100% -10%, rgba(56, 189, 248, 0.2), transparent 55%), 
 radial-gradient(700px 380px at -5% 100%, rgba(14, 165, 233, 0.12), transparent 50%), 
 linear-gradient(180deg, #f8fcff 0%, #eef7ff 100%); 
} 
 
.yl-shell { 
 min-height: 100vh; 
 display: flex; 
 flex-direction: column; 
 padding: 0 clamp(16px, 4vw, 40px); 
} 
 
.yl-topbar { 
 display: flex; 
 align-items: center; 
 justify-content: space-between; 
 padding: 18px 0; 
} 
 
.yl-brand { 
 display: inline-flex; 
 align-items: center; 
 gap: 10px; 
 text-decoration: none; 
 color: var(--yl-ink); 
 font-weight: 800; 
 font-size: 1.2rem; 
} 
 
.yl-brand img { 
 width: 40px; 
 height: 40px; 
 object-fit: contain; 
 border-radius: 10px; 
} 
 
.yl-link { 
 color: var(--yl-sky-700); 
 text-decoration: none; 
 font-weight: 700; 
} 
 
.yl-lobby { 
 flex: 1; 
 display: flex; 
 flex-direction: column; 
 justify-content: center; 
 gap: 22px; 
 padding: 12px 0 36px; 
 max-width: min(1520px, calc(100vw - 48px)); 
 width: 100%; 
 margin: 0 auto; 
} 
 
.yl-intro { text-align: center; } 
 
.yl-badge { 
 display: inline-flex; 
 align-items: center; 
 gap: 8px; 
 margin: 0 0 10px; 
 padding: 6px 12px; 
 border-radius: 999px; 
 background: rgba(14, 165, 233, 0.1); 
 color: var(--yl-sky-700); 
 font-size: 0.86rem; 
 font-weight: 800; 
} 
 
.yl-intro h1 { 
 margin: 0 0 8px; 
 font-size: clamp(2rem, 5vw, 2.8rem); 
 font-weight: 800; 
 color: var(--yl-sky-700); 
} 
 
.yl-intro p { 
 margin: 0; 
 color: var(--yl-muted); 
 font-weight: 600; 
 font-size: 1.05rem; 
} 
 
.yl-alert { 
 padding: 12px 14px; 
 border-radius: 12px; 
 background: #fef2f2; 
 border: 1px solid #fecaca; 
 color: #991b1b; 
 font-weight: 700; 
} 
 
.yl-setup { 
 background: rgba(255, 255, 255, 0.88); 
 border: 1px solid var(--yl-line); 
 border-radius: var(--yl-radius); 
 box-shadow: var(--yl-shadow); 
 padding: 22px; 
} 
 
.yl-setup h2 { 
 margin: 0 0 8px; 
 font-size: 1.15rem; 
 font-weight: 800; 
} 
 
.yl-setup p, 
.yl-setup li { 
 color: var(--yl-muted); 
 font-weight: 600; 
 line-height: 1.7; 
} 
 
.yl-setup a { color: var(--yl-sky-700); font-weight: 800; } 
 
.yl-codeblock { 
 margin: 14px 0 0; 
 padding: 14px; 
 border-radius: 12px; 
 background: #0c4a6e; 
 color: #e0f2fe; 
 font-size: 0.88rem; 
 overflow: auto; 
 direction: ltr; 
 text-align: left; 
} 
 
.yl-forms { 
 display: grid; 
 grid-template-columns: repeat(2, minmax(0, 1fr)); 
 gap: 16px; 
} 

.yl-forms--modes { 
 grid-template-columns: 1fr; 
 gap: 18px; 
 align-items: stretch; 
} 

@media (min-width: 760px) { 
 .yl-forms--modes { 
 grid-template-columns: repeat(2, minmax(0, 1fr)); 
 } 
} 

@media (min-width: 1180px) { 
 .yl-forms--modes { 
 grid-template-columns: repeat(4, minmax(0, 1fr)); 
 gap: 20px; 
 } 
} 

.yl-box--mode { 
 display: flex; 
 flex-direction: column; 
 min-height: 100%; 
 height: 100%; 
} 

.yl-box--mode > .yl-btn:last-child,
.yl-box--mode > button.yl-btn:last-of-type { 
 margin-top: auto; 
} 
 
.yl-mode-icon { 
 width: 52px; 
 height: 52px; 
 border-radius: 16px; 
 display: grid; 
 place-items: center; 
 font-size: 1.5rem; 
 color: #0369a1; 
 background: linear-gradient(135deg, #e0f2fe, #bae6fd); 
 margin-bottom: 8px; 
} 
 
.yl-mode-icon--later { 
 color: #0f766e; 
 background: linear-gradient(135deg, #ccfbf1, #99f6e4); 
} 
 
.yl-mode-icon--join { 
 color: #1d4ed8; 
 background: linear-gradient(135deg, #dbeafe, #bfdbfe); 
} 
 
.yl-mode-desc { 
 margin: -4px 0 12px; 
 color: var(--yl-muted); 
 font-weight: 600; 
 line-height: 1.6; 
 font-size: 0.92rem; 
} 
 
.yl-flash { 
 width: 100%; 
 max-width: none; 
 margin: 0 0 12px; 
 padding: 12px 14px; 
 border-radius: 12px; 
 background: #fef3c7; 
 color: #92400e; 
 font-weight: 700; 
 text-align: center; 
} 
 
.yl-wait { 
 width: min(640px, 100%); 
 margin: 0 auto; 
 padding: 24px 0 40px; 
} 
 
.yl-wait-card { 
 background: var(--yl-card, rgba(255, 255, 255, 0.92)); 
 border: 1px solid var(--yl-line); 
 border-radius: 22px; 
 padding: 28px 22px; 
 text-align: center; 
 box-shadow: 0 16px 40px rgba(2, 132, 199, 0.08); 
} 
 
.yl-wait-card h1 { 
 margin: 10px 0 8px; 
 font-size: 1.45rem; 
 font-weight: 800; 
 color: var(--yl-ink); 
} 
 
.yl-wait-card > p { 
 margin: 0 0 16px; 
 color: var(--yl-muted); 
 font-weight: 600; 
 line-height: 1.7; 
} 
 
.yl-wait-badge { 
 display: inline-flex; 
 align-items: center; 
 gap: 8px; 
 padding: 8px 12px; 
 border-radius: 999px; 
 background: #ecfeff; 
 color: #0e7490; 
 font-weight: 800; 
 font-size: 0.88rem; 
} 
 
.yl-wait-badge--guest { 
 background: #fff7ed; 
 color: #c2410c; 
} 
 
.yl-wait-code { 
 font-size: 1.35rem; 
 font-weight: 800; 
 letter-spacing: 0.04em; 
 padding: 14px 16px; 
 border-radius: 14px; 
 background: #f0f9ff; 
 color: #0c4a6e; 
 margin: 0 auto 16px; 
 width: fit-content; 
 min-width: min(100%, 280px); 
} 
 
.yl-wait-actions { 
 display: flex; 
 flex-wrap: wrap; 
 gap: 10px; 
 justify-content: center; 
} 
 
.yl-inline-form { 
 display: inline; 
 margin: 0; 
} 
 
.yl-wait-pulse { 
 font-weight: 800; 
 color: #0369a1; 
 animation: yl-pulse-text 1.4s ease-in-out infinite; 
} 
 
@keyframes yl-pulse-text { 
 0%, 100% { opacity: 1; } 
 50% { opacity: 0.55; } 
} 
 
.yl-box { 
 background: rgba(255, 255, 255, 0.88); 
 border: 1px solid var(--yl-line); 
 border-radius: var(--yl-radius); 
 box-shadow: var(--yl-shadow); 
 padding: 20px; 
 display: grid; 
 gap: 8px; 
} 
 
.yl-box h2 { 
 margin: 0 0 8px; 
 font-size: 1.1rem; 
 font-weight: 800; 
 color: var(--yl-sky-800); 
} 
 
.yl-box label { 
 font-size: 0.85rem; 
 font-weight: 700; 
 color: var(--yl-sky-700); 
} 
 
.yl-box input { 
 width: 100%; 
 border: 1px solid var(--yl-line); 
 border-radius: 12px; 
 padding: 11px 12px; 
 font: inherit; 
 font-weight: 600; 
 color: var(--yl-ink); 
 background: #fff; 
 outline: none; 
} 
 
.yl-box input:focus { 
 border-color: var(--yl-sky-400); 
 box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15); 
} 
 
.yl-code-row { 
 display: grid; 
 grid-template-columns: 1fr auto; 
 gap: 8px; 
} 
 
.yl-btn { 
 appearance: none; 
 border: 0; 
 cursor: pointer; 
 display: inline-flex; 
 align-items: center; 
 justify-content: center; 
 gap: 8px; 
 font: inherit; 
 font-weight: 800; 
 text-decoration: none; 
 border-radius: 999px; 
 padding: 11px 18px; 
 transition: transform 0.2s ease, box-shadow 0.2s ease; 
} 
 
.yl-btn:hover { transform: translateY(-1px); } 
 
.yl-btn--primary { 
 margin-top: 6px; 
 color: #fff; 
 background: linear-gradient(120deg, var(--yl-sky-600), var(--yl-sky-500)); 
 box-shadow: 0 10px 22px rgba(2, 132, 199, 0.25); 
} 
 
.yl-btn--sky { 
 margin-top: 6px; 
 color: #fff; 
 background: linear-gradient(120deg, #38bdf8, #7dd3fc); 
 box-shadow: 0 10px 22px rgba(56, 189, 248, 0.28); 
} 
 
.yl-btn--soft { 
 color: var(--yl-sky-700); 
 background: var(--yl-sky-100); 
 border: 1px solid var(--yl-line); 
} 
 
.yl-btn--danger { 
 color: #fff; 
 background: var(--yl-danger); 
} 
 
.yl-btn--sm { 
 padding: 8px 12px; 
 font-size: 0.88rem; 
} 
 
.yl-footer { 
 text-align: center; 
 padding: 12px 0 24px; 
 color: var(--yl-muted); 
 font-size: 0.85rem; 
 font-weight: 600; 
} 
 
body.yusr-live.is-in-meeting { 
 background: #0b3b57; 
 color: #f8fafc; 
} 
 
.yl-meeting { 
 min-height: 100vh; 
 display: grid; 
 grid-template-rows: auto 1fr auto; 
 background: 
 radial-gradient(700px 360px at 90% 0%, rgba(56, 189, 248, 0.2), transparent 55%), 
 #0b3b57; 
} 
 
.yl-meeting__bar { 
 display: flex; 
 align-items: center; 
 justify-content: space-between; 
 gap: 12px; 
 padding: 10px clamp(12px, 3vw, 24px); 
 background: rgba(7, 89, 133, 0.55); 
 border-bottom: 1px solid rgba(255, 255, 255, 0.08); 
} 
 
.yl-meeting__title { 
 display: flex; 
 align-items: center; 
 gap: 10px; 
 min-width: 0; 
} 
 
.yl-meeting__title img { 
 width: 36px; 
 height: 36px; 
 border-radius: 9px; 
 object-fit: contain; 
} 
 
.yl-meeting__title strong { 
 display: block; 
 font-size: 1rem; 
 font-weight: 800; 
} 
 
.yl-meeting__title span { 
 display: block; 
 font-size: 0.8rem; 
 opacity: 0.75; 
 font-weight: 600; 
} 
 
.yl-meeting__meta { 
 display: flex; 
 gap: 8px; 
 flex-wrap: wrap; 
 align-items: center; 
} 
 
.yl-live-pill, 
.yl-count-pill { 
 display: inline-flex; 
 align-items: center; 
 gap: 6px; 
 padding: 6px 10px; 
 border-radius: 999px; 
 background: rgba(255, 255, 255, 0.12); 
 font-size: 0.82rem; 
 font-weight: 700; 
} 
 
.yl-live-pill { 
 background: rgba(239, 68, 68, 0.22); 
 color: #fecaca; 
} 
 
.yl-meeting-body { 
 display: grid; 
 grid-template-columns: 1fr; 
 min-height: 0; 
 height: calc(100vh - 150px); 
 position: relative; 
} 
 
.yl-meeting-body:has(#ylSidePanel:not([hidden])) { 
 grid-template-columns: 1fr min(320px, 42vw); 
} 
 
.yl-stage-wrap { 
 position: relative; 
 min-height: 0; 
 padding: 12px; 
 height: 100%; 
 background: #0b3b57; 
 overflow: hidden; 
} 
 
.yl-media-banner { 
 position: absolute; 
 z-index: 8; 
 left: 50%; 
 top: 16px; 
 transform: translateX(-50%); 
 width: min(560px, calc(100% - 24px)); 
 display: flex; 
 flex-wrap: wrap; 
 align-items: center; 
 justify-content: center; 
 gap: 10px; 
 padding: 12px 14px; 
 border-radius: 14px; 
 background: rgba(255, 255, 255, 0.96); 
 color: #0c4a6e; 
 box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22); 
 text-align: center; 
} 
 
.yl-media-banner[hidden], 
.yl-media-banner.is-hidden { 
 display: none !important; 
} 
 
.yl-media-banner span { 
 font-weight: 700; 
 font-size: 0.92rem; 
 line-height: 1.6; 
 flex: 1 1 220px; 
} 
 
.yl-btn--banner { 
 width: auto !important; 
 margin: 0 !important; 
 padding: 10px 16px !important; 
 font-size: 0.95rem !important; 
 border-radius: 12px !important; 
 animation: yl-pulse-btn 1.8s ease-in-out infinite; 
} 
 
.yl-tile-placeholder { 
 position: absolute; 
 inset: 0; 
 display: grid; 
 place-items: center; 
 color: rgba(255, 255, 255, 0.55); 
 font-size: 3rem; 
 pointer-events: none; 
} 
 
.yl-tile.has-video .yl-tile-placeholder { 
 display: none; 
} 
 
.yl-tile.is-speaking { 
 box-shadow: 
 0 0 0 3px rgba(56, 189, 248, 0.95), 
 0 0 28px 6px rgba(14, 165, 233, 0.55); 
 outline: 2px solid rgba(125, 211, 252, 0.9); 
 z-index: 2; 
} 
 
.yl-tile.is-speaking::after { 
 content: ''; 
 position: absolute; 
 inset: 0; 
 border-radius: inherit; 
 pointer-events: none; 
 box-shadow: inset 0 0 40px rgba(56, 189, 248, 0.25); 
} 
 
.yl-tile-hand { 
 position: absolute; 
 inset: 0; 
 margin: auto; 
 width: 78px; 
 height: 78px; 
 border-radius: 50%; 
 display: grid; 
 place-items: center; 
 background: #f59e0b; 
 color: #fff; 
 font-size: 2.1rem; 
 box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); 
 animation: yl-wave-hand 0.7s ease-in-out infinite; 
 z-index: 4; 
} 
 
.yl-tile-hand[hidden] { 
 display: none !important; 
} 
 
.yl-side { 
 border-inline-start: 1px solid rgba(255, 255, 255, 0.1); 
 background: rgba(7, 56, 84, 0.95); 
 display: flex; 
 flex-direction: column; 
 min-height: 0; 
} 
 
.yl-side[hidden] { 
 display: none !important; 
} 
 
.yl-side__head { 
 display: flex; 
 align-items: center; 
 justify-content: space-between; 
 padding: 12px 14px; 
 border-bottom: 1px solid rgba(255, 255, 255, 0.08); 
} 
 
.yl-icon-btn { 
 appearance: none; 
 border: 0; 
 background: rgba(255, 255, 255, 0.1); 
 color: #fff; 
 width: 34px; 
 height: 34px; 
 border-radius: 10px; 
 cursor: pointer; 
} 
 
.yl-side__body { 
 flex: 1; 
 min-height: 0; 
 overflow: auto; 
 padding: 10px; 
} 
 
.yl-people { 
 list-style: none; 
 margin: 0; 
 padding: 0; 
 display: grid; 
 gap: 8px; 
} 
 
.yl-people li { 
 display: flex; 
 align-items: center; 
 gap: 8px; 
 padding: 10px 12px; 
 border-radius: 12px; 
 background: rgba(255, 255, 255, 0.06); 
 font-weight: 700; 
 font-size: 0.92rem; 
} 
 
.yl-people li.is-hand { 
 outline: 1px solid rgba(245, 158, 11, 0.55); 
} 
 
.yl-hand-ico { 
 margin-inline-start: auto; 
 color: #fbbf24; 
} 
 
.yl-chat-pane { 
 display: flex; 
 flex-direction: column; 
 gap: 8px; 
 height: 100%; 
} 
 
.yl-chat-pane[hidden] { 
 display: none !important; 
} 
 
.yl-chat-log { 
 flex: 1; 
 overflow: auto; 
 display: flex; 
 flex-direction: column; 
 gap: 8px; 
 padding: 4px; 
} 
 
.yl-chat-row { 
 padding: 8px 10px; 
 border-radius: 12px; 
 background: rgba(255, 255, 255, 0.08); 
 max-width: 95%; 
} 
 
.yl-chat-row.is-mine { 
 background: rgba(14, 165, 233, 0.28); 
 align-self: flex-start; 
} 
 
.yl-chat-row strong { 
 display: block; 
 font-size: 0.78rem; 
 opacity: 0.85; 
 margin-bottom: 2px; 
} 
 
.yl-chat-row p { 
 margin: 0; 
 font-size: 0.9rem; 
 line-height: 1.5; 
 font-weight: 600; 
} 
 
.yl-chat-form { 
 display: flex; 
 gap: 8px; 
} 
 
.yl-chat-form input { 
 flex: 1; 
 border: 0; 
 border-radius: 12px; 
 padding: 10px 12px; 
 font: inherit; 
 background: rgba(255, 255, 255, 0.92); 
 color: #0c4a6e; 
} 
 
.yl-dock { 
 display: flex; 
 justify-content: center; 
 align-items: center; 
 flex-wrap: wrap; 
 gap: 8px; 
 padding: 10px 12px 14px; 
 background: rgba(3, 42, 64, 0.92); 
 border-top: 1px solid rgba(255, 255, 255, 0.08); 
} 
 
.yl-dock__btn { 
 appearance: none; 
 border: 0; 
 cursor: pointer; 
 min-width: 64px; 
 padding: 8px 10px; 
 border-radius: 14px; 
 background: rgba(255, 255, 255, 0.1); 
 color: #fff; 
 display: inline-flex; 
 flex-direction: column; 
 align-items: center; 
 gap: 4px; 
 font: inherit; 
 font-size: 0.72rem; 
 font-weight: 700; 
 transition: background 0.15s ease, transform 0.15s ease; 
} 
 
.yl-dock__btn i { 
 font-size: 1.15rem; 
} 
 
.yl-dock__btn:hover { 
 background: rgba(255, 255, 255, 0.18); 
 transform: translateY(-1px); 
} 
 
.yl-dock__btn.is-off { 
 background: rgba(239, 68, 68, 0.35); 
} 
 
.yl-dock__btn.is-on { 
 background: rgba(14, 165, 233, 0.45); 
} 
 
.yl-dock__btn--danger { 
 background: #dc2626; 
} 
 
.yl-dock__btn--danger:hover { 
 background: #b91c1c; 
} 
 
.yl-perm-gate { 
 position: absolute; 
 inset: 12px; 
 z-index: 6; 
 display: grid; 
 place-items: center; 
 border-radius: 18px; 
 background: 
 radial-gradient(600px 280px at 80% 0%, rgba(56, 189, 248, 0.25), transparent 55%), 
 linear-gradient(160deg, rgba(7, 89, 133, 0.92), rgba(11, 59, 87, 0.96)); 
} 
 
.yl-perm-card { 
 width: min(520px, 100%); 
 padding: 28px 22px; 
 border-radius: 22px; 
 background: rgba(255, 255, 255, 0.96); 
 color: #0c4a6e; 
 text-align: center; 
 box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); 
} 
 
.yl-perm-icons { 
 display: flex; 
 justify-content: center; 
 gap: 12px; 
 margin-bottom: 14px; 
} 
 
.yl-perm-icon { 
 width: 54px; 
 height: 54px; 
 border-radius: 16px; 
 display: grid; 
 place-items: center; 
 font-size: 1.4rem; 
 color: #0369a1; 
 background: linear-gradient(135deg, #e0f2fe, #bae6fd); 
} 
 
.yl-perm-card h2 { 
 margin: 0 0 8px; 
 font-size: 1.35rem; 
 font-weight: 800; 
} 
 
.yl-perm-card > p { 
 margin: 0 0 18px; 
 color: #475569; 
 font-weight: 600; 
 line-height: 1.75; 
} 
 
.yl-perm-card .yl-btn--enter, 
.yl-btn--enter { 
 width: 100%; 
 margin: 0 0 12px; 
 padding: 18px 20px; 
 font-size: 1.12rem; 
 color: #fff !important; 
 background: linear-gradient(120deg, #059669, #10b981) !important; 
 box-shadow: 0 14px 28px rgba(5, 150, 105, 0.35); 
 animation: yl-pulse-btn 1.8s ease-in-out infinite; 
 border-radius: 16px; 
} 
 
.yl-btn--enter:disabled { 
 opacity: 0.7; 
 animation: none; 
 cursor: wait; 
} 
 
@keyframes yl-pulse-btn { 
 0%, 100% { transform: translateY(0); box-shadow: 0 14px 28px rgba(5, 150, 105, 0.35); } 
 50% { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(5, 150, 105, 0.45); } 
} 
 
.yl-perm-hint { 
 padding: 10px 12px; 
 border-radius: 12px; 
 background: #ecfeff; 
 color: #0e7490; 
 font-weight: 700; 
 font-size: 0.92rem; 
 line-height: 1.6; 
} 
 
.yl-perm-blocked { 
 margin-top: 16px; 
 text-align: right; 
} 
 
.yl-perm-blocked h3 { 
 margin: 0 0 12px; 
 font-size: 1rem; 
 font-weight: 800; 
 color: #b45309; 
 text-align: center; 
} 
 
.yl-perm-steps { 
 list-style: none; 
 margin: 0 0 14px; 
 padding: 0; 
 display: grid; 
 gap: 10px; 
} 
 
.yl-perm-steps li { 
 display: grid; 
 grid-template-columns: auto 1fr; 
 gap: 10px; 
 align-items: start; 
 padding: 10px 12px; 
 border-radius: 14px; 
 background: #f8fafc; 
 border: 1px solid #e2e8f0; 
} 
 
.yl-step-num { 
 width: 28px; 
 height: 28px; 
 border-radius: 50%; 
 display: grid; 
 place-items: center; 
 background: #0284c7; 
 color: #fff; 
 font-weight: 800; 
 font-size: 0.85rem; 
} 
 
.yl-perm-steps strong { 
 display: block; 
 font-size: 0.95rem; 
 color: #0c4a6e; 
} 
 
.yl-perm-steps em { 
 display: block; 
 margin-top: 2px; 
 font-style: normal; 
 color: #64748b; 
 font-size: 0.85rem; 
 font-weight: 600; 
} 
 
.yl-perm-blocked .yl-btn { 
 width: 100%; 
 margin-top: 8px; 
} 
 
.yl-video-grid { 
 height: 100%; 
 display: grid; 
 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); 
 gap: 12px; 
 align-content: stretch; 
} 
 
.yl-tile { 
 position: relative; 
 overflow: hidden; 
 border-radius: 16px; 
 background: #075985; 
 border: 1px solid rgba(255, 255, 255, 0.1); 
 min-height: 180px; 
} 
 
.yl-tile video { 
 width: 100%; 
 height: 100%; 
 object-fit: cover; 
 background: #0b3b57; 
} 
 
.yl-tile.is-local video { 
 transform: scaleX(-1); 
} 
 
.yl-tile-name { 
 position: absolute; 
 inset-inline-start: 10px; 
 bottom: 10px; 
 padding: 5px 10px; 
 border-radius: 999px; 
 background: rgba(0, 0, 0, 0.45); 
 color: #fff; 
 font-size: 0.8rem; 
 font-weight: 700; 
} 
 
.yl-join-error { 
 position: absolute; 
 z-index: 5; 
 left: 50%; 
 top: 18px; 
 transform: translateX(-50%); 
 width: min(520px, calc(100% - 24px)); 
 padding: 12px 14px; 
 border-radius: 12px; 
 background: rgba(254, 226, 226, 0.95); 
 color: #991b1b; 
 font-weight: 700; 
 text-align: center; 
 line-height: 1.6; 
} 
 
.yl-join-error[hidden] { 
 display: none !important; 
} 
 
.yl-meeting-clock { 
 display: flex; 
 flex-direction: column; 
 align-items: flex-start; 
 gap: 2px; 
 padding: 6px 12px; 
 border-radius: 12px; 
 background: rgba(255, 255, 255, 0.1); 
 min-width: 150px; 
} 
 
.yl-clock-started { 
 font-size: 0.75rem; 
 font-weight: 700; 
 opacity: 0.9; 
} 
 
.yl-clock-elapsed { 
 font-size: 1.05rem; 
 font-weight: 800; 
 font-variant-numeric: tabular-nums; 
 letter-spacing: 0.04em; 
 color: #7dd3fc; 
} 
 
.yl-clock-elapsed b { 
 font-weight: 800; 
} 
 
.yl-vote-float-layer { 
 position: absolute; 
 inset: 0; 
 z-index: 20; 
 pointer-events: none; 
} 
 
.yl-vote-create-modal { 
 position: absolute; 
 inset: 0; 
 z-index: 22; 
 pointer-events: none; 
} 
 
.yl-vote-create-modal[hidden] { 
 display: none !important; 
} 
 
.yl-vote-float { 
 position: fixed; 
 width: min(360px, calc(100vw - 24px)); 
 max-height: min(70vh, 520px); 
 overflow: auto; 
 border-radius: 16px; 
 background: #fff; 
 color: #0c4a6e; 
 box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35); 
 text-align: right; 
 pointer-events: auto; 
 z-index: 40; 
 border: 1px solid #bae6fd; 
} 
 
.yl-vote-float.is-closed { 
 border-color: #cbd5e1; 
} 
 
.yl-vote-float__head { 
 display: flex; 
 align-items: center; 
 justify-content: space-between; 
 gap: 8px; 
 padding: 10px 12px; 
 background: linear-gradient(135deg, #e0f2fe, #f0f9ff); 
 border-bottom: 1px solid #bae6fd; 
 cursor: grab; 
 user-select: none; 
 position: sticky; 
 top: 0; 
 z-index: 2; 
} 
 
.yl-vote-float__head:active { 
 cursor: grabbing; 
} 
 
.yl-vote-float__head strong { 
 font-size: 0.95rem; 
 font-weight: 800; 
} 
 
.yl-vote-float__head .yl-icon-btn { 
 background: rgba(14, 165, 233, 0.12); 
 color: #0369a1; 
} 
 
.yl-vote-float__body { 
 padding: 12px 14px 14px; 
} 
 
.yl-vote-float__body label { 
 display: block; 
 margin: 8px 0 4px; 
 font-size: 0.85rem; 
 font-weight: 700; 
} 
 
.yl-vote-float__body input { 
 width: 100%; 
 border: 1px solid #bae6fd; 
 border-radius: 10px; 
 padding: 10px 12px; 
 font: inherit; 
 font-weight: 600; 
} 
 
.yl-vote-actions { 
 display: flex; 
 flex-wrap: wrap; 
 gap: 8px; 
 margin-top: 8px; 
} 
 
.yl-btn--block { 
 width: 100%; 
 margin-bottom: 12px; 
} 
 
.yl-votes-list { 
 display: grid; 
 gap: 8px; 
} 
 
.yl-votes-empty { 
 margin: 18px 8px; 
 text-align: center; 
 color: rgba(255, 255, 255, 0.7); 
 font-weight: 700; 
 font-size: 0.9rem; 
} 
 
.yl-votes-empty[hidden] { 
 display: none !important; 
} 
 
.yl-vote-side-item { 
 appearance: none; 
 width: 100%; 
 text-align: right; 
 border: 1px solid rgba(255, 255, 255, 0.12); 
 background: rgba(255, 255, 255, 0.06); 
 color: #fff; 
 border-radius: 12px; 
 padding: 10px 12px; 
 cursor: pointer; 
 font: inherit; 
 transition: background 0.18s ease, border-color 0.18s ease; 
} 
 
.yl-vote-side-item:hover, 
.yl-vote-side-item.is-open-win { 
 background: rgba(14, 165, 233, 0.22); 
 border-color: rgba(125, 211, 252, 0.45); 
} 
 
.yl-vote-side-item__top { 
 display: flex; 
 align-items: center; 
 justify-content: space-between; 
 gap: 8px; 
 margin-bottom: 4px; 
} 
 
.yl-vote-side-item__q { 
 display: block; 
 font-weight: 800; 
 font-size: 0.92rem; 
 line-height: 1.4; 
} 
 
.yl-vote-side-item__meta { 
 display: block; 
 margin-top: 4px; 
 font-size: 0.78rem; 
 opacity: 0.8; 
 font-weight: 600; 
} 
 
.yl-vote-side-badge { 
 font-size: 0.72rem; 
 font-weight: 800; 
 border-radius: 999px; 
 padding: 2px 8px; 
} 
 
.yl-vote-side-badge--open { 
 background: rgba(34, 197, 94, 0.2); 
 color: #86efac; 
} 
 
.yl-vote-side-badge--closed { 
 background: rgba(148, 163, 184, 0.25); 
 color: #cbd5e1; 
} 
 
.yl-vote-q { 
 margin: 0 0 12px; 
 font-size: 1.05rem; 
 font-weight: 800; 
 line-height: 1.5; 
} 
 
.yl-vote-options { 
 display: grid; 
 gap: 8px; 
} 
 
.yl-vote-opt { 
 position: relative; 
 appearance: none; 
 border: 1px solid #bae6fd; 
 background: #f0f9ff; 
 border-radius: 12px; 
 padding: 12px; 
 text-align: right; 
 cursor: pointer; 
 overflow: hidden; 
 font: inherit; 
 font-weight: 700; 
 color: #0c4a6e; 
} 
 
.yl-vote-opt:disabled { 
 cursor: default; 
 opacity: 0.95; 
} 
 
.yl-vote-opt.is-selected { 
 border-color: #0284c7; 
 box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.25); 
} 
 
.yl-vote-opt__bar { 
 position: absolute; 
 inset-inline-start: 0; 
 top: 0; 
 bottom: 0; 
 background: rgba(14, 165, 233, 0.18); 
 z-index: 0; 
} 
 
.yl-vote-opt__label, 
.yl-vote-opt__meta { 
 position: relative; 
 z-index: 1; 
} 
 
.yl-vote-opt__meta { 
 display: block; 
 margin-top: 4px; 
 font-size: 0.8rem; 
 opacity: 0.8; 
} 
 
.yl-vote-hint { 
 margin: 10px 0; 
 font-size: 0.85rem; 
 font-weight: 700; 
 color: #0369a1; 
} 
 
.yl-hand-counter { 
 display: inline-flex; 
 align-items: center; 
 gap: 4px; 
 padding: 6px 10px; 
 border-radius: 999px; 
 background: rgba(245, 158, 11, 0.2); 
 color: #fde68a; 
 font-size: 0.82rem; 
 font-weight: 800; 
 pointer-events: none; 
} 
 
.yl-hand-overlay { 
 display: none !important; 
} 
 
.yl-hand-overlay[hidden] { 
 display: none !important; 
} 
 
.yl-hand-wave { 
 width: 110px; 
 height: 110px; 
 border-radius: 50%; 
 display: grid; 
 place-items: center; 
 font-size: 3.2rem; 
 color: #fff; 
 background: linear-gradient(145deg, #f59e0b, #f97316); 
 box-shadow: 0 18px 40px rgba(249, 115, 22, 0.45); 
 animation: yl-wave-hand 0.7s ease-in-out infinite; 
} 
 
.yl-hand-overlay strong { 
 font-size: 1.25rem; 
 font-weight: 800; 
} 
 
.yl-hand-overlay span { 
 font-weight: 700; 
 opacity: 0.9; 
} 
 
@keyframes yl-wave-hand { 
 0%, 100% { transform: rotate(-18deg) scale(1); } 
 50% { transform: rotate(18deg) scale(1.08); } 
} 
 
.yl-mod-bar { 
 display: flex; 
 flex-wrap: wrap; 
 gap: 6px; 
 margin-bottom: 10px; 
} 
 
.yl-mod-chip { 
 appearance: none; 
 border: 0; 
 cursor: pointer; 
 border-radius: 999px; 
 padding: 6px 10px; 
 background: rgba(255, 255, 255, 0.12); 
 color: #fff; 
 font: inherit; 
 font-size: 0.75rem; 
 font-weight: 700; 
} 
 
.yl-mod-chip:hover { 
 background: rgba(14, 165, 233, 0.35); 
} 
 
.yl-people li { 
 display: flex; 
 flex-direction: column; 
 gap: 8px; 
 padding: 10px 12px; 
 border-radius: 12px; 
 background: rgba(255, 255, 255, 0.06); 
 font-weight: 700; 
 font-size: 0.92rem; 
} 
 
.yl-person-main { 
 display: flex; 
 align-items: center; 
 gap: 8px; 
} 
 
.yl-person-mods { 
 display: flex; 
 flex-wrap: wrap; 
 gap: 4px; 
} 
 
.yl-person-mods button { 
 appearance: none; 
 border: 0; 
 cursor: pointer; 
 width: 32px; 
 height: 32px; 
 border-radius: 8px; 
 background: rgba(255, 255, 255, 0.12); 
 color: #fff; 
} 
 
.yl-person-mods button:hover { 
 background: rgba(14, 165, 233, 0.4); 
} 
 
.yl-bans { 
 margin-top: 14px; 
 padding-top: 12px; 
 border-top: 1px solid rgba(255, 255, 255, 0.1); 
} 
 
.yl-bans h4 { 
 margin: 0 0 8px; 
 font-size: 0.9rem; 
} 
 
.yl-bans ul { 
 list-style: none; 
 margin: 0; 
 padding: 0; 
 display: grid; 
 gap: 6px; 
} 
 
.yl-bans li { 
 display: flex; 
 align-items: center; 
 justify-content: space-between; 
 gap: 8px; 
 padding: 8px 10px; 
 border-radius: 10px; 
 background: rgba(239, 68, 68, 0.15); 
 font-size: 0.85rem; 
 font-weight: 700; 
} 
 
.yl-ban-empty { 
 opacity: 0.7; 
 background: transparent !important; 
} 
 
.yl-audio-unlock { 
 position: absolute; 
 z-index: 9; 
 left: 50%; 
 bottom: 18px; 
 transform: translateX(-50%); 
 appearance: none; 
 border: 0; 
 cursor: pointer; 
 display: inline-flex; 
 align-items: center; 
 gap: 8px; 
 padding: 12px 18px; 
 border-radius: 999px; 
 background: linear-gradient(120deg, #0369a1, #0ea5e9); 
 color: #fff; 
 font: inherit; 
 font-weight: 800; 
 box-shadow: 0 12px 28px rgba(3, 105, 161, 0.35); 
} 
 
.yl-audio-unlock[hidden] { 
 display: none !important; 
} 
 
.yl-meeting__frame { 
 position: relative; 
 min-height: 0; 
 padding: 10px; 
 height: calc(100vh - 78px); 
} 
 
.yl-toast { 
 position: fixed; 
 inset-inline-start: 50%; 
 bottom: 24px; 
 transform: translateX(-50%) translateY(16px); 
 z-index: 40; 
 padding: 10px 16px; 
 border-radius: 12px; 
 background: var(--yl-sky-700); 
 color: #fff; 
 font-weight: 700; 
 font-size: 0.9rem; 
 opacity: 0; 
 pointer-events: none; 
 transition: 0.25s ease; 
} 
 
.yl-toast.is-show { 
 opacity: 1; 
 transform: translateX(-50%) translateY(0); 
} 
 
@media (max-width: 740px) { 
 .yl-forms { grid-template-columns: 1fr; } 
 .yl-meeting__frame { height: calc(100vh - 110px); } 
} 
 
/* ===== تقرير الاجتماع — فخم ومثبت الحاشية أسفل الصفحة ===== */ 
.yl-meeting-report { 
 --yr-ink: #0f1c24; 
 --yr-mute: #5d7280; 
 --yr-gold: #c4a15a; 
 --yr-gold-deep: #9a7638; 
 --yr-teal: #1f4f5c; 
 --yr-teal-soft: #2a6a7a; 
 --yr-paper: #ffffff; 
 --yr-fog: #eef5f7; 
 display: none; 
 overflow: visible; 
} 
 
.yl-meeting-report[hidden] { 
 display: none !important; 
} 
 
@media print { 
 body.yl-printing-report { 
 background: #fff !important; 
 } 
 body.yl-printing-report > *:not(#ylMeetingReport) { 
 display: none !important; 
 } 
 body.yl-printing-report .yl-meeting-report { 
 display: block !important; 
 position: relative !important; 
 inset: auto !important; 
 width: 100% !important; 
 min-height: 100vh; 
 margin: 0 !important; 
 padding: 0 !important; 
 background: var(--yr-paper) !important; 
 color: var(--yr-ink); 
 z-index: 99999; 
 border: none !important; 
 box-shadow: none !important; 
 visibility: visible !important; 
 overflow: visible !important; 
 } 
 body.yl-printing-report .yl-meeting-report, 
 body.yl-printing-report .yl-meeting-report * { 
 visibility: visible !important; 
 } 
 @page { 
 size: A4; 
 margin: 0; 
 } 
 .yl-meeting-report { 
 --yl-print-header-h: 38mm; 
 --yl-print-footer-h: 20mm; 
 } 
 .yl-report-sheet { 
 padding: var(--yl-print-header-h) 6mm var(--yl-print-footer-h) !important; 
 min-height: auto; 
 overflow: visible; 
 } 
 .yl-report-header { 
 position: fixed !important; 
 top: 0 !important; 
 left: 0 !important; 
 right: 0 !important; 
 margin: 0 !important; 
 width: 100% !important; 
 max-width: none; 
 background: #fff !important; 
 z-index: 1000 !important; 
 page-break-inside: avoid; 
 break-inside: avoid; 
 } 
 .yl-report-header__ornament { 
 width: 100%; 
 line-height: 0; 
 background: #fff !important; 
 } 
 .yl-report-header__ornament-img { 
 display: block !important; 
 width: 100% !important; 
 height: auto !important; 
 min-width: 100% !important; 
 max-width: none !important; 
 background: transparent !important; 
 object-fit: fill; 
 -webkit-print-color-adjust: exact; 
 print-color-adjust: exact; 
 } 
 .yl-report-header__main { 
 position: relative; 
 display: grid; 
 grid-template-columns: 1fr 1fr; 
 align-items: center; 
 padding: 8px 8mm 10px; 
 background: #fff !important; 
 } 
 .yl-report-header__title { 
 position: absolute; 
 left: 50%; 
 top: 50%; 
 transform: translate(-50%, -50%); 
 margin: 0; 
 z-index: 1; 
 font-size: 1.15rem; 
 font-weight: 800; 
 color: #1a2744; 
 direction: rtl; 
 white-space: nowrap; 
 } 
 .yl-report-header__board { 
 justify-self: start; 
 margin: 0 0 0 2mm; 
 font-size: 0.95rem; 
 font-weight: 800; 
 color: #1a2744; 
 direction: rtl; 
 white-space: nowrap; 
 } 
 .yl-report-header__logo { 
 justify-self: end; 
 grid-column: 2; 
 } 
 .yl-report-logo--wide { 
 max-width: 195px; 
 max-height: 50px; 
 height: auto; 
 } 
 .yl-report-logo--wide { 
 max-width: 195px; 
 max-height: 50px; 
 height: auto; 
 } 
 .yl-report-meta { 
 grid-template-columns: repeat(4, minmax(0, 1fr)); 
 gap: 8px; 
 margin: 8px 0 14px; 
 } 
 .yl-report-watermark-wrap { 
 position: fixed; 
 inset: 0; 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 overflow: visible; 
 pointer-events: none; 
 z-index: 0; 
 } 
 .yl-report-watermark { 
 opacity: 0.02; 
 max-width: min(380px, 48vw); 
 max-height: min(380px, 48vh); 
 } 
 .yl-report-footer { 
 position: fixed !important; 
 left: 0 !important; 
 right: 0 !important; 
 bottom: 0 !important; 
 width: 100% !important; 
 margin: 0 !important; 
 padding: 0 !important; 
 z-index: 1000 !important; 
 page-break-inside: avoid; 
 -webkit-print-color-adjust: exact; 
 print-color-adjust: exact; 
 } 
 .yl-report-footer__banner { 
 display: block !important; 
 width: 100% !important; 
 height: auto !important; 
 max-width: none !important; 
 min-width: 100% !important; 
 object-fit: fill; 
 -webkit-print-color-adjust: exact; 
 print-color-adjust: exact; 
 } 
 .yl-report-footer__meta { 
 display: none !important; 
 } 
 .yl-report-footer__pages b::after { 
 content: counter(page) " / " counter(pages); 
 } 
 .yl-report-glass { 
 -webkit-print-color-adjust: exact; 
 print-color-adjust: exact; 
 } 
 .yl-report-first-page { 
 page-break-inside: avoid; 
 break-inside: avoid; 
 } 
 .yl-report--board .yl-report-first-page, 
 .yl-report--board .yl-report-section, 
 .yl-report--board .yl-report-doc-table { 
 page-break-inside: avoid; 
 break-inside: avoid; 
 } 
 .yl-report--board .yl-report-section + .yl-report-section { 
 margin-top: 10px; 
 } 
 .yl-report--board .yl-report-meta { 
 margin-bottom: 10px; 
 } 
 .yl-report--board .yl-report-doc-table th, 
 .yl-report--board .yl-report-doc-table td { 
 padding-top: 5px; 
 padding-bottom: 5px; 
 } 
 .yl-report--assembly .yl-report-first-page { 
 page-break-after: avoid; 
 break-after: avoid; 
 } 
 .yl-report--assembly .yl-report-section--attendees { 
 page-break-before: always; 
 break-before: page; 
 margin-top: 0; 
 } 
} 
 
.yl-report-sheet { 
 position: relative; 
 z-index: 1; 
 width: 100%; 
 margin: 0; 
 padding: 0 6mm 32mm; 
 box-sizing: border-box; 
 overflow: visible; 
 background: var(--yr-paper); 
 color: var(--yr-ink); 
 font-family: 'Tajawal', 'Cairo', Tahoma, Arial, sans-serif; 
 border: none; 
 -webkit-print-color-adjust: exact; 
 print-color-adjust: exact; 
} 
 
.yl-report-first-page { 
 position: relative; 
 z-index: 1; 
} 
 
.yl-report-watermark-wrap { 
 position: fixed; 
 inset: 0; 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 overflow: visible; 
 pointer-events: none; 
 z-index: 0; 
} 
 
.yl-report-watermark { 
 display: block; 
 width: auto; 
 height: auto; 
 max-width: min(380px, 48vw); 
 max-height: min(380px, 48vh); 
 object-fit: contain; 
 opacity: 0.02; 
 pointer-events: none; 
 -webkit-print-color-adjust: exact; 
 print-color-adjust: exact; 
} 
 
.yl-report-header { 
 margin: 0; 
 width: 100%; 
 max-width: none; 
 padding: 0; 
 border: none; 
 background: #fff !important; 
} 
 
.yl-report-header__ornament { 
 width: 100%; 
 overflow: visible; 
 line-height: 0; 
 background: #fff !important; 
} 
 
.yl-report-header__ornament-img { 
 display: block; 
 width: 100%; 
 height: auto; 
 min-width: 100%; 
 max-width: none; 
 object-fit: fill; 
 background: transparent !important; 
 -webkit-print-color-adjust: exact; 
 print-color-adjust: exact; 
} 
 
.yl-report-header__main { 
 position: relative; 
 display: grid; 
 grid-template-columns: 1fr 1fr; 
 align-items: center; 
 gap: 12px; 
 padding: 8px 8mm 10px; 
 direction: ltr; 
 background: #fff !important; 
} 
 
.yl-report-header__board { 
 margin: 0; 
 margin-inline-start: 2mm; 
 justify-self: start; 
 text-align: left; 
 direction: rtl; 
 font-size: 0.95rem; 
 font-weight: 800; 
 color: #1a2744; 
 letter-spacing: 0.02em; 
 white-space: nowrap; 
 z-index: 2; 
} 
 
.yl-report-header__title { 
 position: absolute; 
 left: 50%; 
 top: 50%; 
 transform: translate(-50%, -50%); 
 margin: 0; 
 text-align: center; 
 direction: rtl; 
 font-size: 1.15rem; 
 font-weight: 800; 
 color: #1a2744; 
 letter-spacing: 0.06em; 
 white-space: nowrap; 
 z-index: 1; 
 pointer-events: none; 
} 
 
.yl-report-header__logo { 
 justify-self: end; 
 grid-column: 2; 
 display: flex; 
 align-items: center; 
 justify-content: flex-end; 
 z-index: 2; 
} 
 
/* unused legacy */ 
.yl-report-header__banner-wrap, 
.yl-report-header__banner { 
 display: none !important; 
} 
 
.yl-report-admin-banner { 
 display: block; 
 width: 100%; 
 height: auto; 
 max-width: none; 
 object-fit: cover; 
 object-position: top center; 
 margin: 0; 
 -webkit-print-color-adjust: exact; 
 print-color-adjust: exact; 
} 
 
.yl-report-logo-wrap { 
 width: 46px; 
 height: 46px; 
 border-radius: 50%; 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 background: transparent; 
 border: none; 
 box-shadow: none; 
} 
 
.yl-report-logo-wrap--wide { 
 width: auto; 
 height: auto; 
 min-width: 0; 
 padding: 0; 
 border-radius: 0; 
 background: transparent; 
 border: none; 
 box-shadow: none; 
 justify-self: end; 
} 
 
.yl-report-logo { 
 width: 34px; 
 height: 34px; 
 object-fit: contain; 
 display: block; 
} 
 
.yl-report-logo--wide { 
 width: auto; 
 max-width: 195px; 
 height: auto; 
 max-height: 50px; 
 object-fit: contain; 
} 
 
.yl-report-org { 
 margin: 0; 
 text-align: center; 
 font-size: 1rem; 
 font-weight: 800; 
 line-height: 1.35; 
 color: var(--yr-ink); 
 white-space: nowrap; 
 overflow: hidden; 
 text-overflow: ellipsis; 
} 
 
.yl-report-doc-wrap { 
 justify-self: start; 
 padding: 5px 12px; 
 border-radius: 999px; 
 background: linear-gradient(135deg, var(--yr-teal), var(--yr-teal-soft)); 
 box-shadow: 0 4px 12px rgba(31, 79, 92, 0.22); 
 -webkit-print-color-adjust: exact; 
 print-color-adjust: exact; 
} 
 
.yl-report-doc { 
 margin: 0; 
 font-size: 0.78rem; 
 font-weight: 800; 
 color: #fff; 
 letter-spacing: 0.06em; 
 white-space: nowrap; 
} 
 
.yl-report-doc--title { 
 justify-self: center; 
 text-align: center; 
 font-size: 1.15rem; 
 font-weight: 800; 
 color: #ffffff; 
 letter-spacing: 0.12em; 
 background: 
 linear-gradient(135deg, rgba(31, 79, 92, 0.96), rgba(42, 106, 122, 0.78)); 
 border: 1px solid rgba(196, 161, 90, 0.35); 
 box-shadow: 
 inset 0 1px 0 rgba(255, 255, 255, 0.25), 
 0 16px 36px rgba(15, 28, 36, 0.08); 
 padding: 10px 18px; 
 border-radius: 999px; 
} 
 
.yl-report-divider { 
 display: block; 
 width: 100%; 
 height: 1px; 
 margin-top: 2px; 
 background: #111827; 
} 
 
.yl-report-meta { 
 display: grid; 
 grid-template-columns: repeat(4, minmax(0, 1fr)); 
 gap: 8px; 
 margin: 12px 0 18px; 
 align-items: stretch; 
} 
 
.yl-report-glass { 
 position: relative; 
 display: flex; 
 flex-direction: column; 
 align-items: center; 
 justify-content: center; 
 text-align: center; 
 min-width: 0; 
 width: 100%; 
 min-height: 88px; 
 height: 100%; 
 padding: 12px 10px; 
 border-radius: 16px; 
 background: 
 linear-gradient(145deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.38) 48%, rgba(236, 244, 247, 0.52) 100%); 
 border: 1px solid rgba(255, 255, 255, 0.92); 
 box-shadow: 
 0 10px 28px rgba(15, 28, 36, 0.07), 
 0 2px 8px rgba(31, 79, 92, 0.04), 
 inset 0 1px 1px rgba(255, 255, 255, 0.95), 
 inset 0 -1px 0 rgba(31, 79, 92, 0.05); 
 backdrop-filter: blur(18px) saturate(1.25); 
 -webkit-backdrop-filter: blur(18px) saturate(1.25); 
 overflow: visible; 
 isolation: isolate; 
 -webkit-print-color-adjust: exact; 
 print-color-adjust: exact; 
} 
 
.yl-report-glass::before { 
 content: ""; 
 position: absolute; 
 inset: 0; 
 border-radius: inherit; 
 background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, transparent 42%); 
 pointer-events: none; 
 z-index: 0; 
} 
 
.yl-report-glass::after { 
 content: ""; 
 position: absolute; 
 inset: 1px; 
 border-radius: 15px; 
 border: 1px solid rgba(196, 161, 90, 0.22); 
 box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); 
 pointer-events: none; 
 z-index: 0; 
} 
 
.yl-report-glass--date { 
 grid-column: auto; 
 grid-row: auto; 
} 
 
.yl-report-glass__label { 
 display: block; 
 position: relative; 
 z-index: 1; 
 width: 100%; 
 margin-bottom: 7px; 
 font-size: 0.62rem; 
 font-weight: 700; 
 color: var(--yr-gold-deep); 
 letter-spacing: 0.06em; 
 text-align: center; 
 white-space: nowrap; 
} 
 
.yl-report-glass__value { 
 display: block; 
 position: relative; 
 z-index: 1; 
 width: 100%; 
 font-size: 0.78rem; 
 font-weight: 800; 
 color: var(--yr-ink); 
 line-height: 1.4; 
 text-align: center; 
 word-break: break-word; 
} 
 
.yl-report-glass--date .yl-report-glass__value { 
 display: flex; 
 flex-direction: column; 
 align-items: center; 
 justify-content: center; 
 gap: 3px; 
 font-size: 0.74rem; 
 font-weight: 400; 
} 
 
.yl-report-glass--date .yl-report-glass__value > span { 
 font-weight: 400; 
} 
 
.yl-report-glass--date .yl-report-glass__sub { 
 font-size: 0.74rem; 
 font-weight: 400; 
 color: var(--yr-ink); 
 text-align: center; 
} 
 
.yl-report-glass__code { 
 letter-spacing: 0.12em; 
 color: var(--yr-teal); 
 font-size: 0.82rem; 
 text-align: center; 
} 
 
.yl-report-section { 
 margin-top: 2px; 
} 
 
.yl-report-section + .yl-report-section { 
 margin-top: 18px; 
} 
 
.yl-report-section__head { 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 gap: 12px; 
 margin-bottom: 10px; 
} 
 
.yl-report-section__head h2 { 
 margin: 0; 
 font-size: 0.84rem; 
 font-weight: 800; 
 color: var(--yr-teal); 
 letter-spacing: 0.18em; 
} 
 
.yl-report-section__mark { 
 width: 42px; 
 height: 1px; 
 background: linear-gradient(90deg, transparent, var(--yr-gold)); 
} 
 
.yl-report-section__mark:last-child { 
 background: linear-gradient(90deg, var(--yr-gold), transparent); 
} 
 
.yl-report-people { 
 list-style: none; 
 margin: 0; 
 padding: 6px 0 0; 
 display: block; 
 border-top: 1.5px solid rgba(196, 161, 90, 0.35); 
} 
 
.yl-report-person { 
 display: grid; 
 grid-template-columns: 30px 16px minmax(0, 1fr) auto; 
 align-items: center; 
 gap: 0; 
 padding: 8px 6px; 
 border: none; 
 border-bottom: 1px solid rgba(15, 28, 36, 0.06); 
 background: transparent !important; 
} 
 
.yl-report-person.is-host { 
 border-bottom-color: rgba(196, 161, 90, 0.28); 
} 
 
.yl-report-person__num { 
 font-size: 0.7rem; 
 font-weight: 800; 
 color: var(--yr-gold-deep); 
 letter-spacing: 0.05em; 
 background: transparent; 
 border: none; 
} 
 
.yl-report-person__line { 
 display: block; 
 width: 10px; 
 height: 1px; 
 margin-inline: 3px; 
 background: linear-gradient(90deg, var(--yr-gold), transparent); 
} 
 
.yl-report-person__name { 
 font-size: 0.9rem; 
 font-weight: 700; 
 color: var(--yr-ink); 
 letter-spacing: 0.015em; 
 line-height: 1.4; 
} 
 
.yl-report-person.is-host .yl-report-person__name { 
 font-weight: 800; 
 color: var(--yr-teal); 
} 
 
.yl-report-person__role { 
 font-size: 0.64rem; 
 font-weight: 700; 
 color: var(--yr-mute); 
 letter-spacing: 0.08em; 
 white-space: nowrap; 
 padding: 0; 
 border-radius: 0; 
 background: transparent; 
 border: none; 
} 
 
.yl-report-person.is-host .yl-report-person__role { 
 color: var(--yr-gold-deep); 
 background: transparent; 
 border: none; 
} 
 
.yl-report-people__empty { 
 padding: 20px 4px; 
 text-align: center; 
 color: var(--yr-mute); 
 font-size: 0.82rem; 
 font-weight: 600; 
} 
 
.yl-report-doc-table { 
 width: 100%; 
 border-collapse: collapse; 
 margin-top: 4px; 
 border-top: 1.5px solid rgba(196, 161, 90, 0.35); 
 font-size: 0.84rem; 
} 
 
.yl-report-doc-table thead th { 
 padding: 9px 10px; 
 text-align: right; 
 font-size: 0.72rem; 
 font-weight: 800; 
 letter-spacing: 0.06em; 
 color: var(--yr-teal); 
 background: rgba(241, 248, 252, 0.65); 
 border-bottom: 1px solid rgba(196, 161, 90, 0.28); 
} 
 
.yl-report-doc-table tbody td { 
 padding: 9px 10px; 
 vertical-align: top; 
 line-height: 1.55; 
 color: var(--yr-ink); 
 border-bottom: 1px solid rgba(15, 28, 36, 0.06); 
} 
 
.yl-report-doc-table tbody tr:last-child td { 
 border-bottom: none; 
} 
 
.yl-report-doc-table--rec tbody td { 
 vertical-align: middle; 
} 
 
.yl-report-doc-table__num { 
 width: 36px; 
 text-align: center !important; 
 font-weight: 800; 
 color: var(--yr-gold-deep); 
 font-size: 0.76rem; 
} 
 
.yl-report-doc-table__subject { 
 min-width: 110px; 
 font-weight: 700; 
 color: var(--yr-teal); 
} 
 
.yl-report-doc-table__rec { 
 white-space: pre-wrap; 
} 
 
.yl-report-doc-table__resp { 
 min-width: 90px; 
 font-weight: 600; 
 color: var(--yr-mute); 
} 
 
.yl-report-doc-table--rec .yl-report-doc-table__rec { 
 width: 48%; 
} 
 
.yl-report-footer { 
 position: fixed; 
 left: 0; 
 right: 0; 
 bottom: 0; 
 width: 100%; 
 margin: 0; 
 padding: 0; 
 z-index: 1000; 
 background: transparent; 
 border: none; 
 pointer-events: none; 
 line-height: 0; 
} 
 
.yl-report-footer__meta { 
 position: absolute; 
 width: 1px; 
 height: 1px; 
 padding: 0; 
 margin: -1px; 
 overflow: hidden; 
 clip: rect(0, 0, 0, 0); 
 white-space: nowrap; 
 border: 0; 
} 
 
.yl-report-footer__banner { 
 display: block; 
 width: 100%; 
 height: auto; 
 min-width: 100%; 
 max-width: none; 
 object-fit: fill; 
 pointer-events: auto; 
 -webkit-print-color-adjust: exact; 
 print-color-adjust: exact; 
} 
 
.yl-report-footer__pages b { 
 font-weight: 800; 
} 
 
.yl-report-footer__row { 
 display: flex; 
 justify-content: space-between; 
 align-items: center; 
 gap: 12px; 
} 
 
.yl-report-footer__row--1 { 
 font-size: 0.72rem; 
 font-weight: 800; 
 color: var(--yr-teal); 
 margin-bottom: 4px; 
} 
 
.yl-report-footer__row--2 { 
 font-size: 0.64rem; 
 font-weight: 600; 
 color: var(--yr-mute); 
 padding-top: 4px; 
 border-top: 1px solid rgba(196, 161, 90, 0.2); 
} 
 
.yl-report-footer__pages { 
 white-space: nowrap; 
 font-weight: 700; 
 color: var(--yr-ink); 
} 
 
.yl-report-footer__pages b { 
 font-weight: 800; 
 color: var(--yr-gold-deep); 
} 
 
/* ===== بنود الاجتماع ===== */ 
.yl-agenda-modal { 
 position: fixed; 
 inset: 0; 
 z-index: 12000; 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 padding: 20px; 
 background: rgba(15, 28, 36, 0.45); 
 backdrop-filter: blur(4px); 
} 
 
.yl-agenda-modal[hidden] { 
 display: none !important; 
} 
 
.yl-agenda-modal__card { 
 width: min(560px, 100%); 
 max-height: min(82vh, 720px); 
 overflow: auto; 
 border-radius: 18px; 
 background: linear-gradient(180deg, #fff, #f4f8fa); 
 border: 1px solid rgba(14, 165, 233, 0.2); 
 box-shadow: 0 24px 60px rgba(15, 28, 36, 0.18); 
} 
 
.yl-agenda-modal__head { 
 padding: 18px 20px 10px; 
 border-bottom: 1px solid rgba(15, 28, 36, 0.08); 
} 
 
.yl-agenda-modal__head h2 { 
 margin: 0 0 6px; 
 font-size: 1.15rem; 
 font-weight: 800; 
 color: #0f172a; 
} 
 
.yl-agenda-modal__head p { 
 margin: 0; 
 font-size: 0.86rem; 
 color: #64748b; 
} 
 
.yl-agenda-modal__body { 
 padding: 14px 20px; 
} 
 
.yl-agenda-add-row { 
 display: grid; 
 grid-template-columns: 1fr auto; 
 gap: 8px; 
 margin-bottom: 12px; 
} 
 
.yl-agenda-add-row input { 
 width: 100%; 
 border: 1px solid #cbd5e1; 
 border-radius: 10px; 
 padding: 10px 12px; 
 font: inherit; 
} 
 
.yl-agenda-draft { 
 list-style: none; 
 margin: 0; 
 padding: 0; 
 display: grid; 
 gap: 8px; 
} 
 
.yl-agenda-draft li { 
 display: flex; 
 align-items: center; 
 justify-content: space-between; 
 gap: 10px; 
 padding: 10px 12px; 
 border-radius: 12px; 
 background: rgba(14, 165, 233, 0.06); 
 border: 1px solid rgba(14, 165, 233, 0.14); 
 font-weight: 700; 
} 
 
.yl-agenda-draft li button { 
 border: none; 
 background: transparent; 
 color: #ef4444; 
 cursor: pointer; 
 padding: 4px; 
} 
 
.yl-agenda-draft-empty { 
 margin: 0; 
 text-align: center; 
 color: #94a3b8; 
 font-size: 0.86rem; 
} 
 
.yl-agenda-modal__foot { 
 display: flex; 
 justify-content: space-between; 
 gap: 10px; 
 padding: 12px 20px 18px; 
 border-top: 1px solid rgba(15, 28, 36, 0.08); 
} 
 
/* ===== الأجندة وتوصيات الاجتماع (مودال العمل) ===== */ 
body.yl-agenda-work-open { 
 overflow: hidden; 
} 
 
.yl-agenda-work { 
 position: fixed; 
 inset: 0; 
 z-index: 12500; 
 display: flex; 
 align-items: center; 
 justify-content: center; 
 padding: 16px; 
 background: rgba(15, 28, 36, 0.42); 
 backdrop-filter: blur(6px); 
} 
 
.yl-agenda-work[hidden] { 
 display: none !important; 
} 
 
.yl-agenda-work__card { 
 width: min(980px, 100%); 
 max-height: min(90vh, 860px); 
 display: flex; 
 flex-direction: column; 
 border-radius: 20px; 
 background: linear-gradient(180deg, #fdfefe 0%, #f3f7fa 100%); 
 border: 1px solid rgba(14, 165, 233, 0.18); 
 box-shadow: 0 28px 70px rgba(15, 28, 36, 0.16); 
 overflow: hidden; 
 pointer-events: auto; 
} 
 
.yl-agenda-work__head { 
 display: flex; 
 align-items: flex-start; 
 justify-content: space-between; 
 gap: 12px; 
 padding: 18px 22px 12px; 
 border-bottom: 1px solid rgba(15, 28, 36, 0.07); 
 background: rgba(255, 255, 255, 0.7); 
} 
 
.yl-agenda-work__head h2 { 
 margin: 0 0 4px; 
 font-size: 1.2rem; 
 font-weight: 800; 
 color: #0f172a; 
} 
 
.yl-agenda-work__head p { 
 margin: 0; 
 font-size: 0.84rem; 
 color: #64748b; 
} 
 
.yl-agenda-work__toolbar { 
 display: flex; 
 flex-wrap: wrap; 
 align-items: flex-end; 
 gap: 12px 20px; 
 padding: 12px 22px; 
 border-bottom: 1px solid rgba(15, 28, 36, 0.06); 
 background: rgba(248, 250, 252, 0.85); 
} 
 
.yl-agenda-work__secretary label { 
 display: block; 
 margin-bottom: 5px; 
 font-size: 0.76rem; 
 font-weight: 700; 
 color: #64748b; 
} 
 
.yl-agenda-work__secretary select { 
 min-width: 220px; 
 border: 1px solid #cbd5e1; 
 border-radius: 10px; 
 padding: 8px 10px; 
 font: inherit; 
 background: #fff; 
} 
 
.yl-agenda-work__type { 
 display: grid; 
 gap: 6px; 
 min-width: min(100%, 360px); 
} 
 
.yl-agenda-work__type-label { 
 font-size: 0.76rem; 
 font-weight: 700; 
 color: #64748b; 
} 
 
.yl-agenda-work__type-options { 
 display: flex; 
 flex-wrap: wrap; 
 gap: 8px; 
} 
 
.yl-agenda-type-opt { 
 display: inline-flex; 
 align-items: center; 
 gap: 8px; 
 margin: 0; 
 padding: 8px 12px; 
 border: 1px solid #cbd5e1; 
 border-radius: 999px; 
 background: #fff; 
 cursor: pointer; 
 font-size: 0.86rem; 
 font-weight: 700; 
 color: #334155; 
 user-select: none; 
} 
 
.yl-agenda-type-opt:has(input:checked) { 
 border-color: #0f766e; 
 background: #f0fdfa; 
 color: #0f766e; 
} 
 
.yl-agenda-type-opt input { 
 accent-color: #0f766e; 
} 
 
.yl-doc-table--board th:nth-child(1), 
.yl-doc-table--board td:nth-child(1) { 
 width: 42px; 
} 
 
.yl-doc-table--board th:nth-child(4), 
.yl-doc-table--board td:nth-child(4) { 
 width: 130px; 
} 
 
.yl-doc-table--board th:nth-child(5), 
.yl-doc-table--board td:nth-child(5) { 
 width: 140px; 
} 
 
.yl-doc-select { 
 width: 100%; 
 min-height: 38px; 
 border: 1px solid #cbd5e1; 
 border-radius: 8px; 
 padding: 6px 8px; 
 font: inherit; 
 background: #fff; 
} 
 
.yl-board-sign-line { 
 display: block; 
 min-height: 28px; 
 border-bottom: 1px solid #94a3b8; 
} 
 
.yl-report-doc-table--board td { 
 vertical-align: middle; 
} 
 
.yl-report-doc-table__sign { 
 min-width: 110px; 
 height: 36px; 
} 
 
.yl-agenda-work__hint { 
 margin: 0; 
 flex: 1; 
 font-size: 0.82rem; 
 color: #64748b; 
 line-height: 1.5; 
} 
 
.yl-agenda-work__body { 
 flex: 1; 
 overflow: auto; 
 padding: 14px 22px 18px; 
 display: grid; 
 gap: 20px; 
} 
 
.yl-doc-section h3 { 
 margin: 0 0 10px; 
 font-size: 0.92rem; 
 font-weight: 800; 
 color: #0e7490; 
 letter-spacing: 0.02em; 
} 
 
.yl-doc-table-wrap { 
 border: 1px solid rgba(15, 28, 36, 0.1); 
 border-radius: 12px; 
 overflow: auto; 
 background: #fff; 
} 
 
.yl-doc-table-wrap--rec { 
 max-height: 340px; 
} 
 
.yl-doc-table { 
 width: 100%; 
 border-collapse: collapse; 
 font-size: 0.86rem; 
} 
 
.yl-doc-table thead th { 
 position: sticky; 
 top: 0; 
 z-index: 1; 
 padding: 10px 12px; 
 text-align: right; 
 font-size: 0.78rem; 
 font-weight: 800; 
 color: #475569; 
 background: #f1f5f9; 
 border-bottom: 1px solid rgba(15, 28, 36, 0.08); 
} 
 
.yl-doc-table tbody td { 
 padding: 10px 12px; 
 vertical-align: top; 
 border-bottom: 1px solid rgba(15, 28, 36, 0.06); 
 color: #0f172a; 
 line-height: 1.45; 
} 
 
.yl-doc-table tbody tr:last-child td { 
 border-bottom: none; 
} 
 
.yl-doc-col-num { 
 width: 42px; 
 text-align: center !important; 
 font-weight: 800; 
 color: #0e7490; 
} 
 
.yl-doc-col-act { 
 width: 44px; 
 text-align: center !important; 
} 
 
.yl-doc-subject { 
 min-width: 140px; 
 font-weight: 700; 
 color: #334155; 
} 
 
.yl-doc-input, 
.yl-doc-textarea { 
 width: 100%; 
 border: 1px solid #dbe3ea; 
 border-radius: 8px; 
 padding: 8px 10px; 
 font: inherit; 
 background: #fafcfd; 
 pointer-events: auto; 
 user-select: text; 
 -webkit-user-select: text; 
 transition: border-color 0.15s, box-shadow 0.15s; 
} 
 
.yl-doc-input:focus, 
.yl-doc-textarea:focus { 
 outline: none; 
 border-color: #7dd3fc; 
 box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12); 
 background: #fff; 
} 
 
.yl-doc-textarea { 
 resize: vertical; 
 min-height: 72px; 
} 
 
.yl-doc-text { 
 display: inline-block; 
 color: #334155; 
} 
 
.yl-doc-text--block { 
 margin: 0; 
 white-space: pre-wrap; 
} 
 
.yl-doc-empty { 
 text-align: center !important; 
 color: #94a3b8 !important; 
 font-size: 0.84rem; 
 padding: 18px 12px !important; 
} 
 
.yl-doc-rm { 
 border: none; 
 background: transparent; 
 color: #94a3b8; 
 cursor: pointer; 
 padding: 4px; 
 border-radius: 6px; 
} 
 
.yl-doc-rm:hover { 
 color: #ef4444; 
 background: rgba(239, 68, 68, 0.08); 
} 
 
.yl-agenda-work__foot { 
 display: flex; 
 justify-content: flex-end; 
 gap: 10px; 
 padding: 12px 22px 18px; 
 border-top: 1px solid rgba(15, 28, 36, 0.07); 
 background: rgba(255, 255, 255, 0.75); 
} 
 
@media (max-width: 720px) { 
 .yl-agenda-work { 
 padding: 8px; 
 } 
 
 .yl-agenda-work__card { 
 max-height: 94vh; 
 border-radius: 14px; 
 } 
 
 .yl-agenda-work__head, 
 .yl-agenda-work__toolbar, 
 .yl-agenda-work__body, 
 .yl-agenda-work__foot { 
 padding-left: 14px; 
 padding-right: 14px; 
 } 
} 
 
.yl-dock__btn.is-on { 
 color: #0ea5e9; 
}