/* ============================================================
   缘见 · 移动端 H5 适配层
   加载顺序：element-plus.css → app.css → uploader.css → h5.css
   仅用 max-width 媒体查询做渐进降级，不改桌面端任何表现
   ============================================================ */

/* 底部导航：桌面端默认不显示 */
.tabbar{display:none}

@media (max-width:768px){

  /* ---------- 基础 ---------- */
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
  .wrap{padding:0 14px}

  /* ---------- 顶栏：手机上收起门店切换 ---------- */
  .topbar{font-size:12px}
  .topbar .wrap{height:32px;gap:8px}
  .topbar .left a{display:none}
  .topbar .left .dot{display:none}
  .topbar .right{gap:8px}
  .topbar .who{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* ---------- 头部：缩小 logo，主导航交给底部 tabbar ---------- */
  .header .wrap{height:56px;gap:10px}
  .logo .mark{width:34px;height:34px;font-size:18px;border-radius:10px}
  .logo .txt b{font-size:17px;letter-spacing:1px}
  .logo .txt span{font-size:9px;letter-spacing:2px}
  .head-act .btn-ghost{display:none}
  .head-act .btn-solid{padding:7px 14px;font-size:13px}

  /* ---------- 区块标题 ---------- */
  .sec{padding:24px 0}
  .sec-head{margin-bottom:14px}
  .sec-head h2{font-size:19px}
  .sec-head h2 small{font-size:10px;letter-spacing:3px;margin-top:3px}
  .sec-head .more{font-size:13px}
  .page-title{padding:14px 0 2px}
  .page-title h1{font-size:20px}
  .page-title p{font-size:12px;margin-top:5px}

  /* ---------- 会员卡：手机两列 ---------- */
  .mgrid{gap:12px}
  .mitem .pic{height:148px;font-size:36px;letter-spacing:1px}
  .mitem .pic .vip{font-size:10px;padding:2px 7px;top:8px;left:8px}
  .mitem .pic .real{font-size:10px;padding:2px 7px;top:8px;right:8px}
  .mitem .info{padding:10px}
  .mitem .info b{font-size:14px}
  .mitem .info .age{font-size:12px}
  .mitem .info .city{font-size:11px}
  .mitem .tags{margin-top:7px;gap:4px}
  .mitem .tags i{font-size:10px;padding:2px 6px}

  /* ---------- 筛选栏 ---------- */
  .filterbar{padding:12px 14px;border-radius:12px;margin-bottom:14px}
  .filter-row{padding:6px 0;gap:8px}
  .filter-row .lb{width:auto;font-size:12px;margin-left:0!important}
  .chip{padding:5px 11px;font-size:12px}
  .result-bar{font-size:12px}

  /* ---------- 分页 ---------- */
  .pager{padding:18px 0 4px;gap:6px;flex-wrap:wrap}
  .pager button{min-width:32px;height:32px;padding:0 9px;font-size:12px}
  .pager .info{font-size:12px;margin-left:4px}

  /* ---------- 页脚：只留品牌与版权 ---------- */
  .footer{margin-top:26px;padding:22px 0 0}
  .footer .cols{grid-template-columns:1fr;gap:0;padding-bottom:12px}
  .footer .cols>div:not(.brand){display:none}
  .footer .brand p{font-size:12px;margin-top:8px}
  .footer .copy{font-size:11px;padding:12px 0;line-height:1.8}

  /* ---------- 底部导航 ---------- */
  .tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:rgba(255,255,255,.97);backdrop-filter:blur(8px);
    border-top:1px solid #f2e6e9;
    padding:6px 0 calc(6px + env(safe-area-inset-bottom));
  }
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;color:#9c8f93;line-height:1.2}
  .tabbar a svg{width:21px;height:21px;fill:currentColor}
  .tabbar a.on{color:#E83191}
  .tabbar a.on svg{transform:translateY(-1px)}

  /* ---------- 弹窗（Element Plus 的宽度是内联的，必须 !important） ---------- */
  .el-dialog{width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px);margin-top:5vh!important;border-radius:14px}
  .el-dialog__header{padding:14px 16px 4px}
  .el-dialog__title{font-size:16px}
  .el-dialog__body{padding:12px 16px;max-height:68vh;overflow-y:auto}
  .el-dialog__footer{padding:8px 16px 16px}
  .el-message-box{width:calc(100vw - 40px)!important}
  .el-message{min-width:0!important;max-width:calc(100vw - 30px);padding:10px 14px!important}
  .el-form-item{margin-bottom:16px}
  .el-form-item__label{font-size:13px;margin-bottom:4px!important}
  /* 右对齐的 label-width 表单在小屏改成上下结构，避免输入框被挤窄 */
  .el-dialog .el-form-item{display:flex;flex-direction:column;align-items:stretch}
  .el-dialog .el-form-item__label{width:auto!important;float:none!important;justify-content:flex-start;text-align:left;padding:0 0 4px!important;line-height:1.5}
  .el-dialog .el-form-item__content{margin-left:0!important;width:100%}
  .avatar-row{gap:12px}
  .avatar-row .hint{font-size:11px}

  /* ---------- 首页 Hero ---------- */
  .hero .wrap{padding-top:22px;padding-bottom:28px;gap:20px}
  .hero-txt h1{font-size:25px;line-height:1.35}
  .hero-txt p{font-size:13px;margin-top:10px;line-height:1.8}
  .searchcard{margin-top:16px;padding:12px;gap:10px;border-radius:14px}
  .searchcard .seg{width:100%}
  .searchcard .seg button{flex:1;padding:8px 0;font-size:13px}
  .searchcard .el-select{flex:1 1 40%!important;width:auto!important}
  .searchcard .go{width:100%;margin-left:0;padding:11px 0;font-size:14px}
  .hero-visual{max-width:250px}
  .mcard{padding:10px;border-radius:16px}
  .mcard .ph{height:145px;font-size:40px;border-radius:11px}
  .mcard .meta b{font-size:15px}
  .mcard .meta span{font-size:12px}
  .float-tag{font-size:11px;padding:5px 10px;border-radius:9px}
  .float-tag.t1{top:-10px;left:-6px}
  .float-tag.t2{bottom:10px;right:-6px}

  /* ---------- 首页分类 / 约会 / 学堂 ---------- */
  .kinds{gap:10px}
  .kind{padding:14px 6px}
  .kind .ic{width:44px;height:44px;border-radius:13px;margin-bottom:8px}
  .kind .ic svg{width:20px;height:20px}
  .kind b{font-size:13px}
  .kind span{font-size:11px}
  .acts,.arts{gap:12px}
  .act,.art{padding:14px}
  .act .date{width:56px}
  .act .date b{font-size:21px}

  /* ---------- 会员详情 ---------- */
  .detail{gap:14px;padding-bottom:12px}
  .card-l .photo{height:280px;font-size:64px}
  .card-l .base{padding:14px}
  .card-l .base h2{font-size:19px}
  .card-l .base .sub{font-size:12px;margin-top:6px}
  .card-l .acts{margin-top:12px;gap:8px}
  .card-l .acts button{height:40px;font-size:13px}
  .panel{padding:16px}
  .panel h3{font-size:15px;margin-bottom:12px}
  .info-grid{gap:14px 8px}
  .info-grid .it .v{font-size:13px}
  .pref-list{gap:12px;font-size:13px}
  .intro-text{font-size:13px;line-height:1.9}

  /* ---------- 活动卡 ---------- */
  .acard{padding:14px;gap:12px}
  .acard .cover{width:96px;aspect-ratio:16 / 9;border-radius:9px}
  .acard .dbox{width:54px;border-radius:10px;padding:8px 0}
  .acard .dbox b{font-size:19px}
  .acard .dbox span{font-size:10px;margin-top:4px}
  .acard .dbox i{font-size:9px;margin-top:2px}
  .acard h3{font-size:14px;margin-bottom:7px}
  .acard .meta{font-size:11px;gap:8px;margin-bottom:9px}
  .acard .cnt{font-size:11px;margin-bottom:10px}
  .acard .foot{gap:8px}
  .acard .price{font-size:14px}

  /* ---------- 登录卡片 ---------- */
  .login-sec{padding:26px 0 34px;min-height:auto}
  .lcard{padding:24px 18px;border-radius:16px}
  .lcard h2{font-size:19px}
  .lcard .sub{font-size:12px;margin:8px 0 18px}
  .code-btn{width:104px}

  /* ---------- 发布约会 / 红娘 / 学堂 ---------- */
  .pub-wrap{gap:14px}
  .form-card{padding:18px 14px}
  .kinds{margin-bottom:6px}
  .mmgrid{gap:12px}
  .steps{gap:10px;margin-bottom:22px}
  .alist,.dgrid,.agrid{gap:12px}

  /* 页内两列栅格（内联样式）在小屏统一压成一列 */
  .el-dialog [style*="1fr 1fr"],
  .form-card [style*="1fr 1fr"],
  .pub-wrap [style*="1fr 1fr"],
  .lcard [style*="1fr 1fr"]{grid-template-columns:1fr!important}

  /* 触控友好的输入尺寸（iOS 小于 16px 会触发页面缩放） */
  .el-input__inner,.el-textarea__inner{font-size:16px!important}
  .el-input--small .el-input__inner{font-size:14px!important}
}

/* ============================================================
   小程序壳（v2.3.0）：mini-nav 顶部导航 + 家长端底部 4-tab
   默认不渲染，仅手机端显示；桌面端观感完全不变
   ============================================================ */
.mini-nav,.mini-tabbar{display:none}

@media (max-width:768px){

  /* ---------- 顶部导航：返回 + 标题 + 右侧胶囊 ---------- */
  .mini-nav{
    display:flex;position:fixed;left:0;right:0;top:0;z-index:70;
    align-items:center;
    height:calc(44px + env(safe-area-inset-top));
    padding:env(safe-area-inset-top) 6px 0;
    background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
    border-bottom:1px solid #f5e6ec;
  }
  .mini-nav .back{width:40px;height:44px;display:grid;place-items:center;color:#3a3f47;background:none;border:0;cursor:pointer}
  .mini-nav .back svg{width:20px;height:20px;fill:currentColor}
  .mini-nav .tt{flex:1;text-align:center;font-size:16px;font-weight:600;color:#23262b;line-height:44px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 4px}
  .mini-nav .caps{
    width:87px;height:32px;margin-right:8px;border-radius:16px;flex:0 0 auto;
    background:#f4f4f6;border:1px solid #e8e8ec;color:#4a4f57;
    display:flex;align-items:center;justify-content:center;gap:0;cursor:pointer
  }
  .mini-nav .caps .c-dot,.mini-nav .caps .c-more{width:50%;height:100%;display:grid;place-items:center;background:none;border:0;color:inherit}
  .mini-nav .caps svg{width:17px;height:17px;fill:currentColor}
  .mini-nav .caps .c-sep{width:1px;height:17px;background:#dcdce2}
  .mini-nav.candy{background:linear-gradient(135deg,#FF6F6F,#E83191);border-bottom:none}
  .mini-nav.candy .back,.mini-nav.candy .tt{color:#fff}
  .mini-nav.candy .caps{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.35);color:#fff}
  .mini-nav.candy .caps .c-sep{background:rgba(255,255,255,.4)}

  /* 带 mini-nav 的页面：老顶栏/老头部收起，主体补出顶部高度 */
  .mini-page .topbar,.mini-page .header{display:none}
  .mini-page{padding-top:calc(44px + env(safe-area-inset-top))}

  /* ---------- 家长端底部 4-tab ---------- */
  .mini-tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:rgba(255,255,255,.97);backdrop-filter:blur(8px);
    border-top:1px solid #f2e6e9;
    padding:5px 0 calc(5px + env(safe-area-inset-bottom));
  }
  .mini-tabbar button{
    position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
    font-size:10px;color:#9c8f93;line-height:1.2;background:none;border:0;cursor:pointer;font-family:inherit;
  }
  .mini-tabbar button svg{width:21px;height:21px;fill:currentColor}
  .mini-tabbar button.on{color:#E83191}
  .mini-tabbar button.on svg{transform:translateY(-1px)}
  .mini-tabbar .bdg{
    position:absolute;top:-4px;left:calc(50% + 4px);
    min-width:16px;height:16px;border-radius:8px;background:#E83191;color:#fff;
    font-size:10px;line-height:16px;padding:0 4px;font-weight:600;
  }
}

/* 小屏（iPhone SE 等）进一步收紧 */
@media (max-width:400px){
  .hero-txt h1{font-size:22px}
  .mitem .info .city{display:none}
  .kinds{grid-template-columns:repeat(3,1fr)}
  .mitem .pic{height:132px}
  .float-tag{display:none}
  .el-dialog__body{max-height:64vh}
}