body{background:#141414;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;margin:0;padding:0;overflow-x:hidden}
#app{min-height:100vh}

.navbar{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:1rem 5%;background:linear-gradient(to bottom,rgba(0,0,0,0.8) 0%,transparent 100%)}
.nav-brand{font-size:1.8rem;font-weight:700;color:#e50914}
.nav-profile img{width:40px;height:40px;border-radius:4px;cursor:pointer}

.hero{position:relative;height:80vh;background-size:cover;background-position:center;margin-top:-70px;padding-top:70px}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to top,#141414 0%,transparent 50%,rgba(0,0,0,0.4) 100%)}
.hero-content{position:absolute;bottom:20%;left:5%;max-width:40%}
.hero-title{font-size:4rem;font-weight:700;margin-bottom:1rem}
.hero-overview{font-size:1.1rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.row-title{font-size:1.4rem;font-weight:600;margin:2rem 0 1rem 5%}
.movie-row{display:flex;gap:10px;padding:0 5%;overflow-x:auto;scrollbar-width:none}
.movie-row::-webkit-scrollbar{display:none}
.movie-card{flex:0 0 auto;width:200px;cursor:pointer;transition:transform 0.2s}
.movie-card:hover{transform:scale(1.05)}
.movie-poster{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:4px}
.movie-title{font-size:0.9rem;margin-top:0.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.btn-play{background:#fff;color:#000;border:none;padding:0.6rem 1.5rem;font-size:1.1rem;font-weight:600;border-radius:4px;cursor:pointer}
.btn-play:hover{background:#e0e0e0}
.btn-info{background:rgba(109,109,110,0.7);color:#fff;border:none;padding:0.6rem 1.5rem;font-size:1.1rem;font-weight:600;border-radius:4px;margin-left:1rem;cursor:pointer}
.btn-info:hover{background:rgba(109,109,110,0.5)}

.setup-screen,.add-profile-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;text-align:center;padding:2rem}
.setup-screen h1,.add-profile-screen h1{font-size:2.5rem;margin-bottom:1rem}
.setup-screen input,.add-profile-screen input{max-width:300px;background:#333;border:none;color:#fff;padding:0.75rem 1rem;border-radius:4px}
.setup-screen input:focus,.add-profile-screen input:focus{outline:none;box-shadow:0 0 0 2px #e50914}

.profile-picker{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh}
.profile-picker h1{font-size:3rem;margin-bottom:2rem}
.profiles{display:flex;gap:2rem;flex-wrap:wrap;justify-content:center}
.profile{display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:transform 0.2s}
.profile:hover{transform:scale(1.1)}
.profile img{width:150px;height:150px;border-radius:8px;border:3px solid transparent;object-fit:cover}
.profile:hover img,.profile.auto-select img{border-color:#fff}
.profile span{margin-top:0.75rem;font-size:1.1rem;color:#999}
.profile:hover span{color:#fff}
.add-profile .add-icon{width:150px;height:150px;border-radius:8px;border:3px solid #999;display:flex;align-items:center;justify-content:center;font-size:4rem;color:#999}
.add-profile:hover .add-icon{border-color:#fff;color:#fff}

.content{padding-bottom:3rem}