:root{--bg:#070B14;--panel:#0F172A;--card:#1F2937;--line:#1E293B;--text:#F1F5F9;--muted:#94A3B8;--accent:#FACC15;--ink:#0B1222;--heart:#F43F5E}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
body{background:linear-gradient(rgba(7,11,20,.88),rgba(7,11,20,.96)),url(img/cinema_bg.jpg) center/cover fixed}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}
.muted{color:var(--muted)}.small{font-size:14px}.accent{color:#93C5FD}
h1{font-size:30px;margin:8px 0}h2{font-size:24px;margin:18px 0 10px}

header{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:10px 16px;background:rgba(7,11,20,.92);border-bottom:1px solid var(--line)}
header .brand{height:40px}
.icon{background:var(--card);border:0;border-radius:50%;width:44px;height:44px;font-size:30px;line-height:40px}
.searchbox{flex:1}
.searchbox input{width:100%;padding:12px 16px;border-radius:24px;border:2px solid var(--line);background:#0b1222;color:var(--text);font-size:18px}
.searchbox input:focus{outline:none;border-color:var(--accent)}
.profile{display:flex;align-items:center;gap:8px;background:none;border:0}
.profile img{width:40px;height:40px;border-radius:50%}
.profile span{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

main{padding:8px 16px 40px}
.view.center{text-align:center;padding-top:6vh}
.logo-big{height:90px}
.code{font-size:56px;font-weight:800;letter-spacing:6px;color:var(--accent);margin:20px 0}

.profiles{display:flex;flex-wrap:wrap;gap:28px;justify-content:center;margin-top:30px}
.profiles button{background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:20px;font-weight:700}
.profiles img{width:130px;height:130px;border-radius:50%;border:4px solid transparent}
.profiles button:hover img,.profiles button:focus img{border-color:var(--accent)}

.row h2{display:flex;justify-content:space-between}
.strip{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity}
.strip>*{flex:0 0 auto;scroll-snap-align:start}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px}

.card{background:none;border:0;padding:0;text-align:left;width:150px}
.grid .card{width:auto}
.poster{position:relative;width:100%;aspect-ratio:2/3;border-radius:10px;overflow:hidden;background:var(--card);border:3px solid transparent}
.poster img{width:100%;height:100%;object-fit:cover;display:block}
.poster .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:8px;text-align:center;color:var(--muted);font-size:14px}
.card:hover .poster,.card:focus .poster{border-color:var(--accent)}
.card .t{font-size:14px;margin-top:6px;color:#CBD5E1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .c{font-size:12px;color:var(--muted)}
.bar{position:absolute;left:0;right:0;bottom:0;height:6px;background:rgba(0,0,0,.6)}
.bar i{display:block;height:100%;background:var(--accent)}

.chip{border:0;border-radius:12px;padding:0 18px;height:70px;min-width:180px;font-weight:700;font-size:17px;color:#fff;display:flex;align-items:center;justify-content:center;border:3px solid transparent}
.chip img{max-width:150px;max-height:46px}
.chip:hover,.chip:focus{border-color:var(--accent)}

.s-head{display:flex;gap:24px;align-items:flex-start;margin-top:10px}
.s-cover{width:200px;border-radius:12px;background:var(--card);aspect-ratio:2/3;object-fit:cover}
.s-info{flex:1}
.plot{color:#D1D5DB;line-height:1.4;max-height:7em;overflow:auto}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.pill{background:var(--card);border:2px solid var(--line);border-radius:30px;padding:12px 20px;font-weight:700;font-size:16px}
.pill.on{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.pill .heart{color:var(--heart)}
.tabs{display:flex;gap:8px;overflow-x:auto;margin:22px 0 12px}
.tabs button{flex:0 0 auto;background:var(--card);border:0;border-radius:20px;padding:10px 18px;font-weight:700}
.tabs button.sel{background:var(--accent);color:var(--ink)}
.eps{display:flex;flex-direction:column;gap:10px}
.ep{display:flex;gap:14px;align-items:center;background:rgba(31,41,55,.7);border:2px solid transparent;border-radius:12px;padding:8px;text-align:left}
.ep:hover,.ep:focus{border-color:var(--accent)}
.ep .thumb{position:relative;width:160px;flex:0 0 160px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--card)}
.ep .thumb img{width:100%;height:100%;object-fit:cover}
.ep .et{font-weight:700}.ep .ed{font-size:13px;color:var(--muted);margin-top:4px}

.player{position:fixed;inset:0;background:#000;z-index:20;padding:0}
.player video{width:100%;height:100%;background:#000}
.player-bar{position:absolute;top:0;left:0;right:0;display:flex;gap:12px;align-items:center;padding:12px;background:linear-gradient(rgba(0,0,0,.8),transparent);transition:opacity .4s}
.player-bar span{flex:1;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-bar.hide{opacity:0;pointer-events:none}
.play-err{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:640px;background:rgba(15,23,42,.95);border:2px solid var(--heart);border-radius:14px;padding:22px;text-align:center;line-height:1.5}

.loading{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(7,11,20,.7);z-index:30}
.spin{width:46px;height:46px;border:5px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--panel);border-left:6px solid var(--accent);padding:14px 22px;border-radius:10px;z-index:40;box-shadow:0 8px 30px rgba(0,0,0,.5)}
@media (max-width:640px){.s-head{flex-direction:column}.s-cover{width:150px}header .brand{display:none}.card{width:120px}}