/* ================================================================
   光影拾光 H5 Premium · Luxury Design System
   设计理念：克制的高级感 — 少即是多，每一像素都有意图
   ================================================================ */

/* ── Design Tokens ── */
:root {
  --gold: #d4a574;
  --gold-light: #e8c49a;
  --gold-dark: #b8895a;
  --gold-dim: rgba(212,167,116,.12);
  --bg-deep: #080808;
  --bg: #0a0a0a;
  --bg-surface: #0f0f0f;
  --bg-elevated: #141414;
  --bg-glass: rgba(20,20,20,.7);
  --border-subtle: rgba(255,255,255,.04);
  --border-gold: rgba(212,167,116,.08);
  --text-primary: rgba(255,255,255,.88);
  --text-secondary: rgba(255,255,255,.58);
  --text-muted: rgba(255,255,255,.35);
  --text-gold: #d4a574;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
  --ease-out-quart: cubic-bezier(.25,1,.5,1);
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --ease-out-quint: cubic-bezier(.22,1,.36,1);
  --ease-in-quart: cubic-bezier(.5,0,.75,0);
  --spring-soft: cubic-bezier(.34,1.56,.64,1);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.6);
  --shadow-gold: 0 2px 20px rgba(212,167,116,.08);
}

/* ── Reset & Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-tap-highlight-color:transparent;scroll-behavior:smooth;
  background:var(--bg-deep);
}
body{
  font-family:-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:14px;line-height:1.7;min-height:100vh;min-height:100dvh;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  background:var(--bg);color:var(--text-primary);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(212,167,116,.015) 0%, transparent 70%),
    radial-gradient(ellipse at 80% 20%, rgba(212,167,116,.008) 0%, transparent 50%);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
img{max-width:100%;display:block}
button{cursor:pointer;border:none;font:inherit;outline:none;background:none}
input,textarea,select{font:inherit;outline:none}
/* v-cloak 不再使用 — 由 splash 遮罩完全替代 */

/* ── Scrollbar ── */
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.06);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.1)}

/* ── Mobile Scroll Enhancement ── */
#app{min-height:100vh;min-height:100dvh}
.cat-content,.adm-content,.cat-tree,.adm-tree,.modal-box,.photo-grid{
  -webkit-overflow-scrolling:touch;
}

/* ── Selection ── */
::selection{background:rgba(212,167,116,.2);color:#fff}

/* ── Focus Visible ── */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:2px}
button:focus-visible,a:focus-visible,[role="button"]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ── Reduced Motion ── */
@media(prefers-reduced-motion:reduce){
  .splash-ring,.spin{animation-duration:.01ms!important;animation-iteration-count:1!important}
  .page-enter-active,.page-leave-active,.fade-enter-active,.fade-leave-active{transition-duration:.01ms!important}
  .btn-p:not(:disabled),.sk-item::after{animation:none!important}
  .float{animation:none!important}
  html{scroll-behavior:auto}
}

/* ================================================================
   Splash Screen
   ================================================================ */
.splash-ring{
  width:48px;height:48px;
  border:1.5px solid var(--gold-dim);
  border-top-color:var(--gold);
  border-radius:50%;
  animation:splash-spin .9s linear infinite;
}
@keyframes splash-spin{to{transform:rotate(360deg)}}

/* ================================================================
   Typography System
   ================================================================ */
:root{--font-serif:Georgia,'Songti SC','STSong',serif;--font-sans:-apple-system,'PingFang SC','Microsoft YaHei','Hiragino Sans GB',sans-serif}
h1{font-family:var(--font-serif);font-size:32px;font-weight:200;letter-spacing:.2em;color:var(--gold);line-height:1.3}
h2{font-family:var(--font-serif);font-size:20px;font-weight:300;letter-spacing:.12em;color:var(--text-primary)}
h3{font-size:16px;font-weight:400;letter-spacing:.08em;color:var(--text-secondary)}

.text-xs{font-size:11px;letter-spacing:.04em}
.text-sm{font-size:13px;letter-spacing:.03em}
.text-base{font-size:14px}
.text-lg{font-size:17px;letter-spacing:.02em}
.text-xl{font-size:22px;font-weight:300;letter-spacing:.08em}
.text-gold{color:var(--gold)}
.text-muted{color:var(--text-muted)}
.font-light{font-weight:300}.font-normal{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}

/* ================================================================
   Button System
   ================================================================ */
.btn{
  padding:10px 22px;border-radius:var(--radius-sm);
  font-size:13px;font-weight:500;letter-spacing:.04em;
  transition:all .25s var(--ease-out);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  position:relative;overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:scale(.97)}
/* Primary — Gold */
.btn-p{
  background:linear-gradient(135deg,var(--gold),var(--gold-light));
  color:var(--bg-deep);font-weight:600;
  box-shadow:0 2px 20px rgba(212,167,116,.18),inset 0 1px 0 rgba(255,255,255,.1);
  transition:all .25s var(--ease-out-quart);
}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(212,167,116,.35),inset 0 1px 0 rgba(255,255,255,.15)}
.btn-p:active{transform:scale(.96) translateY(0);box-shadow:0 1px 8px rgba(212,167,116,.12);transition-duration:.1s}
.btn-p:disabled{opacity:.35;pointer-events:none;filter:grayscale(30%)}
/* Primary Outline — 参考UI金色描边按钮 */
.btn-po{
  background:transparent;color:var(--gold);
  border:1px solid rgba(212,167,116,.3);
  box-shadow:inset 0 1px 0 rgba(212,167,116,.05);
}
.btn-po:hover{background:rgba(212,167,116,.06);border-color:rgba(212,167,116,.5);color:var(--gold-light)}

/* Secondary */
.btn-s{background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border-subtle)}
.btn-s:hover{background:#1a1a1a;color:var(--text-primary);border-color:rgba(255,255,255,.08)}

/* Danger */
.btn-d{background:rgba(220,60,60,.08);color:#f88;border:1px solid rgba(220,60,60,.1)}
.btn-d:hover{background:rgba(220,60,60,.15);border-color:rgba(220,60,60,.2)}

/* Ghost */
.btn-ghost{background:transparent;color:var(--text-muted);border:1px solid var(--border-subtle)}
.btn-ghost:hover{color:var(--gold);border-color:var(--border-gold)}

/* Sizes */
.btn-lg{padding:14px 34px;font-size:15px;border-radius:var(--radius);letter-spacing:.06em}
.btn-block{display:flex;width:100%}

/* ================================================================
   Glass & Card System
   ================================================================ */
.glass{
  background:var(--bg-glass);
  backdrop-filter:blur(40px) saturate(180%);
  -webkit-backdrop-filter:blur(40px) saturate(180%);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.glass-light{
  background:rgba(20,20,20,.4);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(255,255,255,.03);
}

.card{
  background:var(--bg-surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .35s;
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 0 1px var(--border-gold);
  border-color:rgba(212,167,116,.1);
}

/* ================================================================
   Page Transitions
   ================================================================ */
.page-enter-active{transition:opacity .4s var(--ease-out-expo),transform .4s var(--ease-out-expo)}
.page-leave-active{transition:opacity .2s var(--ease-out-expo),transform .2s var(--ease-out-expo)}
.page-enter-from{opacity:0;transform:translateY(16px) scale(.98)}
.page-leave-to{opacity:0;transform:translateY(-12px) scale(.98)}
.fade-enter-active,.fade-leave-active{transition:opacity .3s}
.fade-enter-from,.fade-leave-to{opacity:0}

/* Toast slide */
.toast-slide-enter-active{transition:all .35s var(--ease-out-expo)}
.toast-slide-leave-active{transition:all .2s ease-in}
.toast-slide-enter-from{opacity:0;transform:translate(-50%,20px)}
.toast-slide-leave-to{opacity:0;transform:translate(-50%,-10px)}

/* ── 全局优化 ── */
html{scroll-behavior:smooth}
/* 按钮按压缩放反馈 */
button:active{transform:scale(.96)!important;transition-duration:.08s!important}
/* 卡片悬停微抬 */
.cf-done-card,.order-card,.album-card,.result-card{transition:transform .3s var(--ease-out-quart),box-shadow .3s}
.cf-done-card:hover,.order-card:hover,.album-card:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(0,0,0,.3)}
/* 输入框聚焦发光 */
.apt-input:focus,.code-input:focus,.cf-note:focus{box-shadow:0 0 0 3px var(--gold-dim),0 0 20px rgba(212,167,116,.08);transition:box-shadow .35s}
/* 交错入场动画 */
@keyframes stagger-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.stagger>*{animation:stagger-in .45s var(--ease-out-expo) both}
.stagger>*:nth-child(1){animation-delay:.05s}
.stagger>*:nth-child(2){animation-delay:.1s}
.stagger>*:nth-child(3){animation-delay:.15s}
.stagger>*:nth-child(4){animation-delay:.2s}
.stagger>*:nth-child(5){animation-delay:.25s}
.stagger>*:nth-child(6){animation-delay:.3s}
.stagger>*:nth-child(7){animation-delay:.35s}
.stagger>*:nth-child(8){animation-delay:.4s}

/* ================================================================
   Landing — 全屏欢迎页（参考击剑影像风格）
   ================================================================ */
.landing{
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  justify-content:space-between;align-items:center;
  background:linear-gradient(to bottom,#08080a 0%,#0c1018 50%,#0a0d14 100%);
  position:relative;overflow:hidden;padding:0 28px;text-align:center;
}
/* 背景光晕 */
.landing::before{
  content:'';position:absolute;top:-40%;left:50%;transform:translateX(-50%);
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(212,167,116,.06) 0%,transparent 60%);
  animation:landing-glow 5s ease-in-out infinite alternate;
}
@keyframes landing-glow{from{opacity:.5;transform:translateX(-50%) scale(.9)}to{opacity:1;transform:translateX(-50%) scale(1.1)}}
/* 对角线条纹 */
.landing::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent,transparent 2px,rgba(255,255,255,.005) 2px,rgba(255,255,255,.005) 4px);
  pointer-events:none;opacity:.3;
}
/* Logo */
.landing-logo{position:absolute;top:24px;left:24px;display:flex;align-items:center;gap:8px;z-index:2}
.landing-logo-icon{font-size:22px;opacity:.6}
.landing-logo-text{font-size:13px;color:rgba(255,255,255,.5);letter-spacing:.15em;font-weight:300}
/* 主体 */
.landing-body{position:relative;z-index:1;padding-top:20vh}
.landing-year{font-family:var(--font-serif);font-size:clamp(72px,15vw,96px);font-weight:100;letter-spacing:.06em;
  color:var(--gold);opacity:.12;line-height:1;margin-bottom:-20px;
  animation:landing-year-in .9s var(--ease-out-expo) both;}
@keyframes landing-year-in{from{opacity:0;letter-spacing:.2em;transform:translateY(20px)}to{opacity:.12;letter-spacing:.06em;transform:translateY(0)}}
.landing-divider{width:50px;height:1px;background:var(--gold);opacity:.4;margin:28px auto}
.landing-title{font-family:var(--font-serif);font-size:clamp(26px,5.5vw,32px);font-weight:200;letter-spacing:.15em;
  color:rgba(255,255,255,.85);margin:0 0 8px;line-height:1.35;
  animation:landing-title-in .7s .15s var(--ease-out-expo) both;}
.landing-title-br{display:block;opacity:.7}
@keyframes landing-title-in{from{opacity:0;letter-spacing:.35em;transform:translateY(12px)}to{opacity:1;letter-spacing:.15em;transform:translateY(0)}}
.landing-sub{font-size:clamp(11px,2.2vw,13px);color:rgba(255,255,255,.3);letter-spacing:.15em;
  max-width:320px;margin:0 auto;line-height:1.5;
  animation:landing-sub-in .7s .25s var(--ease-out-expo) both;}
.landing-sub-pipe{opacity:.4;margin:0 4px}
@keyframes landing-sub-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* 按钮 */
.landing-footer{padding-bottom:clamp(60px,15vh,100px);position:relative;z-index:1}
.landing-btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:16px 40px;background:var(--gold);color:var(--bg-deep);
  border:none;border-radius:60px;font-size:15px;font-weight:600;letter-spacing:.08em;
  cursor:pointer;transition:all .35s var(--ease-out-quart);
  box-shadow:0 4px 30px rgba(212,167,116,.25);
  animation:landing-btn-in .6s .4s var(--ease-out-expo) both;
}
@keyframes landing-btn-in{from{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.landing-btn:hover{transform:translateY(-2px);box-shadow:0 8px 40px rgba(212,167,116,.4)}
.landing-btn:active{transform:scale(.96);box-shadow:0 2px 12px rgba(212,167,116,.15);transition-duration:.1s}
.landing-btn-arrow{font-size:18px;transition:transform .3s}
.landing-btn:hover .landing-btn-arrow{transform:translateX(4px)}
/* 首页 outline 按钮 */
.landing-btn-outline{
  padding:10px 32px;border:1px solid rgba(255,255,255,.12);border-radius:60px;
  background:transparent;color:rgba(255,255,255,.4);font-size:13px;letter-spacing:.1em;
  cursor:pointer;transition:all .3s;
}
.landing-btn-outline:hover{color:var(--gold);border-color:var(--gold)}

/* ================================================================
   Appointment — 拍摄预约
   ================================================================ */
.apt-screen{
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  align-items:center;padding:0 24px 32px;text-align:center;
}
.apt-top{align-self:stretch;padding:14px 0;text-align:left}
.apt-back{font-size:13px;color:var(--text-muted);cursor:pointer;transition:color .2s;letter-spacing:.08em}
.apt-back:hover{color:var(--gold)}
.apt-hero{padding:clamp(12px,2.5vh,24px) 0 clamp(10px,2vh,16px);width:100%}
.apt-eyebrow{font-size:18px;color:var(--gold);font-weight:600;letter-spacing:.12em;margin:0 0 8px}
.apt-title{font-size:28px;font-weight:300;color:var(--text-primary);letter-spacing:.1em;margin:0 0 4px}
.apt-sub{font-size:13px;color:var(--text-muted);margin:0;letter-spacing:.04em}
.apt-form{width:100%;max-width:320px;margin-top:16px}
.apt-field{margin-bottom:14px;text-align:left}
.apt-label{display:block;font-size:13px;color:var(--text-secondary);margin-bottom:6px;letter-spacing:.04em}
.apt-input{
  width:100%;padding:14px 16px;border-radius:var(--radius);font-size:16px;
  border:1px solid rgba(255,255,255,.08);background:var(--bg-elevated);color:var(--text-primary);
  transition:border-color .3s;outline:none;
}
.apt-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-dim)}
.apt-input::placeholder{color:rgba(255,255,255,.15)}
.apt-btn{
  width:100%;padding:15px 0;margin-top:8px;border:none;border-radius:60px;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:var(--bg-deep);font-size:15px;font-weight:600;letter-spacing:.06em;
  cursor:pointer;transition:all .35s var(--ease-out-expo);
  box-shadow:0 4px 20px rgba(212,167,116,.2);
}
.apt-btn:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(212,167,116,.35)}
.apt-btn:active{transform:scale(.96)}
.apt-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.apt-hint{font-size:12px;color:var(--text-muted);margin-top:16px;letter-spacing:.04em;line-height:1.6}
.apt-wx{font-size:13px;color:var(--gold);margin-top:8px;letter-spacing:.04em}
/* 添加微信按钮 */
.apt-wx-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 28px;margin-top:6px;border:1px solid rgba(212,167,116,.25);border-radius:60px;
  background:rgba(212,167,116,.06);color:var(--gold);font-size:13px;letter-spacing:.08em;
  cursor:pointer;transition:all .3s;
}
.apt-wx-btn:hover{background:rgba(212,167,116,.12);border-color:var(--gold)}
/* 二维码弹窗 */
.apt-qr-overlay{
  position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.85);
  display:flex;align-items:center;justify-content:center;
  animation:fade-in .25s;
}
.apt-qr-box{
  background:#1a1a1a;border:1px solid rgba(255,255,255,.08);border-radius:16px;
  padding:24px;text-align:center;max-width:300px;width:90%;
  animation:scale-in .3s var(--ease-out);
}
.apt-qr-img{width:200px;height:200px;border-radius:8px;display:block;margin:0 auto}
.apt-qr-id{font-size:14px;color:var(--gold);margin:16px 0;letter-spacing:.04em}
.apt-qr-close{
  padding:8px 24px;border:1px solid rgba(255,255,255,.1);border-radius:60px;
  background:transparent;color:rgba(255,255,255,.5);font-size:13px;cursor:pointer;
  transition:all .2s;
}
.apt-qr-close:hover{color:#fff;border-color:rgba(255,255,255,.3)}
/* 成功页 */
.apt-screen-ok{justify-content:center;padding-top:20vh}
.apt-ok-icon{width:64px;height:64px;border-radius:50%;border:2px solid var(--gold);display:flex;
  align-items:center;justify-content:center;color:var(--gold);font-size:28px;margin-bottom:24px}
.apt-ok-title{font-size:22px;color:var(--text-primary);letter-spacing:.1em;margin:0 0 12px}
.apt-ok-desc{font-size:14px;color:var(--text-muted);margin:0 0 20px;line-height:1.8;letter-spacing:.04em}
.apt-ok-wx{font-size:14px;color:var(--gold);margin-bottom:32px}
.apt-btn-outline{background:transparent;color:var(--gold);border:1px solid var(--gold);box-shadow:none}

/* ================================================================
   Home v3 — 照片墙首页
   ================================================================ */
.home-v3{
  min-height:100vh;min-height:100dvh;
  background:linear-gradient(175deg,#08080a 0%,#0c0c12 50%,#0a0e16 100%);
  position:relative;overflow:hidden;
}
.home-v3::before{
  content:'';position:absolute;top:-30%;left:50%;transform:translateX(-50%);
  width:700px;height:700px;
  background:radial-gradient(ellipse,rgba(212,167,116,.025) 0%,transparent 55%);
  pointer-events:none;animation:home-v3-glow 7s ease-in-out infinite alternate;
}
@keyframes home-v3-glow{from{opacity:.5}to{opacity:1}}

/* 标题区 */
.home-v3-hero{
  text-align:center;padding:clamp(28px,6vh,48px) 20px clamp(16px,3vh,28px);
  position:relative;z-index:1;
  animation:home-v3-hero-in .6s var(--ease-out-expo) both;
}
@keyframes home-v3-hero-in{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
.home-v3-tag{
  font-size:10px;color:var(--gold);letter-spacing:.35em;margin-bottom:10px;
  font-weight:500;
}
.home-v3-title{
  font-family:var(--font-serif,Georgia,serif);
  font-size:clamp(28px,5vw,36px);font-weight:200;letter-spacing:.15em;
  color:rgba(255,255,255,.9);margin:0 0 6px;
}
.home-v3-sub{
  font-size:clamp(12px,2.2vw,14px);color:rgba(255,255,255,.28);letter-spacing:.08em;margin:0;
}

/* 照片墙 */
.home-v3-wall{
  display:grid;grid-template-columns:1fr 1fr 1fr;
  gap:clamp(4px,1vw,8px);
  padding:0 clamp(8px,2vw,16px);
  max-width:960px;margin:0 auto;
  position:relative;z-index:1;
}
.home-v3-col{display:flex;flex-direction:column;gap:clamp(4px,1vw,8px)}
.home-v3-col:nth-child(1) .home-v3-item{animation:home-v3-item-in .45s .05s var(--ease-out-expo) both}
.home-v3-col:nth-child(2) .home-v3-item{animation:home-v3-item-in .45s .15s var(--ease-out-expo) both}
.home-v3-col:nth-child(3) .home-v3-item{animation:home-v3-item-in .45s .25s var(--ease-out-expo) both}
@keyframes home-v3-item-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

.home-v3-item{
  border-radius:6px;overflow:hidden;position:relative;
  cursor:pointer;transition:transform .35s var(--ease-out-quart),box-shadow .35s;
  background:var(--bg-elevated);
  aspect-ratio:3/4;
}
.home-v3-item:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.home-v3-item:active{transform:scale(.97)}
.home-v3-item.tall{aspect-ratio:2/3}
.home-v3-item.wide{aspect-ratio:4/3}
.home-v3-item img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease-out-expo);
}
.home-v3-item:hover img{transform:scale(1.04)}
.home-v3-item-cap{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(0,0,0,.7));
  padding:16px 8px 6px;
}
.home-v3-item-cap span{
  font-size:10px;color:rgba(255,255,255,.75);letter-spacing:.06em;
  font-weight:500;text-shadow:0 1px 3px rgba(0,0,0,.4);
}

/* 加载 */
.home-v3-loading{
  display:flex;justify-content:center;padding:60px 0;
}
.home-v3-loading .spin{
  width:32px;height:32px;border:1.5px solid rgba(212,167,116,.12);
  border-top-color:#d4a574;border-radius:50%;animation:spin .8s linear infinite;
}

/* 底部 */
.home-v3-footer{
  display:flex;justify-content:center;gap:12px;flex-wrap:wrap;
  padding:clamp(24px,5vh,44px) 20px clamp(40px,8vh,64px);
  position:relative;z-index:1;
}
.home-v3-btn-outline{
  padding:12px 28px;border:1px solid rgba(255,255,255,.1);border-radius:60px;
  background:transparent;color:rgba(255,255,255,.55);font-size:13px;letter-spacing:.06em;
  cursor:pointer;transition:all .3s;
  animation:home-v3-btn-in .5s .3s var(--ease-out-expo) both;
}
.home-v3-btn-outline:hover{
  border-color:var(--gold);color:var(--gold);
  box-shadow:0 4px 20px rgba(212,167,116,.08);
}
.home-v3-btn-primary{
  padding:12px 28px;border:none;border-radius:60px;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:var(--bg-deep);font-size:13px;font-weight:600;letter-spacing:.06em;
  cursor:pointer;transition:all .35s var(--ease-out-quart);
  box-shadow:0 4px 20px rgba(212,167,116,.2);
  animation:home-v3-btn-in .5s .4s var(--ease-out-expo) both;
}
.home-v3-btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(212,167,116,.35)}
.home-v3-btn-primary:active{transform:scale(.96)}
@keyframes home-v3-btn-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.home-v3-btn-arr{margin-left:4px;transition:transform .3s}
.home-v3-btn-outline:hover .home-v3-btn-arr,
.home-v3-btn-primary:hover .home-v3-btn-arr{transform:translateX(3px)}

/* ── 保留旧 Hero 样式（兼容）── */
.hero{
  padding:100px 24px 64px;text-align:center;
  position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;top:-10%;left:50%;transform:translateX(-50%);
  width:360px;height:360px;
  background:radial-gradient(circle,rgba(212,167,116,.08) 0%,transparent 70%);
  pointer-events:none;animation:hero-glow 4s ease-in-out infinite alternate;
}
@keyframes hero-glow{from{opacity:.6;transform:translateX(-50%) scale(.95)}to{opacity:1;transform:translateX(-50%) scale(1.05)}}
.hero h1{font-family:var(--font-serif);font-size:42px;font-weight:100;letter-spacing:.3em;color:var(--gold);margin-bottom:8px;line-height:1.1;
  animation:hero-title .8s var(--ease-out-expo) both;}
@keyframes hero-title{from{opacity:0;letter-spacing:.5em;transform:translateY(4px)}to{opacity:1;letter-spacing:.3em;transform:translateY(0)}}
.hero .divider{width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:0 auto 16px}
.hero .sub{font-size:11px;letter-spacing:.4em;color:var(--text-muted);margin-bottom:16px;text-transform:uppercase}
.hero .desc{font-size:14px;color:var(--text-secondary);margin-top:20px;line-height:2;letter-spacing:.06em;font-weight:300}
.hero .cta{margin-top:32px}
.hero-year{font-size:64px;font-weight:100;letter-spacing:.08em;color:var(--gold);opacity:.15;line-height:1;margin-bottom:-16px;pointer-events:none;user-select:none}

/* ================================================================
   Samples Page — 第二页样片预览
   ================================================================ */
.samples-page{
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  background:var(--bg);position:relative;overflow:hidden;
}
/* 顶部导航 */
.samples-top{flex-shrink:0;padding:14px 20px;display:flex;align-items:center;z-index:2}
.samples-back{font-size:12px;color:var(--text-muted);cursor:pointer;transition:color .3s;letter-spacing:.08em;text-transform:uppercase}
.samples-back:hover{color:var(--gold)}
/* 标题区 */
.samples-hero{flex-shrink:0;text-align:center;padding:24px 20px 12px;z-index:1;
  animation:samples-hero-in .6s var(--ease-out-expo) both}
@keyframes samples-hero-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.samples-hero-tag{font-size:9px;letter-spacing:.22em;color:var(--gold);opacity:.5;margin-bottom:8px}
.samples-hero-title{font-size:24px;font-weight:200;letter-spacing:.12em;color:var(--text-primary);margin:0 0 6px;line-height:1.2}
.samples-hero-sub{font-size:12px;color:var(--text-muted);letter-spacing:.06em;margin:0;opacity:.55}
/* 瀑布流 */
.samples-body{
  flex:1;display:flex;align-items:flex-start;justify-content:center;padding:8px 16px;overflow-y:auto;
  animation:samples-body-in .5s .2s var(--ease-out-expo) both}
@keyframes samples-body-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.samples-waterfall{display:flex;gap:8px;width:100%;max-width:560px}
.samples-col{flex:1;display:flex;flex-direction:column;gap:8px}
.samples-col:nth-child(1){margin-top:0}
.samples-col:nth-child(2){margin-top:56px}
.samples-col:nth-child(3){margin-top:28px}
.samples-item img{aspect-ratio:3/4}
.samples-item.xtall img{aspect-ratio:2/3}
.samples-item.tall img{aspect-ratio:3/4}
.samples-item.wide img{aspect-ratio:16/10}
.samples-item.xwide img{aspect-ratio:16/9}
.samples-item{
  border-radius:10px;overflow:hidden;cursor:pointer;position:relative;
  border:1px solid rgba(255,255,255,.04);
  transition:transform .35s var(--ease-out-quart),border-color .35s,box-shadow .35s;
  animation:samples-item-in .5s var(--ease-out-expo) both;
  animation-delay:calc(var(--si,0)*55ms + 150ms);
  --overlay-opacity:0;
}
@keyframes samples-item-in{from{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.samples-item:hover{
  transform:translateY(-3px);
  border-color:rgba(212,167,116,.18);
  box-shadow:0 12px 40px rgba(0,0,0,.35),0 0 0 1px rgba(212,167,116,.06) inset;
}
.samples-item:active{transform:scale(.97);transition-duration:.12s}
.samples-item img{width:100%;display:block;object-fit:cover;aspect-ratio:auto}
.samples-item-err{
  width:100%;aspect-ratio:3/4;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.03);color:rgba(255,255,255,.25);
  font-size:11px;letter-spacing:.04em;
}
/* 双列错落尺寸 */
.samples-item img{aspect-ratio:4/5}
.samples-item.tall img{aspect-ratio:3/4}
.samples-item.wide img{aspect-ratio:16/10}
/* Hover 叠加层 */
.samples-item-overlay{
  position:absolute;inset:0;display:flex;align-items:flex-end;padding:10px;
  background:linear-gradient(to top,rgba(0,0,0,.55) 0%,transparent 55%);
  opacity:0;transition:opacity .35s var(--ease-out-quart);
}
.samples-item:hover .samples-item-overlay,
.samples-item:active .samples-item-overlay{opacity:1}
.samples-item-tag{
  font-size:10px;letter-spacing:.1em;color:rgba(255,255,255,.85);
  padding:4px 10px;background:rgba(212,167,116,.18);
  border-radius:4px;backdrop-filter:blur(8px);
}
/* 底部按钮 */
.samples-actions{flex-shrink:0;padding:20px 20px 40px;display:flex;flex-direction:column;gap:10px;z-index:2;
  animation:samples-actions-in .5s .35s var(--ease-out-expo) both}
@keyframes samples-actions-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.samples-btn-primary{
  padding:15px 28px;background:var(--gold);color:var(--bg-deep);
  border:none;border-radius:60px;font-size:15px;font-weight:600;letter-spacing:.06em;
  cursor:pointer;text-align:center;transition:all .3s var(--ease-out-quart);
  box-shadow:0 4px 24px rgba(212,167,116,.18);
}
.samples-btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 36px rgba(212,167,116,.28)}
.samples-btn-primary:active{transform:scale(.97);transition-duration:.1s}
.samples-btn-outline{
  padding:13px 28px;background:transparent;color:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.08);border-radius:60px;
  font-size:14px;font-weight:400;letter-spacing:.06em;
  cursor:pointer;text-align:center;transition:all .3s var(--ease-out-quart);
}
.samples-btn-outline:hover{border-color:rgba(212,167,116,.25);color:var(--gold);background:rgba(212,167,116,.04)}

/* ================================================================
   Section Headers
   ================================================================ */
.section{padding:0 18px 32px}
.section-hd{
  font-size:12px;color:var(--text-muted);
  letter-spacing:.2em;margin-bottom:20px;padding-left:6px;
  text-transform:uppercase;display:flex;align-items:center;gap:10px;
}
.section-hd::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,rgba(212,167,116,.15),transparent);
}

/* ================================================================
   Category Row (Home)
   ================================================================ */
.cat-row{display:flex;gap:14px;overflow-x:auto;padding:4px 0 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cat-row::-webkit-scrollbar{display:none}
.cat-card-item{flex:0 0 80px;text-align:center;cursor:pointer;transition:transform .35s var(--ease-out-quart);
  animation:cat-in .5s var(--ease-out-expo) both;
  animation-delay:calc(var(--ai,0)*80ms)
}
@keyframes cat-in{from{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
.cat-card-item:active{transform:scale(.94)}
.cat-card-img{
  width:80px;height:80px;border-radius:var(--radius-lg);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-elevated);
  border:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color .3s,box-shadow .3s,transform .3s;
}
.cat-card-item:hover .cat-card-img{border-color:rgba(212,167,116,.3);box-shadow:0 8px 24px rgba(0,0,0,.3),0 0 0 1px rgba(212,167,116,.1);transform:translateY(-2px)}
.cat-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease-out)}
.cat-card-item:hover .cat-card-img img{transform:scale(1.08)}
.cat-card-icon{font-size:28px;opacity:.5}
.cat-card-label{display:block;font-size:11px;color:var(--text-muted);margin-top:8px;letter-spacing:.06em;transition:color .3s}
.cat-card-item:hover .cat-card-label{color:var(--gold)}

/* ================================================================
   Waterfall Gallery (Home)
   ================================================================ */
.waterfall{display:flex;gap:10px}
.wf-col{flex:1;display:flex;flex-direction:column;gap:10px}
.wf-card{
  position:relative;border-radius:var(--radius-sm);overflow:hidden;
  cursor:pointer;transition:transform .4s var(--ease-out-quart),border-color .35s,box-shadow .35s;
  border:1px solid rgba(255,255,255,.04);
  animation:wf-in .5s var(--ease-out-expo) both;
  animation-delay:calc(var(--ai,0)*80ms)
}
@keyframes wf-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.wf-card:hover{transform:translateY(-3px) scale(1.02);border-color:rgba(212,167,116,.2);box-shadow:0 12px 40px rgba(0,0,0,.5)}
.wf-card:active{transform:scale(.97)}
.wf-card img{width:100%;display:block}
.wf-tag{
  position:absolute;bottom:8px;left:8px;
  background:rgba(0,0,0,.8);color:rgba(255,255,255,.6);
  font-size:10px;padding:3px 10px;border-radius:20px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  letter-spacing:.04em;
}

/* ================================================================
   Skeleton Loading
   ================================================================ */
.skeleton{display:flex;flex-wrap:wrap;gap:10px}
.sk-item{
  flex:1 1 45%;height:150px;background:var(--bg-elevated);
  border-radius:var(--radius-sm);position:relative;overflow:hidden;
}
.sk-item::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.02) 50%,transparent 100%);
  background-size:200% 100%;animation:shimmer 1.8s ease-in-out infinite;
}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* ================================================================
   Load More
   ================================================================ */
.load-more{text-align:center;padding:28px;color:var(--text-muted);font-size:13px;letter-spacing:.06em}
.load-more.clickable{color:var(--gold);cursor:pointer;transition:opacity .3s}
.load-more.clickable:hover{opacity:.8}

/* ================================================================
   Category Page
   ================================================================ */
.cat-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 20px;border-bottom:1px solid var(--border-subtle);
  position:sticky;top:0;background:rgba(10,10,10,.92);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  will-change:transform;transform:translateZ(0);contain:layout style;
  z-index:10;
}
.cat-back{color:var(--gold);font-size:14px;cursor:pointer;transition:opacity .2s}
.cat-back:hover{opacity:.7}
.cat-title{font-size:15px;font-weight:500;letter-spacing:.08em;color:var(--text-primary)}
.cat-layout{display:flex;height:calc(100vh - 54px)}
.cat-tree{
  width:115px;flex-shrink:0;overflow-y:auto;
  border-right:1px solid var(--border-subtle);padding:10px 0;
  background:rgba(8,8,8,.5);
}
.tree-item{
  padding:13px 16px;font-size:13px;cursor:pointer;
  color:var(--text-secondary);transition:all .2s;
  display:flex;justify-content:space-between;align-items:center;
  position:relative;
}
.tree-item.active{color:var(--gold);background:linear-gradient(90deg,rgba(212,167,116,.06),transparent)}
.tree-item.active::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:2px;background:var(--gold);border-radius:1px}
.tree-item:hover:not(.active){color:var(--text-primary)}
.tree-arrow{font-size:9px;opacity:.4}
.tree-sub{
  padding:10px 16px 10px 28px;font-size:12px;cursor:pointer;
  color:var(--text-muted);transition:all .2s;
}
.tree-sub.active{color:var(--gold)}
.tree-sub:hover:not(.active){color:var(--text-secondary)}
.cat-content{flex:1;overflow-y:auto;padding:12px}
.cat-tabs{display:flex;gap:8px;padding:4px 0 14px;flex-wrap:wrap}
.cat-tab{
  padding:7px 16px;border-radius:20px;background:var(--bg-elevated);
  font-size:12px;cursor:pointer;color:var(--text-secondary);
  transition:all .25s;border:1px solid transparent;
  letter-spacing:.04em;
}
.cat-tab.active{background:var(--gold);color:var(--bg-deep);border-color:var(--gold);font-weight:500}
.cat-tab:hover:not(.active){border-color:rgba(255,255,255,.06);color:var(--text-primary)}
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.cat-grid-wide{grid-template-columns:1fr!important}.cat-grid-wide .cat-grid-item{aspect-ratio:2/1}
.cat-grid-item{
  position:relative;border-radius:var(--radius-sm);overflow:hidden;
  cursor:pointer;transition:transform .3s var(--ease-out);aspect-ratio:3/4;
}
.cat-grid-item::before{content:'';display:block;padding-bottom:133.33%}
@supports (aspect-ratio:3/4){.cat-grid-item::before{display:none}}
.cat-grid-item img{display:block;width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0}
.cat-grid-err{
  position:absolute;top:0;left:0;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.03);color:rgba(255,255,255,.25);
  font-size:11px;letter-spacing:.04em;
}
/* 水印已移至大图预览层 */

/* 批量选择复选框 */
.chk-label{
  font-size:12px;color:var(--text-secondary);cursor:pointer;
  display:flex;align-items:center;gap:4px;user-select:none;
}
.chk-label input{accent-color:var(--gold);width:15px;height:15px;cursor:pointer}
.chk-item{
  position:absolute;top:6px;left:6px;z-index:3;
  accent-color:var(--gold);width:18px;height:18px;cursor:pointer;
  opacity:.7;transition:opacity .2s;
}
.cat-grid-item:hover .chk-item,
.cat-selected .chk-item{opacity:1}
.cat-selected{outline:2px solid var(--gold);outline-offset:-2px;border-radius:var(--radius-sm)}
.cat-grid-tag{
  position:absolute;bottom:8px;left:8px;font-size:10px;
  background:rgba(0,0,0,.8);color:rgba(255,255,255,.55);
  padding:3px 10px;border-radius:20px;
  backdrop-filter:blur(12px);letter-spacing:.04em;
}

/* ================================================================
   Code Screen v2 — 专属成长记录入口
   ================================================================ */
.code-screen{
  display:flex;flex-direction:column;align-items:center;
  padding:32px 24px 40px;min-height:100vh;text-align:center;
}
/* ── 标题区 ── */
.code-eyebrow{font-size:15px;color:var(--gold);letter-spacing:.2em;font-weight:600;margin-bottom:6px}
.code-heading{font-size:20px;font-weight:500;color:var(--text-primary);margin-bottom:4px;letter-spacing:.05em}
.code-sub{font-size:13px;color:var(--text-muted);margin-bottom:0;letter-spacing:.04em}
.code-title-block{margin-bottom:4px}

/* ── 分隔线 ── */
.code-divider{width:40px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-dim),transparent);margin:16px 0;flex-shrink:0}

/* ── 模糊预览区 ── */
.code-preview{margin:6px 0 12px;width:100%;max-width:340px}
.code-preview-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.code-preview-card{
  aspect-ratio:3/4;border-radius:8px;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  filter:blur(6px);-webkit-filter:blur(6px);
  opacity:.35;transition:opacity .4s,filter .4s;
}
.code-preview-card span{
  font-size:11px;color:#fff;font-weight:600;letter-spacing:.12em;
  text-shadow:0 1px 4px rgba(0,0,0,.6);position:relative;z-index:1;
}
.code-preview-action{background:linear-gradient(135deg,#2a3548,#1a2a3a)}
.code-preview-combat{background:linear-gradient(135deg,#3a2a20,#2a1a10)}
.code-preview-poster{background:linear-gradient(135deg,#2a2a18,#1a1a0e)}

/* ── 拍摄内容 ── */
.code-content-list{margin:4px 0 8px}
.code-content-title{font-size:12px;color:var(--text-muted);margin-bottom:8px}
.code-content-items{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.code-content-item{
  font-size:11px;color:var(--text-secondary);padding:3px 10px;
  border:1px solid rgba(255,255,255,.06);border-radius:12px;
  background:var(--bg-elevated);
}
.code-private{font-size:10px;color:var(--text-muted);opacity:.5;letter-spacing:.06em;margin:2px 0}

/* ── 强调文字 ── */
.code-emphasis{font-size:14px;font-weight:500;color:var(--text-primary);margin:6px 0 4px;letter-spacing:.04em}
.code-urge{font-size:12px;color:var(--text-muted);margin-bottom:16px}

/* ── 输入区 ── */
.code-input-row{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:280px}
.code-input{
  width:100%;padding:16px;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);background:var(--bg-elevated);
  color:var(--text-primary);font-size:22px;text-align:center;
  letter-spacing:16px;transition:all .3s;
}
.code-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-dim);outline:none}
.code-input::placeholder{color:rgba(255,255,255,.2);letter-spacing:2px;font-size:14px}
.code-enter-btn{
  width:100%;padding:14px 0;border:none;border-radius:var(--radius);
  background:linear-gradient(135deg,#c8963e,#a67c2e);
  color:#fff;font-size:15px;font-weight:600;letter-spacing:.06em;
  cursor:pointer;transition:all .3s var(--ease-out-expo);
  box-shadow:0 2px 12px rgba(212,167,116,.15);
}
.code-enter-btn:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(212,167,116,.25)}
.code-enter-btn:active{transform:translateY(0)}

/* ── 返回 ── */
.code-back{margin-top:0;color:var(--text-muted);font-size:13px;cursor:pointer;transition:color .2s}
.code-back:hover{color:var(--text-secondary)}
.code-help{font-size:11px;color:rgba(255,255,255,.18);letter-spacing:.04em;margin-top:14px}

/* ================================================================
   Package Select Screen — 用户自选套餐 2×2
   ================================================================ */
.pkg-select-screen{
  display:flex;flex-direction:column;align-items:center;
  padding:32px 24px 40px;min-height:100vh;text-align:center;
}
.pkg-select-header{margin-bottom:20px}
.pkg-select-eyebrow{font-size:11px;color:var(--gold);letter-spacing:.3em;margin-bottom:8px}
.pkg-select-title{font-size:22px;font-weight:600;color:var(--text-primary);margin-bottom:6px;letter-spacing:.06em}
.pkg-select-sub{font-size:13px;color:var(--text-muted)}

.pkg-select-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  width:100%;max-width:320px;margin-bottom:20px;
}
.pkg-select-card{
  background:linear-gradient(145deg,#1a1a1a,#111);
  border:1px solid #2a2a2a;border-radius:12px;
  padding:14px 12px;cursor:pointer;
  transition:all .25s var(--ease-out-expo);
  position:relative;overflow:hidden;
}
.pkg-select-card:hover{background:linear-gradient(145deg,#1e1e1e,#151515);border-color:#3a3a3a;transform:translateY(-2px)}
.pkg-select-card:active{transform:scale(.97)}
.pkg-select-on{border-color:var(--gold)!important;background:linear-gradient(145deg,#1e1a14,#15120a)!important}
.pkg-select-top{display:flex;align-items:center;gap:5px;margin-bottom:8px}
.pkg-select-emoji{font-size:18px}
.pkg-select-name{font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap}
.pkg-select-tag{background:rgba(250,204,21,.12);color:#facc15;font-size:9px;padding:1px 5px;border-radius:4px}
.pkg-select-price{font-size:22px;font-weight:700;color:var(--gold);margin-bottom:6px}
.pkg-select-detail{font-size:11px;color:var(--text-muted)}
.pkg-select-detail span{display:inline-block}
.pkg-select-back{margin-top:8px;color:var(--text-muted);font-size:13px;cursor:pointer;transition:color .2s}
.pkg-select-back:hover{color:var(--text-secondary)}

/* ================================================================
   Select Page
   ================================================================ */
.sel-top{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 20px;border-bottom:1px solid var(--border-subtle);
  position:sticky;top:0;background:rgba(10,10,10,.92);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  z-index:10;
}
.sel-back,.sel-wxid{color:var(--text-secondary);font-size:13px;cursor:pointer;transition:color .2s}
.sel-back:hover,.sel-wxid:hover{color:var(--text-primary)}
.sel-album{font-size:15px;font-weight:500;color:var(--text-primary);letter-spacing:.04em}
.sel-center{text-align:center;line-height:1.3;padding:4px 0}
.sel-center-name{font-size:20px;font-weight:600;color:var(--gold);letter-spacing:.08em;text-shadow:0 0 16px rgba(212,167,116,.45),0 0 32px rgba(212,167,116,.2)}
.sel-center-sub{font-size:18px;font-weight:500;color:var(--gold);letter-spacing:.06em;margin-top:2px;text-shadow:0 0 12px rgba(212,167,116,.35)}
.sel-limit{padding:14px 20px}
.limit-bar{height:4px;background:rgba(255,255,255,.04);border-radius:2px;overflow:hidden;margin-bottom:8px}
.limit-fill{
  height:100%;background:linear-gradient(90deg,var(--gold-dark),var(--gold),var(--gold-light));
  border-radius:2px;transition:width .5s var(--ease-out);
}
.limit-text{font-size:11px;color:var(--text-muted);letter-spacing:.04em}
.sel-notice{
  padding:12px 20px;margin:6px 20px;
  background:rgba(212,167,116,.06);border:1px solid var(--border-gold);
  border-radius:var(--radius-sm);display:flex;justify-content:space-between;
  align-items:center;font-size:13px;color:var(--text-secondary);
}
.sel-notice .edit{color:var(--gold);cursor:pointer;font-weight:500}
.sel-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.06)}
.sel-tab{
  flex:1;text-align:center;padding:15px 6px;font-size:13px;cursor:pointer;
  color:var(--text-muted);position:relative;transition:color .25s;
  letter-spacing:.06em;font-weight:400;
}
.sel-tab.active{color:var(--gold);font-weight:500}
.sel-tab.active::after{
  content:'';position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);
  width:28px;height:2px;background:var(--gold);border-radius:1px;
}
.tab-dot{
  display:inline-block;background:var(--gold);color:var(--bg-deep);
  font-size:10px;min-width:16px;height:16px;line-height:16px;
  text-align:center;border-radius:8px;margin-left:4px;
  padding:0 4px;font-weight:600;
}
.sel-body{padding:12px 12px 80px;min-height:300px}

/* Photo Grid */
.photo-actions{display:flex;gap:8px;align-items:center;padding:8px 4px 12px}
.photo-info{font-size:12px;color:var(--text-muted);margin-left:auto;letter-spacing:.04em}
.photo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.photo-grid-item{
  aspect-ratio:1;border-radius:var(--radius-sm);overflow:hidden;
  cursor:pointer;transition:transform .2s;position:relative
}
.photo-grid-item::before{content:'';display:block;padding-bottom:100%}
@supports (aspect-ratio:1){.photo-grid-item::before{display:none}}
.photo-grid-item:hover{transform:scale(1.03)}
.photo-grid-item img{display:block;width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0}
/* 水印已移至大图预览层 */
.photo-grid-item.selected{outline:2px solid var(--gold);outline-offset:-2px}

/* 来源选择 — 横向滚动 */
.source-scroll-row{
  display:flex;gap:6px;flex-wrap:nowrap;padding:4px 0;min-width:min-content
}
.source-scroll-item{
  flex-shrink:0;width:120px;aspect-ratio:3/4;border-radius:var(--radius-sm);
  overflow:hidden;cursor:pointer;position:relative;
  transition:transform .2s,outline .2s;outline:2px solid transparent
}
.source-scroll-item:active{transform:scale(.97)}
.source-scroll-item img{width:100%;height:100%;object-fit:cover}
.source-scroll-item.selected{outline:2px solid var(--gold);outline-offset:-3px}

.pg-item{
  position:relative;border-radius:var(--radius-sm);overflow:hidden;
  cursor:pointer;border:3px solid transparent;
  transition:transform .3s var(--ease-out-quart),border-color .3s,border-color .3s,box-shadow .3s;aspect-ratio:3/4;
  animation:pg-in .5s var(--ease-out-expo) both;
  animation-delay:calc(var(--ai,0)*60ms)
}
/* aspect-ratio 兼容垫片（微信 X5 等老旧浏览器） */
.pg-item::before{content:'';display:block;padding-bottom:133.33%}
@supports (aspect-ratio:3/4){.pg-item::before{display:none}}
.pg-item img{display:block;width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0}
@keyframes pg-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.pg-item:active{transform:scale(.97)}
.pg-retouch{border-color:var(--gold);box-shadow:0 0 24px rgba(212,167,116,.1)}
/* 缩略图角标 — 选/不选切换 */
.pg-toggle{
  position:absolute;top:6px;right:6px;width:20px;height:20px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;
  border:1.5px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.4);color:transparent;
  transition:all .2s var(--ease-out-quart);z-index:2
}
.pg-toggle.pg-on{background:var(--gold);color:var(--bg-deep);border-color:var(--gold)}
.pg-toggle:active{transform:scale(.85)}

/* ── 旧 badge 保留向后兼容（首页等可能引用）── */
.pg-badge{
  position:absolute;top:10px;right:10px;width:28px;height:28px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;
}
.pg-retouch .pg-badge{background:var(--gold);color:var(--bg-deep)}

/* Product Cards */
.product-card{
  display:flex;justify-content:space-between;align-items:center;padding:16px;
  margin-bottom:8px;background:rgba(20,20,20,.5);
  border:1px solid rgba(255,255,255,.05);border-radius:var(--radius);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color .3s,transform .3s,box-shadow .3s;
}
.product-card:hover{border-color:rgba(255,255,255,.08);transform:translateY(-1px);box-shadow:0 4px 20px rgba(0,0,0,.3)}
.product-card-grid{display:flex;align-items:center;gap:12px}
.product-card-thumb{
  width:48px;height:48px;border-radius:6px;object-fit:cover;
  border:1px solid rgba(255,255,255,.08);flex-shrink:0;
}
.prod-type{display:block;font-size:14px;color:var(--text-primary);margin-bottom:4px;font-weight:500}
.prod-detail{display:block;font-size:12px;color:var(--text-muted);letter-spacing:.03em}
.src-select{
  background:var(--bg-surface);color:var(--text-secondary);border:1px solid var(--border-subtle);
  border-radius:6px;padding:4px 8px;font-size:11px;cursor:pointer;outline:none;
  max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.src-select:focus{border-color:var(--gold)}
.btn-add-item{
  width:100%;border:1px dashed rgba(255,255,255,.06);
  background:transparent;color:var(--text-muted);
  padding:16px;border-radius:var(--radius);font-size:13px;
  cursor:pointer;transition:all .3s;letter-spacing:.04em;
}
.btn-add-item:hover{border-color:var(--border-gold);color:var(--gold)}

/* Sel Footer */
.sel-footer{
  position:fixed;bottom:0;left:0;right:0;
  background:rgba(8,8,8,.95);backdrop-filter:blur(30px);
  -webkit-backdrop-filter:blur(30px);
  border-top:1px solid var(--border-subtle);
  padding:12px 20px;display:flex;justify-content:space-between;
  align-items:center;z-index:20;
  transform:translateZ(0);-webkit-transform:translateZ(0);
}
.sel-summary{font-size:12px;color:var(--text-muted);letter-spacing:.04em}

/* ================================================================
   Confirm Page
   ================================================================ */
.cf-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 20px;border-bottom:1px solid var(--border-subtle);
  position:sticky;top:0;background:rgba(10,10,10,.92);
  backdrop-filter:blur(20px);z-index:10;
}
.cf-back{color:var(--gold);font-size:14px;cursor:pointer;transition:opacity .2s}
.cf-title{font-size:15px;font-weight:500;letter-spacing:.08em}
.cf-hero{text-align:center;padding:32px 24px}
.cf-hero h2{font-size:18px;font-weight:400;margin-bottom:8px;letter-spacing:.06em}
.cf-badge{
  display:inline-block;background:rgba(212,167,116,.1);color:var(--gold);
  font-size:11px;padding:4px 14px;border-radius:4px;
  letter-spacing:.08em;
}
.cf-section{padding:8px 20px}
.cf-section h3{font-size:11px;color:var(--gold);margin-bottom:10px;letter-spacing:.15em;text-transform:uppercase}
.cf-row{
  display:flex;justify-content:space-between;padding:12px 0;
  border-bottom:1px solid var(--border-subtle);
  font-size:14px;color:var(--text-secondary);
}
.cf-row span:last-child{color:var(--text-muted);font-size:13px}
.cf-total{
  display:flex;justify-content:space-between;padding:20px;
  margin-top:12px;border-top:1px solid rgba(255,255,255,.06);
  font-size:17px;font-weight:500;
}
.cf-total-price{color:var(--gold);font-weight:600;font-size:22px}
.cf-hint{font-size:11px;color:var(--text-muted);text-align:center;padding:4px 20px 12px;letter-spacing:.04em}
.cf-note{
  width:100%;min-height:80px;background:var(--bg-elevated);
  border:1px solid var(--border-subtle);border-radius:var(--radius-sm);
  padding:16px;color:var(--text-primary);font-size:14px;
  resize:vertical;margin:8px 20px;transition:border-color .3s;
}
.cf-note:focus{border-color:var(--gold)}
.cf-count{display:block;text-align:right;font-size:11px;color:var(--text-muted);padding:0 24px 8px}
.cf-contact{text-align:center;color:var(--gold);font-size:13px;cursor:pointer;padding:14px 20px;margin-top:8px}
.cf-submit{padding:12px 20px 28px}

/* Result */
.result{padding:64px 28px 36px;text-align:center}
.result h2{font-size:22px;font-weight:300;margin-top:20px;letter-spacing:.08em}
.result-card{
  margin:12px 24px;padding:18px;background:var(--bg-elevated);
  border:1px solid var(--border-subtle);border-radius:var(--radius);
  display:flex;justify-content:space-between;align-items:center;font-size:14px;
}
.result-label{color:var(--text-muted);font-size:13px}
.result-value{color:var(--gold);font-weight:500}

/* ── 提交后详情卡 ── */
.cf-done-hero{padding:48px 28px 16px;text-align:center}
.cf-done-icon{width:56px;height:56px;border-radius:50%;background:rgba(74,222,128,.15);color:#4ade80;font-size:28px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px}
.cf-done-hero h2{font-size:20px;font-weight:300;margin:0;letter-spacing:.08em}
.cf-done-card{margin:10px 16px;padding:20px 18px;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius)}
.cf-done-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.cf-done-header h3{font-size:16px;font-weight:400;margin:0;color:var(--text-primary)}
.cf-done-no{font-size:11px;color:var(--text-muted);font-family:monospace}
.cf-done-pkg{display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(212,167,116,.08);border-radius:8px;margin-bottom:12px;font-size:13px}
.cf-done-pkg .pkg-info-price{color:#4ade80;font-weight:600;margin-left:auto}
.cf-done-divider{height:1px;background:var(--border-subtle);margin:14px 0}
.cf-done-row{display:flex;align-items:center;padding:6px 0;font-size:14px}
.cf-done-label{color:var(--text-muted);flex:1}
.cf-done-val{color:var(--gold);font-weight:500}
.cf-done-section{margin-top:12px}
.cf-done-section-hd{font-size:14px;font-weight:500;color:var(--text-primary);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.cf-done-count{font-size:11px;color:var(--text-muted);font-weight:400}
.cf-done-sub{display:flex;justify-content:space-between;align-items:center;padding:6px 0 6px 12px;border-left:2px solid rgba(212,167,116,.2);margin-bottom:4px;font-size:13px;color:var(--text-secondary)}
.cf-done-sub-name{color:var(--text-primary)}
.cf-done-sub-meta{font-size:11px;color:var(--text-muted)}
.cf-done-sources{display:flex;gap:8px;flex-wrap:wrap;width:100%}
.cf-done-src{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-muted)}
.cf-done-src-thumb{width:40px;height:40px;border-radius:6px;overflow:hidden;flex-shrink:0}
.cf-done-src-thumb img{width:100%;height:100%;object-fit:cover}
.cf-done-src-nothumb{width:40px;height:40px;border-radius:6px;background:var(--bg-surface);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--text-muted);flex-shrink:0}
.cf-done-src-label{max-width:48px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cf-done-src-pages{font-size:10px;opacity:.6}
.cf-done-note{margin-top:12px;padding:10px;background:rgba(255,255,255,.03);border-radius:8px}
.cf-done-note-label{font-size:11px;color:var(--text-muted);display:block;margin-bottom:4px}
.cf-done-note-text{font-size:13px;color:var(--text-secondary);margin:0}

/* ================================================================
   Admin Page
   ================================================================ */
/* ── 数据面板 ── */
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px}
.dash-card{
  background:var(--bg-elevated);border:1px solid var(--border-subtle);
  border-radius:var(--radius);padding:18px 14px;text-align:center;
  transition:border-color .3s,transform .3s;
}
.dash-card:hover{border-color:rgba(255,255,255,.1);transform:translateY(-2px)}
.dash-card-icon{font-size:24px;margin-bottom:8px}
.dash-card-value{font-size:28px;font-weight:700;color:var(--dc,var(--gold));margin-bottom:4px;letter-spacing:.04em}
/* 骨架屏加载态 */
.dash-skel{width:60%;height:28px;border-radius:6px;background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%);background-size:200% 100%;animation:dash-shimmer 1.5s ease-in-out infinite;margin-bottom:4px}
@keyframes dash-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.dash-card.loading{cursor:default}
.dash-card.loading:hover{transform:none}
.dash-card-label{font-size:13px;color:var(--text-primary);font-weight:500;margin-bottom:2px}
.dash-card-sub{font-size:10px;color:var(--text-muted);opacity:.6}
.dash-refresh{text-align:center;padding:8px;font-size:12px;color:var(--text-muted);cursor:pointer;transition:color .2s}
.dash-refresh:hover{color:var(--gold)}

/* ── Admin ── */
.admin-tabs{
  display:flex;border-bottom:1px solid var(--border-subtle);align-items:center;
  position:sticky;top:0;background:rgba(10,10,10,.92);
  backdrop-filter:blur(20px);z-index:10;
}
.admin-tab{
  flex:1;text-align:center;padding:15px 8px;font-size:13px;cursor:pointer;
  color:var(--text-muted);transition:color .25s;position:relative;
  letter-spacing:.04em;
}
.admin-tab.active{color:var(--gold);font-weight:500}
.admin-tab.active::after{
  content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:24px;height:2px;background:var(--gold);border-radius:1px;
}
.admin-exit{padding:15px 20px;color:#f88;font-size:13px;cursor:pointer;transition:opacity .2s}
.admin-exit:hover{opacity:.7}
.admin-body{padding:12px}
.admin-split{display:flex;height:calc(100vh - 100px)}
.adm-tree{width:105px;flex-shrink:0;overflow-y:auto;border-right:1px solid var(--border-subtle)}
.adm-content{flex:1;overflow-y:auto;padding:10px}
.adm-actions{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 4px 12px;font-size:13px;color:var(--text-muted);
}
.album-card{
  border:1px solid var(--border-subtle);border-radius:var(--radius);
  padding:18px;margin-bottom:10px;background:var(--bg-elevated);
  transition:border-color .3s,transform .3s;
}
.album-card:hover{border-color:rgba(255,255,255,.06);transform:translateY(-1px)}
.album-info strong{display:block;font-size:15px;margin-bottom:6px;font-weight:500}
.album-info span{display:block;font-size:12px;color:var(--text-muted);margin-top:4px;letter-spacing:.03em}
.album-actions{display:flex;gap:6px;margin-top:14px}
.order-card{
  border:1px solid var(--border-subtle);border-radius:var(--radius);
  padding:18px;margin-bottom:10px;background:var(--bg-elevated);
  transition:border-color .3s,transform .3s;
}
.order-card:hover{border-color:rgba(255,255,255,.06);transform:translateY(-1px)}
.order-selected{border-color:var(--gold)!important;background:linear-gradient(135deg,#1e1a14,#1a180e)!important}
.order-hd{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--text-secondary)}
/* 批量移动下拉 */
.batch-move-select{
  background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);padding:5px 8px;font-size:11px;cursor:pointer;max-width:120px;
}
.order-no{font-size:12px;color:var(--gold);margin:8px 0;letter-spacing:.04em}
.order-summary{font-size:12px;color:var(--text-muted);margin-bottom:4px}
.order-footer{display:flex;gap:8px;align-items:center;margin-top:14px}
.order-status{font-size:12px;color:var(--gold);font-weight:500}
.order-fold{
  text-align:center;padding:20px;color:var(--text-muted);
  font-size:13px;cursor:pointer;border-top:1px solid var(--border-subtle);
  margin-top:4px;transition:color .3s;
}
.order-fold:hover{color:var(--text-secondary)}
.upload-bar{
  position:fixed;top:0;left:0;right:0;
  background:linear-gradient(90deg,var(--gold-dark),var(--gold));
  color:var(--bg-deep);text-align:center;padding:14px 20px;
  font-size:14px;font-weight:600;z-index:100;
  box-shadow:0 4px 20px rgba(0,0,0,.4);
  animation:upload-slide .3s var(--ease-out);
  letter-spacing:.02em;
}
@keyframes upload-slide{from{transform:translateY(-100%)}to{transform:translateY(0)}}

.anon-banner{
  margin:12px 16px 0;
  padding:12px 16px;
  background:rgba(226,75,74,.12);
  border:1px solid rgba(226,75,74,.25);
  border-radius:10px;
  font-size:13px;color:rgba(255,255,255,.7);
  line-height:1.6;text-align:center;
}
/* ================================================================
   Modal
   ================================================================ */
.modal-mask{
  position:fixed;inset:0;background:rgba(0,0,0,.8);
  z-index:100;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:fade-in .25s;
}
/* ── 订单详情 ── */
.detail-label{
  font-size:12px;color:var(--gold);font-weight:600;letter-spacing:.06em;
  margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid rgba(212,167,116,.1);
}
.detail-photo-grid{display:flex;flex-wrap:wrap;gap:6px}
.detail-photo-item{
  width:64px;display:flex;flex-direction:column;gap:2px;align-items:center;
}
.detail-photo-item-inner{
  width:64px;height:64px;border-radius:6px;overflow:hidden;
  background:var(--bg-elevated);
}
.detail-photo-item-inner img{width:100%;height:100%;object-fit:cover}
.detail-photo-sm{width:48px;height:48px}
.detail-photo-sm .detail-photo-item-inner{width:48px;height:48px}
.detail-photo-placeholder{
  font-size:10px;color:var(--text-muted);text-align:center;padding:4px;word-break:break-all;
}
.detail-photo-name{
  font-size:9px;color:var(--text-muted);text-align:center;
  line-height:1.2;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.detail-photo-pages{
  position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.7);
  font-size:9px;color:#fff;text-align:center;padding:1px 0;
}
.detail-item-row{
  padding:8px 12px;background:var(--bg-elevated);border-radius:8px;margin-bottom:6px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.detail-item-name{font-size:13px;color:var(--text-primary);font-weight:500}
.detail-item-meta{font-size:11px;color:var(--text-muted);margin-left:auto}
.detail-item-thumb{width:36px;height:36px;border-radius:4px;object-fit:cover}
.detail-item-nophoto{font-size:10px;color:var(--text-muted)}

/* ── 弹窗 ── */
.modal-box{
  background:var(--bg-surface);border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius-lg);padding:28px;width:90%;max-width:400px;
  max-height:85vh;overflow-y:auto;
  animation:scale-in .3s var(--ease-out);
  box-shadow:0 20px 60px rgba(0,0,0,.7);
}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes scale-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
.modal-box h3{font-size:16px;font-weight:500;margin-bottom:24px;color:var(--text-primary);letter-spacing:.06em}
.modal-row{
  display:flex;justify-content:space-between;align-items:center;padding:10px 0;
}
.modal-row label{font-size:13px;color:var(--text-secondary)}
.modal-row select,.modal-row input{
  background:var(--bg-elevated);color:var(--text-primary);
  border:1px solid var(--border-subtle);border-radius:var(--radius-sm);
  padding:10px 14px;font-size:13px;min-width:160px;
}
.modal-err{
  color:#f88;font-size:12px;padding:8px 0 0;margin:0;
}
.modal-btns{display:flex;gap:10px;margin-top:28px;justify-content:flex-end}
.pkg-form{margin:16px 0}
.pkg-row{
  display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;
}
.pkg-row.pkg-stack{flex-direction:column;gap:8px}
.pkg-row label{font-size:13px;color:var(--text-secondary);width:72px;flex-shrink:0;padding-top:8px}
.pkg-row.pkg-stack label{width:auto;padding-top:0}
.pkg-row input{
  flex:1;background:var(--bg-elevated);border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);padding:10px 14px;color:var(--text-primary);font-size:13px;
}

/* Tag 多选下拉 */
.pkg-tag-wrap{flex:1;position:relative;cursor:pointer}
.pkg-stack .pkg-tag-wrap{width:100%}
.pkg-trigger{
  background:var(--bg-elevated);border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);padding:10px 14px;
  font-size:13px;color:var(--text-primary);
  transition:border-color .2s;
  display:flex;align-items:center;min-height:22px;
}
.pkg-tag-wrap:hover .pkg-trigger{border-color:var(--gold)}
.pkg-selected{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;
}
.pkg-tag{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(212,167,116,.12);border:1px solid rgba(212,167,116,.25);
  color:var(--gold);border-radius:6px;padding:4px 8px;
  font-size:12px;line-height:1.4;animation:tag-in .2s var(--ease-out);
}
@keyframes tag-in{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.pkg-tag-x{
  background:none;border:none;color:var(--gold);font-size:15px;line-height:1;
  cursor:pointer;padding:0 1px;opacity:.6;transition:opacity .15s;
}
.pkg-tag-x:hover{opacity:1}
.pkg-placeholder{font-size:12px;color:var(--text-muted);padding:4px 2px}
.pkg-drop{
  position:absolute;top:100%;left:0;right:0;z-index:200;
  background:var(--bg-surface);border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);margin-top:4px;
  max-height:180px;overflow-y:auto;
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  animation:fade-in .15s;
}
.pkg-opt{
  padding:10px 14px;font-size:13px;color:var(--text-secondary);
  cursor:pointer;transition:background .15s,color .15s;
}
.pkg-opt:hover{background:rgba(212,167,116,.08);color:var(--gold)}
.pkg-opt-on{color:var(--gold);background:rgba(212,167,116,.06)}
.pkg-opt-on::after{content:' ✓';font-size:11px;opacity:.6}
.pkg-opt-on:hover{background:rgba(212,167,116,.14)}

/* ================================================================
   Empty State
   ================================================================ */
.empty-state{
  text-align:center;padding:60px 24px;color:var(--text-muted);
  font-size:13px;letter-spacing:.06em;
}

/* ================================================================
   Loading
   ================================================================ */
.loading-spin{display:flex;align-items:center;justify-content:center;padding:40px}
.spin{
  width:28px;height:28px;border:1.5px solid rgba(255,255,255,.04);
  border-top-color:var(--gold);border-radius:50%;
  animation:splash-spin .8s linear infinite;
}

/* ================================================================
   Tailwind Fallback Utilities
   ================================================================ */
.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}
.inset-0{inset:0}
.top-0{top:0}.top-4{top:16px}.right-4{right:16px}
.bottom-0{bottom:0}.bottom-20{bottom:80px}
.left-0{left:0}.left-1\/2{left:50%}
.-translate-x-1\/2{transform:translateX(-50%)}
.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.z-100{z-index:100}
.z-\[9998\]{z-index:9998}.z-\[9999\]{z-index:9999}
.hidden{display:none}
.flex{display:flex}.inline-flex{display:inline-flex}.block{display:block}
.flex-col{flex-direction:column}.flex-1{flex:1 1 0%}
.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}
.overflow-hidden{overflow:hidden}
.rounded-full{border-radius:9999px}
.bg-black\/85{background:rgba(0,0,0,.85)}.bg-black\/95{background:rgba(0,0,0,.95)}
.text-white{color:#fff}.text-white\/60{color:rgba(255,255,255,.6)}.text-white\/85{color:rgba(255,255,255,.85)}.text-white\/20{color:rgba(255,255,255,.2)}.text-white\/30{color:rgba(255,255,255,.3)}
.text-gold{color:var(--gold)}.bg-bg{background:var(--bg)}
.px-6{padding-left:24px;padding-right:24px}.py-3{padding-top:12px;padding-bottom:12px}
.mt-4{margin-top:16px}.mt-6{margin-top:16px}.mt-2{margin-top:8px}.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}
.gap-2{gap:8px}.gap-3{gap:12px}.text-center{text-align:center}.cursor-pointer{cursor:pointer}
.antialiased{-webkit-font-smoothing:antialiased}.select-none{user-select:none;-webkit-user-select:none}
/* 以下 Tailwind 兼容类不冲突，保留 */
.text-2xl{font-size:24px}.tracking-\[\.3em\]{letter-spacing:.3em}.tracking-\[\.2em\]{letter-spacing:.2em}
.backdrop-blur-xl{backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}
.duration-500{transition-duration:.5s}.opacity-0{opacity:0}
.max-w-full{max-width:100%}.max-h-full{max-height:100%}.object-contain{object-fit:contain}
/* ================================================================
   Micro-Interactions
   ================================================================ */
@keyframes glow-pulse{0%,100%{box-shadow:0 2px 16px rgba(212,167,116,.15)}50%{box-shadow:0 2px 28px rgba(212,167,116,.25)}}
.btn-p:not(:disabled){animation:glow-pulse 3s ease-in-out infinite}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.float{animation:float 4s ease-in-out infinite}.float-slow{animation-duration:6s}

@keyframes slide-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.slide-up{animation:slide-up .5s var(--ease-out) both}

@keyframes count-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.count-up{animation:count-up .4s var(--ease-out) both}

/* ================================================================
   Helpers
   ================================================================ */
.text-center{text-align:center}.flex-center{display:flex;align-items:center;justify-content:center}
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:16px}
.mb-2{margin-bottom:8px}.mb-4{margin-bottom:16px}
.px-4{padding-left:16px;padding-right:16px}
.py-2{padding-top:8px;padding-bottom:8px}.py-4{padding-top:16px;padding-bottom:16px}
.gap-2{gap:8px}.gap-3{gap:12px}

/* ================================================================
   Mobile Safe Area
   ================================================================ */
@supports(padding-bottom:env(safe-area-inset-bottom)){
  .sel-footer{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  .cf-submit{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
  .sel-body{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
  body{padding-bottom:env(safe-area-inset-bottom)}
}

/* ================================================================
   Responsive
   ================================================================ */
@media(min-width:768px){
  .cat-row{gap:18px}
  .cat-card-item{flex:0 0 100px}
  .cat-card-img{width:100px;height:100px;border-radius:var(--radius-xl)}
  .photo-grid{grid-template-columns:repeat(3,1fr)}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .modal-box{max-width:440px}
  .hero h1{font-family:var(--font-serif);font-size:48px}
  .hero{padding:120px 48px 72px}
  .section{padding:0 28px 36px}
  .waterfall{gap:14px}.wf-col{gap:14px}
}
@media(min-width:1024px){
  .photo-grid{grid-template-columns:repeat(4,1fr)}
  .cat-grid{grid-template-columns:repeat(4,1fr)}
  .cat-tree{width:140px}
}

/* ================================================================
   Comments Section — 评论区
   ================================================================ */
.cm-section{padding:32px 18px 48px}
.cm-loading,.cm-empty{text-align:center;color:var(--text-muted);font-size:13px;padding:32px 0}
.cm-list{display:flex;flex-direction:column;gap:12px}
.cm-item{
  display:flex;gap:12px;padding:16px;
  background:rgba(20,20,20,.4);border:1px solid rgba(255,255,255,.04);
  border-radius:var(--radius);animation:slide-up .4s var(--ease-out) both;
}
.cm-avatar{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold-dark),var(--gold));
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;color:var(--bg-deep);
  flex-shrink:0;letter-spacing:.04em;
}
.cm-body{flex:1;min-width:0}
.cm-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.cm-name{font-size:14px;color:var(--text-primary);font-weight:500}
.cm-time{font-size:11px;color:var(--text-muted)}
.cm-text{font-size:14px;color:var(--text-secondary);line-height:1.7;word-break:break-word}
.cm-form{margin-top:16px}
.cm-input{
  width:100%;padding:14px 16px;border-radius:var(--radius);
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  color:var(--text-primary);font-size:14px;line-height:1.6;
  resize:none;outline:none;transition:border-color .3s;
  font-family:inherit;
}
.cm-input:focus{border-color:var(--gold)}
.cm-input::placeholder{color:var(--text-muted)}
.cm-form-ft{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.cm-count{font-size:12px;color:var(--text-muted)}
.cm-login-hint{
  text-align:center;padding:24px;margin-top:16px;
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);
  border-radius:var(--radius);display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--text-muted);gap:10px;flex-wrap:wrap;
}

/* ================================================================
   Page Transitions — 页面切换动画
   ================================================================ */
.page-enter-active{animation:slide-up .3s var(--ease-out)}
.page-leave-active{animation:slide-up .15s var(--ease-out) reverse}
.fade-enter-active{transition:opacity .3s}
.fade-leave-active{transition:opacity .2s}
.fade-enter-from,.fade-leave-to{opacity:0}

/* ================================================================
   Empty State — 空状态引导
   ================================================================ */
.empty-guide{text-align:center;padding:40px 24px}
.empty-guide-icon{font-size:48px;margin-bottom:12px;opacity:.6}
.empty-guide h3{font-size:15px;color:var(--text-secondary);margin-bottom:8px;font-weight:400}
.empty-guide p{font-size:12px;color:var(--text-muted);line-height:1.8;max-width:280px;margin:0 auto}

/* ================================================================
   Package Cards — 套餐卡片（管理后台选择）
   ================================================================ */
.pkg-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.pkg-card{border:1px solid #333;border-radius:8px;padding:10px;cursor:pointer;transition:border .2s,background .2s}
.pkg-card:hover{border-color:#555;background:#1a1a1a}
.pkg-card-on{border-color:var(--gold)!important;background:#1e1a14}
.pkg-card-top{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.pkg-card-emoji{font-size:16px}
.pkg-card-name{font-weight:600;font-size:13px;color:var(--text)}
.pkg-card-tag{background:#facc1518;color:#facc15;font-size:9px;padding:1px 5px;border-radius:4px;font-weight:600}
.pkg-card-price{font-size:15px;font-weight:700;color:var(--gold);margin-left:auto}
.pkg-card-items{font-size:10px;color:var(--text-muted);padding-left:2px}
.pkg-card-item{padding:1px 0}
.pkg-card-item::before{content:'· ';color:var(--gold)}

/* ================================================================
   Package Info Card — 用户端选片页套餐展示
   ================================================================ */
.pkg-info-card{background:linear-gradient(135deg,#1e1a14,#1a180e);border:1px solid #3a3018;border-radius:10px;padding:12px 14px;margin:6px 10px 4px}
.pkg-info-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.pkg-info-emoji{font-size:20px}
.pkg-info-name{font-weight:600;font-size:14px;color:var(--gold)}
.pkg-info-price{font-size:16px;font-weight:700;color:var(--gold);margin-left:auto}
.pkg-info-items{display:flex;flex-wrap:wrap}
.pkg-info-item{box-sizing:border-box;width:50%;font-size:12px;color:var(--text-muted);line-height:1.5;display:flex;align-items:flex-start;padding:2px 0}
.pkg-info-item::before{content:'✓';color:var(--gold);font-size:11px;font-weight:700;flex-shrink:0;margin-right:4px}

/* ================================================================
   Album Source Chips — 相册多来源标签
   ================================================================ */
/* ── 相册来源缩略图网格 ── */
.album-source-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}
.album-source-card{position:relative;background:#1a1a1a;border:1px solid #333;border-radius:8px;overflow:hidden;cursor:grab;transition:transform .2s,box-shadow .2s,border-color .2s;user-select:none;-webkit-user-select:none}
.album-source-card:active{cursor:grabbing}
.album-source-card.src-layout{border-color:#d4a57444;background:#1a1510}
.album-source-card.src-photo{border-color:#333}
.album-source-card.drag-active{transform:scale(1.08);box-shadow:0 8px 24px rgba(0,0,0,.6);z-index:10;border-color:#d4a574;cursor:grabbing}
.album-source-card.drag-over{transform:scale(1.04);border-color:#d4a574;box-shadow:0 0 0 2px #d4a57444}
.src-card-thumb{width:100%;aspect-ratio:1/1;background:#111;overflow:hidden;display:flex;align-items:center;justify-content:center}
.src-card-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.src-card-nothumb{width:100%;height:100%;background:linear-gradient(135deg,#1a1a1a,#2a2a2a);display:flex;align-items:center;justify-content:center}
.src-card-nothumb::after{content:attr(data-type);color:#555;font-size:10px;text-align:center;padding:4px}
.src-card-nothumb[data-type]::after{content:attr(data-type);color:#555;font-size:9px}
.src-card-info{display:flex;justify-content:space-between;align-items:center;padding:3px 5px;gap:3px}
.src-card-label{font-size:9px;color:#ccc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;line-height:1.3}
.src-card-pages{font-size:8px;color:#888;flex-shrink:0;background:#222;padding:1px 4px;border-radius:6px}
.src-card-del{position:absolute;top:1px;right:1px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.75);color:#999;font-size:12px;line-height:18px;text-align:center;cursor:pointer;z-index:2;border:none;display:flex;align-items:center;justify-content:center;padding:0}
.src-card-del:hover{background:#e24b4a;color:#fff}

/* ── 全屏预览层 ── */
.lightbox-overlay{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;animation:lbFadeIn .25s ease;-webkit-animation:lbFadeIn .25s ease}
@keyframes lbFadeIn{from{opacity:0}to{opacity:1}}
.lightbox-close{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:24px;line-height:40px;text-align:center;cursor:pointer;border:none;z-index:10001;transition:background .2s;-webkit-tap-highlight-color:transparent}
.lightbox-close:hover{background:rgba(255,255,255,.25)}
.lightbox-body{max-width:92vw;max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:12px}
.lightbox-img{max-width:92vw;max-height:78vh;object-fit:contain;border-radius:8px;box-shadow:0 4px 40px rgba(0,0,0,.5)}
.lightbox-label{color:#aaa;font-size:13px;text-align:center;padding:4px 16px;background:rgba(255,255,255,.08);border-radius:20px}