/* ============================================================
   湘禹甄选 · 前台视觉 V3 —— 现代电商商城风
   参考：京东/美团/拼多多 H5 商城标准 UI
   浅灰底 · 白卡片 · 红主色 · 两列商品 · 贴底导航
   ============================================================ */
:root{
  --red:#d32f2f;        /* 电商红 */
  --red2:#c62828;       /* 深红 */
  --red3:#e53935;       /* 亮红 */
  --gold:#f59e0b;
  --bg:#f5f5f5;         /* 浅灰底 */
  --card:#ffffff;
  --line:#eeeeee;
  --text:#212121;
  --sub:#999999;
  --price:#e02020;
  --grad:linear-gradient(180deg,#d32f2f 0%,#c62828 100%);
  --radius:12px;
  --shadow:0 2px 8px rgba(0,0,0,.05);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:-apple-system,"SF Pro Display","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",sans-serif;min-height:100vh;overflow-x:hidden;}
#app{max-width:520px;margin:0 auto;padding-bottom:64px;position:relative;min-height:100vh;}
/* 全局泡泡动画层：彻底移除 */
.bubbles{display:none !important;}
/* ============ App 启动页（简洁红金） ============ */
#splash{position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#e53935 0%,#c62828 60%,#8e1616 100%);transition:opacity .5s ease;overflow:hidden;}
#splash.hide{opacity:0;pointer-events:none;}
#splash .sp-inner{display:flex;flex-direction:column;align-items:center;position:relative;z-index:2;transform:translateY(-66px);}
.sp-logo{width:108px;height:108px;border-radius:24px;object-fit:cover;background:#fff;
  box-shadow:0 0 26px 5px rgba(255,255,255,.5),0 0 58px 16px rgba(255,205,130,.4),0 14px 40px rgba(0,0,0,.3);
  animation:spPop .8s cubic-bezier(.2,1.4,.4,1) both;}
.sp-text{height:30px;width:auto;margin-top:18px;filter:brightness(0) invert(1);animation:spFade .7s ease .2s both;}
.sp-slogan{font-size:13px;color:#fff;letter-spacing:4px;margin-top:14px;font-weight:600;opacity:.92;animation:spFade .7s ease .4s both;}
.sp-foot{position:absolute;bottom:36px;left:0;right:0;text-align:center;font-size:11px;color:rgba(255,255,255,.6);letter-spacing:2px;z-index:2;animation:spFade .7s ease .55s both;}
.sp-bubbles{display:none !important;}
/* 启动页 · 特产汇聚特效 */
.sp-fly{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1;}
.sp-item{position:absolute;left:0;top:0;width:var(--sz,56px);height:var(--sz,56px);object-fit:contain;opacity:0;
  transform:translate(0,0) scale(.3) rotate(0deg);
  animation:spFly var(--dur,2.6s) cubic-bezier(.2,.7,.3,1) var(--del,0s) forwards;will-change:transform,opacity;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.25));}
@keyframes spFly{
  0%{opacity:0;transform:translate(0,0) scale(.3) rotate(0deg);}
  12%{opacity:1;}
  55%{opacity:1;transform:translate(calc(var(--dx)*.55 + var(--sx)), calc(var(--dy)*.55 + var(--sy))) scale(.82) rotate(calc(var(--spin,1)*180deg));}
  72%{opacity:1;transform:translate(var(--dx),var(--dy)) scale(1) rotate(calc(var(--spin,1)*180deg + var(--rot,8deg)));}
  100%{opacity:0;transform:translate(calc(var(--dx)*1.03),calc(var(--dy)*1.03)) scale(.92) rotate(calc(var(--spin,1)*180deg + var(--rot,8deg)));}
}
#splash.hide .sp-item{animation:spFlyOut .5s ease forwards;}
@keyframes spFlyOut{to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.7) rotate(0deg);}}
@keyframes spPop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes spFade{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:translateY(0)}}
/* ============ 顶部红色 Header（电商标准） ============ */
.top{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;z-index:50;
  padding:12px 14px;background:var(--grad);display:flex;align-items:center;gap:10px;}
.brand{flex:1;display:flex;align-items:center;gap:10px;min-width:0;}
.brow{display:flex;align-items:center;gap:10px;min-width:0;}
.brand .logo{width:50px;height:50px;border-radius:50%;object-fit:contain;flex-shrink:0;aspect-ratio:1/1;}
.brand .btext{height:26px;width:auto;object-fit:contain;flex-shrink:1;filter:brightness(0) invert(1);}
.slogan{display:none;}
.mid-wrap{flex-shrink:0;}
.mid-title{display:inline-block;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.45);
  color:#fff;font-size:12px;padding:5px 12px;border-radius:16px;letter-spacing:2px;font-weight:600;}
.top-side{display:none;}
/* 搜索条：白底胶囊，叠在 Header 底部（京东/美团式） */
.search{margin:-30px 12px 12px;position:relative;z-index:6;background:#fff;border-radius:22px;
  height:42px;padding:0 6px 0 16px;display:flex;align-items:center;gap:6px;
  box-shadow:0 4px 14px rgba(0,0,0,.1);}
.search input{flex:1;border:none;outline:none;font-size:14px;color:var(--text);background:transparent;min-width:0;}
.search input::placeholder{color:#bbb;}
.search button{width:32px;height:32px;border:none;border-radius:50%;background:var(--grad);
  color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.search button svg{width:17px;height:17px;display:block;}
/* ============ 视图 ============ */
#view{padding:74px 12px 12px;animation:fadeIn .3s ease;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
/* ============ Banner 轮播（通栏圆角大图） ============ */
.banner{position:relative;height:148px;border-radius:var(--radius);overflow:hidden;margin:16px 0 12px;box-shadow:var(--shadow);}
.btrack{position:absolute;top:0;left:0;display:flex;width:300%;height:100%;transition:transform .5s cubic-bezier(.4,0,.2,1);}
.bslide{flex:0 0 33.333333%;width:33.333333%;height:100%;display:flex;align-items:center;padding:0 20px;position:relative;
  background:linear-gradient(120deg,#ef5350 0%,#d32f2f 45%,#c62828 100%);}
.bslide::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.18) 100%);}
.btxt{color:#fff;position:relative;z-index:2;}
.btxt b{font-size:20px;font-weight:800;display:block;letter-spacing:1px;}
.btxt span{font-size:12px;opacity:.92;display:block;margin-top:6px;}
.bdots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:5px;z-index:3;}
.bdots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.6);display:block;transition:all .3s;}
.bdots i.on{width:16px;background:#fff;}
/* ============ 金刚区（白色卡片 · 方形图标宫格） ============ */
.grid-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 4px;background:var(--card);
  border-radius:var(--radius);padding:14px 6px 12px;margin-bottom:12px;box-shadow:var(--shadow);}
.gitem{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;padding:2px 0;}
.gitem:active{transform:scale(.94);}
.gico{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:21px;position:relative;box-shadow:inset 0 -2px 4px rgba(0,0,0,.04);}
.g1{background:linear-gradient(135deg,#ffe3e3,#ffc9c9);}
.g2{background:linear-gradient(135deg,#ffedd5,#ffd9a8);}
.g3{background:linear-gradient(135deg,#ffe3e3,#ffd0d0);}
.g4{background:linear-gradient(135deg,#ffedd5,#ffdcb8);}
.g5{background:linear-gradient(135deg,#ffe3e3,#ffc4c4);}
.g6{background:linear-gradient(135deg,#ffedd5,#ffd6a5);}
.g7{background:linear-gradient(135deg,#ffdcdc,#ffbfbf);}
.g8{background:linear-gradient(135deg,#fff3e0,#ffdfae);}
.gitem b{font-size:11px;font-weight:600;color:#666;}
/* ============ 分类（横滑胶囊） ============ */
.cats{display:flex;overflow-x:auto;gap:8px;padding:2px 0 12px;scrollbar-width:none;margin-bottom:0;}
.cats::-webkit-scrollbar{display:none;}
.cat{flex:0 0 auto;border-radius:20px;padding:8px 14px;display:flex;align-items:center;gap:4px;
  font-size:12.5px;background:var(--card);border:1px solid var(--line);color:#666;font-weight:500;
  box-shadow:var(--shadow);white-space:nowrap;}
.cat.active{background:var(--grad);color:#fff;border-color:transparent;font-weight:600;}
/* ============ 区块标题（电商标准） ============ */
.sec-title{display:flex;align-items:center;justify-content:space-between;margin:16px 2px 10px;}
.sec-title span{font-size:16px;font-weight:800;color:var(--text);position:relative;padding-left:11px;}
.sec-title span::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:16px;
  background:var(--red);border-radius:2px;}
.sec-title i{font-style:normal;font-size:12px;color:var(--sub);cursor:pointer;display:flex;align-items:center;gap:2px;}
.sec-title i::after{content:'›';font-size:14px;}
/* ============ 商品（两列标准电商卡） ============ */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.pcard{background:var(--card);border-radius:var(--radius);overflow:hidden;cursor:pointer;position:relative;
  box-shadow:var(--shadow);transition:transform .15s;}
.pcard:active{transform:scale(.97);}
.pcover{position:relative;aspect-ratio:1;background:#f7f7f7;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.pcover img{width:100%;height:100%;object-fit:cover;transition:transform .3s;}
.pcard:active .pcover img{transform:scale(1.04);}
.pbadge{position:absolute;top:8px;left:8px;font-size:9px;font-weight:700;color:#fff;padding:2px 7px;border-radius:4px;
  background:linear-gradient(90deg,#ef5350,#c62828);z-index:2;box-shadow:0 2px 6px rgba(0,0,0,.18);}
.pfav{position:absolute;bottom:8px;right:8px;width:28px;height:28px;border-radius:14px;background:rgba(255,255,255,.95);
  display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;z-index:2;
  box-shadow:0 2px 8px rgba(0,0,0,.15);}
.pinfo{padding:9px 10px 11px;}
.pseries{font-size:10px;color:#e02020;background:#fff1f1;padding:2px 6px;border-radius:4px;display:inline-block;margin-bottom:6px;}
.pname{font-size:13px;font-weight:500;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px;}
.pprice{display:flex;align-items:baseline;gap:5px;margin-top:6px;}
.pprice b{font-size:17px;font-weight:800;color:var(--price);}
.pprice .orig{font-size:11px;color:#bbb;text-decoration:line-through;}
.psales{font-size:11px;color:#999;margin-top:4px;}
/* ============ 底部导航（贴底白条 · 电商标准） ============ */
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;
  display:flex;background:rgba(255,255,255,.97);border-top:1px solid var(--line);z-index:60;
  padding-bottom:env(safe-area-inset-bottom,0);}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;padding:6px 0 7px;color:#999;cursor:pointer;font-size:10px;gap:2px;
  position:relative;}
.tab .tico{width:22px;height:22px;display:flex;align-items:center;justify-content:center;color:inherit;}
.tab .tico svg{width:100%;height:100%;display:block;}
.tab.active{color:var(--red);font-weight:600;}
.tab .cbadge{position:absolute;top:1px;left:calc(50% + 5px);min-width:15px;height:15px;border-radius:8px;
  background:var(--red);color:#fff;font-size:9px;font-style:normal;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;}
/* ============ 通用按钮 ============ */
.btn{display:block;width:100%;height:44px;border:none;border-radius:8px;background:var(--grad);color:#fff;
  font-size:15px;font-weight:700;cursor:pointer;transition:opacity .15s, transform .1s;}
.btn:active{opacity:.9;transform:scale(.98);}
.btn.ghost{background:#fff;border:1px solid var(--line);color:#666;}
/* ============ 空状态 ============ */
.empty{text-align:center;color:#999;padding:64px 0;font-size:13px;line-height:2;}
/* ============ 商品详情 ============ */
.detail{padding-bottom:130px;margin-top:12px;}
.gback{position:fixed;top:104px;left:max(12px, calc(50% - 248px));height:34px;min-width:78px;padding:0 16px 0 12px;border-radius:17px;background:rgba(255,255,255,.97);
  border:1px solid #f0e6e2;color:var(--text);font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:4px;
  cursor:pointer;z-index:40;box-shadow:0 2px 10px rgba(0,0,0,.14);}
.gback:active{transform:scale(.88);}
.dcarousel{background:#f7f7f7;border-radius:var(--radius);overflow:hidden;
  display:flex;align-items:center;justify-content:center;aspect-ratio:1;position:relative;}
.dcarousel img{width:100%;height:100%;object-fit:cover;}
.detail .othumb{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:0 2px;margin-top:8px;}
.detail .othumb::-webkit-scrollbar{display:none;}
.detail .othumb .t{width:56px;height:56px;border-radius:8px;background:#f7f7f7;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 56px;border:1px solid var(--line);cursor:pointer;}
.detail .othumb .t img{width:100%;height:100%;object-fit:cover;}
.swipe{position:relative;overflow:hidden;}
.swipe .swipe-track{display:flex;transition:transform .32s cubic-bezier(.22,.61,.36,1);}
.swipe .swipe-slide{flex:0 0 100%;min-width:100%;}
.swipe .swipe-slide img{width:100%;height:100%;object-fit:cover;display:block;}
.swipe-dots{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;gap:6px;z-index:6;pointer-events:none;}
.swipe-dots i{width:6px;height:6px;border-radius:3px;background:rgba(0,0,0,.2);transition:.25s;pointer-events:auto;cursor:pointer;}
.swipe-dots i.on{width:16px;background:var(--red);}
.fav-btn{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:18px;border:none;
  background:rgba(255,255,255,.95);font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.15);z-index:5;}
.fav-btn.on{color:#e02020;}
.dinfocard{background:var(--card);border-radius:var(--radius);padding:14px;margin-top:10px;box-shadow:var(--shadow);}
.dprice-row{display:flex;align-items:baseline;gap:8px;}
.dprice{font-size:24px;font-weight:800;color:var(--price);}
.dprice-row .orig{font-size:12px;color:#bbb;text-decoration:line-through;}
.dsales{margin-left:auto;font-size:11px;color:#999;}
.dname{font-size:16px;font-weight:700;margin-top:6px;line-height:1.4;}
.dsub{font-size:12px;color:#999;margin-top:4px;}
.dmeta{display:flex;gap:8px;margin-top:8px;font-size:11px;color:#999;}
.dmeta span{background:#f5f5f5;padding:2px 8px;border-radius:4px;}
.dserve{display:flex;justify-content:space-between;background:var(--card);border-radius:var(--radius);padding:10px 12px;margin-top:10px;box-shadow:var(--shadow);}
.dserve span{font-size:11px;color:#666;white-space:nowrap;}
.dsec{background:var(--card);border-radius:var(--radius);padding:14px;margin-top:10px;box-shadow:var(--shadow);}
.dsec h4{font-size:14px;color:var(--text);margin-bottom:8px;}
.dspecs{display:flex;flex-direction:column;}
.sp-row{display:flex;padding:7px 0;border-bottom:1px dashed #eee;font-size:12px;}
.sp-row:last-child{border-bottom:0;}
.sp-row label{width:88px;color:#999;flex:0 0 88px;}
.sp-row span{color:#333;flex:1;line-height:1.6;}
.ddetail{font-size:13px;color:#666;line-height:1.9;}
.ddetail h4{color:var(--text);margin:8px 0 5px;font-size:13px;}
.ddetail p{margin:4px 0;white-space:pre-line;}
.ddetail p.pimg{text-align:center;margin:6px 0;}
.ddetail p.pimg img{width:100%;border-radius:8px;}
.qtyrow{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px dashed #eee;}
.qtyrow label{font-size:12px;color:#999;}
.qtyhint{font-size:11px;color:var(--price);margin-left:8px;}
.dbuy{position:fixed;bottom:52px;left:50%;transform:translateX(-50%);width:100%;max-width:520px;
  display:flex;flex-direction:column;gap:8px;padding:10px 12px;background:#fff;
  border-top:1px solid var(--line);z-index:55;}
.dbuy .qtyrow{margin-top:0;padding-top:0;border-top:0;}
.dbuy .btns{display:flex;gap:8px;}
.dbuy .btn{flex:1;}
.dbuy .dcontact{margin-top:0;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 0;
  border:1px dashed #ddd;border-radius:8px;color:#666;background:#fafafa;
  font-size:13px;font-weight:600;cursor:pointer;}
/* ============ 购物车 ============ */
.citem{display:flex;gap:10px;background:var(--card);border-radius:var(--radius);padding:11px;margin-bottom:10px;box-shadow:var(--shadow);}
.csel{width:20px;height:20px;border-radius:10px;border:1.5px solid #ddd;display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex:0 0 20px;margin-top:24px;transition:all .2s;font-size:12px;color:#fff;}
.csel.on{background:var(--red);border-color:transparent;}
.cimg{width:72px;height:72px;border-radius:8px;background:#f7f7f7;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 72px;}
.cimg img{width:100%;height:100%;object-fit:cover;}
.cinfo{flex:1;min-width:0;}
.cname{font-size:13px;font-weight:500;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.cprice{font-size:15px;font-weight:700;color:var(--price);margin-top:4px;}
.cops{display:flex;align-items:center;gap:8px;margin-top:8px;}
.cnum{display:flex;align-items:center;gap:0;}
.cnum button{width:26px;height:26px;border:none;background:#f5f5f5;color:var(--text);border-radius:6px;font-size:15px;cursor:pointer;border:1px solid var(--line);}
.cnum button:active{background:var(--red);color:#fff;}
.cnum b{min-width:34px;text-align:center;font-size:14px;}
.cdel{margin-left:auto;color:#bbb;font-size:12px;background:none;border:none;cursor:pointer;align-self:flex-start;padding:4px;}
.cfoot{position:fixed;bottom:52px;left:50%;transform:translateX(-50%);width:100%;max-width:520px;display:flex;align-items:center;gap:12px;
  padding:10px 12px;background:#fff;border-top:1px solid var(--line);z-index:55;}
.cfoot .all{display:flex;align-items:center;gap:6px;font-size:12px;color:#666;cursor:pointer;}
.cfoot .all .csel{margin-top:0;}
.cfoot .total{flex:1;font-size:13px;color:#999;}
.cfoot .total b{font-size:19px;font-weight:800;color:var(--price);margin-left:5px;}
.cfoot .btn{width:110px;height:40px;}
/* ============ 下单 ============ */
.checkout{background:var(--card);border-radius:var(--radius);padding:14px;margin-bottom:10px;box-shadow:var(--shadow);}
.ckrow{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px dashed #eee;font-size:14px;}
.ckrow:last-child{border-bottom:none;}
.ckrow label{color:#999;}
.ckrow .v{font-weight:600;}
.payopts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.payopt{flex:1;min-width:96px;padding:11px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;border-radius:8px;background:#fafafa;border:1.5px solid var(--line);cursor:pointer;font-size:13px;position:relative;}
.payopt .payic{width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.payopt .payic .paylogo{width:22px;height:22px;object-fit:contain;display:block;}
.payopt .paynm{font-size:12.5px;color:var(--text);}
.payopt.active{border-color:var(--red);background:#fff1f1;}
.payopt.active .paynm{color:var(--red);font-weight:700;}
.payopt em{position:absolute;top:5px;right:8px;font-style:normal;color:var(--red);font-weight:800;font-size:14px;}
.ck-addr{background:var(--card);border-radius:var(--radius);padding:13px 14px;margin-bottom:10px;box-shadow:var(--shadow);display:flex;align-items:center;gap:11px;cursor:pointer;}
.ck-addr .ico{width:38px;height:38px;border-radius:8px;background:#fff1f1;display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 38px;}
.ck-addr .abody{flex:1;min-width:0;}
.ck-addr .aname{font-size:14px;font-weight:700;display:flex;align-items:center;gap:6px;}
.ck-addr .aname em{font-style:normal;font-size:9px;color:#fff;background:var(--red);padding:2px 6px;border-radius:4px;}
.ck-addr .aaddr{font-size:12px;color:#999;margin-top:4px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ck-addr .gohint{font-size:11px;color:var(--red);}
/* ============ 地址 ============ */
.addr-list{padding-bottom:70px;}
.addr-card{background:var(--card);border-radius:var(--radius);padding:13px 14px;margin-bottom:10px;box-shadow:var(--shadow);position:relative;}
.addr-card .top{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:700;}
.addr-card .top em{font-style:normal;font-size:9px;color:#fff;background:var(--red);padding:2px 6px;border-radius:4px;}
.addr-card .top .phone{font-weight:400;color:#999;font-size:12px;}
.addr-card .txt{font-size:12px;color:#666;margin-top:6px;line-height:1.6;}
.addr-card .ops{display:flex;gap:10px;justify-content:flex-end;margin-top:10px;font-size:12px;}
.addr-card .ops span{cursor:pointer;padding:4px 10px;border-radius:6px;background:#f5f5f5;border:1px solid var(--line);color:#666;}
.addr-bar{position:fixed;bottom:52px;left:50%;transform:translateX(-50%);width:100%;max-width:520px;padding:10px 12px;background:#fff;border-top:1px solid var(--line);z-index:55;}
.addr-empty{text-align:center;color:#999;padding:60px 0;font-size:13px;line-height:2;}
/* ============ 订单 ============ */
.oitem{background:var(--card);border-radius:var(--radius);padding:12px;margin-bottom:10px;box-shadow:var(--shadow);}
.ohead{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#999;margin-bottom:8px;}
.ostatus{font-weight:700;}
.ostatus.s0{color:var(--gold);}.ostatus.s1{color:#16a34a;}.ostatus.s2{color:#0ea5e9;}.ostatus.s3{color:#999;}.ostatus.s4{color:var(--red);}.ostatus.s5{color:#ef4444;}
.oitem .othumb{display:flex;gap:8px;margin:8px 0 4px;overflow-x:auto;scrollbar-width:none;}
.oitem .othumb .t{width:50px;height:50px;border-radius:8px;background:#f7f7f7;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 50px;}
.oitem .othumb .t img{width:100%;height:100%;object-fit:cover;}
.oitems{font-size:13px;color:var(--text);line-height:1.8;}
.oitem .olist{font-size:12px;color:#999;margin-top:6px;line-height:1.7;}
.oitem .odate{font-size:10px;color:#bbb;margin-top:3px;}
.oamt{display:flex;justify-content:flex-end;margin-top:8px;font-size:13px;color:#999;}
.oamt b{color:var(--price);font-size:16px;}
.oops{display:flex;gap:8px;justify-content:flex-end;margin-top:10px;}
.oops .btn{width:auto;padding:0 15px;height:32px;border-radius:6px;font-size:12px;font-weight:600;}
.otabs{display:flex;gap:7px;overflow-x:auto;padding:2px 0 11px;scrollbar-width:none;}
.otab{flex:0 0 auto;padding:7px 13px;border-radius:18px;background:var(--card);border:1px solid var(--line);font-size:12px;color:#666;cursor:pointer;}
.otab.active{background:var(--grad);color:#fff;border-color:transparent;font-weight:600;}
/* ============ 我的 ============ */
.mine-card{background:var(--grad);border-radius:var(--radius);padding:22px 14px;text-align:center;margin-bottom:10px;box-shadow:var(--shadow);}
.mine-avatar{width:62px;height:62px;border-radius:31px;background:rgba(255,255,255,.25);margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-size:27px;color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.2);}
.mine-name{font-size:16px;font-weight:800;color:#fff;}
.mine-phone{font-size:12px;color:rgba(255,255,255,.8);margin-top:5px;}
.mine-card .btn.ghost{background:rgba(255,255,255,.95);color:var(--red);border:none;margin-top:12px;height:38px;border-radius:8px;}
.mine-menu{background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.mine-menu .mi{display:flex;justify-content:space-between;padding:13px 14px;border-bottom:1px solid #f5f5f5;font-size:14px;cursor:pointer;}
.mine-menu .mi:last-child{border-bottom:none;}
.mine-menu .mi .mi-ico{display:inline-flex;width:22px;justify-content:center;}
/* ============ 表单 ============ */
.form{background:var(--card);border-radius:var(--radius);padding:20px;margin:14px 0;box-shadow:var(--shadow);}
.form h3{text-align:center;font-size:18px;margin-bottom:16px;letter-spacing:1px;color:var(--text);}
.frow{margin-bottom:12px;}
.frow label{font-size:12px;color:#999;display:block;margin-bottom:5px;}
.frow input{width:100%;height:42px;border-radius:8px;border:1px solid var(--line);background:#fafafa;color:var(--text);padding:0 12px;font-size:14px;outline:none;}
.frow input:focus{border-color:var(--red);}
.fhint{font-size:11px;color:#999;margin-top:5px;}
.agr{display:flex;align-items:flex-start;gap:7px;font-size:12px;color:#999;line-height:1.6;margin:12px 0 14px;}
.agr input{width:16px;height:16px;margin-top:1px;flex-shrink:0;accent-color:var(--red);}
.agr span{color:var(--red);cursor:pointer;}
.docbox{background:var(--card);border-radius:var(--radius);padding:18px;margin:12px 0 16px;box-shadow:var(--shadow);}
.docbox .doc-title{font-size:17px;font-weight:800;color:var(--text);margin-bottom:14px;letter-spacing:1px;}
.docbox h3{font-size:16px;margin:6px 0 10px;}
.docbox h4{font-size:14px;margin:14px 0 8px;color:var(--text);}
.docbox p{font-size:13px;color:#555;line-height:1.95;margin-bottom:10px;}
/* ============ 弹层 ============ */
.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:90;display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .2s ease;}
.modal{width:100%;max-width:520px;background:#fff;border-radius:16px 16px 0 0;padding:18px 16px 22px;max-height:76vh;overflow-y:auto;animation:slideUp .26s cubic-bezier(.4,0,.2,1);}
@keyframes slideUp{from{transform:translateY(60px);}to{transform:none;}}
.modal h3{font-size:16px;font-weight:800;text-align:center;margin-bottom:13px;}
.modal .mrow{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed #eee;font-size:13px;}
.modal .mrow label{color:#999;}
.modal .mrow .v{font-weight:600;max-width:62%;text-align:right;word-break:break-all;}
.modal .mitems{background:#fafafa;border-radius:8px;padding:10px 12px;margin:9px 0;font-size:13px;line-height:1.9;}
.modal .mclose{display:block;width:100%;height:40px;border:none;border-radius:8px;background:#f5f5f5;color:#666;font-size:14px;margin-top:12px;cursor:pointer;}
/* 公告弹窗（简洁电商风） */
.notice-mask{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:95;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease;padding:24px;}
.notice-box{position:relative;width:min(90vw,340px);max-height:72vh;overflow:hidden;background:#fff;border-radius:14px;
  padding:24px 18px 18px;box-shadow:0 12px 40px rgba(0,0,0,.2);transform:scale(.9);opacity:0;transition:transform .3s cubic-bezier(.34,1.56,.64,1),opacity .25s ease;}
.notice-box.in{transform:none;opacity:1;}
.notice-box .n-close{position:absolute;top:10px;right:12px;width:28px;height:28px;border:none;border-radius:50%;background:#f5f5f5;color:#999;font-size:16px;line-height:1;cursor:pointer;z-index:3;}
.notice-box .n-top{text-align:center;margin-bottom:8px;position:relative;z-index:2;}
.notice-box .n-logo{display:inline-flex;width:72px;height:72px;border-radius:18px;background:#fff;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.12);margin:0 auto 2px;overflow:hidden;}
.notice-box .n-logo img{width:72px;height:72px;object-fit:cover;}
.notice-box .n-badge{display:inline-block;margin-top:8px;padding:4px 14px;border-radius:16px;background:var(--grad);color:#fff;font-size:12px;font-weight:700;letter-spacing:1px;}
.notice-box .n-title{text-align:center;font-size:16px;font-weight:800;color:var(--text);margin:8px 0 9px;position:relative;z-index:2;}
.notice-box .n-content{font-size:13px;color:#555;line-height:1.8;background:#fafafa;border-radius:8px;padding:12px 14px;max-height:32vh;overflow-y:auto;word-break:break-word;position:relative;z-index:2;}
.notice-box .n-content h1,.notice-box .n-content h2,.notice-box .n-content h3{font-size:15px;color:var(--text);margin:7px 0 5px;}
.notice-box .n-content p{margin:5px 0;}
.notice-box .n-btn{display:block;width:100%;margin-top:12px;padding:11px;border:none;border-radius:8px;background:var(--grad);color:#fff;font-size:14px;font-weight:700;cursor:pointer;position:relative;z-index:2;}
.notice-box .n-btn:active{opacity:.9;}
.notice-box .n-bub{display:none;}
/* ============ Toast ============ */
#toast{position:fixed;top:15%;left:50%;transform:translateX(-50%) translateY(-8px);z-index:99;
  background:rgba(0,0,0,.78);color:#fff;padding:9px 18px;border-radius:20px;
  font-size:13px;opacity:0;transition:all .25s;pointer-events:none;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
/* ============ 二级分类页 ============ */
.catpage{padding:0 0 6px;}
.cpage-title{font-size:16px;font-weight:800;color:var(--text);
  padding:6px 2px 11px;position:relative;padding-left:11px;}
.cpage-title::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:15px;background:var(--red);border-radius:2px;}
/* ============ 物流跟踪 ============ */
.trkbox{margin:6px 0 4px;}
.trk-hd{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600;color:#333;background:#fafafa;border-radius:8px;padding:8px 11px;margin-bottom:9px;}
.trk-st{font-size:11px;color:#fff;background:var(--grad);border-radius:99px;padding:2px 9px;font-weight:500;}
.trk-list{position:relative;padding-left:18px;max-height:250px;overflow:auto;-webkit-overflow-scrolling:touch;}
.trk-list::before{content:'';position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:#eee;}
.trk-auto{display:flex;align-items:center;gap:7px;margin:2px 0 9px;font-size:12px;color:#666;}
.trk-it{position:relative;padding:0 0 14px 10px;}
.trk-it i{position:absolute;left:-18px;top:4px;width:11px;height:11px;border-radius:50%;background:#fff;border:2px solid #ccc;}
.trk-it.cur i{background:var(--red);border-color:var(--red);}
.trk-it b{display:block;font-size:13px;font-weight:500;color:#333;line-height:1.5;}
.trk-it em{display:block;font-style:normal;font-size:11px;color:#999;margin-top:2px;}
/* ============ 消息通知 ============ */
.ntitle{font-size:16px;font-weight:700;margin-bottom:11px;}
.nitem{background:var(--card);border-radius:var(--radius);padding:11px 13px;margin-bottom:9px;box-shadow:var(--shadow);}
.nitem .nt{display:flex;align-items:center;gap:8px;font-size:14px;}
.nitem .nc{font-size:12px;color:#999;line-height:1.6;margin-top:5px;}
.nitem .ntime{font-size:11px;color:#bbb;margin-top:5px;}
.nitem.unread{border-left:3px solid var(--red);}
.ndot{width:7px;height:7px;background:var(--red);border-radius:50%;display:inline-block;margin-left:2px;}
/* ============ 安装引导页 ============ */
.appguide{padding:14px 12px 22px;}
.ag-head{display:flex;align-items:center;justify-content:center;gap:8px;font-size:18px;font-weight:700;margin:6px 0 14px;}
.ag-logo{font-size:20px;}
.ag-tabs{display:flex;background:#e9e9e9;border-radius:20px;padding:3px;margin-bottom:12px;}
.ag-tab{flex:1;text-align:center;padding:8px 0;font-size:14px;font-weight:600;color:#666;border-radius:17px;cursor:pointer;}
.ag-tab.on{background:#fff;color:var(--red);box-shadow:0 2px 6px rgba(0,0,0,.08);}
.ag-card{background:#fff;border-radius:var(--radius);padding:18px 14px;box-shadow:var(--shadow);}
.ag-dlbtn{text-align:center;margin:6px 0 10px;}
.ag-dlbtn a{display:inline-block;background:var(--grad);color:#fff;font-size:16px;font-weight:700;padding:12px 32px;border-radius:10px;box-shadow:0 6px 16px rgba(0,0,0,.15);}
.ag-iosbig{text-align:center;font-size:44px;margin:4px 0 6px;}
.ag-tip{font-size:13px;color:#999;text-align:center;line-height:1.6;padding:0 8px;}
.ag-steps{margin-top:14px;}
.ag-step{display:flex;align-items:flex-start;gap:10px;padding:9px 4px;border-bottom:1px dashed #eee;}
.ag-step:last-child{border-bottom:none;}
.ag-step b{flex:0 0 21px;height:21px;line-height:21px;text-align:center;background:var(--red);color:#fff;font-size:12px;border-radius:50%;}
.ag-step span{flex:1;font-size:14px;line-height:1.5;}
.ag-note{margin-top:12px;text-align:center;font-size:12px;color:#999;}
.ag-foot{margin-top:16px;text-align:center;font-size:12px;color:#999;}
/* 大屏适配 */
@media(min-width:560px){
  #app{margin:0 auto;}
  #view{padding-top:86px;}
  .gback{top:104px;}
}

/* ============ 搜索页 ============ */
.search-page{padding:8px 12px 18px;}
.search-box{display:flex;align-items:center;gap:8px;background:#fff;border-radius:22px;padding:4px 6px 4px 16px;box-shadow:0 2px 10px rgba(0,0,0,.05);border:1px solid #f0f0f0;}
.search-box input{flex:1;border:none;outline:none;font-size:14px;background:transparent;color:#333;height:38px;}
.search-box button{flex:0 0 auto;width:40px;height:36px;border:none;border-radius:18px;background:var(--red);color:#fff;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.search-box button svg{width:17px;height:17px;}
.hot-title{font-size:14px;font-weight:700;margin:18px 2px 10px;color:#333;}
.hot-tags{display:flex;flex-wrap:wrap;gap:9px;}
.hot-tag{font-size:13px;color:#555;background:#fff;border:1px solid #f0e0d0;border-radius:15px;padding:6px 13px;cursor:pointer;}
.hot-tag:active{background:#fdf3ec;}
/* ============ 分类页筛选条 ============ */
.sbar{display:flex;gap:18px;padding:10px 4px 6px;}
.sb{font-size:13px;color:#999;cursor:pointer;padding:4px 2px;border-bottom:2px solid transparent;}
.sb.on{color:var(--red);font-weight:700;border-bottom-color:var(--red);}
/* ============ 购物车标题 ============ */
.cart-hd{display:flex;align-items:center;font-size:16px;font-weight:700;color:#333;padding:6px 2px 10px;margin-top:12px;}
/* ============ 我的-订单宫格 ============ */
.mine-orders{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);margin:12px;padding:12px;}
.mo-head{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:700;color:#333;padding-bottom:10px;}
.mo-head i{font-style:normal;font-size:12px;color:#999;font-weight:400;cursor:pointer;}
.mo-grid{display:flex;text-align:center;}
.mo{flex:1;cursor:pointer;}
.mo-ico{display:block;font-size:22px;margin-bottom:5px;}
.mo b{font-size:12px;color:#555;font-weight:500;}
.mo:active .mo-ico{transform:scale(1.12);}
/* ============ 结算-商品清单缩略图 ============ */
.ck-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed #f0f0f0;}
.ck-item img{width:46px;height:46px;border-radius:8px;object-fit:cover;background:#f7f7f7;flex:0 0 auto;}
.ck-info{flex:1;min-width:0;}
.ck-name{font-size:13px;color:#333;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ck-qty{font-size:11px;color:#999;margin-top:3px;}
.ck-price{flex:0 0 auto;font-size:14px;font-weight:700;color:var(--red);}
/* ============ 头部搜索图标 ============ */
.top-search{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid rgba(255,255,255,.35);}
.top-search svg{width:16px;height:16px;}
.top-search:active{background:rgba(255,255,255,.35);}

.gico-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:12px;}

/* ===== 拼多多风格：详情页 & 结算页 ===== */
.dtop{position:relative;}
.d-sold{position:absolute;right:0;bottom:0;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.55));color:#fff;font-size:11px;padding:5px 12px;border-radius:10px 0 0 0;z-index:5;}
.dserve i{font-style:normal;color:#f0e8e4;}
.dshop{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:var(--radius);padding:12px;margin-top:10px;box-shadow:var(--shadow);cursor:pointer;}
.shop-logo{width:40px;height:40px;border-radius:11px;background:var(--grad);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 40px;}
.shop-logo.sm{width:28px;height:28px;border-radius:8px;font-size:14px;flex:0 0 28px;}
.shop-info{flex:1;min-width:0;}
.shop-info b{font-size:14px;color:var(--text);display:block;}
.shop-info span{font-size:11px;color:#999;display:block;margin-top:2px;}
.shop-in{font-size:12px;color:var(--red);white-space:nowrap;}
.dspecs.grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px;}
.qtypad{padding-top:0;border-top:0;}
.dbuy{position:fixed;bottom:66px;left:50%;transform:translateX(-50%);width:100%;max-width:520px;background:rgba(255,255,255,.98);border:1px solid var(--line);border-radius:14px;display:flex;align-items:center;gap:10px;padding:9px 12px;box-sizing:border-box;box-shadow:0 2px 12px rgba(0,0,0,.08);z-index:30;}
.dbuy .dact{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;color:#666;cursor:pointer;min-width:46px;flex:0 0 auto;}
.dbuy .dact .dact-ic{font-size:20px;line-height:1;}
.dbuy .btn{flex:1;height:42px;border-radius:21px;font-size:14px;font-weight:700;}
.dbuy .btn.ghost{background:#fff1ef;border:1px solid var(--red);color:var(--red);}
/* 结算页 */
.ck-top{position:relative;text-align:center;padding:8px 0 12px;}
.ck-top h1{font-size:16px;font-weight:700;margin:0;}
.ck-back{position:fixed;top:104px;left:10px;z-index:60;}
.ck-shop{display:flex;align-items:center;gap:8px;padding:2px 2px 12px;border-bottom:1px solid #f4f0ee;font-size:13px;font-weight:700;color:var(--text);}
.ck-item img{width:64px;height:64px;border-radius:10px;object-fit:cover;background:#f7f7f7;flex:0 0 auto;}
.ck-qty{font-size:11px;color:#999;margin-top:4px;}
.ck-price{flex:0 0 auto;font-size:14px;font-weight:700;color:var(--red);}
.ck-sum{display:flex;justify-content:flex-end;align-items:center;gap:6px;padding-top:12px;border-top:1px dashed #f0f0f0;font-size:12px;color:#999;}
.ck-sum b{color:var(--red);font-size:16px;font-weight:800;}
.ck-bottom{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;background:#fff;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:10px 14px;box-sizing:border-box;z-index:30;}
.ck-total{font-size:12px;color:#666;}
.ck-total b{color:var(--red);font-size:19px;font-weight:800;margin-left:2px;}
.ck-bottom .btn{width:132px;height:42px;border-radius:21px;font-size:15px;font-weight:700;margin:0;}

/* 底部操作栏紧凑横排：图标横排 + 按钮加高缩短 */
.dbuy{flex-direction:row;align-items:center;gap:6px;padding:7px 10px;}
.dbuy .dact{flex-direction:row;gap:3px;padding:3px 4px;min-width:0;font-size:11px;}
.dbuy .dact .dact-ic{font-size:15px;line-height:1;}
.dbuy .btn{flex:0 0 auto;width:auto;height:44px;border-radius:22px;font-size:14px;padding:0 14px;}
.dbuy .btn:last-child{padding:0 24px;}
.dbuy .btn:last-child{flex:1;padding:0 16px;}

/* ============ 我的订单：状态速览宫格 + 时间线订单卡 ============ */
.o-topbar{display:flex;align-items:center;gap:10px;margin:12px 0 12px;padding:10px 4px;background:var(--grad);border-radius:var(--radius);color:#fff;position:relative;}
.o-back{background:none;border:none;color:#fff;font-size:17px;cursor:pointer;padding:6px 10px;}
.o-topbar span{font-size:16px;font-weight:800;letter-spacing:1px;}
.o-cells{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px;}
.o-cell{background:var(--card);border-radius:var(--radius);text-align:center;padding:10px 2px 9px;box-shadow:var(--shadow);cursor:pointer;border:2px solid transparent;transition:all .2s;}
.o-cell b{display:block;font-size:20px;font-weight:800;color:var(--red);line-height:1.2;}
.o-cell span{font-size:11px;color:#888;}
.o-cell.on{background:var(--grad);border-color:var(--red);}
.o-cell.on b,.o-cell.on span{color:#fff;}
.o-wrap{position:relative;padding-left:14px;}
.o-tl{position:absolute;left:3px;top:6px;bottom:0;width:2px;background:linear-gradient(180deg,var(--red),rgba(198,40,40,.25));}
.o-dot{position:absolute;left:-5px;top:22px;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--red);box-shadow:0 0 0 3px rgba(198,40,40,.15);}
.o-line-end{position:absolute;left:0;bottom:-14px;width:8px;height:8px;border-radius:50%;background:var(--red);}
.o-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:12px;padding:12px 12px 0;overflow:hidden;}
.o-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px dashed #f0e3e0;padding-bottom:9px;}
.o-no{font-size:11px;color:#b98a82;font-family:monospace;letter-spacing:.5px;}
.o-st{font-size:11px;font-weight:700;color:#19a974;background:#eafaf1;padding:3px 9px;border-radius:10px;}
.o-st.pay{color:#e02020;background:#fff0f0;}
.o-g{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #faf3f1;}
.o-g img{width:52px;height:52px;border-radius:10px;object-fit:cover;background:#f7f1ef;}
.o-gi{flex:1;min-width:0;}
.o-gn{font-size:13px;font-weight:600;color:var(--text);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.o-gm{font-size:11px;color:#a99;margin-top:3px;}
.o-gp{font-weight:700;color:var(--price);font-size:13px;}
.o-meta{display:flex;flex-wrap:wrap;gap:4px;font-size:11px;color:#b0a09b;padding:9px 0 4px;}
.o-meta b{color:var(--price);font-size:12px;}
.o-ops{display:flex;justify-content:flex-end;gap:8px;padding:10px 0 12px;}
.o-btn{border:1px solid transparent;border-radius:16px;padding:6px 14px;font-size:12px;cursor:pointer;transition:all .2s;}
.o-btn.ghost{background:#fff;border-color:#e8d9d5;color:#a66000;}
.o-btn.solid{background:var(--grad);color:#fff;font-weight:600;box-shadow:0 3px 10px rgba(198,40,40,.25);}
.o-btn.big{padding:9px 26px;font-size:13px;}
.o-empty{text-align:center;padding:70px 0 40px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);}
.o-empty span{font-size:44px;display:block;opacity:.75;}
.o-empty p{color:#b0a09b;font-size:13px;margin:14px 0 20px;}
.o-modal{background:#fff;border-radius:16px;width:min(88vw,340px);padding:18px 16px 16px;position:relative;}
.o-modal h3{text-align:center;font-size:16px;margin-bottom:12px;color:var(--text);}
.o-mrow{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:#888;padding:7px 0;border-bottom:1px dashed #f3e9e6;}
.o-mrow b{color:#3a3a3a;text-align:right;word-break:break-all;font-weight:600;}
.o-mrow span{flex-shrink:0;}
.o-md-g{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:7px 0;border-bottom:1px dashed #f3e9e6;}
.o-md-g img{width:38px;height:38px;border-radius:8px;object-fit:cover;}
.o-md-g span{flex:1;color:#3a3a3a;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.o-md-g b{color:var(--price);flex-shrink:0;}
.o-modal .o-btn{width:100%;margin-top:12px;}
/* ============ 我的：金红会员卡 + 功能宫格 + 服务区 ============ */
.m-card{background:linear-gradient(135deg,#ef5350 0%,#c62828 55%,#8e1e1e 100%);border-radius:18px;padding:20px 16px;display:flex;align-items:center;gap:13px;color:#fff;margin-bottom:12px;box-shadow:0 8px 22px rgba(198,40,40,.28);position:relative;overflow:hidden;}
.m-hero{background:linear-gradient(135deg,#ef5350 0%,#c62828 55%,#8e1e1e 100%);border-radius:18px;padding:18px 16px;display:flex;align-items:center;gap:13px;color:#fff;margin:12px 0 14px;box-shadow:0 8px 22px rgba(198,40,40,.28);position:relative;overflow:hidden;}
.m-hero::after{content:'';position:absolute;right:-30px;top:-30px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.08);}
.m-hero::before{content:'';position:absolute;right:20px;bottom:-40px;width:100px;height:100px;border-radius:50%;background:rgba(255,215,130,.14);}
.m-card::after{content:'';position:absolute;right:-30px;top:-30px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.08);}
.m-card::before{content:'';position:absolute;right:20px;bottom:-40px;width:100px;height:100px;border-radius:50%;background:rgba(255,215,130,.14);}
.m-avatar{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.95);color:var(--red);font-size:25px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.18);flex-shrink:0;}
.m-info{flex:1;min-width:0;}
.m-info b{font-size:17px;font-weight:800;display:block;}
.m-info span{font-size:12px;opacity:.82;margin-top:3px;display:block;}
.m-vip{font-style:normal;font-size:10px;background:rgba(255,215,130,.22);border:1px solid rgba(255,215,130,.5);color:#ffe1a8;padding:4px 9px;border-radius:12px;letter-spacing:1px;flex-shrink:0;font-weight:600;}
.m-card.guest{background:linear-gradient(135deg,#c62828,#8e1e1e);}
.m-cells{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden;}
.m-cell{display:flex;align-items:center;gap:10px;padding:13px 14px;}
.m-ic{font-size:18px;}
.m-cell b{flex:1;font-size:14px;color:var(--text);}
.m-cell i{font-style:normal;font-size:12px;color:#b0a09b;}
.m-sub{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #faf3f1;padding:10px 6px 12px;text-align:center;}
.m-subx{cursor:pointer;}
.m-subx span{display:block;font-size:11px;color:#999;}
.m-subx b{font-size:17px;color:var(--red);font-weight:800;display:block;margin-bottom:3px;}
.m-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px;}
.m-g{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);text-align:center;padding:16px 4px 12px;cursor:pointer;transition:all .15s;}
.m-g:active{transform:scale(.95);}
.m-g span{font-size:23px;display:block;line-height:1;}
.m-g b{font-size:11.5px;color:#666;font-weight:600;display:block;margin-top:8px;}
.m-srv{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:12px;}
.m-s{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;border-bottom:1px solid #faf3f1;cursor:pointer;font-size:13px;color:#555;}
.m-s:last-child{border-bottom:none;}
.m-s i{font-style:normal;color:#c9b6b0;font-size:15px;}
.m-foot{text-align:center;font-size:11px;color:#c0b2ac;padding:8px 0 6px;letter-spacing:1px;}

/* ============ 登录 / 注册 ============ */
.l-hero{background:var(--grad);margin:-4px 0 14px;border-radius:var(--radius);text-align:center;padding:26px 0 22px;color:#fff;position:relative;overflow:hidden;}
.l-hero::after{content:'';position:absolute;right:-24px;top:-24px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.09);}
.l-logo{width:52px;height:52px;border-radius:50%;background:#fff;color:var(--red);font-size:25px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;box-shadow:0 4px 14px rgba(0,0,0,.18);}
.l-hero h2{font-size:19px;letter-spacing:3px;font-weight:800;}
.l-hero p{font-size:11px;opacity:.85;margin-top:4px;letter-spacing:2px;}
.l-form{background:var(--card);}
/* ============ 文档页（协议/隐私） ============ */
.doc{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 16px;font-size:12.5px;line-height:1.9;color:#555;}
.doc h3{font-size:15px;color:var(--text);text-align:center;margin-bottom:12px;}
.doc p{margin:10px 0;text-indent:2em;}
/* ============ 地址 ============ */
.ahead{display:flex;align-items:center;gap:8px;}
.ahead b{font-size:14px;color:var(--text);}
.ahead span{font-size:12px;color:#888;}
.ahead em{font-style:normal;font-size:10px;color:var(--red);background:#fff0f0;padding:2px 6px;border-radius:8px;}
.addr-card.sel{border:2px solid var(--red);}
.addr-fix{position:fixed;bottom:70px;left:50%;transform:translateX(-50%);width:100%;max-width:520px;padding:0 12px;z-index:20;}
.addr-fix .btn{width:100%;}
/* ============ 通知 ============ */
.n-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:13px 14px;margin-bottom:10px;}
.n-t{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.n-t b{font-size:13.5px;color:var(--text);}
.n-t span{font-size:10.5px;color:#bbb;}
.n-b{font-size:12.5px;color:#777;line-height:1.7;}
/* ============ 安装引导 ============ */
.ag-card{background:var(--grad);border-radius:var(--radius);text-align:center;color:#fff;padding:20px 16px;margin-bottom:12px;box-shadow:0 6px 16px rgba(198,40,40,.25);}
.ag-card span{font-size:34px;display:block;}
.ag-card h3{font-size:16px;margin:8px 0 6px;letter-spacing:1px;}
.ag-card p{font-size:12px;opacity:.9;}
.ag-step{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px;margin-bottom:10px;}
.ag-step b{font-size:13.5px;color:var(--red);display:block;margin-bottom:7px;}
.ag-step p{font-size:12.5px;color:#666;line-height:1.9;margin:0;border-bottom:1px dashed #f5edea;padding:3px 0;}
.ag-step p:last-child{border-bottom:none;}

/* ============ 购物车：抖音式空态 + 你可能还会喜欢 ============ */
.cart-hd{display:flex;align-items:center;font-size:16px;font-weight:800;color:#fff;background:var(--grad);border-radius:var(--radius);padding:12px 16px;margin:12px 0 12px;letter-spacing:2px;}
.c-empty{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);text-align:center;padding:46px 16px 40px;margin-bottom:14px;}
.c-empty-ic{width:74px;height:74px;border-radius:50%;background:#fff0ee;color:var(--red);font-size:36px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:inset 0 0 0 1px #ffe0dc;}
.c-empty b{font-size:17px;color:var(--text);font-weight:700;}
.c-empty p{font-size:13px;color:#b0a09b;margin:8px 0 20px;}
.c-empty .btn{padding:11px 52px;border-radius:22px;}
.c-like-hd{display:flex;align-items:center;justify-content:space-between;padding:4px 2px 10px;}
.c-like-hd span{font-size:15px;font-weight:800;color:var(--text);position:relative;padding-left:10px;}
.c-like-hd span::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:15px;border-radius:2px;background:var(--red);}
.c-like-hd i{font-style:normal;font-size:11px;color:#b0a09b;cursor:pointer;}
.c-like{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;margin:0 -12px;padding-left:12px;padding-right:12px;scrollbar-width:none;}
.c-like::-webkit-scrollbar{display:none;}
.cl-card{flex:0 0 138px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;cursor:pointer;transition:transform .15s;}
.cl-card:active{transform:scale(.97);}
.cl-img{position:relative;aspect-ratio:1/1;background:#f7f1ef;}
.cl-img img{width:100%;height:100%;object-fit:cover;display:block;}
.cl-tag{position:absolute;left:6px;bottom:6px;font-size:9px;color:#fff;background:var(--grad);padding:3px 6px;border-radius:8px;font-weight:600;box-shadow:0 2px 6px rgba(198,40,40,.3);}
.cl-name{font-size:12px;color:#555;line-height:1.45;padding:8px 9px 2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:35px;}
.cl-p{display:flex;align-items:baseline;gap:4px;padding:2px 9px;}
.cl-p b{font-size:15px;color:var(--price);font-weight:800;}
.cl-p i{font-style:normal;font-size:9px;color:#fff;background:var(--red);border-radius:6px;padding:1px 4px;}
.cl-s{font-size:10px;color:#bbb;padding:2px 9px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ============ 订单页：电商式状态Tab + 订单卡 ============ */
.otabs{display:flex;gap:0;overflow-x:auto;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:12px;padding:4px;scrollbar-width:none;}
.otabs::-webkit-scrollbar{display:none;}
.otabs span{flex:0 0 auto;padding:9px 15px;font-size:13px;color:#888;cursor:pointer;border-radius:14px;white-space:nowrap;transition:all .2s;display:flex;align-items:center;gap:4px;}
.otabs span i{font-style:normal;font-size:10px;background:#f4ebe8;color:#b98a82;border-radius:8px;padding:1px 6px;}
.otabs span.on{background:var(--grad);color:#fff;font-weight:700;}
.otabs span.on i{background:rgba(255,255,255,.25);color:#fff;}
.oc{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden;}
.och{display:flex;justify-content:space-between;align-items:center;padding:12px 14px 9px;border-bottom:1px solid #faf3f1;}
.osh{font-size:13px;font-weight:700;color:var(--text);}
.och b{font-size:12px;font-weight:700;color:#19a974;background:#eafaf1;padding:3px 10px;border-radius:10px;}
.och b.pay{color:#e02020;background:#fff0f0;}
.og{display:flex;gap:10px;padding:11px 14px;border-bottom:1px dashed #f5edea;align-items:center;}
.og img{width:58px;height:58px;border-radius:10px;object-fit:cover;background:#f7f1ef;flex-shrink:0;}
.ogi{flex:1;min-width:0;}
.ogn{font-size:13px;font-weight:600;color:var(--text);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.ogm{font-size:11px;color:#b0a09b;margin-top:4px;}
.ogp{text-align:right;font-size:13px;color:var(--price);font-weight:700;}
.ogp i{display:block;font-style:normal;font-size:11px;color:#b0a09b;font-weight:400;margin-top:3px;}
.oct{display:flex;justify-content:flex-end;align-items:center;gap:4px;font-size:12px;color:#999;padding:9px 14px;border-bottom:1px solid #faf3f1;}
.oct b{font-size:14px;color:var(--price);}
.oco{display:flex;justify-content:flex-end;gap:8px;padding:11px 14px 13px;}
.ob{border:1px solid transparent;border-radius:15px;padding:6px 13px;font-size:12px;cursor:pointer;transition:all .2s;}
.ob.ghost{background:#fff;border-color:#e8d9d5;color:#a66000;}
.ob.solid{background:var(--grad);color:#fff;font-weight:600;box-shadow:0 3px 10px rgba(198,40,40,.25);}
/* ============ 我的：会员卡 + 订单宫格 + 服务列表 ============ */
.m-title{display:flex;align-items:center;justify-content:space-between;padding:4px 2px 10px;}
.m-title span{font-size:15px;font-weight:800;color:var(--text);position:relative;padding-left:10px;}
.m-title span::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:15px;border-radius:2px;background:var(--red);}
.m-title i{font-style:normal;font-size:11px;color:#b0a09b;cursor:pointer;}
.m-ords{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:4px;}
.m-ord{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);text-align:center;padding:14px 2px 11px;cursor:pointer;transition:all .15s;}
.m-ord:active{transform:scale(.94);}
.m-ord span{font-size:22px;display:block;line-height:1;}
.m-ord b{display:block;font-size:15px;color:var(--red);font-weight:800;margin:5px 0 2px;}
.m-ord i{font-style:normal;font-size:11px;color:#888;}
.m-tools{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;}
.m-tool{display:flex;align-items:center;gap:12px;padding:13px 14px;border-bottom:1px solid #faf3f1;cursor:pointer;}
.m-tool:last-child{border-bottom:none;}
.m-tool span{font-size:19px;}
.m-tool b{flex:1;font-size:13.5px;color:#444;font-weight:600;}
.m-tool i{font-style:normal;color:#c9b6b0;font-size:15px;}
.m-out{margin:6px 0 10px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);text-align:center;padding:13px;font-size:14px;color:var(--red);cursor:pointer;font-weight:600;}

/* ============ 登录/注册：品牌展示页 ============ */
.l-wrap{position:relative;margin:-4px 0 0;min-height:calc(100vh - 150px);}
.l-bg{position:absolute;inset:0;border-radius:var(--radius) var(--radius) 46% 46%/0 0 26px 26px;background:linear-gradient(160deg,#ef5350 0%,#c62828 60%,#8e1e1e 100%);overflow:hidden;}
.l-bg span{position:absolute;border-radius:50%;background:rgba(255,255,255,.07);}
.lb1{width:170px;height:170px;right:-46px;top:-46px;}
.lb2{width:120px;height:120px;left:-36px;top:90px;background:rgba(255,215,130,.10)!important;}
.lb3{width:200px;height:200px;right:18%;bottom:-110px;background:rgba(255,255,255,.05)!important;}
.l-brand{position:relative;padding:52px 0 30px;text-align:center;color:#fff;}
.l-logo{width:74px;height:74px;border-radius:50%;background:#fff;color:var(--red);font-size:36px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;box-shadow:0 10px 26px rgba(0,0,0,.22);border:3px solid rgba(255,255,255,.5);}
.l-brand h1{font-size:24px;letter-spacing:6px;font-weight:800;margin:0;}
.l-brand p{font-size:10px;opacity:.88;letter-spacing:2px;margin-top:8px;}
.l-card{position:relative;background:#fff;border-radius:20px 20px 0 0;padding:24px 20px 30px;margin-top:0;box-shadow:0 -10px 40px rgba(142,30,30,.18);}
.l-tabs{display:flex;justify-content:center;gap:34px;margin-bottom:22px;}
.l-tabs b{font-size:16px;color:#b0a09b;font-weight:600;padding-bottom:8px;position:relative;cursor:pointer;}
.l-tabs b.on{color:var(--text);font-weight:800;}
.l-tabs b.on::after{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:22px;height:4px;border-radius:3px;background:var(--grad);}
.l-card .frow{display:flex;align-items:center;background:#f8f4f2;border-radius:14px;margin-bottom:13px;padding:0 14px;border:1.5px solid transparent;transition:border-color .2s;}
.l-card .frow:focus-within{border-color:var(--red);background:#fff;}
.fic{font-size:16px;margin-right:8px;opacity:.7;}
.l-card .frow input{border:none;background:none;outline:none;flex:1;padding:14px 0;font-size:14px;color:var(--text);}
.l-card .agr{font-size:11px;color:#999;margin:4px 2px 18px;display:flex;align-items:center;gap:5px;}
.l-card .agr input{accent-color:var(--red);}
.l-card .agr span{color:var(--red);}
.l-btn{width:100%;padding:14px;font-size:16px;letter-spacing:6px;border-radius:16px;}
.l-foot{text-align:center;font-size:12.5px;color:#999;margin-top:18px;}
.l-foot span{color:var(--red);font-weight:600;cursor:pointer;}
/* 我的：头像上传 */
.m-avatar{position:relative;}
.m-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;}
.m-avatar i{position:absolute;right:-2px;bottom:-2px;font-style:normal;font-size:11px;background:var(--grad);color:#fff;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.25);}
.m-avatar.na{opacity:.95;}

/* logo 圆底头像 */
.l-logo{overflow:hidden;}
.l-logo img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;}
.fic{display:flex;align-items:center;justify-content:center;margin-right:8px;opacity:.9;}

/* 编辑资料弹窗 */
.pmodal{position:fixed;left:50%;top:46%;transform:translate(-50%,-50%);width:min(88vw,340px);background:#fff;border-radius:18px;padding:20px 18px;box-shadow:0 12px 40px rgba(0,0,0,.18);z-index:60;}
.pm-head{display:flex;justify-content:space-between;align-items:center;font-size:16px;color:#222;margin-bottom:14px;}
.pm-x{font-size:18px;color:#999;padding:2px 8px;cursor:pointer;}
.pm-av{position:relative;width:96px;height:96px;margin:0 auto 6px;cursor:pointer;}
.pm-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:1px solid #eee;}
.pm-av i{position:absolute;right:0;bottom:0;width:26px;height:26px;background:var(--red);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;border:2px solid #fff;}
.pm-tip{text-align:center;font-size:12px;color:#999;margin-bottom:14px;}
.pm-row{display:flex;align-items:center;gap:10px;border:1px solid #eee;border-radius:12px;padding:10px 12px;margin-bottom:18px;}
.pm-row label{font-size:14px;color:#666;white-space:nowrap;}
.pm-row input{flex:1;border:none;outline:none;font-size:15px;color:#222;background:transparent;}
.pm-ops{display:flex;}
.pm-ok{flex:1;background:var(--red);color:#fff;border:none;border-radius:12px;padding:12px 0;font-size:16px;cursor:pointer;}
/* 裁剪弹窗 */
.crop-box{position:fixed;left:50%;top:46%;transform:translate(-50%,-50%);width:min(92vw,360px);background:#fff;border-radius:18px;padding:18px 16px;box-shadow:0 12px 40px rgba(0,0,0,.2);z-index:100;}
.crop-title{font-size:13px;color:#666;text-align:center;margin-bottom:12px;}
.crop-stage{position:relative;overflow:hidden;border-radius:14px;background:#151515;margin:0 auto;touch-action:none;}
.crop-stage img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:none;user-select:none;-webkit-user-drag:none;}
.crop-circle{position:absolute;left:50%;top:50%;width:84%;height:84%;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 0 999px rgba(0,0,0,.55);border:2px solid #fff;pointer-events:none;}
.crop-bar{display:flex;align-items:center;gap:10px;padding:12px 2px 8px;}
.crop-bar .ci{font-size:12px;color:#999;white-space:nowrap;}
.crop-bar input{flex:1;accent-color:var(--red);}
.crop-ops{display:flex;gap:12px;}
.crop-ops button{flex:1;padding:11px 0;border:none;border-radius:10px;font-size:15px;cursor:pointer;}
.crop-cancel{background:#f2f2f2;color:#666;}
.crop-ok{background:var(--red);color:#fff;}

/* 原创 SVG 图标 */
.m-ord span{color:var(--red);}
.m-tool span{color:#8a746c;}
.m-ord span svg,.m-tool span svg{display:block;margin:0 auto;}
.m-avatar i svg{display:block;margin:0 auto;}

.pprice .zl{font-style:normal;font-size:9px;color:#fff;background:var(--red);border-radius:6px;padding:1px 4px;flex-shrink:0;margin-left:2px;}

.sec-title span svg,.cpage-title svg{display:inline;vertical-align:-3px;color:var(--red);margin-right:2px;}

/* ============ 内嵌客服 · 方正对话框（端对端） ============ */
#app.notab{padding-bottom:0;}
.kf-page{display:flex;flex-direction:column;height:calc(100vh - 96px);height:calc(100dvh - 96px);margin-top:8px;background:#f7f3f1;border-radius:14px;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.06);}
@media(min-width:560px){ .kf-page{height:calc(100vh - 108px);height:calc(100dvh - 108px);} }
.kf-top{display:flex;align-items:center;gap:8px;padding:12px 12px 10px;background:var(--grad);color:#fff;z-index:2;}
.kf-back{background:rgba(255,255,255,.18);border:none;color:#fff;width:32px;height:32px;border-radius:10px;font-size:20px;line-height:1;cursor:pointer;flex:none;}
.kf-top-i{flex:1;display:flex;align-items:center;gap:8px;min-width:0;}
.kf-top-i img{width:30px;height:30px;border-radius:50%;object-fit:cover;background:#fff;flex:none;}
.kf-top-i b{font-size:16px;font-weight:700;letter-spacing:.5px;}
.kf-on{display:flex;align-items:center;gap:5px;font-size:12px;background:rgba(255,255,255,.18);padding:5px 10px;border-radius:20px;flex:none;}
.kf-on i{width:7px;height:7px;border-radius:50%;background:#7CFC9A;box-shadow:0 0 0 3px rgba(124,252,154,.25);}
.kf-on.off i{background:#bbb;box-shadow:none;}
.kf-msgs{flex:1;overflow-y:auto;padding:14px 12px 6px;}
.kf-loading{text-align:center;color:#999;font-size:12px;padding:24px;}
.kf-msg{display:flex;align-items:flex-end;gap:8px;margin-bottom:13px;}
.kf-msg .kf-av{width:32px;height:32px;border-radius:8px;flex:none;overflow:hidden;background:#e8e0dc;color:#8a746c;font-size:14px;display:flex;align-items:center;justify-content:center;font-weight:600;}
.kf-msg .kf-av img{width:100%;height:100%;object-fit:cover;}
.kf-msg .kf-b{max-width:78%;padding:9px 13px;font-size:14px;line-height:1.65;color:#333;
  background:#fff;border:1px solid #ece7e4;border-radius:4px 10px 10px 10px;
  word-wrap:break-word;overflow-wrap:anywhere;white-space:pre-wrap;word-break:normal;box-shadow:0 1px 2px rgba(0,0,0,.04);}
.kf-txt{display:block;}
.kf-msg.visitor{flex-direction:row-reverse;}
.kf-msg.visitor .kf-b{background:var(--grad);color:#fff;border:none;border-radius:10px 4px 10px 10px;box-shadow:0 2px 6px rgba(199,50,50,.18);}
.kf-msg.system{justify-content:center;}
.kf-msg.system .kf-b{max-width:96%;background:#fbf1ef;border:1px dashed #e8c4bc;color:#a05a4a;font-size:12px;text-align:center;border-radius:6px;box-shadow:none;}
.kf-time{font-size:11px;color:#bbb;margin:0 4px 2px;flex:none;}
.kf-img{max-width:180px;border-radius:6px;display:block;}
.kf-pcard{width:212px;background:#fff;border:1px solid #eee;border-radius:8px;overflow:hidden;}
.kf-pcard img{width:100%;height:118px;object-fit:cover;display:block;}
.kf-pc-b{padding:8px 10px;}
.kf-pc-t{font-size:13px;color:#333;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.kf-pc-p{color:var(--price);font-weight:700;font-size:15px;margin-top:4px;}
.kf-pc-l{color:var(--red);font-size:12px;margin-top:4px;cursor:pointer;}
.kf-in{background:#fff;border-top:1px solid #eee;padding:8px 10px calc(10px + env(safe-area-inset-bottom));}
.kf-quick{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch;}
.kf-quick span{flex:none;background:#fbf1ef;color:#a05a4a;border:1px solid #f0d8d0;font-size:12px;padding:5px 12px;border-radius:16px;white-space:nowrap;cursor:pointer;}
.kf-inrow{display:flex;align-items:flex-end;gap:8px;}
.kf-inrow textarea{flex:1;resize:none;border:1px solid #e5e5e5;border-radius:10px;padding:9px 12px;font-size:14px;line-height:1.5;max-height:96px;outline:none;color:#333;background:#fafafa;font-family:inherit;}
.kf-inrow textarea:focus{border-color:#e53935;background:#fff;}
.kf-inrow button{flex:none;background:var(--grad);color:#fff;border:none;border-radius:10px;padding:11px 20px;font-size:14px;font-weight:600;cursor:pointer;}