/* ============================================================
   young-theme.css — 年轻化主题覆盖层
   依赖 banana-page.css 的变量与基础样式
   ============================================================ */

/* ---- 全局更年轻的配色微调 ---- */
:root {
  --bn-brand: #ff8a2b;
  --bn-brand-deep: #e86f00;
  --bn-brand-soft: #fff2e3;
  --bn-accent: #22c55e;
  --bn-radius: 16px;
  --bn-radius-sm: 10px;
  --bn-radius-lg: 28px;
}

body {
  background:
    radial-gradient(1200px 600px at 100% -10%, #fff2e3 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 10%, #e8f5ff 0%, transparent 55%),
    var(--bn-bg);
}

/* ---- 标题更紧、更亮 ---- */
.bn-h1-main {
  background: linear-gradient(120deg, var(--bn-ink) 30%, var(--bn-brand-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- 主按钮脉动 ---- */
@keyframes bn-pulse {
  0%, 100% { box-shadow: 0 6px 22px rgba(255, 138, 43, .38); }
  50%      { box-shadow: 0 6px 30px rgba(255, 138, 43, .62), 0 0 0 6px rgba(255, 138, 43, .12); }
}
.bn-btn-pulse { animation: bn-pulse 2.4s ease-in-out infinite; }

/* ---- 卡片更圆更软 ---- */
.bn-ticket, .bn-stat, .bn-quote, .bn-msg-drama, .bn-manhua-item,
.bn-stat-cell, .bn-free-cell, .bn-qr-box { border-radius: var(--bn-radius-lg); }

.bn-strip-item { border-radius: var(--bn-radius-lg); }
.bn-ticket-grid figure { border-radius: var(--bn-radius-sm); }
.bn-manhua-featured { border-radius: var(--bn-radius-lg); }

/* ---- 榜单 top3 高亮 ---- */
.bn-rank-item.is-top .bn-rank-no {
  background: linear-gradient(135deg, var(--bn-brand), #ffb066);
  color: #fff;
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-size: 16px;
  box-shadow: 0 4px 14px rgba(255, 138, 43, .35);
}
.bn-rank-item.is-top .bn-rank-main h3 { color: var(--bn-ink); }

/* ---- 下载区更亮眼 ---- */
.bn-download {
  background:
    radial-gradient(700px 300px at 90% 10%, rgba(255, 138, 43, .25), transparent 60%),
    linear-gradient(160deg, #1c1b18 0%, #2d2a24 100%);
}
.bn-dl-actions .bn-btn-solid {
  background: linear-gradient(135deg, var(--bn-brand), #ff9f4d);
  box-shadow: 0 8px 28px rgba(255, 138, 43, .48);
}
.bn-dl-actions .bn-btn-solid:hover {
  background: linear-gradient(135deg, var(--bn-brand-deep), var(--bn-brand));
}

/* ---- 二维码区 ---- */
.bn-qr-box {
  background: #fff;
  box-shadow: 0 10px 40px rgba(0,0,0,.35), 0 0 0 6px rgba(255,255,255,.06);
}

/* ---- Tab 切换（排行榜页用） ---- */
.bn-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--bn-line);
  padding-bottom: 0;
  flex-wrap: wrap;
}
.bn-tab {
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--bn-ink-mute);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: color .16s, border-color .16s;
  border-radius: 8px 8px 0 0;
}
.bn-tab:hover { color: var(--bn-ink); background: var(--bn-bg-deep); }
.bn-tab.is-active {
  color: var(--bn-brand-deep);
  border-bottom-color: var(--bn-brand);
  background: var(--bn-brand-soft);
}
.bn-tab-panel { display: none; }
.bn-tab-panel.is-active { display: block; }

/* ---- 专题页锚点偏移（避免被 sticky masthead 挡住） ---- */
.bn-anchor { scroll-margin-top: calc(var(--bn-masthead-h) + 16px); }

/* ---- 漫剧页大图 ---- */
.bn-manhua-hero {
  border-radius: var(--bn-radius-lg);
  overflow: hidden;
  margin-bottom: 32px;
  box-shadow: var(--bn-shadow-lg);
  position: relative;
}
.bn-manhua-hero img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.bn-manhua-hero-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 28px 22px;
  background: linear-gradient(to top, rgba(0,0,0,.85), transparent);
  color: #fff;
}
.bn-manhua-hero-cap h2 { font-size: clamp(22px, 3.4vw, 32px); }
.bn-manhua-hero-cap p { font-size: 14px; color: rgba(255,255,255,.85); }

/* ---- 漫剧网格 ---- */
.bn-manhua-grid-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.bn-manhua-card {
  background: #fff;
  border: 1px solid var(--bn-line-soft);
  border-radius: var(--bn-radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s;
}
.bn-manhua-card:hover { transform: translateY(-4px); box-shadow: var(--bn-shadow-lg); }
.bn-manhua-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.bn-manhua-card-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.bn-manhua-card-body h3 { font-size: 15px; font-weight: 800; }
.bn-manhua-card-body span { font-size: 12px; color: var(--bn-ink-mute); }
.bn-manhua-card-body .bn-btn { margin-top: 8px; align-self: flex-start; }

/* ---- AI 页强化 ---- */
.bn-ai-page .bn-chat { max-width: 640px; }
.bn-ai-cta {
  margin-top: 36px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.bn-ai-cta p { font-size: 14px; color: var(--bn-ink-soft); }

/* ---- FAQ 页扩展 ---- */
.bn-faq-page .bn-faq-item { padding: 22px 8px; }

/* ---- 排行榜页 ---- */
.bn-rank-page .bn-rank-list { background: #fff; border-radius: var(--bn-radius-lg); padding: 8px 20px; box-shadow: var(--bn-shadow); }
.bn-rank-page .bn-rank-item { border-bottom: 1px solid var(--bn-line-soft); }
.bn-rank-page .bn-rank-item:last-child { border-bottom: 0; }

/* ---- 专题页 ---- */
.bn-topics-page .bn-ticket { background: #fff; }

/* ---- 移动端微调 ---- */
@media (max-width: 1024px) {
  .bn-manhua-grid-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .bn-manhua-grid-cards { grid-template-columns: 1fr; }
  .bn-manhua-hero img { aspect-ratio: 16 / 10; }
}