/* Tcholas TV (web) — compatível com navegadores de TV (Chrome 53+): só flexbox, sem grid/gap/aspect-ratio. */
:root{--bg:#0b0f1a;--bg2:#141c3a;--card:#1b2236;--panel:#151b2b;--tx:#fff;--mu:#aab2c5;--fa:#6b7794;--or:#ff6b35;--ro:#ff3d71;--ok:#34d399;--bad:#ff6b6b;--warn:#ffc107}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--tx);font-family:Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
body{font-size:20px}
#app{position:fixed;left:0;top:0;right:0;bottom:0;background:linear-gradient(#0b0f1a,#141c3a)}
.layer{position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden}
button,input{font:inherit;color:inherit;border:0;outline:0}
.f{outline:0;cursor:pointer}
/* ===== logo animada ===== */
.logo{display:flex;align-items:center;animation:logoIn .7s ease-out both}
.logo img{width:46px;height:46px;border-radius:12px;margin-right:12px;animation:pulse 1.5s ease-in-out infinite alternate}
.logo b{font-size:30px;font-weight:800;letter-spacing:-.3px;color:#fff}
.logo i{font-style:normal;font-size:30px;font-weight:800;margin-left:8px;background:linear-gradient(100deg,#ff6b35 0%,#ff6b35 38%,#ffe2d2 50%,#ff6b35 62%,#ff3d71 100%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:shine 2.8s linear infinite}
.logo.sm img{width:34px;height:34px;border-radius:9px;margin-right:9px;animation:none}.logo.sm i{animation:none;background:none;-webkit-text-fill-color:var(--or);color:var(--or)}.logo.sm b,.logo.sm i{font-size:23px}
.logo.lg img{width:64px;height:64px;border-radius:16px}.logo.lg b,.logo.lg i{font-size:44px}
@keyframes pulse{from{transform:scale(1)}to{transform:scale(1.1)}}
@keyframes shine{from{background-position:130% 0}to{background-position:-130% 0}}
@keyframes logoIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
/* ===== chips e botões ===== */
.chip{display:inline-block;background:var(--card);color:#fff;border-radius:50px;padding:10px 20px;font-weight:600;font-size:18px;margin-right:8px;white-space:nowrap}
.chip.sel{background:rgba(255,107,53,.2);color:var(--or)}
.chip.on,.btn.on{background:var(--or);color:#fff}
.btn{display:inline-block;background:var(--panel);border-radius:50px;padding:12px 26px;font-weight:700;font-size:19px;margin-right:10px}
.btn.pri{background:var(--or)}
.btn.on{background:#fff;color:#000}.btn.pri.on{background:#fff;color:#000}
.muted{color:var(--mu)}.warn{color:var(--warn)}.bad{color:var(--bad)}
.row,.cats,.tabs,.top{position:relative}
.row{display:flex;overflow-x:hidden;overflow-y:visible;white-space:nowrap}
/* ===== login ===== */
.login{display:flex;height:100%;padding:60px 70px}
.login .hero{flex:1;display:flex;flex-direction:column;justify-content:center;padding-right:40px}
.login h1{font-size:46px;line-height:1.1;margin:24px 0 8px;font-weight:800}.login h1 em{font-style:normal;color:var(--or)}
.login .feat{display:flex;align-items:center;margin:9px 0;color:var(--mu);font-size:19px}.login .feat span{width:34px;font-size:22px}
.login .lcard{width:470px;align-self:center;background:var(--panel);border-radius:24px;padding:30px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.login .qr{background:#fff;border-radius:16px;padding:12px;width:230px;height:230px;margin:0 auto}.login .qr svg{width:100%;height:100%}
.login .code{text-align:center;font:700 26px monospace;letter-spacing:6px;margin:14px 0 4px}
.login input{width:100%;height:54px;border-radius:14px;background:#0f1424;border:2px solid #252d44;padding:0 16px;font-size:20px;margin-bottom:12px}
.login input:focus,.login input.on{border-color:var(--or)}
.login .err{min-height:26px;color:var(--bad);font-weight:600;margin:6px 0}
/* ===== navegação principal ===== */
.top{display:flex;align-items:center;height:64px;padding:0 44px;margin-top:20px}
.top .sp{flex:1}
.cats{padding:10px 44px 6px;white-space:nowrap;overflow:hidden;height:62px}.cats .chip{font-size:17px;padding:8px 18px}.top .chip{font-size:17px;padding:8px 18px}
.grid{display:flex;flex-wrap:wrap;padding:6px 36px 60px;overflow-y:auto;height:100%}
.strip{padding:6px 32px 14px;height:112px;overflow:hidden}
.chcard{display:inline-flex;align-items:center;width:250px;height:84px;margin-right:12px;padding:0 14px;border-radius:14px;background:var(--card);flex:none;position:relative;vertical-align:top;white-space:normal}
.chcard.on{background:#26304f;box-shadow:0 0 0 3px #fff;z-index:2}.chcard.playing{box-shadow:0 0 0 3px var(--or)}
.chcard .cl{width:54px;height:54px;border-radius:10px;background:#10162a;display:flex;align-items:center;justify-content:center;margin-right:12px;flex:none;padding:5px}.chcard .cl img{max-width:100%;max-height:100%;object-fit:contain}
.chcard .ct{min-width:0;flex:1}.chcard .ct b{display:block;font-size:17px;line-height:1.2;max-height:42px;overflow:hidden}.chcard .ct small{display:block;color:var(--fa);font-size:13px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chcard .star{position:absolute;right:8px;top:4px;color:var(--warn);font-size:15px}
.card{width:185px;height:140px;margin:7px;border-radius:14px;background:var(--card);display:flex;flex-direction:column;overflow:hidden;transition:transform .14s;position:relative}
.card.on{transform:scale(1.08);box-shadow:0 0 0 3px #fff,0 10px 30px rgba(0,0,0,.5);z-index:2}
.card .lg{flex:1;display:flex;align-items:center;justify-content:center;background:linear-gradient(#232c48,#171e33);padding:10px}
.card .lg img{max-width:100%;max-height:70px;object-fit:contain}.card .lg b{font-size:34px;color:#4a5679}
.card .nm{height:38px;display:flex;align-items:center;padding:0 10px;font-size:15px;background:#10162a;font-weight:600}
.card .nm span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card .nm small{color:var(--fa);margin-left:6px}
.card .star{position:absolute;right:8px;top:6px;color:var(--warn);font-size:18px}
.card.playing{box-shadow:0 0 0 3px var(--or)}
.hero-ch{display:flex;align-items:center;padding:0 44px;margin-top:6px}
.hero-ch .info{flex:1;display:flex;flex-direction:column;justify-content:center;padding-left:34px;min-width:0}.hero-ch .hint{margin-top:22px;color:#6b7794;font-size:17px;line-height:1.6}
.live{display:inline-block;background:var(--or);border-radius:50px;padding:3px 14px;font-size:13px;font-weight:800;align-self:flex-start;margin-bottom:10px}
.hero-ch h2{font-size:38px;margin:0 0 8px;font-weight:800;line-height:1.1;white-space:normal;overflow:hidden;max-height:90px}
.pv{width:66vw;height:37.125vw;max-height:64vh;max-width:113.8vh;border-radius:16px;border:3px solid var(--or);background:#000;position:relative;flex:none}
.pv.on{border-color:#fff}
.content{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;flex-direction:column}
/* ===== player ===== */
#player{position:fixed;background:#000;display:none;z-index:50;overflow:hidden}
#player.pv{display:block;border-radius:14px}
#player.full{display:block;left:0!important;top:0!important;width:100%!important;height:100%!important;border-radius:0}
#player video{width:100%;height:100%;background:#000;object-fit:contain}
.wm{position:absolute;right:26px;top:22px;display:flex;align-items:center;background:rgba(0,0,0,.35);border-radius:50px;padding:5px 13px 5px 6px;opacity:.7}
#player.pv .wm{right:12px;top:10px;transform:scale(.78);transform-origin:top right}.wm img{width:24px;height:24px;border-radius:6px;margin-right:7px}.wm b{font-size:15px;font-weight:800}.wm i{font-style:normal;color:var(--or);font-weight:800;font-size:15px;margin-left:4px}
.pback{position:absolute;left:28px;top:22px;display:none;background:rgba(0,0,0,.55);border-radius:50px;padding:10px 24px;font-weight:700;font-size:20px;z-index:5}.pback.on{background:#fff;color:#000}
.msg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.7);border-radius:14px;padding:16px 26px;text-align:center;max-width:70%;display:none}
.spin{width:44px;height:44px;border:5px solid rgba(255,107,53,.25);border-top-color:var(--or);border-radius:50%;margin:0 auto 12px;animation:rot 1s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.ibar{position:absolute;left:0;right:0;bottom:0;padding:50px 60px 36px;background:linear-gradient(transparent,rgba(0,0,0,.85));display:none}
.ibar b{font-size:46px}.ibar small{display:block;color:var(--mu);font-size:20px;margin-top:4px}
.digits{position:absolute;right:34px;top:30px;background:rgba(0,0,0,.8);border-radius:12px;padding:10px 26px;font-size:56px;font-weight:800;color:var(--or);display:none}
.menu{position:absolute;left:0;top:0;bottom:0;width:470px;background:linear-gradient(90deg,rgba(11,15,26,.97),rgba(11,15,26,.85));padding:30px 20px;display:none;overflow-y:auto}
.menu .it{display:flex;align-items:center;height:72px;padding:0 14px;border-radius:12px;margin-bottom:6px;font-size:21px;background:rgba(255,255,255,.04)}
.menu .it.on{background:var(--or)}.menu .it span.n{width:70px;color:var(--mu)}.menu .it.on span.n{color:#fff}.menu .it img{width:54px;height:38px;object-fit:contain;margin-right:12px}
/* ===== Tchola Flix ===== */
.flix{position:absolute;left:0;right:0;top:0;bottom:0;background:#07090f}
.flix .bg{position:absolute;left:0;right:0;top:0;bottom:0;background-size:cover;background-position:center;opacity:.33}
.flix .shade{position:absolute;left:0;right:0;top:0;bottom:0;background:linear-gradient(90deg,#07090f 0%,rgba(7,9,15,.78) 45%,rgba(7,9,15,.1) 100%),linear-gradient(rgba(7,9,15,0) 55%,#07090f 100%)}
.flix .glow{position:absolute;right:-200px;top:-200px;width:900px;height:900px;border-radius:50%;background:radial-gradient(rgba(255,107,53,.2),transparent 65%)}
.fx{position:relative;display:flex;flex-direction:column;height:100%}
.fbrand{font-size:34px;font-weight:900;letter-spacing:-.5px;margin-right:26px;white-space:nowrap}.fbrand b{background:linear-gradient(90deg,var(--or),var(--ro));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.tabs{flex:1;display:flex;overflow:hidden;white-space:nowrap}
.tabs .chip{font-size:16px;padding:9px 16px;margin-right:6px}
.fhero{height:170px;padding:6px 44px 0;max-width:760px;overflow:hidden}
.fhero small{color:var(--or);font-weight:700;font-size:15px}.fhero h2{font-size:42px;margin:2px 0 6px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fhero p{margin:6px 0 0;color:var(--mu);font-size:17px;line-height:1.35;max-height:48px;overflow:hidden}
.rails{flex:1;overflow-y:auto;padding-bottom:70px}
.rail{margin-bottom:6px}.rail h3{margin:6px 44px 0;font-size:22px;font-weight:800}
.rail .row{padding:18px 32px 20px}
.poster{width:152px;height:228px;margin-right:16px;border-radius:10px;background:var(--panel);position:relative;flex:none;overflow:hidden;}
.poster.on{box-shadow:0 0 0 4px #fff;z-index:3}
.poster img{width:100%;height:100%;object-fit:cover;display:block}
.poster .ph{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;font-weight:700;font-size:17px;background:linear-gradient(#26304d,#111626);white-space:normal}
.poster .badge{position:absolute;right:6px;top:6px;background:rgba(0,0,0,.8);color:var(--warn);font-size:11px;padding:2px 6px;border-radius:6px}
.poster .bar{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(0,0,0,.45)}.poster .bar i{display:block;height:100%;background:var(--or)}
.pgrid{display:flex;flex-wrap:wrap;padding:14px 32px 60px;overflow-y:auto}.pgrid .poster{margin:10px 14px 10px 0}
.det{position:relative;padding:30px 52px;height:100%;overflow-y:auto}
.det h1{font-size:48px;margin:0 0 6px;font-weight:900}.det .meta{color:var(--mu);margin-bottom:10px;font-size:18px}.det .syn{max-width:780px;color:var(--mu);font-size:19px;line-height:1.4;margin-bottom:14px}
.eps .ep{display:flex;align-items:center;height:56px;width:82%;padding:0 20px;margin-bottom:6px;border-radius:50px;background:var(--panel);font-size:19px;white-space:nowrap}
.eps .ep.on{background:#fff;color:#000}.eps .ep b{width:70px;color:var(--or)}.eps .ep span{flex:1;overflow:hidden;text-overflow:ellipsis}
.searchbar{display:flex;align-items:center;padding:0 44px;margin:20px 0 6px}
.searchbar input{width:560px;height:54px;border-radius:50px;background:var(--panel);padding:0 24px;font-size:21px;margin-left:20px}
/* ===== jogos ===== */
.ev{display:flex;align-items:center;height:86px;width:92%;margin:0 0 8px 44px;padding:0 22px;background:var(--card);border-radius:16px;font-size:20px}
.ev.on{background:var(--or)}.ev .t{flex:1;display:flex;align-items:center}.ev .t img{width:36px;height:36px;object-fit:contain;margin:0 10px}
.ev .sc{width:120px;text-align:center;font-weight:800;font-size:26px}.ev .tm{width:120px;color:var(--mu)}.ev.on .tm{color:#fff}
.ev .tv{width:260px;text-align:right;font-size:15px;color:var(--mu);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ev.on .tv{color:#fff}
.sec{margin:16px 44px 8px;font-size:22px;font-weight:800}
/* ===== PIN ===== */
.modal{position:absolute;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;z-index:80}
.pin{background:var(--panel);border-radius:22px;padding:28px 34px;text-align:center}
.pin h2{margin:0 0 4px}.pin .dots{margin:14px 0 4px}.pin .dots i{display:inline-block;width:18px;height:18px;border-radius:50%;background:#2a3350;margin:0 7px}.pin .dots i.a{background:var(--or)}
.pin .perr{height:26px;color:var(--bad);font-size:16px}
.pin .k{display:inline-block;width:92px;height:56px;line-height:56px;border-radius:14px;background:var(--card);margin:5px;font-weight:800;font-size:24px}.pin .k.on{background:var(--or);transform:scale(1.08)}.pin .k.w{font-size:16px}
.toast{position:fixed;left:50%;bottom:50px;transform:translateX(-50%);background:rgba(0,0,0,.85);border-radius:50px;padding:12px 28px;z-index:99;font-size:18px}
/* ===== celular (iPhone) ===== */
@media (max-width:760px){
  body{font-size:16px}
  .login{flex-direction:column;padding:30px 20px;overflow-y:auto}.login .hero{padding:0}.login h1{font-size:30px}.login .lcard{width:100%;margin-top:18px}.login .feat{display:none}
  .top{padding:0 14px;height:auto;margin-top:calc(env(safe-area-inset-top) + 10px);flex-wrap:wrap}
  .top .chip{margin:4px 6px 4px 0;font-size:15px;padding:8px 14px}.cats{padding:4px 14px;overflow-x:auto;height:50px}
  .hero-ch{display:none}.grid{padding:4px 8px 60px}.card{width:46%;margin:2%;height:120px}
  .tabs{overflow-x:auto}.fhero{height:auto;padding:4px 16px}.fhero h2{font-size:26px}.rail h3{margin-left:16px;font-size:18px}.rail .row{padding:10px 12px;overflow-x:auto}
  .poster{width:110px;height:165px;margin-right:10px}.det{padding:20px 16px}.det h1{font-size:30px}.eps .ep{width:100%}.ev{width:94%;margin-left:3%;height:auto;padding:10px;flex-wrap:wrap}
  .menu{width:100%}.searchbar input{width:70%}
}

/* ===== modo WEB (celular, iPad e navegador): html.web. As TVs (html.tv) continuam com o layout acima. ===== */
html.web .top::-webkit-scrollbar,html.web .cats::-webkit-scrollbar,html.web .row::-webkit-scrollbar,html.web .tabs::-webkit-scrollbar,html.web .strip::-webkit-scrollbar{display:none}
html.web .top,html.web .cats,html.web .row,html.web .tabs,html.web .strip{scrollbar-width:none;-webkit-overflow-scrolling:touch}
html.web .top{flex:none;height:auto;min-height:60px;padding:8px 16px;margin-top:0;padding-top:calc(env(safe-area-inset-top,0px) + 8px);flex-wrap:nowrap;overflow-x:auto;white-space:nowrap}
html.web .top .chip{flex:none;padding:10px 16px;margin-right:8px}
html.web .top .logo.sm{flex:none;margin-right:14px!important}
html.web .top .sp{flex:1;min-width:6px}
html.web .top input{flex:1;min-width:0;width:auto!important}
html.web .cats{flex:none;height:auto;overflow-x:auto;padding:8px 16px 6px}
html.web .cats .chip{flex:none;padding:9px 16px}
html.web .chip:hover{background:#26304f}
html.web .chip.sel:hover{background:rgba(255,107,53,.3)}
html.web .hero-ch{flex:none;margin-top:0;padding:8px 16px 0}
html.web .pv{width:54vw;height:30.4vw;max-height:40vh;max-width:71vh;cursor:pointer}
html.web .hero-ch .info{padding-left:24px}
html.web .hero-ch h2{font-size:30px;max-height:72px}
html.web .hero-ch .hint{margin-top:10px;font-size:15px;line-height:1.5}
html.web .strip{flex:1;min-height:0;height:auto;display:flex;flex-wrap:wrap;align-content:flex-start;overflow-x:hidden;overflow-y:auto;white-space:normal;padding:10px 16px calc(env(safe-area-inset-bottom,0px) + 40px)}
html.web .chcard{width:calc(25% - 10px);height:78px;margin:0 10px 10px 0;cursor:pointer}
html.web .chcard:hover{background:#26304f}
html.web .chcard:active{background:#2f3a5e}
@media (max-width:1180px){html.web .chcard{width:calc(33.333% - 10px)}}
@media (max-width:860px){html.web .pv{width:56vw;height:31.5vw}}
@media (max-width:700px){html.web .chcard{width:calc(50% - 10px)}}
@media (max-width:640px){
  html.web .hero-ch{flex-direction:column;align-items:stretch;padding:6px 12px 0}
  html.web .pv{width:100%;height:56.25vw;max-height:34vh;max-width:none}
  html.web .hero-ch .info{padding:8px 2px 0}
  html.web .hero-ch h2{font-size:19px;margin:0 0 2px;max-height:none;white-space:nowrap;text-overflow:ellipsis}
  html.web .hero-ch .live{margin-bottom:4px;font-size:11px;padding:2px 10px}
  html.web .hero-ch .hint{display:none}
  html.web .hero-ch .info .muted{font-size:13px}
  html.web .cats{padding:6px 12px 4px}
  html.web .strip{padding:8px 12px calc(env(safe-area-inset-bottom,0px) + 40px)}
  html.web .chcard{width:calc(50% - 6px);margin:0 6px 8px 0;height:66px;padding:0 10px}
  html.web .chcard .cl{width:42px;height:42px;margin-right:9px}
  html.web .chcard .ct b{font-size:15px}
  html.web .top{padding-left:12px;padding-right:12px}
}
/* telas Tchola Flix, jogos e detalhes */
html.web .row{overflow-x:auto}
html.web .rail .row{padding:12px 16px}
html.web .rail h3{margin:6px 16px 0}
html.web .fhero{height:auto;max-width:none;padding:6px 16px 0}
html.web .fhero h2{font-size:30px}
html.web .tabs{overflow-x:auto}
html.web .poster{cursor:pointer}
html.web .poster:hover{box-shadow:0 0 0 3px #fff}
html.web .pgrid{padding:12px 16px 60px}
html.web .det{padding:20px 16px 60px}
html.web .det h1{font-size:32px}
html.web .eps .ep{width:100%;cursor:pointer}
html.web .eps .ep:hover{background:#26304f}
html.web .ev{width:calc(100% - 32px);margin-left:16px;cursor:pointer}
html.web .ev:hover{background:#26304f}
html.web .sec{margin-left:16px}
html.web .searchbar{padding:0 16px}
html.web .searchbar input{width:100%;max-width:560px}
@media (max-width:640px){
  html.web .poster{width:112px;height:168px;margin-right:10px}
  html.web .fhero h2{font-size:24px}
  html.web .fhero p{display:none}
  html.web .ev{height:auto;padding:12px;flex-wrap:wrap;font-size:17px}
  html.web .ev .tv{width:100%;text-align:left;margin-top:4px}
  html.web .ev .tm{width:70px}
  html.web .ev .sc{width:80px;font-size:22px}
  html.web .det h1{font-size:26px}
}
/* player: controles de toque */
.wctl{display:none;position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);justify-content:center;align-items:center;z-index:6}
.wctl .wb{background:rgba(0,0,0,.62);border-radius:50px;padding:13px 22px;font-size:20px;font-weight:700;margin:0 7px;cursor:pointer;border:1px solid rgba(255,255,255,.18)}
.wctl .wb.big{background:var(--or);border-color:var(--or)}
html.web #player.full.ui.chan .wctl{display:flex}
html.web #player.full.ui .pback{display:block}
html.web .pback{left:max(14px,env(safe-area-inset-left,0px));top:calc(env(safe-area-inset-top,0px) + 14px);cursor:pointer;font-size:17px;padding:9px 18px}
html.web #player.full.chan .ibar{padding-bottom:90px}
html.web .menu{max-width:100%;z-index:7}
html.web .menu .it{cursor:pointer}
html.web .menu .it:hover{background:rgba(255,255,255,.1)}
@media (max-width:640px){html.web .menu{width:100%}}
/* aparelhos de toque: sem o destaque de "foco do controle" (ele só serve para TV/teclado) */
@media (hover:none){
  html.web .chip.on{background:var(--card);color:#fff}
  html.web .chip.sel.on{background:rgba(255,107,53,.2);color:var(--or)}
  html.web .btn.on,html.web .btn.pri.on{background:var(--panel);color:#fff}
  html.web .btn.pri.on{background:var(--or)}
  html.web .chcard.on,html.web .poster.on{box-shadow:none;background:var(--card)}
  html.web .chcard.playing,html.web .chcard.on.playing{box-shadow:0 0 0 3px var(--or)}
  html.web .ev.on,html.web .eps .ep.on{background:var(--card);color:#fff}
  html.web .card.on{transform:none;box-shadow:none}
}
/* canais que só abrem no app (o navegador não envia o cabeçalho que o servidor exige) */
html.web .chcard.soapp{opacity:.6}
html.web .chcard .tagapp{position:absolute;right:8px;bottom:5px;font-size:11px;font-weight:700;color:var(--warn);background:rgba(0,0,0,.35);border-radius:6px;padding:1px 6px}
/* celular deitado / telas baixas: topo compacto para sobrar espaço para os canais */
@media (max-height:560px){
  html.web .top{min-height:46px;padding:4px 12px;padding-top:calc(env(safe-area-inset-top,0px) + 4px)}
  html.web .top .chip{padding:7px 14px;font-size:15px}
  html.web .top .logo.sm img{width:28px;height:28px}
  html.web .top .logo.sm b,html.web .top .logo.sm i{font-size:19px}
  html.web .hero-ch{padding:4px 12px 0}
  html.web .pv{height:36vh;width:64vh;max-height:none;max-width:none;border-width:2px}
  html.web .hero-ch .info{padding-left:16px}
  html.web .hero-ch h2{font-size:20px;margin:0 0 2px}
  html.web .hero-ch .hint{display:none}
  html.web .hero-ch .live{margin-bottom:4px;font-size:11px;padding:2px 10px}
  html.web .cats{padding:4px 12px 2px}
  html.web .cats .chip{padding:6px 14px;font-size:14px}
  html.web .strip{padding-top:6px}
  html.web .chcard{width:calc(25% - 10px);height:62px}
}