/* ============================================================
   前台基础样式  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:center;gap:10px;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;
}
.logo-text{white-space:nowrap;display:inline-block}
.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-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}

/* ===================== 区块标题 ===================== */
.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)}

/* ===================== 页脚 ===================== */
.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-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}
  .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)}