/* 云希里小程序原型 - 手机壳共享样式 */
:root{
  --brand:#1E4032; --brand2:#2A5C47;
  --pink:#E8356B;
  --ink:#222; --gray:#999; --line:#ECECEA; --bg:#F6F5F2;
}
*{margin:0;padding:0;box-sizing:border-box;}
a{text-decoration:none;color:inherit;}
img{display:block;}
body{
  background:#E7E6E3;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  display:flex;justify-content:center;align-items:flex-start;
  padding:28px 0 48px;min-height:100vh;
}
/* 手机壳 */
.phone{
  width:390px;height:844px;background:#fff;
  border:10px solid #131313;border-radius:46px;
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 24px 64px rgba(0,0,0,.28);position:relative;
}
/* 状态栏 */
.status{
  height:44px;flex-shrink:0;display:flex;align-items:center;
  justify-content:space-between;padding:0 20px;position:relative;z-index:6;
}
.status .time{background:var(--brand);color:#fff;font-size:12.5px;font-weight:700;padding:1.5px 9px;border-radius:9px;}
.status .sys{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:#222;}
.bars{display:inline-flex;align-items:flex-end;gap:1.5px;height:10px;}
.bars i{width:3px;background:#222;border-radius:1px;display:block;}
.bars i:nth-child(1){height:4px;}.bars i:nth-child(2){height:6px;}
.bars i:nth-child(3){height:8px;}.bars i:nth-child(4){height:10px;}
.batt{width:22px;height:11px;border:1.2px solid rgba(0,0,0,.5);border-radius:3px;position:relative;}
.batt::after{content:"";position:absolute;right:-3px;top:2.5px;width:2px;height:4px;background:rgba(0,0,0,.5);border-radius:0 1px 1px 0;}
.batt i{position:absolute;left:1px;top:1px;bottom:1px;width:70%;background:#222;border-radius:1px;display:block;}
/* 导航栏 */
.nav{height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;}
.nav .title{font-size:16.5px;font-weight:600;color:var(--ink);}
.nav .nback{position:absolute;left:10px;top:6px;display:flex;gap:6px;}
.nav .nback a{
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.88);border:.5px solid rgba(0,0,0,.08);
  display:flex;align-items:center;justify-content:center;font-size:15px;color:#222;
}
.capsule{
  position:absolute;right:10px;top:6px;height:32px;
  border:.5px solid rgba(0,0,0,.1);background:rgba(255,255,255,.9);
  border-radius:16px;display:flex;align-items:center;
}
.capsule span{width:34px;display:flex;align-items:center;justify-content:center;font-size:14px;letter-spacing:1px;color:#111;font-weight:700;}
.capsule span:last-child{font-size:15px;}
.capsule i{width:1px;height:18px;background:rgba(0,0,0,.14);}
/* 内容区 */
.page{flex:1;overflow-y:auto;background:var(--bg);scrollbar-width:none;}
.page::-webkit-scrollbar{display:none;}
/* 底部 TabBar */
.tabbar{flex-shrink:0;background:#fff;border-top:.5px solid var(--line);display:flex;padding:2px 0 20px;}
.tb{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:10px;color:#8A8A8A;padding-top:5px;}
.tb .ico{font-size:21px;line-height:1.1;filter:grayscale(1) opacity(.5);}
.tb.on{color:var(--brand);font-weight:700;}
.tb.on .ico{filter:none;}
.tb-mid{flex:1;display:flex;justify-content:center;margin-top:-22px;}
.tb-mid .mid{
  width:50px;height:50px;border-radius:50%;background:var(--pink);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;border:3px solid #fff;
  box-shadow:0 4px 14px rgba(232,53,107,.42);
}
/* 详情类页面的底部操作栏 */
.bbar{flex-shrink:0;background:#fff;display:flex;align-items:center;gap:4px;padding:8px 12px 22px;border-top:.5px solid var(--line);}
.bb-ico{width:44px;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:9.5px;color:#555;}
.bb-ico .ico{font-size:19px;line-height:1.25;}
.bb-btn{flex:1;height:40px;border-radius:21px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;}
.bb-btn.ghost{border:1.2px solid var(--pink);color:var(--pink);background:#fff;}
.bb-btn.pink{background:var(--pink);color:#fff;}
/* 通用组件 */
.card{background:#fff;border-radius:14px;margin:0 14px 12px;overflow:hidden;}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;padding:18px 16px 10px;}
.sec-h b{font-size:16px;color:var(--ink);}
.sec-h span{font-size:11px;color:#9B9B9B;}
.pbar{height:4px;border-radius:2px;background:#EDEBE6;position:relative;overflow:hidden;}
.pbar i{position:absolute;left:0;top:0;bottom:0;background:var(--pink);border-radius:2px;display:block;}
.tag-pink{background:var(--pink);color:#fff;font-size:11px;font-weight:600;padding:4px 12px;border-radius:14px;}
.tag-end{background:#EFEFED;color:#9B9B9B;font-size:11px;padding:4px 12px;border-radius:14px;}

/* ===== 真机自适应 =====
   窄屏（手机浏览器）下去掉桌面设备外壳，内容满屏铺开，
   隐藏模拟状态栏（手机自带），保留导航栏+胶囊+底部Tab，观感接近微信小程序 */
@media (max-width:480px){
  html,body{height:100%;}
  body{align-items:stretch;justify-content:flex-start;padding:0;background:#fff;}
  .phone{
    width:100%;
    height:100vh;height:100dvh;        /* 满屏高度（dvh 适配移动端浏览器栏）*/
    border:none;border-radius:0;box-shadow:none;margin:0;
  }
  /* 隐藏模拟 iOS 状态栏，避免与手机真实状态栏重复 */
  .status{display:none;}
  /* 底部 Tab 适配全面屏底部安全区 */
  .tabbar{padding-bottom:calc(22px + env(safe-area-inset-bottom,0));}
  /* 「我的」等自定义头部，去掉透明状态栏占位 */
  .me .status{display:none;}
}