/* ============================================================
   Consultant Club 2.0 · 移动版式层（v3.6）
   ≤820px：后台/工作台侧边栏 → 底部 Tab；表格 → 卡片；弹窗 → 底部抽屉
   ≤720px：前台导航收拢为汉堡菜单
   引入方式：放在页面自带 <style> 之后（</head> 前），保证覆盖优先级
   ============================================================ */

/* ---------- 汉堡菜单（仅移动端显示） ---------- */
.m-burger{display:none}
.m-nav{display:none}

@media (max-width:820px) {

  /* ============ 通用 ============ */
  html{-webkit-text-size-adjust:100%}
  body{font-size:14.5px;line-height:1.7}

  /* 应用层主区：留出底部 Tab 的高度 */
  .appmain{padding-bottom:calc(86px + env(safe-area-inset-bottom))!important}

  /* ============ 表格 → 卡片 ============ */
  .tbl-wrap{overflow:visible}
  .tbl,.tbl tbody{display:block;width:100%}
  .tbl thead{display:none}
  .tbl tr{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;
    padding:2px 14px 8px;margin-bottom:11px}
  .tbl tr:last-child{margin-bottom:0}
  .tbl td{display:flex;flex-direction:column;align-items:stretch;gap:5px;
    padding:10px 0 5px;border-bottom:1px dashed var(--line)}
  .tbl td:last-child{border-bottom:0;padding-bottom:4px}
  .tbl td::before{content:attr(data-l);font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
    color:var(--dim);text-transform:uppercase;line-height:1.4}
  .tbl tr.dim{opacity:.55}
  .tbl tr.dim td{opacity:1}
  /* 卡片里的操作按钮横向铺满 */
  .tbl td .row-acts{gap:8px}
  .tbl td .row-acts .btn{flex:1 1 auto;justify-content:center}
  .tbl td select.sel{width:100%}

  /* ============ 弹窗 → 底部抽屉（v3.9 自适应优化） ============ */
  .modal{padding:0;align-items:flex-end}
  .modal .mbox{width:100%;max-width:100%;
    max-height:92vh;max-height:92dvh;
    overflow-y:auto;overflow-x:hidden;
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    border-radius:18px 18px 0 0;border-bottom:0;border-left:0;border-right:0;
    padding:20px 16px calc(22px + env(safe-area-inset-bottom))}
  .modal.wide .mbox{max-height:94vh;max-height:94dvh;padding:18px 0 calc(18px + env(safe-area-inset-bottom))}
  .modal.wide .mbox h3,.modal.wide .msub,.modal.wide .ms-acts{padding-left:16px;padding-right:16px}
  .ms-note{padding-left:16px;padding-right:16px}
  /* 弹窗里的图和图形一律按容器缩放，不撑破抽屉 */
  .mbox img,.mbox svg,.mbox canvas,.mbox video{max-width:100%;height:auto}
  .mbox h3{font-size:16px;line-height:1.45;padding-right:38px}
  .mbox .msub{font-size:12.5px;margin:6px 0 13px;line-height:1.7}
  /* 输入控件 ≥16px：避免 iOS 聚焦时整页放大（这就是「弹窗不适配屏幕」的常见根因） */
  .mbox input,.mbox select,.mbox textarea{font-size:16px;padding:9px 12px}
  .mbox textarea{min-height:64px}
  .mbox label{font-size:12px;margin:11px 0 5px}
  .mbox .dg-form{padding:0 16px}
  .mbox .dg-ok,.mbox .bk-ok{padding:12px 16px 4px}
  .mbox .dg-submit .btn{width:auto}
  .mclose{top:10px;right:10px;width:32px;height:32px;border-radius:50%;
    background:rgba(255,255,255,.07);font-size:18px;z-index:3}
  /* 会员权益对比表：窄屏压缩字号 / 内边距，不强制横向铺开 */
  .ms-table{font-size:11px}
  .ms-table th,.ms-table td{padding:7px 7px;word-break:break-word}
  .ms-table th{white-space:normal}
  .ms-table th:first-child,.ms-table td:first-child{min-width:0!important}
  .ms-table .ms-tier-name{font-size:12px}
  .ms-table .ms-tier-price{font-size:10.5px}
  .ms-table .ms-tier-value{font-size:10px}
  .ms-acts{gap:8px}
  .ms-acts .btn,.ms-edit-row .btn{flex:1 1 auto;width:auto;margin-top:0}
  /* 权益表编辑器：单元格输入框跟着缩，整表仍可容器内横滚 */
  .ms-table-edit td,.ms-table-edit th{padding:5px 5px}
  .ms-table-edit .ms-in{font-size:12.5px;padding:5px 6px;min-width:56px}
  .ms-table-edit .ms-in.c-key{min-width:100px}
  .ms-table-edit .ms-in.c-gtitle{min-width:120px;font-size:12px}
  .ms-table-edit .ms-in.t-name{font-size:12px}
  .ms-table-edit .ms-mini{font-size:10px;padding:2px 6px;margin-left:4px}
  .ms-edit-tip{font-size:11px}
  .ms-gbar{gap:4px}
  .ms-edit-row{gap:8px}
  /* 分享名片弹窗：单列 + 按钮横排，名片图缩到屏幕内 */
  .sh-body{grid-template-columns:1fr;gap:14px;padding:0 16px}
  .sh-preview{padding:9px}
  .sh-preview img{max-width:100%}
  .sh-side{gap:12px}
  .sh-acts{flex-direction:row;flex-wrap:wrap}
  .sh-acts .btn{flex:1 1 46%;width:auto;font-size:12.5px;padding:10px 12px}
  .sh-tip{font-size:11px}

  /* ============ 机构后台：侧边栏 → 底部 Tab ============ */
  .app{grid-template-columns:1fr}
  .side{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:70;
    height:calc(60px + env(safe-area-inset-bottom));
    padding:5px 4px env(safe-area-inset-bottom);
    flex-direction:row;align-items:stretch;gap:2px;overflow:visible;
    border-right:0;border-bottom:0;border-top:1px solid var(--line);
    background:rgba(16,16,20,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  .side .brand{display:none}
  .side .todo{display:none}
  .snav{flex-direction:row;gap:2px;flex:1;align-items:stretch;overflow:visible}
  .snav button{position:relative;flex:1 1 0;min-width:0;flex-direction:column;justify-content:center;
    gap:4px;padding:6px 2px;font-size:10px;line-height:1.2;border-radius:10px;text-align:center}
  .snav button svg{width:19px;height:19px;flex:none}
  .snav button span:not(.badge){display:block;max-width:100%;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  .snav .badge{position:absolute;top:2px;right:calc(50% - 24px);margin:0;
    min-width:16px;font-size:9.5px;padding:0 4px}
  .snav button.active::before{content:"";position:absolute;top:-5px;left:50%;transform:translateX(-50%);
    width:26px;height:3px;border-radius:0 0 3px 3px;background:var(--adm)}
  /* 账号 / 退出收成最后一个「Tab」 */
  .side-foot{display:flex;align-items:center;justify-content:center;margin:0;padding:0 2px;
    border:0;flex:0 0 auto}
  .side-foot .op{padding:0}
  .side-foot .op .avatar{width:20px;height:20px;font-size:8px}
  .side-foot .op .nm{display:none}
  .side-foot .op button{font-size:10px;padding:4px 6px}

  /* 后台顶栏 */
  .topbar{gap:8px;margin-bottom:14px}
  .topbar h1{font-size:18px}
  .topbar .sub{font-size:11.5px}
  .topbar .btn{padding:6px 12px;font-size:11.5px}

  /* 后台卡片与指标 */
  .card{padding:15px 15px 16px;border-radius:13px}
  .grid4{grid-template-columns:1fr 1fr;gap:10px}
  .grid3{grid-template-columns:1fr;gap:12px}
  .grid2{grid-template-columns:1fr;gap:12px}
  .metric .big{font-size:21px}
  .metric .d{font-size:11px;line-height:1.6}
  .card h3{font-size:13.5px}
  .card .desc{font-size:12px;margin-bottom:11px}

  /* 项目管理：两个卡片按钮上下堆叠 */
  .pj-tabs{grid-template-columns:1fr;gap:10px;margin-bottom:13px}
  .pj-tab{padding:13px 15px}
  .pj-tab i{font-size:10.5px}
  .pj-head{flex-wrap:wrap;gap:9px}
  .pj-head .desc{font-size:11.5px}
  .pj-head>button{width:100%;order:3}

  /* 台账搜索 */
  .ct-search input{max-width:none;flex:1 1 100%}
  .ct-search{gap:8px}
  .ord-cell{flex-direction:row;align-items:center;gap:9px;flex-wrap:wrap}
  /* 移动端表头隐藏后，权益表入口改用卡片标题旁的胶囊按钮 */
  .ms-help-alt{display:inline-flex}
  .ord-in{width:74px}

  /* 认证 / 信息弹窗 */
  .pf-view{padding:0 4px!important}
  .pf-sec{padding-left:4px;padding-right:4px}
  .cv-head{padding:0 4px 14px}
  .cv-head .cv-tag{margin-left:0;width:100%}

  /* ============ 咨询师工作台：侧边栏 → 底部 Tab ============ */
  .side .sc{display:none}
  .side-foot .acct{flex-direction:column;align-items:center;gap:3px;padding:0 4px}
  .side-foot .acct .nm{display:none}
  .side-foot .acct .avatar{width:20px;height:20px;font-size:8px}
  .side-foot .acct .btn{font-size:10px;padding:4px 7px}
  .topbar h1{font-size:18px}
  .topbar .pill{order:3}
  .money{padding:15px 16px}
  .money .big{font-size:21px}
  .row-card{padding:14px 15px}
  .wk-cell,.wk-day{width:34px}
  .ob-grid{grid-template-columns:1fr}
  .avb-prev{width:100%}

  /* ============ 前台 ============ */
  .wrap{padding:0 16px}
  .sec{padding:clamp(46px,10vw,64px) 0}
  .hero{padding:clamp(104px,22vw,132px) 0 clamp(52px,12vw,72px)}
  .hsearch{padding-left:16px;border-radius:16px;flex-wrap:nowrap}
  .hsearch button{width:38px;height:38px}
  .hbtns .btn{flex:1 1 auto;min-width:140px}
  .egrid{gap:13px;margin-top:28px}
  .efoot{flex-direction:column}
  .efoot .btn{width:100%}
  .steps,.fcards{gap:13px;margin-top:30px}
  .stat-grid{gap:12px}
  .stat-card{padding:17px 17px 18px}
  .footer{padding:26px 0 34px}
  .footer .wrap{flex-direction:column;align-items:flex-start;gap:10px}

  /* 详情页：两栏改单栏后允许收缩，可约格换行不再撑破 */
  .dt-grid>*{min-width:0}
  .dt-card{min-width:0;padding:22px 18px}
  .dt-sec{padding:20px 17px}
  .wk{padding:13px 12px;overflow:hidden}
  .wk-row{flex-wrap:wrap;gap:5px}
  .wk-cell,.wk-day{width:22px}
  .wk-slot{width:auto;flex:1 1 40px;min-width:0}
  .wk-legend{flex-wrap:wrap;gap:9px}
  .skill-grid{grid-template-columns:1fr 1fr;gap:8px}
  .dt-sec-sm .radar{max-width:100%}
}

/* 前台导航：≤720px 收拢为汉堡 */
@media (max-width:720px) {
  .nav{height:58px}
  .nav .wrap{gap:10px}
  .logo{font-size:15px}
  .logo small{display:none}
  .nav-links{display:none}
  .nav-cta{margin-left:auto;gap:7px}
  .nav-cta .btn{padding:7px 13px;font-size:12px}
  .nav-cta .btn-ghost.hide-m{display:none}

  .m-burger{display:grid;place-items:center;gap:4px;width:38px;height:38px;flex:none;
    background:rgba(255,255,255,.06);border:1px solid var(--line2);border-radius:11px;
    cursor:pointer;padding:0}
  .m-burger i{display:block;width:16px;height:1.8px;border-radius:2px;background:var(--fg);
    transition:.2s}
  .m-burger.on i:nth-child(1){transform:translateY(5.8px) rotate(45deg)}
  .m-burger.on i:nth-child(2){opacity:0}
  .m-burger.on i:nth-child(3){transform:translateY(-5.8px) rotate(-45deg)}

  .m-nav{display:block;position:fixed;top:58px;left:0;right:0;z-index:59;
    background:rgba(11,11,14,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);padding:6px 14px 14px;
    opacity:0;visibility:hidden;transform:translateY(-8px);transition:.2s}
  .m-nav.show{opacity:1;visibility:visible;transform:none}
  .m-nav a{display:block;padding:12px 10px;font-size:14.5px;color:var(--fg2);
    border-bottom:1px solid var(--line);border-radius:8px}
  .m-nav a:last-child{border-bottom:0}
  .m-nav a:active{background:rgba(255,255,255,.05)}
}

/* 超小屏（≤380px）再收紧一点 */
@media (max-width:380px) {
  .grid4{grid-template-columns:1fr}
  .snav button{font-size:9px}
  .snav button svg{width:17px;height:17px}
  .snav .badge{right:calc(50% - 20px)}

  /* 弹窗再缩一档：字号 / 内边距 / 表格列宽 */
  .modal .mbox{padding:16px 12px calc(18px + env(safe-area-inset-bottom))}
  .modal.wide .mbox h3,.modal.wide .msub,.modal.wide .ms-acts{padding-left:12px;padding-right:12px}
  .ms-note{padding-left:12px;padding-right:12px}
  .mbox h3{font-size:15px}
  .mbox .msub{font-size:12px}
  .mbox .dg-form{padding:0 12px}
  .ms-table{font-size:10px}
  .ms-table th,.ms-table td{padding:6px 5px}
  .ms-table .ms-tier-name{font-size:11px}
  .ms-table .ms-tier-price{font-size:10px}
  .ms-table-edit .ms-in{font-size:12px;min-width:48px}
  .ms-table-edit .ms-in.c-key{min-width:86px}
}