/* ================================================================
   启丽制造 · 移动端样式
   视觉基调：暖调手作 + FDM 层纹（用 repeating-linear-gradient 模拟打印层理）
   ================================================================ */

:root{
  --ink:#1A1714;
  --ink-2:#2E2822;
  --paper:#FAF7F2;
  --card:#FFFFFF;
  --orange:#F2622C;
  --orange-l:#FF8A4C;
  --orange-bg:#FFF1E8;
  --green:#2F9E5B;
  --green-bg:#E8F6ED;
  --amber:#B45309;
  --amber-bg:#FEF3C7;
  --red:#C0392B;
  --red-bg:#FDECEA;
  --sub:#8A8177;
  --line:#EDE6DC;
  --r:18px;
  --safe: env(safe-area-inset-bottom, 0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:#D9D2C7;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--ink);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;}

.app{
  max-width:480px;margin:0 auto;min-height:100vh;background:var(--paper);
  position:relative;overflow-x:hidden;box-shadow:0 0 60px rgba(40,30,20,.18);
}
.view{display:none;}
.view.active{display:block;animation:fadeUp .28s ease both;}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.layers{position:relative;}
.layers::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,
    rgba(255,255,255,.07) 0px,rgba(255,255,255,.07) 1px,
    transparent 1px,transparent 5px);
}

/* ---------------- 首页 ---------------- */
.hero{
  position:relative;overflow:hidden;color:#fff;padding:30px 22px 56px;
  background:radial-gradient(130% 100% at 15% 0%,#3D3128 0%,#241E19 55%,#1A1714 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,
    rgba(255,255,255,.045) 0px,rgba(255,255,255,.045) 1px,
    transparent 1px,transparent 6px);
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--orange),var(--orange-l),transparent);
}
.hero .kicker{
  position:relative;display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;letter-spacing:2px;color:var(--orange-l);margin-bottom:14px;
}
.hero .dot{width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 10px var(--orange);}
.hero h1{position:relative;margin:0 0 10px;font-size:27px;line-height:1.28;font-weight:800;letter-spacing:.5px;}
.hero h1 em{font-style:normal;color:var(--orange-l);}
.hero p{position:relative;margin:0;font-size:13px;color:rgba(255,255,255,.62);line-height:1.7;max-width:290px;}
.hero .meta{position:relative;display:flex;gap:18px;margin-top:20px;font-size:11.5px;color:rgba(255,255,255,.45);}
.hero .meta b{display:block;font-size:16px;color:#fff;font-weight:700;margin-bottom:1px;}

.entries{padding:0 18px;margin-top:-30px;position:relative;z-index:2;}
.entry{
  display:block;width:100%;text-align:left;border:0;cursor:pointer;
  background:var(--card);border-radius:var(--r);padding:17px 18px;
  margin-bottom:12px;font-family:inherit;
  box-shadow:0 6px 24px rgba(60,45,30,.09);transition:transform .16s ease;
}
.entry:active{transform:scale(.985);}
.entry .row{display:flex;align-items:center;gap:13px;}
.entry .ic{
  width:46px;height:46px;border-radius:14px;flex:0 0 46px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:800;color:#fff;position:relative;overflow:hidden;
}
.entry.retail .ic{background:linear-gradient(150deg,#3D3128,#1A1714);}
.entry.charity .ic{background:linear-gradient(150deg,#37AD68,#2F9E5B);}
.entry .ic::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.16) 0 1px,transparent 1px 4px);
}
.entry h2{margin:0;font-size:16.5px;font-weight:700;letter-spacing:.2px;}
.entry .desc{margin:3px 0 0;font-size:12px;color:var(--sub);line-height:1.5;}
.entry .go{margin-left:auto;color:#CFC6BA;font-size:19px;}
.entry.locked{opacity:.78;}
.entry.locked .ic{background:linear-gradient(150deg,#B8B0A5,#9C948A);}

.custom{
  display:block;width:100%;border:0;cursor:pointer;text-align:left;font-family:inherit;
  margin:4px 0 0;padding:18px;border-radius:var(--r);
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(120deg,#F2622C 0%,#FF8A4C 100%);
  box-shadow:0 8px 26px rgba(242,98,44,.28);transition:transform .16s ease;
}
.custom:active{transform:scale(.985);}
.custom::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.11) 0 1px,transparent 1px 5px);
}
.custom .tag{
  position:relative;display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:1.5px;
  background:rgba(0,0,0,.18);padding:3px 9px;border-radius:5px;margin-bottom:9px;
}
.custom h3{position:relative;margin:0 0 5px;font-size:17px;font-weight:800;letter-spacing:.3px;}
.custom p{position:relative;margin:0;font-size:12px;opacity:.9;line-height:1.6;}
.custom .arw{position:absolute;right:18px;bottom:18px;font-size:20px;opacity:.85;}

.notice{
  margin:16px 18px 0;padding:13px 15px;border-radius:14px;
  background:var(--amber-bg);color:var(--amber);font-size:12.5px;line-height:1.65;
  border-left:3px solid #F0B429;
}
.foot{padding:20px 20px calc(40px + var(--safe));color:var(--sub);font-size:11.5px;line-height:1.85;}
.foot b{color:var(--ink);font-weight:700;display:block;margin-bottom:6px;font-size:12px;letter-spacing:.5px;}

/* ---------------- 列表页 ---------------- */
.nav{
  position:sticky;top:0;z-index:10;background:rgba(250,247,242,.93);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:8px;padding:11px 12px;
}
.nav .back{
  border:0;background:none;font-size:14px;color:var(--ink);
  padding:6px 4px;cursor:pointer;font-family:inherit;min-width:44px;min-height:44px;
  display:flex;align-items:center;font-weight:600;
}
.nav h2{margin:0;font-size:16px;font-weight:800;flex:1;text-align:center;padding-right:44px;letter-spacing:.5px;}
.bar{padding:13px 18px;font-size:12.5px;line-height:1.65;background:var(--green-bg);color:#1E6B42;border-bottom:1px solid rgba(47,158,91,.12);}
.bar.dark{background:var(--ink);color:rgba(255,255,255,.7);}
.bar b{color:#fff;}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;padding:16px 18px calc(40px + var(--safe));}
.card{
  background:var(--card);border-radius:16px;overflow:hidden;cursor:pointer;
  border:1px solid var(--line);padding:0;text-align:left;font-family:inherit;display:block;width:100%;
  transition:transform .16s ease;
}
.card:active{transform:scale(.975);}
.thumb{
  position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background-size:cover;background-position:center;
}
.thumb::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.14) 0 1px,transparent 1px 5px);
}
.thumb .num{font-size:30px;font-weight:800;color:rgba(255,255,255,.9);letter-spacing:1px;position:relative;z-index:1;}
.badge{
  position:absolute;top:9px;left:9px;z-index:2;font-size:10.5px;font-weight:700;
  padding:3px 8px;border-radius:6px;letter-spacing:.5px;
}
.badge.b-am{background:var(--amber-bg);color:var(--amber);}
.badge.b-rd{background:var(--red-bg);color:var(--red);}
.badge.b-gy{background:rgba(26,23,20,.55);color:#fff;}
.badge.b-pr{left:auto;right:9px;background:#FFF1E8;color:#E0551F;border:1px solid #FFD2BA;}
.card .meta{padding:11px 12px 13px;}
.card h3{margin:0 0 4px;font-size:13.5px;font-weight:700;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.card .code{font-size:10.5px;color:#B3AA9E;letter-spacing:.3px;}
.card .price{margin-top:8px;display:flex;align-items:baseline;gap:6px;}
.card .price b{font-size:16px;color:var(--ink);font-weight:800;}
.card .price i{font-size:11px;color:#C0B7AB;font-style:normal;text-decoration:line-through;}
.card.charity .price b{color:var(--green);}
.card.sold{opacity:.5;}

.empty{padding:60px 30px;text-align:center;color:var(--sub);font-size:14px;}

/* ---------------- 公益锁定页 ---------------- */
.lock{padding:54px 30px calc(60px + var(--safe));text-align:center;}
.lock .ring{
  width:76px;height:76px;margin:0 auto 24px;border-radius:50%;
  background:var(--green-bg);display:flex;align-items:center;justify-content:center;
  font-size:28px;color:var(--green);font-weight:800;position:relative;overflow:hidden;
}
.lock .ring::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,rgba(47,158,91,.12) 0 1px,transparent 1px 4px);
}
.lock h3{margin:0 0 12px;font-size:18px;font-weight:800;letter-spacing:.3px;}
.lock p{margin:0 0 7px;font-size:13px;color:var(--sub);line-height:1.8;}
.lock .next{display:inline-block;margin-top:18px;padding:10px 18px;border-radius:12px;background:var(--green-bg);color:#1E6B42;font-size:13px;font-weight:700;}
.follow-cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:11px 20px;
  border:0;border-radius:12px;cursor:pointer;font-family:inherit;
  background:linear-gradient(120deg,#1F7A4C,#2F9E5B);color:#fff;font-size:13.5px;font-weight:700;
  box-shadow:0 6px 18px rgba(31,122,76,.24);
}

/* ---------------- 详情 ---------------- */
.hero-img{
  position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background-size:cover;background-position:center;
}
.hero-img::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.13) 0 1px,transparent 1px 6px);
}
.hero-img .big{font-size:58px;font-weight:800;color:rgba(255,255,255,.92);letter-spacing:2px;position:relative;z-index:1;}
.hero-img .num{position:absolute;left:18px;bottom:16px;color:rgba(255,255,255,.85);font-size:11.5px;letter-spacing:1.5px;z-index:2;}
.back-float{
  position:absolute;top:14px;left:14px;width:38px;height:38px;border-radius:50%;
  background:rgba(26,23,20,.42);color:#fff;border:0;font-size:17px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);z-index:3;
}
.body{padding:20px 18px calc(104px + var(--safe));background:var(--paper);}
.title-row{display:flex;align-items:flex-start;gap:10px;}
.title-row h1{margin:0;font-size:20px;font-weight:800;line-height:1.38;flex:1;letter-spacing:.2px;}
.pill{flex:0 0 auto;font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:6px;margin-top:4px;letter-spacing:.5px;}
.pill.g{background:var(--green-bg);color:var(--green);}
.pill.a{background:var(--amber-bg);color:var(--amber);}
.pill.r{background:var(--red-bg);color:var(--red);}
.sub-code{margin:8px 0 0;font-size:11.5px;color:#B3AA9E;letter-spacing:.5px;}
.price-row{display:flex;align-items:baseline;gap:9px;margin:16px 0 0;}
.price-row b{font-size:29px;color:var(--ink);font-weight:800;}
.price-row s{font-size:13px;color:#C0B7AB;}
.price-row .save{font-size:11px;background:var(--red-bg);color:var(--red);padding:3px 8px;border-radius:5px;font-weight:700;}

.promo-strip{
  display:flex;align-items:flex-start;gap:9px;margin-top:13px;
  padding:12px 14px;border-radius:14px;
  background:linear-gradient(100deg,#FFF1E8,#FFE8DA);
  border:1px solid #FFD5BF;
}
.promo-strip .tag{
  flex:0 0 auto;background:linear-gradient(120deg,#F2622C,#FF8A4C);color:#fff;
  font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:5px;letter-spacing:.5px;margin-top:1px;
}
.promo-strip b{display:block;font-size:13.5px;font-weight:700;color:#8A3A12;line-height:1.4;}
.promo-strip span{display:block;font-size:11.5px;color:#A9704F;margin-top:2px;line-height:1.5;}

.defect{margin:20px 0 0;border:1px solid #F3D79B;background:#FFFBF0;border-radius:15px;padding:15px;}
.defect .h{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.defect .h b{font-size:13.5px;color:var(--amber);font-weight:800;}
.defect .h em{font-size:10.5px;font-style:normal;background:#FBE7BC;color:var(--amber);padding:2px 7px;border-radius:4px;font-weight:700;}
.defect p{margin:0;font-size:13.5px;line-height:1.75;color:#5A4A2A;}

.spec{margin:24px 0 0;border-top:1px solid var(--line);padding-top:4px;}
.spec h4{margin:16px 0 10px;font-size:12px;color:var(--sub);font-weight:700;letter-spacing:1.5px;}
.spec dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 14px;font-size:13.5px;}
.spec dt{color:var(--sub);}
.spec dd{margin:0;text-align:right;font-weight:600;}
.about{margin:22px 0 0;padding:15px;border-radius:15px;background:var(--green-bg);}
.about h4{margin:0 0 8px;font-size:12.5px;color:#1E6B42;font-weight:800;}
.about p{margin:0;font-size:12.5px;line-height:1.8;color:#2C6B4A;}

.cta{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:480px;z-index:20;
  background:rgba(250,247,242,.96);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding:11px 18px calc(11px + var(--safe));
  display:flex;gap:11px;align-items:center;
}
.cta .info{flex:0 0 auto;font-size:11px;color:var(--sub);line-height:1.4;}
.cta .info b{display:block;font-size:17px;color:var(--ink);font-weight:800;}
.cta button{
  flex:1;border:0;border-radius:14px;min-height:48px;font-family:inherit;
  font-size:15.5px;font-weight:700;color:#fff;cursor:pointer;letter-spacing:.5px;
  background:linear-gradient(120deg,#F2622C,#FF8A4C);box-shadow:0 6px 18px rgba(242,98,44,.3);
}
.cta button.dis{background:#D5CCC0;color:#8A8177;box-shadow:none;}
.sold-tip{background:var(--red-bg);color:var(--red);font-size:12.5px;padding:10px 13px;border-radius:11px;margin-top:16px;font-weight:600;}

/* ---------------- 定制 / 关注 ---------------- */
.cust-head{
  position:relative;overflow:hidden;color:#fff;padding:30px 22px 40px;
  background:linear-gradient(125deg,#F2622C 0%,#FF8A4C 100%);
}
.cust-head::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.12) 0 1px,transparent 1px 6px);
}
.follow-head{
  position:relative;overflow:hidden;color:#fff;padding:30px 22px 44px;
  background:linear-gradient(125deg,#1F7A4C 0%,#2F9E5B 58%,#49B87A 100%);
}
.follow-head::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.1) 0 1px,transparent 1px 6px);
}
.cust-head .back2,.follow-head .back2{
  position:relative;border:0;background:rgba(0,0,0,.16);color:#fff;
  width:38px;height:38px;border-radius:50%;font-size:17px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
}
.cust-head h1,.follow-head h1{position:relative;margin:0 0 8px;font-size:22px;font-weight:800;letter-spacing:.4px;line-height:1.35;}
.cust-head p,.follow-head p{position:relative;margin:0;font-size:12.5px;opacity:.92;line-height:1.7;max-width:300px;}
.cust-body,.follow-body{padding:20px 18px calc(44px + var(--safe));}

.qr-card{
  background:var(--card);border-radius:22px;padding:24px 20px 20px;text-align:center;
  border:1px solid var(--line);box-shadow:0 10px 34px rgba(60,45,30,.1);
  margin-top:-28px;position:relative;z-index:2;
}
.qr-card .who{font-size:12px;color:var(--sub);letter-spacing:1px;margin-bottom:14px;font-weight:600;line-height:1.5;}
.qr-box{
  width:196px;height:196px;margin:0 auto;padding:11px;
  background:#fff;border-radius:14px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.qr-box img{width:100%;height:100%;object-fit:contain;display:block;}
.qr-box.qr-empty{background:#FBF9F6;border:2px dashed #DCD3C6;}
.qr-empty .ph{text-align:center;color:#B3AA9E;}
.qr-empty .ph span{display:block;font-size:13.5px;font-weight:700;letter-spacing:.5px;}
.qr-empty .ph em{display:block;font-size:10.5px;font-style:normal;margin-top:6px;line-height:1.6;padding:0 10px;}
.qr-card .tip{margin:16px 0 0;font-size:14px;font-weight:700;color:var(--ink);}
.qr-card .tip2{margin:6px 0 0;font-size:12px;color:var(--sub);line-height:1.65;}
.org-badge,.wework{display:inline-block;margin-top:14px;font-size:10.5px;font-weight:700;padding:4px 11px;border-radius:6px;letter-spacing:.3px;}
.org-badge{background:var(--green-bg);color:#1E6B42;}
.wework{background:#EAF3FF;color:#1A6DBF;}

.next-event{
  display:flex;align-items:center;gap:14px;width:100%;
  margin-top:20px;padding:16px 18px;border-radius:18px;
  background:var(--card);border:1px solid var(--line);
  box-shadow:0 4px 18px rgba(60,45,30,.05);
}
.next-event .date{flex:0 0 56px;text-align:center;padding:8px 0;border-radius:13px;background:var(--green-bg);}
.next-event .date i{display:block;font-size:10px;font-style:normal;color:var(--green);font-weight:700;letter-spacing:1px;}
.next-event .date b{display:block;font-size:23px;font-weight:800;color:var(--green);line-height:1.15;}
.next-event .info{flex:1;}
.next-event .info .tl{display:inline-block;font-size:10px;font-weight:700;color:var(--green);background:var(--green-bg);padding:2px 8px;border-radius:4px;margin-bottom:6px;}
.next-event .info b{display:block;font-size:14px;font-weight:700;line-height:1.4;}
.next-event .info span{display:block;font-size:12px;color:var(--sub);margin-top:4px;line-height:1.5;}

.steps{margin:26px 0 0;}
.steps h4{margin:0 0 14px;font-size:12px;color:var(--sub);font-weight:700;letter-spacing:1.5px;}
.step{display:flex;gap:13px;margin-bottom:15px;}
.step .n{flex:0 0 26px;height:26px;border-radius:9px;background:var(--orange-bg);color:var(--orange);font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.step .t{font-size:13.5px;line-height:1.7;color:var(--ink-2);}
.step .t b{display:block;font-weight:700;margin-bottom:1px;}
.step .t span{color:var(--sub);font-size:12.5px;}

.perks{margin-top:18px;background:var(--card);border-radius:18px;border:1px solid var(--line);padding:18px;}
.perks h4{margin:0 0 13px;font-size:12.5px;font-weight:800;color:var(--ink);}
.perk{display:flex;gap:11px;margin-bottom:12px;font-size:13px;color:var(--ink-2);line-height:1.55;}
.perk:last-child{margin-bottom:0;}
.perk .k{flex:0 0 21px;height:21px;border-radius:7px;background:var(--green-bg);color:var(--green);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.perk span{color:var(--sub);font-size:12px;display:block;margin-top:1px;}

.cust-note{
  margin-top:22px;padding:14px 16px;border-radius:14px;
  background:var(--card);border:1px dashed #E0D6C8;
  font-size:12px;line-height:1.8;color:var(--sub);
}
.cust-note b{color:var(--ink);}

/* ---------------- 状态 ---------------- */
.skeleton{background:linear-gradient(90deg,#F0EBE3 25%,#F7F3ED 37%,#F0EBE3 63%);
  background-size:400% 100%;animation:shimmer 1.2s infinite;border-radius:12px;}
@keyframes shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
.toast{
  position:fixed;left:50%;bottom:80px;transform:translateX(-50%) translateY(20px);
  background:rgba(26,23,20,.92);color:#fff;font-size:13px;padding:11px 18px;border-radius:12px;
  opacity:0;pointer-events:none;transition:.25s;z-index:99;max-width:80vw;text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.error-box{margin:40px 18px;padding:20px;border-radius:14px;background:var(--card);border:1px solid var(--line);text-align:center;}
.error-box p{margin:0 0 14px;font-size:13.5px;color:var(--sub);line-height:1.7;}
.error-box button{border:0;border-radius:11px;padding:11px 22px;font-family:inherit;font-size:14px;font-weight:700;color:#fff;background:linear-gradient(120deg,#F2622C,#FF8A4C);cursor:pointer;}