/* ============ 乒乓赛事报告 ============ */
:root{
  --bg:#0b1220;
  --panel:#121c30;
  --panel2:#16233b;
  --line:#1f2c47;
  --text:#e8eefb;
  --muted:#93a3c0;
  --accent:#ff7a1a;
  --accent2:#ffd166;
  --green:#22c55e;
  --amber:#f59e0b;
  --slate:#64748b;
  --red:#ef4444;
  --gold:#eab308;
  --purple:#a78bfa;
  --sky:#38bdf8;
  --radius:16px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Segoe UI",Roboto,sans-serif;
  line-height:1.55;
  padding-bottom:env(safe-area-inset-bottom);
}
#app{max-width:1080px;margin:0 auto;padding:0 14px 40px}
.hidden{display:none!important}

/* ---------- 左上角返回按钮（有来源页时显示） ---------- */
.btn-circle-back{
  flex:none;width:36px;height:36px;border-radius:50%;cursor:pointer;
  background:var(--panel2);color:#ffd166;font-size:17px;line-height:1;
  border:1px solid var(--line);padding:0;
  display:flex;align-items:center;justify-content:center;
}
.btn-circle-back:active{transform:scale(.92)}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 4px;
  background:rgba(11,18,32,.86);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand-logo{width:40px;height:40px;flex:none;filter:drop-shadow(0 2px 6px rgba(255,122,26,.35))}
.brand-text h1{font-size:19px;letter-spacing:1px;white-space:nowrap}
.brand-sub{font-size:10.5px;color:var(--muted);letter-spacing:.5px;margin-top:1px}
.top-actions{display:flex;gap:8px;flex:none}
.btn-ghost,.btn-install{
  border:1px solid var(--line);background:var(--panel);color:var(--text);
  padding:7px 12px;border-radius:999px;font-size:12.5px;cursor:pointer;
}
.btn-install{background:linear-gradient(135deg,#ff7a1a,#ff5f1a);border-color:transparent;color:#fff;font-weight:700}
.btn-ghost:active,.btn-install:active{transform:scale(.96)}

/* ---------- 分类 Tab ---------- */
.tabs{
  position:sticky;top:65px;z-index:40;
  display:flex;gap:8px;overflow-x:auto;padding:12px 2px;
  background:rgba(11,18,32,.9);backdrop-filter:blur(10px);
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:none;border:1px solid var(--line);background:var(--panel);color:var(--muted);
  padding:8px 16px;border-radius:999px;font-size:13.5px;cursor:pointer;transition:.15s;
}
.tab.active{
  color:#fff;border-color:transparent;
  background:linear-gradient(135deg,#ff7a1a,#ff4f1a);
  font-weight:700;box-shadow:0 4px 12px rgba(255,90,26,.3);
}

/* ---------- 工具栏 ---------- */
.toolbar{display:flex;flex-direction:column;gap:10px;margin:8px 0 4px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  border:1px solid var(--line);background:transparent;color:var(--muted);
  padding:6px 14px;border-radius:999px;font-size:12.5px;cursor:pointer;
}
.chip.active{color:var(--accent);border-color:var(--accent);background:rgba(255,122,26,.1);font-weight:600}
#searchInput{
  width:100%;padding:11px 14px;border-radius:12px;border:1px solid var(--line);
  background:var(--panel);color:var(--text);font-size:14px;outline:none;
}
#searchInput:focus{border-color:var(--accent)}
#searchInput::placeholder{color:var(--muted)}

/* ---------- 列表 ---------- */
.section-head{display:flex;align-items:baseline;gap:10px;margin:22px 2px 12px}
.section-head h2{font-size:18px;letter-spacing:1px}
.section-head h2::before{content:"";display:inline-block;width:5px;height:16px;border-radius:3px;background:var(--accent);margin-right:8px;vertical-align:-2px}
.count{font-size:12px;color:var(--muted)}
.cards{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:720px){.cards{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.cards{grid-template-columns:1fr 1fr 1fr}}

.card{
  display:flex;flex-direction:column;gap:8px;
  background:linear-gradient(160deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 16px;position:relative;overflow:hidden;
}
.card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--card-color,var(--slate));opacity:.85;
}
.card-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.badge{font-size:11px;padding:3px 9px;border-radius:999px;font-weight:600;letter-spacing:.5px}
.badge-tier{background:rgba(255,255,255,.08);color:var(--card-color,var(--text));border:1px solid rgba(255,255,255,.14)}
.badge-cont{background:rgba(148,163,184,.12);color:var(--muted)}
.badge-st{margin-left:auto;border:1px solid}
.badge-st.up{color:var(--green);border-color:rgba(34,197,94,.4);background:rgba(34,197,94,.1)}
.badge-st.ing{color:var(--amber);border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.12)}
.badge-st.done{color:var(--slate);border-color:rgba(100,116,139,.4);background:rgba(100,116,139,.1)}
.badge-st.tbd{color:var(--sky);border-color:rgba(56,189,248,.4);background:rgba(56,189,248,.08)}
.card h3{font-size:16px;line-height:1.35}
.card .meta{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted)}
.card .desc{font-size:12.5px;color:#b9c6de;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}
.cd{font-size:13px;font-weight:700;color:var(--accent)}
.cd.hot{animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.55}}
.result{font-size:12px;color:var(--accent2)}
.card .link{font-size:12px;color:var(--sky);text-decoration:none;flex:none}
.card .link:active{opacity:.7}
.approx{font-size:10.5px;color:var(--muted);border:1px dashed rgba(147,163,192,.4);padding:1px 6px;border-radius:6px}
.empty{text-align:center;color:var(--muted);padding:40px 0;font-size:14px}

/* ---------- 门户栏目 Tab ---------- */
.portal-tabs{
  display:flex;gap:8px;margin:14px 2px 4px;
}
.portal-tab{
  flex:1;cursor:pointer;border:1px solid var(--line);background:var(--panel);
  color:var(--muted);padding:10px 14px;border-radius:12px;font-size:14px;
  transition:.15s;
}
.portal-tab.active{
  color:#fff;border-color:transparent;font-weight:700;
  background:linear-gradient(135deg,#ff7a1a,#ff4f1a);
  box-shadow:0 4px 12px rgba(255,90,26,.3);
}
.portal-tab:active{transform:scale(.97)}

/* ---------- 影视检索面板 ---------- */
.film-card{
  background:linear-gradient(160deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:var(--radius);padding:16px;
}
.film-card p{font-size:13.5px;color:#b9c6de;line-height:1.8;margin-bottom:10px}
.film-card p b{color:#ffd166}
.film-card p i{color:#ffd166;font-style:normal}
.film-tags{display:flex;flex-wrap:wrap;gap:8px}
.film-tags a{
  font-size:12.5px;color:#ffd166;text-decoration:none;font-weight:600;
  background:rgba(255,209,102,.08);border:1px solid rgba(255,209,102,.3);
  padding:6px 12px;border-radius:999px;
}
.film-tags a:active{transform:scale(.95)}

/* ---------- 视频直达搜索 ---------- */
.vsearch{margin:10px 2px 4px}
.vs-input-wrap{position:relative}
.vs-clear{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:24px;height:24px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.14);color:#B5E6A2;font-size:13px;line-height:1;
  display:flex;align-items:center;justify-content:center;padding:0;
}
.vs-clear:active{transform:translateY(-50%) scale(.9)}
#vsInput{padding-right:42px !important}
.vsearch-box{
  display:flex;flex-direction:column;gap:10px;
  background:linear-gradient(160deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:var(--radius);padding:14px;
}
#vsInput, #searchInput{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid #2a3a5c !important;
  background:#16233b !important;
  font-size:14.5px;outline:none;
}
#vsInput{
  min-height:46px;line-height:1.5;overflow-y:auto;
  color:#B5E6A2 !important;
  -webkit-text-fill-color:#B5E6A2 !important;
  caret-color:#B5E6A2 !important;
  -webkit-user-modify:read-write-plaintext-only;
}
#searchInput{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  caret-color:#ffd166 !important;
}
#vsInput::placeholder{
  color:#B5E6A2 !important;
  -webkit-text-fill-color:#B5E6A2 !important;
  opacity:1 !important;
}
#searchInput::placeholder{
  color:#ffd166 !important;
  -webkit-text-fill-color:#ffd166 !important;
  opacity:1 !important;
}
#vsInput:-webkit-autofill, #vsInput:-webkit-autofill:hover, #vsInput:-webkit-autofill:focus{
  -webkit-text-fill-color:#B5E6A2 !important;
  -webkit-box-shadow:0 0 0 1000px #16233b inset !important;
  box-shadow:0 0 0 1000px #16233b inset !important;
  transition:background-color 9999s ease-in-out 0s;
}
#searchInput:-webkit-autofill, #searchInput:-webkit-autofill:hover, #searchInput:-webkit-autofill:focus{
  -webkit-text-fill-color:#ffffff !important;
  -webkit-box-shadow:0 0 0 1000px #16233b inset !important;
  box-shadow:0 0 0 1000px #16233b inset !important;
  transition:background-color 9999s ease-in-out 0s;
}
#vsInput:focus, #searchInput:focus{border-color:#ff7a1a !important}
.vs-links{display:flex;flex-wrap:wrap;gap:8px}
.vs-links a{
  font-size:12px;color:#ffd166;text-decoration:none;font-weight:600;
  background:rgba(255,209,102,.08);border:1px solid rgba(255,209,102,.3);
  padding:5px 10px;border-radius:999px;
}
.vs-links a:active{transform:scale(.95)}
.btn-vs{
  border:none;cursor:pointer;font-size:14.5px;font-weight:700;color:#fff;
  padding:12px;border-radius:12px;
  background:linear-gradient(135deg,#ff7a1a,#ff4f1a);
  box-shadow:0 4px 14px rgba(255,90,26,.3);
}
.btn-vs:active{transform:scale(.97)}
.btn-vs:disabled{opacity:.6}
.vs-tip{font-size:12px;color:var(--muted);margin:8px 4px 0}

/* ---------- 搜索结果候选区（三个目的地分栏） ---------- */
.vs-results{margin-top:10px}
.vsr-head{font-size:12.5px;color:var(--accent2);margin:8px 2px 6px;font-weight:700;letter-spacing:.5px}
.vsr-stat{font-size:11px;color:var(--muted);margin:0 2px 8px}
.vsr-card.seen{opacity:.72}
.vsr-seen{font-style:normal;font-size:10.5px;color:#9aa7b8;border:1px solid #46536b;border-radius:6px;padding:0 4px;margin-left:4px;white-space:nowrap}
.vsr-list{display:flex;flex-direction:column;gap:8px}
.vsr-card{
  display:flex;align-items:flex-start;gap:9px;width:100%;text-align:left;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 11px;
  color:var(--text);font-size:13px;line-height:1.5;
}
.vsr-card:active{transform:scale(.985);border-color:var(--accent)}
.vsr-no{flex:0 0 auto;font-size:15px;color:var(--accent2);font-weight:700;line-height:1.35}
.vsr-body{flex:1 1 auto;min-width:0}
.vsr-t{display:block;font-weight:600;color:#eaf2ff}
.vsr-s{display:block;font-size:11.5px;color:#B5E6A2;margin-top:3px}
.vsr-m{display:block;font-size:11px;color:var(--muted);margin-top:3px}
.vsr-score{display:block;font-size:10.5px;color:var(--accent2);margin-top:3px;opacity:.9}
.vsr-go{flex:0 0 auto;align-self:center;font-size:13px;color:var(--accent2)}
.vsr-again{margin:10px 0 4px;text-align:center}
/* 「新加注释」：就放在「再次搜索」按钮前边 */
.vsr-noterow{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.vsr-notelabel{flex:0 0 auto;font-size:12.5px;color:#B5E6A2;font-weight:700}
.vsr-note{
  flex:1 1 auto;min-width:0;font-size:13px;padding:9px 11px;border-radius:10px;
  background:#16233b;color:#B5E6A2;border:1px solid var(--line);
  -webkit-text-fill-color:#B5E6A2;
}
.vsr-note::placeholder{color:#8fa3bd;opacity:1}
.vsr-note:focus{outline:none;border-color:var(--accent)}
.vsr-again-btn{
  width:100%;cursor:pointer;padding:11px 14px;border-radius:12px;font-size:14px;font-weight:700;
  color:#fff;border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(135deg,#2563eb,#0ea5e9);
  box-shadow:0 4px 14px rgba(14,120,220,.28);
}
.vsr-again-btn:active{transform:scale(.98)}
.vsr-again-note{font-size:11px;color:var(--muted);margin-top:7px;line-height:1.6;text-align:left}
.vsr-again-note b{color:#B5E6A2}

/* ---------- 搜索历史（最近 5 个，点一下再搜） ---------- */
.history{margin:18px 0 10px}
.history-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 2px}
.hist-chip{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:7px 13px;font-size:12.5px;color:#B5E6A2;line-height:1.3;
}
.hist-chip:active{transform:scale(.97);border-color:var(--accent)}
.hist-no{
  display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;border-radius:50%;font-size:10px;
  color:var(--accent2);border:1px solid var(--line);flex:0 0 auto;
}

/* ---------- 直播 / 回放按钮 ---------- */
.watch{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.watch-btn{
  font-size:12px;text-decoration:none;padding:6px 11px;border-radius:999px;
  color:#fff;background:linear-gradient(135deg,#ff7a1a,#ff4f1a);
  box-shadow:0 3px 10px rgba(255,90,26,.25);
}
.watch-btn:nth-child(2){background:linear-gradient(135deg,#0ea5e9,#2563eb)}
.watch-btn:nth-child(3){background:linear-gradient(135deg,#64748b,#475569)}
.watch-btn:active{transform:scale(.95)}

/* ---------- 观赛渠道 ---------- */
.watch-note{font-size:12.5px;color:var(--muted);margin:-4px 2px 10px}
.channels{display:flex;flex-wrap:wrap;gap:8px}
.channel{
  font-size:12.5px;color:var(--text);text-decoration:none;padding:9px 14px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
}
.channel:active{transform:scale(.96);border-color:var(--accent)}

/* ---------- 体系说明 ---------- */
#guide details{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  margin-bottom:8px;padding:12px 14px;
}
#guide summary{cursor:pointer;font-size:14.5px;font-weight:600;color:var(--accent2)}
#guide p{font-size:13px;color:#b9c6de;margin-top:8px;line-height:1.7}

/* ---------- 页脚 ---------- */
footer{border-top:1px solid var(--line);margin-top:30px;padding-top:16px;text-align:center}
footer p{font-size:12px;color:var(--muted);margin-bottom:6px}
.foot-tip{color:#b9c6de}
.foot-note{opacity:.8}

/* ---------- 回到顶部 ---------- */.to-top{
  position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:var(--panel2);color:var(--text);font-size:17px;cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.4);z-index:60;
}
