/* 模板布局与全站风格覆盖层，加载顺序必须在页面基础 CSS 之后。 */

/* ---------- 风格：暗夜红（默认） ---------- */
.style-midnight {
  --theme-bg: #080808;
  --theme-surface: #151515;
  --theme-surface-2: #1d1d1d;
  --theme-text: #fff;
  --theme-muted: #aaa;
  --theme-line: rgba(255,255,255,.1);
  --theme-accent: #fe2c55;
  --theme-accent-2: #ff7a3b;
}

/* ---------- 风格：海洋蓝 ---------- */
.style-ocean {
  --theme-bg: #06131f;
  --theme-surface: #0b2235;
  --theme-surface-2: #10314a;
  --theme-text: #f2fbff;
  --theme-muted: #9fc1d1;
  --theme-line: rgba(143,211,244,.18);
  --theme-accent: #20a4d8;
  --theme-accent-2: #43d4c7;
}

/* ---------- 风格：自然绿（亮色） ---------- */
.style-nature {
  --theme-bg: #f5f1e8;
  --theme-surface: #fffdf8;
  --theme-surface-2: #e8efe5;
  --theme-text: #20352b;
  --theme-muted: #6f8076;
  --theme-line: rgba(47,85,64,.16);
  --theme-accent: #3e7c59;
  --theme-accent-2: #d88945;
}

body[class*="style-"] { background: var(--theme-bg); color: var(--theme-text); }
body[class*="style-"] .page {
  color: var(--theme-text);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--theme-accent) 18%, transparent), transparent 35%),
    var(--theme-bg);
}
body[class*="style-"] .top,
body[class*="style-"] .footerNav,
body[class*="style-"] .bottomNav {
  color: var(--theme-text);
  background: color-mix(in srgb, var(--theme-bg) 91%, transparent);
  border-color: var(--theme-line);
}
body[class*="style-"] .logo { color: var(--theme-accent); }
body[class*="style-"] .card,
body[class*="style-"] .side,
body[class*="style-"] .affiliate-card,
body[class*="style-"] .affiliate-section,
body[class*="style-"] .stat,
body[class*="style-"] .pager a,
body[class*="style-"] .pager span {
  color: var(--theme-text);
  background: var(--theme-surface);
  border-color: var(--theme-line);
}
body[class*="style-"] .card:hover { background: var(--theme-surface-2); }
body[class*="style-"] .meta,
body[class*="style-"] .name span,
body[class*="style-"] .desc,
body[class*="style-"] .cardBody p,
body[class*="style-"] .txt p,
body[class*="style-"] .stat span,
body[class*="style-"] .affiliate-card p,
body[class*="style-"] .affiliate-disclosure,
body[class*="style-"] .page-head .sub {
  color: var(--theme-muted);
}
body[class*="style-"] .affiliate-card-foot a,
body[class*="style-"] .pager .cur {
  color: #fff;
  background: var(--theme-accent);
}
body[class*="style-"] .avatar {
  background: linear-gradient(135deg,var(--theme-accent),var(--theme-accent-2));
}
body[class*="style-"] .footerNav a.active,
body[class*="style-"] .bottomNav a.active,
body[class*="style-"] .affiliate-card-foot strong,
body[class*="style-"] .affiliate-platform {
  color: var(--theme-accent);
}
body[class*="style-"] .hero:after {
  background: linear-gradient(transparent, var(--theme-bg) 90%);
}

/* ---------- 模板：简洁杂志 ---------- */
.template-magazine .top {
  position: sticky;
  height: 72px;
  padding: 0 max(20px,5vw);
  background: var(--theme-surface);
  border-bottom: 1px solid var(--theme-line);
}
.template-magazine .hero {
  width: min(1180px,calc(100% - 40px));
  height: auto;
  min-height: 340px;
  margin: 28px auto 12px;
  padding: 42px;
  border-radius: 24px;
  align-items: center;
  isolation: isolate;
}
.template-magazine .hero-cover { opacity: .42; }
.template-magazine .hero:after {
  z-index: -1;
  background: linear-gradient(90deg,var(--theme-bg),color-mix(in srgb,var(--theme-bg) 40%,transparent));
}
.template-magazine .hero .info { max-width: 680px; }
.template-magazine .wrap { width: min(1180px,100%); margin: auto; }
.template-magazine .section-head { padding-bottom: 10px; border-bottom: 1px solid var(--theme-line); }
.template-magazine .grid { grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); }
.template-magazine .card {
  display: grid;
  grid-template-columns: 42% minmax(0,1fr);
  border: 1px solid var(--theme-line);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.template-magazine .card:hover { transform: translateY(-2px); }
.template-magazine .thumb { height: 100%; min-height: 130px; aspect-ratio: auto; }
.template-magazine .txt { align-self: center; }
.template-magazine.category-page .page-head {
  width: min(1180px,100%);
  margin: auto;
  padding-top: 34px;
}

.template-magazine.post-page .main { width: min(1080px,100%); padding-top: 34px; }
.template-magazine.post-page .detail { display: block; }
.template-magazine.post-page .playerBox { border-radius: 14px; }
.template-magazine.post-page .info { max-width: 820px; margin: auto; padding-top: 32px; }
.template-magazine.post-page .side { position: static; max-width: 820px; margin: 24px auto 0; }
.template-magazine.post-page .recommend { max-width: 1080px; margin-left: auto; margin-right: auto; }
.template-magazine.post-page .recommend .card {
  display: block;
}

@media (max-width: 700px) {
  .template-magazine .hero {
    width: calc(100% - 24px);
    min-height: 300px;
    margin-top: 12px;
    padding: 24px;
    border-radius: 16px;
  }
  .template-magazine .grid { grid-template-columns: 1fr; }
  .template-magazine .card { grid-template-columns: 38% minmax(0,1fr); }
}