/* 墨潮设计令牌 v2 —— 深色为主，橙色主调（可切浅色） */
:root, [data-theme="dark"] {
  --bg: #101116; --bg2: #0b0c10; --card: #1a1c23; --card2: #24262e; --card3: #2e313a;
  --text: #f3f3f6; --text2: rgba(255,255,255,.64); --text3: rgba(255,255,255,.40);
  --sep: rgba(255,255,255,.09); --glass: rgba(16,17,22,.72);
  --accent: #ff5a3c; --accent-hi: #ff7a5f; --on-accent: #ffffff;
  --grad: linear-gradient(92deg, #ff7a3c, #ff3d63);
  --gold: #f5c96b; --vip: #f5c96b; --lock: #eab54a;
  --shadow: 0 2px 8px rgba(0,0,0,.35), 0 18px 44px rgba(0,0,0,.5);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.3), 0 8px 20px rgba(0,0,0,.4);
  --radius: 16px;
}
[data-theme="light"] {
  --bg: #f6f5f3; --bg2: #eeecea; --card: #ffffff; --card2: #f1efec; --card3: #e8e5e1;
  --text: #1a1a1e; --text2: rgba(20,20,25,.62); --text3: rgba(20,20,25,.4);
  --sep: rgba(20,20,25,.09); --glass: rgba(246,245,243,.82);
  --accent: #ff5a3c; --accent-hi: #e5482c; --on-accent: #ffffff;
  --grad: linear-gradient(92deg, #ff7a3c, #ff3d63);
  --gold: #b8862b; --vip: #b8862b; --lock: #c79a3a;
  --shadow: 0 1px 2px rgba(48,40,24,.05), 0 14px 36px rgba(48,40,24,.12);
  --shadow-sm: 0 1px 2px rgba(48,40,24,.06), 0 6px 16px rgba(48,40,24,.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-font-smoothing: antialiased; }
html, body { height: 100%; }
body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif; color: var(--text); background: var(--bg); }
.serif { font-family: 'Noto Serif SC', serif; }
a { color: inherit; text-decoration: none; }
button, input, select { font-family: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
img { display: block; max-width: 100%; }
::-webkit-scrollbar { width: 0; height: 0; }

/* 封面 */
.cover { position: relative; border-radius: 12px; overflow: hidden; background: var(--card2); display: flex; align-items: flex-end; aspect-ratio: 3/4; }
.cover.wide { aspect-ratio: 16/10; }
.cover .fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Noto Serif SC', serif; font-weight: 700; color: rgba(255,255,255,.94); text-align: center; padding: 8px; line-height: 1.25; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.cover img { width: 100%; height: 100%; object-fit: cover; }

/* 小组件 */
.badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--card2); color: var(--text2); }
.badge.hot { background: var(--grad); color: #fff; font-weight: 600; }
.badge.new { background: rgba(255,90,60,.16); color: var(--accent); font-weight: 600; }
.badge.vip { background: rgba(245,201,107,.16); color: var(--gold); font-weight: 700; }
.rating { color: var(--gold); font-weight: 700; }
.chip { font-size: 13px; padding: 7px 15px; border-radius: 999px; background: var(--card2); color: var(--text2); white-space: nowrap; cursor: pointer; transition: .15s; }
.chip.on { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.lock { color: var(--lock); }

/* 主按钮渐变 */
.g-btn { background: var(--grad); color: #fff; font-weight: 700; border-radius: 999px; }

.toast { position: fixed; left: 50%; bottom: 92px; transform: translate(-50%, 8px); background: rgba(0,0,0,.86); color: #fff; font-size: 13.5px; padding: 10px 18px; border-radius: 999px; z-index: 9999; opacity: 0; transition: .22s; pointer-events: none; border: 1px solid rgba(255,255,255,.1); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }