@import"https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800&display=swap";@import"https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&display=swap";:root{--bg-deep: #0a0e27;--bg-mid: #1a1f3a;--accent-gold: #d4af37;--accent-purple: #a78bfa;--accent-blue: #60a5fa;--text-main: #ffffff;--text-sub: #e0e0e0;--text-muted: #9ca3af}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%}body{font-family:Cairo,sans-serif;background:linear-gradient(135deg,#1e1b4b,#312e81,#3f2f7f,#2d1b69,#1a0f35);color:var(--text-main);direction:rtl;line-height:1.6;overflow-x:hidden;position:relative}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 30%,rgba(167,139,250,.15) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(96,165,250,.15) 0%,transparent 50%);pointer-events:none;z-index:0}#root{position:relative;z-index:1}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#ffffff0d}::-webkit-scrollbar-thumb{background:#d4af374d;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#d4af3780}.app-shell{min-height:100vh;display:flex;flex-direction:column}.app-main{flex:1 0 auto;display:flex;align-items:center;justify-content:center;padding:40px 18px}footer{flex-shrink:0}.btn-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:25px;padding:10px 24px;background:#2a335066;border:1px solid rgba(212,175,55,.3);border-radius:30px;color:var(--accent-gold);text-decoration:none;font-weight:700;font-size:15px;transition:all .3s ease;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);box-shadow:0 4px 15px #0000001a}.btn-back:hover{background:#d4af3726;border-color:var(--accent-gold);transform:translate(5px);color:#fff;box-shadow:0 6px 20px #d4af3733}:root{--bg-deep: #0a0e27;--bg-mid: #1a1f3a;--bg-light: #252d47;--bg-card: rgba(42, 51, 80, .4);--accent-gold: #d4af37;--accent-purple: #a78bfa;--accent-blue: #60a5fa;--accent-cyan: #06b6d4;--text-main: #ffffff;--text-sub: #e0e0e0;--text-muted: #9ca3af;--glass-bg: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1);--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, .37);--gradient-main: linear-gradient(135deg, #1e1b4b 0%, #312e81 25%, #3f2f7f 50%, #2d1b69 75%, #1a0f35 100%);--glow-purple: 0 0 20px rgba(167, 139, 250, .3);--glow-gold: 0 0 20px rgba(212, 175, 55, .2)}*{box-sizing:border-box;margin:0;padding:0}body{margin:0;font-family:Cairo,sans-serif;background:var(--gradient-main);background-size:400% 400%;animation:gradientShift 25s ease infinite;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:space-between;direction:rtl;overflow-x:hidden;color:var(--text-main);position:relative}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes ripple{0%{transform:scale(0);opacity:1}to{transform:scale(4);opacity:0}}.ripple{position:absolute;border-radius:50%;background:#d4af3799;width:20px;height:20px;animation:ripple .6s ease-out;pointer-events:none}@keyframes glowPulse{0%,to{box-shadow:0 0 20px #d4af374d,0 0 40px #a78bfa33}50%{box-shadow:0 0 40px #d4af3799,0 0 80px #a78bfa66}}@keyframes typewriter{0%{width:0}to{width:100%}}@keyframes blinkCursor{50%{border-color:transparent}}.typewriter{overflow:hidden;border-right:3px solid var(--accent-gold);white-space:nowrap;animation:typewriter 3s steps(40) 1s forwards,blinkCursor .75s step-end infinite}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3) translateY(-50px) translateZ(0)}50%{opacity:1;transform:scale(1.05) translateZ(0)}70%{transform:scale(.9) translateZ(0)}to{transform:scale(1) translateZ(0)}}.bounce-in{animation:bounceIn .8s cubic-bezier(.68,-.55,.265,1.55)}@keyframes progressCircle{0%{stroke-dashoffset:440}to{stroke-dashoffset:0}}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 30%,rgba(167,139,250,.12) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(96,165,250,.12) 0%,transparent 50%);pointer-events:none;z-index:0}.background-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}@keyframes float-orb{0%,to{transform:translate(0) translateZ(0)}50%{transform:translate(30px,-30px) translateZ(0)}}.container{width:100%;max-width:700px;padding:20px;position:relative;z-index:1;margin:auto;display:flex;justify-content:center;flex:1;align-items:center;contain:layout style paint}.footer-container{width:100%;max-width:900px;padding:20px 18px;position:relative;z-index:1;display:flex;justify-content:center;align-items:center;text-align:center;direction:ltr}.card{background:#191e3799;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(212,175,55,.2);border-radius:30px;padding:50px 40px;box-shadow:0 8px 32px #0000005e,inset 0 1px 1px #ffffff1a;text-align:center;transition:transform .4s ease,box-shadow .4s ease,border-color .4s ease;position:relative;overflow:hidden;will-change:transform;backface-visibility:hidden;transform:translateZ(0)}.card:before{content:"";position:absolute;top:-50%;right:-50%;width:200px;height:200px;background:radial-gradient(circle,rgba(167,139,250,.1) 0%,transparent 70%);border-radius:50%;animation:float-orb 8s ease-in-out infinite;pointer-events:none;will-change:transform;backface-visibility:hidden;transform:translateZ(0)}.card:after{content:"";position:absolute;bottom:-50%;left:-50%;width:200px;height:200px;background:radial-gradient(circle,rgba(96,165,250,.1) 0%,transparent 70%);border-radius:50%;animation:float-orb 10s ease-in-out infinite reverse;pointer-events:none;will-change:transform;backface-visibility:hidden;transform:translateZ(0)}.card>*{position:relative;z-index:2}.header-section{margin-bottom:40px}.title{font-family:Playfair Display,serif;font-size:52px;line-height:1;font-weight:800;background:linear-gradient(135deg,var(--accent-gold),var(--accent-purple),var(--accent-blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px;text-shadow:0 6px 30px rgba(167,139,250,.25);letter-spacing:-1px;transition:all .25s ease;animation:titleGlow 3s ease-in-out infinite}@keyframes titleGlow{0%,to{filter:drop-shadow(0 0 10px rgba(212,175,55,.3))}50%{filter:drop-shadow(0 0 25px rgba(212,175,55,.6)) drop-shadow(0 0 35px rgba(167,139,250,.4))}}.card:hover{transform:translateY(-6px) scale(1.01) translateZ(0);box-shadow:0 18px 60px #10103c99,0 8px 30px #a78bfa14;border-color:#d4af3747}@keyframes btnPulse{0%{transform:translateY(0);box-shadow:0 8px 25px #a78bfa1f}50%{transform:translateY(-3px);box-shadow:0 18px 40px #a78bfa2e}to{transform:translateY(0);box-shadow:0 8px 25px #a78bfa1f}}.btn:active{animation:btnPulse .26s ease}@media (max-width: 600px){.title{font-size:36px}}.subtitle{font-size:15px;color:var(--text-muted);letter-spacing:1px;font-weight:500;text-transform:uppercase}.mode-tabs{display:flex;gap:12px;margin:30px 0;justify-content:center;flex-wrap:wrap}.tab-btn{padding:10px 24px;border:1px solid rgba(212,175,55,.3);background:#2a335066;color:var(--text-sub);border-radius:20px;cursor:pointer;font-size:14px;font-weight:600;transition:all .3s ease;font-family:Cairo,sans-serif}.tab-btn:hover{background:#a78bfa1a;border-color:var(--accent-purple)}.tab-btn.active{background:linear-gradient(135deg,var(--accent-purple),var(--accent-blue));border-color:var(--accent-purple);color:#fff;box-shadow:0 0 20px #a78bfa66;transform:scale(1.05)}.mic-wrap{position:relative;display:flex;justify-content:center;align-items:center;margin:40px auto;height:180px;width:100%}.mic-circle{width:160px;height:160px;border-radius:50%;background:linear-gradient(135deg,#a78bfa33,#60a5fa33);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;font-size:60px;color:var(--accent-gold);border:2px solid rgba(212,175,55,.5);cursor:pointer;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;z-index:2;box-shadow:0 0 20px #d4af374d,inset 0 0 20px #ffffff0d;animation:floatMic 3s ease-in-out infinite;will-change:transform;backface-visibility:hidden;transform:translateZ(0);position:relative;margin:0 auto}@keyframes floatMic{0%,to{transform:translateY(0) translateZ(0)}50%{transform:translateY(-15px) translateZ(0)}}.mic-circle:hover{transform:scale(1.08) translateZ(0);border-color:var(--accent-gold);box-shadow:0 0 30px #d4af3780,inset 0 0 20px #ffffff1a}.mic-circle.recording{color:#ff6b6b;border-color:#ff6b6b;background:linear-gradient(135deg,#ff6b6b33,#ff6b6b1a);box-shadow:0 0 40px #ff6b6b66,inset 0 0 20px #ffffff0d;animation:floatMic 3s ease-in-out infinite,shakeMic .5s ease-in-out infinite}@keyframes shakeMic{0%,to{transform:translateY(0) rotate(0) translateZ(0)}25%{transform:translateY(-15px) rotate(-2deg) translateZ(0)}75%{transform:translateY(-15px) rotate(2deg) translateZ(0)}}.pulse-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:160px;height:160px;border-radius:50%;border:2px solid rgba(212,175,55,.5);opacity:0;pointer-events:none;z-index:1}.mic-wrap.recording .pulse-ring{animation:pulse-ring-anim 1.5s infinite}@keyframes pulse-ring-anim{0%{width:160px;height:160px;opacity:1}to{width:280px;height:280px;opacity:0}}.visualizer{display:flex;align-items:center;justify-content:center;height:50px;gap:6px;margin:20px 0}.bar{width:5px;background:linear-gradient(180deg,var(--accent-purple),var(--accent-blue));border-radius:3px;animation:wave .6s ease-in-out infinite;box-shadow:0 0 10px var(--glow-purple)}.bar:nth-child(2n){background:linear-gradient(180deg,var(--accent-gold),var(--accent-purple))}.bar:nth-child(3n){animation-delay:.1s}@keyframes wave{0%,to{height:10px}50%{height:40px}}.dream-input{background:#191e3799;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1.5px solid rgba(212,175,55,.3);border-radius:20px;padding:25px;color:var(--text-main);font-size:16px;font-family:Cairo,sans-serif;font-weight:400;line-height:1.8;resize:none;min-height:200px;max-height:350px;width:100%;transition:all .3s ease;margin:20px 0;box-shadow:inset 0 2px 8px #0003}.dream-input::placeholder{color:#e0e0e080}.dream-input:focus{outline:none;border-color:var(--accent-gold);background:#191e37cc;box-shadow:inset 0 2px 8px #0003,0 0 30px #d4af374d,0 0 60px #a78bfa26}.reply-box{margin-top:30px;padding:30px;background:linear-gradient(135deg,#a78bfa0d,#60a5fa0d);border-radius:20px;border:1px solid rgba(212,175,55,.2);border-right:4px solid var(--accent-gold);text-align:justify;line-height:2;font-size:17px;box-shadow:inset 0 0 20px #0003;animation:slideIn .5s ease-out;position:relative;overflow:hidden;will-change:transform,opacity;backface-visibility:hidden;transform:translateZ(0)}.reply-box:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(212,175,55,.1),transparent);animation:shimmer 3s infinite}@keyframes shimmer{0%{left:-100%}to{left:100%}}@keyframes slideIn{0%{opacity:0;transform:translateY(20px) translateZ(0)}to{opacity:1;transform:translateY(0) translateZ(0)}}.dream-label{font-size:13px;color:var(--accent-gold);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;font-weight:600}.dream-quote{font-size:14px;opacity:.7;font-style:italic;margin-top:15px;color:var(--accent-purple)}.btn{padding:14px 32px;border-radius:25px;border:none;font-size:15px;font-weight:700;cursor:pointer;margin-top:20px;transition:transform .3s ease,box-shadow .3s ease,filter .3s ease;font-family:Cairo,sans-serif;text-transform:uppercase;letter-spacing:.5px;position:relative;overflow:hidden;will-change:transform;backface-visibility:hidden;transform:translateZ(0)}.btn:hover{transform:translateY(-2px) translateZ(0);filter:brightness(1.1)}.btn:active{transform:translateY(0) translateZ(0)}.btn-primary{background:linear-gradient(135deg,var(--accent-purple),var(--accent-blue));color:#fff;box-shadow:0 8px 25px #a78bfa66}.btn-primary:hover{box-shadow:0 12px 35px #a78bfa99;transform:translateY(-3px) scale(1.02) translateZ(0)}.btn-secondary{background:linear-gradient(135deg,var(--accent-gold),var(--accent-purple));color:#fff;box-shadow:0 8px 25px #d4af374d}.btn-secondary:hover{box-shadow:0 12px 35px #d4af3780;transform:translateY(-3px) scale(1.02) translateZ(0)}.btn-ghost{background:transparent;border:2px solid rgba(212,175,55,.4);color:var(--accent-gold)}.btn-ghost:hover{background:#d4af371a;border-color:var(--accent-gold)}.btn-danger{background:#ff6b6b33;color:#ff6b6b;border:1px solid rgba(255,107,107,.4)}.btn-danger:hover{background:#ff6b6b4d}.spinner{display:inline-block;width:20px;height:20px;border:3px solid rgba(212,175,55,.3);border-radius:50%;border-top-color:var(--accent-gold);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-container{padding:60px 40px;text-align:center;position:relative}.loading-orbs{position:relative;width:120px;height:120px;margin:0 auto 30px;display:flex;align-items:center;justify-content:center}.loading-orb{position:absolute;width:20px;height:20px;border-radius:50%;animation:orbitSpin 2s linear infinite;top:50%;left:50%;margin-left:-10px;margin-top:-10px;transform-origin:center center}.loading-orb:nth-child(1){background:var(--accent-gold);animation-delay:0s}.loading-orb:nth-child(2){background:var(--accent-purple);animation-delay:-.5s}.loading-orb:nth-child(3){background:var(--accent-blue);animation-delay:-1s}.loading-orb:nth-child(4){background:var(--accent-cyan);animation-delay:-1.5s}@keyframes orbitSpin{0%{transform:rotate(0) translate(50px) rotate(0)}to{transform:rotate(360deg) translate(50px) rotate(-360deg)}}.loading-progress{width:100%;height:6px;background:#191e3799;border-radius:10px;overflow:hidden;margin:20px 0;position:relative}.loading-progress-bar{height:100%;background:linear-gradient(90deg,var(--accent-gold),var(--accent-purple),var(--accent-blue));background-size:200% 100%;animation:progressMove 1.5s ease-in-out infinite;border-radius:10px;transition:width .3s ease}@keyframes progressMove{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.loading-messages{font-size:14px;color:var(--text-muted);margin-top:15px;min-height:20px;animation:fadeIn .5s ease}.recording-timer{position:relative;width:100px;height:100px;margin:20px auto}.timer-circle{transform:rotate(-90deg)}.timer-circle-bg{fill:none;stroke:#d4af3733;stroke-width:8}.timer-circle-progress{fill:none;stroke:var(--accent-gold);stroke-width:8;stroke-dasharray:283;stroke-dashoffset:283;transition:stroke-dashoffset 1s linear;filter:drop-shadow(0 0 10px rgba(212,175,55,.6))}.timer-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:24px;font-weight:700;color:var(--accent-gold)}.fade-in{animation:fadeIn .8s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px) translateZ(0)}to{opacity:1;transform:translateY(0) translateZ(0)}}@media (max-width: 768px){.container{padding:15px}.card{padding:30px 20px;margin:10px 0}.title{font-size:36px;margin-bottom:5px}.subtitle{font-size:14px}.mic-wrap{height:160px;margin:30px auto}.mic-circle{width:140px;height:140px;font-size:50px}.pulse-ring{width:140px;height:140px}@keyframes pulse-ring-anim{0%{width:140px;height:140px;opacity:1}to{width:240px;height:240px;opacity:0}}.dream-input{padding:15px;font-size:15px;min-height:150px}.mode-tabs{gap:8px;margin:20px 0}.tab-btn{padding:8px 16px;font-size:13px;flex:1;text-align:center}.btn{width:100%;padding:12px 20px;font-size:14px;margin-top:15px}.loading-messages{font-size:12px;min-height:40px}}@media (max-width: 480px){.title{font-size:28px}.mic-circle{width:120px;height:120px;font-size:40px}.pulse-ring{width:120px;height:120px}@keyframes pulse-ring-anim{0%{width:120px;height:120px;opacity:1}to{width:200px;height:200px;opacity:0}}}