:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#000,#0a0a0a,#000);color:#fff;min-height:100vh;line-height:1.6;display:flex;justify-content:center;align-items:center;position:relative;overflow-x:hidden}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 80%,rgba(220,38,38,.08) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(220,38,38,.05) 0%,transparent 50%),radial-gradient(circle at 40% 40%,rgba(220,38,38,.06) 0%,transparent 50%);animation:backgroundShift 15s ease-in-out infinite;z-index:-1}body:after{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 10% 90%,rgba(220,38,38,.03) 0%,transparent 40%),radial-gradient(circle at 90% 10%,rgba(220,38,38,.02) 0%,transparent 40%),radial-gradient(circle at 50% 50%,rgba(220,38,38,.01) 0%,transparent 60%);animation:backgroundPulse 12s ease-in-out infinite reverse;z-index:-1}@keyframes backgroundShift{0%,to{transform:translate(0) scale(1) rotate(0);opacity:1}25%{transform:translate(-20px,-20px) scale(1.2) rotate(2deg);opacity:.7}50%{transform:translate(20px,-10px) scale(.8) rotate(-2deg);opacity:1.3}75%{transform:translate(-10px,20px) scale(1.1) rotate(1deg);opacity:.8}}@keyframes backgroundPulse{0%,to{transform:scale(1) translate(0);opacity:.6}33%{transform:scale(1.3) translate(30px,-30px);opacity:1}66%{transform:scale(.7) translate(-30px,30px);opacity:.4}}.container{max-width:800px;width:100%;padding:40px 20px;text-align:center;animation:fadeInUp .6s ease-out}nav{background:#000000e6;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:20px;padding:20px 30px;margin-bottom:40px;display:flex;gap:15px;justify-content:center;align-items:center;box-shadow:0 8px 32px #dc262626,inset 0 1px #ffffff0d;border:1px solid rgba(255,255,255,.05);animation:slideInDown .5s ease-out;height:80px;width:100%;max-width:600px;margin-left:auto;margin-right:auto;flex-shrink:0}nav button{background:#000c;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#ccc;border:1px solid rgba(255,255,255,.1);padding:0 24px;border-radius:15px;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);font-family:inherit;position:relative;overflow:hidden;box-shadow:0 4px 15px #0000004d;width:140px;height:45px;display:flex;align-items:center;justify-content:center;flex-shrink:0;white-space:nowrap}nav button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(220,38,38,.3),transparent);transition:left .5s}nav button:hover:before{left:100%}nav button:hover{background:#dc2626cc;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border-color:#dc262680;color:#fff;transform:translateY(-2px) scale(1.05);box-shadow:0 8px 25px #dc26264d,inset 0 1px #fff3}nav button:active{transform:translateY(0) scale(1)}h2{color:#fff;font-size:2.5rem;text-align:center;margin-bottom:40px;font-weight:700;letter-spacing:-.02em;animation:fadeInUp .8s ease-out .2s both;text-shadow:0 2px 10px rgba(0,0,0,.8);height:60px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.search-container{background:#000c;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:20px;padding:30px;margin-bottom:32px;box-shadow:0 8px 32px #dc26261a,inset 0 1px #ffffff0d;border:1px solid rgba(255,255,255,.05);max-width:500px;margin-left:auto;margin-right:auto;animation:fadeInUp .8s ease-out .4s both;height:100px;display:flex;align-items:center;justify-content:center}.search-input{width:100%;padding:18px 24px;border:2px solid rgba(255,255,255,.1);border-radius:15px;background:#000c;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-size:16px;transition:all .3s cubic-bezier(.4,0,.2,1);font-family:inherit;text-align:center;box-shadow:inset 0 2px 4px #0000004d;height:60px}.search-input:focus{outline:none;border-color:#dc262699;box-shadow:0 0 0 3px #dc262633,inset 0 2px 4px #0000004d;transform:scale(1.02);background:#000000e6}.search-input::placeholder{color:#fff6;transition:color .3s ease}.search-input:focus::placeholder{color:#fff9}.heroes-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:25px;margin-top:20px;max-width:600px;margin-left:auto;margin-right:auto;animation:fadeInUp .8s ease-out .6s both;min-height:200px;position:relative}.hero-card{background:linear-gradient(135deg,#000000d9,#0a0a0ae6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:2px solid rgba(255,255,255,.05);border-radius:24px;padding:30px;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 32px #dc262614,0 4px 12px #0000004d,inset 0 1px #ffffff0d;text-align:center;position:relative;overflow:hidden;min-height:220px;display:flex;flex-direction:column;justify-content:center;animation:fadeIn .5s ease-out}.hero-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#dc2626,#ef4444,#dc2626);background-size:200% 100%;transform:scaleX(0);transition:transform .4s ease;animation:shimmer 2s linear infinite}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.hero-card:after{content:"";position:absolute;top:50%;left:50%;width:300px;height:300px;background:radial-gradient(circle,rgba(220,38,38,.15) 0%,transparent 70%);transform:translate(-50%,-50%) scale(0);transition:transform .6s ease;pointer-events:none;z-index:0}.hero-card:hover:before{transform:scaleX(1)}.hero-card:hover:after{transform:translate(-50%,-50%) scale(1)}.hero-card:hover{border-color:#dc262666;box-shadow:0 16px 48px #dc262633,0 8px 20px #0006,inset 0 1px #ffffff1a;transform:translateY(-8px) scale(1.03);background:linear-gradient(135deg,#0a0a0af2,#141414fa)}.hero-card>*{position:relative;z-index:1}.hero-adding{animation:heroAddAnimation .8s cubic-bezier(.34,1.56,.64,1)}.hero-removing{animation:heroRemoveAnimation .4s cubic-bezier(.55,.085,.68,.53) forwards}@keyframes heroAddAnimation{0%{opacity:0;transform:scale(.3) translateY(-50px) rotate(-10deg);filter:blur(10px)}50%{opacity:.8;transform:scale(1.1) translateY(10px) rotate(2deg);filter:blur(2px)}75%{transform:scale(.95) translateY(-5px) rotate(-1deg);filter:blur(0px)}to{opacity:1;transform:scale(1) translateY(0) rotate(0);filter:blur(0px)}}@keyframes heroRemoveAnimation{0%{opacity:1;transform:scale(1) translateY(0) rotate(0);filter:blur(0px)}50%{opacity:.5;transform:scale(1.05) translateY(-10px) rotate(3deg);filter:blur(2px)}to{opacity:0;transform:scale(.3) translateY(20px) rotate(-10deg);filter:blur(10px)}}.hero-image-container{margin-bottom:20px;display:flex;justify-content:center;align-items:center;min-height:90px;position:relative}.hero-image{width:90px;height:90px;border-radius:18px;object-fit:cover;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 10px 30px #0009,0 4px 12px #dc26261a,inset 0 1px #ffffff14;border:3px solid rgba(255,255,255,.08);background:linear-gradient(135deg,#dc262614,#b91c1c14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);position:relative}.hero-image:before{content:"";position:absolute;inset:-3px;border-radius:18px;padding:3px;background:linear-gradient(135deg,#dc26264d,#b91c1c4d);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s ease}.hero-card:hover .hero-image{transform:scale(1.15) rotate(3deg);box-shadow:0 15px 40px #dc26264d,0 6px 16px #00000080,inset 0 1px #ffffff26;border-color:#dc262666}.hero-card:hover .hero-image:before{opacity:1}.hero-name{font-size:1.25rem;font-weight:600;color:#fff;margin-bottom:8px;transition:color .3s ease;text-shadow:0 1px 3px rgba(0,0,0,.8);min-height:30px;display:flex;align-items:center;justify-content:center}.hero-card:hover .hero-name{color:#dc2626}.hero-id{font-size:.875rem;color:#ffffff80;font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,monospace;transition:color .3s ease;min-height:20px;display:flex;align-items:center;justify-content:center}.hero-card:hover .hero-id{color:#ffffffb3}.admin-container{background:linear-gradient(135deg,#000000eb,#0a0a0af2);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border:2px solid rgba(255,255,255,.06);border-radius:28px;padding:48px;box-shadow:0 12px 48px #dc26261f,0 6px 24px #0006,inset 0 1px #ffffff14;max-width:900px;margin:0 auto;animation:fadeInUp .8s ease-out .2s both;min-height:400px;position:relative;overflow:hidden}.admin-container:before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,#dc2626,#ef4444,#dc2626);background-size:200% 100%;animation:shimmer 3s linear infinite}.admin-search-container{margin-bottom:24px;animation:fadeInUp .6s ease-out .4s both}.admin-search{max-width:100%;margin:0 auto;background:#0009;border:2px solid rgba(255,255,255,.08)}.admin-search:focus{background:#000c;border-color:#dc262680}.admin-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.05);gap:50px}.admin-header h2{margin:0;font-size:2rem;color:#fff;display:flex;align-items:center;height:100%}.btn.btn-logout{background:#dc26264d!important;border:1px solid rgba(220,38,38,.4)!important;padding:0 12px!important;font-size:12px!important;min-width:auto!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:#fff!important;font-weight:500!important;border-radius:8px!important;transition:all .3s ease!important;box-shadow:none!important}.btn.btn-logout:hover{background:#dc262680!important;border-color:#dc262699!important;color:#fff!important;transform:translateY(-1px)!important;box-shadow:none!important}.add-hero-section{background:linear-gradient(135deg,#000000bf,#0a0a0acc);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:2px solid rgba(255,255,255,.06);border-radius:20px;padding:32px;margin-bottom:36px;animation:fadeInUp .8s ease-out .4s both;position:relative;z-index:1;box-shadow:0 8px 32px #dc262614,inset 0 1px #ffffff0f}.add-hero-section:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,rgba(220,38,38,.5),transparent);border-radius:20px 20px 0 0}.add-hero-section h3{color:#fff;font-size:1.4rem;margin:0 0 24px;font-weight:700;text-align:center;letter-spacing:-.02em;text-shadow:0 2px 8px rgba(0,0,0,.6)}.add-hero-form{display:flex;flex-direction:column;gap:18px;align-items:center;max-width:550px;margin:0 auto;animation:fadeInUp .8s ease-out .6s both;min-height:120px;position:relative;z-index:2}.btn-add{background:linear-gradient(135deg,#22c55ed9,#16a34ad9);min-width:220px;height:54px;font-weight:600;display:flex;align-items:center;justify-content:center;border:2px solid rgba(34,197,94,.3);box-shadow:0 8px 25px #22c55e33,inset 0 1px #ffffff26;position:relative;overflow:hidden}.btn-add:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.btn-add:hover:before{left:100%}.btn-add:hover{background:linear-gradient(135deg,#16a34af2,#15803df2);border-color:#22c55e80;box-shadow:0 16px 40px #22c55e59,0 8px 16px #0000004d,inset 0 1px #ffffff40;transform:translateY(-2px) scale(1.02)}.btn-add:disabled{background:#3339;border-color:#ffffff0d;cursor:not-allowed;transform:none;box-shadow:none}.btn-add:disabled:before{display:none}.banned-heroes-section{animation:fadeInUp .8s ease-out .8s both;position:relative;z-index:1;background:linear-gradient(135deg,#000000a6,#0a0a0ab3);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:2px solid rgba(255,255,255,.06);border-radius:20px;padding:32px;box-shadow:0 8px 32px #dc262614,inset 0 1px #ffffff0f}.banned-heroes-section:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,rgba(220,38,38,.5),transparent);border-radius:20px 20px 0 0}.banned-heroes-section h3{color:#fff;font-size:1.4rem;margin:0 0 24px;font-weight:700;text-align:center;position:relative;z-index:1;letter-spacing:-.02em;text-shadow:0 2px 8px rgba(0,0,0,.6)}.admin-hero-card{position:relative;min-height:220px;padding:25px}.admin-hero-card .hero-name-en{font-size:.875rem;color:#ffffff80;margin-top:8px;text-align:center}.admin-hero-card .btn-danger{margin-top:18px;width:100%;height:42px;font-size:14px;font-weight:600;background:linear-gradient(135deg,#dc2626d9,#b91c1cd9);border:2px solid rgba(220,38,38,.4);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px #dc262633,inset 0 1px #ffffff26;position:relative;overflow:hidden}.admin-hero-card .btn-danger:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transition:left .4s}.admin-hero-card .btn-danger:hover:before{left:100%}.admin-hero-card .btn-danger:hover{background:linear-gradient(135deg,#b91c1cf2,#991b1bf2);border-color:#dc262699;transform:translateY(-2px);box-shadow:0 10px 30px #dc262659,0 4px 12px #0000004d,inset 0 1px #fff3}.empty-state{grid-column:1 / -1;text-align:center;padding:60px 20px;color:#fff6;font-size:16px;background:#00000080;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:15px;border:1px solid rgba(255,255,255,.03);animation:fadeInUp .8s ease-out 1s both}.empty-icon{font-size:3rem;margin-bottom:16px;opacity:.5}.empty-text{font-size:1.1rem;font-weight:500}.btn{background:linear-gradient(135deg,#dc2626d9,#b91c1cd9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;border:2px solid rgba(220,38,38,.3);padding:0 32px;border-radius:16px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);font-family:inherit;margin:0 auto;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:0 8px 25px #dc262640,inset 0 1px #ffffff26;min-width:160px;height:56px}.btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#ffffff26;border-radius:50%;transform:translate(-50%,-50%);transition:width .6s,height .6s}.btn:hover:before{width:300px;height:300px}.btn:hover{background:linear-gradient(135deg,#b91c1cf2,#991b1bf2);border-color:#dc262680;transform:translateY(-2px) scale(1.03);box-shadow:0 16px 40px #dc262659,0 8px 16px #0000004d,inset 0 1px #ffffff40}.btn:active{transform:translateY(0) scale(1)}.btn:disabled{background:#3339;border-color:#ffffff0d;cursor:not-allowed;transform:none;box-shadow:none}.btn:disabled:before{display:none}.btn-danger{background:linear-gradient(135deg,#dc2626d9,#b91c1cd9);border:2px solid rgba(220,38,38,.4);width:100%;height:46px}.btn-danger:hover{background:linear-gradient(135deg,#b91c1cf2,#991b1bf2);border-color:#dc262699;box-shadow:0 12px 35px #dc262659,0 6px 16px #0000004d,inset 0 1px #fff3}.login-form{display:flex;flex-direction:column;gap:20px;max-width:400px;margin:0 auto;animation:fadeInUp .8s ease-out .4s both;min-height:200px}.form-group{display:flex;flex-direction:column;gap:8px;text-align:center;animation:fadeInUp .8s ease-out .6s both;min-height:80px}.form-group label{font-weight:500;color:#fff;font-size:14px;transition:color .3s ease;text-shadow:0 1px 2px rgba(0,0,0,.8);min-height:20px;display:flex;align-items:center;justify-content:center}.form-group:focus-within label{color:#dc2626}.form-input{padding:18px 24px;border:2px solid rgba(255,255,255,.1);border-radius:15px;background:#000c;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-size:16px;transition:all .3s cubic-bezier(.4,0,.2,1);font-family:inherit;text-align:center;box-shadow:inset 0 2px 4px #0000004d;height:60px}.form-input:focus{outline:none;border-color:#dc262699;box-shadow:0 0 0 3px #dc262633,inset 0 2px 4px #0000004d;transform:scale(1.02);background:#000000e6}.error-message{background:#dc26261a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(220,38,38,.2);color:#fca5a5;padding:16px;border-radius:15px;margin-bottom:20px;font-weight:500;text-align:center;animation:shake .5s ease-in-out;box-shadow:0 4px 15px #dc262626;min-height:60px;display:flex;align-items:center;justify-content:center}.success-message{background:#22c55e1a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(34,197,94,.2);color:#86efac;padding:16px;border-radius:15px;margin-bottom:20px;font-weight:500;text-align:center;animation:bounceIn .6s ease-out;box-shadow:0 4px 15px #22c55e26;min-height:60px;display:flex;align-items:center;justify-content:center}.custom-select{position:relative;width:100%;z-index:9999}.custom-select-header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;border:2px solid rgba(255,255,255,.1);border-radius:15px;background:#000000f2;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);font-family:inherit;text-align:center;box-shadow:inset 0 2px 4px #0000004d;height:60px;min-height:60px;z-index:9999;position:relative;pointer-events:auto}.custom-select-header:hover{border-color:#dc26264d;background:#000000e6}.custom-select-header.focused{border-color:#dc262699;box-shadow:0 0 0 3px #dc262633,inset 0 2px 4px #0000004d}.custom-select-options{position:absolute;top:100%;left:0;right:0;background:#141414fa;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08);border-radius:15px;margin-top:8px;max-height:350px;overflow-y:auto;z-index:99999;box-shadow:0 8px 32px #000000b3,inset 0 1px #ffffff0d;animation:fadeInUp .3s ease-out;pointer-events:auto}.custom-select-search{position:sticky;top:0;padding:12px;background:#0f0f0ffa;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border-bottom:1px solid rgba(255,255,255,.05);z-index:100}.custom-select-search-input{width:100%;padding:12px 16px;border:2px solid rgba(255,255,255,.08);border-radius:12px;background:#000000b3;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-size:14px;transition:all .3s ease;font-family:inherit;box-shadow:inset 0 2px 4px #0000004d}.custom-select-search-input:focus{outline:none;border-color:#dc262680;box-shadow:0 0 0 3px #dc262626,inset 0 2px 4px #0000004d;background:#000000e6}.custom-select-search-input::placeholder{color:#fff6}@media (max-width: 600px){.custom-select-options{top:100px;min-width:220px}}.custom-select-option{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;transition:all .2s ease;border-bottom:1px solid rgba(255,255,255,.03);background:transparent;pointer-events:auto;z-index:10001}.custom-select-option:last-child{border-bottom:none}.custom-select-option:hover{background:#dc26261a}.custom-select-option.selected{background:#dc262633;color:#dc2626}.custom-select-option img{width:32px;height:32px;border-radius:6px;object-fit:cover;border:1px solid rgba(255,255,255,.05)}.custom-select-option-text{flex:1;font-size:14px;pointer-events:auto}.custom-select-arrow{transition:transform .3s ease;pointer-events:none}.custom-select.open .custom-select-arrow{transform:rotate(180deg)}select.form-input{appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 16px center;background-size:16px;padding-right:48px;width:100%;text-align:center;height:60px}select.form-input:disabled{opacity:.6;cursor:not-allowed}.loading{display:flex;justify-content:center;align-items:center;padding:60px 20px;color:#fff9;font-size:16px;text-align:center;animation:pulse 2s infinite;background:#000000b3;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:15px;border:1px solid rgba(255,255,255,.05);min-height:120px;width:100%;max-width:400px;margin:0 auto}.loading:after{content:"";width:20px;height:20px;border:2px solid rgba(255,255,255,.2);border-top:2px solid #dc2626;border-radius:50%;animation:spin 1s linear infinite;margin-left:12px}@media (max-width: 768px){.container{padding:20px 16px}nav{flex-direction:column;gap:8px;height:120px}nav button{width:100%;max-width:200px}.heroes-list{grid-template-columns:1fr}h2{font-size:2rem;height:50px}.admin-container{padding:20px;margin:0 10px}.admin-header{flex-direction:column;gap:15px;text-align:center}.admin-header h2{font-size:1.5rem}.add-hero-form{gap:12px}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.hero-card{animation:fadeIn .5s ease-out}@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)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#00000080;border-radius:4px}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#dc2626,#b91c1c);border-radius:4px;transition:background .3s ease}::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#b91c1c,#991b1b)}