/* ==========================================
   新享目 CRM v35.0 — 小红书风格动态社区
   ─ 3级圆角 · 4级字体 · 统一配色 · 安全区适配
   ========================================== */

/* ═══════ Design Tokens ═══════ */
:root{
  /* Primary */
  --p:#4f46e5;--pd:#4338ca;--pl:#818cf8;--pb:#eef2ff;
  /* Semantic states */
  --green:#10b981;--green-bg:#ecfdf5;--green-bd:#a7f3d0;
  --orange:#f59e0b;--orange-bg:#fffbeb;--orange-bd:#fde68a;
  --gold:#d97706;--gold-bg:#fffbeb;--gold-bd:#fde68a;
  --red:#ef4444;--red-bg:#fef2f2;--red-bd:#fecaca;
  --gray:#9ca3af;--gray-bg:#f3f4f6;--gray-bd:#e5e7eb;
  /* Surfaces */
  --bg:#f3f4f6;--bg2:#f9fafb;--card:#fff;
  /* Text: 3 levels */
  --t1:#111827;--t2:#6b7280;--t3:#9ca3af;
  /* Borders */
  --bd:#e5e7eb;--bdl:#f3f4f6;
  /* ── 3 radius sizes only ── */
  --r:16px;   /* 大卡片 */
  --r-sm:8px; /* 小按钮/状态标签 */
  --r-xs:6px; /* 输入框/头像 */
  /* Shadows (3 levels) */
  --sh:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --sh-md:0 4px 12px rgba(0,0,0,.08);
  /* ── Spacing: 16pt content margin, 24/16/8 module gaps ── */
  --mx:16px;  /* 页面左右边距 */
  --gap-lg:24px; /* 大模块间距 */
  --gap:16px;    /* 小模块间距 */
  --gap-sm:8px;  /* 列表项间距 */
  /* Nav */
  --nav-h:56px;
  --status-h:28px; /* Native status bar content height */
  --header-h:48px;
}

/* ═══════ Reset ═══════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
  background:#d1d5db;color:var(--t1);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  margin:0;padding:0;
}
a{text-decoration:none;color:var(--p)}img{max-width:100%;display:block}

/* ═══════ App Shell ═══════ */
.app{
  width:100%;max-width:100%;
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
  background:var(--bg);
}
/* Large screens: center + cap width */
@media(min-width:480px){
  body{display:flex;justify-content:center}
  .app{max-width:480px;box-shadow:0 0 40px rgba(0,0,0,.08)}
}

/* ── Status Bar (safe-area: absorbs system status bar space) ── */
.status-bar{
  /* Height: content 28px + system safe-area top */
  min-height:calc(var(--status-h) + env(safe-area-inset-top,0px));
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:0;
  background:#1e1b4b;
  color:rgba(255,255,255,.7);
  display:flex;align-items:center;justify-content:space-between;
  padding-left:var(--mx);padding-right:var(--mx);
  font-size:11px;font-weight:600;flex-shrink:0;
}

/* ── Header (safe area aware) ── */
.page-header{
  height:var(--header-h);flex-shrink:0;
  background:linear-gradient(135deg,#312e81,#4338ca 50%,#6366f1);
  color:#fff;display:flex;align-items:center;
  padding:0 var(--mx);
  position:sticky;top:0;z-index:50;
}
.page-header h1{
  font-size:18px;font-weight:600;letter-spacing:.2px;
}

/* ── Page Body (scrollable, no fixed padding hacks) ── */
.page-body{
  flex:1 1 0;  /* fill remaining space */
  min-height:0;  /* allow shrinking for overflow */
  padding:var(--gap) var(--mx);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}

/* ═══════ Bottom Nav — flex flow, no fixed positioning, natural alignment ═══════ */
.bnav{
  flex-shrink:0;  /* stays at bottom of flex column */
  width:100%;  /* inherits from .app */
  min-height:calc(var(--nav-h) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:var(--card);
  border-top:0.5px solid rgba(0,0,0,.06);
  display:flex;align-items:stretch;
  z-index:100;
  box-shadow:0 -1px 8px rgba(0,0,0,.04);
}
.bnav i{
  flex:1 1 0;  /* equal width distribution */
  min-width:0;  /* allow shrinking */
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;cursor:pointer;color:var(--t2);
  font-size:10px;font-weight:400;font-style:normal;
  transition:color .2s;position:relative;
  height:var(--nav-h);
}
.bnav i .bi{font-size:22px;line-height:1}
.bnav i.active{color:var(--p);font-weight:600}
.bnav i.active::after{
  content:'';position:absolute;top:0;left:25%;right:25%;height:2px;
  background:var(--p);border-radius:0 0 2px 2px;
}

/* ═══════ Cards ═══════ */
.card{
  background:var(--card);border-radius:var(--r);box-shadow:var(--sh);
  padding:var(--gap);margin-bottom:var(--gap);
  border:1px solid var(--bdl);
}
.card-hd{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--gap);
}
.card-hd h3{font-size:16px;font-weight:500;color:var(--t1)}

/* ═══════ Stat Cards (unified 2x2 grid) ═══════ */
.stats2{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-sm);
  margin-bottom:var(--gap);
}
.stat2{
  background:var(--card);border-radius:var(--r);box-shadow:var(--sh);
  padding:var(--gap) var(--gap-sm);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;border:1px solid var(--bdl);
  min-height:88px;
}
.stat2 .si{
  width:36px;height:36px;border-radius:var(--r-sm);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:18px;
  margin-bottom:var(--gap-sm);
}
.stat2 .si.b{background:var(--pb);color:var(--p)}
.stat2 .si.g{background:var(--green-bg);color:var(--green)}
.stat2 .si.o{background:var(--orange-bg);color:var(--orange)}
.stat2 .si.r{background:var(--red-bg);color:var(--red)}
.stat2 .sv{font-size:24px;font-weight:700;line-height:1.2;color:var(--t1)}
.stat2 .sl{font-size:12px;font-weight:400;color:var(--t2);margin-top:2px}

/* ═══════ Quick Action Grid ═══════ */
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-sm);margin-bottom:var(--gap)}
.qcard{
  background:var(--card);border-radius:var(--r);box-shadow:var(--sh);
  padding:var(--gap) var(--gap-sm);text-align:center;cursor:pointer;
  border:1px solid var(--bdl);transition:transform .15s;
  min-height:88px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.qcard:active{transform:scale(.96)}
.qcard .qc-icon{
  width:36px;height:36px;border-radius:var(--r-sm);margin-bottom:var(--gap-sm);
  display:inline-flex;align-items:center;justify-content:center;font-size:18px;
}
.qcard .qc-title{font-size:14px;font-weight:400;color:var(--t1);margin-bottom:2px}
.qcard .qc-sub{font-size:12px;font-weight:400;color:var(--t2)}

/* ═══════ Today Items ═══════ */
.today-item{
  display:flex;align-items:center;gap:12px;
  padding:var(--gap-sm) 0;
  border-bottom:1px solid var(--bdl);cursor:pointer;
  min-height:56px;
}
.today-item:last-child{border-bottom:none}
.today-item:active{opacity:.7}
.today-item .ti-avatar,.today-item .ti-avatar-placeholder{
  width:40px;height:40px;border-radius:var(--r-xs);flex-shrink:0;
}
.today-item .ti-avatar{object-fit:cover;background:var(--bd)}
.today-item .ti-avatar-placeholder{
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;color:#fff;
}
.today-item .ti-info{flex:1;min-width:0}
.today-item .ti-name{font-size:14px;font-weight:400;color:var(--t1)}
.today-item .ti-meta{font-size:12px;font-weight:400;color:var(--t2);margin-top:2px;
  display:flex;gap:8px;align-items:center}
.today-item .ti-addr{font-size:11px;font-weight:400;color:var(--t2);margin-top:2px}
.today-item .ti-time{font-size:12px;font-weight:400;color:var(--p);flex-shrink:0;align-self:center}

/* ═══════ Progress Badges (unified state colors) ═══════ */
.cust-badge{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 8px;border-radius:var(--r-sm);
  font-size:12px;font-weight:400;white-space:nowrap;line-height:1.5;
  border:none;
}
.cust-badge.pending{background:var(--orange-bg);color:var(--orange)}
.cust-badge.visited{background:var(--green-bg);color:var(--green)}
.cust-badge.closed{background:var(--gold-bg);color:var(--gold)}
.cust-badge.noshow{background:var(--red-bg);color:var(--red)}
.cust-badge.complaint{background:var(--red-bg);color:var(--red)}
.cust-badge.lost{background:var(--gray-bg);color:var(--gray)}

/* ═══════ Tags ═══════ */
.tag{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:var(--r-sm);font-size:12px;font-weight:400;white-space:nowrap;line-height:1.5}
.tag-b{background:var(--pb);color:var(--p)}.tag-g{background:var(--green-bg);color:var(--green)}
.tag-o{background:var(--orange-bg);color:var(--orange)}.tag-r{background:var(--red-bg);color:var(--red)}
.tag-gr{background:var(--bdl);color:var(--t2)}

/* ═══════ Progress Tabs ═══════ */
.ptabs{
  display:flex;gap:6px;margin-bottom:var(--gap);
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:4px 0 6px;scrollbar-width:none;
  /* Visual hint: fade right edge to indicate scrollable */
  mask-image:linear-gradient(to right,black 85%,transparent 100%);
  -webkit-mask-image:linear-gradient(to right,black 85%,transparent 100%);
}
.ptabs::-webkit-scrollbar{display:none}
.ptab{
  flex-shrink:0;padding:6px 14px;border-radius:var(--r-sm);
  font-size:12px;font-weight:400;cursor:pointer;
  color:var(--t2);background:var(--card);
  border:1px solid var(--bd);transition:all .2s;white-space:nowrap;
  display:flex;align-items:center;gap:4px;
  min-height:32px;
}
.ptab:active{opacity:.7}
.ptab.active{background:var(--p);color:#fff;border-color:var(--p)}
.ptab .n{
  background:rgba(0,0,0,.05);padding:0 6px;border-radius:var(--r-xs);
  font-size:11px;font-weight:400;min-width:16px;text-align:center;
}
.ptab.active .n{background:rgba(255,255,255,.2)}

/* ═══════ Search Bar ═══════ */
.sbar{display:flex;gap:8px;margin-bottom:var(--gap);align-items:center}
.sbox{flex:1;position:relative}
.sbox .so{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--t2);z-index:1;pointer-events:none}
.sbox input{padding-left:36px!important}

/* ═══════ Batch Bar ═══════ */
.bbar{
  display:none;align-items:center;gap:8px;
  padding:8px 12px;background:var(--orange);color:#fff;
  border-radius:var(--r-sm);margin-bottom:var(--gap-sm);
  font-size:12px;font-weight:400;
}
.bbar.on{display:flex}.bbar .cnt{flex:1}

/* ═══════ Customer List ═══════ */
.clist{display:flex;flex-direction:column;gap:var(--gap-sm)}
.crow{
  display:flex;align-items:center;gap:8px;background:var(--card);
  border-radius:var(--r);box-shadow:var(--sh);
  padding:12px;border:1px solid var(--bdl);
  cursor:pointer;transition:transform .15s;min-height:64px;
}
.crow:active{transform:scale(.985)}
.crow.sel{background:var(--pb);border-color:var(--pl)}
.cchk{
  width:20px;height:20px;border:1.5px solid var(--bd);
  border-radius:var(--r-xs);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;cursor:pointer;font-size:10px;font-weight:700;
  color:transparent;transition:all .2s;
}
.cchk.on{background:var(--p);border-color:var(--p);color:#fff}
.cth{width:40px;height:40px;border-radius:var(--r-xs);object-fit:cover;flex-shrink:0;background:var(--bd)}
.cthp{
  width:40px;height:40px;border-radius:var(--r-xs);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;color:#fff;flex-shrink:0;
}
.cmain{flex:1;min-width:0}
.cn{font-size:14px;font-weight:400;line-height:1.3;color:var(--t1)}
.cmeta{font-size:12px;font-weight:400;color:var(--t2);margin-top:2px;display:flex;flex-wrap:wrap;gap:8px}
.cmeta i{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-style:normal}
.cright{text-align:right;flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px;justify-content:center}
.ctime{font-size:12px;font-weight:400;color:var(--t2)}

/* ═══════ Check Tabs ═══════ */
.ctabs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-sm);margin-bottom:var(--gap)}
.ctab{display:flex;gap:8px;padding:8px var(--mx);overflow-x:auto;flex-shrink:0}.ctab .cti{flex-shrink:0;text-align:center;padding:6px 12px;border-radius:20px;font-size:13px;font-weight:600;color:var(--t2);background:var(--bg2);cursor:pointer;white-space:nowrap;transition:all .2s}.ctab .cti.on{color:#fff;background:var(--p)}
.ctab:active{transform:scale(.95)}
.ctab.on{border-color:var(--p);background:var(--pb)}
.ctab .cti{width:36px;height:36px;border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:6px}
.ctab .ctl{font-size:14px;font-weight:500;color:var(--t1);margin-bottom:2px}
.ctab .cts{font-size:12px;font-weight:500;color:var(--t1)}

/* ═══════ Upload Zone ═══════ */
.uz{
  border:1.5px dashed var(--bd);border-radius:var(--r);
  padding:24px 16px;text-align:center;cursor:pointer;transition:all .2s;background:var(--bg2);
}
.uz:active,.uz:hover{border-color:var(--p);background:var(--pb)}
.uz .uzi{font-size:32px;margin-bottom:6px}
.uz h4{font-size:14px;font-weight:400;margin-bottom:4px;color:var(--t1)}
.uz p{font-size:12px;font-weight:400;color:var(--t2)}

/* ═══════ Modal ═══════ */
.mo{
  display:none;position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,.45);z-index:200;
  align-items:flex-end;justify-content:center;
}
.mo.on{display:flex}
.md{
  background:var(--card);border-radius:var(--r) var(--r) 0 0;
  width:100%;max-width:480px;max-height:90vh;
  overflow-y:auto;padding-bottom:env(safe-area-inset-bottom,0px);
  box-shadow:0 -4px 24px rgba(0,0,0,.12);
  animation:su .25s ease;
}
@keyframes su{from{transform:translateY(100%)}to{transform:translateY(0)}}
.md-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--mx);border-bottom:1px solid var(--bdl);
  position:sticky;top:0;background:var(--card);z-index:1;
}
.md-hd h3{font-size:16px;font-weight:500;color:var(--t1)}
.md-x{
  width:28px;height:28px;border-radius:50%;border:none;
  background:var(--bg2);font-size:14px;cursor:pointer;color:var(--t2);
  display:flex;align-items:center;justify-content:center;
}
.md-x:active{background:var(--bd)}
.md-body{padding:var(--gap) var(--mx)}
.md-ft{
  display:flex;justify-content:flex-end;gap:8px;
  padding:12px var(--mx);border-top:1px solid var(--bdl);
}

/* ═══════ Detail View ═══════ */
.dt-hd{display:flex;align-items:center;gap:12px;margin-bottom:var(--gap)}
.dt-av,.dt-avp{width:48px;height:48px;border-radius:var(--r-xs);flex-shrink:0}
.dt-av{object-fit:cover;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.dt-avp{display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.1)}
.dt-name{font-size:16px;font-weight:500;color:var(--t1)}
.dt-badges{display:flex;gap:4px;margin-top:4px;flex-wrap:wrap}
.igrid{
  display:flex;flex-direction:column;margin-bottom:var(--gap);
  background:var(--bg2);border-radius:var(--r-sm);overflow:hidden;
}
.ii{display:flex;align-items:center;padding:10px 12px;border-bottom:1px solid var(--bdl);min-height:40px}
.ii:last-child{border-bottom:none}
.iif{flex-direction:column;align-items:flex-start}
.iif .iil{margin-bottom:2px;width:auto}
.iil{min-width:72px;flex-shrink:0;font-size:12px;font-weight:400;color:var(--t2)}
.iiv{flex:1;font-size:14px;font-weight:400;color:var(--t1);word-break:break-all}
.sec-t{
  font-size:14px;font-weight:500;color:var(--t1);
  margin:var(--gap) 0 var(--gap-sm);padding-bottom:8px;
  border-bottom:1px solid var(--bdl);
}
.tl{padding-left:14px;border-left:2px solid var(--bd)}
.tli{position:relative;padding:8px 0 8px 12px}
.tli::before{
  content:'';position:absolute;left:-19px;top:12px;
  width:8px;height:8px;border-radius:50%;background:var(--p);
  border:2px solid var(--card);
}
.tlh{display:flex;justify-content:space-between;font-size:12px;font-weight:400;color:var(--t2);margin-bottom:2px}
.tlc{font-size:14px;font-weight:400;color:var(--t1);line-height:1.5}

/* ═══════ Profile ═══════ */
.profile-hd{text-align:center;padding:var(--gap) 0}
.profile-av-wrap{
  position:relative;display:inline-block;cursor:pointer;
  width:64px;height:64px;border-radius:var(--r);
}
.profile-av-img{
  width:64px;height:64px;border-radius:var(--r);object-fit:cover;
}
.profile-av-edit{
  position:absolute;bottom:-2px;right:-2px;
  width:24px;height:24px;border-radius:50%;
  background:var(--p);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;border:2px solid var(--card);
}
.profile-av{
  width:64px;height:64px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  font-size:28px;font-weight:700;color:#fff;margin:0 auto;
}
.profile-name-row{
  display:flex;align-items:center;justify-content:center;margin-top:10px;
}
.profile-name{font-size:18px;font-weight:600;color:var(--t1)}
.profile-role{font-size:12px;font-weight:400;color:var(--t2);margin-top:2px}
.profile-stats{
  display:flex;background:var(--card);border-radius:var(--r);
  box-shadow:var(--sh);overflow:hidden;margin-bottom:var(--gap);
  border:1px solid var(--bdl);
}
.profile-stat{
  flex:1;text-align:center;padding:var(--gap) 8px;cursor:pointer;
  min-height:56px;display:flex;flex-direction:column;justify-content:center;
}
.profile-stat:active{background:var(--bg2)}
.profile-stat+.profile-stat{border-left:1px solid var(--bdl)}
.profile-stat .ps-v{font-size:20px;font-weight:700;color:var(--p)}
.profile-stat .ps-l{font-size:12px;font-weight:400;color:var(--t2);margin-top:2px}
.pmenu{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;margin-bottom:var(--gap);border:1px solid var(--bdl)}
.pmenu-item{
  display:flex;align-items:center;gap:12px;padding:14px var(--mx);
  cursor:pointer;border-bottom:1px solid var(--bdl);min-height:48px;
}
.pmenu-item:last-child{border-bottom:none}
.pmenu-item:active{background:var(--bg2)}
.pmenu-item .pmi{font-size:18px;flex-shrink:0;width:24px;text-align:center}
.pmenu-item .pml{flex:1;font-size:14px;font-weight:400;color:var(--t1)}
.pmenu-item .pma{font-size:14px;color:var(--t2)}

/* ═══════ Community Feed - Xiaohongshu Style ═══════ */

/* Top search + publish bar */
.sbar{display:flex;align-items:center;gap:8px;padding:10px var(--mx);background:var(--card)}
.sbar .sbox{flex:1;position:relative}
.sbar .sbox .so{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--t3);z-index:1}
.sbar .sbox input{padding-left:32px;background:var(--bg);border-radius:20px;height:36px;font-size:13px}
.sbar .btn-pub{flex-shrink:0;background:var(--p);color:#fff;border:none;border-radius:18px;padding:7px 16px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}

/* Category tabs - Xiaohongshu style */
.post-cats{display:flex;gap:0;padding:8px 0 6px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--bdl);background:var(--card);flex-shrink:0}
.post-cats::-webkit-scrollbar{display:none}
.post-cat{flex-shrink:0;padding:6px 16px;font-size:14px;font-weight:500;color:var(--t2);cursor:pointer;position:relative;transition:all .2s;white-space:nowrap;line-height:1.4}
.post-cat.on{color:var(--t1);font-weight:700}
.post-cat.on::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:20px;height:3px;background:var(--p);border-radius:2px}

/* Dual-column waterfall grid */
.feed-grid{column-count:2;column-gap:8px;padding:8px var(--mx)}
.feed-card{break-inside:avoid;margin-bottom:8px;background:var(--card);border-radius:12px;overflow:hidden;cursor:pointer;transition:transform .15s}
.feed-card:active{transform:scale(.97)}
.feed-card .card-img{position:relative;overflow:hidden;background:var(--bdl)}
.feed-card .card-img img{width:100%;display:block;object-fit:cover}
.feed-card .card-body{padding:8px 10px}
.feed-card .card-title{font-size:13px;font-weight:500;color:var(--t1);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.feed-card .card-footer{display:flex;align-items:center;padding:0 10px 10px;gap:12px}
.feed-card .card-user{display:flex;align-items:center;gap:6px;padding:8px 10px 0}
.card-user .cu-av{width:20px;height:20px;border-radius:50%;object-fit:cover;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:700}
.card-user .cu-name{font-size:11px;color:var(--t2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Post detail modal */
.post-detail .pd-hd{display:flex;align-items:center;gap:10px;padding:12px 16px}
.post-detail .pd-av{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:700}
.post-detail .pd-av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.post-detail .pd-body{padding:0 16px}
.post-detail .pd-body img{width:100%;border-radius:10px;margin-bottom:12px}
.post-detail .pd-text{font-size:15px;line-height:1.7;color:var(--t1);white-space:pre-wrap;word-break:break-word;margin-bottom:12px}
.post-detail .pd-meta{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--t3);margin-bottom:12px}
.post-detail .pd-actions{display:flex;align-items:center;gap:24px;padding:12px 16px;border-top:1px solid var(--bdl);border-bottom:1px solid var(--bdl)}

/* Comments area */
.pd-comments{padding:12px 16px;max-height:40vh;overflow-y:auto}
.pd-cm{display:flex;gap:8px;padding:8px 0;border-bottom:1px solid var(--bdl)}
.pd-cm:last-child{border-bottom:none}
.pd-cm .pd-cm-av{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700}
.pd-cm .pd-cm-body{flex:1;min-width:0}
.pd-cm .pd-cm-name{font-size:11px;color:var(--t2);margin-bottom:2px}
.pd-cm .pd-cm-text{font-size:13px;color:var(--t1);line-height:1.5;word-break:break-word}

/* Comment input */
.pd-input{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--card)}
.pd-input input{flex:1;border:none;background:var(--bg);padding:10px 14px;border-radius:20px;font-size:13px;outline:none}
.pd-input button{flex-shrink:0;background:var(--p);color:#fff;border:none;border-radius:18px;padding:7px 16px;font-size:12px;font-weight:600;cursor:pointer}

/* Compose panel */
.compose-cats{display:flex;flex-wrap:wrap;gap:8px;padding:8px 0}
.compose-cat{padding:6px 14px;border-radius:16px;font-size:12px;border:1px solid var(--bd);color:var(--t2);cursor:pointer;transition:all .2s}
.compose-cat.on{background:var(--pb);color:var(--p);border-color:var(--p)}

/* ═══════ Buttons (44pt height, unified) ═══════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:0 16px;border-radius:var(--r-sm);font-size:14px;font-weight:400;
  border:none;cursor:pointer;transition:all .15s;white-space:nowrap;
  min-height:44px;font-family:inherit;
}
.btn:active{opacity:.7}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-p{background:var(--p);color:#fff}
.btn-p:active{background:var(--pd)}
.btn-s{background:var(--green);color:#fff}
.btn-d{background:var(--red);color:#fff}
.btn-g{background:var(--card);color:var(--t1);border:1px solid var(--bd)}
.btn-g:active{background:var(--bg2)}
.btn-o{background:transparent;border:1px solid var(--p);color:var(--p)}
.btn-sm{padding:0 12px;font-size:12px;min-height:36px}
.btn-xs{padding:0 10px;font-size:12px;min-height:32px}
.btn-blk{width:100%;justify-content:center}

/* ═══════ Form Controls (44pt height) ═══════ */
.fg{margin-bottom:var(--gap)}
.fl{display:block;font-size:12px;font-weight:400;color:var(--t2);margin-bottom:6px}
.fl .rq{color:var(--red);margin-left:1px}
.fi,.fs,.ft{
  width:100%;padding:0 12px;border:1px solid var(--bd);
  border-radius:var(--r-xs);font-size:14px;font-weight:400;font-family:inherit;
  outline:none;transition:border .2s;background:var(--card);color:var(--t1);
  -webkit-appearance:none;appearance:none;
  min-height:44px;
}
.fi:focus,.fs:focus,.ft:focus{border-color:var(--p)}
.ft{resize:vertical;min-height:80px;padding:10px 12px}
.fi::placeholder{color:var(--t2)}
.fs{
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;cursor:pointer;
}

/* ═══════ Pagination ═══════ */
.pg{display:flex;align-items:center;justify-content:center;gap:4px;padding:var(--gap) 0 8px}
.pg-btn{
  padding:0 12px;border:1px solid var(--bd);background:var(--card);
  border-radius:var(--r-xs);cursor:pointer;font-size:12px;font-weight:400;
  color:var(--t2);min-width:36px;min-height:36px;text-align:center;
  display:flex;align-items:center;justify-content:center;
}
.pg-btn:active{background:var(--bg2)}
.pg-btn:disabled{opacity:.3;cursor:not-allowed}
.pg-btn.on{background:var(--p);color:#fff;border-color:var(--p)}

/* ═══════ Empty State ═══════ */
.empty{text-align:center;padding:48px var(--mx);color:var(--t2)}
.empty .ei{font-size:40px;margin-bottom:12px;opacity:.5}
.empty h3{font-size:14px;font-weight:400;color:var(--t1);margin-bottom:4px}
.empty p{font-size:12px;font-weight:400;color:var(--t2)}

/* ═══════ Toast ═══════ */
.tc{
  position:fixed;top:calc(env(safe-area-inset-top,20px) + 48px + 8px);
  left:50%;transform:translateX(-50%);z-index:10000;
  display:flex;flex-direction:column;gap:6px;pointer-events:none;max-width:90%;
}
.toast{
  display:flex;align-items:center;gap:8px;padding:10px 16px;
  border-radius:var(--r-sm);background:var(--card);box-shadow:var(--sh-md);
  font-size:12px;font-weight:400;color:var(--t1);
  animation:ti .3s ease;pointer-events:auto;
  border-left:3px solid var(--green);min-height:44px;
}
.toast.e{border-left-color:var(--red)}.toast.w{border-left-color:var(--orange)}
@keyframes ti{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

.spin{width:32px;height:32px;border:3px solid var(--bdl);border-top-color:var(--p);border-radius:50%;animation:spin .6s linear infinite;margin:48px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.fade{animation:fi .2s ease}
@keyframes fi{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ═══════ Auth Page ═══════ */
.auth{
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#1e1b4b,#312e81 30%,#4338ca 60%,#6366f1);
  padding-top:env(safe-area-inset-top,0px);
}
.auth-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 32px 24px;text-align:center}
.auth-hero .logo{width:64px;height:64px;background:rgba(255,255,255,.1);border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:14px;backdrop-filter:blur(10px)}
.auth-hero h1{color:#fff;font-size:28px;font-weight:600}
.auth-hero>p{color:rgba(255,255,255,.5);font-size:14px;font-weight:400;margin-top:6px;max-width:260px}
.auth-fts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:20px;max-width:280px;width:100%}
.auth-ft{background:rgba(255,255,255,.07);border-radius:var(--r-sm);padding:10px 8px;text-align:center;backdrop-filter:blur(10px)}
.auth-ft .afi{font-size:18px;margin-bottom:2px}
.auth-ft .afl{font-size:12px;font-weight:400;color:rgba(255,255,255,.7)}
.auth-card{
  background:var(--card);border-radius:var(--r) var(--r) 0 0;
  padding:28px var(--mx) calc(32px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -4px 20px rgba(0,0,0,.1);
}
.auth-card h2{font-size:18px;font-weight:600;text-align:center;margin-bottom:4px;color:var(--t1)}
.auth-card .sub{text-align:center;font-size:12px;font-weight:400;color:var(--t2);margin-bottom:20px}
.auth-switch{text-align:center;margin-top:16px;font-size:12px;font-weight:400;color:var(--t2)}
.auth-switch a{font-weight:500;color:var(--p)}

/* ═══════ Responsive ═══════ */
@media(min-width:481px){
  .app{border-left:1px solid var(--bd);border-right:1px solid var(--bd)}
  body{background:#e5e7eb}
}
@media(min-width:768px){
  .app{box-shadow:0 0 60px rgba(0,0,0,.1)}
  body{padding:24px 0;align-items:center}
}
@media(max-width:359px){
  .stats2{grid-template-columns:1fr}
  .qgrid{grid-template-columns:1fr}
  .ctabs{grid-template-columns:1fr 1fr}
  .cust-badge{font-size:11px;padding:1px 6px}
  .crow{padding:10px 8px;gap:6px}
  .cthp,.cth{width:36px;height:36px}

}

.card-footer{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 8px;gap:4px}
.card-acts{display:flex;align-items:center;gap:10px;flex-shrink:0}
.card-footer .card-user{display:flex;align-items:center;gap:4px;flex:1;min-width:0;overflow:hidden}
.card-footer .cu-av{width:16px;height:16px;border-radius:50%;flex-shrink:0}
.card-footer .cu-name{font-size:10px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-footer .feed-act{display:inline-flex;align-items:center;gap:2px;font-size:11px;color:var(--t2);cursor:pointer}
.card-footer .feed-act.liked span{color:#ff2442}

.dt-hd{display:flex;align-items:center;gap:12px;padding:16px;background:var(--bg2);border-radius:var(--r) var(--r) 0 0}
.dt-av{width:52px;height:52px;border-radius:50%;object-fit:cover;flex-shrink:0}
.dt-avp{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;font-weight:700;flex-shrink:0}
.dt-name{font-size:18px;font-weight:700;color:var(--t1);margin-bottom:4px}
.dt-badges{display:flex;gap:6px;flex-wrap:wrap}
.igrid{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0 16px}
.igrid .ii{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-bottom:1px solid var(--bdl)}
.igrid .ii:nth-child(odd){padding-right:8px}
.igrid .ii:nth-child(even){padding-left:8px}
.igrid .iif{grid-column:span 2}
.ii .iil{font-size:11px;color:var(--t3);text-transform:none;letter-spacing:0}
.ii .iiv{font-size:14px;font-weight:500;color:var(--t1);line-height:1.4;word-break:break-all}
.sec-t{font-size:14px;font-weight:700;color:var(--t1);padding:16px 16px 8px;border-top:8px solid var(--bg)}
.tl{padding:0 16px}
.tli{background:var(--bg2);border-radius:8px;padding:10px 12px;margin-bottom:6px}
.tlh{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;font-size:11px;color:var(--t3)}
.tlc{font-size:14px;color:var(--t1);line-height:1.6;white-space:pre-wrap}
.tl-act{cursor:pointer;padding:2px 4px;border-radius:4px;margin-left:6px;transition:all .2s}
.tl-act:hover{background:var(--bdl)}

.pd-imgs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:4px;margin-bottom:12px;border-radius:10px;-webkit-overflow-scrolling:touch}
.pd-imgs::-webkit-scrollbar{display:none}
.pd-imgs img{scroll-snap-align:start;width:100%;max-height:60vh;object-fit:contain;flex-shrink:0;border-radius:10px}
.pd-imgs.single img{width:100%;max-height:none}

/* ═══════ Chat / IM 微信风格 ═══════ */
/* Conversation list */
.cl-row{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--bdl);cursor:pointer;transition:background .15s}
.cl-row:active{background:var(--bg)}
.cl-av{width:48px;height:48px;border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;font-weight:600;object-fit:cover}
.cl-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.cl-top{display:flex;justify-content:space-between;align-items:center}
.cl-name{font-size:16px;font-weight:500;color:var(--t1)}
.cl-time{font-size:11px;color:var(--t3);flex-shrink:0}
.cl-bottom{display:flex;justify-content:space-between;align-items:center}
.cl-preview{font-size:13px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.cl-badge{background:var(--red);color:#fff;font-size:10px;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 5px;flex-shrink:0;margin-left:8px}

/* Chat window */
.chat-window{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg);z-index:100;display:flex;flex-direction:column}
.chat-header{display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 12px;background:var(--card);border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:2}
.chat-back{background:none;border:none;font-size:28px;color:var(--p);cursor:pointer;padding:0 4px;line-height:1}
.chat-title{font-size:17px;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;text-align:center}

/* Messages area */
.chat-messages{flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:12px;-webkit-overflow-scrolling:touch}
.msg-row{display:flex;align-items:flex-start;gap:8px;max-width:100%}
.msg-row.msg-me{flex-direction:row-reverse}
.msg-av{width:36px;height:36px;border-radius:4px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:600;object-fit:cover}
.msg-bubble{max-width:70%;padding:10px 14px;border-radius:6px;position:relative;word-break:break-word}
.msg-bubble.msg-gray{background:#fff;color:var(--t1);border:1px solid var(--bdl)}
.msg-bubble.msg-blue{background:var(--p);color:#fff}
.msg-text{font-size:15px;line-height:1.5;white-space:pre-wrap}

/* Input bar */
.chat-input-bar{display:flex;align-items:center;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:var(--card);border-top:1px solid var(--bd);position:sticky;bottom:0;z-index:2}
.chat-input{flex:1;height:38px;border:1px solid var(--bd);border-radius:6px;padding:0 12px;font-size:15px;outline:none;background:var(--bg);color:var(--t1)}
.chat-input:focus{border-color:var(--p)}
.chat-send{background:var(--p);color:#fff;border:none;border-radius:6px;padding:0 18px;height:38px;font-size:15px;font-weight:500;cursor:pointer;flex-shrink:0}
.chat-send:active{background:var(--pd)}

/* New chat user selector */
.nc-user:hover{background:var(--bg2)}
.nc-cb{accent-color:var(--p)}

/* Chat top bar (search + add button) */
.chat-top-bar{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--card);border-bottom:1px solid var(--bdl);position:sticky;top:0;z-index:1}
.chat-search-wrap{flex:1;position:relative}
.chat-search-wrap .cs-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--t3);z-index:1;pointer-events:none}
.chat-search-input{width:100%;height:34px;padding:0 12px 0 32px;border:1px solid var(--bd);border-radius:6px;font-size:14px;background:var(--bg);color:var(--t1);outline:none}
.chat-search-input:focus{border-color:var(--p)}
.chat-add-btn{width:34px;height:34px;border:none;border-radius:6px;background:var(--p);color:#fff;font-size:22px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chat-add-btn:active{background:var(--pd)}

/* FAB (floating action button) */
.fab{position:fixed;bottom:72px;right:16px;z-index:10;width:50px;height:50px;border-radius:50%;background:var(--p);color:#fff;font-size:26px;font-weight:400;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(79,70,229,.35);transition:transform .15s,box-shadow .15s}
.fab:active{transform:scale(.92);box-shadow:0 2px 8px rgba(79,70,229,.25)}