/* ============================================================================
   PHOTOGRAPHY THEMES V5 — 27 Brand New Photography-Centric CSS Themes
   Creative, artistic, visually distinct. Each theme: 1 font block + 3 color variants.
   Themes: lensbaby, daguerreotype, pinhole, lomography, fisheye, tri-x, portra,
           velvia, ektachrome, chronophoto, aerial, underwater, astrophoto, street,
           zenphoto, abstract, neonnoir, sports, foodphoto, architecture, wildlife,
           fineart, vintage70, cyanotype, tintype, holga, panorama
   ============================================================================ */

/* ============================================================
   GOOGLE FONTS — Batched imports
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&family=Permanent+Marker&family=Orbitron:wght@400;500;600;700;800;900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Cormorant+Infant:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Noto+Serif+SC:wght@200;300;400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@300;400;500;600;700&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&family=Major+Mono+Display&family=Rajdhani:wght@300;400;500;600;700&family=Bebas+Neue&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Fredoka+One&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Special+Elite&family=Nanum+Pen+Script&family=Cormorant+SC:wght@300;400;500;600;700&display=swap');

/* ============================================================
   THEME 1: LENSBABY — 移轴微缩
   Tilt-shift miniature world. Soft, dreamy scale.
   ============================================================ */
[data-theme="lensbaby"] {
  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}

/* --- dream: soft pastel tilt-shift --- */
[data-theme="lensbaby"][data-color="dream"] {
  --bg: #faf6f0;
  --bg-2: #f0e8db;
  --bg-3: #e5d9c8;
  --bg-4: #d4c3aa;
  --text: #3a3228;
  --text-dim: #b0a391;
  --text-mid: #6b5e4f;
  --accent: #d4a574;
  --accent-glow: rgba(212, 165, 116, 0.35);
  --white: #fefcf9;
  --border: rgba(58, 50, 40, 0.1);
  --hero-overlay-start: rgba(40, 30, 20, 0.5);
  --hero-overlay-mid: rgba(100, 80, 50, 0.35);
  --hero-overlay-end: rgba(40, 30, 20, 0.7);
  --nav-scrolled-bg: rgba(250, 246, 240, 0.92);
}

/* --- miniature: warm toy-like tones --- */
[data-theme="lensbaby"][data-color="miniature"] {
  --bg: #fdf5e6;
  --bg-2: #f5e6cc;
  --bg-3: #ecd9a8;
  --bg-4: #d4b87a;
  --text: #4a3b28;
  --text-dim: #c4a87a;
  --text-mid: #7a6640;
  --accent: #e8a840;
  --accent-glow: rgba(232, 168, 64, 0.35);
  --white: #fff9f0;
  --border: rgba(74, 59, 40, 0.12);
  --hero-overlay-start: rgba(50, 35, 15, 0.55);
  --hero-overlay-mid: rgba(120, 90, 40, 0.38);
  --hero-overlay-end: rgba(50, 35, 15, 0.75);
  --nav-scrolled-bg: rgba(253, 245, 230, 0.92);
}

/* --- creative: bold artistic --- */
[data-theme="lensbaby"][data-color="creative"] {
  --bg: #0f0f0f;
  --bg-2: #1a1818;
  --bg-3: #252322;
  --bg-4: #353230;
  --text: #e8e0d8;
  --text-dim: #6b6560;
  --text-mid: #a09890;
  --accent: #ff6b9d;
  --accent-glow: rgba(255, 107, 157, 0.35);
  --white: #fafafa;
  --border: rgba(232, 224, 216, 0.1);
  --hero-overlay-start: rgba(15, 15, 15, 0.8);
  --hero-overlay-mid: rgba(40, 20, 30, 0.55);
  --hero-overlay-end: rgba(15, 15, 15, 0.92);
  --nav-scrolled-bg: rgba(15, 15, 15, 0.92);
}

[data-theme="lensbaby"] body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
  transition: background var(--transition);
}

[data-theme="lensbaby"] .hero-bg {
  filter: blur(2px) saturate(1.1);
  transform: scale(1.05);
}

[data-theme="lensbaby"] .hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: 0.06em;
}

[data-theme="lensbaby"] .nav-logo {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
}

/* tiltBlur: enhanced tilt-shift blur */
body[data-option-tiltBlur="1"] [data-theme="lensbaby"] .hero-bg {
  filter: blur(6px) saturate(1.2);
  transform: scale(1.08);
}
body[data-option-tiltBlur="1"] [data-theme="lensbaby"] .hero-overlay {
  background: linear-gradient(180deg, var(--hero-overlay-start) 0%, transparent 30%, transparent 70%, var(--hero-overlay-end) 100%);
}

/* miniatureScale: miniature scale feel */
body[data-option-miniatureScale="1"] [data-theme="lensbaby"] .hero-content {
  transform: scale(0.92);
  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.15));
}
body[data-option-miniatureScale="1"] [data-theme="lensbaby"] .hero-title {
  font-size: clamp(2.8rem, 8vw, 6.5rem);
}
body[data-option-miniatureScale="1"] [data-theme="lensbaby"] .hero {
  perspective: 800px;
}
body[data-option-miniatureScale="1"] [data-theme="lensbaby"] .hero-bg {
  transform: rotateX(3deg) scale(1.1);
}

/* selectiveFocus: selective focus highlight */
body[data-option-selectiveFocus="1"] [data-theme="lensbaby"] .hero-overlay {
  background: radial-gradient(ellipse at center, transparent 30%, var(--hero-overlay-start) 60%, var(--hero-overlay-end) 85%);
}
body[data-option-selectiveFocus="1"] [data-theme="lensbaby"] .hero-content {
  filter: drop-shadow(0 0 30px rgba(255,255,255,0.15));
}

/* ============================================================
   THEME 2: DAGUERREOTYPE — 银版镜像
   Mirror-like metallic antique. Silver, copper, gold.
   ============================================================ */
[data-theme="daguerreotype"] {
  --font-display: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- silver: mirror silver tones --- */
[data-theme="daguerreotype"][data-color="silver"] {
  --bg: #1a1c1e;
  --bg-2: #222528;
  --bg-3: #2c3033;
  --bg-4: #3a3f42;
  --text: #d0d4d8;
  --text-dim: #6a7075;
  --text-mid: #9ba0a5;
  --accent: #c0c5ca;
  --accent-glow: rgba(192, 197, 202, 0.3);
  --white: #e8eaec;
  --border: rgba(208, 212, 216, 0.12);
  --hero-overlay-start: rgba(20, 22, 24, 0.85);
  --hero-overlay-mid: rgba(60, 65, 70, 0.5);
  --hero-overlay-end: rgba(20, 22, 24, 0.95);
  --nav-scrolled-bg: rgba(26, 28, 30, 0.92);
}

/* --- copper: warm copper --- */
[data-theme="daguerreotype"][data-color="copper"] {
  --bg: #1e1815;
  --bg-2: #2a211d;
  --bg-3: #382d27;
  --bg-4: #4a3b33;
  --text: #e8d5c4;
  --text-dim: #8a7060;
  --text-mid: #c4a588;
  --accent: #d4855e;
  --accent-glow: rgba(212, 133, 94, 0.35);
  --white: #f5e8db;
  --border: rgba(232, 213, 196, 0.12);
  --hero-overlay-start: rgba(25, 18, 14, 0.85);
  --hero-overlay-mid: rgba(80, 50, 30, 0.5);
  --hero-overlay-end: rgba(25, 18, 14, 0.95);
  --nav-scrolled-bg: rgba(30, 24, 21, 0.92);
}

/* --- gold: gilded gold --- */
[data-theme="daguerreotype"][data-color="gold"] {
  --bg: #1a1610;
  --bg-2: #252018;
  --bg-3: #322b20;
  --bg-4: #453a2a;
  --text: #e8dbbe;
  --text-dim: #8a7a55;
  --text-mid: #c4af78;
  --accent: #d4a730;
  --accent-glow: rgba(212, 167, 48, 0.35);
  --white: #f5ecc8;
  --border: rgba(232, 219, 190, 0.12);
  --hero-overlay-start: rgba(22, 18, 10, 0.85);
  --hero-overlay-mid: rgba(70, 50, 20, 0.5);
  --hero-overlay-end: rgba(22, 18, 10, 0.95);
  --nav-scrolled-bg: rgba(26, 22, 16, 0.92);
}

[data-theme="daguerreotype"] body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
}

[data-theme="daguerreotype"] .hero-title {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

[data-theme="daguerreotype"] .nav-logo {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* mirrorSheen: mirror reflective sheen */
body[data-option-mirrorSheen="1"] [data-theme="daguerreotype"] .hero-bg {
  filter: brightness(1.2) contrast(1.3) saturate(0.4);
}
body[data-option-mirrorSheen="1"] [data-theme="daguerreotype"] .hero-overlay {
  background: linear-gradient(135deg, 
    transparent 0%, 
    rgba(255,255,255,0.05) 30%,
    var(--hero-overlay-mid) 50%,
    rgba(255,255,255,0.03) 70%,
    var(--hero-overlay-end) 100%);
}
body[data-option-mirrorSheen="1"] [data-theme="daguerreotype"] .hero-content::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.06) 50%, transparent 60%);
  pointer-events: none;
}

/* antiqueFrame: ornate antique frame border */
body[data-option-antiqueFrame="1"] [data-theme="daguerreotype"] .hero {
  border: 18px solid var(--bg-4);
  box-shadow: inset 0 0 0 3px var(--bg-3), 0 0 0 6px var(--bg-2), 0 0 0 9px var(--bg-4);
}
body[data-option-antiqueFrame="1"] [data-theme="daguerreotype"] .hero::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid var(--accent);
  opacity: 0.3;
  z-index: 10;
  pointer-events: none;
}

/* metallicText: metallic text shimmer */
body[data-option-metallicText="1"] [data-theme="daguerreotype"] .hero-title {
  background: linear-gradient(180deg, var(--white) 0%, var(--accent) 50%, var(--text-mid) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
body[data-option-metallicText="1"] [data-theme="daguerreotype"] .hero-tag {
  letter-spacing: 0.15em;
  color: var(--accent);
}

/* ============================================================
   THEME 3: PINHOLE — 针孔暗箱
   Camera obscura, infinite DOF, soft timeless imagery.
   ============================================================ */
[data-theme="pinhole"] {
  --font-display: 'EB Garamond', serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.5s ease;
}

/* --- obscura: dark chamber tones --- */
[data-theme="pinhole"][data-color="obscura"] {
  --bg: #0d0d0d;
  --bg-2: #161616;
  --bg-3: #1f1f1f;
  --bg-4: #2a2a2a;
  --text: #c8c0b8;
  --text-dim: #5a5550;
  --text-mid: #8a8278;
  --accent: #a08060;
  --accent-glow: rgba(160, 128, 96, 0.3);
  --white: #e8e0d8;
  --border: rgba(200, 192, 184, 0.08);
  --hero-overlay-start: rgba(13, 13, 13, 0.9);
  --hero-overlay-mid: rgba(30, 25, 20, 0.6);
  --hero-overlay-end: rgba(13, 13, 13, 0.95);
  --nav-scrolled-bg: rgba(13, 13, 13, 0.92);
}

/* --- softlight: soft diffused light --- */
[data-theme="pinhole"][data-color="softlight"] {
  --bg: #f5f2ed;
  --bg-2: #e8e2d8;
  --bg-3: #d9d0c3;
  --bg-4: #c4b8a8;
  --text: #3a3028;
  --text-dim: #a89880;
  --text-mid: #6b5a48;
  --accent: #8b7355;
  --accent-glow: rgba(139, 115, 85, 0.3);
  --white: #faf7f2;
  --border: rgba(58, 48, 40, 0.1);
  --hero-overlay-start: rgba(40, 30, 20, 0.6);
  --hero-overlay-mid: rgba(100, 80, 60, 0.4);
  --hero-overlay-end: rgba(40, 30, 20, 0.8);
  --nav-scrolled-bg: rgba(245, 242, 237, 0.92);
}

/* --- vintage: aged paper --- */
[data-theme="pinhole"][data-color="vintage"] {
  --bg: #f0e8d5;
  --bg-2: #e3d8bf;
  --bg-3: #d4c5a0;
  --bg-4: #bfae85;
  --text: #4a3820;
  --text-dim: #b09870;
  --text-mid: #7a6040;
  --accent: #8b6914;
  --accent-glow: rgba(139, 105, 20, 0.3);
  --white: #f8f0db;
  --border: rgba(74, 56, 32, 0.12);
  --hero-overlay-start: rgba(50, 35, 15, 0.65);
  --hero-overlay-mid: rgba(100, 70, 30, 0.42);
  --hero-overlay-end: rgba(50, 35, 15, 0.82);
  --nav-scrolled-bg: rgba(240, 232, 213, 0.92);
}

[data-theme="pinhole"] body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
}

[data-theme="pinhole"] .hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.04em;
}

[data-theme="pinhole"] .nav-logo {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
}

/* softVignette: heavy soft vignette */
body[data-option-softVignette="1"] [data-theme="pinhole"] .hero-overlay {
  background: radial-gradient(ellipse at center, transparent 25%, rgba(0,0,0,0.3) 55%, var(--hero-overlay-start) 80%, var(--hero-overlay-end) 100%);
}
body[data-option-softVignette="1"] [data-theme="pinhole"] .hero-bg {
  filter: brightness(0.85) contrast(0.9);
}

/* infiniteFocus: dreamy infinite focus */
body[data-option-infiniteFocus="1"] [data-theme="pinhole"] .hero-bg {
  filter: blur(0.5px) brightness(1.05) contrast(0.95);
}
body[data-option-infiniteFocus="1"] [data-theme="pinhole"] .hero-title {
  text-shadow: 0 0 40px rgba(0,0,0,0.3);
  font-weight: 300;
}

/* lightLeak: subtle light leaks */
body[data-option-lightLeak="1"] [data-theme="pinhole"] .hero-overlay {
  background: 
    radial-gradient(ellipse at 15% 20%, rgba(255,200,100,0.15) 0%, transparent 40%),
    radial-gradient(ellipse at 85% 70%, rgba(255,150,80,0.1) 0%, transparent 35%),
    radial-gradient(ellipse at center, transparent 30%, var(--hero-overlay-start) 65%, var(--hero-overlay-end) 100%);
}
body[data-option-lightLeak="1"] [data-theme="pinhole"] .hero {
  overflow: hidden;
}

/* ============================================================
   THEME 4: LOMOGRAPHY — LOMO随拍
   Vivid saturation, toy camera aesthetic, cross-processed.
   ============================================================ */
[data-theme="lomography"] {
  --font-display: 'Permanent Marker', cursive;
  --font-body: 'Inter', sans-serif;
  --transition: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- supersaturated: ultra vivid --- */
[data-theme="lomography"][data-color="supersaturated"] {
  --bg: #0a0a0a;
  --bg-2: #141414;
  --bg-3: #1e1e1e;
  --bg-4: #2a2a2a;
  --text: #00ff88;
  --text-dim: #006644;
  --text-mid: #00cc66;
  --accent: #ff3366;
  --accent-glow: rgba(255, 51, 102, 0.4);
  --white: #ccffdd;
  --border: rgba(0, 255, 136, 0.15);
  --hero-overlay-start: rgba(10, 10, 10, 0.7);
  --hero-overlay-mid: rgba(30, 0, 10, 0.5);
  --hero-overlay-end: rgba(10, 10, 10, 0.88);
  --nav-scrolled-bg: rgba(10, 10, 10, 0.92);
}

/* --- crossprocess: cross-processed film --- */
[data-theme="lomography"][data-color="crossprocess"] {
  --bg: #0c0a0e;
  --bg-2: #16131a;
  --bg-3: #221c28;
  --bg-4: #302838;
  --text: #e8d0ff;
  --text-dim: #6a5090;
  --text-mid: #b088d8;
  --accent: #ffcc00;
  --accent-glow: rgba(255, 204, 0, 0.4);
  --white: #f5e8ff;
  --border: rgba(232, 208, 255, 0.12);
  --hero-overlay-start: rgba(12, 10, 14, 0.78);
  --hero-overlay-mid: rgba(40, 10, 50, 0.5);
  --hero-overlay-end: rgba(12, 10, 14, 0.9);
  --nav-scrolled-bg: rgba(12, 10, 14, 0.92);
}

/* --- lomochrome: purple-green shift --- */
[data-theme="lomography"][data-color="lomochrome"] {
  --bg: #0a0e0a;
  --bg-2: #121a12;
  --bg-3: #1a281a;
  --bg-4: #243824;
  --text: #c8ffc8;
  --text-dim: #306030;
  --text-mid: #80c080;
  --accent: #cc44ff;
  --accent-glow: rgba(204, 68, 255, 0.4);
  --white: #d8ffd8;
  --border: rgba(200, 255, 200, 0.12);
  --hero-overlay-start: rgba(10, 14, 10, 0.78);
  --hero-overlay-mid: rgba(20, 30, 10, 0.5);
  --hero-overlay-end: rgba(10, 14, 10, 0.9);
  --nav-scrolled-bg: rgba(10, 14, 10, 0.92);
}

[data-theme="lomography"] body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
}

[data-theme="lomography"] .hero-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 9vw, 7rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transform: rotate(-1deg);
}

[data-theme="lomography"] .nav-logo {
  font-family: var(--font-display);
  font-size: 1.8rem;
}

/* heavyVignette: heavy vignette */
body[data-option-heavyVignette="1"] [data-theme="lomography"] .hero-overlay {
  background: radial-gradient(ellipse at center, transparent 15%, rgba(0,0,0,0.5) 50%, var(--hero-overlay-start) 75%, var(--hero-overlay-end) 100%);
}
body[data-option-heavyVignette="1"] [data-theme="lomography"] .hero-bg {
  filter: saturate(2.5) contrast(1.4) brightness(0.9);
}

/* lightLeaks: random light leaks */
body[data-option-lightLeaks="1"] [data-theme="lomography"] .hero-overlay {
  background: 
    radial-gradient(ellipse at 10% 15%, rgba(255,100,50,0.25) 0%, transparent 35%),
    radial-gradient(ellipse at 90% 80%, rgba(255,50,100,0.2) 0%, transparent 30%),
    radial-gradient(ellipse at 50% 40%, rgba(255,200,50,0.12) 0%, transparent 25%),
    radial-gradient(ellipse at center, transparent 20%, var(--hero-overlay-start) 60%, var(--hero-overlay-end) 100%);
}

/* colorShift: color shift effect */
body[data-option-colorShift="1"] [data-theme="lomography"] .hero-bg {
  filter: hue-rotate(35deg) saturate(2.2) contrast(1.3);
}
body[data-option-colorShift="1"] [data-theme="lomography"] .hero-title {
  text-shadow: 3px 3px 0 var(--accent), -3px -3px 0 rgba(0,255,136,0.5);
  color: var(--white);
}

/* ============================================================
   THEME 5: FISHEYE — 鱼眼星球
   180 circular view, extreme perspective distortion.
   ============================================================ */
[data-theme="fisheye"] {
  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- circular: circular frame tones --- */
[data-theme="fisheye"][data-color="circular"] {
  --bg: #0d0d14;
  --bg-2: #161625;
  --bg-3: #202038;
  --bg-4: #2c2c4a;
  --text: #d0d0e8;
  --text-dim: #505080;
  --text-mid: #9090c0;
  --accent: #44ddff;
  --accent-glow: rgba(68, 221, 255, 0.35);
  --white: #e8e8ff;
  --border: rgba(208, 208, 232, 0.12);
  --hero-overlay-start: rgba(10, 10, 20, 0.8);
  --hero-overlay-mid: rgba(20, 20, 50, 0.5);
  --hero-overlay-end: rgba(10, 10, 20, 0.92);
  --nav-scrolled-bg: rgba(13, 13, 20, 0.92);
}

/* --- deepspace: deep space --- */
[data-theme="fisheye"][data-color="deepspace"] {
  --bg: #050510;
  --bg-2: #0a0a1e;
  --bg-3: #101030;
  --bg-4: #181848;
  --text: #c0c0e0;
  --text-dim: #303068;
  --text-mid: #8080b8;
  --accent: #8844ff;
  --accent-glow: rgba(136, 68, 255, 0.35);
  --white: #d8d8f8;
  --border: rgba(192, 192, 224, 0.1);
  --hero-overlay-start: rgba(5, 5, 16, 0.85);
  --hero-overlay-mid: rgba(15, 10, 30, 0.5);
  --hero-overlay-end: rgba(5, 5, 16, 0.95);
  --nav-scrolled-bg: rgba(5, 5, 16, 0.92);
}

/* --- urban: urban distortion --- */
[data-theme="fisheye"][data-color="urban"] {
  --bg: #0f0f0f;
  --bg-2: #1c1c1c;
  --bg-3: #2a2a2a;
  --bg-4: #3a3a3a;
  --text: #e0e0e0;
  --text-dim: #555555;
  --text-mid: #999999;
  --accent: #ff6644;
  --accent-glow: rgba(255, 102, 68, 0.35);
  --white: #f5f5f5;
  --border: rgba(224, 224, 224, 0.1);
  --hero-overlay-start: rgba(15, 15, 15, 0.8);
  --hero-overlay-mid: rgba(40, 20, 10, 0.5);
  --hero-overlay-end: rgba(15, 15, 15, 0.92);
  --nav-scrolled-bg: rgba(15, 15, 15, 0.92);
}

[data-theme="fisheye"] body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
}

[data-theme="fisheye"] .hero-title {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

[data-theme="fisheye"] .nav-logo {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* circularFrame: circular crop frame */
body[data-option-circularFrame="1"] [data-theme="fisheye"] .hero {
  border-radius: 0;
}
body[data-option-circularFrame="1"] [data-theme="fisheye"] .hero-bg {
  clip-path: circle(42% at center);
  filter: contrast(1.2) saturate(1.3);
}
body[data-option-circularFrame="1"] [data-theme="fisheye"] .hero-overlay {
  background: radial-gradient(circle at center, transparent 30%, var(--hero-overlay-start) 65%, var(--hero-overlay-end) 100%);
}

/* extremeDistort: extreme perspective */
body[data-option-extremeDistort="1"] [data-theme="fisheye"] .hero-bg {
  filter: contrast(1.5) saturate(1.5) brightness(1.1);
  transform: scale(1.3);
  border-radius: 50%;
}
body[data-option-extremeDistort="1"] [data-theme="fisheye"] .hero {
  overflow: hidden;
}

/* fisheyeGlow: fisheye edge glow */
body[data-option-fisheyeGlow="1"] [data-theme="fisheye"] .hero-overlay {
  background: radial-gradient(circle at center, transparent 25%, var(--accent-glow) 55%, rgba(0,0,0,0.6) 75%, var(--hero-overlay-end) 100%);
}
body[data-option-fisheyeGlow="1"] [data-theme="fisheye"] .hero-title {
  text-shadow: 0 0 30px var(--accent-glow), 0 0 60px var(--accent-glow);
}

/* ============================================================
   THEME 6: TRI-X — Tri-X纪实
   Grainy black & white documentary. Pushed, box speed, pulled.
   ============================================================ */
[data-theme="tri-x"] {
  --font-display: 'Space Mono', monospace;
  --font-body: 'Inter', sans-serif;
  --transition: 0.3s ease;
}

/* --- pushed: pushed 2 stops - high contrast --- */
[data-theme="tri-x"][data-color="pushed"] {
  --bg: #0a0a0a;
  --bg-2: #111111;
  --bg-3: #1a1a1a;
  --bg-4: #252525;
  --text: #f0f0f0;
  --text-dim: #444444;
  --text-mid: #999999;
  --accent: #ffffff;
  --accent-glow: rgba(255, 255, 255, 0.3);
  --white: #ffffff;
  --border: rgba(240, 240, 240, 0.1);
  --hero-overlay-start: rgba(10, 10, 10, 0.85);
  --hero-overlay-mid: rgba(30, 30, 30, 0.55);
  --hero-overlay-end: rgba(10, 10, 10, 0.95);
  --nav-scrolled-bg: rgba(10, 10, 10, 0.92);
}

/* --- boxspeed: box speed - balanced --- */
[data-theme="tri-x"][data-color="boxspeed"] {
  --bg: #1a1a1a;
  --bg-2: #222222;
  --bg-3: #2c2c2c;
  --bg-4: #383838;
  --text: #d8d8d8;
  --text-dim: #555555;
  --text-mid: #999999;
  --accent: #e0e0e0;
  --accent-glow: rgba(224, 224, 224, 0.3);
  --white: #f0f0f0;
  --border: rgba(216, 216, 216, 0.1);
  --hero-overlay-start: rgba(20, 20, 20, 0.8);
  --hero-overlay-mid: rgba(40, 40, 40, 0.5);
  --hero-overlay-end: rgba(20, 20, 20, 0.92);
  --nav-scrolled-bg: rgba(26, 26, 26, 0.92);
}

/* --- pulled: pulled 1 stop - soft --- */
[data-theme="tri-x"][data-color="pulled"] {
  --bg: #2a2a2a;
  --bg-2: #333333;
  --bg-3: #3d3d3d;
  --bg-4: #4a4a4a;
  --text: #c8c8c8;
  --text-dim: #666666;
  --text-mid: #999999;
  --accent: #cccccc;
  --accent-glow: rgba(204, 204, 204, 0.3);
  --white: #e0e0e0;
  --border: rgba(200, 200, 200, 0.1);
  --hero-overlay-start: rgba(30, 30, 30, 0.75);
  --hero-overlay-mid: rgba(50, 50, 50, 0.48);
  --hero-overlay-end: rgba(30, 30, 30, 0.88);
  --nav-scrolled-bg: rgba(42, 42, 42, 0.92);
}

[data-theme="tri-x"] body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
}

[data-theme="tri-x"] .hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

[data-theme="tri-x"] .nav-logo {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
}

/* heavyGrain: heavy film grain */
body[data-option-heavyGrain="1"] [data-theme="tri-x"] .hero-bg {
  filter: grayscale(1) contrast(1.5) brightness(0.9);
}
body[data-option-heavyGrain="1"] [data-theme="tri-x"] .hero-overlay {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.15'/%3E%3C/svg%3E");
  background-size: 128px 128px;
}

/* highContrast: extreme contrast */
body[data-option-highContrast="1"] [data-theme="tri-x"] .hero-bg {
  filter: grayscale(1) contrast(2.5) brightness(0.8);
}
body[data-option-highContrast="1"] [data-theme="tri-x"] .hero-title {
  font-weight: 700;
  letter-spacing: -0.04em;
}

/* streetGrid: street photography grid */
body[data-option-streetGrid="1"] [data-theme="tri-x"] .hero-overlay {
  background-image: 
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 33.33% 33.33%;
  background-position: center;
}

/* ============================================================
   THEME 7: PORTRA — 人像暖调
   Kodak Portra warm skin tones. Creamy, natural, soft.
   ============================================================ */
[data-theme="portra"] {
  --font-display: 'Cormorant Infant', serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- portra400: natural warm --- */
[data-theme="portra"][data-color="portra400"] {
  --bg: #faf5f0;
  --bg-2: #f0e6d8;
  --bg-3: #e5d5bf;
  --bg-4: #d4bfa0;
  --text: #3a2a1a;
  --text-dim: #b8987a;
  --text-mid: #6b4a30;
  --accent: #d4855e;
  --accent-glow: rgba(212, 133, 94, 0.35);
  --white: #fefaf5;
  --border: rgba(58, 42, 26, 0.1);
  --hero-overlay-start: rgba(40, 25, 15, 0.55);
  --hero-overlay-mid: rgba(100, 60, 35, 0.38);
  --hero-overlay-end: rgba(40, 25, 15, 0.75);
  --nav-scrolled-bg: rgba(250, 245, 240, 0.92);
}

/* --- portra800: rich warm --- */
[data-theme="portra"][data-color="portra800"] {
  --bg: #f5ebe0;
  --bg-2: #e8d5c0;
  --bg-3: #d8bfa0;
  --bg-4: #c4a078;
  --text: #3a2010;
  --text-dim: #b08058;
  --text-mid: #6b3a20;
  --accent: #c4683a;
  --accent-glow: rgba(196, 104, 58, 0.35);
  --white: #fef5ea;
  --border: rgba(58, 32, 16, 0.12);
  --hero-overlay-start: rgba(45, 20, 10, 0.6);
  --hero-overlay-mid: rgba(100, 50, 25, 0.4);
  --hero-overlay-end: rgba(45, 20, 10, 0.8);
  --nav-scrolled-bg: rgba(245, 235, 224, 0.92);
}

/* --- portra160: soft pastel --- */
[data-theme="portra"][data-color="portra160"] {
  --bg: #f8f4f0;
  --bg-2: #ede3d8;
  --bg-3: #e0d0bf;
  --bg-4: #ccb8a0;
  --text: #3a3028;
  --text-dim: #b8a088;
  --text-mid: #6b5840;
  --accent: #c8a080;
  --accent-glow: rgba(200, 160, 128, 0.35);
  --white: #fcfaf6;
  --border: rgba(58, 48, 40, 0.1);
  --hero-overlay-start: rgba(40, 30, 20, 0.5);
  --hero-overlay-mid: rgba(90, 65, 45, 0.35);
  --hero-overlay-end: rgba(40, 30, 20, 0.7);
  --nav-scrolled-bg: rgba(248, 244, 240, 0.92);
}

[data-theme="portra"] body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
}

[data-theme="portra"] .hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.03em;
}

[data-theme="portra"] .nav-logo {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
}

/* creamyBokeh: creamy bokeh circles */
body[data-option-creamyBokeh="1"] [data-theme="portra"] .hero-overlay {
  background: 
    radial-gradient(circle at 25% 30%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 10%, transparent 15%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 12%, transparent 18%),
    radial-gradient(circle at 40% 75%, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.01) 8%, transparent 14%),
    linear-gradient(160deg, var(--hero-overlay-start) 0%, var(--hero-overlay-mid) 50%, var(--hero-overlay-end) 100%);
}
body[data-option-creamyBokeh="1"] [data-theme="portra"] .hero-bg {
  filter: blur(1px) brightness(1.1) saturate(1.05);
}

/* skinWarmth: warm skin tone glow */
body[data-option-skinWarmth="1"] [data-theme="portra"] .hero-overlay {
  background: linear-gradient(140deg, 
    rgba(255,180,140,0.15) 0%, 
    var(--hero-overlay-mid) 40%, 
    rgba(255,160,120,0.1) 60%, 
    var(--hero-overlay-end) 100%);
}
body[data-option-skinWarmth="1"] [data-theme="portra"] .hero-bg {
  filter: saturate(1.2) brightness(1.05);
}

/* softFocus: soft focus effect */
body[data-option-softFocus="1"] [data-theme="portra"] .hero-bg {
  filter: blur(3px) brightness(1.15) contrast(0.9);
}
body[data-option-softFocus="1"] [data-theme="portra"] .hero-title {
  text-shadow: 0 0 20px rgba(0,0,0,0.15);
  font-weight: 200;
}/* ============================================================
   THEME 8: VELVIA — 风光浓郁
   Fuji Velvia hyper-saturated landscapes. Greens, blues, golds.
   ============================================================ */
[data-theme="velvia"] {
  --font-display: 'Noto Serif SC', serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- velvia50: classic saturated --- */
[data-theme="velvia"][data-color="velvia50"] {
  --bg: #0a0a0a;
  --bg-2: #121212;
  --bg-3: #1a1a1a;
  --bg-4: #252525;
  --text: #e0e8d0;
  --text-dim: #406040;
  --text-mid: #80a060;
  --accent: #44cc44;
  --accent-glow: rgba(68, 204, 68, 0.35);
  --white: #f0f8e0;
  --border: rgba(224, 232, 208, 0.12);
  --hero-overlay-start: rgba(10, 10, 10, 0.75);
  --hero-overlay-mid: rgba(20, 30, 10, 0.5);
  --hero-overlay-end: rgba(10, 10, 10, 0.88);
  --nav-scrolled-bg: rgba(10, 10, 10, 0.92);
}

/* --- velvia100: vivid punch --- */
[data-theme="velvia"][data-color="velvia100"] {
  --bg: #080a08;
  --bg-2: #101410;
  --bg-3: #182018;
  --bg-4: #223022;
  --text: #d0ffd0;
  --text-dim: #206020;
  --text-mid: #60c060;
  --accent: #ffcc00;
  --accent-glow: rgba(255, 204, 0, 0.4);
  --white: #e0ffe0;
  --border: rgba(208, 255, 208, 0.12);
  --hero-overlay-start: rgba(8, 10, 8, 0.75);
  --hero-overlay-mid: rgba(15, 25, 8, 0.5);
  --hero-overlay-end: rgba(8, 10, 8, 0.88);
  --nav-scrolled-bg: rgba(8, 10, 8, 0.92);
}

/* --- velviaForte: extreme saturation --- */
[data-theme="velvia"][data-color="velviaForte"] {
  --bg: #050505;
  --bg-2: #0d0d0d;
  --bg-3: #151515;
  --bg-4: #202020;
  --text: #ffd0d0;
  --text-dim: #602020;
  --text-mid: #c06060;
  --accent: #ff4444;
  --accent-glow: rgba(255, 68, 68, 0.4);
  --white: #ffe0e0;
  --border: rgba(255, 208, 208, 0.12);
  --hero-overlay-start: rgba(5, 5, 5, 0.8);
  --hero-overlay-mid: rgba(20, 5, 5, 0.5);
  --hero-overlay-end: rgba(5, 5, 5, 0.9);
  --nav-scrolled-bg: rgba(5, 5, 5, 0.92);
}

[data-theme="velvia"] body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
}

[data-theme="velvia"] .hero-title {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.08em;
}

[data-theme="velvia"] .nav-logo {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* saturatedGreens: hyper green saturation */
body[data-option-saturatedGreens="1"] [data-theme="velvia"] .hero-bg {
  filter: saturate(3) contrast(1.3) brightness(1.1) hue-rotate(-10deg);
}
body[data-option-saturatedGreens="1"] [data-theme="velvia"] .hero-overlay {
  background: linear-gradient(160deg, 
    rgba(0,40,0,0.3) 0%, 
    var(--hero-overlay-mid) 50%, 
    rgba(0,20,0,0.4) 100%);
}

/* vividSky: deep blue sky */
body[data-option-vividSky="1"] [data-theme="velvia"] .hero-bg {
  filter: saturate(2.5) contrast(1.4) brightness(0.95) hue-rotate(5deg);
}
body[data-option-vividSky="1"] [data-theme="velvia"] .hero-overlay {
  background: linear-gradient(180deg, 
    rgba(0,0,60,0.5) 0%, 
    transparent 40%,
    var(--hero-overlay-mid) 70%,
    var(--hero-overlay-end) 100%);
}

/* landscapeGlow: landscape golden glow */
body[data-option-landscapeGlow="1"] [data-theme="velvia"] .hero-overlay {
  background: linear-gradient(150deg,
    rgba(255,150,30,0.2) 0%,
    var(--hero-overlay-mid) 40%,
    rgba(255,180,40,0.15) 60%,
    var(--hero-overlay-end) 100%);
}
body[data-option-landscapeGlow="1"] [data-theme="velvia"] .hero-bg {
  filter: saturate(2.2) contrast(1.2) brightness(1.08);
}

/* ============================================================
   THEME 9: EKTACHROME — 反转冷调
   Kodak Ektachrome slide. Cool, balanced, pristine.
   ============================================================ */
[data-theme="ektachrome"] {
  --font-display: 'Jost', sans-serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- e100: cool balanced --- */
[data-theme="ektachrome"][data-color="e100"] {
  --bg: #f0f4f8;
  --bg-2: #e0e8f0;
  --bg-3: #ccd8e4;
  --bg-4: #b0c0d4;
  --text: #1a2838;
  --text-dim: #8090a8;
  --text-mid: #405068;
  --accent: #4488cc;
  --accent-glow: rgba(68, 136, 204, 0.35);
  --white: #f8fafc;
  --border: rgba(26, 40, 56, 0.1);
  --hero-overlay-start: rgba(20, 30, 40, 0.6);
  --hero-overlay-mid: rgba(40, 60, 90, 0.4);
  --hero-overlay-end: rgba(20, 30, 40, 0.8);
  --nav-scrolled-bg: rgba(240, 244, 248, 0.92);
}

/* --- e100vs: vivid saturated --- */
[data-theme="ektachrome"][data-color="e100vs"] {
  --bg: #0a1018;
  --bg-2: #121a28;
  --bg-3: #1a2538;
  --bg-4: #243248;
  --text: #c8d8f0;
  --text-dim: #304868;
  --text-mid: #7090c0;
  --accent: #44aaff;
  --accent-glow: rgba(68, 170, 255, 0.4);
  --white: #e0ecf8;
  --border: rgba(200, 216, 240, 0.12);
  --hero-overlay-start: rgba(10, 16, 24, 0.8);
  --hero-overlay-mid: rgba(20, 30, 50, 0.5);
  --hero-overlay-end: rgba(10, 16, 24, 0.92);
  --nav-scrolled-bg: rgba(10, 16, 24, 0.92);
}

/* --- e100g: neutral --- */
[data-theme="ektachrome"][data-color="e100g"] {
  --bg: #f5f5f5;
  --bg-2: #e8e8e8;
  --bg-3: #d8d8d8;
  --bg-4: #c0c0c0;
  --text: #2a2a2a;
  --text-dim: #888888;
  --text-mid: #555555;
  --accent: #6688aa;
  --accent-glow: rgba(102, 136, 170, 0.35);
  --white: #fafafa;
  --border: rgba(42, 42, 42, 0.1);
  --hero-overlay-start: rgba(30, 30, 30, 0.6);
  --hero-overlay-mid: rgba(50, 50, 55, 0.4);
  --hero-overlay-end: rgba(30, 30, 30, 0.8);
  --nav-scrolled-bg: rgba(245, 245, 245, 0.92);
}

[data-theme="ektachrome"] body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
}

[data-theme="ektachrome"] .hero-title {
  font-family: var(--font-display);
  font-weight: 200;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

[data-theme="ektachrome"] .nav-logo {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* coolBlues: enhanced cool blues */
body[data-option-coolBlues="1"] [data-theme="ektachrome"] .hero-bg {
  filter: saturate(1.5) contrast(1.1) hue-rotate(-15deg) brightness(1.05);
}
body[data-option-coolBlues="1"] [data-theme="ektachrome"] .hero-overlay {
  background: linear-gradient(160deg,
    rgba(0,40,80,0.2) 0%,
    var(--hero-overlay-mid) 50%,
    rgba(0,30,60,0.3) 100%);
}

/* slideBorder: slide mount border */
body[data-option-slideBorder="1"] [data-theme="ektachrome"] .hero {
  border: 20px solid var(--bg-4);
  box-shadow: inset 0 0 0 2px var(--bg-3);
}
body[data-option-slideBorder="1"] [data-theme="ektachrome"] .hero::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(0,0,0,0.15);
  z-index: 10;
  pointer-events: none;
}

/* transparency: transparency feel */
body[data-option-transparency="1"] [data-theme="ektachrome"] .hero-bg {
  filter: brightness(1.2) contrast(1.05) saturate(1.3);
}
body[data-option-transparency="1"] [data-theme="ektachrome"] .hero-overlay {
  background: linear-gradient(160deg, 
    transparent 20%, 
    rgba(255,255,255,0.05) 40%,
    var(--hero-overlay-mid) 60%,
    var(--hero-overlay-end) 100%);
}
body[data-option-transparency="1"] [data-theme="ektachrome"] .hero-title {
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ============================================================
   THEME 10: CHRONOPHOTO — 时序分解
   Muybridge motion study. Sequential frames, scientific grid.
   ============================================================ */
[data-theme="chronophoto"] {
  --font-display: 'Courier Prime', monospace;
  --font-body: 'Inter', sans-serif;
  --transition: 0.3s ease;
}

/* --- sequence: sequential frame tones --- */
[data-theme="chronophoto"][data-color="sequence"] {
  --bg: #f5f0e8;
  --bg-2: #e8e0d4;
  --bg-3: #d8cfbf;
  --bg-4: #c0b5a0;
  --text: #2a2018;
  --text-dim: #a09080;
  --text-mid: #5a4a38;
  --accent: #8b6914;
  --accent-glow: rgba(139, 105, 20, 0.3);
  --white: #faf5ec;
  --border: rgba(42, 32, 24, 0.1);
  --hero-overlay-start: rgba(30, 20, 12, 0.65);
  --hero-overlay-mid: rgba(70, 50, 30, 0.42);
  --hero-overlay-end: rgba(30, 20, 12, 0.82);
  --nav-scrolled-bg: rgba(245, 240, 232, 0.92);
}

/* --- motion: dynamic motion --- */
[data-theme="chronophoto"][data-color="motion"] {
  --bg: #0d0d0d;
  --bg-2: #181818;
  --bg-3: #242424;
  --bg-4: #323232;
  --text: #e0e0e0;
  --text-dim: #505050;
  --text-mid: #999999;
  --accent: #ff6600;
  --accent-glow: rgba(255, 102, 0, 0.35);
  --white: #f5f5f5;
  --border: rgba(224, 224, 224, 0.1);
  --hero-overlay-start: rgba(13, 13, 13, 0.8);
  --hero-overlay-mid: rgba(30, 15, 5, 0.5);
  --hero-overlay-end: rgba(13, 13, 13, 0.92);
  --nav-scrolled-bg: rgba(13, 13, 13, 0.92);
}

/* --- grid: scientific grid --- */
[data-theme="chronophoto"][data-color="grid"] {
  --bg: #f0f0f0;
  --bg-2: #e0e0e0;
  --bg-3: #cccccc;
  --bg-4: #b3b3b3;
  --text: #1a1a1a;
  --text-dim: #808080;
  --text-mid: #4a4a4a;
  --accent: #3366cc;
  --accent-glow: rgba(51, 102, 204, 0.3);
  --white: #fafafa;
  --border: rgba(26, 26, 26, 0.1);
  --hero-overlay-start: rgba(20, 20, 20, 0.65);
  --hero-overlay-mid: rgba(40, 40, 50, 0.42);
  --hero-overlay-end: rgba(20, 20, 20, 0.82);
  --nav-scrolled-bg: rgba(240, 240, 240, 0.92);
}

[data-theme="chronophoto"] body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
}

[data-theme="chronophoto"] .hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

[data-theme="chronophoto"] .nav-logo {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* frameSequence: sequential frame borders */
body[data-option-frameSequence="1"] [data-theme="chronophoto"] .hero-overlay {
  background-image: 
    repeating-linear-gradient(90deg, 
      var(--border) 0px, 
      var(--border) 1px, 
      transparent 1px, 
      transparent calc(100%/6 - 1px),
      var(--border) calc(100%/6 - 1px),
      var(--border) calc(100%/6));
}
body[data-option-frameSequence="1"] [data-theme="chronophoto"] .hero-content {
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

/* motionStudy: motion study grid */
body[data-option-motionStudy="1"] [data-theme="chronophoto"] .hero-overlay {
  background-image: 
    linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
  background-size: 20% 100%;
}
body[data-option-motionStudy="1"] [data-theme="chronophoto"] .hero-bg {
  filter: grayscale(1) contrast(1.2);
}

/* chronoLines: timeline markers */
body[data-option-chronoLines="1"] [data-theme="chronophoto"] .hero-overlay {
  background-image: 
    linear-gradient(90deg, 
      transparent calc(16.66% - 1px),
      var(--accent) calc(16.66% - 1px),
      var(--accent) calc(16.66% + 1px),
      transparent calc(16.66% + 1px),
      transparent calc(33.33% - 1px),
      var(--accent) calc(33.33% - 1px),
      var(--accent) calc(33.33% + 1px),
      transparent calc(33.33% + 1px),
      transparent calc(50% - 1px),
      var(--accent) calc(50% - 1px),
      var(--accent) calc(50% + 1px),
      transparent calc(50% + 1px),
      transparent calc(66.66% - 1px),
      var(--accent) calc(66.66% - 1px),
      var(--accent) calc(66.66% + 1px),
      transparent calc(66.66% + 1px),
      transparent calc(83.33% - 1px),
      var(--accent) calc(83.33% - 1px),
      var(--accent) calc(83.33% + 1px),
      transparent calc(83.33% + 1px));
}

/* ============================================================
   THEME 11: AERIAL — 航拍几何
   Drone top-down view. Shadows, geometric patterns.
   ============================================================ */
[data-theme="aerial"] {
  --font-display: 'Raleway', sans-serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- topdown: top-down shadow --- */
[data-theme="aerial"][data-color="topdown"] {
  --bg: #f0f4f0;
  --bg-2: #dce8dc;
  --bg-3: #c4d8c4;
  --bg-4: #a4c0a4;
  --text: #1a281a;
  --text-dim: #608060;
  --text-mid: #3a503a;
  --accent: #448844;
  --accent-glow: rgba(68, 136, 68, 0.35);
  --white: #f8faf8;
  --border: rgba(26, 40, 26, 0.1);
  --hero-overlay-start: rgba(20, 30, 20, 0.5);
  --hero-overlay-mid: rgba(40, 60, 40, 0.35);
  --hero-overlay-end: rgba(20, 30, 20, 0.7);
  --nav-scrolled-bg: rgba(240, 244, 240, 0.92);
}

/* --- geometric: geometric contrast --- */
[data-theme="aerial"][data-color="geometric"] {
  --bg: #0f0f14;
  --bg-2: #181825;
  --bg-3: #222238;
  --bg-4: #2e2e4a;
  --text: #d0d0e8;
  --text-dim: #404068;
  --text-mid: #8888b8;
  --accent: #ffcc44;
  --accent-glow: rgba(255, 204, 68, 0.35);
  --white: #e8e8f8;
  --border: rgba(208, 208, 232, 0.12);
  --hero-overlay-start: rgba(12, 12, 20, 0.8);
  --hero-overlay-mid: rgba(20, 20, 40, 0.5);
  --hero-overlay-end: rgba(12, 12, 20, 0.92);
  --nav-scrolled-bg: rgba(15, 15, 20, 0.92);
}

/* --- altitude: high altitude --- */
[data-theme="aerial"][data-color="altitude"] {
  --bg: #e8f0f8;
  --bg-2: #d4e4f0;
  --bg-3: #bcd4e8;
  --bg-4: #9cc0d8;
  --text: #1a2838;
  --text-dim: #6080a0;
  --text-mid: #3a5068;
  --accent: #4488cc;
  --accent-glow: rgba(68, 136, 204, 0.35);
  --white: #f4f8fc;
  --border: rgba(26, 40, 56, 0.1);
  --hero-overlay-start: rgba(20, 30, 45, 0.5);
  --hero-overlay-mid: rgba(40, 60, 90, 0.35);
  --hero-overlay-end: rgba(20, 30, 45, 0.7);
  --nav-scrolled-bg: rgba(232, 240, 248, 0.92);
}

[data-theme="aerial"] body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
}

[data-theme="aerial"] .hero-title {
  font-family: var(--font-display);
  font-weight: 100;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

[data-theme="aerial"] .nav-logo {
  font-family: var(--font-display);
  font-weight: 200;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* shadowPlay: shadow pattern effect */
body[data-option-shadowPlay="1"] [data-theme="aerial"] .hero-overlay {
  background: 
    repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,0.03) 10px, rgba(0,0,0,0.03) 11px),
    linear-gradient(160deg, var(--hero-overlay-start) 0%, var(--hero-overlay-mid) 50%, var(--hero-overlay-end) 100%);
}
body[data-option-shadowPlay="1"] [data-theme="aerial"] .hero-bg {
  filter: contrast(1.3) brightness(0.95);
}

/* mapGrid: cartographic grid */
body[data-option-mapGrid="1"] [data-theme="aerial"] .hero-overlay {
  background-image: 
    linear-gradient(rgba(0,0,0,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.08) 1px, transparent 1px);
  background-size: 40px 40px;
}
body[data-option-mapGrid="1"] [data-theme="aerial"] .hero-bg {
  filter: saturate(0.6) contrast(1.1);
}

/* altitudeScale: scale indicator */
body[data-option-altitudeScale="1"] [data-theme="aerial"] .hero::before {
  content: '';
  position: absolute;
  bottom: 30px;
  left: 30px;
  width: 100px;
  height: 2px;
  background: var(--accent);
  z-index: 5;
}
body[data-option-altitudeScale="1"] [data-theme="aerial"] .hero::after {
  content: '100m';
  position: absolute;
  bottom: 22px;
  left: 30px;
  font-family: var(--font-display);
  font-size: 0.65rem;
  color: var(--accent);
  letter-spacing: 0.1em;
  z-index: 5;
}

/* ============================================================
   THEME 12: UNDERWATER — 水下迷境
   Underwater caustics, blue depths, floating particles.
   ============================================================ */
[data-theme="underwater"] {
  --font-display: 'Quicksand', sans-serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- shallow: turquoise shallow --- */
[data-theme="underwater"][data-color="shallow"] {
  --bg: #e0f4f0;
  --bg-2: #c8ece4;
  --bg-3: #a8e0d4;
  --bg-4: #80d0c0;
  --text: #0a2828;
  --text-dim: #408080;
  --text-mid: #1a5050;
  --accent: #00ccaa;
  --accent-glow: rgba(0, 204, 170, 0.35);
  --white: #f0faf8;
  --border: rgba(10, 40, 40, 0.1);
  --hero-overlay-start: rgba(0, 30, 30, 0.45);
  --hero-overlay-mid: rgba(0, 60, 50, 0.3);
  --hero-overlay-end: rgba(0, 30, 30, 0.65);
  --nav-scrolled-bg: rgba(224, 244, 240, 0.92);
}

/* --- deep: deep blue abyss --- */
[data-theme="underwater"][data-color="deep"] {
  --bg: #020810;
  --bg-2: #041020;
  --bg-3: #081830;
  --bg-4: #0c2040;
  --text: #a0d0e8;
  --text-dim: #104060;
  --text-mid: #4080b0;
  --accent: #00aaff;
  --accent-glow: rgba(0, 170, 255, 0.4);
  --white: #c8e8f8;
  --border: rgba(160, 208, 232, 0.1);
  --hero-overlay-start: rgba(2, 8, 16, 0.85);
  --hero-overlay-mid: rgba(0, 15, 30, 0.55);
  --hero-overlay-end: rgba(2, 8, 16, 0.95);
  --nav-scrolled-bg: rgba(2, 8, 16, 0.92);
}

/* --- reef: coral reef colors --- */
[data-theme="underwater"][data-color="reef"] {
  --bg: #0a1418;
  --bg-2: #0e1e28;
  --bg-3: #142a38;
  --bg-4: #1a3848;
  --text: #c8e8f0;
  --text-dim: #205060;
  --text-mid: #60a0b8;
  --accent: #ff6688;
  --accent-glow: rgba(255, 102, 136, 0.4);
  --white: #e0f0f8;
  --border: rgba(200, 232, 240, 0.1);
  --hero-overlay-start: rgba(8, 16, 20, 0.8);
  --hero-overlay-mid: rgba(10, 25, 35, 0.5);
  --hero-overlay-end: rgba(8, 16, 20, 0.92);
  --nav-scrolled-bg: rgba(10, 20, 24, 0.92);
}

[data-theme="underwater"] body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
}

[data-theme="underwater"] .hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: 0.08em;
}

[data-theme="underwater"] .nav-logo {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* causticLight: caustic light rays */
body[data-option-causticLight="1"] [data-theme="underwater"] .hero-overlay {
  background: 
    repeating-conic-gradient(rgba(255,255,255,0.04) 0% 2%, transparent 2% 8%) 0 0 / 120px 120px,
    linear-gradient(160deg, var(--hero-overlay-start) 0%, var(--hero-overlay-mid) 50%, var(--hero-overlay-end) 100%);
}
body[data-option-causticLight="1"] [data-theme="underwater"] .hero-bg {
  filter: brightness(1.1) saturate(1.3) contrast(1.1);
}

/* blueShift: blue color shift */
body[data-option-blueShift="1"] [data-theme="underwater"] .hero-bg {
  filter: hue-rotate(170deg) saturate(1.5) brightness(0.9);
}
body[data-option-blueShift="1"] [data-theme="underwater"] .hero-overlay {
  background: linear-gradient(160deg, 
    rgba(0,50,100,0.3) 0%, 
    rgba(0,30,80,0.2) 50%, 
    var(--hero-overlay-end) 100%);
}

/* floatingParticles: floating particles */
body[data-option-floatingParticles="1"] [data-theme="underwater"] .hero-overlay {
  background: 
    radial-gradient(circle at 15% 25%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 3%, transparent 5%),
    radial-gradient(circle at 35% 55%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 2%, transparent 4%),
    radial-gradient(circle at 65% 35%, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.01) 4%, transparent 6%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 2%, transparent 4%),
    radial-gradient(circle at 50% 80%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 3%, transparent 5%),
    linear-gradient(160deg, var(--hero-overlay-start) 0%, var(--hero-overlay-mid) 50%, var(--hero-overlay-end) 100%);
}

/* ============================================================
   THEME 13: ASTROPHOTO — 深空星云
   Hubble deep space. Nebula, cosmic dust, star fields.
   ============================================================ */
[data-theme="astrophoto"] {
  --font-display: 'Crimson Text', serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- nebula: nebula purple-pink --- */
[data-theme="astrophoto"][data-color="nebula"] {
  --bg: #0a0610;
  --bg-2: #120c1a;
  --bg-3: #1c1228;
  --bg-4: #281a38;
  --text: #d8c8f0;
  --text-dim: #483068;
  --text-mid: #9878c0;
  --accent: #cc44ff;
  --accent-glow: rgba(204, 68, 255, 0.4);
  --white: #e8d8f8;
  --border: rgba(216, 200, 240, 0.1);
  --hero-overlay-start: rgba(8, 4, 14, 0.85);
  --hero-overlay-mid: rgba(20, 8, 30, 0.55);
  --hero-overlay-end: rgba(8, 4, 14, 0.95);
  --nav-scrolled-bg: rgba(10, 6, 16, 0.92);
}

/* --- hubble: Hubble palette --- */
[data-theme="astrophoto"][data-color="hubble"] {
  --bg: #050810;
  --bg-2: #0a1020;
  --bg-3: #101830;
  --bg-4: #182240;
  --text: #c0d8f0;
  --text-dim: #183060;
  --text-mid: #6090c0;
  --accent: #44aaff;
  --accent-glow: rgba(68, 170, 255, 0.4);
  --white: #d8e8f8;
  --border: rgba(192, 216, 240, 0.1);
  --hero-overlay-start: rgba(4, 6, 14, 0.85);
  --hero-overlay-mid: rgba(8, 15, 30, 0.55);
  --hero-overlay-end: rgba(4, 6, 14, 0.95);
  --nav-scrolled-bg: rgba(5, 8, 16, 0.92);
}

/* --- deepfield: ultra deep field --- */
[data-theme="astrophoto"][data-color="deepfield"] {
  --bg: #020202;
  --bg-2: #080808;
  --bg-3: #101010;
  --bg-4: #1a1a1a;
  --text: #c0c0c0;
  --text-dim: #303030;
  --text-mid: #707070;
  --accent: #ff9900;
  --accent-glow: rgba(255, 153, 0, 0.35);
  --white: #e0e0e0;
  --border: rgba(192, 192, 192, 0.08);
  --hero-overlay-start: rgba(2, 2, 2, 0.9);
  --hero-overlay-mid: rgba(10, 10, 10, 0.6);
  --hero-overlay-end: rgba(2, 2, 2, 0.97);
  --nav-scrolled-bg: rgba(2, 2, 2, 0.92);
}

[data-theme="astrophoto"] body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
}

[data-theme="astrophoto"] .hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.06em;
}

[data-theme="astrophoto"] .nav-logo {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.08em;
}

/* starField: star field background */
body[data-option-starField="1"] [data-theme="astrophoto"] .hero-overlay {
  background: 
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 25% 15%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 40% 30%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1.5px 1.5px at 55% 10%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 70% 25%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 85% 18%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 15% 40%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 30% 50%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 50% 45%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 65% 55%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 80% 40%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 90% 55%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 20% 70%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 45% 75%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 60% 80%, rgba(255,255,255,0.6), transparent),
    linear-gradient(160deg, var(--hero-overlay-start) 0%, var(--hero-overlay-mid) 50%, var(--hero-overlay-end) 100%);
}

/* nebulaGlow: nebula glow effect */
body[data-option-nebulaGlow="1"] [data-theme="astrophoto"] .hero-overlay {
  background: 
    radial-gradient(ellipse at 30% 40%, rgba(200,50,255,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(50,100,255,0.12) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 50%, rgba(255,100,50,0.08) 0%, transparent 40%),
    linear-gradient(160deg, var(--hero-overlay-start) 0%, var(--hero-overlay-mid) 50%, var(--hero-overlay-end) 100%);
}
body[data-option-nebulaGlow="1"] [data-theme="astrophoto"] .hero-title {
  text-shadow: 0 0 40px var(--accent-glow), 0 0 80px var(--accent-glow);
}

/* cosmicDust: cosmic dust particles */
body[data-option-cosmicDust="1"] [data-theme="astrophoto"] .hero-overlay {
  background: 
    radial-gradient(ellipse at 20% 30%, rgba(255,255,255,0.04) 0%, transparent 40%),
    radial-gradient(ellipse at 60% 50%, rgba(255,255,255,0.03) 0%, transparent 35%),
    radial-gradient(ellipse at 80% 25%, rgba(255,255,255,0.05) 0%, transparent 30%),
    radial-gradient(ellipse at 40% 70%, rgba(255,255,255,0.03) 0%, transparent 38%),
    linear-gradient(160deg, var(--hero-overlay-start) 0%, var(--hero-overlay-mid) 50%, var(--hero-overlay-end) 100%);
}

/* ============================================================
   THEME 14: STREET — 街头直击
   Decisive moment raw. High contrast, urban grit.
   ============================================================ */
[data-theme="street"] {
  --font-display: 'IBM Plex Mono', monospace;
  --font-body: 'Inter', sans-serif;
  --transition: 0.25s ease;
}

/* --- raw: raw contrast --- */
[data-theme="street"][data-color="raw"] {
  --bg: #0a0a0a;
  --bg-2: #111111;
  --bg-3: #1a1a1a;
  --bg-4: #252525;
  --text: #f0f0f0;
  --text-dim: #444444;
  --text-mid: #999999;
  --accent: #ff4444;
  --accent-glow: rgba(255, 68, 68, 0.35);
  --white: #ffffff;
  --border: rgba(240, 240, 240, 0.1);
  --hero-overlay-start: rgba(10, 10, 10, 0.8);
  --hero-overlay-mid: rgba(25, 10, 10, 0.5);
  --hero-overlay-end: rgba(10, 10, 10, 0.93);
  --nav-scrolled-bg: rgba(10, 10, 10, 0.92);
}

/* --- night: night street --- */
[data-theme="street"][data-color="night"] {
  --bg: #050510;
  --bg-2: #0a0a1a;
  --bg-3: #101028;
  --bg-4: #181838;
  --text: #c0c0e0;
  --text-dim: #303060;
  --text-mid: #7070a8;
  --accent: #ffcc00;
  --accent-glow: rgba(255, 204, 0, 0.4);
  --white: #e0e0f0;
  --border: rgba(192, 192, 224, 0.1);
  --hero-overlay-start: rgba(5, 5, 16, 0.85);
  --hero-overlay-mid: rgba(10, 5, 20, 0.55);
  --hero-overlay-end: rgba(5, 5, 16, 0.95);
  --nav-scrolled-bg: rgba(5, 5, 16, 0.92);
}

/* --- flash: flash pop --- */
[data-theme="street"][data-color="flash"] {
  --bg: #0f0f0f;
  --bg-2: #1a1a1a;
  --bg-3: #282828;
  --bg-4: #383838;
  --text: #ffffff;
  --text-dim: #555555;
  --text-mid: #aaaaaa;
  --accent: #ffffff;
  --accent-glow: rgba(255, 255, 255, 0.4);
  --white: #ffffff;
  --border: rgba(255, 255, 255, 0.12);
  --hero-overlay-start: rgba(15, 15, 15, 0.75);
  --hero-overlay-mid: rgba(30, 30, 30, 0.48);
  --hero-overlay-end: rgba(15, 15, 15, 0.9);
  --nav-scrolled-bg: rgba(15, 15, 15, 0.92);
}

[data-theme="street"] body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
}

[data-theme="street"] .hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

[data-theme="street"] .nav-logo {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

/* rawContrast: extreme raw contrast */
body[data-option-rawContrast="1"] [data-theme="street"] .hero-bg {
  filter: grayscale(1) contrast(2.5) brightness(0.8);
}
body[data-option-rawContrast="1"] [data-theme="street"] .hero-title {
  font-weight: 700;
  letter-spacing: -0.05em;
}

/* decisiveMoment: decisive moment frame */
body[data-option-decisiveMoment="1"] [data-theme="street"] .hero-overlay {
  background: 
    linear-gradient(to right, var(--hero-overlay-start) 0%, transparent 5%, transparent 95%, var(--hero-overlay-start) 100%),
    linear-gradient(to bottom, var(--hero-overlay-start) 0%, transparent 5%, transparent 95%, var(--hero-overlay-start) 100%);
}
body[data-option-decisiveMoment="1"] [data-theme="street"] .hero {
  border: 3px solid var(--accent);
}

/* urbanGrit: urban grit texture */
body[data-option-urbanGrit="1"] [data-theme="street"] .hero-bg {
  filter: grayscale(1) contrast(1.8) brightness(0.85);
}
body[data-option-urbanGrit="1"] [data-theme="street"] .hero-overlay {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.12'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}/* ============================================================
   THEME 15: ZENPHOTO — 禅意极简
   Meditative negative space. Ink wash, bamboo, stone.
   ============================================================ */
[data-theme="zenphoto"] {
  --font-display: 'Noto Serif JP', serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- zen: ink wash --- */
[data-theme="zenphoto"][data-color="zen"] {
  --bg: #f5f2ed;
  --bg-2: #e8e3da;
  --bg-3: #d8d1c4;
  --bg-4: #c0b8a8;
  --text: #1a1818;
  --text-dim: #a09888;
  --text-mid: #5a5248;
  --accent: #2a2828;
  --accent-glow: rgba(42, 40, 40, 0.3);
  --white: #faf8f4;
  --border: rgba(26, 24, 24, 0.08);
  --hero-overlay-start: rgba(20, 18, 18, 0.5);
  --hero-overlay-mid: rgba(40, 35, 30, 0.35);
  --hero-overlay-end: rgba(20, 18, 18, 0.7);
  --nav-scrolled-bg: rgba(245, 242, 237, 0.92);
}

/* --- bamboo: bamboo green --- */
[data-theme="zenphoto"][data-color="bamboo"] {
  --bg: #f0f5f0;
  --bg-2: #dce8dc;
  --bg-3: #c4d8c4;
  --bg-4: #a4c0a4;
  --text: #1a2818;
  --text-dim: #608058;
  --text-mid: #3a5038;
  --accent: #448844;
  --accent-glow: rgba(68, 136, 68, 0.3);
  --white: #f8faf8;
  --border: rgba(26, 40, 24, 0.08);
  --hero-overlay-start: rgba(18, 28, 16, 0.5);
  --hero-overlay-mid: rgba(30, 50, 28, 0.35);
  --hero-overlay-end: rgba(18, 28, 16, 0.7);
  --nav-scrolled-bg: rgba(240, 245, 240, 0.92);
}

/* --- stone: stone gray --- */
[data-theme="zenphoto"][data-color="stone"] {
  --bg: #e8e8e8;
  --bg-2: #d8d8d8;
  --bg-3: #c4c4c4;
  --bg-4: #aaaaaa;
  --text: #1a1a1a;
  --text-dim: #808080;
  --text-mid: #4a4a4a;
  --accent: #3a3a3a;
  --accent-glow: rgba(58, 58, 58, 0.3);
  --white: #f0f0f0;
  --border: rgba(26, 26, 26, 0.08);
  --hero-overlay-start: rgba(20, 20, 20, 0.55);
  --hero-overlay-mid: rgba(40, 40, 40, 0.38);
  --hero-overlay-end: rgba(20, 20, 20, 0.75);
  --nav-scrolled-bg: rgba(232, 232, 232, 0.92);
}

[data-theme="zenphoto"] body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
}

[data-theme="zenphoto"] .hero-title {
  font-family: var(--font-display);
  font-weight: 200;
  letter-spacing: 0.2em;
  writing-mode: horizontal-tb;
}

[data-theme="zenphoto"] .nav-logo {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: 0.15em;
}

/* negativeSpace: extreme negative space */
body[data-option-negativeSpace="1"] [data-theme="zenphoto"] .hero {
  justify-content: flex-start;
  padding-left: 12vw;
}
body[data-option-negativeSpace="1"] [data-theme="zenphoto"] .hero-content {
  text-align: left;
  max-width: 35%;
}
body[data-option-negativeSpace="1"] [data-theme="zenphoto"] .hero-bg {
  filter: brightness(1.1) contrast(0.9);
}

/* inkWash: ink wash texture */
body[data-option-inkWash="1"] [data-theme="zenphoto"] .hero-bg {
  filter: grayscale(1) contrast(0.8) brightness(1.05) blur(1px);
}
body[data-option-inkWash="1"] [data-theme="zenphoto"] .hero-overlay {
  background: linear-gradient(150deg, 
    transparent 30%, 
    rgba(0,0,0,0.05) 50%, 
    rgba(0,0,0,0.1) 70%, 
    var(--hero-overlay-end) 100%);
}
body[data-option-inkWash="1"] [data-theme="zenphoto"] .hero-title {
  font-weight: 300;
  opacity: 0.85;
}

/* zenCircle: enso circle element */
body[data-option-zenCircle="1"] [data-theme="zenphoto"] .hero-content::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 180px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  opacity: 0.3;
  z-index: -1;
}
body[data-option-zenCircle="1"] [data-theme="zenphoto"] .hero-title {
  text-align: center;
}

/* ============================================================
   THEME 16: ABSTRACT — 抽象解构
   Pure form and color. Bold, geometric, deconstructed.
   ============================================================ */
[data-theme="abstract"] {
  --font-display: 'Major Mono Display', monospace;
  --font-body: 'Inter', sans-serif;
  --transition: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- colorfield: bold color field --- */
[data-theme="abstract"][data-color="colorfield"] {
  --bg: #0a0a0a;
  --bg-2: #141414;
  --bg-3: #1e1e1e;
  --bg-4: #2a2a2a;
  --text: #ffdd00;
  --text-dim: #665500;
  --text-mid: #cc9900;
  --accent: #ff0066;
  --accent-glow: rgba(255, 0, 102, 0.4);
  --white: #ffffee;
  --border: rgba(255, 221, 0, 0.15);
  --hero-overlay-start: rgba(10, 10, 10, 0.7);
  --hero-overlay-mid: rgba(40, 0, 10, 0.5);
  --hero-overlay-end: rgba(10, 10, 10, 0.85);
  --nav-scrolled-bg: rgba(10, 10, 10, 0.92);
}

/* --- deconstruct: deconstructed tones --- */
[data-theme="abstract"][data-color="deconstruct"] {
  --bg: #f0f0f0;
  --bg-2: #e0e0e0;
  --bg-3: #cccccc;
  --bg-4: #b3b3b3;
  --text: #1a1a1a;
  --text-dim: #808080;
  --text-mid: #4a4a4a;
  --accent: #ff4400;
  --accent-glow: rgba(255, 68, 0, 0.35);
  --white: #fafafa;
  --border: rgba(26, 26, 26, 0.12);
  --hero-overlay-start: rgba(30, 20, 10, 0.6);
  --hero-overlay-mid: rgba(60, 30, 10, 0.4);
  --hero-overlay-end: rgba(30, 20, 10, 0.8);
  --nav-scrolled-bg: rgba(240, 240, 240, 0.92);
}

/* --- spectrum: full spectrum --- */
[data-theme="abstract"][data-color="spectrum"] {
  --bg: #0c0c0c;
  --bg-2: #181818;
  --bg-3: #242424;
  --bg-4: #323232;
  --text: #00ffcc;
  --text-dim: #006655;
  --text-mid: #00cc99;
  --accent: #ff00cc;
  --accent-glow: rgba(255, 0, 204, 0.4);
  --white: #ccffec;
  --border: rgba(0, 255, 204, 0.15);
  --hero-overlay-start: rgba(12, 12, 12, 0.7);
  --hero-overlay-mid: rgba(20, 5, 20, 0.5);
  --hero-overlay-end: rgba(12, 12, 12, 0.85);
  --nav-scrolled-bg: rgba(12, 12, 12, 0.92);
}

[data-theme="abstract"] body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
}

[data-theme="abstract"] .hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

[data-theme="abstract"] .nav-logo {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.12em;
}

/* colorBlock: color block layout */
body[data-option-colorBlock="1"] [data-theme="abstract"] .hero-overlay {
  background: 
    linear-gradient(90deg, var(--accent) 0%, var(--accent) 33%, transparent 33%, transparent 66%, var(--text) 66%, var(--text) 100%);
  opacity: 0.15;
}
body[data-option-colorBlock="1"] [data-theme="abstract"] .hero-content {
  background: var(--bg);
  padding: 3rem;
}

/* geometricAbstract: geometric abstract shapes */
body[data-option-geometricAbstract="1"] [data-theme="abstract"] .hero-overlay {
  background: 
    polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%) at top,
    linear-gradient(160deg, var(--hero-overlay-start) 0%, var(--hero-overlay-mid) 50%, var(--hero-overlay-end) 100%);
}
body[data-option-geometricAbstract="1"] [data-theme="abstract"] .hero-bg {
  filter: contrast(1.5) saturate(0.5);
}

/* textureStudy: texture exploration */
body[data-option-textureStudy="1"] [data-theme="abstract"] .hero-bg {
  filter: contrast(2) saturate(0) brightness(1.1);
}
body[data-option-textureStudy="1"] [data-theme="abstract"] .hero-overlay {
  background-image: 
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px);
}

/* ============================================================
   THEME 17: NEONNOIR — 霓虹暗夜
   Blade Runner aesthetic. Cyberpunk neon, rain, synthwave.
   ============================================================ */
[data-theme="neonnoir"] {
  --font-display: 'Rajdhani', sans-serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- bladerunner: cyberpunk neon --- */
[data-theme="neonnoir"][data-color="bladerunner"] {
  --bg: #0a0a0f;
  --bg-2: #12121a;
  --bg-3: #1a1a28;
  --bg-4: #252538;
  --text: #c8d8ff;
  --text-dim: #304060;
  --text-mid: #7090c0;
  --accent: #00ffcc;
  --accent-glow: rgba(0, 255, 204, 0.4);
  --white: #e0f0ff;
  --border: rgba(200, 216, 255, 0.12);
  --hero-overlay-start: rgba(8, 8, 14, 0.82);
  --hero-overlay-mid: rgba(10, 5, 25, 0.55);
  --hero-overlay-end: rgba(8, 8, 14, 0.93);
  --nav-scrolled-bg: rgba(10, 10, 15, 0.92);
}

/* --- rain: rain-slicked blue --- */
[data-theme="neonnoir"][data-color="rain"] {
  --bg: #050a14;
  --bg-2: #0a1222;
  --bg-3: #101a30;
  --bg-4: #182440;
  --text: #a0c8f0;
  --text-dim: #183050;
  --text-mid: #5080b8;
  --accent: #4488ff;
  --accent-glow: rgba(68, 136, 255, 0.4);
  --white: #c8e0f8;
  --border: rgba(160, 200, 240, 0.1);
  --hero-overlay-start: rgba(4, 8, 18, 0.85);
  --hero-overlay-mid: rgba(5, 12, 30, 0.55);
  --hero-overlay-end: rgba(4, 8, 18, 0.95);
  --nav-scrolled-bg: rgba(5, 10, 20, 0.92);
}

/* --- synthwave: synthwave pink --- */
[data-theme="neonnoir"][data-color="synthwave"] {
  --bg: #0f0618;
  --bg-2: #1a0c28;
  --bg-3: #281438;
  --bg-4: #381c48;
  --text: #e0c8ff;
  --text-dim: #402860;
  --text-mid: #9868c0;
  --accent: #ff44cc;
  --accent-glow: rgba(255, 68, 204, 0.4);
  --white: #f0d8ff;
  --border: rgba(224, 200, 255, 0.12);
  --hero-overlay-start: rgba(12, 4, 20, 0.82);
  --hero-overlay-mid: rgba(20, 5, 30, 0.55);
  --hero-overlay-end: rgba(12, 4, 20, 0.93);
  --nav-scrolled-bg: rgba(15, 6, 24, 0.92);
}

[data-theme="neonnoir"] body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
}

[data-theme="neonnoir"] .hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-shadow: 0 0 20px var(--accent-glow), 0 0 40px var(--accent-glow), 0 0 60px var(--accent-glow);
}

[data-theme="neonnoir"] .nav-logo {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* neonGlow: neon glow text */
body[data-option-neonGlow="1"] [data-theme="neonnoir"] .hero-title {
  text-shadow: 
    0 0 10px var(--accent),
    0 0 20px var(--accent),
    0 0 40px var(--accent-glow),
    0 0 80px var(--accent-glow),
    0 0 120px var(--accent-glow);
  animation: neonPulse 2s ease-in-out infinite alternate;
}
@keyframes neonPulse {
  from { text-shadow: 0 0 10px var(--accent), 0 0 20px var(--accent), 0 0 40px var(--accent-glow); }
  to { text-shadow: 0 0 20px var(--accent), 0 0 40px var(--accent), 0 0 80px var(--accent-glow), 0 0 120px var(--accent-glow); }
}

/* rainEffect: rain streak effect */
body[data-option-rainEffect="1"] [data-theme="neonnoir"] .hero-overlay {
  background: 
    repeating-linear-gradient(0deg, 
      transparent, 
      transparent 2px, 
      rgba(255,255,255,0.03) 2px, 
      rgba(255,255,255,0.03) 4px),
    linear-gradient(160deg, var(--hero-overlay-start) 0%, var(--hero-overlay-mid) 50%, var(--hero-overlay-end) 100%);
}
body[data-option-rainEffect="1"] [data-theme="neonnoir"] .hero-bg {
  filter: brightness(0.8) contrast(1.2) saturate(1.5);
}

/* cyberGrid: cyberpunk grid */
body[data-option-cyberGrid="1"] [data-theme="neonnoir"] .hero-overlay {
  background: 
    linear-gradient(rgba(0,255,204,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,204,0.06) 1px, transparent 1px),
    linear-gradient(160deg, var(--hero-overlay-start) 0%, var(--hero-overlay-mid) 50%, var(--hero-overlay-end) 100%);
  background-size: 40px 40px, 40px 40px, 100% 100%;
}
body[data-option-cyberGrid="1"] [data-theme="neonnoir"] .hero {
  perspective: 500px;
}

/* ============================================================
   THEME 18: SPORTS — 运动定格
   Freeze frame action. Motion blur, speed lines, velocity.
   ============================================================ */
[data-theme="sports"] {
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- action: action red --- */
[data-theme="sports"][data-color="action"] {
  --bg: #0a0a0a;
  --bg-2: #141414;
  --bg-3: #1e1e1e;
  --bg-4: #2a2a2a;
  --text: #ffe0e0;
  --text-dim: #602020;
  --text-mid: #c04040;
  --accent: #ff2222;
  --accent-glow: rgba(255, 34, 34, 0.4);
  --white: #fff0f0;
  --border: rgba(255, 224, 224, 0.12);
  --hero-overlay-start: rgba(10, 10, 10, 0.78);
  --hero-overlay-mid: rgba(30, 5, 5, 0.5);
  --hero-overlay-end: rgba(10, 10, 10, 0.9);
  --nav-scrolled-bg: rgba(10, 10, 10, 0.92);
}

/* --- stadium: stadium lights --- */
[data-theme="sports"][data-color="stadium"] {
  --bg: #0d0d0d;
  --bg-2: #181818;
  --bg-3: #242424;
  --bg-4: #323232;
  --text: #ffffe0;
  --text-dim: #505030;
  --text-mid: #b0b060;
  --accent: #ffcc00;
  --accent-glow: rgba(255, 204, 0, 0.4);
  --white: #fffff0;
  --border: rgba(255, 255, 224, 0.12);
  --hero-overlay-start: rgba(13, 13, 13, 0.75);
  --hero-overlay-mid: rgba(30, 25, 5, 0.5);
  --hero-overlay-end: rgba(13, 13, 13, 0.88);
  --nav-scrolled-bg: rgba(13, 13, 13, 0.92);
}

/* --- velocity: speed blue --- */
[data-theme="sports"][data-color="velocity"] {
  --bg: #050a14;
  --bg-2: #0a1428;
  --bg-3: #101e3c;
  --bg-4: #182a50;
  --text: #c0e0ff;
  --text-dim: #183060;
  --text-mid: #5088c0;
  --accent: #00aaff;
  --accent-glow: rgba(0, 170, 255, 0.4);
  --white: #d8ecff;
  --border: rgba(192, 224, 255, 0.12);
  --hero-overlay-start: rgba(4, 8, 18, 0.8);
  --hero-overlay-mid: rgba(5, 12, 30, 0.5);
  --hero-overlay-end: rgba(4, 8, 18, 0.92);
  --nav-scrolled-bg: rgba(5, 10, 20, 0.92);
}

[data-theme="sports"] body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
}

[data-theme="sports"] .hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: clamp(4rem, 12vw, 10rem);
}

[data-theme="sports"] .nav-logo {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.08em;
  font-size: 1.8rem;
}

/* motionBlur: motion blur lines */
body[data-option-motionBlur="1"] [data-theme="sports"] .hero-bg {
  filter: blur(6px) brightness(1.1) contrast(1.2);
  transform: scale(1.1);
}
body[data-option-motionBlur="1"] [data-theme="sports"] .hero-overlay {
  background: linear-gradient(90deg, 
    var(--hero-overlay-start) 0%, 
    transparent 30%, 
    transparent 70%, 
    var(--hero-overlay-end) 100%);
}

/* freezeFrame: freeze frame border */
body[data-option-freezeFrame="1"] [data-theme="sports"] .hero {
  border: 4px solid var(--accent);
  box-shadow: inset 0 0 0 2px var(--bg);
}
body[data-option-freezeFrame="1"] [data-theme="sports"] .hero-content {
  border: 2px solid var(--accent);
  padding: 2rem 3rem;
}
body[data-option-freezeFrame="1"] [data-theme="sports"] .hero-title {
  font-size: clamp(3rem, 9vw, 7rem);
}

/* speedLines: speed line accents */
body[data-option-speedLines="1"] [data-theme="sports"] .hero-overlay {
  background: 
    repeating-linear-gradient(90deg, 
      transparent 0px, 
      transparent 30px, 
      var(--accent-glow) 30px, 
      var(--accent-glow) 31px,
      transparent 31px,
      transparent 60px,
      var(--accent-glow) 60px,
      var(--accent-glow) 61px),
    linear-gradient(160deg, var(--hero-overlay-start) 0%, var(--hero-overlay-mid) 50%, var(--hero-overlay-end) 100%);
}
body[data-option-speedLines="1"] [data-theme="sports"] .hero-title {
  font-style: italic;
  transform: skewX(-8deg);
}

/* ============================================================
   THEME 19: FOODPHOTO — 美食静物
   Warm rustic culinary. Natural light, shallow DOF.
   ============================================================ */
[data-theme="foodphoto"] {
  --font-display: 'Lora', serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- rustic: rustic wood --- */
[data-theme="foodphoto"][data-color="rustic"] {
  --bg: #f5eee0;
  --bg-2: #e8ddc8;
  --bg-3: #d8c8a8;
  --bg-4: #c0ac80;
  --text: #3a2818;
  --text-dim: #a08060;
  --text-mid: #6b4a28;
  --accent: #c48840;
  --accent-glow: rgba(196, 136, 64, 0.35);
  --white: #faf5ec;
  --border: rgba(58, 40, 24, 0.1);
  --hero-overlay-start: rgba(40, 25, 12, 0.55);
  --hero-overlay-mid: rgba(80, 50, 25, 0.38);
  --hero-overlay-end: rgba(40, 25, 12, 0.75);
  --nav-scrolled-bg: rgba(245, 238, 224, 0.92);
}

/* --- harvest: harvest gold --- */
[data-theme="foodphoto"][data-color="harvest"] {
  --bg: #f5f0e0;
  --bg-2: #ece0c0;
  --bg-3: #e0d0a0;
  --bg-4: #d0b878;
  --text: #3a2810;
  --text-dim: #b89060;
  --text-mid: #6b4a20;
  --accent: #d4a030;
  --accent-glow: rgba(212, 160, 48, 0.35);
  --white: #faf5e8;
  --border: rgba(58, 40, 16, 0.1);
  --hero-overlay-start: rgba(40, 25, 10, 0.5);
  --hero-overlay-mid: rgba(80, 50, 20, 0.35);
  --hero-overlay-end: rgba(40, 25, 10, 0.7);
  --nav-scrolled-bg: rgba(245, 240, 224, 0.92);
}

/* --- bakery: bakery warm --- */
[data-theme="foodphoto"][data-color="bakery"] {
  --bg: #f8f0e8;
  --bg-2: #f0e0d0;
  --bg-3: #e8d0b8;
  --bg-4: #d8b898;
  --text: #3a2018;
  --text-dim: #b88068;
  --text-mid: #6b4030;
  --accent: #d48858;
  --accent-glow: rgba(212, 136, 88, 0.35);
  --white: #fcf6f0;
  --border: rgba(58, 32, 24, 0.1);
  --hero-overlay-start: rgba(40, 20, 12, 0.5);
  --hero-overlay-mid: rgba(80, 40, 25, 0.35);
  --hero-overlay-end: rgba(40, 20, 12, 0.7);
  --nav-scrolled-bg: rgba(248, 240, 232, 0.92);
}

[data-theme="foodphoto"] body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
}

[data-theme="foodphoto"] .hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.02em;
}

[data-theme="foodphoto"] .nav-logo {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
}

/* warmLight: warm natural light */
body[data-option-warmLight="1"] [data-theme="foodphoto"] .hero-overlay {
  background: linear-gradient(140deg,
    rgba(255,200,150,0.2) 0%,
    rgba(255,180,120,0.1) 30%,
    var(--hero-overlay-mid) 60%,
    var(--hero-overlay-end) 100%);
}
body[data-option-warmLight="1"] [data-theme="foodphoto"] .hero-bg {
  filter: brightness(1.15) saturate(1.1) contrast(0.95);
}

/* shallowDOF: shallow depth of field */
body[data-option-shallowDOF="1"] [data-theme="foodphoto"] .hero-bg {
  filter: blur(4px) brightness(1.1) saturate(1.05);
  transform: scale(1.05);
}
body[data-option-shallowDOF="1"] [data-theme="foodphoto"] .hero-overlay {
  background: radial-gradient(ellipse at center, transparent 40%, var(--hero-overlay-start) 70%, var(--hero-overlay-end) 100%);
}

/* rusticTexture: rustic texture overlay */
body[data-option-rusticTexture="1"] [data-theme="foodphoto"] .hero-overlay {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='wood'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04 0.15' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23wood)' opacity='0.08'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}
body[data-option-rusticTexture="1"] [data-theme="foodphoto"] .hero-bg {
  filter: brightness(1.05) contrast(1.1) saturate(0.9);
}

/* ============================================================
   THEME 20: ARCHITECTURE — 建筑几何
   Clean structural lines. Concrete, steel, glass.
   ============================================================ */
[data-theme="architecture"] {
  --font-display: 'Work Sans', sans-serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- concrete: raw concrete --- */
[data-theme="architecture"][data-color="concrete"] {
  --bg: #e8e8e8;
  --bg-2: #d8d8d8;
  --bg-3: #c4c4c4;
  --bg-4: #aaaaaa;
  --text: #1a1a1a;
  --text-dim: #808080;
  --text-mid: #4a4a4a;
  --accent: #3a3a3a;
  --accent-glow: rgba(58, 58, 58, 0.3);
  --white: #f0f0f0;
  --border: rgba(26, 26, 26, 0.08);
  --hero-overlay-start: rgba(20, 20, 20, 0.55);
  --hero-overlay-mid: rgba(40, 40, 40, 0.38);
  --hero-overlay-end: rgba(20, 20, 20, 0.75);
  --nav-scrolled-bg: rgba(232, 232, 232, 0.92);
}

/* --- steel: steel blue --- */
[data-theme="architecture"][data-color="steel"] {
  --bg: #0d0d14;
  --bg-2: #151520;
  --bg-3: #1e1e30;
  --bg-4: #282840;
  --text: #c0c8e0;
  --text-dim: #303860;
  --text-mid: #7080b0;
  --accent: #6688cc;
  --accent-glow: rgba(102, 136, 204, 0.35);
  --white: #d8ddf0;
  --border: rgba(192, 200, 224, 0.1);
  --hero-overlay-start: rgba(10, 10, 18, 0.8);
  --hero-overlay-mid: rgba(15, 15, 30, 0.5);
  --hero-overlay-end: rgba(10, 10, 18, 0.92);
  --nav-scrolled-bg: rgba(13, 13, 20, 0.92);
}

/* --- glass: glass tower --- */
[data-theme="architecture"][data-color="glass"] {
  --bg: #e8f0f8;
  --bg-2: #d4e4f0;
  --bg-3: #bcd4e8;
  --bg-4: #9cc0d8;
  --text: #1a2838;
  --text-dim: #6080a0;
  --text-mid: #3a5068;
  --accent: #88ccff;
  --accent-glow: rgba(136, 204, 255, 0.35);
  --white: #f4f8fc;
  --border: rgba(26, 40, 56, 0.08);
  --hero-overlay-start: rgba(20, 30, 45, 0.5);
  --hero-overlay-mid: rgba(40, 60, 90, 0.35);
  --hero-overlay-end: rgba(20, 30, 45, 0.7);
  --nav-scrolled-bg: rgba(232, 240, 248, 0.92);
}

[data-theme="architecture"] body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
}

[data-theme="architecture"] .hero-title {
  font-family: var(--font-display);
  font-weight: 100;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

[data-theme="architecture"] .nav-logo {
  font-family: var(--font-display);
  font-weight: 200;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* perspectiveLines: perspective guide lines */
body[data-option-perspectiveLines="1"] [data-theme="architecture"] .hero-overlay {
  background: 
    linear-gradient(to bottom, 
      transparent calc(100% - 2px), 
      var(--accent) calc(100% - 2px), 
      var(--accent) 100%),
    linear-gradient(160deg, var(--hero-overlay-start) 0%, var(--hero-overlay-mid) 50%, var(--hero-overlay-end) 100%);
}
body[data-option-perspectiveLines="1"] [data-theme="architecture"] .hero-bg {
  filter: contrast(1.2) brightness(0.95);
}

/* symmetry: symmetry emphasis */
body[data-option-symmetry="1"] [data-theme="architecture"] .hero-overlay {
  background: 
    linear-gradient(90deg, transparent calc(50% - 1px), var(--accent) calc(50% - 1px), var(--accent) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(160deg, var(--hero-overlay-start) 0%, var(--hero-overlay-mid) 50%, var(--hero-overlay-end) 100%);
}
body[data-option-symmetry="1"] [data-theme="architecture"] .hero-content {
  text-align: center;
}

/* structuralGrid: structural grid */
body[data-option-structuralGrid="1"] [data-theme="architecture"] .hero-overlay {
  background: 
    linear-gradient(rgba(0,0,0,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.06) 1px, transparent 1px),
    linear-gradient(160deg, var(--hero-overlay-start) 0%, var(--hero-overlay-mid) 50%, var(--hero-overlay-end) 100%);
  background-size: 60px 60px, 60px 60px, 100% 100%;
}
body[data-option-structuralGrid="1"] [data-theme="architecture"] .hero-bg {
  filter: saturate(0.5) contrast(1.3);
}

/* ============================================================
   THEME 21: WILDLIFE — 野外生灵
   Earthy natural tones. Savanna, forest, tundra.
   ============================================================ */
[data-theme="wildlife"] {
  --font-display: 'Merriweather', serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- savanna: savanna gold --- */
[data-theme="wildlife"][data-color="savanna"] {
  --bg: #f5edd8;
  --bg-2: #e8dbb8;
  --bg-3: #d8c898;
  --bg-4: #c0ac70;
  --text: #3a2810;
  --text-dim: #b09050;
  --text-mid: #6b4a20;
  --accent: #d4882a;
  --accent-glow: rgba(212, 136, 42, 0.35);
  --white: #faf5e8;
  --border: rgba(58, 40, 16, 0.1);
  --hero-overlay-start: rgba(40, 25, 8, 0.55);
  --hero-overlay-mid: rgba(80, 50, 15, 0.38);
  --hero-overlay-end: rgba(40, 25, 8, 0.75);
  --nav-scrolled-bg: rgba(245, 237, 216, 0.92);
}

/* --- forest: deep forest --- */
[data-theme="wildlife"][data-color="forest"] {
  --bg: #0a1210;
  --bg-2: #0e1a16;
  --bg-3: #12241e;
  --bg-4: #183028;
  --text: #c0e0d0;
  --text-dim: #184030;
  --text-mid: #508868;
  --accent: #44aa66;
  --accent-glow: rgba(68, 170, 102, 0.35);
  --white: #d8f0e0;
  --border: rgba(192, 224, 208, 0.1);
  --hero-overlay-start: rgba(8, 14, 12, 0.8);
  --hero-overlay-mid: rgba(10, 25, 18, 0.5);
  --hero-overlay-end: rgba(8, 14, 12, 0.92);
  --nav-scrolled-bg: rgba(10, 18, 16, 0.92);
}

/* --- tundra: arctic tundra --- */
[data-theme="wildlife"][data-color="tundra"] {
  --bg: #e8ecf0;
  --bg-2: #d8dde4;
  --bg-3: #c4ccd4;
  --bg-4: #a8b4c0;
  --text: #1a2428;
  --text-dim: #809098;
  --text-mid: #4a5860;
  --accent: #6688a0;
  --accent-glow: rgba(102, 136, 160, 0.35);
  --white: #f4f6f8;
  --border: rgba(26, 36, 40, 0.08);
  --hero-overlay-start: rgba(20, 28, 32, 0.55);
  --hero-overlay-mid: rgba(40, 55, 65, 0.38);
  --hero-overlay-end: rgba(20, 28, 32, 0.75);
  --nav-scrolled-bg: rgba(232, 236, 240, 0.92);
}

[data-theme="wildlife"] body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
}

[data-theme="wildlife"] .hero-title {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.04em;
}

[data-theme="wildlife"] .nav-logo {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* camoPattern: camouflage pattern */
body[data-option-camoPattern="1"] [data-theme="wildlife"] .hero-overlay {
  background: 
    radial-gradient(ellipse at 20% 30%, rgba(0,0,0,0.08) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 60%, rgba(0,0,0,0.06) 0%, transparent 35%),
    radial-gradient(ellipse at 75% 25%, rgba(0,0,0,0.07) 0%, transparent 30%),
    radial-gradient(ellipse at 35% 80%, rgba(0,0,0,0.05) 0%, transparent 38%),
    linear-gradient(160deg, var(--hero-overlay-start) 0%, var(--hero-overlay-mid) 50%, var(--hero-overlay-end) 100%);
}
body[data-option-camoPattern="1"] [data-theme="wildlife"] .hero-bg {
  filter: saturate(0.8) contrast(1.1);
}

/* telephotoVignette: telephoto vignette */
body[data-option-telephotoVignette="1"] [data-theme="wildlife"] .hero-overlay {
  background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.15) 55%, var(--hero-overlay-start) 75%, var(--hero-overlay-end) 100%);
}
body[data-option-telephotoVignette="1"] [data-theme="wildlife"] .hero-bg {
  filter: brightness(0.9) contrast(1.15);
  transform: scale(1.08);
}

/* naturalTexture: natural texture */
body[data-option-naturalTexture="1"] [data-theme="wildlife"] .hero-overlay {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='earth'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23earth)' opacity='0.06'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}
body[data-option-naturalTexture="1"] [data-theme="wildlife"] .hero-bg {
  filter: contrast(1.2) saturate(1.1);
}/* ============================================================
   THEME 22: FINEART — 艺术画廊
   Museum white cube. Gallery walls, pedestal framing.
   ============================================================ */
[data-theme="fineart"] {
  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- whitecube: gallery white --- */
[data-theme="fineart"][data-color="whitecube"] {
  --bg: #fafafa;
  --bg-2: #f0f0f0;
  --bg-3: #e4e4e4;
  --bg-4: #d0d0d0;
  --text: #1a1a1a;
  --text-dim: #999999;
  --text-mid: #555555;
  --accent: #2a2a2a;
  --accent-glow: rgba(42, 42, 42, 0.3);
  --white: #ffffff;
  --border: rgba(26, 26, 26, 0.08);
  --hero-overlay-start: rgba(20, 20, 20, 0.45);
  --hero-overlay-mid: rgba(35, 35, 35, 0.3);
  --hero-overlay-end: rgba(20, 20, 20, 0.65);
  --nav-scrolled-bg: rgba(250, 250, 250, 0.92);
}

/* --- museum: museum warm --- */
[data-theme="fineart"][data-color="museum"] {
  --bg: #f5f2ed;
  --bg-2: #e8e3d8;
  --bg-3: #d8d1c4;
  --bg-4: #c0b8a8;
  --text: #1a1818;
  --text-dim: #a09888;
  --text-mid: #5a5248;
  --accent: #8b6914;
  --accent-glow: rgba(139, 105, 20, 0.3);
  --white: #faf8f4;
  --border: rgba(26, 24, 24, 0.08);
  --hero-overlay-start: rgba(20, 18, 18, 0.5);
  --hero-overlay-mid: rgba(40, 35, 30, 0.35);
  --hero-overlay-end: rgba(20, 18, 18, 0.7);
  --nav-scrolled-bg: rgba(245, 242, 237, 0.92);
}

/* --- collector: collector edition --- */
[data-theme="fineart"][data-color="collector"] {
  --bg: #0d0d0d;
  --bg-2: #181818;
  --bg-3: #242424;
  --bg-4: #323232;
  --text: #d8d8d8;
  --text-dim: #555555;
  --text-mid: #999999;
  --accent: #c8a060;
  --accent-glow: rgba(200, 160, 96, 0.35);
  --white: #f0f0f0;
  --border: rgba(216, 216, 216, 0.1);
  --hero-overlay-start: rgba(13, 13, 13, 0.8);
  --hero-overlay-mid: rgba(30, 20, 10, 0.5);
  --hero-overlay-end: rgba(13, 13, 13, 0.92);
  --nav-scrolled-bg: rgba(13, 13, 13, 0.92);
}

[data-theme="fineart"] body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
}

[data-theme="fineart"] .hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.08em;
}

[data-theme="fineart"] .nav-logo {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.1em;
}

/* galleryWall: gallery wall spacing */
body[data-option-galleryWall="1"] [data-theme="fineart"] .hero {
  padding: 6vw;
}
body[data-option-galleryWall="1"] [data-theme="fineart"] .hero-content {
  background: var(--white);
  padding: 3rem 4rem;
  box-shadow: 0 4px 30px rgba(0,0,0,0.08);
}
body[data-option-galleryWall="1"] [data-theme="fineart"] .hero-overlay {
  background: linear-gradient(160deg, 
    rgba(0,0,0,0.3) 0%, 
    rgba(0,0,0,0.1) 40%, 
    var(--hero-overlay-end) 100%);
}

/* museumLight: museum lighting */
body[data-option-museumLight="1"] [data-theme="fineart"] .hero-overlay {
  background: radial-gradient(ellipse at 50% 30%, transparent 20%, rgba(0,0,0,0.1) 45%, var(--hero-overlay-start) 65%, var(--hero-overlay-end) 100%);
}
body[data-option-museumLight="1"] [data-theme="fineart"] .hero-bg {
  filter: brightness(1.05) contrast(0.95);
}
body[data-option-museumLight="1"] [data-theme="fineart"] .hero-title {
  text-shadow: 0 0 30px rgba(255,255,255,0.1);
}

/* pedestalFrame: pedestal framing */
body[data-option-pedestalFrame="1"] [data-theme="fineart"] .hero-content {
  border: 20px solid var(--white);
  box-shadow: 0 0 0 1px var(--border), 0 8px 40px rgba(0,0,0,0.1);
  padding: 2rem;
}
body[data-option-pedestalFrame="1"] [data-theme="fineart"] .hero {
  padding: 3vw;
}

/* ============================================================
   THEME 23: VINTAGE70 — 70年代复古
   Groovy retro film. Avocado, disco, warm film burns.
   ============================================================ */
[data-theme="vintage70"] {
  --font-display: 'Fredoka One', cursive;
  --font-body: 'Inter', sans-serif;
  --transition: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- groovy: groovy orange --- */
[data-theme="vintage70"][data-color="groovy"] {
  --bg: #f5e8d0;
  --bg-2: #ecd8b0;
  --bg-3: #e0c488;
  --bg-4: #d0a860;
  --text: #4a2818;
  --text-dim: #c08050;
  --text-mid: #7a4028;
  --accent: #ff6622;
  --accent-glow: rgba(255, 102, 34, 0.35);
  --white: #faf0e0;
  --border: rgba(74, 40, 24, 0.12);
  --hero-overlay-start: rgba(50, 25, 10, 0.55);
  --hero-overlay-mid: rgba(100, 50, 15, 0.38);
  --hero-overlay-end: rgba(50, 25, 10, 0.75);
  --nav-scrolled-bg: rgba(245, 232, 208, 0.92);
}

/* --- disco: disco purple --- */
[data-theme="vintage70"][data-color="disco"] {
  --bg: #0d0a14;
  --bg-2: #181020;
  --bg-3: #241830;
  --bg-4: #322040;
  --text: #e0c8ff;
  --text-dim: #402860;
  --text-mid: #9868c0;
  --accent: #ff44cc;
  --accent-glow: rgba(255, 68, 204, 0.4);
  --white: #f0d8ff;
  --border: rgba(224, 200, 255, 0.12);
  --hero-overlay-start: rgba(10, 8, 18, 0.8);
  --hero-overlay-mid: rgba(20, 6, 30, 0.5);
  --hero-overlay-end: rgba(10, 8, 18, 0.92);
  --nav-scrolled-bg: rgba(13, 10, 20, 0.92);
}

/* --- avocado: avocado green --- */
[data-theme="vintage70"][data-color="avocado"] {
  --bg: #f0f0e0;
  --bg-2: #e0e0c8;
  --bg-3: #ccccb0;
  --bg-4: #b3b390;
  --text: #2a2818;
  --text-dim: #888050;
  --text-mid: #5a5830;
  --accent: #88aa30;
  --accent-glow: rgba(136, 170, 48, 0.35);
  --white: #f8f8e8;
  --border: rgba(42, 40, 24, 0.1);
  --hero-overlay-start: rgba(30, 28, 16, 0.55);
  --hero-overlay-mid: rgba(50, 45, 22, 0.38);
  --hero-overlay-end: rgba(30, 28, 16, 0.75);
  --nav-scrolled-bg: rgba(240, 240, 224, 0.92);
}

[data-theme="vintage70"] body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
}

[data-theme="vintage70"] .hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transform: rotate(-1deg);
}

[data-theme="vintage70"] .nav-logo {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* lightLeak: warm light leaks */
body[data-option-vintage70-lightLeak="1"] [data-theme="vintage70"] .hero-overlay {
  background: 
    radial-gradient(ellipse at 10% 15%, rgba(255,150,50,0.3) 0%, transparent 40%),
    radial-gradient(ellipse at 90% 80%, rgba(255,100,30,0.2) 0%, transparent 35%),
    linear-gradient(160deg, var(--hero-overlay-start) 0%, var(--hero-overlay-mid) 50%, var(--hero-overlay-end) 100%);
}
body[data-option-vintage70-lightLeak="1"] [data-theme="vintage70"] .hero-bg {
  filter: saturate(1.3) brightness(1.05);
}

/* filmBurn: film burn edge */
body[data-option-filmBurn="1"] [data-theme="vintage70"] .hero-overlay {
  background: 
    radial-gradient(ellipse at 100% 0%, rgba(255,80,20,0.4) 0%, transparent 25%),
    radial-gradient(ellipse at 0% 100%, rgba(255,60,10,0.3) 0%, transparent 20%),
    linear-gradient(160deg, var(--hero-overlay-start) 0%, var(--hero-overlay-mid) 50%, var(--hero-overlay-end) 100%);
}
body[data-option-filmBurn="1"] [data-theme="vintage70"] .hero-bg {
  filter: brightness(1.1) contrast(0.9) saturate(0.8);
}

/* retroPattern: groovy pattern */
body[data-option-retroPattern="1"] [data-theme="vintage70"] .hero-overlay {
  background: 
    repeating-conic-gradient(var(--accent) 0% 3%, transparent 3% 10%) 0 0 / 80px 80px,
    linear-gradient(160deg, var(--hero-overlay-start) 0%, var(--hero-overlay-mid) 50%, var(--hero-overlay-end) 100%);
}

/* ============================================================
   THEME 24: CYANOTYPE — 蓝晒古典
   Prussian blue sun print. Botanical, solar, blueprint.
   ============================================================ */
[data-theme="cyanotype"] {
  --font-display: 'Libre Baskerville', serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- prussian: deep Prussian blue --- */
[data-theme="cyanotype"][data-color="prussian"] {
  --bg: #0a1428;
  --bg-2: #0e1c38;
  --bg-3: #142648;
  --bg-4: #1a3258;
  --text: #a0c0e8;
  --text-dim: #183058;
  --text-mid: #5080b8;
  --accent: #4488dd;
  --accent-glow: rgba(68, 136, 221, 0.35);
  --white: #c8e0f8;
  --border: rgba(160, 192, 232, 0.1);
  --hero-overlay-start: rgba(8, 16, 32, 0.82);
  --hero-overlay-mid: rgba(10, 22, 44, 0.55);
  --hero-overlay-end: rgba(8, 16, 32, 0.93);
  --nav-scrolled-bg: rgba(10, 20, 40, 0.92);
}

/* --- botanical: botanical green-blue --- */
[data-theme="cyanotype"][data-color="botanical"] {
  --bg: #0a1818;
  --bg-2: #0e2424;
  --bg-3: #143030;
  --bg-4: #1a3e3e;
  --text: #a0d8d8;
  --text-dim: #184848;
  --text-mid: #509898;
  --accent: #44ccaa;
  --accent-glow: rgba(68, 204, 170, 0.35);
  --white: #c8f0f0;
  --border: rgba(160, 216, 216, 0.1);
  --hero-overlay-start: rgba(8, 20, 20, 0.82);
  --hero-overlay-mid: rgba(10, 28, 28, 0.55);
  --hero-overlay-end: rgba(8, 20, 20, 0.93);
  --nav-scrolled-bg: rgba(10, 24, 24, 0.92);
}

/* --- solar: sun-bleached blue --- */
[data-theme="cyanotype"][data-color="solar"] {
  --bg: #d8e4f0;
  --bg-2: #c4d4e4;
  --bg-3: #acc0d4;
  --bg-4: #90a8c0;
  --text: #1a2838;
  --text-dim: #6080a0;
  --text-mid: #3a5068;
  --accent: #3366aa;
  --accent-glow: rgba(51, 102, 170, 0.35);
  --white: #e8f0f8;
  --border: rgba(26, 40, 56, 0.1);
  --hero-overlay-start: rgba(20, 30, 40, 0.5);
  --hero-overlay-mid: rgba(40, 55, 70, 0.35);
  --hero-overlay-end: rgba(20, 30, 40, 0.7);
  --nav-scrolled-bg: rgba(216, 228, 240, 0.92);
}

[data-theme="cyanotype"] body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
}

[data-theme="cyanotype"] .hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.04em;
}

[data-theme="cyanotype"] .nav-logo {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* bluePrint: blueprint texture */
body[data-option-bluePrint="1"] [data-theme="cyanotype"] .hero-overlay {
  background: 
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(160deg, var(--hero-overlay-start) 0%, var(--hero-overlay-mid) 50%, var(--hero-overlay-end) 100%);
  background-size: 30px 30px, 30px 30px, 100% 100%;
}
body[data-option-bluePrint="1"] [data-theme="cyanotype"] .hero-bg {
  filter: hue-rotate(180deg) saturate(0.8) brightness(0.9);
}

/* botanicalFrame: botanical border */
body[data-option-botanicalFrame="1"] [data-theme="cyanotype"] .hero {
  border: 24px solid var(--bg-4);
}
body[data-option-botanicalFrame="1"] [data-theme="cyanotype"] .hero::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid var(--accent);
  opacity: 0.25;
  z-index: 10;
  pointer-events: none;
}

/* sunPrint: sun print fade */
body[data-option-sunPrint="1"] [data-theme="cyanotype"] .hero-overlay {
  background: linear-gradient(160deg, 
    rgba(255,255,255,0.15) 0%, 
    var(--hero-overlay-mid) 40%, 
    var(--hero-overlay-end) 100%);
}
body[data-option-sunPrint="1"] [data-theme="cyanotype"] .hero-bg {
  filter: brightness(1.2) contrast(0.85) saturate(0.7);
}
body[data-option-sunPrint="1"] [data-theme="cyanotype"] .hero-title {
  text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

/* ============================================================
   THEME 25: TINTYPE — 铁版旧影
   Raw metal Civil War era. Iron, bronze, pewter.
   ============================================================ */
[data-theme="tintype"] {
  --font-display: 'Special Elite', cursive;
  --font-body: 'Inter', sans-serif;
  --transition: 0.4s ease;
}

/* --- iron: dark iron --- */
[data-theme="tintype"][data-color="iron"] {
  --bg: #0d0d0d;
  --bg-2: #151515;
  --bg-3: #1e1e1e;
  --bg-4: #2a2a2a;
  --text: #c0c0c0;
  --text-dim: #444444;
  --text-mid: #808080;
  --accent: #888888;
  --accent-glow: rgba(136, 136, 136, 0.3);
  --white: #d8d8d8;
  --border: rgba(192, 192, 192, 0.08);
  --hero-overlay-start: rgba(13, 13, 13, 0.85);
  --hero-overlay-mid: rgba(25, 25, 25, 0.55);
  --hero-overlay-end: rgba(13, 13, 13, 0.95);
  --nav-scrolled-bg: rgba(13, 13, 13, 0.92);
}

/* --- bronze: aged bronze --- */
[data-theme="tintype"][data-color="bronze"] {
  --bg: #14100c;
  --bg-2: #1e1814;
  --bg-3: #2a221c;
  --bg-4: #382e26;
  --text: #d8c8b0;
  --text-dim: #685840;
  --text-mid: #a08868;
  --accent: #c89850;
  --accent-glow: rgba(200, 152, 80, 0.3);
  --white: #e8dcc8;
  --border: rgba(216, 200, 176, 0.1);
  --hero-overlay-start: rgba(16, 12, 8, 0.85);
  --hero-overlay-mid: rgba(35, 22, 12, 0.55);
  --hero-overlay-end: rgba(16, 12, 8, 0.95);
  --nav-scrolled-bg: rgba(20, 16, 12, 0.92);
}

/* --- pewter: pewter gray --- */
[data-theme="tintype"][data-color="pewter"] {
  --bg: #1a1a1c;
  --bg-2: #242428;
  --bg-3: #303036;
  --bg-4: #3e3e44;
  --text: #c8c8cc;
  --text-dim: #505058;
  --text-mid: #888890;
  --accent: #a0a0a8;
  --accent-glow: rgba(160, 160, 168, 0.3);
  --white: #dcdce0;
  --border: rgba(200, 200, 204, 0.1);
  --hero-overlay-start: rgba(20, 20, 22, 0.85);
  --hero-overlay-mid: rgba(30, 30, 34, 0.55);
  --hero-overlay-end: rgba(20, 20, 22, 0.95);
  --nav-scrolled-bg: rgba(26, 26, 28, 0.92);
}

[data-theme="tintype"] body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
}

[data-theme="tintype"] .hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

[data-theme="tintype"] .nav-logo {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.08em;
}

/* metalPlate: metal plate texture */
body[data-option-metalPlate="1"] [data-theme="tintype"] .hero-bg {
  filter: grayscale(1) contrast(1.5) brightness(0.8);
}
body[data-option-metalPlate="1"] [data-theme="tintype"] .hero-overlay {
  background: 
    linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 40%, rgba(0,0,0,0.1) 100%),
    radial-gradient(ellipse at center, transparent 40%, var(--hero-overlay-start) 70%, var(--hero-overlay-end) 100%);
}
body[data-option-metalPlate="1"] [data-theme="tintype"] .hero-title {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

/* chemicalEdge: chemical edge stain */
body[data-option-chemicalEdge="1"] [data-theme="tintype"] .hero-overlay {
  background: 
    radial-gradient(ellipse at 0% 0%, rgba(139, 105, 20, 0.2) 0%, transparent 30%),
    radial-gradient(ellipse at 100% 100%, rgba(160, 120, 50, 0.15) 0%, transparent 25%),
    radial-gradient(ellipse at 50% 50%, transparent 35%, var(--hero-overlay-start) 70%, var(--hero-overlay-end) 100%);
}

/* eraFrame: period frame */
body[data-option-eraFrame="1"] [data-theme="tintype"] .hero {
  border: 16px solid var(--bg-4);
  box-shadow: inset 0 0 0 3px var(--bg-3), 0 0 0 4px var(--bg-2), 0 0 0 6px var(--bg-4);
}
body[data-option-eraFrame="1"] [data-theme="tintype"] .hero-content {
  padding: 2rem;
}

/* ============================================================
   THEME 26: HOLGA — Holga玩具
   Plastic lens square format. Toy camera, dreamy soft.
   ============================================================ */
[data-theme="holga"] {
  --font-display: 'Nanum Pen Script', cursive;
  --font-body: 'Inter', sans-serif;
  --transition: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- plastic: plastic lens colors --- */
[data-theme="holga"][data-color="plastic"] {
  --bg: #f0f0f8;
  --bg-2: #e0e0ec;
  --bg-3: #ccccdc;
  --bg-4: #b3b3c8;
  --text: #2a2a38;
  --text-dim: #8888a0;
  --text-mid: #555568;
  --accent: #ff6688;
  --accent-glow: rgba(255, 102, 136, 0.35);
  --white: #f8f8fc;
  --border: rgba(42, 42, 56, 0.1);
  --hero-overlay-start: rgba(30, 30, 40, 0.5);
  --hero-overlay-mid: rgba(50, 40, 50, 0.35);
  --hero-overlay-end: rgba(30, 30, 40, 0.7);
  --nav-scrolled-bg: rgba(240, 240, 248, 0.92);
}

/* --- toy: toy camera bright --- */
[data-theme="holga"][data-color="toy"] {
  --bg: #f5f0e8;
  --bg-2: #f0e4d0;
  --bg-3: #e8d4b0;
  --bg-4: #dcc090;
  --text: #3a2818;
  --text-dim: #c0a060;
  --text-mid: #7a5830;
  --accent: #ff8800;
  --accent-glow: rgba(255, 136, 0, 0.4);
  --white: #faf5ec;
  --border: rgba(58, 40, 24, 0.12);
  --hero-overlay-start: rgba(40, 25, 12, 0.5);
  --hero-overlay-mid: rgba(80, 45, 15, 0.35);
  --hero-overlay-end: rgba(40, 25, 12, 0.7);
  --nav-scrolled-bg: rgba(245, 240, 232, 0.92);
}

/* --- dream: dreamy soft --- */
[data-theme="holga"][data-color="dream"] {
  --bg: #f5f0f5;
  --bg-2: #ece0ec;
  --bg-3: #e0cce0;
  --bg-4: #d0b0d0;
  --text: #3a283a;
  --text-dim: #a880a8;
  --text-mid: #6b486b;
  --accent: #cc66cc;
  --accent-glow: rgba(204, 102, 204, 0.35);
  --white: #faf5fa;
  --border: rgba(58, 40, 58, 0.1);
  --hero-overlay-start: rgba(40, 25, 40, 0.5);
  --hero-overlay-mid: rgba(60, 35, 60, 0.35);
  --hero-overlay-end: rgba(40, 25, 40, 0.7);
  --nav-scrolled-bg: rgba(245, 240, 245, 0.92);
}

[data-theme="holga"] body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
}

[data-theme="holga"] .hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 10vw, 8rem);
  letter-spacing: 0.02em;
}

[data-theme="holga"] .nav-logo {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.8rem;
}

/* squareFormat: square format crop */
body[data-option-squareFormat="1"] [data-theme="holga"] .hero-bg {
  clip-path: inset(0 10%);
}
body[data-option-squareFormat="1"] [data-theme="holga"] .hero-overlay {
  background: radial-gradient(ellipse at center, transparent 30%, var(--hero-overlay-start) 60%, var(--hero-overlay-end) 100%);
}
body[data-option-squareFormat="1"] [data-theme="holga"] .hero-content {
  max-width: 60vw;
  margin: 0 auto;
}

/* plasticVignette: plastic lens vignette */
body[data-option-plasticVignette="1"] [data-theme="holga"] .hero-overlay {
  background: radial-gradient(ellipse at center, transparent 20%, rgba(0,0,0,0.15) 45%, var(--hero-overlay-start) 65%, var(--hero-overlay-end) 100%);
}
body[data-option-plasticVignette="1"] [data-theme="holga"] .hero-bg {
  filter: brightness(0.9) contrast(0.95) saturate(1.1);
}

/* softCorner: soft corner blur */
body[data-option-softCorner="1"] [data-theme="holga"] .hero-bg {
  filter: blur(0px);
  mask-image: radial-gradient(ellipse at center, black 55%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 55%, transparent 85%);
}
body[data-option-softCorner="1"] [data-theme="holga"] .hero-overlay {
  background: radial-gradient(ellipse at center, transparent 40%, var(--hero-overlay-start) 70%, var(--hero-overlay-end) 100%);
}

/* ============================================================
   THEME 27: PANORAMA — 全景宽幅
   Ultra-wide cinematic sweep. Letterbox, horizon, wide.
   ============================================================ */
[data-theme="panorama"] {
  --font-display: 'Cormorant SC', serif;
  --font-body: 'Inter', sans-serif;
  --transition: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- alpenglow: alpine glow --- */
[data-theme="panorama"][data-color="alpenglow"] {
  --bg: #0a0e14;
  --bg-2: #101820;
  --bg-3: #182230;
  --bg-4: #223040;
  --text: #d0d8e8;
  --text-dim: #304058;
  --text-mid: #8090b0;
  --accent: #ff8866;
  --accent-glow: rgba(255, 136, 102, 0.35);
  --white: #e0e8f0;
  --border: rgba(208, 216, 232, 0.1);
  --hero-overlay-start: rgba(8, 10, 16, 0.8);
  --hero-overlay-mid: rgba(15, 20, 30, 0.5);
  --hero-overlay-end: rgba(8, 10, 16, 0.92);
  --nav-scrolled-bg: rgba(10, 14, 20, 0.92);
}

/* --- seascape: ocean horizon --- */
[data-theme="panorama"][data-color="seascape"] {
  --bg: #051020;
  --bg-2: #081830;
  --bg-3: #0c2040;
  --bg-4: #102a50;
  --text: #a0d0f0;
  --text-dim: #103060;
  --text-mid: #4088c0;
  --accent: #44ccff;
  --accent-glow: rgba(68, 204, 255, 0.35);
  --white: #c8e8f8;
  --border: rgba(160, 208, 240, 0.1);
  --hero-overlay-start: rgba(4, 12, 24, 0.85);
  --hero-overlay-mid: rgba(5, 18, 35, 0.55);
  --hero-overlay-end: rgba(4, 12, 24, 0.95);
  --nav-scrolled-bg: rgba(5, 16, 32, 0.92);
}

/* --- desert: desert vista --- */
[data-theme="panorama"][data-color="desert"] {
  --bg: #0f0a05;
  --bg-2: #1a120a;
  --bg-3: #281c10;
  --bg-4: #382818;
  --text: #e8d8b8;
  --text-dim: #604828;
  --text-mid: #b08850;
  --accent: #ff9930;
  --accent-glow: rgba(255, 153, 48, 0.4);
  --white: #f0e4cc;
  --border: rgba(232, 216, 184, 0.1);
  --hero-overlay-start: rgba(12, 8, 4, 0.82);
  --hero-overlay-mid: rgba(25, 15, 5, 0.55);
  --hero-overlay-end: rgba(12, 8, 4, 0.93);
  --nav-scrolled-bg: rgba(15, 10, 5, 0.92);
}

[data-theme="panorama"] body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text);
}

[data-theme="panorama"] .hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: clamp(2.5rem, 8vw, 6rem);
}

[data-theme="panorama"] .nav-logo {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* letterbox: letterbox bars */
body[data-option-letterbox="1"] [data-theme="panorama"] .hero-overlay {
  background: 
    linear-gradient(to bottom, 
      var(--hero-overlay-start) 0%, 
      var(--hero-overlay-start) 12%, 
      transparent 12%,
      transparent 88%,
      var(--hero-overlay-start) 88%,
      var(--hero-overlay-start) 100%);
}
body[data-option-letterbox="1"] [data-theme="panorama"] .hero-bg {
  filter: brightness(1.05) contrast(1.15);
}
body[data-option-letterbox="1"] [data-theme="panorama"] .hero {
  aspect-ratio: 21/9;
  max-height: 70vh;
}

/* wideSweep: wide sweep animation */
body[data-option-wideSweep="1"] [data-theme="panorama"] .hero-bg {
  animation: panoramaSweep 20s ease-in-out infinite alternate;
  background-size: 150% auto;
  background-position: left center;
}
@keyframes panoramaSweep {
  from { background-position: left center; }
  to { background-position: right center; }
}
body[data-option-wideSweep="1"] [data-theme="panorama"] .hero-overlay {
  background: linear-gradient(90deg, 
    var(--hero-overlay-start) 0%, 
    transparent 15%, 
    transparent 85%, 
    var(--hero-overlay-end) 100%);
}

/* horizonLine: horizon guide line */
body[data-option-horizonLine="1"] [data-theme="panorama"] .hero-overlay {
  background: 
    linear-gradient(to bottom, 
      transparent calc(50% - 1px), 
      var(--accent) calc(50% - 1px), 
      var(--accent) calc(50% + 1px), 
      transparent calc(50% + 1px)),
    linear-gradient(160deg, var(--hero-overlay-start) 0%, var(--hero-overlay-mid) 50%, var(--hero-overlay-end) 100%);
}
body[data-option-horizonLine="1"] [data-theme="panorama"] .hero-bg {
  filter: contrast(1.2) saturate(1.1);
}
body[data-option-horizonLine="1"] [data-theme="panorama"] .hero-content {
  margin-top: -5vh;
}

/* ============================================================================
   END OF THEMES V5 — 27 complete photography themes
   ============================================================================ */