@import "https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&family=Orbitron:wght@400;600;800;900&family=Space+Grotesk:wght@300;400;500;600;700&display=swap";:root{--bg-space:#07080e;--bg-card:#0d101ca6;--bg-card-hover:#161b2ed9;--border-glow:#bf5aff26;--neon-purple:#bf5aff;--neon-purple-glow:#bf5aff73;--neon-blue:#0a84ff;--neon-blue-glow:#0a84ff73;--neon-cyan:#5ac8fa;--neon-cyan-glow:#5ac8fa73;--neon-pink:#ff375f;--neon-pink-glow:#ff375f73;--neon-green:#30d158;--neon-green-glow:#30d15873;--text-primary:#f5f5f7;--text-secondary:#8e8e93;--text-muted:#48484a;--font-sans:"Space Grotesk", "Cairo", sans-serif;--font-tech:"Orbitron", "Cairo", sans-serif;--transition-smooth:all .4s cubic-bezier(.16, 1, .3, 1);--transition-bounce:all .6s cubic-bezier(.34, 1.56, .64, 1);box-sizing:border-box}[data-era=retro]{--bg-space:#bfbfbf;--bg-card:#e0e0e0;--bg-card-hover:#fff;--border-glow:gray;--text-primary:#000;--text-secondary:navy;--text-muted:gray;--neon-purple:#00f;--neon-blue:teal;--neon-cyan:#f0f;--neon-pink:red;--neon-green:#0f0;font-family:MS Sans Serif,Courier New,monospace!important}[data-era=web2]{--bg-space:#f0f2f5;--bg-card:#fff;--bg-card-hover:#f8f9fa;--border-glow:#0000000d;--text-primary:#1c1e21;--text-secondary:#606770;--text-muted:#bcc0c4;--neon-purple:#1877f2;--neon-blue:#0084ff;--neon-cyan:#54b4d3;--neon-pink:#e1306c;--neon-green:#42b72a;box-shadow:0 1px 3px #0000001a}*,:before,:after{box-sizing:inherit}body{background-color:var(--bg-space);color:var(--text-primary);font-family:var(--font-sans);direction:rtl;margin:0;padding:0;transition:background-color .8s,color .8s;overflow-x:hidden}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-space)}::-webkit-scrollbar-thumb{background:var(--border-glow);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--neon-purple)}.background-canvas{z-index:-2;pointer-events:none;opacity:.6;width:100vw;height:100vh;position:fixed;top:0;left:0}.grid-overlay{z-index:-1;pointer-events:none;background-image:linear-gradient(#ffffff04 1px,#0000 1px),linear-gradient(90deg,#ffffff04 1px,#0000 1px);background-position:50%;background-size:40px 40px;width:100vw;height:100vh;position:fixed;top:0;left:0}.glass-panel{background:var(--bg-card);-webkit-backdrop-filter:blur(16px);transition:var(--transition-smooth);border:1px solid #ffffff0d;border-radius:16px;box-shadow:0 8px 32px #0000004d}.glass-panel:hover{background:var(--bg-card-hover);border-color:#ffffff1a}.hologram-border{position:relative}.hologram-border:after{content:"";border-radius:inherit;background:linear-gradient(135deg, var(--neon-purple), var(--neon-blue), transparent, var(--neon-cyan));-webkit-mask-composite:xor;pointer-events:none;opacity:.3;transition:var(--transition-smooth);padding:1px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.hologram-border:hover:after{opacity:.8;filter:drop-shadow(0 0 4px var(--neon-purple))}.glitch-text{font-family:var(--font-tech);color:var(--text-primary);text-shadow:0 0 10px #ffffff1a;position:relative}.glitch-text:before,.glitch-text:after{content:attr(data-text);background:0 0;width:100%;height:100%;position:absolute;top:0;left:0}.glitch-text:before{text-shadow:-2px 0 var(--neon-pink);clip:rect(44px, 450px, 56px, 0);animation:5s linear infinite alternate-reverse glitch-anim;left:2px}.glitch-text:after{text-shadow:-2px 0 var(--neon-blue);clip:rect(85px, 450px, 140px, 0);animation:5s linear infinite alternate-reverse glitch-anim2;left:-2px}.floating{animation:6s ease-in-out infinite float}.floating-delayed{animation:6s ease-in-out 3s infinite float}.cyber-scanner{position:relative;overflow:hidden}.cyber-scanner:after{content:"";background:linear-gradient(90deg, transparent, var(--neon-purple), transparent);pointer-events:none;width:100%;height:4px;animation:4s linear infinite scan;position:absolute;top:0;left:0}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-12px)}to{transform:translateY(0)}}@keyframes scan{0%{top:0%}50%{top:100%}to{top:0%}}@keyframes glitch-anim{0%{clip:rect(15px, 9999px, 66px, 0)}10%{clip:rect(34px, 9999px, 55px, 0)}20%{clip:rect(70px, 9999px, 105px, 0)}30%{clip:rect(12px, 9999px, 85px, 0)}40%{clip:rect(98px, 9999px, 150px, 0)}50%{clip:rect(5px, 9999px, 40px, 0)}60%{clip:rect(110px, 9999px, 125px, 0)}70%{clip:rect(62px, 9999px, 95px, 0)}80%{clip:rect(44px, 9999px, 75px, 0)}90%{clip:rect(80px, 9999px, 115px, 0)}to{clip:rect(20px, 9999px, 50px, 0)}}@keyframes glitch-anim2{0%{clip:rect(65px, 9999px, 110px, 0)}10%{clip:rect(85px, 9999px, 5px, 0)}20%{clip:rect(10px, 9999px, 80px, 0)}30%{clip:rect(95px, 9999px, 130px, 0)}40%{clip:rect(35px, 9999px, 75px, 0)}50%{clip:rect(120px, 9999px, 140px, 0)}60%{clip:rect(45px, 9999px, 90px, 0)}70%{clip:rect(5px, 9999px, 60px, 0)}80%{clip:rect(80px, 9999px, 115px, 0)}90%{clip:rect(30px, 9999px, 55px, 0)}to{clip:rect(115px, 9999px, 15px, 0)}}.neon-button{color:var(--text-primary);border:1px solid var(--neon-purple);font-family:var(--font-tech);letter-spacing:1px;cursor:pointer;transition:var(--transition-smooth);background:0 0;border-radius:8px;padding:10px 24px;font-weight:600;position:relative;overflow:hidden;box-shadow:0 0 10px #bf5aff1a}.neon-button:before{content:"";background:linear-gradient(90deg,#0000,#fff3,#0000);width:100%;height:100%;transition:all .5s;position:absolute;top:0;left:-100%}.neon-button:hover:before{left:100%}.neon-button:hover{background:var(--neon-purple);box-shadow:0 0 20px var(--neon-purple-glow);text-shadow:0 0 5px #fff;transform:translateY(-2px)}.neon-button-blue{border-color:var(--neon-blue);box-shadow:0 0 10px #0a84ff1a}.neon-button-blue:hover{background:var(--neon-blue);box-shadow:0 0 20px var(--neon-blue-glow)}.neon-button-pink{border-color:var(--neon-pink);box-shadow:0 0 10px #ff375f1a}.neon-button-pink:hover{background:var(--neon-pink);box-shadow:0 0 20px var(--neon-pink-glow)}.cyber-input{border:1px solid var(--border-glow);color:var(--text-primary);font-family:var(--font-sans);transition:var(--transition-smooth);background:#0a0b14cc;border-radius:8px;padding:12px 16px}.cyber-input:focus{border-color:var(--neon-purple);outline:none;box-shadow:0 0 15px #bf5aff33}.dashboard-link{color:var(--text-secondary);transition:var(--transition-smooth);border-radius:8px;align-items:center;gap:12px;padding:14px 20px;font-weight:500;text-decoration:none;display:flex}.dashboard-link:hover,.dashboard-link.active{color:var(--text-primary);box-shadow:inset 4px 0 0 var(--neon-purple);background:#ffffff08}[data-era=retro] .glass-panel{box-shadow:none;background:silver;border:3px solid gray;border-color:#fff gray gray #fff;border-radius:0}[data-era=retro] .neon-button{color:#000;box-shadow:none;background:silver;border:2px solid gray;border-color:#fff gray gray #fff;border-radius:0;font-family:monospace}[data-era=retro] .neon-button:hover{text-shadow:none;background:silver;border-color:gray #fff #fff gray;transform:none}[data-era=retro] .cyber-input{color:#000;background:#fff;border:2px inset gray;border-radius:0}[data-era=web2] .glass-panel{background:#fff;border:1px solid #dcdcdc;border-radius:12px;box-shadow:0 4px 20px #00000014}[data-era=web2] .neon-button{color:#fff;text-shadow:0 1px 1px #0003;background:linear-gradient(#4f94e7,#1877f2);border:1px solid #1461c8;border-radius:6px;font-family:inherit;box-shadow:0 2px 4px #0000001a}[data-era=web2] .neon-button:hover{background:linear-gradient(#1877f2,#1153ab);transform:none;box-shadow:0 4px 8px #00000026}[data-era=web2] .cyber-input{color:#1c1e21;background:#fff;border:1px solid #ccd0d5;border-radius:6px}
