/* 担保运营后台 —— 亮色极简：白底高对比，一屏一页，卡片上直接操作 */
:root{
  --bg:#f4f6fa; --card:#ffffff; --card2:#f7f9fc; --line:#e2e8f0;
  --txt:#16202f; --mute:#5c6a80; --gold:#a97d1f; --gold2:#8a6109;
  --green:#0f8a52; --orange:#b86413; --red:#c93030; --blue:#2e6bd0;
  --r:14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* hidden 属性必须真的隐藏：否则 .mask 的 display:grid 会盖掉它，
   导致遮罩层常驻，整页发灰发糊、还点不动 */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt); min-height:100vh;
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  padding-bottom:32px;
}
b{font-weight:600}
.slg{font-size:11px;color:var(--mute);letter-spacing:.4px;margin-top:2px}

/* 顶栏 */
.bar{
  display:flex;align-items:center;gap:10px;justify-content:space-between;
  padding:14px 16px;
  background:linear-gradient(180deg,#ffffff,#f8fafd);
  border-bottom:1px solid var(--line); box-shadow:0 1px 3px rgba(16,24,40,.05);
  position:sticky; top:0; z-index:20;
}
.brandbox{display:flex;align-items:center;gap:10px;min-width:0}
.mark{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:19px;
  background:linear-gradient(160deg,#fdf6e6,#f3e9d0); border:1px solid #e8d6a8;
}
.bar .right{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mute)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--mute)}
.dot.on{background:var(--green);box-shadow:0 0 6px rgba(15,138,82,.5)}
.dot.off{background:var(--red)}
.who{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 分页 */
.tabs{display:flex;gap:6px;padding:10px 12px;background:var(--bg);position:sticky;top:66px;z-index:19}
.tab{
  flex:1;padding:9px 4px;border-radius:10px;border:1px solid var(--line);
  background:var(--card);color:var(--mute);font-size:13.5px;cursor:pointer;
}
.tab.active{background:linear-gradient(160deg,#fdf5e2,#faefd3);color:var(--gold2);border-color:#e5d2a0;font-weight:600}

main{padding:0 12px;max-width:760px;margin:0 auto}

/* 数字条 */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:4px 0 12px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 8px;text-align:center;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.stat .n{font-size:17px;font-weight:700;color:var(--gold2)}
.stat .l{font-size:11px;color:var(--mute);margin-top:2px}

/* 搜索与筛选 */
.search{display:flex;gap:8px;margin-bottom:8px}
.search input{
  flex:1;background:var(--card);border:1px solid var(--line);border-radius:11px;
  padding:10px 12px;color:var(--txt);font-size:14px;outline:none;
}
.search input::placeholder{color:#9aa6b8}
.search input:focus{border-color:#d9bc78;box-shadow:0 0 0 3px rgba(217,188,120,.2)}
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:10px}
.chip{
  padding:6px 12px;border-radius:20px;background:var(--card);border:1px solid var(--line);
  color:var(--mute);font-size:12.5px;white-space:nowrap;cursor:pointer;
}
.chip.active{background:#fdf5e2;color:var(--gold2);border-color:#e5d2a0;font-weight:600}

/* 群卡片 */
.gcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin-bottom:10px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.gtop{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.gtitle{font-size:15px;font-weight:600;line-height:1.35}
.gmeta{font-size:12px;color:var(--mute);margin-top:3px}
.tag{font-size:11px;padding:3px 8px;border-radius:8px;white-space:nowrap;border:1px solid transparent}
.tag.green{background:rgba(15,138,82,.09);color:var(--green);border-color:rgba(15,138,82,.24)}
.tag.orange{background:rgba(184,100,19,.09);color:var(--orange);border-color:rgba(184,100,19,.24)}
.tag.red{background:rgba(201,48,48,.08);color:var(--red);border-color:rgba(201,48,48,.22)}
.tag.gray{background:#eef2f8;color:#5c6a80;border-color:#dbe3ed}
.tag.blue{background:rgba(46,107,208,.09);color:var(--blue);border-color:rgba(46,107,208,.24)}

.kv{display:flex;flex-wrap:wrap;gap:6px 14px;margin:9px 0 10px;font-size:12.5px;color:var(--mute)}
.kv b{color:var(--txt);font-weight:600}
.acts{display:flex;flex-wrap:wrap;gap:6px}
.btn{
  border:1px solid var(--line);background:var(--card2);color:var(--txt);
  padding:8px 12px;border-radius:10px;font-size:13px;cursor:pointer;
}
.btn:active{transform:scale(.97)}
.btn.gold{background:linear-gradient(160deg,#fdf6e6,#f8ecd0);color:var(--gold2);border-color:#e5d2a0;font-weight:600}
.btn.warn{background:#fffaf3;color:var(--orange);border-color:#f0d6b4}
.btn.danger{background:#fff7f7;color:var(--red);border-color:#f1cdcd}
.btn.ghost{background:transparent;color:var(--mute)}
.btn:disabled{opacity:.45}

/* 列表块 */
.block{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin-bottom:10px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.block h3{margin:0 0 8px;font-size:14px;font-weight:600;color:var(--gold2)}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--line);font-size:13.5px}
.row:first-of-type{border-top:0}
.row .sub{font-size:11.5px;color:var(--mute)}
.empty{text-align:center;color:var(--mute);padding:26px 10px;font-size:13px}
.loading{text-align:center;color:var(--mute);padding:40px 0}

/* 弹层 */
.mask{position:fixed;inset:0;background:rgba(16,24,40,.42);z-index:60;display:grid;place-items:end center;padding:0;backdrop-filter:blur(2px)}
.sheet{
  width:100%;max-width:520px;background:var(--card);border:1px solid var(--line);
  border-radius:18px 18px 0 0;padding:16px 16px 22px;box-shadow:0 -8px 32px rgba(16,24,40,.16);
  max-height:86vh;overflow:auto;-webkit-overflow-scrolling:touch;
}
/* 分类选择器：点一下就用，不用手打分类名 */
.catlist{max-height:50vh;overflow:auto;margin:8px -2px 2px;padding:0 2px}
.catopt{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  background:var(--card2);border:1px solid var(--line);border-radius:11px;
  padding:10px 12px;margin:6px 0;font-size:13.5px;color:var(--txt);
  font-family:inherit;text-align:left;cursor:pointer;
}
.catopt.kid{margin-left:16px;width:calc(100% - 16px);font-size:13px}
.catopt.top{background:#fdf7e8;border-color:#e7d3a3;font-weight:600}
.catopt .sub{font-size:11.5px;color:var(--mute);font-weight:400;flex:0 0 auto}
.catopt:active{transform:scale(.995);border-color:#d9bc78}
.catopt:disabled{opacity:.55}
.sheet h3{margin:0 0 4px;font-size:16px}
.sheet p{margin:0 0 12px;color:var(--mute);font-size:12.5px}
.sheet label{display:block;font-size:12.5px;color:var(--mute);margin:10px 0 5px}
.sheet input,.sheet textarea{
  width:100%;background:#fff;border:1px solid var(--line);border-radius:11px;
  padding:11px 12px;color:var(--txt);font-size:14px;outline:none;font-family:inherit;
}
.sheet input:focus,.sheet textarea:focus{border-color:#d9bc78;box-shadow:0 0 0 3px rgba(217,188,120,.2)}
.sheet .foot{display:flex;gap:8px;margin-top:14px}
.sheet .foot .btn{flex:1;padding:11px}

/* toast */
.toasts{position:fixed;left:0;right:0;bottom:18px;z-index:80;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{
  background:#1f2937;border:1px solid #374151;color:#fff;
  padding:10px 16px;border-radius:12px;font-size:13px;max-width:88%;
  box-shadow:0 8px 24px rgba(16,24,40,.24);transition:.3s;
}
.toast.err{background:#b42318;border-color:#912018;color:#fff}

/* 群库：群 ID 一眼看清，方便对着手机抄到后台 */
.idline{
  margin-top:8px;font-size:12.5px;color:var(--mute);background:var(--card2);
  border:1px dashed var(--line);border-radius:9px;padding:7px 10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all;
}
.idline b{color:var(--txt);font-size:13.5px;letter-spacing:.3px}
.btn.tiny{padding:4px 8px;font-size:11.5px}

@media (min-width:640px){
  .stats{grid-template-columns:repeat(4,1fr)}
  .mask{place-items:center}
  .sheet{border-radius:18px}
}

/* ================= 登录页 ================= */
.login-body{display:grid;place-items:center;min-height:100vh;padding:24px}
.login-wrap{width:100%;max-width:380px}
.login-brand{text-align:center;margin-bottom:18px}
.login-brand .crest{
  width:62px;height:62px;margin:0 auto 12px;border-radius:18px;display:grid;place-items:center;font-size:28px;
  background:linear-gradient(160deg,#fdf6e6,#f3e9d0);border:1px solid #e8d6a8;
}
.login-brand h1{font-size:19px;margin:0 0 6px}
.login-brand p{margin:0;color:var(--mute);font-size:12.5px}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 2px 10px rgba(16,24,40,.06)}
.field{display:block;margin-bottom:12px}
.field span{display:block;font-size:12.5px;color:var(--mute);margin-bottom:6px}
.field input{
  width:100%;background:#fff;border:1px solid var(--line);border-radius:11px;
  padding:12px;color:var(--txt);font-size:15px;outline:none;
}
.field input:focus{border-color:#d9bc78;box-shadow:0 0 0 3px rgba(217,188,120,.2)}
.err{color:#b42318;font-size:12.5px;margin-bottom:10px}
.btn-gold{background:linear-gradient(160deg,#fdf6e6,#f8ecd0);color:var(--gold2);border:1px solid #e5d2a0;font-weight:600}
.btn-block{width:100%;padding:12px;font-size:15px}
.login-tip{color:var(--mute);font-size:11.5px;text-align:center;margin:12px 0 0}

/* 记住我：长期免登录 */
.remember{display:flex;align-items:center;gap:8px;font-size:13px;color:#5b6474;
  margin:2px 0 12px;cursor:pointer;user-select:none}
.remember input{width:16px;height:16px;accent-color:#b8860b;cursor:pointer}
.remember span{line-height:1.35}

/* 页签多了以后允许横向滑动（手机上不挤成一团） */
.tabs{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tabs .tab{flex:0 0 auto;white-space:nowrap}

/* v12：状态动图 */
.mrow{display:flex;align-items:center;gap:10px;min-width:0}
.mthumb{width:52px;height:52px;border-radius:10px;object-fit:cover;background:#eef2f8;border:1px solid var(--line);flex:0 0 auto}
.mthumb.none{display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--mute)}