/* HTV 苹果版 · 手机竖屏样式
   取色与安卓手机版同一套：浅色中性极简 / 深色近黑 + 宝石蓝 */
:root{
  --canvas:#FAFAFA; --surface:#FFFFFF; --card:#FFFFFF; --elevated:#F0F0F3;
  --ink:#111111; --body:#666666; --muted:#9A9A9A;
  --hairline:rgba(0,0,0,.08); --hairline-2:rgba(0,0,0,.14);
  --brand:#1E25BB; --voltage:#0F4BFF; --danger:#E5484D;
  --nav-h:calc(58px + env(safe-area-inset-bottom));
  --top-h:calc(56px + env(safe-area-inset-top));
  --radius:12px;
}
@media (prefers-color-scheme: dark){
  :root{
    --canvas:#06070B; --surface:#10131A; --card:#161921; --elevated:#23273A;
    --ink:#F4F4F6; --body:#A0A3AD; --muted:#6B6F7B;
    --hairline:rgba(255,255,255,.10); --hairline-2:rgba(255,255,255,.18);
    --brand:#4D84FF; --voltage:#4D84FF;
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{
  background:var(--canvas);color:var(--ink);
  font-family:"PingFang SC","Microsoft YaHei UI","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  overflow:hidden;overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;
}
button,input{font-family:inherit}
button{border:0;background:none;color:inherit;padding:0;cursor:pointer}
input{-webkit-appearance:none;appearance:none}
.hidden{display:none!important}

#app{height:100dvh;display:flex;flex-direction:column}

/* ── 顶部 ── */
#topbar{
  height:var(--top-h);padding:env(safe-area-inset-top) 14px 0;
  display:flex;align-items:center;gap:10px;flex:0 0 auto;
  background:var(--canvas);position:relative;z-index:5;
}
.logo{width:34px;height:24px;color:var(--ink);flex:0 0 auto;display:flex;align-items:center}
.logo svg{width:34px;height:auto;display:block}
.searchwrap{
  flex:1;display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;
  background:var(--surface);border:1px solid var(--hairline);border-radius:19px;
}
.searchwrap:focus-within{border-color:var(--brand)}
.mag{width:17px;height:17px;fill:var(--muted);flex:0 0 auto}
#q{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font-size:15px}
#q::placeholder{color:var(--muted)}
#q::-webkit-search-cancel-button{display:none}
.qclear{width:20px;height:20px;line-height:18px;text-align:center;border-radius:50%;
  background:var(--hairline);color:var(--body);font-size:15px}
.qbtn{flex:0 0 auto;height:38px;padding:0 4px;color:var(--brand);font-size:15px;font-weight:600}

/* ── 主区域 ── */
#main{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(var(--nav-h) + 8px)}
.page{display:none;padding:0 0 18px}
.page.on{display:block}
.tip{padding:12px 16px;color:var(--body);font-size:13.5px;line-height:1.6;min-height:20px}
.sect{margin:18px 16px 10px;display:flex;align-items:baseline;justify-content:space-between}
.sect h2{margin:0;font-size:18px;font-weight:700;letter-spacing:.2px}
.sect .more{font-size:13px;color:var(--muted)}

/* 横滑 */
.hrow{display:flex;gap:10px;overflow-x:auto;padding:0 16px 4px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.hrow::-webkit-scrollbar{display:none}
.hrow .card{width:116px;flex:0 0 auto;scroll-snap-align:start}

/* 网格 */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 10px;padding:4px 14px}
@media (min-width:700px){.grid{grid-template-columns:repeat(6,1fr);max-width:980px;margin:0 auto}}

.card{position:relative;cursor:pointer}
.card .cover{
  width:100%;aspect-ratio:2/3;border-radius:10px;overflow:hidden;background:var(--elevated);
  position:relative;
}
.card .cover img{width:100%;height:100%;object-fit:cover;display:block}
.card .cover .ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:12px;text-align:center;padding:8px;line-height:1.4;
}
.card .badge{
  position:absolute;left:6px;bottom:6px;max-width:calc(100% - 12px);
  font-size:10.5px;line-height:1;padding:4px 6px;border-radius:6px;
  background:rgba(0,0,0,.62);color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.card .t{margin-top:6px;font-size:13px;line-height:1.35;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .m{margin-top:2px;font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card:active .cover{transform:scale(.97)}
.card .cover{transition:transform .12s ease}

/* ── 底部导航 ── */
#tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:20;height:var(--nav-h);
  padding-bottom:env(safe-area-inset-bottom);
  display:flex;background:var(--surface);border-top:1px solid var(--hairline);
  backdrop-filter:saturate(180%) blur(18px);
}
#tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--body);font-size:12px;position:relative}
#tabbar button.on{color:var(--brand);font-weight:700}
#tabbar button.on::after{
  content:"";position:absolute;bottom:6px;width:16px;height:3px;border-radius:2px;background:var(--brand);
}
@media (prefers-color-scheme: dark){#tabbar button.on{color:#E6E8EC}}

/* ── 详情页 ── */
.dtop{display:flex;gap:14px;padding:6px 16px 0}
.dtop .cover{width:108px;flex:0 0 auto;aspect-ratio:2/3;border-radius:10px;overflow:hidden;background:var(--elevated)}
.dtop .cover img{width:100%;height:100%;object-fit:cover}
.dinfo{flex:1;min-width:0;padding-top:2px}
.dinfo h1{margin:0;font-size:20px;line-height:1.3;font-weight:800}
.dmeta{margin-top:8px;font-size:12.5px;color:var(--body);line-height:1.7}
.dmeta b{color:var(--ink);font-weight:600}
.dbtns{display:flex;gap:10px;margin-top:12px}
.dbtn{height:38px;padding:0 20px;border-radius:19px;background:var(--ink);color:var(--canvas);
  font-size:14px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.dbtn.ghost{background:var(--elevated);color:var(--ink)}
.ddesc{margin:14px 16px 0;font-size:13.5px;line-height:1.75;color:var(--body);white-space:pre-wrap}
.dsec{margin:18px 16px 0;font-size:15px;font-weight:700}
.eps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px 16px 0}
@media (min-width:700px){.eps{grid-template-columns:repeat(8,1fr);max-width:980px}}
.ep{height:36px;border-radius:8px;background:var(--elevated);color:var(--ink);font-size:12.5px;
  display:flex;align-items:center;justify-content:center;padding:0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ep.on{background:var(--ink);color:var(--canvas)}
.linebar{display:flex;gap:8px;overflow-x:auto;padding:10px 16px 0}
.linebar button{flex:0 0 auto;height:30px;padding:0 12px;border-radius:15px;background:var(--elevated);
  color:var(--body);font-size:12px}
.linebar button.on{background:var(--ink);color:var(--canvas)}

/* ── 我的 / 会员 / 设置 ── */
.me-head{display:flex;align-items:center;gap:14px;padding:14px 18px 18px}
.me-avatar{width:58px;height:58px;border-radius:50%;background:var(--ink);color:var(--canvas);
  display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800}
.me-name{font-size:19px;font-weight:800}
.me-sub{margin-top:4px;font-size:12.5px;color:var(--body)}
.mlist{margin:0 14px;background:var(--surface);border:1px solid var(--hairline);border-radius:14px;overflow:hidden}
.mrow{display:flex;align-items:center;gap:12px;padding:15px 16px;border-bottom:1px solid var(--hairline);font-size:15px}
.mrow:last-child{border-bottom:0}
.mrow .k{flex:1}
.mrow .v{font-size:12.5px;color:var(--muted);max-width:52%;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow .arrow{color:var(--muted);font-size:17px;line-height:1}
.mrow:active{background:var(--elevated)}
.mcard{margin:14px 14px 0;padding:16px;border-radius:16px;background:var(--ink);color:var(--canvas)}
.mcard .t1{font-size:13px;opacity:.72}
.mcard .t2{margin-top:6px;font-size:22px;font-weight:800}
.mcard .t3{margin-top:8px;font-size:12.5px;opacity:.72;line-height:1.6}
.mcard.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--hairline)}
.mcard.ghost .t1,.mcard.ghost .t3{opacity:.62}
.plan{display:flex;gap:10px;padding:12px 14px 0}
.plan .p{flex:1;border:1px solid var(--hairline);border-radius:14px;padding:14px 10px;text-align:center;background:var(--surface)}
.plan .p.on{border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 22%,transparent)}
.plan .p .k{font-size:13px;color:var(--body)}
.plan .p .v{margin-top:6px;font-size:19px;font-weight:800}
.plan .p .u{font-size:11px;color:var(--muted);margin-top:2px}
.field{margin:14px;display:flex;gap:8px}
.field input{flex:1;height:44px;border-radius:12px;border:1px solid var(--hairline);
  background:var(--surface);color:var(--ink);padding:0 14px;font-size:16px;letter-spacing:1px;outline:0}
.field input:focus{border-color:var(--brand)}
.field button{height:44px;padding:0 18px;border-radius:12px;background:var(--ink);color:var(--canvas);font-weight:700}
.note{margin:12px 16px;font-size:12.5px;line-height:1.7;color:var(--muted)}

/* ── 直播 ── */
.lgroup{margin:14px 16px 6px;font-size:15px;font-weight:700}
.lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 14px}
@media (min-width:700px){.lgrid{grid-template-columns:repeat(6,1fr);max-width:980px;margin:0 auto}}
.lch{height:44px;border-radius:10px;background:var(--surface);border:1px solid var(--hairline);
  display:flex;align-items:center;justify-content:center;font-size:13px;padding:0 6px;text-align:center;overflow:hidden}
.lch:active{background:var(--elevated)}

/* ── 播放器 ── */
#player{position:fixed;inset:0;z-index:100;background:#000;color:#fff;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
#video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
#p-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent 22%,transparent 70%,rgba(0,0,0,.68));
  pointer-events:none;transition:opacity .2s}
#p-top{position:absolute;top:0;left:0;right:0;padding:calc(env(safe-area-inset-top) + 8px) 12px 8px;
  display:flex;align-items:center;gap:10px;transition:opacity .2s}
#p-title{flex:1;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#p-center{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:center;gap:26px;transition:opacity .2s}
#p-bottom{position:absolute;left:0;right:0;bottom:0;padding:10px 14px calc(env(safe-area-inset-bottom) + 12px);
  transition:opacity .2s}
#player.hide-ui #p-top,#player.hide-ui #p-center,#player.hide-ui #p-bottom,#player.hide-ui #p-shade{opacity:0;pointer-events:none}
.pbtn{background:rgba(255,255,255,.14);color:#fff;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  backdrop-filter:blur(8px)}
.pbtn:active{background:rgba(255,255,255,.28)}
.pbtn.small{height:32px;padding:0 12px;border-radius:16px;font-size:12.5px}
.pbtn.big{width:54px;height:54px;font-size:16px}
.pbtn.xbig{width:68px;height:68px;font-size:24px}
#p-back{width:36px;height:36px;font-size:24px;line-height:1;border-radius:50%;background:rgba(255,255,255,.14)}
.prow{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:rgba(255,255,255,.82);margin-bottom:4px}
.prow.actions{justify-content:flex-end;gap:8px;margin-top:8px}
#p-hint{color:#FFD166}
#p-seek{width:100%;height:3px;margin:6px 0;accent-color:#fff;background:rgba(255,255,255,.3);border-radius:2px}
#p-seek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff}
#p-sheet{position:absolute;left:0;right:0;bottom:0;max-height:56%;overflow-y:auto;
  background:rgba(18,20,26,.97);border-radius:16px 16px 0 0;padding:14px 16px calc(env(safe-area-inset-bottom) + 18px);
  backdrop-filter:blur(20px)}
#p-sheet h3{margin:0 0 12px;font-size:15px}
#p-sheet .eps{padding:0;grid-template-columns:repeat(4,1fr)}
#p-sheet .ep{background:rgba(255,255,255,.12);color:#fff}
#p-sheet .ep.on{background:#fff;color:#111}
#p-sheet .linebar{padding:0;flex-wrap:wrap}
#p-sheet .linebar button{background:rgba(255,255,255,.12);color:#fff}
#p-sheet .linebar button.on{background:#fff;color:#111}
#p-sheet .rate{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#p-sheet .rate button{height:40px;border-radius:10px;background:rgba(255,255,255,.12);color:#fff;font-size:13px}
#p-sheet .rate button.on{background:#fff;color:#111}

/* ── 提示 / 弹窗 ── */
#toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + 18px);transform:translateX(-50%);
  background:rgba(20,22,28,.92);color:#fff;font-size:13px;padding:10px 16px;border-radius:20px;
  z-index:300;max-width:82%;text-align:center;line-height:1.5;backdrop-filter:blur(10px)}
#dialog{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:24px}
#dialog .dlg-body{width:100%;max-width:340px;background:var(--surface);color:var(--ink);border-radius:18px;
  padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
#dialog h3{margin:0 0 10px;font-size:17px}
#dialog p{margin:0 0 16px;font-size:13.5px;line-height:1.7;color:var(--body)}
#dialog .acts{display:flex;gap:10px}
#dialog .acts button{flex:1;height:40px;border-radius:12px;background:var(--elevated);font-weight:700}
#dialog .acts button.primary{background:var(--ink);color:var(--canvas)}

/* 搜索页顶部提示条 */
.searchhint{display:flex;align-items:center;gap:8px;padding:10px 16px 0;font-size:13px;color:var(--body)}
.searchhint b{color:var(--ink)}
/* ── 补充：占位图与子页返回 ── */
.card .cover .ph{z-index:0}
.card .cover img{position:relative;z-index:1}
.pageback{padding:6px 16px 2px}
.pageback button{height:34px;padding:0 10px;border-radius:17px;background:var(--elevated);color:var(--body);font-size:13px}
#dialog p{white-space:pre-wrap}

/* ── 手动主题（设置页切换） ── */
html[data-theme="light"]{
  --canvas:#FAFAFA; --surface:#FFFFFF; --card:#FFFFFF; --elevated:#F0F0F3;
  --ink:#111111; --body:#666666; --muted:#9A9A9A;
  --hairline:rgba(0,0,0,.08); --hairline-2:rgba(0,0,0,.14);
  --brand:#1E25BB; --voltage:#0F4BFF;
}
html[data-theme="dark"]{
  --canvas:#06070B; --surface:#10131A; --card:#161921; --elevated:#23273A;
  --ink:#F4F4F6; --body:#A0A3AD; --muted:#6B6F7B;
  --hairline:rgba(255,255,255,.10); --hairline-2:rgba(255,255,255,.18);
  --brand:#4D84FF; --voltage:#4D84FF;
}
html[data-theme="dark"] #tabbar button.on{color:#E6E8EC}
html[data-theme="dark"] .logo{color:#F4F4F6}
/* ── 窄屏防溢出（iPhone 390px 实测修正） ── */
#main{overflow-x:hidden}
#topbar{overflow:hidden}
.searchwrap{min-width:0}
#q{width:100%}
.qbtn{white-space:nowrap}
#tabbar{width:100%}
.logo{width:32px;height:21px}
.logo svg{width:32px;height:21px;display:block}
/* ── 再修一次：flex 子项默认 min-width:auto 会被横滑内容撑宽 ── */
html,body{max-width:100%;overflow-x:hidden}
#app{width:100%;max-width:100vw;min-width:0}
#main{min-width:0;max-width:100vw}
.hrow{max-width:100%;min-width:0}
.grid{max-width:100%;min-width:0}
#topbar,#tabbar{max-width:100vw}
/* ============================================================
   主页：中间搜索框 + 一行横滑推荐（用户 2026-10-20 定）
   ============================================================ */
body[data-page="home"] #topbar{
  flex-direction:column;
  height:auto;
  padding:calc(env(safe-area-inset-top) + 26px) 22px 4px;
  gap:16px;
  overflow:visible;
}
body[data-page="home"] .logo{width:88px;height:57px;margin:0 auto;flex:0 0 auto}
body[data-page="home"] .logo svg{width:88px;height:57px;display:block}
body[data-page="home"] .searchwrap{width:100%;height:46px;border-radius:23px;padding:0 16px}
body[data-page="home"] #q{font-size:16px}
body[data-page="home"] .qbtn{display:none}
body[data-page="home"] #home-body .sect{margin-top:20px}
body[data-page="home"] .hrow .card{width:128px}

/* 主页不显示多余的提示占位 */
body[data-page="home"] #home-tip:empty{display:none}

/* ============================================================
   关于页：大 LOGO 居中 + 底部钢印 chnloon
   ============================================================ */
.about-wrap{
  min-height:calc(100dvh - var(--top-h) - var(--nav-h) - 12px);
  display:flex;flex-direction:column;align-items:center;
  padding:8px 24px calc(var(--nav-h) + 10px);
}
.about-logo{
  flex:1;display:flex;align-items:center;justify-content:center;width:100%;
}
.about-logo svg{width:168px;height:109px;display:block;color:var(--ink)}
.stamp{
  margin-top:auto;margin-bottom:16px;
  font-family:"Courier New",Consolas,monospace;
  font-size:15px;font-weight:900;letter-spacing:7px;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(0,0,0,.30);
  border:2px solid rgba(0,0,0,.18);
  border-radius:6px;
  padding:7px 14px 7px 21px;
  transform:rotate(-7deg);
  box-shadow:inset 0 0 7px rgba(0,0,0,.08),0 1px 0 rgba(255,255,255,.65);
  opacity:.78;
  user-select:none;
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .stamp{
    -webkit-text-stroke-color:rgba(255,255,255,.34);
    border-color:rgba(255,255,255,.18);
    box-shadow:inset 0 0 7px rgba(255,255,255,.06),0 1px 0 rgba(0,0,0,.6);
  }
}
html[data-theme="dark"] .stamp{
  -webkit-text-stroke-color:rgba(255,255,255,.34);
  border-color:rgba(255,255,255,.18);
  box-shadow:inset 0 0 7px rgba(255,255,255,.06),0 1px 0 rgba(0,0,0,.6);
}
/* 关于页：独立全屏，不显示顶部搜索和底部导航 */
body.about-mode #topbar,
body.about-mode #tabbar{display:none}
body.about-mode #main{padding-bottom:0}
body.about-mode .about-wrap{
  min-height:calc(100dvh - 46px);
  padding:0 24px calc(env(safe-area-inset-bottom) + 30px);
}
body.about-mode .about-logo svg{width:184px;height:119px}
body.about-mode .stamp{
  margin-bottom:calc(env(safe-area-inset-bottom) + 18px);
  font-size:16px;
}

/* ============================================================
   主页按安卓手机版 1:1 对齐（2026-10-20）
   顶部留白 12vh → 100dp LOGO → 12vh → 搜索框+搜索按钮 → 5vh → 热门推荐
   ============================================================ */
.searchrow{display:flex;align-items:center;gap:10px;width:100%}
.searchrow .searchwrap{flex:1;min-width:0;height:46px}
.qbtn{
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;height:46px;padding:0 20px;border-radius:23px;
  background:var(--ink);color:var(--canvas);
  font-size:15px;font-weight:700;line-height:1;white-space:nowrap;
  box-sizing:border-box;
}
body[data-page="home"] .searchrow{max-width:560px;margin:0 auto}
body[data-page="home"] #topbar{
  padding:calc(env(safe-area-inset-top) + 12vh) 20px 4px;
  gap:12vh;
}
body[data-page="home"] .logo{width:155px;height:100px}
body[data-page="home"] .logo svg{width:155px;height:100px}
body[data-page="home"] .qbtn{display:inline-flex}
body[data-page="home"] #home-body .sect{margin:5vh 16px 10px}
body[data-page="home"] .hrow .card{width:112px}
body[data-page="home"] .hrow{gap:12px}
body[data-page="home"] #home-body{padding-bottom:12vh}