:root{--color-white: #ffffff;--color-lightblue-90: #0da9fd;--color-bluegray-100: #242a32;--color-bluegray-80: #39414d;--color-bluegray-10: #e0e6ed;--color-bluegray-30: #a6b1c3;--color-bluegray-90: #2f3844;--color-gray-300: #d1d3d4;--color-yellow: #ffc700;--color-ffffff: #ffffff;--color-242a32: #242a32}*{box-sizing:border-box}a{color:inherit;text-decoration:none}body{font-size:16px;color:var(--color-white);background-color:var(--color-bluegray-80)}#wrap,section{display:flex;flex-direction:column;justify-content:center}main{padding:64px 0;background-color:var(--color-bluegray-100)}.star{width:24px}button{border:0;padding:8px 16px;cursor:pointer}button.primary{color:var(--color-white);font-weight:700;background-color:var(--color-lightblue-90);border-radius:4px}#wrap{min-width:auto;background-color:var(--color-bluegray-100)}#wrap h2{font-size:1.4rem;font-weight:700;margin-bottom:32px}.container{max-width:1280px;margin:0 auto}.header-bar{position:absolute;z-index:10;width:100%;max-width:1280px;justify-self:center;padding:20px;box-sizing:border-box;display:grid;align-items:center;grid-template-columns:123px 1fr 123px}.header-search{width:100%;display:flex;justify-content:center;align-items:center}.search-box{max-width:525px;display:flex;width:100%;height:36px;padding:0 16px;border:2px solid var(--color-white);border-radius:999px}.search-input{flex:1;border:none;background-color:transparent;color:#fff;font-size:16px;box-sizing:border-box;outline:none}#search-input::placeholder{color:var(--color-white)}.search-button{border:none;background:transparent;cursor:pointer;padding:0}.background-container{position:relative;background-position:center center;background-size:cover;height:500px;padding:48px 20px;display:flex;align-items:center}.overlay{position:absolute;top:0;left:0;background-color:#00000080;width:100%;height:100%;z-index:1}.top-rated-container{-webkit-user-select:none;user-select:none;position:relative;z-index:2;max-width:1280px;width:100%;margin:0 auto;padding:0 20px;box-sizing:border-box}.top-rated-movie>*:not(:last-child){margin-bottom:8px}h1.logo{font-size:2rem}.rate{display:flex;align-items:baseline;color:var(--color-yellow)}.rate>img{position:relative;top:2px}span.rate-value{margin-left:8px;font-weight:700;font-size:1.66rem}.title{font-size:3rem;font-weight:700}footer.footer{min-height:180px;background-color:var(--color-bluegray-80);display:flex;flex-direction:column;justify-content:center;text-align:center;font-size:1.1rem}footer.footer p:not(:last-child){margin-bottom:8px}.error-banner-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.error-banner-container p{margin:0 0 8px;color:#ccc;font-size:1.1rem}.error-banner-container p:first-child{color:var(--color-white);font-size:1.5rem;font-weight:700;margin-bottom:16px}.error-banner-container button{margin-top:16px;padding:12px 32px;background-color:#253aa3;color:#e2e2e2;border:none;border-radius:8px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s ease}.error-banner-container button:hover{filter:brightness(.9);transform:translateY(-2px)}.error-banner-container button:active{transform:translateY(0) scale(.96)}.hidden{display:none!important}@media screen and (max-width:768px){.header-bar{grid-template-columns:1fr;gap:16px;justify-items:center}.header-spacer{display:none}span.rate-value{font-size:1.4rem}.title{font-size:2.2rem}}@media screen and (max-width:480px){span.rate-value{font-size:1.1rem;margin-left:4px}.title{font-size:1.6rem}}body.modal-open{overflow:hidden}.modal-background{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:center;align-items:center;z-index:10;visibility:hidden;opacity:0;transition:opacity .3s ease,visibility .3s ease}.modal-background.active{visibility:visible;opacity:1}.modal{background-color:var(--color-bluegray-90);padding:20px;border-radius:16px;color:#fff;z-index:2;position:relative;width:1000px;min-height:500px;display:flex;flex-direction:column}.close-modal{position:absolute;margin:0;padding:0;top:24px;right:24px;background:none;border:none;color:#fff;font-size:20px;cursor:pointer}.modal-container{display:flex}.modal-image img{width:380px;border-radius:16px}.modal-description{width:100%;padding:8px;margin-left:16px;line-height:1.6rem}.modal-description .rate>img{position:relative;top:5px}.modal-description>*:not(:last-child){margin-bottom:8px}.modal-description h2{font-size:2rem;margin:0 0 8px}.detail{max-height:430px;overflow-y:auto}.my-star-container{display:flex;flex-direction:column;padding:1rem 0;gap:.75rem}.my-star-description{display:flex;align-items:center}.my-star-image{width:1.25rem;margin-right:.25rem;cursor:pointer}#my-star-evaluation{font-size:1.25rem;font-weight:700;margin-left:.25rem}#my-star-score{width:fit-content;margin-left:auto;margin-right:0;font-weight:700}.my-star-rate-title,.modal-detail-description-title{font-size:1.5rem;font-weight:700}.spinner{position:absolute;inset:0;margin:auto;z-index:100;width:40px;height:40px;border:4px solid rgba(0,0,0,.1);border-top-color:#3498db;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.modal-error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;text-align:center}.modal-error-container p{margin:0 0 8px;color:#ccc;font-size:1rem}.modal-error-container p:first-child{color:#fff;font-size:1.25rem;font-weight:700;margin-bottom:12px}.retry-button{margin-top:24px;padding:12px 32px;background-color:#2b39ff9c;color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s ease}.retry-button:hover{background-color:#e6b715;transform:translateY(-2px)}.retry-button:active{transform:translateY(0) scale(.96)}@media screen and (max-width:1024px){.modal{width:90%;max-height:90vh;overflow-y:auto;padding:24px}.modal-container{flex-direction:column;align-items:center}.modal-image img{width:100%;max-width:300px;margin-bottom:24px}.modal-description{margin-left:0;width:100%;padding:0}.detail{max-height:none}.close-modal{top:16px;right:16px}}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}.tab{display:flex;margin:32px 0}.tab-item{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;width:120px;height:40px;border-radius:40px;background:linear-gradient(90deg,#14191f,#0a0d12)}.tab-item.selected{background:linear-gradient(90deg,#4b8bf4,#1c2a3a)}.tab-item:hover{background:linear-gradient(90deg,#2f3e54,#4b8bf4)}.tab li:not(:last-child){margin-right:8px}.thumbnail-container{position:relative;width:100%;max-width:1280px;padding:0 20px;box-sizing:border-box;margin:0 auto;display:flex;flex-direction:column;gap:56px}.thumbnail-title{font-size:28px;font-weight:600}.thumbnail-list{width:100%;margin:0 auto 56px;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}.thumbnail{width:100%;height:auto;aspect-ratio:2 / 3;object-fit:cover;border-radius:8px}.item{-webkit-user-select:none;user-select:none;cursor:pointer}.item-desc>*:not(:last-child){position:relative;margin-bottom:4px;line-height:1.2rem}p.rate{display:flex;align-items:baseline;color:var(--color-yellow)}p.rate>span{margin-left:4px}.item .star{width:16px;top:1px}.thumbnail-add-button{background-color:var(--color-lightblue-90);width:100%;color:var(--color-white);border-radius:8px;padding:10px 0;font-weight:semibold;font-size:24px;cursor:pointer}.thumbnail-empty{position:absolute;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px}.empty-message{font-size:36px;font-weight:600}.hidden{display:none}.relative{position:relative}.error-thumbnail-container{width:100%;min-height:400px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.error-thumbnail-message{color:var(--color-white);font-size:1.5rem;font-weight:700;margin:0 0 8px}.error-thumbnail-container p:nth-child(2){color:#ccc;font-size:1.1rem;margin:0 0 24px}.thumbnail-retry-button{padding:12px 32px;background-color:#253aa3;color:#e2e2e2;border:none;border-radius:8px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s ease}.error-thumbnail-retry-button:hover{filter:brightness(.9);transform:translateY(-2px)}.error-thumbnail-retry-button:active{transform:translateY(0) scale(.96)}.empty-message-container{width:100%;min-height:400px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px}.empty-icon{width:80px;height:80px;opacity:.5}.empty-message-container .empty-message{color:var(--color-white);font-size:1.5rem;font-weight:700;margin:0}@media screen and (max-width:480px){.thumbnail-list{grid-template-columns:repeat(2,1fr);gap:12px}}.skeleton-card{list-style:none}.skeleton-box{position:relative;overflow:hidden;background-color:#86888d}.skeleton-box:after{content:"";position:absolute;top:0;left:-150%;width:150%;height:100%;transform:skew(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);animation:skeleton-loading 1.2s infinite}@keyframes skeleton-loading{to{left:150%}}.skeleton-card .thumbnail{width:200px;height:300px;border-radius:8px}.skeleton-card .item-desc{margin-top:8px}.skeleton-card .rate{display:flex;align-items:center;gap:6px;margin-bottom:8px}.skeleton-star{width:16px;height:16px;border-radius:4px}.skeleton-score{width:40px;height:16px;border-radius:4px}.skeleton-title{display:block;width:140px;height:20px;border-radius:4px}