/* ============ 作品展览 · 移动端样式 ============ */
:root{
  --bg:#FBF6EF;--card:#FFFFFF;--ink:#403A37;--muted:#A29A92;
  --orange:#FF8A65;--line:rgba(64,58,55,.08);
  --r-lg:22px;--r-md:16px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:var(--bg);font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--ink);overscroll-behavior:none}
.phone{max-width:480px;margin:0 auto;min-height:100%;position:relative;background:var(--bg)}

/* ============ 第一层 · 品牌介绍页（E心护宁 共绘安全） ============ */
.intro{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden;
  background:
    radial-gradient(90% 60% at 100% 0%,rgba(255,138,101,.38),transparent 55%),
    radial-gradient(90% 70% at 0% 100%,rgba(47,140,255,.42),transparent 60%),
    linear-gradient(165deg,#1E3466 0%,#132250 45%,#0B1732 100%);
  transition:opacity .5s ease,visibility .5s}
.intro.hide{opacity:0;visibility:hidden;pointer-events:none}
.i-deco{position:absolute;inset:0;pointer-events:none}
.i-star{position:absolute}
.i-star svg{display:block;width:100%;height:100%}
.i-star.s1{width:15px;height:15px;top:13%;left:17%;animation:twinkle 2.6s ease-in-out infinite}
.i-star.s2{width:10px;height:10px;top:27%;right:15%;animation:twinkle 3.4s .6s ease-in-out infinite}
.i-star.s3{width:11px;height:11px;bottom:22%;left:21%;animation:twinkle 3s 1.1s ease-in-out infinite}
.i-ring{position:absolute;border:1px solid rgba(255,255,255,.14);border-radius:50%}
.i-ring.a{width:150px;height:150px;right:-52px;top:16%}
.i-ring.b{width:90px;height:90px;left:-30px;bottom:15%;border-color:rgba(255,138,101,.35)}
.i-orb{position:absolute;border-radius:50%;filter:blur(46px);opacity:.5}
.i-orb.o1{width:190px;height:190px;left:-80px;top:-40px;background:#2979FF}
.i-orb.o2{width:150px;height:150px;right:-50px;bottom:8%;background:#FF7043}
.i-inner{position:relative;z-index:1;padding:44px 30px;display:flex;flex-direction:column;align-items:center;width:100%;max-width:400px}
.i-badge{font-size:12px;letter-spacing:3px;color:#FFE0B2;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);padding:7px 16px;border-radius:999px;margin-bottom:26px;text-indent:3px}
.i-logo{width:118px;height:118px;border-radius:50%;background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;margin-bottom:22px;box-shadow:0 14px 36px rgba(3,10,32,.4)}
.i-logo svg{width:66px;height:66px}
.i-slogan{font-size:43px;font-weight:800;line-height:1.1;letter-spacing:2px}
.i-slogan b{color:#FF8A65;font-weight:900}
.i-sub{font-size:28px;font-weight:800;letter-spacing:12px;text-indent:12px;margin-top:10px;background:linear-gradient(90deg,#FFE082,#FF8A65);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.i-divide{width:56px;height:2px;background:linear-gradient(90deg,transparent,#FF8A65,transparent);margin:18px 0}
.i-desc{font-size:14.5px;line-height:2;color:rgba(255,255,255,.82);letter-spacing:.5px}
.i-desc em{font-style:normal;color:#FFD54F}
.i-btn{position:relative;z-index:2;margin-top:30px;padding:15px 42px;border:none;border-radius:999px;font-size:16px;letter-spacing:2px;color:#fff;cursor:pointer;font-family:inherit;background:linear-gradient(135deg,#FF8A65,#FF6E7B);box-shadow:0 14px 30px rgba(255,110,123,.4),inset 0 -2px 0 rgba(0,0,0,.12);transition:transform .16s ease}
.i-btn:active{transform:scale(.96)}
.i-btn::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 55%)}
.i-btn span{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px}
.i-btn .ar{font-size:21px;line-height:1;transition:transform .2s ease}
.i-btn:active .ar{transform:translateX(4px)}
@keyframes twinkle{0%,100%{opacity:.3}50%{opacity:1}}

/* ---- 第二层：分组墙标题栏（含返回第一层） ---- */
.top{padding:16px 16px 4px;display:flex;align-items:center;gap:10px}
.top-back{width:34px;height:34px;flex:none;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:20px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;transition:transform .15s ease}
.top-back:active{transform:scale(.9)}
.top h1{font-size:24px;font-weight:700;letter-spacing:1px;color:var(--ink)}
.top .pill{margin-left:auto;font-size:12px;color:var(--muted);background:#FFF;border:1px solid var(--line);padding:4px 12px;border-radius:999px}

/* ---- 分组封面墙 ---- */
.groups{padding:14px 16px 40px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.g-card{background:var(--card);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;border:1px solid var(--line);transition:transform .18s ease,box-shadow .18s ease}
.g-card:active{transform:scale(.97)}
.cover{position:relative;aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cover svg{position:absolute;width:44%;height:auto;opacity:.95}
.cover .d1{position:absolute;width:26%;opacity:.55;left:10%;top:14%}
.cover .d2{position:absolute;width:20%;opacity:.5;right:9%;bottom:16%}
.meta{display:flex;align-items:center;justify-content:space-between;padding:10px 13px 12px}
.meta h3{font-size:15px;font-weight:600}
.meta span{font-size:12px;color:var(--muted)}

/* ---- 沉浸全屏查看器 ---- */
.viewer{position:fixed;inset:0;background:#000;z-index:50;display:none;flex-direction:column;overflow:hidden}
.viewer.open{display:flex}
.v-head{position:relative;display:flex;align-items:center;justify-content:space-between;padding:14px 12px 10px;color:#fff;z-index:5;background:linear-gradient(rgba(0,0,0,.45),transparent)}
.v-head .back{width:36px;height:36px;border:none;background:rgba(255,255,255,.16);color:#fff;font-size:20px;border-radius:50%;cursor:pointer}
.v-head .title{font-size:15px;font-weight:600}
.v-head .count{font-size:13px;opacity:.85}

.stage{flex:1;position:relative;overflow:hidden;touch-action:pan-y}
.track{display:flex;height:100%;transition:transform .32s cubic-bezier(.25,.8,.35,1)}
.slide{flex:0 0 100%;height:100%;display:flex;align-items:center;justify-content:center;padding:8px 6px}
.slide .art{width:100%;height:100%;max-width:min(94vw,420px);max-height:calc(100% - 8px);border-radius:14px;display:flex;align-items:center;justify-content:center;background-size:cover;transition:transform .25s ease}
.slide .art svg{width:46%;height:auto}
.slide.zoom .art{transform:scale(1.65)}
.nav-btn{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border:none;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:16px;cursor:pointer;z-index:4;display:flex;align-items:center;justify-content:center}
.nav-btn.prev{left:10px}.nav-btn.next{right:10px}
@media(max-width:640px){.nav-btn{display:none}}

.v-foot{position:relative;padding:10px 12px 16px;color:#fff;z-index:5;background:linear-gradient(transparent,rgba(0,0,0,.5))}
.thumb-strip{display:flex;gap:8px;overflow-x:auto;padding:6px 2px 10px;scrollbar-width:none}
.thumb-strip::-webkit-scrollbar{display:none}
.thumb{flex:0 0 52px;height:52px;border-radius:9px;border:2px solid transparent;overflow:hidden;cursor:pointer;opacity:.65;transition:opacity .15s,border-color .15s}
.thumb.active{opacity:1;border-color:#FFC9B5}
.thumb .box{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-size:cover}
.thumb .box svg{width:46%;height:auto}
.v-handle{display:flex;align-items:center;justify-content:center;gap:8px;width:fit-content;margin:8px auto 0;padding:9px 18px;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:13px;letter-spacing:1px;cursor:pointer;user-select:none;backdrop-filter:blur(4px);box-shadow:0 4px 14px rgba(0,0,0,.28);transition:background .2s ease,transform .15s ease,box-shadow .2s ease}
.v-handle:active{transform:scale(.96);background:rgba(255,255,255,.24);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.v-handle .h-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:#FFD54F}
.v-handle .h-icon svg{width:100%;height:100%}
.v-handle .h-text{font-weight:600}
.v-handle .h-count{font-size:12px;opacity:.78;margin-left:2px;font-weight:400;font-variant-numeric:tabular-nums}

/* ---- 底部导航切换（精选 / 普通） ---- */
.v-tabs{display:flex;justify-content:center;width:fit-content;margin:0 auto 6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:3px}
.v-tabs .tab{border:none;background:transparent;color:rgba(255,255,255,.78);font-size:12px;font-weight:500;padding:6px 20px;border-radius:999px;cursor:pointer;transition:background .2s ease,color .2s ease}
.v-tabs .tab.active{background:linear-gradient(135deg,#FF8A65,#FF6E7B);color:#fff;font-weight:600;box-shadow:0 2px 8px rgba(255,110,123,.4)}
.v-tabs .tab:not(.active):active{background:rgba(255,255,255,.16)}

/* ---- 目录抽屉 ---- */
.drawer{position:absolute;left:0;right:0;bottom:0;top:auto;background:#16130F;border-radius:24px 24px 0 0;padding:14px 16px 22px;transform:translateY(105%);transition:transform .3s cubic-bezier(.25,.8,.35,1);z-index:6;max-height:62%}
.drawer.open{transform:translateY(0)}
.drawer .d-head{display:flex;align-items:center;justify-content:space-between;color:#fff;padding-bottom:12px}
.drawer .d-head b{font-size:15px}
.drawer .d-head span{font-size:12px;opacity:.65}
.d-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;overflow-y:auto;max-height:calc(62vh - 90px);padding-bottom:8px}
.d-cell{aspect-ratio:3/4;border-radius:10px;overflow:hidden;cursor:pointer;display:flex;align-items:center;justify-content:center;background-size:cover;border:2px solid transparent}
.d-cell.active{border-color:#FF8A65}
.d-cell svg{width:44%;height:auto}
.d-close{width:100%;margin-top:12px;padding:11px;border:none;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font-size:14px;cursor:pointer}

/* ---- 入场动画 ---- */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---- 桌面居中预览 ---- */
@media(min-width:640px){
  .phone{border-left:1px solid var(--line);border-right:1px solid var(--line);box-shadow:0 0 40px rgba(64,58,55,.08)}
  .intro{left:50%;right:auto;width:480px;transform:translateX(-50%);max-width:100vw;box-shadow:0 0 60px rgba(11,23,50,.45)}
  .viewer{left:50%;right:auto;width:480px;transform:translateX(-50%);max-width:100vw}
}