:root{--color-background: #1a202c;--color-surface: #2d3748;--color-primary: #38b2ac;--color-secondary: #f687b3;--color-text: #e2e8f0;--color-secondary-text: #a0aec0;--color-error: #e53e3e}body{margin:0;padding:0 0 100px;font-family:Arial,Tahoma,sans-serif;background-color:var(--color-background);color:var(--color-text);direction:rtl}.app-container{min-height:100vh}.main-content{max-width:1200px;margin:0 auto;padding:24px}.primary-btn{background-color:var(--color-primary);color:var(--color-background);padding:10px 20px;border-radius:8px;font-weight:700;cursor:pointer;transition:background-color .3s ease,transform .1s;border:none;display:flex;align-items:center;justify-content:center}.primary-btn:hover{background-color:#319795;transform:translateY(-1px)}.full-width-btn{width:100%;margin-top:16px}.secondary-link-btn{color:var(--color-primary);background:none;border:none;padding:0;cursor:pointer;font-weight:700;transition:color .3s}.secondary-link-btn:hover{color:#319795}.app-header{background-color:#111827;padding:24px;box-shadow:0 2px 4px #0006;border-bottom:3px solid var(--color-primary);display:flex;justify-content:space-between;align-items:center}.app-header h1{font-size:2rem;color:var(--color-primary);margin:0}.app-header p{color:var(--color-secondary-text);margin:4px 0 0}.auth-status-section{display:flex;align-items:center;gap:16px}.user-info{color:var(--color-secondary-text);font-size:1.1rem;display:flex;align-items:center;gap:8px}.logout-btn{background-color:var(--color-error);color:#fff;padding:8px 16px;border-radius:6px;border:none;cursor:pointer;transition:background-color .3s;font-weight:600}.logout-btn:hover{background-color:#c53030}.icon-user,.icon-logout{font-size:1.2rem}.reciter-selector-container{background-color:var(--color-surface);padding:16px;border-radius:12px;box-shadow:0 4px 10px #0006;margin-bottom:32px}.reciter-selector-container label{font-size:1.2rem;color:var(--color-primary);display:block;margin-bottom:8px}.reciter-select{width:100%;padding:10px;border-radius:6px;background-color:#1a202c;color:var(--color-text);border:1px solid var(--color-primary);font-size:1rem;cursor:pointer}.surah-list-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}.card-item{background-color:var(--color-surface);border-radius:10px;padding:16px;box-shadow:0 4px 8px #0006;transition:transform .2s,background-color .2s;cursor:pointer;border-left:4px solid transparent}.card-item:hover{transform:translateY(-3px);background-color:#38465d}.selected-card{background-color:#319795;border-color:var(--color-primary);transform:scale(1.02)}.card-item h3{font-size:1.25rem;margin:0 0 4px;color:var(--color-primary)}.selected-card h3{color:var(--color-text)}.card-item p{color:var(--color-secondary-text);margin:0;font-size:.9rem}.selected-card p{color:var(--color-text)}.auth-container{display:flex;justify-content:center;align-items:center;min-height:100vh}.auth-card{background-color:var(--color-surface);padding:30px;border-radius:12px;box-shadow:0 10px 20px #0009;max-width:400px;width:90%;border-top:5px solid var(--color-primary)}.auth-title{font-size:1.8rem;text-align:center;color:var(--color-primary);margin-bottom:24px;display:flex;align-items:center;justify-content:center;gap:10px}.input-group{position:relative;margin-bottom:16px}.input-field{width:100%;padding:12px 12px 12px 40px;border-radius:6px;background-color:#1a202c;color:var(--color-text);border:1px solid #4a5568;transition:border-color .3s}.input-field:focus{border-color:var(--color-primary);outline:none}.input-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--color-secondary-text)}.error-message{background-color:#e53e3e40;color:var(--color-error);padding:10px;border-radius:6px;margin-bottom:16px;border:1px solid var(--color-error);text-align:center;font-weight:600}.auth-footer-text{text-align:center;margin-top:20px;color:var(--color-secondary-text)}.player-footer{position:fixed;bottom:0;left:0;width:100%;background-color:#111827;padding:15px 24px;border-top:4px solid var(--color-primary);z-index:100}.no-recitation-msg{text-align:center;font-size:1.1rem;color:var(--color-secondary-text)}.player-content-wrapper{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;gap:20px}.player-info{min-width:150px;flex-shrink:0;overflow:hidden;padding-left:10px}.player-info p{margin:0;line-height:1.4}.surah-title{font-size:1.1rem;font-weight:700;color:var(--color-primary)}.player-seek-bar{display:flex;align-items:center;flex-grow:1;gap:10px;min-width:250px}.seek-slider{flex-grow:1;height:6px;-webkit-appearance:none;appearance:none;background:#4a5568;border-radius:3px;cursor:pointer}.seek-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 4px #00000080}.time-display{font-size:.8rem;color:var(--color-secondary-text);width:40px;text-align:center}.player-controls{display:flex;align-items:center;gap:12px;flex-shrink:0}.play-pause-btn{width:45px;height:45px;border-radius:50%;background-color:var(--color-primary);color:var(--color-background);border:none;cursor:pointer;font-size:1.2rem;transition:background-color .2s,transform .1s;display:flex;align-items:center;justify-content:center}.play-pause-btn:hover{background-color:#319795;transform:scale(1.05)}.play-pause-btn:disabled{opacity:.5;cursor:not-allowed}.player-control-icon{background:none;border:none;color:var(--color-secondary-text);font-size:1.4rem;cursor:pointer;transition:color .2s}.download-icon:hover{color:#48bb78}.favorite-icon:hover,.is-favorite{color:var(--color-error)}.loading-state{text-align:center;padding:50px;font-size:1.2rem}.spinner{border:4px solid rgba(255,255,255,.1);border-top:4px solid var(--color-primary);border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin:0 auto 15px}.spinner-small{border:3px solid rgba(255,255,255,.2);border-top:3px solid white;width:18px;height:18px;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.favorites-container{background-color:#111827;padding:20px;border-radius:12px;margin-top:40px;box-shadow:0 4px 10px #0006;border-top:3px solid var(--color-secondary)}.favorites-title{font-size:1.5rem;color:var(--color-secondary);margin-bottom:15px}.favorites-list{display:flex;flex-wrap:wrap;gap:10px}.favorite-tag{background-color:var(--color-secondary);color:#fff;padding:6px 12px;border-radius:20px;font-size:.9rem;cursor:pointer;transition:background-color .2s}.favorite-tag:hover{background-color:#e96098}.favorites-empty-msg{color:var(--color-secondary-text);font-style:italic}@media (max-width: 768px){.app-header{flex-direction:column;gap:15px;text-align:center}.auth-status-section{flex-direction:row;gap:10px}.player-content-wrapper{flex-direction:column;gap:15px}.player-info{order:1;text-align:center;min-width:100%;padding:0}.player-controls{order:3;gap:20px}.player-seek-bar{order:2;min-width:100%}}