/* ===== 花田拾光 小程序 UI 原型样式 ===== */
:root{
  --rose:#e8748f;
  --rose-d:#c44d6b;
  --rose-l:#fbe8ee;
  --green:#7bc47f;
  --green-d:#4a9d5a;
  --green-l:#e8f5ea;
  --gold:#f4a300;
  --ink:#2d2438;
  --muted:#8a8194;
  --line:#f0e8ed;
  --bg:#fdf8f5;
  --cream:#fff8f3;
  --white:#fff;
  --shadow:0 30px 60px -20px rgba(45,36,56,.25);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{font-family:"PingFang SC","Microsoft YaHei",-apple-system,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}

/* ===== 页头 ===== */
.page-header{background:linear-gradient(135deg,var(--rose-d) 0%,var(--rose) 60%,#f4a3b8 100%);color:#fff;padding:48px 0 30px;position:relative;overflow:hidden}
.page-header::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 80% 20%,rgba(255,255,255,.15),transparent 40%),radial-gradient(circle at 10% 90%,rgba(123,196,127,.25),transparent 40%)}
.ph-inner{max-width:1280px;margin:0 auto;padding:0 32px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;position:relative}
.ph-brand{display:flex;align-items:center;gap:16px}
.ph-logo{width:58px;height:58px;border-radius:16px;background:rgba(255,255,255,.2);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:800;border:1px solid rgba(255,255,255,.3)}
.ph-brand h1{font-size:26px;font-weight:800;letter-spacing:.5px}
.ph-brand p{font-size:14px;opacity:.9;margin-top:4px}
.ph-meta{display:flex;gap:8px;flex-wrap:wrap}
.tag{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);padding:6px 14px;border-radius:20px;font-size:13px}
.ph-legend{max-width:1280px;margin:24px auto 0;padding:0 32px;display:flex;gap:24px;flex-wrap:wrap;position:relative}
.legend-item{display:flex;align-items:center;gap:8px;font-size:14px;opacity:.95}
.dot{width:10px;height:10px;border-radius:50%}
.d1{background:#ffd54f}.d2{background:#7bc47f}.d3{background:#fff}.d4{background:#a8d8ff}

/* ===== 手机展示墙 ===== */
.wall{padding:60px 0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.wall-track{display:flex;gap:40px;padding:0 60px;width:max-content}
.phone-wrap{flex-shrink:0;width:375px}
.phone-label{text-align:center;font-size:16px;font-weight:700;color:var(--rose-d);margin-bottom:16px;letter-spacing:1px}

/* 手机框 */
.phone{
  width:375px;height:760px;border-radius:42px;background:#1a1620;padding:12px;
  box-shadow:var(--shadow),0 0 0 2px #2a2433 inset;position:relative;overflow:hidden;
}
.phone::before{content:"";position:absolute;top:50%;left:-3px;transform:translateY(-50%);width:3px;height:60px;background:#3a3142;border-radius:0 2px 2px 0}
.statusbar{height:30px;display:flex;justify-content:space-between;align-items:center;padding:0 24px;font-size:13px;font-weight:600;color:var(--ink);position:relative;z-index:5}
.sb-right{font-size:11px;letter-spacing:1px}
.capsule{position:absolute;top:8px;right:12px;width:88px;height:32px;background:rgba(0,0,0,.07);border-radius:18px;display:flex;align-items:center;justify-content:center;gap:4px;z-index:6}
.cap-dot{width:4px;height:4px;border-radius:50%;background:var(--ink);opacity:.5}
.cap-x{margin-left:6px;font-size:13px;opacity:.6}

/* 屏幕通用 */
.screen{position:absolute;top:42px;left:12px;right:12px;bottom:12px;border-radius:30px;overflow-y:auto;overflow-x:hidden;background:var(--bg)}
.screen::-webkit-scrollbar{width:0}

/* ===== 屏1：首页 ===== */
.screen-home{padding-bottom:0}
.h-search{display:flex;align-items:center;gap:10px;padding:8px 14px 6px}
.h-logo{font-weight:800;font-size:18px;color:var(--rose-d);flex-shrink:0}
.h-search-box{flex:1;background:var(--white);border:1px solid var(--line);border-radius:20px;padding:7px 14px;font-size:13px;color:var(--muted)}
.banner{margin:8px 14px;height:150px;border-radius:18px;background:linear-gradient(135deg,var(--rose-d),var(--rose) 60%,#f7b8c4);position:relative;overflow:hidden;box-shadow:0 12px 28px -12px rgba(196,77,107,.5)}
.banner::after{content:"🌹";position:absolute;font-size:80px;right:-6px;bottom:-12px;opacity:.3;transform:rotate(-12deg)}
.banner-tag{position:absolute;top:14px;left:16px;background:rgba(255,255,255,.25);padding:4px 12px;border-radius:14px;font-size:11px;color:#fff;backdrop-filter:blur(4px)}
.banner-title{position:absolute;top:44px;left:18px;color:#fff;font-size:28px;font-weight:800;line-height:1.15;text-shadow:0 2px 8px rgba(0,0,0,.15)}
.banner-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:6px}
.banner-dots span{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.5)}
.banner-dots .on{width:18px;background:#fff}
.h-vid-row{display:flex;gap:10px;padding:0 14px;margin-top:12px}
.h-vid{width:120px;height:74px;border-radius:14px;background:linear-gradient(135deg,var(--green-d),var(--green));position:relative;overflow:hidden;flex-shrink:0}
.h-vid::after{content:"🌾";position:absolute;right:-4px;bottom:-6px;font-size:40px;opacity:.35}
.play{position:absolute;top:50%;left:14px;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.9);color:var(--green-d);display:flex;align-items:center;justify-content:center;font-size:11px;padding-left:2px}
.h-vid-txt{position:absolute;left:46px;top:50%;transform:translateY(-50%);color:#fff;font-size:12px;font-weight:600;line-height:1.3}
.h-vid-txt small{font-weight:400;opacity:.85}
.h-cats{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.h-cat{background:var(--white);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;color:var(--ink);padding:6px 4px;gap:2px}
.ci{font-size:20px}
.h-vip{margin:12px 14px 0;background:linear-gradient(135deg,#3a2a1a,#5a4030);border-radius:14px;padding:11px 14px;display:flex;justify-content:space-between;align-items:center;color:#f4d8a8;font-size:12px}
.crown{font-size:14px}
.h-vip-r{color:var(--gold);font-weight:600}
.sec-h{display:flex;justify-content:space-between;align-items:center;padding:14px 14px 8px}
.sec-t{font-size:16px;font-weight:700;color:var(--ink)}
.sec-more{font-size:12px;color:var(--muted)}
.goods-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 14px}
.good{background:var(--white);border-radius:12px;overflow:hidden}
.good-img{height:90px}
.g1{background:linear-gradient(135deg,#e8748f,#c44d6b)}
.g2{background:linear-gradient(135deg,#f4a3b8,#e8748f)}
.g3{background:linear-gradient(135deg,#f4a300,#e6783a)}
.g4{background:linear-gradient(135deg,#7bc47f,#4a9d5a)}
.good-img{position:relative}
.good-img::after{content:"💐";position:absolute;font-size:34px;top:50%;left:50%;transform:translate(-50%,-50%);opacity:.5}
.good-name{padding:7px 9px 2px;font-size:12px;color:var(--ink)}
.good-price{padding:0 9px 9px;font-size:11px;color:var(--rose-d);font-weight:600}
.good-price b{font-size:16px}
.old{color:var(--muted);text-decoration:line-through;font-weight:400;margin-left:4px}
.h-base{margin:14px;height:96px;border-radius:16px;background:linear-gradient(135deg,var(--green-d),var(--green));position:relative;overflow:hidden;color:#fff}
.h-base::after{content:"🌿";position:absolute;font-size:64px;right:0;bottom:-8px;opacity:.3}
.h-base-tag{position:absolute;top:14px;left:16px;font-size:11px;opacity:.9;background:rgba(255,255,255,.2);padding:3px 10px;border-radius:10px}
.h-base-title{position:absolute;top:40px;left:16px;font-size:20px;font-weight:800}
.h-base-btn{position:absolute;bottom:14px;left:16px;background:#fff;color:var(--green-d);font-size:12px;font-weight:600;padding:6px 14px;border-radius:14px}
.tabbar{position:sticky;bottom:0;display:flex;background:var(--white);border-top:1px solid var(--line);padding:7px 0 10px;margin-top:14px}
.tb{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:18px;color:var(--muted)}
.tb span{font-size:10px}
.tb.on{color:var(--rose-d)}

/* ===== 屏2：基地 ===== */
.screen-garden{padding-bottom:20px}
.g-nav{padding:12px 16px;font-size:16px;font-weight:700;color:var(--ink)}
.g-video{margin:0 16px;height:180px;border-radius:16px;background:linear-gradient(135deg,#4a9d5a,#2d7a3d);position:relative;overflow:hidden}
.g-video::after{content:"🌷🌻🌹";position:absolute;font-size:30px;bottom:8px;right:10px;opacity:.4}
.g-play-big{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--green-d);display:flex;align-items:center;justify-content:center;font-size:22px;padding-left:4px;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.g-vdur{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.4);color:#fff;font-size:11px;padding:3px 8px;border-radius:8px}
.g-vbar{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.3)}
.g-vbar span{display:block;height:100%;background:var(--rose)}
.g-vmask{position:absolute;bottom:10px;left:14px;color:#fff;font-size:12px;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.g-tabs{display:flex;gap:18px;padding:16px 16px 10px;border-bottom:1px solid var(--line)}
.gt{font-size:14px;color:var(--muted);padding-bottom:8px;position:relative}
.gt.on{color:var(--rose-d);font-weight:600}
.gt.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--rose-d);border-radius:1px}
.g-info{padding:14px 16px}
.g-info h3{font-size:18px;color:var(--ink);margin-bottom:8px}
.g-meta{display:flex;gap:14px;font-size:12px;color:var(--muted);margin-bottom:10px}
.g-desc{font-size:13px;color:#5a5466;line-height:1.7}
.g-gallery{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:0 16px}
.gg{height:80px;border-radius:10px;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:8px}
.gg span{position:relative;z-index:2;color:#fff;font-size:11px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.gg::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.4))}
.gg1{background:linear-gradient(135deg,#7bc47f,#4a9d5a)}
.gg2{background:linear-gradient(135deg,#f4a300,#e6783a)}
.gg3{background:linear-gradient(135deg,#5a9fd4,#3a7ab0)}
.g-kinds{margin:16px;padding:14px;background:var(--green-l);border-radius:14px}
.gk-h{font-size:13px;font-weight:700;color:var(--green-d);margin-bottom:10px}
.gk-list{display:flex;flex-wrap:wrap;gap:8px}
.gk{background:#fff;padding:5px 12px;border-radius:14px;font-size:12px;color:var(--ink)}
.g-cta{margin:0 16px;text-align:center;background:linear-gradient(135deg,var(--rose-d),var(--rose));color:#fff;padding:13px;border-radius:14px;font-size:14px;font-weight:600}

/* ===== 屏3：商品详情 ===== */
.screen-product{padding-bottom:60px}
.p-topnav{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;padding:12px 16px}
.p-back,.p-share{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;font-size:18px;backdrop-filter:blur(4px)}
.p-hero{height:340px;background:linear-gradient(135deg,var(--rose-d),var(--rose) 50%,#f7b8c4);position:relative}
.p-hero::after{content:"🌹";position:absolute;font-size:140px;top:50%;left:50%;transform:translate(-50%,-50%);opacity:.45}
.p-hero-tag{position:absolute;top:56px;left:16px;background:rgba(255,255,255,.9);color:var(--rose-d);font-size:11px;font-weight:600;padding:4px 10px;border-radius:12px}
.p-hero-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:4px}
.p-hero-dots span{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.5)}
.p-hero-dots .on{width:16px;border-radius:3px;background:#fff}
.p-video-pin{position:absolute;top:56px;right:16px;background:rgba(0,0,0,.4);color:#fff;font-size:11px;padding:4px 10px;border-radius:12px}
.p-price{padding:14px 16px 4px;display:flex;justify-content:space-between;align-items:center}
.p-price-l{color:var(--rose-d);font-size:14px;font-weight:600}
.p-price-l b{font-size:28px}
.old{color:var(--muted);text-decoration:line-through;font-weight:400;margin-left:6px;font-size:12px}
.vipbadge{background:linear-gradient(135deg,#3a2a1a,#5a4030);color:#f4d8a8;font-size:11px;padding:4px 10px;border-radius:12px;font-weight:600}
.p-title{padding:0 16px;font-size:16px;font-weight:700;color:var(--ink);line-height:1.4}
.p-subtags{padding:10px 16px;display:flex;gap:12px;flex-wrap:wrap}
.p-subtags span{font-size:11px;color:var(--green-d);background:var(--green-l);padding:3px 8px;border-radius:8px}
.p-spec{margin:6px 16px 0;background:var(--white);border-radius:14px;padding:14px}
.ps-h{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:10px}
.ps-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.ps-row:last-child{margin-bottom:0}
.ps{padding:6px 14px;border-radius:12px;background:var(--bg);font-size:12px;color:#5a5466;border:1px solid transparent}
.ps.on{background:var(--rose-l);color:var(--rose-d);border-color:var(--rose);font-weight:600}
.p-viptip{margin:12px 16px 0;background:linear-gradient(135deg,#3a2a1a,#5a4030);border-radius:12px;padding:11px 14px;display:flex;justify-content:space-between;color:#f4d8a8;font-size:12px}
.p-viptip .link{color:var(--gold);font-weight:600}
.p-detail{margin:12px 16px 0}
.pd-h{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:10px;padding-left:8px;border-left:3px solid var(--rose-d)}
.pd-block{background:var(--white);border-radius:14px;padding:14px}
.pd-line{height:8px;background:var(--line);border-radius:4px;margin-bottom:8px}
.pd-line.short{width:60%}
.pd-img{height:120px;border-radius:10px;background:linear-gradient(135deg,var(--green-l),#d4ead8);margin-top:8px}
.p-bottom{position:sticky;bottom:0;background:var(--white);border-top:1px solid var(--line);padding:9px 14px;display:flex;align-items:center;gap:8px}
.pb-ic{width:44px;text-align:center;font-size:20px}
.pb-btn{flex:1;text-align:center;padding:11px;border-radius:24px;font-size:13px;font-weight:600;color:#fff}
.pb-cart{background:linear-gradient(135deg,var(--rose),#f4a3b8)}
.pb-buy{background:linear-gradient(135deg,var(--rose-d),var(--rose))}

/* ===== 屏4：会员中心 ===== */
.screen-member{background:linear-gradient(180deg,#2a1f1a 0%,#3a2a1a 200px,var(--bg) 320px);padding-bottom:20px}
.m-nav{padding:12px 16px;color:#fff;font-size:16px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.m-record{font-size:12px;font-weight:400;opacity:.85}
.m-card{margin:0 16px;background:linear-gradient(135deg,#d4a857,#f4d8a8);border-radius:18px;padding:18px;color:#3a2a1a;position:relative;overflow:hidden;box-shadow:0 14px 30px -10px rgba(212,168,87,.5)}
.m-card-bg{position:absolute;right:-20px;top:-20px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.15)}
.m-card-top{display:flex;gap:12px;align-items:center;position:relative}
.m-ava{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--rose-d),var(--rose));border:2px solid #fff}
.m-name{font-size:16px;font-weight:700}
.m-level{font-size:11px;background:rgba(58,42,26,.2);padding:2px 8px;border-radius:10px;margin-left:6px}
.m-bar{margin-top:8px;height:5px;border-radius:3px;background:rgba(58,42,26,.2);overflow:hidden}
.m-bar span{display:block;height:100%;background:#3a2a1a;border-radius:3px}
.m-bar-txt{font-size:10px;margin-top:5px;opacity:.85}
.m-card-mid{display:flex;justify-content:space-around;margin-top:16px;padding-top:14px;border-top:1px solid rgba(58,42,26,.15);position:relative}
.m-card-mid div{text-align:center}
.m-card-mid b{font-size:20px;display:block}
.m-card-mid small{font-size:11px;opacity:.75}
.m-lv{margin:16px;background:var(--white);border-radius:14px;padding:16px}
.ml-h{font-size:14px;font-weight:700;margin-bottom:14px}
.ml-track{display:flex;justify-content:space-between;position:relative}
.ml-track::before{content:"";position:absolute;top:7px;left:14px;right:14px;height:2px;background:var(--line)}
.ml-item{text-align:center;position:relative;z-index:2;background:var(--white);padding:0 4px}
.ml-dot{width:16px;height:16px;border-radius:50%;background:#e0d8e8;margin:0 auto 6px;border:3px solid var(--white)}
.ml-dot.done{background:var(--green)}
.ml-dot.cur{background:var(--rose-d);box-shadow:0 0 0 4px var(--rose-l)}
.ml-name{font-size:11px;color:var(--muted)}
.ml-item.cur .ml-name{color:var(--rose-d);font-weight:700}
.m-rights{margin:0 16px 16px}
.mr-h{font-size:14px;font-weight:700;margin-bottom:10px}
.mr-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mr{background:var(--white);border-radius:12px;padding:12px;position:relative}
.mr-i{font-size:24px}
.mr-status{position:absolute;top:10px;right:10px;font-size:10px;background:var(--green-l);color:var(--green-d);padding:2px 7px;border-radius:8px}
.m-recharge{margin:0 16px}
.mr-h .more{float:right;font-size:12px;color:var(--muted);font-weight:400}
.rc-row{display:flex;gap:10px}
.rc{flex:1;background:var(--white);border-radius:12px;padding:14px 8px;text-align:center;border:2px solid transparent;position:relative}
.rc b{font-size:18px;color:var(--ink)}
.gift{display:block;font-size:10px;color:var(--rose-d);margin-top:3px}
.rc.on{border-color:var(--rose-d);background:var(--rose-l)}
.m-bottom{position:sticky;bottom:0;background:linear-gradient(135deg,var(--rose-d),var(--rose));color:#fff;text-align:center;padding:13px;margin:16px;border-radius:14px;font-size:14px;font-weight:600}

/* ===== 屏5：订单 ===== */
.screen-order{padding-bottom:60px}
.o-nav{padding:12px 16px;font-size:16px;font-weight:700;background:var(--white)}
.o-addr{margin:8px 16px;background:var(--white);border-radius:14px;padding:14px;display:flex;align-items:center;gap:12px;position:relative;overflow:hidden}
.o-addr::after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:repeating-linear-gradient(90deg,var(--rose) 0,var(--rose) 8px,var(--green) 8px,var(--green) 16px)}
.oa-ico{font-size:20px}
.oa-main{flex:1}
.oa-name{font-size:14px;font-weight:700}
.oa-name small{font-weight:400;color:var(--muted);margin-left:6px}
.oa-detail{font-size:12px;color:#5a5466;margin-top:3px}
.oa-arrow{color:var(--muted)}
.o-goods{margin:8px 16px;background:var(--white);border-radius:14px;padding:12px}
.og{display:flex;gap:10px;padding:8px 0;align-items:center}
.og-img{width:56px;height:56px;border-radius:10px;flex-shrink:0}
.og-img.g1{background:linear-gradient(135deg,var(--rose-d),var(--rose))}
.og-img.g2{background:linear-gradient(135deg,#f4a3b8,var(--rose))}
.og-img::after{content:"💐";position:absolute;font-size:24px;margin:14px auto 0;width:56px;text-align:center;opacity:.5}
.og-info{flex:1}
.og-name{font-size:13px;font-weight:600}
.og-sku{font-size:11px;color:var(--muted);margin-top:3px}
.og-right{text-align:right}
.og-price{font-size:13px;font-weight:600;color:var(--ink)}
.og-qty{font-size:11px;color:var(--muted);margin-top:3px}
.o-row{margin:8px 16px;background:var(--white);border-radius:14px;padding:13px 14px;display:flex;justify-content:space-between;font-size:13px}
.o-row .val{color:var(--muted)}
.o-row .val.red{color:var(--rose-d);font-weight:600}
.o-sum{margin:8px 16px;background:var(--white);border-radius:14px;padding:14px}
.o-sum div{display:flex;justify-content:space-between;font-size:13px;color:#5a5466;padding:4px 0}
.o-sum .red{color:var(--rose-d)}
.o-total{border-top:1px solid var(--line);margin-top:6px;padding-top:10px!important}
.o-total .big{color:var(--rose-d);font-size:13px;font-weight:600}
.o-total .big b{font-size:22px}
.o-pay{margin:8px 16px;background:var(--white);border-radius:14px;padding:6px 14px}
.op-h{font-size:13px;font-weight:700;padding:8px 0}
.op{display:flex;align-items:center;gap:10px;padding:11px 0;border-top:1px solid var(--line);font-size:14px}
.op-i{font-size:20px;width:28px;text-align:center}
.op-i.wx{color:var(--green-d)}
.op span:nth-child(2){flex:1}
.op-radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--line)}
.op-radio.on{border-color:var(--rose-d);background:var(--rose-d);box-shadow:inset 0 0 0 3px #fff}
.op.on{color:var(--rose-d);font-weight:600}
.o-bottom{position:sticky;bottom:0;background:var(--white);border-top:1px solid var(--line);padding:10px 16px;display:flex;justify-content:space-between;align-items:center}
.ob-price{font-size:13px;color:var(--ink)}
.ob-price b{font-size:22px;color:var(--rose-d)}
.ob-btn{background:linear-gradient(135deg,var(--rose-d),var(--rose));color:#fff;padding:11px 20px;border-radius:24px;font-size:13px;font-weight:600}

/* ===== 屏6：钱包 ===== */
.screen-wallet{padding-bottom:20px}
.w-nav{padding:12px 16px;font-size:16px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.w-bill{font-size:12px;color:var(--muted);font-weight:400}
.w-balance{margin:0 16px;background:linear-gradient(135deg,var(--rose-d),var(--rose));border-radius:18px;padding:20px;color:#fff;box-shadow:0 14px 30px -10px rgba(196,77,107,.5)}
.wb-label{font-size:12px;opacity:.9}
.wb-num{font-size:38px;font-weight:800;margin:6px 0}
.wb-num small{font-size:20px}
.wb-sub{font-size:11px;opacity:.85;margin-bottom:14px}
.wb-actions{display:flex;gap:10px}
.wba{flex:1;background:#fff;color:var(--rose-d);text-align:center;padding:9px;border-radius:12px;font-size:13px;font-weight:600}
.wba.ghost{background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.4)}
.w-form{margin:14px 16px;background:var(--white);border-radius:14px;padding:16px}
.wf-h{font-size:14px;font-weight:700;margin-bottom:14px}
.wf-account{display:flex;align-items:center;gap:10px;background:var(--bg);border-radius:12px;padding:12px}
.wfa-ico{font-size:22px}
.wfa-name{font-size:14px;font-weight:600}
.wfa-id{font-size:11px;color:var(--muted);margin-top:2px}
.wfa-change{margin-left:auto;font-size:12px;color:var(--rose-d)}
.wf-amount{display:flex;align-items:baseline;gap:4px;margin:16px 0 6px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.wf-amount .cur{font-size:22px;color:var(--ink);font-weight:600}
.wf-amount .amt{font-size:36px;font-weight:800;color:var(--ink)}
.wf-amount .amt small{font-size:20px}
.wf-tip{font-size:11px;color:var(--muted)}
.wf-tip .all{color:var(--rose-d);font-weight:600;margin-left:6px}
.wf-info{margin-top:12px;font-size:11px;color:var(--muted);line-height:1.9}
.w-submit{margin-top:14px;background:linear-gradient(135deg,var(--rose-d),var(--rose));color:#fff;text-align:center;padding:13px;border-radius:24px;font-size:14px;font-weight:600}
.w-list{margin:0 16px;background:var(--white);border-radius:14px;padding:6px 14px}
.wl-h{font-size:13px;font-weight:700;padding:10px 0}
.wl-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.wl-l{display:flex;align-items:center;gap:10px;font-size:13px}
.wl-i{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.wl-i.out{background:#fdeaea;color:var(--rose-d)}
.wl-i.in{background:var(--green-l);color:var(--green-d)}
.wl-amt{font-size:14px;font-weight:600;text-align:right}
.wl-amt.out{color:var(--ink)}
.wl-amt.in{color:var(--green-d)}
.wl-time{font-size:10px;color:var(--muted);margin-top:2px}

/* ===== 屏7：个人中心 ===== */
.screen-me{padding-bottom:0;background:var(--bg)}
.me-head{background:linear-gradient(135deg,var(--rose-d),var(--rose));padding:18px 16px 30px;color:#fff;position:relative}
.me-user{display:flex;align-items:center;gap:12px}
.me-ava{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.25);border:2px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;font-size:24px}
.me-ava::after{content:"🌸"}
.me-name{font-size:17px;font-weight:700}
.me-lv{font-size:11px;background:rgba(255,255,255,.25);padding:2px 8px;border-radius:10px;margin-left:6px}
.me-phone{font-size:12px;opacity:.85;margin-top:3px}
.me-vip-card{margin-top:14px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);border-radius:12px;padding:10px 14px;display:flex;justify-content:space-between;font-size:12px;backdrop-filter:blur(4px)}
.me-asset{margin:-18px 16px 0;background:var(--white);border-radius:14px;padding:16px;display:flex;box-shadow:0 8px 20px -10px rgba(45,36,56,.15)}
.me-asset div{flex:1;text-align:center;position:relative}
.me-asset div:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);height:24px;width:1px;background:var(--line)}
.me-asset b{display:block;font-size:18px;color:var(--ink)}
.me-asset span{font-size:11px;color:var(--muted)}
.me-order{margin:12px 16px;background:var(--white);border-radius:14px;padding:14px}
.mo-h{display:flex;justify-content:space-between;font-size:14px;font-weight:700;margin-bottom:12px}
.mo-h .all{font-size:12px;color:var(--muted);font-weight:400}
.mo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;text-align:center}
.mo{font-size:11px;color:#5a5466;position:relative;padding:6px 0}
.mo-i{font-size:22px;display:block;margin-bottom:4px}
.badge{position:absolute;top:0;right:8px;background:var(--rose-d);color:#fff;font-size:9px;width:15px;height:15px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal}
.me-tool{margin:0 16px 16px;background:var(--white);border-radius:14px;padding:14px}
.mt-h{font-size:14px;font-weight:700;margin-bottom:12px}
.mt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;text-align:center}
.mt{font-size:11px;color:#5a5466}
.mt span{display:block;margin-top:4px}

/* ===== 页脚 ===== */
.page-footer{background:#fff;padding:50px 0 40px;border-top:1px solid var(--line)}
.pf-inner{max-width:1100px;margin:0 auto;padding:0 32px}
.pf-inner h3{font-size:22px;color:var(--ink);margin-bottom:24px;text-align:center}
.pf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pf-item{background:var(--bg);border-radius:14px;padding:18px}
.pf-t{font-size:15px;font-weight:700;color:var(--rose-d);margin-bottom:8px}
.pf-item p{font-size:13px;color:#5a5466;line-height:1.7}
.pf-note{margin-top:28px;text-align:center;font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:20px}

/* 滚动条 */
.wall::-webkit-scrollbar{height:10px}
.wall::-webkit-scrollbar-track{background:var(--bg)}
.wall::-webkit-scrollbar-thumb{background:var(--rose-l);border-radius:5px}
.wall::-webkit-scrollbar-thumb:hover{background:var(--rose)}

/* 响应式 */
@media(max-width:768px){
  .ph-inner,.ph-legend{padding:0 20px}
  .pf-grid{grid-template-columns:1fr 1fr}
  .wall-track{padding:0 24px;gap:24px}
}