:root {
  --bg: #07080c;
  --card: rgba(22, 24, 34, .72);
  --card-solid: #161822;
  --text: #f0f2f8;
  --sub: #8b92a8;
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.14);
  --accent: #ff2d55;
  --accent2: #ff9500;
  --accent3: #00e5ff;
  --top3-1: #ffd700;
  --top3-2: #c0c0c0;
  --top3-3: #cd7f32;
  --hover: rgba(255,255,255,.06);
  --shadow: 0 8px 30px rgba(0,0,0,.35);
  --tab-bg: rgba(22,24,34,.6);
  --glow: 0 0 20px rgba(255,45,85,.35);
}
[data-theme="light"] {
  --bg: #f5f7fb;
  --card: rgba(255,255,255,.82);
  --card-solid: #ffffff;
  --text: #11131a;
  --sub: #5c6270;
  --line: rgba(0,0,0,.07);
  --line-strong: rgba(0,0,0,.12);
  --hover: rgba(0,0,0,.04);
  --shadow: 0 8px 30px rgba(0,0,0,.1);
  --tab-bg: rgba(255,255,255,.72);
  --glow: 0 0 20px rgba(255,45,85,.22);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--bg); color: var(--text);
  transition: background .35s, color .35s;
  overflow-x: hidden;
}

/* 背景极光 */
.aurora {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  overflow: hidden;
}
.aurora span {
  position: absolute; width: 120vw; height: 80vh; filter: blur(80px); opacity: .28;
  animation: drift 20s ease-in-out infinite alternate;
  border-radius: 50%;
}
.aurora span:nth-child(1) {
  background: radial-gradient(circle, rgba(255,45,85,.6), transparent 60%);
  top: -30%; left: -20%;
}
.aurora span:nth-child(2) {
  background: radial-gradient(circle, rgba(0,229,255,.45), transparent 60%);
  top: 20%; right: -30%;
  animation-delay: -7s;
}
.aurora span:nth-child(3) {
  background: radial-gradient(circle, rgba(255,149,0,.35), transparent 60%);
  bottom: -20%; left: 30%;
  animation-delay: -14s;
}
@keyframes drift {
  from { transform: translate(0,0) scale(1); }
  to { transform: translate(30px,40px) scale(1.08); }
}

/* 网格地板 */
.grid-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 70%, transparent);
  opacity: .7;
}

/* ---------- 顶栏 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(7,8,12,.72);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
}
[data-theme="light"] .topbar { background: rgba(245,247,251,.78); }
.topbar-inner {
  max-width: 980px; margin: 0 auto; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo {
  position: relative; width: 42px; height: 42px; border-radius: 14px;
  display: grid; place-items: center; font-size: 24px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: var(--glow);
}
.logo-ring {
  position: absolute; inset: -3px; border-radius: 17px;
  border: 2px solid rgba(255,255,255,.35);
  animation: pulse-ring 2.2s infinite;
  pointer-events: none;
}
@keyframes pulse-ring {
  0% { transform: scale(1); opacity: .7; }
  70% { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}
.brand-text h1 {
  font-size: 18px; line-height: 1.2; letter-spacing: .5px;
  background: linear-gradient(90deg, var(--text), var(--accent3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: inline-flex; align-items: center; gap: 6px;
}
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #00e676;
  box-shadow: 0 0 8px #00e676; animation: blink 1.4s infinite;
}
@keyframes blink { 50% { opacity: .35; } }
.brand-sub { font-size: 12px; color: var(--sub); }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.search-box {
  position: relative;
}
.search-box input {
  width: 220px; padding: 8px 12px 8px 34px; border-radius: 24px;
  border: 1px solid var(--line-strong); background: var(--card); color: var(--text);
  font-size: 13px; outline: none; transition: width .2s, border-color .2s, box-shadow .2s;
  backdrop-filter: blur(8px);
}
.search-box input:focus { width: 260px; border-color: var(--accent3); box-shadow: 0 0 12px rgba(0,229,255,.18); }
.search-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--sub); pointer-events: none;
}
@media (max-width: 560px) {
  .search-box input, .search-box input:focus { width: 140px; }
}
.icon-btn {
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--card); color: var(--text);
  font-size: 16px; display: inline-flex; align-items: center; justify-content: center;
  transition: transform .15s, background .2s, box-shadow .2s;
  backdrop-filter: blur(8px);
}
.icon-btn:hover { background: var(--hover); transform: rotate(15deg) scale(1.08); box-shadow: var(--glow); }

/* ---------- Tabs ---------- */
.tabs-wrap { position: sticky; top: 70px; z-index: 99; padding: 0 0 6px; }
.tabs-wrap::before,
.tabs-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 6px; width: 32px; pointer-events: none;
  opacity: 0; transition: opacity .25s; z-index: 2;
}
.tabs-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--bg), transparent);
}
.tabs-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--bg), transparent);
}
.tabs-wrap.can-scroll-left::before { opacity: 1; }
.tabs-wrap.can-scroll-right::after { opacity: 1; }
.tabs {
  max-width: 980px; margin: 0 auto; padding: 10px 12px 6px;
  display: flex; gap: 8px; overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(128,128,128,.35) transparent;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.tabs::-webkit-scrollbar { height: 5px; }
.tabs::-webkit-scrollbar-track { background: transparent; }
.tabs::-webkit-scrollbar-thumb { background: rgba(128,128,128,.35); border-radius: 3px; }
.tab {
  flex-shrink: 0; padding: 8px 16px; border-radius: 999px;
  font-size: 13px; cursor: pointer; color: var(--sub);
  background: var(--tab-bg); border: 1px solid var(--line);
  transition: all .2s; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  backdrop-filter: blur(8px);
  scroll-snap-align: start;
}
.tab:hover {
  color: var(--text); border-color: var(--line-strong);
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.tab.active {
  color: #fff; font-weight: 600;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-color: transparent;
  box-shadow: var(--glow);
}
.tab .badge { font-size: 11px; color: inherit; opacity: .85; }

/* ---------- 列表 ---------- */
.container { max-width: 980px; margin: 0 auto; padding: 0 16px 50px; }
.list { display: flex; flex-direction: column; gap: 8px; padding: 16px 0 0; }
.item {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border-radius: 14px; padding: 12px 16px;
  border: 1px solid var(--line); box-shadow: var(--shadow);
  cursor: pointer; text-decoration: none; color: var(--text);
  transition: transform .15s, background .2s, border-color .2s, box-shadow .2s;
  backdrop-filter: blur(12px); position: relative; overflow: hidden;
}
.item::before {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
  transform: translateX(-100%);
  transition: opacity .2s;
}
.item:hover {
  background: var(--hover); transform: translateX(4px) scale(1.005);
  border-color: var(--line-strong); box-shadow: 0 10px 30px rgba(0,0,0,.25), var(--glow);
}
.item:hover::before { opacity: 1; animation: sheen .7s forwards; }
@keyframes sheen { to { transform: translateX(100%); } }
.item .rank {
  width: 34px; flex-shrink: 0; text-align: center;
  font-size: 18px; font-weight: 900; font-style: italic;
  color: #6c7486; text-shadow: 0 0 0 transparent;
  transition: transform .2s;
}
.item:hover .rank { transform: scale(1.15); }
.item .rank.r1 { color: var(--top3-1); text-shadow: 0 0 12px rgba(255,215,0,.45); }
.item .rank.r2 { color: var(--top3-2); text-shadow: 0 0 10px rgba(192,192,192,.35); }
.item .rank.r3 { color: var(--top3-3); text-shadow: 0 0 10px rgba(205,127,50,.35); }
.item .body { flex: 1; min-width: 0; }
.item .title {
  font-size: 15px; line-height: 1.5; font-weight: 500;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.item .desc { font-size: 12px; color: var(--sub); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .meta { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.item .hot {
  font-size: 12px; color: var(--accent); font-weight: 700;
  font-variant-numeric: tabular-nums; text-shadow: 0 0 8px rgba(255,45,85,.35);
}
.item .src {
  font-size: 10.5px; padding: 3px 8px; border-radius: 8px;
  background: rgba(255,255,255,.06); color: var(--sub); border: 1px solid var(--line);
}
.empty { text-align: center; color: var(--sub); padding: 70px 0; font-size: 14px; }
.empty.loading { animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: .4; } }

/* ---------- 状态提示 ---------- */
.warn {
  background: rgba(255,149,0,.12); color: #ffcc80; border: 1px solid rgba(255,149,0,.35);
  border-radius: 12px; padding: 12px 16px; font-size: 12.5px; margin: 12px 0 0;
  backdrop-filter: blur(8px);
}
[data-theme="light"] .warn { background: rgba(255,149,0,.08); color: #b26a00; border-color: rgba(255,149,0,.25); }
.foot { text-align: center; color: var(--sub); font-size: 12px; padding: 32px 0 12px; line-height: 1.9; }

/* ---------- 综合榜卡片 ---------- */
.combo-group { margin-bottom: 22px; }
.combo-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; padding: 6px 4px 10px;
}
.combo-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent3); box-shadow: 0 0 10px var(--accent3); }
.combo-head .more {
  margin-left: auto; font-size: 12px; color: var(--sub); font-weight: 500; cursor: pointer;
  padding: 4px 10px; border-radius: 8px; border: 1px solid transparent; transition: all .15s;
}
.combo-head .more:hover { color: var(--accent3); border-color: var(--line-strong); background: var(--hover); }