@font-face{font-family:'Baloo 2';font-style:normal;font-weight:700 800;font-display:swap;src:url(/assets/fonts/Baloo2.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/Nunito.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500 700;font-display:swap;src:url(/assets/fonts/JetBrainsMono.woff2) format('woff2')}

:root{
  --bg:#f1f2f3; --panel:#fff; --soft:#f6f7f8; --ink:#18191c; --ink2:#61666d; --ink3:#9499a0;
  --line:#e3e5e7; --blue:#00aeec; --blue-d:#0093c9; --blue-soft:#dff6fd;
  --pink:#fb7299; --pink-d:#e8517e; --pink-soft:#ffecf1; --mascot:#3672d9; --yellow:#ffb027;
  --r:12px; --top:64px; --rail:220px;
  --shadow:0 1px 2px rgba(24,25,28,.06);
}
:root[data-theme="dark"]{
  --bg:#0f1012; --panel:#17181b; --soft:#1e2024; --ink:#e7e8ea; --ink2:#a2a7ae; --ink3:#6f757c;
  --line:#2a2c31; --blue-soft:#0c2a36; --pink-soft:#35161f; --shadow:none;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--top) + 12px); -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font:400 15px/1.55 'Nunito',system-ui,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif; overflow-x:hidden}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}
svg{width:20px; height:20px; flex:none}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
h1,h2,h3,p{margin:0}
[hidden]{display:none !important}

::-webkit-scrollbar{width:10px; height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#c9ccd0; border-radius:10px; border:2px solid var(--bg)}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#3a3d43}
html{scrollbar-color:#c9ccd0 transparent}

:focus-visible{outline:2px solid var(--blue); outline-offset:2px}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; height:38px; padding:0 16px; border-radius:10px; border:1px solid transparent; font-weight:800; font-size:14px; cursor:pointer; white-space:nowrap; transition:background .15s, border-color .15s, transform .08s}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px; height:18px}
.btn.sm{height:32px; padding:0 12px; font-size:13px; border-radius:8px}
.btn.sm svg{width:16px; height:16px}
.btn.pink{background:var(--pink); color:#fff}
.btn.pink:hover{background:var(--pink-d)}
.btn.blue{background:var(--blue); color:#fff}
.btn.blue:hover{background:var(--blue-d)}
.btn.ghost{background:var(--panel); border-color:var(--line); color:var(--ink)}
.btn.ghost:hover{border-color:var(--blue); color:var(--blue)}
.icon-btn{width:40px; height:40px; border:0; background:transparent; border-radius:50%; display:inline-grid; place-items:center; cursor:pointer; color:var(--ink2)}
.icon-btn:hover{background:var(--soft); color:var(--ink)}
.icon-btn svg{width:22px; height:22px}

/* ---------- top bar ---------- */
.top{position:sticky; top:0; z-index:50; height:var(--top); display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px; padding:0 16px; background:var(--panel); border-bottom:1px solid var(--line)}
.top-l,.top-r{display:flex; align-items:center; gap:8px; min-width:0}
.logo{display:inline-flex; align-items:center; gap:6px; color:var(--blue)}
.logo-tv{width:30px; height:30px}
.logo-word{font:800 30px/1 'Baloo 2',sans-serif; letter-spacing:-.5px; transform:translateY(2px)}
.search{justify-self:center; width:100%; max-width:560px; height:42px; display:flex; background:var(--soft); border:1px solid var(--line); border-radius:12px; overflow:hidden; transition:border-color .15s, background .15s}
.search:focus-within{background:var(--panel); border-color:var(--blue)}
.search input{flex:1; min-width:0; border:0; background:transparent; padding:0 14px; font:600 14px 'Nunito',sans-serif; color:var(--ink); outline:none}
.search input::-webkit-search-cancel-button{display:none}
.search button{width:52px; border:0; background:transparent; color:var(--ink2); cursor:pointer; display:grid; place-items:center}
.search button:hover{color:var(--blue)}
.avatar{border-radius:50%; object-fit:cover; flex:none}
.top-avatar{width:36px; height:36px; border:2px solid var(--blue-soft)}
.search-open{display:none}

/* ---------- layout ---------- */
.shell{display:grid; grid-template-columns:var(--rail) minmax(0,1fr); width:100%; background:linear-gradient(to right, var(--panel) calc(var(--rail) - 1px), var(--line) calc(var(--rail) - 1px) var(--rail), transparent var(--rail))}
.shell.rail-mini{--rail:76px}
.rail{position:sticky; top:var(--top); height:calc(100vh - var(--top)); overflow-y:auto; padding:12px 10px 24px}
.rail-item{display:flex; align-items:center; gap:14px; height:44px; padding:0 14px; border-radius:10px; color:var(--ink2); font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden}
.rail-item:hover{background:var(--soft); color:var(--ink)}
.rail-item.is-on{background:var(--blue-soft); color:var(--blue)}
.rail-item svg{width:22px; height:22px}
.rail-item .soon{margin-left:auto; font-style:normal; font-size:11px; font-weight:800; color:var(--ink3); background:var(--soft); padding:1px 7px; border-radius:6px}
.rail-sep{height:1px; background:var(--line); margin:10px 6px}
.rail-head{padding:6px 14px; font-size:12px; font-weight:800; color:var(--ink3); text-transform:uppercase; letter-spacing:.8px}
.shell.rail-mini .rail-item{flex-direction:column; justify-content:center; gap:3px; height:62px; padding:0; font-size:10.5px}
.shell.rail-mini .rail-item .soon,.shell.rail-mini .rail-head,.shell.rail-mini .rail-sep{display:none}
.main{min-width:0; padding:20px 24px 48px}

/* ---------- banner ---------- */
.banner{position:relative; overflow:hidden; border-radius:16px; background:var(--mascot); color:#fff; min-height:190px; display:flex; align-items:center; padding:24px 36px}
.banner::before{content:""; position:absolute; inset:0; opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 24 24'%3E%3Cpath d='M7.2 3.3a1 1 0 0 1 1.4.1L10.9 6h2.2l2.3-2.6a1 1 0 1 1 1.5 1.3L15.8 6H18a4 4 0 0 1 4 4v7a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4v-7a4 4 0 0 1 4-4h2.2L7.1 4.7a1 1 0 0 1 .1-1.4Z' fill='%23fff'/%3E%3C/svg%3E");
  background-size:64px 64px; transform:rotate(-8deg) scale(1.3)}
.banner-copy{position:relative; z-index:1; min-width:0}
.banner-kicker{display:inline-block; font:700 12px/1 'JetBrains Mono',monospace; letter-spacing:.5px; background:rgba(255,255,255,.18); padding:6px 10px; border-radius:8px}
.banner-word{font:800 clamp(56px,8vw,112px)/.9 'Baloo 2',sans-serif; letter-spacing:-2px; margin-top:10px}
.banner-tag{font-weight:800; font-size:clamp(16px,1.6vw,21px); margin-top:4px}
.banner-mascot{position:absolute; right:4%; bottom:-6px; width:clamp(150px,19vw,250px); height:auto; z-index:1}

/* ---------- chips ---------- */
.chips{display:flex; gap:10px; margin:16px 0 18px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none; height:34px; padding:0 16px; display:inline-flex; align-items:center; border-radius:9px; background:var(--panel); border:1px solid var(--line); font-weight:700; font-size:14px; color:var(--ink2); white-space:nowrap}
.chip:hover{color:var(--blue); border-color:var(--blue)}
.chip.is-on{background:var(--ink); border-color:var(--ink); color:var(--panel)}

/* ---------- watch ---------- */
.watch{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:24px; align-items:start}
.watch-main{min-width:0}
.player{background:#000; border-radius:14px; overflow:hidden}
.player-stage{position:relative; aspect-ratio:16/9; background:var(--mascot); overflow:hidden; max-width:100%}
.stage-pattern{position:absolute; inset:0; background:radial-gradient(circle at 50% 110%, rgba(255,255,255,.22) 0 26%, transparent 26.2%), repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, transparent 2px 5px)}
.stage-mascot{position:absolute; left:50%; bottom:-4%; width:52%; max-width:520px; height:auto; transform:translateX(-50%); animation:bob 4.5s ease-in-out infinite}
.player.is-paused .stage-mascot,.player.is-paused .danmaku span{animation-play-state:paused}
@keyframes bob{50%{transform:translateX(-50%) translateY(-2.2%)}}
.stage-caption{position:absolute; left:18px; top:14px; font:800 15px/1 'Baloo 2',sans-serif; color:rgba(255,255,255,.85); background:rgba(0,0,0,.18); padding:6px 10px 4px; border-radius:7px}
.danmaku{position:absolute; inset:0 0 18% 0; pointer-events:none; overflow:hidden}
.danmaku.is-off{visibility:hidden}
.danmaku span{position:absolute; left:100%; white-space:nowrap; font-weight:800; font-size:clamp(13px,1.9vw,24px); line-height:1.25; color:#fff; text-shadow:0 0 2px #000, 1px 1px 0 rgba(0,0,0,.55); animation:fly linear forwards; will-change:transform}
.danmaku span.mine{border:1.5px solid #fff; padding:0 6px; border-radius:4px}
@keyframes fly{to{transform:translateX(calc(-1px * var(--dist, 2000)))}}
.player-bar{display:flex; align-items:center; gap:10px; height:46px; padding:0 10px; background:#0b0c0e; color:#fff}
.p-btn{width:34px; height:34px; border:0; background:transparent; color:#fff; border-radius:8px; display:grid; place-items:center; cursor:pointer; flex:none}
.p-btn:hover{background:rgba(255,255,255,.12)}
.p-time{font-size:12px; color:#cfd3d8; white-space:nowrap}
.p-progress{flex:1; min-width:30px; height:4px; background:rgba(255,255,255,.2); border-radius:4px; overflow:hidden}
.p-progress i{display:block; height:100%; width:0; background:var(--pink)}
.p-dm{flex:none; width:34px; height:26px; border:1.5px solid rgba(255,255,255,.5); background:transparent; color:#fff; border-radius:6px; font-weight:800; font-size:13px; cursor:pointer}
.p-dm.is-on{background:var(--blue); border-color:var(--blue)}
.dm-send{display:flex; gap:8px; padding:8px 10px; background:#16181b}
.dm-send input{flex:1; min-width:0; height:32px; border-radius:8px; border:1px solid #2c2f34; background:#0e0f11; color:#fff; padding:0 12px; font:600 13px 'Nunito',sans-serif; outline:none}
.dm-send input:focus{border-color:var(--blue)}
.player:fullscreen{display:flex; flex-direction:column; justify-content:center; border-radius:0}
.player:fullscreen .player-stage{aspect-ratio:auto; flex:1}

.v-title{font:800 clamp(19px,1.8vw,23px)/1.3 'Nunito',sans-serif; margin-top:16px; overflow-wrap:anywhere}
.v-meta{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; color:var(--ink2); font-size:12.5px; font-weight:700}
.v-meta span{background:var(--panel); border:1px solid var(--line); padding:2px 9px; border-radius:6px; white-space:nowrap}
.v-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.act{display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border-radius:999px; border:1px solid var(--line); background:var(--panel); font-weight:800; font-size:14px; color:var(--ink2); cursor:pointer}
.act:hover{color:var(--blue); border-color:var(--blue)}
.act[aria-pressed="true"]{color:var(--blue); border-color:var(--blue); background:var(--blue-soft)}
.act.act-coin{color:var(--pink); border-color:var(--pink)}
.act.act-coin:hover{background:var(--pink-soft)}
.act.pop svg{animation:pop .35s ease}
@keyframes pop{40%{transform:scale(1.35) rotate(-10deg)}}

.channel{display:flex; align-items:center; gap:12px; margin-top:16px; padding:14px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r)}
.channel .avatar{width:48px; height:48px}
.channel-txt{min-width:0; flex:1}
.channel-name{font-weight:800; font-size:16px; display:flex; align-items:center; gap:6px}
.channel-sub{color:var(--ink3); font-size:13px; font-weight:600}
.badge{display:inline-block; font:800 10px/1 'Nunito',sans-serif; color:#fff; background:var(--pink); padding:3px 5px 2px; border-radius:4px; letter-spacing:.3px}

.desc{margin-top:12px; padding:14px 16px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); font-size:14.5px; color:var(--ink)}
.desc-more{display:none; margin-top:10px}
.desc.is-open .desc-more{display:block}
.desc-more p{color:var(--ink2)}
.desc-toggle{margin-top:8px; border:0; background:transparent; padding:0; font-weight:800; color:var(--ink2); cursor:pointer}
.desc-toggle:hover{color:var(--blue)}
.ca-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-top:12px}
.ca-label{font:800 11px/1 'Nunito',sans-serif; color:#fff; background:var(--ink); padding:5px 7px; border-radius:6px}
.ca-value{font-size:13px; background:var(--soft); border:1px solid var(--line); padding:6px 10px; border-radius:8px; overflow-wrap:anywhere; min-width:0}

/* up next */
.upnext{min-width:0; display:flex; flex-direction:column; gap:12px}
.upnext-head{font-weight:800; font-size:16px}
.mini{display:grid; grid-template-columns:168px minmax(0,1fr); gap:12px; align-items:start; border-radius:10px}
.mini:hover .mini-txt strong{color:var(--blue)}
.thumb{position:relative; aspect-ratio:16/9; border-radius:10px; overflow:hidden; display:block; background:var(--mascot)}
.thumb img{position:absolute; right:-6%; bottom:-14%; width:62%; height:auto; transition:transform .25s}
.mini:hover .thumb img{transform:translateY(-4%) rotate(-3deg)}
.thumb b{position:absolute; left:10px; top:8px; font:800 19px/1 'Baloo 2',sans-serif; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.15)}
.dur{position:absolute; right:6px; bottom:6px; font-style:normal; font-size:11px; color:#fff; background:rgba(0,0,0,.72); padding:2px 5px; border-radius:4px}
.mini-txt{display:flex; flex-direction:column; gap:3px; min-width:0}
.mini-txt strong{font-weight:800; font-size:14px; line-height:1.35; overflow-wrap:anywhere}
.mini-txt em{font-style:normal; font-size:12.5px; color:var(--ink3); font-weight:600}
.t-blue{background:var(--mascot)}
.t-blue2{background:var(--blue)}
.t-pink{background:var(--pink)}
.t-ink{background:#18191c}
.t-yellow{background:var(--yellow)}

/* ---------- blocks ---------- */
.block{margin-top:44px; min-width:0}
.block-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; margin-bottom:16px}
.block-head h2{font:800 clamp(24px,2.3vw,30px)/1.15 'Baloo 2',sans-serif; display:flex; align-items:center; gap:10px}
.block-head p{color:var(--ink3); font-weight:600; font-size:14px}
.count{font-size:14px; color:var(--ink3); font-weight:500}
.block.is-hit .block-head h2{color:var(--blue)}

.cards{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px}
.card{min-width:0; display:flex; flex-direction:column}
.card-thumb{position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden}
.card-thumb::after{content:""; position:absolute; right:-10%; bottom:-30%; width:58%; aspect-ratio:1; background:url(/assets/mascot-cutout.webp) center/contain no-repeat}
.step{position:absolute; left:14px; top:10px; font-size:clamp(34px,3.4vw,48px); font-weight:700; color:#fff; line-height:1}
.card h3{font-weight:800; font-size:16px; margin-top:10px}
.card p{color:var(--ink2); font-size:14px; margin-top:4px}
.card-btn{align-self:flex-start; margin-top:10px}

.flow{display:grid; grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr) 34px minmax(0,1fr); align-items:stretch; gap:0}
.flow-step{min-width:0; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:18px}
.flow-step.is-pink{background:var(--pink-soft); border-color:#ffc8d7}
:root[data-theme="dark"] .flow-step.is-pink{border-color:#5a2434}
.flow-n{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:8px; background:var(--blue); color:#fff; font-size:14px; font-weight:700}
.flow-step.is-pink .flow-n{background:var(--pink)}
.flow-step h3{font-weight:800; font-size:17px; margin-top:10px}
.flow-step p{color:var(--ink2); font-size:14px; margin-top:4px}
.flow-arrow{position:relative}
.flow-arrow::before{content:""; position:absolute; left:6px; right:10px; top:50%; height:2px; background:var(--line)}
.flow-arrow::after{content:""; position:absolute; right:6px; top:calc(50% - 5px); border:6px solid transparent; border-left:8px solid var(--ink3); border-right:0}

.specs{margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.specs div{padding:16px 18px; border-bottom:1px solid var(--line); border-right:1px solid var(--line); min-width:0}
.specs dt{font-size:12px; font-weight:800; color:var(--ink3); text-transform:uppercase; letter-spacing:.7px}
.specs dd{margin:4px 0 0; font-weight:800; font-size:16px; overflow-wrap:anywhere}
.specs .specs-ca{grid-column:1/-1; border-right:0; border-bottom:0}
.specs-ca dd{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.specs-ca code{font-size:14px; font-weight:500; overflow-wrap:anywhere; min-width:0}

.playlist{list-style:none; margin:0; padding:0; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.playlist li{display:grid; grid-template-columns:70px minmax(0,1fr) auto; gap:14px; align-items:center; padding:14px 18px; border-bottom:1px solid var(--line)}
.playlist li:last-child{border-bottom:0}
.playlist li.is-now{background:var(--blue-soft)}
.ep{font-size:13px; font-weight:700; color:var(--ink3)}
.is-now .ep{color:var(--blue)}
.playlist h3{font-weight:800; font-size:16px}
.playlist p{color:var(--ink2); font-size:14px}
.ep-tag{font-size:12px; font-weight:800; color:#fff; background:var(--blue); padding:3px 9px; border-radius:6px; white-space:nowrap}

.comment-box{display:flex; align-items:center; gap:12px; margin-bottom:8px}
.comment-box .avatar{width:36px; height:36px}
.fake-input{flex:1; height:40px; border-radius:10px; background:var(--panel); border:1px solid var(--line); color:var(--ink3); display:flex; align-items:center; padding:0 14px; font-size:14px; font-weight:600}
.comments{list-style:none; margin:0; padding:0}
.comment{display:grid; grid-template-columns:36px minmax(0,1fr); gap:12px; padding:16px 0; border-bottom:1px solid var(--line)}
.c-av{width:36px; height:36px; border-radius:50%; background:var(--c); color:#fff; display:grid; place-items:center; font-weight:800}
.c-user{font-weight:800; font-size:13px; color:var(--ink2)}
.c-text{font-size:15px; margin-top:2px; overflow-wrap:anywhere}
.reply{display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; margin-top:10px; padding:10px 12px; background:var(--panel); border:1px solid var(--line); border-radius:10px}
.reply .avatar{width:28px; height:28px}
.reply p{font-size:14px; color:var(--ink2); overflow-wrap:anywhere}
.reply strong{display:flex; align-items:center; gap:6px; color:var(--ink); font-size:13px; margin-bottom:1px}

.foot{margin-top:48px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px 40px}
.foot-l p{color:var(--ink3); font-weight:700; font-size:14px; margin-top:4px}
.foot-note{max-width:560px; color:var(--ink3); font-size:13px}

/* ---------- mobile bits ---------- */
.tabbar{display:none}
.search-sheet{position:fixed; inset:0 0 auto 0; z-index:60; height:var(--top); display:flex; align-items:center; gap:10px; padding:0 12px; background:var(--panel); border-bottom:1px solid var(--line)}
.search-sheet .search{max-width:none}
.toast{position:fixed; left:50%; bottom:28px; z-index:80; transform:translate(-50%,20px); opacity:0; pointer-events:none; background:var(--ink); color:var(--panel); font-weight:800; font-size:14px; padding:10px 16px; border-radius:10px; transition:opacity .2s, transform .2s; max-width:calc(100vw - 32px); text-align:center}
.toast.is-on{opacity:1; transform:translate(-50%,0)}

@media (min-width:1800px){
  .main{padding:24px 32px 56px}
  .watch{grid-template-columns:minmax(0,1fr) 440px; gap:28px}
  .mini{grid-template-columns:190px minmax(0,1fr)}
  .player-stage{max-height:calc(100vh - 290px); aspect-ratio:auto; height:min(calc((100vw - var(--rail) - 64px - 468px) * 9 / 16), calc(100vh - 290px))}
  .cards{gap:22px}
}
@media (max-width:1400px){
  .watch{grid-template-columns:minmax(0,1fr) 330px}
  .mini{grid-template-columns:140px minmax(0,1fr)}
}
@media (max-width:1180px){
  .shell,.shell.rail-mini{--rail:76px}
  .rail-item{flex-direction:column; justify-content:center; gap:3px; height:62px; padding:0; font-size:10.5px}
  .rail-item .soon,.rail-head,.rail-sep{display:none}
  .rail-toggle{display:none}
  .watch{grid-template-columns:minmax(0,1fr)}
  .upnext{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
  .upnext-head{grid-column:1/-1}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .ca-btn span{display:none}
  .ca-btn{width:38px; padding:0}
  .flow{grid-template-columns:minmax(0,1fr); gap:10px}
  .flow-arrow{height:18px}
  .flow-arrow::before{left:50%; right:auto; top:0; bottom:6px; width:2px; height:auto}
  .flow-arrow::after{left:calc(50% - 6px); right:auto; top:auto; bottom:0; border:6px solid transparent; border-top:8px solid var(--ink3); border-bottom:0}
  .specs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  :root{--top:56px}
  .shell,.shell.rail-mini{grid-template-columns:minmax(0,1fr); background:none}
  .rail{display:none}
  .top{gap:8px; padding:0 10px 0 12px; grid-template-columns:auto minmax(0,1fr) auto}
  .top .search{display:none}
  .search-open{display:inline-grid}
  .top-avatar,.ca-btn,[data-theme-toggle]{display:none}
  .top-r{justify-self:end; gap:4px}
  .logo-word{font-size:26px}
  .logo-tv{width:26px; height:26px}
  .buy-btn{height:36px; padding:0 13px}
  .main{padding:12px 12px calc(84px + env(safe-area-inset-bottom))}
  .banner{min-height:150px; padding:18px; border-radius:14px}
  .banner-word{letter-spacing:-1px}
  .banner-tag{max-width:58%}
  .banner-mascot{width:40%; max-width:190px; right:2%}
  .chips{margin:12px -12px 14px; padding:0 12px 2px; gap:8px}
  .chip{height:32px; padding:0 13px; font-size:13px}
  .player{border-radius:12px; margin:0 -12px; border-radius:0}
  .stage-mascot{width:58%}
  .v-actions{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px}
  .act{justify-content:center; flex-direction:column; gap:2px; height:56px; padding:0; border-radius:12px; font-size:12px}
  .channel{padding:12px}
  .follow span{display:none}
  .follow{width:40px; padding:0}
  .upnext{grid-template-columns:minmax(0,1fr)}
  .mini{grid-template-columns:132px minmax(0,1fr); gap:10px}
  .thumb b{font-size:16px}
  .block{margin-top:34px}
  .cards{grid-template-columns:minmax(0,1fr); gap:14px}
  .card{display:grid; grid-template-columns:132px minmax(0,1fr); column-gap:12px; align-items:start}
  .card-thumb{grid-row:1/span 4}
  .card-thumb .dur{display:none}
  .card-thumb::after{width:66%; right:-14%; bottom:-34%}
  .card-btn{justify-self:start}
  .card h3{margin-top:0; font-size:15px}
  .card p{font-size:13.5px}
  .step{font-size:30px; left:10px; top:8px}
  .specs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .specs div{padding:12px 14px}
  .specs dd{font-size:15px}
  .playlist li{grid-template-columns:52px minmax(0,1fr); padding:12px 14px; gap:10px}
  .ep-tag{grid-column:2; justify-self:start}
  .tabbar{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); position:fixed; left:0; right:0; bottom:0; z-index:50; height:calc(62px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); background:var(--panel); border-top:1px solid var(--line)}
  .tabbar a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:11px; font-weight:700; color:var(--ink2); min-width:0}
  .tabbar a span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
  .tabbar svg{width:22px; height:22px}
  .tabbar .tab-buy{color:var(--pink)}
  .tabbar .tab-buy svg{width:30px; height:30px; padding:4px; background:var(--pink); color:#fff; border-radius:50%}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom))}
}
@media (max-width:400px){
  .mini,.card{grid-template-columns:112px minmax(0,1fr)}
  .buy-btn svg{display:none}
  .specs{grid-template-columns:minmax(0,1fr)}
  .specs div{border-right:0}
  .banner-tag{font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .stage-mascot{animation:none}
}