*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{color:#f9fafb;-webkit-font-smoothing:antialiased;background-color:#0f1117;font-family:Inter,sans-serif;line-height:1.5}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;color:#fff;background:0 0;border:none;transition:opacity .2s}button:hover{transition:opacity .2s}input{font:inherit}img{max-width:100%;display:block}h1,h2,h3,h4,h5,h6{font-weight:inherit}button:focus-visible,input:focus-visible{outline-offset:3px;outline:2px solid #6366f1}.header{background-image:url(/hero-image.png);border-bottom:1px solid #374151;grid-template-rows:repeat(5,1fr);grid-template-columns:1fr;height:160px;padding:.6rem;display:grid;position:relative;box-shadow:0 4px 12px #0009}.header-auth{justify-content:space-between;align-items:center;gap:10px;display:flex}.header-content{grid-row:4;justify-content:space-between;align-items:center;display:flex}.username,.header-auth-btn{align-items:center;gap:4px;display:flex}.header-auth-btn{opacity:.9;background-color:#4b4b4b;border-radius:.4em;padding:.3em;font-size:.9rem}.header-link{font-size:14px;text-decoration:underline}.header-link:hover{opacity:.8}.movie-article{border-bottom:1px solid #2c2c2c;border-radius:0 0 8px 8px;width:330px;padding:.8rem .3rem}.poster,.poster-placeholder{border-radius:5px;width:100%}.poster-placeholder{opacity:.8;background-color:#161922;flex-direction:column;justify-content:center;align-items:center;gap:20px;height:440px;display:flex}.movie-header{align-items:center;gap:10px;width:100%;margin-top:.6rem;display:flex}.movie-title{white-space:nowrap;text-overflow:ellipsis;min-width:0;font-size:1.4rem;overflow:hidden}.movie-header>div{flex-shrink:0;align-items:center;gap:3px;display:flex}.rating-icon{color:#fec654;font-size:.75rem}.movie-rating{font-size:.76rem;font-weight:400}.movie-specs{opacity:.9;justify-content:space-between;align-items:center;font-size:.82rem;font-weight:300;display:flex}.movie-card-button{background-color:#1f2937;border:1px solid #374151;border-radius:3px;align-items:center;gap:4px;margin-block:8px;padding:.2rem;display:flex}.watchlist-btn-added{color:#fff;opacity:.8;cursor:default;background-color:#2d7d46;border-radius:3px;padding:.2rem}.movie-plot{color:#a5a5a5;font-size:.875rem;font-weight:400}.main-section{flex-direction:column;align-items:center;width:100%;min-height:80vh;display:flex}.empty-list,.clip-loader,.not-found-movie{flex-direction:column;align-self:center;align-items:center;gap:8px;margin-block:auto;display:flex}.empty-list img{opacity:.3;width:70px}.empty-list p,.not-found-movie{color:#5b5858;font-size:1.125rem;font-weight:700}.empty-list a{align-items:center;gap:6px;font-weight:700;display:flex}.not-found-movie{text-align:center}.search-form{z-index:10;align-self:center;margin-bottom:0;display:flex;transform:translateY(-50%)}.search-container{position:relative}.search-container input{color:#a5a5a5;background-color:#2e2e2f;border:none;border-radius:6px 0 0 6px;width:12rem;height:38px;padding-left:2.5em;padding-right:30px;font-size:.8rem;font-weight:500}input:focus{outline:none}.search-icon{filter:grayscale()brightness(50%)contrast(50%);color:#babfc9;width:16px;height:16px;position:absolute;top:50%;left:10px;transform:translateY(-50%)}.search-btn{color:#fff;background-color:#4b4b4b;border-radius:0 6px 6px 0;width:80px;height:38px;font-weight:300}.clear-btn{color:#94a3b8;cursor:pointer;background-color:#2e2e2f;border:none;justify-content:center;align-items:center;width:30px;height:38px;margin-block:auto;font-size:1.2rem;display:flex;position:absolute;top:50%;right:0;transform:translateY(-50%)}.clear-btn:hover{color:#fff}.not-found-page{flex-direction:column;justify-content:center;align-items:center;min-height:100vh;display:flex}.not-found-page h2{font-size:1.3rem}.not-found-page-btn{background-color:#1e2230;border-radius:6px;margin-top:20px;padding:10px 20px}.auth-form{background-color:#1e2230;border-radius:5px;flex-direction:column;align-items:center;gap:10px;padding:2rem 2rem 1rem;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 12px 40px #00000080}.auth-form label{flex-direction:column;gap:.2rem;margin-bottom:.2rem;font-weight:300;display:flex}.auth-input{color:#cecbcb;background-color:#161922;border:none;padding:.4rem .4rem .4rem 12px}.auth-btn{color:#fff;background-color:#6366f1;width:100%;margin-top:.5rem;padding:.6rem;font-weight:600;transition:opacity .2s}.auth-btn:hover{opacity:.9}.auth-input,.auth-btn{border-radius:4px}.auth-switch{color:#94a3b8;text-align:center;margin-top:1.5rem;font-size:.9rem}.auth-switch a{color:#10b981;font-weight:500;text-decoration:none}.auth-switch a:hover{text-decoration:underline}.login-switch{text-wrap:nowrap}.auth-error{color:#f43f5e;text-align:center;background-color:#f43f5e1a;border:1px solid #f43f5e4d;border-radius:6px;width:100%;margin-top:5px;padding:10px;font-size:.85rem;font-weight:500}@media (width>=640px){.header{height:190px;padding:.7rem 1.1rem 1.1rem}.movie-article{align-items:center;gap:16px;width:100%;padding:1rem .5rem;display:flex}.movie-article>div:not(.poster):not(.poster-placeholder){flex:1;min-width:0}.poster,.poster-placeholder{aspect-ratio:3/4;width:130px;height:177px}.poster-placeholder{text-align:center}.movie-specs{padding-right:.4rem}.main-section{padding-inline:2rem}.search-form{width:100%;max-width:370px}.search-container,.search-form input{width:100%}.search-btn{width:150px;padding:0 1rem}.clear-btn,.search-btn{width:auto}.clear-btn{justify-content:flex-end;padding-right:8px;font-size:1.4rem}.auth-form{gap:16px;width:100%;max-width:420px;padding:2.5rem}.auth-form label,.auth-input{width:100%}}@media (width>=768px){.header{background-repeat:no-repeat;background-size:cover;height:240px;padding:.9rem 1.5rem 1.5rem}.header-content h1{font-size:3rem}.header-link{font-size:1.1rem}.main-section{padding-inline:4rem}.search-form{width:100%;max-width:420px}.search-container input,.search-btn{height:43px}.search-btn{width:30%;font-size:1.1rem}.search-container input{padding-left:2.1em;font-size:.9rem}.auth-form{gap:16px;width:100%;max-width:490px;padding:2.5rem}.auth-form label{font-size:1.3rem}.auth-btn{height:50px;font-size:1.1rem}}@media (width>=1000px){.main-section{padding-inline:9rem}}@media (width>=1024px){.header{background-repeat:no-repeat;background-size:cover;height:320px;padding:1.2rem 1.8rem 1.8rem}.header-auth-btn{width:93px;height:41px;font-size:.9rem}.header-auth-btn a{font-size:23px}.username{font-size:1.2rem}.header-content h1{font-size:4.2rem}.header-link{font-size:1.3rem}.main-section{padding-inline:12rem}.search-form{width:100%;max-width:530px}.search-container input,.search-btn{height:50px}.search-icon{width:18px;height:18px}.search-btn{width:35%;font-size:1.2rem}.search-container input{font-size:1rem}.auth-form{gap:16px;max-width:540px;padding:2.5rem}.auth-form label{font-size:1.4rem}.auth-input{height:50px}.auth-btn{height:55px;font-size:1.2rem}.auth-switch{font-size:1rem}.auth-error{padding:13px;font-size:1.1rem}}@media (width>=1300px){.header{height:330px;padding:1.4rem 1.9rem 1.9rem}.main-section{padding-inline:20rem}.search-form{max-width:560px}}