:root{--primary:#667eea;--secondary:#764ba2;--accent:#f093fb;--dark-bg:#0f0f0f;--dark-surface:#1a1a1a;--dark-text:#fff;--light-bg:#fff;--light-surface:#f5f5f5;--light-text:#1a1a1a;--border-radius:12px}*{box-sizing:border-box}.app{display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;min-height:100vh}.app.dark{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;color:var(--dark-text)}.app.light{background:#f0f0f0;color:#1a1a1a;color:var(--light-text)}.app-container{display:flex;flex:1 1;flex-direction:column;gap:15px;margin:0 auto;max-width:1400px;padding:12px;width:100%}.main-panel{flex:1 1}.chat-panel,.main-panel{background:#1a1a1a;background:var(--dark-surface);border-radius:12px;border-radius:var(--border-radius);box-shadow:0 4px 12px #0000004d;min-height:300px;overflow:hidden}.chat-panel{display:flex;flex:1 1;flex-direction:column}.app.light .chat-panel,.app.light .main-panel{background:#f5f5f5;background:var(--light-surface)}@media (min-width:768px){.app-container{grid-gap:20px;display:grid;gap:20px;grid-template-columns:1fr 1fr;padding:20px}.chat-panel,.main-panel{min-height:600px}}@media (min-width:1024px){.app-container{gap:24px;max-width:1400px;padding:24px}}.live-chat{display:flex;flex-direction:column;height:100%;overflow:hidden}.chat-header{background:#0003;border-bottom:1px solid #ffffff1a;padding:12px 16px}.status-indicator{align-items:center;display:flex;font-size:11px;font-weight:500;gap:6px}.status-dot{animation:pulse 2s infinite;border-radius:50%;display:inline-block;height:8px;width:8px}.status-dot.connected{background:#4ade80;box-shadow:0 0 8px #4ade8099}.status-dot.disconnected{animation:none;background:#ef4444;box-shadow:0 0 8px #ef444499}.messages-container{display:flex;flex:1 1;flex-direction:column;gap:10px;overflow-y:auto;padding:12px 16px}.welcome-message{color:#fff9;margin:auto;padding:10px;text-align:center}.welcome-message h2{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#667eea,#764ba2,#f093fb);-webkit-background-clip:text;background-clip:text;font-size:20px;margin-bottom:10px}.welcome-message p{font-size:12px;margin:6px 0}.message{align-items:flex-start;animation:slideIn .3s ease-out;display:flex;gap:8px}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message.user{justify-content:flex-end}.message-avatar{align-items:center;border-radius:50%;display:flex;flex-shrink:0;font-size:14px;height:28px;justify-content:center;width:28px}.message.assistant .message-avatar{background:linear-gradient(135deg,#667eea,#764ba2)}.message-content{word-wrap:break-word;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff1a;border-radius:10px;color:inherit;max-width:85%;padding:8px 12px}.message.user .message-content{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:10px 0 10px 10px;color:#fff}.message.assistant .message-content{border-radius:0 10px 10px 10px}.message.user{flex-direction:row-reverse}.message-content p{font-size:13px;line-height:1.4;margin:0}.error-text{color:#ef4444!important}.typing-indicator{align-items:center;display:flex;gap:4px;height:8px}.typing-indicator span{animation:bounce 1.4s infinite;background:currentColor;border-radius:50%;height:6px;width:6px}.typing-indicator span:nth-child(2){animation-delay:.2s}.typing-indicator span:nth-child(3){animation-delay:.4s}@keyframes bounce{0%,80%,to{opacity:.5;transform:translateY(0)}40%{opacity:1;transform:translateY(-8px)}}.input-area{background:#0003;border-top:1px solid #ffffff1a;padding:12px 16px}.input-controls{display:flex;flex-direction:column;gap:8px}.input-controls textarea{background:#ffffff0d;border:1px solid #fff3;border-radius:6px;color:inherit;flex:1 1;font-family:inherit;font-size:13px;min-height:80px;padding:10px;resize:none;transition:all .2s ease}.input-controls textarea:focus{background:#ffffff1a;border-color:#667eea;box-shadow:0 0 8px #667eea4d;outline:none}.input-controls textarea:disabled{cursor:not-allowed;opacity:.5}.action-buttons{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}.btn{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;font-size:12px;font-weight:600;gap:4px;padding:10px 14px;touch-action:manipulation;transition:all .2s ease}.btn:active:not(:disabled){transform:scale(.95)}.btn:disabled{cursor:not-allowed;opacity:.5}.btn.recording{animation:pulse-btn 1s infinite;background:#ef4444}@keyframes pulse-btn{0%,to{box-shadow:0 0 0 0 #ef4444b3}50%{box-shadow:0 0 0 8px #ef444400}}.messages-container::-webkit-scrollbar{width:4px}.messages-container::-webkit-scrollbar-track{background:#0000}.messages-container::-webkit-scrollbar-thumb{background:#fff3;border-radius:2px}.messages-container::-webkit-scrollbar-thumb:hover{background:#ffffff4d}@media (min-width:640px){.chat-header{padding:14px 20px}.messages-container{gap:12px;padding:14px 20px}.message-content{max-width:75%;padding:10px 14px}.input-area{padding:14px 20px}.input-controls textarea{font-size:14px}.action-buttons{flex-wrap:nowrap}.input-controls{flex-direction:row}.btn{font-size:13px;padding:10px 16px}.btn:hover:not(:disabled){box-shadow:0 4px 12px #667eea66;transform:translateY(-2px)}}@media (min-width:768px){.chat-header{padding:16px 20px}.messages-container{gap:12px;padding:20px}.message-content{max-width:70%;padding:12px 16px}.input-area{padding:16px 20px}.welcome-message h2{font-size:28px;margin-bottom:12px}.welcome-message p{font-size:14px}}.quran-display{display:flex;flex-direction:column;height:100%;overflow:hidden}.translation-selector{align-items:center;background:linear-gradient(135deg,#43a0471a,#388e3c1a);border-bottom:2px solid #4caf504d;display:flex;flex-wrap:wrap;gap:10px;padding:12px 15px}.translation-selector label{color:#fffc;font-size:12px;font-weight:600;white-space:nowrap}.translation-select{background:#0000004d;border:1px solid #4caf5066;border-radius:6px;color:#ffffffe6;cursor:pointer;flex:1 1;font-size:12px;font-weight:500;min-width:150px;padding:8px 12px;transition:all .3s ease}.translation-select:hover{background:#0006;border-color:#4caf50b3}.translation-select:focus{border-color:#4caf50;box-shadow:0 0 0 2px #4caf5033;outline:none}.translation-select option{background:#1a1a1a;color:#ffffffe6;padding:8px}.surah-selector{background:#0003;border-bottom:1px solid #ffffff1a;padding:12px 15px}.surah-selector h2{color:#ffffffe6;font-size:14px;font-weight:600;margin:0 0 10px}.surah-buttons{grid-gap:6px;display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(35px,1fr));max-height:100px;overflow-y:auto;padding-right:6px}.surah-btn{align-items:center;background:#ffffff0d;border:1px solid #fff3;border-radius:5px;color:#ffffffb3;cursor:pointer;display:flex;font-size:11px;font-weight:600;justify-content:center;min-height:32px;padding:6px;transition:all .2s ease;-webkit-user-select:none;user-select:none}.surah-btn:active{background:#ffffff1a;color:#ffffffe6;transform:scale(.95)}@media (min-width:768px){.surah-buttons{gap:8px;grid-template-columns:repeat(auto-fill,minmax(40px,1fr))}.surah-btn{font-size:12px;min-height:36px}.translation-selector{gap:12px;padding:15px 20px}.surah-selector{padding:20px}.surah-selector h2{font-size:16px}}.surah-btn:hover{background:#ffffff1a;color:#ffffffe6}.surah-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:#0000;box-shadow:0 4px 12px #667eea66;color:#fff}.quran-content{display:flex;flex:1 1;flex-direction:column;overflow:hidden}.quran-content h1{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#667eea,#764ba2,#f093fb);-webkit-background-clip:text;background-clip:text;font-size:24px;margin:0;padding:20px 20px 12px;text-align:center}.ayahs-list{display:flex;flex:1 1;flex-direction:column;gap:12px;overflow-y:auto;padding:20px}.ayah-item{align-items:flex-start;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:8px;cursor:pointer;display:flex;gap:12px;padding:16px;transition:all .2s ease}.ayah-item:hover{background:#ffffff1a;border-color:#fff3}.ayah-item.selected{background:linear-gradient(135deg,#667eea1a,#764ba21a);border-color:#667eea;box-shadow:0 0 12px #667eea33}.ayah-number{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;color:#fff;display:flex;flex-shrink:0;font-size:12px;font-weight:700;height:32px;justify-content:center;min-width:32px}.ayah-text-arabic{color:#fffffff2;direction:rtl;flex:1 1;font-family:Arabic Typesetting,Arial,sans-serif;font-size:18px;line-height:1.8;text-align:right}.ayah-details{animation:slideDown .3s ease-out;border-top:1px solid #ffffff1a;grid-column:1/-1;padding:12px 0}@keyframes slideDown{0%{max-height:0;opacity:0}to{max-height:500px;opacity:1}}.translation-container{background:linear-gradient(135deg,#33b5361a,#228b220d);border-left:4px solid #4caf50;border-radius:4px;margin-bottom:12px;padding:12px}.translation-label{align-items:center;color:#ffffffb3;display:flex;font-size:12px;font-weight:600;gap:8px;letter-spacing:.5px;margin-bottom:8px;text-transform:uppercase}.translation-lang{background:#4caf5033;border-radius:3px;color:#ffffffe6;display:inline-block;font-weight:700;padding:2px 8px}.ayah-translation{color:#ffffffe6;font-size:14px;letter-spacing:.3px;line-height:1.8;margin:0}.ayah-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.btn-learn,.btn-play,.btn-practice{background:#667eea1a;border:1px solid #fff3;border-radius:5px;color:#fffc;cursor:pointer;flex:1 1;font-size:12px;font-weight:500;min-width:80px;padding:10px 12px;touch-action:manipulation;transition:all .2s ease;-webkit-user-select:none;user-select:none}.btn-learn:active,.btn-play:active,.btn-practice:active{background:#667eea33;transform:scale(.95)}@media (min-width:640px){.btn-learn,.btn-play,.btn-practice{font-size:13px;min-width:90px;padding:8px 16px}.btn-learn:hover,.btn-play:hover,.btn-practice:hover{background:#667eea33;border-color:#667eea;color:#fff}}.loading{align-items:center;color:#fff9;display:flex;font-size:16px;height:100%;justify-content:center}.loading:after{animation:blink 1.4s infinite;background:#fff9;border-radius:50%;content:"";display:inline-block;height:4px;margin-left:8px;width:4px}@keyframes blink{0%,20%,50%,80%,to{opacity:1}40%,60%{opacity:.3}}.ayahs-list::-webkit-scrollbar{width:6px}.ayahs-list::-webkit-scrollbar-track{background:#0000}.ayahs-list::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.ayahs-list::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.surah-buttons::-webkit-scrollbar{height:4px}.surah-buttons::-webkit-scrollbar-track{background:#0000}.surah-buttons::-webkit-scrollbar-thumb{background:#fff3;border-radius:2px}@media (max-width:768px){.ayah-text-arabic{font-size:16px}.surah-buttons{grid-template-columns:repeat(auto-fill,minmax(35px,1fr))}}.learning-modal-overlay{align-items:center;animation:fadeIn .3s ease;background:#0009;bottom:0;display:flex;justify-content:center;left:0;padding:10px;position:fixed;right:0;top:0;z-index:1000}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.learning-modal{animation:slideUp .3s ease;background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #4caf5066;border-radius:12px;box-shadow:0 20px 60px #000c;display:flex;flex-direction:column;max-height:85vh;max-width:600px;width:100%}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}.learning-modal-header{align-items:center;border-bottom:1px solid #4caf504d;display:flex;gap:10px;justify-content:space-between;padding:14px 16px}.learning-modal-header h3{color:#ffffffe6;flex:1 1;font-size:16px;margin:0}.btn-close{background:none;border:none;color:#fff9;cursor:pointer;font-size:24px;padding:4px;touch-action:manipulation;transition:color .2s}.btn-close:active{color:#ffffffe6}.learning-modal-body{flex:1 1;overflow-y:auto;padding:14px 16px}.ayah-preview{background:#4caf501a;border-left:4px solid #4caf50;border-radius:6px;margin-bottom:14px;padding:12px}.preview-text{color:#ffffffe6;direction:rtl;font-family:Arabic Typesetting,Arial;font-size:15px;font-weight:600;line-height:1.6;margin:0 0 8px;text-align:right}.preview-translation{color:#ffffffb3;font-size:12px;margin:0}.learn-content,.practice-content{min-height:100px}.loading-spinner{align-items:center;display:flex;justify-content:center;min-height:100px}.loading-spinner:after{animation:spin 1s linear infinite;border:3px solid #4caf504d;border-radius:50%;border-top-color:#4caf50;content:"";height:28px;width:28px}@keyframes spin{to{transform:rotate(1turn)}}.analysis-content p{color:#fffc;font-size:13px;line-height:1.6;margin:8px 0}.recording-status{align-items:center;display:flex;flex-direction:column;justify-content:center;min-height:100px;padding:14px 16px;text-align:center}.recording-indicator{animation:blink 1s infinite;font-size:28px;margin-bottom:10px}.recording-status p{color:#ffffffb3;font-size:13px}.feedback-content{background:#4caf501a;border-radius:6px;padding:12px}.feedback-content p{color:#fffc;font-size:12px;line-height:1.5;margin:4px 0}.learning-modal-footer{border-top:1px solid #4caf504d;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;padding:12px 16px}@media (min-width:640px){.learning-modal{max-height:80vh}.learning-modal-header{padding:16px 20px}.learning-modal-header h3{font-size:18px}.learning-modal-body{padding:16px 20px}.ayah-preview{margin-bottom:16px;padding:15px}.preview-text{font-size:16px;margin:0 0 10px}.preview-translation{font-size:13px}.learning-modal-footer{gap:10px;padding:14px 20px}}.btn-danger,.btn-primary,.btn-secondary{border:none;border-radius:6px;cursor:pointer;font-size:13px;font-weight:600;padding:10px 20px;transition:all .2s}.btn-primary{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#45a049,#3d8b40)}.btn-primary:disabled{cursor:not-allowed;opacity:.5}.btn-secondary{background:#ffffff1a;border:1px solid #fff3;color:#ffffffb3}.btn-secondary:hover{background:#ffffff26;color:#ffffffe6}.btn-danger{background:linear-gradient(135deg,#f44336,#d32f2f);color:#fff}.btn-danger:hover{background:linear-gradient(135deg,#d32f2f,#c62828)}.iqro-learning{display:flex;flex-direction:column;gap:16px;padding:12px}.iqro-tabs{-webkit-overflow-scrolling:touch;display:flex;gap:8px;overflow-x:auto;padding:8px 0}.tab-btn{background:#ffffff1a;border:none;border-radius:6px;color:#fffc;cursor:pointer;flex-shrink:0;font-size:12px;font-weight:600;padding:10px 14px;touch-action:manipulation;transition:all .2s ease;white-space:nowrap}.tab-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 2px 8px #667eea4d;color:#fff}.tab-btn:disabled{cursor:not-allowed;opacity:.5}.iqro-loading{align-items:center;color:#ffffffb3;display:flex;font-size:16px;justify-content:center;padding:40px 20px}.iqro-levels{display:flex;flex-direction:column;gap:12px}.iqro-levels h2{color:#ffffffe6;font-size:18px;margin:0}.info-text{color:#ffffffb3;font-size:12px;line-height:1.5;margin:8px 0}.levels-grid{grid-gap:10px;display:grid;gap:10px;grid-template-columns:1fr}.level-card{background:linear-gradient(135deg,#667eea1a,#764ba21a);border:1px solid #667eea4d;border-radius:8px;cursor:pointer;padding:14px;touch-action:manipulation;transition:all .2s ease}.level-card:active{background:linear-gradient(135deg,#667eea33,#764ba233);transform:scale(.98)}.level-number{color:#667eea;font-size:12px;font-weight:700;margin-bottom:4px}.level-title{color:#ffffffe6;font-size:14px;font-weight:600;margin-bottom:6px}.level-desc{color:#ffffffb3;font-size:12px;line-height:1.4;margin-bottom:8px}.level-meta{color:#fff9;display:flex;font-size:11px;gap:10px;margin-bottom:8px}.btn-start{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:12px;font-weight:600;padding:8px;transition:all .2s ease;width:100%}.iqro-path{display:flex;flex-direction:column;gap:12px}.iqro-path h2{color:#ffffffe6;font-size:18px;margin:0}.path-container{display:flex;flex-direction:column;gap:12px}.path-phase{background:#ffffff0d;border:1px solid #ffffff1a;border-radius:6px;padding:12px}.phase-header{align-items:flex-start;display:flex;gap:10px;margin-bottom:10px}.phase-number{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;color:#fff;display:flex;font-size:14px;font-weight:700;height:32px;justify-content:center;min-width:32px;width:32px}.phase-info h3{color:#ffffffe6;font-size:14px;margin:0 0 4px}.phase-duration{color:#fff9;font-size:11px;margin:0}.phase-goals,.phase-levels{margin-top:10px}.phase-goals h4,.phase-levels h4{color:#fffc;font-size:12px;font-weight:600;margin:0 0 6px}.phase-goals ul{display:flex;flex-direction:column;gap:4px;list-style:none;margin:0;padding:0}.phase-goals li{color:#ffffffb3;font-size:12px;margin:0}.levels-list{display:flex;flex-wrap:wrap;gap:6px}.level-link{background:#667eea1a;border:1px solid #667eea66;border-radius:4px;color:#fffc;cursor:pointer;font-size:11px;font-weight:500;padding:6px 10px;transition:all .2s ease}.level-link:active{background:#667eea33;border-color:#667eea}.total-time{background:#4caf501a;border-left:3px solid #4caf50;border-radius:4px;color:#fffc;font-size:12px;margin-top:10px;padding:10px}.iqro-lesson{gap:12px}.iqro-lesson,.lesson-header{display:flex;flex-direction:column}.lesson-header{gap:4px}.lesson-header h2{color:#ffffffe6;font-size:18px;margin:0}.lesson-header p{color:#fff9;font-size:12px;margin:0}.lesson-container{gap:12px}.lesson-container,.lesson-main{display:flex;flex-direction:column}.lesson-main{gap:10px}.lesson-card{background:linear-gradient(135deg,#4caf501a,#228b220d);border:1px solid #4caf504d;border-radius:8px;padding:14px}.arabic-display{background:#0003;border-radius:6px;margin-bottom:12px;padding:20px 10px;text-align:center}.arabic-text-container{align-items:center;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.arabic-text{color:#ffffffe6;font-size:48px;font-weight:700;line-height:1.2}.btn-play-large{align-items:center;background:#667eea33;border:2px solid #667eea80;border-radius:50%;color:#ffffffe6;cursor:pointer;display:flex;font-size:20px;justify-content:center;min-height:48px;min-width:48px;padding:10px 14px;touch-action:manipulation;transition:all .3s ease}.btn-play-large:hover{background:#667eea66;border-color:#667eea;transform:scale(1.05)}.btn-play-large:active{transform:scale(.95)}.btn-play-large:disabled{cursor:not-allowed;opacity:.5}.lesson-name{color:#ffffffb3;font-size:14px}.lesson-info{display:flex;flex-direction:column;gap:8px}.info-item{display:flex;font-size:12px;gap:10px}.info-item .label{color:#ffffffb3;font-weight:600;min-width:80px}.info-item .value{color:#ffffffe6}.practice-box,.pronunciation-box,.tips-box{background:#ffffff0d;border-radius:6px;margin-top:10px;padding:10px}.practice-box h4,.pronunciation-box h4,.tips-box h4{color:#fffc;font-size:12px;font-weight:600;margin:0 0 6px}.practice-box p,.tips-box p{color:#ffffffb3;font-size:12px;line-height:1.4;margin:0 0 8px}.pronunciation-content{display:flex;flex-direction:column;gap:8px}.pronunciation-item{background:#0003;border-radius:4px;display:flex;flex-direction:column;gap:4px;padding:8px}.pronunciation-item .label{color:#fff9;font-size:11px;font-weight:600}.pronunciation-item .value{color:#ffffffe6;font-family:Arial,sans-serif;font-size:13px;font-style:italic}.pronunciation-item .btn-audio{background:#667eea4d;border:none;border-radius:4px;color:#fffc;cursor:pointer;font-size:11px;font-weight:600;padding:4px 8px;transition:all .2s ease}.pronunciation-item .btn-audio:active{background:#667eea80}.pronunciation-item .btn-audio.playing{animation:pulse 1s infinite;background:#4caf5080;color:#ffffffe6}.pronunciation-item .btn-audio:disabled{cursor:not-allowed;opacity:.5}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.btn-record{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:12px;font-weight:600;padding:8px;width:100%}.lesson-nav{align-items:center;display:flex;gap:8px;justify-content:space-between}.nav-btn{background:#ffffff0d;border:1px solid #fff3;border-radius:6px;color:#fffc;cursor:pointer;flex:1 1;font-size:11px;font-weight:600;padding:8px 10px;transition:all .2s ease}.nav-btn:disabled{cursor:not-allowed;opacity:.3}.nav-btn:active:not(:disabled){background:#ffffff1a}.progress-text{color:#fff9;font-size:11px;min-width:40px;text-align:center}.lessons-sidebar{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto}.lessons-sidebar h3{color:#fffc;font-size:13px;font-weight:600;margin:0}.lessons-list{display:flex;flex-direction:column;gap:4px}.lesson-item{background:#ffffff0d;border:none;border-radius:4px;color:#ffffffb3;cursor:pointer;display:flex;font-size:12px;gap:8px;padding:8px;text-align:left;transition:all .2s ease}.lesson-item.active{background:linear-gradient(135deg,#667eea4d,#764ba24d);border:1px solid #667eea66;color:#ffffffe6}.lesson-num{align-items:center;background:#ffffff1a;border-radius:4px;display:flex;font-size:11px;font-weight:600;height:24px;justify-content:center;min-width:24px;width:24px}.lesson-item.active .lesson-num{background:#667eea66}.lesson-text{flex:1 1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width:640px){.iqro-learning{gap:20px;padding:16px}.tab-btn{font-size:13px;padding:10px 16px}.levels-grid{gap:12px;grid-template-columns:repeat(2,1fr)}.level-card{padding:16px}.lesson-container{grid-gap:16px;display:grid;gap:16px;grid-template-columns:1fr 200px}.lessons-sidebar{max-height:600px}.arabic-text{font-size:56px}.btn-play-large{font-size:24px;min-height:52px;min-width:52px;padding:12px 16px}.lesson-nav{margin-top:10px}.tab-btn:hover:not(:disabled){background:#ffffff26}.btn-start:hover,.level-card:hover{transform:translateY(-2px)}.btn-start:hover{box-shadow:0 4px 12px #667eea4d}.nav-btn:hover:not(:disabled){background:#ffffff1a;border-color:#667eea80}}@media (min-width:768px){.iqro-learning{gap:24px;padding:20px}.levels-grid{grid-template-columns:repeat(3,1fr)}.iqro-levels h2,.iqro-path h2,.lesson-header h2{font-size:22px}.lesson-container{grid-template-columns:1fr 280px}.arabic-text{font-size:64px}.btn-play-large{font-size:28px;min-height:56px;min-width:56px;padding:14px 18px}}.navbar{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0000004d;border-bottom:1px solid #ffffff1a;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;padding:12px 16px}.navbar.dark{background:#0006;color:#fff}.navbar.light{background:#fffffff2;border-bottom-color:#0000001a;color:#1a1a1a}.navbar-brand{flex:1 1;min-width:150px}.navbar-brand h1{font-size:18px;font-weight:700;letter-spacing:.5px;margin:0}.navbar-brand p{font-size:11px;margin:2px 0 0;opacity:.7}.navbar-modes{display:flex;flex-wrap:wrap;gap:6px}.mode-btn{background:#ffffff1a;border:none;border-radius:6px;color:inherit;cursor:pointer;font-size:12px;font-weight:600;padding:7px 13px;touch-action:manipulation;transition:all .2s ease;white-space:nowrap}.mode-btn:active{transform:scale(.95)}.mode-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 2px 8px #667eea66;color:#fff}.navbar-actions{display:flex;gap:8px}.theme-btn{align-items:center;background:#ffffff1a;border:none;border-radius:50%;cursor:pointer;display:flex;font-size:18px;height:36px;justify-content:center;touch-action:manipulation;transition:all .2s ease;width:36px}.theme-btn:active{background:#fff3;transform:scale(.9)}@media (min-width:640px){.navbar{flex-wrap:nowrap;gap:16px;padding:14px 20px}.navbar-brand h1{font-size:20px}.mode-btn{font-size:13px;padding:8px 15px}.theme-btn{font-size:20px;height:38px;width:38px}}@media (min-width:768px){.navbar{gap:24px;padding:16px 24px}.navbar-brand h1{font-size:24px}.mode-btn{font-size:14px;padding:8px 16px}.theme-btn{font-size:20px;height:40px;width:40px}.theme-btn:hover{background:#fff3;transform:rotate(20deg)}.mode-btn:hover{background:#fff3;transform:translateY(-2px)}}
/*# sourceMappingURL=main.22ce6300.css.map*/