/* ============ 基础 ============ */
:root{
  --bg: #f5f5f7;
  --bg-glass: rgba(255,255,255,.72);
  --card: #ffffff;
  --text: #1d1d1f;
  --text-2: #6e6e73;
  --text-3: #86868b;
  --line: rgba(0,0,0,.08);
  --blue: #0071e3;
  --blue-hover: #0077ed;
  --green: #34c759;
  --orange: #ff9500;
  --red: #ff3b30;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 1px 3px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
  --shadow-lg: 0 4px 12px rgba(0,0,0,.06), 0 16px 40px rgba(0,0,0,.08);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
/* 触屏设备：禁用默认点按高亮，用我们自己的反馈 */
@media(hover:none){
  *{-webkit-tap-highlight-color:transparent; touch-action:manipulation}
  /* 触屏上 hover 效果没意义，去掉悬停位移（避免"粘住"） */
  .card:hover{transform:none; box-shadow:var(--shadow)}
  .tool-btn:hover{transform:none; background:rgba(0,0,0,.045)}
  .module-card.live:hover{transform:none; box-shadow:var(--shadow)}
  .chip:hover{background:rgba(0,0,0,.045)}
  .mini-btn:hover{background:rgba(0,0,0,.05)}
  .mini-btn.suggest:hover{background:rgba(0,113,227,.1)}
}
html,body{height:100%}
body{
  margin:0; font-family:var(--font); color:var(--text); background:var(--bg);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
input{font-family:inherit}

/* ============ 滚动条（苹果风） ============ */
.scroll{overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.18) transparent}
.scroll::-webkit-scrollbar{width:8px}
.scroll::-webkit-scrollbar-track{background:transparent}
.scroll::-webkit-scrollbar-thumb{background:rgba(0,0,0,.16); border-radius:4px; border:2px solid transparent; background-clip:padding-box}
.scroll::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.28); background-clip:padding-box}

/* ============ 通用组件 ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 16px; border-radius:980px; font-size:14px; font-weight:500;
  transition:all .2s cubic-bezier(.4,0,.2,1); white-space:nowrap;
}
.btn-primary{background:var(--blue); color:#fff}
.btn-primary:hover{background:var(--blue-hover); transform:scale(1.02)}
.btn-primary:active{transform:scale(.98)}
.btn-ghost{background:rgba(0,0,0,.05); color:var(--text)}
.btn-ghost:hover{background:rgba(0,0,0,.08)}

/* ============ 全局顶栏 ============ */
.topbar{
  height:52px; display:flex; align-items:center; gap:4px; padding:0 16px;
  background:var(--bg-glass); backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line); position:relative; z-index:100; flex:none;
}
.brand{
  display:flex; align-items:center; gap:7px; padding:6px 12px; border-radius:10px;
  font-weight:600; font-size:15px; letter-spacing:-.01em; margin-right:8px;
}
.brand-icon{width:20px; height:20px; border-radius:6px; background:linear-gradient(135deg,#ff9500,#ff3b30);
  display:flex; align-items:center; justify-content:center; font-size:12px}
.nav-tabs{display:flex; gap:2px; flex:1}
.nav-tab{
  padding:6px 14px; border-radius:980px; font-size:14px; font-weight:500;
  color:var(--text-2); transition:all .2s;
}
.nav-tab:hover{background:rgba(0,0,0,.04); color:var(--text)}
.nav-tab.active{background:rgba(0,0,0,.06); color:var(--text); font-weight:600}
.nav-tab.disabled{color:var(--text-3); opacity:.55; cursor:not-allowed}
.nav-tab.disabled:hover{background:transparent; color:var(--text-3)}

.user-chip{
  display:flex; align-items:center; gap:8px; padding:5px 12px 5px 5px;
  border-radius:980px; background:rgba(0,0,0,.05); transition:all .2s;
}
.user-chip:hover{background:rgba(0,0,0,.09)}
.avatar{
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:13px; font-weight:600; color:#fff; flex:none;
}
.user-name{font-size:13.5px; font-weight:500; max-width:90px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}

/* ============ 主视图容器 ============ */
.view{flex:1; display:none; min-height:0}
.view.active{display:flex}
.app{height:100vh; display:flex; flex-direction:column; overflow:hidden}

/* ============ 首页 ============ */
#home{flex-direction:column; align-items:center; padding:38px 24px 60px; overflow-y:auto}
.module-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr));
  gap:18px; width:100%; max-width:760px;
}
.module-card{
  background:var(--card); border-radius:var(--radius); padding:26px 24px;
  box-shadow:var(--shadow); text-align:left; transition:all .28s cubic-bezier(.4,0,.2,1);
  border:1px solid rgba(0,0,0,.04); min-height:150px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.module-card.live{cursor:pointer}
.module-card.live:hover{transform:translateY(-3px) scale(1.01); box-shadow:var(--shadow-lg)}
.module-card.live:active{
  transform:translateY(1px) scale(.975);
  filter:brightness(.88);
  box-shadow:0 1px 2px rgba(0,0,0,.08);
  transition:transform .06s linear, filter .06s linear, box-shadow .06s linear;
}
.module-card.dead{opacity:.5; cursor:not-allowed; background:rgba(255,255,255,.5)}
.module-emoji{font-size:30px; margin-bottom:14px; line-height:1}
.module-name{font-size:19px; font-weight:600; letter-spacing:-.01em; margin-bottom:5px}
.module-desc{font-size:13.5px; color:var(--text-2); line-height:1.45}
/* 模块状态徽章：可用=绿 / 施工中=橙 / 敬请期待=灰 */
.module-badge{
  display:inline-block; font-size:11px; font-weight:600; padding:2px 9px;
  border-radius:980px; background:rgba(0,0,0,.06); color:var(--text-2);
  margin-top:12px; align-self:flex-start;
}
.module-badge.badge-live{ background:rgba(52,199,89,.12);  color:#1f7a37 }
.module-badge.badge-wip { background:rgba(255,149,0,.14);  color:#a35b00 }
.module-badge.badge-soon{ background:rgba(0,0,0,.055);     color:var(--text-3) }

/* ============ 吃什么页面：三栏布局 ============ */
#eat{position:relative; min-height:0}
.eat-wrap{flex:1; display:flex; gap:14px; padding:14px; min-height:0; position:relative}

/* 侧栏通用 */
.side{
  width:252px; flex:none; background:var(--card); border-radius:var(--radius);
  box-shadow:var(--shadow); display:flex; flex-direction:column;
  transition:width .32s cubic-bezier(.4,0,.2,1), opacity .24s, margin .32s;
  overflow:hidden; border:1px solid rgba(0,0,0,.04);
}
.side.hidden{width:0; opacity:0; margin-left:-14px; margin-right:-14px; border-width:0}

.side-head{
  padding:15px 17px 12px; display:flex; align-items:center; justify-content:space-between;
  flex:none; border-bottom:1px solid var(--line);
}
.side-title{font-size:14px; font-weight:600; letter-spacing:-.01em}
.side-body{flex:1; min-height:0; padding:6px 17px 18px}

/* 中间主区 */
.main-area{flex:1; min-width:0; display:flex; flex-direction:column; gap:14px}

/* 工具栏 */
.toolbar{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:12px 14px; display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  border:1px solid rgba(0,0,0,.04); flex:none;
}
.tool-btn{
  display:inline-flex; align-items:center; gap:7px; padding:8px 15px;
  border-radius:980px; background:rgba(0,0,0,.045); font-size:14px; font-weight:500;
  transition:all .2s cubic-bezier(.4,0,.2,1);
}
.tool-btn:hover{background:rgba(0,0,0,.085); transform:translateY(-1px)}
.tool-btn:active{
  transform:scale(.955); background:rgba(0,0,0,.13);
  filter:brightness(.9);
  transition:transform .06s linear, background .06s, filter .06s linear;
}
.tool-btn.primary{background:var(--blue); color:#fff}
.tool-btn.primary:hover{background:var(--blue-hover)}
.tool-spacer{flex:1}
.count-pill{
  font-size:13px; color:var(--text-2); background:rgba(0,0,0,.04);
  padding:5px 12px; border-radius:980px; font-variant-numeric:tabular-nums;
}

/* 短标签（手机用） */
.tlabel-short{display:none}

/* 搜索框内计数 */
.search-count{
  display:none; font-size:12.5px; color:var(--text-3); flex:none;
  font-variant-numeric:tabular-nums; white-space:nowrap; padding-right:2px;
}
.search-box:not(.has-text) .search-count{display:inline}
.search-box.has-text .search-clear{display:flex}
.search-box:not(.has-text) .search-clear{display:none}

/* 搜索框 */
.search-box{
  position:relative; display:flex; align-items:center; gap:7px;
  background:rgba(0,0,0,.045); border-radius:980px; padding:0 12px;
  height:34px; min-width:190px; max-width:280px; flex:1 1 auto;
  transition:all .2s cubic-bezier(.4,0,.2,1);
}
.search-box:focus-within{background:#fff; box-shadow:0 0 0 3px rgba(0,113,227,.12)}
.search-ic{font-size:13px; opacity:.5; flex:none}
.search-box input{
  flex:1; min-width:0; border:none; background:none; outline:none;
  font-size:14px; padding:0; color:var(--text);
}
.search-box input::placeholder{color:var(--text-3)}
.search-clear{
  display:none; width:17px; height:17px; border-radius:50%; flex:none;
  background:rgba(0,0,0,.16); color:#fff; font-size:10px; line-height:1;
  align-items:center; justify-content:center; transition:background .15s;
}
.search-clear:hover{background:rgba(0,0,0,.28)}
.search-box.has-text .search-clear{display:flex}

/* 搜索高亮 */
.hl{background:rgba(255,149,0,.28); border-radius:3px; padding:0 1px}

/* 底部条新消息红点 */
.mb-btn.has-new{position:relative}
.mb-btn.has-new::after{
  content:''; position:absolute; top:4px; right:22%;
  width:8px; height:8px; border-radius:50%; background:var(--red);
  box-shadow:0 0 0 2px var(--bg);
}

/* 列表计数（手机显示） */
.list-count{display:none}

/* 卡片网格 */
.grid{
  flex:1; min-height:0; overflow-y:auto;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(196px,1fr));
  grid-auto-rows:min-content;
  gap:14px; align-content:start; padding:2px 2px 20px;
}
.card{
  background:var(--card); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); transition:all .28s cubic-bezier(.4,0,.2,1);
  cursor:pointer; border:1px solid rgba(0,0,0,.04);
  display:flex; flex-direction:column; height:auto;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
/* 按下：轻微下沉 + 压暗（苹果风：压强感，不用变色） */
.card:active{
  transform:translateY(1px) scale(.972);
  box-shadow:0 1px 2px rgba(0,0,0,.12);
  filter:brightness(.86) saturate(.9);
  transition:transform .06s linear, box-shadow .06s linear, filter .06s linear;
}
.card::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:rgba(0,0,0,0); pointer-events:none;
  transition:background .12s cubic-bezier(.4,0,.2,1);
}
.card:active::after{background:rgba(0,0,0,.12); transition:background 0s}
.card{position:relative}
.card-img{
  position:relative; width:100%; height:118px; flex:none;
  background:linear-gradient(135deg,#f0f0f2,#e4e4e8);
  overflow:hidden;
}
.card-img .ph-emoji{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:40px; line-height:1; filter:saturate(.92);
  text-shadow:0 2px 8px rgba(0,0,0,.06);
}
.card-img::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.035), transparent 55%);
}
.card-type-badge{
  position:absolute; top:9px; left:9px; z-index:2; font-size:10.5px; font-weight:600;
  padding:3px 9px; border-radius:980px; backdrop-filter:blur(12px);
  background:rgba(255,255,255,.82); color:var(--text); letter-spacing:.01em;
}
.card-body{padding:13px 14px 14px; display:flex; flex-direction:column; gap:8px; flex:1}
.card-name{font-size:15px; font-weight:600; letter-spacing:-.01em; line-height:1.34;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  min-height:2.68em}
.card-meta{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-2)}
.rating{color:var(--orange); font-weight:600; font-variant-numeric:tabular-nums}
.card-actions{margin-top:auto; display:flex; gap:7px; padding-top:3px}
.mini-btn{
  flex:1; padding:6px 0; border-radius:9px; font-size:12.5px; font-weight:600;
  background:rgba(0,0,0,.05); transition:all .18s; text-align:center;
}
.mini-btn:hover{background:rgba(0,0,0,.1)}
.mini-btn:active{transform:scale(.93); background:rgba(0,0,0,.18); transition:all .05s linear}
.mini-btn.suggest{background:rgba(0,113,227,.1); color:var(--blue)}
.mini-btn.suggest:hover{background:rgba(0,113,227,.18)}
.mini-btn.suggest:active{background:rgba(0,113,227,.32)}

/* 右侧状态栏（聊天流） */
.feed{flex:1; min-height:0; overflow-y:auto; padding:14px 15px 18px;
  display:flex; flex-direction:column; gap:11px}
.msg{display:flex; gap:9px; animation:msgIn .32s cubic-bezier(.4,0,.2,1)}
@keyframes msgIn{from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none}}
.msg.sys{justify-content:center}
.msg-body{flex:1; min-width:0}
.msg-who{font-size:12.5px; font-weight:600; margin-bottom:3px; display:flex;
  align-items:center; gap:6px}
.msg-time{font-size:11px; color:var(--text-3); font-weight:400}
.bubble{
  background:rgba(0,0,0,.055); border-radius:14px; border-top-left-radius:5px;
  padding:9px 13px; font-size:14px; line-height:1.45; word-break:break-word;
}
.msg.mine .bubble{background:rgba(0,113,227,.1); border-top-left-radius:14px; border-top-right-radius:5px}
.bubble .shop-ref{font-weight:600; color:var(--blue)}
.sys-text{font-size:12.5px; color:var(--text-2); text-align:center; padding:2px 8px}
.feed-input{
  flex:none; border-top:1px solid var(--line); padding:11px 13px; display:flex; gap:8px;
  background:rgba(255,255,255,.6);
}
.feed-input input{
  flex:1; min-width:0; padding:9px 14px; border-radius:980px; border:1px solid var(--line);
  background:rgba(0,0,0,.028); font-size:14px; outline:none; transition:all .2s;
}
.feed-input input:focus{background:#fff; border-color:rgba(0,113,227,.4);
  box-shadow:0 0 0 3px rgba(0,113,227,.1)}
.send-btn{
  width:36px; height:36px; border-radius:50%; background:var(--blue); color:#fff;
  display:flex; align-items:center; justify-content:center; flex:none;
  transition:all .2s; font-size:15px;
}
.send-btn:hover{background:var(--blue-hover); transform:scale(1.06)}
.send-btn:active{transform:scale(.94)}

/* 侧栏收起时的把手 */
.handle{
  position:absolute; top:50%; transform:translateY(-50%); z-index:50;
  width:20px; height:56px; border-radius:8px; background:var(--card);
  box-shadow:var(--shadow); display:none; align-items:center; justify-content:center;
  font-size:11px; color:var(--text-3); transition:all .2s; border:1px solid rgba(0,0,0,.05);
}
.handle:hover{color:var(--text); box-shadow:var(--shadow-lg)}
.handle.show{display:flex}
#handle-left{left:6px}
#handle-right{right:6px}

/* 筛选组 */
.fgroup{margin-bottom:20px}
.fgroup:last-child{margin-bottom:0}
.flabel{
  font-size:12px; font-weight:600; color:var(--text-2); text-transform:uppercase;
  letter-spacing:.045em; margin-bottom:9px; display:flex; justify-content:space-between;
  align-items:center;
}
.flabel .val{color:var(--blue); text-transform:none; letter-spacing:0; font-size:12.5px;
  font-variant-numeric:tabular-nums}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{
  padding:6px 12px; border-radius:980px; font-size:13px; font-weight:500;
  background:rgba(0,0,0,.045); transition:all .18s; white-space:nowrap;
}
.chip:hover{background:rgba(0,0,0,.09)}
.chip:active{transform:scale(.94); transition:transform .07s}
.chip.on{background:var(--text); color:#fff}
.chip.on:active{background:#000}
.slider{
  width:100%; -webkit-appearance:none; appearance:none; height:4px; border-radius:2px;
  background:rgba(0,0,0,.1); outline:none; margin:6px 0;
}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.04); cursor:grab;
  transition:transform .15s;
}
.slider::-webkit-slider-thumb:hover{transform:scale(1.12)}
.slider::-webkit-slider-thumb:active{cursor:grabbing; transform:scale(1.05)}

/* 详情抽屉 */
.overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.32); backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px); z-index:200; opacity:0; pointer-events:none;
  transition:opacity .3s cubic-bezier(.4,0,.2,1);
}
.overlay.show{opacity:1; pointer-events:auto}
.detail{
  position:fixed; top:0; right:0; bottom:0; width:min(430px,92vw); background:var(--bg);
  z-index:201; transform:translateX(100%); transition:transform .36s cubic-bezier(.32,.72,0,1);
  display:flex; flex-direction:column; box-shadow:-10px 0 40px rgba(0,0,0,.14);
}
.detail.show{transform:none}
.detail-hero{
  height:210px; background:linear-gradient(135deg,#e8e8ec,#dcdce2); position:relative;
  display:flex; align-items:center; justify-content:center; font-size:64px;
  line-height:1; flex:none; min-height:210px;
}
.detail-close{
  position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.86); backdrop-filter:blur(12px); display:flex;
  align-items:center; justify-content:center; font-size:15px; color:var(--text);
  transition:all .2s;
}
.detail-close:hover{background:#fff; transform:scale(1.08)}
.detail-body{flex:1; overflow-y:auto; padding:22px 24px 30px}
.detail-name{font-size:25px; font-weight:700; letter-spacing:-.02em; margin:0 0 7px;
  line-height:1.25}
.detail-tags{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:19px}
.tag{
  font-size:12.5px; font-weight:500; padding:4px 11px; border-radius:980px;
  background:rgba(0,0,0,.05); color:var(--text-2);
}
.detail-rows{display:flex; flex-direction:column; gap:1px; margin-bottom:22px;
  background:var(--line); border-radius:14px; overflow:hidden}
.drow{
  display:flex; gap:14px; padding:13px 16px; background:var(--card); align-items:flex-start;
}
.drow-k{font-size:13.5px; color:var(--text-2); width:64px; flex:none}
.drow-v{font-size:14px; flex:1; word-break:break-word}
.drow-v.empty{color:var(--text-3); font-style:italic}
.detail-actions{display:flex; gap:10px}
.detail-actions .btn{flex:1; padding:11px 0; font-size:15px}

/* 弹窗（输入名字） */
.modal-wrap{
  position:fixed; inset:0; z-index:300; display:flex; align-items:center;
  justify-content:center; background:rgba(0,0,0,.35); backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px); opacity:0; pointer-events:none; transition:opacity .3s;
  padding:20px;
}
.modal-wrap.show{opacity:1; pointer-events:auto}
.modal{
  background:var(--card); border-radius:22px; padding:32px 30px 26px; width:100%;
  max-width:380px; box-shadow:var(--shadow-lg); transform:scale(.94);
  transition:transform .34s cubic-bezier(.32,.72,0,1);
}
.modal-wrap.show .modal{transform:none}
.modal h2{margin:0 0 7px; font-size:21px; font-weight:700; letter-spacing:-.02em}
.modal p{margin:0 0 21px; font-size:14px; color:var(--text-2); line-height:1.45}
.modal input{
  width:100%; padding:12px 16px; border-radius:12px; border:1px solid var(--line);
  background:rgba(0,0,0,.028); font-size:16px; outline:none; margin-bottom:18px;
  transition:all .2s;
}
.modal input:focus{background:#fff; border-color:rgba(0,113,227,.4);
  box-shadow:0 0 0 3px rgba(0,113,227,.1)}
.quick-names{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:20px}
.quick-names .chip{font-size:13px}

/* 空态 */
.empty{
  grid-column:1/-1; text-align:center; padding:70px 20px; color:var(--text-2);
}
.empty-icon{font-size:42px; margin-bottom:14px; opacity:.34}
.empty-text{font-size:15px}

/* toast */
.toast{
  position:fixed; bottom:28px; left:50%; transform:translate(-50%, 74px);
  background:rgba(29,29,31,.92); backdrop-filter:blur(14px); color:#fff;
  padding:11px 22px; border-radius:980px; font-size:14px; font-weight:500;
  z-index:400; transition:transform .34s cubic-bezier(.32,.72,0,1);
  box-shadow:0 8px 28px rgba(0,0,0,.2);
}
.toast.show{transform:translate(-50%,0)}


/* ============ AA 分账 ============ */
.split-modal{max-width:420px; padding:24px 24px 22px; max-height:92vh; overflow-y:auto}
.split-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px}
.split-head h2{margin:0; font-size:20px; font-weight:700; letter-spacing:-.02em}

.split-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 15px; background:rgba(0,0,0,.03); border-radius:13px; margin-bottom:18px;
}
.split-k{font-size:14.5px; font-weight:500}
.stepper{display:flex; align-items:center; gap:4px}
.stepper button{
  width:32px; height:32px; border-radius:50%; background:rgba(0,0,0,.06);
  font-size:17px; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:all .18s;
}
.stepper button:hover{background:rgba(0,0,0,.11)}
.stepper button:active{transform:scale(.92)}
.stepper span{
  min-width:44px; text-align:center; font-size:17px; font-weight:600;
  font-variant-numeric:tabular-nums;
}

.split-label{
  font-size:12px; font-weight:600; color:var(--text-2); text-transform:uppercase;
  letter-spacing:.045em; margin-bottom:9px; display:flex; justify-content:space-between;
}
.split-label span{text-transform:none; letter-spacing:0; color:var(--text-3); font-weight:500}

.split-list{
  border-radius:13px; background:rgba(0,0,0,.025); margin-bottom:12px;
  max-height:210px; overflow-y:auto; padding:4px 0;
}
.split-list:empty::after{
  content:'还没有记录，下面添加一笔'; display:block; text-align:center;
  padding:24px 10px; color:var(--text-3); font-size:13px;
}
.sitem{
  display:flex; align-items:center; gap:11px; padding:10px 14px;
  border-bottom:1px solid rgba(0,0,0,.045);
  transition:background .16s;
}
.sitem:last-child{border-bottom:none}
.sitem:hover{background:rgba(0,0,0,.02)}
.sitem-name{
  flex:1; font-size:14.5px; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sitem-name.anon{color:var(--text-3); font-style:italic}
.sitem-amt{
  font-size:14.5px; font-weight:600; font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.sitem-del{
  width:26px; height:26px; border-radius:50%; background:rgba(0,0,0,.05);
  font-size:13px; color:var(--text-3); display:flex; align-items:center;
  justify-content:center; flex:none; transition:all .18s;
}
.sitem-del:hover{background:rgba(255,59,48,.12); color:var(--red)}

.split-add{display:flex; gap:7px; margin-bottom:18px}
.split-add input{
  padding:10px 13px; border-radius:11px; border:1px solid var(--line);
  background:rgba(0,0,0,.028); font-size:14.5px; outline:none; transition:all .2s;
  min-width:0;
}
.split-add input:first-child{flex:1.35}
.split-add input:nth-child(2){flex:1}
.split-add input:focus{background:#fff; border-color:rgba(0,113,227,.4);
  box-shadow:0 0 0 3px rgba(0,113,227,.1)}
.split-add input::-webkit-outer-spin-button,
.split-add input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.add-btn{
  width:44px; border-radius:11px; background:var(--blue); color:#fff;
  font-size:19px; font-weight:400; flex:none; transition:all .2s;
}
.add-btn:hover{background:var(--blue-hover)}
.add-btn:active{transform:scale(.94)}

.split-result{
  background:rgba(0,113,227,.055); border-radius:13px; padding:14px 16px;
  margin-bottom:16px;
}
.sr-row{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:14px; color:var(--text-2); padding:3px 0;
}
.sr-row span:last-child{font-variant-numeric:tabular-nums; color:var(--text); font-weight:500}
.sr-row.big{
  font-size:15px; font-weight:600; color:var(--text);
  border-top:1px solid rgba(0,113,227,.16); margin-top:8px; padding-top:10px;
}
.sr-row.big span:last-child{font-size:24px; font-weight:700; letter-spacing:-.02em; color:var(--blue)}
.sr-hint{font-size:12px; color:var(--text-3); text-align:right; margin-top:2px}

.split-actions{display:flex; gap:10px}
.split-actions .btn{flex:1; padding:11px 0; font-size:15px}

/* 结算大屏 */
.settle-modal{max-width:380px; text-align:center; padding:30px 26px 24px}
.settle-icon{font-size:36px; margin-bottom:10px}
.settle-label{font-size:14px; color:var(--text-2); margin-bottom:6px}
.settle-amount{
  font-size:46px; font-weight:700; letter-spacing:-.03em; color:var(--blue);
  font-variant-numeric:tabular-nums; line-height:1.1; margin-bottom:6px;
}
.settle-sub{font-size:13.5px; color:var(--text-3); margin-bottom:18px}
.settle-list{
  background:rgba(0,0,0,.03); border-radius:12px; padding:8px 0; margin-bottom:18px;
  max-height:190px; overflow-y:auto; text-align:left;
}
.settle-list .sitem{border-bottom:1px solid rgba(0,0,0,.04)}
.settle-list .sitem:last-child{border-bottom:none}

/* 手机适配 */
@media(max-width:820px){
  .split-modal{max-width:100%; width:100%; border-radius:22px 22px 0 0;
    padding:22px 18px calc(22px + env(safe-area-inset-bottom));
    position:fixed; left:0; right:0; bottom:0; top:auto; max-height:88vh;
    transform:translateY(100%);
  }
  #splitModal{align-items:flex-end; padding:0}
  #splitModal.show .split-modal{transform:none}
  .settle-modal{max-width:100%; width:100%; border-radius:22px 22px 0 0;
    position:fixed; left:0; right:0; bottom:0; top:auto;
    padding:28px 20px calc(20px + env(safe-area-inset-bottom));
    transform:translateY(100%);
  }
  #settleModal{align-items:flex-end; padding:0}
  #settleModal.show .settle-modal{transform:none}
  .settle-amount{font-size:40px}
}


/* ============ 数据库模块 ============ */
.db-wrap{
  flex:1; display:flex; gap:14px; padding:14px; min-height:0;
}
.db-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:14px}
.db-side{
  width:220px; flex:none; background:var(--card); border-radius:var(--radius);
  box-shadow:var(--shadow); display:flex; flex-direction:column;
  overflow:hidden; border:1px solid rgba(0,0,0,.04);
}

/* 条目列表 */
.entry-list{
  flex:1; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column; gap:8px; padding:2px 2px 20px;
}
.entry{
  background:var(--card); border-radius:var(--radius-sm);
  border:1px solid rgba(0,0,0,.05); box-shadow:0 1px 2px rgba(0,0,0,.03);
  padding:14px 16px; cursor:pointer; transition:all .2s cubic-bezier(.4,0,.2,1);
  display:flex; align-items:center; gap:14px;
}
.entry:hover{background:#fcfcfd; box-shadow:var(--shadow); transform:translateX(2px)}
.entry:active{transform:scale(.99); background:#f8f8fa}
.entry-icon{
  width:34px; height:34px; border-radius:10px; flex:none;
  background:linear-gradient(135deg,#f0f0f2,#e4e4e8);
  display:flex; align-items:center; justify-content:center; font-size:17px;
}
.entry-body{flex:1; min-width:0}
.entry-title{
  font-size:15px; font-weight:600; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:3px;
}
.entry-meta{font-size:12.5px; color:var(--text-3); display:flex; gap:8px; align-items:center}
.entry-arrow{color:var(--text-3); font-size:15px; flex:none; opacity:.5}

/* 外链列表 */
.link-list{flex:1; min-height:0; overflow-y:auto; padding:6px 10px 18px}
.link-item{
  display:block; padding:10px 12px; border-radius:10px; text-decoration:none;
  color:var(--text); font-size:14px; transition:background .16s;
  position:relative; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.link-item:hover{background:rgba(0,0,0,.045)}
.link-item:active{background:rgba(0,0,0,.08)}

/* 条目详情页 */
#dbDetail{flex-direction:row; justify-content:center; overflow-y:auto}
.entry-detail{max-width:900px; width:100%; padding:26px 32px 60px; box-sizing:border-box}
.ed-back{
  display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:500;
  color:var(--blue); margin-bottom:22px; cursor:pointer;
  padding:10px 18px; border-radius:980px; background:rgba(0,113,227,.08);
  transition:all .2s cubic-bezier(.4,0,.2,1);
}
.ed-back:hover{background:rgba(0,113,227,.14); transform:translateX(-2px)}
.ed-back:active{transform:scale(.96)}
.ed-title{font-size:28px; font-weight:700; letter-spacing:-.02em; margin:0 0 8px; line-height:1.3}
.ed-meta{font-size:13.5px; color:var(--text-3); margin-bottom:24px}
.ed-section{margin-bottom:24px}
.ed-label{
  font-size:12px; font-weight:600; color:var(--text-2); text-transform:uppercase;
  letter-spacing:.045em; margin-bottom:10px;
}
.ed-summary{
  font-size:16px; line-height:1.75; color:var(--text); white-space:pre-wrap;
  word-break:break-word;
}
.ed-link-box{
  background:rgba(0,0,0,.03); border-radius:12px; padding:14px 16px;
  position:relative;
}
.ed-link-text{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:14.5px; line-height:1.7; word-break:break-all;
  white-space:pre-wrap; color:var(--text); padding-right:0;
}
.ed-actions{display:flex; gap:10px; margin-top:22px; flex-wrap:wrap}
.ed-actions .btn{flex:0 0 auto}

/* 表单弹层 */
.form-modal{max-width:520px}
.form-field{margin-bottom:16px}
.form-field label{
  display:block; font-size:13px; font-weight:600; color:var(--text-2);
  margin-bottom:7px;
}
.form-field input, .form-field textarea{
  width:100%; padding:11px 14px; border-radius:11px;
  border:1px solid var(--line); background:rgba(0,0,0,.028);
  font-size:15px; outline:none; transition:all .2s; font-family:inherit;
  resize:vertical;
}
.form-field textarea{min-height:90px; line-height:1.6}
.form-field input:focus, .form-field textarea:focus{
  background:#fff; border-color:rgba(0,113,227,.4);
  box-shadow:0 0 0 3px rgba(0,113,227,.1);
}
.form-hint{font-size:12px; color:var(--text-3); margin-top:5px}

@media(max-width:820px){
  .db-wrap{display:block; padding:10px}
  .db-main{gap:10px}
  .db-side{
    width:auto; margin-top:12px; border-radius:14px;
    max-height:none;
  }
  .link-list{max-height:200px}
  .entry{padding:13px 14px}
  .entry-icon{width:32px; height:32px; font-size:16px}
  .entry-detail{padding:16px 16px 100px}
  .ed-title{font-size:21px}
}

/* ============ 响应式 ============ */
@media(max-width:1240px){
  .side{width:224px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(178px,1fr))}
}

/* ---- 平板 ---- */
@media(max-width:1024px){
  .eat-wrap{padding:12px; gap:12px}
  .side{width:210px}
}

/* ---- 手机：筛选/状态栏变底部抽屉 ---- */
@media(max-width:820px){
  #home{padding:20px 16px 40px}
  .module-grid{gap:12px; grid-template-columns:1fr}
  .module-card{padding:20px 18px; min-height:120px}
  .module-emoji{font-size:26px; margin-bottom:10px}
  .module-name{font-size:17px}
  body{overflow:auto}
  .topbar{height:48px; padding:0 10px; background:rgba(245,245,247,.94)}
  .brand span:last-child{display:none}
  .nav-tabs{gap:0}
  .nav-tab{padding:0 12px; height:36px; display:inline-flex; align-items:center; font-size:14px}
  .user-chip{padding:0 12px 0 5px; height:38px}
  .user-name{max-width:60px; font-size:13px}
  .avatar{width:28px; height:28px; font-size:13.5px}

  .eat-wrap{padding:10px; gap:10px; display:block; position:relative}

  /* 手机：页面整体滚动，grid 不内部滚动 */
  #eat{min-height:auto; overflow:visible}
  .main-area{gap:10px; min-height:auto; display:flex; flex-direction:column}
  /* 用「父选择器 + 元素」提升特异性，替代 !important */
  html body{overflow-y:auto; height:auto}
  body .app{height:auto; min-height:100vh; overflow:visible}
  .main-area .grid{
    overflow:visible; flex:none;
    height:auto; max-height:none;
  }

  /* 工具栏：手机版 —— 搜索框 + 随便来一个 + 家数，全部一行 */
  .toolbar{
    padding:7px 9px; gap:7px; position:sticky; top:48px; z-index:40;
    background:rgba(245,245,247,.94);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-radius:14px; margin-bottom:2px;
    box-shadow:0 6px 16px -8px rgba(0,0,0,.14);
    flex-wrap:nowrap; align-items:center;
  }
  .search-box{
    flex:1 1 auto; min-width:0; width:auto;
    height:40px; padding:0 13px; border-radius:12px; gap:8px;
  }
  .search-box input{font-size:15px}
  .search-ic{font-size:15px}
  .search-clear{width:19px; height:19px; font-size:11px}

  /* 随机按钮：手机版显示"随机"两字 */
  .toolbar .tool-btn.primary{
    flex:none; width:auto; height:40px; padding:0 14px; border-radius:12px;
    font-size:14px; gap:5px;
  }
  .toolbar .tool-btn.primary .tlabel{display:none}
  .toolbar .tool-btn.primary .tlabel-short{display:inline}

  /* 隐藏：AA分账（底部条有）、收起按钮（底部条有筛选/消息） */
  .toolbar .tool-btn[onclick*="toggleSide"],
  .toolbar .tool-btn[onclick*="openSplit"]{display:none}
  .tool-spacer{display:none}

  /* 计数进搜索框了，列表行不需要 */
  .toolbar .count-pill{display:none}
  .list-count{display:none}

  /* 卡片：两列 */
  .grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:min-content; gap:10px; padding-bottom:12px}
  /* 手机按下反馈更明显（手指挡视线） */
  .card:active{
    transform:scale(.966);
    box-shadow:0 1px 2px rgba(0,0,0,.16);
    filter:brightness(.82) saturate(.88);
    transition:transform .06s linear, box-shadow .06s linear, filter .06s linear;
  }
  .card:active::after{background:rgba(0,0,0,.1); transition:background 0s}
  .mini-btn:active{transform:scale(.92)}

  .card-name{font-size:14px}
  .card-body{padding:11px 12px 12px; gap:7px}
  .card-img{height:112px}
  .card-img .ph-emoji{font-size:34px}
  .card-type-badge{font-size:10.5px; padding:3px 8px; top:8px; left:8px}
  /* 卡片按钮：加大到 40px */
  .mini-btn{font-size:13.5px; padding:0; height:40px; line-height:40px; border-radius:11px}

  /* 左右栏 → 底部抽屉 */
  .side{
    position:fixed; left:0; right:0; bottom:0; top:auto; width:auto;
    max-height:76vh; border-radius:22px 22px 0 0; z-index:120;
    transform:translateY(100%); transition:transform .36s cubic-bezier(.32,.72,0,1);
    box-shadow:0 -10px 40px rgba(0,0,0,.18);
  }
  .side.open{transform:none}
  .side.hidden{display:none}
  /* 抽屉态下忽略桌面版收起样式（.side.side 特异性 0,2,0，且在此之后） */
  .side.side{margin:0; opacity:1}
  .side-head{padding:18px 20px 14px}
  .side-body{padding:6px 20px 26px; max-height:calc(76vh - 120px)}
  /* 抽屉把手 */
  .side-head::before{
    content:''; position:absolute; top:7px; left:50%; transform:translateX(-50%);
    width:36px; height:4px; border-radius:2px; background:rgba(0,0,0,.16);
  }
  .side-head{position:relative; padding-top:20px}

  /* 圆角取消（手机上铺满） */
  .side{border-radius:22px 22px 0 0}

  /* 手机上不再需要侧边把手 */
  .handle.handle{display:none}

  /* 底部遮罩 */
  .sheet-mask{
    position:fixed; inset:0; background:rgba(0,0,0,.34); z-index:110;
    opacity:0; pointer-events:none; transition:opacity .3s;
    backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  }
  .sheet-mask.show{opacity:1; pointer-events:auto}

  /* 筛选标签：加大点按区 + 更好点 */
  .chip{padding:0 15px; height:38px; display:inline-flex; align-items:center;
    font-size:14px; border-radius:12px}
  .fgroup{margin-bottom:24px}
  .flabel{font-size:12.5px; margin-bottom:11px}

  /* 状态栏抽屉里的 feed */
  .feed{padding:12px 18px 16px; max-height:calc(76vh - 170px)}
  .feed-input{padding:10px 14px 16px}

  /* 详情页 → 全屏 */
  .detail{width:100vw; border-radius:0}
  .detail-hero{height:180px}
  .detail-body{padding:20px 20px 34px}

  /* 手机底部工具条（固定） */
  .mobile-bar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:100;
    background:var(--bg-glass); backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-top:1px solid var(--line); padding:8px 12px calc(8px + env(safe-area-inset-bottom));
    gap:9px; align-items:center;
  }
  .mobile-bar .mb-btn{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:6px 0; border-radius:11px; font-size:11px; color:var(--text-2);
    transition:background .15s;
  }
  .mobile-bar .mb-btn:active{background:rgba(0,0,0,.06)}
  .mobile-bar .mb-btn .ic{font-size:19px; line-height:1}
  .mobile-bar .mb-btn.on{color:var(--blue); font-weight:600}

  /* 给底部工具条留空间 */
  .eat-wrap{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
}

/* 桌面默认隐藏手机底部条 */
.mobile-bar{display:none}
.sheet-mask{display:none}
@media(max-width:820px){
  .mobile-bar{display:flex}
  .sheet-mask{display:block}
}

/* ---- 小屏手机 ---- */
@media(max-width:400px){
  .grid{gap:8px}
  .card-name{font-size:13.5px}
  .card-body{padding:9px 10px 10px}
  .card-img .ph-emoji{font-size:30px}
  .tool-btn{padding:7px 10px}
}

/* ============================================================
   工具类（替代内联 style）
   ============================================================ */

/* 小号幽灵按钮 */
.btn-xs{ padding:4px 11px; font-size:12.5px }

/* 小号计数胶囊 */
.count-pill-sm{ font-size:11.5px; padding:3px 9px }

/* 弹窗标题 / 副标题 */
.modal-title{ margin:0 0 6px; font-size:20px }
.modal-sub{ margin:0 0 20px; font-size:13.5px; color:var(--text-2) }

/* 弹窗底部按钮行：两个按钮等宽平分 */
.modal-actions{ display:flex; gap:10px; margin-top:22px }
.modal-actions > .btn-block{ flex:1; padding:11px 0 }

/* 通栏主按钮（弹窗底部） */
.btn-wide{ width:100%; padding:12px 0; font-size:15px }
.btn-wide-lg{ padding:13px 0; font-size:15.5px; margin-top:6px }

/* 详情页里的关闭按钮（不绝对定位，跟随文档流） */
.detail-close-inline{ position:static }

/* 卡片封面图（绝对定位铺满图区） */
.card-cover{
  width:100%; height:100%; object-fit:cover;
  position:absolute; inset:0;
}

/* 图片加载失败 → 隐藏（JS 加 .img-failed） */
.img-failed{ display:none }

/* 详情页大图 */
.detail-cover{
  width:100%; height:100%; object-fit:cover;
}

/* 详情页大图加载失败时的 emoji 回退 */
.hero-emoji{ font-size:64px }

/* 空状态提示的顶部留白 */
.sys-text-empty{ margin-top:20px }

/* 消息小头像（24px） */
.avatar-sm{
  width:24px; height:24px; font-size:12px;
}

/* 卡片底部的菜系/场所行 */
.card-meta{
  font-size:12.5px; color:var(--text-3);
  display:flex; gap:6px; flex-wrap:wrap;
}

/* 分隔点 */
.dot-sep{ opacity:.5 }