/*!
 * 光影集 (Light & Shadow Collection) — 网站相册程序
 * Copyright (C) 王文方 / loves.net.cn 版权所有
 * All Rights Reserved. 永久保留所有权利。
 * 未经授权不得复制、修改、分发、破解或逆向工程本程序。
 * Unauthorized copying, modification, distribution, cracking, or reverse
 * engineering of this software is strictly prohibited. All rights reserved.
 */
/* ============================================================
   前台基础样式  Base Layout & Theme Variable Contract
   每套主题(theme_*.css)只需覆盖下方 CSS 变量并点缀装饰
   ============================================================ */
:root{
  /* —— 主题变量契约（由各主题覆盖）—— */
  --c-bg: #f4f6f9;
  --c-bg-grad: radial-gradient(circle at 20% 10%, #eaf2ff, #f4f6f9 60%);
  --c-surface: #ffffff;
  --c-surface-2: #f7f9fc;
  --c-text: #1c2333;
  --c-muted: #6b7591;
  --c-accent: #4f7cff;
  --c-accent-2: #8a5cff;
  --c-border: rgba(30,40,70,.10);
  --c-on-accent: #ffffff;
  --font-display: 'Georgia','Times New Roman',serif;
  --font-body: -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  --radius: 16px;
  --shadow: 0 18px 40px rgba(30,40,70,.10);
  --hero-grad: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
  --hero-pattern: none;
  --card-hover-lift: -6px;
  --nav-bg: rgba(255,255,255,.72);
  --nav-blur: blur(14px);
  --deco: none; /* 装饰层 */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font-body);
  background:var(--c-bg-grad), var(--c-bg);
  color:var(--c-text);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.page{position:relative;min-height:100vh}

/* 背景装饰层 */
.bg-deco{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-deco .blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5}

/* ===================== 顶部导航 ===================== */
.topnav{
  position:sticky;top:0;z-index:100;
  background:var(--nav-bg);backdrop-filter:var(--nav-blur);
  border-bottom:1px solid var(--c-border);
  transition:all .3s;
}
.nav-inner{max-width:1280px;margin:0 auto;padding:0 28px;height:70px;display:flex;align-items:center;gap:24px}
.logo{display:flex;align-items:baseline;gap:6px;font-weight:800;font-size:20px;font-family:var(--font-display);flex-shrink:0}
.logo-mark{
  width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:var(--hero-grad);color:#fff;font-size:18px;font-weight:800;
  box-shadow:0 6px 16px rgba(0,0,0,.15);flex-shrink:0;align-self:center;
}
.logo-text{white-space:nowrap;display:inline-block}
.logo-cc{font-size:16px;font-weight:700;color:var(--c-muted);margin-left:1px}
.nav-menu{display:flex;gap:6px;margin-left:10px}
.nav-menu a{padding:9px 16px;border-radius:10px;font-size:14px;font-weight:600;color:var(--c-muted);transition:.18s}
.nav-menu a:hover{color:var(--c-text);background:var(--c-surface-2)}
.spacer{flex:1}

/* 主题切换器 */
.theme-switcher{position:relative}
.ts-btn{
  display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:30px;
  border:1px solid var(--c-border);background:var(--c-surface);color:var(--c-text);
  cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;transition:.18s;
}
.ts-btn:hover{border-color:var(--c-accent)}
.ts-panel{
  position:absolute;right:0;top:calc(100% + 10px);width:520px;max-width:calc(100vw - 32px);
  max-height:calc(100vh - 130px);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:18px;
  box-shadow:var(--shadow);padding:18px;opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:.22s;z-index:200;
  /* 自定义滚动条 - 适配各主题 */
  scrollbar-width:thin;
  scrollbar-color:var(--c-accent) var(--c-surface-2);
}
.ts-panel::-webkit-scrollbar{width:6px}
.ts-panel::-webkit-scrollbar-track{background:var(--c-surface-2);border-radius:10px}
.ts-panel::-webkit-scrollbar-thumb{background-color:var(--c-accent);border-radius:10px}
.ts-panel::-webkit-scrollbar-thumb:hover{background-color:var(--c-accent-2)}
.ts-panel.open{opacity:1;visibility:visible;transform:translateY(0)}
.ts-title{font-size:13px;color:var(--c-muted);margin-bottom:12px;font-weight:600}
.ts-category{font-size:12px;color:var(--c-accent);margin:16px 0 10px;padding-top:12px;border-top:1px solid var(--c-border);font-weight:700;letter-spacing:.5px}
.ts-tabs{display:flex;gap:0;margin-bottom:14px;border-bottom:2px solid var(--c-border)}
.ts-tab{flex:1;padding:10px 12px;border:none;background:transparent;color:var(--c-muted);font-size:13px;font-weight:600;cursor:pointer;transition:.18s;border-bottom:2px solid transparent;margin-bottom:-2px;font-family:inherit}
.ts-tab:hover{color:var(--c-text)}
.ts-tab.active{color:var(--c-accent);border-bottom-color:var(--c-accent)}
.ts-tab-content{display:none}
.ts-tab-content.active{display:block}
.ts-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ts-item{
  display:flex;align-items:center;gap:10px;padding:9px;border-radius:12px;
  border:1px solid var(--c-border);transition:.16s;cursor:pointer;
}
.ts-item:hover{border-color:var(--c-accent);background:var(--c-surface-2)}
.ts-item.active{border-color:var(--c-accent);background:rgba(79,124,255,.08)}
.ts-swatch{width:30px;height:30px;border-radius:9px;flex-shrink:0;border:1px solid rgba(0,0,0,.08)}
.ts-meta{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.ts-meta b{font-size:13px;font-weight:700}
.ts-meta small{font-size:10px;color:var(--c-muted)}
.ts-meta i{font-size:10px;color:var(--c-muted);font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===================== Hero ===================== */
.hero{position:relative;padding:90px 28px 70px;overflow:hidden}
.hero-inner{max-width:1280px;margin:0 auto;position:relative;z-index:2;text-align:center}
.hero .eyebrow{
  display:inline-block;padding:7px 18px;border-radius:30px;font-size:12px;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;color:var(--c-on-accent);background:var(--hero-grad);
  box-shadow:0 8px 22px rgba(0,0,0,.12);margin-bottom:26px;
}
.hero h1{
  font-family:var(--font-display);font-size:clamp(40px,7vw,76px);font-weight:800;
  line-height:1.05;margin:0 0 18px;letter-spacing:-1px;
}
.hero h1 .grad{background:var(--hero-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{font-size:clamp(16px,2vw,20px);color:var(--c-muted);max-width:640px;margin:0 auto 32px}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:30px;
  font-weight:700;font-size:15px;cursor:pointer;border:none;font-family:inherit;transition:.2s;
}
.btn.primary{background:var(--hero-grad);color:var(--c-on-accent);box-shadow:0 10px 26px rgba(0,0,0,.14)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,0,0,.2)}
.btn.ghost{background:var(--c-surface);color:var(--c-text);border:1px solid var(--c-border)}
.btn.ghost:hover{border-color:var(--c-accent)}

/* Hero 装饰浮动元素 */
.hero-shapes{position:absolute;inset:0;z-index:1;pointer-events:none}
.shape{position:absolute;border-radius:50%;opacity:.5}
.shape.s1{width:300px;height:300px;background:var(--c-accent);filter:blur(80px);top:-60px;left:-40px;opacity:.18}
.shape.s2{width:260px;height:260px;background:var(--c-accent-2);filter:blur(80px);bottom:-60px;right:-20px;opacity:.18}

/* Hero 封面大图背景 */
.hero-has-cover{min-height:100vh;display:flex;align-items:center;justify-content:center}
.hero-cover-bg{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-repeat:no-repeat;
  background-position:center center;
  animation:coverFadeIn .8s ease-out;
}
.hero-cover-overlay{position:absolute;inset:0;z-index:1}
.hero-has-cover .hero-inner{z-index:2}
.hero-has-cover .hero h1,
.hero-has-cover h1{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.4)}
.hero-has-cover .hero h1 .grad{
  background:linear-gradient(135deg,#fff,rgba(255,255,255,.7));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-has-cover .lead{color:rgba(255,255,255,.88);text-shadow:0 1px 10px rgba(0,0,0,.3)}
.hero-has-cover .btn.ghost{
  background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.hero-has-cover .btn.ghost:hover{
  background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5);
}
@keyframes coverFadeIn{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}

/* —— 透明跟随主题背景 —— */
/* 遮罩使用主题背景色 var(--c-bg) 时，文字颜色适配主题 */
.hero-cover-theme-overlay .hero h1,
.hero-cover-theme-overlay h1{
  color:var(--c-text);text-shadow:0 2px 14px rgba(0,0,0,.12)
}
.hero-cover-theme-overlay .hero h1 .grad{
  background:var(--hero-grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-cover-theme-overlay .lead{
  color:var(--c-muted);text-shadow:none
}
.hero-cover-theme-overlay .btn.ghost{
  background:var(--c-surface);color:var(--c-text);
  border:1px solid var(--c-border);
}
.hero-cover-theme-overlay .btn.ghost:hover{
  border-color:var(--c-accent);background:var(--c-surface-2);
}

/* —— 图片底部渐隐 —— */
/* 封面图和遮罩在底部渐变为透明，与页面背景自然融合 */
.hero-cover-fade-bottom .hero-cover-bg{
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 50%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 50%,transparent 100%);
}
.hero-cover-fade-bottom .hero-cover-overlay{
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 50%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 50%,transparent 100%);
}
/* 底部渐隐 + 跟随主题：过渡区文字保持主题色调 */
.hero-cover-fade-bottom.hero-cover-theme-overlay .hero h1,
.hero-cover-fade-bottom.hero-cover-theme-overlay h1{
  text-shadow:0 2px 16px rgba(0,0,0,.08)
}

/* ===================== 区块标题 ===================== */
.section{max-width:1280px;margin:0 auto;padding:70px 28px}
.section-head{text-align:center;margin-bottom:46px}
.section-head .kicker{font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--c-accent);font-weight:700}
.section-head h2{font-family:var(--font-display);font-size:clamp(30px,4vw,44px);margin:8px 0 12px;font-weight:800}
.section-head p{color:var(--c-muted);max-width:560px;margin:0 auto;font-size:16px}
.divider{width:60px;height:3px;background:var(--hero-grad);margin:18px auto 0;border-radius:3px}

/* ===================== 相册网格 ===================== */
.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:28px}
.album-card{
  position:relative;border-radius:var(--radius);overflow:hidden;background:var(--c-surface);
  box-shadow:var(--shadow);border:1px solid var(--c-border);transition:.35s cubic-bezier(.2,.7,.3,1);
  cursor:pointer;display:block;
}
.album-card:hover{transform:translateY(var(--card-hover-lift));box-shadow:0 30px 60px rgba(30,40,70,.18)}
.album-cover{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--c-surface-2)}
.album-cover img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.album-card:hover .album-cover img{transform:scale(1.08)}
.album-cover::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55));
}
.album-badge{
  position:absolute;top:14px;left:14px;z-index:2;padding:5px 12px;border-radius:20px;
  font-size:11px;font-weight:700;backdrop-filter:blur(6px);
  background:rgba(255,255,255,.85);color:#1c2333;
}
.album-count{
  position:absolute;bottom:14px;left:14px;z-index:2;color:#fff;font-size:13px;font-weight:600;
  display:flex;align-items:center;gap:6px;text-shadow:0 1px 4px rgba(0,0,0,.4);
}
.album-info{padding:18px 20px 20px}
.album-info h3{font-family:var(--font-display);font-size:20px;margin:0 0 6px;font-weight:700}
.album-info p{color:var(--c-muted);font-size:14px;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.album-meta{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:14px;border-top:1px solid var(--c-border)}
.album-meta .date{font-size:12px;color:var(--c-muted)}
.album-meta .view{font-size:12px;color:var(--c-accent);font-weight:600}
.album-theme-tag{font-size:11px;color:var(--c-muted);background:var(--c-surface-2);padding:4px 10px;border-radius:12px}

/* ===================== 关于 ===================== */
.about-wrap{background:var(--c-surface);border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.about-text h2{font-family:var(--font-display);font-size:34px;margin:0 0 18px}
.about-text p{color:var(--c-muted);font-size:16px;margin:0 0 16px}
.about-stats{display:flex;gap:30px;margin-top:24px}
.about-stats .st .n{font-size:32px;font-weight:800;color:var(--c-accent);font-family:var(--font-display)}
.about-stats .st .l{font-size:13px;color:var(--c-muted)}
.about-visual{border-radius:var(--radius);aspect-ratio:4/3;background:var(--hero-grad);position:relative;overflow:hidden;box-shadow:var(--shadow)}

/* ===================== 友情链接 ===================== */
.friend-links-section{padding-bottom:50px}
.friend-links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:960px;margin:0 auto}
.friend-link{
  display:inline-flex;align-items:center;padding:10px 22px;
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:30px;font-size:14px;font-weight:600;color:var(--c-text);
  transition:all .2s;box-shadow:0 2px 8px rgba(0,0,0,.04)
}
.friend-link:hover{
  border-color:var(--c-accent);color:var(--c-accent);
  transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.08)
}

/* ===================== 页脚 ===================== */
.footer{background:var(--c-text);color:#cfd4e6;padding:50px 28px 0;margin-top:40px;position:relative;z-index:2}
.foot-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr;gap:40px;padding-bottom:30px}
.foot-logo{font-family:var(--font-display);font-size:24px;font-weight:800;color:#fff;margin-bottom:10px}
.foot-logo-cc{color:#9aa2bc;font-size:16px;font-weight:500;margin-left:2px}
.foot-desc{color:#9aa2bc;font-size:14px;max-width:380px}
.foot-name{font-weight:700;color:#fff;margin-bottom:10px}
.foot-text{font-size:13px;color:#9aa2bc}
.foot-record{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.foot-record a,.foot-record span{color:#9aa2bc;font-size:13px}
.foot-record a:hover{color:#fff}
.foot-bottom{max-width:1280px;margin:0 auto;padding:18px 0;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:center;align-items:center;font-size:13px;color:#9aa2bc}

/* 空状态 */
.empty-state{text-align:center;padding:80px 20px;color:var(--c-muted)}
.empty-state .big{font-size:70px;opacity:.3;margin-bottom:16px}
.empty-state h3{font-family:var(--font-display);color:var(--c-text);margin:0 0 8px}

/* 响应式 */
@media(max-width:860px){
  .nav-menu{display:none}
  .hero{padding:60px 20px 50px}
  .hero-has-cover{min-height:100vh}
  .about-grid{grid-template-columns:1fr}
  .foot-inner{grid-template-columns:1fr}
  .section{padding:50px 20px}

  /* 手机端：logo 保持左上角，spacer 撑开将切换器推到右上角 */
  .nav-inner{gap:12px;padding:0 16px}
  .spacer{flex:1}
  .logo{flex-shrink:0}
  .logo-text{display:inline-block!important;white-space:nowrap}
  .ts-btn .ts-name{display:none}
  .ts-btn{padding:8px 12px}
  .ts-btn .ts-icon{font-size:18px}

  /* 手机端风格选择面板：从右侧弹出 */
  .ts-panel{
    right:0;
    left:auto;
    width:360px;
    max-width:calc(100vw - 24px);
    max-height:calc(100vh - 110px);
    overflow-y:auto;
    overflow-x:hidden;
  }
  .ts-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .ts-panel{
    width:calc(100vw - 24px);
    max-width:calc(100vw - 24px);
    max-height:calc(100vh - 100px);
  }
  .ts-grid{grid-template-columns:1fr 1fr}
}

/* 进入动画 */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}

/* 主题切换淡入 */
body{transition:background .4s,color .4s}

/* ===================== 主题色块预览 ===================== */
.ts-swatch.ts-natural{background:linear-gradient(135deg,#fbfdfb,#5a8a5a)}
.ts-swatch.ts-aurora{background:linear-gradient(135deg,#0d0e1a,#b388ff,#7ee8fa)}
.ts-swatch.ts-pro{background:linear-gradient(135deg,#121417,#c9a84c)}
.ts-swatch.ts-vintage{background:linear-gradient(135deg,#f5f0e8,#8b6f47)}
.ts-swatch.ts-mono{background:linear-gradient(135deg,#fafafa,#1a1a1a)}
.ts-swatch.ts-ocean{background:linear-gradient(135deg,#0a1929,#1a73e8)}
.ts-swatch.ts-sunset{background:linear-gradient(135deg,#1f1410,#e07b3a)}
.ts-swatch.ts-sakura{background:linear-gradient(135deg,#fdf8f6,#e8869c)}
.ts-swatch.ts-forest{background:linear-gradient(135deg,#0a1f12,#2d6a4f)}
.ts-swatch.ts-galaxy{background:linear-gradient(135deg,#08091a,#7c4dff)}
.ts-swatch.ts-mist{background:linear-gradient(135deg,#eef2f5,#7b9ab0)}
.ts-swatch.ts-ink{background:linear-gradient(135deg,#f8f6f0,#3a3a38)}
.ts-swatch.ts-lavender{background:linear-gradient(135deg,#f6f3fa,#8b6fc4)}
.ts-swatch.ts-emerald{background:linear-gradient(135deg,#0a1e1a,#10b981)}
.ts-swatch.ts-rosegold{background:linear-gradient(135deg,#faf5f2,#c08778)}
.ts-swatch.ts-nordic{background:linear-gradient(135deg,#f5f6f7,#5a6c7a)}
.ts-swatch.ts-amber{background:linear-gradient(135deg,#1a1308,#ffb800)}
.ts-swatch.ts-crimson{background:linear-gradient(135deg,#1a0a0a,#dc2626)}
.ts-swatch.ts-seafoam{background:linear-gradient(135deg,#f0f9f6,#2dd4a7)}
.ts-swatch.ts-noir{background:linear-gradient(135deg,#0a0a0c,#94a3b8)}
/* —— 新增 30 套流光溢彩系列色块预览 —— */
.ts-swatch.ts-newyear{background:linear-gradient(135deg,#1a0a0a,#ff1744,#ffd700)}
.ts-swatch.ts-birthday{background:linear-gradient(135deg,#1a0a1e,#ff6b9d,#c084fc)}
.ts-swatch.ts-national{background:linear-gradient(135deg,#0a0a1a,#de2910,#ffde00)}
.ts-swatch.ts-aurora2{background:linear-gradient(135deg,#0a0a1f,#00d4aa,#ff006e,#7c4dff)}
.ts-swatch.ts-aurorab{background:linear-gradient(135deg,#050a1a,#3b82f6,#06b6d4)}
.ts-swatch.ts-cherry{background:linear-gradient(135deg,#1a0d14,#ff8fab,#ffc8dd)}
.ts-swatch.ts-coral{background:linear-gradient(135deg,#1a0e08,#ff7f50,#ffa078)}
.ts-swatch.ts-cosmic{background:linear-gradient(135deg,#080820,#6c5ce7,#a29bfe)}
.ts-swatch.ts-crystal{background:linear-gradient(135deg,#f0f4f8,#a5b4fc,#c4b5fd)}
.ts-swatch.ts-cyber{background:linear-gradient(135deg,#0a0a14,#00f5d4,#00bbf9)}
.ts-swatch.ts-dawn{background:linear-gradient(135deg,#1a0e08,#ff6b35,#ffd60a)}
.ts-swatch.ts-emerald2{background:linear-gradient(135deg,#0a1e1a,#10b981,#34d399)}
.ts-swatch.ts-forest2{background:linear-gradient(135deg,#0a1f12,#2d6a4f,#ffd700)}
.ts-swatch.ts-goldlux{background:linear-gradient(135deg,#1a1308,#d4af37,#ffd700)}
.ts-swatch.ts-ice{background:linear-gradient(135deg,#050a1a,#7dd3fc,#e0f2fe)}
.ts-swatch.ts-lavender2{background:linear-gradient(135deg,#1a0a2e,#a78bfa,#c4b5fd)}
.ts-swatch.ts-magnetic{background:linear-gradient(135deg,#0a0a1a,#7c3aed,#3b82f6)}
.ts-swatch.ts-midnight{background:linear-gradient(135deg,#0a0a1a,#1e3a8a,#60a5fa)}
.ts-swatch.ts-mintglow{background:linear-gradient(135deg,#0a1f1a,#6ee7b7,#a7f3d0)}
.ts-swatch.ts-neon{background:linear-gradient(135deg,#1a0a1e,#ff006e,#00f5d4)}
.ts-swatch.ts-ocean2{background:linear-gradient(135deg,#050a1a,#0ea5e9,#06b6d4)}
.ts-swatch.ts-peach{background:linear-gradient(135deg,#1a0e08,#fb923c,#fda4af)}
.ts-swatch.ts-phantom{background:linear-gradient(135deg,#0a0a14,#7c3aed,#a855f7)}
.ts-swatch.ts-plum{background:linear-gradient(135deg,#1a0a1e,#9333ea,#c084fc)}
.ts-swatch.ts-rainbow{background:linear-gradient(135deg,#1a0a1e,#ff006e,#ff8e00,#ffd60a,#00f5d4,#7c4dff)}
.ts-swatch.ts-rose2{background:linear-gradient(135deg,#1a0a0a,#e11d48,#fda4af)}
.ts-swatch.ts-rosegold2{background:linear-gradient(135deg,#1a0e08,#c08778,#fda4af)}
.ts-swatch.ts-sunset2{background:linear-gradient(135deg,#1a0e08,#ff6b35,#ff006e,#7c4dff)}
.ts-swatch.ts-twilight{background:linear-gradient(135deg,#1a0a1e,#a855f7,#f472b6,#fb923c)}
.ts-swatch.ts-velvet{background:linear-gradient(135deg,#1a0a1e,#7c3aed,#d4af37)}
/* —— 新增 30 套字体强化系列色块预览 —— */
/* 流光系列 */
.ts-swatch.ts-luster-amber{background:linear-gradient(135deg,#1a1208,#ffb800,#d4af37)}
.ts-swatch.ts-luster-ocean{background:linear-gradient(135deg,#050a1a,#0ea5e9,#06b6d4)}
.ts-swatch.ts-luster-rose{background:linear-gradient(135deg,#1a0a0e,#e11d48,#fda4af)}
.ts-swatch.ts-luster-emerald{background:linear-gradient(135deg,#0a1e1a,#10b981,#34d399)}
.ts-swatch.ts-luster-violet{background:linear-gradient(135deg,#0a0a1e,#7c3aed,#a855f7)}
.ts-swatch.ts-luster-gold{background:linear-gradient(135deg,#0a0a0a,#d4af37,#ffd700)}
.ts-swatch.ts-luster-azure{background:linear-gradient(135deg,#0a0f1e,#0284c7,#38bdf8)}
.ts-swatch.ts-luster-coral{background:linear-gradient(135deg,#1a0e08,#ff7f50,#ffa078)}
.ts-swatch.ts-luster-silver{background:linear-gradient(135deg,#0e0e14,#c0c0d0,#e2e8f0)}
.ts-swatch.ts-luster-opal{background:linear-gradient(135deg,#0a0a1e,#00d4aa,#ff006e,#7c4dff)}
/* 薰衣草系列 */
.ts-swatch.ts-bloom-lilac{background:linear-gradient(135deg,#f8f5fb,#9c7ab5,#b89dc9)}
.ts-swatch.ts-bloom-orchid{background:linear-gradient(135deg,#f7f4fa,#8e6bb5,#a982cc)}
.ts-swatch.ts-bloom-violet{background:linear-gradient(135deg,#f5f2f8,#7c5ba8,#9d80c4)}
.ts-swatch.ts-bloom-mauve{background:linear-gradient(135deg,#f6f3f4,#9b6b8a,#b893a8)}
.ts-swatch.ts-bloom-heather{background:linear-gradient(135deg,#f5f3f6,#8a6b9b,#a88bc0)}
.ts-swatch.ts-bloom-wisteria{background:linear-gradient(135deg,#f6f4fa,#7b6cb0,#9d8cc8)}
.ts-swatch.ts-bloom-thistle{background:linear-gradient(135deg,#f4f3f6,#8e7baf,#a895c4)}
.ts-swatch.ts-bloom-amethyst{background:linear-gradient(135deg,#f5f2f9,#7c4dbf,#9d75d4)}
.ts-swatch.ts-bloom-iris{background:linear-gradient(135deg,#f4f5f8,#6b6bb5,#8a8acc)}
.ts-swatch.ts-bloom-periwinkle{background:linear-gradient(135deg,#f5f5fa,#7c7bc8,#9d9cd8)}
/* 普通系列 */
.ts-swatch.ts-cny-lantern{background:linear-gradient(135deg,#1a0a0a,#ff1744,#ffd700)}
.ts-swatch.ts-cny-fortune{background:linear-gradient(135deg,#1a0808,#dc2626,#fbbf24)}
.ts-swatch.ts-cny-couplet{background:linear-gradient(135deg,#1c0a0a,#e63946,#ffd700)}
.ts-swatch.ts-nat-flag{background:linear-gradient(135deg,#0a0a14,#de2910,#ffde00)}
.ts-swatch.ts-bday-cake{background:linear-gradient(135deg,#fef5f0,#ff6b9d,#c084fc)}
.ts-swatch.ts-cozy-cafe{background:linear-gradient(135deg,#1a1410,#c8a06e,#d4b896)}
.ts-swatch.ts-retro-type{background:linear-gradient(135deg,#1a1814,#d4c5a0,#a09080)}
.ts-swatch.ts-polaroid{background:linear-gradient(135deg,#f8f8f5,#4a4a4a,#e0e0e0)}
.ts-swatch.ts-scrapbook{background:linear-gradient(135deg,#f9f6f0,#e8869c,#7cb342)}
.ts-swatch.ts-minimalist{background:linear-gradient(135deg,#fafafa,#1a1a1a,#6366f1)}

/* ============================================================
   文章模块样式  Articles Module Styles
   - 文章列表瀑布流 / 文章详情 / 首页推荐文章
   - 复用主题变量：--c-bg / --c-text / --c-muted / --c-surface /
     --c-surface-2 / --c-border / --c-accent / --c-accent-2 /
     --c-on-accent / --radius / --shadow / --hero-grad /
     --card-hover-lift / --font-display / --font-body
   ============================================================ */

/* —— 中文优先字体栈（补充 Linux 环境中文渲染） —— */
.article-card,
.article-card-title,
.article-detail,
.article-detail h1,
.article-detail-summary,
.article-detail-content,
.article-detail-content h1,
.article-detail-content h2,
.article-detail-content h3,
.article-detail-content h4,
.recommended-article-card,
.recommended-article-title{
  font-family:var(--font-body),'Noto Sans CJK SC','WenQuanYi Micro Hei','PingFang SC','Microsoft YaHei',sans-serif;
}

/* ===================== 文章列表 · 瀑布流 ===================== */
/* 利用 CSS columns 实现瀑布流；卡片 break-inside:avoid 避免跨列断裂；
   图片保留原始宽高比（width:100%/height:auto），高度自然错落形成瀑布效果 */
.articles-masonry{
  column-count:3;
  column-gap:20px;
}
.article-card{
  display:block;
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
  margin-bottom:20px;
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s cubic-bezier(.2,.7,.3,1),border-color .2s;
}
.article-card:hover{
  transform:translateY(var(--card-hover-lift,-4px));
  box-shadow:0 28px 56px rgba(30,40,70,.18);
  border-color:var(--c-accent);
}
.article-card-cover{
  background:var(--c-surface-2);
  overflow:hidden;
}
.article-card-cover img{
  width:100%;
  height:auto;
  display:block;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.article-card:hover .article-card-cover img{transform:scale(1.06)}
/* 图片与文字之间的横线分隔 */
.article-card-divider{
  height:3px;
  background:linear-gradient(90deg,var(--c-accent),var(--c-accent-2));
  flex-shrink:0;
}
.article-card-body{padding:16px 18px 18px}
.article-card-title{
  font-size:18px;
  font-weight:700;
  margin:0 0 8px;
  line-height:1.4;
  color:var(--c-text);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.article-card-summary{
  color:var(--c-muted);
  font-size:14px;
  line-height:1.6;
  margin:0 0 12px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.article-card-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color:var(--c-muted);
  padding-top:10px;
  border-top:1px solid var(--c-border);
}
.article-card-meta .views{color:var(--c-accent);font-weight:600}

/* ===================== 文章详情 ===================== */
.article-detail{
  position:relative;
  z-index:2;
  max-width:800px;
  margin:0 auto;
  padding:40px 28px 80px;
}
.article-back-btn{margin-bottom:28px}
.article-detail-head{margin-bottom:24px}
.article-detail h1{
  font-family:var(--font-display);
  font-size:clamp(28px,4vw,40px);
  font-weight:800;
  line-height:1.25;
  margin:0 0 16px;
  color:var(--c-text);
  letter-spacing:-.5px;
}
.article-detail-summary{
  font-size:16px;
  line-height:1.7;
  color:var(--c-muted);
  margin:0 0 18px;
}
.article-detail-meta{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  font-size:13px;
  color:var(--c-muted);
}
.article-detail-meta .views{color:var(--c-accent);font-weight:600}
.article-detail-cover{
  width:100%;
  border-radius:var(--radius);
  overflow:hidden;
  margin-bottom:32px;
  box-shadow:var(--shadow);
  background:var(--c-surface-2);
}
.article-detail-cover img{
  width:100%;
  height:auto;
  display:block;
}
/* —— 富文本正文排版 —— */
.article-detail-content{
  font-size:16px;
  line-height:1.85;
  color:var(--c-text);
  word-wrap:break-word;
  overflow-wrap:break-word;
}
.article-detail-content > *:first-child{margin-top:0}
.article-detail-content > *:last-child{margin-bottom:0}
.article-detail-content h1,
.article-detail-content h2,
.article-detail-content h3,
.article-detail-content h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.3;
  margin:1.6em 0 .8em;
  color:var(--c-text);
}
.article-detail-content h1{font-size:1.8em}
.article-detail-content h2{font-size:1.5em;padding-bottom:.3em;border-bottom:1px solid var(--c-border)}
.article-detail-content h3{font-size:1.25em}
.article-detail-content h4{font-size:1.1em}
.article-detail-content p{margin:0 0 1.2em}
.article-detail-content a{
  color:var(--c-accent);
  text-decoration:underline;
  text-underline-offset:2px;
  transition:color .18s;
}
.article-detail-content a:hover{color:var(--c-accent-2)}
.article-detail-content img{
  max-width:100%;
  height:auto;
  border-radius:10px;
  margin:1.4em auto;
  display:block;
}
.article-detail-content blockquote{
  margin:1.6em 0;
  padding:14px 22px;
  border-left:4px solid var(--c-accent);
  background:var(--c-surface-2);
  border-radius:0 10px 10px 0;
  color:var(--c-muted);
  font-style:italic;
}
.article-detail-content blockquote p{margin:0}
.article-detail-content ul,
.article-detail-content ol{margin:1.2em 0;padding-left:1.6em}
.article-detail-content li{margin:.5em 0}
.article-detail-content pre{
  background:var(--c-text);
  color:#e6e9f2;
  padding:18px 22px;
  border-radius:12px;
  overflow-x:auto;
  margin:1.6em 0;
  font-size:14px;
  line-height:1.6;
}
.article-detail-content code{
  font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
  font-size:.9em;
}
.article-detail-content :not(pre) > code{
  background:var(--c-surface-2);
  padding:2px 6px;
  border-radius:5px;
  color:var(--c-accent-2);
}
.article-detail-content table{
  width:100%;
  border-collapse:collapse;
  margin:1.6em 0;
  font-size:14px;
  border-radius:10px;
  overflow:hidden;
}
.article-detail-content th,
.article-detail-content td{
  border:1px solid var(--c-border);
  padding:10px 14px;
  text-align:left;
  vertical-align:top;
}
.article-detail-content th{background:var(--c-surface-2);font-weight:700}
.article-detail-content tr:nth-child(even){background:var(--c-surface-2)}
.article-detail-content hr{border:none;border-top:1px solid var(--c-border);margin:2em 0}
.article-detail-foot{
  margin-top:48px;
  padding-top:32px;
  border-top:1px solid var(--c-border);
  text-align:center;
}

/* ===================== 首页 · 推荐文章（横排卡片） ===================== */
.recommended-articles-section{padding-bottom:60px}
.recommended-articles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
/* 卡片：图片在上 → 横线分隔 → 标题+摘要在下 */
.recommended-article-card{
  display:flex;
  flex-direction:column;
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s cubic-bezier(.2,.7,.3,1),border-color .2s;
}
.recommended-article-card:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 48px rgba(30,40,70,.16);
  border-color:var(--c-accent);
}
.recommended-article-cover{
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--c-surface-2);
}
.recommended-article-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.recommended-article-card:hover .recommended-article-cover img{transform:scale(1.06)}
/* 图片与文字之间的横线分隔 */
.recommended-article-divider{
  height:3px;
  background:linear-gradient(90deg,var(--c-accent),var(--c-accent-2));
  flex-shrink:0;
}
.recommended-article-body{
  padding:18px 20px 20px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.recommended-article-title{
  font-size:17px;
  font-weight:700;
  margin:0 0 8px;
  line-height:1.4;
  color:var(--c-text);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.recommended-article-summary{
  color:var(--c-muted);
  font-size:13px;
  line-height:1.6;
  margin:0 0 14px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  flex:1;
}
.recommended-article-more{
  font-size:13px;
  font-weight:600;
  color:var(--c-accent);
  align-self:flex-start;
  transition:color .18s,transform .18s;
}
.recommended-article-card:hover .recommended-article-more{
  color:var(--c-accent-2);
  transform:translateX(4px);
}

/* —— 更多文章链接 —— */
.recommended-articles-more{
  margin-top:36px;
  text-align:center;
}
.more-articles-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 36px;
  font-size:15px;
  font-weight:600;
  border-radius:30px;
  border:1.5px solid var(--c-border);
  background:var(--c-surface);
  color:var(--c-text);
  transition:all .25s;
}
.more-articles-link:hover{
  border-color:var(--c-accent);
  color:var(--c-accent);
  background:var(--c-surface-2);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}

/* ===================== 文章模块响应式 ===================== */
@media(max-width:1024px){
  /* 平板：文章列表 2 列，推荐文章 2 列 */
  .articles-masonry{column-count:2}
  .recommended-articles{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .article-detail{padding:30px 20px 60px}
  /* 推荐文章在平板竖屏时改为单列横排卡片 */
  .recommended-articles{grid-template-columns:1fr;gap:20px}
  .recommended-article-card{flex-direction:row}
  .recommended-article-cover{width:200px;aspect-ratio:auto;flex-shrink:0}
  .recommended-article-cover img{height:100%}
  .recommended-article-divider{width:3px;height:auto;background:linear-gradient(180deg,var(--c-accent),var(--c-accent-2))}
  .recommended-article-body{flex:1}
}
@media(max-width:680px){
  /* 手机：文章列表 1 列 */
  .articles-masonry{column-count:1}
  .article-detail h1{font-size:26px}
  .article-detail-content{font-size:15px}
  .article-detail-content pre{padding:14px 16px;font-size:13px}
  .article-detail-meta{gap:12px}
  /* 手机推荐文章回到竖排卡片 */
  .recommended-article-card{flex-direction:column}
  .recommended-article-cover{width:100%;aspect-ratio:16/10}
  .recommended-article-divider{width:100%;height:3px;background:linear-gradient(90deg,var(--c-accent),var(--c-accent-2))}
}

/* ===================== 详情页 · 相关文章瀑布流 ===================== */
.article-related{
  margin-top:48px;
  padding-top:36px;
  border-top:1px solid var(--c-border);
}
.article-related-head{
  text-align:center;
  margin-bottom:28px;
}
.article-related-head .kicker{
  font-size:12px;
  letter-spacing:3px;
  font-weight:700;
  color:var(--c-accent);
  text-transform:uppercase;
}
.article-related-head h3{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:700;
  margin:6px 0 0;
  color:var(--c-text);
}
.article-related-masonry{
  column-count:3;
  column-gap:20px;
}
@media(max-width:1024px){
  .article-related-masonry{column-count:2}
}
@media(max-width:680px){
  .article-related-masonry{column-count:1}
}

/* ===================== 瀑布流 · 500px风格 ===================== */
/* 容器：相对定位，JS动态设置高度 */
.wf-container{
  position:relative;
  width:100%;
  margin:0 auto;
  transition:height .3s ease;
  overflow:hidden;
}

/* 瀑布流单项 — 500px风格：无圆角，直角边 */
.wf-item{
  position:absolute;
  display:block;
  text-decoration:none;
  overflow:hidden;
  background:var(--c-surface);
  transition:opacity .5s,filter .3s ease;
  cursor:pointer;
  border-radius:0;       /* 500px风格：直角 */
}
.wf-item:hover{
  z-index:10;
  filter:brightness(.92);
}
.wf-item.reveal{
  opacity:0;
}
.wf-item.reveal.wf-visible{
  opacity:1;
}

/* 图片容器：填满item */
.wf-img-wrap{
  width:100%;
  height:100%;
  overflow:hidden;
  background:var(--c-surface-2);
  position:relative;
  border-radius:0;       /* 直角 */
}
.wf-img-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:0;
  border-radius:0;       /* 直角 */
}
.wf-img-wrap img.loaded{
  opacity:1;
}

/* 图片加载占位动画 */
.wf-img-wrap::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:linear-gradient(90deg,var(--c-surface-2) 25%,var(--c-surface) 50%,var(--c-surface-2) 75%);
  background-size:200% 100%;
  animation:wf-shimmer 1.5s infinite;
  z-index:0;
}
.wf-img-wrap.img-loaded::before{
  display:none;
}
@keyframes wf-shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

/* 悬浮遮罩层 — 直角 */
.wf-overlay{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.25) 45%,transparent 70%);
  display:flex;
  align-items:flex-end;
  padding:16px;
  opacity:0;
  transition:opacity .35s ease;
  border-radius:0;       /* 直角 */
}
.wf-item:hover .wf-overlay{
  opacity:1;
}
.wf-overlay-content{
  width:100%;
  transform:translateY(10px);
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.wf-item:hover .wf-overlay-content{
  transform:translateY(0);
}

/* 相册主题标签 */
.wf-album-badge{
  display:inline-block;
  padding:3px 12px;
  border-radius:20px;
  background:rgba(255,255,255,.2);
  backdrop-filter:blur(10px);
  color:#fff;
  font-size:11px;
  font-weight:600;
  letter-spacing:.5px;
  margin-bottom:8px;
  border:1px solid rgba(255,255,255,.15);
}

/* 相册标题 */
.wf-title{
  font-size:15px;
  font-weight:700;
  color:#fff;
  margin:0 0 4px;
  line-height:1.4;
  text-shadow:0 2px 8px rgba(0,0,0,.3);
}

/* 照片标题 */
.wf-photo-title{
  font-size:12px;
  color:rgba(255,255,255,.8);
  margin:0 0 10px;
  line-height:1.3;
}

/* 浏览提示 */
.wf-view{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:600;
  color:#fff;
  padding:5px 14px;
  border-radius:20px;
  background:linear-gradient(135deg,var(--c-accent),var(--c-accent-2));
  box-shadow:0 4px 14px rgba(0,0,0,.2);
}

/* 模式提示文字 */
.wf-mode-hint{
  text-align:center;
  margin-top:32px;
  font-size:13px;
  color:var(--c-muted);
  line-height:1.6;
}

/* ============ 响应式（JS控制行内布局，此处仅做小屏适配） ============ */
@media(max-width:480px){
  .wf-overlay{padding:10px}
  .wf-title{font-size:13px}
  .wf-photo-title{font-size:11px}
  .wf-view{font-size:11px;padding:4px 10px}
}

/* ============ 移动端取消悬浮遮罩，改为常显底部渐变 ============ */
@media(hover:none) and (pointer:coarse){
  .wf-overlay{
    opacity:1;
    background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 55%);
    padding:8px 10px;
  }
  .wf-overlay-content{
    transform:translateY(0);
  }
  .wf-album-badge{
    font-size:10px;
    padding:2px 8px;
    margin-bottom:3px;
  }
  .wf-title{font-size:12px;margin-bottom:2px}
  .wf-photo-title{display:none}
  .wf-view{display:none}
}