:root{--bg:#0b0b10;--card:#15151d;--card2:#1c1c27;--line:#262636;--txt:#f2f2f7;--mut:#9a9ab0;--ok:#22c55e;--warn:#f59e0b;--bad:#ef4444;--r:12px;--nav:62px}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--bg);color:var(--txt);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body{min-height:100vh;overflow-x:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
img{display:block}
a{color:var(--p)}
.boot{display:grid;place-items:center;height:100vh}
.spin{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--p);border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---- botones y campos */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:10px;background:var(--p);color:#fff;font-weight:700;transition:filter .15s,transform .05s}
.btn:hover{filter:brightness(1.12)}.btn:active{transform:scale(.98)}
.btn.ghost{background:var(--card2);color:var(--txt);border:1px solid var(--line)}
.btn.ghost.on{color:#facc15}.btn.ghost.on .ic{fill:#facc15}
.btn.danger{background:rgba(239,68,68,.15);color:var(--bad)}
.btn.sm{padding:7px 12px;font-size:.85rem;border-radius:8px}
.btn[disabled]{opacity:.5;pointer-events:none}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field>span{font-size:.82rem;color:var(--mut);font-weight:600}
.inp{width:100%;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:10px;outline:none}
.inp:focus{border-color:var(--p)}
.err{color:var(--bad);font-size:.9rem;min-height:1.3em;margin:4px 0 10px}
.mut{color:var(--mut)}
.badge{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.75rem;font-weight:700;background:var(--card2)}
.badge.ok{background:rgba(34,197,94,.15);color:var(--ok)}.badge.warn{background:rgba(245,158,11,.15);color:var(--warn)}.badge.bad{background:rgba(239,68,68,.15);color:var(--bad)}

/* ---- acceso */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:radial-gradient(900px 500px at 50% -10%,color-mix(in srgb,var(--p) 28%,transparent),transparent)}
.auth-box{width:100%;max-width:400px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px 26px}
.brand{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:6px}
.brand img{height:42px;border-radius:8px}
.brand b{font-size:1.5rem;letter-spacing:-.5px}
.auth-box .sub{text-align:center;color:var(--mut);margin-bottom:22px}
.auth-box .btn{width:100%;padding:13px}
.switch{text-align:center;margin-top:16px;color:var(--mut)}
.switch button{color:var(--p);font-weight:700}

/* ---- estructura */
.top{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line);padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));display:flex;align-items:center;gap:14px}
.top .brand{margin:0;justify-content:flex-start}.top .brand img{height:30px}.top .brand b{font-size:1.15rem}
.search{flex:1;max-width:520px;margin-left:auto;position:relative}
.search .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--mut);width:18px;height:18px}
.search input{width:100%;padding:10px 12px 10px 38px;background:var(--card);border:1px solid var(--line);border-radius:99px;outline:none}
.search input:focus{border-color:var(--p)}
.nav{display:flex;gap:4px}
.nav button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 14px;border-radius:10px;color:var(--mut);font-size:.72rem;font-weight:600}
.nav button.on{color:var(--p)}
.nav button:hover{color:var(--txt)}
main{padding:16px;padding-bottom:calc(var(--nav) + 28px + env(safe-area-inset-bottom));max-width:1500px;margin:0 auto}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 14px;scrollbar-width:none;margin:0 -16px;padding-left:16px;padding-right:16px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;padding:8px 14px;border-radius:99px;background:var(--card);border:1px solid var(--line);color:var(--mut);font-weight:600;font-size:.88rem;white-space:nowrap}
.chip.on{background:var(--p);border-color:var(--p);color:#fff}
.bar{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.bar .inp{max-width:340px;padding:9px 14px}
.cnt{color:var(--mut);font-size:.85rem;margin-left:auto;white-space:nowrap}
h2.sec{font-size:1.05rem;margin:22px 0 12px}

/* ---- tarjetas */
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.grid.live{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-align:left;display:block;width:100%;transition:transform .12s,border-color .12s}
.card:hover{transform:translateY(-2px);border-color:var(--p)}
.card .pic{aspect-ratio:2/3;background:var(--card2);display:grid;place-items:center;color:var(--mut);position:relative;overflow:hidden}
.live .card .pic{aspect-ratio:16/10}
.card .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.live .card .pic img{inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:contain}
.card .nm{padding:9px 11px 11px;font-size:.85rem;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3.1em}
.card .fav{position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.55);display:grid;place-items:center;color:#fff}
.card .fav.on{color:#facc15}.card .fav.on .ic{fill:#facc15}
.card .fav .ic{width:16px;height:16px}
.card .rt{position:absolute;left:6px;bottom:44px;background:rgba(0,0,0,.7);padding:1px 7px;border-radius:6px;font-size:.72rem;font-weight:700}
.empty{text-align:center;color:var(--mut);padding:60px 16px}
.empty b{display:block;color:var(--txt);font-size:1.1rem;margin-bottom:6px}
.more{height:1px}

/* ---- cuenta y paneles */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:16px;max-width:640px}
.panel h3{margin-bottom:12px;font-size:1rem}
.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.kv:last-child{border:0}.kv span:first-child{color:var(--mut)}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.plan{border:2px solid var(--line);border-radius:12px;padding:14px;text-align:center;background:var(--card2)}
.plan.on{border-color:var(--p)}
.plan b{display:block;font-size:1.5rem}
.copy{display:flex;gap:8px;align-items:center;background:var(--card2);border-radius:10px;padding:10px 12px;word-break:break-all;font-family:ui-monospace,monospace;font-size:.85rem;margin:8px 0}
.qr{max-width:200px;border-radius:12px;margin:10px auto;background:#fff;padding:8px}
.gate{min-height:70vh;display:grid;place-items:center;text-align:center;padding:20px}
.gate .box{max-width:420px}.gate h2{margin-bottom:8px}.gate p{color:var(--mut);margin-bottom:18px}

/* ---- detalle (modal) */
.modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.78);display:grid;place-items:center;padding:14px;overflow:auto}
.sheet{width:100%;max-width:860px;max-height:92vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:18px;position:relative}
.sheet .x{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.6);display:grid;place-items:center;z-index:2}
.det{display:grid;grid-template-columns:200px 1fr;gap:22px;padding:24px}
.det .poster{width:100%;aspect-ratio:2/3;border-radius:12px;background:var(--card2);object-fit:cover}
.det h2{font-size:1.4rem;margin-bottom:6px;padding-right:36px}
.meta{color:var(--mut);margin-bottom:12px;font-size:.9rem}
.plot{margin-bottom:14px;color:#cfcfe0}
.acts{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.eps{padding:0 24px 24px}
.eps select{margin-bottom:10px;max-width:220px}
.ep{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px;border-radius:10px;background:var(--card2);margin-bottom:6px}
.ep:hover{outline:1px solid var(--p)}
.ep .n{width:32px;color:var(--mut);font-weight:700}
.ep .t{flex:1;font-weight:600}.ep .d{color:var(--mut);font-size:.82rem}

/* ---- reproductor */
.player{position:fixed;inset:0;z-index:100;background:#000;display:flex;flex-direction:column}
.player video{flex:1;width:100%;min-height:0;background:#000}
.ptop{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;gap:10px;padding:12px 14px;padding-top:max(12px,env(safe-area-inset-top));background:linear-gradient(#000c,transparent);transition:opacity .3s}
.ptop .ttl{flex:1;min-width:0}
.ptop .ttl b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptop .ttl small{color:#cfcfe0;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;color:#fff;flex:none}
.pb:hover{background:rgba(255,255,255,.28)}
.pb.on{color:#facc15}.pb.on .ic{fill:#facc15}
.player.idle .ptop{opacity:0;pointer-events:none}
.player.idle{cursor:none}
.pmsg{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;text-align:center;padding:30px}
.pmsg .box{background:rgba(0,0,0,.72);border-radius:14px;padding:18px 22px;max-width:420px;pointer-events:auto}

.toast{position:fixed;left:50%;bottom:calc(var(--nav) + 20px);transform:translateX(-50%);background:#222232;border:1px solid var(--line);padding:11px 18px;border-radius:12px;z-index:200;box-shadow:0 8px 30px #0008;max-width:90vw}
.toast.bad{border-color:var(--bad)}

/* ---- movil: la barra de navegacion pasa abajo */
@media (max-width:820px){
  .nav{position:fixed;bottom:0;left:0;right:0;z-index:30;background:var(--bg);border-top:1px solid var(--line);justify-content:space-around;padding:6px 4px calc(6px + env(safe-area-inset-bottom));height:calc(var(--nav) + env(safe-area-inset-bottom))}
  .nav button{flex:1;white-space:nowrap;padding:6px 2px;font-size:.68rem}
  .top .brand b{display:none}
  .det{grid-template-columns:110px 1fr;gap:14px;padding:18px}
  .det h2{font-size:1.15rem}
  .eps{padding:0 14px 18px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:9px}
  .grid.live{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}
@media (min-width:821px){.nav{order:2}main{padding-bottom:40px}.toast{bottom:24px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}