/* ================================================================
   VERITAS · 12 套模板背景（统一体系）
   配色 data-color → themes.css 提供 --black / --d1 / --g / --g10 等
   模板 data-template → 本文件只定义纹理 / 形态 / Hero 封面，不写死 hex
   ================================================================ */

/* ── 全局基底：所有套版跟随当前配色 ─────────────────────────── */
html[data-template] body {
  background-color: var(--black) !important;
}
html[data-template] body::before {
  z-index: -1 !important;
  opacity: 1 !important;
  background-color: var(--black) !important;
  background-repeat: no-repeat !important;
}
html[data-template] body::after {
  content: none !important;
}

html[data-template] .hero {
  background-color: transparent !important;
}
html[data-template] .hero::before,
html[data-template] .hero::after {
  animation: none !important;
}
html[data-template] .hero-orb {
  opacity: var(--cover-orb-op, 0) !important;
}

/* ── 全模板共用区块背景（跟随配色，不跟模板锁死）────────────── */
html[data-template] .section,
html[data-template] .news-section {
  background: color-mix(in srgb, var(--d1) 90%, transparent) !important;
}
html[data-template] .section--dark {
  background: color-mix(in srgb, var(--g10) 55%, var(--black)) !important;
  border-top: 1px solid var(--ln);
  border-bottom: 1px solid var(--ln);
}
html[data-template] .section--gray {
  background: var(--d2) !important;
}
html[data-template] .ticker-wrap {
  background: var(--d2) !important;
  border-color: var(--ln) !important;
  color: var(--t2) !important;
}
html[data-template] .footer {
  background: var(--d2) !important;
  border-top: 1px solid var(--ln) !important;
  color: var(--t1) !important;
}
html[data-template] .cta-banner {
  background: var(--grad-brand) !important;
  color: #fff !important;
}
html[data-template] .cta-banner-title,
html[data-template] .cta-banner-sub {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
html[data-template] .page-hero,
html[data-template] .news-hero {
  background: linear-gradient(180deg, var(--d1), var(--black)) !important;
}

/* ═══ A · 鸢尾 — 电路纹理 + 科技光晕 ═══════════════════════════ */
html[data-template="classic-iris"] body::before {
  background-image:
    var(--circuit),
    radial-gradient(ellipse 80% 50% at 8% 12%, var(--g10) 0%, transparent 55%),
    radial-gradient(ellipse 70% 45% at 92% 18%, var(--seo-bg) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 50% 100%, var(--orm-bg) 0%, transparent 45%) !important;
  background-size: var(--circuit-size) var(--circuit-size), 100% 100%, 100% 100%, 100% 100% !important;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat !important;
}
html[data-template="classic-iris"] .hero {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--d1) 92%, transparent), color-mix(in srgb, var(--black) 85%, transparent)),
    url('images/hero-bg.png') center/cover no-repeat !important;
  border-bottom: 1px solid var(--ln) !important;
}
html[data-template="classic-iris"] .hero::after {
  content: '' !important;
  display: block !important;
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--geo), var(--seo), var(--orm)) !important;
  opacity: 1 !important;
}
html[data-template="classic-iris"] .hero-orb { opacity: .3 !important; }

/* ═══ B · 午夜 — 星野 + 聚光灯（光点随配色深浅自适应）══════════ */
html[data-template="midnight-slate"] body::before {
  background-image:
    radial-gradient(1.2px 1.2px at 15% 25%, color-mix(in srgb, var(--t2) 40%, transparent), transparent),
    radial-gradient(1px 1px at 45% 15%, color-mix(in srgb, var(--t2) 30%, transparent), transparent),
    radial-gradient(1.2px 1.2px at 75% 35%, color-mix(in srgb, var(--t2) 35%, transparent), transparent),
    radial-gradient(1px 1px at 85% 65%, color-mix(in srgb, var(--t2) 25%, transparent), transparent),
    radial-gradient(ellipse 90% 70% at 50% -15%, var(--g20) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 85% 90%, var(--orm-bg) 0%, transparent 50%) !important;
  background-size: 100% 100% !important;
}
html[data-template="midnight-slate"] .hero {
  background: radial-gradient(ellipse 75% 55% at 50% 20%, var(--g20) 0%, transparent 60%), var(--black) !important;
  min-height: 100vh !important;
}
html[data-template="midnight-slate"] .hero::before {
  content: '' !important;
  display: block !important;
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 30%, var(--g10) 0%, transparent 50%) !important;
  opacity: 1 !important;
}
html[data-template="midnight-slate"] .hero-orb { opacity: .5 !important; filter: blur(60px) !important; }

/* ═══ C · 翡翠 — 有机光斑 + 卡片岛 ═════════════════════════════ */
html[data-template="forest-jade"] body::before {
  background-image:
    radial-gradient(ellipse 55% 45% at 10% 20%, var(--geo-bg) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 80%, var(--seo-bg) 0%, transparent 50%),
    radial-gradient(ellipse 40% 35% at 50% 50%, var(--g10) 0%, transparent 60%) !important;
}
html[data-template="forest-jade"] .hero {
  background: radial-gradient(circle at 30% 20%, var(--geo-bg), transparent 50%), linear-gradient(180deg, var(--d1), var(--d2)) !important;
}
html[data-template="forest-jade"] #services {
  background: var(--d1) !important;
  border-radius: 32px 32px 0 0 !important;
  margin-top: -20px !important;
  position: relative; z-index: 1;
  box-shadow: 0 -20px 60px var(--g10);
}
html[data-template="forest-jade"] #kmo {
  background: var(--d2) !important;
}

/* ═══ D · 琥珀 — 杂志横线纹理 ═══════════════════════════════════ */
html[data-template="sunset-amber"] body::before {
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 28px, color-mix(in srgb, var(--g) 6%, transparent) 28px, color-mix(in srgb, var(--g) 6%, transparent) 29px),
    radial-gradient(ellipse 60% 40% at 100% 0%, var(--g10) 0%, transparent 50%) !important;
}
html[data-template="sunset-amber"] .hero {
  background:
    linear-gradient(135deg, var(--g10) 0%, transparent 45%),
    repeating-linear-gradient(0deg, transparent, transparent 28px, color-mix(in srgb, var(--g) 4%, transparent) 28px, color-mix(in srgb, var(--g) 4%, transparent) 29px),
    var(--black) !important;
  border-bottom: 3px solid var(--g) !important;
}
html[data-template="sunset-amber"] .hero::before {
  content: 'VERITAS MAGAZINE' !important;
  display: block !important;
  position: absolute; top: calc(var(--nav) + 16px); right: 48px;
  font-size: .62rem; font-weight: 800; letter-spacing: .28em;
  color: color-mix(in srgb, var(--g) 45%, transparent) !important;
  opacity: 1 !important;
}
html[data-template="sunset-amber"] .section--gray {
  background: repeating-linear-gradient(90deg, var(--d2) 0, var(--d2) 2px, var(--d3) 2px, var(--d3) 4px) !important;
}

/* ═══ E · 皇家 — 极简留白 + 中线 ═══════════════════════════════ */
html[data-template="royal-violet"] body::before {
  background-image: radial-gradient(ellipse 50% 40% at 50% 0%, var(--g10) 0%, transparent 65%) !important;
}
html[data-template="royal-violet"] .hero {
  background: var(--d1) !important;
  border-bottom: 1px solid var(--ln) !important;
}
html[data-template="royal-violet"] .hero::after {
  content: '' !important;
  display: block !important;
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 1px; height: 64px;
  background: linear-gradient(180deg, var(--g), transparent) !important;
  opacity: 1 !important;
}
html[data-template="royal-violet"] .section {
  background: var(--d1) !important;
}
html[data-template="royal-violet"] .cta-banner {
  background: transparent !important;
  border-top: 1px solid var(--ln2) !important;
  border-bottom: 1px solid var(--ln2) !important;
}
html[data-template="royal-violet"] .cta-banner-title,
html[data-template="royal-violet"] .cta-banner-sub {
  color: var(--t1) !important;
  -webkit-text-fill-color: var(--t1) !important;
}
html[data-template="royal-violet"] .footer {
  border-top: 2px solid var(--g) !important;
}

/* ═══ F · 海洋 — SaaS 网格 ═════════════════════════════════════ */
html[data-template="ocean-teal"] body::before {
  background-image:
    linear-gradient(color-mix(in srgb, var(--g) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--g) 6%, transparent) 1px, transparent 1px),
    radial-gradient(ellipse 70% 50% at 0% 100%, var(--seo-bg) 0%, transparent 50%) !important;
  background-size: 48px 48px, 48px 48px, 100% 100% !important;
}
html[data-template="ocean-teal"] .hero {
  background:
    linear-gradient(135deg, var(--g10) 0%, transparent 50%),
    linear-gradient(225deg, var(--seo-bg) 0%, transparent 50%),
    var(--d1) !important;
}
html[data-template="ocean-teal"] .hero::before {
  content: '' !important;
  display: block !important;
  position: absolute; inset: 0;
  background:
    linear-gradient(color-mix(in srgb, var(--g) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--g) 4%, transparent) 1px, transparent 1px) !important;
  background-size: 56px 56px !important;
  opacity: .45 !important;
}
html[data-template="ocean-teal"] #services {
  background: var(--d1) !important;
}

/* ═══ G · 玫瑰 — 柔光晕 ═══════════════════════════════════════ */
html[data-template="rose-blush"] body::before {
  background-image:
    radial-gradient(ellipse 55% 45% at 20% 25%, var(--g20) 0%, transparent 55%),
    radial-gradient(ellipse 45% 40% at 80% 75%, var(--g10) 0%, transparent 50%),
    radial-gradient(ellipse 35% 30% at 60% 40%, var(--g10) 0%, transparent 60%) !important;
}
html[data-template="rose-blush"] .hero {
  background: radial-gradient(ellipse 60% 50% at 50% 30%, var(--g15, var(--g10)) 0%, transparent 60%), var(--d1) !important;
}
html[data-template="rose-blush"] .hero::after {
  content: '' !important;
  display: block !important;
  position: absolute; width: 200px; height: 200px; border-radius: 50%;
  top: 10%; right: 10%;
  background: radial-gradient(circle, var(--g15, var(--g10)), transparent 70%) !important;
  opacity: 1 !important;
  pointer-events: none;
}
html[data-template="rose-blush"] .section {
  background: color-mix(in srgb, var(--d1) 88%, transparent) !important;
}
html[data-template="rose-blush"] .cta-banner {
  background: linear-gradient(135deg, var(--g10), var(--g20)) !important;
  margin-inline: clamp(16px, 4vw, 48px) !important;
  border-radius: 32px !important;
}
html[data-template="rose-blush"] .cta-banner-title,
html[data-template="rose-blush"] .cta-banner-sub {
  color: var(--t1) !important;
  -webkit-text-fill-color: var(--t1) !important;
}

/* ═══ H · 墨色 — 瑞士网格 ═══════════════════════════════════════ */
html[data-template="ink-minimal"] body::before {
  background-image:
    linear-gradient(var(--ln) 1px, transparent 1px),
    linear-gradient(90deg, var(--ln) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
}
html[data-template="ink-minimal"] .hero {
  background: var(--d1) !important;
  border-bottom: 4px solid var(--t1) !important;
}
html[data-template="ink-minimal"] .hero::before {
  content: '' !important;
  display: block !important;
  position: absolute; top: var(--nav); left: 0; right: 0; height: 4px;
  background: var(--t1) !important;
  opacity: 1 !important;
}
html[data-template="ink-minimal"] .section--dark {
  background: var(--d1) !important;
  border-top: 2px solid var(--t1) !important;
  border-bottom: 2px solid var(--t1) !important;
}
html[data-template="ink-minimal"] .cta-banner {
  background: var(--t1) !important;
}
html[data-template="ink-minimal"] .cta-banner-title,
html[data-template="ink-minimal"] .cta-banner-sub {
  color: var(--d1) !important;
  -webkit-text-fill-color: var(--d1) !important;
}
html[data-template="ink-minimal"] .ticker-wrap {
  background: var(--t1) !important;
  color: var(--d1) !important;
}
html[data-template="ink-minimal"] .page-hero {
  background:
    linear-gradient(var(--ln) 1px, transparent 1px),
    linear-gradient(90deg, var(--ln) 1px, transparent 1px),
    var(--black) !important;
  background-size: 40px 40px !important;
  border-bottom: 4px solid var(--t1) !important;
}

/* ═══ I · 赤红 — 宣言封面 ═══════════════════════════════════════ */
html[data-template="crimson-bold"] body::before {
  background-image: linear-gradient(180deg, var(--g10) 0%, transparent 30%) !important;
}
html[data-template="crimson-bold"] .hero {
  background: linear-gradient(135deg, var(--gd), var(--g), var(--gl)) !important;
  min-height: min(88vh, 820px) !important;
}
html[data-template="crimson-bold"] .hero::after {
  content: '' !important;
  display: block !important;
  position: absolute; bottom: 0; left: 0; right: 0; height: 8px;
  background: var(--d1) !important;
  opacity: 1 !important;
}
html[data-template="crimson-bold"] .hero-orb { opacity: 0 !important; }
html[data-template="crimson-bold"] #services {
  background: var(--d1) !important;
  border-top: 8px solid var(--g) !important;
}
html[data-template="crimson-bold"] .page-hero,
html[data-template="crimson-bold"] .news-hero {
  background: linear-gradient(135deg, var(--gd), var(--g)) !important;
  color: #fff !important;
}

/* ═══ J · 薄荷 — 斜纹波普 ═══════════════════════════════════════ */
html[data-template="mint-spring"] body::before {
  background-image:
    repeating-linear-gradient(45deg, transparent, transparent 20px, var(--g10) 20px, var(--g10) 22px),
    radial-gradient(ellipse 50% 40% at 90% 10%, var(--g20) 0%, transparent 50%) !important;
}
html[data-template="mint-spring"] .hero {
  background:
    linear-gradient(135deg, var(--g10) 0%, transparent 40%),
    linear-gradient(225deg, var(--seo-bg) 0%, transparent 40%),
    var(--d2) !important;
}
html[data-template="mint-spring"] .hero::before {
  content: '' !important;
  display: block !important;
  position: absolute; top: 15%; left: 5%; width: 80px; height: 80px;
  background: var(--g); border-radius: 20px;
  transform: rotate(-12deg); opacity: .12 !important;
}
html[data-template="mint-spring"] .section--dark {
  background: color-mix(in srgb, var(--g10) 80%, var(--d2)) !important;
}
html[data-template="mint-spring"] .cta-banner {
  border-radius: 999px !important;
  margin-inline: 24px !important;
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--gd) 80%, transparent) !important;
}

/* ═══ K · 墨韵 — 书卷纸纹 ═══════════════════════════════════════ */
html[data-template="calligraphy"] body::before {
  background-image:
    linear-gradient(90deg, var(--accent-warm-bg, var(--g10)) 0%, transparent 8%),
    repeating-linear-gradient(0deg, transparent, transparent 32px, color-mix(in srgb, var(--g) 5%, transparent) 32px, color-mix(in srgb, var(--g) 5%, transparent) 33px) !important;
}
html[data-template="calligraphy"] .hero {
  background:
    linear-gradient(90deg, var(--accent-warm-bg, var(--g10)) 0%, transparent 15%),
    repeating-linear-gradient(0deg, transparent, transparent 32px, color-mix(in srgb, var(--g) 4%, transparent) 32px, color-mix(in srgb, var(--g) 4%, transparent) 33px),
    var(--black) !important;
  border-left: 8px solid var(--g) !important;
}
html[data-template="calligraphy"] .hero::before {
  content: '印' !important;
  display: flex !important;
  align-items: center; justify-content: center;
  position: absolute; top: calc(var(--nav) + 24px); left: 32px;
  width: 48px; height: 48px;
  border: 2px solid var(--g); color: var(--g);
  font-family: 'Ma Shan Zheng', serif; font-size: 1.4rem;
  opacity: .85 !important;
}
html[data-template="calligraphy"] .section--dark {
  background: var(--d2) !important;
}
html[data-template="calligraphy"] .section--gray {
  background: color-mix(in srgb, var(--d2) 80%, var(--d3)) !important;
}
html[data-template="calligraphy"] .footer {
  background: linear-gradient(180deg, var(--d2), var(--d3)) !important;
}
html[data-template="calligraphy"] .page-hero {
  background: linear-gradient(90deg, var(--g10), transparent 12%), var(--black) !important;
  border-left: 6px solid var(--g) !important;
}

/* ═══ L · 霓虹 — 暗场 HUD 网格 ══════════════════════════════════ */
html[data-template="neon-cyber"] body::before {
  background-image:
    linear-gradient(color-mix(in srgb, var(--g) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--g) 8%, transparent) 1px, transparent 1px),
    radial-gradient(ellipse 60% 50% at 100% 0%, var(--seo-bg) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 0% 100%, var(--geo-bg) 0%, transparent 50%) !important;
  background-size: 32px 32px, 32px 32px, 100% 100%, 100% 100% !important;
}
html[data-template="neon-cyber"] body::after {
  content: '' !important;
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, color-mix(in srgb, var(--t1) 4%, transparent) 2px, color-mix(in srgb, var(--t1) 4%, transparent) 4px);
  opacity: .35;
}
html[data-template="neon-cyber"] .hero {
  background: linear-gradient(135deg, var(--g10) 0%, transparent 40%), var(--black) !important;
  border-bottom: 1px solid var(--ln2) !important;
}
html[data-template="neon-cyber"] .hero::before {
  content: '' !important;
  display: block !important;
  position: absolute; top: calc(var(--nav) + 16px); left: 24px;
  width: 24px; height: 24px;
  border-top: 2px solid var(--g); border-left: 2px solid var(--g);
  opacity: 1 !important;
}
html[data-template="neon-cyber"] .hero::after {
  content: '' !important;
  display: block !important;
  position: absolute; bottom: 24px; right: 24px;
  width: 24px; height: 24px;
  border-bottom: 2px solid var(--g); border-right: 2px solid var(--g);
  background: none !important;
  opacity: 1 !important;
}
html[data-template="neon-cyber"] .section {
  background: var(--d1) !important;
}
html[data-template="neon-cyber"] .section--dark {
  background: var(--black) !important;
}
html[data-template="neon-cyber"] .section--gray {
  background: color-mix(in srgb, var(--d1) 85%, var(--black)) !important;
}
html[data-template="neon-cyber"] .cta-banner {
  background: var(--d1) !important;
  border: 1px solid var(--ln2) !important;
  box-shadow: inset 0 0 40px var(--g10) !important;
}
html[data-template="neon-cyber"] .cta-banner-title,
html[data-template="neon-cyber"] .cta-banner-sub {
  color: var(--t1) !important;
  -webkit-text-fill-color: var(--t1) !important;
}
html[data-template="neon-cyber"] .news-section {
  background: var(--d1) !important;
}
html[data-template="neon-cyber"] .footer {
  background: var(--black) !important;
}

/* ── 响应式 ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  html[data-template="sunset-amber"] .hero::before { display: none !important; }
  html[data-template="calligraphy"] .hero::before {
    left: 16px; width: 40px; height: 40px; font-size: 1.1rem;
  }
}