@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap";@import"https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&display=swap";:root{--brand-primary: #10b981;--brand-primary-dark: #059669;--brand-secondary: #1f2937;--text-primary: #111827;--text-secondary: #6b7280;--bg-primary: #ffffff;--bg-secondary: #f3f4f6;--error: #ef4444;--success: #10b981}*{box-sizing:border-box;margin:0;padding:0}html{font-family:IBM Plex Sans Arabic,-apple-system,BlinkMacSystemFont,sans-serif;font-size:16px;line-height:1.6}body{background:var(--bg-secondary);color:var(--text-primary);direction:rtl;text-align:right;min-height:100vh}.lobby,.waiting-room,.waiting-teacher,.error-screen,.ended-screen,.loading-screen{direction:rtl;text-align:center}[dir=rtl] .icon-arrow{transform:scaleX(-1)}.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:1.5rem}.spinner{width:48px;height:48px;border:4px solid var(--bg-secondary);border-top-color:var(--brand-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem;gap:1rem}.error-icon{font-size:4rem}.error-screen h1{font-size:1.5rem;font-weight:600;color:var(--error)}.error-message{color:var(--text-secondary);max-width:400px;white-space:pre-line}.error-actions{display:flex;flex-direction:column;gap:.75rem;margin-top:1.5rem;width:100%;max-width:300px}.back-btn{padding:.75rem 2rem;border-radius:9999px;border:2px solid var(--brand-primary);background:white;color:var(--brand-primary);font-family:inherit;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s}.back-btn:hover{background:var(--brand-primary);color:#fff}.retry-btn{padding:.75rem 2rem;border-radius:9999px;border:none;background:var(--brand-primary);color:#fff;font-family:inherit;font-size:1rem;font-weight:500;cursor:pointer;transition:background .2s}.retry-btn:hover{background:var(--brand-primary-dark)}.lobby{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem;gap:1.5rem}.lobby-header{text-align:center}.lobby-header h1{font-size:1.5rem;font-weight:600;color:var(--text-primary);margin-bottom:.5rem}.lobby-header p{color:var(--text-secondary)}.lobby-preview{width:100%;max-width:640px}.video-container{aspect-ratio:16/9;background:var(--brand-secondary);border-radius:12px;overflow:hidden;position:relative}.video-container video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.video-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#fff}.avatar{width:80px;height:80px;border-radius:50%;background:var(--brand-primary);display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:600;margin-bottom:1rem;color:#fff}.permission-error{background:#fef2f2;border:1px solid var(--error);color:var(--error);padding:.75rem 1rem;border-radius:8px;margin-top:1rem;font-size:.875rem}.device-settings{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}.device-select{display:flex;flex-direction:column;gap:.5rem}.device-select label{font-size:.875rem;color:var(--text-secondary)}.device-select select{padding:.5rem 1rem;border-radius:8px;border:1px solid #d1d5db;background:white;font-family:inherit;font-size:.875rem;min-width:200px;cursor:pointer}.lobby-controls{display:flex;gap:1rem;justify-content:center}.toggle-btn{padding:.75rem 1.5rem;border-radius:9999px;border:2px solid var(--brand-secondary);background:white;cursor:pointer;font-family:inherit;font-size:1rem;transition:all .2s}.toggle-btn.active{background:var(--brand-primary);border-color:var(--brand-primary);color:#fff}.toggle-btn:hover:not(.active){border-color:var(--brand-primary)}.join-btn{padding:1rem 3rem;border-radius:9999px;border:none;background:var(--brand-primary);color:#fff;font-family:inherit;font-size:1.125rem;font-weight:600;cursor:pointer;transition:background .2s}.join-btn:hover{background:var(--brand-primary-dark)}.audio-meter{height:4px;background:var(--bg-secondary);border-radius:2px;margin-top:.5rem;overflow:hidden}.audio-level{height:100%;background:var(--brand-primary);transition:width .1s}.waiting-room{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem;text-align:center}.waiting-icon{font-size:4rem;margin-bottom:1rem}.waiting-room h1{font-size:1.5rem;font-weight:600;color:var(--text-primary)}.waiting-room h2{font-size:1.125rem;font-weight:500;color:var(--text-secondary);margin-bottom:.5rem}.countdown{font-size:4rem;font-weight:700;color:var(--brand-primary);font-variant-numeric:tabular-nums;margin:2rem 0}.waiting-room p{color:var(--text-secondary)}.pulse-indicator{width:12px;height:12px;background:var(--brand-primary);border-radius:50%;margin-top:2rem;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}}.waiting-teacher{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem;text-align:center}.pulse-avatar{width:100px;height:100px;border-radius:50%;background:var(--brand-primary);display:flex;align-items:center;justify-content:center;font-size:2.5rem;font-weight:600;color:#fff;margin-bottom:1.5rem;animation:pulse 2s ease-in-out infinite}.waiting-teacher h1{font-size:1.5rem;font-weight:600;color:var(--text-primary);margin-bottom:.5rem}.waiting-teacher h2{font-size:1.125rem;font-weight:500;color:var(--text-secondary);margin-bottom:.5rem}.waiting-teacher p{color:var(--text-secondary)}.waiting-teacher .hint{color:var(--text-secondary);font-size:.875rem;margin-top:2rem}.loading-dots{display:flex;gap:.5rem;justify-content:center;margin:1.5rem 0}.loading-dots span{width:10px;height:10px;background:var(--brand-primary);border-radius:50%;animation:bounce 1.4s ease-in-out infinite}.loading-dots span:nth-child(1){animation-delay:0s}.loading-dots span:nth-child(2){animation-delay:.2s}.loading-dots span:nth-child(3){animation-delay:.4s}@keyframes bounce{0%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}}.ended-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem;text-align:center}.ended-icon{font-size:4rem;margin-bottom:1rem}.ended-screen h1{font-size:1.5rem;font-weight:600;color:var(--text-primary);margin-bottom:1.5rem}.feedback-form{background:white;padding:2rem;border-radius:12px;box-shadow:0 4px 6px #0000001a;width:100%;max-width:400px}.feedback-form p{color:var(--text-secondary);margin-bottom:1.5rem}.rating-group{margin-bottom:1.5rem}.rating-group label{display:block;color:var(--text-primary);font-weight:500;margin-bottom:.5rem}.stars{display:flex;gap:.5rem;justify-content:center}.star-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;opacity:.3;transition:opacity .2s,transform .2s}.star-btn.active{opacity:1}.star-btn:hover{transform:scale(1.1)}.submit-btn{width:100%;padding:.75rem;border-radius:8px;border:none;background:var(--brand-primary);color:#fff;font-family:inherit;font-size:1rem;font-weight:500;cursor:pointer;transition:background .2s}.submit-btn:hover:not(:disabled){background:var(--brand-primary-dark)}.submit-btn:disabled{opacity:.5;cursor:not-allowed}.thank-you{color:var(--brand-primary);font-weight:500;font-size:1.125rem}.back-link{display:inline-block;margin-top:2rem;color:var(--brand-primary);text-decoration:none;font-weight:500}.back-link:hover{text-decoration:underline}.connection-quality{position:fixed;bottom:1rem;right:1rem;display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:rgba(0,0,0,.7);border-radius:9999px;color:#fff;font-size:.875rem;z-index:100}.connection-quality.poor{background:rgba(239,68,68,.9)}.connection-quality .icon{font-size:.75rem}@media (max-width: 640px){.lobby-preview{max-width:100%}.device-settings{flex-direction:column;align-items:center}.device-select select{min-width:280px}.countdown{font-size:3rem}.feedback-form{padding:1.5rem}}.landing-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem;position:relative;overflow:hidden;background:linear-gradient(135deg,#f0fdf4 0%,#ecfdf5 50%,#f0fdfa 100%)}.landing-content{display:flex;flex-direction:column;align-items:center;text-align:center;z-index:1;max-width:450px;width:100%}.landing-logo{display:flex;flex-direction:column;align-items:center;gap:.75rem;margin-bottom:.5rem}.logo-icon{width:80px;height:80px;border-radius:20px;background:linear-gradient(135deg,var(--brand-primary) 0%,var(--brand-primary-dark) 100%);display:flex;align-items:center;justify-content:center;font-size:2.5rem;font-weight:700;color:#fff;box-shadow:0 10px 40px #10b9814d}.landing-logo h1{font-size:2rem;font-weight:700;color:var(--text-primary);margin:0}.landing-subtitle{color:var(--text-secondary);font-size:1.125rem;margin-bottom:2.5rem}.join-form{width:100%;display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}.input-group{width:100%}.join-form input{width:100%;padding:1rem 1.25rem;border-radius:12px;border:2px solid #e5e7eb;background:white;font-family:inherit;font-size:1.125rem;text-align:center;transition:all .2s;outline:none}.join-form input::placeholder{color:#9ca3af}.join-form input:focus{border-color:var(--brand-primary);box-shadow:0 0 0 4px #10b9811a}.join-form input.error{border-color:var(--error)}.input-error{display:block;color:var(--error);font-size:.875rem;margin-top:.5rem}.join-form .join-btn{width:100%;padding:1rem;font-size:1.125rem}.landing-instructions{background:white;padding:1.5rem;border-radius:12px;box-shadow:0 4px 6px #0000000d;width:100%;text-align:right;margin-bottom:2rem}.landing-instructions p{color:var(--text-primary);font-weight:600;margin-bottom:.75rem}.landing-instructions ol{color:var(--text-secondary);padding-right:1.25rem;margin:0}.landing-instructions li{margin-bottom:.5rem}.landing-instructions li:last-child{margin-bottom:0}.landing-footer{color:var(--text-secondary);font-size:.875rem}.landing-footer a{color:var(--brand-primary);text-decoration:none;font-weight:500}.landing-footer a:hover{text-decoration:underline}.landing-decoration{position:absolute;inset:0;overflow:hidden;pointer-events:none}.decoration-circle{position:absolute;border-radius:50%;background:var(--brand-primary);opacity:.05}.circle-1{width:400px;height:400px;top:-100px;right:-100px}.circle-2{width:300px;height:300px;bottom:-50px;left:-50px}.circle-3{width:200px;height:200px;top:50%;left:10%;transform:translateY(-50%)}.islamic-decoration{position:absolute;inset:0;overflow:hidden;pointer-events:none}.islamic-pattern{position:absolute;width:300px;height:300px;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0L61.8 38.2L100 50L61.8 61.8L50 100L38.2 61.8L0 50L38.2 38.2Z' fill='%2310B981'/%3E%3Ccircle cx='50' cy='50' r='15' fill='none' stroke='%2310B981' stroke-width='2'/%3E%3Ccircle cx='50' cy='50' r='25' fill='none' stroke='%2310B981' stroke-width='1'/%3E%3C/svg%3E");background-repeat:repeat;background-size:60px 60px}.pattern-1{top:-50px;right:-50px;transform:rotate(15deg)}.pattern-2{bottom:-50px;left:-50px;transform:rotate(-15deg)}.islamic-star{position:absolute;opacity:.06}.islamic-star:before,.islamic-star:after{content:"";position:absolute;background:linear-gradient(135deg,var(--brand-primary) 0%,#047857 100%)}.islamic-star:before{width:100%;height:100%;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}.islamic-star:after{width:100%;height:100%;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);transform:rotate(22.5deg);opacity:.7}.star-1{width:80px;height:80px;top:12%;right:12%}.star-2{width:60px;height:60px;bottom:18%;left:10%}.star-3{width:50px;height:50px;top:55%;right:18%}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-15px) rotate(5deg)}}.corner-ornament{position:absolute;width:200px;height:200px;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0 0 Q50 20 100 0 Q80 50 100 100 Q50 80 0 100 Q20 50 0 0' fill='none' stroke='%2310B981' stroke-width='2'/%3E%3Cpath d='M20 20 Q50 35 80 20 Q65 50 80 80 Q50 65 20 80 Q35 50 20 20' fill='none' stroke='%2310B981' stroke-width='1.5'/%3E%3Cpath d='M35 35 Q50 42 65 35 Q58 50 65 65 Q50 58 35 65 Q42 50 35 35' fill='%2310B981' opacity='0.3'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat}.corner-ornament.top-right{top:0;right:0;transform:rotate(0)}.corner-ornament.bottom-left{bottom:0;left:0;transform:rotate(180deg)}.landing-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:2rem;position:relative;overflow:hidden;background:linear-gradient(135deg,#f0fdf4 0%,#ecfdf5 30%,#faf5ff 70%,#f0fdf4 100%)}.logo-icon{width:80px;height:80px;border-radius:20px;background:linear-gradient(135deg,var(--brand-primary) 0%,#047857 100%);display:flex;align-items:center;justify-content:center;font-size:2.5rem;font-weight:700;color:#fff;box-shadow:0 10px 40px #10b9814d,inset 0 0 0 3px #fff3;position:relative}.logo-icon:before{content:"";position:absolute;inset:-4px;border-radius:24px;background:linear-gradient(135deg,transparent 0%,rgba(16,185,129,.3) 50%,transparent 100%);z-index:-1}.quran-verses{position:absolute;inset:0;overflow:hidden;pointer-events:none}.verse{position:absolute;font-family:Amiri,Traditional Arabic,Scheherazade New,serif;color:var(--brand-primary);white-space:nowrap;direction:rtl;user-select:none;text-shadow:0 2px 10px rgba(16,185,129,.1)}.verse-1{font-size:2.8rem;top:8%;left:5%;opacity:.18;transform:rotate(-2deg)}.verse-2{font-size:2.2rem;bottom:8%;right:8%;opacity:.16;transform:rotate(1deg)}.verse-3{font-size:2.4rem;top:42%;left:3%;opacity:.15;transform:rotate(-1deg)}.verse-4{font-size:2rem;top:15%;right:18%;opacity:.14;transform:rotate(2deg)}.verse-5{font-size:2rem;bottom:22%;left:18%;opacity:.15;transform:rotate(-1deg)}.verse-6{font-size:2.2rem;bottom:48%;right:3%;opacity:.16;transform:rotate(1deg);animation:verseFloat 14s ease-in-out infinite}@keyframes verseFloat{0%,to{transform:translateY(0);opacity:var(--verse-opacity, .15)}50%{transform:translateY(-8px);opacity:calc(var(--verse-opacity, .15) + .03)}}.verse-1{animation:verseFloat 12s ease-in-out infinite;--verse-opacity: .18}.verse-2{animation:verseFloat 15s ease-in-out infinite;animation-delay:-3s;--verse-opacity: .16}.verse-3{animation:verseFloat 13s ease-in-out infinite;animation-delay:-7s;--verse-opacity: .15}.verse-4{animation:verseFloat 16s ease-in-out infinite;animation-delay:-5s;--verse-opacity: .14}.verse-5{animation:verseFloat 14s ease-in-out infinite;animation-delay:-9s;--verse-opacity: .15}.verse-6{animation:verseFloat 15s ease-in-out infinite;animation-delay:-2s;--verse-opacity: .16}@media (max-width: 640px){.landing-page{padding:1.5rem}.logo-icon{width:64px;height:64px;font-size:2rem;border-radius:16px}.landing-logo h1{font-size:1.75rem}.landing-subtitle{font-size:1rem;margin-bottom:2rem}.join-form input{padding:.875rem 1rem;font-size:1rem}.landing-instructions{padding:1.25rem}.verse-3,.verse-4{display:none}.verse-1{font-size:1.6rem;top:3%;left:2%;opacity:.12}.verse-2{font-size:1.4rem;bottom:3%;right:3%;opacity:.12}.verse-5{font-size:1.3rem;bottom:18%;left:3%;opacity:.1}.verse-6{font-size:1.4rem;top:50%;right:2%;opacity:.1}.star-1,.star-2,.star-3{width:40px;height:40px;opacity:.04}.islamic-pattern,.corner-ornament{display:none}}@media (min-width: 641px) and (max-width: 1024px){.landing-page{padding:2rem}.logo-icon{width:72px;height:72px;font-size:2.25rem}.landing-logo h1{font-size:1.875rem}.verse{font-size:1.8rem}.verse-1{font-size:2.2rem;top:5%;left:3%}.verse-2{font-size:1.8rem;bottom:5%;right:5%}.verse-3{font-size:1.9rem;top:40%;left:2%}.verse-4{font-size:1.6rem;top:12%;right:12%}.verse-5{font-size:1.6rem;bottom:20%;left:12%}.verse-6{font-size:1.8rem;bottom:42%;right:2%}.islamic-pattern{width:200px;height:200px;opacity:.05}.star-1{width:60px;height:60px}.star-2{width:45px;height:45px}.star-3{width:35px;height:35px}}@media (min-width: 1025px){.landing-content{max-width:500px}}@media (hover: none) and (pointer: coarse){.toggle-btn:hover:not(.active),.join-btn:hover,.retry-btn:hover{background:inherit}.join-btn:active{background:var(--brand-primary-dark)}.toggle-btn:active:not(.active){border-color:var(--brand-primary)}}@supports (padding: max(0px)){.landing-page{padding-left:max(1.5rem,env(safe-area-inset-left));padding-right:max(1.5rem,env(safe-area-inset-right));padding-bottom:max(1.5rem,env(safe-area-inset-bottom))}}