:root{--bg-primary: #08090d;--bg-secondary: #0f111a;--bg-tertiary: #171b26;--bg-glass: rgba(15, 17, 26, .75);--gold-primary: #d4af37;--gold-light: #f3e5ab;--gold-dark: #aa7c11;--gold-gradient: linear-gradient(135deg, #b38728 0%, #fbf5b7 50%, #daae48 100%);--gold-glow-gradient: linear-gradient(135deg, rgba(212, 175, 55, .4) 0%, rgba(133, 97, 20, .2) 100%);--text-primary: #f5f6f8;--text-secondary: #a0a7b5;--text-muted: #69707d;--text-gold: #e5c158;--border-gold: rgba(212, 175, 55, .15);--border-gold-hover: rgba(212, 175, 55, .4);--border-glass: rgba(255, 255, 255, .05);--shadow-gold: 0 8px 32px 0 rgba(212, 175, 55, .08);--shadow-gold-intense: 0 12px 40px 0 rgba(212, 175, 55, .2);--transition-smooth: all .4s cubic-bezier(.16, 1, .3, 1);--transition-fast: all .2s ease}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-primary);color:var(--text-primary);font-family:Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow-x:hidden;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:4px;border:2px solid var(--bg-primary);transition:var(--transition-smooth)}::-webkit-scrollbar-thumb:hover{background:var(--gold-primary)}[dir=rtl]{font-family:Cairo,Poppins,sans-serif}[dir=rtl] .arabic-text{font-family:Amiri,serif;font-weight:700;line-height:1.8}.arabic-text{font-family:Amiri,serif;font-size:1.35em;color:var(--text-gold);line-height:1.8}.glass-panel{background:var(--bg-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-gold);border-radius:16px;box-shadow:var(--shadow-gold);transition:var(--transition-smooth)}.glass-panel:hover{border-color:var(--border-gold-hover);box-shadow:var(--shadow-gold-intense)}.gold-gradient-text{background:var(--gold-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:inline-block}.btn-primary{background:var(--gold-gradient);color:#000;font-weight:600;border:none;border-radius:8px;padding:10px 24px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:var(--transition-smooth);position:relative;overflow:hidden;box-shadow:0 4px 15px #d4af3740;font-size:.95rem}.btn-primary:before{content:"";position:absolute;top:0;left:-50%;width:200%;height:100%;background:linear-gradient(to right,#fff0,#ffffff4d,#fff0);transform:skew(-25deg);transition:.75s;opacity:0}.btn-primary:hover:before{left:125%;opacity:1}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px #d4af3773}.btn-primary:active{transform:translateY(1px)}.btn-secondary{background:transparent;color:var(--text-primary);border:1px solid var(--border-gold);border-radius:8px;padding:10px 24px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:var(--transition-smooth);font-size:.95rem}.btn-secondary:hover{background:#d4af3714;border-color:var(--gold-primary);color:var(--text-gold);transform:translateY(-2px)}.fade-in{animation:fadeIn .8s cubic-bezier(.16,1,.3,1) forwards}.slide-up{animation:slideUp .8s cubic-bezier(.16,1,.3,1) forwards}.slide-in-right{animation:slideInRight .6s cubic-bezier(.16,1,.3,1) forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}.shimmer{background:linear-gradient(90deg,var(--bg-secondary) 25%,var(--bg-tertiary) 50%,var(--bg-secondary) 75%);background-size:200% 100%;animation:loading-shimmer 1.5s infinite linear}@keyframes loading-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.gold-glow-text{text-shadow:0 0 10px rgba(212,175,55,.5),0 0 20px rgba(212,175,55,.2)}.container{width:100%;max-width:1280px;margin:0 auto;padding:0 24px}.app-layout{display:flex;flex-direction:column;min-height:100vh;position:relative}.main-content{flex-grow:1;padding-top:100px;padding-bottom:60px}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}@media (max-width: 1024px){.grid-4,.grid-3{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}.main-content{padding-top:80px}.container{padding:0 16px}}.islamic-pattern{position:absolute;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(circle at 100% 150%,var(--bg-primary) 24%,white 24%,white 28%,var(--bg-primary) 28%,var(--bg-primary) 36%,rgba(212,175,55,.03) 36%,rgba(212,175,55,.03) 40%,var(--bg-primary) 40%,var(--bg-primary) 48%,transparent 48%),radial-gradient(circle at 0% 150%,var(--bg-primary) 24%,white 24%,white 28%,var(--bg-primary) 28%,var(--bg-primary) 36%,rgba(212,175,55,.03) 36%,rgba(212,175,55,.03) 40%,var(--bg-primary) 40%,var(--bg-primary) 48%,transparent 48%);background-size:60px 120px;pointer-events:none;opacity:.15;z-index:0}select,select.formSelect{background-color:var(--bg-secondary)!important;color:var(--text-primary)!important;border:1px solid var(--border-gold)!important;border-radius:10px!important}select option{background-color:#0f111a!important;color:var(--text-primary)!important;padding:12px!important;font-family:inherit!important}select:focus{border-color:var(--gold-primary)!important;box-shadow:0 0 10px #d4af3740!important}.floating-reactions-container{position:fixed;bottom:100px;left:0;width:100%;height:350px;pointer-events:none;z-index:100000;overflow:hidden}.floating-reaction{position:absolute;bottom:0;font-size:2.4rem;opacity:0;animation:floatUpAndRotate 2.5s cubic-bezier(.08,.82,.17,1) forwards;filter:drop-shadow(0 4px 15px rgba(0,0,0,.6))}@keyframes floatUpAndRotate{0%{transform:translateY(0) scale(.4) rotate(0);opacity:0}15%{opacity:1;transform:translateY(-50px) scale(1.35) rotate(15deg)}50%{transform:translateY(-160px) scale(1) rotate(-15deg);opacity:.85}to{transform:translateY(-350px) scale(.7) rotate(10deg);opacity:0}}.reciter-mic-pulse{animation:micGlowPulse 1.8s infinite ease-in-out}@keyframes micGlowPulse{0%{box-shadow:0 0 #d4af3780;transform:scale(1)}50%{box-shadow:0 0 15px 4px #d4af3740;transform:scale(1.03)}to{box-shadow:0 0 #d4af3700;transform:scale(1)}}.muslim-avatar-pulse{animation:avatarGlowPulse 2s infinite ease-in-out;border-color:var(--gold-primary)!important}@keyframes avatarGlowPulse{0%{box-shadow:0 0 #d4af3766;border-color:var(--gold-primary)}50%{box-shadow:0 0 25px 8px #d4af3733;border-color:#fbf5b7}to{box-shadow:0 0 #d4af3700;border-color:var(--gold-primary)}}.circle-grid-card{transition:all .5s cubic-bezier(.16,1,.3,1)!important;animation:cardEntrance .6s cubic-bezier(.16,1,.3,1) forwards}.circle-grid-card:hover{transform:translateY(-5px) scale(1.02)!important;border-color:var(--border-gold-hover)!important;box-shadow:var(--shadow-gold-intense),0 0 20px #d4af3726!important}@keyframes cardEntrance{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.premium-input{width:100%;box-sizing:border-box;background:#0d0f16!important;border:1px solid var(--border-gold)!important;border-radius:12px!important;padding:14px 16px!important;color:var(--text-primary)!important;font-size:.95rem!important;outline:none!important;transition:all .3s cubic-bezier(.16,1,.3,1)!important;font-family:inherit}.premium-input:focus{background:#11141e!important;border-color:var(--gold-primary)!important;box-shadow:0 0 15px #d4af374d,inset 0 0 8px #d4af370d!important;transform:translateY(-1px)}.premium-input::placeholder{color:var(--text-muted);opacity:.8}[dir=rtl] .premium-input{text-align:right}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-text-fill-color:var(--text-primary)!important;-webkit-box-shadow:0 0 0px 1000px #0d0f16 inset!important}.bento-container{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,minmax(140px,auto));gap:20px;width:100%;margin-bottom:32px}.bento-card{position:relative;overflow:hidden;border-radius:20px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;background:#191c2999;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(212,175,55,.15);box-shadow:0 10px 30px #0003;transition:all .4s cubic-bezier(.16,1,.3,1);z-index:1}.bento-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at top right,rgba(212,175,55,.1),transparent 50%);z-index:-1;transition:all .4s ease;opacity:.5}.bento-card:hover{transform:translateY(-5px) scale(1.02);border-color:#d4af3780;box-shadow:0 15px 40px #d4af3726,0 0 20px #d4af371a}.bento-card:hover:before{opacity:1;background:radial-gradient(circle at top right,rgba(212,175,55,.2),transparent 60%)}.bento-large{grid-column:span 2;grid-row:span 2}.bento-wide{grid-column:span 2;grid-row:span 1}.bento-tall{grid-column:span 1;grid-row:span 2}.bento-icon-wrapper{width:48px;height:48px;border-radius:14px;background:#d4af371a;display:flex;align-items:center;justify-content:center;margin-bottom:16px;border:1px solid rgba(212,175,55,.2);transition:all .3s ease}.bento-card:hover .bento-icon-wrapper{background:#d4af3733;transform:scale(1.1) rotate(5deg);border-color:#d4af3766}.bento-title{font-size:1.25rem;font-weight:700;color:var(--text-primary);margin-bottom:8px}.bento-desc{font-size:.85rem;color:var(--text-secondary);line-height:1.5}@media (max-width: 1024px){.bento-container{grid-template-columns:repeat(2,1fr);grid-template-rows:auto}.bento-large{grid-column:span 2;grid-row:span 1}}@media (max-width: 768px){.bento-container{grid-template-columns:1fr}.bento-large,.bento-wide,.bento-tall{grid-column:span 1;grid-row:span 1}}.bento-actions{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}.bento-btn{background:#d4af3714;border:1px solid rgba(212,175,55,.25);color:var(--text-gold);border-radius:10px;padding:8px 14px;font-size:.8rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .3s cubic-bezier(.16,1,.3,1);font-family:inherit;z-index:5}.bento-btn:hover{background:var(--gold-gradient);color:#000;border-color:transparent;transform:translateY(-2px);box-shadow:0 4px 12px #d4af3733}