*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,system-ui,sans-serif}li{list-style-type:none}#root{background:linear-gradient(-45deg,#0f0c29,#302b63,#24243e,#1a1a2e) 0 0/400% 400%;min-height:100vh;padding-top:1px;animation:15s infinite gradientShift}@keyframes gradientShift{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.container{flex-direction:column;gap:15px;padding:20px 50px 25px;display:flex}.container header{text-align:center;background:0 0;border-bottom:2px solid #fff3;justify-content:center;align-items:center;min-height:120px;padding:25px 0;display:flex;position:relative}.container header:after{content:"";background:linear-gradient(90deg,#667eea,#764ba2);width:0;height:2px;transition:width .5s;position:absolute;bottom:-2px;left:50%;transform:translate(-50%)}.container header:hover:after{width:60%}.header-content{flex-direction:column;gap:10px;display:flex}header p{background:linear-gradient(135deg,#fff 0%,#a8c0ff 100%);-webkit-text-fill-color:transparent;letter-spacing:-.5px;-webkit-background-clip:text;background-clip:text;font-weight:800}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.first-slogan{font-size:36px;font-weight:900;animation:.6s ease-out fadeInUp}.second-slogan,.movie-search,.list-search{font-size:18px;font-weight:500;animation:.6s ease-out .2s both fadeInUp}button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:12px;padding:12px 24px;font-size:15px;font-weight:600;transition:translate .3s,box-shadow .3s;animation:.6s ease-out .4s both fadeInUp;box-shadow:0 4px 14px #667eea66}button:hover{translate:0 -2px;box-shadow:0 8px 25px #667eea99}button:active{transform:translateY(0)}.fav-btn{position:absolute;top:45px;right:60px}.return-btn{position:absolute;top:50px;left:60px}.two-btns .return-btn,.two-btns .fav-btn{top:37px}.search-section{gap:15px;padding-bottom:20px;display:flex}.movie-search,.list-search{text-align:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fffc;border:1px solid #ffffff4d;border-radius:20px;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:20px;width:100%;padding:10px;transition:translate .3s,box-shadow .3s;display:flex}.movie-search:hover,.list-search:hover{translate:0 -5px;box-shadow:0 8px 25px #667eea99}form h3{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 4px #667eea4d);-webkit-background-clip:text;background-clip:text;font-size:22px;font-weight:800}.search-info{color:#64748b;align-items:center;gap:4px;margin:auto;font-size:16px;display:flex}.search-info svg{color:#ff0;width:25px;height:25px}.search-tabs{width:100%;height:55px;display:flex}.tab-btn{color:#64748b;background:#6c84ed33;border-radius:10px;flex:1;transition:all .3s}.tab-btn.active{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.tab-btn:hover:not(.active){color:#667eea;background:#667eea33}.input-spacer{height:86.08px}.input-group,.input-title{flex-direction:column;gap:7px;width:100%;display:flex}.input-group label{color:#475569;text-transform:uppercase;font-size:14px;font-weight:600}.input-wrapper input{background:#ffffffe6;border:2px solid #667eea33;border-radius:12px;outline:none;width:100%;padding:20px 16px;font-size:15px;transition:all .3s}.input-wrapper input:focus{border-color:#798ee9;box-shadow:0 0 0 4px #667eea1a}.input-wrapper input::placeholder{color:#94a3b8}.input-wrapper input.error{background:#ef44440d;border-color:#ef4444}.submit-btn{width:100%;margin-top:10px;padding:16px 28px;font-size:16px}.submit-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.error-message{color:#dc2626;background:linear-gradient(135deg,#fee2e2 0%,#fecaca 100%);border-left:6px solid #ef4444;border-radius:12px;justify-content:space-between;align-items:center;width:100%;max-width:800px;margin:auto;padding:20px;font-size:16px;font-weight:500;animation:.3s fadeInUp;display:flex}.error-message button{color:#dc2626;box-shadow:none;background:0 0;border-radius:6px;padding:3px 8px;font-size:20px;transition:background .2s;animation:none}.error-message button:hover{background:#dc26261a;translate:none}.empty-fav{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);text-align:center;color:#fff;text-shadow:0 0 10px #667eea80;border:1px solid #ffffff4d;border-radius:30px;width:100%;max-width:550px;margin:50px auto;padding:50px 35px;font-size:20px;font-weight:600;animation:.6s ease-out fadeInUp,2s ease-in-out infinite glow;box-shadow:0 8px 32px #0000001a}.empty-fav:before{content:"🎬";filter:drop-shadow(0 0 15px #738dff99);margin-bottom:20px;font-size:70px;animation:1.5s ease-in-out infinite pulse;display:block}@keyframes glow{0%,to{border-color:#ffffff4d;box-shadow:0 8px 32px #0000001a}50%{border-color:#667eea99;box-shadow:0 8px 40px #667eea66}}@keyframes pulse{0%,to{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}.favorite-list ul,.films-list ul{flex-wrap:wrap;justify-content:center;gap:25px;display:flex}.list-movie{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:.5s backwards fadeInUp;animation-delay:var(--animation-delay,0s);background:#ffffffe6;border:1px solid #ffffff4d;border-radius:20px;flex-direction:column;gap:12px;width:296px;padding:20px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative;box-shadow:0 4px 14px #0000001a}.list-movie:hover{border-color:#667eea66;transform:translateY(-8px);box-shadow:0 12px 40px #667eea4d}.list-movie-img{border-radius:14px;width:100%;height:380px;transition:transform .3s;box-shadow:0 4px 12px #00000026}.list-movie:hover .list-movie-img{transform:scale(1.03)}.list-movie-title{color:#1a1a2e;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:52px;font-size:20px;font-weight:700;line-height:1.3;display:-webkit-box;overflow:hidden}.list-movie-director{color:#64748b;font-size:15px}.list-movie-year{color:#764ba2;font-size:15px;font-weight:600}.list-movie-imdb{background:linear-gradient(135deg,#f59e0b 0%,#ea580c 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:18px;font-weight:700}.remove-fav-btn,.add-fav-btn{background:#ef4444e6;justify-content:center;align-items:center;width:42px;height:42px;padding:0;transition:all .3s;animation:none;display:flex;position:absolute;top:15px;right:15px;transform:scale(.9);box-shadow:0 4px 14px #ef444466}.remove-fav-btn svg{width:22px;height:22px}.list-movie:hover .remove-fav-btn,.film-card:hover .add-fav-btn{transform:scale(1.1)}.list-movie .remove-fav-btn:hover,.film-card .add-fav-btn:hover{background:#dc2626;transform:scale(1.15)rotate(5deg);box-shadow:0 8px 25px #ef4444cc}.list-movie .remove-fav-btn:active,.film-card .add-fav-btn:active{transform:scale(.95)}.film-not-found{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffffe6;border-radius:20px;flex-direction:column;justify-content:center;align-items:center;gap:12px;width:400px;height:150px;margin:50px auto;transition:all .3s cubic-bezier(.4,0,.2,1);animation:.5s backwards fadeInUp;display:flex;box-shadow:0 4px 14px #0000001a}.film-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffffe6;border:1px solid #ffffff4d;border-radius:30px;gap:40px;max-width:1000px;margin:0 auto;padding:40px;transition:all .3s;animation:.6s ease-out fadeInUp;display:flex;position:relative;box-shadow:0 8px 32px #00000026}.film-card:hover{transform:scale(1.02);box-shadow:0 12px 40px #667eea66}.single-movie-img{border-radius:20px;max-width:330px;height:480px;transition:all .4s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 25px #0003}.single-movie-img:hover{transform:scale(1.02);box-shadow:0 12px 40px #667eea66}.single-movie-title{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:20px;font-size:32px;font-weight:800;line-height:1.2;animation:.6s ease-out .1s both fadeInUp}.single-movie-year,.single-movie-genre,.single-movie-runtime,.single-movie-imdb,.single-movie-director,.single-movie-actors{color:#475569;animation:.6s ease-out both fadeInUp;animation-delay:var(--animation-delay,0s);margin-bottom:15px;font-size:16px;line-height:1.5}.single-movie-year{color:#764ba2;font-size:18px;font-weight:700}.single-movie-imdb{background:linear-gradient(135deg,#f59e0b 0%,#ea580c 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:20px;font-weight:800}.single-movie-director,.single-movie-actors{background:#667eea14;border-left:3px solid #667eea66;border-radius:12px;padding:12px 16px}.single-movie-director{color:#1a1a2e;font-weight:600}.add-fav-btn{width:56px;height:56px;top:30px;right:30px}.add-fav-btn svg{width:32px;height:32px}.list-movie-type{text-transform:uppercase;color:#234678;font-size:14px;font-weight:700}.main-section.notfound{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:30px;flex-direction:column;justify-content:center;align-items:center;min-height:60vh;padding:60px 20px;animation:.6s ease-out fadeInUp;display:flex;position:relative;overflow:hidden;box-shadow:0 8px 32px #0003}.main-section.notfound:before{content:"";pointer-events:none;background:radial-gradient(circle at 20% 30%,#667eea26 0%,#0000 40%),radial-gradient(circle at 80% 70%,#764ba21a 0%,#0000 40%);width:200%;height:200%;animation:20s ease-in-out infinite float;position:absolute;top:-50%;left:-50%}.main-section.notfound h1{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);-webkit-text-fill-color:transparent;text-shadow:0 0 40px #667eea4d;-webkit-background-clip:text;background-clip:text;margin:0 0 20px;font-size:48px;font-weight:800;line-height:1.2;animation:.6s ease-out .2s both fadeInUp}.main-section.notfound p{color:#94a3b8;max-width:400px;margin:0 0 30px;font-size:18px;animation:.6s ease-out .3s both fadeInUp}.main-section.notfound svg{filter:drop-shadow(0 0 20px #667eea66);animation:.6s ease-out .4s both fadeInUp,2s ease-in-out infinite searchPulse}.fav-text{background:linear-gradient(135deg,#f5e6a4 0%,#d4af37 25%,#f5e6a4 50%,#b89d2c 75%,#f5e6a4 100%) 0 0/200% 200%;-webkit-text-fill-color:transparent;text-shadow:0 0 20px #d4af3766;letter-spacing:-.5px;-webkit-background-clip:text;background-clip:text;font-size:30px;font-weight:800;line-height:1.2;animation:3s ease-in-out infinite goldShine,.6s ease-out fadeInUp}@keyframes goldShine{0%,to{text-shadow:0 0 20px #d4af3766;background-position:0%}50%{text-shadow:0 0 40px #d4af37b3;background-position:100%}}@keyframes float{0%,to{transform:translate(0)rotate(0)}33%{transform:translate(30px,-30px)rotate(120deg)}66%{transform:translate(-20px,20px)rotate(240deg)}}@keyframes searchPulse{0%,to{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}.hint-popup{z-index:1000;animation:.3s slideInRight;position:fixed;bottom:20px;right:20px}.hint-content{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:16px;max-width:350px;padding:20px;box-shadow:0 10px 25px #0003}.hint-content span{text-align:center;margin-bottom:10px;font-size:40px;display:block}.hint-content p{margin-bottom:10px;font-size:15px}.hint-example{opacity:.9;background:#fff3;border-radius:8px;padding:8px;font-family:monospace;font-size:12px}.hint-content button{color:#667eea;cursor:pointer;width:100%;box-shadow:none;background:#fff;border:none;border-radius:8px;margin-top:10px;padding:8px 16px;font-weight:600;animation:none}@keyframes slideInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@media (width<=1450px){.first-slogan{font-size:33px}.fav-btn{padding:12px 14px;right:15px}.fav-text{font-size:29px}.return-btn{padding:12px 14px;left:15px}.list-movie{width:320px}.remove-fav-btn,.add-fav-btn{width:48px;height:48px;transform:none}.remove-fav-btn svg,.add-fav-btn svg{width:28px;height:28px}}@media (width<=1250px){.container header{flex-direction:column;padding:20px 0}.two-btns{gap:20px;display:flex}.fav-btn,.return-btn{margin-top:15px;position:static}.first-slogan{font-size:36px}.fav-btn{padding:12px 14px;right:10px}}@media (width<=1150px){.favorite-list ul,.films-list ul{gap:15px}.list-movie{width:300px}}@media (width<=1050px){.search-section{margin:0 15px}.list-movie{width:320px}.container{padding:20px 0}.container header{border-radius:0}.favorite-list ul,.films-list ul{gap:25px}.remove-fav-btn,.add-fav-btn{width:52px;height:52px}.remove-fav-btn svg,.add-fav-btn svg{width:30px;height:30px}.list-movie-title{min-height:57.19px;font-size:22px}.list-movie-year,.list-movie-type{font-size:17px}.film-card{width:95%}.main-section.notfound{width:95%;margin:auto}.main-section.notfound h1{font-size:44px}}@media (width<=800px){.search-section{flex-direction:column}.first-slogan{font-size:33px}.second-slogan{font-size:17px}.fav-text{font-size:28px}.error-message{width:90%}.movie-search,.list-search{width:95%;margin:auto}.film-card{flex-direction:column;width:80%}.film-card .add-fav-btn{border-radius:17px;width:63px;height:63px}.film-card .add-fav-btn svg{width:37px;height:37px}.single-movie-img{width:350px;max-width:none;margin:auto}.main-section.notfound h1{font-size:40px}}@media (width<=670px){.list-movie{width:350px}.remove-fav-btn,.add-fav-btn{width:55px;height:55px}.remove-fav-btn svg,.add-fav-btn svg{width:32px;height:32px}.remove-fav-btn{padding:2px 0 0 1px}.list-movie-title{font-size:25px}.list-movie-year{font-size:17px}.list-movie-director{font-size:16px}.list-movie-imdb{font-size:19px}.list-movie-type{font-size:18px}.main-section.notfound p{font-size:20px}}@media (width<=550px){.first-slogan{font-size:31px}.fav-text{font-size:28px}.single-movie-img{width:85%;height:380px}.film-card{gap:20px;padding:20px}.single-movie-actors{margin-bottom:0}.film-card .add-fav-btn{border-radius:17px;width:57px;height:57px}.film-card .add-fav-btn svg{width:34px;height:34px}.empty-fav:before{font-size:65px}.two-btns{gap:10px}.main-section.notfound h1{font-size:36px}.main-section.notfound p{font-size:16px}.main-section.notfound svg{width:70px;height:70px}}@media (width<=450px){.container{padding:20px 0 35px}.container header{padding:15px 0}.hint-content p{font-size:14px}}