/* ============================================================
   CP滴滴情报局 · 手机版
   和电脑版是两套版式，不是把电脑版压窄：
   - 顶部是横向滚动的分栏标签条，不是底部 tab 栏
   - 首页封面用 type=mb 的竖图，全出血铺满
   - 名片是单栏"档案条目"，配 3px 粗线分隔，不是多列栅格
   正文 16px / 行高 1.8，点击区不小于 44px，拇指够得着。
   ============================================================ */

body{font-size:16px;line-height:1.8;padding-bottom:0}
.pad{padding:0 18px}

/* ---------------- 报头 ---------------- */
.m-head{background:var(--paper)}
.m-head-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:18px 18px 12px;
}
.m-logo{display:flex;align-items:baseline;gap:8px}
.m-logo b{
  font-family:var(--font-num);font-size:27px;font-weight:700;
  letter-spacing:-.04em;line-height:1;color:var(--accent);
}
.m-logo span{font-size:16px;font-weight:700;letter-spacing:.05em}
.m-head-meta{font-size:10.5px;letter-spacing:.14em;color:var(--ink-2);text-align:right}
.m-head .rule{margin:0 18px}

/* 登录状态条。贴在报头下面、横向标签条上面，正好占一行；
   所有按钮 44px 高，拇指点得到。头像和名字靠左成一小组，退出靠右。 */
.m-user{
  display:flex;align-items:center;gap:10px;
  padding:8px 18px 10px;
}
.m-user .user-btn{min-height:44px;max-width:none;flex:1 1 auto;text-align:left}
.m-user .user-btn-quiet{flex:0 0 auto;text-align:right}
.m-user .user-face .ph{width:30px;height:30px}

/* ---------------- 分栏标签条（唯一吸顶的元素） ---------------- */
.m-tabs{
  position:sticky;top:0;z-index:30;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.m-tabs-row{
  display:flex;gap:26px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:0 18px;
  scrollbar-width:none;
}
.m-tabs-row::-webkit-scrollbar{display:none}
/* min-height 48px：手机上标签也是可点元素，不能只按文字高度算 */
.m-tabs button{
  appearance:none;background:transparent;border:0;cursor:pointer;flex:0 0 auto;
  min-height:48px;display:inline-flex;align-items:center;
  font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--ink-2);
  border-bottom:2px solid transparent;
  transition:color .16s, border-color .16s;
}
.m-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}

/* ---------------- 首页封面：全出血竖图 ---------------- */
.cover-m{height:62vh;min-height:380px;max-height:620px}
.cover-m::after{
  background:linear-gradient(180deg,
    rgba(23,20,15,calc(var(--scrim,0.62) * 0.42)) 0%,
    rgba(23,20,15,calc(var(--scrim,0.62) * 0.72)) 46%,
    rgba(23,20,15,calc(var(--scrim,0.62) * 1.2)) 100%);
}
.cover-m .cover-inner{
  height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 18px 30px;
}
.cover-m .kicker{color:#F6C6AE}
.cover-m h1{
  margin:12px 0 0;
  font-size:clamp(27px,8.2vw,37px);font-weight:700;
  letter-spacing:-.03em;line-height:1.16;color:#fff;
}
.cover-m h1 em{font-style:normal;color:#F9B892}
.cover-m .cover-lede{
  margin:14px 0 0;font-size:14.5px;line-height:1.75;
  color:rgba(255,255,255,.88);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.cover-m .cover-actions{display:flex;align-items:center;gap:22px;margin-top:22px}
.cover-m .btn{padding:14px 26px}
.cover-m .btn-text{color:#F6C6AE;border-bottom-color:#E9A882}

/* ---------------- 数据条：竖细线 ---------------- */
.m-stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  margin-top:26px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.m-stat{padding:16px 0 14px 14px;border-left:1px solid var(--rule)}
.m-stat:first-child{border-left:0;padding-left:0}
.m-stat b{
  display:block;font-family:var(--font-num);font-size:34px;font-weight:700;
  letter-spacing:-.03em;line-height:1;
}
.m-stat span{display:block;margin-top:8px;font-size:10px;font-weight:600;letter-spacing:.16em;color:var(--ink-2)}

/* ---------------- 区块标题：3px 粗线压住 ---------------- */
.m-sec{margin-top:40px}
.m-sec-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-bottom:11px;border-bottom:3px solid var(--ink);
}
.m-sec-head h2{margin:0;font-size:24px;font-weight:700;letter-spacing:-.025em;line-height:1.15}
.m-sec-head .note{font-size:10.5px;letter-spacing:.14em;color:var(--ink-2);white-space:nowrap}

/* ---------------- 首页推荐：头条大图 + 两条图文 ---------------- */
.m-lead{padding-top:20px}
.m-lead h3{margin:14px 0 0;font-size:25px;font-weight:700;letter-spacing:-.025em;line-height:1.2}
.m-lead .meta{margin:0 0 12px;font-size:10.5px;font-weight:600;letter-spacing:.16em;color:var(--accent)}
.m-lead .bio{margin:12px 0 0;font-size:14px;color:var(--ink-2);line-height:1.8}

.m-pick{
  display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:start;
  padding:18px 0;border-bottom:1px solid var(--rule);
}
.m-pick .ph{width:104px}
.m-pick h4{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.m-pick .meta{margin:5px 0 0;font-size:10.5px;font-weight:600;letter-spacing:.14em;color:var(--accent)}
.m-pick .bio{margin:7px 0 0;font-size:13px;color:var(--ink-2);line-height:1.7;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------------- 日常条目（首页窄版） ---------------- */
.m-mrow{
  display:grid;grid-template-columns:44px 1fr;gap:12px;
  padding:16px 0;border-bottom:1px solid var(--rule);
}
.m-mrow .ph{width:44px;height:44px;aspect-ratio:auto;border-radius:50%}
.m-mrow .who{font-size:14.5px;font-weight:700}
.m-mrow .time{font-size:10.5px;letter-spacing:.12em;color:var(--ink-2)}
.m-mrow-cmt{display:inline-block;margin-top:6px;font-size:11px;letter-spacing:.1em;color:var(--accent)}
.m-mrow .txt{margin:5px 0 0;font-size:13.5px;color:var(--ink-2);line-height:1.7;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------------- 怎么玩 ---------------- */
.m-steps{border-top:1px solid var(--rule)}
.m-step{padding:20px 0 4px;border-bottom:1px solid var(--rule)}
.m-step:last-child{border-bottom:0}
.m-step .no{
  font-family:var(--font-num);font-size:30px;font-weight:700;
  letter-spacing:-.03em;line-height:1;color:var(--rule-strong);
}
.m-step h3{margin:10px 0 0;font-size:16px;font-weight:700;letter-spacing:-.01em}
.m-step p{margin:6px 0 0;font-size:13.5px;color:var(--ink-2);line-height:1.75}

/* ---------------- 心动广场：档案式条目 ---------------- */
.m-filters{
  display:flex;gap:8px;overflow-x:auto;padding:14px 18px 14px;
  scrollbar-width:none;border-bottom:1px solid var(--rule);
}
.m-filters::-webkit-scrollbar{display:none}
.m-filters button{
  appearance:none;cursor:pointer;flex:0 0 auto;background:transparent;
  border:1px solid var(--rule-strong);border-radius:0;
  font-size:12.5px;letter-spacing:.1em;color:var(--ink-2);
  padding:9px 15px;transition:.16s;
}
.m-filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}

.entry{padding:26px 18px 26px;border-bottom:1px solid var(--rule)}
.entry-band{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:14px;
}
.entry-band .no{font-family:var(--font-num);font-size:12px;letter-spacing:.16em;color:var(--ink-2)}
.entry-band .tier{font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--accent)}
.entry h3{margin:16px 0 0;font-size:23px;font-weight:700;letter-spacing:-.025em;line-height:1.2}
.entry-rows{
  margin:16px 0 0;display:grid;grid-template-columns:auto 1fr;gap:8px 18px;
  font-size:14px;padding-bottom:16px;border-bottom:1px solid var(--rule);
}
.entry-rows dt{color:var(--ink-2);letter-spacing:.06em}
.entry-rows dd{margin:0}
.entry-bio{margin:16px 0 0;font-size:14px;line-height:1.85;color:var(--ink-2)}
.entry-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.entry-tags .tag{
  font-size:12px;letter-spacing:.08em;padding:4px 11px;
  border:1px solid var(--rule-strong);color:var(--ink-2);
}
.entry-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px}
.entry-foot .cell-time{font-size:11px;letter-spacing:.1em;color:var(--ink-2)}
/* "看名片"这类文字按钮在手机上也必须是能按的：撑到 44px 高 */
.link-btn{display:inline-flex;align-items:center;min-height:44px;font-size:13px}

/* 心动按钮：手机上给足 46px 高，拇指按得到 */
.heart{
  appearance:none;cursor:pointer;background:transparent;
  border:1px solid var(--rule-strong);border-radius:0;
  font-size:13px;font-weight:600;letter-spacing:.14em;color:var(--ink);
  padding:14px 30px;min-height:46px;
  transition:background .16s,color .16s,border-color .16s;
}
.heart:hover{border-color:var(--accent);color:var(--accent)}
.heart.is-on{background:var(--accent);border-color:var(--accent);color:#fff}

.m-empty{padding:60px 18px;text-align:center;font-size:14px;color:var(--ink-2)}

/* ---------------- 日常墙 ---------------- */
.m-composer{padding:20px 18px 18px;border-bottom:1px solid var(--rule);background:#fff}
.m-composer textarea{
  width:100%;border:0;background:transparent;resize:none;
  font:inherit;font-size:16px;color:var(--ink);line-height:1.8;padding:0;
}
.m-composer textarea::placeholder{color:var(--ink-3)}
.m-composer textarea:focus{outline:none}
.m-composer .row{display:flex;align-items:center;gap:12px;margin-top:14px}
.m-composer .topics{display:flex;gap:7px;overflow-x:auto;margin-right:auto;scrollbar-width:none}
.m-composer .topics::-webkit-scrollbar{display:none}
.m-composer .topics button{
  appearance:none;cursor:pointer;flex:0 0 auto;background:transparent;
  border:1px solid var(--rule-strong);border-radius:0;
  font-size:12px;letter-spacing:.08em;color:var(--ink-2);padding:8px 12px;transition:.16s;
}
.m-composer .topics button[aria-pressed="true"]{
  background:var(--accent-wash);border-color:var(--accent);color:var(--accent-deep);
}
.m-composer .btn{padding:13px 22px}

.post{padding:24px 18px;border-bottom:1px solid var(--rule)}
.post-head{display:flex;align-items:center;gap:11px}
.post-head .ph{width:40px;height:40px;aspect-ratio:auto;border-radius:50%;flex:0 0 auto}
.post-head .who{font-size:15px;font-weight:700}
.post-head .time{margin-left:auto;font-size:10.5px;letter-spacing:.12em;color:var(--ink-2)}
.post-body{margin:14px 0 0;font-size:16px;line-height:1.85}
.post-body .topic{color:var(--accent);font-weight:600}
.post-media{display:grid;gap:5px;margin-top:14px}
.post-media.n1 .ph{aspect-ratio:4/3}
.post-media.n2{grid-template-columns:1fr 1fr}
.post-media.n3{grid-template-columns:repeat(3,1fr)}
.post-foot{display:flex;align-items:center;gap:8px;margin-top:14px}
.act{
  appearance:none;background:transparent;border:0;cursor:pointer;
  font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--ink-2);
  padding:11px 0;min-height:44px;margin-right:22px;
  border-bottom:1px solid transparent;transition:.16s;
}
.act.is-on{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------------- 排行榜：大号衬线数字 ---------------- */
.m-rank{border-top:3px solid var(--ink)}
.m-rank-row{
  display:grid;grid-template-columns:54px 1fr auto;gap:14px;align-items:center;
  padding:18px 18px;border-bottom:1px solid var(--rule);
}
.m-rank-row .rk{
  font-family:var(--font-num);font-size:38px;font-weight:700;
  letter-spacing:-.04em;line-height:1;color:var(--rule-strong);
}
.m-rank-row.top .rk{color:var(--accent)}
.m-rank-row .nm{font-size:17px;font-weight:700;letter-spacing:-.01em}
.rank-name{
  appearance:none;background:transparent;border:0;cursor:pointer;padding:0;
  font:inherit;font-size:17px;font-weight:700;letter-spacing:-.01em;
  color:var(--ink);text-align:left;
}
.m-rank-row .sub{font-size:11.5px;color:var(--ink-2);letter-spacing:.06em;margin-top:3px}
.m-rank-row .val{
  font-family:var(--font-num);font-size:26px;font-weight:700;letter-spacing:-.03em;
}
.m-rank-bar{height:3px;background:var(--paper-2);margin-top:9px}
.m-rank-bar i{display:block;height:100%;background:var(--accent)}

/* ---------------- 开黑约战 ----------------
   卡片内容（时间点、车上的人、出勤、动作区）全部在 base.css 里，
   这里只交代手机版的排布：单列到底 + 按钮通栏。
   「怎么玩」已经不在页面上铺开了，它在底部抽屉里（base.css 的 .guide-drawer）。 */
.m-rooms{border-top:3px solid var(--ink)}
.room{padding:22px 18px;border-bottom:1px solid var(--rule)}
.room h3{font-size:18px}
/* 手机上动作按钮一定通栏：手指够得着，也不会误点到旁边的"退车" */
.room-actions .btn{flex:1;min-width:150px;padding:15px 0;text-align:center;font-size:13.5px}
.room-owner-tag{width:100%}
.room-pub{margin:0 18px 30px}
.room-pub>summary{padding:16px 18px}
.room-pub form{padding:20px 18px 22px}
.room-pub-gate{padding:14px 18px 16px}
.room-pub .btn{width:100%;padding:15px 0}

/* ---- 房主标记出勤：手机上名字单独一行，三个状态按钮平分一整行 ----
   挤在一行里每个按钮只有 50 多像素宽，点"缺席"很容易点到"迟到"。 */
.mark-list li{gap:8px}
.mark-list .atk-name{flex:1 1 100%}
.mark-opts{width:100%}
.mark-opt{flex:1;padding:0 4px}
.mark-foot{flex-direction:column;align-items:stretch;gap:12px}
.mark-btns{width:100%}
.mark-btns .btn{flex:1;min-width:0;padding:15px 0}

/* ---- 玩法说明入口：通栏 44px 高，手指够得着 ---- */
.guide-open-mb{
  display:flex;width:100%;
  padding:12px 18px;
  border:0;border-bottom:1px solid var(--rule-strong);
  background:var(--paper-2);
  font-size:11px;
}
.guide-open-mb i{margin-left:auto}

/* ---- 玩法说明抽屉：手机上是底部上滑的面板 ----
   侧滑在窄屏上只能露出一条缝，读起来还不如全屏。 */
.guide-drawer{
  top:auto;left:0;right:0;bottom:0;width:auto;
  height:86vh;height:86dvh;max-height:86dvh;
  border-left:0;border-top:3px solid var(--ink);
  transform:translateY(100%);
}
.guide-drawer-head{padding:18px 18px 15px}
.guide-drawer-head h3{font-size:16px}
.guide-drawer-body{padding:18px 18px 22px}
.guide-drawer-foot{padding:14px 18px}
.guide-drawer .room-spec{gap:24px}

/* ---------------- 帖子详情 ----------------
   外层 .detail 已经给了左右 18px 的内边距（mb.css 上面那条），
   所以这里不能再加一次，否则内容会往里缩两层。 */
.post-open{padding:22px 0}
.post-detail .post-media.n1 .ph{aspect-ratio:4/3}
.cmt-form-foot .btn{width:100%;padding:15px 0}

/* ============================================================
   我的名片 / 名片详情 / 群规入群
   手机上全部单栏。表单字段一行一个，所有可点元素不小于 44px。
   ============================================================ */

/* ---------------- 登录 / 注册 ----------------
   手机上单栏：先是一段"登录后会怎样"的说明，再是表单。
   表单 footer 和输入框都按拇指友好尺寸放大（见下面 .f-input 的 48px）。 */
.auth{padding:24px 18px 48px;gap:26px}
.auth-intro h1{font-size:29px}
.auth-card{border-top:3px solid var(--ink);background:#fff;padding:22px 18px 26px}
.auth-card .f-row{margin-bottom:22px}
.auth-switch button{flex:1 1 0;min-height:48px;text-align:center}
.auth-demo{padding:14px 16px}

/* ---------------- 我的 · 个人资料 ----------------
   名片预览就是广场里那张一模一样的 .entry，所以"我看到的"就是"别人看到的"。
   注意这里**不做任何视觉上的重排**（比如用 order 把预览提到表单前面）：
   预览里有"看名片""心动"这些可点元素，动它们的视觉顺序就等于改动了
   Tab 焦点顺序，键盘用户读到的顺序会和眼睛看到的对不上。 */
.me-preview{border-top:3px solid var(--ink);margin-top:20px}
.me-preview .entry{border-bottom:1px solid var(--rule);padding:22px 18px 20px}
.me-preview .entry h3{font-size:21px}
.me-empty{
  padding:32px 18px;text-align:center;
  border-bottom:1px solid var(--rule);background:var(--paper-2);
  font-size:13.5px;line-height:1.8;color:var(--ink-2);
}

.me-head{padding:24px 18px 0}
.me-body{padding:24px 18px 44px}
.me-tabs{margin-top:22px;padding:0 18px}
.me-tabs button{padding:13px 16px;min-height:48px}
.me-idcard{padding:18px;gap:16px}
.me-idmain h2{font-size:24px}
.me-stats{gap:20px}
.me-stats b{font-size:21px}
.me-card-cols{gap:26px}

/* 列表行在窄屏改成上下：动作按钮换到下一行，避免和标题抢宽度 */
.p-item{flex-wrap:wrap;gap:10px 14px}
.p-acts{flex-basis:100%;padding-top:2px}
.p-acts .btn-text{min-height:44px;padding:8px 0}
.p-rows{grid-template-columns:1fr;gap:4px 0}
.p-rows dd{margin-bottom:12px}
.p-credit{gap:18px;padding:18px}
.p-credit-big b{font-size:34px}
.p-acts-bar .btn{flex:1 1 auto;min-height:48px}
.heart-mask{width:46px;height:46px}

/* 两列表单在手机上一定挤，这里强制回一行一个 */
.f-half{grid-template-columns:1fr;gap:0}
.f-row{margin-bottom:22px}
.f-label{font-size:11.5px;margin-bottom:8px}
.f-input,.f-select{padding:14px 14px;font-size:16px;min-height:48px}
.f-area{min-height:112px;font-size:16px}
.f-hint{font-size:12.5px}
.f-qq{gap:10px}
.f-qq-face,.f-qq-face .ph,.f-qq-face:empty::before{flex:0 0 72px;width:72px;height:72px}
.pick{padding:11px 16px;min-height:44px;font-size:14px}
.f-actions{margin-top:26px;gap:12px}
.f-actions .btn{flex:1 1 auto;min-height:48px}
.f-saved{flex-basis:100%;margin-top:2px}

/* ---------------- 名片详情 ---------------- */
.detail{padding:0 18px 44px}
.detail-back{margin:22px 0 22px}
/* 大图全出血，这是详情页唯一值得"铺满"的地方 */
.detail-media{margin:0 -18px}
.detail-grid{gap:26px}
.detail-name{font-size:30px}
.detail-meta{font-size:11.5px}
.detail-rows{font-size:14.5px;gap:8px 16px}
.detail-bio{font-size:15.5px}
.detail-actions{gap:14px;margin-top:24px}
.detail-hearts{font-size:12.5px}
.contact-box{margin-top:26px;padding:18px 18px}
.contact-wx{font-size:23px}
.contact-copy{width:100%;min-height:48px}

/* ---------------- 群规 / 入群 ---------------- */
.about{padding:0 18px 44px}
.about-grid{gap:40px;margin-top:22px}
.about-rules li{font-size:14.5px;padding:15px 0 15px 40px}
.about-rules li::before{top:15px}
.about-steps li{padding:17px 0}
.about-qr-img{width:100%;max-width:280px;height:auto}
.about-qr-ph{width:100%;max-width:280px;height:280px}
.about-qr-note{font-size:12.5px;max-width:none}
.about-faq{margin-top:44px}
.faq summary{font-size:15.5px;padding:19px 34px 19px 0}
.faq p{font-size:14.5px}

/* ---------------- 页脚 ---------------- */
.m-foot{padding:26px 18px 40px}
.m-foot p{margin:0;font-size:11.5px;letter-spacing:.08em;color:var(--ink-2);line-height:1.9}

/* 配对弹窗在手机上留足边距 */
.match-modal{padding:16px}
.match-modal-box{padding:26px 20px 22px}
.match-modal-box h2{font-size:18px}
.match-pair .ph{width:52px;height:52px}
.toast{left:16px;right:16px;max-width:none;transform:translateY(14px)}
.toast.is-on{transform:none}